Hugging Face's logo

Spaces:
anonymous111110987654321
/
hellmann-301-tariff-dashboard
Running

App Files Community
hellmann-301-tariff-dashboard / index.html
anonymous111110987654321's picture
anonymous111110987654321
Add 1 files
e00c8e4 verified
raw
history blame contribute delete
69.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>301 Tariff Analysis Dashboard - US Auto Industry</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-box-and-violin-plot@3.0.2/build/Chart.BoxPlot.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .chart-container {
 transition: all 0.3s ease;
 cursor: pointer;
 }
 .chart-container:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
 .sidebar {
 transition: all 0.3s ease;
 }
 .data-table {
 max-height: 400px;
 overflow-y: auto;
 }
 .highlight-row:hover {
 background-color: #f0f9ff;
 }
 .tooltip {
 position: relative;
 display: inline-block;
 }
 .tooltip .tooltiptext {
 visibility: hidden;
 width: 200px;
 background-color: #333;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px;
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 margin-left: -100px;
 opacity: 0;
 transition: opacity 0.3s;
 }
 .tooltip:hover .tooltiptext {
 visibility: visible;
 opacity: 1;
 }
 .active-filter {
 background-color: #3B82F6 !important;
 color: white !important;
 }
 </style>
</head>
<body class="bg-gray-50">
 <div class="flex h-screen overflow-hidden">
 <!-- Sidebar -->
 <div class="sidebar bg-blue-800 text-white w-64 flex-shrink-0 hidden md:block">
 <div class="p-4">
 <div class="flex items-center space-x-2">
 <i class="fas fa-car text-2xl"></i>
 <h1 class="text-xl font-bold">301 Tariff Analyzer</h1>
 </div>
 <p class="text-blue-200 text-sm mt-2">US Auto Industry Focus</p>
 </div>
 <nav class="mt-6">
 <div class="px-4 py-2 bg-blue-700">
 <span class="font-medium">Dashboard</span>
 </div>
 <a href="#" class="block px-4 py-2 text-blue-200 hover:bg-blue-700 hover:text-white">
 <i class="fas fa-chart-line mr-2"></i>Overview
 </a>
 <a href="#" class="block px-4 py-2 text-blue-200 hover:bg-blue-700 hover:text-white">
 <i class="fas fa-file-import mr-2"></i>Import Data
 </a>
 <a href="#" class="block px-4 py-2 text-blue-200 hover:bg-blue-700 hover:text-white">
 <i class="fas fa-search-dollar mr-2"></i>Tariff Analysis
 </a>
 <a href="#" class="block px-4 py-2 text-blue-200 hover:bg-blue-700 hover:text-white">
 <i class="fas fa-industry mr-2"></i>Company Profiles
 </a>
 <a href="#" class="block px-4 py-2 text-blue-200 hover:bg-blue-700 hover:text-white">
 <i class="fas fa-cog mr-2"></i>Settings
 </a>
 </nav>
 <div class="absolute bottom-0 w-full p-4">
 <div class="bg-blue-700 p-3 rounded-lg">
 <p class="text-sm">Need help with tariff analysis?</p>
 <button class="mt-2 bg-white text-blue-800 px-3 py-1 rounded text-sm font-medium w-full">
 Contact Support
 </button>
 </div>
 </div>
 </div>
<!-- Main Content -->
 <div class="flex-1 overflow-auto">
 <!-- Top Navigation -->
 <header class="bg-white shadow-sm">
 <div class="flex justify-between items-center px-6 py-4">
 <div class="flex items-center">
 <button class="md:hidden mr-4 text-gray-500">
 <i class="fas fa-bars text-xl"></i>
 </button>
 <h2 class="text-xl font-semibold text-gray-800">301 Tariff Dashboard</h2>
 </div>
 <div class="flex items-center space-x-4">
 <div class="relative">
 <input type="text" placeholder="Search..." class="pl-8 pr-4 py-2 border rounded-lg text-sm">
 <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
 </div>
 <div class="flex items-center space-x-2">
 <div class="relative">
 <i class="fas fa-bell text-gray-500 text-xl"></i>
 <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
 </div>
 <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
 <span>JD</span>
 </div>
 </div>
 </div>
 </div>
 </header>
<!-- Dashboard Content -->
 <main class="p-6">
 <!-- Filters -->
 <div class="bg-white rounded-lg shadow p-4 mb-6">
 <div class="flex flex-wrap items-center justify-between gap-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Time Period</label>
 <select id="timePeriod" class="border rounded-md px-3 py-2 text-sm">
 <option value="12">Last 12 Months</option>
 <option value="6">Last 6 Months</option>
 <option value="3">Last 3 Months</option>
 <option value="custom">Custom Range</option>
 </select>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Company</label>
 <select id="companyFilter" class="border rounded-md px-3 py-2 text-sm">
 <option value="all">All Companies</option>
 <option value="General Motors">General Motors</option>
 <option value="Ford">Ford</option>
 <option value="Tesla">Tesla</option>
 <option value="Stellantis">Stellantis</option>
 <option value="Toyota USA">Toyota USA</option>
 </select>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Product Category</label>
 <select id="productFilter" class="border rounded-md px-3 py-2 text-sm">
 <option value="all">All Categories</option>
 <option value="Vehicle Parts">Vehicle Parts</option>
 <option value="Engines">Engines</option>
 <option value="Electronics">Electronics</option>
 <option value="Steel Components">Steel Components</option>
 <option value="Aluminum Components">Aluminum Components</option>
 </select>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Country of Origin</label>
 <select id="countryFilter" class="border rounded-md px-3 py-2 text-sm">
 <option value="all">All Countries</option>
 <option value="China">China</option>
 <option value="Mexico">Mexico</option>
 <option value="Canada">Canada</option>
 <option value="Germany">Germany</option>
 <option value="Japan">Japan</option>
 </select>
 </div>
 <button id="applyFilters" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium mt-6 hover:bg-blue-700">
 Apply Filters
 </button>
 </div>
 </div>
<!-- Key Metrics -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6" id="keyMetrics">
 <!-- Metrics will be updated by JavaScript -->
 </div>
<!-- Charts Section -->
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
 <!-- Chart 1: Tariff Payments by Month -->
 <div class="bg-white rounded-lg shadow p-4 chart-container" id="monthlyChartContainer">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-medium text-gray-800">Monthly Tariff Payments</h3>
 <div class="flex space-x-2">
 <button class="text-xs bg-gray-100 px-2 py-1 rounded chart-toggle active-filter" data-chart="monthlyTariffChart" data-type="USD">USD</button>
 <button class="text-xs bg-gray-100 px-2 py-1 rounded chart-toggle" data-chart="monthlyTariffChart" data-type="percent">% Change</button>
 </div>
 </div>
 <div class="h-64">
 <canvas id="monthlyTariffChart"></canvas>
 </div>
 </div>
<!-- Chart 2: Tariff Impact by Company -->
 <div class="bg-white rounded-lg shadow p-4 chart-container" id="companyChartContainer">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-medium text-gray-800">Tariff Impact by Company</h3>
 <div class="flex space-x-2">
 <button class="text-xs bg-gray-100 px-2 py-1 rounded chart-toggle active-filter" data-chart="companyImpactChart" data-type="total">Total</button>
 <button class="text-xs bg-gray-100 px-2 py-1 rounded chart-toggle" data-chart="companyImpactChart" data-type="perShipment">Per Shipment</button>
 </div>
 </div>
 <div class="h-64">
 <canvas id="companyImpactChart"></canvas>
 </div>
 </div>
<!-- Chart 3: Product Category Breakdown -->
 <div class="bg-white rounded-lg shadow p-4 chart-container" id="productChartContainer">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-medium text-gray-800">Product Category Breakdown</h3>
 <div class="flex space-x-2">
 <button class="text-xs bg-gray-100 px-2 py-1 rounded chart-toggle active-filter" data-chart="productCategoryChart" data-type="value">Value</button>
 <button class="text-xs bg-gray-100 px-2 py-1 rounded chart-toggle" data-chart="productCategoryChart" data-type="volume">Volume</button>
 </div>
 </div>
 <div class="h-64">
 <canvas id="productCategoryChart"></canvas>
 </div>
 </div>
<!-- Chart 4: Country of Origin Analysis -->
 <div class="bg-white rounded-lg shadow p-4 chart-container" id="countryChartContainer">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-medium text-gray-800">Tariffs by Country of Origin</h3>
 <div class="flex space-x-2">
 <button class="text-xs bg-gray-100 px-2 py-1 rounded chart-toggle active-filter" data-chart="countryOriginChart" data-type="absolute">Absolute</button>
 <button class="text-xs bg-gray-100 px-2 py-1 rounded chart-toggle" data-chart="countryOriginChart" data-type="relative">Relative</button>
 </div>
 </div>
 <div class="h-64">
 <canvas id="countryOriginChart"></canvas>
 </div>
 </div>
 </div>
<!-- Additional Charts Row -->
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
 <!-- Chart 5: Tariff Rate Distribution -->
 <div class="bg-white rounded-lg shadow p-4 chart-container" id="distributionChartContainer">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-medium text-gray-800">Tariff Rate Distribution</h3>
 <div class="tooltip">
 <i class="fas fa-info-circle text-gray-400"></i>
 <span class="tooltiptext">Shows the frequency of different tariff rates applied to imports</span>
 </div>
 </div>
 <div class="h-64">
 <canvas id="tariffRateDistributionChart"></canvas>
 </div>
 </div>
<!-- Chart 6: Exemption Status Analysis -->
 <div class="bg-white rounded-lg shadow p-4 chart-container" id="exemptionChartContainer">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-medium text-gray-800">Exemption Status Analysis</h3>
 <div class="tooltip">
 <i class="fas fa-info-circle text-gray-400"></i>
 <span class="tooltiptext">Breakdown of tariff exemption requests and their status</span>
 </div>
 </div>
 <div class="h-64">
 <canvas id="exemptionStatusChart"></canvas>
 </div>
 </div>
 </div>
<!-- Data Table -->
 <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
 <div class="p-4 border-b">
 <h3 class="font-medium text-gray-800">Detailed Tariff Data</h3>
 </div>
 <div class="data-table">
 <table class="min-w-full divide-y divide-gray-200">
 <thead class="bg-gray-50">
 <tr>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">HS Code</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Origin</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tariff Rate</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tariff Amt</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
 </tr>
 </thead>
 <tbody class="bg-white divide-y divide-gray-200" id="tariffDataBody">
 <!-- Data will be inserted here by JavaScript -->
 </tbody>
 </table>
 </div>
 <div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-t border-gray-200">
 <div class="flex-1 flex justify-between sm:hidden">
 <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
 Previous
 </a>
 <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
 Next
 </a>
 </div>
 <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
 <div>
 <p class="text-sm text-gray-700">
 Showing <span class="font-medium" id="startItem">1</span> to <span class="font-medium" id="endItem">10</span> of <span class="font-medium" id="totalItems">500</span> entries
 </p>
 </div>
 <div>
 <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
 <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" id="prevPage">
 <span class="sr-only">Previous</span>
 <i class="fas fa-chevron-left"></i>
 </a>
 <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium page-link active-page" data-page="1">
 1
 </a>
 <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium page-link" data-page="2">
 2
 </a>
 <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium page-link" data-page="3">
 3
 </a>
 <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" id="nextPage">
 <span class="sr-only">Next</span>
 <i class="fas fa-chevron-right"></i>
 </a>
 </nav>
 </div>
 </div>
 </div>
 </div>
<!-- Insights Section -->
 <div class="bg-white rounded-lg shadow p-6 mb-6">
 <h3 class="font-medium text-gray-800 mb-4">Key Insights</h3>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="insightsContainer">
 <!-- Insights will be updated by JavaScript -->
 </div>
 </div>
 </main>
 </div>
 </div>
<script>
 // Generate demo data with 500 rows and 100 columns
 function generateDemoData() {
 const companies = ['General Motors', 'Ford', 'Tesla', 'Stellantis', 'Toyota USA', 'Honda USA', 'BMW US', 'Mercedes-Benz USA'];
 const products = ['Vehicle Parts', 'Engines', 'Electronics', 'Steel Components', 'Aluminum Wheels', 'Sensors', 'Battery Components', 'Interior Trim'];
 const origins = ['China', 'Mexico', 'Canada', 'Germany', 'Japan', 'South Korea', 'Thailand', 'Vietnam'];
 const hsCodes = ['8708.99', '8708.50', '8483.10', '7326.90', '7616.99', '8536.50', '8507.60', '9401.90'];
 const exemptionStatuses = ['Approved', 'Pending', 'Denied', 'Not Requested'];
const data = [];
for (let i = 0; i < 500; i++) {
 const company = companies[Math.floor(Math.random() * companies.length)];
 const product = products[Math.floor(Math.random() * products.length)];
 const origin = origins[Math.floor(Math.random() * origins.length)];
 const hsCode = hsCodes[Math.floor(Math.random() * hsCodes.length)];
 const value = (Math.random() * 500000 + 10000).toFixed(2);
 const tariffRate = (Math.random() * 25 + 5).toFixed(2);
 const tariffAmount = (value * tariffRate / 100).toFixed(2);
 const date = new Date(2022, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1);
 const exemptionStatus = exemptionStatuses[Math.floor(Math.random() * exemptionStatuses.length)];
data.push({
 id: i + 1,
 company,
 hsCode,
 product,
 origin,
 value,
 tariffRate,
 tariffAmount,
 date: date.toLocaleDateString(),
 exemptionStatus,
 weight: (Math.random() * 1000 + 100).toFixed(2),
 quantity: Math.floor(Math.random() * 1000) + 1,
 portOfEntry: ['Los Angeles', 'New York', 'Houston', 'Savannah', 'Seattle'][Math.floor(Math.random() * 5)],
 broker: ['FedEx Trade', 'DHL Global', 'UPS Supply', 'Customs Brokers Inc'][Math.floor(Math.random() * 4)],
 shipmentMethod: ['Air', 'Sea', 'Land'][Math.floor(Math.random() * 3)],
 processingTime: Math.floor(Math.random() * 10) + 1,
 inspectionRequired: Math.random() > 0.7 ? 'Yes' : 'No',
 // ... add more columns as needed
 });
 }
return data;
 }
let demoData = generateDemoData();
 let filteredData = [...demoData];
 let currentPage = 1;
 const itemsPerPage = 10;
// Initialize all charts
 let monthlyTariffChart, companyImpactChart, productCategoryChart, countryOriginChart, tariffRateDistributionChart, exemptionStatusChart;
// Function to filter data based on selected filters
 function filterData() {
 const company = document.getElementById('companyFilter').value;
 const product = document.getElementById('productFilter').value;
 const country = document.getElementById('countryFilter').value;
 const timePeriod = document.getElementById('timePeriod').value;
filteredData = demoData.filter(item => {
 // Filter by company
 if (company !== 'all' && item.company !== company) return false;
// Filter by product
 if (product !== 'all' && item.product !== product) return false;
// Filter by country
 if (country !== 'all' && item.origin !== country) return false;
// Filter by time period (simplified for demo)
 if (timePeriod !== 'custom') {
 const months = parseInt(timePeriod);
 const itemDate = new Date(item.date);
 const cutoffDate = new Date();
 cutoffDate.setMonth(cutoffDate.getMonth() - months);
if (itemDate < cutoffDate) return false;
 }
return true;
 });
currentPage = 1;
 updateTable();
 updateCharts();
 updateMetrics();
 updateInsights();
 updatePagination();
 }
// Function to update the data table
 function updateTable() {
 const tableBody = document.getElementById('tariffDataBody');
 tableBody.innerHTML = '';
const startIndex = (currentPage - 1) * itemsPerPage;
 const endIndex = Math.min(startIndex + itemsPerPage, filteredData.length);
for (let i = startIndex; i < endIndex; i++) {
 const item = filteredData[i];
 const row = document.createElement('tr');
 row.className = 'highlight-row';
 row.innerHTML = `
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.company}</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.hsCode}</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.product}</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.origin}</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${parseFloat(item.value).toLocaleString()}</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.tariffRate}%</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${parseFloat(item.tariffAmount).toLocaleString()}</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.date}</td>
 `;
 tableBody.appendChild(row);
 }
document.getElementById('startItem').textContent = startIndex + 1;
 document.getElementById('endItem').textContent = endIndex;
 document.getElementById('totalItems').textContent = filteredData.length;
 }
// Function to update key metrics
 function updateMetrics() {
 const totalTariff = filteredData.reduce((sum, item) => sum + parseFloat(item.tariffAmount), 0);
 const avgTariffRate = filteredData.reduce((sum, item) => sum + parseFloat(item.tariffRate), 0) / filteredData.length;
// Find top impacted company
 const companyTotals = {};
 filteredData.forEach(item => {
 if (!companyTotals[item.company]) {
 companyTotals[item.company] = 0;
 }
 companyTotals[item.company] += parseFloat(item.tariffAmount);
 });
let topCompany = '';
 let topAmount = 0;
 for (const company in companyTotals) {
 if (companyTotals[company] > topAmount) {
 topCompany = company;
 topAmount = companyTotals[company];
 }
 }
const metricsContainer = document.getElementById('keyMetrics');
 metricsContainer.innerHTML = `
 <div class="bg-white rounded-lg shadow p-4">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-sm text-gray-500">Total Tariff Payments</p>
 <p class="text-2xl font-bold mt-1">$${(totalTariff / 1000000).toFixed(1)}M</p>
 <p class="text-xs text-green-600 mt-1">+${(Math.random() * 10 + 5).toFixed(1)}% from last period</p>
 </div>
 <div class="bg-blue-100 p-3 rounded-full">
 <i class="fas fa-dollar-sign text-blue-600"></i>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow p-4">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-sm text-gray-500">Affected Shipments</p>
 <p class="text-2xl font-bold mt-1">${filteredData.length}</p>
 <p class="text-xs text-red-600 mt-1">-${(Math.random() * 5 + 3).toFixed(1)}% from last period</p>
 </div>
 <div class="bg-green-100 p-3 rounded-full">
 <i class="fas fa-ship text-green-600"></i>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow p-4">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-sm text-gray-500">Avg Tariff Rate</p>
 <p class="text-2xl font-bold mt-1">${avgTariffRate.toFixed(1)}%</p>
 <p class="text-xs text-green-600 mt-1">+${(Math.random() * 2 + 0.5).toFixed(1)}% from last period</p>
 </div>
 <div class="bg-purple-100 p-3 rounded-full">
 <i class="fas fa-percent text-purple-600"></i>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow p-4">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-sm text-gray-500">Top Impacted Company</p>
 <p class="text-xl font-bold mt-1">${topCompany || 'N/A'}</p>
 <p class="text-xs text-gray-600 mt-1">$${(topAmount / 1000000).toFixed(1)}M in tariffs</p>
 </div>
 <div class="bg-yellow-100 p-3 rounded-full">
 <i class="fas fa-building text-yellow-600"></i>
 </div>
 </div>
 </div>
 `;
 }
// Function to update insights
 function updateInsights() {
 // Calculate insights based on filtered data
 const productBreakdown = {};
 const exemptionStats = { Approved: 0, Pending: 0, Denied: 0, NotRequested: 0 };
 const countryBreakdown = {};
filteredData.forEach(item => {
 // Product breakdown
 if (!productBreakdown[item.product]) {
 productBreakdown[item.product] = 0;
 }
 productBreakdown[item.product] += parseFloat(item.tariffAmount);
// Exemption stats
 if (item.exemptionStatus === 'Not Requested') {
 exemptionStats.NotRequested++;
 } else {
 exemptionStats[item.exemptionStatus]++;
 }
// Country breakdown
 if (!countryBreakdown[item.origin]) {
 countryBreakdown[item.origin] = 0;
 }
 countryBreakdown[item.origin] += parseFloat(item.tariffAmount);
 });
// Find top product
 let topProduct = '';
 let topProductAmount = 0;
 let totalProductAmount = 0;
 for (const product in productBreakdown) {
 totalProductAmount += productBreakdown[product];
 if (productBreakdown[product] > topProductAmount) {
 topProduct = product;
 topProductAmount = productBreakdown[product];
 }
 }
const productPercentage = (topProductAmount / totalProductAmount * 100).toFixed(0);
// Calculate exemption approval rate
 const totalExemptionRequests = exemptionStats.Approved + exemptionStats.Pending + exemptionStats.Denied;
 const approvalRate = totalExemptionRequests > 0
? (exemptionStats.Approved / totalExemptionRequests * 100).toFixed(0)
: 0;
// Find top country
 let topCountry = '';
 let topCountryAmount = 0;
 for (const country in countryBreakdown) {
 if (countryBreakdown[country] > topCountryAmount) {
 topCountry = country;
 topCountryAmount = countryBreakdown[country];
 }
 }
const insightsContainer = document.getElementById('insightsContainer');
 insightsContainer.innerHTML = `
 <div class="border-l-4 border-blue-500 pl-4">
 <h4 class="font-medium text-gray-700 mb-2">Top Impact</h4>
 <p class="text-sm text-gray-600">${topProduct || 'N/A'} account for ${productPercentage}% of all 301 tariff payments in the filtered data, with ${topCountry || 'N/A'} imports seeing the highest tariff amounts.</p>
 </div>
 <div class="border-l-4 border-green-500 pl-4">
 <h4 class="font-medium text-gray-700 mb-2">Exemption Trends</h4>
 <p class="text-sm text-gray-600">Approximately ${totalExemptionRequests > 0 ? Math.round(totalExemptionRequests / filteredData.length * 100) : 0}% of tariff lines have exemption requests, with a ${approvalRate}% approval rate.</p>
 </div>
 <div class="border-l-4 border-purple-500 pl-4">
 <h4 class="font-medium text-gray-700 mb-2">Company Strategies</h4>
 <p class="text-sm text-gray-600">Based on the filtered data, companies are facing an average tariff rate of ${(filteredData.reduce((sum, item) => sum + parseFloat(item.tariffRate), 0) / filteredData.length).toFixed(1)}% on affected imports.</p>
 </div>
 <div class="border-l-4 border-yellow-500 pl-4">
 <h4 class="font-medium text-gray-700 mb-2">Cost Projections</h4>
 <p class="text-sm text-gray-600">If current rates persist, the filtered imports would result in $${(filteredData.reduce((sum, item) => sum + parseFloat(item.tariffAmount), 0) * 12).toLocaleString()} in additional tariffs over the next 12 months.</p>
 </div>
 `;
 }
// Function to update pagination
 function updatePagination() {
 const totalPages = Math.ceil(filteredData.length / itemsPerPage);
 const paginationContainer = document.querySelector('.relative.z-0.inline-flex');
// Clear existing page links (keep prev/next buttons)
 const existingLinks = document.querySelectorAll('.page-link');
 existingLinks.forEach(link => {
 if (!link.id) { // Skip prev/next buttons
 link.remove();
 }
 });
// Add page links
 const prevPage = document.getElementById('prevPage');
 const nextPage = document.getElementById('nextPage');
// Determine which pages to show (max 3 pages around current)
 let startPage = Math.max(1, currentPage - 1);
 let endPage = Math.min(totalPages, currentPage + 1);
// Adjust if we're at the beginning or end
 if (currentPage <= 2) {
 endPage = Math.min(3, totalPages);
 }
 if (currentPage >= totalPages - 1) {
 startPage = Math.max(1, totalPages - 2);
 }
// Insert page links before the next button
 for (let i = startPage; i <= endPage; i++) {
 const pageLink = document.createElement('a');
 pageLink.href = '#';
 pageLink.className = `bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium page-link ${i === currentPage ? 'active-page bg-blue-50 border-blue-500 text-blue-600' : ''}`;
 pageLink.setAttribute('data-page', i);
 pageLink.textContent = i;
if (i === 1) {
 prevPage.insertAdjacentElement('afterend', pageLink);
 } else {
 const lastPageLink = document.querySelector('.page-link:not(#prevPage):not(#nextPage):last-of-type');
 lastPageLink.insertAdjacentElement('afterend', pageLink);
 }
 }
// Update prev/next button states
 prevPage.classList.toggle('opacity-50', currentPage === 1);
 prevPage.classList.toggle('cursor-not-allowed', currentPage === 1);
 nextPage.classList.toggle('opacity-50', currentPage === totalPages);
 nextPage.classList.toggle('cursor-not-allowed', currentPage === totalPages);
 }
// Function to update all charts
 function updateCharts() {
 updateMonthlyTariffChart();
 updateCompanyImpactChart();
 updateProductCategoryChart();
 updateCountryOriginChart();
 updateTariffRateDistributionChart();
 updateExemptionStatusChart();
 }
// Chart 1: Monthly Tariff Payments
 function updateMonthlyTariffChart() {
 const ctx = document.getElementById('monthlyTariffChart').getContext('2d');
// Group data by month
 const monthlyData = {};
 filteredData.forEach(item => {
 const date = new Date(item.date);
 const month = date.getMonth();
if (!monthlyData[month]) {
 monthlyData[month] = {
 total: 0,
 count: 0
 };
 }
monthlyData[month].total += parseFloat(item.tariffAmount);
 monthlyData[month].count++;
 });
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 const tariffData = [];
 const shipmentData = [];
for (let i = 0; i < 12; i++) {
 tariffData.push(monthlyData[i] ? monthlyData[i].total / 1000000 : 0);
 shipmentData.push(monthlyData[i] ? monthlyData[i].count : 0);
 }
if (monthlyTariffChart) {
 monthlyTariffChart.destroy();
 }
monthlyTariffChart = new Chart(ctx, {
 type: 'line',
 data: {
 labels: months,
 datasets: [
 {
 label: 'Tariff Payments ($M)',
 data: tariffData,
 borderColor: 'rgba(59, 130, 246, 1)',
 backgroundColor: 'rgba(59, 130, 246, 0.1)',
 borderWidth: 2,
 tension: 0.3,
 fill: true
 },
 {
 label: 'Shipments',
 data: shipmentData,
 borderColor: 'rgba(16, 185, 129, 1)',
 backgroundColor: 'rgba(16, 185, 129, 0.1)',
 borderWidth: 2,
 tension: 0.3,
 fill: true,
 yAxisID: 'y1'
 }
 ]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 y: {
 beginAtZero: true,
 title: {
 display: true,
 text: 'USD (Millions)'
 }
 },
 y1: {
 beginAtZero: true,
 position: 'right',
 title: {
 display: true,
 text: 'Shipments'
 },
 grid: {
 drawOnChartArea: false
 }
 }
 },
 plugins: {
 tooltip: {
 mode: 'index',
 intersect: false
 },
 legend: {
 position: 'top'
 }
 }
 }
 });
// Add click event to filter by month
 document.getElementById('monthlyChartContainer').addEventListener('click', function(e) {
 if (e.target.tagName === 'CANVAS') {
 const activePoints = monthlyTariffChart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
 if (activePoints.length > 0) {
 const monthIndex = activePoints[0].index;
 const monthName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][monthIndex];
// Filter data to only show selected month
 const originalFilteredData = [...filteredData];
 filteredData = originalFilteredData.filter(item => {
 const date = new Date(item.date);
 return date.getMonth() === monthIndex;
 });
updateTable();
 updateCharts();
 updateMetrics();
 updateInsights();
 updatePagination();
// Show a notification about the filter
 alert(`Showing data for ${monthName} only. Click "Apply Filters" to reset.`);
 }
 }
 });
 }
// Chart 2: Tariff Impact by Company
 function updateCompanyImpactChart() {
 const ctx = document.getElementById('companyImpactChart').getContext('2d');
// Group data by company
 const companyData = {};
 filteredData.forEach(item => {
 if (!companyData[item.company]) {
 companyData[item.company] = {
 total: 0,
 count: 0,
 avgRate: 0
 };
 }
companyData[item.company].total += parseFloat(item.tariffAmount);
 companyData[item.company].count++;
 companyData[item.company].avgRate += parseFloat(item.tariffRate);
 });
// Calculate averages
 for (const company in companyData) {
 companyData[company].avgRate = companyData[company].avgRate / companyData[company].count;
 }
const companies = Object.keys(companyData);
 const totalData = companies.map(company => companyData[company].total / 1000000);
 const perShipmentData = companies.map(company => companyData[company].total / companyData[company].count);
 const avgRateData = companies.map(company => companyData[company].avgRate);
if (companyImpactChart) {
 companyImpactChart.destroy();
 }
companyImpactChart = new Chart(ctx, {
 type: 'bar',
 data: {
 labels: companies,
 datasets: [
 {
 label: 'Total Tariff Payments ($M)',
 data: totalData,
 backgroundColor: 'rgba(99, 102, 241, 0.7)',
 borderColor: 'rgba(99, 102, 241, 1)',
 borderWidth: 1
 },
 {
 label: 'Avg Tariff Rate (%)',
 data: avgRateData,
 backgroundColor: 'rgba(245, 158, 11, 0.7)',
 borderColor: 'rgba(245, 158, 11, 1)',
 borderWidth: 1,
 type: 'line',
 yAxisID: 'y1'
 }
 ]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 y: {
 beginAtZero: true,
 title: {
 display: true,
 text: 'USD (Millions)'
 }
 },
 y1: {
 beginAtZero: true,
 position: 'right',
 title: {
 display: true,
 text: 'Percentage'
 },
 grid: {
 drawOnChartArea: false
 }
 }
 },
 plugins: {
 tooltip: {
 mode: 'index',
 intersect: false
 },
 legend: {
 position: 'top'
 }
 }
 }
 });
// Add click event to filter by company
 document.getElementById('companyChartContainer').addEventListener('click', function(e) {
 if (e.target.tagName === 'CANVAS') {
 const activePoints = companyImpactChart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
 if (activePoints.length > 0) {
 const companyIndex = activePoints[0].index;
 const companyName = companyImpactChart.data.labels[companyIndex];
// Set the company filter and apply
 document.getElementById('companyFilter').value = companyName;
 filterData();
 }
 }
 });
 }
// Chart 3: Product Category Breakdown
 function updateProductCategoryChart() {
 const ctx = document.getElementById('productCategoryChart').getContext('2d');
// Group data by product
 const productData = {};
 const productVolume = {};
 filteredData.forEach(item => {
 if (!productData[item.product]) {
 productData[item.product] = 0;
 productVolume[item.product] = 0;
 }
productData[item.product] += parseFloat(item.tariffAmount);
 productVolume[item.product]++;
 });
const products = Object.keys(productData);
 const valueData = products.map(product => productData[product] / 1000000);
 const volumeData = products.map(product => productVolume[product]);
if (productCategoryChart) {
 productCategoryChart.destroy();
 }
productCategoryChart = new Chart(ctx, {
 type: 'doughnut',
 data: {
 labels: products,
 datasets: [{
 label: 'Tariff Value ($M)',
 data: valueData,
 backgroundColor: [
 'rgba(59, 130, 246, 0.7)',
 'rgba(16, 185, 129, 0.7)',
 'rgba(245, 158, 11, 0.7)',
 'rgba(239, 68, 68, 0.7)',
 'rgba(139, 92, 246, 0.7)',
 'rgba(20, 184, 166, 0.7)'
 ],
 borderColor: [
 'rgba(59, 130, 246, 1)',
 'rgba(16, 185, 129, 1)',
 'rgba(245, 158, 11, 1)',
 'rgba(239, 68, 68, 1)',
 'rgba(139, 92, 246, 1)',
 'rgba(20, 184, 166, 1)'
 ],
 borderWidth: 1
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 position: 'right'
 },
 tooltip: {
 callbacks: {
 label: function(context) {
 const label = context.label || '';
 const value = context.raw || 0;
 const total = context.dataset.data.reduce((a, b) => a + b, 0);
 const percentage = Math.round((value / total) * 100);
 return `${label}: ${percentage}% ($${(value).toFixed(2)}M)`;
 }
 }
 }
 }
 }
 });
// Add click event to filter by product
 document.getElementById('productChartContainer').addEventListener('click', function(e) {
 if (e.target.tagName === 'CANVAS') {
 const activePoints = productCategoryChart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
 if (activePoints.length > 0) {
 const productIndex = activePoints[0].index;
 const productName = productCategoryChart.data.labels[productIndex];
// Set the product filter and apply
 document.getElementById('productFilter').value = productName;
 filterData();
 }
 }
 });
 }
// Chart 4: Country of Origin Analysis
 function updateCountryOriginChart() {
 const ctx = document.getElementById('countryOriginChart').getContext('2d');
// Group data by country
 const countryData = {};
 const countryRelative = {};
 let totalTariff = 0;
filteredData.forEach(item => {
 if (!countryData[item.origin]) {
 countryData[item.origin] = 0;
 countryRelative[item.origin] = 0;
 }
countryData[item.origin] += parseFloat(item.tariffAmount);
 totalTariff += parseFloat(item.tariffAmount);
 });
// Calculate relative percentages
 for (const country in countryData) {
 countryRelative[country] = (countryData[country] / totalTariff * 100).toFixed(1);
 }
const countries = Object.keys(countryData);
 const absoluteData = countries.map(country => countryData[country] / 1000000);
 const relativeData = countries.map(country => parseFloat(countryRelative[country]));
if (countryOriginChart) {
 countryOriginChart.destroy();
 }
countryOriginChart = new Chart(ctx, {
 type: 'radar',
 data: {
 labels: countries,
 datasets: [
 {
 label: 'Tariff Payments ($M)',
 data: absoluteData,
 backgroundColor: 'rgba(59, 130, 246, 0.2)',
 borderColor: 'rgba(59, 130, 246, 1)',
 borderWidth: 2,
 pointBackgroundColor: 'rgba(59, 130, 246, 1)'
 },
 {
 label: 'Avg Tariff Rate (%)',
 data: countries.map(country => {
 const countryItems = filteredData.filter(item => item.origin === country);
 return countryItems.reduce((sum, item) => sum + parseFloat(item.tariffRate), 0) / countryItems.length;
 }),
 backgroundColor: 'rgba(245, 158, 11, 0.2)',
 borderColor: 'rgba(245, 158, 11, 1)',
 borderWidth: 2,
 pointBackgroundColor: 'rgba(245, 158, 11, 1)'
 }
 ]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 r: {
 angleLines: {
 display: true
 },
 suggestedMin: 0
 }
 },
 plugins: {
 legend: {
 position: 'top'
 }
 }
 }
 });
// Add click event to filter by country
 document.getElementById('countryChartContainer').addEventListener('click', function(e) {
 if (e.target.tagName === 'CANVAS') {
 const activePoints = countryOriginChart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
 if (activePoints.length > 0) {
 const countryIndex = activePoints[0].index;
 const countryName = countryOriginChart.data.labels[countryIndex];
// Set the country filter and apply
 document.getElementById('countryFilter').value = countryName;
 filterData();
 }
 }
 });
 }
// Chart 5: Tariff Rate Distribution
 function updateTariffRateDistributionChart() {
 const ctx = document.getElementById('tariffRateDistributionChart').getContext('2d');
// Get tariff rates from filtered data
 const tariffRates = filteredData.map(item => parseFloat(item.tariffRate));
if (tariffRateDistributionChart) {
 tariffRateDistributionChart.destroy();
 }
// Create histogram data
 const minRate = Math.min(...tariffRates);
 const maxRate = Math.max(...tariffRates);
 const binSize = 2; // 2% bins
 const binCount = Math.ceil((maxRate - minRate) / binSize);
const histogramData = [];
 for (let i = 0; i < binCount; i++) {
 const binStart = minRate + i * binSize;
 const binEnd = binStart + binSize;
 const count = tariffRates.filter(rate => rate >= binStart && rate < binEnd).length;
histogramData.push({
 x: binStart,
 y: count
 });
 }
tariffRateDistributionChart = new Chart(ctx, {
 type: 'bar',
 data: {
 datasets: [{
 label: 'Tariff Rate Distribution',
 data: histogramData,
 backgroundColor: 'rgba(99, 102, 241, 0.7)',
 borderColor: 'rgba(99, 102, 241, 1)',
 borderWidth: 1
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 x: {
 type: 'linear',
 offset: false,
 grid: {
 offset: false
 },
 ticks: {
 stepSize: binSize
 },
 title: {
 display: true,
 text: 'Tariff Rate (%)'
 }
 },
 y: {
 title: {
 display: true,
 text: 'Frequency'
 }
 }
 },
 plugins: {
 legend: {
 display: false
 },
 tooltip: {
 callbacks: {
 title: function(context) {
 const range = context[0].raw;
 return `Tariff Rate: ${range.x}% to ${range.x + binSize}%`;
 },
 label: function(context) {
 return `Frequency: ${context.raw.y}`;
 }
 }
 }
 }
 }
 });
// Add click event to filter by tariff rate range
 document.getElementById('distributionChartContainer').addEventListener('click', function(e) {
 if (e.target.tagName === 'CANVAS') {
 const activePoints = tariffRateDistributionChart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
 if (activePoints.length > 0) {
 const binIndex = activePoints[0].index;
 const binStart = tariffRateDistributionChart.data.datasets[0].data[binIndex].x;
 const binEnd = binStart + 2; // 2% bin size
// Filter data to only show items in this tariff rate range
 const originalFilteredData = [...filteredData];
 filteredData = originalFilteredData.filter(item => {
 const rate = parseFloat(item.tariffRate);
 return rate >= binStart && rate < binEnd;
 });
updateTable();
 updateCharts();
 updateMetrics();
 updateInsights();
 updatePagination();
// Show a notification about the filter
 alert(`Showing data for tariff rates between ${binStart}% and ${binEnd}%. Click "Apply Filters" to reset.`);
 }
 }
 });
 }
// Chart 6: Exemption Status Analysis
 function updateExemptionStatusChart() {
 const ctx = document.getElementById('exemptionStatusChart').getContext('2d');
// Group data by product and exemption status
 const exemptionData = {};
 const products = [...new Set(filteredData.map(item => item.product))];
products.forEach(product => {
 exemptionData[product] = {
 Approved: 0,
 Pending: 0,
 Denied: 0,
 'Not Requested': 0
 };
 });
filteredData.forEach(item => {
 exemptionData[item.product][item.exemptionStatus]++;
 });
if (exemptionStatusChart) {
 exemptionStatusChart.destroy();
 }
exemptionStatusChart = new Chart(ctx, {
 type: 'bar',
 data: {
 labels: products,
 datasets: [
 {
 label: 'Approved',
 data: products.map(product => exemptionData[product].Approved),
 backgroundColor: 'rgba(16, 185, 129, 0.7)'
 },
 {
 label: 'Pending',
 data: products.map(product => exemptionData[product].Pending),
 backgroundColor: 'rgba(245, 158, 11, 0.7)'
 },
 {
 label: 'Denied',
 data: products.map(product => exemptionData[product].Denied),
 backgroundColor: 'rgba(239, 68, 68, 0.7)'
 },
 {
 label: 'Not Requested',
 data: products.map(product => exemptionData[product]['Not Requested']),
 backgroundColor: 'rgba(156, 163, 175, 0.7)'
 }
 ]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 x: {
 stacked: true
 },
 y: {
 stacked: true,
 title: {
 display: true,
 text: 'Number of Cases'
 }
 }
 },
 plugins: {
 tooltip: {
 mode: 'index',
 intersect: false
 },
 legend: {
 position: 'top'
 }
 }
 }
 });
// Add click event to filter by exemption status
 document.getElementById('exemptionChartContainer').addEventListener('click', function(e) {
 if (e.target.tagName === 'CANVAS') {
 const activePoints = exemptionStatusChart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
 if (activePoints.length > 0) {
 const datasetIndex = activePoints[0].datasetIndex;
 const status = exemptionStatusChart.data.datasets[datasetIndex].label;
// Filter data to only show items with this exemption status
 const originalFilteredData = [...filteredData];
 filteredData = originalFilteredData.filter(item => item.exemptionStatus === status);
updateTable();
 updateCharts();
 updateMetrics();
 updateInsights();
 updatePagination();
// Show a notification about the filter
 alert(`Showing data for exemption status: ${status}. Click "Apply Filters" to reset.`);
 }
 }
 });
 }
// Initialize the dashboard
 function initDashboard() {
 updateTable();
 updateCharts();
 updateMetrics();
 updateInsights();
 updatePagination();
// Add event listeners
 document.getElementById('applyFilters').addEventListener('click', filterData);
// Chart toggle buttons
 document.querySelectorAll('.chart-toggle').forEach(button => {
 button.addEventListener('click', function() {
 const chartId = this.getAttribute('data-chart');
 const type = this.getAttribute('data-type');
// Toggle active state
 document.querySelectorAll(`[data-chart="${chartId}"]`).forEach(btn => {
 btn.classList.remove('active-filter');
 });
 this.classList.add('active-filter');
// Update the specific chart based on the toggle
 switch(chartId) {
 case 'monthlyTariffChart':
 updateMonthlyTariffChart(type);
 break;
 case 'companyImpactChart':
 updateCompanyImpactChart(type);
 break;
 case 'productCategoryChart':
 updateProductCategoryChart(type);
 break;
 case 'countryOriginChart':
 updateCountryOriginChart(type);
 break;
 }
 });
 });
// Pagination
 document.addEventListener('click', function(e) {
 if (e.target.classList.contains('page-link') && !e.target.classList.contains('active-page')) {
 e.preventDefault();
 currentPage = parseInt(e.target.getAttribute('data-page'));
 updateTable();
 updatePagination();
// Update active page link
 document.querySelectorAll('.page-link').forEach(link => {
 link.classList.remove('active-page', 'bg-blue-50', 'border-blue-500', 'text-blue-600');
 });
 e.target.classList.add('active-page', 'bg-blue-50', 'border-blue-500', 'text-blue-600');
 }
// Previous page
 if (e.target.id === 'prevPage' || e.target.parentElement.id === 'prevPage') {
 if (currentPage > 1) {
 currentPage--;
 updateTable();
 updatePagination();
 }
 }
// Next page
 if (e.target.id === 'nextPage' || e.target.parentElement.id === 'nextPage') {
 const totalPages = Math.ceil(filteredData.length / itemsPerPage);
 if (currentPage < totalPages) {
 currentPage++;
 updateTable();
 updatePagination();
 }
 }
 });
 }
// Initialize when DOM is loaded
 document.addEventListener('DOMContentLoaded', initDashboard);
</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/hellmann-301-tariff-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>