Appearance
UI Migration Matrix — MyHoreca Pay
Updated: 2026-07-17 (page polish: StatusTabs on import detail, forms → Stack/Input/Textarea, form-grid removed).
Route groups
| Group | Routes | Status | Notes |
|---|---|---|---|
| 1 Application shell | AppShell, Sidebar, TopBar | migrated | Collapse via logo; navy sidebar; icons from navIconMap |
| 2 Operational entry | /dashboard, /review-queue→Workbench Attention, /accountant-workbench | migrated | Workbench primary landing; Drawer; sequential mode |
| 3 Bank statements / recognition | /bank-statements*, recognition workspace | migrated | Detail: MetricCard + StatusTabs + EmptyState |
| 4 Matching | /name-matching, rules tab, wizard | migrated | Wizard forms on Stack/Input |
| 5 Syrve / financial | documents, allocations, posting, reconciliation, anomalies | migrated | WorkflowStepper / Diagnostics from shared |
| 6 Admin / settings | settings, connections, platform users, workers | migrated | Stack forms; Switch |
Component matrix
| Component | Location | Status |
|---|---|---|
| All base + workflow UI | shared/ui | migrated |
Textarea | shared/ui FormControls | added |
StatusTabs | shared/ui | used on BankStatementDetailPage |
@/components/ui | — | removed |
CSS colocation
| Area | File |
|---|---|
| Document review / recognition | components/bank-recognition/documentReview.css |
| Bank statements upload | pages/bank-statements/bankStatementsUpload.css |
| Payment posting flow | pages/payment-allocations/paymentPostingFlow.css |
| Login / invite / context | pages/login/loginPages.css |
| Counterparty match wizard | pages/matching/counterpartyMatchWizard.css |
| WorkflowStepper / StatusTabs / Diagnostics / Dropzone | shared/ui/components/*.module.css |
| Shared leftovers (form-field, tables, bank logos, duplicates, clickable metric) | styles/global.css |
Remaining work
Optional: convert remaining label.form-field wrappers to Input/Select label prop; full-route screenshot pack.
Blocked
None.