@fayz-ai/saas 0.1.6

package/src/shell/components/crud/archetypes/ClientOrdersTab.tsx

@@ -0,0 +1,212 @@
+import React, { useEffect, useState, useMemo, useCallback } from 'react'
+import {
+  CalendarDays, FileText, CircleDashed, CircleEllipsis, CircleCheckBig,
+  CircleAlert, Ban, ShoppingBag, Clock, UserX, ExternalLink,
+} from 'lucide-react'
+import type { ColumnDef } from '@tanstack/react-table'
+import { ListView } from '@fayz-ai/ui'
+import { useTranslation } from '../../../hooks/useTranslation'
+import type { EntityDef } from '../../../types/crud'
+import type { ClientDocument, ClientDocumentStage, ClientOrdersProvider, ClientOrdersNavigator } from '../../../types/client-orders'
+
+// ---------------------------------------------------------------------------
+// Stage badge config
+// ---------------------------------------------------------------------------
+
+interface StageDef {
+  icon: React.ElementType
+  color: string
+  labelKey: string
+}
+
+const STAGE_CONFIG: Record<string, StageDef> = {
+  draft:     { icon: CircleDashed, color: 'bg-muted text-muted-foreground', labelKey: 'crud.orders.stage.draft' },
+  quoted:    { icon: FileText, color: 'bg-info-soft text-info-soft-foreground', labelKey: 'crud.orders.stage.quoted' },
+  booked:    { icon: CalendarDays, color: 'bg-magic-soft text-magic-soft-foreground', labelKey: 'crud.orders.stage.booked' },
+  invoiced:  { icon: FileText, color: 'bg-warning-soft text-warning-soft-foreground', labelKey: 'crud.orders.stage.invoiced' },
+  paid:      { icon: CircleCheckBig, color: 'bg-success-soft text-success-soft-foreground', labelKey: 'crud.orders.stage.paid' },
+  partial:   { icon: CircleEllipsis, color: 'bg-warning-soft text-warning-soft-foreground', labelKey: 'crud.orders.stage.partial' },
+  overdue:   { icon: CircleAlert, color: 'bg-destructive-soft text-destructive-soft-foreground', labelKey: 'crud.orders.stage.overdue' },
+  cancelled: { icon: Ban, color: 'bg-muted text-muted-foreground', labelKey: 'crud.orders.stage.cancelled' },
+  no_show:   { icon: UserX, color: 'bg-destructive-soft text-destructive-soft-foreground', labelKey: 'crud.orders.stage.no_show' },
+  completed: { icon: CircleCheckBig, color: 'bg-success-soft text-success-soft-foreground', labelKey: 'crud.orders.stage.completed' },
+}
+
+// ---------------------------------------------------------------------------
+// Column definitions
+// ---------------------------------------------------------------------------
+
+function useColumns(
+  currency: { code: string; locale: string },
+  t: (key: string) => string,
+  onBookingClick?: (orderId: string) => void,
+  onInvoiceClick?: (orderId: string) => void,
+): ColumnDef<ClientDocument, any>[] {
+  return useMemo(() => [
+    {
+      accessorKey: 'date',
+      header: t('crud.orders.columnDate'),
+      size: 140,
+      cell: ({ row }) => {
+        const doc = row.original
+        const dateStr = new Date(doc.date).toLocaleDateString(currency.locale, { day: '2-digit', month: 'short', year: '2-digit' })
+        // If this order has a booking time, make it a clickable link
+        if (doc.startsAt && onBookingClick) {
+          const time = new Date(doc.startsAt).toLocaleTimeString(currency.locale, { hour: '2-digit', minute: '2-digit' })
+          return (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onBookingClick(doc.id) }}
+              className="inline-flex items-center gap-1 text-xs text-magic hover:underline whitespace-nowrap"
+            >
+              <CalendarDays className="h-3 w-3" />
+              {dateStr} {time}
+            </button>
+          )
+        }
+        return <span className="text-xs text-muted-foreground whitespace-nowrap">{dateStr}</span>
+      },
+    },
+    {
+      id: 'stage',
+      header: t('crud.orders.columnStage'),
+      size: 120,
+      cell: ({ row }) => {
+        const cfg = STAGE_CONFIG[row.original.stage] ?? STAGE_CONFIG.draft
+        const Icon = cfg.icon
+        const translated = t(cfg.labelKey)
+        const label = translated.startsWith('crud.orders.stage.') ? row.original.stage : translated
+        return (
+          <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium ${cfg.color}`}>
+            <Icon className="h-2.5 w-2.5" />
+            {label}
+          </span>
+        )
+      },
+    },
+    {
+      accessorKey: 'referenceNumber',
+      header: '#',
+      size: 100,
+      cell: ({ getValue }) => {
+        const num = getValue() as string | undefined
+        return num
+          ? <span className="text-xs font-mono text-muted-foreground">#{num}</span>
+          : <span className="text-muted-foreground">—</span>
+      },
+    },
+    {
+      accessorKey: 'description',
+      header: t('crud.orders.columnDescription'),
+      cell: ({ getValue }) => (
+        <span className="text-sm truncate max-w-[200px] block">
+          {(getValue() as string) || '—'}
+        </span>
+      ),
+    },
+    {
+      accessorKey: 'total',
+      header: t('crud.orders.columnAmount'),
+      size: 120,
+      cell: ({ row }) => {
+        const doc = row.original
+        const val = doc.total
+        if (!val) return <span className="text-muted-foreground">—</span>
+        const formatted = new Intl.NumberFormat(currency.locale, { style: 'currency', currency: currency.code }).format(val)
+        const isFinancial = ['invoiced', 'paid', 'partial', 'overdue'].includes(doc.stage)
+        // If invoiced/paid and has a reference, link to invoice detail
+        if (isFinancial && onInvoiceClick) {
+          return (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onInvoiceClick(doc.id) }}
+              className={`inline-flex items-center gap-1 font-medium text-sm text-primary hover:underline ${doc.stage === 'cancelled' ? 'line-through text-muted-foreground' : ''}`}
+            >
+              {formatted}
+              <ExternalLink className="h-2.5 w-2.5" />
+            </button>
+          )
+        }
+        return (
+          <span className={`font-medium text-sm ${doc.stage === 'cancelled' ? 'line-through text-muted-foreground' : ''}`}>
+            {formatted}
+          </span>
+        )
+      },
+    },
+  ], [currency, t, onBookingClick, onInvoiceClick])
+}
+
+// ---------------------------------------------------------------------------
+// Tab Component
+// ---------------------------------------------------------------------------
+
+export function ClientOrdersTab({
+  item,
+  entityDef,
+  provider,
+  navigator,
+  onBookingClick,
+  onInvoiceClick,
+  currency = { code: 'BRL', locale: 'pt-BR' },
+}: {
+  item: any
+  entityDef: EntityDef
+  provider: ClientOrdersProvider
+  navigator?: ClientOrdersNavigator
+  onBookingClick?: (orderId: string) => void
+  onInvoiceClick?: (orderId: string) => void
+  currency?: { code: string; locale: string }
+}) {
+  const { t } = useTranslation()
+  const [docs, setDocs] = useState<ClientDocument[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [stageFilter, setStageFilter] = useState<string | undefined>()
+
+  const clientId = item.id as string
+
+  const fetchDocs = useCallback(async () => {
+    setLoading(true)
+    try {
+      const result = await provider.getDocuments({
+        clientId,
+        stages: stageFilter ? [stageFilter] : undefined,
+      })
+      setDocs(result.data)
+      setTotal(result.total)
+    } catch {
+      setDocs([])
+      setTotal(0)
+    } finally {
+      setLoading(false)
+    }
+  }, [clientId, stageFilter, provider])
+
+  useEffect(() => { fetchDocs() }, [fetchDocs])
+
+  const columns = useColumns(currency, t, onBookingClick, onInvoiceClick)
+
+  const tags = useMemo(() => [
+    { value: 'booked', label: t('crud.orders.stage.booked') },
+    { value: 'invoiced', label: t('crud.orders.stage.invoiced') },
+    { value: 'paid', label: t('crud.orders.stage.paid') },
+    { value: 'quoted', label: t('crud.orders.stage.quoted') },
+  ], [t])
+
+  return (
+    <ListView<ClientDocument>
+      columns={columns}
+      data={docs}
+      loading={loading}
+      searchPlaceholder={t('crud.orders.searchPlaceholder')}
+      tags={tags}
+      allTagLabel={t('crud.orders.all')}
+      activeTag={stageFilter}
+      onTagChange={(v: any) => setStageFilter(v)}
+      onRowClick={navigator ? (row: any) => navigator.onNavigate(row) : undefined}
+      emptyIcon={ShoppingBag}
+      emptyMessage={t('crud.orders.noDocuments')}
+    />
+  )
+}

package/src/shell/components/layout/BottomNav.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react'
+import {
+  Home,
+  Users,
+  Settings,
+  CreditCard,
+  Bell,
+  Calendar,
+  Package,
+  BarChart3,
+  FileText,
+  Mail,
+  MessageCircle,
+  DollarSign,
+  Megaphone,
+  ShoppingCart,
+  Target,
+  Wrench,
+  ClipboardList,
+  Briefcase,
+  UserCog,
+  BookOpen,
+  Globe,
+  Percent,
+  Tag,
+  Camera,
+  UtensilsCrossed,
+  Search,
+  PartyPopper,
+  Radio,
+  CalendarDays,
+  Banknote,
+  Layers,
+  Music,
+  Eye,
+  ListMusic,
+  Disc3,
+  UsersRound,
+  Mic,
+  type LucideIcon,
+} from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { useChatStore } from '../../stores/chat.store'
+import { useTranslation } from '../../hooks/useTranslation'
+
+interface NavigationItem {
+  id: string
+  label: string
+  icon: string
+  route: string
+  section: 'main' | 'secondary' | 'settings'
+  badge?: string | number
+}
+
+interface BottomNavProps {
+  navigation: NavigationItem[]
+  activeRoute: string
+  onNavigate: (route: string) => void
+  showChat?: boolean
+  /** Custom items override — when provided, uses these instead of auto-picking from navigation */
+  customItems?: Array<{ label: string; icon: string; route: string }>
+}
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  Home, Users, Settings, CreditCard, Bell, Calendar, Package, BarChart3,
+  FileText, Mail, MessageCircle, DollarSign, Megaphone, ShoppingCart,
+  Target, Wrench, ClipboardList, Briefcase, UserCog, BookOpen, Globe,
+  Percent, Tag, Camera, UtensilsCrossed, Search,
+  PartyPopper, Radio, CalendarDays, Banknote, Layers, Music, Eye, ListMusic, Disc3, UsersRound, Mic,
+}
+
+export function BottomNav({ navigation, activeRoute, onNavigate, showChat = true, customItems }: BottomNavProps) {
+  const { t } = useTranslation()
+  const { isOpen, setOpen, toggleOpen } = useChatStore()
+
+  const handleNavigate = (route: string) => {
+    if (isOpen) setOpen(false)
+    onNavigate(route)
+  }
+
+  // Use custom items if provided, otherwise auto-pick from navigation
+  const maxItems = showChat ? 4 : 5
+  const items: Array<{ id: string; label: string; icon: string; route: string; badge?: string | number }> = customItems
+    ? customItems.slice(0, maxItems).map((ci) => ({ id: ci.route, label: ci.label, icon: ci.icon, route: ci.route }))
+    : navigation.filter((n) => n.section === 'main').slice(0, maxItems)
+
+  return (
+    <nav data-print="hide" className="fixed inset-x-0 bottom-0 z-50 flex h-16 items-center justify-around border-t border-border bg-background px-2 md:hidden">
+      {items.map((item) => {
+        const Icon = ICON_MAP[item.icon] ?? Home
+        const isActive =
+          activeRoute === item.route || activeRoute.startsWith(item.route + '/')
+
+        return (
+          <button
+            key={item.id}
+            onClick={() => handleNavigate(item.route)}
+            className={cn(
+              'relative flex flex-1 flex-col items-center gap-1 py-1 text-xs font-medium transition-colors',
+              isActive
+                ? 'text-primary'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            <Icon className="h-5 w-5" />
+            <span className="truncate">{item.label}</span>
+            {item.badge !== undefined && (
+              <span className="absolute -top-0.5 right-1/4 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-foreground">
+                {item.badge}
+              </span>
+            )}
+          </button>
+        )
+      })}
+      {showChat && (
+        <button
+          onClick={toggleOpen}
+          className={cn(
+            'relative flex flex-1 flex-col items-center gap-1 py-1 text-xs font-medium transition-colors',
+            isOpen
+              ? 'text-primary'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          <MessageCircle className="h-5 w-5" />
+          <span>{t('layout.bottomNav.chat')}</span>
+        </button>
+      )}
+    </nav>
+  )
+}

package/src/shell/components/layout/CommandPalette.tsx

@@ -0,0 +1,257 @@
+import * as React from 'react'
+import { useEffect, useRef, useState, useCallback } from 'react'
+import { Command } from 'cmdk'
+import * as Dialog from '@radix-ui/react-dialog'
+import {
+  Home, Users, Settings, CreditCard, Bell, Calendar, Package, BarChart3,
+  FileText, Mail, Search, DollarSign, Megaphone, ShoppingCart, Target,
+  Wrench, ClipboardList, Briefcase, UserCog, BookOpen, MessageCircle,
+  Globe, Percent, Tag, Camera, UtensilsCrossed, MapPin, Handshake,
+  Contact, Building2, Filter, Plus, List, User, Box, Sparkles, Loader2,
+  type LucideIcon,
+} from 'lucide-react'
+import { useTranslation } from '../../hooks/useTranslation'
+
+export interface CommandItem {
+  id: string
+  label: string
+  icon?: string
+  action: () => void
+  group?: string
+  keywords?: string
+  subtitle?: string
+}
+
+export interface EntitySearchResult {
+  id: string
+  label: string
+  subtitle?: string
+  group: string
+  icon?: string
+  data?: Record<string, unknown>
+}
+
+export type EntitySearchFn = (query: string) => Promise<EntitySearchResult[]>
+
+interface CommandPaletteProps {
+  commands?: CommandItem[]
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onEntitySearch?: EntitySearchFn
+  onEntitySelect?: (result: EntitySearchResult) => void
+}
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  Home, Users, Settings, CreditCard, Bell, Calendar, Package, BarChart3,
+  FileText, Mail, Search, DollarSign, Megaphone, ShoppingCart, Target,
+  Wrench, ClipboardList, Briefcase, UserCog, BookOpen, MessageCircle,
+  Globe, Percent, Tag, Camera, UtensilsCrossed, MapPin, Handshake,
+  Contact, Building2, Filter, Plus, List, User, Box, Sparkles,
+}
+
+const ENTITY_ICON: Record<string, LucideIcon> = {
+  person: User,
+  persons: User,
+  product: Box,
+  products: Box,
+  service: Sparkles,
+  services: Sparkles,
+}
+
+// ---------------------------------------------------------------------------
+// Debounced entity search hook
+// ---------------------------------------------------------------------------
+
+function useEntitySearch(searchFn: EntitySearchFn | undefined, query: string, open: boolean) {
+  const [results, setResults] = useState<EntitySearchResult[]>([])
+  const [loading, setLoading] = useState(false)
+  const abortRef = useRef(0)
+
+  useEffect(() => {
+    if (!open) {
+      setResults([])
+      setLoading(false)
+      return
+    }
+
+    const trimmed = query.trim()
+    if (!searchFn || trimmed.length < 2) {
+      setResults([])
+      setLoading(false)
+      return
+    }
+
+    setLoading(true)
+    const id = ++abortRef.current
+
+    const timer = setTimeout(async () => {
+      try {
+        const data = await searchFn(trimmed)
+        if (abortRef.current === id) {
+          setResults(data)
+          setLoading(false)
+        }
+      } catch {
+        if (abortRef.current === id) {
+          setResults([])
+          setLoading(false)
+        }
+      }
+    }, 250)
+
+    return () => clearTimeout(timer)
+  }, [query, searchFn, open])
+
+  return { results, loading }
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function CommandPalette({ commands = [], open, onOpenChange, onEntitySearch, onEntitySelect }: CommandPaletteProps) {
+  const { t } = useTranslation()
+  const [search, setSearch] = useState('')
+  const { results: entityResults, loading: entityLoading } = useEntitySearch(onEntitySearch, search, open)
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        onOpenChange(!open)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [open, onOpenChange])
+
+  // Reset search when closed
+  useEffect(() => {
+    if (!open) setSearch('')
+  }, [open])
+
+  const grouped = commands.reduce<Record<string, CommandItem[]>>((acc, cmd) => {
+    const group = cmd.group ?? 'Actions'
+    if (!acc[group]) acc[group] = []
+    acc[group].push(cmd)
+    return acc
+  }, {})
+
+  // Group entity results
+  const entityGrouped = entityResults.reduce<Record<string, EntitySearchResult[]>>((acc, r) => {
+    const group = r.group || 'Results'
+    if (!acc[group]) acc[group] = []
+    acc[group].push(r)
+    return acc
+  }, {})
+
+  const hasSearch = search.trim().length >= 2
+  const totalResults = commands.length + entityResults.length
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="saas-overlay fixed inset-0 z-50 bg-black/40 backdrop-blur-sm" />
+        <Dialog.Content className="fayz-glass-surface saas-cmd-palette fixed left-1/2 top-[15%] z-50 w-full max-w-xl -translate-x-1/2 overflow-hidden rounded-2xl border border-border/50 bg-popover shadow-2xl">
+          <Dialog.Title className="sr-only">{t('layout.commandPalette.title')}</Dialog.Title>
+          <Dialog.Description className="sr-only">{t('layout.commandPalette.description')}</Dialog.Description>
+
+          <Command className="flex flex-col" label="Command palette" shouldFilter={true}>
+            <div className="flex items-center gap-3 border-b border-border/50 px-4">
+              <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+              <Command.Input
+                placeholder={t('layout.commandPalette.placeholder')}
+                className="flex h-12 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                autoFocus
+                value={search}
+                onValueChange={setSearch}
+              />
+              {entityLoading && <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" />}
+              <kbd className="hidden shrink-0 rounded-md border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline-block">ESC</kbd>
+            </div>
+
+            <Command.List className="max-h-[360px] overflow-y-auto p-1.5">
+              <Command.Empty className="py-8 text-center text-sm text-muted-foreground">
+                {entityLoading ? t('layout.commandPalette.searching') : t('layout.commandPalette.noResults')}
+              </Command.Empty>
+
+              {/* Static commands (pages, actions) */}
+              {Object.entries(grouped).map(([group, items]) => (
+                <Command.Group
+                  key={group}
+                  heading={group}
+                  className="[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-muted-foreground"
+                >
+                  {items.map((cmd) => {
+                    const Icon = cmd.icon ? (ICON_MAP[cmd.icon] ?? null) : null
+                    return (
+                      <Command.Item
+                        key={cmd.id}
+                        value={`${cmd.label} ${cmd.keywords ?? ''}`}
+                        onSelect={() => { cmd.action(); onOpenChange(false) }}
+                        className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm outline-none transition-colors aria-selected:bg-muted"
+                      >
+                        {Icon && <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />}
+                        <span className="flex-1">{cmd.label}</span>
+                        <span className="text-[11px] text-muted-foreground/40">{cmd.group}</span>
+                      </Command.Item>
+                    )
+                  })}
+                </Command.Group>
+              ))}
+
+              {/* Entity search results */}
+              {hasSearch && Object.entries(entityGrouped).map(([group, items]) => {
+                const GroupIcon = ENTITY_ICON[group.toLowerCase()] ?? User
+                return (
+                  <Command.Group
+                    key={`entity:${group}`}
+                    heading={group}
+                    className="[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-muted-foreground"
+                  >
+                    {items.map((result) => {
+                      const Icon = result.icon ? (ICON_MAP[result.icon] ?? GroupIcon) : GroupIcon
+                      return (
+                        <Command.Item
+                          key={`entity:${result.id}`}
+                          value={`${result.label} ${result.subtitle ?? ''} ${result.group}`}
+                          onSelect={() => { onEntitySelect?.(result); onOpenChange(false) }}
+                          className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm outline-none transition-colors aria-selected:bg-muted"
+                        >
+                          <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
+                          <div className="flex-1 min-w-0">
+                            <span className="block truncate">{result.label}</span>
+                            {result.subtitle && (
+                              <span className="block truncate text-[11px] text-muted-foreground">{result.subtitle}</span>
+                            )}
+                          </div>
+                          <span className="text-[11px] text-muted-foreground/40 shrink-0">{result.group}</span>
+                        </Command.Item>
+                      )
+                    })}
+                  </Command.Group>
+                )
+              })}
+            </Command.List>
+
+            <div className="flex items-center justify-between border-t border-border/50 px-4 py-2">
+              <span className="text-xs text-muted-foreground">
+                {entityLoading
+                  ? t('layout.commandPalette.searching')
+                  : hasSearch
+                    ? t('layout.commandPalette.resultCount', { count: String(totalResults), plural: totalResults !== 1 ? 's' : '' })
+                    : t('layout.commandPalette.commandCount', { count: String(commands.length), plural: commands.length !== 1 ? 's' : '' })}
+              </span>
+              <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
+                <kbd className="rounded border border-border bg-muted px-1 py-0.5 font-medium">&uarr;&darr;</kbd>
+                <span>{t('layout.commandPalette.navigate')}</span>
+                <kbd className="rounded border border-border bg-muted px-1 py-0.5 font-medium">&crarr;</kbd>
+                <span>{t('layout.commandPalette.open')}</span>
+              </div>
+            </div>
+          </Command>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/shell/components/layout/LocationSwitchOverlay.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import { MapPin } from 'lucide-react'
+import { useLocationStore } from '../../stores/location.store'
+import { useTranslation } from '../../hooks/useTranslation'
+
+export function LocationSwitchOverlay() {
+  const switching = useLocationStore((s) => s.switching)
+  const { t } = useTranslation()
+
+  if (!switching) return null
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/95 backdrop-blur-sm animate-[locSwitch-in_350ms_ease-out_both]">
+      <style>{`
+        @keyframes locSwitch-in {
+          from { opacity: 0; }
+          to   { opacity: 1; }
+        }
+        @keyframes locSwitch-icon {
+          0%   { transform: scale(0.7) rotate(-10deg); opacity: 0; }
+          50%  { transform: scale(1.1) rotate(3deg);   opacity: 1; }
+          100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
+        }
+        @keyframes locSwitch-text {
+          from { opacity: 0; transform: translateY(6px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes locSwitch-dots {
+          0%, 20% { opacity: 0.3; }
+          50%     { opacity: 1; }
+          80%, 100% { opacity: 0.3; }
+        }
+      `}</style>
+      <div className="text-center">
+        <div
+          className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10"
+          style={{ animation: 'locSwitch-icon 500ms ease-out both' }}
+        >
+          <MapPin className="h-8 w-8 text-primary" />
+        </div>
+        <p
+          className="text-lg font-semibold text-foreground"
+          style={{ animation: 'locSwitch-text 400ms ease-out 200ms both' }}
+        >
+          {t('layout.switchingLocation')}
+        </p>
+        <div
+          className="mt-2 flex items-center justify-center gap-1"
+          style={{ animation: 'locSwitch-text 400ms ease-out 350ms both' }}
+        >
+          {[0, 1, 2].map((i) => (
+            <span
+              key={i}
+              className="h-1.5 w-1.5 rounded-full bg-primary"
+              style={{
+                animation: `locSwitch-dots 1s ease-in-out ${i * 200}ms infinite`,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/shell/components/layout/MockModeBanner.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { WifiOff } from 'lucide-react'
+import { getSupabaseClientOptional } from '../../lib/supabase'
+import { useTranslation } from '../../hooks/useTranslation'
+
+export function MockModeBanner() {
+  const { t } = useTranslation()
+
+  if (getSupabaseClientOptional()) return null
+
+  return (
+    <div className="bg-warning/10 border-b border-warning/30 px-4 py-1.5 flex items-center justify-center gap-2 text-xs text-warning">
+      <WifiOff className="h-3 w-3 shrink-0" />
+      <span>{t('app.mockMode.banner')}</span>
+    </div>
+  )
+}