{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "subpoena-legal-hold-manager",
  "title": "Subpoena Legal Hold Manager",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/subpoena-legal-hold-manager/SubpoenaLegalHoldManager.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  AlertTriangle,\n  BadgeCheck,\n  Calendar,\n  CalendarClock,\n  Check,\n  CheckCircle2,\n  Clock,\n  Copy,\n  Download,\n  FileCheck,\n  FileSpreadsheet,\n  Info,\n  Lock,\n  Mail,\n  MoreHorizontal,\n  Plus,\n  RefreshCw,\n  RotateCcw,\n  Scale,\n  Search,\n  Send,\n  Server,\n  Share2,\n  Shield,\n  ShieldCheck,\n  Users,\n  UserX,\n  X,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface CustodianRecord {\n  id: string\n  name: string\n  role: string\n  department: string\n  departmentCategory: 'engineering' | 'product' | 'operations'\n  email: string\n  avatarInitials: string\n  noticeSentDate: string\n  acknowledgedDate: string\n  status: 'acknowledged' | 'pending' | 're-certified'\n  statusLabel: string\n  sha256Signature: string\n  ipAddress: string\n  dataSources: string[]\n  preservedAssets: string\n}\n\nexport interface PreservationSystem {\n  id: string\n  name: string\n  integrationType: string\n  status: 'active' | 'warning' | 'synced'\n  statusLabel: string\n  scope: string\n  lockProtocol: string\n  lastSync: string\n  iconName: 'slack' | 'aws' | 'google' | 'github'\n}\n\nexport interface SubpoenaLegalHoldManagerProps {\n  className?: string\n  defaultFilter?: string\n}\n\nconst custodiansData: CustodianRecord[] = [\n  {\n    id: 'CUST-8801',\n    name: 'Marcus Vance',\n    role: 'VP of Engineering',\n    department: 'Engineering & Architecture',\n    departmentCategory: 'engineering',\n    email: 'marcus.vance@uipkge.internal',\n    avatarInitials: 'MV',\n    noticeSentDate: 'Aug 14, 2026',\n    acknowledgedDate: 'Aug 15, 2026 · 09:12 PST',\n    status: 'acknowledged',\n    statusLabel: 'Acknowledged & Compliant',\n    sha256Signature: '4f8a9e62b11d87e0fa1943892c55b38d019f2a4e87dc261904a8b71239c0812e',\n    ipAddress: '198.51.100.42 (Corp Gateway)',\n    dataSources: ['Google Workspace', 'Slack Channels', 'GitHub PRs', 'Local Drive'],\n    preservedAssets: '1,420 Commits · 84 Channels · 3.2 GB Mail',\n  },\n  {\n    id: 'CUST-8802',\n    name: 'Elena Rostova',\n    role: 'VP of Product',\n    department: 'Product & Design',\n    departmentCategory: 'product',\n    email: 'elena.rostova@uipkge.internal',\n    avatarInitials: 'ER',\n    noticeSentDate: 'Aug 14, 2026',\n    acknowledgedDate: 'Aug 15, 2026 · 10:45 PST',\n    status: 'acknowledged',\n    statusLabel: 'Acknowledged & Compliant',\n    sha256Signature: '8b3c1d9a7402ef1904a8b71239c0812e4f8a9e62b11d87e0fa1943892c55b38d',\n    ipAddress: '198.51.100.58 (Corp Gateway)',\n    dataSources: ['Google Workspace', 'Notion', 'Slack Channels', 'Jira'],\n    preservedAssets: '312 PRDs · 62 Channels · 1.8 GB Mail',\n  },\n  {\n    id: 'CUST-8803',\n    name: 'David Chen',\n    role: 'VP of Operations',\n    department: 'Operations & Legal',\n    departmentCategory: 'operations',\n    email: 'david.chen@uipkge.internal',\n    avatarInitials: 'DC',\n    noticeSentDate: 'Aug 14, 2026',\n    acknowledgedDate: 'Aug 15, 2026 · 11:20 PST',\n    status: 'acknowledged',\n    statusLabel: 'Acknowledged & Compliant',\n    sha256Signature: '1a9e7f3c82904a8b71239c0812e4f8a9e62b11d87e0fa1943892c55b38d8b3c1',\n    ipAddress: '198.51.100.19 (Corp Gateway)',\n    dataSources: ['Google Workspace', 'Box Drive', 'Slack Channels', 'Salesforce'],\n    preservedAssets: '94 Vendor Contracts · 48 Channels · 4.1 GB Mail',\n  },\n  {\n    id: 'CUST-8804',\n    name: 'Alex Rivera',\n    role: 'Lead Architect',\n    department: 'Engineering & Architecture',\n    departmentCategory: 'engineering',\n    email: 'alex.rivera@uipkge.internal',\n    avatarInitials: 'AR',\n    noticeSentDate: 'Aug 14, 2026',\n    acknowledgedDate: 'Aug 16, 2026 · 08:30 PST',\n    status: 'acknowledged',\n    statusLabel: 'Acknowledged & Compliant',\n    sha256Signature: '7e2d5c0b912e4f8a9e62b11d87e0fa1943892c55b38d8b3c1d9a7402ef1904a8',\n    ipAddress: '198.51.100.73 (Corp Gateway)',\n    dataSources: ['Google Workspace', 'GitHub Repos', 'Figma Files', 'Slack'],\n    preservedAssets: '890 Commits · 52 Figma Files · 2.4 GB Mail',\n  },\n  {\n    id: 'CUST-8805',\n    name: 'Sarah Jenkins',\n    role: 'DevOps Lead',\n    department: 'Platform & Infrastructure',\n    departmentCategory: 'engineering',\n    email: 'sarah.jenkins@uipkge.internal',\n    avatarInitials: 'SJ',\n    noticeSentDate: 'Aug 14, 2026',\n    acknowledgedDate: 'Aug 16, 2026 · 14:05 PST',\n    status: 'acknowledged',\n    statusLabel: 'Acknowledged & Compliant',\n    sha256Signature: '5c0b3a7f4802ef1904a8b71239c0812e4f8a9e62b11d87e0fa1943892c55b38d',\n    ipAddress: '198.51.100.91 (Corp Gateway)',\n    dataSources: ['AWS CloudTrail', 'GitHub Repos', 'Slack', 'Terraform Cloud'],\n    preservedAssets: '340 TF Workspaces · CloudTrail WORM Logs',\n  },\n]\n\nconst preservationSystemsData: PreservationSystem[] = [\n  {\n    id: 'sys-slack',\n    name: 'Slack Enterprise Grid',\n    integrationType: 'e-Discovery Legal Hold Lock',\n    status: 'active',\n    statusLabel: 'Active Hold Lock · Auto-Tombstoning Halted',\n    scope: 'All direct messages, private channels, and file attachments preserved.',\n    lockProtocol: 'Immutable Hold Policy #LIT-842',\n    lastSync: 'Today at 08:15 UTC',\n    iconName: 'slack',\n  },\n  {\n    id: 'sys-aws',\n    name: 'AWS S3 Object Lock',\n    integrationType: 'WORM Compliance Storage Mode',\n    status: 'active',\n    statusLabel: 'Compliance Mode Verified · Deletions Prohibited',\n    scope: 'Production log buckets and database snapshot retention override active.',\n    lockProtocol: 'SEC Rule 17a-4 / FINRA WORM Policy',\n    lastSync: 'Today at 07:30 UTC',\n    iconName: 'aws',\n  },\n  {\n    id: 'sys-google',\n    name: 'Google Workspace Vault',\n    integrationType: 'Continuous Matter Retention Hold',\n    status: 'active',\n    statusLabel: 'Indefinite Preservation Active',\n    scope: 'Gmail threads, Google Drive revisions, and Google Chat transcripts frozen.',\n    lockProtocol: 'Vault Discovery Rule #LIT-2026-0842',\n    lastSync: 'Today at 09:00 UTC',\n    iconName: 'google',\n  },\n  {\n    id: 'sys-github',\n    name: 'GitHub Enterprise Server',\n    integrationType: 'Repository & Code Audit Preservation',\n    status: 'active',\n    statusLabel: 'Audit Lock Active · Force-Pushing Blocked',\n    scope: 'Commit trees, Pull Request reviews, and issue histories locked against deletion.',\n    lockProtocol: 'Branch & Audit Immutability Policy',\n    lastSync: 'Today at 06:45 UTC',\n    iconName: 'github',\n  },\n]\n\nconst filterCategories = [\n  { id: 'all', label: 'All Custodians', count: 5 },\n  { id: 'engineering', label: 'Engineering', count: 3 },\n  { id: 'product', label: 'Product & Design', count: 1 },\n  { id: 'operations', label: 'Operations & Legal', count: 1 },\n]\n\nexport function SubpoenaLegalHoldManager({ className, defaultFilter = 'all' }: SubpoenaLegalHoldManagerProps) {\n  const [activeFilter, setActiveFilter] = React.useState<string>(defaultFilter)\n  const [searchQuery, setSearchQuery] = React.useState<string>('')\n  const [selectedReceipt, setSelectedReceipt] = React.useState<CustodianRecord | null>(null)\n  const [isExportingLog, setIsExportingLog] = React.useState(false)\n  const [notificationBanner, setNotificationBanner] = React.useState<{\n    message: string\n    type: 'success' | 'info' | 'warning'\n  } | null>(null)\n  const [isIssueHoldModalOpen, setIsIssueHoldModalOpen] = React.useState(false)\n\n  // New Legal Hold Form state\n  const [newHoldForm, setNewHoldForm] = React.useState({\n    custodianName: '',\n    custodianRole: '',\n    custodianEmail: '',\n    department: 'engineering',\n    scopeNotes:\n      'All source code repositories, direct messages, and design specifications relevant to Matter #LIT-2026-0842.',\n  })\n\n  const [copiedSignature, setCopiedSignature] = React.useState(false)\n  const [copiedVerifyLink, setCopiedVerifyLink] = React.useState(false)\n\n  const showNotification = React.useCallback(\n    (message: string, type: 'success' | 'info' | 'warning' = 'success', duration = 4000) => {\n      setNotificationBanner({ message, type })\n      setTimeout(() => {\n        setNotificationBanner((prev) => (prev?.message === message ? null : prev))\n      }, duration)\n    },\n    [],\n  )\n\n  const filteredCustodians = React.useMemo(() => {\n    return custodiansData.filter((custodian) => {\n      let matchesCategory = true\n      if (activeFilter === 'engineering') {\n        matchesCategory = custodian.departmentCategory === 'engineering'\n      } else if (activeFilter === 'product') {\n        matchesCategory = custodian.departmentCategory === 'product'\n      } else if (activeFilter === 'operations') {\n        matchesCategory = custodian.departmentCategory === 'operations'\n      }\n\n      const query = searchQuery.trim().toLowerCase()\n      if (!query) return matchesCategory\n\n      const matchesSearch =\n        custodian.name.toLowerCase().includes(query) ||\n        custodian.role.toLowerCase().includes(query) ||\n        custodian.department.toLowerCase().includes(query) ||\n        custodian.email.toLowerCase().includes(query) ||\n        custodian.dataSources.some((source) => source.toLowerCase().includes(query)) ||\n        custodian.id.toLowerCase().includes(query)\n\n      return matchesCategory && matchesSearch\n    })\n  }, [activeFilter, searchQuery])\n\n  function handleExportAuditLog() {\n    if (isExportingLog) return\n    setIsExportingLog(true)\n    showNotification(\n      'Compiling full litigation hold preservation receipts and cryptographic audit ledger...',\n      'info',\n      2000,\n    )\n\n    setTimeout(() => {\n      setIsExportingLog(false)\n      showNotification(\n        'Export complete: LIT-2026-0842_Custodian_Preservation_Audit_Package_2026-08-21.zip (2.4 MB · 18 Custodian Receipts)',\n        'success',\n        5000,\n      )\n    }, 1400)\n  }\n\n  function openReceiptModal(custodian: CustodianRecord) {\n    setSelectedReceipt(custodian)\n    setCopiedSignature(false)\n    setCopiedVerifyLink(false)\n  }\n\n  function closeReceiptModal() {\n    setSelectedReceipt(null)\n  }\n\n  function handleSendReminder(custodian: CustodianRecord) {\n    showNotification(\n      `Re-affirmation reminder & notice receipt dispatched to ${custodian.name} (${custodian.email}).`,\n      'info',\n    )\n  }\n\n  function handleRecertify(custodian: CustodianRecord) {\n    showNotification(\n      `Semi-annual re-certification workflow initiated for ${custodian.name}. Acknowledgment due within 5 business days.`,\n      'success',\n    )\n  }\n\n  function handleReleaseFromHold(custodian: CustodianRecord) {\n    showNotification(\n      `Hold release request queued for ${custodian.name} (${custodian.id}). Pending final authorization from Lead Litigation Counsel.`,\n      'warning',\n    )\n  }\n\n  function handleOpenIssueHoldModal() {\n    setIsIssueHoldModalOpen(true)\n  }\n\n  function handleCloseIssueHoldModal() {\n    setIsIssueHoldModalOpen(false)\n    setNewHoldForm({\n      custodianName: '',\n      custodianRole: '',\n      custodianEmail: '',\n      department: 'engineering',\n      scopeNotes:\n        'All source code repositories, direct messages, and design specifications relevant to Matter #LIT-2026-0842.',\n    })\n  }\n\n  function handleIssueHoldSubmit() {\n    if (!newHoldForm.custodianName || !newHoldForm.custodianEmail) {\n      showNotification('Please enter custodian name and corporate email address.', 'warning')\n      return\n    }\n\n    const name = newHoldForm.custodianName\n    handleCloseIssueHoldModal()\n    showNotification(\n      `Legal Hold Notice #LIT-2026-0842-N6 dispatched to ${name}. Auto-purge suspension lock applied across endpoints.`,\n      'success',\n      5000,\n    )\n  }\n\n  function copyToClipboard(text: string, type: 'signature' | 'verifyLink') {\n    navigator.clipboard?.writeText(text)\n    if (type === 'signature') {\n      setCopiedSignature(true)\n      setTimeout(() => setCopiedSignature(false), 2000)\n    } else if (type === 'verifyLink') {\n      setCopiedVerifyLink(true)\n      setTimeout(() => setCopiedVerifyLink(false), 2000)\n    }\n  }\n\n  React.useEffect(() => {\n    function handleKeyDown(e: KeyboardEvent) {\n      if (e.key === 'Escape') {\n        setSelectedReceipt(null)\n        setIsIssueHoldModalOpen(false)\n      }\n    }\n    window.addEventListener('keydown', handleKeyDown)\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [])\n\n  return (\n    <div className={cn('w-full space-y-6', className)} data-slot=\"subpoena-legal-hold-manager\">\n      {/* Header Card */}\n      <Card className=\"border-border bg-card shadow-xs\">\n        <CardContent className=\"p-5 sm:p-6\">\n          <div className=\"flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between\">\n            {/* Left Column: Matter Details & Compliance Badges */}\n            <div className=\"space-y-3\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <span className=\"text-muted-foreground text-xs font-medium\">\n                  Enterprise e-Discovery & Litigation Readiness\n                </span>\n                <Badge\n                  wrap\n                  variant=\"outline\"\n                  className=\"border-success/30 bg-success/10 text-success text-xs font-medium\"\n                >\n                  Fed. R. Civ. P. 37(e) Active Hold\n                </Badge>\n              </div>\n\n              <div>\n                <h2 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n                  Matter #LIT-2026-0842: In re UI Component Intellectual Property\n                </h2>\n                <p className=\"text-muted-foreground mt-1 text-sm font-medium\">\n                  Federal Civil Litigation · US District Court SDNY\n                </p>\n              </div>\n\n              {/* Matter Metadata Strip */}\n              <div className=\"text-muted-foreground flex flex-wrap items-center gap-3 pt-1 text-xs\">\n                <div className=\"flex items-center gap-1.5 font-mono tabular-nums\">\n                  <span className=\"text-muted-foreground\">Docket:</span>\n                  <span className=\"text-foreground font-medium\">1:26-cv-04892-RMB</span>\n                </div>\n                <Separator orientation=\"vertical\" className=\"h-3.5\" />\n                <div className=\"flex items-center gap-1\">\n                  <Scale className=\"text-muted-foreground size-3.5\" />\n                  <span>Hon. Richard M. Berman</span>\n                </div>\n                <Separator orientation=\"vertical\" className=\"h-3.5\" />\n                <div className=\"flex items-center gap-1\">\n                  <Shield className=\"text-muted-foreground size-3.5\" />\n                  <span>Counsel: Vance &amp; Sterling LLP</span>\n                </div>\n                <Separator orientation=\"vertical\" className=\"h-3.5\" />\n                <div className=\"flex items-center gap-1.5 font-mono tabular-nums\">\n                  <Calendar className=\"text-muted-foreground size-3.5\" />\n                  <span>Issued: Aug 14, 2026</span>\n                </div>\n              </div>\n            </div>\n\n            {/* Right Column: Active Status Pill & Primary Action Buttons */}\n            <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center lg:flex-col lg:items-end\">\n              {/* Hold Status Pill */}\n              <div className=\"border-success/30 bg-success/10 text-success dark:bg-success/10 text-success inline-flex items-center gap-2.5 rounded-lg border px-3.5 py-2 text-xs font-semibold shadow-xs\">\n                <ShieldCheck className=\"text-success size-4.5 shrink-0\" />\n                <div className=\"flex flex-col text-left\">\n                  <span>Active Preservation Hold · 100% Custodian Compliance</span>\n                  <span className=\"text-success/90 text-xs font-normal\">\n                    18/18 Signed Receipts · Auto-Purge Suspended\n                  </span>\n                </div>\n              </div>\n\n              {/* Action Buttons */}\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"hover:bg-accent gap-1.5 text-xs shadow-xs\"\n                  disabled={isExportingLog}\n                  onClick={handleExportAuditLog}\n                >\n                  {isExportingLog ? (\n                    <RefreshCw className=\"size-3.5 animate-spin\" />\n                  ) : (\n                    <FileSpreadsheet className=\"text-foreground size-3.5\" />\n                  )}\n                  <span>{isExportingLog ? 'Exporting Package...' : 'Export Custodian Audit Log'}</span>\n                </Button>\n\n                <Button\n                  variant=\"default\"\n                  size=\"sm\"\n                  className=\"gap-1.5 text-xs shadow-xs\"\n                  onClick={handleOpenIssueHoldModal}\n                >\n                  <Plus className=\"size-3.5\" />\n                  <span>Issue New Legal Hold</span>\n                </Button>\n              </div>\n            </div>\n          </div>\n\n          {/* Dynamic notification banner */}\n          {notificationBanner && (\n            <div\n              className={cn(\n                'mt-4 flex items-center gap-2 rounded-md border p-2.5 text-xs transition-colors',\n                notificationBanner.type === 'success' &&\n                  'border-success/30 bg-success/10 text-success dark:bg-success/10 dark:text-foreground',\n                notificationBanner.type === 'info' &&\n                  'border-info/30 bg-info/10 text-info dark:bg-info/10 dark:text-foreground',\n                notificationBanner.type === 'warning' &&\n                  'border-warning/30 bg-warning/10 text-warning dark:bg-warning/10 dark:text-foreground',\n              )}\n            >\n              {notificationBanner.type === 'success' && <CheckCircle2 className=\"text-success size-4 shrink-0\" />}\n              {notificationBanner.type === 'info' && <Info className=\"text-info size-4 shrink-0\" />}\n              {notificationBanner.type === 'warning' && <AlertTriangle className=\"text-warning size-4 shrink-0\" />}\n              <span>{notificationBanner.message}</span>\n            </div>\n          )}\n        </CardContent>\n      </Card>\n\n      {/* 4 Legal Hold Metric Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        {/* Card 1: Total Custodians Notified */}\n        <Card className=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-medium\">Total Custodians Notified</CardTitle>\n            <div className=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n              <Users className=\"size-4.5\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"text-foreground flex items-baseline gap-1.5 font-mono text-2xl font-bold tracking-tight tabular-nums\">\n                18 Custodians\n              </div>\n              <p className=\"text-muted-foreground text-xs\">18 / 18 custodians active under hold notice</p>\n            </div>\n            <div className=\"space-y-1\">\n              <Progress value={100} className=\"bg-primary/20 h-1.5\" />\n              <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span className=\"text-foreground font-medium\">Notice Delivery</span>\n                <span className=\"font-mono tabular-nums\">100% delivered</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Card 2: Acknowledgements Received */}\n        <Card className=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-medium\">Acknowledgements Received</CardTitle>\n            <div className=\"bg-success/10 text-success flex size-8 items-center justify-center rounded-md\">\n              <FileCheck className=\"size-4.5\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"text-success text-success flex items-baseline gap-1.5 font-mono text-2xl font-bold tracking-tight tabular-nums\">\n                18 / 18 Signed · 100%\n              </div>\n              <p className=\"text-muted-foreground text-xs\">Zero overdue · 100% compliant response rate</p>\n            </div>\n            <div className=\"space-y-1\">\n              <Progress value={100} className=\"bg-success/20 h-1.5\" />\n              <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span className=\"text-success font-medium\">Zero Non-Responsive</span>\n                <span className=\"font-mono tabular-nums\">0 pending</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Card 3: Auto-Purge Suspended Systems */}\n        <Card className=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-medium\">Auto-Purge Suspended Systems</CardTitle>\n            <div className=\"bg-info/10 text-info flex size-8 items-center justify-center rounded-md\">\n              <Lock className=\"size-4.5\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"text-foreground font-mono text-lg font-bold tracking-tight tabular-nums sm:text-xl\">\n                4 Systems Active\n              </div>\n              <p className=\"text-info truncate text-xs font-medium\">Gmail, Slack, S3, GitHub</p>\n            </div>\n            <div className=\"border-border bg-muted/40 flex items-center justify-between rounded border px-2 py-1 text-xs\">\n              <span className=\"text-muted-foreground\">Purge Status</span>\n              <Badge wrap variant=\"outline\" className=\"border-info/30 text-info font-mono text-xs\">\n                Retention Paused\n              </Badge>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Card 4: Next Annual Re-certification */}\n        <Card className=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-medium\">Next Re-certification</CardTitle>\n            <div className=\"bg-warning/10 text-warning flex size-8 items-center justify-center rounded-md\">\n              <CalendarClock className=\"size-4.5\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"text-foreground font-mono text-lg font-bold tracking-tight tabular-nums sm:text-xl\">\n                In 6 Months · Feb 2027\n              </div>\n              <p className=\"text-muted-foreground text-xs\">Semi-annual custodian confirmation cycle</p>\n            </div>\n            <div className=\"border-border bg-muted/40 flex items-center justify-between rounded border px-2 py-1 text-xs\">\n              <span className=\"text-muted-foreground\">Countdown</span>\n              <span className=\"text-warning text-warning font-mono font-medium tabular-nums\">178 days remaining</span>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Custodian Filter Toolbar & Search */}\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        {/* Category Filter Pills */}\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          {filterCategories.map((cat) => (\n            <button\n              key={cat.id}\n              type=\"button\"\n              className={cn(\n                'focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                activeFilter === cat.id\n                  ? 'bg-primary text-primary-foreground shadow-xs'\n                  : 'border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground border',\n              )}\n              onClick={() => setActiveFilter(cat.id)}\n            >\n              <span>{{ ...cat }.label}</span>\n              <span\n                className={cn(\n                  'py-0.2 rounded-full px-1.5 font-mono text-xs tabular-nums',\n                  activeFilter === cat.id\n                    ? 'bg-primary-foreground/20 text-primary-foreground'\n                    : 'bg-muted text-muted-foreground',\n                )}\n              >\n                {cat.count}\n              </span>\n            </button>\n          ))}\n        </div>\n\n        {/* Search Input */}\n        <div className=\"relative w-full sm:w-72\">\n          <Search className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\" />\n          <input\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            type=\"text\"\n            placeholder=\"Filter custodians, roles, data sources...\"\n            className=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border pr-8 pl-8 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n          />\n          {searchQuery && (\n            <button\n              type=\"button\"\n              className=\"text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2\"\n              aria-label=\"Clear search\"\n              onClick={() => setSearchQuery('')}\n            >\n              <X className=\"size-3.5\" />\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Custodian Acknowledgement Roster Table Card */}\n      <Card className=\"border-border bg-card shadow-xs\">\n        <CardHeader className=\"p-5 pb-3\">\n          <div className=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <CardTitle className=\"text-foreground text-base font-semibold tracking-tight\">\n                Custodian Acknowledgement Roster &amp; Preservation Status\n              </CardTitle>\n              <CardDescription className=\"text-muted-foreground text-xs\">\n                Active enterprise custodians, certified preservation receipts, and electronic data source scopes.\n              </CardDescription>\n            </div>\n            <div className=\"flex items-center gap-2 pt-2 sm:pt-0\">\n              <span className=\"text-muted-foreground text-xs\">\n                Showing{' '}\n                <span className=\"text-foreground font-mono font-medium tabular-nums\">{filteredCustodians.length}</span>{' '}\n                of <span className=\"text-foreground font-mono font-medium tabular-nums\">5</span> sample custodians\n              </span>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"p-0\">\n          <div className=\"overflow-x-auto\">\n            <Table>\n              <TableHeader className=\"bg-muted/40\">\n                <TableRow className=\"hover:bg-transparent\">\n                  <TableHead className=\"text-muted-foreground min-w-[260px] py-3 text-xs font-semibold tracking-wider uppercase\">\n                    Custodian &amp; Department\n                  </TableHead>\n                  <TableHead className=\"text-muted-foreground min-w-[130px] py-3 text-xs font-semibold tracking-wider uppercase\">\n                    Notice Sent Date\n                  </TableHead>\n                  <TableHead className=\"text-muted-foreground min-w-[170px] py-3 text-xs font-semibold tracking-wider uppercase\">\n                    Acknowledged Date\n                  </TableHead>\n                  <TableHead className=\"text-muted-foreground min-w-[170px] py-3 text-xs font-semibold tracking-wider uppercase\">\n                    Compliance Status\n                  </TableHead>\n                  <TableHead className=\"text-muted-foreground min-w-[280px] py-3 text-xs font-semibold tracking-wider uppercase\">\n                    Data Sources Preserved\n                  </TableHead>\n                  <TableHead className=\"text-muted-foreground min-w-[140px] py-3 text-right text-xs font-semibold tracking-wider uppercase\">\n                    Actions\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n\n              <TableBody>\n                {filteredCustodians.map((custodian) => (\n                  <TableRow key={custodian.id} className=\"hover:bg-muted/30 transition-colors\">\n                    {/* Custodian Avatar, Name & Department */}\n                    <TableCell className=\"py-3.5 align-middle\">\n                      <div className=\"flex items-center gap-3\">\n                        <Avatar className=\"size-8 shrink-0\">\n                          <AvatarFallback className=\"text-primary bg-primary/10 text-xs font-semibold\">\n                            {custodian.avatarInitials}\n                          </AvatarFallback>\n                        </Avatar>\n                        <div className=\"min-w-0 space-y-0.5\">\n                          <div className=\"flex items-center gap-2\">\n                            <span className=\"text-foreground truncate text-sm font-semibold\">{custodian.name}</span>\n                            <span className=\"text-muted-foreground font-mono text-xs tabular-nums\">{custodian.id}</span>\n                          </div>\n                          <div className=\"text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs\">\n                            <span className=\"text-foreground font-medium\">{custodian.role}</span>\n                            <span>·</span>\n                            <span>{custodian.department}</span>\n                          </div>\n                        </div>\n                      </div>\n                    </TableCell>\n\n                    {/* Notice Sent Date */}\n                    <TableCell className=\"py-3.5 align-middle\">\n                      <div className=\"text-foreground flex items-center gap-1.5 font-mono text-xs tabular-nums\">\n                        <Send className=\"text-muted-foreground size-3.5\" />\n                        <span>{custodian.noticeSentDate}</span>\n                      </div>\n                    </TableCell>\n\n                    {/* Acknowledged Date */}\n                    <TableCell className=\"py-3.5 align-middle\">\n                      <div className=\"space-y-0.5\">\n                        <div className=\"text-foreground flex items-center gap-1.5 font-mono text-xs font-medium tabular-nums\">\n                          <Clock className=\"text-success size-3.5 shrink-0\" />\n                          <span>{custodian.acknowledgedDate}</span>\n                        </div>\n                        <div\n                          className=\"text-muted-foreground max-w-[160px] truncate font-mono text-xs\"\n                          title={custodian.ipAddress}\n                        >\n                          IP: {custodian.ipAddress}\n                        </div>\n                      </div>\n                    </TableCell>\n\n                    {/* Compliance Status Badge */}\n                    <TableCell className=\"py-3.5 align-middle\">\n                      <div className=\"space-y-1\">\n                        <div className=\"border-success/30 bg-success/10 text-success inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold\">\n                          <BadgeCheck className=\"text-success size-3.5 shrink-0\" />\n                          <span>{custodian.statusLabel}</span>\n                        </div>\n                        <p className=\"text-muted-foreground text-xs\">Receipt Verified</p>\n                      </div>\n                    </TableCell>\n\n                    {/* Data Sources Preserved */}\n                    <TableCell className=\"py-3.5 align-middle\">\n                      <div className=\"space-y-1.5\">\n                        <div className=\"flex flex-wrap items-center gap-1\">\n                          {custodian.dataSources.map((source) => (\n                            <Badge wrap key={source} variant=\"secondary\" className=\"px-2 py-0.5 text-xs font-normal\">\n                              {source}\n                            </Badge>\n                          ))}\n                        </div>\n                        <p className=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                          Scope: {custodian.preservedAssets}\n                        </p>\n                      </div>\n                    </TableCell>\n\n                    {/* Actions Dropdown */}\n                    <TableCell className=\"py-3.5 text-right align-middle\">\n                      <div className=\"flex items-center justify-end gap-1.5\">\n                        <Button\n                          variant=\"outline\"\n                          size=\"xs\"\n                          className=\"hover:bg-accent h-7 gap-1 px-2.5 text-xs font-medium shadow-2xs\"\n                          onClick={() => openReceiptModal(custodian)}\n                        >\n                          <FileCheck className=\"text-muted-foreground size-3\" />\n                          <span>Receipt</span>\n                        </Button>\n\n                        <DropdownMenu>\n                          <DropdownMenuTrigger asChild>\n                            <Button\n                              variant=\"ghost\"\n                              size=\"icon-sm\"\n                              className=\"text-muted-foreground hover:text-foreground size-7 p-0\"\n                            >\n                              <MoreHorizontal className=\"size-4\" />\n                              <span className=\"sr-only\">Open custodian options for {custodian.name}</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\" className=\"w-52\">\n                            <DropdownMenuLabel className=\"text-xs font-semibold\">Custodian Actions</DropdownMenuLabel>\n                            <DropdownMenuSeparator />\n                            <DropdownMenuItem\n                              className=\"cursor-pointer text-xs\"\n                              onClick={() => openReceiptModal(custodian)}\n                            >\n                              <FileCheck className=\"text-success mr-2 size-3.5\" />\n                              <span>View Signed Receipt</span>\n                            </DropdownMenuItem>\n                            <DropdownMenuItem\n                              className=\"cursor-pointer text-xs\"\n                              onClick={() => handleSendReminder(custodian)}\n                            >\n                              <Mail className=\"text-muted-foreground mr-2 size-3.5\" />\n                              <span>Send Re-affirmation Notice</span>\n                            </DropdownMenuItem>\n                            <DropdownMenuItem\n                              className=\"cursor-pointer text-xs\"\n                              onClick={() => handleRecertify(custodian)}\n                            >\n                              <RotateCcw className=\"text-muted-foreground mr-2 size-3.5\" />\n                              <span>Initiate Re-certification</span>\n                            </DropdownMenuItem>\n                            <DropdownMenuSeparator />\n                            <DropdownMenuItem\n                              className=\"text-destructive focus:text-destructive cursor-pointer text-xs\"\n                              onClick={() => handleReleaseFromHold(custodian)}\n                            >\n                              <UserX className=\"text-destructive mr-2 size-3.5\" />\n                              <span>Release from Hold...</span>\n                            </DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                ))}\n\n                {filteredCustodians.length === 0 && (\n                  <TableRow>\n                    <TableCell colSpan={6} className=\"text-muted-foreground py-8 text-center text-xs\">\n                      No custodians match your search or filter criteria.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </div>\n        </CardContent>\n\n        {/* Table Sub-Footer */}\n        <CardFooter className=\"border-border bg-muted/20 text-muted-foreground flex flex-col gap-2 border-t p-4 text-xs sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-2\">\n            <ShieldCheck className=\"text-success size-4 shrink-0\" />\n            <span>\n              All custodian preservation receipts are immutably timestamped and hashed under SEC &amp; FRCP 37(e)\n              evidentiary rules.\n            </span>\n          </div>\n          <div className=\"flex items-center gap-2 font-mono tabular-nums\">\n            <span>Roster Hash: e7d9-4081-9bf2</span>\n            <span className=\"text-success font-medium\">18 Total Certified</span>\n          </div>\n        </CardFooter>\n      </Card>\n\n      {/* System Preservation Integrations Card */}\n      <Card className=\"border-border bg-card shadow-xs\">\n        <CardHeader className=\"p-5 pb-3\">\n          <div className=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"space-y-0.5\">\n              <div className=\"flex items-center gap-2\">\n                <Server className=\"text-primary size-4\" />\n                <CardTitle className=\"text-foreground text-base font-semibold tracking-tight\">\n                  System Preservation Integrations &amp; Automated Storage Locks\n                </CardTitle>\n              </div>\n              <CardDescription className=\"text-muted-foreground text-xs\">\n                Automated retention policy overrides and immutable WORM lock status across enterprise infrastructure.\n              </CardDescription>\n            </div>\n            <Badge wrap variant=\"outline\" className=\"border-info/30 text-info w-fit text-xs\">\n              4 / 4 Systems Enforced\n            </Badge>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"p-5 pt-2\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n            {preservationSystemsData.map((system) => (\n              <div\n                key={system.id}\n                className=\"border-border bg-muted/30 hover:bg-muted/50 flex flex-col justify-between space-y-3 rounded-lg border p-4 transition-colors\"\n              >\n                <div className=\"space-y-2\">\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"flex items-center gap-2.5\">\n                      <div className=\"border-border bg-card text-foreground flex size-8 items-center justify-center rounded-md border shadow-2xs\">\n                        <Lock className=\"text-success size-4\" />\n                      </div>\n                      <div>\n                        <h4 className=\"text-foreground text-sm font-semibold\">{system.name}</h4>\n                        <p className=\"text-muted-foreground text-xs\">{system.integrationType}</p>\n                      </div>\n                    </div>\n                    <div className=\"border-success/30 bg-success/10 text-success inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-semibold\">\n                      <span className=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                      <span>Locked</span>\n                    </div>\n                  </div>\n\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">{system.scope}</p>\n                </div>\n\n                <div className=\"border-border/60 space-y-1.5 border-t pt-2.5 text-xs\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground\">Enforcement:</span>\n                    <span className=\"text-foreground font-mono font-medium\">{system.lockProtocol}</span>\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground\">Last Audit Sync:</span>\n                    <span className=\"text-muted-foreground font-mono tabular-nums\">{system.lastSync}</span>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Custodian Signed Receipt & Cryptographic Audit Modal */}\n      {selectedReceipt && (\n        <div\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs transition-opacity\"\n          onClick={(e) => {\n            if (e.target === e.currentTarget) closeReceiptModal()\n          }}\n        >\n          <div className=\"border-border bg-card text-card-foreground animate-in fade-in zoom-in-95 relative w-full max-w-2xl overflow-hidden rounded-xl border shadow-sm duration-200\">\n            {/* Modal Top Bar */}\n            <div className=\"border-border bg-muted/40 flex items-center justify-between border-b px-5 py-3.5\">\n              <div className=\"flex items-center gap-2.5\">\n                <div className=\"bg-success/10 text-success flex size-7 items-center justify-center rounded-full\">\n                  <BadgeCheck className=\"size-4\" />\n                </div>\n                <div>\n                  <h3 className=\"text-foreground text-xs font-semibold\">Preservation Acknowledgment Receipt</h3>\n                  <p className=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                    Record ID: {selectedReceipt.id} · Matter #LIT-2026-0842\n                  </p>\n                </div>\n              </div>\n\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-md p-1.5 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                aria-label=\"Close receipt modal\"\n                onClick={closeReceiptModal}\n              >\n                <X className=\"size-4\" />\n              </button>\n            </div>\n\n            {/* Receipt Document Body */}\n            <div className=\"max-h-[75vh] space-y-5 overflow-y-auto p-6\">\n              {/* Legal Receipt Certificate Frame */}\n              <div className=\"border-success/30 bg-success/5 dark:bg-success/10 relative rounded-lg border-2 border-dashed p-5\">\n                <div className=\"border-border/80 flex items-center justify-between border-b pb-3\">\n                  <div className=\"space-y-0.5\">\n                    <span className=\"text-success text-xs font-semibold tracking-wide\">\n                      Certified Custodian E-Discovery Receipt\n                    </span>\n                    <h4 className=\"text-foreground text-base font-bold\">\n                      Litigation Hold Notice &amp; Preservation Directive\n                    </h4>\n                  </div>\n                  <Badge wrap variant=\"outline\" className=\"border-success/40 text-success text-xs font-semibold\">\n                    100% Valid &amp; Attested\n                  </Badge>\n                </div>\n\n                <div className=\"text-foreground mt-4 space-y-3 text-xs leading-relaxed\">\n                  <div className=\"bg-card/60 border-border/60 grid grid-cols-2 gap-3 rounded-md border p-3 sm:grid-cols-3\">\n                    <div>\n                      <span className=\"text-muted-foreground block text-xs\">Custodian Name:</span>\n                      <span className=\"text-foreground text-sm font-semibold\">{selectedReceipt.name}</span>\n                    </div>\n                    <div>\n                      <span className=\"text-muted-foreground block text-xs\">Title &amp; Role:</span>\n                      <span className=\"text-foreground font-medium\">{selectedReceipt.role}</span>\n                    </div>\n                    <div>\n                      <span className=\"text-muted-foreground block text-xs\">Corporate Email:</span>\n                      <span className=\"text-foreground font-mono\">{selectedReceipt.email}</span>\n                    </div>\n                  </div>\n\n                  {/* Legal Notice Text */}\n                  <div className=\"text-muted-foreground bg-muted/40 border-border/60 space-y-1.5 rounded-md border p-3 text-xs\">\n                    <p className=\"text-foreground font-semibold\">Acknowledgment Declaration &amp; Legal Affirmation:</p>\n                    <p>\n                      &quot;I hereby confirm receipt and comprehension of the Formal Legal Hold Notice for Matter\n                      #LIT-2026-0842. I have immediately ceased all automated or manual deletion, purging, and\n                      overwriting of relevant electronic documents, chat logs, code commits, emails, and physical files\n                      within my custody or control.&quot;\n                    </p>\n                  </div>\n\n                  {/* Preserved Repositories */}\n                  <div className=\"space-y-1 pt-1\">\n                    <span className=\"text-foreground text-xs font-semibold\">Mandatory Preserved Repositories:</span>\n                    <div className=\"flex flex-wrap gap-1.5 pt-0.5\">\n                      {selectedReceipt.dataSources.map((source) => (\n                        <Badge wrap key={source} variant=\"secondary\" className=\"text-xs\">\n                          {source}\n                        </Badge>\n                      ))}\n                    </div>\n                  </div>\n                </div>\n\n                {/* Attestation Timestamps */}\n                <div className=\"border-border/60 mt-4 grid grid-cols-2 gap-3 border-t pt-3 text-xs sm:grid-cols-3\">\n                  <div>\n                    <span className=\"text-muted-foreground block\">Notice Dispatched:</span>\n                    <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                      {selectedReceipt.noticeSentDate}\n                    </span>\n                  </div>\n                  <div>\n                    <span className=\"text-muted-foreground block\">Signed &amp; Acknowledged:</span>\n                    <span className=\"text-success text-success font-mono font-medium tabular-nums\">\n                      {selectedReceipt.acknowledgedDate}\n                    </span>\n                  </div>\n                  <div>\n                    <span className=\"text-muted-foreground block\">Origin Host IP:</span>\n                    <span className=\"text-foreground font-mono tabular-nums\">{selectedReceipt.ipAddress}</span>\n                  </div>\n                </div>\n              </div>\n\n              {/* Cryptographic SHA-256 Signature Box */}\n              <div className=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3.5 text-xs\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"text-foreground flex items-center gap-1.5 font-medium\">\n                    <ShieldCheck className=\"text-success size-3.5\" />\n                    <span>Digital Signature Digest (SHA-256)</span>\n                  </div>\n                  <button\n                    type=\"button\"\n                    className=\"text-primary flex items-center gap-1 text-xs font-medium hover:underline\"\n                    onClick={() => copyToClipboard(selectedReceipt.sha256Signature, 'signature')}\n                  >\n                    {copiedSignature ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                    <span>{copiedSignature ? 'Copied' : 'Copy Hash'}</span>\n                  </button>\n                </div>\n                <p className=\"text-muted-foreground bg-background/80 border-border rounded border p-2 font-mono text-xs break-all\">\n                  {selectedReceipt.sha256Signature}\n                </p>\n                <div className=\"border-border/50 text-muted-foreground flex flex-wrap items-center justify-between gap-2 border-t pt-1\">\n                  <span>Attestation Engine: UIPKGE Legal Vault v4</span>\n                  <span className=\"font-mono tabular-nums\">Evidentiary Standard: FRCP 37(e)</span>\n                </div>\n              </div>\n            </div>\n\n            {/* Modal Actions Footer */}\n            <div className=\"border-border bg-muted/40 flex flex-col-reverse gap-2 border-t p-4 sm:flex-row sm:items-center sm:justify-between\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"text-xs\"\n                onClick={() => copyToClipboard(`https://uipkge.dev/legal/receipt/${selectedReceipt.id}`, 'verifyLink')}\n              >\n                {copiedVerifyLink ? <Check className=\"text-success size-3.5\" /> : <Share2 className=\"size-3.5\" />}\n                <span>{copiedVerifyLink ? 'Link Copied!' : 'Copy Verification Link'}</span>\n              </Button>\n\n              <div className=\"flex items-center gap-2\">\n                <Button variant=\"outline\" size=\"sm\" className=\"text-xs\" onClick={closeReceiptModal}>\n                  Close\n                </Button>\n                <Button\n                  aria-label=\"Download attachment\"\n                  variant=\"default\"\n                  size=\"sm\"\n                  className=\"gap-1.5 text-xs shadow-xs\"\n                  onClick={() => {\n                    handleExportAuditLog()\n                    closeReceiptModal()\n                  }}\n                >\n                  <Download className=\"size-3.5\" />\n                  <span>Download Signed PDF</span>\n                </Button>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Issue New Legal Hold Modal */}\n      {isIssueHoldModalOpen && (\n        <div\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs transition-opacity\"\n          onClick={(e) => {\n            if (e.target === e.currentTarget) handleCloseIssueHoldModal()\n          }}\n        >\n          <div className=\"border-border bg-card text-card-foreground animate-in fade-in zoom-in-95 relative w-full max-w-lg overflow-hidden rounded-xl border shadow-sm duration-200\">\n            <div className=\"border-border bg-muted/40 flex items-center justify-between border-b px-5 py-3.5\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-full\">\n                  <Plus className=\"size-4\" />\n                </div>\n                <div>\n                  <h3 className=\"text-foreground text-sm font-bold\">Issue New Legal Hold Notice</h3>\n                  <p className=\"text-muted-foreground text-xs\">\n                    Matter #LIT-2026-0842 · Dispatch formal preservation notice\n                  </p>\n                </div>\n              </div>\n              <button\n                aria-label=\"Close issue hold dialog\"\n                type=\"button\"\n                className=\"text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-md p-1.5 focus-visible:ring-2 focus-visible:outline-none\"\n                onClick={handleCloseIssueHoldModal}\n              >\n                <X className=\"size-4\" />\n              </button>\n            </div>\n\n            <div className=\"space-y-4 p-5 text-xs\">\n              <div className=\"border-info/30 bg-info/10 text-foreground rounded-md border p-3\">\n                <div className=\"flex gap-2\">\n                  <Info className=\"text-info size-4 shrink-0\" />\n                  <p className=\"leading-relaxed\">\n                    Issuing a notice automatically suspends auto-tombstoning and scheduled purges across Gmail, Slack,\n                    and cloud storage for this custodian.\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"space-y-3\">\n                <div>\n                  <label className=\"text-foreground mb-1 block font-semibold\">Custodian Full Name</label>\n                  <input\n                    value={newHoldForm.custodianName}\n                    onChange={(e) => setNewHoldForm((prev) => ({ ...prev, custodianName: e.target.value }))}\n                    type=\"text\"\n                    placeholder=\"e.g. Jordan Mitchell\"\n                    className=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border px-3 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"text-foreground mb-1 block font-semibold\">Corporate Email Address</label>\n                  <input\n                    value={newHoldForm.custodianEmail}\n                    onChange={(e) => setNewHoldForm((prev) => ({ ...prev, custodianEmail: e.target.value }))}\n                    type=\"email\"\n                    placeholder=\"e.g. jordan.mitchell@uipkge.internal\"\n                    className=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border px-3 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n                  />\n                </div>\n\n                <div className=\"grid grid-cols-2 gap-3\">\n                  <div>\n                    <label className=\"text-foreground mb-1 block font-semibold\">Title &amp; Role</label>\n                    <input\n                      value={newHoldForm.custodianRole}\n                      onChange={(e) => setNewHoldForm((prev) => ({ ...prev, custodianRole: e.target.value }))}\n                      type=\"text\"\n                      placeholder=\"e.g. Principal Engineer\"\n                      className=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border px-3 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n                    />\n                  </div>\n                  <div>\n                    <label className=\"text-foreground mb-1 block font-semibold\">Department</label>\n                    <select\n                      value={newHoldForm.department}\n                      onChange={(e) => setNewHoldForm((prev) => ({ ...prev, department: e.target.value }))}\n                      className=\"border-input bg-background text-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border px-2 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n                    >\n                      <option value=\"engineering\">Engineering</option>\n                      <option value=\"product\">Product &amp; Design</option>\n                      <option value=\"operations\">Operations &amp; Legal</option>\n                    </select>\n                  </div>\n                </div>\n\n                <div>\n                  <label className=\"text-foreground mb-1 block font-semibold\">\n                    Preservation Scope &amp; Custom Instructions\n                  </label>\n                  <textarea\n                    value={newHoldForm.scopeNotes}\n                    onChange={(e) => setNewHoldForm((prev) => ({ ...prev, scopeNotes: e.target.value }))}\n                    rows={3}\n                    className=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-md border p-2.5 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n                  />\n                </div>\n              </div>\n            </div>\n\n            <div className=\"border-border bg-muted/40 flex items-center justify-end gap-2 border-t p-4\">\n              <Button\n                aria-label=\"Close issue hold dialog\"\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"text-xs\"\n                onClick={handleCloseIssueHoldModal}\n              >\n                Cancel\n              </Button>\n              <Button variant=\"default\" size=\"sm\" className=\"gap-1.5 text-xs shadow-xs\" onClick={handleIssueHoldSubmit}>\n                <Send className=\"size-3.5\" />\n                <span>Dispatch Notice &amp; Apply Lock</span>\n              </Button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/SubpoenaLegalHoldManager.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/dropdown-menu.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Enterprise e-discovery litigation hold notice tracker, custodian preservation receipts, and compliance audit log.",
  "categories": [
    "legal",
    "app",
    "compliance",
    "security"
  ]
}