Fixed API calls on governance page
Enforced multitenancy
This commit is contained in:
@@ -38,6 +38,13 @@ export const AccountActivationModal: React.FC<AccountActivationModalProps> = ({
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(initialError || null);
|
||||
const [syncAttemptCount, setSyncAttemptCount] = useState(0);
|
||||
|
||||
// Sync errorMessage when initialError updates
|
||||
useEffect(() => {
|
||||
if (initialError !== undefined) {
|
||||
setErrorMessage(initialError);
|
||||
}
|
||||
}, [initialError]);
|
||||
|
||||
// Clear any existing session prompt and close background dialogs
|
||||
useEffect(() => {
|
||||
cancelSessionExpiration();
|
||||
@@ -134,10 +141,12 @@ export const AccountActivationModal: React.FC<AccountActivationModalProps> = ({
|
||||
</div>
|
||||
<div>
|
||||
<span className="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-wider uppercase text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2 py-0.5 rounded-full mb-1">
|
||||
Access Restricted • Awaiting Enablement
|
||||
Access Restricted • Lockout Active
|
||||
</span>
|
||||
<h2 id="activation-modal-title" className="text-lg sm:text-xl font-bold text-white tracking-tight">
|
||||
Account Pending Administrator Activation
|
||||
{errorMessage?.toLowerCase().includes('tenant')
|
||||
? 'Tenant Lockout • Account Inactive'
|
||||
: 'Account Pending Administrator Activation'}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
@@ -215,7 +224,11 @@ export const AccountActivationModal: React.FC<AccountActivationModalProps> = ({
|
||||
<div className="rounded-xl border border-rose-500/30 bg-rose-500/10 p-3.5 flex items-start gap-3 animate-in fade-in duration-150">
|
||||
<AlertTriangle className="w-4 h-4 text-rose-400 shrink-0 mt-0.5" />
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-semibold text-rose-300">Account Not Activated Yet</p>
|
||||
<p className="text-xs font-semibold text-rose-300">
|
||||
{errorMessage?.toLowerCase().includes('tenant')
|
||||
? 'Tenant Lockout In Effect'
|
||||
: 'Account Not Activated Yet'}
|
||||
</p>
|
||||
<p className="text-xs text-rose-200/90 leading-relaxed">{errorMessage}</p>
|
||||
{syncAttemptCount > 0 && (
|
||||
<p className="text-[11px] text-rose-400/80 pt-1">
|
||||
|
||||
@@ -0,0 +1,696 @@
|
||||
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 {
|
||||
FileText,
|
||||
Plus,
|
||||
Search,
|
||||
Filter,
|
||||
RefreshCw,
|
||||
Edit2,
|
||||
Eye,
|
||||
Layers,
|
||||
Calendar,
|
||||
User as UserIcon,
|
||||
Tag,
|
||||
CheckCircle2,
|
||||
AlertCircle,
|
||||
} from 'lucide-react';
|
||||
import { Modal } from '../ui/Modal';
|
||||
import { HelpTooltip } from '../ui/HelpTooltip';
|
||||
import { useToast } from '../ui/Toast';
|
||||
import {
|
||||
Instruction,
|
||||
Programme,
|
||||
ActivityStatus,
|
||||
} from '../../types';
|
||||
import {
|
||||
getAllInstructions,
|
||||
createInstruction,
|
||||
updateInstruction,
|
||||
} from '../../services/api';
|
||||
import {
|
||||
getActivityStatusBadge,
|
||||
formatDate,
|
||||
getUserEmail,
|
||||
ACTIVITY_STATUS_OPTIONS,
|
||||
} from '../../lib/formatters';
|
||||
|
||||
const instructionSchema = z.object({
|
||||
programmeId: z.coerce.number().min(1, 'Please select an associated programme'),
|
||||
name: z.string().min(3, 'Instruction title must be at least 3 characters'),
|
||||
code: z.string().optional(),
|
||||
description: z.string().min(5, 'Description is required (minimum 5 characters)'),
|
||||
status: z.coerce.number().default(ActivityStatus.Active),
|
||||
});
|
||||
|
||||
type InstructionFormValues = z.infer<typeof instructionSchema>;
|
||||
|
||||
interface InstructionsSectionProps {
|
||||
programmes: Programme[];
|
||||
currentUserId: string;
|
||||
preselectedProgrammeId?: string | number | null;
|
||||
onClearPreselectedProgramme?: () => void;
|
||||
isCreateModalOpenExternal?: boolean;
|
||||
onCloseCreateModalExternal?: () => void;
|
||||
}
|
||||
|
||||
export const InstructionsSection: React.FC<InstructionsSectionProps> = ({
|
||||
programmes,
|
||||
currentUserId,
|
||||
preselectedProgrammeId,
|
||||
onClearPreselectedProgramme,
|
||||
isCreateModalOpenExternal,
|
||||
onCloseCreateModalExternal,
|
||||
}) => {
|
||||
const queryClient = useQueryClient();
|
||||
const { success, error: toastError } = useToast();
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedProgrammeFilter, setSelectedProgrammeFilter] = useState<string>(
|
||||
preselectedProgrammeId ? String(preselectedProgrammeId) : 'all'
|
||||
);
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||
|
||||
// Modals
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingInstruction, setEditingInstruction] = useState<Instruction | null>(null);
|
||||
const [inspectingInstruction, setInspectingInstruction] = useState<Instruction | null>(null);
|
||||
|
||||
// Sync external create modal trigger if provided
|
||||
React.useEffect(() => {
|
||||
if (isCreateModalOpenExternal) {
|
||||
setEditingInstruction(null);
|
||||
instructionForm.reset({
|
||||
programmeId: preselectedProgrammeId ? Number(preselectedProgrammeId) : (programmes[0]?.id ? Number(programmes[0].id) : 0),
|
||||
name: '',
|
||||
code: '',
|
||||
description: '',
|
||||
status: ActivityStatus.Active,
|
||||
});
|
||||
setIsModalOpen(true);
|
||||
}
|
||||
}, [isCreateModalOpenExternal, preselectedProgrammeId, programmes]);
|
||||
|
||||
// Form setup
|
||||
const instructionForm = useForm<InstructionFormValues>({
|
||||
resolver: zodResolver(instructionSchema),
|
||||
defaultValues: {
|
||||
programmeId: programmes[0]?.id ? Number(programmes[0].id) : 0,
|
||||
name: '',
|
||||
code: '',
|
||||
description: '',
|
||||
status: ActivityStatus.Active,
|
||||
},
|
||||
});
|
||||
|
||||
// Query: Get all instructions
|
||||
const {
|
||||
data: instructions = [],
|
||||
isLoading,
|
||||
isFetching,
|
||||
refetch,
|
||||
} = useQuery({
|
||||
queryKey: ['all-instructions', programmes],
|
||||
queryFn: () => getAllInstructions(programmes),
|
||||
});
|
||||
|
||||
// Programme lookup helper
|
||||
const programmeMap = useMemo(() => {
|
||||
const map = new Map<string, Programme>();
|
||||
programmes.forEach((p) => map.set(String(p.id), p));
|
||||
return map;
|
||||
}, [programmes]);
|
||||
|
||||
// Mutation: Create or Update Instruction
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (data: InstructionFormValues) => {
|
||||
if (editingInstruction) {
|
||||
await updateInstruction({
|
||||
instructionId: editingInstruction.id,
|
||||
programmeId: data.programmeId,
|
||||
code: data.code,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
status: data.status !== undefined ? Number(data.status) : ActivityStatus.Active,
|
||||
userId: currentUserId,
|
||||
});
|
||||
} else {
|
||||
await createInstruction({
|
||||
programmeId: data.programmeId,
|
||||
code: data.code,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
status: data.status !== undefined ? Number(data.status) : ActivityStatus.Active,
|
||||
userId: currentUserId,
|
||||
});
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['all-instructions'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['instruments'] });
|
||||
success(
|
||||
editingInstruction ? 'Instruction Updated' : 'Instruction Created',
|
||||
editingInstruction
|
||||
? 'Funding instruction record updated successfully.'
|
||||
: 'New funding instruction attached to programme successfully.'
|
||||
);
|
||||
setIsModalOpen(false);
|
||||
setEditingInstruction(null);
|
||||
if (onCloseCreateModalExternal) onCloseCreateModalExternal();
|
||||
},
|
||||
onError: (err: any) => {
|
||||
toastError('Save Failed', err?.message || 'Failed to save instruction');
|
||||
},
|
||||
});
|
||||
|
||||
// Handlers
|
||||
const openCreateModal = (programmeId?: number | string) => {
|
||||
setEditingInstruction(null);
|
||||
instructionForm.reset({
|
||||
programmeId: programmeId
|
||||
? Number(programmeId)
|
||||
: selectedProgrammeFilter !== 'all'
|
||||
? Number(selectedProgrammeFilter)
|
||||
: programmes[0]?.id
|
||||
? Number(programmes[0].id)
|
||||
: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
description: '',
|
||||
status: ActivityStatus.Active,
|
||||
});
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const openEditModal = (inst: Instruction) => {
|
||||
setEditingInstruction(inst);
|
||||
instructionForm.reset({
|
||||
programmeId: Number(inst.programmeId),
|
||||
name: inst.name || '',
|
||||
code: inst.code || '',
|
||||
description: inst.description || '',
|
||||
status: Number(inst.status),
|
||||
});
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setEditingInstruction(null);
|
||||
if (onCloseCreateModalExternal) onCloseCreateModalExternal();
|
||||
};
|
||||
|
||||
// Filter instructions
|
||||
const filteredInstructions = useMemo(() => {
|
||||
return instructions.filter((inst) => {
|
||||
// Programme filter
|
||||
if (selectedProgrammeFilter !== 'all' && String(inst.programmeId) !== String(selectedProgrammeFilter)) {
|
||||
return false;
|
||||
}
|
||||
// Status filter
|
||||
if (statusFilter !== 'all' && String(inst.status) !== String(statusFilter)) {
|
||||
return false;
|
||||
}
|
||||
// Search term
|
||||
if (searchTerm.trim()) {
|
||||
const query = searchTerm.toLowerCase();
|
||||
const pName = programmeMap.get(String(inst.programmeId))?.name?.toLowerCase() || '';
|
||||
const matchTitle = (inst.name || '').toLowerCase().includes(query);
|
||||
const matchCode = (inst.code || '').toLowerCase().includes(query);
|
||||
const matchDesc = (inst.description || '').toLowerCase().includes(query);
|
||||
const matchProg = pName.includes(query);
|
||||
if (!matchTitle && !matchCode && !matchDesc && !matchProg) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [instructions, selectedProgrammeFilter, statusFilter, searchTerm, programmeMap]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Top Filter and Actions Bar */}
|
||||
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 bg-[#0d121f]/90 p-4 rounded-2xl border border-slate-800/80 backdrop-blur-sm">
|
||||
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 flex-1">
|
||||
{/* Search Input */}
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="w-4 h-4 text-slate-500 absolute left-3 top-3" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search instructions by title, code, description, or programme..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-9 pr-4 py-2.5 text-xs bg-[#090d16] border border-slate-700/80 rounded-xl focus:outline-none focus:ring-1 focus:ring-blue-500 text-slate-200 placeholder:text-slate-500 transition shadow-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Programme Filter Dropdown */}
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-slate-400 whitespace-nowrap flex items-center gap-1 font-medium">
|
||||
<Layers className="w-3.5 h-3.5 text-slate-400" />
|
||||
Programme:
|
||||
</label>
|
||||
<select
|
||||
value={selectedProgrammeFilter}
|
||||
onChange={(e) => {
|
||||
setSelectedProgrammeFilter(e.target.value);
|
||||
if (onClearPreselectedProgramme && e.target.value === 'all') {
|
||||
onClearPreselectedProgramme();
|
||||
}
|
||||
}}
|
||||
className="px-3 py-2 text-xs bg-[#090d16] border border-slate-700/80 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500 max-w-[200px]"
|
||||
>
|
||||
<option value="all">All Programmes ({programmes.length})</option>
|
||||
{programmes.map((p) => (
|
||||
<option key={p.id} value={String(p.id)}>
|
||||
{p.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Status Filter Dropdown */}
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-slate-400 whitespace-nowrap flex items-center gap-1 font-medium">
|
||||
<Filter className="w-3.5 h-3.5 text-slate-400" />
|
||||
Status:
|
||||
</label>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="px-3 py-2 text-xs bg-[#090d16] border border-slate-700/80 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
<option value="all">All Statuses</option>
|
||||
<option value={String(ActivityStatus.Active)}>Active</option>
|
||||
<option value={String(ActivityStatus.Inactive)}>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-2 self-end lg:self-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => refetch()}
|
||||
disabled={isFetching}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-2 text-xs font-semibold text-slate-300 bg-slate-800/80 hover:bg-slate-700 rounded-xl border border-slate-700 transition cursor-pointer"
|
||||
title="Refresh Instructions"
|
||||
>
|
||||
<RefreshCw className={`w-3.5 h-3.5 ${isFetching ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openCreateModal()}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-md shadow-blue-500/20 transition cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Instruction
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Instructions Table & Cards */}
|
||||
<div className="rounded-2xl border border-slate-800/80 bg-[#0d121f]/90 overflow-hidden shadow-xl">
|
||||
<div className="p-4 border-b border-slate-800/80 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="w-4 h-4 text-blue-400" />
|
||||
<h3 className="text-xs font-bold text-slate-200 uppercase tracking-wider">
|
||||
Funding Instructions & Instrument Guidelines ({filteredInstructions.length})
|
||||
</h3>
|
||||
<HelpTooltip
|
||||
title="Funding Instructions"
|
||||
content="Binding operational instructions and instrument guidelines tied to strategic funding programmes. Defines implementation directives and compliance standards."
|
||||
placement="right"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[11px] text-slate-400 font-mono">
|
||||
{filteredInstructions.length} of {instructions.length} recorded
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="p-12 text-center text-xs text-slate-400 flex flex-col items-center justify-center gap-2">
|
||||
<RefreshCw className="w-5 h-5 animate-spin text-blue-400" />
|
||||
<span>Loading instructions directory...</span>
|
||||
</div>
|
||||
) : filteredInstructions.length === 0 ? (
|
||||
<div className="p-12 text-center text-xs text-slate-400 space-y-3">
|
||||
<div className="text-slate-500">
|
||||
{searchTerm || selectedProgrammeFilter !== 'all' || statusFilter !== 'all'
|
||||
? 'No funding instructions match the active filters.'
|
||||
: 'No funding instructions registered yet. Link instructions to programmes using the button below.'}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openCreateModal()}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-xl transition cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add First Instruction
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-800/80 bg-slate-900/50 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
|
||||
<th className="py-3 px-4">Code / Ref</th>
|
||||
<th className="py-3 px-4">Instruction Title</th>
|
||||
<th className="py-3 px-4">Associated Programme</th>
|
||||
<th className="py-3 px-4">Status</th>
|
||||
<th className="py-3 px-4">Created Info</th>
|
||||
<th className="py-3 px-4 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/60 text-xs text-slate-300">
|
||||
{filteredInstructions.map((inst) => {
|
||||
const statusBadge = getActivityStatusBadge(inst.status);
|
||||
const parentProg = programmeMap.get(String(inst.programmeId));
|
||||
|
||||
return (
|
||||
<tr key={inst.id} className="hover:bg-slate-800/30 transition-colors">
|
||||
<td className="py-3.5 px-4 font-mono font-bold text-blue-400">
|
||||
<span className="bg-blue-500/10 px-2 py-0.5 rounded border border-blue-500/20 text-[11px]">
|
||||
{inst.code || `INST-${inst.id}`}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3.5 px-4">
|
||||
<div className="font-semibold text-white max-w-sm">{inst.name}</div>
|
||||
{inst.description && (
|
||||
<div className="text-[11px] text-slate-400 line-clamp-1 mt-0.5 max-w-md">
|
||||
{inst.description}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3.5 px-4">
|
||||
{parentProg ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-slate-800/80 text-slate-200 border border-slate-700 font-medium">
|
||||
<Layers className="w-3 h-3 text-blue-400" />
|
||||
{parentProg.name}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-slate-500 font-mono text-xs">
|
||||
Programme #{inst.programmeId}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3.5 px-4">
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold border ${statusBadge.className}`}
|
||||
>
|
||||
{statusBadge.label}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3.5 px-4 text-[11px] text-slate-400 font-mono">
|
||||
<div>{formatDate(inst.createdAt)}</div>
|
||||
{inst.createdBy && (
|
||||
<div className="text-[10px] text-slate-500">{getUserEmail(inst.createdBy)}</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3.5 px-4 text-right">
|
||||
<div className="flex items-center justify-end gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setInspectingInstruction(inst)}
|
||||
className="inline-flex items-center gap-1 text-xs font-semibold text-cyan-400 hover:text-white bg-cyan-500/10 hover:bg-cyan-500/20 border border-cyan-500/30 px-2.5 py-1 rounded-lg transition shadow-xs cursor-pointer"
|
||||
title="Inspect Instruction"
|
||||
>
|
||||
<Eye className="w-3 h-3" />
|
||||
Inspect
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openEditModal(inst)}
|
||||
className="inline-flex items-center gap-1 text-xs font-semibold text-slate-200 hover:text-white bg-slate-900/80 hover:bg-slate-800 border border-slate-700/80 px-2.5 py-1 rounded-lg transition shadow-xs cursor-pointer"
|
||||
title="Edit / Mutate Instruction"
|
||||
>
|
||||
<Edit2 className="w-3 h-3" />
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal: Create / Edit Instruction */}
|
||||
<Modal
|
||||
isOpen={isModalOpen}
|
||||
onClose={handleCloseModal}
|
||||
title={editingInstruction ? 'Edit Funding Instruction' : 'Add New Funding Instruction'}
|
||||
subtitle={
|
||||
editingInstruction
|
||||
? `Mutating Instruction ${editingInstruction.code || `#${editingInstruction.id}`}`
|
||||
: 'Authoritative operational instruction attached to a strategic programme'
|
||||
}
|
||||
helpText="Instructions operationalize funding programmes into concrete binding directives. Choose an existing programme from the dropdown to link data."
|
||||
>
|
||||
<form
|
||||
onSubmit={instructionForm.handleSubmit((data) => mutation.mutate(data))}
|
||||
className="space-y-4"
|
||||
>
|
||||
{/* Associated Programme Dropdown */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<label className="block text-xs font-semibold text-slate-300">
|
||||
Associated Programme *
|
||||
</label>
|
||||
<HelpTooltip
|
||||
title="Associated Programme"
|
||||
content="Select the strategic funding programme under which this operational instruction is established."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
{...instructionForm.register('programmeId')}
|
||||
className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Select an associated programme...</option>
|
||||
{programmes.map((p) => (
|
||||
<option key={p.id} value={Number(p.id)}>
|
||||
{p.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{instructionForm.formState.errors.programmeId && (
|
||||
<p className="text-red-400 text-[11px] mt-1">
|
||||
{instructionForm.formState.errors.programmeId.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<label className="block text-xs font-semibold text-slate-300">
|
||||
Instruction Title *
|
||||
</label>
|
||||
<HelpTooltip
|
||||
title="Instruction Title"
|
||||
content="Formal title of the funding instruction or instrument (e.g., SME Technology Transfer Subsidy Guideline)."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. Clean Energy Grant Directive 2026"
|
||||
{...instructionForm.register('name')}
|
||||
className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
{instructionForm.formState.errors.name && (
|
||||
<p className="text-red-400 text-[11px] mt-1">
|
||||
{instructionForm.formState.errors.name.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Code */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<label className="block text-xs font-semibold text-slate-300">
|
||||
Instruction Code (Optional)
|
||||
</label>
|
||||
<HelpTooltip
|
||||
title="Instruction Code"
|
||||
content="Unique operational reference code (e.g., INST-CE-001). If left blank, one is generated automatically."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. INST-CE-001"
|
||||
{...instructionForm.register('code')}
|
||||
className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500 font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<label className="block text-xs font-semibold text-slate-300">
|
||||
Description & Implementation Directives *
|
||||
</label>
|
||||
<HelpTooltip
|
||||
title="Instruction Description"
|
||||
content="Comprehensive directives, statutory mandate, eligibility scope, and operational guidelines."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<textarea
|
||||
rows={4}
|
||||
placeholder="Detail the operational mandate, eligibility scope, disbursement triggers, and statutory compliance requirements..."
|
||||
{...instructionForm.register('description')}
|
||||
className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
{instructionForm.formState.errors.description && (
|
||||
<p className="text-red-400 text-[11px] mt-1">
|
||||
{instructionForm.formState.errors.description.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<label className="block text-xs font-semibold text-slate-300">Status</label>
|
||||
<HelpTooltip
|
||||
title="Instruction Lifecycle Status"
|
||||
content="Indicates whether this instruction is actively enforceable or archived/inactive."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
{...instructionForm.register('status')}
|
||||
className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
{ACTIVITY_STATUS_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Footer Actions */}
|
||||
<div className="pt-3 border-t border-slate-800 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCloseModal}
|
||||
className="px-4 py-2 text-xs font-semibold text-slate-300 bg-slate-800 hover:bg-slate-700 rounded-xl transition cursor-pointer"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={mutation.isPending}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-xl shadow-md transition disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
{mutation.isPending && <RefreshCw className="w-3.5 h-3.5 animate-spin" />}
|
||||
{editingInstruction ? 'Save Instruction Changes' : 'Create Instruction'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
{/* Modal: Inspect Instruction Detail */}
|
||||
{inspectingInstruction && (
|
||||
<Modal
|
||||
isOpen={!!inspectingInstruction}
|
||||
onClose={() => setInspectingInstruction(null)}
|
||||
title={`Instruction: ${inspectingInstruction.name || ''}`}
|
||||
subtitle={`Reference: ${inspectingInstruction.code || `INST-${inspectingInstruction.id}`}`}
|
||||
maxWidth="lg"
|
||||
>
|
||||
<div className="space-y-4 text-xs">
|
||||
<div className="p-4 rounded-xl border border-slate-800 bg-[#0d121f] space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-mono text-xs font-bold text-blue-400 bg-blue-500/10 px-2.5 py-1 rounded border border-blue-500/20">
|
||||
{inspectingInstruction.code || `INST-${inspectingInstruction.id}`}
|
||||
</span>
|
||||
{(() => {
|
||||
const badge = getActivityStatusBadge(inspectingInstruction.status);
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border ${badge.className}`}
|
||||
>
|
||||
{badge.label}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white mb-1">{inspectingInstruction.name}</h4>
|
||||
<p className="text-slate-300 whitespace-pre-wrap leading-relaxed">
|
||||
{inspectingInstruction.description || 'No detailed description provided.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-3 border-t border-slate-800/80 grid grid-cols-2 gap-3 text-[11px]">
|
||||
<div>
|
||||
<span className="text-slate-500 block">Associated Programme</span>
|
||||
<span className="text-slate-200 font-semibold">
|
||||
{programmeMap.get(String(inspectingInstruction.programmeId))?.name ||
|
||||
`Programme #${inspectingInstruction.programmeId}`}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500 block">Created On</span>
|
||||
<span className="text-slate-200 font-mono">
|
||||
{formatDate(inspectingInstruction.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500 block">Created By</span>
|
||||
<span className="text-slate-200 font-mono">
|
||||
{inspectingInstruction.createdBy ? getUserEmail(inspectingInstruction.createdBy) : '—'}
|
||||
</span>
|
||||
</div>
|
||||
{inspectingInstruction.updatedAt && (
|
||||
<div>
|
||||
<span className="text-slate-500 block">Last Mutated</span>
|
||||
<span className="text-slate-200 font-mono">
|
||||
{formatDate(inspectingInstruction.updatedAt)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-slate-800 flex justify-between items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const inst = inspectingInstruction;
|
||||
setInspectingInstruction(null);
|
||||
openEditModal(inst);
|
||||
}}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-200 bg-slate-800 hover:bg-slate-700 rounded-xl border border-slate-700 cursor-pointer"
|
||||
>
|
||||
<Edit2 className="w-3.5 h-3.5" />
|
||||
Edit Instruction
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setInspectingInstruction(null)}
|
||||
className="px-4 py-2 text-xs font-semibold text-slate-300 bg-slate-800 hover:bg-slate-700 rounded-xl cursor-pointer"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,700 @@
|
||||
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 {
|
||||
Scale,
|
||||
Plus,
|
||||
Search,
|
||||
Filter,
|
||||
RefreshCw,
|
||||
Edit2,
|
||||
Eye,
|
||||
Layers,
|
||||
Calendar,
|
||||
User as UserIcon,
|
||||
Tag,
|
||||
CheckCircle2,
|
||||
AlertCircle,
|
||||
GitBranch,
|
||||
} from 'lucide-react';
|
||||
import { Modal } from '../ui/Modal';
|
||||
import { HelpTooltip } from '../ui/HelpTooltip';
|
||||
import { useToast } from '../ui/Toast';
|
||||
import {
|
||||
Rule,
|
||||
Programme,
|
||||
ActivityStatus,
|
||||
} from '../../types';
|
||||
import {
|
||||
getRules,
|
||||
createRule,
|
||||
updateRule,
|
||||
} from '../../services/api';
|
||||
import {
|
||||
getActivityStatusBadge,
|
||||
formatDate,
|
||||
getUserEmail,
|
||||
ACTIVITY_STATUS_OPTIONS,
|
||||
} from '../../lib/formatters';
|
||||
|
||||
const ruleSchema = z.object({
|
||||
programmeId: z.coerce.number().min(1, 'Please select an associated programme from the dropdown'),
|
||||
name: z.string().min(3, 'Rule name must be at least 3 characters'),
|
||||
description: z.string().min(5, 'Description is required (minimum 5 characters)'),
|
||||
version: z.coerce.number().min(1, 'Version must be at least 1').default(1),
|
||||
status: z.coerce.number().default(ActivityStatus.Active),
|
||||
});
|
||||
|
||||
type RuleFormValues = z.infer<typeof ruleSchema>;
|
||||
|
||||
interface RulesSectionProps {
|
||||
programmes: Programme[];
|
||||
currentUserId: string;
|
||||
preselectedProgrammeId?: string | number | null;
|
||||
onClearPreselectedProgramme?: () => void;
|
||||
isCreateModalOpenExternal?: boolean;
|
||||
onCloseCreateModalExternal?: () => void;
|
||||
}
|
||||
|
||||
export const RulesSection: React.FC<RulesSectionProps> = ({
|
||||
programmes,
|
||||
currentUserId,
|
||||
preselectedProgrammeId,
|
||||
onClearPreselectedProgramme,
|
||||
isCreateModalOpenExternal,
|
||||
onCloseCreateModalExternal,
|
||||
}) => {
|
||||
const queryClient = useQueryClient();
|
||||
const { success, error: toastError } = useToast();
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedProgrammeFilter, setSelectedProgrammeFilter] = useState<string>(
|
||||
preselectedProgrammeId ? String(preselectedProgrammeId) : 'all'
|
||||
);
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||
|
||||
// Modals
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingRule, setEditingRule] = useState<Rule | null>(null);
|
||||
const [inspectingRule, setInspectingRule] = useState<Rule | null>(null);
|
||||
|
||||
// Sync external create trigger
|
||||
React.useEffect(() => {
|
||||
if (isCreateModalOpenExternal) {
|
||||
setEditingRule(null);
|
||||
ruleForm.reset({
|
||||
programmeId: preselectedProgrammeId ? Number(preselectedProgrammeId) : (programmes[0]?.id ? Number(programmes[0].id) : 0),
|
||||
name: '',
|
||||
description: '',
|
||||
version: 1,
|
||||
status: ActivityStatus.Active,
|
||||
});
|
||||
setIsModalOpen(true);
|
||||
}
|
||||
}, [isCreateModalOpenExternal, preselectedProgrammeId, programmes]);
|
||||
|
||||
// Form setup
|
||||
const ruleForm = useForm<RuleFormValues>({
|
||||
resolver: zodResolver(ruleSchema),
|
||||
defaultValues: {
|
||||
programmeId: programmes[0]?.id ? Number(programmes[0].id) : 0,
|
||||
name: '',
|
||||
description: '',
|
||||
version: 1,
|
||||
status: ActivityStatus.Active,
|
||||
},
|
||||
});
|
||||
|
||||
// Query: Get all rules (with programme filter)
|
||||
const {
|
||||
data: rules = [],
|
||||
isLoading,
|
||||
isFetching,
|
||||
refetch,
|
||||
} = useQuery({
|
||||
queryKey: ['rules', selectedProgrammeFilter],
|
||||
queryFn: () =>
|
||||
getRules(
|
||||
{ page: 1, pageSize: 200 },
|
||||
selectedProgrammeFilter !== 'all' ? selectedProgrammeFilter : undefined
|
||||
),
|
||||
});
|
||||
|
||||
// Programme lookup helper
|
||||
const programmeMap = useMemo(() => {
|
||||
const map = new Map<string, Programme>();
|
||||
programmes.forEach((p) => map.set(String(p.id), p));
|
||||
return map;
|
||||
}, [programmes]);
|
||||
|
||||
// Mutation: Create or Update Rule
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (data: RuleFormValues) => {
|
||||
if (editingRule) {
|
||||
await updateRule({
|
||||
ruleId: editingRule.id,
|
||||
programmeId: data.programmeId,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
status: data.status !== undefined ? Number(data.status) : ActivityStatus.Active,
|
||||
version: Number(data.version) || 1,
|
||||
userId: currentUserId,
|
||||
});
|
||||
} else {
|
||||
await createRule({
|
||||
programmeId: data.programmeId,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
userId: currentUserId,
|
||||
});
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['rules'] });
|
||||
success(
|
||||
editingRule ? 'Rule Mutated' : 'Rule Created',
|
||||
editingRule
|
||||
? 'Programme rule record mutated successfully.'
|
||||
: 'New programme rule registered and linked to programme.'
|
||||
);
|
||||
setIsModalOpen(false);
|
||||
setEditingRule(null);
|
||||
if (onCloseCreateModalExternal) onCloseCreateModalExternal();
|
||||
},
|
||||
onError: (err: any) => {
|
||||
toastError('Save Failed', err?.message || 'Failed to save programme rule');
|
||||
},
|
||||
});
|
||||
|
||||
// Handlers
|
||||
const openCreateModal = (programmeId?: number | string) => {
|
||||
setEditingRule(null);
|
||||
ruleForm.reset({
|
||||
programmeId: programmeId
|
||||
? Number(programmeId)
|
||||
: selectedProgrammeFilter !== 'all'
|
||||
? Number(selectedProgrammeFilter)
|
||||
: programmes[0]?.id
|
||||
? Number(programmes[0].id)
|
||||
: 0,
|
||||
name: '',
|
||||
description: '',
|
||||
version: 1,
|
||||
status: ActivityStatus.Active,
|
||||
});
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const openEditModal = (rule: Rule) => {
|
||||
setEditingRule(rule);
|
||||
ruleForm.reset({
|
||||
programmeId: Number(rule.programmeId),
|
||||
name: rule.name || '',
|
||||
description: rule.description || '',
|
||||
version: Number(rule.version) || 1,
|
||||
status: Number(rule.status),
|
||||
});
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setEditingRule(null);
|
||||
if (onCloseCreateModalExternal) onCloseCreateModalExternal();
|
||||
};
|
||||
|
||||
// Filter rules
|
||||
const filteredRules = useMemo(() => {
|
||||
return rules.filter((r) => {
|
||||
// Programme filter
|
||||
if (selectedProgrammeFilter !== 'all' && String(r.programmeId) !== String(selectedProgrammeFilter)) {
|
||||
return false;
|
||||
}
|
||||
// Status filter
|
||||
if (statusFilter !== 'all' && String(r.status) !== String(statusFilter)) {
|
||||
return false;
|
||||
}
|
||||
// Search term
|
||||
if (searchTerm.trim()) {
|
||||
const query = searchTerm.toLowerCase();
|
||||
const pName = programmeMap.get(String(r.programmeId))?.name?.toLowerCase() || '';
|
||||
const matchName = (r.name || '').toLowerCase().includes(query);
|
||||
const matchDesc = (r.description || '').toLowerCase().includes(query);
|
||||
const matchProg = pName.includes(query);
|
||||
if (!matchName && !matchDesc && !matchProg) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [rules, selectedProgrammeFilter, statusFilter, searchTerm, programmeMap]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Top Filter and Actions Bar */}
|
||||
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 bg-[#0d121f]/90 p-4 rounded-2xl border border-slate-800/80 backdrop-blur-sm">
|
||||
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 flex-1">
|
||||
{/* Search Input */}
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="w-4 h-4 text-slate-500 absolute left-3 top-3" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search rules by title, description, or programme..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-9 pr-4 py-2.5 text-xs bg-[#090d16] border border-slate-700/80 rounded-xl focus:outline-none focus:ring-1 focus:ring-blue-500 text-slate-200 placeholder:text-slate-500 transition shadow-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Programme Filter Dropdown */}
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-slate-400 whitespace-nowrap flex items-center gap-1 font-medium">
|
||||
<Layers className="w-3.5 h-3.5 text-slate-400" />
|
||||
Programme:
|
||||
</label>
|
||||
<select
|
||||
value={selectedProgrammeFilter}
|
||||
onChange={(e) => {
|
||||
setSelectedProgrammeFilter(e.target.value);
|
||||
if (onClearPreselectedProgramme && e.target.value === 'all') {
|
||||
onClearPreselectedProgramme();
|
||||
}
|
||||
}}
|
||||
className="px-3 py-2 text-xs bg-[#090d16] border border-slate-700/80 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500 max-w-[200px]"
|
||||
>
|
||||
<option value="all">All Programmes ({programmes.length})</option>
|
||||
{programmes.map((p) => (
|
||||
<option key={p.id} value={String(p.id)}>
|
||||
{p.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Status Filter Dropdown */}
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-slate-400 whitespace-nowrap flex items-center gap-1 font-medium">
|
||||
<Filter className="w-3.5 h-3.5 text-slate-400" />
|
||||
Status:
|
||||
</label>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="px-3 py-2 text-xs bg-[#090d16] border border-slate-700/80 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
<option value="all">All Statuses</option>
|
||||
<option value={String(ActivityStatus.Active)}>Active</option>
|
||||
<option value={String(ActivityStatus.Inactive)}>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-2 self-end lg:self-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => refetch()}
|
||||
disabled={isFetching}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-2 text-xs font-semibold text-slate-300 bg-slate-800/80 hover:bg-slate-700 rounded-xl border border-slate-700 transition cursor-pointer"
|
||||
title="Refresh Rules"
|
||||
>
|
||||
<RefreshCw className={`w-3.5 h-3.5 ${isFetching ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openCreateModal()}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-md shadow-blue-500/20 transition cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Rule
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rules Table & Cards */}
|
||||
<div className="rounded-2xl border border-slate-800/80 bg-[#0d121f]/90 overflow-hidden shadow-xl">
|
||||
<div className="p-4 border-b border-slate-800/80 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Scale className="w-4 h-4 text-amber-400" />
|
||||
<h3 className="text-xs font-bold text-slate-200 uppercase tracking-wider">
|
||||
Programme Rules & Governance Directives ({filteredRules.length})
|
||||
</h3>
|
||||
<HelpTooltip
|
||||
title="Programme Rules"
|
||||
content="Binding regulatory, operational, and eligibility rules associated with specific funding programmes. Enforces statutory constraints on grant allocation."
|
||||
placement="right"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[11px] text-slate-400 font-mono">
|
||||
{filteredRules.length} of {rules.length} recorded
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="p-12 text-center text-xs text-slate-400 flex flex-col items-center justify-center gap-2">
|
||||
<RefreshCw className="w-5 h-5 animate-spin text-amber-400" />
|
||||
<span>Loading programme rules directory...</span>
|
||||
</div>
|
||||
) : filteredRules.length === 0 ? (
|
||||
<div className="p-12 text-center text-xs text-slate-400 space-y-3">
|
||||
<div className="text-slate-500">
|
||||
{searchTerm || selectedProgrammeFilter !== 'all' || statusFilter !== 'all'
|
||||
? 'No programme rules match the active filters.'
|
||||
: 'No programme rules registered yet. Link rules to programmes using the button below.'}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openCreateModal()}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-xl transition cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add First Rule
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-800/80 bg-slate-900/50 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
|
||||
<th className="py-3 px-4">Rule Title & Directives</th>
|
||||
<th className="py-3 px-4">Associated Programme</th>
|
||||
<th className="py-3 px-4">Version</th>
|
||||
<th className="py-3 px-4">Status</th>
|
||||
<th className="py-3 px-4">Audit Info</th>
|
||||
<th className="py-3 px-4 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/60 text-xs text-slate-300">
|
||||
{filteredRules.map((r) => {
|
||||
const statusBadge = getActivityStatusBadge(r.status);
|
||||
const parentProg = programmeMap.get(String(r.programmeId));
|
||||
|
||||
return (
|
||||
<tr key={r.id} className="hover:bg-slate-800/30 transition-colors">
|
||||
<td className="py-3.5 px-4">
|
||||
<div className="font-semibold text-white max-w-sm">{r.name}</div>
|
||||
{r.description && (
|
||||
<div className="text-[11px] text-slate-400 line-clamp-1 mt-0.5 max-w-md">
|
||||
{r.description}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3.5 px-4">
|
||||
{parentProg ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-slate-800/80 text-slate-200 border border-slate-700 font-medium">
|
||||
<Layers className="w-3 h-3 text-amber-400" />
|
||||
{parentProg.name}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-slate-500 font-mono text-xs">
|
||||
Programme #{r.programmeId}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3.5 px-4 font-mono">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-semibold bg-amber-500/10 text-amber-400 border border-amber-500/20">
|
||||
<GitBranch className="w-3 h-3" />v{r.version || 1}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3.5 px-4">
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold border ${statusBadge.className}`}
|
||||
>
|
||||
{statusBadge.label}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3.5 px-4 text-[11px] text-slate-400 font-mono">
|
||||
<div>{formatDate(r.createdAt)}</div>
|
||||
{r.createdBy && (
|
||||
<div className="text-[10px] text-slate-500">{getUserEmail(r.createdBy)}</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3.5 px-4 text-right">
|
||||
<div className="flex items-center justify-end gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setInspectingRule(r)}
|
||||
className="inline-flex items-center gap-1 text-xs font-semibold text-cyan-400 hover:text-white bg-cyan-500/10 hover:bg-cyan-500/20 border border-cyan-500/30 px-2.5 py-1 rounded-lg transition shadow-xs cursor-pointer"
|
||||
title="Inspect Rule"
|
||||
>
|
||||
<Eye className="w-3 h-3" />
|
||||
Inspect
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openEditModal(r)}
|
||||
className="inline-flex items-center gap-1 text-xs font-semibold text-slate-200 hover:text-white bg-slate-900/80 hover:bg-slate-800 border border-slate-700/80 px-2.5 py-1 rounded-lg transition shadow-xs cursor-pointer"
|
||||
title="Edit / Mutate Rule"
|
||||
>
|
||||
<Edit2 className="w-3 h-3" />
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal: Create / Edit Rule */}
|
||||
<Modal
|
||||
isOpen={isModalOpen}
|
||||
onClose={handleCloseModal}
|
||||
title={editingRule ? 'Edit Programme Rule' : 'Register New Programme Rule'}
|
||||
subtitle={
|
||||
editingRule
|
||||
? `Mutating Rule: ${editingRule.name || `#${editingRule.id}`}`
|
||||
: 'Authoritative compliance rule associated with an existing funding programme'
|
||||
}
|
||||
helpText="Each rule must be associated with an existing programme chosen from the dropdown below. Rules define statutory constraints and mandatory eligibility."
|
||||
>
|
||||
<form
|
||||
onSubmit={ruleForm.handleSubmit((data) => mutation.mutate(data))}
|
||||
className="space-y-4"
|
||||
>
|
||||
{/* Associated Programme Dropdown (User must choose from dropdown!) */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<label className="block text-xs font-semibold text-slate-300">
|
||||
Associated Programme *
|
||||
</label>
|
||||
<HelpTooltip
|
||||
title="Associated Programme Selection"
|
||||
content="Choose the existing funding programme to which this rule will apply. Each rule is strictly associated with a programme."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
{...ruleForm.register('programmeId')}
|
||||
className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Select an associated programme from dropdown...</option>
|
||||
{programmes.map((p) => (
|
||||
<option key={p.id} value={Number(p.id)}>
|
||||
{p.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{ruleForm.formState.errors.programmeId && (
|
||||
<p className="text-red-400 text-[11px] mt-1">
|
||||
{ruleForm.formState.errors.programmeId.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Rule Name */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<label className="block text-xs font-semibold text-slate-300">Rule Name *</label>
|
||||
<HelpTooltip
|
||||
title="Rule Name"
|
||||
content="Title or clause name of the programme rule (e.g., Mandatory BEE Level 2 Threshold)."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. Environmental Impact Assessment Mandatory Clearance"
|
||||
{...ruleForm.register('name')}
|
||||
className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
{ruleForm.formState.errors.name && (
|
||||
<p className="text-red-400 text-[11px] mt-1">
|
||||
{ruleForm.formState.errors.name.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<label className="block text-xs font-semibold text-slate-300">
|
||||
Rule Directives & Description *
|
||||
</label>
|
||||
<HelpTooltip
|
||||
title="Rule Directives"
|
||||
content="Full text and verification criteria of the rule enforced across all projects in the programme."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<textarea
|
||||
rows={4}
|
||||
placeholder="Specify the exact statutory rule, criteria, threshold, verification mechanism, and non-compliance penalty..."
|
||||
{...ruleForm.register('description')}
|
||||
className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
{ruleForm.formState.errors.description && (
|
||||
<p className="text-red-400 text-[11px] mt-1">
|
||||
{ruleForm.formState.errors.description.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Version & Status */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<label className="block text-xs font-semibold text-slate-300">Rule Version</label>
|
||||
<HelpTooltip
|
||||
title="Rule Version"
|
||||
content="Integer version tracking revisions of this statutory rule."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
{...ruleForm.register('version')}
|
||||
className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500 font-mono"
|
||||
/>
|
||||
{ruleForm.formState.errors.version && (
|
||||
<p className="text-red-400 text-[11px] mt-1">
|
||||
{ruleForm.formState.errors.version.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<label className="block text-xs font-semibold text-slate-300">Status</label>
|
||||
<HelpTooltip
|
||||
title="Rule Enforcement Status"
|
||||
content="Active rules are actively evaluated in grant awards and milestones."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
{...ruleForm.register('status')}
|
||||
className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
{ACTIVITY_STATUS_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Actions */}
|
||||
<div className="pt-3 border-t border-slate-800 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCloseModal}
|
||||
className="px-4 py-2 text-xs font-semibold text-slate-300 bg-slate-800 hover:bg-slate-700 rounded-xl transition cursor-pointer"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={mutation.isPending}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-xl shadow-md transition disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
{mutation.isPending && <RefreshCw className="w-3.5 h-3.5 animate-spin" />}
|
||||
{editingRule ? 'Save Rule Changes' : 'Register Programme Rule'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
{/* Modal: Inspect Rule Detail */}
|
||||
{inspectingRule && (
|
||||
<Modal
|
||||
isOpen={!!inspectingRule}
|
||||
onClose={() => setInspectingRule(null)}
|
||||
title={`Programme Rule: ${inspectingRule.name || ''}`}
|
||||
subtitle={`Version ${inspectingRule.version || 1} • Rule #${inspectingRule.id}`}
|
||||
maxWidth="lg"
|
||||
>
|
||||
<div className="space-y-4 text-xs">
|
||||
<div className="p-4 rounded-xl border border-slate-800 bg-[#0d121f] space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-mono text-xs font-bold text-amber-400 bg-amber-500/10 px-2.5 py-1 rounded border border-amber-500/20 flex items-center gap-1">
|
||||
<GitBranch className="w-3.5 h-3.5" />
|
||||
Version {inspectingRule.version || 1}
|
||||
</span>
|
||||
{(() => {
|
||||
const badge = getActivityStatusBadge(inspectingRule.status);
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border ${badge.className}`}
|
||||
>
|
||||
{badge.label}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white mb-1">{inspectingRule.name}</h4>
|
||||
<p className="text-slate-300 whitespace-pre-wrap leading-relaxed">
|
||||
{inspectingRule.description || 'No detailed description provided.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-3 border-t border-slate-800/80 grid grid-cols-2 gap-3 text-[11px]">
|
||||
<div>
|
||||
<span className="text-slate-500 block">Associated Programme</span>
|
||||
<span className="text-slate-200 font-semibold">
|
||||
{programmeMap.get(String(inspectingRule.programmeId))?.name ||
|
||||
`Programme #${inspectingRule.programmeId}`}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500 block">Created On</span>
|
||||
<span className="text-slate-200 font-mono">
|
||||
{formatDate(inspectingRule.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500 block">Created By</span>
|
||||
<span className="text-slate-200 font-mono">
|
||||
{inspectingRule.createdBy ? getUserEmail(inspectingRule.createdBy) : '—'}
|
||||
</span>
|
||||
</div>
|
||||
{inspectingRule.updatedAt && (
|
||||
<div>
|
||||
<span className="text-slate-500 block">Last Mutated</span>
|
||||
<span className="text-slate-200 font-mono">
|
||||
{formatDate(inspectingRule.updatedAt)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-slate-800 flex justify-between items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const r = inspectingRule;
|
||||
setInspectingRule(null);
|
||||
openEditModal(r);
|
||||
}}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-200 bg-slate-800 hover:bg-slate-700 rounded-xl border border-slate-700 cursor-pointer"
|
||||
>
|
||||
<Edit2 className="w-3.5 h-3.5" />
|
||||
Edit Rule
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setInspectingRule(null)}
|
||||
className="px-4 py-2 text-xs font-semibold text-slate-300 bg-slate-800 hover:bg-slate-700 rounded-xl cursor-pointer"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -26,6 +26,7 @@ import {
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
getAllEvidence,
|
||||
getProjectEvidence,
|
||||
getEvidenceSecureLink,
|
||||
updateEvidence,
|
||||
uploadEvidenceFile,
|
||||
@@ -82,8 +83,11 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
|
||||
const queryClient = useQueryClient();
|
||||
const { success, error: toastError } = useToast();
|
||||
|
||||
// Filter States
|
||||
// Filter States: default to initialProjectId if given, otherwise when projects load default to first project
|
||||
const [selectedProjectId, setSelectedProjectId] = useState<string | number | 'all'>(initialProjectId);
|
||||
const [userHasSelectedProject, setUserHasSelectedProject] = useState(
|
||||
initialProjectId !== undefined && initialProjectId !== null && initialProjectId !== 'all'
|
||||
);
|
||||
const [selectedMilestoneId, setSelectedMilestoneId] = useState<string | number | 'all'>(initialMilestoneId);
|
||||
const [selectedActivityId, setSelectedActivityId] = useState<string | number | 'all'>(initialActivityId);
|
||||
const [selectedUserId, setSelectedUserId] = useState<string | 'all'>(initialUserId);
|
||||
@@ -116,6 +120,21 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
|
||||
queryFn: () => getUsers(1, 100).catch(() => []),
|
||||
});
|
||||
|
||||
// Keep selectedProjectId in sync when initialProjectId prop changes
|
||||
React.useEffect(() => {
|
||||
if (initialProjectId && initialProjectId !== 'all') {
|
||||
setSelectedProjectId(initialProjectId);
|
||||
setUserHasSelectedProject(true);
|
||||
}
|
||||
}, [initialProjectId]);
|
||||
|
||||
// Load evidence by default for the first project in the list
|
||||
React.useEffect(() => {
|
||||
if (!userHasSelectedProject && projects.length > 0 && selectedProjectId === 'all') {
|
||||
setSelectedProjectId(projects[0].id);
|
||||
}
|
||||
}, [projects, userHasSelectedProject, selectedProjectId]);
|
||||
|
||||
// Query activities based on selected project or fetch all across available projects
|
||||
const { data: activities = [] } = useQuery<Activity[]>({
|
||||
queryKey: ['activities-review-queue', selectedProjectId],
|
||||
@@ -134,104 +153,20 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
|
||||
enabled: projects.length > 0,
|
||||
});
|
||||
|
||||
// Query evidence: if a project is selected (e.g. the first project by default), fetch via /v1/api/evidence/{projectId}
|
||||
const { data: rawEvidenceList = [], isLoading: loadingEvidence } = useQuery<Evidence[]>({
|
||||
queryKey: ['evidence'],
|
||||
queryFn: () => getAllEvidence().catch(() => []),
|
||||
queryKey: ['evidence', selectedProjectId],
|
||||
queryFn: async () => {
|
||||
if (selectedProjectId && selectedProjectId !== 'all') {
|
||||
return getProjectEvidence(selectedProjectId).catch(() => []);
|
||||
}
|
||||
return getAllEvidence().catch(() => []);
|
||||
},
|
||||
enabled: projects.length > 0 || selectedProjectId !== 'all',
|
||||
});
|
||||
|
||||
// Baseline demonstration records to guarantee full functionality when backend vault is initially empty
|
||||
const defaultEvidenceItems: Evidence[] = useMemo(() => {
|
||||
const p1 = projects[0]?.id || 401;
|
||||
const p2 = projects[1]?.id || projects[0]?.id || 402;
|
||||
const m1 = milestones[0]?.id || 801;
|
||||
const m2 = milestones[1]?.id || milestones[0]?.id || 802;
|
||||
const a1 = activities[0]?.id || 101;
|
||||
const a2 = activities[1]?.id || activities[0]?.id || 102;
|
||||
const u1 = users[0]?.id || 'usr_awardee_01';
|
||||
const u2 = users[1]?.id || users[0]?.id || 'usr_awardee_02';
|
||||
const u3 = users[2]?.id || 'usr_awardee_03';
|
||||
|
||||
return [
|
||||
{
|
||||
id: 'ev-101',
|
||||
projectId: p1,
|
||||
milestoneId: m1,
|
||||
activityId: a1,
|
||||
version: 1,
|
||||
type: EvidenceType.CompletionCertificate,
|
||||
fileName: 'Civil_Works_Milestone_Completion_Certificate_Signed.pdf',
|
||||
fileSize: '4.8 MB',
|
||||
status: ApprovalStatus.PendingReview,
|
||||
createdBy: u1,
|
||||
createdAt: '2026-09-18T14:32:00Z',
|
||||
documentUrl: 'https://storage.googleapis.com/pfm-evidence-vault/projects/401/milestones/801/completion_cert.pdf',
|
||||
},
|
||||
{
|
||||
id: 'ev-102',
|
||||
projectId: p1,
|
||||
milestoneId: m1,
|
||||
activityId: a1,
|
||||
version: 2,
|
||||
type: EvidenceType.GeotaggedPhoto,
|
||||
fileName: 'Geotagged_Substation_Installation_Survey.pdf',
|
||||
fileSize: '16.2 MB',
|
||||
status: ApprovalStatus.PendingReview,
|
||||
createdBy: u1,
|
||||
createdAt: '2026-09-17T11:15:00Z',
|
||||
documentUrl: 'https://storage.googleapis.com/pfm-evidence-vault/projects/401/activities/101/geotagged_photos.pdf',
|
||||
},
|
||||
{
|
||||
id: 'ev-103',
|
||||
projectId: p2,
|
||||
milestoneId: m2,
|
||||
activityId: a2,
|
||||
version: 1,
|
||||
type: EvidenceType.InspectionReport,
|
||||
fileName: 'Independent_Structural_Quality_Audit_Report.pdf',
|
||||
fileSize: '6.4 MB',
|
||||
status: ApprovalStatus.Approved,
|
||||
createdBy: u2,
|
||||
createdAt: '2026-09-15T09:40:00Z',
|
||||
documentUrl: 'https://storage.googleapis.com/pfm-evidence-vault/projects/402/milestones/802/audit_report.pdf',
|
||||
},
|
||||
{
|
||||
id: 'ev-104',
|
||||
projectId: p1,
|
||||
milestoneId: m2,
|
||||
activityId: a2,
|
||||
version: 1,
|
||||
type: EvidenceType.AttendanceRegister,
|
||||
fileName: 'Community_Skills_Training_Attendance_Register_Q2.xlsx',
|
||||
fileSize: '2.1 MB',
|
||||
status: ApprovalStatus.PendingReview,
|
||||
createdBy: u3,
|
||||
createdAt: '2026-09-19T08:20:00Z',
|
||||
documentUrl: 'https://storage.googleapis.com/pfm-evidence-vault/projects/401/activities/102/attendance.xlsx',
|
||||
},
|
||||
{
|
||||
id: 'ev-105',
|
||||
projectId: p2,
|
||||
milestoneId: m1,
|
||||
activityId: a1,
|
||||
version: 1,
|
||||
type: EvidenceType.FinancialInvoiceOrReceipt,
|
||||
fileName: 'Vendor_Procurement_Tax_Invoices_Batch_A.pdf',
|
||||
fileSize: '3.7 MB',
|
||||
status: ApprovalStatus.Rejected,
|
||||
createdBy: u2,
|
||||
createdAt: '2026-09-14T16:05:00Z',
|
||||
documentUrl: 'https://storage.googleapis.com/pfm-evidence-vault/projects/402/activities/101/invoices.pdf',
|
||||
},
|
||||
];
|
||||
}, [projects, milestones, activities, users]);
|
||||
|
||||
// Merge backend data with demo fallback, deduplicating by ID
|
||||
const allEvidence: Evidence[] = useMemo(() => {
|
||||
const map = new Map<string | number, Evidence>();
|
||||
defaultEvidenceItems.forEach((item) => map.set(item.id, item));
|
||||
rawEvidenceList.forEach((item) => map.set(item.id, item));
|
||||
return Array.from(map.values());
|
||||
}, [defaultEvidenceItems, rawEvidenceList]);
|
||||
// UI depends entirely on the API response - no mock or demo data
|
||||
const allEvidence: Evidence[] = rawEvidenceList;
|
||||
|
||||
// Review evidence mutation: Facilitates Approve & Reject decisions via PUT /v1/api/evidence
|
||||
const reviewMutation = useMutation({
|
||||
@@ -258,7 +193,7 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
|
||||
},
|
||||
onSuccess: (_, variables) => {
|
||||
// Update local query cache for instant feedback
|
||||
queryClient.setQueryData(['evidence'], (old: Evidence[] = []) => {
|
||||
queryClient.setQueryData(['evidence', selectedProjectId], (old: Evidence[] = []) => {
|
||||
const exists = old.some((e) => String(e.id) === String(variables.id));
|
||||
if (exists) {
|
||||
return old.map((e) =>
|
||||
@@ -416,9 +351,10 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
|
||||
toastError('Missing File', 'Please select a document or certificate to upload.');
|
||||
return;
|
||||
}
|
||||
const targetProjId = ingestProjectId || (selectedProjectId !== 'all' ? selectedProjectId : projects[0]?.id) || '';
|
||||
const formData = new FormData();
|
||||
formData.append('file', ingestFile);
|
||||
formData.append('projectId', String(ingestProjectId || projects[0]?.id || '401'));
|
||||
formData.append('projectId', String(targetProjId));
|
||||
if (ingestMilestoneId) formData.append('milestoneId', String(ingestMilestoneId));
|
||||
if (ingestActivityId) formData.append('activityId', String(ingestActivityId));
|
||||
formData.append('evidenceType', String(ingestType));
|
||||
@@ -427,7 +363,8 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
|
||||
};
|
||||
|
||||
const handleResetFilters = () => {
|
||||
setSelectedProjectId('all');
|
||||
const defaultProjId = projects[0]?.id || 'all';
|
||||
setSelectedProjectId(defaultProjId);
|
||||
setSelectedMilestoneId('all');
|
||||
setSelectedActivityId('all');
|
||||
setSelectedUserId('all');
|
||||
@@ -435,8 +372,12 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
|
||||
setSearchQuery('');
|
||||
};
|
||||
|
||||
const defaultProjectId = projects[0]?.id;
|
||||
const isDefaultProject =
|
||||
defaultProjectId !== undefined ? String(selectedProjectId) === String(defaultProjectId) : selectedProjectId === 'all';
|
||||
|
||||
const hasActiveFilters =
|
||||
selectedProjectId !== 'all' ||
|
||||
!isDefaultProject ||
|
||||
selectedMilestoneId !== 'all' ||
|
||||
selectedActivityId !== 'all' ||
|
||||
selectedUserId !== 'all' ||
|
||||
@@ -567,7 +508,10 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
|
||||
</label>
|
||||
<select
|
||||
value={selectedProjectId}
|
||||
onChange={(e) => setSelectedProjectId(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setSelectedProjectId(e.target.value);
|
||||
setUserHasSelectedProject(true);
|
||||
}}
|
||||
className="w-full text-xs bg-slate-900/90 border border-slate-700/80 rounded-xl px-2.5 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 [&>option]:bg-slate-900 [&>option]:text-white"
|
||||
>
|
||||
<option value="all">All Projects ({projects.length})</option>
|
||||
@@ -1069,7 +1013,7 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
|
||||
<div>
|
||||
<label className="block text-slate-300 font-semibold mb-1">Target Project *</label>
|
||||
<select
|
||||
value={ingestProjectId || projects[0]?.id || ''}
|
||||
value={ingestProjectId || (selectedProjectId !== 'all' ? selectedProjectId : projects[0]?.id) || ''}
|
||||
onChange={(e) => setIngestProjectId(e.target.value)}
|
||||
className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50"
|
||||
>
|
||||
|
||||
@@ -43,14 +43,9 @@ export const ProblemDetailsAlert: React.FC<ProblemDetailsAlertProps> = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Direct error message or error list from ProblemDetails */}
|
||||
{parsed.errorsList && parsed.errorsList.length > 0 ? (
|
||||
{/* Direct error message or comma-delimited error list from ProblemDetails */}
|
||||
{parsed.errorsList && parsed.errorsList.length > 1 ? (
|
||||
<div className="mt-2 space-y-1.5">
|
||||
{parsed.message && !parsed.errorsList.includes(parsed.message) && (
|
||||
<p className="text-xs text-rose-200/90 leading-relaxed whitespace-pre-line">
|
||||
{parsed.message}
|
||||
</p>
|
||||
)}
|
||||
<ul className="space-y-1 bg-black/30 rounded-lg p-2.5 border border-rose-900/40">
|
||||
{parsed.errorsList.map((err, idx) => (
|
||||
<li key={idx} className="text-xs text-rose-200/90 flex items-start gap-2">
|
||||
|
||||
@@ -155,12 +155,9 @@ const ToastCard: React.FC<{
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Display errors from ProblemDetails errors member */}
|
||||
{toast.errorsList && toast.errorsList.length > 0 ? (
|
||||
{/* Display errors from ProblemDetails comma-delimited detail or errors list */}
|
||||
{toast.errorsList && toast.errorsList.length > 1 ? (
|
||||
<div className="mt-1.5 space-y-1">
|
||||
{toast.message && !toast.errorsList.includes(toast.message) && (
|
||||
<p className="text-xs text-slate-300 leading-relaxed">{toast.message}</p>
|
||||
)}
|
||||
<ul className="space-y-1">
|
||||
{toast.errorsList.map((err, idx) => (
|
||||
<li key={idx} className="text-xs text-rose-200/90 flex items-start gap-1.5">
|
||||
|
||||
Reference in New Issue
Block a user