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
Sidebar + Google Map, assign existing or create new location, cascade assign/unassign, Current/Previous badges
All asset types (shared)
Current state + proposed design: centered QR, generate/print/download, camera scan (mobile)
All asset types
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