1.6 KiB
1.6 KiB
name, description, metadata
| name | description | metadata | ||||||
|---|---|---|---|---|---|---|---|---|
| project_pagination | Pagination côté client sur les 3 pages de listes — hook usePagination + composant Pagination |
|
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
expandButtonaux composantsCapitalMensuelTable,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é