// CrewLeadScorecard.jsx — Dashboard page that turns the owner's old bonus // spreadsheet into a live report (v12.00). // // Scoring model (per Crew Lead, per 14-day pay period): // start at 100% // − for each DAILY ITEM (Prep / Checklist / Temp Log / Side Job / Store // Phone): (number of FAILED days that this lead WORKED) × item %. // Failed days come from `scorecard_daily` — the nightly snapshot written // by scorecard_snapshot_range() just after midnight Chicago, so later // edits can't rewrite bonus history. Shared: every lead who clocked in // that day takes the same hit. // − ATTENDANCE (individual): late days × %. A clock-in even 1 minute after // the scheduled start counts (owner's rule; data from `square-hours`). // ± CUSTOM items (shared): manually-entered count × signed % (e.g. 5-star // review +1, 4-star −5). Counts are stored per period. // raw can exceed 100% or go negative; FINAL is clamped to 0..100 (raw is // still displayed so overperformance is visible). // bonus = hours × $rate/hr × final%. Hours = Square CLOSED timecards net // of unpaid breaks, attributed to the local day the shift started. // // Config lives in restaurants.scorecard_config (rate_per_hour + per-item %), // edited in the gear panel here. Custom item definitions are // scorecard_custom_items; per-period counts are scorecard_custom_counts. const SC_DAILY_ITEMS = [ { key: 'prep', label: 'Prep', hint: 'primary items not completed' }, { key: 'checklist', label: 'Checklist', hint: 'any due item unchecked' }, { key: 'temp_log', label: 'Temp Log', hint: 'a checkpoint not finalized' }, { key: 'side_job', label: 'Side Job', hint: 'a due item not done' }, { key: 'store_phone', label: 'Store Phone', hint: 'a missed call not returned in time' }, ]; // Every line an override can be tied to (v20.03): the daily items plus the // late-day line. `attendance` is the config key the late-day % already uses. const SC_ITEM_LABEL = Object.fromEntries(SC_DAILY_ITEMS.map(it => [it.key, it.label])); SC_ITEM_LABEL.attendance = 'Days late to work'; // An override tied to a deduction (v20.03). `myAdj` is one lead's override // rows; `key` is the line ('prep' … 'attendance'); `entries` are that line's // days for this lead (charged, waived, off-shift); `eachPct` is the deduction // per day. Returns the entries annotated with the overrides that sit on // their day, plus the line's adjusted result — original result + the tied // overrides — and an effective record that drops a day whose overrides add // up to the full deduction. The score math elsewhere is untouched: an // override is still one signed number in the final sum. This only decides // where it is SHOWN — struck through under the deduction it undoes — and // keeps it out of the foot of the table, which now carries store-wide // overrides only. // // An override tied to a day this lead was never charged for (the day was // re-scored after it was written, or it was tied by hand to the wrong line) // comes back as an `orphan`: still visible, still editable, never hidden. const scTieOverrides = (myAdj, key, entries, record, result, eachPct) => { const tied = myAdj.filter(r => r.item_key === key); const byDay = {}; tied.forEach(r => { (byDay[r.event_date] = byDay[r.event_date] || []).push(r); }); const sum = (rows) => rows.reduce((t, r) => t + (Number(r.pct) || 0), 0); const out = entries.map(e => { const os = byDay[e.day] || []; if (!os.length) return e; const opct = sum(os); return { ...e, overrides: os, overridePct: opct, cancelled: !!e.charged && eachPct > 0 && opct >= eachPct }; }); const orphans = Object.keys(byDay).sort() .filter(day => !entries.some(e => e.day === day)) .map(day => ({ day, label: scFmtDay(day), note: 'no deduction on this day', muted: true, overrides: byDay[day], overridePct: sum(byDay[day]), orphan: true })); const tiedPct = sum(tied); return { entries: out, orphans, tied, tiedPct, adjusted: result + tiedPct, effRecord: record - out.filter(e => e.cancelled).length, }; }; // One crew lead's report, laid out for a single sheet of US Letter (v16.16). // // Printed via the browser rather than a PDF library: the portal has no build // step, native print gives selectable text and real page breaks, and "Save as // PDF" is in every print dialog. Sizing is `@page { size: letter }` plus // physical units here — pt/in, not rem — because the screen's root font size // has nothing to do with a sheet of paper. // // Colour is kept to the two verdict tones. These get printed on whatever is in // the office printer, so the layout has to survive greyscale: every red/green // figure also carries its sign, and no meaning rests on colour alone. const ScReport = ({ lead, cfg, activeCustom, rateFor, periodLabel, generatedOn }) => { const P = { fontSize: 9.5, padding: '4pt 6pt', borderBottom: '0.5pt solid #D4D4D8' }; const num = { ...P, textAlign: 'right', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }; // U+2212, matching the −N% in the Each column. JS's own '-' is a // hyphen and reads visibly shorter next to it in print. const sign = (n) => (n > 0 ? '+' : n < 0 ? '−' : '') + Math.abs(Math.round(n * 100) / 100) + '%'; const tone = (n) => (n > 0 ? '#166534' : n < 0 ? '#B91C1C' : '#3F3F46'); const struck = { textDecoration: 'line-through', color: '#A1A1AA', fontWeight: 400 }; // The days behind a deduction sit directly under the line they explain // (v19.14), so "Checklist −20%" is followed by the two days that made it. // // Three kinds of day, and the sheet has to keep them apart at a glance // (v20.03): a CHARGED day (plain), an OVERRIDDEN day (struck through, with // the manager's reason and the amount given back on the next line), and a // day that was never charged — off-shift, waived — which is pulled out to // "Not counted" at the foot so it can't be mistaken for a deduction. const chargedFor = (row) => (row.entries || []).filter(e => !e.muted); const notCounted = []; SC_DAILY_ITEMS.forEach((it, i) => { const muted = ((lead.items[i] || {}).entries || []).filter(e => e.muted); if (muted.length) notCounted.push({ label: it.label, entries: muted }); }); const overrideTotal = lead.adjPct || 0; const tiedCount = lead.tiedCount || 0; const general = (lead.adjList || []).filter(a => !a.item_key); // A day behind a deduction, indented under the line it explains. An // overridden day is struck through, and the override that undid it follows // on its own line so the reason reads as the reason for THAT day. const subRows = (key, e) => { const rows = [ {e.label} {e.note ? {' · ' + e.note} : null} {e.charged && e.eachPct ? sign(-e.eachPct) : ''} , ]; (e.overrides || []).forEach((o, k) => rows.push( Overridden {' ' + (o.reason ? o.reason : 'no reason recorded')} {sign(o.pct)} , )); return rows; }; // One scored line: original figure struck through when overrides moved it, // the figure that actually counted beside it. const resultCell = (row, extra) => { const moved = (row.tiedPct || 0) !== 0; const shown = moved ? row.adjusted : row.result; return ( {moved && {row.result === 0 ? '0%' : sign(row.result)}} {shown === 0 ? '0%' : sign(shown)} ); }; const countCell = (row, extra) => ( {row.effRecord != null && row.effRecord !== row.record ? <>{row.record}{row.effRecord} : row.record} ); const dayRows = (row, prefix) => { const days = chargedFor(row).map(e => ({ ...e, eachPct: row.eachPct })); const all = days.concat(row.orphans || []); return all.flatMap((e, k) => subRows(prefix + k, e)); }; return (
{lead.name}
Crew Lead bonus report · {periodLabel}
{Math.round(lead.finalPct)}%
Final result
{[ ['Hours', lead.effHours.toFixed(2) + (lead.fixedWeekly != null ? ' (fixed)' : '')], ['Rate', scMoney(rateFor(lead.staff_id)) + '/hr'], ['Potential', scMoney(lead.potential)], ['Bonus earned', scMoney(lead.bonus)], ].map(([k, v], i) => (
{k}
{v}
))}
{/* The one sentence that makes the sheet self-explanatory (v20.03): what struck-through means, before the reader meets one. */} {overrideTotal !== 0 && (
Without any override this period would have scored{' '} {Math.round(Math.max(0, Math.min(100, lead.beforeOverrides)))}%. {' '}A manager overrode {sign(overrideTotal)} {tiedCount ? <> — {tiedCount === 1 ? 'one deduction' : tiedCount + ' deductions'} below {tiedCount === 1 ? 'is' : 'are'} struck through with the reason given back to you : null} {general.length ? <>{tiedCount ? ', and ' : ' — '}{general.length === 1 ? 'one store-wide adjustment' : general.length + ' store-wide adjustments'} {general.length === 1 ? 'is' : 'are'} listed near the foot of the table : null}.
)}
How the score was worked out
{SC_DAILY_ITEMS.map((it, i) => { const row = { ...lead.items[i], eachPct: Number(cfg.items[it.key]) || 0 }; const days = chargedFor(row).length + (row.orphans || []).length; const nb = { borderBottom: days ? 'none' : P.borderBottom }; return ( {countCell(row, nb)} {resultCell(row, nb)} {dayRows(row, it.key)} ); })} {(() => { const row = { ...lead.att, eachPct: Number(cfg.items.attendance) || 0 }; const days = chargedFor(row).length + (row.orphans || []).length; const nb = { borderBottom: days ? 'none' : P.borderBottom }; return ( {countCell(row, nb)} {resultCell(row, nb)} {dayRows(row, 'late')} ); })()} {activeCustom.map((ci, i) => { const c = lead.custom[i]; return ( ); })} {/* Store-wide adjustments only (v20.03): an override tied to a deduction already appears struck through under that line, so listing it again here would count it twice on the page. */} {general.map(a => ( ))}
Item Each Count Result
Starting score—— 100%
{it.label} — {it.hint} −{row.eachPct}%
Days late to work — clock-in after scheduled start −{row.eachPct}%
{ci.label} {sign(ci.pct)} {c.record} {c.result === 0 ? '0%' : sign(c.result)}
Store-wide adjustment {a.event_date && {' · ' + scDayLabel(a.event_date)}} {' — '}{a.reason ? a.reason : 'no reason recorded'} — — {sign(a.pct)}
Final result {Math.round(lead.finalPct)}%
{/* Everything that did NOT affect the score, at the very bottom (v19.14). It has to be here — the report must answer "why isn't this counted against me?" — but above the deductions it competed with them for attention, and reading a day you were forgiven for in the middle of the days you were charged for is exactly backwards. */} {notCounted.length > 0 && ( <>
Not counted {' — never charged: off shift, or waived by the labor rule; none of this changed the score'}
{notCounted.map(sec => ( {sec.entries.map((e, i) => ( ))} ))}
{sec.label}
{e.label} {e.note}
)}
); }; const SC_DEFAULT_CONFIG = { rate_per_hour: 2, hide_inactive: false, // Prep waiver: a failed Prep day is forgiven when that day's labor cost was // under this % of sales (busy day, short-handed). Sales = gross less // third-party commission, discounts NOT deducted (v19.09). 0 = off. labor_waiver_pct: 22, items: { prep: 10, checklist: 20, temp_log: 10, side_job: 10, store_phone: 10, attendance: 20 }, }; // The PDF's default filename. Browsers take it from document.title, so the // print effect swaps the title for the duration and puts it back after // (v16.17). "07-26-26 Omar Bohorquez 89" — period start, full name, score. // No '%': some file pickers are funny about it, and it reads fine without. const scPdfName = (periodStart, fullName, finalPct) => { const mm = String(periodStart.getMonth() + 1).padStart(2, '0'); const dd = String(periodStart.getDate()).padStart(2, '0'); const yy = String(periodStart.getFullYear()).slice(-2); // Strip anything a filesystem would object to; keep it otherwise verbatim. const safe = String(fullName || '').replace(/[\\/:*?"<>|]/g, '').trim(); return `${mm}-${dd}-${yy} ${safe} ${Math.round(finalPct)}`; }; const scMoney = (n) => '$' + (Math.round(n * 100) / 100).toFixed(2); const scPct = (n) => (Math.round(n * 100) / 100) + '%'; // 'YYYY-MM-DD' → 'Aug 14'. Split field-by-field rather than `new Date(str)`, // which parses a bare date as UTC and prints the day before anywhere west of // it — the same bug that put the wrong incident date on discipline memos. const scDayLabel = (ymd) => { const [y, m, d] = String(ymd || '').split('-').map(Number); if (!y || !m || !d) return ''; return new Date(y, m - 1, d).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }); }; // 'YYYY-MM-DD' -> "Mon, Jul 13". Parsed by hand — new Date('YYYY-MM-DD') is // UTC and drifts a day in Central time (HANDBOOK §9). const scFmtDay = (iso) => { const [y, m, d] = iso.split('-').map(Number); return new Date(y, m - 1, d).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }); }; const scFmtTime = (iso) => { try { return new Date(iso).toLocaleTimeString('en-US', { timeZone: 'America/Chicago', hour: 'numeric', minute: '2-digit', }).replace(' ', '').toLowerCase(); } catch (e) { return ''; } }; // Instant -> Chicago wall-clock 'YYYY-MM-DD HH:MM' for lexical comparison // against a checkpoint's day + time. Comparing in wall-clock space is DST-safe // and handles overnight shifts (the interval simply spans two dates). const scChiWallFmt = new Intl.DateTimeFormat('en-CA', { timeZone: 'America/Chicago', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hourCycle: 'h23', }); const scChiWall = (iso) => { try { const parts = scChiWallFmt.formatToParts(new Date(iso)); const g = (t) => (parts.find(p => p.type === t) || {}).value || '00'; return `${g('year')}-${g('month')}-${g('day')} ${g('hour')}:${g('minute')}`; } catch (e) { return ''; } }; // 'HH:MM' (24h) -> '9:00pm' const scFmt12 = (hm) => { if (!hm) return ''; const [h, m] = hm.split(':').map(Number); return (((h + 11) % 12) + 1) + ':' + String(m || 0).padStart(2, '0') + (h >= 12 ? 'pm' : 'am'); }; // Did this lead work on `day`, and when? Reads the same `worked_days` / // `intervals` the daily items are judged from, so the override picker offers // exactly the people the scorecard would hold responsible for that date — // and shows their clock times, which is what decides responsibility for the // time-of-day items (Checklist checkpoints, a missed call). const scWorkedOn = (lead, day) => { if (!day) return null; if (!(lead.worked_days || []).includes(day)) return null; const spans = (lead.intervals || []) .map(iv => [scChiWall(iv.start_at), iv.end_at ? scChiWall(iv.end_at) : '']) .filter(([a, b]) => a && (a.slice(0, 10) === day || (b && b.slice(0, 10) === day))) // No end_at means they are still on the clock — say so rather than // dropping the row and leaving the chip looking like it has no shift. .map(([a, b]) => b ? scFmt12(a.slice(11)) + '–' + scFmt12(b.slice(11)) : 'from ' + scFmt12(a.slice(11))); return { spans }; }; // ⓘ + hover card listing the days behind a Record number. Entries: // { label, note?, muted?, charged?, day?, overrides?, cancelled? } — muted // renders the row grey (waived / off shift); an entry carrying `overrides` // is struck through when they cancel the whole deduction and shows each // override, with its reason, beneath it (v20.03). `extra` are orphans: // overrides tied to a day with no deduction, kept visible so they can be // fixed. const ScInfoTip = ({ entries, extra, onOverride, onEditOverride, onDeleteOverride }) => { const [open, setOpen] = useState(false); // The card holds a button now, so reaching it with the mouse has to be // reliable (v19.13). Two things were fighting that: // // 1. The card sat at `top: 18` under a 13px icon, leaving ~5px of dead // space. mouseleave fires the instant the pointer is over neither, so // moving toward the card closed it. The gap is now PADDING on a // transparent positioning wrapper, which makes it part of the // hoverable area instead of a hole in it. // 2. A diagonal exit can still clip a corner for one frame. Closing is // deferred, and re-entering cancels it. const closeTimer = useRef(null); const cancelClose = () => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } }; const openNow = () => { cancelClose(); setOpen(true); }; const closeSoon = () => { cancelClose(); closeTimer.current = setTimeout(() => setOpen(false), 140); }; useEffect(() => cancelClose, []); const all = (entries || []).concat(extra || []); if (all.length === 0) return null; const hasOverride = all.some(e => e.overrides && e.overrides.length); const iconBtn = (name, title, onClick) => ( ); return ( {open && (
{/* One day per block (v20.04): the date and the Override button on the first line, the note on its own line beneath so a long checkpoint list wraps instead of running out of the card. */} {all.map((e, i) => { const cancelled = !!e.cancelled; const muted = !!e.muted; const strike = cancelled ? { textDecoration: 'line-through', color: 'var(--fg-3)' } : {}; return (
{e.label} {/* An override starts from the deduction it undoes (v19.12). Only on rows that actually cost something and aren't already fully overridden — a waived, off-shift or cancelled row has nothing left to override. */} {onOverride && e.charged && e.day && !cancelled ? ( ) : (cancelled ? ( Overridden ) : null)}
{e.note && (
{e.note}
)} {/* The overrides that sit on this day, each with its reason and its own edit/remove — this card is where a tied override lives now, not the foot of the table (v20.03). */} {(e.overrides || []).map(o => (
{(Number(o.pct) || 0) > 0 ? '+' : ''}{scPct(Number(o.pct) || 0)} {o.reason || No reason recorded} {onEditOverride && iconBtn('edit', 'Edit this override', () => onEditOverride(o))} {onDeleteOverride && iconBtn('trash', 'Remove this override', () => onDeleteOverride(o))}
))}
); })}
)} ); }; // Custom-item mappers (useSupaList) const scCustomItemFromRow = (r) => ({ id: r.id, label: r.label, pct: Number(r.pct) || 0, sortOrder: Number(r.sort_order) || 0, archived: !!r.archived, }); const scCustomItemToRow = (o) => ({ id: o.id, label: o.label, pct: Number(o.pct) || 0, sort_order: Number(o.sortOrder) || 0, archived: !!o.archived, }); const CrewLeadScorecard = ({ payAnchor }) => { const [periodOffset, setPeriodOffset] = useState(0); const [daily, setDaily] = useState(null); // scorecard_daily rows for period const [square, setSquare] = useState(null); // square-hours response const [labor, setLabor] = useState({}); // day -> {labor_cents, sales_cents, pct} for failed-prep days // 'YYYY-MM-DD HH:MM' (Chicago) -> caller number, for every missed call in // the period (v21.01). The snapshot only stores a miss's TIME; the number // is what lets someone find the call in Quo, so it is looked up here. const [missedByWall, setMissedByWall] = useState({}); const [config, setConfig] = useState(null); // restaurants.scorecard_config const [counts, setCounts] = useState({}); // custom counts: itemId -> count // Every override row for this period (v19.06). One row per (override × // person); rows sharing a batch_id are one override the manager created. const [adjRows, setAdjRows] = useState([]); const [adjEditing, setAdjEditing] = useState(null); // draft override, or null // staff_id -> { bonus_per_hour } (v16.00). The bonus is per person now, // set on Crew, so the scorecard has to look each lead up rather than // multiplying everyone by one global rate. const [staffById, setStaffById] = useState({}); // staff_id of the report being printed, or null. Set it, let React paint, // then window.print(); cleared on afterprint (v16.16). const [printLead, setPrintLead] = useState(null); // Captured at click time rather than derived in the effect: the effect has // to sit above this component's `if (!period) return` guard, which is well // above where `leads` (and so finalPct) is computed. const [printName, setPrintName] = useState(''); const [loading, setLoading] = useState(true); const [error, setError] = useState(''); const [settingsOpen, setSettingsOpen] = useState(false); const [toast, setToast] = useState(''); const refreshedFor = useRef(null); // period startISO we already auto-snapshotted const [customItems, setCustomItems] = window.useSupaList('scorecard_custom_items', { fromRow: scCustomItemFromRow, toRow: scCustomItemToRow, initial: () => [], }); // Period derivation must tolerate a not-yet-loaded anchor WITHOUT an early // return — every hook below has to run on every render or React throws // "Rendered more hooks than during the previous render" the moment the // anchor arrives (App loads it async). The early return lives after the // hooks, guarded by `period` being null. const refDate = new Date(); refDate.setDate(refDate.getDate() + periodOffset * 14); const period = (payAnchor && window.getPayPeriod) ? window.getPayPeriod(payAnchor, refDate) : null; const startISO = period ? isoDate(period.start) : null; const endISO = period ? isoDate(period.end) : null; const todayISO = isoDate(new Date()); const load = async () => { if (!window.supa || !startISO) return; setLoading(true); setError(''); try { const fetchDaily = () => window.supa.from('scorecard_daily').select('the_date, item_key, passed, detail') .eq('restaurant_id', window.RESTAURANT_ID) .gte('the_date', startISO).lte('the_date', endISO); const [dRes, cfgRes, cntRes, adjRes] = await Promise.all([ fetchDaily(), window.supa.from('restaurants').select('scorecard_config').eq('id', window.RESTAURANT_ID).single(), window.supa.from('scorecard_custom_counts').select('item_id, count') .eq('restaurant_id', window.RESTAURANT_ID).eq('period_start', startISO), window.supa.from('scorecard_adjustments').select('id, staff_id, pct, reason, batch_id, created_at, event_date, item_key') .eq('restaurant_id', window.RESTAURANT_ID).eq('period_start', startISO) .order('created_at', { ascending: true }), ]); if (dRes.error) throw dRes.error; const cfg = { ...SC_DEFAULT_CONFIG, ...(cfgRes.data?.scorecard_config || {}) }; cfg.items = { ...SC_DEFAULT_CONFIG.items, ...(cfg.items || {}) }; setConfig(cfg); setCounts(Object.fromEntries((cntRes.data || []).map(r => [r.item_id, r.count]))); setAdjRows((adjRes.data || []).map(r => ({ ...r, pct: Number(r.pct) || 0 }))); const { data: staffRows } = await window.supa.from('staff') .select('id, name, bonus_per_hour, fixed_hours_per_week').eq('restaurant_id', window.RESTAURANT_ID); setStaffById(Object.fromEntries((staffRows || []).map(r => [r.id, r]))); // Missed calls for the period, keyed by Chicago day + HH:MM — the same // wall-clock the snapshot's `calls[].time` is written in. A day's UTC // window is widened by a day either side; the key does the precise cut. const { data: missedRows } = await window.supa.from('phone_calls') .select('started_at, external_number') .eq('restaurant_id', window.RESTAURANT_ID) .eq('direction', 'incoming').eq('answered', false) .gte('started_at', startISO + 'T00:00:00Z') .lte('started_at', endISO + 'T23:59:59Z') .limit(1000); const byWall = {}; (missedRows || []).forEach(r => { const w = scChiWall(r.started_at); if (w && r.external_number && !byWall[w]) byWall[w] = r.external_number; }); setMissedByWall(byWall); // Auto-heal: if any fully-elapsed day is missing snapshot rows (e.g. the // page is viewed on a period predating the nightly job), backfill once. let dRows = dRes.data || []; const elapsed = period.days.map(isoDate).filter(d => d < todayISO); const expected = elapsed.length * SC_DAILY_ITEMS.length; if (dRows.length < expected && refreshedFor.current !== startISO) { refreshedFor.current = startISO; const { error: rpcErr } = await window.supa.rpc('scorecard_refresh', { d0: startISO, d1: endISO }); if (!rpcErr) { const again = await fetchDaily(); if (again.data) dRows = again.data; } } setDaily(dRows); // Square runs AFTER the snapshots so we can ask for labor % on exactly // the failed-Prep days (the waiver rule only needs those). const failedPrep = dRows.filter(r => r.item_key === 'prep' && !r.passed).map(r => r.the_date).sort(); const sqRes = await window.supa.functions.invoke('square-hours', { body: { start_date: startISO, end_date: endISO, labor_days: failedPrep.slice(0, 16) }, }); if (sqRes.error || sqRes.data?.error) { setSquare({ crew_leads: [], failed: true }); setLabor({}); } else { setSquare(sqRes.data); setLabor(sqRes.data.labor || {}); } } catch (e) { setError(e.message || String(e)); } setLoading(false); }; useEffect(() => { load(); }, [startISO]); // Print has to happen AFTER the report is in the DOM, so it hangs off the // state change rather than the click. afterprint fires on both Print and // Cancel, which is what clears the sheet either way. useEffect(() => { if (!printLead) return; const prevTitle = document.title; if (printName) document.title = printName; const done = () => setPrintLead(null); window.addEventListener('afterprint', done); const t = setTimeout(() => window.print(), 150); return () => { clearTimeout(t); window.removeEventListener('afterprint', done); document.title = prevTitle; }; }, [printLead, printName]); if (!period) { return (
Loading pay-period settings…
); } const saveConfig = async (next) => { setConfig(next); const { error: err } = await window.supa.from('restaurants') .update({ scorecard_config: next }).eq('id', window.RESTAURANT_ID); setToast(err ? 'Save failed — ' + err.message : 'Scorecard settings saved'); }; // One override, applied to one or more people, with the reason it exists. // Written as a row per person sharing a batch_id — see the migration note. // A reason is required by the UI, not by the column: the seven rows that // pre-date this have none, and back-filling an invented reason onto // someone's bonus record would be worse than showing it blank. const saveOverride = async (draft) => { const pct = Math.max(-100, Math.min(100, Number(draft.pct) || 0)); const reason = (draft.reason || '').trim(); const ids = draft.staffIds || []; if (!ids.length || !reason) return false; const batch = draft.batchId || crypto.randomUUID(); const now = new Date().toISOString(); const rows = ids.map(sid => ({ id: batch + ':' + sid, restaurant_id: window.RESTAURANT_ID, staff_id: sid, period_start: startISO, pct, reason, event_date: draft.eventDate || null, // Tied to a deduction (v20.03): the line + the day above name exactly // one charged entry in that person's column. NULL = store-wide. item_key: draft.itemKey || null, batch_id: batch, created_by_email: window.currentAdminEmail || null, updated_at: now, })); // An edit can drop people, so the batch is cleared before it is rewritten // rather than upserted over — otherwise someone removed from an override // keeps their row and silently keeps the adjustment. if (draft.batchId) { const { error: delErr } = await window.supa.from('scorecard_adjustments').delete().eq('batch_id', batch); if (delErr) { setToast('Override save failed — ' + delErr.message); return false; } } const { error: err } = await window.supa.from('scorecard_adjustments').insert(rows); if (err) { setToast('Override save failed — ' + err.message); return false; } setAdjRows(prev => prev.filter(r => r.batch_id !== batch) .concat(rows.map(r => ({ id: r.id, staff_id: r.staff_id, pct, reason, batch_id: batch, event_date: draft.eventDate || null, item_key: draft.itemKey || null, created_at: now })))); setToast(draft.batchId ? 'Override updated' : 'Override added'); return true; }; const deleteOverride = async (batchId, reason) => { if (!window.confirm('Remove this override?' + (reason ? '\n\n“' + reason + '”' : '') + '\n\nIt stops counting toward the bonus and disappears from everyone\u2019s report.')) return; const { error: err } = await window.supa.from('scorecard_adjustments').delete().eq('batch_id', batchId); if (err) { setToast('Delete failed — ' + err.message); return; } setAdjRows(prev => prev.filter(r => r.batch_id !== batchId)); setToast('Override removed'); }; const saveCount = async (itemId, count) => { const n = Math.max(0, Math.round(Number(count) || 0)); setCounts(c => ({ ...c, [itemId]: n })); const { error: err } = await window.supa.from('scorecard_custom_counts').upsert({ id: itemId + ':' + startISO, restaurant_id: window.RESTAURANT_ID, item_id: itemId, period_start: startISO, count: n, updated_at: new Date().toISOString(), }, { onConflict: 'restaurant_id,item_id,period_start' }); if (err) setToast('Count save failed — ' + err.message); }; // Persist a lead's fixed weekly hours. Empty clears it back to clocked // Square hours, which is the default and what everyone else uses. const saveFixedHours = async (staffId, raw) => { const txt = String(raw == null ? '' : raw).trim(); const val = txt === '' ? null : Math.min(168, Math.max(0.25, Number(txt))); if (txt !== '' && !Number.isFinite(val)) return; const prev = staffById[staffId]; setStaffById(m => ({ ...m, [staffId]: { ...(m[staffId] || {}), fixed_hours_per_week: val } })); // .select() so an RLS refusal surfaces as an error rather than a zero-row // success that looks like it saved (§9, v16.05). const { error } = await window.supa.from('staff') .update({ fixed_hours_per_week: val }).eq('id', staffId).select(); if (error) { setStaffById(m => ({ ...m, [staffId]: prev })); setToast('Save failed: ' + error.message); return; } setToast(val == null ? 'Back to clocked hours' : 'Fixed at ' + val + ' hrs/week'); }; // ---------- scoring ---------- const cfg = config || SC_DEFAULT_CONFIG; // v16.00 — the bonus rate is per person (staff.bonus_per_hour, edited on // Crew), not one global number. cfg.rate_per_hour survives only as the // fallback for a staff row that predates the column. const fallbackRate = Number(cfg.rate_per_hour) || 0; const rateFor = (staffId) => { const row = (staffById && staffById[staffId]) || null; return row && row.bonus_per_hour != null ? Number(row.bonus_per_hour) : fallbackRate; }; // v16.13 — salaried leads can have their hours STATED instead of measured. // Omar clocks only his scheduled shifts and does admin outside them without // punching, so his closed timecards understate the week he's paid for. // fixed_hours_per_week null (everyone else) keeps the Square figure. // // Scaled by the period length rather than assumed fortnightly: the pay // period comes from payAnchor and a caller could hand this a different // span. 50/wk over a 14-day period is 100, and it does NOT pro-rate down // mid-period — a fixed figure that crept up day by day would be neither // fixed nor the clocked truth, just a third number nobody could check. const periodWeeks = (period && period.days && period.days.length) ? period.days.length / 7 : 2; const fixedWeeklyFor = (staffId) => { const row = (staffById && staffById[staffId]) || null; const v = row && row.fixed_hours_per_week; return v == null || v === '' ? null : Number(v); }; const hoursFor = (lead) => { const fw = fixedWeeklyFor(lead.staff_id); return fw == null ? (lead.hours || 0) : fw * periodWeeks; }; const failedByItem = {}; // item_key -> Set('YYYY-MM-DD') // Per-checkpoint breakdowns. store_phone joined in v14.06 (detail.calls = // the local times of each unreturned miss, for the on-shift test below). const detailByDay = { checklist: {}, temp_log: {}, store_phone: {} }; (daily || []).forEach(r => { if (!r.passed) (failedByItem[r.item_key] = failedByItem[r.item_key] || new Set()).add(r.the_date); if (detailByDay[r.item_key]) { detailByDay[r.item_key][r.the_date] = r.detail || {}; } }); // Prep labor waiver (v16.00). The decision is made in SQL, inside // scorecard_snapshot_range, against the stored sales_daily / labor_daily // figures and the per-weekday target on Sales vs. Labor. This used to be // recomputed here from a separate live Square call against one global %, // which meant the portal and the snapshot could disagree about the same day. // Now the snapshot is the single answer and this only reads it: a waived day // is passed=true carrying detail.waived, so it never reaches failedByItem — // we pull it back out purely to keep showing it, greyed, in the tooltip. const prepDetail = {}; // 'YYYY-MM-DD' -> detail blob for prep (daily || []).forEach(r => { if (r.item_key === 'prep') prepDetail[r.the_date] = r.detail || {}; }); // Only days the waiver actually RESCUED. detail.waived is true whenever the // day hit its labor target, including days where prep was finished anyway — // listing those as "waived" would imply a save that never happened. const prepWaivedDays = Object.keys(prepDetail).filter(d => { const x = prepDetail[d]; return x.waived && Number(x.done) < Number(x.due); }); const activeCustom = customItems.filter(ci => !ci.archived) .sort((a, b) => (a.sortOrder - b.sortOrder) || a.label.localeCompare(b.label)); const leads = ((square && square.crew_leads) || []) // Optional display filter — a deactivated lead who worked the period still // exists in the data (and their bonus math is unaffected); this just hides // their column when the owner doesn't want to see departed staff. .filter(l => !(cfg.hide_inactive && l.active === false)) .map(l => { const worked = new Set(l.worked_days || []); // Shift windows in Chicago wall-clock space, for the checkpoint rule. const wallIntervals = (l.intervals || []).map(iv => [scChiWall(iv.start_at), scChiWall(iv.end_at)]); const onShift = (day, hm) => { if (!hm) return true; // checkpoint with no time — fall back to day-based charge const t = day + ' ' + hm; return wallIntervals.some(([a, b]) => a && b && a <= t && t <= b); }; const items = SC_DAILY_ITEMS.map(it => { const pct = Number(cfg.items[it.key]) || 0; // Checklist + Temp Log charge per CHECKPOINT: a lead is only responsible // for checkpoints whose time-of-day fell inside their clock-in/out. A day // still counts at most once; off-shift misses show greyed in the tooltip. if (it.key === 'checklist' || it.key === 'temp_log') { const entries = []; let record = 0; for (const d of [...(failedByItem[it.key] || [])].sort()) { if (!worked.has(d)) continue; const det = detailByDay[it.key][d] || {}; const cps = (it.key === 'checklist' ? (det.groups || []) : (det.checkpoints || [])) .filter(cp => cp.failed) .map(cp => ({ name: cp.name || cp.label, time: cp.time })); const mine = cps.filter(cp => onShift(d, cp.time)); const off = cps.filter(cp => !onShift(d, cp.time)); if (mine.length) { record += 1; entries.push({ day: d, charged: true, label: scFmtDay(d), note: mine.map(cp => `${cp.name} (${scFmt12(cp.time)})`).join(', ') + ' missed', // Which checkpoints charged this lead (v20.04): a tied override // reaches only the leads that share one, because two leads // can both fail Checklist on the same day for different hours. cps: mine.map(cp => cp.name + '@' + cp.time), }); } else if (off.length) { entries.push({ day: d, label: scFmtDay(d), note: 'off shift — ' + off.map(cp => `${cp.name} (${scFmt12(cp.time)})`).join(', '), muted: true, }); } } return { key: it.key, record, entries, result: -(record * pct) }; } // Store Phone charges per unreturned CALL on the same shift rule: a // lead only owns a miss that rang while they were clocked in (v14.06). // `detail.calls` carries the local HH:MM of each still-unreturned miss; // rows written before v14.06 have none, and those fall back to the // day-based charge rather than being silently forgiven. if (it.key === 'store_phone') { const entries = []; let record = 0; for (const d of [...(failedByItem[it.key] || [])].sort()) { if (!worked.has(d)) continue; const times = ((detailByDay[it.key][d] || {}).calls || []) .map(c => c && c.time).filter(Boolean); if (times.length === 0) { record += 1; entries.push({ day: d, charged: true, label: scFmtDay(d), note: 'missed call not returned' }); continue; } const mine = times.filter(t => onShift(d, t)); const off = times.filter(t => !onShift(d, t)); // "12:05pm · (229) 485-8436" — the number is what identifies the // call in Quo; the time alone was ambiguous on a day with two. const callText = (t) => { const num = missedByWall[d + ' ' + t]; return scFmt12(t) + (num ? ' · ' + (window.fmtPhone ? window.fmtPhone(num) : num) : ''); }; if (mine.length) { record += 1; entries.push({ day: d, charged: true, label: scFmtDay(d), note: mine.map(callText).join(', ') + ' — not returned', cps: mine.map(t => 'call@' + t), // shown under the count in the table cell (v21.01) cellLine: scDayLabel(d) + ' ' + mine.map(t => scFmt12(t)).join(', '), }); } else if (off.length) { entries.push({ day: d, label: scFmtDay(d), note: 'off shift — ' + off.map(callText).join(', '), muted: true, }); } } return { key: it.key, record, entries, result: -(record * pct) }; } // Day-based items. Only Prep has the labor waiver; waived days stay in // the tooltip but drop out of the counted record. const counted = [...(failedByItem[it.key] || [])].filter(d => worked.has(d)).sort(); // Waived prep days passed, so they aren't in failedByItem — add them back // for display only. They never count toward the record. const shown = it.key === 'prep' ? [...new Set([...counted, ...prepWaivedDays.filter(d => worked.has(d))])].sort() : counted; const entries = shown.map(d => { const det = it.key === 'prep' ? (prepDetail[d] || {}) : {}; const waived = !!det.waived; return { day: d, charged: !waived, label: scFmtDay(d), note: waived ? `waived — labor ${det.labor_pct != null ? det.labor_pct : '?'}% (target ${det.labor_target_pct != null ? det.labor_target_pct : '?'}%)` : 'missed', muted: waived, }; }); return { key: it.key, record: counted.length, entries, result: -(counted.length * pct) }; }); const attPct = Number(cfg.items.attendance) || 0; const lateEntries = (l.late_days || []).map(x => ({ day: x.date, charged: true, label: scFmtDay(x.date), note: `in ${scFmtTime(x.clocked_in)} vs ${scFmtTime(x.scheduled_start)}`, })); const att = { key: 'attendance', record: lateEntries.length, entries: lateEntries, result: -(lateEntries.length * attPct) }; const custom = activeCustom.map(ci => { const count = counts[ci.id] || 0; return { id: ci.id, record: count, result: count * ci.pct }; }); const myAdj = adjRows.filter(r => r.staff_id === l.staff_id); // Overrides tied to a deduction are folded into that line for DISPLAY // (v20.03): the day is struck through, the line shows the figure that // counted. The score below still sums every override once, exactly as // before — `adjPct` is unchanged; `generalPct` is the store-wide part // the foot of the table shows. items.forEach(row => Object.assign(row, scTieOverrides(myAdj, row.key, row.entries, row.record, row.result, Number(cfg.items[row.key]) || 0))); Object.assign(att, scTieOverrides(myAdj, 'attendance', att.entries, att.record, att.result, attPct)); const generalAdj = myAdj.filter(r => !r.item_key); const generalPct = generalAdj.reduce((sum, r) => sum + (Number(r.pct) || 0), 0); const tiedCount = myAdj.length - generalAdj.length; const adjPct = myAdj.reduce((sum, r) => sum + (Number(r.pct) || 0), 0); const raw = 100 + items.reduce((s, x) => s + x.result, 0) + att.result + custom.reduce((s, x) => s + x.result, 0) + adjPct; const finalPct = Math.max(0, Math.min(100, raw)); const effHours = hoursFor(l); const potential = effHours * rateFor(l.staff_id); const bonus = potential * finalPct / 100; return { ...l, items, att, custom, adjPct, generalPct, tiedCount, adjList: myAdj, generalAdj, beforeOverrides: raw - adjPct, raw, finalPct, potential, bonus, effHours, fixedWeekly: fixedWeeklyFor(l.staff_id) }; }); // ---------- render ---------- const cellR = { padding: '8px 10px', textAlign: 'right', fontFamily: 'var(--font-num)', whiteSpace: 'nowrap' }; const cellHead = { padding: '8px 10px', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--fg-3)', textAlign: 'right', whiteSpace: 'nowrap', }; const sectionRow = (label) => ( {label} ); const resColor = (n) => n > 0 ? '#2D6A2A' : (n < 0 ? '#DC2626' : 'var(--fg-2)'); // A line an override moved shows both figures (v20.03): the original // struck through in grey, then the one that counted. The record does the // same when a whole day was cancelled. const struckStyle = { textDecoration: 'line-through', color: 'var(--fg-3)', fontWeight: 400, marginRight: 5 }; const recordCell = (row) => ( row.effRecord != null && row.effRecord !== row.record ? <>{row.record}{row.effRecord} : row.record ); const resultCell = (row) => { const moved = (row.tiedPct || 0) !== 0; const shown = moved ? row.adjusted : row.result; return ( {moved && {scPct(row.result)}} {shown > 0 ? '+' : ''}{scPct(shown)} ); }; // Open the override composer from a specific deduction (v19.12). Date and // person come from the row you clicked, and the percentage defaults to the // exact amount that deduction cost — overriding a −10% Checklist day almost // always means giving the 10% back. The REASON is deliberately left empty: // prefilling it with the miss would put a description of what happened where // the justification belongs, and it would get accepted unread. const openOverrideFor = ({ lead, itemKey, itemLabel, entry, pct }) => setAdjEditing({ batchId: null, pct: pct ? String(Math.abs(pct)) : '', reason: '', staffIds: [lead.staff_id], eventDate: entry.day, // The tie is what gets stored (v20.03); the context string is display only. itemKey: itemKey || null, // The exact miss (v20.04): the picker offers only leads charged for one // of these checkpoints / calls, not everyone charged the line that day. cps: entry.cps || null, context: itemLabel + ' · ' + entry.label + (entry.note ? ' · ' + entry.note : ''), }); // Edit an existing override from wherever it is shown — the ⓘ card of the // deduction it is tied to, or the store-wide list at the foot. const openEditBatch = (batchId) => { const b = adjBatches.find(x => x.batchId === batchId); if (!b) return; setAdjEditing({ batchId: b.batchId, pct: String(b.pct), reason: b.reason, staffIds: b.staffIds, eventDate: b.eventDate || '', itemKey: b.itemKey || null, context: b.itemKey ? (SC_ITEM_LABEL[b.itemKey] || b.itemKey) + (b.eventDate ? ' · ' + scFmtDay(b.eventDate) : '') : '', }); }; // Flat rows → the overrides as created. Names resolve through the period's // leads first so the column header and this line agree; staffById covers // anyone who has since stopped being a lead but still carries the row. // // Plain expression, NOT useMemo: this sits below the loading/error early // returns, so a hook here runs on some renders and not others — React // counts hooks by position and throws "rendered more hooks than during the // previous render". There are a handful of rows; memoising buys nothing. const adjBatches = (() => { const by = {}; adjRows.forEach(r => { const b = by[r.batch_id] || (by[r.batch_id] = { batchId: r.batch_id, pct: Number(r.pct) || 0, reason: r.reason || '', eventDate: r.event_date || null, itemKey: r.item_key || null, staffIds: [], names: [], createdAt: r.created_at || '', }); b.staffIds.push(r.staff_id); const lead = (leads || []).find(l => l.staff_id === r.staff_id); b.names.push(lead ? lead.first_name : ((staffById[r.staff_id] || {}).name || r.staff_id)); }); return Object.values(by).sort((a, b2) => String(a.createdAt).localeCompare(String(b2.createdAt))); })(); // Coverage note (v14.12). Daily items are only judged once a day has // CLOSED — scorecard_snapshot_range clamps to yesterday (Chicago), because // scoring a day still in progress would fail every checklist group and temp // checkpoint whose time hasn't arrived. Without saying so, today's misses // look like they were forgiven. Only shown while the period is still open. const scoredThrough = (daily || []).reduce((m, r) => (r.the_date > m ? r.the_date : m), ''); const showCoverage = !loading && !error && endISO >= todayISO && scoredThrough && scoredThrough < todayISO; return (
{ const { error: err, data } = await window.supa.rpc('scorecard_refresh', { d0: startISO, d1: endISO }); setToast(err ? 'Refresh failed — ' + err.message : 'Re-checked ' + (data / SC_DAILY_ITEMS.length) + ' days'); if (!err) load(); }} /> setSettingsOpen(true)}>Settings } /> {showCoverage && (
Daily items scored through {scFmtDay(scoredThrough)}. {' '}Today is judged after it closes, so anything that happened today isn't counted here yet.
)} {error &&
Couldn't load: {error}
} {loading && !error &&
Crunching the period…
} {!loading && !error && square && square.failed && (
Square is unreachable — hours, lateness and the crew list can't be shown right now. The daily-item snapshots below are unaffected.
)} {!loading && !error && leads.length === 0 && !(square && square.failed) && (
No Crew Lead worked in this period.
)} {!loading && !error && leads.length > 0 && (
{leads.map(l => ( ))} ))} {sectionRow('Daily items (shared — days you worked)')} {SC_DAILY_ITEMS.map((it, i) => ( {leads.map(l => { const row = l.items[i]; return ( {resultCell(row)} ); })} ))} {sectionRow('Attendance (individual)')} {leads.map(l => ( {resultCell(l.att)} ))} {activeCustom.length > 0 && sectionRow('Custom (shared — whole period)')} {activeCustom.map((ci, i) => ( {leads.map(l => ( ))} ))} {/* OVERRIDES (v20.03). An override tied to a deduction lives in that deduction's ⓘ card and is already reflected in the line's struck-through figure, so it is NOT listed again here — the foot carries only store-wide overrides (no deduction behind them) and their total, and the column reads straight down to the final result. */} {adjBatches.filter(b => !b.itemKey).map(b => ( {leads.map(l => { const applies = b.staffIds.includes(l.staff_id); return ( ); })} ))} {leads.map(l => ( ))} ))} {leads.map(l => ( ))} {leads.map(l => ( ))}
Object Math {l.first_name} {l.active === false && (inactive)} { setPrintName(scPdfName(period.start, l.name, l.finalPct)); setPrintLead(l.staff_id); }} />
{leads.map(l => ( Record Result
{it.label}
{it.hint}
 −{Number(cfg.items[it.key]) || 0}% {recordCell(row)} openOverrideFor({ lead: l, itemKey: it.key, itemLabel: it.label, entry, pct: Number(cfg.items[it.key]) || 0, })} onEditOverride={(o) => openEditBatch(o.batch_id)} onDeleteOverride={(o) => deleteOverride(o.batch_id, o.reason)} /> {/* Which calls, right in the cell (v21.01): the count alone can't tell a 12:05 miss from a 3:44 one. */} {it.key === 'store_phone' && row.entries.some(e => e.cellLine) && (
{row.entries.filter(e => e.cellLine).map(e => (
{e.cellLine}
))}
)}
Days late to work
clock-in after scheduled start
 −{Number(cfg.items.attendance) || 0}% {recordCell(l.att)} openOverrideFor({ lead: l, itemKey: 'attendance', itemLabel: 'Days late to work', entry, pct: Number(cfg.items.attendance) || 0, })} onEditOverride={(o) => openEditBatch(o.batch_id)} onDeleteOverride={(o) => deleteOverride(o.batch_id, o.reason)} />
{ci.label} saveCount(ci.id, e.target.value)} style={{ width: 64, height: 28, textAlign: 'right', fontFamily: 'var(--font-num)' }} title="How many this period" /> {ci.pct > 0 ? '+' : ''}{ci.pct}%{l.custom[i].record} {l.custom[i].result > 0 ? '+' : ''}{scPct(l.custom[i].result)}
Store-wide override (manual) setAdjEditing({ batchId: null, pct: '', reason: '', staffIds: [], eventDate: '', itemKey: null, context: '' })}> Add override {adjBatches.some(b => b.itemKey) && ( {adjBatches.filter(b => b.itemKey).length} tied to a deduction above — hover its ⓘ )}
{/* The OBJECT column is sized for short labels like "Temp Log"; a sentence in it wraps to a ten-line sliver. minWidth gives the reason a readable measure and widens the column for every row, which costs nothing — the table already scrolls. */}
{b.reason || No reason recorded}
{b.eventDate ? scDayLabel(b.eventDate) + ' · ' : ''}{b.names.join(', ')}
{b.pct > 0 ? '+' : ''}{scPct(b.pct)} {applies ? : '—'} {applies ? (b.pct > 0 ? '+' : '') + scPct(b.pct) : '—'}
Store-wide override total
{adjBatches.filter(b => !b.itemKey).length === 0 ? 'none this period' : 'total of ' + adjBatches.filter(b => !b.itemKey).length + ' store-wide override' + (adjBatches.filter(b => !b.itemKey).length === 1 ? '' : 's')}
±% {l.generalAdj.length || '—'} {l.generalPct > 0 ? '+' : ''}{scPct(l.generalPct)}
FINAL RESULT {leads.map(l => ( {scPct(l.finalPct)} {l.raw !== l.finalPct && ( raw {scPct(l.raw)} )}
Hours · Bonus (rate set on Crew) {l.effHours.toFixed(2)} {/* A stated figure must never look like a measured one. The dotted underline + tooltip keep the real clocked hours one hover away, so nobody has to wonder why the number doesn't match Square. */} {l.fixedWeekly != null && ( fixed )} {/* The rate is per person now, so the row header can't state it once for everyone — it has to sit with the hours it multiplies. */} ({scMoney(rateFor(l.staff_id))}/hr) {scMoney(l.bonus)}
Potential · Missed {scMoney(l.potential)} 0 ? '#DC2626' : 'var(--fg-2)' }}>{scMoney(l.potential - l.bonus)}
)} {!loading && !error && (
Daily items are frozen nightly just after midnight (Chicago) — a failed day charges every Crew Lead who clocked in that day. Today ({fmtDate(new Date())}) isn't judged until it's over. Hours count closed Square shifts only, so today's open shift appears after clock-out. <> A failed Prep day is waived when that day's scheduled labor ran at or under the weekday's target share of sales — set those on Sales vs. Labor. Hover the ⓘ to see which days. {' '}Checklist and Temp Log only charge a lead for checkpoints that fell inside their clock-in/out — an off-shift miss shows greyed in the ⓘ and doesn't count. {' '}An override tied to a deduction is struck through inside that deduction's ⓘ, and the line shows the figure that counted; only store-wide overrides are listed at the foot.
)} {/* Print sheet. Kept out of the DOM until asked for, and out of the screen layout entirely — `position: fixed; left: -10000px` rather than display:none, because a display:none subtree doesn't lay out and prints blank in Safari. In print we hide everything by VISIBILITY (display:none on an ancestor would take the report with it) and float the sheet to the top-left of the page box. */} {printLead && (() => { const lead = leads.find(l => l.staff_id === printLead); if (!lead) return null; return ReactDOM.createPortal( <>
, document.body, ); })()} {settingsOpen && config && ( setSettingsOpen(false)} /> )} {adjEditing && ( cfg.items[k]} periodLabel={period ? (fmtDate(period.start) + ' – ' + fmtDate(period.end)) : 'this period'} periodStart={startISO} periodEnd={endISO} todayISO={todayISO} onSave={async (d) => { if (await saveOverride(d)) setAdjEditing(null); }} onClose={() => setAdjEditing(null)} /> )} {toast && setToast('')} />}
); }; // Period navigator — same interaction as DailyReport's, named apart to avoid // the top-level-const collision gotcha (HANDBOOK §9). const ScPeriodNav = ({ period, offset, onOffsetChange }) => (
onOffsetChange(offset - 1)} title="Previous period" />
{fmtDate(period.start)} – {fmtDate(period.end)}
onOffsetChange(offset + 1)} title="Next period" /> {offset !== 0 && onOffsetChange(0)}>Current}
); const ScToast = ({ msg, onDone }) => { useEffect(() => { const t = setTimeout(onDone, 2600); return () => clearTimeout(t); }, [msg]); return (
{msg}
); }; // Settings: $/hr rate + per-item deduction %s + custom item manager. // One override: how much, why, and who it lands on (v19.06). // // The reason is REQUIRED. This is the only number on the page a manager can // move by hand, it goes straight onto someone's pay, and it is the one the // person receiving it has the most reason to question — an unexplained ±30% // is exactly what a written record should not contain. The text lands on // their printed report verbatim, so the field says so. const ScOverrideModal = ({ draft, leads, cfgItemsPct, periodLabel, periodStart, periodEnd, todayISO, onSave, onClose }) => { const [pct, setPct] = useState(draft.pct ?? ''); const [reason, setReason] = useState(draft.reason || ''); // The leads a line actually charged on a day (v20.04). For the checkpoint // items that is not "who worked" — Checklist, Temp Log and Store Phone // charge by who was clocked in at that hour — so a tied override offers // exactly the people carrying that deduction, and offers all of them // pre-selected: a shared miss is nearly always forgiven for everyone it hit. const lineEntries = (l, key) => key === 'attendance' ? (l.att && l.att.entries) || [] : ((l.items || []).find(row => row.key === key) || {}).entries || []; // `cps` narrows a checkpoint line to the exact miss the override started // from (v20.04): a lead charged Checklist that day for a DIFFERENT hour // was not affected by this one. A lead whose entry carries no checkpoints // (pre-v14.06 day-based charge) is kept — nothing says it wasn't the same. const chargedOn = (key, day, cps) => (!key || !day) ? [] : leads.filter(l => lineEntries(l, key).some(e => e.day === day && e.charged && (!cps || !cps.length || !e.cps || e.cps.some(c => cps.includes(c))))); const originCps = (key) => (key && key === draft.itemKey ? draft.cps : null) || null; const [ids, setIds] = useState(() => (!draft.batchId && draft.itemKey) ? chargedOn(draft.itemKey, draft.eventDate, originCps(draft.itemKey)).map(l => l.staff_id) : (draft.staffIds || [])); // Defaults to today when the period is still running, otherwise its last // day — an override is nearly always about something inside the period // being scored, so an empty date field would just be typing for its own sake. const [eventDate, setEventDate] = useState( draft.eventDate || (todayISO >= periodStart && todayISO <= periodEnd ? todayISO : periodEnd) || ''); const outsidePeriod = eventDate && (eventDate < periodStart || eventDate > periodEnd); // Escape hatch: an override can legitimately be about something with no // shift attached (a rota someone never published, say), so the full list // stays reachable — just not the default. const [showAll, setShowAll] = useState(false); // What this override is tied to (v20.03): a scorecard line + the date // above. Opened from a deduction's ⓘ it arrives set; opened from the foot // it is picked here from the deductions the selected people were charged // on that date — or left untied, which is a store-wide adjustment. const [itemKey, setItemKey] = useState(draft.itemKey || null); const whoWorked = leads.filter(l => scWorkedOn(l, eventDate)); const whoCharged = chargedOn(itemKey, eventDate, originCps(itemKey)); // Shift data is only loaded for the period on screen. For a date outside // it we know nothing, which is not the same as knowing nobody worked — // so offer everyone rather than assert an absence we can't see. const unknownShifts = !!outsidePeriod; // Tied: the people that deduction charged. Untied: the people on shift. const narrow = itemKey ? whoCharged : whoWorked; const choices = (showAll || unknownShifts) ? leads : narrow; // Changing the date (or the tie) can strip someone of their reason for // being selected. Silently leaving them ticked is how an override lands // on a person who wasn't there, which is the whole thing this is meant // to prevent. A NEW tied override re-selects everyone the deduction hit. useEffect(() => { setIds(prev => { const kept = prev.filter(id => choices.some(l => l.staff_id === id)); if (itemKey && !draft.batchId && !showAll) { const hit = chargedOn(itemKey, eventDate, originCps(itemKey)).map(l => l.staff_id); return hit.length ? hit : kept; } return kept; }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [eventDate, showAll, itemKey]); const [saving, setSaving] = useState(false); const tieChoices = (() => { if (!eventDate) return []; const seen = {}; leads.filter(l => ids.includes(l.staff_id)).forEach(l => { const lines = l.items.map(row => ({ key: row.key, label: SC_ITEM_LABEL[row.key], entries: row.entries, each: Number(cfgItemsPct(row.key)) || 0 })) .concat([{ key: 'attendance', label: SC_ITEM_LABEL.attendance, entries: l.att.entries, each: Number(cfgItemsPct('attendance')) || 0 }]); lines.forEach(line => { const hit = (line.entries || []).find(e => e.day === eventDate && e.charged); if (hit && !seen[line.key]) seen[line.key] = { key: line.key, label: line.label, each: line.each, note: hit.note }; }); }); return Object.values(seen); })(); const n = Number(pct); const pctValid = pct !== '' && !Number.isNaN(n) && n >= -100 && n <= 100 && n !== 0; const ok = pctValid && reason.trim().length > 0 && ids.length > 0 && !!eventDate; const toggle = (id) => setIds(v => v.includes(id) ? v.filter(x => x !== id) : v.concat([id])); return (
Cancel { setSaving(true); await onSave({ ...draft, pct: n, reason, staffIds: ids, eventDate, itemKey }); setSaving(false); }}> {saving ? 'Saving…' : draft.batchId ? 'Save override' : 'Add override'} }>
{itemKey && (
Tied to{' '} {draft.context && draft.itemKey === itemKey ? draft.context : (SC_ITEM_LABEL[itemKey] || itemKey) + (eventDate ? ' · ' + scFmtDay(eventDate) : '')} Shows struck through under that deduction, with this reason.
)}
setPct(e.target.value)} placeholder="e.g. 10 or -15" style={{ width: 130, textAlign: 'right', fontFamily: 'var(--font-num)' }} autoFocus /> % {pctValid && ( 0 ? '#2D6A2A' : '#DC2626' }}> {n > 0 ? 'adds' : 'takes away'} {Math.abs(n)}% {n > 0 ? 'to' : 'from'} {ids.length || 'no'} {' '}{ids.length === 1 ? 'person' : 'people'} )}
setEventDate(e.target.value)} style={{ width: 190 }} /> {outsidePeriod && (
That's outside {periodLabel}. It still applies to this period's score — just make sure that's what you meant.
)} {/* Only offered once there's a date, and only the leads who actually worked it (v19.11). Picking someone who wasn't there is not a thing a manager means to do, and the old list made it a single mis-click. Their clock times ride along, because a checkpoint or a missed call is charged by whether they were on shift at that hour, not merely present that day. */} {!eventDate ? (
Pick a date first — then this lists who was on shift.
) : (narrow.length === 0 && !unknownShifts) ? (
{itemKey ? <>Nobody was charged {SC_ITEM_LABEL[itemKey] || itemKey} on {scDayLabel(eventDate)}. Untie it, pick another date, or use : <>No Crew Lead was clocked in on {scDayLabel(eventDate)}. Pick another date, or use} {' '}.
) : null} {eventDate && choices.length > 0 && (
{choices.map(l => { const on = ids.includes(l.staff_id); const w = scWorkedOn(l, eventDate); const hit = itemKey ? lineEntries(l, itemKey).find(e => e.day === eventDate && e.charged) : null; // eslint-disable-next-line no-unused-vars return ( ); })}
{choices.length > 1 && ( )} {unknownShifts && ( Shift times aren’t loaded for dates outside {periodLabel}, so everyone is listed. )} {!unknownShifts && narrow.length > 0 && narrow.length < leads.length && ( )}
)} {/* Which deduction this undoes (v20.03). Only offered once there is a date and someone selected, and only the lines they were actually charged on that date. Untied = store-wide, listed at the foot. */} {!itemKey && eventDate && ids.length > 0 && ( {tieChoices.length > 0 && (
{tieChoices.map(c => ( ))}
)} )} {window.AiTextField ? :