// 數據分析頁：營運總覽（方案一）/ 品類與供需 + 分眾名單（方案二）。
// 全部讀 /api/admin/analytics/*（純聚合現有資料表）。共用元件（StatTile/BarChart/Sparkline/Table…）來自 ui.jsx。
// ⚠ 勿在此頂層重新宣告 useState/useEffect/useMemo（ui.jsx 已全域宣告，重宣告會整包壞掉）——直接 bare 使用。
// ⚠ 整檔包在 IIFE 內：babel 把頂層 const 轉成全域 var，跨頁同名會被後載入的覆蓋（如 OverviewTab 與
// orders.jsx 撞名）。包起來讓內部元件全為函式作用域、不外洩，只對外曝露 window.AnalyticsPage。
(() => {
const ANALYTICS_RANGES = [
{ value: "7d", label: "近 7 天", days: 7 },
{ value: "30d", label: "近 30 天", days: 30 },
{ value: "90d", label: "近 90 天", days: 90 },
{ value: "all", label: "全部", days: null },
];
function analyticsRangeParams(value) {
const ymd = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
const to = new Date();
if (value === "all") return { from: "2020-01-01", to: ymd(to) };
const r = ANALYTICS_RANGES.find((x) => x.value === value) || ANALYTICS_RANGES[1];
const from = new Date(); from.setDate(from.getDate() - (r.days - 1));
return { from: ymd(from), to: ymd(to) };
}
const pct = (v) => `${(Number(v || 0) * 100).toFixed(1)}%`;
const AnalyticsPage = () => {
const [tab, setTab] = useState("overview");
const [range, setRange] = useState("30d");
const [overview, setOverview] = useState(null);
const [categories, setCategories] = useState(null);
const [behavior, setBehavior] = useState(null);
const [segments, setSegments] = useState(null);
const [age, setAge] = useState(null);
const [loading, setLoading] = useState(true);
const params = useMemo(() => analyticsRangeParams(range), [range]);
useEffect(() => {
setLoading(true);
const qs = `?from=${params.from}&to=${params.to}`;
Promise.all([
fetch(`/api/admin/analytics/overview${qs}`).then((r) => (r.ok ? r.json() : null)),
fetch(`/api/admin/analytics/categories${qs}`).then((r) => (r.ok ? r.json() : null)),
fetch(`/api/admin/analytics/behavior${qs}`).then((r) => (r.ok ? r.json() : null)),
fetch(`/api/admin/analytics/age${qs}`).then((r) => (r.ok ? r.json() : null)),
])
.then(([o, c, b, a]) => { setOverview(o); setCategories(c); setBehavior(b); setAge(a); })
.catch(() => {})
.finally(() => setLoading(false));
}, [params.from, params.to]);
useEffect(() => {
fetch(`/api/admin/analytics/segments`).then((r) => (r.ok ? r.json() : null)).then(setSegments).catch(() => {});
}, []);
return (
}
/>
{tab === "overview" && }
{tab === "categories" && }
{tab === "age" && }
{tab === "behavior" && }
{tab === "segments" && }
);
};
// ============== 營運總覽 ==============
const OverviewTab = ({ data, loading }) => {
if (loading) return ;
if (!data) return ;
const k = data.kpi || {};
const series = data.series || [];
const funnel = data.funnel || [];
const t = data.timing || {};
const maxFunnel = Math.max(...funnel.map((f) => f.count), 1);
return (
<>
d.gmv} label={(d) => d.date.slice(5)} color="var(--accent)" format={(v) => `NT$ ${fmtNum(v)}`}/>
d.orders} label={(d) => d.date.slice(5)} color="var(--info)" format={(v) => `${fmtNum(v)} 筆`}/>
{funnel.map((f, i) => {
const prev = i > 0 ? funnel[i - 1].count : null;
const conv = prev ? (f.count / prev) : null;
return (
{f.label}
{fmtNum(f.count)}{conv != null && 轉換 {pct(conv)}}
);
})}
);
};
const TimingRow = ({ label, days }) => (
{label}
{days == null ? "—" : <>{days} 天}
);
// ============== 品類與供需 ==============
const CategoriesTab = ({ data, loading }) => {
if (loading) return ;
if (!data) return ;
return (
<>
d.gmv} label={(d) => d.category} color="var(--accent)" height={140} format={(v) => `NT$ ${fmtNum(v)}`} emptyText="期間內無成交"/>
fmtNum(v)], ["GMV", "gmv", (v) => `NT$ ${fmtNum(v)}`]]}/>
d.orders} label={(d) => d.label} color="var(--info)" height={140} format={(v) => `${fmtNum(v)} 筆`} emptyText="期間內無成交"/>
fmtNum(v)], ["金額", "gmv", (v) => `NT$ ${fmtNum(v)}`]]}/>
r.type },
{ title: "徵稿數", align: "right", render: (r) => {fmtNum(r.count)} },
{ title: "平均預算", align: "right", render: (r) => NT$ {fmtNum(r.avgBudget)} },
]}
rows={data.solicitDemand || []}
/>
r.type },
{ title: "需求(徵稿)", align: "right", render: (r) => {fmtNum(r.demand)} },
{ title: "供給(商品)", align: "right", render: (r) => {fmtNum(r.supply)} },
]}
rows={data.supplyDemand || []}
/>
徵稿媒合率 {pct(data.solicitMatch?.matchRate)}
（{fmtNum(data.solicitMatch?.matched || 0)} / {fmtNum(data.solicitMatch?.total || 0)} 件申請媒合成功）
);
};
const TagCard = ({ title, sub, rows }) => {
const max = Math.max(...rows.map((r) => r.value), 1);
return (
{rows.length === 0 ? (
暫無資料
) : (
{rows.map((r) => (
{r.tag}
{fmtNum(r.value)}
))}
{rows.map((r, i) => (
{r[nameKey]}
{cols.map(([label, key, fmt], j) => (
{fmt(r[key])}
))}
))}
`${fmtNum(v)} 人`} emptyText="期間內無成交"/>
`NT$ ${fmtNum(v)}`} emptyText="期間內無成交"/>
d.gmv} label={(d) => d.band} color="var(--accent)" height={140} format={(v) => `NT$ ${fmtNum(v)}`} emptyText="期間內無成交"/>
d.avgPerBuyer} label={(d) => d.band} color="var(--info)" height={140} format={(v) => `NT$ ${fmtNum(v)}`} emptyText="期間內無成交"/>
{r.band} },
{ title: "買家數", align: "right", render: (r) => {fmtNum(r.buyers)} },
{ title: "訂單數", align: "right", render: (r) => {fmtNum(r.orders)} },
{ title: "消費額", align: "right", render: (r) => NT$ {fmtNum(r.gmv)} },
{ title: "客單價", align: "right", render: (r) => NT$ {fmtNum(r.avgPerBuyer)} },
{ title: "最愛品類", align: "right", render: (r) => topCatOf(r.band) },
]}
rows={bands}
empty="期間內無成交"
/>
{bands.length === 0 ? (
期間內無成交
) : (
{r.band} },
...cats.map((cat) => ({
title: cat,
align: "right",
render: (r) => {
const cell = (r.byCategory || []).find((x) => x.category === cat);
const v = cell ? cell.gmv : 0;
return {v ? `NT$ ${fmtNum(v)}` : "—"};
},
})),
]}
rows={matrix}
/>
)}
);
};
// ============== 分眾名單 ==============
const SegmentsTab = ({ data }) => {
const toast = useToast();
if (!data) return ;
const segments = data.segments || [];
const exportCsv = (seg) => {
if (!seg.members?.length) { toast({ title: "此群無成員", icon: "alert" }); return; }
const headers = ["名稱", "UID", seg.members[0]?.metricLabel || "指標"];
const rows = seg.members.map((m) => [
m.name,
m.uid != null ? `="${String(m.uid).padStart(8, "0")}"` : "",
m.metric,
]);
const stamp = new Date().toLocaleDateString("en-CA", { timeZone: "Asia/Taipei" });
csvDownload(`segment_${seg.key}_${stamp}.csv`, headers, rows);
toast({ title: "CSV 已匯出", message: `${seg.label} · ${seg.members.length} 位`, icon: "download" });
};
return (
{segments.map((seg) => (
{fmtNum(seg.total ?? seg.count)}
{(seg.members || []).slice(0, 5).map((m) => (
{m.name || "—"}{m.uid != null && #{String(m.uid).padStart(8, "0")}}
{m.metric >= 0 ? fmtNum(m.metric) : "—"}
))}
{(seg.members || []).length === 0 &&
目前無符合成員
}
))}
行為埋點剛上線，前臺開始有人搜尋/瀏覽後，資料會逐步累積於此。
)}
d.count} label={(d) => d.date.slice(5)} color="var(--info)" format={(v) => `${fmtNum(v)} 次`}/>
{r.query} },
{ title: "搜尋次數", align: "right", render: (r) => {fmtNum(r.searches)} },
{ title: "最近結果", align: "right", render: (r) => {r.lastResult == null ? "—" : fmtNum(r.lastResult)} },
]}
rows={data.topKeywords || []}
/>
{(data.zeroResult || []).length === 0 ? (
目前沒有零結果搜尋
) : (
{r.query} },
{ title: "零結果次數", align: "right", render: (r) => {fmtNum(r.zero)} },
{ title: "總搜尋", align: "right", render: (r) => {fmtNum(r.searches)} },
]}
rows={data.zeroResult || []}
/>
)}
r.tab },
{ title: "切換次數", align: "right", render: (r) => {fmtNum(r.count)} },
]}
rows={data.tabs || []}
/>
r.value },
{ title: "使用次數", align: "right", render: (r) => {fmtNum(r.count)} },
]}
rows={data.filters || []}
/>
);
};
// ============== 共用小件 ==============
const ChartHead = ({ title, sub }) => (
);
const Loading = () => 載入中…
;
const EmptyState = () => 暫無資料
;
window.AnalyticsPage = AnalyticsPage;
})();