Added, beneficiaries, site visits and change management
This commit is contained in:
@@ -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));
|
||||
|
||||
|
||||
Reference in New Issue
Block a user