// ChecklistTemplate.jsx — admin editor for Daily Checklist groups + items.
//
// Schema mirror (see migrations):
// checklist_groups: id, name, trigger_time (HH:MM:SS), weekdays int[],
// reminder_minutes, sort_order, archived
// checklist_items: id, group_id, name, sort_order, archived
// Groups own a fire time + weekday mask + reminder cadence — when that
// time arrives the iPad pops a full-screen reminder. Items are plain
// text tasks belonging to a group.
const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const checklistGroupFromRow = (r) => ({
id: r.id, name: r.name,
triggerTime: (r.trigger_time || '08:30:00').slice(0, 5),
weekdays: r.weekdays || [0, 1, 2, 3, 4, 5, 6],
// 0 means "no re-reminder after the initial pop" — keep that
// sentinel by checking the source value explicitly rather than the
// `|| 15` fallback (which would treat 0 as missing).
reminderMinutes: r.reminder_minutes == null ? 15 : Number(r.reminder_minutes),
sortOrder: Number(r.sort_order) || 0,
archived: !!r.archived,
});
const checklistGroupToRow = (o) => ({
id: o.id, name: o.name,
// Postgres `time` accepts HH:MM, expands to HH:MM:00.
trigger_time: o.triggerTime || '08:30',
weekdays: o.weekdays || [0, 1, 2, 3, 4, 5, 6],
reminder_minutes: o.reminderMinutes == null ? 15 : Math.max(0, Number(o.reminderMinutes)),
sort_order: Number(o.sortOrder) || 0,
archived: !!o.archived,
updated_at: new Date().toISOString(),
});
const checklistItemFromRow = (r) => ({
id: r.id, groupId: r.group_id, name: r.name,
sortOrder: Number(r.sort_order) || 0, archived: !!r.archived,
});
const checklistItemToRow = (o) => ({
id: o.id, group_id: o.groupId, name: o.name,
sort_order: Number(o.sortOrder) || 0, archived: !!o.archived,
updated_at: new Date().toISOString(),
});
const ChecklistTemplate = () => {
const [groups, setGroups] = window.useSupaList('checklist_groups', {
fromRow: checklistGroupFromRow,
toRow: checklistGroupToRow,
initial: () => window.SAMPLE_CHECKLIST_GROUPS || [],
});
const [items, setItems] = window.useSupaList('checklist_items', {
fromRow: checklistItemFromRow,
toRow: checklistItemToRow,
initial: () => window.SAMPLE_CHECKLIST_ITEMS || [],
});
const [editingGroup, setEditingGroup] = useState(null); // group object or 'new'
const [editingItem, setEditingItem] = useState(null); // item object or { groupId, _new: true }
const [toast, setToast] = useState('');
// Segmented view — 'everyday' (default) or 'specific'. Two sections
// stacked was visually noisy; toggle keeps the page focused.
const [segment, setSegment] = useState('everyday');
// Split groups into "every day" vs "specific days". Every day is the
// bulk of the template; specific-day groups (e.g. Tuesday-only fryer
// oil change) get their own section so admin sees them at a glance.
// Within each segment, sort by trigger time so the admin can scan
// the schedule top-down chronologically.
const activeGroups = groups.filter(g => !g.archived);
const everydayGroups = activeGroups
.filter(g => (g.weekdays || []).length === 7)
.sort((a, b) => a.triggerTime.localeCompare(b.triggerTime));
const specialGroups = activeGroups
.filter(g => (g.weekdays || []).length < 7)
.sort((a, b) => a.triggerTime.localeCompare(b.triggerTime));
const itemsByGroup = useMemo(() => {
const m = {};
items.filter(i => !i.archived).forEach(i => {
(m[i.groupId] = m[i.groupId] || []).push(i);
});
Object.values(m).forEach(arr => arr.sort((a, b) => a.sortOrder - b.sortOrder));
return m;
}, [items]);
const saveGroup = (draft) => {
if (!draft.name.trim()) return;
if (draft.id && groups.some(g => g.id === draft.id)) {
setGroups(gs => gs.map(g => g.id === draft.id ? { ...draft, name: draft.name.trim() } : g));
setToast('Group updated');
} else {
const id = 'cg-' + Date.now().toString(36);
const maxSort = groups.reduce((m, g) => Math.max(m, g.sortOrder), 0);
setGroups(gs => [...gs, {
...draft, id,
name: draft.name.trim(),
sortOrder: maxSort + 10,
archived: false,
}]);
setToast('Group added');
}
setEditingGroup(null);
};
const deleteGroup = (group) => {
const itemCount = itemsByGroup[group.id]?.length || 0;
const warn = itemCount > 0
? `Delete "${group.name}" and its ${itemCount} item${itemCount === 1 ? '' : 's'}? Past completion log entries for these items stay readable in the log.`
: `Delete "${group.name}"?`;
if (!confirm(warn)) return;
// Items cascade via the FK ON DELETE CASCADE, so we only need to drop
// them from local state for the immediate UI update.
setItems(is => is.filter(i => i.groupId !== group.id));
setGroups(gs => gs.filter(g => g.id !== group.id));
setToast('Group deleted');
};
const saveItem = (draft) => {
if (!draft.name.trim()) return;
if (draft.id && items.some(i => i.id === draft.id)) {
setItems(is => is.map(i => i.id === draft.id ? { ...draft, name: draft.name.trim() } : i));
setToast('Item updated');
} else {
const id = 'ci-' + Date.now().toString(36);
const groupItems = itemsByGroup[draft.groupId] || [];
const maxSort = groupItems.reduce((m, i) => Math.max(m, i.sortOrder), 0);
setItems(is => [...is, {
...draft, id,
name: draft.name.trim(),
sortOrder: maxSort + 10,
archived: false,
}]);
setToast('Item added');
}
setEditingItem(null);
};
const deleteItem = (item) => {
if (!confirm(`Delete "${item.name}"? Past completion log entries for this item stay readable in the log.`)) return;
setItems(is => is.filter(i => i.id !== item.id));
setToast('Item deleted');
};
const activeGroupCount = everydayGroups.length + specialGroups.length;
const activeItemCount = items.filter(i => !i.archived).length;
return (
Checklist Template
Groups are the recurring blocks of tasks — each has a fire
time, a set of weekdays, and a reminder cadence. When the time
comes, the iPad pops a full-screen reminder; if items remain
incomplete, it pops again every N minutes.
setEditingGroup('new')}>Add group
{activeGroupCount} group{activeGroupCount === 1 ? '' : 's'}
{' · '}
{activeItemCount} item{activeItemCount === 1 ? '' : 's'} active.
The template repeats every day per its weekday rules — there's no per-day publish step.
);
};
// ------------------------------------------------------------------
// SegmentSwitch — pill-style toggle for the two template views. Each
// option shows its count so the admin sees at a glance which segment
// has groups even when the off-segment is hidden. A small hint line
// below the toggle clarifies what the active segment means.
const SegmentSwitch = ({ value, onChange, options }) => {
const active = options.find(o => o.id === value) || options[0];
return (
{options.map(opt => {
const on = value === opt.id;
return (
);
})}
{active.hint}
);
};
const SegmentEmpty = ({ hint }) => (
{hint}
);
// Single group card with its items inline. The toolbar shows the
// scheduling summary (time + weekday chips + reminder cadence) so the
// owner can read it without opening the editor.
// ------------------------------------------------------------------
const GroupCard = ({ group, items, onEditGroup, onDeleteGroup, onAddItem, onEditItem, onDeleteItem }) => {
const dayChips = group.weekdays.length === 7
? Every day
: (
{/* Whole header row is clickable to edit the group. Action buttons
are nested inside but stop event propagation so trash doesn't
double-fire as "edit then delete". row-actions opacity is
forced visible — the default CSS rule only un-hides on tr:hover,
and this card isn't a table row, so without the override the
icons stayed permanently invisible. */}
{group.name}
{timeLabel}
{dayChips}
·
{group.reminderMinutes > 0
? `Remind every ${group.reminderMinutes}m if incomplete`
: 'No re-reminder'}
0
? 'If items remain unchecked after the initial pop, re-fire every N minutes.'
: 'Fires once at the scheduled time and won\'t re-pop, even if items remain unchecked.'}
>
Every
{
const n = Number(e.target.value);
setDraft({ ...draft, reminderMinutes: isFinite(n) && n > 0 ? n : 0 });
}}
style={{ height: 36, width: 80, textAlign: 'right', fontFamily: 'var(--font-num)' }}
/>
minutes