|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Customs Brokerage Analytics Dashboard</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.heatmap-cell { transition: all 0.3s ease; } |
|
|
.heatmap-cell:hover { transform: scale(1.1); z-index: 10; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } |
|
|
.port-marker { transition: all 0.2s ease; } |
|
|
.port-marker:hover { transform: scale(1.5); } |
|
|
.funnel-bar { transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors"> |
|
|
<div class="flex flex-col min-h-screen"> |
|
|
|
|
|
<header class="bg-indigo-800 text-white shadow-lg z-10"> |
|
|
<div class="container mx-auto px-4 py-3 flex flex-col sm:flex-row justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-white p-2 rounded-lg mr-3"> |
|
|
<i class="fa-solid fa-truck-fast text-2xl text-indigo-800"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h1 class="text-xl font-bold">GlobalTrade Analytics</h1> |
|
|
<p class="text-xs text-indigo-300">Customs Brokerage Intelligence Dashboard</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4 mt-3 sm:mt-0"> |
|
|
<div> |
|
|
<span class="text-xs">Last updated:</span> |
|
|
<span class="font-mono">Today, 14:28 EST</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-2"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="darkModeToggle" class="sr-only"> |
|
|
<label for="darkModeToggle" class="relative w-14 h-7 bg-gray-600 rounded-full cursor-pointer"> |
|
|
<span class="absolute top-1 left-1 w-5 h-5 bg-white rounded-full transition-transform duration-200"></span> |
|
|
<span class="absolute top-1 left-1.5 text-gray-800"> |
|
|
<i class="fa-solid fa-moon text-xs"></i> |
|
|
</span> |
|
|
<span class="absolute top-1 right-1.5 text-white"> |
|
|
<i class="fa-solid fa-sun text-xs"></i> |
|
|
</span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<button class="bg-white text-indigo-800 px-3 py-1 rounded text-sm font-medium hover:bg-indigo-100 transition"> |
|
|
<i class="fa-solid fa-user mr-1"></i> Admin |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="flex-1 container mx-auto px-4 py-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 mb-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Date Range</label> |
|
|
<div class="relative"> |
|
|
<input type="text" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg p-2 text-sm font-medium" value="Jan 01, 2023 - Dec 31, 2023" readonly> |
|
|
<i class="fa-solid fa-calendar absolute right-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Port of Entry</label> |
|
|
<select class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg p-2 text-sm font-medium"> |
|
|
<option>All Ports</option> |
|
|
<option>Los Angeles (LAX)</option> |
|
|
<option>New York (JFK)</option> |
|
|
<option>Chicago (ORD)</option> |
|
|
<option>Miami (MIA)</option> |
|
|
<option>Seattle (SEA)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Transport Mode</label> |
|
|
<select class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg p-2 text-sm font-medium"> |
|
|
<option>All Modes</option> |
|
|
<option>Air</option> |
|
|
<option>Ocean</option> |
|
|
<option>Truck</option> |
|
|
<option>Rail</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Carrier</label> |
|
|
<select class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg p-2 text-sm font-medium"> |
|
|
<option>All Carriers</option> |
|
|
<option>Maersk</option> |
|
|
<option>UPS Supply Chain</option> |
|
|
<option>FedEx Trade Networks</option> |
|
|
<option>DHL Global Forwarding</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-6"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-5 flex flex-col"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 dark:text-gray-300 text-sm font-medium">Total Duty Paid</p> |
|
|
<h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 mt-1">$8.23M</h2> |
|
|
</div> |
|
|
<div class="bg-green-100 dark:bg-green-900/40 w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fa-solid fa-sack-dollar text-green-600 dark:text-green-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-2 border-t border-gray-200 dark:border-gray-700"> |
|
|
<p class="text-xs font-medium"> |
|
|
<span class="text-green-600 dark:text-green-400">+2.4%</span> vs previous period |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-5 flex flex-col"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 dark:text-gray-300 text-sm font-medium">Avg Clearance Time</p> |
|
|
<h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 mt-1">46.2 hrs</h2> |
|
|
</div> |
|
|
<div class="bg-blue-100 dark:bg-blue-900/40 w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fa-solid fa-clock text-blue-600 dark:text-blue-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-2 border-t border-gray-200 dark:border-gray-700"> |
|
|
<p class="text-xs font-medium"> |
|
|
<span class="text-green-600 dark:text-green-400">-12.7%</span> improvement YoY |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-5 flex flex-col"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 dark:text-gray-300 text-sm font-medium">Late Filing Rate</p> |
|
|
<h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 mt-1">3.8%</h2> |
|
|
</div> |
|
|
<div class="bg-orange-100 dark:bg-orange-900/40 w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fa-solid fa-triangle-exclamation text-orange-600 dark:text-orange-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-2 border-t border-gray-200 dark:border-gray-700"> |
|
|
<p class="text-xs font-medium"> |
|
|
<span class="text-red-600 dark:text-red-400">+0.9%</span> above target |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-5 flex flex-col"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 dark:text-gray-300 text-sm font-medium">USMCA Savings</p> |
|
|
<h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 mt-1">$921.4K</h2> |
|
|
</div> |
|
|
<div class="bg-purple-100 dark:bg-purple-900/40 w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fa-solid fa-tags text-purple-600 dark:text-purple-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-2 border-t border-gray-200 dark:border-gray-700"> |
|
|
<p class="text-xs font-medium"> |
|
|
<span class="text-green-600 dark:text-green-400">+14.6%</span> utilization rate |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 md:p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h2 class="text-lg font-bold">Top HTS Codes by Duty Revenue</h2> |
|
|
<p class="text-gray-500 dark:text-gray-300 text-sm">Harmonized Tariff Schedule by Duty Value</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs px-3 py-1 bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded hover:bg-indigo-200 dark:hover:bg-indigo-800 transition">Export</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="paretoChart" class="h-80"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 md:p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h2 class="text-lg font-bold">Monthly Duty vs. Freight Spend</h2> |
|
|
<p class="text-gray-500 dark:text-gray-300 text-sm">Comparison of customs duties and freight expenses</p> |
|
|
</div> |
|
|
<div class="flex space-x-1"> |
|
|
<button class="text-xs px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition">Duty</button> |
|
|
<button class="text-xs px-3 py-1 bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded hover:bg-indigo-200 dark:hover:bg-indigo-800 transition">Freight</button> |
|
|
<button class="text-xs px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition">Both</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="trendChart" class="h-80"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 md:p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h2 class="text-lg font-bold">Broker Workload Analysis</h2> |
|
|
<p class="text-gray-500 dark:text-gray-300 text-sm">Entries processed per broker by day</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs px-3 py-1 bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded hover:bg-indigo-200 dark:hover:bg-indigo-800 transition">This Month</button> |
|
|
<button class="text-xs px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition">All Time</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-80 overflow-x-auto"> |
|
|
<div class="flex min-w-max"> |
|
|
|
|
|
<div class="w-32 flex-shrink-0"> |
|
|
<div class="h-12"></div> |
|
|
<div class="space-y-1"> |
|
|
<div class="h-8 flex items-center justify-center font-semibold text-xs">Broker 1</div> |
|
|
<div class="h-8 flex items-center justify-center font-semibold text-xs">Broker 2</div> |
|
|
<div class="h-8 flex items-center justify-center font-semibold text-xs">Broker 3</div> |
|
|
<div class="h-8 flex items-center justify-center font-semibold text-xs">Broker 4</div> |
|
|
<div class="h-8 flex items-center justify-center font-semibold text-xs">Broker 5</div> |
|
|
<div class="h-8 flex items-center justify-center font-semibold text-xs">Broker 6</div> |
|
|
<div class="h-8 flex items-center justify-center font-semibold text-xs">Broker 7</div> |
|
|
<div class="h-8 flex items-center justify-center font-semibold text-xs">Broker 8</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex"> |
|
|
|
|
|
<div class="mr-6"> |
|
|
<div class="h-12 flex justify-center items-center text-xs font-semibold">Week 1</div> |
|
|
<div class="space-y-1"> |
|
|
<div class="flex space-x-1"> |
|
|
<div class="heatmap-cell w-10 h-8 bg-blue-200 dark:bg-blue-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Mon" data-broker="Broker 1">18</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-blue-100 dark:bg-blue-900/50 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Tue" data-broker="Broker 1">14</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-blue-300 dark:bg-blue-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Wed" data-broker="Broker 1">22</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-blue-200 dark:bg-blue-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Thu" data-broker="Broker 1">17</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-blue-400 dark:bg-blue-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Fri" data-broker="Broker 1">25</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-1"> |
|
|
<div class="heatmap-cell w-10 h-8 bg-purple-200 dark:bg-purple-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Mon" data-broker="Broker 2">16</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-purple-300 dark:bg-purple-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Tue" data-broker="Broker 2">20</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-purple-100 dark:bg-purple-900/50 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Wed" data-broker="Broker 2">12</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-purple-400 dark:bg-purple-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Thu" data-broker="Broker 2">26</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-purple-300 dark:bg-purple-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Fri" data-broker="Broker 2">21</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-1"> |
|
|
<div class="heatmap-cell w-10 h-8 bg-green-200 dark:bg-green-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Mon" data-broker="Broker 3">15</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-green-300 dark:bg-green-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Tue" data-broker="Broker 3">19</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-green-400 dark:bg-green-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Wed" data-broker="Broker 3">24</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-green-300 dark:bg-green-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Thu" data-broker="Broker 3">18</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-green-200 dark:bg-green-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Fri" data-broker="Broker 3">16</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-1"> |
|
|
<div class="heatmap-cell w-10 h-8 bg-yellow-200 dark:bg-yellow-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Mon" data-broker="Broker 4">19</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-yellow-300 dark:bg-yellow-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Tue" data-broker="Broker 4">23</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-yellow-100 dark:bg-yellow-900/50 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Wed" data-broker="Broker 4">11</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-yellow-200 dark:bg-yellow-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Thu" data-broker="Broker 4">17</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-yellow-400 dark:bg-yellow-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Fri" data-broker="Broker 4">27</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-1"> |
|
|
<div class="heatmap-cell w-10 h-8 bg-pink-100 dark:bg-pink-900/50 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Mon" data-broker="Broker 5">13</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-pink-200 dark:bg-pink-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Tue" data-broker="Broker 5">15</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-pink-300 dark:bg-pink-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Wed" data-broker="Broker 5">20</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-pink-400 dark:bg-pink-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Thu" data-broker="Broker 5">25</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-pink-300 dark:bg-pink-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Fri" data-broker="Broker 5">22</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-1"> |
|
|
<div class="heatmap-cell w-10 h-8 bg-red-300 dark:bg-red-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Mon" data-broker="Broker 6">21</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-red-400 dark:bg-red-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Tue" data-broker="Broker 6">24</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-red-200 dark:bg-red-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Wed" data-broker="Broker 6">18</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-red-100 dark:bg-red-900/50 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Thu" data-broker="Broker 6">14</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-red-300 dark:bg-red-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Fri" data-broker="Broker 6">20</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-1"> |
|
|
<div class="heatmap-cell w-10 h-8 bg-indigo-400 dark:bg-indigo-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Mon" data-broker="Broker 7">25</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-indigo-200 dark:bg-indigo-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Tue" data-broker="Broker 7">17</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-indigo-300 dark:bg-indigo-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Wed" data-broker="Broker 7">19</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Thu" data-broker="Broker 7">13</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-indigo-200 dark:bg-indigo-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Fri" data-broker="Broker 7">16</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-1"> |
|
|
<div class="heatmap-cell w-10 h-8 bg-teal-100 dark:bg-teal-900/50 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Mon" data-broker="Broker 8">12</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-teal-400 dark:bg-teal-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Tue" data-broker="Broker 8">26</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-teal-200 dark:bg-teal-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Wed" data-broker="Broker 8">17</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-teal-300 dark:bg-teal-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Thu" data-broker="Broker 8">20</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-teal-400 dark:bg-teal-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium" data-day="Fri" data-broker="Broker 8">24</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mr-6"> |
|
|
<div class="h-12 flex justify-center items-center text-xs font-semibold">Week 2</div> |
|
|
<div class="space-y-1"> |
|
|
<div class="flex space-x-1"> |
|
|
<div class="heatmap-cell w-10 h-8 bg-blue-300 dark:bg-blue-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium">19</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-blue-400 dark:bg-blue-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium">26</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-blue-200 dark:bg-blue-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium">16</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-blue-300 dark:bg-blue-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium">21</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-blue-100 dark:bg-blue-900/50 rounded flex items-center justify-center cursor-pointer text-xs font-medium">14</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mr-6"> |
|
|
<div class="h-12 flex justify-center items-center text-xs font-semibold">Week 3</div> |
|
|
<div class="space-y-1"> |
|
|
<div class="flex space-x-1"> |
|
|
<div class="heatmap-cell w-10 h-8 bg-purple-400 dark:bg-purple-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium">28</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-purple-100 dark:bg-purple-900/50 rounded flex items-center justify-center cursor-pointer text-xs font-medium">11</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-purple-300 dark:bg-purple-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium">19</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-purple-200 dark:bg-purple-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium">18</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-purple-400 dark:bg-purple-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium">27</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="h-12 flex justify-center items-center text-xs font-semibold">Week 4</div> |
|
|
<div class="space-y-1"> |
|
|
<div class="flex space-x-1"> |
|
|
<div class="heatmap-cell w-10 h-8 bg-green-300 dark:bg-green-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium">21</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-green-400 dark:bg-green-700 rounded flex items-center justify-center cursor-pointer text-xs font-medium">26</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-green-100 dark:bg-green-900/50 rounded flex items-center justify-center cursor-pointer text-xs font-medium">13</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-green-200 dark:bg-green-900/70 rounded flex items-center justify-center cursor-pointer text-xs font-medium">17</div> |
|
|
<div class="heatmap-cell w-10 h-8 bg-green-300 dark:bg-green-800 rounded flex items-center justify-center cursor-pointer text-xs font-medium">22</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 md:p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h2 class="text-lg font-bold">Clearance Cycle Times</h2> |
|
|
<p class="text-gray-500 dark:text-gray-300 text-sm">Average time between shipment milestones</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition">Ocean</button> |
|
|
<button class="text-xs px-3 py-1 bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded hover:bg-indigo-200 dark:hover:bg-indigo-800 transition">Air</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-80 flex items-center"> |
|
|
<div class="w-full"> |
|
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
|
|
|
<div class="w-full flex items-center mb-2"> |
|
|
<div class="w-32 text-right pr-4 text-sm font-medium">Arrival</div> |
|
|
<div class="flex-1"> |
|
|
<div class="funnel-bar h-12 bg-indigo-600 dark:bg-indigo-700 rounded-l-full rounded-r-full flex items-center justify-center text-white text-sm font-medium">Start</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full flex items-center mb-8"> |
|
|
<div class="w-32 text-right pr-4 text-sm font-medium">ISF Filed</div> |
|
|
<div class="flex-1 relative"> |
|
|
<div class="funnel-bar h-10 bg-blue-600 dark:bg-blue-700 rounded-l-full rounded-r-full flex items-center justify-center text-white text-sm font-medium" style="width: 95%"> |
|
|
<div class="absolute left-0 top-full mt-1 text-xs">Avg: 48h</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full flex items-center mb-8"> |
|
|
<div class="w-32 text-right pr-4 text-sm font-medium">Entry Filed</div> |
|
|
<div class="flex-1 relative"> |
|
|
<div class="funnel-bar h-10 bg-purple-600 dark:bg-purple-700 rounded-l-full rounded-r-full flex items-center justify-center text-white text-sm font-medium" style="width: 85%"> |
|
|
<div class="absolute left-0 top-full mt-1 text-xs">Avg: 28h</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full flex items-center mb-8"> |
|
|
<div class="w-32 text-right pr-4 text-sm font-medium">CBP Release</div> |
|
|
<div class="flex-1 relative"> |
|
|
<div class="funnel-bar h-10 bg-pink-600 dark:bg-pink-700 rounded-l-full rounded-r-full flex items-center justify-center text-white text-sm font-medium" style="width: 70%"> |
|
|
<div class="absolute left-0 top-full mt-1 text-xs">Avg: 36h</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full flex items-center"> |
|
|
<div class="w-32 text-right pr-4 text-sm font-medium">Delivery</div> |
|
|
<div class="flex-1 relative"> |
|
|
<div class="funnel-bar h-10 bg-green-600 dark:bg-green-700 rounded-l-full rounded-r-full flex items-center justify-center text-white text-sm font-medium" style="width: 55%"> |
|
|
<div class="absolute left-0 top-full mt-1 text-xs">Avg: 24h</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 md:p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h2 class="text-lg font-bold">Port Dwell Times</h2> |
|
|
<p class="text-gray-500 dark:text-gray-300 text-sm">Average container dwell time by North American port</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs px-3 py-1 bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded hover:bg-indigo-200 dark:hover:bg-indigo-800 transition">Export Data</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="geoMap" class="h-96 relative bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="text-center p-6"> |
|
|
<div class="mb-4 text-3xl"> |
|
|
<i class="fa-solid fa-map text-blue-500 dark:text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">North American Port Dwell Times</h3> |
|
|
<p class="mt-2 max-w-md mx-auto">Hover over markers to see average dwell times and volumes at each port</p> |
|
|
<button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">Show Detailed Map</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="port-marker absolute top-1/4 left-1/4 cursor-pointer group"> |
|
|
<div class="w-6 h-6 bg-red-500 dark:bg-red-600 rounded-full border-2 border-white flex items-center justify-center"> |
|
|
<span class="text-white text-xs font-bold">LA</span> |
|
|
</div> |
|
|
<div class="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 bg-black text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity"> |
|
|
Los Angeles<br>3.7 days (avg)<br>14,200 entries |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="port-marker absolute top-1/3 right-1/3 cursor-pointer group"> |
|
|
<div class="w-6 h-6 bg-yellow-500 dark:bg-yellow-600 rounded-full border-2 border-white flex items-center justify-center"> |
|
|
<span class="text-white text-xs font-bold">NY</span> |
|
|
</div> |
|
|
<div class="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 bg-black text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity"> |
|
|
New York<br>4.2 days (avg)<br>9,500 entries |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="port-marker absolute top-1/2 left-1/2 cursor-pointer group"> |
|
|
<div class="w-6 h-6 bg-green-500 dark:bg-green-600 rounded-full border-2 border-white flex items-center justify-center"> |
|
|
<span class="text-white text-xs font-bold">CH</span> |
|
|
</div> |
|
|
<div class="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 bg-black text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity"> |
|
|
Chicago<br>2.9 days (avg)<br>7,300 entries |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="port-marker absolute bottom-1/3 left-1/3 cursor-pointer group"> |
|
|
<div class="w-6 h-6 bg-blue-500 dark:bg-blue-600 rounded-full border-2 border-white flex items-center justify-center"> |
|
|
<span class="text-white text-xs font-bold">MI</span> |
|
|
</div> |
|
|
<div class="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 bg-black text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity"> |
|
|
Miami<br>3.1 days (avg)<br>6,800 entries |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="port-marker absolute top-1/3 left-1/5 cursor-pointer group"> |
|
|
<div class="w-6 h-6 bg-purple-500 dark:bg-purple-600 rounded-full border-2 border-white flex items-center justify-center"> |
|
|
<span class="text-white text-xs font-bold">SE</span> |
|
|
</div> |
|
|
<div class="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 bg-black text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity"> |
|
|
Seattle<br>3.5 days (avg)<br>5,200 entries |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow"> |
|
|
<div class="p-4 md:p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h2 class="text-lg font-bold">Compliance Flags & Outliers</h2> |
|
|
<p class="text-gray-500 dark:text-gray-300 text-sm">Entries requiring manual review</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs px-3 py-1 bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300 rounded hover:bg-red-200 dark:hover:bg-red-800 transition">View All (87)</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full text-sm"> |
|
|
<thead class="bg-gray-50 dark:bg-gray-700 text-left"> |
|
|
<tr> |
|
|
<th class="py-2 px-3 font-medium">Entry No.</th> |
|
|
<th class="py-2 px-3 font-medium">Issue Type</th> |
|
|
<th class="py-2 px-3 font-medium">Value</th> |
|
|
<th class="py-2 px-3 font-medium">Status</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
<tr> |
|
|
<td class="py-2 px-3">E20234601</td> |
|
|
<td class="py-2 px-3"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-200 font-medium">Duplicate</span> |
|
|
</td> |
|
|
<td class="py-2 px-3">$32,440.00</td> |
|
|
<td class="py-2 px-3"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-200 font-medium">Pending</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="py-2 px-3">E20235672</td> |
|
|
<td class="py-2 px-3"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-orange-100 dark:bg-orange-900/40 text-orange-800 dark:text-orange-200 font-medium">Missing Value</span> |
|
|
</td> |
|
|
<td class="py-2 px-3">$0.00</td> |
|
|
<td class="py-2 px-3"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-200 font-medium">In Review</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="py-2 px-3">E20234522</td> |
|
|
<td class="py-2 px-3"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-200 font-medium">Late Filing</span> |
|
|
</td> |
|
|
<td class="py-2 px-3">$87,120.00</td> |
|
|
<td class="py-2 px-3"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium">Resolved</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="py-2 px-3">E20237891</td> |
|
|
<td class="py-2 px-3"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-orange-100 dark:bg-orange-900/40 text-orange-800 dark:text-orange-200 font-medium">HTS Mismatch</span> |
|
|
</td> |
|
|
<td class="py-2 px-3">$21,530.00</td> |
|
|
<td class="py-2 px-3"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-200 font-medium">Pending</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="py-2 px-3">E20236651</td> |
|
|
<td class="py-2 px-3"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-200 font-medium">USMCA Claim</span> |
|
|
</td> |
|
|
<td class="py-2 px-3">$43,210.00</td> |
|
|
<td class="py-2 px-3"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-200 font-medium">In Review</span> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div class="text-sm text-gray-500 dark:text-gray-400"> |
|
|
Showing 5 of 87 flagged entries |
|
|
</div> |
|
|
<button class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:underline"> |
|
|
View Full Report <i class="fa-solid fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 md:p-6"> |
|
|
<div class="mb-4"> |
|
|
<h2 class="text-lg font-bold">Scenario Analysis: Mode Shift Impact</h2> |
|
|
<p class="text-gray-500 dark:text-gray-300 text-sm">Project impact of shifting volume between transport modes</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-5"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<label class="text-sm font-medium">Ocean to Air Conversion (%)</label> |
|
|
<span class="text-sm font-medium text-indigo-600 dark:text-indigo-400" id="oceanToAirValue">15%</span> |
|
|
</div> |
|
|
<input type="range" min="0" max="30" value="15" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer" id="oceanToAir"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<label class="text-sm font-medium">Air to Ocean Conversion (%)</label> |
|
|
<span class="text-sm font-medium text-indigo-600 dark:text-indigo-400" id="airToOceanValue">5%</span> |
|
|
</div> |
|
|
<input type="range" min="0" max="30" value="5" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer" id="airToOcean"> |
|
|
</div> |
|
|
|
|
|
<div class="pt-2"> |
|
|
<h3 class="font-medium border-b pb-2 mb-2">Projected Impact</h3> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span>Duty Impact:</span> |
|
|
<span class="font-medium text-green-600 dark:text-green-400">+$184,300</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span>MPF Impact:</span> |
|
|
<span class="font-medium text-red-600 dark:text-red-400">-$87,600</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span>Clearance Time:</span> |
|
|
<span class="font-medium text-green-600 dark:text-green-400">-1.4 days</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span>Total Cost Impact:</span> |
|
|
<span class="font-medium">+$96,700</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 p-4 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fa-solid fa-circle-info text-indigo-500 dark:text-indigo-300 mt-1"></i> |
|
|
</div> |
|
|
<div class="ml-3 text-sm text-indigo-700 dark:text-indigo-300"> |
|
|
<p>Shifting volume from ocean to air increases duty costs but reduces merchandise processing fees and dwell time.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 mt-auto border-t dark:border-gray-700"> |
|
|
<div class="container mx-auto px-4 py-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fa-solid fa-cloud-arrow-down text-lg text-gray-500 dark:text-gray-400 mr-2"></i> |
|
|
<span class="font-medium text-sm">Export Dashboard Data:</span> |
|
|
</div> |
|
|
<div class="flex flex-wrap justify-center gap-2"> |
|
|
<button class="px-4 py-2 bg-gray-800 text-white rounded-lg text-sm font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition flex items-center"> |
|
|
<i class="fa-solid fa-file-csv mr-2"></i> CSV Data Export |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-600 transition flex items-center"> |
|
|
<i class="fa-solid fa-file-image mr-2"></i> PNG Screenshot |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded-lg text-sm font-medium hover:bg-indigo-200 dark:hover:bg-indigo-800 transition flex items-center"> |
|
|
<i class="fa-solid fa-file-pdf mr-2"></i> Full Report PDF |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const paretoOptions = { |
|
|
series: [{ |
|
|
name: 'Duty Collected', |
|
|
type: 'bar', |
|
|
data: [142300, 122500, 98500, 82300, 76100, 68500, 57400, 49200, 43000, 38900] |
|
|
}, { |
|
|
name: 'Cumulative %', |
|
|
type: 'line', |
|
|
data: [25.8, 48.1, 66.0, 80.9, 94.5, 100, 100, 100, 100, 100] |
|
|
}], |
|
|
chart: { |
|
|
height: '100%', |
|
|
type: 'line', |
|
|
toolbar: { |
|
|
show: false |
|
|
}, |
|
|
zoom: { |
|
|
enabled: false |
|
|
}, |
|
|
fontFamily: 'Inter, sans-serif' |
|
|
}, |
|
|
colors: ['#4f46e5', '#10b981'], |
|
|
stroke: { |
|
|
width: [0, 3] |
|
|
}, |
|
|
plotOptions: { |
|
|
bar: { |
|
|
columnWidth: '50%' |
|
|
} |
|
|
}, |
|
|
dataLabels: { |
|
|
enabled: true, |
|
|
enabledOnSeries: [1], |
|
|
formatter: function(val) { |
|
|
return val.toFixed(1) + '%'; |
|
|
}, |
|
|
style: { |
|
|
fontSize: '10px' |
|
|
} |
|
|
}, |
|
|
labels: ['8541.40', '8517.12', '8471.30', '8517.70', '8708.29', '8536.90', '8523.41', '8538.90', '8542.31', '8517.80'], |
|
|
xaxis: { |
|
|
type: 'category', |
|
|
labels: { |
|
|
style: { |
|
|
fontSize: '11px' |
|
|
} |
|
|
} |
|
|
}, |
|
|
yaxis: [ |
|
|
{ |
|
|
seriesName: 'Duty Collected', |
|
|
opposite: false, |
|
|
title: { |
|
|
text: 'USD', |
|
|
style: { |
|
|
fontSize: '12px', |
|
|
fontWeight: 'normal' |
|
|
} |
|
|
}, |
|
|
min: 0, |
|
|
max: 160000, |
|
|
labels: { |
|
|
formatter: function(val) { |
|
|
return '$' + (val/1000).toFixed(0) + 'K'; |
|
|
} |
|
|
} |
|
|
}, |
|
|
{ |
|
|
seriesName: 'Cumulative %', |
|
|
opposite: true, |
|
|
title: { |
|
|
text: 'Percentage', |
|
|
style: { |
|
|
fontSize: '12px', |
|
|
fontWeight: 'normal' |
|
|
} |
|
|
}, |
|
|
min: 0, |
|
|
max: 100, |
|
|
labels: { |
|
|
formatter: function(val) { |
|
|
return val.toFixed(0) + '%'; |
|
|
} |
|
|
} |
|
|
} |
|
|
], |
|
|
legend: { |
|
|
position: 'top', |
|
|
horizontalAlign: 'right', |
|
|
fontSize: '12px' |
|
|
}, |
|
|
tooltip: { |
|
|
shared: true, |
|
|
intersect: false, |
|
|
y: { |
|
|
formatter: function(val, { seriesIndex }) { |
|
|
return seriesIndex === 0 ? '$' + val.toLocaleString() : val.toFixed(1) + '%'; |
|
|
} |
|
|
} |
|
|
}, |
|
|
grid: { |
|
|
borderColor: '#e5e7eb', |
|
|
strokeDashArray: 4, |
|
|
padding: { |
|
|
top: 10, |
|
|
right: 10 |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
const paretoChart = new ApexCharts(document.querySelector("#paretoChart"), paretoOptions); |
|
|
paretoChart.render(); |
|
|
|
|
|
|
|
|
const trendOptions = { |
|
|
series: [{ |
|
|
name: 'Customs Duty', |
|
|
type: 'column', |
|
|
data: [720, 670, 810, 780, 890, 840, 950, 930, 920, 980, 1020, 1090] |
|
|
}, { |
|
|
name: 'Freight Spend', |
|
|
type: 'line', |
|
|
data: [2420, 2580, 2340, 2680, 2840, 2930, 3100, 2910, 2870, 2790, 2650, 3020] |
|
|
}], |
|
|
chart: { |
|
|
height: '100%', |
|
|
type: 'line', |
|
|
toolbar: { |
|
|
show: false |
|
|
}, |
|
|
zoom: { |
|
|
enabled: false |
|
|
}, |
|
|
fontFamily: 'Inter, sans-serif' |
|
|
}, |
|
|
colors: ['#4f46e5', '#10b981'], |
|
|
stroke: { |
|
|
width: [0, 3] |
|
|
}, |
|
|
plotOptions: { |
|
|
bar: { |
|
|
columnWidth: '50%' |
|
|
} |
|
|
}, |
|
|
dataLabels: { |
|
|
enabled: true, |
|
|
enabledOnSeries: [1], |
|
|
formatter: function(val) { |
|
|
return '$' + val.toLocaleString() + 'K'; |
|
|
}, |
|
|
style: { |
|
|
fontSize: '10px' |
|
|
} |
|
|
}, |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], |
|
|
xaxis: { |
|
|
type: 'category' |
|
|
}, |
|
|
yaxis: { |
|
|
min: 0, |
|
|
max: 3500, |
|
|
labels: { |
|
|
formatter: function(val) { |
|
|
return '$' + val.toLocaleString() + 'K'; |
|
|
} |
|
|
} |
|
|
}, |
|
|
legend: { |
|
|
position: 'top', |
|
|
horizontalAlign: 'right', |
|
|
fontSize: '12px' |
|
|
}, |
|
|
tooltip: { |
|
|
shared: true, |
|
|
intersect: false, |
|
|
y: { |
|
|
formatter: function(val, { seriesIndex }) { |
|
|
return '$' + val.toLocaleString() + 'K'; |
|
|
} |
|
|
} |
|
|
}, |
|
|
grid: { |
|
|
borderColor: '#e5e7eb', |
|
|
strokeDashArray: 4, |
|
|
padding: { |
|
|
top: 10, |
|
|
right: 10 |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
const trendChart = new ApexCharts(document.querySelector("#trendChart"), trendOptions); |
|
|
trendChart.render(); |
|
|
|
|
|
|
|
|
const darkModeToggle = document.getElementById('darkModeToggle'); |
|
|
darkModeToggle.addEventListener('change', function() { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
}); |
|
|
|
|
|
|
|
|
const oceanSlider = document.getElementById('oceanToAir'); |
|
|
const oceanValue = document.getElementById('oceanToAirValue'); |
|
|
oceanSlider.addEventListener('input', function() { |
|
|
oceanValue.textContent = this.value + '%'; |
|
|
}); |
|
|
|
|
|
const airSlider = document.getElementById('airToOcean'); |
|
|
const airValue = document.getElementById('airToOceanValue'); |
|
|
airSlider.addEventListener('input', function() { |
|
|
airValue.textContent = this.value + '%'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.heatmap-cell').forEach(cell => { |
|
|
cell.addEventListener('mouseover', function() { |
|
|
const day = this.getAttribute('data-day'); |
|
|
const broker = this.getAttribute('data-broker'); |
|
|
const entries = this.textContent; |
|
|
|
|
|
|
|
|
const tooltip = document.createElement('div'); |
|
|
tooltip.className = 'absolute z-20 bg-black text-white text-xs rounded py-2 px-3'; |
|
|
tooltip.textContent = `${broker}: ${entries} entries on ${day}`; |
|
|
tooltip.style.top = (this.getBoundingClientRect().top - 30) + 'px'; |
|
|
tooltip.style.left = (this.getBoundingClientRect().left + this.offsetWidth/2 - tooltip.offsetWidth/2) + 'px'; |
|
|
|
|
|
document.body.appendChild(tooltip); |
|
|
this._tooltip = tooltip; |
|
|
|
|
|
}); |
|
|
|
|
|
cell.addEventListener('mouseout', function() { |
|
|
if (this._tooltip) { |
|
|
this._tooltip.remove(); |
|
|
delete this._tooltip; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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/globaltrade-analytics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
