60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T12c31,'use client'; import * as React from 'react'; import { useChanged, type MotionMode } from '@/hooks/use-on-twos'; import { Sheet, Scene, Panel, PanelPair, SegmentedControl, Button, Input, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Badge, Tag, type TagStatus, Alert, Notice, ToastProvider, useToast, useOptionalToast, Skeleton, SkeletonText, EmptyState, Breadcrumb, Pagination, Metric, ToneAreaChart, ToneBarList, ToneSpark, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, } from '@/components/frame12'; // ============================================================================ // AUTHORITATIVE DETERMINISTIC FIXTURE MODEL (Fernwood Supply Co. · mulberry32(1207)) // Shared by the public homepage (`/`) and the installable Analytics Block. // ============================================================================ function mulberry32(a: number): () => number { return function () { a |= 0; a = (a + 0x6d2b79f5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } export const STORE = 'Fernwood Supply Co.'; export const END_LABEL = 'Oct 31, 2026'; export type RangeDays = 7 | 30 | 90; export const RANGES: RangeDays[] = [7, 30, 90]; export const DEFAULT_RANGE: RangeDays = 30; export type CheckoutSegmentId = 'returning-vip' | 'first-time-mobile' | 'high-aov-desktop'; export interface CheckoutSegmentMeta { id: CheckoutSegmentId; name: string; shortName: string; description: string; } export const CHECKOUT_SEGMENTS: CheckoutSegmentMeta[] = [ { id: 'returning-vip', name: 'Returning VIP & Loyalty', shortName: 'Returning VIP', description: 'Repeat buyers with 2+ prior orders and saved payment credentials.', }, { id: 'first-time-mobile', name: 'First-Time Mobile Checkout', shortName: 'First-Time Mobile', description: 'New mobile sessions re-engaged via SMS, push, or exit-intent prompts.', }, { id: 'high-aov-desktop', name: 'High-AOV Desktop Carts', shortName: 'High-AOV Desktop', description: 'Desktop baskets over $150 completing checkout after restock or cart reminders.', }, ]; export interface InterventionMeta { id: string; name: string; channel: string; triggerWindow: string; base: number; trend: number; margin: number; segmentWeights: Record; } export const INTERVENTIONS: InterventionMeta[] = [ { id: 'cart', name: 'Abandoned-cart email', channel: 'Email', triggerWindow: '1h post-abandon', base: 1150, trend: 0.15, margin: 0.38, segmentWeights: { 'returning-vip': 0.44, 'first-time-mobile': 0.31, 'high-aov-desktop': 0.25, }, }, { id: 'exit', name: 'Exit-intent offer', channel: 'On-site Modal', triggerWindow: 'Session exit', base: 700, trend: 0.25, margin: 0.22, segmentWeights: { 'returning-vip': 0.24, 'first-time-mobile': 0.52, 'high-aov-desktop': 0.24, }, }, { id: 'stock', name: 'Back-in-stock alert', channel: 'SMS & Push', triggerWindow: 'Inventory restock', base: 520, trend: 0.05, margin: 0.41, segmentWeights: { 'returning-vip': 0.48, 'first-time-mobile': 0.28, 'high-aov-desktop': 0.24, }, }, { id: 'price', name: 'Price-drop notice', channel: 'Email & SMS', triggerWindow: 'Catalog markdown', base: 430, trend: -0.1, margin: 0.18, segmentWeights: { 'returning-vip': 0.34, 'first-time-mobile': 0.42, 'high-aov-desktop': 0.24, }, }, { id: 'upsell', name: 'Post-purchase upsell', channel: 'Checkout Receipt', triggerWindow: 'Immediate post-pay', base: 300, trend: 0.3, margin: 0.46, segmentWeights: { 'returning-vip': 0.51, 'first-time-mobile': 0.22, 'high-aov-desktop': 0.27, }, }, ]; export interface DayDatum { ms: number; dayKey: string; label: string; long: string; total: number; byId: Record; profitById: Record; bySegment: Record; profitBySegment: Record; byIdAndSegment: Record>; profitByIdAndSegment: Record>; profit: number; lift: number; topInterventionId: string; topSegmentId: CheckoutSegmentId; evidenceNote: string; } export interface InterventionRow { id: string; name: string; channel: string; triggerWindow: string; margin: number; value: number; prevValue: number; deltaPct: number; profit: number; share: number; } export interface SegmentRow { id: CheckoutSegmentId; name: string; shortName: string; description: string; revenue: number; prevRevenue: number; deltaPct: number; profit: number; share: number; } export interface RangeSummary { range: RangeDays; days: DayDatum[]; prevDays: DayDatum[]; revenue: number; prevRevenue: number; revenueDelta: number; profit: number; prevProfit: number; profitDelta: number; netMarginPct: number; prevNetMarginPct: number; lift: number; prevLift: number; liftDelta: number; rows: InterventionRow[]; segments: SegmentRow[]; leader: string; peak: DayDatum; prevPeak: DayDatum; } const DAYS = 180; const END = Date.UTC(2026, 9, 31); const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; function partitionBySegment( amount: number, weights: Record, ): Record { const vip = Math.round(amount * weights['returning-vip']); const mobile = Math.round(amount * weights['first-time-mobile']); const desktop = amount - vip - mobile; return { 'returning-vip': vip, 'first-time-mobile': mobile, 'high-aov-desktop': desktop, }; } function buildDays(): DayDatum[] { const rnd = mulberry32(1207); const weekly = [1.16, 0.93, 0.95, 0.97, 1.02, 1.12, 1.2]; // Sun..Sat const out: DayDatum[] = []; for (let t = 0; t < DAYS; t++) { const ms = END - (DAYS - 1 - t) * 864e5; const d = new Date(ms); const wk = weekly[d.getUTCDay()]; const byId: Record = {}; const profitById: Record = {}; const bySegment: Record = { 'returning-vip': 0, 'first-time-mobile': 0, 'high-aov-desktop': 0, }; const profitBySegment: Record = { 'returning-vip': 0, 'first-time-mobile': 0, 'high-aov-desktop': 0, }; const byIdAndSegment: Record> = {}; const profitByIdAndSegment: Record> = {}; let total = 0; let rawProfit = 0; for (const it of INTERVENTIONS) { const trend = 1 + it.trend * (t / (DAYS - 1)); const noise = 1 + (rnd() - 0.5) * 0.36; const boost = it.id === 'exit' && t >= DAYS - 9 ? 2.05 : 1; const v = Math.round(it.base * trend * wk * noise * boost); byId[it.id] = v; total += v; rawProfit += v * it.margin; } const totalProfit = Math.round(rawProfit); // Reconcile per-intervention integer profit so sum(profitById) === totalProfit let allocatedProfit = 0; for (let i = 0; i < INTERVENTIONS.length; i++) { const it = INTERVENTIONS[i]; const p = i === INTERVENTIONS.length - 1 ? totalProfit - allocatedProfit : Math.round(byId[it.id] * it.margin); profitById[it.id] = p; allocatedProfit += p; const segRev = partitionBySegment(byId[it.id], it.segmentWeights); const segProf = partitionBySegment(p, it.segmentWeights); byIdAndSegment[it.id] = segRev; profitByIdAndSegment[it.id] = segProf; bySegment['returning-vip'] += segRev['returning-vip']; bySegment['first-time-mobile'] += segRev['first-time-mobile']; bySegment['high-aov-desktop'] += segRev['high-aov-desktop']; profitBySegment['returning-vip'] += segProf['returning-vip']; profitBySegment['first-time-mobile'] += segProf['first-time-mobile']; profitBySegment['high-aov-desktop'] += segProf['high-aov-desktop']; } let lift = 0.48 + 0.1 * (t / (DAYS - 1)) + (rnd() - 0.5) * 0.12; if (t >= DAYS - 7) lift -= 0.09; let topInterventionId = INTERVENTIONS[0].id; for (const it of INTERVENTIONS) { if (byId[it.id] > byId[topInterventionId]) { topInterventionId = it.id; } } let topSegmentId: CheckoutSegmentId = 'returning-vip'; for (const seg of CHECKOUT_SEGMENTS) { if (bySegment[seg.id] > bySegment[topSegmentId]) { topSegmentId = seg.id; } } const monthName = MONTHS[d.getUTCMonth()]; const dayNum = d.getUTCDate(); const yearNum = d.getUTCFullYear(); const dayKey = `${yearNum}-${String(d.getUTCMonth() + 1).padStart(2, '0')}-${String(dayNum).padStart(2, '0')}`; const evidenceNote = t >= DAYS - 9 ? 'Exit-intent shipping-threshold prompt active (2.05x session recovery multiplier; holdout lift softened -0.09 pp in final 7d).' : d.getUTCDay() === 0 || d.getUTCDay() === 6 ? 'Weekend checkout cadence peak; abandoned-cart and back-in-stock dispatches led recovery volume.' : 'Standard weekday dispatch cadence across 10% randomized holdout control.'; out.push({ ms, dayKey, label: `${monthName} ${dayNum}`, long: `${monthName} ${dayNum}, ${yearNum}`, total, byId, profitById, bySegment, profitBySegment, byIdAndSegment, profitByIdAndSegment, profit: totalProfit, lift, topInterventionId, topSegmentId, evidenceNote, }); } return out; } export const DAYS_DATA: DayDatum[] = buildDays(); function sum(a: T[], f: (x: T) => number): number { let s = 0; for (const x of a) s += f(x); return s; } export function summarize(range: RangeDays): RangeSummary { const cur = DAYS_DATA.slice(DAYS - range); const prev = DAYS_DATA.slice(DAYS - 2 * range, DAYS - range); const revenue = sum(cur, (d) => d.total); const prevRevenue = sum(prev, (d) => d.total); const profit = sum(cur, (d) => d.profit); const prevProfit = sum(prev, (d) => d.profit); const lift = sum(cur, (d) => d.lift) / cur.length; const prevLift = sum(prev, (d) => d.lift) / prev.length; const rows: InterventionRow[] = INTERVENTIONS.map((it) => { const val = sum(cur, (d) => d.byId[it.id]); const prevVal = sum(prev, (d) => d.byId[it.id]); const prof = sum(cur, (d) => d.profitById[it.id]); return { id: it.id, name: it.name, channel: it.channel, triggerWindow: it.triggerWindow, margin: it.margin, value: val, prevValue: prevVal, deltaPct: prevVal > 0 ? (val - prevVal) / prevVal : 0, profit: prof, share: revenue > 0 ? val / revenue : 0, }; }).sort((a, b) => b.value - a.value); const segments: SegmentRow[] = CHECKOUT_SEGMENTS.map((seg) => { const rev = sum(cur, (d) => d.bySegment[seg.id]); const prevRev = sum(prev, (d) => d.bySegment[seg.id]); const prof = sum(cur, (d) => d.profitBySegment[seg.id]); return { id: seg.id, name: seg.name, shortName: seg.shortName, description: seg.description, revenue: rev, prevRevenue: prevRev, deltaPct: prevRev > 0 ? (rev - prevRev) / prevRev : 0, profit: prof, share: revenue > 0 ? rev / revenue : 0, }; }); let peak = cur[0]; for (const d of cur) if (d.total > peak.total) peak = d; let prevPeak = prev[0]; for (const d of prev) if (d.total > prevPeak.total) prevPeak = d; return { range, days: cur, prevDays: prev, revenue, prevRevenue, revenueDelta: (revenue - prevRevenue) / prevRevenue, profit, prevProfit, profitDelta: (profit - prevProfit) / prevProfit, netMarginPct: revenue > 0 ? (profit / revenue) * 100 : 0, prevNetMarginPct: prevRevenue > 0 ? (prevProfit / prevRevenue) * 100 : 0, lift, prevLift, liftDelta: Number((Number(lift.toFixed(2)) - Number(prevLift.toFixed(2))).toFixed(2)), rows, segments, leader: rows[0].id, peak, prevPeak, }; } export const SUMMARIES: Record = { 7: summarize(7), 30: summarize(30), 90: summarize(90), }; export const fmtMoney = (v: number): string => '$' + Math.round(v).toLocaleString('en-US'); export const fmtMoneyShort = (v: number): string => { if (Math.abs(v) >= 1000) { const k = v / 1000; return '$' + (Number.isInteger(k) ? k.toFixed(0) : k.toFixed(1)) + 'k'; } return '$' + Math.round(v); }; export const fmtPct = (v: number): string => (Math.abs(v) * 100).toFixed(1) + '%'; export const fmtSignedPct = (v: number): string => (v >= 0 ? '+' : '−') + (Math.abs(v) * 100).toFixed(1) + '%'; export const fmtPP = (v: number): string => (v >= 0 ? '+' : '−') + Math.abs(v).toFixed(2) + ' pp'; export const fmtPPAbs = (v: number): string => Math.abs(v).toFixed(2) + ' pp'; export const rangeLabel = (r: number): string => `${r} days`; export const PROFIT_NOTE = 'Margin on recovered orders, after offer costs'; export const LIFT_NOTE = 'Checkout conversion vs. holdout group'; export const RANGE_OPTIONS: Array<{ value: RangeDays; label: string; unit: string }> = RANGES.map( (r) => ({ value: r, label: String(r), unit: 'days', }), ); // ============================================================================ // REUSABLE CORE STORYBOARD SCENES (C-01..C-04) // Shared between the homepage (`/`) and the standalone Analytics Block. // ============================================================================ export type AnalyticsDatasetState = 'populated' | 'loading' | 'empty' | 'error'; export type AnalyticsComparisonMode = 'intervention' | 'prior-period'; export interface RevenueRecoveryCoreScenesProps { range: RangeDays; focus: string | null; onSelectFocus: (nextId: string | null) => void; motion?: MotionMode; idPrefix?: string; chartHeight?: number; datasetState?: AnalyticsDatasetState; comparisonMode?: AnalyticsComparisonMode; onRestorePopulated?: () => void; } export function RevenueRecoveryCoreScenes({ range, focus, onSelectFocus, motion = 'stepped', idPrefix, chartHeight = 320, datasetState = 'populated', comparisonMode = 'intervention', onRestorePopulated, }: RevenueRecoveryCoreScenesProps) { const autoId = React.useId().replace(/[^a-zA-Z0-9_-]/g, ''); const resolvedIdPrefix = idPrefix ?? `f12-recovery-scenes-${autoId}`; const changed = useChanged(range); const s = SUMMARIES[range]; const focusItem = focus ? INTERVENTIONS.find((i) => i.id === focus) ?? null : null; const isLoading = datasetState === 'loading'; const isEmpty = datasetState === 'empty'; const chartData = React.useMemo(() => { if (isEmpty) return []; return s.days.map((d, idx) => { let compareValue: number | undefined; if (comparisonMode === 'prior-period' && s.prevDays[idx]) { compareValue = s.prevDays[idx].total; } else if (focusItem) { compareValue = d.byId[focusItem.id]; } return { label: d.label, longLabel: d.long, value: d.total, compareValue, }; }); }, [s.days, s.prevDays, focusItem, comparisonMode, isEmpty]); const compareLabel = comparisonMode === 'prior-period' ? `Prior ${range}d window` : focusItem ? focusItem.name : undefined; const barItems = React.useMemo(() => { if (isEmpty) return []; return s.rows.map((r, idx) => ({ id: r.id, name: r.name, value: r.value, formattedValue: fmtMoney(r.value), share: r.share, badge: idx === 0 ? 'Top performer' : undefined, })); }, [s.rows, isEmpty]); const displayRevenue = isEmpty ? 0 : s.revenue; const displayRevenueDelta = isEmpty ? 0 : s.revenueDelta; const displayProfit = isEmpty ? 0 : s.profit; const displayProfitDelta = isEmpty ? 0 : s.profitDelta; const displayLift = isEmpty ? 0 : s.lift; const displayLiftDelta = isEmpty ? 0 : s.liftDelta; return ( <> {isLoading ? (

) : ( <>

{compareLabel ? (

) : ( d.profit)} label="Daily profit" rangeKey={range} motion={motion} /> } /> ), }} bottom={{ label: 'Conversion lift', children: isLoading ? (

) : ( d.lift)} label="Daily lift" rangeKey={range} motion={motion} /> } /> ), }} /> {isLoading ? (

) : isEmpty ? ( ) : ( )} ); } // ============================================================================ // STANDALONE INSTALLABLE ANALYTICS APPLICATION BLOCK (`AnalyticsDashboard`) // Combines Expressive Storyboard (C-01..C-04) with Quiet Supporting Ledgers. // ============================================================================ export type LedgerSortMode = 'date-desc' | 'revenue-desc' | 'profit-desc'; const DATASET_STATE_OPTIONS: Array<{ value: AnalyticsDatasetState; label: string; unit: string }> = [ { value: 'populated', label: 'LIVE', unit: 'fixture' }, { value: 'loading', label: 'LOAD', unit: 'skel' }, { value: 'empty', label: 'ZERO', unit: 'empty' }, { value: 'error', label: 'ERR', unit: '503' }, ]; const COMPARISON_MODE_OPTIONS: Array<{ value: AnalyticsComparisonMode; label: string; unit: string; }> = [ { value: 'intervention', label: 'FOCUS', unit: 'c-04' }, { value: 'prior-period', label: 'PREV', unit: 'period' }, ]; const LEDGER_PAGE_SIZE = 10; export interface AnalyticsDashboardProps { /** Default observation window in days (`30` by default). */ defaultRange?: RangeDays; /** Default focused intervention ID (`null` by default). */ defaultFocusId?: string | null; /** Default chart comparison mode (`'intervention'` by default). */ defaultComparisonMode?: AnalyticsComparisonMode; /** Default dataset simulation state (`'populated'` by default). */ defaultDatasetState?: AnalyticsDatasetState; /** Alias for `defaultRange`. */ initialRange?: RangeDays; /** Alias for `defaultFocusId`. */ initialFocusId?: string | null; /** Alias for `defaultComparisonMode`. */ initialComparisonMode?: AnalyticsComparisonMode; /** Alias for `defaultDatasetState`. */ initialDatasetState?: AnalyticsDatasetState; /** Motion grammar override (`'stepped'` 12fps by default). */ motion?: MotionMode; /** Theme override (`'light'` or `'dark'`). */ theme?: 'light' | 'dark'; /** Additional CSS class names for the root ``. */ className?: string; /** Show interactive sandbox state switcher (`true` by default). */ showSandboxControls?: boolean; /** Deterministic DOM ID prefix (`'f12-analytics-'` by default). */ idPrefix?: string; /** Optional slot rendered below the sheet header. */ headerSlot?: React.ReactNode; /** Optional slot rendered at the bottom of the sheet. */ footerSlot?: React.ReactNode; } function AnalyticsDashboardInner({ defaultRange, defaultFocusId, defaultComparisonMode, defaultDatasetState, initialRange, initialFocusId, initialComparisonMode, initialDatasetState, motion = 'stepped', theme, className, showSandboxControls = true, idPrefix, headerSlot, footerSlot, }: AnalyticsDashboardProps) { const autoId = React.useId().replace(/[^a-zA-Z0-9_-]/g, ''); const resolvedIdPrefix = idPrefix ?? `f12-analytics-${autoId}`; const { toast } = useToast(); const [range, setRange] = React.useState( defaultRange ?? initialRange ?? DEFAULT_RANGE, ); const [focus, setFocus] = React.useState( defaultFocusId !== undefined ? defaultFocusId : (initialFocusId ?? null), ); const [comparisonMode, setComparisonMode] = React.useState( defaultComparisonMode ?? initialComparisonMode ?? 'intervention', ); const [datasetState, setDatasetState] = React.useState( defaultDatasetState ?? initialDatasetState ?? 'populated', ); const [segmentFilter, setSegmentFilter] = React.useState('all'); const [ledgerSearch, setLedgerSearch] = React.useState(''); const [ledgerSort, setLedgerSort] = React.useState('date-desc'); const [ledgerPage, setLedgerPage] = React.useState(1); const [inspectedDayKey, setInspectedDayKey] = React.useState(null); const pendingFocusTargetIdRef = React.useRef(null); React.useEffect(() => { const targetId = pendingFocusTargetIdRef.current; if (!targetId) return; pendingFocusTargetIdRef.current = null; const raf = window.requestAnimationFrame(() => { const el = document.getElementById(targetId); if (el && typeof el.focus === 'function') { el.focus(); } }); return () => window.cancelAnimationFrame(raf); }, [range, focus, comparisonMode, datasetState, segmentFilter, ledgerSearch, ledgerSort, ledgerPage, inspectedDayKey]); const s = SUMMARIES[range]; const focusItem = focus ? INTERVENTIONS.find((i) => i.id === focus) ?? null : null; const isLoading = datasetState === 'loading'; const isEmpty = datasetState === 'empty'; const isError = datasetState === 'error'; // Reset pagination to page 1 when range or filters change const handleRangeChange = (nextRange: RangeDays) => { setRange(nextRange); setLedgerPage(1); }; const handleFocusSelect = (nextId: string | null) => { setFocus(nextId); setLedgerPage(1); }; const handleSegmentSelect = (nextSeg: CheckoutSegmentId | 'all') => { setSegmentFilter(nextSeg); setLedgerPage(1); }; const handleRestorePopulated = () => { pendingFocusTargetIdRef.current = `${resolvedIdPrefix}-rng-${range}`; setDatasetState('populated'); toast({ status: 'success', title: 'Restored Fernwood Supply Co. telemetry', description: `Loaded ${range}-day deterministic recovery fixture through ${END_LABEL}.`, }); }; const isDrilledIn = focusItem !== null || segmentFilter !== 'all'; const handleClearDrillDown = () => { // The breadcrumb button that triggered this turns back into plain text, so hand focus to the // dashboard heading (the level the reader just stepped up to) before it unmounts. const targetId = `${resolvedIdPrefix}-title`; document.getElementById(targetId)?.focus({ preventScroll: true }); pendingFocusTargetIdRef.current = targetId; setFocus(null); setSegmentFilter('all'); setLedgerPage(1); }; const handleResetView = () => { const targetId = `${resolvedIdPrefix}-rng-${DEFAULT_RANGE}`; pendingFocusTargetIdRef.current = null; setRange(DEFAULT_RANGE); setFocus(null); setComparisonMode('intervention'); setDatasetState('populated'); setSegmentFilter('all'); setLedgerSearch(''); setLedgerSort('date-desc'); setLedgerPage(1); setInspectedDayKey(null); window.requestAnimationFrame(() => { document.getElementById(targetId)?.focus(); }); toast({ status: 'info', title: 'Reset analytics view', description: 'Restored 30-day window, all interventions, all checkout segments, and default date sorting.', }); }; // Reconciled Segment Breakdown scoped to either all interventions or the focused intervention const scopedSegments = React.useMemo(() => { if (isEmpty) { return CHECKOUT_SEGMENTS.map((seg) => ({ id: seg.id, name: seg.name, shortName: seg.shortName, description: seg.description, revenue: 0, prevRevenue: 0, deltaPct: 0, profit: 0, share: 0, })); } if (!focusItem) { return s.segments; } const scopeRev = sum(s.days, (d) => d.byId[focusItem.id]); return CHECKOUT_SEGMENTS.map((seg) => { const rev = sum(s.days, (d) => d.byIdAndSegment[focusItem.id][seg.id]); const prevRev = sum(s.prevDays, (d) => d.byIdAndSegment[focusItem.id][seg.id]); const prof = sum(s.days, (d) => d.profitByIdAndSegment[focusItem.id][seg.id]); return { id: seg.id, name: seg.name, shortName: seg.shortName, description: seg.description, revenue: rev, prevRevenue: prevRev, deltaPct: prevRev > 0 ? (rev - prevRev) / prevRev : 0, profit: prof, share: scopeRev > 0 ? rev / scopeRev : 0, }; }); }, [s, focusItem, isEmpty]); const scopedTotalRevenue = React.useMemo( () => sum(scopedSegments, (seg) => seg.revenue), [scopedSegments], ); const scopedTotalProfit = React.useMemo( () => sum(scopedSegments, (seg) => seg.profit), [scopedSegments], ); // Reconciled Period Comparison scoped to either all interventions or the focused intervention const scopedPeriod = React.useMemo(() => { if (!focusItem) { return { revenue: s.revenue, prevRevenue: s.prevRevenue, revenueDelta: s.revenueDelta, profit: s.profit, prevProfit: s.prevProfit, profitDelta: s.profitDelta, netMarginPct: s.netMarginPct, prevNetMarginPct: s.prevNetMarginPct, peakLabel: s.peak.label, peakValue: s.peak.total, prevPeakLabel: s.prevPeak.label, prevPeakValue: s.prevPeak.total, }; } const rev = sum(s.days, (d) => d.byId[focusItem.id]); const prevRev = sum(s.prevDays, (d) => d.byId[focusItem.id]); const prof = sum(s.days, (d) => d.profitById[focusItem.id]); const prevProf = sum(s.prevDays, (d) => d.profitById[focusItem.id]); let peakDay = s.days[0]; for (const d of s.days) { if (d.byId[focusItem.id] > peakDay.byId[focusItem.id]) peakDay = d; } let prevPeakDay = s.prevDays[0]; for (const d of s.prevDays) { if (d.byId[focusItem.id] > prevPeakDay.byId[focusItem.id]) prevPeakDay = d; } return { revenue: rev, prevRevenue: prevRev, revenueDelta: prevRev > 0 ? (rev - prevRev) / prevRev : 0, profit: prof, prevProfit: prevProf, profitDelta: prevProf > 0 ? (prof - prevProf) / prevProf : 0, netMarginPct: rev > 0 ? (prof / rev) * 100 : 0, prevNetMarginPct: prevRev > 0 ? (prevProf / prevRev) * 100 : 0, peakLabel: peakDay.label, peakValue: peakDay.byId[focusItem.id], prevPeakLabel: prevPeakDay.label, prevPeakValue: prevPeakDay.byId[focusItem.id], }; }, [s, focusItem]); // Reconciled Daily Recovery Ledger rows (filtered by intervention, segment, and search query) const ledgerRows = React.useMemo(() => { if (isEmpty) return []; const q = ledgerSearch.trim().toLowerCase(); const mapped = s.days.map((d) => { let rowRevenue: number; let rowProfit: number; if (focusItem && segmentFilter !== 'all') { rowRevenue = d.byIdAndSegment[focusItem.id][segmentFilter]; rowProfit = d.profitByIdAndSegment[focusItem.id][segmentFilter]; } else if (focusItem) { rowRevenue = d.byId[focusItem.id]; rowProfit = d.profitById[focusItem.id]; } else if (segmentFilter !== 'all') { rowRevenue = d.bySegment[segmentFilter]; rowProfit = d.profitBySegment[segmentFilter]; } else { rowRevenue = d.total; rowProfit = d.profit; } let activeInterventionMeta = focusItem; if (!activeInterventionMeta) { let bestIntervention = INTERVENTIONS[0]; let bestInterventionRev = -1; for (const it of INTERVENTIONS) { const candidateRev = segmentFilter !== 'all' ? d.byIdAndSegment[it.id][segmentFilter] : d.byId[it.id]; if (candidateRev > bestInterventionRev) { bestInterventionRev = candidateRev; bestIntervention = it; } } activeInterventionMeta = bestIntervention; } let activeSegmentMeta = segmentFilter !== 'all' ? CHECKOUT_SEGMENTS.find((seg) => seg.id === segmentFilter) ?? null : null; if (!activeSegmentMeta) { let bestSegment = CHECKOUT_SEGMENTS[0]; let bestSegmentRev = -1; for (const seg of CHECKOUT_SEGMENTS) { const candidateRev = focusItem ? d.byIdAndSegment[focusItem.id][seg.id] : d.bySegment[seg.id]; if (candidateRev > bestSegmentRev) { bestSegmentRev = candidateRev; bestSegment = seg; } } activeSegmentMeta = bestSegment; } const marginPct = rowRevenue > 0 ? (rowProfit / rowRevenue) * 100 : 0; const candidateInterventions = focusItem ? [focusItem] : INTERVENTIONS; const contributingInterventions = candidateInterventions.filter((it) => { const rev = segmentFilter !== 'all' ? d.byIdAndSegment[it.id][segmentFilter] : d.byId[it.id]; return rev > 0; }); const candidateSegments = segmentFilter !== 'all' ? CHECKOUT_SEGMENTS.filter((seg) => seg.id === segmentFilter) : CHECKOUT_SEGMENTS; const contributingSegments = candidateSegments.filter((seg) => { const rev = focusItem ? d.byIdAndSegment[focusItem.id][seg.id] : d.bySegment[seg.id]; return rev > 0; }); return { day: d, dayKey: d.dayKey, label: d.label, longLabel: d.long, revenue: rowRevenue, profit: rowProfit, marginPct, lift: d.lift, interventionName: activeInterventionMeta.name, channel: activeInterventionMeta.channel, segmentName: activeSegmentMeta.shortName, evidenceNote: d.evidenceNote, contributingInterventions, contributingSegments, }; }); const filtered = q ? mapped.filter( (r) => r.label.toLowerCase().includes(q) || r.longLabel.toLowerCase().includes(q) || r.dayKey.toLowerCase().includes(q) || r.interventionName.toLowerCase().includes(q) || r.channel.toLowerCase().includes(q) || r.segmentName.toLowerCase().includes(q) || r.evidenceNote.toLowerCase().includes(q) || r.contributingInterventions.some( (it) => it.name.toLowerCase().includes(q) || it.channel.toLowerCase().includes(q), ) || r.contributingSegments.some( (seg) => seg.name.toLowerCase().includes(q) || seg.shortName.toLowerCase().includes(q), ), ) : mapped; const sorted = [...filtered]; if (ledgerSort === 'date-desc') { sorted.sort((a, b) => b.day.ms - a.day.ms); } else if (ledgerSort === 'revenue-desc') { sorted.sort((a, b) => b.revenue - a.revenue || b.day.ms - a.day.ms); } else if (ledgerSort === 'profit-desc') { sorted.sort((a, b) => b.profit - a.profit || b.day.ms - a.day.ms); } return sorted; }, [s.days, focusItem, segmentFilter, ledgerSearch, ledgerSort, isEmpty]); const totalLedgerRevenue = React.useMemo( () => sum(ledgerRows, (r) => r.revenue), [ledgerRows], ); const totalLedgerProfit = React.useMemo( () => sum(ledgerRows, (r) => r.profit), [ledgerRows], ); const totalLedgerMarginPct = totalLedgerRevenue > 0 ? (totalLedgerProfit / totalLedgerRevenue) * 100 : 0; const avgLedgerLift = ledgerRows.length > 0 ? sum(ledgerRows, (r) => r.lift) / ledgerRows.length : 0; const totalPages = Math.max(1, Math.ceil(ledgerRows.length / LEDGER_PAGE_SIZE)); const safePage = Math.min(ledgerPage, totalPages); const pagedLedgerRows = React.useMemo( () => ledgerRows.slice( (safePage - 1) * LEDGER_PAGE_SIZE, safePage * LEDGER_PAGE_SIZE, ), [ledgerRows, safePage], ); const inspectedDay = React.useMemo( () => (inspectedDayKey ? s.days.find((d) => d.dayKey === inspectedDayKey) ?? null : null), [inspectedDayKey, s.days], ); const hasActiveFilters = focus !== null || segmentFilter !== 'all' || ledgerSearch.trim().length > 0 || ledgerSort !== 'date-desc'; const postureTag: { status: TagStatus; label: string } = isError ? { status: 'danger', label: 'WAREHOUSE FAULT' } : isEmpty ? { status: 'neutral', label: 'EMPTY SANDBOX' } : isLoading ? { status: 'info', label: 'LOADING TELEMETRY' } : { status: 'success', label: 'RECONCILED LEDGER' }; const activeScopeBreadcrumbLabel = focusItem ? `${range}d · ${focusItem.name}` : segmentFilter !== 'all' ? `${range}d · ${CHECKOUT_SEGMENTS.find((seg) => seg.id === segmentFilter)?.shortName}` : `${range}d Window (${s.days[0].label} – ${s.days[s.days.length - 1].label})`; return ( {/* ===================================================================== SHEET HEADER */}

{STORE} · Revenue Recovery Analytics {postureTag.label} {`Through ${END_LABEL}`}

Revenue Recovery

Expressive storyboard establishing shot{' '} (C-01–C-04) {' '} paired with Quiet period-comparison, checkout-segment, and daily attribution ledgers reconciled from a single{' '} mulberry32(1207) fixture.

{showSandboxControls ? (

) : null}

{headerSlot} {/* ===================================================================== FAULT BANNER */} {isError ? ( Retry attribution sync } > Upstream holdout reconciliation worker timed out while refreshing checkout attribution. Cached local figures remain visible below; click Retry attribution sync to restore live sandbox state. ) : null} {/* ===================================================================== EXPRESSIVE STORYBOARD (C-01..C-04) */} { handleFocusSelect(nextId); if (nextId !== null && comparisonMode === 'prior-period') { setComparisonMode('intervention'); } }} motion={motion} idPrefix={resolvedIdPrefix} chartHeight={320} datasetState={datasetState} comparisonMode={comparisonMode} onRestorePopulated={handleRestorePopulated} /> {/* ===================================================================== QUIET OPERATIONAL ANALYTICS: PERIOD COMPARISON & SEGMENT BREAKDOWN */} {isLoading ? (

) : (

PERIOD COMPARISON · CURRENT {range}D VS. PRIOR {range}D
{focusItem ? `SCOPED: ${focusItem.name.toUpperCase()}` : 'ALL INTERVENTIONS'} {comparisonMode === 'prior-period' ? 'CHART OVERLAY ACTIVE' : 'QUIET LEDGER'}

Direct window-over-window reconciliation comparing the active {range}-day window ({s.days[0].label} – {s.days[s.days.length - 1].label}) against the immediately preceding {range}-day baseline ({s.prevDays[0].label} –{' '} {s.prevDays[s.prevDays.length - 1].label}) {focusItem ? ` for ${focusItem.name}` : ''}.
Reconciled {range}-day period comparison through {END_LABEL} {focusItem ? ` (${focusItem.name})` : ''}. Metric {`Current (${range}d)`} {`Prior (${range}d)`} Delta Recovered revenue {fmtMoney(isEmpty ? 0 : scopedPeriod.revenue)} {fmtMoney(isEmpty ? 0 : scopedPeriod.prevRevenue)} = 0 ? 'success' : 'warning' } > {isEmpty ? '+0.0%' : fmtSignedPct(scopedPeriod.revenueDelta)} Incremental profit {fmtMoney(isEmpty ? 0 : scopedPeriod.profit)} {fmtMoney(isEmpty ? 0 : scopedPeriod.prevProfit)} = 0 ? 'success' : 'warning' } > {isEmpty ? '+0.0%' : fmtSignedPct(scopedPeriod.profitDelta)} Net profit margin {`${(isEmpty ? 0 : scopedPeriod.netMarginPct).toFixed(1)}%`} {`${(isEmpty ? 0 : scopedPeriod.prevNetMarginPct).toFixed(1)}%`} {(() => { if (isEmpty) return '0.0 pp'; const curMargin = Number(scopedPeriod.netMarginPct.toFixed(1)); const prevMargin = Number(scopedPeriod.prevNetMarginPct.toFixed(1)); const marginDelta = Number((curMargin - prevMargin).toFixed(1)); return `${marginDelta > 0 ? '+' : ''}${marginDelta.toFixed(1)} pp`; })()} Conversion lift vs. holdout {isEmpty ? '+0.00 pp' : fmtPP(s.lift)} {isEmpty ? '+0.00 pp' : fmtPP(s.prevLift)} {(() => { const displayedLiftDelta = isEmpty ? 0 : Number((Number(s.lift.toFixed(2)) - Number(s.prevLift.toFixed(2))).toFixed(2)); return ( 0 ? 'success' : 'warning' } > {isEmpty || Math.abs(displayedLiftDelta) < 0.005 ? '0.00 pp' : fmtPP(displayedLiftDelta)} ); })()} Peak daily recovery {isEmpty ? '$0' : `${scopedPeriod.peakLabel} · ${fmtMoney(scopedPeriod.peakValue)}`} {isEmpty ? '$0' : `${scopedPeriod.prevPeakLabel} · ${fmtMoney(scopedPeriod.prevPeakValue)}`} {isEmpty ? '+0.0%' : fmtSignedPct( (scopedPeriod.peakValue - scopedPeriod.prevPeakValue) / scopedPeriod.prevPeakValue, )}

Every trigger withholds a 10% randomized holdout cohort. Incremental profit deducts channel delivery and discount costs per intervention (Abandoned-cart 38% margin, Exit-intent 22%, Back-in-stock 41%, Price-drop 18%, Post-purchase upsell 46%).
)} {isLoading ? (

) : (

CHECKOUT SEGMENT BREAKDOWN
{focusItem ? `SCOPED: ${focusItem.name.toUpperCase()}` : 'ALL INTERVENTIONS'}

Cohort and device attribution reconciled to 100% of{' '} {focusItem ? `${focusItem.name} revenue` : `total ${range}-day recovered revenue`}{' '} ({fmtMoney(scopedTotalRevenue)}). Select a segment to filter the daily ledger.

{scopedSegments.map((seg) => ( ))}
Checkout segment breakdown for {focusItem ? focusItem.name : `all interventions`} ( {range} days). Segment Recovered Profit Share vs. Prior {scopedSegments.map((seg) => ( {seg.name}
{seg.description}
{fmtMoney(seg.revenue)} {fmtMoney(seg.profit)} {`${(seg.share * 100).toFixed(1)}%`} = 0 ? 'success' : 'warning'}> {isEmpty ? '+0.0%' : fmtSignedPct(seg.deltaPct)} ))} {focusItem ? `Total (${focusItem.name})` : `Total (${range} days)`} {fmtMoney(scopedTotalRevenue)} {fmtMoney(scopedTotalProfit)} {isEmpty ? '0.0%' : '100.0%'} {isEmpty ? '+0.0%' : fmtSignedPct( focusItem ? s.rows.find((r) => r.id === focusItem.id)?.deltaPct ?? 0 : s.revenueDelta, )}

)} {/* ===================================================================== QUIET OPERATIONAL ANALYTICS: FILTERABLE DAILY RECOVERY LEDGER */} {isLoading ? (

) : (

DAILY RECOVERY & ATTRIBUTION EVIDENCE LEDGER
{`${ledgerRows.length} OF ${isEmpty ? 0 : s.days.length} DAYS`} {focusItem ? ( {`INTERVENTION: ${focusItem.name.toUpperCase()}`} ) : null} {segmentFilter !== 'all' ? ( {`SEGMENT: ${CHECKOUT_SEGMENTS.find((seg) => seg.id === segmentFilter)?.shortName.toUpperCase()}`} ) : null}
{hasActiveFilters ? ( ) : null}

Filter daily recovery records by date, intervention, or checkout segment. Unfiltered column totals reconcile exactly with C-01 ({fmtMoney(isEmpty ? 0 : s.revenue)}) and C-02 ({fmtMoney(isEmpty ? 0 : s.profit)}).

{ setLedgerSearch(e.target.value); setLedgerPage(1); }} />
{ledgerRows.length === 0 ? ( Load sample data ) : ( ) } /> ) : ( <> Daily recovery attribution ledger ({ledgerRows.length} matching day(s) in{' '} {range}-day window; totals reconcile with C-01..C-04). Date {focusItem ? 'Scoped Intervention' : 'Top Intervention'} {segmentFilter !== 'all' ? 'Scoped Segment' : 'Lead Segment'} Recovered Revenue Incremental Profit Net Margin Lift vs. Holdout Evidence {pagedLedgerRows.map((row) => ( {row.label} {row.interventionName} {` · ${row.channel}`} {row.segmentName} {fmtMoney(row.revenue)} {fmtMoney(row.profit)} {`${row.marginPct.toFixed(1)}%`} {fmtPP(row.lift)} ))} {`Reconciled total (${ledgerRows.length} day${ledgerRows.length === 1 ? '' : 's'})`} {fmtMoney(totalLedgerRevenue)} {fmtMoney(totalLedgerProfit)} {`${totalLedgerMarginPct.toFixed(1)}%`} {fmtPP(avgLedgerLift)} 100% reconciled

)}
)} {/* ===================================================================== C-05: DAILY ATTRIBUTION & EVIDENCE DIALOG */} { if (!open) setInspectedDayKey(null); }} > {inspectedDay ? `Daily Recovery Attribution · ${inspectedDay.long}` : 'Daily Recovery Attribution'} {inspectedDay ? `Reconciled intervention and checkout-segment breakdown for ${inspectedDay.long} (${fmtMoney(inspectedDay.total)} recovered revenue · ${fmtMoney(inspectedDay.profit)} incremental profit · ${fmtPP(inspectedDay.lift)} conversion lift).` : 'Daily breakdown.'} {inspectedDay ? (
{inspectedDay.evidenceNote} Intervention breakdown for {inspectedDay.long}. Intervention Channel Recovered Profit Share {INTERVENTIONS.map((it) => { const val = inspectedDay.byId[it.id]; const prof = inspectedDay.profitById[it.id]; const sharePct = inspectedDay.total > 0 ? (val / inspectedDay.total) * 100 : 0; return ( {it.name} {it.channel} {fmtMoney(val)} {fmtMoney(prof)} {`${sharePct.toFixed(1)}%`} ); })} {`Day total (${inspectedDay.label})`} {fmtMoney(inspectedDay.total)} {fmtMoney(inspectedDay.profit)} 100.0%

Checkout segment breakdown for {inspectedDay.long}. Checkout Segment Recovered Profit Share {CHECKOUT_SEGMENTS.map((seg) => { const segRev = inspectedDay.bySegment[seg.id]; const segProf = inspectedDay.profitBySegment[seg.id]; const segShare = inspectedDay.total > 0 ? (segRev / inspectedDay.total) * 100 : 0; return ( {seg.shortName} {fmtMoney(segRev)} {fmtMoney(segProf)} {`${segShare.toFixed(1)}%`} ); })}

) : null} {inspectedDay ? ( ) : null} Close breakdown {footerSlot} ); } export function AnalyticsDashboard(props: AnalyticsDashboardProps) { const existingToast = useOptionalToast(); if (existingToast) { return ; } return ( ); } export { AnalyticsDashboard as RevenueRecoveryAnalytics }; 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-select",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-select","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-select"}]]}]}]]}],["$","$L60",null,{"namespace":"@frame12","registryDependencies":["https://frame12.dev/r/frame12-styles.json","https://frame12.dev/r/frame12.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"blocks/analytics-dashboard.tsx","content":"$62","type":"registry:block","target":"components/frame12/blocks/analytics-dashboard.tsx"}],"className":"h-[70svh] min-h-80"}]]}]