// studio-views-b.jsx — Analytics, Revenue, Audience, Drafts, Moodboards, Settings
//
// Analytics, Revenue, Audience and Moodboards have no data source, so they are
// honest empty states. Drafts reads the builder's real local draft. Settings
// edits the real Supabase account.
const { useState: useStateVB, useMemo: useMemoVB, useEffect: useEffectVB } = React;
// ─── Analytics / Revenue / Audience ────────────────────────────────────────
// Analytics, Revenue and Audience all measured engagement — views, clicks,
// CTR, conversion, traffic sources, followers, demographics. None of that is
// collected anywhere in the product, so each screen is an honest empty state
// rather than a demo dataset dressed up as the user's own numbers.
// Real engagement, aggregated in SQL from the events table. Everything here
// comes from actual visits to the owner's published outfits — nothing is
// modelled or estimated. Until a published outfit gets traffic, it is empty
// and says so.
const ANALYTICS_RANGES = { '7D': 7, '30D': 30, '90D': 90, '12M': 365 };
function StudioAnalytics() {
const [range, setRange] = useStateVB('30D');
const [data, setData] = useStateVB(null);
const [loading, setLoading] = useStateVB(true);
const [error, setError] = useStateVB(null);
const load = async (r) => {
setLoading(true);
setError(null);
const days = ANALYTICS_RANGES[r] || 30;
const to = new Date();
const from = new Date(to.getTime() - days * 86400000);
const [totals, outfits, products, domains, daily] = await Promise.all([
window.MBAnalytics.totals(from, to),
window.MBAnalytics.topOutfits(from, to, 8),
window.MBAnalytics.topProducts(from, to, 8),
window.MBAnalytics.outboundByDomain(from, to, 8),
window.MBAnalytics.byDay(from, to),
]);
const firstError = [totals, outfits, products, domains, daily].find(x => x.error);
if (firstError) { setError(firstError.error); setData(null); setLoading(false); return; }
setData({
totals: totals.totals,
outfits: outfits.rows || [],
products: products.rows || [],
domains: domains.rows || [],
// Zero-filled here rather than in the chart, so the range the user asked
// for is what gets drawn even on days nothing happened.
days: window.fillDailySeries(daily.rows || [], from, to),
});
setLoading(false);
};
useEffectVB(() => { load(range); }, [range]);
const empty = data && data.totals.views === 0 && data.totals.productClicks === 0 && data.totals.outboundClicks === 0;
const rangeLabel = range === '12M' ? 'the last 12 months' : 'the last ' + (ANALYTICS_RANGES[range] || 30) + ' days';
return (
Tracking is live, but none of your published outfits have been visited in {rangeLabel}.
Share an outfit link and views, product clicks and clicks through to the
store will appear here. Nothing is estimated — this stays empty until
somebody actually visits.
) : (
<>
{/* Day by day. Three facets sharing one y-scale — see DailyTrend. */}
{/* Clicks to the store, by product — the metric that matters */}
{data.products.length === 0 ? (
No product clicks in this range.
) : (
{data.products.map((p, i) => (
{p.product_label}
))}
)}
{data.outfits.length === 0 ? (
No outfit views in this range.
) : (
{data.outfits.map((o, i) => (
0{i + 1}
{o.title || 'Untitled outfit'}
))}
)}
{data.domains.length === 0 ? (
No clicks to a store yet.
) : (
{data.domains.map((d) => {
const top = Math.max(...data.domains.map(x => Number(x.outbound_clicks || 0)), 1);
const n = Number(d.outbound_clicks || 0);
return (
{d.destination_domain}{fmtNum(n)}
);
})}
)}
)}
)}
);
}
function StudioRevenue() {
return (
There is no affiliate network connected and no click or order data
flowing in, so modaBoard cannot report earnings, commissions or payouts.
Connecting a network and recording attributed orders is what will fill
this screen — until then it stays empty rather than showing an estimate.}
metrics={['Affiliate revenue', 'Pending earnings', 'Commission rates', 'Payout history', 'Earnings per outfit', 'Revenue by brand']}
/>
);
}
function StudioAudience() {
return (
modaBoard has no follower graph and collects no visitor
analytics, so there is nothing to report about who sees your outfits.
Follower counts, demographics and location breakdowns will appear here
if and when that data is actually gathered.}
metrics={['Followers', 'Follower growth', 'Age & gender split', 'Top locations', 'Referring platforms', 'Repeat visitors']}
/>
);
}
// ─── Drafts ────────────────────────────────────────────────────────────────
// The builder keeps one work-in-progress board in localStorage under
// 'dripcheck.draft'. That is a real (if local-only) source, so it is shown.
// There is no server-side draft store, hence no list of them.
function StudioDrafts({ go }) {
const [draft, setDraft] = useStateVB(null);
const [checked, setChecked] = useStateVB(false);
useEffectVB(() => {
try {
const raw = localStorage.getItem('dripcheck.draft');
setDraft(raw ? JSON.parse(raw) : null);
} catch { setDraft(null); }
setChecked(true);
}, []);
const discard = () => {
try { localStorage.removeItem('dripcheck.draft'); } catch {}
setDraft(null);
};
const items = (draft && draft.items) || [];
return (
go && go({ name: 'dashboard' })} style={btnPrimary}>+ New outfit}
/>
{!checked ? (
) : !draft ? (
No draft on this device.
Start building an outfit and your progress is kept here until you save it to your account.