formatting co2 titles in summary page

src/app/api/portfolio/scenario/[scenarioId]/route.ts

@@ -74,7 +74,7 @@ export async function GET(
       ],
     },
     {
-      title: "Co2/unit",
+      title: "CO2/unit",
       scenarios: [
         {
           scenarioName: scenarioName,

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

@@ -18,7 +18,7 @@ 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";
+import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 
 export async function getComparsionOverviewScenarioData(
   scenarioId: string
@@ -64,6 +64,18 @@ const shouldHighlightRow = (title: string) => {
   ].includes(title);
 };
 
+const formatCo2Title = (content: any) => {
+  if (content === "CO2/unit") {
+    return "CO₂/unit";
+  }
+
+  if (content === "£ per CO2 reduction") {
+    return "£ per CO₂ reduction";
+  }
+
+  return content;
+};
+
 const SummaryTable = ({
   data,
   scenarios,
@@ -215,7 +227,10 @@ const SummaryTable = ({
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id} className="px-6 py-4">
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    {flexRender(cell.column.columnDef.cell, {
+                      ...cell.getContext(),
+                      getValue: () => formatCo2Title(cell.getValue()),
+                    })}
                   </TableCell>
                 ))}
               </TableRow>

src/app/portfolio/[slug]/utils.ts

@@ -186,7 +186,7 @@ export async function getOverviewPortfolioData(
       ],
     },
     {
-      title: "Co2/unit",
+      title: "CO2/unit",
       scenarios: [
         { scenarioName: "Today", data: data[0].co2PerUnitPreRetrofit || "" },
         {