# M-TRACK UI & Frontend Architecture Review

Based on the Replit App Summary, here is a structured breakdown of the UI components we need to build for the Flatlogic version of M-TRACK:

## 1. Authentication & Onboarding Flow
- **Landing Page:** A unified entry point displaying a user selection list.
- **Two-Tier Login:** Workers get frictionless 1-click access; Admins are prompted for a 4-6 digit hashed PIN.
- **First-Time Setup:** A "Bootstrap" mode if no Admin exists.
- **Tutorial Overlay:** An 8-step interactive onboarding flow (using context/state) for first-time logins.

## 2. Dashboard Interface
- **Stat Cards:** 4 clickable metric widgets (Active Jobs, Completed Units, Low Stock Alert, Total Jobs).
- **Charts:** A bar chart visualizing Job Statuses (Planned vs. In Progress vs. Completed).
- **Recent Activity:** A list of the 5 most recent jobs with status badges.
- **Work Management Panel:** Highlights in-progress work. Workers see their own queue; Admins can filter by any worker.

## 3. Jobs & BOM Management
- **Job Lists:** Filterable views for Active Jobs, Archived Jobs, and Job Templates.
- **Job Creation Modal:** Options to create manually or instantiate from a template.
- **BOM Import Workflow:** A critical UI for uploading Excel/CSV files, displaying extracted thumbnail images, and showing an import summary.
- **Component Tree View:** A hierarchical UI (Assemblies -> Sub-assemblies -> Parts) showing order indexes, quantities, and attached operations.

## 4. Shop Floor & Worker Queue (The Core Engine)
- **"Next Work" Unified Queue:** A prioritized, interleaved list of batched tasks (e.g., grouped cutting operations) and individual tasks.
- **Standardized Task Cards:** 
  - Line 1: `[Process] [Product] [Main Assembly] [Sub-Assembly]`
  - Line 2: `[Thickness] [Material] - [Customer] - [Serial Number]`
- **Task Controls:** Start, Stall (with mandatory reason prompt), Resume, and Done buttons.
- **Kanban Board:** A drag-and-drop interface mapping components across Pending, In Progress, and Completed columns.

## 5. Inventory Management
- **Tabbed Data Tables:** Separated views for Materials, Manufactured Parts, and Consumables.
- **Stock Adjustment Modal:** Interface to update quantities with transaction reasons (restock, consume, etc.).
- **Reorder Alerts:** A dedicated view for Admins to approve/dismiss alerts, with a notification badge in the sidebar.
- **QR / Barcode Integration:** UI to generate printable Kanban cards and a camera scanner view to trigger reorders.

## 6. Admin Settings & Analytics
- **User Management:** Assign roles, reset PINs, and map specific process types (e.g., cutting, welding) to individual workers.
- **Process Types Config:** A simple list manager to add/remove manufacturing process categories.
- **Time Study Reports:** Analytical tables filtering work events (start, stall, complete) by user/job to calculate active vs. stalled time.