const { useState, useEffect, useMemo } = React; const CFG = window.FEED_CONFIG; const SUPA_URL = CFG.supabaseUrl; const SUPA_HEADERS = { apikey: CFG.supabaseAnonKey, Authorization: 'Bearer ' + CFG.supabaseAnonKey, 'Content-Type': 'application/json', Prefer: 'return=representation' }; // ───────────────────────────────────────────── // Supabase REST helpers // ───────────────────────────────────────────── async function api(path, opts) { const res = await fetch(SUPA_URL + '/rest/v1' + path, Object.assign({ headers: SUPA_HEADERS }, opts || {})); const text = await res.text(); let body = null; try { body = text ? JSON.parse(text) : null; } catch (e) { body = text; } if (!res.ok) { const msg = (body && body.message) || text || ('HTTP ' + res.status); throw new Error(msg); } return body; } const Events = { list: () => api('/webinar_events?order=event_date.asc'), create: (row) => api('/webinar_events', { method: 'POST', body: JSON.stringify(row) }), update: (id, patch) => api('/webinar_events?id=eq.' + id, { method: 'PATCH', body: JSON.stringify(patch) }), remove: (id) => api('/webinar_events?id=eq.' + id, { method: 'DELETE' }) }; const Questions = { list: () => api('/form_questions?order=position.asc'), listForForm: (formId) => api('/form_questions?form_id=eq.' + formId + '&order=position.asc'), create: (row) => api('/form_questions', { method: 'POST', body: JSON.stringify(row) }), update: (id, patch) => api('/form_questions?id=eq.' + id, { method: 'PATCH', body: JSON.stringify(patch) }), remove: (id) => api('/form_questions?id=eq.' + id, { method: 'DELETE' }) }; const Forms = { list: () => api('/forms?order=created_at.asc'), create: (row) => api('/forms', { method: 'POST', body: JSON.stringify(row) }), update: (id, patch) => api('/forms?id=eq.' + id, { method: 'PATCH', body: JSON.stringify(patch) }), remove: (id) => api('/forms?id=eq.' + id, { method: 'DELETE' }) }; const Funnels = { list: () => api('/funnels?order=landing_variant.asc'), update: (id, patch) => api('/funnels?id=eq.' + id, { method: 'PATCH', body: JSON.stringify(patch) }) }; const Registrants = { list: () => api('/registrants?order=registered_at.desc&select=*,webinar_events(title,event_date)') }; const Videos = { list: (placement) => api('/videos?placement=eq.' + encodeURIComponent(placement) + '&order=created_at.desc'), create: (row) => api('/videos', { method: 'POST', body: JSON.stringify(row) }), update: (id, patch) => api('/videos?id=eq.' + id, { method: 'PATCH', body: JSON.stringify(patch) }), remove: (id) => api('/videos?id=eq.' + id, { method: 'DELETE' }) }; const MetaAds = { list: (sinceIso) => api('/meta_ad_spend?date=gte.' + sinceIso + '&order=date.desc&limit=20000'), status: () => api('/app_settings?key=eq.meta_sync_status').then(rs => rs[0] && rs[0].value), }; // ───────────────────────────────────────────── // Date helpers (form ↔ DB) // ───────────────────────────────────────────── // Convert UTC timestamptz to a string the can show in the user's local tz function utcToLocalInput(utcIso) { if (!utcIso) return ''; const d = new Date(utcIso); if (isNaN(d.getTime())) return ''; const pad = (n) => String(n).padStart(2, '0'); return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + 'T' + pad(d.getHours()) + ':' + pad(d.getMinutes()); } // Convert datetime-local input value (treated as local time) → UTC ISO function localInputToUtc(local) { if (!local) return null; return new Date(local).toISOString(); } // Display formatter: "Mon, Jun 22, 2026 · 12:00 PM EDT" function formatEventDate(utcIso) { if (!utcIso) return ''; const d = new Date(utcIso); const datePart = new Intl.DateTimeFormat('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', timeZone: CFG.displayTimeZone }).format(d); const timePart = new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: '2-digit', hour12: true, timeZone: CFG.displayTimeZone }).format(d); const zone = new Intl.DateTimeFormat('en-US', { timeZoneName: 'short', timeZone: CFG.displayTimeZone }).format(d).split(' ').pop(); return datePart + ' · ' + timePart + ' ' + zone; } function relativeTo(utcIso) { if (!utcIso) return ''; const diff = new Date(utcIso).getTime() - Date.now(); const absMs = Math.abs(diff); const days = Math.floor(absMs / 86400000); const hours = Math.floor((absMs / 3600000) % 24); if (days > 0) return (diff > 0 ? 'in ' : '') + days + 'd ' + hours + 'h' + (diff < 0 ? ' ago' : ''); if (hours > 0) return (diff > 0 ? 'in ' : '') + hours + 'h' + (diff < 0 ? ' ago' : ''); return diff > 0 ? 'soon' : 'just past'; } // ───────────────────────────────────────────── // Navigation (left sidebar) // ───────────────────────────────────────────── const NAV_ITEMS = [ { id: 'metrics', label: 'Funnel Metrics', icon: ( ), render: () => }, { id: 'variant_compare', label: 'Variant Compare', icon: ( ), render: () => }, { id: 'meta_ads', label: 'Meta Ad Data', icon: ( ), render: () => }, { id: 'blended', label: 'Blended Data', icon: ( ), render: () => }, { id: 'events', label: 'Webinar Schedule', icon: ( ), render: () => }, { id: 'forms', label: 'Forms', icon: ( ), render: () => }, { id: 'post_reg_videos', label: 'Post-Reg Videos', icon: ( ), render: () => }, { id: 'review', label: 'Design Review', icon: ( ), fullBleed: true, // No main padding — iframe fills the whole content area render: () => }, { id: 'registrants', label: 'Registrants', icon: ( ), render: () => }, { id: 'organic', label: 'Organic (Nathan)', icon: ( ), render: () => } // Future: Attribution · Campaigns · Live Feed · Settings ]; // ───────────────────────────────────────────── // UI // ───────────────────────────────────────────── function App() { const [routeId, setRouteId] = useState('metrics'); const active = NAV_ITEMS.find(n => n.id === routeId) || NAV_ITEMS[0]; const isFullBleed = active.fullBleed === true; return (
{active.render()}
); } // Embeds the standalone /review.html design-review tool inside the admin shell. // Same localStorage origin, so the reviewer's name + comments shared with the // standalone URL persist seamlessly between the embed and the public review URL. function ReviewEmbed() { return (