# Salesman Van UI Redesign ## Customer onboarding The new screens reuse SNYT Enterprise cards, status colors, inputs, responsive spacing and compact actions. No competing design system was introduced. The step-based form is usable on phone and tablet, and customer profiles use a horizontally scrollable five-tab hierarchy. Visual reference: `docs/design/salesman-van-redesign-concept.png` ## Design system - Dark operational shell: `background`, `surface`, `card`, and `elevated` layers. - Indigo primary actions, cyan information, emerald success, amber warning, and rose danger states. - 16–24 px radii, subtle one-pixel outlines, restrained gradients, and large touch targets. - Shared typography, inputs, buttons, chips, cards, navigation, dialogs, sheets, progress indicators, and transitions are defined in `AppTheme`. - Original company report colors remain isolated to the printable report document itself. ## Screen coverage - Authentication: splash and login. - App shell: home navigation, dashboard, and profile. - Catalog: catalog selection, product listing, and product details. - Sales: cart, customers, customer selection, order list, order details, and draft-order success. - Van operations: van inventory, boxes, box details, barcode scanner, and inventory check. - Reporting: Smart Daily Sales Report, manual entry sheet, offline/sync states, submission state, and PDF action. ## Interaction rules - Primary actions use filled buttons; secondary and destructive decisions stay visually distinct. - Search, scan, filters, quantities, and status affordances use consistent icon weight and semantic color. - Loading, empty, offline, pending-sync, error, and submitted states must remain readable without relying on color alone. - The mobile layout is the baseline. Wider layouts may expand content but must keep a readable maximum density. ## SNYT Enterprise UI v1 — 2026-08-09 The approved Returns/RMA dark enterprise direction is now the shared application foundation. Flutter centralizes palette, spacing, radii, typography, and semantic status mapping. Shared cards, metrics, badges, page/section headers, buttons, search, loading, empty, and error states are reusable across later migrations. This phase migrates only Splash, Login, the global navigation shell, salesman/manager Dashboards, and More/Profile. Phones retain compact bottom navigation and one-to-two-column content; wide tablets use a navigation rail and three-to-four-column dashboard capacity. Printable reports remain light and unchanged. Foundation polish keeps Dashboard quick actions content-driven and compact, and gives Returns status filters full horizontal edge padding with natural scrolling. No feature filtering or navigation behavior changed. Laravel uses the same tokens through CSS variables and reusable Blade primitives. Only the global layouts, sidebar, topbar, Dashboard, and common alert/button/form/table foundations are migrated in v1. ## Returns / RMA v1 Status: **Implemented in source; device QA required** ### Navigation and UI - `Returns` is a top-level bottom-navigation destination for salesman and manager/admin layouts. - Team chat remains available from the More page. - The global app theme now uses the approved SNYT dark visual system: deep navy/black backgrounds, cyan primary actions, teal success states, amber accounting states, red RMA states, subtle borders, rounded enterprise cards, and compact mobile-first spacing. - Existing business-specific report sheets keep their required company document appearance while app chrome follows the dark SNYT system. ### Returns Screens - Returns list with search and filters. - Create Return with mandatory saved customer. - Customer Return / Resellable and RMA / Defective type selection. Types cannot be mixed in one document. - Partial SKU/name/barcode search and barcode scanner. - Multiple items per return. - Optional photos. - Direct exchange from sellable van stock on RMA items. - Return details with separate operational and financial status. - Accounting Review for admin/supervisor accounts. - RMA warehouse handover list/create/details. - Dispatch to warehouse. - Full / partial / rejected warehouse confirmation. - Print A4 handover PDF. - Customer profile includes Sales / Returns / Payments tabs. ### Stock Behavior - Resellable items do not enter sellable stock until accountant approval. - RMA/Defective items enter a separate non-sellable RMA stock bucket. - Direct exchange shows current sellable VAN availability, adds the defective unit to RMA, and deducts the replacement from sellable van stock. - Flutter never performs authoritative stock math locally; Laravel confirms all stock-changing operations. ### API Returns APIs are exposed under the existing mobile API base and include returns, product search, accountant review, opening RMA reclassification, handover batches, warehouse confirmation, and handover PDF. ## Return status actions Return details now present distinct Draft, Pending Accountant, Approved, and Rejected states, with Save Draft, Submit for Review, Review & Approve, and Reject actions. Rejection reason uses the critical red state. ## RMA Stock visual system The responsive RMA Stock screen uses dark enterprise cards, red RMA quantities, amber transit states, cyan navigation, and green ready quantities. Phone layouts use two summary columns and tablet layouts use four. ## Full Flutter visual QA — 2026-08-09 - Validated the salesman journey on the physical SM X135G across Dashboard, catalogs and product presentation, van inventory, customers, orders, Returns/RMA, warehouse handovers, reporting, messages, map, sales tools, settings, inventory check, barcode scanning, and boxes. - Corrected low-contrast catalog pricing so prices remain immediately readable on dark product cards. - Rebuilt the shared `AppCard` surface as a Material card so list tiles retain visible ink, hover, and pressed states without framework warnings. - Standardized the empty van-box view with the shared enterprise empty-state component. - Aligned chat and role/import semantic accents with the dark enterprise palette; no workflow or permission behavior changed. - Representative after screenshots are stored under `docs/screenshots/full-flutter-qa/`. ## SNYT Enterprise UI v1 — Cross-Platform Consistency Completed Flutter and Laravel now share the same intentional product-family language: deep navy backgrounds, layered dark surfaces, cyan primary actions, restrained borders, 10–22 px radii, compact spacing, and the same text hierarchy. Shared status semantics are Draft neutral; Pending/Submitted amber; Approved/Delivered/Received green; In Transit cyan; Rejected/Cancelled/RMA red; Credit Note purple; Cash green; and On Account cyan. The final review compared Dashboard, catalog/products, customers, orders, Returns/RMA, warehouse handover, major forms, and empty/loading/error states. Only status presentation helpers and order badge colors changed; no workflow, API, pricing, stock, permission, or data behavior changed. The compact comparison set is stored under `docs/screenshots/cross-platform-consistency/`.