---
name: project_pagination
description: Pagination côté client sur les 3 pages de listes — hook usePagination + composant Pagination
metadata: 
  node_type: memory
  type: project
  originSessionId: f2be746c-47f1-426a-ae80-3c71059fa38c
---

Pagination implémentée sur Investissements, DepotsRetraits et Remboursements.

- Hook `src/hooks/usePagination.js` : tailles 15/25/50/100, défaut 15, localStorage par page, reset page 1 sur changement de filtres
- Composant `src/components/Pagination.jsx` : compteur "X–Y sur Z", sélecteur taille, boutons nav
- Clés localStorage : `cl_pagesize_inv`, `cl_pagesize_dr`, `cl_pagesize_remb`
- Les exports CSV/XLS/JSON visent toujours la liste filtrée complète, pas la page affichée

**Why:** Listes sans limite pouvant devenir longues.
**How to apply:** Toute nouvelle page avec liste longue doit utiliser `usePagination` avec une clé `cl_pagesize_<id>` dédiée.

## Mode focus (liste agrandie)

Chaque page a un état `listFocused` qui masque les graphiques, KPIs et onglets pour se concentrer sur la liste.

- Bouton expand/collapse (icône maximize/minimize) placé avant le bouton export dans l'en-tête de chaque section liste
- En mode focus : page size passe automatiquement à 25 ; au retour : 15
- Sur les onglets Vision mensuelle : bouton passé en prop `expandButton` aux composants `CapitalMensuelTable`, `DepotsMensuelTable`, `TableauInteretsPlateforme` — s'affiche après le bouton TOUT
- Le bouton expand et l'export doivent toujours être dans un wrapper `<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>` pour éviter un problème d'alignement centré
