// product-ui.jsx — Faithful CBAMy product widgets (dashboard, simulator, declaration) // All rendered as React. Used in landing variants as "Cosa vedi" snippets. const { useState: _useState, useEffect: _useEffect, useMemo: _useMemo } = React; // ─── App-chrome: sidebar + main wrap ──────────────────────────────────────── function CBAMSidebar({ active = 'Dashboard', compact = false, scale = 1 }) { const items = [ { g: 'OPERATIVITÀ', items: [ { n: 'Dashboard', ic: IconGrid }, { n: 'Dichiarazioni', ic: IconDoc }, { n: 'Simulatore', ic: IconCalc }, ]}, { g: 'AMMINISTRAZIONE', items: [ { n: 'Utenti', ic: IconUsers }, { n: 'Regole CBAM', ic: IconGear }, { n: 'Dataset normativi', ic: IconDb }, { n: 'Prezzo certificato', ic: IconEuro }, { n: 'Documenti legali', ic: IconScale }, { n: 'Dichiarazione test', ic: IconFlask }, ]}, ]; return ( ); } // ─── Icons (line, 1.5 stroke) ─────────────────────────────────────────────── const ico = (size, children) => ( {children} ); function IconGrid({ size = 16, color }) { return {ico(size, <>)}; } function IconDoc({ size = 16, color }) { return {ico(size, <>)}; } function IconCalc({ size = 16, color }) { return {ico(size, <>)}; } function IconUsers({ size = 16, color }) { return {ico(size, <>)}; } function IconGear({ size = 16, color }) { return {ico(size, <>)}; } function IconDb({ size = 16, color }) { return {ico(size, <>)}; } function IconEuro({ size = 16, color }) { return {ico(size, <>)}; } function IconScale({ size = 16, color }) { return {ico(size, <>)}; } function IconFlask({ size = 16, color }) { return {ico(size, <>)}; } function IconLogout({ size = 16, color }) { return {ico(size, <>)}; } function IconUpload({ size = 16, color }) { return {ico(size, <>)}; } function IconPlus({ size = 16, color }) { return {ico(size, <>)}; } function IconCheck({ size = 16, color }) { return {ico(size, )}; } function IconCheckCircle({ size = 16, color }) { return {ico(size, <>)}; } function IconInfo({ size = 14, color }) { return {ico(size, <>)}; } function IconAlert({ size = 14, color }) { return {ico(size, <>)}; } function IconChevron({ size = 16, color, dir = 'down' }) { const pts = { down: '6 9 12 15 18 9', up: '6 15 12 9 18 15', right: '9 6 15 12 9 18' }[dir]; return {ico(size, )}; } function IconArrowRight({ size = 16, color }) { return {ico(size, <>)}; } function IconFile({ size = 16, color }) { return {ico(size, <>)}; } function IconLock({ size = 16, color }) { return {ico(size, <>)}; } // ─── Dashboard KPI card ────────────────────────────────────────────────────── function KPI({ label, value, unit, sub, info = true }) { return (
{label} {info && }
{value} {unit && {unit}}
{sub &&
{sub}
}
); } // ─── Threshold progress bar (like the screenshot) ────────────────────────── function SogliaBar({ value = 9.37, max = 50, label = 'Soglia importazioni CBAM', sub }) { const pct = Math.min(100, (value / max) * 100); const under = value < max; return (
{label}
{sub || (under ? 'Sotto la soglia — obblighi ridotti' : 'Sopra la soglia — calcolo CBAM attivo')}
{fmtN(value, 2).replace('.', ',')} / {max} t
); } // ─── Donut ────────────────────────────────────────────────────────────────── function Donut({ data, size = 200, thickness = 26, legend = true, title, subtitle }) { const total = data.reduce((s, d) => s + d.v, 0); const r = (size - thickness) / 2; const cx = size / 2, cy = size / 2; let acc = 0; const arcs = data.map((d) => { const start = acc / total * Math.PI * 2 - Math.PI / 2; acc += d.v; const end = acc / total * Math.PI * 2 - Math.PI / 2; const large = end - start > Math.PI ? 1 : 0; const x1 = cx + r * Math.cos(start), y1 = cy + r * Math.sin(start); const x2 = cx + r * Math.cos(end), y2 = cy + r * Math.sin(end); return { ...d, path: `M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}` }; }); return (
{title &&
{title}
} {subtitle &&
{subtitle}
} {arcs.map((a, i) => ( ))} {legend && (
{data.map(d => ( {d.label} ))}
)}
); } // ─── Bar chart (trimestri) ────────────────────────────────────────────────── function Bars({ data, height = 140, title, subtitle, color = 'var(--accent)' }) { const max = Math.max(...data.map(d => d.v)); return (
{title &&
{title}
} {subtitle &&
{subtitle}
}
{data.map((d, i) => (
{d.v}
{d.label}
))}
); } // ─── Declaration line (riga CBAM) ────────────────────────────────────────── function DeclLine({ cn, country = 'CN', kg, desc, eur, certs, mode = 'Valori default', highlight = false }) { return (
{cn} {country} {kg} kg
{desc}
Valori default — se disponi dei dati reali del produttore puoi ricalcolare
{eur} EUR
{certs} cert.
{mode}
); } // ─── Simulator inputs preview (compact) ───────────────────────────────────── function SimField({ label, value, placeholder, unit, hint, w, mono = true, cls }) { return (
{value || placeholder}
{hint &&
{hint}
}
); } Object.assign(window, { CBAMSidebar, KPI, SogliaBar, Donut, Bars, DeclLine, SimField, FormulaTable, IconGrid, IconDoc, IconCalc, IconUsers, IconGear, IconUpload, IconPlus, IconCheck, IconCheckCircle, IconInfo, IconAlert, IconChevron, IconArrowRight, IconFile, IconLock, IconEuro, }); // ─── Formula audit table (replica of "Dettaglio formula — salvato per audit") ── function FormulaTable({ compact = false, highlight = true } = {}) { const rows = [ ['Anno di riferimento', '2026', ''], ['Modalità calcolo', 'Valori default', ''], ['Quantità merce', '2,603', 't'], ['Emissioni specifiche prodotto', '3,485664', 'tCO₂/t'], ['Benchmark CBAM (base riduzione ETS)', '1,397', 'tCO₂/t'], ['Fattore di riduzione', '97.5%', ''], ['Riduzione ETS (benchmark × fattore)', '1,362075', 'tCO₂/t'], ['Carbon price pagata paese terzo', '0,00', 'EUR/tCO₂'], ['Emissioni specifiche nette', '2,123589', 'tCO₂/t'], ['Emissioni incorporate (nette × quantità)', '5,527702', 'tCO₂'], ['Certificati richiesti', '6', 'cert.'], ['Prezzo certificato', '75,36', 'EUR/cert.'], ]; return (
Dettaglio formula — salvato per audit
{rows.map(([l, v, u], i) => (
{l} {v} {u}
))}
Costo stimato 452,16 EUR
); }