/* Variations — 6 lower-fidelity exploratory artboards. These reuse data from data.jsx and the Icon/Badge primitives from ui.jsx but draw their own layouts to explore aesthetic + density tradeoffs. */ const { useState: useStateV } = React; // ───────────────────────────────────────────────────────────── // Shared mini primitives (variant-only, so they don't conflict) // ───────────────────────────────────────────────────────────── const VBox = ({ children, title, sub, right, padded = true, className = "" }) => (
{(title || right) && (
{title &&
{title}
} {sub &&
{sub}
}
{right &&
{right}
}
)}
{children}
); const Spark = ({ data, color = "var(--accent)", h = 28, w = 90, fill = true }) => { const lo = Math.min(...data), hi = Math.max(...data); const pts = data.map((v, i) => { const x = (i / (data.length - 1)) * w; const y = h - ((v - lo) / (hi - lo || 1)) * h; return `${x.toFixed(1)},${y.toFixed(1)}`; }); return ( {fill && } ); }; const VKpi = ({ label, value, delta, color = "var(--accent)" }) => (
{label}
{value}
{delta != null && (
= 0 ? "var(--green)" : "var(--red)" }}> {delta >= 0 ? "▲" : "▼"} {Math.abs(delta).toFixed(1)}%
)}
); // ═════════════════════════════════════════════════════════════════ // DASHBOARD VARIANT A — Bloomberg terminal density // ═════════════════════════════════════════════════════════════════ const DashA = () => { const sparkRev = REVENUE_MONTHLY.map(m => m.rev); const sparkP = REVENUE_MONTHLY.map(m => m.profit); const topMargs = [...PRODUCTS].sort((a,b)=>b.margin-a.margin).slice(0, 6); return (
{/* Ticker row */}
{[ ["REV 30J", "$142.7K", 6.4], ["MARGE", "$36.9K", 4.1], ["NETTE", "25.8%", 0.4], ["UNITÉS", "1 248", -2.1], ["ACOS", "18.2%", -0.8], ["BUFFER", "$58.4K", 12.0], ].map(([l, v, d]) => (
{l}
{v}
= 0 ? "var(--green)" : "var(--red)" }}> {d >= 0 ? "+" : ""}{d.toFixed(1)}%
))}
{/* Body — 3 cols */}
{/* Col 1 — perf */}
PERFORMANCE · 13M
$1.62M +18.4% YoY
moy mens · $124.6K   max · $162.4K
{/* Col 2 — top margins table */}
TOP MARGES · 30J
{topMargs.map((p) => ( ))}
ASIN PRODUIT BSR MARGE
{p.name.split(" ").slice(0, 4).join(" ")} {p.bsr.toLocaleString()} {p.margin.toFixed(1)}%
{/* Col 3 — alerts feed */}
FLUX · ALERTES
{ALERTS.slice(0, 5).map((a) => (
● {a.time}
{a.title.replace(/—.*/, "")}
))}
); }; // ═════════════════════════════════════════════════════════════════ // DASHBOARD VARIANT B — Editorial / executive briefing // ═════════════════════════════════════════════════════════════════ const DashB = () => { const sparkRev = REVENUE_MONTHLY.map(m => m.rev); return (
Bonjour Clarens.
Vendredi 10 mai 2026 — Mois en avance sur les objectifs Q2 de +6.4%.
{/* Hero number + chart */}
Revenu — 30 derniers jours
$142,700
↑ 6.4%
{[ ["Marge nette", "$36.9K", "var(--green)"], ["Unités", "1 248", "var(--text)"], ["Buffer trésor.","$58.4K", "var(--text)"], ].map(([l, v, c]) => (
{l}
{v}
))}
{/* Right column — narrative alerts */}
Ce que vous devez savoir
{ALERTS.slice(0, 4).map((a, i) => (
0{i+1}
{a.title}
{a.sub}
))}
); }; // ═════════════════════════════════════════════════════════════════ // DASHBOARD VARIANT C — Bento / glanceable // ═════════════════════════════════════════════════════════════════ const DashC = () => { const sparkRev = REVENUE_MONTHLY.map(m => m.rev); const sparkP = REVENUE_MONTHLY.map(m => m.profit); const topMargs = [...PRODUCTS].sort((a,b)=>b.margin-a.margin).slice(0, 3); const bento = (style) => ({ background: "var(--bg-2)", border: "1px solid var(--border-subtle)", borderRadius: 14, padding: 16, ...style, }); return (
{/* Hero KPI — spans 2 */}
Revenu 30 jours
$142.7K
↑ 6.4% vs période préc.
{/* Margin */}
Marge nette
$36.9K
↑ 4.1%
{/* Alertes badge */}
Alertes critiques
2
↓ 33% vs hier
{/* Top margins — wide */}
Top marges
{topMargs.map((p, i) => (
{i+1}
{p.name.split(" ").slice(0, 4).join(" ")}
{p.margin.toFixed(1)}%
))}
{/* Velocity ring */}
Velocité 7j
9.2 u/j
{/* Trésorerie */}
Trésorerie
$58.4K
↑ 12% buffer
); }; // ═════════════════════════════════════════════════════════════════ // RESEARCH VARIANT A — Spreadsheet density // ═════════════════════════════════════════════════════════════════ const ResA = () => { const rows = PRODUCTS.slice(0, 11); return (
Recherche produits
18 résultats · tri: marge ↓
{["status","cat","BSR<5k","marge>25%"].map(c => ( {c} ))}
{["ASIN", "Produit", "Cat.", "Prix", "Coût", "FBA", "BSR", "Stock", "Vel.", "Marge", "Status"].map((h, i) => ( ))} {rows.map((p, i) => ( ))}
= 3 ? "right" : "left", fontWeight: 500, letterSpacing: ".04em", textTransform: "uppercase", fontSize: 9.5, borderBottom: "1px solid var(--border-subtle)" }}> {h} {i === 9 && "↓"}
{p.name} {p.cat.split(" ")[0]} ${p.price.toFixed(2)} ${p.cost.toFixed(2)} ${p.fees.toFixed(2)} {p.bsr.toLocaleString()} {p.stock} {p.vel}/j {p.margin.toFixed(1)}% {p.status}
); }; // ═════════════════════════════════════════════════════════════════ // RESEARCH VARIANT B — Visual card grid (poster mode) // ═════════════════════════════════════════════════════════════════ const ResB = () => { const rows = PRODUCTS.slice(0, 6); // Pastel placeholder palette by category const palette = { "Maison & Cuisine": ["#d4c3a8", "#8a7355"], "Électronique": ["#a8c3d4", "#557a8a"], "Auto": ["#c2c2c2", "#555555"], "Animalerie": ["#d4b8a8", "#8a6855"], "Sport & Plein Air":["#a8d4b8", "#558a68"], "Bureau": ["#d4a8c3", "#8a5575"], "Voyage": ["#c3a8d4", "#75558a"], }; return (
Catalogue
Cartes Tableau Kanban
{rows.map((p) => { const [c1, c2] = palette[p.cat] || palette["Maison & Cuisine"]; return (
{p.asin}
BSR {p.bsr > 9999 ? (p.bsr/1000).toFixed(1) + "k" : p.bsr}
{p.name.split(" ").slice(0, 6).join(" ")}
{p.cat}
${p.price.toFixed(0)} prix
{p.margin.toFixed(0)}% marge
{p.stock} stock
); })}
); }; // ═════════════════════════════════════════════════════════════════ // RESEARCH VARIANT C — Pipeline scoring // ═════════════════════════════════════════════════════════════════ const ResC = () => { const lanes = [ { id: "evaluer", label: "À évaluer", tone: "var(--text-faint)" }, { id: "recherche", label: "En recherche",tone: "var(--accent)" }, { id: "valide", label: "Validé", tone: "var(--green)" }, { id: "commande", label: "En commande", tone: "var(--amber)" }, ]; const buckets = lanes.map((l) => ({ ...l, items: PRODUCTS.filter((p) => p.status === l.id).slice(0, 3), })); const score = (p) => Math.min(99, Math.round(p.margin * 1.6 + (10000 - p.bsr) / 200)); return (
Pipeline sourcing
Score = marge × BSR · drag pour avancer
{buckets.map((b) => (
{b.label} {b.items.length}
{b.items.length === 0 && (
—
)} {b.items.map((p) => { const s = score(p); return (
70 ? "var(--green)" : s > 50 ? "var(--amber)" : "var(--text-dim)" }}>{s}
SCORE
{p.name.split(" ").slice(0, 5).join(" ")}
BSR {p.bsr.toLocaleString()} · {p.margin.toFixed(0)}% marge
70 ? "var(--green)" : s > 50 ? "var(--amber)" : "var(--text-dim)" }}/>
); })}
))}
); }; window.DashA = DashA; window.DashB = DashB; window.DashC = DashC; window.ResA = ResA; window.ResB = ResB; window.ResC = ResC;