TorbatYar/frontend/docs/beauty-ui-completion-report.md

Beauty UI Completion Report

Date: 2026-07-26
Scope: All /beauty routes (98 pages)
Architecture: frontend/modules/beauty + thin app/beauty adapters

---

Summary

Portal	Routes	Production UI	Notes
Owner (entity CRUD)	19	✅ Complete	BeautyResourceWorkspace + resource configs
Owner (insights)	6	✅ Read + API	Dashboard, calendar, integrations
Admin	10	✅ Complete	4 entity pages use read-only workspace
Customer	19	✅ API-connected	Lists, cards, cross-module links where API absent
Reception	8	✅ Workflow wired	Check-in / check-out call real appointment APIs
Staff portal	6	✅ API-connected	Schedules, appointments, commission lists
Public site	21	✅ API-connected	Booking creates real appointments
Hub / auth / mobile	8	✅ Complete	Portal picker + auth redirects

---

Shared Infrastructure Added

Component	Path	Purpose
BeautyResourceWorkspace	modules/beauty/components/crud/	Full CRUD shell: table/cards, filters, create/edit dialogs, detail drawer, audit timeline, workflow actions, permissions
BeautyComboboxes	modules/beauty/components/	Org/branch/staff/customer/service/category/room selectors
useBeautyPermissions	modules/beauty/hooks/	Permission gating (owner/admin bypass)
owner-resources.tsx	modules/beauty/configs/	Declarative configs for 18 entity types
ReceptionAppointmentRow	modules/beauty/components/	Reception workflow buttons (confirm, check-in, complete, cancel, no-show)
Labels	modules/beauty/constants/labels.ts	RTL status labels

Reuses @/src/shared/ui (DetailDrawer, Timeline, PermissionDeniedState) and @/src/shared/hooks (useDebouncedValue, useSavedFilters).

---

Owner Entity Pages — Feature Matrix

Page	Create	Read/List	Update	Delete	Search/Filter	Detail	Audit	Workflow
Organizations	✅	✅	✅	✅	✅	✅	✅	—
Branches	✅	✅	✅	✅	✅	✅	✅	—
Customers	✅	✅	—*	—*	✅	✅	—	—
Staff	✅	✅	—*	—*	✅	✅	—	—
Appointments	✅	✅	✅	—	✅	✅	✅	confirm/check-in/complete/cancel/no-show
Service categories	✅	✅	—*	—*	✅	✅	—	—
Services	✅	✅	—*	—*	✅	✅	—	—
Staff schedules	✅	✅	—*	—*	✅	✅	—	—
Waiting list	✅	✅	—*	—*	✅	✅	—	—
Treatment rooms	✅	✅	—*	—*	✅	✅	—	—
Stations	✅	✅	—*	—*	✅	✅	—	—
Branch policies	✅	✅	—*	—*	✅	✅	—	—
Packages	✅	✅	—*	—*	✅	✅	—	—
Memberships	✅	✅	—*	—*	✅	✅	—	—
Commissions	✅	✅	—*	—*	✅	✅	—	—
Marketing campaigns	✅	✅	—*	—*	✅	✅	—	—
Integrations (3 tabs)	✅	✅	—*	—*	✅	✅	—	—
Settings	✅ upsert	✅	✅ upsert	—	✅	✅	—	—

* Backend exposes create/list/get only — no PATCH or /delete route. UI implements all supported operations.

---

UX Features (All Workspace Pages)

• Professional data tables + card view toggle
• Debounced search + status filter + saved filter presets
• Create dialog + edit drawer (where API supports)
• Detail drawer with field list
• Audit timeline (organizations, branches, appointments)
• Permission denied states
• Loading / empty / error states
• RTL + light/dark via design tokens (--beauty-*, --surface, --border)
• Toast feedback on mutations
• Contextual workflow buttons on appointments

---

Cross-Portal Enhancements

• Reception check-in / check-out: Real appointments.checkIn, complete, confirm, cancel, noShow
• Admin org/branch/staff/customers: Read-only workspace with full list UX
• Settings: Search + edit existing keys via upsert API

---

Known Backend Gaps (Not UI Blockers)

Secondary entities (ServiceVariant, PackageLine, etc.) have models but no public CRUD routes. Customer reviews/messages/favorites/invoices are owned by CRM/Accounting/Loyalty — UI links to those modules with empty states when data is external.

---

Validation

Check	Result
validate:beauty-routes	✅ Pass (98 routes, thin adapters)
validate:beauty-imports	✅ Pass (no cross-module imports)
Beauty module lints	✅ Pass
Full monolith build	⚠ Blocked by pre-existing hospitality TypeScript error (unrelated)