From 011c3ec2c1ed539dbdc2889834e99410e2d21015 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Fri, 8 May 2026 11:06:01 +0000
Subject: [PATCH] collapsed measures section

---
 .../live/PropertyDocumentsContent.tsx         | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/your-projects/live/PropertyDocumentsContent.tsx b/src/app/portfolio/[slug]/(portfolio)/your-projects/live/PropertyDocumentsContent.tsx
index 6c6d2bb..298fdf1 100644
--- a/src/app/portfolio/[slug]/(portfolio)/your-projects/live/PropertyDocumentsContent.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/your-projects/live/PropertyDocumentsContent.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { motion, AnimatePresence } from "framer-motion";
 import {
+  ChevronRight,
   FileDown,
   FileText,
   FileX,
@@ -161,6 +162,14 @@ export default function PropertyDocumentsContent({
   approvedMeasures,
 }: PropertyDocumentsContentProps) {
   const [uploadOpen, setUploadOpen] = useState(false);
+  const [openMeasures, setOpenMeasures] = useState<Set<string>>(new Set());
+
+  const toggleMeasure = (measureName: string) =>
+    setOpenMeasures((prev) => {
+      const next = new Set(prev);
+      next.has(measureName) ? next.delete(measureName) : next.add(measureName);
+      return next;
+    });
 
   const { retrofitDocs, installDocs } = splitDocumentsByType(documents);
   const missingRetrofitTypes = getMissingRetrofitTypes(retrofitDocs);
@@ -291,10 +300,17 @@ export default function PropertyDocumentsContent({
                     const uploadedTypeSet = new Set(measureDocs.map((d) => d.docType));
                     const missingTypes = mp.required.filter((t) => !uploadedTypeSet.has(t));
 
+                    const isOpen = openMeasures.has(mp.measureName);
                     return (
                       <div key={mp.measureName} className="rounded-xl border border-gray-100 bg-gray-50/40 overflow-hidden">
-                        <div className="flex items-center justify-between px-3 py-2.5 border-b border-gray-100 bg-white">
-                          <span className="text-xs font-semibold text-gray-800">{mp.measureName}</span>
+                        <button
+                          onClick={() => toggleMeasure(mp.measureName)}
+                          className="w-full flex items-center justify-between px-3 py-2.5 bg-white hover:bg-gray-50 transition-colors text-left"
+                        >
+                          <span className="flex items-center gap-2">
+                            <ChevronRight className={`h-3.5 w-3.5 text-gray-400 transition-transform duration-150 ${isOpen ? "rotate-90" : ""}`} />
+                            <span className="text-xs font-semibold text-gray-800">{mp.measureName}</span>
+                          </span>
                           <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border ${
                             mp.isComplete
                               ? "bg-emerald-50 text-emerald-700 border-emerald-200"
@@ -304,8 +320,8 @@ export default function PropertyDocumentsContent({
                           }`}>
                             {mp.uploadedCount} / {mp.requiredCount} docs
                           </span>
-                        </div>
-                        <div className="px-3 py-2.5 space-y-1.5">
+                        </button>
+                        {isOpen && <div className="px-3 py-2.5 space-y-1.5 border-t border-gray-100">
                           {mp.uploaded.map((docType) => {
                             const doc = measureDocs.find((d) => d.docType === docType);
                             if (!doc) return null;
@@ -350,7 +366,7 @@ export default function PropertyDocumentsContent({
                                 <DownloadDocButton doc={doc} />
                               </div>
                             ))}
-                        </div>
+                        </div>}
                       </div>
                     );
                   })}