fixing type errors

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

@@ -71,7 +71,7 @@ const SelectComparisonModal = ({
                   {userPortfolios.map((portfolio) => (
                     <option
                       key={portfolio.id.toString()}
-                      value={portfolio.name}
+                      value={String(portfolio.id)}
                     >
                       {portfolio.name}
                     </option>

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

@@ -18,6 +18,42 @@ import {
 import SelectComparisonModal from "./SelectComparisonModal";
 import EpcBarChart from "./EpcBarChart";
 import { DataItem, ChartData } from "@/app/portfolio/[slug]/utils";
+import { QueryKey, UseQueryOptions, useQuery } from "@tanstack/react-query";
+
+export async function getComparsionOverviewPortfolioData(
+  portfolioId: string
+): Promise<Promise<DataItem[]>> {
+  const url = process.env.URL || "" + `/api/portfolio/summary/${portfolioId}`;
+
+  // This is the client side counterpart to getOverviewPortfolioData
+  const response = await fetch(url, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+    next: { revalidate: 60 },
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+}
+
+interface UseFetchPortfolioSummaryProps {
+  portfolioId: string; // Assuming portfolioId can be null to handle cases before it's available
+  onSuccess: (data: DataItem[]) => void;
+  options?: Omit<UseQueryOptions<DataItem[], Error>, "queryKey" | "queryFn">;
+}
+
+export const useFetchPortfolioSummary = ({
+  portfolioId,
+  onSuccess,
+}: UseFetchPortfolioSummaryProps) => {
+  return useQuery({
+    queryKey: ["portfolioSummary", portfolioId],
+    queryFn: () => getComparsionOverviewPortfolioData(portfolioId as string), // Ensure non-null assertion or handle potential null inside the function
+    onSuccess,
+    enabled: portfolioId !== "no-id", // Ensure the query only runs when portfolioId is not null
+  });
+};
 
 const SummaryTable = ({
   data,
@@ -72,94 +108,53 @@ const SummaryTable = ({
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const [selectedPortfolioId, setSelectedPortfolioId] =
+    useState<string>("no-id");
+
+  // Fetch and handle data when a new portfolio is selected
+  const {
+    isLoading,
+    error,
+    data: fetchedData,
+  } = useFetchPortfolioSummary({
+    portfolioId: selectedPortfolioId,
+    onSuccess: (fetchedData: DataItem[]) => {
+      const updatedData = managedData.map((item) => ({
+        ...item,
+        scenarios: [
+          ...item.scenarios,
+          ...(fetchedData.find((fi) => fi.title === item.title)?.scenarios ||
+            []),
+        ],
+      }));
+      setManagedData(updatedData);
+      if (fetchedData[0] && fetchedData[0].scenarios.length > 0) {
+        addColumn(fetchedData[0].scenarios[0].scenarioName);
+      }
+    },
+  });
+
   const table = useReactTable({
     data: managedData,
     columns: columns,
     getCoreRowModel: getCoreRowModel(),
   });
 
-  const addColumn = (portfolioId: string) => {
-    // Example of dynamically fetched data for a new scenario
-    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: "Cost (£) /unit",
-        scenarios: [{ scenarioName: "EPC B Scenario", data: "£1,412" }],
-      },
-      {
-        title: "£ per CO2 reduction",
-        scenarios: [{ scenarioName: "EPC B Scenario", data: "£50" }],
-      },
-      {
-        title: "£ per SAP point",
-        scenarios: [{ scenarioName: "EPC B Scenario", data: "£30" }],
-      },
-    ];
-
-    // 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 for this scenario
+  const addColumn = (scenarioName: string) => {
     const newColumn: ColumnDef<DataItem> = {
+      id: scenarioName.toLowerCase().replace(/\s+/g, "_"),
       accessorFn: (row) =>
         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) ? (
           <EpcBarChart chartdata={value as ChartData[]} />
         ) : (
-          <span>{value as String}</span>
+          <span>{String(value)}</span>
         );
       },
     };
-
     setColumns((oldColumns) => [...oldColumns, newColumn]);
   };
 
@@ -175,7 +170,7 @@ const SummaryTable = ({
         isOpen={isModalOpen}
         setIsOpen={setIsModalOpen}
         userPortfolios={userPortfolios}
-        onAddColumn={addColumn}
+        onAddColumn={(id: string) => setSelectedPortfolioId(id)}
       />
 
       <div className="overflow-x-auto shadow-md sm:rounded-lg">