junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-08 11:37:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

collapsed measures section

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2026-05-08 11:06:01 +00:00
parent 2bff0357c6
commit 011c3ec2c1
1 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/app/portfolio/[slug]/(portfolio)/your-projects/live/PropertyDocumentsContent.tsx
View file

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