---
name: Composant ConfirmModal et suppressions
description: ConfirmModal.jsx créé ; tous les confirm() natifs remplacés dans les pages
type: project
originSessionId: c8c8964c-17e5-40a2-8e72-52261af1d3e9
---
Un composant `ConfirmModal` générique a été créé dans `frontend/src/components/ConfirmModal.jsx`.
Props : `open`, `title` (défaut "Confirmer la suppression"), `message`, `confirmLabel` (défaut "Supprimer"), `onConfirm`, `onCancel`.
Il s'appuie sur `Modal.jsx` existant, largeur 440px, bouton ghost "Annuler" + bouton danger.

**Why:** Remplacer les 12 `confirm()` natifs (popup navigateur) par des modales React ergonomiques.

**How to apply:** Toute nouvelle suppression doit utiliser `ConfirmModal` avec un état local `const [deleteConfirm, setDeleteConfirm] = useState(null)`.
Pattern standard :
```js
const del = (item) => {
  setDeleteConfirm({
    message: `Supprimer "${item.nom}" ?`,
    onConfirm: async () => {
      await api.del(`/route/${item.id}`);
      setDeleteConfirm(null);
      reload();
    },
  });
};
```
Et dans le JSX, avant la fermeture du return :
```jsx
<ConfirmModal
  open={!!deleteConfirm}
  message={deleteConfirm?.message}
  onConfirm={deleteConfirm?.onConfirm}
  onCancel={() => setDeleteConfirm(null)}
/>
```
Fichiers déjà migrés : DepotsRetraits, Admin (UsersSection), Investissements, Remboursements, Settings (Settings + GarantiesPanel + NotationPanel), FamilleEntreprises.
