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, Current/Previous badges, cascade unassign, scoped loading

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

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