feat: unified station mode with POS + repairs desk view

Phase 1: Station shell
- /station route replaces /pos (with redirect)
- Shared lock screen, activity tracking, auto-lock timer
- Permission-gated tab bar (POS | Repairs | Lessons)
- POSRegister embedded mode (skip lock/timer/topbar)
- Sidebar navigates to /station

Phase 2: Repairs station — front desk
- Status bar with count badges per status group, clickable filters
- Ticket queue panel with search and status filtering
- Ticket detail panel with status progress, notes, photos, line items
- Full stepped intake form: customer → item → problem/estimate → review
- Service template quick-add for line items

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

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

@@ -40,20 +40,25 @@ function configOptions(key: string) {
   })
 }
 
-export function POSRegister() {
+interface POSRegisterProps {
+  embedded?: boolean
+}
+
+export function POSRegister({ embedded }: POSRegisterProps = {}) {
   const { locationId, setLocation, currentTransactionId, setDrawerSession, locked, lock, touchActivity, token } = usePOSStore()
 
-  // Fetch lock timeout from config
+  // Fetch lock timeout from config (standalone only)
   const { data: lockTimeoutStr } = useQuery({
     ...configOptions('pos_lock_timeout'),
-    enabled: !!token,
+    enabled: !!token && !embedded,
   })
   const lockTimeoutMinutes = parseInt(lockTimeoutStr ?? '15') || 15
 
-  // Auto-lock timer
+  // Auto-lock timer (standalone only — station shell handles this when embedded)
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
   useEffect(() => {
+    if (embedded) return
     if (locked || lockTimeoutMinutes === 0) {
       if (timerRef.current) clearInterval(timerRef.current)
       return
@@ -69,26 +74,27 @@ export function POSRegister() {
     return () => {
       if (timerRef.current) clearInterval(timerRef.current)
     }
-  }, [locked, lockTimeoutMinutes, lock])
+  }, [embedded, locked, lockTimeoutMinutes, lock])
 
-  // Track activity on any interaction
+  // Track activity (standalone only)
   const handleActivity = useCallback(() => {
-    if (!locked) touchActivity()
-  }, [locked, touchActivity])
+    if (!embedded && !locked) touchActivity()
+  }, [embedded, locked, touchActivity])
 
-  // Fetch locations
+  // Fetch locations (standalone only — station shell handles this when embedded)
   const { data: locationsData } = useQuery({
     ...locationsOptions(),
-    enabled: !!token,
+    enabled: !!token && !embedded,
   })
   const locations = locationsData?.data ?? []
 
-  // Auto-select first location
+  // Auto-select first location (standalone only)
   useEffect(() => {
+    if (embedded) return
     if (!locationId && locations.length > 0) {
       setLocation(locations[0].id)
     }
-  }, [locationId, locations, setLocation])
+  }, [embedded, locationId, locations, setLocation])
 
   // Fetch current drawer for selected location
   const { data: drawer } = useQuery({
@@ -112,6 +118,20 @@ export function POSRegister() {
     enabled: !!currentTransactionId && !!token,
   })
 
+  // Embedded mode: just the content panels, no wrapper/lock/topbar
+  if (embedded) {
+    return (
+      <div className="flex flex-1 h-full min-h-0">
+        <div className="w-[60%] border-r border-border overflow-hidden">
+          <POSItemPanel transaction={transaction ?? null} />
+        </div>
+        <div className="w-[40%] overflow-hidden">
+          <POSCartPanel transaction={transaction ?? null} />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div
       className="relative flex flex-col h-full"

packages/admin/src/components/station-lessons/lessons-station.tsx

@@ -0,0 +1,17 @@
+import { GraduationCap } from 'lucide-react'
+
+interface LessonsStationProps {
+  permissions: string[]
+}
+
+export function LessonsStation({ permissions: _permissions }: LessonsStationProps) {
+  return (
+    <div className="flex items-center justify-center h-full text-muted-foreground">
+      <div className="text-center space-y-2">
+        <GraduationCap className="h-12 w-12 mx-auto opacity-30" />
+        <p className="text-lg font-medium">Lessons Station</p>
+        <p className="text-sm">Coming soon</p>
+      </div>
+    </div>
+  )
+}

packages/admin/src/components/station-repairs/repair-desk-view.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react'
+import { RepairStatusBar } from './repair-status-bar'
+import { RepairQueuePanel } from './repair-queue-panel'
+import { RepairDetailPanel } from './repair-detail-panel'
+import { RepairIntakeForm } from './repair-intake-form'
+
+interface RepairDeskViewProps {
+  canEdit: boolean
+}
+
+export function RepairDeskView({ canEdit }: RepairDeskViewProps) {
+  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)
+  const [intakeMode, setIntakeMode] = useState(false)
+  const [statusFilter, setStatusFilter] = useState<string[] | null>(null)
+  const [activeFilterLabel, setActiveFilterLabel] = useState<string | null>(null)
+
+  function handleFilterChange(statuses: string[] | null) {
+    setStatusFilter(statuses)
+    // Track which group label is active for the status bar highlight
+    if (!statuses) {
+      setActiveFilterLabel(null)
+    } else {
+      // Map statuses back to group label
+      const groups: Record<string, string> = {
+        new: 'New', in_transit: 'New', intake: 'New',
+        diagnosing: 'Diagnosing', pending_approval: 'Diagnosing',
+        approved: 'In Progress', in_progress: 'In Progress', pending_parts: 'In Progress',
+        ready: 'Ready',
+      }
+      setActiveFilterLabel(groups[statuses[0]] ?? null)
+    }
+  }
+
+  if (intakeMode) {
+    return (
+      <div className="flex flex-col h-full">
+        <RepairIntakeForm
+          onComplete={(ticketId) => {
+            setIntakeMode(false)
+            setSelectedTicketId(ticketId)
+          }}
+          onCancel={() => setIntakeMode(false)}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <RepairStatusBar activeFilter={activeFilterLabel} onFilterChange={handleFilterChange} />
+      <div className="flex flex-1 min-h-0">
+        <div className="w-[35%] border-r border-border overflow-hidden">
+          <RepairQueuePanel
+            selectedTicketId={selectedTicketId}
+            onSelectTicket={setSelectedTicketId}
+            onNewIntake={() => setIntakeMode(true)}
+            statusFilter={statusFilter}
+          />
+        </div>
+        <div className="w-[65%] overflow-hidden">
+          <RepairDetailPanel ticketId={selectedTicketId} canEdit={canEdit} />
+        </div>
+      </div>
+    </div>
+  )
+}

packages/admin/src/components/station-repairs/repair-detail-panel.tsx

@@ -0,0 +1,216 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  repairTicketDetailOptions, repairTicketKeys, repairTicketMutations,
+  repairLineItemListOptions,
+} from '@/api/repairs'
+import { api } from '@/lib/api-client'
+import { StatusProgress } from '@/components/repairs/status-progress'
+import { TicketNotes } from '@/components/repairs/ticket-notes'
+import { TicketPhotos } from '@/components/repairs/ticket-photos'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import { Mail, ChevronRight, Wrench } from 'lucide-react'
+import { toast } from 'sonner'
+
+const STATUS_FLOW = ['new', 'intake', 'diagnosing', 'pending_approval', 'approved', 'in_progress', 'ready', 'picked_up']
+
+interface RepairDetailPanelProps {
+  ticketId: string | null
+  canEdit: boolean
+}
+
+export function RepairDetailPanel({ ticketId, canEdit }: RepairDetailPanelProps) {
+  const queryClient = useQueryClient()
+  const [activeSection, setActiveSection] = useState<'details' | 'notes' | 'photos'>('details')
+
+  const { data: ticket, isLoading } = useQuery({
+    ...repairTicketDetailOptions(ticketId ?? ''),
+    enabled: !!ticketId,
+  })
+
+  const { data: lineItemsData } = useQuery({
+    ...repairLineItemListOptions(ticketId ?? '', { page: 1, limit: 100, q: undefined, sort: undefined, order: 'asc' }),
+    enabled: !!ticketId,
+  })
+
+  const statusMutation = useMutation({
+    mutationFn: (status: string) => repairTicketMutations.updateStatus(ticketId!, status),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: repairTicketKeys.detail(ticketId!) })
+      queryClient.invalidateQueries({ queryKey: ['repair-tickets', 'station-all'] })
+      toast.success('Status updated')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const emailEstimateMutation = useMutation({
+    mutationFn: (email: string) => api.post(`/v1/repair-tickets/${ticketId}/email-estimate`, { email }),
+    onSuccess: () => toast.success('Estimate emailed'),
+    onError: (err) => toast.error(err.message),
+  })
+
+  if (!ticketId) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground">
+        <div className="text-center space-y-2">
+          <Wrench className="h-10 w-10 mx-auto opacity-20" />
+          <p className="text-sm">Select a ticket from the queue</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (isLoading || !ticket) {
+    return (
+      <div className="p-4 space-y-4">
+        <div className="h-8 bg-muted animate-pulse rounded" />
+        <div className="h-20 bg-muted animate-pulse rounded" />
+        <div className="h-40 bg-muted animate-pulse rounded" />
+      </div>
+    )
+  }
+
+  const lineItems = lineItemsData?.data ?? []
+  const currentIdx = STATUS_FLOW.indexOf(ticket.status)
+  const nextStatus = currentIdx >= 0 && currentIdx < STATUS_FLOW.length - 1 ? STATUS_FLOW[currentIdx + 1] : null
+  const isTerminal = ['picked_up', 'delivered', 'cancelled'].includes(ticket.status)
+
+  function handleStatusClick(status: string) {
+    if (canEdit && !isTerminal) statusMutation.mutate(status)
+  }
+
+  function handleEmailEstimate() {
+    const email = (ticket as any).customerEmail
+    if (email) {
+      emailEstimateMutation.mutate(email)
+    } else {
+      toast.error('No customer email on file')
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* Header */}
+      <div className="p-3 border-b border-border shrink-0">
+        <div className="flex items-center justify-between mb-2">
+          <div>
+            <h3 className="text-lg font-semibold">#{ticket.ticketNumber}</h3>
+            <p className="text-sm text-muted-foreground">{ticket.customerName}</p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" className="gap-1.5" onClick={handleEmailEstimate}>
+              <Mail className="h-3.5 w-3.5" />
+              <span className="hidden lg:inline">Email Estimate</span>
+            </Button>
+            {canEdit && nextStatus && !isTerminal && (
+              <Button size="sm" className="gap-1.5" onClick={() => statusMutation.mutate(nextStatus)}>
+                Next <ChevronRight className="h-3.5 w-3.5" />
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <StatusProgress
+          currentStatus={ticket.status}
+          onStatusClick={canEdit && !isTerminal ? handleStatusClick : undefined}
+        />
+      </div>
+
+      {/* Section toggle */}
+      <div className="flex gap-1 px-3 py-2 border-b border-border shrink-0 bg-muted/30">
+        {(['details', 'notes', 'photos'] as const).map((s) => (
+          <Button
+            key={s}
+            variant={activeSection === s ? 'default' : 'ghost'}
+            size="sm"
+            className="h-7 text-xs capitalize"
+            onClick={() => setActiveSection(s)}
+          >
+            {s}
+          </Button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-3">
+        {activeSection === 'details' && (
+          <div className="space-y-4">
+            {/* Item info */}
+            <div className="space-y-1">
+              <p className="text-sm"><span className="text-muted-foreground">Item:</span> {ticket.itemDescription ?? 'N/A'}</p>
+              {ticket.serialNumber && <p className="text-sm"><span className="text-muted-foreground">S/N:</span> {ticket.serialNumber}</p>}
+              {ticket.conditionIn && <p className="text-sm"><span className="text-muted-foreground">Condition:</span> {ticket.conditionIn}</p>}
+              {ticket.conditionInNotes && <p className="text-sm text-muted-foreground">{ticket.conditionInNotes}</p>}
+            </div>
+
+            <Separator />
+
+            {/* Problem */}
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-1">Problem</p>
+              <p className="text-sm">{ticket.problemDescription}</p>
+            </div>
+
+            {/* Dates */}
+            <div className="flex gap-4">
+              {ticket.promisedDate && (
+                <div>
+                  <p className="text-xs text-muted-foreground">Promised</p>
+                  <p className="text-sm font-medium">{new Date(ticket.promisedDate).toLocaleDateString()}</p>
+                </div>
+              )}
+              {ticket.estimatedCost && (
+                <div>
+                  <p className="text-xs text-muted-foreground">Estimate</p>
+                  <p className="text-sm font-medium">${ticket.estimatedCost}</p>
+                </div>
+              )}
+              {ticket.actualCost && (
+                <div>
+                  <p className="text-xs text-muted-foreground">Actual</p>
+                  <p className="text-sm font-medium">${ticket.actualCost}</p>
+                </div>
+              )}
+            </div>
+
+            {/* Line items */}
+            {lineItems.length > 0 && (
+              <>
+                <Separator />
+                <div>
+                  <p className="text-xs font-medium text-muted-foreground mb-2">Line Items</p>
+                  <div className="space-y-1">
+                    {lineItems.map((item) => (
+                      <div key={item.id} className="flex items-center justify-between text-sm py-1">
+                        <div className="flex items-center gap-2">
+                          <Badge variant="outline" className="text-[10px] h-5">{item.itemType}</Badge>
+                          <span>{item.description}</span>
+                        </div>
+                        <span className="font-medium">${item.totalPrice}</span>
+                      </div>
+                    ))}
+                    <Separator />
+                    <div className="flex justify-between text-sm font-semibold pt-1">
+                      <span>Total</span>
+                      <span>${lineItems.reduce((sum, i) => sum + parseFloat(i.totalPrice), 0).toFixed(2)}</span>
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        )}
+
+        {activeSection === 'notes' && ticketId && (
+          <TicketNotes ticketId={ticketId} />
+        )}
+
+        {activeSection === 'photos' && ticketId && (
+          <TicketPhotos ticketId={ticketId} currentStatus={ticket.status} />
+        )}
+      </div>
+    </div>
+  )
+}

packages/admin/src/components/station-repairs/repair-intake-form.tsx

@@ -0,0 +1,392 @@
+import { useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { api } from '@/lib/api-client'
+import { repairTicketMutations, repairLineItemMutations, repairServiceTemplateListOptions } from '@/api/repairs'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Separator } from '@/components/ui/separator'
+import { Badge } from '@/components/ui/badge'
+import { ArrowLeft, ArrowRight, Plus, Trash2, Check, Search } from 'lucide-react'
+import { toast } from 'sonner'
+import type { RepairServiceTemplate } from '@/types/repair'
+import type { PaginatedResponse } from '@lunarfront/shared/schemas'
+
+interface RepairIntakeFormProps {
+  onComplete: (ticketId: string) => void
+  onCancel: () => void
+}
+
+interface LineItemDraft {
+  id: string
+  itemType: string
+  description: string
+  qty: number
+  unitPrice: number
+}
+
+const STEPS = ['Customer', 'Item', 'Problem & Estimate', 'Review']
+const CONDITIONS = [
+  { value: 'excellent', label: 'Excellent' },
+  { value: 'good', label: 'Good' },
+  { value: 'fair', label: 'Fair' },
+  { value: 'poor', label: 'Poor' },
+]
+
+export function RepairIntakeForm({ onComplete, onCancel }: RepairIntakeFormProps) {
+  const queryClient = useQueryClient()
+  const [step, setStep] = useState(0)
+
+  // Customer
+  const [customerName, setCustomerName] = useState('')
+  const [customerPhone, setCustomerPhone] = useState('')
+  const [customerEmail, setCustomerEmail] = useState('')
+  const [accountId, setAccountId] = useState<string | null>(null)
+
+  // Account search
+  const [accountSearch, setAccountSearch] = useState('')
+  const { data: accountResults } = useQuery({
+    queryKey: ['accounts', 'search', accountSearch],
+    queryFn: () => api.get<PaginatedResponse<{ id: string; name: string; email: string | null; phone: string | null }>>('/v1/accounts', { page: 1, limit: 10, q: accountSearch }),
+    enabled: accountSearch.length >= 2,
+    staleTime: 10_000,
+  })
+
+  // Item
+  const [itemDescription, setItemDescription] = useState('')
+  const [serialNumber, setSerialNumber] = useState('')
+  const [conditionIn, setConditionIn] = useState('')
+  const [conditionInNotes, setConditionInNotes] = useState('')
+
+  // Problem & Estimate
+  const [problemDescription, setProblemDescription] = useState('')
+  const [estimatedCost, setEstimatedCost] = useState('')
+  const [promisedDate, setPromisedDate] = useState('')
+  const [lineItems, setLineItems] = useState<LineItemDraft[]>([])
+
+  // Templates for quick-add
+  const { data: templatesData } = useQuery({
+    ...repairServiceTemplateListOptions({ page: 1, limit: 100, q: undefined, sort: 'sort_order', order: 'asc' }),
+  })
+  const templates = templatesData?.data ?? []
+
+  function addLineItem(template?: RepairServiceTemplate) {
+    setLineItems([...lineItems, {
+      id: crypto.randomUUID(),
+      itemType: template?.itemType ?? 'labor',
+      description: template?.description ?? template?.name ?? '',
+      qty: 1,
+      unitPrice: parseFloat(template?.defaultPrice ?? '0'),
+    }])
+  }
+
+  function removeLineItem(id: string) {
+    setLineItems(lineItems.filter(i => i.id !== id))
+  }
+
+  function updateLineItem(id: string, field: string, value: string | number) {
+    setLineItems(lineItems.map(i => i.id === id ? { ...i, [field]: value } : i))
+  }
+
+  const lineItemTotal = lineItems.reduce((sum, i) => sum + i.qty * i.unitPrice, 0)
+
+  const createMutation = useMutation({
+    mutationFn: async () => {
+      const ticket = await repairTicketMutations.create({
+        customerName,
+        customerPhone: customerPhone || undefined,
+        accountId: accountId || undefined,
+        itemDescription: itemDescription || undefined,
+        serialNumber: serialNumber || undefined,
+        conditionIn: conditionIn || undefined,
+        conditionInNotes: conditionInNotes || undefined,
+        problemDescription,
+        estimatedCost: estimatedCost ? parseFloat(estimatedCost) : undefined,
+        promisedDate: promisedDate || undefined,
+      })
+
+      // Create line items
+      for (const item of lineItems) {
+        await repairLineItemMutations.create(ticket.id, {
+          itemType: item.itemType,
+          description: item.description,
+          qty: item.qty,
+          unitPrice: item.unitPrice,
+        })
+      }
+
+      return ticket
+    },
+    onSuccess: (ticket) => {
+      queryClient.invalidateQueries({ queryKey: ['repair-tickets'] })
+      toast.success(`Ticket #${ticket.ticketNumber} created`)
+      onComplete(ticket.id)
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  function selectAccount(acct: { id: string; name: string; email: string | null; phone: string | null }) {
+    setAccountId(acct.id)
+    setCustomerName(acct.name)
+    if (acct.phone) setCustomerPhone(acct.phone)
+    if (acct.email) setCustomerEmail(acct.email)
+    setAccountSearch('')
+  }
+
+  function canProceed() {
+    if (step === 0) return customerName.trim().length > 0
+    if (step === 1) return true
+    if (step === 2) return problemDescription.trim().length > 0
+    return true
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Step indicator */}
+      <div className="flex items-center gap-2 px-4 py-3 border-b border-border shrink-0">
+        <Button variant="ghost" size="sm" onClick={onCancel}>
+          <ArrowLeft className="h-4 w-4 mr-1" />Cancel
+        </Button>
+        <div className="flex-1" />
+        <div className="flex items-center gap-1">
+          {STEPS.map((s, i) => (
+            <div key={s} className="flex items-center gap-1">
+              <div className={`h-7 px-3 rounded-full text-xs flex items-center font-medium ${
+                i === step ? 'bg-primary text-primary-foreground' :
+                i < step ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground'
+              }`}>
+                {i < step ? <Check className="h-3 w-3" /> : i + 1}
+                <span className="ml-1.5 hidden md:inline">{s}</span>
+              </div>
+              {i < STEPS.length - 1 && <div className="w-4 h-px bg-border" />}
+            </div>
+          ))}
+        </div>
+        <div className="flex-1" />
+      </div>
+
+      {/* Step content */}
+      <div className="flex-1 overflow-y-auto p-4 max-w-2xl mx-auto w-full">
+        {step === 0 && (
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold">Customer</h3>
+            <div className="space-y-2">
+              <Label>Search existing accounts</Label>
+              <div className="relative">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search by name..."
+                  value={accountSearch}
+                  onChange={(e) => setAccountSearch(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+              {accountSearch.length >= 2 && accountResults?.data && accountResults.data.length > 0 && (
+                <div className="border rounded-md max-h-40 overflow-y-auto">
+                  {accountResults.data.map((acct) => (
+                    <button
+                      key={acct.id}
+                      className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
+                      onClick={() => selectAccount(acct)}
+                    >
+                      <span className="font-medium">{acct.name}</span>
+                      {acct.phone && <span className="text-muted-foreground ml-2">{acct.phone}</span>}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+            <Separator />
+            <p className="text-sm text-muted-foreground">Or enter walk-in customer info:</p>
+            <div className="space-y-2">
+              <Label>Name *</Label>
+              <Input value={customerName} onChange={(e) => setCustomerName(e.target.value)} placeholder="Customer name" />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>Phone</Label>
+                <Input value={customerPhone} onChange={(e) => setCustomerPhone(e.target.value)} placeholder="555-1234" />
+              </div>
+              <div className="space-y-2">
+                <Label>Email</Label>
+                <Input type="email" value={customerEmail} onChange={(e) => setCustomerEmail(e.target.value)} placeholder="email@example.com" />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {step === 1 && (
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold">Item Details</h3>
+            <div className="space-y-2">
+              <Label>Item Description</Label>
+              <Input value={itemDescription} onChange={(e) => setItemDescription(e.target.value)} placeholder="e.g. Fender Stratocaster, iPhone 15, etc." />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>Serial Number</Label>
+                <Input value={serialNumber} onChange={(e) => setSerialNumber(e.target.value)} placeholder="Optional" />
+              </div>
+              <div className="space-y-2">
+                <Label>Condition</Label>
+                <Select value={conditionIn} onValueChange={setConditionIn}>
+                  <SelectTrigger><SelectValue placeholder="Select condition" /></SelectTrigger>
+                  <SelectContent>
+                    {CONDITIONS.map(c => <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>)}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label>Condition Notes</Label>
+              <Textarea value={conditionInNotes} onChange={(e) => setConditionInNotes(e.target.value)} placeholder="Describe any existing damage, scratches, etc." rows={3} />
+            </div>
+          </div>
+        )}
+
+        {step === 2 && (
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold">Problem & Estimate</h3>
+            <div className="space-y-2">
+              <Label>Problem Description *</Label>
+              <Textarea value={problemDescription} onChange={(e) => setProblemDescription(e.target.value)} placeholder="Describe what needs to be repaired..." rows={3} />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>Estimated Cost</Label>
+                <Input type="number" step="0.01" value={estimatedCost} onChange={(e) => setEstimatedCost(e.target.value)} placeholder="0.00" />
+              </div>
+              <div className="space-y-2">
+                <Label>Promised Date</Label>
+                <Input type="date" value={promisedDate} onChange={(e) => setPromisedDate(e.target.value)} />
+              </div>
+            </div>
+
+            <Separator />
+
+            <div className="flex items-center justify-between">
+              <Label>Line Items</Label>
+              <Button variant="outline" size="sm" onClick={() => addLineItem()}>
+                <Plus className="h-3.5 w-3.5 mr-1" />Add Item
+              </Button>
+            </div>
+
+            {/* Template quick-add */}
+            {templates.length > 0 && (
+              <div className="flex gap-1.5 flex-wrap">
+                {templates.slice(0, 10).map(t => (
+                  <Button key={t.id} variant="outline" size="sm" className="h-7 text-xs" onClick={() => addLineItem(t)}>
+                    {t.name} — ${t.defaultPrice}
+                  </Button>
+                ))}
+              </div>
+            )}
+
+            {lineItems.map((item) => (
+              <div key={item.id} className="flex items-end gap-2">
+                <div className="w-24 space-y-1">
+                  <Label className="text-xs">Type</Label>
+                  <Select value={item.itemType} onValueChange={(v) => updateLineItem(item.id, 'itemType', v)}>
+                    <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="labor">Labor</SelectItem>
+                      <SelectItem value="part">Part</SelectItem>
+                      <SelectItem value="flat_rate">Flat Rate</SelectItem>
+                      <SelectItem value="misc">Misc</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex-1 space-y-1">
+                  <Label className="text-xs">Description</Label>
+                  <Input className="h-8 text-sm" value={item.description} onChange={(e) => updateLineItem(item.id, 'description', e.target.value)} />
+                </div>
+                <div className="w-16 space-y-1">
+                  <Label className="text-xs">Qty</Label>
+                  <Input className="h-8 text-sm" type="number" min={1} value={item.qty} onChange={(e) => updateLineItem(item.id, 'qty', parseInt(e.target.value) || 1)} />
+                </div>
+                <div className="w-24 space-y-1">
+                  <Label className="text-xs">Price</Label>
+                  <Input className="h-8 text-sm" type="number" step="0.01" value={item.unitPrice} onChange={(e) => updateLineItem(item.id, 'unitPrice', parseFloat(e.target.value) || 0)} />
+                </div>
+                <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={() => removeLineItem(item.id)}>
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            ))}
+
+            {lineItems.length > 0 && (
+              <div className="text-right text-sm font-semibold">
+                Line Item Total: ${lineItemTotal.toFixed(2)}
+              </div>
+            )}
+          </div>
+        )}
+
+        {step === 3 && (
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold">Review</h3>
+            <div className="space-y-3 text-sm">
+              <div>
+                <p className="text-muted-foreground text-xs">Customer</p>
+                <p className="font-medium">{customerName}</p>
+                {customerPhone && <p className="text-muted-foreground">{customerPhone}</p>}
+              </div>
+              {itemDescription && (
+                <div>
+                  <p className="text-muted-foreground text-xs">Item</p>
+                  <p>{itemDescription}{serialNumber ? ` (S/N: ${serialNumber})` : ''}</p>
+                  {conditionIn && <Badge variant="outline" className="text-xs mt-1">{conditionIn}</Badge>}
+                </div>
+              )}
+              <div>
+                <p className="text-muted-foreground text-xs">Problem</p>
+                <p>{problemDescription}</p>
+              </div>
+              {(estimatedCost || promisedDate) && (
+                <div className="flex gap-6">
+                  {estimatedCost && <div><p className="text-muted-foreground text-xs">Estimate</p><p className="font-medium">${estimatedCost}</p></div>}
+                  {promisedDate && <div><p className="text-muted-foreground text-xs">Promised</p><p>{new Date(promisedDate + 'T00:00:00').toLocaleDateString()}</p></div>}
+                </div>
+              )}
+              {lineItems.length > 0 && (
+                <div>
+                  <p className="text-muted-foreground text-xs mb-1">Line Items</p>
+                  {lineItems.map(i => (
+                    <div key={i.id} className="flex justify-between py-0.5">
+                      <span>{i.description} x{i.qty}</span>
+                      <span className="font-medium">${(i.qty * i.unitPrice).toFixed(2)}</span>
+                    </div>
+                  ))}
+                  <Separator className="my-1" />
+                  <div className="flex justify-between font-semibold">
+                    <span>Total</span>
+                    <span>${lineItemTotal.toFixed(2)}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Navigation */}
+      <div className="flex items-center justify-between p-4 border-t border-border shrink-0">
+        <Button variant="outline" onClick={() => step > 0 ? setStep(step - 1) : onCancel()}>
+          <ArrowLeft className="h-4 w-4 mr-1" />
+          {step === 0 ? 'Cancel' : 'Back'}
+        </Button>
+        {step < STEPS.length - 1 ? (
+          <Button onClick={() => setStep(step + 1)} disabled={!canProceed()}>
+            Next <ArrowRight className="h-4 w-4 ml-1" />
+          </Button>
+        ) : (
+          <Button onClick={() => createMutation.mutate()} disabled={createMutation.isPending}>
+            {createMutation.isPending ? 'Creating...' : 'Create Ticket'}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}

packages/admin/src/components/station-repairs/repair-queue-panel.tsx

@@ -0,0 +1,135 @@
+import { useQuery } from '@tanstack/react-query'
+import { api } from '@/lib/api-client'
+import type { RepairTicket } from '@/types/repair'
+import type { PaginatedResponse } from '@lunarfront/shared/schemas'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Plus, Search } from 'lucide-react'
+import { useState } from 'react'
+
+const STATUS_COLORS: Record<string, string> = {
+  new: 'bg-blue-500/10 text-blue-500',
+  in_transit: 'bg-blue-500/10 text-blue-500',
+  intake: 'bg-blue-500/10 text-blue-500',
+  diagnosing: 'bg-yellow-500/10 text-yellow-500',
+  pending_approval: 'bg-yellow-500/10 text-yellow-500',
+  approved: 'bg-orange-500/10 text-orange-500',
+  in_progress: 'bg-orange-500/10 text-orange-500',
+  pending_parts: 'bg-orange-500/10 text-orange-500',
+  ready: 'bg-green-500/10 text-green-500',
+  picked_up: 'bg-muted text-muted-foreground',
+  delivered: 'bg-muted text-muted-foreground',
+  cancelled: 'bg-destructive/10 text-destructive',
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  new: 'New',
+  in_transit: 'In Transit',
+  intake: 'Intake',
+  diagnosing: 'Diagnosing',
+  pending_approval: 'Pending Approval',
+  approved: 'Approved',
+  in_progress: 'In Progress',
+  pending_parts: 'Pending Parts',
+  ready: 'Ready',
+  picked_up: 'Picked Up',
+  delivered: 'Delivered',
+  cancelled: 'Cancelled',
+}
+
+interface RepairQueuePanelProps {
+  selectedTicketId: string | null
+  onSelectTicket: (id: string) => void
+  onNewIntake: () => void
+  statusFilter: string[] | null
+}
+
+export function RepairQueuePanel({ selectedTicketId, onSelectTicket, onNewIntake, statusFilter }: RepairQueuePanelProps) {
+  const [search, setSearch] = useState('')
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['repair-tickets', 'station-queue', search, statusFilter],
+    queryFn: () => api.get<PaginatedResponse<RepairTicket>>('/v1/repair-tickets', {
+      page: 1,
+      limit: 100,
+      q: search || undefined,
+      sort: 'created_at',
+      order: 'desc',
+      ...(statusFilter ? { status: statusFilter.join(',') } : {}),
+    }),
+    staleTime: 30_000,
+    refetchInterval: 30_000,
+  })
+
+  const tickets = data?.data ?? []
+
+  function timeAgo(dateStr: string) {
+    const diff = Date.now() - new Date(dateStr).getTime()
+    const hours = Math.floor(diff / 3600000)
+    if (hours < 1) return 'Just now'
+    if (hours < 24) return `${hours}h ago`
+    const days = Math.floor(hours / 24)
+    return `${days}d ago`
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-3 space-y-2 shrink-0">
+        <Button className="w-full h-11 gap-2" onClick={onNewIntake}>
+          <Plus className="h-4 w-4" />
+          New Intake
+        </Button>
+        <div className="relative">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search tickets..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9 h-9"
+          />
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        {isLoading ? (
+          <div className="p-3 space-y-2">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <div key={i} className="h-16 bg-muted animate-pulse rounded-lg" />
+            ))}
+          </div>
+        ) : tickets.length === 0 ? (
+          <div className="p-6 text-center text-muted-foreground text-sm">
+            No tickets found
+          </div>
+        ) : (
+          <div className="px-2 pb-2 space-y-1">
+            {tickets.map((ticket) => (
+              <button
+                key={ticket.id}
+                className={`w-full text-left p-3 rounded-lg transition-colors ${
+                  selectedTicketId === ticket.id
+                    ? 'bg-primary/10 border border-primary/20'
+                    : 'hover:bg-muted border border-transparent'
+                }`}
+                onClick={() => onSelectTicket(ticket.id)}
+              >
+                <div className="flex items-center justify-between mb-1">
+                  <span className="text-sm font-medium">#{ticket.ticketNumber}</span>
+                  <Badge variant="outline" className={`text-[10px] ${STATUS_COLORS[ticket.status] ?? ''}`}>
+                    {STATUS_LABELS[ticket.status] ?? ticket.status}
+                  </Badge>
+                </div>
+                <div className="text-sm text-foreground truncate">{ticket.customerName}</div>
+                <div className="flex items-center justify-between mt-1">
+                  <span className="text-xs text-muted-foreground truncate">{ticket.itemDescription ?? 'No item'}</span>
+                  <span className="text-xs text-muted-foreground shrink-0 ml-2">{timeAgo(ticket.createdAt)}</span>
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

packages/admin/src/components/station-repairs/repair-status-bar.tsx

@@ -0,0 +1,64 @@
+import { useQuery } from '@tanstack/react-query'
+import { api } from '@/lib/api-client'
+import type { RepairTicket } from '@/types/repair'
+import type { PaginatedResponse } from '@lunarfront/shared/schemas'
+import { Badge } from '@/components/ui/badge'
+
+const STATUS_GROUPS = [
+  { label: 'New', statuses: ['new', 'in_transit', 'intake'], color: 'bg-blue-500/10 text-blue-500 border-blue-500/20' },
+  { label: 'Diagnosing', statuses: ['diagnosing', 'pending_approval'], color: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20' },
+  { label: 'In Progress', statuses: ['approved', 'in_progress', 'pending_parts'], color: 'bg-orange-500/10 text-orange-500 border-orange-500/20' },
+  { label: 'Ready', statuses: ['ready'], color: 'bg-green-500/10 text-green-500 border-green-500/20' },
+]
+
+interface RepairStatusBarProps {
+  activeFilter: string | null
+  onFilterChange: (statuses: string[] | null) => void
+}
+
+export function RepairStatusBar({ activeFilter, onFilterChange }: RepairStatusBarProps) {
+  // Fetch all non-terminal tickets for counts
+  const { data } = useQuery({
+    queryKey: ['repair-tickets', 'station-counts'],
+    queryFn: () => api.get<PaginatedResponse<RepairTicket>>('/v1/repair-tickets', { page: 1, limit: 1, q: undefined, sort: undefined, order: 'asc' }),
+    staleTime: 30_000,
+  })
+
+  // We need per-status counts — fetch a larger list for counting
+  const { data: allData } = useQuery({
+    queryKey: ['repair-tickets', 'station-all'],
+    queryFn: () => api.get<PaginatedResponse<RepairTicket>>('/v1/repair-tickets', { page: 1, limit: 500, q: undefined, sort: undefined, order: 'asc' }),
+    staleTime: 30_000,
+  })
+
+  const tickets = allData?.data ?? []
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/50 shrink-0">
+      <button
+        className={`text-xs px-2 py-1 rounded-md transition-colors ${!activeFilter ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
+        onClick={() => onFilterChange(null)}
+      >
+        All ({data?.pagination?.total ?? tickets.length})
+      </button>
+      {STATUS_GROUPS.map((group) => {
+        const count = tickets.filter(t => group.statuses.includes(t.status)).length
+        const isActive = activeFilter === group.label
+        return (
+          <button
+            key={group.label}
+            className={`flex items-center gap-1.5 text-xs px-2 py-1 rounded-md transition-colors ${isActive ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
+            onClick={() => onFilterChange(isActive ? null : group.statuses)}
+          >
+            {group.label}
+            {count > 0 && (
+              <Badge variant="outline" className={`text-[10px] h-4 px-1 ${group.color}`}>
+                {count}
+              </Badge>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

packages/admin/src/components/station-repairs/repairs-station.tsx

@@ -0,0 +1,12 @@
+import { RepairDeskView } from './repair-desk-view'
+
+interface RepairsStationProps {
+  permissions: string[]
+}
+
+export function RepairsStation({ permissions }: RepairsStationProps) {
+  const canEdit = permissions.includes('repairs.edit')
+
+  // TODO: Phase 3 — if user only has repairs.view (technician), show RepairTechView instead
+  return <RepairDeskView canEdit={canEdit} />
+}

packages/admin/src/components/station/station-shell.tsx

@@ -0,0 +1,177 @@
+import { useEffect, useRef, useCallback, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { queryOptions } from '@tanstack/react-query'
+import { api } from '@/lib/api-client'
+import { usePOSStore } from '@/stores/pos.store'
+import { useStationStore } from '@/stores/station.store'
+import { moduleListOptions } from '@/api/modules'
+import { currentDrawerOptions } from '@/api/pos'
+import { POSRegister } from '@/components/pos/pos-register'
+import { POSLockScreen } from '@/components/pos/pos-lock-screen'
+import { StationTopBar } from './station-top-bar'
+import { RepairsStation } from '@/components/station-repairs/repairs-station'
+import { LessonsStation } from '@/components/station-lessons/lessons-station'
+
+interface Location {
+  id: string
+  name: string
+}
+
+interface AppConfigEntry {
+  key: string
+  value: string | null
+}
+
+function locationsOptions() {
+  return queryOptions({
+    queryKey: ['locations'],
+    queryFn: () => api.get<{ data: Location[] }>('/v1/locations'),
+  })
+}
+
+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 StationShell() {
+  const { locationId, setLocation, locked, lock, touchActivity, token, setDrawerSession } = usePOSStore()
+  const { activeTab, setActiveTab } = useStationStore()
+
+  // 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
+  const handleActivity = useCallback(() => {
+    if (!locked) touchActivity()
+  }, [locked, touchActivity])
+
+  // Fetch locations
+  const { data: locationsData } = useQuery({
+    ...locationsOptions(),
+    enabled: !!token,
+  })
+  const locations = locationsData?.data ?? []
+
+  // Auto-select first location
+  useEffect(() => {
+    if (!locationId && locations.length > 0) {
+      setLocation(locations[0].id)
+    }
+  }, [locationId, locations, setLocation])
+
+  // Fetch enabled modules
+  const { data: modulesData } = useQuery({
+    ...moduleListOptions(),
+    enabled: !!token,
+  })
+  const enabledModules = new Set(
+    (modulesData?.data ?? []).filter((m) => m.enabled && m.licensed).map((m) => m.slug),
+  )
+
+  // Fetch permissions for current user
+  const [permissions, setPermissions] = useState<string[]>([])
+  const { data: permData } = useQuery({
+    queryKey: ['me', 'permissions'],
+    queryFn: () => api.get<{ permissions: string[] }>('/v1/me/permissions'),
+    enabled: !!token,
+  })
+  useEffect(() => {
+    if (permData?.permissions) setPermissions(permData.permissions)
+  }, [permData])
+
+  // Auto-select first available tab based on permissions + modules
+  useEffect(() => {
+    if (!token || !permData) return
+    const perms = permData.permissions ?? []
+    const tabs = [
+      { key: 'pos' as const, perm: 'pos.view', mod: 'pos' },
+      { key: 'repairs' as const, perm: 'repairs.view', mod: 'repairs' },
+      { key: 'lessons' as const, perm: 'lessons.view', mod: 'lessons' },
+    ]
+    const available = tabs.filter(t => perms.includes(t.perm) && enabledModules.has(t.mod))
+    if (available.length > 0 && !available.find(t => t.key === activeTab)) {
+      setActiveTab(available[0].key)
+    }
+  }, [token, permData, enabledModules, activeTab, setActiveTab])
+
+  // Fetch drawer for POS tab (needed in top bar)
+  const { data: drawer } = useQuery({
+    ...currentDrawerOptions(locationId),
+    retry: false,
+    enabled: !!locationId && !!token,
+  })
+
+  useEffect(() => {
+    if (drawer?.id && drawer.status === 'open') {
+      setDrawerSession(drawer.id)
+    } else {
+      setDrawerSession(null)
+    }
+  }, [drawer, setDrawerSession])
+
+  const hasPermission = (perm: string) => permissions.includes(perm)
+
+  return (
+    <div
+      className="relative flex flex-col h-full"
+      onPointerDown={handleActivity}
+      onKeyDown={handleActivity}
+    >
+      {locked && <POSLockScreen />}
+      <StationTopBar
+        locations={locations}
+        locationId={locationId}
+        onLocationChange={setLocation}
+        drawer={drawer ?? null}
+        permissions={permissions}
+        enabledModules={enabledModules}
+      />
+      <div className="flex-1 min-h-0 overflow-hidden">
+        {activeTab === 'pos' && enabledModules.has('pos') && hasPermission('pos.view') && (
+          <POSRegister embedded />
+        )}
+        {activeTab === 'repairs' && enabledModules.has('repairs') && hasPermission('repairs.view') && (
+          <RepairsStation permissions={permissions} />
+        )}
+        {activeTab === 'lessons' && enabledModules.has('lessons') && hasPermission('lessons.view') && (
+          <LessonsStation permissions={permissions} />
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,127 @@
+import { Link } from '@tanstack/react-router'
+import { usePOSStore } from '@/stores/pos.store'
+import { useStationStore } from '@/stores/station.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, Lock, DollarSign, Receipt, FileText, ShoppingCart, Wrench, GraduationCap } from 'lucide-react'
+import type { DrawerSession } from '@/api/pos'
+import { useState } from 'react'
+import { POSDrawerDialog } from '@/components/pos/pos-drawer-dialog'
+
+type StationTab = 'pos' | 'repairs' | 'lessons'
+
+const TAB_CONFIG: { key: StationTab; label: string; icon: typeof ShoppingCart; permission: string; module: string }[] = [
+  { key: 'pos', label: 'POS', icon: ShoppingCart, permission: 'pos.view', module: 'pos' },
+  { key: 'repairs', label: 'Repairs', icon: Wrench, permission: 'repairs.view', module: 'repairs' },
+  { key: 'lessons', label: 'Lessons', icon: GraduationCap, permission: 'lessons.view', module: 'lessons' },
+]
+
+interface StationTopBarProps {
+  locations: { id: string; name: string }[]
+  locationId: string | null
+  onLocationChange: (id: string) => void
+  drawer: DrawerSession | null
+  permissions: string[]
+  enabledModules: Set<string>
+}
+
+export function StationTopBar({ locations, locationId, onLocationChange, drawer, permissions, enabledModules }: StationTopBarProps) {
+  const cashier = usePOSStore((s) => s.cashier)
+  const lockFn = usePOSStore((s) => s.lock)
+  const receiptFormat = usePOSStore((s) => s.receiptFormat)
+  const setReceiptFormat = usePOSStore((s) => s.setReceiptFormat)
+  const { activeTab, setActiveTab } = useStationStore()
+  const [drawerDialogOpen, setDrawerDialogOpen] = useState(false)
+
+  const drawerOpen = drawer?.status === 'open'
+  const isThermal = receiptFormat === 'thermal'
+
+  const hasPermission = (perm: string) => permissions.includes(perm)
+  const visibleTabs = TAB_CONFIG.filter(t => hasPermission(t.permission) && enabledModules.has(t.module))
+
+  return (
+    <>
+      <div className="h-12 border-b border-border bg-card flex items-center px-3 shrink-0 gap-2">
+        {/* Left: back link */}
+        <Link to="/login" className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mr-2">
+          <ArrowLeft className="h-4 w-4" />
+          <span className="hidden sm:inline">Admin</span>
+        </Link>
+
+        {/* Tabs */}
+        <div className="flex items-center gap-1 bg-muted rounded-lg p-0.5">
+          {visibleTabs.map((tab) => (
+            <Button
+              key={tab.key}
+              variant={activeTab === tab.key ? 'default' : 'ghost'}
+              size="sm"
+              className={`h-8 gap-1.5 text-xs ${activeTab === tab.key ? '' : 'text-muted-foreground hover:text-foreground'}`}
+              onClick={() => setActiveTab(tab.key)}
+            >
+              <tab.icon className="h-3.5 w-3.5" />
+              {tab.label}
+            </Button>
+          ))}
+        </div>
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Location */}
+        {locations.length > 1 ? (
+          <Select value={locationId ?? ''} onValueChange={onLocationChange}>
+            <SelectTrigger className="h-8 w-40 text-sm">
+              <SelectValue placeholder="Location" />
+            </SelectTrigger>
+            <SelectContent>
+              {locations.map((loc) => (
+                <SelectItem key={loc.id} value={loc.id}>{loc.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : locations.length === 1 ? (
+          <span className="text-sm text-muted-foreground">{locations[0].name}</span>
+        ) : null}
+
+        {/* POS-specific controls */}
+        {activeTab === 'pos' && (
+          <>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 gap-1.5 text-xs text-muted-foreground"
+              onClick={() => setReceiptFormat(isThermal ? 'full' : 'thermal')}
+              title={isThermal ? 'Thermal' : 'Full Page'}
+            >
+              {isThermal ? <Receipt className="h-3.5 w-3.5" /> : <FileText className="h-3.5 w-3.5" />}
+            </Button>
+
+            <Button variant="ghost" size="sm" className="gap-1.5" onClick={() => setDrawerDialogOpen(true)}>
+              <DollarSign className="h-4 w-4" />
+              {drawerOpen ? (
+                <Badge variant="default" className="text-xs">Open</Badge>
+              ) : (
+                <Badge variant="outline" className="text-xs">Closed</Badge>
+              )}
+            </Button>
+          </>
+        )}
+
+        {/* Cashier + Lock */}
+        {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 Station">
+          <Lock className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <POSDrawerDialog
+        open={drawerDialogOpen}
+        onOpenChange={setDrawerDialogOpen}
+        drawer={drawer}
+      />
+    </>
+  )
+}

packages/admin/src/routeTree.gen.ts

@@ -9,6 +9,7 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as StationRouteImport } from './routes/station'
 import { Route as ResetPasswordRouteImport } from './routes/reset-password'
 import { Route as PosRouteImport } from './routes/pos'
 import { Route as LoginRouteImport } from './routes/login'
@@ -59,6 +60,11 @@ import { Route as AuthenticatedAccountsAccountIdMembersRouteImport } from './rou
 import { Route as AuthenticatedAccountsAccountIdEnrollmentsRouteImport } from './routes/_authenticated/accounts/$accountId/enrollments'
 import { Route as AuthenticatedLessonsScheduleInstructorsInstructorIdRouteImport } from './routes/_authenticated/lessons/schedule/instructors/$instructorId'
 
+const StationRoute = StationRouteImport.update({
+  id: '/station',
+  path: '/station',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ResetPasswordRoute = ResetPasswordRouteImport.update({
   id: '/reset-password',
   path: '/reset-password',
@@ -344,6 +350,7 @@ export interface FileRoutesByFullPath {
   '/login': typeof LoginRoute
   '/pos': typeof PosRoute
   '/reset-password': typeof ResetPasswordRoute
+  '/station': typeof StationRoute
   '/help': typeof AuthenticatedHelpRoute
   '/profile': typeof AuthenticatedProfileRoute
   '/settings': typeof AuthenticatedSettingsRoute
@@ -393,6 +400,7 @@ export interface FileRoutesByTo {
   '/login': typeof LoginRoute
   '/pos': typeof PosRoute
   '/reset-password': typeof ResetPasswordRoute
+  '/station': typeof StationRoute
   '/help': typeof AuthenticatedHelpRoute
   '/profile': typeof AuthenticatedProfileRoute
   '/settings': typeof AuthenticatedSettingsRoute
@@ -444,6 +452,7 @@ export interface FileRoutesById {
   '/login': typeof LoginRoute
   '/pos': typeof PosRoute
   '/reset-password': typeof ResetPasswordRoute
+  '/station': typeof StationRoute
   '/_authenticated/help': typeof AuthenticatedHelpRoute
   '/_authenticated/profile': typeof AuthenticatedProfileRoute
   '/_authenticated/settings': typeof AuthenticatedSettingsRoute
@@ -497,6 +506,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/pos'
     | '/reset-password'
+    | '/station'
     | '/help'
     | '/profile'
     | '/settings'
@@ -546,6 +556,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/pos'
     | '/reset-password'
+    | '/station'
     | '/help'
     | '/profile'
     | '/settings'
@@ -596,6 +607,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/pos'
     | '/reset-password'
+    | '/station'
     | '/_authenticated/help'
     | '/_authenticated/profile'
     | '/_authenticated/settings'
@@ -648,10 +660,18 @@ export interface RootRouteChildren {
   LoginRoute: typeof LoginRoute
   PosRoute: typeof PosRoute
   ResetPasswordRoute: typeof ResetPasswordRoute
+  StationRoute: typeof StationRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/station': {
+      id: '/station'
+      path: '/station'
+      fullPath: '/station'
+      preLoaderRoute: typeof StationRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/reset-password': {
       id: '/reset-password'
       path: '/reset-password'
@@ -1133,6 +1153,7 @@ const rootRouteChildren: RootRouteChildren = {
   LoginRoute: LoginRoute,
   PosRoute: PosRoute,
   ResetPasswordRoute: ResetPasswordRoute,
+  StationRoute: StationRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

packages/admin/src/routes/_authenticated.tsx

@@ -239,7 +239,7 @@ function AuthenticatedLayout() {
             {isModuleEnabled('pos') && canViewPOS && (
               <div className="mb-2">
                 <button
-                  onClick={() => { logout(); router.navigate({ to: '/pos' }) }}
+                  onClick={() => { logout(); router.navigate({ to: '/station' }) }}
                   className="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent w-full"
                   title={collapsed ? 'Point of Sale' : undefined}
                 >

packages/admin/src/routes/pos.tsx

@@ -1,14 +1,7 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { POSRegister } from '@/components/pos/pos-register'
+import { createFileRoute, redirect } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/pos')({
-  component: POSPage,
+  beforeLoad: () => {
+    throw redirect({ to: '/station' })
+  },
 })
-
-function POSPage() {
-  return (
-    <div className="h-screen w-screen overflow-hidden bg-background text-foreground">
-      <POSRegister />
-    </div>
-  )
-}

packages/admin/src/routes/station.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { StationShell } from '@/components/station/station-shell'
+
+export const Route = createFileRoute('/station')({
+  component: StationPage,
+})
+
+function StationPage() {
+  return (
+    <div className="h-screen w-screen overflow-hidden bg-background text-foreground">
+      <StationShell />
+    </div>
+  )
+}

packages/admin/src/stores/station.store.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand'
+
+type StationTab = 'pos' | 'repairs' | 'lessons'
+
+interface StationState {
+  activeTab: StationTab
+  setActiveTab: (tab: StationTab) => void
+}
+
+export const useStationStore = create<StationState>((set) => ({
+  activeTab: 'pos',
+  setActiveTab: (tab) => set({ activeTab: tab }),
+}))