40 lines
2.9 KiB
Markdown
40 lines
2.9 KiB
Markdown
# 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. |