A

AlfaTraka Developer Guide

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-19 · Branch: feature/detail-page-overhaul · BRDs: alfatraka-wiki/brds/

Detail View Tabs

Implemented

Asset Info

FieldSection groups (Identification, Product, Orders, Metadata), image panel, edit/delete/RFQ actions

Assembly · Component · Kit

WEBMOBILE
Implemented

Service Dates

Master-detail calendar (Day/Week/Month/List), detail panel with notes/docs, kit table variant

Assembly · Component · Kit (table)

WEBMOBILE
Implemented

Notes

Chat-style notes, modal add, attachment chips, preview panel, swipe-to-delete (mobile)

All asset types (shared)

WEBMOBILE
Implemented

Components

ComponentGrid tiles/list, wizard detection, Add Component modal with portfolio API

Assembly · Kit

WEBMOBILE
Implemented

Specifications

SpecField/SpecSection grouped rows, Auto badges, crimping section, assembly diagram

Assembly · Component

WEBMOBILE
Implemented

Location

Sidebar + Google Map, assign existing or create new location, cascade assign/unassign, Current/Previous badges

All asset types (shared)

WEBMOBILE
TODO — Redesign

QR Code

Current state + proposed design: centered QR, generate/print/download, camera scan (mobile)

All asset types

WEBMOBILE
TODO — Redesign

Label

Current state + proposed: template list, preview, print. Bartender integration.

All asset types

WEBMOBILE

Smart Assembly Wizard

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

Implemented (Web)Mobile TODO

Step 1 · Select Hose

Portfolio grid, AGCloud-missing banner, dedup, filters · mobile

Implemented (Web)

Step 2 · Select Method + Type

6-card picker, auto-skip, suggested-amber cards · mobile

Implemented (Web)

Step 3 · Select Side A

4 method branches (crimp TP/OP, FA, clamped), RFQ catalog · fitting phase · mobile

Implemented (Web)

Step 4 · Configure Side B

Decision cards, 4a type re-pick, 4b components, mixed-methods asymmetric · mobile

Implemented (Web)

Step 5 · Set Length

Input + slider, unit toggle, cut-length calc, TBD fallback · mobile

Implemented (Web)

Step 6 · Review & Create

Method Specs, editable Assembly Specs, Final Details (QR, approver) · mobile

Scenario Variants (S2–S16)

S2 · One-Piece Side A S3 · Side B Independent Type (4a) S3 · Side B Independent Components (4b) S4 · Mixed Crimp + FA S5 · Mixed Crimp + Clamped S6 · FA Symmetric S7 · FA Free Fitting S8 · Clamped Curated S9 · Clamped Suggested (approval) S10 · Auto-skip banner S11 · RFQ catalog S12 · Resume draft dialog S13 · Hose AGCloud missing S15 · Multi-qty manual QR S16 · Length TBD warning Review · Asymmetric 2-col crimp Review · FA specs Review · Clamped specs Review · Approver selector Success overlay

Mobile variants follow the same naming with -mobile.html suffix. Full matrix in brds/wizard-scenarios.qmd.

What's in Each Page

1. Screenshot (Playwright)
2. Component Tree + file paths
3. Design Tokens (Tailwind)
4. Data Fields + API sources
5. Permissions (RIGHTKEYS)
6. All Variants listed
7. Status checklist
8. Interactive Web Mockup
9. Native Mobile Mockup (RN)

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