From 9b902d27df0f7b3e37d8a289c768c90d33bc1e05 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Tue, 2 Dec 2025 13:58:10 +0000
Subject: [PATCH] fixing type errors

---
 .../[slug]/(portfolio)/reporting/page.tsx     | 38 +++++++++++++++++--
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/reporting/page.tsx b/src/app/portfolio/[slug]/(portfolio)/reporting/page.tsx
index 2e57954c..bca94fa6 100644
--- a/src/app/portfolio/[slug]/(portfolio)/reporting/page.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/reporting/page.tsx
@@ -1,14 +1,44 @@
+import {
+  loadBaselineMetrics,
+  getCountByPropertyType,
+} from "@/app/portfolio/[slug]/(portfolio)/reporting/loadBaselineMetrics";
+import { DashboardSummaryCards } from "@/app/portfolio/[slug]/(portfolio)/reporting/DashboardSummaryCards";
+import { BreakdownChart } from "@/app/portfolio/[slug]/(portfolio)/reporting/BreakdownChart";
+
 export default async function ReportingPage(props: {
   params: Promise<{ slug: string }>;
 }) {
   const params = await props.params;
   const portfolioId = params.slug;
 
+  const [baseline, propertyTypes] = await Promise.all([
+    loadBaselineMetrics(Number(portfolioId)),
+    getCountByPropertyType(Number(portfolioId)),
+  ]);
+
   return (
-    <>
-      <div className="flex justify-center">
-        <div>Reporting Page for portfolio: {portfolioId}</div>
+    <div className="max-w-8xl mx-auto px-6 pb-10 space-y-4 pt-4">
+      <div className="mb-6">
+        <header className="text-3xl font-semibold text-brandblue">
+          Portfolio Overview
+        </header>
+        <div className="h-px bg-gray-200 mt-2" />
       </div>
-    </>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
+        {/* LEFT SIDE: Portfolio Metrics */}
+        <DashboardSummaryCards
+          total={baseline.total}
+          averages={baseline.averages}
+        />
+
+        {/* RIGHT SIDE: Chart */}
+        <BreakdownChart
+          epcBands={baseline.epcBands}
+          ageBands={baseline.ageBands}
+          propertyTypes={propertyTypes}
+        />
+      </div>
+    </div>
   );
 }