);
}
// — Strategic AI alert banner ————————————————————————————————————————
function StrategicAlert() {
const [dismissed, setDismissed] = React.useState(false);
if (dismissed) return null;
return (
Alerte IABaisse de marge — Segment Premium
La marge opérationnelle sur le segment Premium (Casablanca) a chuté de 4,2% par rapport au M-1. Risque projeté de -12% sur le Q3 si aucune action n'est prise. Recommandation IA : revoir le pricing du caftan haut de gamme et auditer les coûts logistiques de Tanger.
);
}
// — KPI card with mini bar trend ————————————————————————————————————————
function KpiCardPro({ label, value, unit, delta, deltaPositive=true, sub, bars, color, alert }) {
const max = Math.max(...bars);
return (
{label}
{value}
{unit && {unit}}
{delta}
{sub}
{/* sparkbars */}
{bars.map((b,i)=>(
))}
);
}
// — MRR projection chart with target line and projection band ————————————
function MrrProjectionChart() {
const W = 720, H = 220, PAD_L = 36, PAD_R = 14, PAD_T = 14, PAD_B = 28;
const months = ['Janv','Févr','Mars','Avril','Mai','Juin','Juil','Août','Sept','Oct','Nov','Déc'];
const actualEnd = 8; // through Sept
const actual = [0.62, 0.78, 1.18, 1.04, 1.28, 1.42, 1.58, 1.74, 1.92];
const target = [0.70, 0.85, 1.00, 1.15, 1.30, 1.45, 1.60, 1.75, 1.90, 2.05, 2.20, 2.35];
const projected = [1.92, 2.04, 2.14, 2.24];
const yMax = 3.0;
const innerW = W - PAD_L - PAD_R, innerH = H - PAD_T - PAD_B;
const x = i => PAD_L + (i/(months.length-1))*innerW;
const y = v => PAD_T + (1 - v/yMax) * innerH;
const actualPath = actual.map((v,i)=> `${i?'L':'M'}${x(i)},${y(v)}`).join(' ');
const targetPath = target.map((v,i)=> `${i?'L':'M'}${x(i)},${y(v)}`).join(' ');
const projPath = projected.map((v,i)=> `${i?'L':'M'}${x(actualEnd+i)},${y(v)}`).join(' ');
const fillPath = `${actualPath} L${x(actual.length-1)},${y(0)} L${x(0)},${y(0)} Z`;
return (
);
}
// — Scenarios chart (3 lines from cur point) ———————————————————————————
function ScenariosChart() {
const W = 360, H = 160, PAD_L = 8, PAD_R = 8, PAD_T = 10, PAD_B = 22;
const labels = ['Q1','Q2','Q3*','Q4','Q1\u201927','Q2\u201927','Q3\u201927'];
const innerW = W-PAD_L-PAD_R, innerH = H-PAD_T-PAD_B;
const yMax = 2.4;
const x = i => PAD_L + (i/(labels.length-1))*innerW;
const y = v => PAD_T + (1 - v/yMax)*innerH;
const histX = 2;
const hist = SCENARIOS.hist;
const lineFor = (vals, startIdx=histX) => vals.map((v,i)=>`${i?'L':'M'}${x(startIdx+i)},${y(v)}`).join(' ');
return (
);
}
// — Heatmap grid ————————————————————————————————————————————————————————
function Heatmap({ data }) {
const flat = data.values.flat();
const min = Math.min(...flat), max = Math.max(...flat);
// green→amber→red palette but inverted (high=green, low=red) per screenshot
const colorFor = (v) => {
const t = (v - min) / (max - min); // 0..1
if (t > 0.66) {
const k = (t - 0.66) / 0.34;
// mid-green to deep green
return `rgba(25,199,129,${0.18 + k*0.55})`;
}
if (t > 0.33) {
const k = (t - 0.33) / 0.33;
// amber to mid green
return k > 0.5 ? `rgba(25,199,129,${0.18 + (k-0.5)*0.4})` : `rgba(255,193,7,${0.20 + k*0.30})`;
}
// red to amber
return `rgba(248,40,90,${0.34 - t*0.6})`;
};
const textFor = (v) => {
const t = (v - min) / (max - min);
if (t > 0.66) return '#0E6B45';
if (t > 0.33) return 'var(--app-text)';
return '#B0153B';
};
return (