@wopr-network/platform-ui-core 1.27.8 → 1.27.9

package/src/app/(dashboard)/settings/security/page.tsx

@@ -1,14 +1,7 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
-import {
-  CheckIcon,
-  CopyIcon,
-  DownloadIcon,
-  MonitorIcon,
-  SmartphoneIcon,
-  TabletIcon,
-} from "lucide-react";
+import { CheckIcon, CopyIcon, DownloadIcon, MonitorIcon, SmartphoneIcon, TabletIcon } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Badge } from "@/components/ui/badge";
@@ -25,14 +18,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { LoginAttempt, LoginHistoryResponse } from "@/lib/api";
 import { fetchLoginHistory } from "@/lib/api";
@@ -105,11 +91,7 @@ function StepIndicator({ currentStep, steps }: { currentStep: number; steps: str
     <div className="flex items-center justify-center gap-0 px-4 py-2">
       {steps.map((label, i) => (
         <div key={label} className="flex items-center">
-          {i > 0 && (
-            <div
-              className={`h-px w-8 sm:w-12 ${i <= currentStep ? "bg-terminal/40" : "bg-border"}`}
-            />
-          )}
+          {i > 0 && <div className={`h-px w-8 sm:w-12 ${i <= currentStep ? "bg-terminal/40" : "bg-border"}`} />}
           <div className="flex flex-col items-center gap-1">
             <div
               className={`flex size-8 items-center justify-center rounded-full text-xs font-medium transition-colors ${
@@ -122,9 +104,7 @@ function StepIndicator({ currentStep, steps }: { currentStep: number; steps: str
             >
               {i < currentStep ? <CheckIcon className="size-4" /> : i + 1}
             </div>
-            <span
-              className={`text-xs ${i === currentStep ? "font-medium text-foreground" : "text-muted-foreground"}`}
-            >
+            <span className={`text-xs ${i === currentStep ? "font-medium text-foreground" : "text-muted-foreground"}`}>
               {label}
             </span>
           </div>
@@ -185,9 +165,7 @@ function TwoFactorSection() {
   }, []);
 
   useEffect(() => {
-    setEnabled(
-      Boolean((profileData as { twoFactorEnabled?: boolean } | undefined)?.twoFactorEnabled),
-    );
+    setEnabled(Boolean((profileData as { twoFactorEnabled?: boolean } | undefined)?.twoFactorEnabled));
   }, [profileData]);
 
   function handleStartEnable() {
@@ -347,9 +325,7 @@ function TwoFactorSection() {
             <>
               <div className="flex items-center gap-2">
                 <span className="size-2 rounded-full bg-terminal animate-pulse" />
-                <span className="text-sm font-medium text-terminal">
-                  Two-factor authentication is active
-                </span>
+                <span className="text-sm font-medium text-terminal">Two-factor authentication is active</span>
               </div>
               <div className="flex items-center gap-2">
                 <Button variant="outline" onClick={() => setDisableOpen(true)}>
@@ -369,23 +345,17 @@ function TwoFactorSection() {
                 </Button>
               </div>
               {codesRemaining <= 2 && (
-                <p className="text-xs text-chart-3">
-                  {codesRemaining} of 8 recovery codes remaining
-                </p>
+                <p className="text-xs text-chart-3">{codesRemaining} of 8 recovery codes remaining</p>
               )}
               {codesRemaining > 2 && (
-                <p className="text-xs text-muted-foreground">
-                  {codesRemaining} of 8 recovery codes remaining
-                </p>
+                <p className="text-xs text-muted-foreground">{codesRemaining} of 8 recovery codes remaining</p>
               )}
             </>
           ) : (
             <>
               <div className="flex items-center gap-2">
                 <span className="size-2 rounded-full bg-chart-3" />
-                <span className="text-sm font-medium text-chart-3">
-                  Two-factor authentication is not enabled
-                </span>
+                <span className="text-sm font-medium text-chart-3">Two-factor authentication is not enabled</span>
               </div>
               <Button variant="terminal" onClick={handleStartEnable}>
                 Enable 2FA
@@ -398,17 +368,13 @@ function TwoFactorSection() {
       {/* Enable 2FA Dialog */}
       <Dialog open={enableOpen} onOpenChange={setEnableOpen}>
         <DialogContent className="max-w-md">
-          {enableStep >= 0 && (
-            <StepIndicator currentStep={enableStep} steps={["Scan", "Verify", "Backup"]} />
-          )}
+          {enableStep >= 0 && <StepIndicator currentStep={enableStep} steps={["Scan", "Verify", "Backup"]} />}
 
           {enableStep === -1 && (
             <>
               <DialogHeader>
                 <DialogTitle>Confirm your password</DialogTitle>
-                <DialogDescription>
-                  Enter your password to set up two-factor authentication
-                </DialogDescription>
+                <DialogDescription>Enter your password to set up two-factor authentication</DialogDescription>
               </DialogHeader>
               <div className="flex flex-col items-center gap-3">
                 <Input
@@ -457,8 +423,7 @@ function TwoFactorSection() {
               <DialogHeader>
                 <DialogTitle>Set up authenticator</DialogTitle>
                 <DialogDescription>
-                  Scan this QR code with your authenticator app (Google Authenticator, Authy,
-                  1Password)
+                  Scan this QR code with your authenticator app (Google Authenticator, Authy, 1Password)
                 </DialogDescription>
               </DialogHeader>
               <div className="flex flex-col items-center gap-4">
@@ -467,18 +432,12 @@ function TwoFactorSection() {
                   <QRCodeSVG value={totpUri} size={192} />
                 </div>
                 <div className="w-full space-y-2">
-                  <p className="text-xs text-muted-foreground">
-                    Can&apos;t scan? Enter this key manually:
-                  </p>
+                  <p className="text-xs text-muted-foreground">Can&apos;t scan? Enter this key manually:</p>
                   <div className="flex items-center gap-2">
                     <code className="flex-1 rounded-sm bg-muted px-3 py-2 text-xs font-mono tracking-widest">
                       {totpSecret}
                     </code>
-                    <Button
-                      variant="ghost"
-                      size="icon-sm"
-                      onClick={() => copyToClipboard(totpSecret)}
-                    >
+                    <Button variant="ghost" size="icon-sm" onClick={() => copyToClipboard(totpSecret)}>
                       <CopyIcon className="size-4" />
                     </Button>
                   </div>
@@ -496,9 +455,7 @@ function TwoFactorSection() {
             <>
               <DialogHeader>
                 <DialogTitle>Verify your code</DialogTitle>
-                <DialogDescription>
-                  Enter the 6-digit code from your authenticator app
-                </DialogDescription>
+                <DialogDescription>Enter the 6-digit code from your authenticator app</DialogDescription>
               </DialogHeader>
               <div className="flex flex-col items-center gap-3">
                 <Input
@@ -526,11 +483,7 @@ function TwoFactorSection() {
                 <Button variant="ghost" onClick={() => setEnableStep(0)}>
                   Back
                 </Button>
-                <Button
-                  variant="terminal"
-                  disabled={verifyCode.length !== 6 || verifying}
-                  onClick={handleVerify}
-                >
+                <Button variant="terminal" disabled={verifyCode.length !== 6 || verifying} onClick={handleVerify}>
                   {verifying ? "Verifying..." : "Verify"}
                 </Button>
               </DialogFooter>
@@ -542,8 +495,8 @@ function TwoFactorSection() {
               <DialogHeader>
                 <DialogTitle>Save your recovery codes</DialogTitle>
                 <DialogDescription>
-                  Store these codes in a safe place. Each code can only be used once. You won&apos;t
-                  be able to see them again.
+                  Store these codes in a safe place. Each code can only be used once. You won&apos;t be able to see them
+                  again.
                 </DialogDescription>
               </DialogHeader>
               <div className="grid grid-cols-2 gap-2">
@@ -557,11 +510,7 @@ function TwoFactorSection() {
                 ))}
               </div>
               <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => copyToClipboard(recoveryCodes.join("\n"))}
-                >
+                <Button variant="outline" size="sm" onClick={() => copyToClipboard(recoveryCodes.join("\n"))}>
                   <CopyIcon className="mr-1 size-4" />
                   {copied ? "Copied" : "Copy all"}
                 </Button>
@@ -589,8 +538,7 @@ function TwoFactorSection() {
           <DialogHeader>
             <DialogTitle>Disable two-factor authentication</DialogTitle>
             <DialogDescription>
-              Enter your current authenticator code to confirm. This will remove 2FA protection from
-              your account.
+              Enter your current authenticator code to confirm. This will remove 2FA protection from your account.
             </DialogDescription>
           </DialogHeader>
           <div className="rounded-sm border border-destructive/20 bg-destructive/10 px-3 py-2 text-sm text-destructive">
@@ -622,11 +570,7 @@ function TwoFactorSection() {
             <DialogClose asChild>
               <Button variant="outline">Cancel</Button>
             </DialogClose>
-            <Button
-              variant="destructive"
-              disabled={disableCode.length !== 6 || disabling}
-              onClick={handleDisable}
-            >
+            <Button variant="destructive" disabled={disableCode.length !== 6 || disabling} onClick={handleDisable}>
               {disabling ? "Disabling..." : "Disable 2FA"}
             </Button>
           </DialogFooter>
@@ -641,8 +585,7 @@ function TwoFactorSection() {
               <DialogHeader>
                 <DialogTitle>Regenerate recovery codes</DialogTitle>
                 <DialogDescription>
-                  Enter your authenticator code to generate new recovery codes. This will invalidate
-                  all previous codes.
+                  Enter your authenticator code to generate new recovery codes. This will invalidate all previous codes.
                 </DialogDescription>
               </DialogHeader>
               <div className="flex flex-col items-center gap-3">
@@ -701,11 +644,7 @@ function TwoFactorSection() {
                 ))}
               </div>
               <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => copyToClipboard(regenCodes.join("\n"))}
-                >
+                <Button variant="outline" size="sm" onClick={() => copyToClipboard(regenCodes.join("\n"))}>
                   <CopyIcon className="mr-1 size-4" />
                   {copied ? "Copied" : "Copy all"}
                 </Button>
@@ -811,12 +750,7 @@ function SessionsSection() {
             <CardDescription>Devices currently signed into your account</CardDescription>
           </div>
           {!loading && sessions.length > 1 && (
-            <Button
-              variant="destructive"
-              size="sm"
-              disabled={revokingAll}
-              onClick={handleRevokeAll}
-            >
+            <Button variant="destructive" size="sm" disabled={revokingAll} onClick={handleRevokeAll}>
               {revokingAll ? "Revoking..." : "Revoke all other sessions"}
             </Button>
           )}
@@ -883,20 +817,14 @@ function SessionsSection() {
                           {session.current && <Badge variant="terminal">Current</Badge>}
                         </div>
                       </TableCell>
-                      <TableCell className="text-sm text-muted-foreground">
-                        {session.ipAddress ?? "\u2014"}
-                      </TableCell>
+                      <TableCell className="text-sm text-muted-foreground">{session.ipAddress ?? "\u2014"}</TableCell>
                       <TableCell>
                         <Tooltip>
                           <TooltipTrigger className="text-xs text-muted-foreground">
-                            {relativeTime(
-                              String(session.updatedAt ?? session.createdAt ?? session.expiresAt),
-                            )}
+                            {relativeTime(String(session.updatedAt ?? session.createdAt ?? session.expiresAt))}
                           </TooltipTrigger>
                           <TooltipContent>
-                            {new Date(
-                              session.updatedAt ?? session.createdAt ?? session.expiresAt,
-                            ).toLocaleString()}
+                            {new Date(session.updatedAt ?? session.createdAt ?? session.expiresAt).toLocaleString()}
                           </TooltipContent>
                         </Tooltip>
                       </TableCell>
@@ -1003,9 +931,7 @@ function LoginHistorySection() {
     <Card>
       <CardHeader>
         <CardTitle>Login History</CardTitle>
-        <CardDescription>
-          {data ? `${data.total} total events` : "Recent authentication events"}
-        </CardDescription>
+        <CardDescription>{data ? `${data.total} total events` : "Recent authentication events"}</CardDescription>
       </CardHeader>
       <CardContent>
         {loading ? (
@@ -1057,18 +983,12 @@ function LoginHistorySection() {
                           <TooltipTrigger className="text-xs text-muted-foreground">
                             {relativeTime(attempt.timestamp)}
                           </TooltipTrigger>
-                          <TooltipContent>
-                            {new Date(attempt.timestamp).toLocaleString()}
-                          </TooltipContent>
+                          <TooltipContent>{new Date(attempt.timestamp).toLocaleString()}</TooltipContent>
                         </Tooltip>
                       </TableCell>
-                      <TableCell className="text-sm text-muted-foreground">
-                        {parseBrowser(attempt.userAgent)}
-                      </TableCell>
+                      <TableCell className="text-sm text-muted-foreground">{parseBrowser(attempt.userAgent)}</TableCell>
                       <TableCell className="text-sm text-muted-foreground">{attempt.ip}</TableCell>
-                      <TableCell className="text-sm text-muted-foreground">
-                        {attempt.location ?? "\u2014"}
-                      </TableCell>
+                      <TableCell className="text-sm text-muted-foreground">{attempt.location ?? "\u2014"}</TableCell>
                       <TableCell>
                         {attempt.success ? (
                           <Badge variant="terminal">Success</Badge>

package/src/app/admin/email-templates/email-templates-client.tsx

@@ -11,14 +11,7 @@ import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Textarea } from "@/components/ui/textarea";
 import { trpc } from "@/lib/trpc";
 import { cn } from "@/lib/utils";
@@ -171,10 +164,7 @@ export function EmailTemplatesClient() {
     );
   }, [templates, search]);
 
-  const selectedTemplate = useMemo(
-    () => templates.find((t) => t.id === selectedId) ?? null,
-    [templates, selectedId],
-  );
+  const selectedTemplate = useMemo(() => templates.find((t) => t.id === selectedId) ?? null, [templates, selectedId]);
 
   // --- Handlers ---
 
@@ -201,9 +191,7 @@ export function EmailTemplatesClient() {
         editActive !== selectedTemplate.active;
 
       if (isDirty) {
-        const confirmed = window.confirm(
-          "You have unsaved changes. Are you sure you want to close without saving?",
-        );
+        const confirmed = window.confirm("You have unsaved changes. Are you sure you want to close without saving?");
         if (!confirmed) return;
       }
     }
@@ -224,15 +212,7 @@ export function EmailTemplatesClient() {
       textBody: editTextBody,
       active: editActive,
     });
-  }, [
-    selectedId,
-    editDescription,
-    editSubject,
-    editHtmlBody,
-    editTextBody,
-    editActive,
-    updateMutation,
-  ]);
+  }, [selectedId, editDescription, editSubject, editHtmlBody, editTextBody, editActive, updateMutation]);
 
   const handlePreview = useCallback(() => {
     if (!selectedTemplate) return;
@@ -289,9 +269,7 @@ export function EmailTemplatesClient() {
   if (listQuery.isError) {
     return (
       <div className="flex h-40 flex-col items-center justify-center gap-3">
-        <p className="text-sm text-destructive font-mono">
-          Failed to load email templates. Please try again.
-        </p>
+        <p className="text-sm text-destructive font-mono">Failed to load email templates. Please try again.</p>
         <Button variant="outline" size="sm" onClick={() => listQuery.refetch()}>
           Retry
         </Button>
@@ -321,9 +299,7 @@ export function EmailTemplatesClient() {
             <Separator orientation="vertical" className="h-6" />
             <div className="flex items-center gap-2">
               <MailCheck className="size-4 text-amber-400" />
-              <h2 className="text-lg font-bold uppercase tracking-wider">
-                {selectedTemplate.name}
-              </h2>
+              <h2 className="text-lg font-bold uppercase tracking-wider">{selectedTemplate.name}</h2>
             </div>
           </div>
           <div className="flex items-center gap-2">
@@ -356,8 +332,7 @@ export function EmailTemplatesClient() {
                 <CardTitle className="text-base">Template Settings</CardTitle>
                 <CardDescription>
                   Edit the template content. Use Handlebars syntax (
-                  <code className="text-xs font-mono text-amber-400">{"{{variableName}}"}</code>)
-                  for dynamic values.
+                  <code className="text-xs font-mono text-amber-400">{"{{variableName}}"}</code>) for dynamic values.
                 </CardDescription>
               </CardHeader>
               <CardContent className="space-y-5">
@@ -413,9 +388,7 @@ export function EmailTemplatesClient() {
                 <div className="flex items-center justify-between rounded-md border border-border p-3">
                   <div className="space-y-0.5">
                     <Label>Active</Label>
-                    <p className="text-xs text-muted-foreground">
-                      Inactive templates will not be sent.
-                    </p>
+                    <p className="text-xs text-muted-foreground">Inactive templates will not be sent.</p>
                   </div>
                   <Switch
                     checked={editActive}
@@ -430,18 +403,12 @@ export function EmailTemplatesClient() {
             <Card className="border-border">
               <CardHeader>
                 <CardTitle className="text-base">Available Variables</CardTitle>
-                <CardDescription>
-                  Use these in your template with Handlebars syntax.
-                </CardDescription>
+                <CardDescription>Use these in your template with Handlebars syntax.</CardDescription>
               </CardHeader>
               <CardContent>
                 <div className="flex flex-wrap gap-2">
                   {variables.map((v) => (
-                    <Badge
-                      key={v}
-                      variant="outline"
-                      className="border-amber-500/30 text-amber-400 font-mono text-xs"
-                    >
+                    <Badge key={v} variant="outline" className="border-amber-500/30 text-amber-400 font-mono text-xs">
                       {`{{${v}}}`}
                     </Badge>
                   ))}
@@ -452,25 +419,19 @@ export function EmailTemplatesClient() {
 
           {/* Right: preview panel */}
           <div className="w-[480px] shrink-0 border-l border-border overflow-auto p-6 space-y-4">
-            <h3 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
-              Preview
-            </h3>
+            <h3 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">Preview</h3>
 
             {previewHtml === null && previewSubject === null ? (
               <div className="flex flex-col items-center justify-center h-64 text-muted-foreground">
                 <Eye className="size-8 mb-3 opacity-40" />
-                <p className="text-sm font-mono">
-                  Click &quot;Preview&quot; to render the template
-                </p>
+                <p className="text-sm font-mono">Click &quot;Preview&quot; to render the template</p>
               </div>
             ) : (
               <div className="space-y-4">
                 {/* Rendered subject */}
                 {previewSubject !== null && (
                   <div className="space-y-1">
-                    <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                      Subject
-                    </span>
+                    <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Subject</span>
                     <p className="text-sm font-medium rounded-md border border-border bg-black/20 px-3 py-2">
                       {previewSubject}
                     </p>
@@ -580,9 +541,7 @@ export function EmailTemplatesClient() {
                     <span className="text-sm font-medium font-mono">{template.name}</span>
                   </TableCell>
                   <TableCell>
-                    <span className="text-sm text-muted-foreground line-clamp-1">
-                      {template.description ?? "--"}
-                    </span>
+                    <span className="text-sm text-muted-foreground line-clamp-1">{template.description ?? "--"}</span>
                   </TableCell>
                   <TableCell>
                     <span className="text-sm text-muted-foreground font-mono line-clamp-1 max-w-[200px]">
@@ -594,9 +553,7 @@ export function EmailTemplatesClient() {
                       variant="outline"
                       className={cn(
                         "text-xs",
-                        template.active
-                          ? "border-amber-500/30 text-amber-400"
-                          : "border-border text-muted-foreground",
+                        template.active ? "border-amber-500/30 text-amber-400" : "border-border text-muted-foreground",
                       )}
                     >
                       {template.active ? "Active" : "Inactive"}

package/src/app/admin/error.tsx

@@ -8,13 +8,7 @@ import { logger } from "@/lib/logger";
 
 const log = logger("error-boundary:admin");
 
-export default function AdminError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
+export default function AdminError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   const [showDetails, setShowDetails] = useState(false);
   const isDev = process.env.NODE_ENV === "development";
 

package/src/app/admin/fleet-updates/error.tsx

@@ -8,13 +8,7 @@ import { logger } from "@/lib/logger";
 
 const log = logger("error-boundary:fleet-updates");
 
-export default function FleetUpdatesError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
+export default function FleetUpdatesError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   const [showDetails, setShowDetails] = useState(false);
   const isDev = process.env.NODE_ENV === "development";
 

package/src/app/admin/fleet-updates/fleet-updates-client.tsx

@@ -5,22 +5,9 @@ import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { trpc } from "@/lib/trpc";
 
 /* ------------------------------------------------------------------ */
@@ -121,11 +108,7 @@ function RolloutStatusCard() {
               disabled={forceRolloutMutation.isPending || isRolling}
               className="font-mono text-xs ml-auto"
             >
-              {forceRolloutMutation.isPending ? (
-                <Loader2 size={12} className="animate-spin" />
-              ) : (
-                <Rocket size={12} />
-              )}
+              {forceRolloutMutation.isPending ? <Loader2 size={12} className="animate-spin" /> : <Rocket size={12} />}
               Force Rollout
             </Button>
           </div>
@@ -139,13 +122,7 @@ function RolloutStatusCard() {
 /*  Tenant Config Row                                                  */
 /* ------------------------------------------------------------------ */
 
-function TenantConfigRow({
-  config,
-  onModeChanged,
-}: {
-  config: TenantConfig;
-  onModeChanged: () => void;
-}) {
+function TenantConfigRow({ config, onModeChanged }: { config: TenantConfig; onModeChanged: () => void }) {
   const setConfigMutation = trpc.adminFleetUpdate.setTenantConfig.useMutation({
     onSuccess: () => {
       toast.success(`Tenant ${config.tenantId} config updated.`);
@@ -169,11 +146,7 @@ function TenantConfigRow({
         <code className="text-xs text-muted-foreground">{config.tenantId}</code>
       </TableCell>
       <TableCell>
-        <Select
-          value={config.mode}
-          onValueChange={handleModeChange}
-          disabled={setConfigMutation.isPending}
-        >
+        <Select value={config.mode} onValueChange={handleModeChange} disabled={setConfigMutation.isPending}>
           <SelectTrigger className="h-7 w-28 text-xs">
             <SelectValue />
           </SelectTrigger>
@@ -193,9 +166,7 @@ function TenantConfigRow({
         </span>
       </TableCell>
       <TableCell>
-        <span className="text-xs text-muted-foreground">
-          {new Date(config.updatedAt).toLocaleDateString()}
-        </span>
+        <span className="text-xs text-muted-foreground">{new Date(config.updatedAt).toLocaleDateString()}</span>
       </TableCell>
     </TableRow>
   );
@@ -237,9 +208,7 @@ export function FleetUpdatesClient() {
       {/* Tenant Configs Table */}
       <div className="mx-6 bg-card border border-border rounded-sm">
         <div className="px-4 py-3 border-b border-border flex items-center justify-between">
-          <div className="text-xs uppercase tracking-widest text-muted-foreground">
-            Tenant Update Configs
-          </div>
+          <div className="text-xs uppercase tracking-widest text-muted-foreground">Tenant Update Configs</div>
           <Button
             type="button"
             variant="ghost"
@@ -273,29 +242,20 @@ export function FleetUpdatesClient() {
                 <TableRow className="bg-muted/40">
                   <TableHead className="text-xs uppercase tracking-wider">Tenant ID</TableHead>
                   <TableHead className="text-xs uppercase tracking-wider">Mode</TableHead>
-                  <TableHead className="text-xs uppercase tracking-wider">
-                    Preferred Hour (UTC)
-                  </TableHead>
+                  <TableHead className="text-xs uppercase tracking-wider">Preferred Hour (UTC)</TableHead>
                   <TableHead className="text-xs uppercase tracking-wider">Last Updated</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {configs.length === 0 ? (
                   <TableRow>
-                    <TableCell
-                      colSpan={4}
-                      className="text-center text-muted-foreground py-8 text-sm font-mono"
-                    >
+                    <TableCell colSpan={4} className="text-center text-muted-foreground py-8 text-sm font-mono">
                       &gt; No tenant configs found.
                     </TableCell>
                   </TableRow>
                 ) : (
                   configs.map((cfg) => (
-                    <TenantConfigRow
-                      key={cfg.tenantId}
-                      config={cfg}
-                      onModeChanged={handleConfigChanged}
-                    />
+                    <TenantConfigRow key={cfg.tenantId} config={cfg} onModeChanged={handleConfigChanged} />
                   ))
                 )}
               </TableBody>

package/src/app/admin/layout.tsx

@@ -5,10 +5,14 @@ import { usePathname } from "next/navigation";
 import { AdminGuard } from "@/components/admin/admin-guard";
 import { AdminNav } from "@/components/admin/admin-nav";
 import { Sidebar } from "@/components/sidebar";
+import { useRequireAdmin } from "@/lib/require-auth";
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const { isPending, isAuthed } = useRequireAdmin();
   const pathname = usePathname();
 
+  if (isPending || !isAuthed) return null;
+
   return (
     <>
       {/* Desktop only -- admin requires 1024px+ */}