// LearningScreen.jsx — "Learning": short notices the whole crew has to read
// and sign (v18.00).
//
// Not training. A training item is permanent curriculum with trainers and
// practice stages; a learning post is a bad review, or something that
// happened in the store on Tuesday. It's urgent, it's read-once, and the
// only thing it asks for is a signature from each person it names.
//
// Three pieces live here:
// useLearningData() — one fetch + realtime subscription, called ONCE at
// App level so the channel survives navigation (same
// reason broadcasts live up there).
// LearningBelt — the red band at the top of every screen while
// anything is outstanding. Count on the left, and
// once the stragglers are down to six or fewer,
// their faces on the right so the crew can chase
// each other instead of waiting on a manager.
// LearningScreen — list → reader → sign.
//
// A post retires itself: once every assigned person has signed, it stops
// being "active" and the belt drops it. Nothing to tidy up afterwards,
// which matters for something posted at 11pm about a review.
//
// Idents are lrn/Lrn/LRN_-prefixed — Babel-standalone shares one global
// scope across every .jsx in the app (HANDBOOK §9).
const { useState: useLrn, useEffect: useLrnEffect, useMemo: useLrnMemo, useCallback: useLrnCb } = React;
const LRN_RED = '#DC2626';
const LRN_RED_DARK = '#B91C1C';
const LRN_FACES_AT = 6; // show faces once this many signers (or fewer) remain
// Admins write these posts; they don't sign them. Filtered here rather than
// left to whoever ticks the boxes, so an admin can never end up as the one
// name holding a post open on the belt — including on a post whose stored
// list predates this rule.
const lrnSigner = (s) => s.active !== false && s.role !== 'Admin';
// Who a post is addressed to. Mirrors isAssignedTraining's contract exactly,
// including the trap: an explicit empty array means NOBODY (you deselected
// everyone), and only a genuinely unset list falls through to "everyone".
const lrnAssignees = (post, staff) => {
const ids = post.assignedStaffIds;
const signers = (staff || []).filter(lrnSigner);
if (Array.isArray(ids)) return signers.filter(s => ids.indexOf(s.id) >= 0);
return signers;
};
const lrnOutstanding = (post, staff, acksByPost) => {
const signed = acksByPost[post.id] || {};
return lrnAssignees(post, staff).filter(s => !signed[s.id]);
};
const lrnPostFromRow = (r) => ({
id: r.id,
title: r.title || '',
bodyHtml: r.body_html || '',
assignedStaffIds: Array.isArray(r.assigned_staff_ids) ? r.assigned_staff_ids : null,
status: r.status || 'draft',
archived: !!r.archived,
publishedAt: r.published_at || null,
createdAt: r.created_at || null,
});
// ------------------------------------------------------------------
// Data — one subscription for the whole app
// ------------------------------------------------------------------
const useLearningData = () => {
const [posts, setPosts] = useLrn([]);
const [acks, setAcks] = useLrn([]);
useLrnEffect(() => {
if (!window.supa) return;
let cancelled = false;
const load = () => {
window.supa.from('learning_posts').select('*')
.eq('restaurant_id', window.RESTAURANT_ID)
.eq('status', 'live')
.eq('archived', false)
.then(({ data, error }) => {
if (error) { console.error('learning_posts select failed', error); return; }
if (cancelled || !data) return;
setPosts(data.map(lrnPostFromRow));
});
window.supa.from('learning_acks').select('*')
.eq('restaurant_id', window.RESTAURANT_ID)
.then(({ data, error }) => {
if (error) { console.error('learning_acks select failed', error); return; }
if (cancelled || !data) return;
setAcks(data);
});
};
load();
// Refetch wholesale rather than patching: the belt's correctness depends
// on posts AND acks agreeing, the data is a handful of rows, and a
// publish flips `status` (an UPDATE the filtered select would otherwise
// have to re-derive).
const ch = window.supa
.channel('ipad-learning:' + window.RESTAURANT_ID)
.on('postgres_changes', {
event: '*', schema: 'public', table: 'learning_posts',
filter: 'restaurant_id=eq.' + window.RESTAURANT_ID,
}, () => { if (!cancelled) load(); })
.on('postgres_changes', {
event: '*', schema: 'public', table: 'learning_acks',
filter: 'restaurant_id=eq.' + window.RESTAURANT_ID,
}, () => { if (!cancelled) load(); })
.subscribe();
return () => { cancelled = true; window.supa.removeChannel(ch); };
}, []);
const acksByPost = useLrnMemo(() => {
const m = {};
acks.forEach(a => { (m[a.post_id] = m[a.post_id] || {})[a.staff_id] = a; });
return m;
}, [acks]);
const staff = window.SAMPLE_STAFF || [];
// Active = live, not archived, and still waiting on at least one person.
const active = useLrnMemo(
() => posts.filter(p => lrnOutstanding(p, staff, acksByPost).length > 0),
[posts, acksByPost, staff]);
// The union of everyone still owing a signature anywhere. This is what the
// belt counts down — one person outstanding on three posts is one face.
const waitingOn = useLrnMemo(() => {
const seen = {};
const out = [];
active.forEach(p => lrnOutstanding(p, staff, acksByPost).forEach(s => {
if (seen[s.id]) return;
seen[s.id] = true;
out.push(s);
}));
return out.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
}, [active, acksByPost, staff]);
const sign = useLrnCb(async (postId, staffId) => {
// Optimistic: the belt should drop the moment the last person signs,
// not a round-trip later.
const optimistic = { id: crypto.randomUUID(), post_id: postId, staff_id: staffId, acked_at: new Date().toISOString() };
setAcks(prev => prev.concat([optimistic]));
const { error } = await window.supa.from('learning_acks').insert({
restaurant_id: window.RESTAURANT_ID, post_id: postId, staff_id: staffId,
});
// 23505 = already signed. Someone double-tapped, or two iPads raced —
// either way the signature exists, which is all we wanted.
if (error && error.code !== '23505') {
console.error('learning ack insert failed', error);
setAcks(prev => prev.filter(a => a.id !== optimistic.id));
return false;
}
return true;
}, []);
return { posts, active, acksByPost, waitingOn, sign };
};
// ------------------------------------------------------------------
// The red belt
// ------------------------------------------------------------------
const LearningBelt = ({ active, waitingOn, onOpen }) => {
if (!active || active.length === 0) return null;
const n = active.length;
const showFaces = waitingOn.length > 0 && waitingOn.length <= LRN_FACES_AT;
return (
);
};
// ------------------------------------------------------------------
// Screen: list → reader → sign
// ------------------------------------------------------------------
const LearningScreen = ({ active, acksByPost, sign, showToast }) => {
const [openId, setOpenId] = useLrn(null);
const staff = window.SAMPLE_STAFF || [];
const post = active.find(p => p.id === openId) || null;
if (post) {
return (
setOpenId(null)}
onSign={async (s) => {
const ok = await sign(post.id, s.id);
if (ok) {
showToast && showToast({ message: 'Signed — thanks ' + (s.name || '').split(' ')[0], staff: s });
setOpenId(null);
}
return ok;
}}
/>
);
}
return (
Read and sign
Learning
{active.length === 0 && (
Nothing to read right now.
)}
{active.map(p => {
const out = lrnOutstanding(p, staff, acksByPost);
const total = lrnAssignees(p, staff).length;
const signed = total - out.length;
return (
);
})}
{/* Fail closed: no DOMPurify, no body. Same rule as TrainingScreen. */}
{/* Only people who still owe a signature. Someone who already signed
shouldn't be able to pick themselves and be told "already done" —
and it makes the remaining list a to-do the crew can work through. */}
{phase === 'pick' && (
setPhase('view')}
onPick={(s) => { setWho(s); setPhase('pin'); }}
/>
)}
{phase === 'pin' && who && (
{ setWho(null); setPhase('view'); }}
onSuccess={async () => { setPhase('view'); await onSign(who); setWho(null); }}
/>
)}
);
};
// A local picker rather than the shared StaffPicker: this one lists only the
// people who still owe a signature, and says how many are left.
const LrnSignerPicker = ({ people, onCancel, onPick }) => (
Who are you?
{people.length} {people.length === 1 ? 'person has' : 'people have'} still to sign this.
{people.map(s => (
))}
);
// File-local copy of TrainingScreen's PinConfirmSheet — that one isn't
// exported to window, and CrewMealScreen set the precedent (CmPinSheet).
const LrnPinSheet = ({ who, expectedPin, onCancel, onSuccess }) => {
const [pin, setPin] = useLrn('');
const [shake, setShake] = useLrn(false);
const tryPin = (p) => {
if (p === expectedPin) { onSuccess(); return; }
setShake(true);
setPin('');
setTimeout(() => setShake(false), 420);
};
return (