Fixed adding of new column

src/app/components/portfolio/summary/SummaryTable.tsx

@@ -52,9 +52,11 @@ const SummaryTable = ({
       },
     ];
 
-    // Automatically add columns for each predefined scenario
-    // TODO: Retrieve this from the data!
-    const predefinedScenarios = ["Today", "Projected"]; // Extend this list based on your initial scenario setup
+    // Retrieve the scenario names
+    const predefinedScenarios = data[0].scenarios.map(
+      (scenario) => scenario.scenarioName
+    );
+
     predefinedScenarios.forEach((scenarioName) => {
       initialColumns.push({
         id: scenarioName,
@@ -93,46 +95,74 @@ const SummaryTable = ({
     getCoreRowModel: getCoreRowModel(),
   });
 
-  const addColumn = (columnName: string) => {
+  const addColumn = (portfolioId: string) => {
     // Example of dynamically fetched data for a new scenario
-    const fetchedScenarioData = {
-      EPCs: [
-        { name: "G", G: Math.random() * 1000 },
-        { name: "F", F: Math.random() * 1000 },
-        { name: "E", E: Math.random() * 1000 },
-        { name: "D", D: Math.random() * 1000 },
-        { name: "C", C: Math.random() * 1000 },
-        { name: "B", B: Math.random() * 1000 },
-        { name: "A", A: Math.random() * 1000 },
-      ],
-      "# Units": (Math.random() * 10000).toFixed(0),
-      "Co2/unit": (Math.random() * 100).toFixed(0) + "t",
-      "Energy bills/unit": "£" + (Math.random() * 2000).toFixed(0),
-      Cost: "£" + (Math.random() * 50000).toFixed(0),
-      "£ per CO2 reduction": "£" + (Math.random() * 100).toFixed(0),
-      "£ per SAP point": "£" + (Math.random() * 100).toFixed(0),
-    };
+    const fetchedScenarioData: DataItem[] = [
+      {
+        title: "EPCs",
+        scenarios: [
+          {
+            scenarioName: "EPC B Scenario",
+            data: [
+              { name: "G", G: Math.random() * 1000 },
+              { name: "F", F: Math.random() * 1000 },
+              { name: "E", E: Math.random() * 1000 },
+              { name: "D", D: Math.random() * 1000 },
+              { name: "C", C: Math.random() * 1000 },
+              { name: "B", B: Math.random() * 1000 },
+              { name: "A", A: Math.random() * 1000 },
+            ],
+          },
+        ],
+      },
+      {
+        title: "# Units",
+        scenarios: [{ scenarioName: "EPC B Scenario", data: "" }],
+      },
+      {
+        title: "Co2/unit",
+        scenarios: [{ scenarioName: "EPC B Scenario", data: "50t" }],
+      },
+      {
+        title: "Energy bills/unit",
+        scenarios: [{ scenarioName: "EPC B Scenario", data: "£1,500" }],
+      },
+      {
+        title: "Cost",
+        scenarios: [{ scenarioName: "EPC B Scenario", data: "£32,412" }],
+      },
+      {
+        title: "£ per CO2 reduction",
+        scenarios: [{ scenarioName: "EPC B Scenario", data: "£50" }],
+      },
+      {
+        title: "£ per SAP point",
+        scenarios: [{ scenarioName: "EPC B Scenario", data: "£30" }],
+      },
+    ];
 
-    // Map over existing data and append new scenario data where applicable
-    const updatedData = managedData.map((item) => ({
-      ...item,
-      scenarios: [
-        ...item.scenarios,
-        {
-          scenarioName: columnName,
-          data: fetchedScenarioData[item.title] || "No data available",
-        },
-      ],
-    }));
+    // This will come from the fetched data
+    const scenarioName = fetchedScenarioData[0].scenarios[0].scenarioName;
+
+    // Map over existing data and append new scenario data for matching titles
+    const updatedData = managedData.map((item) => {
+      const fetchedItem = fetchedScenarioData.find(
+        (fi) => fi.title === item.title
+      );
+      return {
+        ...item,
+        scenarios: [...item.scenarios, ...(fetchedItem?.scenarios || [])],
+      };
+    });
 
     setManagedData(updatedData);
 
-    // Create a new column dynamically based on the scenarioName
+    // Create a new column for this scenario
     const newColumn: ColumnDef<DataItem> = {
       accessorFn: (row) =>
-        row.scenarios.find((s) => s.scenarioName === columnName)?.data,
-      id: columnName.toLowerCase().replace(/\s+/g, "_"),
-      header: () => <span>{columnName}</span>,
+        row.scenarios.find((s) => s.scenarioName === scenarioName)?.data,
+      id: scenarioName.toLowerCase().replace(/\s+/g, "_"),
+      header: () => <span>{scenarioName}</span>,
       cell: (info) => {
         const value = info.getValue();
         return Array.isArray(value) ? (