@burdenoff/microfe-devportal 2026.510.110

package/dist/devportal/pages/AnalyticsDashboardPage.js

@@ -0,0 +1,349 @@
+import { useDevportal as e } from "../providers/DevportalProvider.js";
+import { EmptyState as t } from "../components/EmptyState.js";
+import { PageLayout as n, PageSection as r } from "../components/PageLayout.js";
+import { StatCard as i, StatCardGrid as a } from "../components/StatCard.js";
+import { AppListItem as o } from "../components/AppCard.js";
+import { DataTable as s } from "../components/DataTable.js";
+import { useGetAnalyticsDashboardOptionsQuery as ee, useGetApplicationAnalyticsDashboardQuery as c } from "../../generated/global-operations.js";
+import { getErrorMessage as l } from "../hooks/useGraphQL.js";
+import "../hooks/index.js";
+import { Tooltip as u } from "../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as d } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { Bar as f } from "../../node_modules/recharts/es6/cartesian/Bar.js";
+import { CartesianGrid as p } from "../../node_modules/recharts/es6/cartesian/CartesianGrid.js";
+import { Line as m } from "../../node_modules/recharts/es6/cartesian/Line.js";
+import { XAxis as h } from "../../node_modules/recharts/es6/cartesian/XAxis.js";
+import { YAxis as g } from "../../node_modules/recharts/es6/cartesian/YAxis.js";
+import { LineChart as te } from "../../node_modules/recharts/es6/chart/LineChart.js";
+import { BarChart as ne } from "../../node_modules/recharts/es6/chart/BarChart.js";
+import { useTr as _ } from "../utils/i18n.js";
+import { useMemo as v, useState as y } from "react";
+import { Activity as re, AlertCircle as b, AlertTriangle as x, BarChart3 as S, Clock as C, Loader2 as w, Users as T } from "lucide-react";
+import { useParams as E } from "react-router-dom";
+import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+//#region src/devportal/pages/AnalyticsDashboardPage.tsx
+var A = {
+	"7d": 7,
+	"30d": 30,
+	"90d": 90
+}, j = {
+	primary: "var(--color-chart-1)",
+	secondary: "var(--color-chart-2)",
+	tertiary: "var(--color-chart-4)",
+	negative: "var(--color-chart-negative)"
+}, M = () => {
+	let { appId: M } = E(), { navigate: ie, basePath: ae } = e(), N = _(), [P, F] = y("30d"), [I, L] = y(M || ""), R = v(() => /* @__PURE__ */ new Date(), []), z = v(() => {
+		let e = new Date(R);
+		return e.setDate(e.getDate() - A[P]), e.toISOString();
+	}, [R, P]), { data: B, loading: V, error: H } = ee({
+		skip: !!M,
+		fetchPolicy: "cache-and-network"
+	}), { data: U, loading: W, error: G } = c({
+		variables: {
+			applicationId: I || M || "",
+			period: "daily",
+			startDate: z,
+			endDate: R.toISOString()
+		},
+		skip: !(I || M),
+		fetchPolicy: "cache-and-network"
+	}), K = B?.applications?.edges?.map((e) => e.node) ?? [], q = U?.application, 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"
+		}),
+		apiCalls: e.apiCalls,
+		errors: e.errors,
+		activeUsers: e.activeUsers,
+		newUsers: e.newUsers,
+		sessions: e.sessions,
+		avgResponseTime: e.avgResponseTime ?? 0
+	})), Q = Y && Y.apiCalls > 0 ? Y.errors / Y.apiCalls * 100 : 0, oe = X && X.apiCalls > 0 ? X.errors / X.apiCalls * 100 : 0, $ = Y?.avgResponseTime && X?.avgResponseTime ? X.avgResponseTime - Y.avgResponseTime : void 0, se = (e) => {
+		ie?.(`${ae}${e}`);
+	};
+	return !M && V && !B ? /* @__PURE__ */ O(n, {
+		title: N("devportal.analytics.title", "Analytics"),
+		description: N("devportal.analytics.description", "Explore live application usage and performance metrics"),
+		children: /* @__PURE__ */ O("div", {
+			className: "flex items-center justify-center py-16 text-muted-foreground",
+			children: /* @__PURE__ */ O(w, { className: "h-8 w-8 animate-spin" })
+		})
+	}) : !M && H ? /* @__PURE__ */ O(n, {
+		title: N("devportal.analytics.title", "Analytics"),
+		description: N("devportal.analytics.description", "Explore live application usage and performance metrics"),
+		children: /* @__PURE__ */ O(t, {
+			icon: /* @__PURE__ */ O(b, {
+				size: 32,
+				className: "text-status-error-text"
+			}),
+			title: N("devportal.analytics.errorLoadApps", "Unable to load applications"),
+			description: l(H)
+		})
+	}) : !M && !I ? /* @__PURE__ */ O(n, {
+		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__ */ O("div", {
+			className: "space-y-2",
+			children: K.map((e) => /* @__PURE__ */ O(o, {
+				app: e,
+				onClick: () => L(e.id)
+			}, e.id))
+		}) : /* @__PURE__ */ O(t, {
+			icon: /* @__PURE__ */ O(S, { size: 32 }),
+			title: N("devportal.analytics.noAppsTitle", "No applications available"),
+			description: N("devportal.analytics.noAppsDescription", "Create an application before viewing analytics.")
+		})
+	}) : G ? /* @__PURE__ */ O(n, {
+		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__ */ O(t, {
+			icon: /* @__PURE__ */ O(b, {
+				size: 32,
+				className: "text-status-error-text"
+			}),
+			title: N("devportal.analytics.errorLoadAnalytics", "Unable to load analytics"),
+			description: l(G)
+		})
+	}) : /* @__PURE__ */ O(n, {
+		title: M ? 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"),
+		backLink: M && q ? `/apps/${q.id}` : void 0,
+		backLabel: N("devportal.analytics.backToApplication", "Back to Application"),
+		actions: /* @__PURE__ */ k("div", {
+			className: "flex flex-wrap gap-2",
+			children: [!M && K.length > 0 && /* @__PURE__ */ O("select", {
+				value: I,
+				onChange: (e) => L(e.target.value),
+				"aria-label": N("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: K.map((e) => /* @__PURE__ */ O("option", {
+					value: e.id,
+					children: e.name
+				}, e.id))
+			}), /* @__PURE__ */ k("select", {
+				value: P,
+				onChange: (e) => F(e.target.value),
+				"aria-label": N("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",
+				children: [
+					/* @__PURE__ */ O("option", {
+						value: "7d",
+						children: N("devportal.analytics.range.7d", "Last 7 days")
+					}),
+					/* @__PURE__ */ O("option", {
+						value: "30d",
+						children: N("devportal.analytics.range.30d", "Last 30 days")
+					}),
+					/* @__PURE__ */ O("option", {
+						value: "90d",
+						children: N("devportal.analytics.range.90d", "Last 90 days")
+					})
+				]
+			})]
+		}),
+		children: W && !J.length ? /* @__PURE__ */ O("div", {
+			className: "flex items-center justify-center py-16 text-muted-foreground",
+			children: /* @__PURE__ */ O(w, { className: "h-8 w-8 animate-spin" })
+		}) : J.length > 0 ? /* @__PURE__ */ k(D, { children: [
+			/* @__PURE__ */ k(a, {
+				columns: 4,
+				children: [
+					/* @__PURE__ */ O(i, {
+						title: N("devportal.analytics.apiCalls", "API Calls"),
+						value: (Y?.apiCalls ?? 0).toLocaleString(),
+						icon: /* @__PURE__ */ O(re, { size: 20 })
+					}),
+					/* @__PURE__ */ O(i, {
+						title: N("devportal.analytics.activeUsers", "Active Users"),
+						value: (Y?.activeUsers ?? 0).toLocaleString(),
+						icon: /* @__PURE__ */ O(T, { size: 20 })
+					}),
+					/* @__PURE__ */ O(i, {
+						title: N("devportal.analytics.errorRate", "Error Rate"),
+						value: `${Q.toFixed(2)}%`,
+						icon: /* @__PURE__ */ O(x, { size: 20 }),
+						trend: X ? {
+							value: oe - Q,
+							label: N("devportal.analytics.vsPrevious", "vs previous period")
+						} : void 0
+					}),
+					/* @__PURE__ */ O(i, {
+						title: N("devportal.analytics.avgResponseTime", "Avg Response Time"),
+						value: Y?.avgResponseTime ? `${Y.avgResponseTime}ms` : N("devportal.common.na", "N/A"),
+						icon: /* @__PURE__ */ O(C, { size: 20 }),
+						trend: typeof $ == "number" ? {
+							value: $,
+							label: N("devportal.analytics.fasterThanPrevious", "faster than previous")
+						} : void 0
+					})
+				]
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "grid gap-6 xl:grid-cols-2",
+				children: [/* @__PURE__ */ O(r, {
+					title: N("devportal.analytics.trafficTrend", "Traffic trend"),
+					children: /* @__PURE__ */ O("div", {
+						className: "rounded-lg border bg-card p-4",
+						children: /* @__PURE__ */ O(d, {
+							width: "100%",
+							height: 300,
+							children: /* @__PURE__ */ k(te, {
+								data: Z,
+								children: [
+									/* @__PURE__ */ O(p, {
+										strokeDasharray: "3 3",
+										stroke: "var(--color-chart-grid)"
+									}),
+									/* @__PURE__ */ O(h, {
+										dataKey: "date",
+										stroke: "var(--color-chart-axis)",
+										fontSize: 12
+									}),
+									/* @__PURE__ */ O(g, {
+										stroke: "var(--color-chart-axis)",
+										fontSize: 12
+									}),
+									/* @__PURE__ */ O(u, { contentStyle: {
+										backgroundColor: "var(--color-card)",
+										border: "1px solid var(--color-border-default)",
+										borderRadius: 12
+									} }),
+									/* @__PURE__ */ O(m, {
+										type: "monotone",
+										dataKey: "apiCalls",
+										stroke: j.primary,
+										strokeWidth: 2,
+										dot: !1
+									}),
+									/* @__PURE__ */ O(m, {
+										type: "monotone",
+										dataKey: "errors",
+										stroke: j.negative,
+										strokeWidth: 2,
+										dot: !1
+									})
+								]
+							})
+						})
+					})
+				}), /* @__PURE__ */ O(r, {
+					title: N("devportal.analytics.userActivity", "User activity"),
+					children: /* @__PURE__ */ O("div", {
+						className: "rounded-lg border bg-card p-4",
+						children: /* @__PURE__ */ O(d, {
+							width: "100%",
+							height: 300,
+							children: /* @__PURE__ */ k(ne, {
+								data: Z,
+								children: [
+									/* @__PURE__ */ O(p, {
+										strokeDasharray: "3 3",
+										stroke: "var(--color-chart-grid)"
+									}),
+									/* @__PURE__ */ O(h, {
+										dataKey: "date",
+										stroke: "var(--color-chart-axis)",
+										fontSize: 12
+									}),
+									/* @__PURE__ */ O(g, {
+										stroke: "var(--color-chart-axis)",
+										fontSize: 12
+									}),
+									/* @__PURE__ */ O(u, { contentStyle: {
+										backgroundColor: "var(--color-card)",
+										border: "1px solid var(--color-border-default)",
+										borderRadius: 12
+									} }),
+									/* @__PURE__ */ O(f, {
+										dataKey: "activeUsers",
+										fill: j.primary,
+										radius: [
+											6,
+											6,
+											0,
+											0
+										]
+									}),
+									/* @__PURE__ */ O(f, {
+										dataKey: "newUsers",
+										fill: j.secondary,
+										radius: [
+											6,
+											6,
+											0,
+											0
+										]
+									})
+								]
+							})
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ O(r, {
+				title: N("devportal.analytics.dailyBreakdown", "Daily breakdown"),
+				children: /* @__PURE__ */ O(s, {
+					data: J,
+					keyField: "id",
+					columns: [
+						{
+							key: "date",
+							header: N("devportal.analytics.date", "Date"),
+							render: (e) => new Date(e.date).toLocaleDateString(void 0, {
+								month: "short",
+								day: "numeric",
+								year: "numeric"
+							})
+						},
+						{
+							key: "apiCalls",
+							header: N("devportal.analytics.apiCalls", "API Calls"),
+							render: (e) => e.apiCalls.toLocaleString()
+						},
+						{
+							key: "errors",
+							header: N("devportal.analytics.errors", "Errors"),
+							render: (e) => e.errors.toLocaleString()
+						},
+						{
+							key: "activeUsers",
+							header: N("devportal.analytics.activeUsers", "Active Users"),
+							render: (e) => e.activeUsers.toLocaleString()
+						},
+						{
+							key: "newUsers",
+							header: N("devportal.analytics.newUsers", "New Users"),
+							render: (e) => e.newUsers.toLocaleString()
+						},
+						{
+							key: "avgResponseTime",
+							header: N("devportal.analytics.avgResponse", "Avg Response"),
+							render: (e) => e.avgResponseTime ? `${e.avgResponseTime}ms` : N("devportal.common.na", "N/A")
+						},
+						{
+							key: "sessions",
+							header: N("devportal.analytics.sessions", "Sessions"),
+							render: (e) => e.sessions.toLocaleString()
+						}
+					]
+				})
+			})
+		] }) : /* @__PURE__ */ O(t, {
+			icon: /* @__PURE__ */ O(S, { 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: M ? void 0 : /* @__PURE__ */ O("button", {
+				type: "button",
+				onClick: () => se("/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: N("devportal.analytics.viewApplications", "View applications")
+			})
+		})
+	});
+};
+//#endregion
+export { M as AnalyticsDashboardPage };
+
+//# sourceMappingURL=AnalyticsDashboardPage.js.map

package/dist/devportal/pages/AnalyticsDashboardPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsDashboardPage.js","names":[],"sources":["../../../src/devportal/pages/AnalyticsDashboardPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport {\n  Activity,\n  AlertCircle,\n  AlertTriangle,\n  BarChart3,\n  Clock,\n  Loader2,\n  Users,\n} from \"lucide-react\";\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { DataTable } from \"../components/DataTable\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { StatCard, StatCardGrid } from \"../components/StatCard\";\nimport { AppListItem } from \"../components/AppCard\";\nimport type { Application } from \"../types\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport {\n  type GetAnalyticsDashboardOptionsQuery,\n  getErrorMessage,\n  useGetAnalyticsDashboardOptionsQuery,\n  useGetApplicationAnalyticsDashboardQuery,\n} from \"../hooks\";\nimport { useTr } from \"../utils/i18n\";\n\ntype TimeRange = \"7d\" | \"30d\" | \"90d\";\n\nconst daysByRange: Record<TimeRange, number> = {\n  \"7d\": 7,\n  \"30d\": 30,\n  \"90d\": 90,\n};\n\nconst chartColors = {\n  primary: \"var(--color-chart-1)\",\n  secondary: \"var(--color-chart-2)\",\n  tertiary: \"var(--color-chart-4)\",\n  negative: \"var(--color-chart-negative)\",\n};\n\nexport const AnalyticsDashboardPage: FC = () => {\n  const { appId } = useParams<{ appId: string }>();\n  const { navigate, basePath } = useDevportal();\n  const tr = useTr();\n  const [timeRange, setTimeRange] = useState<TimeRange>(\"30d\");\n  const [selectedApplicationId, setSelectedApplicationId] = useState(\n    appId || \"\",\n  );\n\n  const now = useMemo(() => new Date(), []);\n  const startDate = useMemo(() => {\n    const nextDate = new Date(now);\n    nextDate.setDate(nextDate.getDate() - daysByRange[timeRange]);\n    return nextDate.toISOString();\n  }, [now, timeRange]);\n\n  const {\n    data: optionsData,\n    loading: optionsLoading,\n    error: optionsError,\n  } = useGetAnalyticsDashboardOptionsQuery({\n    skip: !!appId,\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const { data, loading, error } = useGetApplicationAnalyticsDashboardQuery({\n    variables: {\n      applicationId: selectedApplicationId || appId || \"\",\n      period: \"daily\",\n      startDate,\n      endDate: now.toISOString(),\n    },\n    skip: !(selectedApplicationId || appId),\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const applications: Application[] =\n    optionsData?.applications?.edges?.map(\n      (\n        edge: GetAnalyticsDashboardOptionsQuery[\"applications\"][\"edges\"][number],\n      ) => edge.node as Application,\n    ) ?? [];\n  const selectedApplication = data?.application;\n  const analytics = [...(data?.applicationAnalytics ?? [])].sort(\n    (left, right) =>\n      new Date(left.date).getTime() - new Date(right.date).getTime(),\n  );\n\n  const latest = analytics[analytics.length - 1];\n  const previous = analytics[analytics.length - 2];\n  const chartData = analytics.map((entry) => ({\n    date: new Date(entry.date).toLocaleDateString(undefined, {\n      month: \"short\",\n      day: \"numeric\",\n    }),\n    apiCalls: entry.apiCalls,\n    errors: entry.errors,\n    activeUsers: entry.activeUsers,\n    newUsers: entry.newUsers,\n    sessions: entry.sessions,\n    avgResponseTime: entry.avgResponseTime ?? 0,\n  }));\n\n  const errorRate =\n    latest && latest.apiCalls > 0 ? (latest.errors / latest.apiCalls) * 100 : 0;\n  const previousErrorRate =\n    previous && previous.apiCalls > 0\n      ? (previous.errors / previous.apiCalls) * 100\n      : 0;\n  const responseTrend =\n    latest?.avgResponseTime && previous?.avgResponseTime\n      ? previous.avgResponseTime - latest.avgResponseTime\n      : undefined;\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  if (!appId && optionsLoading && !optionsData) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.description\",\n          \"Explore live application usage and performance metrics\",\n        )}\n      >\n        <div className=\"flex items-center justify-center py-16 text-muted-foreground\">\n          <Loader2 className=\"h-8 w-8 animate-spin\" />\n        </div>\n      </PageLayout>\n    );\n  }\n\n  if (!appId && optionsError) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.description\",\n          \"Explore live application usage and performance metrics\",\n        )}\n      >\n        <EmptyState\n          icon={<AlertCircle size={32} className=\"text-status-error-text\" />}\n          title={tr(\n            \"devportal.analytics.errorLoadApps\",\n            \"Unable to load applications\",\n          )}\n          description={getErrorMessage(optionsError)}\n        />\n      </PageLayout>\n    );\n  }\n\n  if (!appId && !selectedApplicationId) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.selectAppDescription\",\n          \"Select an application to review live usage metrics from the public gateway\",\n        )}\n      >\n        {applications.length > 0 ? (\n          <div className=\"space-y-2\">\n            {applications.map((application) => (\n              <AppListItem\n                key={application.id}\n                app={application}\n                onClick={() => setSelectedApplicationId(application.id)}\n              />\n            ))}\n          </div>\n        ) : (\n          <EmptyState\n            icon={<BarChart3 size={32} />}\n            title={tr(\n              \"devportal.analytics.noAppsTitle\",\n              \"No applications available\",\n            )}\n            description={tr(\n              \"devportal.analytics.noAppsDescription\",\n              \"Create an application before viewing analytics.\",\n            )}\n          />\n        )}\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.description\",\n          \"Explore live application usage and performance metrics\",\n        )}\n        backLink={\n          selectedApplicationId ? `/apps/${selectedApplicationId}` : undefined\n        }\n        backLabel={tr(\n          \"devportal.analytics.backToApplication\",\n          \"Back to Application\",\n        )}\n      >\n        <EmptyState\n          icon={<AlertCircle size={32} className=\"text-status-error-text\" />}\n          title={tr(\n            \"devportal.analytics.errorLoadAnalytics\",\n            \"Unable to load analytics\",\n          )}\n          description={getErrorMessage(error)}\n        />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={\n        appId\n          ? tr(\"devportal.analytics.appTitle\", \"Application Analytics\")\n          : tr(\"devportal.analytics.title\", \"Analytics\")\n      }\n      description={\n        selectedApplication\n          ? `${tr(\"devportal.analytics.liveUsageFor\", \"Live usage and performance for\")} ${selectedApplication.name}`\n          : tr(\n              \"devportal.analytics.description\",\n              \"Explore live application usage and performance metrics\",\n            )\n      }\n      backLink={\n        appId && selectedApplication\n          ? `/apps/${selectedApplication.id}`\n          : undefined\n      }\n      backLabel={tr(\n        \"devportal.analytics.backToApplication\",\n        \"Back to Application\",\n      )}\n      actions={\n        <div className=\"flex flex-wrap gap-2\">\n          {!appId && applications.length > 0 && (\n            <select\n              value={selectedApplicationId}\n              onChange={(event) => setSelectedApplicationId(event.target.value)}\n              aria-label={tr(\n                \"devportal.analytics.selectAppAria\",\n                \"Select application\",\n              )}\n              className=\"rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n            >\n              {applications.map((application) => (\n                <option key={application.id} value={application.id}>\n                  {application.name}\n                </option>\n              ))}\n            </select>\n          )}\n          <select\n            value={timeRange}\n            onChange={(event) => setTimeRange(event.target.value as TimeRange)}\n            aria-label={tr(\n              \"devportal.analytics.selectRangeAria\",\n              \"Select time range\",\n            )}\n            className=\"rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n          >\n            <option value=\"7d\">\n              {tr(\"devportal.analytics.range.7d\", \"Last 7 days\")}\n            </option>\n            <option value=\"30d\">\n              {tr(\"devportal.analytics.range.30d\", \"Last 30 days\")}\n            </option>\n            <option value=\"90d\">\n              {tr(\"devportal.analytics.range.90d\", \"Last 90 days\")}\n            </option>\n          </select>\n        </div>\n      }\n    >\n      {loading && !analytics.length ? (\n        <div className=\"flex items-center justify-center py-16 text-muted-foreground\">\n          <Loader2 className=\"h-8 w-8 animate-spin\" />\n        </div>\n      ) : analytics.length > 0 ? (\n        <>\n          <StatCardGrid columns={4}>\n            <StatCard\n              title={tr(\"devportal.analytics.apiCalls\", \"API Calls\")}\n              value={(latest?.apiCalls ?? 0).toLocaleString()}\n              icon={<Activity size={20} />}\n            />\n            <StatCard\n              title={tr(\"devportal.analytics.activeUsers\", \"Active Users\")}\n              value={(latest?.activeUsers ?? 0).toLocaleString()}\n              icon={<Users size={20} />}\n            />\n            <StatCard\n              title={tr(\"devportal.analytics.errorRate\", \"Error Rate\")}\n              value={`${errorRate.toFixed(2)}%`}\n              icon={<AlertTriangle size={20} />}\n              trend={\n                previous\n                  ? {\n                      value: previousErrorRate - errorRate,\n                      label: tr(\n                        \"devportal.analytics.vsPrevious\",\n                        \"vs previous period\",\n                      ),\n                    }\n                  : undefined\n              }\n            />\n            <StatCard\n              title={tr(\n                \"devportal.analytics.avgResponseTime\",\n                \"Avg Response Time\",\n              )}\n              value={\n                latest?.avgResponseTime\n                  ? `${latest.avgResponseTime}ms`\n                  : tr(\"devportal.common.na\", \"N/A\")\n              }\n              icon={<Clock size={20} />}\n              trend={\n                typeof responseTrend === \"number\"\n                  ? {\n                      value: responseTrend,\n                      label: tr(\n                        \"devportal.analytics.fasterThanPrevious\",\n                        \"faster than previous\",\n                      ),\n                    }\n                  : undefined\n              }\n            />\n          </StatCardGrid>\n\n          <div className=\"grid gap-6 xl:grid-cols-2\">\n            <PageSection\n              title={tr(\"devportal.analytics.trafficTrend\", \"Traffic trend\")}\n            >\n              <div className=\"rounded-lg border bg-card p-4\">\n                <ResponsiveContainer width=\"100%\" height={300}>\n                  <LineChart data={chartData}>\n                    <CartesianGrid\n                      strokeDasharray=\"3 3\"\n                      stroke=\"var(--color-chart-grid)\"\n                    />\n                    <XAxis\n                      dataKey=\"date\"\n                      stroke=\"var(--color-chart-axis)\"\n                      fontSize={12}\n                    />\n                    <YAxis stroke=\"var(--color-chart-axis)\" fontSize={12} />\n                    <Tooltip\n                      contentStyle={{\n                        backgroundColor: \"var(--color-card)\",\n                        border: \"1px solid var(--color-border-default)\",\n                        borderRadius: 12,\n                      }}\n                    />\n                    <Line\n                      type=\"monotone\"\n                      dataKey=\"apiCalls\"\n                      stroke={chartColors.primary}\n                      strokeWidth={2}\n                      dot={false}\n                    />\n                    <Line\n                      type=\"monotone\"\n                      dataKey=\"errors\"\n                      stroke={chartColors.negative}\n                      strokeWidth={2}\n                      dot={false}\n                    />\n                  </LineChart>\n                </ResponsiveContainer>\n              </div>\n            </PageSection>\n\n            <PageSection\n              title={tr(\"devportal.analytics.userActivity\", \"User activity\")}\n            >\n              <div className=\"rounded-lg border bg-card p-4\">\n                <ResponsiveContainer width=\"100%\" height={300}>\n                  <BarChart data={chartData}>\n                    <CartesianGrid\n                      strokeDasharray=\"3 3\"\n                      stroke=\"var(--color-chart-grid)\"\n                    />\n                    <XAxis\n                      dataKey=\"date\"\n                      stroke=\"var(--color-chart-axis)\"\n                      fontSize={12}\n                    />\n                    <YAxis stroke=\"var(--color-chart-axis)\" fontSize={12} />\n                    <Tooltip\n                      contentStyle={{\n                        backgroundColor: \"var(--color-card)\",\n                        border: \"1px solid var(--color-border-default)\",\n                        borderRadius: 12,\n                      }}\n                    />\n                    <Bar\n                      dataKey=\"activeUsers\"\n                      fill={chartColors.primary}\n                      radius={[6, 6, 0, 0]}\n                    />\n                    <Bar\n                      dataKey=\"newUsers\"\n                      fill={chartColors.secondary}\n                      radius={[6, 6, 0, 0]}\n                    />\n                  </BarChart>\n                </ResponsiveContainer>\n              </div>\n            </PageSection>\n          </div>\n\n          <PageSection\n            title={tr(\"devportal.analytics.dailyBreakdown\", \"Daily breakdown\")}\n          >\n            <DataTable\n              data={analytics}\n              keyField=\"id\"\n              columns={[\n                {\n                  key: \"date\",\n                  header: tr(\"devportal.analytics.date\", \"Date\"),\n                  render: (entry) =>\n                    new Date(entry.date).toLocaleDateString(undefined, {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    }),\n                },\n                {\n                  key: \"apiCalls\",\n                  header: tr(\"devportal.analytics.apiCalls\", \"API Calls\"),\n                  render: (entry) => entry.apiCalls.toLocaleString(),\n                },\n                {\n                  key: \"errors\",\n                  header: tr(\"devportal.analytics.errors\", \"Errors\"),\n                  render: (entry) => entry.errors.toLocaleString(),\n                },\n                {\n                  key: \"activeUsers\",\n                  header: tr(\"devportal.analytics.activeUsers\", \"Active Users\"),\n                  render: (entry) => entry.activeUsers.toLocaleString(),\n                },\n                {\n                  key: \"newUsers\",\n                  header: tr(\"devportal.analytics.newUsers\", \"New Users\"),\n                  render: (entry) => entry.newUsers.toLocaleString(),\n                },\n                {\n                  key: \"avgResponseTime\",\n                  header: tr(\"devportal.analytics.avgResponse\", \"Avg Response\"),\n                  render: (entry) =>\n                    entry.avgResponseTime\n                      ? `${entry.avgResponseTime}ms`\n                      : tr(\"devportal.common.na\", \"N/A\"),\n                },\n                {\n                  key: \"sessions\",\n                  header: tr(\"devportal.analytics.sessions\", \"Sessions\"),\n                  render: (entry) => entry.sessions.toLocaleString(),\n                },\n              ]}\n            />\n          </PageSection>\n        </>\n      ) : (\n        <EmptyState\n          icon={<BarChart3 size={32} />}\n          title={tr(\n            \"devportal.analytics.noAnalyticsTitle\",\n            \"No analytics available yet\",\n          )}\n          description={tr(\n            \"devportal.analytics.noAnalyticsDescription\",\n            \"Analytics will appear after this application starts receiving traffic through the public gateway.\",\n          )}\n          action={\n            !appId ? (\n              <button\n                type=\"button\"\n                onClick={() => handleNavigate(\"/apps\")}\n                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\"\n              >\n                {tr(\n                  \"devportal.analytics.viewApplications\",\n                  \"View applications\",\n                )}\n              </button>\n            ) : undefined\n          }\n        />\n      )}\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}

package/dist/devportal/pages/ApiKeysPage.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+/**
+ * API Keys listing page
+ *
+ * Displays all API keys for the current user from auth-svc.
+ * Previously showed devportal-svc ApiKeys per application;
+ * now shows all user-owned API keys centrally.
+ * Supports revoking and rotating API keys.
+ */
+export declare const ApiKeysPage: FC;
+//# sourceMappingURL=ApiKeysPage.d.ts.map

package/dist/devportal/pages/ApiKeysPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiKeysPage.d.ts","sourceRoot":"","sources":["../../../src/devportal/pages/ApiKeysPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AA0EhC;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,EAuoBzB,CAAC"}