// Portfolio screen — Sprint B Phase 2 · executive-first project overview. // Also registers a tiny placeholder for `/brief/:id` so clicks don't 404 // — the real Brief screen lands in Sprint B Phase 3. // Mobile-first: card view default below 1024px, list view above. // View toggle: List · Card · Gantt (reuses window.Gantt — no new timeline engine). // Sort: starred → due_date → priority → progress (via window.byPortfolio from B-1). // Click any project → /brief/:id (Project Brief screen lands in B-3). (function () { window.SCREENS = window.SCREENS || {}; const { useState, useEffect } = React; const IC = window.IC, D = window.DATA; // ── Helpers ───────────────────────────────────────────────── const sm = D.statusMeta, pm = D.priorityMeta; const sortByDateDesc = window.sortByDateDesc || ((a) => a.slice()); function isMobile() { try { return window.matchMedia && !window.matchMedia("(min-width: 1024px)").matches; } catch (e) { return true; } } function latestUpdateOf(p) { const ups = (D.updates || []).filter((u) => u.projectId === p.id || u.project === p.name); return sortByDateDesc(ups)[0] || null; } function nextStepOf(p) { // D.nextSteps may not exist on this branch (Sprint A asset) — handle gracefully const steps = (D.nextSteps || []).filter((s) => s.projectId === p.id && (s.status === "pending" || s.status === "in_progress")); return steps[0] || null; // already sorted by byNextStep at the data layer } function dueLabel(p) { if (!p.end) return "ไม่กำหนด"; return window.isoToBE ? window.isoToBE(p.end) : p.end; } function dueTone(p) { if (!p.end) return "neutral"; const today = window.todayISO ? window.todayISO() : new Date().toISOString().slice(0,10); if (p.end < today) return "danger"; const ms = new Date(p.end + "T00:00:00") - new Date(today + "T00:00:00"); const days = ms / 86400000; if (days <= 14) return "warn"; return "ok"; } // ── Reusable star button (works desktop + mobile; tap target ≥ 40px) ── function StarButton({ p, canEdit }) { const [busy, setBusy] = useState(false); const onClick = async (e) => { e.preventDefault(); e.stopPropagation(); if (busy || !canEdit) return; setBusy(true); try { await window.DB.toggleProjectStar(p.id); } finally { setBusy(false); } }; if (!canEdit) { // Read-only: show filled star only when starred; nothing when not return p.starred ? ★ : ; } return ( ); } // ── Card view (default on mobile, optional on desktop) ───────────────── function CardView({ projects, canEdit }) { if (projects.length === 0) { return window.navigate("projects") : undefined} />; } return (
{projects.map((p) => { const upd = latestUpdateOf(p); const ns = nextStepOf(p); const dTone = dueTone(p); const dLabel = dueLabel(p); const open = () => window.navigate("brief/" + p.id); return (
{ if (e.key === "Enter") open(); }}> {/* head: star + code + name + status + health */}
e.stopPropagation()}>
{p.code} · {(sm[p.status] || {}).th || p.status}
{p.name}
{(() => { const h = window.computeHealthScore ? window.computeHealthScore(p, (D.detail && D.detail[p.id]) || {}) : null; return h ? {h.score} : null; })()}
{/* progress */}
Progress{p.progress || 0}%
{/* 5 fields */}
{IC.trend} อัปเดต {upd ? (<>{upd.title}
{upd.date}) : "ยังไม่มีอัปเดต"} {IC.check} Next {ns ? (<>{ns.title}
{ns.dueDate ? "ครบกำหนด " + (window.isoToBE ? window.isoToBE(ns.dueDate) : ns.dueDate) : "ไม่กำหนด"}) : "ยังไม่มี Next Step"} {IC.cal} ส่งมอบ {dLabel} {IC.user} เจ้าของ {p.owner ? <>{p.ownerInit || (p.owner || "?").slice(0,2)}{p.owner} : ไม่ระบุ}
); })}
); } // ── List view (table-like, dense; default on desktop) ───────────────── function ListView({ projects, canEdit }) { if (projects.length === 0) { return window.navigate("projects") : undefined} />; } const headerCell = { fontSize: 11.5, fontWeight: 700, color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".04em", padding: "10px 12px", textAlign: "left" }; const cell = { padding: "12px", fontSize: 13.5, verticalAlign: "top", borderTop: "1px solid var(--line-soft)" }; return (
{projects.map((p) => { const upd = latestUpdateOf(p); const ns = nextStepOf(p); const dTone = dueTone(p); const open = () => window.navigate("brief/" + p.id); return ( ); })}
โครงการ Progress อัปเดตล่าสุด Next Step ส่งมอบ เจ้าของ
e.stopPropagation()}>
{p.code}
{p.name}
{(sm[p.status]||{}).th || p.status} {(() => { const h = window.computeHealthScore ? window.computeHealthScore(p, (D.detail && D.detail[p.id]) || {}) : null; return h ? {h.score} {h.label} : null; })()}
{p.progress || 0}%
{upd ? (<>{upd.title}
{upd.date}
) : ยังไม่มีอัปเดต} 		{ns ? (<>{ns.title}
{ns.dueDate ? "ครบกำหนด " + (window.isoToBE ? window.isoToBE(ns.dueDate) : ns.dueDate) : "ไม่กำหนด"}
) : ยังไม่มี Next Step} 		{dueLabel(p)} {p.owner ?
{p.ownerInit || (p.owner || "?").slice(0,2)}{p.owner}
: ไม่ระบุ}
); } // ── Gantt view — reuses window.Gantt with synthetic project-as-phase entries ─ // Each project becomes a "phase". onPhaseClick navigates to Brief. function statusToPhaseStatus(s) { if (s === "in_progress") return "active"; if (s === "completed") return "done"; if (s === "at_risk" || s === "blocked") return "at_risk"; return "todo"; } function GanttView({ projects }) { if (projects.length === 0) { return ; } // Compute global window: earliest start → latest end let minStart = "", maxEnd = ""; for (const p of projects) { if (p.start && (!minStart || p.start < minStart)) minStart = p.start; if (p.end && (!maxEnd || p.end > maxEnd)) maxEnd = p.end; } if (!minStart) minStart = window.todayISO ? window.todayISO() : new Date().toISOString().slice(0,10); if (!maxEnd) maxEnd = minStart; const startISO = minStart; const totalDays = Math.max(60, window.isoToDay ? window.isoToDay(maxEnd, startISO) : 365); const today = window.isoToDay ? Math.max(0, Math.min(totalDays, window.isoToDay(window.todayISO ? window.todayISO() : new Date().toISOString().slice(0,10), startISO))) : 0; const phases = projects.map((p) => { const s = window.isoToDay ? Math.max(0, window.isoToDay(p.start || startISO, startISO)) : 0; const e = window.isoToDay ? Math.max(s, window.isoToDay(p.end || maxEnd, startISO)) : totalDays; return { id: p.id, name: p.name, en: p.code, owner: p.owner || "", ownerInit: p.ownerInit || (p.owner || "?").slice(0,2), status: statusToPhaseStatus(p.status), progress: p.progress || 0, s, e, startISO: p.start, endISO: p.end, tasks: [], _project: p, }; }); return (
คลิกชื่อโครงการเพื่อเปิดบรีฟ
กำลังทำ เสร็จ ยังไม่เริ่ม
window.navigate("brief/" + ph.id)} />
); } // ── Placeholder: /brief/:id will be implemented in B-3 ────── // Until then, navigating from a Portfolio click shows this stub so the // route is recognised + the user knows it's pending. window.SCREENS.brief = function BriefPlaceholder({ route }) { const p = (D.projects || []).find((x) => x.id === route.id); if (!p) { return
ไม่พบโครงการ
; } return (
{IC.chevL} กลับ Portfolio
Brief · กำลังพัฒนา (B-3)

{p.name}

หน้า Project Brief จะถูกพัฒนาในเฟส B-3

ระหว่างนี้สามารถเปิดมุมมองรายละเอียดได้ที่:

เปิดคอนโซลผู้ดูแล (Admin Detail) →
); }; // ── Main screen ───────────────────────────────────────────── window.SCREENS.portfolio = function PortfolioScreen() { window.useLiveData(); const [view, setView] = useState(() => isMobile() ? "card" : "list"); const [q, setQ] = useState(""); const canEdit = window.can ? window.can("editProject") : false; // Active projects (not completed) — sorted by byPortfolio const all = D.projects || []; const active = all.filter((p) => p.status !== "completed"); const sorted = window.sortPortfolio ? window.sortPortfolio(active) : active.slice(); const list = q.trim() ? sorted.filter((p) => (p.name + " " + (p.code || "") + " " + (p.owner || "")).toLowerCase().includes(q.toLowerCase())) : sorted; const starredCt = active.filter((p) => p.starred).length; const overdueCt = active.filter((p) => p.end && p.end < (window.todayISO ? window.todayISO() : "")).length; return (
Portfolio

โครงการ ({active.length})

{starredCt > 0 && <>★ ปักหมุด {starredCt} · } {overdueCt > 0 && เลยกำหนด {overdueCt} · } เรียงโดยการปักหมุด · กำหนดส่ง · ความสำคัญ · ความคืบหน้า

{IC.search} setQ(e.target.value)} placeholder="ค้นหาโครงการ, รหัส, เจ้าของ…" style={{ border: 0, background: "none", outline: "none", font: "inherit", fontSize: 14, flex: 1, color: "var(--ink)", height: 40 }} />
{q.trim() && list.length === 0 && ( )} {(!q.trim() || list.length > 0) && (
{view === "list" && } {view === "card" && } {view === "gantt" && }
)}
); }; })();