fix: move PIN warning banner to authenticated layout for all pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/admin/src/routes/_authenticated.tsx

@@ -8,7 +8,8 @@ import { myPermissionsOptions } from '@/api/rbac'
 import { moduleListOptions } from '@/api/modules'
 import { Avatar } from '@/components/shared/avatar-upload'
 import { Button } from '@/components/ui/button'
-import { Users, UserRound, HelpCircle, Shield, UserCog, LogOut, User, Wrench, Package, ClipboardList, FolderOpen, KeyRound, Settings, PanelLeftClose, PanelLeft, CalendarDays, GraduationCap, CalendarRange, BookOpen, BookMarked, Package2, Tag, Truck, ShoppingCart } from 'lucide-react'
+import { Users, UserRound, HelpCircle, Shield, UserCog, LogOut, User, Wrench, Package, ClipboardList, FolderOpen, KeyRound, Settings, PanelLeftClose, PanelLeft, CalendarDays, GraduationCap, CalendarRange, BookOpen, BookMarked, Package2, Tag, Truck, ShoppingCart, AlertTriangle } from 'lucide-react'
+import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
 
 export const Route = createFileRoute('/_authenticated')({
   beforeLoad: () => {
@@ -112,6 +113,13 @@ function AuthenticatedLayout() {
   const setPermissions = useAuthStore((s) => s.setPermissions)
   const permissionsLoaded = useAuthStore((s) => s.permissionsLoaded)
 
+  // Fetch profile for PIN warning
+  const { data: profile } = useQuery(queryOptions({
+    queryKey: ['auth', 'me'],
+    queryFn: () => api.get<{ hasPin: boolean }>('/v1/auth/me'),
+    enabled: !!useAuthStore.getState().token,
+  }))
+
   // Fetch permissions on mount
   const { data: permData } = useQuery({
     ...myPermissionsOptions(),
@@ -263,6 +271,18 @@ function AuthenticatedLayout() {
           </div>
         </nav>
         <main className="flex-1 p-6 min-h-screen">
+          {profile && !profile.hasPin && (
+            <Alert className="mb-4">
+              <AlertTriangle className="h-4 w-4" />
+              <AlertTitle>POS PIN not set</AlertTitle>
+              <AlertDescription>
+                You need a PIN to use the Point of Sale.{' '}
+                <Link to="/profile" search={{ tab: 'security' }} className="underline font-medium text-foreground">
+                  Set your PIN
+                </Link>
+              </AlertDescription>
+            </Alert>
+          )}
           <Outlet />
         </main>
       </div>

packages/admin/src/routes/_authenticated/profile.tsx

@@ -12,8 +12,7 @@ import { Label } from '@/components/ui/label'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Separator } from '@/components/ui/separator'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
-import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
-import { Sun, Moon, Monitor, AlertTriangle } from 'lucide-react'
+import { Sun, Moon, Monitor } from 'lucide-react'
 import { toast } from 'sonner'
 import { AvatarUpload } from '@/components/shared/avatar-upload'
 
@@ -53,23 +52,6 @@ function ProfilePage() {
     <div className="space-y-6 max-w-2xl">
       <h1 className="text-2xl font-bold">Profile</h1>
 
-      {profile && !profile.hasPin && (
-        <Alert>
-          <AlertTriangle className="h-4 w-4" />
-          <AlertTitle>POS PIN not set</AlertTitle>
-          <AlertDescription>
-            You need a PIN to use the Point of Sale.{' '}
-            <Link
-              to="/profile"
-              search={{ tab: 'security' }}
-              className="underline font-medium text-foreground"
-            >
-              Set your PIN
-            </Link>
-          </AlertDescription>
-        </Alert>
-      )}
-
       <Tabs defaultValue={tab === 'security' || tab === 'appearance' ? tab : 'account'}>
         <TabsList>
           <TabsTrigger value="account">Account</TabsTrigger>