@analytix/dashboard 0.2.2

package/dist/AnalyticsDashboard.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+import type { DashboardWidgetId } from "@analytix/core";
+type ThemeMode = "light" | "dark" | "system";
+export interface AnalyticsDashboardProps {
+    siteId: string;
+    summaryEndpoint?: string;
+    exportEndpoint?: string;
+    /** Shown while fetching summary data. Defaults to built-in skeleton. */
+    loadingFallback?: ReactNode;
+    /** Initial theme. Defaults to system preference. */
+    defaultTheme?: ThemeMode;
+    /** Site-default widget layout (overridden by localStorage when set). */
+    defaultWidgets?: DashboardWidgetId[];
+    /** PATCH endpoint to persist widget layout as site default. */
+    settingsEndpoint?: string;
+}
+export declare function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, loadingFallback, defaultTheme, defaultWidgets, settingsEndpoint, }: AnalyticsDashboardProps): import("react").JSX.Element;
+export {};

package/dist/AnalyticsDashboard.js

@@ -0,0 +1,260 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { DEFAULT_DASHBOARD_WIDGETS, percentChange } from "@analytix/core";
+import { Area, CartesianGrid, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { Download, Eye, Users, Clock, MousePointerClick, Repeat, FileText, UserPlus, UserCheck, Moon, Sun, SlidersHorizontal, } from "lucide-react";
+import { AnalyticsDashboardSkeleton } from "./AnalyticsDashboardSkeleton";
+import { useDashboardWidgets } from "./useDashboardWidgets";
+import { WidgetCustomizePanel } from "./WidgetCustomizePanel";
+function formatBucketLabel(value, granularity) {
+    const date = new Date(value);
+    if (granularity === "hour") {
+        return date.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric" });
+    }
+    return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+function formatNumber(value) {
+    return new Intl.NumberFormat().format(value);
+}
+function toDateInputValue(date) {
+    return date.toISOString().slice(0, 10);
+}
+function Delta({ current, previous }) {
+    if (previous === undefined)
+        return null;
+    const delta = percentChange(current, previous);
+    if (delta === null)
+        return _jsx("span", { className: "metricDelta", children: "\u2014" });
+    const up = delta >= 0;
+    return (_jsxs("span", { className: `metricDelta ${up ? "metricDeltaUp" : "metricDeltaDown"}`, children: [up ? "+" : "", delta, "% vs prior period"] }));
+}
+function BreakdownPanel({ title, emptyMessage, rows, }) {
+    return (_jsxs("div", { className: "chartPanel", children: [_jsx("div", { className: "panelTitle", children: title }), rows.length === 0 ? (_jsx("p", { className: "emptyState", children: emptyMessage })) : (_jsx("ul", { className: "list", children: rows.map((row) => (_jsxs("li", { children: [_jsx("span", { className: "listLabel", children: row.label }), _jsx("span", { className: "listValue", children: row.value })] }, row.key))) }))] }));
+}
+function useResolvedTheme(mode) {
+    const [resolved, setResolved] = useState("light");
+    useEffect(() => {
+        if (mode !== "system") {
+            setResolved(mode);
+            return;
+        }
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const apply = () => setResolved(media.matches ? "dark" : "light");
+        apply();
+        media.addEventListener("change", apply);
+        return () => media.removeEventListener("change", apply);
+    }, [mode]);
+    return resolved;
+}
+export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, loadingFallback, defaultTheme = "system", defaultWidgets = DEFAULT_DASHBOARD_WIDGETS, settingsEndpoint, }) {
+    const summaryUrl = summaryEndpoint ?? `/api/v1/sites/${siteId}/summary`;
+    const exportUrl = exportEndpoint ?? `/api/v1/sites/${siteId}/export`;
+    const [range, setRange] = useState("7d");
+    const [useCustomRange, setUseCustomRange] = useState(false);
+    const [customFrom, setCustomFrom] = useState(() => toDateInputValue(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)));
+    const [customTo, setCustomTo] = useState(() => toDateInputValue(new Date()));
+    const [granularity, setGranularity] = useState("day");
+    const [trafficScope, setTrafficScope] = useState("all");
+    const [path, setPath] = useState("");
+    const [contentId, setContentId] = useState("");
+    const [includeBlogArticles, setIncludeBlogArticles] = useState(false);
+    const [summary, setSummary] = useState(null);
+    const [initialLoading, setInitialLoading] = useState(true);
+    const [refreshing, setRefreshing] = useState(false);
+    const [error, setError] = useState("");
+    const [themeMode, setThemeMode] = useState(defaultTheme);
+    const resolvedTheme = useResolvedTheme(themeMode);
+    const hasLoadedRef = useRef(false);
+    const [showWidgetCustomize, setShowWidgetCustomize] = useState(false);
+    const [savingDefaultWidgets, setSavingDefaultWidgets] = useState(false);
+    const { widgets, toggleWidget, resetToDefault, isVisible } = useDashboardWidgets(siteId, defaultWidgets);
+    const filterParams = useMemo(() => {
+        const params = new URLSearchParams({
+            granularity,
+            compare: "1",
+        });
+        if (useCustomRange) {
+            params.set("from", new Date(`${customFrom}T00:00:00.000Z`).toISOString());
+            params.set("to", new Date(`${customTo}T23:59:59.999Z`).toISOString());
+        }
+        else {
+            params.set("range", range);
+        }
+        if (trafficScope === "page" && path.trim()) {
+            params.set("scope", "page");
+            params.set("path", path.trim());
+            if (path.trim() === "/blog" && includeBlogArticles) {
+                params.set("includeBlogArticles", "1");
+            }
+        }
+        else if (trafficScope === "blog") {
+            if (contentId.trim()) {
+                params.set("scope", "article");
+                params.set("contentId", contentId.trim());
+            }
+            else {
+                params.set("scope", "blog");
+            }
+        }
+        return params;
+    }, [
+        range,
+        useCustomRange,
+        customFrom,
+        customTo,
+        granularity,
+        trafficScope,
+        path,
+        contentId,
+        includeBlogArticles,
+    ]);
+    useEffect(() => {
+        let cancelled = false;
+        const isFirstLoad = !hasLoadedRef.current;
+        if (isFirstLoad) {
+            setInitialLoading(true);
+        }
+        else {
+            setRefreshing(true);
+        }
+        setError("");
+        fetch(`${summaryUrl}?${filterParams.toString()}`)
+            .then(async (res) => {
+            if (!res.ok) {
+                const payload = await res.json().catch(() => ({}));
+                throw new Error(payload.error ?? "Failed to load analytics");
+            }
+            return res.json();
+        })
+            .then((payload) => {
+            if (!cancelled) {
+                hasLoadedRef.current = true;
+                setSummary(payload.summary ?? payload);
+            }
+        })
+            .catch((err) => {
+            if (!cancelled)
+                setError(err.message);
+        })
+            .finally(() => {
+            if (!cancelled) {
+                setInitialLoading(false);
+                setRefreshing(false);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [summaryUrl, filterParams]);
+    const chartData = useMemo(() => (summary?.buckets ?? []).map((bucket) => ({
+        label: formatBucketLabel(bucket.bucket_start, granularity),
+        views: bucket.page_views,
+        uniques: bucket.unique_visitors,
+    })), [summary, granularity]);
+    const themeClass = resolvedTheme === "dark" ? "analytix-theme-dark" : "analytix-theme-light";
+    if (initialLoading) {
+        return (_jsx("div", { className: `analytix-dash ${themeClass}`, children: loadingFallback ?? _jsx(AnalyticsDashboardSkeleton, {}) }));
+    }
+    if (error) {
+        return (_jsx("div", { className: `analytix-dash ${themeClass}`, children: _jsx("p", { className: "error", children: error }) }));
+    }
+    if (!summary) {
+        return (_jsx("div", { className: `analytix-dash ${themeClass}`, children: _jsx("p", { className: "emptyState", children: "No analytics data yet." }) }));
+    }
+    const prev = summary.previous_period;
+    const gridStroke = resolvedTheme === "dark" ? "rgba(148,163,184,0.15)" : "rgba(15,23,42,0.08)";
+    const areaFill = resolvedTheme === "dark" ? "rgba(96,165,250,0.18)" : "rgba(0,82,255,0.12)";
+    const areaStroke = resolvedTheme === "dark" ? "#60a5fa" : "#0052ff";
+    const lineStroke = resolvedTheme === "dark" ? "#34d399" : "#059669";
+    async function saveDefaultWidgets() {
+        if (!settingsEndpoint)
+            return;
+        setSavingDefaultWidgets(true);
+        try {
+            await fetch(settingsEndpoint, {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ analytics_config: { dashboard_widgets: widgets } }),
+            });
+        }
+        finally {
+            setSavingDefaultWidgets(false);
+        }
+    }
+    return (_jsxs("div", { className: `analytix-dash ${themeClass}${refreshing ? " analytix-refreshing" : ""}`, children: [_jsxs("div", { className: "toolbar", children: [_jsxs("span", { className: "realtime", children: [summary.realtime_visitors, " visitors in the last 15 minutes"] }), _jsxs("div", { className: "toolbarActions", children: [_jsx("button", { type: "button", className: "btn btnIcon", onClick: () => setShowWidgetCustomize((open) => !open), "aria-label": "Customize widgets", children: _jsx(SlidersHorizontal, { size: 16 }) }), _jsx("button", { type: "button", className: "btn btnIcon", onClick: () => setThemeMode((current) => current === "dark" || (current === "system" && resolvedTheme === "dark")
+                                    ? "light"
+                                    : "dark"), "aria-label": "Toggle theme", children: resolvedTheme === "dark" ? _jsx(Sun, { size: 16 }) : _jsx(Moon, { size: 16 }) }), _jsxs("a", { className: "btn", href: `${exportUrl}?${filterParams.toString()}`, children: [_jsx(Download, { size: 14 }), "Export CSV"] })] })] }), showWidgetCustomize ? (_jsx(WidgetCustomizePanel, { widgets: widgets, onToggle: toggleWidget, onReset: resetToDefault, onSaveDefault: settingsEndpoint ? saveDefaultWidgets : undefined, savingDefault: savingDefaultWidgets })) : null, _jsxs("div", { className: "filters", children: [_jsxs("div", { className: "filterGroup filterGroupWide", children: [_jsx("span", { className: "filterLabel", children: "Range" }), _jsxs("div", { className: "chips", children: [["24h", "7d", "30d", "90d"].map((key) => (_jsx("button", { type: "button", className: !useCustomRange && range === key ? "chipActive" : "chip", onClick: () => {
+                                            setUseCustomRange(false);
+                                            setRange(key);
+                                        }, children: key }, key))), _jsx("button", { type: "button", className: useCustomRange ? "chipActive" : "chip", onClick: () => setUseCustomRange(true), children: "Custom" })] }), useCustomRange && (_jsxs("div", { className: "dateRangeRow", children: [_jsxs("label", { children: [_jsx("span", { className: "filterLabel", children: "From" }), _jsx("input", { type: "date", value: customFrom, max: customTo, onChange: (e) => setCustomFrom(e.target.value) })] }), _jsxs("label", { children: [_jsx("span", { className: "filterLabel", children: "To" }), _jsx("input", { type: "date", value: customTo, min: customFrom, max: toDateInputValue(new Date()), onChange: (e) => setCustomTo(e.target.value) })] })] }))] }), _jsxs("div", { className: "filterGroup", children: [_jsx("span", { className: "filterLabel", children: "Granularity" }), _jsx("div", { className: "chips", children: ["hour", "day"].map((key) => (_jsx("button", { type: "button", className: granularity === key ? "chipActive" : "chip", onClick: () => setGranularity(key), children: key }, key))) })] }), _jsxs("div", { className: "filterGroup", children: [_jsx("span", { className: "filterLabel", children: "Scope" }), _jsx("div", { className: "chips", children: ["all", "page", "blog"].map((key) => (_jsx("button", { type: "button", className: trafficScope === key ? "chipActive" : "chip", onClick: () => setTrafficScope(key), children: key }, key))) })] }), trafficScope === "page" && (_jsxs("div", { className: "filterGroup filterGroupWide textField", children: [_jsx("span", { className: "filterLabel", children: "Path" }), _jsx("input", { value: path, onChange: (e) => setPath(e.target.value), placeholder: "/pricing" }), path.trim() === "/blog" && (_jsxs("label", { className: "checkboxRow", children: [_jsx("input", { type: "checkbox", checked: includeBlogArticles, onChange: (e) => setIncludeBlogArticles(e.target.checked) }), "Include blog articles"] }))] })), trafficScope === "blog" && (_jsxs("div", { className: "filterGroup filterGroupWide textField", children: [_jsx("span", { className: "filterLabel", children: "Content ID (optional)" }), _jsx("input", { value: contentId, onChange: (e) => setContentId(e.target.value), placeholder: "Filter to a single article" })] }))] }), isVisible("metrics") ? (_jsxs("div", { className: "metrics", children: [_jsxs("div", { className: "metricCard", children: [_jsx(Eye, { size: 18 }), _jsx("span", { className: "metricValue", children: formatNumber(summary.total_page_views) }), _jsx("span", { className: "metricLabel", children: "Page views" }), _jsx(Delta, { current: summary.total_page_views, previous: prev?.total_page_views })] }), _jsxs("div", { className: "metricCard", children: [_jsx(Users, { size: 18 }), _jsx("span", { className: "metricValue", children: formatNumber(summary.unique_visitors) }), _jsx("span", { className: "metricLabel", children: "Unique visitors" }), _jsx(Delta, { current: summary.unique_visitors, previous: prev?.unique_visitors })] }), _jsxs("div", { className: "metricCard", children: [_jsx(Repeat, { size: 18 }), _jsx("span", { className: "metricValue", children: formatNumber(summary.total_sessions) }), _jsx("span", { className: "metricLabel", children: "Sessions" }), _jsx(Delta, { current: summary.total_sessions, previous: prev?.total_sessions })] }), _jsxs("div", { className: "metricCard", children: [_jsx(FileText, { size: 18 }), _jsx("span", { className: "metricValue", children: summary.pages_per_session.toFixed(2) }), _jsx("span", { className: "metricLabel", children: "Pages / session" })] }), _jsxs("div", { className: "metricCard", children: [_jsx(UserPlus, { size: 18 }), _jsx("span", { className: "metricValue", children: formatNumber(summary.new_visitors) }), _jsx("span", { className: "metricLabel", children: "New visitors" })] }), _jsxs("div", { className: "metricCard", children: [_jsx(UserCheck, { size: 18 }), _jsx("span", { className: "metricValue", children: formatNumber(summary.returning_visitors) }), _jsx("span", { className: "metricLabel", children: "Returning visitors" })] }), _jsxs("div", { className: "metricCard", children: [_jsx(MousePointerClick, { size: 18 }), _jsxs("span", { className: "metricValue", children: [summary.bounce_rate, "%"] }), _jsx("span", { className: "metricLabel", children: "Bounce rate" }), _jsx(Delta, { current: summary.bounce_rate, previous: prev?.bounce_rate })] }), _jsxs("div", { className: "metricCard", children: [_jsx(Clock, { size: 18 }), _jsxs("span", { className: "metricValue", children: [summary.avg_engagement_seconds, "s"] }), _jsx("span", { className: "metricLabel", children: "Avg engagement" }), _jsx(Delta, { current: summary.avg_engagement_seconds, previous: prev?.avg_engagement_seconds })] })] })) : null, isVisible("chart") ? (_jsxs("div", { className: "chartPanel", children: [_jsx("div", { className: "panelTitle", children: "Traffic over time" }), _jsx("div", { className: "chartContainer", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: chartData, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), _jsx(XAxis, { dataKey: "label", tick: { fontSize: 12, fill: "var(--ax-muted)" } }), _jsx(YAxis, { tick: { fontSize: 12, fill: "var(--ax-muted)" } }), _jsx(Tooltip, { contentStyle: {
+                                            background: "var(--ax-surface)",
+                                            border: "1px solid var(--ax-border)",
+                                            borderRadius: 10,
+                                            color: "var(--ax-primary)",
+                                        } }), _jsx(Area, { type: "monotone", dataKey: "views", fill: areaFill, stroke: areaStroke, name: "Page views" }), _jsx(Line, { type: "monotone", dataKey: "uniques", stroke: lineStroke, name: "Uniques" })] }) }) })] })) : null, isVisible("top_paths") || isVisible("top_content") ? (_jsxs("div", { className: "splitPanels", children: [isVisible("top_paths") ? (_jsx(BreakdownPanel, { title: "Top paths", emptyMessage: "No path data for this period.", rows: summary.top_paths.map((row) => ({
+                            key: row.path,
+                            label: row.path,
+                            value: `${formatNumber(row.views)} views · ${formatNumber(row.uniques)} uniques`,
+                        })) })) : null, isVisible("top_content") ? (_jsx(BreakdownPanel, { title: "Top content", emptyMessage: "No content data for this period.", rows: summary.top_content.map((row) => ({
+                            key: row.content_id || row.content_slug || row.content_title,
+                            label: row.content_title || row.content_slug || row.content_id,
+                            value: `${formatNumber(row.views)} views`,
+                        })) })) : null] })) : null, isVisible("landing_pages") || isVisible("referrers") || isVisible("channels") ? (_jsxs("div", { className: "splitPanels", children: [isVisible("landing_pages") ? (_jsx(BreakdownPanel, { title: "Landing pages", emptyMessage: "No landing page data for this period.", rows: summary.landing_pages.map((row) => ({
+                            key: row.path,
+                            label: row.path,
+                            value: `${formatNumber(row.sessions)} sessions`,
+                        })) })) : null, isVisible("referrers") ? (_jsx(BreakdownPanel, { title: "Top referrers", emptyMessage: "No referrer data for this period.", rows: summary.referrer_breakdown.map((row) => ({
+                            key: row.referrer,
+                            label: row.referrer,
+                            value: formatNumber(row.count),
+                        })) })) : null, isVisible("channels") ? (_jsx(BreakdownPanel, { title: "Traffic channels", emptyMessage: "No channel data for this period.", rows: summary.channel_breakdown.map((row) => ({
+                            key: row.channel,
+                            label: row.channel,
+                            value: formatNumber(row.count),
+                        })) })) : null] })) : null, isVisible("utm") ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "splitPanels", children: [_jsx(BreakdownPanel, { title: "UTM source", emptyMessage: "No UTM source data for this period.", rows: summary.utm_source_breakdown.map((row) => ({
+                                    key: row.source,
+                                    label: row.source,
+                                    value: formatNumber(row.count),
+                                })) }), _jsx(BreakdownPanel, { title: "UTM medium", emptyMessage: "No UTM medium data for this period.", rows: summary.utm_medium_breakdown.map((row) => ({
+                                    key: row.medium,
+                                    label: row.medium,
+                                    value: formatNumber(row.count),
+                                })) })] }), _jsxs("div", { className: "splitPanels", children: [_jsx(BreakdownPanel, { title: "UTM campaign", emptyMessage: "No UTM campaign data for this period.", rows: summary.utm_campaign_breakdown.map((row) => ({
+                                    key: row.campaign,
+                                    label: row.campaign,
+                                    value: formatNumber(row.count),
+                                })) }), _jsx(BreakdownPanel, { title: "UTM term", emptyMessage: "No UTM term data for this period.", rows: summary.utm_term_breakdown.map((row) => ({
+                                    key: row.term,
+                                    label: row.term,
+                                    value: formatNumber(row.count),
+                                })) })] }), _jsx(BreakdownPanel, { title: "UTM content", emptyMessage: "No UTM content data for this period.", rows: summary.utm_content_breakdown.map((row) => ({
+                            key: row.content,
+                            label: row.content,
+                            value: formatNumber(row.count),
+                        })) })] })) : null, isVisible("geo") ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "splitPanels", children: [_jsx(BreakdownPanel, { title: "Countries", emptyMessage: "No geo data for this period.", rows: summary.country_breakdown.map((row) => ({
+                                    key: row.country,
+                                    label: row.country,
+                                    value: formatNumber(row.count),
+                                })) }), _jsx(BreakdownPanel, { title: "Regions", emptyMessage: "No region data for this period.", rows: summary.region_breakdown.map((row) => ({
+                                    key: row.region,
+                                    label: row.region,
+                                    value: formatNumber(row.count),
+                                })) })] }), _jsx(BreakdownPanel, { title: "Languages", emptyMessage: "No language data for this period.", rows: summary.language_breakdown.map((row) => ({
+                            key: row.language,
+                            label: row.language,
+                            value: formatNumber(row.count),
+                        })) })] })) : null, isVisible("devices") ? (_jsxs("div", { className: "splitPanels", children: [_jsx(BreakdownPanel, { title: "Devices", emptyMessage: "No device data for this period.", rows: summary.device_breakdown.map((row) => ({
+                            key: row.device_type,
+                            label: row.device_type,
+                            value: formatNumber(row.count),
+                        })) }), _jsx(BreakdownPanel, { title: "Browsers", emptyMessage: "No browser data for this period.", rows: summary.browser_breakdown.map((row) => ({
+                            key: row.browser,
+                            label: row.browser,
+                            value: formatNumber(row.count),
+                        })) })] })) : null, isVisible("os") ? (_jsx(BreakdownPanel, { title: "Operating systems", emptyMessage: "No OS data for this period.", rows: summary.os_breakdown.map((row) => ({
+                    key: row.os,
+                    label: row.os,
+                    value: formatNumber(row.count),
+                })) })) : null] }));
+}

package/dist/AnalyticsDashboardSkeleton.d.ts

@@ -0,0 +1 @@
+export declare function AnalyticsDashboardSkeleton(): import("react").JSX.Element;

package/dist/AnalyticsDashboardSkeleton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function AnalyticsDashboardSkeleton() {
+    return (_jsxs("div", { className: "analytix-dash analytix-skeleton", "aria-busy": "true", "aria-label": "Loading analytics", children: [_jsxs("div", { className: "toolbar", children: [_jsx("div", { className: "sk skRealtime" }), _jsx("div", { className: "sk skBtn" })] }), _jsx("div", { className: "filters", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "filterGroup", children: [_jsx("div", { className: "sk skLabel" }), _jsxs("div", { className: "skRow", children: [_jsx("div", { className: "sk skChip" }), _jsx("div", { className: "sk skChip" }), _jsx("div", { className: "sk skChip" })] })] }, i))) }), _jsx("div", { className: "metrics", children: Array.from({ length: 7 }).map((_, i) => (_jsxs("div", { className: "metricCard", children: [_jsx("div", { className: "sk skIcon" }), _jsx("div", { className: "sk skMetricValue" }), _jsx("div", { className: "sk skMetricLabel" }), _jsx("div", { className: "sk skDelta" })] }, i))) }), _jsxs("div", { className: "chartPanel", children: [_jsx("div", { className: "sk skPanelTitle" }), _jsx("div", { className: "sk skChart" })] }), _jsx("div", { className: "splitPanels", children: Array.from({ length: 2 }).map((_, i) => (_jsxs("div", { className: "chartPanel", children: [_jsx("div", { className: "sk skPanelTitle" }), _jsx("div", { className: "skList", children: Array.from({ length: 5 }).map((__, j) => (_jsx("div", { className: "sk skListRow" }, j))) })] }, i))) })] }));
+}

package/dist/WidgetCustomizePanel.d.ts

@@ -0,0 +1,8 @@
+import { type DashboardWidgetId } from "@analytix/core";
+export declare function WidgetCustomizePanel({ widgets, onToggle, onReset, onSaveDefault, savingDefault, }: {
+    widgets: DashboardWidgetId[];
+    onToggle: (id: DashboardWidgetId) => void;
+    onReset: () => void;
+    onSaveDefault?: () => void;
+    savingDefault?: boolean;
+}): import("react").JSX.Element;

package/dist/WidgetCustomizePanel.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DASHBOARD_WIDGET_IDS, DASHBOARD_WIDGET_LABELS, } from "@analytix/core";
+export function WidgetCustomizePanel({ widgets, onToggle, onReset, onSaveDefault, savingDefault, }) {
+    return (_jsxs("div", { className: "chartPanel widgetCustomize", children: [_jsx("div", { className: "panelTitle", children: "Dashboard widgets" }), _jsx("div", { className: "widgetGrid", children: DASHBOARD_WIDGET_IDS.map((id) => (_jsxs("label", { className: "widgetToggle", children: [_jsx("input", { type: "checkbox", checked: widgets.includes(id), onChange: () => onToggle(id) }), DASHBOARD_WIDGET_LABELS[id]] }, id))) }), _jsxs("div", { className: "widgetActions", children: [_jsx("button", { type: "button", className: "btn", onClick: onReset, children: "Reset layout" }), onSaveDefault ? (_jsx("button", { type: "button", className: "btn", onClick: onSaveDefault, disabled: savingDefault, children: savingDefault ? "Saving…" : "Save as site default" })) : null] })] }));
+}

package/dist/dashboard.css

@@ -0,0 +1,401 @@
+.analytix-dash {
+  --ax-primary: #0f172a;
+  --ax-muted: #64748b;
+  --ax-accent: #0052ff;
+  --ax-surface: rgba(255, 255, 255, 0.72);
+  --ax-surface-solid: #ffffff;
+  --ax-border: rgba(15, 23, 42, 0.08);
+  --ax-success: #047857;
+  --ax-success-bg: rgba(5, 150, 105, 0.08);
+  --ax-danger: #dc2626;
+  --ax-up: #059669;
+  --ax-down: #dc2626;
+  --ax-chart-grid: rgba(15, 23, 42, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  color: var(--ax-primary);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.analytix-dash.analytix-theme-dark {
+  --ax-primary: #e2e8f0;
+  --ax-muted: #94a3b8;
+  --ax-accent: #60a5fa;
+  --ax-surface: rgba(15, 23, 42, 0.72);
+  --ax-surface-solid: #0f172a;
+  --ax-border: rgba(148, 163, 184, 0.18);
+  --ax-success: #34d399;
+  --ax-success-bg: rgba(52, 211, 153, 0.12);
+  --ax-up: #34d399;
+  --ax-down: #f87171;
+  --ax-chart-grid: rgba(148, 163, 184, 0.15);
+}
+
+.analytix-dash.analytix-refreshing {
+  opacity: 0.72;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+
+.analytix-dash .filters {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  padding: 18px;
+  border: 1px solid var(--ax-border);
+  border-radius: 14px;
+  background: var(--ax-surface);
+}
+
+.analytix-dash .filterGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.analytix-dash .filterGroupWide {
+  grid-column: 1 / -1;
+}
+
+.analytix-dash .filterLabel {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ax-muted);
+}
+
+.analytix-dash .chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.analytix-dash .chip,
+.analytix-dash .chipActive {
+  padding: 7px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--ax-border);
+  background: var(--ax-surface-solid);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--ax-muted);
+}
+
+.analytix-dash .chipActive {
+  background: rgba(0, 82, 255, 0.08);
+  border-color: rgba(0, 82, 255, 0.18);
+  color: var(--ax-accent);
+}
+
+.analytix-dash.analytix-theme-dark .chipActive {
+  background: rgba(96, 165, 250, 0.14);
+  border-color: rgba(96, 165, 250, 0.28);
+}
+
+.analytix-dash .dateRangeRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.analytix-dash .dateRangeRow label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.analytix-dash .textField input,
+.analytix-dash .dateRangeRow input,
+.analytix-dash select {
+  font: inherit;
+  padding: 10px 12px;
+  border: 1px solid var(--ax-border);
+  border-radius: 10px;
+  background: var(--ax-surface-solid);
+  color: var(--ax-primary);
+}
+
+.analytix-dash .checkboxRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.875rem;
+  color: var(--ax-muted);
+}
+
+.analytix-dash .metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 14px;
+}
+
+.analytix-dash .metricCard {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 18px;
+  border-radius: 14px;
+  border: 1px solid var(--ax-border);
+  background: var(--ax-surface);
+  color: var(--ax-accent);
+  min-width: 0;
+}
+
+.analytix-dash .metricValue {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--ax-primary);
+  line-height: 1.2;
+}
+
+.analytix-dash .metricLabel {
+  font-size: 0.8125rem;
+  color: var(--ax-muted);
+}
+
+.analytix-dash .metricDelta {
+  font-size: 0.75rem;
+  color: var(--ax-muted);
+}
+
+.analytix-dash .metricDeltaUp {
+  color: var(--ax-up);
+}
+
+.analytix-dash .metricDeltaDown {
+  color: var(--ax-down);
+}
+
+.analytix-dash .chartPanel {
+  padding: 18px;
+  border-radius: 14px;
+  border: 1px solid var(--ax-border);
+  background: var(--ax-surface);
+  min-width: 0;
+}
+
+.analytix-dash .chartContainer {
+  width: 100%;
+  height: 280px;
+  min-height: 280px;
+}
+
+.analytix-dash .panelTitle {
+  font-size: 0.875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--ax-muted);
+  margin-bottom: 14px;
+}
+
+.analytix-dash .splitPanels {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.analytix-dash .list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.analytix-dash .list li {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 0.875rem;
+}
+
+.analytix-dash .listLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.analytix-dash .listValue {
+  flex-shrink: 0;
+  color: var(--ax-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.analytix-dash .emptyState {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--ax-muted);
+}
+
+.analytix-dash .error {
+  color: var(--ax-danger);
+}
+
+.analytix-dash .toolbar {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.analytix-dash .toolbarActions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.analytix-dash .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--ax-border);
+  background: var(--ax-surface-solid);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ax-primary);
+  text-decoration: none;
+}
+
+.analytix-dash .btnIcon {
+  padding: 8px 10px;
+}
+
+.analytix-dash .realtime {
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: var(--ax-success-bg);
+  color: var(--ax-success);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+/* Skeleton */
+.analytix-dash.analytix-skeleton .sk {
+  border-radius: 8px;
+  background: linear-gradient(
+    90deg,
+    rgba(148, 163, 184, 0.12) 0%,
+    rgba(148, 163, 184, 0.22) 50%,
+    rgba(148, 163, 184, 0.12) 100%
+  );
+  background-size: 200% 100%;
+  animation: analytix-shimmer 1.4s ease-in-out infinite;
+}
+
+.analytix-dash.analytix-skeleton .skRow {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.analytix-dash.analytix-skeleton .skRealtime {
+  width: 260px;
+  height: 40px;
+}
+
+.analytix-dash.analytix-skeleton .skBtn {
+  width: 120px;
+  height: 36px;
+}
+
+.analytix-dash.analytix-skeleton .skLabel {
+  width: 72px;
+  height: 12px;
+}
+
+.analytix-dash.analytix-skeleton .skChip {
+  width: 48px;
+  height: 32px;
+  border-radius: 999px;
+}
+
+.analytix-dash.analytix-skeleton .skIcon {
+  width: 18px;
+  height: 18px;
+}
+
+.analytix-dash.analytix-skeleton .skMetricValue {
+  width: 72px;
+  height: 28px;
+}
+
+.analytix-dash.analytix-skeleton .skMetricLabel {
+  width: 96px;
+  height: 14px;
+}
+
+.analytix-dash.analytix-skeleton .skDelta {
+  width: 120px;
+  height: 12px;
+}
+
+.analytix-dash.analytix-skeleton .skPanelTitle {
+  width: 120px;
+  height: 14px;
+  margin-bottom: 14px;
+}
+
+.analytix-dash.analytix-skeleton .skChart {
+  width: 100%;
+  height: 280px;
+  border-radius: 12px;
+}
+
+.analytix-dash.analytix-skeleton .skList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.analytix-dash.analytix-skeleton .skListRow {
+  width: 100%;
+  height: 18px;
+}
+
+@keyframes analytix-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (max-width: 900px) {
+  .analytix-dash .filters,
+  .analytix-dash .splitPanels {
+    grid-template-columns: 1fr;
+  }
+}
+
+.analytix-dash .widgetCustomize .widgetGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.analytix-dash .widgetToggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.875rem;
+  color: var(--ax-muted);
+}
+
+.analytix-dash .widgetActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { AnalyticsDashboard, type AnalyticsDashboardProps } from "./AnalyticsDashboard";
+export { AnalyticsDashboardSkeleton } from "./AnalyticsDashboardSkeleton";
+export { WidgetCustomizePanel } from "./WidgetCustomizePanel";
+export { useDashboardWidgets } from "./useDashboardWidgets";

package/dist/index.js

@@ -0,0 +1,4 @@
+export { AnalyticsDashboard } from "./AnalyticsDashboard";
+export { AnalyticsDashboardSkeleton } from "./AnalyticsDashboardSkeleton";
+export { WidgetCustomizePanel } from "./WidgetCustomizePanel";
+export { useDashboardWidgets } from "./useDashboardWidgets";

package/dist/useDashboardWidgets.d.ts

@@ -0,0 +1,8 @@
+import { type DashboardWidgetId } from "@analytix/core";
+export declare function useDashboardWidgets(siteId: string, defaultWidgets?: DashboardWidgetId[]): {
+    widgets: ("metrics" | "chart" | "top_paths" | "top_content" | "landing_pages" | "referrers" | "channels" | "utm" | "geo" | "devices" | "os")[];
+    toggleWidget: (id: DashboardWidgetId) => void;
+    resetToDefault: () => void;
+    isVisible: (id: DashboardWidgetId) => boolean;
+    setWidgets: (next: DashboardWidgetId[]) => void;
+};

package/dist/useDashboardWidgets.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from "react";
+import { DASHBOARD_WIDGET_IDS, DEFAULT_DASHBOARD_WIDGETS, } from "@analytix/core";
+function storageKey(siteId) {
+    return `analytix_widgets_${siteId}`;
+}
+function readStoredWidgets(siteId) {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const raw = localStorage.getItem(storageKey(siteId));
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        const allowed = new Set(DASHBOARD_WIDGET_IDS);
+        const filtered = parsed.filter((id) => allowed.has(id));
+        return filtered.length ? filtered : null;
+    }
+    catch {
+        return null;
+    }
+}
+export function useDashboardWidgets(siteId, defaultWidgets = DEFAULT_DASHBOARD_WIDGETS) {
+    const [widgets, setWidgets] = useState(defaultWidgets);
+    useEffect(() => {
+        setWidgets(readStoredWidgets(siteId) ?? defaultWidgets);
+    }, [siteId, defaultWidgets]);
+    const persist = useCallback((next) => {
+        setWidgets(next);
+        if (typeof window !== "undefined") {
+            localStorage.setItem(storageKey(siteId), JSON.stringify(next));
+        }
+    }, [siteId]);
+    const toggleWidget = useCallback((id) => {
+        persist(widgets.includes(id) ? widgets.filter((w) => w !== id) : [...widgets, id]);
+    }, [persist, widgets]);
+    const resetToDefault = useCallback(() => {
+        persist(defaultWidgets);
+    }, [defaultWidgets, persist]);
+    const isVisible = useCallback((id) => widgets.includes(id), [widgets]);
+    return { widgets, toggleWidget, resetToDefault, isVisible, setWidgets: persist };
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@analytix/dashboard",
+  "version": "0.2.2",
+  "description": "Analytix embeddable analytics dashboard UI",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/dashboard.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Shashank519915/analytix.git",
+    "directory": "packages/dashboard"
+  },
+  "scripts": {
+    "build": "tsc && node -e \"require('fs').copyFileSync('src/dashboard.css','dist/dashboard.css')\"",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "recharts": ">=2",
+    "lucide-react": ">=0.400"
+  },
+  "dependencies": {
+    "@analytix/core": "^0.2.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "typescript": "^5",
+    "@analytix/core": "*"
+  }
+}