Complete design specification for all asset detail screens. Each page contains: component tree, design tokens, data fields, permissions, interactive web + mobile mockups with variant switchers.
Updated: 2026-04-29 · Branch: dev · BRDs: alfatraka-wiki/brds/
6 screens for the React Native mobile dashboard: Home (filter bar + Near Me + KPI chips + in-page filtering), Calendar, Map, Filtered Assets, Filter Sheet, More (bottom sheet). All connected in a single interactive mockup.
Full spec: brds/dashboard-mobile.qmd
Home (default, Near Me active, no GPS, 5 KPI filters, loading, empty, offline), Calendar (month, list, filtered, daysheet), Map (country, location, near me, filtered), Filtered Assets, Filter Sheet, More bottom sheet. Click through the full flow.
FieldSection groups (Identification, Product, Orders, Metadata), image panel, edit/delete/RFQ actions
Assembly · Component · Kit
Master-detail calendar (Day/Week/Month/List), detail panel with notes/docs, kit table variant
Assembly · Component · Kit (table)
Chat-style notes, modal add, attachment chips, preview panel, swipe-to-delete (mobile)
All asset types (shared)
ComponentGrid tiles/list, wizard detection, Add Component modal with portfolio API
Assembly · Kit
SpecField/SpecSection grouped rows, Auto badges, crimping section, assembly diagram
Assembly · Component
Web: sidebar + Google Map. Mobile redesign: Airbnb-style full-screen map + draggable bottom sheet (11 state mockups). Cascade assign/unassign, Current/Previous badges.
All asset types (shared)
Empty states, option sheet, BYOQR (type/scan/validate), auto-generate, view, delete. Create-asset wizard (single + qty>1). 13 web + 13 mobile variants.
All asset types (shared)
Current state + proposed: template list, preview, print. Bartender integration.
All asset types
6-step configurator. 4 methods (Crimp TP, Crimp OP, Field-Attachable, Clamped). 16 end-to-end scenarios covered. Mobile mockups are design-only (RN implementation TODO).
Full spec: alfatraka-wiki/brds/wizard-overview.qmd · Scenario matrix: wizard-scenarios.qmd
Portfolio grid, AGCloud-missing banner, dedup, filters · mobile
6-card picker, auto-skip, suggested-amber cards · mobile
4 method branches (crimp TP/OP, FA, clamped), RFQ catalog · fitting phase · mobile
Decision cards, 4a type re-pick, 4b components, mixed-methods asymmetric · mobile
Input + slider, unit toggle, cut-length calc, TBD fallback · mobile
Method Specs, editable Assembly Specs, Final Details (QR, approver) · mobile
Mobile variants follow the same naming with -mobile.html suffix. Full matrix in brds/wizard-scenarios.qmd.
For AI Agents
Point agents to the specific page for the tab they need to implement. Each page is self-contained with component paths, design tokens, permissions, and acceptance criteria.
BRDs: alfatraka-wiki/brds/detail-{tab}.qmd