redesigned the scenario dropdown

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

@@ -92,10 +92,11 @@ export async function GET(
   const upgraded = upgradedResult.rows[0] as UpgradedAggregates;
 
   const n_units_upgraded = upgraded.n_units_upgraded;
-  const total_cost = upgraded.total_cost ?? 0;
+  const construction_cost = upgraded.total_cost ?? 0;
   const contingency = upgraded.contingency ?? 0;
   const total_funding = upgraded.total_funding ?? 0;
-  const net_cost = total_cost - total_funding;
+  const net_cost = construction_cost - total_funding;
+  const pc_cost = construction_cost * 0.28; // Placeholder for PC cost
 
   //
   // ----------------------------------------------------------
@@ -132,13 +133,16 @@ export async function GET(
     total_bills,
     n_units,
     scenario_epc_counts,
-
+    pc_cost,
     // Upgrade metrics (only properties with work)
     n_units_upgraded,
-    total_cost,
+    construction_cost,
     contingency,
     total_funding,
     net_cost,
-    gross_per_unit: n_units_upgraded > 0 ? total_cost / n_units_upgraded : 0,
+    gross_per_unit:
+      n_units_upgraded > 0
+        ? (construction_cost + pc_cost) / n_units_upgraded
+        : 0,
   });
 }

src/app/portfolio/[slug]/(portfolio)/page.tsx

@@ -81,13 +81,7 @@ export default async function Page(props: {
     <>
       <div className="flex justify-center">
         <div className="grid grid-cols-11 w-full max-w-8xl">
-          <div className="col-span-3 flex-col">
-            <SummaryBox
-              scenarios={scenarios}
-              numProperties={properties.length}
-            />
-          </div>
-          <div className="col-span-8 bg-white">
+          <div className="col-span-11 bg-white">
             {properties.length === 0 ? (
               <EmptyPropertyState />
             ) : (

src/app/portfolio/[slug]/(portfolio)/reporting/ReportingClientArea.tsx

@@ -110,17 +110,19 @@ export function ReportingClientArea({
   // ----------------------------------------
   const scenarioSpecific = scenarioData
     ? {
-        totalCost: scenarioData.total_cost,
+        constructionCost: scenarioData.construction_cost,
+        pcCost: scenarioData.pc_cost,
         contingency: scenarioData.contingency,
         funding: scenarioData.total_funding,
         costPerSap:
-          scenarioData.total_cost > 0
+          scenarioData.construction_cost > 0
             ? scenarioData.gross_per_unit /
               (scenarioData.avg_sap - (baseline.averages.avg_sap ?? 0))
             : 0,
         costPerCo2:
-          scenarioData.total_cost > 0
-            ? scenarioData.total_cost / scenarioData.total_carbon
+          scenarioData.construction_cost > 0
+            ? (scenarioData.construction_cost + scenarioData.pc_cost) /
+              scenarioData.total_carbon
             : 0,
         netCost: scenarioData.net_cost,
         grossPerUnit: scenarioData.gross_per_unit,

src/app/portfolio/[slug]/(portfolio)/reporting/ScenarioFinancialDrawer.tsx

@@ -2,174 +2,319 @@
 
 import { motion, AnimatePresence } from "framer-motion";
 import { formatNumber } from "@/app/utils";
+import clsx from "clsx";
 
-// Premium Icons
+/* Heroicons (outline) */
 import {
-  Banknote,
-  ShieldAlert,
-  PiggyBank,
-  Scale,
-  Gauge,
-  Factory,
-  Home,
-  Users,
-} from "lucide-react";
+  ArrowTrendingUpIcon,
+  ClipboardDocumentCheckIcon,
+  ScaleIcon,
+  HomeIcon,
+  BoltIcon,
+  FireIcon,
+  ChartBarIcon,
+  WrenchIcon,
+} from "@heroicons/react/24/outline";
 
-export function ScenarioFinancialDrawer({
-  open,
-  metrics,
-}: {
+/* Lucide */
+import { Gauge } from "lucide-react";
+
+/* ───────────────────────────────────────────── */
+/* Types                                        */
+/* ───────────────────────────────────────────── */
+
+interface ScenarioFinancialDrawerProps {
   open: boolean;
   metrics: any | null;
+}
+
+/* ───────────────────────────────────────────── */
+/* Gradient Tokens                              */
+/* ───────────────────────────────────────────── */
+
+const gradients = {
+  green: "bg-gradient-to-r from-green-700 via-green-400 to-green-700",
+  blue: "bg-gradient-to-r from-brandblue via-sky-400 to-brandblue",
+  purple: "bg-gradient-to-r from-purple-700 via-purple-400 to-purple-700",
+};
+
+/* ───────────────────────────────────────────── */
+/* Gradient Card Shell                          */
+/* ───────────────────────────────────────────── */
+
+function GradientCard({
+  gradient,
+  children,
+}: {
+  gradient: string;
+  children: React.ReactNode;
 }) {
   return (
-    <AnimatePresence initial={false}>
-      {open && metrics && (
-        <motion.div
-          key="drawer"
-          initial={{ height: 0, opacity: 0 }}
-          animate={{ height: "auto", opacity: 1 }}
-          exit={{ height: 0, opacity: 0 }}
-          transition={{ duration: 0.35, ease: "easeInOut" }}
-          className="overflow-hidden"
-        >
-          <div className="rounded-lg border border-gray-200 bg-white shadow-sm mt-4 p-6">
-            <h3 className="text-lg font-semibold text-brandblue mb-4">
-              Scenario Financial Summary
-            </h3>
-
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-              <Metric
-                label="Total Cost"
-                value={`£${formatNumber(metrics.totalCost)}`}
-                icon={Banknote}
-                color="text-brandblue"
-                bg="bg-brandblue/20"
-              />
-              <Metric
-                label="Contingency"
-                value={`£${formatNumber(metrics.contingency)}`}
-                icon={ShieldAlert}
-                color="text-amber-600"
-                bg="bg-amber-200/40"
-              />
-              <Metric
-                label="Funding"
-                value={`£${formatNumber(metrics.funding)}`}
-                icon={PiggyBank}
-                color="text-emerald-600"
-                bg="bg-emerald-200/40"
-              />
-              <Metric
-                label="Net Cost"
-                value={`£${formatNumber(metrics.netCost)}`}
-                icon={Scale}
-                color="text-red-600"
-                bg="bg-red-200/40"
-              />
-              <Metric
-                label="Cost per SAP point"
-                value={`£${formatNumber(metrics.costPerSap)}`}
-                icon={Gauge}
-                color="text-purple-600"
-                bg="bg-purple-200/40"
-              />
-              <Metric
-                label="Cost per tonne CO₂"
-                value={`£${formatNumber(metrics.costPerCo2)}`}
-                icon={Factory}
-                color="text-slate-700"
-                bg="bg-slate-200/40"
-              />
-              <Metric
-                label="Gross Cost per Unit"
-                value={`£${formatNumber(metrics.grossPerUnit)}`}
-                icon={Home}
-                color="text-sky-600"
-                bg="bg-sky-200/40"
-              />
-              <Metric
-                label="Units Upgraded"
-                value={metrics.nUnits}
-                icon={Users}
-                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>
-      )}
-    </AnimatePresence>
+    <div className={clsx("relative rounded-lg p-[2px]", gradient)}>
+      <div className="rounded-[7px] bg-white h-full">{children}</div>
+    </div>
   );
 }
 
+/* ───────────────────────────────────────────── */
+/* Single Metric Card                           */
+/* ───────────────────────────────────────────── */
+
 function Metric({
   label,
   value,
   icon: Icon,
   color,
-  bg,
+  gradient,
 }: {
   label: string;
   value: string | number;
-  icon: any;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
   color: string;
-  bg: string;
+  gradient: string;
 }) {
   return (
-    <div
-      className="group flex flex-col rounded-lg border border-gray-200 
-                 bg-gradient-to-br from-white to-gray-50 
-                 p-3 shadow-sm hover:shadow-md 
-                 hover:border-brandblue/30 transition-all"
-    >
-      <div className="flex items-center gap-2 mb-1">
-        {/* coloured icon background */}
-        <div
-          className={`p-1.5 rounded-md ${bg} group-hover:opacity-80 transition`}
-        >
-          <Icon className={`h-4 w-4 ${color}`} />
-        </div>
-
-        <span className="text-[10px] uppercase tracking-wide font-semibold text-gray-500">
+    <GradientCard gradient={gradient}>
+      <div className="flex flex-col items-center justify-center p-4 h-full text-center">
+        <Icon className={clsx("h-6 w-6 mb-2", color)} />
+        <span className="text-3xl font-semibold text-gray-900">{value}</span>
+        <span className="mt-1 text-xs uppercase tracking-wide font-semibold text-gray-500">
           {label}
         </span>
       </div>
+    </GradientCard>
+  );
+}
 
-      <span
-        className="text-lg md:text-xl font-semibold text-gray-900 
-                   group-hover:text-brandblue transition truncate"
-      >
-        {value}
-      </span>
+/* ───────────────────────────────────────────── */
+/* Paired Metric Card (Reusable Everywhere)     */
+/* ───────────────────────────────────────────── */
+
+function PairedMetric({
+  title,
+  icon: Icon,
+  primary,
+  secondary,
+  gradient,
+  iconClassName = "text-gray-700",
+}: {
+  title: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  primary: { label: string; value: string };
+  secondary: { label: string; value: string };
+  gradient: string;
+  iconClassName?: string;
+}) {
+  return (
+    <GradientCard gradient={gradient}>
+      <div className="p-4 h-full">
+        <div className="flex items-center gap-2 mb-3">
+          <Icon className={clsx("h-5 w-5", iconClassName)} />
+          <span className="text-sm font-semibold text-gray-900">{title}</span>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <p className="text-xs text-gray-500">{primary.label}</p>
+            <p className="text-xl font-semibold text-gray-900">
+              {primary.value}
+            </p>
+          </div>
+
+          <div>
+            <p className="text-xs text-gray-500">{secondary.label}</p>
+            <p className="text-xl font-semibold text-gray-900">
+              {secondary.value}
+            </p>
+          </div>
+        </div>
+      </div>
+    </GradientCard>
+  );
+}
+
+/* ───────────────────────────────────────────── */
+/* Section Header                               */
+/* ───────────────────────────────────────────── */
+
+function Section({
+  title,
+  subtitle,
+  icon: Icon,
+  gradient,
+  accentColor,
+  children,
+}: {
+  title: string;
+  subtitle: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  gradient: string;
+  accentColor: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-start gap-3">
+        <div className={clsx("w-1 rounded-full self-stretch", gradient)} />
+
+        <div
+          className={clsx(
+            "rounded-lg p-2 bg-white shadow-sm border",
+            accentColor
+          )}
+        >
+          <Icon className="h-5 w-5" />
+        </div>
+
+        <div className="pt-0.5">
+          <h4 className="text-base font-semibold text-gray-900">{title}</h4>
+          <p className="text-xs text-gray-500">{subtitle}</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
+        {children}
+      </div>
     </div>
   );
 }
+
+/* ───────────────────────────────────────────── */
+/* Main Drawer                                 */
+/* ───────────────────────────────────────────── */
+
+export function ScenarioFinancialDrawer({
+  open,
+  metrics,
+}: ScenarioFinancialDrawerProps) {
+  return (
+    <AnimatePresence initial={false}>
+      {open && metrics && (
+        <motion.div
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: "auto", opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          transition={{ duration: 0.35, ease: "easeInOut" }}
+          className="overflow-hidden"
+        >
+          <div className="rounded-lg border border-gray-200 bg-white shadow-sm mt-4 p-6 space-y-6">
+            <h3 className="text-lg font-semibold text-brandblue">
+              Scenario Impact Summary
+            </h3>
+
+            {/* BENEFITS */}
+            <Section
+              title="Benefits"
+              subtitle="Impact for occupants and the environment"
+              icon={ArrowTrendingUpIcon}
+              gradient={gradients.green}
+              accentColor="border-green-200 text-green-700"
+            >
+              <PairedMetric
+                title="Carbon impact"
+                icon={BoltIcon}
+                iconClassName="text-green-700"
+                primary={{
+                  label: "Total carbon saved (t/yr)",
+                  value: formatNumber(metrics.totalCarbonSaved),
+                }}
+                secondary={{
+                  label: "Average per unit (t/yr)",
+                  value: formatNumber(metrics.averageCaribonSaved),
+                }}
+                gradient={gradients.green}
+              />
+
+              <PairedMetric
+                title="Bill savings"
+                icon={FireIcon}
+                iconClassName="text-green-700"
+                primary={{
+                  label: "Total bill savings (£/yr)",
+                  value: `£${formatNumber(metrics.totalBillsSaved)}`,
+                }}
+                secondary={{
+                  label: "Average per unit (£/yr)",
+                  value: `£${formatNumber(metrics.averageBillsSaved)}`,
+                }}
+                gradient={gradients.green}
+              />
+
+              <Metric
+                label="Homes upgraded"
+                value={metrics.nUnits}
+                icon={HomeIcon}
+                color="text-green-700"
+                gradient={gradients.green}
+              />
+            </Section>
+
+            {/* COSTS */}
+            <Section
+              title="Costs"
+              subtitle="Investment required to deliver the works"
+              icon={ClipboardDocumentCheckIcon}
+              gradient={gradients.blue}
+              accentColor="border-brandblue text-brandblue"
+            >
+              <PairedMetric
+                title="Delivery costs"
+                icon={WrenchIcon}
+                iconClassName="text-blue-600"
+                primary={{
+                  label: "Construction works",
+                  value: `£${formatNumber(metrics.constructionCost)}`,
+                }}
+                secondary={{
+                  label: "Project delivery",
+                  value: `£${formatNumber(metrics.pcCost)}`,
+                }}
+                gradient={gradients.blue}
+              />
+
+              <Metric
+                label="Gross cost per unit"
+                value={`£${formatNumber(metrics.grossPerUnit)}`}
+                icon={HomeIcon}
+                color="text-blue-600"
+                gradient={gradients.blue}
+              />
+
+              <Metric
+                label="Contingency"
+                value={`£${formatNumber(metrics.contingency)}`}
+                icon={Gauge}
+                color="text-blue-600"
+                gradient={gradients.blue}
+              />
+            </Section>
+
+            {/* COST EFFECTIVENESS */}
+            <Section
+              title="Cost effectiveness"
+              subtitle="Value for money of the investment"
+              icon={ScaleIcon}
+              gradient={gradients.purple}
+              accentColor="border-purple-200 text-purple-700"
+            >
+              <PairedMetric
+                title="Efficiency metrics"
+                icon={ChartBarIcon}
+                iconClassName="text-purple-700"
+                primary={{
+                  label: "£ per SAP point",
+                  value: `£${formatNumber(metrics.costPerSap)}`,
+                }}
+                secondary={{
+                  label: "£ per tonne CO₂",
+                  value: `£${formatNumber(metrics.costPerCo2)}`,
+                }}
+                gradient={gradients.purple}
+              />
+            </Section>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}