Initial commit

frontend/src/components/InteretsMensuelsChart.jsx

@@ -0,0 +1,542 @@
+import { useState, useRef, useEffect } from 'react';
+import { api } from '../api.js';
+import { useInteretsChart } from '../context/InteretsChartContext.jsx';
+
+const ICONS_BASE = '/api/icons-files/';
+
+const GRID  = 'rgba(255,255,255,0.055)';
+const LABEL = '#4a5568';
+const MOIS  = ['Jan','Fév','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Déc'];
+
+function fmtShort(v) {
+  if (!v || v === 0) return '';
+  const abs = Math.abs(v);
+  if (abs >= 1000) return (v/1000).toLocaleString('fr-FR',{maximumFractionDigits:1})+'k €';
+  return v.toLocaleString('fr-FR',{minimumFractionDigits:1,maximumFractionDigits:1})+' €';
+}
+function fmtTotal(v) {
+  return v.toLocaleString('fr-FR',{minimumFractionDigits:2,maximumFractionDigits:2})+' €';
+}
+function hexToRgba(hex, a) {
+  if (!hex||hex.length<7) return `rgba(79,168,232,${a})`;
+  const r=parseInt(hex.slice(1,3),16), g=parseInt(hex.slice(3,5),16), b=parseInt(hex.slice(5,7),16);
+  return `rgba(${r},${g},${b},${a})`;
+}
+
+export default function InteretsMensuelsChart() {
+  const {
+    annee, setAnnee, availableYears,
+    inclureInterets, setInclureInterets,
+    inclureCapital,  setInclureCapital,
+    inclureCashback, setInclureCashback,
+    selectedMonth, setSelectedMonth,
+    showActual, toggleActual,
+    showProjected, toggleProjected,
+    months, annualTotal,
+    // Mode global (TOUT)
+    modeGlobal, toggleModeGlobal,
+    selectedYear, setSelectedYear,
+    years, globalTotal,
+    netMode,
+    chartInterets, chartCapital, chartCashback,
+  } = useInteretsChart();
+
+  // État local uniquement
+  const [hovered,     setHovered]     = useState(null);
+  const [windowStart, setWindowStart] = useState(0);
+  const [libIcons,    setLibIcons]    = useState({});
+  const [isMobile,    setIsMobile]    = useState(() => typeof window !== 'undefined' && window.innerWidth < 768);
+  const [sheetOpen,   setSheetOpen]   = useState(false);
+  const initializedRef = useRef(false);
+
+  useEffect(() => {
+    api.get('/icons').then(rows => {
+      const m = {};
+      rows.forEach(r => { m[r.name] = r.filename; });
+      setLibIcons(m);
+    }).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    const onResize = () => setIsMobile(window.innerWidth < 768);
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  // Réinitialiser le hovered au changement de mode
+  useEffect(() => { setHovered(null); }, [modeGlobal]);
+
+  const visibleYears = availableYears.length ? availableYears.slice(windowStart, windowStart+3) : [annee];
+  const canPrev = windowStart > 0;
+  const canNext = windowStart + 3 < availableYears.length;
+
+  useEffect(() => {
+    if (!availableYears.length || initializedRef.current) return;
+    initializedRef.current = true;
+    const idx = availableYears.indexOf(annee);
+    const safe = idx >= 0 ? idx : availableYears.length - 1;
+    setWindowStart(Math.max(0, Math.min(availableYears.length - 3, safe - 1)));
+  }, [availableYears]);
+
+  /* ── Données affichées selon le mode ── */
+  const items     = modeGlobal ? years   : months;
+  const barCount  = items.length;
+
+  /* ── SVG layout ── */
+  const W = 900, H = 280;
+  const PAD = { top: 52, right: 20, bottom: 34, left: 70 };
+  const plotW = W - PAD.left - PAD.right;
+  const plotH = H - PAD.top  - PAD.bottom;
+  const gap   = modeGlobal ? 10 : 8;
+  const barW  = barCount > 0 ? Math.floor((plotW - gap * (barCount - 1)) / barCount) : 60;
+  const barBotY = PAD.top + plotH;
+
+  const filteredTotal = item =>
+    (showActual    ? item.capitalAmt + item.cashbackAmt + item.interetsAmt : 0) +
+    (showProjected ? item.capitalProjAmt + item.interetsProjAmt            : 0);
+
+  const filteredSum   = items.reduce((s, item) => s + filteredTotal(item), 0);
+  const rawMax = Math.max(...items.map(item => filteredTotal(item)), 0.01);
+  const niceStep = (() => {
+    const raw = rawMax/4, mag = Math.pow(10,Math.floor(Math.log10(raw))), n = raw/mag;
+    return (n<1.5?1:n<3.5?2:n<7.5?5:10)*mag;
+  })();
+  const niceMax = Math.ceil(rawMax/niceStep)*niceStep || niceStep;
+  const yScale  = v => PAD.top + plotH - (v/niceMax)*plotH;
+  const barX    = i => PAD.left + i*(barW+gap);
+  const yTicks  = Array.from({length: Math.round(niceMax/niceStep)+1}, (_,i) => ({v:i*niceStep, y:yScale(i*niceStep)}));
+
+  /* ── Tooltip ── */
+  const tooltipItem  = hovered !== null ? items[hovered] : null;
+  const tooltipBCX   = hovered !== null ? barX(hovered) + barW/2 : 0;
+  const tooltipBTY   = hovered !== null ? yScale(filteredTotal(items[hovered])) : 0;
+  const anchorRight  = tooltipBCX / W > 0.65;
+
+  const buildSegments = (item) => {
+    const actual = [];
+    if (showActual) {
+      if (inclureCapital  && item.capitalAmt   > 0) actual.push({color:chartCapital,  v:item.capitalAmt});
+      if (inclureCashback && item.cashbackAmt  > 0) actual.push({color:chartCashback, v:item.cashbackAmt});
+      if (inclureInterets && item.interetsAmt  > 0) actual.push({color:chartInterets, v:item.interetsAmt});
+    }
+    const projected = [];
+    if (showProjected) {
+      if (inclureCapital  && item.capitalProjAmt   > 0) projected.push({color:chartCapital,  v:item.capitalProjAmt});
+      if (inclureInterets && item.interetsProjAmt  > 0) projected.push({color:chartInterets, v:item.interetsProjAmt});
+    }
+    return { actual, projected };
+  };
+
+  const activeTypes = [
+    inclureCapital  && {key:'capital',  color:chartCapital,  label:'Capital'},
+    inclureCashback && {key:'cashback', color:chartCashback, label:'Cashback'},
+    inclureInterets && {key:'interets', color:chartInterets, label:netMode?'Intérêts nets':'Intérêts bruts'},
+  ].filter(Boolean);
+
+  const activeTypeCount = [inclureInterets, inclureCapital, inclureCashback].filter(Boolean).length;
+
+  const AppIcon = ({ name, size = 28, active = false }) => {
+    const filename = libIcons[name];
+    if (filename) return (
+      <img src={ICONS_BASE + filename} className="app-lib-icon" width={size} height={size}
+        aria-hidden="true"
+        style={{ opacity: active ? 1 : 0.35, display: 'block', transition: 'opacity .15s' }} />
+    );
+    return <span style={{ width: size, height: size, display: 'block',
+      borderRadius: 4, background: 'var(--text-muted)',
+      opacity: active ? 0.55 : 0.2, transition: 'opacity .15s' }} />;
+  };
+
+  /* ── Label en-tête ── */
+
+
+  return (
+    <div className="solde-chart-wrap" style={{padding:'24px 24px 16px', height:'100%', boxSizing:'border-box'}}>
+
+      {/* ── En-tête ── */}
+      <div className="solde-chart-header">
+        <div className="solde-chart-info">
+          <div style={{display:'flex',alignItems:'center',gap:5,flexWrap:'wrap',marginBottom:2}}>
+            {inclureInterets && (
+              <span style={{display:'inline-flex',alignItems:'center',gap:4,background:hexToRgba(chartInterets,0.12),borderRadius:5,padding:'3px 8px'}}>
+                <span style={{width:7,height:7,borderRadius:2,background:chartInterets,flexShrink:0}}/>
+                <span style={{fontSize:13,color:chartInterets,fontWeight:600}}>{netMode?'Intérêts nets':'Intérêts bruts'}</span>
+              </span>
+            )}
+            {inclureCapital && (
+              <span style={{display:'inline-flex',alignItems:'center',gap:4,background:hexToRgba(chartCapital,0.12),borderRadius:5,padding:'3px 8px'}}>
+                <span style={{width:7,height:7,borderRadius:2,background:chartCapital,flexShrink:0}}/>
+                <span style={{fontSize:13,color:chartCapital,fontWeight:600}}>Capital</span>
+              </span>
+            )}
+            {inclureCashback && (
+              <span style={{display:'inline-flex',alignItems:'center',gap:4,background:hexToRgba(chartCashback,0.12),borderRadius:5,padding:'3px 8px'}}>
+                <span style={{width:7,height:7,borderRadius:2,background:chartCashback,flexShrink:0}}/>
+                <span style={{fontSize:13,color:chartCashback,fontWeight:600}}>Cashback</span>
+              </span>
+            )}
+            {!inclureInterets && !inclureCapital && !inclureCashback && (
+              <span style={{fontSize:13,color:'var(--text-muted)'}}>—</span>
+            )}
+            <span style={{fontSize:13,color:'var(--text-muted)'}}>· {modeGlobal?'Toutes les années':annee}</span>
+          </div>
+          <div className="solde-chart-value">{fmtTotal(filteredSum)}</div>
+        </div>
+
+        {isMobile ? (
+          /* ── Mobile : bouton Filtres ── */
+          <button
+            onClick={()=>setSheetOpen(true)}
+            style={{
+              display:'flex', alignItems:'center', gap:7,
+              background:'var(--surface-2)', border:'1px solid var(--border)',
+              borderRadius:20, padding:'6px 14px', cursor:'pointer',
+              fontSize:'var(--fs-sm)', fontWeight:600, color:'var(--text)',
+            }}>
+            Filtres
+            {activeTypeCount > 0 && (
+              <span style={{
+                background:'var(--primary)', color:'#fff',
+                borderRadius:10, padding:'1px 7px',
+                fontSize:11, fontWeight:700,
+              }}>{activeTypeCount}</span>
+            )}
+          </button>
+        ) : (
+          /* ── Desktop : controls existants ── */
+          <div className="solde-chart-controls">
+            <button
+              title={inclureInterets?'Intérêts inclus — cliquer pour exclure':'Cliquer pour inclure les intérêts'}
+              onClick={()=>setInclureInterets(v=>!v)}
+              style={{background:inclureInterets?hexToRgba(chartInterets,0.13):'none', border:'1px solid '+(inclureInterets?chartInterets:'transparent'), borderRadius:8, padding:'4px 6px', cursor:'pointer', display:'flex', alignItems:'center', transition:'background .15s,border-color .15s', marginRight:2}}>
+              <AppIcon name="interets" active={inclureInterets} />
+            </button>
+            <button
+              title={inclureCapital?'Capital inclus — cliquer pour exclure':'Cliquer pour inclure le capital'}
+              onClick={()=>setInclureCapital(v=>!v)}
+              style={{background:inclureCapital?hexToRgba(chartCapital,0.13):'none', border:'1px solid '+(inclureCapital?chartCapital:'transparent'), borderRadius:8, padding:'4px 6px', cursor:'pointer', display:'flex', alignItems:'center', transition:'background .15s,border-color .15s', marginRight:2}}>
+              <AppIcon name="capital" active={inclureCapital} />
+            </button>
+            <button
+              title={inclureCashback?'Cashback inclus — cliquer pour exclure':'Cliquer pour inclure le cashback'}
+              onClick={()=>setInclureCashback(v=>!v)}
+              style={{background:inclureCashback?hexToRgba(chartCashback,0.13):'none', border:'1px solid '+(inclureCashback?chartCashback:'transparent'), borderRadius:8, padding:'4px 6px', cursor:'pointer', display:'flex', alignItems:'center', transition:'background .15s,border-color .15s', marginRight:2}}>
+              <AppIcon name="cashback" active={inclureCashback} />
+            </button>
+            <div className="solde-chart-ranges">
+              {!modeGlobal && <>
+                <button className="solde-range-btn" onClick={()=>setWindowStart(w=>Math.max(0,w-1))} disabled={!canPrev} style={{opacity:canPrev?1:0.3}}>‹</button>
+                {visibleYears.map(y=>(
+                  <button key={y} className={`solde-range-btn${annee===y?' active':''}`}
+                    onClick={()=>{ setAnnee(y); }}>
+                    {y}
+                  </button>
+                ))}
+                <button className="solde-range-btn" onClick={()=>setWindowStart(w=>Math.min(Math.max(0,availableYears.length-3),w+1))} disabled={!canNext} style={{opacity:canNext?1:0.3}}>›</button>
+              </>}
+              <button className={`solde-range-btn${modeGlobal?' active':''}`} onClick={()=>toggleModeGlobal()}>
+                TOUT
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ── SVG bar chart ── */}
+      <div style={{position:'relative', userSelect:'none'}}>
+        <svg
+          viewBox={`0 0 ${W} ${H}`}
+          style={{width:'100%', height:'auto', display:'block'}}
+          onMouseLeave={()=>setHovered(null)}
+        >
+          {yTicks.map(({v,y},i)=>(
+            <g key={i}>
+              <line x1={PAD.left} y1={y} x2={W-PAD.right} y2={y} stroke={GRID} strokeWidth="1" strokeDasharray={i===0?'':'3 5'}/>
+              <text x={PAD.left-10} y={y+4} textAnchor="end" fill={LABEL} fontSize="11" fontFamily="system-ui,sans-serif">{v===0?'':fmtShort(v)}</text>
+            </g>
+          ))}
+
+          {items.map((item,i)=>{
+            const x=barX(i), isHov=hovered===i;
+            // Sélection : mois en mode mensuel, année en mode global
+            const isSel = modeGlobal ? (selectedYear===item.y) : (selectedMonth===i);
+            const dimmed = modeGlobal
+              ? (selectedYear!==null && !isSel)
+              : (selectedMonth!==null && !isSel);
+            const {actual:aSegs,projected:pSegs}=buildSegments(item);
+            let cumH=0;
+            const aRects=aSegs.map(s=>{const h=(s.v/niceMax)*plotH; const r={color:s.color,x,y:barBotY-cumH-h,w:barW,h,isP:false}; cumH+=h; return r;});
+            const pRects=pSegs.map(s=>{const h=(s.v/niceMax)*plotH; const r={color:s.color,x,y:barBotY-cumH-h,w:barW,h,isP:true};  cumH+=h; return r;});
+            const all=[...aRects,...pRects];
+            const totalH=(filteredTotal(item)/niceMax)*plotH;
+            const topColor=all.length>0?all[all.length-1].color:LABEL;
+            const isCurrentMark = modeGlobal ? item.isCurrent : item.isCurrentMonth;
+            return (
+              <g key={i}
+                onMouseEnter={()=>setHovered(i)}
+                onClick={()=>{
+                  if (modeGlobal) {
+                    setSelectedYear(prev => prev===item.y ? null : item.y);
+                  } else {
+                    setSelectedMonth(prev => prev===i ? null : i);
+                  }
+                }}
+                style={{cursor:'pointer', opacity:dimmed?0.35:1, transition:'opacity .15s'}}
+              >
+                {all.map((r,ri)=>(
+                  <rect key={ri} x={r.x} y={r.y} width={r.w} height={r.h}
+                    fill={r.color}
+                    fillOpacity={r.isP?(isHov||isSel?0.48:0.28):(isHov||isSel?1.0:0.82)}
+                    rx={ri===all.length-1?2:0} ry={ri===all.length-1?2:0}
+                  />
+                ))}
+                {filteredTotal(item)>0&&(
+                  <text x={x+barW/2} y={barBotY-totalH-5} textAnchor="middle"
+                    fill={isHov||isSel?topColor:LABEL} fontSize="9" fontFamily="system-ui,sans-serif"
+                    fontWeight={isHov||isSel?'700':undefined}>
+                    {fmtShort(filteredTotal(item))}
+                  </text>
+                )}
+                <text x={x+barW/2} y={H-10} textAnchor="middle"
+                  fill={isCurrentMark||isSel?topColor:LABEL}
+                  fontSize="10" fontFamily="system-ui,sans-serif"
+                  fontWeight={isCurrentMark||isSel?'700':undefined}>
+                  {item.label}
+                </text>
+                {isSel&&<rect x={x+barW/2-7} y={H-3} width={14} height={3} rx={1.5} fill={topColor} fillOpacity={0.9}/>}
+              </g>
+            );
+          })}
+        </svg>
+
+        {/* Tooltip */}
+        {tooltipItem&&tooltipItem.total>0&&(
+          <div style={{position:'absolute', ...(anchorRight?{right:`calc(${(1-tooltipBCX/W)*100}% + 8px)`}:{left:`calc(${(tooltipBCX/W)*100}% + 8px)`}), top:`calc(${(tooltipBTY/H)*100}% - 8px)`, transform:'translateY(-100%)', pointerEvents:'none', zIndex:20}}>
+            <div className="sg-tooltip">
+              <span className="sg-tooltip-date">
+                {modeGlobal
+                  ? `${tooltipItem.label}${tooltipItem.isCurrent?' · année en cours':''}`
+                  : `${MOIS[tooltipItem.m-1]} ${annee}${tooltipItem.isCurrentMonth?' · mois en cours':''}`
+                }
+              </span>
+              {(()=>{
+                const ROW=({label,value,color=null,indent=false,muted=false})=>(
+                  <span style={{fontSize:'var(--fs-xs)',color:'var(--text-muted)',display:'flex',justifyContent:'space-between',gap:16,alignItems:'center'}}>
+                    {color&&<span style={{display:'inline-block',width:8,height:8,borderRadius:2,background:color,flexShrink:0}}/>}
+                    <span style={{paddingLeft:(!color&&indent)?8:0,flex:1}}>{label}</span>
+                    <span style={{color:muted?undefined:'var(--text)',fontWeight:muted?undefined:600}}>{value}</span>
+                  </span>
+                );
+                const hasMix=tooltipItem.actual>0&&tooltipItem.projected>0;
+                const multi=[inclureCapital,inclureCashback,inclureInterets].filter(Boolean).length>1;
+                return(<>
+                  {tooltipItem.actual>0&&<>
+                    <ROW label="Reçu" value={fmtTotal(tooltipItem.actual)}/>
+                    {multi&&inclureCapital &&tooltipItem.capitalAmt >0&&<ROW label="Capital"  value={fmtTotal(tooltipItem.capitalAmt)}  color={chartCapital}  indent muted/>}
+                    {multi&&inclureCashback&&tooltipItem.cashbackAmt>0&&<ROW label="Cashback" value={fmtTotal(tooltipItem.cashbackAmt)} color={chartCashback} indent muted/>}
+                    {multi&&inclureInterets&&tooltipItem.interetsAmt>0&&<ROW label={`Intérêts (${netMode?'nets':'bruts'})`} value={fmtTotal(tooltipItem.interetsAmt)} color={chartInterets} indent muted/>}
+                    {!multi&&inclureInterets&&<ROW label={`dont intérêts (${netMode?'nets':'bruts'})`} value={fmtTotal(tooltipItem.interetsAmt)} indent muted/>}
+                    {!multi&&inclureCapital &&<ROW label="dont capital"  value={fmtTotal(tooltipItem.capitalAmt)}  indent muted/>}
+                    {!multi&&inclureCashback&&<ROW label="dont cashback" value={fmtTotal(tooltipItem.cashbackAmt)} indent muted/>}
+                  </>}
+                  {tooltipItem.projected>0&&<>
+                    <ROW label="Projeté" value={fmtTotal(tooltipItem.projected)}/>
+                    {multi&&inclureCapital &&tooltipItem.capitalProjAmt >0&&<ROW label="Capital"  value={fmtTotal(tooltipItem.capitalProjAmt)}  color={chartCapital}  indent muted/>}
+                    {multi&&inclureInterets&&tooltipItem.interetsProjAmt>0&&<ROW label={`Intérêts (${netMode?'nets est.':'bruts'})`} value={fmtTotal(tooltipItem.interetsProjAmt)} color={chartInterets} indent muted/>}
+                    {!multi&&inclureInterets&&<ROW label={`dont intérêts (${netMode?'nets est.':'bruts'})`} value={fmtTotal(tooltipItem.interetsProjAmt)} indent muted/>}
+                    {!multi&&inclureCapital&&tooltipItem.capitalProjAmt>0&&<ROW label="dont capital" value={fmtTotal(tooltipItem.capitalProjAmt)} indent muted/>}
+                  </>}
+                  {hasMix&&<span className="sg-tooltip-value" style={{borderTop:'1px solid var(--border)',paddingTop:4,marginTop:2,display:'flex',justifyContent:'space-between'}}><span>Total</span><span>{fmtTotal(tooltipItem.total)}</span></span>}
+                  {!hasMix&&<span className="sg-tooltip-value" style={{display:'flex',justifyContent:'space-between'}}><span>Total</span><span>{fmtTotal(tooltipItem.total)}</span></span>}
+                </>);
+              })()}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ── Légende + sélecteur Reçu/Projeté ── */}
+      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginTop:8,gap:12,flexWrap:'wrap'}}>
+
+        {/* Sélecteur Reçu/Projeté — desktop uniquement (mobile → bottom sheet) */}
+        {!isMobile && (
+          <div style={{
+            display:'inline-flex',
+            background:'#f0f0f0',
+            borderRadius:8,
+            padding:3,
+            gap:2,
+            flexShrink:0,
+          }}>
+            {[
+              {key:'actual',    label:'Reçu',    active:showActual,    toggle:toggleActual},
+              {key:'projected', label:'Projeté', active:showProjected, toggle:toggleProjected},
+            ].map(btn=>(
+              <button key={btn.key} onClick={()=>btn.toggle()} style={{
+                border:'none', cursor:'pointer', padding:'5px 14px', borderRadius:6,
+                fontSize:'var(--fs-sm)',
+                fontWeight: btn.active ? 600 : 400,
+                background: btn.active ? '#ffffff' : 'transparent',
+                color:      btn.active ? '#1a1a2e' : '#9ca3af',
+                boxShadow:  btn.active ? '0 1px 3px rgba(0,0,0,0.13)' : 'none',
+                transition: 'all .15s', lineHeight: 1.4,
+              }}>{btn.label}</button>
+            ))}
+          </div>
+        )}
+
+        {/* Légende couleurs */}
+        <div style={{display:'flex',gap:12,alignItems:'center',flexWrap:'wrap',flex:1,justifyContent:'flex-end'}}>
+          {activeTypes.map(t=>(
+            <div key={t.key} style={{display:'flex',gap:8,alignItems:'center'}}>
+              {showActual&&(
+                <span style={{display:'flex',gap:4,alignItems:'center',fontSize:'var(--fs-xs)',color:'var(--text-muted)'}}>
+                  <span style={{width:10,height:10,borderRadius:2,background:t.color,opacity:0.82,flexShrink:0}}/>
+                  {t.label}{t.key==='interets'?' reçus':' reçu'}
+                </span>
+              )}
+              {showProjected&&(
+                <span style={{display:'flex',gap:4,alignItems:'center',fontSize:'var(--fs-xs)',color:'var(--text-muted)'}}>
+                  <span style={{width:10,height:10,borderRadius:2,background:t.color,opacity:0.28,flexShrink:0}}/>
+                  {t.label}{t.key==='interets'?' projetés':' projeté'}
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* ── Bottom sheet mobile ── */}
+      {isMobile && (
+        <>
+          {/* Overlay */}
+          <div
+            onClick={()=>setSheetOpen(false)}
+            style={{
+              position:'fixed', inset:0, zIndex:200,
+              background:'rgba(0,0,0,0.45)',
+              opacity: sheetOpen ? 1 : 0,
+              pointerEvents: sheetOpen ? 'auto' : 'none',
+              transition:'opacity .25s',
+            }}
+          />
+          {/* Sheet */}
+          <div style={{
+            position:'fixed', bottom:0, left:0, right:0, zIndex:201,
+            background:'var(--surface)',
+            borderRadius:'20px 20px 0 0',
+            borderTop:'1px solid var(--border)',
+            padding:'12px 20px 32px',
+            transform: sheetOpen ? 'translateY(0)' : 'translateY(100%)',
+            transition:'transform .3s cubic-bezier(.32,.72,0,1)',
+            maxHeight:'85vh', overflowY:'auto',
+          }}>
+            {/* Handle */}
+            <div style={{width:36,height:4,background:'var(--border)',borderRadius:2,margin:'0 auto 20px'}}/>
+
+            {/* Types */}
+            <div style={{fontSize:'var(--fs-xs)',color:'var(--text-muted)',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:12}}>
+              Types
+            </div>
+            {[
+              {key:'interets', label:netMode?'Intérêts nets':'Intérêts bruts', color:chartInterets, active:inclureInterets, set:setInclureInterets},
+              {key:'capital',  label:'Capital',  color:chartCapital,  active:inclureCapital,  set:setInclureCapital},
+              {key:'cashback', label:'Cashback', color:chartCashback, active:inclureCashback, set:setInclureCashback},
+            ].map((t,i,arr)=>(
+              <div key={t.key} onClick={()=>t.set(v=>!v)} style={{
+                display:'flex', alignItems:'center', justifyContent:'space-between',
+                padding:'12px 0',
+                borderBottom: i<arr.length-1 ? '1px solid var(--border)' : 'none',
+                cursor:'pointer',
+              }}>
+                <div style={{display:'flex',alignItems:'center',gap:10}}>
+                  <span style={{width:10,height:10,borderRadius:2,background:t.color,flexShrink:0}}/>
+                  <span style={{fontSize:'var(--fs-sm)',color:'var(--text)',fontWeight:500}}>{t.label}</span>
+                </div>
+                {/* Toggle */}
+                <div style={{
+                  width:44, height:24, borderRadius:12, flexShrink:0,
+                  background: t.active ? t.color : 'var(--border)',
+                  position:'relative', transition:'background .2s',
+                }}>
+                  <div style={{
+                    width:20, height:20, borderRadius:10, background:'#fff',
+                    position:'absolute', top:2,
+                    left: t.active ? 22 : 2,
+                    transition:'left .2s',
+                    boxShadow:'0 1px 3px rgba(0,0,0,0.2)',
+                  }}/>
+                </div>
+              </div>
+            ))}
+
+            {/* Période */}
+            <div style={{fontSize:'var(--fs-xs)',color:'var(--text-muted)',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.06em',margin:'20px 0 12px'}}>
+              Période
+            </div>
+            <div style={{display:'flex',gap:8,flexWrap:'wrap',alignItems:'center'}}>
+              {availableYears.map(y=>(
+                <button key={y}
+                  onClick={()=>{ setAnnee(y); if(modeGlobal) toggleModeGlobal(); }}
+                  style={{
+                    padding:'7px 16px', borderRadius:8, fontSize:'var(--fs-sm)',
+                    fontWeight: !modeGlobal && annee===y ? 700 : 500,
+                    background: !modeGlobal && annee===y ? 'var(--primary)' : 'var(--surface-2)',
+                    color:      !modeGlobal && annee===y ? '#fff' : 'var(--text)',
+                    border: !modeGlobal && annee===y ? '1px solid var(--primary)' : '1px solid var(--border)',
+                    cursor:'pointer',
+                  }}>
+                  {y}
+                </button>
+              ))}
+              <button
+                onClick={()=>{ if(!modeGlobal) toggleModeGlobal(); }}
+                style={{
+                  padding:'7px 16px', borderRadius:8, fontSize:'var(--fs-sm)',
+                  fontWeight: modeGlobal ? 700 : 500,
+                  background: modeGlobal ? 'var(--primary)' : 'var(--surface-2)',
+                  color:      modeGlobal ? '#fff' : 'var(--text)',
+                  border: modeGlobal ? '1px solid var(--primary)' : '1px solid var(--border)',
+                  cursor:'pointer',
+                }}>
+                Tout
+              </button>
+            </div>
+
+            {/* Affichage */}
+            <div style={{fontSize:'var(--fs-xs)',color:'var(--text-muted)',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.06em',margin:'20px 0 12px'}}>
+              Affichage
+            </div>
+            {[
+              {key:'actual',    label:'Reçu',    active:showActual,    toggle:toggleActual},
+              {key:'projected', label:'Projeté', active:showProjected, toggle:toggleProjected},
+            ].map((btn,i,arr)=>(
+              <div key={btn.key} onClick={()=>btn.toggle()} style={{
+                display:'flex', alignItems:'center', justifyContent:'space-between',
+                padding:'12px 0',
+                borderBottom: i<arr.length-1 ? '1px solid var(--border)' : 'none',
+                cursor:'pointer',
+              }}>
+                <span style={{fontSize:'var(--fs-sm)',color:'var(--text)',fontWeight:500}}>{btn.label}</span>
+                <div style={{
+                  width:44, height:24, borderRadius:12, flexShrink:0,
+                  background: btn.active ? 'var(--primary)' : 'var(--border)',
+                  position:'relative', transition:'background .2s',
+                }}>
+                  <div style={{
+                    width:20, height:20, borderRadius:10, background:'#fff',
+                    position:'absolute', top:2,
+                    left: btn.active ? 22 : 2,
+                    transition:'left .2s',
+                    boxShadow:'0 1px 3px rgba(0,0,0,0.2)',
+                  }}/>
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+
+    </div>
+  );
+}