feat: POS PIN unlock with employee number + PIN auth

- Add employeeNumber and pinHash fields to users table
- POST /auth/pin-login: takes combined code (4-digit employee# + 4-digit PIN)
- POST /auth/set-pin: employee sets their own PIN (requires full auth)
- DELETE /auth/pin: remove PIN
- Lock screen with numpad, auto-submits on 8 digits, visual dot separator
- POS uses its own auth token separate from admin session
- Admin "POS" link clears admin session before navigating
- /pos route has no auth guard — lock screen is the auth
- API client uses POS token when available, admin token otherwise
- Auto-lock timer reads pos_lock_timeout from app_config (default 15 min)
- Lock button in POS top bar, shows current cashier name

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

packages/admin/src/components/pos/pos-lock-screen.tsx

@@ -0,0 +1,168 @@
+import { useState, useCallback, useEffect, useRef } from 'react'
+import { usePOSStore } from '@/stores/pos.store'
+import { api } from '@/lib/api-client'
+import { Button } from '@/components/ui/button'
+import { Delete, Lock } from 'lucide-react'
+
+interface PinUser {
+  id: string
+  email: string
+  firstName: string
+  lastName: string
+  role: string
+}
+
+export function POSLockScreen() {
+  const unlock = usePOSStore((s) => s.unlock)
+  const [code, setCode] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Auto-focus on mount
+  useEffect(() => {
+    containerRef.current?.focus()
+  }, [])
+
+  const handleDigit = useCallback((digit: string) => {
+    setError('')
+    setCode((p) => {
+      if (p.length >= 10) return p
+      return p + digit
+    })
+  }, [])
+
+  const handleBackspace = useCallback(() => {
+    setError('')
+    setCode((p) => p.slice(0, -1))
+  }, [])
+
+  const handleClear = useCallback(() => {
+    setError('')
+    setCode('')
+  }, [])
+
+  const handleSubmit = useCallback(async (submitCode: string) => {
+    if (submitCode.length < 8) {
+      setError('Enter your employee # (4) + PIN (4)')
+      return
+    }
+    setLoading(true)
+    setError('')
+    try {
+      const res = await api.post<{ user: PinUser; token: string }>('/v1/auth/pin-login', { code: submitCode })
+      unlock(res.user, res.token)
+      setCode('')
+    } catch {
+      setError('Invalid code')
+      setCode('')
+    } finally {
+      setLoading(false)
+    }
+  }, [unlock])
+
+  // Auto-submit when 8 digits entered
+  useEffect(() => {
+    if (code.length === 8) {
+      handleSubmit(code)
+    }
+  }, [code, handleSubmit])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key >= '0' && e.key <= '9') handleDigit(e.key)
+    else if (e.key === 'Backspace') handleBackspace()
+    else if (e.key === 'Enter' && code.length >= 8) handleSubmit(code)
+    else if (e.key === 'Escape') handleClear()
+  }, [handleDigit, handleBackspace, handleSubmit, handleClear, code])
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute inset-0 z-50 bg-background flex items-center justify-center"
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+    >
+      <div className="w-80 space-y-6">
+        {/* Header */}
+        <div className="text-center space-y-2">
+          <Lock className="h-10 w-10 mx-auto text-muted-foreground" />
+          <h1 className="text-xl font-semibold">POS Locked</h1>
+          <p className="text-sm text-muted-foreground">Employee # + PIN</p>
+        </div>
+
+        {/* Code dots — 4 employee + 4 PIN with separator */}
+        <div className="flex justify-center items-center gap-2">
+          <div className="flex gap-1.5">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div
+                key={`e${i}`}
+                className={`w-3.5 h-3.5 rounded-full border-2 ${
+                  i < Math.min(code.length, 4) ? 'bg-foreground border-foreground' : 'border-muted-foreground/30'
+                }`}
+              />
+            ))}
+          </div>
+          <span className="text-muted-foreground/40 text-lg">-</span>
+          <div className="flex gap-1.5">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div
+                key={`p${i}`}
+                className={`w-3.5 h-3.5 rounded-full border-2 ${
+                  i < Math.max(0, code.length - 4) ? 'bg-foreground border-foreground' : 'border-muted-foreground/30'
+                }`}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Error */}
+        {error && (
+          <p className="text-sm text-destructive text-center">{error}</p>
+        )}
+
+        {/* Numpad */}
+        <div className="grid grid-cols-3 gap-2">
+          {['1', '2', '3', '4', '5', '6', '7', '8', '9'].map((d) => (
+            <Button
+              key={d}
+              variant="outline"
+              className="h-14 text-xl font-medium"
+              onClick={() => handleDigit(d)}
+              disabled={loading}
+            >
+              {d}
+            </Button>
+          ))}
+          <Button
+            variant="outline"
+            className="h-14 text-sm"
+            onClick={handleClear}
+            disabled={loading}
+          >
+            Clear
+          </Button>
+          <Button
+            variant="outline"
+            className="h-14 text-xl font-medium"
+            onClick={() => handleDigit('0')}
+            disabled={loading}
+          >
+            0
+          </Button>
+          <Button
+            variant="outline"
+            className="h-14"
+            onClick={handleBackspace}
+            disabled={loading}
+          >
+            <Delete className="h-5 w-5" />
+          </Button>
+        </div>
+
+        {loading && (
+          <p className="text-sm text-muted-foreground text-center">Verifying...</p>
+        )}
+      </div>
+    </div>
+  )
+}

packages/admin/src/components/pos/pos-register.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useRef, useCallback } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { queryOptions } from '@tanstack/react-query'
 import { api } from '@/lib/api-client'
@@ -7,12 +7,18 @@ import { currentDrawerOptions, transactionOptions } from '@/api/pos'
 import { POSTopBar } from './pos-top-bar'
 import { POSItemPanel } from './pos-item-panel'
 import { POSCartPanel } from './pos-cart-panel'
+import { POSLockScreen } from './pos-lock-screen'
 
 interface Location {
   id: string
   name: string
 }
 
+interface AppConfigEntry {
+  key: string
+  value: string | null
+}
+
 function locationsOptions() {
   return queryOptions({
     queryKey: ['locations'],
@@ -20,11 +26,61 @@ function locationsOptions() {
   })
 }
 
+function configOptions(key: string) {
+  return queryOptions({
+    queryKey: ['config', key],
+    queryFn: async (): Promise<string | null> => {
+      try {
+        const entry = await api.get<AppConfigEntry>(`/v1/config/${key}`)
+        return entry.value
+      } catch {
+        return null
+      }
+    },
+  })
+}
+
 export function POSRegister() {
-  const { locationId, setLocation, currentTransactionId, setDrawerSession } = usePOSStore()
+  const { locationId, setLocation, currentTransactionId, setDrawerSession, locked, lock, touchActivity, token } = usePOSStore()
+
+  // Fetch lock timeout from config
+  const { data: lockTimeoutStr } = useQuery({
+    ...configOptions('pos_lock_timeout'),
+    enabled: !!token,
+  })
+  const lockTimeoutMinutes = parseInt(lockTimeoutStr ?? '15') || 15
+
+  // Auto-lock timer
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  useEffect(() => {
+    if (locked || lockTimeoutMinutes === 0) {
+      if (timerRef.current) clearInterval(timerRef.current)
+      return
+    }
+
+    timerRef.current = setInterval(() => {
+      const { lastActivity, locked: isLocked } = usePOSStore.getState()
+      if (!isLocked && Date.now() - lastActivity > lockTimeoutMinutes * 60_000) {
+        lock()
+      }
+    }, 30_000)
+
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current)
+    }
+  }, [locked, lockTimeoutMinutes, lock])
+
+  // Track activity on any interaction
+  const handleActivity = useCallback(() => {
+    if (!locked) touchActivity()
+  }, [locked, touchActivity])
 
   // Fetch locations
-  const { data: locationsData } = useQuery(locationsOptions())
+  const { data: locationsData } = useQuery({
+    ...locationsOptions(),
+    enabled: !!token,
+  })
   const locations = locationsData?.data ?? []
 
   // Auto-select first location
@@ -38,6 +94,7 @@ export function POSRegister() {
   const { data: drawer } = useQuery({
     ...currentDrawerOptions(locationId),
     retry: false,
+    enabled: !!locationId && !!token,
   })
 
   // Sync drawer session ID
@@ -50,10 +107,18 @@ export function POSRegister() {
   }, [drawer, setDrawerSession])
 
   // Fetch current transaction
-  const { data: transaction } = useQuery(transactionOptions(currentTransactionId))
+  const { data: transaction } = useQuery({
+    ...transactionOptions(currentTransactionId),
+    enabled: !!currentTransactionId && !!token,
+  })
 
   return (
-    <div className="flex flex-col h-full">
+    <div
+      className="relative flex flex-col h-full"
+      onPointerDown={handleActivity}
+      onKeyDown={handleActivity}
+    >
+      {locked && <POSLockScreen />}
       <POSTopBar
         locations={locations}
         locationId={locationId}
@@ -62,7 +127,7 @@ export function POSRegister() {
       />
       <div className="flex flex-1 min-h-0">
         <div className="w-[60%] border-r border-border overflow-hidden">
-          <POSItemPanel transaction={transaction ?? null} />
+          <POSItemPanel _transaction={transaction ?? null} />
         </div>
         <div className="w-[40%] overflow-hidden">
           <POSCartPanel transaction={transaction ?? null} />

packages/admin/src/components/pos/pos-top-bar.tsx

@@ -1,10 +1,9 @@
-import { Link, useRouter } from '@tanstack/react-router'
-import { useAuthStore } from '@/stores/auth.store'
-
+import { Link } from '@tanstack/react-router'
+import { usePOSStore } from '@/stores/pos.store'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { ArrowLeft, LogOut, DollarSign } from 'lucide-react'
+import { ArrowLeft, Lock, DollarSign } from 'lucide-react'
 import type { DrawerSession } from '@/api/pos'
 import { useState } from 'react'
 import { POSDrawerDialog } from './pos-drawer-dialog'
@@ -17,24 +16,18 @@ interface POSTopBarProps {
 }
 
 export function POSTopBar({ locations, locationId, onLocationChange, drawer }: POSTopBarProps) {
-  const router = useRouter()
-  const user = useAuthStore((s) => s.user)
-  const logout = useAuthStore((s) => s.logout)
+  const cashier = usePOSStore((s) => s.cashier)
+  const lockFn = usePOSStore((s) => s.lock)
   const [drawerDialogOpen, setDrawerDialogOpen] = useState(false)
 
   const drawerOpen = drawer?.status === 'open'
 
-  function handleLogout() {
-    logout()
-    router.navigate({ to: '/login', replace: true })
-  }
-
   return (
     <>
       <div className="h-12 border-b border-border bg-card flex items-center justify-between px-3 shrink-0">
         {/* Left: back + location */}
         <div className="flex items-center gap-3">
-          <Link to="/" className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
+          <Link to="/login" className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
             <ArrowLeft className="h-4 w-4" />
             <span className="hidden sm:inline">Admin</span>
           </Link>
@@ -70,11 +63,13 @@ export function POSTopBar({ locations, locationId, onLocationChange, drawer }: P
           )}
         </Button>
 
-        {/* Right: user + logout */}
+        {/* Right: cashier + lock */}
         <div className="flex items-center gap-2">
-          <span className="text-sm text-muted-foreground">{user?.firstName}</span>
-          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleLogout} title="Sign out">
-            <LogOut className="h-4 w-4" />
+          {cashier && (
+            <span className="text-sm text-muted-foreground">{cashier.firstName}</span>
+          )}
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={lockFn} title="Lock POS">
+            <Lock className="h-4 w-4" />
           </Button>
         </div>
       </div>