Ajout d'un menu

frontend/src/pages/InvestissementDetail.jsx

@@ -158,6 +158,7 @@ export default function InvestissementDetail() {
   const [cardMenu, setCardMenu] = useState(null);
   const [fiscaliteOverrideConfirm, setFiscaliteOverrideConfirm] = useState(false);
   const [rembMenu, setRembMenu] = useState(null);
+  const [showImpositionDetail, setShowImpositionDetail] = useState(false);
   const [reinvMenu, setReinvMenu] = useState(null);
   const [simulMenu, setSimulMenu] = useState(null);
   const [editDpeModal, setEditDpeModal] = useState(false);
@@ -1265,6 +1266,8 @@ export default function InvestissementDetail() {
                 {showLocalCols && <th className="num">Taxe Locale</th>}
                 <th className="num">Intérêts ({netMode ? 'Net' : 'Brut'})</th>
                 <th className="num">Cashback</th>
+                {showImpositionDetail && <th className="num">Impôt sur le revenu</th>}
+                {showImpositionDetail && <th className="num">Prélèvements sociaux</th>}
                 <th className="num">Imposition{tblIsIndicatif ? ' — indicatif' : ''}</th>
                 <th className="num">Montant versé</th>
                 <th style={{ width: 36 }}></th>
@@ -1295,6 +1298,8 @@ export default function InvestissementDetail() {
                     {fmtEUR(netMode ? r.interets_nets : r.interets_bruts)}
                   </td>
                   <td className="num">{fmtEUR(r.cashback)}</td>
+                  {showImpositionDetail && <td className="num">{fmtEUR(r.prelev_forfaitaire)}</td>}
+                  {showImpositionDetail && <td className="num">{fmtEUR(r.prelev_sociaux)}</td>}
                   <td className="num cell-tooltip"
                     data-tooltip={`Prélèvements sociaux : ${fmtEUR(r.prelev_sociaux)}\nImpôt sur le revenu : ${fmtEUR(r.prelev_forfaitaire)}`}>
                     {fmtEUR((r.prelev_sociaux || 0) + (r.prelev_forfaitaire || 0))}
@@ -1333,6 +1338,8 @@ export default function InvestissementDetail() {
                     )}
                     <td className="num">{fmtEUR(netMode ? tot.interets_nets : tot.interets_bruts)}</td>
                     <td className="num">{fmtEUR(tot.cashback)}</td>
+                    {showImpositionDetail && <td className="num">{fmtEUR(tot.prelev_forfaitaire)}</td>}
+                    {showImpositionDetail && <td className="num">{fmtEUR(tot.prelev_sociaux)}</td>}
                     <td className="num cell-tooltip"
                       data-tooltip={`Prélèvements sociaux : ${fmtEUR(tot.prelev_sociaux)}\nImpôt sur le revenu : ${fmtEUR(tot.prelev_forfaitaire)}`}>
                       {fmtEUR(tot.prelev_sociaux + tot.prelev_forfaitaire)}
@@ -2573,6 +2580,15 @@ export default function InvestissementDetail() {
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
               Ajouter un remboursement
             </button>
+            <div style={{ height: 1, background: 'var(--border)', margin: '4px 0' }} />
+            <button
+              style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '8px 14px', background: 'none', border: 'none', cursor: 'pointer', fontSize: 'var(--fs-sm)', color: 'var(--text)', textAlign: 'left' }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'}
+              onMouseLeave={e => e.currentTarget.style.background = 'none'}
+              onClick={() => { setRembMenu(null); setShowImpositionDetail(v => !v); }}>
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z"/><circle cx="12" cy="12" r="3"/></svg>
+              {showImpositionDetail ? "Masquer le détail de l'imposition" : "Détails de l'imposition"}
+            </button>
             {remb.length > 0 && (
               <>
                 <div style={{ height: 1, background: 'var(--border)', margin: '4px 0' }} />