From 46dcc1b93659fb5c188a292c001516c5dec16cae Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Thu, 11 Dec 2025 13:49:03 +0000
Subject: [PATCH] added new metrics to dropdown scenario ui

---
 .../reporting/ReportingClientArea.tsx         | 17 ++++++++---
 .../reporting/ScenarioFinancialDrawer.tsx     | 28 +++++++++++++++++++
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/reporting/ReportingClientArea.tsx b/src/app/portfolio/[slug]/(portfolio)/reporting/ReportingClientArea.tsx
index 7df1b47f..ce72dfad 100644
--- a/src/app/portfolio/[slug]/(portfolio)/reporting/ReportingClientArea.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/reporting/ReportingClientArea.tsx
@@ -106,10 +106,9 @@ export function ReportingClientArea({
     : null;
 
   // ----------------------------------------
-  // Financial drawer values (from API)
+  // Scenario specific metrics that appear in the drawer (from API) and cannot be overlayed on baseline
   // ----------------------------------------
-  console.log("scenarioData", scenarioData);
-  const scenarioFinancial = scenarioData
+  const scenarioSpecific = scenarioData
     ? {
         totalCost: scenarioData.total_cost,
         contingency: scenarioData.contingency,
@@ -126,6 +125,16 @@ export function ReportingClientArea({
         netCost: scenarioData.net_cost,
         grossPerUnit: scenarioData.gross_per_unit,
         nUnits: scenarioData.n_units_upgraded,
+        totalCarbonSaved:
+          (baseline.totals.total_carbon ?? 0) - scenarioData.total_carbon,
+        totalBillsSaved:
+          (baseline.totals.total_bills ?? 0) - scenarioData.total_bills,
+        averageCaribonSaved:
+          ((baseline.totals.total_carbon ?? 0) - scenarioData.total_carbon) /
+          scenarioData.n_units_upgraded,
+        averageBillsSaved:
+          ((baseline.totals.total_bills ?? 0) - scenarioData.total_bills) /
+          scenarioData.n_units_upgraded,
       }
     : null;
 
@@ -157,7 +166,7 @@ export function ReportingClientArea({
         subtitle="High-level insights on performance, energy, and EPC quality."
       />
 
-      <ScenarioFinancialDrawer open={drawerOpen} metrics={scenarioFinancial} />
+      <ScenarioFinancialDrawer open={drawerOpen} metrics={scenarioSpecific} />
 
       <div className="grid grid-cols-1 lg:grid-cols-[60%_40%] gap-6 p-2">
         <DashboardSummaryCards
diff --git a/src/app/portfolio/[slug]/(portfolio)/reporting/ScenarioFinancialDrawer.tsx b/src/app/portfolio/[slug]/(portfolio)/reporting/ScenarioFinancialDrawer.tsx
index 1e126263..435fa9d9 100644
--- a/src/app/portfolio/[slug]/(portfolio)/reporting/ScenarioFinancialDrawer.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/reporting/ScenarioFinancialDrawer.tsx
@@ -95,6 +95,34 @@ export function ScenarioFinancialDrawer({
                 color="text-brandblue"
                 bg="bg-brandblue/20"
               />
+              <Metric
+                label="Total Carbon Saved (tonnes) per year"
+                value={formatNumber(metrics.totalCarbonSaved)}
+                icon={Users}
+                color="text-brandblue"
+                bg="bg-brandblue/20"
+              />
+              <Metric
+                label="Total Bills Saved (£) per year"
+                value={`£${formatNumber(metrics.totalBillsSaved)}`}
+                icon={Users}
+                color="text-brandblue"
+                bg="bg-brandblue/20"
+              />
+              <Metric
+                label="Average Carbon Saved (tonnes) per unit per year"
+                value={formatNumber(metrics.averageCaribonSaved)}
+                icon={Users}
+                color="text-brandblue"
+                bg="bg-brandblue/20"
+              />
+              <Metric
+                label="Average Bills Saved (£) per unit per year"
+                value={`£${formatNumber(metrics.averageBillsSaved)}`}
+                icon={Users}
+                color="text-brandblue"
+                bg="bg-brandblue/20"
+              />
             </div>
           </div>
         </motion.div>