@burdenoff/microfe-devportal 2026.1113.1 → 2026.1113.2

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

@@ -1 +1 @@
-{"version":3,"file":"AnalyticsDashboardPage.js","names":["EmptyState","_Fragment","EmptyState$1","daysByRange","chartColors","AnalyticsDashboardPage","useParams","useDevportal","tr","useTr","timeRange","setTimeRange","useState","selectedApplicationId","setSelectedApplicationId","appId","now","useMemo","startDate","nextDate","optionsData","optionsLoading","optionsError","useGetAnalyticsDashboardOptionsQuery","useGetApplicationAnalyticsDashboardQuery","allApplications","edge","applications","activeOrgId","a","selectedApplication","data","name","id","reg","analytics","left","right","latest","previous","chartData","entry","errorRate","previousErrorRate","responseTrend","handleNavigate","basePath","path","PageLayout","Loader2","AlertCircle","getErrorMessage","AppListItem","application","BarChart3","error","event","loading","Fragment","EmphasisPanel","StatCardGrid","StatCard","Activity","Users","AlertTriangle","Clock","PageSection","GlassCard","ResponsiveContainer","LineChart","CartesianGrid","XAxis","YAxis","Tooltip","Line","BarChart","Bar","DataTable"],"sources":["../../../src/devportal/pages/AnalyticsDashboardPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router\";\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 { EmphasisPanel, GlassCard } from \"@burdenoff/fe-libs/ui\";\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, activeOrgId } = 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 allApplications: Application[] =\n    optionsData?.applications?.edges?.map(\n      (\n        edge: GetAnalyticsDashboardOptionsQuery[\"applications\"][\"edges\"][number],\n      ) => edge.node as Application,\n    ) ?? [];\n  // Scope the app picker to the active org when one is selected\n  const applications = activeOrgId\n    ? allApplications.filter((a) => a.developerOrganizationId === activeOrgId)\n    : allApplications;\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-text-secondary\">\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            illustration=\"empty-data\"\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      purpose={tr(\n        \"devportal.analytics.purpose\",\n        \"Analytics shows how your apps are actually used — API call volume, active installs, latency, and error rates over time — so you can spot regressions, plan capacity, and prove value to your users. Pick an app and a time range to drill in.\",\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-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-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-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-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-text-secondary\">\n          <Loader2 className=\"h-8 w-8 animate-spin\" />\n        </div>\n      ) : analytics.length > 0 ? (\n        <>\n          <EmphasisPanel className=\"mb-6\">\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          </EmphasisPanel>\n\n          <div className=\"grid gap-6 xl:grid-cols-2\">\n            <PageSection\n              title={tr(\"devportal.analytics.trafficTrend\", \"Traffic trend\")}\n            >\n              <GlassCard treatment=\"insight\" className=\"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              </GlassCard>\n            </PageSection>\n\n            <PageSection\n              title={tr(\"devportal.analytics.userActivity\", \"User activity\")}\n            >\n              <GlassCard treatment=\"insight\" className=\"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              </GlassCard>\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          illustration=\"empty-data\"\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-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\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":["_Fragment","EmptyState","EmptyState$1","daysByRange","chartColors","AnalyticsDetails","tr","useTr","fold","OptionalFields","Fragment","AnalyticsDashboardPage","isFluidgrids","useIsFluidgridsVariant","useParams","useDevportal","timeRange","setTimeRange","useState","selectedApplicationId","setSelectedApplicationId","appId","now","useMemo","startDate","nextDate","optionsData","optionsLoading","optionsError","useGetAnalyticsDashboardOptionsQuery","useGetApplicationAnalyticsDashboardQuery","allApplications","edge","applications","activeOrgId","a","selectedApplication","data","name","id","reg","analytics","left","right","latest","previous","chartData","entry","errorRate","previousErrorRate","responseTrend","handleNavigate","basePath","path","PageLayout","Loader2","AlertCircle","getErrorMessage","AppListItem","application","BarChart3","error","event","loading","EmphasisPanel","StatCardGrid","StatCard","Activity","Users","AlertTriangle","Clock","PageSection","GlassCard","ResponsiveContainer","LineChart","CartesianGrid","XAxis","YAxis","Tooltip","Line","BarChart","Bar","DataTable"],"sources":["../../../src/devportal/pages/AnalyticsDashboardPage.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router\";\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 {\n  EmphasisPanel,\n  GlassCard,\n  OptionalFields,\n} from \"@burdenoff/fe-libs/ui\";\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 {\n  useDevportal,\n  useIsFluidgridsVariant,\n} 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\n/**\n * FluidGrids only: the KPI tiles stay on the page and the trend charts plus the\n * daily table fold one click deeper (\"More options\", remembered). With the\n * variant off the content renders inline, exactly as before.\n */\nconst AnalyticsDetails: FC<{ fold: boolean; children: ReactNode }> = ({\n  fold,\n  children,\n}) => {\n  const tr = useTr();\n  if (!fold) return <>{children}</>;\n  return (\n    <OptionalFields\n      storageKey=\"devportal.analytics.details\"\n      title={tr(\n        \"devportal.analytics.detailsTitle\",\n        \"Trends and daily breakdown\",\n      )}\n      description={tr(\n        \"devportal.analytics.detailsDescription\",\n        \"Traffic and user charts, plus the day-by-day table.\",\n      )}\n    >\n      {children}\n    </OptionalFields>\n  );\n};\n\nexport const AnalyticsDashboardPage: FC = () => {\n  const isFluidgrids = useIsFluidgridsVariant();\n  const { appId } = useParams<{ appId: string }>();\n  const { navigate, basePath, activeOrgId } = 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 allApplications: Application[] =\n    optionsData?.applications?.edges?.map(\n      (\n        edge: GetAnalyticsDashboardOptionsQuery[\"applications\"][\"edges\"][number],\n      ) => edge.node as Application,\n    ) ?? [];\n  // Scope the app picker to the active org when one is selected\n  const applications = activeOrgId\n    ? allApplications.filter((a) => a.developerOrganizationId === activeOrgId)\n    : allApplications;\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-text-secondary\">\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            illustration=\"empty-data\"\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      purpose={tr(\n        \"devportal.analytics.purpose\",\n        \"Analytics shows how your apps are actually used — API call volume, active installs, latency, and error rates over time — so you can spot regressions, plan capacity, and prove value to your users. Pick an app and a time range to drill in.\",\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-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-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-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-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-text-secondary\">\n          <Loader2 className=\"h-8 w-8 animate-spin\" />\n        </div>\n      ) : analytics.length > 0 ? (\n        <>\n          <EmphasisPanel className=\"mb-6\">\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          </EmphasisPanel>\n\n          <AnalyticsDetails fold={isFluidgrids}>\n            <div className=\"grid gap-6 xl:grid-cols-2\">\n              <PageSection\n                title={tr(\"devportal.analytics.trafficTrend\", \"Traffic trend\")}\n              >\n                <GlassCard treatment=\"insight\" className=\"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                </GlassCard>\n              </PageSection>\n\n              <PageSection\n                title={tr(\"devportal.analytics.userActivity\", \"User activity\")}\n              >\n                <GlassCard treatment=\"insight\" className=\"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                </GlassCard>\n              </PageSection>\n            </div>\n\n            <PageSection\n              title={tr(\n                \"devportal.analytics.dailyBreakdown\",\n                \"Daily breakdown\",\n              )}\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(\n                      \"devportal.analytics.activeUsers\",\n                      \"Active Users\",\n                    ),\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(\n                      \"devportal.analytics.avgResponse\",\n                      \"Avg Response\",\n                    ),\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          </AnalyticsDetails>\n        </>\n      ) : (\n        <EmptyState\n          illustration=\"empty-data\"\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-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\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.js

@@ -2,23 +2,23 @@ import { PageLayout as e } from "../components/PageLayout.js";
 import { DataTable as t } from "../components/DataTable.js";
 import { ActiveIndicator as n } from "../components/StatusBadge.js";
 import { useCurrentUserAppsQuery as r, useMyApiKeysQuery as ee, useRevokeApiKeyAuthMutation as te, useRotateApiKeyAuthMutation as ne } from "../../generated/global-operations.js";
-import { getErrorMessage as i } from "../hooks/useGraphQL.js";
-import { EmptyState as re } from "../components/EmptyState.js";
-import { ConfirmDialog as a } from "../components/ConfirmDialog.js";
-import { NewSecretAlert as ie } from "../components/SecretDisplay.js";
-import { SelectionCheckbox as o } from "../components/SelectionCheckbox.js";
-import { useDevportal as ae } from "../providers/DevportalProvider.js";
+import { getErrorMessage as re } from "../hooks/useGraphQL.js";
+import { EmptyState as ie } from "../components/EmptyState.js";
+import { ConfirmDialog as i } from "../components/ConfirmDialog.js";
+import { NewSecretAlert as ae } from "../components/SecretDisplay.js";
+import { SelectionCheckbox as a } from "../components/SelectionCheckbox.js";
+import { useDevportal as oe, useIsFluidgridsVariant as se } from "../providers/DevportalProvider.js";
 import "../components/index.js";
-import { PermissionGuard as oe } from "../components/PermissionGuard.js";
-import { cn as s } from "../utils/cn.js";
+import { PermissionGuard as ce } from "../components/PermissionGuard.js";
+import { cn as o } from "../utils/cn.js";
 import "../hooks/index.js";
-import { useMemo as c, useState as l } from "react";
-import { AlertCircle as se, AlertTriangle as ce, Ban as u, Clock as le, Key as d, Loader2 as ue, Plus as f, RotateCw as de, Search as fe, Shield as pe } from "lucide-react";
+import { useMemo as s, useState as c } from "react";
+import { AlertCircle as le, AlertTriangle as ue, Ban as l, Clock as u, Key as d, Loader2 as de, Plus as f, RotateCw as fe, Search as pe, Shield as me } from "lucide-react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { useI18n as me } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { EmphasisPanel as he, GlassCard as h } from "@burdenoff/fe-libs/ui";
+import { useI18n as ge } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 // src/devportal/pages/ApiKeysPage.tsx
-function g(e) {
+function _e(e) {
 	return {
 		id: e.id,
 		name: e.name,
@@ -31,82 +31,82 @@ function g(e) {
 		lastUsedAt: e.lastUsedAt ?? void 0
 	};
 }
-var _ = (e) => {
+var g = (e) => {
 	if (!e) return !1;
 	let t = Math.ceil((new Date(e).getTime() - Date.now()) / 864e5);
 	return t <= 30 && t > 0;
-}, v = (e) => e ? new Date(e).getTime() < Date.now() : !1, y = () => {
-	let { navigate: y, basePath: b, activeOrgId: ge } = ae(), { t: _e } = me(), x = (e, t) => {
-		let n = _e(e);
+}, _ = (e) => e ? new Date(e).getTime() < Date.now() : !1, v = () => {
+	let { navigate: v, basePath: ve, activeOrgId: ye } = oe(), be = se(), { t: y } = ge(), b = (e, t) => {
+		let n = y(e);
 		return n === e ? t : n;
-	}, [S, ve] = l(""), [C, ye] = l("all"), [w, T] = l(null), [E, D] = l(null), [O, k] = l(null), [A, j] = l(/* @__PURE__ */ new Set()), [M, N] = l(null), [be, P] = l(!1), { data: F, loading: xe, error: I, refetch: L } = ee({ fetchPolicy: "cache-and-network" }), { data: R } = r({ fetchPolicy: "cache-first" }), z = c(() => {
+	}, [x, xe] = c(""), [S, Se] = c("all"), [C, w] = c(null), [T, E] = c(null), [D, O] = c(null), [k, A] = c(/* @__PURE__ */ new Set()), [j, M] = c(null), [Ce, N] = c(!1), { data: P, loading: F, error: I, refetch: L } = ee({ fetchPolicy: "cache-and-network" }), { data: R } = r({ fetchPolicy: "cache-first" }), z = s(() => {
 		let e = R?.currentUserApps?.apps;
 		return e?.length ? new Set(e.map((e) => e.id)) : null;
-	}, [R?.currentUserApps?.apps]), [B, { loading: V }] = te(), [Se, { loading: H }] = ne(), U = c(() => F?.myApiKeys?.apiKeys.map(g) ?? [], [F?.myApiKeys?.apiKeys]), W = (e) => {
-		y?.(`${b}${e}`);
-	}, Ce = async () => {
-		if (w) try {
-			await B({ variables: { keyId: w.id } }), T(null), await L();
+	}, [R?.currentUserApps?.apps]), [B, { loading: V }] = te(), [we, { loading: H }] = ne(), U = s(() => P?.myApiKeys?.apiKeys.map(_e) ?? [], [P?.myApiKeys?.apiKeys]), W = (e) => {
+		v?.(`${ve}${e}`);
+	}, Te = async () => {
+		if (C) try {
+			await B({ variables: { keyId: C.id } }), w(null), await L();
 		} catch {}
-	}, we = async () => {
-		if (E) try {
-			let e = (await Se({ variables: { keyId: E.id } })).data?.rotateAPIKey.apiSecret;
-			e && k(e), D(null), await L();
+	}, Ee = async () => {
+		if (T) try {
+			let e = (await we({ variables: { keyId: T.id } })).data?.rotateAPIKey.apiSecret;
+			e && O(e), E(null), await L();
 		} catch {}
 	}, G = U.filter((e) => {
-		let t = !z || z.has(e.appId), n = !S || e.name.toLowerCase().includes(S.toLowerCase()) || e.prefix.toLowerCase().includes(S.toLowerCase()) || (e.appName?.toLowerCase().includes(S.toLowerCase()) ?? !1), r = C === "all" || C === "active" && !v(e.expiresAt) || C === "expired" && v(e.expiresAt);
+		let t = !z || z.has(e.appId), n = !x || e.name.toLowerCase().includes(x.toLowerCase()) || e.prefix.toLowerCase().includes(x.toLowerCase()) || (e.appName?.toLowerCase().includes(x.toLowerCase()) ?? !1), r = S === "all" || S === "active" && !_(e.expiresAt) || S === "expired" && _(e.expiresAt);
 		return t && n && r;
-	}), K = c(() => U.filter((e) => A.has(e.id)), [U, A]), q = c(() => K.filter((e) => !v(e.expiresAt)), [K]), J = G.filter((e) => !v(e.expiresAt)), Y = J.length > 0 && J.every((e) => A.has(e.id)), X = J.some((e) => A.has(e.id)) && !Y, Te = (e, t) => {
-		j((n) => {
+	}), K = s(() => U.filter((e) => k.has(e.id)), [U, k]), q = s(() => K.filter((e) => !_(e.expiresAt)), [K]), J = G.filter((e) => !_(e.expiresAt)), Y = J.length > 0 && J.every((e) => k.has(e.id)), X = J.some((e) => k.has(e.id)) && !Y, De = (e, t) => {
+		A((n) => {
 			let r = new Set(n);
 			return t ? r.add(e) : r.delete(e), r;
 		});
 	}, Z = (e) => {
-		j((t) => {
+		A((t) => {
 			let n = new Set(t);
 			return J.forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
-	}, Q = () => j(/* @__PURE__ */ new Set());
-	if (xe && !F) return /* @__PURE__ */ p(e, {
-		title: x("devportal.apiKeys", "API Keys"),
-		description: x("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
+	}, Q = () => A(/* @__PURE__ */ new Set());
+	if (F && !P) return /* @__PURE__ */ p(e, {
+		title: b("devportal.apiKeys", "API Keys"),
+		description: b("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
 		children: /* @__PURE__ */ m("div", {
 			className: "flex items-center justify-center py-12",
-			children: [/* @__PURE__ */ p(ue, { className: "h-8 w-8 animate-spin text-text-secondary" }), /* @__PURE__ */ p("span", {
+			children: [/* @__PURE__ */ p(de, { className: "h-8 w-8 animate-spin text-text-secondary" }), /* @__PURE__ */ p("span", {
 				className: "ml-2 text-text-secondary",
-				children: x("devportal.loadingApiKeys", "Loading API keys...")
+				children: b("devportal.loadingApiKeys", "Loading API keys...")
 			})]
 		})
 	});
 	if (I) return /* @__PURE__ */ p(e, {
-		title: x("devportal.apiKeys", "API Keys"),
-		description: x("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
+		title: b("devportal.apiKeys", "API Keys"),
+		description: b("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
 		children: /* @__PURE__ */ m("div", {
 			className: "rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center",
 			children: [
-				/* @__PURE__ */ p(se, { className: "mx-auto h-8 w-8 text-status-error-text" }),
+				/* @__PURE__ */ p(le, { className: "mx-auto h-8 w-8 text-status-error-text" }),
 				/* @__PURE__ */ p("h3", {
 					className: "mt-2 font-medium text-status-error-text",
-					children: x("devportal.failedToLoadApiKeys", "Failed to load API keys")
+					children: b("devportal.failedToLoadApiKeys", "Failed to load API keys")
 				}),
 				/* @__PURE__ */ p("p", {
 					className: "mt-1 text-sm text-text-secondary",
-					children: i(I)
+					children: re(I)
 				}),
 				/* @__PURE__ */ p("button", {
 					onClick: () => L(),
 					className: "mt-4 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
-					children: x("devportal.tryAgain", "Try Again")
+					children: b("devportal.tryAgain", "Try Again")
 				})
 			]
 		})
 	});
-	let Ee = [
+	let Oe = [
 		{
 			key: "select",
-			header: /* @__PURE__ */ p(o, {
+			header: /* @__PURE__ */ p(a, {
 				checked: Y,
 				indeterminate: X,
 				onChange: Z,
@@ -115,10 +115,10 @@ var _ = (e) => {
 			className: "w-12",
 			render: (e) => /* @__PURE__ */ p("div", {
 				onClick: (e) => e.stopPropagation(),
-				children: /* @__PURE__ */ p(o, {
-					checked: A.has(e.id),
-					disabled: v(e.expiresAt),
-					onChange: (t) => Te(e.id, t),
+				children: /* @__PURE__ */ p(a, {
+					checked: k.has(e.id),
+					disabled: _(e.expiresAt),
+					onChange: (t) => De(e.id, t),
 					ariaLabel: `Select API key ${e.name}`
 				})
 			})
@@ -129,7 +129,7 @@ var _ = (e) => {
 			render: (e) => /* @__PURE__ */ m("div", {
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ p("div", {
-					className: s("flex h-10 w-10 items-center justify-center rounded-lg", v(e.expiresAt) ? "bg-status-error-bg-subtle text-status-error-text" : "bg-action-primary-bg/10 text-primary"),
+					className: o("flex h-10 w-10 items-center justify-center rounded-lg", _(e.expiresAt) ? "bg-status-error-bg-subtle text-status-error-text" : "bg-action-primary-bg/10 text-primary"),
 					children: /* @__PURE__ */ p(d, { size: 20 })
 				}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("div", {
 					className: "flex items-center gap-2",
@@ -138,11 +138,11 @@ var _ = (e) => {
 							className: "font-medium",
 							children: e.name
 						}),
-						v(e.expiresAt) && /* @__PURE__ */ p("span", {
+						_(e.expiresAt) && /* @__PURE__ */ p("span", {
 							className: "rounded bg-status-error-bg-subtle px-1.5 py-0.5 text-xs text-status-error-text",
 							children: "Expired"
 						}),
-						_(e.expiresAt) && !v(e.expiresAt) && /* @__PURE__ */ p("span", {
+						g(e.expiresAt) && !_(e.expiresAt) && /* @__PURE__ */ p("span", {
 							className: "rounded bg-status-warning-bg-subtle px-1.5 py-0.5 text-xs text-status-warning-text",
 							children: "Expiring Soon"
 						})
@@ -187,7 +187,7 @@ var _ = (e) => {
 			key: "expires",
 			header: "Expires",
 			render: (e) => /* @__PURE__ */ p("span", {
-				className: s("text-sm", v(e.expiresAt) ? "text-status-error-text" : _(e.expiresAt) ? "text-status-warning-text" : "text-text-secondary"),
+				className: o("text-sm", _(e.expiresAt) ? "text-status-error-text" : g(e.expiresAt) ? "text-status-warning-text" : "text-text-secondary"),
 				children: e.expiresAt ? new Date(e.expiresAt).toLocaleDateString() : "Never"
 			})
 		},
@@ -196,9 +196,9 @@ var _ = (e) => {
 			header: "Status",
 			render: (e) => /* @__PURE__ */ m("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ p(n, { active: !v(e.expiresAt) }), /* @__PURE__ */ p("span", {
+				children: [/* @__PURE__ */ p(n, { active: !_(e.expiresAt) }), /* @__PURE__ */ p("span", {
 					className: "text-sm",
-					children: v(e.expiresAt) ? "Expired" : "Active"
+					children: _(e.expiresAt) ? "Expired" : "Active"
 				})]
 			})
 		},
@@ -206,7 +206,7 @@ var _ = (e) => {
 			key: "actions",
 			header: "Actions",
 			className: "w-28",
-			render: (e) => v(e.expiresAt) ? /* @__PURE__ */ p("span", {
+			render: (e) => _(e.expiresAt) ? /* @__PURE__ */ p("span", {
 				className: "text-xs text-text-secondary",
 				children: "No actions"
 			}) : /* @__PURE__ */ m("div", {
@@ -216,10 +216,10 @@ var _ = (e) => {
 					title: "Rotate secret",
 					disabled: H,
 					onClick: (t) => {
-						t.stopPropagation(), D(e);
+						t.stopPropagation(), E(e);
 					},
-					className: s("inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors", "text-status-info-text hover:bg-status-info-bg-subtle", "disabled:opacity-50 disabled:cursor-not-allowed"),
-					children: [/* @__PURE__ */ p(de, { size: 14 }), /* @__PURE__ */ p("span", {
+					className: o("inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors", "text-status-info-text hover:bg-status-info-bg-subtle", "disabled:opacity-50 disabled:cursor-not-allowed"),
+					children: [/* @__PURE__ */ p(fe, { size: 14 }), /* @__PURE__ */ p("span", {
 						className: "sr-only sm:not-sr-only",
 						children: "Rotate"
 					})]
@@ -228,10 +228,10 @@ var _ = (e) => {
 					title: "Revoke key",
 					disabled: V,
 					onClick: (t) => {
-						t.stopPropagation(), T(e);
+						t.stopPropagation(), w(e);
 					},
-					className: s("inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors", "text-status-error-text hover:bg-status-error-bg-subtle", "disabled:opacity-50 disabled:cursor-not-allowed"),
-					children: [/* @__PURE__ */ p(u, { size: 14 }), /* @__PURE__ */ p("span", {
+					className: o("inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors", "text-status-error-text hover:bg-status-error-bg-subtle", "disabled:opacity-50 disabled:cursor-not-allowed"),
+					children: [/* @__PURE__ */ p(l, { size: 14 }), /* @__PURE__ */ p("span", {
 						className: "sr-only sm:not-sr-only",
 						children: "Revoke"
 					})]
@@ -240,34 +240,36 @@ var _ = (e) => {
 		}
 	], $ = {
 		total: G.length,
-		active: G.filter((e) => !v(e.expiresAt)).length,
-		expiringSoon: G.filter((e) => _(e.expiresAt)).length,
-		expired: G.filter((e) => v(e.expiresAt)).length
+		active: G.filter((e) => !_(e.expiresAt)).length,
+		expiringSoon: G.filter((e) => g(e.expiresAt)).length,
+		expired: G.filter((e) => _(e.expiresAt)).length
 	};
-	return /* @__PURE__ */ p(oe, {
+	return /* @__PURE__ */ p(ce, {
 		authOnly: !0,
 		children: /* @__PURE__ */ m(e, {
-			title: x("devportal.apiKeys", "API Keys"),
-			description: x("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
-			purpose: x("devportal.apiKeysPurpose", "API keys authenticate server-to-server calls — use them in scripts, CI jobs, or backend services that talk to the platform without a logged-in user. Generate a key here, scope it to an app, and rotate it if it is ever exposed."),
+			title: b("devportal.apiKeys", "API Keys"),
+			description: b("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
+			backLink: be ? "/settings" : void 0,
+			backLabel: b("devportal.developerSettings.back", "Developer settings"),
+			purpose: b("devportal.apiKeysPurpose", "API keys authenticate server-to-server calls — use them in scripts, CI jobs, or backend services that talk to the platform without a logged-in user. Generate a key here, scope it to an app, and rotate it if it is ever exposed."),
 			actions: /* @__PURE__ */ m("button", {
 				onClick: () => W("/api-keys/new"),
 				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
-				children: [/* @__PURE__ */ p(f, { size: 16 }), x("devportal.generateApiKey", "Generate API Key")]
+				children: [/* @__PURE__ */ p(f, { size: 16 }), b("devportal.generateApiKey", "Generate API Key")]
 			}),
 			children: [
-				O && /* @__PURE__ */ p(ie, {
+				D && /* @__PURE__ */ p(ae, {
 					title: "API Key Rotated",
-					secret: O,
+					secret: D,
 					description: "The previous secret has been invalidated. Copy the new secret below — it will not be shown again.",
-					onDismiss: () => k(null)
+					onDismiss: () => O(null)
 				}),
-				M && /* @__PURE__ */ p("div", {
-					className: s("rounded-lg border px-4 py-3 text-sm", M.type === "success" ? "border-border-subtle bg-status-success-bg-subtle text-status-success-text" : "border-status-error-border/40 bg-status-error-bg/10 text-status-error-text"),
+				j && /* @__PURE__ */ p("div", {
+					className: o("rounded-lg border px-4 py-3 text-sm", j.type === "success" ? "border-border-subtle bg-status-success-bg-subtle text-status-success-text" : "border-status-error-border/40 bg-status-error-bg/10 text-status-error-text"),
 					children: /* @__PURE__ */ m("div", {
 						className: "flex items-center justify-between gap-3",
-						children: [/* @__PURE__ */ p("span", { children: M.message }), /* @__PURE__ */ p("button", {
-							onClick: () => N(null),
+						children: [/* @__PURE__ */ p("span", { children: j.message }), /* @__PURE__ */ p("button", {
+							onClick: () => M(null),
 							className: "text-xs font-medium underline underline-offset-2",
 							children: "Dismiss"
 						})]
@@ -279,19 +281,19 @@ var _ = (e) => {
 						className: "flex flex-1 items-center gap-4",
 						children: [/* @__PURE__ */ m("div", {
 							className: "relative flex-1 max-w-md",
-							children: [/* @__PURE__ */ p(fe, {
+							children: [/* @__PURE__ */ p(pe, {
 								size: 16,
 								className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
 							}), /* @__PURE__ */ p("input", {
 								type: "text",
 								placeholder: "Search by name, prefix, or app...",
-								value: S,
-								onChange: (e) => ve(e.target.value),
+								value: x,
+								onChange: (e) => xe(e.target.value),
 								className: "w-full rounded-md border bg-bg-surface pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 							})]
 						}), /* @__PURE__ */ m("select", {
-							value: C,
-							onChange: (e) => ye(e.target.value),
+							value: S,
+							onChange: (e) => Se(e.target.value),
 							className: "rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 							children: [
 								/* @__PURE__ */ p("option", {
@@ -332,7 +334,7 @@ var _ = (e) => {
 							className: "p-4",
 							children: [/* @__PURE__ */ m("div", {
 								className: "flex items-center gap-2 text-status-success-text",
-								children: [/* @__PURE__ */ p(pe, { size: 16 }), /* @__PURE__ */ p("span", {
+								children: [/* @__PURE__ */ p(me, { size: 16 }), /* @__PURE__ */ p("span", {
 									className: "text-sm",
 									children: "Active"
 								})]
@@ -346,7 +348,7 @@ var _ = (e) => {
 							className: "p-4",
 							children: [/* @__PURE__ */ m("div", {
 								className: "flex items-center gap-2 text-status-warning-text",
-								children: [/* @__PURE__ */ p(le, { size: 16 }), /* @__PURE__ */ p("span", {
+								children: [/* @__PURE__ */ p(u, { size: 16 }), /* @__PURE__ */ p("span", {
 									className: "text-sm",
 									children: "Expiring Soon"
 								})]
@@ -360,7 +362,7 @@ var _ = (e) => {
 							className: "p-4",
 							children: [/* @__PURE__ */ m("div", {
 								className: "flex items-center gap-2 text-status-error-text",
-								children: [/* @__PURE__ */ p(ce, { size: 16 }), /* @__PURE__ */ p("span", {
+								children: [/* @__PURE__ */ p(ue, { size: 16 }), /* @__PURE__ */ p("span", {
 									className: "text-sm",
 									children: "Expired"
 								})]
@@ -389,7 +391,7 @@ var _ = (e) => {
 							className: "flex flex-wrap items-center gap-3",
 							children: [/* @__PURE__ */ m("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ p(o, {
+								children: [/* @__PURE__ */ p(a, {
 									checked: Y,
 									indeterminate: X,
 									onChange: Z,
@@ -398,7 +400,7 @@ var _ = (e) => {
 									className: "text-sm font-medium",
 									children: "Select all active keys"
 								})]
-							}), A.size > 0 && /* @__PURE__ */ p("button", {
+							}), k.size > 0 && /* @__PURE__ */ p("button", {
 								onClick: Q,
 								className: "text-sm text-text-secondary hover:text-text-primary",
 								children: "Clear selection"
@@ -407,13 +409,13 @@ var _ = (e) => {
 							className: "flex flex-wrap items-center gap-2",
 							children: [/* @__PURE__ */ m("span", {
 								className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
-								children: [A.size, " selected"]
+								children: [k.size, " selected"]
 							}), /* @__PURE__ */ m("button", {
-								onClick: () => P(!0),
+								onClick: () => N(!0),
 								disabled: q.length === 0,
 								className: "inline-flex items-center gap-2 rounded-md border border-status-error-bg px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:cursor-not-allowed disabled:opacity-50",
 								children: [
-									/* @__PURE__ */ p(u, { size: 16 }),
+									/* @__PURE__ */ p(l, { size: 16 }),
 									"Revoke Selected",
 									q.length > 0 ? ` (${q.length})` : ""
 								]
@@ -423,54 +425,54 @@ var _ = (e) => {
 				}),
 				G.length > 0 ? /* @__PURE__ */ p(t, {
 					data: G,
-					columns: Ee,
+					columns: Oe,
 					keyField: "id"
-				}) : /* @__PURE__ */ p(re, {
+				}) : /* @__PURE__ */ p(ie, {
 					illustration: "empty-data",
-					title: x("devportal.noApiKeysFound", "No API keys found"),
-					description: S || C !== "all" ? x("devportal.tryAdjustingFilters", "Try adjusting your filters") : x("devportal.generateFirstApiKey", "Generate your first API key to start making API calls"),
-					action: !S && C === "all" ? /* @__PURE__ */ m("button", {
+					title: b("devportal.noApiKeysFound", "No API keys found"),
+					description: x || S !== "all" ? b("devportal.tryAdjustingFilters", "Try adjusting your filters") : b("devportal.generateFirstApiKey", "Generate your first API key to start making API calls"),
+					action: !x && S === "all" ? /* @__PURE__ */ m("button", {
 						onClick: () => W("/api-keys/new"),
 						className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
-						children: [/* @__PURE__ */ p(f, { size: 16 }), x("devportal.generateApiKey", "Generate API Key")]
+						children: [/* @__PURE__ */ p(f, { size: 16 }), b("devportal.generateApiKey", "Generate API Key")]
 					}) : void 0
 				}),
-				/* @__PURE__ */ p(a, {
-					open: w !== null,
+				/* @__PURE__ */ p(i, {
+					open: C !== null,
 					onOpenChange: (e) => {
-						e || T(null);
+						e || w(null);
 					},
-					onConfirm: Ce,
+					onConfirm: Te,
 					title: "Revoke API Key",
-					description: `Are you sure you want to revoke "${w?.name ?? ""}"? This action cannot be undone. Any application or service using this key will immediately lose access.`,
+					description: `Are you sure you want to revoke "${C?.name ?? ""}"? This action cannot be undone. Any application or service using this key will immediately lose access.`,
 					confirmLabel: "Revoke Key",
 					cancelLabel: "Cancel",
 					variant: "danger",
 					loading: V
 				}),
-				/* @__PURE__ */ p(a, {
-					open: E !== null,
+				/* @__PURE__ */ p(i, {
+					open: T !== null,
 					onOpenChange: (e) => {
-						e || D(null);
+						e || E(null);
 					},
-					onConfirm: we,
+					onConfirm: Ee,
 					title: "Rotate API Key Secret",
-					description: `This will generate a new secret for "${E?.name ?? ""}" and immediately invalidate the current one. Make sure to update all services using this key before the old secret stops working.`,
+					description: `This will generate a new secret for "${T?.name ?? ""}" and immediately invalidate the current one. Make sure to update all services using this key before the old secret stops working.`,
 					confirmLabel: "Rotate Secret",
 					cancelLabel: "Cancel",
 					variant: "warning",
 					loading: H
 				}),
-				/* @__PURE__ */ p(a, {
-					open: be,
-					onOpenChange: P,
+				/* @__PURE__ */ p(i, {
+					open: Ce,
+					onOpenChange: N,
 					onConfirm: async () => {
 						if (q.length === 0) return;
 						let e = await Promise.allSettled(q.map((e) => B({ variables: { keyId: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
-						N({
+						M({
 							type: n === 0 ? "success" : "error",
 							message: `Revoked ${t} API key${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`
-						}), P(!1), Q(), await L();
+						}), N(!1), Q(), await L();
 					},
 					title: "Revoke selected API keys",
 					description: `Revoke ${q.length} selected API key${q.length === 1 ? "" : "s"}? Any service using these keys will immediately lose access.`,
@@ -483,6 +485,6 @@ var _ = (e) => {
 		})
 	});
 };
-export { y as ApiKeysPage };
+export { v as ApiKeysPage };
 
 //# sourceMappingURL=ApiKeysPage.js.map