pdf download working

src/app/globals.css

@@ -118,3 +118,107 @@
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+
+@media print {
+  body {
+    background: white;
+  }
+
+  /* ---------------------------------
+     PAGE LAYOUT
+  --------------------------------- */
+
+  @page {
+    margin: 0;
+  }
+
+  /* Outer page padding (NOT scaled) */
+  .print-page {
+    padding: 20px 24px;
+  }
+
+  /* Inner content (scaled slightly) */
+  .print-root {
+    transform: scale(0.94);
+    transform-origin: top left;
+    width: 106.4%; /* 1 / 0.94 */
+  }
+
+  /* ---------------------------------
+     HEADER
+  --------------------------------- */
+
+  .print-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    border-bottom: 2px solid #0b3c5d;
+    padding-bottom: 12px;
+    margin-bottom: 20px;
+  }
+
+  /* ---------------------------------
+     PAGE BREAKS
+  --------------------------------- */
+
+  .page-break {
+    break-before: page;
+    page-break-before: always;
+  }
+
+  .avoid-break {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  /* ---------------------------------
+     GRID STABILITY
+  --------------------------------- */
+
+  .print-grid-3 {
+    display: grid !important;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+    gap: 14px !important;
+  }
+
+  .print-grid-2 {
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    gap: 14px !important;
+  }
+
+  /* ---------------------------------
+     CARD FIXES
+  --------------------------------- */
+
+  section,
+  .card,
+  .gradient-card {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  .gradient-card {
+    background: none !important;
+    border: 2px solid #e5e7eb;
+  }
+
+  .gradient-card > div {
+    padding: 10px !important;
+  }
+
+  /* Disable gradient text */
+  .print-text-solid {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #0b3c5d !important;
+  }
+
+  /* Hide UI chrome */
+  button,
+  nav,
+  .no-print {
+    display: none !important;
+  }
+}

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

@@ -171,7 +171,7 @@ export function DashboardSummaryCards({
                       className={
                         c.isEpc
                           ? `text-3xl font-semibold ${epcColors[averageCurrentEpc || "Unknown"]}`
-                          : "text-3xl font-semibold bg-clip-text text-transparent bg-gradient-to-r from-brandblue to-midblue"
+                          : "text-3xl font-semibold bg-clip-text text-transparent bg-gradient-to-r from-brandblue to-midblue print-text-solid"
                       }
                     >
                       {c.key === "avgBills" ? `£${c.baseline}` : c.baseline}

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

@@ -161,6 +161,17 @@ export function ReportingClientArea({
           Could not load scenario data.
         </div>
       )}
+      <button
+        onClick={() => {
+          window.open(
+            `/portfolio/${portfolioId}/reporting/pdf?scenarioId=${selectedScenarioId}`,
+            "_blank"
+          );
+        }}
+        className="rounded-md border px-3 py-2 text-sm font-medium hover:bg-gray-50"
+      >
+        Download PDF
+      </button>
 
       {/* --- RETROFIT SECTION --- */}
       <SectionDivider

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

@@ -44,13 +44,21 @@ const gradients = {
 
 function GradientCard({
   gradient,
+  variant,
   children,
 }: {
   gradient: string;
+  variant: "green" | "blue" | "purple";
   children: React.ReactNode;
 }) {
   return (
-    <div className={clsx("relative rounded-lg p-[2px]", gradient)}>
+    <div
+      className={clsx(
+        "relative rounded-lg p-[2px] gradient-card",
+        gradient,
+        `gradient-${variant}`
+      )}
+    >
       <div className="rounded-[7px] bg-white h-full">{children}</div>
     </div>
   );
@@ -66,15 +74,17 @@ function Metric({
   icon: Icon,
   color,
   gradient,
+  variant = "green",
 }: {
   label: string;
   value: string | number;
   icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
   color: string;
   gradient: string;
+  variant?: "green" | "blue" | "purple";
 }) {
   return (
-    <GradientCard gradient={gradient}>
+    <GradientCard gradient={gradient} variant={variant}>
       <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>
@@ -97,6 +107,7 @@ function PairedMetric({
   secondary,
   gradient,
   iconClassName = "text-gray-700",
+  variant = "green",
 }: {
   title: string;
   icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
@@ -104,9 +115,10 @@ function PairedMetric({
   secondary: { label: string; value: string };
   gradient: string;
   iconClassName?: string;
+  variant?: "green" | "blue" | "purple";
 }) {
   return (
-    <GradientCard gradient={gradient}>
+    <GradientCard gradient={gradient} variant={variant}>
       <div className="p-4 h-full">
         <div className="flex items-center gap-2 mb-3">
           <Icon className={clsx("h-5 w-5", iconClassName)} />
@@ -172,7 +184,7 @@ function Section({
         </div>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 print-grid-3">
         {children}
       </div>
     </div>
@@ -223,6 +235,7 @@ export function ScenarioFinancialDrawer({
                   value: formatNumber(metrics.averageCaribonSaved),
                 }}
                 gradient={gradients.green}
+                variant="green"
               />
 
               <PairedMetric
@@ -238,6 +251,7 @@ export function ScenarioFinancialDrawer({
                   value: `£${formatNumber(metrics.averageBillsSaved)}`,
                 }}
                 gradient={gradients.green}
+                variant="green"
               />
 
               <Metric
@@ -246,6 +260,7 @@ export function ScenarioFinancialDrawer({
                 icon={HomeIcon}
                 color="text-green-700"
                 gradient={gradients.green}
+                variant="green"
               />
             </Section>
 
@@ -270,6 +285,7 @@ export function ScenarioFinancialDrawer({
                   value: `£${formatNumber(metrics.pcCost)}`,
                 }}
                 gradient={gradients.blue}
+                variant="blue"
               />
 
               <Metric
@@ -278,6 +294,7 @@ export function ScenarioFinancialDrawer({
                 icon={HomeIcon}
                 color="text-blue-600"
                 gradient={gradients.blue}
+                variant="blue"
               />
 
               <Metric
@@ -286,6 +303,7 @@ export function ScenarioFinancialDrawer({
                 icon={Gauge}
                 color="text-blue-600"
                 gradient={gradients.blue}
+                variant="blue"
               />
             </Section>
 
@@ -310,6 +328,7 @@ export function ScenarioFinancialDrawer({
                   value: `£${formatNumber(metrics.costPerCo2)}`,
                 }}
                 gradient={gradients.purple}
+                variant="purple"
               />
             </Section>
           </div>

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

@@ -0,0 +1,66 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function AutoPrint() {
+  useEffect(() => {
+    let cancelled = false;
+
+    function waitForImages() {
+      const images = Array.from(document.images);
+
+      return Promise.all(
+        images.map((img) => {
+          if (img.complete) return Promise.resolve();
+
+          return new Promise<void>((resolve) => {
+            img.onload = () => resolve();
+            img.onerror = () => resolve(); // never block print
+          });
+        })
+      );
+    }
+
+    function waitForFontsSafe() {
+      try {
+        // Some browsers expose document.fonts but break on .ready
+        if (
+          "fonts" in document &&
+          document.fonts &&
+          typeof document.fonts.ready?.then === "function"
+        ) {
+          return document.fonts.ready;
+        }
+      } catch {
+        // Ignore font readiness completely if browser misbehaves
+      }
+
+      return Promise.resolve();
+    }
+
+    async function printWhenReady() {
+      await Promise.all([waitForImages(), waitForFontsSafe()]);
+
+      if (cancelled) return;
+
+      // Ensure layout is flushed
+      requestAnimationFrame(() => {
+        // Close tab AFTER print dialog completes
+        window.onafterprint = () => {
+          window.close();
+        };
+
+        window.print();
+      });
+    }
+
+    printWhenReady();
+
+    return () => {
+      cancelled = true;
+      window.onafterprint = null;
+    };
+  }, []);
+
+  return null;
+}

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

@@ -0,0 +1,199 @@
+import { SectionDivider } from "../SectionDivider";
+import { ScenarioFinancialDrawer } from "../ScenarioFinancialDrawer";
+import { DashboardSummaryCards } from "../DashboardSummaryCards";
+import { EpcQualityCards } from "../EpcQualityCards";
+
+import { loadBaselineMetrics } from "@/app/portfolio/[slug]/(portfolio)/reporting/databaseFunctions";
+
+import type { BaselineMetrics } from "../types";
+import Image from "next/image";
+import { AutoPrint } from "./AutoPrint";
+
+/* ---------------------------------------------
+   Base URL helper (Vercel + local)
+--------------------------------------------- */
+
+function getBaseUrl() {
+  if (process.env.VERCEL_BRANCH_URL) {
+    return `https://${process.env.VERCEL_BRANCH_URL}`;
+  }
+
+  if (process.env.VERCEL_URL) {
+    return `https://${process.env.VERCEL_URL}`;
+  }
+
+  return "http://localhost:3000";
+}
+
+/* ---------------------------------------------
+   Server-side fetch for scenario metrics
+--------------------------------------------- */
+
+async function fetchScenarioReport({
+  portfolioId,
+  scenarioId,
+}: {
+  portfolioId: number;
+  scenarioId: number;
+}) {
+  const res = await fetch(
+    `${getBaseUrl()}/api/portfolio/${portfolioId}/scenario/${scenarioId}/metrics`,
+    { cache: "no-store" }
+  );
+
+  if (!res.ok) {
+    throw new Error("Failed to load scenario report");
+  }
+
+  return res.json();
+}
+
+/* ---------------------------------------------
+   Page
+--------------------------------------------- */
+
+export default async function ReportingPdfPage(props: {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ scenarioId?: string }>;
+}) {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+  const scenarioId = Number(searchParams.scenarioId);
+
+  if (!scenarioId) {
+    return <div>No scenario selected</div>;
+  }
+
+  const portfolioId = Number(params.slug);
+
+  /* ---------------------------------------------
+     Fetch baseline + scenario (parallel)
+  --------------------------------------------- */
+
+  const [baseline, scenarioData]: [BaselineMetrics, any] = await Promise.all([
+    loadBaselineMetrics(portfolioId),
+    fetchScenarioReport({ portfolioId, scenarioId }),
+  ]);
+
+  /* ---------------------------------------------
+     Scenario-only metrics for drawer
+  --------------------------------------------- */
+
+  const scenarioOverlay = scenarioData
+    ? {
+        avgSap: {
+          baseline: baseline.averages.avg_sap ?? 0,
+          scenario: Number(scenarioData.avg_sap),
+        },
+        avgCarbon: {
+          baseline: Number(baseline.averages.avg_carbon ?? 0),
+          scenario: Number(scenarioData.avg_carbon),
+
+          baselineTotal: Number(baseline.totals.total_carbon ?? 0),
+          scenarioTotal: Number(scenarioData.total_carbon ?? 0),
+        },
+        avgBills: {
+          baseline: baseline.averages.avg_bills ?? 0,
+          scenario: scenarioData.avg_bills,
+          baselineTotal: baseline.totals.total_bills ?? 0,
+          scenarioTotal: scenarioData.total_bills,
+        },
+        valuation: { baseline: null, scenario: null },
+        scenarioEpcBands: scenarioData.scenario_epc_counts,
+      }
+    : null;
+
+  const scenarioSpecific = {
+    constructionCost: scenarioData.construction_cost,
+    pcCost: scenarioData.pc_cost,
+    contingency: scenarioData.contingency,
+    funding: scenarioData.total_funding,
+    costPerSap:
+      scenarioData.construction_cost > 0
+        ? scenarioData.gross_per_unit /
+          (scenarioData.avg_sap - (baseline.averages.avg_sap ?? 0))
+        : 0,
+    costPerCo2:
+      scenarioData.construction_cost > 0
+        ? (scenarioData.construction_cost + scenarioData.pc_cost) /
+          scenarioData.total_carbon
+        : 0,
+    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,
+  };
+
+  return (
+    <div className="print-page">
+      <div className="print-root space-y-4">
+        <AutoPrint />
+        {/* ------------------------------------------------
+          Branded header
+      ------------------------------------------------ */}
+        <header className="flex items-center gap-3 border-b pb-2">
+          <Image
+            src="/domna_logo_blue_transparent_background.png"
+            alt="Domna Logo"
+            width={140}
+            height={40}
+          />
+          <div>
+            <h1 className="text-xl font-semibold">Retrofit Scenario Report</h1>
+          </div>
+        </header>
+
+        {/* ------------------------------------------------
+          Scenario Impact Summary
+      ------------------------------------------------ */}
+        <SectionDivider
+          title="Scenario Impact Summary"
+          subtitle="Financial, carbon and energy outcomes"
+        />
+
+        <ScenarioFinancialDrawer open={true} metrics={scenarioSpecific} />
+
+        {/* ------------------------------------------------
+          Portfolio Summary (baseline)
+      ------------------------------------------------ */}
+        <div className="page-break" />
+        <SectionDivider
+          title="Portfolio Summary"
+          subtitle="Headline performance indicators"
+        />
+
+        <DashboardSummaryCards
+          total={baseline.total}
+          totals={baseline.totals}
+          averages={baseline.averages}
+          estimatedCounts={baseline.estimatedCounts}
+          scenarioOverlay={scenarioOverlay}
+        />
+
+        {/* ------------------------------------------------
+          EPC Quality (baseline)
+      ------------------------------------------------ */}
+        <SectionDivider
+          title="EPC Quality"
+          subtitle="Condition, compliance and performance"
+        />
+
+        <EpcQualityCards
+          estimatedCounts={baseline.estimatedCounts}
+          total={baseline.total}
+          expiredEpcs={baseline.expiredEpcs}
+          likelyDowngrades={baseline.likelyDowngrades}
+        />
+      </div>
+    </div>
+  );
+}