Added, beneficiaries, site visits and change management

This commit is contained in:
2026-09-27 11:40:28 +02:00
parent fb27cc8c92
commit 36e5d3d7c8
16 changed files with 3132 additions and 212 deletions
@@ -24,6 +24,7 @@ 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,
@@ -233,6 +234,20 @@ export const RulesSection: React.FC<RulesSectionProps> = ({
});
}, [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(
() => [
@@ -396,16 +411,26 @@ export const RulesSection: React.FC<RulesSectionProps> = ({
<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>
<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">
{filteredRules.map((r) => {
{sortedRules.map((r) => {
const statusBadge = getActivityStatusBadge(r.status);
const parentProg = programmeMap.get(String(r.programmeId));