Feat: Implemented SUDO Department & API Key

src/App.tsx

@@ -47,6 +47,7 @@ import OIDCClientsPage from "@/pages/org/OIDCClientsPage";
 import CAsPage from "@/pages/org/CAsPage";
 import DepartmentsPage from "@/pages/org/DepartmentsPage";
 import PrincipalsPage from "@/pages/org/PrincipalsPage";
+import ApiKeysPage from "@/pages/org/ApiKeysPage";
 import MyMembershipsPage from "@/pages/org/MyMembershipsPage";
 import NetworksPage from "@/pages/org/NetworksPage";
 import DevicesPage from "@/pages/org/DevicesPage";
@@ -184,6 +185,7 @@ function AppRoutes() {
           <Route path="/org/members" element={<RequireAdmin><MembersPage /></RequireAdmin>} />
           <Route path="/org/departments" element={<RequireAdmin><DepartmentsPage /></RequireAdmin>} />
           <Route path="/org/principals" element={<RequireAdmin><PrincipalsPage /></RequireAdmin>} />
+          <Route path="/org/api-keys" element={<RequireAdmin><ApiKeysPage /></RequireAdmin>} />
           <Route path="/org/policies" element={<RequireAdmin><PoliciesPage /></RequireAdmin>} />
           <Route path="/org/policies/compliance" element={<RequireAdmin><CompliancePage /></RequireAdmin>} />
           <Route path="/org/audit" element={<RequireAdmin><OrgAuditPage /></RequireAdmin>} />

src/components/navigation/AppSidebar.tsx

@@ -57,6 +57,7 @@ const orgAdminNavItems = [
   { title: "Members", url: "/org/members", icon: Users },
   { title: "Departments", url: "/org/departments", icon: Layers },
   { title: "Principals", url: "/org/principals", icon: GitBranch },
+  { title: "API Keys", url: "/org/api-keys", icon: Key },
   { title: "Policies", url: "/org/policies", icon: Settings },
   { title: "ZeroTier Networks", url: "/org/zerotier/networks", icon: Network },
   { title: "ZeroTier Access", url: "/org/zerotier/access", icon: ShieldAlert },

src/lib/api.ts

@@ -248,6 +248,38 @@ export interface LinkAccountResponse {
   linked_account: LinkedAccount;
 }
 
+export interface OrganizationApiKey {
+  id: string;
+  organization_id: string;
+  name: string;
+  description: string | null;
+  key_hash?: string; // Usually excluded from responses for security
+  last_used_at: string | null;
+  is_revoked: boolean;
+  revoked_at: string | null;
+  revoke_reason: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CertificateAuditLog {
+  id: string;
+  action: string;
+  certificate_serial: string;
+  key_id: string;
+  principals: string[];
+  user_id: string;
+  user_email: string | null;
+  issued_at: string;
+  valid_after: string;
+  valid_before: string;
+  ip_address: string | null;
+  user_agent: string | null;
+  message: string | null;
+  success: boolean;
+  created_at: string;
+}
+
 class ApiError extends Error {
   code: number;
   type: string;
@@ -954,14 +986,14 @@ export const api = {
       request<{ departments: Department[]; count: number }>(`/organizations/${orgId}/departments`, {}, true, requestConfig),
 
     // Create department
-    createDepartment: (orgId: string, name: string, description?: string, requestConfig?: RequestConfig) =>
+    createDepartment: (orgId: string, name: string, description?: string, canSudo?: boolean, requestConfig?: RequestConfig) =>
       request<{ department: Department }>(`/organizations/${orgId}/departments`, {
         method: 'POST',
-        body: JSON.stringify({ name, description }),
+        body: JSON.stringify({ name, description, can_sudo: canSudo }),
       }, true, requestConfig),
 
     // Update department
-    updateDepartment: (orgId: string, deptId: string, data: { name?: string; description?: string }, requestConfig?: RequestConfig) =>
+    updateDepartment: (orgId: string, deptId: string, data: { name?: string; description?: string; can_sudo?: boolean }, requestConfig?: RequestConfig) =>
       request<{ department: Department }>(`/organizations/${orgId}/departments/${deptId}`, {
         method: 'PATCH',
         body: JSON.stringify(data),
@@ -1130,6 +1162,39 @@ export const api = {
       request<{ ca_id: string }>(`/organizations/${orgId}/cas/${caId}`, {
         method: 'DELETE',
       }, true, requestConfig),
+
+    // Get API keys for organization
+    getApiKeys: (orgId: string, requestConfig?: RequestConfig) =>
+      request<{ api_keys: OrganizationApiKey[]; count: number }>(`/organizations/${orgId}/api-keys`, {}, true, requestConfig),
+
+    // Create new API key
+    createApiKey: (orgId: string, name: string, description?: string, requestConfig?: RequestConfig) =>
+      request<{ api_key: OrganizationApiKey & { key?: string } }>(`/organizations/${orgId}/api-keys`, {
+        method: 'POST',
+        body: JSON.stringify({ name, description }),
+      }, true, requestConfig),
+
+    // Update API key
+    updateApiKey: (orgId: string, keyId: string, data: { name?: string; description?: string }, requestConfig?: RequestConfig) =>
+      request<{ api_key: OrganizationApiKey }>(`/organizations/${orgId}/api-keys/${keyId}`, {
+        method: 'PATCH',
+        body: JSON.stringify(data),
+      }, true, requestConfig),
+
+    // Delete API key
+    deleteApiKey: (orgId: string, keyId: string, requestConfig?: RequestConfig) =>
+      request<{ message: string }>(`/organizations/${orgId}/api-keys/${keyId}`, {
+        method: 'DELETE',
+      }, true, requestConfig),
+
+    // Get certificate audit logs for organization
+    getCertificateAuditLogs: (orgId: string, params?: Record<string, string>, requestConfig?: RequestConfig) =>
+      request<{ audit_logs: CertificateAuditLog[]; count: number; page: number; per_page: number; pages: number }>(
+        `/organizations/${orgId}/certificates/audit${params ? '?' + new URLSearchParams(params).toString() : ''}`,
+        {},
+        true,
+        requestConfig
+      ),
   },
 
   invites: {
@@ -1557,6 +1622,7 @@ export interface Department {
   organization_id: string;
   name: string;
   description: string | null;
+  can_sudo: boolean;
   created_at: string;
   updated_at: string;
   deleted_at: string | null;

src/pages/org/ApiKeysPage.tsx

@@ -0,0 +1,496 @@
+import { useState, useEffect, useRef } from "react";
+import {
+  Plus, Copy, Trash2, Loader2, AlertCircle, CheckCircle, Eye, EyeOff, MoreHorizontal, Edit2, Check
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { api, OrganizationApiKey } from "@/lib/api";
+import { useToast } from "@/hooks/use-toast";
+import { useOrg } from "@/contexts/OrgContext";
+import { formatDate } from "@/lib/date";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+
+interface NewApiKeyState {
+  key: string;
+  name: string;
+  description?: string;
+  createdAt: string;
+}
+
+interface EditingKey {
+  id: string;
+  name: string;
+  description: string | null;
+}
+
+function useCopyButton() {
+  const [copied, setCopied] = useState(false);
+  const copy = (text: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+  return { copied, copy };
+}
+
+export default function ApiKeysPage() {
+  const { toast } = useToast();
+  const { selectedOrgId: orgId } = useOrg();
+  const queryClient = useQueryClient();
+  const { copy, copied } = useCopyButton();
+
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [newSecret, setNewSecret] = useState<NewApiKeyState | null>(null);
+  const [editingKey, setEditingKey] = useState<EditingKey | null>(null);
+  const [showKey, setShowKey] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+
+  const nameRef = useRef<HTMLInputElement>(null);
+  const descriptionRef = useRef<HTMLTextAreaElement>(null);
+  const editNameRef = useRef<HTMLInputElement>(null);
+  const editDescriptionRef = useRef<HTMLTextAreaElement>(null);
+
+  // Fetch API keys
+  const { data: apiKeysData, isLoading } = useQuery({
+    queryKey: ['api-keys', orgId],
+    queryFn: () => orgId ? api.organizations.getApiKeys(orgId) : null,
+    enabled: !!orgId,
+  });
+
+  // Create API key mutation
+  const { mutate: createKey, isPending: isCreatingKey } = useMutation({
+    mutationFn: () => {
+      if (!orgId) throw new Error('Organization ID not set');
+      const name = nameRef.current?.value;
+      const description = descriptionRef.current?.value;
+      if (!name) throw new Error('Name is required');
+      return api.organizations.createApiKey(orgId, name, description);
+    },
+    onSuccess: (data) => {
+      const apiKey = data.api_key;
+      setNewSecret({
+        key: apiKey.key || '',
+        name: apiKey.name,
+        description: apiKey.description || undefined,
+        createdAt: apiKey.created_at,
+      });
+      setIsCreateDialogOpen(false);
+      if (nameRef.current) nameRef.current.value = '';
+      if (descriptionRef.current) descriptionRef.current.value = '';
+      queryClient.invalidateQueries({ queryKey: ['api-keys', orgId] });
+      toast({
+        title: 'API Key Created',
+        description: 'Store the key value securely - you won\'t be able to see it again.',
+      });
+    },
+    onError: () => {
+      toast({
+        title: 'Failed to create API key',
+        description: 'Please try again.',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  // Update API key mutation
+  const { mutate: updateKey, isPending: isUpdatingKey } = useMutation({
+    mutationFn: () => {
+      if (!orgId || !editingKey) throw new Error('Required data missing');
+      return api.organizations.updateApiKey(orgId, editingKey.id, {
+        name: editNameRef.current?.value,
+        description: editDescriptionRef.current?.value,
+      });
+    },
+    onSuccess: () => {
+      setIsEditDialogOpen(false);
+      queryClient.invalidateQueries({ queryKey: ['api-keys', orgId] });
+      toast({
+        title: 'API Key Updated',
+        description: 'Changes saved successfully.',
+      });
+    },
+    onError: () => {
+      toast({
+        title: 'Failed to update API key',
+        description: 'Please try again.',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  // Delete API key mutation
+  const { mutate: deleteKey, isPending: isDeletingKey } = useMutation({
+    mutationFn: (keyId: string) => {
+      if (!orgId) throw new Error('Organization ID not set');
+      return api.organizations.deleteApiKey(orgId, keyId);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['api-keys', orgId] });
+      toast({
+        title: 'API Key Deleted',
+        description: 'The API key has been permanently removed.',
+      });
+    },
+    onError: () => {
+      toast({
+        title: 'Failed to delete API key',
+        description: 'Please try again.',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const handleCreateKey = () => {
+    setIsCreating(true);
+    createKey();
+    setIsCreating(false);
+  };
+
+  const handleEditKey = (key: OrganizationApiKey) => {
+    setEditingKey({
+      id: key.id,
+      name: key.name,
+      description: key.description,
+    });
+    setIsEditDialogOpen(true);
+  };
+
+  const handleUpdateKey = () => {
+    updateKey();
+  };
+
+  const handleDeleteKey = (keyId: string) => {
+    if (confirm('Are you sure you want to delete this API key? This action cannot be undone.')) {
+      deleteKey(keyId);
+    }
+  };
+
+  const apiKeys = apiKeysData?.api_keys || [];
+  const activeKeys = apiKeys.filter(k => !k.is_revoked);
+  const revokedKeys = apiKeys.filter(k => k.is_revoked);
+
+  if (isLoading) {
+    return (
+      <div className="page-container">
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="page-container">
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-foreground">API Keys</h1>
+        <p className="text-muted-foreground mt-2">
+          Manage API keys for external integrations and programmatic access to your organization.
+        </p>
+      </div>
+
+      {/* New key notification */}
+      {newSecret && (
+        <Card className="mb-6 border-success/50 bg-success/5">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-success">
+              <CheckCircle className="w-5 h-5" />
+              New API Key Created
+            </CardTitle>
+            <CardDescription>
+              Store this key securely. You won't be able to see it again.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <Label>Key Name</Label>
+              <p className="text-sm text-foreground mt-1">{newSecret.name}</p>
+            </div>
+            <div>
+              <Label className="flex items-center justify-between">
+                <span>API Key Value</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => copy(newSecret.key)}
+                  className="h-auto p-0 text-xs"
+                >
+                  {copied ? (
+                    <span className="text-success flex items-center gap-1">
+                      <Check className="w-3 h-3" /> Copied
+                    </span>
+                  ) : (
+                    <span className="flex items-center gap-1">
+                      <Copy className="w-3 h-3" /> Copy
+                    </span>
+                  )}
+                </Button>
+              </Label>
+              <code className="block text-xs bg-muted p-2 rounded mt-1 break-all text-foreground">
+                {newSecret.key}
+              </code>
+            </div>
+            <Button
+              onClick={() => setNewSecret(null)}
+              variant="outline"
+              className="w-full"
+            >
+              Close
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Create button */}
+      <div className="mb-6 flex justify-end">
+        <Button
+          onClick={() => setIsCreateDialogOpen(true)}
+          className="gap-2"
+        >
+          <Plus className="w-4 h-4" />
+          Create API Key
+        </Button>
+      </div>
+
+      {/* Active Keys */}
+      {activeKeys.length > 0 && (
+        <div className="mb-6">
+          <h2 className="text-lg font-semibold mb-3 text-foreground">Active Keys</h2>
+          <div className="space-y-2">
+            {activeKeys.map((key) => (
+              <Card key={key.id} className="hover:border-primary/50 transition-colors">
+                <CardContent className="py-4">
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h3 className="font-medium text-foreground truncate">{key.name}</h3>
+                        {key.last_used_at && (
+                          <Badge variant="secondary" className="text-xs whitespace-nowrap">
+                            Last used: {formatDate(key.last_used_at)}
+                          </Badge>
+                        )}
+                      </div>
+                      {key.description && (
+                        <p className="text-xs text-muted-foreground line-clamp-2">
+                          {key.description}
+                        </p>
+                      )}
+                      <p className="text-xs text-muted-foreground mt-2">
+                        Created {formatDate(key.created_at)}
+                      </p>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-8 w-8 p-0 shrink-0"
+                        >
+                          <MoreHorizontal className="w-4 h-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => handleEditKey(key)}
+                          className="cursor-pointer"
+                        >
+                          <Edit2 className="w-4 h-4 mr-2" />
+                          Edit
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          onClick={() => handleDeleteKey(key.id)}
+                          className="text-destructive cursor-pointer"
+                          disabled={isDeletingKey}
+                        >
+                          <Trash2 className="w-4 h-4 mr-2" />
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Revoked Keys */}
+      {revokedKeys.length > 0 && (
+        <div className="mb-6 opacity-60">
+          <h2 className="text-lg font-semibold mb-3 text-foreground">Revoked Keys</h2>
+          <div className="space-y-2">
+            {revokedKeys.map((key) => (
+              <Card key={key.id} className="bg-muted/30">
+                <CardContent className="py-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <div>
+                      <p className="text-sm font-medium text-muted-foreground line-through">
+                        {key.name}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        Revoked {formatDate(key.revoked_at || '')}
+                        {key.revoke_reason && ` - ${key.revoke_reason}`}
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {apiKeys.length === 0 && (
+        <Card className="border-dashed">
+          <CardContent className="py-12 text-center">
+            <AlertCircle className="w-12 h-12 text-muted-foreground mx-auto mb-4 opacity-50" />
+            <h3 className="font-medium text-foreground mb-1">No API Keys</h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              Create your first API key to enable external integrations.
+            </p>
+            <Button
+              onClick={() => setIsCreateDialogOpen(true)}
+              variant="outline"
+              className="gap-2"
+            >
+              <Plus className="w-4 h-4" />
+              Create API Key
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Create Dialog */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create API Key</DialogTitle>
+            <DialogDescription>
+              Create a new API key for external integrations. The key will be displayed only once.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="key-name">Key Name</Label>
+              <Input
+                id="key-name"
+                ref={nameRef}
+                placeholder="e.g., Production Integration"
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <Label htmlFor="key-description">Description (Optional)</Label>
+              <Textarea
+                id="key-description"
+                ref={descriptionRef}
+                placeholder="What is this key for?"
+                className="mt-1 resize-none h-20"
+              />
+            </div>
+            <div className="flex gap-3 justify-end">
+              <Button
+                variant="outline"
+                onClick={() => setIsCreateDialogOpen(false)}
+                disabled={isCreating || isCreatingKey}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleCreateKey}
+                disabled={isCreating || isCreatingKey}
+              >
+                {isCreatingKey ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  'Create Key'
+                )}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Dialog */}
+      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit API Key</DialogTitle>
+            <DialogDescription>
+              Update the name and description of this API key.
+            </DialogDescription>
+          </DialogHeader>
+          {editingKey && (
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor="edit-key-name">Key Name</Label>
+                <Input
+                  id="edit-key-name"
+                  ref={editNameRef}
+                  defaultValue={editingKey.name}
+                  className="mt-1"
+                />
+              </div>
+              <div>
+                <Label htmlFor="edit-key-description">Description (Optional)</Label>
+                <Textarea
+                  id="edit-key-description"
+                  ref={editDescriptionRef}
+                  defaultValue={editingKey.description || ''}
+                  className="mt-1 resize-none h-20"
+                />
+              </div>
+              <div className="flex gap-3 justify-end">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsEditDialogOpen(false)}
+                  disabled={isUpdatingKey}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleUpdateKey}
+                  disabled={isUpdatingKey}
+                >
+                  {isUpdatingKey ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      Updating...
+                    </>
+                  ) : (
+                    'Update Key'
+                  )}
+                </Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/pages/org/DepartmentsPage.tsx

@@ -390,7 +390,7 @@ export default function DepartmentsPage() {
   const [selectedPrincipalId, setSelectedPrincipalId] = useState("");
   const [isLinking, setIsLinking] = useState(false);
   const [editingDept, setEditingDept] = useState<Department | null>(null);
-  const [formData, setFormData] = useState({ name: "", description: "" });
+  const [formData, setFormData] = useState({ name: "", description: "", can_sudo: false });
   const [expandedPolicies, setExpandedPolicies] = useState<Set<string>>(new Set());
   const [expandedMembers, setExpandedMembers] = useState<Set<string>>(new Set());
 
@@ -502,12 +502,13 @@ export default function DepartmentsPage() {
   const handleCreateDepartment = async () => {
     if (!orgId || !formData.name.trim()) return;
     try {
-      await api.organizations.createDepartment(
+      const dept = await api.organizations.createDepartment(
         orgId,
         formData.name,
-        formData.description || undefined
+        formData.description || undefined,
+        formData.can_sudo
       );
-      setFormData({ name: "", description: "" });
+      setFormData({ name: "", description: "", can_sudo: false });
       setIsCreateDialogOpen(false);
       await fetchDepartments(orgId);
     } catch (err) {
@@ -522,8 +523,9 @@ export default function DepartmentsPage() {
       await api.organizations.updateDepartment(orgId, editingDept.id, {
         name: formData.name,
         description: formData.description || undefined,
+        can_sudo: formData.can_sudo,
       });
-      setFormData({ name: "", description: "" });
+      setFormData({ name: "", description: "", can_sudo: false });
       setEditingDept(null);
       setIsEditDialogOpen(false);
       await fetchDepartments(orgId);
@@ -546,7 +548,7 @@ export default function DepartmentsPage() {
 
   const openEditDialog = (dept: Department) => {
     setEditingDept(dept);
-    setFormData({ name: dept.name, description: dept.description || "" });
+    setFormData({ name: dept.name, description: dept.description || "", can_sudo: dept.can_sudo || false });
     setIsEditDialogOpen(true);
   };
 
@@ -572,7 +574,7 @@ export default function DepartmentsPage() {
             Manage departments and organize team members
           </p>
         </div>
-        <Button onClick={() => { setFormData({ name: "", description: "" }); setIsCreateDialogOpen(true); }}>
+        <Button onClick={() => { setFormData({ name: "", description: "", can_sudo: false }); setIsCreateDialogOpen(true); }}>
           <Plus className="w-4 h-4 mr-2" />
           Create Department
         </Button>
@@ -615,10 +617,15 @@ export default function DepartmentsPage() {
                       <Users className="w-4 h-4" />
                     </div>
                     <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-2 flex-wrap">
                         <p className="font-medium text-foreground">
                           {dept.name}
                         </p>
+                        {dept.can_sudo && (
+                          <Badge variant="secondary" className="text-xs bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300">
+                            Sudo enabled
+                          </Badge>
+                        )}
                       </div>
                       {dept.description && (
                         <p className="mt-1 text-sm text-muted-foreground">
@@ -751,6 +758,18 @@ export default function DepartmentsPage() {
                 rows={3}
               />
             </div>
+            <div className="flex items-center justify-between p-3 border rounded-lg bg-muted/30">
+              <div>
+                <Label className="text-base font-medium cursor-pointer">Allow sudo access</Label>
+                <p className="text-xs text-muted-foreground mt-1">Members of this department can use sudo</p>
+              </div>
+              <input
+                type="checkbox"
+                checked={formData.can_sudo}
+                onChange={(e) => setFormData({ ...formData, can_sudo: e.target.checked })}
+                className="w-4 h-4 cursor-pointer"
+              />
+            </div>
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
@@ -792,6 +811,18 @@ export default function DepartmentsPage() {
                 rows={3}
               />
             </div>
+            <div className="flex items-center justify-between p-3 border rounded-lg bg-muted/30">
+              <div>
+                <Label className="text-base font-medium cursor-pointer">Allow sudo access</Label>
+                <p className="text-xs text-muted-foreground mt-1">Members of this department can use sudo</p>
+              </div>
+              <input
+                type="checkbox"
+                checked={formData.can_sudo}
+                onChange={(e) => setFormData({ ...formData, can_sudo: e.target.checked })}
+                className="w-4 h-4 cursor-pointer"
+              />
+            </div>
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>

src/pages/org/ca/CADetailCard.tsx

@@ -48,10 +48,10 @@ export function CADetailCard({ ca, onEdit, onRotate, onDelete }: CADetailCardPro
 
   // ── User CA: server trusts this public key so it accepts user certs ──────
   const userCaServerSnippet = `# On each SSH server — trust Secuird-issued user certificates:
-echo '${ca.public_key.trim()}' >> /etc/ssh/trusted_user_ca_keys
+echo '${ca.public_key.trim()}' >> /etc/ssh/trusted_user_ca
 
 # /etc/ssh/sshd_config  (add once, then reload sshd):
-TrustedUserCAKeys /etc/ssh/trusted_user_ca_keys
+TrustedUserCAKeys /etc/ssh/trusted_user_ca
 AuthorizedPrincipalsFile /etc/ssh/auth_principals/%u
 # Create /etc/ssh/auth_principals/<unix-user> containing one principal per line.`;
 

src/pages/user/SSHKeysPage.tsx

@@ -689,9 +689,9 @@ export default function SSHKeysPage() {
                     </p>
                     <pre className="text-xs font-mono whitespace-pre-wrap break-all">
 {`# On each SSH server:
-echo '<ca_public_key>' >> /etc/ssh/trusted_user_ca_keys
+echo '<ca_public_key>' >> /etc/ssh/trusted_user_ca
 # In /etc/ssh/sshd_config:
-TrustedUserCAKeys /etc/ssh/trusted_user_ca_keys`}
+TrustedUserCAKeys /etc/ssh/trusted_user_ca`}
                     </pre>
                   </div>
                 </div>