/* ------------------------------------------------------------------ *
* Composants UI réutilisables
* ------------------------------------------------------------------ */
const { useState, useMemo, useEffect, useRef, useCallback } = React;
function Segmented({ options, value, onChange, dense = false }) {
return (
{options.map((o) => {
const active = o.id === value;
return (
);
})}
);
}
function SelectCard({ title, sub, hint, active, onClick, icon }) {
return (
);
}
function KpiCard({ label, value, sub, tone = 'default', icon, helper }) {
const tones = {
default: 'bg-white border-ink-200',
brand: 'bg-gradient-to-br from-brand-500 to-brand-700 text-white border-transparent',
success: 'bg-white border-emerald-200',
warn: 'bg-white border-amber-200',
danger: 'bg-white border-rose-200'
};
const valueTones = {
default: 'text-ink-900',
brand: 'text-white',
success: 'text-emerald-700',
warn: 'text-amber-700',
danger: 'text-rose-700'
};
const subTones = {
default: 'text-ink-500',
brand: 'text-brand-100',
success: 'text-emerald-600',
warn: 'text-amber-600',
danger: 'text-rose-600'
};
return (
{value}
{sub &&
{sub}
}
{helper &&
{helper}
}
);
}
function NumberInput({ value, onChange, min = 0, max, step = 1, suffix, prefix, warn, className, ariaLabel }) {
const [local, setLocal] = useState(String(value ?? ''));
useEffect(() => { setLocal(String(value ?? '')); }, [value]);
return (
{prefix && {prefix}}
{
setLocal(e.target.value);
const n = parseFloat(e.target.value);
onChange(isFinite(n) ? n : 0);
}}
onBlur={() => setLocal(String(value ?? ''))}
/>
{suffix && {suffix}}
);
}
const Icon = {
chart: (p = {}) => ,
savings: (p = {}) => ,
clock: (p = {}) => ,
flow: (p = {}) => ,
euro: (p = {}) => ,
chair: (p = {}) => ,
spark: (p = {}) => ,
doc: (p = {}) => ,
warn: (p = {}) => ,
check: (p = {}) => ,
printer: (p = {}) => ,
user: (p = {}) => ,
copy: (p = {}) => ,
close: (p = {}) => ,
plus: (p = {}) => ,
minus: (p = {}) => ,
info: (p = {}) => ,
camera: (p = {}) => ,
heart: (p = {}) =>
};
function useDarkMode() {
const [dark, setDark] = useState(() => document.documentElement.classList.contains('dark'));
useEffect(() => {
const obs = new MutationObserver(() => {
setDark(document.documentElement.classList.contains('dark'));
});
obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
return () => obs.disconnect();
}, []);
function toggle() {
const next = !dark;
document.documentElement.classList.toggle('dark', next);
localStorage.setItem('simuprint-theme', next ? 'dark' : 'light');
}
return [dark, toggle];
}
function DarkModeToggle() {
const [dark, toggle] = useDarkMode();
return (
);
}
function Wordmark() {
const { t } = useLang();
const isLab = window.location.pathname.includes('/labo');
const [leaving, setLeaving] = useState(false);
/* XOR: true = currently showing lab (green) state */
const showLab = isLab !== leaving;
const purpleFrom = '#5B3DF5', purpleTo = '#3B22B0';
const greenFrom = '#22C55E', greenTo = '#15803D';
function handleClick() {
setLeaving(true);
setTimeout(() => { window.location.href = isLab ? '/' : '/labo/'; }, 520);
}
return (
);
}
function printPdf() {
const isIOS = /iP(ad|hone|od)/.test(navigator.userAgent) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
if (isIOS) {
const msgs = {
fr: 'Sur iOS, appuyez sur le bouton Partager ↗ de Safari puis « Imprimer ».',
en: "On iOS, tap Safari's Share ↗ button then \"Print\".",
es: 'En iOS, toca Compartir ↗ en Safari y luego "Imprimir".',
it: 'Su iOS, tocca Condividi ↗ in Safari poi "Stampa".',
de: 'Auf iOS, tippe auf Teilen ↗ in Safari, dann "Drucken".',
};
const lang = localStorage.getItem('simuprint-lang') || 'fr';
const toastEl = document.createElement('div');
Object.assign(toastEl.style, {
position: 'fixed', bottom: '24px', left: '50%', transform: 'translateX(-50%)',
background: '#1A1B36', color: '#EEF0F8', borderRadius: '14px',
padding: '14px 20px', fontSize: '13px', lineHeight: '1.5',
zIndex: '9999', boxShadow: '0 8px 32px rgba(0,0,0,.28)',
textAlign: 'center', width: 'min(320px, calc(100vw - 32px))',
});
toastEl.textContent = msgs[lang] || msgs.fr;
document.body.appendChild(toastEl);
setTimeout(() => {
toastEl.style.transition = 'opacity .3s';
toastEl.style.opacity = '0';
setTimeout(() => toastEl.remove(), 300);
}, 6000);
return;
}
const wasDark = document.documentElement.classList.contains('dark');
if (wasDark) document.documentElement.classList.remove('dark');
function restore() {
if (wasDark) document.documentElement.classList.add('dark');
window.removeEventListener('afterprint', restore);
}
if (wasDark) window.addEventListener('afterprint', restore);
window.print();
if (wasDark) setTimeout(restore, 1000);
}
Object.assign(window, {
Segmented, SelectCard, KpiCard, NumberInput, Icon, Wordmark,
useDarkMode, DarkModeToggle, printPdf,
});