// ---------- Projects list — card + table toggle ---------- const ProjectsPage = ({ onOpenProject, onOpenMobileMenu }) => { const [view, setView] = React.useState("card"); const [filter, setFilter] = React.useState("all"); const [clientFilter, setClientFilter] = React.useState("all"); const [sort, setSort] = React.useState("updated"); const SORT_OPTIONS = [ { id: "updated", label: "Recently updated" }, { id: "due-asc", label: "Due soonest" }, { id: "due-desc", label: "Due latest" }, { id: "progress", label: "Most progressed" }, { id: "name", label: "Name A → Z" }, ]; const filtered = React.useMemo(() => { let list = HD.projects.slice(); if (filter !== "all") list = list.filter(p => p.status === filter); if (clientFilter !== "all") list = list.filter(p => p.clientId === clientFilter); const dueRank = (d) => { if (d === "—") return 999; if (d === "Done") return 998; const m = d.match(/(\d+)d/); if (m) return parseInt(m[1]); const m2 = d.match(/^(\d+)/); if (m2) return parseInt(m2[1]); return 500; }; if (sort === "due-asc") list.sort((a, b) => dueRank(a.dueIn) - dueRank(b.dueIn)); else if (sort === "due-desc") list.sort((a, b) => dueRank(b.dueIn) - dueRank(a.dueIn)); else if (sort === "progress") list.sort((a, b) => b.progress - a.progress); else if (sort === "name") list.sort((a, b) => a.name.localeCompare(b.name)); // 'updated' = original order return list; }, [filter, clientFilter, sort]); return (
} onClick={() => window.dispatchEvent(new CustomEvent("hd-open-new-project"))}> New project } />
{/* Filter bar */}
setFilter("all")}>All {HD.projects.length} setFilter("review")} tone="harbor">In review setFilter("revision")} tone="amber">Revision setFilter("uploading")} tone="teal">Client upload setFilter("approved")} tone="green">Approved setFilter("drafting")} tone="lavender">Drafting
c.id === clientFilter)?.name?.split(" /")[0] || "All"} options={[{ id: "all", label: "All clients" }, ...HD.clients.map(c => ({ id: c.id, label: c.name }))]} onSelect={(id) => setClientFilter(id)} /> s.id === sort)?.label || "Updated"} options={SORT_OPTIONS} onSelect={(id) => setSort(id)} />
setView("card")} iconName="Grid" label="Cards" /> setView("table")} iconName="List" label="Table" />
{/* Results */} {filtered.length === 0 ? ( { setFilter("all"); setClientFilter("all"); }}>Clear filters} /> ) : view === "card" ? (
{filtered.map(p => onOpenProject(p.id)} />)}
) : ( )}
); }; const FilterChip = ({ children, active, onClick, tone = "neutral" }) => { const t = STATUS_TONES[tone]; return ( ); }; const FilterSelect = ({ label, value }) => ( ); // Real dropdown — controlled const Dropdown = ({ label, value, options, onSelect }) => { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [open]); return (
{open && (
{options.map(o => ( ))}
)}
); }; const ViewToggle = ({ active, onClick, iconName, label }) => { const IconComp = window.Icon[iconName]; return ( ); }; const ProjectCard = ({ project, onClick }) => { const tone = STATUS_TONES[project.accent]; return ( {/* Thumb */}
{Array.from({ length: 14 }).map((_, i) => { const y = 14 + i * 14; return ; })}
{project.code}
{project.type.toUpperCase()}
{project.name}
{project.client}
{project.phase} {project.progress}%
{project.due} · {project.dueIn}
); }; const MetaItem = ({ iconName, value, unread = 0 }) => { const IconComp = window.Icon[iconName]; return (
{value} {unread > 0 && {unread}}
); }; const ProjectTable = ({ projects, onOpenProject }) => (
Project Client Status Progress Comments Due Updated
{projects.map(p => { const tone = STATUS_TONES[p.accent]; return (
onOpenProject(p.id)} className="hd-row" style={{ display: "grid", gridTemplateColumns: "30px minmax(0,2fr) minmax(0,1.4fr) 110px 130px 90px 90px 110px", gap: 12, padding: "14px 20px", borderBottom: "1px solid rgba(255,255,255,0.03)", cursor: "pointer", alignItems: "center", transition: "background 120ms ease", }} >
{p.name}
{p.code}
{p.client}
{p.progress}%
{p.comments} {p.unread > 0 && · {p.unread} new}
{p.due}
{p.updated}
); })} ); window.ProjectsPage = ProjectsPage;