---
name: project_plateformes_page
description: "Page /plateformes — vue par plateforme avec onglets Remboursements, Dépôts/Retraits, Capital investi, Investissements"
metadata: 
  node_type: memory
  type: project
  originSessionId: b8b23026-381b-4ec2-b150-02080d5f4720
---

Page `frontend/src/pages/Plateformes.jsx` créée pour une vision centrée plateforme.

## Structure générale

- Sélecteur Plateforme (carte violette), Sélecteur Détenteur (carte teal, visible si multi-détenteur), Sélecteur Année
- 5 KPIs avec TrendBadge (Capital encours, À risque, Investissements total, Capital remboursé, Intérêts brut/net)
- 4 onglets : **Remboursements** | **Dépôts / Retraits** | **Capital investi** | **Investissements**

## Onglet Remboursements

- Tableau mensuel par investissement (tip-table), même sélecteurs que `TableauInteretsPlateforme` :
  - 3 boutons icônes (Intérêts/Capital/Cashback) depuis `/api/icons`
  - Sélecteur années `‹ 2024 2025 ›` + TOUT
  - Toggle Détaillé/Consolidé (localStorage `cl_remb_plat_detaille`)
  - Boutons Reçu / Projeté
- Données réelles depuis `allRembs`, projections depuis `GET /api/simul/all` (nouvel endpoint)
- `buildCellValue` : mois futur → projection seule ; mois courant → réel si dispo, sinon projection (jamais les deux) ; mois passé → réel seul
- Grisage `.tip-td-closed` : avant `firstNonNull` de la ligne, après `lastRembDate` pour statut `rembourse`

## Onglet Dépôts / Retraits

- Tableau mensuel Dépôts / Retraits / Corrections / Net par mois
- Filtre plateforme multi-sélect (custom dropdown, `plateforme_ids[]`) dans DepotsRetraits.jsx
- Clic cellule → navigation `/depots-retraits?tab=mouvements&type=...&plat_ids=...`
- Toggle Détaillé/Consolidé (localStorage `cl_dr_plat_detaille`) groupant par détenteur
- Sélecteur années partagé avec les autres onglets
- Grisage `.tip-td-closed` : avant date souscription, après dernier remb (prêts remboursés)

## Onglet Capital investi

- Composant `InvMensuelTable.jsx` : capital encours par investissement par mois
- Grisage : avant `date_souscription` de l'investissement, après dernier remboursement pour statut `rembourse`

## Backend — nouvel endpoint

`GET /api/simul/all` dans `backend/src/routes/simul.js`, inséré AVANT `router.use(requireInvestisseur)` :
- Supporte `scope=all` → filtre par `user_id`
- Retourne `simul_remboursements` avec `plateforme_id` et `investisseur_id` joints

## CSS

`.tip-td-closed` : `background: var(--surface-2)` avec override pour `.tip-col-current` (fond violet prioritaire).

## Comportements UX

- Changer de plateforme conserve l'onglet actif (pas de reset sur `setActiveTab`)
- `rembShowProjected && proj && real === 0` : la projection n'est ajoutée au mois courant que si aucun réel n'existe (anti-doublon). Même correction dans `TableauInteretsPlateforme.jsx`

## Corrections et évolutions (2026-06-18)

### CSS en-têtes tableaux
- `.tip-th-name` (colonne PLATEFORME/Investissement) passe au dégradé violet comme `.tip-th-year` — texte blanc, border `rgba(255,255,255,.2)`
- `.tip-td-avg` reçoit le même fond subtil que `.tip-td-total`
- Colonne STATUT dans l'onglet Remboursements et dans `InvMensuelTable` : `<span className={`badge ${inv.statut}`}>` (plus d'inline styles) ; `<th>` STATUT utilise `tip-th-name`
- `STATUT_BG` / `STATUT_FG` supprimés de `InvMensuelTable.jsx`
- Titres "Mouvements de trésorerie" et "Capital investi par investissement" → `<h3>` avec span muted pour l'année (aligné sur "Investissements")

### UX / navigation
- Onglet par défaut : `'remboursements'` (était `'depots-retraits'`)
- Bouton Agrandir/Réduire ajouté sur les onglets Dépôts/Retraits et Investissements (les deux onglets Remboursements et Capital investi l'avaient déjà)
- Onglet Investissements : pagination via `usePagination` (clé `cl_pagesize_plat_inv`), tri par date_souscription dans `sortedChartRows`

### Persistance des critères (localStorage)
- `cl_plat_selected` → plateforme sélectionnée (préférée à `platOptions[0]` à l'init)
- `cl_plat_tab` → onglet actif
- `cl_plat_year` → année sélectionnée
- `cl_plat_detenteur` → détenteur sélectionné (restauré sur la même plateforme ; remis à `all` si l'utilisateur change de plateforme, via `isFirstPlatChange` ref qui skip la restauration initiale)

### Onglet Investissements — colonnes tableau (2026-06-18)
- En-tête corrigé : "Émetteur" → "Détenteur" dans le `<th>`
- "Date" → "Date de souscription"
- Colonne "Date cible" ajoutée après "Date de souscription" (thead + tbody alignés, 8 colonnes)
- Thead final : Projet | Détenteur | Date de souscription | Date cible | Montant | Capital restant | Intérêts (Brut/Net) | Statut

**Why:** Page demandée pour avoir une vision centrée plateforme en complément des vues globales.
**How to apply:** Plateformes.jsx fait ~1564 lignes — toujours utiliser Python pour les éditions, jamais Edit/Write direct (risque de troncature).
