---
name: tableau-remboursements-detail
description: "Évolutions du tableau 'Remboursements enregistrés' dans InvestissementDetail — colonnes fusionnées, tooltip, CSS, clic ligne, retour dashboard"
metadata:
  node_type: memory
  type: project
  originSessionId: cad3a9c0-cf8e-4204-ac6e-e22c03811abe
---

Tableau "Remboursements enregistrés" dans InvestissementDetail.jsx — évolutions UX.

**Colonnes actuelles (sans fiscalité locale) :**
Date | Capital | Intérêts (Brut/Net) | Cashback | Imposition | Montant versé | ⋮

**Colonne "Imposition" (fusion PS + IR) :**
- Remplace les deux colonnes "Prélèv. sociaux" et "Impôt revenu"
- Affiche la somme `prelev_sociaux + prelev_forfaitaire`
- Titre suffixé "— indicatif" si `inv.fiscalite_override === 'exonere' || tblPlat.fiscalite !== 'flat_tax'`
- Tooltip CSS instantané (classe `.cell-tooltip`) : "Prélèvements sociaux : x,xx €\nImpôt sur le revenu : x,xx €"

**Tooltip CSS (styles.css) :**
- Classe `.cell-tooltip` avec `::after { content: attr(data-tooltip); white-space: pre-line; opacity: 0 → 1 au hover }`
- Background : `var(--surface)` (pas de couleur hardcodée)
- Pas de transition = apparition instantanée

**CSS tableau — classe `remb-table` :**
- `table-layout: fixed; width: 100%` → largeurs égales entre colonnes numériques
- `text-align: center` sur toutes les cellules
- Première colonne (Date) : `text-align: left; width: 92px`
- Dernière colonne (⋮) : `width: 36px`

**Commentaire sous le titre de section :**
- Même formulation que dans la modale : isIndicatif ou flat tax
- Calculé via IIFE avec `_plat` et `_isIndicatif` locaux (pas de state dédié)

**Clic sur ligne → modale modification :**
- `onClick={() => openEditRemb(r)}` sur le `<tr>`
- `cursor: pointer` sur le `<tr>`
- Bouton ⋮ stoppe la propagation : `e.stopPropagation()` avant `openRowMenu`

**Ouverture depuis le tableau de bord (remb-date + from=dashboard dans l'URL) :**
- Le useEffect qui traite `remb-date` attend que `pfuRates.length > 0` (guard + dépendance) pour calculer les prélèvements correctement
- `fromRef.current` est capturé EN PREMIER (avant l'ouverture de la modale) et les params URL nettoyés immédiatement
- Après save (`submitRemb`) ou suppression (`deleteRemb`) : `closeRembModal` lit `fromRef.current` et navigue vers `/` si `'dashboard'`
- Bug corrigé : sans le guard pfuRates, les prélèvements étaient 0 car les taux n'étaient pas encore chargés

**Why:** Meilleure lisibilité du tableau, cohérence avec les modales, accès rapide à la modification, UX fluide depuis le dashboard.

**How to apply:** Si un autre tableau similaire est créé, reproduire `.remb-table`, `.cell-tooltip`, et le pattern clic ligne + stopPropagation sur le bouton ⋮. Pour tout flux "ouvrir modale depuis URL param", capturer `fromRef` avant d'ouvrir la modale et attendre que les données de référence (pfuRates) soient chargées.
