// PrepScreen.jsx — Daily Prep List // Minimal Apple-inspired. Neutral surfaces, ink accents. // Three interaction variants (Tweaks): stepper / tap / numpad sheet const { useState: usePrep, useMemo: useMemoPrep, useRef: useRefPrep, useEffect: useEffectPrep } = React; // ------------------------------------------------------------------ // Header // ------------------------------------------------------------------ const PrepHeader = ({ onBack, items, progress, filter, setFilter, interactionMode, setInteractionMode, picIds = [], onOpenAssign, onAddItem }) => { const total = items.length; const completedCount = items.filter(it => { const q = (progress[it.id] || []).reduce((s, e) => s + e.qty, 0); return q >= it.target; }).length; const pics = picIds.map(id => window.SAMPLE_STAFF.find(s => s.id === id)).filter(Boolean); return (
{/* Title block */}
Today · {new Date().toLocaleDateString('en-US', { weekday: 'long' })}
Daily Prep
{/* Divider */}
{/* PIC chips — inline */}
PIC
{pics.length === 0 ? ( Unassigned ) : pics.map(s => ( {s.name} ))}
{/* Divider */}
{/* Done counter */}
Done
{completedCount}/{total}
{/* Add item */}
); }; // ------------------------------------------------------------------ // Filter pill row (sits inside the scroll / list area, not in the header) // ------------------------------------------------------------------ const PrepFilterPills = ({ items, progress, filter, setFilter }) => { const primaryLeft = items.filter(it => { if (it.priority !== 'primary') return false; const q = (progress[it.id] || []).reduce((s, e) => s + e.qty, 0); return q < it.target; }).length; const secondaryLeft = items.filter(it => { if (it.priority !== 'secondary') return false; const q = (progress[it.id] || []).reduce((s, e) => s + e.qty, 0); return q < it.target; }).length; const doneCount = items.filter(it => { const q = (progress[it.id] || []).reduce((s, e) => s + e.qty, 0); return q >= it.target; }).length; const tabs = [ { k: 'All', count: null }, { k: 'Primary', count: primaryLeft }, { k: 'Secondary', count: secondaryLeft }, { k: 'Done', count: doneCount }, ]; return (
{tabs.map(({ k, count }) => { const active = filter === k; return ( ); })}
); }; // ------------------------------------------------------------------ // Item progress // ------------------------------------------------------------------ const ItemProgress = ({ item, entries }) => { const total = entries.reduce((s, e) => s + e.qty, 0); const pct = Math.min(100, (total / item.target) * 100); const done = total >= item.target; return ( <>
{total} / {item.target}
); }; // ------------------------------------------------------------------ // Entry chips // ------------------------------------------------------------------ const EntryChips = ({ entries, onRemove }) => (
{entries.length === 0 && ( No entries yet )} {entries.map((e, i) => { const s = window.SAMPLE_STAFF.find(x => x.id === e.staffId); if (!s) return null; return (
{e.qty} · {e.ts} {onRemove && ( )}
); })}
); // ------------------------------------------------------------------ // Variant D: Table row (dense) // ------------------------------------------------------------------ const TABLE_GRID = '1.3fr 180px 100px 88px'; // ------------------------------------------------------------------ // Contributor avatars — shown in the progress cell // Aggregates entries by staffId → renders tiny avatar with qty badge // ------------------------------------------------------------------ const ContributorAvatars = ({ entries }) => { if (!entries || entries.length === 0) return null; const byStaff = {}; entries.forEach(e => { byStaff[e.staffId] = (byStaff[e.staffId] || 0) + e.qty; }); const contribs = Object.entries(byStaff) .map(([id, qty]) => ({ staff: window.SAMPLE_STAFF.find(s => s.id === id), qty })) .filter(c => c.staff); const max = 3; const shown = contribs.slice(0, max); const rest = contribs.length - max; return (
{shown.map(({ staff, qty }) => (
{qty}
))} {rest > 0 && (
+{rest}
)}
); }; const TableHeader = ({ category, count }) => (
{category} {count} item{count !== 1 ? 's' : ''}
Progress
Team
Action
); const TableRow = ({ item, entries, onTap, isLast }) => { const total = entries.reduce((s, e) => s + e.qty, 0); const done = total >= item.target; const pct = Math.min(100, (total / item.target) * 100); const [hover, setHover] = usePrep(false); return (
onTap(item)} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'grid', gridTemplateColumns: TABLE_GRID, gap: 16, alignItems: 'center', padding: '12px 14px', borderLeft: '1px solid var(--border-1)', borderRight: '1px solid var(--border-1)', borderBottom: isLast ? '1px solid var(--border-1)' : '1px solid var(--border-2)', borderBottomLeftRadius: isLast ? 12 : 0, borderBottomRightRadius: isLast ? 12 : 0, background: hover ? 'var(--bg-sunken)' : 'var(--bg-surface)', cursor: 'pointer', transition: 'background 120ms var(--ease-snap)', }} >
{item.name}
{item.note && (
“{item.note}”
)}
{total} /{item.target}
); }; // ------------------------------------------------------------------ // Variant A: Stepper row // ------------------------------------------------------------------ const StepperRow = ({ item, entries, onContribute, currentStaff }) => { const total = entries.reduce((s, e) => s + e.qty, 0); const done = total >= item.target; const remaining = Math.max(0, item.target - total); const [pendingDelta, setPendingDelta] = usePrep(0); const [pickerOpen, setPickerOpen] = usePrep(false); const commit = (staff) => { if (pendingDelta !== 0) onContribute(staff, pendingDelta); setPendingDelta(0); setPickerOpen(false); }; return (
{item.name}
{item.note && (
“{item.note}”
)}
{pendingDelta > 0 ? '+' : ''}{pendingDelta || 0}
setPickerOpen(true)} > Sign setPickerOpen(false)} onPick={commit} title={`Who made ${pendingDelta > 0 ? '+' : ''}${pendingDelta} of ${item.name}?`} />
); }; // ------------------------------------------------------------------ // Variant B: Tap card // ------------------------------------------------------------------ const TapCard = ({ item, entries, onContribute }) => { const total = entries.reduce((s, e) => s + e.qty, 0); const done = total >= item.target; const pct = Math.min(100, (total / item.target) * 100); const [pickerOpen, setPickerOpen] = usePrep(false); const [pending, setPending] = usePrep(0); const handleTap = () => { setPending(1); setPickerOpen(true); }; const commit = (staff) => { onContribute(staff, pending); setPickerOpen(false); }; return (
{item.name}
{item.note && (
“{item.note}”
)}
setPickerOpen(false)} onPick={(s) => commit(s)} title={pending === 1 ? `Who made 1 of ${item.name}?` : `Who worked on ${item.name}?`} />
); }; // ------------------------------------------------------------------ // Variant C: Numpad sheet // ------------------------------------------------------------------ const NumpadRow = ({ item, entries, onTap }) => { const total = entries.reduce((s, e) => s + e.qty, 0); const done = total >= item.target; return ( ); }; // ------------------------------------------------------------------ // Full-screen crew log sheet — each crew shows running total, ± commits live // ------------------------------------------------------------------ const CrewLogSheet = ({ open, onClose, item, entries = [], onAdjust }) => { if (!open || !item) return null; // Sum existing contributions by staff — this IS the running total shown in each row const byStaff = {}; entries.forEach(e => { byStaff[e.staffId] = (byStaff[e.staffId] || 0) + e.qty; }); const total = entries.reduce((s, e) => s + e.qty, 0); const pct = Math.min(100, (total / item.target) * 100); const staff = window.SAMPLE_STAFF; const done = total >= item.target; return (
{/* Header */}
Log prep · {item.category}
{item.name}
Progress
{total} /{item.target}
{/* Progress bar */}
{/* Crew grid */}
Tap + each time a crew member finishes a batch · tap − to undo
{staff.map(s => { const count = byStaff[s.id] || 0; const active = count > 0; return (
{s.name}
{s.role}
{count}
); })}
{/* Footer action bar */}
{done ? 'Target reached — great work' : `${item.target - total} more to reach target`}
Done
); }; const NumpadSheet = ({ open, onClose, item, entries = [], onSubmit }) => { const [qty, setQty] = usePrep(''); const [stage, setStage] = usePrep('qty'); const [staff, setStaff] = usePrep(null); useMemoPrep(() => { if (open) { setQty(''); setStage('qty'); setStaff(null); } }, [open, item?.id]); if (!open || !item) return null; const currentTotal = entries.reduce((s, e) => s + e.qty, 0); const remaining = Math.max(0, item.target - currentTotal); const qtyNum = parseInt(qty || '0'); const overLimit = qtyNum > remaining; const atTarget = remaining === 0; return ( {stage === 'qty' ? (
{atTarget ? ( Already at target of {item.target} — no more needed. ) : ( {currentTotal} done of {item.target} {' · '} {remaining} more needed )}
{qty || '0'}
{overLimit && (
Can't exceed the assigned target ({item.target})
)} setStage('staff')} > {atTarget ? 'Target already reached' : overLimit ? 'Over limit' : 'Continue'}
) : (
{window.SAMPLE_STAFF.map(s => ( ))}
)} ); }; // ------------------------------------------------------------------ // Set Targets sheet — full-screen bulk editor for tonight's targets. // Lists all prep items with − / + counters and a Primary/Secondary // toggle per item. No units — numbers only. // ------------------------------------------------------------------ const SetTargetsSheet = ({ open, onClose, items, onSave }) => { // Local draft state, keyed by item id: { target, priority, note } const [draft, setDraft] = usePrep({}); const [editingNote, setEditingNote] = usePrep(null); useEffectPrep(() => { if (open) { const next = {}; items.forEach(it => { next[it.id] = { target: it.target, priority: it.priority, note: it.note || '' }; }); setDraft(next); setEditingNote(null); } }, [open]); if (!open) return null; const bump = (id, delta) => { setDraft(prev => { const cur = prev[id] || { target: 0, priority: 'primary', note: '' }; const next = Math.max(0, cur.target + delta); return { ...prev, [id]: { ...cur, target: next } }; }); }; const setNote = (id, v) => { setDraft(prev => { const cur = prev[id] || { target: 0, priority: 'primary', note: '' }; return { ...prev, [id]: { ...cur, note: v } }; }); }; const setExact = (id, v) => { setDraft(prev => { const cur = prev[id] || { target: 0, priority: 'primary' }; const n = Math.max(0, Number(v) || 0); return { ...prev, [id]: { ...cur, target: n } }; }); }; const togglePriority = (id) => { setDraft(prev => { const cur = prev[id] || { target: 0, priority: 'primary' }; return { ...prev, [id]: { ...cur, priority: cur.priority === 'primary' ? 'secondary' : 'primary' } }; }); }; const filtered = items; // Count changes vs original const changes = items.reduce((n, it) => { const d = draft[it.id]; if (!d) return n; if (d.target !== it.target || d.priority !== it.priority || (d.note || '') !== (it.note || '')) return n + 1; return n; }, 0); // Group filtered by category, preserving input order within each const order = ['Meat', 'Vegetable', 'Sauce', 'Other', 'Cleaning & Fixing']; const grouped = order .map(cat => ({ category: cat, rows: filtered.filter(it => it.category === cat) })) .filter(g => g.rows.length > 0); const handleSave = () => { onSave(draft); onClose(); }; return (
{/* Header */}
Today · {new Date().toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}
Set today's prep targets
{/* List */}
{grouped.length === 0 && (
No items match.
)} {grouped.map(g => (
{g.category}
{g.rows.length} item{g.rows.length !== 1 ? 's' : ''}
{g.rows.map((it, idx) => { const d = draft[it.id] || { target: it.target, priority: it.priority, note: it.note || '' }; const isSecondary = d.priority === 'secondary'; const hasNote = !!(d.note && d.note.trim()); const isEditingNote = editingNote === it.id; const changed = d.target !== it.target || d.priority !== it.priority || (d.note || '') !== (it.note || ''); return (
{/* Name */}
{it.name}
{hasNote && !isEditingNote && (
“{d.note}”
)} {changed && !hasNote && (
was {it.target} · {it.priority === 'primary' ? 'Primary' : 'Secondary'}
)}
{/* Priority pill — its own column */}
{/* Counter — centered in its column */}
setExact(it.id, e.target.value)} style={{ width: 56, height: 40, textAlign: 'center', textAlignLast: 'center', padding: 0, lineHeight: '40px', fontFamily: 'var(--font-num)', fontWeight: 600, fontSize: 18, color: 'var(--fg-1)', background: 'var(--bg-sunken)', border: '1px solid transparent', borderRadius: 10, outline: 'none', MozAppearance: 'textfield', }} />
{isEditingNote && (
setNote(it.id, e.target.value)} onKeyDown={e => { if (e.key === 'Enter' || e.key === 'Escape') setEditingNote(null); }} placeholder="Add a comment for the team…" maxLength={120} style={{ flex: 1, height: 38, padding: '0 12px', fontSize: 14, fontFamily: 'var(--font-ui)', background: '#FFFFFF', color: 'var(--fg-1)', border: '1px solid #2563EB', borderRadius: 10, outline: 'none', }} />
)}
); })}
))}
{/* Sticky footer */}
{changes === 0 ? 'No changes' : ( {changes} {changes === 1 ? 'item' : 'items'} updated )}
Cancel Save targets
); }; // ------------------------------------------------------------------ // Main // ------------------------------------------------------------------ const PrepScreen = ({ onBack, prepState, setPrepState, interactionMode, setInteractionMode, currentStaff, showToast }) => { // Target / priority overrides — edited via Set Targets sheet. // Shape: { [itemId]: { target?: number, priority?: 'primary'|'secondary' } } const [overrides, setOverrides] = usePrep(() => { try { const raw = localStorage.getItem('snap-prep-overrides'); return raw ? JSON.parse(raw) : {}; } catch { return {}; } }); useEffectPrep(() => { try { localStorage.setItem('snap-prep-overrides', JSON.stringify(overrides)); } catch {} }, [overrides]); // Full catalog (for Set Targets sheet) and the "assigned tonight" subset // (target > 0) that the staff actually sees in Daily Prep. const allItems = useMemoPrep(() => window.SAMPLE_PREP_ITEMS.map(it => { const o = overrides[it.id]; if (!o) return it; return { ...it, target: o.target ?? it.target, priority: o.priority ?? it.priority, note: o.note ?? it.note }; }), [overrides]); const items = useMemoPrep(() => allItems.filter(it => (it.target ?? 0) > 0), [allItems]); const [addOpen, setAddOpen] = usePrep(false); const [filter, setFilter] = usePrep('All'); const [sheetItem, setSheetItem] = usePrep(null); const [picIds, setPicIds] = usePrep(() => { const all = new Set(); window.SAMPLE_PREP_ITEMS.forEach(it => (window.SAMPLE_PREP_PIC?.[it.id] || []).forEach(id => all.add(id))); return Array.from(all); }); const [assignOpen, setAssignOpen] = usePrep(false); const visible = useMemoPrep(() => { return items.filter(it => { const entries = prepState[it.id] || []; const q = entries.reduce((s, e) => s + e.qty, 0); const done = q >= it.target; if (filter === 'Primary') return it.priority === 'primary' && !done; if (filter === 'Secondary') return it.priority === 'secondary' && !done; if (filter === 'Done') return done; return true; }); }, [filter, prepState]); const grouped = useMemoPrep(() => { const by = {}; visible.forEach(it => { if (!by[it.category]) by[it.category] = []; by[it.category].push(it); }); Object.values(by).forEach(arr => arr.sort((a, b) => { if (a.priority !== b.priority) return a.priority === 'primary' ? -1 : 1; return 0; })); const order = ['Meat', 'Vegetable', 'Sauce', 'Other', 'Cleaning & Fixing']; return order.filter(c => by[c]).map(c => ({ category: c, items: by[c] })); }, [visible]); const contribute = (itemId, staff, qty) => { const item = items.find(i => i.id === itemId); const existing = prepState[itemId] || []; const currentTotal = existing.reduce((s, e) => s + e.qty, 0); const remaining = item ? Math.max(0, item.target - currentTotal) : qty; const capped = Math.max(0, Math.min(qty, remaining)); if (capped === 0) { showToast({ message: `${item?.name || 'Item'} already at target (${item?.target})`, staff }); return; } setPrepState(prev => { const existing2 = prev[itemId] || []; const next = [...existing2, { staffId: staff.id, qty: capped, ts: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }) }]; return { ...prev, [itemId]: next }; }); if (capped < qty) { showToast({ message: `Capped at +${capped} — target of ${item.target} reached`, staff }); } else { showToast({ message: `+${capped} logged for ${staff.name}`, staff }); } }; const adjustCrew = (itemId, staff, delta) => { const ts = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }); setPrepState(prev => { const existing = prev[itemId] || []; if (delta > 0) { const item = items.find(i => i.id === itemId); const currentTotal = existing.reduce((s, e) => s + e.qty, 0); if (item && currentTotal >= item.target) { // Silently no-op; button should already be disabled return prev; } return { ...prev, [itemId]: [...existing, { staffId: staff.id, qty: 1, ts }] }; } // delta < 0 — remove 1 from this staff's most recent entry let removed = false; const next = []; for (let i = existing.length - 1; i >= 0; i--) { const e = existing[i]; if (!removed && e.staffId === staff.id) { if (e.qty > 1) next.unshift({ ...e, qty: e.qty - 1 }); // else drop the entry entirely removed = true; } else { next.unshift(e); } } return { ...prev, [itemId]: next }; }); }; const contributeMany = (itemId, payload) => { if (!payload || payload.length === 0) return; const item = items.find(i => i.id === itemId); const existing = prepState[itemId] || []; const currentTotal = existing.reduce((s, e) => s + e.qty, 0); let remaining = item ? Math.max(0, item.target - currentTotal) : Infinity; const ts = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }); const added = []; let dropped = 0; for (const p of payload) { const take = Math.max(0, Math.min(p.qty, remaining)); if (take > 0) { added.push({ staffId: p.staff.id, qty: take, ts }); remaining -= take; } dropped += (p.qty - take); } if (added.length === 0) { showToast({ message: `${item?.name || 'Item'} already at target (${item?.target})` }); return; } setPrepState(prev => { const existing2 = prev[itemId] || []; return { ...prev, [itemId]: [...existing2, ...added] }; }); if (dropped > 0) { showToast({ message: `Capped at target — ${dropped} over limit dropped` }); } }; return (
setAssignOpen(true)} onAddItem={() => setAddOpen(true)} />
{items.length === 0 ? (
Nothing assigned today
Pick today's prep items and set targets to get started.
) : ( {grouped.map(g => (
{interactionMode === 'table' && (
{g.items.map((it, idx) => ( setSheetItem(item)} isLast={idx === g.items.length - 1} /> ))}
)} {interactionMode !== 'table' && (
{g.items.length} item{g.items.length !== 1 ? 's' : ''}
)} {interactionMode === 'stepper' && (
{g.items.map(it => ( contribute(it.id, staff, delta)} currentStaff={currentStaff} /> ))}
)} {interactionMode === 'tap' && (
{g.items.map(it => ( contribute(it.id, staff, delta)} /> ))}
)} {interactionMode === 'sheet' && (
{g.items.map(it => ( setSheetItem(it)} /> ))}
)}
))} )}
setSheetItem(null)} item={sheetItem} entries={sheetItem ? (prepState[sheetItem.id] || []) : []} onAdjust={(staff, delta) => adjustCrew(sheetItem.id, staff, delta)} /> setAssignOpen(false)} selectedIds={picIds} onSave={(ids) => { setPicIds(ids); showToast({ message: ids.length === 0 ? 'PIC cleared' : `PIC updated · ${ids.length} assigned` }); }} title="Assign PIC for Daily Prep" /> setAddOpen(false)} items={allItems} onSave={(draft) => { // Diff draft against sample defaults; only persist real deltas. const next = {}; let changed = 0; window.SAMPLE_PREP_ITEMS.forEach(base => { const d = draft[base.id]; if (!d) return; const targetDelta = d.target !== base.target ? d.target : undefined; const priorityDelta = d.priority !== base.priority ? d.priority : undefined; const baseNote = base.note || ''; const draftNote = d.note || ''; const noteDelta = draftNote !== baseNote ? draftNote : undefined; if (targetDelta !== undefined || priorityDelta !== undefined || noteDelta !== undefined) { next[base.id] = {}; if (targetDelta !== undefined) next[base.id].target = targetDelta; if (priorityDelta !== undefined) next[base.id].priority = priorityDelta; if (noteDelta !== undefined) next[base.id].note = noteDelta; changed++; } }); setOverrides(next); showToast({ message: changed === 0 ? 'Targets reset to defaults' : `Updated ${changed} target${changed !== 1 ? 's' : ''}`, icon: 'check' }); }} />
); }; Object.assign(window, { PrepScreen });