Nav bar and page title cleanup

src/App.tsx

@@ -51,7 +51,6 @@ 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 NetworkManagementPage from "@/pages/org/NetworkManagementPage";
@@ -203,7 +202,6 @@ function AppRoutes() {
           <Route path="/org/members/:userId" element={<RequireAdmin><UserManagementPage /></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

@@ -46,13 +46,14 @@ const userNavItems = [
   { title: "Linked Accounts", url: "/linked-accounts", icon: Link2 },
   { title: "Activity", url: "/activity", icon: Activity },
   { title: "CLI Guide", url: "/cli-guide", icon: BookOpen },
+  { title: "ZeroTier Devices", url: "/org/zerotier/devices", icon: Monitor },
+
 ];
 
 // Visible to ALL org members
 const orgMemberNavItems = [
   { title: "Overview", url: "/org", icon: Building2 },
   { title: "My Memberships", url: "/org/my-memberships", icon: Layers },
-  { title: "ZeroTier Devices", url: "/org/zerotier/devices", icon: Monitor },
 ];
 
 // Visible to org admins/owners only (management)
@@ -61,12 +62,10 @@ 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 },
   { title: "ZeroTier Config", url: "/org/zerotier/config", icon: Settings },
-  { title: "ZeroTier Devices", url: "/org/zerotier/devices", icon: Monitor },
 ];
 
 const adminNavItems = [

src/pages/org/AccessPage.tsx

@@ -359,7 +359,7 @@ export default function AccessPage() {
   return (
     <div className="page-container">
       <div className="page-header">
-        <h1 className="page-title">Access Control</h1>
+        <h1 className="page-title">ZeroTier Access</h1>
         <p className="page-description">Manage network access requests, approvals, and active sessions</p>
       </div>
 

src/pages/org/ApiKeysPage.tsx

@@ -1,428 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import {
-  Plus, Copy, Trash2, Loader2, AlertCircle, CheckCircle, MoreHorizontal, Edit2, Check
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } 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="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <div>
-          <h1 className="page-title">API Keys</h1>
-          <p className="page-description">Manage API keys for programmatic access to your organization.</p>
-        </div>
-        <Button onClick={() => setIsCreateDialogOpen(true)} className="gap-2">
-          <Plus className="w-4 h-4" />
-          Create API Key
-        </Button>
-      </div>
-
-      {/* New key reveal banner */}
-      {newSecret && (
-        <div className="mb-4 rounded-lg border border-green-500/40 bg-green-500/5 p-4 space-y-3">
-          <div className="flex items-center gap-2 text-sm font-medium text-green-600 dark:text-green-400">
-            <CheckCircle className="w-4 h-4" />
-            API key created — copy it now, you won't see it again.
-          </div>
-          <div className="flex items-center gap-2">
-            <code className="flex-1 text-xs bg-muted px-3 py-2 rounded break-all font-mono">
-              {newSecret.key}
-            </code>
-            <Button variant="outline" size="sm" className="shrink-0 gap-1.5" onClick={() => copy(newSecret.key)}>
-              {copied ? <><Check className="w-3.5 h-3.5" /> Copied</> : <><Copy className="w-3.5 h-3.5" /> Copy</>}
-            </Button>
-          </div>
-          <button onClick={() => setNewSecret(null)} className="text-xs text-muted-foreground hover:text-foreground transition-colors">
-            Dismiss
-          </button>
-        </div>
-      )}
-
-      {/* Key list */}
-      <Card>
-        <CardContent className="p-0">
-          {isLoading ? (
-            <div className="flex items-center justify-center p-8">
-              <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
-              <span className="ml-2 text-sm text-muted-foreground">Loading...</span>
-            </div>
-          ) : apiKeys.length === 0 ? (
-            <div className="p-12 text-center">
-              <AlertCircle className="w-8 h-8 text-muted-foreground mx-auto mb-3 opacity-40" />
-              <p className="text-sm font-medium text-foreground mb-1">No API keys yet</p>
-              <p className="text-xs text-muted-foreground mb-4">Create one to enable external integrations.</p>
-              <Button variant="outline" size="sm" onClick={() => setIsCreateDialogOpen(true)} className="gap-2">
-                <Plus className="w-4 h-4" /> Create API Key
-              </Button>
-            </div>
-          ) : (
-            <div className="divide-y">
-              {activeKeys.map((key) => (
-                <div key={key.id} className="flex items-start gap-4 p-4">
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <span className="font-medium text-sm text-foreground">{key.name}</span>
-                      {key.last_used_at && (
-                        <Badge variant="secondary" className="text-xs">
-                          Last used {formatDate(key.last_used_at)}
-                        </Badge>
-                      )}
-                    </div>
-                    {key.description && (
-                      <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{key.description}</p>
-                    )}
-                    <p className="text-xs text-muted-foreground mt-1">Created {formatDate(key.created_at)}</p>
-                  </div>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" size="icon" className="h-8 w-8 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>
-              ))}
-
-              {revokedKeys.length > 0 && (
-                <>
-                  <div className="px-4 py-2 bg-muted/30">
-                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Revoked</span>
-                  </div>
-                  {revokedKeys.map((key) => (
-                    <div key={key.id} className="flex items-center gap-4 px-4 py-3 opacity-50">
-                      <div className="flex-1 min-w-0">
-                        <p className="text-sm 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>
-                  ))}
-                </>
-              )}
-            </div>
-          )}
-        </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/DevicesPage.tsx

@@ -400,7 +400,7 @@ export default function DevicesPage() {
   return (
     <div className="page-container">
       <div className="page-header">
-        <h1 className="page-title">ZeroTier Access</h1>
+        <h1 className="page-title">ZeroTier Devices</h1>
         <p className="page-description">Manage your devices, networks, and access requests</p>
       </div>
 

src/pages/org/NetworksPage.tsx

@@ -291,7 +291,7 @@ export default function NetworksPage() {
   return (
     <div className="page-container">
       <div className="page-header">
-        <h1 className="page-title">Networks</h1>
+        <h1 className="page-title">ZeroTier Networks</h1>
         <p className="page-description">Manage ZeroTier portal networks and monitor access</p>
       </div>