2.9 KiB
2.9 KiB
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]
- Line 1:
- 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.