|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Customs Brokerage Dashboard</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></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: '#1a56db', |
|
|
secondary: '#1d4ed8', |
|
|
accent: '#3b82f6', |
|
|
success: '#10b981', |
|
|
warning: '#f59e0b', |
|
|
danger: '#ef4444', |
|
|
dark: '#0f172a', |
|
|
light: '#f8fafc' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
.scrollbar-hide { |
|
|
-ms-overflow-style: none; |
|
|
scrollbar-width: none; |
|
|
} |
|
|
@media (prefers-color-scheme: dark) { |
|
|
body { |
|
|
background-color: #111827; |
|
|
color: #f3f4f6; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-900 antialiased"> |
|
|
|
|
|
<header class="bg-white dark:bg-gray-800 shadow-sm py-4 px-6 flex flex-col sm:flex-row items-center justify-between"> |
|
|
<div class="flex items-center space-x-3 mb-4 sm:mb-0"> |
|
|
<div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-ship text-white text-lg"></i> |
|
|
</div> |
|
|
<h1 class="text-xl font-bold dark:text-white">Customs Brokerage Dashboard</h1> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-3 items-center justify-center"> |
|
|
<div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg px-3 py-2"> |
|
|
<i class="fas fa-calendar text-gray-500 dark:text-gray-400 mr-2"></i> |
|
|
<select id="date-range" class="bg-transparent text-sm border-none focus:ring-0"> |
|
|
<option>Last 7 Days</option> |
|
|
<option selected>Last 30 Days</option> |
|
|
<option>Month to Date</option> |
|
|
<option>Quarter to Date</option> |
|
|
<option>Year to Date</option> |
|
|
<option>Custom Range</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> |
|
|
<span>Updated: <span id="last-updated">Now</span></span> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<button id="user-menu" class="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-white"> |
|
|
<i class="fas fa-user"></i> |
|
|
</button> |
|
|
<div id="user-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-2 z-20"> |
|
|
<a href="#" class="px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 block"><i class="fas fa-user mr-2"></i> Profile</a> |
|
|
<a href="#" class="px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 block"><i class="fas fa-cog mr-2"></i> Settings</a> |
|
|
<a href="#" class="px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 block"><i class="fas fa-sign-out-alt mr-2"></i> Logout</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex flex-col lg:flex-row p-4 gap-4 min-h-screen"> |
|
|
|
|
|
<aside class="w-full lg:w-64 bg-white dark:bg-gray-800 rounded-lg shadow p-4 h-fit lg:sticky lg:top-4"> |
|
|
<h2 class="text-lg font-semibold mb-4 dark:text-white">Filters</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 dark:text-gray-300">Importer/Exporter</label> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search..." class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:border-gray-600 px-3 py-2 text-sm"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 dark:text-gray-300">Port of Entry/Exit</label> |
|
|
<select class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:border-gray-600 px-3 py-2 text-sm"> |
|
|
<option>All Ports</option> |
|
|
<option>Port of Los Angeles</option> |
|
|
<option>Port of Long Beach</option> |
|
|
<option>Port of New York</option> |
|
|
<option>Port of Savannah</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 dark:text-gray-300">Mode of Transport</label> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="air" class="rounded text-primary"> |
|
|
<label for="air" class="ml-2 text-sm dark:text-gray-300">Air</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="sea" class="rounded text-primary" checked> |
|
|
<label for="sea" class="ml-2 text-sm dark:text-gray-300">Sea</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="land" class="rounded text-primary"> |
|
|
<label for="land" class="ml-2 text-sm dark:text-gray-300">Land</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="rail" class="rounded text-primary" checked> |
|
|
<label for="rail" class="ml-2 text-sm dark:text-gray-300">Rail</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 dark:text-gray-300">Shipment Status</label> |
|
|
<select class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:border-gray-600 px-3 py-2 text-sm"> |
|
|
<option>All Statuses</option> |
|
|
<option>Pending Clearance</option> |
|
|
<option>Cleared</option> |
|
|
<option>Under Examination</option> |
|
|
<option>Delayed</option> |
|
|
<option>Released</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 dark:text-gray-300">HS Code Category</label> |
|
|
<select class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:border-gray-600 px-3 py-2 text-sm"> |
|
|
<option>All Categories</option> |
|
|
<option>Machinery & Electronics</option> |
|
|
<option>Textiles & Apparel</option> |
|
|
<option>Automotive Parts</option> |
|
|
<option>Food Products</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 dark:text-gray-300">Broker/Agent</label> |
|
|
<select class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:border-gray-600 px-3 py-2 text-sm"> |
|
|
<option>All Brokers</option> |
|
|
<option>Global Shipping Co</option> |
|
|
<option>Oceanwide Logistics</option> |
|
|
<option>Continent Express</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<button class="w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg py-2 text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600"> |
|
|
<i class="fas fa-times mr-2"></i> Clear All Filters |
|
|
</button> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<main class="flex-1"> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 border-l-4 border-primary"> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Total Shipments</p> |
|
|
<div class="flex items-end justify-between mt-2"> |
|
|
<h3 class="text-2xl font-bold dark:text-white">1,247</h3> |
|
|
<div class="flex items-center text-success text-sm font-semibold"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 12.5% |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 border-l-4 border-secondary"> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Total Declared Value</p> |
|
|
<div class="flex items-end justify-between mt-2"> |
|
|
<h3 class="text-2xl font-bold dark:text-white">$5.2M</h3> |
|
|
<div class="flex items-center text-success text-sm font-semibold"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 8.3% |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 border-l-4 border-accent"> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Duties & Taxes Paid</p> |
|
|
<div class="flex items-end justify-between mt-2"> |
|
|
<h3 class="text-2xl font-bold dark:text-white">$780K</h3> |
|
|
<div class="flex items-center text-danger text-sm font-semibold"> |
|
|
<i class="fas fa-arrow-down mr-1"></i> 2.1% |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 border-l-4 border-success"> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Avg. Clearance Time</p> |
|
|
<div class="flex items-end justify-between mt-2"> |
|
|
<h3 class="text-2xl font-bold dark:text-white">48h</h3> |
|
|
<div class="flex items-center text-success text-sm font-semibold"> |
|
|
<i class="fas fa-arrow-down mr-1"></i> 10.2% |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 border-l-4 border-warning"> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Compliance Rate</p> |
|
|
<div class="flex items-end justify-between mt-2"> |
|
|
<h3 class="text-2xl font-bold dark:text-white">98.4%</h3> |
|
|
<div class="flex items-center text-success text-sm font-semibold"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 1.5% |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 border-l-4 border-danger"> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Shipments on Hold</p> |
|
|
<div class="flex items-end justify-between mt-2"> |
|
|
<h3 class="text-2xl font-bold dark:text-white">15</h3> |
|
|
<div class="flex items-center text-danger text-sm font-semibold"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 15% |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="font-semibold dark:text-white">Shipments by Status</h3> |
|
|
<button class="text-xs bg-gray-100 dark:bg-gray-700 rounded-full px-3 py-1"> |
|
|
<i class="fas fa-download mr-1"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
<div class="h-64"> |
|
|
<canvas id="statusChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="font-semibold dark:text-white">Duties & Taxes by Month</h3> |
|
|
<button class="text-xs bg-gray-100 dark:bg-gray-700 rounded-full px-3 py-1"> |
|
|
<i class="fas fa-download mr-1"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
<div class="h-64"> |
|
|
<canvas id="dutiesChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="font-semibold dark:text-white">Volume & Clearance Time</h3> |
|
|
<button class="text-xs bg-gray-100 dark:bg-gray-700 rounded-full px-3 py-1"> |
|
|
<i class="fas fa-download mr-1"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
<div class="h-64"> |
|
|
<canvas id="volumeChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="font-semibold dark:text-white">Top Importers by Value</h3> |
|
|
<button class="text-xs bg-gray-100 dark:bg-gray-700 rounded-full px-3 py-1"> |
|
|
<i class="fas fa-download mr-1"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
<div class="h-64"> |
|
|
<canvas id="importersChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4"> |
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4"> |
|
|
<h3 class="font-semibold dark:text-white mb-2 md:mb-0">Detailed Shipment Data</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search..." class="rounded-lg border-gray-300 dark:bg-gray-700 dark:border-gray-600 px-3 py-1 text-sm"> |
|
|
<i class="fas fa-search absolute right-3 top-2 text-gray-400"></i> |
|
|
</div> |
|
|
<button class="bg-gray-100 dark:bg-gray-700 rounded-lg px-3 py-1 text-sm"> |
|
|
<i class="fas fa-columns mr-1"></i> Columns |
|
|
</button> |
|
|
<button class="bg-primary text-white rounded-lg px-3 py-1 text-sm"> |
|
|
<i class="fas fa-download mr-1"></i> CSV |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full table-auto"> |
|
|
<thead class="bg-gray-100 dark:bg-gray-700"> |
|
|
<tr> |
|
|
<th class="text-left py-3 px-4 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Shipment ID <i class="fas fa-sort ml-1 text-gray-400"></i></th> |
|
|
<th class="text-left py-3 px-4 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Entry Date <i class="fas fa-sort ml-1 text-gray-400"></i></th> |
|
|
<th class="text-left py-3 px-4 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Importer</th> |
|
|
<th class="text-left py-3 px-4 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Port</th> |
|
|
<th class="text-left py-3 px-4 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Declared Value <i class="fas fa-sort ml-1 text-gray-400"></i></th> |
|
|
<th class="text-left py-3 px-4 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Duty Paid</th> |
|
|
<th class="text-left py-3 px-4 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Status</th> |
|
|
<th class="text-left py-3 px-4 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Action</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900"> |
|
|
<td class="py-3 px-4 text-sm font-medium dark:text-white">SHP-10234</td> |
|
|
<td class="py-3 px-4 text-sm">04/15/2023</td> |
|
|
<td class="py-3 px-4 text-sm">Globex Corp</td> |
|
|
<td class="py-3 px-4 text-sm">Los Angeles</td> |
|
|
<td class="py-3 px-4 text-sm">$125,000</td> |
|
|
<td class="py-3 px-4 text-sm">$14,250</td> |
|
|
<td class="py-3 px-4"><span class="bg-success text-white text-xs px-2 py-1 rounded-full">Cleared</span></td> |
|
|
<td class="py-3 px-4 text-sm"><button class="text-primary hover:underline">View</button></td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900"> |
|
|
<td class="py-3 px-4 text-sm font-medium dark:text-white">SHP-10235</td> |
|
|
<td class="py-3 px-4 text-sm">04/18/2023</td> |
|
|
<td class="py-3 px-4 text-sm">Acme Inc</td> |
|
|
<td class="py-3 px-4 text-sm">New York</td> |
|
|
<td class="py-3 px-4 text-sm">$89,500</td> |
|
|
<td class="py-3 px-4 text-sm">$8,350</td> |
|
|
<td class="py-3 px-4"><span class="bg-warning text-white text-xs px-2 py-1 rounded-full">Pending</span></td> |
|
|
<td class="py-3 px-4 text-sm"><button class="text-primary hover:underline">View</button></td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900"> |
|
|
<td class="py-3 px-4 text-sm font-medium dark:text-white">SHP-10236</td> |
|
|
<td class="py-3 px-4 text-sm">04/20/2023</td> |
|
|
<td class="py-3 px-4 text-sm">Wayne Ent</td> |
|
|
<td class="py-3 px-4 text-sm">Savannah</td> |
|
|
<td class="py-3 px-4 text-sm">$225,000</td> |
|
|
<td class="py-3 px-4 text-sm">$28,750</td> |
|
|
<td class="py-3 px-4"><span class="bg-danger text-white text-xs px-2 py-1 rounded-full">Delayed</span></td> |
|
|
<td class="py-3 px-4 text-sm"><button class="text-primary hover:underline">View</button></td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900"> |
|
|
<td class="py-3 px-4 text-sm font-medium dark:text-white">SHP-10237</td> |
|
|
<td class="py-3 px-4 text-sm">04/22/2023</td> |
|
|
<td class="py-3 px-4 text-sm">Stark Ind</td> |
|
|
<td class="py-3 px-4 text-sm">Long Beach</td> |
|
|
<td class="py-3 px-4 text-sm">$345,000</td> |
|
|
<td class="py-3 px-4 text-sm">$42,500</td> |
|
|
<td class="py-3 px-4"><span class="bg-secondary text-white text-xs px-2 py-1 rounded-full">Under Examination</span></td> |
|
|
<td class="py-3 px-4 text-sm"><button class="text-primary hover:underline">View</button></td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900"> |
|
|
<td class="py-3 px-4 text-sm font-medium dark:text-white">SHP-10238</td> |
|
|
<td class="py-3 px-4 text-sm">04/24/2023</td> |
|
|
<td class="py-3 px-4 text-sm">Initech Co</td> |
|
|
<td class="py-3 px-4 text-sm">Miami</td> |
|
|
<td class="py-3 px-4 text-sm">$78,200</td> |
|
|
<td class="py-3 px-4 text-sm">$9,100</td> |
|
|
<td class="py-3 px-4"><span class="bg-success text-white text-xs px-2 py-1 rounded-full">Cleared</span></td> |
|
|
<td class="py-3 px-4 text-sm"><button class="text-primary hover:underline">View</button></td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-4"> |
|
|
<div class="mb-4 sm:mb-0"> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">1247</span> entries</p> |
|
|
</div> |
|
|
<div> |
|
|
<nav class="flex"> |
|
|
<a href="#" class="mr-1 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-1 text-sm"><i class="fas fa-chevron-left"></i></a> |
|
|
<a href="#" class="mr-1 rounded border border-gray-300 dark:border-gray-600 bg-primary text-white px-3 py-1 text-sm">1</a> |
|
|
<a href="#" class="mr-1 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-1 text-sm">2</a> |
|
|
<a href="#" class="mr-1 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-1 text-sm">3</a> |
|
|
<a href="#" class="mr-1 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-1 text-sm">4</a> |
|
|
<a href="#" class="mr-1 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-1 text-sm"><i class="fas fa-chevron-right"></i></a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('user-menu').addEventListener('click', function() { |
|
|
const dropdown = document.getElementById('user-dropdown'); |
|
|
dropdown.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(event) { |
|
|
const dropdown = document.getElementById('user-dropdown'); |
|
|
const userMenu = document.getElementById('user-menu'); |
|
|
if (!userMenu.contains(event.target) && !dropdown.contains(event.target)) { |
|
|
dropdown.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const statusCtx = document.getElementById('statusChart').getContext('2d'); |
|
|
const statusChart = new Chart(statusCtx, { |
|
|
type: 'doughnut', |
|
|
data: { |
|
|
labels: ['Cleared', 'Pending', 'Under Examination', 'Delayed', 'Released'], |
|
|
datasets: [{ |
|
|
data: [52, 28, 12, 5, 3], |
|
|
backgroundColor: [ |
|
|
'#10b981', |
|
|
'#3b82f6', |
|
|
'#f59e0b', |
|
|
'#ef4444', |
|
|
'#8b5cf6' |
|
|
], |
|
|
borderWidth: 0 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'right', |
|
|
labels: { |
|
|
font: { |
|
|
size: 10 |
|
|
}, |
|
|
padding: 15 |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const dutiesCtx = document.getElementById('dutiesChart').getContext('2d'); |
|
|
const dutiesChart = new Chart(dutiesCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
|
|
datasets: [{ |
|
|
label: 'Duties & Taxes ($)', |
|
|
data: [120, 145, 130, 155, 140, 160, 150], |
|
|
backgroundColor: '#3b82f6', |
|
|
borderRadius: 3 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return '$' + value + 'K'; |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const volumeCtx = document.getElementById('volumeChart').getContext('2d'); |
|
|
const volumeChart = new Chart(volumeCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'], |
|
|
datasets: [ |
|
|
{ |
|
|
type: 'bar', |
|
|
label: 'Shipment Volume', |
|
|
data: [120, 145, 130, 160], |
|
|
backgroundColor: '#1d4ed8', |
|
|
borderRadius: 3, |
|
|
yAxisID: 'y' |
|
|
}, |
|
|
{ |
|
|
type: 'line', |
|
|
label: 'Avg. Clearance Time', |
|
|
data: [48, 44, 40, 42], |
|
|
borderColor: '#ef4444', |
|
|
backgroundColor: '#ef4444', |
|
|
borderWidth: 3, |
|
|
yAxisID: 'y1' |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Shipment Volume' |
|
|
}, |
|
|
position: 'left' |
|
|
}, |
|
|
y1: { |
|
|
beginAtZero: true, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Hours' |
|
|
}, |
|
|
position: 'right', |
|
|
grid: { |
|
|
drawOnChartArea: false |
|
|
} |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top' |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const importersCtx = document.getElementById('importersChart').getContext('2d'); |
|
|
const importersChart = new Chart(importersCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Globex Corp', 'Wayne Ent', 'Stark Ind', 'Initech Co', 'Acme Inc'], |
|
|
datasets: [{ |
|
|
label: 'Declared Value ($)', |
|
|
data: [850, 720, 680, 450, 420], |
|
|
backgroundColor: '#10b981', |
|
|
borderRadius: 3 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
indexAxis: 'y', |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
x: { |
|
|
beginAtZero: true, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return '$' + value + 'K'; |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(updateTimestamp, 300000); |
|
|
function updateTimestamp() { |
|
|
const now = new Date(); |
|
|
document.getElementById('last-updated').textContent = |
|
|
now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); |
|
|
} |
|
|
}); |
|
|
</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=anonymous111110987654321/wireframe-dashboard-test1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
