Order Management System - Copy this React, Tailwind Component to your project

Create a User Interface (UI) for the Order Management System (KOMS), which will manage and track the entire production process, from order creation to shipping. The design should be user friendly, visually appealing, and optimized for both desktop and mobile use. The system will be used by staff in various departments, including fabric collection, cutting, sewing, quality control, and shipping. The UI should include easy to access features, clear status updates, and support for barcode scanning. Main Components of the UI: 1. Dashboard Overview Purpose: Display key metrics and order progress at a glance. Details: Total Orders Orders in Progress Pending Orders Shipped Orders Orders Waiting for Quality Check Visual Elements: Use cards or tiles for each metric with icons representing different stages. 2. Order List View Purpose: Allow users to view and filter orders based on status. Details: Columns: Order ID SKU Number Status (e.g., Order Received, In Cutting, Sewing, Quality Check, Shipped) Date (Order Date, Expected Completion Date) Filters: Date Range Order Status Department (Fabric Collection, Cutting, Sewing, etc.) Visual Elements: Use a table or card based format, with each row representing an order. Include sorting and filtering options for quick access. 3. SKU Details Page (After Barcode Scanning) Purpose: Display product details after the SKU is scanned. Details: Product Image SKU Number Order Quantity Current Status (e.g., "In Fabric Collection", "In Cutting", "Sewing Completed") Inventory Status (Available stock for each size, material quantity) Actions: Update Status (e.g., Fabric Collected, Cutting Completed) Add Notes (for production comments) Move to the next department (based on the current stage) 4. Departmental Workflow Pages Fabric Collection Page: Purpose: Guide staff through collecting the right materials for an order. Details: Fabric Type and Quantity Storage Location in the warehouse Button to "Mark Fabric Collected" after scanning. Cutting, Sewing, Quality Check Pages: Purpose: Provide clear instructions and tracking for each production step. Details: Show which products are ready for cutting, sewing, or quality check. Button to "Mark as Completed" after finishing the task. Shipping Page: Purpose: Display orders that are ready for shipping. Details: Order details, shipping address, and a button to "Mark as Shipped." 5. Notifications and Alerts Purpose: Inform staff of new orders, delayed tasks, or errors. Details: Notifications for new tasks (e.g., "New Order in Fabric Collection") Alerts for overdue tasks (e.g., "Cutting Stage Delayed") Visual Elements: Pop up notifications or a sidebar notification area. 6. Navigation Menu Purpose: Allow users to navigate between different sections of the system easily. Sections: Home (Dashboard) Orders (Order List View) Production Stages (Fabric Collection, Cutting, Sewing, etc.) Inventory Reports and Analytics Visual Elements: A side or top navigation bar with clear icons and labels. Design Style and Visual Elements: Color Palette: Use a clean, minimalistic palette with soft colors, focusing on easy readability. Use color coding for order statuses (e.g., Green for "Completed", Yellow for "In Progress", Red for "Delayed"). Typography: Clear, legible fonts with distinct hierarchy (headings, subheadings, body text). Icons and Visual Indicators: Use icons to represent departments and statuses (e.g., scissors for cutting, sewing machine for sewing). Mobile Responsiveness: The design should be optimized for mobile devices, with touch friendly buttons and easy navigation. User Roles and Permissions: Admin Role: Full access to view all orders, departments, and generate reports. Departmental Staff Role: Access to only their department’s tasks (e.g., Fabric Collection staff can only see tasks related to fabric collection).