// AppShell.jsx — iPad frame, lock screen, home dashboard, top bar
// Minimal Apple-inspired design. Neutral-only. Color reserved for status.
const { useState: useStateShell, useEffect: useEffectShell } = React;
// ------------------------------------------------------------------
// iPad frame — portrait only (iPad mini at ~744×1133)
// ------------------------------------------------------------------
const IPadFrame = ({ children, showFrame = true }) => {
const screenW = 744;
const screenH = 1133;
const bezel = 22;
const outerW = screenW + bezel * 2;
const outerH = screenH + bezel * 2;
if (!showFrame) {
return (
{children}
);
}
return (
);
};
// ------------------------------------------------------------------
// Top status bar
// ------------------------------------------------------------------
const StatusStrip = ({ staff, onSignOut, onLock }) => {
const [now, setNow] = useStateShell(new Date());
useEffectShell(() => {
const t = setInterval(() => setNow(new Date()), 30000);
return () => clearInterval(t);
}, []);
const time = now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
const date = now.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
return (
{time}
·
{date}
Kitchen iPad
{onLock && (
)}
);
};
// ------------------------------------------------------------------
// Lock screen — DEVICE-level unlock. Not a personal login.
// The iPad belongs to the store. Each iPad consumes a unique device code
// generated in the admin portal. Once bound, this iPad never asks again
// unless the owner ends the session (which marks the code 'revoked').
// ------------------------------------------------------------------
const BOUND_CODE_KEY = 'snap-bound-code-v1';
// Look up a code in Supabase and return the row if it's not revoked.
// Returns { match, revoked } so the caller can distinguish "wrong code" from
// "revoked code" for a better error message.
const findValidDevice = async (code) => {
if (!window.supa) return { match: null, revoked: false };
const { data, error } = await window.supa
.from('devices')
.select('*')
.eq('restaurant_id', window.RESTAURANT_ID)
.eq('code', code)
.maybeSingle();
if (error || !data) return { match: null, revoked: false };
if (data.status === 'revoked') return { match: null, revoked: true };
return { match: data, revoked: false };
};
const LockScreen = ({ onUnlock }) => {
const [pin, setPin] = useStateShell('');
const [error, setError] = useStateShell('');
const [shake, setShake] = useStateShell(false);
const handleEnter = async (p) => {
const { match, revoked } = await findValidDevice(p);
if (!match) {
setError(revoked ? 'This code has been revoked. Ask the owner for a new one.' : 'Wrong code. Try again.');
setShake(true);
setTimeout(() => { setPin(''); setShake(false); }, 500);
setTimeout(() => setError(''), 3200);
return;
}
// Bind: persist locally and flip the row to status=bound with a fresh
// bound_at + last_seen so the admin portal sees this iPad as active.
try { localStorage.setItem(BOUND_CODE_KEY, match.code); } catch {}
const updates = { last_seen: new Date().toISOString() };
if (match.status === 'unused') {
updates.status = 'bound';
updates.bound_at = new Date().toISOString();
}
window.supa.from('devices').update(updates).eq('id', match.id).then(() => {});
onUnlock(match);
};
const dots = Array.from({ length: 6 }).map((_, i) => (
));
return (
Snap Operation
Enter device code
The owner will give you a 6-digit code in the admin portal.
You only have to enter it once on this iPad.
);
};
window.BOUND_CODE_KEY = BOUND_CODE_KEY;
window.findValidDevice = findValidDevice;
const LockNumPad = ({ value, onChange, onEnter, maxLen }) => {
const keys = ['1','2','3','4','5','6','7','8','9','','0','⌫'];
const tap = (k) => {
if (k === '') return;
if (k === '⌫') return onChange(value.slice(0, -1));
if (value.length >= maxLen) return;
const next = value + k;
onChange(next);
if (next.length === maxLen && onEnter) setTimeout(() => onEnter(next), 120);
};
return (
{keys.map((k, i) => (
))}
);
};
// ------------------------------------------------------------------
// Home dashboard — minimal list-style tiles
// ------------------------------------------------------------------
const HomeScreen = ({ staff, onNavigate, prepState, closingState }) => {
const prepItems = window.SAMPLE_PREP_ITEMS;
const prepDone = prepItems.reduce((acc, it) => {
const entries = prepState[it.id] || [];
const total = entries.reduce((s, e) => s + e.qty, 0);
return acc + Math.min(1, total / it.target);
}, 0);
const prepPct = Math.round((prepDone / prepItems.length) * 100);
const prepPrimaryDone = prepItems.filter(it => it.priority === 'primary').reduce((acc, it) => {
const entries = prepState[it.id] || [];
const total = entries.reduce((s, e) => s + e.qty, 0);
return total >= it.target ? acc + 1 : acc;
}, 0);
const prepPrimaryTotal = prepItems.filter(it => it.priority === 'primary').length;
const closingTotalSteps = window.SAMPLE_CLOSING.reduce((acc, z) =>
acc + z.tasks.reduce((a, t) => a + t.steps.length, 0), 0);
const closingDoneSteps = Object.values(closingState).reduce((acc, task) =>
acc + Object.values(task).filter(s => s.done).length, 0);
const closingPct = closingTotalSteps ? Math.round((closingDoneSteps / closingTotalSteps) * 100) : 0;
const now = new Date();
const date = now.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
const greeting = (() => {
const h = now.getHours();
if (h < 11) return 'Good morning';
if (h < 17) return 'Good afternoon';
return 'Good evening';
})();
const tiles = [
{
key: 'prep',
title: 'Daily Prep',
sub: `${prepPrimaryDone} of ${prepPrimaryTotal} primary items ready`,
pct: prepPct,
icon: 'clipboard',
contributors: Array.from(new Set(Object.values(prepState).flat().map(e => e.staffId))),
},
{
key: 'closing',
title: 'Daily Closing',
sub: `${closingDoneSteps} of ${closingTotalSteps} steps complete`,
pct: closingPct,
icon: 'broom',
contributors: Array.from(new Set(Object.values(closingState).flatMap(t => Object.values(t).filter(s=>s.done).map(s=>s.staffId)))),
},
{
key: 'ordering',
title: 'Truck Order',
sub: 'Count what you have, suggest the rest',
pct: null,
icon: 'truck',
meta: 'Daily',
contributors: [],
},
{
key: 'training',
title: 'Training',
sub: 'Browse items and sign-offs',
pct: null,
icon: 'sparkle',
meta: 'Anytime',
contributors: [],
},
];
return (
{date}
{greeting}, {staff.name}
{tiles.map(t => (
))}
);
};
// ------------------------------------------------------------------
// Bottom tab bar — native-style navigation
// ------------------------------------------------------------------
const TabBar = ({ screen, onNavigate, onLock, prepState, closingState, broadcasts, trainingCompletions, currentStaff }) => {
// Resolve prep items with any target/priority overrides the admin set,
// and only count items actually assigned tonight (target > 0).
let overrides = {};
try { overrides = JSON.parse(localStorage.getItem('snap-prep-overrides') || '{}'); } catch {}
const prepItems = (window.SAMPLE_PREP_ITEMS || [])
.map(it => {
const o = overrides[it.id];
return o ? { ...it, target: o.target ?? it.target, priority: o.priority ?? it.priority } : it;
})
.filter(it => (it.target ?? 0) > 0);
const prepDone = prepItems.filter(it => {
const total = (prepState?.[it.id] || []).reduce((a, e) => a + e.qty, 0);
return total >= it.target;
}).length;
const prepBadge = prepItems.length > 0 ? Math.max(0, prepItems.length - prepDone) : 0;
// Broadcasts with NO acknowledgements yet — once anyone acks, it's cleared
const bcBadge = (broadcasts || []).filter(b => (b.acks || []).length === 0).length;
// Training badge — show count of NEW items across ALL staff (since the
// iPad is shared and there's no logged-in user). This nudges someone to
// open it; once they pick themselves they'll see their personal count.
let trainingBadge = 0;
const completions = trainingCompletions || {};
(window.SAMPLE_TRAINING_ITEMS || []).forEach(item => {
(window.SAMPLE_STAFF || []).forEach(s => {
if (!window.isAssignedTraining(item, s)) return;
if (window.hasCompletedTraining(item, s, completions)) return;
trainingBadge += 1;
});
});
const tabs = [
{ key: 'prep', label: 'Prep', icon: 'clipboard', badge: prepBadge },
{ key: 'ordering', label: 'Truck Order', icon: 'truck', badge: 0 },
{ key: 'training', label: 'Training', icon: 'sparkle', badge: trainingBadge },
{ key: 'broadcasts', label: 'Broadcasts', icon: 'megaphone', badge: bcBadge, highlight: bcBadge > 0 },
{ key: '__lock', label: 'Lock', icon: 'lock', badge: 0, action: 'lock' },
];
return (
{tabs.map(t => {
const active = !t.action && screen === t.key;
const handleTap = () => {
if (t.action === 'lock') { onLock && onLock(); return; }
onNavigate(t.key);
};
return (
);
})}