Fixed UI misalignments

PostFundManagement.ConsoleUI/src/components/projects/ProjectExpandedRow.tsx

@@ -20,6 +20,7 @@ import {
   getProjectIndicators,
   getProjectRisks,
   getBudgets,
+  getDisbursements,
 } from '../../services/api';
 import { Project, ApprovalStatus, Budget } from '../../types';
 import {
@@ -86,9 +87,21 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
   );
   const approvedBudgetTotal = approvedBudgets.reduce((sum, b) => sum + (Number(b.amount) || 0), 0);
 
+  const { data: disbursements = [] } = useQuery({
+    queryKey: ['disbursements', projectId],
+    queryFn: () => getDisbursements(1, 100),
+  });
+
+  const projectDisbursements = disbursements.filter(
+    (d) => String(d.projectId) === String(projectId) && (Number(d.status) === ApprovalStatus.Approved || Number(d.status) === 3)
+  );
+  const totalDisbursed = projectDisbursements.reduce((sum, d) => sum + (Number(d.amount) || 0), 0);
+
   const verifiedMilestonesCount = milestones.filter((m) => m.status === ApprovalStatus.Approved).length;
   const milestoneProgress = milestones.length > 0 ? Math.round((verifiedMilestonesCount / milestones.length) * 100) : 0;
   const totalActivityBudget = activities.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);
+  const projectValue = totalActivityBudget - totalDisbursed;
+  const projectVariance = approvedBudgetTotal - projectValue;
 
   return (
     <div className="p-4 sm:p-5 lg:p-6 bg-[#090d16]/95 border-t border-b border-blue-500/20 space-y-6 animate-in fade-in duration-200 w-full min-w-0">
@@ -108,6 +121,19 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
                 <span className="text-xs text-emerald-400 font-mono font-semibold shrink-0">
                   Approved Budget: {formatZAR(approvedBudgetTotal)}
                 </span>
+                <span className="text-slate-600">&bull;</span>
+                <span className="text-xs text-blue-400 font-mono font-semibold shrink-0" title={`Activities: ${formatZAR(totalActivityBudget)} - Disbursements: ${formatZAR(totalDisbursed)}`}>
+                  Project Value: {formatZAR(projectValue)}
+                </span>
+                <span className="text-slate-600">&bull;</span>
+                <span
+                  className={`text-xs font-mono font-semibold shrink-0 ${
+                    projectVariance >= 0 ? 'text-emerald-400' : 'text-rose-400'
+                  }`}
+                  title="Approved Budget minus Net Project Value"
+                >
+                  Variance: {projectVariance >= 0 ? '+' : ''}{formatZAR(projectVariance)}
+                </span>
               </>
             )}
           </div>