restructured measures button

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

@@ -7,6 +7,7 @@ import { DashboardSummaryCards } from "./DashboardSummaryCards";
 import { BreakdownChart } from "./BreakdownChart";
 import { EpcQualityCards } from "./EpcQualityCards";
 import { ScenarioFinancialDrawer } from "./ScenarioFinancialDrawer";
+import { ScenarioMeasuresModal } from "./ScenarioMeasuresModal";
 
 import { SectionDivider } from "@/app/portfolio/[slug]/(portfolio)/reporting/SectionDivider";
 import {
@@ -48,6 +49,24 @@ async function fetchScenarioReport({
   return res.json();
 }
 
+async function fetchScenarioMeasures({
+  portfolioId,
+  scenarioId,
+}: {
+  portfolioId: number;
+  scenarioId: number;
+}) {
+  const res = await fetch(
+    `/api/portfolio/${portfolioId}/scenario/${scenarioId}/measures`
+  );
+
+  if (!res.ok) {
+    throw new Error("Failed to load measures");
+  }
+
+  return res.json();
+}
+
 export function ReportingClientArea({
   baseline,
   propertyTypes,
@@ -57,6 +76,7 @@ export function ReportingClientArea({
   const [selectedScenarioId, setSelectedScenarioId] = useState<number | null>(
     null
   );
+  const [measuresOpen, setMeasuresOpen] = useState<boolean>(false);
 
   const drawerOpen = Boolean(selectedScenarioId);
 
@@ -77,6 +97,22 @@ export function ReportingClientArea({
     enabled: !!selectedScenarioId, // only run when scenario selected
   });
 
+  const {
+    data: measuresData,
+    isLoading: measuresLoading,
+    isError: measuresError,
+  } = useQuery({
+    queryKey: ["scenario-measures", portfolioId, selectedScenarioId],
+    queryFn: () =>
+      fetchScenarioMeasures({
+        portfolioId,
+        scenarioId: selectedScenarioId!,
+      }),
+    enabled: measuresOpen && !!selectedScenarioId,
+  });
+
+  const scenarioLoading = isLoading && !!selectedScenarioId;
+
   // ----------------------------------------
   // Build overlay for Dashboard Summary cards
   // ----------------------------------------
@@ -158,13 +194,18 @@ export function ReportingClientArea({
         {selectedScenarioId && (
           <div className="flex items-center gap-2">
             <button
-              onClick={() => {
-                // placeholder – wire this up to your measures UI
-                console.log("Show measures for scenario", selectedScenarioId);
-              }}
-              className="rounded-md border px-3 py-2 text-sm font-medium hover:bg-hoverblue bg-brandblue text-gray-100"
+              onClick={() => setMeasuresOpen(true)}
+              disabled={scenarioLoading}
+              className={`
+        rounded-md px-3 py-2 text-sm font-medium transition
+        ${
+          scenarioLoading
+            ? "bg-gray-200 text-gray-400 cursor-not-allowed"
+            : "bg-brandblue text-white hover:bg-hoverblue"
+        }
+      `}
             >
-              Show measures
+              {scenarioLoading ? "Loading…" : "Show measures"}
             </button>
 
             <button
@@ -174,7 +215,15 @@ export function ReportingClientArea({
                   "_blank"
                 );
               }}
-              className="rounded-md border px-3 py-2 text-sm font-medium hover:bg-gray-50"
+              disabled={scenarioLoading}
+              className={`
+        rounded-md border px-3 py-2 text-sm font-medium transition
+        ${
+          scenarioLoading
+            ? "border-gray-200 text-gray-400 cursor-not-allowed"
+            : "hover:bg-gray-50"
+        }
+      `}
             >
               Download PDF
             </button>
@@ -239,6 +288,14 @@ export function ReportingClientArea({
         subtitle="Total bills, cost exposure, and potential funding pathways."
       />
       <PlaceholderMetricCards items={FINANCIAL_PLACEHOLDERS} />
+
+      <ScenarioMeasuresModal
+        isOpen={measuresOpen}
+        onClose={() => setMeasuresOpen(false)}
+        isLoading={measuresLoading}
+        data={measuresData ?? null}
+        error={measuresError}
+      />
     </>
   );
 }