View all campaigns →} > c.status === 'scheduled' || c.status === 'in-production').slice(0, 5)} cols={[ { label: 'Customer', w: '1.5fr', render: c => {c.customer_shop} }, { label: 'Drop', w: '1fr', render: c => {new Date(c.drop_date).toLocaleDateString('en-US', { month:'short', day:'numeric' })} }, { label: 'Qty', w: '.7fr', align: 'right', render: c => {fmtNum(c.qty)} }, { label: 'Status', w: '.9fr', render: c => }, ]} /> ◉ Live} >

{[ { press: 'Press 1', job: DATA.production[0] || { customer_shop: 'Evergreen Plumbing', qty: 2500, stage: 'printing' }, pct: 68 }, { press: 'Press 2', job: DATA.production[1] || { customer_shop: 'Rainier Roofing', qty: 5000, stage: 'addressing' }, pct: 34 }, ].map((p, i) => (

{p.press} · {p.job.customer_shop}

{p.pct}%

{fmtNum(p.job.qty)} pcs {p.job.stage || 'printing'} ETA 2:40pm

))}

Queue

{DATA.production.length} jobs

); } // ── Signups ─────────────────────────────────────────────────────────── function Signups({ density }) { const D = DENSITY[density]; const [filter, setFilter] = React.useState('all'); const [selected, setSelected] = React.useState(DATA.signups[0]); const filtered = DATA.signups.filter(s => filter === 'all' ? true : s.status === filter); const counts = { all: DATA.signups.length, new: DATA.signups.filter(s => s.status === 'new').length, contacted: DATA.signups.filter(s => s.status === 'contacted').length, qualified: DATA.signups.filter(s => s.status === 'qualified').length, customer: DATA.signups.filter(s => s.status === 'customer').length, }; return (

Export CSV} >

{[ ['all','All'], ['new','New'], ['contacted','Contacted'], ['qualified','Qualified'], ['customer','Converted'], ].map(([k, label]) => ( ))}

(

{selected && selected.id === s.id && } {s.email}

)}, { label: 'Shop / Name', w: '1.2fr', render: s => ( {s.shop || —} )}, { label: 'Trade', w: '.8fr', render: s => ( s.trade ? {s.trade} : — )}, { label: 'Source', w: '.8fr', render: s => {s.source} }, { label: 'Status', w: '.8fr', render: s => }, { label: 'When', w: '.6fr', align: 'right', render: s => {relTime(s.signed_up_at)} }, ]} /> {selected && (

{selected.shop || selected.email.split('@')[0]}

{selected.name && `${selected.name} · `}{selected.city}

{[ ['Email', selected.email], ['Trade', selected.trade || '—'], ['Zip', selected.zip || '—'], ['Source', selected.source], ['Signed up', new Date(selected.signed_up_at).toLocaleString('en-US', { dateStyle: 'medium', timeStyle: 'short' })], ['City', selected.city], ].map(([k, v], i) => (

{k}

{v}

))}

Notes

</div>

<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <button style={btnPrimary}>Convert to customer</button>
              <button style={btnSecondary}>Mark contacted</button>
              <button style={btnSecondary}>Email template ↗</button>
            </div>
          </div>
        </Card>
      )}
    </div>
  );
}

// ── Customers ─────────────────────────────────────────────────────────
function Customers({ density }) {
  const D = DENSITY[density];
  return (
    <div style={{ padding: D.sectPad, display: 'flex', flexDirection: 'column', gap: D.gap }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: D.gap }}>
        <Kpi label="Active"       value={DATA.kpis.customers_active} unit="shops" density={density} />
        <Kpi label="MRR"          value={fmtMoney(DATA.kpis.mrr)} delta={DATA.kpis.mrr_delta_pct} density={density} />
        <Kpi label="Avg budget"   value={fmtMoney(Math.round(DATA.kpis.mrr / DATA.kpis.customers_active))} density={density} />
        <Kpi label="Churn · 30d"  value="0" unit="shops" density={density} />
      </div>
      <Card pad={D.cardPad} title="Active customers" subtitle={`${DATA.customers.length} shops`}
        right={<button style={btnPrimary}><Icon.plus /> Add customer</button>}
      >
        <Table density={density}
          rows={DATA.customers}
          cols={[
            { label: 'Shop', w: '1.4fr', render: c => (
              <div>
                <div style={{ color: '#f5f3ef', fontWeight: 600 }}>{c.shop}</div>
                <div style={{ fontSize: 11, color: 'rgba(245,243,239,0.5)' }}>{c.owner} · {c.city}</div>
              </div>
            )},
            { label: 'Trade',   w: '.8fr', render: c => <span style={mono}>{c.trade}</span> },
            { label: 'Budget',  w: '.8fr', align: 'right', render: c => <span style={mono}>{fmtMoney(c.monthly_budget)}/mo</span> },
            { label: 'Mailed',  w: '.8fr', align: 'right', render: c => <span style={mono}>{fmtNum(c.total_mailed)}</span> },
            { label: 'Calls',   w: '.6fr', align: 'right', render: c => <span style={mono}>{c.total_calls}</span> },
            { label: 'Since',   w: '.8fr', render: c => <span style={mono}>{new Date(c.since).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}</span> },
            { label: 'Status',  w: '.7fr', render: c => <Status kind={c.status} /> },
          ]}
        />
      </Card>
    </div>
  );
}

// ── Campaigns ─────────────────────────────────────────────────────────
function Campaigns({ density }) {
  const D = DENSITY[density];
  const upcoming = DATA.campaigns.filter(c => c.status === 'scheduled' || c.status === 'in-production' || c.status === 'draft');
  return (
    <div style={{ padding: D.sectPad, display: 'flex', flexDirection: 'column', gap: D.gap }}>
      <Card pad={D.cardPad} title="Campaign calendar" subtitle="Next 30 days">
        <div style={{ padding: D.cardPad, display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
          {Array.from({ length: 21 }, (_, i) => {
            const date = new Date(Date.now() + i * 86400000);
            const day = date.getDate();
            const dayCamps = DATA.campaigns.filter(c => {
              const cd = new Date(c.drop_date);
              return cd.getDate() === date.getDate() && cd.getMonth() === date.getMonth();
            });
            return (
              <div key={i} style={{
                padding: 10, background: '#0a0a0a', borderRadius: 8,
                border: '1px solid rgba(255,255,255,0.05)',
                minHeight: 72, display: 'flex', flexDirection: 'column', gap: 4,
              }}>
                <div style={{
                  fontSize: 10, color: 'rgba(245,243,239,0.45)',
                  fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em',
                }}>{date.toLocaleDateString('en-US', { weekday: 'short' }).toUpperCase()}</div>
                <div style={{ fontFamily: 'Archivo, sans-serif', fontWeight: 800, fontSize: 16, color: i === 0 ? '#ff5a1f' : '#f5f3ef' }}>{day}</div>
                {dayCamps.slice(0, 2).map((c, j) => (
                  <div key={j} style={{
                    fontSize: 10, padding: '2px 5px', borderRadius: 3,
                    background: c.status === 'in-production' ? '#ff5a1f22' : '#ffb83322',
                    color: c.status === 'in-production' ? '#ff5a1f' : '#ffb833',
                    fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                  }}>{c.customer_shop.split(' ')[0]}</div>
                ))}
                {dayCamps.length > 2 && <div style={{ fontSize: 9, color: 'rgba(245,243,239,0.5)' }}>+{dayCamps.length - 2} more</div>}
              </div>
            );
          })}
        </div>
      </Card>

<Card pad={D.cardPad} title="Upcoming & active" subtitle={`${upcoming.length} campaigns`}
        right={<button style={btnPrimary}><Icon.plus /> New campaign</button>}
      >
        <Table density={density}
          rows={upcoming.slice(0, 10)}
          cols={[
            { label: 'Campaign', w: '1.6fr', render: c => (
              <div>
                <div style={{ color: '#f5f3ef', fontWeight: 600 }}>{c.name}</div>
                <div style={{ fontSize: 11, color: 'rgba(245,243,239,0.5)' }}>{c.customer_shop} · {c.design}</div>
              </div>
            )},
            { label: 'Drop',    w: '.7fr', render: c => <span style={mono}>{new Date(c.drop_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span> },
            { label: 'Qty',     w: '.6fr', align: 'right', render: c => <span style={mono}>{fmtNum(c.qty)}</span> },
            { label: 'Cost',    w: '.7fr', align: 'right', render: c => <span style={mono}>{fmtMoney(c.cost)}</span> },
            { label: 'Zips',    w: '.8fr', render: c => <span style={mono}>{c.zips.join(', ')}</span> },
            { label: 'Status',  w: '.9fr', render: c => <Status kind={c.status} /> },
          ]}
        />
      </Card>
    </div>
  );
}

// ── Production (Chad's view) ──────────────────────────────────────────
function Production({ density }) {
  const D = DENSITY[density];
  const stages = ['queued', 'printing', 'cutting', 'addressing', 'tray-up'];
  return (
    <div style={{ padding: D.sectPad, display: 'flex', flexDirection: 'column', gap: D.gap }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: D.gap }}>
        <Kpi label="In queue"       value={DATA.production.length} unit="jobs" density={density} />
        <Kpi label="Active press"   value="2/2" density={density} />
        <Kpi label="Due today"      value={DATA.production.filter(p => (new Date(p.drop_date) - Date.now()) < 86400000).length} density={density} />
        <Kpi label="Pcs this week"  value={fmtNum(DATA.production.reduce((a, p) => a + p.qty, 0))} density={density} />
      </div>

<Card pad={D.cardPad} title="Production board" subtitle="Drag cards between stages"
        right={<div style={{ fontSize: 11, color: 'rgba(245,243,239,0.5)', fontFamily: 'JetBrains Mono, monospace' }}>KENT, WA · {new Date().toLocaleDateString()}</div>}
      >
        <div style={{ padding: D.cardPad, display: 'grid', gridTemplateColumns: `repeat(${stages.length}, 1fr)`, gap: 10 }}>
          {stages.map(stage => {
            const items = DATA.production.filter(p => p.stage === stage);
            return (
              <div key={stage} style={{
                background: '#0a0a0a', borderRadius: 10,
                border: '1px solid rgba(255,255,255,0.06)',
                display: 'flex', flexDirection: 'column',
              }}>
                <div style={{
                  padding: '10px 12px', borderBottom: '1px solid rgba(255,255,255,0.05)',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <span style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                    color: stage === 'queued' ? 'rgba(245,243,239,0.6)' : '#ff5a1f',
                    letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 700,
                  }}>{stage}</span>
                  <span style={{
                    fontSize: 10, fontWeight: 700, fontFamily: 'JetBrains Mono, monospace',
                    color: 'rgba(245,243,239,0.5)',
                  }}>{items.length}</span>
                </div>
                <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 6, minHeight: 240 }}>
                  {items.map((item, i) => (
                    <div key={i} style={{
                      padding: 10, background: '#141414', borderRadius: 7,
                      border: '1px solid rgba(255,255,255,0.06)',
                      display: 'flex', flexDirection: 'column', gap: 4,
                    }}>
                      <div style={{ fontSize: 12, fontWeight: 600, color: '#f5f3ef', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {item.customer_shop}
                      </div>
                      <div style={{ fontSize: 10, color: 'rgba(245,243,239,0.55)', fontFamily: 'JetBrains Mono, monospace', display: 'flex', justifyContent: 'space-between' }}>
                        <span>{fmtNum(item.qty)}pc</span>
                        <span>{item.press}</span>
                      </div>
                      <div style={{ fontSize: 10, color: '#ff5a1f', fontFamily: 'JetBrains Mono, monospace' }}>
                        Drop {new Date(item.drop_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                      </div>
                    </div>
                  ))}
                  {items.length === 0 && (
                    <div style={{ padding: 20, textAlign: 'center', fontSize: 11, color: 'rgba(245,243,239,0.3)' }}>—</div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </Card>
    </div>
  );
}

// ── Attribution ───────────────────────────────────────────────────────
function Attribution({ density }) {
  const D = DENSITY[density];
  const withCalls = DATA.campaigns.filter(c => c.calls > 0).slice(0, 10);
  return (
    <div style={{ padding: D.sectPad, display: 'flex', flexDirection: 'column', gap: D.gap }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: D.gap }}>
        <Kpi label="Calls · 30d"   value={DATA.kpis.calls_month} density={density} />
        <Kpi label="Booked"        value={DATA.kpis.booked_month} unit={`${DATA.kpis.booked_rate_pct}%`} density={density} />
        <Kpi label="Avg calls/1k"  value={DATA.kpis.mailed_month ? Math.round((DATA.kpis.calls_month / DATA.kpis.mailed_month) * 1000 * 10) / 10 : 0} density={density} />
        <Kpi label="Twilio status" value="✓" unit="connected" density={density} />
      </div>
      <Card pad={D.cardPad} title="Calls by campaign" subtitle="Tracked numbers · Twilio → KV">
        <Table density={density}
          rows={withCalls}
          cols={[
            { label: 'Campaign', w: '1.6fr', render: c => (
              <div>
                <div style={{ color: '#f5f3ef', fontWeight: 600 }}>{c.customer_shop}</div>
                <div style={{ fontSize: 11, color: 'rgba(245,243,239,0.5)' }}>{c.name}</div>
              </div>
            )},
            { label: 'Mailed', w: '.7fr', align: 'right', render: c => <span style={mono}>{fmtNum(c.qty)}</span> },
            { label: 'Calls',  w: '.6fr', align: 'right', render: c => <span style={{ ...mono, color: '#ff5a1f', fontWeight: 700 }}>{c.calls}</span> },
            { label: 'Booked', w: '.6fr', align: 'right', render: c => <span style={{ ...mono, color: '#34c759', fontWeight: 700 }}>{c.booked}</span> },
            { label: 'Rate',   w: '.5fr', align: 'right', render: c => <span style={mono}>{Math.round((c.booked / c.calls) * 100)}%</span> },
            { label: 'Bar',    w: '1fr',  render: c => (
              <div style={{ height: 6, background: '#0a0a0a', borderRadius: 3, overflow: 'hidden', display: 'flex' }}>
                <div style={{ width: `${(c.booked / c.calls) * 100}%`, background: '#34c759', height: '100%' }} />
                <div style={{ width: `${((c.calls - c.booked) / c.calls) * 100}%`, background: '#ff5a1f', height: '100%', opacity: 0.35 }} />
              </div>
            )},
          ]}
        />
      </Card>
    </div>
  );
}

// ── Finance ───────────────────────────────────────────────────────────
function Finance({ density }) {
  const D = DENSITY[density];
  const invoices = DATA.customers.slice(0, 8).map((c, i) => ({
    ...c,
    invoice: 1040 + i,
    amount: c.mrr,
    status: i === 0 ? 'overdue' : (i < 3 ? 'paid' : 'sent'),
    date: new Date(Date.now() - i * 3 * 86400000).toISOString(),
  }));
  return (
    <div style={{ padding: D.sectPad, display: 'flex', flexDirection: 'column', gap: D.gap }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: D.gap }}>
        <Kpi label="MRR"           value={fmtMoney(DATA.kpis.mrr)} delta={DATA.kpis.mrr_delta_pct} density={density} />
        <Kpi label="Outstanding"   value={fmtMoney(invoices.filter(i => i.status !== 'paid').reduce((a, i) => a + i.amount, 0))} density={density} />
        <Kpi label="Margin · est"  value="38" unit="%" density={density} />
        <Kpi label="Pcs cost · avg" value="$0.34" density={density} />
      </div>
      <Card pad={D.cardPad} title="Invoices" subtitle={`${invoices.length} recent`}
        right={<button style={btnPrimary}><Icon.plus /> New invoice</button>}
      >
        <Table density={density}
          rows={invoices}
          cols={[
            { label: 'Invoice',  w: '.6fr', render: i => <span style={{ ...mono, color: '#f5f3ef', fontWeight: 700 }}>#{i.invoice}</span> },
            { label: 'Customer', w: '1.4fr', render: i => <span style={{ color: '#f5f3ef', fontWeight: 500 }}>{i.shop}</span> },
            { label: 'Amount',   w: '.7fr', align: 'right', render: i => <span style={mono}>{fmtMoney(i.amount)}</span> },
            { label: 'Date',     w: '.8fr', render: i => <span style={mono}>{new Date(i.date).toLocaleDateString()}</span> },
            { label: 'Status',   w: '.8fr', render: i => (
              <span style={{
                padding: '3px 9px', borderRadius: 999, fontSize: 11, fontWeight: 700,
                background: i.status === 'paid' ? '#34c75922' : i.status === 'overdue' ? '#ff3b3022' : '#ffb83322',
                color: i.status === 'paid' ? '#34c759' : i.status === 'overdue' ? '#ff3b30' : '#ffb833',
                textTransform: 'capitalize',
              }}>{i.status}</span>
            )},
          ]}
        />
      </Card>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// Mobile pages (< 900px) — card-list variants of the desktop views.
// Rendered by MobileShell in app.jsx. Same PSData, same brand tokens;
// layout swaps from dense tables to stacked cards tuned for phone screens.
// ─────────────────────────────────────────────────────────────────────

function MKpi({ label, value, unit, delta }) {
  const positive = delta !== undefined && delta >= 0;
  return (
    <div style={{
      padding: 14, background: '#141414',
      border: '1px solid rgba(255,255,255,0.08)', borderRadius: 12,
      display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0,
    }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
        letterSpacing: '0.14em', textTransform: 'uppercase',
        color: 'rgba(245,243,239,0.55)', fontWeight: 700,
      }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, flexWrap: 'wrap' }}>
        <div style={{
          fontFamily: 'Archivo, sans-serif', fontWeight: 900,
          fontSize: 26, lineHeight: 1, letterSpacing: '-0.03em', color: '#f5f3ef',
        }}>{value}</div>
        {unit && <div style={{ fontSize: 11, color: 'rgba(245,243,239,0.5)', fontWeight: 600 }}>{unit}</div>}
      </div>
      {delta !== undefined && (
        <div style={{
          color: positive ? '#34c759' : '#ff3b30', fontSize: 10.5, fontWeight: 700,
          fontFamily: 'JetBrains Mono, monospace',
        }}>{positive ? '▲' : '▼'} {Math.abs(delta)}%</div>
      )}
    </div>
  );
}

function MPage_Overview() {
  const k = DATA.kpis;
  const signupDelta = k.signups_week_prev
    ? Math.round(((k.signups_week - k.signups_week_prev) / k.signups_week_prev) * 1000) / 10 : 0;
  return (
    <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 10 }}>
        <MKpi label="Signups · 7d" value={k.signups_week} delta={signupDelta} />
        <MKpi label="MRR"           value={fmtMoney(k.mrr)} delta={k.mrr_delta_pct} />
        <MKpi label="Mailed · 30d"  value={fmtNum(k.mailed_month)} unit="pcs" />
        <MKpi label="Booked"        value={`${k.booked_month}/${k.calls_month}`} unit="calls" />
      </div>

<Card pad={16} title="Waitlist · 30d" subtitle={`${k.signups_month} total`}>
        <div style={{ padding: 14, paddingTop: 6 }}>
          <svg viewBox="0 0 320 110" preserveAspectRatio="none" style={{ width: '100%', height: 110, display: 'block' }}>
            {(() => {
              const data = DATA.signupsByDay;
              const max = Math.max(...data, 1);
              const barW = (320 - 16) / data.length - 2;
              return data.map((v, i) => {
                const bh = (v / max) * 100;
                return <rect key={i} x={8 + i * (barW + 2)} y={110 - bh} width={barW} height={bh}
                  rx="1.5" fill="#ff5a1f" opacity={i >= data.length - 7 ? 1 : 0.4} />;
              });
            })()}
          </svg>
        </div>
      </Card>

<Card pad={16} title="Kent facility" subtitle="Live · 2 presses"
        right={<span style={{
          fontFamily:'JetBrains Mono, monospace', fontSize: 9,
          color: '#34c759', letterSpacing: '0.14em', fontWeight: 700,
        }}>◉ LIVE</span>}
      >
        <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            { press: 'Press 1', job: DATA.production[0] || { customer_shop: 'Evergreen Plumbing', qty: 2500 }, pct: 68 },
            { press: 'Press 2', job: DATA.production[1] || { customer_shop: 'Rainier Roofing',   qty: 5000 }, pct: 34 },
          ].map((p, i) => (
            <div key={i}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 5 }}>
                <span style={{ color: '#f5f3ef', fontWeight: 600 }}>{p.press}</span>
                <span style={{ ...mono, fontSize: 11 }}>{p.pct}%</span>
              </div>
              <div style={{ fontSize: 11, color: 'rgba(245,243,239,0.6)', marginBottom: 6 }}>{p.job.customer_shop}</div>
              <div style={{ height: 4, background: '#0a0a0a', borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ width: `${p.pct}%`, height: '100%', background: '#ff5a1f' }} />
              </div>
            </div>
          ))}
        </div>
      </Card>

<Card pad={16} title="Activity">
        {DATA.activity.slice(0, 6).map((a, i) => (
          <div key={i} style={{
            padding: '11px 14px', display: 'flex', gap: 10,
            borderBottom: i < 5 ? '1px solid rgba(255,255,255,0.05)' : 'none',
          }}>
            <div style={{
              width: 6, height: 6, borderRadius: 3, marginTop: 6, flexShrink: 0,
              background: a.kind === 'signup' ? '#ff5a1f' : (a.kind === 'convert' || a.kind === 'invoice') ? '#34c759' : 'rgba(245,243,239,0.4)',
            }} />
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 12.5, color: '#f5f3ef', lineHeight: 1.35 }}>{a.msg}</div>
              <div style={{ marginTop: 2, fontSize: 10.5, color: 'rgba(245,243,239,0.5)', fontFamily: 'JetBrains Mono, monospace' }}>{a.who} · {a.t}</div>
            </div>
          </div>
        ))}
      </Card>
    </div>
  );
}

function MPage_Campaigns() {
  const list = DATA.campaigns.filter(c => c.status !== 'completed').slice(0, 14);
  return (
    <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
      {list.map(c => (
        <div key={c.id} style={{
          padding: 14, background: '#141414',
          border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: '#f5f3ef', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.customer_shop}</div>
              <div style={{ fontSize: 11.5, color: 'rgba(245,243,239,0.55)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.design}</div>
            </div>
            <Status kind={c.status} />
          </div>
          <div style={{
            marginTop: 8, display: 'flex', gap: 14, fontSize: 11,
            color: 'rgba(245,243,239,0.6)', fontFamily: 'JetBrains Mono, monospace',
          }}>
            <span>{new Date(c.drop_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
            <span>{fmtNum(c.qty)} pcs</span>
            <span>{fmtMoney(c.cost)}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function MPage_Production() {
  return (
    <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 10 }}>
        <MKpi label="In queue"  value={DATA.production.length} unit="jobs" />
        <MKpi label="Due today" value={DATA.production.filter(p => (new Date(p.drop_date) - Date.now()) < 86400000).length} />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
        {DATA.production.slice(0, 12).map((p, i) => (
          <div key={i} style={{
            padding: 14, background: '#141414',
            border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, marginBottom: 8 }}>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: '#f5f3ef', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.customer_shop}</div>
                <div style={{ fontSize: 11, color: 'rgba(245,243,239,0.55)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.design || p.name}</div>
              </div>
              <Status kind={p.status} />
            </div>
            <div style={{
              display: 'flex', gap: 14, fontSize: 11, flexWrap: 'wrap',
              color: 'rgba(245,243,239,0.6)',
              fontFamily: 'JetBrains Mono, monospace',
              paddingTop: 8, borderTop: '1px solid rgba(255,255,255,0.05)',
            }}>
              <span>{fmtNum(p.qty)} pcs</span>
              <span style={{ color: '#ff5a1f', textTransform: 'capitalize' }}>{p.stage}</span>
              <span>{p.press}</span>
              <span style={{ marginLeft: 'auto' }}>{new Date(p.drop_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MPage_Customers() {
  return (
    <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
      {DATA.customers.map(c => (
        <div key={c.id} style={{
          padding: 14, background: '#141414',
          border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, marginBottom: 8 }}>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: '#f5f3ef', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.shop}</div>
              <div style={{ fontSize: 11.5, color: 'rgba(245,243,239,0.55)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.owner} · {c.city}</div>
            </div>
            <Status kind={c.status} />
          </div>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8,
            padding: 8, background: '#0a0a0a', borderRadius: 7,
          }}>
            {[
              ['Budget', fmtMoney(c.monthly_budget) + '/mo'],
              ['Mailed', fmtNum(c.total_mailed)],
              ['Calls',  c.total_calls],
            ].map(([k, v], i) => (
              <div key={i} style={{ minWidth: 0 }}>
                <div style={{ fontSize: 9, color: 'rgba(245,243,239,0.45)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.12em', fontWeight: 700, marginBottom: 2 }}>{k.toUpperCase()}</div>
                <div style={{ fontSize: 12, color: '#f5f3ef', fontWeight: 600, fontFamily: 'JetBrains Mono, monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  Overview, Signups, Customers, Campaigns, Production, Attribution, Finance,
  MKpi, MPage_Overview, MPage_Signups, MPage_Campaigns, MPage_Production,
  MPage_Customers, MPage_Attribution, MPage_Finance,
});