770 lines
32 KiB
TypeScript
770 lines
32 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 {
|
|
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 { ExportButton } from '../ui/ExportButton';
|
|
import { ExportColumn } from '../../utils/exportUtils';
|
|
import { useTableSort, SortableTh } from '../../utils/tableSort';
|
|
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: unknown) => {
|
|
toastError('Save Failed', err);
|
|
},
|
|
});
|
|
|
|
// 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) > 0 ? 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]);
|
|
|
|
// Sorting hook
|
|
const {
|
|
sortedData: sortedRules,
|
|
sortColumn: ruleSortCol,
|
|
sortDirection: ruleSortDir,
|
|
handleSort: handleRuleSort,
|
|
} = useTableSort<Rule>(filteredRules, null, null, {
|
|
name: (r: Rule) => r.name,
|
|
programmeId: (r: Rule) => programmeMap.get(String(r.programmeId))?.name || `Programme #${r.programmeId}`,
|
|
version: (r: Rule) => r.version || 1,
|
|
status: (r: Rule) => getActivityStatusBadge(r.status).label,
|
|
createdAt: (r: Rule) => r.createdAt,
|
|
});
|
|
|
|
// Export columns definition
|
|
const ruleExportColumns: ExportColumn<Rule>[] = useMemo(
|
|
() => [
|
|
{ header: 'Rule ID', key: 'id' },
|
|
{ header: 'Rule Name', key: 'name', format: (val) => val || 'Untitled Rule' },
|
|
{
|
|
header: 'Strategic Programme',
|
|
key: 'programmeId',
|
|
format: (val) => programmeMap.get(String(val))?.name || `Programme #${val}`,
|
|
},
|
|
{ header: 'Version', key: 'version', format: (val) => `v${val || 1}` },
|
|
{
|
|
header: 'Status',
|
|
key: 'status',
|
|
format: (val) => (Number(val) === ActivityStatus.Active ? 'Active' : 'Inactive'),
|
|
},
|
|
{ header: 'Rule Description', key: 'description', format: (val) => val || '—' },
|
|
{ header: 'Created Date', key: 'createdAt', format: (val) => (val ? formatDate(val) : '—') },
|
|
],
|
|
[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: Refresh, Export & Add */}
|
|
<div className="flex items-center gap-2 self-end lg:self-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
refetch();
|
|
success('Refreshed', 'Programme rules updated from API.');
|
|
}}
|
|
disabled={isFetching}
|
|
className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-slate-300 bg-[#0d121f] hover:bg-slate-800 border border-slate-700/80 rounded-xl transition cursor-pointer shadow-xs disabled:opacity-50"
|
|
title="Refresh Programme Rules from API"
|
|
>
|
|
<RefreshCw className={`w-3.5 h-3.5 text-blue-400 ${isFetching ? 'animate-spin' : ''}`} />
|
|
<span>Refresh</span>
|
|
</button>
|
|
|
|
<ExportButton
|
|
claim="governance"
|
|
title="Programme Rules Registry"
|
|
subtitle="Statutory, regulatory, and eligibility rules governing strategic funding programmes"
|
|
filename={`pfm-programme-rules-${new Date().toISOString().split('T')[0]}`}
|
|
columns={ruleExportColumns}
|
|
data={filteredRules}
|
|
/>
|
|
|
|
<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" />
|
|
<span>Add Rule</span>
|
|
</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">
|
|
<SortableTh column="name" currentColumn={ruleSortCol} direction={ruleSortDir} onSort={handleRuleSort} className="py-3 px-4">
|
|
Rule Title & Directives
|
|
</SortableTh>
|
|
<SortableTh column="programmeId" currentColumn={ruleSortCol} direction={ruleSortDir} onSort={handleRuleSort} className="py-3 px-4">
|
|
Associated Programme
|
|
</SortableTh>
|
|
<SortableTh column="version" currentColumn={ruleSortCol} direction={ruleSortDir} onSort={handleRuleSort} className="py-3 px-4">
|
|
Version
|
|
</SortableTh>
|
|
<SortableTh column="status" currentColumn={ruleSortCol} direction={ruleSortDir} onSort={handleRuleSort} className="py-3 px-4">
|
|
Status
|
|
</SortableTh>
|
|
<SortableTh column="createdAt" currentColumn={ruleSortCol} direction={ruleSortDir} onSort={handleRuleSort} className="py-3 px-4">
|
|
Audit Info
|
|
</SortableTh>
|
|
<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">
|
|
{sortedRules.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 justify-between mb-1">
|
|
<div className="flex items-center gap-1">
|
|
<label className="block text-xs font-semibold text-slate-300">Rule Version</label>
|
|
<HelpTooltip
|
|
title="Rule Version"
|
|
content="System-managed version number tracking revisions of this statutory rule (read-only)."
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<span className="text-[10px] font-mono uppercase tracking-wider text-slate-500 bg-slate-800/60 px-1.5 py-0.5 rounded border border-slate-700/50">
|
|
Read-Only
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
readOnly
|
|
tabIndex={-1}
|
|
{...ruleForm.register('version')}
|
|
className="w-full px-3 py-2 text-xs bg-slate-900/80 border border-slate-700/70 rounded-xl text-slate-400 font-mono cursor-not-allowed select-none focus:outline-none focus:ring-0 focus:border-slate-700/70"
|
|
/>
|
|
{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>
|
|
);
|
|
};
|