Skip to main content

DangerZone

Composant de zone dangereuse pour la suppression irréversible de toutes les transactions. Implémente un double mécanisme de confirmation : modal + checkbox obligatoire avant d'activer le bouton de suppression.

Source : src/components/ui/danger-zone.tsx

Aucune prop​

DangerZone est autocontenu — il gère son propre état de modal et appelle deleteAllTransactions.

<DangerZone />

Flux d'interaction​

Bouton "Supprimer toutes les transactions"
  └── Ouvre modal de confirmation
        ├── Affiche avertissement irréversible
        ├── Checkbox "Je comprends..." (obligatoire)
        └── Bouton "Supprimer définitivement" (désactivé tant que checkbox non cochée)
              ├── En cours → spinner
              ├── Succès → message vert + fermeture auto après 1.5 s
              └── Erreur → message rouge

Garde-fous UX​

  • Checkbox requise : le bouton de suppression reste disabled tant que l'utilisateur n'a pas coché explicitement
  • Fermeture pendant l'action : cliquer en dehors de la modal est bloqué pendant isPending
  • Couleurs : bouton trigger en rouge atténué (rgba(239,68,68,0.1)) — signal danger sans agressivité visuelle permanente

À ne pas faire​

  • Ne pas retirer la checkbox de confirmation — c'est la seule protection contre les suppressions accidentelles
  • Ne pas ajouter d'autres actions destructives dans ce composant — créer un composant séparé par action

Voir aussi​