// ---------- Project Detail — the heart of HarborDock ---------- function initialsFromName(name) { return (name || "") .replace(/\/.*/, "") .split(/\s+/) .filter(Boolean) .map((part) => part[0]) .slice(0, 2) .join("") .toUpperCase() || "HD"; } function getProjectDetail(projectId) { const base = HD.projects.find((project) => project.id === projectId); if (!base || base.id === HD.projectDetail.id) return HD.projectDetail; return { ...HD.projectDetail, ...base, agency: HD.projectDetail.agency, synopsis: `${base.name} is currently in ${base.phase || base.statusLabel}. This demo uses the shared review workspace template until live project detail records are connected.`, reviewers: [ { name: base.client, role: "Client lead", initials: initialsFromName(base.client), accent: base.accent, }, ], drafts: HD.projectDetail.drafts.map((draft) => ({ ...draft, note: draft.id === "d1" ? `${base.phase || base.statusLabel} review package` : draft.note, })), comments: HD.projectDetail.comments.map((comment) => ({ ...comment, id: `${base.id}-${comment.id}`, })), }; } const ProjectDetailPage = ({ projectId, onBack, onNavigate, onOpenMobileMenu }) => { const project = getProjectDetail(projectId); const [tab, setTab] = React.useState("overview"); const tabs = [ { id: "overview", label: "Overview" }, { id: "uploads", label: "Uploads", count: project.uploads.length }, { id: "drafts", label: "Drafts", count: project.drafts.length }, { id: "comments", label: "Comments", count: project.comments.length }, { id: "revisions",label: "Revisions", count: project.revisions.length }, { id: "deliverables", label: "Deliverables", count: project.deliverables.length }, ]; return (
} tabs={tabs} activeTab={tab} onTabChange={setTab} />
{/* Project header band */} {tab === "overview" && } {tab === "uploads" && } {tab === "drafts" && } {tab === "comments" && } {tab === "revisions" && } {tab === "deliverables" && }
); }; const ProjectHeaderBand = ({ project }) => { const tone = STATUS_TONES[project.accent]; return (
{/* Thumb */}
{Array.from({ length: 16 }).map((_, i) => { const y = 10 + i * 12; return ; })}
02:18
{project.code} · {project.type}

{project.synopsis}

{/* Header stats */}
); }; const HeaderStat = ({ label, value, sub }) => (
{label}
{value}
{sub &&
{sub}
}
); // =========== OVERVIEW TAB =========== const OverviewTab = ({ project, setTab }) => (
{/* Production timeline */}
{project.timeline.map((t, i) => (
{t.state === "done" && ( )}
{t.title}
{t.date}
))}
{/* Latest draft + comments preview */}
CURRENT REVIEW
Cut 03 — Hero film
 {/* Recent comments preview */}
FROM THE CLIENT
Latest comments
{project.comments.slice(0, 3).map((c, i) => ( ))}
{/* Right rail */}
{project.team.map(p => (
{p.name}
{p.role}
))}
CLIENT REVIEWERS
{project.reviewers.map(p => (
{p.name}
{p.role}
))}
c.state === "open").length} threads`} tone="amber" detail="3 awaiting reply" />
window.dispatchEvent(new CustomEvent("hd-share-portal", { detail: { clientId: project.clientId } }))} />
); const Pulse = ({ label, value, tone, detail }) => { const t = STATUS_TONES[tone]; return (
{label} {value}
{detail}
); }; const QuickLink = ({ iconName, title, sub, onClick }) => { const IconComp = window.Icon[iconName]; return ( ); }; // =========== VIDEO REVIEW PLAYER =========== const ReviewPlayer = ({ project }) => { const [playing, setPlaying] = React.useState(false); const [progress, setProgress] = React.useState(33); // Comment markers along the scrubber const markers = project.comments.map(c => { const [m, s] = c.time.split(":").map(Number); const seconds = m * 60 + s; const pct = (seconds / 138) * 100; // 02:18 total return { ...c, pct }; }); return (
{/* Player surface */}
{/* Topographic lines */} {Array.from({ length: 24 }).map((_, i) => { const y = 10 + i * 20; return ; })} {/* Active comment pin */}
2
{/* Play overlay */} {/* Top right meta */}
3840 × 2160 · ProRes
{/* Top left */}
{/* Scrubber + comment markers */}
00:45 {/* Track */}
{/* Comment markers */} {markers.map(m => (
))} {/* Playhead */}
02:18
{/* Comment input */}
@ to mention
); }; // =========== UPLOADS TAB =========== const UploadsTab = ({ project }) => { const [view, setView] = React.useState("grid"); return (
{/* Intake widget */}
setView("grid")} iconName="Grid" label="" /> setView("list")} iconName="List" label="" />
{view === "grid" ? (
{project.uploads.map(u => )}
) : (
{project.uploads.map((u, i) => )}
)}
); }; const IntakeStat = ({ label, value, detail, tone }) => { const t = STATUS_TONES[tone]; return (
{label}
{value}
{detail}
); }; const TYPE_ICONS = { video: "Film", image: "Image", audio: "Mic", doc: "File" }; const TYPE_ACCENTS = { video: "harbor", image: "amber", audio: "lavender", doc: "teal" }; const UploadCard = ({ upload }) => { const tone = STATUS_TONES[TYPE_ACCENTS[upload.type]]; const IconComp = window.Icon[TYPE_ICONS[upload.type]]; return (
{Array.from({ length: 12 }).map((_, i) => { const y = 14 + i * 16; return ; })}
{upload.size}
{upload.name}
s[0]).slice(0,2).join("")} accent={tone === STATUS_TONES.harbor ? "harbor" : "neutral"} size={16} /> {upload.uploader} · {upload.at.split(",")[0]}
{upload.note && (
“{upload.note}”
)}
); }; const UploadRow = ({ upload, last }) => { const tone = STATUS_TONES[TYPE_ACCENTS[upload.type]]; const IconComp = window.Icon[TYPE_ICONS[upload.type]]; return (
{upload.name}
{upload.note &&
{upload.note}
}
{upload.uploader}
{upload.at}
{upload.size}
); }; const DropZone = () => (
Drop assets to upload
Or paste a Frame.io / Drive link
); // =========== DRAFTS TAB =========== const DraftsTab = ({ project }) => { const [selected, setSelected] = React.useState(project.drafts[0].id); const active = project.drafts.find(d => d.id === selected); return (
{/* Version history */}
{project.drafts.map(d => ( ))}
{/* Active draft player */}
NOW REVIEWING
{active.version} · {active.duration}
); }; // =========== COMMENTS TAB =========== const CommentsTab = ({ project }) => { const [filter, setFilter] = React.useState("all"); const [comments, setComments] = React.useState(project.comments); const [composer, setComposer] = React.useState(""); const filtered = comments.filter(c => filter === "all" || c.state === filter); const post = () => { if (!composer.trim()) return; const newC = { id: `c${Date.now()}`, author: "Winterhill Media", initials: "WM", role: "agency", time: "00:45", body: composer.trim(), state: "open", at: "just now", replies: 0, }; setComments([...comments, newC]); setComposer(""); window.ToastEvents.emit({ kind: "success", title: "Comment posted", body: `Reply timestamped at 00:45.`, }); }; const toggleResolve = (id) => { setComments(comments.map(c => c.id === id ? { ...c, state: c.state === "open" ? "resolved" : "open" } : c)); const c = comments.find(x => x.id === id); if (c) window.ToastEvents.emit({ kind: "info", title: c.state === "open" ? "Comment resolved" : "Comment reopened", body: c.body.slice(0, 64) + (c.body.length > 64 ? "…" : "") }); }; return (
setFilter("all")}>All setFilter("open")} tone="amber">Open setFilter("resolved")} tone="green">Resolved
{filtered.map((c, i) => )}
{/* Compose */}