From 52f851c1f38642f08dde775f59bb6f43b75817e0 Mon Sep 17 00:00:00 2001
From: Bert Hausmans <bert@hausmans.nl>
Date: Wed, 21 Jan 2026 13:47:19 +0100
Subject: [PATCH] Fix TypeError: totalFTE.toFixed is not a function

- Add Number() conversion in overallKPIs calculation to ensure all values are numbers
- Add safeguards in render to handle null/undefined/NaN values before calling .toFixed()
- Prevents crashes when data contains non-numeric values
---
 frontend/src/components/TeamDashboard.tsx | 27 ++++++++++++-----------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/TeamDashboard.tsx b/frontend/src/components/TeamDashboard.tsx
index b36f0e9..7ad3e60 100644
--- a/frontend/src/components/TeamDashboard.tsx
+++ b/frontend/src/components/TeamDashboard.tsx
@@ -113,6 +113,7 @@ export default function TeamDashboard() {
     if (!data) return null;
 
     // Sum up total FTE (including min/max bandwidth)
+    // Ensure all values are numbers (handle null/undefined/NaN)
     let totalFTE = 0;
     let totalMinFTE = 0;
     let totalMaxFTE = 0;
@@ -121,25 +122,25 @@ export default function TeamDashboard() {
 
     // Aggregate from all teams
     data.teams.forEach(team => {
-      totalFTE += team.totalEffort;
-      totalMinFTE += team.minEffort ?? 0;
-      totalMaxFTE += team.maxEffort ?? 0;
-      totalApplicationCount += team.applicationCount;
+      totalFTE += Number(team.totalEffort) || 0;
+      totalMinFTE += Number(team.minEffort) || 0;
+      totalMaxFTE += Number(team.maxEffort) || 0;
+      totalApplicationCount += Number(team.applicationCount) || 0;
 
       // Aggregate governance model distribution
       Object.entries(team.byGovernanceModel).forEach(([model, count]) => {
-        overallByGovernanceModel[model] = (overallByGovernanceModel[model] || 0) + count;
+        overallByGovernanceModel[model] = (overallByGovernanceModel[model] || 0) + (Number(count) || 0);
       });
     });
 
     // Add unassigned
-    totalFTE += data.unassigned.totalEffort;
-    totalMinFTE += data.unassigned.minEffort ?? 0;
-    totalMaxFTE += data.unassigned.maxEffort ?? 0;
-    totalApplicationCount += data.unassigned.applicationCount;
+    totalFTE += Number(data.unassigned.totalEffort) || 0;
+    totalMinFTE += Number(data.unassigned.minEffort) || 0;
+    totalMaxFTE += Number(data.unassigned.maxEffort) || 0;
+    totalApplicationCount += Number(data.unassigned.applicationCount) || 0;
 
     Object.entries(data.unassigned.byGovernanceModel).forEach(([model, count]) => {
-      overallByGovernanceModel[model] = (overallByGovernanceModel[model] || 0) + count;
+      overallByGovernanceModel[model] = (overallByGovernanceModel[model] || 0) + (Number(count) || 0);
     });
 
     return {
@@ -831,10 +832,10 @@ export default function TeamDashboard() {
                 Totaal FTE
               </div>
               <div className="text-4xl font-bold text-white tracking-tight">
-                {overallKPIs.totalFTE.toFixed(2)} FTE
+                {(Number(overallKPIs.totalFTE) || 0).toFixed(2)} FTE
               </div>
               <div className="text-emerald-200 text-sm mt-1">
-                Bandbreedte: {overallKPIs.totalMinFTE.toFixed(2)} - {overallKPIs.totalMaxFTE.toFixed(2)} FTE
+                Bandbreedte: {(Number(overallKPIs.totalMinFTE) || 0).toFixed(2)} - {(Number(overallKPIs.totalMaxFTE) || 0).toFixed(2)} FTE
               </div>
             </div>
 
@@ -847,7 +848,7 @@ export default function TeamDashboard() {
                 Application Components
               </div>
               <div className="text-4xl font-bold text-white tracking-tight">
-                {overallKPIs.totalApplicationCount}
+                {Number(overallKPIs.totalApplicationCount) || 0}
               </div>
               <div className="text-slate-400 text-sm mt-1">
                 weergegeven