Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BulkTrack - Bulk Delivery Logistics Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1a365d', | |
| secondary: '#2c5282', | |
| accent: '#4299e1', | |
| danger: '#e53e3e', | |
| success: '#38a169', | |
| warning: '#dd6b20' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .map-container { | |
| height: 400px; | |
| background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=40.7128,-74.0060&zoom=12&size=800x400&maptype=roadmap&key=YOUR_API_KEY'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .compartment { | |
| transition: all 0.2s ease; | |
| } | |
| .compartment:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .order-card { | |
| transition: all 0.2s ease; | |
| } | |
| .order-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .driver-avatar { | |
| transition: all 0.2s ease; | |
| } | |
| .driver-avatar:hover { | |
| transform: scale(1.1); | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: absolute; | |
| z-index: 50; | |
| left: -100%; | |
| } | |
| .sidebar.active { | |
| left: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Main Container --> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-primary text-white w-64 flex-shrink-0"> | |
| <div class="p-4 border-b border-secondary"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-truck-moving text-2xl text-accent mr-3"></i> | |
| <h1 class="text-xl font-bold">BulkTrack</h1> | |
| </div> | |
| </div> | |
| <nav class="p-4"> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Main</h3> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded bg-secondary"> | |
| <i class="fas fa-clipboard-list mr-3"></i> | |
| <span>Orders</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary"> | |
| <i class="fas fa-route mr-3"></i> | |
| <span>Routing</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary"> | |
| <i class="fas fa-truck mr-3"></i> | |
| <span>Fleet</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Inventory</h3> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary"> | |
| <i class="fas fa-gas-pump mr-3"></i> | |
| <span>Tank Monitoring</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary"> | |
| <i class="fas fa-boxes mr-3"></i> | |
| <span>Compartments</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Admin</h3> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary"> | |
| <i class="fas fa-users mr-3"></i> | |
| <span>Customers</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary"> | |
| <i class="fas fa-chart-bar mr-3"></i> | |
| <span>Reports</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span>Settings</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between p-4"> | |
| <div class="flex items-center"> | |
| <button id="mobile-menu-button" class="md:hidden mr-4 text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h2 class="text-xl font-semibold text-gray-800">Order Management</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-danger"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="flex items-center space-x-2"> | |
| <div class="h-8 w-8 rounded-full bg-accent flex items-center justify-center text-white"> | |
| <span>JD</span> | |
| </div> | |
| <span class="hidden md:inline">John Doe</span> | |
| <i class="fas fa-chevron-down hidden md:inline text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-4"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Today's Orders</p> | |
| <h3 class="text-2xl font-bold">24</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-50 text-accent"> | |
| <i class="fas fa-clipboard-list text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-green-500 text-sm">+2 from yesterday</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">In Progress</p> | |
| <h3 class="text-2xl font-bold">8</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-50 text-warning"> | |
| <i class="fas fa-truck-loading text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-gray-500 text-sm">3 delayed</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Completed</p> | |
| <h3 class="text-2xl font-bold">12</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-50 text-success"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-green-500 text-sm">100% on time</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Alerts</p> | |
| <h3 class="text-2xl font-bold">3</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-red-50 text-danger"> | |
| <i class="fas fa-exclamation-triangle text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-500 text-sm">2 urgent</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Order List --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <h3 class="font-semibold text-lg">Recent Orders</h3> | |
| <button class="bg-accent text-white px-4 py-2 rounded text-sm hover:bg-blue-700 transition"> | |
| <i class="fas fa-plus mr-2"></i> New Order | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order #</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1001</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Acme Industries</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Diesel (ULSD)</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-accent hover:text-blue-700 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1002</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Beta Corp</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Gasoline (Regular)</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">In Progress</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-accent hover:text-blue-700 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1003</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Gamma LLC</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lubricant (10W-30)</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Scheduled</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-accent hover:text-blue-700 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1004</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Delta Energy</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Kerosene</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Delayed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-accent hover:text-blue-700 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1005</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Epsilon Services</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Diesel (Dyed)</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Pending</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-accent hover:text-blue-700 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="p-4 border-t flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> orders | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 rounded border text-sm text-gray-700 hover:bg-gray-50">Previous</button> | |
| <button class="px-3 py-1 rounded border text-sm bg-accent text-white">1</button> | |
| <button class="px-3 py-1 rounded border text-sm text-gray-700 hover:bg-gray-50">2</button> | |
| <button class="px-3 py-1 rounded border text-sm text-gray-700 hover:bg-gray-50">3</button> | |
| <button class="px-3 py-1 rounded border text-sm text-gray-700 hover:bg-gray-50">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Route Planning --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b"> | |
| <h3 class="font-semibold text-lg">Route Planning</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="map-container rounded-lg mb-4"></div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="border rounded-lg p-4"> | |
| <h4 class="font-medium text-gray-700 mb-2">Vehicle Selection</h4> | |
| <select class="w-full border rounded p-2 text-sm"> | |
| <option>Select Vehicle</option> | |
| <option>Tanker #101 (Capacity: 8,000 gal)</option> | |
| <option>Tanker #102 (Capacity: 6,500 gal)</option> | |
| <option>Tanker #103 (Capacity: 9,000 gal)</option> | |
| </select> | |
| </div> | |
| <div class="border rounded-lg p-4"> | |
| <h4 class="font-medium text-gray-700 mb-2">Driver Assignment</h4> | |
| <select class="w-full border rounded p-2 text-sm"> | |
| <option>Select Driver</option> | |
| <option>John Smith (Available)</option> | |
| <option>Sarah Johnson (On Route)</option> | |
| <option>Michael Brown (Available)</option> | |
| </select> | |
| </div> | |
| <div class="border rounded-lg p-4"> | |
| <h4 class="font-medium text-gray-700 mb-2">Route Date</h4> | |
| <input type="date" class="w-full border rounded p-2 text-sm"> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="font-medium text-gray-700 mb-2">Compartments</h4> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3"> | |
| <div class="compartment border rounded-lg p-3 bg-blue-50"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="font-medium">Compartment 1</span> | |
| <span class="text-xs bg-white px-2 py-1 rounded">1,500 gal</span> | |
| </div> | |
| <select class="w-full border rounded p-1 text-xs"> | |
| <option>ULSD Diesel</option> | |
| <option>Dyed Diesel</option> | |
| <option>Regular Gas</option> | |
| </select> | |
| <div class="mt-2"> | |
| <div class="h-2 w-full bg-gray-200 rounded"> | |
| <div class="h-2 bg-blue-500 rounded" style="width: 75%"></div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">1,125 gal allocated</div> | |
| </div> | |
| </div> | |
| <div class="compartment border rounded-lg p-3 bg-green-50"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="font-medium">Compartment 2</span> | |
| <span class="text-xs bg-white px-2 py-1 rounded">1,500 gal</span> | |
| </div> | |
| <select class="w-full border rounded p-1 text-xs"> | |
| <option>Regular Gas</option> | |
| <option>ULSD Diesel</option> | |
| <option>Dyed Diesel</option> | |
| </select> | |
| <div class="mt-2"> | |
| <div class="h-2 w-full bg-gray-200 rounded"> | |
| <div class="h-2 bg-green-500 rounded" style="width: 50%"></div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">750 gal allocated</div> | |
| </div> | |
| </div> | |
| <div class="compartment border rounded-lg p-3 bg-yellow-50"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="font-medium">Compartment 3</span> | |
| <span class="text-xs bg-white px-2 py-1 rounded">1,500 gal</span> | |
| </div> | |
| <select class="w-full border rounded p-1 text-xs"> | |
| <option>Dyed Diesel</option> | |
| <option>ULSD Diesel</option> | |
| <option>Regular Gas</option> | |
| </select> | |
| <div class="mt-2"> | |
| <div class="h-2 w-full bg-gray-200 rounded"> | |
| <div class="h-2 bg-yellow-500 rounded" style="width: 25%"></div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">375 gal allocated</div> | |
| </div> | |
| </div> | |
| <div class="compartment border rounded-lg p-3 bg-gray-50"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="font-medium">Compartment 4</span> | |
| <span class="text-xs bg-white px-2 py-1 rounded">1,500 gal</span> | |
| </div> | |
| <select class="w-full border rounded p-1 text-xs"> | |
| <option>Empty</option> | |
| <option>ULSD Diesel</option> | |
| <option>Dyed Diesel</option> | |
| </select> | |
| <div class="mt-2"> | |
| <div class="h-2 w-full bg-gray-200 rounded"> | |
| <div class="h-2 bg-gray-400 rounded" style="width: 0%"></div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">0 gal allocated</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-3"> | |
| <button class="px-4 py-2 border rounded text-sm text-gray-700 hover:bg-gray-50">Cancel</button> | |
| <button class="px-4 py-2 bg-accent text-white rounded text-sm hover:bg-blue-700">Save Route</button> | |
| <button class="px-4 py-2 bg-success text-white rounded text-sm hover:bg-green-700">Optimize Route</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Driver Status --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b"> | |
| <h3 class="font-semibold text-lg">Driver Status</h3> | |
| </div> | |
| <div class="p-4 space-y-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="driver-avatar h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <span class="text-blue-800 font-medium">JS</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">John Smith</h4> | |
| <p class="text-sm text-gray-500">Tanker #101 - On Route</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800">3/5 stops</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="driver-avatar h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <span class="text-purple-800 font-medium">SJ</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">Tanker #102 - Loading</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-yellow-100 text-yellow-800">0/7 stops</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="driver-avatar h-12 w-12 rounded-full bg-green-100 flex items-center justify-center"> | |
| <span class="text-green-800 font-medium">MB</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Michael Brown</h4> | |
| <p class="text-sm text-gray-500">Tanker #103 - Available</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-800">No route</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-2 text-sm text-accent hover:underline flex items-center justify-center"> | |
| <i class="fas fa-plus mr-1"></i> Assign New Driver | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Inventory Alerts --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b"> | |
| <h3 class="font-semibold text-lg">Inventory Alerts</h3> | |
| </div> | |
| <div class="p-4 space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-red-100 text-red-600 mr-3"> | |
| <i class="fas fa-exclamation-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-sm">Low Inventory - ULSD Diesel</h4> | |
| <p class="text-xs text-gray-500">Tank #T-204 at Acme Industries is at 15% capacity</p> | |
| <div class="mt-1 text-xs text-gray-500">2 hours ago</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-sm">Delivery Variance</h4> | |
| <p class="text-xs text-gray-500">Order #ORD-1002 delivered 5% less than requested</p> | |
| <div class="mt-1 text-xs text-gray-500">Today, 10:30 AM</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-info-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-sm">Tank Maintenance Due</h4> | |
| <p class="text-xs text-gray-500">Tank #T-107 at Gamma LLC requires annual inspection</p> | |
| <div class="mt-1 text-xs text-gray-500">Yesterday</div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-2 text-sm text-accent hover:underline flex items-center justify-center"> | |
| View All Alerts | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b"> | |
| <h3 class="font-semibold text-lg">Quick Actions</h3> | |
| </div> | |
| <div class="p-4 grid grid-cols-2 gap-3"> | |
| <button class="flex flex-col items-center justify-center p-3 border rounded hover:bg-gray-50"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 text-accent flex items-center justify-center mb-2"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <span class="text-sm">New Order</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-3 border rounded hover:bg-gray-50"> | |
| <div class="h-10 w-10 rounded-full bg-green-100 text-success flex items-center justify-center mb-2"> | |
| <i class="fas fa-route"></i> | |
| </div> | |
| <span class="text-sm">Optimize Routes</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-3 border rounded hover:bg-gray-50"> | |
| <div class="h-10 w-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mb-2"> | |
| <i class="fas fa-file-export"></i> | |
| </div> | |
| <span class="text-sm">Export Data</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-3 border rounded hover:bg-gray-50"> | |
| <div class="h-10 w-10 rounded-full bg-yellow-100 text-warning flex items-center justify-center mb-2"> | |
| <i class="fas fa-bell"></i> | |
| </div> | |
| <span class="text-sm">Send Alert</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Deliveries --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b"> | |
| <h3 class="font-semibold text-lg">Recent Deliveries</h3> | |
| </div> | |
| <div class="p-4 space-y-4"> | |
| <div class="order-card border rounded-lg p-3"> | |
| <div class="flex justify-between items-start mb-1"> | |
| <h4 class="font-medium">#ORD-1001</h4> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Acme Industries - ULSD Diesel</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>1,200 gal</span> | |
| <span>Today, 9:45 AM</span> | |
| </div> | |
| </div> | |
| <div class="order-card border rounded-lg p-3"> | |
| <div class="flex justify-between items-start mb-1"> | |
| <h4 class="font-medium">#ORD-998</h4> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Beta Corp - Regular Gas</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>850 gal</span> | |
| <span>Today, 11:20 AM</span> | |
| </div> | |
| </div> | |
| <div class="order-card border rounded-lg p-3"> | |
| <div class="flex justify-between items-start mb-1"> | |
| <h4 class="font-medium">#ORD-997</h4> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Delta Energy - Kerosene</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>600 gal</span> | |
| <span>Yesterday, 3:15 PM</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-2 text-sm text-accent hover:underline flex items-center justify-center"> | |
| View Delivery History | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('active'); | |
| }); | |
| // Sample data for compartments (could be replaced with real data) | |
| const compartments = [ | |
| { id: 1, name: 'Compartment 1', capacity: 1500, product: 'ULSD Diesel', allocated: 1125 }, | |
| { id: 2, name: 'Compartment 2', capacity: 1500, product: 'Regular Gas', allocated: 750 }, | |
| { id: 3, name: 'Compartment 3', capacity: 1500, product: 'Dyed Diesel', allocated: 375 }, | |
| { id: 4, name: 'Compartment 4', capacity: 1500, product: 'Empty', allocated: 0 } | |
| ]; | |
| // Sample function to update compartment display | |
| function updateCompartments() { | |
| compartments.forEach(comp => { | |
| const element = document.querySelector(`.compartment:nth-child(${comp.id})`); | |
| if (element) { | |
| const progress = element.querySelector('.h-2.bg-blue-500, .h-2.bg-green-500, .h-2.bg-yellow-500, .h-2.bg-gray-400'); | |
| const allocatedText = element.querySelector('.text-xs.text-gray-500.mt-1'); | |
| if (progress) { | |
| const percentage = (comp.allocated / comp.capacity) * 100; | |
| progress.style.width = `${percentage}%`; | |
| // Change color based on fill level | |
| if (percentage > 80) { | |
| progress.classList.remove('bg-green-500', 'bg-yellow-500', 'bg-gray-400'); | |
| progress.classList.add('bg-blue-500'); | |
| } else if (percentage > 30) { | |
| progress.classList.remove('bg-blue-500', 'bg-yellow-500', 'bg-gray-400'); | |
| progress.classList.add('bg-green-500'); | |
| } else if (percentage > 0) { | |
| progress.classList.remove('bg-blue-500', 'bg-green-500', 'bg-gray-400'); | |
| progress.classList.add('bg-yellow-500'); | |
| } else { | |
| progress.classList.remove('bg-blue-500', 'bg-green-500', 'bg-yellow-500'); | |
| progress.classList.add('bg-gray-400'); | |
| } | |
| } | |
| if (allocatedText) { | |
| allocatedText.textContent = `${comp.allocated} gal allocated`; | |
| } | |
| } | |
| }); | |
| } | |
| // Initialize compartment display | |
| updateCompartments(); | |
| // Sample order data | |
| const orders = [ | |
| { id: 'ORD-1001', customer: 'Acme Industries', product: 'ULSD Diesel', status: 'Completed' }, | |
| { id: 'ORD-1002', customer: 'Beta Corp', product: 'Regular Gas', status: 'In Progress' }, | |
| { id: 'ORD-1003', customer: 'Gamma LLC', product: 'Lubricant (10W-30)', status: 'Scheduled' }, | |
| { id: 'ORD-1004', customer: 'Delta Energy', product: 'Kerosene', status: 'Delayed' }, | |
| { id: 'ORD-1005', customer: 'Epsilon Services', product: 'Dyed Diesel', status: 'Pending' } | |
| ]; | |
| // Sample function to update order status colors | |
| function updateOrderStatusColors() { | |
| const statusElements = document.querySelectorAll('span.px-2.inline-flex'); | |
| statusElements.forEach(element => { | |
| const statusText = element.textContent.trim(); | |
| switch(statusText) { | |
| case 'Completed': | |
| element.className = 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800'; | |
| break; | |
| case 'In Progress': | |
| element.className = 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800'; | |
| break; | |
| case 'Scheduled': | |
| element.className = 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800'; | |
| break; | |
| case 'Delayed': | |
| element.className = 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800'; | |
| break; | |
| case 'Pending': | |
| element.className = 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800'; | |
| break; | |
| } | |
| }); | |
| } | |
| // Initialize order status colors | |
| updateOrderStatusColors(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=johnfmarti/bulk-route" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |