// screen_workorders.jsx — Kanban with drag-drop, intake modal, routed card detail, filter (function () { const { useState, useRef, useEffect } = React; const h = React.createElement; window.Screens = window.Screens || {}; const COLS = [ { id: "Intake", color: "#6b7280" }, { id: "Planning", color: "#2f7fe0" }, { id: "Running", color: "#6f5be6" }, { id: "Needs Approval", color: "#d98a12" }, { id: "Completed", color: "#12a877" }, ]; const ORDER = COLS.map((c) => c.id); const COLUMN_LABELS = { Intake: "New", Planning: "Plan", Running: "In progress", "Needs Approval": "Needs approval", Completed: "Done", }; function columnLabel(id) { return COLUMN_LABELS[id] || id; } // deep-clone the seed once so edits in this screen don't mutate the global seed permanently across remounts function seed(ctx) { return JSON.parse(JSON.stringify(window.deriveDashboardData(ctx.office).workOrders)); } const ROLE_SKILL_AREA = { clerk: "operations", cs: "customer-service", sales: "sales", social: "communications", acct: "finance" }; const TOPIC_AREA = [ { area: "customer-service", words: ["customer", "refund", "complaint", "support", "warranty", "reply", "service", "case"] }, { area: "finance", words: ["invoice", "receipt", "spend", "payment", "finance", "account", "bank", "roi"] }, { area: "sales", words: ["quote", "sales", "rfp", "pitch", "proposal", "lead", "upsell", "order"] }, { area: "communications", words: ["post", "social", "media", "campaign", "content", "announcement", "blog"] }, { area: "operations", words: ["supplier", "upload", "file", "process", "policy", "operations", "handoff", "schedule"] }, ]; function normWorkOrderText(v) { return String(v || "").toLowerCase().replace(/[^a-z0-9]+/g, " ").trim(); } function workOrderPreferredArea(wo) { const hay = normWorkOrderText((wo && wo.title) || ""); const topic = TOPIC_AREA.find((t) => t.words.some((w) => hay.indexOf(w) >= 0)); return (topic && topic.area) || ROLE_SKILL_AREA[wo && wo.emp] || "operations"; } function scoreWorkOrderSkill(skill, wo) { const hay = normWorkOrderText([skill.title, skill.summary, skill.area, (skill.products || []).join(" ")].join(" ")); const terms = normWorkOrderText((wo && wo.title) || "").split(" ").filter((w) => w.length > 3); let score = skill.areaSlug === workOrderPreferredArea(wo) ? 20 : 0; terms.forEach((w) => { if (hay.indexOf(w) >= 0) score += 3; }); if (/complaint|refund|warranty|customer/.test(normWorkOrderText((wo && wo.title) || "")) && /complaint|support|service|customer/.test(hay)) score += 10; if (/invoice|receipt|spend|payment/.test(normWorkOrderText((wo && wo.title) || "")) && /finance|accounting|spend|invoice/.test(hay)) score += 10; if (/quote|rfp|proposal|pitch/.test(normWorkOrderText((wo && wo.title) || "")) && /sales|rfp|pitch|proposal/.test(hay)) score += 10; return score; } function suggestWorkOrderSkills(wo, limit) { const skills = window.SCENARIO_SKILLS || []; return skills.slice().sort((a, b) => scoreWorkOrderSkill(b, wo) - scoreWorkOrderSkill(a, wo)).slice(0, limit || 4); } function suggestWorkOrderSkill(wo) { return suggestWorkOrderSkills(wo, 1)[0] || null; } window.suggestWorkOrderSkill = suggestWorkOrderSkill; window.suggestWorkOrderSkills = suggestWorkOrderSkills; function WOCard({ wo, ctx, onOpen, onDragStart, onDragEnd, dragging }) { const { Avatar, RiskBadge, FutureStep } = window; const e = window.deriveDashboardData(ctx.office).emp(wo.emp); const translate = (value) => window.I18N && window.I18N.t ? window.I18N.t(value) : value; const cardAria = window.I18N && window.I18N.format ? window.I18N.format("Open task {id}: {title}. Assigned to {name}. Status: {step}.", { id: wo.id, title: translate(wo.title), name: translate(e.short), step: translate(columnLabel(wo.step || wo.col)), }) : "Open task " + wo.id + ": " + wo.title + ". Assigned to " + e.short + ". Status: " + columnLabel(wo.step || wo.col) + "."; const canWorkOrder = !ctx.can || ctx.can("workOrder"); const tone = wo.risk === "High" ? "red" : wo.risk === "Medium" ? "amber" : "blue"; const wf = wo.workflow || null; const wfDone = wf ? (wf.completedSteps || []).length : 0; const wfTotal = wf ? (wf.totalSteps || 1) : 1; const wfPct = Math.round((wfDone / wfTotal) * 100); const openFromKeyboard = (ev) => { if (ev.key !== "Enter" && ev.key !== " ") return; ev.preventDefault(); onOpen(wo); }; return h("div", { className: "glass glass-hover wo-card" + (dragging ? " dragging" : ""), draggable: canWorkOrder, role: "button", tabIndex: 0, "data-workorder-card": wo.id, "data-workorder-id": wo.id, "data-workorder-column": wo.col || "", "data-workorder-risk-level": wo.risk || "", "data-workorder-assignee": wo.emp || "", "data-workorder-dragging": dragging ? "true" : "false", "data-workorder-draggable": canWorkOrder ? "true" : "false", "data-workorder-keyboard": "true", onDragStart: (ev) => { if (!canWorkOrder) { ev.preventDefault(); return; } onDragStart(ev, wo); }, onDragEnd, onClick: () => onOpen(wo), onKeyDown: openFromKeyboard, title: "Open task details.", "aria-label": cardAria, style: { padding: 13, borderRadius: 12, cursor: canWorkOrder ? "grab" : "pointer" } }, h("div", { className: "row between", style: { marginBottom: 8 } }, h("span", { className: "mono", style: { fontSize: 11, color: "var(--text-faint)", fontWeight: 600 } }, wo.id), h(RiskBadge, { level: wo.risk })), h("div", { style: { fontSize: 13.5, fontWeight: 600, lineHeight: 1.35, marginBottom: 11, letterSpacing: "-0.01em" } }, wo.title), wf && h("div", { style: { marginBottom: 11 } }, h("div", { className: "row between", style: { marginBottom: 4, fontSize: 11 } }, h("span", { className: "faint" }, "Steps"), h("span", { className: "mono", style: { fontWeight: 700, color: wfPct >= 100 ? "var(--green)" : "var(--blue-deep)" } }, wfDone + "/" + wf.totalSteps)), h(window.ProgressBar, { value: wfPct, tone: wfPct >= 100 ? "green" : "blue", height: 5 })), wo.conf > 0 && h("div", { style: { marginBottom: 11 } }, h("div", { className: "row between", style: { marginBottom: 4, fontSize: 11 } }, h("span", { className: "faint" }, "Ready"), h("span", { className: "mono", style: { fontWeight: 700, color: wo.conf >= 85 ? "var(--green)" : "var(--amber)" } }, wo.conf + "%")), h(window.ProgressBar, { value: wo.conf, tone: wo.conf >= 85 ? "green" : "amber", height: 5 })), h("div", { className: "row between", style: { fontSize: 11.5, color: "var(--text-faint)" } }, h("span", { className: "row gap8" }, h(window.Face, { roleId: e.id, size: 22, variant: "head" }), h("span", { style: { fontWeight: 500 } }, e.short)), h("span", { className: "row gap4" }, h(window.Icon, { name: "clock", size: 12 }), wo.sla)), h("div", { style: { marginTop: 9, paddingTop: 9, borderTop: "1px solid var(--border)", fontSize: 11.5, color: "var(--text-dim)" } }, wo.step)); } // ---------- New task intake modal ---------- function IntakeModal({ onClose, onCreate, ctx }) { const { Modal, Button, Avatar, Segmented, FutureStep } = window; const emps = window.deriveDashboardData(ctx.office).employees; const activeEmps = emps.filter((e) => { const role = ctx.office.roleById && ctx.office.roleById[e.id]; return role && role.hired && !role.paused; }); const [title, setTitle] = useState(""); const [emp, setEmp] = useState(((activeEmps[0] || emps[0] || {}).id) || "clerk"); const [risk, setRisk] = useState("Low"); const [sla, setSla] = useState("4h"); const [skillId, setSkillId] = useState(""); const draft = { title, emp, risk, sla }; const suggestions = suggestWorkOrderSkills(draft, 4); useEffect(() => { if (!suggestions.length) return; if (!skillId || !suggestions.some((s) => s.id === skillId)) setSkillId(suggestions[0].id); }, [title, emp]); const selectedSkill = suggestions.find((s) => s.id === skillId) || suggestions[0] || null; const valid = title.trim().length > 3; const canWorkOrder = !ctx.can || ctx.can("workOrder"); const workOrderReason = ctx.denyReason ? ctx.denyReason("workOrder") : "Viewers have read-only access"; const intakeReady = valid && canWorkOrder; const chatReady = valid && !!selectedSkill && canWorkOrder; const field = (label, body) => h("div", { style: { marginBottom: 16 } }, h("div", { style: { fontSize: 12.5, fontWeight: 600, marginBottom: 7, color: "var(--text-dim)" } }, label), body); const assignmentGrid = h("div", { style: { display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 8 } }, activeEmps.map((e) => h("button", { key: e.id, type: "button", onClick: () => setEmp(e.id), className: "row gap10", "data-workorder-emp": e.id, "data-workorder-emp-active": emp === e.id ? "true" : "false", "aria-pressed": emp === e.id ? "true" : "false", style: { padding: "9px 11px", borderRadius: 10, cursor: "pointer", textAlign: "left", fontFamily: "var(--font)", border: `1px solid ${emp === e.id ? "var(--border-glow)" : "var(--border)"}`, background: emp === e.id ? "var(--blue-soft)" : "var(--bg-2)" } }, h(window.Face, { roleId: e.id, size: 26, variant: "head" }), h("div", { style: { minWidth: 0 } }, h("div", { style: { fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, e.short), h("div", { style: { fontSize: 10.5, color: "var(--text-faint)" } }, e.dept))))); const workflowGrid = h("div", { style: { display: "grid", gap: 8 } }, suggestions.map((s) => h("button", { key: s.id, type: "button", onClick: () => setSkillId(s.id), className: "row gap10", "data-workorder-skill": s.id, "data-workorder-skill-active": selectedSkill && selectedSkill.id === s.id ? "true" : "false", "aria-pressed": selectedSkill && selectedSkill.id === s.id ? "true" : "false", style: { padding: "9px 11px", borderRadius: 10, cursor: "pointer", textAlign: "left", fontFamily: "var(--font)", border: `1px solid ${selectedSkill && selectedSkill.id === s.id ? "var(--border-glow)" : "var(--border)"}`, background: selectedSkill && selectedSkill.id === s.id ? "var(--blue-soft)" : "var(--bg-2)" } }, h(window.Icon, { name: "graduation", size: 15, color: selectedSkill && selectedSkill.id === s.id ? "var(--blue)" : "var(--text-faint)" }), h("div", { style: { minWidth: 0 } }, h("div", { style: { fontSize: 12.5, fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, s.title), h("div", { style: { fontSize: 10.5, color: "var(--text-faint)" } }, s.area + " · " + ((s.stage || []).join(" + ") || "Steps")))))); const riskSlaControls = h("div", { className: "row gap16", style: { flexWrap: "wrap" } }, h("div", null, h("div", { style: { fontSize: 12.5, fontWeight: 600, marginBottom: 7, color: "var(--text-dim)" } }, "Risk level"), h(Segmented, { value: risk, onChange: setRisk, options: ["Low", "Medium", "High"].map((v) => ({ value: v, label: v, attrs: { "data-workorder-risk": v, "data-workorder-risk-active": risk === v ? "true" : "false" } })) })), h("div", null, h("div", { style: { fontSize: 12.5, fontWeight: 600, marginBottom: 7, color: "var(--text-dim)" } }, "Target time"), h(Segmented, { value: sla, onChange: setSla, options: ["2h", "4h", "8h", "1d"].map((v) => ({ value: v, label: v, attrs: { "data-workorder-sla": v, "data-workorder-sla-active": sla === v ? "true" : "false" } })) }))); return h(Modal, { title: "New task", sub: "Send work to an AI employee. It starts in Intake.", icon: "clipboard", onClose, "data-workorder-modal": "intake", footer: [ h(Button, { key: "c", "data-workorder-action": "cancel-intake", onClick: onClose }, "Cancel"), h(Button, { key: "s", variant: "primary", icon: "plus", disabled: !intakeReady, title: canWorkOrder ? "" : workOrderReason, "aria-disabled": !intakeReady ? "true" : "false", "data-workorder-action": "create-intake", "data-workorder-action-ready": intakeReady ? "true" : "false", style: { opacity: intakeReady ? 1 : 0.5 }, onClick: () => onCreate({ title: title.trim(), emp, risk, sla }) }, "Create task"), h(Button, { key: "chat", variant: "primary", iconRight: "arrowRight", disabled: !chatReady, title: canWorkOrder ? "" : workOrderReason, "aria-disabled": chatReady ? "false" : "true", "data-workorder-action": "create-agent-chat", "data-workorder-action-ready": chatReady ? "true" : "false", style: { opacity: chatReady ? 1 : 0.5 }, onClick: () => onCreate({ title: title.trim(), emp, risk, sla, skillId: selectedSkill && selectedSkill.id, startChat: true }) }, "Create and open guide"), ] }, field("Task description", h("textarea", { className: "field", rows: 3, autoFocus: true, value: title, "data-workorder-title": "true", onChange: (e) => setTitle(e.target.value), placeholder: "e.g. Draft a reply from ProductFAQ.docx and latest customer email" })), field("Assign to", assignmentGrid), field("Guided steps", workflowGrid), riskSlaControls, h(FutureStep, { tone: risk === "High" ? "red" : risk === "Medium" ? "amber" : "blue", text: "Next: Intake checks files before any draft goes out." })); } function findWorkOrder(office, id) { const wb = (office && office.workOrders) || {}; for (let i = 0; i < ORDER.length; i++) { const col = ORDER[i]; const hit = (wb[col] || []).find((x) => x.id === id); if (hit) return Object.assign({}, hit, { col }); } return null; } function liveWorkOrderApprovalId(office, wo) { const wf = wo && wo.workflow; if (!wf) return null; const run = wf.runId ? ((office.runs || []).find((r) => r.id === wf.runId) || null) : null; const candidates = [wf.approvalId, run && run.inboxId].filter(Boolean); return candidates.find((id) => (office.inbox || []).some((item) => item.id === id && (!item.workOrderId || item.workOrderId === wo.id))) || null; } function workOrderNeedsApprovalPacket(wo, col) { if (!wo) return false; const text = String((wo.step || "") + " " + (wo.future || "")).toLowerCase(); return !!(wo.requiresApprovalPacket || col === "Needs Approval" || /approval desk|owner review required|sending remains locked|owner stamp|owner packet|required before any external action/.test(text)); } function futureForMove(col, wo) { const map = { Intake: "Next: Intake checks files before any draft goes out.", Planning: "Next: check details before work starts.", Running: "Next: the employee drafts, then flags items for owner review.", "Needs Approval": "Next: My Desk asks a person to approve, edit or return it.", Completed: "Next: the result stays in history.", }; return map[col] || (wo && wo.future) || "Next: owner review remains available before external action."; } function seedHistory(wo) { const col = wo.col || "Intake"; const rows = [ { id: wo.id + "-state", time: "Current", type: "state", title: "In " + columnLabel(col), note: wo.step || futureForMove(col, wo), actor: "System" }, ]; if (wo.conf > 0) rows.push({ id: wo.id + "-ready", time: "Latest", type: "check", title: "Ready score checked", note: wo.conf + "% ready · " + (wo.risk || "Low") + " risk", actor: "AI Employee" }); rows.push({ id: wo.id + "-created", time: "Seed", type: "created", title: "Created in Intake", note: "Sample task added when the demo started.", actor: "System" }); return rows; } function historyRows(wo) { return (wo.history && wo.history.length ? wo.history : seedHistory(wo)).slice(0, 10); } function historyTone(type) { return type === "created" ? "blue" : type === "move" ? "violet" : type === "step" ? "green" : type === "check" ? "amber" : "neutral"; } function WorkflowRunSection({ wo, ctx, linkedRun }) { const wf = wo && wo.workflow; if (!wf) return null; const { Section, ProgressBar, Badge } = window; const [openKey, setOpenKey] = useState(null); const [showTrace, setShowTrace] = useState(false); const skill = (window.SCENARIO_SKILLS || []).find((s) => s.id === wf.skillId) || null; const steps = (skill && skill.steps) || []; const evidenceByIndex = {}; (wf.evidence || []).forEach((ev) => { if (typeof ev.index === "number") evidenceByIndex[ev.index] = ev; }); const doneIndexes = (wf.completedSteps || []).slice().sort((a, b) => a - b); const total = wf.totalSteps || steps.length || Math.max(doneIndexes.length, 1); const done = doneIndexes.length; const currentIndex = Math.max(0, Math.min(total - 1, wf.currentStep || 0)); const source = linkedRun && linkedRun.sources && linkedRun.sources[0]; const candidateApprovalId = wf.approvalId || (linkedRun && linkedRun.inboxId) || null; const approvalId = candidateApprovalId && (ctx.office.inbox || []).some((item) => item.id === candidateApprovalId && (!item.workOrderId || item.workOrderId === wo.id)) ? candidateApprovalId : null; const resolvedApprovalId = wf.resolvedApprovalId || (linkedRun && linkedRun.originalInboxId) || null; const auditId = wf.auditId || wf.revisionAuditId || (linkedRun && linkedRun.auditId) || null; const runDomId = String(wo.id || "wo").replace(/[^a-zA-Z0-9_-]/g, "-"); const stateLabel = (state) => state === "done" ? "Done" : state === "current" ? "Current" : state === "approval" ? "Approval" : state === "resolved" ? "Resolved" : "Queued"; const rowTone = (state) => state === "done" || state === "resolved" ? "var(--green)" : state === "approval" ? "var(--amber)" : "var(--blue)"; const openApproval = () => { if (approvalId && ctx.setHighlight) ctx.setHighlight(approvalId); ctx.openPage("approvals"); }; const openAudit = () => auditId && ctx.openPage("audit-event", auditId); const openSource = () => { if (source && source.fileId && ctx.setHighlight) ctx.setHighlight(source.fileId); ctx.openPage("files", source && source.fileId); }; const openChat = () => wf.skillId && ctx.openPage("agent", wf.skillId + "~" + wo.id); const recordFor = (index, state) => { const ev = evidenceByIndex[index] || {}; const step = steps[index] || {}; return { key: state + "-" + index, index, state, title: ev.title || step.title || ("Step " + (index + 1)), tool: ev.tool || step.tool || "Assigned app", outcome: ev.outcome || step.outcome || step.detail || (state === "current" ? "Ready for the next step." : "Details saved."), source: ev.source || (source && (source.file || source.name)) || "File", gate: ev.gate || (state === "approval" ? "Owner approval needed before sending" : state === "resolved" ? "Decision saved in history" : "File checked before approval"), }; }; const rows = doneIndexes.map((idx) => recordFor(idx, "done")); if (approvalId && done >= total) rows.push(recordFor(Math.max(total - 1, 0), "approval")); else if ((auditId || resolvedApprovalId) && done >= total) rows.push(recordFor(Math.max(total - 1, 0), "resolved")); else if (done < total && rows.every((row) => row.index !== currentIndex || row.state !== "current")) rows.push(recordFor(currentIndex, "current")); return h(Section, { title: "Task progress" }, h("div", { "data-workorder-workflow": wo.id || "", "data-workorder-workflow-run-id": linkedRun ? linkedRun.id || "" : "", "data-workorder-workflow-skill-id": wf.skillId || "", "data-workorder-workflow-completed": String(done), "data-workorder-workflow-total": String(total), style: { display: "grid", gap: 10 } }, h("div", { className: "row between", style: { gap: 12 } }, h("span", { style: { fontSize: 12.5, color: "var(--text-dim)" } }, "Completed steps"), h("span", { className: "mono", style: { fontWeight: 800, color: done >= total ? "var(--green)" : "var(--blue-deep)" } }, done + "/" + total)), h(ProgressBar, { value: Math.round((done / total) * 100), tone: done >= total ? "green" : "blue" }), h("div", { className: "wo-step-actions" }, wf.skillId && h("button", { type: "button", className: "ac-chip", "data-workorder-workflow-action": "open-agent-chat", "data-workorder-id": wo.id || "", "data-agent-skill-id": wf.skillId || "", onClick: openChat }, "Continue guide"), linkedRun && h("button", { type: "button", className: "ac-chip", "data-workorder-workflow-action": "toggle-run-trace", "data-workorder-id": wo.id || "", "data-run-id": linkedRun.id || "", onClick: () => setShowTrace((v) => !v), "aria-expanded": showTrace ? "true" : "false" }, showTrace ? "Hide details" : "Show details"), approvalId && h("button", { type: "button", className: "ac-chip", "data-workorder-workflow-action": "open-approval", "data-workorder-id": wo.id || "", "data-approval-id": approvalId, onClick: openApproval }, "Open My Desk"), !approvalId && auditId && h("button", { type: "button", className: "ac-chip", "data-workorder-workflow-action": "open-audit", "data-workorder-id": wo.id || "", "data-audit-id": auditId, onClick: openAudit }, "Open history"), source && source.fileId && h("button", { type: "button", className: "ac-chip", "data-workorder-workflow-action": "open-source", "data-workorder-id": wo.id || "", "data-file-id": source.fileId, onClick: openSource }, "Open file")), rows.length ? h("div", { className: "wo-step-list", "data-workorder-workflow-step-list": wo.id || "" }, rows.map((row) => { const open = openKey === row.key; const detailId = "wo-step-detail-" + runDomId + "-" + row.key; return h("div", { key: row.key, "data-workorder-workflow-step-wrap": row.key, "data-workorder-id": wo.id || "", style: { display: "grid", gap: 7 } }, h("button", { type: "button", className: "wo-step-row", "data-workorder-workflow-step": row.key, "data-workorder-id": wo.id || "", "data-workorder-step-index": String(row.index), "data-workorder-workflow-state": row.state, onClick: () => setOpenKey(open ? null : row.key), "aria-expanded": open ? "true" : "false", "aria-controls": open ? detailId : undefined }, h("span", { className: "wo-step-dot", style: { "--wo-dot": rowTone(row.state) } }, h(window.Icon, { name: row.state === "current" ? "clock" : row.state === "approval" ? "stamp" : row.state === "resolved" ? "scroll" : "check", size: 12 })), h("span", { className: "wo-step-copy" }, h("b", null, "Step " + (row.index + 1) + ": " + row.title), h("span", null, row.outcome)), h("span", { className: "wo-step-status" }, stateLabel(row.state))), open && h("div", { id: detailId, className: "wo-step-detail", "data-workorder-workflow-detail": row.key, "data-workorder-id": wo.id || "", "data-workorder-step-index": String(row.index), "data-workorder-workflow-state": row.state }, h("div", { className: "ac-evidence-grid" }, h("div", { className: "ac-evidence-card" }, h("b", null, "App"), h("span", null, row.tool)), h("div", { className: "ac-evidence-card" }, h("b", null, "File"), h("span", null, row.source)), h("div", { className: "ac-evidence-card" }, h("b", null, "Result"), h("span", null, row.outcome)), h("div", { className: "ac-evidence-card" }, h("b", null, "Check"), h("span", null, row.gate))), h("div", { className: "wo-step-actions" }, h(Badge, { tone: row.state === "done" ? "green" : row.state === "approval" ? "amber" : "blue" }, stateLabel(row.state)), wf.skillId && h("button", { type: "button", className: "ac-chip", "data-workorder-workflow-action": "open-agent-chat", "data-workorder-id": wo.id || "", "data-agent-skill-id": wf.skillId || "", "data-workorder-step-key": row.key, onClick: openChat }, "Open guide"), linkedRun && h("button", { type: "button", className: "ac-chip", "data-workorder-workflow-action": "show-run-trace", "data-workorder-id": wo.id || "", "data-run-id": linkedRun.id || "", "data-workorder-step-key": row.key, onClick: () => setShowTrace(true) }, "Show details"), source && source.fileId && h("button", { type: "button", className: "ac-chip", "data-workorder-workflow-action": "open-source", "data-workorder-id": wo.id || "", "data-file-id": source.fileId, "data-workorder-step-key": row.key, onClick: openSource }, "Open file"), approvalId && h("button", { type: "button", className: "ac-chip", "data-workorder-workflow-action": "open-approval", "data-workorder-id": wo.id || "", "data-approval-id": approvalId, "data-workorder-step-key": row.key, onClick: openApproval }, "Open My Desk"), !approvalId && auditId && h("button", { type: "button", className: "ac-chip", "data-workorder-workflow-action": "open-audit", "data-workorder-id": wo.id || "", "data-audit-id": auditId, "data-workorder-step-key": row.key, onClick: openAudit }, "Open history")))); })) : h("div", { className: "wo-step-detail" }, "No steps have been saved yet."), showTrace && linkedRun && h(window.RunTrace, { run: linkedRun, onOpenSource: (src) => { if (ctx.setHighlight && src && src.fileId) ctx.setHighlight(src.fileId); ctx.openPage("files", src && src.fileId); }, onOpenInbox: (id) => { if (ctx.setHighlight && id) ctx.setHighlight(id); ctx.openPage("approvals"); } }))); } // ---------- Task detail page ---------- function WorkOrderDetail({ ctx }) { const { PageHeader, Card, Section, Badge, RiskBadge, Button, ProgressBar, FutureStep } = window; const [openHistory, setOpenHistory] = useState(null); const [openHistoryTrace, setOpenHistoryTrace] = useState(null); const wo = findWorkOrder(ctx.office, ctx.pageArg); if (!wo) { return h("div", null, h(PageHeader, { eyebrow: "Operations", title: "Task not found", sub: "This task may have been removed, or the link may be old.", right: h(Button, { sm: true, onClick: () => ctx.openPage("workorders") }, "Back to Tasks") }), h(Card, { style: { padding: 24 } }, h(window.EmptyHint, { icon: "clipboard", text: "No task matches #" + (ctx.pageArg || "unknown") + "." }))); } const e = window.deriveDashboardData(ctx.office).emp(wo.emp); const linkedRun = wo.workflow && wo.workflow.runId ? (ctx.office.runs || []).find((r) => r.id === wo.workflow.runId) : null; const suggestedSkill = !wo.workflow ? suggestWorkOrderSkill(wo) : null; const idx = ORDER.indexOf(wo.col); const next = ORDER[idx + 1]; const prev = ORDER[idx - 1]; const wf = wo.workflow || null; const approvalTarget = liveWorkOrderApprovalId(ctx.office, wo); const auditTarget = wf && (wf.auditId || wf.revisionAuditId); const needsApprovalPacket = !wf && workOrderNeedsApprovalPacket(wo, wo.col); const canWorkOrder = !ctx.can || ctx.can("workOrder"); const workOrderReason = ctx.denyReason ? ctx.denyReason("workOrder") : "Viewers have read-only access"; const meta = (l, v) => h("div", null, h("div", { style: { fontSize: 10.5, color: "var(--text-faint)", fontWeight: 700, letterSpacing: ".06em", marginBottom: 5 } }, l.toUpperCase()), h("div", { style: { fontSize: 13, fontWeight: 500 } }, v)); function moveTo(toCol) { if (!canWorkOrder) { if (ctx.showToast) ctx.showToast(workOrderReason); return; } if (toCol === wo.col) return; const future = futureForMove(toCol, wo); if (ctx.moveWorkOrder(wo.id, toCol, future)) ctx.showToast(wo.id + " moved to " + columnLabel(toCol) + " · " + future.replace(/^Next: /, "")); } function completeNow() { if (!canWorkOrder) { if (ctx.showToast) ctx.showToast(workOrderReason); return; } if (ctx.completeWorkOrder && ctx.completeWorkOrder(wo.id)) ctx.showToast(wo.id + " completion logged"); } function startChat(skill) { if (!canWorkOrder) { if (ctx.showToast) ctx.showToast(workOrderReason); return; } if (!skill || !ctx.startWorkOrderAgentChat) return; const result = ctx.startWorkOrderAgentChat(wo.id, skill.id); if (result) ctx.openPage("agent", result.skillId + "~" + result.workOrderId); } function openWorkflowApproval() { if (approvalTarget && ctx.setHighlight) ctx.setHighlight(approvalTarget); ctx.openPage("approvals"); } function openWorkflowAudit() { if (auditTarget) ctx.openPage("audit-event", auditTarget); } function openWorkflowSource() { const src = linkedRun && linkedRun.sources && linkedRun.sources[0]; if (src && src.fileId && ctx.setHighlight) ctx.setHighlight(src.fileId); ctx.openPage("files", src && src.fileId); } function historyDetail(ev, i) { const runId = ev.runId || (wf && wf.runId) || (linkedRun && linkedRun.id); const eventRun = runId ? ((ctx.office.runs || []).find((r) => r.id === runId) || linkedRun) : linkedRun; const src = eventRun && eventRun.sources && eventRun.sources[0]; const approvalId = ev.approvalId || approvalTarget; const liveApprovalId = approvalId && (ctx.office.inbox || []).some((item) => item.id === approvalId) ? approvalId : null; const auditId = ev.auditId || (eventRun && eventRun.auditId) || auditTarget; return h("div", { id: "wo-history-detail-" + i, className: "wo-step-detail", "data-workorder-history-detail": String(i), "data-workorder-history-type": ev.type || "update", style: { marginTop: 8 } }, h("div", { className: "ac-evidence-grid" }, h("div", { className: "ac-evidence-card" }, h("b", null, "Event"), h("span", null, ev.id || "history event")), runId && h("div", { className: "ac-evidence-card" }, h("b", null, "Run"), h("span", null, runId)), approvalId && h("div", { className: "ac-evidence-card" }, h("b", null, "My Desk"), h("span", null, approvalId)), src && h("div", { className: "ac-evidence-card" }, h("b", null, "File"), h("span", null, src.file || src.name || "File"))), h("div", { className: "wo-step-actions" }, wf && wf.skillId && h("button", { type: "button", className: "ac-chip", "data-workorder-history-action": "open-agent-chat", "data-workorder-history-index": String(i), onClick: () => ctx.openPage("agent", wf.skillId + "~" + wo.id) }, "Open guide"), liveApprovalId && h("button", { type: "button", className: "ac-chip", "data-workorder-history-action": "open-approval", "data-workorder-history-index": String(i), onClick: () => { if (ctx.setHighlight) ctx.setHighlight(liveApprovalId); ctx.openPage("approvals"); } }, "Open My Desk"), src && src.fileId && h("button", { type: "button", className: "ac-chip", "data-workorder-history-action": "open-source", "data-workorder-history-index": String(i), onClick: () => { if (ctx.setHighlight) ctx.setHighlight(src.fileId); ctx.openPage("files", src.fileId); } }, "Open file"), auditId && h("button", { type: "button", className: "ac-chip", "data-workorder-history-action": "open-audit", "data-workorder-history-index": String(i), onClick: () => ctx.openPage("audit-event", auditId) }, "Open history"), eventRun && h("button", { type: "button", className: "ac-chip", "data-workorder-history-action": "toggle-run-trace", "data-workorder-history-index": String(i), "aria-expanded": openHistoryTrace === i ? "true" : "false", onClick: () => setOpenHistoryTrace(openHistoryTrace === i ? null : i) }, openHistoryTrace === i ? "Hide details" : "Show details")), openHistoryTrace === i && eventRun && h(window.RunTrace, { run: eventRun, onOpenSource: (source) => { if (ctx.setHighlight && source && source.fileId) ctx.setHighlight(source.fileId); ctx.openPage("files", source && source.fileId); }, onOpenInbox: (id) => { if (ctx.setHighlight && id) ctx.setHighlight(id); ctx.openPage("approvals"); } })); } return h("div", { "data-workorder-detail": wo.id, "data-workorder-col": wo.col || "", "data-workorder-risk-level": wo.risk || "", "data-workorder-has-workflow": wf ? "true" : "false" }, h(PageHeader, { eyebrow: "Operations", title: wo.id + " · Task", icon: "clipboard", sub: wo.title, right: [ h(Button, { key: "back", sm: true, variant: "ghost", "data-workorder-action": "back-to-workorders", onClick: () => ctx.openPage("workorders") }, "Back to Tasks"), wf && wf.skillId && !approvalTarget && !auditTarget && h(Button, { key: "chat", sm: true, variant: "primary", iconRight: "arrowRight", "data-workorder-action": "continue-agent-chat", onClick: () => ctx.openPage("agent", wf.skillId + "~" + wo.id) }, "Continue guide"), wf && approvalTarget && h(Button, { key: "approval", sm: true, variant: "primary", iconRight: "arrowRight", onClick: openWorkflowApproval }, "Open My Desk"), wf && !approvalTarget && auditTarget && h(Button, { key: "audit", sm: true, variant: "primary", iconRight: "arrowRight", onClick: openWorkflowAudit }, "Open history"), !wf && suggestedSkill && h(Button, { key: "start-chat", sm: true, variant: "primary", iconRight: "arrowRight", disabled: !canWorkOrder, title: canWorkOrder ? "" : workOrderReason, "aria-disabled": canWorkOrder ? "false" : "true", "data-workorder-action": "start-agent-chat", "data-workorder-rbac-disabled": canWorkOrder ? "false" : "true", onClick: () => startChat(suggestedSkill) }, "Start guide"), !wf && prev && h(Button, { key: "prev", sm: true, icon: "arrowUp", disabled: !canWorkOrder, title: canWorkOrder ? "" : workOrderReason, "aria-disabled": canWorkOrder ? "false" : "true", "data-workorder-action": "move-prev", "data-workorder-target-col": prev, "data-workorder-rbac-disabled": canWorkOrder ? "false" : "true", style: { transform: "rotate(-90deg)" }, onClick: () => moveTo(prev) }), !wf && (next ? ((next === "Needs Approval" || (next === "Completed" && needsApprovalPacket)) ? h(Button, { key: "next-blocked", sm: true, variant: "primary", disabled: true, title: "Start the guide to create a My Desk item before completion", "data-workorder-action": "move-next", "data-workorder-target-col": next, "data-workorder-move-blocked": "true" }, "Start guide first") : h(Button, { key: "next", sm: true, variant: "primary", iconRight: "arrowRight", disabled: !canWorkOrder, title: canWorkOrder ? "" : workOrderReason, "aria-disabled": canWorkOrder ? "false" : "true", "data-workorder-action": "move-next", "data-workorder-target-col": next, "data-workorder-move-blocked": "false", "data-workorder-rbac-disabled": canWorkOrder ? "false" : "true", onClick: () => moveTo(next) }, "Move to " + columnLabel(next))) : h(Button, { key: "done", sm: true, variant: wo.closedAt ? "" : "green", icon: "check", disabled: !!wo.closedAt || !canWorkOrder, title: !canWorkOrder ? workOrderReason : wo.closedAt ? "Completion already logged" : "", "aria-disabled": (!!wo.closedAt || !canWorkOrder) ? "true" : "false", "data-workorder-action": "log-completion", "data-workorder-completed": wo.closedAt ? "true" : "false", "data-workorder-rbac-disabled": canWorkOrder ? "false" : "true", onClick: completeNow }, wo.closedAt ? "Completion logged" : "Log completion")), ], }), h("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))", gap: 16, alignItems: "start" } }, h(Card, { style: { padding: 18 } }, h("div", { className: "row gap8", style: { marginBottom: 18, flexWrap: "wrap" } }, h(RiskBadge, { level: wo.risk }), h(Badge, { tone: "neutral" }, columnLabel(wo.col))), h(Section, { title: "Details" }, h("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(180px,1fr))", gap: 16 } }, meta("Assigned", h("span", { className: "row gap8" }, h(window.Face, { roleId: e.id, size: 22, variant: "head" }), e.short)), meta("Target time", wo.sla), meta("Current step", wo.step), wo.closedAt && meta("Completed", (wo.closedBy || "System") + " · " + wo.closedAt), meta("Owner", e.owner || "—"))), wf && h(WorkflowRunSection, { wo, ctx, linkedRun }), !wf && suggestedSkill && h(Section, { title: "Guided steps" }, h("div", { style: { display: "grid", gap: 10 } }, h("div", { className: "row gap8 wrap" }, h(Badge, { tone: "blue" }, "Suggested task"), h(Badge, { tone: "neutral" }, suggestedSkill.area)), h("div", { style: { fontSize: 13, fontWeight: 700 } }, suggestedSkill.title), h("div", { style: { fontSize: 12.5, color: "var(--text-dim)", lineHeight: 1.5 } }, "Start guided steps for this task. The same task id stays visible in history."), h("div", null, h(Button, { variant: "primary", iconRight: "arrowRight", disabled: !canWorkOrder, title: canWorkOrder ? "" : workOrderReason, "aria-disabled": canWorkOrder ? "false" : "true", "data-workorder-action": "start-agent-chat", "data-workorder-rbac-disabled": canWorkOrder ? "false" : "true", onClick: () => startChat(suggestedSkill) }, "Start guide")))), h(Section, { title: "Files" }, h("div", { className: "row gap6", style: { flexWrap: "wrap" } }, (wo.sources || []).map((s, i) => h("span", { key: i, className: "badge badge-neutral" }, s)))), h(Section, { title: "Next", style: { marginBottom: 0 } }, h(FutureStep, { text: wo.future, tone: wo.risk === "High" ? "red" : wo.risk === "Medium" ? "amber" : "blue" }))), h(Card, { style: { padding: 18 } }, wo.conf > 0 && h(Section, { title: "Ready score" }, h("div", { className: "row between", style: { marginBottom: 6 } }, h("span", { className: "mono", style: { fontSize: 18, fontWeight: 700, color: wo.conf >= 85 ? "var(--green)" : "var(--amber)" } }, wo.conf + "%"), h(Badge, { tone: wo.conf >= 85 ? "green" : "amber" }, wo.conf >= 85 ? "Ready for review" : "Routed for review")), h(ProgressBar, { value: wo.conf, tone: wo.conf >= 85 ? "green" : "amber" }), h("div", { style: { fontSize: 11.5, color: "var(--text-faint)", lineHeight: 1.5, marginTop: 8 } }, "This score helps sort review. A person still decides.")), h(Section, { title: "History" }, h("div", { style: { display: "grid", gap: 8 } }, historyRows(wo).map((ev, i) => h("div", { key: ev.id || i, "data-workorder-history-row": String(i), "data-workorder-history-id": ev.id || "", "data-workorder-history-type": ev.type || "update", style: { padding: "9px 10px", borderRadius: 10, border: "1px solid var(--border)", background: "var(--bg-3)" } }, h("div", { className: "row between", style: { gap: 10, alignItems: "flex-start" } }, h("div", { style: { minWidth: 0 } }, h("div", { style: { fontSize: 12.5, fontWeight: 700 } }, ev.title || "Task updated"), ev.note && h("div", { style: { fontSize: 11.5, color: "var(--text-dim)", lineHeight: 1.45, marginTop: 3 } }, ev.note), h("div", { style: { fontSize: 10.5, color: "var(--text-faint)", marginTop: 5 } }, (ev.actor || "System") + " · " + (ev.time || "剛剛"))), h("div", { className: "row gap6 wrap", style: { justifyContent: "flex-end" } }, h(Badge, { tone: historyTone(ev.type) }, ev.type || "update"), h("button", { type: "button", className: "ac-chip", "data-workorder-action": "inspect-history", "data-workorder-history-index": String(i), "data-workorder-history-type": ev.type || "update", onClick: () => setOpenHistory(openHistory === i ? null : i), "aria-expanded": openHistory === i ? "true" : "false", "aria-controls": openHistory === i ? "wo-history-detail-" + i : undefined }, openHistory === i ? "Hide" : "Details"))), openHistory === i && historyDetail(ev, i))))), !wf && h(Section, { title: "Move to", style: { marginBottom: 0 } }, h("div", { className: "row gap6", style: { flexWrap: "wrap" } }, COLS.map((c) => { const blocked = (!wf && c.id === "Needs Approval") || (!wf && c.id === "Completed" && needsApprovalPacket); return h("button", { key: c.id, disabled: blocked || !canWorkOrder, title: !canWorkOrder ? workOrderReason : blocked ? "Start the guide to create a My Desk item first" : "", "aria-disabled": (blocked || !canWorkOrder) ? "true" : "false", "data-workorder-action": "move-to", "data-workorder-target-col": c.id, "data-workorder-current-col": wo.col || "", "data-workorder-move-blocked": blocked ? "true" : "false", "data-workorder-rbac-disabled": canWorkOrder ? "false" : "true", onClick: () => moveTo(c.id), style: { fontFamily: "var(--font)", fontSize: 12, fontWeight: 600, padding: "6px 11px", borderRadius: 8, cursor: (blocked || !canWorkOrder) ? "not-allowed" : "pointer", opacity: (blocked || !canWorkOrder) ? 0.52 : 1, border: `1px solid ${c.id === wo.col ? "var(--border-glow)" : "var(--border)"}`, background: c.id === wo.col ? "var(--blue-soft)" : "var(--bg-2)", color: c.id === wo.col ? "var(--blue-deep)" : "var(--text-dim)" } }, h("span", { className: "row gap6" }, h("span", { style: { width: 7, height: 7, borderRadius: 2, background: c.color } }), columnLabel(c.id))); })))))); } function WorkOrders({ ctx }) { const { PageHeader, Button, Segmented } = window; // Board reads LIVE from the persisted office store (no local copy) so created/moved cards survive reload. const wb = ctx.office.workOrders || {}; const board = {}; ORDER.forEach((c) => board[c] = wb[c] || []); const [view, setView] = useState("Board"); // Board (kanban) | Table (flat list) const [intake, setIntake] = useState(false); // intake modal const [filterOpen, setFilterOpen] = useState(false); const [risk, setRisk] = useState("All"); // filter const [dragId, setDragId] = useState(null); const [overCol, setOverCol] = useState(null); const counter = useRef(2043); const canWorkOrder = !ctx.can || ctx.can("workOrder"); const workOrderReason = ctx.denyReason ? ctx.denyReason("workOrder") : "Viewers have read-only access"; useEffect(() => { if (ctx.woIntake > 0 && canWorkOrder) setIntake(true); }, [ctx.woIntake, canWorkOrder]); function moveCard(wo, toCol) { if (!canWorkOrder) { if (ctx.showToast) ctx.showToast(workOrderReason); return; } if (toCol === wo.col) return; const future = futureForMove(toCol, wo); if (ctx.moveWorkOrder(wo.id, toCol, future)) ctx.showToast(wo.id + " moved to " + columnLabel(toCol) + " · " + future.replace(/^Next: /, "")); } function createWO({ title, emp, risk, sla, skillId, startChat }) { if (!canWorkOrder) { if (ctx.showToast) ctx.showToast(workOrderReason); return; } // Robust id: max existing + 1 (survives reload without colliding with persisted WO ids). const ids = ORDER.flatMap((c) => board[c]).map((w) => parseInt(String(w.id || "").replace("WO-", ""), 10)).filter((n) => !isNaN(n)); const id = "WO-" + ((ids.length ? Math.max.apply(null, ids) : 2040) + 1); const skill = (window.SCENARIO_SKILLS || []).find((s) => s.id === skillId) || suggestWorkOrderSkill({ title, emp }); const sourceSet = ["Helpdesk"]; if (skill) { sourceSet.push("Task Library"); const cap = (skill.products || [])[0]; if (cap) sourceSet.push(cap); } const wo = { id, title, emp, sla, conf: 0, sources: sourceSet, step: "Waiting for review", risk, future: "Next: Intake checks files before any draft goes out." }; const created = ctx.submitWorkOrder ? ctx.submitWorkOrder(wo) : false; if (!created) return; setIntake(false); if (startChat && skill && ctx.startWorkOrderAgentChat) { const result = ctx.startWorkOrderAgentChat(id, skill.id); if (result) { ctx.openPage("agent", result.skillId + "~" + result.workOrderId); return; } } ctx.openPage("workorder", id); } function onDrop(col) { if (!dragId || !canWorkOrder) return; let found = null; ORDER.forEach((c) => { const m = board[c].find((x) => x.id === dragId); if (m) found = { ...m, col: c }; }); setOverCol(null); setDragId(null); if (found) moveCard(found, col); } const RISKS = ["All", "Low", "Medium", "High"]; const match = (wo) => risk === "All" || wo.risk === risk; return h("div", { "data-workorders-root": "true", "data-workorders-view": view, "data-workorders-risk": risk, "data-workorders-rbac-disabled": canWorkOrder ? "false" : "true" }, h(PageHeader, { eyebrow: "Operations", title: "Tasks", sub: canWorkOrder ? "Tasks move from intake to approval. Drag a card or open it for details." : "View-only access: you can inspect tasks, but cannot create, move or complete them.", right: [ h(Segmented, { key: "v", value: view, onChange: setView, options: ["Board", "Table"].map((v) => ({ value: v, label: v, attrs: { "data-workorders-view-option": v, "data-workorders-view-active": view === v ? "true" : "false" } })) }), h("div", { key: "f", style: { position: "relative" } }, h(Button, { icon: "filter", "data-workorders-action": "filter-risk", "data-workorders-risk-current": risk, "data-workorders-filter-open": filterOpen ? "true" : "false", onClick: () => setFilterOpen(!filterOpen) }, risk === "All" ? "Filter" : "Risk · " + risk), filterOpen && h(React.Fragment, null, h("div", { "data-workorders-filter-backdrop": "true", onClick: () => setFilterOpen(false), style: { position: "fixed", inset: 0, zIndex: 40 } }), h("div", { className: "glass", "data-workorders-filter-menu": "true", style: { position: "absolute", top: "calc(100% + 6px)", right: 0, zIndex: 50, padding: 12, width: 200, maxWidth: "calc(100vw - 24px)", boxShadow: "var(--shadow-lg)" } }, h("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", color: "var(--text-faint)", marginBottom: 10 } }, "FILTER BY RISK"), h("div", { style: { display: "flex", flexDirection: "column", gap: 4 } }, RISKS.map((r) => h("button", { key: r, onClick: () => { setRisk(r); setFilterOpen(false); }, className: "dd-opt" + (r === risk ? " active" : ""), "data-workorders-risk-filter": r, "data-workorders-risk-active": r === risk ? "true" : "false", style: { display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left", padding: "8px 10px", borderRadius: 7, border: "none", cursor: "pointer", background: r === risk ? "var(--blue-soft)" : "transparent", color: r === risk ? "var(--blue-deep)" : "var(--text)", fontFamily: "var(--font)", fontSize: 13, fontWeight: r === risk ? 600 : 500 } }, r === risk && h(window.Icon, { name: "check", size: 13, color: "var(--blue)" }), h("span", { style: { marginLeft: r === risk ? 0 : 21 } }, r)))))), ), h(Button, { key: "n", variant: "primary", icon: "plus", disabled: !canWorkOrder, title: canWorkOrder ? "" : workOrderReason, "aria-disabled": canWorkOrder ? "false" : "true", "data-workorders-action": "new", "data-workorder-rbac-disabled": canWorkOrder ? "false" : "true", onClick: () => setIntake(true) }, "New task"), ] }), view === "Board" ? h("div", { "data-workorders-board": "true", style: { display: "grid", gridTemplateColumns: `repeat(${COLS.length}, minmax(244px, 1fr))`, gap: 14, alignItems: "start", overflowX: "auto", paddingBottom: 10 } }, COLS.map((c) => { const items = (board[c.id] || []).filter(match); return h("div", { key: c.id, className: "wo-col" + (overCol === c.id ? " drag-over" : ""), "data-workorder-column": c.id, "data-workorder-column-count": String(items.length), "data-workorder-column-over": overCol === c.id ? "true" : "false", onDragOver: (e) => { if (!canWorkOrder) return; e.preventDefault(); if (overCol !== c.id) setOverCol(c.id); }, onDragLeave: (e) => { if (e.currentTarget === e.target) setOverCol(null); }, onDrop: () => onDrop(c.id), style: { background: "var(--bg-3)", border: "1px solid var(--border)", borderRadius: 14, padding: 12, minWidth: 244, transition: "background .15s, border-color .15s" } }, h("div", { className: "row between", style: { marginBottom: 12, padding: "2px 4px" } }, h("div", { className: "row gap8" }, h("span", { style: { width: 8, height: 8, borderRadius: 3, background: c.color } }), h("span", { style: { fontWeight: 600, fontSize: 13 } }, columnLabel(c.id))), h("span", { style: { fontSize: 11.5, fontWeight: 700, color: "var(--text-faint)", background: "var(--bg-2)", borderRadius: 7, padding: "2px 8px", border: "1px solid var(--border)" } }, items.length)), h("div", { style: { display: "flex", flexDirection: "column", gap: 10, minHeight: 40 } }, items.length ? items.map((wo) => h(WOCard, { key: wo.id, wo: { ...wo, col: c.id }, ctx, onOpen: (w) => ctx.openPage("workorder", w.id), onDragStart: (ev, w) => { setDragId(w.id); ev.dataTransfer.effectAllowed = "move"; }, onDragEnd: () => { setDragId(null); setOverCol(null); }, dragging: dragId === wo.id })) : h(window.EmptyHint, { text: overCol === c.id ? "Drop here" : "No tasks" }))); })) : h("div", { className: "glass", "data-workorders-table": "true", style: { overflow: "hidden" } }, h("div", { style: { overflowX: "auto" } }, h("table", { className: "tbl" }, h("thead", null, h("tr", null, ["Task", "Status", "Assigned to", "Next step", "Due"].map((cH, i) => h("th", { key: i }, cH)))), h("tbody", null, (function () { const flat = ORDER.flatMap((cid) => (board[cid] || []).filter(match).map((wo) => ({ ...wo, col: cid }))); if (!flat.length) return h("tr", null, h("td", { colSpan: 5, style: { textAlign: "center", color: "var(--text-faint)", padding: 30, fontSize: 13 } }, "No tasks")); return flat.map((wo) => { const c = COLS.find((x) => x.id === wo.col); const emp = window.deriveDashboardData(ctx.office).emp(wo.emp); const openRowFromKeyboard = (ev) => { if (ev.key !== "Enter" && ev.key !== " ") return; ev.preventDefault(); ctx.openPage("workorder", wo.id); }; return h("tr", { key: wo.id, className: "row-link", role: "button", tabIndex: 0, "data-workorder-row": wo.id, "data-workorder-id": wo.id, "data-workorder-col": wo.col || "", "data-workorder-risk-level": wo.risk || "", "data-workorder-assignee": wo.emp || "", "data-workorder-keyboard": "true", onClick: () => ctx.openPage("workorder", wo.id), onKeyDown: openRowFromKeyboard }, h("td", null, h("div", { className: "row gap8", style: { alignItems: "baseline" } }, h("span", { className: "mono", style: { fontSize: 11, color: "var(--text-faint)", fontWeight: 600, whiteSpace: "nowrap" } }, wo.id), h(window.RiskBadge, { level: wo.risk })), h("div", { style: { fontSize: 13, fontWeight: 600, marginTop: 4, lineHeight: 1.35, maxWidth: 380 } }, wo.title)), h("td", null, h("span", { className: "row gap6", style: { whiteSpace: "nowrap" } }, h("span", { style: { width: 8, height: 8, borderRadius: 3, background: c.color, flex: "none" } }), h("span", { style: { fontSize: 12.5, fontWeight: 500 } }, columnLabel(wo.col)))), h("td", null, h("span", { className: "row gap8", style: { whiteSpace: "nowrap" } }, h(window.Face, { roleId: emp.id, size: 22, variant: "head" }), h("span", { style: { fontSize: 12.5, fontWeight: 500 } }, emp.short))), h("td", { className: "dim", style: { fontSize: 12.5, maxWidth: 280 } }, wo.step), h("td", { className: "mono", style: { fontSize: 12, color: "var(--text-dim)", whiteSpace: "nowrap" } }, wo.sla)); }); })())))), intake && h(IntakeModal, { onClose: () => setIntake(false), onCreate: createWO, ctx })); } window.Screens.workorder = WorkOrderDetail; window.Screens.workorders = WorkOrders; })();