/* Main App — renders tabs. Visual styling is driven by a `theme` prop so
the same app can be shown three ways in the design canvas. */
const {
LS, DEFAULT_LINEUP, DEFAULT_CHECKLIST, DEFAULT_SUNDAY_CHECKLIST, DEFAULT_OPENING_CHECKLIST,
DEFAULT_CARNEVALE, DEFAULT_VEGFACTOR, DEFAULT_PILGRIM, DEFAULT_COBBLE_LANE,
DEFAULT_KATER4, DEFAULT_KILOWINES, DEFAULT_MAJESTIC, DEFAULT_ROTHLEY, DEFAULT_ROUNDCORNER, DEFAULT_AMAZON,
DEFAULT_FOH_OPENING, DEFAULT_FOH_OPENING_THURSDAY,
DEFAULT_FOH_CLEANING,
DEFAULT_FOH_CLOSING, DEFAULT_FOH_CLOSING_THURSDAY, DEFAULT_FOH_END_OF_NIGHT,
DEFAULT_POTWASH_OPENING, DEFAULT_POTWASH_CLOSING,
useLocal, useSharedStock,
parseQty, stockShortfall, stockStatus, buildMailto, fmtDate, nextThursday
} = window;
// =========================================================
// ICONS
// =========================================================
const Icon = {
home: (s=20) =>
{checked && Icon.check(14)}
{label}
{onQty && (
onQty(e.target.value.replace(/[^0-9]/g, "").slice(0, 3))}
style={{
width: 46, textAlign: "center", fontSize: 14, fontWeight: 600,
border: `1px solid ${theme.rowBorder}`, borderRadius: 8, padding: "7px 4px",
background: theme.input, color: theme.text, fontFamily: "inherit",
outline: "none", flexShrink: 0
}}/>
)}
{editing && onMove && (
<>
onMove(-1)} style={iconBtn(theme)} aria-label="Move up">{Icon.up(13)}
onMove(1)} style={iconBtn(theme)} aria-label="Move down">{Icon.down(13)}
)}
{editing && (
{Icon.trash(15)}
)}
);
}
const iconBtn = (theme) => ({
width: 30, height: 30, borderRadius: 8,
border: `1px solid ${theme.rowBorder}`, background: "transparent", color: theme.muted,
display: "inline-flex", alignItems: "center", justifyContent: "center",
cursor: "pointer", padding: 0
});
function AddRow({ onAdd, placeholder, theme }) {
const [val, setVal] = useState("");
const submit = () => { if (!val.trim()) return; onAdd(val.trim()); setVal(""); };
return (
{Icon.plus(16)} Add
);
}
function SectionHead({ children, count, theme, sub }) {
return (
{children}
{sub &&
{sub}
}
{count != null &&
{count} }
);
}
function PageHeader({ title, onBack, editing, setEditing, theme }) {
const showEdit = typeof setEditing === "function";
return (
{Icon.back(18)}
{showEdit ? (
setEditing(!editing)} style={{
...iconBtn(theme), width: 34, height: 34,
color: editing ? theme.accentText : theme.text,
background: editing ? theme.accent : "transparent",
borderColor: editing ? theme.accent : theme.rowBorder
}} aria-label="Edit">{Icon.pencil(15)}
) : (
)}
);
}
function BrandHero({ theme, subtitle }) {
const sub = subtitle || "BRIGADE";
return (
{Icon.hat(28)}
CHEF ALWAYS
• {sub} •
{fmtDate()}
);
}
// =========================================================
// HOME TAB
// =========================================================
// =========================================================
// HEAD CHEF LOCK — gate for the Head Chef section.
// The password is the dough password, checked server-side
// against the /dough endpoint, so DevTools edits don't help.
// Once unlocked it is kept in memory only (FS_SESSION.doughPw)
// and reused by the Dough tab, so dough never re-prompts.
// =========================================================
function HeadChefLock({ theme, onUnlock }) {
const [pw, setPw] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const submit = async () => {
const v = pw.trim();
if (!v) { setError("Enter the head chef password"); return; }
setLoading(true); setError("");
try {
const base = getWorkerBase();
if (!base) throw new Error("No server configured.");
const res = await fetch(`${base}/dough`, { headers: { "X-Dough-Password": v } });
if (res.status === 401) throw new Error("Wrong password.");
if (!res.ok) throw new Error(`Couldn't check the password (HTTP ${res.status}).`);
window.FS_SESSION = window.FS_SESSION || {};
window.FS_SESSION.doughPw = v; // reused by the Dough tab — no second prompt
onUnlock();
} catch (e) {
setError(e.message || "Couldn't check the password.");
} finally {
setLoading(false);
}
};
return (
{Icon.lock(30)}
Head Chef is locked
Enter the head chef password to open dough recipes and stock.
setPw(e.target.value)}
onKeyDown={e => e.key === "Enter" && submit()}
placeholder="Head chef password"
style={{
width: "100%", padding: "12px 14px", borderRadius: 10,
border: `1px solid ${theme.rowBorder}`, background: theme.input,
color: theme.text, fontSize: 15, fontFamily: "inherit",
outline: "none", marginBottom: 10, textAlign: "center"
}}
/>
{loading ? "Checking…" : "Unlock"}
{error && (
{error}
)}
);
}
// =========================================================
// DAY LOG — initials, End the Day, history helpers
// =========================================================
function todayKey() {
const d = new Date();
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}
function dayLabel(dateStr) {
const [y, m, d] = dateStr.split("-").map(Number);
return new Date(y, m - 1, d).toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short" });
}
function monthLabel(dateStr) {
const [y, m] = dateStr.split("-").map(Number);
return new Date(y, m - 1, 1).toLocaleDateString("en-GB", { month: "long", year: "numeric" });
}
const pctOfKeys = (items, checked) =>
items.length ? Math.round(items.filter(n => checked[n]).length / items.length * 100) : 0;
// Swap an item with its neighbour (dir -1 = up, 1 = down). Returns a new array.
function moveItem(arr, i, dir) {
const j = i + dir;
if (j < 0 || j >= arr.length) return arr;
const next = [...arr];
const tmp = next[i]; next[i] = next[j]; next[j] = tmp;
return next;
}
const DAYLOG_LABELS = { opening: "Opening", lineup: "Line Up", closing: "Closing", potwash: "Potwash", prep: "Prep Closing", sunday: "Sunday Extras", stock: "Stock Check" };
// Deep clean defaults (potwash stays Sundays-only; prep deep clean sits at
// the bottom of the recorded Prep Closing Checklist)
const DEFAULT_POTWASH_DEEP = ["Deep clean shelves under sink", "Reorganise window shelves"];
const DEFAULT_PREP_DEEP = ["Deep clean fridges", "Clean behind fridge wall + floor"];
// Prep opening is a working list (not recorded); prep closing is recorded.
// Closing uses a v2 storage key so devices holding the old four-item default
// pick up the new list.
const DEFAULT_PREP_OPEN = [
"Turn on lights and power",
"Check all vegetables",
"Check the prep list for the day",
"Start chopping the vegetables",
"Oil and season the vegetables",
"Start cooking the vegetables",
"Check the fridge",
"Check what is missing for the day",
"Start prepping and cooking everything else: meatballs, spaghetti, etc.",
"Switch on the pasta boiler and check the water tank",
"Open the line for prep: salads, chop cherry tomatoes, take boxes out of the fridge",
"All prep done for the evening",
"Wait for customer orders",
"Start making orders",
"Check all sauces for the evening",
"Make more sauce if needed",
"Receive orders and prep food",
"Be happy when loads of orders come in",
"Kitchen closes at 21:30"
];
const DEFAULT_PREP_CLOSING = [
"Check all boxes on the line",
"Replace dirty boxes with clean ones",
"Put everything in the fridge for the next working day",
"Make a stock check list for the next day: veg and anything else needed",
"Clean the working table thoroughly",
"Sanitise the work area with antibacterial spray",
"Turn off the pasta boiler",
"Turn off all sockets and the screen",
"Wipe the order screen and clean the microwave, inside as well",
"Leave the work area tidy and clean",
"Sweep the floor",
"Think about what needs doing tomorrow",
"Check the kitchen is properly clean"
];
// Daily prep list (working list — no initials, never recorded in History)
const DEFAULT_PREP_CATS = {
"Sauces & Bases": ["Tomato Sauce", "Salsa Napoletana", "Bolognese Sauce", "Truffle Mushroom Sauce", "Garlic Butter"],
"Vegetables": ["Roasted Peppers", "Onions", "Caramelised Onions", "Cherry Tomatoes", "Lettuce", "Rocket", "Courgette", "Potato", "Mushrooms (Cooked)", "Mushrooms (Raw)"],
"Herbs": ["Basil", "Chives", "Parsley"],
"Meat": ["Chicken", "Meatballs", "Nduja", "Guanciale"],
"Cheese & Dairy": ["Stracciatella", "Bufala"],
"Bread & Pasta": ["Cut Bread", "Croutons", "Pasta"],
"Dessert": ["Tiramisu"]
};
// Gather a scope of the BOH day from localStorage into a record for the
// Worker, plus a small summary stored as KV metadata. Scope is "down"
// (Opening + Closing + Sunday Extras), "up" (Potwash + Prep Closing) or
// undefined for everything (used by the missed-day catch-up). Partial saves
// are merged server-side, so downstairs and upstairs can end their day at
// different times without overwriting each other.
// Line Up and the daily prep list are deliberately NOT part of any record —
// they're working lists, not accountability checklists.
function collectDayRecord(dateKey, scope) {
const [ky, km, kd] = dateKey.split("-").map(Number);
const isSunday = new Date(ky, km - 1, kd).getDay() === 0;
const allIni = LS.get("fs.initials.v1", {})[dateKey] || {};
const initials = {};
const lists = {};
const pct = {};
if (scope !== "up") {
const opening = { items: LS.get("fs.opening.v1", DEFAULT_OPENING_CHECKLIST), checked: LS.get("fs.opening.checked.v1", {}) };
const closing = { items: LS.get("fs.checklist.v2", DEFAULT_CHECKLIST), checked: LS.get("fs.checklist.checked.v2", {}) };
lists.opening = opening;
lists.closing = closing;
pct.opening = pctOfKeys(opening.items, opening.checked);
pct.closing = pctOfKeys(closing.items, closing.checked);
if (allIni.opening) initials.opening = allIni.opening;
if (allIni.closing) initials.closing = allIni.closing;
if (isSunday) {
const sunday = { items: LS.get("fs.checklist.sunday.v1", DEFAULT_SUNDAY_CHECKLIST), checked: closing.checked };
lists.sunday = sunday;
pct.sunday = pctOfKeys(sunday.items, sunday.checked);
}
}
if (scope !== "down") {
const potwash = {
opening: LS.get("fs.potwash.opening.v1", DEFAULT_POTWASH_OPENING),
closing: LS.get("fs.potwash.closing.v1", DEFAULT_POTWASH_CLOSING),
deep: isSunday ? LS.get("fs.potwash.deep.v1", DEFAULT_POTWASH_DEEP) : [],
checked: LS.get("fs.potwash.checked.v1", {})
};
const prep = {
closing: LS.get("fs.prep.closing.v2", DEFAULT_PREP_CLOSING),
deep: LS.get("fs.prep.deep.v1", DEFAULT_PREP_DEEP),
checked: LS.get("fs.prep.checked.v1", {})
};
lists.potwash = potwash;
pct.potwash = pctOfKeys([...potwash.opening, ...potwash.closing, ...potwash.deep], potwash.checked);
if (allIni.potwash) initials.potwash = allIni.potwash;
const prepRecorded = [...prep.closing, ...prep.deep];
if (prepRecorded.length > 0) {
lists.prep = prep;
pct.prep = pctOfKeys(prepRecorded, prep.checked);
if (allIni.prep) initials.prep = allIni.prep;
}
}
const record = { date: dateKey, savedAt: Date.now(), initials, lists };
const summary = { initials, pct };
return { record, summary };
}
// POST the day to the Worker. Throws on failure.
async function postDayRecord(dateKey, record, summary) {
const base = getWorkerBase();
if (!base) throw new Error("No server configured.");
const res = await fetch(`${base}/daylog`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
password: (window.FS_SESSION && window.FS_SESSION.pw) || "",
date: dateKey, record, summary, merge: true
})
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
}
// Clear the saved scope's ticks and initials after a successful save.
// Goes through Sync.set so the clear propagates to every device.
function clearDayLocal(dateKey, scope) {
const all = !scope;
if (all || scope === "down") {
Sync.set("fs.opening.checked.v1", {});
Sync.set("fs.lineup.checked.v2", {});
Sync.set("fs.checklist.checked.v2", {});
}
if (all || scope === "up") {
Sync.set("fs.potwash.checked.v1", {});
Sync.set("fs.prep.checked.v1", {});
Sync.set("fs.prep.qty.v1", {});
}
const ini = LS.get("fs.initials.v1", {});
if (all) {
Sync.set("fs.initials.v1", {});
} else {
const dayIni = { ...(ini[dateKey] || {}) };
(scope === "down" ? ["opening", "closing"] : ["potwash", "prep"]).forEach(k => delete dayIni[k]);
Sync.set("fs.initials.v1", { ...ini, [dateKey]: dayIni });
}
Sync.set("fs.daylog.lastSaved", dateKey);
Sync.set("fs.daylog.activity", "");
}
function endDayConfirmText(dateKey, summary) {
const lines = ["opening", "closing", "potwash", "prep", "sunday"]
.filter(id => summary.pct[id] !== undefined)
.map(id => `${DAYLOG_LABELS[id]} ${summary.pct[id]}% — ${summary.initials[id] || "no initials"}`);
return `End the day and save ${dayLabel(dateKey)}?\n\n${lines.join("\n")}\n\nSaving clears all ticks ready for tomorrow.`;
}
// Shared End the Day button. Scope "down" lives in the kitchen Closing
// Checklist (saves Opening/Closing/Sunday Extras); scope "up" lives in
// Potwash (saves Potwash + Prep Closing). Saves merge server-side.
function EndDayButton({ theme, scope, onSaved }) {
const [saving, setSaving] = useState(false);
const label = scope === "up" ? "Upstairs" : "Downstairs";
const run = async () => {
const dateKey = todayKey();
const { record, summary } = collectDayRecord(dateKey, scope);
if (!window.confirm(endDayConfirmText(dateKey, summary))) return;
setSaving(true);
try {
await postDayRecord(dateKey, record, summary);
clearDayLocal(dateKey, scope);
window.alert(`${label} saved for ${dayLabel(dateKey)} ✓ — ticks cleared for tomorrow.`);
if (onSaved) onSaved();
} catch (e) {
window.alert(`Couldn't save (${e.message}). Nothing was cleared — try again when you're back online.`);
} finally {
setSaving(false);
}
};
return (
{saving ? "Saving…" : `End the Day — Save ${label} & Clear`}
);
}
// Blocking sign-in gate at the top of each BOH checklist. The list is hidden
// until initials are entered (once per list per day). Initials are stored in
// localStorage and go into the end-of-day record.
function InitialsGate({ listId, label, theme, children }) {
const [store, setStore] = useShared("fs.initials.v1", {});
const day = todayKey();
const current = (store[day] || {})[listId] || "";
const [val, setVal] = useState("");
const set = () => {
const v = val.trim().toUpperCase().slice(0, 4);
if (!v) return;
setStore({ ...store, [day]: { ...(store[day] || {}), [listId]: v } });
setVal("");
};
const clear = () => setStore({ ...store, [day]: { ...(store[day] || {}), [listId]: "" } });
if (!current) {
return (
{Icon.user(30)}
Who's on {label} today?
Enter your initials to open the list. They go on today's record.
setVal(e.target.value)}
onKeyDown={e => e.key === "Enter" && set()}
placeholder="AB" maxLength={4}
style={{
width: "100%", padding: "12px 14px", borderRadius: 10,
border: `1px solid ${theme.rowBorder}`, background: theme.input,
color: theme.text, fontSize: 16, fontWeight: 700, textAlign: "center",
textTransform: "uppercase", fontFamily: "inherit", outline: "none",
marginBottom: 10, letterSpacing: "0.2em"
}}/>
Start
);
}
return (
<>
Signed in:
{current}
change
{children}
);
}
function HomeTab({ theme, go, stats, section, setSection, hcUnlocked, onUnlock, onDayEnded }) {
const accents = theme.tabAccents || {};
const isHC = section === "headchef";
const allTiles = [
{ id: "downstairs", label: "Downstairs\nChecklist", icon: Icon.list(26),
meta: `Opening ${stats.openingPct}% · Line Up ${stats.lineupPct}% · Closing ${stats.checklistPct}%`,
colour: accents.opening || theme.accent },
{ id: "upstairs", label: "Upstairs\nChecklist", icon: Icon.box(26),
meta: `Potwash ${stats.potwashPct}%${stats.prepPct !== undefined ? ` · Prep ${stats.prepPct}%` : ""}`,
colour: accents.lineup || theme.accent },
{ id: "dough", label: "Dough\nRecipes", icon: Icon.hat(26), meta: "3 recipes", colour: accents.dough || theme.accent, headOnly: true },
{ id: "stock", label: "Stock", icon: Icon.box(26),
meta: stats.stockShort > 0 ? `${stats.stockShort} items to order` : "All stocked",
colour: accents.stock || theme.accent, headOnly: true },
{ id: "history", label: "History", icon: Icon.clipboard(26), meta: "Who did what, day by day",
colour: accents.checklist || theme.accent, headOnly: true }
];
const tiles = isHC ? allTiles.filter(t => t.headOnly) : allTiles.filter(t => !t.headOnly);
const subtitle = isHC ? "Head Chef" : "Kitchen";
const locked = isHC && !hcUnlocked;
// ---- End the Day: save everything to the Worker, then clear the ticks ----
const [saving, setSaving] = useState(false);
const [savedMsg, setSavedMsg] = useState("");
const today = todayKey();
const activity = LS.get("fs.daylog.activity", "");
const lastSaved = LS.get("fs.daylog.lastSaved", "");
const missedDay = (activity && activity !== today && activity !== lastSaved) ? activity : "";
const saveMissedDay = async (dateKey) => {
const { record, summary } = collectDayRecord(dateKey);
if (!window.confirm(endDayConfirmText(dateKey, summary))) return;
setSaving(true);
setSavedMsg("");
try {
await postDayRecord(dateKey, record, summary);
clearDayLocal(dateKey);
setSavedMsg(`${dayLabel(dateKey)} saved ✓`);
if (onDayEnded) onDayEnded();
} catch (e) {
window.alert(`Couldn't save the day (${e.message}). Nothing was cleared — try again when you're back online.`);
} finally {
setSaving(false);
}
};
return (
{/* BOH / Head Chef section switcher */}
{[
{ id: "boh", label: BOH },
{ id: "headchef", label: (
Head Chef {!hcUnlocked && Icon.lock(13)}
) }
].map(s => {
const on = s.id === section;
return (
setSection(s.id)} style={{
flex: 1, padding: "10px 8px", borderRadius: 9, border: "none",
background: on ? theme.accent : "transparent",
color: on ? theme.accentText : theme.text,
fontWeight: 700, fontSize: 14, cursor: "pointer", fontFamily: "inherit",
display: "flex", alignItems: "center", justifyContent: "center"
}}>{s.label}
);
})}
— Today's Stations —
{locked ? (
) : (
{tiles.map(t => {
const hex = t.colour.replace('#','');
const r = parseInt(hex.substring(0,2), 16);
const g = parseInt(hex.substring(2,4), 16);
const b = parseInt(hex.substring(4,6), 16);
const soft = `rgba(${r},${g},${b},0.14)`;
const border = `rgba(${r},${g},${b},0.35)`;
return (
go(t.id)} style={{
position: "relative", display: "flex", alignItems: "center", gap: 14,
padding: "16px 16px", borderRadius: 14,
background: theme.tile, color: theme.text,
border: `1px solid ${theme.tileBorder}`,
textAlign: "left", cursor: "pointer", fontFamily: "inherit",
transition: "transform .15s ease", overflow: "hidden"
}}
onMouseDown={e => e.currentTarget.style.transform = "scale(0.995)"}
onMouseUp={e => e.currentTarget.style.transform = "scale(1)"}
onMouseLeave={e => e.currentTarget.style.transform = "scale(1)"}
>
{t.icon}
{Icon.back(18)}
);
})}
{missedDay && (
{Icon.alert(15)}
{dayLabel(missedDay)} was never closed off
saveMissedDay(missedDay)} disabled={saving} style={{
...primaryBtn(theme), marginBottom: 0,
opacity: saving ? 0.6 : 1, cursor: saving ? "wait" : "pointer"
}}>Save {dayLabel(missedDay)} now
)}
{savedMsg && (
{savedMsg}
)}
Est. Kitchen Tools
window.fsLogout && window.fsLogout()} style={{
display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
margin: "20px auto 0", padding: "10px 20px", borderRadius: 10,
background: "transparent", border: `1px solid ${theme.rowBorder}`,
color: theme.muted, fontSize: 12, fontWeight: 600,
cursor: "pointer", fontFamily: "inherit", letterSpacing: "0.06em"
}}>{Icon.logout(14)} Sign out
);
}
// =========================================================
// LINE UP TAB — list view + visual counter map
// =========================================================
// The map mirrors the real line: tub positions and sizes match the counter.
// Ticks share the same storage as the list view, keyed by category:name, so
// progress, clearing and End the Day behave identically in both views.
const TUB_SIZE = { sq: [54, 54], rt: [42, 50], bigrt: [116, 66], bigsq: [84, 84] };
const LINEUP_TUBS = {
back: [
{ label: "Pep", name: "Pepperoni", kind: "sq" },
{ label: "Nduja", name: "Nduja Balls", kind: "sq" },
{ label: "Guan", name: "Guanciale", kind: "rt" },
{ label: "FDL", name: "Cheese", kind: "bigrt" },
{ label: "Tom Sauce", name: "Tomato Sauce", kind: "bigsq" },
{ label: "Peppers", name: "Peppers", kind: "sq" },
{ label: "Red On", name: "Red Onions", kind: "sq" },
{ label: "Mush", name: "Mushrooms", kind: "sq" },
{ label: "Potato", name: "Potato", kind: "sq" }
],
frontLeft: [{ label: "Anch", name: "Anchovies", kind: "rt" }],
frontMid: [
{ label: "Parm", name: "Parm Cheese", kind: "sq" },
{ label: "Basil", name: "Basil", kind: "sq" }
],
frontRight: [
{ label: "Courg", name: "Courgettes", kind: "rt" },
{ label: "Carm On", name: "Caramelised Onions", kind: "rt" },
{ label: "Olives", name: "Olives", kind: "rt" },
{ label: "Capers", name: "Capers", kind: "rt" }
]
};
const ALL_TUBS = [...LINEUP_TUBS.back, ...LINEUP_TUBS.frontLeft, ...LINEUP_TUBS.frontMid, ...LINEUP_TUBS.frontRight];
function LineupMap({ theme, data, checked, onToggle }) {
// Resolve each tub to its list key at render time, so list renames or the
// category naming quirks never break the map.
const keyFor = (name) => {
const cat = Object.keys(data).find(c => (data[c] || []).includes(name));
return cat ? `${cat}:${name}` : `map:${name}`;
};
const Tub = ({ t }) => {
const [w, h] = TUB_SIZE[t.kind];
const k = keyFor(t.name);
const on = !!checked[k];
return (
onToggle(k)} style={{
width: w, height: h, flexShrink: 0, borderRadius: 8,
border: `2px solid ${on ? theme.accent : theme.checkBorder}`,
background: on ? theme.accent : theme.row,
color: on ? theme.accentText : theme.text,
fontSize: 11, fontWeight: 600, fontFamily: "inherit", cursor: "pointer",
padding: 2, display: "flex", alignItems: "center", justifyContent: "center",
textAlign: "center", lineHeight: 1.2, overflow: "hidden"
}}>{t.label}
);
};
const doneCount = ALL_TUBS.filter(t => checked[keyFor(t.name)]).length;
return (
Back of line
{LINEUP_TUBS.back.map(t => )}
{LINEUP_TUBS.frontLeft.map(t =>
)}
{LINEUP_TUBS.frontMid.map(t => )}
{LINEUP_TUBS.frontRight.map(t => )}
Front of line / chef side
{doneCount}/{ALL_TUBS.length} tubs stocked
Key: Pep = Pepperoni · Guan = Guanciale · FDL = Fior di Latte (Cheese) · Tom = Tomato ·
Mush = Mushrooms · Red On = Red Onions · Anch = Anchovies · Parm = Parm Cheese ·
Courg = Courgettes · Carm On = Caramelised Onions
);
}
function LineupTab({ theme, goHome, subnav }) {
const [data, setData] = useShared("fs.lineup.v2", DEFAULT_LINEUP);
const [checked, setChecked] = useShared("fs.lineup.checked.v2", {});
const [editing, setEditing] = useState(false);
const [lview, setLview] = useLocal("fs.lineup.view.v1", "map");
const toggleRaw = (k) => setChecked({ ...checked, [k]: !checked[k] });
const allItems = useMemo(() =>
Object.entries(data).flatMap(([cat, items]) => items.map(n => ({ cat, name: n })))
, [data]);
const checkedCount = allItems.filter(i => checked[`${i.cat}:${i.name}`]).length;
const pct = allItems.length ? Math.round(checkedCount / allItems.length * 100) : 0;
const toggle = (cat, name) => { const k = `${cat}:${name}`; setChecked({ ...checked, [k]: !checked[k] }); };
const addItem = (cat, name) => setData({ ...data, [cat]: [...data[cat], name] });
const deleteItem = (cat, name) => {
setData({ ...data, [cat]: data[cat].filter(x => x !== name) });
const nc = { ...checked }; delete nc[`${cat}:${name}`]; setChecked(nc);
};
const clearAll = () => setChecked({});
return (
{subnav}
{/* Map / List view switcher */}
{[
{ id: "map", label: "Line Map" },
{ id: "list", label: "List" }
].map(v => {
const on = v.id === lview;
return (
setLview(v.id)} style={{
flex: 1, padding: "9px 6px", borderRadius: 9, border: "none",
background: on ? theme.accent : "transparent",
color: on ? theme.accentText : theme.text,
fontWeight: 700, fontSize: 13, cursor: "pointer", fontFamily: "inherit"
}}>{v.label}
);
})}
{lview === "map" ? (
) : (
<>
{Object.keys(data).map(cat => (
checked[`${cat}:${n}`]).length}/${data[cat].length}`} theme={theme}>{cat}
{data[cat].map((name, i) => (
toggle(cat, name)}
onDelete={() => deleteItem(cat, name)}
onMove={d => setData({ ...data, [cat]: moveItem(data[cat], i, d) })}
editing={editing} theme={theme}/>
))}
{editing && addItem(cat, n)} theme={theme}/>}
))}
)}
window.confirm("Clear all checks? This cannot be undone.") && clearAll()} style={ghostBtn(theme)}>Clear all checks
);
}
// =========================================================
// CHECKLIST TAB
// =========================================================
function ChecklistTab({ theme, goHome, subnav }) {
const [items, setItems] = useShared("fs.checklist.v2", DEFAULT_CHECKLIST);
const [sundayItems, setSundayItems] = useShared("fs.checklist.sunday.v1", DEFAULT_SUNDAY_CHECKLIST);
const [checked, setChecked] = useShared("fs.checklist.checked.v2", {});
const [editing, setEditing] = useState(false);
const allItems = [...items, ...sundayItems];
const checkedCount = allItems.filter(n => checked[n]).length;
const pct = allItems.length ? Math.round(checkedCount / allItems.length * 100) : 0;
const toggle = (name) => setChecked({ ...checked, [name]: !checked[name] });
const add = (name) => setItems([...items, name]);
const addSunday = (name) => setSundayItems([...sundayItems, name]);
const remove = (name) => {
setItems(items.filter(x => x !== name));
const nc = { ...checked }; delete nc[name]; setChecked(nc);
};
const removeSunday = (name) => {
setSundayItems(sundayItems.filter(x => x !== name));
const nc = { ...checked }; delete nc[name]; setChecked(nc);
};
const exportXlsx = () => {
if (typeof XLSX === "undefined") { alert("Spreadsheet library failed to load"); return; }
const TICK = "✓";
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const rows = [
["THE FIRE STATION PIZZERIA", "", "", "", "", "", "", ""],
["Closing Checklist", "", "", "", "", "", "", ""],
["Name", "", "", "", "", "", "", ""],
["Date", "", "", "", "", "", "", ""],
["Closing Duty", ...days],
...items.map(name => [name, TICK, TICK, TICK, TICK, TICK, TICK, TICK]),
["Sunday Deep Clean Tasks", "", "", "", "", "", "", ""],
...sundayItems.map(name => [name, "", "", "", "", "", "", TICK]),
];
const ws = XLSX.utils.aoa_to_sheet(rows);
ws["!merges"] = [
{ s: { r: 0, c: 0 }, e: { r: 0, c: 7 } },
{ s: { r: 1, c: 0 }, e: { r: 1, c: 7 } },
];
ws["!cols"] = [
{ wch: 34 }, { wch: 9 }, { wch: 9 }, { wch: 9 },
{ wch: 9 }, { wch: 9 }, { wch: 9 }, { wch: 9 },
];
// Center the tick columns
const range = XLSX.utils.decode_range(ws["!ref"]);
for (let R = range.s.r; R <= range.e.r; R++) {
for (let C = range.s.c; C <= range.e.c; C++) {
const addr = XLSX.utils.encode_cell({ r: R, c: C });
if (!ws[addr]) continue;
ws[addr].s = ws[addr].s || {};
if (C > 0) ws[addr].s.alignment = { horizontal: "center", vertical: "center" };
}
}
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Closing Checklist");
const d = new Date();
const stamp = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`;
XLSX.writeFile(wb, `Closing Checklist ${stamp}.xlsx`);
};
return (
{subnav}
checked[n]).length}/${items.length}`}>Daily
{items.map((n, i) => (
toggle(n)} onDelete={() => remove(n)}
onMove={d => setItems(moveItem(items, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
checked[n]).length}/${sundayItems.length}`}>
Sunday Extras
{sundayItems.map((n, i) => (
toggle(n)} onDelete={() => removeSunday(n)}
onMove={d => setSundayItems(moveItem(sundayItems, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
Export to Spreadsheet
);
}
// =========================================================
// (Sunday tab removed — Sunday Extras live inside Closing)
// =========================================================
function SundayTab_UNUSED() { return null; }
// =========================================================
// OPENING CHECKLIST TAB
// =========================================================
function OpeningTab({ theme, goHome, subnav }) {
const [items, setItems] = useShared("fs.opening.v1", DEFAULT_OPENING_CHECKLIST);
const [checked, setChecked] = useShared("fs.opening.checked.v1", {});
const [editing, setEditing] = useState(false);
const checkedCount = items.filter(n => checked[n]).length;
const pct = items.length ? Math.round(checkedCount / items.length * 100) : 0;
const toggle = (name) => setChecked({ ...checked, [name]: !checked[name] });
const add = (name) => setItems([...items, name]);
const remove = (name) => {
setItems(items.filter(x => x !== name));
const nc = { ...checked }; delete nc[name]; setChecked(nc);
};
return (
{subnav}
{items.map((n, i) => (
toggle(n)} onDelete={() => remove(n)}
onMove={d => setItems(moveItem(items, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
window.confirm("Clear all checks? This cannot be undone.") && setChecked({})} style={ghostBtn(theme)}>Clear all checks
);
}
function SyncIndicator({ syncState, theme }) {
if (syncState === "idle") return null;
const map = {
loading: { dot: theme.muted, text: "Loading shared stock…" },
saving: { dot: theme.accent, text: "Saving to shared stock…" },
offline: { dot: "#d64545", text: "Offline — changes saved locally, will sync when back online" },
error: { dot: "#d64545", text: "Sync error — changes saved locally" }
};
const s = map[syncState] || map.offline;
return (
{s.text}
);
}
// =========================================================
// STOCK TAB — four suppliers
// =========================================================
// Sunday-only weekly stock check save (Carnevale + Veg Factor).
function SaveStockCheckButton({ theme, carn, veg }) {
const [saving, setSaving] = useState(false);
const [saved, setSaved] = useState(false);
if (new Date().getDay() !== 0) return null;
const run = async () => {
const ini = (window.prompt("Initials for this stock check (e.g. AB)") || "").trim().toUpperCase().slice(0, 4);
if (!ini) return;
const short = [...carn, ...veg].filter(i => { const sh = stockShortfall(i); return sh && sh !== "0"; }).length;
if (!window.confirm(`Save this week's stock check?\n\nCarnevale ${carn.length} items · Veg Factor ${veg.length} items\n${short} item${short === 1 ? "" : "s"} to order\nInitials: ${ini}`)) return;
setSaving(true);
try {
const base = getWorkerBase();
if (!base) throw new Error("No server configured.");
const dateKey = todayKey();
const record = { date: dateKey, savedAt: Date.now(), initials: ini, suppliers: { carnevale: carn, vegfactor: veg } };
const summary = { initials: ini, items: carn.length + veg.length, toOrder: short };
const res = await fetch(`${base}/stocklog`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
password: (window.FS_SESSION && window.FS_SESSION.pw) || "",
date: dateKey, record, summary
})
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
setSaved(true);
} catch (e) {
window.alert(`Couldn't save the stock check (${e.message}). Try again when you're back online.`);
} finally {
setSaving(false);
}
};
return (
{saved ? "Stock check saved ✓" : saving ? "Saving…" : "Save this week's stock check"}
);
}
function StockTab({ theme, goHome }) {
const [carn, setCarn, carnSync] = useSharedStock("carnevale", DEFAULT_CARNEVALE);
const [veg, setVeg, vegSync] = useSharedStock("vegfactor", DEFAULT_VEGFACTOR);
const [pil, setPil, pilSync] = useSharedStock("pilgrim", DEFAULT_PILGRIM);
const [cob, setCob, cobSync] = useSharedStock("cobblelane", DEFAULT_COBBLE_LANE);
const [editing, setEditing] = useState(false);
const [supplier, setSupplier] = useState("carnevale");
const suppliers = {
carnevale: { data: carn, set: setCarn, sync: carnSync, label: "Carnevale", sub: "with codes", hasCode: true, prefix: "carn" },
vegfactor: { data: veg, set: setVeg, sync: vegSync, label: "Veg Factor", sub: "produce", hasCode: false, prefix: "veg" },
pilgrim: { data: pil, set: setPil, sync: pilSync, label: "Pilgrim", sub: "supplier", hasCode: false, prefix: "pil" },
cobblelane: { data: cob, set: setCob, sync: cobSync, label: "Cobble Lane", sub: "cured", hasCode: false, prefix: "cob" }
};
const sup = suppliers[supplier] || suppliers.carnevale;
const current = sup.data;
const setCurrent = sup.set;
const hasCode = sup.hasCode;
const supplierName = sup.label;
const update = (id, patch) => setCurrent(current.map(s => s.id === id ? { ...s, ...patch } : s));
const remove = (id) => setCurrent(current.filter(s => s.id !== id));
const add = (name) => {
const base = { id: `${sup.prefix}_${Date.now()}`, name, inStock: "0", mustHave: "1" };
setCurrent([...current, hasCode ? { ...base, code: "" } : base]);
};
const needsOrder = (i) => {
if (i.excludeFromEmail) return false;
const sh = stockShortfall(i);
if (sh && sh !== "0") return true;
const stock = parseQty(i.inStock);
if (stock.num <= 0 && i.name) return true;
return false;
};
const needCount = current.filter(needsOrder).length;
const excludedCount = current.filter(i => i.excludeFromEmail).length;
const buildOrderLines = () => {
const needed = current.filter(needsOrder);
const orderDate = nextThursday();
const lines = [];
lines.push(`THE FIRE STATION PIZZERIA`);
lines.push(`Stock Order For Thursday (${orderDate})`);
lines.push(``);
if (needed.length === 0) {
lines.push(`No items to order.`);
} else {
needed.forEach(it => {
const sh = stockShortfall(it);
const qty = (sh && sh !== "0" && sh !== "") ? sh : "—";
if (hasCode) {
const code = it.code ? ` [${it.code}]` : "";
lines.push(`• ${it.name}${code} — ${qty}`);
} else {
lines.push(`• ${it.name} — ${qty}`);
}
});
}
if (excludedCount > 0) {
lines.push(``);
lines.push(`(${excludedCount} item${excludedCount === 1 ? "" : "s"} skipped at staff request)`);
}
return { lines, orderDate };
};
const emailOrder = () => {
const { lines, orderDate } = buildOrderLines();
window.location.href = buildMailto(`${supplierName} Order — Thursday ${orderDate}`, lines, sup.email);
};
const [copied, setCopied] = useState(false);
const copyOrder = async () => {
const { lines } = buildOrderLines();
try {
await navigator.clipboard.writeText(lines.join("\n"));
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch { alert("Couldn't copy — try the email button instead."); }
};
return (
{Object.entries(suppliers).map(([id, s]) => {
const active = supplier === id;
return (
setSupplier(id)} style={{
padding: "8px 8px", borderRadius: 10,
border: `1px solid ${active ? theme.accent : theme.rowBorder}`,
background: active ? theme.accentSoft : "transparent",
color: active ? theme.accent : theme.muted,
fontFamily: "inherit", cursor: "pointer", textAlign: "center"
}}>
{s.label}
{s.sub}
);
})}
{/* Summary */}
0}/>
{/* Column legend */}
Item {hasCode && / code }
Have
Must
Order
{current.map(item => (
update(item.id, patch)}
onRemove={() => remove(item.id)}
onToggleExclude={() => update(item.id, { excludeFromEmail: !item.excludeFromEmail })}/>
))}
{editing && }
{Icon.mail(18)} Email {supplierName} Order
{Icon.clipboard(16)} {copied ? "Copied!" : "Copy order to clipboard"}
);
}
function StatCard({ theme, label, value, accent }) {
return (
);
}
const StockTextField = React.memo(function StockTextField({ value, onChange, theme, align = "center", width }) {
return (
{editing ? (
onUpdate({ name: e.target.value })}
style={{
width: "100%", border: "none", background: "transparent",
color: theme.text, fontSize: 15, fontWeight: 600,
fontFamily: "inherit", outline: "none", padding: 0
}}/>
) : (
{item.name}
)}
{hasCode && (
editing ? (
onUpdate({ code: e.target.value })}
placeholder="Product code" style={{
width: "100%", border: "none", background: "transparent",
color: theme.accent, fontSize: 11, fontWeight: 600,
letterSpacing: "0.14em", textTransform: "uppercase",
fontFamily: "inherit", outline: "none", padding: 0, marginTop: 3
}}/>
) : (item.code ? (
{item.code}
) : null)
)}
{excluded ? "✓ Include in email" : "✕ Skip in email"}
{editing && (
Remove
)}
onUpdate({ inStock: v })}/>
onUpdate({ mustHave: v })}/>
{short || "—"}
);
}
// =========================================================
// BUTTON STYLES
// =========================================================
const primaryBtn = (theme) => ({
width: "100%", padding: "14px 16px", borderRadius: 12,
border: "none", background: theme.accent, color: theme.accentText,
fontSize: 15, fontWeight: 700, letterSpacing: "0.04em",
fontFamily: "inherit", cursor: "pointer",
display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
marginBottom: 6
});
const ghostBtn = (theme) => ({
width: "100%", padding: "12px 16px", borderRadius: 12,
border: `1px solid ${theme.rowBorder}`, background: "transparent",
color: theme.muted, fontSize: 14, fontWeight: 500,
fontFamily: "inherit", cursor: "pointer"
});
// =========================================================
// APP SHELL
// =========================================================
// =========================================================
// POTWASH / KITCHEN PORTER TAB
// =========================================================
function PotwashTab({ theme, goHome, subnav }) {
const [openItems, setOpenItems] = useShared("fs.potwash.opening.v1", DEFAULT_POTWASH_OPENING);
const [closeItems, setCloseItems] = useShared("fs.potwash.closing.v1", DEFAULT_POTWASH_CLOSING);
const [deepItems, setDeepItems] = useShared("fs.potwash.deep.v1", DEFAULT_POTWASH_DEEP);
const [checked, setChecked] = useShared("fs.potwash.checked.v1", {});
const [editing, setEditing] = useState(false);
const isSunday = new Date().getDay() === 0;
const allItems = isSunday ? [...openItems, ...closeItems, ...deepItems] : [...openItems, ...closeItems];
const pct = allItems.length ? Math.round(allItems.filter(n => checked[n]).length / allItems.length * 100) : 0;
const toggle = (name) => setChecked({ ...checked, [name]: !checked[name] });
const addOpen = (name) => setOpenItems([...openItems, name]);
const removeOpen = (name) => { setOpenItems(openItems.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
const addClose = (name) => setCloseItems([...closeItems, name]);
const removeClose = (name) => { setCloseItems(closeItems.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
const addDeep = (name) => setDeepItems([...deepItems, name]);
const removeDeep = (name) => { setDeepItems(deepItems.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
return (
{subnav}
checked[n]).length}/${openItems.length}`}>Opening
{openItems.map((n, i) => (
toggle(n)} onDelete={() => removeOpen(n)}
onMove={d => setOpenItems(moveItem(openItems, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
checked[n]).length}/${closeItems.length}`}>Closing
{closeItems.map((n, i) => (
toggle(n)} onDelete={() => removeClose(n)}
onMove={d => setCloseItems(moveItem(closeItems, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
checked[n]).length}/${deepItems.length}`}>Deep Clean
{deepItems.map((n, i) => (
toggle(n)} onDelete={() => removeDeep(n)}
onMove={d => setDeepItems(moveItem(deepItems, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
);
}
// =========================================================
// PREP CHEF TAB — daily prep tasks (added in-app) plus a
// Sundays-only deep clean section.
// =========================================================
function PrepChefTab({ theme, goHome, subnav }) {
const [openItems, setOpenItems] = useShared("fs.prep.open.v1", DEFAULT_PREP_OPEN);
const [data, setData] = useShared("fs.prep.cats.v1", DEFAULT_PREP_CATS);
const [closingItems, setClosingItems] = useShared("fs.prep.closing.v2", DEFAULT_PREP_CLOSING);
const [deepItems, setDeepItems] = useShared("fs.prep.deep.v1", DEFAULT_PREP_DEEP);
const [checked, setChecked] = useShared("fs.prep.checked.v1", {});
const [qty, setQty] = useShared("fs.prep.qty.v1", {});
const [editing, setEditing] = useState(false);
// Three views inside Prep Chef: Opening (working list), Prep List (working
// list) and the recorded Closing Checklist (incl. Deep Clean).
const [view, setView] = useLocal("fs.prep.view.v1", "open");
const dailyKeys = Object.entries(data).flatMap(([c, its]) => its.map(n => `${c}:${n}`));
const recordedKeys = [...closingItems, ...deepItems];
const openPct = openItems.length ? Math.round(openItems.filter(k => checked[k]).length / openItems.length * 100) : 0;
const dailyPct = dailyKeys.length ? Math.round(dailyKeys.filter(k => checked[k]).length / dailyKeys.length * 100) : 0;
const recordedPct = recordedKeys.length ? Math.round(recordedKeys.filter(k => checked[k]).length / recordedKeys.length * 100) : 0;
const toggleKey = (k) => setChecked({ ...checked, [k]: !checked[k] });
const clearDaily = () => { const nc = { ...checked }; dailyKeys.forEach(k => delete nc[k]); setChecked(nc); setQty({}); };
const clearOpen = () => { const nc = { ...checked }; openItems.forEach(k => delete nc[k]); setChecked(nc); };
const addOpen = (name) => setOpenItems([...openItems, name]);
const removeOpen = (name) => { setOpenItems(openItems.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
const addItem = (cat, name) => setData({ ...data, [cat]: [...data[cat], name] });
const deleteItem = (cat, name) => {
setData({ ...data, [cat]: data[cat].filter(x => x !== name) });
const nc = { ...checked }; delete nc[`${cat}:${name}`]; setChecked(nc);
};
const addClosing = (name) => setClosingItems([...closingItems, name]);
const removeClosing = (name) => { setClosingItems(closingItems.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
const addDeep = (name) => setDeepItems([...deepItems, name]);
const removeDeep = (name) => { setDeepItems(deepItems.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
return (
{subnav}
{/* Prep List / Closing Checklist view switcher */}
{[
{ id: "open", label: "Opening" },
{ id: "prep", label: "Prep List" },
{ id: "closing", label: "Closing" }
].map(v => {
const on = v.id === view;
return (
setView(v.id)} style={{
flex: 1, padding: "9px 6px", borderRadius: 9, border: "none",
background: on ? theme.accent : "transparent",
color: on ? theme.accentText : theme.text,
fontWeight: 700, fontSize: 13, cursor: "pointer", fontFamily: "inherit"
}}>{v.label}
);
})}
{view === "open" && <>
{openItems.map((n, i) => (
toggleKey(n)} onDelete={() => removeOpen(n)}
onMove={d => setOpenItems(moveItem(openItems, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
window.confirm("Clear all opening ticks? This cannot be undone.") && clearOpen()} style={ghostBtn(theme)}>Clear all checks
}
{view === "prep" && <>
{Object.keys(data).map(cat => (
checked[`${cat}:${n}`]).length}/${data[cat].length}`}>{cat}
{data[cat].map((name, i) => (
toggleKey(`${cat}:${name}`)}
onDelete={() => deleteItem(cat, name)}
qty={qty[`${cat}:${name}`]}
onQty={v => setQty({ ...qty, [`${cat}:${name}`]: v })}
onMove={d => setData({ ...data, [cat]: moveItem(data[cat], i, d) })}
editing={editing} theme={theme}/>
))}
{editing && addItem(cat, n)} theme={theme}/>}
))}
window.confirm("Clear all prep ticks? This cannot be undone.") && clearDaily()} style={ghostBtn(theme)}>Clear all checks
}
{view === "closing" && <>
checked[n]).length}/${closingItems.length}`}>Closing Checklist
{closingItems.map((n, i) => (
toggleKey(n)} onDelete={() => removeClosing(n)}
onMove={d => setClosingItems(moveItem(closingItems, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
checked[n]).length}/${deepItems.length}`}>Deep Clean
{deepItems.map((n, i) => (
toggleKey(n)} onDelete={() => removeDeep(n)}
onMove={d => setDeepItems(moveItem(deepItems, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
}
);
}
// =========================================================
// DOWNSTAIRS / UPSTAIRS WRAPPERS — a section switcher
// rendered under each list's header via the subnav prop.
// =========================================================
function SectionSwitcher({ options, value, onChange, theme }) {
return (
{options.map(o => {
const on = o.id === value;
return (
onChange(o.id)} style={{
flex: 1, padding: "9px 6px", borderRadius: 9, border: "none",
background: on ? theme.accent : "transparent",
color: on ? theme.accentText : theme.text,
fontWeight: 700, fontSize: 13, cursor: "pointer", fontFamily: "inherit"
}}>{o.label}
);
})}
);
}
function DownstairsTab({ theme, goHome }) {
const [sec, setSec] = useLocal("fs.down.section.v1", "opening");
const subnav = (
;
if (sec === "checklist") return ;
return ;
}
function UpstairsTab({ theme, goHome }) {
const [sec, setSec] = useLocal("fs.up.section.v1", "potwash");
const subnav = (
;
return ;
}
// =========================================================
// HISTORY TAB — Head Chef view of saved day logs
// =========================================================
function HistoryStaticRow({ label, done, theme }) {
return (
{done && Icon.check(11)}
{label}
);
}
function HistoryListSection({ id, initials, pct, children, theme }) {
return (
{DAYLOG_LABELS[id] || id}
{pct}%
{initials || "—"}
{children}
);
}
function HistoryTab({ theme, goHome }) {
const [days, setDays] = useState(null); // null = loading
const [stockDays, setStockDays] = useState({});
const [error, setError] = useState("");
const [detail, setDetail] = useState(null); // { date, record, stock }
const [loadingDay, setLoadingDay] = useState("");
const doughPw = () => (window.FS_SESSION && window.FS_SESSION.doughPw) || "";
const loadAll = async () => {
try {
const base = getWorkerBase();
if (!base) throw new Error("No server configured.");
const hdrs = { headers: { "X-Dough-Password": doughPw() } };
const [dRes, sRes] = await Promise.all([
fetch(`${base}/daylogs`, hdrs),
fetch(`${base}/stocklogs`, hdrs)
]);
if (!dRes.ok) throw new Error(`Couldn't load history (HTTP ${dRes.status}).`);
const dData = await dRes.json();
setDays(Array.isArray(dData.days) ? dData.days : []);
if (sRes.ok) {
const sData = await sRes.json();
const map = {};
(sData.days || []).forEach(d => { map[d.date] = d; });
setStockDays(map);
}
} catch (e) {
setError(e.message || "Couldn't load history.");
setDays([]);
}
};
useEffect(() => { loadAll(); }, []);
// Delete a wrong record (checklists or stock check) for a date, then refresh.
const deleteLog = async (kind, date) => {
const what = kind === "daylog" ? "checklist record" : "stock check";
if (!window.confirm(`Delete the ${what} for ${dayLabel(date)}? This cannot be undone.`)) return;
try {
const base = getWorkerBase();
const res = await fetch(`${base}/${kind}?date=${date}`, {
method: "DELETE",
headers: { "X-Dough-Password": doughPw() }
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
setDetail(null);
setDays(null); // show loading while the list refreshes
await loadAll();
} catch (e) {
window.alert(`Couldn't delete (${e.message}).`);
}
};
const openDay = async (date) => {
setLoadingDay(date);
try {
const base = getWorkerBase();
const hdrs = { headers: { "X-Dough-Password": doughPw() } };
const [dR, sR] = await Promise.all([
fetch(`${base}/daylog?date=${date}`, hdrs),
fetch(`${base}/stocklog?date=${date}`, hdrs)
]);
const rec = dR.ok ? (await dR.json()).record : null;
const stockRec = sR.ok ? (await sR.json()).record : null;
if (!rec && !stockRec) throw new Error(`Couldn't load ${date}.`);
setDetail({ date, record: rec, stock: stockRec });
} catch (e) {
alert(e.message || "Couldn't load that day.");
} finally {
setLoadingDay("");
}
};
// Fill in unsaved gaps between the newest and oldest saved day so missing
// days are obvious. Today is skipped unless it has been saved.
const rows = useMemo(() => {
const dayMap = {};
(days || []).forEach(d => { dayMap[d.date] = d; });
const allDates = [...new Set([...Object.keys(dayMap), ...Object.keys(stockDays)])].sort();
if (!allDates.length) return [];
const oldest = allDates[0];
const out = [];
const cur = new Date(); cur.setHours(0, 0, 0, 0);
const toKey = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
if (!dayMap[toKey(cur)] && !stockDays[toKey(cur)]) cur.setDate(cur.getDate() - 1); // skip unsaved today
while (toKey(cur) >= oldest) {
const key = toKey(cur);
const d = dayMap[key];
const s = stockDays[key] || null;
out.push({ date: key, saved: !!d, summary: d ? d.summary : null, stock: s });
cur.setDate(cur.getDate() - 1);
}
return out;
}, [days, stockDays]);
// ---- Detail view ----
if (detail) {
const rec = detail.record || {};
const lists = rec.lists || {};
const initials = rec.initials || {};
const sections = [];
if (lists.opening) sections.push({ id: "opening", pct: pctOfKeys(lists.opening.items || [], lists.opening.checked || {}),
rows: (lists.opening.items || []).map(n => ({ label: n, done: !!(lists.opening.checked || {})[n] })) });
if (lists.closing) sections.push({ id: "closing", pct: pctOfKeys(lists.closing.items || [], lists.closing.checked || {}),
rows: (lists.closing.items || []).map(n => ({ label: n, done: !!(lists.closing.checked || {})[n] })) });
if (lists.sunday) sections.push({ id: "sunday", pct: pctOfKeys(lists.sunday.items || [], lists.sunday.checked || {}),
rows: (lists.sunday.items || []).map(n => ({ label: n, done: !!(lists.sunday.checked || {})[n] })) });
if (lists.potwash) {
const pw = lists.potwash;
const pwItems = [...(pw.opening || []), ...(pw.closing || []), ...(pw.deep || [])];
sections.push({ id: "potwash", pct: pctOfKeys(pwItems, pw.checked || {}),
rows: pwItems.map(n => ({ label: n, done: !!(pw.checked || {})[n] })) });
}
if (lists.prep) {
const pr = lists.prep;
const prItems = [...(pr.closing || []), ...(pr.items || []), ...(pr.deep || [])];
sections.push({ id: "prep", pct: pctOfKeys(prItems, pr.checked || {}),
rows: prItems.map(n => ({ label: n, done: !!(pr.checked || {})[n] })) });
}
const stockRec = detail.stock;
return (
setDetail(null)} theme={theme}/>
{sections.map(s => (
{s.rows.map((r, i) => )}
))}
{stockRec && Object.entries(stockRec.suppliers || {}).map(([supId, items]) => {
const label = supId === "carnevale" ? "Stock Check — Carnevale" : supId === "vegfactor" ? "Stock Check — Veg Factor" : `Stock Check — ${supId}`;
return (
{label}
{stockRec.initials || "—"}
{(items || []).map((it, i) => {
const sh = stockShortfall(it);
const needs = sh && sh !== "0";
return (
{it.name}
have {it.inStock || "0"} · need {it.mustHave || "0"}{needs ? ` · order ${sh}` : ""}
);
})}
);
})}
{detail.record && (
deleteLog("daylog", detail.date)} style={{
...ghostBtn(theme), color: theme.danger || "#d64545",
borderColor: theme.danger || "#d64545", marginBottom: 8
}}>Delete checklist record
)}
{stockRec && (
deleteLog("stocklog", detail.date)} style={{
...ghostBtn(theme), color: theme.danger || "#d64545",
borderColor: theme.danger || "#d64545"
}}>Delete stock check
)}
);
}
// ---- Day list ----
let lastMonth = "";
return (
{days === null &&
Loading…
}
{days !== null && error && (
{error}
)}
{days !== null && !error && !rows.length && (
No days saved yet.
)}
{rows.map(r => {
const mLabel = monthLabel(r.date);
const showMonth = mLabel !== lastMonth;
lastMonth = mLabel;
const sum = r.summary || {};
const pct = sum.pct || {};
const ini = sum.initials || {};
return (
{showMonth && (
{mLabel}
)}
{(r.saved || r.stock) ? (
openDay(r.date)} disabled={loadingDay === r.date} style={{
display: "block", width: "100%", textAlign: "left",
padding: "12px 14px", borderRadius: 10, marginBottom: 6,
background: theme.row, border: `1px solid ${theme.rowBorder}`,
cursor: "pointer", fontFamily: "inherit",
opacity: loadingDay === r.date ? 0.6 : 1
}}>
{dayLabel(r.date)}
{["opening", "closing", "potwash", "prep", "sunday"]
.filter(id => pct[id] !== undefined)
.map(id => (
{DAYLOG_LABELS[id]} {pct[id]}% · {ini[id] || "—"}
))}
{!r.saved && (
Checklists not saved
)}
{r.stock && (
Stock ✓{(r.stock.summary && r.stock.summary.toOrder !== undefined) ? ` ${r.stock.summary.toOrder} to order` : ""} · {(r.stock.summary && r.stock.summary.initials) || "—"}
)}
) : (
{dayLabel(r.date)} — not saved
)}
);
})}
);
}
function App({ theme, storageNs = "default" }) {
const [tab, setTab] = useLocal(`fs.tab.${storageNs}`, "home");
const lineupData = LS.get("fs.lineup.v2", DEFAULT_LINEUP);
const lineupChecked = LS.get("fs.lineup.checked.v2", {});
const allLineup = Object.entries(lineupData).flatMap(([c, its]) => its.map(n => `${c}:${n}`));
const lineupPct = allLineup.length ? Math.round(allLineup.filter(k => lineupChecked[k]).length / allLineup.length * 100) : 0;
const checklistItems = LS.get("fs.checklist.v2", DEFAULT_CHECKLIST);
const checklistChecked = LS.get("fs.checklist.checked.v2", {});
const cpct = checklistItems.length ? Math.round(checklistItems.filter(n => checklistChecked[n]).length / checklistItems.length * 100) : 0;
const openingItems = LS.get("fs.opening.v1", DEFAULT_OPENING_CHECKLIST);
const openingChecked = LS.get("fs.opening.checked.v1", {});
const openingPct = openingItems.length ? Math.round(openingItems.filter(n => openingChecked[n]).length / openingItems.length * 100) : 0;
const sundayItems = LS.get("fs.checklist.sunday.v1", DEFAULT_SUNDAY_CHECKLIST);
const sundayChecked = LS.get("fs.checklist.sunday.checked.v1", {});
const sundayPct = sundayItems.length ? Math.round(sundayItems.filter(n => sundayChecked[n]).length / sundayItems.length * 100) : 0;
const stockCarn = LS.get("fs.stock.carnevale.v1", DEFAULT_CARNEVALE);
const stockVeg = LS.get("fs.stock.vegfactor.v1", DEFAULT_VEGFACTOR);
const stockShort = [...stockCarn, ...stockVeg].filter(i => {
const sh = stockShortfall(i); return sh && sh !== "0";
}).length;
const isSundayToday = new Date().getDay() === 0;
const potwashOpen = LS.get("fs.potwash.opening.v1", DEFAULT_POTWASH_OPENING);
const potwashClose = LS.get("fs.potwash.closing.v1", DEFAULT_POTWASH_CLOSING);
const potwashDeep = isSundayToday ? LS.get("fs.potwash.deep.v1", DEFAULT_POTWASH_DEEP) : [];
const potwashChecked = LS.get("fs.potwash.checked.v1", {});
const potwashAll = [...potwashOpen, ...potwashClose, ...potwashDeep];
const potwashPct = potwashAll.length ? Math.round(potwashAll.filter(n => potwashChecked[n]).length / potwashAll.length * 100) : 0;
const prepData = LS.get("fs.prep.cats.v1", DEFAULT_PREP_CATS);
const prepDaily = Object.entries(prepData).flatMap(([c, its]) => its.map(n => `${c}:${n}`));
const prepOpen = LS.get("fs.prep.open.v1", DEFAULT_PREP_OPEN);
const prepClosing = LS.get("fs.prep.closing.v2", DEFAULT_PREP_CLOSING);
const prepDeep = LS.get("fs.prep.deep.v1", DEFAULT_PREP_DEEP);
const prepChecked = LS.get("fs.prep.checked.v1", {});
const prepAllKeys = [...prepOpen, ...prepDaily, ...prepClosing, ...prepDeep];
const prepPct = prepAllKeys.length ? Math.round(prepAllKeys.filter(k => prepChecked[k]).length / prepAllKeys.length * 100) : undefined;
const stats = { lineupPct, checklistPct: cpct, openingPct, sundayPct, stockShort, potwashPct, prepPct };
const goHome = () => setTab("home");
const go = (t) => setTab(t);
// BOH / Head Chef section. The section choice persists per device, but the
// unlock does not survive a reload — the password lives in memory only.
const [section, setSection] = useLocal(`fs.section.${storageNs}`, "boh");
const [hcUnlocked, setHcUnlocked] = useState(() => !!(window.FS_SESSION && window.FS_SESSION.doughPw));
// Bumped after End the Day so the home stats recompute immediately.
const [, forceRefresh] = useState(0);
// Legacy tab ids from before the Downstairs/Upstairs split.
const LEGACY_TABS = { opening: "downstairs", lineup: "downstairs", checklist: "downstairs", potwash: "upstairs" };
const mappedTab = LEGACY_TABS[tab] || tab;
// If a gated tab was left open and the unlock is gone (fresh load), fall back home.
const safeTab = (!hcUnlocked && (mappedTab === "dough" || mappedTab === "stock" || mappedTab === "history")) ? "home" : mappedTab;
// Mark that the app was worked in today, so the home screen can warn if a
// previous day was never closed off with End the Day.
useEffect(() => {
if (tab && tab !== "home") Sync.set("fs.daylog.activity", todayKey());
}, [tab]);
return (
{safeTab === "home" && setHcUnlocked(true)} onDayEnded={() => forceRefresh(x => x + 1)}/>}
{safeTab === "downstairs" && }
{safeTab === "upstairs" && }
{hcUnlocked && safeTab === "dough" && }
{hcUnlocked && safeTab === "stock" && }
{hcUnlocked && safeTab === "history" && }
);
}
// =========================================================
// FOH — FRONT OF HOUSE APP
// =========================================================
function FOHOpeningTab({ theme, goHome }) {
const [items, setItems] = useShared("foh.opening.v1", DEFAULT_FOH_OPENING);
const [thuItems, setThuItems] = useShared("foh.opening.thu.v1", DEFAULT_FOH_OPENING_THURSDAY);
const [checked, setChecked] = useShared("foh.opening.checked.v1", {});
const [editing, setEditing] = useState(false);
const isThursday = new Date().getDay() === 4;
const allItems = isThursday ? [...items, ...thuItems] : items;
const checkedCount = allItems.filter(n => checked[n]).length;
const pct = allItems.length ? Math.round(checkedCount / allItems.length * 100) : 0;
const toggle = (name) => setChecked({ ...checked, [name]: !checked[name] });
const add = (name) => setItems([...items, name]);
const remove = (name) => { setItems(items.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
const addThu = (name) => setThuItems([...thuItems, name]);
const removeThu = (name) => { setThuItems(thuItems.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
return (
checked[n]).length}/${items.length}`}>Daily
{items.map((n, i) => (
toggle(n)} onDelete={() => remove(n)}
onMove={d => setItems(moveItem(items, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
checked[n]).length}/${thuItems.length}`}>Thursday
{thuItems.map((n, i) => (
toggle(n)} onDelete={() => removeThu(n)}
onMove={d => setThuItems(moveItem(thuItems, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
window.confirm("Clear all checks? This cannot be undone.") && setChecked({})} style={ghostBtn(theme)}>Clear all checks
);
}
function FOHCleaningTab({ theme, goHome }) {
const [items, setItems] = useShared("foh.cleaning.v1", DEFAULT_FOH_CLEANING);
const [checked, setChecked] = useShared("foh.cleaning.checked.v1", {});
const [editing, setEditing] = useState(false);
const checkedCount = items.filter(n => checked[n]).length;
const pct = items.length ? Math.round(checkedCount / items.length * 100) : 0;
const toggle = (name) => setChecked({ ...checked, [name]: !checked[name] });
const add = (name) => setItems([...items, name]);
const remove = (name) => { setItems(items.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
return (
{items.map((n, i) => (
toggle(n)} onDelete={() => remove(n)}
onMove={d => setItems(moveItem(items, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
window.confirm("Clear all checks? This cannot be undone.") && setChecked({})} style={ghostBtn(theme)}>Clear all checks
);
}
function FOHClosingTab({ theme, goHome }) {
const [items, setItems] = useShared("foh.closing.v1", DEFAULT_FOH_CLOSING);
const [thuItems, setThuItems] = useShared("foh.closing.thu.v1", DEFAULT_FOH_CLOSING_THURSDAY);
const [endItems, setEndItems] = useShared("foh.endofnight.v1", DEFAULT_FOH_END_OF_NIGHT);
const [checked, setChecked] = useShared("foh.closing.checked.v1", {});
const [editing, setEditing] = useState(false);
const isThursday = new Date().getDay() === 4;
const allItems = isThursday ? [...items, ...thuItems, ...endItems] : [...items, ...endItems];
const checkedCount = allItems.filter(n => checked[n]).length;
const pct = allItems.length ? Math.round(checkedCount / allItems.length * 100) : 0;
const toggle = (name) => setChecked({ ...checked, [name]: !checked[name] });
const add = (name) => setItems([...items, name]);
const remove = (name) => { setItems(items.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
const addThu = (name) => setThuItems([...thuItems, name]);
const removeThu = (name) => { setThuItems(thuItems.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
const addEnd = (name) => setEndItems([...endItems, name]);
const removeEnd = (name) => { setEndItems(endItems.filter(x => x !== name)); const nc = { ...checked }; delete nc[name]; setChecked(nc); };
return (
checked[n]).length}/${items.length}`}>Closing Duties
{items.map((n, i) => (
toggle(n)} onDelete={() => remove(n)}
onMove={d => setItems(moveItem(items, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
checked[n]).length}/${thuItems.length}`}>Thursday
{thuItems.map((n, i) => (
toggle(n)} onDelete={() => removeThu(n)}
onMove={d => setThuItems(moveItem(thuItems, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
checked[n]).length}/${endItems.length}`}>End of Night
{endItems.map((n, i) => (
toggle(n)} onDelete={() => removeEnd(n)}
onMove={d => setEndItems(moveItem(endItems, i, d))}
editing={editing} theme={theme}/>
))}
{editing && }
window.confirm("Clear all checks? This cannot be undone.") && setChecked({})} style={ghostBtn(theme)}>Clear all checks
);
}
function FOHHomeTab({ theme, go, stats }) {
const accents = theme.tabAccents || {};
const role = localStorage.getItem("fs_role_v1") || "foh";
const isManager = role === "manager";
const allTiles = [
{ id: "opening", label: "Opening\nChecklist", icon: Icon.list(26), meta: `${stats.openPct}% Completed`, colour: accents.opening || theme.accent },
{ id: "cleaning", label: "Deep\nClean", icon: Icon.broom(26), meta: `${stats.cleanPct}% Completed`, colour: accents.checklist || theme.accent },
{ id: "closing", label: "Closing\nChecklist", icon: Icon.list(26), meta: `${stats.closePct}% Completed`, colour: accents.dough || theme.accent },
{ id: "stock", label: "Bar\nStock", icon: Icon.box(26), meta: "6 suppliers", colour: accents.stock || theme.accent, managerOnly: true }
];
const tiles = isManager ? allTiles : allTiles.filter(t => !t.managerOnly);
const subtitle = isManager ? "Manager" : "Front of House";
return (
— Today's Stations —
{tiles.map(t => {
const hex = t.colour.replace('#','');
const r = parseInt(hex.substring(0,2), 16);
const g = parseInt(hex.substring(2,4), 16);
const b = parseInt(hex.substring(4,6), 16);
const soft = `rgba(${r},${g},${b},0.14)`;
const bdr = `rgba(${r},${g},${b},0.35)`;
return (
go(t.id)} style={{
position: "relative", display: "flex", alignItems: "center", gap: 14,
padding: "16px 16px", borderRadius: 14,
background: theme.tile, color: theme.text,
border: `1px solid ${theme.tileBorder}`,
textAlign: "left", cursor: "pointer", fontFamily: "inherit",
transition: "transform .15s ease", overflow: "hidden"
}}
onMouseDown={e => e.currentTarget.style.transform = "scale(0.995)"}
onMouseUp={e => e.currentTarget.style.transform = "scale(1)"}
onMouseLeave={e => e.currentTarget.style.transform = "scale(1)"}
>
{t.icon}
{Icon.back(18)}
);
})}
Front of House
window.fsLogout && window.fsLogout()} style={{
display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
margin: "20px auto 0", padding: "10px 20px", borderRadius: 10,
background: "transparent", border: `1px solid ${theme.rowBorder}`,
color: theme.muted, fontSize: 12, fontWeight: 600,
cursor: "pointer", fontFamily: "inherit", letterSpacing: "0.06em"
}}>{Icon.logout(14)} Sign out
);
}
function FOHStockTab({ theme, goHome }) {
const [k4, setK4, k4Sync] = useSharedStock("kater4", DEFAULT_KATER4);
const [kw, setKw, kwSync] = useSharedStock("kilowines", DEFAULT_KILOWINES);
const [mj, setMj, mjSync] = useSharedStock("majestic", DEFAULT_MAJESTIC);
const [rw, setRw, rwSync] = useSharedStock("rothley", DEFAULT_ROTHLEY);
const [rc, setRc, rcSync] = useSharedStock("roundcorner", DEFAULT_ROUNDCORNER);
const [az, setAz, azSync] = useSharedStock("amazon", DEFAULT_AMAZON);
const [editing, setEditing] = useState(false);
const [supplier, setSupplier] = useState("kater4");
const suppliers = {
kater4: { data: k4, set: setK4, sync: k4Sync, label: "Kater 4", sub: "main order", prefix: "k4", email: "Sales@kater4.co.uk" },
kilowines: { data: kw, set: setKw, sync: kwSync, label: "Kilo Wines", sub: "multiples of 6", prefix: "kw", email: "Sales@kilowines.co.uk" },
majestic: { data: mj, set: setMj, sync: mjSync, label: "Majestic", sub: "wines", prefix: "mj" },
rothley: { data: rw, set: setRw, sync: rwSync, label: "Rothley", sub: "wines", prefix: "rw" },
roundcorner: { data: rc, set: setRc, sync: rcSync, label: "Round Corner", sub: "brewing", prefix: "rc" },
amazon: { data: az, set: setAz, sync: azSync, label: "Amazon", sub: "supplies", prefix: "az" }
};
const sup = suppliers[supplier] || suppliers.kater4;
const current = sup.data;
const setCurrent = sup.set;
const hasCode = false;
const supplierName = sup.label;
const update = (id, patch) => setCurrent(current.map(s => s.id === id ? { ...s, ...patch } : s));
const remove = (id) => setCurrent(current.filter(s => s.id !== id));
const add = (name) => {
const base = { id: `${sup.prefix}_${Date.now()}`, name, inStock: "0", mustHave: "1" };
setCurrent([...current, base]);
};
const needsOrder = (i) => {
if (i.excludeFromEmail) return false;
const sh = stockShortfall(i);
if (sh && sh !== "0") return true;
const stock = parseQty(i.inStock);
if (stock.num <= 0 && i.name) return true;
return false;
};
const needCount = current.filter(needsOrder).length;
const excludedCount = current.filter(i => i.excludeFromEmail).length;
const buildOrderLines = () => {
const needed = current.filter(needsOrder);
const orderDate = nextThursday();
const lines = [];
lines.push(`THE FIRE STATION PIZZERIA`);
lines.push(`${supplierName} Order For Thursday (${orderDate})`);
lines.push(``);
if (needed.length === 0) {
lines.push(`No items to order.`);
} else {
needed.forEach(it => {
const sh = stockShortfall(it);
const qty = (sh && sh !== "0" && sh !== "") ? sh : "—";
lines.push(`• ${it.name} — ${qty}`);
});
}
if (excludedCount > 0) {
lines.push(``);
lines.push(`(${excludedCount} item${excludedCount === 1 ? "" : "s"} skipped at staff request)`);
}
return { lines, orderDate };
};
const emailOrder = () => {
const { lines, orderDate } = buildOrderLines();
window.location.href = buildMailto(`${supplierName} Order — Thursday ${orderDate}`, lines, sup.email);
};
const [copied, setCopied] = useState(false);
const copyOrder = async () => {
const { lines } = buildOrderLines();
try {
await navigator.clipboard.writeText(lines.join("\n"));
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch { alert("Couldn't copy — try the email button instead."); }
};
return (
{/* Supplier tabs — 3x2 grid */}
{Object.entries(suppliers).map(([id, s]) => {
const active = supplier === id;
return (
setSupplier(id)} style={{
padding: "7px 4px", borderRadius: 9,
border: `1px solid ${active ? theme.accent : theme.rowBorder}`,
background: active ? theme.accentSoft : "transparent",
color: active ? theme.accent : theme.muted,
fontFamily: "inherit", cursor: "pointer", textAlign: "center"
}}>
{s.label}
{s.sub}
);
})}
0}/>
Item
Have
Must
Order
{current.map(item => (
update(item.id, patch)}
onRemove={() => remove(item.id)}
onToggleExclude={() => update(item.id, { excludeFromEmail: !item.excludeFromEmail })}/>
))}
{editing && }
{Icon.mail(18)} Email {supplierName} Order
{Icon.clipboard(16)} {copied ? "Copied!" : "Copy order to clipboard"}
);
}
function FOHApp({ theme, storageNs = "foh" }) {
const [tab, setTab] = useLocal(`foh.tab.${storageNs}`, "home");
const openItems = LS.get("foh.opening.v1", DEFAULT_FOH_OPENING);
const openChecked = LS.get("foh.opening.checked.v1", {});
const openPct = openItems.length ? Math.round(openItems.filter(n => openChecked[n]).length / openItems.length * 100) : 0;
const cleanItems = LS.get("foh.cleaning.v1", DEFAULT_FOH_CLEANING);
const cleanChecked = LS.get("foh.cleaning.checked.v1", {});
const cleanPct = cleanItems.length ? Math.round(cleanItems.filter(n => cleanChecked[n]).length / cleanItems.length * 100) : 0;
const closeItems = LS.get("foh.closing.v1", DEFAULT_FOH_CLOSING);
const endItems = LS.get("foh.endofnight.v1", DEFAULT_FOH_END_OF_NIGHT);
const closeChecked = LS.get("foh.closing.checked.v1", {});
const allClose = [...closeItems, ...endItems];
const closePct = allClose.length ? Math.round(allClose.filter(n => closeChecked[n]).length / allClose.length * 100) : 0;
const stats = { openPct, cleanPct, closePct };
const goHome = () => setTab("home");
const go = (t) => setTab(t);
const role = localStorage.getItem("fs_role_v1") || "foh";
const isManager = role === "manager";
return (
{tab === "home" && }
{tab === "opening" && }
{tab === "cleaning" && }
{tab === "closing" && }
{isManager && tab === "stock" && }
);
}
Object.assign(window, { App, FOHApp, Logo });