# CloudAudit UX screen and component map

## Design direction

Use the supplied visual direction: a premium, calm operations console using navy surfaces, turquoise primary actions, gold highlights, clear typography, compact data tables, and generous card spacing. The dashboard must remain a genuine view of live operational data, never a static mock-up.

## Navigation

```text
Overview: Dashboard, AI Insights, Notifications
Sales: POS, Sales, Invoices, Customers, Payments, Returns
Inventory: Products, Categories, Warehouses, Stock Levels, Transfers, Adjustments, Reorder Alerts
Purchasing: Purchase Orders, Goods Received, Suppliers, Bills, Purchase History
Accounting: Overview, Chart of Accounts, Journals, Receivables, Payables, Expenses, Cash & Bank, Tax
Reports: Sales, Inventory, Purchasing, Financial, Tax, AI Reports
Business: Branches, Employees, Users & Roles
Settings
```

## Screen inventory

| Area | Screens | Core states |
|---|---|---|
| Access | Sign in, password reset, organisation setup | idle, validation error, session expired |
| Dashboard | Executive overview, AI insights, activity | loading, empty new business, filtered branch/period |
| Inventory | product list/detail/form, categories, warehouse, movements, adjustment, low stock | zero stock, unavailable, approval pending |
| Sales | POS, sales list/detail, invoice form/detail, payment, return, customer profile | draft, approved, paid, partial, overdue, voided |
| Purchasing | supplier profile, PO list/detail/form, goods receipt, bill, payment | draft, submitted, approved, received, closed |
| Accounting | accounts, journals, journal detail, expenses, AR/AP, cash/bank | draft, posted, reversed, locked period |
| Reports | report selector, report viewer, export dialog | loading, no data, export queued/complete |
| AI | Copilot drawer/page, insight detail, action proposal review | thinking, tool failure, insufficient permission, confirmation required |
| Admin | branches, users, roles, settings, audit activity | access denied, unsaved changes |

## Reusable components

- `AppShell`: responsive sidebar, top bar, page heading, branch/date context.
- `DataTable`: server pagination, sort, filters, row action menu, empty/loading/error states.
- `MetricCard`: label, current value, comparison period, trend direction, drill-down action.
- `StatusBadge`: semantic colours and readable status labels; never colour alone.
- `MoneyInput`, `QuantityInput`, `DateRangePicker`, `EntityPicker`, `LineItemEditor`.
- `PostingTimeline`: source document → stock movement → journal → payment links.
- `ApprovalPanel`: proposer, reviewer, rationale, changes, attachments, decision history.
- `AuditTrail`: timestamp, actor, action, before/after summary, related record.
- `CopilotDrawer`: scoped conversation, sources, tool status, suggested next action.
- `ConfirmDangerModal`: records the consequence and requires deliberate confirmation.

## Responsive rules

- Desktop: persistent sidebar, multi-column dashboard, table-first management screens.
- Tablet: collapsible sidebar, two-column metrics, filter drawer.
- Phone: bottom or drawer navigation, single-column cards, POS prioritised, tables become summary cards with drill-in detail.
- Do not hide approval state, total amount, selected branch, or save/post controls on small screens.
- Touch targets: at least 44px; POS numeric/payment controls must be especially clear.

## Interaction rules

- Draft actions use “Save draft”; consequential actions use “Approve & post”, “Receive stock”, or “Record payment”.
- A posted transaction is shown with a transaction ID, journal link, and activity history.
- Destructive wording is replaced with reversible domain actions: “Void”, “Reverse”, or “Create credit note”.
- Toasts confirm non-critical saves; financial posting receives a durable success panel and printable receipt/document option.
- Dashboard widgets show the active branch/date scope and offer drill-down, not unexplained numbers.