// olivia-admin-panes.jsx // The three panes of the admin: content list (left), editor (center), live preview (right). // ─── Overview page ──────────────────────────────────────────── function OvPanel({ title, hint, children, style, action }) { return (
{(title || action) && (

{title}

{action}
)} {hint &&

{hint}

} {children}
); } function OvDelta({ now, prev }) { const up = now >= prev; const pct = prev ? Math.round(((now - prev) / prev) * 100) : 0; return ( {up ? '▲' : '▼'} {Math.abs(pct)}% ); } function OvKpiCard({ label, value, sub, delta }) { return (
{label} {delta}
{value}
{sub}
); } function OvKindBars() { const max = Math.max(...OV_DATA.byKind.map(k => k.count)); const total = OV_DATA.byKind.reduce((s, k) => s + k.count, 0); return (
{OV_DATA.byKind.map((k, i) => (
{k.kind}{i === 0 && Top} {ovFmt(k.count)} · {ovPctOf(k.count, total)}%
))}
); } function OvStreakPanel() { const max = Math.max(...OV_DATA.streakBuckets.map(b => b.count)); return (
Avg streak
{OV_DATA.avgStreak} days
Longest active
{OV_DATA.longestStreak} days
Current streak distribution
{OV_DATA.streakBuckets.map(b => (
{b.label}
{ovFmt(b.count)}
))}
); } function OvMilestoneFunnel() { const total = OV_DATA.signups.total; return (
{OV_DATA.milestones.map((m, i) => { const pct = ovPctOf(m.count, total); const isLast = i === OV_DATA.milestones.length - 1; return (
{m.label} {ovFmt(m.count)} · {pct}%
); })}
); } function OvDropOffChart() { const data = OV_DATA.dropOff; const max = Math.max(...data); const peakIdx = data.indexOf(max); return (
{data.map((v, i) => { const peak = i === peakIdx; const hl = i >= 1 && i <= 4; return (
{peak && (
{ovFmt(v)}
)}
{(i + 1) % 2 === 1 || peak ? i + 1 : ''}
); })}

Day {peakIdx + 1} is the biggest drop-off — {ovFmt(max)} families end their streak here, inside the steep days 2–5 window. Families who reach day 7 are far likelier to stay; consider a lighter day-3 task or an encouragement nudge.

); } function OvLegend({ color, label }) { return ( {label} ); } function OvLegendStat({ color, value, label }) { return (
{value}
{label}
); } function OvBreakdownBars({ data, colors = [] }) { if (!data || data.length === 0) { return (
No data yet
); } const total = data.reduce((s, r) => s + r.count, 0); const max = Math.max(...data.map(r => r.count)); return (
{data.map((row, i) => (
{row.label} {ovFmt(row.count)} · {Math.round((row.count / total) * 100)}%
))}
); } function OverviewPage({ childrenPerFamily = 1.8, liveStats = null, statsLoading = false }) { const [range, setRange] = React.useState('all'); const [customStart, setCustomStart] = React.useState(''); const [customEnd, setCustomEnd] = React.useState(''); const d = OV_DATA; const rangeLabel = range === '7d' ? 'week' : range === '30d' ? 'month' : range === 'custom' ? 'selected period' : 'time'; // Slice raw trend snapshots to the selected window const rawTrend = liveStats?.trendRaw || []; const sliced = range === 'all' ? rawTrend : range === 'custom' ? rawTrend.filter(r => (!customStart || r.date >= customStart) && (!customEnd || r.date <= customEnd)) : rawTrend.slice(-(range === '7d' ? 7 : 30)); const hasEnough = sliced.length >= 2; const first = sliced[0]; const last = sliced[sliced.length - 1]; const signupTrend = hasEnough ? sliced.map(r => r.signup_count) : null; const activeTrend = hasEnough ? sliced.map(r => r.active_count) : null; // KPI values — "all" shows totals, other ranges show gain within the window const isAll = range === 'all'; const signupVal = statsLoading ? '—' : !liveStats ? '—' : isAll ? ovFmt(liveStats.signupCount) : hasEnough ? `+${ovFmt(last.signup_count - first.signup_count)}` : ovFmt(liveStats.signupCount); const childrenVal = statsLoading ? '—' : !liveStats ? '—' : isAll ? ovFmt(liveStats.childrenCount) : hasEnough ? `+${ovFmt(last.children_count - first.children_count)}` : '—'; const activeVal = statsLoading ? '—' : liveStats ? ovFmt(liveStats.activeCount) : '—'; const avgStreakVal = statsLoading ? '—' : !liveStats ? '—' : hasEnough ? `${last.avg_streak} days` : `${liveStats.avgStreak} days`; const childrenSub = isAll ? (liveStats && liveStats.childrenCount > 0 ? 'from family profiles' : 'est. from family accounts') : `new children this ${rangeLabel}`; const longestVal = statsLoading ? '—' : liveStats ? liveStats.longestStreak : d.longestStreak; return (
{/* Title row */}

Overview

How families are growing with Olivia this {rangeLabel}.

{[['all', 'All time'], ['7d', '7 days'], ['30d', '30 days'], ['custom', 'Custom']].map(([k, label]) => { const on = range === k; return ( ); })}
{range === 'custom' && (
setCustomStart(e.target.value)} max={customEnd || undefined} style={{ fontFamily: OLIVIA.fontBody, fontSize: 13, color: OV.ink, background: OV.panel, border: `1px solid ${OV.hairStrong}`, borderRadius: 10, padding: '6px 12px', outline: 'none', cursor: 'pointer', }}/> to setCustomEnd(e.target.value)} min={customStart || undefined} style={{ fontFamily: OLIVIA.fontBody, fontSize: 13, color: OV.ink, background: OV.panel, border: `1px solid ${OV.hairStrong}`, borderRadius: 10, padding: '6px 12px', outline: 'none', cursor: 'pointer', }}/>
)}
{/* KPI row */}
: null}/> : null}/> : null}/> : null}/>
{/* Growth + What's resonating */}
}>
{hasEnough ? ( <>
) : (
Not enough data to display yet.
Check back tomorrow.
)}
); } // ─── Status pill helper ─────────────────────────────────────── function StatusPill({ status, size = 'sm' }) { const s = STATUSES[status] || STATUSES.draft; const px = size === 'sm' ? '3px 8px' : '5px 10px'; const fs = size === 'sm' ? 11 : 12; return ( {s.label} ); } function PlaceholderCard() { const bar = (w, h = 10) => (
); return (
{bar('30%')}
{bar(48, 18)}
{bar('80%', 12)} {bar('55%', 12)}
{bar(52, 18)}
{bar(40, 10)}
); } // ─── List pane ──────────────────────────────────────────────── function AdminListPane({ items, totalItems, selectedId, onSelect, onNewCard, statusFilter, setStatusFilter, width = 300, kinds = [] }) { const [sortBy, setSortBy] = React.useState('newest'); const sorted = React.useMemo(() => { const copy = [...items]; return sortBy === 'alpha' ? copy.sort((a, b) => (a.task || '').localeCompare(b.task || '')) : copy.sort((a, b) => b.id.localeCompare(a.id)); }, [items, sortBy]); return (
{/* Header */}

Content library

{items.length}/{totalItems}
{/* Status filter */}
{[ ['all', 'All'], ['draft', 'Draft'], ['review', 'Review'], ['approved', 'Approved'], ].map(([k, label]) => { const on = statusFilter === k; return ( ); })}
{/* Sort toggle */}
Sort by
{[['newest', 'Newest'], ['alpha', 'A → Z']].map(([k, label]) => { const on = sortBy === k; return ( ); })}
{/* List */}
{totalItems === 0 && } {sorted.map(it => ( onSelect(it.id)} kinds={kinds} /> ))} {totalItems > 0 && items.length === 0 && (
No cards match these filters.
)}
{/* Footer — always-visible add button + count */}
{totalItems} {totalItems === 1 ? 'card' : 'cards'}
); } function ListItem({ item, selected, onSelect, kinds = [] }) { const kindObj = kinds.find(k => k.name === item.kind); const ageLabel = !kindObj ? '' : kindObj.ageRanges.includes('all') ? 'All ages' : kindObj.ageRanges.join(' · '); return ( ); } // ─── Editor pane ────────────────────────────────────────────── function AdminEditorPane({ item, onChange, onTheology, onNewCard, onDelete, kinds = [], dayNum }) { const [saved, setSaved] = React.useState(false); const saveTimer = React.useRef(null); React.useEffect(() => { setSaved(false); clearTimeout(saveTimer.current); }, [item?.id]); React.useEffect(() => () => clearTimeout(saveTimer.current), []); const triggerSave = () => { setSaved(true); clearTimeout(saveTimer.current); saveTimer.current = setTimeout(() => setSaved(false), 2000); }; if (!item) return (
No card selected
); const locked = item.status === 'approved' || item.status === 'shipped'; const setField = (k) => (v) => { if (locked && k !== 'notes') return; onChange({ [k]: v }); triggerSave(); }; const handleTheology = (id, v) => { if (locked) return; onTheology(id, v); triggerSave(); }; return (
{/* Editor header */}
{item.kind || 'New card'}
Saved {item.status === 'review' && ( {(() => { const allCleared = THEOLOGY_CHECKS.every(c => item.theology?.[c.id] === true); return ( ); })()} )} {item.status === 'draft' && (() => { const ready = (item.task || '').trim().length > 0 && (item.tip || '').trim().length > 0; return ( ); })()}
{locked && (
This card is {item.status}. Only internal notes can be edited.
)} {item.status === 'draft' && item.reviewNote && (
{item.reviewer} requested changes

{item.reviewNote}

)} {/* Metadata row */} {(() => { const kindObj = kinds.find(k => k.name === item.kind); const ageRanges = kindObj?.ageRanges || ['all']; return (