Skip to main content

​
Development workflow

Start the dev server and make changes — Next.js hot-reloads automatically:
For desktop testing, use the Tauri dev window:

​
State management

The frontend uses a layered state architecture:

​
XState machines

  • sessionMachine — Login → active session → logout lifecycle
  • orderMachine — Order state transitions (idle → editing → checkout → paid → finalized)
  • syncMachine — Transport connectivity (online/offline/reconnecting/hubOffline)
  • uiMachine — UI mode management

​
POS reducer

The central usePOS reducer manages orders and tables. When adding fields to action payloads, update all three places:
  1. The POSAction type union
  2. The POSContextValue interface
  3. The useCallback wrapper
Missing any of these causes silent type errors or runtime bugs.

​
Domain layer

Business logic lives in src/domain/ as pure functions and types, separate from React. Each domain module exports:
  • Models — TypeScript types and interfaces
  • Computations — Pure functions for calculations (totals, taxes, validation)
  • Parsers — Functions to transform API responses into domain models

​
UI components

The shared component library in src/ui/ is built on Radix UI primitives with Tailwind v4 styling.

​
Internationalization

Translations use next-intl with locale files at src/i18n/locales/{en,es}.json. Wrap user-facing strings with the t() function and add entries to both locale files.