1014 lines
47 KiB
TypeScript
1014 lines
47 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||
import { Link } from 'react-router-dom';
|
||
import {
|
||
TrendingUp,
|
||
AlertTriangle,
|
||
Users,
|
||
Layers,
|
||
Coins,
|
||
CheckCircle,
|
||
ArrowUpRight,
|
||
Filter,
|
||
RefreshCw,
|
||
Clock,
|
||
ShieldAlert,
|
||
RotateCcw,
|
||
LayoutDashboard,
|
||
ShieldCheck,
|
||
} from 'lucide-react';
|
||
import {
|
||
getDashboard,
|
||
getProjects,
|
||
getAllPortfolios,
|
||
getAllProgrammes,
|
||
getAwards,
|
||
getBudgets,
|
||
getDisbursements,
|
||
getAllRisks,
|
||
getAllIndicators,
|
||
getProjectComplianceItems,
|
||
} from '../services/api';
|
||
import { formatCompactZAR, formatZAR, getIndustrySectorLabel } from '../lib/formatters';
|
||
import { ApprovalStatus, ComplianceStatus } from '../types';
|
||
import { RiskHeatmapMatrix } from '../components/ui/RiskHeatmapMatrix';
|
||
import { HelpTooltip } from '../components/ui/HelpTooltip';
|
||
import { useTableSort, SortableTh } from '../utils/tableSort';
|
||
|
||
interface AttentionProject {
|
||
id: number | string;
|
||
name: string;
|
||
programme: string;
|
||
status: string;
|
||
risk: string;
|
||
complianceStatus: string;
|
||
isCompliant: boolean;
|
||
unmetCount: number;
|
||
budgetAtRisk: number;
|
||
financialVariance: string;
|
||
varianceType: string;
|
||
maxScore: number;
|
||
}
|
||
|
||
export const ExecutiveDashboard: React.FC = () => {
|
||
const queryClient = useQueryClient();
|
||
const [selectedProgramme, setSelectedProgramme] = useState('All');
|
||
const [selectedSector, setSelectedSector] = useState('All');
|
||
const [selectedPeriod, setSelectedPeriod] = useState('FY 2026/27');
|
||
|
||
const isFiltered = selectedProgramme !== 'All' || selectedSector !== 'All' || selectedPeriod !== 'FY 2026/27';
|
||
const activeFilterCount =
|
||
(selectedProgramme !== 'All' ? 1 : 0) +
|
||
(selectedSector !== 'All' ? 1 : 0) +
|
||
(selectedPeriod !== 'FY 2026/27' ? 1 : 0);
|
||
|
||
const resetFilters = () => {
|
||
setSelectedProgramme('All');
|
||
setSelectedSector('All');
|
||
setSelectedPeriod('FY 2026/27');
|
||
};
|
||
|
||
// Data queries
|
||
const { data: dashboard, isLoading: loadingDashboard, refetch: refetchDashboard, isFetching } = useQuery({
|
||
queryKey: ['dashboard'],
|
||
queryFn: getDashboard,
|
||
});
|
||
|
||
const { data: projects = [] } = useQuery({
|
||
queryKey: ['projects'],
|
||
queryFn: () => getProjects(),
|
||
});
|
||
|
||
const { data: portfolios = [] } = useQuery({
|
||
queryKey: ['portfolios'],
|
||
queryFn: () => getAllPortfolios(),
|
||
});
|
||
|
||
const { data: programmes = [] } = useQuery({
|
||
queryKey: ['programmes'],
|
||
queryFn: () => getAllProgrammes(),
|
||
});
|
||
|
||
const { data: awards = [] } = useQuery({
|
||
queryKey: ['awards'],
|
||
queryFn: () => getAwards(),
|
||
});
|
||
|
||
const { data: budgets = [] } = useQuery({
|
||
queryKey: ['budgets'],
|
||
queryFn: () => getBudgets(),
|
||
});
|
||
|
||
const { data: disbursements = [] } = useQuery({
|
||
queryKey: ['disbursements'],
|
||
queryFn: () => getDisbursements(),
|
||
});
|
||
|
||
const { data: risks = [] } = useQuery({
|
||
queryKey: ['risks'],
|
||
queryFn: () => getAllRisks(),
|
||
});
|
||
|
||
const { data: indicators = [] } = useQuery({
|
||
queryKey: ['indicators'],
|
||
queryFn: () => getAllIndicators(),
|
||
});
|
||
|
||
// Filtered projects according to active Programme and Sector dropdown selections
|
||
const filteredProjects = useMemo(() => {
|
||
return projects.filter((p) => {
|
||
if (selectedProgramme !== 'All' && String(p.programmeId) !== selectedProgramme) {
|
||
return false;
|
||
}
|
||
if (selectedSector !== 'All') {
|
||
const sectorLabel = getIndustrySectorLabel(p.sector);
|
||
if (sectorLabel !== selectedSector) return false;
|
||
}
|
||
return true;
|
||
});
|
||
}, [projects, selectedProgramme, selectedSector]);
|
||
|
||
const { data: projectComplianceMap = new Map<string | number, any[]>() } = useQuery({
|
||
queryKey: ['projectComplianceMap', filteredProjects.map((p) => p.id)],
|
||
queryFn: async () => {
|
||
const map = new Map<string | number, any[]>();
|
||
await Promise.all(
|
||
filteredProjects.map(async (p) => {
|
||
try {
|
||
const items = await getProjectComplianceItems(p.id);
|
||
map.set(p.id, items);
|
||
} catch {
|
||
map.set(p.id, []);
|
||
}
|
||
})
|
||
);
|
||
return map;
|
||
},
|
||
enabled: filteredProjects.length > 0,
|
||
});
|
||
|
||
const refetchAll = () => {
|
||
refetchDashboard();
|
||
queryClient.invalidateQueries();
|
||
};
|
||
|
||
// Filtered risks associated with the filtered project set
|
||
const filteredRisks = useMemo(() => {
|
||
if (selectedProgramme === 'All' && selectedSector === 'All') {
|
||
return risks;
|
||
}
|
||
const projectIds = new Set(filteredProjects.map((p) => String(p.id)));
|
||
return risks.filter((r) => projectIds.has(String(r.projectId)));
|
||
}, [risks, filteredProjects, selectedProgramme, selectedSector]);
|
||
|
||
// Headline portfolio metrics calculation
|
||
const portfolioValue = useMemo(() => {
|
||
if (selectedProgramme !== 'All' || selectedSector !== 'All') {
|
||
const projectIds = new Set(filteredProjects.map((p) => String(p.id)));
|
||
const filteredBudgets = budgets.filter((b) => projectIds.has(String(b.projectId)));
|
||
const budgetTotal = filteredBudgets.reduce((sum, b) => sum + (Number(b.amount) || 0), 0);
|
||
if (budgetTotal > 0) return budgetTotal;
|
||
const filteredAwards = awards.filter((a) => projectIds.has(String(a.projectId)));
|
||
const awardsTotal = filteredAwards.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);
|
||
return awardsTotal;
|
||
}
|
||
if (dashboard?.portfolioValue && dashboard.portfolioValue > 0) {
|
||
return dashboard.portfolioValue;
|
||
}
|
||
const budgetTotal = budgets.reduce((sum, b) => sum + (Number(b.amount) || 0), 0);
|
||
if (budgetTotal > 0) return budgetTotal;
|
||
const awardsTotal = awards.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);
|
||
return awardsTotal;
|
||
}, [dashboard, budgets, awards, filteredProjects, selectedProgramme, selectedSector]);
|
||
|
||
const activeAwards = useMemo(() => {
|
||
if (selectedProgramme !== 'All' || selectedSector !== 'All') {
|
||
const projectIds = new Set(filteredProjects.map((p) => String(p.id)));
|
||
const matched = awards.filter((a) => projectIds.has(String(a.projectId)));
|
||
return matched.length || filteredProjects.length;
|
||
}
|
||
if (awards.length > 0) return awards.length;
|
||
return dashboard?.activeAwards ?? projects.length;
|
||
}, [dashboard, awards, filteredProjects, projects, selectedProgramme, selectedSector]);
|
||
|
||
const disbursed = useMemo(() => {
|
||
const relevantDisbursements = disbursements.filter((d) => {
|
||
if (selectedProgramme !== 'All' || selectedSector !== 'All') {
|
||
const projectIds = new Set(filteredProjects.map((p) => String(p.id)));
|
||
return projectIds.has(String(d.projectId));
|
||
}
|
||
return true;
|
||
});
|
||
|
||
const approvedTotal = relevantDisbursements
|
||
.filter((d) => d.status === ApprovalStatus.Approved || (d.status as number) === 3)
|
||
.reduce((sum, d) => sum + (Number(d.amount) || 0), 0);
|
||
|
||
if (approvedTotal > 0) return approvedTotal;
|
||
|
||
const allTotal = relevantDisbursements.reduce((sum, d) => sum + (Number(d.amount) || 0), 0);
|
||
if (allTotal > 0 && (!dashboard?.disbursed || dashboard.disbursed === 0)) {
|
||
return allTotal;
|
||
}
|
||
|
||
return dashboard?.disbursed || 0;
|
||
}, [dashboard, disbursements, filteredProjects, selectedProgramme, selectedSector]);
|
||
|
||
const onTrackPercentage = useMemo(() => {
|
||
const targetProjects = filteredProjects.length > 0 ? filteredProjects : projects;
|
||
if (targetProjects.length === 0) return 0;
|
||
|
||
const onTrack = targetProjects.filter(
|
||
(p) => p.status === ApprovalStatus.Approved || (p.status as number) === 3 || (p.status as unknown as string) === 'Active'
|
||
).length;
|
||
|
||
if (onTrack === 0 && dashboard?.onTrackPercentage && dashboard.onTrackPercentage > 0) {
|
||
return dashboard.onTrackPercentage;
|
||
}
|
||
return Math.round((onTrack / targetProjects.length) * 100);
|
||
}, [dashboard, filteredProjects, projects]);
|
||
|
||
// Calculate at-risk projects count based on risk scores
|
||
const atRiskCount = useMemo(() => {
|
||
const targetRisks = filteredRisks;
|
||
const highRisks = targetRisks.filter((r) => {
|
||
const score = (Number(r.likelihood) || 1) * (Number(r.impact) || 1);
|
||
return score >= 12 || ((Number(r.impact) || 1) >= 4 && (Number(r.likelihood) || 1) >= 3);
|
||
});
|
||
|
||
if (targetRisks.length > 0) {
|
||
return highRisks.length;
|
||
}
|
||
return dashboard?.atRiskCount ?? 0;
|
||
}, [dashboard, filteredRisks]);
|
||
|
||
// Compliance and Capital at Risk calculations
|
||
const totalBudgetAtRisk = useMemo(() => {
|
||
const targetProjects = filteredProjects.length > 0 ? filteredProjects : projects;
|
||
return targetProjects.reduce((sum, p) => {
|
||
const pComps = projectComplianceMap.get(p.id) || [];
|
||
const hasUnmet = pComps.some((c) => Number(c.status) === ComplianceStatus.NotMet || Number(c.status) === 1);
|
||
const isPendingOrRejected = p.status === ApprovalStatus.Rejected || p.status === ApprovalStatus.Pending;
|
||
if (hasUnmet || isPendingOrRejected) {
|
||
const pBudgets = budgets.filter((b) => String(b.projectId) === String(p.id));
|
||
const pApproved = pBudgets
|
||
.filter((b) => Number(b.status) === ApprovalStatus.Approved || b.status === undefined)
|
||
.reduce((bSum, b) => bSum + (Number(b.amount) || 0), 0);
|
||
return sum + pApproved;
|
||
}
|
||
return sum;
|
||
}, 0);
|
||
}, [filteredProjects, projects, projectComplianceMap, budgets]);
|
||
|
||
const complianceRate = useMemo(() => {
|
||
const targetProjects = filteredProjects.length > 0 ? filteredProjects : projects;
|
||
if (targetProjects.length === 0) return 100;
|
||
const compliantCount = targetProjects.filter((p) => {
|
||
const pComps = projectComplianceMap.get(p.id) || [];
|
||
return !pComps.some((c) => Number(c.status) === ComplianceStatus.NotMet || Number(c.status) === 1);
|
||
}).length;
|
||
return Math.round((compliantCount / targetProjects.length) * 100);
|
||
}, [filteredProjects, projects, projectComplianceMap]);
|
||
|
||
const beneficiariesReached = useMemo(() => {
|
||
if (dashboard?.beneficiariesReached && dashboard.beneficiariesReached > 0) {
|
||
return dashboard.beneficiariesReached;
|
||
}
|
||
const sumActual = indicators.reduce((sum, ind) => sum + (Number(ind.actualAmount) || 0), 0);
|
||
return sumActual > 0 ? sumActual : 0;
|
||
}, [dashboard, indicators]);
|
||
|
||
// Sector allocation breakdown
|
||
const sectorData = useMemo(() => {
|
||
const targetProjects = filteredProjects.length > 0 ? filteredProjects : projects;
|
||
if (targetProjects.length === 0) return [];
|
||
const counts: Record<string, number> = {};
|
||
targetProjects.forEach((p) => {
|
||
const label = getIndustrySectorLabel(p.sector);
|
||
counts[label] = (counts[label] || 0) + 1;
|
||
});
|
||
|
||
const colors = ['bg-emerald-500', 'bg-teal-500', 'bg-blue-500', 'bg-indigo-500', 'bg-purple-500', 'bg-amber-500'];
|
||
const totalProjects = targetProjects.length;
|
||
|
||
return Object.entries(counts).map(([name, count], index) => {
|
||
const percentage = Math.round((count / totalProjects) * 100);
|
||
const amount = portfolioValue > 0 ? Math.round((portfolioValue / totalProjects) * count) : 0;
|
||
return {
|
||
name,
|
||
count,
|
||
percentage,
|
||
amount,
|
||
color: colors[index % colors.length],
|
||
};
|
||
});
|
||
}, [projects, filteredProjects, portfolioValue]);
|
||
|
||
// Quarterly disbursements distribution
|
||
const quarterlyTrend = useMemo(() => {
|
||
if (!disbursements || disbursements.length === 0) {
|
||
return [
|
||
{ quarter: 'Q1', amount: 0, heightPct: 15 },
|
||
{ quarter: 'Q2', amount: 0, heightPct: 15 },
|
||
{ quarter: 'Q3', amount: 0, heightPct: 15 },
|
||
{ quarter: 'Q4', amount: 0, heightPct: 15 },
|
||
];
|
||
}
|
||
|
||
const qTotals: Record<string, number> = { Q1: 0, Q2: 0, Q3: 0, Q4: 0 };
|
||
disbursements.forEach((d) => {
|
||
const dateStr = d.createdAt || d.updatedAt;
|
||
if (dateStr) {
|
||
const month = new Date(dateStr).getMonth(); // 0-11
|
||
if (month <= 2) qTotals.Q1 += d.amount || 0;
|
||
else if (month <= 5) qTotals.Q2 += d.amount || 0;
|
||
else if (month <= 8) qTotals.Q3 += d.amount || 0;
|
||
else qTotals.Q4 += d.amount || 0;
|
||
} else {
|
||
qTotals.Q1 += (d.amount || 0) * 0.25;
|
||
qTotals.Q2 += (d.amount || 0) * 0.25;
|
||
qTotals.Q3 += (d.amount || 0) * 0.25;
|
||
qTotals.Q4 += (d.amount || 0) * 0.25;
|
||
}
|
||
});
|
||
|
||
const maxQ = Math.max(...Object.values(qTotals), 1);
|
||
return Object.entries(qTotals).map(([quarter, amount]) => ({
|
||
quarter,
|
||
amount,
|
||
heightPct: Math.max(15, Math.min(100, Math.round((amount / maxQ) * 100))),
|
||
}));
|
||
}, [disbursements]);
|
||
|
||
// Projects requiring management attention based on risk profile
|
||
const attentionProjects = useMemo(() => {
|
||
const targetProjects = filteredProjects.length > 0 ? filteredProjects : projects;
|
||
if (targetProjects.length === 0) return [];
|
||
|
||
// Map each project to its highest residual risk score
|
||
const projectMaxRisk: Record<string, number> = {};
|
||
risks.forEach((r) => {
|
||
const pid = String(r.projectId);
|
||
const score = (Number(r.likelihood) || 1) * (Number(r.impact) || 1);
|
||
if (!projectMaxRisk[pid] || score > projectMaxRisk[pid]) {
|
||
projectMaxRisk[pid] = score;
|
||
}
|
||
});
|
||
|
||
return targetProjects
|
||
.map((p) => {
|
||
const maxScore = projectMaxRisk[String(p.id)] || 0;
|
||
const isRejected = p.status === ApprovalStatus.Rejected;
|
||
const isPending = p.status === ApprovalStatus.Pending || p.status === ApprovalStatus.Review;
|
||
|
||
let riskLevel: 'RED' | 'AMBER' | 'GREEN' = 'GREEN';
|
||
let statusLabel = 'Active';
|
||
let variance = '0%';
|
||
let varianceType: 'negative' | 'positive' = 'positive';
|
||
|
||
if (isRejected || maxScore >= 15) {
|
||
riskLevel = 'RED';
|
||
statusLabel = 'At Risk';
|
||
variance = '-15%';
|
||
varianceType = 'negative';
|
||
} else if (isPending || maxScore >= 10) {
|
||
riskLevel = 'AMBER';
|
||
statusLabel = isPending ? 'Pending' : 'Review';
|
||
variance = '-5%';
|
||
varianceType = 'negative';
|
||
}
|
||
|
||
const pComps = projectComplianceMap.get(p.id) || [];
|
||
const unmetCount = pComps.filter(
|
||
(c) => Number(c.status) === ComplianceStatus.NotMet || Number(c.status) === 1
|
||
).length;
|
||
const isCompliant = unmetCount === 0;
|
||
|
||
const pBudgets = budgets.filter((b) => String(b.projectId) === String(p.id));
|
||
const pApprovedBudget = pBudgets
|
||
.filter((b) => Number(b.status) === ApprovalStatus.Approved || b.status === undefined)
|
||
.reduce((sum, b) => sum + (Number(b.amount) || 0), 0);
|
||
|
||
const projectBudgetAtRisk = !isCompliant || riskLevel === 'RED' || riskLevel === 'AMBER' ? pApprovedBudget : 0;
|
||
|
||
return {
|
||
id: p.id,
|
||
name: p.name,
|
||
programme: p.programmeName || `Programme ${p.programmeId}`,
|
||
status: statusLabel,
|
||
risk: riskLevel,
|
||
complianceStatus: isCompliant ? 'Compliant' : `Noncompliant (${unmetCount} Unmet)`,
|
||
isCompliant,
|
||
unmetCount,
|
||
budgetAtRisk: projectBudgetAtRisk,
|
||
financialVariance: variance,
|
||
varianceType,
|
||
maxScore,
|
||
};
|
||
})
|
||
.filter((p) => p.risk === 'RED' || p.risk === 'AMBER' || !p.isCompliant)
|
||
.sort((a, b) => b.budgetAtRisk - a.budgetAtRisk || b.maxScore - a.maxScore)
|
||
.slice(0, 8);
|
||
}, [projects, filteredProjects, risks, projectComplianceMap, budgets]);
|
||
|
||
const {
|
||
sortedData: sortedAttentionProjects,
|
||
sortColumn: projectSortCol,
|
||
sortDirection: projectSortDir,
|
||
handleSort: handleProjectSort,
|
||
} = useTableSort<AttentionProject>(attentionProjects, null, null, {
|
||
name: (p) => p.name,
|
||
programme: (p) => p.programme,
|
||
status: (p) => p.status,
|
||
risk: (p) => p.risk,
|
||
financialVariance: (p) => p.financialVariance,
|
||
});
|
||
|
||
return (
|
||
<div className="space-y-6 max-w-7xl mx-auto">
|
||
{/* Header Banner */}
|
||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-gradient-to-r from-[#0d1322] via-[#0f172a] to-[#0d1322] p-6 sm:p-8 rounded-3xl border border-slate-800/80 shadow-2xl relative overflow-hidden">
|
||
<div className="absolute -right-10 -bottom-10 w-60 h-60 bg-blue-600/10 rounded-full blur-3xl pointer-events-none" />
|
||
<div className="space-y-2 relative z-10">
|
||
<div className="flex items-center gap-3">
|
||
<div className="h-12 w-12 rounded-2xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center text-blue-400 shadow-lg shadow-blue-500/10">
|
||
<LayoutDashboard className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center gap-2.5 flex-wrap">
|
||
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white flex items-center gap-2.5">
|
||
Executive Portfolio Dashboard
|
||
</h1>
|
||
<HelpTooltip
|
||
title="Executive Dashboard Overview"
|
||
content="Macro-level command center showing aggregated national portfolio commitments, actual tranche disbursements, delivery pace, and critical project escalations."
|
||
size="sm"
|
||
placement="bottom"
|
||
/>
|
||
<span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-blue-400 bg-blue-500/10 px-2.5 py-0.5 rounded-full border border-blue-500/30">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
|
||
Live Portfolio Feed
|
||
</span>
|
||
</div>
|
||
<p className="text-xs sm:text-sm text-slate-400 mt-1">
|
||
Real-time portfolio overview, disbursement tracking, risk heatmap, and projects requiring governance action.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2.5 shrink-0 relative z-10 self-start md:self-center">
|
||
{isFiltered && (
|
||
<button
|
||
type="button"
|
||
onClick={resetFilters}
|
||
className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-amber-300 bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/30 rounded-xl transition cursor-pointer shadow-xs"
|
||
title="Reset all filters to default"
|
||
>
|
||
<RotateCcw className="w-3.5 h-3.5" />
|
||
<span>Reset Filters</span>
|
||
</button>
|
||
)}
|
||
|
||
<button
|
||
type="button"
|
||
onClick={refetchAll}
|
||
disabled={isFetching}
|
||
className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-slate-200 hover:text-white bg-slate-900/90 hover:bg-slate-800 border border-slate-700/80 rounded-xl transition cursor-pointer shadow-xs disabled:opacity-50"
|
||
title="Refresh dashboard metrics"
|
||
>
|
||
<RefreshCw className={`w-3.5 h-3.5 ${isFetching ? 'animate-spin text-blue-400' : 'text-slate-400'}`} />
|
||
<span>{isFetching ? 'Refreshing...' : 'Refresh'}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Filter Toolbar */}
|
||
<div className="bg-[#0f1523]/80 backdrop-blur-md p-4 rounded-2xl border border-slate-800/80 shadow-xl flex flex-wrap items-center gap-3">
|
||
<div className="flex items-center gap-2 text-xs font-semibold text-slate-300 pr-1">
|
||
<Filter className="w-3.5 h-3.5 text-blue-400" />
|
||
<span>Filters:</span>
|
||
{activeFilterCount > 0 && (
|
||
<span className="text-[10px] font-bold text-blue-300 bg-blue-500/20 border border-blue-500/40 px-2 py-0.5 rounded-full">
|
||
{activeFilterCount} Active
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Programme Filter */}
|
||
<div className="flex items-center bg-[#090d16] border border-slate-700/80 hover:border-slate-600 rounded-xl px-3 py-1.5 text-xs transition shadow-inner">
|
||
<span className="text-[11px] font-semibold text-slate-400 uppercase tracking-wider mr-2 shrink-0">
|
||
Programme
|
||
</span>
|
||
<select
|
||
value={selectedProgramme}
|
||
onChange={(e) => setSelectedProgramme(e.target.value)}
|
||
className="bg-transparent text-xs font-medium text-slate-100 focus:outline-none cursor-pointer pr-1 [&>option]:bg-slate-900 [&>option]:text-white max-w-[200px] truncate"
|
||
>
|
||
<option value="All">All</option>
|
||
{programmes.map((pr) => (
|
||
<option key={pr.id} value={pr.id}>
|
||
{pr.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<HelpTooltip
|
||
title="Programme Filter"
|
||
content="Isolates metrics and projects funded under a specific thematic programme mandate."
|
||
size="sm"
|
||
placement="bottom"
|
||
/>
|
||
</div>
|
||
|
||
{/* Sector Filter */}
|
||
<div className="flex items-center bg-[#090d16] border border-slate-700/80 hover:border-slate-600 rounded-xl px-3 py-1.5 text-xs transition shadow-inner">
|
||
<span className="text-[11px] font-semibold text-slate-400 uppercase tracking-wider mr-2 shrink-0">
|
||
Sector
|
||
</span>
|
||
<select
|
||
value={selectedSector}
|
||
onChange={(e) => setSelectedSector(e.target.value)}
|
||
className="bg-transparent text-xs font-medium text-slate-100 focus:outline-none cursor-pointer pr-1 [&>option]:bg-slate-900 [&>option]:text-white max-w-[170px] truncate"
|
||
>
|
||
<option value="All">All</option>
|
||
{sectorData.map((s) => (
|
||
<option key={s.name} value={s.name}>
|
||
{s.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<HelpTooltip
|
||
title="Industry Sector Filter"
|
||
content="Filters analytics by designated economic industry sector (e.g. AgriTech, HealthTech, Renewable Energy)."
|
||
size="sm"
|
||
placement="bottom"
|
||
/>
|
||
</div>
|
||
|
||
{/* Financial Period Filter */}
|
||
<div className="flex items-center bg-[#090d16] border border-slate-700/80 hover:border-slate-600 rounded-xl px-3 py-1.5 text-xs transition shadow-inner">
|
||
<span className="text-[11px] font-semibold text-slate-400 uppercase tracking-wider mr-2 shrink-0">
|
||
Period
|
||
</span>
|
||
<select
|
||
value={selectedPeriod}
|
||
onChange={(e) => setSelectedPeriod(e.target.value)}
|
||
className="bg-transparent text-xs font-medium text-slate-100 focus:outline-none cursor-pointer pr-1 [&>option]:bg-slate-900 [&>option]:text-white"
|
||
>
|
||
<option value="FY 2026/27">FY 2026/27</option>
|
||
<option value="FY 2025/26">FY 2025/26</option>
|
||
<option value="All-Time">All-Time Cumulative</option>
|
||
</select>
|
||
<HelpTooltip
|
||
title="Financial Period Filter"
|
||
content="Calculates disbursements and milestones according to the government fiscal year or cumulative life-of-programme."
|
||
size="sm"
|
||
placement="bottom"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 8 Headline Portfolio KPI Cards with Compliance & Budget At Risk */}
|
||
<div className="grid grid-cols-2 sm:grid-cols-4 xl:grid-cols-8 gap-3.5">
|
||
{/* Card 1: Portfolio Value */}
|
||
<div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 hover:border-blue-500/30 transition-all flex flex-col justify-between shadow-md group backdrop-blur-sm">
|
||
<div className="flex items-center justify-between text-slate-400">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Portfolio Value</span>
|
||
<HelpTooltip
|
||
title="Total Portfolio Value"
|
||
content="Aggregated statutory grant commitment amount approved across all active grant awards and contracts."
|
||
size="sm"
|
||
placement="top"
|
||
/>
|
||
</div>
|
||
<div className="p-1.5 rounded-lg bg-blue-500/10 text-blue-400 border border-blue-500/20 group-hover:scale-110 transition">
|
||
<Coins className="w-3.5 h-3.5" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<p className="text-2xl font-bold text-white tracking-tight">{formatCompactZAR(portfolioValue)}</p>
|
||
<p className="text-[10px] text-slate-400 font-mono mt-1">{formatZAR(portfolioValue)}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Card 2: Active Awards */}
|
||
<div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 hover:border-blue-500/30 transition-all flex flex-col justify-between shadow-md group backdrop-blur-sm">
|
||
<div className="flex items-center justify-between text-slate-400">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Active Awards</span>
|
||
<HelpTooltip
|
||
title="Active Grant Awards"
|
||
content="Total legally executed statutory agreements currently undergoing active disbursement and implementation."
|
||
size="sm"
|
||
placement="top"
|
||
/>
|
||
</div>
|
||
<div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 group-hover:scale-110 transition">
|
||
<Layers className="w-3.5 h-3.5" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<p className="text-2xl font-bold text-white tracking-tight">{activeAwards}</p>
|
||
<p className="text-[10px] text-emerald-400 font-mono mt-1">
|
||
Across {portfolios.length} portfolio{portfolios.length === 1 ? '' : 's'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Card 3: Disbursed */}
|
||
<div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 hover:border-teal-500/30 transition-all flex flex-col justify-between shadow-md group backdrop-blur-sm">
|
||
<div className="flex items-center justify-between text-slate-400">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Disbursed</span>
|
||
<HelpTooltip
|
||
title="Disbursed Funds"
|
||
content="Actual funds paid out to implementing grantees following verified milestone proof-of-performance."
|
||
size="sm"
|
||
placement="top"
|
||
/>
|
||
</div>
|
||
<div className="p-1.5 rounded-lg bg-teal-500/10 text-teal-400 border border-teal-500/20 group-hover:scale-110 transition">
|
||
<TrendingUp className="w-3.5 h-3.5" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<p className="text-2xl font-bold text-teal-400 tracking-tight">{formatCompactZAR(disbursed)}</p>
|
||
<p className="text-[10px] text-slate-400 font-mono mt-1">
|
||
{portfolioValue > 0 ? `${((disbursed / portfolioValue) * 100).toFixed(1)}% of commitments` : '0.0% of commitments'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Card 4: On Track */}
|
||
<div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 hover:border-emerald-500/30 transition-all flex flex-col justify-between shadow-md group backdrop-blur-sm">
|
||
<div className="flex items-center justify-between text-slate-400">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">On Track</span>
|
||
<HelpTooltip
|
||
title="On-Track Progress Ratio"
|
||
content="Percentage of active projects meeting schedule deadlines and deliverable acceptance criteria without critical deviations."
|
||
size="sm"
|
||
placement="top"
|
||
/>
|
||
</div>
|
||
<div className="p-1.5 rounded-lg bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 group-hover:scale-110 transition">
|
||
<CheckCircle className="w-3.5 h-3.5" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<p className="text-2xl font-bold text-emerald-400 tracking-tight">{onTrackPercentage}%</p>
|
||
<p className="text-[10px] text-slate-400 font-mono mt-1">Milestones verified</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Card 5: At Risk */}
|
||
<div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 hover:border-amber-500/30 transition-all flex flex-col justify-between shadow-md group backdrop-blur-sm">
|
||
<div className="flex items-center justify-between text-slate-400">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">At Risk</span>
|
||
<HelpTooltip
|
||
title="At-Risk Projects"
|
||
content="Count of projects with high residual risk scores (≥12), schedule slippage >30 days, or adverse financial variance."
|
||
size="sm"
|
||
placement="top"
|
||
/>
|
||
</div>
|
||
<div className="p-1.5 rounded-lg bg-amber-500/10 text-amber-400 border border-amber-500/20 group-hover:scale-110 transition">
|
||
<AlertTriangle className="w-3.5 h-3.5" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<p className="text-2xl font-bold text-amber-400 tracking-tight">{atRiskCount}</p>
|
||
<p className="text-[10px] text-rose-400 font-mono mt-1">Requires PM action</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Card 6: Beneficiaries Reached */}
|
||
<div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 hover:border-indigo-500/30 transition-all flex flex-col justify-between shadow-md group backdrop-blur-sm">
|
||
<div className="flex items-center justify-between text-slate-400">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Beneficiaries</span>
|
||
<HelpTooltip
|
||
title="Beneficiaries Impacted"
|
||
content="Cumulative count of direct beneficiaries reached through projects, verified against national M&E indicator targets."
|
||
size="sm"
|
||
placement="top"
|
||
/>
|
||
</div>
|
||
<div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 group-hover:scale-110 transition">
|
||
<Users className="w-3.5 h-3.5" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<p className="text-2xl font-bold text-white tracking-tight">
|
||
{beneficiariesReached >= 1000 ? `${(beneficiariesReached / 1000).toFixed(0)}k` : beneficiariesReached}
|
||
</p>
|
||
<p className="text-[10px] text-slate-400 font-mono mt-1">Directly impacted</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Card 7: Budget At Risk */}
|
||
<div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 hover:border-rose-500/40 transition-all flex flex-col justify-between shadow-md group backdrop-blur-sm">
|
||
<div className="flex items-center justify-between text-slate-400">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Budget At Risk</span>
|
||
<HelpTooltip
|
||
title="Total Budgeted Capital At Risk"
|
||
content="Aggregated approved budget across all projects currently flagged as noncompliant or carrying unmitigated high risks."
|
||
size="sm"
|
||
placement="top"
|
||
/>
|
||
</div>
|
||
<div className="p-1.5 rounded-lg bg-rose-500/10 text-rose-400 border border-rose-500/20 group-hover:scale-110 transition">
|
||
<AlertTriangle className="w-3.5 h-3.5" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<p className="text-2xl font-bold text-rose-400 tracking-tight">{formatCompactZAR(totalBudgetAtRisk)}</p>
|
||
<p className="text-[10px] text-slate-400 font-mono mt-1">{formatZAR(totalBudgetAtRisk)}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Card 8: Compliance Health */}
|
||
<div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 hover:border-emerald-500/40 transition-all flex flex-col justify-between shadow-md group backdrop-blur-sm">
|
||
<div className="flex items-center justify-between text-slate-400">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Compliance</span>
|
||
<HelpTooltip
|
||
title="Portfolio Compliance Health"
|
||
content="Percentage of active projects meeting 100% statutory compliance and beneficiary outcome criteria."
|
||
size="sm"
|
||
placement="top"
|
||
/>
|
||
</div>
|
||
<div className="p-1.5 rounded-lg bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 group-hover:scale-110 transition">
|
||
<ShieldCheck className="w-3.5 h-3.5" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<p className="text-2xl font-bold text-emerald-400 tracking-tight">{complianceRate}%</p>
|
||
<p className="text-[10px] text-slate-400 font-mono mt-1">100% statutory gate</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Visual Models Section (Sector Breakdown & Disbursements) */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
{/* Panel 1: Funding by Sector */}
|
||
<div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 flex flex-col justify-between shadow-lg backdrop-blur-sm">
|
||
<div>
|
||
<div className="flex items-center justify-between border-b border-slate-800/80 pb-3">
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="text-sm font-semibold text-white">Funding by Sector</h3>
|
||
<HelpTooltip
|
||
title="Sector Funding Distribution"
|
||
content="Breakdown of active grant commitments distributed across designated industrial and socio-economic sectors."
|
||
size="sm"
|
||
placement="bottom"
|
||
/>
|
||
</div>
|
||
<span className="text-[11px] font-mono text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded-md border border-blue-500/30">
|
||
Live Portfolio
|
||
</span>
|
||
</div>
|
||
|
||
{/* Sector Donut Chart */}
|
||
<div className="py-6 flex items-center justify-center">
|
||
<div className="relative w-36 h-36 rounded-full border-8 border-slate-800 flex items-center justify-center">
|
||
<div className="w-24 h-24 rounded-full border-4 border-blue-500 flex flex-col items-center justify-center bg-[#090d16] shadow-inner">
|
||
<span className="text-xl font-bold text-white">{sectorData.length}</span>
|
||
<span className="text-[9px] uppercase tracking-wider text-slate-400">
|
||
{sectorData.length === 1 ? 'Sector' : 'Sectors'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sector Progress Bars */}
|
||
<div className="space-y-2.5">
|
||
{sectorData.length === 0 ? (
|
||
<p className="text-xs text-center text-slate-500 py-3">No active project sectors assigned yet.</p>
|
||
) : (
|
||
sectorData.map((s) => (
|
||
<div key={s.name} className="space-y-1">
|
||
<div className="flex justify-between text-xs">
|
||
<span className="text-slate-300 font-medium truncate">{s.name} ({s.count})</span>
|
||
<span className="font-semibold text-white">{s.percentage}%</span>
|
||
</div>
|
||
<div className="w-full h-1.5 bg-slate-800 rounded-full overflow-hidden">
|
||
<div className={`h-full ${s.color} rounded-full`} style={{ width: `${s.percentage}%` }}></div>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-4 border-t border-slate-800/80 mt-4 text-[11px] text-slate-400 flex justify-between">
|
||
<span>Primary Focus: {sectorData[0]?.name || 'All Sectors'}</span>
|
||
<Link to="/governance?tab=portfolios" className="text-blue-400 font-medium hover:underline flex items-center gap-1">
|
||
View Portfolios <ArrowUpRight className="w-3 h-3" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Panel 2: Disbursement Distribution */}
|
||
<div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 flex flex-col justify-between shadow-lg backdrop-blur-sm">
|
||
<div>
|
||
<div className="flex items-center justify-between border-b border-slate-800/80 pb-3">
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="text-sm font-semibold text-white">Disbursement Distribution</h3>
|
||
<HelpTooltip
|
||
title="Disbursement Timeline & Cadence"
|
||
content="Compares statutory multi-year grant tranche commitments against verified payouts released across calendar quarters."
|
||
size="sm"
|
||
placement="bottom"
|
||
/>
|
||
</div>
|
||
<span className="text-[11px] font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-md border border-emerald-500/30 font-semibold">
|
||
{disbursements.length} Tranche{disbursements.length === 1 ? '' : 's'}
|
||
</span>
|
||
</div>
|
||
|
||
<p className="text-[11px] text-slate-400 my-2">
|
||
Quarterly release distribution across active portfolios and milestone verifications.
|
||
</p>
|
||
|
||
{/* Quarterly Disbursement Trend Chart */}
|
||
<div className="h-44 flex items-end gap-3 pt-6 pb-2 px-2 border-b border-slate-800/80">
|
||
{quarterlyTrend.map((q) => (
|
||
<div key={q.quarter} className="flex-1 flex flex-col items-center gap-1.5 h-full justify-end">
|
||
<span className="text-[10px] font-mono text-slate-400">{q.quarter}</span>
|
||
<div
|
||
className="w-full bg-slate-800 rounded-t-md"
|
||
style={{ height: `${Math.max(10, q.heightPct * 0.7)}%` }}
|
||
title={`Commitment: ${formatCompactZAR(q.amount)}`}
|
||
></div>
|
||
<div
|
||
className="w-full bg-gradient-to-t from-blue-600 to-indigo-500 rounded-t-md shadow-xs shadow-blue-500/20"
|
||
style={{ height: `${q.heightPct}%` }}
|
||
title={`Disbursed: ${formatCompactZAR(q.amount)}`}
|
||
></div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between text-[11px] text-slate-400 pt-3">
|
||
<div className="flex items-center gap-2">
|
||
<span className="h-2 w-3 bg-slate-800 rounded-xs"></span>
|
||
<span>Commitment Allocation</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="h-2 w-3 bg-blue-500 rounded-xs"></span>
|
||
<span>Actual Disbursed</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-4 border-t border-slate-800/80 text-[11px] text-slate-400 flex justify-between items-center">
|
||
<span>Total Disbursed: {formatCompactZAR(disbursed)}</span>
|
||
<Link to="/grants" className="text-blue-400 font-medium hover:underline flex items-center gap-1">
|
||
Financials <ArrowUpRight className="w-3 h-3" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Panel 3: Portfolio Risk Heatmap & Matrix */}
|
||
<RiskHeatmapMatrix
|
||
risks={filteredRisks}
|
||
projects={projects}
|
||
title="Portfolio Risk Heatmap & Matrix"
|
||
subtitle="Aggregated ISO 31000 distribution of project risks by Likelihood (1–5) and Impact (1–5)"
|
||
/>
|
||
|
||
{/* Projects Requiring Attention Table */}
|
||
<div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 overflow-hidden shadow-lg backdrop-blur-sm">
|
||
<div className="p-5 border-b border-slate-800/80 flex flex-col sm:flex-row sm:items-center justify-between gap-2 bg-[#0d121f]/90">
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="text-base font-semibold text-white">Projects Flagged At Risk & Noncompliant</h3>
|
||
<HelpTooltip
|
||
title="Exception Escalations"
|
||
content="Identifies projects breaching risk thresholds, schedule deadlines, or financial variances (>10%) requiring executive steering committee action."
|
||
size="sm"
|
||
placement="bottom"
|
||
/>
|
||
</div>
|
||
<p className="text-xs text-slate-400 mt-0.5">
|
||
Prioritized by risk severity, delivery delay, or financial variance threshold breach.
|
||
</p>
|
||
</div>
|
||
<Link
|
||
to="/projects"
|
||
className="text-xs font-semibold text-blue-400 bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/30 px-3.5 py-1.5 rounded-xl transition self-start sm:self-auto shadow-xs"
|
||
>
|
||
Open Project Directory →
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="overflow-x-auto">
|
||
<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]">
|
||
<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="complianceStatus" currentColumn={projectSortCol} direction={projectSortDir} onSort={handleProjectSort} className="py-3.5 px-4">
|
||
Compliance
|
||
</SortableTh>
|
||
<SortableTh column="risk" currentColumn={projectSortCol} direction={projectSortDir} onSort={handleProjectSort} align="center" className="py-3.5 px-4 text-center">
|
||
Risk
|
||
</SortableTh>
|
||
<SortableTh column="budgetAtRisk" currentColumn={projectSortCol} direction={projectSortDir} onSort={handleProjectSort} align="right" className="py-3.5 px-4 text-right">
|
||
Budget At Risk
|
||
</SortableTh>
|
||
<th className="py-3.5 px-5 text-right font-medium">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-800/60">
|
||
{sortedAttentionProjects.length === 0 ? (
|
||
<tr>
|
||
<td colSpan={7} 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>
|
||
) : (
|
||
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>
|
||
<span className="text-[10px] text-slate-400 font-mono">ID: {p.id}</span>
|
||
</td>
|
||
<td className="py-3.5 px-4 text-slate-300 font-medium">{p.programme}</td>
|
||
<td className="py-3.5 px-4">
|
||
<span
|
||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-semibold border ${
|
||
p.status === 'At Risk'
|
||
? 'bg-rose-500/10 text-rose-400 border-rose-500/30'
|
||
: p.status === 'Pending'
|
||
? 'bg-amber-500/10 text-amber-400 border-amber-500/30'
|
||
: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30'
|
||
}`}
|
||
>
|
||
{p.status}
|
||
</span>
|
||
</td>
|
||
<td className="py-3.5 px-4">
|
||
{p.isCompliant ? (
|
||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/30">
|
||
<CheckCircle className="w-3 h-3 text-emerald-400" />
|
||
<span>Compliant</span>
|
||
</span>
|
||
) : (
|
||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-rose-500/10 text-rose-400 border border-rose-500/30">
|
||
<AlertTriangle className="w-3 h-3 text-rose-400" />
|
||
<span>Noncompliant ({p.unmetCount} Unmet)</span>
|
||
</span>
|
||
)}
|
||
</td>
|
||
<td className="py-3.5 px-4 text-center">
|
||
<span
|
||
className={`inline-flex items-center justify-center font-bold px-2.5 py-0.5 rounded-md text-[10px] shadow-xs ${
|
||
p.risk === 'RED'
|
||
? 'bg-rose-600 text-white'
|
||
: p.risk === 'AMBER'
|
||
? 'bg-amber-500 text-white'
|
||
: 'bg-emerald-600 text-white'
|
||
}`}
|
||
>
|
||
{p.risk}
|
||
</span>
|
||
</td>
|
||
<td className="py-3.5 px-4 text-right font-mono font-bold text-xs">
|
||
<span className={p.budgetAtRisk > 0 ? 'text-rose-400' : 'text-emerald-400'}>
|
||
{formatZAR(p.budgetAtRisk)}
|
||
</span>
|
||
</td>
|
||
<td className="py-3.5 px-5 text-right">
|
||
<Link
|
||
to="/projects"
|
||
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-3 py-1.5 rounded-lg transition shadow-xs"
|
||
>
|
||
Review
|
||
<ArrowUpRight className="w-3.5 h-3.5" />
|
||
</Link>
|
||
</td>
|
||
</tr>
|
||
))
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|