// ============================================ // Detail drawers — StaffDetailDrawer, WorkDetailDrawer // ============================================ // Compute which works a staff appears in (as P / director / team member) function worksForStaff(staffId, works) { const out = []; works.forEach(w => { const roles = []; if (w.producer === staffId) roles.push("R001"); // プロデューサー if (w.director === staffId) roles.push("R005"); // 監督 (w.team || []).forEach(t => { if (t.staffId === staffId) roles.push(t.roleId); }); if (roles.length) out.push({ work: w, roles: Array.from(new Set(roles)) }); }); // sort by status: in_production, post_production, planning, completed const order = { in_production: 0, post_production: 1, planning: 2, on_hold: 3, completed: 4 }; out.sort((a, b) => (order[a.work.status] ?? 9) - (order[b.work.status] ?? 9)); return out; } // All team members (P + director + team) for a work function teamForWork(work) { const seen = new Set(); const out = []; const add = (staffId, roleId) => { const key = `${staffId}|${roleId}`; if (seen.has(key)) return; seen.add(key); out.push({ staffId, roleId }); }; if (work.producer) add(work.producer, "R001"); if (work.director && work.director !== "—") add(work.director, "R005"); (work.team || []).forEach(t => add(t.staffId, t.roleId)); return out; } // ====== Drawer shell ====== function Drawer({ open, onClose, children, width = 480 }) { useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose?.(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; return ( <>
{children}
); } // ====== Section block for drawers ====== function DrawerSection({ title, action, children }) { return (

{title}

{action}
{children}
); } // ====== Key/value row ====== function KV({ label, children }) { return (
{label}
{children}
); } // ============================================ // StaffDetailDrawer // ============================================ function StaffDetailDrawer({ staffId, staff, works, log, depts, roles, onClose, onEdit, onJumpToWork, canEdit }) { const s = staff.find(x => x.id === staffId); if (!s) return null; const assignments = useMemo(() => worksForStaff(staffId, works), [staffId, works]); const relevantLog = useMemo(() => log.filter(l => (l.entity === "staff" && l.entityId === staffId) || l.user === staffId).slice(0, 8) , [log, staffId]); const dept = DEPT_BY_ID[s.dept]; const yearsAgo = (() => { const d = new Date(s.joined); if (isNaN(d)) return null; const ms = Date.now() - d.getTime(); return (ms / (365.25 * 24 * 3600 * 1000)).toFixed(1); })(); return ( {/* Header */}
{s.code} {STAFF_STATUS[s.status].label}
{canEdit && }
{/* Body */}
{/* Identity */}

{s.lastName} {s.firstName}

{s.lastKana} {s.firstKana}
{/* Primary info */} {dept ? ( {dept.name} ({dept.code}) ) : —} {s.joined} {yearsAgo && （在籍 {yearsAgo} 年）} {s.note && ( {s.note} )} {/* Roles */} {s.roles && s.roles.length > 0 ? (
{s.roles.map(rid => { const r = ROLE_BY_ID[rid]; if (!r) return null; return (
{r.code} {r.name} {r.category} L{r.level}
); })}
) : 職種が設定されていません} {/* Assignments */} {assignments.length === 0 ? (
担当中の作品はありません
) : (
{assignments.map(({ work, roles: roleIds }) => ( ))}
)} {/* Activity */} {relevantLog.length === 0 ? (
該当する履歴がありません
) : (
{relevantLog.map(l => { const isSelf = l.entity === "staff" && l.entityId === staffId; return (
{l.action === "create" ? "作成" : l.action === "delete" ? "削除" : "更新"} {isSelf ? "本人情報の変更" : `${ENTITY_LABEL[l.entity]} ${l.entityId} を操作`}
{l.ts.slice(5, 16)}
{l.note &&
{l.note}
}
); })}
)}
); } // ============================================ // WorkDetailDrawer // ============================================ function WorkDetailDrawer({ workId, works, staff, log, onClose, onEdit, onJumpToStaff, canEdit }) { const w = works.find(x => x.id === workId); if (!w) return null; const teamList = useMemo(() => teamForWork(w), [w]); // group team by role category const byCat = useMemo(() => { const map = {}; teamList.forEach(t => { const r = ROLE_BY_ID[t.roleId]; const cat = r?.category || "その他"; (map[cat] = map[cat] || []).push(t); }); return map; }, [teamList]); const relevantLog = useMemo(() => log.filter(l => l.entity === "work" && l.entityId === workId).slice(0, 8) , [log, workId]); const days = (() => { if (!w.startDate || !w.endDate) return null; const s = new Date(w.startDate); const e = new Date(w.endDate); if (isNaN(s) || isNaN(e)) return null; return Math.round((e - s) / (24 * 3600 * 1000)); })(); const producer = STAFF_BY_ID[w.producer]; const director = STAFF_BY_ID[w.director]; return ( {/* Header */}
{w.code} {WORK_STATUS[w.status].label} {w.type}
{canEdit && }
{/* Title + key visual */}
KV

{w.title}

{w.titleEn}
{CLIENT_BY_ID[w.clientId]?.name || "—"} {CLIENT_BY_ID[w.clientId] && ( ({CLIENT_BY_ID[w.clientId].code}) )}
{w.tags && w.tags.length > 0 && (
{w.tags.map(t => {t})}
)}
{/* Quick stats */}
話数
{w.episodes}話
予算
¥{formatYen(w.budget)}
期間
{days || "—"}日
{w.startDate || "—"} {w.endDate || "—"} {WORK_STATUS[w.status].label} {/* Team */} 追加} > {teamList.length === 0 ? (
チームメンバーが登録されていません
) : (
{Object.entries(byCat).map(([cat, members]) => (
{cat}
{members.map((t, i) => { const s = STAFF_BY_ID[t.staffId]; const r = ROLE_BY_ID[t.roleId]; if (!s) return null; return ( ); })}
))}
)} {/* Activity */} {relevantLog.length === 0 ? (
該当する履歴がありません
) : (
{relevantLog.map(l => { const user = STAFF_BY_ID[l.user]; return (
{l.action === "create" ? "作成" : l.action === "delete" ? "削除" : "更新"} {l.field !== "—" ? `${l.field} を変更` : "情報の変更"}
{l.ts.slice(5, 16)}
{l.before !== "—" && l.after !== "—" && (
{l.before} → {l.after}
)} {l.note &&
{user ? `${user.lastName} ${user.firstName}` : l.user} · {l.note}
}
); })}
)}
); } Object.assign(window, { StaffDetailDrawer, WorkDetailDrawer, worksForStaff, teamForWork, });