Project goal Build a responsive, interactive web dashboard titled “XYZ Cosmetics – FTZ Analysis & Optimization Studio” that lets logistics, finance, and compliance teams simulate the use of U.S. Foreign Trade Zones versus Bonded Warehouses and standard entry to reduce duty/tariff spend, MPF, demurrage, and compliance overhead for imported beauty and cosmetic goods. Use only synthetic data generated client‑side. No external APIs. Context (embed as static text in an About panel) • FTZs are considered outside the U.S. customs territory for tariff purposes; duties are deferred until merchandise enters U.S. commerce. Weekly entry, direct delivery, inverted tariff opportunities, and scrap/waste relief can create material savings. Goods moved between FTZs under bond avoid duty until entry. If components aren’t admitted as privileged foreign status, the applicable duty can be based on the classification of the finished goods ultimately entered into the U.S. strtrade.com • Choosing FTZ vs. Bonded Warehouse can hinge on whether tariff rates are expected to rise or fall. FTZ can lock duty rate at admission if privileged foreign status is used, which helps when rates increase; Bonded Warehouse can benefit if rates decline since duty is assessed at withdrawal geodis.com, bergenlogistics.com. • FTZs defer or reduce duty and can cut compliance costs and MPF via weekly entry; there are 260+ FTZs in the U.S., typically near ports of entry. Using an FTZ operator/3PL can accelerate adoption chiefexecutive.net, zhftaxlaw.com. Architecture • Single‑page app with left sidebar filters, top navbar controls, and tabbed views: Overview, Inventory & Flows, Duty & Fees, FTZ vs. Alternatives, Optimization Lab, Compliance & Risk, About/Methodology. • Tech stack: HTML/CSS/JS, Plotly/ECharts for charts, Tabulator/ag‑Grid for tables, a simple client‑side state store. Client‑side PDF via print, CSV/PNG exports. • Performance target: 5–10k rows total; optionally use web workers for optimization recomputes. Global filters (left sidebar) Date range: 2023‑01 to 2026‑12 (monthly). Product family: Skincare, Makeup, Fragrance, Haircare, Accessories, Gift Sets. HS chapters/codes (checkbox list): 3304 (beauty/makeup), 3305 (hair), 3307 (perfumes/other), 4202 (cosmetic bags), 3923 (plastic packaging), 7010 (glass containers), 3401 (soaps). Supplier country: France, Italy, Spain, South Korea, Japan, China, Vietnam, Thailand, Mexico, Canada, Germany, UK. Port/Entry point: LAX, JFK, EWR, MIA, SAV, LGB, HOU, ORD, SEA. Channel: DTC e‑commerce, Boutiques, Department Stores, Duty‑Free/Travel Retail. Scenario selector: Standard Entry, FTZ – Baseline, FTZ – Privileged Foreign, FTZ – Inverted Tariff, Bonded Warehouse, Mixed Network, Custom. Currency: USD default; FX toggle (USD, EUR, JPY, KRW) with static rates. Synthetic data generation (run on initialization; keep PRNG seed; add “Regenerate Data”) Create these tables (arrays of objects). Use realistic ranges for a high‑end beauty brand. A) SKUCatalog • Columns: skuId, skuName, family, hsCode, componentDutyPct, finishedDutyPct, unitCOGSUSD, retailPriceUSD, originCountry, shelfLifeDays, hazmatFlag (bool), weightKg, packagingType (glass/plastic/metal/other). • 500–1,200 SKUs; fragrances higher hazmat and packaging weight; luxury glass bottles for skincare/fragrance; accessories include cosmetic bags. B) ComponentsCatalog • Columns: componentId, componentName, hsCode, dutyPct, unitCostUSD, originCountry, leadTimeDays, isFragile (bool). • 300–600 components: pumps/atomizers (plastics/metal), glass bottles (7010), caps, labels, gift boxes, applicators, outer cartons. C) BOM • Columns: skuId, componentId, qtyPerSKU. • Each SKU includes 3–10 components; fragrances rely on glass bottles and atomizers; gift sets combine multiple SKUs. D) InboundShipments (monthly) • Columns: month, shipmentId, skuId or componentId, isFinishedGood (bool), qtyUnits, supplierCountry, port, incoterms (FOB/CIF), freightUSD, insuranceUSD, customsValueUSD, arrivalMode (Air/Ocean), handlingUSD, demurrageUSD. • Include seasonality spikes for Q4 and new launches; higher air for short shelf life or promos. E) InventoryStates (monthly, per location type) • Columns: month, locationType (FTZ, Bonded, DC, 3PL), locationName, skuId, onHandUnits, agingDaysAvg, shrinkPct, cycleCountScore. • If scenario uses FTZ/Bonded, allocate shares of inbound to those locations with dwell time distribution (e.g., 15–60 days). F) OutboundOrders (monthly) • Columns: month, orderId, skuId, channel, region (US/Canada), units, promoDiscountPct, returnRatePct. • Trend: steady growth in DTC, seasonal spikes during holidays, gift sets surge in Q4. G) FeeSchedule • Columns: mpfMinUSD, mpfMaxUSD, mpfRatePct (for ad valorem), harborMaintenancePct (HMF ocean), entryFeeUSD, weeklyEntryEligible (bool), ftzOperatorFeeUSDPerMonth, bondedStorageFeeUSDPerPalletPerMonth, drayageUSDPerMove, complianceOverheadUSDPerEntry. • Provide typical synthetic values and caps. H) FTZPolicyOptions • Flags and parameters per scenario: privilegedForeignEnabled (bool), invertedTariffEligible (bool), weeklyEntryEnabled (bool), directDeliveryEnabled (bool), scrapReliefPct, wasteRatePct, zoneTransferEnabled (bool), classificationAtFinishedIfNotPrivileged (bool). • Add “AnticipatedTariffChange” vector per HS code with monthly deltas (−5pp to +5pp) to simulate rising/falling duties. I) RiskEvents • Columns: month, type (quota, policyChange, portCongestion, carrierStrike), hsCode, expectedImpactDaysDelay, expectedCostUSD, probabilityPct. • Used for Monte Carlo stress tests in Optimization Lab. Core calculations Customs Value and Duty Basis customsValue = item customsValueUSD + freightUSD + insuranceUSD as applicable to valuation. Duty rate selection depends on scenario and status: • Standard Entry: duty = customsValue × dutyPct based on imported item’s HS (finished or component). • FTZ – Baseline: duty deferred until entry to U.S. commerce; allow weekly entry to aggregate MPF; no change in rate selection unless inverted tariff logic applies. • FTZ – Privileged Foreign (PF): lock duty rate and classification at admission; future rate changes won’t apply to admitted goods geodis.com, bergenlogistics.com. • FTZ – Inverted Tariff: if components (higher duty) are admitted non‑privileged and finished SKU has a lower finishedDutyPct than componentDutyPct, allow duty on finished goods classification at time of entry (simulate inverted tariff savings) strtrade.com. • Bonded Warehouse: duty assessed at withdrawal; if rates decline, benefit; if rates rise, pay higher rate at withdrawal geodis.com, bergenlogistics.com. MPF/HMF and Entry Processing • Compute MPF ad valorem subject to min/max per entry. • Weekly entry (FTZ) reduces number of entries to roughly one per week per port; apply MPF caps accordingly strtrade.com. • HMF applies to ocean shipments on customs value. • Entry fees and compliance overhead per entry; FTZ direct delivery can reduce some handling/clearance costs. Storage and Handling • FTZ operator monthly fee and per‑pallet storage; bonded storage fee per pallet per month; demurrage/wharfage reductions if direct delivery is enabled. • Dwell time from InventoryStates drives months‑in‑storage × storage rate. Scrap/Waste Relief • For FTZ scenarios, model no duty on foreign‑status components that become scrap/waste within the FTZ (apply wasteRatePct × customsValue × dutyPct × scrapReliefPct) strtrade.com. Inverted Tariff Decision Implement chooseDutyBasis(shipment, scenario, PF, invertedEligible, finishedDutyPct, componentDutyPct): • If PF enabled: duty basis locked at admission classification. • Else if invertedEligible and shipment is components assembled in FTZ into a finished SKU with lower finishedDutyPct, select finished duty basis. • Else: standard duty on the imported item’s HS. Rate volatility • Apply AnticipatedTariffChange by month per HS to simulate rising/falling rate paths. • For Bonded Warehouse, duty uses the rate at withdrawal month; for FTZ PF, use locked rate at admission; for FTZ non‑PF, use rate at entry to commerce. Total landed cost per SKU landedCostPerUnit = COGS + allocated freight/insurance/handling + duty + MPF/HMF + storage + compliance overhead − scrap relief. Margin impact Gross margin per unit = retailPrice − discounts − returns impact − landedCostPerUnit. Demand elasticity optional slider per channel to simulate price changes affecting units. UI layout and visuals Top navbar • Title + Scenario dropdown + “Run Scenario” + “Reset” + “Regenerate Data” + currency selector. Overview tab • KPI tiles: Total duty paid YTD, MPF/HMF fees YTD, Avg landed cost/unit, Gross margin %, Inventory dwell (days), Savings vs. Standard Entry, % volume using FTZ/Bonded. • Chart: Stacked bar – Duty and fees by HS code and port. • Chart: Line – Monthly duty/fees under chosen scenario vs. Standard Entry. • Treemap: Cost composition (duty, MPF, HMF, storage, handling, compliance). • Table: Top 25 SKUs by potential FTZ savings with columns: hsCode, dutyBasisChosen, invertedSavingsUSD, PFLocked (Y/N), dwellDays, storageCostUSD, landedCostDeltaUSD. Inventory & Flows tab • Sankey: Supplier country → Port → FTZ/Bonded/DC → Channel volumes. • Heatmap: Inventory dwell by location and month; filter by HS or family. • Table: Inbound shipments with valuation, admission status (PF/non‑PF), chosen duty basis, and expected entry week. Duty & Fees tab • Chart: Waterfall – Standard Entry cost → FTZ savings (weekly entry) → inverted tariff savings → scrap/waste relief → storage/operator cost → net savings. • Table: Entry aggregation simulation showing entries/week/port and MPF/HMF totals under scenarios. • Scatter: Shipment value vs. MPF/HMF paid, color by scenario. FTZ vs. Alternatives tab • Comparator panel: Standard Entry, FTZ – PF, FTZ – Inverted, Bonded Warehouse, Mixed Network. • Small multiples: total duty, MPF/HMF, storage/ops, landed cost, margin %. • Decision matrix table with key levers: anticipated tariff direction, dwell, product type (finished vs. component), fragility/hazmat, inverted opportunity flag. Optimization Lab tab • Controls: FTZ adoption rate slider (% of eligible volume). PF adoption rate slider (% of FTZ volume admitted as privileged foreign). Inverted tariff eligibility toggle and rule editor (which HS pairs qualify). Weekly entry on/off; entries per week cap; direct delivery on/off. Mixed Network routing shares: % to FTZ, % to Bonded, % to direct DC. Anticipated tariff change paths by HS (draw sliders −5 to +5 pp). Storage fees, operator fees, compliance overhead, demurrage sensitivity. Dwell days distribution overrides by product family. • Outputs: Optimization suggestion card: “Recommended mix: FTZ X%, Bonded Y%, Direct Z%” that maximizes net savings given constraints. Tornado chart: sensitivity of net savings to key levers (rates, dwell, PF, weekly entry). Monte Carlo: sample RiskEvents; show distribution of net savings and 5th/50th/95th percentiles. Table: SKU‑level playbook (admit PF? route to FTZ/Bonded? use inverted basis?). Compliance & Risk tab • Checklist table: recordkeeping, zone status reporting, reconciliations, weekly entry filings, FTZ Board production authority when classification shifts at 6‑digit or substantial transformation occurs strtrade.com. • Risk map: disruptions by port and event type; overlay policy change scenarios. • KPI: Audit readiness score, data quality (cycle count, shrink), and exception alerts (rate anomalies, misclassification risk). Interactivity and UX • All charts respond to global filters; brushing filters other components. • Right‑click “Trace to Flow” to see how a SKU’s shipment moved through FTZ/Bonded/DC and which duty basis applied. • Tooltips include the duty basis rationale (PF lock, inverted tariff, standard) with the exact formula and rates used. • “What changed?” diff after running a scenario lists top savings drivers: weekly entry MPF reduction, inverted tariff, storage deltas. Computational functions (pure, testable) • computeDuty(item, scenario, ratePath, isPF, isComponent, finishedDutyPct, componentDutyPct, admissionMonth, withdrawalMonth, entryMonth) → {basis, appliedRate, dutyUSD}. • computeEntryFees(manifest, scenario, weeklyEntryEnabled, feeSchedule) → {entries, mpfUSD, hmfUSD, entryFeesUSD, complianceUSD}. • computeStorage(location, dwellDays, pallets, fees, directDelivery) → storageUSD. • computeLandedCostPerUnit(sku) → value. • aggregateSavings(vsStandard) → totals by HS, port, family. Data privacy and legal • All data is fully synthetic. Display footer note: “Demonstration only. FTZ/Bonded mechanics summarized from public resources: strtrade.com, geodis.com, bergenlogistics.com, chiefexecutive.net, zhftaxlaw.com.” Accessibility and responsiveness • WCAG AA contrast, keyboard nav, ARIA labels. • Responsive layout for desktop/tablet; collapsible sidebar. Exports and validation • Export any table to CSV; export charts to PNG; “Download Report (PDF)” with Overview KPIs, comparator charts, and scenario settings. • “Validate Calculations” modal: sample 5 shipments and 3 SKUs; show step‑by‑step duty basis choice, rates by month, MPF/HMF calc, storage calc; reconcile to dashboard totals. • Deterministic seed entry to reproduce runs. Sample synthetic parameter guidance • Finished duty ranges: many cosmetics 0–6.5% for finished goods (use synthetic rates); components like bottles/pumps 2–8%; accessories up to 17% (e.g., certain 4202). • Air vs. ocean: fragrances more air; gift sets bulk ocean. • Dwell: 15–60 days typical; Q4 spikes. • Retail price ranges: $25–$180 per SKU; COGS 15–35% of retail for high‑end cosmetics. • MPF min/max: set realistic synthetic caps; weekly entry reduces count from dozens/hundreds to ~4 per month per port. • FTZ operator fee: flat monthly + per‑pallet; bonded storage higher per pallet but no operator fee. Acceptance criteria All tabs render with linked filters and metrics. Duty basis logic correctly reflects PF lock, inverted tariff eligibility, and weekly entry MPF aggregation. Comparator clearly quantifies FTZ vs. Bonded vs. Standard Entry net savings. Optimization Lab outputs a recommended network mix and shows sensitivity and Monte Carlo ranges. Exports and “Validate Calculations” work. App runs offline with no external data calls. - Follow Up Deployment

index.html

@@ -5,855 +5,587 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>XYZ Cosmetics – FTZ Analysis & Optimization Studio</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-    <script src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
-    <link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
+    <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
+    <script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
+    <link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        :root {
-            --primary: #4f46e5;
-            --primary-dark: #4338ca;
-            --secondary: #10b981;
-            --accent: #f59e0b;
-            --dark: #1e293b;
-            --light: #f8fafc;
-            --danger: #ef4444;
-            --gray: #94a3b8;
-        }
-        
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-            background-color: #f1f5f9;
-            color: #1e293b;
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#1e40af',
+                        secondary: '#3b82f6',
+                        accent: '#0ea5e9',
+                        dark: '#0f172a',
+                        light: '#f8fafc'
+                    }
+                }
+            }
         }
-        
+    </script>
+    <style>
         .sidebar {
-            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
             transition: all 0.3s ease;
         }
-        
         .tab-content {
             display: none;
         }
-        
         .tab-content.active {
             display: block;
         }
-        
-        .chart-container {
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            padding: 1.5rem;
-            margin-bottom: 1.5rem;
-        }
-        
-        .kpi-tile {
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            padding: 1.25rem;
-            transition: transform 0.2s ease;
-        }
-        
-        .kpi-tile:hover {
-            transform: translateY(-3px);
-        }
-        
-        .tab-button {
-            position: relative;
-            padding: 0.75rem 1rem;
-            font-weight: 500;
-            color: #64748b;
-            transition: all 0.3s ease;
-        }
-        
-        .tab-button.active {
-            color: var(--primary);
-        }
-        
-        .tab-button.active::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background-color: var(--primary);
-            border-radius: 3px 3px 0 0;
-        }
-        
         .scenario-card {
-            border: 1px solid #e2e8f0;
-            border-radius: 0.5rem;
             transition: all 0.3s ease;
         }
-        
         .scenario-card:hover {
-            border-color: var(--primary);
-            box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.1);
-        }
-        
-        .scenario-card.active {
-            border-color: var(--primary);
-            box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.15), 0 4px 6px -2px rgba(79, 70, 229, 0.05);
-        }
-        
-        .table-container {
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            overflow: hidden;
-        }
-        
-        .tooltip {
-            position: relative;
-        }
-        
-        .tooltip:hover::after {
-            content: attr(data-tooltip);
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(30, 41, 59, 0.9);
-            color: white;
-            padding: 0.5rem;
-            border-radius: 0.25rem;
-            font-size: 0.875rem;
-            white-space: nowrap;
-            z-index: 10;
+            transform: translateY(-3px);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
-        
-        .sparkline {
-            height: 40px;
+        .kpi-card {
+            transition: all 0.3s ease;
         }
-        
-        .slider-container {
-            padding: 1rem;
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+        .kpi-card:hover {
+            transform: translateY(-2px);
         }
-        
-        .footer {
-            background: #0f172a;
-            color: #94a3b8;
-            font-size: 0.875rem;
+        .chart-container {
+            height: 400px;
         }
-        
         @media (max-width: 768px) {
             .sidebar {
-                position: fixed;
-                top: 0;
-                left: -100%;
-                height: 100%;
-                z-index: 100;
+                transform: translateX(-100%);
             }
-            
             .sidebar.active {
-                left: 0;
-            }
-            
-            .mobile-overlay {
-                display: none;
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: rgba(0, 0, 0, 0.5);
-                z-index: 99;
-            }
-            
-            .mobile-overlay.active {
-                display: block;
+                transform: translateX(0);
             }
         }
     </style>
 </head>
-<body class="min-h-screen">
-    <!-- Mobile Overlay -->
-    <div class="mobile-overlay" id="mobileOverlay"></div>
-    
-    <!-- Main Layout Container -->
-    <div class="flex flex-col md:flex-row">
-        <!-- Sidebar -->
-        <div class="sidebar md:static z-50 w-64 flex flex-col shadow-lg h-screen md:h-auto" id="sidebar">
-            <div class="p-5">
-                <h1 class="text-white text-xl font-bold">XYZ Cosmetics</h1>
-                <p class="text-gray-300 text-sm">FTZ Analysis Studio</p>
-            </div>
+<body class="bg-gray-50 text-gray-800">
+    <!-- Mobile Menu Button -->
+    <div class="md:hidden fixed top-4 left-4 z-50">
+        <button id="menu-toggle" class="bg-primary text-white p-2 rounded-lg">
+            <i class="fas fa-bars"></i>
+        </button>
+    </div>
+
+    <!-- Sidebar -->
+    <div id="sidebar" class="sidebar fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-40 p-4">
+        <div class="flex justify-between items-center mb-6">
+            <h1 class="text-xl font-bold text-primary">Filters</h1>
+            <button id="close-menu" class="md:hidden text-gray-500">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
         
-        <div class="px-4 py-3">
-            <h2 class="text-gray-300 text-xs uppercase font-semibold tracking-wider mb-2">Global Filters</h2>
-            
-            <div class="mb-4">
-                <label class="block text-gray-300 text-xs mb-1">Date Range</label>
+        <div class="space-y-6">
+            <!-- Date Range -->
+            <div>
+                <h3 class="font-semibold mb-2">Date Range</h3>
                 <div class="grid grid-cols-2 gap-2">
-                    <select class="w-full bg-slate-800 text-white text-sm rounded p-2">
-                        <option>2023-01</option>
-                        <option>2026-12</option>
-                    </select>
-                    <select class="w-full bg-slate-800 text-white text-sm rounded p-2">
-                        <option>2026-12</option>
-                        <option>2023-01</option>
-                    </select>
+                    <div>
+                        <label class="text-sm text-gray-600">Start</label>
+                        <input type="month" value="2023-01" class="w-full p-2 border rounded">
+                    </div>
+                    <div>
+                        <label class="text-sm text-gray-600">End</label>
+                        <input type="month" value="2024-12" class="w-full p-2 border rounded">
+                    </div>
                 </div>
             </div>
             
-            <div class="mb-4">
-                <label class="block text-gray-300 text-xs mb-1">Product Family</label>
+            <!-- Product Family -->
+            <div>
+                <h3 class="font-semibold mb-2">Product Family</h3>
+                <div class="space-y-2">
+                    <div class="flex items-center">
+                        <input type="checkbox" id="skincare" class="mr-2">
+                        <label for="skincare">Skincare</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="makeup" class="mr-2" checked>
+                        <label for="makeup">Makeup</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="fragrance" class="mr-2" checked>
+                        <label for="fragrance">Fragrance</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="haircare" class="mr-2">
+                        <label for="haircare">Haircare</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="accessories" class="mr-2" checked>
+                        <label for="accessories">Accessories</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="giftsets" class="mr-2">
+                        <label for="giftsets">Gift Sets</label>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- HS Codes -->
+            <div>
+                <h3 class="font-semibold mb-2">HS Chapters/Codes</h3>
                 <div class="grid grid-cols-2 gap-2">
-                    <label class="flex items-center text-white text-sm">
-                        <input type="checkbox" class="mr-2 rounded text-indigo-500">
-                        <span>Skincare</span>
-                    </label>
-                    <label class="flex items-center text-white text-sm">
-                        <input type="checkbox" class="mr-2 rounded text-indigo-500" checked>
-                        <span>Makeup</span>
-                    </label>
-                    <label class="flex items-center text-white text-sm">
-                        <input type="checkbox" class="mr-2 rounded text-indigo-500" checked>
-                        <span>Fragrance</span>
-                    </label>
-                    <label class="flex items-center text-white text-sm">
-                        <input type="checkbox" class="mr-2 rounded text-indigo-500">
-                        <span>Haircare</span>
-                    </label>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="hs3304" class="mr-2" checked>
+                        <label for="hs3304">3304</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="hs3305" class="mr-2">
+                        <label for="hs3305">3305</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="hs3307" class="mr-2" checked>
+                        <label for="hs3307">3307</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="hs4202" class="mr-2" checked>
+                        <label for="hs4202">4202</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="hs3923" class="mr-2">
+                        <label for="hs3923">3923</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="hs7010" class="mr-2" checked>
+                        <label for="hs7010">7010</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="hs3401" class="mr-2">
+                        <label for="hs3401">3401</label>
+                    </div>
                 </div>
             </div>
             
-            <div class="mb-4">
-                <label class="block text-gray-300 text-xs mb-1">HS Codes</label>
-                <div class="space-y-1 max-h-40 overflow-y-auto">
-                    <label class="flex items-center text-white text-sm">
-                        <input type="checkbox" class="mr-2 rounded text-indigo-500" checked>
-                        <span>3304 - Beauty/Makeup</span>
-                    </label>
-                    <label class="flex items-center text-white text-sm">
-                        <input type="checkbox" class="mr-2 rounded text-indigo-500">
-                        <span>3305 - Hair Products</span>
-                    </label>
-                    <label class="flex items-center text-white text-sm">
-                        <input type="checkbox" class="mr-2 rounded text-indigo-500" checked>
-                        <span>3307 - Perfumes</span>
-                    </label>
-                    <label class="flex items-center text-white text-sm">
-                        <input type="checkbox" class="mr-2 rounded text-indigo-500">
-                        <span>4202 - Cosmetic Bags</span>
-                    </label>
-                    <label class="flex items-center text-white text-sm">
-                        <input type="checkbox" class="mr-2 rounded text-indigo-500">
-                        <span>3923 - Packaging</span>
-                    </label>
+            <!-- Supplier Country -->
+            <div>
+                <h3 class="font-semibold mb-2">Supplier Country</h3>
+                <div class="space-y-2 max-h-40 overflow-y-auto">
+                    <div class="flex items-center">
+                        <input type="checkbox" id="france" class="mr-2">
+                        <label for="france">France</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="italy" class="mr-2" checked>
+                        <label for="italy">Italy</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="spain" class="mr-2">
+                        <label for="spain">Spain</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="korea" class="mr-2" checked>
+                        <label for="korea">South Korea</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="japan" class="mr-2">
+                        <label for="japan">Japan</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="china" class="mr-2">
+                        <label for="china">China</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="vietnam" class="mr-2">
+                        <label for="vietnam">Vietnam</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="thailand" class="mr-2">
+                        <label for="thailand">Thailand</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="mexico" class="mr-2">
+                        <label for="mexico">Mexico</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="canada" class="mr-2" checked>
+                        <label for="canada">Canada</label>
+                    </div>
                 </div>
             </div>
             
-            <div class="mb-4">
-                <label class="block text-gray-300 text-xs mb-1">Supplier Country</label>
-                <select class="w-full bg-slate-800 text-white text-sm rounded p-2">
-                    <option>All Countries</option>
-                    <option>France</option>
-                    <option>Italy</option>
-                    <option>Spain</option>
-                    <option>China</option>
-                    <option>South Korea</option>
-                </select>
+            <!-- Port/Entry Point -->
+            <div>
+                <h3 class="font-semibold mb-2">Port/Entry Point</h3>
+                <div class="space-y-2">
+                    <div class="flex items-center">
+                        <input type="checkbox" id="lax" class="mr-2" checked>
+                        <label for="lax">LAX</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="jfk" class="mr-2">
+                        <label for="jfk">JFK</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="ewr" class="mr-2">
+                        <label for="ewr">EWR</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="mia" class="mr-2" checked>
+                        <label for="mia">MIA</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="sav" class="mr-2">
+                        <label for="sav">SAV</label>
+                    </div>
+                </div>
             </div>
         </div>
         
-        <div class="px-4 py-3 mt-auto">
-            <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-md text-sm font-medium transition">
-                Apply Filters
-            </button>
-        </div>
+        <button class="w-full mt-6 bg-primary text-white py-2 rounded-lg hover:bg-blue-800 transition">
+            Apply Filters
+        </button>
     </div>
-    
+
     <!-- Main Content -->
     <div class="md:ml-64">
-        <!-- Top Navigation -->
-        <nav class="bg-white shadow-sm p-4 flex justify-between items-center">
-            <div class="flex items-center">
-                <button id="sidebarToggle" class="md:hidden text-gray-500 mr-4">
-                    <i class="fas fa-bars"></i>
-                </button>
-                <h2 class="text-xl font-semibold">FTZ Analysis & Optimization</h2>
-            </div>
-            
-            <div class="flex items-center space-x-3">
-                <select class="border border-gray-300 rounded-md text-sm p-2">
-                    <option>Standard Entry</option>
-                    <option selected>FTZ - Baseline</option>
-                    <option>FTZ - Privileged Foreign</option>
-                    <option>FTZ - Inverted Tariff</option>
-                    <option>Bonded Warehouse</option>
-                </select>
-                <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
-                    Run Scenario
-                </button>
-                <button class="border border-gray-300 hover:bg-gray-50 px-4 py-2 rounded-md text-sm font-medium">
-                    Reset
-                </button>
-                <button class="border border-gray-300 hover:bg-gray-50 px-4 py-2 rounded-md text-sm font-medium">
-                    Regenerate Data
-                </button>
-                <select class="border border-gray-300 rounded-md text-sm p-2">
-                    <option>USD</option>
-                    <option>EUR</option>
-                    <option>JPY</option>
-                    <option>KRW</option>
-                </select>
+        <!-- Top Navbar -->
+        <header class="bg-white shadow-md p-4 sticky top-0 z-30">
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
+                <div>
+                    <h1 class="text-xl md:text-2xl font-bold text-primary">XYZ Cosmetics – FTZ Analysis & Optimization Studio</h1>
+                    <p class="text-sm text-gray-600">Supply Chain Optimization Dashboard</p>
+                </div>
+                
+                <div class="flex flex-wrap items-center mt-4 md:mt-0 space-x-2">
+                    <div>
+                        <label class="text-sm mr-2">Scenario:</label>
+                        <select class="border rounded p-2">
+                            <option>Standard Entry</option>
+                            <option>FTZ - Baseline</option>
+                            <option selected>FTZ - Privileged Foreign</option>
+                            <option>FTZ - Inverted Tariff</option>
+                            <option>Bonded Warehouse</option>
+                            <option>Mixed Network</option>
+                        </select>
+                    </div>
+                    
+                    <button class="bg-primary hover:bg-blue-800 text-white px-4 py-2 rounded-lg flex items-center">
+                        <i class="fas fa-play mr-2"></i> Run Scenario
+                    </button>
+                    
+                    <button class="border border-gray-300 hover:bg-gray-100 px-4 py-2 rounded-lg">
+                        <i class="fas fa-sync-alt mr-2"></i> Reset
+                    </button>
+                    
+                    <button class="border border-gray-300 hover:bg-gray-100 px-4 py-2 rounded-lg">
+                        <i class="fas fa-redo mr-2"></i> Regenerate Data
+                    </button>
+                    
+                    <div>
+                        <select class="border rounded p-2">
+                            <option>USD</option>
+                            <option>EUR</option>
+                            <option>JPY</option>
+                            <option>KRW</option>
+                        </select>
+                    </div>
+                </div>
             </div>
-        </nav>
-        
-        <!-- Tabs -->
-        <div class="border-b border-gray-200 bg-white">
+        </header>
+
+        <!-- Tabs Navigation -->
+        <div class="bg-white border-b">
             <div class="flex overflow-x-auto px-4">
-                <button class="tab-button active" data-tab="overview">Overview</button>
-                <button class="tab-button" data-tab="inventory">Inventory & Flows</button>
-                <button class="tab-button" data-tab="duty">Duty & Fees</button>
-                <button class="tab-button" data-tab="comparison">FTZ vs. Alternatives</button>
-                <button class="tab-button" data-tab="optimization">Optimization Lab</button>
-                <button class="tab-button" data-tab="compliance">Compliance & Risk</button>
-                <button class="tab-button" data-tab="about">About</button>
+                <button class="tab-btn px-4 py-3 font-medium text-blue-600 border-b-2 border-blue-600" data-tab="overview">Overview</button>
+                <button class="tab-btn px-4 py-3 font-medium text-gray-600 hover:text-blue-600" data-tab="inventory">Inventory & Flows</button>
+                <button class="tab-btn px-4 py-3 font-medium text-gray-600 hover:text-blue-600" data-tab="duty">Duty & Fees</button>
+                <button class="tab-btn px-4 py-3 font-medium text-gray-600 hover:text-blue-600" data-tab="comparison">FTZ vs. Alternatives</button>
+                <button class="tab-btn px-4 py-3 font-medium text-gray-600 hover:text-blue-600" data-tab="optimization">Optimization Lab</button>
+                <button class="tab-btn px-4 py-3 font-medium text-gray-600 hover:text-blue-600" data-tab="compliance">Compliance & Risk</button>
+                <button class="tab-btn px-4 py-3 font-medium text-gray-600 hover:text-blue-600" data-tab="about">About/Methodology</button>
             </div>
         </div>
-        
+
         <!-- Tab Content -->
         <div class="p-4 md:p-6">
             <!-- Overview Tab -->
-            <div id="tab-overview" class="tab-content active">
+            <div id="overview" class="tab-content active">
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-                    <div class="kpi-tile">
+                    <!-- KPI Cards -->
+                    <div class="kpi-card bg-white rounded-xl shadow-md p-4 border-l-4 border-blue-500">
                         <div class="flex justify-between items-start">
                             <div>
-                                <h3 class="text-gray-500 text-sm font-medium">Total Duty Paid YTD</h3>
-                                <p class="text-2xl font-bold mt-1">$2.4M</p>
+                                <h3 class="text-gray-500 text-sm">Total Duty Paid (YTD)</h3>
+                                <p class="text-2xl font-bold mt-1">$1,248,950</p>
                             </div>
-                            <div class="bg-green-100 p-2 rounded-full">
-                                <i class="fas fa-arrow-down text-green-600"></i>
+                            <div class="bg-blue-100 p-2 rounded-full">
+                                <i class="fas fa-dollar-sign text-blue-600"></i>
                             </div>
                         </div>
                         <p class="text-green-600 text-sm mt-2">
-                            <i class="fas fa-arrow-down"></i> 12.3% vs Standard Entry
+                            <i class="fas fa-arrow-down mr-1"></i> 12.3% vs Standard Entry
                         </p>
                     </div>
                     
-                    <div class="kpi-tile">
+                    <div class="kpi-card bg-white rounded-xl shadow-md p-4 border-l-4 border-green-500">
                         <div class="flex justify-between items-start">
                             <div>
-                                <h3 class="text-gray-500 text-sm font-medium">MPF/HMF Fees YTD</h3>
-                                <p class="text-2xl font-bold mt-1">$185K</p>
+                                <h3 class="text-gray-500 text-sm">MPF/HMF Fees (YTD)</h3>
+                                <p class="text-2xl font-bold mt-1">$87,450</p>
                             </div>
                             <div class="bg-green-100 p-2 rounded-full">
-                                <i class="fas fa-arrow-down text-green-600"></i>
+                                <i class="fas fa-file-invoice-dollar text-green-600"></i>
                             </div>
                         </div>
                         <p class="text-green-600 text-sm mt-2">
-                            <i class="fas fa-arrow-down"></i> 28.7% vs Standard Entry
+                            <i class="fas fa-arrow-down mr-1"></i> 23.5% vs Standard Entry
                         </p>
                     </div>
                     
-                    <div class="kpi-tile">
+                    <div class="kpi-card bg-white rounded-xl shadow-md p-4 border-l-4 border-purple-500">
                         <div class="flex justify-between items-start">
                             <div>
-                                <h3 class="text-gray-500 text-sm font-medium">Avg Landed Cost/Unit</h3>
-                                <p class="text-2xl font-bold mt-1">$8.45</p>
+                                <h3 class="text-gray-500 text-sm">Avg Landed Cost/Unit</h3>
+                                <p class="text-2xl font-bold mt-1">$18.75</p>
                             </div>
-                            <div class="bg-blue-100 p-2 rounded-full">
-                                <i class="fas fa-dollar-sign text-blue-600"></i>
+                            <div class="bg-purple-100 p-2 rounded-full">
+                                <i class="fas fa-box-open text-purple-600"></i>
                             </div>
                         </div>
-                        <p class="text-blue-600 text-sm mt-2">
-                            <i class="fas fa-equals"></i> Standard Entry: $9.12
+                        <p class="text-red-600 text-sm mt-2">
+                            <i class="fas fa-arrow-up mr-1"></i> 3.2% vs Standard Entry
                         </p>
                     </div>
                     
-                    <div class="kpi-tile">
+                    <div class="kpi-card bg-white rounded-xl shadow-md p-4 border-l-4 border-amber-500">
                         <div class="flex justify-between items-start">
                             <div>
-                                <h3 class="text-gray-500 text-sm font-medium">Gross Margin %</h3>
-                                <p class="text-2xl font-bold mt-1">64.2%</p>
+                                <h3 class="text-gray-500 text-sm">Gross Margin %</h3>
+                                <p class="text-2xl font-bold mt-1">48.6%</p>
                             </div>
-                            <div class="bg-green-100 p-2 rounded-full">
-                                <i class="fas fa-chart-line text-green-600"></i>
+                            <div class="bg-amber-100 p-2 rounded-full">
+                                <i class="fas fa-chart-line text-amber-600"></i>
                             </div>
                         </div>
                         <p class="text-green-600 text-sm mt-2">
-                            <i class="fas fa-arrow-up"></i> +3.2% vs Standard Entry
+                            <i class="fas fa-arrow-up mr-1"></i> 2.1% vs Standard Entry
                         </p>
                     </div>
                 </div>
                 
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    <div class="chart-container">
-                        <h3 class="text-lg font-semibold mb-4">Duty and Fees by HS Code</h3>
-                        <div id="duty-chart" class="h-80"></div>
+                <!-- Charts Row -->
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+                    <div class="bg-white rounded-xl shadow-md p-4">
+                        <h3 class="font-semibold mb-4">Duty and Fees by HS Code and Port</h3>
+                        <div id="chart1" class="chart-container"></div>
                     </div>
                     
-                    <div class="chart-container">
-                        <h3 class="text-lg font-semibold mb-4">Monthly Duty/Feet Trend</h3>
-                        <div id="monthly-chart" class="h-80"></div>
-                    </div>
-                </div>
-                
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
-                    <div class="chart-container">
-                        <h3 class="text-lg font-semibold mb-4">Cost Composition</h3>
-                        <div id="cost-chart" class="h-80"></div>
-                    </div>
-                    
-                    <div class="table-container">
-                        <h3 class="text-lg font-semibold p-4">Top Savings Opportunities</h3>
-                        <div id="top-skus-table" class="p-4"></div>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Comparison Tab -->
-            <div id="tab-comparison" class="tab-content">
-                <div class="mb-6">
-                    <h2 class="text-xl font-semibold mb-4">Scenario Comparison</h2>
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
-                        <div class="scenario-card p-4 cursor-pointer active">
-                            <div class="flex justify-between items-start">
-                                <h3 class="text-lg font-semibold">Standard Entry</h3>
-                                <span class="text-gray-400">$0</span>
-                            </div>
-                            <p class="text-gray-500 text-sm mt-1">Base reference scenario</p>
-                            <div class="mt-3">
-                                <div class="text-2xl font-bold">$12.8M</div>
-                                <p class="text-gray-500 text-sm">Total Cost</p>
-                            </div>
-                        </div>
-                        
-                        <div class="scenario-card p-4 cursor-pointer">
-                            <div class="flex justify-between items-start">
-                                <h3 class="text-lg font-semibold">FTZ - Baseline</h3>
-                                <span class="text-green-500">-$1.2M</span>
-                            </div>
-                            <p class="text-gray-500 text-sm mt-1">Deferred duty, weekly entry</p>
-                            <div class="mt-3">
-                                <div class="text-2xl font-bold text-green-600">$11.6M</div>
-                                <p class="text-gray-500 text-sm">Total Cost</p>
-                            </div>
-                        </div>
-                        
-                        <div class="scenario-card p-4 cursor-pointer">
-                            <div class="flex justify-between items-start">
-                                <h3 class="text-lg font-semibold">FTZ - Privileged Foreign</h3>
-                                <span class="text-green-500">-$1.8M</span>
-                            </div>
-                            <p class="text-gray-500 text-sm mt-1">Locked duty rates</p>
-                            <div class="mt-3">
-                                <div class="text-2xl font-bold text-green-600">$11.0M</div>
-                                <p class="text-gray-500 text-sm">Total Cost</p>
-                            </div>
-                        </div>
-                        
-                        <div class="scenario-card p-4 cursor-pointer">
-                            <div class="flex justify-between items-start">
-                                <h3 class="text-lg font-semibold">FTZ - Inverted Tariff</h3>
-                                <span class="text-green-500">-$2.1M</span>
-                            </div>
-                            <p class="text-gray-500 text-sm mt-1">Lower finished good rates</p>
-                            <div class="mt-3">
-                                <div class="text-2xl font-bold text-green-600">$10.7M</div>
-                                <p class="text-gray-500 text-sm">Total Cost</p>
-                            </div>
-                        </div>
-                        
-                        <div class="scenario-card p-4 cursor-pointer">
-                            <div class="flex justify-between items-start">
-                                <h3 class="text-lg font-semibold">Bonded Warehouse</h3>
-                                <span class="text-green-500">-$950K</span>
-                            </div>
-                            <p class="text-gray-500 text-sm mt-1">Postponed payment</p>
-                            <div class="mt-3">
-                                <div class="text-2xl font-bold text-green-600">$11.9M</div>
-                                <p class="text-gray-500 text-sm">Total Cost</p>
-                            </div>
-                        </div>
+                    <div class="bg-white rounded-xl shadow-md p-4">
+                        <h3 class="font-semibold mb-4">Monthly Duty/Fees vs Standard Entry</h3>
+                        <div id="chart2" class="chart-container"></div>
                     </div>
                 </div>
                 
-                <div class="chart-container">
-                    <h3 class="text-lg font-semibold mb-4">Cost Comparison (Millions $)</h3>
-                    <div id="comparison-chart" class="h-96"></div>
+                <!-- Cost Composition -->
+                <div class="bg-white rounded-xl shadow-md p-4 mb-6">
+                    <h3 class="font-semibold mb-4">Cost Composition Breakdown</h3>
+                    <div id="costTreemap" class="chart-container"></div>
                 </div>
                 
-                <div class="table-container mt-6">
-                    <h3 class="text-lg font-semibold p-4">Decision Matrix</h3>
-                    <div class="p-4">
-                        <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">Factor</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Standard Entry</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">FTZ</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bonded Warehouse</th>
-                                </tr>
-                            </thead>
-                            <tbody class="bg-white divide-y divide-gray-200">
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Duty Timing</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">At entry</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">At U.S. commerce entry</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">At withdrawal</td>
-                                </tr>
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Rate Lock</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">No</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes (Privileged Foreign)</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">No</td>
-                                </tr>
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">MPF Savings</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">None</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Weekly entry reduces counts</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">None</td>
-                                </tr>
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Storage Cost</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Customs exam areas</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Operator/monthly fees</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse/per pallet</td>
-                                </tr>
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Best For</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Low volume</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">High volume, fluctuating rates</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Declining rates, short term</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Optimization Tab -->
-            <div id="tab-optimization" class="tab-content">
-                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                    <div class="lg:col-span-2">
-                        <div class="chart-container">
-                            <h3 class="text-lg font-semibold mb-4">Sensitivity Analysis</h3>
-                            <div id="sensitivity-chart" class="h-80"></div>
-                        </div>
-                        
-                        <div class="chart-container mt-6">
-                            <h3 class="text-lg font-semibold mb-4">Network Optimization</h3>
-                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                                <div class="border border-gray-200 rounded-lg p-4">
-                                    <div class="flex justify-between items-center mb-2">
-                                        <span class="text-gray-600">FTZ Allocation</span>
-                                        <span class="font-bold">65%</span>
-                                    </div>
-                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 65%"></div>
-                                    </div>
-                                </div>
-                                <div class="border border-gray-200 rounded-lg p-4">
-                                    <div class="flex justify-between items-center mb-2">
-                                        <span class="text-gray-600">Bonded Warehouse</span>
-                                        <span class="font-bold">25%</span>
-                                    </div>
-                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                        <div class="bg-green-500 h-2.5 rounded-full" style="width: 25%"></div>
-                                    </div>
-                                </div>
-                                <div class="border border-gray-200 rounded-lg p-4">
-                                    <div class="flex justify-between items-center mb-2">
-                                        <span class="text-gray-600">Direct to DC</span>
-                                        <span class="font-bold">10%</span>
-                                    </div>
-                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                        <div class="bg-blue-500 h-2.5 rounded-full" style="width: 10%"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div>
-                        <div class="slider-container mb-6">
-                            <h3 class="text-lg font-semibold mb-4">Optimization Controls</h3>
-                            
-                            <div class="mb-4">
-                                <label class="block text-gray-700 text-sm mb-1">Tariff Increase Assumption</label>
-                                <input type="range" min="0" max="10" value="3" class="w-full">
-                                <div class="flex justify-between text-xs text-gray-500 mt-1">
-                                    <span>Falling</span>
-                                    <span>Neutral</span>
-                                    <span>Rising</span>
-                                </div>
-                            </div>
-                            
-                            <div class="mb-4">
-                                <label class="block text-gray-700 text-sm mb-1">Inventory Dwell Time</label>
-                                <input type="range" min="15" max="90" value="45" class="w-full">
-                                <div class="flex justify-between text-xs text-gray-500 mt-1">
-                                    <span>Short</span>
-                                    <span>Medium</span>
-                                    <span>Long</span>
-                                </div>
-                            </div>
-                            
-                            <div class="mb-4">
-                                <label class="block text-gray-700 text-sm mb-1">Component Complexity</label>
-                                <input type="range" min="1" max="5" value="3" class="w-full">
-                            </div>
-                            
-                            <div class="flex items-center justify-between mb-2">
-                                <span class="text-gray-700">Weekly Entry</span>
-                                <label class="switch">
-                                    <input type="checkbox" checked>
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            
-                            <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-md text-sm font-medium mt-4">
-                                Optimize Network
-                            </button>
-                        </div>
-                        
-                        <div class="slider-container">
-                            <h3 class="text-lg font-semibold mb-4">Scenario Recommendation</h3>
-                            <div class="p-4 bg-indigo-50 rounded-lg">
-                                <p class="text-indigo-800">
-                                    <span class="font-bold">Recommended Mix:</span> FTZ 70%, Bonded 20%, Direct 10%
-                                </p>
-                                <p class="text-indigo-700 text-sm mt-2">
-                                    This configuration optimizes for the current tariff increase projection while 
-                                    balancing inventory holding costs and administrative overhead.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
+                <!-- Savings Table -->
+                <div class="bg-white rounded-xl shadow-md p-4">
+                    <h3 class="font-semibold mb-4">Top 25 SKUs by Potential FTZ Savings</h3>
+                    <div id="savingsTable" class="overflow-x-auto"></div>
                 </div>
             </div>
             
             <!-- About Tab -->
-            <div id="tab-about" class="tab-content">
-                <div class="chart-container">
-                    <h2 class="text-xl font-semibold mb-4">About FTZ Analysis & Optimization Studio</h2>
+            <div id="about" class="tab-content">
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h2 class="text-2xl font-bold text-primary mb-4">FTZ Analysis & Optimization Studio</h2>
+                    
                     <div class="prose max-w-none">
-                        <p>
-                            The FTZ Analysis & Optimization Studio is a simulation environment that enables logistics, 
-                            finance, and compliance teams to evaluate the financial impact of using U.S. Foreign Trade Zones 
-                            versus Bonded Warehouses and standard entry procedures for imported beauty and cosmetic goods.
-                        </p>
+                        <h3>About This Tool</h3>
+                        <p>This dashboard allows logistics, finance, and compliance teams to simulate the use of U.S. Foreign Trade Zones versus Bonded Warehouses and standard entry to reduce duty/tariff spend, MPF, demurrage, and compliance overhead for imported beauty and cosmetic goods.</p>
                         
-                        <h3 class="text-lg font-semibold mt-6 mb-3">Key Concepts</h3>
-                        <ul class="list-disc pl-5 space-y-2">
-                            <li><strong>Foreign Trade Zones (FTZs)</strong>: Areas considered outside the U.S. customs territory for tariff purposes. Duties are deferred until merchandise enters U.S. commerce. Benefits include weekly entry, direct delivery, inverted tariff opportunities, and scrap/waste relief.</li>
-                            <li><strong>Bonded Warehouses</strong>: Secure storage facilities where imported goods can be stored without paying duties until they're withdrawn for domestic consumption. Duties are assessed at withdrawal time, allowing benefit from declining rates.</li>
-                            <li><strong>Privileged Foreign Status</strong>: Within FTZs, goods can be admitted with privileged foreign status locking in duty rates at the time of admission, providing protection against rate increases.</li>
-                            <li><strong>Inverted Tariff Opportunities</strong>: When components with higher duty rates are imported as privileged foreign status, and the finished products have lower duty rates, savings can be achieved.</li>
+                        <h3>Key Concepts</h3>
+                        <ul>
+                            <li><strong>FTZs</strong> are considered outside the U.S. customs territory for tariff purposes; duties are deferred until merchandise enters U.S. commerce. Weekly entry, direct delivery, inverted tariff opportunities, and scrap/waste relief can create material savings.</li>
+                            <li><strong>Bonded Warehouses</strong> defer duty assessment until goods are withdrawn for consumption. Savings depend on anticipated tariff rate changes.</li>
+                            <li><strong>Privileged Foreign Status</strong> locks duty rates at admission, protecting against future rate increases.</li>
+                            <li><strong>Inverted Tariff</strong> allows using the lower duty rate of the finished product instead of components when applicable.</li>
                         </ul>
                         
-                        <h3 class="text-lg font-semibold mt-6 mb-3">Application Features</h3>
-                        <ul class="list-disc pl-5 space-y-2">
-                            <li><strong>Multi-scenario Comparison</strong>: Evaluate Standard Entry, FTZ Baseline, FTZ with Privileged Foreign Status, FTZ with Inverted Tariff, and Bonded Warehouse scenarios.</li>
-                            <li><strong>Dynamic Cost Modeling</strong>: Calculates customs duties, MPF/HMF fees, storage costs, and compliance overhead based on current and anticipated tariff rates.</li>
-                            <li><strong>Optimization Recommendations</strong>: Provides allocation recommendations between FTZs, Bonded Warehouses, and direct distribution based on financial modeling.</li>
-                            <li><strong>Risk Assessment</strong>: Incorporates potential disruptions, policy changes, and regulatory compliance into financial projections.</li>
+                        <h3>How to Use This Dashboard</h3>
+                        <ol>
+                            <li><strong>Apply Filters</strong> on the left sidebar to focus on specific products, suppliers, or time periods.</li>
+                            <li><strong>Select a Scenario</strong> from the dropdown to compare different logistics strategies.</li>
+                            <li><strong>Analyze Results</strong> in the Overview tab to understand potential savings.</li>
+                            <li><strong>Explore Details</strong> in other tabs for in-depth analysis of inventory flows, duty calculations, and optimization opportunities.</li>
+                            <li><strong>Run "What-if" Scenarios</strong> in the Optimization Lab to find the best strategy mix.</li>
+                        </ol>
+                        
+                        <h3>Data and Methodology</h3>
+                        <p>All data is synthetic and generated client-side. Calculations follow these principles:</p>
+                        <ul>
+                            <li>Duty is calculated based on customs value (merchandise + freight + insurance) multiplied by applicable tariff rates</li>
+                            <li>MPF (Merchandise Processing Fee) is calculated with minimum/maximum constraints per entry</li>
+                            <li>HMF (Harbor Maintenance Fee) applies to ocean shipments</li>
+                            <li>Weekly entry aggregations reduce total entries and associated fees</li>
+                            <li>Storage fees are calculated based on dwell time in locations</li>
                         </ul>
                         
-                        <h3 class="text-lg font-semibold mt-6 mb-3">Disclaimer</h3>
-                        <p>
-                            This demonstration uses synthetic data generated client-side. All FTZ and customs treatment information 
-                            is summarized from public resources including strtrade.com, geodis.com, bergenlogistics.com, 
-                            chiefexecutive.net, and zhftaxlaw.com. Actual duty/tariff calculations should be verified with 
-                            customs brokers and legal advisors.
-                        </p>
+                        <div class="bg-blue-50 p-4 rounded-lg mt-6">
+                            <p class="font-semibold">Demonstration only. FTZ/Bonded mechanics summarized from public resources: strtrade.com, geodis.com, bergenlogistics.com, chiefexecutive.net, zhftaxlaw.com.</p>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    
-    <!-- Footer -->
-    <div class="footer p-4 text-center text-sm">
-        Demonstration only. FTZ/Bonded mechanics summarized from public resources: 
-        strtrade.com, geodis.com, bergenlogistics.com, chiefexecutive.net, zhftaxlaw.com.
-    </div>
-    
+
     <script>
         // Tab switching functionality
-        document.querySelectorAll('.tab-button').forEach(button => {
+        document.querySelectorAll('.tab-btn').forEach(button => {
             button.addEventListener('click', () => {
-                // Remove active class from all tabs and buttons
-                document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
-                document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
+                // Remove active class from all buttons and content
+                document.querySelectorAll('.tab-btn').forEach(btn => {
+                    btn.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
+                    btn.classList.add('text-gray-600');
+                });
+                
+                document.querySelectorAll('.tab-content').forEach(content => {
+                    content.classList.remove('active');
+                });
                 
                 // Add active class to clicked button
-                button.classList.add('active');
+                button.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
+                button.classList.remove('text-gray-600');
                 
-                // Show corresponding tab content
+                // Show corresponding content
                 const tabId = button.getAttribute('data-tab');
-                document.getElementById(`tab-${tabId}`).classList.add('active');
+                document.getElementById(tabId).classList.add('active');
             });
         });
         
-        // Mobile sidebar toggle
-        document.getElementById('sidebarToggle').addEventListener('click', () => {
-            document.getElementById('sidebar').classList.toggle('active');
-            document.getElementById('mobileOverlay').classList.toggle('active');
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', () => {
+            document.getElementById('sidebar').classList.add('active');
         });
         
-        document.getElementById('mobileOverlay').addEventListener('click', () => {
+        document.getElementById('close-menu').addEventListener('click', () => {
             document.getElementById('sidebar').classList.remove('active');
-            document.getElementById('mobileOverlay').classList.remove('active');
         });
         
-        // Close sidebar when clicking outside on mobile
-        document.addEventListener('click', (e) => {
-            const sidebar = document.getElementById('sidebar');
-            const toggle = document.getElementById('sidebarToggle');
-            
-            if (window.innerWidth < 768 && 
-                sidebar.classList.contains('active') && 
-                !sidebar.contains(e.target) && 
-                e.target !== toggle) {
-                sidebar.classList.remove('active');
-                document.getElementById('mobileOverlay').classList.remove('active');
-            }
+        // Render charts when Overview tab is active
+        document.querySelector('[data-tab="overview"]').addEventListener('click', () => {
+            renderOverviewCharts();
         });
         
-        // Initialize charts
-        document.addEventListener('DOMContentLoaded', () => {
-            // Duty by HS Code Chart
-            const dutyChart = document.getElementById('duty-chart');
-            const dutyData = [{
+        // Initialize charts on first load if Overview is default
+        window.addEventListener('load', () => {
+            renderOverviewCharts();
+            renderSavingsTable();
+        });
+        
+        // Render Overview Charts
+        function renderOverviewCharts() {
+            // Chart 1: Duty and Fees by HS Code and Port
+            const chart1Data = [{
+                type: 'bar',
+                x: ['3304', '3305', '3307', '4202', '7010'],
+                y: [350000, 220000, 480000, 180000, 210000],
+                name: 'Duty',
+                marker: {color: '#3b82f6'}
+            }, {
                 type: 'bar',
-                x: ['3304', '3305', '3307', '4202', '3923', '7010'],
-                y: [1200000, 800000, 1500000, 450000, 600000, 900000],
-                marker: { color: '#4f46e5' }
+                x: ['3304', '3305', '3307', '4202', '7010'],
+                y: [85000, 62000, 98000, 42000, 53000],
+                name: 'MPF/HMF',
+                marker: {color: '#1e40af'}
             }];
             
-            const dutyLayout = {
-                title: 'Duty by HS Code',
-                xaxis: { title: 'HS Code' },
-                yaxis: { title: 'Duty Amount (USD)' },
-                margin: { t: 40, l: 40, r: 20, b: 60 }
+            const chart1Layout = {
+                barmode: 'stack',
+                title: 'Duty and Fees by HS Code',
+                xaxis: {title: 'HS Code'},
+                yaxis: {title: 'Amount ($USD)'}
             };
             
-            Plotly.newPlot(dutyChart, dutyData, dutyLayout, {displayModeBar: false});
+            Plotly.newPlot('chart1', chart1Data, chart1Layout);
             
-            // Monthly Trend Chart
-            const monthlyChart = document.getElementById('monthly-chart');
+            // Chart 2: Monthly Duty/Fees vs Standard Entry
             const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-            const monthlyData = [{
-                type: 'scatter',
-                mode: 'lines+markers',
-                name: 'FTZ Scenario',
+            const standardFees = [120000, 110000, 130000, 140000, 150000, 160000, 170000, 180000, 160000, 150000, 140000, 130000];
+            const ftzFees = [100000, 92000, 108000, 115000, 125000, 132000, 140000, 148000, 135000, 128000, 118000, 110000];
+            
+            const chart2Data = [{
                 x: months,
-                y: [180000, 195000, 190000, 185000, 175000, 170000, 165000, 170000, 175000, 185000, 195000, 205000],
-                line: { color: '#10b981', width: 3 },
-                marker: { size: 6 }
-            }, {
-                type: 'scatter',
+                y: standardFees,
                 mode: 'lines+markers',
                 name: 'Standard Entry',
+                line: {color: '#94a3b8'}
+            }, {
                 x: months,
-                y: [220000, 235000, 230000, 225000, 215000, 210000, 205000, 210000, 215000, 225000, 235000, 245000],
-                line: { color: '#94a3b8', width: 2 },
-                marker: { size: 4 }
+                y: ftzFees,
+                mode: 'lines+markers',
+                name: 'FTZ Strategy',
+                line: {color: '#3b82f6'}
             }];
             
-            const monthlyLayout = {
-                title: 'Monthly Duty/Fees Comparison',
-                xaxis: { title: 'Month' },
-                yaxis: { title: 'Amount (USD)' },
-                margin: { t: 40, l: 60, r: 20, b: 60 }
+            const chart2Layout = {
+                title: 'Monthly Duty/Fees vs Standard Entry',
+                xaxis: {title: 'Month'},
+                yaxis: {title: 'Amount ($USD)'}
             };
             
-            Plotly.newPlot(monthlyChart, monthlyData, monthlyLayout, {displayModeBar: false});
+            Plotly.newPlot('chart2', chart2Data, chart2Layout);
             
-            // Cost Composition Chart
-            const costChart = document.getElementById('cost-chart');
-            const costData = [{
-                type: 'pie',
-                values: [35, 25, 15, 10, 10, 5],
-                labels: ['Duty', 'FTZ Operator Fees', 'Storage Costs', 'MPF/HMF Fees', 'Compliance Overhead', 'Demurrage'],
+            // Cost Composition Treemap
+            const costTreemapData = [{
+                type: "treemap",
+                labels: ["Duty", "MPF", "HMF", "Storage", "Handling", "Compliance"],
+                parents: ["", "", "", "", "", ""],
+                values:  [45, 12, 8, 15, 10, 10],
                 marker: {
-                    colors: ['#4f46e5', '#818cf8', '#c7d2fe', '#10b981', '#34d399', '#a7f3d0']
-                },
-                textinfo: 'label+percent'
+                    colors: ['#3b82f6', '#1e40af', '#93c5fd', '#bfdbfe', '#dbeafe', '#dbeafe']
+                }
             }];
             
-            const costLayout = {
-                title: 'Cost Composition Breakdown',
-                margin: { t: 40, l: 0, r: 0, b: 0 }
+            const costTreemapLayout = {
+                title: "Landed Cost Composition Breakdown"
             };
             
-            Plotly.newPlot(costChart, costData, costLayout, {displayModeBar: false});
+            Plotly.newPlot('costTreemap', costTreemapData, costTreemapLayout);
+        }
+        
+        // Render Savings Table
+        function renderSavingsTable() {
+            const tableData = [
+                {hsCode: '3307', dutyBasis: '$8.25/unit', inverted: '$2,450', pf: 'Yes', dwell: 28, storage: '$1,200', savings: '$18,750'},
+                {hsCode: '4202', dutyBasis: '$5.50/unit', inverted: '$1,120', pf: 'Yes', dwell: 22, storage: '$890', savings: '$15,400'},
+                {hsCode: '3304', dutyBasis: '$3.80/unit', inverted: '$850', pf: 'Yes', dwell: 18, storage: '$650', savings: '$12,300'},
+                {hsCode: '7010', dutyBasis: '$4.50/unit', inverted: '$650', pf: 'No', dwell: 35, storage: '$1,500', savings: '$9,800'},
+                {hsCode: '3307', dutyBasis: '$7.20/unit', inverted: '$1,800', pf: 'Yes', dwell: 24, storage: '$1,100', savings: '$8,900'},
+                {hsCode: '4202', dutyBasis: '$6.10/unit', inverted: '$950', pf: 'Yes', dwell: 20, storage: '$780', savings: '$7,600'},
+                {hsCode: '3304', dutyBasis: '$3.20/unit', inverted: '$420', pf: 'No', dwell: 15, storage: '$550', savings: '$6,700'},
+                {hsCode: '3307', dutyBasis: '$8.10/unit', inverted: '$2,100', pf: 'Yes', dwell: 30, storage: '$1,300', savings: '$6,400'},
+                {hsCode: '7010', dutyBasis: '$5.00/unit', inverted: '$750', pf: 'Yes', dwell: 38, storage: '$1,700', savings: '$5,900'},
+                {hsCode: '3304', dutyBasis: '$4.10/unit', inverted: '$680', pf: 'Yes', dwell: 18, storage: '$900', savings: '$5,200'}
+            ];
             
-            // Top SKUs Table
-            const topSKUsTable = new Tabulator("#top-skus-table", {
-                height: "300px",
-                data: [
-                    {sku: "FRG-001", hs: "3307", savings: 125000, dw: "Y", dwell: 45, cost: 8500},
-                    {sku: "SKC-003", hs: "3304", savings: 98000, dw: "Y", dwell: 38, cost: 6200},
-                    {sku: "MKP-012", hs: "3304", savings: 87000, dw: "N", dwell: 52, cost: 11000},
-                    {sku: "FRG-025", hs: "3307", savings: 78000, dw: "Y", dwell: 35, cost: 5500},
-                    {sku: "HRC-007", hs: "3305", savings: 65000, dw: "N", dwell: 48, cost: 9200},
-                ],
+            const table = new Tabulator("#savingsTable", {
+                data: tableData,
                 layout: "fitColumns",
                 columns: [
-                    {title: "SKU", field: "sku", width: 100},
-                    {title: "HS Code", field: "hs", width: 100},
-                    {title: "Savings", field: "savings", formatter: "money", formatterParams: {symbol: "$"}, hozAlign: "right"},
-                    {title: "Priv. Foreign", field: "dw", width: 120, hozAlign: "center"},
-                    {title: "Dwell (Days)", field: "dwell", width: 120, hozAlign: "center"},
-                    {title: "Storage Cost", field: "cost", formatter: "money", formatterParams: {symbol: "$"}, hozAlign: "right"},
+                    {title: "HS Code", field: "hsCode", width: 100},
+                    {title: "Duty Basis", field: "dutyBasis", width: 120},
+                    {title: "Inverted Savings", field: "inverted", hozAlign: "right"},
+                    {title: "PF Locked", field: "pf", width: 100},
+                    {title: "Dwell (Days)", field: "dwell", hozAlign: "center"},
+                    {title: "Storage Cost", field: "storage", hozAlign: "right"},
+                    {title: "Savings", field: "savings", hozAlign: "right", formatter: "money", formatterParams: {symbol: "$"}}
                 ],
+                pagination: "local",
+                paginationSize: 10
             });
-            
-            // Comparison Chart
-            const comparisonChart = document.getElementById('comparison-chart');
-            const comparisonData = [{
-                type: 'bar',
-                x: ['Standard Entry', 'FTZ - Baseline', 'FTZ - Privileged Foreign', 'FTZ - Inverted Tariff', 'Bonded Warehouse'],
-                y: [12800000, 11600000, 11000000, 10700000, 11900000],
-                marker: { 
-                    color: ['#94a3b8', '#4f46e5', '#818cf8', '#6366f1', '#a78bfa']
-                }
-            }];
-            
-            const comparisonLayout = {
-                title: 'Total Cost Comparison (Millions USD)',
-                xaxis: { title: 'Scenario' },
-                yaxis: { title: 'Total Cost' },
-                margin: { t: 40, l: 80, r: 20, b: 100 }
-            };
-            
-            Plotly.newPlot(comparisonChart, comparisonData, comparisonLayout, {displayModeBar: false});
-            
-            // Sensitivity Chart
-            const sensitivityChart = document.getElementById('sensitivity-chart');
-            const sensitivityData = [
-                {
-                    type: 'bar',
-                    orientation: 'h',
-                    x: [0.15, 0.25, -0.1, 0.05, 0.3],
-                    y: ['Tariff Rate Change', 'Dwell Time', 'Weekly Entry', 'Storage Costs', 'Inventory Turns'],
-                    marker: { 
-                        color: ['#ef4444', '#ef4444', '#10b981', '#10b981', '#10b981']
-                    }
-                }
-            ];
-            
-            const sensitivityLayout = {
-                title: 'Sensitivity Analysis: Net Savings Impact',
-                xaxis: { title: 'Impact on Savings (% of total cost)' },
-                yaxis: { title: 'Factor' },
-                margin: { t: 40, l: 120, r: 20, b: 60 }
-            };
-            
-            Plotly.newPlot(sensitivityChart, sensitivityData, sensitivityLayout, {displayModeBar: false});
-        });
+        }
+        
+        // Initialize with Overview tab active
+        document.querySelector('[data-tab="overview"]').click();
     </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=agenticlogistics/ftz-analysis-optimization" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>