const poTotal = (p, invMap) => p.lines.reduce((s, [ing, q]) => s + (invMap[ing] ? invMap[ing].cost * q : 0), 0);
const poTone = { draft: 'neutral', pending: 'warn', sent: 'neutral', partial: 'neg', received: 'pos' };
const poLabel = (s, L) => ({ draft: L('Draft', 'Brouillon'), pending: L('Awaiting approval', 'À approuver'), sent: L('Sent', 'Envoyé'), partial: L('Partly received', 'Reçu en partie'), received: L('Received', 'Reçu') }[s]);

function Counts() {
  const { L, lang, fmt, O, go } = useMizo();
  const [scan, setScan] = React.useState(false);
  const kind = (k) => (k === 'full' ? L('Full count', 'Inventaire complet') : L('Spot check', 'Vérification ciblée'));
  const full = O.counts.filter((c) => c.kind === 'full');
  return (
    <div className="page">
      <PageHead sub={L('When you count, who counts, and how far the shelf is from the books.', 'Quand on compte, qui compte, et l’écart entre les tablettes et les livres.')}>
        <button className="btn btn-secondary" onClick={() => setScan(true)}><Icon n="barcode" />{L('Scan barcodes', 'Scanner')}</button><button className="btn btn-primary" onClick={() => go('inventory', { tab: 'stock', count: true })}><Icon n="clipboard-text" />{L('Start a count', 'Faire un inventaire')}</button>
      </PageHead>
      <ScanModal open={scan} onClose={() => setScan(false)} />
      <section className="stats">
        <Stat label={L('Last full count', 'Dernier inventaire complet')} value={fmt.date(full[0].date, { weekday: 'short', month: 'short', day: 'numeric' })}>{L('by', 'par')} {full[0].by} · {full[0].min} min</Stat>
        <Stat label={L('Variance, last count', 'Écart, dernier inventaire')} value={fmt.money0(full[0].varc)} tone="neg">{L('Shelf below expected usage', 'Tablettes sous l’usage prévu')}</Stat>
        <Stat label={L('Average variance', 'Écart moyen')} value={fmt.money0(full.reduce((s, c) => s + c.varc, 0) / full.length)}>{L('Last 3 full counts', '3 derniers inventaires')}</Stat>
        <Stat label={L('Average time', 'Durée moyenne')} value={Math.round(full.reduce((s, c) => s + c.min, 0) / full.length) + ' min'}>{L('Full count', 'Inventaire complet')}</Stat>
      </section>
      <section className="grid-1-2">
        <div className="panel">
          <div className="panel-head"><div><h3>{L('Count schedule', 'Calendrier des inventaires')}</h3><p className="muted">{L('Recurring counts', 'Inventaires récurrents')}</p></div></div>
          <div>
            {O.countPlan.map((c, i) => (
              <div key={i} className="set-row">
                <div><div>{kind(c.kind)} {c.due ? <Pill tone="warn">{L('Due today', 'Prévu aujourd’hui')}</Pill> : null}</div><div className="muted sm">{c.when[lang]} · {c.who}</div></div>
                <span className="tnum muted">{c.next[lang]}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="panel panel-flush">
          <div className="panel-head pad"><div><h3>{L('Count history', 'Historique')}</h3><p className="muted">{L('Variance = counted value minus what sales say you should have', 'Écart = valeur comptée moins ce que les ventes prévoient')}</p></div></div>
          <div className="table-scroll">
            <table className="table mtable">
              <thead><tr><th>{L('Date', 'Date')}</th><th>{L('Type', 'Type')}</th><th className="hide-sm">{L('Counted by', 'Par')}</th><th className="num">{L('Items', 'Articles')}</th><th className="num hide-sm">{L('Time', 'Durée')}</th><th className="num">{L('Variance', 'Écart')}</th></tr></thead>
              <tbody>{O.counts.map((c) => (
                <tr key={c.date}><td className="cell-main tnum">{fmt.date(c.date, { weekday: 'short', month: 'short', day: 'numeric' })}</td><td>{kind(c.kind)}</td><td className="hide-sm">{c.by}</td><td className="num tnum">{c.items}</td><td className="num tnum hide-sm">{c.min} min</td>
                  <td className="num"><Pill tone={c.varc >= 0 ? 'pos' : c.varc > -100 ? 'warn' : 'neg'}>{fmt.money(c.varc)}</Pill></td></tr>
              ))}</tbody>
            </table>
          </div>
        </div>
      </section>
    </div>
  );
}

function Waste() {
  const { L, lang, fmt, O, inv, invMap, waste, setWaste, employees, toast } = useMizo();
  const [f, setF] = React.useState({ ing: 'potato', qty: '', reason: 'prep', by: 'Karim Benali' });
  const cost = (w) => (invMap[w.ing] ? invMap[w.ing].cost * w.qty : 0);
  const wk = waste.filter((w) => w.date >= '2026-10-22');
  const total = wk.reduce((s, w) => s + cost(w), 0);
  const group = (key, lab) => Object.values(wk.reduce((m, w) => { const k = w[key]; m[k] = m[k] || { label: lab(k), v: 0 }; m[k].v += cost(w); return m; }, {})).sort((a, b) => b.v - a.v);
  const add = () => {
    const q = Number(f.qty); if (!q) return;
    setWaste([{ id: 'w' + Date.now(), date: '2026-10-28', ing: f.ing, qty: q, reason: f.reason, by: f.by.split(' ')[0] }, ...waste]);
    toast(L(`Logged ${q} ${invMap[f.ing].unit} of ${invMap[f.ing].name.en}`, `${q} ${invMap[f.ing].unit} de ${invMap[f.ing].name.fr} noté`)); setF({ ...f, qty: '' });
  };
  return (
    <div className="page">
      <PageHead sub={L('Everything thrown out, why, and what it cost you.', 'Tout ce qui est jeté, pourquoi, et ce que ça coûte.')} />
      <section className="stats">
        <Stat label={L('Waste this week', 'Pertes cette semaine')} value={fmt.money(total)} tone="neg"><Delta v={38} invert suffix={L(' vs avg', ' vs moy.')} /></Stat>
        <Stat label={L('Share of food cost', 'Part du coût alimentaire')} value={fmt.pct((total / (33180 / 4)) * 100)}>{L('Healthy is under 2%', 'Idéal : moins de 2 %')}</Stat>
        <Stat label={L('Entries', 'Entrées')} value={wk.length}>{L('Since Thursday', 'Depuis jeudi')}</Stat>
        <Stat label={L('Top reason', 'Raison principale')} value={group('reason', (k) => O.wasteReasons[k][lang])[0].label}>{fmt.pct((group('reason', (k) => k)[0].v / total) * 100)} {L('of waste cost', 'du coût des pertes')}</Stat>
      </section>
      <section className="grid-1-2">
        <div className="panel">
          <h3>{L('Log waste', 'Noter une perte')}</h3>
          <div className="form-grid">
            <div className="field span-2"><label>{L('Item', 'Article')}</label><select className="input" value={f.ing} onChange={(e) => setF({ ...f, ing: e.target.value })}>{inv.map((i) => <option key={i.id} value={i.id}>{i.name[lang]}</option>)}</select></div>
            <div className="field"><label>{L('Quantity', 'Quantité')} ({invMap[f.ing].unit})</label><input className="input" type="number" min="0" step="0.1" value={f.qty} onChange={(e) => setF({ ...f, qty: e.target.value })} /></div>
            <div className="field"><label>{L('Reason', 'Raison')}</label><select className="input" value={f.reason} onChange={(e) => setF({ ...f, reason: e.target.value })}>{Object.entries(O.wasteReasons).map(([k, v]) => <option key={k} value={k}>{v[lang]}</option>)}</select></div>
            <div className="field span-2"><label>{L('Logged by', 'Noté par')}</label><select className="input" value={f.by} onChange={(e) => setF({ ...f, by: e.target.value })}>{employees.map((e) => <option key={e.id}>{e.name}</option>)}</select></div>
          </div>
          <div className="dr-row"><span className="muted">{f.qty ? fmt.money(invMap[f.ing].cost * Number(f.qty)) : '—'}</span><button className="btn btn-primary" disabled={!Number(f.qty)} onClick={add}><Icon n="plus" />{L('Add entry', 'Ajouter')}</button></div>
        </div>
        <div className="grid-1-1">
          <div className="panel"><div className="panel-head"><div><h3>{L('By reason', 'Par raison')}</h3><p className="muted">{L('This week', 'Cette semaine')}</p></div></div><HBars items={group('reason', (k) => O.wasteReasons[k][lang])} fmtv={fmt.money0} /></div>
          <div className="panel"><div className="panel-head"><div><h3>{L('By item', 'Par article')}</h3><p className="muted">{L('This week', 'Cette semaine')}</p></div></div><HBars items={group('ing', (k) => invMap[k].name[lang]).slice(0, 5)} fmtv={fmt.money0} /></div>
        </div>
      </section>
      <div className="panel panel-flush">
        <div className="panel-head pad"><h3>{L('Waste log', 'Journal des pertes')}</h3></div>
        <div className="table-scroll">
          <table className="table mtable">
            <thead><tr><th>{L('Date', 'Date')}</th><th>{L('Item', 'Article')}</th><th className="num">{L('Qty', 'Qté')}</th><th>{L('Reason', 'Raison')}</th><th className="hide-sm">{L('By', 'Par')}</th><th className="num">{L('Cost', 'Coût')}</th></tr></thead>
            <tbody>{waste.map((w) => (
              <tr key={w.id}><td className="tnum">{fmt.date(w.date, { weekday: 'short', day: 'numeric' })}</td><td className="cell-main">{invMap[w.ing].name[lang]}</td><td className="num tnum">{fmt.num(w.qty)} <span className="muted">{invMap[w.ing].unit}</span></td><td>{O.wasteReasons[w.reason][lang]}</td><td className="hide-sm">{w.by}</td><td className="num tnum">{fmt.money(cost(w))}</td></tr>
            ))}</tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function Reorder() {
  const { L, lang, fmt, D, inv, pos, setPos, go, toast } = useMizo();
  const onOrder = (id) => pos.filter((p) => ['draft', 'sent', 'pending'].includes(p.status)).reduce((s, p) => s + p.lines.filter(([ing]) => ing === id).reduce((a, [, q]) => a + q, 0), 0);
  const need = inv.filter((i) => stockState(i) !== 'ok').map((i) => ({ i, oo: onOrder(i.id), sug: Math.max(0, Math.ceil(i.par * 1.1 - i.onHand - onOrder(i.id))) }));
  const [qty, setQty] = React.useState(() => Object.fromEntries(need.map((n) => [n.i.id, n.sug])));
  const covering = (id) => pos.filter((p) => ['draft', 'sent', 'pending'].includes(p.status) && p.lines.some(([ing]) => ing === id)).map((p) => p.id);
  const bySup = D.suppliers.map((s) => ({ s, rows: need.filter((n) => n.i.sup === s.id) })).filter((g) => g.rows.length);
  const create = (g) => {
    const lines = g.rows.map((n) => [n.i.id, Number(qty[n.i.id]) || 0]).filter(([, q]) => q > 0); if (!lines.length) return;
    const n = Math.max(...pos.map((p) => Number(p.id.split('-')[1]))) + 1;
    setPos([{ id: 'PO-' + n, sup: g.s.id, created: '2026-10-28', expected: '2026-10-30', status: 'draft', lines }, ...pos]);
    toast(L(`Draft PO-${n} created for ${g.s.name}`, `Brouillon BC-${n} créé pour ${g.s.name}`)); go('purchasing', { tab: 'orders' });
  };
  return (
    <div className="page">
      <PageHead sub={L('Items under par, grouped by supplier, with a suggested quantity to bring you back to par.', 'Articles sous le niveau, par fournisseur, avec une quantité suggérée.')} />
      <SeeAlso k="reorder" />
      <section className="stats">
        <Stat label={L('Items to reorder', 'Articles à commander')} value={need.length} tone={need.length ? 'warn' : ''}>{need.filter((n) => stockState(n.i) === 'low').length} {L('critically low', 'très bas')}</Stat>
        <Stat label={L('Suppliers', 'Fournisseurs')} value={bySup.length}>{L('One order each', 'Une commande chacun')}</Stat>
        <Stat label={L('Suggested spend', 'Dépense suggérée')} value={fmt.money0(need.reduce((s, n) => s + n.i.cost * (Number(qty[n.i.id]) || 0), 0))}>{L('At current prices', 'Aux prix actuels')}</Stat>
      </section>
      {bySup.map((g) => (
        <section key={g.s.id} className="panel panel-flush">
          <div className="panel-head pad">
            <div className="sup-top"><span className="sup-mono">{g.s.name.split(' ').map((w) => w[0]).join('').slice(0, 2)}</span><div><h3>{g.s.name}</h3><p className="muted">{L('Next delivery', 'Prochaine livraison')} · {g.s.next[lang]}</p></div></div>
            {(() => { const any = g.rows.some((n) => Number(qty[n.i.id]) > 0); const cov = [...new Set(g.rows.flatMap((n) => covering(n.i.id)))]; return (
              <div className="dr-row" style={{ gap: '.8rem', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
                {!any && cov.length ? <span className="muted sm"><Icon n="check-circle" className="txt-pos" /> {L('Covered by', 'Couvert par')} {cov.join(', ')}</span> : null}
                <button className="btn btn-primary" disabled={!any} onClick={() => create(g)}><Icon n="file-plus" />{L('Create purchase order', 'Créer un bon de commande')}</button>
              </div>
            ); })()}
          </div>
          <div className="table-scroll">
            <table className="table mtable">
              <thead><tr><th>{L('Item', 'Article')}</th><th>{L('On hand', 'En stock')}</th><th className="num hide-sm">{L('On order', 'En commande')}</th><th>{L('Order qty', 'Qté à commander')}</th><th className="num">{L('Line total', 'Total')}</th></tr></thead>
              <tbody>{g.rows.map(({ i, oo }) => (
                <tr key={i.id}>
                  <td><div className="cell-main">{i.name[lang]}</div><div className="cell-sub">{fmt.money(i.cost)} / {i.unit}</div></td>
                  <td><div className="onhand"><span className="tnum">{fmt.num(i.onHand)} <span className="muted">{i.unit}</span></span><Level value={i.onHand} par={i.par} /></div></td>
                  <td className="num tnum hide-sm">{oo ? fmt.num(oo) + ' ' + i.unit : '—'}</td>
                  <td><div className="portion"><input className="input" type="number" min="0" value={qty[i.id]} onChange={(e) => setQty({ ...qty, [i.id]: e.target.value })} /><span className="muted">{i.unit}</span></div></td>
                  <td className="num tnum">{fmt.money(i.cost * (Number(qty[i.id]) || 0))}</td>
                </tr>
              ))}</tbody>
            </table>
          </div>
        </section>
      ))}
      {!bySup.length ? <div className="panel empty">{L('Everything is at par.', 'Tout est au niveau.')}</div> : null}
    </div>
  );
}

function PurchaseOrders() {
  const { L, lang, fmt, D, O, invMap, pos, setPos, toast, go, openExport } = useMizo();
  const [build, setBuild] = React.useState(false);
  const [filter, setFilter] = React.useState('open');
  const [sel, setSel] = React.useState(null);
  const sup = (id) => D.suppliers.find((s) => s.id === id);
  const shown = pos.filter((p) => filter === 'all' || (filter === 'open' ? p.status !== 'received' : p.status === 'received'));
  const openV = pos.filter((p) => p.status === 'sent' || p.status === 'draft').reduce((s, p) => s + poTotal(p, invMap), 0);
  const cur = pos.find((p) => p.id === sel);
  const setStatus = (id, status) => setPos(pos.map((p) => (p.id === id ? { ...p, status } : p)));
  const d = (x) => fmt.date(x, { weekday: 'short', month: 'short', day: 'numeric' });
  return (
    <div className="page">
      <PageHead sub={L('Orders you’re building, orders on the way, and what came in.', 'Commandes en préparation, en route et reçues.')}>
        <button className="btn btn-secondary" onClick={() => go('inventory', { tab: 'reorder' })}><Icon n="list-checks" />{L('From reorder list', 'Depuis la liste')}</button><button className="btn btn-secondary" onClick={() => openExport({ kind: 'po', id: (shown[0] || pos[0] || {}).id })}><Icon n="printer" />{L('Print / PDF', 'Imprimer / PDF')}</button><button className="btn btn-primary" onClick={() => setBuild(true)}><Icon n="plus" />{L('New order', 'Nouvelle commande')}</button>
      </PageHead>
      <section className="stats">
        <Stat label={L('Open orders', 'Commandes ouvertes')} value={fmt.money0(openV)}>{pos.filter((p) => p.status === 'sent' || p.status === 'draft').length} {L('orders', 'commandes')}</Stat>
        <Stat label={L('Drafts to approve', 'Brouillons à approuver')} value={pos.filter((p) => p.status === 'draft').length} tone="warn">{L('Prepared by MIZO or staff', 'Préparés par MIZO ou l’équipe')}</Stat>
        <Stat label={L('Arriving tomorrow', 'Arrivent demain')} value={pos.filter((p) => p.status === 'sent' && p.expected === '2026-10-29').length}>{L('Check them in on Receiving', 'À recevoir dans Réception')}</Stat>
        <Stat label={L('Issues', 'Problèmes')} value={pos.filter((p) => p.status === 'partial').length} tone="neg">{L('Short or damaged', 'Manquants ou endommagés')}</Stat>
      </section>
      <div className="panel panel-flush">
        <div className="toolbar"><Seg size="sm" value={filter} onChange={setFilter} options={[['open', L('Open', 'Ouvertes')], ['received', L('Received', 'Reçues')], ['all', L('All', 'Toutes')]]} /></div>
        <div className="table-scroll">
          <table className="table mtable">
            <thead><tr><th>{L('Order', 'Commande')}</th><th className="hide-sm">{L('Created', 'Créée')}</th><th>{L('Expected', 'Prévue')}</th><th className="num hide-sm">{L('Items', 'Articles')}</th><th className="num">{L('Total', 'Total')}</th><th>{L('Status', 'État')}</th></tr></thead>
            <tbody>{shown.map((p) => (
              <tr key={p.id} className="clickable" onClick={() => setSel(p.id)}>
                <td><div className="cell-main">{p.id}</div><div className="cell-sub">{sup(p.sup).name}</div></td><td className="tnum hide-sm">{d(p.created)}</td><td className="tnum">{d(p.expected)}</td>
                <td className="num tnum hide-sm">{p.lines.length}</td><td className="num tnum">{fmt.money(poTotal(p, invMap))}</td><td><Pill tone={poTone[p.status]}>{poLabel(p.status, L)}</Pill></td>
              </tr>
            ))}</tbody>
          </table>
        </div>
      </div>
      <PoBuilder open={build} onClose={() => setBuild(false)} />
      <Drawer open={!!cur} onClose={() => setSel(null)}>
        {cur ? (
          <div className="dr">
            <div className="dr-head"><div><div className="card-kicker">{sup(cur.sup).name}</div><h2>{cur.id}</h2></div><button className="btn btn-icon btn-secondary" onClick={() => setSel(null)} aria-label="Close"><Icon n="x" /></button></div>
            <div className="dr-sec">
              <ol className="wiz-steps">{['draft', 'pending', 'sent', 'received'].map((s, i) => { const at = ['draft', 'pending', 'sent', 'received'].indexOf(cur.status === 'partial' ? 'received' : cur.status); return <li key={s} className={i < at ? 'done' : i === at ? 'on' : ''}><span>{i < at ? <Icon n="check" /> : i + 1}</span>{poLabel(s, L)}</li>; })}</ol>
              <div className="dr-row"><span className="muted">{L('Expected', 'Prévue')}</span><b>{d(cur.expected)}</b></div>
              <button className="btn btn-secondary" onClick={() => { setSel(null); openExport({ kind: 'po', id: cur.id }); }}><Icon n="printer" />{L('Print or save this order as PDF', 'Imprimer ou enregistrer en PDF')}</button>
              {cur.note ? <div className="suggest warnbox"><Icon n="warning" /><div>{cur.note[lang]}</div></div> : null}
            </div>
            <div className="dr-sec">
              <div className="dr-label">{L('Lines', 'Lignes')}</div>
              {cur.lines.map(([ing, q]) => <div key={ing} className="ln"><span>{invMap[ing].name[lang]} · {fmt.num(q)} {invMap[ing].unit}</span><b>{fmt.money(invMap[ing].cost * q)}</b></div>)}
              <div className="ln tot"><span>{L('Total before tax', 'Total avant taxes')}</span><b>{fmt.money(poTotal(cur, invMap))}</b></div>
            </div>
            <div className="dr-sec">
              {cur.status === 'draft' ? <>
                <button className="btn btn-primary" onClick={() => { const big = poTotal(cur, invMap) > O.approval.limit; setStatus(cur.id, big ? 'pending' : 'sent'); if (big) { toast(L(`${cur.id} needs ${O.approval.approver}’s approval`, `${cur.id} doit être approuvé par ${O.approval.approver}`)); return; } toast(L(`${cur.id} sent to ${sup(cur.sup).name}`, `${cur.id} envoyé à ${sup(cur.sup).name}`)); }}><Icon n="paper-plane-tilt" />{L('Approve and send', 'Approuver et envoyer')}</button>
                <button className="btn btn-ghost" onClick={() => { setPos(pos.filter((p) => p.id !== cur.id)); setSel(null); toast(L('Draft deleted', 'Brouillon supprimé')); }}><Icon n="trash" />{L('Delete draft', 'Supprimer')}</button>
              </> : cur.status === 'pending' ? <button className="btn btn-primary" onClick={() => go('purchasing', { tab: 'approvals' })}><Icon n="seal-check" />{L('Review in Approvals', 'Voir dans Approbations')}</button> : cur.status === 'sent' ? <button className="btn btn-primary" onClick={() => go('purchasing', { tab: 'receiving', po: cur.id })}><Icon n="package" />{L('Check in delivery', 'Recevoir la livraison')}</button>
                : <span className="muted sm">{L('Orders are recorded in MIZO only. Emailing suppliers and supplier portals come in a later phase.', 'Les commandes sont enregistrées dans MIZO seulement. Courriel et portails fournisseurs : phase ultérieure.')}</span>}
            </div>
          </div>
        ) : null}
      </Drawer>
    </div>
  );
}

function Receiving({ focus }) {
  const { L, lang, fmt, D, inv, setInv, invMap, pos, setPos, toast } = useMizo();
  const incoming = pos.filter((p) => p.status === 'sent');
  const [cur, setCur] = React.useState((focus && focus.po) || (incoming[0] && incoming[0].id));
  const [got, setGot] = React.useState({});
  const [price, setPrice] = React.useState({});
  const p = incoming.find((x) => x.id === cur) || incoming[0];
  const sup = (id) => D.suppliers.find((s) => s.id === id).name;
  const pick = (id) => { setCur(id); setGot({}); setPrice({}); };
  const rows = p ? p.lines.map(([ing, q]) => { const g = got[ing] ?? q, pr = price[ing] ?? invMap[ing].cost; return { ing, q, g: Number(g), pr: Number(pr), short: Number(g) < q, up: Number(pr) > invMap[ing].cost + 0.001 }; }) : [];
  const confirm = () => {
    setInv(inv.map((i) => { const r = rows.find((x) => x.ing === i.id); if (!r) return i; const changed = Math.abs(r.pr - i.cost) > 0.001; return { ...i, onHand: i.onHand + r.g, cost: r.pr, hist: changed ? [...i.hist.slice(1), r.pr] : i.hist, trend: changed ? Math.round(((r.pr - i.hist[0]) / i.hist[0]) * 100) : i.trend }; }));
    setPos(pos.map((x) => (x.id === p.id ? { ...x, status: rows.some((r) => r.short) ? 'partial' : 'received' } : x)));
    toast(L(`${p.id} received · stock updated`, `${p.id} reçu · stock mis à jour`)); setGot({}); setPrice({});
  };
  const recent = pos.filter((x) => x.status === 'received' || x.status === 'partial');
  return (
    <div className="page">
      <PageHead sub={L('Check deliveries against the order — quantities and prices — before they hit your shelves.', 'Vérifiez les livraisons contre la commande — quantités et prix — avant de les ranger.')} />
      <section className="grid-1-2">
        <div className="panel panel-flush">
          <div className="panel-head pad"><div><h3>{L('Expected deliveries', 'Livraisons prévues')}</h3><p className="muted">{incoming.length} {L('orders on the way', 'commandes en route')}</p></div></div>
          <ul className="opps">
            {incoming.map((x) => <li key={x.id}><button className={'opp' + (p && x.id === p.id ? ' on' : '')} onClick={() => pick(x.id)}><span className="rlist-main">{sup(x.sup)}<span className="muted sm">{x.id} · {fmt.date(x.expected, { weekday: 'short', month: 'short', day: 'numeric' })}</span></span><span className="tnum">{fmt.money0(poTotal(x, invMap))}</span></button></li>)}
            {!incoming.length ? <li className="empty">{L('No deliveries expected.', 'Aucune livraison prévue.')}</li> : null}
          </ul>
          <div className="panel-head pad"><h3>{L('Recently received', 'Reçues récemment')}</h3></div>
          <ul className="opps">{recent.map((x) => <li key={x.id} className="opp" style={{ cursor: 'default' }}><span className="rlist-main">{sup(x.sup)}<span className="muted sm">{x.id}</span></span><Pill tone={poTone[x.status]}>{poLabel(x.status, L)}</Pill></li>)}</ul>
        </div>
        {p ? (
          <div className="panel panel-flush">
            <div className="panel-head pad"><div><div className="card-kicker">{p.id}</div><h3>{sup(p.sup)}</h3><p className="muted">{L('Enter what actually arrived and the price on the invoice', 'Entrez ce qui est arrivé et le prix facturé')}</p></div></div>
            <div className="table-scroll">
              <table className="table mtable">
                <thead><tr><th>{L('Item', 'Article')}</th><th className="num">{L('Ordered', 'Commandé')}</th><th>{L('Received', 'Reçu')}</th><th>{L('Invoice price', 'Prix facturé')}</th><th></th></tr></thead>
                <tbody>{rows.map((r) => (
                  <tr key={r.ing}>
                    <td><div className="cell-main">{invMap[r.ing].name[lang]}</div><div className="cell-sub">{L('Last paid', 'Dernier prix')} {fmt.money(invMap[r.ing].cost)}</div></td>
                    <td className="num tnum">{fmt.num(r.q)} <span className="muted">{invMap[r.ing].unit}</span></td>
                    <td><input className="input count-input" type="number" min="0" value={got[r.ing] ?? r.q} onChange={(e) => setGot({ ...got, [r.ing]: e.target.value })} /></td>
                    <td><input className="input count-input" type="number" min="0" step="0.01" value={price[r.ing] ?? invMap[r.ing].cost} onChange={(e) => setPrice({ ...price, [r.ing]: e.target.value })} /></td>
                    <td>{r.short ? <Pill tone="neg">{L('Short', 'Manquant')}</Pill> : r.up ? <Pill tone="warn">{L('Price up', 'Prix ↑')}</Pill> : <Pill tone="pos"><Icon n="check" /></Pill>}</td>
                  </tr>
                ))}</tbody>
              </table>
            </div>
            <div className="toolbar" style={{ justifyContent: 'space-between' }}>
              <span className="muted sm">{L('Confirming adds the stock and updates ingredient costs — recipe costs follow automatically.', 'La confirmation ajoute le stock et met à jour les coûts — les recettes suivent.')}</span>
              <button className="btn btn-primary" onClick={confirm}><Icon n="check-circle" />{rows.some((r) => r.short) ? L('Confirm partial receipt', 'Confirmer réception partielle') : L('Confirm receipt', 'Confirmer la réception')}</button>
            </div>
          </div>
        ) : <div className="panel empty">{L('Nothing to check in right now.', 'Rien à recevoir pour le moment.')}</div>}
      </section>
    </div>
  );
}

Object.assign(window, { Counts, Waste, Reorder, PurchaseOrders, Receiving, poTotal });