sea-dev 1.0.0

package/apps/main/src/routes/_authed/settings/analytics.tsx

@@ -0,0 +1,1710 @@
+import { Container } from "@/components/header/container";
+import { membershipMiddleware } from "@/middleware";
+import { db, schema } from "@sea/db";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@sea/ui/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@sea/ui/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@sea/ui/components/ui/table";
+import { H1, Muted, P } from "@sea/ui/components/ui/typography";
+import { createFileRoute } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import {
+  eachDayOfInterval,
+  eachMonthOfInterval,
+  eachWeekOfInterval,
+  format,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+  subDays,
+  subHours,
+  subMonths,
+  subWeeks,
+} from "date-fns";
+import { and, count, desc, eq, exists, gte, isNull, sql } from "drizzle-orm";
+import { Loader2Icon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { z } from "zod/v4";
+
+type Frequency = "daily" | "weekly" | "monthly";
+
+const DEFAULT_FREQUENCY: Frequency = "weekly";
+const WEEK_STARTS_ON = 1 as const; // Monday (PostgreSQL date_trunc('week') semantics)
+const DAILY_WINDOW_DAYS = 30;
+const WEEKLY_WINDOW_WEEKS = 12;
+const MONTHLY_WINDOW_MONTHS = 12;
+const TRAILING_FORMS_WINDOW_DAYS = 90;
+
+type MemberContext = { organizationId: string };
+type FormSummary = { id: string; name: string };
+type TimeSeriesPoint = { periodStart: string; count: number };
+type TimeSeriesSeries = { formId: string; formName: string; points: TimeSeriesPoint[] };
+type TimeSeriesResponse = { series: TimeSeriesSeries[]; totals: TimeSeriesPoint[] };
+
+type AnalyticsCoreData = {
+  submissionCounts: {
+    total: number;
+    lastHour: number;
+    lastDay: number;
+    lastWeek: number;
+    lastMonth: number;
+    final: number;
+  };
+  totals: {
+    pages: number;
+    documents: number;
+    fields: number;
+    members: number;
+    workflows: number;
+    forms: number;
+  };
+  averages: {
+    fieldsPerSubmission: number;
+    documentsPerSubmission: number;
+  };
+  forms: FormSummary[];
+};
+
+type AnalyticsDeepDiveData = {
+  modelBreakdown: { model: string; count: number }[];
+  topForms: { formId: string; formName: string; submissions: number }[];
+  flaggedForms: { formId: string; formName: string; documents: number; selectedFields: number }[];
+  submissionsByWeek: { weekStart: string; count: number }[];
+  stpMetrics: {
+    autoFinalized: number;
+    straightThroughRate: number;
+    autoRoutedRate: number;
+  };
+  exceptionMetrics: {
+    extractionFailures: number;
+    failedValidations: number;
+    manualCorrectionSubmissions: number;
+    exceptionRate: number;
+  };
+  operationalKpis: {
+    draftBacklog: number;
+    avgFinalizeHours: number;
+    correctionRate: number;
+  };
+  validationOutcomes: {
+    passed: number;
+    failed: number;
+    warning: number;
+    documentEvidenceRefs: number;
+  };
+};
+
+type TimeSeriesContext = {
+  now: Date;
+  dailyStart: Date;
+  weeklyStart: Date;
+  monthlyStart: Date;
+  weeklyAnchor: Date;
+  monthlyAnchor: Date;
+};
+
+const createTimeSeriesContext = (now: Date): TimeSeriesContext => {
+  const dailyStart = startOfDay(subDays(now, DAILY_WINDOW_DAYS - 1));
+  const weeklyAnchor = startOfWeek(now, { weekStartsOn: WEEK_STARTS_ON });
+  const weeklyStart = startOfWeek(subWeeks(weeklyAnchor, WEEKLY_WINDOW_WEEKS - 1), {
+    weekStartsOn: WEEK_STARTS_ON,
+  });
+  const monthlyAnchor = startOfMonth(now);
+  const monthlyStart = startOfMonth(subMonths(monthlyAnchor, MONTHLY_WINDOW_MONTHS - 1));
+
+  return { now, dailyStart, weeklyStart, monthlyStart, weeklyAnchor, monthlyAnchor };
+};
+
+const toDate = (value: unknown): Date => {
+  if (value instanceof Date) return value;
+  if (typeof value === "number") return new Date(value);
+  if (typeof value === "string") return new Date(value);
+  return new Date(NaN);
+};
+
+const getFormsForOrganization = async (member: MemberContext): Promise<FormSummary[]> => {
+  const formsResult = await db
+    .select({
+      id: schema.form.id,
+      name: schema.form.name,
+    })
+    .from(schema.form)
+    .innerJoin(schema.workflow, eq(schema.workflow.id, schema.form.workflowId))
+    .where(
+      and(
+        eq(schema.workflow.organizationId, member.organizationId),
+        isNull(schema.workflow.deletedAt),
+        isNull(schema.form.deletedAt),
+      ),
+    );
+
+  return formsResult.map((row: { id: string; name: string | null }) => ({
+    id: row.id,
+    name: row.name ?? "Untitled form",
+  }));
+};
+
+const buildSeries = (
+  raw: unknown[],
+  normalize: (date: Date) => number,
+  periods: Date[],
+): TimeSeriesSeries[] => {
+  // Build a map of `${formId}:${periodKey}` -> count for O(1) lookups
+  const counts = new Map<string, number>();
+  const names = new Map<string, string>();
+  for (const row of raw) {
+    const formId = (row as { formId: string }).formId;
+    const formName = (row as { formName?: string | null }).formName ?? "Untitled form";
+    if (!names.has(formId)) names.set(formId, formName);
+    const periodStart = (row as { periodStart: unknown }).periodStart;
+    const date = toDate(periodStart);
+    const key = `${formId}:${normalize(date)}`;
+    counts.set(key, Number((row as { count?: number }).count ?? 0));
+  }
+
+  const targetForms = Array.from(names.entries())
+    .map(([id, name]) => ({ id, name }))
+    .sort((a, b) => {
+      const byName = a.name.localeCompare(b.name, undefined, { sensitivity: "base" });
+      return byName !== 0 ? byName : a.id.localeCompare(b.id);
+    });
+
+  return targetForms.map((form) => ({
+    formId: form.id,
+    formName: form.name,
+    points: periods.map((periodDate) => {
+      const key = `${form.id}:${normalize(periodDate)}`;
+      return {
+        periodStart: periodDate.toISOString(),
+        count: counts.get(key) ?? 0,
+      };
+    }),
+  }));
+};
+
+const buildTotals = (
+  raw: unknown[],
+  normalize: (date: Date) => number,
+  periods: Date[],
+): TimeSeriesPoint[] => {
+  const totalsByPeriod = new Map<number, number>();
+  for (const row of raw) {
+    const periodStart = (row as { periodStart: unknown }).periodStart;
+    const date = toDate(periodStart);
+    const key = normalize(date);
+    const next = Number((row as { count?: number }).count ?? 0);
+    totalsByPeriod.set(key, (totalsByPeriod.get(key) ?? 0) + next);
+  }
+
+  return periods.map((periodDate) => ({
+    periodStart: periodDate.toISOString(),
+    count: totalsByPeriod.get(normalize(periodDate)) ?? 0,
+  }));
+};
+
+const loadTimeSeries = async ({
+  frequency,
+  member,
+  context,
+}: {
+  frequency: Frequency;
+  member: MemberContext;
+  context: TimeSeriesContext;
+}): Promise<TimeSeriesResponse> => {
+  const dayBucket = sql`date_trunc('day', ${schema.submission.createdAt})`;
+  const weekBucket = sql`date_trunc('week', ${schema.submission.createdAt})`;
+  const monthBucket = sql`date_trunc('month', ${schema.submission.createdAt})`;
+
+  const config = {
+    daily: {
+      bucket: dayBucket,
+      start: context.dailyStart,
+      align: (date: Date) => startOfDay(date),
+      buildPeriods: (end: Date) => eachDayOfInterval({ start: context.dailyStart, end }),
+      fallbackAnchor: startOfDay(context.now),
+    },
+    weekly: {
+      bucket: weekBucket,
+      start: context.weeklyStart,
+      align: (date: Date) => startOfWeek(date, { weekStartsOn: WEEK_STARTS_ON }),
+      buildPeriods: (end: Date) =>
+        eachWeekOfInterval({ start: context.weeklyStart, end }, { weekStartsOn: WEEK_STARTS_ON }),
+      fallbackAnchor: context.weeklyAnchor,
+    },
+    monthly: {
+      bucket: monthBucket,
+      start: context.monthlyStart,
+      align: (date: Date) => startOfMonth(date),
+      buildPeriods: (end: Date) => eachMonthOfInterval({ start: context.monthlyStart, end }),
+      fallbackAnchor: context.monthlyAnchor,
+    },
+  } as const;
+
+  const selected = config[frequency];
+
+  const raw = await db
+    .select({
+      periodStart: selected.bucket,
+      formId: schema.submission.formId,
+      formName: sql<string>`max(${schema.form.name})`,
+      count: sql<number>`count(*)`,
+    })
+    .from(schema.submission)
+    .innerJoin(schema.form, eq(schema.form.id, schema.submission.formId))
+    .innerJoin(schema.workflow, eq(schema.workflow.id, schema.form.workflowId))
+    .where(
+      and(
+        eq(schema.submission.organizationId, member.organizationId),
+        eq(schema.submission.type, "extraction"),
+        isNull(schema.submission.deletedAt),
+        isNull(schema.form.deletedAt),
+        isNull(schema.workflow.deletedAt),
+        gte(schema.submission.createdAt, selected.start),
+      ),
+    )
+    .groupBy(selected.bucket, schema.submission.formId);
+
+  let anchorFromDb: Date | undefined;
+  for (const row of raw) {
+    const current = toDate((row as { periodStart: unknown }).periodStart);
+    if (!anchorFromDb || current > anchorFromDb) {
+      anchorFromDb = current;
+    }
+  }
+
+  const normalizedAnchor = selected.align(anchorFromDb ?? selected.fallbackAnchor);
+  const normalizedNow = selected.align(context.now);
+  const normalizedStart = selected.align(selected.start);
+  const end = selected.align(
+    new Date(
+      Math.max(normalizedAnchor.getTime(), normalizedNow.getTime(), normalizedStart.getTime()),
+    ),
+  );
+
+  const periods = selected.buildPeriods(end);
+  const normalize = (date: Date) => selected.align(date).getTime();
+
+  return {
+    series: buildSeries(raw, normalize, periods),
+    totals: buildTotals(raw, normalize, periods),
+  };
+};
+
+const getAnalyticsCoreFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const now = new Date();
+    const oneHourAgo = subHours(now, 1);
+    const oneDayAgo = subDays(now, 1);
+    const oneWeekAgo = subWeeks(now, 1);
+    const oneMonthAgo = subMonths(now, 1);
+
+    const submissionCountsPromise = db
+      .select({
+        total: sql<number>`count(*)`,
+        lastHour: sql<number>`count(*) FILTER (WHERE ${schema.submission.createdAt} >= ${oneHourAgo})`,
+        lastDay: sql<number>`count(*) FILTER (WHERE ${schema.submission.createdAt} >= ${oneDayAgo})`,
+        lastWeek: sql<number>`count(*) FILTER (WHERE ${schema.submission.createdAt} >= ${oneWeekAgo})`,
+        lastMonth: sql<number>`count(*) FILTER (WHERE ${schema.submission.createdAt} >= ${oneMonthAgo})`,
+        final: sql<number>`count(*) FILTER (WHERE ${schema.submission.status} = ${"final"})`,
+      })
+      .from(schema.submission)
+      .where(
+        and(
+          eq(schema.submission.organizationId, member.organizationId),
+          eq(schema.submission.type, "extraction"),
+          isNull(schema.submission.deletedAt),
+        ),
+      );
+
+    const formsPromise = getFormsForOrganization(member);
+    const documentStatsPromise = db
+      .select({
+        totalDocuments: count(schema.document.id),
+        totalPages: sql<number>`0`,
+      })
+      .from(schema.document)
+      .innerJoin(schema.deal, eq(schema.deal.id, schema.document.dealId))
+      .where(
+        and(
+          eq(schema.deal.organizationId, member.organizationId),
+          isNull(schema.document.deletedAt),
+          isNull(schema.deal.deletedAt),
+          exists(
+            db
+              .select({ id: schema.documentExtraction.id })
+              .from(schema.documentExtraction)
+              .where(
+                and(
+                  eq(schema.documentExtraction.documentId, schema.document.id),
+                  isNull(schema.documentExtraction.deletedAt),
+                ),
+              ),
+          ),
+        ),
+      );
+
+    const fieldStatsPromise = db
+      .select({
+        totalFields: count(schema.submissionItemVersion.id),
+      })
+      .from(schema.submissionItemVersion)
+      .innerJoin(
+        schema.submissionItem,
+        eq(schema.submissionItem.id, schema.submissionItemVersion.submissionItemId),
+      )
+      .innerJoin(
+        schema.submissionGroup,
+        eq(schema.submissionGroup.id, schema.submissionItem.submissionGroupId),
+      )
+      .innerJoin(schema.submission, eq(schema.submission.id, schema.submissionGroup.submissionId))
+      .where(
+        and(
+          eq(schema.submission.organizationId, member.organizationId),
+          eq(schema.submission.type, "extraction"),
+          eq(schema.submissionItemVersion.selected, true),
+          isNull(schema.submission.deletedAt),
+        ),
+      );
+
+    const memberCountPromise = db
+      .select({ count: count(schema.member.id) })
+      .from(schema.member)
+      .where(eq(schema.member.organizationId, member.organizationId));
+
+    const workflowCountPromise = db
+      .select({ count: count(schema.workflow.id) })
+      .from(schema.workflow)
+      .where(
+        and(
+          eq(schema.workflow.organizationId, member.organizationId),
+          isNull(schema.workflow.deletedAt),
+        ),
+      );
+
+    const formCountPromise = db
+      .select({ count: count(schema.form.id) })
+      .from(schema.form)
+      .innerJoin(schema.workflow, eq(schema.workflow.id, schema.form.workflowId))
+      .where(
+        and(
+          eq(schema.workflow.organizationId, member.organizationId),
+          isNull(schema.form.deletedAt),
+          isNull(schema.workflow.deletedAt),
+        ),
+      );
+
+    const [
+      submissionCountsResult,
+      forms,
+      documentStatsResult,
+      fieldStatsResult,
+      memberCountResult,
+      workflowCountResult,
+      formCountResult,
+    ] = await Promise.all([
+      submissionCountsPromise,
+      formsPromise,
+      documentStatsPromise,
+      fieldStatsPromise,
+      memberCountPromise,
+      workflowCountPromise,
+      formCountPromise,
+    ]);
+
+    const submissionCountsRow = submissionCountsResult[0] ?? {};
+    const submissionCounts = {
+      total: Number((submissionCountsRow as { total?: number }).total ?? 0),
+      lastHour: Number((submissionCountsRow as { lastHour?: number }).lastHour ?? 0),
+      lastDay: Number((submissionCountsRow as { lastDay?: number }).lastDay ?? 0),
+      lastWeek: Number((submissionCountsRow as { lastWeek?: number }).lastWeek ?? 0),
+      lastMonth: Number((submissionCountsRow as { lastMonth?: number }).lastMonth ?? 0),
+      final: Number((submissionCountsRow as { final?: number }).final ?? 0),
+    };
+
+    const totalDocuments = Number(
+      (documentStatsResult[0] as { totalDocuments?: number } | undefined)?.totalDocuments ?? 0,
+    );
+    const totalPagesProcessed = Number(
+      (documentStatsResult[0] as { totalPages?: number } | undefined)?.totalPages ?? 0,
+    );
+    const totalFieldsPopulated = Number(
+      (fieldStatsResult[0] as { totalFields?: number } | undefined)?.totalFields ?? 0,
+    );
+
+    const memberCount = Number(
+      (memberCountResult[0] as { count?: number } | undefined)?.count ?? 0,
+    );
+    const workflowCount = Number(
+      (workflowCountResult[0] as { count?: number } | undefined)?.count ?? 0,
+    );
+    const formCount = Number((formCountResult[0] as { count?: number } | undefined)?.count ?? 0);
+
+    const result: AnalyticsCoreData = {
+      submissionCounts,
+      totals: {
+        pages: totalPagesProcessed,
+        documents: totalDocuments,
+        fields: totalFieldsPopulated,
+        members: memberCount,
+        workflows: workflowCount,
+        forms: formCount,
+      },
+      averages: {
+        fieldsPerSubmission:
+          submissionCounts.total > 0 ? totalFieldsPopulated / submissionCounts.total : 0,
+        documentsPerSubmission:
+          submissionCounts.total > 0 ? totalDocuments / submissionCounts.total : 0,
+      },
+      forms,
+    };
+
+    return result;
+  });
+
+const getAnalyticsDeepDiveFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const now = new Date();
+    const ninetyDaysAgo = subDays(now, TRAILING_FORMS_WINDOW_DAYS);
+
+    const weekStartExpr = sql`date_trunc('week', ${schema.submission.createdAt})`;
+    const submissionsByWeekPromise = db
+      .select({
+        weekStart: weekStartExpr,
+        count: sql<number>`count(*)`,
+      })
+      .from(schema.submission)
+      .where(
+        and(
+          eq(schema.submission.organizationId, member.organizationId),
+          eq(schema.submission.type, "extraction"),
+          isNull(schema.submission.deletedAt),
+          gte(schema.submission.createdAt, subWeeks(now, WEEKLY_WINDOW_WEEKS)),
+        ),
+      )
+      .groupBy(weekStartExpr)
+      .orderBy(sql`date_trunc('week', ${schema.submission.createdAt}) DESC`)
+      .limit(WEEKLY_WINDOW_WEEKS);
+
+    const extractionCount = count(schema.documentExtraction.id);
+    const modelBreakdownPromise = db
+      .select({
+        model: schema.documentExtraction.extractionModel,
+        count: extractionCount,
+      })
+      .from(schema.documentExtraction)
+      .innerJoin(schema.document, eq(schema.document.id, schema.documentExtraction.documentId))
+      .innerJoin(schema.deal, eq(schema.deal.id, schema.document.dealId))
+      .where(
+        and(
+          eq(schema.deal.organizationId, member.organizationId),
+          isNull(schema.documentExtraction.deletedAt),
+          isNull(schema.document.deletedAt),
+          isNull(schema.deal.deletedAt),
+        ),
+      )
+      .groupBy(schema.documentExtraction.extractionModel)
+      .orderBy(desc(extractionCount));
+
+    const formCountExpr = count(schema.submission.id);
+    const topFormsPromise = db
+      .select({
+        formId: schema.form.id,
+        formName: schema.form.name,
+        submissions: formCountExpr,
+      })
+      .from(schema.submission)
+      .innerJoin(schema.form, eq(schema.form.id, schema.submission.formId))
+      .innerJoin(schema.workflow, eq(schema.workflow.id, schema.form.workflowId))
+      .where(
+        and(
+          eq(schema.submission.organizationId, member.organizationId),
+          eq(schema.submission.type, "extraction"),
+          isNull(schema.submission.deletedAt),
+          isNull(schema.form.deletedAt),
+          isNull(schema.workflow.deletedAt),
+          gte(schema.submission.createdAt, ninetyDaysAgo),
+        ),
+      )
+      .groupBy(schema.form.id)
+      .orderBy(desc(formCountExpr))
+      .limit(5);
+
+    const documentsCountExpr = sql<number>`count(DISTINCT ${schema.documentExtraction.id})`;
+    const selectedFieldsCountExpr = sql<number>`count(DISTINCT ${schema.submissionItemVersion.id})`;
+    const flaggedFormsPromise = db
+      .select({
+        formId: schema.form.id,
+        formName: schema.form.name,
+        documents: documentsCountExpr,
+        selectedFields: selectedFieldsCountExpr,
+      })
+      .from(schema.form)
+      .innerJoin(schema.workflow, eq(schema.workflow.id, schema.form.workflowId))
+      .leftJoin(
+        schema.submission,
+        and(
+          eq(schema.submission.formId, schema.form.id),
+          eq(schema.submission.organizationId, member.organizationId),
+          eq(schema.submission.type, "extraction"),
+          isNull(schema.submission.deletedAt),
+        ),
+      )
+      .leftJoin(
+        schema.documentExtraction,
+        and(
+          eq(schema.documentExtraction.submissionId, schema.submission.id),
+          isNull(schema.documentExtraction.deletedAt),
+        ),
+      )
+      .leftJoin(
+        schema.submissionGroup,
+        eq(schema.submissionGroup.submissionId, schema.submission.id),
+      )
+      .leftJoin(
+        schema.submissionItem,
+        eq(schema.submissionItem.submissionGroupId, schema.submissionGroup.id),
+      )
+      .leftJoin(
+        schema.submissionItemVersion,
+        and(
+          eq(schema.submissionItemVersion.submissionItemId, schema.submissionItem.id),
+          eq(schema.submissionItemVersion.selected, true),
+        ),
+      )
+      .where(
+        and(
+          eq(schema.workflow.organizationId, member.organizationId),
+          isNull(schema.workflow.deletedAt),
+          isNull(schema.form.deletedAt),
+        ),
+      )
+      .groupBy(schema.form.id)
+      .having(
+        and(
+          sql`count(DISTINCT ${schema.documentExtraction.id}) > 0`,
+          sql`count(DISTINCT ${schema.submissionItemVersion.id}) = 0`,
+        ),
+      )
+      .orderBy(desc(documentsCountExpr));
+
+    const automationAndExceptionPromise = db
+      .select({
+        autoFinalized: sql<number>`
+          count(DISTINCT ${schema.submission.id}) FILTER (
+            WHERE ${schema.submission.status} = ${"final"}
+            AND NOT EXISTS (
+              SELECT 1
+              FROM ${schema.fieldCorrection} fc
+              INNER JOIN ${schema.submissionItem} si ON si.id = fc.submission_item_id
+              INNER JOIN ${schema.submissionGroup} sg ON sg.id = si.submission_group_id
+              WHERE sg.submission_id = ${schema.submission.id}
+            )
+          )
+        `,
+        manualCorrectionSubmissions: sql<number>`
+          count(DISTINCT ${schema.submission.id}) FILTER (
+            WHERE EXISTS (
+              SELECT 1
+              FROM ${schema.fieldCorrection} fc
+              INNER JOIN ${schema.submissionItem} si ON si.id = fc.submission_item_id
+              INNER JOIN ${schema.submissionGroup} sg ON sg.id = si.submission_group_id
+              WHERE sg.submission_id = ${schema.submission.id}
+            )
+          )
+        `,
+        extractionFailures: sql<number>`
+          count(DISTINCT ${schema.submission.id}) FILTER (
+            WHERE EXISTS (
+              SELECT 1
+              FROM ${schema.documentExtraction} de
+              WHERE de.submission_id = ${schema.submission.id}
+              AND de.status = ${"failed"}
+              AND de.deleted_at IS NULL
+            )
+          )
+        `,
+        failedValidations: sql<number>`
+          count(DISTINCT ${schema.submission.id}) FILTER (
+            WHERE EXISTS (
+              SELECT 1
+              FROM ${schema.submissionGroup} sg
+              WHERE sg.submission_id = ${schema.submission.id}
+              AND sg.is_valid = false
+            )
+          )
+        `,
+      })
+      .from(schema.submission)
+      .where(
+        and(
+          eq(schema.submission.organizationId, member.organizationId),
+          eq(schema.submission.type, "extraction"),
+          isNull(schema.submission.deletedAt),
+        ),
+      );
+
+    const submissionTotalPromise = db
+      .select({
+        total: count(schema.submission.id),
+      })
+      .from(schema.submission)
+      .where(
+        and(
+          eq(schema.submission.organizationId, member.organizationId),
+          eq(schema.submission.type, "extraction"),
+          isNull(schema.submission.deletedAt),
+        ),
+      );
+
+    const operationalKpisPromise = db
+      .select({
+        draftBacklog: sql<number>`count(*) FILTER (WHERE ${schema.submission.status} = ${"draft"})`,
+        avgFinalizeHours: sql<number>`
+          COALESCE(
+            AVG(
+              CASE
+                WHEN ${schema.submission.status} = ${"final"}
+                THEN EXTRACT(EPOCH FROM (${schema.submission.updatedAt} - ${schema.submission.createdAt})) / 3600.0
+                ELSE NULL
+              END
+            ),
+            0
+          )
+        `,
+      })
+      .from(schema.submission)
+      .where(
+        and(
+          eq(schema.submission.organizationId, member.organizationId),
+          eq(schema.submission.type, "extraction"),
+          isNull(schema.submission.deletedAt),
+        ),
+      );
+
+    const validationOutcomesPromise = db
+      .select({
+        passed: sql<number>`count(*) FILTER (WHERE ${schema.submissionGroup.isValid} = true)`,
+        failed: sql<number>`count(*) FILTER (WHERE ${schema.submissionGroup.isValid} = false)`,
+        warning: sql<number>`count(*) FILTER (WHERE ${schema.submissionGroup.isValid} IS NULL)`,
+      })
+      .from(schema.submissionGroup)
+      .innerJoin(schema.submission, eq(schema.submission.id, schema.submissionGroup.submissionId))
+      .where(
+        and(
+          eq(schema.submission.organizationId, member.organizationId),
+          eq(schema.submission.type, "extraction"),
+          isNull(schema.submission.deletedAt),
+        ),
+      );
+
+    const documentEvidenceRefsPromise = db
+      .select({
+        count: count(schema.documentCitation.id),
+      })
+      .from(schema.documentCitation)
+      .innerJoin(
+        schema.documentExtraction,
+        eq(schema.documentExtraction.id, schema.documentCitation.documentExtractionId),
+      )
+      .innerJoin(
+        schema.submission,
+        eq(schema.submission.id, schema.documentExtraction.submissionId),
+      )
+      .where(
+        and(
+          eq(schema.submission.organizationId, member.organizationId),
+          eq(schema.submission.type, "extraction"),
+          isNull(schema.submission.deletedAt),
+          isNull(schema.documentExtraction.deletedAt),
+        ),
+      );
+
+    const [
+      submissionsByWeekRaw,
+      modelBreakdownRaw,
+      topFormsRaw,
+      flaggedFormsRaw,
+      automationAndExceptionResult,
+      submissionTotalResult,
+      operationalKpisResult,
+      validationOutcomesResult,
+      documentEvidenceRefsResult,
+    ] = await Promise.all([
+      submissionsByWeekPromise,
+      modelBreakdownPromise,
+      topFormsPromise,
+      flaggedFormsPromise,
+      automationAndExceptionPromise,
+      submissionTotalPromise,
+      operationalKpisPromise,
+      validationOutcomesPromise,
+      documentEvidenceRefsPromise,
+    ]);
+
+    const rawCounts = new Map<number, number>();
+    let lastWeekStartMs = -Infinity;
+    for (const row of submissionsByWeekRaw) {
+      const rawWeekStart = (row as { weekStart: unknown }).weekStart;
+      const d = rawWeekStart instanceof Date ? rawWeekStart : new Date(rawWeekStart as string);
+      const k = startOfWeek(d, { weekStartsOn: WEEK_STARTS_ON }).getTime();
+      rawCounts.set(k, Number((row as { count: number }).count ?? 0));
+      if (k > lastWeekStartMs) lastWeekStartMs = k;
+    }
+
+    const fallbackAnchor = startOfWeek(now, { weekStartsOn: WEEK_STARTS_ON });
+    const anchorDate = Number.isFinite(lastWeekStartMs)
+      ? new Date(lastWeekStartMs)
+      : fallbackAnchor;
+    const weeks = eachWeekOfInterval(
+      { start: subWeeks(anchorDate, WEEKLY_WINDOW_WEEKS - 1), end: anchorDate },
+      { weekStartsOn: WEEK_STARTS_ON },
+    );
+    const submissionsByWeek = weeks.map((d) => {
+      const k = d.getTime();
+      return { weekStart: d.toISOString(), count: rawCounts.get(k) ?? 0 };
+    });
+
+    const modelBreakdown = modelBreakdownRaw.map((row: { model: string; count: number }) => ({
+      model: row.model,
+      count: Number(row.count ?? 0),
+    }));
+
+    const topForms = topFormsRaw.map(
+      (row: { formId: string; formName: string | null; submissions: number }) => ({
+        formId: row.formId,
+        formName: row.formName ?? "Untitled form",
+        submissions: Number(row.submissions ?? 0),
+      }),
+    );
+
+    const flaggedForms = flaggedFormsRaw.map(
+      (row: {
+        formId: string;
+        formName: string | null;
+        documents?: number;
+        selectedFields?: number;
+      }) => ({
+        formId: row.formId,
+        formName: row.formName ?? "Untitled form",
+        documents: Number(row.documents ?? 0),
+        selectedFields: Number(row.selectedFields ?? 0),
+      }),
+    );
+
+    const automationRow = automationAndExceptionResult[0] ?? {};
+    const autoFinalized = Number((automationRow as { autoFinalized?: number }).autoFinalized ?? 0);
+    const manualCorrectionSubmissions = Number(
+      (automationRow as { manualCorrectionSubmissions?: number }).manualCorrectionSubmissions ?? 0,
+    );
+    const extractionFailures = Number(
+      (automationRow as { extractionFailures?: number }).extractionFailures ?? 0,
+    );
+    const failedValidations = Number(
+      (automationRow as { failedValidations?: number }).failedValidations ?? 0,
+    );
+
+    const operationalRow = operationalKpisResult[0] ?? {};
+    const draftBacklog = Number((operationalRow as { draftBacklog?: number }).draftBacklog ?? 0);
+    const avgFinalizeHours = Number(
+      (operationalRow as { avgFinalizeHours?: number }).avgFinalizeHours ?? 0,
+    );
+
+    const validationRow = validationOutcomesResult[0] ?? {};
+    const validationPassed = Number((validationRow as { passed?: number }).passed ?? 0);
+    const validationFailed = Number((validationRow as { failed?: number }).failed ?? 0);
+    const validationWarning = Number((validationRow as { warning?: number }).warning ?? 0);
+    const documentEvidenceRefs = Number(
+      (documentEvidenceRefsResult[0] as { count?: number } | undefined)?.count ?? 0,
+    );
+
+    const totalSubmissionsForRates = Math.max(
+      Number((submissionTotalResult[0] as { total?: number } | undefined)?.total ?? 0),
+      1,
+    );
+
+    const result: AnalyticsDeepDiveData = {
+      submissionsByWeek,
+      modelBreakdown,
+      topForms,
+      flaggedForms,
+      stpMetrics: {
+        autoFinalized,
+        straightThroughRate: (autoFinalized / totalSubmissionsForRates) * 100,
+        autoRoutedRate:
+          ((totalSubmissionsForRates - draftBacklog) / totalSubmissionsForRates) * 100,
+      },
+      exceptionMetrics: {
+        extractionFailures,
+        failedValidations,
+        manualCorrectionSubmissions,
+        exceptionRate:
+          ((extractionFailures + failedValidations + manualCorrectionSubmissions) /
+            totalSubmissionsForRates) *
+          100,
+      },
+      operationalKpis: {
+        draftBacklog,
+        avgFinalizeHours,
+        correctionRate: (manualCorrectionSubmissions / totalSubmissionsForRates) * 100,
+      },
+      validationOutcomes: {
+        passed: validationPassed,
+        failed: validationFailed,
+        warning: validationWarning,
+        documentEvidenceRefs,
+      },
+    };
+
+    return result;
+  });
+
+const getTimeSeriesByFrequencyFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator(
+    z.object({
+      frequency: z.enum(["daily", "weekly", "monthly"] as const),
+    }),
+  )
+  .handler(async ({ context: { member }, data: { frequency } }) => {
+    const now = new Date();
+    const context = createTimeSeriesContext(now);
+    return loadTimeSeries({
+      frequency,
+      member: { organizationId: member.organizationId },
+      context,
+    });
+  });
+
+export const Route = createFileRoute("/_authed/settings/analytics")({
+  component: AnalyticsSettingsPage,
+});
+
+const CRUMBS = [
+  { href: "settings", label: "Settings" },
+  { href: "analytics", label: "Analytics" },
+];
+
+function AnalyticsSettingsPage() {
+  const numberFormatter = new Intl.NumberFormat("en-US");
+  const decimalFormatter = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+  const percentFormatter = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+  const frequencyOptions: { label: string; value: Frequency }[] = [
+    { label: "Daily", value: "daily" },
+    { label: "Weekly", value: "weekly" },
+    { label: "Monthly", value: "monthly" },
+  ];
+  const [analyticsData, setAnalyticsData] = useState<AnalyticsCoreData | null>(null);
+  const [deepDiveData, setDeepDiveData] = useState<AnalyticsDeepDiveData | null>(null);
+  const [frequency, setFrequency] = useState<Frequency>(DEFAULT_FREQUENCY);
+  const [formFilter, setFormFilter] = useState<string>("all");
+  const [seriesByFrequency, setSeriesByFrequency] = useState<
+    Partial<Record<Frequency, TimeSeriesResponse>>
+  >({});
+  const [loadingFrequency, setLoadingFrequency] = useState<Frequency | null>(DEFAULT_FREQUENCY);
+  const [overviewError, setOverviewError] = useState<string | null>(null);
+  const [seriesError, setSeriesError] = useState<string | null>(null);
+  const [deepDiveError, setDeepDiveError] = useState<string | null>(null);
+  const [isOverviewLoading, setIsOverviewLoading] = useState<boolean>(true);
+  const [isDeepDiveLoading, setIsDeepDiveLoading] = useState<boolean>(true);
+  const currentFrequencyRef = useRef<Frequency>(frequency);
+  const requestIdRef = useRef(0);
+  useEffect(() => {
+    currentFrequencyRef.current = frequency;
+  }, [frequency]);
+
+  const loadAnalytics = useCallback(() => {
+    const requestId = ++requestIdRef.current;
+    setIsOverviewLoading(true);
+    setIsDeepDiveLoading(true);
+    setOverviewError(null);
+    setSeriesError(null);
+    setDeepDiveError(null);
+
+    Promise.allSettled([
+      getAnalyticsCoreFn(),
+      getTimeSeriesByFrequencyFn({ data: { frequency: DEFAULT_FREQUENCY } }),
+    ]).then(([overviewResult, seriesResult]) => {
+      if (requestId !== requestIdRef.current) return;
+
+      if (overviewResult.status === "fulfilled") {
+        setFrequency(DEFAULT_FREQUENCY);
+        setFormFilter("all");
+        setSeriesByFrequency({});
+        setAnalyticsData(overviewResult.value);
+        setDeepDiveData(null);
+      } else {
+        console.error("Failed to load analytics overview", overviewResult.reason);
+        setOverviewError("Unable to load analytics. Please try again.");
+      }
+
+      if (seriesResult.status === "fulfilled") {
+        setSeriesByFrequency({ [DEFAULT_FREQUENCY]: seriesResult.value });
+      } else {
+        console.error("Failed to load analytics time series", seriesResult.reason);
+        setSeriesError("Unable to load analytics trend data. Please try again.");
+      }
+
+      setLoadingFrequency((current) => (current === DEFAULT_FREQUENCY ? null : current));
+      setIsOverviewLoading(false);
+    });
+  }, []);
+
+  useEffect(() => {
+    loadAnalytics();
+  }, [loadAnalytics]);
+
+  useEffect(() => {
+    if (!analyticsData) return;
+    let canceled = false;
+    setIsDeepDiveLoading(true);
+    setDeepDiveError(null);
+    getAnalyticsDeepDiveFn()
+      .then((response) => {
+        if (canceled) return;
+        setDeepDiveData(response);
+      })
+      .catch((error) => {
+        if (canceled) return;
+        console.error("Failed to load analytics deep-dive metrics", error);
+        setDeepDiveError("Unable to load deep-dive analytics right now.");
+      })
+      .finally(() => {
+        if (canceled) return;
+        setIsDeepDiveLoading(false);
+      });
+
+    return () => {
+      canceled = true;
+    };
+  }, [analyticsData]);
+
+  const handleFrequencyChange = async (value: Frequency) => {
+    if (!analyticsData) {
+      return;
+    }
+
+    setFrequency(value);
+    setFormFilter("all");
+    setSeriesError(null);
+
+    if (seriesByFrequency[value]) {
+      return;
+    }
+
+    setLoadingFrequency(value);
+    try {
+      const response = await getTimeSeriesByFrequencyFn({ data: { frequency: value } });
+      setSeriesByFrequency((previous) => ({ ...previous, [value]: response }));
+    } catch (error) {
+      console.error("Failed to load analytics time series", error);
+      if (currentFrequencyRef.current === value) {
+        setSeriesError("Unable to load additional analytics data. Please try again.");
+      }
+    } finally {
+      setLoadingFrequency((current) => (current === value ? null : current));
+    }
+  };
+
+  const activeSeries = seriesByFrequency[frequency];
+  const seriesForFrequency = activeSeries?.series ?? [];
+  const totalsForFrequency = activeSeries?.totals ?? [];
+  const isLoadingSeries = loadingFrequency === frequency && !activeSeries;
+
+  const isLoadingOverview = isOverviewLoading && !analyticsData;
+  const hasOverviewError = !!overviewError && !analyticsData;
+
+  const chartPoints = useMemo(() => {
+    if (formFilter === "all") {
+      return totalsForFrequency ?? ([] as TimeSeriesPoint[]);
+    }
+    if (!seriesForFrequency || seriesForFrequency.length === 0) return [] as TimeSeriesPoint[];
+    const specificSeries = seriesForFrequency.find((series) => series.formId === formFilter);
+    return specificSeries ? specificSeries.points : [];
+  }, [formFilter, seriesForFrequency, totalsForFrequency]);
+
+  const formOptions = useMemo(
+    () => [
+      { label: "All forms", value: "all" },
+      ...(analyticsData?.forms ?? []).map((form) => ({
+        label: form.name,
+        value: form.id,
+      })),
+    ],
+    [analyticsData?.forms],
+  );
+
+  if (isLoadingOverview) {
+    return (
+      <Container crumbs={CRUMBS}>
+        <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
+          <PageIntro />
+          <AnalyticsLoadingState label="Fetching analytics overview" />
+        </div>
+      </Container>
+    );
+  }
+
+  if (hasOverviewError) {
+    return (
+      <Container crumbs={CRUMBS}>
+        <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
+          <PageIntro />
+          <AnalyticsErrorState onRetry={loadAnalytics} message={overviewError} />
+        </div>
+      </Container>
+    );
+  }
+
+  if (!analyticsData) return null;
+
+  const data = analyticsData;
+  const deepData = deepDiveData;
+  const showDeepDiveLoading = isDeepDiveLoading && !deepData;
+
+  return (
+    <Container crumbs={CRUMBS}>
+      <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
+        <PageIntro />
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Submission snapshot</CardTitle>
+            <CardDescription>Rolling counts by time horizon</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <P>
+              In the last hour you captured
+              <strong className="mx-1">
+                {numberFormatter.format(data.submissionCounts.lastHour)}
+              </strong>
+              submissions. Over the past day there were
+              <strong className="mx-1">
+                {numberFormatter.format(data.submissionCounts.lastDay)}
+              </strong>
+              submissions, with
+              <strong className="mx-1">
+                {numberFormatter.format(data.submissionCounts.lastWeek)}
+              </strong>
+              submissions this week and
+              <strong className="mx-1">
+                {numberFormatter.format(data.submissionCounts.lastMonth)}
+              </strong>
+              submissions in the last month. Overall, your organization has created
+              <strong className="mx-1">
+                {numberFormatter.format(data.submissionCounts.total)}
+              </strong>
+              submissions, of which
+              <strong className="mx-1">
+                {numberFormatter.format(data.submissionCounts.final)}
+              </strong>
+              are finalized.
+            </P>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>STP performance indicators</CardTitle>
+            <CardDescription>
+              Straight-through processing rates across extraction, validation, and finalization
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {showDeepDiveLoading ? (
+              <AnalyticsLoadingState label="Loading STP metrics" compact />
+            ) : deepDiveError && !deepData ? (
+              <Muted>{deepDiveError}</Muted>
+            ) : (
+              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                <Metric
+                  label="Auto-finalized submissions"
+                  value={deepData?.stpMetrics.autoFinalized ?? 0}
+                  formatter={numberFormatter}
+                />
+                <Metric
+                  label="Straight-through rate"
+                  value={`${percentFormatter.format(deepData?.stpMetrics.straightThroughRate ?? 0)}%`}
+                />
+                <Metric
+                  label="Auto-routed to final"
+                  value={`${percentFormatter.format(deepData?.stpMetrics.autoRoutedRate ?? 0)}%`}
+                />
+                <Metric
+                  label="Finalized submissions"
+                  value={data.submissionCounts.final}
+                  formatter={numberFormatter}
+                />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Exception rates</CardTitle>
+            <CardDescription>
+              Items that fell out of the happy path and required escalation or correction
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              <Metric
+                label="Failed extraction submissions"
+                value={deepData?.exceptionMetrics.extractionFailures ?? 0}
+                formatter={numberFormatter}
+              />
+              <Metric
+                label="Validation failures"
+                value={deepData?.exceptionMetrics.failedValidations ?? 0}
+                formatter={numberFormatter}
+              />
+              <Metric
+                label="Manual correction submissions"
+                value={deepData?.exceptionMetrics.manualCorrectionSubmissions ?? 0}
+                formatter={numberFormatter}
+              />
+              <Metric
+                label="Overall exception rate"
+                value={`${percentFormatter.format(deepData?.exceptionMetrics.exceptionRate ?? 0)}%`}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Operational KPIs</CardTitle>
+            <CardDescription>
+              Throughput and review health metrics for your operations team
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              <Metric
+                label="Draft backlog"
+                value={deepData?.operationalKpis.draftBacklog ?? 0}
+                formatter={numberFormatter}
+              />
+              <Metric
+                label="Avg hours to finalize"
+                value={deepData?.operationalKpis.avgFinalizeHours ?? 0}
+                formatter={decimalFormatter}
+              />
+              <Metric
+                label="Correction rate"
+                value={`${percentFormatter.format(deepData?.operationalKpis.correctionRate ?? 0)}%`}
+              />
+              <Metric
+                label="Finalize rate"
+                value={
+                  data.submissionCounts.total > 0
+                    ? `${percentFormatter.format((data.submissionCounts.final / data.submissionCounts.total) * 100)}%`
+                    : "0.0%"
+                }
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Validation outcomes with rationale/evidence</CardTitle>
+            <CardDescription>
+              Validation status distribution plus audit evidence references from source documents
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              <Metric
+                label="Validation pass checks"
+                value={deepData?.validationOutcomes.passed ?? 0}
+                formatter={numberFormatter}
+              />
+              <Metric
+                label="Validation fail checks"
+                value={deepData?.validationOutcomes.failed ?? 0}
+                formatter={numberFormatter}
+              />
+              <Metric
+                label="Validation warnings"
+                value={deepData?.validationOutcomes.warning ?? 0}
+                formatter={numberFormatter}
+              />
+              <Metric
+                label="Evidence citations"
+                value={deepData?.validationOutcomes.documentEvidenceRefs ?? 0}
+                formatter={numberFormatter}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Key totals</CardTitle>
+            <CardDescription>Document throughput and data capture highlights</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              <Metric
+                label="Documents processed"
+                value={data.totals.documents}
+                formatter={numberFormatter}
+              />
+              <Metric
+                label="Fields populated"
+                value={data.totals.fields}
+                formatter={numberFormatter}
+              />
+              <Metric
+                label="Average fields per submission"
+                value={data.averages.fieldsPerSubmission}
+                formatter={decimalFormatter}
+              />
+              <Metric
+                label="Average documents per submission"
+                value={data.averages.documentsPerSubmission}
+                formatter={decimalFormatter}
+              />
+              <Metric label="Members" value={data.totals.members} formatter={numberFormatter} />
+              <Metric
+                label="Live workflows"
+                value={data.totals.workflows}
+                formatter={numberFormatter}
+              />
+              <Metric
+                label="Published forms"
+                value={data.totals.forms}
+                formatter={numberFormatter}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <CardTitle>Form usage over time</CardTitle>
+              <CardDescription>
+                Monitor daily, weekly, or monthly submission cadence
+              </CardDescription>
+            </div>
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+              <Select
+                value={frequency}
+                onValueChange={(value: Frequency) => void handleFrequencyChange(value)}
+              >
+                <SelectTrigger className="sm:w-36">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {frequencyOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select value={formFilter} onValueChange={setFormFilter}>
+                <SelectTrigger className="sm:w-48">
+                  <SelectValue placeholder="All forms" />
+                </SelectTrigger>
+                <SelectContent>
+                  {formOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </CardHeader>
+          <CardContent>
+            {isLoadingSeries ? (
+              <AnalyticsLoadingState label="Loading chart data" compact />
+            ) : seriesError && !activeSeries ? (
+              <Muted>{seriesError}</Muted>
+            ) : chartPoints.length === 0 ? (
+              <Muted>No submission activity recorded for the selected range yet.</Muted>
+            ) : (
+              <TimeSeriesLineChart points={chartPoints} frequency={frequency} />
+            )}
+          </CardContent>
+        </Card>
+
+        <div className="grid gap-6 lg:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>Extraction model mix</CardTitle>
+              <CardDescription>Relative volume of document runs per model</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {(deepData?.modelBreakdown.length ?? 0) === 0 ? (
+                <Muted>No document extractions recorded yet.</Muted>
+              ) : (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Model</TableHead>
+                      <TableHead className="text-right">Extractions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {deepData?.modelBreakdown.map((entry) => (
+                      <TableRow key={entry.model}>
+                        <TableCell className="font-medium capitalize">{entry.model}</TableCell>
+                        <TableCell className="text-right">
+                          {numberFormatter.format(entry.count)}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Top forms</CardTitle>
+              <CardDescription>Most active intake points over the past 90 days</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {(deepData?.topForms.length ?? 0) === 0 ? (
+                <Muted>No submissions have been captured yet.</Muted>
+              ) : (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Form</TableHead>
+                      <TableHead className="text-right">Submissions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {deepData?.topForms.map((form) => (
+                      <TableRow key={form.formId}>
+                        <TableCell>{form.formName}</TableCell>
+                        <TableCell className="text-right">
+                          {numberFormatter.format(form.submissions)}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Proactive account management</CardTitle>
+            <CardDescription>
+              Forms with uploaded documents but no extracted fields – prioritize reviewing their
+              mappings.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {(deepData?.flaggedForms.length ?? 0) === 0 ? (
+              <Muted>Great news – every form with uploads has captured field data.</Muted>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Form</TableHead>
+                    <TableHead className="text-right">Documents uploaded</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {deepData?.flaggedForms.map(
+                    (form: { formId: string; formName: string; documents: number }) => (
+                      <TableRow key={form.formId}>
+                        <TableCell>{form.formName}</TableCell>
+                        <TableCell className="text-right">
+                          {numberFormatter.format(form.documents)}
+                        </TableCell>
+                      </TableRow>
+                    ),
+                  )}
+                </TableBody>
+              </Table>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Submissions per week</CardTitle>
+            <CardDescription>Trailing twelve-week cadence</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {(deepData?.submissionsByWeek.length ?? 0) === 0 ? (
+              <Muted>Weekly submission totals will appear once activity begins.</Muted>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Week of</TableHead>
+                    <TableHead className="text-right">Submissions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {deepData?.submissionsByWeek.map((week) => {
+                    const weekLabel = format(new Date(week.weekStart), "MMM d, yyyy");
+                    return (
+                      <TableRow key={week.weekStart}>
+                        <TableCell>{weekLabel}</TableCell>
+                        <TableCell className="text-right">
+                          {numberFormatter.format(week.count)}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </Container>
+  );
+}
+
+function PageIntro() {
+  return (
+    <div className="space-y-2">
+      <H1>Analytics</H1>
+      <P className="text-muted-foreground">
+        Track submission throughput, document processing, and model usage trends for your workspace.
+      </P>
+    </div>
+  );
+}
+
+function AnalyticsLoadingState({ label, compact = false }: { label: string; compact?: boolean }) {
+  return (
+    <div
+      className={`bg-card/40 flex items-center justify-center gap-3 rounded-lg border ${compact ? "p-6" : "p-10"}`}
+    >
+      <Loader2Icon className="text-muted-foreground h-5 w-5 animate-spin" />
+      <span className="text-muted-foreground text-sm font-medium">{label}</span>
+    </div>
+  );
+}
+
+function AnalyticsErrorState({
+  message,
+  onRetry,
+}: {
+  message: string | null;
+  onRetry: () => void;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Unable to load analytics</CardTitle>
+        <CardDescription>{message ?? "Please try again."}</CardDescription>
+      </CardHeader>
+      <CardContent className="flex items-center gap-3">
+        <Button onClick={() => onRetry()} variant="secondary">
+          Retry
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+function Metric({
+  label,
+  value,
+  formatter,
+}: {
+  label: string;
+  value: number | string;
+  formatter?: Intl.NumberFormat;
+}) {
+  const renderedValue =
+    typeof value === "number" ? (formatter ? formatter.format(value) : String(value)) : value;
+  return (
+    <div className="rounded-lg border p-4">
+      <div className="text-muted-foreground text-sm font-medium">{label}</div>
+      <div className="mt-2 text-2xl font-semibold">{renderedValue}</div>
+    </div>
+  );
+}
+
+function TimeSeriesLineChart({
+  points,
+  frequency,
+}: {
+  points: TimeSeriesPoint[];
+  frequency: Frequency;
+}) {
+  const chartWidth = 720;
+  const chartHeight = 260;
+  const padding = 48;
+  const innerWidth = chartWidth - padding * 2;
+  const innerHeight = chartHeight - padding * 2;
+  const numberFormatter = useMemo(() => new Intl.NumberFormat("en-US"), []);
+  const { coords, pathD, yMax, yTicks, labelIndexes } = useMemo(() => {
+    const maxValue = points.reduce((max, point) => (point.count > max ? point.count : max), 0);
+    const magnitude = maxValue > 0 ? Math.pow(10, Math.floor(Math.log10(maxValue))) : 1;
+    const yMaxNext = Math.max(Math.ceil(maxValue / magnitude) * magnitude, 1);
+    const tickInterval = yMaxNext / 4;
+    const ticks = Array.from({ length: 5 }, (_, index) => Math.round(index * tickInterval));
+
+    const computedCoords = points.map((point, index) => {
+      const x =
+        points.length === 1
+          ? padding + innerWidth / 2
+          : padding + (index / (points.length - 1)) * innerWidth;
+      const y = padding + innerHeight - (point.count / yMaxNext) * innerHeight;
+      const date = new Date(point.periodStart);
+      const label =
+        frequency === "daily"
+          ? format(date, "MMM d")
+          : frequency === "weekly"
+            ? format(date, "MMM d")
+            : format(date, "MMM yyyy");
+      const detail =
+        frequency === "weekly" ? `Week of ${format(date, "MMM d, yyyy")}` : format(date, "PPP");
+      return { x, y, count: point.count, label, detail };
+    });
+
+    const path = computedCoords.reduce((acc, point, index) => {
+      const command = `${index === 0 ? "M" : "L"}${point.x} ${point.y}`;
+      return acc.length === 0 ? command : `${acc} ${command}`;
+    }, "");
+
+    const labelSlots = 4;
+    const indexes = new Set<number>();
+    if (computedCoords.length > 0) {
+      indexes.add(0);
+      indexes.add(computedCoords.length - 1);
+      const stepRaw =
+        computedCoords.length > 1 ? Math.floor((computedCoords.length - 1) / (labelSlots - 1)) : 1;
+      const step = Math.max(1, stepRaw);
+      for (let i = step; i < computedCoords.length - 1; i += step) {
+        indexes.add(i);
+      }
+    }
+
+    return {
+      coords: computedCoords,
+      pathD: path,
+      yMax: yMaxNext,
+      yTicks: ticks,
+      labelIndexes: indexes,
+    };
+  }, [frequency, innerHeight, innerWidth, padding, points]);
+
+  return (
+    <div className="w-full overflow-hidden">
+      <svg viewBox={`0 0 ${chartWidth} ${chartHeight}`} className="h-full w-full">
+        <defs>
+          <linearGradient id="line-gradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="var(--color-chart-1)" stopOpacity="0.28" />
+            <stop offset="100%" stopColor="var(--color-chart-1)" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+
+        <rect
+          x={padding}
+          y={padding}
+          width={innerWidth}
+          height={innerHeight}
+          fill="url(#line-gradient)"
+          opacity={0.35}
+        />
+
+        {yTicks.map((tick) => {
+          const y = padding + innerHeight - (tick / yMax) * innerHeight;
+          return (
+            <g key={`tick-${tick}`}>
+              <line
+                x1={padding}
+                y1={y}
+                x2={chartWidth - padding}
+                y2={y}
+                stroke="currentColor"
+                strokeOpacity={0.1}
+              />
+              <text
+                x={padding - 8}
+                y={y + 4}
+                textAnchor="end"
+                className="fill-muted-foreground text-xs"
+              >
+                {numberFormatter.format(tick)}
+              </text>
+            </g>
+          );
+        })}
+
+        <line
+          x1={padding}
+          y1={chartHeight - padding}
+          x2={chartWidth - padding}
+          y2={chartHeight - padding}
+          stroke="currentColor"
+          strokeOpacity={0.2}
+        />
+
+        <path d={pathD} fill="none" stroke="var(--color-chart-1)" strokeWidth={2.5} />
+
+        {coords.map((point, index) => (
+          <g key={`point-${index}`}>
+            <circle cx={point.x} cy={point.y} r={4} fill="var(--color-chart-1)" />
+            <title>
+              {point.detail}
+              {"\n"}
+              {numberFormatter.format(point.count)} submissions
+            </title>
+          </g>
+        ))}
+
+        {coords.map((point, index) => (
+          <g key={`label-${index}`}>
+            {labelIndexes.has(index) ? (
+              <text
+                x={point.x}
+                y={chartHeight - padding + 20}
+                textAnchor="middle"
+                className="fill-muted-foreground text-xs"
+              >
+                {point.label}
+              </text>
+            ) : null}
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+}