@utopia-studio-design/design-system-cli 0.8.1 → 0.8.2

package/data/docs/ux-source-evidence/admin-providers.json

@@ -0,0 +1,38 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/admin/providers/page.tsx",
+  "sha256": "5222640ee2c3dfe38c26b86f7edfb27dd283d8c9d1622a791b5dc5404c11b7c6",
+  "imports": [
+    "next/link",
+    "lucide-react",
+    "@/components/ui/button",
+    "@/components/ui/badge",
+    "@/components/ui/card",
+    "@/components/admin/admin-shell",
+    "@/lib/closures-mock"
+  ],
+  "tokens": [
+    "--color-bg-brand-muted",
+    "--color-status-error-border",
+    "--color-status-error-text",
+    "--color-status-success-border",
+    "--color-status-success-text",
+    "--color-text-brand",
+    "--color-text-muted",
+    "--color-text-primary",
+    "--color-text-secondary"
+  ],
+  "fragments": [
+    {
+      "id": "ProvidersPage",
+      "line": 11,
+      "code": "export default function ProvidersPage() {\n  return (\n    <AdminShell>\n      <Link href=\"/admin/devices\" className=\"inline-flex items-center gap-1.5 text-[12px] mb-4 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-secondary)\" }}>\n        <ArrowLeft size={13} /> Back to devices\n      </Link>\n\n      <div className=\"flex items-start justify-between gap-4 mb-6\">\n        <div>\n          <h1 className=\"text-[1.75rem] font-semibold tracking-tight mb-1\" style={{ letterSpacing: \"-0.025em\" }}>\n            Teleproctoring providers\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            API integrations with third-party teleproctoring vendors.\n          </p>\n        </div>\n        <Button variant=\"brand\"><Plus size={13} /> Add provider</Button>\n      </div>\n\n      <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3\">\n        {TPI_PROVIDERS.map((p) => (\n          <Card key={p.id}>\n            <CardHeader>\n              <div className=\"flex items-start justify-between gap-3 mb-2\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\" style={{ background: \"var(--color-bg-brand-muted)\", color: \"var(--color-text-brand)\" }}>\n                    <Plug size={16} strokeWidth={1.7} />\n                  </div>\n                  <div>\n                    <CardTitle className=\"text-base\">{p.name}</CardTitle>\n                    <CardDescription className=\"text-[11px]\">{p.devices} device{p.devices === 1 ? \"\" : \"s\"} linked</CardDescription>\n                  </div>\n                </div>\n                {p.status === \"connected\" ? (\n                  <Badge variant=\"outline\" className=\"text-[10px]\" style={{ color: \"var(--color-status-success-text)\", borderColor: \"var(--color-status-success-border)\" }}>\n                    <CheckCircle2 size={9} className=\"mr-1\" /> Connected\n                  </Badge>\n                ) : (\n                  <Badge variant=\"outline\" className=\"text-[10px]\" style={{ color: \"var(--color-status-error-text)\", borderColor: \"var(--color-status-error-border)\" }}>\n                    <AlertTriangle size={9} className=\"mr-1\" /> Disconnected\n                  </Badge>\n                )}\n              </div>\n            </CardHeader>\n            <CardContent>\n              <dl className=\"space-y-2 text-[12px]\">\n                <Row label=\"API base\"  value={<code className=\"text-[11px]\">{p.apiBase}</code>} />\n                <Row label=\"Auth\"      value={<span className=\"capitalize\">{p.auth.replace(\"_\", \" \")}</span>} />\n                <Row label=\"Last call\" value={<span style={{ color: \"var(--color-text-muted)\" }}>{p.lastCallAt}</span>} />\n              </dl>\n              <div className=\"mt-4 flex items-center gap-2\">\n                <Button variant=\"outline\" size=\"sm\">Test connection</Button>\n                <Button variant=\"outline\" size=\"sm\">Edit credentials</Button>\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </AdminShell>\n  );\n}"
+    },
+    {
+      "id": "Row",
+      "line": 73,
+      "code": "function Row({ label, value }: { label: string; value: React.ReactNode }) {\n  return (\n    <div className=\"flex items-start justify-between gap-2\">\n      <dt className=\"shrink-0\" style={{ color: \"var(--color-text-muted)\" }}>{label}</dt>\n      <dd className=\"text-right text-[11px]\" style={{ color: \"var(--color-text-primary)\" }}>{value}</dd>\n    </div>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { Plus, Plug, ArrowLeft, CheckCircle2, AlertTriangle } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from \"@/components/ui/card\";\nimport { AdminShell } from \"@/components/admin/admin-shell\";\nimport { TPI_PROVIDERS } from \"@/lib/closures-mock\";\n\nexport default function ProvidersPage() {\n  return (\n    <AdminShell>\n      <Link href=\"/admin/devices\" className=\"inline-flex items-center gap-1.5 text-[12px] mb-4 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-secondary)\" }}>\n        <ArrowLeft size={13} /> Back to devices\n      </Link>\n\n      <div className=\"flex items-start justify-between gap-4 mb-6\">\n        <div>\n          <h1 className=\"text-[1.75rem] font-semibold tracking-tight mb-1\" style={{ letterSpacing: \"-0.025em\" }}>\n            Teleproctoring providers\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            API integrations with third-party teleproctoring vendors.\n          </p>\n        </div>\n        <Button variant=\"brand\"><Plus size={13} /> Add provider</Button>\n      </div>\n\n      <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3\">\n        {TPI_PROVIDERS.map((p) => (\n          <Card key={p.id}>\n            <CardHeader>\n              <div className=\"flex items-start justify-between gap-3 mb-2\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\" style={{ background: \"var(--color-bg-brand-muted)\", color: \"var(--color-text-brand)\" }}>\n                    <Plug size={16} strokeWidth={1.7} />\n                  </div>\n                  <div>\n                    <CardTitle className=\"text-base\">{p.name}</CardTitle>\n                    <CardDescription className=\"text-[11px]\">{p.devices} device{p.devices === 1 ? \"\" : \"s\"} linked</CardDescription>\n                  </div>\n                </div>\n                {p.status === \"connected\" ? (\n                  <Badge variant=\"outline\" className=\"text-[10px]\" style={{ color: \"var(--color-status-success-text)\", borderColor: \"var(--color-status-success-border)\" }}>\n                    <CheckCircle2 size={9} className=\"mr-1\" /> Connected\n                  </Badge>\n                ) : (\n                  <Badge variant=\"outline\" className=\"text-[10px]\" style={{ color: \"var(--color-status-error-text)\", borderColor: \"var(--color-status-error-border)\" }}>\n                    <AlertTriangle size={9} className=\"mr-1\" /> Disconnected\n                  </Badge>\n                )}\n              </div>\n            </CardHeader>\n            <CardContent>\n              <dl className=\"space-y-2 text-[12px]\">\n                <Row label=\"API base\"  value={<code className=\"text-[11px]\">{p.apiBase}</code>} />\n                <Row label=\"Auth\"      value={<span className=\"capitalize\">{p.auth.replace(\"_\", \" \")}</span>} />\n                <Row label=\"Last call\" value={<span style={{ color: \"var(--color-text-muted)\" }}>{p.lastCallAt}</span>} />\n              </dl>\n              <div className=\"mt-4 flex items-center gap-2\">\n                <Button variant=\"outline\" size=\"sm\">Test connection</Button>\n                <Button variant=\"outline\" size=\"sm\">Edit credentials</Button>\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </AdminShell>\n  );\n}\n\nfunction Row({ label, value }: { label: string; value: React.ReactNode }) {\n  return (\n    <div className=\"flex items-start justify-between gap-2\">\n      <dt className=\"shrink-0\" style={{ color: \"var(--color-text-muted)\" }}>{label}</dt>\n      <dd className=\"text-right text-[11px]\" style={{ color: \"var(--color-text-primary)\" }}>{value}</dd>\n    </div>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/admin-settings.json

@@ -0,0 +1,18 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/admin/settings/page.tsx",
+  "sha256": "20fc18b01d7b0c7dcb4fdada3428332539cc1c2c8a816976cc0f3b4fdf588bed",
+  "imports": [
+    "@/components/admin/admin-shell",
+    "@/components/portal/settings-view"
+  ],
+  "tokens": [],
+  "fragments": [
+    {
+      "id": "AdminSettingsPage",
+      "line": 4,
+      "code": "export default function AdminSettingsPage() {\n  return (\n    <AdminShell>\n      <SettingsView\n        kind=\"admin\"\n        name=\"Eleanor Whitmore\"\n        email=\"s.kim@mentix.health\"\n        id=\"MX-A0001A\"\n      />\n    </AdminShell>\n  );\n}"
+    }
+  ],
+  "content": "import { AdminShell } from \"@/components/admin/admin-shell\";\nimport { SettingsView } from \"@/components/portal/settings-view\";\n\nexport default function AdminSettingsPage() {\n  return (\n    <AdminShell>\n      <SettingsView\n        kind=\"admin\"\n        name=\"Eleanor Whitmore\"\n        email=\"s.kim@mentix.health\"\n        id=\"MX-A0001A\"\n      />\n    </AdminShell>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/admin-subscriptions-detail-allocate.json

@@ -0,0 +1,42 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/admin/subscriptions/[id]/allocate/page.tsx",
+  "sha256": "06725b6ee89ae953df007105149dc03e13317a411b4a05db72e9e4d5e2503bac",
+  "imports": [
+    "next/link",
+    "react",
+    "lucide-react",
+    "@/components/ui/button",
+    "@/components/ui/input",
+    "@/components/ui/card",
+    "@/components/ui/badge",
+    "@/components/ui/table",
+    "@/components/admin/admin-shell",
+    "@/components/auth/auth-primitives",
+    "@/lib/admin-mock",
+    "@/lib/credits-mock",
+    "@/lib/credits"
+  ],
+  "tokens": [
+    "--color-bg-subtle",
+    "--color-status-error-text",
+    "--color-status-success-bg",
+    "--color-status-success-text",
+    "--color-text-muted",
+    "--color-text-primary",
+    "--color-text-secondary"
+  ],
+  "fragments": [
+    {
+      "id": "AllocatePage",
+      "line": 17,
+      "code": "export default function AllocatePage({ params }: { params: Promise<{ id: string }> }) {\n  const { id } = use(params);\n  const sub = SUBSCRIPTIONS.find((s) => s.id === id);\n\n  if (!sub) {\n    return (\n      <AdminShell>\n        <div className=\"text-center py-20\">\n          <p className=\"text-[14px]\" style={{ color: \"var(--color-text-secondary)\" }}>Subscription not found.</p>\n        </div>\n      </AdminShell>\n    );\n  }\n\n  const remaining = creditsRemaining(sub);\n\n  // Trainees eligible for allocation: status Active or Credits Pending\n  const eligible = APPLICATIONS.filter((a) =>\n    a.role === \"trainee\" && (a.status === \"credits_pending\" || a.status === \"hardware_pending\" || a.status === \"active\")\n  );\n\n  const [amounts, setAmounts] = useState<Record<string, number>>({});\n  const [saving, setSaving] = useState(false);\n  const [done, setDone] = useState(false);\n\n  const totalToAllocate = useMemo(() =>\n    Object.values(amounts).reduce((a, b) => a + b, 0),\n    [amounts]\n  );\n\n  const setAmount = (id: string, n: number) => {\n    const clamped = Math.max(0, n);\n    setAmounts({ ...amounts, [id]: clamped });\n  };\n\n  const overBudget = totalToAllocate > remaining;\n  const canSubmit = totalToAllocate > 0 && !overBudget;\n\n  if (done) {\n    return (\n      <AdminShell>\n        <div className=\"max-w-md mx-auto text-center py-16\">\n          <div className=\"w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-5\" style={{ background: \"var(--color-status-success-bg)\", color: \"var(--color-status-success-text)\" }}>\n            <CheckCircle2 size={32} strokeWidth={1.6} />\n          </div>\n          <h1 className=\"text-[1.5rem] font-semibold mb-2\" style={{ letterSpacing: \"-0.025em\" }}>\n            {totalToAllocate} credits allocated\n          </h1>\n          <p className=\"text-sm mb-6\" style={{ color: \"var(--color-text-secondary)\" }}>\n            Trainees have been notified by email.\n          </p>\n          <Link href={`/admin/subscriptions/${sub.id}`}>\n            <Button variant=\"brand\" size=\"lg\">Back to subscription <ArrowRight size={13} /></Button>\n          </Link>\n        </div>\n      </AdminShell>\n    );\n  }\n\n  return (\n    <AdminShell>\n      <Link href={`/admin/subscriptions/${sub.id}`} className=\"inline-flex items-center gap-1.5 text-[12px] mb-4 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-secondary)\" }}>\n        <ArrowLeft size={13} /> Back to {sub.sponsorName}\n      </Link>\n\n      <div className=\"mb-6\">\n        <h1 className=\"text-[1.75rem] font-semibold tracking-tight mb-1\" style={{ letterSpacing: \"-0.025em\" }}>\n          Allocate credits\n        </h1>\n        <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n          Move credits from <strong style={{ color: \"var(--color-text-primary)\" }}>{sub.sponsorName}</strong>'s pool to specific trainees.\n        </p>\n      </div>\n\n      {/* Budget summary */}\n      <Card className=\"mb-5\">\n        <CardContent className=\"pt-4\">\n          <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n            <Stat label=\"Sponsor pool\" value={remaining.toString()} sub=\"available to allocate\" />\n            <Stat label=\"Allocating now\" value={totalToAllocate.toString()} sub=\"credits selected\" />\n            <Stat label=\"After allocation\" value={(remaining - totalToAllocate).toString()} sub=\"will remain\" accent={overBudget ? \"error\" : \"default\"} />\n          </div>\n        </CardContent>\n      </Card>\n\n      {overBudget && (\n        <div className=\"mb-5\">\n          <InlineAlert variant=\"error\" title=\"Insufficient credits in sponsor pool\">\n            You're trying to allocate {totalToAllocate} but only {remaining} are available. Reduce the allocation or top up the pool first.\n          </InlineAlert>\n        </div>\n      )}\n\n      {/* Trainee picker */}\n      <Card className=\"p-0 mb-5\">\n        <Table>\n          <TableHeader style={{ background: \"var(--color-bg-subtle)\" }}>\n            <TableRow>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Trainee</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Procedures</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Status</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Allocate</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {eligible.map((t) => {\n              const amount = amounts[t.id] ?? 0;\n              return (\n                <TableRow key={t.id}>\n                  <TableCell className=\"px-5 py-3\">\n                    <div>\n                      <div className=\"font-medium text-[13px]\">{t.name}</div>\n                      <div className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>{t.institution}</div>\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3\">\n                    <div className=\"flex flex-wrap gap-1\">\n                      {(t.procedures ?? []).map((p) => <Badge key={p} variant=\"outline\" className=\"text-[10px]\">{p}</Badge>)}\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3\">\n                    <Badge variant=\"outline\" className=\"text-[10px]\">{t.status.replace(\"_\", \" \")}</Badge>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3\">\n                    <div className=\"flex items-center gap-1.5 justify-end\">\n                      <Button variant=\"outline\" size=\"icon-sm\" onClick={() => setAmount(t.id, amount - 1)} disabled={amount === 0} aria-label=\"Decrease\"><Minus size={12} /></Button>\n                      <Input\n                        type=\"number\"\n                        value={amount || \"\"}\n                        onChange={(e) => setAmount(t.id, parseInt(e.target.value) || 0)}\n                        placeholder=\"0\"\n                        className=\"h-8 w-14 text-center tabular-nums\"\n                      />\n                      <Button variant=\"outline\" size=\"icon-sm\" onClick={() => setAmount(t.id, amount + 1)} aria-label=\"Increase\"><Plus size={12} /></Button>\n                    </div>\n                  </TableCell>\n                </TableRow>\n              );\n            })}\n          </TableBody>\n        </Table>\n      </Card>\n\n      {/* Footer */}\n      <div className=\"flex items-center justify-end gap-2\">\n        <Link href={`/admin/subscriptions/${sub.id}`}>\n          <Button variant=\"outline\">Cancel</Button>\n        </Link>\n        <Button\n          variant=\"brand\"\n          disabled={!canSubmit || saving}\n          onClick={() => { setSaving(true); setTimeout(() => setDone(true), 800); }}\n        >\n          {saving ? <><Spinner className=\"w-3.5 h-3.5 mr-1\" /> Allocating…</> : <>Allocate {totalToAllocate} credits <ArrowRight size={13} /></>}\n        </Button>\n      </div>\n    </AdminShell>\n  );\n}"
+    },
+    {
+      "id": "Stat",
+      "line": 177,
+      "code": "function Stat({ label, value, sub, accent }: { label: string; value: string; sub: string; accent?: \"error\" | \"default\" }) {\n  const color = accent === \"error\" ? \"var(--color-status-error-text)\" : \"var(--color-text-primary)\";\n  return (\n    <div>\n      <div className=\"text-[10px] font-semibold uppercase tracking-wide mb-1\" style={{ color: \"var(--color-text-muted)\" }}>{label}</div>\n      <div className=\"text-2xl font-semibold tabular-nums\" style={{ letterSpacing: \"-0.02em\", color }}>{value}</div>\n      <div className=\"text-[11px] mt-0.5\" style={{ color: \"var(--color-text-muted)\" }}>{sub}</div>\n    </div>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { use, useState, useMemo } from \"react\";\nimport { ArrowLeft, ArrowRight, AlertCircle, Plus, Minus, CheckCircle2 } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"@/components/ui/table\";\nimport { AdminShell } from \"@/components/admin/admin-shell\";\nimport { InlineAlert, Spinner } from \"@/components/auth/auth-primitives\";\nimport { APPLICATIONS } from \"@/lib/admin-mock\";\nimport { SUBSCRIPTIONS } from \"@/lib/credits-mock\";\nimport { creditsRemaining } from \"@/lib/credits\";\n\nexport default function AllocatePage({ params }: { params: Promise<{ id: string }> }) {\n  const { id } = use(params);\n  const sub = SUBSCRIPTIONS.find((s) => s.id === id);\n\n  if (!sub) {\n    return (\n      <AdminShell>\n        <div className=\"text-center py-20\">\n          <p className=\"text-[14px]\" style={{ color: \"var(--color-text-secondary)\" }}>Subscription not found.</p>\n        </div>\n      </AdminShell>\n    );\n  }\n\n  const remaining = creditsRemaining(sub);\n\n  // Trainees eligible for allocation: status Active or Credits Pending\n  const eligible = APPLICATIONS.filter((a) =>\n    a.role === \"trainee\" && (a.status === \"credits_pending\" || a.status === \"hardware_pending\" || a.status === \"active\")\n  );\n\n  const [amounts, setAmounts] = useState<Record<string, number>>({});\n  const [saving, setSaving] = useState(false);\n  const [done, setDone] = useState(false);\n\n  const totalToAllocate = useMemo(() =>\n    Object.values(amounts).reduce((a, b) => a + b, 0),\n    [amounts]\n  );\n\n  const setAmount = (id: string, n: number) => {\n    const clamped = Math.max(0, n);\n    setAmounts({ ...amounts, [id]: clamped });\n  };\n\n  const overBudget = totalToAllocate > remaining;\n  const canSubmit = totalToAllocate > 0 && !overBudget;\n\n  if (done) {\n    return (\n      <AdminShell>\n        <div className=\"max-w-md mx-auto text-center py-16\">\n          <div className=\"w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-5\" style={{ background: \"var(--color-status-success-bg)\", color: \"var(--color-status-success-text)\" }}>\n            <CheckCircle2 size={32} strokeWidth={1.6} />\n          </div>\n          <h1 className=\"text-[1.5rem] font-semibold mb-2\" style={{ letterSpacing: \"-0.025em\" }}>\n            {totalToAllocate} credits allocated\n          </h1>\n          <p className=\"text-sm mb-6\" style={{ color: \"var(--color-text-secondary)\" }}>\n            Trainees have been notified by email.\n          </p>\n          <Link href={`/admin/subscriptions/${sub.id}`}>\n            <Button variant=\"brand\" size=\"lg\">Back to subscription <ArrowRight size={13} /></Button>\n          </Link>\n        </div>\n      </AdminShell>\n    );\n  }\n\n  return (\n    <AdminShell>\n      <Link href={`/admin/subscriptions/${sub.id}`} className=\"inline-flex items-center gap-1.5 text-[12px] mb-4 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-secondary)\" }}>\n        <ArrowLeft size={13} /> Back to {sub.sponsorName}\n      </Link>\n\n      <div className=\"mb-6\">\n        <h1 className=\"text-[1.75rem] font-semibold tracking-tight mb-1\" style={{ letterSpacing: \"-0.025em\" }}>\n          Allocate credits\n        </h1>\n        <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n          Move credits from <strong style={{ color: \"var(--color-text-primary)\" }}>{sub.sponsorName}</strong>'s pool to specific trainees.\n        </p>\n      </div>\n\n      {/* Budget summary */}\n      <Card className=\"mb-5\">\n        <CardContent className=\"pt-4\">\n          <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n            <Stat label=\"Sponsor pool\" value={remaining.toString()} sub=\"available to allocate\" />\n            <Stat label=\"Allocating now\" value={totalToAllocate.toString()} sub=\"credits selected\" />\n            <Stat label=\"After allocation\" value={(remaining - totalToAllocate).toString()} sub=\"will remain\" accent={overBudget ? \"error\" : \"default\"} />\n          </div>\n        </CardContent>\n      </Card>\n\n      {overBudget && (\n        <div className=\"mb-5\">\n          <InlineAlert variant=\"error\" title=\"Insufficient credits in sponsor pool\">\n            You're trying to allocate {totalToAllocate} but only {remaining} are available. Reduce the allocation or top up the pool first.\n          </InlineAlert>\n        </div>\n      )}\n\n      {/* Trainee picker */}\n      <Card className=\"p-0 mb-5\">\n        <Table>\n          <TableHeader style={{ background: \"var(--color-bg-subtle)\" }}>\n            <TableRow>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Trainee</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Procedures</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Status</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Allocate</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {eligible.map((t) => {\n              const amount = amounts[t.id] ?? 0;\n              return (\n                <TableRow key={t.id}>\n                  <TableCell className=\"px-5 py-3\">\n                    <div>\n                      <div className=\"font-medium text-[13px]\">{t.name}</div>\n                      <div className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>{t.institution}</div>\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3\">\n                    <div className=\"flex flex-wrap gap-1\">\n                      {(t.procedures ?? []).map((p) => <Badge key={p} variant=\"outline\" className=\"text-[10px]\">{p}</Badge>)}\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3\">\n                    <Badge variant=\"outline\" className=\"text-[10px]\">{t.status.replace(\"_\", \" \")}</Badge>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3\">\n                    <div className=\"flex items-center gap-1.5 justify-end\">\n                      <Button variant=\"outline\" size=\"icon-sm\" onClick={() => setAmount(t.id, amount - 1)} disabled={amount === 0} aria-label=\"Decrease\"><Minus size={12} /></Button>\n                      <Input\n                        type=\"number\"\n                        value={amount || \"\"}\n                        onChange={(e) => setAmount(t.id, parseInt(e.target.value) || 0)}\n                        placeholder=\"0\"\n                        className=\"h-8 w-14 text-center tabular-nums\"\n                      />\n                      <Button variant=\"outline\" size=\"icon-sm\" onClick={() => setAmount(t.id, amount + 1)} aria-label=\"Increase\"><Plus size={12} /></Button>\n                    </div>\n                  </TableCell>\n                </TableRow>\n              );\n            })}\n          </TableBody>\n        </Table>\n      </Card>\n\n      {/* Footer */}\n      <div className=\"flex items-center justify-end gap-2\">\n        <Link href={`/admin/subscriptions/${sub.id}`}>\n          <Button variant=\"outline\">Cancel</Button>\n        </Link>\n        <Button\n          variant=\"brand\"\n          disabled={!canSubmit || saving}\n          onClick={() => { setSaving(true); setTimeout(() => setDone(true), 800); }}\n        >\n          {saving ? <><Spinner className=\"w-3.5 h-3.5 mr-1\" /> Allocating…</> : <>Allocate {totalToAllocate} credits <ArrowRight size={13} /></>}\n        </Button>\n      </div>\n    </AdminShell>\n  );\n}\n\nfunction Stat({ label, value, sub, accent }: { label: string; value: string; sub: string; accent?: \"error\" | \"default\" }) {\n  const color = accent === \"error\" ? \"var(--color-status-error-text)\" : \"var(--color-text-primary)\";\n  return (\n    <div>\n      <div className=\"text-[10px] font-semibold uppercase tracking-wide mb-1\" style={{ color: \"var(--color-text-muted)\" }}>{label}</div>\n      <div className=\"text-2xl font-semibold tabular-nums\" style={{ letterSpacing: \"-0.02em\", color }}>{value}</div>\n      <div className=\"text-[11px] mt-0.5\" style={{ color: \"var(--color-text-muted)\" }}>{sub}</div>\n    </div>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/admin-subscriptions-detail.json

@@ -0,0 +1,48 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/admin/subscriptions/[id]/page.tsx",
+  "sha256": "90da1916703c2f480eae476c142acfd1a05a3e8814db106acbdd98d4e032dea5",
+  "imports": [
+    "next/link",
+    "react",
+    "lucide-react",
+    "@/components/ui/button",
+    "@/components/ui/badge",
+    "@/components/ui/card",
+    "@/components/ui/separator",
+    "@/components/ui/table",
+    "@/components/admin/admin-shell",
+    "@/components/portal/usage-sparkline",
+    "@/lib/credits-mock",
+    "@/lib/credits"
+  ],
+  "tokens": [
+    "--color-bg-subtle",
+    "--color-border-default",
+    "--color-status-error-text",
+    "--color-text-muted",
+    "--color-text-primary",
+    "--color-text-secondary",
+    "--gray-950",
+    "--teal-300",
+    "--teal-500"
+  ],
+  "fragments": [
+    {
+      "id": "SubscriptionDetailPage",
+      "line": 16,
+      "code": "export default function SubscriptionDetailPage({ params }: { params: Promise<{ id: string }> }) {\n  const { id } = use(params);\n  const sub = SUBSCRIPTIONS.find((s) => s.id === id);\n\n  if (!sub) {\n    return (\n      <AdminShell>\n        <div className=\"text-center py-20\">\n          <p className=\"text-[14px] mb-4\" style={{ color: \"var(--color-text-secondary)\" }}>Subscription not found.</p>\n          <Link href=\"/admin/subscriptions\"><Button variant=\"outline\">← Back to subscriptions</Button></Link>\n        </div>\n      </AdminShell>\n    );\n  }\n\n  const tier = TIERS[sub.tier];\n  const remaining = creditsRemaining(sub);\n  const util = utilization(sub);\n  const daysLeft = daysFrom(sub.endDate);\n  const allocations = ALLOCATIONS_BY_SUB[sub.id] ?? [];\n\n  return (\n    <AdminShell>\n      <Link href=\"/admin/subscriptions\" className=\"inline-flex items-center gap-1.5 text-[12px] mb-4 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-secondary)\" }}>\n        <ArrowLeft size={13} /> Back to subscriptions\n      </Link>\n\n      <div className=\"flex items-start justify-between gap-4 mb-6\">\n        <div className=\"flex items-start gap-4\">\n          <div className=\"w-12 h-12 rounded-xl flex items-center justify-center text-[14px] font-bold shrink-0\" style={{ background: \"var(--teal-500)\", color: \"var(--gray-950)\" }}>\n            {sub.sponsorName.split(\" \").slice(0, 2).map((s) => s[0]).join(\"\")}\n          </div>\n          <div>\n            <h1 className=\"text-[1.5rem] font-semibold tracking-tight\" style={{ letterSpacing: \"-0.025em\" }}>{sub.sponsorName}</h1>\n            <div className=\"flex items-center gap-2 mt-1\">\n              <Badge variant=\"outline\" className=\"capitalize\">{tier.name}</Badge>\n              <Badge variant=\"outline\" className=\"capitalize\">{sub.status.replace(\"_\", \" \")}</Badge>\n              <span className=\"text-[12px]\" style={{ color: \"var(--color-text-muted)\" }}>· Sub {sub.id}</span>\n            </div>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\"><RefreshCcw size={13} /> Renew / Upgrade</Button>\n          <Button variant=\"brand\" render={<Link href={`/admin/subscriptions/${sub.id}/allocate`} />}>\n            <Plus size={13} /> Allocate credits\n          </Button>\n        </div>\n      </div>\n\n      {/* 2-column layout */}\n      <div className=\"grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6\">\n        <div className=\"space-y-6\">\n          {/* Summary card */}\n          <Card>\n            <CardHeader>\n              <div className=\"flex items-center justify-between\">\n                <CardTitle className=\"text-base\">Credit pool</CardTitle>\n                <span className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>\n                  {sub.creditsConsumed} of {sub.totalCredits} consumed\n                </span>\n              </div>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4 mb-5\">\n                <Metric label=\"Purchased\"   value={sub.totalCredits.toString()} />\n                <Metric label=\"Allocated\"   value={sub.creditsAllocated.toString()} />\n                <Metric label=\"Escrowed\"    value={sub.creditsEscrowed.toString()} />\n                <Metric label=\"Consumed\"    value={sub.creditsConsumed.toString()} />\n              </div>\n              <div className=\"h-2 rounded-full overflow-hidden flex\" style={{ background: \"var(--color-border-default)\" }}>\n                <div className=\"h-full\" style={{ width: `${(sub.creditsConsumed / sub.totalCredits) * 100}%`, background: \"var(--teal-500)\" }} />\n                <div className=\"h-full\" style={{ width: `${(sub.creditsEscrowed / sub.totalCredits) * 100}%`, background: \"var(--teal-300)\" }} />\n                <div className=\"h-full\" style={{ width: `${((sub.creditsAllocated - sub.creditsConsumed - sub.creditsEscrowed) / sub.totalCredits) * 100}%`, background: \"color-mix(in srgb, var(--teal-500) 25%, transparent)\" }} />\n              </div>\n            </CardContent>\n          </Card>\n\n          {/* Trend */}\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-base\">Consumption trend</CardTitle>\n              <CardDescription>Cumulative credits consumed.</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <UsageSparkline data={CONSUMPTION_HISTORY[sub.id] ?? []} max={sub.totalCredits} />\n            </CardContent>\n          </Card>\n\n          {/* Allocations */}\n          <Card className=\"p-0\">\n            <CardHeader className=\"px-4 py-4\">\n              <div className=\"flex items-center justify-between\">\n                <div>\n                  <CardTitle className=\"text-base\">Trainee allocations</CardTitle>\n                  <CardDescription>{allocations.length} sponsored trainees</CardDescription>\n                </div>\n                <Button variant=\"outline\" size=\"sm\" render={<Link href={`/admin/subscriptions/${sub.id}/allocate`} />}>\n                  <Plus size={11} /> Allocate\n                </Button>\n              </div>\n            </CardHeader>\n            <Table>\n              <TableHeader style={{ background: \"var(--color-bg-subtle)\" }}>\n                <TableRow>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-4\" style={{ color: \"var(--color-text-muted)\" }}>Trainee</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-4 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Allocated</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-4 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Consumed</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-4 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Remaining</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {allocations.map((a) => (\n                  <TableRow key={a.traineeId}>\n                    <TableCell className=\"px-4 py-2.5 text-[12px] font-medium\">{a.traineeName}</TableCell>\n                    <TableCell className=\"px-4 py-2.5 text-right text-[12px] tabular-nums\">{a.allocated}</TableCell>\n                    <TableCell className=\"px-4 py-2.5 text-right text-[12px] tabular-nums\" style={{ color: \"var(--color-text-secondary)\" }}>{a.consumed}</TableCell>\n                    <TableCell className=\"px-4 py-2.5 text-right text-[12px] tabular-nums font-medium\" style={{ color: a.remaining === 0 ? \"var(--color-status-error-text)\" : \"var(--color-text-primary)\" }}>\n                      {a.remaining}\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </Card>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-[13px] flex items-center gap-2\">\n                <Building2 size={13} /> Sponsor\n              </CardTitle>\n            </CardHeader>\n            <CardContent>\n              <dl className=\"space-y-2.5 text-[12px]\">\n                <DRow label=\"Primary contact\" value={sub.primaryContactName} />\n                <DRow label=\"Email\" value={sub.primaryContactEmail} />\n              </dl>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-[13px] flex items-center gap-2\">\n                <CalendarIcon size={13} /> Subscription\n              </CardTitle>\n            </CardHeader>\n            <CardContent>\n              <dl className=\"space-y-2.5 text-[12px]\">\n                <DRow label=\"Start\" value={sub.startDate} />\n                <DRow label=\"End\" value={`${sub.endDate} · ${daysLeft}d left`} />\n                <DRow label=\"Package fee\" value={gbp(sub.packageFee)} />\n                <DRow label=\"Access fee\" value={gbp(sub.platformAccessFee)} />\n                <DRow label=\"Total annual\" value={gbp(sub.packageFee + sub.platformAccessFee)} />\n              </dl>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </AdminShell>\n  );\n}"
+    },
+    {
+      "id": "Metric",
+      "line": 180,
+      "code": "function Metric({ label, value }: { label: string; value: string }) {\n  return (\n    <div>\n      <div className=\"text-[10px] font-semibold uppercase tracking-wide mb-1\" style={{ color: \"var(--color-text-muted)\" }}>{label}</div>\n      <div className=\"text-2xl font-semibold tabular-nums\" style={{ letterSpacing: \"-0.02em\" }}>{value}</div>\n    </div>\n  );\n}"
+    },
+    {
+      "id": "DRow",
+      "line": 189,
+      "code": "function DRow({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex items-start justify-between gap-3\">\n      <dt className=\"shrink-0\" style={{ color: \"var(--color-text-muted)\" }}>{label}</dt>\n      <dd className=\"text-right\" style={{ color: \"var(--color-text-primary)\" }}>{value}</dd>\n    </div>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { use } from \"react\";\nimport { ArrowLeft, ArrowRight, Coins, Calendar as CalendarIcon, Mail, Building2, Plus, RefreshCcw } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from \"@/components/ui/card\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"@/components/ui/table\";\nimport { AdminShell } from \"@/components/admin/admin-shell\";\nimport { UsageSparkline } from \"@/components/portal/usage-sparkline\";\nimport { SUBSCRIPTIONS, ALLOCATIONS_BY_SUB, CONSUMPTION_HISTORY } from \"@/lib/credits-mock\";\nimport { TIERS, creditsRemaining, utilization, gbp, daysFrom } from \"@/lib/credits\";\n\nexport default function SubscriptionDetailPage({ params }: { params: Promise<{ id: string }> }) {\n  const { id } = use(params);\n  const sub = SUBSCRIPTIONS.find((s) => s.id === id);\n\n  if (!sub) {\n    return (\n      <AdminShell>\n        <div className=\"text-center py-20\">\n          <p className=\"text-[14px] mb-4\" style={{ color: \"var(--color-text-secondary)\" }}>Subscription not found.</p>\n          <Link href=\"/admin/subscriptions\"><Button variant=\"outline\">← Back to subscriptions</Button></Link>\n        </div>\n      </AdminShell>\n    );\n  }\n\n  const tier = TIERS[sub.tier];\n  const remaining = creditsRemaining(sub);\n  const util = utilization(sub);\n  const daysLeft = daysFrom(sub.endDate);\n  const allocations = ALLOCATIONS_BY_SUB[sub.id] ?? [];\n\n  return (\n    <AdminShell>\n      <Link href=\"/admin/subscriptions\" className=\"inline-flex items-center gap-1.5 text-[12px] mb-4 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-secondary)\" }}>\n        <ArrowLeft size={13} /> Back to subscriptions\n      </Link>\n\n      <div className=\"flex items-start justify-between gap-4 mb-6\">\n        <div className=\"flex items-start gap-4\">\n          <div className=\"w-12 h-12 rounded-xl flex items-center justify-center text-[14px] font-bold shrink-0\" style={{ background: \"var(--teal-500)\", color: \"var(--gray-950)\" }}>\n            {sub.sponsorName.split(\" \").slice(0, 2).map((s) => s[0]).join(\"\")}\n          </div>\n          <div>\n            <h1 className=\"text-[1.5rem] font-semibold tracking-tight\" style={{ letterSpacing: \"-0.025em\" }}>{sub.sponsorName}</h1>\n            <div className=\"flex items-center gap-2 mt-1\">\n              <Badge variant=\"outline\" className=\"capitalize\">{tier.name}</Badge>\n              <Badge variant=\"outline\" className=\"capitalize\">{sub.status.replace(\"_\", \" \")}</Badge>\n              <span className=\"text-[12px]\" style={{ color: \"var(--color-text-muted)\" }}>· Sub {sub.id}</span>\n            </div>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\"><RefreshCcw size={13} /> Renew / Upgrade</Button>\n          <Button variant=\"brand\" render={<Link href={`/admin/subscriptions/${sub.id}/allocate`} />}>\n            <Plus size={13} /> Allocate credits\n          </Button>\n        </div>\n      </div>\n\n      {/* 2-column layout */}\n      <div className=\"grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6\">\n        <div className=\"space-y-6\">\n          {/* Summary card */}\n          <Card>\n            <CardHeader>\n              <div className=\"flex items-center justify-between\">\n                <CardTitle className=\"text-base\">Credit pool</CardTitle>\n                <span className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>\n                  {sub.creditsConsumed} of {sub.totalCredits} consumed\n                </span>\n              </div>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4 mb-5\">\n                <Metric label=\"Purchased\"   value={sub.totalCredits.toString()} />\n                <Metric label=\"Allocated\"   value={sub.creditsAllocated.toString()} />\n                <Metric label=\"Escrowed\"    value={sub.creditsEscrowed.toString()} />\n                <Metric label=\"Consumed\"    value={sub.creditsConsumed.toString()} />\n              </div>\n              <div className=\"h-2 rounded-full overflow-hidden flex\" style={{ background: \"var(--color-border-default)\" }}>\n                <div className=\"h-full\" style={{ width: `${(sub.creditsConsumed / sub.totalCredits) * 100}%`, background: \"var(--teal-500)\" }} />\n                <div className=\"h-full\" style={{ width: `${(sub.creditsEscrowed / sub.totalCredits) * 100}%`, background: \"var(--teal-300)\" }} />\n                <div className=\"h-full\" style={{ width: `${((sub.creditsAllocated - sub.creditsConsumed - sub.creditsEscrowed) / sub.totalCredits) * 100}%`, background: \"color-mix(in srgb, var(--teal-500) 25%, transparent)\" }} />\n              </div>\n            </CardContent>\n          </Card>\n\n          {/* Trend */}\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-base\">Consumption trend</CardTitle>\n              <CardDescription>Cumulative credits consumed.</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <UsageSparkline data={CONSUMPTION_HISTORY[sub.id] ?? []} max={sub.totalCredits} />\n            </CardContent>\n          </Card>\n\n          {/* Allocations */}\n          <Card className=\"p-0\">\n            <CardHeader className=\"px-4 py-4\">\n              <div className=\"flex items-center justify-between\">\n                <div>\n                  <CardTitle className=\"text-base\">Trainee allocations</CardTitle>\n                  <CardDescription>{allocations.length} sponsored trainees</CardDescription>\n                </div>\n                <Button variant=\"outline\" size=\"sm\" render={<Link href={`/admin/subscriptions/${sub.id}/allocate`} />}>\n                  <Plus size={11} /> Allocate\n                </Button>\n              </div>\n            </CardHeader>\n            <Table>\n              <TableHeader style={{ background: \"var(--color-bg-subtle)\" }}>\n                <TableRow>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-4\" style={{ color: \"var(--color-text-muted)\" }}>Trainee</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-4 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Allocated</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-4 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Consumed</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-4 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Remaining</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {allocations.map((a) => (\n                  <TableRow key={a.traineeId}>\n                    <TableCell className=\"px-4 py-2.5 text-[12px] font-medium\">{a.traineeName}</TableCell>\n                    <TableCell className=\"px-4 py-2.5 text-right text-[12px] tabular-nums\">{a.allocated}</TableCell>\n                    <TableCell className=\"px-4 py-2.5 text-right text-[12px] tabular-nums\" style={{ color: \"var(--color-text-secondary)\" }}>{a.consumed}</TableCell>\n                    <TableCell className=\"px-4 py-2.5 text-right text-[12px] tabular-nums font-medium\" style={{ color: a.remaining === 0 ? \"var(--color-status-error-text)\" : \"var(--color-text-primary)\" }}>\n                      {a.remaining}\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </Card>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-[13px] flex items-center gap-2\">\n                <Building2 size={13} /> Sponsor\n              </CardTitle>\n            </CardHeader>\n            <CardContent>\n              <dl className=\"space-y-2.5 text-[12px]\">\n                <DRow label=\"Primary contact\" value={sub.primaryContactName} />\n                <DRow label=\"Email\" value={sub.primaryContactEmail} />\n              </dl>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-[13px] flex items-center gap-2\">\n                <CalendarIcon size={13} /> Subscription\n              </CardTitle>\n            </CardHeader>\n            <CardContent>\n              <dl className=\"space-y-2.5 text-[12px]\">\n                <DRow label=\"Start\" value={sub.startDate} />\n                <DRow label=\"End\" value={`${sub.endDate} · ${daysLeft}d left`} />\n                <DRow label=\"Package fee\" value={gbp(sub.packageFee)} />\n                <DRow label=\"Access fee\" value={gbp(sub.platformAccessFee)} />\n                <DRow label=\"Total annual\" value={gbp(sub.packageFee + sub.platformAccessFee)} />\n              </dl>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </AdminShell>\n  );\n}\n\nfunction Metric({ label, value }: { label: string; value: string }) {\n  return (\n    <div>\n      <div className=\"text-[10px] font-semibold uppercase tracking-wide mb-1\" style={{ color: \"var(--color-text-muted)\" }}>{label}</div>\n      <div className=\"text-2xl font-semibold tabular-nums\" style={{ letterSpacing: \"-0.02em\" }}>{value}</div>\n    </div>\n  );\n}\n\nfunction DRow({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex items-start justify-between gap-3\">\n      <dt className=\"shrink-0\" style={{ color: \"var(--color-text-muted)\" }}>{label}</dt>\n      <dd className=\"text-right\" style={{ color: \"var(--color-text-primary)\" }}>{value}</dd>\n    </div>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/admin-subscriptions-new.json

@@ -0,0 +1,43 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/admin/subscriptions/new/page.tsx",
+  "sha256": "90f7ac72bdbfbb4c14d1b2e584c706021fed70af4434ee24b2a13d81e8cba7d7",
+  "imports": [
+    "next/link",
+    "react",
+    "lucide-react",
+    "@/components/ui/button",
+    "@/components/ui/input",
+    "@/components/ui/card",
+    "@/components/ui/separator",
+    "@/components/admin/admin-shell",
+    "@/components/auth/auth-primitives",
+    "@/components/auth/onboarding-primitives",
+    "@/lib/credits"
+  ],
+  "tokens": [
+    "--color-bg-brand-muted",
+    "--color-border-brand",
+    "--color-border-default",
+    "--color-status-success-bg",
+    "--color-status-success-text",
+    "--color-text-brand",
+    "--color-text-muted",
+    "--color-text-primary",
+    "--color-text-secondary",
+    "--teal-500"
+  ],
+  "fragments": [
+    {
+      "id": "NewSubscriptionPage",
+      "line": 15,
+      "code": "export default function NewSubscriptionPage() {\n  const [sponsorName, setSponsorName] = useState(\"\");\n  const [contactName, setContactName] = useState(\"\");\n  const [contactEmail, setContactEmail] = useState(\"\");\n  const [tier, setTier] = useState<Tier>(\"growth\");\n  const [credits, setCredits] = useState<number>(20);\n  const [accessFee, setAccessFee] = useState<number>(15_000);\n  const [startDate, setStartDate] = useState<string>(new Date().toISOString().slice(0, 10));\n  const [saving, setSaving] = useState(false);\n  const [done, setDone] = useState(false);\n\n  // Auto-populate when tier changes\n  const onTier = (next: Tier) => {\n    setTier(next);\n    const cfg = TIERS[next];\n    setCredits(typeof cfg.sessions === \"number\" ? cfg.sessions : 500);\n    setAccessFee(cfg.platformAccessFee);\n  };\n\n  const cfg = TIERS[tier];\n  const totalFee = cfg.packageFee + accessFee;\n\n  // End date = start + 12 months\n  const endDate = useMemo(() => {\n    const d = new Date(startDate);\n    d.setFullYear(d.getFullYear() + 1);\n    return d.toISOString().slice(0, 10);\n  }, [startDate]);\n\n  const canSubmit = sponsorName && contactName && /.+@.+\\..+/.test(contactEmail) && startDate;\n\n  if (done) {\n    return (\n      <AdminShell>\n        <div className=\"max-w-md mx-auto text-center py-16\">\n          <div className=\"w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-5\" style={{ background: \"var(--color-status-success-bg)\", color: \"var(--color-status-success-text)\" }}>\n            <CheckCircle2 size={32} strokeWidth={1.6} />\n          </div>\n          <h1 className=\"text-[1.5rem] font-semibold mb-2\" style={{ letterSpacing: \"-0.025em\" }}>\n            Subscription created\n          </h1>\n          <p className=\"text-sm mb-6\" style={{ color: \"var(--color-text-secondary)\" }}>\n            A welcome email has been sent to <strong style={{ color: \"var(--color-text-primary)\" }}>{contactEmail}</strong>.\n          </p>\n          <div className=\"flex items-center gap-2 justify-center\">\n            <Link href=\"/admin/subscriptions\"><Button variant=\"outline\">All subscriptions</Button></Link>\n            <Link href=\"/admin/subscriptions/sub-001/allocate\"><Button variant=\"brand\">Allocate credits <ArrowRight size={13} /></Button></Link>\n          </div>\n        </div>\n      </AdminShell>\n    );\n  }\n\n  return (\n    <AdminShell>\n      <Link href=\"/admin/subscriptions\" className=\"inline-flex items-center gap-1.5 text-[12px] mb-4 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-secondary)\" }}>\n        <ArrowLeft size={13} /> Back\n      </Link>\n\n      <div className=\"mb-6\">\n        <h1 className=\"text-[1.75rem] font-semibold tracking-tight mb-1\" style={{ letterSpacing: \"-0.025em\" }}>\n          New subscription\n        </h1>\n        <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n          Create a new Industry Partner subscription. Welcome email is sent on creation.\n        </p>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6\">\n        {/* Form */}\n        <form onSubmit={(e) => { e.preventDefault(); setSaving(true); setTimeout(() => setDone(true), 800); }} className=\"space-y-5\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-base\">Sponsor details</CardTitle>\n              <CardDescription>Industry partner organisation and primary contact.</CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <Field label=\"Sponsor organisation name\" htmlFor=\"sn\">\n                <Input id=\"sn\" value={sponsorName} onChange={(e) => setSponsorName(e.target.value)} placeholder=\"Olympus Medical UK\" className=\"h-10\" />\n              </Field>\n              <div className=\"grid grid-cols-2 gap-3\">\n                <Field label=\"Contact name\" htmlFor=\"cn\">\n                  <Input id=\"cn\" value={contactName} onChange={(e) => setContactName(e.target.value)} placeholder=\"Helen Chen\" className=\"h-10\" />\n                </Field>\n                <Field label=\"Contact email\" htmlFor=\"ce\">\n                  <Input id=\"ce\" type=\"email\" value={contactEmail} onChange={(e) => setContactEmail(e.target.value)} placeholder=\"h.chen@olympus.co.uk\" className=\"h-10\" />\n                </Field>\n              </div>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-base\">Subscription package</CardTitle>\n              <CardDescription>Choose a tier — credits, per-session price, and fee auto-fill.</CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <Field label=\"Tier\" htmlFor=\"tier\">\n                <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-2\">\n                  {(Object.keys(TIERS) as Tier[]).map((t) => {\n                    const c = TIERS[t];\n                    const active = tier === t;\n                    return (\n                      <button\n                        key={t}\n                        type=\"button\"\n                        onClick={() => onTier(t)}\n                        className=\"text-left p-3 rounded-lg border transition-all focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-[var(--teal-500)]/30\"\n                        style={{\n                          borderColor: active ? \"var(--color-border-brand)\" : \"var(--color-border-default)\",\n                          background: active ? \"var(--color-bg-brand-muted)\" : \"transparent\",\n                        }}\n                      >\n                        <div className=\"text-[13px] font-semibold\" style={{ color: active ? \"var(--color-text-brand)\" : \"var(--color-text-primary)\" }}>{c.name}</div>\n                        <div className=\"text-[11px] mt-0.5\" style={{ color: \"var(--color-text-muted)\" }}>\n                          {c.sessions === \"unlimited\" ? \"Unlimited\" : `${c.sessions} credits`}\n                        </div>\n                        <div className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>\n                          {gbp(c.perSessionPrice)}/session\n                        </div>\n                      </button>\n                    );\n                  })}\n                </div>\n              </Field>\n\n              <div className=\"grid grid-cols-2 gap-3\">\n                <Field label=\"Total credits\" htmlFor=\"tc\" hint={tier === \"enterprise\" ? \"Soft cap — credits tracked but not enforced.\" : \"Auto-set by tier.\"}>\n                  <Input id=\"tc\" type=\"number\" value={credits} onChange={(e) => setCredits(parseInt(e.target.value) || 0)} className=\"h-10 tabular-nums\" />\n                </Field>\n                <Field label=\"Platform access fee (£)\" htmlFor=\"af\" hint={tier === \"enterprise\" ? \"Custom for Enterprise.\" : \"Default £15k.\"}>\n                  <Input id=\"af\" type=\"number\" value={accessFee} onChange={(e) => setAccessFee(parseInt(e.target.value) || 0)} className=\"h-10 tabular-nums\" />\n                </Field>\n              </div>\n\n              <Field label=\"Subscription start date\" htmlFor=\"sd\" hint={`End: ${endDate} (12 months)`}>\n                <Input id=\"sd\" type=\"date\" value={startDate} onChange={(e) => setStartDate(e.target.value)} className=\"h-10\" />\n              </Field>\n            </CardContent>\n          </Card>\n\n          <div className=\"flex items-center justify-end gap-2\">\n            <Link href=\"/admin/subscriptions\"><Button type=\"button\" variant=\"outline\">Cancel</Button></Link>\n            <Button type=\"submit\" variant=\"brand\" disabled={!canSubmit || saving}>\n              {saving ? <><Spinner className=\"w-3.5 h-3.5 mr-1\" /> Creating…</> : <>Create subscription <ArrowRight size={13} /></>}\n            </Button>\n          </div>\n        </form>\n\n        {/* Invoice preview */}\n        <Card className=\"h-fit sticky top-20\">\n          <CardHeader>\n            <CardTitle className=\"text-[13px]\">Invoice preview</CardTitle>\n            <CardDescription>Auto-generated from tier selection.</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <dl className=\"space-y-2.5 text-[12px]\">\n              <DRow label=\"Tier\" value={cfg.name} />\n              <DRow label=\"Credits\" value={typeof cfg.sessions === \"number\" ? `${credits}` : \"Unlimited\"} />\n              <DRow label=\"Per session\" value={gbp(cfg.perSessionPrice)} />\n            </dl>\n            <Separator className=\"my-3\" />\n            <dl className=\"space-y-2.5 text-[12px]\">\n              <DRow label=\"Package fee\" value={gbp(cfg.packageFee)} />\n              <DRow label=\"Platform access fee\" value={gbp(accessFee)} />\n            </dl>\n            <Separator className=\"my-3\" />\n            <dl className=\"space-y-2.5 text-[13px]\">\n              <DRow label=\"Total billed (annual)\" value={gbp(cfg.packageFee + accessFee)} bold />\n            </dl>\n          </CardContent>\n        </Card>\n      </div>\n    </AdminShell>\n  );\n}"
+    },
+    {
+      "id": "DRow",
+      "line": 192,
+      "code": "function DRow({ label, value, bold }: { label: string; value: string; bold?: boolean }) {\n  return (\n    <div className=\"flex items-center justify-between\" style={{ fontWeight: bold ? 600 : 400 }}>\n      <dt style={{ color: \"var(--color-text-muted)\" }}>{label}</dt>\n      <dd style={{ color: \"var(--color-text-primary)\" }}>{value}</dd>\n    </div>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { useState, useMemo } from \"react\";\nimport { ArrowLeft, ArrowRight, CheckCircle2 } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from \"@/components/ui/card\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { AdminShell } from \"@/components/admin/admin-shell\";\nimport { Field, Spinner } from \"@/components/auth/auth-primitives\";\nimport { Select } from \"@/components/auth/onboarding-primitives\";\nimport { TIERS, gbp, type Tier } from \"@/lib/credits\";\n\nexport default function NewSubscriptionPage() {\n  const [sponsorName, setSponsorName] = useState(\"\");\n  const [contactName, setContactName] = useState(\"\");\n  const [contactEmail, setContactEmail] = useState(\"\");\n  const [tier, setTier] = useState<Tier>(\"growth\");\n  const [credits, setCredits] = useState<number>(20);\n  const [accessFee, setAccessFee] = useState<number>(15_000);\n  const [startDate, setStartDate] = useState<string>(new Date().toISOString().slice(0, 10));\n  const [saving, setSaving] = useState(false);\n  const [done, setDone] = useState(false);\n\n  // Auto-populate when tier changes\n  const onTier = (next: Tier) => {\n    setTier(next);\n    const cfg = TIERS[next];\n    setCredits(typeof cfg.sessions === \"number\" ? cfg.sessions : 500);\n    setAccessFee(cfg.platformAccessFee);\n  };\n\n  const cfg = TIERS[tier];\n  const totalFee = cfg.packageFee + accessFee;\n\n  // End date = start + 12 months\n  const endDate = useMemo(() => {\n    const d = new Date(startDate);\n    d.setFullYear(d.getFullYear() + 1);\n    return d.toISOString().slice(0, 10);\n  }, [startDate]);\n\n  const canSubmit = sponsorName && contactName && /.+@.+\\..+/.test(contactEmail) && startDate;\n\n  if (done) {\n    return (\n      <AdminShell>\n        <div className=\"max-w-md mx-auto text-center py-16\">\n          <div className=\"w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-5\" style={{ background: \"var(--color-status-success-bg)\", color: \"var(--color-status-success-text)\" }}>\n            <CheckCircle2 size={32} strokeWidth={1.6} />\n          </div>\n          <h1 className=\"text-[1.5rem] font-semibold mb-2\" style={{ letterSpacing: \"-0.025em\" }}>\n            Subscription created\n          </h1>\n          <p className=\"text-sm mb-6\" style={{ color: \"var(--color-text-secondary)\" }}>\n            A welcome email has been sent to <strong style={{ color: \"var(--color-text-primary)\" }}>{contactEmail}</strong>.\n          </p>\n          <div className=\"flex items-center gap-2 justify-center\">\n            <Link href=\"/admin/subscriptions\"><Button variant=\"outline\">All subscriptions</Button></Link>\n            <Link href=\"/admin/subscriptions/sub-001/allocate\"><Button variant=\"brand\">Allocate credits <ArrowRight size={13} /></Button></Link>\n          </div>\n        </div>\n      </AdminShell>\n    );\n  }\n\n  return (\n    <AdminShell>\n      <Link href=\"/admin/subscriptions\" className=\"inline-flex items-center gap-1.5 text-[12px] mb-4 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-secondary)\" }}>\n        <ArrowLeft size={13} /> Back\n      </Link>\n\n      <div className=\"mb-6\">\n        <h1 className=\"text-[1.75rem] font-semibold tracking-tight mb-1\" style={{ letterSpacing: \"-0.025em\" }}>\n          New subscription\n        </h1>\n        <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n          Create a new Industry Partner subscription. Welcome email is sent on creation.\n        </p>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6\">\n        {/* Form */}\n        <form onSubmit={(e) => { e.preventDefault(); setSaving(true); setTimeout(() => setDone(true), 800); }} className=\"space-y-5\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-base\">Sponsor details</CardTitle>\n              <CardDescription>Industry partner organisation and primary contact.</CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <Field label=\"Sponsor organisation name\" htmlFor=\"sn\">\n                <Input id=\"sn\" value={sponsorName} onChange={(e) => setSponsorName(e.target.value)} placeholder=\"Olympus Medical UK\" className=\"h-10\" />\n              </Field>\n              <div className=\"grid grid-cols-2 gap-3\">\n                <Field label=\"Contact name\" htmlFor=\"cn\">\n                  <Input id=\"cn\" value={contactName} onChange={(e) => setContactName(e.target.value)} placeholder=\"Helen Chen\" className=\"h-10\" />\n                </Field>\n                <Field label=\"Contact email\" htmlFor=\"ce\">\n                  <Input id=\"ce\" type=\"email\" value={contactEmail} onChange={(e) => setContactEmail(e.target.value)} placeholder=\"h.chen@olympus.co.uk\" className=\"h-10\" />\n                </Field>\n              </div>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-base\">Subscription package</CardTitle>\n              <CardDescription>Choose a tier — credits, per-session price, and fee auto-fill.</CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <Field label=\"Tier\" htmlFor=\"tier\">\n                <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-2\">\n                  {(Object.keys(TIERS) as Tier[]).map((t) => {\n                    const c = TIERS[t];\n                    const active = tier === t;\n                    return (\n                      <button\n                        key={t}\n                        type=\"button\"\n                        onClick={() => onTier(t)}\n                        className=\"text-left p-3 rounded-lg border transition-all focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-[var(--teal-500)]/30\"\n                        style={{\n                          borderColor: active ? \"var(--color-border-brand)\" : \"var(--color-border-default)\",\n                          background: active ? \"var(--color-bg-brand-muted)\" : \"transparent\",\n                        }}\n                      >\n                        <div className=\"text-[13px] font-semibold\" style={{ color: active ? \"var(--color-text-brand)\" : \"var(--color-text-primary)\" }}>{c.name}</div>\n                        <div className=\"text-[11px] mt-0.5\" style={{ color: \"var(--color-text-muted)\" }}>\n                          {c.sessions === \"unlimited\" ? \"Unlimited\" : `${c.sessions} credits`}\n                        </div>\n                        <div className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>\n                          {gbp(c.perSessionPrice)}/session\n                        </div>\n                      </button>\n                    );\n                  })}\n                </div>\n              </Field>\n\n              <div className=\"grid grid-cols-2 gap-3\">\n                <Field label=\"Total credits\" htmlFor=\"tc\" hint={tier === \"enterprise\" ? \"Soft cap — credits tracked but not enforced.\" : \"Auto-set by tier.\"}>\n                  <Input id=\"tc\" type=\"number\" value={credits} onChange={(e) => setCredits(parseInt(e.target.value) || 0)} className=\"h-10 tabular-nums\" />\n                </Field>\n                <Field label=\"Platform access fee (£)\" htmlFor=\"af\" hint={tier === \"enterprise\" ? \"Custom for Enterprise.\" : \"Default £15k.\"}>\n                  <Input id=\"af\" type=\"number\" value={accessFee} onChange={(e) => setAccessFee(parseInt(e.target.value) || 0)} className=\"h-10 tabular-nums\" />\n                </Field>\n              </div>\n\n              <Field label=\"Subscription start date\" htmlFor=\"sd\" hint={`End: ${endDate} (12 months)`}>\n                <Input id=\"sd\" type=\"date\" value={startDate} onChange={(e) => setStartDate(e.target.value)} className=\"h-10\" />\n              </Field>\n            </CardContent>\n          </Card>\n\n          <div className=\"flex items-center justify-end gap-2\">\n            <Link href=\"/admin/subscriptions\"><Button type=\"button\" variant=\"outline\">Cancel</Button></Link>\n            <Button type=\"submit\" variant=\"brand\" disabled={!canSubmit || saving}>\n              {saving ? <><Spinner className=\"w-3.5 h-3.5 mr-1\" /> Creating…</> : <>Create subscription <ArrowRight size={13} /></>}\n            </Button>\n          </div>\n        </form>\n\n        {/* Invoice preview */}\n        <Card className=\"h-fit sticky top-20\">\n          <CardHeader>\n            <CardTitle className=\"text-[13px]\">Invoice preview</CardTitle>\n            <CardDescription>Auto-generated from tier selection.</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <dl className=\"space-y-2.5 text-[12px]\">\n              <DRow label=\"Tier\" value={cfg.name} />\n              <DRow label=\"Credits\" value={typeof cfg.sessions === \"number\" ? `${credits}` : \"Unlimited\"} />\n              <DRow label=\"Per session\" value={gbp(cfg.perSessionPrice)} />\n            </dl>\n            <Separator className=\"my-3\" />\n            <dl className=\"space-y-2.5 text-[12px]\">\n              <DRow label=\"Package fee\" value={gbp(cfg.packageFee)} />\n              <DRow label=\"Platform access fee\" value={gbp(accessFee)} />\n            </dl>\n            <Separator className=\"my-3\" />\n            <dl className=\"space-y-2.5 text-[13px]\">\n              <DRow label=\"Total billed (annual)\" value={gbp(cfg.packageFee + accessFee)} bold />\n            </dl>\n          </CardContent>\n        </Card>\n      </div>\n    </AdminShell>\n  );\n}\n\nfunction DRow({ label, value, bold }: { label: string; value: string; bold?: boolean }) {\n  return (\n    <div className=\"flex items-center justify-between\" style={{ fontWeight: bold ? 600 : 400 }}>\n      <dt style={{ color: \"var(--color-text-muted)\" }}>{label}</dt>\n      <dd style={{ color: \"var(--color-text-primary)\" }}>{value}</dd>\n    </div>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/admin-subscriptions.json

@@ -0,0 +1,41 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/admin/subscriptions/page.tsx",
+  "sha256": "a9fab9d012c7b2352f6a05342b706fdc1e5d014a1e9966b6bc78cb81b9129bff",
+  "imports": [
+    "next/link",
+    "react",
+    "lucide-react",
+    "@/components/ui/input",
+    "@/components/ui/button",
+    "@/components/ui/badge",
+    "@/components/ui/card",
+    "@/components/ui/table",
+    "@/components/admin/admin-shell",
+    "@/lib/credits-mock",
+    "@/lib/credits"
+  ],
+  "tokens": [
+    "--color-bg-subtle",
+    "--color-border-default",
+    "--color-status-error-text",
+    "--color-status-warning-text",
+    "--color-text-muted",
+    "--color-text-primary",
+    "--color-text-secondary",
+    "--teal-500"
+  ],
+  "fragments": [
+    {
+      "id": "SubscriptionsListPage",
+      "line": 15,
+      "code": "export default function SubscriptionsListPage() {\n  const [q, setQ] = useState(\"\");\n\n  const filtered = useMemo(() =>\n    SUBSCRIPTIONS.filter((s) =>\n      !q ||\n      s.sponsorName.toLowerCase().includes(q.toLowerCase()) ||\n      s.primaryContactName.toLowerCase().includes(q.toLowerCase())\n    ),\n    [q]\n  );\n\n  const totals = useMemo(() => {\n    const totalCredits = SUBSCRIPTIONS.reduce((a, s) => a + s.totalCredits, 0);\n    const consumed = SUBSCRIPTIONS.reduce((a, s) => a + s.creditsConsumed, 0);\n    const annual = SUBSCRIPTIONS.reduce((a, s) => a + s.packageFee + s.platformAccessFee, 0);\n    return { totalCredits, consumed, annual };\n  }, []);\n\n  return (\n    <AdminShell>\n      <div className=\"flex items-start justify-between gap-4 mb-6\">\n        <div>\n          <h1 className=\"text-[1.75rem] font-semibold tracking-tight mb-1\" style={{ letterSpacing: \"-0.025em\" }}>\n            Subscriptions\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            Industry partner subscriptions, credit pools, and allocations.\n          </p>\n        </div>\n        <Button variant=\"brand\" render={<Link href=\"/admin/subscriptions/new\" />}>\n          <Plus size={13} /> New subscription\n        </Button>\n      </div>\n\n      {/* Metric cards */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3 mb-6\">\n        <MetricCard label=\"Active subscriptions\" value={SUBSCRIPTIONS.length.toString()} />\n        <MetricCard label=\"Credits in market\" value={totals.totalCredits.toLocaleString()} sub={`${totals.consumed} consumed`} />\n        <MetricCard label=\"Annual revenue (booked)\" value={gbp(totals.annual)} />\n      </div>\n\n      {/* Search */}\n      <div className=\"relative mb-4 max-w-md\">\n        <Search size={14} className=\"absolute left-3 top-1/2 -translate-y-1/2\" style={{ color: \"var(--color-text-muted)\" }} />\n        <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder=\"Search sponsors, contacts…\" className=\"h-9 pl-9\" />\n        {q && (\n          <button onClick={() => setQ(\"\")} className=\"absolute right-3 top-1/2 -translate-y-1/2 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-muted)\" }}>\n            <X size={13} />\n          </button>\n        )}\n      </div>\n\n      <Card className=\"p-0\">\n        <Table>\n          <TableHeader style={{ background: \"var(--color-bg-subtle)\" }}>\n            <TableRow>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Sponsor</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Tier</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Credits</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Utilisation</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Expires</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Action</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {filtered.map((sub) => {\n              const util = utilization(sub);\n              const daysLeft = daysFrom(sub.endDate);\n              const remaining = creditsRemaining(sub);\n              const lowCredits = remaining / sub.totalCredits <= 0.1;\n              return (\n                <TableRow key={sub.id}>\n                  <TableCell className=\"px-5 py-3\">\n                    <div>\n                      <div className=\"font-medium text-[13px]\">{sub.sponsorName}</div>\n                      <div className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>{sub.primaryContactName}</div>\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3\">\n                    <Badge variant=\"outline\" className=\"capitalize\">{TIERS[sub.tier].name}</Badge>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px] tabular-nums\">\n                    <div style={{ color: \"var(--color-text-primary)\" }}>\n                      {sub.creditsConsumed} <span style={{ color: \"var(--color-text-muted)\" }}>/ {sub.totalCredits}</span>\n                    </div>\n                    <div className=\"text-[10px]\" style={{ color: lowCredits ? \"var(--color-status-error-text)\" : \"var(--color-text-muted)\" }}>\n                      {remaining} remaining\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3 w-40\">\n                    <div className=\"flex items-center gap-2\">\n                      <div className=\"flex-1 h-1.5 rounded-full overflow-hidden\" style={{ background: \"var(--color-border-default)\" }}>\n                        <div className=\"h-full\" style={{ width: `${util}%`, background: \"var(--teal-500)\" }} />\n                      </div>\n                      <span className=\"text-[11px] tabular-nums w-9 text-right\" style={{ color: \"var(--color-text-muted)\" }}>{util}%</span>\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px]\">\n                    <div style={{ color: \"var(--color-text-primary)\" }}>{sub.endDate}</div>\n                    <div className=\"text-[11px]\" style={{ color: daysLeft < 60 ? \"var(--color-status-warning-text)\" : \"var(--color-text-muted)\" }}>\n                      {daysLeft}d left\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3 text-right\">\n                    <Link href={`/admin/subscriptions/${sub.id}`}>\n                      <Button variant=\"outline\" size=\"sm\">Open <ArrowRight size={11} /></Button>\n                    </Link>\n                  </TableCell>\n                </TableRow>\n              );\n            })}\n          </TableBody>\n        </Table>\n      </Card>\n    </AdminShell>\n  );\n}"
+    },
+    {
+      "id": "MetricCard",
+      "line": 134,
+      "code": "function MetricCard({ label, value, sub }: { label: string; value: string; sub?: string }) {\n  return (\n    <div className=\"rounded-xl border p-4\" style={{ borderColor: \"var(--color-border-default)\" }}>\n      <div className=\"text-[11px] font-medium uppercase tracking-wide mb-1\" style={{ color: \"var(--color-text-muted)\" }}>{label}</div>\n      <div className=\"text-2xl font-semibold tabular-nums\" style={{ letterSpacing: \"-0.02em\" }}>{value}</div>\n      {sub && <div className=\"text-[11px] mt-0.5\" style={{ color: \"var(--color-text-muted)\" }}>{sub}</div>}\n    </div>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { useState, useMemo } from \"react\";\nimport { Search, X, Plus, ArrowRight, Wallet, AlertCircle } from \"lucide-react\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card } from \"@/components/ui/card\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"@/components/ui/table\";\nimport { AdminShell } from \"@/components/admin/admin-shell\";\nimport { SUBSCRIPTIONS } from \"@/lib/credits-mock\";\nimport { TIERS, creditsRemaining, utilization, gbp, daysFrom } from \"@/lib/credits\";\n\nexport default function SubscriptionsListPage() {\n  const [q, setQ] = useState(\"\");\n\n  const filtered = useMemo(() =>\n    SUBSCRIPTIONS.filter((s) =>\n      !q ||\n      s.sponsorName.toLowerCase().includes(q.toLowerCase()) ||\n      s.primaryContactName.toLowerCase().includes(q.toLowerCase())\n    ),\n    [q]\n  );\n\n  const totals = useMemo(() => {\n    const totalCredits = SUBSCRIPTIONS.reduce((a, s) => a + s.totalCredits, 0);\n    const consumed = SUBSCRIPTIONS.reduce((a, s) => a + s.creditsConsumed, 0);\n    const annual = SUBSCRIPTIONS.reduce((a, s) => a + s.packageFee + s.platformAccessFee, 0);\n    return { totalCredits, consumed, annual };\n  }, []);\n\n  return (\n    <AdminShell>\n      <div className=\"flex items-start justify-between gap-4 mb-6\">\n        <div>\n          <h1 className=\"text-[1.75rem] font-semibold tracking-tight mb-1\" style={{ letterSpacing: \"-0.025em\" }}>\n            Subscriptions\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            Industry partner subscriptions, credit pools, and allocations.\n          </p>\n        </div>\n        <Button variant=\"brand\" render={<Link href=\"/admin/subscriptions/new\" />}>\n          <Plus size={13} /> New subscription\n        </Button>\n      </div>\n\n      {/* Metric cards */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3 mb-6\">\n        <MetricCard label=\"Active subscriptions\" value={SUBSCRIPTIONS.length.toString()} />\n        <MetricCard label=\"Credits in market\" value={totals.totalCredits.toLocaleString()} sub={`${totals.consumed} consumed`} />\n        <MetricCard label=\"Annual revenue (booked)\" value={gbp(totals.annual)} />\n      </div>\n\n      {/* Search */}\n      <div className=\"relative mb-4 max-w-md\">\n        <Search size={14} className=\"absolute left-3 top-1/2 -translate-y-1/2\" style={{ color: \"var(--color-text-muted)\" }} />\n        <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder=\"Search sponsors, contacts…\" className=\"h-9 pl-9\" />\n        {q && (\n          <button onClick={() => setQ(\"\")} className=\"absolute right-3 top-1/2 -translate-y-1/2 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-muted)\" }}>\n            <X size={13} />\n          </button>\n        )}\n      </div>\n\n      <Card className=\"p-0\">\n        <Table>\n          <TableHeader style={{ background: \"var(--color-bg-subtle)\" }}>\n            <TableRow>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Sponsor</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Tier</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Credits</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Utilisation</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Expires</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Action</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {filtered.map((sub) => {\n              const util = utilization(sub);\n              const daysLeft = daysFrom(sub.endDate);\n              const remaining = creditsRemaining(sub);\n              const lowCredits = remaining / sub.totalCredits <= 0.1;\n              return (\n                <TableRow key={sub.id}>\n                  <TableCell className=\"px-5 py-3\">\n                    <div>\n                      <div className=\"font-medium text-[13px]\">{sub.sponsorName}</div>\n                      <div className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>{sub.primaryContactName}</div>\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3\">\n                    <Badge variant=\"outline\" className=\"capitalize\">{TIERS[sub.tier].name}</Badge>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px] tabular-nums\">\n                    <div style={{ color: \"var(--color-text-primary)\" }}>\n                      {sub.creditsConsumed} <span style={{ color: \"var(--color-text-muted)\" }}>/ {sub.totalCredits}</span>\n                    </div>\n                    <div className=\"text-[10px]\" style={{ color: lowCredits ? \"var(--color-status-error-text)\" : \"var(--color-text-muted)\" }}>\n                      {remaining} remaining\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3 w-40\">\n                    <div className=\"flex items-center gap-2\">\n                      <div className=\"flex-1 h-1.5 rounded-full overflow-hidden\" style={{ background: \"var(--color-border-default)\" }}>\n                        <div className=\"h-full\" style={{ width: `${util}%`, background: \"var(--teal-500)\" }} />\n                      </div>\n                      <span className=\"text-[11px] tabular-nums w-9 text-right\" style={{ color: \"var(--color-text-muted)\" }}>{util}%</span>\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px]\">\n                    <div style={{ color: \"var(--color-text-primary)\" }}>{sub.endDate}</div>\n                    <div className=\"text-[11px]\" style={{ color: daysLeft < 60 ? \"var(--color-status-warning-text)\" : \"var(--color-text-muted)\" }}>\n                      {daysLeft}d left\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3 text-right\">\n                    <Link href={`/admin/subscriptions/${sub.id}`}>\n                      <Button variant=\"outline\" size=\"sm\">Open <ArrowRight size={11} /></Button>\n                    </Link>\n                  </TableCell>\n                </TableRow>\n              );\n            })}\n          </TableBody>\n        </Table>\n      </Card>\n    </AdminShell>\n  );\n}\n\nfunction MetricCard({ label, value, sub }: { label: string; value: string; sub?: string }) {\n  return (\n    <div className=\"rounded-xl border p-4\" style={{ borderColor: \"var(--color-border-default)\" }}>\n      <div className=\"text-[11px] font-medium uppercase tracking-wide mb-1\" style={{ color: \"var(--color-text-muted)\" }}>{label}</div>\n      <div className=\"text-2xl font-semibold tabular-nums\" style={{ letterSpacing: \"-0.02em\" }}>{value}</div>\n      {sub && <div className=\"text-[11px] mt-0.5\" style={{ color: \"var(--color-text-muted)\" }}>{sub}</div>}\n    </div>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/admin-transactions.json

@@ -0,0 +1,41 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/admin/transactions/page.tsx",
+  "sha256": "4722172d14cb99c9ec7efd4013bd46cf2261ab392c0fd1eb64d4df43dd4e23a9",
+  "imports": [
+    "next/link",
+    "react",
+    "lucide-react",
+    "@/components/ui/input",
+    "@/components/ui/button",
+    "@/components/ui/badge",
+    "@/components/ui/card",
+    "@/components/ui/table",
+    "@/components/admin/admin-shell",
+    "@/lib/credits-mock",
+    "@/lib/credits"
+  ],
+  "tokens": [
+    "--color-bg-subtle",
+    "--color-border-default",
+    "--color-status-error-text",
+    "--color-status-success-text",
+    "--color-text-muted",
+    "--color-text-primary",
+    "--color-text-secondary",
+    "--teal-500"
+  ],
+  "fragments": [
+    {
+      "id": "TransactionsPage",
+      "line": 23,
+      "code": "export default function TransactionsPage() {\n  const [q, setQ] = useState(\"\");\n  const [typeFilter, setTypeFilter] = useState<TxnType | \"all\">(\"all\");\n\n  const filtered = useMemo(() => {\n    let items = [...CREDIT_TRANSACTIONS];\n    if (typeFilter !== \"all\") items = items.filter((t) => t.type === typeFilter);\n    if (q) {\n      const n = q.toLowerCase();\n      items = items.filter((t) =>\n        t.id.toLowerCase().includes(n) ||\n        t.sponsorName?.toLowerCase().includes(n) ||\n        t.traineeName?.toLowerCase().includes(n) ||\n        t.sessionId?.toLowerCase().includes(n) ||\n        t.admin?.toLowerCase().includes(n) ||\n        t.notes?.toLowerCase().includes(n)\n      );\n    }\n    return items.sort((a, b) => b.timestamp.localeCompare(a.timestamp));\n  }, [q, typeFilter]);\n\n  return (\n    <AdminShell>\n      <div className=\"flex items-start justify-between gap-4 mb-6\">\n        <div>\n          <h1 className=\"text-[1.75rem] font-semibold tracking-tight mb-1\" style={{ letterSpacing: \"-0.025em\" }}>\n            Credit transactions\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            Append-only ledger of every credit movement. Retained for audit & reconciliation.\n          </p>\n        </div>\n        <Button variant=\"outline\" size=\"default\">\n          <Download size={13} /> Export CSV\n        </Button>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex items-center gap-2 mb-5\">\n        <div className=\"relative flex-1 max-w-md\">\n          <Search size={14} className=\"absolute left-3 top-1/2 -translate-y-1/2\" style={{ color: \"var(--color-text-muted)\" }} />\n          <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder=\"Search by sponsor, trainee, session ID, notes…\" className=\"h-9 pl-9\" />\n          {q && (\n            <button onClick={() => setQ(\"\")} className=\"absolute right-3 top-1/2 -translate-y-1/2 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-muted)\" }}>\n              <X size={13} />\n            </button>\n          )}\n        </div>\n        <div className=\"relative\">\n          <select\n            value={typeFilter}\n            onChange={(e) => setTypeFilter(e.target.value as TxnType | \"all\")}\n            className=\"h-9 pl-3 pr-8 rounded-lg border text-[12px] bg-transparent outline-none appearance-none cursor-pointer focus-visible:ring-3 focus-visible:ring-[var(--teal-500)]/30\"\n            style={{ borderColor: \"var(--color-border-default)\", color: \"var(--color-text-primary)\" }}\n            aria-label=\"Filter by type\"\n          >\n            {TYPE_OPTIONS.map((o) => <option key={o.value} value={o.value}>Type: {o.label}</option>)}\n          </select>\n          <ChevronDown size={13} strokeWidth={1.8} className=\"absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none\" style={{ color: \"var(--color-text-muted)\" }} />\n        </div>\n      </div>\n\n      {filtered.length === 0 ? (\n        <Card className=\"p-12 text-center\">\n          <FileSearch size={28} strokeWidth={1.4} className=\"mx-auto mb-3\" style={{ color: \"var(--color-text-muted)\" }} />\n          <p className=\"text-[13px]\" style={{ color: \"var(--color-text-secondary)\" }}>\n            No transactions match these filters.\n          </p>\n        </Card>\n      ) : (\n        <Card className=\"p-0\">\n          <Table>\n            <TableHeader style={{ background: \"var(--color-bg-subtle)\" }}>\n              <TableRow>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>When</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Type</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Sponsor</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Trainee</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Credits</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>By</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {filtered.map((t) => <TxnRow key={t.id} t={t} />)}\n            </TableBody>\n          </Table>\n        </Card>\n      )}\n    </AdminShell>\n  );\n}"
+    },
+    {
+      "id": "TxnRow",
+      "line": 115,
+      "code": "function TxnRow({ t }: { t: CreditTxn }) {\n  const positive = t.creditsDelta > 0;\n  const negative = t.creditsDelta < 0;\n  return (\n    <TableRow>\n      <TableCell className=\"px-5 py-3 text-[12px]\">\n        <div style={{ color: \"var(--color-text-primary)\" }}>{new Date(t.timestamp).toLocaleDateString()}</div>\n        <div className=\"text-[10px]\" style={{ color: \"var(--color-text-muted)\" }}>\n          {new Date(t.timestamp).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })}\n        </div>\n      </TableCell>\n      <TableCell className=\"px-5 py-3\">\n        <div className=\"flex items-center gap-2\">\n          <Coins size={13} strokeWidth={1.7} style={{ color: \"var(--color-text-muted)\" }} />\n          <span className=\"text-[12px] font-medium\">{TXN_LABEL[t.type]}</span>\n        </div>\n        {t.notes && <div className=\"text-[10px] mt-0.5 ml-5\" style={{ color: \"var(--color-text-muted)\" }}>{t.notes}</div>}\n        {t.sessionId && <div className=\"text-[10px] mt-0.5 ml-5\"><code style={{ color: \"var(--color-text-secondary)\" }}>{t.sessionId}</code></div>}\n      </TableCell>\n      <TableCell className=\"px-5 py-3 text-[12px]\" style={{ color: \"var(--color-text-secondary)\" }}>{t.sponsorName ?? \"—\"}</TableCell>\n      <TableCell className=\"px-5 py-3 text-[12px]\" style={{ color: \"var(--color-text-secondary)\" }}>{t.traineeName ?? \"—\"}</TableCell>\n      <TableCell className=\"px-5 py-3 text-right\">\n        <span\n          className=\"inline-flex items-center gap-1 text-[12px] font-semibold tabular-nums\"\n          style={{ color: positive ? \"var(--color-status-success-text)\" : negative ? \"var(--color-status-error-text)\" : \"var(--color-text-muted)\" }}\n        >\n          {positive && <ArrowUp size={11} strokeWidth={2.2} />}\n          {negative && <ArrowDown size={11} strokeWidth={2.2} />}\n          {positive ? \"+\" : \"\"}{t.creditsDelta}\n        </span>\n      </TableCell>\n      <TableCell className=\"px-5 py-3 text-[12px]\" style={{ color: \"var(--color-text-secondary)\" }}>\n        {t.admin ?? <span style={{ color: \"var(--color-text-muted)\" }}>system</span>}\n      </TableCell>\n    </TableRow>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { useState, useMemo } from \"react\";\nimport {\n  Search, X, Download, ArrowDown, ArrowUp, ChevronDown,\n  Coins, FileSearch,\n} from \"lucide-react\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card } from \"@/components/ui/card\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"@/components/ui/table\";\nimport { AdminShell } from \"@/components/admin/admin-shell\";\nimport { CREDIT_TRANSACTIONS } from \"@/lib/credits-mock\";\nimport { TXN_LABEL, type TxnType, type CreditTxn } from \"@/lib/credits\";\n\nconst TYPE_OPTIONS: { value: TxnType | \"all\"; label: string }[] = [\n  { value: \"all\", label: \"All types\" },\n  ...(Object.entries(TXN_LABEL).map(([v, l]) => ({ value: v as TxnType, label: l }))),\n];\n\nexport default function TransactionsPage() {\n  const [q, setQ] = useState(\"\");\n  const [typeFilter, setTypeFilter] = useState<TxnType | \"all\">(\"all\");\n\n  const filtered = useMemo(() => {\n    let items = [...CREDIT_TRANSACTIONS];\n    if (typeFilter !== \"all\") items = items.filter((t) => t.type === typeFilter);\n    if (q) {\n      const n = q.toLowerCase();\n      items = items.filter((t) =>\n        t.id.toLowerCase().includes(n) ||\n        t.sponsorName?.toLowerCase().includes(n) ||\n        t.traineeName?.toLowerCase().includes(n) ||\n        t.sessionId?.toLowerCase().includes(n) ||\n        t.admin?.toLowerCase().includes(n) ||\n        t.notes?.toLowerCase().includes(n)\n      );\n    }\n    return items.sort((a, b) => b.timestamp.localeCompare(a.timestamp));\n  }, [q, typeFilter]);\n\n  return (\n    <AdminShell>\n      <div className=\"flex items-start justify-between gap-4 mb-6\">\n        <div>\n          <h1 className=\"text-[1.75rem] font-semibold tracking-tight mb-1\" style={{ letterSpacing: \"-0.025em\" }}>\n            Credit transactions\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            Append-only ledger of every credit movement. Retained for audit & reconciliation.\n          </p>\n        </div>\n        <Button variant=\"outline\" size=\"default\">\n          <Download size={13} /> Export CSV\n        </Button>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex items-center gap-2 mb-5\">\n        <div className=\"relative flex-1 max-w-md\">\n          <Search size={14} className=\"absolute left-3 top-1/2 -translate-y-1/2\" style={{ color: \"var(--color-text-muted)\" }} />\n          <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder=\"Search by sponsor, trainee, session ID, notes…\" className=\"h-9 pl-9\" />\n          {q && (\n            <button onClick={() => setQ(\"\")} className=\"absolute right-3 top-1/2 -translate-y-1/2 transition-opacity hover:opacity-70\" style={{ color: \"var(--color-text-muted)\" }}>\n              <X size={13} />\n            </button>\n          )}\n        </div>\n        <div className=\"relative\">\n          <select\n            value={typeFilter}\n            onChange={(e) => setTypeFilter(e.target.value as TxnType | \"all\")}\n            className=\"h-9 pl-3 pr-8 rounded-lg border text-[12px] bg-transparent outline-none appearance-none cursor-pointer focus-visible:ring-3 focus-visible:ring-[var(--teal-500)]/30\"\n            style={{ borderColor: \"var(--color-border-default)\", color: \"var(--color-text-primary)\" }}\n            aria-label=\"Filter by type\"\n          >\n            {TYPE_OPTIONS.map((o) => <option key={o.value} value={o.value}>Type: {o.label}</option>)}\n          </select>\n          <ChevronDown size={13} strokeWidth={1.8} className=\"absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none\" style={{ color: \"var(--color-text-muted)\" }} />\n        </div>\n      </div>\n\n      {filtered.length === 0 ? (\n        <Card className=\"p-12 text-center\">\n          <FileSearch size={28} strokeWidth={1.4} className=\"mx-auto mb-3\" style={{ color: \"var(--color-text-muted)\" }} />\n          <p className=\"text-[13px]\" style={{ color: \"var(--color-text-secondary)\" }}>\n            No transactions match these filters.\n          </p>\n        </Card>\n      ) : (\n        <Card className=\"p-0\">\n          <Table>\n            <TableHeader style={{ background: \"var(--color-bg-subtle)\" }}>\n              <TableRow>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>When</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Type</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Sponsor</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Trainee</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Credits</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>By</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {filtered.map((t) => <TxnRow key={t.id} t={t} />)}\n            </TableBody>\n          </Table>\n        </Card>\n      )}\n    </AdminShell>\n  );\n}\n\nfunction TxnRow({ t }: { t: CreditTxn }) {\n  const positive = t.creditsDelta > 0;\n  const negative = t.creditsDelta < 0;\n  return (\n    <TableRow>\n      <TableCell className=\"px-5 py-3 text-[12px]\">\n        <div style={{ color: \"var(--color-text-primary)\" }}>{new Date(t.timestamp).toLocaleDateString()}</div>\n        <div className=\"text-[10px]\" style={{ color: \"var(--color-text-muted)\" }}>\n          {new Date(t.timestamp).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })}\n        </div>\n      </TableCell>\n      <TableCell className=\"px-5 py-3\">\n        <div className=\"flex items-center gap-2\">\n          <Coins size={13} strokeWidth={1.7} style={{ color: \"var(--color-text-muted)\" }} />\n          <span className=\"text-[12px] font-medium\">{TXN_LABEL[t.type]}</span>\n        </div>\n        {t.notes && <div className=\"text-[10px] mt-0.5 ml-5\" style={{ color: \"var(--color-text-muted)\" }}>{t.notes}</div>}\n        {t.sessionId && <div className=\"text-[10px] mt-0.5 ml-5\"><code style={{ color: \"var(--color-text-secondary)\" }}>{t.sessionId}</code></div>}\n      </TableCell>\n      <TableCell className=\"px-5 py-3 text-[12px]\" style={{ color: \"var(--color-text-secondary)\" }}>{t.sponsorName ?? \"—\"}</TableCell>\n      <TableCell className=\"px-5 py-3 text-[12px]\" style={{ color: \"var(--color-text-secondary)\" }}>{t.traineeName ?? \"—\"}</TableCell>\n      <TableCell className=\"px-5 py-3 text-right\">\n        <span\n          className=\"inline-flex items-center gap-1 text-[12px] font-semibold tabular-nums\"\n          style={{ color: positive ? \"var(--color-status-success-text)\" : negative ? \"var(--color-status-error-text)\" : \"var(--color-text-muted)\" }}\n        >\n          {positive && <ArrowUp size={11} strokeWidth={2.2} />}\n          {negative && <ArrowDown size={11} strokeWidth={2.2} />}\n          {positive ? \"+\" : \"\"}{t.creditsDelta}\n        </span>\n      </TableCell>\n      <TableCell className=\"px-5 py-3 text-[12px]\" style={{ color: \"var(--color-text-secondary)\" }}>\n        {t.admin ?? <span style={{ color: \"var(--color-text-muted)\" }}>system</span>}\n      </TableCell>\n    </TableRow>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/error.json

@@ -0,0 +1,30 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/error.tsx",
+  "sha256": "3ec1ffd81e51b6eee831e12e664f72f190a196a86a72d99792b4172995852534",
+  "imports": [
+    "react",
+    "next/link",
+    "framer-motion",
+    "lucide-react",
+    "@/components/ui/button",
+    "@/components/design-system/theme-toggle"
+  ],
+  "tokens": [
+    "--color-bg-default",
+    "--color-border-muted",
+    "--color-status-error-bg",
+    "--color-status-error-text",
+    "--color-text-muted",
+    "--color-text-primary",
+    "--color-text-secondary"
+  ],
+  "fragments": [
+    {
+      "id": "ErrorPage",
+      "line": 10,
+      "code": "export default function ErrorPage({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {\n  useEffect(() => {\n    // log to monitoring service in production\n    console.error(error);\n  }, [error]);\n\n  return (\n    <div className=\"min-h-screen flex flex-col\" style={{ background: \"var(--color-bg-default)\", color: \"var(--color-text-primary)\" }}>\n      <header className=\"h-14 flex items-center justify-between px-6 md:px-10 shrink-0\">\n        <Link href=\"/marketing\" className=\"flex items-center gap-2.5 group\">\n          <img src=\"/mentix-logo.png\" alt=\"Mentix\" style={{ height: 24, width: 24, objectFit: \"contain\" }} />\n          <span className=\"text-sm font-semibold tracking-tight transition-opacity group-hover:opacity-70\">Mentix</span>\n        </Link>\n        <ThemeToggle />\n      </header>\n\n      <main className=\"flex-1 flex items-center justify-center px-6 py-12\">\n        <motion.div\n          initial={{ opacity: 0, y: 16 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}\n          className=\"text-center max-w-md\"\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.85 }}\n            animate={{ opacity: 1, scale: 1 }}\n            transition={{ duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}\n            className=\"w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6\"\n            style={{ background: \"var(--color-status-error-bg)\", color: \"var(--color-status-error-text)\" }}\n          >\n            <AlertTriangle size={28} strokeWidth={1.5} />\n          </motion.div>\n\n          <h1 className=\"text-[1.75rem] font-semibold mb-2\" style={{ letterSpacing: \"-0.025em\", lineHeight: 1.15 }}>\n            Something went wrong\n          </h1>\n          <p className=\"text-sm mb-2\" style={{ color: \"var(--color-text-secondary)\", lineHeight: 1.55 }}>\n            We hit an unexpected error. Our team has been notified.\n          </p>\n          {error.digest && (\n            <p className=\"text-[11px] mb-8 font-mono\" style={{ color: \"var(--color-text-muted)\" }}>\n              Error ID: {error.digest}\n            </p>\n          )}\n\n          <div className=\"flex flex-col sm:flex-row items-center justify-center gap-2 mt-6\">\n            <Button variant=\"brand\" size=\"lg\" onClick={reset} className=\"w-full sm:w-auto\">\n              <RefreshCw size={14} /> Try again\n            </Button>\n            <Link href=\"/marketing\">\n              <Button variant=\"outline\" size=\"lg\" className=\"w-full sm:w-auto\">\n                <Home size={14} /> Back to homepage\n              </Button>\n            </Link>\n          </div>\n        </motion.div>\n      </main>\n\n      <footer className=\"h-12 flex items-center justify-center text-[11px] shrink-0 border-t\" style={{ color: \"var(--color-text-muted)\", borderColor: \"var(--color-border-muted)\" }}>\n        © 2026 Mentix\n      </footer>\n    </div>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport { useEffect } from \"react\";\nimport Link from \"next/link\";\nimport { motion } from \"framer-motion\";\nimport { AlertTriangle, RefreshCw, Home } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { ThemeToggle } from \"@/components/design-system/theme-toggle\";\n\nexport default function ErrorPage({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {\n  useEffect(() => {\n    // log to monitoring service in production\n    console.error(error);\n  }, [error]);\n\n  return (\n    <div className=\"min-h-screen flex flex-col\" style={{ background: \"var(--color-bg-default)\", color: \"var(--color-text-primary)\" }}>\n      <header className=\"h-14 flex items-center justify-between px-6 md:px-10 shrink-0\">\n        <Link href=\"/marketing\" className=\"flex items-center gap-2.5 group\">\n          <img src=\"/mentix-logo.png\" alt=\"Mentix\" style={{ height: 24, width: 24, objectFit: \"contain\" }} />\n          <span className=\"text-sm font-semibold tracking-tight transition-opacity group-hover:opacity-70\">Mentix</span>\n        </Link>\n        <ThemeToggle />\n      </header>\n\n      <main className=\"flex-1 flex items-center justify-center px-6 py-12\">\n        <motion.div\n          initial={{ opacity: 0, y: 16 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}\n          className=\"text-center max-w-md\"\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.85 }}\n            animate={{ opacity: 1, scale: 1 }}\n            transition={{ duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}\n            className=\"w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6\"\n            style={{ background: \"var(--color-status-error-bg)\", color: \"var(--color-status-error-text)\" }}\n          >\n            <AlertTriangle size={28} strokeWidth={1.5} />\n          </motion.div>\n\n          <h1 className=\"text-[1.75rem] font-semibold mb-2\" style={{ letterSpacing: \"-0.025em\", lineHeight: 1.15 }}>\n            Something went wrong\n          </h1>\n          <p className=\"text-sm mb-2\" style={{ color: \"var(--color-text-secondary)\", lineHeight: 1.55 }}>\n            We hit an unexpected error. Our team has been notified.\n          </p>\n          {error.digest && (\n            <p className=\"text-[11px] mb-8 font-mono\" style={{ color: \"var(--color-text-muted)\" }}>\n              Error ID: {error.digest}\n            </p>\n          )}\n\n          <div className=\"flex flex-col sm:flex-row items-center justify-center gap-2 mt-6\">\n            <Button variant=\"brand\" size=\"lg\" onClick={reset} className=\"w-full sm:w-auto\">\n              <RefreshCw size={14} /> Try again\n            </Button>\n            <Link href=\"/marketing\">\n              <Button variant=\"outline\" size=\"lg\" className=\"w-full sm:w-auto\">\n                <Home size={14} /> Back to homepage\n              </Button>\n            </Link>\n          </div>\n        </motion.div>\n      </main>\n\n      <footer className=\"h-12 flex items-center justify-center text-[11px] shrink-0 border-t\" style={{ color: \"var(--color-text-muted)\", borderColor: \"var(--color-border-muted)\" }}>\n        © 2026 Mentix\n      </footer>\n    </div>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/loading.json

@@ -0,0 +1,19 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/loading.tsx",
+  "sha256": "74c0d4aae72f803e91481cbe29e8d8fbffa0e9b02b1ef2970ec014a2127ad5b6",
+  "imports": [],
+  "tokens": [
+    "--color-bg-default",
+    "--color-text-muted",
+    "--teal-500"
+  ],
+  "fragments": [
+    {
+      "id": "Loading",
+      "line": 1,
+      "code": "export default function Loading() {\n  return (\n    <div className=\"min-h-screen flex items-center justify-center\" style={{ background: \"var(--color-bg-default)\" }}>\n      <div className=\"flex flex-col items-center gap-4\">\n        <div className=\"relative w-12 h-12\">\n          <div\n            className=\"absolute inset-0 rounded-full border-2 border-transparent animate-spin\"\n            style={{\n              borderTopColor: \"var(--teal-500)\",\n              borderRightColor: \"var(--teal-500)\",\n              animationDuration: \"0.9s\",\n            }}\n          />\n        </div>\n        <p className=\"text-[12px]\" style={{ color: \"var(--color-text-muted)\" }}>Loading…</p>\n      </div>\n    </div>\n  );\n}"
+    }
+  ],
+  "content": "export default function Loading() {\n  return (\n    <div className=\"min-h-screen flex items-center justify-center\" style={{ background: \"var(--color-bg-default)\" }}>\n      <div className=\"flex flex-col items-center gap-4\">\n        <div className=\"relative w-12 h-12\">\n          <div\n            className=\"absolute inset-0 rounded-full border-2 border-transparent animate-spin\"\n            style={{\n              borderTopColor: \"var(--teal-500)\",\n              borderRightColor: \"var(--teal-500)\",\n              animationDuration: \"0.9s\",\n            }}\n          />\n        </div>\n        <p className=\"text-[12px]\" style={{ color: \"var(--color-text-muted)\" }}>Loading…</p>\n      </div>\n    </div>\n  );\n}\n"
+}