Fixed timeline height

Moved export and fixed data output
Added project budget amount widget to project listing

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

@@ -17,6 +17,8 @@ interface ProjectTimelineGanttProps {
   project: Project;
   milestones: Milestone[];
   activities: Activity[];
+  approvedBudgetTotal?: number;
+  approvedBudgetsCount?: number;
   onManageMilestones: () => void;
   onManageActivities: () => void;
 }
@@ -25,6 +27,8 @@ export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
   project,
   milestones,
   activities,
+  approvedBudgetTotal = 0,
+  approvedBudgetsCount = 0,
   onManageMilestones,
   onManageActivities,
 }) => {
@@ -362,7 +366,7 @@ export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
       </div>
 
       {/* Bottom Summary KPI Bar */}
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-2">
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 pt-2">
         <div className="p-3 bg-[#090d16] rounded-xl border border-slate-800">
           <span className="text-[10px] uppercase font-bold text-slate-500 block">Project Duration</span>
           <span className="text-sm font-bold text-white mt-0.5 block">
@@ -379,7 +383,7 @@ export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
             <span className="text-sm font-bold text-emerald-400">{milestoneProgress}%</span>
             <span className="text-[10px] text-slate-400">({verifiedMilestonesCount}/{milestones.length})</span>
           </div>
-          <div className="w-full h-1.5 bg-slate-800 rounded-full mt-1.5 overflow-hidden">
+          <div className="w-full h-1.5 bg-slate-900 rounded-full mt-1.5 overflow-hidden">
             <div
               className="h-full bg-emerald-500 rounded-full transition-all"
               style={{ width: `${milestoneProgress}%` }}
@@ -409,6 +413,19 @@ export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
           </div>
           <span className="text-[10px] text-slate-500 mt-0.5 block">Statutory Clearance</span>
         </div>
+
+        {/* Total Value of Approved Project Budgets Widget */}
+        <div className="p-3 bg-[#090d16] rounded-xl border border-slate-800">
+          <span className="text-[10px] uppercase font-bold text-slate-500 block">Approved Budget Value</span>
+          <span className="text-sm font-bold text-emerald-400 mt-0.5 block font-mono">
+            {formatZAR(approvedBudgetTotal)}
+          </span>
+          <span className="text-[10px] text-slate-400">
+            {approvedBudgetsCount > 0
+              ? `${approvedBudgetsCount} approved budget line${approvedBudgetsCount === 1 ? '' : 's'}`
+              : 'Allocated Project Budget'}
+          </span>
+        </div>
       </div>
     </div>
   );