| <!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> |
