// ============ TaskQuest — Deliverables (DM backlog + PM intake) ============
const { useState: useStateD, useEffect: useEffectD } = React;

// ---------- shared chips ----------
function PrioChip({ priority }) {
  const p = window.TQ.PRIORITY[priority] || window.TQ.PRIORITY.med;
  return (
    <span className="prio-chip" style={{ background: p.color + "1f", color: p.color }}>
      <span className="prio-dot" style={{ background: p.color }} />{p.name}
    </span>
  );
}
function DlvStatusBadge({ status }) {
  const s = window.TQ.DLV_STATUS[status];
  return (
    <span className="dlv-status" style={{ background: s.color + "1f", color: s.color }}>
      <span className="sdot" style={{ background: s.color }} />{s.name}
    </span>
  );
}
function DlvProgress({ comp }) {
  return (
    <div className="dlv-prog">
      <div className="dlv-prog-track">
        <div className="dlv-prog-fill" style={{ width: (comp.total ? comp.pct : 0) + "%", background: comp.meta.color }} />
      </div>
      <span className="dlv-prog-num">{comp.done}/{comp.total}</span>
    </div>
  );
}

// ---------- DM dashboard: KPIs + primary Backlog / Scoreboard toggle ----------
function DmDashboard({ project, deliverables, tasks, dmLayout, bonus, onOpen, tab = "backlog" }) {
  const { computeDeliverable, computeScores, leaderboard, PROJECTS } = window.TQ;
  const scoped = project === "all" ? deliverables : deliverables.filter(d => d.project === project);
  const comps = scoped.map(d => computeDeliverable(d, tasks));
  const total = scoped.length;
  const inprog = comps.filter(c => c.status === "inprogress").length;
  const awaiting = comps.filter(c => c.status === "delivered").length;
  const accepted = comps.filter(c => c.status === "accepted").length;
  const atRisk = comps.filter(c => c.overdue && c.status !== "accepted").length;

  // team performance + points across the same project scope
  // performance = completed ÷ assigned (Happy Path + Needs Attention + Done; On Hold excluded)
  const scopedTasks = project === "all" ? tasks : tasks.filter(t => t.project === project);
  const stats = Object.values(computeScores(scopedTasks, []));
  const completedAll = stats.reduce((a, s) => a + s.completed, 0);
  const assignedAll = stats.reduce((a, s) => a + s.assigned, 0);
  const teamPerf = assignedAll ? Math.round((completedAll / assignedAll) * 100) : 0;

  const board = leaderboard(tasks, bonus || [], project);
  const totalPts = board.reduce((a, s) => a + s.total, 0);
  const teamAvg = completedAll ? totalPts / completedAll : 0;
  const scopeName = project === "all" ? "All projects" : (PROJECTS[project] ? PROJECTS[project].name : "");

  return (
    <>

    {tab === "backlog" ? (
      <DeliverablesPage project={project} deliverables={deliverables} tasks={tasks} dmLayout={dmLayout} onOpen={onOpen} />
    ) : (
      <>
        <div className="summary-grid dlv-summary">
          <StatCard icon={Ic.Layers} iconColor="#5E6AD2" label={project === "all" ? "All Deliverables" : "Project Deliverables"}
            foot={`${accepted} accepted & closed`}>
            <div className="stat-value tabnum">{total}</div>
          </StatCard>
          <StatCard icon={Ic.Arrow} iconColor="#f2c94c" label="In Progress" foot="Being broken down & delivered">
            <div className="stat-value tabnum">{inprog}</div>
          </StatCard>
          <StatCard icon={Ic.CheckCircle} iconColor="#4cb782" label="Awaiting Sign-off"
            foot={awaiting ? "Ready for your acceptance" : "Nothing to accept"}>
            <div className="stat-value tabnum">{awaiting}</div>
          </StatCard>
          <StatCard icon={Ic.Alert} iconColor={atRisk ? "#eb5757" : "#878b94"} label="At Risk"
            foot={atRisk ? "Has overdue tasks" : "All on track"}>
            <div className="stat-value tabnum">{atRisk}</div>
          </StatCard>
        </div>
        {board.length > 0 ? (
          <TeamScoreboard board={board} teamPerf={teamPerf} totalPts={totalPts} teamAvg={teamAvg}
            completedAll={completedAll} assignedAll={assignedAll}
            scopeName={scopeName} project={project} />
        ) : (
          <div className="empty-state">
            <div className="es-ic"><Ic.Trophy size={26} /></div>
            <h3>No scores yet</h3>
            <div>Performance and points appear here once consultants start completing tasks.</div>
          </div>
        )}
      </>
    )}
    </>
  );
}

// ---------- Team scoreboard: Performance / Points toggle ----------
function TeamScoreboard({ board, teamPerf, totalPts, teamAvg, completedAll, assignedAll, scopeName, project }) {
  const [metric, setMetric] = useStateD(() => localStorage.getItem("tq_dm_metric") || "perf");
  useEffectD(() => { try { localStorage.setItem("tq_dm_metric", metric); } catch (e) {} }, [metric]);

  const toggle = (
    <div className="view-toggle">
      <button className={metric === "perf" ? "on" : ""} onClick={() => setMetric("perf")}><Ic.Target size={14} />Performance</button>
      <button className={metric === "points" ? "on" : ""} onClick={() => setMetric("points")}><Ic.Coins size={14} />Avg / Task</button>
    </div>
  );
  const headline = (
    <div className="scoreboard-headline">
      {metric === "perf" ? (
        <>
          <span className="scoreboard-num tabnum">{teamPerf}<span className="unit">%</span></span>
          <span className="scoreboard-cap">Team performance · {completedAll} of {assignedAll} tasks completed</span>
          <div className="progress-track" style={{ width: "100%", marginTop: 8 }}><div className="progress-fill" style={{ width: teamPerf + "%" }} /></div>
        </>
      ) : (
        <>
          <span className="scoreboard-num tabnum">{(teamAvg || 0).toFixed(1)}<span className="unit">pts</span></span>
          <span className="scoreboard-cap">Avg points / task · {totalPts} pts over {completedAll} completed · {scopeName}</span>
        </>
      )}
    </div>
  );
  return (
    <MiniLeaderboard board={board.slice(0, 6)} meKey={null} metric={metric}
      label={project === "all" ? "Team Scoreboard" : "Team Scoreboard"}
      headerRight={toggle} headline={headline} />
  );
}

// ---------- card / table / board renderers ----------
function DeliverableCard({ d, comp, onOpen }) {
  const { fmtDate, PROJECTS, ROLES } = window.TQ;
  const proj = PROJECTS[d.project];
  const pm = ROLES[d.pm];
  return (
    <div className="dlv-card" onClick={() => onOpen(d)}>
      <span className="dlv-accent" style={{ background: comp.meta.color }} />
      <div className="dlv-card-top">
        <span className="dlv-id">{d.id}</span>
        <PrioChip priority={d.priority} />
        <span style={{ marginLeft: "auto" }}><DlvStatusBadge status={comp.status} /></span>
      </div>
      <div>
        <div className="dlv-card-title">{d.name}</div>
        {d.desc && <div className="dlv-card-desc" style={{ marginTop: 6 }}>{d.desc}</div>}
      </div>
      <DlvProgress comp={comp} />
      <div className="dlv-card-foot">
        <span className="dlv-pm"><Avatar who={d.pm} size="sm" />{pm ? pm.short : "—"}</span>
        {proj && <span className="dlv-proj"><span className="pdot" style={{ background: proj.color }} />{proj.name}</span>}
        <span style={{ flex: 1 }} />
        <span className={`dlv-due ${comp.overdue ? "overdue" : ""}`}><Ic.Calendar size={12} />{fmtDate(d.due)}</span>
      </div>
    </div>
  );
}

function DeliverableTable({ items, onOpen }) {
  const { PROJECTS, ROLES } = window.TQ;
  return (
    <div className="dlv-table">
      <div className="dlv-trow head">
        <div className="dlv-th">Deliverable</div>
        <div className="dlv-th">Owner · PM</div>
        <div className="dlv-th">Priority</div>
        <div className="dlv-th hide-sm">Progress</div>
        <div className="dlv-th hide-sm">Status</div>
        <div className="dlv-th"></div>
      </div>
      {items.map(({ d, comp }) => {
        const proj = PROJECTS[d.project];
        return (
          <div className="dlv-trow" key={d.id} onClick={() => onOpen(d)}>
            <div className="dlv-tname">
              <div className="dlv-tname-t">{d.name}</div>
              <div className="dlv-tname-s">{d.id}{proj ? " · " + proj.name : ""}</div>
            </div>
            <div className="dlv-tcell"><span className="dlv-pm"><Avatar who={d.pm} size="sm" />{ROLES[d.pm] ? ROLES[d.pm].short : "—"}</span></div>
            <div className="dlv-tcell"><PrioChip priority={d.priority} /></div>
            <div className="dlv-tcell hide-sm"><DlvProgress comp={comp} /></div>
            <div className="dlv-tcell hide-sm"><DlvStatusBadge status={comp.status} /></div>
            <div className="dlv-tchevron"><Ic.ChevRight size={16} /></div>
          </div>
        );
      })}
    </div>
  );
}

function DeliverableBoard({ items, onOpen }) {
  const { DLV_STATUS, DLV_STATUS_ORDER, fmtDate } = window.TQ;
  const byStatus = {};
  DLV_STATUS_ORDER.forEach(k => { byStatus[k] = []; });
  items.forEach(it => byStatus[it.comp.status].push(it));
  return (
    <div className="dlv-board">
      {DLV_STATUS_ORDER.map(k => {
        const col = DLV_STATUS[k];
        const list = byStatus[k];
        return (
          <div className="dlv-bcol" key={k}>
            <div className="dlv-bcol-head">
              <span className="col-dot" style={{ background: col.color }} />
              <span className="dlv-bcol-name">{col.name}</span>
              <span className="dlv-bcol-count">{list.length}</span>
            </div>
            <div className="dlv-bcol-list">
              {list.length === 0 && <div className="dlv-bcol-empty">None</div>}
              {list.map(({ d, comp }) => (
                <div className="dlv-bcard" key={d.id} onClick={() => onOpen(d)}>
                  <div className="dlv-bcard-title">{d.name}</div>
                  <DlvProgress comp={comp} />
                  <div className="dlv-bcard-meta">
                    <PrioChip priority={d.priority} />
                    <span style={{ flex: 1 }} />
                    <Avatar who={d.pm} size="xs" />
                    <span className={`dlv-due ${comp.overdue ? "overdue" : ""}`}><Ic.Calendar size={11} />{fmtDate(d.due)}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

const PRIO_RANK = { high: 0, med: 1, low: 2 };
function sortItems(items) {
  return items.slice().sort((a, b) =>
    (Number(b.comp.overdue) - Number(a.comp.overdue)) ||
    (PRIO_RANK[a.d.priority] - PRIO_RANK[b.d.priority]) ||
    String(a.d.due).localeCompare(String(b.d.due)));
}

// ---------- DM page ----------
function DeliverablesPage({ project, deliverables, tasks, dmLayout, onOpen }) {
  const { computeDeliverable } = window.TQ;
  const [view, setView] = useStateD(() => localStorage.getItem("tq_dlv_view") || "list");
  useEffectD(() => { try { localStorage.setItem("tq_dlv_view", view); } catch (e) {} }, [view]);

  const scoped = project === "all" ? deliverables : deliverables.filter(d => d.project === project);
  const items = sortItems(scoped.map(d => ({ d, comp: computeDeliverable(d, tasks) })));

  return (
    <div>
      <div className="dlv-head">
        <div className="section-label">Delivery backlog</div>
        <span className="dlv-count">{items.length}</span>
        <div className="dlv-head-spacer" />
        <div className="view-toggle">
          <button className={view === "list" ? "on" : ""} onClick={() => setView("list")}><Ic.Inbox size={14} />List</button>
          <button className={view === "board" ? "on" : ""} onClick={() => setView("board")}><Ic.Layers size={14} />Board</button>
        </div>
      </div>
      {items.length === 0 ? (
        <div className="empty-state">
          <div className="es-ic"><Ic.Layers size={26} /></div>
          <h3>No deliverables yet</h3>
          <div>Create a deliverable and assign it to a Project Manager to get started.</div>
        </div>
      ) : view === "board" ? (
        <DeliverableBoard items={items} onOpen={onOpen} />
      ) : dmLayout === "table" ? (
        <DeliverableTable items={items} onOpen={onOpen} />
      ) : (
        <div className="dlv-grid">
          {items.map(({ d, comp }) => <DeliverableCard key={d.id} d={d} comp={comp} onOpen={onOpen} />)}
        </div>
      )}
    </div>
  );
}

// ---------- PM intake strip ----------
function PmDeliverablesStrip({ role, project, deliverables, tasks, onOpen, onAddTask }) {
  const { computeDeliverable, fmtDate } = window.TQ;
  let mine = deliverables.filter(d => d.pm === role);
  if (project !== "all") mine = mine.filter(d => d.project === project);
  const items = sortItems(mine.map(d => ({ d, comp: computeDeliverable(d, tasks) })));
  return (
    <div className="pm-intake">
      <div className="dlv-head" style={{ marginBottom: 12 }}>
        <div className="section-label">Deliverables assigned to you</div>
        <span className="dlv-count">{items.length}</span>
      </div>
      {items.length === 0 ? (
        <div className="pm-intake-empty">No deliverables assigned to you in this project yet. Your Delivery Manager will add them to the backlog.</div>
      ) : (
        <div className="pm-intake-grid">
          {items.map(({ d, comp }) => (
            <div className="pm-intake-card" key={d.id}>
              <span className="dlv-accent" style={{ background: comp.meta.color }} />
              <div className="pm-intake-top">
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="pm-intake-title" onClick={() => onOpen(d)}>{d.name}</div>
                  <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 7 }}>
                    <span className="dlv-id">{d.id}</span>
                    <PrioChip priority={d.priority} />
                  </div>
                </div>
                <DlvStatusBadge status={comp.status} />
              </div>
              <DlvProgress comp={comp} />
              <div className="pm-intake-foot">
                <span className={`dlv-due ${comp.overdue ? "overdue" : ""}`}><Ic.Calendar size={12} />{fmtDate(d.due)}</span>
                <span style={{ flex: 1 }} />
                {comp.status !== "accepted" && (
                  <button className="dlv-mini-btn" onClick={() => onAddTask(d)}><Ic.Plus size={13} />Add task</button>
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ---------- deliverable detail ----------
function DeliverableDetailModal({ d, role, tasks, onClose, onComment, onAccept, onAddTask, onOpenTask }) {
  const { fmtDate, relDue, daysUntil, computeDeliverable, COLUMNS, ROLES, PROJECTS } = window.TQ;
  const r = ROLES[role];
  const comp = computeDeliverable(d, tasks);
  const pm = ROLES[d.pm];
  const proj = PROJECTS[d.project];
  const isDM = r.type === "dm";
  const isOwnerPM = r.type === "pm" && d.pm === role;
  const overdue = comp.overdue;
  const [text, setText] = useStateD("");

  function submit() { if (!text.trim()) return; onComment(d, text.trim()); setText(""); }

  return (
    <ModalShell icon={Ic.Layers} iconColor={comp.meta.color} title={d.name} wide
      desc={<span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>{d.id}<span style={{ color: "var(--border-strong)" }}>·</span><span className="dlv-proj"><span className="pdot" style={{ background: proj ? proj.color : "#888" }} />{proj ? proj.name : "—"}</span></span>}
      onClose={onClose}
      footer={
        <>
          {isOwnerPM && comp.status !== "accepted" && (
            <button className="btn btn-primary" onClick={() => onAddTask(d)}><Ic.Plus size={15} />Break down — add task</button>
          )}
          {isDM && comp.status === "delivered" && (
            <button className="btn btn-success" onClick={() => onAccept(d)}><Ic.Check size={15} />Accept delivery</button>
          )}
          <span className="spacer" />
          <button className="btn btn-ghost" onClick={onClose}>Close</button>
        </>
      }>

      {comp.status === "delivered" && (
        <div className="approval-box done">
          <div className="approval-title"><Ic.CheckCircle size={15} style={{ color: "var(--green)" }} />All tasks complete</div>
          <div className="approval-meta">{isDM ? "Review the breakdown and accept this delivery to close it out." : "Delivered — awaiting sign-off from Delivery."}</div>
        </div>
      )}
      {comp.status === "accepted" && (
        <div className="approval-box done" style={{ background: "var(--purple-soft)", borderColor: "rgba(139,124,246,0.4)" }}>
          <div className="approval-title"><Ic.CheckCircle size={15} style={{ color: "var(--purple)" }} />Accepted by Delivery</div>
          <div className="approval-meta">This deliverable is signed off and closed.</div>
        </div>
      )}
      {overdue && comp.status !== "accepted" && comp.status !== "delivered" && (
        <div className="approval-box" style={{ background: "var(--red-soft)", borderColor: "rgba(235,87,87,0.35)" }}>
          <div className="approval-title"><Ic.Alert size={15} style={{ color: "var(--red)" }} />At risk</div>
          <div className="approval-meta">One or more tasks are overdue — see the breakdown below.</div>
        </div>
      )}

      <div className="dlv-meta-grid">
        <div className="dlv-meta"><div className="dlv-meta-k">Assigned PM</div><div className="dlv-meta-v"><Avatar who={d.pm} size="sm" />{pm ? pm.name : "—"}</div></div>
        <div className="dlv-meta"><div className="dlv-meta-k">Target date</div><div className="dlv-meta-v" style={overdue ? { color: "var(--red)" } : {}}>{fmtDate(d.due)} · {relDue(d.due)}</div></div>
        <div className="dlv-meta"><div className="dlv-meta-k">Priority</div><div className="dlv-meta-v"><PrioChip priority={d.priority} /></div></div>
        <div className="dlv-meta"><div className="dlv-meta-k">Status</div><div className="dlv-meta-v"><DlvStatusBadge status={comp.status} /></div></div>
      </div>

      {d.desc && <div className="dlv-desc-box">{d.desc}</div>}

      <div className="section-label">Breakdown · {comp.done}/{comp.total} tasks done</div>
      <div style={{ marginBottom: 18 }}>
        {comp.total === 0 ? (
          <div className="dlv-subtasks-empty">{isOwnerPM ? "Not broken down yet — add the first task for your team." : "The PM hasn't broken this down into tasks yet."}</div>
        ) : comp.kids.map(t => {
          const col = COLUMNS.find(c => c.key === t.status);
          const od = t.status !== "done" && daysUntil(t.due) < 0;
          return (
            <div className="dlv-subtask" key={t.id}>
              <span className="dlv-dot" style={{ background: col.color }} />
              <span className="dlv-subtask-t" onClick={() => onOpenTask && onOpenTask(t)}>{t.name}</span>
              <Avatar who={t.assignee} size="xs" />
              <span className={`dlv-subtask-due ${od ? "overdue" : ""}`}>{od ? relDue(t.due) : fmtDate(t.due)}</span>
              <span className="badge" style={{ background: col.color + "22", color: col.color }}>{col.name}</span>
            </div>
          );
        })}
      </div>

      <div className="section-label">Updates</div>
      <div className="comment-list">
        {(!d.comments || d.comments.length === 0) && <div className="comment-empty">No updates yet.</div>}
        {d.comments && d.comments.map((c, i) => (
          <div className="comment" key={i}>
            <Avatar who={c.author} size="sm" />
            <div className={`comment-body ${c.system ? "comment-sys" : ""}`}>
              <div className="comment-top">
                <span className="comment-author">{ROLES[c.author] ? ROLES[c.author].name : "—"}</span>
                <span className="comment-role">{ROLES[c.author] ? ROLES[c.author].label : ""}</span>
                <span className="comment-time">{c.time}</span>
              </div>
              <div className="comment-text">{c.text}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="comment-compose">
        <Avatar who={role} size="sm" />
        <textarea className="textarea" style={{ minHeight: 56 }} placeholder="Post an update…" value={text}
          onChange={e => setText(e.target.value)} onKeyDown={e => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") submit(); }} />
      </div>
      <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 10 }}>
        <button className="btn btn-primary" disabled={!text.trim()} onClick={submit}><Ic.Send size={14} />Post update</button>
      </div>
    </ModalShell>
  );
}

// ---------- create deliverable (DM) ----------
function CreateDeliverableModal({ onClose, onCreate }) {
  const { ROLES, PROJECTS, PRIORITY, projectsOf, isoFromOffset } = window.TQ;
  const pms = Object.values(ROLES).filter(x => x.type === "pm");
  const [name, setName] = useStateD("");
  const [pm, setPm] = useStateD(pms[0] ? pms[0].key : "");
  const [priority, setPriority] = useStateD("med");
  const [due, setDue] = useStateD(isoFromOffset(21));
  const [desc, setDesc] = useStateD("");

  const pmProjects = pm && ROLES[pm] ? projectsOf(ROLES[pm]) : [];
  const [proj, setProj] = useStateD(pmProjects[0] || Object.keys(PROJECTS)[0] || "");
  useEffectD(() => {
    const list = pm && ROLES[pm] ? projectsOf(ROLES[pm]) : [];
    if (list.length && list.indexOf(proj) < 0) setProj(list[0]);
  }, [pm]);

  const noPMs = pms.length === 0;
  const valid = name.trim() && pm && proj && due;

  return (
    <ModalShell icon={Ic.Layers} iconColor="#5E6AD2" title="New deliverable" wide
      desc="Assign a unit of work to a Project Manager" onClose={onClose}
      footer={<><button className="btn btn-ghost" onClick={onClose}>Cancel</button><span className="spacer" /><button className="btn btn-primary" disabled={!valid} onClick={() => onCreate({ name: name.trim(), pm, project: proj, priority, due, desc: desc.trim() })}><Ic.Plus size={15} />Create deliverable</button></>}>
      <div className="field">
        <label className="field-label">Title <span className="req">*</span></label>
        <input className="input" autoFocus placeholder="e.g. Customer Portal v2" value={name} onChange={e => setName(e.target.value)} />
      </div>
      <div className="field">
        <label className="field-label">Assign to Project Manager <span className="req">*</span></label>
        {noPMs ? (
          <div className="comment-empty" style={{ padding: "12px 4px" }}>No Project Managers yet — ask an admin to add one.</div>
        ) : (
          <div className="assignee-grid">
            {pms.map(p => (
              <div key={p.key} className={`assignee-opt ${pm === p.key ? "sel" : ""}`} onClick={() => setPm(p.key)}>
                <Avatar who={p.key} size="sm" />
                <span className="ao-name" style={{ flex: 1 }}>{p.name}</span>
                <span style={{ fontSize: 11, color: "var(--faint)", fontWeight: 600, whiteSpace: "nowrap" }}>{projectsOf(p).map(k => PROJECTS[k] ? PROJECTS[k].name : k).join(", ") || "—"}</span>
                <span className="ao-check"><Ic.Check size={16} /></span>
              </div>
            ))}
          </div>
        )}
      </div>
      {pmProjects.length > 1 && (
        <div className="field">
          <label className="field-label">Project <span style={{ color: "var(--faint)", fontWeight: 500 }}>· this PM covers several</span></label>
          <select className="select-field" value={proj} onChange={e => setProj(e.target.value)}>
            {pmProjects.map(k => <option key={k} value={k}>{PROJECTS[k] ? PROJECTS[k].name : k}</option>)}
          </select>
        </div>
      )}
      {pmProjects.length <= 1 && (
        <div className="field">
          <label className="field-label">Project <span style={{ color: "var(--faint)", fontWeight: 500 }}>· optional</span></label>
          <select className="select-field" value={proj} onChange={e => setProj(e.target.value)}>
            {Object.values(PROJECTS).map(p => <option key={p.key} value={p.key}>{p.name}</option>)}
          </select>
        </div>
      )}
      <div className="field">
        <label className="field-label">Priority</label>
        <div className="prio-grid">
          {Object.values(PRIORITY).map(p => (
            <div key={p.key} className={`prio-opt ${priority === p.key ? "sel" : ""}`} onClick={() => setPriority(p.key)}
              style={priority === p.key ? { borderColor: p.color, boxShadow: `inset 0 0 0 1px ${p.color}` } : {}}>
              <span className="prio-dot" style={{ background: p.color }} />{p.name}
            </div>
          ))}
        </div>
      </div>
      <div className="field">
        <label className="field-label">Target date <span className="req">*</span></label>
        <DateField value={due} onChange={setDue} min={isoFromOffset(0)} />
      </div>
      <div className="field">
        <label className="field-label">Description / brief</label>
        <textarea className="textarea" placeholder="What needs to be delivered, scope, acceptance criteria…" value={desc} onChange={e => setDesc(e.target.value)} />
      </div>
    </ModalShell>
  );
}

Object.assign(window, {
  DmDashboard, DeliverablesPage, PmDeliverablesStrip,
  DeliverableDetailModal, CreateDeliverableModal,
});