ifritechnologies/pfm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved compliance monitoring

Browse Source
This commit is contained in:
hermes
2026-10-22 15:42:36 +02:00
parent 9835121fd9
commit 299d6ff4dc
27 changed files with 4245 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
PostFundManagement.ConsoleUI/src/components/projects/ProjectMilestonesModal.tsx
+59 -34
View File
@@ -214,53 +214,78 @@ export const ProjectMilestonesModal: React.FC<ProjectMilestonesModalProps> = ({
title={`Milestones & Deliverables: ${project.name}`}
subtitle={`Project #${project.id} • Statutory Work Breakdown Schedule`}
helpText="Contractual milestones represent formal deliverables. The monetary value of each milestone is dynamically aggregated from its scheduled activities vs indicator actuals. The project's total value is the sum of all milestones."
maxWidth="xl"
maxWidth="4xl"
>
<div className="space-y-5">
{/* KPI Cards: Project Value Roll-Up & Performance */}
<div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
<div className="bg-[#0b101c] p-3.5 rounded-xl border border-slate-800">
<span className="text-[10px] uppercase font-bold text-slate-400 flex items-center gap-1.5">
<Coins className="w-3.5 h-3.5 text-blue-400" />
Total Project Value
</span>
<div className="flex items-baseline gap-2 mt-1">
<span className="text-xl font-bold font-mono text-blue-400">{formatZAR(totalProjectMilestonesValue)}</span>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5">
<div className="bg-[#0b101c] p-4 rounded-xl border border-slate-800 hover:border-slate-700 transition flex flex-col justify-between min-w-0 shadow-sm">
<div className="flex items-center justify-between gap-1 mb-1">
<span className="text-[10px] uppercase font-bold text-slate-400 flex items-center gap-1.5 truncate">
<Coins className="w-3.5 h-3.5 text-blue-400 shrink-0" />
Total Project Value
</span>
</div>
<span className="text-[10px] text-slate-500">Sum of all milestones</span>
<div className="my-1.5">
<div
className="text-lg sm:text-xl font-bold font-mono text-blue-400 truncate tracking-tight"
title={formatZAR(totalProjectMilestonesValue)}
>
{formatZAR(totalProjectMilestonesValue)}
</div>
</div>
<span className="text-[10px] text-slate-500 truncate">Sum of all milestones</span>
</div>
<div className="bg-[#0b101c] p-3.5 rounded-xl border border-slate-800">
<span className="text-[10px] uppercase font-bold text-slate-400 flex items-center gap-1.5">
<Coins className="w-3.5 h-3.5 text-emerald-400" />
Approved Budget
</span>
<div className="flex items-baseline gap-2 mt-1">
<span className="text-xl font-bold font-mono text-emerald-400">{formatZAR(approvedBudgetTotal)}</span>
<div className="bg-[#0b101c] p-4 rounded-xl border border-slate-800 hover:border-slate-700 transition flex flex-col justify-between min-w-0 shadow-sm">
<div className="flex items-center justify-between gap-1 mb-1">
<span className="text-[10px] uppercase font-bold text-slate-400 flex items-center gap-1.5 truncate">
<Coins className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
Approved Budget
</span>
</div>
<span className="text-[10px] text-slate-500">Allocated budget ceiling</span>
<div className="my-1.5">
<div
className="text-lg sm:text-xl font-bold font-mono text-emerald-400 truncate tracking-tight"
title={formatZAR(approvedBudgetTotal)}
>
{formatZAR(approvedBudgetTotal)}
</div>
</div>
<span className="text-[10px] text-slate-500 truncate">Allocated budget ceiling</span>
</div>
<div className="bg-[#0b101c] p-3.5 rounded-xl border border-slate-800">
<span className="text-[10px] uppercase font-bold text-slate-400 flex items-center gap-1.5">
<TrendingUp className="w-3.5 h-3.5 text-cyan-400" />
Partner Actuals
</span>
<div className="flex items-baseline gap-2 mt-1">
<span className="text-xl font-bold font-mono text-cyan-400">{formatZAR(totalProjectActuals)}</span>
<div className="bg-[#0b101c] p-4 rounded-xl border border-slate-800 hover:border-slate-700 transition flex flex-col justify-between min-w-0 shadow-sm">
<div className="flex items-center justify-between gap-1 mb-1">
<span className="text-[10px] uppercase font-bold text-slate-400 flex items-center gap-1.5 truncate">
<TrendingUp className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
Partner Actuals
</span>
</div>
<span className="text-[10px] text-slate-500">Incurred material costs</span>
<div className="my-1.5">
<div
className="text-lg sm:text-xl font-bold font-mono text-cyan-400 truncate tracking-tight"
title={formatZAR(totalProjectActuals)}
>
{formatZAR(totalProjectActuals)}
</div>
</div>
<span className="text-[10px] text-slate-500 truncate">Incurred material costs</span>
</div>
<div className="bg-[#0b101c] p-3.5 rounded-xl border border-slate-800">
<span className="text-[10px] uppercase font-bold text-slate-400 flex items-center gap-1.5">
<CheckCircle2 className="w-3.5 h-3.5 text-indigo-400" />
Milestone Progress
</span>
<div className="flex items-baseline gap-2 mt-1">
<span className="text-xl font-bold text-white font-mono">{progressPct}%</span>
<div className="bg-[#0b101c] p-4 rounded-xl border border-slate-800 hover:border-slate-700 transition flex flex-col justify-between min-w-0 shadow-sm">
<div className="flex items-center justify-between gap-1 mb-1">
<span className="text-[10px] uppercase font-bold text-slate-400 flex items-center gap-1.5 truncate">
<CheckCircle2 className="w-3.5 h-3.5 text-indigo-400 shrink-0" />
Milestone Progress
</span>
</div>
<span className="text-[10px] text-slate-500">
<div className="my-1.5">
<div className="text-lg sm:text-xl font-bold text-white font-mono truncate tracking-tight">
{progressPct}%
</div>
</div>
<span className="text-[10px] text-slate-500 truncate">
{verifiedCount} of {milestones.length} verified
</span>
</div>