@omersx/bemms 0.0.0-stage → 1.0.0

package/src/app/(dashboard)/admin/organizations/[orgId]/page.tsx

@@ -0,0 +1,82 @@
+import { PageHeader } from "@/components/shared/page-header";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatusBadge } from "@/components/shared/status-badge";
+import Link from "next/link";
+import { getOrganizationById } from "@/lib/actions/organizations";
+import { notFound } from "next/navigation";
+
+export default async function OrganizationDetailPage({ params }: { params: Promise<{ orgId: string }> }) {
+  const { orgId } = await params;
+  const result = await getOrganizationById(orgId);
+  
+  if (!result.success || !result.data) {
+    notFound();
+  }
+
+  const org = result.data;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={org.name} description="Organization details">
+        <Button variant="outline" asChild>
+          <Link href={`/admin/organizations/${org.id}/edit`}>Edit</Link>
+        </Button>
+        <Button variant="destructive">Archive</Button>
+      </PageHeader>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Basic Information</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <div className="text-sm font-medium text-muted-foreground">Code</div>
+              <div>{org.code}</div>
+            </div>
+            <div>
+              <div className="text-sm font-medium text-muted-foreground">Status</div>
+              <div className="mt-1">
+                <StatusBadge status={org.status} />
+              </div>
+            </div>
+            <div>
+              <div className="text-sm font-medium text-muted-foreground">Timezone</div>
+              <div>{org.defaultTimezone}</div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Linked Hospitals</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">0</div>
+            <p className="text-sm text-muted-foreground mt-1">Total hospitals</p>
+            <Button variant="link" className="px-0 mt-4" asChild>
+              <Link href={`/admin/hospitals?orgId=${org.id}`}>View Hospitals →</Link>
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Settings</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <div className="text-sm font-medium text-muted-foreground">Created At</div>
+              <div>{new Date(org.createdAt || Date.now()).toLocaleDateString()}</div>
+            </div>
+            <div>
+              <div className="text-sm font-medium text-muted-foreground">Updated At</div>
+              <div>{new Date(org.updatedAt || Date.now()).toLocaleDateString()}</div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/app/(dashboard)/admin/organizations/new/page.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { PageHeader } from "@/components/shared/page-header";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { useRouter } from "next/navigation";
+import { createOrganization } from "@/lib/actions/organizations";
+
+const formSchema = z.object({
+  name: z.string().min(2, "Name must be at least 2 characters"),
+  code: z.string().min(2, "Code must be at least 2 characters").toUpperCase(),
+  defaultTimezone: z.string().min(1, "Please select a timezone"),
+  status: z.enum(["active", "archived"]),
+});
+
+export default function NewOrganizationPage() {
+  const router = useRouter();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      code: "",
+      defaultTimezone: "UTC",
+      status: "active",
+    },
+  });
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    const result = await createOrganization(values);
+    if (result.success) {
+      router.push("/admin/organizations");
+    } else {
+      console.error((result as any).error);
+    }
+  }
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      <PageHeader title="Add Organization" description="Create a new organization" />
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input placeholder="Acme Healthcare" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="code"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Code</FormLabel>
+                <FormControl>
+                  <Input placeholder="ACME" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="defaultTimezone"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Default Timezone</FormLabel>
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a timezone" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="UTC">UTC</SelectItem>
+                    <SelectItem value="America/New_York">Eastern Time (US & Canada)</SelectItem>
+                    <SelectItem value="America/Chicago">Central Time (US & Canada)</SelectItem>
+                    <SelectItem value="America/Denver">Mountain Time (US & Canada)</SelectItem>
+                    <SelectItem value="America/Los_Angeles">Pacific Time (US & Canada)</SelectItem>
+                    <SelectItem value="Europe/London">London</SelectItem>
+                    <SelectItem value="Europe/Paris">Paris</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="status"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Status</FormLabel>
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select status" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="active">Active</SelectItem>
+                    <SelectItem value="archived">Archived</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex gap-4">
+            <Button type="submit">Create Organization</Button>
+            <Button type="button" variant="outline" onClick={() => router.back()}>
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
+

package/src/app/(dashboard)/admin/organizations/page.tsx

@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+export default function AdminOrganizationsPage() {
+  redirect("/admin/general");
+}
+

package/src/app/(dashboard)/admin/page.tsx

@@ -0,0 +1,258 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { PageHeader } from "@/components/shared/page-header";
+import { AdminAlerts } from "@/components/dashboard/admin-alerts";
+import { getAdminAlerts, getAdminDashboardStats } from "@/lib/actions/dashboard";
+import { getAuditLogs } from "@/lib/actions/audit-logs";
+import Link from "next/link";
+import {
+  Building2,
+  Hospital,
+  Users,
+  Shield,
+  Layers,
+  Cpu,
+  UserPlus,
+  ShieldCheck,
+  FileSpreadsheet,
+  History,
+  ArrowRight,
+  Activity,
+  UploadCloud,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminDashboardPage() {
+  const [stats, alerts, auditRes] = await Promise.all([
+    getAdminDashboardStats(),
+    getAdminAlerts(),
+    getAuditLogs({ pageSize: 6 }),
+  ]);
+
+  const recentLogs = auditRes.success && auditRes.data ? auditRes.data : [];
+
+  const statCards = [
+    {
+      title: "Health System",
+      value: stats.totalOrganizations.toString(),
+      subtitle: "Registered Organization",
+      icon: Building2,
+      href: "/admin/general",
+    },
+    {
+      title: "Hospital Campuses",
+      value: stats.totalHospitals.toString(),
+      subtitle: "Active Facilities",
+      icon: Hospital,
+      href: "/admin/general",
+    },
+    {
+      title: "Active Users",
+      value: `${stats.activeUsers} / ${stats.totalUsers}`,
+      subtitle: "Active / Total Accounts",
+      icon: Users,
+      href: "/admin/users",
+    },
+    {
+      title: "System Roles",
+      value: stats.totalRoles.toString(),
+      subtitle: "Configured Roles",
+      icon: Shield,
+      href: "/admin/roles",
+    },
+    {
+      title: "Departments",
+      value: stats.totalDepartments.toString(),
+      subtitle: "Operational Units",
+      icon: Layers,
+      href: "/departments",
+    },
+    {
+      title: "Medical Devices",
+      value: stats.totalDevices.toString(),
+      subtitle: "Total Registered",
+      icon: Cpu,
+      href: "/devices",
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Admin Dashboard"
+        description="System configuration, security governance, and operational health"
+      >
+        <Button variant="outline" asChild>
+          <Link href="/admin/users?action=new">
+            <UserPlus className="w-4 h-4 mr-2" />
+            Add User
+          </Link>
+        </Button>
+        <Button asChild>
+          <Link href="/admin/general">
+            <Building2 className="w-4 h-4 mr-2" />
+            General Settings
+          </Link>
+        </Button>
+      </PageHeader>
+
+      {/* ── Actionable Alerts ── */}
+      <AdminAlerts alerts={alerts} />
+
+      {/* ── Key System Metrics ── */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+        {statCards.map((stat, index) => (
+          <Link key={index} href={stat.href} className="group">
+            <Card className="h-full transition-all hover:border-primary/50 hover:shadow-sm">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-xs font-medium text-muted-foreground group-hover:text-primary transition-colors">
+                  {stat.title}
+                </CardTitle>
+                <stat.icon className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold tracking-tight">{stat.value}</div>
+                <p className="text-[11px] text-muted-foreground mt-0.5">{stat.subtitle}</p>
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* ── Recent Activity / Audit Feed ── */}
+        <Card className="lg:col-span-2">
+          <CardHeader className="flex flex-row items-center justify-between pb-3">
+            <div className="space-y-1">
+              <CardTitle className="text-base font-semibold flex items-center gap-2">
+                <Activity className="w-4 h-4 text-primary" />
+                Recent System Audit Activity
+              </CardTitle>
+              <p className="text-xs text-muted-foreground">
+                Immutable record of administrative operations (21 CFR Part 11)
+              </p>
+            </div>
+            <Button variant="ghost" size="sm" asChild>
+              <Link href="/admin/audit-logs" className="text-xs flex items-center gap-1">
+                View All <ArrowRight className="w-3.5 h-3.5 ml-1" />
+              </Link>
+            </Button>
+          </CardHeader>
+          <CardContent>
+            {recentLogs.length > 0 ? (
+              <div className="divide-y divide-border/60">
+                {recentLogs.map((log: any) => {
+                  const actorName = log.actorUser?.fullName || log.actorUser?.email || "System";
+                  const dateStr = log.timestamp
+                    ? new Date(log.timestamp).toLocaleString(undefined, {
+                        month: "short",
+                        day: "numeric",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })
+                    : "—";
+
+                  return (
+                    <div key={log.id} className="py-3 flex items-start justify-between gap-4 first:pt-0 last:pb-0">
+                      <div className="space-y-1 min-w-0">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <Badge variant="outline" className="font-mono text-[10px] uppercase">
+                            {log.actionType}
+                          </Badge>
+                          <span className="text-sm font-medium truncate">{actorName}</span>
+                          <span className="text-xs text-muted-foreground">
+                            on <span className="font-medium text-foreground">{log.entityType}</span>
+                          </span>
+                        </div>
+                        {log.changeReason && (
+                          <p className="text-xs text-muted-foreground italic truncate">
+                            Reason: &quot;{log.changeReason}&quot;
+                          </p>
+                        )}
+                      </div>
+                      <span className="text-xs text-muted-foreground whitespace-nowrap shrink-0">{dateStr}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="py-8 text-center text-sm text-muted-foreground">
+                No administrative activity recorded yet.
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* ── Quick Administrative Management ── */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base font-semibold flex items-center gap-2">
+              <ShieldCheck className="w-4 h-4 text-primary" />
+              Administrative Portals
+            </CardTitle>
+            <p className="text-xs text-muted-foreground">Quick access to core admin functions</p>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <Link
+              href="/admin/users"
+              className="flex items-start gap-3 p-3 rounded-lg border border-border/60 hover:border-primary/50 hover:bg-muted/30 transition-colors"
+            >
+              <Users className="w-4 h-4 text-primary mt-0.5 shrink-0" />
+              <div className="space-y-0.5">
+                <div className="text-sm font-medium">User Governance</div>
+                <div className="text-xs text-muted-foreground">Manage user accounts, roles & scopes</div>
+              </div>
+            </Link>
+
+            <Link
+              href="/admin/roles"
+              className="flex items-start gap-3 p-3 rounded-lg border border-border/60 hover:border-primary/50 hover:bg-muted/30 transition-colors"
+            >
+              <Shield className="w-4 h-4 text-primary mt-0.5 shrink-0" />
+              <div className="space-y-0.5">
+                <div className="text-sm font-medium">Roles & Permissions</div>
+                <div className="text-xs text-muted-foreground">Verify RBAC and separation of duties</div>
+              </div>
+            </Link>
+
+            <Link
+              href="/admin/general"
+              className="flex items-start gap-3 p-3 rounded-lg border border-border/60 hover:border-primary/50 hover:bg-muted/30 transition-colors"
+            >
+              <FileSpreadsheet className="w-4 h-4 text-primary mt-0.5 shrink-0" />
+              <div className="space-y-0.5">
+                <div className="text-sm font-medium">General & Master Data</div>
+                <div className="text-xs text-muted-foreground">Health system, hospitals & device catalogs</div>
+              </div>
+            </Link>
+
+            <Link
+              href="/admin/data"
+              className="flex items-start gap-3 p-3 rounded-lg border border-border/60 hover:border-primary/50 hover:bg-muted/30 transition-colors"
+            >
+              <UploadCloud className="w-4 h-4 text-primary mt-0.5 shrink-0" />
+              <div className="space-y-0.5">
+                <div className="text-sm font-medium">Export & Import Center</div>
+                <div className="text-xs text-muted-foreground">Bulk CSV/Excel import and dataset backup</div>
+              </div>
+            </Link>
+
+            <Link
+              href="/admin/audit-logs"
+              className="flex items-start gap-3 p-3 rounded-lg border border-border/60 hover:border-primary/50 hover:bg-muted/30 transition-colors"
+            >
+              <History className="w-4 h-4 text-primary mt-0.5 shrink-0" />
+              <div className="space-y-0.5">
+                <div className="text-sm font-medium">Audit Trail</div>
+                <div className="text-xs text-muted-foreground">Comprehensive compliance logs</div>
+              </div>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+

package/src/app/(dashboard)/admin/roles/page.tsx

@@ -0,0 +1,153 @@
+import { getPermissionsMatrix } from "@/lib/actions/roles"
+import { PageHeader } from "@/components/shared/page-header"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Check, X, ShieldAlert, ShieldCheck, Info } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+
+const DEFAULT_ROLE_PERMISSIONS: Record<string, string[]> = {
+  SYS_ADMIN: ['DEVICES', 'REPORTS', 'ADMIN', 'AUDIT'],
+  ORG_ADMIN: ['DEVICES', 'REPORTS', 'ADMIN', 'AUDIT'],
+  HOSP_ADMIN: ['DEVICES', 'REPORTS', 'ADMIN', 'AUDIT'],
+  BIOMED_MGR: ['DEVICES', 'TICKETS', 'MAINTENANCE', 'PM_CALIBRATION', 'SIGNATURES', 'REPORTS', 'AUDIT'],
+  BIOMED_ENG: ['DEVICES', 'TICKETS', 'MAINTENANCE', 'PM_CALIBRATION', 'SIGNATURES', 'REPORTS'],
+  BIOMED_TECH: ['DEVICES', 'TICKETS', 'MAINTENANCE', 'PM_CALIBRATION', 'REPORTS'],
+  DEPT_MGR: ['DEVICES', 'TICKETS', 'REPORTS'],
+  STAFF: ['DEVICES', 'TICKETS'],
+  AUDITOR: ['DEVICES', 'TICKETS', 'MAINTENANCE', 'PM_CALIBRATION', 'SIGNATURES', 'REPORTS', 'AUDIT'],
+}
+
+const ROLE_DESCRIPTIONS: Record<string, { label: string; boundary: string }> = {
+  SYS_ADMIN: { label: "System Administrator", boundary: "Platform settings, users, and audit logs. No clinical sign-off authority." },
+  ORG_ADMIN: { label: "Organization Admin", boundary: "Health system administration and hospital configuration." },
+  HOSP_ADMIN: { label: "Hospital Admin", boundary: "Facility-level administrative operations and departmental oversight." },
+  BIOMED_MGR: { label: "Biomedical Manager", boundary: "Clinical engineering supervisor; reviews evidence and releases critical devices." },
+  BIOMED_ENG: { label: "Biomedical Engineer", boundary: "Triage, diagnosis, work execution, test recording, and performer signatures." },
+  BIOMED_TECH: { label: "Biomedical Technician", boundary: "Routine maintenance and ticket handling. Cannot sign release for critical equipment." },
+  DEPT_MGR: { label: "Department Manager", boundary: "Departmental request tracking and operational asset awareness." },
+  STAFF: { label: "Clinical Staff / Doctor", boundary: "QR device lookup, issue reporting, and requester ticket tracking." },
+  AUDITOR: { label: "Quality / Compliance Auditor", boundary: "Immutable read-only access to audit logs, histories, and signatures." },
+}
+
+export default async function RolesPage() {
+  const result = await getPermissionsMatrix()
+  const rolePerms = (result?.success && Array.isArray(result.data)) ? result.data : []
+
+  const roles = ['SYS_ADMIN', 'ORG_ADMIN', 'HOSP_ADMIN', 'BIOMED_MGR', 'BIOMED_ENG', 'BIOMED_TECH', 'DEPT_MGR', 'STAFF', 'AUDITOR']
+  const modules = ['DEVICES', 'TICKETS', 'MAINTENANCE', 'PM_CALIBRATION', 'SIGNATURES', 'REPORTS', 'ADMIN', 'AUDIT']
+
+  // Helper to check if a role has a module permission
+  const hasPermission = (roleCode: string, moduleName: string) => {
+    // Separation of Duties (Section 3.3 / Rule 8):
+    // System Administrators manage infrastructure and users, but CANNOT sign maintenance records or release medical devices
+    if ((roleCode === 'SYS_ADMIN' || roleCode === 'ORG_ADMIN' || roleCode === 'HOSP_ADMIN') && 
+        (moduleName === 'SIGNATURES' || moduleName === 'MAINTENANCE')) {
+      return false
+    }
+
+    const hasDbGrant = rolePerms.some((rp: any) => 
+      rp.role?.code === roleCode && 
+      rp.permission?.module?.toUpperCase() === moduleName.toUpperCase()
+    )
+    if (hasDbGrant) return true
+
+    // Fall back to documented clinical RBAC matrix
+    return DEFAULT_ROLE_PERMISSIONS[roleCode]?.includes(moduleName) ?? false
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader 
+        title="Roles & Permissions Matrix" 
+        description="Role-based access control (RBAC) governance and clinical separation of duties" 
+      />
+
+      {/* ── Governance & Separation of Duties Compliance Notice ── */}
+      <div className="rounded-xl border border-blue-200 bg-blue-50/50 p-4 space-y-2">
+        <div className="flex items-center gap-2 text-blue-900 font-semibold text-sm">
+          <ShieldCheck className="w-5 h-5 text-blue-600 shrink-0" />
+          <span>Separation of Duties Policy (21 CFR Part 11 / BEMMS Section 3.3)</span>
+        </div>
+        <p className="text-xs text-blue-800 leading-relaxed">
+          In compliance with medical device regulatory standards, administrative privileges are strictly decoupled from clinical engineering authorities. <strong>System Administrators</strong> manage accounts, security, and catalog settings, but cannot execute maintenance records or sign device release approvals without a verified biomedical engineering credential.
+        </p>
+      </div>
+
+      {/* ── Role Permission Matrix Table ── */}
+      <Card>
+        <CardHeader className="pb-3 border-b">
+          <CardTitle className="text-base font-semibold">System Module Access Matrix</CardTitle>
+        </CardHeader>
+        <CardContent className="pt-4 overflow-x-auto">
+          <table className="w-full text-sm text-left">
+            <thead className="bg-muted/50 text-muted-foreground uppercase text-xs">
+              <tr>
+                <th className="px-4 py-3 font-medium">Role</th>
+                {modules.map((mod: string) => (
+                  <th key={mod} className="px-3 py-3 font-medium text-center">{mod}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {roles.map((role: string) => (
+                <tr key={role} className="hover:bg-muted/30">
+                  <td className="px-4 py-3.5">
+                    <div className="font-semibold text-sm">{role}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {ROLE_DESCRIPTIONS[role]?.label || role}
+                    </div>
+                  </td>
+                  {modules.map((mod: string) => {
+                    const granted = hasPermission(role, mod)
+                    const isProtectedClinical = (role.includes('ADMIN') && (mod === 'SIGNATURES' || mod === 'MAINTENANCE'))
+
+                    return (
+                      <td key={`${role}-${mod}`} className="px-3 py-3.5 text-center">
+                        {granted ? (
+                          <div className="inline-flex items-center justify-center p-1 rounded bg-green-50 text-green-600">
+                            <Check className="w-4 h-4" />
+                          </div>
+                        ) : isProtectedClinical ? (
+                          <div className="inline-flex items-center justify-center p-1 rounded bg-red-50 text-red-400" title="Restricted by Separation of Duties policy">
+                            <X className="w-4 h-4" />
+                          </div>
+                        ) : (
+                          <div className="inline-flex items-center justify-center p-1 text-muted-foreground/30">
+                            <X className="w-4 h-4" />
+                          </div>
+                        )}
+                      </td>
+                    )
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+
+      {/* ── Role Boundaries Legend ── */}
+      <Card>
+        <CardHeader className="pb-3 border-b">
+          <CardTitle className="text-sm font-semibold flex items-center gap-2">
+            <Info className="w-4 h-4 text-primary" />
+            Role Safety Boundaries & Delegations
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          {roles.map((role) => (
+            <div key={role} className="p-3 rounded-lg border bg-muted/20 space-y-1">
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-xs font-bold text-primary">{role}</span>
+                <span className="text-xs text-muted-foreground font-medium">({ROLE_DESCRIPTIONS[role]?.label})</span>
+              </div>
+              <p className="text-xs text-muted-foreground leading-normal">
+                {ROLE_DESCRIPTIONS[role]?.boundary}
+              </p>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+