From 3793a55b440fcab6f6a7dc7dbb6fe89afe2259ff Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Fri, 8 May 2026 11:13:57 +0000
Subject: [PATCH] make other documents collapsible

---
 .../live/PropertyDocumentsContent.tsx         | 24 +++++++++++++++----
 1 file changed, 19 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 298fdf1..102c2fb 100644
--- a/src/app/portfolio/[slug]/(portfolio)/your-projects/live/PropertyDocumentsContent.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/your-projects/live/PropertyDocumentsContent.tsx
@@ -163,6 +163,7 @@ export default function PropertyDocumentsContent({
 }: PropertyDocumentsContentProps) {
   const [uploadOpen, setUploadOpen] = useState(false);
   const [openMeasures, setOpenMeasures] = useState<Set<string>>(new Set());
+  const [otherOpen, setOtherOpen] = useState(false);
 
   const toggleMeasure = (measureName: string) =>
     setOpenMeasures((prev) => {
@@ -376,11 +377,24 @@ export default function PropertyDocumentsContent({
                     const unassigned = getUnassignedInstallDocs(installDocs, docStatus.measureProgress);
                     if (unassigned.length === 0) return null;
                     return (
-                      <div className="space-y-1.5">
-                        <h4 className="text-[10px] font-semibold uppercase tracking-wide text-gray-400 px-0.5">Other</h4>
-                        {unassigned.map((doc) => (
-                          <DocumentRow key={doc.id} doc={doc} showMeasure />
-                        ))}
+                      <div className="rounded-xl border border-gray-100 bg-gray-50/40 overflow-hidden">
+                        <button
+                          onClick={() => setOtherOpen((v) => !v)}
+                          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 ${otherOpen ? "rotate-90" : ""}`} />
+                            <span className="text-[10px] font-semibold uppercase tracking-wide text-gray-500">Other</span>
+                          </span>
+                          <span className="text-[10px] text-gray-400">{unassigned.length} doc{unassigned.length !== 1 ? "s" : ""}</span>
+                        </button>
+                        {otherOpen && (
+                          <div className="px-3 py-2.5 space-y-1.5 border-t border-gray-100">
+                            {unassigned.map((doc) => (
+                              <DocumentRow key={doc.id} doc={doc} showMeasure />
+                            ))}
+                          </div>
+                        )}
                       </div>
                     );
                   })()}