|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Logistica | Advanced Logistics Management Dashboard</title> |
|
|
<meta name="description" content="Logistica - Comprehensive logistics management platform for tracking shipments, inventory, and delivery routes"> |
|
|
<link rel="icon" href="https://cdn-icons-png.flaticon.com/512/2906/2906274.png" type="image/x-icon"> |
|
|
<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"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
.sidebar.collapsed .sidebar-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .logo-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .nav-item { |
|
|
justify-content: center; |
|
|
} |
|
|
.main-content { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.main-content.expanded { |
|
|
margin-left: 70px; |
|
|
} |
|
|
.chart-container { |
|
|
position: relative; |
|
|
height: 300px; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
position: fixed; |
|
|
z-index: 100; |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
.sidebar.open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
.main-content { |
|
|
margin-left: 0 !important; |
|
|
} |
|
|
.mobile-menu-btn { |
|
|
display: block !important; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-blue-800 text-white w-64 flex flex-col"> |
|
|
|
|
|
<div class="p-4 flex items-center border-b border-blue-700"> |
|
|
<div class="bg-white p-2 rounded-lg mr-3"> |
|
|
<i class="fas fa-truck text-blue-800 text-xl"></i> |
|
|
</div> |
|
|
<h1 class="logo-text text-xl font-bold">LOGISTICA</h1> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="flex-1 overflow-y-auto py-4"> |
|
|
<div class="space-y-2 px-4"> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg bg-blue-700"> |
|
|
<i class="fas fa-tachometer-alt mr-3"></i> |
|
|
<span class="sidebar-text">Dashboard</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-shipping-fast mr-3"></i> |
|
|
<span class="sidebar-text">Shipments</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-warehouse mr-3"></i> |
|
|
<span class="sidebar-text">Inventory</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-route mr-3"></i> |
|
|
<span class="sidebar-text">Routes</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-users mr-3"></i> |
|
|
<span class="sidebar-text">Drivers</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span class="sidebar-text">Analytics</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span class="sidebar-text">Settings</span> |
|
|
</a> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="p-4 border-t border-blue-700 flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3"> |
|
|
<div class="sidebar-text"> |
|
|
<div class="font-medium">John Doe</div> |
|
|
<div class="text-sm text-blue-200">Admin</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-content flex-1 overflow-y-auto"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="flex items-center justify-between px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<button id="sidebarToggle" class="mobile-menu-btn hidden mr-4 text-gray-600 hover:text-blue-800"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Dashboard</h2> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-600 hover:text-blue-800"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-600 hover:text-blue-800"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button id="themeToggle" class="text-gray-600 hover:text-blue-800"> |
|
|
<i class="fas fa-moon text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-6 flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-800 mr-4"> |
|
|
<i class="fas fa-shipping-fast text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Total Shipments</p> |
|
|
<h3 class="text-2xl font-bold">1,248</h3> |
|
|
<p class="text-green-500 text-sm"><i class="fas fa-arrow-up mr-1"></i> 12% from last month</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6 flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-800 mr-4"> |
|
|
<i class="fas fa-check-circle text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Delivered</p> |
|
|
<h3 class="text-2xl font-bold">1,024</h3> |
|
|
<p class="text-green-500 text-sm"><i class="fas fa-arrow-up mr-1"></i> 8% from last month</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6 flex items-center"> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-800 mr-4"> |
|
|
<i class="fas fa-clock text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">In Transit</p> |
|
|
<h3 class="text-2xl font-bold">156</h3> |
|
|
<p class="text-red-500 text-sm"><i class="fas fa-arrow-down mr-1"></i> 5% from last month</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6 flex items-center"> |
|
|
<div class="p-3 rounded-full bg-red-100 text-red-800 mr-4"> |
|
|
<i class="fas fa-exclamation-triangle text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Delayed</p> |
|
|
<h3 class="text-2xl font-bold">68</h3> |
|
|
<p class="text-red-500 text-sm"><i class="fas fa-arrow-up mr-1"></i> 3% from last month</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 lg:col-span-2"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold">Shipment Status Overview</h3> |
|
|
<select class="border border-gray-300 rounded px-3 py-1 text-sm"> |
|
|
<option>Last 7 Days</option> |
|
|
<option>Last 30 Days</option> |
|
|
<option>Last 90 Days</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="shipmentChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Recent Activities</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 rounded-full bg-blue-100 text-blue-800 mr-3"> |
|
|
<i class="fas fa-truck"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Shipment #LGS-4829 delivered</p> |
|
|
<p class="text-gray-500 text-sm">Los Angeles to New York</p> |
|
|
<p class="text-gray-400 text-xs">2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 rounded-full bg-green-100 text-green-800 mr-3"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Inventory updated</p> |
|
|
<p class="text-gray-500 text-sm">Warehouse #3 received 250 units</p> |
|
|
<p class="text-gray-400 text-xs">5 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 rounded-full bg-yellow-100 text-yellow-800 mr-3"> |
|
|
<i class="fas fa-exclamation"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Delay reported</p> |
|
|
<p class="text-gray-500 text-sm">Shipment #LGS-4831 delayed by 2 days</p> |
|
|
<p class="text-gray-400 text-xs">Yesterday</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 rounded-full bg-purple-100 text-purple-800 mr-3"> |
|
|
<i class="fas fa-route"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">New route added</p> |
|
|
<p class="text-gray-500 text-sm">Chicago to Dallas via I-55</p> |
|
|
<p class="text-gray-400 text-xs">Yesterday</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h3 class="text-lg font-semibold">Recent Shipments</h3> |
|
|
</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">Tracking ID</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Origin</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Destination</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">Estimated Delivery</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> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#LGS-4835</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">New York, NY</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Miami, FL</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">Delivered</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button class="text-gray-600 hover:text-gray-900"><i class="fas fa-ellipsis-v"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#LGS-4834</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Chicago, IL</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Denver, CO</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">In Transit</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 18, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button class="text-gray-600 hover:text-gray-900"><i class="fas fa-ellipsis-v"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#LGS-4833</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Houston, TX</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Atlanta, GA</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">Processing</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 20, 202 |
|
|
<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=Douass2/logistica" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html>u |
