coral-idea

bywho am

Act as an expert Principal Full-Stack Engineer and UX/UI Designer. Build a comprehensive, enterprise-grade Fleet Management System (FMS) Web Application. The application must feature a modern, high-contrast, clean dashboard utilizing a professional design system (like TailwindCSS and shadcn/ui component styles). ### 1. TECH STACK & SYSTEM ARCHITECTURE - Frontend: Single Page Application (SPA) architecture with modular, responsive views for both desktop and mobile. - Database & State: Relational model using mocked JSON/Local Schema containing operational data tables (Vehicles, Drivers, Maintenance, Routes, Telematics). - Core Modules: Implement logical separation between the modules below. ### 2. CORE DATABASE SCHEMA & STATE Initialize the application with a robust, simulated mock database containing: - Vehicles: ID, Make, Model, Year, VIN, License Plate, Status (Active, In Service, Maintenance, Inactive), Current Mileage, Fuel Level (%), Battery Health (%). - Drivers: ID, Name, License Number, Status (On Duty, Off Duty, Rest), Assigned Vehicle ID, Efficiency Score (0-100). - Maintenance Logs: Log ID, Vehicle ID, Service Type (Routine, Repair), Description, Cost, Date, Next Due Mileage. - Routes/Trips: Trip ID, Vehicle ID, Driver ID, Start Location, Destination, Status (En Route, Delayed, Completed), ETA. ### 3. MANDATORY UI VIEWS & FUNCTIONALITY Please generate a cohesive layout with a persistent sidebar navigation to switch seamlessly between these views: * **Executive Dashboard**: - Key metrics at the top (Total Active Fleet, Idle Vehicles, Active Maintenance Orders, Fuel Efficiency Trend). - An interactive visual container mimicking a "Live Telematics Map" with active routes, vehicles, and delay warnings. - An AI Operations Assistant panel allowing conversational natural language queries over the fleet state. * **Vehicle & Asset Ledger**: - Filterable data table displaying the complete vehicle inventory with individual health cards. - Inline buttons to "Log Expense", "Update Mileage", or "Change Status". * **Smart Maintenance Scheduler**: - Automated system flagging vehicles approaching preventive maintenance (e.g., 500km threshold alerts). - Work order generator featuring a digital checklist, cost logging, and simulated mechanic assignment. * **Driver & Route Optimization Hub**: - Live delivery tracking system showing trip completion rates, ETAs, and performance logs. - Simple interactive drag-and-drop tool or toggle form to assign available drivers to vacant vehicles. ### 4. TECHNICAL & INTERACTIVE CONSTRAINTS - Data Validation: Enforce clean front-end validation rules for new vehicle additions and status transitions. - State Persistence: CRUD actions across all tables must immediately reflect across the entire app state and persist locally within the current session. - Clean Code Structure: Break components out into highly readable, modular sub-files. Write optimized code without skipping or truncating critical logic block features. Begin building the base layout, navigation, and mock state initialization now.