Modification modale plateforme

frontend/src/components/PlateformeFormModal.jsx

@@ -0,0 +1,109 @@
+import { useRef, useState } from 'react';
+import Modal from './Modal.jsx';
+
+const STEP_TITLES = [
+  "Informations générales sur la plateforme",
+  'Fiscalité',
+  'Fonctionnement & frais',
+  'Classification',
+  'Autres',
+];
+
+/**
+ * PlateformeFormModal — assistant partagé de création/édition d'une plateforme.
+ *
+ * Utilisé à la fois par le référentiel Admin (AdminPlateformes.jsx, ex-RefModal) et
+ * par Paramètres > Mes plateformes (PlateformesSection.jsx, ex-PlatForm). Sur le
+ * modèle d'InvestissementFormModal : indicateur d'étape (barre segmentée + « Étape
+ * X : titre »), pied de modale Annuler/Précédent/Suivant/Créer ou Enregistrer.
+ *
+ * Ce composant est volontairement une simple "coquille" d'assistant : il ne connaît
+ * ni les champs ni leur logique (cascades domiciliation/fiscalité, CountrySelect,
+ * upload logo, InvSelect catégories/secteurs...) — chaque appelant continue de
+ * posséder son propre state, ses effets de bord, et fournit le contenu de chaque
+ * étape via les props step1..step5. Ça permet de partager la mécanique de
+ * l'assistant sans dupliquer ni réécrire les composants déjà en place.
+ *
+ * Comme InvestissementFormModal, seule l'étape affichée est montée dans le DOM
+ * (jamais display:none) afin que "Suivant" (reportValidity() sur le <form>) ne
+ * valide que les champs réellement visibles.
+ *
+ * Props :
+ *   title, onClose            — titre de la modale, fermeture
+ *   onSubmit                  — handler de soumission finale (form onSubmit ET
+ *                                onClick du bouton Créer/Enregistrer — doit donc
+ *                                appeler e.preventDefault() en premier, comme les
+ *                                handlers existants)
+ *   saving, err                — état de sauvegarde / message d'erreur
+ *   submitLabel                — libellé du bouton final ('Créer' | 'Enregistrer')
+ *   onDelete                    — optionnel : si fourni, affiche un bouton
+ *                                 "Supprimer" en bas à gauche, visible sur les 5 étapes
+ *   width                      — largeur de la modale (défaut 640)
+ *   step1..step5                — contenu JSX de chaque étape (l'appelant
+ *                                 enveloppe généralement ses champs dans une
+ *                                 div className="form-grid")
+ */
+export default function PlateformeFormModal({
+  title,
+  onClose,
+  onSubmit,
+  saving = false,
+  err = null,
+  submitLabel = 'Enregistrer',
+  onDelete = null,
+  width = 640,
+  step1, step2, step3, step4, step5,
+}) {
+  const formRef = useRef(null);
+  const [step, setStep] = useState(1);
+  const totalSteps = STEP_TITLES.length;
+  const steps = [step1, step2, step3, step4, step5];
+
+  const goNext = () => {
+    if (formRef.current && !formRef.current.reportValidity()) return;
+    setStep(s => Math.min(totalSteps, s + 1));
+  };
+  const goPrev = () => setStep(s => Math.max(1, s - 1));
+
+  return (
+    <Modal
+      open
+      title={title}
+      onClose={onClose}
+      width={width}
+      footer={
+        <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: 8 }}>
+          <div style={{ flex: 1 }}>
+            {onDelete && (
+              <button className="danger" disabled={saving} onClick={onDelete}>Supprimer</button>
+            )}
+          </div>
+          {step === 1 && <button onClick={onClose} disabled={saving}>Annuler</button>}
+          {step > 1 && <button onClick={goPrev} disabled={saving}>Précédent</button>}
+          {step < totalSteps && <button className="primary" onClick={goNext} disabled={saving}>Suivant</button>}
+          {step === totalSteps && <button className="primary" onClick={onSubmit} disabled={saving}>{saving ? '…' : submitLabel}</button>}
+        </div>
+      }
+    >
+      {/* ── Indicateur d'étape ── */}
+      <div style={{ marginBottom: 16 }}>
+        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>
+          Étape {step} : {STEP_TITLES[step - 1]}
+        </div>
+        <div style={{ display: 'flex', gap: 6 }}>
+          {STEP_TITLES.map((_, i) => (
+            <div key={i} style={{
+              flex: 1, height: 5, borderRadius: 4,
+              background: i < step ? 'var(--primary)' : 'var(--border)',
+            }} />
+          ))}
+        </div>
+      </div>
+
+      <form ref={formRef} onSubmit={onSubmit}>
+        {err && <div className="error" style={{ marginBottom: 12 }}>{err}</div>}
+        {steps.map((content, i) => step === i + 1 && <div key={i}>{content}</div>)}
+      </form>
+    </Modal>
+  );
+}