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 {
Instrument,
Instruction,
@@ -237,6 +238,20 @@ export const FundingInstrumentsSection: React.FC<FundingInstrumentsSectionProps>
});
}, [instruments, selectedProgrammeFilter, statusFilter, searchTerm, programmeMap]);
// Sorting hook
const {
sortedData: sortedInstruments,
sortColumn: instSortCol,
sortDirection: instSortDir,
handleSort: handleInstSort,
} = useTableSort<Instrument>(filteredInstruments, null, null, {
code: (inst: Instrument) => inst.code || `INST-${inst.id}`,
name: (inst: Instrument) => inst.name,
programmeId: (inst: Instrument) => programmeMap.get(String(inst.programmeId))?.name || `Programme #${inst.programmeId}`,
status: (inst: Instrument) => getActivityStatusBadge(inst.status).label,
createdAt: (inst: Instrument) => inst.createdAt,
});
// Export columns definition
const instrumentExportColumns: ExportColumn<Instrument>[] = useMemo(
() => [
@@ -400,16 +415,26 @@ export const FundingInstrumentsSection: React.FC<FundingInstrumentsSectionProps>
<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">Instrument 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>
<SortableTh column="code" currentColumn={instSortCol} direction={instSortDir} onSort={handleInstSort} className="py-3 px-4">
Code / Ref
</SortableTh>
<SortableTh column="name" currentColumn={instSortCol} direction={instSortDir} onSort={handleInstSort} className="py-3 px-4">
Instrument Title
</SortableTh>
<SortableTh column="programmeId" currentColumn={instSortCol} direction={instSortDir} onSort={handleInstSort} className="py-3 px-4">
Associated Programme
</SortableTh>
<SortableTh column="status" currentColumn={instSortCol} direction={instSortDir} onSort={handleInstSort} className="py-3 px-4">
Status
</SortableTh>
<SortableTh column="createdAt" currentColumn={instSortCol} direction={instSortDir} onSort={handleInstSort} className="py-3 px-4">
Created 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">
{filteredInstruments.map((inst) => {
{sortedInstruments.map((inst) => {
const statusBadge = getActivityStatusBadge(inst.status);
const parentProg = programmeMap.get(String(inst.programmeId));