1582 lines
73 KiB
TypeScript
1582 lines
73 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
import {
|
|
GitPullRequest,
|
|
AlertOctagon,
|
|
Plus,
|
|
CheckCircle2,
|
|
AlertCircle,
|
|
RefreshCw,
|
|
Search,
|
|
Check,
|
|
XCircle,
|
|
Edit2,
|
|
FolderKanban,
|
|
Coins,
|
|
Calendar,
|
|
User,
|
|
Clock,
|
|
ArrowRight,
|
|
Lock,
|
|
} from 'lucide-react';
|
|
import {
|
|
getProjects,
|
|
getProjectIssues,
|
|
getIssue,
|
|
createIssue,
|
|
updateIssue,
|
|
getProjectChangeRequests,
|
|
getChangeRequest,
|
|
createChangeRequest,
|
|
updateChangeRequest,
|
|
getUsers,
|
|
} from '../services/api';
|
|
import { Modal } from '../components/ui/Modal';
|
|
import { useToast } from '../components/ui/Toast';
|
|
import { HelpTooltip } from '../components/ui/HelpTooltip';
|
|
import { ExportButton } from '../components/ui/ExportButton';
|
|
import { ExportColumn } from '../utils/exportUtils';
|
|
import { useTableSort, SortableTh } from '../utils/tableSort';
|
|
import { useRbac } from '../auth/rbac';
|
|
import { ApprovalStatusBadge, PriorityBadge } from '../components/ui/StatusBadge';
|
|
import { Issue, ChangeRequest, ApprovalStatus, ActivityStatus, Priority } from '../types';
|
|
import {
|
|
getApprovalStatusBadge,
|
|
getPriorityBadge,
|
|
formatDate,
|
|
formatZAR,
|
|
getUserEmail,
|
|
PRIORITY_OPTIONS,
|
|
APPROVAL_STATUS_OPTIONS,
|
|
} from '../lib/formatters';
|
|
|
|
const issueSchema = z.object({
|
|
title: z.string().min(3, 'Issue title required'),
|
|
description: z.string().min(5, 'Description required'),
|
|
priority: z.coerce.number().min(1).max(4),
|
|
assignedTo: z.string().min(1, 'Assignee is required'),
|
|
});
|
|
|
|
const editIssueSchema = z.object({
|
|
title: z.string().min(3, 'Issue title required'),
|
|
description: z.string().min(5, 'Description required'),
|
|
priority: z.coerce.number().min(1).max(4),
|
|
assignedTo: z.string().min(1, 'Assignee is required'),
|
|
status: z.coerce.number(),
|
|
resolution: z.string().min(1, 'Resolution notes required'),
|
|
resolvedAt: z.string().min(1, 'Resolution date and time required'),
|
|
});
|
|
|
|
const toDateTimeLocalValue = (dateString?: string | null): string => {
|
|
const d = dateString ? new Date(dateString) : new Date();
|
|
const validDate = isNaN(d.getTime()) ? new Date() : d;
|
|
const pad = (n: number) => n.toString().padStart(2, '0');
|
|
return `${validDate.getFullYear()}-${pad(validDate.getMonth() + 1)}-${pad(validDate.getDate())}T${pad(validDate.getHours())}:${pad(validDate.getMinutes())}`;
|
|
};
|
|
|
|
const resolveIssueSchema = z.object({
|
|
resolution: z.string().min(5, 'Resolution notes required'),
|
|
status: z.coerce.number(),
|
|
});
|
|
|
|
const changeRequestSchema = z.object({
|
|
title: z.string().min(3, 'Title required'),
|
|
justification: z.string().min(5, 'Justification required'),
|
|
revisedBudget: z.coerce.number().min(0, 'Revised budget must be non-negative'),
|
|
revisionDate: z.string().min(4, 'Revision date required'),
|
|
});
|
|
|
|
const editChangeSchema = z.object({
|
|
title: z.string().min(3, 'Title required'),
|
|
justification: z.string().min(5, 'Justification required'),
|
|
revisedBudget: z.coerce.number().min(0, 'Revised budget must be non-negative'),
|
|
status: z.coerce.number(),
|
|
});
|
|
|
|
const resolveChangeSchema = z.object({
|
|
status: z.coerce.number(),
|
|
justification: z.string().min(3, 'Decision justification required'),
|
|
});
|
|
|
|
type IssueFormValues = z.infer<typeof issueSchema>;
|
|
type EditIssueFormValues = z.infer<typeof editIssueSchema>;
|
|
type ResolveIssueFormValues = z.infer<typeof resolveIssueSchema>;
|
|
type ChangeRequestFormValues = z.infer<typeof changeRequestSchema>;
|
|
type EditChangeFormValues = z.infer<typeof editChangeSchema>;
|
|
type ResolveChangeFormValues = z.infer<typeof resolveChangeSchema>;
|
|
|
|
export const ChangeManagementPage: React.FC = () => {
|
|
const queryClient = useQueryClient();
|
|
const { success, error: toastError } = useToast();
|
|
const { canAdd, canApprove, canExport, canApproveRecord, isMaker } = useRbac();
|
|
|
|
const [selectedProjectId, setSelectedProjectId] = useState<string>('all');
|
|
const [activeTab, setActiveTab] = useState<'issues' | 'changes'>('issues');
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [priorityFilter, setPriorityFilter] = useState('all');
|
|
const [issueStatusFilter, setIssueStatusFilter] = useState('all');
|
|
const [changeStatusFilter, setChangeStatusFilter] = useState('all');
|
|
|
|
// Modals
|
|
const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
|
|
const [isEditIssueModalOpen, setIsEditIssueModalOpen] = useState(false);
|
|
const [editingIssue, setEditingIssue] = useState<Issue | null>(null);
|
|
|
|
const [isResolveIssueModalOpen, setIsResolveIssueModalOpen] = useState(false);
|
|
const [resolvingIssue, setResolvingIssue] = useState<Issue | null>(null);
|
|
|
|
const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
|
|
const [isEditChangeModalOpen, setIsEditChangeModalOpen] = useState(false);
|
|
const [editingChange, setEditingChange] = useState<ChangeRequest | null>(null);
|
|
|
|
const [isResolveChangeModalOpen, setIsResolveChangeModalOpen] = useState(false);
|
|
const [resolvingChange, setResolvingChange] = useState<ChangeRequest | null>(null);
|
|
|
|
// Queries
|
|
const { data: projects = [], isLoading: loadingProjects } = useQuery({
|
|
queryKey: ['projects'],
|
|
queryFn: () => getProjects(),
|
|
});
|
|
|
|
const { data: users = [] } = useQuery({
|
|
queryKey: ['users-directory'],
|
|
queryFn: () => getUsers(1, 200),
|
|
});
|
|
|
|
const effectiveProjectId = selectedProjectId !== 'all' ? selectedProjectId : projects[0]?.id;
|
|
|
|
const {
|
|
data: issues = [],
|
|
isLoading: loadingIssues,
|
|
refetch: refetchIssues,
|
|
isFetching: fetchingIssues,
|
|
} = useQuery({
|
|
queryKey: ['issues', effectiveProjectId],
|
|
queryFn: () => (effectiveProjectId ? getProjectIssues(effectiveProjectId) : Promise.resolve([])),
|
|
enabled: !!effectiveProjectId,
|
|
});
|
|
|
|
const {
|
|
data: changeRequests = [],
|
|
isLoading: loadingChanges,
|
|
refetch: refetchChanges,
|
|
isFetching: fetchingChanges,
|
|
} = useQuery({
|
|
queryKey: ['changeRequests', effectiveProjectId],
|
|
queryFn: () => (effectiveProjectId ? getProjectChangeRequests(effectiveProjectId) : Promise.resolve([])),
|
|
enabled: !!effectiveProjectId,
|
|
});
|
|
|
|
// Forms
|
|
const issueForm = useForm<IssueFormValues>({
|
|
resolver: zodResolver(issueSchema),
|
|
defaultValues: { title: '', description: '', priority: Priority.Medium, assignedTo: '' },
|
|
});
|
|
|
|
const editIssueForm = useForm<EditIssueFormValues>({
|
|
resolver: zodResolver(editIssueSchema),
|
|
defaultValues: {
|
|
title: '',
|
|
description: '',
|
|
priority: Priority.Medium,
|
|
assignedTo: '',
|
|
status: ActivityStatus.Active,
|
|
resolution: '',
|
|
resolvedAt: toDateTimeLocalValue(),
|
|
},
|
|
});
|
|
|
|
const watchedEditStatus = editIssueForm.watch('status');
|
|
|
|
const resolveIssueForm = useForm<ResolveIssueFormValues>({
|
|
resolver: zodResolver(resolveIssueSchema),
|
|
defaultValues: { resolution: '', status: ActivityStatus.Inactive },
|
|
});
|
|
|
|
const changeForm = useForm<ChangeRequestFormValues>({
|
|
resolver: zodResolver(changeRequestSchema),
|
|
defaultValues: {
|
|
title: '',
|
|
justification: '',
|
|
revisedBudget: 0,
|
|
revisionDate: new Date().toISOString().split('T')[0],
|
|
},
|
|
});
|
|
|
|
const editChangeForm = useForm<EditChangeFormValues>({
|
|
resolver: zodResolver(editChangeSchema),
|
|
defaultValues: {
|
|
title: '',
|
|
justification: '',
|
|
revisedBudget: 0,
|
|
status: ApprovalStatus.Pending,
|
|
},
|
|
});
|
|
|
|
const resolveChangeForm = useForm<ResolveChangeFormValues>({
|
|
resolver: zodResolver(resolveChangeSchema),
|
|
defaultValues: { status: ApprovalStatus.Approved, justification: '' },
|
|
});
|
|
|
|
// Mutations
|
|
const createIssueMutation = useMutation({
|
|
mutationFn: (vals: IssueFormValues) => {
|
|
if (!effectiveProjectId) throw new Error('No project selected');
|
|
return createIssue({
|
|
projectId: effectiveProjectId,
|
|
title: vals.title,
|
|
description: vals.description,
|
|
priority: vals.priority,
|
|
assignedTo: vals.assignedTo,
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
|
setIsIssueModalOpen(false);
|
|
issueForm.reset();
|
|
success('Issue Logged', 'New project issue created and assigned.');
|
|
},
|
|
onError: (err: unknown) => toastError('Creation Failed', err),
|
|
});
|
|
|
|
const updateIssueMutation = useMutation({
|
|
mutationFn: (vals: EditIssueFormValues) => {
|
|
if (!editingIssue) throw new Error('No issue selected');
|
|
let isoResolvedAt: string;
|
|
try {
|
|
isoResolvedAt = vals.resolvedAt
|
|
? (vals.resolvedAt.includes('T') && vals.resolvedAt.endsWith('Z')
|
|
? vals.resolvedAt
|
|
: new Date(vals.resolvedAt).toISOString())
|
|
: new Date().toISOString();
|
|
} catch {
|
|
isoResolvedAt = new Date().toISOString();
|
|
}
|
|
|
|
return updateIssue({
|
|
issueId: editingIssue.id,
|
|
title: vals.title,
|
|
description: vals.description,
|
|
priority: vals.priority,
|
|
assignedTo: vals.assignedTo,
|
|
resolution: vals.resolution || (Number(vals.status) === ActivityStatus.Inactive ? 'Resolved' : 'Under active investigation'),
|
|
resolvedAt: isoResolvedAt,
|
|
status: Number(vals.status),
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
|
setIsEditIssueModalOpen(false);
|
|
setEditingIssue(null);
|
|
editIssueForm.reset();
|
|
success('Issue Updated', 'Issue record and resolution status saved successfully.');
|
|
},
|
|
onError: (err: unknown) => toastError('Update Failed', err),
|
|
});
|
|
|
|
const resolveIssueMutation = useMutation({
|
|
mutationFn: (vals: ResolveIssueFormValues) => {
|
|
if (!resolvingIssue) throw new Error('No issue selected');
|
|
return updateIssue({
|
|
issueId: resolvingIssue.id,
|
|
title: resolvingIssue.title || '',
|
|
description: resolvingIssue.description || '',
|
|
priority: resolvingIssue.priority || Priority.Medium,
|
|
assignedTo: resolvingIssue.assignedTo || '',
|
|
resolution: vals.resolution,
|
|
resolvedAt: new Date().toISOString(),
|
|
status: vals.status,
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
|
setIsResolveIssueModalOpen(false);
|
|
setResolvingIssue(null);
|
|
resolveIssueForm.reset();
|
|
success('Issue Resolved', 'Resolution recorded and issue status updated.');
|
|
},
|
|
onError: (err: unknown) => toastError('Resolution Failed', err),
|
|
});
|
|
|
|
const createChangeMutation = useMutation({
|
|
mutationFn: (vals: ChangeRequestFormValues) => {
|
|
if (!effectiveProjectId) throw new Error('No project selected');
|
|
return createChangeRequest({
|
|
projectId: effectiveProjectId,
|
|
title: vals.title,
|
|
justification: vals.justification,
|
|
revisedBudget: vals.revisedBudget,
|
|
revisionDate: vals.revisionDate,
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['changeRequests'] });
|
|
setIsChangeModalOpen(false);
|
|
changeForm.reset();
|
|
success('Change Request Submitted', 'Formal change request submitted for review.');
|
|
},
|
|
onError: (err: unknown) => toastError('Submission Failed', err),
|
|
});
|
|
|
|
const resolveChangeMutation = useMutation({
|
|
mutationFn: (vals: ResolveChangeFormValues) => {
|
|
if (!resolvingChange) throw new Error('No change request selected');
|
|
return updateChangeRequest({
|
|
changeRequestId: resolvingChange.id,
|
|
title: resolvingChange.title || '',
|
|
justification: vals.justification || resolvingChange.justification || '',
|
|
revisedBudget: resolvingChange.revisedBudget || 0,
|
|
status: vals.status,
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['changeRequests'] });
|
|
setIsResolveChangeModalOpen(false);
|
|
setResolvingChange(null);
|
|
resolveChangeForm.reset();
|
|
success('Change Decision Applied', 'Change request decision successfully resolved.');
|
|
},
|
|
onError: (err: unknown) => toastError('Decision Failed', err),
|
|
});
|
|
|
|
const updateChangeMutation = useMutation({
|
|
mutationFn: (vals: EditChangeFormValues) => {
|
|
if (!editingChange) throw new Error('No change request selected');
|
|
if (Number(editingChange.status) === ApprovalStatus.Approved) {
|
|
throw new Error('Approved change requests are immutable and cannot be updated.');
|
|
}
|
|
return updateChangeRequest({
|
|
changeRequestId: editingChange.id,
|
|
title: vals.title,
|
|
justification: vals.justification,
|
|
revisedBudget: vals.revisedBudget,
|
|
status: Number(vals.status),
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['changeRequests'] });
|
|
setIsEditChangeModalOpen(false);
|
|
setEditingChange(null);
|
|
editChangeForm.reset();
|
|
success('Change Request Updated', 'Change proposal and governance status saved.');
|
|
},
|
|
onError: (err: unknown) => toastError('Update Failed', err),
|
|
});
|
|
|
|
// Filtered & Sorted Issues
|
|
const filteredIssues = useMemo(() => {
|
|
return issues.filter((iss) => {
|
|
const matchSearch =
|
|
!searchTerm.trim() ||
|
|
(iss.title && iss.title.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
(iss.description && iss.description.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
const matchPrio = priorityFilter === 'all' || String(iss.priority) === String(priorityFilter);
|
|
const isResolved = iss.status === ActivityStatus.Inactive || !!iss.resolvedAt;
|
|
const matchStatus =
|
|
issueStatusFilter === 'all' ||
|
|
(issueStatusFilter === 'open' && !isResolved) ||
|
|
(issueStatusFilter === 'resolved' && isResolved);
|
|
return matchSearch && matchPrio && matchStatus;
|
|
});
|
|
}, [issues, searchTerm, priorityFilter, issueStatusFilter]);
|
|
|
|
const { sortedData: sortedIssues, sortColumn: issueSortCol, sortDirection: issueSortDir, handleSort: handleIssueSort } =
|
|
useTableSort(filteredIssues);
|
|
|
|
// Filtered & Sorted Change Requests
|
|
const filteredChanges = useMemo(() => {
|
|
return changeRequests.filter((cr) => {
|
|
const matchSearch =
|
|
!searchTerm.trim() ||
|
|
(cr.title && cr.title.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
(cr.justification && cr.justification.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
const matchStatus =
|
|
changeStatusFilter === 'all' ||
|
|
(changeStatusFilter === 'approved' && cr.status === ApprovalStatus.Approved) ||
|
|
(changeStatusFilter === 'rejected' && cr.status === ApprovalStatus.Rejected) ||
|
|
(changeStatusFilter === 'pending' && (cr.status === ApprovalStatus.Pending || cr.status === ApprovalStatus.Review));
|
|
return matchSearch && matchStatus;
|
|
});
|
|
}, [changeRequests, searchTerm, changeStatusFilter]);
|
|
|
|
const { sortedData: sortedChanges, sortColumn: changeSortCol, sortDirection: changeSortDir, handleSort: handleChangeSort } =
|
|
useTableSort(filteredChanges);
|
|
|
|
// Exports
|
|
const issueExportCols: ExportColumn<Issue>[] = [
|
|
{ header: 'Title', key: 'title' },
|
|
{ header: 'Description', key: 'description' },
|
|
{ header: 'Priority', key: 'priority', format: (val) => (val === Priority.Critical ? 'Critical' : 'Standard') },
|
|
{ header: 'Assigned To', key: 'assignedTo', format: (val) => (val ? getUserEmail(val) : 'Unassigned') },
|
|
{ header: 'Status', key: 'status', format: (val) => (val === ActivityStatus.Active ? 'Active' : 'Resolved') },
|
|
];
|
|
|
|
const changeExportCols: ExportColumn<ChangeRequest>[] = [
|
|
{ header: 'Change Title', key: 'title' },
|
|
{ header: 'Justification', key: 'justification' },
|
|
{ header: 'Revised Budget', key: 'revisedBudget', format: (val) => formatZAR(val || 0) },
|
|
{ header: 'Status', key: 'status', format: (val) => (val === ApprovalStatus.Approved ? 'Approved' : 'Pending') },
|
|
];
|
|
|
|
const openResolveIssue = (iss: Issue) => {
|
|
setResolvingIssue(iss);
|
|
resolveIssueForm.reset({ resolution: iss.resolution || '', status: ActivityStatus.Inactive });
|
|
setIsResolveIssueModalOpen(true);
|
|
};
|
|
|
|
const openEditIssue = async (iss: Issue) => {
|
|
try {
|
|
const fresh = await getIssue(iss.id);
|
|
setEditingIssue(fresh);
|
|
const initialStatus =
|
|
fresh.status !== undefined && fresh.status !== null
|
|
? Number(fresh.status)
|
|
: fresh.resolvedAt
|
|
? ActivityStatus.Inactive
|
|
: ActivityStatus.Active;
|
|
|
|
const initialResolution =
|
|
fresh.resolution && fresh.resolution.trim() !== ''
|
|
? fresh.resolution
|
|
: initialStatus === ActivityStatus.Inactive
|
|
? 'Resolved and remediated'
|
|
: 'Remediation currently in progress';
|
|
|
|
editIssueForm.reset({
|
|
title: fresh.title || '',
|
|
description: fresh.description || '',
|
|
priority: fresh.priority || Priority.Medium,
|
|
assignedTo: fresh.assignedTo || '',
|
|
status: initialStatus,
|
|
resolution: initialResolution,
|
|
resolvedAt: toDateTimeLocalValue(fresh.resolvedAt),
|
|
});
|
|
setIsEditIssueModalOpen(true);
|
|
} catch {
|
|
setEditingIssue(iss);
|
|
const initialStatus =
|
|
iss.status !== undefined && iss.status !== null
|
|
? Number(iss.status)
|
|
: iss.resolvedAt
|
|
? ActivityStatus.Inactive
|
|
: ActivityStatus.Active;
|
|
|
|
const initialResolution =
|
|
iss.resolution && iss.resolution.trim() !== ''
|
|
? iss.resolution
|
|
: initialStatus === ActivityStatus.Inactive
|
|
? 'Resolved and remediated'
|
|
: 'Remediation currently in progress';
|
|
|
|
editIssueForm.reset({
|
|
title: iss.title || '',
|
|
description: iss.description || '',
|
|
priority: iss.priority || Priority.Medium,
|
|
assignedTo: iss.assignedTo || '',
|
|
status: initialStatus,
|
|
resolution: initialResolution,
|
|
resolvedAt: toDateTimeLocalValue(iss.resolvedAt),
|
|
});
|
|
setIsEditIssueModalOpen(true);
|
|
}
|
|
};
|
|
|
|
const openEditChange = async (cr: ChangeRequest) => {
|
|
if (Number(cr.status) === ApprovalStatus.Approved) {
|
|
toastError('Record Immutable', 'Approved and enacted change requests are immutable.');
|
|
return;
|
|
}
|
|
try {
|
|
// 1. Uses GET method (NOT POST)
|
|
// 2. Passes ChangeRequestId (NOT ProjectId)
|
|
const freshData = await getChangeRequest(cr.id);
|
|
setEditingChange(freshData);
|
|
editChangeForm.reset({
|
|
title: freshData.title || '',
|
|
justification: freshData.justification || '',
|
|
revisedBudget: freshData.revisedBudget ?? 0,
|
|
status: freshData.status ?? ApprovalStatus.Pending,
|
|
});
|
|
setIsEditChangeModalOpen(true);
|
|
} catch {
|
|
setEditingChange(cr);
|
|
editChangeForm.reset({
|
|
title: cr.title || '',
|
|
justification: cr.justification || '',
|
|
revisedBudget: cr.revisedBudget ?? 0,
|
|
status: cr.status ?? ApprovalStatus.Pending,
|
|
});
|
|
setIsEditChangeModalOpen(true);
|
|
}
|
|
};
|
|
|
|
const openResolveChange = (cr: ChangeRequest, statusToApply: ApprovalStatus) => {
|
|
setResolvingChange(cr);
|
|
resolveChangeForm.reset({
|
|
status: statusToApply,
|
|
justification: `Approved by Project Governance for execution.`,
|
|
});
|
|
setIsResolveChangeModalOpen(true);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8 pb-16">
|
|
{/* Header Banner */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-gradient-to-r from-[#0d1322] via-[#0f172a] to-[#0d1322] p-6 sm:p-8 rounded-3xl border border-slate-800/80 shadow-2xl relative overflow-hidden">
|
|
<div className="absolute -right-10 -bottom-10 w-60 h-60 bg-amber-600/10 rounded-full blur-3xl pointer-events-none" />
|
|
<div className="space-y-2 relative z-10">
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-12 w-12 rounded-2xl bg-amber-600/20 border border-amber-500/30 flex items-center justify-center text-amber-400 shadow-lg shadow-amber-500/10">
|
|
<GitPullRequest className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2.5 flex-wrap">
|
|
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white flex items-center gap-2.5">
|
|
Change Management & Issue Resolution
|
|
</h1>
|
|
<HelpTooltip
|
|
title="Project Change & Issue Control"
|
|
content="Track project impediments, review contractual variations, and resolve change requests in-place through governance workflows."
|
|
size="sm"
|
|
placement="bottom"
|
|
/>
|
|
</div>
|
|
<p className="text-xs sm:text-sm text-slate-400 mt-1">
|
|
Track project execution impediments, review contractual variations, and resolve change requests in-place.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* KPI Cards */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
|
|
<div className="flex items-center justify-between text-slate-400">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs font-semibold uppercase tracking-wider">Active Issues</span>
|
|
<HelpTooltip
|
|
title="Active Project Issues"
|
|
content="Open project roadblocks, risks, or performance impediments requiring active mitigation."
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<AlertOctagon className="w-4 h-4 text-rose-400" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-rose-400">{issues.filter((i) => i.status !== ActivityStatus.Inactive).length}</p>
|
|
<p className="text-[11px] text-slate-400">Open project impediments</p>
|
|
</div>
|
|
|
|
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
|
|
<div className="flex items-center justify-between text-slate-400">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs font-semibold uppercase tracking-wider">Resolved Issues</span>
|
|
<HelpTooltip
|
|
title="Resolved Issues"
|
|
content="Impediments that have been remediated and formally closed with documented resolution notes."
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<CheckCircle2 className="w-4 h-4 text-emerald-400" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-emerald-400">
|
|
{issues.filter((i) => i.status === ActivityStatus.Inactive).length}
|
|
</p>
|
|
<p className="text-[11px] text-slate-400">Closed with documented resolution</p>
|
|
</div>
|
|
|
|
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
|
|
<div className="flex items-center justify-between text-slate-400">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs font-semibold uppercase tracking-wider">Pending Changes</span>
|
|
<HelpTooltip
|
|
title="Pending Variations"
|
|
content="Formal change requests awaiting governance review, budget validation, and sign-off."
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<GitPullRequest className="w-4 h-4 text-amber-400" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-amber-400">
|
|
{changeRequests.filter((c) => c.status === ApprovalStatus.Pending || c.status === ApprovalStatus.Review).length}
|
|
</p>
|
|
<p className="text-[11px] text-slate-400">Awaiting governance review</p>
|
|
</div>
|
|
|
|
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
|
|
<div className="flex items-center justify-between text-slate-400">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs font-semibold uppercase tracking-wider">Approved Variations</span>
|
|
<HelpTooltip
|
|
title="Approved Variations"
|
|
content="Contract amendments and scope adjustments approved by the governing committee."
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<Coins className="w-4 h-4 text-blue-400" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-blue-400">
|
|
{changeRequests.filter((c) => c.status === ApprovalStatus.Approved).length}
|
|
</p>
|
|
<p className="text-[11px] text-slate-400">Contract amendments enacted</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="space-y-4">
|
|
<div className="flex border-b border-slate-800 bg-[#0d121f]/80 px-2 sm:px-4 rounded-2xl backdrop-blur-sm overflow-x-auto gap-2">
|
|
<button
|
|
onClick={() => setActiveTab('issues')}
|
|
className={`py-3.5 px-4 text-xs font-semibold border-b-2 transition-colors flex items-center gap-2 cursor-pointer whitespace-nowrap ${
|
|
activeTab === 'issues'
|
|
? 'border-amber-500 text-amber-400'
|
|
: 'border-transparent text-slate-400 hover:text-slate-200'
|
|
}`}
|
|
>
|
|
<AlertOctagon className="w-4 h-4" />
|
|
<span>Project Issues ({issues.length})</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setActiveTab('changes')}
|
|
className={`py-3.5 px-4 text-xs font-semibold border-b-2 transition-colors flex items-center gap-2 cursor-pointer whitespace-nowrap ${
|
|
activeTab === 'changes'
|
|
? 'border-amber-500 text-amber-400'
|
|
: 'border-transparent text-slate-400 hover:text-slate-200'
|
|
}`}
|
|
>
|
|
<GitPullRequest className="w-4 h-4" />
|
|
<span>Change Requests ({changeRequests.length})</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tab 1: Issues Toolbar & Content */}
|
|
{activeTab === 'issues' && (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3 bg-[#0d121f]/60 p-3.5 rounded-2xl border border-slate-800/80">
|
|
<div className="flex items-center gap-2.5 flex-wrap flex-1">
|
|
{/* Search */}
|
|
<div className="relative flex-1 min-w-[200px] max-w-sm">
|
|
<Search className="w-3.5 h-3.5 absolute left-3 top-2.5 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search issues by title or details..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl pl-8 pr-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500 shadow-xs"
|
|
/>
|
|
</div>
|
|
|
|
{/* Priority Filter */}
|
|
<div className="flex items-center gap-1.5 text-xs text-slate-400">
|
|
<select
|
|
value={priorityFilter}
|
|
onChange={(e) => setPriorityFilter(e.target.value)}
|
|
className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
>
|
|
<option value="all">All Priorities</option>
|
|
<option value={String(Priority.Critical)}>Critical Priority</option>
|
|
<option value={String(Priority.High)}>High Priority</option>
|
|
<option value={String(Priority.Medium)}>Medium Priority</option>
|
|
<option value={String(Priority.Low)}>Low Priority</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Status Filter */}
|
|
<div className="flex items-center gap-1.5 text-xs text-slate-400">
|
|
<select
|
|
value={issueStatusFilter}
|
|
onChange={(e) => setIssueStatusFilter(e.target.value)}
|
|
className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
>
|
|
<option value="all">All Statuses</option>
|
|
<option value="open">Open / Active</option>
|
|
<option value="resolved">Resolved / Closed</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Project Selector */}
|
|
<div className="flex items-center gap-1.5 text-xs text-slate-400">
|
|
<FolderKanban className="w-3.5 h-3.5 text-amber-400" />
|
|
<select
|
|
value={effectiveProjectId ? String(effectiveProjectId) : ''}
|
|
onChange={(e) => setSelectedProjectId(e.target.value)}
|
|
className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500 max-w-[180px] truncate"
|
|
>
|
|
{projects.map((p) => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions: Refresh, Export, Log Issue */}
|
|
<div className="flex items-center gap-2 flex-wrap justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
refetchIssues();
|
|
success('Refreshed', 'Project issues updated from API.');
|
|
}}
|
|
disabled={fetchingIssues}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold bg-slate-900 text-slate-300 hover:text-white border border-slate-800 hover:bg-slate-800 transition cursor-pointer disabled:opacity-50"
|
|
title="Force refresh issues"
|
|
>
|
|
<RefreshCw className={`w-3.5 h-3.5 text-amber-400 ${fetchingIssues ? 'animate-spin' : ''}`} />
|
|
<span>Refresh</span>
|
|
</button>
|
|
|
|
<ExportButton
|
|
claim="change_management"
|
|
data={sortedIssues}
|
|
columns={issueExportCols}
|
|
filename={`project_issues_${new Date().toISOString().split('T')[0]}`}
|
|
title="Project Issues Register"
|
|
/>
|
|
|
|
{canAdd('change_management') && (
|
|
<button
|
|
onClick={() => {
|
|
setEditingIssue(null);
|
|
issueForm.reset({ title: '', description: '', priority: Priority.Medium, assignedTo: '' });
|
|
setIsIssueModalOpen(true);
|
|
}}
|
|
className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-xs font-semibold bg-gradient-to-r from-amber-600 to-orange-600 text-white hover:from-amber-500 hover:to-orange-500 shadow-md shadow-amber-600/25 transition cursor-pointer"
|
|
>
|
|
<Plus className="w-3.5 h-3.5" />
|
|
<span>Log Issue</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-xs border-collapse">
|
|
<thead>
|
|
<tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
|
|
<SortableTh column="title" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-5 whitespace-nowrap">
|
|
Issue Summary
|
|
</SortableTh>
|
|
<SortableTh column="priority" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-4 whitespace-nowrap">
|
|
Priority
|
|
</SortableTh>
|
|
<SortableTh column="assignedTo" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-4 whitespace-nowrap">
|
|
Assigned To
|
|
</SortableTh>
|
|
<SortableTh column="status" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-4 whitespace-nowrap">
|
|
Status
|
|
</SortableTh>
|
|
<th className="py-3.5 px-4 font-semibold whitespace-nowrap">Resolution Notes</th>
|
|
<th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-800/60">
|
|
{loadingIssues ? (
|
|
<tr>
|
|
<td colSpan={6} className="py-12 text-center text-slate-400">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<div className="w-6 h-6 border-2 border-amber-500 border-t-transparent rounded-full animate-spin" />
|
|
<span>Loading project issues...</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
) : sortedIssues.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={6} className="py-12 text-center text-slate-400">
|
|
No issues recorded for this project.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
sortedIssues.map((iss) => {
|
|
const isResolved = iss.status === ActivityStatus.Inactive || !!iss.resolvedAt;
|
|
return (
|
|
<tr key={iss.id} className="hover:bg-slate-800/40 transition-colors">
|
|
<td className="py-3.5 px-5 font-semibold text-white">
|
|
<div className="flex items-start gap-2.5">
|
|
<AlertOctagon
|
|
className={`w-4 h-4 mt-0.5 shrink-0 ${isResolved ? 'text-emerald-400' : 'text-rose-400'}`}
|
|
/>
|
|
<div>
|
|
<p className="font-semibold text-white">{iss.title}</p>
|
|
<p className="text-[11px] text-slate-400 font-normal line-clamp-1">{iss.description}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="py-3.5 px-4 whitespace-nowrap">
|
|
<PriorityBadge priority={iss.priority} />
|
|
</td>
|
|
<td className="py-3.5 px-4 whitespace-nowrap text-slate-300">
|
|
<div className="flex items-center gap-1.5">
|
|
<User className="w-3.5 h-3.5 text-slate-400" />
|
|
<span className="truncate max-w-[150px]">{iss.assignedTo ? getUserEmail(iss.assignedTo) : 'Unassigned'}</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-3.5 px-4 whitespace-nowrap">
|
|
{isResolved ? (
|
|
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
|
<CheckCircle2 className="w-3 h-3" /> Resolved
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-rose-500/10 text-rose-400 border border-rose-500/20">
|
|
<Clock className="w-3 h-3" /> Open
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="py-3.5 px-4 text-slate-400 max-w-xs truncate">
|
|
{iss.resolution || <span className="italic text-slate-600">Pending resolution...</span>}
|
|
</td>
|
|
<td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
|
|
<button
|
|
onClick={() => !isResolved && openResolveIssue(iss)}
|
|
disabled={isResolved}
|
|
className={`px-2.5 py-1 text-xs font-medium rounded-lg border transition ${
|
|
isResolved
|
|
? 'opacity-40 cursor-not-allowed text-slate-500 bg-slate-900/40 border-slate-800 pointer-events-none'
|
|
: 'text-amber-400 hover:text-amber-300 bg-amber-950/40 hover:bg-amber-900/40 border-amber-800/40 cursor-pointer'
|
|
}`}
|
|
title={isResolved ? 'Issue is already resolved' : 'Resolve issue'}
|
|
>
|
|
Resolve
|
|
</button>
|
|
<button
|
|
onClick={() => !isResolved && openEditIssue(iss)}
|
|
disabled={isResolved}
|
|
className={`p-1 rounded-lg transition inline-flex items-center justify-center ${
|
|
isResolved
|
|
? 'opacity-40 cursor-not-allowed text-slate-600 pointer-events-none'
|
|
: 'text-slate-400 hover:text-white hover:bg-slate-800 cursor-pointer'
|
|
}`}
|
|
title={isResolved ? 'Resolved issues cannot be edited' : 'Edit issue'}
|
|
>
|
|
<Edit2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tab 2: Change Requests Table */}
|
|
{activeTab === 'changes' && (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3 bg-[#0d121f]/60 p-3.5 rounded-2xl border border-slate-800/80">
|
|
<div className="flex items-center gap-2.5 flex-wrap flex-1">
|
|
{/* Search */}
|
|
<div className="relative flex-1 min-w-[200px] max-w-sm">
|
|
<Search className="w-3.5 h-3.5 absolute left-3 top-2.5 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search change proposal, justification..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl pl-8 pr-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500 shadow-xs"
|
|
/>
|
|
</div>
|
|
|
|
{/* Status Filter */}
|
|
<div className="flex items-center gap-1.5 text-xs text-slate-400">
|
|
<select
|
|
value={changeStatusFilter}
|
|
onChange={(e) => setChangeStatusFilter(e.target.value)}
|
|
className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
>
|
|
<option value="all">All Change Statuses</option>
|
|
<option value="pending">Pending Review</option>
|
|
<option value="approved">Approved & Enacted</option>
|
|
<option value="rejected">Rejected</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Project Selector */}
|
|
<div className="flex items-center gap-1.5 text-xs text-slate-400">
|
|
<FolderKanban className="w-3.5 h-3.5 text-amber-400" />
|
|
<select
|
|
value={effectiveProjectId ? String(effectiveProjectId) : ''}
|
|
onChange={(e) => setSelectedProjectId(e.target.value)}
|
|
className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500 max-w-[180px] truncate"
|
|
>
|
|
{projects.map((p) => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions: Refresh, Export, Request Change */}
|
|
<div className="flex items-center gap-2 flex-wrap justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
refetchChanges();
|
|
success('Refreshed', 'Change requests updated from API.');
|
|
}}
|
|
disabled={fetchingChanges}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold bg-slate-900 text-slate-300 hover:text-white border border-slate-800 hover:bg-slate-800 transition cursor-pointer disabled:opacity-50"
|
|
title="Force refresh change requests"
|
|
>
|
|
<RefreshCw className={`w-3.5 h-3.5 text-amber-400 ${fetchingChanges ? 'animate-spin' : ''}`} />
|
|
<span>Refresh</span>
|
|
</button>
|
|
|
|
<ExportButton
|
|
claim="change_management"
|
|
data={sortedChanges}
|
|
columns={changeExportCols}
|
|
filename={`change_requests_${new Date().toISOString().split('T')[0]}`}
|
|
title="Change Requests Register"
|
|
/>
|
|
|
|
{canAdd('change_management') && (
|
|
<button
|
|
onClick={() => {
|
|
setEditingChange(null);
|
|
changeForm.reset({
|
|
title: '',
|
|
justification: '',
|
|
revisedBudget: 0,
|
|
revisionDate: new Date().toISOString().split('T')[0],
|
|
});
|
|
setIsChangeModalOpen(true);
|
|
}}
|
|
className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-xs font-semibold bg-slate-800 text-white hover:bg-slate-700 border border-slate-700 shadow-md transition cursor-pointer"
|
|
>
|
|
<GitPullRequest className="w-3.5 h-3.5 text-blue-400" />
|
|
<span>Request Change</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-xs border-collapse">
|
|
<thead>
|
|
<tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
|
|
<SortableTh column="title" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-5 whitespace-nowrap">
|
|
Change Proposal
|
|
</SortableTh>
|
|
<SortableTh column="justification" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-4 whitespace-nowrap">
|
|
Justification
|
|
</SortableTh>
|
|
<SortableTh column="revisedBudget" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-4 whitespace-nowrap">
|
|
Revised Budget
|
|
</SortableTh>
|
|
<SortableTh column="status" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-4 whitespace-nowrap">
|
|
Governance Status
|
|
</SortableTh>
|
|
<th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">In-Place Decision</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-800/60">
|
|
{loadingChanges ? (
|
|
<tr>
|
|
<td colSpan={5} className="py-12 text-center text-slate-400">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<div className="w-6 h-6 border-2 border-amber-500 border-t-transparent rounded-full animate-spin" />
|
|
<span>Loading change requests...</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
) : sortedChanges.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={5} className="py-12 text-center text-slate-400">
|
|
No change requests logged for this project.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
sortedChanges.map((cr) => (
|
|
<tr key={cr.id} className="hover:bg-slate-800/40 transition-colors">
|
|
<td className="py-3.5 px-5 whitespace-nowrap font-semibold text-white">
|
|
<div className="flex items-center gap-2">
|
|
<GitPullRequest className="w-4 h-4 text-amber-400 shrink-0" />
|
|
<span>{cr.title}</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-3.5 px-4 text-slate-300 max-w-xs truncate" title={cr.justification || ''}>
|
|
{cr.justification || 'None'}
|
|
</td>
|
|
<td className="py-3.5 px-4 whitespace-nowrap font-mono font-semibold text-slate-200">
|
|
{formatZAR(cr.revisedBudget || 0)}
|
|
</td>
|
|
<td className="py-3.5 px-4 whitespace-nowrap">
|
|
<ApprovalStatusBadge status={cr.status} />
|
|
</td>
|
|
<td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
|
|
<div className="inline-flex items-center gap-1.5">
|
|
{Number(cr.status) === ApprovalStatus.Approved ? (
|
|
<span className="inline-flex items-center gap-1 text-xs font-semibold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-lg border border-emerald-500/20 cursor-default" title="Approved and enacted change requests are immutable.">
|
|
<Lock className="w-3 h-3 text-emerald-400" />
|
|
<span>Resolved & Enacted (Immutable)</span>
|
|
</span>
|
|
) : (
|
|
<>
|
|
<button
|
|
onClick={() => openEditChange(cr)}
|
|
className="p-1 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition cursor-pointer"
|
|
title="Edit Change Request"
|
|
>
|
|
<Edit2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
{canApproveRecord('change_management', cr.createdBy) && (
|
|
<button
|
|
onClick={() => openResolveChange(cr, ApprovalStatus.Approved)}
|
|
className="px-2.5 py-1 text-xs font-semibold text-emerald-300 bg-emerald-950/50 hover:bg-emerald-900/60 border border-emerald-700/50 rounded-lg transition cursor-pointer flex items-center gap-1"
|
|
>
|
|
<Check className="w-3 h-3" /> Approve
|
|
</button>
|
|
)}
|
|
{canApprove('change_management') && isMaker(cr.createdBy) && (
|
|
<span className="text-[10px] text-amber-400 font-mono italic px-1.5 py-0.5 bg-amber-500/10 border border-amber-500/20 rounded">
|
|
Maker-Checker
|
|
</span>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Modal: Log Project Issue */}
|
|
<Modal
|
|
isOpen={isIssueModalOpen}
|
|
onClose={() => setIsIssueModalOpen(false)}
|
|
title="Log Project Issue"
|
|
size="md"
|
|
>
|
|
<form
|
|
onSubmit={issueForm.handleSubmit((d) => createIssueMutation.mutate(d))}
|
|
className="space-y-4"
|
|
>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Issue Title *</label>
|
|
<input
|
|
{...issueForm.register('title')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
placeholder="e.g. Procurement delays for regional solar supplies"
|
|
/>
|
|
{issueForm.formState.errors.title && (
|
|
<p className="text-[11px] text-rose-400 mt-1">{issueForm.formState.errors.title.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Description *</label>
|
|
<textarea
|
|
rows={3}
|
|
{...issueForm.register('description')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
placeholder="Detail root cause and operational impact..."
|
|
/>
|
|
{issueForm.formState.errors.description && (
|
|
<p className="text-[11px] text-rose-400 mt-1">{issueForm.formState.errors.description.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Priority</label>
|
|
<select
|
|
{...issueForm.register('priority')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
>
|
|
{PRIORITY_OPTIONS.map((opt) => (
|
|
<option key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Assigned Person *</label>
|
|
<select
|
|
{...issueForm.register('assignedTo')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
>
|
|
<option value="">Select Assignee</option>
|
|
{users.map((u) => (
|
|
<option key={u.id} value={u.id}>
|
|
{u.name || u.email || u.id}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{issueForm.formState.errors.assignedTo && (
|
|
<p className="text-[11px] text-rose-400 mt-1">{issueForm.formState.errors.assignedTo.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsIssueModalOpen(false)}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={createIssueMutation.isPending}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white transition shadow-md shadow-amber-600/30 disabled:opacity-50 flex items-center gap-1.5"
|
|
>
|
|
{createIssueMutation.isPending && <RefreshCw className="w-3.5 h-3.5 animate-spin" />}
|
|
<span>Log Issue</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
|
|
{/* Modal: Edit Project Issue */}
|
|
<Modal
|
|
isOpen={isEditIssueModalOpen}
|
|
onClose={() => {
|
|
setIsEditIssueModalOpen(false);
|
|
setEditingIssue(null);
|
|
}}
|
|
title={`Edit Project Issue: ${editingIssue?.title || ''}`}
|
|
size="lg"
|
|
>
|
|
<form
|
|
onSubmit={editIssueForm.handleSubmit((d) => updateIssueMutation.mutate(d))}
|
|
className="space-y-4"
|
|
>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Issue Title *</label>
|
|
<input
|
|
{...editIssueForm.register('title')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
placeholder="e.g. Procurement delays for regional solar supplies"
|
|
/>
|
|
{editIssueForm.formState.errors.title && (
|
|
<p className="text-[11px] text-rose-400 mt-1">{editIssueForm.formState.errors.title.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Description *</label>
|
|
<textarea
|
|
rows={3}
|
|
{...editIssueForm.register('description')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
placeholder="Detail root cause and operational impact..."
|
|
/>
|
|
{editIssueForm.formState.errors.description && (
|
|
<p className="text-[11px] text-rose-400 mt-1">{editIssueForm.formState.errors.description.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Priority</label>
|
|
<select
|
|
{...editIssueForm.register('priority')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
>
|
|
{PRIORITY_OPTIONS.map((opt) => (
|
|
<option key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Assigned Person *</label>
|
|
<select
|
|
{...editIssueForm.register('assignedTo')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
>
|
|
<option value="">Select Assignee</option>
|
|
{users.map((u) => (
|
|
<option key={u.id} value={u.id}>
|
|
{u.name || u.email || u.id}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{editIssueForm.formState.errors.assignedTo && (
|
|
<p className="text-[11px] text-rose-400 mt-1">{editIssueForm.formState.errors.assignedTo.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status & Resolution Lifecycle Container */}
|
|
<div className={`p-4 rounded-2xl border transition-colors space-y-4 ${
|
|
Number(watchedEditStatus) === ActivityStatus.Inactive
|
|
? 'bg-emerald-950/20 border-emerald-500/30'
|
|
: 'bg-[#0d121f] border-slate-800'
|
|
}`}>
|
|
<div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className={`w-4 h-4 ${Number(watchedEditStatus) === ActivityStatus.Inactive ? 'text-emerald-400' : 'text-amber-400'}`} />
|
|
<span className="text-xs font-semibold text-white">Status & Resolution Lifecycle</span>
|
|
</div>
|
|
<span className={`px-2.5 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider border ${
|
|
Number(watchedEditStatus) === ActivityStatus.Inactive
|
|
? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30'
|
|
: 'bg-amber-500/10 text-amber-400 border-amber-500/30'
|
|
}`}>
|
|
{Number(watchedEditStatus) === ActivityStatus.Inactive ? 'Resolved / Closed' : 'Active / Open'}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Issue Status *</label>
|
|
<select
|
|
{...editIssueForm.register('status')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
>
|
|
<option value={ActivityStatus.Active}>Active (Open / In Progress)</option>
|
|
<option value={ActivityStatus.Inactive}>Inactive (Resolved & Closed)</option>
|
|
</select>
|
|
<p className="text-[11px] text-slate-400 mt-1">
|
|
{Number(watchedEditStatus) === ActivityStatus.Inactive
|
|
? 'Issue will be marked as closed with full resolution audit.'
|
|
: 'Issue remains active and tracked as an open impediment.'}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<label className="block text-xs font-semibold text-slate-300">Resolution Date & Time *</label>
|
|
<button
|
|
type="button"
|
|
onClick={() => editIssueForm.setValue('resolvedAt', toDateTimeLocalValue())}
|
|
className="text-[11px] font-semibold text-amber-400 hover:text-amber-300 transition cursor-pointer flex items-center gap-1"
|
|
title="Set to current date and time"
|
|
>
|
|
<Clock className="w-3 h-3" />
|
|
<span>Set to Now</span>
|
|
</button>
|
|
</div>
|
|
<input
|
|
type="datetime-local"
|
|
{...editIssueForm.register('resolvedAt')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
/>
|
|
{editIssueForm.formState.errors.resolvedAt && (
|
|
<p className="text-[11px] text-rose-400 mt-1">{editIssueForm.formState.errors.resolvedAt.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Resolution Summary & Remediation Notes *</label>
|
|
<textarea
|
|
rows={3}
|
|
{...editIssueForm.register('resolution')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
placeholder={
|
|
Number(watchedEditStatus) === ActivityStatus.Inactive
|
|
? 'Explain how the issue was remediated, workarounds applied, and validation steps...'
|
|
: 'Document ongoing remediation steps, progress notes, or blocker details...'
|
|
}
|
|
/>
|
|
{editIssueForm.formState.errors.resolution && (
|
|
<p className="text-[11px] text-rose-400 mt-1">{editIssueForm.formState.errors.resolution.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsEditIssueModalOpen(false);
|
|
setEditingIssue(null);
|
|
}}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={updateIssueMutation.isPending}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white transition shadow-md shadow-amber-600/30 disabled:opacity-50 flex items-center gap-1.5"
|
|
>
|
|
{updateIssueMutation.isPending && <RefreshCw className="w-3.5 h-3.5 animate-spin" />}
|
|
<span>Update Issue</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
|
|
{/* Modal: In-place Resolve Issue */}
|
|
<Modal
|
|
isOpen={isResolveIssueModalOpen}
|
|
onClose={() => setIsResolveIssueModalOpen(false)}
|
|
title={`Resolve Issue: ${resolvingIssue?.title || ''}`}
|
|
size="md"
|
|
>
|
|
<form onSubmit={resolveIssueForm.handleSubmit((d) => resolveIssueMutation.mutate(d))} className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Resolution Summary & Remediation Notes *</label>
|
|
<textarea
|
|
rows={4}
|
|
{...resolveIssueForm.register('resolution')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
placeholder="Explain how the issue was resolved or mitigated..."
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Status Transition</label>
|
|
<select
|
|
{...resolveIssueForm.register('status')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
>
|
|
<option value={ActivityStatus.Inactive}>Resolved & Closed</option>
|
|
<option value={ActivityStatus.Active}>Keep Open with Progress Notes</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsResolveIssueModalOpen(false)}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={resolveIssueMutation.isPending}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-600 hover:bg-emerald-500 text-white transition shadow-md shadow-emerald-600/30"
|
|
>
|
|
Confirm Resolution
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
|
|
{/* Modal: Create Change Request */}
|
|
<Modal
|
|
isOpen={isChangeModalOpen}
|
|
onClose={() => setIsChangeModalOpen(false)}
|
|
title="Request Contractual & Budgetary Change"
|
|
size="md"
|
|
>
|
|
<form onSubmit={changeForm.handleSubmit((d) => createChangeMutation.mutate(d))} className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Change Proposal Title *</label>
|
|
<input
|
|
{...changeForm.register('title')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
placeholder="e.g. Scope expansion to include 2 additional clinics"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Business Justification *</label>
|
|
<textarea
|
|
rows={3}
|
|
{...changeForm.register('justification')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
placeholder="Provide statutory and contractual justification..."
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Revised Total Budget (ZAR) *</label>
|
|
<input
|
|
type="number"
|
|
{...changeForm.register('revisedBudget')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Revision Date *</label>
|
|
<input
|
|
type="date"
|
|
{...changeForm.register('revisionDate')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsChangeModalOpen(false)}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={createChangeMutation.isPending}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white transition shadow-md shadow-amber-600/30"
|
|
>
|
|
Submit Change
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
|
|
{/* Modal: Resolve Change Request Decision */}
|
|
<Modal
|
|
isOpen={isResolveChangeModalOpen}
|
|
onClose={() => setIsResolveChangeModalOpen(false)}
|
|
title={`Resolve Change: ${resolvingChange?.title || ''}`}
|
|
size="md"
|
|
>
|
|
<form onSubmit={resolveChangeForm.handleSubmit((d) => resolveChangeMutation.mutate(d))} className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Decision Justification / Sign-off Comments *</label>
|
|
<textarea
|
|
rows={3}
|
|
{...resolveChangeForm.register('justification')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsResolveChangeModalOpen(false)}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={resolveChangeMutation.isPending}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white transition shadow-md shadow-blue-600/30"
|
|
>
|
|
Apply Decision
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
|
|
{/* Modal: Edit Change Request */}
|
|
<Modal
|
|
isOpen={isEditChangeModalOpen}
|
|
onClose={() => setIsEditChangeModalOpen(false)}
|
|
title={`Edit Change Request: ${editingChange?.title || ''}`}
|
|
size="md"
|
|
>
|
|
<form
|
|
onSubmit={editChangeForm.handleSubmit((d) => updateChangeMutation.mutate(d))}
|
|
className="space-y-4"
|
|
>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Proposal Title *</label>
|
|
<input
|
|
{...editChangeForm.register('title')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
placeholder="e.g. Scope extension for additional beneficiary training"
|
|
/>
|
|
{editChangeForm.formState.errors.title && (
|
|
<p className="text-[11px] text-rose-400 mt-1">{editChangeForm.formState.errors.title.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Business Justification *</label>
|
|
<textarea
|
|
rows={3}
|
|
{...editChangeForm.register('justification')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
placeholder="Provide statutory and contractual justification..."
|
|
/>
|
|
{editChangeForm.formState.errors.justification && (
|
|
<p className="text-[11px] text-rose-400 mt-1">{editChangeForm.formState.errors.justification.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Revised Total Budget (ZAR) *</label>
|
|
<input
|
|
type="number"
|
|
{...editChangeForm.register('revisedBudget')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
/>
|
|
{editChangeForm.formState.errors.revisedBudget && (
|
|
<p className="text-[11px] text-rose-400 mt-1">{editChangeForm.formState.errors.revisedBudget.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Governance Status *</label>
|
|
{editingChange && Number(editingChange.status) === ApprovalStatus.Approved ? (
|
|
<div
|
|
className="w-full bg-slate-900 border border-emerald-500/30 rounded-xl px-3 py-2 text-xs text-emerald-300 font-semibold flex items-center gap-1.5 cursor-default"
|
|
title="Approved and enacted change requests are immutable."
|
|
>
|
|
<Lock className="w-3.5 h-3.5 text-emerald-400" />
|
|
<span>Approved & Enacted (Immutable - Cannot Be Changed)</span>
|
|
</div>
|
|
) : (
|
|
<select
|
|
{...editChangeForm.register('status')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
|
|
>
|
|
<option value={ApprovalStatus.Pending}>Pending Review</option>
|
|
<option value={ApprovalStatus.Review}>Under Active Review</option>
|
|
{(() => {
|
|
const canApproveChange = canApproveRecord('change_management', editingChange?.createdBy);
|
|
const isSelf = isMaker(editingChange?.createdBy);
|
|
let reason = '';
|
|
if (!canApprove('change_management')) {
|
|
reason = ' (Requires Update Permission)';
|
|
} else if (isSelf) {
|
|
reason = ' (Maker-Checker: Cannot approve own record)';
|
|
}
|
|
return (
|
|
<option value={ApprovalStatus.Approved} disabled={!canApproveChange}>
|
|
Approved & Enacted {reason}
|
|
</option>
|
|
);
|
|
})()}
|
|
<option value={ApprovalStatus.Rejected}>Rejected</option>
|
|
</select>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsEditChangeModalOpen(false)}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={updateChangeMutation.isPending}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white transition shadow-md shadow-amber-600/30"
|
|
>
|
|
{updateChangeMutation.isPending ? 'Saving...' : 'Update Change Request'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|