@analytix/dashboard 0.2.2 → 0.2.3

package/dist/AnalyticsDashboard.d.ts

@@ -13,6 +13,10 @@ export interface AnalyticsDashboardProps {
     defaultWidgets?: DashboardWidgetId[];
     /** PATCH endpoint to persist widget layout as site default. */
     settingsEndpoint?: string;
+    /** Called after widget layout is saved as site default. */
+    onWidgetsSaved?: () => void;
+    /** Called when saving widget layout fails. */
+    onWidgetsSaveError?: (message: string) => void;
 }
-export declare function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, loadingFallback, defaultTheme, defaultWidgets, settingsEndpoint, }: AnalyticsDashboardProps): import("react").JSX.Element;
+export declare function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, loadingFallback, defaultTheme, defaultWidgets, settingsEndpoint, onWidgetsSaved, onWidgetsSaveError, }: AnalyticsDashboardProps): import("react").JSX.Element;
 export {};

package/dist/AnalyticsDashboard.js

@@ -47,7 +47,7 @@ function useResolvedTheme(mode) {
     }, [mode]);
     return resolved;
 }
-export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, loadingFallback, defaultTheme = "system", defaultWidgets = DEFAULT_DASHBOARD_WIDGETS, settingsEndpoint, }) {
+export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, loadingFallback, defaultTheme = "system", defaultWidgets = DEFAULT_DASHBOARD_WIDGETS, settingsEndpoint, onWidgetsSaved, onWidgetsSaveError, }) {
     const summaryUrl = summaryEndpoint ?? `/api/v1/sites/${siteId}/summary`;
     const exportUrl = exportEndpoint ?? `/api/v1/sites/${siteId}/export`;
     const [range, setRange] = useState("7d");
@@ -68,6 +68,7 @@ export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, lo
     const hasLoadedRef = useRef(false);
     const [showWidgetCustomize, setShowWidgetCustomize] = useState(false);
     const [savingDefaultWidgets, setSavingDefaultWidgets] = useState(false);
+    const [retryNonce, setRetryNonce] = useState(0);
     const { widgets, toggleWidget, resetToDefault, isVisible } = useDashboardWidgets(siteId, defaultWidgets);
     const filterParams = useMemo(() => {
         const params = new URLSearchParams({
@@ -119,7 +120,7 @@ export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, lo
             setRefreshing(true);
         }
         setError("");
-        fetch(`${summaryUrl}?${filterParams.toString()}`)
+        fetch(`${summaryUrl}?${filterParams.toString()}`, { credentials: "same-origin" })
             .then(async (res) => {
             if (!res.ok) {
                 const payload = await res.json().catch(() => ({}));
@@ -146,7 +147,7 @@ export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, lo
         return () => {
             cancelled = true;
         };
-    }, [summaryUrl, filterParams]);
+    }, [summaryUrl, filterParams, retryNonce]);
     const chartData = useMemo(() => (summary?.buckets ?? []).map((bucket) => ({
         label: formatBucketLabel(bucket.bucket_start, granularity),
         views: bucket.page_views,
@@ -157,7 +158,10 @@ export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, lo
         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 }) }));
+        return (_jsxs("div", { className: `analytix-dash ${themeClass}`, children: [_jsx("p", { className: "error", children: error }), _jsx("button", { type: "button", className: "btnSecondary", style: { marginTop: 12 }, onClick: () => {
+                        setError("");
+                        setRetryNonce((n) => n + 1);
+                    }, children: "Retry" })] }));
     }
     if (!summary) {
         return (_jsx("div", { className: `analytix-dash ${themeClass}`, children: _jsx("p", { className: "emptyState", children: "No analytics data yet." }) }));
@@ -172,11 +176,21 @@ export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, lo
             return;
         setSavingDefaultWidgets(true);
         try {
-            await fetch(settingsEndpoint, {
+            const res = await fetch(settingsEndpoint, {
                 method: "PATCH",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({ analytics_config: { dashboard_widgets: widgets } }),
             });
+            if (!res.ok) {
+                const payload = await res.json().catch(() => ({}));
+                const message = typeof payload.error === "string" ? payload.error : "Failed to save widget layout";
+                onWidgetsSaveError?.(message);
+                return;
+            }
+            onWidgetsSaved?.();
+        }
+        catch {
+            onWidgetsSaveError?.("Failed to save widget layout");
         }
         finally {
             setSavingDefaultWidgets(false);
@@ -187,12 +201,12 @@ export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, lo
                                     : "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: {
+                                        }, 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: chartData.length === 0 ? (_jsx("p", { className: "emptyState", children: "No traffic recorded for this period." })) : (_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) => ({
+                                        } }), _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`,

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@analytix/dashboard",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Analytix embeddable analytics dashboard UI",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src/dashboard.css"
   ],
   "exports": {
     ".": {
@@ -14,7 +15,7 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./styles.css": "./dist/dashboard.css"
+    "./styles.css": "./src/dashboard.css"
   },
   "publishConfig": {
     "access": "public",
@@ -35,7 +36,7 @@
     "lucide-react": ">=0.400"
   },
   "dependencies": {
-    "@analytix/core": "^0.2.2"
+    "@analytix/core": "^0.3.0"
   },
   "devDependencies": {
     "@types/react": "^19",

package/src/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;
+}