feat: add per-state action dropdowns and table view to ZeroTier All Approvals

src/App.tsx

@@ -61,6 +61,7 @@ import SystemAuditPage from "@/pages/admin/SystemAuditPage";
 import OAuthProvidersPage from "@/pages/admin/OAuthProvidersPage";
 import OrgSetupPage from "@/pages/auth/OrgSetupPage";
 
+import SessionTimeoutModal from "@/components/auth/SessionTimeoutModal";
 import NotFound from "@/pages/NotFound";
 
 const queryClient = new QueryClient({
@@ -151,6 +152,7 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
 function AppRoutes() {
   return (
     <AuthProvider>
+      <SessionTimeoutModal />
       <OrgProvider>
       <Routes>
         {/* Marketing pages */}

src/components/auth/SessionTimeoutModal.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { tokenManager } from '@/lib/api';
+
+export default function SessionTimeoutModal() {
+  const [open, setOpen] = useState(false);
+  const navigate = useNavigate();
+
+  const handleOpenChange = useCallback((isOpen: boolean) => {
+    if (!isOpen) {
+      tokenManager.clearToken();
+      navigate('/login', { replace: true });
+    }
+  }, [navigate]);
+
+  useEffect(() => {
+    const onSessionExpired = () => setOpen(true);
+    window.addEventListener('session:expired', onSessionExpired);
+    return () => window.removeEventListener('session:expired', onSessionExpired);
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>Session Expired</DialogTitle>
+          <DialogDescription>
+            Your session has timed out. Please sign in again to continue.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex justify-end">
+          <Button onClick={() => { tokenManager.clearToken(); navigate('/login', { replace: true }); }}>
+            Sign In
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/lib/api.ts

@@ -434,6 +434,8 @@ async function request<T>(
 
       if (shouldClearToken) {
         tokenManager.clearToken();
+        // Dispatch event so the UI can show a session timeout modal
+        window.dispatchEvent(new CustomEvent('session:expired'));
         if (import.meta.env.DEV) {
           console.log(`[API] Token cleared on 401 (type: ${errorType}, endpoint: ${endpoint})`);
         }
@@ -2114,9 +2116,13 @@ export interface UserNetworkApproval {
   user_name: string | null;
   user_email: string | null;
   portal_network_id: string;
+  device_id?: string;
+  active?: boolean;
+  active_session?: ActivationSession | null;
+  join_seen?: boolean;
   granted_by_user_id: string | null;
   grant_type: ApprovalGrantType;
-  state: ApprovalState;
+  status: ApprovalState;
   justification: string | null;
   created_at: string;
   updated_at: string;

src/pages/org/AccessPage.tsx

@@ -123,10 +123,13 @@ export default function AccessPage() {
   const [search, setSearch] = useState("");
   const [selectedNetworkFilter, setSelectedNetworkFilter] = useState<string>("all");
 
+  const [approvalStateFilter, setApprovalStateFilter] = useState<ApprovalState | "all">("all");
+
   const [approveId, setApproveId] = useState<string | null>(null);
   const [rejectId, setRejectId] = useState<string | null>(null);
   const [revokeId, setRevokeId] = useState<string | null>(null);
   const [isApproving, setIsApproving] = useState(false);
+  const [rejectConfirmId, setRejectConfirmId] = useState<string | null>(null);
 
   const [showAssign, setShowAssign] = useState(false);
   const [assignUserId, setAssignUserId] = useState("");
@@ -384,6 +387,17 @@ export default function AccessPage() {
     return true;
   });
 
+  const filteredApprovals = approvals.filter((a) => {
+    if (approvalStateFilter !== "all" && a.state !== approvalStateFilter) return false;
+    if (selectedNetworkFilter !== "all" && a.portal_network_id !== selectedNetworkFilter) return false;
+    if (search) {
+      const q = search.toLowerCase();
+      const display = getUserDisplay(a.user_id).toLowerCase();
+      if (!display.includes(q)) return false;
+    }
+    return true;
+  });
+
   const filteredSessions = sessions.filter((s) => s.is_active);
   const activeSessions = filteredSessions;
 
@@ -484,7 +498,7 @@ export default function AccessPage() {
                         <div className="flex items-center gap-2 flex-wrap">
                           <p className="font-medium truncate">{getUserDisplay(approval.user_id)}</p>
                           <Badge variant="outline" className="text-xs">{getNetworkName(approval.portal_network_id)}</Badge>
-                          <ApprovalStateBadge state={approval.state} />
+                          <ApprovalStateBadge state={approval.status} />
                         </div>
                         <p className="text-sm text-muted-foreground">
                           {approval.grant_type === "requested" ? "User request" : "Manager assignment"}
@@ -603,10 +617,25 @@ export default function AccessPage() {
         <TabsContent value="approvals">
           <Card>
             <CardHeader className="pb-3">
+              <div className="flex items-center justify-between flex-wrap gap-2">
                 <CardTitle className="text-base flex items-center gap-2">
                   <Shield className="w-4 h-4" />
                   All Approvals
                 </CardTitle>
+                <Select value={approvalStateFilter} onValueChange={(v) => setApprovalStateFilter(v as ApprovalState | "all")}>
+                  <SelectTrigger className="w-[160px] h-8">
+                    <SelectValue placeholder="Filter by state" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All States</SelectItem>
+                    <SelectItem value="pending">Pending</SelectItem>
+                    <SelectItem value="approved">Approved</SelectItem>
+                    <SelectItem value="rejected">Rejected</SelectItem>
+                    <SelectItem value="revoked">Revoked</SelectItem>
+                    <SelectItem value="suspended">Suspended</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
               <CardDescription>Complete history of network access grants</CardDescription>
             </CardHeader>
             <CardContent className="p-0">
@@ -615,41 +644,129 @@ export default function AccessPage() {
                   <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
                   <span className="ml-2 text-muted-foreground">Loading…</span>
                 </div>
-              ) : approvals.length === 0 ? (
+              ) : filteredApprovals.length === 0 ? (
-                <div className="p-8 text-center text-muted-foreground">No approvals found.</div>
+                <div className="p-8 text-center text-muted-foreground">
+                  {approvalStateFilter !== "all" || search || selectedNetworkFilter !== "all"
+                    ? "No approvals match your filters."
+                    : "No approvals found."}
+                </div>
               ) : (
-                <div className="divide-y">
+                <div className="overflow-x-auto">
-                  {approvals.map((approval) => (
+                  <table className="w-full text-sm">
-                    <div key={approval.id} className="flex items-center gap-4 p-4">
+                    <thead>
-                      <div className="flex-1 min-w-0">
+                      <tr className="border-b bg-muted/50">
-                        <div className="flex items-center gap-2 flex-wrap">
+                        <th className="text-left p-3 font-medium">User</th>
-                          <p className="font-medium truncate">{getUserDisplay(approval.user_id)}</p>
+                        <th className="text-left p-3 font-medium">Device</th>
-                          <Badge variant="outline" className="text-xs">{getNetworkName(approval.portal_network_id)}</Badge>
+                        <th className="text-left p-3 font-medium">Network</th>
-                          <ApprovalStateBadge state={approval.state} />
+                        <th className="text-left p-3 font-medium">Status</th>
-                        </div>
+                        <th className="text-left p-3 font-medium">Requested</th>
-                        <p className="text-sm text-muted-foreground">
+                        <th className="text-left p-3 font-medium">Approved</th>
-                          {approval.grant_type === "requested" ? "User request" : "Manager assignment"}
+                        <th className="text-right p-3 font-medium">Actions</th>
-                          {approval.justification && ` — "${approval.justification}"`}
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y">
+                      {filteredApprovals.map((approval) => (
+                        <tr key={approval.id} className="hover:bg-accent/30">
+                          <td className="p-3">
+                            <div className="min-w-0">
+                              <p className="font-medium truncate max-w-[160px]">{getUserDisplay(approval.user_id)}</p>
+                              {approval.justification && (
+                                <p className="text-xs text-muted-foreground truncate max-w-[160px]" title={approval.justification}>
+                                  "{approval.justification}"
                                 </p>
-                        <p className="text-xs text-muted-foreground mt-1">
-                          {formatDate(approval.created_at)}
-                          {approval.granted_by_user_id && ` · Granted by: ${getUserDisplay(approval.granted_by_user_id)}`}
-                        </p>
-                      </div>
-                      {(approval.state === "approved" || approval.state === "suspended") && (
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          className="text-red-600 border-red-300 hover:bg-red-50 gap-1 flex-shrink-0"
-                          onClick={() => handleRevoke(approval.id)}
-                          disabled={revokeId === approval.id || isApproving}
-                        >
-                          {revokeId === approval.id ? <Loader2 className="w-3 h-3 animate-spin" /> : <XCircle className="w-3 h-3" />}
-                          Revoke
-                        </Button>
                               )}
                             </div>
+                          </td>
+                          <td className="p-3">
+                            {approval.device_id ? (
+                              <span className="font-mono text-xs">{approval.device_id}</span>
+                            ) : (
+                              <span className="text-xs text-muted-foreground">—</span>
+                            )}
+                          </td>
+                          <td className="p-3">
+                            <span className="text-xs font-medium">{getNetworkName(approval.portal_network_id)}</span>
+                          </td>
+                          <td className="p-3">
+                            <ApprovalStateBadge state={approval.status} />
+                          </td>
+                          <td className="p-3">
+                            <span className="text-xs">{formatDate(approval.created_at)}</span>
+                          </td>
+                          <td className="p-3">
+                            {approval.status !== "pending" ? (
+                              <div>
+                                <span className="text-xs">{formatDate(approval.updated_at)}</span>
+                                {approval.granted_by_user_id && (
+                                  <p className="text-xs text-muted-foreground">by {getUserDisplay(approval.granted_by_user_id)}</p>
+                                )}
+                              </div>
+                            ) : (
+                              <span className="text-xs text-muted-foreground">—</span>
+                            )}
+                          </td>
+                          <td className="p-3 text-right">
+                            {approval.status === "pending" || approval.status === "approved" || approval.status === "suspended" ? (
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <Button
+                                    size="sm"
+                                    variant="ghost"
+                                    className="h-8 w-8 p-0"
+                                    disabled={
+                                      (approval.status === "pending" && (approveId === approval.id || rejectId === approval.id)) ||
+                                      ((approval.status === "approved" || approval.status === "suspended") && (revokeId === approval.id))
+                                    }
+                                  >
+                                    {((approval.status === "pending" && (approveId === approval.id || rejectId === approval.id)) ||
+                                      ((approval.status === "approved" || approval.status === "suspended") && revokeId === approval.id)) ? (
+                                      <Loader2 className="w-4 h-4 animate-spin" />
+                                    ) : (
+                                      <MoreHorizontal className="w-4 h-4" />
+                                    )}
+                                  </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end" className="min-w-[140px]">
+                                  {approval.status === "pending" && (
+                                    <>
+                                      <DropdownMenuItem
+                                        onClick={() => handleApprove(approval.id)}
+                                        disabled={approveId === approval.id || isApproving}
+                                        className="text-green-600 focus:text-green-700"
+                                      >
+                                        <CheckCircle className="w-4 h-4 mr-2" />
+                                        Approve
+                                      </DropdownMenuItem>
+                                      <DropdownMenuItem
+                                        onClick={() => setRejectConfirmId(approval.id)}
+                                        disabled={rejectId === approval.id || isApproving}
+                                        className="text-red-600 focus:text-red-700"
+                                      >
+                                        <XCircle className="w-4 h-4 mr-2" />
+                                        Reject
+                                      </DropdownMenuItem>
+                                    </>
+                                  )}
+                                  {(approval.status === "approved" || approval.status === "suspended") && (
+                                    <DropdownMenuItem
+                                      onClick={() => handleRevoke(approval.id)}
+                                      disabled={revokeId === approval.id || isApproving}
+                                      className="text-red-600 focus:text-red-700"
+                                    >
+                                      <XCircle className="w-4 h-4 mr-2" />
+                                      Revoke
+                                    </DropdownMenuItem>
+                                  )}
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            ) : (
+                              <span className="text-xs text-muted-foreground">—</span>
+                            )}
+                          </td>
+                        </tr>
                       ))}
+                    </tbody>
+                  </table>
                 </div>
               )}
             </CardContent>
@@ -898,6 +1015,39 @@ export default function AccessPage() {
         </DialogContent>
       </Dialog>
 
+      {/* Reject Confirmation Dialog */}
+      <Dialog open={!!rejectConfirmId} onOpenChange={(open) => { if (!open) setRejectConfirmId(null); }}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Reject Request</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to reject this access request? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="p-3 border border-red-300 rounded-lg bg-red-50 text-sm text-red-800">
+            <div className="flex items-start gap-2">
+              <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+              <span>The request will be permanently rejected. The user will need to submit a new request if they want access in the future.</span>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRejectConfirmId(null)} disabled={rejectId !== null}>Cancel</Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                const id = rejectConfirmId;
+                setRejectConfirmId(null);
+                if (id) handleReject(id);
+              }}
+              disabled={rejectId !== null}
+            >
+              {rejectId !== null && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              Reject Request
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* End Session Confirmation Dialog */}
       <Dialog open={showEndSessionConfirm} onOpenChange={(open) => { if (!open) { setShowEndSessionConfirm(false); setEndSessionTarget(null); } }}>
         <DialogContent className="sm:max-w-md">

src/pages/org/DevicesPage.tsx

@@ -844,7 +844,7 @@ export default function DevicesPage() {
                             <p className="text-sm text-muted-foreground font-mono">{network.zerotier_network_id}</p>
                             {approval && (
                               <div className="flex items-center gap-2 mt-1">
-                                <ApprovalStateBadge state={approval.state} />
+                                <ApprovalStateBadge state={approval.status} />
                                 {approval.justification && (
                                   <span className="text-xs text-muted-foreground">"{approval.justification}"</span>
                                 )}
@@ -990,7 +990,7 @@ export default function DevicesPage() {
                           <div className="flex items-center gap-2 flex-wrap mb-1">
                             <p className="font-medium truncate">{network?.name || approval.portal_network_id}</p>
                             <Badge variant="outline" className="text-xs">{network?.environment}</Badge>
-                            <ApprovalStateBadge state={approval.state} />
+                            <ApprovalStateBadge state={approval.status} />
                           </div>
                           <p className="text-sm text-muted-foreground">
                             {approval.grant_type === "requested" ? "You requested" : "Assigned by admin"}
@@ -1013,7 +1013,7 @@ export default function DevicesPage() {
                             </div>
                           )}
                         </div>
-                        {approval.state === "pending" && (
+                        {approval.status === "pending" && (
                           <Button
                             size="sm"
                             variant="outline"