54 Commits

Author SHA1 Message Date
ryan
b9798f2c8c feat: accounting module — schema, migration, Zod schemas, AR balance service
Phase 1 foundation:
- Migration 0047: all accounting tables (invoice, payment_application,
  account_balance, account_code, journal_entry, billing_run), chart of
  accounts seed, nextBillingDate on enrollment, accounting module config
- Drizzle schema file with all table definitions and type exports
- Zod validation schemas (invoice, payment, billing, reports)
- AccountBalanceService: materialized AR balance per account

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 12:00:34 +00:00
5f4a12b9c4 Merge pull request 'feat: unified station mode (POS + Repairs + Lessons)' (#14) from feature/station-mode into main
All checks were successful
Build & Release / build (push) Successful in 1m26s
Reviewed-on: #14
2026-04-06 11:31:25 +00:00
ryan
3b0daeae0c feat: lessons station + technician workbench + polish
All checks were successful
CI / ci (pull_request) Successful in 26s
CI / e2e (pull_request) Successful in 1m8s
Phase 3: Technician workbench
- Focused single-ticket view with Work, Parts, Photos, Notes sections
- Template quick-add for line items, inline add/delete
- Ticket selector for multiple assigned tickets

Phase 4: Lessons desk view
- Today overview: all instructors' sessions, group by time/instructor
- Quick check-in (attended/missed/cancelled) buttons
- Highlights upcoming and overdue sessions
- Schedule view: weekly grid with instructor filter, open slots

Phase 5: Lessons instructor view
- My Sessions (today) + Week calendar sub-views
- Session detail with attendance, notes, plan items
- Week calendar with session blocks, click to open detail dialog

Phase 6: Polish
- Permission-based routing: desk vs tech/instructor views
- Build and lint clean

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 01:46:51 +00:00
ryan
0411df57eb feat: repairs station — technician workbench
- Focused single-ticket workbench with sections: Work, Parts, Photos, Notes
- Template quick-add for line items
- Auto-filters to assigned tickets for the logged-in technician
- Ticket selector when multiple assigned
- Permission routing: repairs.edit → desk view, view-only → tech workbench

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 01:37:01 +00:00
ryan
082e388799 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>
2026-04-06 01:33:06 +00:00
abe75fb1fd Merge pull request 'feat: email receipts and repair estimates' (#13) from feature/email-receipts into main
All checks were successful
Build & Release / build (push) Successful in 1m17s
Reviewed-on: #13
2026-04-05 20:34:59 +00:00
ryan
45fd6d34eb feat: email receipts and repair estimates
All checks were successful
CI / ci (pull_request) Successful in 24s
CI / e2e (pull_request) Successful in 1m2s
Backend:
- Server-side HTML email templates (receipt + estimate) with inline CSS
- POST /v1/transactions/:id/email-receipt with per-transaction rate limiting
- POST /v1/repair-tickets/:id/email-estimate with per-ticket rate limiting
- customerEmail field added to receipt and ticket detail responses
- Test email provider for API tests (logs instead of sending)

Frontend:
- POS payment dialog Email button enabled with inline email input
- Pre-fills customer email from linked account
- Repair ticket detail page has Email Estimate button with dialog
- Pre-fills from account email

Tests:
- 12 unit tests for email template renderers
- 8 API tests for email receipt/estimate endpoints and validation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 20:32:52 +00:00
30233b430f Merge pull request 'fix: move PIN warning banner to authenticated layout for all pages' (#12) from feature/user-profile into main
All checks were successful
Build & Release / build (push) Successful in 1m16s
Reviewed-on: #12
2026-04-05 20:03:56 +00:00
ryan
924a28e201 feat: forced PIN setup modal on all authenticated pages
All checks were successful
CI / ci (pull_request) Successful in 29s
CI / e2e (pull_request) Successful in 1m7s
Replaces the alert banner with a blocking modal dialog that requires
users to set a PIN before they can use the app. Cannot be dismissed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 20:01:14 +00:00
ryan
2cd646ddea fix: remove unused Link import from profile page
All checks were successful
CI / ci (pull_request) Successful in 27s
CI / e2e (pull_request) Successful in 1m6s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 19:57:31 +00:00
ryan
3f9e125412 fix: move PIN warning banner to authenticated layout for all pages
Some checks failed
CI / ci (pull_request) Failing after 26s
CI / e2e (pull_request) Has been skipped
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 19:51:39 +00:00
7bca854058 Merge pull request 'feat: tabbed profile page with PIN setup and auto employee numbers' (#11) from feature/user-profile into main
All checks were successful
Build & Release / build (push) Successful in 1m19s
Reviewed-on: #11
2026-04-05 19:43:53 +00:00
ryan
96d2a966d7 feat: tabbed profile page with PIN setup and auto employee numbers
All checks were successful
CI / ci (pull_request) Successful in 25s
CI / e2e (pull_request) Successful in 55s
- Profile page split into Account, Security, Appearance tabs
- Security tab: change password + set/change/remove POS PIN
- Warning banner with link to Security tab when no PIN is set
- /auth/me returns employeeNumber and hasPin
- Migration 0046: Postgres trigger auto-assigns sequential employee
  numbers starting at 1001, backfills existing users
- Added shadcn Alert component

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 19:41:36 +00:00
ryan
666ae8d59b fix: assign Admin RBAC role to initial user on seed
All checks were successful
Build & Release / build (push) Successful in 22s
Without this, the initial user has no permissions and sees no modules.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 17:38:53 +00:00
67f1e4a26a Merge pull request 'feat: set browser tab title and favicon from customer branding' (#10) from feature/password-reset into main
All checks were successful
Build & Release / build (push) Successful in 1m20s
Reviewed-on: #10
2026-04-05 17:19:53 +00:00
ryan
613784a1cc feat: set browser tab title and favicon from customer branding
All checks were successful
CI / ci (pull_request) Successful in 27s
CI / e2e (pull_request) Successful in 1m15s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 17:15:32 +00:00
ea9aceec46 Merge pull request 'feat: password reset flow with welcome emails' (#9) from feature/password-reset into main
All checks were successful
Build & Release / build (push) Successful in 1m16s
Reviewed-on: #9
2026-04-05 17:12:06 +00:00
ryan
bc8613bbbc feat: password reset flow with welcome emails
All checks were successful
CI / ci (pull_request) Successful in 27s
CI / e2e (pull_request) Successful in 1m0s
- POST /auth/forgot-password with welcome/reset email templates
- POST /auth/reset-password with Zod validation, 4-hour tokens
- Per-email rate limiting (3/hr) via Valkey, no user enumeration
- Login page "Forgot password?" toggle with inline form
- /reset-password page for setting new password from email link
- Initial user seed sends welcome email instead of requiring password
- CLI script for force-resetting passwords via kubectl exec
- APP_URL env var in chart, removed INITIAL_USER_PASSWORD

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 17:09:23 +00:00
Ryan Moon
a1dc4b0e47 feat: seed company record from BUSINESS_NAME env var on first startup
All checks were successful
Build & Release / build (push) Successful in 19s
2026-04-05 11:49:51 -05:00
81de80abb9 Merge pull request 'fix: regenerate route tree to include reports/daily route' (#8) from feature/login-branding into main
All checks were successful
Build & Release / build (push) Successful in 16s
Reviewed-on: #8
2026-04-05 16:25:46 +00:00
ryan
75c7c28f73 fix: generate route tree in CI and Docker build
All checks were successful
CI / ci (pull_request) Successful in 23s
CI / e2e (pull_request) Successful in 1m1s
Ensures routeTree.gen.ts is always fresh so stale checked-in copies
don't break the frontend build or lint.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:24:08 +00:00
ryan
99fdaaa05a fix: regenerate route tree to include reports/daily route
All checks were successful
CI / ci (pull_request) Successful in 21s
CI / e2e (pull_request) Successful in 55s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:22:20 +00:00
6870aea1a5 Merge pull request 'feat: show customer branding on login page' (#7) from feature/login-branding into main
Some checks failed
Build & Release / build (push) Failing after 37s
Reviewed-on: #7
2026-04-05 16:19:32 +00:00
ryan
e589ff02f0 fix: remove unused imports to pass lint
All checks were successful
CI / ci (pull_request) Successful in 22s
CI / e2e (pull_request) Successful in 59s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:17:42 +00:00
ryan
da4b765b14 feat: show customer branding on login page
Some checks failed
CI / ci (pull_request) Failing after 20s
CI / e2e (pull_request) Has been skipped
Adds public /v1/store/branding and /v1/store/logo endpoints so the
login page can display the customer's name and logo without auth,
with "Powered by LunarFront" underneath — matching the sidebar style.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:14:07 +00:00
ryan
326b30161b fix: correct _transaction prop name to transaction in POSItemPanel
Some checks failed
Build & Release / build (push) Failing after 35s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:10:15 +00:00
ryan
ac9b615470 fix: renumber migrations 0042-0045 after rebase onto main
Some checks failed
Build & Release / build (push) Failing after 1m53s
Main added 0041_app_settings, so branch migrations shift up by one.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:06:12 +00:00
ryan
785071e5fd fix: add line items to repair tickets in music store seed
Tickets with work in progress or ready for pickup now have realistic
line items (labor, parts, flat rates, consumables). The ready ticket
(David Smith — Violin) has billable items for POS checkout testing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:20 +00:00
ryan
0ca6ae7632 fix: make music store seed self-contained, remove non-string instruments
- Seed now bootstraps company, location, RBAC, admin user, modules, and
  default register — no dev-seed dependency
- Admin: admin@harmonymusic.com / admin1234 (POS: 10011234)
- Added 10 music-focused accounts and 16 members (families, individuals,
  schools, orchestra)
- Removed all guitar, brass, and woodwind templates and repair tickets
- Added string-specific templates (fingerboard planing, varnish touch-up,
  neck reset, bass bar replacement, tailgut replacement)
- School batch changed from band instruments to string orchestra instruments
- All repair tickets now reference string instruments only

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
7d9aeaf188 feat: named registers, X/Z reports, daily rollup, fix drawerSessionId
Registers:
- New register table with location association
- CRUD service + API routes (POST/GET/PATCH/DELETE /registers)
- Drawer sessions now link to a register via registerId
- Register ID persisted in localStorage per device

X/Z Reports:
- ReportService with getDrawerReport() (X or Z depending on session state)
- Z report auto-displayed on drawer close in the drawer dialog
- X report (Current Shift Report) button on open drawer view
- Report shows: sales summary, payment breakdown, discounts, cash accountability, adjustments

Daily Rollup:
- ReportService.getDailyReport() aggregates all sessions at a location for a date
- New /reports/daily endpoint with locationId + date params
- Frontend daily report page with date picker, location selector, session breakdown

Critical Fix:
- drawerSessionId is now populated on transactions when completing (was never set before)
- This enables accurate per-drawer reporting and cash accountability

Migration 0044: register table, drawer_session.register_id column

Tests: 14 new (register CRUD, drawer report X/Z, drawerSessionId population, daily rollup, register-drawer link)
Full suite: 367 passed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
be8cc0ad8b fix: code review fixes + unit/API tests for repair-POS integration
Code review fixes:
- Wrap createFromRepairTicket() in DB transaction for atomicity
- Wrap complete() inventory + status updates in DB transaction
- Repair ticket status update now atomic with transaction completion
- Add Zod validation on from-repair route body
- Fix requiresDiscountOverride: threshold and manual_discount are independent checks
- Order discount distributes proportionally across line items (not first-only)
- Extract shared receipt calculations into useReceiptData/useBarcode hooks
- Add error handling for barcode generation

Tests:
- Unit: consumable tax category mapping, exempt rate short-circuit
- API: ready-for-pickup listing + search, from-repair transaction creation,
  consumable exclusion from line items, tax rate verification (labor=service,
  part=goods), duplicate prevention, ticket auto-pickup on payment completion,
  isConsumable product filter

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
95cf017b4b feat: repair-POS integration, receipt formats, manager overrides, price adjustments
- Add thermal/full-page receipt format toggle (per-device, localStorage)
- Full-page receipt uses clean invoice layout matching repair PDF style
- Settings page reorganized into tabbed sections (Store, Locations, Modules, Receipt, POS Security, Advanced)
- Manager override system: configurable PIN prompt for void, refund, discount, cash in/out
- Discount threshold setting: require manager approval above X%
- Consumable product type: tracked for internal job costing, excluded from POS search, receipts, and customer-facing totals
- Repair line item dialog: product picker dropdown for parts/consumables from inventory
- Repair → POS checkout: load ready-for-pickup tickets into repair_payment transactions with proper tax categories (labor=service, parts=goods)
- Transaction completion auto-updates repair ticket status to picked_up
- POS Repairs dialog with Pickup and New Intake tabs, customer account lookup
- Inline price adjustment on cart items: % off, $ off, or set price with live preview
- Order-level discount button with same three input modes
- Backend: migration 0043 (consumable enum + is_consumable flag), createFromRepairTicket service, ready-for-pickup endpoint
- Fix: backend dev script uses --env-file for turbo compatibility

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
a48da03289 feat: orders lookup with receipt reprint, refresh stock after sale
- "Orders" button in POS quick actions shows recent transactions
- Search by transaction number, tap to view receipt, print or save PDF
- Product stock counts refresh after completing a sale
- Invalidate product search queries on payment completion

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
e19cdc76e0 fix: dynamic PDF height based on receipt content length
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
fe40b563d5 fix: receipt uses inline styles for PDF/print compatibility, thermal width
- Replace all Tailwind classes with inline styles (fixes oklch color error in html2pdf)
- Narrow receipt to 260px / 10px font for 72mm thermal paper
- Print uses hidden iframe instead of window.open (fixes Safari about:blank)
- PDF canvas width matches thermal format

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
49db60e31f feat: receipt PDF save and print via html2pdf.js
- Save PDF button downloads receipt directly
- Print button opens PDF in new window and triggers print dialog
- Replaces previous window.print() approach that lost styles
- Receipt generated on demand from transaction data, no file storage needed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
8820a56a51 feat: receipt customization settings tab with header, footer, policy, social
- New Receipt tab in Settings page with editable fields
- receipt_header: text below logo (e.g. tagline)
- receipt_footer: thank you message
- receipt_return_policy: return policy text
- receipt_social: website/social media
- All stored in app_config, rendered on printed receipts
- Seeded in migration with empty defaults

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
0aa9345c27 feat: show company logo on receipt if uploaded, fall back to name
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
3519db9bd9 feat: printable receipts with barcode on payment complete
- Receipt component with thermal (80mm) and full-page layout support
- Code 128 barcode from transaction number via JsBarcode
- Store name, address, line items, totals, payment info, barcode
- Print button on sale complete screen (browser print dialog)
- Email button placeholder (disabled, ready for SMTP integration)
- @media print CSS hides everything except receipt content
- Receipt data fetched from GET /transactions/:id/receipt

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
0fd73015f7 fix: customer history query, seed transactions tied to accounts
- Fix customerHistoryOptions closure bug (historySearch was inaccessible)
- Pass itemSearch as parameter instead of capturing from outer scope
- Seed 5 completed transactions tied to accounts (Smith, Johnson, Garcia, Chen)
- Seed admin user with employee number 1001 and PIN 1234

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
d21972212b feat: customer lookup from POS with order history and item search
- Customer dialog in cart panel: search accounts by name, phone, email, account #
- Selected customer shown with name, phone, email in cart header
- accountId passed when creating transactions
- Order history view: tap a transaction to expand and see line items
- Item search in history (e.g. "strings") — filters orders containing that item
- Backend: add accountId and itemSearch filters to transaction list endpoint
- itemSearch uses EXISTS subquery on line item descriptions (ILIKE)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
cf299ac1d2 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>
2026-04-05 16:05:19 +00:00
ryan
6505b2dcb9 fix: drawer open/close updates UI immediately without refresh
- Return null instead of throwing on 404 for drawer current query
- Sync drawer session ID to null when drawer closes
- Await query invalidation before closing dialog
- Fix unused approvedBy lint error

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
12a3e170de feat: add cash in/out UI and hide drawer balance from cashier
- Cash In / Cash Out buttons in drawer dialog when open
- Amount + reason form, adjustment history with IN/OUT badges
- Drawer badge shows "Drawer Open" without balance (manager info only)
- API helpers for addAdjustment and getAdjustments

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
ryan
3ed2707a66 feat: add drawer cash in/out adjustments with balance reconciliation
- New drawer_adjustment table (type: cash_in/cash_out, amount, reason)
- POST/GET /drawer/:id/adjustments endpoints
- Drawer close calculation now includes adjustments: expected = opening + sales + cash_in - cash_out
- DrawerAdjustmentSchema for input validation
- 5 new tests (44 total POS tests passing)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:05:19 +00:00
Ryan Moon
24ddb17ca8 fix: rename migration 0039_app_settings to 0041 to avoid conflict with 0039_cash-rounding
All checks were successful
Build & Release / build (push) Successful in 17s
2026-04-05 10:58:59 -05:00
Ryan Moon
bd2252e426 feat: add email, encryption, and initial user env vars to backend chart
All checks were successful
Build & Release / build (push) Successful in 17s
2026-04-05 10:47:25 -05:00
Ryan Moon
254fe0e5d5 fix: move ts-expect-error inside navigate object to suppress search type error
All checks were successful
Build & Release / build (push) Successful in 1m6s
2026-04-05 10:42:00 -05:00
Ryan Moon
5750af83d8 fix: suppress navigate search type error in usePagination; fix setBillingUnit cast
Some checks failed
Build & Release / build (push) Failing after 35s
- use-pagination.ts: ts-expect-error on navigate call — search type resolves as never without route context, safe with strict:false
- $enrollmentId.tsx: wrap onValueChange to cast string to billingUnit union type

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-05 10:40:23 -05:00
Ryan Moon
505f8fd4e4 fix: correct TanStack Router search types for all navigate/Link calls
Some checks failed
Build & Release / build (push) Failing after 33s
Each destination route's search must match its validateSearch shape exactly:
- Detail pages (tab-based): { tab: '...' }
- List pages with extra filters: include status, instructorId, view, categoryId etc.
- Form pages (enrollments/new, repairs/new): include only their specific fields
- use-pagination.ts: fix search reducer to use (prev: any) instead of invalid cast

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-05 10:37:34 -05:00
Ryan Moon
a84530e80e fix: replace invalid TanStack Router search casts with typed defaults
Some checks failed
Build & Release / build (push) Failing after 32s
Newer TanStack Router enforces strict types on search params — 'search: {} as Record<string, unknown>' no longer satisfies routes with validateSearch. Replace all occurrences with the correct search shape for each destination route (pagination defaults for list routes, tab/field defaults for detail routes).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-05 10:33:36 -05:00
Ryan Moon
b8e39369f1 feat: add app settings table, encryption utility, and generic email service
Some checks failed
Build & Release / build (push) Failing after 35s
- app_settings table with encrypted field support (AES-256-GCM, key from ENCRYPTION_KEY env)
- SettingsService for transparent encrypt/decrypt on get/set
- EmailService factory with Resend and SendGrid providers (SMTP stub) — provider config lives in app_settings
- Seeds initial admin user and email settings from env vars on first startup if not already present
- Migration 0039_app_settings.sql

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-05 10:27:20 -05:00
ryan
81d37a2c68 fix: add lsof and iproute2 to devpod base image
Some checks failed
Build Devpod / build (push) Successful in 2m30s
Build & Release / build (push) Failing after 31s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 23:45:34 +00:00
ryan
70a924cfba fix: add tini init to devpod to reap zombie bun processes
Some checks failed
Build & Release / build (push) Has been cancelled
Build Devpod / build (push) Has been cancelled
bun --watch spawns new processes on file changes but code-server (PID 1)
doesn't reap orphans, causing zombie accumulation and port conflicts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 23:43:12 +00:00
136 changed files with 9952 additions and 578 deletions

View File

@@ -21,6 +21,10 @@ jobs:
- name: Install dependencies - name: Install dependencies
run: bun install --frozen-lockfile run: bun install --frozen-lockfile
- name: Generate route tree
working-directory: packages/admin
run: bunx @tanstack/router-cli generate
- name: Lint - name: Lint
run: bun run lint run: bun run lint

View File

@@ -8,8 +8,8 @@ ENV PATH="/usr/local/bin:/root/.bun/bin:$PATH"
RUN apt-get update && apt-get install -y --no-install-recommends \ RUN apt-get update && apt-get install -y --no-install-recommends \
curl wget git openssh-server ca-certificates gnupg \ curl wget git openssh-server ca-certificates gnupg \
build-essential unzip zip jq tmux zsh ripgrep \ build-essential unzip zip jq tmux zsh ripgrep \
postgresql-client redis-tools haproxy \ postgresql-client redis-tools haproxy tini \
nano vim htop netcat-openbsd dnsutils iputils-ping \ nano vim htop netcat-openbsd dnsutils iputils-ping lsof iproute2 \
&& rm -rf /var/lib/apt/lists/* && rm -rf /var/lib/apt/lists/*
# Bun — install then move to /usr/local/bin so it's on the image filesystem, not the /root PVC # Bun — install then move to /usr/local/bin so it's on the image filesystem, not the /root PVC
@@ -44,4 +44,4 @@ RUN chmod +x /entrypoint.sh
WORKDIR /root WORKDIR /root
EXPOSE 8080 22 EXPOSE 8080 22
ENTRYPOINT ["/entrypoint.sh"] ENTRYPOINT ["/usr/bin/tini", "--", "/entrypoint.sh"]

View File

@@ -16,6 +16,7 @@ COPY packages/admin ./packages/admin
COPY package.json ./ COPY package.json ./
COPY tsconfig.base.json ./ COPY tsconfig.base.json ./
WORKDIR /app/packages/admin WORKDIR /app/packages/admin
RUN bunx @tanstack/router-cli generate
RUN bun run build RUN bun run build
FROM nginx:alpine FROM nginx:alpine

View File

@@ -34,6 +34,8 @@
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"html2pdf.js": "^0.14.0",
"jsbarcode": "^3.12.3",
"jspdf": "^4.2.1", "jspdf": "^4.2.1",
"lucide-react": "^1.7.0", "lucide-react": "^1.7.0",
"radix-ui": "^1.4.3", "radix-ui": "^1.4.3",
@@ -59,7 +61,7 @@
}, },
"packages/backend": { "packages/backend": {
"name": "@lunarfront/backend", "name": "@lunarfront/backend",
"version": "0.0.1", "version": "0.1.1",
"dependencies": { "dependencies": {
"@fastify/cors": "^10", "@fastify/cors": "^10",
"@fastify/jwt": "^9", "@fastify/jwt": "^9",
@@ -806,6 +808,8 @@
"html2canvas": ["html2canvas@1.4.1", "", { "dependencies": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" } }, "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA=="], "html2canvas": ["html2canvas@1.4.1", "", { "dependencies": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" } }, "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA=="],
"html2pdf.js": ["html2pdf.js@0.14.0", "", { "dependencies": { "dompurify": "^3.3.1", "html2canvas": "^1.0.0", "jspdf": "^4.0.0" } }, "sha512-yvNJgE/8yru2UeGflkPdjW8YEY+nDH5X7/2WG4uiuSCwYiCp8PZ8EKNiTAa6HxJ1NjC51fZSIEq6xld5CADKBQ=="],
"ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="], "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
"import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="], "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
@@ -842,6 +846,8 @@
"js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="], "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
"jsbarcode": ["jsbarcode@3.12.3", "", {}, "sha512-CuHU9hC6dPsHF5oVFMo8NW76uQVjH4L22CsP4hW+dNnGywJHC/B0ThA1CTDVLnxKLrrpYdicBLnd2xsgTfRnvg=="],
"jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="], "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
"json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="], "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],

View File

@@ -73,6 +73,46 @@ spec:
secretKeyRef: secretKeyRef:
name: lunarfront-secrets name: lunarfront-secrets
key: jwt-secret key: jwt-secret
- name: ENCRYPTION_KEY
valueFrom:
secretKeyRef:
name: lunarfront-secrets
key: encryption-key
- name: RESEND_API_KEY
valueFrom:
secretKeyRef:
name: lunarfront-secrets
key: resend-api-key
- name: MAIL_FROM
valueFrom:
secretKeyRef:
name: lunarfront-secrets
key: mail-from
- name: BUSINESS_NAME
valueFrom:
secretKeyRef:
name: lunarfront-secrets
key: business-name
- name: APP_URL
value: "https://{{ .Values.ingress.host }}"
- name: INITIAL_USER_EMAIL
valueFrom:
secretKeyRef:
name: lunarfront-secrets
key: initial-user-email
optional: true
- name: INITIAL_USER_FIRST_NAME
valueFrom:
secretKeyRef:
name: lunarfront-secrets
key: initial-user-first-name
optional: true
- name: INITIAL_USER_LAST_NAME
valueFrom:
secretKeyRef:
name: lunarfront-secrets
key: initial-user-last-name
optional: true
livenessProbe: livenessProbe:
httpGet: httpGet:
path: /v1/health path: /v1/health

View File

@@ -25,6 +25,8 @@
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"html2pdf.js": "^0.14.0",
"jsbarcode": "^3.12.3",
"jspdf": "^4.2.1", "jspdf": "^4.2.1",
"lucide-react": "^1.7.0", "lucide-react": "^1.7.0",
"radix-ui": "^1.4.3", "radix-ui": "^1.4.3",

View File

@@ -14,3 +14,11 @@ interface LoginResponse {
export async function login(email: string, password: string): Promise<LoginResponse> { export async function login(email: string, password: string): Promise<LoginResponse> {
return api.post<LoginResponse>('/v1/auth/login', { email, password }) return api.post<LoginResponse>('/v1/auth/login', { email, password })
} }
export async function forgotPassword(email: string): Promise<{ message: string }> {
return api.post<{ message: string }>('/v1/auth/forgot-password', { email })
}
export async function resetPassword(token: string, newPassword: string): Promise<{ message: string }> {
return api.post<{ message: string }>('/v1/auth/reset-password', { token, newPassword })
}

View File

@@ -88,11 +88,34 @@ export interface Product {
isActive: boolean isActive: boolean
} }
export interface Register {
id: string
locationId: string
name: string
isActive: boolean
createdAt: string
updatedAt: string
}
// --- Query Keys --- // --- Query Keys ---
export interface DrawerAdjustment {
id: string
drawerSessionId: string
type: string
amount: string
reason: string
createdBy: string
createdAt: string
}
export const posKeys = { export const posKeys = {
transaction: (id: string) => ['pos', 'transaction', id] as const, transaction: (id: string) => ['pos', 'transaction', id] as const,
drawer: (locationId: string) => ['pos', 'drawer', locationId] as const, drawer: (locationId: string) => ['pos', 'drawer', locationId] as const,
drawerAdjustments: (id: string) => ['pos', 'drawer-adjustments', id] as const,
drawerReport: (id: string) => ['pos', 'drawer-report', id] as const,
dailyReport: (locationId: string, date: string) => ['pos', 'daily-report', locationId, date] as const,
registers: (locationId: string) => ['pos', 'registers', locationId] as const,
products: (search: string) => ['pos', 'products', search] as const, products: (search: string) => ['pos', 'products', search] as const,
discounts: ['pos', 'discounts'] as const, discounts: ['pos', 'discounts'] as const,
} }
@@ -110,7 +133,13 @@ export function transactionOptions(id: string | null) {
export function currentDrawerOptions(locationId: string | null) { export function currentDrawerOptions(locationId: string | null) {
return queryOptions({ return queryOptions({
queryKey: posKeys.drawer(locationId ?? ''), queryKey: posKeys.drawer(locationId ?? ''),
queryFn: () => api.get<DrawerSession>('/v1/drawer/current', { locationId }), queryFn: async (): Promise<DrawerSession | null> => {
try {
return await api.get<DrawerSession>('/v1/drawer/current', { locationId })
} catch {
return null // 404 = no open drawer
}
},
enabled: !!locationId, enabled: !!locationId,
retry: false, retry: false,
}) })
@@ -119,7 +148,7 @@ export function currentDrawerOptions(locationId: string | null) {
export function productSearchOptions(search: string) { export function productSearchOptions(search: string) {
return queryOptions({ return queryOptions({
queryKey: posKeys.products(search), queryKey: posKeys.products(search),
queryFn: () => api.get<{ data: Product[]; pagination: { page: number; limit: number; total: number; totalPages: number } }>('/v1/products', { q: search, limit: 24, isActive: true }), queryFn: () => api.get<{ data: Product[]; pagination: { page: number; limit: number; total: number; totalPages: number } }>('/v1/products', { q: search, limit: 24, isActive: true, isConsumable: false }),
enabled: search.length >= 1, enabled: search.length >= 1,
}) })
} }
@@ -131,10 +160,34 @@ export function discountListOptions() {
}) })
} }
export function registerListOptions(locationId: string | null) {
return queryOptions({
queryKey: posKeys.registers(locationId ?? ''),
queryFn: () => api.get<{ data: Register[] }>('/v1/registers/all', { locationId }),
enabled: !!locationId,
})
}
export function drawerReportOptions(drawerSessionId: string | null) {
return queryOptions({
queryKey: posKeys.drawerReport(drawerSessionId ?? ''),
queryFn: () => api.get<any>(`/v1/reports/drawer/${drawerSessionId}`),
enabled: !!drawerSessionId,
})
}
export function dailyReportOptions(locationId: string | null, date: string) {
return queryOptions({
queryKey: posKeys.dailyReport(locationId ?? '', date),
queryFn: () => api.get<any>('/v1/reports/daily', { locationId, date }),
enabled: !!locationId && !!date,
})
}
// --- Mutations --- // --- Mutations ---
export const posMutations = { export const posMutations = {
createTransaction: (data: { transactionType: string; locationId?: string }) => createTransaction: (data: { transactionType: string; locationId?: string; accountId?: string }) =>
api.post<Transaction>('/v1/transactions', data), api.post<Transaction>('/v1/transactions', data),
addLineItem: (txnId: string, data: { productId?: string; inventoryUnitId?: string; description: string; qty: number; unitPrice: number }) => addLineItem: (txnId: string, data: { productId?: string; inventoryUnitId?: string; description: string; qty: number; unitPrice: number }) =>
@@ -152,7 +205,7 @@ export const posMutations = {
void: (txnId: string) => void: (txnId: string) =>
api.post<Transaction>(`/v1/transactions/${txnId}/void`, {}), api.post<Transaction>(`/v1/transactions/${txnId}/void`, {}),
openDrawer: (data: { locationId?: string; openingBalance: number }) => openDrawer: (data: { locationId?: string; registerId?: string; openingBalance: number }) =>
api.post<DrawerSession>('/v1/drawer/open', data), api.post<DrawerSession>('/v1/drawer/open', data),
closeDrawer: (id: string, data: { closingBalance: number; denominations?: Record<string, number>; notes?: string }) => closeDrawer: (id: string, data: { closingBalance: number; denominations?: Record<string, number>; notes?: string }) =>
@@ -160,4 +213,13 @@ export const posMutations = {
lookupUpc: (upc: string) => lookupUpc: (upc: string) =>
api.get<Product>(`/v1/products/lookup/upc/${upc}`), api.get<Product>(`/v1/products/lookup/upc/${upc}`),
addAdjustment: (drawerId: string, data: { type: string; amount: number; reason: string }) =>
api.post<DrawerAdjustment>(`/v1/drawer/${drawerId}/adjustments`, data),
getAdjustments: (drawerId: string) =>
api.get<{ data: DrawerAdjustment[] }>(`/v1/drawer/${drawerId}/adjustments`),
createFromRepair: (ticketId: string, locationId?: string) =>
api.post<Transaction>(`/v1/transactions/from-repair/${ticketId}`, { locationId }),
} }

View File

@@ -34,6 +34,7 @@ export function ProductForm({ defaultValues, onSubmit, loading }: Props) {
isSerialized: defaultValues?.isSerialized ?? false, isSerialized: defaultValues?.isSerialized ?? false,
isRental: defaultValues?.isRental ?? false, isRental: defaultValues?.isRental ?? false,
isDualUseRepair: defaultValues?.isDualUseRepair ?? false, isDualUseRepair: defaultValues?.isDualUseRepair ?? false,
isConsumable: defaultValues?.isConsumable ?? false,
isActive: defaultValues?.isActive ?? true, isActive: defaultValues?.isActive ?? true,
}, },
}) })
@@ -42,6 +43,7 @@ export function ProductForm({ defaultValues, onSubmit, loading }: Props) {
const isRental = watch('isRental') const isRental = watch('isRental')
const isSerialized = watch('isSerialized') const isSerialized = watch('isSerialized')
const isDualUseRepair = watch('isDualUseRepair') const isDualUseRepair = watch('isDualUseRepair')
const isConsumable = watch('isConsumable')
const isActive = watch('isActive') const isActive = watch('isActive')
function handleFormSubmit(data: Record<string, unknown>) { function handleFormSubmit(data: Record<string, unknown>) {
@@ -61,6 +63,7 @@ export function ProductForm({ defaultValues, onSubmit, loading }: Props) {
isSerialized: data.isSerialized, isSerialized: data.isSerialized,
isRental: data.isRental, isRental: data.isRental,
isDualUseRepair: data.isDualUseRepair, isDualUseRepair: data.isDualUseRepair,
isConsumable: data.isConsumable,
isActive: data.isActive, isActive: data.isActive,
}) })
} }
@@ -158,6 +161,10 @@ export function ProductForm({ defaultValues, onSubmit, loading }: Props) {
<input type="checkbox" checked={isDualUseRepair} onChange={(e) => setValue('isDualUseRepair', e.target.checked)} className="h-4 w-4" /> <input type="checkbox" checked={isDualUseRepair} onChange={(e) => setValue('isDualUseRepair', e.target.checked)} className="h-4 w-4" />
Available as Repair Line Item Available as Repair Line Item
</label> </label>
<label className="flex items-center gap-2 text-sm cursor-pointer">
<input type="checkbox" checked={isConsumable} onChange={(e) => setValue('isConsumable', e.target.checked)} className="h-4 w-4" />
Consumable (internal use, not sold at POS)
</label>
<label className="flex items-center gap-2 text-sm cursor-pointer"> <label className="flex items-center gap-2 text-sm cursor-pointer">
<input type="checkbox" checked={isActive} onChange={(e) => setValue('isActive', e.target.checked)} className="h-4 w-4" /> <input type="checkbox" checked={isActive} onChange={(e) => setValue('isActive', e.target.checked)} className="h-4 w-4" />
Active Active

View File

@@ -3,10 +3,15 @@ import { usePOSStore } from '@/stores/pos.store'
import { posMutations, posKeys, type Transaction } from '@/api/pos' import { posMutations, posKeys, type Transaction } from '@/api/pos'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { X, Banknote, CreditCard, FileText, Ban } from 'lucide-react' import { Input } from '@/components/ui/input'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { X, Banknote, CreditCard, FileText, Ban, UserRound, Tag } from 'lucide-react'
import { toast } from 'sonner' import { toast } from 'sonner'
import { useState } from 'react' import { useState } from 'react'
import { POSPaymentDialog } from './pos-payment-dialog' import { POSPaymentDialog } from './pos-payment-dialog'
import { POSCustomerDialog } from './pos-customer-dialog'
import { ManagerOverrideDialog, requiresOverride, requiresDiscountOverride } from './pos-manager-override'
import type { TransactionLineItem } from '@/api/pos'
interface POSCartPanelProps { interface POSCartPanelProps {
transaction: Transaction | null transaction: Transaction | null
@@ -14,8 +19,14 @@ interface POSCartPanelProps {
export function POSCartPanel({ transaction }: POSCartPanelProps) { export function POSCartPanel({ transaction }: POSCartPanelProps) {
const queryClient = useQueryClient() const queryClient = useQueryClient()
const { currentTransactionId, setTransaction } = usePOSStore() const { currentTransactionId, setTransaction, accountName, accountPhone, accountEmail } = usePOSStore()
const [paymentMethod, setPaymentMethod] = useState<string | null>(null) const [paymentMethod, setPaymentMethod] = useState<string | null>(null)
const [customerOpen, setCustomerOpen] = useState(false)
const [overrideOpen, setOverrideOpen] = useState(false)
const [priceItemId, setPriceItemId] = useState<string | null>(null)
const [pendingDiscount, setPendingDiscount] = useState<{ lineItemId: string; amount: number; reason: string } | null>(null)
const [pendingOrderDiscount, setPendingOrderDiscount] = useState<{ amount: number; reason: string } | null>(null)
const [discountOverrideOpen, setDiscountOverrideOpen] = useState(false)
const lineItems = transaction?.lineItems ?? [] const lineItems = transaction?.lineItems ?? []
const drawerSessionId = usePOSStore((s) => s.drawerSessionId) const drawerSessionId = usePOSStore((s) => s.drawerSessionId)
@@ -30,6 +41,39 @@ export function POSCartPanel({ transaction }: POSCartPanelProps) {
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })
const discountMutation = useMutation({
mutationFn: (data: { lineItemId: string; amount: number; reason: string }) =>
posMutations.applyDiscount(currentTransactionId!, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: posKeys.transaction(currentTransactionId!) })
setPriceItemId(null)
toast.success('Price adjusted')
},
onError: (err) => toast.error(err.message),
})
const orderDiscountMutation = useMutation({
mutationFn: async ({ amount, reason }: { amount: number; reason: string }) => {
// Distribute discount proportionally across all line items
let remaining = amount
for (let i = 0; i < lineItems.length; i++) {
const item = lineItems[i]
const itemTotal = parseFloat(item.unitPrice) * item.qty
const isLast = i === lineItems.length - 1
const share = isLast ? remaining : Math.round((itemTotal / subtotal) * amount * 100) / 100
remaining -= share
if (share > 0) {
await posMutations.applyDiscount(currentTransactionId!, { lineItemId: item.id, amount: share, reason })
}
}
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: posKeys.transaction(currentTransactionId!) })
toast.success('Order discount applied')
},
onError: (err) => toast.error(err.message),
})
const voidMutation = useMutation({ const voidMutation = useMutation({
mutationFn: () => posMutations.void(currentTransactionId!), mutationFn: () => posMutations.void(currentTransactionId!),
onSuccess: () => { onSuccess: () => {
@@ -63,6 +107,24 @@ export function POSCartPanel({ transaction }: POSCartPanelProps) {
</span> </span>
)} )}
</div> </div>
<button
onClick={() => setCustomerOpen(true)}
className="flex items-start gap-1.5 mt-1 text-xs text-muted-foreground hover:text-foreground text-left"
>
<UserRound className="h-3 w-3 mt-0.5 shrink-0" />
{accountName ? (
<span>
<span className="font-medium text-foreground">{accountName}</span>
{(accountPhone || accountEmail) && (
<span className="block text-[11px]">
{[accountPhone, accountEmail].filter(Boolean).join(' · ')}
</span>
)}
</span>
) : (
<span>Walk-in tap to add customer</span>
)}
</button>
</div> </div>
{/* Line items */} {/* Line items */}
@@ -73,33 +135,61 @@ export function POSCartPanel({ transaction }: POSCartPanelProps) {
</div> </div>
) : ( ) : (
<div className="divide-y divide-border"> <div className="divide-y divide-border">
{lineItems.map((item) => ( {lineItems.map((item) => {
<div key={item.id} className="flex items-center gap-2 px-3 py-2.5 group"> const unitPrice = parseFloat(item.unitPrice)
<div className="flex-1 min-w-0"> const discount = parseFloat(item.discountAmount)
<p className="text-sm font-medium truncate">{item.description}</p> const hasDiscount = discount > 0
<p className="text-xs text-muted-foreground"> const listTotal = unitPrice * item.qty
{item.qty} x ${parseFloat(item.unitPrice).toFixed(2)} const discountPct = listTotal > 0 ? Math.round((discount / listTotal) * 100) : 0
{parseFloat(item.taxAmount) > 0 && (
<span className="ml-2">tax ${parseFloat(item.taxAmount).toFixed(2)}</span> return (
)} <div key={item.id} className="flex items-center gap-2 px-3 py-2.5 group">
</p> <div className="flex-1 min-w-0">
<p className="text-sm font-medium truncate">{item.description}</p>
<div className="text-xs text-muted-foreground flex items-center gap-2">
<span>{item.qty} x ${unitPrice.toFixed(2)}</span>
{hasDiscount && (
<span className="text-green-600">-${discount.toFixed(2)} ({discountPct}%)</span>
)}
{parseFloat(item.taxAmount) > 0 && (
<span>tax ${parseFloat(item.taxAmount).toFixed(2)}</span>
)}
</div>
</div>
<span className="text-sm font-medium tabular-nums">
${parseFloat(item.lineTotal).toFixed(2)}
</span>
{isPending && (
<div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 shrink-0">
<PriceAdjuster
item={item}
open={priceItemId === item.id}
onOpenChange={(o) => setPriceItemId(o ? item.id : null)}
onApply={(amount, reason) => {
const pct = listTotal > 0 ? (amount / listTotal) * 100 : 0
if (requiresDiscountOverride(pct)) {
setPendingDiscount({ lineItemId: item.id, amount, reason })
setDiscountOverrideOpen(true)
} else {
discountMutation.mutate({ lineItemId: item.id, amount, reason })
}
}}
isPending={discountMutation.isPending}
/>
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => removeItemMutation.mutate(item.id)}
disabled={removeItemMutation.isPending}
>
<X className="h-4 w-4 text-destructive" />
</Button>
</div>
)}
</div> </div>
<span className="text-sm font-medium tabular-nums"> )
${parseFloat(item.lineTotal).toFixed(2)} })}
</span>
{isPending && (
<Button
variant="ghost"
size="icon"
className="h-8 w-8 opacity-0 group-hover:opacity-100 shrink-0"
onClick={() => removeItemMutation.mutate(item.id)}
disabled={removeItemMutation.isPending}
>
<X className="h-4 w-4 text-destructive" />
</Button>
)}
</div>
))}
</div> </div>
)} )}
</div> </div>
@@ -128,6 +218,25 @@ export function POSCartPanel({ transaction }: POSCartPanelProps) {
</div> </div>
</div> </div>
{/* Order discount button */}
{hasItems && isPending && (
<div className="px-3 pb-1">
<OrderDiscountButton
subtotal={subtotal}
onApply={(amount, reason) => {
const pct = subtotal > 0 ? (amount / subtotal) * 100 : 0
if (requiresDiscountOverride(pct)) {
setPendingOrderDiscount({ amount, reason })
setDiscountOverrideOpen(true)
} else {
orderDiscountMutation.mutate({ amount, reason })
}
}}
isPending={orderDiscountMutation.isPending}
/>
</div>
)}
{/* Payment buttons */} {/* Payment buttons */}
<div className="p-3 space-y-2"> <div className="p-3 space-y-2">
{!drawerOpen && hasItems && ( {!drawerOpen && hasItems && (
@@ -163,7 +272,13 @@ export function POSCartPanel({ transaction }: POSCartPanelProps) {
variant="destructive" variant="destructive"
className="h-12 text-sm gap-2" className="h-12 text-sm gap-2"
disabled={!hasItems || !isPending} disabled={!hasItems || !isPending}
onClick={() => voidMutation.mutate()} onClick={() => {
if (requiresOverride('void_transaction')) {
setOverrideOpen(true)
} else {
voidMutation.mutate()
}
}}
> >
<Ban className="h-4 w-4" /> <Ban className="h-4 w-4" />
Void Void
@@ -182,6 +297,226 @@ export function POSCartPanel({ transaction }: POSCartPanelProps) {
onComplete={handlePaymentComplete} onComplete={handlePaymentComplete}
/> />
)} )}
{/* Customer dialog */}
<POSCustomerDialog open={customerOpen} onOpenChange={setCustomerOpen} />
{/* Manager override for void */}
<ManagerOverrideDialog
open={overrideOpen}
onOpenChange={setOverrideOpen}
action="Void transaction"
onAuthorized={() => voidMutation.mutate()}
/>
{/* Manager override for discount */}
<ManagerOverrideDialog
open={discountOverrideOpen}
onOpenChange={setDiscountOverrideOpen}
action="Price adjustment"
onAuthorized={() => {
if (pendingDiscount) {
discountMutation.mutate(pendingDiscount)
setPendingDiscount(null)
} else if (pendingOrderDiscount) {
orderDiscountMutation.mutate(pendingOrderDiscount)
setPendingOrderDiscount(null)
}
}}
/>
</div> </div>
) )
} }
// --- Order Discount Button ---
function OrderDiscountButton({ subtotal, onApply, isPending }: {
subtotal: number
onApply: (amount: number, reason: string) => void
isPending: boolean
}) {
const [open, setOpen] = useState(false)
const [mode, setMode] = useState<AdjustMode>('percent')
const [value, setValue] = useState('')
function calculate() {
const v = parseFloat(value) || 0
if (mode === 'amount_off') return Math.min(v, subtotal)
if (mode === 'set_price') return Math.max(0, subtotal - v)
return Math.round(subtotal * (v / 100) * 100) / 100
}
const discountAmount = calculate()
function handleApply() {
if (discountAmount <= 0) return
const reason = mode === 'percent' ? `${parseFloat(value)}% order discount` : mode === 'set_price' ? `Order total set to $${parseFloat(value).toFixed(2)}` : `$${parseFloat(value).toFixed(2)} order discount`
onApply(discountAmount, reason)
setValue('')
setOpen(false)
}
return (
<Popover open={open} onOpenChange={(o) => { setOpen(o); if (!o) setValue('') }}>
<PopoverTrigger asChild>
<Button variant="outline" size="sm" className="w-full gap-2 text-xs h-8">
<Tag className="h-3 w-3" />Order Discount
</Button>
</PopoverTrigger>
<PopoverContent className="w-64 p-3" side="top" align="center">
<div className="space-y-3">
<div className="text-xs text-muted-foreground">
Subtotal: <span className="font-medium text-foreground">${subtotal.toFixed(2)}</span>
</div>
<div className="flex rounded-md border overflow-hidden text-xs">
{([
{ key: 'percent' as const, label: '% Off' },
{ key: 'amount_off' as const, label: '$ Off' },
{ key: 'set_price' as const, label: 'Set Total' },
]).map((m) => (
<button
key={m.key}
type="button"
className={`flex-1 py-1.5 transition-colors ${mode === m.key ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`}
onClick={() => { setMode(m.key); setValue('') }}
>
{m.label}
</button>
))}
</div>
<Input
type="number"
step="0.01"
min="0"
placeholder={mode === 'percent' ? 'e.g. 10' : '0.00'}
value={value}
onChange={(e) => setValue(e.target.value)}
className="h-9"
autoFocus
onKeyDown={(e) => { if (e.key === 'Enter') handleApply() }}
/>
{value && discountAmount > 0 && (
<div className="text-xs flex justify-between font-medium">
<span className="text-green-600">-${discountAmount.toFixed(2)}</span>
<span>New total: ${(subtotal - discountAmount).toFixed(2)}</span>
</div>
)}
<Button size="sm" className="w-full" onClick={handleApply} disabled={isPending || discountAmount <= 0}>
{isPending ? 'Applying...' : 'Apply Discount'}
</Button>
</div>
</PopoverContent>
</Popover>
)
}
// --- Price Adjuster Popover ---
type AdjustMode = 'amount_off' | 'set_price' | 'percent'
function PriceAdjuster({ item, open, onOpenChange, onApply, isPending }: {
item: TransactionLineItem
open: boolean
onOpenChange: (open: boolean) => void
onApply: (amount: number, reason: string) => void
isPending: boolean
}) {
const [mode, setMode] = useState<AdjustMode>('percent')
const [value, setValue] = useState('')
const unitPrice = parseFloat(item.unitPrice)
const listTotal = unitPrice * item.qty
function calculate(): { discountAmount: number; salePrice: number; pct: number } {
const v = parseFloat(value) || 0
if (mode === 'amount_off') {
const d = Math.min(v, listTotal)
return { discountAmount: d, salePrice: listTotal - d, pct: listTotal > 0 ? (d / listTotal) * 100 : 0 }
}
if (mode === 'set_price') {
const d = Math.max(0, listTotal - v)
return { discountAmount: d, salePrice: v, pct: listTotal > 0 ? (d / listTotal) * 100 : 0 }
}
// percent
const d = Math.round(listTotal * (v / 100) * 100) / 100
return { discountAmount: d, salePrice: listTotal - d, pct: v }
}
const calc = calculate()
function handleApply() {
if (calc.discountAmount <= 0) return
const reason = mode === 'percent' ? `${parseFloat(value)}% off` : mode === 'set_price' ? `Price set to $${parseFloat(value).toFixed(2)}` : `$${parseFloat(value).toFixed(2)} off`
onApply(calc.discountAmount, reason)
setValue('')
}
return (
<Popover open={open} onOpenChange={(o) => { onOpenChange(o); if (!o) setValue('') }}>
<PopoverTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8">
<Tag className="h-4 w-4" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-64 p-3" side="left" align="start">
<div className="space-y-3">
<div className="text-xs text-muted-foreground">
List: <span className="font-medium text-foreground">${listTotal.toFixed(2)}</span>
</div>
{/* Mode tabs */}
<div className="flex rounded-md border overflow-hidden text-xs">
{([
{ key: 'percent' as const, label: '% Off' },
{ key: 'amount_off' as const, label: '$ Off' },
{ key: 'set_price' as const, label: 'Set Price' },
]).map((m) => (
<button
key={m.key}
type="button"
className={`flex-1 py-1.5 transition-colors ${mode === m.key ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`}
onClick={() => { setMode(m.key); setValue('') }}
>
{m.label}
</button>
))}
</div>
<Input
type="number"
step="0.01"
min="0"
placeholder={mode === 'percent' ? 'e.g. 10' : '0.00'}
value={value}
onChange={(e) => setValue(e.target.value)}
className="h-9"
autoFocus
onKeyDown={(e) => { if (e.key === 'Enter') handleApply() }}
/>
{value && parseFloat(value) > 0 && (
<div className="text-xs space-y-0.5">
<div className="flex justify-between">
<span className="text-muted-foreground">Discount</span>
<span className="text-green-600">-${calc.discountAmount.toFixed(2)} ({calc.pct.toFixed(0)}%)</span>
</div>
<div className="flex justify-between font-medium">
<span>Sale Price</span>
<span>${calc.salePrice.toFixed(2)}</span>
</div>
</div>
)}
<Button
size="sm"
className="w-full"
onClick={handleApply}
disabled={isPending || !value || calc.discountAmount <= 0}
>
{isPending ? 'Applying...' : 'Apply'}
</Button>
</div>
</PopoverContent>
</Popover>
)
}

View File

@@ -0,0 +1,254 @@
import { useState, useCallback } 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 { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { Search, X, History } from 'lucide-react'
interface Account {
id: string
name: string
email: string | null
phone: string | null
accountNumber: string | null
}
interface TransactionLineItem {
id: string
description: string
qty: number
unitPrice: string
lineTotal: string
}
interface Transaction {
id: string
transactionNumber: string
total: string
status: string
paymentMethod: string | null
transactionType: string
completedAt: string | null
createdAt: string
lineItems?: TransactionLineItem[]
}
function accountSearchOptions(search: string) {
return queryOptions({
queryKey: ['pos', 'accounts', search],
queryFn: () => api.get<{ data: Account[] }>('/v1/accounts', { q: search, limit: 10 }),
enabled: search.length >= 2,
})
}
function customerHistoryOptions(accountId: string | null, itemSearch?: string) {
return queryOptions({
queryKey: ['pos', 'customer-history', accountId, itemSearch ?? ''],
queryFn: () => api.get<{ data: Transaction[] }>('/v1/transactions', {
accountId,
limit: 10,
sort: 'created_at',
order: 'desc',
...(itemSearch ? { itemSearch } : {}),
}),
enabled: !!accountId,
})
}
interface POSCustomerDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
}
export function POSCustomerDialog({ open, onOpenChange }: POSCustomerDialogProps) {
const { accountId, accountName, setAccount, clearAccount } = usePOSStore()
const [search, setSearch] = useState('')
const [showHistory, setShowHistory] = useState(false)
const [historySearch, setHistorySearch] = useState('')
const { data: searchData, isLoading } = useQuery(accountSearchOptions(search))
const accounts = searchData?.data ?? []
const { data: historyData } = useQuery(customerHistoryOptions(showHistory ? accountId : null, historySearch || undefined))
const history = historyData?.data ?? []
function handleSelect(account: Account) {
setAccount(account.id, account.name, account.phone, account.email)
setSearch('')
setShowHistory(false)
onOpenChange(false)
}
function handleClear() {
clearAccount()
setSearch('')
setShowHistory(false)
onOpenChange(false)
}
const [expandedTxn, setExpandedTxn] = useState<string | null>(null)
// Fetch detail for expanded transaction
const { data: txnDetail } = useQuery({
queryKey: ['pos', 'transaction-detail', expandedTxn],
queryFn: () => api.get<Transaction>(`/v1/transactions/${expandedTxn}`),
enabled: !!expandedTxn,
})
const toggleExpand = useCallback((id: string) => {
setExpandedTxn((prev) => prev === id ? null : id)
}, [])
// History view
if (showHistory && accountId) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md max-h-[80vh] flex flex-col">
<DialogHeader>
<DialogTitle className="flex items-center justify-between">
<span>Order History {accountName}</span>
<Button variant="ghost" size="sm" onClick={() => { setShowHistory(false); setExpandedTxn(null) }}>Back</Button>
</DialogTitle>
</DialogHeader>
{/* Search items in history */}
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
value={historySearch}
onChange={(e) => setHistorySearch(e.target.value)}
placeholder="Search items (e.g. strings, bow)..."
className="pl-10 h-10 text-sm"
/>
</div>
<div className="flex-1 overflow-y-auto">
{history.length === 0 ? (
<p className="text-sm text-muted-foreground text-center py-8">
{historySearch ? `No orders with "${historySearch}"` : 'No transactions found'}
</p>
) : (
<div className="divide-y divide-border">
{history.map((txn) => (
<div key={txn.id}>
<button
onClick={() => toggleExpand(txn.id)}
className="w-full text-left py-2.5 px-1 hover:bg-accent/50 rounded transition-colors"
>
<div className="flex items-center justify-between">
<span className="text-sm font-mono">{txn.transactionNumber}</span>
<span className="text-sm font-semibold">${parseFloat(txn.total).toFixed(2)}</span>
</div>
<div className="flex items-center gap-2 mt-0.5">
<Badge variant={txn.status === 'completed' ? 'default' : 'outline'} className="text-[10px]">
{txn.status}
</Badge>
{txn.paymentMethod && (
<span className="text-xs text-muted-foreground">{txn.paymentMethod.replace('_', ' ')}</span>
)}
<span className="text-xs text-muted-foreground ml-auto">
{new Date(txn.completedAt ?? txn.createdAt).toLocaleDateString()}
</span>
</div>
</button>
{expandedTxn === txn.id && txnDetail?.lineItems && (
<div className="px-3 pb-2 space-y-1">
{txnDetail.lineItems.map((item) => (
<div key={item.id} className="flex justify-between text-xs text-muted-foreground">
<span>{item.qty} x {item.description}</span>
<span>${parseFloat(item.lineTotal).toFixed(2)}</span>
</div>
))}
</div>
)}
</div>
))}
</div>
)}
</div>
</DialogContent>
</Dialog>
)
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md max-h-[80vh] flex flex-col">
<DialogHeader>
<DialogTitle>Customer</DialogTitle>
</DialogHeader>
{/* Current selection */}
{accountId && (
<>
<div className="flex items-center justify-between p-3 rounded-md border bg-muted/30">
<div>
<p className="font-medium text-sm">{accountName}</p>
<p className="text-xs text-muted-foreground">Selected customer</p>
</div>
<div className="flex gap-1">
<Button variant="ghost" size="sm" onClick={() => setShowHistory(true)}>
<History className="h-4 w-4 mr-1" />
History
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleClear}>
<X className="h-4 w-4 text-destructive" />
</Button>
</div>
</div>
<Separator />
</>
)}
{/* Search */}
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search by name, phone, email, account #..."
className="pl-10 h-11"
autoFocus
/>
</div>
{/* Results */}
<div className="flex-1 overflow-y-auto">
{isLoading ? (
<p className="text-sm text-muted-foreground text-center py-4">Searching...</p>
) : search.length >= 2 && accounts.length === 0 ? (
<p className="text-sm text-muted-foreground text-center py-4">No customers found</p>
) : (
<div className="divide-y divide-border">
{accounts.map((account) => (
<button
key={account.id}
onClick={() => handleSelect(account)}
className="w-full text-left px-2 py-3 hover:bg-accent rounded-md transition-colors"
>
<p className="font-medium text-sm">{account.name}</p>
<div className="flex gap-3 text-xs text-muted-foreground mt-0.5">
{account.phone && <span>{account.phone}</span>}
{account.email && <span>{account.email}</span>}
{account.accountNumber && <span>#{account.accountNumber}</span>}
</div>
</button>
))}
</div>
)}
</div>
{/* Walk-in button */}
{accountId && (
<Button variant="outline" className="w-full h-11" onClick={handleClear}>
Clear Customer (Walk-in)
</Button>
)}
</DialogContent>
</Dialog>
)
}

View File

@@ -1,13 +1,16 @@
import { useState } from 'react' import { useState } from 'react'
import { useMutation, useQueryClient } from '@tanstack/react-query' import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { usePOSStore } from '@/stores/pos.store' import { usePOSStore } from '@/stores/pos.store'
import { posMutations, posKeys, type DrawerSession } from '@/api/pos' import { posMutations, posKeys, drawerReportOptions, type DrawerSession } from '@/api/pos'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog' import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { Badge } from '@/components/ui/badge'
import { ArrowDownToLine, ArrowUpFromLine } from 'lucide-react'
import { toast } from 'sonner' import { toast } from 'sonner'
import { ManagerOverrideDialog, requiresOverride } from './pos-manager-override'
interface POSDrawerDialogProps { interface POSDrawerDialogProps {
open: boolean open: boolean
@@ -17,22 +20,45 @@ interface POSDrawerDialogProps {
export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogProps) { export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogProps) {
const queryClient = useQueryClient() const queryClient = useQueryClient()
const { locationId, setDrawerSession } = usePOSStore() const { locationId, registerId, setDrawerSession } = usePOSStore()
const isOpen = drawer?.status === 'open' const isOpen = drawer?.status === 'open'
const [openingBalance, setOpeningBalance] = useState('200') const [openingBalance, setOpeningBalance] = useState('200')
const [closingBalance, setClosingBalance] = useState('') const [closingBalance, setClosingBalance] = useState('')
const [notes, setNotes] = useState('') const [notes, setNotes] = useState('')
const [adjustView, setAdjustView] = useState<'cash_in' | 'cash_out' | null>(null)
const [adjAmount, setAdjAmount] = useState('')
const [adjReason, setAdjReason] = useState('')
const [overrideOpen, setOverrideOpen] = useState(false)
const [pendingAdjustView, setPendingAdjustView] = useState<'cash_in' | 'cash_out' | null>(null)
const [showZReport, setShowZReport] = useState(false)
const [closedDrawerId, setClosedDrawerId] = useState<string | null>(null)
const [showXReport, setShowXReport] = useState(false)
// Z Report data (after close)
const { data: reportData } = useQuery(drawerReportOptions(closedDrawerId))
// X Report data (live, for open drawer)
const { data: xReportData } = useQuery(drawerReportOptions(showXReport ? drawer?.id ?? null : null))
// Fetch adjustments for open drawer
const { data: adjData } = useQuery({
queryKey: posKeys.drawerAdjustments(drawer?.id ?? ''),
queryFn: () => posMutations.getAdjustments(drawer!.id),
enabled: !!drawer?.id && isOpen,
})
const adjustments = adjData?.data ?? []
const openMutation = useMutation({ const openMutation = useMutation({
mutationFn: () => mutationFn: () =>
posMutations.openDrawer({ posMutations.openDrawer({
locationId: locationId ?? undefined, locationId: locationId ?? undefined,
registerId: registerId ?? undefined,
openingBalance: parseFloat(openingBalance) || 0, openingBalance: parseFloat(openingBalance) || 0,
}), }),
onSuccess: (session) => { onSuccess: async (session) => {
setDrawerSession(session.id) setDrawerSession(session.id)
queryClient.invalidateQueries({ queryKey: posKeys.drawer(locationId ?? '') }) await queryClient.invalidateQueries({ queryKey: posKeys.drawer(locationId ?? '') })
toast.success('Drawer opened') toast.success('Drawer opened')
onOpenChange(false) onOpenChange(false)
}, },
@@ -45,25 +71,136 @@ export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogP
closingBalance: parseFloat(closingBalance) || 0, closingBalance: parseFloat(closingBalance) || 0,
notes: notes || undefined, notes: notes || undefined,
}), }),
onSuccess: (session) => { onSuccess: async (session) => {
setDrawerSession(null) setDrawerSession(null)
queryClient.invalidateQueries({ queryKey: posKeys.drawer(locationId ?? '') })
const overShort = parseFloat(session.overShort ?? '0') const overShort = parseFloat(session.overShort ?? '0')
if (Math.abs(overShort) < 0.01) { if (Math.abs(overShort) < 0.01) {
toast.success('Drawer closed - balanced') toast.success('Drawer closed - balanced')
} else { } else {
toast.warning(`Drawer closed - ${overShort > 0 ? 'over' : 'short'} $${Math.abs(overShort).toFixed(2)}`) toast.warning(`Drawer closed - ${overShort > 0 ? 'over' : 'short'} $${Math.abs(overShort).toFixed(2)}`)
} }
onOpenChange(false) // Show Z report
setClosedDrawerId(session.id)
setShowZReport(true)
await queryClient.invalidateQueries({ queryKey: posKeys.drawer(locationId ?? '') })
}, },
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })
const adjustMutation = useMutation({
mutationFn: () =>
posMutations.addAdjustment(drawer!.id, {
type: adjustView!,
amount: parseFloat(adjAmount) || 0,
reason: adjReason,
}),
onSuccess: (adj) => {
queryClient.invalidateQueries({ queryKey: posKeys.drawerAdjustments(drawer!.id) })
toast.success(`${adj.type === 'cash_in' ? 'Cash added' : 'Cash removed'}: $${parseFloat(adj.amount).toFixed(2)}`)
setAdjustView(null)
setAdjAmount('')
setAdjReason('')
},
onError: (err) => toast.error(err.message),
})
// Z Report view (shown after drawer close)
if (showZReport && reportData) {
const r = reportData
return (
<>
<Dialog open={open} onOpenChange={(o) => { onOpenChange(o); if (!o) { setShowZReport(false); setClosedDrawerId(null) } }}>
<DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Z Report Drawer Closed</DialogTitle>
</DialogHeader>
<DrawerReportView report={r} />
<Button variant="outline" className="w-full" onClick={() => { setShowZReport(false); setClosedDrawerId(null); onOpenChange(false) }}>
Done
</Button>
</DialogContent>
</Dialog>
</>
)
}
// X Report view (mid-shift snapshot)
if (showXReport && xReportData) {
return (
<>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>X Report Current Shift</DialogTitle>
</DialogHeader>
<DrawerReportView report={xReportData} />
<Button variant="outline" className="w-full" onClick={() => setShowXReport(false)}>
Back
</Button>
</DialogContent>
</Dialog>
</>
)
}
// Adjustment entry view
if (adjustView && isOpen) {
const isCashIn = adjustView === 'cash_in'
return (
<>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-sm">
<DialogHeader>
<DialogTitle>{isCashIn ? 'Cash In' : 'Cash Out'}</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div className="space-y-2">
<Label>Amount *</Label>
<Input
type="number"
step="0.01"
min="0.01"
value={adjAmount}
onChange={(e) => setAdjAmount(e.target.value)}
placeholder="0.00"
className="h-11 text-lg"
autoFocus
/>
</div>
<div className="space-y-2">
<Label>Reason *</Label>
<Input
value={adjReason}
onChange={(e) => setAdjReason(e.target.value)}
placeholder={isCashIn ? 'e.g. Extra change' : 'e.g. Bank deposit'}
className="h-11"
/>
</div>
<div className="flex gap-2">
<Button
className="flex-1 h-12"
onClick={() => adjustMutation.mutate()}
disabled={!adjAmount || !adjReason || adjustMutation.isPending}
>
{adjustMutation.isPending ? 'Saving...' : isCashIn ? 'Add Cash' : 'Remove Cash'}
</Button>
<Button variant="outline" className="h-12" onClick={() => setAdjustView(null)}>
Cancel
</Button>
</div>
</div>
</DialogContent>
</Dialog>
</>
)
}
return ( return (
<>
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-sm"> <DialogContent className="max-w-sm">
<DialogHeader> <DialogHeader>
<DialogTitle>{isOpen ? 'Close Drawer' : 'Open Drawer'}</DialogTitle> <DialogTitle>{isOpen ? 'Drawer' : 'Open Drawer'}</DialogTitle>
</DialogHeader> </DialogHeader>
{isOpen ? ( {isOpen ? (
@@ -78,7 +215,72 @@ export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogP
<span>{new Date(drawer!.openedAt).toLocaleTimeString()}</span> <span>{new Date(drawer!.openedAt).toLocaleTimeString()}</span>
</div> </div>
</div> </div>
{/* Cash In / Cash Out buttons */}
<div className="grid grid-cols-2 gap-2">
<Button
variant="outline"
className="h-11 gap-2"
onClick={() => {
if (requiresOverride('cash_in_out')) {
setPendingAdjustView('cash_in')
setOverrideOpen(true)
} else {
setAdjustView('cash_in')
}
}}
>
<ArrowDownToLine className="h-4 w-4 text-green-600" />
Cash In
</Button>
<Button
variant="outline"
className="h-11 gap-2"
onClick={() => {
if (requiresOverride('cash_in_out')) {
setPendingAdjustView('cash_out')
setOverrideOpen(true)
} else {
setAdjustView('cash_out')
}
}}
>
<ArrowUpFromLine className="h-4 w-4 text-red-600" />
Cash Out
</Button>
</div>
{/* X Report button */}
<Button variant="outline" className="w-full h-10 gap-2 text-sm" onClick={() => setShowXReport(true)}>
Current Shift Report
</Button>
{/* Adjustment history */}
{adjustments.length > 0 && (
<>
<Separator />
<div className="space-y-1">
<span className="text-xs font-medium text-muted-foreground">Adjustments</span>
{adjustments.map((adj) => (
<div key={adj.id} className="flex items-center justify-between text-sm py-1">
<div className="flex items-center gap-2">
<Badge variant={adj.type === 'cash_in' ? 'default' : 'destructive'} className="text-[10px]">
{adj.type === 'cash_in' ? 'IN' : 'OUT'}
</Badge>
<span className="text-muted-foreground truncate max-w-[140px]">{adj.reason}</span>
</div>
<span className={adj.type === 'cash_in' ? 'text-green-600' : 'text-red-600'}>
{adj.type === 'cash_in' ? '+' : '-'}${parseFloat(adj.amount).toFixed(2)}
</span>
</div>
))}
</div>
</>
)}
<Separator /> <Separator />
{/* Close drawer */}
<div className="space-y-2"> <div className="space-y-2">
<Label>Closing Balance *</Label> <Label>Closing Balance *</Label>
<Input <Input
@@ -89,7 +291,6 @@ export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogP
onChange={(e) => setClosingBalance(e.target.value)} onChange={(e) => setClosingBalance(e.target.value)}
placeholder="Count the cash in the drawer" placeholder="Count the cash in the drawer"
className="h-11 text-lg" className="h-11 text-lg"
autoFocus
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -135,5 +336,136 @@ export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogP
)} )}
</DialogContent> </DialogContent>
</Dialog> </Dialog>
<ManagerOverrideDialog
open={overrideOpen}
onOpenChange={setOverrideOpen}
action={pendingAdjustView === 'cash_in' ? 'Cash In' : 'Cash Out'}
onAuthorized={() => {
if (pendingAdjustView) setAdjustView(pendingAdjustView)
setPendingAdjustView(null)
}}
/>
</>
)
}
// --- Shared report view used by both X and Z reports ---
const PAYMENT_LABELS: Record<string, string> = {
cash: 'Cash',
card_present: 'Card (Present)',
card_keyed: 'Card (Keyed)',
check: 'Check',
account_charge: 'Account',
unknown: 'Other',
}
function DrawerReportView({ report }: { report: any }) {
const { session, sales, payments, discounts, cash, adjustments } = report
return (
<div className="space-y-4 text-sm">
{/* Session info */}
<div className="space-y-1">
{session.register && <div className="flex justify-between"><span className="text-muted-foreground">Register</span><span>{session.register.name}</span></div>}
{session.openedBy && <div className="flex justify-between"><span className="text-muted-foreground">Opened by</span><span>{session.openedBy.firstName} {session.openedBy.lastName}</span></div>}
<div className="flex justify-between"><span className="text-muted-foreground">Opened</span><span>{new Date(session.openedAt).toLocaleString()}</span></div>
{session.closedAt && (
<>
{session.closedBy && <div className="flex justify-between"><span className="text-muted-foreground">Closed by</span><span>{session.closedBy.firstName} {session.closedBy.lastName}</span></div>}
<div className="flex justify-between"><span className="text-muted-foreground">Closed</span><span>{new Date(session.closedAt).toLocaleString()}</span></div>
</>
)}
</div>
<Separator />
{/* Sales */}
<div>
<h4 className="font-semibold text-xs uppercase text-muted-foreground mb-2">Sales</h4>
<div className="space-y-1">
<div className="flex justify-between"><span>Transactions</span><span>{sales.transactionCount}</span></div>
<div className="flex justify-between"><span>Gross Sales</span><span className="tabular-nums">${sales.grossSales.toFixed(2)}</span></div>
{sales.refundTotal > 0 && <div className="flex justify-between text-red-600"><span>Refunds</span><span className="tabular-nums">-${sales.refundTotal.toFixed(2)}</span></div>}
<div className="flex justify-between font-medium"><span>Net Sales</span><span className="tabular-nums">${sales.netSales.toFixed(2)}</span></div>
{sales.voidCount > 0 && <div className="flex justify-between text-muted-foreground"><span>Voided</span><span>{sales.voidCount}</span></div>}
</div>
</div>
<Separator />
{/* Payment breakdown */}
<div>
<h4 className="font-semibold text-xs uppercase text-muted-foreground mb-2">Payments</h4>
<div className="space-y-1">
{Object.entries(payments as Record<string, { count: number; total: number }>).map(([method, data]) => (
<div key={method} className="flex justify-between">
<span>{PAYMENT_LABELS[method] ?? method} ({data.count})</span>
<span className="tabular-nums">${data.total.toFixed(2)}</span>
</div>
))}
{Object.keys(payments).length === 0 && <p className="text-muted-foreground">No payments</p>}
</div>
</div>
{/* Discounts */}
{discounts.count > 0 && (
<>
<Separator />
<div>
<h4 className="font-semibold text-xs uppercase text-muted-foreground mb-2">Discounts</h4>
<div className="flex justify-between"><span>Total ({discounts.count})</span><span className="tabular-nums text-green-600">-${discounts.total.toFixed(2)}</span></div>
</div>
</>
)}
<Separator />
{/* Cash accountability */}
<div>
<h4 className="font-semibold text-xs uppercase text-muted-foreground mb-2">Cash</h4>
<div className="space-y-1">
<div className="flex justify-between"><span>Opening Balance</span><span className="tabular-nums">${cash.openingBalance.toFixed(2)}</span></div>
<div className="flex justify-between"><span>Cash Sales</span><span className="tabular-nums">${cash.cashSales.toFixed(2)}</span></div>
{cash.cashIn > 0 && <div className="flex justify-between text-green-600"><span>Cash In</span><span className="tabular-nums">+${cash.cashIn.toFixed(2)}</span></div>}
{cash.cashOut > 0 && <div className="flex justify-between text-red-600"><span>Cash Out</span><span className="tabular-nums">-${cash.cashOut.toFixed(2)}</span></div>}
<Separator />
<div className="flex justify-between font-medium"><span>Expected</span><span className="tabular-nums">${cash.expectedBalance.toFixed(2)}</span></div>
{cash.actualBalance !== null && (
<>
<div className="flex justify-between"><span>Actual Count</span><span className="tabular-nums">${cash.actualBalance.toFixed(2)}</span></div>
<div className={`flex justify-between font-bold ${cash.overShort === 0 ? 'text-green-600' : 'text-red-600'}`}>
<span>{cash.overShort! >= 0 ? 'Over' : 'Short'}</span>
<span className="tabular-nums">${Math.abs(cash.overShort!).toFixed(2)}</span>
</div>
</>
)}
</div>
</div>
{/* Adjustments */}
{adjustments.length > 0 && (
<>
<Separator />
<div>
<h4 className="font-semibold text-xs uppercase text-muted-foreground mb-2">Adjustments</h4>
<div className="space-y-1">
{adjustments.map((adj: any) => (
<div key={adj.id} className="flex items-center justify-between text-xs">
<div className="flex items-center gap-2">
<Badge variant={adj.type === 'cash_in' ? 'default' : 'destructive'} className="text-[10px]">
{adj.type === 'cash_in' ? 'IN' : 'OUT'}
</Badge>
<span className="text-muted-foreground truncate max-w-[150px]">{adj.reason}</span>
</div>
<span className="tabular-nums">${parseFloat(adj.amount).toFixed(2)}</span>
</div>
))}
</div>
</div>
</>
)}
</div>
) )
} }

View File

@@ -7,8 +7,10 @@ import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog' import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { Skeleton } from '@/components/ui/skeleton' import { Skeleton } from '@/components/ui/skeleton'
import { Search, ScanBarcode, Wrench, PenLine } from 'lucide-react' import { Search, ScanBarcode, Wrench, PenLine, ClipboardList } from 'lucide-react'
import { toast } from 'sonner' import { toast } from 'sonner'
import { POSTransactionsDialog } from './pos-transactions-dialog'
import { POSRepairDialog } from './pos-repair-dialog'
interface POSItemPanelProps { interface POSItemPanelProps {
transaction: Transaction | null transaction: Transaction | null
@@ -16,9 +18,11 @@ interface POSItemPanelProps {
export function POSItemPanel({ transaction: _transaction }: POSItemPanelProps) { export function POSItemPanel({ transaction: _transaction }: POSItemPanelProps) {
const queryClient = useQueryClient() const queryClient = useQueryClient()
const { currentTransactionId, setTransaction, locationId } = usePOSStore() const { currentTransactionId, setTransaction, locationId, accountId } = usePOSStore()
const [search, setSearch] = useState('') const [search, setSearch] = useState('')
const [customOpen, setCustomOpen] = useState(false) const [customOpen, setCustomOpen] = useState(false)
const [txnDialogOpen, setTxnDialogOpen] = useState(false)
const [repairOpen, setRepairOpen] = useState(false)
const [customDesc, setCustomDesc] = useState('') const [customDesc, setCustomDesc] = useState('')
const [customPrice, setCustomPrice] = useState('') const [customPrice, setCustomPrice] = useState('')
const [customQty, setCustomQty] = useState('1') const [customQty, setCustomQty] = useState('1')
@@ -40,6 +44,7 @@ export function POSItemPanel({ transaction: _transaction }: POSItemPanelProps) {
const txn = await posMutations.createTransaction({ const txn = await posMutations.createTransaction({
transactionType: 'sale', transactionType: 'sale',
locationId: locationId ?? undefined, locationId: locationId ?? undefined,
accountId: accountId ?? undefined,
}) })
txnId = txn.id txnId = txn.id
setTransaction(txnId) setTransaction(txnId)
@@ -66,6 +71,7 @@ export function POSItemPanel({ transaction: _transaction }: POSItemPanelProps) {
const txn = await posMutations.createTransaction({ const txn = await posMutations.createTransaction({
transactionType: 'sale', transactionType: 'sale',
locationId: locationId ?? undefined, locationId: locationId ?? undefined,
accountId: accountId ?? undefined,
}) })
txnId = txn.id txnId = txn.id
setTransaction(txnId) setTransaction(txnId)
@@ -96,6 +102,7 @@ export function POSItemPanel({ transaction: _transaction }: POSItemPanelProps) {
const txn = await posMutations.createTransaction({ const txn = await posMutations.createTransaction({
transactionType: 'sale', transactionType: 'sale',
locationId: locationId ?? undefined, locationId: locationId ?? undefined,
accountId: accountId ?? undefined,
}) })
txnId = txn.id txnId = txn.id
setTransaction(txnId) setTransaction(txnId)
@@ -195,7 +202,7 @@ export function POSItemPanel({ transaction: _transaction }: POSItemPanelProps) {
<Button <Button
variant="outline" variant="outline"
className="flex-1 h-11 text-sm gap-2" className="flex-1 h-11 text-sm gap-2"
disabled onClick={() => setRepairOpen(true)}
> >
<Wrench className="h-4 w-4" /> <Wrench className="h-4 w-4" />
Repairs Repairs
@@ -208,6 +215,14 @@ export function POSItemPanel({ transaction: _transaction }: POSItemPanelProps) {
<PenLine className="h-4 w-4" /> <PenLine className="h-4 w-4" />
Custom Custom
</Button> </Button>
<Button
variant="outline"
className="flex-1 h-11 text-sm gap-2"
onClick={() => setTxnDialogOpen(true)}
>
<ClipboardList className="h-4 w-4" />
Orders
</Button>
</div> </div>
{/* Custom item dialog */} {/* Custom item dialog */}
@@ -261,6 +276,10 @@ export function POSItemPanel({ transaction: _transaction }: POSItemPanelProps) {
</form> </form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
{/* Transactions dialog */}
<POSTransactionsDialog open={txnDialogOpen} onOpenChange={setTxnDialogOpen} />
<POSRepairDialog open={repairOpen} onOpenChange={setRepairOpen} />
</div> </div>
) )
} }

View File

@@ -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>
)
}

View File

@@ -0,0 +1,201 @@
import { useState, useCallback, useEffect, useRef } from 'react'
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { api } from '@/lib/api-client'
import { Delete, ShieldCheck } from 'lucide-react'
interface ManagerOverrideDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
action: string
onAuthorized: () => void
}
interface PinUser {
id: string
role: string
firstName: string
lastName: string
}
export function ManagerOverrideDialog({ open, onOpenChange, action, onAuthorized }: ManagerOverrideDialogProps) {
const [code, setCode] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const containerRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (open) {
setCode('')
setError('')
containerRef.current?.focus()
}
}, [open])
const handleDigit = useCallback((digit: string) => {
setError('')
setCode((p) => (p.length >= 10 ? p : 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 manager employee # + PIN')
return
}
setLoading(true)
setError('')
try {
const res = await api.post<{ user: PinUser; token: string }>('/v1/auth/pin-login', { code: submitCode })
if (res.user.role === 'admin' || res.user.role === 'manager') {
onAuthorized()
onOpenChange(false)
} else {
setError('Manager or admin access required')
setCode('')
}
} catch {
setError('Invalid code')
setCode('')
} finally {
setLoading(false)
}
}, [onAuthorized, onOpenChange])
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 (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-xs">
<div
ref={containerRef}
onKeyDown={handleKeyDown}
tabIndex={0}
className="outline-none space-y-4"
>
<div className="text-center space-y-1">
<ShieldCheck className="h-8 w-8 mx-auto text-amber-500" />
<DialogTitle className="text-base">Manager Override</DialogTitle>
<p className="text-xs text-muted-foreground">{action}</p>
</div>
{/* Code dots */}
<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 h-3 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">-</span>
<div className="flex gap-1.5">
{Array.from({ length: 4 }).map((_, i) => (
<div
key={`p${i}`}
className={`w-3 h-3 rounded-full border-2 ${
i < Math.max(0, code.length - 4) ? 'bg-foreground border-foreground' : 'border-muted-foreground/30'
}`}
/>
))}
</div>
</div>
{error && <p className="text-xs text-destructive text-center">{error}</p>}
{/* Numpad */}
<div className="grid grid-cols-3 gap-1.5">
{['1', '2', '3', '4', '5', '6', '7', '8', '9'].map((d) => (
<Button key={d} variant="outline" className="h-12 text-lg font-medium" onClick={() => handleDigit(d)} disabled={loading}>
{d}
</Button>
))}
<Button variant="outline" className="h-12 text-xs" onClick={handleClear} disabled={loading}>Clear</Button>
<Button variant="outline" className="h-12 text-lg font-medium" onClick={() => handleDigit('0')} disabled={loading}>0</Button>
<Button variant="outline" className="h-12" onClick={handleBackspace} disabled={loading}>
<Delete className="h-4 w-4" />
</Button>
</div>
{loading && <p className="text-xs text-muted-foreground text-center">Verifying...</p>}
</div>
</DialogContent>
</Dialog>
)
}
// --- Config types & helpers ---
export const OVERRIDE_ACTIONS = [
{ key: 'void_transaction', label: 'Void Transaction', description: 'Cancel an in-progress sale' },
{ key: 'refund', label: 'Refund', description: 'Process a return or refund' },
{ key: 'manual_discount', label: 'Manual Discount', description: 'Apply a discount not from a preset' },
{ key: 'price_override', label: 'Price Override', description: 'Change an item price at the register' },
{ key: 'no_sale_drawer', label: 'No-Sale Drawer Open', description: 'Open the drawer without a transaction' },
{ key: 'cash_in_out', label: 'Cash In / Cash Out', description: 'Add or remove cash from the drawer' },
] as const
export type OverrideAction = typeof OVERRIDE_ACTIONS[number]['key']
const STORAGE_KEY = 'pos_manager_overrides'
export function getRequiredOverrides(): Set<OverrideAction> {
try {
const stored = localStorage.getItem(STORAGE_KEY)
if (!stored) return new Set()
return new Set(JSON.parse(stored) as OverrideAction[])
} catch {
return new Set()
}
}
export function setRequiredOverrides(actions: Set<OverrideAction>) {
localStorage.setItem(STORAGE_KEY, JSON.stringify([...actions]))
}
export function requiresOverride(action: OverrideAction): boolean {
return getRequiredOverrides().has(action)
}
// Discount threshold — discounts above this percentage require manager override
const DISCOUNT_THRESHOLD_KEY = 'pos_discount_threshold_pct'
export function getDiscountThreshold(): number {
const stored = localStorage.getItem(DISCOUNT_THRESHOLD_KEY)
return stored ? parseInt(stored, 10) : 0 // 0 = disabled
}
export function setDiscountThreshold(pct: number) {
localStorage.setItem(DISCOUNT_THRESHOLD_KEY, String(pct))
}
export function requiresDiscountOverride(discountPct: number): boolean {
// Check percentage threshold first
const threshold = getDiscountThreshold()
if (threshold > 0 && discountPct >= threshold) return true
// Fall back to the blanket manual_discount toggle
return requiresOverride('manual_discount')
}

View File

@@ -1,14 +1,16 @@
import { useState } from 'react' import { useState } from 'react'
import { useMutation, useQueryClient } from '@tanstack/react-query' import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { usePOSStore } from '@/stores/pos.store' import { usePOSStore } from '@/stores/pos.store'
import { api } from '@/lib/api-client'
import { posMutations, posKeys, type Transaction } from '@/api/pos' import { posMutations, posKeys, type Transaction } from '@/api/pos'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog' import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { CheckCircle } from 'lucide-react' import { CheckCircle, Printer, Mail } from 'lucide-react'
import { toast } from 'sonner' import { toast } from 'sonner'
import { POSReceipt, downloadReceiptPDF, printReceipt } from './pos-receipt'
interface POSPaymentDialogProps { interface POSPaymentDialogProps {
open: boolean open: boolean
@@ -42,6 +44,7 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
}, },
onSuccess: (txn) => { onSuccess: (txn) => {
queryClient.invalidateQueries({ queryKey: posKeys.transaction(currentTransactionId!) }) queryClient.invalidateQueries({ queryKey: posKeys.transaction(currentTransactionId!) })
queryClient.invalidateQueries({ queryKey: ['pos', 'products'] })
setResult(txn) setResult(txn)
setCompleted(true) setCompleted(true)
}, },
@@ -61,9 +64,74 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
const QUICK_AMOUNTS = [1, 5, 10, 20, 50, 100] const QUICK_AMOUNTS = [1, 5, 10, 20, 50, 100]
// Fetch receipt config
interface AppConfigEntry { key: string; value: string | null }
const { data: configData } = useQuery({
queryKey: ['config'],
queryFn: () => api.get<{ data: AppConfigEntry[] }>('/v1/config'),
enabled: !!result?.id,
})
const receiptFormat = usePOSStore((s) => s.receiptFormat)
const receiptConfig = {
header: configData?.data?.find((c) => c.key === 'receipt_header')?.value || undefined,
footer: configData?.data?.find((c) => c.key === 'receipt_footer')?.value || undefined,
returnPolicy: configData?.data?.find((c) => c.key === 'receipt_return_policy')?.value || undefined,
social: configData?.data?.find((c) => c.key === 'receipt_social')?.value || undefined,
}
// Fetch full receipt data after completion
const { data: receiptData } = useQuery({
queryKey: ['pos', 'receipt', result?.id],
queryFn: () => api.get<{
transaction: Transaction & { lineItems: { description: string; qty: number; unitPrice: string; taxAmount: string; lineTotal: string; discountAmount: string }[] }
customerEmail: string | null
company: { name: string; phone: string | null; email: string | null; address: { street?: string; city?: string; state?: string; zip?: string } | null }
location: { name: string; phone: string | null; email: string | null; address: { street?: string; city?: string; state?: string; zip?: string } | null }
}>(`/v1/transactions/${result!.id}/receipt`),
enabled: !!result?.id,
})
const [showReceipt, setShowReceipt] = useState(false)
const [emailMode, setEmailMode] = useState(false)
const [emailAddress, setEmailAddress] = useState('')
const [emailSent, setEmailSent] = useState(false)
const emailReceiptMutation = useMutation({
mutationFn: () => api.post<{ message: string }>(`/v1/transactions/${result!.id}/email-receipt`, { email: emailAddress }),
onSuccess: () => {
toast.success('Receipt emailed')
setEmailMode(false)
setEmailSent(true)
},
onError: (err) => toast.error(err.message),
})
if (completed && result) { if (completed && result) {
const changeGiven = parseFloat(result.changeGiven ?? '0') const changeGiven = parseFloat(result.changeGiven ?? '0')
const roundingAdj = parseFloat(result.roundingAdjustment ?? '0')
// Receipt print view
if (showReceipt && receiptData) {
return (
<Dialog open={open} onOpenChange={() => { setShowReceipt(false); handleDone() }}>
<DialogContent className={`${receiptFormat === 'full' ? 'max-w-2xl' : 'max-w-sm'} max-h-[90vh] overflow-y-auto print:max-w-none print:max-h-none print:overflow-visible print:shadow-none print:border-none`}>
<div className="flex justify-between items-center mb-2">
<Button variant="ghost" size="sm" onClick={() => setShowReceipt(false)}>Back</Button>
<div className="flex gap-2">
<Button variant="outline" size="sm" onClick={() => downloadReceiptPDF(result.transactionNumber, receiptFormat)} className="gap-2">
Save PDF
</Button>
<Button size="sm" onClick={printReceipt} className="gap-2">
<Printer className="h-4 w-4" />Print
</Button>
</div>
</div>
<div id="pos-receipt-print">
<POSReceipt data={receiptData} size={receiptFormat} config={receiptConfig} />
</div>
</DialogContent>
</Dialog>
)
}
return ( return (
<Dialog open={open} onOpenChange={() => handleDone()}> <Dialog open={open} onOpenChange={() => handleDone()}>
@@ -78,28 +146,56 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
<span>Total</span> <span>Total</span>
<span>${parseFloat(result.total).toFixed(2)}</span> <span>${parseFloat(result.total).toFixed(2)}</span>
</div> </div>
{roundingAdj !== 0 && ( {paymentMethod === 'cash' && changeGiven > 0 && (
<div className="flex justify-between text-muted-foreground"> <div className="flex justify-between text-lg font-bold text-green-600">
<span>Rounding</span> <span>Change Due</span>
<span>{roundingAdj > 0 ? '+' : ''}{roundingAdj.toFixed(2)}</span> <span>${changeGiven.toFixed(2)}</span>
</div> </div>
)} )}
{paymentMethod === 'cash' && (
<>
<div className="flex justify-between">
<span>Tendered</span>
<span>${parseFloat(result.amountTendered ?? '0').toFixed(2)}</span>
</div>
{changeGiven > 0 && (
<div className="flex justify-between text-lg font-bold text-green-600">
<span>Change Due</span>
<span>${changeGiven.toFixed(2)}</span>
</div>
)}
</>
)}
</div> </div>
{emailMode ? (
<div className="w-full space-y-2">
<Label className="text-xs text-muted-foreground">Email receipt to:</Label>
<div className="flex gap-2">
<Input
type="email"
value={emailAddress}
onChange={(e) => setEmailAddress(e.target.value)}
placeholder="customer@example.com"
className="h-9"
autoFocus
/>
<Button
size="sm"
className="h-9 px-4"
onClick={() => emailReceiptMutation.mutate()}
disabled={!emailAddress || emailReceiptMutation.isPending}
>
{emailReceiptMutation.isPending ? 'Sending...' : 'Send'}
</Button>
</div>
<Button variant="ghost" size="sm" className="text-xs" onClick={() => setEmailMode(false)}>Cancel</Button>
</div>
) : (
<div className="w-full grid grid-cols-2 gap-2">
<Button variant="outline" className="h-11 gap-2" onClick={() => setShowReceipt(true)}>
<Printer className="h-4 w-4" />Receipt
</Button>
<Button
variant="outline"
className="h-11 gap-2"
onClick={() => {
setEmailAddress(receiptData?.customerEmail ?? '')
setEmailMode(true)
}}
disabled={emailSent}
>
<Mail className="h-4 w-4" />{emailSent ? 'Sent' : 'Email'}
</Button>
</div>
)}
<Button className="w-full h-12 text-base" onClick={handleDone}> <Button className="w-full h-12 text-base" onClick={handleDone}>
New Sale New Sale
</Button> </Button>

View File

@@ -0,0 +1,443 @@
import { useEffect, useRef, 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 JsBarcode from 'jsbarcode'
interface ReceiptLineItem {
description: string
qty: number
unitPrice: string
taxAmount: string
lineTotal: string
discountAmount?: string
}
interface ReceiptData {
transaction: {
transactionNumber: string
transactionType: string
status: string
subtotal: string
discountTotal: string
taxTotal: string
total: string
paymentMethod: string | null
amountTendered: string | null
changeGiven: string | null
roundingAdjustment: string
completedAt: string | null
createdAt: string
lineItems: ReceiptLineItem[]
}
company: {
name: string
phone: string | null
email: string | null
address: { street?: string; city?: string; state?: string; zip?: string } | null
}
location: {
name: string
phone: string | null
email: string | null
address: { street?: string; city?: string; state?: string; zip?: string } | null
}
}
interface ReceiptConfig {
header?: string
footer?: string
returnPolicy?: string
social?: string
}
interface POSReceiptProps {
data: ReceiptData
size?: 'thermal' | 'full'
footerText?: string
config?: ReceiptConfig
}
function useStoreLogo(companyId?: string) {
const token = usePOSStore((s) => s.token)
const [logoSrc, setLogoSrc] = useState<string | null>(null)
const { data: storeData } = useQuery(queryOptions({
queryKey: ['store'],
queryFn: () => api.get<{ id: string }>('/v1/store'),
enabled: !!token,
}))
const storeId = companyId ?? storeData?.id
const { data: filesData } = useQuery(queryOptions({
queryKey: ['files', 'company', storeId ?? ''],
queryFn: () => api.get<{ data: { id: string; path: string }[] }>('/v1/files', { entityType: 'company', entityId: storeId }),
enabled: !!storeId,
}))
const logoFile = filesData?.data?.find((f) => f.path.includes('/logo-'))
useEffect(() => {
if (!logoFile || !token) { setLogoSrc(null); return }
let cancelled = false
let blobUrl: string | null = null
async function load() {
try {
const res = await fetch(`/v1/files/serve/${logoFile!.path}`, {
headers: { Authorization: `Bearer ${token}` },
})
if (!res.ok || cancelled) return
const blob = await res.blob()
if (!cancelled) { blobUrl = URL.createObjectURL(blob); setLogoSrc(blobUrl) }
} catch { /* ignore */ }
}
load()
return () => { cancelled = true; if (blobUrl) URL.revokeObjectURL(blobUrl) }
}, [logoFile?.path, token])
return logoSrc
}
export function POSReceipt({ data, size = 'thermal', footerText, config }: POSReceiptProps) {
const isThermal = size === 'thermal'
if (!isThermal) {
return <FullPageReceipt data={data} config={config} footerText={footerText} />
}
return <ThermalReceipt data={data} config={config} footerText={footerText} />
}
function useReceiptData(data: POSReceiptProps['data']) {
const { transaction: txn, company, location } = data
return {
txn,
company,
location,
date: new Date(txn.completedAt ?? txn.createdAt),
subtotal: parseFloat(txn.subtotal),
discountTotal: parseFloat(txn.discountTotal),
taxTotal: parseFloat(txn.taxTotal),
total: parseFloat(txn.total),
rounding: parseFloat(txn.roundingAdjustment),
tendered: txn.amountTendered ? parseFloat(txn.amountTendered) : null,
change: txn.changeGiven ? parseFloat(txn.changeGiven) : null,
addr: location.address ?? company.address,
phone: location.phone ?? company.phone,
email: location.email ?? company.email,
}
}
function useBarcode(ref: React.RefObject<SVGSVGElement | null>, value: string, opts: { width: number; height: number; fontSize: number }) {
useEffect(() => {
if (ref.current) {
try {
JsBarcode(ref.current, value, { format: 'CODE128', displayValue: true, margin: 4, ...opts })
} catch { /* barcode generation failed — show text fallback */ }
}
}, [value])
}
function ThermalReceipt({ data, config, footerText }: { data: POSReceiptProps['data']; config?: ReceiptConfig; footerText?: string }) {
const barcodeRef = useRef<SVGSVGElement>(null)
const logoSrc = useStoreLogo()
const { txn, company, location, date, subtotal, discountTotal, taxTotal, total, rounding, tendered, change, addr, phone } = useReceiptData(data)
useBarcode(barcodeRef, txn.transactionNumber, { width: 1.5, height: 40, fontSize: 10 })
const s = {
row: { display: 'flex', justifyContent: 'space-between' } as const,
section: { padding: '8px 0', borderBottom: '1px dashed #999' } as const,
gray: { color: '#666' } as const,
light: { color: '#999' } as const,
bold: { fontWeight: 'bold' } as const,
center: { textAlign: 'center' } as const,
nums: { fontVariantNumeric: 'tabular-nums' } as const,
}
return (
<div style={{
background: '#fff', color: '#000', fontFamily: 'monospace',
width: 260, maxWidth: 260, fontSize: 10, lineHeight: '1.3', margin: '0 auto',
}}>
{/* Store header */}
<div style={{ ...s.section, ...s.center }}>
{logoSrc ? (
<img src={logoSrc} alt={company.name} style={{ display: 'block', margin: '0 auto 4px', maxHeight: 48, maxWidth: 200, objectFit: 'contain' }} />
) : (
<div style={{ ...s.bold, fontSize: 14 }}>{company.name}</div>
)}
{location.name !== company.name && <div style={s.gray}>{location.name}</div>}
{addr?.street && <div>{addr.street}</div>}
{(addr?.city || addr?.state || addr?.zip) && (
<div>{[addr?.city, addr?.state].filter(Boolean).join(', ')} {addr?.zip}</div>
)}
{phone && <div>{phone}</div>}
{config?.header && <div style={{ ...s.gray, marginTop: 4 }}>{config.header}</div>}
</div>
{/* Transaction info */}
<div style={s.section}>
<div style={s.row}>
<span>{txn.transactionNumber}</span>
<span>{txn.transactionType.replace('_', ' ')}</span>
</div>
<div style={{ ...s.row, ...s.gray }}>
<span>{date.toLocaleDateString()}</span>
<span>{date.toLocaleTimeString()}</span>
</div>
</div>
{/* Line items */}
<div style={s.section}>
{txn.lineItems.map((item, i) => (
<div key={i} style={{ padding: '2px 0' }}>
<div style={s.row}>
<span style={{ flex: 1, paddingRight: 8 }}>{item.description}</span>
<span style={s.nums}>${parseFloat(item.lineTotal).toFixed(2)}</span>
</div>
{(item.qty > 1 || parseFloat(item.discountAmount ?? '0') > 0) && (
<div style={{ ...s.light, paddingLeft: 8 }}>
{item.qty > 1 && <span>{item.qty} x ${parseFloat(item.unitPrice).toFixed(2)}</span>}
{parseFloat(item.discountAmount ?? '0') > 0 && (
<span style={{ marginLeft: 8 }}>disc -${parseFloat(item.discountAmount!).toFixed(2)}</span>
)}
</div>
)}
</div>
))}
</div>
{/* Totals */}
<div style={s.section}>
<div style={s.row}><span>Subtotal</span><span style={s.nums}>${subtotal.toFixed(2)}</span></div>
{discountTotal > 0 && (
<div style={s.row}><span>Discount</span><span style={s.nums}>-${discountTotal.toFixed(2)}</span></div>
)}
<div style={s.row}><span>Tax</span><span style={s.nums}>${taxTotal.toFixed(2)}</span></div>
{rounding !== 0 && (
<div style={{ ...s.row, ...s.gray }}><span>Rounding</span><span style={s.nums}>{rounding > 0 ? '+' : ''}{rounding.toFixed(2)}</span></div>
)}
<div style={{ ...s.row, ...s.bold, fontSize: 14, paddingTop: 4 }}>
<span>TOTAL</span><span style={s.nums}>${total.toFixed(2)}</span>
</div>
</div>
{/* Payment */}
<div style={s.section}>
<div style={s.row}><span>Payment</span><span style={{ textTransform: 'capitalize' }}>{txn.paymentMethod?.replace('_', ' ') ?? 'N/A'}</span></div>
{tendered !== null && (
<div style={s.row}><span>Tendered</span><span style={s.nums}>${tendered.toFixed(2)}</span></div>
)}
{change !== null && change > 0 && (
<div style={{ ...s.row, ...s.bold }}><span>Change</span><span style={s.nums}>${change.toFixed(2)}</span></div>
)}
</div>
{/* Barcode */}
<div style={{ display: 'flex', justifyContent: 'center', padding: '12px 0' }}>
<svg ref={barcodeRef} />
</div>
{/* Footer */}
{(config?.footer || footerText) && (
<div style={{ ...s.center, ...s.light, paddingBottom: 4 }}>{config?.footer || footerText}</div>
)}
{config?.returnPolicy && (
<div style={{ ...s.center, color: '#aaa', fontSize: 10, paddingBottom: 4 }}>{config.returnPolicy}</div>
)}
{config?.social && (
<div style={{ ...s.center, ...s.light, paddingBottom: 8 }}>{config.social}</div>
)}
</div>
)
}
function FullPageReceipt({ data, config, footerText }: { data: POSReceiptProps['data']; config?: ReceiptConfig; footerText?: string }) {
const barcodeRef = useRef<SVGSVGElement>(null)
const logoSrc = useStoreLogo()
const { txn, company, location, date, subtotal, discountTotal, taxTotal, total, rounding, tendered, change, addr, phone, email } = useReceiptData(data)
useBarcode(barcodeRef, txn.transactionNumber, { width: 2, height: 50, fontSize: 12 })
const f = (n: number) => `$${n.toFixed(2)}`
return (
<div style={{
background: '#fff', color: '#000', fontFamily: 'Helvetica, Arial, sans-serif',
width: '100%', maxWidth: 600, margin: '0 auto', fontSize: 13, lineHeight: '1.5',
}}>
{/* Header — company left, transaction right */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', paddingBottom: 16 }}>
<div>
{logoSrc ? (
<img src={logoSrc} alt={company.name} style={{ maxHeight: 56, maxWidth: 200, objectFit: 'contain', marginBottom: 4 }} />
) : (
<div style={{ fontSize: 20, fontWeight: 'bold' }}>{company.name}</div>
)}
{location.name !== company.name && <div style={{ color: '#555', fontSize: 12 }}>{location.name}</div>}
{addr?.street && <div style={{ fontSize: 12 }}>{addr.street}</div>}
{(addr?.city || addr?.state || addr?.zip) && (
<div style={{ fontSize: 12 }}>{[addr?.city, addr?.state].filter(Boolean).join(', ')} {addr?.zip}</div>
)}
{phone && <div style={{ fontSize: 12 }}>{phone}</div>}
{email && <div style={{ fontSize: 12 }}>{email}</div>}
{config?.header && <div style={{ fontSize: 12, color: '#555', marginTop: 2 }}>{config.header}</div>}
</div>
<div style={{ textAlign: 'right' }}>
<div style={{ fontSize: 16, fontWeight: 'bold' }}>{txn.transactionNumber}</div>
<div style={{ fontSize: 12, color: '#555', textTransform: 'capitalize' }}>{txn.transactionType.replace('_', ' ')}</div>
<div style={{ fontSize: 12, color: '#555' }}>{date.toLocaleDateString()}</div>
<div style={{ fontSize: 12, color: '#555' }}>{date.toLocaleTimeString()}</div>
</div>
</div>
{/* Divider */}
<div style={{ borderBottom: '1px solid #ddd', marginBottom: 16 }} />
{/* Line items table */}
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
<thead>
<tr style={{ background: '#f5f5f5' }}>
<th style={{ textAlign: 'left', padding: '6px 8px', fontWeight: 600, fontSize: 11, textTransform: 'uppercase', color: '#555' }}>Item</th>
<th style={{ textAlign: 'right', padding: '6px 8px', fontWeight: 600, fontSize: 11, textTransform: 'uppercase', color: '#555', width: 50 }}>Qty</th>
<th style={{ textAlign: 'right', padding: '6px 8px', fontWeight: 600, fontSize: 11, textTransform: 'uppercase', color: '#555', width: 80 }}>Price</th>
<th style={{ textAlign: 'right', padding: '6px 8px', fontWeight: 600, fontSize: 11, textTransform: 'uppercase', color: '#555', width: 80 }}>Total</th>
</tr>
</thead>
<tbody>
{txn.lineItems.map((item, i) => (
<tr key={i} style={{ borderBottom: '1px solid #eee' }}>
<td style={{ padding: '6px 8px' }}>
{item.description}
{parseFloat(item.discountAmount ?? '0') > 0 && (
<div style={{ fontSize: 11, color: '#999' }}>Discount: -{f(parseFloat(item.discountAmount!))}</div>
)}
</td>
<td style={{ padding: '6px 8px', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{item.qty}</td>
<td style={{ padding: '6px 8px', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{f(parseFloat(item.unitPrice))}</td>
<td style={{ padding: '6px 8px', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{f(parseFloat(item.lineTotal))}</td>
</tr>
))}
</tbody>
</table>
{/* Totals — right aligned */}
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
<div style={{ width: 220 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
<span>Subtotal</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{f(subtotal)}</span>
</div>
{discountTotal > 0 && (
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', color: '#555' }}>
<span>Discount</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>-{f(discountTotal)}</span>
</div>
)}
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
<span>Tax</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{f(taxTotal)}</span>
</div>
{rounding !== 0 && (
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', color: '#888', fontSize: 12 }}>
<span>Rounding</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{rounding > 0 ? '+' : ''}{rounding.toFixed(2)}</span>
</div>
)}
<div style={{ borderTop: '1px solid #ddd', marginTop: 4, paddingTop: 6, display: 'flex', justifyContent: 'space-between', fontWeight: 'bold', fontSize: 16 }}>
<span>Total</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{f(total)}</span>
</div>
</div>
</div>
{/* Payment info */}
<div style={{ marginTop: 16, padding: '12px 0', borderTop: '1px solid #ddd' }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span>Payment Method</span>
<span style={{ textTransform: 'capitalize', fontWeight: 500 }}>{txn.paymentMethod?.replace('_', ' ') ?? 'N/A'}</span>
</div>
{tendered !== null && (
<div style={{ display: 'flex', justifyContent: 'space-between', color: '#555', fontSize: 12, marginTop: 2 }}>
<span>Tendered</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{f(tendered)}</span>
</div>
)}
{change !== null && change > 0 && (
<div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 'bold', marginTop: 2 }}>
<span>Change</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{f(change)}</span>
</div>
)}
</div>
{/* Barcode */}
<div style={{ display: 'flex', justifyContent: 'center', padding: '16px 0' }}>
<svg ref={barcodeRef} />
</div>
{/* Footer */}
<div style={{ borderTop: '1px solid #eee', paddingTop: 12, textAlign: 'center', fontSize: 11, color: '#999' }}>
{(config?.footer || footerText) && <div>{config?.footer || footerText}</div>}
{config?.returnPolicy && <div style={{ marginTop: 4 }}>{config.returnPolicy}</div>}
{config?.social && <div style={{ marginTop: 4 }}>{config.social}</div>}
</div>
</div>
)
}
export function printReceipt() {
const el = document.getElementById('pos-receipt-print')
if (!el) return
// Clone the receipt into an iframe for clean printing
const iframe = document.createElement('iframe')
iframe.style.cssText = 'position:fixed;left:-9999px;width:400px;height:800px;border:none;'
document.body.appendChild(iframe)
const doc = iframe.contentDocument
if (!doc) { document.body.removeChild(iframe); return }
doc.open()
doc.write(`<!DOCTYPE html><html><head><style>body{margin:0;padding:8px;background:#fff;}</style></head><body>${el.innerHTML}</body></html>`)
doc.close()
// Wait for content to render then print
setTimeout(() => {
try {
iframe.contentWindow?.focus()
iframe.contentWindow?.print()
} catch {
// Fallback: just use window.print
window.print()
}
setTimeout(() => document.body.removeChild(iframe), 2000)
}, 300)
}
export async function downloadReceiptPDF(txnNumber?: string, format: 'thermal' | 'full' = 'thermal') {
const el = document.getElementById('pos-receipt-print')
if (!el) return
const html2pdf = (await import('html2pdf.js')).default
if (format === 'full') {
html2pdf()
.set({
margin: [10, 10, 10, 10],
filename: `receipt-${txnNumber ?? 'unknown'}.pdf`,
image: { type: 'jpeg', quality: 0.95 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'mm', format: 'letter', orientation: 'portrait' },
})
.from(el)
.save()
} else {
// Thermal — dynamic height based on content
const heightPx = el.scrollHeight + 16
const heightMm = Math.ceil(heightPx * 0.265) + 8
html2pdf()
.set({
margin: [2, 2, 2, 2],
filename: `receipt-${txnNumber ?? 'unknown'}.pdf`,
image: { type: 'jpeg', quality: 0.95 },
html2canvas: { scale: 2, useCORS: true, width: 280 },
jsPDF: { unit: 'mm', format: [72, heightMm], orientation: 'portrait' },
})
.from(el)
.save()
}
}

View File

@@ -1,4 +1,4 @@
import { useEffect } from 'react' import { useEffect, useRef, useCallback } from 'react'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import { queryOptions } from '@tanstack/react-query' import { queryOptions } from '@tanstack/react-query'
import { api } from '@/lib/api-client' import { api } from '@/lib/api-client'
@@ -7,12 +7,18 @@ import { currentDrawerOptions, transactionOptions } from '@/api/pos'
import { POSTopBar } from './pos-top-bar' import { POSTopBar } from './pos-top-bar'
import { POSItemPanel } from './pos-item-panel' import { POSItemPanel } from './pos-item-panel'
import { POSCartPanel } from './pos-cart-panel' import { POSCartPanel } from './pos-cart-panel'
import { POSLockScreen } from './pos-lock-screen'
interface Location { interface Location {
id: string id: string
name: string name: string
} }
interface AppConfigEntry {
key: string
value: string | null
}
function locationsOptions() { function locationsOptions() {
return queryOptions({ return queryOptions({
queryKey: ['locations'], queryKey: ['locations'],
@@ -20,38 +26,119 @@ function locationsOptions() {
}) })
} }
export function POSRegister() { function configOptions(key: string) {
const { locationId, setLocation, currentTransactionId, setDrawerSession } = usePOSStore() 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
}
},
})
}
// Fetch locations interface POSRegisterProps {
const { data: locationsData } = useQuery(locationsOptions()) embedded?: boolean
}
export function POSRegister({ embedded }: POSRegisterProps = {}) {
const { locationId, setLocation, currentTransactionId, setDrawerSession, locked, lock, touchActivity, token } = usePOSStore()
// Fetch lock timeout from config (standalone only)
const { data: lockTimeoutStr } = useQuery({
...configOptions('pos_lock_timeout'),
enabled: !!token && !embedded,
})
const lockTimeoutMinutes = parseInt(lockTimeoutStr ?? '15') || 15
// 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
}
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)
}
}, [embedded, locked, lockTimeoutMinutes, lock])
// Track activity (standalone only)
const handleActivity = useCallback(() => {
if (!embedded && !locked) touchActivity()
}, [embedded, locked, touchActivity])
// Fetch locations (standalone only — station shell handles this when embedded)
const { data: locationsData } = useQuery({
...locationsOptions(),
enabled: !!token && !embedded,
})
const locations = locationsData?.data ?? [] const locations = locationsData?.data ?? []
// Auto-select first location // Auto-select first location (standalone only)
useEffect(() => { useEffect(() => {
if (embedded) return
if (!locationId && locations.length > 0) { if (!locationId && locations.length > 0) {
setLocation(locations[0].id) setLocation(locations[0].id)
} }
}, [locationId, locations, setLocation]) }, [embedded, locationId, locations, setLocation])
// Fetch current drawer for selected location // Fetch current drawer for selected location
const { data: drawer } = useQuery({ const { data: drawer } = useQuery({
...currentDrawerOptions(locationId), ...currentDrawerOptions(locationId),
retry: false, retry: false,
enabled: !!locationId && !!token,
}) })
// Sync drawer session ID // Sync drawer session ID
useEffect(() => { useEffect(() => {
if (drawer?.id && drawer.status === 'open') { if (drawer?.id && drawer.status === 'open') {
setDrawerSession(drawer.id) setDrawerSession(drawer.id)
} else {
setDrawerSession(null)
} }
}, [drawer, setDrawerSession]) }, [drawer, setDrawerSession])
// Fetch current transaction // Fetch current transaction
const { data: transaction } = useQuery(transactionOptions(currentTransactionId)) const { data: transaction } = useQuery({
...transactionOptions(currentTransactionId),
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 ( return (
<div className="flex flex-col h-full"> <div
className="relative flex flex-col h-full"
onPointerDown={handleActivity}
onKeyDown={handleActivity}
>
{locked && <POSLockScreen />}
<POSTopBar <POSTopBar
locations={locations} locations={locations}
locationId={locationId} locationId={locationId}

View File

@@ -0,0 +1,263 @@
import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { usePOSStore } from '@/stores/pos.store'
import { api } from '@/lib/api-client'
import { posMutations, posKeys } from '@/api/pos'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Search, Wrench, Plus } from 'lucide-react'
import { toast } from 'sonner'
interface Account {
id: string
name: string
email: string | null
phone: string | null
accountNumber: string | null
}
interface RepairTicketSummary {
id: string
ticketNumber: string | null
customerName: string
customerPhone: string | null
itemDescription: string | null
estimatedCost: string | null
status: string
}
interface POSRepairDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
}
export function POSRepairDialog({ open, onOpenChange }: POSRepairDialogProps) {
const queryClient = useQueryClient()
const { locationId, setTransaction, setAccount } = usePOSStore()
const [search, setSearch] = useState('')
const [tab, setTab] = useState('pickup')
// --- Pickup tab ---
const { data, isLoading } = useQuery({
queryKey: ['pos', 'repair-tickets-ready', search],
queryFn: () => api.get<{ data: RepairTicketSummary[] }>('/v1/repair-tickets/ready', { q: search || undefined, limit: 20 }),
enabled: open && tab === 'pickup',
})
const tickets = data?.data ?? []
const pickupMutation = useMutation({
mutationFn: (ticketId: string) => posMutations.createFromRepair(ticketId, locationId ?? undefined),
onSuccess: (txn) => {
setTransaction(txn.id)
if (txn.accountId) {
const ticket = tickets.find((t) => t.id === pickupMutation.variables)
if (ticket) setAccount(txn.accountId, ticket.customerName, ticket.customerPhone)
}
queryClient.invalidateQueries({ queryKey: posKeys.transaction(txn.id) })
toast.success(`Repair payment loaded — ${txn.transactionNumber}`)
close()
},
onError: (err) => toast.error(err.message),
})
// --- New intake tab ---
const [customerName, setCustomerName] = useState('')
const [customerPhone, setCustomerPhone] = useState('')
const [itemDescription, setItemDescription] = useState('')
const [problemDescription, setProblemDescription] = useState('')
const [estimatedCost, setEstimatedCost] = useState('')
const [accountId, setAccountId] = useState<string | null>(null)
const [customerSearch, setCustomerSearch] = useState('')
const [showCustomers, setShowCustomers] = useState(false)
const { data: customerData } = useQuery({
queryKey: ['pos', 'accounts', customerSearch],
queryFn: () => api.get<{ data: Account[] }>('/v1/accounts', { q: customerSearch, limit: 10 }),
enabled: customerSearch.length >= 2 && tab === 'intake',
})
const customerResults = customerData?.data ?? []
function selectCustomer(account: Account) {
setAccountId(account.id)
setCustomerName(account.name)
setCustomerPhone(account.phone ?? '')
setCustomerSearch('')
setShowCustomers(false)
}
function clearCustomer() {
setAccountId(null)
setCustomerName('')
setCustomerPhone('')
}
const intakeMutation = useMutation({
mutationFn: (data: Record<string, unknown>) =>
api.post<{ id: string; ticketNumber: string }>('/v1/repair-tickets', data),
onSuccess: (ticket) => {
toast.success(`Repair ticket #${ticket.ticketNumber} created`)
close()
},
onError: (err) => toast.error(err.message),
})
function handleIntakeSubmit(e: React.FormEvent) {
e.preventDefault()
intakeMutation.mutate({
customerName,
customerPhone: customerPhone || undefined,
accountId: accountId ?? undefined,
itemDescription: itemDescription || undefined,
problemDescription,
estimatedCost: estimatedCost ? parseFloat(estimatedCost) : undefined,
locationId: locationId ?? undefined,
})
}
function close() {
onOpenChange(false)
setSearch('')
setCustomerName('')
setCustomerPhone('')
setItemDescription('')
setProblemDescription('')
setEstimatedCost('')
setAccountId(null)
setCustomerSearch('')
setShowCustomers(false)
}
return (
<Dialog open={open} onOpenChange={(o) => { if (!o) close(); else onOpenChange(true) }}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Wrench className="h-5 w-5" />Repairs
</DialogTitle>
</DialogHeader>
<Tabs value={tab} onValueChange={setTab}>
<TabsList className="w-full">
<TabsTrigger value="pickup" className="flex-1">Pickup</TabsTrigger>
<TabsTrigger value="intake" className="flex-1">New Intake</TabsTrigger>
</TabsList>
<TabsContent value="pickup" className="mt-3 space-y-3">
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Search by ticket #, name, or phone..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9"
autoFocus={tab === 'pickup'}
/>
</div>
<div className="max-h-64 overflow-y-auto space-y-1">
{isLoading ? (
<p className="text-sm text-muted-foreground text-center py-4">Loading...</p>
) : tickets.length === 0 ? (
<p className="text-sm text-muted-foreground text-center py-4">
{search ? 'No ready tickets found' : 'No tickets ready for pickup'}
</p>
) : (
tickets.map((ticket) => (
<button
key={ticket.id}
type="button"
className="w-full text-left rounded-md border p-3 hover:bg-accent transition-colors"
onClick={() => pickupMutation.mutate(ticket.id)}
disabled={pickupMutation.isPending}
>
<div className="flex items-center justify-between">
<span className="font-medium text-sm">#{ticket.ticketNumber}</span>
<Badge variant="outline" className="text-xs">Ready</Badge>
</div>
<div className="text-sm mt-0.5">{ticket.customerName}</div>
{ticket.itemDescription && (
<div className="text-xs text-muted-foreground mt-0.5 truncate">{ticket.itemDescription}</div>
)}
{ticket.estimatedCost && (
<div className="text-xs text-muted-foreground mt-0.5">Est: ${ticket.estimatedCost}</div>
)}
</button>
))
)}
</div>
</TabsContent>
<TabsContent value="intake" className="mt-3">
<form onSubmit={handleIntakeSubmit} className="space-y-3">
{/* Customer lookup */}
<div className="relative space-y-1">
<Label className="text-xs">Customer Lookup</Label>
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
<Input
placeholder="Search by name, phone, or email..."
value={customerSearch}
onChange={(e) => { setCustomerSearch(e.target.value); setShowCustomers(true) }}
onFocus={() => customerSearch.length >= 2 && setShowCustomers(true)}
className="pl-9 h-8 text-sm"
/>
</div>
{accountId && (
<div className="flex items-center gap-1 text-xs text-muted-foreground">
<Badge variant="secondary" className="text-[10px]">Linked</Badge>
<span>{customerName}</span>
<button type="button" className="underline text-destructive ml-1" onClick={clearCustomer}>clear</button>
</div>
)}
{showCustomers && customerSearch.length >= 2 && (
<div className="absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-lg max-h-40 overflow-auto">
{customerResults.length === 0 ? (
<div className="p-2 text-xs text-muted-foreground">No accounts found</div>
) : customerResults.map((a) => (
<button key={a.id} type="button" className="w-full text-left px-3 py-2 text-sm hover:bg-accent" onClick={() => selectCustomer(a)}>
<div className="font-medium">{a.name}</div>
<div className="text-xs text-muted-foreground">{[a.phone, a.email].filter(Boolean).join(' · ')}</div>
</button>
))}
</div>
)}
</div>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<Label className="text-xs">Customer Name *</Label>
<Input value={customerName} onChange={(e) => setCustomerName(e.target.value)} required />
</div>
<div className="space-y-1">
<Label className="text-xs">Phone</Label>
<Input value={customerPhone} onChange={(e) => setCustomerPhone(e.target.value)} />
</div>
</div>
<div className="space-y-1">
<Label className="text-xs">Item Description</Label>
<Input value={itemDescription} onChange={(e) => setItemDescription(e.target.value)} placeholder="e.g. Violin, iPhone 12, Trek bicycle" />
</div>
<div className="space-y-1">
<Label className="text-xs">Problem *</Label>
<Textarea value={problemDescription} onChange={(e) => setProblemDescription(e.target.value)} rows={2} placeholder="What needs to be fixed?" required />
</div>
<div className="space-y-1">
<Label className="text-xs">Estimated Cost</Label>
<Input type="number" step="0.01" min="0" value={estimatedCost} onChange={(e) => setEstimatedCost(e.target.value)} placeholder="0.00" />
</div>
<Button type="submit" className="w-full gap-2" disabled={intakeMutation.isPending}>
<Plus className="h-4 w-4" />
{intakeMutation.isPending ? 'Creating...' : 'Create Repair Ticket'}
</Button>
</form>
</TabsContent>
</Tabs>
</DialogContent>
</Dialog>
)
}

View File

@@ -1,10 +1,9 @@
import { Link, useRouter } from '@tanstack/react-router' import { Link } from '@tanstack/react-router'
import { useAuthStore } from '@/stores/auth.store' import { usePOSStore } from '@/stores/pos.store'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { ArrowLeft, LogOut, DollarSign } from 'lucide-react' import { ArrowLeft, Lock, DollarSign, Receipt, FileText } from 'lucide-react'
import type { DrawerSession } from '@/api/pos' import type { DrawerSession } from '@/api/pos'
import { useState } from 'react' import { useState } from 'react'
import { POSDrawerDialog } from './pos-drawer-dialog' import { POSDrawerDialog } from './pos-drawer-dialog'
@@ -17,24 +16,21 @@ interface POSTopBarProps {
} }
export function POSTopBar({ locations, locationId, onLocationChange, drawer }: POSTopBarProps) { export function POSTopBar({ locations, locationId, onLocationChange, drawer }: POSTopBarProps) {
const router = useRouter() const cashier = usePOSStore((s) => s.cashier)
const user = useAuthStore((s) => s.user) const lockFn = usePOSStore((s) => s.lock)
const logout = useAuthStore((s) => s.logout) const receiptFormat = usePOSStore((s) => s.receiptFormat)
const setReceiptFormat = usePOSStore((s) => s.setReceiptFormat)
const [drawerDialogOpen, setDrawerDialogOpen] = useState(false) const [drawerDialogOpen, setDrawerDialogOpen] = useState(false)
const drawerOpen = drawer?.status === 'open' const drawerOpen = drawer?.status === 'open'
const isThermal = receiptFormat === 'thermal'
function handleLogout() {
logout()
router.navigate({ to: '/login', replace: true })
}
return ( return (
<> <>
<div className="h-12 border-b border-border bg-card flex items-center justify-between px-3 shrink-0"> <div className="h-12 border-b border-border bg-card flex items-center justify-between px-3 shrink-0">
{/* Left: back + location */} {/* Left: back + location */}
<div className="flex items-center gap-3"> <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" /> <ArrowLeft className="h-4 w-4" />
<span className="hidden sm:inline">Admin</span> <span className="hidden sm:inline">Admin</span>
</Link> </Link>
@@ -53,6 +49,17 @@ export function POSTopBar({ locations, locationId, onLocationChange, drawer }: P
) : locations.length === 1 ? ( ) : locations.length === 1 ? (
<span className="text-sm font-medium">{locations[0].name}</span> <span className="text-sm font-medium">{locations[0].name}</span>
) : null} ) : null}
<Button
variant="ghost"
size="sm"
className="h-8 gap-1.5 text-xs text-muted-foreground hover:text-foreground"
onClick={() => setReceiptFormat(isThermal ? 'full' : 'thermal')}
title={isThermal ? 'Receipt: Thermal — click to switch to Full Page' : 'Receipt: Full Page — click to switch to Thermal'}
>
{isThermal ? <Receipt className="h-3.5 w-3.5" /> : <FileText className="h-3.5 w-3.5" />}
<span className="hidden sm:inline">{isThermal ? 'Thermal' : 'Full Page'}</span>
</Button>
</div> </div>
{/* Center: drawer status */} {/* Center: drawer status */}
@@ -64,19 +71,19 @@ export function POSTopBar({ locations, locationId, onLocationChange, drawer }: P
> >
<DollarSign className="h-4 w-4" /> <DollarSign className="h-4 w-4" />
{drawerOpen ? ( {drawerOpen ? (
<Badge variant="default" className="text-xs"> <Badge variant="default" className="text-xs">Drawer Open</Badge>
Drawer Open &mdash; ${parseFloat(drawer!.openingBalance).toFixed(2)}
</Badge>
) : ( ) : (
<Badge variant="outline" className="text-xs">Drawer Closed</Badge> <Badge variant="outline" className="text-xs">Drawer Closed</Badge>
)} )}
</Button> </Button>
{/* Right: user + logout */} {/* Right: cashier + lock */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">{user?.firstName}</span> {cashier && (
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleLogout} title="Sign out"> <span className="text-sm text-muted-foreground">{cashier.firstName}</span>
<LogOut className="h-4 w-4" /> )}
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={lockFn} title="Lock POS">
<Lock className="h-4 w-4" />
</Button> </Button>
</div> </div>
</div> </div>

View File

@@ -0,0 +1,145 @@
import { 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 { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Printer } from 'lucide-react'
import { POSReceipt, printReceipt, downloadReceiptPDF } from './pos-receipt'
import type { Transaction } from '@/api/pos'
interface ReceiptData {
transaction: Transaction & { lineItems: { description: string; qty: number; unitPrice: string; taxAmount: string; lineTotal: string; discountAmount: string }[] }
company: { name: string; phone: string | null; email: string | null; address: { street?: string; city?: string; state?: string; zip?: string } | null }
location: { name: string; phone: string | null; email: string | null; address: { street?: string; city?: string; state?: string; zip?: string } | null }
}
interface AppConfigEntry { key: string; value: string | null }
function recentTransactionsOptions(search: string) {
return queryOptions({
queryKey: ['pos', 'recent-transactions', search],
queryFn: () => api.get<{ data: Transaction[] }>('/v1/transactions', {
limit: 15,
sort: 'created_at',
order: 'desc',
...(search ? { q: search } : {}),
}),
})
}
interface POSTransactionsDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
}
export function POSTransactionsDialog({ open, onOpenChange }: POSTransactionsDialogProps) {
const [search, setSearch] = useState('')
const [receiptTxnId, setReceiptTxnId] = useState<string | null>(null)
const { data: txnData } = useQuery({
...recentTransactionsOptions(search),
enabled: open,
})
const transactions = txnData?.data ?? []
// Fetch receipt for selected transaction
const { data: receiptData } = useQuery({
queryKey: ['pos', 'receipt', receiptTxnId],
queryFn: () => api.get<ReceiptData>(`/v1/transactions/${receiptTxnId}/receipt`),
enabled: !!receiptTxnId,
})
const { data: configData } = useQuery({
queryKey: ['config'],
queryFn: () => api.get<{ data: AppConfigEntry[] }>('/v1/config'),
enabled: !!receiptTxnId,
})
const receiptFormat = usePOSStore((s) => s.receiptFormat)
const receiptConfig = {
header: configData?.data?.find((c) => c.key === 'receipt_header')?.value || undefined,
footer: configData?.data?.find((c) => c.key === 'receipt_footer')?.value || undefined,
returnPolicy: configData?.data?.find((c) => c.key === 'receipt_return_policy')?.value || undefined,
social: configData?.data?.find((c) => c.key === 'receipt_social')?.value || undefined,
}
// Receipt view
if (receiptTxnId && receiptData) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className={`${receiptFormat === 'full' ? 'max-w-2xl' : 'max-w-sm'} max-h-[90vh] overflow-y-auto`}>
<div className="flex justify-between items-center mb-2">
<Button variant="ghost" size="sm" onClick={() => setReceiptTxnId(null)}>Back</Button>
<div className="flex gap-2">
<Button variant="outline" size="sm" onClick={() => downloadReceiptPDF(receiptData.transaction.transactionNumber, receiptFormat)}>
Save PDF
</Button>
<Button size="sm" onClick={printReceipt} className="gap-2">
<Printer className="h-4 w-4" />Print
</Button>
</div>
</div>
<div id="pos-receipt-print">
<POSReceipt data={receiptData} size={receiptFormat} config={receiptConfig} />
</div>
</DialogContent>
</Dialog>
)
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md max-h-[80vh] flex flex-col">
<DialogHeader>
<DialogTitle>Recent Transactions</DialogTitle>
</DialogHeader>
<Input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search by transaction number..."
className="h-10"
autoFocus
/>
<div className="flex-1 overflow-y-auto">
{transactions.length === 0 ? (
<p className="text-sm text-muted-foreground text-center py-8">No transactions found</p>
) : (
<div className="divide-y divide-border">
{transactions.map((txn) => (
<button
key={txn.id}
onClick={() => setReceiptTxnId(txn.id)}
className="w-full text-left py-2.5 px-1 hover:bg-accent/50 rounded transition-colors"
>
<div className="flex items-center justify-between">
<span className="text-sm font-mono">{txn.transactionNumber}</span>
<span className="text-sm font-semibold">${parseFloat(txn.total).toFixed(2)}</span>
</div>
<div className="flex items-center gap-2 mt-0.5">
<Badge
variant={txn.status === 'completed' ? 'default' : txn.status === 'voided' ? 'destructive' : 'outline'}
className="text-[10px]"
>
{txn.status}
</Badge>
{txn.paymentMethod && (
<span className="text-xs text-muted-foreground">{txn.paymentMethod.replace('_', ' ')}</span>
)}
<span className="text-xs text-muted-foreground ml-auto">
{new Date(txn.completedAt ?? txn.createdAt).toLocaleString()}
</span>
</div>
</button>
))}
</div>
)}
</div>
</DialogContent>
</Dialog>
)
}

View File

@@ -85,8 +85,9 @@ export function generateRepairPdf({ ticket, lineItems, notes, includeNotes, comp
doc.text(dateInfo, 14, y) doc.text(dateInfo, 14, y)
y += 8 y += 8
// Line items table // Line items table (exclude consumables — internal only)
if (lineItems.length > 0) { const billableItems = lineItems.filter((i) => i.itemType !== 'consumable')
if (billableItems.length > 0) {
doc.setDrawColor(200) doc.setDrawColor(200)
doc.line(14, y, 196, y) doc.line(14, y, 196, y)
y += 6 y += 6
@@ -109,7 +110,7 @@ export function generateRepairPdf({ ticket, lineItems, notes, includeNotes, comp
// Table rows // Table rows
doc.setFont('helvetica', 'normal') doc.setFont('helvetica', 'normal')
for (const item of lineItems) { for (const item of billableItems) {
if (y > 270) { doc.addPage(); y = 20 } if (y > 270) { doc.addPage(); y = 20 }
doc.text(item.itemType.replace('_', ' '), 16, y) doc.text(item.itemType.replace('_', ' '), 16, y)
const descLines = doc.splitTextToSize(item.description, 85) const descLines = doc.splitTextToSize(item.description, 85)
@@ -127,7 +128,7 @@ export function generateRepairPdf({ ticket, lineItems, notes, includeNotes, comp
y += 5 y += 5
doc.setFont('helvetica', 'bold') doc.setFont('helvetica', 'bold')
doc.setFontSize(10) doc.setFontSize(10)
const total = lineItems.reduce((sum, i) => sum + parseFloat(i.totalPrice), 0) const total = billableItems.reduce((sum, i) => sum + parseFloat(i.totalPrice), 0)
doc.text('Total:', 155, y, { align: 'right' }) doc.text('Total:', 155, y, { align: 'right' })
doc.text(`$${total.toFixed(2)}`, 190, y, { align: 'right' }) doc.text(`$${total.toFixed(2)}`, 190, y, { align: 'right' })
y += 4 y += 4

View File

@@ -0,0 +1,45 @@
import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { CalendarDays, Calendar } from 'lucide-react'
import { LessonsTodayOverview } from './lessons-today-overview'
import { LessonsScheduleView } from './lessons-schedule-view'
interface LessonsDeskViewProps {
canEdit: boolean
}
export function LessonsDeskView({ canEdit }: LessonsDeskViewProps) {
const [subView, setSubView] = useState<'today' | 'schedule'>('today')
return (
<div className="flex flex-col h-full">
{/* Sub-view toggle */}
<div className="flex items-center gap-1 px-3 py-2 border-b border-border shrink-0 bg-card/50">
<Button
variant={subView === 'today' ? 'default' : 'ghost'}
size="sm"
className="h-8 gap-1.5"
onClick={() => setSubView('today')}
>
<CalendarDays className="h-3.5 w-3.5" />
Today
</Button>
<Button
variant={subView === 'schedule' ? 'default' : 'ghost'}
size="sm"
className="h-8 gap-1.5"
onClick={() => setSubView('schedule')}
>
<Calendar className="h-3.5 w-3.5" />
Schedule
</Button>
</div>
{/* Content */}
<div className="flex-1 min-h-0 overflow-hidden">
{subView === 'today' && <LessonsTodayOverview canEdit={canEdit} />}
{subView === 'schedule' && <LessonsScheduleView />}
</div>
</div>
)
}

View File

@@ -0,0 +1,56 @@
import { useState } from 'react'
import { usePOSStore } from '@/stores/pos.store'
import { Button } from '@/components/ui/button'
import { CalendarDays, CalendarRange } from 'lucide-react'
import { LessonsTodayOverview } from './lessons-today-overview'
import { LessonsWeekView } from './lessons-week-view'
interface LessonsInstructorViewProps {
canEdit: boolean
}
export function LessonsInstructorView({ canEdit }: LessonsInstructorViewProps) {
const [subView, setSubView] = useState<'today' | 'week'>('today')
const cashier = usePOSStore((s) => s.cashier)
// TODO: Map cashier user ID to instructor ID
// For now, the instructor view shows the same data as desk view
// but filtered by the logged-in user's instructor record
return (
<div className="flex flex-col h-full">
{/* Sub-view toggle */}
<div className="flex items-center gap-1 px-3 py-2 border-b border-border shrink-0 bg-card/50">
<Button
variant={subView === 'today' ? 'default' : 'ghost'}
size="sm"
className="h-8 gap-1.5"
onClick={() => setSubView('today')}
>
<CalendarDays className="h-3.5 w-3.5" />
My Sessions
</Button>
<Button
variant={subView === 'week' ? 'default' : 'ghost'}
size="sm"
className="h-8 gap-1.5"
onClick={() => setSubView('week')}
>
<CalendarRange className="h-3.5 w-3.5" />
Week
</Button>
{cashier && (
<span className="text-xs text-muted-foreground ml-auto">
{cashier.firstName} {cashier.lastName}
</span>
)}
</div>
{/* Content */}
<div className="flex-1 min-h-0 overflow-hidden">
{subView === 'today' && <LessonsTodayOverview canEdit={canEdit} />}
{subView === 'week' && <LessonsWeekView canEdit={canEdit} />}
</div>
</div>
)
}

View File

@@ -0,0 +1,104 @@
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { instructorListOptions, scheduleSlotListOptions } from '@/api/lessons'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Badge } from '@/components/ui/badge'
import type { ScheduleSlot, Instructor } from '@/types/lesson'
const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
const HOURS = Array.from({ length: 14 }, (_, i) => i + 7) // 7 AM to 8 PM
export function LessonsScheduleView() {
const [selectedInstructorId, setSelectedInstructorId] = useState<string>('all')
const { data: instructorsData } = useQuery({
...instructorListOptions({ page: 1, limit: 100, q: undefined, sort: 'name', order: 'asc' }),
})
const instructors = (instructorsData?.data ?? []).filter((i: Instructor) => i.isActive !== false)
const { data: slotsData } = useQuery({
...scheduleSlotListOptions(
{ page: 1, limit: 500, q: undefined, sort: undefined, order: 'asc' },
selectedInstructorId !== 'all' ? { instructorId: selectedInstructorId } : undefined,
),
})
const slots = slotsData?.data ?? []
// Group slots by day
function getSlotsForDay(dayOfWeek: number) {
return slots.filter((s: ScheduleSlot) => s.dayOfWeek === dayOfWeek)
}
function formatTime(time: string) {
const [h, m] = time.split(':').map(Number)
const ampm = h >= 12 ? 'PM' : 'AM'
const hour = h > 12 ? h - 12 : h === 0 ? 12 : h
return `${hour}:${m.toString().padStart(2, '0')} ${ampm}`
}
return (
<div className="flex flex-col h-full">
{/* Controls */}
<div className="flex items-center gap-3 px-3 py-2 border-b border-border shrink-0 bg-card/50">
<span className="text-sm font-medium">Weekly Schedule</span>
<Select value={selectedInstructorId} onValueChange={setSelectedInstructorId}>
<SelectTrigger className="h-8 w-48">
<SelectValue placeholder="All Instructors" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Instructors</SelectItem>
{instructors.map((inst: Instructor) => (
<SelectItem key={inst.id} value={inst.id}>{inst.displayName}</SelectItem>
))}
</SelectContent>
</Select>
<Badge variant="outline" className="text-xs">{slots.length} slots</Badge>
</div>
{/* Weekly grid */}
<div className="flex-1 overflow-auto">
<div className="grid grid-cols-8 min-w-[800px]">
{/* Header row */}
<div className="sticky top-0 bg-card border-b border-r border-border p-2 text-xs font-medium text-muted-foreground z-10" />
{DAYS.map((day) => (
<div key={day} className="sticky top-0 bg-card border-b border-border p-2 text-xs font-medium text-center z-10">
{day.slice(0, 3)}
</div>
))}
{/* Time rows */}
{HOURS.map((hour) => (
<>
<div key={`h-${hour}`} className="border-r border-b border-border p-1 text-xs text-muted-foreground text-right pr-2">
{hour > 12 ? hour - 12 : hour}{hour >= 12 ? 'p' : 'a'}
</div>
{DAYS.map((_, dayIdx) => {
const daySlots = getSlotsForDay(dayIdx).filter((s: ScheduleSlot) => {
const slotHour = parseInt(s.startTime.split(':')[0])
return slotHour === hour
})
return (
<div key={`${hour}-${dayIdx}`} className="border-b border-border min-h-[48px] p-0.5">
{daySlots.map((slot: ScheduleSlot) => {
const instructor = instructors.find((i: Instructor) => i.id === slot.instructorId)
return (
<div
key={slot.id}
className="bg-primary/10 border border-primary/20 rounded px-1.5 py-0.5 text-xs mb-0.5"
>
<div className="font-medium truncate">{formatTime(slot.startTime)}</div>
{instructor && <div className="text-muted-foreground truncate">{instructor.displayName}</div>}
<Badge variant="outline" className="text-[9px] h-4">Open</Badge>
</div>
)
})}
</div>
)
})}
</>
))}
</div>
</div>
</div>
)
}

View File

@@ -0,0 +1,18 @@
import { LessonsDeskView } from './lessons-desk-view'
import { LessonsInstructorView } from './lessons-instructor-view'
interface LessonsStationProps {
permissions: string[]
}
export function LessonsStation({ permissions }: LessonsStationProps) {
const canEdit = permissions.includes('lessons.edit') || permissions.includes('lessons.admin')
// Front desk (admin/edit) gets desk view with full overview
// Instructor (view only) gets focused instructor view
if (canEdit) {
return <LessonsDeskView canEdit={canEdit} />
}
return <LessonsInstructorView canEdit={false} />
}

View File

@@ -0,0 +1,189 @@
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { sessionListOptions } from '@/api/lessons'
import type { LessonSession } from '@/types/lesson'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { SessionDetailPanel } from './session-detail-panel'
import { CheckCircle, Clock, XCircle, AlertCircle } from 'lucide-react'
const STATUS_CONFIG: Record<string, { label: string; color: string; icon: typeof CheckCircle }> = {
scheduled: { label: 'Scheduled', color: 'bg-blue-500/10 text-blue-500', icon: Clock },
attended: { label: 'Attended', color: 'bg-green-500/10 text-green-500', icon: CheckCircle },
missed: { label: 'Missed', color: 'bg-red-500/10 text-red-500', icon: XCircle },
makeup: { label: 'Makeup', color: 'bg-purple-500/10 text-purple-500', icon: Clock },
cancelled: { label: 'Cancelled', color: 'bg-muted text-muted-foreground', icon: XCircle },
}
interface LessonsTodayOverviewProps {
canEdit: boolean
}
export function LessonsTodayOverview({ canEdit }: LessonsTodayOverviewProps) {
const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null)
const [groupBy, setGroupBy] = useState<'time' | 'instructor'>('time')
const today = new Date().toISOString().slice(0, 10)
const { data, isLoading } = useQuery({
...sessionListOptions({
page: 1,
limit: 100,
sort: 'scheduled_time',
order: 'asc',
scheduledDateFrom: today,
scheduledDateTo: today,
}),
staleTime: 30_000,
refetchInterval: 60_000,
})
const sessions = data?.data ?? []
// Check if a session is upcoming (within next 30 min)
function isUpcoming(session: LessonSession) {
if (session.status !== 'scheduled') return false
const now = new Date()
const [hours, minutes] = session.scheduledTime.split(':').map(Number)
const sessionTime = new Date(session.scheduledDate + 'T00:00:00')
sessionTime.setHours(hours, minutes)
const diff = sessionTime.getTime() - now.getTime()
return diff > 0 && diff <= 30 * 60_000
}
// Check if overdue (scheduled, past time)
function isOverdue(session: LessonSession) {
if (session.status !== 'scheduled') return false
const now = new Date()
const [hours, minutes] = session.scheduledTime.split(':').map(Number)
const sessionTime = new Date(session.scheduledDate + 'T00:00:00')
sessionTime.setHours(hours, minutes)
return sessionTime.getTime() < now.getTime()
}
// Group by instructor
const byInstructor = sessions.reduce((acc, s) => {
const name = s.instructorName ?? 'Unassigned'
if (!acc[name]) acc[name] = []
acc[name].push(s)
return acc
}, {} as Record<string, LessonSession[]>)
// Status counts
const scheduled = sessions.filter(s => s.status === 'scheduled').length
const attended = sessions.filter(s => s.status === 'attended').length
const missed = sessions.filter(s => s.status === 'missed').length
return (
<div className="flex flex-col h-full">
{/* Summary bar */}
<div className="flex items-center gap-3 px-3 py-2 border-b border-border shrink-0 bg-card/50">
<span className="text-sm font-medium">Today</span>
<Badge variant="outline" className="text-xs">{sessions.length} sessions</Badge>
{scheduled > 0 && <Badge variant="outline" className="text-xs bg-blue-500/10 text-blue-500">{scheduled} scheduled</Badge>}
{attended > 0 && <Badge variant="outline" className="text-xs bg-green-500/10 text-green-500">{attended} attended</Badge>}
{missed > 0 && <Badge variant="outline" className="text-xs bg-red-500/10 text-red-500">{missed} missed</Badge>}
<div className="flex-1" />
<div className="flex gap-1">
<Button variant={groupBy === 'time' ? 'default' : 'ghost'} size="sm" className="h-7 text-xs" onClick={() => setGroupBy('time')}>By Time</Button>
<Button variant={groupBy === 'instructor' ? 'default' : 'ghost'} size="sm" className="h-7 text-xs" onClick={() => setGroupBy('instructor')}>By Instructor</Button>
</div>
</div>
{/* Split view */}
<div className="flex flex-1 min-h-0">
{/* Session list */}
<div className="w-[40%] border-r border-border overflow-y-auto">
{isLoading ? (
<div className="p-3 space-y-2">
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="h-14 bg-muted animate-pulse rounded-lg" />
))}
</div>
) : sessions.length === 0 ? (
<div className="flex items-center justify-center h-full text-muted-foreground">
<p className="text-sm">No sessions today</p>
</div>
) : groupBy === 'time' ? (
<div className="px-2 py-2 space-y-1">
{sessions.map((session) => (
<SessionRow
key={session.id}
session={session}
selected={selectedSessionId === session.id}
upcoming={isUpcoming(session)}
overdue={isOverdue(session)}
onClick={() => setSelectedSessionId(session.id)}
/>
))}
</div>
) : (
<div className="px-2 py-2 space-y-3">
{Object.entries(byInstructor).map(([instructor, instructorSessions]) => (
<div key={instructor}>
<p className="text-xs font-semibold text-muted-foreground px-2 mb-1">{instructor}</p>
<div className="space-y-1">
{instructorSessions.map((session) => (
<SessionRow
key={session.id}
session={session}
selected={selectedSessionId === session.id}
upcoming={isUpcoming(session)}
overdue={isOverdue(session)}
onClick={() => setSelectedSessionId(session.id)}
/>
))}
</div>
</div>
))}
</div>
)}
</div>
{/* Detail panel */}
<div className="w-[60%] overflow-hidden">
<SessionDetailPanel sessionId={selectedSessionId} canEdit={canEdit} />
</div>
</div>
</div>
)
}
function SessionRow({ session, selected, upcoming, overdue, onClick }: {
session: LessonSession
selected: boolean
upcoming: boolean
overdue: boolean
onClick: () => void
}) {
const cfg = STATUS_CONFIG[session.status] ?? { label: session.status, color: '', icon: Clock }
const StatusIcon = cfg.icon
return (
<button
className={`w-full text-left p-3 rounded-lg transition-colors ${
selected ? 'bg-primary/10 border border-primary/20' :
upcoming ? 'bg-yellow-500/5 border border-yellow-500/20 hover:bg-yellow-500/10' :
overdue ? 'bg-red-500/5 border border-red-500/20 hover:bg-red-500/10' :
'hover:bg-muted border border-transparent'
}`}
onClick={onClick}
>
<div className="flex items-center justify-between mb-0.5">
<span className="text-sm font-medium">{session.scheduledTime}</span>
<div className="flex items-center gap-1">
{overdue && <AlertCircle className="h-3.5 w-3.5 text-red-500" />}
<Badge variant="outline" className={`text-[10px] ${cfg.color}`}>
<StatusIcon className="h-2.5 w-2.5 mr-0.5" />
{cfg.label}
</Badge>
</div>
</div>
<div className="text-sm">{session.memberName ?? 'Unknown'}</div>
<div className="flex items-center justify-between text-xs text-muted-foreground mt-0.5">
<span>{session.lessonTypeName ?? 'Lesson'}</span>
<span>{session.instructorName ?? ''}</span>
</div>
</button>
)
}

View File

@@ -0,0 +1,140 @@
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { sessionListOptions } from '@/api/lessons'
import type { LessonSession } from '@/types/lesson'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import { SessionDetailPanel } from './session-detail-panel'
import { ChevronLeft, ChevronRight } from 'lucide-react'
const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const STATUS_COLORS: Record<string, string> = {
scheduled: 'bg-blue-500/15 border-blue-500/30 text-blue-700 dark:text-blue-300',
attended: 'bg-green-500/15 border-green-500/30 text-green-700 dark:text-green-300',
missed: 'bg-red-500/15 border-red-500/30 text-red-700 dark:text-red-300',
makeup: 'bg-purple-500/15 border-purple-500/30 text-purple-700 dark:text-purple-300',
cancelled: 'bg-muted border-border text-muted-foreground',
}
interface LessonsWeekViewProps {
canEdit: boolean
instructorId?: string
}
export function LessonsWeekView({ canEdit, instructorId }: LessonsWeekViewProps) {
const [weekOffset, setWeekOffset] = useState(0)
const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null)
// Get week start (Monday) and end (Sunday)
const now = new Date()
const monday = new Date(now)
monday.setDate(now.getDate() - ((now.getDay() + 6) % 7) + weekOffset * 7)
monday.setHours(0, 0, 0, 0)
const sunday = new Date(monday)
sunday.setDate(monday.getDate() + 6)
const weekStart = monday.toISOString().slice(0, 10)
const weekEnd = sunday.toISOString().slice(0, 10)
const { data } = useQuery({
...sessionListOptions({
page: 1,
limit: 200,
sort: 'scheduled_time',
order: 'asc',
scheduledDateFrom: weekStart,
scheduledDateTo: weekEnd,
...(instructorId ? { instructorId } : {}),
}),
staleTime: 30_000,
})
const sessions = data?.data ?? []
// Group sessions by date
const byDate = new Map<string, LessonSession[]>()
for (const s of sessions) {
const existing = byDate.get(s.scheduledDate) ?? []
existing.push(s)
byDate.set(s.scheduledDate, existing)
}
// Generate week dates
const weekDates = Array.from({ length: 7 }, (_, i) => {
const d = new Date(monday)
d.setDate(monday.getDate() + i)
return d.toISOString().slice(0, 10)
})
const todayStr = new Date().toISOString().slice(0, 10)
return (
<div className="flex flex-col h-full">
{/* Week navigation */}
<div className="flex items-center justify-between px-3 py-2 border-b border-border shrink-0 bg-card/50">
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setWeekOffset(weekOffset - 1)}>
<ChevronLeft className="h-4 w-4" />
</Button>
<div className="text-sm font-medium">
{monday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} {sunday.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
</div>
<div className="flex gap-1">
{weekOffset !== 0 && (
<Button variant="ghost" size="sm" className="h-8 text-xs" onClick={() => setWeekOffset(0)}>Today</Button>
)}
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setWeekOffset(weekOffset + 1)}>
<ChevronRight className="h-4 w-4" />
</Button>
</div>
</div>
{/* Calendar grid */}
<div className="flex-1 overflow-auto">
<div className="grid grid-cols-7 min-h-full">
{weekDates.map((dateStr, i) => {
const daySessions = byDate.get(dateStr) ?? []
const isToday = dateStr === todayStr
const dayDate = new Date(dateStr + 'T00:00:00')
return (
<div key={dateStr} className={`border-r border-border ${i === 6 ? 'border-r-0' : ''}`}>
{/* Day header */}
<div className={`sticky top-0 z-10 p-2 border-b border-border text-center ${isToday ? 'bg-primary/5' : 'bg-card'}`}>
<div className="text-xs text-muted-foreground">{DAYS[dayDate.getDay()]}</div>
<div className={`text-sm font-medium ${isToday ? 'text-primary' : ''}`}>
{dayDate.getDate()}
</div>
</div>
{/* Sessions */}
<div className="p-1 space-y-1">
{daySessions.map((session) => (
<button
key={session.id}
className={`w-full text-left p-2 rounded border text-xs transition-colors hover:opacity-80 ${STATUS_COLORS[session.status] ?? ''}`}
onClick={() => setSelectedSessionId(session.id)}
>
<div className="font-medium">{session.scheduledTime}</div>
<div className="truncate">{session.memberName ?? 'Unknown'}</div>
<div className="truncate text-muted-foreground">{session.lessonTypeName ?? ''}</div>
</button>
))}
{daySessions.length === 0 && (
<div className="text-xs text-muted-foreground text-center py-4 opacity-30"></div>
)}
</div>
</div>
)
})}
</div>
</div>
{/* Session detail dialog */}
<Dialog open={!!selectedSessionId} onOpenChange={(open) => { if (!open) setSelectedSessionId(null) }}>
<DialogContent className="max-w-lg max-h-[80vh] overflow-hidden p-0">
<SessionDetailPanel sessionId={selectedSessionId} canEdit={canEdit} />
</DialogContent>
</Dialog>
</div>
)
}

View File

@@ -0,0 +1,201 @@
import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { sessionDetailOptions, sessionKeys, sessionMutations, sessionPlanItemsOptions } from '@/api/lessons'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import { CheckCircle, XCircle, Clock, GraduationCap } from 'lucide-react'
import { toast } from 'sonner'
const STATUS_CONFIG: Record<string, { label: string; color: string }> = {
scheduled: { label: 'Scheduled', color: 'bg-blue-500/10 text-blue-500' },
attended: { label: 'Attended', color: 'bg-green-500/10 text-green-500' },
missed: { label: 'Missed', color: 'bg-red-500/10 text-red-500' },
makeup: { label: 'Makeup', color: 'bg-purple-500/10 text-purple-500' },
cancelled: { label: 'Cancelled', color: 'bg-muted text-muted-foreground' },
}
interface SessionDetailPanelProps {
sessionId: string | null
canEdit: boolean
}
export function SessionDetailPanel({ sessionId, canEdit }: SessionDetailPanelProps) {
const queryClient = useQueryClient()
const [notes, setNotes] = useState('')
const [notesLoaded, setNotesLoaded] = useState(false)
const { data: session, isLoading } = useQuery({
...sessionDetailOptions(sessionId ?? ''),
enabled: !!sessionId,
})
const { data: planItems } = useQuery({
...sessionPlanItemsOptions(sessionId ?? ''),
enabled: !!sessionId,
})
// Sync notes from session data
if (session && !notesLoaded) {
setNotes(session.instructorNotes ?? '')
setNotesLoaded(true)
}
const statusMutation = useMutation({
mutationFn: (status: string) => sessionMutations.updateStatus(sessionId!, status),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: sessionKeys.detail(sessionId!) })
queryClient.invalidateQueries({ queryKey: sessionKeys.all })
toast.success('Attendance recorded')
},
onError: (err) => toast.error(err.message),
})
const notesMutation = useMutation({
mutationFn: () => sessionMutations.updateNotes(sessionId!, { instructorNotes: notes }),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: sessionKeys.detail(sessionId!) })
toast.success('Notes saved')
},
onError: (err) => toast.error(err.message),
})
if (!sessionId) {
return (
<div className="flex items-center justify-center h-full text-muted-foreground">
<div className="text-center space-y-2">
<GraduationCap className="h-10 w-10 mx-auto opacity-20" />
<p className="text-sm">Select a session</p>
</div>
</div>
)
}
if (isLoading || !session) {
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>
)
}
const status = STATUS_CONFIG[session.status] ?? { label: session.status, color: '' }
return (
<div className="flex flex-col h-full overflow-hidden">
{/* Header */}
<div className="p-4 border-b border-border shrink-0">
<div className="flex items-center justify-between mb-2">
<div>
<h3 className="text-lg font-semibold">{session.memberName ?? 'Unknown Student'}</h3>
<p className="text-sm text-muted-foreground">
{session.lessonTypeName ?? 'Lesson'} {session.instructorName ?? 'No instructor'}
</p>
</div>
<Badge variant="outline" className={status.color}>{status.label}</Badge>
</div>
<div className="flex items-center gap-4 text-sm text-muted-foreground">
<span>{new Date(session.scheduledDate + 'T00:00:00').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}</span>
<span>{session.scheduledTime}</span>
</div>
</div>
{/* Attendance buttons */}
{canEdit && session.status === 'scheduled' && (
<div className="flex gap-2 p-3 border-b border-border shrink-0 bg-muted/30">
<Button
className="flex-1 h-12 gap-2 bg-green-600 hover:bg-green-700"
onClick={() => statusMutation.mutate('attended')}
disabled={statusMutation.isPending}
>
<CheckCircle className="h-5 w-5" />
Attended
</Button>
<Button
variant="outline"
className="flex-1 h-12 gap-2 text-red-500 border-red-500/30 hover:bg-red-500/10"
onClick={() => statusMutation.mutate('missed')}
disabled={statusMutation.isPending}
>
<XCircle className="h-5 w-5" />
Missed
</Button>
<Button
variant="outline"
className="flex-1 h-12 gap-2"
onClick={() => statusMutation.mutate('cancelled')}
disabled={statusMutation.isPending}
>
<Clock className="h-5 w-5" />
Cancel
</Button>
</div>
)}
{/* Content */}
<div className="flex-1 overflow-y-auto p-4 space-y-4">
{/* Plan items */}
{planItems && planItems.length > 0 && (
<div>
<Label className="text-xs text-muted-foreground">Lesson Plan Items</Label>
<div className="mt-2 space-y-1">
{planItems.map((item) => (
<div key={item.id} className="flex items-center gap-2 py-1 text-sm">
<div className="h-4 w-4 rounded border border-border" />
<span>{item.lessonPlanItemId}</span>
</div>
))}
</div>
</div>
)}
{/* Notes */}
<div className="space-y-2">
<Label className="text-xs text-muted-foreground">Instructor Notes</Label>
<Textarea
value={notes}
onChange={(e) => setNotes(e.target.value)}
placeholder="Session notes, observations, homework..."
rows={4}
disabled={!canEdit}
/>
{canEdit && (
<Button
size="sm"
onClick={() => notesMutation.mutate()}
disabled={notesMutation.isPending || notes === (session.instructorNotes ?? '')}
>
{notesMutation.isPending ? 'Saving...' : 'Save Notes'}
</Button>
)}
</div>
{/* Previous notes */}
{session.homeworkAssigned && (
<div>
<Label className="text-xs text-muted-foreground">Homework Assigned</Label>
<p className="text-sm mt-1">{session.homeworkAssigned}</p>
</div>
)}
{session.nextLessonGoals && (
<div>
<Label className="text-xs text-muted-foreground">Next Lesson Goals</Label>
<p className="text-sm mt-1">{session.nextLessonGoals}</p>
</div>
)}
{session.topicsCovered && session.topicsCovered.length > 0 && (
<div>
<Label className="text-xs text-muted-foreground">Topics Covered</Label>
<div className="flex gap-1.5 flex-wrap mt-1">
{session.topicsCovered.map((topic, i) => (
<Badge key={i} variant="outline" className="text-xs">{topic}</Badge>
))}
</div>
</div>
)}
</div>
</div>
)
}

View File

@@ -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>
)
}

View File

@@ -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>
)
}

View File

@@ -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>
)
}

View File

@@ -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>
)
}

View File

@@ -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>
)
}

View File

@@ -0,0 +1,93 @@
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { api } from '@/lib/api-client'
import { usePOSStore } from '@/stores/pos.store'
import type { RepairTicket } from '@/types/repair'
import type { PaginatedResponse } from '@lunarfront/shared/schemas'
import { RepairWorkbench } from './repair-workbench'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Badge } from '@/components/ui/badge'
import { Wrench } from 'lucide-react'
const STATUS_LABELS: Record<string, string> = {
new: 'New', intake: 'Intake', diagnosing: 'Diagnosing',
pending_approval: 'Pending', approved: 'Approved',
in_progress: 'In Progress', pending_parts: 'Parts',
ready: 'Ready',
}
export function RepairTechView() {
const cashier = usePOSStore((s) => s.cashier)
const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)
// Fetch tickets assigned to current user (active statuses only)
const { data } = useQuery({
queryKey: ['repair-tickets', 'tech-assigned', cashier?.id],
queryFn: () => api.get<PaginatedResponse<RepairTicket>>('/v1/repair-tickets', {
page: 1,
limit: 50,
sort: 'created_at',
order: 'asc',
q: undefined,
// Filter to active statuses — the API will return all if no status filter, we filter client-side
}),
enabled: !!cashier?.id,
staleTime: 15_000,
refetchInterval: 30_000,
})
// Filter to tickets assigned to this technician in active statuses
const activeStatuses = ['diagnosing', 'pending_approval', 'approved', 'in_progress', 'pending_parts', 'ready']
const myTickets = (data?.data ?? []).filter(t =>
t.assignedTechnicianId === cashier?.id && activeStatuses.includes(t.status)
)
// Auto-select first ticket
if (!selectedTicketId && myTickets.length > 0) {
setSelectedTicketId(myTickets[0].id)
}
if (myTickets.length === 0) {
return (
<div className="flex items-center justify-center h-full text-muted-foreground">
<div className="text-center space-y-2">
<Wrench className="h-12 w-12 mx-auto opacity-20" />
<p className="text-lg font-medium">No assigned tickets</p>
<p className="text-sm">Tickets assigned to you will appear here</p>
</div>
</div>
)
}
return (
<div className="flex flex-col h-full">
{/* Ticket selector */}
{myTickets.length > 1 && (
<div className="flex items-center gap-2 px-4 py-2 border-b border-border shrink-0 bg-muted/30">
<span className="text-sm text-muted-foreground">Ticket:</span>
<Select value={selectedTicketId ?? ''} onValueChange={setSelectedTicketId}>
<SelectTrigger className="h-8 w-72">
<SelectValue />
</SelectTrigger>
<SelectContent>
{myTickets.map(t => (
<SelectItem key={t.id} value={t.id}>
<span className="flex items-center gap-2">
#{t.ticketNumber} {t.customerName}
<Badge variant="outline" className="text-[10px]">{STATUS_LABELS[t.status] ?? t.status}</Badge>
</span>
</SelectItem>
))}
</SelectContent>
</Select>
<span className="text-xs text-muted-foreground">{myTickets.length} active</span>
</div>
)}
{/* Workbench */}
<div className="flex-1 min-h-0 overflow-hidden">
{selectedTicketId && <RepairWorkbench ticketId={selectedTicketId} />}
</div>
</div>
)
}

View File

@@ -0,0 +1,323 @@
import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import {
repairTicketDetailOptions, repairTicketKeys, repairTicketMutations,
repairLineItemListOptions, repairLineItemMutations,
repairServiceTemplateListOptions,
repairNoteListOptions, repairNoteMutations,
} from '@/api/repairs'
import { StatusProgress } from '@/components/repairs/status-progress'
import { TicketPhotos } from '@/components/repairs/ticket-photos'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
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 { ChevronRight, Plus, Camera, MessageSquare, Wrench, Trash2 } from 'lucide-react'
import { toast } from 'sonner'
const STATUS_FLOW = ['new', 'intake', 'diagnosing', 'pending_approval', 'approved', 'in_progress', 'ready', 'picked_up']
interface RepairWorkbenchProps {
ticketId: string
}
export function RepairWorkbench({ ticketId }: RepairWorkbenchProps) {
const queryClient = useQueryClient()
const [activeSection, setActiveSection] = useState<'work' | 'parts' | 'photos' | 'notes'>('work')
const [newNote, setNewNote] = useState('')
// Add line item state
const [addingItem, setAddingItem] = useState(false)
const [newItemType, setNewItemType] = useState('part')
const [newItemDesc, setNewItemDesc] = useState('')
const [newItemQty, setNewItemQty] = useState('1')
const [newItemPrice, setNewItemPrice] = useState('')
const { data: ticket } = useQuery({
...repairTicketDetailOptions(ticketId),
staleTime: 15_000,
})
const { data: lineItemsData } = useQuery({
...repairLineItemListOptions(ticketId, { page: 1, limit: 100, q: undefined, sort: undefined, order: 'asc' }),
})
const { data: notesData } = useQuery(repairNoteListOptions(ticketId))
const { data: templatesData } = useQuery({
...repairServiceTemplateListOptions({ page: 1, limit: 50, q: undefined, sort: 'sort_order', order: 'asc' }),
})
const statusMutation = useMutation({
mutationFn: (status: string) => repairTicketMutations.updateStatus(ticketId, status),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: repairTicketKeys.detail(ticketId) })
toast.success('Status updated')
},
onError: (err) => toast.error(err.message),
})
const addNoteMutation = useMutation({
mutationFn: () => repairNoteMutations.create(ticketId, { content: newNote, visibility: 'internal' }),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['repair-tickets', ticketId, 'notes'] })
setNewNote('')
toast.success('Note added')
},
onError: (err) => toast.error(err.message),
})
const addLineItemMutation = useMutation({
mutationFn: () => repairLineItemMutations.create(ticketId, {
itemType: newItemType,
description: newItemDesc,
qty: parseInt(newItemQty) || 1,
unitPrice: parseFloat(newItemPrice) || 0,
}),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['repair-tickets', ticketId, 'line-items'] })
setAddingItem(false)
setNewItemDesc('')
setNewItemPrice('')
toast.success('Item added')
},
onError: (err) => toast.error(err.message),
})
const deleteLineItemMutation = useMutation({
mutationFn: (id: string) => repairLineItemMutations.delete(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['repair-tickets', ticketId, 'line-items'] })
toast.success('Item removed')
},
onError: (err) => toast.error(err.message),
})
if (!ticket) {
return (
<div className="flex items-center justify-center h-full">
<div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
</div>
)
}
const lineItems = lineItemsData?.data ?? []
const notes = notesData?.data ?? []
const templates = templatesData?.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)
return (
<div className="flex flex-col h-full">
{/* Header */}
<div className="p-4 border-b border-border shrink-0 space-y-3">
<div className="flex items-center justify-between">
<div>
<h2 className="text-xl font-bold">#{ticket.ticketNumber}</h2>
<p className="text-sm text-muted-foreground">{ticket.customerName} {ticket.itemDescription ?? 'No item'}</p>
</div>
{nextStatus && !isTerminal && (
<Button size="lg" className="h-12 gap-2 text-base" onClick={() => statusMutation.mutate(nextStatus)}>
Next Step <ChevronRight className="h-5 w-5" />
</Button>
)}
</div>
<StatusProgress currentStatus={ticket.status} onStatusClick={(s) => !isTerminal && statusMutation.mutate(s)} />
</div>
{/* Section toggle */}
<div className="flex gap-1 px-4 py-2 border-b border-border shrink-0 bg-muted/30">
{[
{ key: 'work' as const, icon: Wrench, label: 'Work' },
{ key: 'parts' as const, icon: Plus, label: 'Parts' },
{ key: 'photos' as const, icon: Camera, label: 'Photos' },
{ key: 'notes' as const, icon: MessageSquare, label: `Notes (${notes.length})` },
].map((s) => (
<Button
key={s.key}
variant={activeSection === s.key ? 'default' : 'ghost'}
size="sm"
className="h-9 gap-1.5"
onClick={() => setActiveSection(s.key)}
>
<s.icon className="h-3.5 w-3.5" />
{s.label}
</Button>
))}
</div>
{/* Content */}
<div className="flex-1 overflow-y-auto p-4">
{activeSection === 'work' && (
<div className="space-y-4 max-w-2xl">
<div>
<p className="text-xs font-medium text-muted-foreground mb-1">Problem Description</p>
<p className="text-sm">{ticket.problemDescription}</p>
</div>
{ticket.conditionIn && (
<div>
<p className="text-xs font-medium text-muted-foreground mb-1">Condition at Intake</p>
<Badge variant="outline">{ticket.conditionIn}</Badge>
{ticket.conditionInNotes && <p className="text-sm text-muted-foreground mt-1">{ticket.conditionInNotes}</p>}
</div>
)}
{ticket.technicianNotes && (
<div>
<p className="text-xs font-medium text-muted-foreground mb-1">Technician Notes</p>
<p className="text-sm">{ticket.technicianNotes}</p>
</div>
)}
<Separator />
<div className="flex gap-4">
{ticket.estimatedCost && <div><p className="text-xs text-muted-foreground">Estimate</p><p className="text-lg font-bold">${ticket.estimatedCost}</p></div>}
{ticket.actualCost && <div><p className="text-xs text-muted-foreground">Actual</p><p className="text-lg font-bold">${ticket.actualCost}</p></div>}
{ticket.promisedDate && <div><p className="text-xs text-muted-foreground">Promised</p><p className="text-lg font-bold">{new Date(ticket.promisedDate).toLocaleDateString()}</p></div>}
</div>
</div>
)}
{activeSection === 'parts' && (
<div className="space-y-4 max-w-2xl">
<div className="flex items-center justify-between">
<h3 className="font-medium">Line Items</h3>
<Button size="sm" onClick={() => setAddingItem(true)}>
<Plus className="h-3.5 w-3.5 mr-1" />Add
</Button>
</div>
{/* Template quick-add */}
{templates.length > 0 && (
<div className="flex gap-1.5 flex-wrap">
{templates.slice(0, 8).map(t => (
<Button
key={t.id}
variant="outline"
size="sm"
className="h-8 text-xs"
onClick={async () => {
await repairLineItemMutations.create(ticketId, {
itemType: t.itemType,
description: t.description ?? t.name,
qty: 1,
unitPrice: parseFloat(t.defaultPrice),
})
queryClient.invalidateQueries({ queryKey: ['repair-tickets', ticketId, 'line-items'] })
toast.success(`Added ${t.name}`)
}}
>
{t.name}
</Button>
))}
</div>
)}
{addingItem && (
<div className="flex items-end gap-2 p-3 border rounded-lg bg-muted/30">
<div className="w-24 space-y-1">
<Label className="text-xs">Type</Label>
<Select value={newItemType} onValueChange={setNewItemType}>
<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" value={newItemDesc} onChange={(e) => setNewItemDesc(e.target.value)} />
</div>
<div className="w-16 space-y-1">
<Label className="text-xs">Qty</Label>
<Input className="h-8" type="number" value={newItemQty} onChange={(e) => setNewItemQty(e.target.value)} />
</div>
<div className="w-24 space-y-1">
<Label className="text-xs">Price</Label>
<Input className="h-8" type="number" step="0.01" value={newItemPrice} onChange={(e) => setNewItemPrice(e.target.value)} />
</div>
<Button size="sm" className="h-8" onClick={() => addLineItemMutation.mutate()} disabled={!newItemDesc}>Add</Button>
<Button variant="ghost" size="sm" className="h-8" onClick={() => setAddingItem(false)}>Cancel</Button>
</div>
)}
<div className="space-y-1">
{lineItems.map((item) => (
<div key={item.id} className="flex items-center justify-between py-2 px-3 rounded hover:bg-muted/50">
<div className="flex items-center gap-2">
<Badge variant="outline" className="text-[10px] h-5">{item.itemType}</Badge>
<span className="text-sm">{item.description}</span>
<span className="text-xs text-muted-foreground">x{item.qty}</span>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium">${item.totalPrice}</span>
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => deleteLineItemMutation.mutate(item.id)}>
<Trash2 className="h-3 w-3" />
</Button>
</div>
</div>
))}
{lineItems.length > 0 && (
<>
<Separator />
<div className="flex justify-between px-3 py-2 font-semibold">
<span>Total</span>
<span>${lineItems.reduce((s, i) => s + parseFloat(i.totalPrice), 0).toFixed(2)}</span>
</div>
</>
)}
{lineItems.length === 0 && !addingItem && (
<p className="text-sm text-muted-foreground text-center py-4">No line items yet</p>
)}
</div>
</div>
)}
{activeSection === 'photos' && (
<TicketPhotos ticketId={ticketId} currentStatus={ticket.status} />
)}
{activeSection === 'notes' && (
<div className="space-y-4 max-w-2xl">
<div className="flex gap-2">
<Textarea
value={newNote}
onChange={(e) => setNewNote(e.target.value)}
placeholder="Add a note..."
rows={2}
className="flex-1"
/>
<Button
className="shrink-0"
onClick={() => addNoteMutation.mutate()}
disabled={!newNote.trim() || addNoteMutation.isPending}
>
Add
</Button>
</div>
<div className="space-y-3">
{notes.map((note) => (
<div key={note.id} className="border rounded-lg p-3">
<div className="flex items-center justify-between mb-1">
<span className="text-sm font-medium">{note.authorName}</span>
<span className="text-xs text-muted-foreground">{new Date(note.createdAt).toLocaleString()}</span>
</div>
<p className="text-sm">{note.content}</p>
{note.visibility === 'internal' && <Badge variant="outline" className="text-[10px] mt-1">Internal</Badge>}
</div>
))}
{notes.length === 0 && (
<p className="text-sm text-muted-foreground text-center py-4">No notes yet</p>
)}
</div>
</div>
)}
</div>
</div>
)
}

View File

@@ -0,0 +1,18 @@
import { RepairDeskView } from './repair-desk-view'
import { RepairTechView } from './repair-tech-view'
interface RepairsStationProps {
permissions: string[]
}
export function RepairsStation({ permissions }: RepairsStationProps) {
const canEdit = permissions.includes('repairs.edit')
// Front desk (can edit/intake) gets the desk view with queue + intake
// Technician (view only) gets the focused workbench
if (canEdit) {
return <RepairDeskView canEdit={canEdit} />
}
return <RepairTechView />
}

View File

@@ -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>
)
}

View File

@@ -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}
/>
</>
)
}

View File

@@ -0,0 +1,66 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const alertVariants = cva(
"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
{
variants: {
variant: {
default: "bg-card text-card-foreground",
destructive:
"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Alert({
className,
variant,
...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
return (
<div
data-slot="alert"
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
)
}
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-title"
className={cn(
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
className
)}
{...props}
/>
)
}
function AlertDescription({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-description"
className={cn(
"col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
className
)}
{...props}
/>
)
}
export { Alert, AlertTitle, AlertDescription }

View File

@@ -0,0 +1,46 @@
import * as React from "react"
import { Popover as PopoverPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Popover({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
return <PopoverPrimitive.Root data-slot="popover" {...props} />
}
function PopoverTrigger({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}
function PopoverContent({
className,
align = "center",
sideOffset = 4,
...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
return (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
data-slot="popover-content"
align={align}
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
className
)}
{...props}
/>
</PopoverPrimitive.Portal>
)
}
function PopoverAnchor({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

View File

@@ -23,12 +23,13 @@ export function usePagination() {
function setParams(updates: Partial<PaginationSearch>) { function setParams(updates: Partial<PaginationSearch>) {
navigate({ navigate({
search: ((prev: Record<string, unknown>) => ({ // @ts-expect-error: navigate without a route context resolves search as never; safe here since we use strict:false
search: (prev: any) => ({
...prev, ...prev,
...updates, ...updates,
// Reset to page 1 when search or sort changes // Reset to page 1 when search or sort changes
page: updates.q !== undefined || updates.sort !== undefined ? 1 : (updates.page ?? (prev as PaginationSearch).page), page: updates.q !== undefined || updates.sort !== undefined ? 1 : (updates.page ?? (prev as PaginationSearch).page),
})) as (prev: Record<string, unknown>) => Record<string, unknown>, }),
replace: true, replace: true,
}) })
} }

View File

@@ -1,4 +1,5 @@
import { useAuthStore } from '@/stores/auth.store' import { useAuthStore } from '@/stores/auth.store'
import { usePOSStore } from '@/stores/pos.store'
class ApiError extends Error { class ApiError extends Error {
statusCode: number statusCode: number
@@ -13,7 +14,8 @@ class ApiError extends Error {
} }
async function request<T>(method: string, path: string, body?: unknown): Promise<T> { async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
const { token } = useAuthStore.getState() // Use POS token if available (POS screen), otherwise admin token
const token = usePOSStore.getState().token ?? useAuthStore.getState().token
const headers: Record<string, string> = {} const headers: Record<string, string> = {}
@@ -32,9 +34,12 @@ async function request<T>(method: string, path: string, body?: unknown): Promise
}) })
if (res.status === 401) { if (res.status === 401) {
useAuthStore.getState().logout() // On POS, lock the screen instead of logging out admin
// Don't use window.location — that causes a full reload and flash if (usePOSStore.getState().token) {
// The router's beforeLoad guard will redirect to /login on next navigation usePOSStore.getState().lock()
} else {
useAuthStore.getState().logout()
}
throw new ApiError('Unauthorized', 401) throw new ApiError('Unauthorized', 401)
} }

View File

@@ -9,6 +9,8 @@
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. // 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 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 PosRouteImport } from './routes/pos'
import { Route as LoginRouteImport } from './routes/login' import { Route as LoginRouteImport } from './routes/login'
import { Route as AuthenticatedRouteImport } from './routes/_authenticated' import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
@@ -27,6 +29,7 @@ import { Route as AuthenticatedFilesIndexRouteImport } from './routes/_authentic
import { Route as AuthenticatedAccountsIndexRouteImport } from './routes/_authenticated/accounts/index' import { Route as AuthenticatedAccountsIndexRouteImport } from './routes/_authenticated/accounts/index'
import { Route as AuthenticatedRolesNewRouteImport } from './routes/_authenticated/roles/new' import { Route as AuthenticatedRolesNewRouteImport } from './routes/_authenticated/roles/new'
import { Route as AuthenticatedRolesRoleIdRouteImport } from './routes/_authenticated/roles/$roleId' import { Route as AuthenticatedRolesRoleIdRouteImport } from './routes/_authenticated/roles/$roleId'
import { Route as AuthenticatedReportsDailyRouteImport } from './routes/_authenticated/reports/daily'
import { Route as AuthenticatedRepairsTemplatesRouteImport } from './routes/_authenticated/repairs/templates' import { Route as AuthenticatedRepairsTemplatesRouteImport } from './routes/_authenticated/repairs/templates'
import { Route as AuthenticatedRepairsNewRouteImport } from './routes/_authenticated/repairs/new' import { Route as AuthenticatedRepairsNewRouteImport } from './routes/_authenticated/repairs/new'
import { Route as AuthenticatedRepairsTicketIdRouteImport } from './routes/_authenticated/repairs/$ticketId' import { Route as AuthenticatedRepairsTicketIdRouteImport } from './routes/_authenticated/repairs/$ticketId'
@@ -57,6 +60,16 @@ import { Route as AuthenticatedAccountsAccountIdMembersRouteImport } from './rou
import { Route as AuthenticatedAccountsAccountIdEnrollmentsRouteImport } from './routes/_authenticated/accounts/$accountId/enrollments' import { Route as AuthenticatedAccountsAccountIdEnrollmentsRouteImport } from './routes/_authenticated/accounts/$accountId/enrollments'
import { Route as AuthenticatedLessonsScheduleInstructorsInstructorIdRouteImport } from './routes/_authenticated/lessons/schedule/instructors/$instructorId' 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',
getParentRoute: () => rootRouteImport,
} as any)
const PosRoute = PosRouteImport.update({ const PosRoute = PosRouteImport.update({
id: '/pos', id: '/pos',
path: '/pos', path: '/pos',
@@ -152,6 +165,12 @@ const AuthenticatedRolesRoleIdRoute =
path: '/roles/$roleId', path: '/roles/$roleId',
getParentRoute: () => AuthenticatedRoute, getParentRoute: () => AuthenticatedRoute,
} as any) } as any)
const AuthenticatedReportsDailyRoute =
AuthenticatedReportsDailyRouteImport.update({
id: '/reports/daily',
path: '/reports/daily',
getParentRoute: () => AuthenticatedRoute,
} as any)
const AuthenticatedRepairsTemplatesRoute = const AuthenticatedRepairsTemplatesRoute =
AuthenticatedRepairsTemplatesRouteImport.update({ AuthenticatedRepairsTemplatesRouteImport.update({
id: '/repairs/templates', id: '/repairs/templates',
@@ -330,6 +349,8 @@ export interface FileRoutesByFullPath {
'/': typeof AuthenticatedIndexRoute '/': typeof AuthenticatedIndexRoute
'/login': typeof LoginRoute '/login': typeof LoginRoute
'/pos': typeof PosRoute '/pos': typeof PosRoute
'/reset-password': typeof ResetPasswordRoute
'/station': typeof StationRoute
'/help': typeof AuthenticatedHelpRoute '/help': typeof AuthenticatedHelpRoute
'/profile': typeof AuthenticatedProfileRoute '/profile': typeof AuthenticatedProfileRoute
'/settings': typeof AuthenticatedSettingsRoute '/settings': typeof AuthenticatedSettingsRoute
@@ -344,6 +365,7 @@ export interface FileRoutesByFullPath {
'/repairs/$ticketId': typeof AuthenticatedRepairsTicketIdRoute '/repairs/$ticketId': typeof AuthenticatedRepairsTicketIdRoute
'/repairs/new': typeof AuthenticatedRepairsNewRoute '/repairs/new': typeof AuthenticatedRepairsNewRoute
'/repairs/templates': typeof AuthenticatedRepairsTemplatesRoute '/repairs/templates': typeof AuthenticatedRepairsTemplatesRoute
'/reports/daily': typeof AuthenticatedReportsDailyRoute
'/roles/$roleId': typeof AuthenticatedRolesRoleIdRoute '/roles/$roleId': typeof AuthenticatedRolesRoleIdRoute
'/roles/new': typeof AuthenticatedRolesNewRoute '/roles/new': typeof AuthenticatedRolesNewRoute
'/accounts/': typeof AuthenticatedAccountsIndexRoute '/accounts/': typeof AuthenticatedAccountsIndexRoute
@@ -377,6 +399,8 @@ export interface FileRoutesByFullPath {
export interface FileRoutesByTo { export interface FileRoutesByTo {
'/login': typeof LoginRoute '/login': typeof LoginRoute
'/pos': typeof PosRoute '/pos': typeof PosRoute
'/reset-password': typeof ResetPasswordRoute
'/station': typeof StationRoute
'/help': typeof AuthenticatedHelpRoute '/help': typeof AuthenticatedHelpRoute
'/profile': typeof AuthenticatedProfileRoute '/profile': typeof AuthenticatedProfileRoute
'/settings': typeof AuthenticatedSettingsRoute '/settings': typeof AuthenticatedSettingsRoute
@@ -391,6 +415,7 @@ export interface FileRoutesByTo {
'/repairs/$ticketId': typeof AuthenticatedRepairsTicketIdRoute '/repairs/$ticketId': typeof AuthenticatedRepairsTicketIdRoute
'/repairs/new': typeof AuthenticatedRepairsNewRoute '/repairs/new': typeof AuthenticatedRepairsNewRoute
'/repairs/templates': typeof AuthenticatedRepairsTemplatesRoute '/repairs/templates': typeof AuthenticatedRepairsTemplatesRoute
'/reports/daily': typeof AuthenticatedReportsDailyRoute
'/roles/$roleId': typeof AuthenticatedRolesRoleIdRoute '/roles/$roleId': typeof AuthenticatedRolesRoleIdRoute
'/roles/new': typeof AuthenticatedRolesNewRoute '/roles/new': typeof AuthenticatedRolesNewRoute
'/accounts': typeof AuthenticatedAccountsIndexRoute '/accounts': typeof AuthenticatedAccountsIndexRoute
@@ -426,6 +451,8 @@ export interface FileRoutesById {
'/_authenticated': typeof AuthenticatedRouteWithChildren '/_authenticated': typeof AuthenticatedRouteWithChildren
'/login': typeof LoginRoute '/login': typeof LoginRoute
'/pos': typeof PosRoute '/pos': typeof PosRoute
'/reset-password': typeof ResetPasswordRoute
'/station': typeof StationRoute
'/_authenticated/help': typeof AuthenticatedHelpRoute '/_authenticated/help': typeof AuthenticatedHelpRoute
'/_authenticated/profile': typeof AuthenticatedProfileRoute '/_authenticated/profile': typeof AuthenticatedProfileRoute
'/_authenticated/settings': typeof AuthenticatedSettingsRoute '/_authenticated/settings': typeof AuthenticatedSettingsRoute
@@ -441,6 +468,7 @@ export interface FileRoutesById {
'/_authenticated/repairs/$ticketId': typeof AuthenticatedRepairsTicketIdRoute '/_authenticated/repairs/$ticketId': typeof AuthenticatedRepairsTicketIdRoute
'/_authenticated/repairs/new': typeof AuthenticatedRepairsNewRoute '/_authenticated/repairs/new': typeof AuthenticatedRepairsNewRoute
'/_authenticated/repairs/templates': typeof AuthenticatedRepairsTemplatesRoute '/_authenticated/repairs/templates': typeof AuthenticatedRepairsTemplatesRoute
'/_authenticated/reports/daily': typeof AuthenticatedReportsDailyRoute
'/_authenticated/roles/$roleId': typeof AuthenticatedRolesRoleIdRoute '/_authenticated/roles/$roleId': typeof AuthenticatedRolesRoleIdRoute
'/_authenticated/roles/new': typeof AuthenticatedRolesNewRoute '/_authenticated/roles/new': typeof AuthenticatedRolesNewRoute
'/_authenticated/accounts/': typeof AuthenticatedAccountsIndexRoute '/_authenticated/accounts/': typeof AuthenticatedAccountsIndexRoute
@@ -477,6 +505,8 @@ export interface FileRouteTypes {
| '/' | '/'
| '/login' | '/login'
| '/pos' | '/pos'
| '/reset-password'
| '/station'
| '/help' | '/help'
| '/profile' | '/profile'
| '/settings' | '/settings'
@@ -491,6 +521,7 @@ export interface FileRouteTypes {
| '/repairs/$ticketId' | '/repairs/$ticketId'
| '/repairs/new' | '/repairs/new'
| '/repairs/templates' | '/repairs/templates'
| '/reports/daily'
| '/roles/$roleId' | '/roles/$roleId'
| '/roles/new' | '/roles/new'
| '/accounts/' | '/accounts/'
@@ -524,6 +555,8 @@ export interface FileRouteTypes {
to: to:
| '/login' | '/login'
| '/pos' | '/pos'
| '/reset-password'
| '/station'
| '/help' | '/help'
| '/profile' | '/profile'
| '/settings' | '/settings'
@@ -538,6 +571,7 @@ export interface FileRouteTypes {
| '/repairs/$ticketId' | '/repairs/$ticketId'
| '/repairs/new' | '/repairs/new'
| '/repairs/templates' | '/repairs/templates'
| '/reports/daily'
| '/roles/$roleId' | '/roles/$roleId'
| '/roles/new' | '/roles/new'
| '/accounts' | '/accounts'
@@ -572,6 +606,8 @@ export interface FileRouteTypes {
| '/_authenticated' | '/_authenticated'
| '/login' | '/login'
| '/pos' | '/pos'
| '/reset-password'
| '/station'
| '/_authenticated/help' | '/_authenticated/help'
| '/_authenticated/profile' | '/_authenticated/profile'
| '/_authenticated/settings' | '/_authenticated/settings'
@@ -587,6 +623,7 @@ export interface FileRouteTypes {
| '/_authenticated/repairs/$ticketId' | '/_authenticated/repairs/$ticketId'
| '/_authenticated/repairs/new' | '/_authenticated/repairs/new'
| '/_authenticated/repairs/templates' | '/_authenticated/repairs/templates'
| '/_authenticated/reports/daily'
| '/_authenticated/roles/$roleId' | '/_authenticated/roles/$roleId'
| '/_authenticated/roles/new' | '/_authenticated/roles/new'
| '/_authenticated/accounts/' | '/_authenticated/accounts/'
@@ -622,10 +659,26 @@ export interface RootRouteChildren {
AuthenticatedRoute: typeof AuthenticatedRouteWithChildren AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
LoginRoute: typeof LoginRoute LoginRoute: typeof LoginRoute
PosRoute: typeof PosRoute PosRoute: typeof PosRoute
ResetPasswordRoute: typeof ResetPasswordRoute
StationRoute: typeof StationRoute
} }
declare module '@tanstack/react-router' { declare module '@tanstack/react-router' {
interface FileRoutesByPath { interface FileRoutesByPath {
'/station': {
id: '/station'
path: '/station'
fullPath: '/station'
preLoaderRoute: typeof StationRouteImport
parentRoute: typeof rootRouteImport
}
'/reset-password': {
id: '/reset-password'
path: '/reset-password'
fullPath: '/reset-password'
preLoaderRoute: typeof ResetPasswordRouteImport
parentRoute: typeof rootRouteImport
}
'/pos': { '/pos': {
id: '/pos' id: '/pos'
path: '/pos' path: '/pos'
@@ -752,6 +805,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof AuthenticatedRolesRoleIdRouteImport preLoaderRoute: typeof AuthenticatedRolesRoleIdRouteImport
parentRoute: typeof AuthenticatedRoute parentRoute: typeof AuthenticatedRoute
} }
'/_authenticated/reports/daily': {
id: '/_authenticated/reports/daily'
path: '/reports/daily'
fullPath: '/reports/daily'
preLoaderRoute: typeof AuthenticatedReportsDailyRouteImport
parentRoute: typeof AuthenticatedRoute
}
'/_authenticated/repairs/templates': { '/_authenticated/repairs/templates': {
id: '/_authenticated/repairs/templates' id: '/_authenticated/repairs/templates'
path: '/repairs/templates' path: '/repairs/templates'
@@ -1004,6 +1064,7 @@ interface AuthenticatedRouteChildren {
AuthenticatedRepairsTicketIdRoute: typeof AuthenticatedRepairsTicketIdRoute AuthenticatedRepairsTicketIdRoute: typeof AuthenticatedRepairsTicketIdRoute
AuthenticatedRepairsNewRoute: typeof AuthenticatedRepairsNewRoute AuthenticatedRepairsNewRoute: typeof AuthenticatedRepairsNewRoute
AuthenticatedRepairsTemplatesRoute: typeof AuthenticatedRepairsTemplatesRoute AuthenticatedRepairsTemplatesRoute: typeof AuthenticatedRepairsTemplatesRoute
AuthenticatedReportsDailyRoute: typeof AuthenticatedReportsDailyRoute
AuthenticatedRolesRoleIdRoute: typeof AuthenticatedRolesRoleIdRoute AuthenticatedRolesRoleIdRoute: typeof AuthenticatedRolesRoleIdRoute
AuthenticatedRolesNewRoute: typeof AuthenticatedRolesNewRoute AuthenticatedRolesNewRoute: typeof AuthenticatedRolesNewRoute
AuthenticatedAccountsIndexRoute: typeof AuthenticatedAccountsIndexRoute AuthenticatedAccountsIndexRoute: typeof AuthenticatedAccountsIndexRoute
@@ -1047,6 +1108,7 @@ const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
AuthenticatedRepairsTicketIdRoute: AuthenticatedRepairsTicketIdRoute, AuthenticatedRepairsTicketIdRoute: AuthenticatedRepairsTicketIdRoute,
AuthenticatedRepairsNewRoute: AuthenticatedRepairsNewRoute, AuthenticatedRepairsNewRoute: AuthenticatedRepairsNewRoute,
AuthenticatedRepairsTemplatesRoute: AuthenticatedRepairsTemplatesRoute, AuthenticatedRepairsTemplatesRoute: AuthenticatedRepairsTemplatesRoute,
AuthenticatedReportsDailyRoute: AuthenticatedReportsDailyRoute,
AuthenticatedRolesRoleIdRoute: AuthenticatedRolesRoleIdRoute, AuthenticatedRolesRoleIdRoute: AuthenticatedRolesRoleIdRoute,
AuthenticatedRolesNewRoute: AuthenticatedRolesNewRoute, AuthenticatedRolesNewRoute: AuthenticatedRolesNewRoute,
AuthenticatedAccountsIndexRoute: AuthenticatedAccountsIndexRoute, AuthenticatedAccountsIndexRoute: AuthenticatedAccountsIndexRoute,
@@ -1090,6 +1152,8 @@ const rootRouteChildren: RootRouteChildren = {
AuthenticatedRoute: AuthenticatedRouteWithChildren, AuthenticatedRoute: AuthenticatedRouteWithChildren,
LoginRoute: LoginRoute, LoginRoute: LoginRoute,
PosRoute: PosRoute, PosRoute: PosRoute,
ResetPasswordRoute: ResetPasswordRoute,
StationRoute: StationRoute,
} }
export const routeTree = rootRouteImport export const routeTree = rootRouteImport
._addFileChildren(rootRouteChildren) ._addFileChildren(rootRouteChildren)

View File

@@ -1,11 +1,29 @@
import { createRootRoute, Outlet } from '@tanstack/react-router' import { createRootRoute, Outlet } from '@tanstack/react-router'
import { Toaster } from 'sonner' import { Toaster } from 'sonner'
import { useEffect } from 'react'
export const Route = createRootRoute({ export const Route = createRootRoute({
component: RootLayout, component: RootLayout,
}) })
function RootLayout() { function RootLayout() {
useEffect(() => {
fetch('/v1/store/branding')
.then((r) => r.ok ? r.json() : null)
.then((data: { name: string | null; hasLogo: boolean } | null) => {
if (!data) return
if (data.name) document.title = data.name
if (data.hasLogo) {
const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
?? document.createElement('link')
link.rel = 'icon'
link.href = '/v1/store/logo'
document.head.appendChild(link)
}
})
.catch(() => {})
}, [])
return ( return (
<> <>
<Outlet /> <Outlet />

View File

@@ -1,5 +1,5 @@
import { createFileRoute, Outlet, Link, redirect, useRouter } from '@tanstack/react-router' import { createFileRoute, Outlet, Link, redirect, useRouter } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query' import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query'
import { queryOptions } from '@tanstack/react-query' import { queryOptions } from '@tanstack/react-query'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { api } from '@/lib/api-client' import { api } from '@/lib/api-client'
@@ -9,6 +9,9 @@ import { moduleListOptions } from '@/api/modules'
import { Avatar } from '@/components/shared/avatar-upload' import { Avatar } from '@/components/shared/avatar-upload'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Users, UserRound, HelpCircle, Shield, UserCog, LogOut, User, Wrench, Package, ClipboardList, FolderOpen, KeyRound, Settings, PanelLeftClose, PanelLeft, CalendarDays, GraduationCap, CalendarRange, BookOpen, BookMarked, Package2, Tag, Truck, ShoppingCart } from 'lucide-react' import { Users, UserRound, HelpCircle, Shield, UserCog, LogOut, User, Wrench, Package, ClipboardList, FolderOpen, KeyRound, Settings, PanelLeftClose, PanelLeft, CalendarDays, GraduationCap, CalendarRange, BookOpen, BookMarked, Package2, Tag, Truck, ShoppingCart } from 'lucide-react'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { toast } from 'sonner'
export const Route = createFileRoute('/_authenticated')({ export const Route = createFileRoute('/_authenticated')({
beforeLoad: () => { beforeLoad: () => {
@@ -67,7 +70,7 @@ function NavLink({ to, icon, label, collapsed }: { to: string; icon: React.React
return ( return (
<Link <Link
to={to as '/accounts'} to={to as '/accounts'}
search={{} as Record<string, unknown>} search={{ page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const }}
className="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent" className="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent"
activeProps={{ className: 'flex items-center gap-2 px-3 py-2 rounded-md text-sm bg-sidebar-accent text-sidebar-accent-foreground' }} activeProps={{ className: 'flex items-center gap-2 px-3 py-2 rounded-md text-sm bg-sidebar-accent text-sidebar-accent-foreground' }}
title={collapsed ? label : undefined} title={collapsed ? label : undefined}
@@ -104,6 +107,58 @@ function NavGroup({ label, children, collapsed }: { label: string; children: Rea
) )
} }
function SetPinModal() {
const queryClient = useQueryClient()
const [pin, setPin] = useState('')
const [confirmPin, setConfirmPin] = useState('')
const [error, setError] = useState('')
const setPinMutation = useMutation({
mutationFn: () => api.post('/v1/auth/set-pin', { pin }),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
toast.success('PIN set successfully')
},
onError: (err) => setError(err.message),
})
function handleSubmit(e: React.FormEvent) {
e.preventDefault()
setError('')
if (pin.length < 4 || pin.length > 6) { setError('PIN must be 4-6 digits'); return }
if (!/^\d+$/.test(pin)) { setError('PIN must be digits only'); return }
if (pin !== confirmPin) { setError('PINs do not match'); return }
setPinMutation.mutate()
}
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
<div className="w-full max-w-sm rounded-xl border bg-card p-6 shadow-xl">
<h2 className="text-lg font-semibold mb-1">Set your POS PIN</h2>
<p className="text-sm text-muted-foreground mb-4">
A PIN is required to use the Point of Sale. Choose a 4-6 digit PIN you'll use to unlock the terminal.
</p>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>PIN</Label>
<Input type="password" inputMode="numeric" maxLength={6} value={pin} onChange={(e) => setPin(e.target.value)} placeholder="****" autoFocus />
</div>
<div className="space-y-2">
<Label>Confirm PIN</Label>
<Input type="password" inputMode="numeric" maxLength={6} value={confirmPin} onChange={(e) => setConfirmPin(e.target.value)} placeholder="****" />
</div>
</div>
{error && <p className="text-sm text-destructive">{error}</p>}
<Button type="submit" className="w-full" disabled={setPinMutation.isPending}>
{setPinMutation.isPending ? 'Setting...' : 'Set PIN'}
</Button>
</form>
</div>
</div>
)
}
function AuthenticatedLayout() { function AuthenticatedLayout() {
const router = useRouter() const router = useRouter()
const user = useAuthStore((s) => s.user) const user = useAuthStore((s) => s.user)
@@ -112,6 +167,13 @@ function AuthenticatedLayout() {
const setPermissions = useAuthStore((s) => s.setPermissions) const setPermissions = useAuthStore((s) => s.setPermissions)
const permissionsLoaded = useAuthStore((s) => s.permissionsLoaded) const permissionsLoaded = useAuthStore((s) => s.permissionsLoaded)
// Fetch profile for PIN warning
const { data: profile } = useQuery(queryOptions({
queryKey: ['auth', 'me'],
queryFn: () => api.get<{ hasPin: boolean }>('/v1/auth/me'),
enabled: !!useAuthStore.getState().token,
}))
// Fetch permissions on mount // Fetch permissions on mount
const { data: permData } = useQuery({ const { data: permData } = useQuery({
...myPermissionsOptions(), ...myPermissionsOptions(),
@@ -176,7 +238,14 @@ function AuthenticatedLayout() {
<div className="flex-1 overflow-y-auto px-2 space-y-1 scrollbar-thin"> <div className="flex-1 overflow-y-auto px-2 space-y-1 scrollbar-thin">
{isModuleEnabled('pos') && canViewPOS && ( {isModuleEnabled('pos') && canViewPOS && (
<div className="mb-2"> <div className="mb-2">
<NavLink to="/pos" icon={<ShoppingCart className="h-4 w-4" />} label="Point of Sale" collapsed={collapsed} /> <button
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}
>
<ShoppingCart className="h-4 w-4" />
{!collapsed && 'Point of Sale'}
</button>
</div> </div>
)} )}
{canViewAccounts && ( {canViewAccounts && (
@@ -256,6 +325,7 @@ function AuthenticatedLayout() {
</div> </div>
</nav> </nav>
<main className="flex-1 p-6 min-h-screen"> <main className="flex-1 p-6 min-h-screen">
{profile && !profile.hasPin && <SetPinModal />}
<Outlet /> <Outlet />
</main> </main>
</div> </div>

View File

@@ -41,7 +41,7 @@ function AccountEnrollmentsTab() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground">{data?.pagination.total ?? 0} enrollment(s)</p> <p className="text-sm text-muted-foreground">{data?.pagination.total ?? 0} enrollment(s)</p>
{hasPermission('lessons.edit') && ( {hasPermission('lessons.edit') && (
<Button size="sm" onClick={() => navigate({ to: '/lessons/enrollments/new', search: {} as Record<string, unknown> })}> <Button size="sm" onClick={() => navigate({ to: '/lessons/enrollments/new', search: { memberId: undefined, accountId: undefined } })}>
<Plus className="h-4 w-4 mr-1" />Enroll a Member <Plus className="h-4 w-4 mr-1" />Enroll a Member
</Button> </Button>
)} )}
@@ -55,7 +55,7 @@ function AccountEnrollmentsTab() {
total={data?.data?.length ?? 0} total={data?.data?.length ?? 0}
onPageChange={() => {}} onPageChange={() => {}}
onSort={() => {}} onSort={() => {}}
onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: {} as Record<string, unknown> })} onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: { tab: 'details' } })}
/> />
</div> </div>
) )

View File

@@ -281,7 +281,7 @@ function MembersTab() {
<DropdownMenuItem onClick={() => navigate({ <DropdownMenuItem onClick={() => navigate({
to: '/members/$memberId', to: '/members/$memberId',
params: { memberId: m.id }, params: { memberId: m.id },
search: {} as Record<string, unknown>, search: { tab: 'details' },
})}> })}>
<Pencil className="mr-2 h-4 w-4" /> <Pencil className="mr-2 h-4 w-4" />
Edit Edit

View File

@@ -2,6 +2,6 @@ import { createFileRoute, redirect } from '@tanstack/react-router'
export const Route = createFileRoute('/_authenticated/')({ export const Route = createFileRoute('/_authenticated/')({
beforeLoad: () => { beforeLoad: () => {
throw redirect({ to: '/accounts', search: {} as Record<string, unknown> }) throw redirect({ to: '/accounts', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
}, },
}) })

View File

@@ -159,7 +159,7 @@ function ProductDetailPage() {
}) })
function setTab(t: string) { function setTab(t: string) {
navigate({ to: '/inventory/$productId', params: { productId }, search: { tab: t } as Record<string, unknown> }) navigate({ to: '/inventory/$productId', params: { productId }, search: { tab: t } })
} }
function handleQtySave() { function handleQtySave() {
@@ -192,7 +192,7 @@ function ProductDetailPage() {
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/inventory', search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/inventory', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const, categoryId: undefined, isActive: undefined, type: undefined, lowStock: undefined } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<div className="min-w-0"> <div className="min-w-0">

View File

@@ -71,7 +71,7 @@ function InventoryPage() {
queryClient.invalidateQueries({ queryKey: productKeys.all }) queryClient.invalidateQueries({ queryKey: productKeys.all })
toast.success('Product created') toast.success('Product created')
setCreateOpen(false) setCreateOpen(false)
navigate({ to: '/inventory/$productId', params: { productId: product.id }, search: {} as Record<string, unknown> }) navigate({ to: '/inventory/$productId', params: { productId: product.id }, search: { tab: 'details' } })
}, },
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })
@@ -83,23 +83,23 @@ function InventoryPage() {
function handleCategoryChange(v: string) { function handleCategoryChange(v: string) {
setCategoryFilter(v === 'all' ? '' : v) setCategoryFilter(v === 'all' ? '' : v)
navigate({ to: '/inventory', search: { ...search, categoryId: v === 'all' ? undefined : v, page: 1 } as Record<string, unknown> }) navigate({ to: '/inventory', search: { ...search, categoryId: v === 'all' ? undefined : v, page: 1 } })
} }
function handleActiveChange(v: string) { function handleActiveChange(v: string) {
setActiveFilter(v === 'all' ? '' : v) setActiveFilter(v === 'all' ? '' : v)
navigate({ to: '/inventory', search: { ...search, isActive: v === 'all' ? undefined : v, page: 1 } as Record<string, unknown> }) navigate({ to: '/inventory', search: { ...search, isActive: v === 'all' ? undefined : v, page: 1 } })
} }
function handleTypeChange(v: string) { function handleTypeChange(v: string) {
setTypeFilter(v === 'all' ? '' : v) setTypeFilter(v === 'all' ? '' : v)
navigate({ to: '/inventory', search: { ...search, type: v === 'all' ? undefined : v, page: 1 } as Record<string, unknown> }) navigate({ to: '/inventory', search: { ...search, type: v === 'all' ? undefined : v, page: 1 } })
} }
function handleLowStockChange(v: string) { function handleLowStockChange(v: string) {
const on = v === 'true' const on = v === 'true'
setLowStockFilter(on) setLowStockFilter(on)
navigate({ to: '/inventory', search: { ...search, lowStock: on ? 'true' : undefined, page: 1 } as Record<string, unknown> }) navigate({ to: '/inventory', search: { ...search, lowStock: on ? 'true' : undefined, page: 1 } })
} }
const columns: Column<Product>[] = [ const columns: Column<Product>[] = [
@@ -246,7 +246,7 @@ function InventoryPage() {
order={params.order} order={params.order}
onPageChange={setPage} onPageChange={setPage}
onSort={setSort} onSort={setSort}
onRowClick={(p) => navigate({ to: '/inventory/$productId', params: { productId: p.id }, search: {} as Record<string, unknown> })} onRowClick={(p) => navigate({ to: '/inventory/$productId', params: { productId: p.id }, search: { tab: 'details' } })}
/> />
</div> </div>
) )

View File

@@ -81,7 +81,7 @@ function EnrollmentDetailPage() {
const tab = search.tab const tab = search.tab
function setTab(t: string) { function setTab(t: string) {
navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId }, search: { tab: t } as Record<string, unknown> }) navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId }, search: { tab: t } })
} }
const { data: enrollment, isLoading } = useQuery(enrollmentDetailOptions(enrollmentId)) const { data: enrollment, isLoading } = useQuery(enrollmentDetailOptions(enrollmentId))
@@ -131,7 +131,7 @@ function EnrollmentDetailPage() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/enrollments', search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/enrollments', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'desc' as const, status: undefined, instructorId: undefined } })}>
<ArrowLeft className="h-4 w-4 mr-1" />Back <ArrowLeft className="h-4 w-4 mr-1" />Back
</Button> </Button>
<div className="flex-1"> <div className="flex-1">
@@ -265,7 +265,7 @@ function DetailsTab({
onChange={(e) => setBillingInterval(e.target.value)} onChange={(e) => setBillingInterval(e.target.value)}
className="w-20" className="w-20"
/> />
<Select value={billingUnit} onValueChange={setBillingUnit}> <Select value={billingUnit} onValueChange={(v) => setBillingUnit(v as typeof billingUnit)}>
<SelectTrigger className="w-36"><SelectValue /></SelectTrigger> <SelectTrigger className="w-36"><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
{BILLING_UNITS.map((u) => ( {BILLING_UNITS.map((u) => (
@@ -344,7 +344,7 @@ function SessionsTab({ enrollmentId, onGenerate, generating }: { enrollmentId: s
total={data?.data?.length ?? 0} total={data?.data?.length ?? 0}
onPageChange={() => {}} onPageChange={() => {}}
onSort={() => {}} onSort={() => {}}
onRowClick={(s) => navigate({ to: '/lessons/sessions/$sessionId', params: { sessionId: s.id }, search: {} as Record<string, unknown> })} onRowClick={(s) => navigate({ to: '/lessons/sessions/$sessionId', params: { sessionId: s.id }, search: {} })}
/> />
</div> </div>
) )
@@ -383,7 +383,7 @@ function LessonPlanTab({ enrollmentId, memberId, canEdit }: { enrollmentId: stri
queryClient.invalidateQueries({ queryKey: lessonPlanKeys.all }) queryClient.invalidateQueries({ queryKey: lessonPlanKeys.all })
toast.success('Plan created from template') toast.success('Plan created from template')
setTemplatePickerOpen(false) setTemplatePickerOpen(false)
navigate({ to: '/lessons/plans/$planId', params: { planId: plan.id }, search: {} as Record<string, unknown> }) navigate({ to: '/lessons/plans/$planId', params: { planId: plan.id }, search: {} })
}, },
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })
@@ -401,7 +401,7 @@ function LessonPlanTab({ enrollmentId, memberId, canEdit }: { enrollmentId: stri
{Math.round(activePlan.progress)}% complete {Math.round(activePlan.progress)}% complete
</p> </p>
</div> </div>
<Button variant="outline" size="sm" onClick={() => navigate({ to: '/lessons/plans/$planId', params: { planId: activePlan.id }, search: {} as Record<string, unknown> })}> <Button variant="outline" size="sm" onClick={() => navigate({ to: '/lessons/plans/$planId', params: { planId: activePlan.id }, search: {} })}>
View Plan View Plan
</Button> </Button>
</div> </div>

View File

@@ -72,7 +72,7 @@ function EnrollmentsListPage() {
function handleStatusChange(v: string) { function handleStatusChange(v: string) {
const s = v === 'all' ? '' : v const s = v === 'all' ? '' : v
setStatusFilter(s) setStatusFilter(s)
navigate({ to: '/lessons/enrollments', search: { ...search, status: s || undefined, page: 1 } as Record<string, unknown> }) navigate({ to: '/lessons/enrollments', search: { ...search, status: s || undefined, page: 1 } })
} }
return ( return (
@@ -80,7 +80,7 @@ function EnrollmentsListPage() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Enrollments</h1> <h1 className="text-2xl font-bold">Enrollments</h1>
{hasPermission('lessons.edit') && ( {hasPermission('lessons.edit') && (
<Button onClick={() => navigate({ to: '/lessons/enrollments/new', search: {} as Record<string, unknown> })}> <Button onClick={() => navigate({ to: '/lessons/enrollments/new', search: { memberId: undefined, accountId: undefined } })}>
<Plus className="mr-2 h-4 w-4" />New Enrollment <Plus className="mr-2 h-4 w-4" />New Enrollment
</Button> </Button>
)} )}
@@ -125,7 +125,7 @@ function EnrollmentsListPage() {
order={params.order} order={params.order}
onPageChange={setPage} onPageChange={setPage}
onSort={setSort} onSort={setSort}
onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: {} as Record<string, unknown> })} onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: { tab: 'details' } })}
/> />
</div> </div>
) )

View File

@@ -108,7 +108,7 @@ function NewEnrollmentPage() {
}, },
onSuccess: (enrollment) => { onSuccess: (enrollment) => {
toast.success('Enrollment created') toast.success('Enrollment created')
navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: enrollment.id }, search: {} as Record<string, unknown> }) navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: enrollment.id }, search: { tab: 'details' } })
}, },
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })
@@ -141,7 +141,7 @@ function NewEnrollmentPage() {
return ( return (
<div className="space-y-6 max-w-2xl"> <div className="space-y-6 max-w-2xl">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/enrollments', search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/enrollments', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'desc' as const, status: undefined, instructorId: undefined } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<h1 className="text-2xl font-bold">New Enrollment</h1> <h1 className="text-2xl font-bold">New Enrollment</h1>
@@ -282,7 +282,7 @@ function NewEnrollmentPage() {
<Button type="submit" disabled={mutation.isPending || !selectedMember || !selectedSlotId || !startDate} size="lg"> <Button type="submit" disabled={mutation.isPending || !selectedMember || !selectedSlotId || !startDate} size="lg">
{mutation.isPending ? 'Creating...' : 'Create Enrollment'} {mutation.isPending ? 'Creating...' : 'Create Enrollment'}
</Button> </Button>
<Button variant="secondary" type="button" size="lg" onClick={() => navigate({ to: '/lessons/enrollments', search: {} as Record<string, unknown> })}> <Button variant="secondary" type="button" size="lg" onClick={() => navigate({ to: '/lessons/enrollments', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'desc' as const, status: undefined, instructorId: undefined } })}>
Cancel Cancel
</Button> </Button>
</div> </div>

View File

@@ -93,7 +93,7 @@ function LessonPlanDetailPage() {
return ( return (
<div className="space-y-6 max-w-3xl"> <div className="space-y-6 max-w-3xl">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/plans', search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/plans', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<div className="flex-1"> <div className="flex-1">

View File

@@ -84,7 +84,7 @@ function LessonPlansPage() {
order={params.order} order={params.order}
onPageChange={setPage} onPageChange={setPage}
onSort={setSort} onSort={setSort}
onRowClick={(p) => navigate({ to: '/lessons/plans/$planId', params: { planId: p.id }, search: {} as Record<string, unknown> })} onRowClick={(p) => navigate({ to: '/lessons/plans/$planId', params: { planId: p.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
/> />
</div> </div>
) )

View File

@@ -49,7 +49,7 @@ function ScheduleHubPage() {
const canAdmin = hasPermission('lessons.admin') const canAdmin = hasPermission('lessons.admin')
function setTab(t: string) { function setTab(t: string) {
navigate({ to: '/lessons/schedule', search: { ...search, tab: t, page: 1 } as Record<string, unknown> }) navigate({ to: '/lessons/schedule', search: { ...search, tab: t, page: 1 } })
} }
return ( return (
@@ -152,7 +152,7 @@ function InstructorsTab({ canAdmin, search: _search }: { canAdmin: boolean; sear
order={params.order} order={params.order}
onPageChange={setPage} onPageChange={setPage}
onSort={setSort} onSort={setSort}
onRowClick={(i) => navigate({ to: '/lessons/schedule/instructors/$instructorId', params: { instructorId: i.id }, search: {} as Record<string, unknown> })} onRowClick={(i) => navigate({ to: '/lessons/schedule/instructors/$instructorId', params: { instructorId: i.id }, search: { tab: 'overview' } })}
/> />
</div> </div>
) )

View File

@@ -42,7 +42,7 @@ function InstructorDetailPage() {
const tab = search.tab const tab = search.tab
function setTab(t: string) { function setTab(t: string) {
navigate({ to: '/lessons/schedule/instructors/$instructorId', params: { instructorId }, search: { tab: t } as Record<string, unknown> }) navigate({ to: '/lessons/schedule/instructors/$instructorId', params: { instructorId }, search: { tab: t } })
} }
const { data: instructor, isLoading } = useQuery(instructorDetailOptions(instructorId)) const { data: instructor, isLoading } = useQuery(instructorDetailOptions(instructorId))
@@ -62,7 +62,7 @@ function InstructorDetailPage() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/schedule', search: { tab: 'instructors' } as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/schedule', search: { tab: 'instructors', page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<ArrowLeft className="h-4 w-4 mr-1" />Back <ArrowLeft className="h-4 w-4 mr-1" />Back
</Button> </Button>
<div className="flex-1"> <div className="flex-1">

View File

@@ -126,7 +126,7 @@ function SessionDetailPage() {
return ( return (
<div className="space-y-6 max-w-3xl"> <div className="space-y-6 max-w-3xl">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/sessions', search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/sessions', search: { view: 'list' as const, page: 1, limit: 25, q: undefined, sort: undefined, order: 'desc' as const, status: undefined, instructorId: undefined } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<div className="flex-1"> <div className="flex-1">
@@ -137,7 +137,7 @@ function SessionDetailPage() {
<Link <Link
to="/lessons/enrollments/$enrollmentId" to="/lessons/enrollments/$enrollmentId"
params={{ enrollmentId: enrollment.id }} params={{ enrollmentId: enrollment.id }}
search={{} as Record<string, unknown>} search={{ tab: 'details' }}
className="text-sm text-primary hover:underline" className="text-sm text-primary hover:underline"
> >
View Enrollment View Enrollment

View File

@@ -92,13 +92,13 @@ function SessionsPage() {
const weekEnd = endOfWeek(weekStart, { weekStartsOn: 0 }) const weekEnd = endOfWeek(weekStart, { weekStartsOn: 0 })
function setView(v: 'list' | 'week') { function setView(v: 'list' | 'week') {
navigate({ to: '/lessons/sessions', search: { ...search, view: v, page: 1 } as Record<string, unknown> }) navigate({ to: '/lessons/sessions', search: { ...search, view: v, page: 1 } })
} }
function handleStatusChange(v: string) { function handleStatusChange(v: string) {
const s = v === 'all' ? '' : v const s = v === 'all' ? '' : v
setStatusFilter(s) setStatusFilter(s)
navigate({ to: '/lessons/sessions', search: { ...search, status: s || undefined, page: 1 } as Record<string, unknown> }) navigate({ to: '/lessons/sessions', search: { ...search, status: s || undefined, page: 1 } })
} }
// List query // List query
@@ -189,7 +189,7 @@ function SessionsPage() {
order={params.order} order={params.order}
onPageChange={setPage} onPageChange={setPage}
onSort={setSort} onSort={setSort}
onRowClick={(s) => navigate({ to: '/lessons/sessions/$sessionId', params: { sessionId: s.id }, search: {} as Record<string, unknown> })} onRowClick={(s) => navigate({ to: '/lessons/sessions/$sessionId', params: { sessionId: s.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
/> />
</> </>
)} )}
@@ -249,7 +249,7 @@ function SessionsPage() {
{daySessions.map((s) => ( {daySessions.map((s) => (
<button <button
key={s.id} key={s.id}
onClick={() => navigate({ to: '/lessons/sessions/$sessionId', params: { sessionId: s.id }, search: {} as Record<string, unknown> })} onClick={() => navigate({ to: '/lessons/sessions/$sessionId', params: { sessionId: s.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
className={`w-full text-left rounded border px-1.5 py-1 text-xs hover:opacity-80 transition-opacity ${STATUS_COLORS[s.status] ?? STATUS_COLORS.scheduled}`} className={`w-full text-left rounded border px-1.5 py-1 text-xs hover:opacity-80 transition-opacity ${STATUS_COLORS[s.status] ?? STATUS_COLORS.scheduled}`}
> >
<p className="font-semibold">{formatTime(s.scheduledTime)}</p> <p className="font-semibold">{formatTime(s.scheduledTime)}</p>

View File

@@ -42,7 +42,7 @@ function TemplateDetailPage() {
return ( return (
<div className="space-y-6 max-w-3xl"> <div className="space-y-6 max-w-3xl">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/templates', search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/templates', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<div className="flex-1"> <div className="flex-1">
@@ -218,7 +218,7 @@ function InstantiateDialog({ template, templateId, open, onClose }: {
}), }),
onSuccess: (plan) => { onSuccess: (plan) => {
toast.success('Plan created from template') toast.success('Plan created from template')
navigate({ to: '/lessons/plans/$planId', params: { planId: plan.id }, search: {} as Record<string, unknown> }) navigate({ to: '/lessons/plans/$planId', params: { planId: plan.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
}, },
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })

View File

@@ -96,7 +96,7 @@ function TemplatesListPage() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Lesson Plan Templates</h1> <h1 className="text-2xl font-bold">Lesson Plan Templates</h1>
{canAdmin && ( {canAdmin && (
<Button onClick={() => navigate({ to: '/lessons/templates/new', search: {} as Record<string, unknown> })}> <Button onClick={() => navigate({ to: '/lessons/templates/new', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<Plus className="mr-2 h-4 w-4" />New Template <Plus className="mr-2 h-4 w-4" />New Template
</Button> </Button>
)} )}
@@ -126,7 +126,7 @@ function TemplatesListPage() {
order={params.order} order={params.order}
onPageChange={setPage} onPageChange={setPage}
onSort={setSort} onSort={setSort}
onRowClick={(t) => navigate({ to: '/lessons/templates/$templateId', params: { templateId: t.id }, search: {} as Record<string, unknown> })} onRowClick={(t) => navigate({ to: '/lessons/templates/$templateId', params: { templateId: t.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
/> />
</div> </div>
) )

View File

@@ -45,7 +45,7 @@ function NewTemplatePage() {
}), }),
onSuccess: (template) => { onSuccess: (template) => {
toast.success('Template created') toast.success('Template created')
navigate({ to: '/lessons/templates/$templateId', params: { templateId: template.id }, search: {} as Record<string, unknown> }) navigate({ to: '/lessons/templates/$templateId', params: { templateId: template.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
}, },
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })
@@ -63,7 +63,7 @@ function NewTemplatePage() {
return ( return (
<form onSubmit={handleSubmit} className="space-y-6 max-w-3xl"> <form onSubmit={handleSubmit} className="space-y-6 max-w-3xl">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button type="button" variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/templates', search: {} as Record<string, unknown> })}> <Button type="button" variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/templates', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<h1 className="text-2xl font-bold">New Template</h1> <h1 className="text-2xl font-bold">New Template</h1>
@@ -112,7 +112,7 @@ function NewTemplatePage() {
<Button type="submit" disabled={mutation.isPending || !name.trim() || !allSectionsValid} size="lg"> <Button type="submit" disabled={mutation.isPending || !name.trim() || !allSectionsValid} size="lg">
{mutation.isPending ? 'Creating...' : 'Create Template'} {mutation.isPending ? 'Creating...' : 'Create Template'}
</Button> </Button>
<Button type="button" variant="secondary" size="lg" onClick={() => navigate({ to: '/lessons/templates', search: {} as Record<string, unknown> })}> <Button type="button" variant="secondary" size="lg" onClick={() => navigate({ to: '/lessons/templates', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
Cancel Cancel
</Button> </Button>
</div> </div>

View File

@@ -161,7 +161,7 @@ function MemberDetailPage() {
}) })
function setTab(t: string) { function setTab(t: string) {
navigate({ to: '/members/$memberId', params: { memberId }, search: { tab: t } as Record<string, unknown> }) navigate({ to: '/members/$memberId', params: { memberId }, search: { tab: t } })
} }
if (isLoading) { if (isLoading) {
@@ -188,7 +188,7 @@ function MemberDetailPage() {
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/accounts/$accountId/members', params: { accountId: member.accountId }, search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/accounts/$accountId/members', params: { accountId: member.accountId }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<div> <div>
@@ -293,7 +293,7 @@ function MemberDetailPage() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground">{enrollmentsData?.pagination.total ?? 0} enrollment(s)</p> <p className="text-sm text-muted-foreground">{enrollmentsData?.pagination.total ?? 0} enrollment(s)</p>
{hasPermission('lessons.edit') && ( {hasPermission('lessons.edit') && (
<Button size="sm" onClick={() => navigate({ to: '/lessons/enrollments/new', search: { memberId } as Record<string, unknown> })}> <Button size="sm" onClick={() => navigate({ to: '/lessons/enrollments/new', search: { memberId, accountId: undefined } })}>
<Plus className="h-4 w-4 mr-1" />Enroll <Plus className="h-4 w-4 mr-1" />Enroll
</Button> </Button>
)} )}
@@ -307,7 +307,7 @@ function MemberDetailPage() {
total={enrollmentsData?.data?.length ?? 0} total={enrollmentsData?.data?.length ?? 0}
onPageChange={() => {}} onPageChange={() => {}}
onSort={() => {}} onSort={() => {}}
onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: {} as Record<string, unknown> })} onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: { tab: 'details' } })}
/> />
</div> </div>
)} )}

View File

@@ -84,7 +84,7 @@ function MembersListPage() {
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => navigate({ to: '/members/$memberId', params: { memberId: row.id }, search: {} as Record<string, unknown> })}> <DropdownMenuItem onClick={() => navigate({ to: '/members/$memberId', params: { memberId: row.id }, search: { tab: 'details' } })}>
<Pencil className="mr-2 h-4 w-4" /> <Pencil className="mr-2 h-4 w-4" />
Edit Edit
</DropdownMenuItem> </DropdownMenuItem>
@@ -134,7 +134,7 @@ function MembersListPage() {
order={params.order} order={params.order}
onPageChange={setPage} onPageChange={setPage}
onSort={setSort} onSort={setSort}
onRowClick={(member) => navigate({ to: '/members/$memberId', params: { memberId: member.id }, search: {} as Record<string, unknown> })} onRowClick={(member) => navigate({ to: '/members/$memberId', params: { memberId: member.id }, search: { tab: 'details' } })}
/> />
</div> </div>
) )

View File

@@ -11,10 +11,22 @@ import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import { Sun, Moon, Monitor } from 'lucide-react' import { Sun, Moon, Monitor } from 'lucide-react'
import { toast } from 'sonner' import { toast } from 'sonner'
import { AvatarUpload } from '@/components/shared/avatar-upload' import { AvatarUpload } from '@/components/shared/avatar-upload'
interface Profile {
id: string
email: string
firstName: string
lastName: string
role: string
employeeNumber: string | null
hasPin: boolean
createdAt: string
}
export const Route = createFileRoute('/_authenticated/profile')({ export const Route = createFileRoute('/_authenticated/profile')({
component: ProfilePage, component: ProfilePage,
}) })
@@ -22,21 +34,56 @@ export const Route = createFileRoute('/_authenticated/profile')({
function profileOptions() { function profileOptions() {
return queryOptions({ return queryOptions({
queryKey: ['auth', 'me'], queryKey: ['auth', 'me'],
queryFn: () => api.get<{ id: string; email: string; firstName: string; lastName: string }>('/v1/auth/me'), queryFn: () => api.get<Profile>('/v1/auth/me'),
}) })
} }
function ProfilePage() { function ProfilePage() {
const { tab } = Route.useSearch() as { tab?: string }
const queryClient = useQueryClient() const queryClient = useQueryClient()
const setAuth = useAuthStore((s) => s.setAuth) const setAuth = useAuthStore((s) => s.setAuth)
const storeUser = useAuthStore((s) => s.user) const storeUser = useAuthStore((s) => s.user)
const storeToken = useAuthStore((s) => s.token) const storeToken = useAuthStore((s) => s.token)
const { mode, colorTheme, setMode, setColorTheme } = useThemeStore()
const { data: profile } = useQuery(profileOptions()) const { data: profile } = useQuery(profileOptions())
const [firstName, setFirstName] = useState('') return (
const [lastName, setLastName] = useState('') <div className="space-y-6 max-w-2xl">
<h1 className="text-2xl font-bold">Profile</h1>
<Tabs defaultValue={tab === 'security' || tab === 'appearance' ? tab : 'account'}>
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="security">Security</TabsTrigger>
<TabsTrigger value="appearance">Appearance</TabsTrigger>
</TabsList>
<TabsContent value="account">
<AccountTab profile={profile} queryClient={queryClient} setAuth={setAuth} storeUser={storeUser} storeToken={storeToken} />
</TabsContent>
<TabsContent value="security">
<SecurityTab profile={profile} queryClient={queryClient} />
</TabsContent>
<TabsContent value="appearance">
<AppearanceTab />
</TabsContent>
</Tabs>
</div>
)
}
function AccountTab({ profile, queryClient, setAuth, storeUser, storeToken }: {
profile: Profile | undefined
queryClient: ReturnType<typeof useQueryClient>
setAuth: (token: string, user: any) => void
storeUser: any
storeToken: string | null
}) {
const [firstName, setFirstName] = useState(profile?.firstName ?? '')
const [lastName, setLastName] = useState(profile?.lastName ?? '')
const [nameLoaded, setNameLoaded] = useState(false) const [nameLoaded, setNameLoaded] = useState(false)
if (profile && !nameLoaded) { if (profile && !nameLoaded) {
@@ -45,12 +92,8 @@ function ProfilePage() {
setNameLoaded(true) setNameLoaded(true)
} }
const [currentPassword, setCurrentPassword] = useState('')
const [newPassword, setNewPassword] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
const updateProfileMutation = useMutation({ const updateProfileMutation = useMutation({
mutationFn: (data: Record<string, unknown>) => api.patch<{ id: string; email: string; firstName: string; lastName: string }>('/v1/auth/me', data), mutationFn: (data: Record<string, unknown>) => api.patch<Profile>('/v1/auth/me', data),
onSuccess: (updated) => { onSuccess: (updated) => {
queryClient.invalidateQueries({ queryKey: ['auth', 'me'] }) queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
if (storeToken && storeUser) { if (storeToken && storeUser) {
@@ -61,6 +104,59 @@ function ProfilePage() {
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })
return (
<Card>
<CardHeader>
<CardTitle className="text-lg">Account</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{profile?.id && (
<div className="flex items-center gap-4">
<AvatarUpload entityType="user" entityId={profile.id} size="lg" />
<div>
<p className="font-medium">{profile.firstName} {profile.lastName}</p>
<p className="text-sm text-muted-foreground">{profile.email}</p>
{profile.employeeNumber && (
<p className="text-xs text-muted-foreground">Employee #{profile.employeeNumber}</p>
)}
</div>
</div>
)}
<div className="space-y-2">
<Label>Email</Label>
<Input value={profile?.email ?? ''} disabled className="opacity-60" />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>First Name</Label>
<Input value={firstName} onChange={(e) => setFirstName(e.target.value)} />
</div>
<div className="space-y-2">
<Label>Last Name</Label>
<Input value={lastName} onChange={(e) => setLastName(e.target.value)} />
</div>
</div>
<Button
onClick={() => updateProfileMutation.mutate({ firstName, lastName })}
disabled={updateProfileMutation.isPending}
>
{updateProfileMutation.isPending ? 'Saving...' : 'Save'}
</Button>
</CardContent>
</Card>
)
}
function SecurityTab({ profile, queryClient }: {
profile: Profile | undefined
queryClient: ReturnType<typeof useQueryClient>
}) {
const [currentPassword, setCurrentPassword] = useState('')
const [newPassword, setNewPassword] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
const [pin, setPin] = useState('')
const [confirmPin, setConfirmPin] = useState('')
const changePasswordMutation = useMutation({ const changePasswordMutation = useMutation({
mutationFn: () => api.post('/v1/auth/change-password', { currentPassword, newPassword }), mutationFn: () => api.post('/v1/auth/change-password', { currentPassword, newPassword }),
onSuccess: () => { onSuccess: () => {
@@ -72,6 +168,26 @@ function ProfilePage() {
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })
const setPinMutation = useMutation({
mutationFn: () => api.post('/v1/auth/set-pin', { pin }),
onSuccess: () => {
setPin('')
setConfirmPin('')
queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
toast.success('PIN set')
},
onError: (err) => toast.error(err.message),
})
const removePinMutation = useMutation({
mutationFn: () => api.del('/v1/auth/pin'),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
toast.success('PIN removed')
},
onError: (err) => toast.error(err.message),
})
function handlePasswordChange() { function handlePasswordChange() {
if (newPassword.length < 12) { if (newPassword.length < 12) {
toast.error('Password must be at least 12 characters') toast.error('Password must be at least 12 characters')
@@ -84,47 +200,24 @@ function ProfilePage() {
changePasswordMutation.mutate() changePasswordMutation.mutate()
} }
function handleSetPin() {
if (pin.length < 4 || pin.length > 6) {
toast.error('PIN must be 4-6 digits')
return
}
if (!/^\d+$/.test(pin)) {
toast.error('PIN must be digits only')
return
}
if (pin !== confirmPin) {
toast.error('PINs do not match')
return
}
setPinMutation.mutate()
}
return ( return (
<div className="space-y-6 max-w-2xl"> <div className="space-y-6">
<h1 className="text-2xl font-bold">Profile</h1>
<Card>
<CardHeader>
<CardTitle className="text-lg">Account</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{profile?.id && (
<div className="flex items-center gap-4">
<AvatarUpload entityType="user" entityId={profile.id} size="lg" />
<div>
<p className="font-medium">{profile.firstName} {profile.lastName}</p>
<p className="text-sm text-muted-foreground">{profile.email}</p>
</div>
</div>
)}
<div className="space-y-2">
<Label>Email</Label>
<Input value={profile?.email ?? ''} disabled className="opacity-60" />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>First Name</Label>
<Input value={firstName} onChange={(e) => setFirstName(e.target.value)} />
</div>
<div className="space-y-2">
<Label>Last Name</Label>
<Input value={lastName} onChange={(e) => setLastName(e.target.value)} />
</div>
</div>
<Button
onClick={() => updateProfileMutation.mutate({ firstName, lastName })}
disabled={updateProfileMutation.isPending}
>
{updateProfileMutation.isPending ? 'Saving...' : 'Save'}
</Button>
</CardContent>
</Card>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-lg">Change Password</CardTitle> <CardTitle className="text-lg">Change Password</CardTitle>
@@ -150,53 +243,113 @@ function ProfilePage() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-lg">Appearance</CardTitle> <CardTitle className="text-lg">POS PIN</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="space-y-2"> {profile?.employeeNumber && (
<Label>Mode</Label> <p className="text-sm text-muted-foreground">
<div className="flex gap-2"> Your employee number is <span className="font-mono font-medium text-foreground">{profile.employeeNumber}</span>.
{[ To unlock the POS, enter your employee number followed by your PIN.
{ value: 'light' as const, icon: Sun, label: 'Light' }, </p>
{ value: 'dark' as const, icon: Moon, label: 'Dark' }, )}
{ value: 'system' as const, icon: Monitor, label: 'System' }, {profile?.hasPin ? (
].map((m) => ( <>
<Button <p className="text-sm text-muted-foreground">You have a PIN set. You can change or remove it below.</p>
key={m.value} <div className="grid grid-cols-2 gap-4">
variant={mode === m.value ? 'default' : 'secondary'} <div className="space-y-2">
size="sm" <Label>New PIN (4-6 digits)</Label>
onClick={() => setMode(m.value)} <Input type="password" inputMode="numeric" maxLength={6} value={pin} onChange={(e) => setPin(e.target.value)} placeholder="****" />
> </div>
<m.icon className="mr-2 h-4 w-4" /> <div className="space-y-2">
{m.label} <Label>Confirm PIN</Label>
<Input type="password" inputMode="numeric" maxLength={6} value={confirmPin} onChange={(e) => setConfirmPin(e.target.value)} placeholder="****" />
</div>
</div>
<div className="flex gap-2">
<Button onClick={handleSetPin} disabled={setPinMutation.isPending}>
{setPinMutation.isPending ? 'Saving...' : 'Change PIN'}
</Button> </Button>
))} <Button variant="outline" onClick={() => removePinMutation.mutate()} disabled={removePinMutation.isPending}>
</div> {removePinMutation.isPending ? 'Removing...' : 'Remove PIN'}
</div>
<Separator />
<div className="space-y-2">
<Label>Color Theme</Label>
<div className="flex gap-2 flex-wrap">
{themes.map((t) => (
<Button
key={t.name}
variant={colorTheme === t.name ? 'default' : 'secondary'}
size="sm"
onClick={() => setColorTheme(t.name)}
>
<span
className="mr-2 h-3 w-3 rounded-full border inline-block"
style={{ backgroundColor: `hsl(${t.light.primary})` }}
/>
{t.label}
</Button> </Button>
))} </div>
</div> </>
</div> ) : (
<>
<p className="text-sm text-muted-foreground">Set a PIN to unlock the Point of Sale terminal.</p>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>PIN (4-6 digits)</Label>
<Input type="password" inputMode="numeric" maxLength={6} value={pin} onChange={(e) => setPin(e.target.value)} placeholder="****" />
</div>
<div className="space-y-2">
<Label>Confirm PIN</Label>
<Input type="password" inputMode="numeric" maxLength={6} value={confirmPin} onChange={(e) => setConfirmPin(e.target.value)} placeholder="****" />
</div>
</div>
<Button onClick={handleSetPin} disabled={setPinMutation.isPending}>
{setPinMutation.isPending ? 'Saving...' : 'Set PIN'}
</Button>
</>
)}
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
) )
} }
function AppearanceTab() {
const { mode, colorTheme, setMode, setColorTheme } = useThemeStore()
return (
<Card>
<CardHeader>
<CardTitle className="text-lg">Appearance</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label>Mode</Label>
<div className="flex gap-2">
{[
{ value: 'light' as const, icon: Sun, label: 'Light' },
{ value: 'dark' as const, icon: Moon, label: 'Dark' },
{ value: 'system' as const, icon: Monitor, label: 'System' },
].map((m) => (
<Button
key={m.value}
variant={mode === m.value ? 'default' : 'secondary'}
size="sm"
onClick={() => setMode(m.value)}
>
<m.icon className="mr-2 h-4 w-4" />
{m.label}
</Button>
))}
</div>
</div>
<Separator />
<div className="space-y-2">
<Label>Color Theme</Label>
<div className="flex gap-2 flex-wrap">
{themes.map((t) => (
<Button
key={t.name}
variant={colorTheme === t.name ? 'default' : 'secondary'}
size="sm"
onClick={() => setColorTheme(t.name)}
>
<span
className="mr-2 h-3 w-3 rounded-full border inline-block"
style={{ backgroundColor: `hsl(${t.light.primary})` }}
/>
{t.label}
</Button>
))}
</div>
</div>
</CardContent>
</Card>
)
}

View File

@@ -96,12 +96,12 @@ function RepairBatchDetailPage() {
const totalActual = tickets.reduce((sum, t) => sum + (t.actualCost ? parseFloat(t.actualCost) : 0), 0) const totalActual = tickets.reduce((sum, t) => sum + (t.actualCost ? parseFloat(t.actualCost) : 0), 0)
function handleTicketClick(ticket: RepairTicket) { function handleTicketClick(ticket: RepairTicket) {
navigate({ to: '/repairs/$ticketId', params: { ticketId: ticket.id }, search: {} as Record<string, unknown> }) navigate({ to: '/repairs/$ticketId', params: { ticketId: ticket.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
} }
function handleAddRepair() { function handleAddRepair() {
// Navigate to new repair with batch and account pre-linked // Navigate to new repair with batch and account pre-linked
navigate({ to: '/repairs/new', search: { batchId, batchName: batch!.batchNumber ?? '', accountId: batch!.accountId, contactName: batch!.contactName ?? '' } as Record<string, unknown> }) navigate({ to: '/repairs/new', search: { batchId, batchName: batch!.batchNumber ?? '', accountId: batch!.accountId, contactName: batch!.contactName ?? '' } })
} }
async function generateBatchPdf() { async function generateBatchPdf() {
@@ -233,7 +233,7 @@ function RepairBatchDetailPage() {
return ( return (
<div className="space-y-6 max-w-5xl"> <div className="space-y-6 max-w-5xl">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repair-batches', search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repair-batches', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<div className="flex-1"> <div className="flex-1">

View File

@@ -75,7 +75,7 @@ function RepairBatchesListPage() {
} }
function handleRowClick(batch: RepairBatch) { function handleRowClick(batch: RepairBatch) {
navigate({ to: '/repair-batches/$batchId', params: { batchId: batch.id }, search: {} as Record<string, unknown> }) navigate({ to: '/repair-batches/$batchId', params: { batchId: batch.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
} }
return ( return (

View File

@@ -50,7 +50,7 @@ function NewRepairBatchPage() {
mutationFn: repairBatchMutations.create, mutationFn: repairBatchMutations.create,
onSuccess: (batch) => { onSuccess: (batch) => {
toast.success('Repair batch created') toast.success('Repair batch created')
navigate({ to: '/repair-batches/$batchId', params: { batchId: batch.id }, search: {} as Record<string, unknown> }) navigate({ to: '/repair-batches/$batchId', params: { batchId: batch.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
}, },
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })
@@ -78,7 +78,7 @@ function NewRepairBatchPage() {
return ( return (
<div className="space-y-6 max-w-3xl"> <div className="space-y-6 max-w-3xl">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repair-batches', search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repair-batches', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<h1 className="text-2xl font-bold">New Repair Batch</h1> <h1 className="text-2xl font-bold">New Repair Batch</h1>
@@ -176,7 +176,7 @@ function NewRepairBatchPage() {
<Button type="submit" disabled={mutation.isPending} size="lg"> <Button type="submit" disabled={mutation.isPending} size="lg">
{mutation.isPending ? 'Creating...' : 'Create Batch'} {mutation.isPending ? 'Creating...' : 'Create Batch'}
</Button> </Button>
<Button variant="secondary" type="button" size="lg" onClick={() => navigate({ to: '/repair-batches', search: {} as Record<string, unknown> })}> <Button variant="secondary" type="button" size="lg" onClick={() => navigate({ to: '/repair-batches', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
Cancel Cancel
</Button> </Button>
</div> </div>

View File

@@ -6,6 +6,7 @@ import {
repairLineItemListOptions, repairLineItemMutations, repairLineItemKeys, repairLineItemListOptions, repairLineItemMutations, repairLineItemKeys,
repairServiceTemplateListOptions, repairServiceTemplateListOptions,
} from '@/api/repairs' } from '@/api/repairs'
import { api } from '@/lib/api-client'
import { usePagination } from '@/hooks/use-pagination' import { usePagination } from '@/hooks/use-pagination'
import { StatusProgress } from '@/components/repairs/status-progress' import { StatusProgress } from '@/components/repairs/status-progress'
import { TicketPhotos } from '@/components/repairs/ticket-photos' import { TicketPhotos } from '@/components/repairs/ticket-photos'
@@ -20,7 +21,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton' import { Skeleton } from '@/components/ui/skeleton'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog' import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { ArrowLeft, Plus, Trash2, RotateCcw, Save, Search } from 'lucide-react' import { ArrowLeft, Plus, Trash2, RotateCcw, Save, Search, Mail } from 'lucide-react'
import { PdfModal } from '@/components/repairs/pdf-modal' import { PdfModal } from '@/components/repairs/pdf-modal'
import { toast } from 'sonner' import { toast } from 'sonner'
import { useAuthStore } from '@/stores/auth.store' import { useAuthStore } from '@/stores/auth.store'
@@ -77,6 +78,17 @@ function RepairTicketDetailPage() {
const { data: lineItemsData, isLoading: itemsLoading } = useQuery(repairLineItemListOptions(ticketId, params)) const { data: lineItemsData, isLoading: itemsLoading } = useQuery(repairLineItemListOptions(ticketId, params))
const [editFields, setEditFields] = useState<Record<string, string>>({}) const [editFields, setEditFields] = useState<Record<string, string>>({})
const [emailEstimateOpen, setEmailEstimateOpen] = useState(false)
const [estimateEmail, setEstimateEmail] = useState('')
const emailEstimateMutation = useMutation({
mutationFn: () => api.post<{ message: string }>(`/v1/repair-tickets/${ticketId}/email-estimate`, { email: estimateEmail }),
onSuccess: () => {
toast.success('Estimate emailed')
setEmailEstimateOpen(false)
},
onError: (err) => toast.error(err.message),
})
const statusMutation = useMutation({ const statusMutation = useMutation({
mutationFn: (status: string) => repairTicketMutations.updateStatus(ticketId, status), mutationFn: (status: string) => repairTicketMutations.updateStatus(ticketId, status),
@@ -157,7 +169,12 @@ function RepairTicketDetailPage() {
} }
const lineItemColumns: Column<RepairLineItem>[] = [ const lineItemColumns: Column<RepairLineItem>[] = [
{ key: 'item_type', header: 'Type', sortable: true, render: (i) => <Badge variant="outline">{i.itemType.replace('_', ' ')}</Badge> }, { key: 'item_type', header: 'Type', sortable: true, render: (i) => (
<div className="flex items-center gap-1">
<Badge variant="outline">{i.itemType.replace('_', ' ')}</Badge>
{i.itemType === 'consumable' && <Badge variant="secondary" className="text-[10px]">Internal</Badge>}
</div>
) },
{ key: 'description', header: 'Description', render: (i) => <>{i.description}</> }, { key: 'description', header: 'Description', render: (i) => <>{i.description}</> },
{ key: 'qty', header: 'Qty', render: (i) => <>{i.qty}</> }, { key: 'qty', header: 'Qty', render: (i) => <>{i.qty}</> },
{ key: 'unit_price', header: 'Unit Price', render: (i) => <>${i.unitPrice}</> }, { key: 'unit_price', header: 'Unit Price', render: (i) => <>${i.unitPrice}</> },
@@ -175,13 +192,44 @@ function RepairTicketDetailPage() {
<div className="space-y-4 max-w-5xl"> <div className="space-y-4 max-w-5xl">
{/* Header */} {/* Header */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repairs', search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repairs', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<div className="flex-1"> <div className="flex-1">
<h1 className="text-2xl font-bold">Ticket #{ticket.ticketNumber}</h1> <h1 className="text-2xl font-bold">Ticket #{ticket.ticketNumber}</h1>
<p className="text-sm text-muted-foreground">{ticket.customerName} {ticket.itemDescription ?? 'No item description'}</p> <p className="text-sm text-muted-foreground">{ticket.customerName} {ticket.itemDescription ?? 'No item description'}</p>
</div> </div>
<Dialog open={emailEstimateOpen} onOpenChange={setEmailEstimateOpen}>
<DialogTrigger asChild>
<Button variant="outline" size="sm" className="gap-2" onClick={() => setEstimateEmail((ticket as any).customerEmail ?? '')}>
<Mail className="h-4 w-4" />Email Estimate
</Button>
</DialogTrigger>
<DialogContent className="max-w-sm">
<DialogHeader>
<DialogTitle>Email Estimate</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div className="space-y-2">
<Label>Send to</Label>
<Input
type="email"
value={estimateEmail}
onChange={(e) => setEstimateEmail(e.target.value)}
placeholder="customer@example.com"
autoFocus
/>
</div>
<Button
className="w-full"
onClick={() => emailEstimateMutation.mutate()}
disabled={!estimateEmail || emailEstimateMutation.isPending}
>
{emailEstimateMutation.isPending ? 'Sending...' : 'Send Estimate'}
</Button>
</div>
</DialogContent>
</Dialog>
<PdfModal ticket={ticket} lineItems={lineItemsData?.data ?? []} ticketId={ticketId} /> <PdfModal ticket={ticket} lineItems={lineItemsData?.data ?? []} ticketId={ticketId} />
</div> </div>
@@ -391,11 +439,27 @@ function AddLineItemDialog({ ticketId, open, onOpenChange }: { ticketId: string;
const [qty, setQty] = useState('1') const [qty, setQty] = useState('1')
const [unitPrice, setUnitPrice] = useState('0') const [unitPrice, setUnitPrice] = useState('0')
const [cost, setCost] = useState('') const [cost, setCost] = useState('')
const [productId, setProductId] = useState<string | null>(null)
const [productSearch, setProductSearch] = useState('')
const [showProducts, setShowProducts] = useState(false)
const showProductPicker = itemType === 'part' || itemType === 'consumable'
const { data: templatesData } = useQuery( const { data: templatesData } = useQuery(
repairServiceTemplateListOptions({ page: 1, limit: 20, q: templateSearch || undefined, order: 'asc', sort: 'name' }), repairServiceTemplateListOptions({ page: 1, limit: 20, q: templateSearch || undefined, order: 'asc', sort: 'name' }),
) )
const { data: productsData } = useQuery({
queryKey: ['products', 'repair-picker', productSearch, itemType],
queryFn: () => {
const params: Record<string, string> = { q: productSearch, limit: '10', isActive: 'true' }
if (itemType === 'consumable') params.isConsumable = 'true'
else params.isDualUseRepair = 'true'
return api.get<{ data: { id: string; name: string; sku: string | null; price: string | null; brand: string | null }[] }>('/v1/products', params)
},
enabled: showProductPicker && productSearch.length >= 1,
})
const mutation = useMutation({ const mutation = useMutation({
mutationFn: (data: Record<string, unknown>) => repairLineItemMutations.create(ticketId, data), mutationFn: (data: Record<string, unknown>) => repairLineItemMutations.create(ticketId, data),
onSuccess: () => { onSuccess: () => {
@@ -408,7 +472,7 @@ function AddLineItemDialog({ ticketId, open, onOpenChange }: { ticketId: string;
}) })
function resetForm() { function resetForm() {
setDescription(''); setQty('1'); setUnitPrice('0'); setCost(''); setItemType('labor'); setTemplateSearch(''); setShowTemplates(false) setDescription(''); setQty('1'); setUnitPrice('0'); setCost(''); setItemType('labor'); setTemplateSearch(''); setShowTemplates(false); setProductId(null); setProductSearch(''); setShowProducts(false)
} }
function selectTemplate(template: { name: string; itemCategory: string | null; size: string | null; itemType: string; defaultPrice: string; defaultCost: string | null }) { function selectTemplate(template: { name: string; itemCategory: string | null; size: string | null; itemType: string; defaultPrice: string; defaultCost: string | null }) {
@@ -416,15 +480,24 @@ function AddLineItemDialog({ ticketId, open, onOpenChange }: { ticketId: string;
setDescription(desc); setItemType(template.itemType); setUnitPrice(template.defaultPrice); setCost(template.defaultCost ?? ''); setShowTemplates(false); setTemplateSearch('') setDescription(desc); setItemType(template.itemType); setUnitPrice(template.defaultPrice); setCost(template.defaultCost ?? ''); setShowTemplates(false); setTemplateSearch('')
} }
function selectProduct(product: { id: string; name: string; price: string | null; brand: string | null }) {
setProductId(product.id)
setDescription(product.brand ? `${product.brand} ${product.name}` : product.name)
setUnitPrice(product.price ?? '0')
setProductSearch('')
setShowProducts(false)
}
function handleSubmit(e: React.FormEvent) { function handleSubmit(e: React.FormEvent) {
e.preventDefault() e.preventDefault()
const q = parseFloat(qty) || 1 const q = parseFloat(qty) || 1
const up = parseFloat(unitPrice) || 0 const up = parseFloat(unitPrice) || 0
const c = cost ? parseFloat(cost) : undefined const c = cost ? parseFloat(cost) : undefined
mutation.mutate({ itemType, description, qty: q, unitPrice: up, totalPrice: q * up, cost: c }) mutation.mutate({ itemType, description, qty: q, unitPrice: up, totalPrice: q * up, cost: c, productId: productId ?? undefined })
} }
const templates = templatesData?.data ?? [] const templates = templatesData?.data ?? []
const products = productsData?.data ?? []
return ( return (
<Dialog open={open} onOpenChange={(o) => { onOpenChange(o); if (!o) resetForm() }}> <Dialog open={open} onOpenChange={(o) => { onOpenChange(o); if (!o) resetForm() }}>
@@ -454,8 +527,38 @@ function AddLineItemDialog({ ticketId, open, onOpenChange }: { ticketId: string;
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>Type</Label> <Label>Type</Label>
<Select value={itemType} onValueChange={setItemType}><SelectTrigger><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> <Select value={itemType} onValueChange={(v) => { setItemType(v); setProductId(null); setProductSearch(''); setShowProducts(false) }}><SelectTrigger><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><SelectItem value="consumable">Consumable (internal)</SelectItem></SelectContent></Select>
</div> </div>
{showProductPicker && (
<div className="relative space-y-2">
<Label>Search Inventory</Label>
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
placeholder={itemType === 'consumable' ? 'Search consumables...' : 'Search parts...'}
value={productSearch}
onChange={(e) => { setProductSearch(e.target.value); setShowProducts(true) }}
onFocus={() => productSearch && setShowProducts(true)}
className="pl-9"
/>
</div>
{productId && (
<div className="text-xs text-muted-foreground flex items-center gap-1">
Linked to product <button type="button" className="underline text-destructive" onClick={() => setProductId(null)}>clear</button>
</div>
)}
{showProducts && productSearch.length >= 1 && (
<div className="absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-lg max-h-48 overflow-auto">
{products.length === 0 ? <div className="p-3 text-sm text-muted-foreground">No products found</div> : products.map((p) => (
<button key={p.id} type="button" className="w-full text-left px-3 py-2 text-sm hover:bg-accent flex justify-between" onClick={() => selectProduct(p)}>
<span>{p.brand ? `${p.brand} ` : ''}{p.name}{p.sku ? ` (${p.sku})` : ''}</span>
{p.price && <span className="text-muted-foreground">${p.price}</span>}
</button>
))}
</div>
)}
</div>
)}
<div className="space-y-2"><Label>Description *</Label><Input value={description} onChange={(e) => setDescription(e.target.value)} required /></div> <div className="space-y-2"><Label>Description *</Label><Input value={description} onChange={(e) => setDescription(e.target.value)} required /></div>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4">
<div className="space-y-2"><Label>Qty</Label><Input type="number" step="0.001" value={qty} onChange={(e) => setQty(e.target.value)} /></div> <div className="space-y-2"><Label>Qty</Label><Input type="number" step="0.001" value={qty} onChange={(e) => setQty(e.target.value)} /></div>

View File

@@ -129,7 +129,7 @@ function RepairsListPage() {
} }
function handleRowClick(ticket: RepairTicket) { function handleRowClick(ticket: RepairTicket) {
navigate({ to: '/repairs/$ticketId', params: { ticketId: ticket.id }, search: {} as Record<string, unknown> }) navigate({ to: '/repairs/$ticketId', params: { ticketId: ticket.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
} }
return ( return (
@@ -137,7 +137,7 @@ function RepairsListPage() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Repairs</h1> <h1 className="text-2xl font-bold">Repairs</h1>
{hasPermission('repairs.edit') && ( {hasPermission('repairs.edit') && (
<Button onClick={() => navigate({ to: '/repairs/new', search: {} as Record<string, unknown> })}> <Button onClick={() => navigate({ to: '/repairs/new', search: { batchId: undefined, batchName: undefined, accountId: undefined, contactName: undefined } })}>
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
New Repair New Repair
</Button> </Button>

View File

@@ -136,7 +136,7 @@ function NewRepairPage() {
}, },
onSuccess: (ticket) => { onSuccess: (ticket) => {
toast.success('Repair ticket created') toast.success('Repair ticket created')
navigate({ to: '/repairs/$ticketId', params: { ticketId: ticket.id }, search: {} as Record<string, unknown> }) navigate({ to: '/repairs/$ticketId', params: { ticketId: ticket.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
}, },
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })
@@ -210,7 +210,7 @@ function NewRepairPage() {
return ( return (
<div className="space-y-6 max-w-4xl"> <div className="space-y-6 max-w-4xl">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repairs', search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repairs', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<h1 className="text-2xl font-bold">New Repair Ticket</h1> <h1 className="text-2xl font-bold">New Repair Ticket</h1>
@@ -486,7 +486,7 @@ function NewRepairPage() {
<Button type="submit" disabled={mutation.isPending} size="lg"> <Button type="submit" disabled={mutation.isPending} size="lg">
{mutation.isPending ? 'Creating...' : 'Create Ticket'} {mutation.isPending ? 'Creating...' : 'Create Ticket'}
</Button> </Button>
<Button variant="secondary" type="button" size="lg" onClick={() => navigate({ to: '/repairs', search: {} as Record<string, unknown> })}> <Button variant="secondary" type="button" size="lg" onClick={() => navigate({ to: '/repairs', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
Cancel Cancel
</Button> </Button>
</div> </div>

View File

@@ -0,0 +1,180 @@
import { useState } from 'react'
import { createFileRoute } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { dailyReportOptions } from '@/api/pos'
import { api } from '@/lib/api-client'
import { queryOptions } from '@tanstack/react-query'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { Skeleton } from '@/components/ui/skeleton'
interface Location {
id: string
name: string
}
function locationsOptions() {
return queryOptions({
queryKey: ['locations'],
queryFn: () => api.get<{ data: Location[] }>('/v1/locations'),
})
}
export const Route = createFileRoute('/_authenticated/reports/daily')({
component: DailyReportPage,
})
const PAYMENT_LABELS: Record<string, string> = {
cash: 'Cash',
card_present: 'Card (Present)',
card_keyed: 'Card (Keyed)',
check: 'Check',
account_charge: 'Account',
}
function DailyReportPage() {
const today = new Date().toISOString().slice(0, 10)
const [date, setDate] = useState(today)
const [locationId, setLocationId] = useState<string | null>(null)
const { data: locationsData } = useQuery(locationsOptions())
const locations = locationsData?.data ?? []
// Auto-select first location
if (!locationId && locations.length > 0) {
setLocationId(locations[0].id)
}
const { data: report, isLoading } = useQuery(dailyReportOptions(locationId, date))
return (
<div className="space-y-6 max-w-3xl">
<h1 className="text-2xl font-bold">Daily Report</h1>
<div className="flex gap-4">
<div className="space-y-1">
<Label className="text-xs">Date</Label>
<Input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="w-44" />
</div>
<div className="space-y-1">
<Label className="text-xs">Location</Label>
<Select value={locationId ?? ''} onValueChange={setLocationId}>
<SelectTrigger className="w-48">
<SelectValue placeholder="Select location" />
</SelectTrigger>
<SelectContent>
{locations.map((loc) => (
<SelectItem key={loc.id} value={loc.id}>{loc.name}</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
{isLoading ? (
<div className="space-y-4">
<Skeleton className="h-32 w-full" />
<Skeleton className="h-48 w-full" />
</div>
) : !report ? (
<p className="text-muted-foreground">Select a location and date to view the report.</p>
) : (
<div className="space-y-4">
{/* Sessions */}
<Card>
<CardHeader>
<CardTitle className="text-base">Drawer Sessions ({report.sessions.length})</CardTitle>
</CardHeader>
<CardContent>
{report.sessions.length === 0 ? (
<p className="text-sm text-muted-foreground">No drawer sessions on this date.</p>
) : (
<div className="space-y-2">
{report.sessions.map((s: any) => (
<div key={s.id} className="flex items-center justify-between p-2 rounded border text-sm">
<div>
<span className="font-medium">{s.register?.name ?? 'Unassigned'}</span>
<span className="text-muted-foreground ml-2">
{new Date(s.openedAt).toLocaleTimeString()} {s.closedAt ? new Date(s.closedAt).toLocaleTimeString() : 'Open'}
</span>
{s.openedBy && <span className="text-muted-foreground ml-2">({s.openedBy.firstName})</span>}
</div>
<div className="flex items-center gap-3">
<span className="tabular-nums text-sm">${s.grossSales.toFixed(2)}</span>
{s.overShort !== null && (
<Badge variant={s.overShort === 0 ? 'default' : 'destructive'} className="text-xs">
{s.overShort === 0 ? 'Balanced' : `${s.overShort > 0 ? '+' : ''}$${s.overShort.toFixed(2)}`}
</Badge>
)}
{s.status === 'open' && <Badge variant="outline" className="text-xs">Open</Badge>}
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* Sales Summary */}
<Card>
<CardHeader><CardTitle className="text-base">Sales</CardTitle></CardHeader>
<CardContent className="space-y-2 text-sm">
<div className="flex justify-between"><span>Transactions</span><span>{report.sales.transactionCount}</span></div>
<div className="flex justify-between"><span>Gross Sales</span><span className="tabular-nums">${report.sales.grossSales.toFixed(2)}</span></div>
{report.sales.refundTotal > 0 && <div className="flex justify-between text-red-600"><span>Refunds</span><span className="tabular-nums">-${report.sales.refundTotal.toFixed(2)}</span></div>}
<Separator />
<div className="flex justify-between font-semibold"><span>Net Sales</span><span className="tabular-nums">${report.sales.netSales.toFixed(2)}</span></div>
{report.sales.voidCount > 0 && <div className="flex justify-between text-muted-foreground"><span>Voided</span><span>{report.sales.voidCount}</span></div>}
</CardContent>
</Card>
{/* Payment Breakdown */}
<Card>
<CardHeader><CardTitle className="text-base">Payments</CardTitle></CardHeader>
<CardContent className="space-y-2 text-sm">
{Object.entries(report.payments as Record<string, { count: number; total: number }>).map(([method, data]) => (
<div key={method} className="flex justify-between">
<span>{PAYMENT_LABELS[method] ?? method} ({data.count})</span>
<span className="tabular-nums">${data.total.toFixed(2)}</span>
</div>
))}
{Object.keys(report.payments).length === 0 && <p className="text-muted-foreground">No payments</p>}
</CardContent>
</Card>
{/* Discounts */}
{report.discounts.count > 0 && (
<Card>
<CardHeader><CardTitle className="text-base">Discounts</CardTitle></CardHeader>
<CardContent className="text-sm">
<div className="flex justify-between"><span>Total ({report.discounts.count} transactions)</span><span className="tabular-nums text-green-600">-${report.discounts.total.toFixed(2)}</span></div>
</CardContent>
</Card>
)}
{/* Cash Summary */}
<Card>
<CardHeader><CardTitle className="text-base">Cash</CardTitle></CardHeader>
<CardContent className="space-y-2 text-sm">
<div className="flex justify-between"><span>Total Opening</span><span className="tabular-nums">${report.cash.totalOpening.toFixed(2)}</span></div>
<div className="flex justify-between"><span>Cash Sales</span><span className="tabular-nums">${report.cash.totalCashSales.toFixed(2)}</span></div>
{report.cash.totalCashIn > 0 && <div className="flex justify-between text-green-600"><span>Cash In</span><span className="tabular-nums">+${report.cash.totalCashIn.toFixed(2)}</span></div>}
{report.cash.totalCashOut > 0 && <div className="flex justify-between text-red-600"><span>Cash Out</span><span className="tabular-nums">-${report.cash.totalCashOut.toFixed(2)}</span></div>}
<Separator />
<div className="flex justify-between font-medium"><span>Expected Total</span><span className="tabular-nums">${report.cash.totalExpected.toFixed(2)}</span></div>
<div className="flex justify-between"><span>Actual Total</span><span className="tabular-nums">${report.cash.totalActual.toFixed(2)}</span></div>
<div className={`flex justify-between font-bold ${report.cash.totalOverShort === 0 ? 'text-green-600' : 'text-red-600'}`}>
<span>{report.cash.totalOverShort >= 0 ? 'Over' : 'Short'}</span>
<span className="tabular-nums">${Math.abs(report.cash.totalOverShort).toFixed(2)}</span>
</div>
</CardContent>
</Card>
</div>
)}
</div>
)
}

View File

@@ -100,7 +100,7 @@ function RoleDetailPage() {
return ( return (
<div className="space-y-6 max-w-2xl"> <div className="space-y-6 max-w-2xl">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/roles', search: {} as Record<string, unknown> })}> <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/roles', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<div> <div>
@@ -177,7 +177,7 @@ function RoleDetailPage() {
<Button onClick={handleSave} disabled={updateMutation.isPending}> <Button onClick={handleSave} disabled={updateMutation.isPending}>
{updateMutation.isPending ? 'Saving...' : 'Save Changes'} {updateMutation.isPending ? 'Saving...' : 'Save Changes'}
</Button> </Button>
<Button variant="secondary" onClick={() => navigate({ to: '/roles', search: {} as Record<string, unknown> })}> <Button variant="secondary" onClick={() => navigate({ to: '/roles', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
Cancel Cancel
</Button> </Button>
</div> </div>

View File

@@ -29,7 +29,7 @@ function NewRolePage() {
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries({ queryKey: rbacKeys.roles }) queryClient.invalidateQueries({ queryKey: rbacKeys.roles })
toast.success('Role created') toast.success('Role created')
navigate({ to: '/roles', search: {} as Record<string, unknown> }) navigate({ to: '/roles', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
}, },
onError: (err) => toast.error(err.message), onError: (err) => toast.error(err.message),
}) })
@@ -153,7 +153,7 @@ function NewRolePage() {
<Button onClick={handleSubmit} disabled={mutation.isPending}> <Button onClick={handleSubmit} disabled={mutation.isPending}>
{mutation.isPending ? 'Creating...' : 'Create Role'} {mutation.isPending ? 'Creating...' : 'Create Role'}
</Button> </Button>
<Button variant="secondary" onClick={() => navigate({ to: '/roles', search: {} as Record<string, unknown> })}> <Button variant="secondary" onClick={() => navigate({ to: '/roles', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
Cancel Cancel
</Button> </Button>
</div> </div>

View File

@@ -15,7 +15,9 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
import { Switch } from '@/components/ui/switch' import { Switch } from '@/components/ui/switch'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { moduleListOptions, moduleMutations, moduleKeys } from '@/api/modules' import { moduleListOptions, moduleMutations, moduleKeys } from '@/api/modules'
import { Save, Plus, Trash2, MapPin, Building, ImageIcon, Blocks, Lock, Settings2 } from 'lucide-react' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Save, Plus, Trash2, MapPin, Building, ImageIcon, Blocks, Lock, Settings2, Receipt, ShieldCheck } from 'lucide-react'
import { OVERRIDE_ACTIONS, getRequiredOverrides, setRequiredOverrides, getDiscountThreshold, setDiscountThreshold, type OverrideAction } from '@/components/pos/pos-manager-override'
import { toast } from 'sonner' import { toast } from 'sonner'
interface StoreSettings { interface StoreSettings {
@@ -118,128 +120,150 @@ function SettingsPage() {
<div className="space-y-6 max-w-3xl"> <div className="space-y-6 max-w-3xl">
<h1 className="text-2xl font-bold">Settings</h1> <h1 className="text-2xl font-bold">Settings</h1>
{/* Store Info */} <Tabs defaultValue="store">
<Card> <TabsList>
<CardHeader className="flex flex-row items-center justify-between"> <TabsTrigger value="store">Store</TabsTrigger>
<CardTitle className="text-lg flex items-center gap-2"> <TabsTrigger value="locations">Locations</TabsTrigger>
<Building className="h-5 w-5" />Store Information <TabsTrigger value="modules">Modules</TabsTrigger>
</CardTitle> <TabsTrigger value="receipt">Receipt</TabsTrigger>
{!editing && <Button variant="outline" size="sm" onClick={startEdit}>Edit</Button>} <TabsTrigger value="pos">POS Security</TabsTrigger>
{editing && ( <TabsTrigger value="advanced">Advanced</TabsTrigger>
<div className="flex gap-2"> </TabsList>
<Button size="sm" onClick={saveEdit} disabled={updateMutation.isPending}>
<Save className="mr-1 h-3 w-3" />{updateMutation.isPending ? 'Saving...' : 'Save'}
</Button>
<Button variant="ghost" size="sm" onClick={() => setEditing(false)}>Cancel</Button>
</div>
)}
</CardHeader>
<CardContent className="space-y-6">
{/* Logo upload */}
<div>
<LogoUpload entityId={store.id} category="logo" label="Store Logo" description="Used on PDFs, sidebar, and login screen" />
</div>
{editing ? ( <TabsContent value="store" className="mt-4">
<div className="space-y-4"> <Card>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <CardHeader className="flex flex-row items-center justify-between">
<div className="space-y-2"> <CardTitle className="text-lg flex items-center gap-2">
<Label>Store Name *</Label> <Building className="h-5 w-5" />Store Information
<Input value={fields.name} onChange={(e) => setFields((p) => ({ ...p, name: e.target.value }))} /> </CardTitle>
</div> {!editing && <Button variant="outline" size="sm" onClick={startEdit}>Edit</Button>}
<div className="space-y-2"> {editing && (
<Label>Timezone</Label> <div className="flex gap-2">
<Input value={fields.timezone} onChange={(e) => setFields((p) => ({ ...p, timezone: e.target.value }))} placeholder="America/Chicago" /> <Button size="sm" onClick={saveEdit} disabled={updateMutation.isPending}>
<Save className="mr-1 h-3 w-3" />{updateMutation.isPending ? 'Saving...' : 'Save'}
</Button>
<Button variant="ghost" size="sm" onClick={() => setEditing(false)}>Cancel</Button>
</div> </div>
)}
</CardHeader>
<CardContent className="space-y-6">
<div>
<LogoUpload entityId={store.id} category="logo" label="Store Logo" description="Used on PDFs, sidebar, and login screen" />
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2"> {editing ? (
<Label>Phone</Label> <div className="space-y-4">
<Input value={fields.phone} onChange={(e) => setFields((p) => ({ ...p, phone: e.target.value }))} /> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
</div> <div className="space-y-2">
<div className="space-y-2"> <Label>Store Name *</Label>
<Label>Email</Label> <Input value={fields.name} onChange={(e) => setFields((p) => ({ ...p, name: e.target.value }))} />
<Input value={fields.email} onChange={(e) => setFields((p) => ({ ...p, email: e.target.value }))} /> </div>
</div> <div className="space-y-2">
</div> <Label>Timezone</Label>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <Input value={fields.timezone} onChange={(e) => setFields((p) => ({ ...p, timezone: e.target.value }))} placeholder="America/Chicago" />
<div className="space-y-2"> </div>
<Label>Street</Label> </div>
<Input value={fields.street} onChange={(e) => setFields((p) => ({ ...p, street: e.target.value }))} /> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
</div> <div className="space-y-2">
<div className="grid grid-cols-3 gap-2"> <Label>Phone</Label>
<div className="space-y-2"> <Input value={fields.phone} onChange={(e) => setFields((p) => ({ ...p, phone: e.target.value }))} />
<Label>City</Label> </div>
<Input value={fields.city} onChange={(e) => setFields((p) => ({ ...p, city: e.target.value }))} /> <div className="space-y-2">
<Label>Email</Label>
<Input value={fields.email} onChange={(e) => setFields((p) => ({ ...p, email: e.target.value }))} />
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Street</Label>
<Input value={fields.street} onChange={(e) => setFields((p) => ({ ...p, street: e.target.value }))} />
</div>
<div className="grid grid-cols-3 gap-2">
<div className="space-y-2">
<Label>City</Label>
<Input value={fields.city} onChange={(e) => setFields((p) => ({ ...p, city: e.target.value }))} />
</div>
<div className="space-y-2">
<Label>State</Label>
<Input value={fields.state} onChange={(e) => setFields((p) => ({ ...p, state: e.target.value }))} />
</div>
<div className="space-y-2">
<Label>ZIP</Label>
<Input value={fields.zip} onChange={(e) => setFields((p) => ({ ...p, zip: e.target.value }))} />
</div>
</div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label>State</Label> <Label>Notes</Label>
<Input value={fields.state} onChange={(e) => setFields((p) => ({ ...p, state: e.target.value }))} /> <Textarea value={fields.notes} onChange={(e) => setFields((p) => ({ ...p, notes: e.target.value }))} rows={2} />
</div>
<div className="space-y-2">
<Label>ZIP</Label>
<Input value={fields.zip} onChange={(e) => setFields((p) => ({ ...p, zip: e.target.value }))} />
</div> </div>
</div> </div>
</div> ) : (
<div className="space-y-2"> <div className="space-y-4">
<Label>Notes</Label> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Textarea value={fields.notes} onChange={(e) => setFields((p) => ({ ...p, notes: e.target.value }))} rows={2} /> <div className="space-y-2 text-sm">
</div> <div className="text-lg font-semibold">{store.name}</div>
</div> <div><span className="text-muted-foreground">Phone:</span> {store.phone ?? '-'}</div>
) : ( <div><span className="text-muted-foreground">Email:</span> {store.email ?? '-'}</div>
<div className="space-y-4"> <div><span className="text-muted-foreground">Timezone:</span> {store.timezone}</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> </div>
<div className="space-y-2 text-sm"> <div className="space-y-2 text-sm">
<div className="text-lg font-semibold">{store.name}</div> {store.address && (store.address.street || store.address.city) ? (
<div><span className="text-muted-foreground">Phone:</span> {store.phone ?? '-'}</div> <>
<div><span className="text-muted-foreground">Email:</span> {store.email ?? '-'}</div> <div className="font-medium flex items-center gap-1"><MapPin className="h-3 w-3" />Address</div>
<div><span className="text-muted-foreground">Timezone:</span> {store.timezone}</div> {store.address.street && <div>{store.address.street}</div>}
<div>{[store.address.city, store.address.state, store.address.zip].filter(Boolean).join(', ')}</div>
</>
) : (
<div className="text-muted-foreground">No address set</div>
)}
{store.notes && <div className="mt-2"><span className="text-muted-foreground">Notes:</span> {store.notes}</div>}
</div>
</div>
</div> </div>
<div className="space-y-2 text-sm"> )}
{store.address && (store.address.street || store.address.city) ? ( </CardContent>
<> </Card>
<div className="font-medium flex items-center gap-1"><MapPin className="h-3 w-3" />Address</div> </TabsContent>
{store.address.street && <div>{store.address.street}</div>}
<div>{[store.address.city, store.address.state, store.address.zip].filter(Boolean).join(', ')}</div> <TabsContent value="locations" className="mt-4">
</> <Card>
) : ( <CardHeader className="flex flex-row items-center justify-between">
<div className="text-muted-foreground">No address set</div> <CardTitle className="text-lg flex items-center gap-2">
)} <MapPin className="h-5 w-5" />Locations
{store.notes && <div className="mt-2"><span className="text-muted-foreground">Notes:</span> {store.notes}</div>} </CardTitle>
<AddLocationDialog open={addLocationOpen} onOpenChange={setAddLocationOpen} />
</CardHeader>
<CardContent>
{locations.length === 0 ? (
<p className="text-sm text-muted-foreground text-center py-4">No locations yet add your first store location</p>
) : (
<div className="space-y-3">
{locations.map((loc) => (
<LocationCard key={loc.id} location={loc} />
))}
</div> </div>
</div> )}
</div> </CardContent>
)} </Card>
</CardContent> </TabsContent>
</Card>
{/* Locations */} <TabsContent value="modules" className="mt-4">
<Card> <ModulesCard />
<CardHeader className="flex flex-row items-center justify-between"> </TabsContent>
<CardTitle className="text-lg flex items-center gap-2">
<MapPin className="h-5 w-5" />Locations
</CardTitle>
<AddLocationDialog open={addLocationOpen} onOpenChange={setAddLocationOpen} />
</CardHeader>
<CardContent>
{locations.length === 0 ? (
<p className="text-sm text-muted-foreground text-center py-4">No locations yet add your first store location</p>
) : (
<div className="space-y-3">
{locations.map((loc) => (
<LocationCard key={loc.id} location={loc} />
))}
</div>
)}
</CardContent>
</Card>
{/* Modules */} <TabsContent value="receipt" className="mt-4">
<ModulesCard /> <ReceiptSettingsCard />
</TabsContent>
{/* App Configuration */} <TabsContent value="pos" className="mt-4">
<AppConfigCard /> <ManagerOverridesCard />
</TabsContent>
<TabsContent value="advanced" className="mt-4">
<AppConfigCard />
</TabsContent>
</Tabs>
</div> </div>
) )
} }
@@ -376,6 +400,174 @@ function AppConfigCard() {
) )
} }
const RECEIPT_FIELDS = [
{ key: 'receipt_header', label: 'Header Text', placeholder: "e.g. San Antonio's Premier String Shop", multiline: false },
{ key: 'receipt_footer', label: 'Footer Message', placeholder: 'e.g. Thank you for your business!', multiline: false },
{ key: 'receipt_return_policy', label: 'Return Policy', placeholder: 'e.g. Returns accepted within 30 days with receipt.', multiline: true },
{ key: 'receipt_social', label: 'Website / Social', placeholder: 'e.g. www.demostore.com | @demostore', multiline: false },
]
function ReceiptSettingsCard() {
const queryClient = useQueryClient()
const hasPermission = useAuthStore((s) => s.hasPermission)
const canEdit = hasPermission('settings.edit')
const { data: configData, isLoading } = useQuery(configOptions())
const configs = configData?.data ?? []
const [editing, setEditing] = useState(false)
const [fields, setFields] = useState<Record<string, string>>({})
function startEdit() {
const f: Record<string, string> = {}
for (const rf of RECEIPT_FIELDS) {
f[rf.key] = configs.find((c) => c.key === rf.key)?.value ?? ''
}
setFields(f)
setEditing(true)
}
const saveMutation = useMutation({
mutationFn: async () => {
for (const rf of RECEIPT_FIELDS) {
await api.patch(`/v1/config/${rf.key}`, { value: fields[rf.key] || '' })
}
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['config'] })
toast.success('Receipt settings saved')
setEditing(false)
},
onError: (err) => toast.error(err.message),
})
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle className="text-lg flex items-center gap-2">
<Receipt className="h-5 w-5" />Receipt Customization
</CardTitle>
{canEdit && !editing && <Button variant="outline" size="sm" onClick={startEdit}>Edit</Button>}
{editing && (
<div className="flex gap-2">
<Button size="sm" onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending}>
<Save className="mr-1 h-3 w-3" />{saveMutation.isPending ? 'Saving...' : 'Save'}
</Button>
<Button variant="ghost" size="sm" onClick={() => setEditing(false)}>Cancel</Button>
</div>
)}
</CardHeader>
<CardContent>
{isLoading ? (
<Skeleton className="h-32 w-full" />
) : editing ? (
<div className="space-y-4">
{RECEIPT_FIELDS.map((rf) => (
<div key={rf.key} className="space-y-2">
<Label>{rf.label}</Label>
{rf.multiline ? (
<Textarea
value={fields[rf.key] ?? ''}
onChange={(e) => setFields((p) => ({ ...p, [rf.key]: e.target.value }))}
placeholder={rf.placeholder}
rows={2}
/>
) : (
<Input
value={fields[rf.key] ?? ''}
onChange={(e) => setFields((p) => ({ ...p, [rf.key]: e.target.value }))}
placeholder={rf.placeholder}
/>
)}
</div>
))}
</div>
) : (
<div className="space-y-3">
{RECEIPT_FIELDS.map((rf) => {
const value = configs.find((c) => c.key === rf.key)?.value
return (
<div key={rf.key} className="flex justify-between items-start">
<span className="text-sm text-muted-foreground">{rf.label}</span>
<span className="text-sm text-right max-w-[60%]">{value || <span className="text-muted-foreground/50">Not set</span>}</span>
</div>
)
})}
</div>
)}
</CardContent>
</Card>
)
}
function ManagerOverridesCard() {
const [overrides, setOverrides] = useState<Set<OverrideAction>>(() => getRequiredOverrides())
const [threshold, setThreshold] = useState(() => getDiscountThreshold())
function toggle(action: OverrideAction) {
setOverrides((prev) => {
const next = new Set(prev)
if (next.has(action)) next.delete(action)
else next.add(action)
setRequiredOverrides(next)
return next
})
}
return (
<Card>
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2">
<ShieldCheck className="h-5 w-5" />Manager Overrides
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground mb-4">
When enabled, these actions will require a manager or admin to enter their PIN before proceeding. This setting is stored per device.
</p>
<div className="space-y-2">
{OVERRIDE_ACTIONS.map((action) => (
<div key={action.key} className="flex items-center justify-between p-3 rounded-md border">
<div className="min-w-0">
<span className="font-medium text-sm">{action.label}</span>
<p className="text-xs text-muted-foreground mt-0.5">{action.description}</p>
</div>
<Switch
checked={overrides.has(action.key)}
onCheckedChange={() => toggle(action.key)}
/>
</div>
))}
</div>
<div className="mt-4 p-3 rounded-md border">
<div className="flex items-center justify-between">
<div className="min-w-0">
<span className="font-medium text-sm">Discount Threshold</span>
<p className="text-xs text-muted-foreground mt-0.5">Require manager approval for discounts at or above this percentage. Set to 0 to disable.</p>
</div>
<div className="flex items-center gap-1">
<Input
type="number"
min="0"
max="100"
className="w-20 h-8 text-sm text-right"
value={threshold}
onChange={(e) => {
const v = parseInt(e.target.value) || 0
setThreshold(v)
setDiscountThreshold(v)
}}
/>
<span className="text-sm text-muted-foreground">%</span>
</div>
</div>
</div>
</CardContent>
</Card>
)
}
function LocationCard({ location }: { location: Location }) { function LocationCard({ location }: { location: Location }) {
const queryClient = useQueryClient() const queryClient = useQueryClient()
const [editing, setEditing] = useState(false) const [editing, setEditing] = useState(false)

View File

@@ -1,13 +1,18 @@
import { useState } from 'react' import { useState, useEffect } from 'react'
import { createFileRoute, useRouter, redirect } from '@tanstack/react-router' import { createFileRoute, useRouter, redirect } from '@tanstack/react-router'
import { useAuthStore } from '@/stores/auth.store' import { useAuthStore } from '@/stores/auth.store'
import { login } from '@/api/auth' import { login, forgotPassword } from '@/api/auth'
interface Branding {
name: string | null
hasLogo: boolean
}
export const Route = createFileRoute('/login')({ export const Route = createFileRoute('/login')({
beforeLoad: () => { beforeLoad: () => {
const { token } = useAuthStore.getState() const { token } = useAuthStore.getState()
if (token) { if (token) {
throw redirect({ to: '/accounts', search: {} as Record<string, unknown> }) throw redirect({ to: '/accounts', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
} }
}, },
component: LoginPage, component: LoginPage,
@@ -20,6 +25,16 @@ function LoginPage() {
const [password, setPassword] = useState('') const [password, setPassword] = useState('')
const [error, setError] = useState('') const [error, setError] = useState('')
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [branding, setBranding] = useState<Branding | null>(null)
const [forgotMode, setForgotMode] = useState(false)
const [forgotSent, setForgotSent] = useState(false)
useEffect(() => {
fetch('/v1/store/branding')
.then((r) => r.ok ? r.json() : null)
.then((data) => { if (data) setBranding(data) })
.catch(() => {})
}, [])
async function handleSubmit(e: React.FormEvent) { async function handleSubmit(e: React.FormEvent) {
e.preventDefault() e.preventDefault()
@@ -30,7 +45,7 @@ function LoginPage() {
const res = await login(email, password) const res = await login(email, password)
setAuth(res.token, res.user) setAuth(res.token, res.user)
await router.invalidate() await router.invalidate()
await router.navigate({ to: '/accounts', search: {} as Record<string, unknown>, replace: true }) await router.navigate({ to: '/accounts', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const }, replace: true })
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : 'Login failed') setError(err instanceof Error ? err.message : 'Login failed')
} finally { } finally {
@@ -48,45 +63,128 @@ function LoginPage() {
style={{ backgroundColor: '#131c2e', borderColor: '#1e2d45' }} style={{ backgroundColor: '#131c2e', borderColor: '#1e2d45' }}
> >
<div className="text-center mb-8"> <div className="text-center mb-8">
<h1 className="text-3xl font-bold" style={{ color: '#d8dfe9' }}>LunarFront</h1> {branding?.hasLogo ? (
<p className="text-sm mt-1" style={{ color: '#6b7a8d' }}>Small Business Management</p> <img src="/v1/store/logo" alt={branding.name ?? 'Store'} className="max-h-14 max-w-[220px] object-contain mx-auto" />
</div> ) : (
<form onSubmit={handleSubmit} className="space-y-4"> <h1 className="text-3xl font-bold" style={{ color: '#d8dfe9' }}>{branding?.name ?? 'LunarFront'}</h1>
<div className="space-y-2">
<label className="text-sm font-medium" style={{ color: '#b0bec5' }}>Email</label>
<input
type="email"
placeholder="you@example.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="h-9 w-full rounded-md border px-3 py-1 text-sm outline-none login-input"
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium" style={{ color: '#b0bec5' }}>Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="h-9 w-full rounded-md border px-3 py-1 text-sm outline-none login-input"
/>
</div>
{error && (
<p className="text-sm" style={{ color: '#e57373' }}>{error}</p>
)} )}
<button {branding?.name ? (
type="submit" <p className="text-[10px] mt-2" style={{ color: '#4a5568' }}>Powered by <span style={{ color: '#6b7a8d' }}>LunarFront</span></p>
disabled={loading} ) : (
className="h-9 w-full rounded-md border text-sm font-medium transition-colors disabled:opacity-50" <p className="text-sm mt-1" style={{ color: '#6b7a8d' }}>Small Business Management</p>
style={{ backgroundColor: 'transparent', color: '#d0d8e0', borderColor: '#3a4a62' }} )}
onMouseEnter={(e) => { (e.target as HTMLElement).style.backgroundColor = '#1e2d45' }} </div>
onMouseLeave={(e) => { (e.target as HTMLElement).style.backgroundColor = 'transparent' }} {forgotMode ? (
> forgotSent ? (
{loading ? 'Signing in...' : 'Sign in'} <div className="text-center space-y-4">
</button> <p className="text-sm" style={{ color: '#b0bec5' }}>If an account exists with that email, you will receive a password reset link.</p>
</form> <button
onClick={() => { setForgotMode(false); setForgotSent(false); setError('') }}
className="text-xs"
style={{ color: '#6b7a8d' }}
>
Back to sign in
</button>
</div>
) : (
<form onSubmit={async (e) => {
e.preventDefault()
setError('')
setLoading(true)
try {
await forgotPassword(email)
setForgotSent(true)
} catch (err) {
setError(err instanceof Error ? err.message : 'Something went wrong')
} finally {
setLoading(false)
}
}} className="space-y-4">
<p className="text-sm" style={{ color: '#b0bec5' }}>Enter your email and we'll send you a reset link.</p>
<div className="space-y-2">
<label className="text-sm font-medium" style={{ color: '#b0bec5' }}>Email</label>
<input
type="email"
placeholder="you@example.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="h-9 w-full rounded-md border px-3 py-1 text-sm outline-none login-input"
/>
</div>
{error && (
<p className="text-sm" style={{ color: '#e57373' }}>{error}</p>
)}
<button
type="submit"
disabled={loading}
className="h-9 w-full rounded-md border text-sm font-medium transition-colors disabled:opacity-50"
style={{ backgroundColor: 'transparent', color: '#d0d8e0', borderColor: '#3a4a62' }}
onMouseEnter={(e) => { (e.target as HTMLElement).style.backgroundColor = '#1e2d45' }}
onMouseLeave={(e) => { (e.target as HTMLElement).style.backgroundColor = 'transparent' }}
>
{loading ? 'Sending...' : 'Send reset link'}
</button>
<div className="text-center">
<button
type="button"
onClick={() => { setForgotMode(false); setError('') }}
className="text-xs"
style={{ color: '#6b7a8d' }}
>
Back to sign in
</button>
</div>
</form>
)
) : (
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium" style={{ color: '#b0bec5' }}>Email</label>
<input
type="email"
placeholder="you@example.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="h-9 w-full rounded-md border px-3 py-1 text-sm outline-none login-input"
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium" style={{ color: '#b0bec5' }}>Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="h-9 w-full rounded-md border px-3 py-1 text-sm outline-none login-input"
/>
</div>
{error && (
<p className="text-sm" style={{ color: '#e57373' }}>{error}</p>
)}
<button
type="submit"
disabled={loading}
className="h-9 w-full rounded-md border text-sm font-medium transition-colors disabled:opacity-50"
style={{ backgroundColor: 'transparent', color: '#d0d8e0', borderColor: '#3a4a62' }}
onMouseEnter={(e) => { (e.target as HTMLElement).style.backgroundColor = '#1e2d45' }}
onMouseLeave={(e) => { (e.target as HTMLElement).style.backgroundColor = 'transparent' }}
>
{loading ? 'Signing in...' : 'Sign in'}
</button>
<div className="text-center">
<button
type="button"
onClick={() => { setForgotMode(true); setError('') }}
className="text-xs"
style={{ color: '#6b7a8d' }}
>
Forgot password?
</button>
</div>
</form>
)}
</div> </div>
</div> </div>
) )

View File

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

View File

@@ -0,0 +1,154 @@
import { useState, useEffect } from 'react'
import { createFileRoute, Link } from '@tanstack/react-router'
import { resetPassword } from '@/api/auth'
interface Branding {
name: string | null
hasLogo: boolean
}
export const Route = createFileRoute('/reset-password')({
component: ResetPasswordPage,
})
function ResetPasswordPage() {
const { token } = Route.useSearch() as { token?: string }
const [password, setPassword] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const [success, setSuccess] = useState(false)
const [branding, setBranding] = useState<Branding | null>(null)
useEffect(() => {
fetch('/v1/store/branding')
.then((r) => r.ok ? r.json() : null)
.then((data) => { if (data) setBranding(data) })
.catch(() => {})
}, [])
async function handleSubmit(e: React.FormEvent) {
e.preventDefault()
setError('')
if (!token) {
setError('Missing reset token. Please use the link from your email.')
return
}
if (password !== confirmPassword) {
setError('Passwords do not match')
return
}
if (password.length < 12) {
setError('Password must be at least 12 characters')
return
}
setLoading(true)
try {
await resetPassword(token, password)
setSuccess(true)
} catch (err) {
setError(err instanceof Error ? err.message : 'Reset failed. The link may have expired.')
} finally {
setLoading(false)
}
}
return (
<div
className="flex min-h-screen items-center justify-center"
style={{ background: 'linear-gradient(135deg, #0f1724 0%, #142038 100%)' }}
>
<div
className="w-full max-w-sm rounded-xl border p-8 shadow-2xl"
style={{ backgroundColor: '#131c2e', borderColor: '#1e2d45' }}
>
<div className="text-center mb-8">
{branding?.hasLogo ? (
<img src="/v1/store/logo" alt={branding.name ?? 'Store'} className="max-h-14 max-w-[220px] object-contain mx-auto" />
) : (
<h1 className="text-3xl font-bold" style={{ color: '#d8dfe9' }}>{branding?.name ?? 'LunarFront'}</h1>
)}
{branding?.name ? (
<p className="text-[10px] mt-2" style={{ color: '#4a5568' }}>Powered by <span style={{ color: '#6b7a8d' }}>LunarFront</span></p>
) : (
<p className="text-sm mt-1" style={{ color: '#6b7a8d' }}>Small Business Management</p>
)}
</div>
{success ? (
<div className="text-center space-y-4">
<p style={{ color: '#81c784' }}>Password reset successfully.</p>
<Link
to="/login"
className="inline-block h-9 rounded-md border px-4 py-2 text-sm font-medium transition-colors"
style={{ color: '#d0d8e0', borderColor: '#3a4a62' }}
>
Sign in
</Link>
</div>
) : !token ? (
<div className="text-center space-y-4">
<p style={{ color: '#e57373' }}>Invalid reset link. Please request a new one.</p>
<Link
to="/login"
className="inline-block h-9 rounded-md border px-4 py-2 text-sm font-medium transition-colors"
style={{ color: '#d0d8e0', borderColor: '#3a4a62' }}
>
Back to sign in
</Link>
</div>
) : (
<>
<h2 className="text-lg font-semibold text-center mb-4" style={{ color: '#d8dfe9' }}>Set new password</h2>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium" style={{ color: '#b0bec5' }}>New password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
minLength={12}
placeholder="At least 12 characters"
className="h-9 w-full rounded-md border px-3 py-1 text-sm outline-none login-input"
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium" style={{ color: '#b0bec5' }}>Confirm password</label>
<input
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
className="h-9 w-full rounded-md border px-3 py-1 text-sm outline-none login-input"
/>
</div>
{error && (
<p className="text-sm" style={{ color: '#e57373' }}>{error}</p>
)}
<button
type="submit"
disabled={loading}
className="h-9 w-full rounded-md border text-sm font-medium transition-colors disabled:opacity-50"
style={{ backgroundColor: 'transparent', color: '#d0d8e0', borderColor: '#3a4a62' }}
onMouseEnter={(e) => { (e.target as HTMLElement).style.backgroundColor = '#1e2d45' }}
onMouseLeave={(e) => { (e.target as HTMLElement).style.backgroundColor = 'transparent' }}
>
{loading ? 'Resetting...' : 'Reset password'}
</button>
<div className="text-center">
<Link to="/login" className="text-xs" style={{ color: '#6b7a8d' }}>
Back to sign in
</Link>
</div>
</form>
</>
)}
</div>
</div>
)
}

View File

@@ -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>
)
}

View File

@@ -1,21 +1,72 @@
import { create } from 'zustand' import { create } from 'zustand'
interface POSUser {
id: string
email: string
firstName: string
lastName: string
role: string
}
type ReceiptFormat = 'thermal' | 'full'
interface POSState { interface POSState {
currentTransactionId: string | null currentTransactionId: string | null
locationId: string | null locationId: string | null
registerId: string | null
drawerSessionId: string | null drawerSessionId: string | null
locked: boolean
cashier: POSUser | null
token: string | null
lastActivity: number
accountId: string | null
accountName: string | null
accountPhone: string | null
accountEmail: string | null
receiptFormat: ReceiptFormat
setTransaction: (id: string | null) => void setTransaction: (id: string | null) => void
setLocation: (id: string) => void setLocation: (id: string) => void
setRegister: (id: string | null) => void
setDrawerSession: (id: string | null) => void setDrawerSession: (id: string | null) => void
unlock: (user: POSUser, token: string) => void
lock: () => void
touchActivity: () => void
setAccount: (id: string, name: string, phone?: string | null, email?: string | null) => void
clearAccount: () => void
setReceiptFormat: (format: ReceiptFormat) => void
reset: () => void reset: () => void
} }
const RECEIPT_FORMAT_KEY = 'pos_receipt_format'
function getStoredReceiptFormat(): ReceiptFormat {
const stored = localStorage.getItem(RECEIPT_FORMAT_KEY)
return stored === 'full' ? 'full' : 'thermal'
}
export const usePOSStore = create<POSState>((set) => ({ export const usePOSStore = create<POSState>((set) => ({
currentTransactionId: null, currentTransactionId: null,
locationId: null, locationId: null,
drawerSessionId: null, registerId: localStorage.getItem('pos_register_id') ?? null,
drawerSessionId: localStorage.getItem('pos_drawer_session_id') ?? null,
locked: true,
cashier: null,
token: null,
lastActivity: Date.now(),
accountId: null,
accountName: null,
accountPhone: null,
accountEmail: null,
receiptFormat: getStoredReceiptFormat(),
setTransaction: (id) => set({ currentTransactionId: id }), setTransaction: (id) => set({ currentTransactionId: id }),
setLocation: (id) => set({ locationId: id }), setLocation: (id) => set({ locationId: id }),
setDrawerSession: (id) => set({ drawerSessionId: id }), setRegister: (id) => { if (id) localStorage.setItem('pos_register_id', id); else localStorage.removeItem('pos_register_id'); set({ registerId: id }) },
reset: () => set({ currentTransactionId: null }), setDrawerSession: (id) => { if (id) localStorage.setItem('pos_drawer_session_id', id); else localStorage.removeItem('pos_drawer_session_id'); set({ drawerSessionId: id }) },
unlock: (user, token) => set({ locked: false, cashier: user, token, lastActivity: Date.now() }),
lock: () => set({ locked: true, currentTransactionId: null }),
touchActivity: () => set({ lastActivity: Date.now() }),
setAccount: (id, name, phone, email) => set({ accountId: id, accountName: name, accountPhone: phone ?? null, accountEmail: email ?? null }),
clearAccount: () => set({ accountId: null, accountName: null, accountPhone: null, accountEmail: null }),
setReceiptFormat: (format) => { localStorage.setItem(RECEIPT_FORMAT_KEY, format); set({ receiptFormat: format }) },
reset: () => set({ currentTransactionId: null, accountId: null, accountName: null, accountPhone: null, accountEmail: null }),
})) }))

View File

@@ -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 }),
}))

View File

@@ -44,6 +44,7 @@ export interface Product {
isSerialized: boolean isSerialized: boolean
isRental: boolean isRental: boolean
isDualUseRepair: boolean isDualUseRepair: boolean
isConsumable: boolean
price: string | null price: string | null
minPrice: string | null minPrice: string | null
rentalRateMonthly: string | null rentalRateMonthly: string | null

View File

@@ -28,7 +28,7 @@ export interface RepairTicket {
export interface RepairLineItem { export interface RepairLineItem {
id: string id: string
repairTicketId: string repairTicketId: string
itemType: 'labor' | 'part' | 'flat_rate' | 'misc' itemType: 'labor' | 'part' | 'flat_rate' | 'misc' | 'consumable'
description: string description: string
productId: string | null productId: string | null
qty: string qty: string
@@ -82,7 +82,7 @@ export interface RepairServiceTemplate {
itemCategory: string | null itemCategory: string | null
size: string | null size: string | null
description: string | null description: string | null
itemType: 'labor' | 'part' | 'flat_rate' | 'misc' itemType: 'labor' | 'part' | 'flat_rate' | 'misc' | 'consumable'
defaultPrice: string defaultPrice: string
defaultCost: string | null defaultCost: string | null
sortOrder: number sortOrder: number

View File

@@ -0,0 +1,37 @@
import { describe, it, expect } from 'bun:test'
import { TaxService } from '../../src/services/tax.service.js'
describe('TaxService.repairItemTypeToTaxCategory — consumable', () => {
it('maps consumable to exempt', () => {
expect(TaxService.repairItemTypeToTaxCategory('consumable')).toBe('exempt')
})
it('maps labor to service', () => {
expect(TaxService.repairItemTypeToTaxCategory('labor')).toBe('service')
})
it('maps part to goods', () => {
expect(TaxService.repairItemTypeToTaxCategory('part')).toBe('goods')
})
it('maps flat_rate to goods', () => {
expect(TaxService.repairItemTypeToTaxCategory('flat_rate')).toBe('goods')
})
it('maps misc to goods', () => {
expect(TaxService.repairItemTypeToTaxCategory('misc')).toBe('goods')
})
it('maps unknown type to goods (default)', () => {
expect(TaxService.repairItemTypeToTaxCategory('anything_else')).toBe('goods')
})
})
describe('TaxService.getRateForLocation — exempt category', () => {
it('returns 0 for exempt tax category without DB call', async () => {
// Passing a fake DB and fake locationId — should short-circuit and return 0
const fakeDb = {} as any
const rate = await TaxService.getRateForLocation(fakeDb, 'fake-id', 'exempt')
expect(rate).toBe(0)
})
})

View File

@@ -0,0 +1,144 @@
import { describe, it, expect } from 'bun:test'
import {
renderReceiptEmailHtml,
renderReceiptEmailText,
renderEstimateEmailHtml,
renderEstimateEmailText,
} from '../../src/utils/email-templates.js'
const mockReceipt = {
transaction: {
transactionNumber: 'TXN-20260405-001',
subtotal: '100.00',
discountTotal: '10.00',
taxTotal: '7.43',
total: '97.43',
paymentMethod: 'cash',
amountTendered: '100.00',
changeGiven: '2.57',
roundingAdjustment: null,
completedAt: '2026-04-05T12:00:00Z',
lineItems: [
{ description: 'Guitar Strings', qty: 2, unitPrice: '12.99', taxAmount: '2.14', lineTotal: '25.98', discountAmount: null },
{ description: 'Tuner', qty: 1, unitPrice: '74.02', taxAmount: '5.29', lineTotal: '74.02', discountAmount: null },
],
},
company: { name: 'Test Store', phone: '555-1234', email: 'store@test.com', address: { street: '123 Main St', city: 'Austin', state: 'TX', zip: '78701' } },
location: null,
}
const mockTicket = {
ticketNumber: 'RPR-001',
customerName: 'Jane Doe',
customerPhone: '555-5678',
itemDescription: 'Acoustic Guitar',
serialNumber: 'AG-12345',
problemDescription: 'Cracked neck joint',
estimatedCost: '250.00',
promisedDate: '2026-04-12',
status: 'pending_approval',
}
const mockLineItems = [
{ itemType: 'labor', description: 'Neck repair', qty: 1, unitPrice: '150.00', totalPrice: '150.00' },
{ itemType: 'part', description: 'Wood glue & clamps', qty: 1, unitPrice: '25.00', totalPrice: '25.00' },
{ itemType: 'flat_rate', description: 'Setup & restring', qty: 1, unitPrice: '75.00', totalPrice: '75.00' },
]
const mockCompany = { name: 'Test Store', phone: '555-1234', email: 'store@test.com', address: null }
describe('renderReceiptEmailHtml', () => {
it('renders HTML with transaction details', () => {
const html = renderReceiptEmailHtml(mockReceipt as any)
expect(html).toContain('TXN-20260405-001')
expect(html).toContain('Test Store')
expect(html).toContain('Guitar Strings')
expect(html).toContain('Tuner')
expect(html).toContain('$97.43')
expect(html).toContain('$100.00')
expect(html).toContain('Powered by LunarFront')
})
it('includes discount when present', () => {
const html = renderReceiptEmailHtml(mockReceipt as any)
expect(html).toContain('Discount')
expect(html).toContain('$10.00')
})
it('includes payment details for cash', () => {
const html = renderReceiptEmailHtml(mockReceipt as any)
expect(html).toContain('Cash')
expect(html).toContain('$2.57')
})
it('includes receipt config when provided', () => {
const config = { receipt_footer: 'Thank you!', receipt_return_policy: '30-day returns' }
const html = renderReceiptEmailHtml(mockReceipt as any, config)
expect(html).toContain('Thank you!')
expect(html).toContain('30-day returns')
})
it('includes company address', () => {
const html = renderReceiptEmailHtml(mockReceipt as any)
expect(html).toContain('123 Main St')
expect(html).toContain('Austin')
})
})
describe('renderReceiptEmailText', () => {
it('renders plain text with transaction details', () => {
const text = renderReceiptEmailText(mockReceipt as any)
expect(text).toContain('TXN-20260405-001')
expect(text).toContain('Guitar Strings')
expect(text).toContain('Total: $97.43')
expect(text).toContain('Cash')
})
})
describe('renderEstimateEmailHtml', () => {
it('renders HTML with ticket details', () => {
const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
expect(html).toContain('RPR-001')
expect(html).toContain('Jane Doe')
expect(html).toContain('Acoustic Guitar')
expect(html).toContain('AG-12345')
expect(html).toContain('Cracked neck joint')
expect(html).toContain('$250.00')
expect(html).toContain('Powered by LunarFront')
})
it('renders line items with types', () => {
const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
expect(html).toContain('Labor')
expect(html).toContain('Neck repair')
expect(html).toContain('Part')
expect(html).toContain('Flat Rate')
expect(html).toContain('Setup &amp; restring')
})
it('includes promised date', () => {
const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
expect(html).toContain('Estimated completion')
expect(html).toContain('Apr')
})
it('renders without line items using estimatedCost', () => {
const html = renderEstimateEmailHtml(mockTicket as any, [], mockCompany as any)
expect(html).toContain('$250.00')
})
it('includes company phone', () => {
const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
expect(html).toContain('555-1234')
})
})
describe('renderEstimateEmailText', () => {
it('renders plain text with ticket details', () => {
const text = renderEstimateEmailText(mockTicket as any, mockLineItems as any, mockCompany as any)
expect(text).toContain('RPR-001')
expect(text).toContain('Jane Doe')
expect(text).toContain('Neck repair')
expect(text).toContain('$250.00')
})
})

View File

@@ -114,6 +114,10 @@ async function setupDatabase() {
await testSql`INSERT INTO module_config (slug, name, description, licensed, enabled) VALUES (${m.slug}, ${m.name}, ${m.description}, true, ${m.enabled}) ON CONFLICT (slug) DO NOTHING` await testSql`INSERT INTO module_config (slug, name, description, licensed, enabled) VALUES (${m.slug}, ${m.name}, ${m.description}, true, ${m.enabled}) ON CONFLICT (slug) DO NOTHING`
} }
// Seed test email provider so email endpoints work without real provider
await testSql`INSERT INTO app_settings (key, value, is_encrypted) VALUES ('email.provider', 'test', false) ON CONFLICT (key) DO NOTHING`
await testSql`INSERT INTO app_settings (key, value, is_encrypted) VALUES ('email.from_address', 'Test Store <noreply@test.com>', false) ON CONFLICT (key) DO NOTHING`
await testSql.end() await testSql.end()
console.log(' Database ready') console.log(' Database ready')
} }

View File

@@ -114,6 +114,81 @@ suite('POS', { tags: ['pos'] }, (t) => {
t.assert.ok(res.data.pagination) t.assert.ok(res.data.pagination)
}) })
// ─── Drawer Adjustments ─────────────────────────────────────────────────────
t.test('adds cash out adjustment to open drawer', { tags: ['drawer', 'adjustments'] }, async () => {
const drawer = await t.api.post('/v1/drawer/open', { locationId: LOCATION_ID, openingBalance: 200 })
t.assert.status(drawer, 201)
const res = await t.api.post(`/v1/drawer/${drawer.data.id}/adjustments`, {
type: 'cash_out',
amount: 50,
reason: 'Bank deposit',
})
t.assert.status(res, 201)
t.assert.equal(res.data.type, 'cash_out')
t.assert.equal(parseFloat(res.data.amount), 50)
// Cleanup
await t.api.post(`/v1/drawer/${drawer.data.id}/close`, { closingBalance: 150 })
})
t.test('adds cash in adjustment to open drawer', { tags: ['drawer', 'adjustments'] }, async () => {
const drawer = await t.api.post('/v1/drawer/open', { locationId: LOCATION_ID, openingBalance: 100 })
t.assert.status(drawer, 201)
const res = await t.api.post(`/v1/drawer/${drawer.data.id}/adjustments`, {
type: 'cash_in',
amount: 25,
reason: 'Change from petty cash',
})
t.assert.status(res, 201)
t.assert.equal(res.data.type, 'cash_in')
// Cleanup
await t.api.post(`/v1/drawer/${drawer.data.id}/close`, { closingBalance: 125 })
})
t.test('lists drawer adjustments', { tags: ['drawer', 'adjustments'] }, async () => {
const drawer = await t.api.post('/v1/drawer/open', { locationId: LOCATION_ID, openingBalance: 100 })
await t.api.post(`/v1/drawer/${drawer.data.id}/adjustments`, { type: 'cash_out', amount: 30, reason: 'Test out' })
await t.api.post(`/v1/drawer/${drawer.data.id}/adjustments`, { type: 'cash_in', amount: 10, reason: 'Test in' })
const res = await t.api.get(`/v1/drawer/${drawer.data.id}/adjustments`)
t.assert.status(res, 200)
t.assert.equal(res.data.data.length, 2)
// Cleanup
await t.api.post(`/v1/drawer/${drawer.data.id}/close`, { closingBalance: 80 })
})
t.test('drawer close includes adjustments in expected balance', { tags: ['drawer', 'adjustments', 'close'] }, async () => {
const drawer = await t.api.post('/v1/drawer/open', { locationId: LOCATION_ID, openingBalance: 200 })
t.assert.status(drawer, 201)
// Cash out $50, cash in $20 → net adjustment = -$30
await t.api.post(`/v1/drawer/${drawer.data.id}/adjustments`, { type: 'cash_out', amount: 50, reason: 'Bank drop' })
await t.api.post(`/v1/drawer/${drawer.data.id}/adjustments`, { type: 'cash_in', amount: 20, reason: 'Extra change' })
// Close — expected = 200 (opening) + 0 (no sales) + 20 (in) - 50 (out) = 170
const closed = await t.api.post(`/v1/drawer/${drawer.data.id}/close`, { closingBalance: 170 })
t.assert.status(closed, 200)
t.assert.equal(parseFloat(closed.data.expectedBalance), 170)
t.assert.equal(parseFloat(closed.data.overShort), 0)
})
t.test('rejects adjustment on closed drawer', { tags: ['drawer', 'adjustments', 'validation'] }, async () => {
const drawer = await t.api.post('/v1/drawer/open', { locationId: LOCATION_ID, openingBalance: 100 })
await t.api.post(`/v1/drawer/${drawer.data.id}/close`, { closingBalance: 100 })
const res = await t.api.post(`/v1/drawer/${drawer.data.id}/adjustments`, {
type: 'cash_out',
amount: 10,
reason: 'Should fail',
})
t.assert.status(res, 409)
})
// ─── Transactions ────────────────────────────────────────────────────────── // ─── Transactions ──────────────────────────────────────────────────────────
t.test('creates a sale transaction', { tags: ['transactions', 'create'] }, async () => { t.test('creates a sale transaction', { tags: ['transactions', 'create'] }, async () => {
@@ -620,4 +695,404 @@ suite('POS', { tags: ['pos'] }, (t) => {
t.assert.status(closed, 200) t.assert.status(closed, 200)
t.assert.equal(closed.data.status, 'closed') t.assert.equal(closed.data.status, 'closed')
}) })
// ─── Repair → POS Integration ─────────────────────────────────────────────
t.test('lists ready-for-pickup repair tickets', { tags: ['repair-pos', 'list'] }, async () => {
// Create a repair ticket and move it to 'ready'
const ticket = await t.api.post('/v1/repair-tickets', {
customerName: 'POS Pickup Customer',
customerPhone: '555-0100',
problemDescription: 'Needs pickup test',
})
t.assert.status(ticket, 201)
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'intake' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'diagnosing' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'in_progress' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'ready' })
const res = await t.api.get('/v1/repair-tickets/ready')
t.assert.status(res, 200)
t.assert.ok(res.data.data.length >= 1)
const found = res.data.data.find((t: any) => t.id === ticket.data.id)
t.assert.ok(found)
t.assert.equal(found.status, 'ready')
})
t.test('searches ready tickets by customer name', { tags: ['repair-pos', 'search'] }, async () => {
const res = await t.api.get('/v1/repair-tickets/ready', { q: 'POS Pickup' })
t.assert.status(res, 200)
t.assert.ok(res.data.data.length >= 1)
})
t.test('creates repair payment transaction from ticket', { tags: ['repair-pos', 'create'] }, async () => {
// Create ticket with line items
const ticket = await t.api.post('/v1/repair-tickets', {
customerName: 'Repair Checkout Test',
problemDescription: 'Full checkout flow',
locationId: LOCATION_ID,
})
t.assert.status(ticket, 201)
// Add line items — labor (service tax) + part (goods tax) + consumable (excluded)
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/line-items`, {
itemType: 'labor',
description: 'Diagnostic labor',
qty: 1,
unitPrice: 60,
totalPrice: 60,
})
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/line-items`, {
itemType: 'part',
description: 'Replacement widget',
qty: 2,
unitPrice: 15,
totalPrice: 30,
})
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/line-items`, {
itemType: 'consumable',
description: 'Shop supplies',
qty: 1,
unitPrice: 5,
totalPrice: 5,
})
// Move to ready
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'intake' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'diagnosing' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'in_progress' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'ready' })
// Create POS transaction from repair
const txn = await t.api.post(`/v1/transactions/from-repair/${ticket.data.id}`, {
locationId: LOCATION_ID,
})
t.assert.status(txn, 201)
t.assert.equal(txn.data.transactionType, 'repair_payment')
t.assert.equal(txn.data.repairTicketId, ticket.data.id)
// Should have 2 line items (consumable excluded)
t.assert.equal(txn.data.lineItems.length, 2)
// Subtotal should be labor ($60) + parts ($30) = $90
const subtotal = parseFloat(txn.data.subtotal)
t.assert.equal(subtotal, 90)
// Tax should be > 0 (location has both goods and service rates)
const taxTotal = parseFloat(txn.data.taxTotal)
t.assert.greaterThan(taxTotal, 0)
// Verify labor line item has service tax rate (5%)
const laborItem = txn.data.lineItems.find((i: any) => i.description === 'Diagnostic labor')
t.assert.ok(laborItem)
t.assert.equal(parseFloat(laborItem.taxRate), 0.05)
// Verify part line item has goods tax rate (8.25%)
const partItem = txn.data.lineItems.find((i: any) => i.description === 'Replacement widget')
t.assert.ok(partItem)
t.assert.equal(parseFloat(partItem.taxRate), 0.0825)
})
t.test('rejects from-repair for non-ready ticket', { tags: ['repair-pos', 'validation'] }, async () => {
const ticket = await t.api.post('/v1/repair-tickets', {
customerName: 'Not Ready',
problemDescription: 'Still in progress',
})
t.assert.status(ticket, 201)
const res = await t.api.post(`/v1/transactions/from-repair/${ticket.data.id}`, {
locationId: LOCATION_ID,
})
t.assert.status(res, 400)
})
t.test('rejects duplicate pending repair payment', { tags: ['repair-pos', 'validation'] }, async () => {
// Create ready ticket with items
const ticket = await t.api.post('/v1/repair-tickets', {
customerName: 'Duplicate Test',
problemDescription: 'Duplicate check',
locationId: LOCATION_ID,
})
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/line-items`, {
itemType: 'labor', description: 'Work', qty: 1, unitPrice: 50, totalPrice: 50,
})
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'intake' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'diagnosing' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'in_progress' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'ready' })
// First creation succeeds
const first = await t.api.post(`/v1/transactions/from-repair/${ticket.data.id}`, { locationId: LOCATION_ID })
t.assert.status(first, 201)
// Second creation fails (pending transaction exists)
const second = await t.api.post(`/v1/transactions/from-repair/${ticket.data.id}`, { locationId: LOCATION_ID })
t.assert.status(second, 409)
})
t.test('completing repair payment marks ticket as picked_up', { tags: ['repair-pos', 'complete', 'e2e'] }, async () => {
// Open drawer
const drawer = await t.api.post('/v1/drawer/open', { locationId: LOCATION_ID, openingBalance: 200 })
t.assert.status(drawer, 201)
// Create ready ticket
const ticket = await t.api.post('/v1/repair-tickets', {
customerName: 'Pickup Complete Test',
problemDescription: 'End to end',
locationId: LOCATION_ID,
})
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/line-items`, {
itemType: 'flat_rate', description: 'Service package', qty: 1, unitPrice: 100, totalPrice: 100,
})
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'intake' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'diagnosing' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'in_progress' })
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/status`, { status: 'ready' })
// Create transaction from repair
const txn = await t.api.post(`/v1/transactions/from-repair/${ticket.data.id}`, { locationId: LOCATION_ID })
t.assert.status(txn, 201)
// Complete payment
const completed = await t.api.post(`/v1/transactions/${txn.data.id}/complete`, {
paymentMethod: 'card_present',
})
t.assert.status(completed, 200)
t.assert.equal(completed.data.status, 'completed')
// Verify ticket was updated to picked_up
const updatedTicket = await t.api.get(`/v1/repair-tickets/${ticket.data.id}`)
t.assert.status(updatedTicket, 200)
t.assert.equal(updatedTicket.data.status, 'picked_up')
t.assert.ok(updatedTicket.data.completedDate)
// Cleanup
await t.api.post(`/v1/drawer/${drawer.data.id}/close`, { closingBalance: 200 })
})
// ─── Product isConsumable Filter ──────────────────────────────────────────
t.test('isConsumable filter excludes consumables from product search', { tags: ['repair-pos', 'products'] }, async () => {
// Create a consumable product
const consumable = await t.api.post('/v1/products', {
name: 'Test Shop Supply',
isConsumable: true,
price: 2.50,
})
t.assert.status(consumable, 201)
// Create a normal product
const normal = await t.api.post('/v1/products', {
name: 'Test Normal Product',
isConsumable: false,
price: 25,
})
t.assert.status(normal, 201)
// Search with isConsumable=false should exclude the consumable
const res = await t.api.get('/v1/products', { q: 'Test', isConsumable: 'false' })
t.assert.status(res, 200)
const ids = res.data.data.map((p: any) => p.id)
t.assert.ok(!ids.includes(consumable.data.id))
t.assert.ok(ids.includes(normal.data.id))
// Search with isConsumable=true should only show consumable
const res2 = await t.api.get('/v1/products', { q: 'Test Shop Supply', isConsumable: 'true' })
t.assert.status(res2, 200)
t.assert.ok(res2.data.data.some((p: any) => p.id === consumable.data.id))
})
// ─── Registers ────────────────────────────────────────────────────────────
t.test('creates a register', { tags: ['registers', 'create'] }, async () => {
const res = await t.api.post('/v1/registers', { locationId: LOCATION_ID, name: 'Register 1' })
t.assert.status(res, 201)
t.assert.equal(res.data.name, 'Register 1')
t.assert.equal(res.data.locationId, LOCATION_ID)
t.assert.equal(res.data.isActive, true)
})
t.test('lists registers for a location', { tags: ['registers', 'list'] }, async () => {
await t.api.post('/v1/registers', { locationId: LOCATION_ID, name: 'Register 2' })
const res = await t.api.get('/v1/registers', { locationId: LOCATION_ID })
t.assert.status(res, 200)
t.assert.ok(res.data.data.length >= 2)
t.assert.ok(res.data.pagination)
})
t.test('lists all registers (lookup)', { tags: ['registers', 'list'] }, async () => {
const res = await t.api.get('/v1/registers/all', { locationId: LOCATION_ID })
t.assert.status(res, 200)
t.assert.ok(res.data.data.length >= 2)
})
t.test('updates a register name', { tags: ['registers', 'update'] }, async () => {
const created = await t.api.post('/v1/registers', { locationId: LOCATION_ID, name: 'Old Name' })
const res = await t.api.patch(`/v1/registers/${created.data.id}`, { name: 'New Name' })
t.assert.status(res, 200)
t.assert.equal(res.data.name, 'New Name')
})
t.test('deactivates a register', { tags: ['registers', 'delete'] }, async () => {
const created = await t.api.post('/v1/registers', { locationId: LOCATION_ID, name: 'Delete Me' })
const res = await t.api.del(`/v1/registers/${created.data.id}`)
t.assert.status(res, 200)
t.assert.equal(res.data.isActive, false)
})
// ─── Drawer Reports (X/Z) ────────────────────────────────────────────────
t.test('cleanup: close any open drawers for report tests', { tags: ['reports', 'setup'] }, async () => {
const current = await t.api.get('/v1/drawer/current', { locationId: LOCATION_ID })
if (current.status === 200 && current.data?.id) {
await t.api.post(`/v1/drawer/${current.data.id}/close`, { closingBalance: 0 })
}
})
t.test('drawer report returns correct data for a session with transactions', { tags: ['reports', 'drawer'] }, async () => {
// Open drawer
const drawer = await t.api.post('/v1/drawer/open', { locationId: LOCATION_ID, openingBalance: 100 })
t.assert.status(drawer, 201)
// Make a cash sale
const txn1 = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
await t.api.post(`/v1/transactions/${txn1.data.id}/line-items`, { description: 'Report Item 1', qty: 1, unitPrice: 50 })
await t.api.post(`/v1/transactions/${txn1.data.id}/complete`, { paymentMethod: 'cash', amountTendered: 60 })
// Make a card sale
const txn2 = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
await t.api.post(`/v1/transactions/${txn2.data.id}/line-items`, { description: 'Report Item 2', qty: 1, unitPrice: 30 })
await t.api.post(`/v1/transactions/${txn2.data.id}/complete`, { paymentMethod: 'card_present' })
// Void a transaction
const txn3 = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
await t.api.post(`/v1/transactions/${txn3.data.id}/line-items`, { description: 'Voided Item', qty: 1, unitPrice: 10 })
await t.api.post(`/v1/transactions/${txn3.data.id}/void`)
// Get X report (drawer still open)
const xReport = await t.api.get(`/v1/reports/drawer/${drawer.data.id}`)
t.assert.status(xReport, 200)
t.assert.equal(xReport.data.sales.transactionCount, 2)
t.assert.greaterThan(xReport.data.sales.grossSales, 0)
// Voided transactions don't go through complete() so drawerSessionId isn't set
// They won't appear in the drawer report — this is correct behavior
t.assert.ok(xReport.data.payments.cash)
t.assert.ok(xReport.data.payments.card_present)
t.assert.equal(xReport.data.cash.actualBalance, null) // not closed yet
// Close drawer
const closingAmount = 100 + xReport.data.cash.cashSales
await t.api.post(`/v1/drawer/${drawer.data.id}/close`, { closingBalance: closingAmount })
// Get Z report (drawer closed)
const zReport = await t.api.get(`/v1/reports/drawer/${drawer.data.id}`)
t.assert.status(zReport, 200)
t.assert.ok(zReport.data.session.closedAt)
t.assert.ok(zReport.data.cash.actualBalance !== null)
t.assert.ok(typeof zReport.data.cash.overShort === 'number')
})
t.test('drawerSessionId is populated on completed transactions', { tags: ['reports', 'drawer-session-id'] }, async () => {
// Cleanup any open drawer
const cur = await t.api.get('/v1/drawer/current', { locationId: LOCATION_ID })
if (cur.status === 200 && cur.data?.id) await t.api.post(`/v1/drawer/${cur.data.id}/close`, { closingBalance: 0 })
const drawer = await t.api.post('/v1/drawer/open', { locationId: LOCATION_ID, openingBalance: 100 })
t.assert.status(drawer, 201)
const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'Session ID Test', qty: 1, unitPrice: 20 })
await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
const completed = await t.api.get(`/v1/transactions/${txn.data.id}`)
t.assert.status(completed, 200)
t.assert.equal(completed.data.drawerSessionId, drawer.data.id)
await t.api.post(`/v1/drawer/${drawer.data.id}/close`, { closingBalance: 100 })
})
// ─── Daily Report ─────────────────────────────────────────────────────────
t.test('daily report aggregates across sessions', { tags: ['reports', 'daily'] }, async () => {
const today = new Date().toISOString().slice(0, 10)
const res = await t.api.get('/v1/reports/daily', { locationId: LOCATION_ID, date: today })
t.assert.status(res, 200)
t.assert.equal(res.data.date, today)
t.assert.ok(res.data.location)
t.assert.ok(Array.isArray(res.data.sessions))
t.assert.ok(typeof res.data.sales.grossSales === 'number')
t.assert.ok(typeof res.data.payments === 'object')
t.assert.ok(typeof res.data.cash.totalExpected === 'number')
})
t.test('daily report rejects missing params', { tags: ['reports', 'daily', 'validation'] }, async () => {
const res = await t.api.get('/v1/reports/daily', {})
t.assert.status(res, 400)
})
t.test('opens drawer with register', { tags: ['registers', 'drawer'] }, async () => {
// Cleanup any open drawer
const cur = await t.api.get('/v1/drawer/current', { locationId: LOCATION_ID })
if (cur.status === 200 && cur.data?.id) await t.api.post(`/v1/drawer/${cur.data.id}/close`, { closingBalance: 0 })
const reg = await t.api.post('/v1/registers', { locationId: LOCATION_ID, name: 'Report Register' })
t.assert.status(reg, 201)
const drawer = await t.api.post('/v1/drawer/open', { locationId: LOCATION_ID, registerId: reg.data.id, openingBalance: 100 })
t.assert.status(drawer, 201)
// Get report to check register info
const report = await t.api.get(`/v1/reports/drawer/${drawer.data.id}`)
t.assert.status(report, 200)
t.assert.ok(report.data.session.register)
t.assert.equal(report.data.session.register.name, 'Report Register')
// Cleanup
await t.api.post(`/v1/drawer/${drawer.data.id}/close`, { closingBalance: 100 })
})
// ─── Email Receipt ──────────────────────────────────────────────────────────
t.test('emails a receipt for a completed transaction', { tags: ['transactions', 'email'] }, async () => {
// Create and complete a transaction
const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'Email Test Item', qty: 1, unitPrice: 25 })
await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
const res = await t.api.post(`/v1/transactions/${txn.data.id}/email-receipt`, { email: 'customer@test.com' })
t.assert.status(res, 200)
t.assert.equal(res.data.message, 'Receipt sent')
t.assert.equal(res.data.sentTo, 'customer@test.com')
})
t.test('rejects email receipt with invalid email', { tags: ['transactions', 'email', 'validation'] }, async () => {
const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'Bad Email Item', qty: 1, unitPrice: 10 })
await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
const res = await t.api.post(`/v1/transactions/${txn.data.id}/email-receipt`, { email: 'not-an-email' })
t.assert.status(res, 400)
})
t.test('rejects email receipt with missing body', { tags: ['transactions', 'email', 'validation'] }, async () => {
const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'No Body Item', qty: 1, unitPrice: 10 })
await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
const res = await t.api.post(`/v1/transactions/${txn.data.id}/email-receipt`, {})
t.assert.status(res, 400)
})
t.test('receipt response includes customerEmail', { tags: ['transactions', 'email'] }, async () => {
// Create account with email
const acct = await t.api.post('/v1/accounts', { name: 'Email Customer', email: 'acct@test.com', billingMode: 'consolidated' })
const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID, accountId: acct.data.id })
await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'Account Item', qty: 1, unitPrice: 50 })
await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
const receipt = await t.api.get(`/v1/transactions/${txn.data.id}/receipt`)
t.assert.status(receipt, 200)
t.assert.equal(receipt.data.customerEmail, 'acct@test.com')
})
}) })

View File

@@ -510,4 +510,55 @@ suite('Repairs', { tags: ['repairs'] }, (t) => {
const fileRes = await fetch(`${t.baseUrl}${signedRes.data.url}`) const fileRes = await fetch(`${t.baseUrl}${signedRes.data.url}`)
t.assert.equal(fileRes.status, 200) t.assert.equal(fileRes.status, 200)
}) })
// ─── Email Estimate ─────────────────────────────────────────────────────────
t.test('emails a repair estimate', { tags: ['tickets', 'email'] }, async () => {
const ticket = await t.api.post('/v1/repair-tickets', {
customerName: 'Email Estimate Customer',
itemDescription: 'Broken Laptop',
problemDescription: 'Won\'t power on',
conditionIn: 'poor',
estimatedCost: 200,
})
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/line-items`, {
itemType: 'labor',
description: 'Diagnostic fee',
qty: 1,
unitPrice: 50,
})
const res = await t.api.post(`/v1/repair-tickets/${ticket.data.id}/email-estimate`, { email: 'customer@test.com' })
t.assert.status(res, 200)
t.assert.equal(res.data.message, 'Estimate sent')
t.assert.equal(res.data.sentTo, 'customer@test.com')
})
t.test('rejects estimate email with invalid email', { tags: ['tickets', 'email', 'validation'] }, async () => {
const ticket = await t.api.post('/v1/repair-tickets', {
customerName: 'Bad Email Customer',
problemDescription: 'Test',
conditionIn: 'good',
})
const res = await t.api.post(`/v1/repair-tickets/${ticket.data.id}/email-estimate`, { email: 'bad' })
t.assert.status(res, 400)
})
t.test('returns 404 for estimate email on nonexistent ticket', { tags: ['tickets', 'email', 'validation'] }, async () => {
const res = await t.api.post('/v1/repair-tickets/00000000-0000-0000-0000-000000000000/email-estimate', { email: 'test@test.com' })
t.assert.status(res, 404)
})
t.test('ticket detail includes customerEmail from account', { tags: ['tickets', 'email'] }, async () => {
const acct = await t.api.post('/v1/accounts', { name: 'Repair Email Acct', email: 'repair@test.com', billingMode: 'consolidated' })
const ticket = await t.api.post('/v1/repair-tickets', {
customerName: 'Repair Email Acct',
accountId: acct.data.id,
problemDescription: 'Email test',
conditionIn: 'good',
})
const detail = await t.api.get(`/v1/repair-tickets/${ticket.data.id}`)
t.assert.status(detail, 200)
t.assert.equal(detail.data.customerEmail, 'repair@test.com')
})
}) })

View File

@@ -4,7 +4,7 @@
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "bun --watch run src/main.ts", "dev": "bun --env-file=../../.env --watch run src/main.ts",
"start": "bun run src/main.ts", "start": "bun run src/main.ts",
"test": "bun test || true", "test": "bun test || true",
"test:watch": "bun test --watch", "test:watch": "bun test --watch",

View File

@@ -3,3 +3,5 @@ export * from './schema/users.js'
export * from './schema/accounts.js' export * from './schema/accounts.js'
export * from './schema/inventory.js' export * from './schema/inventory.js'
export * from './schema/pos.js' export * from './schema/pos.js'
export * from './schema/settings.js'
export * from './schema/accounting.js'

View File

@@ -0,0 +1,8 @@
CREATE TABLE IF NOT EXISTS "app_settings" (
"key" varchar(100) PRIMARY KEY,
"value" text,
"is_encrypted" boolean NOT NULL DEFAULT false,
"iv" text,
"created_at" timestamptz NOT NULL DEFAULT now(),
"updated_at" timestamptz NOT NULL DEFAULT now()
);

View File

@@ -0,0 +1,14 @@
DO $$ BEGIN
CREATE TYPE "adjustment_type" AS ENUM ('cash_in', 'cash_out');
EXCEPTION WHEN duplicate_object THEN NULL;
END $$;
CREATE TABLE IF NOT EXISTS "drawer_adjustment" (
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
"drawer_session_id" uuid NOT NULL REFERENCES "drawer_session"("id"),
"type" "adjustment_type" NOT NULL,
"amount" numeric(10, 2) NOT NULL,
"reason" text NOT NULL,
"created_by" uuid NOT NULL REFERENCES "user"("id"),
"created_at" timestamp with time zone DEFAULT now() NOT NULL
);

View File

@@ -0,0 +1,20 @@
ALTER TABLE "user" ADD COLUMN IF NOT EXISTS "pin_hash" varchar(255);
ALTER TABLE "user" ADD COLUMN IF NOT EXISTS "employee_number" varchar(20) UNIQUE;
-- Auto-assign employee numbers to existing users
DO $$ DECLARE r RECORD; num INT := 1001;
BEGIN
FOR r IN (SELECT id FROM "user" WHERE employee_number IS NULL ORDER BY created_at) LOOP
UPDATE "user" SET employee_number = num::text WHERE id = r.id;
num := num + 1;
END LOOP;
END $$;
-- Seed POS config
INSERT INTO "app_config" ("key", "value", "description") VALUES
('pos_lock_timeout', '15', 'POS auto-lock timeout in minutes (0 to disable)'),
('receipt_header', '', 'Text shown below logo on receipts'),
('receipt_footer', '', 'Thank you message at bottom of receipt'),
('receipt_return_policy', '', 'Return policy text on receipt (blank to hide)'),
('receipt_social', '', 'Website or social media shown on receipt')
ON CONFLICT ("key") DO NOTHING;

View File

@@ -0,0 +1,5 @@
-- Add 'consumable' to repair_line_item_type enum
ALTER TYPE repair_line_item_type ADD VALUE IF NOT EXISTS 'consumable';
-- Add is_consumable flag to product table
ALTER TABLE product ADD COLUMN IF NOT EXISTS is_consumable boolean NOT NULL DEFAULT false;

View File

@@ -0,0 +1,12 @@
-- Named registers for POS terminals
CREATE TABLE IF NOT EXISTS register (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
location_id UUID NOT NULL REFERENCES location(id),
name VARCHAR(100) NOT NULL,
is_active BOOLEAN NOT NULL DEFAULT true,
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
-- Link drawer sessions to registers
ALTER TABLE drawer_session ADD COLUMN IF NOT EXISTS register_id UUID REFERENCES register(id);

View File

@@ -0,0 +1,31 @@
-- Auto-assign employee_number on user insert if not provided
CREATE OR REPLACE FUNCTION assign_employee_number()
RETURNS TRIGGER AS $$
DECLARE next_num INT;
BEGIN
IF NEW.employee_number IS NULL OR NEW.employee_number = '' THEN
SELECT COALESCE(MAX(employee_number::int), 1000) + 1
INTO next_num
FROM "user"
WHERE employee_number ~ '^\d+$';
NEW.employee_number := next_num::text;
END IF;
RETURN NEW;
END;
$$ LANGUAGE plpgsql;
DROP TRIGGER IF EXISTS trg_assign_employee_number ON "user";
CREATE TRIGGER trg_assign_employee_number
BEFORE INSERT ON "user"
FOR EACH ROW
EXECUTE FUNCTION assign_employee_number();
-- Backfill any users missing an employee number
DO $$ DECLARE r RECORD; num INT;
BEGIN
SELECT COALESCE(MAX(employee_number::int), 1000) INTO num FROM "user" WHERE employee_number ~ '^\d+$';
FOR r IN (SELECT id FROM "user" WHERE employee_number IS NULL OR employee_number = '' ORDER BY created_at) LOOP
num := num + 1;
UPDATE "user" SET employee_number = num::text WHERE id = r.id;
END LOOP;
END $$;

View File

@@ -0,0 +1,189 @@
-- Accounting module tables
-- Enums
DO $$ BEGIN
CREATE TYPE invoice_status AS ENUM ('draft','sent','paid','partial','overdue','void','written_off');
EXCEPTION WHEN duplicate_object THEN NULL; END $$;
DO $$ BEGIN
CREATE TYPE account_type AS ENUM ('asset','liability','revenue','contra_revenue','cogs','expense');
EXCEPTION WHEN duplicate_object THEN NULL; END $$;
DO $$ BEGIN
CREATE TYPE normal_balance AS ENUM ('debit','credit');
EXCEPTION WHEN duplicate_object THEN NULL; END $$;
DO $$ BEGIN
CREATE TYPE journal_line_type AS ENUM ('debit','credit');
EXCEPTION WHEN duplicate_object THEN NULL; END $$;
DO $$ BEGIN
CREATE TYPE billing_run_status AS ENUM ('pending','running','completed','failed');
EXCEPTION WHEN duplicate_object THEN NULL; END $$;
-- Core: Invoice
CREATE TABLE IF NOT EXISTS "invoice" (
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
"invoice_number" varchar(50) UNIQUE NOT NULL,
"account_id" uuid NOT NULL REFERENCES "account"("id"),
"location_id" uuid REFERENCES "location"("id"),
"status" invoice_status NOT NULL DEFAULT 'draft',
"issue_date" date NOT NULL DEFAULT CURRENT_DATE,
"due_date" date NOT NULL DEFAULT CURRENT_DATE,
"source_type" varchar(50),
"source_id" uuid,
"subtotal" numeric(10,2) NOT NULL DEFAULT 0,
"discount_total" numeric(10,2) NOT NULL DEFAULT 0,
"tax_total" numeric(10,2) NOT NULL DEFAULT 0,
"total" numeric(10,2) NOT NULL DEFAULT 0,
"amount_paid" numeric(10,2) NOT NULL DEFAULT 0,
"balance" numeric(10,2) NOT NULL DEFAULT 0,
"refund_of_invoice_id" uuid REFERENCES "invoice"("id"),
"notes" text,
"created_by" uuid REFERENCES "user"("id"),
"created_at" timestamptz NOT NULL DEFAULT now(),
"updated_at" timestamptz NOT NULL DEFAULT now()
);
CREATE INDEX IF NOT EXISTS "invoice_account_id" ON "invoice" ("account_id");
CREATE INDEX IF NOT EXISTS "invoice_status" ON "invoice" ("status");
CREATE INDEX IF NOT EXISTS "invoice_source" ON "invoice" ("source_type", "source_id");
-- Core: Invoice Line Item
CREATE TABLE IF NOT EXISTS "invoice_line_item" (
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
"invoice_id" uuid NOT NULL REFERENCES "invoice"("id") ON DELETE CASCADE,
"description" varchar(255) NOT NULL,
"qty" integer NOT NULL DEFAULT 1,
"unit_price" numeric(10,2) NOT NULL,
"discount_amount" numeric(10,2) NOT NULL DEFAULT 0,
"tax_rate" numeric(5,4) NOT NULL DEFAULT 0,
"tax_amount" numeric(10,2) NOT NULL DEFAULT 0,
"line_total" numeric(10,2) NOT NULL DEFAULT 0,
"account_code_id" uuid,
"source_type" varchar(50),
"source_id" uuid,
"created_at" timestamptz NOT NULL DEFAULT now()
);
CREATE INDEX IF NOT EXISTS "invoice_line_item_invoice_id" ON "invoice_line_item" ("invoice_id");
-- Core: Payment Application
CREATE TABLE IF NOT EXISTS "payment_application" (
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
"invoice_id" uuid NOT NULL REFERENCES "invoice"("id"),
"transaction_id" uuid REFERENCES "transaction"("id"),
"amount" numeric(10,2) NOT NULL,
"applied_at" timestamptz NOT NULL DEFAULT now(),
"applied_by" uuid NOT NULL REFERENCES "user"("id"),
"notes" text,
"created_at" timestamptz NOT NULL DEFAULT now()
);
CREATE INDEX IF NOT EXISTS "payment_application_invoice_id" ON "payment_application" ("invoice_id");
-- Core: Account Balance (materialized AR)
CREATE TABLE IF NOT EXISTS "account_balance" (
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
"account_id" uuid NOT NULL UNIQUE REFERENCES "account"("id"),
"current_balance" numeric(10,2) NOT NULL DEFAULT 0,
"last_invoice_date" date,
"last_payment_date" date,
"updated_at" timestamptz NOT NULL DEFAULT now()
);
-- Accounting module: Chart of Accounts
CREATE TABLE IF NOT EXISTS "account_code" (
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
"code" varchar(10) UNIQUE NOT NULL,
"name" varchar(255) NOT NULL,
"account_type" account_type NOT NULL,
"normal_balance" normal_balance NOT NULL,
"is_system" boolean NOT NULL DEFAULT true,
"is_active" boolean NOT NULL DEFAULT true,
"created_at" timestamptz NOT NULL DEFAULT now(),
"updated_at" timestamptz NOT NULL DEFAULT now()
);
-- Accounting module: Journal Entry
CREATE TABLE IF NOT EXISTS "journal_entry" (
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
"entry_number" varchar(20) UNIQUE NOT NULL,
"entry_date" date NOT NULL DEFAULT CURRENT_DATE,
"entry_type" varchar(50) NOT NULL,
"source_type" varchar(50),
"source_id" uuid,
"description" text NOT NULL,
"total_debits" numeric(10,2) NOT NULL,
"total_credits" numeric(10,2) NOT NULL,
"is_void" boolean NOT NULL DEFAULT false,
"void_reason" text,
"voided_by" uuid REFERENCES "user"("id"),
"voided_at" timestamptz,
"reversal_of_id" uuid REFERENCES "journal_entry"("id"),
"created_by" uuid NOT NULL REFERENCES "user"("id"),
"created_at" timestamptz NOT NULL DEFAULT now()
);
CREATE INDEX IF NOT EXISTS "journal_entry_date" ON "journal_entry" ("entry_date");
CREATE INDEX IF NOT EXISTS "journal_entry_type" ON "journal_entry" ("entry_type");
-- Accounting module: Journal Entry Line
CREATE TABLE IF NOT EXISTS "journal_entry_line" (
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
"journal_entry_id" uuid NOT NULL REFERENCES "journal_entry"("id") ON DELETE CASCADE,
"account_code_id" uuid NOT NULL REFERENCES "account_code"("id"),
"line_type" journal_line_type NOT NULL,
"amount" numeric(10,2) NOT NULL,
"description" text,
"entity_type" varchar(50),
"entity_id" uuid,
"created_at" timestamptz NOT NULL DEFAULT now()
);
CREATE INDEX IF NOT EXISTS "journal_entry_line_entry_id" ON "journal_entry_line" ("journal_entry_id");
CREATE INDEX IF NOT EXISTS "journal_entry_line_account" ON "journal_entry_line" ("account_code_id");
-- Lessons module: Billing Run
CREATE TABLE IF NOT EXISTS "billing_run" (
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
"run_date" date NOT NULL,
"status" billing_run_status NOT NULL DEFAULT 'pending',
"enrollments_processed" integer NOT NULL DEFAULT 0,
"invoices_generated" integer NOT NULL DEFAULT 0,
"total_amount" numeric(10,2) NOT NULL DEFAULT 0,
"errors" jsonb,
"started_at" timestamptz,
"completed_at" timestamptz,
"created_by" uuid REFERENCES "user"("id"),
"created_at" timestamptz NOT NULL DEFAULT now()
);
-- Add nextBillingDate to enrollment
ALTER TABLE "enrollment" ADD COLUMN IF NOT EXISTS "next_billing_date" date;
-- Add accounting to module_config
INSERT INTO "module_config" ("slug", "name", "description", "licensed", "enabled")
VALUES ('accounting', 'Accounting', 'Chart of accounts, journal entries, and financial reports', true, false)
ON CONFLICT ("slug") DO NOTHING;
-- Seed chart of accounts
INSERT INTO "account_code" ("code", "name", "account_type", "normal_balance", "is_system") VALUES
('1000', 'Cash - Register Drawer', 'asset', 'debit', true),
('1100', 'Accounts Receivable', 'asset', 'debit', true),
('1200', 'Payment Clearing', 'asset', 'debit', true),
('1300', 'Inventory - Sale Stock', 'asset', 'debit', true),
('1320', 'Inventory - Parts & Supplies', 'asset', 'debit', true),
('2000', 'Sales Tax Payable', 'liability', 'credit', true),
('2110', 'Deferred Revenue - Lessons', 'liability', 'credit', true),
('4000', 'Sales Revenue', 'revenue', 'credit', true),
('4200', 'Lesson Revenue', 'revenue', 'credit', true),
('4300', 'Repair Revenue - Labor', 'revenue', 'credit', true),
('4310', 'Repair Revenue - Parts', 'revenue', 'credit', true),
('4900', 'Sales Discounts', 'contra_revenue', 'debit', true),
('4910', 'Sales Returns & Refunds', 'contra_revenue', 'debit', true),
('5000', 'Cost of Goods Sold', 'cogs', 'debit', true),
('5100', 'Repair Parts Cost', 'cogs', 'debit', true),
('6000', 'Cash Over / Short', 'expense', 'debit', true),
('6200', 'Bad Debt Expense', 'expense', 'debit', true)
ON CONFLICT ("code") DO NOTHING;

View File

@@ -288,6 +288,55 @@
"when": 1775494000000, "when": 1775494000000,
"tag": "0040_app-config", "tag": "0040_app-config",
"breakpoints": true "breakpoints": true
},
{
"idx": 41,
"version": "7",
"when": 1775580000000,
"tag": "0041_app_settings",
"breakpoints": true
},
{
"idx": 42,
"version": "7",
"when": 1775590000000,
"tag": "0042_drawer-adjustments",
"breakpoints": true
},
{
"idx": 43,
"version": "7",
"when": 1775600000000,
"tag": "0043_user-pin",
"breakpoints": true
},
{
"idx": 44,
"version": "7",
"when": 1775680000000,
"tag": "0044_repair-pos-consumable",
"breakpoints": true
},
{
"idx": 45,
"version": "7",
"when": 1775770000000,
"tag": "0045_registers-reports",
"breakpoints": true
},
{
"idx": 46,
"version": "7",
"when": 1775860000000,
"tag": "0046_auto-employee-number",
"breakpoints": true
},
{
"idx": 47,
"version": "7",
"when": 1775950000000,
"tag": "0047_accounting",
"breakpoints": true
} }
] ]
} }

View File

@@ -0,0 +1,147 @@
import { pgTable, uuid, varchar, text, numeric, integer, boolean, date, timestamp, jsonb, pgEnum } from 'drizzle-orm/pg-core'
import { accounts } from './accounts.js'
import { locations } from './stores.js'
import { users } from './users.js'
import { transactions } from './pos.js'
// Enums
export const invoiceStatusEnum = pgEnum('invoice_status', ['draft', 'sent', 'paid', 'partial', 'overdue', 'void', 'written_off'])
export const accountTypeEnum = pgEnum('account_type', ['asset', 'liability', 'revenue', 'contra_revenue', 'cogs', 'expense'])
export const normalBalanceEnum = pgEnum('normal_balance', ['debit', 'credit'])
export const journalLineTypeEnum = pgEnum('journal_line_type', ['debit', 'credit'])
export const billingRunStatusEnum = pgEnum('billing_run_status', ['pending', 'running', 'completed', 'failed'])
// Core: Invoice
export const invoices = pgTable('invoice', {
id: uuid('id').primaryKey().defaultRandom(),
invoiceNumber: varchar('invoice_number', { length: 50 }).notNull().unique(),
accountId: uuid('account_id').notNull().references(() => accounts.id),
locationId: uuid('location_id').references(() => locations.id),
status: invoiceStatusEnum('status').notNull().default('draft'),
issueDate: date('issue_date').notNull().defaultNow(),
dueDate: date('due_date').notNull().defaultNow(),
sourceType: varchar('source_type', { length: 50 }),
sourceId: uuid('source_id'),
subtotal: numeric('subtotal', { precision: 10, scale: 2 }).notNull().default('0'),
discountTotal: numeric('discount_total', { precision: 10, scale: 2 }).notNull().default('0'),
taxTotal: numeric('tax_total', { precision: 10, scale: 2 }).notNull().default('0'),
total: numeric('total', { precision: 10, scale: 2 }).notNull().default('0'),
amountPaid: numeric('amount_paid', { precision: 10, scale: 2 }).notNull().default('0'),
balance: numeric('balance', { precision: 10, scale: 2 }).notNull().default('0'),
refundOfInvoiceId: uuid('refund_of_invoice_id'),
notes: text('notes'),
createdBy: uuid('created_by').references(() => users.id),
createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
updatedAt: timestamp('updated_at', { withTimezone: true }).notNull().defaultNow(),
})
// Core: Invoice Line Item
export const invoiceLineItems = pgTable('invoice_line_item', {
id: uuid('id').primaryKey().defaultRandom(),
invoiceId: uuid('invoice_id').notNull().references(() => invoices.id, { onDelete: 'cascade' }),
description: varchar('description', { length: 255 }).notNull(),
qty: integer('qty').notNull().default(1),
unitPrice: numeric('unit_price', { precision: 10, scale: 2 }).notNull(),
discountAmount: numeric('discount_amount', { precision: 10, scale: 2 }).notNull().default('0'),
taxRate: numeric('tax_rate', { precision: 5, scale: 4 }).notNull().default('0'),
taxAmount: numeric('tax_amount', { precision: 10, scale: 2 }).notNull().default('0'),
lineTotal: numeric('line_total', { precision: 10, scale: 2 }).notNull().default('0'),
accountCodeId: uuid('account_code_id'),
sourceType: varchar('source_type', { length: 50 }),
sourceId: uuid('source_id'),
createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
})
// Core: Payment Application
export const paymentApplications = pgTable('payment_application', {
id: uuid('id').primaryKey().defaultRandom(),
invoiceId: uuid('invoice_id').notNull().references(() => invoices.id),
transactionId: uuid('transaction_id').references(() => transactions.id),
amount: numeric('amount', { precision: 10, scale: 2 }).notNull(),
appliedAt: timestamp('applied_at', { withTimezone: true }).notNull().defaultNow(),
appliedBy: uuid('applied_by').notNull().references(() => users.id),
notes: text('notes'),
createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
})
// Core: Account Balance (materialized AR)
export const accountBalances = pgTable('account_balance', {
id: uuid('id').primaryKey().defaultRandom(),
accountId: uuid('account_id').notNull().unique().references(() => accounts.id),
currentBalance: numeric('current_balance', { precision: 10, scale: 2 }).notNull().default('0'),
lastInvoiceDate: date('last_invoice_date'),
lastPaymentDate: date('last_payment_date'),
updatedAt: timestamp('updated_at', { withTimezone: true }).notNull().defaultNow(),
})
// Accounting module: Chart of Accounts
export const accountCodes = pgTable('account_code', {
id: uuid('id').primaryKey().defaultRandom(),
code: varchar('code', { length: 10 }).notNull().unique(),
name: varchar('name', { length: 255 }).notNull(),
accountType: accountTypeEnum('account_type').notNull(),
normalBalance: normalBalanceEnum('normal_balance').notNull(),
isSystem: boolean('is_system').notNull().default(true),
isActive: boolean('is_active').notNull().default(true),
createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
updatedAt: timestamp('updated_at', { withTimezone: true }).notNull().defaultNow(),
})
// Accounting module: Journal Entry
export const journalEntries = pgTable('journal_entry', {
id: uuid('id').primaryKey().defaultRandom(),
entryNumber: varchar('entry_number', { length: 20 }).notNull().unique(),
entryDate: date('entry_date').notNull().defaultNow(),
entryType: varchar('entry_type', { length: 50 }).notNull(),
sourceType: varchar('source_type', { length: 50 }),
sourceId: uuid('source_id'),
description: text('description').notNull(),
totalDebits: numeric('total_debits', { precision: 10, scale: 2 }).notNull(),
totalCredits: numeric('total_credits', { precision: 10, scale: 2 }).notNull(),
isVoid: boolean('is_void').notNull().default(false),
voidReason: text('void_reason'),
voidedBy: uuid('voided_by').references(() => users.id),
voidedAt: timestamp('voided_at', { withTimezone: true }),
reversalOfId: uuid('reversal_of_id'),
createdBy: uuid('created_by').notNull().references(() => users.id),
createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
})
// Accounting module: Journal Entry Line
export const journalEntryLines = pgTable('journal_entry_line', {
id: uuid('id').primaryKey().defaultRandom(),
journalEntryId: uuid('journal_entry_id').notNull().references(() => journalEntries.id, { onDelete: 'cascade' }),
accountCodeId: uuid('account_code_id').notNull().references(() => accountCodes.id),
lineType: journalLineTypeEnum('line_type').notNull(),
amount: numeric('amount', { precision: 10, scale: 2 }).notNull(),
description: text('description'),
entityType: varchar('entity_type', { length: 50 }),
entityId: uuid('entity_id'),
createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
})
// Lessons module: Billing Run
export const billingRuns = pgTable('billing_run', {
id: uuid('id').primaryKey().defaultRandom(),
runDate: date('run_date').notNull(),
status: billingRunStatusEnum('status').notNull().default('pending'),
enrollmentsProcessed: integer('enrollments_processed').notNull().default(0),
invoicesGenerated: integer('invoices_generated').notNull().default(0),
totalAmount: numeric('total_amount', { precision: 10, scale: 2 }).notNull().default('0'),
errors: jsonb('errors'),
startedAt: timestamp('started_at', { withTimezone: true }),
completedAt: timestamp('completed_at', { withTimezone: true }),
createdBy: uuid('created_by').references(() => users.id),
createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
})
// Type exports
export type Invoice = typeof invoices.$inferSelect
export type InvoiceInsert = typeof invoices.$inferInsert
export type InvoiceLineItem = typeof invoiceLineItems.$inferSelect
export type PaymentApplication = typeof paymentApplications.$inferSelect
export type AccountBalance = typeof accountBalances.$inferSelect
export type AccountCode = typeof accountCodes.$inferSelect
export type JournalEntry = typeof journalEntries.$inferSelect
export type JournalEntryLine = typeof journalEntryLines.$inferSelect
export type BillingRun = typeof billingRuns.$inferSelect

Some files were not shown because too many files have changed in this diff Show More