// CrewMealScreen.jsx — iPad Crew Meal logging (v10.00). // // Crew pick their meal from admin-configured groups (crew_meal_groups / // crew_meal_items — required groups say "Choose one", optional ones say // "Optional"), then tap "Log meal" → StaffPicker ("Who's eating?") → // PIN confirm (CmPinSheet, a copy of TrainingScreen's PinConfirmSheet) // → insert into crew_meal_logs with a full { group, item } name snapshot // so later menu edits never rewrite history. Today's logged meals render // below the pickers, newest first, kept live via realtime. // // All top-level idents are cm/Cm-prefixed — Babel-standalone scripts // share one global scope (HANDBOOK §9), so nothing here may collide // with other components' top-level consts. const { useState: useCm, useEffect: useCmEffect, useMemo: useCmMemo, useRef: useCmRef } = React; // Selected-card palette — same amber "pending" family as ChecklistScreen. const CM_SEL_PALETTE = { bg: '#FEF3C7', border: '#F59E0B', text: '#92400E' }; // Device-local YYYY-MM-DD (same helper every screen carries — matches // the portal's isoDate() so day-keyed tables agree across apps). const cmComputeKey = () => { const d = new Date(); return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'); }; // Client-generated UUID for crew_meal_logs rows so the optimistic local // entry and its realtime INSERT echo share one identity (dedupe), same // rationale as PrepScreen's newCompletionId. const cmNewLogId = () => { if (window.crypto && window.crypto.randomUUID) return window.crypto.randomUUID(); return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { const r = Math.random() * 16 | 0; return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); }); }; // "Entree" -> "an entree", "Rice" -> "a rice" — for the CTA hint line. const cmArticleFor = (name) => { const n = String(name || 'option').trim().toLowerCase(); return (/^[aeiou]/.test(n) ? 'an ' : 'a ') + n; }; const cmFmtTime = (iso) => new Date(iso).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }); const CrewMealScreen = ({ currentStaff, showToast }) => { // Today's local date key, re-checked every 30s so the screen rolls // over at midnight without a manual reload (PrepScreen pattern). const [todayKey, setTodayKey] = useCm(cmComputeKey); useCmEffect(() => { const t = setInterval(() => { const k = cmComputeKey(); setTodayKey(prev => (prev === k ? prev : k)); }, 30 * 1000); return () => clearInterval(t); }, []); // ---------------------------------------------------------------- // Config: groups + items. Fetched on mount; archived filtering stays // client-side. One realtime channel per table that simply refetches — // config is tiny, so a refetch beats event patching. // ---------------------------------------------------------------- const [cmGroups, setCmGroups] = useCm([]); const [cmItems, setCmItems] = useCm([]); useCmEffect(() => { if (!window.supa) return; let cancelled = false; const refetchConfig = async () => { const [g, i] = await Promise.all([ window.supa.from('crew_meal_groups').select('*') .eq('restaurant_id', window.RESTAURANT_ID).order('sort_order'), window.supa.from('crew_meal_items').select('*') .eq('restaurant_id', window.RESTAURANT_ID).order('sort_order'), ]); if (cancelled) return; if (g.error) console.error('crew_meal_groups select failed', g.error); else setCmGroups(g.data || []); if (i.error) console.error('crew_meal_items select failed', i.error); else setCmItems(i.data || []); }; refetchConfig(); const chGroups = window.supa .channel('ipad-crew-meal-groups:' + window.RESTAURANT_ID) .on('postgres_changes', { event: '*', schema: 'public', table: 'crew_meal_groups', filter: 'restaurant_id=eq.' + window.RESTAURANT_ID, }, () => refetchConfig()) .subscribe(); const chItems = window.supa .channel('ipad-crew-meal-items:' + window.RESTAURANT_ID) .on('postgres_changes', { event: '*', schema: 'public', table: 'crew_meal_items', filter: 'restaurant_id=eq.' + window.RESTAURANT_ID, }, () => refetchConfig()) .subscribe(); return () => { cancelled = true; window.supa.removeChannel(chGroups); window.supa.removeChannel(chItems); }; }, []); const cmActiveGroups = useCmMemo(() => ( cmGroups .filter(g => !g.archived) .slice() .sort((a, b) => (Number(a.sort_order) || 0) - (Number(b.sort_order) || 0)) ), [cmGroups]); const cmItemsByGroup = useCmMemo(() => { const m = {}; cmItems.filter(i => !i.archived).forEach(i => { (m[i.group_id] = m[i.group_id] || []).push(i); }); Object.values(m).forEach(arr => arr.sort((a, b) => (Number(a.sort_order) || 0) - (Number(b.sort_order) || 0))); return m; }, [cmItems]); // ---------------------------------------------------------------- // Today's logged meals — fetched per day, newest first, kept live. // DELETE handled by id (portal-side removals disappear); INSERT // deduped by id against our own optimistic rows. // ---------------------------------------------------------------- const [cmLogs, setCmLogs] = useCm([]); useCmEffect(() => { if (!window.supa) return; let cancelled = false; window.supa.from('crew_meal_logs').select('*') .eq('restaurant_id', window.RESTAURANT_ID) .eq('the_date', todayKey) .order('eaten_at', { ascending: false }) .then(({ data, error }) => { if (error) { console.error('crew_meal_logs select failed', error); return; } if (cancelled || !data) return; setCmLogs(data); }); const ch = window.supa .channel('ipad-crew-meal-logs:' + window.RESTAURANT_ID + ':' + todayKey) .on('postgres_changes', { event: '*', schema: 'public', table: 'crew_meal_logs', filter: 'restaurant_id=eq.' + window.RESTAURANT_ID, }, (payload) => { if (payload.eventType === 'DELETE') { // DELETE payloads only carry the PK — match by id, no date check. const gone = payload.old; if (gone && gone.id) setCmLogs(prev => prev.filter(l => l.id !== gone.id)); return; } const row = payload.new; if (!row || row.the_date !== todayKey) return; // date filtered client-side setCmLogs(prev => { if (prev.some(l => l.id === row.id)) { return prev.map(l => (l.id === row.id ? row : l)); // echo of our optimistic row } if (payload.eventType === 'INSERT') return [row, ...prev]; return prev; }); }) .subscribe(); return () => { cancelled = true; window.supa.removeChannel(ch); }; }, [todayKey]); // ---------------------------------------------------------------- // Selection — { [groupId]: itemId }, one pick per group, local-only // until the meal is logged. Tapping the selected card deselects. // ---------------------------------------------------------------- const [cmSel, setCmSel] = useCm({}); const cmToggleItem = (groupId, itemId) => setCmSel(prev => { const next = { ...prev }; if (next[groupId] === itemId) delete next[groupId]; else next[groupId] = itemId; return next; }); // Drop selections whose group/item vanished (archived or deleted via // a config refetch) so the CTA never submits a stale pick. If that // happens while the staff/PIN sheets are already up, abort the flow — // otherwise a confirmed PIN would log a partial (or empty) meal. useCmEffect(() => { let changed = false; const next = {}; Object.keys(cmSel).forEach(gid => { const alive = cmActiveGroups.some(g => g.id === gid) && (cmItemsByGroup[gid] || []).some(i => i.id === cmSel[gid]); if (alive) next[gid] = cmSel[gid]; else changed = true; }); if (!changed) return; setCmSel(next); if (phase !== 'pick') { setPhase('pick'); setPinStaff(null); showToast && showToast({ message: 'The menu just changed — please re-pick your meal', icon: 'x' }); } }, [cmActiveGroups, cmItemsByGroup, cmSel, phase]); const cmSelCount = Object.keys(cmSel).length; // Selected item names, in group sort order (drives the picker subtitle // and the snapshot written to crew_meal_logs.items). const cmSelectedPicks = cmActiveGroups .map(g => { const it = (cmItemsByGroup[g.id] || []).find(i => i.id === cmSel[g.id]); return it ? { group_id: g.id, group_name: g.name, item_id: it.id, item_name: it.name } : null; }) .filter(Boolean); // First required group that has options available but no pick yet — // blocks the primary CTA until satisfied. const cmMissingRequired = cmActiveGroups.find(g => g.required && (cmItemsByGroup[g.id] || []).length > 0 && !cmSel[g.id]) || null; // ---------------------------------------------------------------- // Submit flow — phase machine: 'pick' → 'staff' → 'pin'. // ---------------------------------------------------------------- const [phase, setPhase] = useCm('pick'); const [pinStaff, setPinStaff] = useCm(null); const cmOpenStaff = () => { if (cmSelCount === 0 || cmMissingRequired) return; setPhase('staff'); }; const cmHandlePick = (staff) => { if (!staff) return; if (!staff.pin) { // Stay on the picker — they can grab someone else or bail. showToast && showToast({ message: staff.name + ' has no PIN set — ask a manager', icon: 'x' }); return; } setPinStaff(staff); setPhase('pin'); }; const cmSubmitMeal = async (staff) => { setPhase('pick'); setPinStaff(null); const snapshot = cmSelectedPicks; if (!staff) return; // Config can change while the sheets are up (realtime + pruning // effect above). Never end a confirmed PIN in a silent no-op or a // meal missing a required slot — tell the crew member to re-pick. if (snapshot.length === 0 || cmMissingRequired) { showToast && showToast({ message: 'The menu just changed — please re-pick your meal', icon: 'x' }); return; } const id = cmNewLogId(); const row = { id, restaurant_id: window.RESTAURANT_ID, the_date: todayKey, staff_id: staff.id, items: snapshot, eaten_at: new Date().toISOString(), }; // Optimistic: show the meal in today's list immediately. setCmLogs(prev => [row, ...prev]); setCmSel({}); if (!window.supa) return; const { error } = await window.supa.from('crew_meal_logs').insert(row); if (error) { console.error('crew_meal_logs insert failed', error); setCmLogs(prev => prev.filter(l => l.id !== id)); showToast && showToast({ message: 'Failed to save — try again', icon: 'x' }); } else { // No success toast — the full-screen celebration already confirms // the save (checklist precedent). window.celebrateCompletion && window.celebrateCompletion(); } }; return (
{/* Header — same shape as Checklist / Temp Log / Delivery. */}
{window.fmtTodayLabel()}
Crew Meal
{cmLogs.length} today
{/* Scrollable body — group pickers, then today's logged meals. */}
0 ? 140 : 24, }}> {cmActiveGroups.length === 0 ? (
Crew Meal isn't set up yet — add options in the admin portal.
) : ( cmActiveGroups.map(group => ( )) )} {(cmActiveGroups.length > 0 || cmLogs.length > 0) && ( <>
Logged today
{cmLogs.length === 0 ? (
No crew meals logged yet today.
) : (
{cmLogs.map((log, idx) => ( ))}
)} )}
{/* Floating Log-meal CTA — shows only when something is selected. */} {cmSelCount > 0 && (
{cmMissingRequired && (
Pick {cmArticleFor(cmMissingRequired.name)} first
)}
)} setPhase('pick')} onPick={cmHandlePick} title="Who's eating?" subtitle={cmSelectedPicks.map(p => p.item_name).join(' · ')} /> {phase === 'pin' && pinStaff && ( {pinStaff.name}, enter your PIN to log this meal.} who={pinStaff} expectedPin={pinStaff.pin} onCancel={() => setPhase('staff')} onSuccess={() => cmSubmitMeal(pinStaff)} /> )}
); }; // ------------------------------------------------------------------ // One group's card — name + "Choose one"/"Optional" caption, then a // 2-col grid of big tappable item cards (amber when selected). // ------------------------------------------------------------------ const CmGroupCard = ({ group, items, selectedId, onTapItem }) => (
{group.name}
{group.required ? 'Choose one' : 'Optional'}
{items.length === 0 ? (
No options yet
) : (
{items.map(item => { const selected = selectedId === item.id; return ( ); })}
)}
); // ------------------------------------------------------------------ // One logged-meal row — avatar, who, what, when (newest first). // ------------------------------------------------------------------ const CmLogRow = ({ log, isLast }) => { const staff = (window.SAMPLE_STAFF || []).find(s => s.id === log.staff_id) || { name: 'Unknown', initials: '?', color: '#94A3B8' }; const names = (log.items || []).map(x => x.item_name).join(' · '); return (
{staff.name}
{names || '—'}
{cmFmtTime(log.eaten_at)}
); }; // ------------------------------------------------------------------ // PIN confirmation sheet — copy of TrainingScreen's PinConfirmSheet // (file-local there, not on window), with the shake keyframes renamed // cmPinShake so the two never collide. // ------------------------------------------------------------------ const CmPinSheet = ({ title, subtitle, who, expectedPin, onCancel, onSuccess, accent = '#1D4ED8' }) => { const [pin, setPin] = useCm(''); const [err, setErr] = useCm(false); const [shake, setShake] = useCm(false); const tryPin = (p) => { if (p === expectedPin) { onSuccess(); } else { setErr(true); setShake(true); setTimeout(() => { setPin(''); setShake(false); }, 480); setTimeout(() => setErr(false), 2000); } }; const dots = Array.from({ length: 4 }).map((_, i) => (
)); return (
{title}
{subtitle}
{dots}
{err ? 'PIN does not match' : ''}
); }; Object.assign(window, { CrewMealScreen });