make other documents collapsible

This commit is contained in:
Khalim Conn-Kowlessar 2026-05-08 11:13:57 +00:00
parent 011c3ec2c1
commit 3793a55b44

View file

@ -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>
);
})()}