Added, beneficiaries, site visits and change management
This commit is contained in:
@@ -30,6 +30,7 @@ import { formatCompactZAR, formatZAR, getIndustrySectorLabel } from '../lib/form
|
||||
import { ApprovalStatus } from '../types';
|
||||
import { RiskHeatmapMatrix } from '../components/ui/RiskHeatmapMatrix';
|
||||
import { HelpTooltip } from '../components/ui/HelpTooltip';
|
||||
import { useTableSort, SortableTh } from '../utils/tableSort';
|
||||
|
||||
export const ExecutiveDashboard: React.FC = () => {
|
||||
const queryClient = useQueryClient();
|
||||
@@ -328,6 +329,19 @@ export const ExecutiveDashboard: React.FC = () => {
|
||||
.slice(0, 5);
|
||||
}, [projects, filteredProjects, risks]);
|
||||
|
||||
const {
|
||||
sortedData: sortedAttentionProjects,
|
||||
sortColumn: projectSortCol,
|
||||
sortDirection: projectSortDir,
|
||||
handleSort: handleProjectSort,
|
||||
} = useTableSort<any>(attentionProjects, null, null, {
|
||||
name: (p: any) => p.name,
|
||||
programme: (p: any) => p.programme,
|
||||
status: (p: any) => p.status,
|
||||
risk: (p: any) => p.risk,
|
||||
financialVariance: (p: any) => p.financialVariance,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-7xl mx-auto">
|
||||
{/* Page Title & Filter Bar */}
|
||||
@@ -767,23 +781,33 @@ export const ExecutiveDashboard: React.FC = () => {
|
||||
<table className="w-full text-left text-xs border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
|
||||
<th className="py-3.5 px-5">Project</th>
|
||||
<th className="py-3.5 px-4">Programme</th>
|
||||
<th className="py-3.5 px-4">Status</th>
|
||||
<th className="py-3.5 px-4 text-center">Risk</th>
|
||||
<th className="py-3.5 px-4 text-right">Financial Variance</th>
|
||||
<th className="py-3.5 px-5 text-right">Action</th>
|
||||
<SortableTh column="name" currentColumn={projectSortCol} direction={projectSortDir} onSort={handleProjectSort} className="py-3.5 px-5">
|
||||
Project
|
||||
</SortableTh>
|
||||
<SortableTh column="programme" currentColumn={projectSortCol} direction={projectSortDir} onSort={handleProjectSort} className="py-3.5 px-4">
|
||||
Programme
|
||||
</SortableTh>
|
||||
<SortableTh column="status" currentColumn={projectSortCol} direction={projectSortDir} onSort={handleProjectSort} className="py-3.5 px-4">
|
||||
Status
|
||||
</SortableTh>
|
||||
<SortableTh column="risk" currentColumn={projectSortCol} direction={projectSortDir} onSort={handleProjectSort} align="center" className="py-3.5 px-4 text-center">
|
||||
Risk
|
||||
</SortableTh>
|
||||
<SortableTh column="financialVariance" currentColumn={projectSortCol} direction={projectSortDir} onSort={handleProjectSort} align="right" className="py-3.5 px-4 text-right">
|
||||
Financial Variance
|
||||
</SortableTh>
|
||||
<th className="py-3.5 px-5 text-right font-medium">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/60">
|
||||
{attentionProjects.length === 0 ? (
|
||||
{sortedAttentionProjects.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="py-8 text-center text-xs text-slate-500">
|
||||
No active projects currently flagged for executive attention. All projects are operating within target thresholds.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
attentionProjects.map((p) => (
|
||||
sortedAttentionProjects.map((p) => (
|
||||
<tr key={p.id} className="hover:bg-slate-800/40 transition-colors">
|
||||
<td className="py-3.5 px-5">
|
||||
<span className="font-semibold text-white block text-xs">{p.name}</span>
|
||||
|
||||
Reference in New Issue
Block a user