Implementation de la notion d'espace d'investissement

frontend/src/pages/settings/ComptesSection.jsx

@@ -3,6 +3,7 @@ import { api } from '../../api.js';
 import { memberLabel } from '../../utils/format.js';
 import ConfirmModal from '../../components/ConfirmModal.jsx';
 import Modal from '../../components/Modal.jsx';
+import { useAsyncAction } from '../../hooks/useAsyncAction.js';
 
 const EXONERATION_LABELS = {
   aucune:    'Aucune',
@@ -85,6 +86,8 @@ export default function ComptesSection() {
   const [editCompte,   setEditCompte]   = useState(null);
   const [err,          setErr]          = useState(null);
   const [confirmDel,   setConfirmDel]   = useState(null);
+  const { run: runAddCompte, pending: addingCompte } = useAsyncAction();
+  const { run: runSaveEdit, pending: savingEdit } = useAsyncAction();
 
   const openNew = () => { setNewCompte(EMPTY_COMPTE); setErr(null); setShowNew(true); };
 
@@ -204,14 +207,15 @@ export default function ComptesSection() {
       open={showNew}
       title="Nouveau compte"
       onClose={() => { setShowNew(false); setNewCompte(EMPTY_COMPTE); setErr(null); }}
+      busy={addingCompte}
       footer={
         <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%', gap: 8 }}>
-          <button type="button" onClick={() => { setShowNew(false); setNewCompte(EMPTY_COMPTE); setErr(null); }}>Annuler</button>
-          <button className="primary" form="form-new-compte" type="submit">Créer</button>
+          <button type="button" disabled={addingCompte} onClick={() => { setShowNew(false); setNewCompte(EMPTY_COMPTE); setErr(null); }}>Annuler</button>
+          <button className="primary" form="form-new-compte" type="submit" disabled={addingCompte}>{addingCompte ? 'Création…' : 'Créer'}</button>
         </div>
       }
     >
-      <form id="form-new-compte" onSubmit={addCompte} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <form id="form-new-compte" onSubmit={e => runAddCompte(addCompte, e)} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
         {err && <div className="error">{err}</div>}
         <CompteFormFields state={newCompte} setter={setNewCompte} investisseurs={investisseurs} />
       </form>
@@ -222,19 +226,20 @@ export default function ComptesSection() {
       open={!!editCompte}
       title="Modifier le compte"
       onClose={() => { setEditCompte(null); setErr(null); }}
+      busy={savingEdit}
       footer={
         <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
-          <button className="danger" type="button" onClick={() => { setEditCompte(null); del(comptes.find(c => c.id === editCompte?.id) ?? editCompte); }}>
+          <button className="danger" type="button" disabled={savingEdit} onClick={() => { setEditCompte(null); del(comptes.find(c => c.id === editCompte?.id) ?? editCompte); }}>
             Supprimer
           </button>
           <div style={{ display: 'flex', gap: 8 }}>
-            <button type="button" onClick={() => { setEditCompte(null); setErr(null); }}>Annuler</button>
-            <button className="primary" form="form-edit-compte" type="submit">Enregistrer</button>
+            <button type="button" disabled={savingEdit} onClick={() => { setEditCompte(null); setErr(null); }}>Annuler</button>
+            <button className="primary" form="form-edit-compte" type="submit" disabled={savingEdit}>{savingEdit ? 'Enregistrement…' : 'Enregistrer'}</button>
           </div>
         </div>
       }
     >
-      <form id="form-edit-compte" onSubmit={saveEdit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <form id="form-edit-compte" onSubmit={e => runSaveEdit(saveEdit, e)} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
         {err && <div className="error">{err}</div>}
         <CompteFormFields state={editCompte} setter={setEditCompte} investisseurs={investisseurs} />
       </form>