@gntik-ai/templates 0.0.0-stage → 0.5.0

package/src/test/setup.ts

@@ -0,0 +1,36 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.className = '';
+  try {
+    localStorage.clear();
+  } catch {}
+});
+
+// jsdom gaps that Base UI touches (positioning, animations, media queries).
+if (!window.matchMedia) {
+  window.matchMedia = (query: string) =>
+    ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }) as MediaQueryList;
+}
+if (!('ResizeObserver' in window)) {
+  (window as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+}
+if (!Element.prototype.getAnimations) {
+  Element.prototype.getAnimations = () => [];
+}

package/src/upgrade-required/Page.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import UpgradeRequiredPage from './Page';
+
+describe('UpgradeRequiredPage', () => {
+  it('renders the gate inside the console with the plan comparison', { timeout: 15000 }, async () => {
+    render(<UpgradeRequiredPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Audit log is available on Team' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Compare plans' })).toBeInTheDocument();
+    expect(screen.getByText('Your workspace is on the Starter plan')).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('starts the upgrade from a tier CTA, ignoring the current plan', { timeout: 15000 }, async () => {
+    const onUpgrade = vi.fn();
+    render(<UpgradeRequiredPage onUpgrade={onUpgrade} />);
+    const main = screen.getByRole('main');
+    const current = within(main).getByRole('button', { name: /Current plan/ });
+    expect(current).toBeDisabled();
+    expect(within(main).getByRole('listitem', { name: 'Starter' })).toHaveAttribute('aria-current', 'true');
+    await userEvent.click(current);
+    expect(onUpgrade).not.toHaveBeenCalled();
+    await userEvent.click(within(main).getByRole('button', { name: /Start free trial/ }));
+    expect(onUpgrade).toHaveBeenCalledWith(expect.objectContaining({ id: 'team' }), 'monthly');
+  });
+});

package/src/upgrade-required/Page.tsx

@@ -0,0 +1,79 @@
+import { InlineCallout, PageHeader, PricingTable, type PricingCycle, type PricingTier } from '@gntik-ai/blocks';
+import { MessageSquare } from '@gntik-ai/icons';
+import { Page, Stack, type BreadcrumbItem } from '@gntik-ai/ui';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import { upgradeBreadcrumbs, upgradeContent, upgradeTiers } from './data';
+
+export interface UpgradeRequiredProps {
+  /** The locked feature, e.g. "Audit log". */
+  feature: string;
+  /** Lowest plan that includes it. */
+  requiredPlan: string;
+  currentPlan: string;
+  description: string;
+  tiers: PricingTier[];
+  /** Id of the tier the workspace is on (badge + disabled "Current plan" CTA). */
+  currentTierId: string;
+  /** Called with the chosen tier and billing cycle. */
+  onUpgrade: (tier: PricingTier, cycle: PricingCycle) => void;
+  onContactSales: () => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  /** ConsoleShell props (app nav, user, workspaces, sidebar footer, topbar…). */
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+/** Plan gate: ConsoleShell + Page with PageHeader, a current-plan callout and a PricingTable. */
+export default function UpgradeRequiredPage(props: Partial<UpgradeRequiredProps>) {
+  const {
+    feature = upgradeContent.feature,
+    requiredPlan = upgradeContent.requiredPlan,
+    currentPlan = upgradeContent.currentPlan,
+    description = upgradeContent.description,
+    tiers = upgradeTiers,
+    currentTierId = 'starter',
+    onUpgrade,
+    onContactSales,
+    breadcrumbs = upgradeBreadcrumbs,
+    currentHref = '/settings',
+    shell,
+  } = props;
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <Page
+        width="wide"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title={`${feature} is available on ${requiredPlan}`}
+            description={description}
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={[{ label: 'Contact sales', icon: MessageSquare, variant: 'secondary', onClick: onContactSales }]}
+          />
+        }
+      >
+        <Stack gap={2}>
+          <InlineCallout
+            tone="info"
+            title={`Your workspace is on the ${currentPlan} plan`}
+            description={`Upgrade to ${requiredPlan} or above to turn on ${feature.toLowerCase()}. Your data and settings carry over.`}
+            actions={[]}
+          />
+          <PricingTable
+            className="px-0 py-8 sm:px-0 sm:py-10"
+            eyebrow={null}
+            title="Compare plans"
+            description="Switch at any time. Upgrades apply immediately and are prorated."
+            tiers={tiers}
+            currentTierId={currentTierId}
+            onSelectTier={(tier, cycle) => {
+              if (tier.id !== currentTierId) onUpgrade?.(tier, cycle);
+            }}
+          />
+        </Stack>
+      </Page>
+    </ConsoleShell>
+  );
+}

package/src/upgrade-required/data.ts

@@ -0,0 +1,19 @@
+import { samplePricingTiers, type PricingTier } from '@gntik-ai/blocks';
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+/** Neutral fixtures for the plan gate. */
+export const upgradeContent = {
+  feature: 'Audit log',
+  requiredPlan: 'Team',
+  currentPlan: 'Starter',
+  description: 'Keep a searchable record of every change in your workspace: who did what, when, and what changed.',
+};
+
+export const upgradeBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Acme Industries', href: '/overview' },
+  { label: 'Settings', href: '/settings' },
+  { label: 'Audit log' },
+];
+
+/** The sample tiers; PricingTable marks the current one via `currentTierId`. */
+export const upgradeTiers: PricingTier[] = samplePricingTiers;

package/src/upgrade-required/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Upgrade required',
+  family: 'System',
+  priority: 'P2',
+  status: 'beta',
+  description:
+    'Plan gate inside the console: what the locked feature does, the current plan, and a PricingTable comparison whose CTA starts the upgrade.',
+  layout: 'SidebarLayout · Page',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'inline-callout', 'pricing-table'],
+};

package/src/usage-analytics/Page.test.tsx

@@ -0,0 +1,83 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import UsageAnalyticsPage from './Page';
+import { filterUsage, usageRows, type UsageRow } from './data';
+import type { DataTableColumn } from '@gntik-ai/blocks';
+
+describe('UsageAnalyticsPage', () => {
+  it('renders the header, filters, charts and breakdown', { timeout: 15000 }, async () => {
+    const { container } = render(<UsageAnalyticsPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Usage analytics' })).toBeInTheDocument();
+    expect(screen.getByRole('search', { name: 'Filters' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Requests by environment' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Infrastructure cost' })).toBeInTheDocument();
+    expect(screen.getByRole('table', { name: 'Usage by project' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('filters the breakdown by search and exports what is shown', { timeout: 15000 }, async () => {
+    const onExport = vi.fn();
+    render(<UsageAnalyticsPage onExport={onExport} />);
+    await userEvent.type(screen.getByRole('searchbox', { name: 'Search' }), 'webhooks');
+    const table = screen.getByRole('table', { name: 'Usage by project' });
+    const expected = usageRows.filter((r) => r.project === 'webhooks').length;
+    expect(within(table).getAllByRole('row')).toHaveLength(expected + 1);
+    await userEvent.click(screen.getAllByRole('button', { name: 'Export CSV' })[0]!);
+    expect(onExport).toHaveBeenCalledWith(expect.objectContaining({ query: 'webhooks' }));
+    expect(onExport.mock.calls[0]?.[0].rows).toHaveLength(expected);
+  });
+
+  it('shows the no-results state when nothing matches', { timeout: 15000 }, async () => {
+    render(<UsageAnalyticsPage />);
+    await userEvent.type(screen.getByRole('searchbox', { name: 'Search' }), 'zzz');
+    expect(screen.getByText(/No projects match/)).toBeInTheDocument();
+  });
+
+  it('takes data-driven charts, columns, filter fields and a search placeholder', { timeout: 15000 }, async () => {
+    type Point = { week: string; Calls: number };
+    const rows: UsageRow[] = [
+      { id: 'a', project: 'tenant-a', environment: 'dev', region: 'local', requests: 10, errorRate: 0, cost: 1 },
+      { id: 'b', project: 'tenant-b', environment: 'prod', region: 'local', requests: 20, errorRate: 0, cost: 2 },
+    ];
+    const columns: DataTableColumn<UsageRow>[] = [
+      { id: 'project', header: 'Tenant', accessor: (r) => r.project },
+      { id: 'environment', header: 'Stage', accessor: (r) => r.environment, variant: 'mono' },
+    ];
+    render(
+      <UsageAnalyticsPage<Point, Point>
+        rows={rows}
+        columns={columns}
+        filterFields={[{ id: 'environment', label: 'Stage', options: ['dev', 'prod'] }]}
+        searchPlaceholder="Search tenants…"
+        primaryChart={{
+          title: 'Function calls',
+          ranges: [{ value: 'w', label: 'Weekly' }],
+          dataByRange: { w: [{ week: 'W1', Calls: 3 }] },
+          index: 'week',
+          categories: ['Calls'],
+        }}
+        trafficRanges={[{ value: 'w', label: 'Weekly' }]}
+        trafficByRange={{ w: [{ week: 'W1', Calls: 5 }] }}
+        secondaryChart={{ title: 'Calls by stage', index: 'week', categories: ['Calls'] }}
+      />,
+    );
+    expect(screen.getByRole('heading', { level: 2, name: 'Function calls' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Calls by stage' })).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Search tenants…')).toBeInTheDocument();
+    const table = screen.getByRole('table', { name: 'Usage by project' });
+    expect(within(table).getByRole('columnheader', { name: /Stage/ })).toBeInTheDocument();
+    expect(within(table).getByText('prod')).toBeInTheDocument();
+  });
+
+  it('filters on any row field named by the filter id', () => {
+    const rows = usageRows.slice(0, 6);
+    const region = rows[0]!.region;
+    expect(filterUsage(rows, '', [{ field: 'region', value: region }]).every((r) => r.region === region)).toBe(true);
+    expect(filterUsage(rows, '', [{ field: 'project', value: rows[1]!.project }]).map((r) => r.project)).toEqual(
+      rows.filter((r) => r.project === rows[1]!.project).map((r) => r.project),
+    );
+    expect(filterUsage(rows, '', [{ field: 'unknown', value: 'x' }])).toHaveLength(rows.length);
+  });
+});

package/src/usage-analytics/Page.tsx

@@ -0,0 +1,184 @@
+import {
+  ChartCard,
+  DataTable,
+  DateRangeFilter,
+  FilterBar,
+  NoResultsEmpty,
+  PageHeader,
+  type ActiveFilter,
+  type ChartCardProps,
+  type ChartCardRange,
+  type CostPoint,
+  type DataTableColumn,
+  type FilterField,
+  type SavedView,
+} from '@gntik-ai/blocks';
+import { chartFmt } from '@gntik-ai/charts';
+import { Download } from '@gntik-ai/icons';
+import { Grid, HStack, Page, Section, Stack, type BreadcrumbItem, type DateRange } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  filterUsage,
+  trafficByRange,
+  trafficRanges,
+  usageBreadcrumbs,
+  usageColumns,
+  usageFilterFields,
+  usageRows,
+  usageSavedViews,
+  type TrafficPoint,
+  type UsageRow,
+} from './data';
+
+export interface UsageExportRequest {
+  range: DateRange | null;
+  query: string;
+  filters: ActiveFilter[];
+  /** Rows currently shown in the breakdown. */
+  rows: UsageRow[];
+}
+
+/** Second-chart settings (everything but its data and ranges, which have their own props). */
+export type UsageSecondaryChart<T extends object> = Omit<ChartCardProps<T>, 'dataByRange' | 'ranges'>;
+
+/**
+ * `P` is the row type of the first chart (default: the infrastructure-cost fixture), `T` the row
+ * type of the second one (default: requests per environment and day).
+ */
+export interface UsageAnalyticsProps<P extends object = CostPoint, T extends object = TrafficPoint> {
+  title: string;
+  description: string;
+  breadcrumbs: BreadcrumbItem[];
+  rows: readonly UsageRow[];
+  /** Breakdown table columns (default: project, environment, region, requests, error rate, cost). */
+  columns: DataTableColumn<UsageRow>[];
+  /** FilterBar fields; each id is matched against the row field of the same name. */
+  filterFields: FilterField[];
+  searchPlaceholder: string;
+  savedViews: readonly SavedView[];
+  /**
+   * First chart: any ChartCard props (title, description, ranges, dataByRange, index, categories,
+   * colors, kind, valueFormatter…). Unset fields keep the infrastructure-cost fixture.
+   */
+  primaryChart: ChartCardProps<P>;
+  /** Data of the second chart, per range key. */
+  trafficByRange: Readonly<Record<string, readonly T[]>>;
+  trafficRanges: readonly ChartCardRange[];
+  /** Second chart: title, description, index, categories, colors, kind… (merged over the traffic defaults). */
+  secondaryChart: UsageSecondaryChart<T>;
+  /** Fires when the date range changes (server-side products refetch here). */
+  onRangeChange: (range: DateRange) => void;
+  onExport: (request: UsageExportRequest) => void;
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+const TRAFFIC_CHART: UsageSecondaryChart<TrafficPoint> = {
+  title: 'Requests by environment',
+  description: 'Daily requests',
+  index: 'day',
+  categories: ['Production', 'Staging', 'Preview'],
+  kind: 'bar',
+  valueFormatter: chartFmt.compact,
+};
+
+/** Usage analytics: date range + filters, two charts and a sortable breakdown table with export. */
+export default function UsageAnalyticsPage<P extends object = CostPoint, T extends object = TrafficPoint>({
+  title = 'Usage analytics',
+  description = 'Traffic, errors and spend by project and environment.',
+  breadcrumbs = usageBreadcrumbs,
+  rows = usageRows,
+  columns = usageColumns,
+  filterFields = usageFilterFields,
+  searchPlaceholder = 'Search projects…',
+  savedViews = usageSavedViews,
+  primaryChart,
+  trafficByRange: traffic = trafficByRange as unknown as Readonly<Record<string, readonly T[]>>,
+  trafficRanges: ranges = trafficRanges,
+  secondaryChart,
+  onRangeChange,
+  onExport,
+  shell,
+}: Partial<UsageAnalyticsProps<P, T>>) {
+  const secondary = { ...(TRAFFIC_CHART as unknown as UsageSecondaryChart<T>), ...secondaryChart };
+  const [range, setRange] = useState<DateRange | null>(null);
+  const [query, setQuery] = useState('');
+  const [filters, setFilters] = useState<ActiveFilter[]>([]);
+  const visible = filterUsage(rows, query, filters);
+
+  const clearFilters = () => setFilters([]);
+  const exportAction = {
+    label: 'Export CSV',
+    icon: Download,
+    variant: 'secondary' as const,
+    onClick: () => onExport?.({ range, query, filters, rows: visible }),
+  };
+
+  return (
+    <ConsoleShell currentHref="/analytics" breadcrumbs={breadcrumbs} {...shell}>
+      <Page
+        width="wide"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title={title}
+            description={description}
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={[exportAction]}
+          />
+        }
+      >
+        <Stack gap={6}>
+          <HStack align="start" gap={3} wrap>
+            <DateRangeFilter
+              onValueChange={(next) => {
+                setRange(next);
+                onRangeChange?.(next);
+              }}
+            />
+            <FilterBar
+              className="min-w-0 flex-1"
+              fields={filterFields}
+              query={query}
+              onQueryChange={setQuery}
+              filters={filters}
+              onFiltersChange={setFilters}
+              defaultFilters={[]}
+              views={savedViews}
+              placeholder={searchPlaceholder}
+              resultCount={visible.length}
+            />
+          </HStack>
+          <Grid cols={{ base: 1, lg: 2 }} gap={6}>
+            <ChartCard<P> titleAs="h2" {...primaryChart} />
+            <ChartCard<T> titleAs="h2" {...secondary} ranges={ranges} dataByRange={traffic} />
+          </Grid>
+          <Section title="Breakdown" description="Per project and environment. Sort by any column.">
+            <DataTable<UsageRow>
+              rows={visible}
+              columns={columns}
+              getRowLabel={(r) => `${r.project} (${r.environment})`}
+              caption="Usage by project"
+              selectable={false}
+              showDensityToggle
+              showColumnMenu
+              defaultSort={{ columnId: 'cost', direction: 'descending' }}
+              emptyState={
+                <NoResultsEmpty
+                  entity="projects"
+                  query={query}
+                  filterCount={filters.length}
+                  onClearFilters={clearFilters}
+                  onClearSearch={() => setQuery('')}
+                  titleAs="h3"
+                />
+              }
+            />
+          </Section>
+        </Stack>
+      </Page>
+    </ConsoleShell>
+  );
+}

package/src/usage-analytics/data.ts

@@ -0,0 +1,161 @@
+import type { ActiveFilter, ChartCardRange, DataTableColumn, FilterField, SavedView } from '@gntik-ai/blocks';
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+/** One row of the usage breakdown table. */
+export interface UsageRow {
+  id: string;
+  project: string;
+  /** Environment name, e.g. "Production". */
+  environment: string;
+  region: string;
+  requests: number;
+  errorRate: number;
+  cost: number;
+}
+
+export interface TrafficPoint {
+  day: string;
+  Production: number;
+  Staging: number;
+  Preview: number;
+}
+
+export const usageBreadcrumbs: BreadcrumbItem[] = [{ label: 'Overview', href: '/overview' }, { label: 'Analytics' }];
+
+const PROJECTS = [
+  'orders-api',
+  'billing-sync',
+  'search-index',
+  'auth-gateway',
+  'media-resizer',
+  'webhooks',
+  'reports',
+  'checkout-web',
+];
+const ENVS = ['Production', 'Production', 'Staging', 'Preview'];
+const REGIONS = ['eu-west-1', 'us-east-1', 'ap-south-1', 'eu-central-1'];
+
+/** Usage per project and environment over the selected range. */
+export const usageRows: UsageRow[] = Array.from({ length: 16 }, (_, i) => ({
+  id: `use_${i + 1}`,
+  project: PROJECTS[i % PROJECTS.length] ?? 'orders-api',
+  environment: ENVS[(i * 3) % ENVS.length] ?? 'Production',
+  region: REGIONS[(i * 5) % REGIONS.length] ?? 'eu-west-1',
+  requests: ((i * 48_271) % 900_000) + 12_000,
+  errorRate: Math.round(((i * 37) % 29) * 0.11 * 100) / 100,
+  cost: Math.round((((i * 3571) % 1_400) + 60) * 100) / 100,
+}));
+
+export const usageFilterFields: FilterField[] = [
+  { id: 'environment', label: 'Environment', options: ['Production', 'Staging', 'Preview'] },
+  { id: 'region', label: 'Region', options: REGIONS },
+];
+
+export const usageSavedViews: SavedView[] = [
+  { value: 'all', label: 'All usage', filters: [] },
+  { value: 'production', label: 'Production only', filters: [{ field: 'environment', value: 'Production' }] },
+  {
+    value: 'eu',
+    label: 'EU regions',
+    filters: [
+      { field: 'region', value: 'eu-west-1' },
+      { field: 'region', value: 'eu-central-1' },
+    ],
+  },
+];
+
+/**
+ * Search by project name; filters match the row field named by the filter id (same field OR,
+ * across fields AND). Filters on fields the row does not have are ignored.
+ */
+export function filterUsage(rows: readonly UsageRow[], query: string, filters: readonly ActiveFilter[]): UsageRow[] {
+  const q = query.trim().toLowerCase();
+  const byField = new Map<string, string[]>();
+  for (const f of filters) byField.set(f.field, [...(byField.get(f.field) ?? []), f.value]);
+  return rows.filter((row) => {
+    if (q && !row.project.toLowerCase().includes(q)) return false;
+    for (const [field, values] of byField) {
+      const value: unknown = (row as unknown as Record<string, unknown>)[field];
+      if (value !== undefined && value !== null && !values.includes(String(value))) return false;
+    }
+    return true;
+  });
+}
+
+const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
+const count = new Intl.NumberFormat('en-US');
+
+export const usageColumns: DataTableColumn<UsageRow>[] = [
+  {
+    id: 'project',
+    header: 'Project',
+    accessor: (r) => r.project,
+    sortable: true,
+    hideable: false,
+    className: 'font-semibold',
+  },
+  { id: 'environment', header: 'Environment', accessor: (r) => r.environment, sortable: true },
+  {
+    id: 'region',
+    header: 'Region',
+    accessor: (r) => r.region,
+    sortable: true,
+    className: 'font-mono text-[12px] text-muted-foreground',
+  },
+  {
+    id: 'requests',
+    header: 'Requests',
+    accessor: (r) => r.requests,
+    cell: (r) => count.format(r.requests),
+    sortable: true,
+    align: 'right',
+    className: 'font-mono text-[12.5px]',
+  },
+  {
+    id: 'errors',
+    header: 'Error rate',
+    accessor: (r) => r.errorRate,
+    cell: (r) => `${r.errorRate.toFixed(2)}%`,
+    sortable: true,
+    align: 'right',
+    className: 'font-mono text-[12.5px]',
+  },
+  {
+    id: 'cost',
+    header: 'Cost',
+    accessor: (r) => r.cost,
+    cell: (r) => money.format(r.cost),
+    sortable: true,
+    align: 'right',
+    className: 'font-mono text-[12.5px]',
+  },
+];
+
+const DAYS7 = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const DAYS30 = Array.from({ length: 30 }, (_, i) => `Day ${i + 1}`);
+const traffic = (labels: string[], base: number): TrafficPoint[] =>
+  labels.map((day, i) => ({
+    day,
+    Production: Math.round(base + ((i * 37) % 11) * 900),
+    Staging: Math.round(base * 0.22 + ((i * 13) % 7) * 210),
+    Preview: Math.round(base * 0.08 + ((i * 29) % 5) * 120),
+  }));
+
+/** Requests per environment, per range. */
+export const trafficByRange: Record<string, TrafficPoint[]> = {
+  '7d': traffic(DAYS7, 24_000),
+  '30d': traffic(DAYS30, 22_000),
+};
+
+export const trafficRanges: ChartCardRange[] = [
+  {
+    value: '7d',
+    label: '7d',
+    summary: { value: '241,906', delta: { value: '+8.2%', direction: 'up', sentiment: 'positive' } },
+  },
+  {
+    value: '30d',
+    label: '30d',
+    summary: { value: '1.02M', delta: { value: '+3.5%', direction: 'up', sentiment: 'positive' } },
+  },
+];

package/src/usage-analytics/template.meta.ts

@@ -0,0 +1,21 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Usage analytics',
+  family: 'Overview',
+  priority: 'P2',
+  status: 'beta',
+  description:
+    'Analytics page: date range and filter bar, spend and traffic charts, a sortable breakdown table and a CSV export action.',
+  layout: 'SidebarLayout + Page',
+  blocks: [
+    'app-sidebar',
+    'app-topbar',
+    'page-header',
+    'date-range-filter',
+    'filter-bar',
+    'chart-card',
+    'data-table',
+    'empty-states',
+  ],
+};

package/src/verify-email/Page.test.tsx

@@ -0,0 +1,32 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import VerifyEmailPage from './Page';
+
+describe('VerifyEmailPage', () => {
+  it('renders the inbox step with a resend countdown', async () => {
+    const { container } = render(<VerifyEmailPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Check your inbox' })).toBeInTheDocument();
+    expect(screen.getByText('dana@example.com')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Resend email in 1:00' })).toBeDisabled();
+    await expectNoAxeViolations(container);
+  });
+
+  it('counts down, then resends and restarts the timer', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      const onResend = vi.fn();
+      render(<VerifyEmailPage onResend={onResend} resendCooldown={5} />);
+      expect(screen.getByRole('button', { name: 'Resend email in 0:05' })).toBeDisabled();
+      act(() => vi.advanceTimersByTime(5000));
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await user.click(screen.getByRole('button', { name: 'Resend email' }));
+      expect(onResend).toHaveBeenCalledOnce();
+      expect(screen.getByRole('status')).toHaveTextContent('A new verification email was sent to dana@example.com.');
+      expect(screen.getByRole('button', { name: /Resend email in 0:0[45]/ })).toBeDisabled();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});