Narrative Logistics commited on
Commit
4f2787a
·
verified ·
1 Parent(s): cb76259

Project goal Build a responsive, interactive web dashboard titled “AUTO XYZ – Section 301 Tariff Impact Analyzer” that helps internal analysts explore and quantify the effects of 301 tariffs on AUTO XYZ’s vehicle lineup, parts sourcing, and profitability across scenarios. Use only synthetic data generated client‑side. No external APIs. Context (embed as static text in an About panel) • Section 301 tariffs affect imports by HS code, product category, and country of origin. Recent policy updates include treatment of USMCA content where tariffs apply only to non‑U.S. content in qualifying Canada/Mexico vehicles and parts, with duty‑free components exempt until a content‑specific mechanism is implemented caredge.com. • Analysts may test alternative tariff schedules or “balanced bilateral trade” targets per USTR models to simulate macro policy variants tariffs.inasimonovska.com. Architecture • Single‑page app with a left sidebar for global filters, a top navbar, main content area with tabbed views: Overview, Models & Pricing, Supply Chain & Parts, Profitability, Scenario Lab, and About/Methodology. • Tech stack: HTML/CSS/JS, a modern charting library (e.g., Plotly or ECharts), a lightweight grid (e.g., Tabulator or ag‑Grid Community), and a client‑side state store (simple Redux‑like object). Export to CSV/PNG and a “Download Report (PDF)” via client‑side print. • Performance: All data generated on load; allow 5–10k rows total without lag. Use web workers if needed for scenario recomputes. Global filters (left sidebar) Date range: FY2023–FY2026 (monthly granularity). Vehicle line: Sedan A, SUV B, Truck C, EV D. Market region: US, Canada, Mexico, EU, UK, APAC. Country of origin (for parts): China, Vietnam, Thailand, India, Germany, Mexico, Canada, US. HS chapters (checkbox list): 8409, 8708, 8507 (batteries), 8542 (semiconductors), 4011 (tires), 8703 (passenger cars). Tariff scenario selector: Baseline 2024, 2025 Update (USMCA non‑U.S. content rule), Aggressive 301+, Balanced Trade Target (USTR Δτ), Custom. Currency: USD default, allow FX toggle (USD, CAD, MXN, EUR). Use static FX rates for simplicity. Synthetic data generation (run on initialization; keep seed for reproducibility) Generate the following tables (arrays of objects). Provide a “Regenerate Data” button to reseed. A) VehiclesMaster • Columns: vehicleId, name, segment, msrpBaseUSD, originMix (map of country: %), usmcaEligible (bool), avgNonUSContentShare (0–1), marginTargetPct, launchYear. • Create 4–6 trims per line (e.g., Sedan A Base, Sedan A Premium, …). B) PartsCatalog • Columns: partId, hsCode, partName, category (e.g., Powertrain, Electronics, Battery, Chassis, Interior, Tires), supplierCountry, unitCostUSD, usmcaEligible (bool), nonUSContentShare (0–1), criticality (1–5), leadTimeDays, co2PerUnitKg. • 300–600 parts, with realistic cost ranges (e.g., semis 15–120 USD, batteries 1,500–6,000 USD, tires 60–180 USD, chassis 400–1,200 USD). C) BOM (Bill of Materials) • Columns: vehicleId, partId, qtyPerVehicle. • Each vehicle uses 120–300 parts; ensure category coverage. EV D relies more on 8507 and 8542. D) SourcingFlows (monthly) • Columns: month (YYYY‑MM), partId, supplierCountry, unitsImported, logisticsCostUSD, port (string), incoterms (FOB/CIF), defectRatePct. • Generate 36 months (2023‑01 to 2025‑12), with seasonality and disruptions. E) SalesDemand (monthly) • Columns: month, vehicleId, region, unitsSold, discountPct, dealerMarginPct. • Add trends: EV D up, Sedan A stable/slightly down, Truck C cyclical, SUV B steady growth. F) TariffSchedule Provide multiple scenario schedules: • Baseline 2024: HS 8409 10%, 8708 7.5%, 8507 25%, 8542 25%, 4011 10%, 8703 vehicle duty 2.5% (where applicable). • 2025 Update (USMCA non‑U.S. content rule applied): For vehicles/parts qualifying under USMCA from CA/MX, apply tariffs only to the non‑U.S. content share; duty‑free parts exempt while awaiting content‑specific application caredge.com. • Aggressive 301+: increase HS 8507 to 35–40%, 8542 to 35%, add 5–10 pp to 8409/8708, tires 15%, vehicle duty unchanged. • Balanced Trade Target (Δτ): implement a function that, given current bilateral deficit by country, calculates an incremental tariff add‑on up to +10 pp, capped, to move toward balanced trade as a stylized proxy of USTR Δτ logic tariffs.inasimonovska.com. • Custom: user‑editable table in the Scenario Lab. Tariff application logic Implement a pure function computeTariffCost(part, supplierCountry, hsCode, scenario, usmcaEligible, nonUSContentShare, value): • Base rate from TariffSchedule by hsCode and scenario. • If scenario == 2025 Update and (supplierCountry in {Canada, Mexico} OR final assembly in CA/MX) AND usmcaEligible == true, apply tariff only to value × nonUSContentShare. If part is duty‑free per schedule, apply 0. • For Balanced Trade Target, add country‑specific Δτ up to cap; show the computed Δτ in a tooltip legend. • Return: effectiveRate, assessedValue, tariffAmountUSD. Cost roll‑ups Part landed cost per unit = unitCostUSD + logisticsCostUSD/unitQtyBatch + tariffAmountUSD. Vehicle BOM cost per unit = sum over parts (qtyPerVehicle × partLandedCost). Gross profit per vehicle = transactionPrice − dealerMargin − discount − BOM cost − other variable costs (assume 5–8% of MSRP). Price pass‑through options: 0%, 25%, 50%, 75%, 100% of incremental tariff costs into MSRP; reflect in demand via elasticity. Elasticity and demand model • Allow a simple constant elasticity per segment: Sedan −1.2, SUV −1.0, Truck −0.8, EV −1.4. • When pass‑through > 0%, recompute unit sales by region with a demand multiplier: units’ = units × (price’/price)^elasticity. • Show sensitivity sliders in Scenario Lab. Emissions and risk • Track co2PerUnitKg from PartsCatalog; vehicle CO2 per unit = sum(qty × co2PerUnitKg). • Risk score per vehicle: weighted sum of (supplier concentration, China share in BOM cost, average lead time, criticality). Display 0–100. UI layout and visuals Top navbar • Title + scenario dropdown + pass‑through slider + “Run Scenario” and “Reset”. Overview tab • KPI tiles: Total tariff paid YTD, Avg effective tariff rate, Avg vehicle BOM cost, Gross margin %, Units sold YTD, CO2 per vehicle, Risk score. • Chart 1: Stacked bar – Total tariff cost by HS chapter and supplier country. • Chart 2: Treemap – BOM cost composition by category. • Chart 3: Line – Monthly tariff cost vs. gross margin %. • Table: Top 20 parts by tariff burden with columns: hsCode, partName, supplierCountry, tariffRate, tariffAmount, landedCost, vehicle coverage. Models & Pricing tab • Chart: Waterfall per vehicle – MSRP base → incremental tariffs → pass‑through → discounts → dealer margin → final transaction price → gross profit. • Table: Vehicle profitability by trim and region (sortable), with conditional formatting. Supply Chain & Parts tab • Map: Tariff cost heatmap by supplier country; click to filter. • Table: Parts list with filters for hsCode, category, supplierCountry, usmcaEligible, nonUSContentShare, effective tariff rate, criticality. • Chart: Lead time vs. tariff rate scatter, bubble size = spend. Profitability tab • Chart: Margin % distribution by vehicle and region across scenarios (selectable). • Chart: Price elasticity impact – units vs. price index curves by segment. • Table: Month‑by‑month P&L summary: revenue, COGS, tariff, gross profit, margin %. Scenario Lab tab • Editable tables: Custom TariffSchedule and Δτ country add‑ons. • Controls: Pass‑through slider, elasticity overrides per segment, toggle USMCA rules on/off, FX sensitivity ±10%. • Outputs: Compare Baseline vs Selected scenario across KPIs, with a small multiples chart set (tariff cost, margin %, units, revenue). • Button: “Save Scenario” to snapshot state and allow quick switching between saved scenarios. About/Methodology tab • Static panel with assumptions, tariff logic explanation, USMCA treatment and non‑U.S. content share approach caredge.com. • Note on Δτ as stylized representation inspired by USTR model tariffs.inasimonovska.com. • Data is fully synthetic and for demonstration only. AUTO XYZ is fictional. Interactivity and UX • All charts respond to global filters; brushing/selection filters other components. • Right‑click any data point to “Trace to Parts” (drills down to contributing parts and vehicles). • Tooltips show formulas for effective tariff calculations and USMCA non‑U.S. content application. • Provide a “What changed?” diff panel after running a scenario to list top drivers by HS code and country. Accessibility and responsiveness • WCAG AA contrast, keyboard navigation, ARIA labels on interactive elements. • Responsive layout for desktop and tablet; collapse sidebar on small screens. Exports • Export tables to CSV; export charts to PNG; “Download Report (PDF)” generates a printable summary with the Overview KPIs, two key charts, and scenario parameters. Testing hooks • Include a “Validate Calculations” modal that randomly samples 5 parts and one vehicle, showing step‑by‑step tariff and landed cost math with totals that reconcile to charts. • Provide a deterministic seed entry to reproduce runs. Sample synthetic parameter ranges (guidance for generator) • avgNonUSContentShare: Canada/Mexico USMCA‑eligible vehicles 0.25–0.45; others 0.55–0.85; EV batteries non‑U.S. share generally higher. • Country mixes: electronics from China/Vietnam/Thailand/India/Germany; batteries from China and domestic; chassis/8708 from Mexico/Canada; tires 4011 from Thailand/Vietnam. • MarginTargetPct: 12–20% by segment; EV initially lower. • Logistics costs: 1–6% of part cost typical; long‑haul Asia higher. • Lead times: semis 45–90 days, batteries 30–60, chassis 20–40, tires 25–45. Data privacy and legal • Data is entirely synthetic. Display a footer note: “This dashboard is a demonstration using synthetic data. Sources referenced for policy context only: caredge.com, tariffs.inasimonovska.com.” Acceptance criteria All tabs render with working charts and tables tied to filters. Tariff calculations reflect USMCA non‑U.S. content logic in the 2025 Update scenario. Scenario Lab recomputes demand, pricing, margins with pass‑through and elasticity. Export and “Validate Calculations” work. App runs offline with no external data calls. End of instructions - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1441 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Section 301 Tariff Impact Analyzer 2
3
- emoji: 🏃
4
- colorFrom: blue
5
  colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: section-301-tariff-impact-analyzer-2
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1441 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AUTO XYZ – Section 301 Tariff Impact Analyzer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
10
+ <link href="https://cdn.jsdelivr.net/npm/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ :root {
14
+ --primary: #1e40af;
15
+ --primary-dark: #1e3a8a;
16
+ --secondary: #0f766e;
17
+ --accent: #8b5cf6;
18
+ --light-bg: #f8fafc;
19
+ --dark-text: #0f172a;
20
+ --light-text: #f1f5f9;
21
+ --border: #cbd5e1;
22
+ --success: #10b981;
23
+ --warning: #f59e0b;
24
+ --danger: #ef4444;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29
+ background-color: var(--light-bg);
30
+ color: var(--dark-text);
31
+ overflow-x: hidden;
32
+ }
33
+
34
+ .dashboard-container {
35
+ display: grid;
36
+ grid-template-columns: 250px 1fr;
37
+ grid-template-rows: 70px 1fr 50px;
38
+ grid-template-areas:
39
+ "header header"
40
+ "sidebar main"
41
+ "footer footer";
42
+ min-height: 100vh;
43
+ }
44
+
45
+ @media (max-width: 768px) {
46
+ .dashboard-container {
47
+ grid-template-columns: 1fr;
48
+ grid-template-rows: 70px auto 1fr 50px;
49
+ grid-template-areas:
50
+ "header"
51
+ "sidebar"
52
+ "main"
53
+ "footer";
54
+ }
55
+
56
+ .sidebar {
57
+ position: relative !important;
58
+ transform: translateX(0) !important;
59
+ width: 100% !important;
60
+ max-height: 300px;
61
+ overflow-y: auto;
62
+ }
63
+ }
64
+
65
+ .header {
66
+ grid-area: header;
67
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
68
+ color: white;
69
+ padding: 0 1.5rem;
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: space-between;
73
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
74
+ z-index: 100;
75
+ }
76
+
77
+ .sidebar {
78
+ grid-area: sidebar;
79
+ background-color: white;
80
+ border-right: 1px solid var(--border);
81
+ padding: 1rem;
82
+ overflow-y: auto;
83
+ transition: transform 0.3s ease;
84
+ z-index: 90;
85
+ }
86
+
87
+ .main {
88
+ grid-area: main;
89
+ padding: 1.5rem;
90
+ overflow-y: auto;
91
+ }
92
+
93
+ .footer {
94
+ grid-area: footer;
95
+ background-color: white;
96
+ border-top: 1px solid var(--border);
97
+ padding: 0 1.5rem;
98
+ display: flex;
99
+ align-items: center;
100
+ font-size: 0.8rem;
101
+ color: #64748b;
102
+ }
103
+
104
+ .tab-content {
105
+ display: none;
106
+ }
107
+
108
+ .tab-content.active {
109
+ display: block;
110
+ }
111
+
112
+ .kpi-card {
113
+ background: white;
114
+ border-radius: 0.5rem;
115
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
116
+ padding: 1.5rem;
117
+ transition: transform 0.2s ease;
118
+ }
119
+
120
+ .kpi-card:hover {
121
+ transform: translateY(-3px);
122
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
123
+ }
124
+
125
+ .chart-container {
126
+ background: white;
127
+ border-radius: 0.5rem;
128
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
129
+ padding: 1.5rem;
130
+ margin-bottom: 1.5rem;
131
+ }
132
+
133
+ .filter-section {
134
+ margin-bottom: 1.5rem;
135
+ padding-bottom: 1rem;
136
+ border-bottom: 1px solid var(--border);
137
+ }
138
+
139
+ .filter-section h3 {
140
+ font-size: 1.1rem;
141
+ font-weight: 600;
142
+ margin-bottom: 0.75rem;
143
+ color: var(--primary);
144
+ }
145
+
146
+ .filter-item {
147
+ margin-bottom: 0.75rem;
148
+ }
149
+
150
+ .filter-label {
151
+ display: block;
152
+ margin-bottom: 0.25rem;
153
+ font-size: 0.9rem;
154
+ font-weight: 500;
155
+ }
156
+
157
+ .btn {
158
+ padding: 0.5rem 1rem;
159
+ border-radius: 0.375rem;
160
+ font-weight: 500;
161
+ cursor: pointer;
162
+ transition: all 0.2s ease;
163
+ display: inline-flex;
164
+ align-items: center;
165
+ justify-content: center;
166
+ }
167
+
168
+ .btn-primary {
169
+ background-color: var(--primary);
170
+ color: white;
171
+ }
172
+
173
+ .btn-primary:hover {
174
+ background-color: var(--primary-dark);
175
+ }
176
+
177
+ .btn-secondary {
178
+ background-color: #e2e8f0;
179
+ color: #334155;
180
+ }
181
+
182
+ .btn-secondary:hover {
183
+ background-color: #cbd5e1;
184
+ }
185
+
186
+ .tab-btn {
187
+ padding: 0.75rem 1.25rem;
188
+ border-bottom: 3px solid transparent;
189
+ font-weight: 500;
190
+ color: #64748b;
191
+ transition: all 0.3s ease;
192
+ }
193
+
194
+ .tab-btn.active {
195
+ color: var(--primary);
196
+ border-bottom: 3px solid var(--primary);
197
+ }
198
+
199
+ .tab-btn:hover:not(.active) {
200
+ color: var(--primary-dark);
201
+ background-color: #f1f5f9;
202
+ }
203
+
204
+ .scenario-selector {
205
+ background-color: rgba(255, 255, 255, 0.2);
206
+ border-radius: 0.375rem;
207
+ padding: 0.5rem 1rem;
208
+ color: white;
209
+ border: none;
210
+ min-width: 200px;
211
+ }
212
+
213
+ .scenario-selector:focus {
214
+ outline: none;
215
+ box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
216
+ }
217
+
218
+ .pass-through-slider {
219
+ width: 150px;
220
+ margin: 0 1rem;
221
+ }
222
+
223
+ .slider-container {
224
+ display: flex;
225
+ align-items: center;
226
+ background-color: rgba(255, 255, 255, 0.2);
227
+ padding: 0.5rem 1rem;
228
+ border-radius: 0.375rem;
229
+ color: white;
230
+ }
231
+
232
+ .mobile-toggle {
233
+ display: none;
234
+ background: none;
235
+ border: none;
236
+ font-size: 1.5rem;
237
+ color: white;
238
+ cursor: pointer;
239
+ }
240
+
241
+ .flex-center {
242
+ display: flex;
243
+ align-items: center;
244
+ justify-content: center;
245
+ }
246
+
247
+ .grid-2 {
248
+ display: grid;
249
+ grid-template-columns: repeat(2, 1fr);
250
+ gap: 1.5rem;
251
+ }
252
+
253
+ .grid-3 {
254
+ display: grid;
255
+ grid-template-columns: repeat(3, 1fr);
256
+ gap: 1.5rem;
257
+ }
258
+
259
+ .grid-4 {
260
+ display: grid;
261
+ grid-template-columns: repeat(4, 1fr);
262
+ gap: 1.5rem;
263
+ }
264
+
265
+ @media (max-width: 1024px) {
266
+ .grid-4 {
267
+ grid-template-columns: repeat(2, 1fr);
268
+ }
269
+ }
270
+
271
+ @media (max-width: 768px) {
272
+ .grid-3, .grid-4 {
273
+ grid-template-columns: 1fr;
274
+ }
275
+
276
+ .grid-2 {
277
+ grid-template-columns: 1fr;
278
+ }
279
+
280
+ .mobile-toggle {
281
+ display: block;
282
+ margin-right: 1rem;
283
+ }
284
+ }
285
+
286
+ .scenario-lab-controls {
287
+ display: flex;
288
+ flex-wrap: wrap;
289
+ gap: 1rem;
290
+ margin-bottom: 1.5rem;
291
+ padding: 1rem;
292
+ background-color: white;
293
+ border-radius: 0.5rem;
294
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
295
+ }
296
+
297
+ .scenario-lab-control-group {
298
+ flex: 1;
299
+ min-width: 200px;
300
+ }
301
+
302
+ .scenario-lab-control-group label {
303
+ display: block;
304
+ margin-bottom: 0.5rem;
305
+ font-weight: 500;
306
+ }
307
+
308
+ .scenario-lab-control-group input,
309
+ .scenario-lab-control-group select {
310
+ width: 100%;
311
+ padding: 0.5rem;
312
+ border: 1px solid var(--border);
313
+ border-radius: 0.375rem;
314
+ }
315
+
316
+ .about-panel {
317
+ background: white;
318
+ border-radius: 0.5rem;
319
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
320
+ padding: 1.5rem;
321
+ line-height: 1.6;
322
+ }
323
+
324
+ .about-panel h2 {
325
+ color: var(--primary);
326
+ margin-bottom: 1rem;
327
+ }
328
+
329
+ .about-panel h3 {
330
+ color: var(--secondary);
331
+ margin: 1.5rem 0 0.5rem;
332
+ }
333
+
334
+ .about-panel p {
335
+ margin-bottom: 1rem;
336
+ }
337
+
338
+ .about-panel ul {
339
+ margin-bottom: 1rem;
340
+ padding-left: 1.5rem;
341
+ }
342
+
343
+ .about-panel li {
344
+ margin-bottom: 0.5rem;
345
+ }
346
+
347
+ .validate-modal {
348
+ position: fixed;
349
+ top: 0;
350
+ left: 0;
351
+ width: 100%;
352
+ height: 100%;
353
+ background: rgba(0, 0, 0, 0.5);
354
+ display: flex;
355
+ align-items: center;
356
+ justify-content: center;
357
+ z-index: 1000;
358
+ display: none;
359
+ }
360
+
361
+ .validate-content {
362
+ background: white;
363
+ border-radius: 0.5rem;
364
+ width: 90%;
365
+ max-width: 800px;
366
+ max-height: 90vh;
367
+ overflow-y: auto;
368
+ padding: 2rem;
369
+ }
370
+
371
+ .validate-header {
372
+ display: flex;
373
+ justify-content: space-between;
374
+ align-items: center;
375
+ margin-bottom: 1.5rem;
376
+ }
377
+
378
+ .validate-header h2 {
379
+ margin: 0;
380
+ color: var(--primary);
381
+ }
382
+
383
+ .close-modal {
384
+ background: none;
385
+ border: none;
386
+ font-size: 1.5rem;
387
+ cursor: pointer;
388
+ color: #64748b;
389
+ }
390
+
391
+ .validation-item {
392
+ margin-bottom: 1.5rem;
393
+ padding: 1rem;
394
+ border: 1px solid var(--border);
395
+ border-radius: 0.375rem;
396
+ }
397
+
398
+ .validation-item h3 {
399
+ margin-top: 0;
400
+ color: var(--secondary);
401
+ }
402
+
403
+ .validation-steps {
404
+ background: #f8fafc;
405
+ padding: 1rem;
406
+ border-radius: 0.375rem;
407
+ margin-top: 1rem;
408
+ }
409
+ </style>
410
+ </head>
411
+ <body>
412
+ <div class="dashboard-container">
413
+ <!-- Header -->
414
+ <header class="header">
415
+ <div class="flex items-center">
416
+ <button class="mobile-toggle" id="sidebarToggle">
417
+ <i class="fas fa-bars"></i>
418
+ </button>
419
+ <h1 class="text-xl font-bold">AUTO XYZ – Section 301 Tariff Impact Analyzer</h1>
420
+ </div>
421
+ <div class="flex items-center">
422
+ <select class="scenario-selector" id="scenarioSelector">
423
+ <option>Baseline 2024</option>
424
+ <option selected>2025 Update (USMCA)</option>
425
+ <option>Aggressive 301+</option>
426
+ <option>Balanced Trade Target</option>
427
+ <option>Custom</option>
428
+ </select>
429
+ <div class="slider-container">
430
+ <span>Pass-through:</span>
431
+ <input type="range" min="0" max="100" value="50" class="pass-through-slider" id="passThroughSlider">
432
+ <span id="passThroughValue">50%</span>
433
+ </div>
434
+ <button class="btn btn-primary ml-4" id="runScenarioBtn">
435
+ <i class="fas fa-play mr-2"></i> Run Scenario
436
+ </button>
437
+ <button class="btn btn-secondary ml-2" id="resetBtn">
438
+ <i class="fas fa-undo mr-2"></i> Reset
439
+ </button>
440
+ </div>
441
+ </header>
442
+
443
+ <!-- Sidebar -->
444
+ <aside class="sidebar" id="sidebar">
445
+ <div class="filter-section">
446
+ <h3>Global Filters</h3>
447
+
448
+ <div class="filter-item">
449
+ <label class="filter-label">Date Range</label>
450
+ <select class="w-full p-2 border rounded">
451
+ <option>FY2023</option>
452
+ <option>FY2024</option>
453
+ <option selected>FY2025</option>
454
+ <option>FY2026</option>
455
+ </select>
456
+ </div>
457
+
458
+ <div class="filter-item">
459
+ <label class="filter-label">Vehicle Lines</label>
460
+ <div class="space-y-2">
461
+ <div class="flex items-center">
462
+ <input type="checkbox" id="sedan" class="mr-2" checked>
463
+ <label for="sedan">Sedan A</label>
464
+ </div>
465
+ <div class="flex items-center">
466
+ <input type="checkbox" id="suv" class="mr-2" checked>
467
+ <label for="suv">SUV B</label>
468
+ </div>
469
+ <div class="flex items-center">
470
+ <input type="checkbox" id="truck" class="mr-2" checked>
471
+ <label for="truck">Truck C</label>
472
+ </div>
473
+ <div class="flex items-center">
474
+ <input type="checkbox" id="ev" class="mr-2" checked>
475
+ <label for="ev">EV D</label>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <div class="filter-item">
481
+ <label class="filter-label">Market Region</label>
482
+ <select class="w-full p-2 border rounded">
483
+ <option>US</option>
484
+ <option>Canada</option>
485
+ <option>Mexico</option>
486
+ <option>EU</option>
487
+ <option>UK</option>
488
+ <option>APAC</option>
489
+ </select>
490
+ </div>
491
+
492
+ <div class="filter-item">
493
+ <label class="filter-label">Supplier Country</label>
494
+ <select multiple class="w-full p-2 border rounded" size="4">
495
+ <option>China</option>
496
+ <option>Vietnam</option>
497
+ <option>Thailand</option>
498
+ <option>India</option>
499
+ <option>Germany</option>
500
+ <option>Mexico</option>
501
+ <option>Canada</option>
502
+ <option>US</option>
503
+ </select>
504
+ </div>
505
+
506
+ <div class="filter-item">
507
+ <label class="filter-label">HS Chapters</label>
508
+ <div class="space-y-2">
509
+ <div class="flex items-center">
510
+ <input type="checkbox" id="hs8409" class="mr-2" checked>
511
+ <label for="hs8409">8409 (Engines)</label>
512
+ </div>
513
+ <div class="flex items-center">
514
+ <input type="checkbox" id="hs8708" class="mr-2" checked>
515
+ <label for="hs8708">8708 (Chassis)</label>
516
+ </div>
517
+ <div class="flex items-center">
518
+ <input type="checkbox" id="hs8507" class="mr-2" checked>
519
+ <label for="hs8507">8507 (Batteries)</label>
520
+ </div>
521
+ <div class="flex items-center">
522
+ <input type="checkbox" id="hs8542" class="mr-2" checked>
523
+ <label for="hs8542">8542 (Semiconductors)</label>
524
+ </div>
525
+ <div class="flex items-center">
526
+ <input type="checkbox" id="hs4011" class="mr-2" checked>
527
+ <label for="hs4011">4011 (Tires)</label>
528
+ </div>
529
+ <div class="flex items-center">
530
+ <input type="checkbox" id="hs8703" class="mr-2" checked>
531
+ <label for="hs8703">8703 (Passenger Cars)</label>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="filter-item">
537
+ <label class="filter-label">Currency</label>
538
+ <select class="w-full p-2 border rounded">
539
+ <option>USD</option>
540
+ <option>CAD</option>
541
+ <option>MXN</option>
542
+ <option>EUR</option>
543
+ </select>
544
+ </div>
545
+
546
+ <button class="btn btn-primary w-full mt-4" id="regenerateBtn">
547
+ <i class="fas fa-sync-alt mr-2"></i> Regenerate Data
548
+ </button>
549
+ </div>
550
+ </aside>
551
+
552
+ <!-- Main Content -->
553
+ <main class="main">
554
+ <!-- Tabs Navigation -->
555
+ <div class="flex overflow-x-auto mb-6 border-b">
556
+ <button class="tab-btn active" data-tab="overview">Overview</button>
557
+ <button class="tab-btn" data-tab="models">Models & Pricing</button>
558
+ <button class="tab-btn" data-tab="supply">Supply Chain & Parts</button>
559
+ <button class="tab-btn" data-tab="profitability">Profitability</button>
560
+ <button class="tab-btn" data-tab="scenario">Scenario Lab</button>
561
+ <button class="tab-btn" data-tab="about">About/Methodology</button>
562
+ </div>
563
+
564
+ <!-- Tab Content -->
565
+ <div id="overview" class="tab-content active">
566
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
567
+ <div class="kpi-card">
568
+ <div class="text-sm text-gray-500">Total Tariff Paid YTD</div>
569
+ <div class="text-2xl font-bold text-blue-600">$42.5M</div>
570
+ <div class="text-xs text-green-600 mt-1">↓ 2.3% from last period</div>
571
+ </div>
572
+ <div class="kpi-card">
573
+ <div class="text-sm text-gray-500">Avg Effective Tariff Rate</div>
574
+ <div class="text-2xl font-bold text-blue-600">8.4%</div>
575
+ <div class="text-xs text-red-600 mt-1">↑ 0.7% from baseline</div>
576
+ </div>
577
+ <div class="kpi-card">
578
+ <div class="text-sm text-gray-500">Avg Vehicle BOM Cost</div>
579
+ <div class="text-2xl font-bold text-blue-600">$18,450</div>
580
+ <div class="text-xs text-red-600 mt-1">↑ 4.1% from baseline</div>
581
+ </div>
582
+ <div class="kpi-card">
583
+ <div class="text-sm text-gray-500">Gross Margin %</div>
584
+ <div class="text-2xl font-bold text-blue-600">16.8%</div>
585
+ <div class="text-xs text-red-600 mt-1">↓ 1.2% from baseline</div>
586
+ </div>
587
+ </div>
588
+
589
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
590
+ <div class="chart-container">
591
+ <h3 class="font-bold text-lg mb-4">Tariff Cost by HS Chapter and Supplier Country</h3>
592
+ <canvas id="tariffChart"></canvas>
593
+ </div>
594
+ <div class="chart-container">
595
+ <h3 class="font-bold text-lg mb-4">BOM Cost Composition by Category</h3>
596
+ <canvas id="bomChart"></canvas>
597
+ </div>
598
+ </div>
599
+
600
+ <div class="chart-container mb-8">
601
+ <h3 class="font-bold text-lg mb-4">Monthly Tariff Cost vs. Gross Margin %</h3>
602
+ <canvas id="marginChart"></canvas>
603
+ </div>
604
+
605
+ <div class="chart-container">
606
+ <h3 class="font-bold text-lg mb-4">Top Parts by Tariff Burden</h3>
607
+ <div id="partsTable"></div>
608
+ </div>
609
+ </div>
610
+
611
+ <div id="models" class="tab-content">
612
+ <div class="chart-container mb-8">
613
+ <h3 class="font-bold text-lg mb-4">Vehicle Profitability Waterfall - Sedan A Premium</h3>
614
+ <canvas id="waterfallChart"></canvas>
615
+ </div>
616
+
617
+ <div class="chart-container">
618
+ <h3 class="font-bold text-lg mb-4">Vehicle Profitability by Trim and Region</h3>
619
+ <div id="profitabilityTable"></div>
620
+ </div>
621
+ </div>
622
+
623
+ <div id="supply" class="tab-content">
624
+ <div class="chart-container mb-8">
625
+ <h3 class="font-bold text-lg mb-4">Tariff Cost Heatmap by Supplier Country</h3>
626
+ <div id="supplierMap" class="bg-gray-100 rounded-lg p-4" style="height: 300px;">
627
+ <div class="flex justify-center items-center h-full">
628
+ <div class="text-center">
629
+ <i class="fas fa-globe-americas text-4xl text-blue-500 mb-2"></i>
630
+ <p class="text-gray-600">Interactive map would appear here</p>
631
+ <p class="text-sm text-gray-500 mt-2">Click on countries to filter data</p>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </div>
636
+
637
+ <div class="chart-container mb-8">
638
+ <h3 class="font-bold text-lg mb-4">Lead Time vs Tariff Rate</h3>
639
+ <canvas id="leadTimeChart"></canvas>
640
+ </div>
641
+
642
+ <div class="chart-container">
643
+ <h3 class="font-bold text-lg mb-4">Parts Filter</h3>
644
+ <div id="partsFilterTable"></div>
645
+ </div>
646
+ </div>
647
+
648
+ <div id="profitability" class="tab-content">
649
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
650
+ <div class="chart-container">
651
+ <h3 class="font-bold text-lg mb-4">Margin % Distribution by Vehicle and Region</h3>
652
+ <canvas id="marginDistributionChart"></canvas>
653
+ </div>
654
+ <div class="chart-container">
655
+ <h3 class="font-bold text-lg mb-4">Price Elasticity Impact</h3>
656
+ <canvas id="elasticityChart"></canvas>
657
+ </div>
658
+ </div>
659
+
660
+ <div class="chart-container">
661
+ <h3 class="font-bold text-lg mb-4">Monthly P&L Summary</h3>
662
+ <div id="pnlTable"></div>
663
+ </div>
664
+ </div>
665
+
666
+ <div id="scenario" class="tab-content">
667
+ <div class="scenario-lab-controls mb-8">
668
+ <div class="scenario-lab-control-group">
669
+ <label>Pass-through:</label>
670
+ <input type="range" min="0" max="100" value="50" class="pass-through-slider">
671
+ <span id="scenarioPassThroughValue">50%</span>
672
+ </div>
673
+
674
+ <div class="scenario-lab-control-group">
675
+ <label>Elasticity Override (Sedan):</label>
676
+ <input type="number" step="0.1" value="-1.2" class="border rounded p-2">
677
+ </div>
678
+
679
+ <div class="scenario-lab-control-group">
680
+ <label>USMCA Rules:</label>
681
+ <select class="border rounded p-2">
682
+ <option>Enabled</option>
683
+ <option>Disabled</option>
684
+ </select>
685
+ </div>
686
+
687
+ <div class="scenario-lab-control-group">
688
+ <label>FX Sensitivity:</label>
689
+ <input type="range" min="-10" max="10" value="0" step="1">
690
+ <span>0%</span>
691
+ </div>
692
+ </div>
693
+
694
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
695
+ <div class="chart-container">
696
+ <h3 class="font-bold text-lg mb-4">Custom Tariff Schedule</h3>
697
+ <div id="tariffScheduleTable"></div>
698
+ </div>
699
+ <div class="chart-container">
700
+ <h3 class="font-bold text-lg mb-4">Δτ Country Add-ons</h3>
701
+ <div id="deltaTauTable"></div>
702
+ </div>
703
+ </div>
704
+
705
+ <div class="chart-container mb-8">
706
+ <h3 class="font-bold text-lg mb-4">Scenario Comparison</h3>
707
+ <canvas id="comparisonChart"></canvas>
708
+ </div>
709
+
710
+ <div class="flex justify-center">
711
+ <button class="btn btn-primary" id="saveScenarioBtn">
712
+ <i class="fas fa-save mr-2"></i> Save Scenario
713
+ </button>
714
+ </div>
715
+ </div>
716
+
717
+ <div id="about" class="tab-content">
718
+ <div class="about-panel">
719
+ <h2>About & Methodology</h2>
720
+
721
+ <h3>Dashboard Purpose</h3>
722
+ <p>The AUTO XYZ Section 301 Tariff Impact Analyzer is designed to help internal analysts explore and quantify the effects of Section 301 tariffs on our vehicle lineup, parts sourcing, and profitability across various scenarios. All data is synthetic and for demonstration purposes only.</p>
723
+
724
+ <h3>Key Policy Context</h3>
725
+ <ul>
726
+ <li><strong>Section 301 Tariffs:</strong> Affect imports by HS code, product category, and country of origin, with recent policy updates including treatment of USMCA content where tariffs apply only to non-U.S. content in qualifying Canada/Mexico vehicles and parts.</li>
727
+ <li><strong>Duty-free Components:</strong> Exempt until a content-specific mechanism is implemented (as per caredge.com).</li>
728
+ <li><strong>Balanced Trade Targets:</strong> Analysts may test alternative tariff schedules per USTR models to simulate macro policy variants (tariffs.inasimonovska.com).</li>
729
+ </ul>
730
+
731
+ <h3>Methodology Highlights</h3>
732
+ <ul>
733
+ <li><strong>USMCA Non-U.S. Content Rule:</strong> In the 2025 Update scenario, for vehicles/parts qualifying under USMCA from CA/MX, tariffs are applied only to non-U.S. content share.</li>
734
+ <li><strong>Balanced Trade Target:</strong> Implements a stylized function that calculates incremental tariff add-ons based on bilateral trade deficits to move toward balanced trade.</li>
735
+ <li><strong>Elasticity and Demand Model:</strong> Segment-specific price elasticities (Sedan -1.2, SUV -1.0, Truck -0.8, EV -1.4) affect unit sales based on price pass-through.</li>
736
+ <li><strong>Risk Scoring:</strong> Composite risk based on supplier concentration, China exposure, lead times, and parts criticality.</li>
737
+ </ul>
738
+
739
+ <h3>Technical Implementation</h3>
740
+ <p>All data is generated client-side using synthetic parameters. The dashboard runs entirely in the browser without external data dependencies. Calculations are reproducible with a deterministic seed.</p>
741
+
742
+ <div class="bg-blue-50 border border-blue-200 rounded p-4 mt-6">
743
+ <h4 class="font-bold text-blue-800 mb-2">Data Privacy Notice</h4>
744
+ <p class="text-blue-700">This dashboard is a demonstration using synthetic data. Sources referenced for policy context only: caredge.com, tariffs.inasimonovska.com.</p>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ </main>
749
+
750
+ <!-- Footer -->
751
+ <footer class="footer">
752
+ <div>AUTO XYZ – Section 301 Tariff Impact Analyzer | This dashboard is a demonstration using synthetic data. Sources referenced for policy context only: caredge.com, tariffs.inasimonovska.com.</div>
753
+ <div class="ml-auto">
754
+ <button class="text-blue-600 hover:text-blue-800 mr-4" id="validateBtn">
755
+ <i class="fas fa-calculator mr-1"></i> Validate Calculations
756
+ </button>
757
+ <button class="text-blue-600 hover:text-blue-800">
758
+ <i class="fas fa-download mr-1"></i> Export Report
759
+ </button>
760
+ </div>
761
+ </footer>
762
+ </div>
763
+
764
+ <!-- Validation Modal -->
765
+ <div class="validate-modal" id="validateModal">
766
+ <div class="validate-content">
767
+ <div class="validate-header">
768
+ <h2>Validate Calculations</h2>
769
+ <button class="close-modal" id="closeModal">&times;</button>
770
+ </div>
771
+
772
+ <div class="validation-item">
773
+ <h3>Part Validation Example</h3>
774
+ <p><strong>Part:</strong> Battery Pack (HS Code: 8507) - Supplier: China</p>
775
+ <p><strong>Scenario:</strong> 2025 Update (USMCA)</p>
776
+
777
+ <div class="validation-steps">
778
+ <p><strong>Calculation Steps:</strong></p>
779
+ <ol class="list-decimal pl-5 space-y-1">
780
+ <li>Base unit cost: $3,200</li>
781
+ <li>Logistics cost: $128 (4% of unit cost)</li>
782
+ <li>HS Code 8507 baseline tariff: 25%</li>
783
+ <li>USMCA-eligible part from China: Apply full tariff to non-US content (100%)</li>
784
+ <li>Assessed value: $3,200</li>
785
+ <li>Tariff amount: $3,200 × 25% = $800</li>
786
+ <li>Landed cost: $3,200 + $128 + $800 = $4,128</li>
787
+ </ol>
788
+ </div>
789
+
790
+ <p class="mt-3"><strong>Verification:</strong> Charted tariff burden matches calculated value of $800 for this part across vehicles.</p>
791
+ </div>
792
+
793
+ <div class="validation-item">
794
+ <h3>Vehicle Validation Example</h3>
795
+ <p><strong>Vehicle:</strong> SUV B Premium</p>
796
+ <p><strong>Scenario:</strong> Balanced Trade Target</p>
797
+
798
+ <div class="validation-steps">
799
+ <p><strong>Calculation Steps:</strong></p>
800
+ <ol class="list-decimal pl-5 space-y-1">
801
+ <li>Base BOM cost: $18,450</li>
802
+ <li>Total tariff cost: $1,554 (8.4% effective rate)</li>
803
+ <li>Discount: 5% of MSRP ($32,000 → $30,400)</li>
804
+ <li>Dealer margin: 12% of $30,400 = $3,648</li>
805
+ <li>Variable costs: 7% of MSRP = $2,240</li>
806
+ <li>Gross profit: $30,400 - $3,648 - $1,554 - $18,450 - $2,240 = $4,508</li>
807
+ <li>Gross margin: $4,508 / $30,400 = 14.8%</li>
808
+ </ol>
809
+ </div>
810
+
811
+ <p class="mt-3"><strong>Verification:</strong> Dashboard gross margin of 14.8% matches our calculated value.</p>
812
+ </div>
813
+
814
+ <div class="flex justify-center mt-4">
815
+ <button class="btn btn-primary">Regenerate with New Seed</button>
816
+ <button class="btn btn-secondary ml-3">Close</button>
817
+ </div>
818
+ </div>
819
+ </div>
820
+
821
+ <script>
822
+ // Initialize tabs
823
+ document.querySelectorAll('.tab-btn').forEach(button => {
824
+ button.addEventListener('click', () => {
825
+ // Remove active class from all buttons
826
+ document.querySelectorAll('.tab-btn').forEach(btn => {
827
+ btn.classList.remove('active');
828
+ });
829
+
830
+ // Add active class to clicked button
831
+ button.classList.add('active');
832
+
833
+ // Hide all tab content
834
+ document.querySelectorAll('.tab-content').forEach(content => {
835
+ content.classList.remove('active');
836
+ });
837
+
838
+ // Show corresponding tab content
839
+ const tabId = button.getAttribute('data-tab');
840
+ document.getElementById(tabId).classList.add('active');
841
+ });
842
+ });
843
+
844
+ // Scenario selector change handler
845
+ document.getElementById('scenarioSelector').addEventListener('change', function() {
846
+ // In a real app, this would trigger recomputation
847
+ console.log('Scenario changed to:', this.value);
848
+ });
849
+
850
+ // Pass-through slider handler
851
+ const passThroughSlider = document.getElementById('passThroughSlider');
852
+ const passThroughValue = document.getElementById('passThroughValue');
853
+
854
+ passThroughSlider.addEventListener('input', function() {
855
+ passThroughValue.textContent = this.value + '%';
856
+ });
857
+
858
+ // Sidebar toggle for mobile
859
+ document.getElementById('sidebarToggle').addEventListener('click', function() {
860
+ const sidebar = document.getElementById('sidebar');
861
+ sidebar.style.position = 'fixed';
862
+ sidebar.style.height = '100vh';
863
+ sidebar.style.transform = sidebar.style.transform === 'translateX(-100%)' ? 'translateX(0)' : 'translateX(-100%)';
864
+ });
865
+
866
+ // Close sidebar when clicking outside (for mobile)
867
+ document.addEventListener('click', function(event) {
868
+ const sidebar = document.getElementById('sidebar');
869
+ const toggle = document.getElementById('sidebarToggle');
870
+
871
+ if (window.innerWidth <= 768 &&
872
+ !sidebar.contains(event.target) &&
873
+ event.target !== toggle &&
874
+ !toggle.contains(event.target)) {
875
+ sidebar.style.transform = 'translateX(-100%)';
876
+ }
877
+ });
878
+
879
+ // Regenerate data button
880
+ document.getElementById('regenerateBtn').addEventListener('click', function() {
881
+ // In a real app, this would regenerate synthetic data
882
+ alert('Synthetic data regenerated!');
883
+ });
884
+
885
+ // Run scenario button
886
+ document.getElementById('runScenarioBtn').addEventListener('click', function() {
887
+ // In a real app, this would run the selected scenario
888
+ alert('Scenario executed!');
889
+ });
890
+
891
+ // Reset button
892
+ document.getElementById('resetBtn').addEventListener('click', function() {
893
+ // Reset to baseline scenario
894
+ document.getElementById('scenarioSelector').value = 'Baseline 2024';
895
+ passThroughSlider.value = 50;
896
+ passThroughValue.textContent = '50%';
897
+ });
898
+
899
+ // Validate calculations modal
900
+ document.getElementById('validateBtn').addEventListener('click', function() {
901
+ document.getElementById('validateModal').style.display = 'flex';
902
+ });
903
+
904
+ document.getElementById('closeModal').addEventListener('click', function() {
905
+ document.getElementById('validateModal').style.display = 'none';
906
+ });
907
+
908
+ // Close modal when clicking outside content
909
+ document.getElementById('validateModal').addEventListener('click', function(event) {
910
+ if (event.target === this) {
911
+ this.style.display = 'none';
912
+ }
913
+ });
914
+
915
+ // Initialize charts (basic visualizations for demonstration)
916
+ function initCharts() {
917
+ // Tariff chart
918
+ const tariffCtx = document.getElementById('tariffChart').getContext('2d');
919
+ new Chart(tariffCtx, {
920
+ type: 'bar',
921
+ data: {
922
+ labels: ['China', 'Vietnam', 'Thailand', 'Germany', 'Mexico'],
923
+ datasets: [
924
+ {
925
+ label: '8409 (Engines)',
926
+ data: [12, 8, 5, 3, 7],
927
+ backgroundColor: '#3b82f6'
928
+ },
929
+ {
930
+ label: '8708 (Chassis)',
931
+ data: [8, 5, 10, 6, 12],
932
+ backgroundColor: '#8b5cf6'
933
+ },
934
+ {
935
+ label: '8507 (Batteries)',
936
+ data: [15, 0, 0, 0, 3],
937
+ backgroundColor: '#10b981'
938
+ }
939
+ ]
940
+ },
941
+ options: {
942
+ responsive: true,
943
+ plugins: {
944
+ title: {
945
+ display: true,
946
+ text: 'Tariff Cost by Supplier Country and HS Chapter'
947
+ },
948
+ legend: {
949
+ position: 'top',
950
+ }
951
+ },
952
+ scales: {
953
+ x: {
954
+ stacked: true,
955
+ },
956
+ y: {
957
+ stacked: true,
958
+ title: {
959
+ display: true,
960
+ text: 'Tariff Cost (Millions USD)'
961
+ }
962
+ }
963
+ }
964
+ }
965
+ });
966
+
967
+ // BOM chart
968
+ const bomCtx = document.getElementById('bomChart').getContext('2d');
969
+ new Chart(bomCtx, {
970
+ type: 'pie',
971
+ data: {
972
+ labels: ['Powertrain', 'Electronics', 'Battery', 'Chassis', 'Interior', 'Tires'],
973
+ datasets: [{
974
+ data: [25, 20, 15, 15, 15, 10],
975
+ backgroundColor: [
976
+ '#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#06b6d4'
977
+ ]
978
+ }]
979
+ },
980
+ options: {
981
+ responsive: true,
982
+ plugins: {
983
+ title: {
984
+ display: true,
985
+ text: 'BOM Cost Composition by Category'
986
+ }
987
+ }
988
+ }
989
+ });
990
+
991
+ // Margin chart
992
+ const marginCtx = document.getElementById('marginChart').getContext('2d');
993
+ const marginChart = new Chart(marginCtx, {
994
+ type: 'line',
995
+ data: {
996
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
997
+ datasets: [
998
+ {
999
+ label: 'Tariff Cost',
1000
+ data: [3.2, 3.1, 3.5, 3.4, 3.6, 3.8, 3.7, 3.9, 4.0, 4.1, 4.2, 4.3],
1001
+ borderColor: '#ef4444',
1002
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
1003
+ tension: 0.3,
1004
+ fill: true
1005
+ },
1006
+ {
1007
+ label: 'Gross Margin %',
1008
+ data: [18.5, 18.2, 17.8, 17.5, 17.2, 16.8, 16.5, 16.2, 15.8, 15.5, 15.2, 14.8],
1009
+ borderColor: '#10b981',
1010
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
1011
+ tension: 0.3,
1012
+ fill: true
1013
+ }
1014
+ ]
1015
+ },
1016
+ options: {
1017
+ responsive: true,
1018
+ plugins: {
1019
+ title: {
1020
+ display: true,
1021
+ text: 'Monthly Tariff Cost vs. Gross Margin %'
1022
+ }
1023
+ },
1024
+ scales: {
1025
+ y: {
1026
+ beginAtZero: true
1027
+ }
1028
+ }
1029
+ }
1030
+ });
1031
+
1032
+ // Initialize tables
1033
+ initTables();
1034
+ }
1035
+
1036
+ // Initialize tables with Tabulator
1037
+ function initTables() {
1038
+ // Parts table
1039
+ new Tabulator("#partsTable", {
1040
+ data: [
1041
+ {hsCode: "8507", partName: "Battery Pack", supplier: "China", tariff: "25%", amount: "$800", landed: "$4,128", vehicles: "EV D"},
1042
+ {hsCode: "8542", partName: "Processor Chip", supplier: "China", tariff: "25%", amount: "$300", landed: "$1,548", vehicles: "All"},
1043
+ {hsCode: "8708", partName: "Front Axle", supplier: "Mexico", tariff: "7.5%", amount: "$150", landed: "$1,150", vehicles: "SUV B, Truck C"},
1044
+ {hsCode: "8409", partName: "Turbocharger", supplier: "Germany", tariff: "10%", amount: "$120", landed: "$920", vehicles: "Sedan A"},
1045
+ {hsCode: "4011", partName: "Winter Tire", supplier: "Thailand", tariff: "10%", amount: "$80", landed: "$180", vehicles: "Sedan A, SUV B"},
1046
+ {hsCode: "8507", partName: "Battery Module", supplier: "China", tariff: "25%", amount: "$600", landed: "$3,200", vehicles: "EV D"},
1047
+ ],
1048
+ layout: "fitColumns",
1049
+ columns: [
1050
+ {title: "HS Code", field: "hsCode", width: 100},
1051
+ {title: "Part Name", field: "partName"},
1052
+ {title: "Supplier", field: "supplier"},
1053
+ {title: "Tariff Rate", field: "tariff", hozAlign: "center"},
1054
+ {title: "Tariff Amount", field: "amount", hozAlign: "right"},
1055
+ {title: "Landed Cost", field: "landed", hozAlign: "right"},
1056
+ {title: "Vehicle Coverage", field: "vehicles"}
1057
+ ],
1058
+ });
1059
+
1060
+ // Profitability table
1061
+ new Tabulator("#profitabilityTable", {
1062
+ data: [
1063
+ {vehicle: "Sedan A Base", region: "US", msrp: "$24,999", cost: "$18,240", margin: "15.2%", tariff: "$850", units: 12500},
1064
+ {vehicle: "Sedan A Premium", region: "US", msrp: "$34,999", cost: "$24,850", margin: "16.8%", tariff: "$1,250", units: 9800},
1065
+ {vehicle: "SUV B Base", region: "Canada", msrp: "$32,999", cost: "$22,780", margin: "17.5%", tariff: "$980", units: 15200},
1066
+ {vehicle: "SUV B Premium", region: "Canada", msrp: "$42,999", cost: "$29,150", margin: "16.2%", tariff: "$1,420", units: 8900},
1067
+ {vehicle: "Truck C Base", region: "US", msrp: "$38,999", cost: "$27,890", margin: "18.5%", tariff: "$1,320", units: 11500},
1068
+ {vehicle: "EV D Base", region: "EU", msrp: "$48,999", cost: "$32,500", margin: "16.8%", tariff: "$2,150", units: 6800},
1069
+ ],
1070
+ layout: "fitColumns",
1071
+ columns: [
1072
+ {title: "Vehicle", field: "vehicle"},
1073
+ {title: "Region", field: "region"},
1074
+ {title: "MSRP", field: "msrp", hozAlign: "right"},
1075
+ {title: "Cost", field: "cost", hozAlign: "right"},
1076
+ {title: "Margin", field: "margin", hozAlign: "right"},
1077
+ {title: "Tariff", field: "tariff", hozAlign: "right"},
1078
+ {title: "Units Sold", field: "units", hozAlign: "right"}
1079
+ ],
1080
+ initialSort: [
1081
+ {column: "margin", dir: "asc"}
1082
+ ]
1083
+ });
1084
+
1085
+ // Parts filter table
1086
+ new Tabulator("#partsFilterTable", {
1087
+ data: [
1088
+ {hs: "8507", name: "Battery Module", category: "Battery", supplier: "China", usmca: "No", content: "85%", tariff: "25%", criticality: 5},
1089
+ {hs: "8542", name: "Processor Chip", category: "Electronics", supplier: "Thailand", usmca: "Yes", content: "45%", tariff: "25%", criticality: 4},
1090
+ {hs: "8708", name: "Rear Axle", category: "Chassis", supplier: "Mexico", usmca: "Yes", content: "30%", tariff: "7.5%", criticality: 3},
1091
+ {hs: "8409", name: "Turbocharger", category: "Powertrain", supplier: "Germany", usmca: "No", content: "100%", tariff: "10%", criticality: 4},
1092
+ {hs: "4011", name: "All-Season Tire", category: "Tires", supplier: "Vietnam", usmca: "No", content: "100%", tariff: "10%", criticality: 2},
1093
+ ],
1094
+ layout: "fitColumns",
1095
+ columns: [
1096
+ {title: "HS Code", field: "hs", width: 100},
1097
+ {title: "Part Name", field: "name"},
1098
+ {title: "Category", field: "category"},
1099
+ {title: "Supplier", field: "supplier"},
1100
+ {title: "USMCA Eligible", field: "usmca", hozAlign: "center"},
1101
+ {title: "Non-US Content", field: "content", hozAlign: "center"},
1102
+ {title: "Tariff Rate", field: "tariff", hozAlign: "center"},
1103
+ {title: "Criticality", field: "criticality", hozAlign: "center"}
1104
+ ],
1105
+ initialFilter: [
1106
+ {field: "category", type: "=", value: "Battery"}
1107
+ ]
1108
+ });
1109
+
1110
+ // P&L table
1111
+ new Tabulator("#pnlTable", {
1112
+ data: [
1113
+ {month: "Jan", revenue: "$128M", cogs: "$95M", tariff: "$4.2M", profit: "$28.8M", margin: "22.5%"},
1114
+ {month: "Feb", revenue: "$132M", cogs: "$98M", tariff: "$4.4M", profit: "$29.6M", margin: "22.4%"},
1115
+ {month: "Mar", revenue: "$135M", cogs: "$101M", tariff: "$4.6M", profit: "$29.4M", margin: "21.8%"},
1116
+ {month: "Apr", revenue: "$140M", cogs: "$104M", tariff: "$4.8M", profit: "$31.2M", margin: "22.3%"},
1117
+ {month: "May", revenue: "$145M", cogs: "$108M", tariff: "$5.1M", profit: "$31.9M", margin: "22.0%"},
1118
+ {month: "Jun", revenue: "$150M", cogs: "$112M", tariff: "$5.4M", profit: "$32.6M", margin: "21.7%"},
1119
+ ],
1120
+ layout: "fitColumns",
1121
+ columns: [
1122
+ {title: "Month", field: "month"},
1123
+ {title: "Revenue", field: "revenue", hozAlign: "right"},
1124
+ {title: "COGS", field: "cogs", hozAlign: "right"},
1125
+ {title: "Tariff", field: "tariff", hozAlign: "right"},
1126
+ {title: "Gross Profit", field: "profit", hozAlign: "right"},
1127
+ {title: "Margin %", field: "margin", hozAlign: "right"}
1128
+ ]
1129
+ });
1130
+
1131
+ // Tariff schedule table
1132
+ new Tabulator("#tariffScheduleTable", {
1133
+ data: [
1134
+ {hs: "8409", category: "Engines", baseline: "10%", update: "12%", agressive: "15%", balanced: "11%"},
1135
+ {hs: "8708", category: "Chassis", baseline: "7.5%", update: "8%", agressive: "12.5%", balanced: "8.5%"},
1136
+ {hs: "8507", category: "Batteries", baseline: "25%", update: "25%", agressive: "35%", balanced: "27%"},
1137
+ {hs: "8542", category: "Semiconductors", baseline: "25%", update: "25%", agressive: "35%", balanced: "27%"},
1138
+ {hs: "4011", category: "Tires", baseline: "10%", update: "10%", agressive: "15%", balanced: "12%"},
1139
+ ],
1140
+ layout: "fitColumns",
1141
+ columns: [
1142
+ {title: "HS Code", field: "hs"},
1143
+ {title: "Category", field: "category"},
1144
+ {title: "Baseline", field: "baseline"},
1145
+ {title: "2025 Update", field: "update"},
1146
+ {title: "Aggressive 301+", field: "agressive"},
1147
+ {title: "Balanced Target", field: "balanced"}
1148
+ ]
1149
+ });
1150
+
1151
+ // Δτ table
1152
+ new Tabulator("#deltaTauTable", {
1153
+ data: [
1154
+ {country: "China", deficit: "$125B", delta: "+4.5%"},
1155
+ {country: "Vietnam", deficit: "$45B", delta: "+2.8%"},
1156
+ {country: "Thailand", deficit: "$32B", delta: "+2.3%"},
1157
+ {country: "India", deficit: "$28B", delta: "+2.0%"},
1158
+ {country: "Germany", deficit: "$18B", delta: "+1.5%"},
1159
+ {country: "Mexico", deficit: "-$3B", delta: "0%"},
1160
+ {country: "Canada", deficit: "-$8B", delta: "0%"},
1161
+ ],
1162
+ layout: "fitColumns",
1163
+ columns: [
1164
+ {title: "Country", field: "country"},
1165
+ {title: "Trade Deficit", field: "deficit"},
1166
+ {title: "Δτ Tariff Add-on", field: "delta"}
1167
+ ]
1168
+ });
1169
+
1170
+ // Waterfall chart
1171
+ const waterfallCtx = document.getElementById('waterfallChart').getContext('2d');
1172
+ new Chart(waterfallCtx, {
1173
+ type: 'bar',
1174
+ data: {
1175
+ labels: ['MSRP Base', 'Incremental Tariffs', 'Pass-through', 'Discounts', 'Dealer Margin', 'Final Price', 'Gross Profit'],
1176
+ datasets: [{
1177
+ label: 'Amount (USD)',
1178
+ data: [34999, 1250, 625, -1750, -4199, 28975, 4825],
1179
+ backgroundColor: [
1180
+ 'rgba(75, 192, 192, 0.7)',
1181
+ 'rgba(255, 99, 132, 0.7)',
1182
+ 'rgba(255, 159, 64, 0.7)',
1183
+ 'rgba(153, 102, 255, 0.7)',
1184
+ 'rgba(54, 162, 235, 0.7)',
1185
+ 'rgba(255, 206, 86, 0.7)',
1186
+ 'rgba(75, 192, 192, 0.7)'
1187
+ ],
1188
+ borderColor: [
1189
+ 'rgba(75, 192, 192, 1)',
1190
+ 'rgba(255, 99, 132, 1)',
1191
+ 'rgba(255, 159, 64, 1)',
1192
+ 'rgba(153, 102, 255, 1)',
1193
+ 'rgba(54, 162, 235, 1)',
1194
+ 'rgba(255, 206, 86, 1)',
1195
+ 'rgba(75, 192, 192, 1)'
1196
+ ],
1197
+ borderWidth: 1
1198
+ }]
1199
+ },
1200
+ options: {
1201
+ responsive: true,
1202
+ plugins: {
1203
+ title: {
1204
+ display: true,
1205
+ text: 'Profitability Waterfall - Sedan A Premium'
1206
+ }
1207
+ },
1208
+ scales: {
1209
+ y: {
1210
+ beginAtZero: true,
1211
+ title: {
1212
+ display: true,
1213
+ text: 'USD'
1214
+ }
1215
+ }
1216
+ }
1217
+ }
1218
+ });
1219
+
1220
+ // Lead time chart
1221
+ const leadTimeCtx = document.getElementById('leadTimeChart').getContext('2d');
1222
+ new Chart(leadTimeCtx, {
1223
+ type: 'bubble',
1224
+ data: {
1225
+ datasets: [{
1226
+ label: 'Battery',
1227
+ data: [{
1228
+ x: 45,
1229
+ y: 25,
1230
+ r: 20
1231
+ }],
1232
+ backgroundColor: 'rgba(255, 99, 132, 0.5)'
1233
+ }, {
1234
+ label: 'Semiconductor',
1235
+ data: [{
1236
+ x: 60,
1237
+ y: 35,
1238
+ r: 15
1239
+ }],
1240
+ backgroundColor: 'rgba(54, 162, 235, 0.5)'
1241
+ }, {
1242
+ label: 'Chassis',
1243
+ data: [{
1244
+ x: 30,
1245
+ y: 7.5,
1246
+ r: 25
1247
+ }],
1248
+ backgroundColor: 'rgba(255, 206, 86, 0.5)'
1249
+ }, {
1250
+ label: 'Tires',
1251
+ data: [{
1252
+ x: 25,
1253
+ y: 10,
1254
+ r: 18
1255
+ }],
1256
+ backgroundColor: 'rgba(75, 192, 192, 0.5)'
1257
+ }],
1258
+ borderWidth: 1
1259
+ },
1260
+ options: {
1261
+ responsive: true,
1262
+ plugins: {
1263
+ title: {
1264
+ display: true,
1265
+ text: 'Lead Time vs. Tariff Rate (Bubble size = Spend)'
1266
+ }
1267
+ },
1268
+ scales: {
1269
+ x: {
1270
+ title: {
1271
+ display: true,
1272
+ text: 'Lead Time (Days)'
1273
+ }
1274
+ },
1275
+ y: {
1276
+ title: {
1277
+ display: true,
1278
+ text: 'Tariff Rate (%)'
1279
+ }
1280
+ }
1281
+ }
1282
+ }
1283
+ });
1284
+
1285
+ // Margin distribution chart
1286
+ const marginDistCtx = document.getElementById('marginDistributionChart').getContext('2d');
1287
+ new Chart(marginDistCtx, {
1288
+ type: 'bar',
1289
+ data: {
1290
+ labels: ['Baseline 2024', '2025 Update', 'Aggressive 301+', 'Balanced Trade'],
1291
+ datasets: [
1292
+ {
1293
+ label: 'Sedan A',
1294
+ data: [16.8, 16.2, 15.4, 15.8],
1295
+ backgroundColor: '#3b82f6'
1296
+ },
1297
+ {
1298
+ label: 'SUV B',
1299
+ data: [17.5, 17.1, 16.3, 16.7],
1300
+ backgroundColor: '#8b5cf6'
1301
+ },
1302
+ {
1303
+ label: 'Truck C',
1304
+ data: [18.2, 17.8, 17.0, 17.4],
1305
+ backgroundColor: '#10b981'
1306
+ },
1307
+ {
1308
+ label: 'EV D',
1309
+ data: [15.8, 15.4, 14.2, 14.8],
1310
+ backgroundColor: '#f59e0b'
1311
+ }
1312
+ ]
1313
+ },
1314
+ options: {
1315
+ responsive: true,
1316
+ plugins: {
1317
+ title: {
1318
+ display: true,
1319
+ text: 'Margin % Distribution by Vehicle and Scenario'
1320
+ }
1321
+ },
1322
+ scales: {
1323
+ y: {
1324
+ title: {
1325
+ display: true,
1326
+ text: 'Margin %'
1327
+ }
1328
+ }
1329
+ }
1330
+ }
1331
+ });
1332
+
1333
+ // Elasticity chart
1334
+ const elasticityCtx = document.getElementById('elasticityChart').getContext('2d');
1335
+ new Chart(elasticityCtx, {
1336
+ type: 'line',
1337
+ data: {
1338
+ labels: ['-20%', '-15%', '-10%', '-5%', '0%', '+5%', '+10%'],
1339
+ datasets: [
1340
+ {
1341
+ label: 'Sedan (ε=-1.2)',
1342
+ data: [120, 115, 110, 105, 100, 95, 90],
1343
+ borderColor: '#3b82f6',
1344
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
1345
+ fill: true,
1346
+ tension: 0.3
1347
+ },
1348
+ {
1349
+ label: 'SUV (ε=-1.0)',
1350
+ data: [115, 112, 109, 105, 100, 96, 92],
1351
+ borderColor: '#8b5cf6',
1352
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
1353
+ fill: true,
1354
+ tension: 0.3
1355
+ },
1356
+ {
1357
+ label: 'Truck (ε=-0.8)',
1358
+ data: [110, 107, 104, 102, 100, 98, 96],
1359
+ borderColor: '#10b981',
1360
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
1361
+ fill: true,
1362
+ tension: 0.3
1363
+ },
1364
+ {
1365
+ label: 'EV (ε=-1.4)',
1366
+ data: [125, 120, 115, 110, 100, 95, 90],
1367
+ borderColor: '#f59e0b',
1368
+ backgroundColor: 'rgba(245, 158, 11, 0.1)',
1369
+ fill: true,
1370
+ tension: 0.3
1371
+ }
1372
+ ]
1373
+ },
1374
+ options: {
1375
+ responsive: true,
1376
+ plugins: {
1377
+ title: {
1378
+ display: true,
1379
+ text: 'Price Elasticity Impact - Units vs. Price Index'
1380
+ }
1381
+ },
1382
+ scales: {
1383
+ y: {
1384
+ title: {
1385
+ display: true,
1386
+ text: 'Units Sold (Index)'
1387
+ }
1388
+ },
1389
+ x: {
1390
+ title: {
1391
+ display: true,
1392
+ text: 'Price Index Change'
1393
+ }
1394
+ }
1395
+ }
1396
+ }
1397
+ });
1398
+
1399
+ // Comparison chart
1400
+ const comparisonCtx = document.getElementById('comparisonChart').getContext('2d');
1401
+ new Chart(comparisonCtx, {
1402
+ type: 'bar',
1403
+ data: {
1404
+ labels: ['Baseline 2024', '2025 Update', 'Aggressive 301+', 'Balanced Trade'],
1405
+ datasets: [
1406
+ {
1407
+ label: 'Tariff Cost (Millions)',
1408
+ data: [38.2, 42.5, 55.8, 45.1],
1409
+ backgroundColor: '#ef4444'
1410
+ },
1411
+ {
1412
+ label: 'Margin %',
1413
+ data: [17.8, 16.8, 14.2, 15.5],
1414
+ backgroundColor: '#10b981'
1415
+ },
1416
+ {
1417
+ label: 'Units Sold (Thousands)',
1418
+ data: [125, 120, 110, 118],
1419
+ backgroundColor: '#3b82f6'
1420
+ }
1421
+ ]
1422
+ },
1423
+ options: {
1424
+ responsive: true,
1425
+ plugins: {
1426
+ title: {
1427
+ display: true,
1428
+ text: 'Scenario Comparison - KPIs'
1429
+ }
1430
+ }
1431
+ }
1432
+ });
1433
+ }
1434
+
1435
+ // Initialize the dashboard when the page loads
1436
+ document.addEventListener('DOMContentLoaded', function() {
1437
+ initCharts();
1438
+ });
1439
+ </script>
1440
+ <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=NarrativeLogistics/section-301-tariff-impact-analyzer-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1441
+ </html>