@burdenoff/microfe-devportal 2026.609.3 → 2026.611.1

package/dist/devportal/hooks/usePackageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePackageUpload.js","names":[],"sources":["../../../src/devportal/hooks/usePackageUpload.ts"],"sourcesContent":["/**\n * usePackageUpload — uploads a zip package to wspace-files-svc and returns a\n * stable downloadUrl to store as ApplicationVersion.packageUrl.\n *\n * Flow (mirrors uploadBlobToFiles in @burdenoff/fe-libs/storage):\n *   1. ensureFolderByPath(\"/DevPortal/Packages\") → folderId\n *   2. initiateUpload → { sessionId, presignedUrl }\n *   3. PUT blob to presignedUrl (progress tracked via XHR)\n *   4. completeUpload → { file.downloadUrl }\n *\n * Uses raw fetch for GraphQL mutations so we can target the workspace gateway\n * without a second ApolloProvider.\n */\nimport { useCallback, useState } from \"react\";\n\nexport interface PackageUploadResult {\n  fileId: string;\n  downloadUrl: string;\n}\n\nexport interface PackageUploadState {\n  uploading: boolean;\n  progress: number;\n  error: string | null;\n}\n\ntype GqlFetcher = (\n  query: string,\n  variables: Record<string, unknown>,\n) => Promise<Record<string, unknown>>;\n\nfunction makeFetcher(\n  workspacesGatewayUrl: string,\n  authToken: string | undefined,\n  workspaceId: string | undefined,\n  workspaceToken: string | undefined,\n): GqlFetcher {\n  return async (query, variables) => {\n    const headers: Record<string, string> = {\n      \"Content-Type\": \"application/json\",\n    };\n    if (authToken) headers[\"Authorization\"] = `Bearer ${authToken}`;\n    if (workspaceToken)\n      headers[\"X-Workspace-Authorization\"] = `Bearer ${workspaceToken}`;\n    if (workspaceId) headers[\"x-workspace-id\"] = workspaceId;\n\n    const endpoint = workspacesGatewayUrl.endsWith(\"/graphql\")\n      ? workspacesGatewayUrl\n      : `${workspacesGatewayUrl}/workspaces/graphql`;\n\n    const res = await fetch(endpoint, {\n      method: \"POST\",\n      headers,\n      body: JSON.stringify({ query, variables }),\n    });\n    if (!res.ok) {\n      throw new Error(\n        `GraphQL request failed: ${res.status} ${res.statusText}`,\n      );\n    }\n    const json = (await res.json()) as {\n      data?: Record<string, unknown>;\n      errors?: Array<{ message: string }>;\n    };\n    if (json.errors?.length) {\n      throw new Error(json.errors.map((e) => e.message).join(\"; \"));\n    }\n    return json.data ?? {};\n  };\n}\n\nasync function ensureFolder(gql: GqlFetcher, path: string): Promise<string> {\n  const data = await gql(\n    `mutation DevPortal_EnsureFolder($path: String!) {\n       ensureFolderByPath(path: $path) { id }\n     }`,\n    { path },\n  );\n  const id = (data.ensureFolderByPath as { id?: string } | undefined)?.id;\n  if (!id) throw new Error(\"ensureFolderByPath returned no id\");\n  return id;\n}\n\nasync function initiateUpload(\n  gql: GqlFetcher,\n  file: File,\n  folderId: string,\n): Promise<{ sessionId: string; uploadUrl: string }> {\n  const ext = file.name.includes(\".\")\n    ? file.name.substring(file.name.lastIndexOf(\".\") + 1)\n    : \"zip\";\n  const data = await gql(\n    `mutation DevPortal_InitiateUpload($input: InitiateUploadInput!) {\n       initiateUpload(input: $input) {\n         uploadUrl\n         session { id }\n       }\n     }`,\n    {\n      input: {\n        fileName: file.name,\n        fileSize: String(file.size),\n        mimeType: file.type || \"application/zip\",\n        extension: ext,\n        folderId,\n        visibility: \"PUBLIC\",\n      },\n    },\n  );\n  const result = data.initiateUpload as\n    | { uploadUrl?: string; session?: { id?: string } }\n    | undefined;\n  const sessionId = result?.session?.id;\n  const uploadUrl = result?.uploadUrl;\n  if (!sessionId || !uploadUrl) {\n    throw new Error(\"initiateUpload did not return sessionId or uploadUrl\");\n  }\n  return { sessionId, uploadUrl };\n}\n\nasync function putToPresignedUrl(\n  file: File,\n  uploadUrl: string,\n  onProgress: (pct: number) => void,\n): Promise<void> {\n  await new Promise<void>((resolve, reject) => {\n    const xhr = new XMLHttpRequest();\n    xhr.upload.addEventListener(\"progress\", (evt) => {\n      if (evt.lengthComputable) {\n        onProgress(10 + Math.round((evt.loaded / evt.total) * 80));\n      }\n    });\n    xhr.addEventListener(\"load\", () => {\n      if (xhr.status >= 200 && xhr.status < 300) {\n        resolve();\n      } else {\n        reject(new Error(`S3 PUT failed: ${xhr.status}`));\n      }\n    });\n    xhr.addEventListener(\"error\", () =>\n      reject(new Error(\"S3 PUT network error\")),\n    );\n    xhr.addEventListener(\"abort\", () => reject(new Error(\"S3 PUT aborted\")));\n    xhr.open(\"PUT\", uploadUrl);\n    xhr.setRequestHeader(\"Content-Type\", file.type || \"application/zip\");\n    xhr.send(file);\n  });\n}\n\nasync function completeUpload(\n  gql: GqlFetcher,\n  sessionId: string,\n  folderId: string,\n  fileSize: number,\n): Promise<PackageUploadResult> {\n  const data = await gql(\n    `mutation DevPortal_CompleteUpload($input: CompleteUploadInput!) {\n       completeUpload(input: $input) {\n         file { id downloadUrl }\n       }\n     }`,\n    {\n      input: {\n        sessionId,\n        folderId,\n        fileSize: String(fileSize),\n      },\n    },\n  );\n  const file = (\n    data.completeUpload as\n      | { file?: { id?: string; downloadUrl?: string } }\n      | undefined\n  )?.file;\n  if (!file?.id || !file.downloadUrl) {\n    throw new Error(\"completeUpload did not return file id or downloadUrl\");\n  }\n  return { fileId: file.id, downloadUrl: file.downloadUrl };\n}\n\nexport function usePackageUpload(\n  workspacesGatewayUrl: string | undefined,\n  authToken: string | undefined,\n  workspaceId: string | undefined,\n  getWorkspaceToken: (() => Promise<string | null>) | undefined,\n) {\n  const [state, setState] = useState<PackageUploadState>({\n    uploading: false,\n    progress: 0,\n    error: null,\n  });\n\n  const upload = useCallback(\n    async (file: File): Promise<PackageUploadResult> => {\n      if (!workspacesGatewayUrl) {\n        throw new Error(\n          \"workspacesGatewayUrl is not configured. Pass it as a prop to DevportalRoot.\",\n        );\n      }\n\n      const freshToken = getWorkspaceToken\n        ? await getWorkspaceToken()\n        : undefined;\n      const gql = makeFetcher(\n        workspacesGatewayUrl,\n        authToken,\n        workspaceId,\n        freshToken ?? undefined,\n      );\n\n      setState({ uploading: true, progress: 0, error: null });\n      try {\n        const folderId = await ensureFolder(gql, \"/DevPortal/Packages\");\n        setState((s) => ({ ...s, progress: 5 }));\n\n        const { sessionId, uploadUrl } = await initiateUpload(\n          gql,\n          file,\n          folderId,\n        );\n        setState((s) => ({ ...s, progress: 10 }));\n\n        await putToPresignedUrl(file, uploadUrl, (pct) =>\n          setState((s) => ({ ...s, progress: pct })),\n        );\n        setState((s) => ({ ...s, progress: 90 }));\n\n        const result = await completeUpload(\n          gql,\n          sessionId,\n          folderId,\n          file.size,\n        );\n        setState({ uploading: false, progress: 100, error: null });\n        return result;\n      } catch (err) {\n        const message = err instanceof Error ? err.message : \"Upload failed\";\n        setState({ uploading: false, progress: 0, error: message });\n        throw err;\n      }\n    },\n    [workspacesGatewayUrl, authToken, workspaceId, getWorkspaceToken],\n  );\n\n  return { upload, ...state };\n}\n"],"mappings":"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"}

package/dist/devportal/pages/AnalyticsDashboardPage.js

@@ -3,51 +3,62 @@ 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 { DataTable as ee } from "../components/DataTable.js";
+import { useGetAnalyticsDashboardOptionsQuery as te, useGetApplicationAnalyticsDashboardQuery as ne } from "../../generated/global-operations.js";
+import { getErrorMessage as s } 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 { 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 h } from "../utils/i18n.js";
+import { useEffect as g, useMemo as _, useState as v } from "react";
+import { Activity as y, 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 = {
+var ae = {
 	"7d": 7,
 	"30d": 30,
 	"90d": 90
-}, j = {
+}, A = {
 	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(() => {
+}, j = () => {
+	let { appId: j } = E(), { navigate: oe, basePath: M } = e(), N = h(), [P, F] = v("30d"), [I, L] = v(j || ""), R = _(() => /* @__PURE__ */ new Date(), []), z = _(() => {
 		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,
+		return e.setDate(e.getDate() - ae[P]), e.toISOString();
+	}, [R, P]), { data: B, loading: V, error: H } = te({
+		skip: !!j,
 		fetchPolicy: "cache-and-network"
-	}), { data: U, loading: W, error: G } = c({
+	}), { data: U, loading: W, error: G } = ne({
 		variables: {
-			applicationId: I || M || "",
+			applicationId: I || j || "",
 			period: "daily",
 			startDate: z,
 			endDate: R.toISOString()
 		},
-		skip: !(I || M),
+		skip: !(I || j),
 		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) => ({
+	}), K = B?.applications?.edges?.map((e) => e.node) ?? [], q = U?.application;
+	g(() => {
+		let e = q?.name, t = j || I;
+		if (!t || !e) return;
+		let n = window.__breadcrumbRegistry;
+		return n?.register(t, e), () => n?.unregister(t);
+	}, [
+		j,
+		I,
+		q?.name
+	]);
+	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"
@@ -58,17 +69,17 @@ var A = {
 		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}`);
+	})), Q = Y && Y.apiCalls > 0 ? Y.errors / Y.apiCalls * 100 : 0, se = X && X.apiCalls > 0 ? X.errors / X.apiCalls * 100 : 0, $ = Y?.avgResponseTime && X?.avgResponseTime ? X.avgResponseTime - Y.avgResponseTime : void 0, ce = (e) => {
+		oe?.(`${M}${e}`);
 	};
-	return !M && V && !B ? /* @__PURE__ */ O(n, {
+	return !j && 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, {
+	}) : !j && 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, {
@@ -77,9 +88,9 @@ var A = {
 				className: "text-status-error-text"
 			}),
 			title: N("devportal.analytics.errorLoadApps", "Unable to load applications"),
-			description: l(H)
+			description: s(H)
 		})
-	}) : !M && !I ? /* @__PURE__ */ O(n, {
+	}) : !j && !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", {
@@ -104,16 +115,16 @@ var A = {
 				className: "text-status-error-text"
 			}),
 			title: N("devportal.analytics.errorLoadAnalytics", "Unable to load analytics"),
-			description: l(G)
+			description: s(G)
 		})
 	}) : /* @__PURE__ */ O(n, {
-		title: M ? N("devportal.analytics.appTitle", "Application Analytics") : N("devportal.analytics.title", "Analytics"),
+		title: j ? 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,
+		backLink: j && 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", {
+			children: [!j && K.length > 0 && /* @__PURE__ */ O("select", {
 				value: I,
 				onChange: (e) => L(e.target.value),
 				"aria-label": N("devportal.analytics.selectAppAria", "Select application"),
@@ -153,7 +164,7 @@ var A = {
 					/* @__PURE__ */ O(i, {
 						title: N("devportal.analytics.apiCalls", "API Calls"),
 						value: (Y?.apiCalls ?? 0).toLocaleString(),
-						icon: /* @__PURE__ */ O(re, { size: 20 })
+						icon: /* @__PURE__ */ O(y, { size: 20 })
 					}),
 					/* @__PURE__ */ O(i, {
 						title: N("devportal.analytics.activeUsers", "Active Users"),
@@ -165,7 +176,7 @@ var A = {
 						value: `${Q.toFixed(2)}%`,
 						icon: /* @__PURE__ */ O(x, { size: 20 }),
 						trend: X ? {
-							value: oe - Q,
+							value: se - Q,
 							label: N("devportal.analytics.vsPrevious", "vs previous period")
 						} : void 0
 					}),
@@ -186,41 +197,41 @@ var A = {
 					title: N("devportal.analytics.trafficTrend", "Traffic trend"),
 					children: /* @__PURE__ */ O("div", {
 						className: "rounded-lg border bg-card p-4",
-						children: /* @__PURE__ */ O(d, {
+						children: /* @__PURE__ */ O(l, {
 							width: "100%",
 							height: 300,
-							children: /* @__PURE__ */ k(te, {
+							children: /* @__PURE__ */ k(re, {
 								data: Z,
 								children: [
-									/* @__PURE__ */ O(p, {
+									/* @__PURE__ */ O(d, {
 										strokeDasharray: "3 3",
 										stroke: "var(--color-chart-grid)"
 									}),
-									/* @__PURE__ */ O(h, {
+									/* @__PURE__ */ O(p, {
 										dataKey: "date",
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ O(g, {
+									/* @__PURE__ */ O(m, {
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ O(u, { contentStyle: {
+									/* @__PURE__ */ O(c, { contentStyle: {
 										backgroundColor: "var(--color-card)",
 										border: "1px solid var(--color-border-default)",
 										borderRadius: 12
 									} }),
-									/* @__PURE__ */ O(m, {
+									/* @__PURE__ */ O(f, {
 										type: "monotone",
 										dataKey: "apiCalls",
-										stroke: j.primary,
+										stroke: A.primary,
 										strokeWidth: 2,
 										dot: !1
 									}),
-									/* @__PURE__ */ O(m, {
+									/* @__PURE__ */ O(f, {
 										type: "monotone",
 										dataKey: "errors",
-										stroke: j.negative,
+										stroke: A.negative,
 										strokeWidth: 2,
 										dot: !1
 									})
@@ -232,33 +243,33 @@ var A = {
 					title: N("devportal.analytics.userActivity", "User activity"),
 					children: /* @__PURE__ */ O("div", {
 						className: "rounded-lg border bg-card p-4",
-						children: /* @__PURE__ */ O(d, {
+						children: /* @__PURE__ */ O(l, {
 							width: "100%",
 							height: 300,
-							children: /* @__PURE__ */ k(ne, {
+							children: /* @__PURE__ */ k(ie, {
 								data: Z,
 								children: [
-									/* @__PURE__ */ O(p, {
+									/* @__PURE__ */ O(d, {
 										strokeDasharray: "3 3",
 										stroke: "var(--color-chart-grid)"
 									}),
-									/* @__PURE__ */ O(h, {
+									/* @__PURE__ */ O(p, {
 										dataKey: "date",
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ O(g, {
+									/* @__PURE__ */ O(m, {
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ O(u, { contentStyle: {
+									/* @__PURE__ */ O(c, { contentStyle: {
 										backgroundColor: "var(--color-card)",
 										border: "1px solid var(--color-border-default)",
 										borderRadius: 12
 									} }),
-									/* @__PURE__ */ O(f, {
+									/* @__PURE__ */ O(u, {
 										dataKey: "activeUsers",
-										fill: j.primary,
+										fill: A.primary,
 										radius: [
 											6,
 											6,
@@ -266,9 +277,9 @@ var A = {
 											0
 										]
 									}),
-									/* @__PURE__ */ O(f, {
+									/* @__PURE__ */ O(u, {
 										dataKey: "newUsers",
-										fill: j.secondary,
+										fill: A.secondary,
 										radius: [
 											6,
 											6,
@@ -284,7 +295,7 @@ var A = {
 			}),
 			/* @__PURE__ */ O(r, {
 				title: N("devportal.analytics.dailyBreakdown", "Daily breakdown"),
-				children: /* @__PURE__ */ O(s, {
+				children: /* @__PURE__ */ O(ee, {
 					data: J,
 					keyField: "id",
 					columns: [
@@ -334,9 +345,9 @@ var A = {
 			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", {
+			action: j ? void 0 : /* @__PURE__ */ O("button", {
 				type: "button",
-				onClick: () => se("/apps"),
+				onClick: () => ce("/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")
 			})
@@ -344,6 +355,6 @@ var A = {
 	});
 };
 //#endregion
-export { M as AnalyticsDashboardPage };
+export { j as AnalyticsDashboardPage };
 
 //# sourceMappingURL=AnalyticsDashboardPage.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"AnalyticsDashboardPage.js","names":[],"sources":["../../../src/devportal/pages/AnalyticsDashboardPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, 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\n  useEffect(() => {\n    const name = selectedApplication?.name;\n    const id = appId || selectedApplicationId;\n    if (!id || !name) return;\n    const reg = (\n      window as unknown as {\n        __breadcrumbRegistry?: {\n          register: (id: string, name: string) => void;\n          unregister: (id: string) => void;\n        };\n      }\n    ).__breadcrumbRegistry;\n    reg?.register(id, name);\n    return () => reg?.unregister(id);\n  }, [appId, selectedApplicationId, selectedApplication?.name]);\n\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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"}