@burdenoff/microfe-devportal 2026.625.9 → 2026.625.10

package/dist/devportal/pages/AnalyticsDashboardPage.js

@@ -1,28 +1,29 @@
 import { useDevportal as e } from "../providers/DevportalProvider.js";
 import { EmptyState as t } from "../components/EmptyState.js";
-import { useGetAnalyticsDashboardOptionsQuery as n, useGetApplicationAnalyticsDashboardQuery as ee } from "../../generated/global-operations.js";
-import { getErrorMessage as r } from "../hooks/useGraphQL.js";
-import { PageLayout as i, PageSection as a } from "../components/PageLayout.js";
-import { StatCard as o, StatCardGrid as s } from "../components/StatCard.js";
+import { useGetAnalyticsDashboardOptionsQuery as n, useGetApplicationAnalyticsDashboardQuery as r } from "../../generated/global-operations.js";
+import { getErrorMessage as i } from "../hooks/useGraphQL.js";
+import { PageLayout as a, PageSection as o } from "../components/PageLayout.js";
+import { StatCard as s, StatCardGrid as ee } from "../components/StatCard.js";
 import { AppListItem as te } from "../components/AppCard.js";
 import { DataTable as ne } from "../components/DataTable.js";
 import "../hooks/index.js";
-import { Tooltip as c } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/component/Tooltip.js";
-import { ResponsiveContainer as l } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/component/ResponsiveContainer.js";
-import { Bar as u } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/cartesian/Bar.js";
-import { CartesianGrid as d } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/cartesian/CartesianGrid.js";
-import { Line as f } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/cartesian/Line.js";
-import { XAxis as p } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/cartesian/XAxis.js";
-import { YAxis as m } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/cartesian/YAxis.js";
-import { LineChart as re } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/chart/LineChart.js";
-import { BarChart as h } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/chart/BarChart.js";
-import { useTr as ie } from "../utils/i18n.js";
-import { useEffect as g, useMemo as _, useState as v } from "react";
-import { Activity as ae, AlertCircle as y, AlertTriangle as oe, BarChart3 as b, Clock as x, Download as S, Loader2 as C, Star as se, Users as w, Zap as ce } from "lucide-react";
-import { useParams as T } from "react-router-dom";
-import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { Tooltip as c } from "../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as l } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { Bar as u } from "../../node_modules/recharts/es6/cartesian/Bar.js";
+import { CartesianGrid as d } from "../../node_modules/recharts/es6/cartesian/CartesianGrid.js";
+import { Line as f } from "../../node_modules/recharts/es6/cartesian/Line.js";
+import { XAxis as p } from "../../node_modules/recharts/es6/cartesian/XAxis.js";
+import { YAxis as m } from "../../node_modules/recharts/es6/cartesian/YAxis.js";
+import { LineChart as re } from "../../node_modules/recharts/es6/chart/LineChart.js";
+import { BarChart as ie } from "../../node_modules/recharts/es6/chart/BarChart.js";
+import { useTr as ae } from "../utils/i18n.js";
+import { useEffect as h, useMemo as g, useState as _ } from "react";
+import { Activity as v, AlertCircle as y, AlertTriangle as oe, BarChart3 as b, Clock as x, Loader2 as S, Users as se } from "lucide-react";
+import { useParams as C } from "react-router-dom";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { EmphasisPanel as D, GlassCard as O } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/pages/AnalyticsDashboardPage.tsx
-var le = {
+var ce = {
 	"7d": 7,
 	"30d": 30,
 	"90d": 90
@@ -32,33 +33,33 @@ var le = {
 	tertiary: "var(--color-chart-4)",
 	negative: "var(--color-chart-negative)"
 }, A = () => {
-	let { appId: A } = T(), { navigate: ue, basePath: de, activeOrgId: j } = e(), M = ie(), [N, fe] = v("30d"), [P, F] = v(A || ""), I = _(() => /* @__PURE__ */ new Date(), []), L = _(() => {
-		let e = new Date(I);
-		return e.setDate(e.getDate() - le[N]), e.toISOString();
-	}, [I, N]), { data: R, loading: z, error: B } = n({
+	let { appId: A } = C(), { navigate: j, basePath: le, activeOrgId: M } = e(), N = ae(), [P, F] = _("30d"), [I, L] = _(A || ""), R = g(() => /* @__PURE__ */ new Date(), []), z = g(() => {
+		let e = new Date(R);
+		return e.setDate(e.getDate() - ce[P]), e.toISOString();
+	}, [R, P]), { data: B, loading: V, error: H } = n({
 		skip: !!A,
 		fetchPolicy: "cache-and-network"
-	}), { data: V, loading: pe, error: H } = ee({
+	}), { data: U, loading: ue, error: W } = r({
 		variables: {
-			applicationId: P || A || "",
+			applicationId: I || A || "",
 			period: "daily",
-			startDate: L,
-			endDate: I.toISOString()
+			startDate: z,
+			endDate: R.toISOString()
 		},
-		skip: !(P || A),
+		skip: !(I || A),
 		fetchPolicy: "cache-and-network"
-	}), U = R?.applications?.edges?.map((e) => e.node) ?? [], W = j ? U.filter((e) => e.developerOrganizationId === j) : U, G = V?.application;
-	g(() => {
-		let e = G?.name, t = A || P;
+	}), G = B?.applications?.edges?.map((e) => e.node) ?? [], K = M ? G.filter((e) => e.developerOrganizationId === M) : G, q = U?.application;
+	h(() => {
+		let e = q?.name, t = A || I;
 		if (!t || !e) return;
 		let n = window.__breadcrumbRegistry;
 		return n?.register(t, e), () => n?.unregister(t);
 	}, [
 		A,
-		P,
-		G?.name
+		I,
+		q?.name
 	]);
-	let K = [...V?.applicationAnalytics ?? []].sort((e, t) => new Date(e.date).getTime() - new Date(t.date).getTime()), q = K[K.length - 1], J = K[K.length - 2], Y = K.map((e) => ({
+	let J = [...U?.applicationAnalytics ?? []].sort((e, t) => new Date(e.date).getTime() - new Date(t.date).getTime()), Y = J[J.length - 1], X = J[J.length - 2], Z = J.map((e) => ({
 		date: new Date(e.date).toLocaleDateString(void 0, {
 			month: "short",
 			day: "numeric"
@@ -69,190 +70,172 @@ var le = {
 		newUsers: e.newUsers,
 		sessions: e.sessions,
 		avgResponseTime: e.avgResponseTime ?? 0
-	})), X = G?.appType, Z = X === "NODE" || X === "WORKFLOW", Q = q && q.apiCalls > 0 ? q.errors / q.apiCalls * 100 : 0, me = J && J.apiCalls > 0 ? J.errors / J.apiCalls * 100 : 0, $ = q?.avgResponseTime && J?.avgResponseTime ? J.avgResponseTime - q.avgResponseTime : void 0, he = (e) => {
-		ue?.(`${de}${e}`);
+	})), Q = Y && Y.apiCalls > 0 ? Y.errors / Y.apiCalls * 100 : 0, de = X && X.apiCalls > 0 ? X.errors / X.apiCalls * 100 : 0, $ = Y?.avgResponseTime && X?.avgResponseTime ? X.avgResponseTime - Y.avgResponseTime : void 0, fe = (e) => {
+		j?.(`${le}${e}`);
 	};
-	return !A && z && !R ? /* @__PURE__ */ D(i, {
-		title: M("devportal.analytics.title", "Analytics"),
-		description: M("devportal.analytics.description", "Explore live application usage and performance metrics"),
-		children: /* @__PURE__ */ D("div", {
-			className: "flex items-center justify-center py-16 text-muted-foreground",
-			children: /* @__PURE__ */ D(C, { className: "h-8 w-8 animate-spin" })
+	return !A && V && !B ? /* @__PURE__ */ T(a, {
+		title: N("devportal.analytics.title", "Analytics"),
+		description: N("devportal.analytics.description", "Explore live application usage and performance metrics"),
+		children: /* @__PURE__ */ T("div", {
+			className: "flex items-center justify-center py-16 text-text-secondary",
+			children: /* @__PURE__ */ T(S, { className: "h-8 w-8 animate-spin" })
 		})
-	}) : !A && B ? /* @__PURE__ */ D(i, {
-		title: M("devportal.analytics.title", "Analytics"),
-		description: M("devportal.analytics.description", "Explore live application usage and performance metrics"),
-		children: /* @__PURE__ */ D(t, {
-			icon: /* @__PURE__ */ D(y, {
+	}) : !A && H ? /* @__PURE__ */ T(a, {
+		title: N("devportal.analytics.title", "Analytics"),
+		description: N("devportal.analytics.description", "Explore live application usage and performance metrics"),
+		children: /* @__PURE__ */ T(t, {
+			icon: /* @__PURE__ */ T(y, {
 				size: 32,
 				className: "text-status-error-text"
 			}),
-			title: M("devportal.analytics.errorLoadApps", "Unable to load applications"),
-			description: r(B)
+			title: N("devportal.analytics.errorLoadApps", "Unable to load applications"),
+			description: i(H)
 		})
-	}) : !A && !P ? /* @__PURE__ */ D(i, {
-		title: M("devportal.analytics.title", "Analytics"),
-		description: M("devportal.analytics.selectAppDescription", "Select an application to review live usage metrics from the public gateway"),
-		children: W.length > 0 ? /* @__PURE__ */ D("div", {
+	}) : !A && !I ? /* @__PURE__ */ T(a, {
+		title: N("devportal.analytics.title", "Analytics"),
+		description: N("devportal.analytics.selectAppDescription", "Select an application to review live usage metrics from the public gateway"),
+		children: K.length > 0 ? /* @__PURE__ */ T("div", {
 			className: "space-y-2",
-			children: W.map((e) => /* @__PURE__ */ D(te, {
+			children: K.map((e) => /* @__PURE__ */ T(te, {
 				app: e,
-				onClick: () => F(e.id)
+				onClick: () => L(e.id)
 			}, e.id))
-		}) : /* @__PURE__ */ D(t, {
-			icon: /* @__PURE__ */ D(b, { size: 32 }),
-			title: M("devportal.analytics.noAppsTitle", "No applications available"),
-			description: M("devportal.analytics.noAppsDescription", "Create an application before viewing analytics.")
+		}) : /* @__PURE__ */ T(t, {
+			illustration: "empty-data",
+			icon: /* @__PURE__ */ T(b, { size: 32 }),
+			title: N("devportal.analytics.noAppsTitle", "No applications available"),
+			description: N("devportal.analytics.noAppsDescription", "Create an application before viewing analytics.")
 		})
-	}) : H ? /* @__PURE__ */ D(i, {
-		title: M("devportal.analytics.title", "Analytics"),
-		description: M("devportal.analytics.description", "Explore live application usage and performance metrics"),
-		backLink: P ? `/apps/${P}` : void 0,
-		backLabel: M("devportal.analytics.backToApplication", "Back to Application"),
-		children: /* @__PURE__ */ D(t, {
-			icon: /* @__PURE__ */ D(y, {
+	}) : W ? /* @__PURE__ */ T(a, {
+		title: N("devportal.analytics.title", "Analytics"),
+		description: N("devportal.analytics.description", "Explore live application usage and performance metrics"),
+		backLink: I ? `/apps/${I}` : void 0,
+		backLabel: N("devportal.analytics.backToApplication", "Back to Application"),
+		children: /* @__PURE__ */ T(t, {
+			icon: /* @__PURE__ */ T(y, {
 				size: 32,
 				className: "text-status-error-text"
 			}),
-			title: M("devportal.analytics.errorLoadAnalytics", "Unable to load analytics"),
-			description: r(H)
+			title: N("devportal.analytics.errorLoadAnalytics", "Unable to load analytics"),
+			description: i(W)
 		})
-	}) : /* @__PURE__ */ D(i, {
-		title: A ? M("devportal.analytics.appTitle", "Application Analytics") : M("devportal.analytics.title", "Analytics"),
-		description: G ? `${M("devportal.analytics.liveUsageFor", "Live usage and performance for")} ${G.name}` : M("devportal.analytics.description", "Explore live application usage and performance metrics"),
-		backLink: A && G ? `/apps/${G.id}` : void 0,
-		backLabel: M("devportal.analytics.backToApplication", "Back to Application"),
-		actions: /* @__PURE__ */ O("div", {
+	}) : /* @__PURE__ */ T(a, {
+		title: A ? N("devportal.analytics.appTitle", "Application Analytics") : N("devportal.analytics.title", "Analytics"),
+		description: q ? `${N("devportal.analytics.liveUsageFor", "Live usage and performance for")} ${q.name}` : N("devportal.analytics.description", "Explore live application usage and performance metrics"),
+		purpose: N("devportal.analytics.purpose", "Analytics shows how your apps are actually used — API call volume, active installs, latency, and error rates over time — so you can spot regressions, plan capacity, and prove value to your users. Pick an app and a time range to drill in."),
+		backLink: A && q ? `/apps/${q.id}` : void 0,
+		backLabel: N("devportal.analytics.backToApplication", "Back to Application"),
+		actions: /* @__PURE__ */ E("div", {
 			className: "flex flex-wrap gap-2",
-			children: [!A && W.length > 0 && /* @__PURE__ */ D("select", {
-				value: P,
-				onChange: (e) => F(e.target.value),
-				"aria-label": M("devportal.analytics.selectAppAria", "Select application"),
-				className: "rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
-				children: W.map((e) => /* @__PURE__ */ D("option", {
+			children: [!A && K.length > 0 && /* @__PURE__ */ T("select", {
+				value: I,
+				onChange: (e) => L(e.target.value),
+				"aria-label": N("devportal.analytics.selectAppAria", "Select application"),
+				className: "rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
+				children: K.map((e) => /* @__PURE__ */ T("option", {
 					value: e.id,
 					children: e.name
 				}, e.id))
-			}), /* @__PURE__ */ O("select", {
-				value: N,
-				onChange: (e) => fe(e.target.value),
-				"aria-label": M("devportal.analytics.selectRangeAria", "Select time range"),
-				className: "rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
+			}), /* @__PURE__ */ E("select", {
+				value: P,
+				onChange: (e) => F(e.target.value),
+				"aria-label": N("devportal.analytics.selectRangeAria", "Select time range"),
+				className: "rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
 				children: [
-					/* @__PURE__ */ D("option", {
+					/* @__PURE__ */ T("option", {
 						value: "7d",
-						children: M("devportal.analytics.range.7d", "Last 7 days")
+						children: N("devportal.analytics.range.7d", "Last 7 days")
 					}),
-					/* @__PURE__ */ D("option", {
+					/* @__PURE__ */ T("option", {
 						value: "30d",
-						children: M("devportal.analytics.range.30d", "Last 30 days")
+						children: N("devportal.analytics.range.30d", "Last 30 days")
 					}),
-					/* @__PURE__ */ D("option", {
+					/* @__PURE__ */ T("option", {
 						value: "90d",
-						children: M("devportal.analytics.range.90d", "Last 90 days")
+						children: N("devportal.analytics.range.90d", "Last 90 days")
 					})
 				]
 			})]
 		}),
-		children: pe && !K.length ? /* @__PURE__ */ D("div", {
-			className: "flex items-center justify-center py-16 text-muted-foreground",
-			children: /* @__PURE__ */ D(C, { className: "h-8 w-8 animate-spin" })
-		}) : K.length > 0 || Z ? /* @__PURE__ */ D(E, { children: Z ? /* @__PURE__ */ O(s, {
-			columns: 4,
-			children: [
-				/* @__PURE__ */ D(o, {
-					title: M("devportal.analytics.totalInstalls", "Total Installs"),
-					value: (G?.installCount ?? 0).toLocaleString(),
-					icon: /* @__PURE__ */ D(S, { size: 20 })
-				}),
-				/* @__PURE__ */ D(o, {
-					title: M("devportal.analytics.activeInstalls", "Active Installs"),
-					value: (G?.activeInstallCount ?? 0).toLocaleString(),
-					icon: /* @__PURE__ */ D(ce, { size: 20 })
-				}),
-				/* @__PURE__ */ D(o, {
-					title: M("devportal.analytics.averageRating", "Average Rating"),
-					value: G?.averageRating ? `${G.averageRating.toFixed(1)} ★` : M("devportal.common.na", "N/A"),
-					icon: /* @__PURE__ */ D(se, { size: 20 })
-				}),
-				/* @__PURE__ */ D(o, {
-					title: M("devportal.analytics.totalReviews", "Total Reviews"),
-					value: (G?.reviewCount ?? 0).toLocaleString(),
-					icon: /* @__PURE__ */ D(w, { size: 20 })
+		children: ue && !J.length ? /* @__PURE__ */ T("div", {
+			className: "flex items-center justify-center py-16 text-text-secondary",
+			children: /* @__PURE__ */ T(S, { className: "h-8 w-8 animate-spin" })
+		}) : J.length > 0 ? /* @__PURE__ */ E(w, { children: [
+			/* @__PURE__ */ T(D, {
+				className: "mb-6",
+				children: /* @__PURE__ */ E(ee, {
+					columns: 4,
+					children: [
+						/* @__PURE__ */ T(s, {
+							title: N("devportal.analytics.apiCalls", "API Calls"),
+							value: (Y?.apiCalls ?? 0).toLocaleString(),
+							icon: /* @__PURE__ */ T(v, { size: 20 })
+						}),
+						/* @__PURE__ */ T(s, {
+							title: N("devportal.analytics.activeUsers", "Active Users"),
+							value: (Y?.activeUsers ?? 0).toLocaleString(),
+							icon: /* @__PURE__ */ T(se, { size: 20 })
+						}),
+						/* @__PURE__ */ T(s, {
+							title: N("devportal.analytics.errorRate", "Error Rate"),
+							value: `${Q.toFixed(2)}%`,
+							icon: /* @__PURE__ */ T(oe, { size: 20 }),
+							trend: X ? {
+								value: de - Q,
+								label: N("devportal.analytics.vsPrevious", "vs previous period")
+							} : void 0
+						}),
+						/* @__PURE__ */ T(s, {
+							title: N("devportal.analytics.avgResponseTime", "Avg Response Time"),
+							value: Y?.avgResponseTime ? `${Y.avgResponseTime}ms` : N("devportal.common.na", "N/A"),
+							icon: /* @__PURE__ */ T(x, { size: 20 }),
+							trend: typeof $ == "number" ? {
+								value: $,
+								label: N("devportal.analytics.fasterThanPrevious", "faster than previous")
+							} : void 0
+						})
+					]
 				})
-			]
-		}) : /* @__PURE__ */ O(E, { children: [
-			/* @__PURE__ */ O(s, {
-				columns: 4,
-				children: [
-					/* @__PURE__ */ D(o, {
-						title: M("devportal.analytics.apiCalls", "API Calls"),
-						value: (q?.apiCalls ?? 0).toLocaleString(),
-						icon: /* @__PURE__ */ D(ae, { size: 20 })
-					}),
-					/* @__PURE__ */ D(o, {
-						title: M("devportal.analytics.activeUsers", "Active Users"),
-						value: (q?.activeUsers ?? 0).toLocaleString(),
-						icon: /* @__PURE__ */ D(w, { size: 20 })
-					}),
-					/* @__PURE__ */ D(o, {
-						title: M("devportal.analytics.errorRate", "Error Rate"),
-						value: `${Q.toFixed(2)}%`,
-						icon: /* @__PURE__ */ D(oe, { size: 20 }),
-						trend: J ? {
-							value: me - Q,
-							label: M("devportal.analytics.vsPrevious", "vs previous period")
-						} : void 0
-					}),
-					/* @__PURE__ */ D(o, {
-						title: M("devportal.analytics.avgResponseTime", "Avg Response Time"),
-						value: q?.avgResponseTime ? `${q.avgResponseTime}ms` : M("devportal.common.na", "N/A"),
-						icon: /* @__PURE__ */ D(x, { size: 20 }),
-						trend: typeof $ == "number" ? {
-							value: $,
-							label: M("devportal.analytics.fasterThanPrevious", "faster than previous")
-						} : void 0
-					})
-				]
 			}),
-			/* @__PURE__ */ O("div", {
+			/* @__PURE__ */ E("div", {
 				className: "grid gap-6 xl:grid-cols-2",
-				children: [/* @__PURE__ */ D(a, {
-					title: M("devportal.analytics.trafficTrend", "Traffic trend"),
-					children: /* @__PURE__ */ D("div", {
-						className: "rounded-lg border bg-card p-4",
-						children: /* @__PURE__ */ D(l, {
+				children: [/* @__PURE__ */ T(o, {
+					title: N("devportal.analytics.trafficTrend", "Traffic trend"),
+					children: /* @__PURE__ */ T(O, {
+						treatment: "insight",
+						className: "p-4",
+						children: /* @__PURE__ */ T(l, {
 							width: "100%",
 							height: 300,
-							children: /* @__PURE__ */ O(re, {
-								data: Y,
+							children: /* @__PURE__ */ E(re, {
+								data: Z,
 								children: [
-									/* @__PURE__ */ D(d, {
+									/* @__PURE__ */ T(d, {
 										strokeDasharray: "3 3",
 										stroke: "var(--color-chart-grid)"
 									}),
-									/* @__PURE__ */ D(p, {
+									/* @__PURE__ */ T(p, {
 										dataKey: "date",
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ D(m, {
+									/* @__PURE__ */ T(m, {
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ D(c, { contentStyle: {
+									/* @__PURE__ */ T(c, { contentStyle: {
 										backgroundColor: "var(--color-card)",
 										border: "1px solid var(--color-border-default)",
 										borderRadius: 12
 									} }),
-									/* @__PURE__ */ D(f, {
+									/* @__PURE__ */ T(f, {
 										type: "monotone",
 										dataKey: "apiCalls",
 										stroke: k.primary,
 										strokeWidth: 2,
 										dot: !1
 									}),
-									/* @__PURE__ */ D(f, {
+									/* @__PURE__ */ T(f, {
 										type: "monotone",
 										dataKey: "errors",
 										stroke: k.negative,
@@ -263,35 +246,36 @@ var le = {
 							})
 						})
 					})
-				}), /* @__PURE__ */ D(a, {
-					title: M("devportal.analytics.userActivity", "User activity"),
-					children: /* @__PURE__ */ D("div", {
-						className: "rounded-lg border bg-card p-4",
-						children: /* @__PURE__ */ D(l, {
+				}), /* @__PURE__ */ T(o, {
+					title: N("devportal.analytics.userActivity", "User activity"),
+					children: /* @__PURE__ */ T(O, {
+						treatment: "insight",
+						className: "p-4",
+						children: /* @__PURE__ */ T(l, {
 							width: "100%",
 							height: 300,
-							children: /* @__PURE__ */ O(h, {
-								data: Y,
+							children: /* @__PURE__ */ E(ie, {
+								data: Z,
 								children: [
-									/* @__PURE__ */ D(d, {
+									/* @__PURE__ */ T(d, {
 										strokeDasharray: "3 3",
 										stroke: "var(--color-chart-grid)"
 									}),
-									/* @__PURE__ */ D(p, {
+									/* @__PURE__ */ T(p, {
 										dataKey: "date",
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ D(m, {
+									/* @__PURE__ */ T(m, {
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ D(c, { contentStyle: {
+									/* @__PURE__ */ T(c, { contentStyle: {
 										backgroundColor: "var(--color-card)",
 										border: "1px solid var(--color-border-default)",
 										borderRadius: 12
 									} }),
-									/* @__PURE__ */ D(u, {
+									/* @__PURE__ */ T(u, {
 										dataKey: "activeUsers",
 										fill: k.primary,
 										radius: [
@@ -301,7 +285,7 @@ var le = {
 											0
 										]
 									}),
-									/* @__PURE__ */ D(u, {
+									/* @__PURE__ */ T(u, {
 										dataKey: "newUsers",
 										fill: k.secondary,
 										radius: [
@@ -317,15 +301,15 @@ var le = {
 					})
 				})]
 			}),
-			/* @__PURE__ */ D(a, {
-				title: M("devportal.analytics.dailyBreakdown", "Daily breakdown"),
-				children: /* @__PURE__ */ D(ne, {
-					data: K,
+			/* @__PURE__ */ T(o, {
+				title: N("devportal.analytics.dailyBreakdown", "Daily breakdown"),
+				children: /* @__PURE__ */ T(ne, {
+					data: J,
 					keyField: "id",
 					columns: [
 						{
 							key: "date",
-							header: M("devportal.analytics.date", "Date"),
+							header: N("devportal.analytics.date", "Date"),
 							render: (e) => new Date(e.date).toLocaleDateString(void 0, {
 								month: "short",
 								day: "numeric",
@@ -334,46 +318,47 @@ var le = {
 						},
 						{
 							key: "apiCalls",
-							header: M("devportal.analytics.apiCalls", "API Calls"),
+							header: N("devportal.analytics.apiCalls", "API Calls"),
 							render: (e) => e.apiCalls.toLocaleString()
 						},
 						{
 							key: "errors",
-							header: M("devportal.analytics.errors", "Errors"),
+							header: N("devportal.analytics.errors", "Errors"),
 							render: (e) => e.errors.toLocaleString()
 						},
 						{
 							key: "activeUsers",
-							header: M("devportal.analytics.activeUsers", "Active Users"),
+							header: N("devportal.analytics.activeUsers", "Active Users"),
 							render: (e) => e.activeUsers.toLocaleString()
 						},
 						{
 							key: "newUsers",
-							header: M("devportal.analytics.newUsers", "New Users"),
+							header: N("devportal.analytics.newUsers", "New Users"),
 							render: (e) => e.newUsers.toLocaleString()
 						},
 						{
 							key: "avgResponseTime",
-							header: M("devportal.analytics.avgResponse", "Avg Response"),
-							render: (e) => e.avgResponseTime ? `${e.avgResponseTime}ms` : M("devportal.common.na", "N/A")
+							header: N("devportal.analytics.avgResponse", "Avg Response"),
+							render: (e) => e.avgResponseTime ? `${e.avgResponseTime}ms` : N("devportal.common.na", "N/A")
 						},
 						{
 							key: "sessions",
-							header: M("devportal.analytics.sessions", "Sessions"),
+							header: N("devportal.analytics.sessions", "Sessions"),
 							render: (e) => e.sessions.toLocaleString()
 						}
 					]
 				})
 			})
-		] }) }) : /* @__PURE__ */ D(t, {
-			icon: /* @__PURE__ */ D(b, { size: 32 }),
-			title: M("devportal.analytics.noAnalyticsTitle", "No analytics available yet"),
-			description: M("devportal.analytics.noAnalyticsDescription", "Analytics will appear after this application starts receiving traffic through the public gateway."),
-			action: A ? void 0 : /* @__PURE__ */ D("button", {
+		] }) : /* @__PURE__ */ T(t, {
+			illustration: "empty-data",
+			icon: /* @__PURE__ */ T(b, { size: 32 }),
+			title: N("devportal.analytics.noAnalyticsTitle", "No analytics available yet"),
+			description: N("devportal.analytics.noAnalyticsDescription", "Analytics will appear after this application starts receiving traffic through the public gateway."),
+			action: A ? void 0 : /* @__PURE__ */ T("button", {
 				type: "button",
-				onClick: () => he("/apps"),
-				className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
-				children: M("devportal.analytics.viewApplications", "View applications")
+				onClick: () => fe("/apps"),
+				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+				children: N("devportal.analytics.viewApplications", "View applications")
 			})
 		})
 	});