/* TMD Portal — work management screens. */
const { useState: uS, useMemo: uM } = React;

/* ================= Dashboard ================= */
function Dashboard({ app }) {
  const { role, go, dels, tasks } = app;
  if (role === 'Intern' || role === 'Executive') return <MyTasks app={app} />;

  const live = dels.filter(isLive);
  const overdue = live.filter(isOverdue);
  const waiting = live.filter(d => stageMeta(d).sem === 'waiting');
  const blocked = live.filter(d => stageMeta(d).sem === 'blocked');
  const published = dels.filter(d => d.published);
  const owner = role === 'Owner';

  const retainer = T.clients.filter(c => c.status === 'Active').reduce((s, c) => s + c.retainer, 0);
  const inv = T.invoices;
  const invoiced = inv.filter(i => i.status !== 'draft').reduce((s, i) => s + i.lines.reduce((a, l) => a + l.amount, 0), 0);
  const collected = inv.reduce((s, i) => s + i.payments.reduce((a, p) => a + p.amount, 0), 0);
  const outstanding = invoiced - collected;
  const overdueAr = inv.filter(i => i.status === 'overdue').reduce((s, i) => s + i.lines.reduce((a, l) => a + l.amount, 0) - i.payments.reduce((a, p) => a + p.amount, 0), 0);
  const spend = T.expenses.reduce((s, e) => s + (e.paidBy === 'TMD' ? e.amount : 0), 0);

  return (
    <div className="page">
      <PageHead title={owner ? 'Today' : 'Desk today'} sub={owner ? longToday() + ' · what needs you' : 'What needs you this week'} />

      {owner ? (
        <>
          <Eyebrow n="01">Money this month</Eyebrow>
          <div className="stats">
            <Stat label="Recurring retainer" value={money(retainer, { bare: true })} sub={T.clients.filter(c => c.status === 'Active').length + ' active clients'} onClick={() => go('clients')} />
            <Stat label={'Invoiced — ' + monthLabel(-1)} value={money(invoiced, { bare: true })} sub={inv.filter(i => i.status !== 'draft').length + ' issued · ' + inv.filter(i => i.status === 'draft').length + ' draft'} onClick={() => go('invoices')} />
            <Stat label="Collected" value={money(collected, { bare: true })} sub={inv.filter(i => i.status === 'paid').length + ' paid in full'} onClick={() => go('invoices')} />
            <Stat label="Outstanding" value={money(outstanding, { bare: true })} sub={money(overdueAr, { bare: true }) + ' overdue'} tone={overdueAr > 0 ? 'bad' : null} onClick={() => go('invoices')} />
            <Stat label="Expenses paid by TMD" value={money(spend, { bare: true })} sub={T.expenses.length + ' logged'} onClick={() => go('expenses')} />
            <Stat label={'Published — ' + monthLabel(0)} value={String(published.length)} sub={overdue.length + ' deliverables overdue'} tone={overdue.length ? 'bad' : null} onClick={() => go('board')} />
          </div>
        </>
      ) : null}

      <Eyebrow n={owner ? '02' : '01'}>Work that is stuck</Eyebrow>
      <div className="grid2">
        <div className="panel">
          <div className="panel-h"><b>Waiting on someone</b><em className="num">{waiting.length + blocked.length}</em></div>
          {blocked.concat(waiting).map(d => (
            <button key={d.id} type="button" className="wrow" onClick={() => go('del:' + d.id)}>
              <span className="wrow-t">{d.title}<em>{client(d.client).name} · {typeOf(d.type).name}</em></span>
              <Status d={d} size="sm" />
              <DateCell iso={d.due} />
            </button>
          ))}
        </div>
        <div className="panel">
          <div className="panel-h"><b>Overdue</b><em className="num">{overdue.length}</em></div>
          {overdue.length ? overdue.sort((a, b) => a.due.localeCompare(b.due)).map(d => (
            <button key={d.id} type="button" className="wrow" onClick={() => go('del:' + d.id)}>
              <span className="wrow-t">{d.title}<em>{client(d.client).name} · {person(d.assignee).name}</em></span>
              <DateCell iso={d.due} />
            </button>
          )) : <Empty title="Nothing overdue." hint="The next deadline is 17 Aug." />}
        </div>
      </div>

      <Eyebrow n={owner ? '03' : '02'}>This week, by person</Eyebrow>
      <WorkloadStrip app={app} compact />

      <Eyebrow n={owner ? '04' : '03'}>Published this month</Eyebrow>
      <div className="pubrow">
        <Stat label="Published" value={String(published.length)} sub="Aug 1 – 14" onClick={() => go('board')} />
        <Stat label="In production" value={String(live.length - waiting.length - blocked.length)} onClick={() => go('board')} />
        <Stat label="Approval queue" value={String(waiting.length)} tone="wait" onClick={() => go('board')} />
      </div>
    </div>
  );
}

/* ================= Work board + list ================= */
function Board({ app }) {
  const { go, dels } = app;
  const [view, setView] = uS(app.mobile ? 'list' : 'board');
  const [type, setType] = uS('reel');
  const [cl, setCl] = uS('all');
  const [asg, setAsg] = uS('all');
  const [win, setWin] = uS('all');

  const match = d => (cl === 'all' || d.client === cl) && (asg === 'all' || d.assignee === asg) &&
    (win === 'all' || (win === 'over' ? isOverdue(d) : win === 'week' ? dayDiff(d.due) <= 7 && dayDiff(d.due) >= 0 : true));
  const list = dels.filter(match);
  const boardList = list.filter(d => d.type === type);
  const stages = typeOf(type).stages;

  const filters = (
    <div className="filters">
      <Filter label="Client" value={cl} onChange={setCl} options={[{ v: 'all', l: 'All clients' }].concat(T.clients.map(c => ({ v: c.id, l: c.name })))} />
      <Filter label="Assignee" value={asg} onChange={setAsg} options={[{ v: 'all', l: 'Everyone' }].concat(T.people.filter(p => p.id !== 'un').map(p => ({ v: p.id, l: p.name })))} />
      <Filter label="Due" value={win} onChange={setWin} options={[{ v: 'all', l: 'Any date' }, { v: 'week', l: 'Next 7 days' }, { v: 'over', l: 'Overdue' }]} />
    </div>
  );

  return (
    <div className="page">
      <PageHead title="Work" sub="Pipelines differ per type. A reel and a blog do not share stages." count={list.length}
        actions={<><Seg value={view} onChange={setView} options={[{ v: 'board', l: 'Board' }, { v: 'list', l: 'List' }]} /><Btn kind="primary">New deliverable</Btn></>} />
      {view === 'board' ? (
        <>
          <div className="typetabs">{T.types.map(t => <button key={t.id} type="button" className={'tt' + (t.id === type ? ' on' : '')} onClick={() => setType(t.id)}>{t.name}<em className="num">{dels.filter(d => d.type === t.id).length}</em></button>)}</div>
          {filters}
          <div className="board">
            {stages.map(s => {
              const col = boardList.filter(d => stageMeta(d).name === s.name);
              return (
                <div key={s.name} className={'col col-' + s.sem}>
                  <div className="col-h"><span>{s.name}</span><em className="num">{col.length}</em></div>
                  {s.approval ? <div className="col-note">{s.approval === 'client' ? 'Client approval — recorded by staff' : 'Manager approval'}</div> : null}
                  <div className="col-b">
                    {col.map(d => (
                      <button key={d.id} type="button" className={'kcard' + (isOverdue(d) ? ' kcard-od' : '')} onClick={() => go('del:' + d.id)}>
                        <span className="kref num">{d.ref}</span>
                        <span className="ktitle">{d.title}</span>
                        <span className="kmeta"><span className="cl-dot" data-kind={client(d.client).kind}></span>{client(d.client).name}</span>
                        <span className="kfoot"><Avatar id={d.assignee} size={22} /><DateCell iso={d.due} live={isLive(d)} /></span>
                      </button>
                    ))}
                    {col.length === 0 ? <div className="col-empty">Nothing here</div> : null}
                  </div>
                </div>
              );
            })}
          </div>
        </>
      ) : (
        <>
          {filters}
          <DelTable list={list} go={go} mobile={app.mobile} />
        </>
      )}
    </div>
  );
}

function DelTable({ list, go, mobile }) {
  if (!list.length) return <Empty title="No deliverables match these filters." hint="Clear a filter, or start a new one." action={<Btn kind="primary">New deliverable</Btn>} />;
  if (mobile) return (
    <div className="mlist">
      {list.map(d => (
        <button key={d.id} type="button" className="mrow" onClick={() => go('del:' + d.id)}>
          <span className="mrow-top"><span className="num ref">{d.ref}</span><DateCell iso={d.due} live={isLive(d)} /></span>
          <span className="mrow-t">{d.title}</span>
          <span className="mrow-b"><Status d={d} size="sm" /><span className="muted">{client(d.client).name}</span><Avatar id={d.assignee} size={22} /></span>
        </button>
      ))}
    </div>
  );
  return (
    <table className="tbl">
      <thead><tr><th>Ref</th><th>Deliverable</th><th>Client</th><th>Type</th><th>Stage</th><th>Owner</th><th className="r">Due</th></tr></thead>
      <tbody>
        {list.map(d => (
          <tr key={d.id} onClick={() => go('del:' + d.id)} tabIndex={0} onKeyDown={e => e.key === 'Enter' && go('del:' + d.id)}>
            <td className="num muted">{d.ref}</td>
            <td className="strong">{d.title}</td>
            <td><span className="cl-dot" data-kind={client(d.client).kind}></span>{client(d.client).name}</td>
            <td className="muted">{typeOf(d.type).name}</td>
            <td><Status d={d} size="sm" /></td>
            <td><Who id={d.assignee} /></td>
            <td className="r"><DateCell iso={d.due} live={isLive(d)} /></td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

/* ================= My tasks ================= */
function MyTasks({ app }) {
  const { tasks, setDone, go, me, role } = app;
  const mine = tasks.filter(t => t.who === me);
  const open = mine.filter(t => t.state !== 'done');
  const groups = [
    { k: 'Overdue', items: open.filter(t => dayDiff(t.due) < 0), tone: 'bad' },
    { k: 'Today', items: open.filter(t => dayDiff(t.due) === 0) },
    { k: 'This week', items: open.filter(t => dayDiff(t.due) > 0 && dayDiff(t.due) <= 7) },
    { k: 'Later', items: open.filter(t => dayDiff(t.due) > 7) },
    { k: 'Done', items: mine.filter(t => t.state === 'done'), done: true }
  ].filter(g => g.items.length);

  return (
    <div className="page">
      <PageHead title="My tasks" sub={role === 'Owner' ? 'Yours only. The rest of the desk is on Workload.' : open.length + ' open · ' + person(me).name} />
      {open.length === 0 ? <Empty title="Nothing is assigned to you." hint="When a manager assigns work it appears here first." /> : null}
      {groups.map(g => (
        <div key={g.k} className="tgroup">
          <div className={'tgroup-h' + (g.tone === 'bad' ? ' bad' : '')}>{g.k}<em className="num">{g.items.length}</em></div>
          {g.items.map(t => (
            <div key={t.id} className={'task' + (g.done ? ' task-done' : '')}>
              <button type="button" className={'tick' + (g.done ? ' on' : '')} aria-label="Mark done" onClick={() => setDone(t.id)}></button>
              <div className="task-b">
                <div className="task-t">{t.title}</div>
                <div className="task-m">
                  <DateCell iso={t.due} live={!g.done} />
                  {t.del ? <button type="button" className="link" onClick={() => go('del:' + t.del)}>{byId(T.deliverables, t.del).ref} · {client(byId(T.deliverables, t.del).client).name}</button> : <span className="muted">Standalone</span>}
                </div>
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

/* ================= Deliverable detail ================= */
function DelDetail({ app, id }) {
  const d = byId(app.dels, id);
  const [tab, setTab] = uS('Brief');
  const [comment, setComment] = uS('');
  const [rec, setRec] = uS(false);
  if (!d) return <Empty title="That deliverable no longer exists." />;
  const t = typeOf(d.type), m = stageMeta(d), c = client(d.client);
  const idx = t.stages.findIndex(s => s.name === m.name);
  const copy = (d.copy || []).slice().sort((a, b) => b.v - a.v);
  const [ver, setVer] = uS(copy.length ? copy[0].v : 0);
  const cur = copy.find(x => x.v === ver);
  const ap = d.approvals || {};

  const Brief = (
    <section className="blk">
      <h4>Brief</h4>
      <p className="prose">{d.brief || 'No brief written yet. Ask the requester for one line on what this is for — that is enough to start.'}</p>
      {d.blockedNote ? <div className="blocknote"><b>Blocked</b>{d.blockedNote}</div> : null}
      <h4>Assets</h4>
      {(d.assets || []).length ? (
        <ul className="links">{d.assets.map((a, i) => <li key={i}><span>{a.label}</span><a href="#" onClick={e => e.preventDefault()} className="num">{a.url}</a></li>)}</ul>
      ) : <Empty title="No links yet." hint="Paste the Canva or Drive URL when there is something to look at. Files live where they were made — nothing is stored here." action={<Btn sm>Add link</Btn>} />}
      {(d.assets || []).length ? <Btn sm kind="secondary">Add link</Btn> : null}
      {d.published ? <div className="pub"><b>Published</b><span className="num">{d.published.url}</span><DateCell iso={d.published.date} live={false} /></div> : null}
    </section>
  );

  const Copy = (
    <section className="blk">
      <div className="blk-h"><h4>Copy</h4>{copy.length ? <div className="vers">{copy.map(v => <button key={v.v} type="button" className={'vchip num' + (v.v === ver ? ' on' : '')} onClick={() => setVer(v.v)}>v{v.v}</button>)}</div> : null}</div>
      {cur ? (
        <>
          <div className="vmeta">v{cur.v} · {person(cur.author).name} · <span className="num">{cur.at.replace('2026-08-', '').replace('-', ' ')}</span>{cur.v !== copy[0].v ? <em className="ro">Read only — older version</em> : null}</div>
          <div className="copybox">{cur.text}</div>
          {cur.v === copy[0].v && app.role !== 'Intern' ? (
            <div className="row gap8 wrap"><Btn kind="primary" sm onClick={() => app.toast('Copy v' + cur.v + ' approved')}>Approve copy</Btn><Btn kind="secondary" sm onClick={() => app.toast('Changes requested — Maneesha notified', true)}>Request changes</Btn></div>
          ) : null}
        </>
      ) : <Empty title="No copy written yet." hint="Whoever writes it first creates v1. Every save after that is a new version — nothing is overwritten." action={<Btn kind="primary" sm>Write v1</Btn>} />}
      <h4 className="mt">Comments</h4>
      <div className="thread">
        {(d.comments || []).map((c2, i) => (
          <div key={i} className="cmt"><Avatar id={c2.author} size={26} /><div><b>{person(c2.author).name}</b><em className="num"> · {c2.at.slice(5).replace('-', '/')} · on v{c2.on}</em><p>{c2.text}</p></div></div>
        ))}
        {!(d.comments || []).length ? <p className="muted sm">No comments. Type below to start the thread — mention with @.</p> : null}
        <div className="cmtbox"><textarea rows={2} value={comment} placeholder="Comment. @ to mention." onChange={e => setComment(e.target.value)} /><Btn sm disabled={!comment.trim()} onClick={() => { setComment(''); app.toast('Comment added', true); }}>Comment</Btn></div>
      </div>
    </section>
  );

  const Activity = (
    <section className="blk">
      <h4>Approvals</h4>
      <div className="aps">
        <div className={'ap ' + (ap.internal && ap.internal.state === 'approved' ? 'ap-ok' : ap.internal && ap.internal.state === 'pending' ? 'ap-wait' : '')}>
          <b>Internal</b>
          {ap.internal && ap.internal.state === 'approved' ? <span>Approved by {person(ap.internal.by).name} · <span className="num">{fmtDate(ap.internal.at.slice(0, 10))}</span></span>
            : ap.internal && ap.internal.state === 'pending' ? <span>Waiting on Safiya since <span className="num">13 Aug</span></span> : <span className="muted">Not reached yet</span>}
          {ap.internal && ap.internal.state === 'pending' && app.role !== 'Intern' ? <Btn sm kind="primary" onClick={() => app.toast('Internal approval recorded')}>Approve</Btn> : null}
        </div>
        <div className={'ap ' + (ap.client && ap.client.required ? (ap.client.state === 'approved' ? 'ap-ok' : 'ap-wait') : 'ap-na')}>
          <b>Client</b>
          {!(ap.client && ap.client.required) ? <span className="muted">Not required — {c.name} is an in-house brand</span>
            : ap.client.state === 'approved' ? <span>Recorded: {ap.client.by} · <span className="num">{fmtDate(ap.client.at)}</span></span>
              : <><span>Waiting on {c.contacts[0].name}{ap.client.chased ? <em> · chased {fmtDate(ap.client.chased)}</em> : null}</span><Btn sm kind="primary" onClick={() => setRec(true)}>Record approval</Btn></>}
        </div>
      </div>
      {ap.client && ap.client.required && ap.client.state !== 'approved' ? <p className="fine">Clients do not log in. Whoever hears back on WhatsApp records it here, in their own name.</p> : null}
      <h4 className="mt">Activity</h4>
      <ol className="acts">{(d.activity || [{ who: 'sa', at: '2026-08-08 09:00', what: 'created this deliverable' }]).map((a, i) => (
        <li key={i}><span className="num">{a.at.slice(5).replace('-', '/')}</span> <b>{person(a.who).name}</b> {a.what}</li>))}
      </ol>
    </section>
  );

  const header = (
    <div className="dhead">
      <button type="button" className="back" onClick={() => app.go('board')}>← Work</button>
      <div className="dhead-top"><span className="num ref">{d.ref}</span><span className="cl-dot" data-kind={c.kind}></span><span>{c.name}</span><span className="dot">·</span><span>{t.name}</span>{d.priority === 'High' ? <span className="prio">High priority</span> : null}</div>
      <h1><Dsp t={d.title} /></h1>
      <div className="dhead-meta">
        <span><em>Stage</em><Status d={d} /></span>
        <span><em>Due</em><DateCell iso={d.due} live={isLive(d)} /></span>
        <span><em>Owner</em><Who id={d.assignee} /></span>
      </div>
      <div className="stageline">
        {t.stages.map((s, i) => <span key={s.name} className={'sl' + (i < idx ? ' past' : i === idx ? ' now sl-' + m.sem : '')} title={s.name}><i></i><em>{s.name}</em></span>)}
      </div>
      {app.role !== 'Intern' || d.assignee === app.me ? <div className="row gap8 wrap mt"><Btn kind="primary" onClick={() => app.advance(d.id)}>{idx < t.stages.length - 1 ? 'Move to ' + t.stages[idx + 1].name : 'Published'}</Btn><Btn kind="secondary">Reassign</Btn><Btn kind="secondary">Change due date</Btn></div> : null}
    </div>
  );

  return (
    <div className="page page-del">
      {header}
      {app.mobile ? (
        <>
          <div className="dtabs"><Seg value={tab} onChange={setTab} options={['Brief', 'Copy', 'Approvals']} /></div>
          {tab === 'Brief' ? Brief : tab === 'Copy' ? Copy : Activity}
        </>
      ) : (
        <div className="dgrid"><div>{Copy}</div><div>{Brief}{Activity}</div></div>
      )}
      <Sheet open={rec} onClose={() => setRec(false)} title="Record client approval"
        footer={<><Btn kind="secondary" onClick={() => setRec(false)}>Cancel</Btn><Btn kind="primary" onClick={() => { setRec(false); app.toast('Client approval recorded'); }}>Record approval</Btn></>}>
        <p className="sm muted">You are recording that {c.contacts[0].name} approved this, not approving on their behalf. Your name is stored against it.</p>
        <DS.Field label="APPROVED BY" value={c.contacts[0].name} onChange={() => {}} style={{ marginBottom: 16 }} />
        <label className="tf"><span>Date</span><input type="date" defaultValue={T.TODAY} /></label>
        <label className="tf"><span>Recorded by</span><input defaultValue={person(app.me).name} disabled /></label>
      </Sheet>
    </div>
  );
}

/* ================= Clients ================= */
function Clients({ app }) {
  const { go, dels } = app;
  return (
    <div className="page">
      <PageHead title="Clients" count={T.clients.length} sub="The group’s own brands. External clients are added as they sign." actions={<Btn kind="primary">Add client</Btn>} />
      <table className="tbl">
        <thead><tr><th>Client</th><th>Type</th><th>Industry</th><th>Status</th><th className="r">Retainer / month</th><th className="r">Open work</th></tr></thead>
        <tbody>
          {T.clients.map(c => (
            <tr key={c.id} onClick={() => go('client:' + c.id)} tabIndex={0}>
              <td className="strong"><span className="cl-dot" data-kind={c.kind}></span>{c.name}</td>
              <td className="muted">{c.kind === 'internal' ? 'In-house' : 'External'}</td>
              <td className="muted">{c.industry}</td>
              <td>{c.status}</td>
              <td className="r num">{money(c.retainer, { bare: true })}</td>
              <td className="r num">{dels.filter(d => d.client === c.id && isLive(d)).length}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function ClientDetail({ app, id }) {
  const c = byId(T.clients, id);
  const work = app.dels.filter(d => d.client === id);
  const exp = T.expenses.filter(e => e.client === id);
  const inv = T.invoices.filter(i => i.client === id);
  return (
    <div className="page">
      <button type="button" className="back" onClick={() => app.go('clients')}>← Clients</button>
      <PageHead title={c.name} sub={(c.kind === 'internal' ? 'In-house brand' : 'External client') + ' · ' + c.industry + ' · ' + money(c.retainer) + ' a month'} />
      <div className="grid2">
        <div className="panel">
          <div className="panel-h"><b>Retainer history</b></div>
          <ul className="hist">{c.history.map((h, i) => <li key={i}><span className="num">{fmtDate(h.from, true)}</span><b className="num">{money(h.amount, { bare: true })}</b>{i === 0 ? <em>Current</em> : <em className="muted">Until {fmtDate(c.history[i - 1].from, true)}</em>}</li>)}</ul>
        </div>
        <div className="panel">
          <div className="panel-h"><b>Contacts</b></div>
          <ul className="hist">{c.contacts.map((k, i) => <li key={i}><b>{k.name}</b><span className="muted">{k.role}</span><em className="num">{k.channel}</em></li>)}</ul>
          <div className="panel-h mt"><b>Notes</b></div>
          <p className="prose sm">{c.notes}</p>
        </div>
      </div>
      <Eyebrow n="01">Work</Eyebrow>
      <DelTable list={work} go={app.go} mobile={app.mobile} />
      {app.canMoney ? (
        <>
          <Eyebrow n="02">Invoices</Eyebrow>
          <table className="tbl"><thead><tr><th>Number</th><th>Period</th><th>Status</th><th className="r">Total</th></tr></thead>
            <tbody>{inv.map(i => <tr key={i.id} onClick={() => app.go('inv:' + i.id)}><td className="num">{i.no}</td><td>{i.period}</td><td><span className={'ic ic-' + i.status.replace(' ', '')}>{i.status}</span></td><td className="r num">{money(i.lines.reduce((s, l) => s + l.amount, 0), { bare: true })}</td></tr>)}</tbody></table>
          <Eyebrow n="03">Expenses</Eyebrow>
          <table className="tbl"><thead><tr><th>Date</th><th>Expense</th><th>Paid by</th><th className="r">Amount</th></tr></thead>
            <tbody>{exp.map(e => <tr key={e.id}><td className="num">{fmtDate(e.date)}</td><td>{e.desc}</td><td className="muted">{e.paidBy}</td><td className="r num">{money(e.amount, { bare: true })}</td></tr>)}</tbody></table>
        </>
      ) : null}
    </div>
  );
}

/* ================= People + workload ================= */
function People({ app }) {
  const owner = app.role === 'Owner';
  const staff = T.people.filter(p => p.id !== 'un');
  return (
    <div className="page">
      <PageHead title="People" count={staff.length} actions={<Btn kind="primary">Add person</Btn>} />
      <table className="tbl">
        <thead><tr><th>Name</th><th>Role</th><th>Basis</th><th>Joined</th><th className="r">Open work</th></tr></thead>
        <tbody>{staff.map(p => (
          <tr key={p.id}><td className="strong"><Who id={p.id} /></td><td>{p.role}</td><td className="muted">{p.basis}</td><td className="num">{fmtDate(p.joined, true)}</td><td className="r num">{app.dels.filter(d => d.assignee === p.id && isLive(d)).length}</td></tr>
        ))}</tbody>
      </table>
      {owner ? (
        <div className="quarantine">
          <div className="q-h"><Eyebrow>Owner only</Eyebrow><b>Cost per person</b><span>Effective-dated. Nobody else sees this panel — it does not exist for them.</span></div>
          <table className="tbl tbl-q">
            <thead><tr><th>Name</th><th>Effective from</th><th className="r">Monthly cost</th></tr></thead>
            <tbody>{staff.filter(p => p.cost).map(p => <tr key={p.id}><td>{p.name}</td><td className="num">{fmtDate(p.costFrom, true)}</td><td className="r num">{money(p.cost, { bare: true })}</td></tr>)}</tbody>
          </table>
        </div>
      ) : null}
    </div>
  );
}

function WorkloadStrip({ app, compact }) {
  const staff = T.people.filter(p => p.id !== 'un');
  const week = d => isLive(d) && dayDiff(d.due) <= 7;
  return (
    <div className="wl">
      {staff.map(p => {
        const mine = app.dels.filter(d => d.assignee === p.id && week(d));
        const od = mine.filter(isOverdue);
        return (
          <div key={p.id} className="wl-p">
            <div className="wl-h"><Who id={p.id} /><span className="wl-n num">{mine.length} due{od.length ? <em className="od-n"> · {od.length} over</em> : null}</span></div>
            <ul>{mine.slice(0, compact ? 4 : 20).map(d => (
              <li key={d.id}><button type="button" onClick={() => app.go('del:' + d.id)}><span>{d.title}</span><DateCell iso={d.due} /></button></li>
            ))}
              {!mine.length ? <li className="wl-free">Free this week — give her something.</li> : null}
            </ul>
          </div>
        );
      })}
    </div>
  );
}
function Workload({ app }) {
  return (
    <div className="page">
      <PageHead title="Workload" sub="Who has what due in the next seven days. Counts, not capacity percentages — the desk is three people, you can see it." />
      <WorkloadStrip app={app} />
      <p className="fine">Unassigned work is not counted against anyone. Two deliverables have no owner.</p>
    </div>
  );
}

Object.assign(window, { Dashboard, Board, DelTable, MyTasks, DelDetail, Clients, ClientDetail, People, Workload, WorkloadStrip });