---
name: project_depots_mensuel_table
description: "Composant DepotsMensuelTable.jsx — onglet Vision mensuelle dans DepotsRetraits, dépôts/retraits par plateforme par mois avec filtres icônes"
metadata:
  node_type: memory
  type: project
  originSessionId: b72654be-0979-4e85-a9d7-0fd12a61d170
---

Nouvel onglet **"Vision mensuelle"** ajouté dans `DepotsRetraits.jsx` entre les onglets "Plateformes" et "Mouvements".

**Composant** : `frontend/src/components/DepotsMensuelTable.jsx`

**Calcul 100% frontend** — props : `allRows` (dépôts/retraits), `plats`.

**Filtres icônes** : deux boutons dans le header (pattern identique à TableauInteretsPlateforme) :
- Icône `"depot"` (default ON, couleur `#22c55e`) : inclure les dépôts
- Icône `"retrait"` (default OFF, couleur `#ef4444`) : inclure les retraits
- Quand les deux sont actifs → valeur = dépôts − retraits (net), valeurs négatives en rouge
- Quand un seul actif → somme positive du type sélectionné

**Icônes** : chargées depuis `/api/icons` → `libIcons = { name: filename }` → `<img src="/api/icons-files/{filename}">`. Composant `AppIcon` interne avec fallback span. Noms dans la bibliothèque : `"depot"` et `"retrait"`.

**Agrégation** : par `plateforme_id`, colonnes `depots[]` et `retraits[]` séparées (12 mois), calculées depuis `r.type === 'depot'` / `r.type === 'retrait'`.

**Structure du tableau** : classes `tip-table` réutilisées. Colonnes : Plateforme | 12 mois | Total | Moy. mensuelle.

**Sélecteur d'années** : boutons ‹ › + années + bouton TOUT = `setAnnee(currentYear)`.

**Multi-détenteur** : `detenteur_nom` affiché si `new Set(byPlat.map(p => p.investisseur_id)).size > 1` — cohérent avec [[feedback_multi_detenteur]].

**hexToRgba** : helper local pour teinter les boutons actifs.

**Why:** Demande d'Olivier pour visualiser la répartition mensuelle des flux de trésorerie (dépôts/retraits) par plateforme.
**How to apply:** Props à passer depuis DepotsRetraits.jsx : `allRows`, `plats`. Onglet tab `activeTab === 'vision-mensuelle'`.
