// TemperatureScreen.jsx — iPad Temperature Log.
//
// Bottom-nav entry. Shows today's scheduled checkpoints as cards
// (configured in Admin Portal → Temperature Log → Schedule). Tapping a card
// opens the logging sheet: a list of every catalog item with four quick
// picks per item:
// • <140°F · 140–165°F · >165°F — colored band buttons
// • "Type °F" — opens the same NumPad we use for PINs,
// writes a precise value + derives the band
//
// Staff can finish any time. If they tap Finish with no readings, we warn
// them — there's an extremely rare case where nothing was available, in
// which case they can proceed anyway. PIN gate locks the final submit so
// the log is attributed to whoever was on duty.
//
// Data layout (v5.43 — see migration `temperature_log_v1`):
// temperature_logs — id, the_date, schedule_id, finalized_at, ...
// temperature_readings — id, log_id, item_id, band, value, created_at
//
// We write to temperature_logs lazily on the first reading (insert with
// finalized_at=NULL), then upsert temperature_readings as the crew picks.
// Tapping Finish flips finalized_at + finalized_by_staff_id on the log row.
const { useState: useTemp, useEffect: useEffectTemp, useMemo: useMemoTemp, useRef: useRefTemp } = React;
// ------------------------------------------------------------------
// Band metadata mirrors the portal so colors stay in lock-step.
// ------------------------------------------------------------------
// Color semantics chosen for food-safety legibility:
// <140 → red (out-of-spec hot-holding — flag it)
// 140-165 → gray (the normal in-spec hot-hold range — nothing to flag)
// >165 → amber (running hot — heads-up for quality / over-cook risk)
const TEMP_BANDS_IPAD = [
{ id: 'under_140', label: '<140°F', short: '<140', color: '#B91C1C', bg: '#FEE2E2', border: '#FCA5A5' },
{ id: 'between_140_165', label: '140–165°F', short: '140-165', color: '#52525B', bg: '#F4F4F5', border: '#D4D4D8' },
{ id: 'over_165', label: '>165°F', short: '>165', color: '#92400E', bg: '#FEF3C7', border: '#F0CB7D' },
];
const BAND_BY_ID_IPAD = Object.fromEntries(TEMP_BANDS_IPAD.map(b => [b.id, b]));
const deriveBand = (val) => {
const n = Number(val);
if (!Number.isFinite(n)) return null;
if (n < 140) return 'under_140';
if (n <= 165) return 'between_140_165';
return 'over_165';
};
const fmtTime12Temp = (timeStr) => {
if (!timeStr) return '';
const [hStr, mStr] = String(timeStr).split(':');
const h = Number(hStr); const m = Number(mStr) || 0;
if (!Number.isFinite(h)) return timeStr;
const ap = h >= 12 ? 'PM' : 'AM';
const h12 = ((h + 11) % 12) + 1;
return `${h12}:${String(m).padStart(2, '0')} ${ap}`;
};
const todayKeyTemp = () => {
const d = new Date();
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
};
// ------------------------------------------------------------------
// Top-level screen — today's checkpoints
// ------------------------------------------------------------------
const TemperatureScreen = ({ currentStaff, showToast }) => {
const todayKey = useMemoTemp(() => todayKeyTemp(), []);
// Catalog + schedule come from window.SAMPLE_* (loaded by dataBootstrap).
const catalog = (window.SAMPLE_TEMPERATURE_ITEMS || []).filter(i => !i.archived);
const schedule = (window.SAMPLE_TEMPERATURE_SCHEDULE || [])
.filter(s => !s.archived)
.slice()
.sort((a, b) => (a.timeOfDay || '').localeCompare(b.timeOfDay || ''));
// Today's logs (one per schedule entry), with their readings nested in.
// logsByScheduleId[scheduleId] = { id, finalized_at, readings: [...] }
const [logsByScheduleId, setLogsByScheduleId] = useTemp({});
const [active, setActive] = useTemp(null); // open sheet for { schedule, log }
// Fetch today's logs + readings, plus realtime subscribe.
useEffectTemp(() => {
if (!window.supa) return;
let cancelled = false;
const refetch = async () => {
const { data: logRows } = await window.supa
.from('temperature_logs')
.select('*')
.eq('restaurant_id', window.RESTAURANT_ID)
.eq('the_date', todayKey);
if (cancelled) return;
const m = {};
(logRows || []).forEach(l => {
m[l.schedule_id] = { id: l.id, finalized_at: l.finalized_at, finalized_by_staff_id: l.finalized_by_staff_id, readings: [] };
});
const ids = (logRows || []).map(l => l.id);
if (ids.length > 0) {
const { data: readingRows } = await window.supa
.from('temperature_readings')
.select('*')
.in('log_id', ids);
if (cancelled) return;
(readingRows || []).forEach(r => {
const entry = Object.values(m).find(e => e.id === r.log_id);
if (entry) entry.readings.push(r);
});
}
setLogsByScheduleId(m);
};
refetch();
const ch = window.supa
.channel('ipad-temp-logs:' + window.RESTAURANT_ID + ':' + todayKey)
.on('postgres_changes', {
event: '*', schema: 'public', table: 'temperature_logs',
filter: 'restaurant_id=eq.' + window.RESTAURANT_ID,
}, () => refetch())
.on('postgres_changes', {
event: '*', schema: 'public', table: 'temperature_readings',
}, () => refetch())
.subscribe();
return () => { cancelled = true; window.supa.removeChannel(ch); };
}, [todayKey]);
// Determine the "current" or most-relevant checkpoint card so the user
// sees it highlighted. Definition: the latest scheduled time that's
// already past, or the next one if none have passed yet.
const nowMin = (() => { const d = new Date(); return d.getHours() * 60 + d.getMinutes(); })();
const highlightId = (() => {
if (schedule.length === 0) return null;
let active = schedule[0].id;
for (const s of schedule) {
const [h, m] = (s.timeOfDay || '0:0').split(':').map(Number);
const mm = (h || 0) * 60 + (m || 0);
if (mm <= nowMin) active = s.id;
else break;
}
return active;
})();
return (
{window.fmtTodayLabel()}
Temperature Log
{schedule.length === 0
? 'No scheduled checkpoints yet — set them up in Admin Portal.'
: `${schedule.length} checkpoint${schedule.length === 1 ? '' : 's'} · ${catalog.length} item${catalog.length === 1 ? '' : 's'} to check`}
{schedule.length === 0 ? (
Ask your manager to add temperature checkpoints in Admin Portal → Temperature Log → Schedule.
) : (
// Restaurants typically run 2-4 checkpoints per day, so use a
// full-width single column instead of a grid. Bigger tap targets,
// clearer summary pills, no awkward half-empty rows.
);
};
// ------------------------------------------------------------------
// Status badge — three states
// ------------------------------------------------------------------
const StatusBadge = ({ finalized, hasReadings }) => {
if (finalized) {
return (
Done
);
}
if (hasReadings) {
// Blue, not amber — amber is reserved for the 140-165°F band.
return (
In progress
);
}
return (
To do
);
};
// Stacked metric tile: big count on top, small label below. Replaces the
// inline "1 <140" pill — that layout parsed as a math expression rather
// than "1 reading in the <140 band". The two-line layout removes the
// ambiguity entirely and gives the count its own visual weight.
const BandPill = ({ count, short, tone, color, bg, border }) => {
const isSolid = tone === 'solid';
return (
{count}{short}
);
};
const summarizeReadings = (readings) => {
const out = { total: readings.length, byBand: {} };
readings.forEach(r => { out.byBand[r.band] = (out.byBand[r.band] || 0) + 1; });
return out;
};
// ------------------------------------------------------------------
// LogSheet — fullscreen-ish modal that lists catalog items and writes
// readings in real time. Finalize via PIN.
// ------------------------------------------------------------------
const LogSheet = ({ schedule, existingLog, catalog, currentStaff, showToast, todayKey, onClose }) => {
// Local cache of readings by item_id. Reflects what's currently saved
// (so the UI updates immediately on tap; realtime will reconcile later).
// Each entry: { id, band, value (nullable) }.
const [readingsByItem, setReadingsByItem] = useTemp(() => {
const m = {};
(existingLog?.readings || []).forEach(r => { m[r.item_id] = r; });
return m;
});
const [logId, setLogId] = useTemp(existingLog?.id || null);
const [finalized, setFinalized] = useTemp(!!existingLog?.finalized_at);
const [pinGate, setPinGate] = useTemp(null);
const [keypad, setKeypad] = useTemp(null); // { itemId }
const [confirmEmpty, setConfirmEmpty] = useTemp(false);
// Non-basic items the crew has explicitly added to this checkpoint's
// visible list. They sit alongside basics + items that already have a
// reading. We keep these in local state only — if the sheet is closed
// and reopened, items with no reading drop off the visible list (but
// can be re-added in seconds via the picker, and anything with a
// reading sticks around because readingsByItem brings it back).
const [extras, setExtras] = useTemp(() => new Set());
const [picker, setPicker] = useTemp(false);
// Refetch readings whenever the underlying log changes via realtime.
useEffectTemp(() => {
if (!logId || !window.supa) return;
let cancelled = false;
const refetch = async () => {
const { data } = await window.supa
.from('temperature_readings')
.select('*')
.eq('log_id', logId);
if (cancelled) return;
const m = {};
(data || []).forEach(r => { m[r.item_id] = r; });
setReadingsByItem(m);
};
const ch = window.supa
.channel('ipad-temp-readings:' + logId)
.on('postgres_changes', {
event: '*', schema: 'public', table: 'temperature_readings',
filter: 'log_id=eq.' + logId,
}, () => refetch())
.subscribe();
return () => { cancelled = true; window.supa.removeChannel(ch); };
}, [logId]);
// Ensure a temperature_logs row exists before writing readings to it.
// Returns the log id. Idempotent: subsequent calls reuse the cached id.
const ensureLog = async () => {
if (logId) return logId;
const newId = 'tl-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
if (!window.supa) { setLogId(newId); return newId; }
// INSERT with onConflict do-nothing on the unique (restaurant, date, schedule)
// index so concurrent iPads can't double-create the row.
const { data, error } = await window.supa
.from('temperature_logs')
.upsert({
id: newId,
restaurant_id: window.RESTAURANT_ID,
the_date: todayKey,
schedule_id: schedule.id,
}, { onConflict: 'restaurant_id,the_date,schedule_id' })
.select('id')
.single();
if (error) { console.error('temperature_logs upsert failed', error); setLogId(newId); return newId; }
setLogId(data.id);
return data.id;
};
// Record (or update) a reading for one item.
const setReading = async (item, band, value) => {
if (finalized) return;
const lid = await ensureLog();
const existing = readingsByItem[item.id];
const row = {
id: existing?.id || ('tr-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 6)),
log_id: lid,
item_id: item.id,
band,
value: value === null || value === undefined || value === '' ? null : Number(value),
recorded_by_staff_id: currentStaff?.id || null,
};
// Optimistic local update.
setReadingsByItem(m => ({ ...m, [item.id]: row }));
if (!window.supa) return;
const { error } = await window.supa
.from('temperature_readings')
.upsert(row, { onConflict: 'log_id,item_id' });
if (error) console.error('temperature_readings upsert failed', error);
};
const clearReading = async (item) => {
if (finalized) return;
const existing = readingsByItem[item.id];
if (!existing) return;
setReadingsByItem(m => { const n = { ...m }; delete n[item.id]; return n; });
if (!window.supa) return;
const { error } = await window.supa.from('temperature_readings').delete().eq('id', existing.id);
if (error) console.error('temperature_readings delete failed', error);
};
const totalReadings = Object.keys(readingsByItem).length;
const summary = useMemoTemp(() => summarizeReadings(Object.values(readingsByItem)), [readingsByItem]);
// Visible item list = basic items ∪ items already logged ∪ items the
// crew explicitly added via the picker. Non-basic items with no
// reading and no explicit add stay hidden so the line stays short
// and matches "what's actually out today."
const visibleItems = useMemoTemp(() => {
const out = [];
const seen = new Set();
const push = (it) => { if (!seen.has(it.id)) { seen.add(it.id); out.push(it); } };
catalog.forEach(it => {
if (it.isBasic || readingsByItem[it.id] || extras.has(it.id)) push(it);
});
return out;
}, [catalog, readingsByItem, extras]);
// Non-basic items not yet on the visible list — what the picker shows.
const pickableItems = useMemoTemp(() => {
return catalog.filter(it =>
!it.isBasic && !readingsByItem[it.id] && !extras.has(it.id)
);
}, [catalog, readingsByItem, extras]);
const addExtra = (itemId) => {
setExtras(prev => {
const next = new Set(prev);
next.add(itemId);
return next;
});
};
const removeExtra = async (item) => {
// If the item also has a reading, removing it from extras alone
// wouldn't hide it (readingsByItem still includes it). Clear the
// reading too so "remove" means "this isn't on the line after all."
if (readingsByItem[item.id]) {
await clearReading(item);
}
setExtras(prev => {
if (!prev.has(item.id)) return prev;
const next = new Set(prev);
next.delete(item.id);
return next;
});
};
// Finalize (PIN-gated). If nothing's been logged we ask first.
const attemptFinish = () => {
if (finalized) { onClose(); return; }
if (totalReadings === 0) { setConfirmEmpty(true); return; }
openPinAndFinalize();
};
const openPinAndFinalize = () => {
setPinGate({
purpose: `Finalize ${fmtTime12Temp(schedule.timeOfDay)} log`,
onSuccess: async (staff) => {
const lid = await ensureLog();
const finalizedAt = new Date().toISOString();
// Optimistic.
setFinalized(true);
setPinGate(null);
if (window.supa) {
const { error } = await window.supa
.from('temperature_logs')
.update({ finalized_at: finalizedAt, finalized_by_staff_id: staff.id })
.eq('id', lid);
if (error) {
console.error('temperature_logs finalize failed', error);
setFinalized(false);
return;
}
}
showToast && showToast({ message: 'Temperature log finalized', icon: 'check', staff });
// Brief pause so the toast appears before we close the sheet.
setTimeout(() => onClose(), 350);
},
});
};
return (
{/* Header */}
Temperature log · {fmtTime12Temp(schedule.timeOfDay)}
{schedule.label && · {schedule.label}}
{totalReadings} of {visibleItems.length} logged
{finalized && (
Finalized
)}
{finalized ? 'Close' : 'Finish'}
{/* Summary band */}
{totalReadings > 0 && (
{TEMP_BANDS_IPAD.map(b => (
))}
)}
{/* Item list */}
{catalog.length === 0 ? (
Catalog is empty — ask your manager to add items in Admin Portal.
);
};
// ------------------------------------------------------------------
// Add-item picker — multi-select non-basic catalog items to add to
// the current checkpoint's visible list. Mirrors the temperature
// PIN gate / keypad sheet styling so it feels like the rest of the
// flow.
// ------------------------------------------------------------------
const AddItemPicker = ({ items, onCancel, onAdd }) => {
const [selected, setSelected] = useTemp(() => new Set());
const toggle = (id) => setSelected(prev => {
const next = new Set(prev);
if (next.has(id)) next.delete(id); else next.add(id);
return next;
});
const count = selected.size;
// Preserve the catalog's owner-configured order. The caller passes
// `items` already filtered/ordered by sort_order (the iPad catalog
// ultimately comes from a `.order('sort_order')` query in
// dataBootstrap), so reorder here would override the owner's intent.
const sorted = items;
return (
Add items to this checkpoint
What else is out on the line right now?
Pick anything you're hot-holding today. You can record their temperatures after.
);
};
// ------------------------------------------------------------------
// Full-screen temperature reminder — fires when a scheduled checkpoint's
// time has arrived and today's log for it isn't finalized yet. Mirrors the
// Daily Checklist reminder; the only action is "Open Temperature Log" (it
// never auto-fills readings). Uses the shared `attn-flash` colour-cycling
// treatment so the takeover pulses for attention.
// ------------------------------------------------------------------
const TemperatureReminderOverlay = ({ schedule, itemCount, onOpen, onDismiss }) => {
const [mounted, setMounted] = useTemp(false);
useEffectTemp(() => {
const raf = requestAnimationFrame(() => setMounted(true));
return () => cancelAnimationFrame(raf);
}, []);
return (
{/* Decorative rings */}
Temperature check due
{fmtTime12Temp(schedule.timeOfDay)}
{schedule.label || 'Temperature checkpoint'}
{itemCount > 0
? `Log all ${itemCount} item${itemCount === 1 ? '' : 's'} now while they're at temp. Tap to open the log — readings are never auto-filled.`
: 'Open the temperature log and record this checkpoint’s readings.'}
);
};
// ------------------------------------------------------------------
// Reminder scheduler hook — mirrors useChecklistReminder. Polls every 30s
// for any non-archived checkpoint whose time_of_day has passed today and
// whose log isn't finalized; surfaces the most relevant one. Temperature
// schedule has no per-checkpoint reminder cadence (unlike checklist
// groups), so we re-nag every RE_NAG_MIN minutes while still unlogged —
// missing a temp check is a food-safety issue, so a single pop isn't enough.
// Returns [reminderSchedule, dismiss].
// ------------------------------------------------------------------
const RE_NAG_MIN = 15;
function useTemperatureReminder() {
const [reminderId, setReminderId] = useTemp(null); // schedule id
const lastShownRef = useRefTemp({}); // { schedId+'@'+date: ms epoch }
const finalizedRef = useRefTemp({}); // { schedId: true } for today
// Gate firing until the first finalized-logs load completes. Otherwise the
// mount-time tick races ahead of the (async) query with an empty
// finalizedRef and wrongly fires for a checkpoint that's already done.
const readyRef = useRefTemp(false);
// Load today's finalized checkpoints; refresh every minute. Polling (not
// realtime) keeps the reminder decoupled from the App mount lifecycle —
// same choice as useChecklistReminder.
useEffectTemp(() => {
let cancelled = false;
const refresh = async () => {
if (!window.supa) { readyRef.current = true; return; }
const dk = todayKeyTemp();
const { data } = await window.supa.from('temperature_logs')
.select('schedule_id, finalized_at')
.eq('restaurant_id', window.RESTAURANT_ID)
.eq('the_date', dk);
if (cancelled) return;
const m = {};
(data || []).forEach(l => { if (l.finalized_at) m[l.schedule_id] = true; });
finalizedRef.current = m;
readyRef.current = true;
};
refresh();
const t = setInterval(refresh, 60000);
return () => { cancelled = true; clearInterval(t); };
}, []);
// Poll the schedule.
useEffectTemp(() => {
const tick = () => {
if (reminderId) return; // already showing
if (!readyRef.current) return; // wait until finalized state is known
const now = new Date();
const dk = todayKeyTemp();
const nowMin = now.getHours() * 60 + now.getMinutes();
const sched = (window.SAMPLE_TEMPERATURE_SCHEDULE || [])
.filter(s => !s.archived)
.slice()
.sort((a, b) => (a.timeOfDay || '').localeCompare(b.timeOfDay || ''));
for (const s of sched) {
const [h, m] = (s.timeOfDay || '00:00').split(':').map(Number);
const trigMin = (h || 0) * 60 + (m || 0);
if (nowMin < trigMin) continue; // not yet due
if (finalizedRef.current[s.id]) continue; // already logged + finalized
const key = s.id + '@' + dk;
const last = lastShownRef.current[key];
if (last === undefined) {
// First time it's due today — always pop once.
lastShownRef.current[key] = Date.now();
setReminderId(s.id);
return;
}
const sinceMin = (Date.now() - last) / 60000;
if (sinceMin >= RE_NAG_MIN) {
lastShownRef.current[key] = Date.now();
setReminderId(s.id);
return;
}
}
};
tick();
const t = setInterval(tick, 30000); // 30s poll → lag ≤ 30s
return () => clearInterval(t);
}, [reminderId]);
const dismiss = () => setReminderId(null);
const schedule = (window.SAMPLE_TEMPERATURE_SCHEDULE || []).find(s => s.id === reminderId) || null;
return [schedule, dismiss];
}
Object.assign(window, {
TemperatureScreen,
TemperatureReminderOverlay,
useTemperatureReminder,
});