@utopia-studio-design/design-system-cli 0.7.1 → 0.8.0

package/data/docs/ux-source-evidence/portal-sessions-detail-live.json

@@ -0,0 +1,48 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/portal/sessions/[id]/live/page.tsx",
+  "sha256": "5a47bfd48fb70f0173c95576ecefbdf8bf3d77ca2119e9cbe7e2dfbec5d4106d",
+  "imports": [
+    "next/link",
+    "react",
+    "lucide-react",
+    "@/components/ui/button",
+    "@/components/ui/badge",
+    "@/components/ui/card",
+    "@/components/ui/textarea",
+    "@/components/ui/separator",
+    "@/components/auth/auth-primitives"
+  ],
+  "tokens": [
+    "--amber-500",
+    "--color-bg-brand-muted",
+    "--color-bg-subtle",
+    "--color-status-info-bg",
+    "--color-status-info-text",
+    "--color-status-success-bg",
+    "--color-status-success-text",
+    "--color-status-warning-bg",
+    "--color-status-warning-text",
+    "--color-text-brand",
+    "--color-text-secondary",
+    "--gray-0",
+    "--gray-50",
+    "--gray-900",
+    "--gray-950",
+    "--green-500",
+    "--red-500"
+  ],
+  "fragments": [
+    {
+      "id": "LiveSessionPage",
+      "line": 37,
+      "code": "export default function LiveSessionPage({ params }: { params: Promise<{ id: string }> }) {\n  const { id } = use(params);\n\n  const [participants, setParticipants] = useState<Participant[]>([\n    { id: \"p1\", role: \"trainee\",  name: \"Dr. Yuki Tanaka\",       initials: \"YT\", micOn: true,  videoOn: true,  hasFeed: true },\n    { id: \"p2\", role: \"mentor\",   name: \"Dr. Hiroshi Yamamoto\",  initials: \"HY\", micOn: true,  videoOn: true  },\n    { id: \"p3\", role: \"industry\", name: \"Olympus Medical (Rep)\", initials: \"OM\", org: \"Olympus\", micOn: false, videoOn: false },\n    { id: \"p4\", role: \"admin\",    name: \"Sarah K.\",              initials: \"SK\", micOn: false, videoOn: false },\n    { id: \"p5\", role: \"tech\",     name: \"Surgease Support\",      initials: \"SS\", micOn: false, videoOn: false },\n  ]);\n\n  const me = participants[1]; // playing the mentor role\n\n  const [elapsed, setElapsed] = useState(0); // seconds\n  const [safetyOpen, setSafetyOpen] = useState(false);\n  const [safetyNote, setSafetyNote] = useState(\"\");\n  const [safetyEvents, setSafetyEvents] = useState<{ at: number; note: string }[]>([]);\n  const [connectionLost, setConnectionLost] = useState(false);\n\n  useEffect(() => {\n    const t = setInterval(() => setElapsed((s) => s + 1), 1000);\n    return () => clearInterval(t);\n  }, []);\n\n  const toggleMic = (id: string) => setParticipants((ps) => ps.map((p) => p.id === id ? { ...p, micOn: !p.micOn } : p));\n\n  const trainee = participants.find((p) => p.role === \"trainee\")!;\n\n  // 2-hour warning at 1:45 (105 minutes = 6300s). For demo, use 30s.\n  const approachingLimit = elapsed > 30;\n\n  const mins = Math.floor(elapsed / 60);\n  const secs = elapsed % 60;\n  const timeStr = `${String(mins).padStart(2, \"0\")}:${String(secs).padStart(2, \"0\")}`;\n\n  return (\n    <div className=\"min-h-screen flex flex-col\" style={{ background: \"var(--gray-950)\", color: \"var(--gray-50)\" }}>\n      {/* Top bar */}\n      <header className=\"h-14 px-6 flex items-center justify-between shrink-0 border-b\" style={{ background: \"color-mix(in srgb, var(--gray-950) 80%, transparent)\", borderColor: \"color-mix(in srgb, var(--gray-0) 8%, transparent)\", backdropFilter: \"blur(8px)\" }}>\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"w-2 h-2 rounded-full animate-pulse\" style={{ background: \"var(--red-500)\" }} />\n            <span className=\"text-[11px] font-semibold uppercase tracking-wider\">REC</span>\n          </div>\n          <Separator orientation=\"vertical\" className=\"h-5\" style={{ background: \"color-mix(in srgb, var(--gray-0) 15%, transparent)\" }} />\n          <div className=\"text-[12px]\" style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }}>\n            <span className=\"text-[11px] uppercase tracking-wider\" style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }}>Session</span>\n            <span className=\"ml-2 font-mono\">{id}</span>\n          </div>\n          <Separator orientation=\"vertical\" className=\"h-5\" style={{ background: \"color-mix(in srgb, var(--gray-0) 15%, transparent)\" }} />\n          <div className=\"flex items-center gap-1.5 text-[13px] tabular-nums font-semibold\" style={{ color: approachingLimit ? \"var(--amber-500)\" : \"var(--gray-50)\" }}>\n            <Activity size={13} strokeWidth={2} />\n            {timeStr}\n            {approachingLimit && <Badge className=\"text-[10px] ml-1\" style={{ background: \"var(--amber-500)\", color: \"var(--gray-950)\" }}>Limit approaching</Badge>}\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2 text-[11px]\" style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }}>\n          <Wifi size={12} strokeWidth={1.8} style={{ color: \"var(--green-500)\" }} />\n          <span>1080p · 28ms latency · stable</span>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Settings\" style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }}><Settings size={14} /></Button>\n          <Link href={`/portal/mentor/sessions/${id}/assess`}>\n            <Button variant=\"destructive\" size=\"sm\">\n              <PhoneOff size={12} /> End session\n            </Button>\n          </Link>\n        </div>\n      </header>\n\n      {/* Main grid */}\n      <main className=\"flex-1 flex p-4 gap-4 overflow-hidden\">\n        {/* Video grid */}\n        <div className=\"flex-1 grid grid-rows-[1fr_140px] gap-3 min-w-0\">\n          {/* Primary feed (trainee) */}\n          <div className=\"rounded-xl relative overflow-hidden\" style={{ background: \"color-mix(in srgb, var(--gray-0) 4%, transparent)\", border: \"1px solid color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n            {/* \"Live procedural video\" mock */}\n            <div className=\"absolute inset-0 flex items-center justify-center\">\n              <div className=\"text-center\">\n                <div className=\"text-[60px] mb-2\" style={{ opacity: 0.2 }}>📷</div>\n                <p className=\"text-[12px]\" style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }}>\n                  Live procedural feed from {trainee.name}'s teleproctoring device\n                </p>\n              </div>\n            </div>\n            {/* Overlay info */}\n            <div className=\"absolute top-3 left-3 flex items-center gap-2\">\n              <Badge className=\"text-[10px]\" style={{ background: \"color-mix(in srgb, var(--gray-950) 70%, transparent)\", color: \"var(--gray-50)\", backdropFilter: \"blur(4px)\" }}>\n                {trainee.name} · Operating\n              </Badge>\n            </div>\n            <div className=\"absolute top-3 right-3 flex items-center gap-2\">\n              <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Maximize\" style={{ background: \"color-mix(in srgb, var(--gray-950) 50%, transparent)\", color: \"var(--gray-50)\" }}>\n                <Maximize2 size={13} />\n              </Button>\n            </div>\n\n            {/* Connectivity loss overlay */}\n            {connectionLost && (\n              <div className=\"absolute inset-0 flex items-center justify-center\" style={{ background: \"color-mix(in srgb, var(--red-500) 80%, transparent)\", backdropFilter: \"blur(2px)\" }}>\n                <div className=\"text-center max-w-md p-6\">\n                  <AlertTriangle size={48} strokeWidth={1.5} className=\"mx-auto mb-3\" />\n                  <h2 className=\"text-xl font-bold mb-2\">FAIL-SAFE ACTIVATED</h2>\n                  <p className=\"text-[14px] mb-4\">Connection lost. Trainee should revert to local supervision immediately. Reconnection in progress…</p>\n                  <Button variant=\"default\" onClick={() => setConnectionLost(false)} style={{ background: \"var(--gray-0)\", color: \"var(--red-500)\" }}>\n                    Mark resolved\n                  </Button>\n                </div>\n              </div>\n            )}\n          </div>\n\n          {/* Participant strip */}\n          <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3\">\n            {participants.filter((p) => !p.hasFeed).map((p) => (\n              <ParticipantTile key={p.id} p={p} onToggleMic={() => toggleMic(p.id)} isMe={p.id === me.id} />\n            ))}\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <aside className=\"w-80 flex flex-col gap-3 shrink-0\">\n          {/* Participants */}\n          <Card className=\"flex-1 overflow-hidden\" style={{ background: \"color-mix(in srgb, var(--gray-0) 4%, transparent)\", border: \"1px solid color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n            <div className=\"px-4 py-3 flex items-center justify-between border-b\" style={{ borderColor: \"color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n              <h3 className=\"text-[12px] font-semibold uppercase tracking-wider flex items-center gap-2\">\n                <Users size={12} /> Participants ({participants.length})\n              </h3>\n            </div>\n            <div className=\"p-2 space-y-1\">\n              {participants.map((p) => (\n                <div key={p.id} className=\"px-2 py-2 rounded-md flex items-center gap-2.5\">\n                  <div className=\"w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0\" style={{ background: ROLE_META[p.role].bg, color: ROLE_META[p.role].color }}>\n                    {p.initials}\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"text-[12px] truncate\" style={{ color: \"var(--gray-50)\" }}>{p.name}</div>\n                    <div className=\"text-[10px] truncate\" style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }}>{ROLE_META[p.role].label}</div>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    {p.micOn ? <Mic size={11} style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }} /> : <MicOff size={11} style={{ color: \"color-mix(in srgb, var(--gray-0) 30%, transparent)\" }} />}\n                    {p.videoOn ? <VideoIcon size={11} style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }} /> : <VideoOff size={11} style={{ color: \"color-mix(in srgb, var(--gray-0) 30%, transparent)\" }} />}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </Card>\n\n          {/* Safety events */}\n          <Card className=\"overflow-hidden\" style={{ background: \"color-mix(in srgb, var(--gray-0) 4%, transparent)\", border: \"1px solid color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n            <div className=\"px-4 py-3 flex items-center justify-between border-b\" style={{ borderColor: \"color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n              <h3 className=\"text-[12px] font-semibold uppercase tracking-wider\">Safety events</h3>\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => setSafetyOpen(true)} style={{ color: \"var(--amber-500)\" }}>\n                <Flag size={11} /> Flag\n              </Button>\n            </div>\n            <div className=\"p-3\">\n              {safetyEvents.length === 0 ? (\n                <p className=\"text-[11px]\" style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }}>No events flagged.</p>\n              ) : (\n                <ul className=\"space-y-2 text-[11px]\">\n                  {safetyEvents.map((e, i) => (\n                    <li key={i} className=\"flex items-start gap-2\">\n                      <Flag size={10} className=\"mt-0.5 shrink-0\" style={{ color: \"var(--amber-500)\" }} />\n                      <div>\n                        <div className=\"font-mono tabular-nums\" style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }}>{Math.floor(e.at / 60)}:{String(e.at % 60).padStart(2, \"0\")}</div>\n                        <div style={{ color: \"var(--gray-50)\" }}>{e.note}</div>\n                      </div>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          </Card>\n\n          {/* Connectivity test toggle (demo) */}\n          <Button variant=\"outline\" size=\"sm\" onClick={() => setConnectionLost(true)} style={{ borderColor: \"color-mix(in srgb, var(--gray-0) 15%, transparent)\", color: \"var(--gray-50)\", background: \"transparent\" }}>\n            Simulate connection loss\n          </Button>\n        </aside>\n      </main>\n\n      {/* Bottom controls */}\n      <footer className=\"h-16 px-6 flex items-center justify-center gap-2 shrink-0 border-t\" style={{ background: \"color-mix(in srgb, var(--gray-950) 80%, transparent)\", borderColor: \"color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n        <Button\n          variant=\"ghost\"\n          size=\"icon-lg\"\n          onClick={() => toggleMic(me.id)}\n          aria-label=\"Mute\"\n          style={{ background: me.micOn ? \"color-mix(in srgb, var(--gray-0) 8%, transparent)\" : \"var(--red-500)\", color: \"var(--gray-50)\" }}\n        >\n          {me.micOn ? <Mic size={16} /> : <MicOff size={16} />}\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"icon-lg\"\n          aria-label=\"Camera\"\n          style={{ background: me.videoOn ? \"color-mix(in srgb, var(--gray-0) 8%, transparent)\" : \"var(--red-500)\", color: \"var(--gray-50)\" }}\n        >\n          {me.videoOn ? <VideoIcon size={16} /> : <VideoOff size={16} />}\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"icon-lg\"\n          onClick={() => setSafetyOpen(true)}\n          aria-label=\"Flag safety event\"\n          style={{ background: \"color-mix(in srgb, var(--gray-0) 8%, transparent)\", color: \"var(--amber-500)\" }}\n        >\n          <Flag size={16} />\n        </Button>\n      </footer>\n\n      {/* Safety event modal */}\n      {safetyOpen && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\" style={{ background: \"color-mix(in srgb, var(--gray-950) 80%, transparent)\", backdropFilter: \"blur(4px)\" }}>\n          <div className=\"w-full max-w-md rounded-2xl p-6\" style={{ background: \"var(--gray-900)\", border: \"1px solid color-mix(in srgb, var(--gray-0) 10%, transparent)\" }}>\n            <div className=\"flex items-start gap-3 mb-4\">\n              <div className=\"w-10 h-10 rounded-full flex items-center justify-center shrink-0\" style={{ background: \"color-mix(in srgb, var(--amber-500) 20%, transparent)\", color: \"var(--amber-500)\" }}>\n                <Flag size={18} strokeWidth={1.8} />\n              </div>\n              <div>\n                <h3 className=\"text-base font-semibold mb-1\" style={{ color: \"var(--gray-50)\" }}>Flag safety event</h3>\n                <p className=\"text-[12px]\" style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }}>\n                  Clinical responsibility remains with the operating surgeon. Provide guidance as appropriate.\n                </p>\n              </div>\n            </div>\n            <Textarea\n              value={safetyNote}\n              onChange={(e) => setSafetyNote(e.target.value.slice(0, 200))}\n              placeholder=\"Brief description (max 200 chars)…\"\n              rows={3}\n            />\n            <p className=\"text-[10px] mt-1 mb-4\" style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }}>\n              {safetyNote.length} / 200\n            </p>\n            <div className=\"flex justify-end gap-2\">\n              <Button variant=\"outline\" onClick={() => { setSafetyOpen(false); setSafetyNote(\"\"); }}>Cancel</Button>\n              <Button variant=\"brand\" disabled={!safetyNote.trim()} onClick={() => {\n                setSafetyEvents([...safetyEvents, { at: elapsed, note: safetyNote }]);\n                setSafetyOpen(false); setSafetyNote(\"\");\n              }}>\n                <Flag size={11} /> Log event\n              </Button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}"
+    },
+    {
+      "id": "ParticipantTile",
+      "line": 291,
+      "code": "function ParticipantTile({ p, onToggleMic, isMe }: { p: Participant; onToggleMic: () => void; isMe: boolean }) {\n  const meta = ROLE_META[p.role];\n  return (\n    <div className=\"rounded-xl relative overflow-hidden flex items-center justify-center\" style={{ background: \"color-mix(in srgb, var(--gray-0) 5%, transparent)\", border: \"1px solid color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n      <div className=\"w-12 h-12 rounded-full flex items-center justify-center text-[14px] font-semibold\" style={{ background: meta.bg, color: meta.color }}>\n        {p.initials}\n      </div>\n      <div className=\"absolute bottom-2 left-2 right-2 flex items-center justify-between\">\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"text-[11px] font-medium truncate\" style={{ color: \"var(--gray-50)\" }}>\n            {p.name.split(\" \").slice(0, 2).join(\" \")}{isMe && \" (You)\"}\n          </div>\n          <div className=\"text-[9px] truncate\" style={{ color: meta.color }}>{meta.label}</div>\n        </div>\n        <div className=\"flex items-center gap-1 shrink-0\">\n          {p.micOn\n            ? <Mic size={10} style={{ color: \"var(--gray-50)\" }} />\n            : <MicOff size={10} style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }} />\n          }\n        </div>\n      </div>\n    </div>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { use, useState, useEffect } from \"react\";\nimport {\n  Mic, MicOff, Video as VideoIcon, VideoOff, PhoneOff, AlertTriangle,\n  Wifi, Activity, Users, FileText, Flag, Settings, Maximize2,\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card } from \"@/components/ui/card\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { InlineAlert } from \"@/components/auth/auth-primitives\";\n\ntype ParticipantRole = \"mentor\" | \"trainee\" | \"industry\" | \"admin\" | \"tech\";\n\ninterface Participant {\n  id: string;\n  role: ParticipantRole;\n  name: string;\n  initials: string;\n  org?: string;\n  micOn: boolean;\n  videoOn: boolean;\n  hasFeed?: boolean; // for trainee primary feed\n}\n\nconst ROLE_META: Record<ParticipantRole, { label: string; color: string; bg: string }> = {\n  mentor:   { label: \"Mentor\",            color: \"var(--color-text-brand)\",         bg: \"var(--color-bg-brand-muted)\" },\n  trainee:  { label: \"Operating surgeon\", color: \"var(--color-status-success-text)\", bg: \"var(--color-status-success-bg)\" },\n  industry: { label: \"Industry partner\",  color: \"var(--color-status-info-text)\",   bg: \"var(--color-status-info-bg)\" },\n  admin:    { label: \"Mentix admin\",      color: \"var(--color-text-secondary)\",     bg: \"var(--color-bg-subtle)\" },\n  tech:     { label: \"Tech support\",      color: \"var(--color-status-warning-text)\", bg: \"var(--color-status-warning-bg)\" },\n};\n\nexport default function LiveSessionPage({ params }: { params: Promise<{ id: string }> }) {\n  const { id } = use(params);\n\n  const [participants, setParticipants] = useState<Participant[]>([\n    { id: \"p1\", role: \"trainee\",  name: \"Dr. Yuki Tanaka\",       initials: \"YT\", micOn: true,  videoOn: true,  hasFeed: true },\n    { id: \"p2\", role: \"mentor\",   name: \"Dr. Hiroshi Yamamoto\",  initials: \"HY\", micOn: true,  videoOn: true  },\n    { id: \"p3\", role: \"industry\", name: \"Olympus Medical (Rep)\", initials: \"OM\", org: \"Olympus\", micOn: false, videoOn: false },\n    { id: \"p4\", role: \"admin\",    name: \"Sarah K.\",              initials: \"SK\", micOn: false, videoOn: false },\n    { id: \"p5\", role: \"tech\",     name: \"Surgease Support\",      initials: \"SS\", micOn: false, videoOn: false },\n  ]);\n\n  const me = participants[1]; // playing the mentor role\n\n  const [elapsed, setElapsed] = useState(0); // seconds\n  const [safetyOpen, setSafetyOpen] = useState(false);\n  const [safetyNote, setSafetyNote] = useState(\"\");\n  const [safetyEvents, setSafetyEvents] = useState<{ at: number; note: string }[]>([]);\n  const [connectionLost, setConnectionLost] = useState(false);\n\n  useEffect(() => {\n    const t = setInterval(() => setElapsed((s) => s + 1), 1000);\n    return () => clearInterval(t);\n  }, []);\n\n  const toggleMic = (id: string) => setParticipants((ps) => ps.map((p) => p.id === id ? { ...p, micOn: !p.micOn } : p));\n\n  const trainee = participants.find((p) => p.role === \"trainee\")!;\n\n  // 2-hour warning at 1:45 (105 minutes = 6300s). For demo, use 30s.\n  const approachingLimit = elapsed > 30;\n\n  const mins = Math.floor(elapsed / 60);\n  const secs = elapsed % 60;\n  const timeStr = `${String(mins).padStart(2, \"0\")}:${String(secs).padStart(2, \"0\")}`;\n\n  return (\n    <div className=\"min-h-screen flex flex-col\" style={{ background: \"var(--gray-950)\", color: \"var(--gray-50)\" }}>\n      {/* Top bar */}\n      <header className=\"h-14 px-6 flex items-center justify-between shrink-0 border-b\" style={{ background: \"color-mix(in srgb, var(--gray-950) 80%, transparent)\", borderColor: \"color-mix(in srgb, var(--gray-0) 8%, transparent)\", backdropFilter: \"blur(8px)\" }}>\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"w-2 h-2 rounded-full animate-pulse\" style={{ background: \"var(--red-500)\" }} />\n            <span className=\"text-[11px] font-semibold uppercase tracking-wider\">REC</span>\n          </div>\n          <Separator orientation=\"vertical\" className=\"h-5\" style={{ background: \"color-mix(in srgb, var(--gray-0) 15%, transparent)\" }} />\n          <div className=\"text-[12px]\" style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }}>\n            <span className=\"text-[11px] uppercase tracking-wider\" style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }}>Session</span>\n            <span className=\"ml-2 font-mono\">{id}</span>\n          </div>\n          <Separator orientation=\"vertical\" className=\"h-5\" style={{ background: \"color-mix(in srgb, var(--gray-0) 15%, transparent)\" }} />\n          <div className=\"flex items-center gap-1.5 text-[13px] tabular-nums font-semibold\" style={{ color: approachingLimit ? \"var(--amber-500)\" : \"var(--gray-50)\" }}>\n            <Activity size={13} strokeWidth={2} />\n            {timeStr}\n            {approachingLimit && <Badge className=\"text-[10px] ml-1\" style={{ background: \"var(--amber-500)\", color: \"var(--gray-950)\" }}>Limit approaching</Badge>}\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2 text-[11px]\" style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }}>\n          <Wifi size={12} strokeWidth={1.8} style={{ color: \"var(--green-500)\" }} />\n          <span>1080p · 28ms latency · stable</span>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Settings\" style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }}><Settings size={14} /></Button>\n          <Link href={`/portal/mentor/sessions/${id}/assess`}>\n            <Button variant=\"destructive\" size=\"sm\">\n              <PhoneOff size={12} /> End session\n            </Button>\n          </Link>\n        </div>\n      </header>\n\n      {/* Main grid */}\n      <main className=\"flex-1 flex p-4 gap-4 overflow-hidden\">\n        {/* Video grid */}\n        <div className=\"flex-1 grid grid-rows-[1fr_140px] gap-3 min-w-0\">\n          {/* Primary feed (trainee) */}\n          <div className=\"rounded-xl relative overflow-hidden\" style={{ background: \"color-mix(in srgb, var(--gray-0) 4%, transparent)\", border: \"1px solid color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n            {/* \"Live procedural video\" mock */}\n            <div className=\"absolute inset-0 flex items-center justify-center\">\n              <div className=\"text-center\">\n                <div className=\"text-[60px] mb-2\" style={{ opacity: 0.2 }}>📷</div>\n                <p className=\"text-[12px]\" style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }}>\n                  Live procedural feed from {trainee.name}'s teleproctoring device\n                </p>\n              </div>\n            </div>\n            {/* Overlay info */}\n            <div className=\"absolute top-3 left-3 flex items-center gap-2\">\n              <Badge className=\"text-[10px]\" style={{ background: \"color-mix(in srgb, var(--gray-950) 70%, transparent)\", color: \"var(--gray-50)\", backdropFilter: \"blur(4px)\" }}>\n                {trainee.name} · Operating\n              </Badge>\n            </div>\n            <div className=\"absolute top-3 right-3 flex items-center gap-2\">\n              <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Maximize\" style={{ background: \"color-mix(in srgb, var(--gray-950) 50%, transparent)\", color: \"var(--gray-50)\" }}>\n                <Maximize2 size={13} />\n              </Button>\n            </div>\n\n            {/* Connectivity loss overlay */}\n            {connectionLost && (\n              <div className=\"absolute inset-0 flex items-center justify-center\" style={{ background: \"color-mix(in srgb, var(--red-500) 80%, transparent)\", backdropFilter: \"blur(2px)\" }}>\n                <div className=\"text-center max-w-md p-6\">\n                  <AlertTriangle size={48} strokeWidth={1.5} className=\"mx-auto mb-3\" />\n                  <h2 className=\"text-xl font-bold mb-2\">FAIL-SAFE ACTIVATED</h2>\n                  <p className=\"text-[14px] mb-4\">Connection lost. Trainee should revert to local supervision immediately. Reconnection in progress…</p>\n                  <Button variant=\"default\" onClick={() => setConnectionLost(false)} style={{ background: \"var(--gray-0)\", color: \"var(--red-500)\" }}>\n                    Mark resolved\n                  </Button>\n                </div>\n              </div>\n            )}\n          </div>\n\n          {/* Participant strip */}\n          <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3\">\n            {participants.filter((p) => !p.hasFeed).map((p) => (\n              <ParticipantTile key={p.id} p={p} onToggleMic={() => toggleMic(p.id)} isMe={p.id === me.id} />\n            ))}\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <aside className=\"w-80 flex flex-col gap-3 shrink-0\">\n          {/* Participants */}\n          <Card className=\"flex-1 overflow-hidden\" style={{ background: \"color-mix(in srgb, var(--gray-0) 4%, transparent)\", border: \"1px solid color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n            <div className=\"px-4 py-3 flex items-center justify-between border-b\" style={{ borderColor: \"color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n              <h3 className=\"text-[12px] font-semibold uppercase tracking-wider flex items-center gap-2\">\n                <Users size={12} /> Participants ({participants.length})\n              </h3>\n            </div>\n            <div className=\"p-2 space-y-1\">\n              {participants.map((p) => (\n                <div key={p.id} className=\"px-2 py-2 rounded-md flex items-center gap-2.5\">\n                  <div className=\"w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0\" style={{ background: ROLE_META[p.role].bg, color: ROLE_META[p.role].color }}>\n                    {p.initials}\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"text-[12px] truncate\" style={{ color: \"var(--gray-50)\" }}>{p.name}</div>\n                    <div className=\"text-[10px] truncate\" style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }}>{ROLE_META[p.role].label}</div>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    {p.micOn ? <Mic size={11} style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }} /> : <MicOff size={11} style={{ color: \"color-mix(in srgb, var(--gray-0) 30%, transparent)\" }} />}\n                    {p.videoOn ? <VideoIcon size={11} style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }} /> : <VideoOff size={11} style={{ color: \"color-mix(in srgb, var(--gray-0) 30%, transparent)\" }} />}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </Card>\n\n          {/* Safety events */}\n          <Card className=\"overflow-hidden\" style={{ background: \"color-mix(in srgb, var(--gray-0) 4%, transparent)\", border: \"1px solid color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n            <div className=\"px-4 py-3 flex items-center justify-between border-b\" style={{ borderColor: \"color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n              <h3 className=\"text-[12px] font-semibold uppercase tracking-wider\">Safety events</h3>\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => setSafetyOpen(true)} style={{ color: \"var(--amber-500)\" }}>\n                <Flag size={11} /> Flag\n              </Button>\n            </div>\n            <div className=\"p-3\">\n              {safetyEvents.length === 0 ? (\n                <p className=\"text-[11px]\" style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }}>No events flagged.</p>\n              ) : (\n                <ul className=\"space-y-2 text-[11px]\">\n                  {safetyEvents.map((e, i) => (\n                    <li key={i} className=\"flex items-start gap-2\">\n                      <Flag size={10} className=\"mt-0.5 shrink-0\" style={{ color: \"var(--amber-500)\" }} />\n                      <div>\n                        <div className=\"font-mono tabular-nums\" style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }}>{Math.floor(e.at / 60)}:{String(e.at % 60).padStart(2, \"0\")}</div>\n                        <div style={{ color: \"var(--gray-50)\" }}>{e.note}</div>\n                      </div>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          </Card>\n\n          {/* Connectivity test toggle (demo) */}\n          <Button variant=\"outline\" size=\"sm\" onClick={() => setConnectionLost(true)} style={{ borderColor: \"color-mix(in srgb, var(--gray-0) 15%, transparent)\", color: \"var(--gray-50)\", background: \"transparent\" }}>\n            Simulate connection loss\n          </Button>\n        </aside>\n      </main>\n\n      {/* Bottom controls */}\n      <footer className=\"h-16 px-6 flex items-center justify-center gap-2 shrink-0 border-t\" style={{ background: \"color-mix(in srgb, var(--gray-950) 80%, transparent)\", borderColor: \"color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n        <Button\n          variant=\"ghost\"\n          size=\"icon-lg\"\n          onClick={() => toggleMic(me.id)}\n          aria-label=\"Mute\"\n          style={{ background: me.micOn ? \"color-mix(in srgb, var(--gray-0) 8%, transparent)\" : \"var(--red-500)\", color: \"var(--gray-50)\" }}\n        >\n          {me.micOn ? <Mic size={16} /> : <MicOff size={16} />}\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"icon-lg\"\n          aria-label=\"Camera\"\n          style={{ background: me.videoOn ? \"color-mix(in srgb, var(--gray-0) 8%, transparent)\" : \"var(--red-500)\", color: \"var(--gray-50)\" }}\n        >\n          {me.videoOn ? <VideoIcon size={16} /> : <VideoOff size={16} />}\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"icon-lg\"\n          onClick={() => setSafetyOpen(true)}\n          aria-label=\"Flag safety event\"\n          style={{ background: \"color-mix(in srgb, var(--gray-0) 8%, transparent)\", color: \"var(--amber-500)\" }}\n        >\n          <Flag size={16} />\n        </Button>\n      </footer>\n\n      {/* Safety event modal */}\n      {safetyOpen && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\" style={{ background: \"color-mix(in srgb, var(--gray-950) 80%, transparent)\", backdropFilter: \"blur(4px)\" }}>\n          <div className=\"w-full max-w-md rounded-2xl p-6\" style={{ background: \"var(--gray-900)\", border: \"1px solid color-mix(in srgb, var(--gray-0) 10%, transparent)\" }}>\n            <div className=\"flex items-start gap-3 mb-4\">\n              <div className=\"w-10 h-10 rounded-full flex items-center justify-center shrink-0\" style={{ background: \"color-mix(in srgb, var(--amber-500) 20%, transparent)\", color: \"var(--amber-500)\" }}>\n                <Flag size={18} strokeWidth={1.8} />\n              </div>\n              <div>\n                <h3 className=\"text-base font-semibold mb-1\" style={{ color: \"var(--gray-50)\" }}>Flag safety event</h3>\n                <p className=\"text-[12px]\" style={{ color: \"color-mix(in srgb, var(--gray-0) 60%, transparent)\" }}>\n                  Clinical responsibility remains with the operating surgeon. Provide guidance as appropriate.\n                </p>\n              </div>\n            </div>\n            <Textarea\n              value={safetyNote}\n              onChange={(e) => setSafetyNote(e.target.value.slice(0, 200))}\n              placeholder=\"Brief description (max 200 chars)…\"\n              rows={3}\n            />\n            <p className=\"text-[10px] mt-1 mb-4\" style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }}>\n              {safetyNote.length} / 200\n            </p>\n            <div className=\"flex justify-end gap-2\">\n              <Button variant=\"outline\" onClick={() => { setSafetyOpen(false); setSafetyNote(\"\"); }}>Cancel</Button>\n              <Button variant=\"brand\" disabled={!safetyNote.trim()} onClick={() => {\n                setSafetyEvents([...safetyEvents, { at: elapsed, note: safetyNote }]);\n                setSafetyOpen(false); setSafetyNote(\"\");\n              }}>\n                <Flag size={11} /> Log event\n              </Button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ParticipantTile({ p, onToggleMic, isMe }: { p: Participant; onToggleMic: () => void; isMe: boolean }) {\n  const meta = ROLE_META[p.role];\n  return (\n    <div className=\"rounded-xl relative overflow-hidden flex items-center justify-center\" style={{ background: \"color-mix(in srgb, var(--gray-0) 5%, transparent)\", border: \"1px solid color-mix(in srgb, var(--gray-0) 8%, transparent)\" }}>\n      <div className=\"w-12 h-12 rounded-full flex items-center justify-center text-[14px] font-semibold\" style={{ background: meta.bg, color: meta.color }}>\n        {p.initials}\n      </div>\n      <div className=\"absolute bottom-2 left-2 right-2 flex items-center justify-between\">\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"text-[11px] font-medium truncate\" style={{ color: \"var(--gray-50)\" }}>\n            {p.name.split(\" \").slice(0, 2).join(\" \")}{isMe && \" (You)\"}\n          </div>\n          <div className=\"text-[9px] truncate\" style={{ color: meta.color }}>{meta.label}</div>\n        </div>\n        <div className=\"flex items-center gap-1 shrink-0\">\n          {p.micOn\n            ? <Mic size={10} style={{ color: \"var(--gray-50)\" }} />\n            : <MicOff size={10} style={{ color: \"color-mix(in srgb, var(--gray-0) 40%, transparent)\" }} />\n          }\n        </div>\n      </div>\n    </div>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/portal-sponsor-billing.json

@@ -0,0 +1,28 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/portal/sponsor/billing/page.tsx",
+  "sha256": "cd72c7698880bb1f2b07fd5f79151e71dc3887ee96bdd020c3cc3b4f9c7893df",
+  "imports": [
+    "lucide-react",
+    "@/components/ui/button",
+    "@/components/ui/card",
+    "@/components/ui/badge",
+    "@/components/ui/table",
+    "@/components/portal/portal-shell",
+    "@/components/portal/empty-state",
+    "@/lib/credits"
+  ],
+  "tokens": [
+    "--color-bg-subtle",
+    "--color-text-muted",
+    "--color-text-secondary"
+  ],
+  "fragments": [
+    {
+      "id": "SponsorBillingPage",
+      "line": 16,
+      "code": "export default function SponsorBillingPage() {\n  return (\n    <PortalShell kind=\"sponsor\">\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            Billing\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            Invoices, receipts, and payment history.\n          </p>\n        </div>\n      </div>\n\n      {INVOICES.length === 0 ? (\n        <EmptyState icon={Receipt} title=\"No invoices yet\" description=\"Your first invoice will appear here after subscription activation.\" />\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)\" }}>Invoice</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Date</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Description</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Amount</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)\" }}>Action</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {INVOICES.map((inv) => (\n                <TableRow key={inv.id}>\n                  <TableCell className=\"px-5 py-3 text-[12px] font-mono\">{inv.id}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px]\">{inv.at}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px]\">{inv.description}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-right tabular-nums font-medium\">{gbp(inv.amount)}</TableCell>\n                  <TableCell className=\"px-5 py-3\"><Badge className=\"text-[10px]\">{inv.status}</Badge></TableCell>\n                  <TableCell className=\"px-5 py-3 text-right\">\n                    <Button variant=\"outline\" size=\"sm\"><Download size={11} /> PDF</Button>\n                  </TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </Card>\n      )}\n    </PortalShell>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport { Receipt, Download } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"@/components/ui/table\";\nimport { PortalShell } from \"@/components/portal/portal-shell\";\nimport { EmptyState } from \"@/components/portal/empty-state\";\nimport { gbp } from \"@/lib/credits\";\n\nconst INVOICES = [\n  { id: \"INV-2026-0124\", at: \"2026-01-15\", description: \"Growth package — annual + platform access\", amount: 39_000, status: \"Paid\" },\n];\n\nexport default function SponsorBillingPage() {\n  return (\n    <PortalShell kind=\"sponsor\">\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            Billing\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            Invoices, receipts, and payment history.\n          </p>\n        </div>\n      </div>\n\n      {INVOICES.length === 0 ? (\n        <EmptyState icon={Receipt} title=\"No invoices yet\" description=\"Your first invoice will appear here after subscription activation.\" />\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)\" }}>Invoice</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Date</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Description</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Amount</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)\" }}>Action</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {INVOICES.map((inv) => (\n                <TableRow key={inv.id}>\n                  <TableCell className=\"px-5 py-3 text-[12px] font-mono\">{inv.id}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px]\">{inv.at}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px]\">{inv.description}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-right tabular-nums font-medium\">{gbp(inv.amount)}</TableCell>\n                  <TableCell className=\"px-5 py-3\"><Badge className=\"text-[10px]\">{inv.status}</Badge></TableCell>\n                  <TableCell className=\"px-5 py-3 text-right\">\n                    <Button variant=\"outline\" size=\"sm\"><Download size={11} /> PDF</Button>\n                  </TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </Card>\n      )}\n    </PortalShell>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/portal-sponsor-profile.json

@@ -0,0 +1,22 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/portal/sponsor/profile/page.tsx",
+  "sha256": "c1c66dc8adbe7832ce5d85a09572215ccd9f354a171ddeccf476f6c19509e06e",
+  "imports": [
+    "react",
+    "@/components/portal/portal-shell",
+    "@/components/portal/profile-form",
+    "@/components/auth/auth-primitives",
+    "@/components/auth/onboarding-primitives",
+    "@/components/ui/input"
+  ],
+  "tokens": [],
+  "fragments": [
+    {
+      "id": "SponsorProfilePage",
+      "line": 24,
+      "code": "export default function SponsorProfilePage() {\n  const [company, setCompany] = useState(\"Olympus Medical UK\");\n  const [industry, setIndustry] = useState(\"medtech\");\n  const [region, setRegion] = useState(\"GB\");\n  const [website, setWebsite] = useState(\"https://olympus.co.uk\");\n  const [billingEmail, setBillingEmail] = useState(\"billing@olympus.co.uk\");\n\n  return (\n    <PortalShell kind=\"sponsor\">\n      <ProfileForm\n        title=\"Profile\"\n        subtitle=\"Update your photo, contact details, company info, and billing email.\"\n        initials=\"HC\"\n        matchingTitle=\"Organisation profile\"\n        matchingDescription=\"This information appears on invoices, audit logs, and analytics shared with your trainees.\"\n        initialFirstName=\"Helen\"\n        initialLastName=\"Chen\"\n        initialEmail=\"h.chen@olympus.co.uk\"\n        fields={\n          <>\n            <Field label=\"Company name\" htmlFor=\"co\">\n              <Input id=\"co\" value={company} onChange={(e) => setCompany(e.target.value)} className=\"h-10\" />\n            </Field>\n            <Field label=\"Industry\" htmlFor=\"ind\">\n              <Select id=\"ind\" value={industry} onChange={setIndustry} options={INDUSTRIES} />\n            </Field>\n            <Field label=\"Region\" htmlFor=\"region\">\n              <Select id=\"region\" value={region} onChange={setRegion} options={REGIONS} />\n            </Field>\n            <Field label=\"Company website\" htmlFor=\"web\" optional>\n              <Input id=\"web\" type=\"url\" value={website} onChange={(e) => setWebsite(e.target.value)} className=\"h-10\" />\n            </Field>\n            <Field label=\"Billing email\" htmlFor=\"be\" hint=\"Invoices and payment receipts go here.\">\n              <Input id=\"be\" type=\"email\" value={billingEmail} onChange={(e) => setBillingEmail(e.target.value)} className=\"h-10\" />\n            </Field>\n          </>\n        }\n      />\n    </PortalShell>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { PortalShell } from \"@/components/portal/portal-shell\";\nimport { ProfileForm } from \"@/components/portal/profile-form\";\nimport { Field } from \"@/components/auth/auth-primitives\";\nimport { Select } from \"@/components/auth/onboarding-primitives\";\nimport { Input } from \"@/components/ui/input\";\n\nconst REGIONS = [\n  { value: \"GB\", label: \"United Kingdom\" },\n  { value: \"EU\", label: \"European Union\" },\n  { value: \"US\", label: \"United States\" },\n  { value: \"APAC\", label: \"Asia-Pacific\" },\n];\n\nconst INDUSTRIES = [\n  { value: \"medtech\", label: \"Medical Device / MedTech\" },\n  { value: \"pharma\",  label: \"Pharmaceutical\" },\n  { value: \"hospital\", label: \"Hospital / Trust\" },\n  { value: \"society\", label: \"Society / Association\" },\n];\n\nexport default function SponsorProfilePage() {\n  const [company, setCompany] = useState(\"Olympus Medical UK\");\n  const [industry, setIndustry] = useState(\"medtech\");\n  const [region, setRegion] = useState(\"GB\");\n  const [website, setWebsite] = useState(\"https://olympus.co.uk\");\n  const [billingEmail, setBillingEmail] = useState(\"billing@olympus.co.uk\");\n\n  return (\n    <PortalShell kind=\"sponsor\">\n      <ProfileForm\n        title=\"Profile\"\n        subtitle=\"Update your photo, contact details, company info, and billing email.\"\n        initials=\"HC\"\n        matchingTitle=\"Organisation profile\"\n        matchingDescription=\"This information appears on invoices, audit logs, and analytics shared with your trainees.\"\n        initialFirstName=\"Helen\"\n        initialLastName=\"Chen\"\n        initialEmail=\"h.chen@olympus.co.uk\"\n        fields={\n          <>\n            <Field label=\"Company name\" htmlFor=\"co\">\n              <Input id=\"co\" value={company} onChange={(e) => setCompany(e.target.value)} className=\"h-10\" />\n            </Field>\n            <Field label=\"Industry\" htmlFor=\"ind\">\n              <Select id=\"ind\" value={industry} onChange={setIndustry} options={INDUSTRIES} />\n            </Field>\n            <Field label=\"Region\" htmlFor=\"region\">\n              <Select id=\"region\" value={region} onChange={setRegion} options={REGIONS} />\n            </Field>\n            <Field label=\"Company website\" htmlFor=\"web\" optional>\n              <Input id=\"web\" type=\"url\" value={website} onChange={(e) => setWebsite(e.target.value)} className=\"h-10\" />\n            </Field>\n            <Field label=\"Billing email\" htmlFor=\"be\" hint=\"Invoices and payment receipts go here.\">\n              <Input id=\"be\" type=\"email\" value={billingEmail} onChange={(e) => setBillingEmail(e.target.value)} className=\"h-10\" />\n            </Field>\n          </>\n        }\n      />\n    </PortalShell>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/portal-sponsor-sessions.json

@@ -0,0 +1,28 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/portal/sponsor/sessions/page.tsx",
+  "sha256": "759bffc829fb7d7ef9b5d6c500b3ca130be2f04420937f5b99461d460da25b07",
+  "imports": [
+    "next/link",
+    "lucide-react",
+    "@/components/ui/button",
+    "@/components/ui/badge",
+    "@/components/ui/card",
+    "@/components/ui/table",
+    "@/components/portal/portal-shell",
+    "@/components/portal/empty-state"
+  ],
+  "tokens": [
+    "--color-bg-subtle",
+    "--color-text-muted",
+    "--color-text-secondary"
+  ],
+  "fragments": [
+    {
+      "id": "SponsorSessionsPage",
+      "line": 18,
+      "code": "export default function SponsorSessionsPage() {\n  return (\n    <PortalShell kind=\"sponsor\">\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            Sessions\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            All mentorship sessions delivered to your sponsored trainees.\n          </p>\n        </div>\n        <Button variant=\"outline\"><Download size={13} /> Export CSV</Button>\n      </div>\n\n      {SESSIONS.length === 0 ? (\n        <EmptyState icon={Calendar} title=\"No sessions yet\" description=\"When your sponsored trainees complete their first mentorship session, it will appear here.\" />\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)\" }}>Date</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\" style={{ color: \"var(--color-text-muted)\" }}>Procedure</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Mentor</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Duration</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)\" }}>Status</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {SESSIONS.map((s) => (\n                <TableRow key={s.id}>\n                  <TableCell className=\"px-5 py-3 text-[12px]\">{s.date}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px] font-medium\">{s.trainee}</TableCell>\n                  <TableCell className=\"px-5 py-3\"><Badge variant=\"outline\" className=\"text-[10px]\">{s.procedure}</Badge></TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px]\">{s.mentor}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px]\" style={{ color: \"var(--color-text-secondary)\" }}>{s.duration}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-right text-[12px] tabular-nums\">{s.credits}</TableCell>\n                  <TableCell className=\"px-5 py-3\"><Badge className=\"text-[10px]\">{s.status}</Badge></TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </Card>\n      )}\n    </PortalShell>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { Calendar, Download } from \"lucide-react\";\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 { PortalShell } from \"@/components/portal/portal-shell\";\nimport { EmptyState } from \"@/components/portal/empty-state\";\n\nconst SESSIONS = [\n  { id: \"ses-2401\", date: \"2026-05-22\", trainee: \"Dr. Hannah Liu\",   procedure: \"ESD\", mentor: \"Prof. Amyn Haji\",    duration: \"2h 45m\", credits: 1, status: \"Closed\" },\n  { id: \"ses-2389\", date: \"2026-05-15\", trainee: \"Dr. Hannah Liu\",   procedure: \"EMR\", mentor: \"Dr. Marie Dubois\",   duration: \"1h 30m\", credits: 1, status: \"Closed\" },\n  { id: \"ses-2360\", date: \"2026-04-22\", trainee: \"Dr. Lila Patel\",   procedure: \"ERCP\", mentor: \"Prof. Amyn Haji\",    duration: \"3h 15m\", credits: 2, status: \"Closed\" },\n];\n\nexport default function SponsorSessionsPage() {\n  return (\n    <PortalShell kind=\"sponsor\">\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            Sessions\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            All mentorship sessions delivered to your sponsored trainees.\n          </p>\n        </div>\n        <Button variant=\"outline\"><Download size={13} /> Export CSV</Button>\n      </div>\n\n      {SESSIONS.length === 0 ? (\n        <EmptyState icon={Calendar} title=\"No sessions yet\" description=\"When your sponsored trainees complete their first mentorship session, it will appear here.\" />\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)\" }}>Date</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\" style={{ color: \"var(--color-text-muted)\" }}>Procedure</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Mentor</TableHead>\n                <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Duration</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)\" }}>Status</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {SESSIONS.map((s) => (\n                <TableRow key={s.id}>\n                  <TableCell className=\"px-5 py-3 text-[12px]\">{s.date}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px] font-medium\">{s.trainee}</TableCell>\n                  <TableCell className=\"px-5 py-3\"><Badge variant=\"outline\" className=\"text-[10px]\">{s.procedure}</Badge></TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px]\">{s.mentor}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-[12px]\" style={{ color: \"var(--color-text-secondary)\" }}>{s.duration}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-right text-[12px] tabular-nums\">{s.credits}</TableCell>\n                  <TableCell className=\"px-5 py-3\"><Badge className=\"text-[10px]\">{s.status}</Badge></TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </Card>\n      )}\n    </PortalShell>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/portal-sponsor-settings.json

@@ -0,0 +1,18 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/portal/sponsor/settings/page.tsx",
+  "sha256": "080805bbbec74e34663141463f9f321276b67b1293db76997240dc27463e27d4",
+  "imports": [
+    "@/components/portal/portal-shell",
+    "@/components/portal/settings-view"
+  ],
+  "tokens": [],
+  "fragments": [
+    {
+      "id": "SponsorSettingsPage",
+      "line": 4,
+      "code": "export default function SponsorSettingsPage() {\n  return (\n    <PortalShell kind=\"sponsor\">\n      <SettingsView\n        kind=\"sponsor\"\n        name=\"Helen Chen\"\n        email=\"h.chen@olympus.co.uk\"\n        id=\"MX-44D8E2\"\n      />\n    </PortalShell>\n  );\n}"
+    }
+  ],
+  "content": "import { PortalShell } from \"@/components/portal/portal-shell\";\nimport { SettingsView } from \"@/components/portal/settings-view\";\n\nexport default function SponsorSettingsPage() {\n  return (\n    <PortalShell kind=\"sponsor\">\n      <SettingsView\n        kind=\"sponsor\"\n        name=\"Helen Chen\"\n        email=\"h.chen@olympus.co.uk\"\n        id=\"MX-44D8E2\"\n      />\n    </PortalShell>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/portal-sponsor-trainees.json

@@ -0,0 +1,36 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/portal/sponsor/trainees/page.tsx",
+  "sha256": "b217a3396233d3961f36fc14aa39506568bcc4bf521cbeacdc954a0f0f725eb2",
+  "imports": [
+    "react",
+    "lucide-react",
+    "@/components/ui/input",
+    "@/components/ui/button",
+    "@/components/ui/badge",
+    "@/components/ui/card",
+    "@/components/ui/table",
+    "@/components/portal/portal-shell",
+    "@/lib/credits-mock"
+  ],
+  "tokens": [
+    "--color-bg-brand-muted",
+    "--color-bg-subtle",
+    "--color-border-default",
+    "--color-status-error-text",
+    "--color-text-brand",
+    "--color-text-muted",
+    "--color-text-primary",
+    "--color-text-secondary",
+    "--red-500",
+    "--teal-500"
+  ],
+  "fragments": [
+    {
+      "id": "SponsorTraineesPage",
+      "line": 13,
+      "code": "export default function SponsorTraineesPage() {\n  const sub = SUBSCRIPTIONS[0];\n  const trainees = ALLOCATIONS_BY_SUB[sub.id] ?? [];\n  const [q, setQ] = useState(\"\");\n\n  const filtered = trainees.filter((t) =>\n    !q ||\n    t.traineeName.toLowerCase().includes(q.toLowerCase()) ||\n    t.institution.toLowerCase().includes(q.toLowerCase())\n  );\n\n  const totals = trainees.reduce((acc, t) => ({\n    allocated: acc.allocated + t.allocated,\n    consumed:  acc.consumed + t.consumed,\n    escrowed:  acc.escrowed + t.escrowed,\n    remaining: acc.remaining + t.remaining,\n  }), { allocated: 0, consumed: 0, escrowed: 0, remaining: 0 });\n\n  return (\n    <PortalShell\n      kind=\"sponsor\"\n      account={{ name: sub.sponsorName, subtitle: sub.primaryContactName, initials: sub.sponsorName.split(\" \").slice(0, 2).map((s) => s[0]).join(\"\") }}\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            Sponsored trainees\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            {trainees.length} trainees · {totals.allocated} credits allocated · {totals.consumed} consumed\n          </p>\n        </div>\n        <Button variant=\"outline\" size=\"default\">\n          <Download size={13} /> Export CSV\n        </Button>\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 trainees, institutions…\" 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)\" }}>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 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Allocated</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>In use</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Consumed</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Remaining</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Usage</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {filtered.length === 0 && (\n              <TableRow>\n                <TableCell colSpan={7} className=\"text-center py-12\" style={{ color: \"var(--color-text-muted)\" }}>\n                  No trainees match \"{q}\".\n                </TableCell>\n              </TableRow>\n            )}\n            {filtered.map((t) => {\n              const pct = t.allocated > 0 ? Math.round(((t.consumed + t.escrowed) / t.allocated) * 100) : 0;\n              return (\n                <TableRow key={t.traineeId}>\n                  <TableCell className=\"px-5 py-3\">\n                    <div className=\"flex items-center gap-3\">\n                      <div className=\"w-8 h-8 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0\" style={{ background: \"var(--color-bg-brand-muted)\", color: \"var(--color-text-brand)\" }}>\n                        {t.traineeName.split(\" \").slice(-2).map((s) => s[0]).join(\"\").slice(0, 2)}\n                      </div>\n                      <div>\n                        <div className=\"font-medium text-[13px]\">{t.traineeName}</div>\n                        <div className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>{t.institution}</div>\n                      </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 text-right tabular-nums\">{t.allocated}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-right tabular-nums\" style={{ color: \"var(--color-text-secondary)\" }}>{t.escrowed}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-right tabular-nums\" style={{ color: \"var(--color-text-secondary)\" }}>{t.consumed}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-right tabular-nums font-medium\" style={{ color: t.remaining === 0 ? \"var(--color-status-error-text)\" : \"var(--color-text-primary)\" }}>\n                    {t.remaining}\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3 w-32\">\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: `${pct}%`, background: pct >= 100 ? \"var(--red-500)\" : \"var(--teal-500)\" }} />\n                      </div>\n                      <span className=\"text-[11px] tabular-nums w-8 text-right\" style={{ color: \"var(--color-text-muted)\" }}>{pct}%</span>\n                    </div>\n                  </TableCell>\n                </TableRow>\n              );\n            })}\n          </TableBody>\n        </Table>\n      </Card>\n    </PortalShell>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Search, Download, X, ArrowRight } from \"lucide-react\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card, CardHeader, CardTitle, CardDescription } from \"@/components/ui/card\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"@/components/ui/table\";\nimport { PortalShell } from \"@/components/portal/portal-shell\";\nimport { ALLOCATIONS_BY_SUB, SUBSCRIPTIONS } from \"@/lib/credits-mock\";\n\nexport default function SponsorTraineesPage() {\n  const sub = SUBSCRIPTIONS[0];\n  const trainees = ALLOCATIONS_BY_SUB[sub.id] ?? [];\n  const [q, setQ] = useState(\"\");\n\n  const filtered = trainees.filter((t) =>\n    !q ||\n    t.traineeName.toLowerCase().includes(q.toLowerCase()) ||\n    t.institution.toLowerCase().includes(q.toLowerCase())\n  );\n\n  const totals = trainees.reduce((acc, t) => ({\n    allocated: acc.allocated + t.allocated,\n    consumed:  acc.consumed + t.consumed,\n    escrowed:  acc.escrowed + t.escrowed,\n    remaining: acc.remaining + t.remaining,\n  }), { allocated: 0, consumed: 0, escrowed: 0, remaining: 0 });\n\n  return (\n    <PortalShell\n      kind=\"sponsor\"\n      account={{ name: sub.sponsorName, subtitle: sub.primaryContactName, initials: sub.sponsorName.split(\" \").slice(0, 2).map((s) => s[0]).join(\"\") }}\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            Sponsored trainees\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            {trainees.length} trainees · {totals.allocated} credits allocated · {totals.consumed} consumed\n          </p>\n        </div>\n        <Button variant=\"outline\" size=\"default\">\n          <Download size={13} /> Export CSV\n        </Button>\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 trainees, institutions…\" 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)\" }}>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 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Allocated</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>In use</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Consumed</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>Remaining</TableHead>\n              <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Usage</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {filtered.length === 0 && (\n              <TableRow>\n                <TableCell colSpan={7} className=\"text-center py-12\" style={{ color: \"var(--color-text-muted)\" }}>\n                  No trainees match \"{q}\".\n                </TableCell>\n              </TableRow>\n            )}\n            {filtered.map((t) => {\n              const pct = t.allocated > 0 ? Math.round(((t.consumed + t.escrowed) / t.allocated) * 100) : 0;\n              return (\n                <TableRow key={t.traineeId}>\n                  <TableCell className=\"px-5 py-3\">\n                    <div className=\"flex items-center gap-3\">\n                      <div className=\"w-8 h-8 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0\" style={{ background: \"var(--color-bg-brand-muted)\", color: \"var(--color-text-brand)\" }}>\n                        {t.traineeName.split(\" \").slice(-2).map((s) => s[0]).join(\"\").slice(0, 2)}\n                      </div>\n                      <div>\n                        <div className=\"font-medium text-[13px]\">{t.traineeName}</div>\n                        <div className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>{t.institution}</div>\n                      </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 text-right tabular-nums\">{t.allocated}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-right tabular-nums\" style={{ color: \"var(--color-text-secondary)\" }}>{t.escrowed}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-right tabular-nums\" style={{ color: \"var(--color-text-secondary)\" }}>{t.consumed}</TableCell>\n                  <TableCell className=\"px-5 py-3 text-right tabular-nums font-medium\" style={{ color: t.remaining === 0 ? \"var(--color-status-error-text)\" : \"var(--color-text-primary)\" }}>\n                    {t.remaining}\n                  </TableCell>\n                  <TableCell className=\"px-5 py-3 w-32\">\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: `${pct}%`, background: pct >= 100 ? \"var(--red-500)\" : \"var(--teal-500)\" }} />\n                      </div>\n                      <span className=\"text-[11px] tabular-nums w-8 text-right\" style={{ color: \"var(--color-text-muted)\" }}>{pct}%</span>\n                    </div>\n                  </TableCell>\n                </TableRow>\n              );\n            })}\n          </TableBody>\n        </Table>\n      </Card>\n    </PortalShell>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/portal-sponsor.json

@@ -0,0 +1,52 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/portal/sponsor/page.tsx",
+  "sha256": "4d31f28f1533c9b8645c6c7e1eb79ad622cd730b8062b7d6e62669b0a4c9ea76",
+  "imports": [
+    "next/link",
+    "lucide-react",
+    "@/components/ui/button",
+    "@/components/ui/badge",
+    "@/components/ui/card",
+    "@/components/ui/separator",
+    "@/components/portal/portal-shell",
+    "@/components/portal/usage-sparkline",
+    "@/components/auth/auth-primitives",
+    "@/lib/credits-mock",
+    "@/lib/credits"
+  ],
+  "tokens": [
+    "--color-bg-brand-muted",
+    "--color-bg-subtle",
+    "--color-border-default",
+    "--color-text-brand",
+    "--color-text-muted",
+    "--color-text-primary",
+    "--color-text-secondary",
+    "--teal-300",
+    "--teal-500"
+  ],
+  "fragments": [
+    {
+      "id": "SponsorOverviewPage",
+      "line": 17,
+      "code": "export default function SponsorOverviewPage() {\n  // Demo: use Olympus subscription\n  const sub = SUBSCRIPTIONS[0];\n  const tier = TIERS[sub.tier];\n  const remaining = creditsRemaining(sub);\n  const util = utilization(sub);\n  const daysLeft = daysFrom(sub.endDate);\n  const lowCredits = remaining / sub.totalCredits <= 0.1;\n\n  return (\n    <PortalShell\n      kind=\"sponsor\"\n      account={{ name: sub.sponsorName, subtitle: sub.primaryContactName, initials: sub.sponsorName.split(\" \").slice(0, 2).map((s) => s[0]).join(\"\") }}\n    >\n      {/* Heading + key actions */}\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            Subscription overview\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            {tier.name} package · expires in {daysLeft} days\n          </p>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"default\">\n            <Download size={13} /> Export report\n          </Button>\n          <Button variant=\"brand\" size=\"default\" render={<Link href=\"#\" />}>\n            Top up credits <ArrowRight size={13} />\n          </Button>\n        </div>\n      </div>\n\n      {/* Low credit warning */}\n      {lowCredits && (\n        <div className=\"mb-5\">\n          <InlineAlert\n            variant=\"warning\"\n            title=\"Running low on credits\"\n            action={<Button variant=\"outline\" size=\"sm\">Contact sales</Button>}\n          >\n            Only {remaining} of {sub.totalCredits} credits remaining. Trainees won't be able to request new sessions once depleted.\n          </InlineAlert>\n        </div>\n      )}\n\n      {/* Subscription summary card */}\n      <Card className=\"mb-6\">\n        <CardHeader>\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <CardTitle className=\"text-base\">{tier.name} subscription</CardTitle>\n              <Badge variant=\"outline\" className=\"capitalize\">{sub.status}</Badge>\n            </div>\n            <span className=\"text-[12px]\" style={{ color: \"var(--color-text-muted)\" }}>\n              Sub ID: <code style={{ color: \"var(--color-text-secondary)\" }}>{sub.id}</code>\n            </span>\n          </div>\n          <CardDescription>\n            {tier.sessions === \"unlimited\" ? \"Unlimited sessions\" : `${tier.sessions} sessions`} · {gbp(tier.perSessionPrice)}/session · annual access fee {gbp(sub.platformAccessFee)}\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent>\n          <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n            <MetricBlock label=\"Purchased\"  value={sub.totalCredits.toString()} sub=\"credits\" />\n            <MetricBlock label=\"Allocated\"  value={sub.creditsAllocated.toString()} sub={`to ${ALLOCATIONS_BY_SUB[sub.id]?.length ?? 0} trainees`} />\n            <MetricBlock label=\"In use\"     value={sub.creditsEscrowed.toString()} sub=\"pending sessions\" />\n            <MetricBlock label=\"Consumed\"   value={sub.creditsConsumed.toString()} sub=\"sessions closed\" />\n          </div>\n\n          <Separator className=\"my-5\" />\n\n          {/* Usage bar */}\n          <div>\n            <div className=\"flex items-center justify-between mb-2\">\n              <span className=\"text-[11px] font-medium uppercase tracking-wide\" style={{ color: \"var(--color-text-muted)\" }}>\n                Utilisation\n              </span>\n              <span className=\"text-[12px] tabular-nums\" style={{ color: \"var(--color-text-secondary)\" }}>\n                {sub.creditsConsumed} / {sub.totalCredits} consumed · {util}%\n              </span>\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            <div className=\"flex items-center gap-4 mt-3 text-[11px]\" style={{ color: \"var(--color-text-secondary)\" }}>\n              <LegendDot color=\"var(--teal-500)\" label=\"Consumed\" />\n              <LegendDot color=\"var(--teal-300)\" label=\"In use\" />\n              <LegendDot color=\"color-mix(in srgb, var(--teal-500) 25%, transparent)\" label=\"Allocated, unused\" />\n              <LegendDot color=\"var(--color-border-default)\" label={`Remaining (${remaining})`} />\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Trend chart + tier details */}\n      <div className=\"grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6 mb-6\">\n        <Card>\n          <CardHeader>\n            <div className=\"flex items-center justify-between\">\n              <CardTitle className=\"text-base flex items-center gap-2\">\n                <TrendingUp size={15} strokeWidth={1.7} /> Consumption trend\n              </CardTitle>\n              <Badge variant=\"ghost\" className=\"text-[10px]\">8 months</Badge>\n            </div>\n            <CardDescription>Cumulative credits consumed since subscription start.</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <UsageSparkline data={CONSUMPTION_HISTORY[sub.id] ?? []} max={sub.totalCredits} />\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-base flex items-center gap-2\">\n              <CalendarIcon size={15} strokeWidth={1.7} /> Subscription details\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <dl className=\"space-y-3 text-[12px]\">\n              <Row label=\"Tier\" value={tier.name} />\n              <Row label=\"Start\" value={sub.startDate} />\n              <Row label=\"End\" value={`${sub.endDate} (${daysLeft}d left)`} />\n              <Row label=\"Package fee\" value={gbp(sub.packageFee)} />\n              <Row label=\"Access fee\" value={gbp(sub.platformAccessFee)} />\n              <Row label=\"Total billed\" value={gbp(sub.packageFee + sub.platformAccessFee)} />\n            </dl>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Allocations preview */}\n      <Card>\n        <CardHeader>\n          <div className=\"flex items-center justify-between\">\n            <div>\n              <CardTitle className=\"text-base\">Allocations</CardTitle>\n              <CardDescription>{(ALLOCATIONS_BY_SUB[sub.id] ?? []).length} sponsored trainees</CardDescription>\n            </div>\n            <Button variant=\"outline\" size=\"sm\" render={<Link href=\"/portal/sponsor/trainees\" />}>\n              View all <ArrowRight size={11} />\n            </Button>\n          </div>\n        </CardHeader>\n        <CardContent>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n            {(ALLOCATIONS_BY_SUB[sub.id] ?? []).slice(0, 4).map((a) => (\n              <Link\n                key={a.traineeId}\n                href={`/portal/sponsor/trainees`}\n                className=\"rounded-xl border p-3 flex items-center gap-3 transition-colors hover:bg-[var(--color-bg-subtle)]\"\n                style={{ borderColor: \"var(--color-border-default)\" }}\n              >\n                <div className=\"w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0\" style={{ background: \"var(--color-bg-brand-muted)\", color: \"var(--color-text-brand)\" }}>\n                  {a.traineeName.split(\" \").slice(-2).map((s) => s[0]).join(\"\").slice(0, 2)}\n                </div>\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"text-[13px] font-medium truncate\">{a.traineeName}</div>\n                  <div className=\"text-[11px] truncate\" style={{ color: \"var(--color-text-muted)\" }}>{a.institution}</div>\n                </div>\n                <div className=\"text-right shrink-0\">\n                  <div className=\"text-[12px] font-medium tabular-nums\">{a.remaining} / {a.allocated}</div>\n                  <div className=\"text-[10px]\" style={{ color: \"var(--color-text-muted)\" }}>credits left</div>\n                </div>\n              </Link>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n    </PortalShell>\n  );\n}"
+    },
+    {
+      "id": "MetricBlock",
+      "line": 196,
+      "code": "function MetricBlock({ label, value, sub }: { label: string; value: string; sub: 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-3xl font-semibold tabular-nums\" style={{ letterSpacing: \"-0.02em\" }}>{value}</div>\n      <div className=\"text-[11px] mt-0.5\" style={{ color: \"var(--color-text-muted)\" }}>{sub}</div>\n    </div>\n  );\n}"
+    },
+    {
+      "id": "LegendDot",
+      "line": 206,
+      "code": "function LegendDot({ color, label }: { color: string; label: string }) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5\">\n      <span className=\"w-2 h-2 rounded-full\" style={{ background: color }} />\n      {label}\n    </span>\n  );\n}"
+    },
+    {
+      "id": "Row",
+      "line": 215,
+      "code": "function Row({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex items-center justify-between\">\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 { ArrowRight, Coins, Download, AlertCircle, Calendar as CalendarIcon, TrendingUp } 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 { PortalShell } from \"@/components/portal/portal-shell\";\nimport { UsageSparkline } from \"@/components/portal/usage-sparkline\";\nimport { InlineAlert } from \"@/components/auth/auth-primitives\";\nimport {\n  SUBSCRIPTIONS, ALLOCATIONS_BY_SUB, CONSUMPTION_HISTORY,\n} from \"@/lib/credits-mock\";\nimport { TIERS, creditsRemaining, utilization, gbp, daysFrom } from \"@/lib/credits\";\n\nexport default function SponsorOverviewPage() {\n  // Demo: use Olympus subscription\n  const sub = SUBSCRIPTIONS[0];\n  const tier = TIERS[sub.tier];\n  const remaining = creditsRemaining(sub);\n  const util = utilization(sub);\n  const daysLeft = daysFrom(sub.endDate);\n  const lowCredits = remaining / sub.totalCredits <= 0.1;\n\n  return (\n    <PortalShell\n      kind=\"sponsor\"\n      account={{ name: sub.sponsorName, subtitle: sub.primaryContactName, initials: sub.sponsorName.split(\" \").slice(0, 2).map((s) => s[0]).join(\"\") }}\n    >\n      {/* Heading + key actions */}\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            Subscription overview\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            {tier.name} package · expires in {daysLeft} days\n          </p>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"default\">\n            <Download size={13} /> Export report\n          </Button>\n          <Button variant=\"brand\" size=\"default\" render={<Link href=\"#\" />}>\n            Top up credits <ArrowRight size={13} />\n          </Button>\n        </div>\n      </div>\n\n      {/* Low credit warning */}\n      {lowCredits && (\n        <div className=\"mb-5\">\n          <InlineAlert\n            variant=\"warning\"\n            title=\"Running low on credits\"\n            action={<Button variant=\"outline\" size=\"sm\">Contact sales</Button>}\n          >\n            Only {remaining} of {sub.totalCredits} credits remaining. Trainees won't be able to request new sessions once depleted.\n          </InlineAlert>\n        </div>\n      )}\n\n      {/* Subscription summary card */}\n      <Card className=\"mb-6\">\n        <CardHeader>\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <CardTitle className=\"text-base\">{tier.name} subscription</CardTitle>\n              <Badge variant=\"outline\" className=\"capitalize\">{sub.status}</Badge>\n            </div>\n            <span className=\"text-[12px]\" style={{ color: \"var(--color-text-muted)\" }}>\n              Sub ID: <code style={{ color: \"var(--color-text-secondary)\" }}>{sub.id}</code>\n            </span>\n          </div>\n          <CardDescription>\n            {tier.sessions === \"unlimited\" ? \"Unlimited sessions\" : `${tier.sessions} sessions`} · {gbp(tier.perSessionPrice)}/session · annual access fee {gbp(sub.platformAccessFee)}\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent>\n          <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n            <MetricBlock label=\"Purchased\"  value={sub.totalCredits.toString()} sub=\"credits\" />\n            <MetricBlock label=\"Allocated\"  value={sub.creditsAllocated.toString()} sub={`to ${ALLOCATIONS_BY_SUB[sub.id]?.length ?? 0} trainees`} />\n            <MetricBlock label=\"In use\"     value={sub.creditsEscrowed.toString()} sub=\"pending sessions\" />\n            <MetricBlock label=\"Consumed\"   value={sub.creditsConsumed.toString()} sub=\"sessions closed\" />\n          </div>\n\n          <Separator className=\"my-5\" />\n\n          {/* Usage bar */}\n          <div>\n            <div className=\"flex items-center justify-between mb-2\">\n              <span className=\"text-[11px] font-medium uppercase tracking-wide\" style={{ color: \"var(--color-text-muted)\" }}>\n                Utilisation\n              </span>\n              <span className=\"text-[12px] tabular-nums\" style={{ color: \"var(--color-text-secondary)\" }}>\n                {sub.creditsConsumed} / {sub.totalCredits} consumed · {util}%\n              </span>\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            <div className=\"flex items-center gap-4 mt-3 text-[11px]\" style={{ color: \"var(--color-text-secondary)\" }}>\n              <LegendDot color=\"var(--teal-500)\" label=\"Consumed\" />\n              <LegendDot color=\"var(--teal-300)\" label=\"In use\" />\n              <LegendDot color=\"color-mix(in srgb, var(--teal-500) 25%, transparent)\" label=\"Allocated, unused\" />\n              <LegendDot color=\"var(--color-border-default)\" label={`Remaining (${remaining})`} />\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Trend chart + tier details */}\n      <div className=\"grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6 mb-6\">\n        <Card>\n          <CardHeader>\n            <div className=\"flex items-center justify-between\">\n              <CardTitle className=\"text-base flex items-center gap-2\">\n                <TrendingUp size={15} strokeWidth={1.7} /> Consumption trend\n              </CardTitle>\n              <Badge variant=\"ghost\" className=\"text-[10px]\">8 months</Badge>\n            </div>\n            <CardDescription>Cumulative credits consumed since subscription start.</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <UsageSparkline data={CONSUMPTION_HISTORY[sub.id] ?? []} max={sub.totalCredits} />\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-base flex items-center gap-2\">\n              <CalendarIcon size={15} strokeWidth={1.7} /> Subscription details\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <dl className=\"space-y-3 text-[12px]\">\n              <Row label=\"Tier\" value={tier.name} />\n              <Row label=\"Start\" value={sub.startDate} />\n              <Row label=\"End\" value={`${sub.endDate} (${daysLeft}d left)`} />\n              <Row label=\"Package fee\" value={gbp(sub.packageFee)} />\n              <Row label=\"Access fee\" value={gbp(sub.platformAccessFee)} />\n              <Row label=\"Total billed\" value={gbp(sub.packageFee + sub.platformAccessFee)} />\n            </dl>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Allocations preview */}\n      <Card>\n        <CardHeader>\n          <div className=\"flex items-center justify-between\">\n            <div>\n              <CardTitle className=\"text-base\">Allocations</CardTitle>\n              <CardDescription>{(ALLOCATIONS_BY_SUB[sub.id] ?? []).length} sponsored trainees</CardDescription>\n            </div>\n            <Button variant=\"outline\" size=\"sm\" render={<Link href=\"/portal/sponsor/trainees\" />}>\n              View all <ArrowRight size={11} />\n            </Button>\n          </div>\n        </CardHeader>\n        <CardContent>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n            {(ALLOCATIONS_BY_SUB[sub.id] ?? []).slice(0, 4).map((a) => (\n              <Link\n                key={a.traineeId}\n                href={`/portal/sponsor/trainees`}\n                className=\"rounded-xl border p-3 flex items-center gap-3 transition-colors hover:bg-[var(--color-bg-subtle)]\"\n                style={{ borderColor: \"var(--color-border-default)\" }}\n              >\n                <div className=\"w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0\" style={{ background: \"var(--color-bg-brand-muted)\", color: \"var(--color-text-brand)\" }}>\n                  {a.traineeName.split(\" \").slice(-2).map((s) => s[0]).join(\"\").slice(0, 2)}\n                </div>\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"text-[13px] font-medium truncate\">{a.traineeName}</div>\n                  <div className=\"text-[11px] truncate\" style={{ color: \"var(--color-text-muted)\" }}>{a.institution}</div>\n                </div>\n                <div className=\"text-right shrink-0\">\n                  <div className=\"text-[12px] font-medium tabular-nums\">{a.remaining} / {a.allocated}</div>\n                  <div className=\"text-[10px]\" style={{ color: \"var(--color-text-muted)\" }}>credits left</div>\n                </div>\n              </Link>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n    </PortalShell>\n  );\n}\n\n/* ─── Sub-components ─────────────────────────────────────────────────────── */\n\nfunction MetricBlock({ label, value, sub }: { label: string; value: string; sub: 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-3xl font-semibold tabular-nums\" style={{ letterSpacing: \"-0.02em\" }}>{value}</div>\n      <div className=\"text-[11px] mt-0.5\" style={{ color: \"var(--color-text-muted)\" }}>{sub}</div>\n    </div>\n  );\n}\n\nfunction LegendDot({ color, label }: { color: string; label: string }) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5\">\n      <span className=\"w-2 h-2 rounded-full\" style={{ background: color }} />\n      {label}\n    </span>\n  );\n}\n\nfunction Row({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex items-center justify-between\">\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/portal-trainee-competency.json

@@ -0,0 +1,42 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/portal/trainee/competency/page.tsx",
+  "sha256": "3ef8296ff91edcf514c30e72b2816f28bea561691c229ae5101683c6552662b0",
+  "imports": [
+    "next/link",
+    "react",
+    "lucide-react",
+    "@/components/ui/button",
+    "@/components/ui/badge",
+    "@/components/ui/card",
+    "@/components/ui/tabs",
+    "@/components/ui/table",
+    "@/components/portal/portal-shell",
+    "@/components/portal/usage-sparkline",
+    "@/lib/sessions-mock",
+    "@/lib/sessions"
+  ],
+  "tokens": [
+    "--color-bg-brand-muted",
+    "--color-bg-subtle",
+    "--color-border-default",
+    "--color-text-brand",
+    "--color-text-muted",
+    "--color-text-primary",
+    "--color-text-secondary",
+    "--teal-500"
+  ],
+  "fragments": [
+    {
+      "id": "CompetencyPage",
+      "line": 32,
+      "code": "export default function CompetencyPage() {\n  const log = COMPETENCY_LOG.filter((c) => c.procedure === \"ESD\");\n  const allLog = COMPETENCY_LOG;\n\n  const avg = log.length > 0\n    ? log.reduce((a, c) => a + (c.grs.technical_skill + c.grs.procedural_strategy + c.grs.knowledge + c.grs.communication + c.grs.professionalism) / 5, 0) / log.length\n    : 0;\n\n  // Build sparkline data — chronological\n  const sorted = [...log].sort((a, b) => a.date.localeCompare(b.date));\n  const sparkData = sorted.map((c, i) => ({\n    month: `S${i + 1}`,\n    cumulative: (c.grs.technical_skill + c.grs.procedural_strategy + c.grs.knowledge + c.grs.communication + c.grs.professionalism) / 5,\n  }));\n\n  return (\n    <PortalShell kind=\"trainee\" account={{ name: \"Dr. Hannah Liu\", subtitle: \"ST5 · Gastroenterology\", initials: \"HL\" }}>\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            My competency record\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            {allLog.length} sessions completed · longitudinal skill progression\n          </p>\n        </div>\n        <Button variant=\"outline\">\n          <Download size={13} /> Export PDF for institution\n        </Button>\n      </div>\n\n      {/* Top stats */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-4 gap-3 mb-6\">\n        <StatCard icon={<Activity size={16} strokeWidth={1.7} />} label=\"Sessions\" value={allLog.length.toString()} sub=\"across all procedures\" />\n        <StatCard icon={<Star size={16} strokeWidth={1.7} />} label=\"Avg GRS (ESD)\" value={avg.toFixed(1)} sub=\"out of 5\" />\n        <StatCard icon={<TrendingUp size={16} strokeWidth={1.7} />} label=\"Current entrustment\" value=\"Supervision\" sub=\"advanced 2 days ago\" />\n        <StatCard icon={<Award size={16} strokeWidth={1.7} />} label=\"Milestones\" value={`${MILESTONES.filter((m) => m.achieved).length} / ${MILESTONES.length}`} sub=\"achieved\" />\n      </div>\n\n      <Tabs defaultValue=\"caselog\">\n        <TabsList>\n          <TabsTrigger value=\"caselog\">Case log</TabsTrigger>\n          <TabsTrigger value=\"trends\">Skill trends</TabsTrigger>\n          <TabsTrigger value=\"milestones\">Milestones</TabsTrigger>\n        </TabsList>\n\n        <TabsContent value=\"caselog\">\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)\" }}>Date</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Procedure</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Mentor</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Complexity</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>GRS</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Entrustment</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {[...allLog].sort((a, b) => b.date.localeCompare(a.date)).map((c) => {\n                  const avg = (c.grs.technical_skill + c.grs.procedural_strategy + c.grs.knowledge + c.grs.communication + c.grs.professionalism) / 5;\n                  return (\n                    <TableRow key={c.sessionId}>\n                      <TableCell className=\"px-5 py-3 text-[12px]\">{c.date}</TableCell>\n                      <TableCell className=\"px-5 py-3\">\n                        <Badge variant=\"outline\">{c.procedure}</Badge>\n                      </TableCell>\n                      <TableCell className=\"px-5 py-3 text-[12px]\">{c.mentor}</TableCell>\n                      <TableCell className=\"px-5 py-3 text-[12px]\" style={{ color: \"var(--color-text-secondary)\" }}>{c.complexity}</TableCell>\n                      <TableCell className=\"px-5 py-3 text-right tabular-nums font-medium\">{avg.toFixed(1)}</TableCell>\n                      <TableCell className=\"px-5 py-3\">\n                        <Badge variant={ENTRUSTMENT_VARIANT[c.entrustment]} className=\"text-[10px]\">\n                          {ENTRUSTMENT_LABEL[c.entrustment]}\n                        </Badge>\n                      </TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </Card>\n        </TabsContent>\n\n        <TabsContent value=\"trends\">\n          <div className=\"grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-4\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-base\">ESD skill progression</CardTitle>\n                <CardDescription>Average Global Rating Scale across {log.length} sessions.</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <UsageSparkline data={sparkData} max={5} />\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-base\">Per-domain average</CardTitle>\n                <CardDescription>Identify your strengths and growth areas.</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <div className=\"space-y-3\">\n                  {GRS_DOMAINS.map((d) => {\n                    const domainAvg = log.reduce((a, c) => a + c.grs[d.key], 0) / Math.max(log.length, 1);\n                    const pct = (domainAvg / 5) * 100;\n                    return (\n                      <div key={d.key}>\n                        <div className=\"flex items-center justify-between mb-1.5\">\n                          <span className=\"text-[12px]\">{d.label}</span>\n                          <span className=\"text-[12px] tabular-nums font-medium\">{domainAvg.toFixed(1)}</span>\n                        </div>\n                        <div className=\"h-1.5 rounded-full overflow-hidden\" style={{ background: \"var(--color-border-default)\" }}>\n                          <div className=\"h-full\" style={{ width: `${pct}%`, background: \"var(--teal-500)\" }} />\n                        </div>\n                      </div>\n                    );\n                  })}\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </TabsContent>\n\n        <TabsContent value=\"milestones\">\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            {MILESTONES.map((m) => {\n              const Icon = m.icon;\n              return (\n                <Card key={m.id}>\n                  <CardContent className=\"pt-4 flex items-center gap-4\">\n                    <div className=\"w-12 h-12 rounded-xl flex items-center justify-center shrink-0\" style={{\n                      background: m.achieved ? \"var(--color-bg-brand-muted)\" : \"var(--color-bg-subtle)\",\n                      color: m.achieved ? \"var(--color-text-brand)\" : \"var(--color-text-muted)\",\n                    }}>\n                      <Icon size={22} strokeWidth={1.5} />\n                    </div>\n                    <div className=\"flex-1\">\n                      <div className=\"text-[13px] font-semibold mb-0.5\" style={{ color: m.achieved ? \"var(--color-text-primary)\" : \"var(--color-text-secondary)\" }}>{m.title}</div>\n                      <div className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>\n                        {m.achieved ? `Achieved ${m.date}` : m.hint}\n                      </div>\n                    </div>\n                    {m.achieved && <Badge>Earned</Badge>}\n                  </CardContent>\n                </Card>\n              );\n            })}\n          </div>\n        </TabsContent>\n      </Tabs>\n    </PortalShell>\n  );\n}"
+    },
+    {
+      "id": "StatCard",
+      "line": 187,
+      "code": "function StatCard({ icon, label, value, sub }: { icon: React.ReactNode; label: string; value: string; sub: string }) {\n  return (\n    <Card>\n      <CardContent className=\"pt-4 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          {icon}\n        </div>\n        <div className=\"min-w-0\">\n          <div className=\"text-[10px] font-medium uppercase tracking-wide\" style={{ color: \"var(--color-text-muted)\" }}>{label}</div>\n          <div className=\"text-[20px] font-semibold tabular-nums truncate\" style={{ letterSpacing: \"-0.02em\" }}>{value}</div>\n          <div className=\"text-[10px] truncate\" style={{ color: \"var(--color-text-muted)\" }}>{sub}</div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { useState } from \"react\";\nimport {\n  Download, ArrowRight, Trophy, TrendingUp, Star, ChevronDown, Award, Sparkles, Activity,\n} 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 { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"@/components/ui/table\";\nimport { PortalShell } from \"@/components/portal/portal-shell\";\nimport { UsageSparkline } from \"@/components/portal/usage-sparkline\";\nimport { COMPETENCY_LOG } from \"@/lib/sessions-mock\";\nimport { ENTRUSTMENT_LABEL, GRS_DOMAINS, type EntrustmentLevel } from \"@/lib/sessions\";\n\nconst ENTRUSTMENT_VARIANT: Record<EntrustmentLevel, \"default\" | \"secondary\" | \"outline\" | \"ghost\"> = {\n  observation_only:  \"outline\",\n  active_assistance: \"outline\",\n  supervision:       \"secondary\",\n  independent:       \"default\",\n};\n\nconst MILESTONES = [\n  { id: \"first\",  icon: Sparkles, title: \"First Mentored ESD\",     achieved: true, date: \"2026-04-22\" },\n  { id: \"5\",      icon: Award,    title: \"5 Sessions Completed\",   achieved: false, hint: \"4 of 5\" },\n  { id: \"supe\",   icon: TrendingUp, title: \"Progressed to Supervision\", achieved: true, date: \"2026-05-22\" },\n  { id: \"indep\",  icon: Trophy,   title: \"Safe for Independent Practice\", achieved: false, hint: \"Reach Independent level\" },\n];\n\nexport default function CompetencyPage() {\n  const log = COMPETENCY_LOG.filter((c) => c.procedure === \"ESD\");\n  const allLog = COMPETENCY_LOG;\n\n  const avg = log.length > 0\n    ? log.reduce((a, c) => a + (c.grs.technical_skill + c.grs.procedural_strategy + c.grs.knowledge + c.grs.communication + c.grs.professionalism) / 5, 0) / log.length\n    : 0;\n\n  // Build sparkline data — chronological\n  const sorted = [...log].sort((a, b) => a.date.localeCompare(b.date));\n  const sparkData = sorted.map((c, i) => ({\n    month: `S${i + 1}`,\n    cumulative: (c.grs.technical_skill + c.grs.procedural_strategy + c.grs.knowledge + c.grs.communication + c.grs.professionalism) / 5,\n  }));\n\n  return (\n    <PortalShell kind=\"trainee\" account={{ name: \"Dr. Hannah Liu\", subtitle: \"ST5 · Gastroenterology\", initials: \"HL\" }}>\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            My competency record\n          </h1>\n          <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n            {allLog.length} sessions completed · longitudinal skill progression\n          </p>\n        </div>\n        <Button variant=\"outline\">\n          <Download size={13} /> Export PDF for institution\n        </Button>\n      </div>\n\n      {/* Top stats */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-4 gap-3 mb-6\">\n        <StatCard icon={<Activity size={16} strokeWidth={1.7} />} label=\"Sessions\" value={allLog.length.toString()} sub=\"across all procedures\" />\n        <StatCard icon={<Star size={16} strokeWidth={1.7} />} label=\"Avg GRS (ESD)\" value={avg.toFixed(1)} sub=\"out of 5\" />\n        <StatCard icon={<TrendingUp size={16} strokeWidth={1.7} />} label=\"Current entrustment\" value=\"Supervision\" sub=\"advanced 2 days ago\" />\n        <StatCard icon={<Award size={16} strokeWidth={1.7} />} label=\"Milestones\" value={`${MILESTONES.filter((m) => m.achieved).length} / ${MILESTONES.length}`} sub=\"achieved\" />\n      </div>\n\n      <Tabs defaultValue=\"caselog\">\n        <TabsList>\n          <TabsTrigger value=\"caselog\">Case log</TabsTrigger>\n          <TabsTrigger value=\"trends\">Skill trends</TabsTrigger>\n          <TabsTrigger value=\"milestones\">Milestones</TabsTrigger>\n        </TabsList>\n\n        <TabsContent value=\"caselog\">\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)\" }}>Date</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Procedure</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Mentor</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Complexity</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5 text-right\" style={{ color: \"var(--color-text-muted)\" }}>GRS</TableHead>\n                  <TableHead className=\"text-[10px] font-semibold uppercase tracking-wider px-5\" style={{ color: \"var(--color-text-muted)\" }}>Entrustment</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {[...allLog].sort((a, b) => b.date.localeCompare(a.date)).map((c) => {\n                  const avg = (c.grs.technical_skill + c.grs.procedural_strategy + c.grs.knowledge + c.grs.communication + c.grs.professionalism) / 5;\n                  return (\n                    <TableRow key={c.sessionId}>\n                      <TableCell className=\"px-5 py-3 text-[12px]\">{c.date}</TableCell>\n                      <TableCell className=\"px-5 py-3\">\n                        <Badge variant=\"outline\">{c.procedure}</Badge>\n                      </TableCell>\n                      <TableCell className=\"px-5 py-3 text-[12px]\">{c.mentor}</TableCell>\n                      <TableCell className=\"px-5 py-3 text-[12px]\" style={{ color: \"var(--color-text-secondary)\" }}>{c.complexity}</TableCell>\n                      <TableCell className=\"px-5 py-3 text-right tabular-nums font-medium\">{avg.toFixed(1)}</TableCell>\n                      <TableCell className=\"px-5 py-3\">\n                        <Badge variant={ENTRUSTMENT_VARIANT[c.entrustment]} className=\"text-[10px]\">\n                          {ENTRUSTMENT_LABEL[c.entrustment]}\n                        </Badge>\n                      </TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </Card>\n        </TabsContent>\n\n        <TabsContent value=\"trends\">\n          <div className=\"grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-4\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-base\">ESD skill progression</CardTitle>\n                <CardDescription>Average Global Rating Scale across {log.length} sessions.</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <UsageSparkline data={sparkData} max={5} />\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-base\">Per-domain average</CardTitle>\n                <CardDescription>Identify your strengths and growth areas.</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <div className=\"space-y-3\">\n                  {GRS_DOMAINS.map((d) => {\n                    const domainAvg = log.reduce((a, c) => a + c.grs[d.key], 0) / Math.max(log.length, 1);\n                    const pct = (domainAvg / 5) * 100;\n                    return (\n                      <div key={d.key}>\n                        <div className=\"flex items-center justify-between mb-1.5\">\n                          <span className=\"text-[12px]\">{d.label}</span>\n                          <span className=\"text-[12px] tabular-nums font-medium\">{domainAvg.toFixed(1)}</span>\n                        </div>\n                        <div className=\"h-1.5 rounded-full overflow-hidden\" style={{ background: \"var(--color-border-default)\" }}>\n                          <div className=\"h-full\" style={{ width: `${pct}%`, background: \"var(--teal-500)\" }} />\n                        </div>\n                      </div>\n                    );\n                  })}\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </TabsContent>\n\n        <TabsContent value=\"milestones\">\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            {MILESTONES.map((m) => {\n              const Icon = m.icon;\n              return (\n                <Card key={m.id}>\n                  <CardContent className=\"pt-4 flex items-center gap-4\">\n                    <div className=\"w-12 h-12 rounded-xl flex items-center justify-center shrink-0\" style={{\n                      background: m.achieved ? \"var(--color-bg-brand-muted)\" : \"var(--color-bg-subtle)\",\n                      color: m.achieved ? \"var(--color-text-brand)\" : \"var(--color-text-muted)\",\n                    }}>\n                      <Icon size={22} strokeWidth={1.5} />\n                    </div>\n                    <div className=\"flex-1\">\n                      <div className=\"text-[13px] font-semibold mb-0.5\" style={{ color: m.achieved ? \"var(--color-text-primary)\" : \"var(--color-text-secondary)\" }}>{m.title}</div>\n                      <div className=\"text-[11px]\" style={{ color: \"var(--color-text-muted)\" }}>\n                        {m.achieved ? `Achieved ${m.date}` : m.hint}\n                      </div>\n                    </div>\n                    {m.achieved && <Badge>Earned</Badge>}\n                  </CardContent>\n                </Card>\n              );\n            })}\n          </div>\n        </TabsContent>\n      </Tabs>\n    </PortalShell>\n  );\n}\n\nfunction StatCard({ icon, label, value, sub }: { icon: React.ReactNode; label: string; value: string; sub: string }) {\n  return (\n    <Card>\n      <CardContent className=\"pt-4 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          {icon}\n        </div>\n        <div className=\"min-w-0\">\n          <div className=\"text-[10px] font-medium uppercase tracking-wide\" style={{ color: \"var(--color-text-muted)\" }}>{label}</div>\n          <div className=\"text-[20px] font-semibold tabular-nums truncate\" style={{ letterSpacing: \"-0.02em\" }}>{value}</div>\n          <div className=\"text-[10px] truncate\" style={{ color: \"var(--color-text-muted)\" }}>{sub}</div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n"
+}