| <!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.plot.ly/plotly-2.24.1.min.js"></script> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.1.96/css/materialdesignicons.min.css"> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> |
| <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#1a56db', |
| secondary: '#7e3af2', |
| success: '#0e9f6e', |
| warning: '#f05f14', |
| danger: '#e02424', |
| background: { |
| light: '#f9fafb', |
| dark: '#1f2a37' |
| }, |
| card: { |
| light: '#ffffff', |
| dark: '#374151' |
| }, |
| text: { |
| light: '#111827', |
| dark: '#e5e7eb' |
| } |
| } |
| } |
| }, |
| darkMode: 'class' |
| } |
| </script> |
| <style> |
| .scrollbar-hidden::-webkit-scrollbar { |
| display: none; |
| } |
| |
| .chart-container { |
| background: rgba(255, 255, 255, 0.03); |
| border-radius: 0.75rem; |
| backdrop-filter: blur(16px); |
| } |
| |
| .bg-gradient-primary { |
| background: linear-gradient(135deg, #1a56db 0%, #7e3af2 100%); |
| } |
| |
| .outlier-row:nth-child(even) { |
| background-color: rgba(244, 63, 94, 0.1); |
| } |
| |
| .dark .outlier-row:nth-child(even) { |
| background-color: rgba(244, 63, 94, 0.2); |
| } |
| |
| .entry-timeline { |
| position: relative; |
| } |
| |
| .entry-timeline::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 4px; |
| height: 100%; |
| background: linear-gradient(to bottom, #7e3af2, #1a56db); |
| border-radius: 4px; |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.3s ease-in-out; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .heatmap-day { |
| border-radius: 4px; |
| transition: all 0.2s; |
| } |
| |
| .heatmap-day:hover { |
| transform: scale(1.05); |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200 min-h-screen"> |
| |
| <header class="sticky top-0 z-50 bg-white dark:bg-gray-800 shadow-md"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <div class="bg-gradient-primary p-2 rounded-lg"> |
| <span class="mdi mdi-ship-wheel text-white text-2xl"></span> |
| </div> |
| <h1 class="text-xl font-bold">Customs Brokerage Analytics</h1> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <div id="theme-toggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 cursor-pointer"> |
| <span class="mdi mdi-weather-sunny text-yellow-500 block dark:hidden"></span> |
| <span class="mdi mdi-weather-night text-indigo-400 hidden dark:block"></span> |
| </div> |
| |
| <div class="relative group"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10 flex items-center justify-center text-gray-600"> |
| <span class="mdi mdi-account text-xl"></span> |
| </div> |
| <div class="absolute right-0 w-48 mt-2 rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 hidden group-hover:block z-50"> |
| <div class="py-1 px-4 text-sm"> |
| <p class="font-semibold">Analytics User</p> |
| <p class="text-gray-500">customs@brokerage.com</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="container mx-auto px-4 py-8"> |
| |
| <section class="mb-8 bg-card-light dark:bg-card rounded-xl shadow-md p-4"> |
| <div class="flex flex-wrap gap-4 items-end"> |
| <div class="flex-1 min-w-[200px]"> |
| <label class="block text-sm font-medium mb-1">Port of Entry</label> |
| <select class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-primary focus:border-primary"> |
| <option>All Ports</option> |
| <option>New York (NYC)</option> |
| <option>Los Angeles (LAX)</option> |
| <option>Chicago (ORD)</option> |
| <option>Miami (MIA)</option> |
| <option>Seattle (SEA)</option> |
| </select> |
| </div> |
| |
| <div class="flex-1 min-w-[200px]"> |
| <label class="block text-sm font-medium mb-1">Date Range</label> |
| <input id="date-range" class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm" placeholder="Select date range"> |
| </div> |
| |
| <div class="flex-1 min-w-[200px]"> |
| <label class="block text-sm font-medium mb-1">Mode of Transport</label> |
| <select class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-primary focus:border-primary"> |
| <option>All Modes</option> |
| <option>Ocean Freight</option> |
| <option>Air Freight</option> |
| <option>Truck</option> |
| <option>Rail</option> |
| </select> |
| </div> |
| |
| <div> |
| <button class="px-4 py-2 bg-primary text-white rounded-lg font-medium hover:bg-blue-800 transition"> |
| Apply Filters |
| </button> |
| </div> |
| |
| <div> |
| <button class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition"> |
| Reset |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-8"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <div class="bg-gradient-primary rounded-xl p-5 text-white"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="opacity-80">Total Duty</p> |
| <h2 class="text-2xl font-bold mt-1">$2.34M</h2> |
| </div> |
| <span class="mdi mdi-cash text-3xl opacity-60"></span> |
| </div> |
| <p class="mt-2 text-sm opacity-90">↑ 12.4% from last month</p> |
| </div> |
| |
| <div class="bg-green-500 rounded-xl p-5 text-white"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="opacity-80">Avg Release Time</p> |
| <h2 class="text-2xl font-bold mt-1">38.2 hrs</h2> |
| </div> |
| <span class="mdi mdi-clock-outline text-3xl opacity-60"></span> |
| </div> |
| <p class="mt-2 text-sm opacity-90">↓ 2.3 days from Q2</p> |
| </div> |
| |
| <div class="bg-yellow-500 rounded-xl p-5 text-white"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="opacity-80">Late Filings</p> |
| <h2 class="text-2xl font-bold mt-1">4.1%</h2> |
| </div> |
| <span class="mdi mdi-alert-circle-outline text-3xl opacity-60"></span> |
| </div> |
| <p class="mt-2 text-sm opacity-90">↑ 0.7% from Q2</p> |
| </div> |
| |
| <div class="bg-purple-500 rounded-xl p-5 text-white"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="opacity-80">USMCA Savings</p> |
| <h2 class="text-2xl font-bold mt-1">$312K</h2> |
| </div> |
| <span class="mdi mdi-hand-coin text-3xl opacity-60"></span> |
| </div> |
| <p class="mt-2 text-sm opacity-90">↑ 21.7% YoY</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
| |
| <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold">Top HTS Codes by Duty Value</h3> |
| <div class="flex space-x-2"> |
| <button class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600"> |
| <span class="mdi mdi-filter"></span> |
| </button> |
| <button class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600"> |
| <span class="mdi mdi-download"></span> |
| </button> |
| </div> |
| </div> |
| <div id="pareto-chart" class="h-80"></div> |
| </div> |
| |
| |
| <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold">Monthly Duty vs. Freight Spend</h3> |
| <div class="flex space-x-3 items-center"> |
| <span class="text-sm">Show: </span> |
| <div class="flex space-x-1 bg-gray-100 dark:bg-gray-700 p-1 rounded-lg"> |
| <button class="px-3 py-1 rounded-md bg-white dark:bg-gray-600 text-primary font-medium">Duty</button> |
| <button class="px-3 py-1 rounded-md text-gray-500 hover:text-gray-800 dark:hover:text-gray-200">Freight</button> |
| </div> |
| </div> |
| </div> |
| <div id="trend-chart" class="h-80"></div> |
| </div> |
| |
| |
| <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold">Broker Workload Distribution</h3> |
| <div class="flex space-x-2 items-center"> |
| <span class="text-sm">Broker:</span> |
| <select class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm"> |
| <option>All Brokers</option> |
| <option>John D.</option> |
| <option>Sarah M.</option> |
| <option>Michael T.</option> |
| </select> |
| </div> |
| </div> |
| <div id="heatmap" class="h-80"> |
| <div class="flex flex-col h-full"> |
| <div class="flex mb-4"> |
| <div class="w-32"></div> |
| <div class="flex-1 grid grid-cols-7 gap-1 text-center"> |
| <span class="text-xs opacity-70">Mon</span> |
| <span class="text-xs opacity-70">Tue</span> |
| <span class="text-xs opacity-70">Wed</span> |
| <span class="text-xs opacity-70">Thu</span> |
| <span class="text-xs opacity-70">Fri</span> |
| <span class="text-xs opacity-70">Sat</span> |
| <span class="text-xs opacity-70">Sun</span> |
| </div> |
| </div> |
| <div class="flex-1 overflow-auto"> |
| <div class="flex mb-1"> |
| <div class="w-32 py-1 text-xs font-medium">Broker 1</div> |
| <div class="flex-1 grid grid-cols-7 gap-1"> |
| <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="15 entries - Apr 1"><span class="text-xs">15</span></div> |
| <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="25 entries - Apr 2"><span class="text-xs">25</span></div> |
| <div class="heatmap-day bg-green-500 dark:bg-green-500 p-1" title="45 entries - Apr 3"><span class="text-xs">45</span></div> |
| <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="27 entries - Apr 4"><span class="text-xs">27</span></div> |
| <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="18 entries - Apr 5"><span class="text-xs">18</span></div> |
| <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div> |
| <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div> |
| </div> |
| </div> |
| <div class="flex mb-1"> |
| <div class="w-32 py-1 text-xs font-medium">Broker 2</div> |
| <div class="flex-1 grid grid-cols-7 gap-1"> |
| <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="22 entries - Apr 1"><span class="text-xs">22</span></div> |
| <div class="heatmap-day bg-green-500 dark:bg-green-500 p-1" title="38 entries - Apr 2"><span class="text-xs">38</span></div> |
| <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="29 entries - Apr 3"><span class="text-xs">29</span></div> |
| <div class="heatmap-day bg-green-500 dark:bg-green-500 p-1" title="41 entries - Apr 4"><span class="text-xs">41</span></div> |
| <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="32 entries - Apr 5"><span class="text-xs">32</span></div> |
| <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div> |
| <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div> |
| </div> |
| </div> |
| <div class="flex mb-1"> |
| <div class="w-32 py-1 text-xs font-medium">Broker 3</div> |
| <div class="flex-1 grid grid-cols-7 gap-1"> |
| <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="28 entries - Apr 1"><span class="text-xs">28</span></div> |
| <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="17 entries - Apr 2"><span class="text-xs">17</span></div> |
| <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="27 entries - Apr 3"><span class="text-xs">27</span></div> |
| <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="19 entries - Apr 4"><span class="text-xs">19</span></div> |
| <div class="heatmap-day bg-green-500 dark:bg-green-500 p-1" title="39 entries - Apr 5"><span class="text-xs">39</span></div> |
| <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div> |
| <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div> |
| </div> |
| </div> |
| <div class="flex mb-1"> |
| <div class="w-32 py-1 text-xs font-medium">Broker 4</div> |
| <div class="flex-1 grid grid-cols-7 gap-1"> |
| <div class="heatmap-day bg-green-500 dark:bg-green-500 p-1" title="40 entries - Apr 1"><span class="text-xs">40</span></div> |
| <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="14 entries - Apr 2"><span class="text-xs">14</span></div> |
| <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="33 entries - Apr 3"><span class="text-xs">33</span></div> |
| <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="31 entries - Apr 4"><span class="text-xs">31</span></div> |
| <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="18 entries - Apr 5"><span class="text-xs">18</span></div> |
| <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div> |
| <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-3 flex items-center justify-center"> |
| <div class="flex items-center text-xs"> |
| <span class="mr-2">Entries per day:</span> |
| <div class="h-4 w-4 bg-green-100 dark:bg-green-900 mr-1"></div> |
| <span>0-20</span> |
| <div class="h-4 w-4 bg-green-300 dark:bg-green-700 mx-1"></div> |
| <span>21-30</span> |
| <div class="h-4 w-4 bg-green-500 dark:bg-green-500 ml-1"></div> |
| <span>31+</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold">Entry Cycle Time Analysis</h3> |
| <div class="flex items-center"> |
| <span class="text-xs mr-2">Avg:</span> |
| <span class="font-semibold text-primary">42 hrs</span> |
| </div> |
| </div> |
| <div class="h-80 flex items-center justify-center"> |
| <div id="funnel-chart" class="w-full h-full"></div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold">Port Dwell Time Analysis</h3> |
| <div class="flex items-center"> |
| <span class="text-xs mr-2">Data: </span> |
| <div class="flex bg-gray-100 dark:bg-gray-700 p-1 rounded-lg"> |
| <button class="px-2 py-1 rounded-md bg-white dark:bg-gray-600 text-primary font-medium text-xs">Days</button> |
| <button class="px-2 py-1 rounded-md text-xs text-gray-500 hover:text-gray-800 dark:hover:text-gray-200">Hours</button> |
| </div> |
| </div> |
| </div> |
| <div id="geo-chart" class="h-80"></div> |
| </div> |
| |
| |
| <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold">Mode Shift Impact Simulation</h3> |
| <div class="flex items-center"> |
| <button class="px-3 py-1 bg-primary text-white text-sm rounded-lg">Apply</button> |
| </div> |
| </div> |
| <div class="h-80"> |
| <div class="mb-6"> |
| <div class="flex justify-between text-sm mb-2"> |
| <span>Shift Volume from Ocean to Air</span> |
| <span class="font-medium">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"> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-6 mt-8"> |
| <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4"> |
| <div class="text-center mb-3"> |
| <span class="mdi mdi-ship text-3xl text-blue-500"></span> |
| <h4 class="font-semibold mt-1">Ocean Impact</h4> |
| </div> |
| <div class="space-y-2"> |
| <div class="flex justify-between text-sm"> |
| <span>Duty Cost:</span> |
| <span class="font-medium text-red-500">+ $47,800</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span>Brokerage Fee:</span> |
| <span class="font-medium text-red-500">+ $12,300</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span>MPF:</span> |
| <span class="font-medium text-red-500">+ $8,200</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4"> |
| <div class="text-center mb-3"> |
| <span class="mdi mdi-airplane text-3xl text-purple-500"></span> |
| <h4 class="font-semibold mt-1">Air Impact</h4> |
| </div> |
| <div class="space-y-2"> |
| <div class="flex justify-between text-sm"> |
| <span>Release Time:</span> |
| <span class="font-medium text-green-500">-16 hours</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span>Storage Costs:</span> |
| <span class="font-medium text-green-500">- $28,900</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span>Demurrage:</span> |
| <span class="font-medium text-green-500">- $5,700</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-8"> |
| <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold">Compliance Outliers & Exceptions</h3> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-sm border border-primary text-primary rounded-lg">Filter by Status</button> |
| <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg"> |
| <span class="mdi mdi-plus mr-1"></span> New |
| </button> |
| </div> |
| </div> |
| |
| <div class="overflow-x-auto"> |
| <table class="w-full text-sm"> |
| <thead class="border-b border-gray-200 dark:border-gray-700"> |
| <tr> |
| <th class="py-3 px-4 text-left font-medium">Entry No.</th> |
| <th class="py-3 px-4 text-left font-medium">Issue Type</th> |
| <th class="py-3 px-4 text-left font-medium">HTS Code</th> |
| <th class="py-3 px-4 text-left font-medium">Declared Value</th> |
| <th class="py-3 px-4 text-left font-medium">Duty Paid</th> |
| <th class="py-3 px-4 text-left font-medium">Country</th> |
| <th class="py-3 px-4 text-left font-medium">Status</th> |
| <th class="py-3 px-4 text-left font-medium">Actions</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="outlier-row hover:bg-gray-50 dark:hover:bg-gray-800"> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <div>IT-2024-007156</div> |
| <div class="text-xs opacity-60">04/05/2024</div> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <span class="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs">Missing Value</span> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">8471.70.51</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$0.00</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$0.00</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">CN</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <span class="px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 text-xs">Review Needed</span> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <button class="text-primary hover:text-blue-700 mr-2"> |
| <span class="mdi mdi-pencil"></span> |
| </button> |
| <button class="text-green-500 hover:text-green-700"> |
| <span class="mdi mdi-check"></span> |
| </button> |
| </td> |
| </tr> |
| |
| <tr class="outlier-row hover:bg-gray-50 dark:hover:bg-gray-800"> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <div>IT-2024-008932</div> |
| <div class="text-xs opacity-60">04/03/2024</div> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <span class="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs">Late Filing</span> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">6204.62.20</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$21,450.00</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$4,290.00</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">MX</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <span class="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs">In Progress</span> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <button class="text-primary hover:text-blue-700 mr-2"> |
| <span class="mdi mdi-pencil"></span> |
| </button> |
| <button class="text-green-500 hover:text-green-700"> |
| <span class="mdi mdi-check"></span> |
| </button> |
| </td> |
| </tr> |
| |
| <tr class="outlier-row hover:bg-gray-50 dark:hover:bg-gray-800"> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <div>IT-2024-009451</div> |
| <div class="text-xs opacity-60">04/06/2024</div> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <span class="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs">Duplicate Entry</span> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">6402.19.05</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$15,200.00</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$1,520.00</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">VN</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <span class="px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 text-xs">Review Needed</span> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <button class="text-primary hover:text-blue-700 mr-2"> |
| <span class="mdi mdi-pencil"></span> |
| </button> |
| <button class="text-green-500 hover:text-green-700"> |
| <span class="mdi mdi-check"></span> |
| </button> |
| </td> |
| </tr> |
| |
| <tr class="outlier-row hover:bg-gray-50 dark:hover:bg-gray-800"> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <div>IT-2024-010823</div> |
| <div class="text-xs opacity-60">04/02/2024</div> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <span class="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs">USMCA Claim Issue</span> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">8708.29.50</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$82,300.00</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$8,230.00</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">CA</td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <span class="px-2 py-1 rounded-full bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs">Resolved</span> |
| </td> |
| <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800"> |
| <button class="text-gray-500 hover:text-gray-700 mr-2" title="Edit"> |
| <span class="mdi mdi-eye"></span> |
| </button> |
| <button class="text-red-500 hover:text-red-700" title="Delete"> |
| <span class="mdi mdi-delete"></span> |
| </button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="mt-4 flex justify-between items-center"> |
| <div class="text-sm opacity-70"> |
| Showing 4 of 37 outliers |
| </div> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">Previous</button> |
| <button class="px-3 py-1 bg-primary text-white rounded-lg">Next</button> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in"> |
| <h3 class="text-lg font-semibold mb-4">Download Center</h3> |
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
| <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex justify-between items-start mb-3"> |
| <span class="mdi mdi-file-document-outline text-3xl text-primary"></span> |
| <span class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-xs rounded">CSV</span> |
| </div> |
| <h4 class="font-medium mb-1">Transaction Report</h4> |
| <p class="text-sm opacity-70 mb-3">All entries for current period</p> |
| <button class="w-full py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm"> |
| Download (124K rows) |
| </button> |
| </div> |
| |
| <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex justify-between items-start mb-3"> |
| <span class="mdi mdi-finance text-3xl text-green-500"></span> |
| <span class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-xs rounded">CSV</span> |
| </div> |
| <h4 class="font-medium mb-1">Duty Analysis</h4> |
| <p class="text-sm opacity-70 mb-3">By HTS, value and duty rate</p> |
| <button class="w-full py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm"> |
| Download (22K rows) |
| </button> |
| </div> |
| |
| <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex justify-between items-start mb-3"> |
| <span class="mdi mdi-timetable text-3xl text-purple-500"></span> |
| <span class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-xs rounded">CSV</span> |
| </div> |
| <h4 class="font-medium mb-1">Cycle Time Report</h4> |
| <p class="text-sm opacity-70 mb-3">Entry milestone times</p> |
| <button class="w-full py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm"> |
| Download (18K rows) |
| </button> |
| </div> |
| |
| <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex justify-between items-start mb-3"> |
| <span class="mdi mdi-chart-box-outline text-3xl text-orange-500"></span> |
| <span class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-xs rounded">PNG</span> |
| </div> |
| <h4 class="font-medium mb-1">Dashboard Export</h4> |
| <p class="text-sm opacity-70 mb-3">Full dashboard as image</p> |
| <button class="w-full py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm"> |
| Download Image |
| </button> |
| </div> |
| </div> |
| </section> |
| </main> |
| |
| <footer class="mt-12 py-6 bg-gray-50 dark:bg-gray-800"> |
| <div class="container mx-auto px-4 text-center text-sm opacity-80"> |
| <p>Customs Brokerage Analytics Dashboard v1.0 - Synthesized data from 50,000 customs entry records</p> |
| <p class="mt-2">© 2024 Global Trade Analytics. All rights reserved.</p> |
| </div> |
| </footer> |
| |
| <script> |
| |
| flatpickr("#date-range", { |
| mode: "range", |
| dateFormat: "M j, Y", |
| defaultDate: ["2024-03-01", "2024-04-15"] |
| }); |
| |
| |
| document.getElementById('theme-toggle').addEventListener('click', function() { |
| document.documentElement.classList.toggle('dark'); |
| localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); |
| }); |
| |
| |
| if (localStorage.getItem('theme') === 'dark') { |
| document.documentElement.classList.add('dark'); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| Plotly.newPlot('pareto-chart', [{ |
| x: ['8471.70.51', '6204.62.20', '6402.19.05', '8708.29.50', '3926.90.85', '8517.62.00', '6307.90.98', '2936.90.50', '9403.70.80', '3402.20.90'], |
| y: [342800, 312400, 284500, 265300, 243100, 221700, 204800, 192400, 187500, 173200], |
| type: 'bar', |
| marker: { |
| color: '#1a56db' |
| }, |
| name: 'Duty Paid' |
| }], { |
| title: false, |
| margin: {t: 10, l: 50, r: 20, b: 90}, |
| xaxis: { |
| tickangle: -45 |
| }, |
| yaxis: { |
| title: 'USD' |
| }, |
| plot_bgcolor: 'transparent', |
| paper_bgcolor: 'transparent', |
| font: { |
| family: 'inherit', |
| color: 'inherit' |
| } |
| }); |
| |
| |
| const months = ['Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar']; |
| Plotly.newPlot('trend-chart', [{ |
| x: months, |
| y: [1.12, 1.28, 1.65, 1.92, 2.12, 2.34], |
| type: 'scatter', |
| mode: 'lines+markers', |
| marker: { |
| color: '#1a56db', |
| size: 8 |
| }, |
| line: { |
| color: '#1a56db', |
| width: 3 |
| }, |
| name: 'Duty Paid (Millions)' |
| }, { |
| x: months, |
| y: [0.84, 0.89, 0.94, 0.92, 0.96, 1.02], |
| type: 'scatter', |
| mode: 'lines+markers', |
| marker: { |
| color: '#7e3af2', |
| size: 8 |
| }, |
| line: { |
| color: '#7e3af2', |
| width: 3 |
| }, |
| yaxis: 'y2', |
| name: 'Freight Spend (Millions)' |
| }], { |
| title: false, |
| margin: {t: 10, l: 50, r: 50, b: 50}, |
| plot_bgcolor: 'transparent', |
| paper_bgcolor: 'transparent', |
| font: { |
| family: 'inherit', |
| color: 'inherit' |
| }, |
| yaxis: { |
| title: 'Duty Paid', |
| showgrid: true, |
| gridcolor: 'rgba(0,0,0,0.1)' |
| }, |
| yaxis2: { |
| title: 'Freight Spend', |
| overlaying: 'y', |
| side: 'right', |
| showgrid: false |
| }, |
| legend: { |
| x: 0.5, |
| y: 1.2, |
| xanchor: 'center', |
| orientation: 'h' |
| } |
| }); |
| |
| |
| const funnelStages = ['Arrival', 'ISF Filed', 'Entry Filed', 'CBP Release', 'Delivery']; |
| const funnelValues = [50000, 49200, 48600, 48150, 47800]; |
| const avgTimes = ['-', '12h', '18h', '8h', '4h']; |
| |
| let funnelData = []; |
| for (let i = 0; i < funnelStages.length; i++) { |
| funnelData.push({ |
| type: 'funnel', |
| name: funnelStages[i], |
| y: [funnelStages[i] + ' ' + avgTimes[i]], |
| x: [funnelValues[i]], |
| textinfo: "value+percent initial", |
| marker: { |
| color: ['#7e3af2', '#1a56db', '#0e9f6e', '#f05f14', '#e02424'][i] |
| }, |
| hoverinfo: 'name+text' |
| }); |
| } |
| |
| Plotly.newPlot('funnel-chart', funnelData, { |
| title: false, |
| margin: {t: 30, l: 0, r: 0, b: 30}, |
| funnelmode: 'stack', |
| showlegend: false, |
| plot_bgcolor: 'transparent', |
| paper_bgcolor: 'transparent', |
| font: { |
| family: 'inherit', |
| color: 'inherit' |
| } |
| }); |
| |
| |
| const ports = [ |
| {name: 'New York', lat: 40.7, lon: -74, value: 4.2}, |
| {name: 'Los Angeles', lat: 34.05, lon: -118.25, value: 5.7}, |
| {name: 'Chicago', lat: 41.88, lon: -87.63, value: 2.8}, |
| {name: 'Houston', lat: 29.76, lon: -95.37, value: 3.4}, |
| {name: 'Miami', lat: 25.76, lon: -80.19, value: 4.5}, |
| {name: 'Seattle', lat: 47.61, lon: -122.33, value: 3.9}, |
| {name: 'Montreal', lat: 45.50, lon: -73.56, value: 3.1}, |
| {name: 'Vancouver', lat: 49.25, lon: -123.12, value: 3.3}, |
| {name: 'Toronto', lat: 43.65, lon: -79.38, value: 2.6} |
| ]; |
| |
| const portData = ports.map(p => ({ |
| type: 'scattergeo', |
| mode: 'markers', |
| lat: [p.lat], |
| lon: [p.lon], |
| text: [`${p.name}: ${p.value} days`], |
| marker: { |
| size: p.value * 6, |
| color: p.value > 4.5 ? '#f05f14' : (p.value > 3.5 ? '#1a56db' : '#0e9f6e'), |
| opacity: 0.8, |
| line: { |
| width: 1, |
| color: '#ffffff' |
| } |
| }, |
| name: p.name |
| })); |
| |
| const geoLayout = { |
| geo: { |
| scope: 'north america', |
| showcountries: true, |
| countrycolor: '#cccccc', |
| showland: true, |
| landcolor: 'rgba(200, 200, 200, 0.2)', |
| showocean: true, |
| oceancolor: 'rgba(64, 164, 223, 0.1)', |
| projection: { |
| type: 'natural earth' |
| }, |
| center: { |
| lat: 45, |
| lon: -95 |
| } |
| }, |
| margin: {t: 10, l: 0, r: 0, b: 0}, |
| showlegend: false, |
| paper_bgcolor: 'transparent' |
| }; |
| |
| Plotly.newPlot('geo-chart', portData, geoLayout); |
| }); |
| </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/customs-brokerage-analytics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
