Amélioration de la modale Investiisement

.gitignore

@@ -8,6 +8,10 @@ build/
 */dist/
 */build/
 
+# Résidus Vite (config transpilée temporairement lors de vite build/dev)
+vite.config.js.timestamp-*.mjs
+*/vite.config.js.timestamp-*.mjs
+
 # Environment
 .env
 .env.local

frontend/src/components/InvestissementFormModal.jsx

@@ -0,0 +1,485 @@
+import { useRef, useState, useEffect } from 'react';
+import Modal from './Modal.jsx';
+import InvSelect from './InvSelect.jsx';
+import CountrySelect from './CountrySelect.jsx';
+import { addMonthsFE, addMonthsFinDeMoisFE, lastDayOfMonthFE, dayOfMonth } from '../utils/dateEcheances.js';
+
+/**
+ * InvestissementFormModal — formulaire partagé de création/édition d'un investissement.
+ *
+ * Utilisé par Investissements.jsx (création + édition depuis la liste) et
+ * InvestissementDetail.jsx (édition depuis la fiche). Comme RembFormModal, ce composant
+ * est volontairement "bête" côté état : le parent garde la propriété du form (state,
+ * effets de bord au changement de plateforme comme le préremplissage des catégories/secteurs
+ * ou la résolution du détenteur, chargement des comptes du détenteur…). Ce composant se
+ * contente des cascades de champs qui ne dépendent que du form lui-même (dates, durée, type
+ * de prêt, méthode de remboursement) et du rendu JSX.
+ *
+ * Depuis le 29/08/26, l'affichage se fait en 3 étapes (assistant) plutôt qu'en un seul
+ * écran : (1) Informations générales, (2) Données financières et échéancier,
+ * (3) Catégories, secteurs, autres. L'étape courante (`step`) est un état interne au
+ * composant, non exposé au parent, et se réinitialise à 1 à chaque ouverture de la modale
+ * (transition `open` false → true). "Suivant" valide les champs obligatoires (natifs
+ * `required`) de l'étape affichée via `reportValidity()` avant d'avancer ; "Précédent" ne
+ * valide rien. Le bouton Supprimer (édition) reste visible sur les 3 étapes.
+ *
+ * Props :
+ *   open, onClose                     — état d'ouverture
+ *   editingId                         — id en édition, falsy si création (contrôle le titre,
+ *                                        l'affichage du champ Statut, et le libellé du bouton)
+ *   form                              — objet form courant (voir `empty`/`emptyForm` des pages appelantes)
+ *   onFieldChange(key, value)         — pour les champs simples, sans effet de bord
+ *   onFormPatch(patchOrUpdater)       — pour les cascades (objet complet à fusionner, ou
+ *                                        fonction (prev) => next pour les cas sensibles au Strict Mode)
+ *   err                               — message d'erreur à afficher
+ *   onSubmit                          — handler de soumission
+ *   onDelete, confirmingDelete, setConfirmingDelete
+ *                                     — flux de suppression optionnel (affiché si onDelete fourni)
+ *   plats                             — liste des plateformes
+ *   multiDetenteur                    — bool, affiche le détenteur de chaque plateforme dans le select
+ *   investisseurs                     — liste des détenteurs (select Détenteur, avec optgroups Famille/Entreprises)
+ *   comptesInvestisseur               — comptes du détenteur courant (select Compte de réception, étape 2)
+ *   onPlateformeChange(platformId)    — délégué au parent : résolution du détenteur, méthode héritée,
+ *                                        reset du compte, préremplissage catégories/secteurs
+ *   categoriesInv, secteursInv        — listes pour les sélecteurs Catégories/Secteurs d'investissement
+ *   onCategoryAdded, onSectorAdded    — callbacks après création d'une catégorie/d'un secteur via InvSelect
+ *   tauxRevisionWarning               — JSX optionnel affiché sous le champ Taux annuel (étape 2)
+ *   dateCibleRevisionWarning          — JSX optionnel affiché sous le champ Date cible (étape 2)
+ *   restructurationBlock              — JSX optionnel affiché après le champ Date cible, étape 2 (pleine largeur)
+ *   width                             — largeur de la modale (défaut 720)
+ */
+export default function InvestissementFormModal({
+  open, onClose, editingId,
+  form, onFieldChange, onFormPatch,
+  err, onSubmit, onDelete, confirmingDelete, setConfirmingDelete,
+  plats = [], multiDetenteur = false,
+  investisseurs = [],
+  comptesInvestisseur = [],
+  onPlateformeChange,
+  categoriesInv = [], secteursInv = [],
+  onCategoryAdded, onSectorAdded,
+  tauxRevisionWarning = null,
+  dateCibleRevisionWarning = null,
+  restructurationBlock = null,
+  width = 720,
+}) {
+  // Vestige côté données : mémorise la dernière souscription valide saisie.
+  // N'est lu nulle part dans le code actuel — conservé tel quel (écriture sans effet)
+  // pour ne rien changer au comportement observable pendant le regroupement des deux formulaires.
+  const lastValidSouscriptionRef = useRef('');
+
+  const formRef = useRef(null);
+  const [step, setStep] = useState(1);
+
+  // Repart de l'étape 1 à chaque (ré)ouverture de la modale, création comme édition.
+  useEffect(() => {
+    if (open) setStep(1);
+  }, [open]);
+
+  const stepTitles = [
+    "Informations générales de l'investissement",
+    'Données financières et échéancier',
+    'Catégories, secteurs, autres',
+  ];
+
+  const goNext = () => {
+    if (formRef.current && !formRef.current.reportValidity()) return;
+    setStep(s => Math.min(3, s + 1));
+  };
+  const goPrev = () => setStep(s => Math.max(1, s - 1));
+
+  const platMethode = plats.find(p => String(p.id) === String(form.plateforme_id))?.methode_remboursement;
+  const showFinDeMois = (form.type_remb === 'in_fine' || form.type_remb === 'differe')
+    && dayOfMonth(form.date_premiere_echeance) > 27;
+
+  const handleMethodeChange = (methode) => {
+    const defaultCompte = methode === 'compte_courant'
+      ? (comptesInvestisseur.find(c => c.type === 'compte_courant') ?? comptesInvestisseur[0])
+      : null;
+    onFormPatch({ methode_remboursement: methode, nom_compte_courant: defaultCompte?.nom || '', compte_id: String(defaultCompte?.id || '') });
+  };
+
+  const handleCompteChange = (compteId) => {
+    const c = comptesInvestisseur.find(c => String(c.id) === compteId);
+    onFormPatch({ compte_id: compteId, nom_compte_courant: c?.nom || '' });
+  };
+
+  const handleTypeRembChange = (t) => {
+    const next = {
+      ...form, type_remb: t,
+      freq_interets: t === 'differe' ? 'in_fine' : (form.freq_interets === 'in_fine' ? 'mensuel' : form.freq_interets),
+    };
+    if (t === 'differe') {
+      // Recalculer la date d'échéance depuis souscription+durée (prioritaire sur l'ancienne valeur)
+      if (form.date_souscription && form.duree_mois) {
+        const dpe = addMonthsFE(form.date_souscription, 1);
+        const cible = addMonthsFE(dpe, Number(form.duree_mois) - 1);
+        next.date_premiere_echeance = cible;
+        next.date_cible = cible;
+      } else if (form.date_premiere_echeance) {
+        next.date_cible = form.date_premiere_echeance;
+      }
+    } else {
+      if (form.date_souscription) {
+        next.date_premiere_echeance = addMonthsFE(form.date_souscription, 1);
+        if (next.date_premiere_echeance && form.duree_mois) {
+          next.date_cible = addMonthsFE(next.date_premiere_echeance, Number(form.duree_mois) - 1);
+        }
+      }
+    }
+    onFormPatch(next);
+  };
+
+  const handleDureeChange = (duree) => {
+    const next = { ...form, duree_mois: duree };
+    if (duree) {
+      if (form.type_remb === 'differe' && form.date_souscription) {
+        const tempDpe = addMonthsFE(form.date_souscription, 1);
+        const cible = addMonthsFE(tempDpe, Number(duree) - 1);
+        next.date_premiere_echeance = cible;
+        next.date_cible = cible;
+      } else if (form.date_premiere_echeance) {
+        next.date_cible = addMonthsFE(form.date_premiere_echeance, Number(duree) - 1);
+      }
+    }
+    onFormPatch(next);
+  };
+
+  const handleSouscriptionChange = (souscription) => {
+    onFormPatch(prev => {
+      const next = { ...prev, date_souscription: souscription };
+      if (!souscription || souscription.length !== 10) return next;
+      if (prev.type_remb === 'differe') {
+        if (prev.duree_mois) {
+          const tempDpe = addMonthsFE(souscription, 1);
+          const cible = addMonthsFE(tempDpe, Number(prev.duree_mois) - 1);
+          next.date_premiere_echeance = cible;
+          next.date_cible = cible;
+        }
+      } else {
+        // Pour in_fine / amortissable : recalcul systématique de premiere_echeance
+        // (cohérent avec le comportement de "differe" et évite les faux négatifs
+        // du test isAutoCalc quand premiere_echeance ne vaut pas exactement souscription+1m)
+        next.date_premiere_echeance = addMonthsFE(souscription, 1);
+        if (next.date_premiere_echeance && prev.duree_mois) {
+          next.date_cible = addMonthsFE(next.date_premiere_echeance, Number(prev.duree_mois) - 1);
+        }
+      }
+      return next;
+    });
+    if (souscription && souscription.length === 10) {
+      lastValidSouscriptionRef.current = souscription;
+    }
+  };
+
+  const handleDpeChange = (dpe) => {
+    const next = { ...form, date_premiere_echeance: dpe };
+    // Si le jour passe à ≤ 27 on désactive fin-de-mois
+    if (dayOfMonth(dpe) <= 27) next.echeance_fin_de_mois = false;
+    if (form.type_remb === 'differe') {
+      next.date_cible = dpe;
+    } else if (dpe && form.duree_mois) {
+      next.date_cible = next.echeance_fin_de_mois
+        ? addMonthsFinDeMoisFE(dpe, Number(form.duree_mois) - 1)
+        : addMonthsFE(dpe, Number(form.duree_mois) - 1);
+    }
+    onFormPatch(next);
+  };
+
+  const handleFinDeMoisChange = (checked) => {
+    onFormPatch(prev => {
+      const next = { ...prev, echeance_fin_de_mois: checked };
+      if (checked && prev.date_premiere_echeance) {
+        const newDpe = lastDayOfMonthFE(prev.date_premiere_echeance);
+        next.date_premiere_echeance = newDpe;
+        if (prev.type_remb === 'differe') {
+          next.date_cible = newDpe;
+        } else if (newDpe && prev.duree_mois) {
+          next.date_cible = addMonthsFinDeMoisFE(newDpe, Number(prev.duree_mois) - 1);
+        }
+      }
+      return next;
+    });
+  };
+
+  return (
+    <Modal
+      open={open}
+      title={editingId ? 'Modifier l\'investissement' : 'Nouvel investissement'}
+      onClose={onClose}
+      width={width}
+      footer={
+        <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: 8 }}>
+          <div style={{ flex: 1 }}>
+            {editingId && onDelete && (
+              !confirmingDelete ? (
+                <button className="danger" onClick={() => setConfirmingDelete(true)}>
+                  Supprimer
+                </button>
+              ) : (
+                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  <span style={{ fontSize: 13, color: 'var(--danger, #ef4444)', whiteSpace: 'nowrap' }}>
+                    Supprimer définitivement ?
+                  </span>
+                  <button onClick={() => setConfirmingDelete(false)}>Non</button>
+                  <button className="danger" onClick={onDelete}>Oui, supprimer</button>
+                </span>
+              )
+            )}
+          </div>
+          {step === 1 && <button onClick={onClose}>Annuler</button>}
+          {step > 1 && <button onClick={goPrev}>Précédent</button>}
+          {step < 3 && <button className="primary" onClick={goNext}>Suivant</button>}
+          {step === 3 && <button className="primary" onClick={onSubmit}>{editingId ? 'Enregistrer' : 'Créer'}</button>}
+        </div>
+      }
+    >
+      {/* ── Indicateur d'étape ── */}
+      <div style={{ marginBottom: 16 }}>
+        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>
+          Étape {step} : {stepTitles[step - 1]}
+        </div>
+        <div style={{ display: 'flex', gap: 6 }}>
+          {[1, 2, 3].map(n => (
+            <div key={n} style={{
+              flex: 1, height: 5, borderRadius: 4,
+              background: n <= step ? 'var(--primary)' : 'var(--border)',
+            }} />
+          ))}
+        </div>
+      </div>
+
+      <form ref={formRef} onSubmit={onSubmit}>
+        {err && <div className="error">{err}</div>}
+        <div className="form-grid">
+
+          {/* ══ Étape 1 : Informations générales ══ */}
+          {step === 1 && (<>
+            <div>
+              <label>Plateforme *</label>
+              <select required value={form.plateforme_id} onChange={e => onPlateformeChange(e.target.value)}>
+                <option value="">—</option>
+                {plats.map(p => <option key={p.id} value={p.id}>{p.nom}{multiDetenteur && p.investisseur_nom ? ` — ${p.investisseur_nom}` : ''}</option>)}
+              </select>
+            </div>
+            <div>
+              <label>Détenteur *</label>
+              <select required value={form.investisseur_id} onChange={e => onFieldChange('investisseur_id', e.target.value)}>
+                <option value="">—</option>
+                {investisseurs.filter(i => i.type !== 'entreprise').length > 0 && (
+                  <optgroup label="Famille">
+                    {investisseurs.filter(i => i.type !== 'entreprise').map(i => (
+                      <option key={i.id} value={i.id}>{i.nom}{i.is_principal ? ' (principal)' : ''}</option>
+                    ))}
+                  </optgroup>
+                )}
+                {investisseurs.filter(i => i.type === 'entreprise').length > 0 && (
+                  <optgroup label="Entreprises">
+                    {investisseurs.filter(i => i.type === 'entreprise').map(i => (
+                      <option key={i.id} value={i.id}>{i.nom}</option>
+                    ))}
+                  </optgroup>
+                )}
+              </select>
+            </div>
+            <div style={{ gridColumn: 'span 2' }}>
+              <label>Nom du projet *</label>
+              <input required value={form.nom_projet} onChange={e => onFieldChange('nom_projet', e.target.value)} />
+            </div>
+            <div>
+              <label>Émetteur</label>
+              <input value={form.emetteur}
+                onChange={e => onFieldChange('emetteur', e.target.value)}
+                placeholder="Nom de l'emprunteur"
+              />
+            </div>
+            <div>
+              <label>Référence</label>
+              <input value={form.reference}
+                onChange={e => onFieldChange('reference', e.target.value)}
+                placeholder="N° de dossier, code projet…"
+              />
+            </div>
+            <div>
+              <label>Pays d'exposition</label>
+              <CountrySelect
+                value={form.pays_exposition || 'FR'}
+                onChange={code => onFieldChange('pays_exposition', code)}
+              />
+            </div>
+            {editingId && (
+              <div>
+                <label>Statut</label>
+                <select value={form.statut} onChange={e => onFieldChange('statut', e.target.value)}>
+                  <option value="en_cours">En cours</option>
+                  <option value="rembourse">Remboursé</option>
+                  <option value="en_retard">En retard</option>
+                  <option value="procedure">Procédure</option>
+                  <option value="cloture">Clôturé</option>
+                  <option value="perte_definitive">Perte définitive</option>
+                </select>
+              </div>
+            )}
+          </>)}
+
+          {/* ══ Étape 2 : Données financières et échéancier ══ */}
+          {step === 2 && (<>
+            <div>
+              <label>Montant investi (€) *</label>
+              <input type="number" step="0.01" min="0" required value={form.montant_investi}
+                onChange={e => onFieldChange('montant_investi', e.target.value)} />
+            </div>
+            <div>
+              <label>Taux annuel (%) *</label>
+              <input type="number" step="0.01" required value={form.taux_interet}
+                onChange={e => onFieldChange('taux_interet', e.target.value)} />
+              {tauxRevisionWarning}
+            </div>
+            <div>
+              <label>Durée (mois) *</label>
+              <input type="number" min="0" required value={form.duree_mois} onChange={e => handleDureeChange(e.target.value)} />
+            </div>
+            <div>
+              <label>Type de prêt</label>
+              <select value={form.type_remb} onChange={e => handleTypeRembChange(e.target.value)}>
+                <option value="in_fine">Prêt in fine</option>
+                <option value="amortissable">Prêt amortissable</option>
+                <option value="differe">Prêt différé</option>
+              </select>
+            </div>
+            <div>
+              <label>Fréquence intérêts</label>
+              <select
+                value={form.type_remb === 'differe' ? 'in_fine' : form.freq_interets}
+                disabled={form.type_remb === 'differe'}
+                onChange={e => onFieldChange('freq_interets', e.target.value)}
+              >
+                {form.type_remb === 'differe' ? (
+                  <option value="in_fine">In fine (unique)</option>
+                ) : (
+                  <>
+                    <option value="mensuel">Mensuel</option>
+                    <option value="trimestriel">Trimestriel</option>
+                  </>
+                )}
+              </select>
+            </div>
+            <div>
+              <label>Date souscription *</label>
+              <input type="date" required value={form.date_souscription} onChange={e => handleSouscriptionChange(e.target.value)} />
+            </div>
+            <div>
+              <label>{form.type_remb === 'differe' ? "Date d'échéance (versement unique) *" : 'Date 1ère échéance *'}</label>
+              <input type="date" required value={form.date_premiere_echeance} onChange={e => handleDpeChange(e.target.value)} />
+              {/* ── Case "Dernier jour du mois" — visible si jour > 27 ── */}
+              {showFinDeMois && (
+                <label style={{
+                  display: 'inline-flex', alignItems: 'center', gap: 8,
+                  marginTop: 6, cursor: 'pointer', userSelect: 'none',
+                  fontSize: 'var(--fs-sm)', color: 'var(--text)',
+                  width: 'fit-content',
+                }}>
+                  <input
+                    type="checkbox"
+                    style={{ width: 'auto', flexShrink: 0 }}
+                    checked={form.echeance_fin_de_mois}
+                    onChange={e => handleFinDeMoisChange(e.target.checked)}
+                  />
+                  Dernier jour du mois
+                </label>
+              )}
+            </div>
+            <div>
+              <label>Date cible contractuelle{form.type_remb === 'differe' ? ' — calculée' : ''}</label>
+              <input type="date" value={form.date_cible}
+                readOnly={form.type_remb === 'differe'}
+                style={form.type_remb === 'differe' ? { opacity: 0.6, cursor: 'default' } : undefined}
+                onChange={e => {
+                  if (form.type_remb === 'differe') return;
+                  onFieldChange('date_cible', e.target.value);
+                }}
+              />
+              {dateCibleRevisionWarning}
+            </div>
+            {platMethode && (platMethode === 'choix_investisseur' ? (
+              <div>
+                <label>Méthode de remboursement</label>
+                <select value={form.methode_remboursement} onChange={e => handleMethodeChange(e.target.value)}>
+                  <option value="">— Non renseignée —</option>
+                  <option value="portefeuille">Porte-monnaie de la plateforme</option>
+                  <option value="compte_courant">Compte courant de l'investisseur</option>
+                </select>
+              </div>
+            ) : (
+              <div>
+                <label>Méthode de remboursement</label>
+                <input readOnly value={platMethode === 'compte_courant' ? "Compte courant de l'investisseur" : 'Porte-monnaie de la plateforme'}
+                  style={{ background: 'var(--surface-2)', color: 'var(--text-muted)', cursor: 'default' }} />
+              </div>
+            ))}
+            {form.methode_remboursement === 'compte_courant' && (
+              <div>
+                <label>Compte de réception *</label>
+                {comptesInvestisseur.length > 0 ? (
+                  <select required value={form.compte_id} onChange={e => handleCompteChange(e.target.value)}>
+                    <option value="">— Choisir un compte —</option>
+                    {comptesInvestisseur.map(c => (
+                      <option key={c.id} value={c.id}>{c.nom}{c.banque ? ` — ${c.banque}` : ''}</option>
+                    ))}
+                  </select>
+                ) : (
+                  <p className="text-muted" style={{ fontSize: 'var(--fs-sm)', margin: '4px 0' }}>
+                    Aucun compte défini pour ce détenteur. <a href="/settings?section=comptes" target="_blank" rel="noreferrer">Créer un compte →</a>
+                  </p>
+                )}
+              </div>
+            )}
+            {restructurationBlock}
+          </>)}
+
+          {/* ══ Étape 3 : Catégories, secteurs, autres ══ */}
+          {step === 3 && (<>
+            <div style={{ gridColumn: 'span 2' }}>
+              <label>Notes</label>
+              <textarea rows={3} value={form.notes}
+                onChange={e => onFieldChange('notes', e.target.value)}
+                placeholder="Informations complémentaires…"
+              />
+            </div>
+
+            {/* Catégories d'investissement */}
+            <div style={{ gridColumn: 'span 3' }}>
+              <label>Catégories d'investissement</label>
+              <InvSelect
+                items={categoriesInv}
+                selected={form.categories_inv_ids || []}
+                onChange={ids => onFieldChange('categories_inv_ids', ids)}
+                addApiPath="/categories-inv"
+                onItemAdded={onCategoryAdded}
+                emptyLabel="Aucune catégorie d'investissement"
+                addLabel="Ajouter une catégorie d'investissement"
+                inputPlaceholder="Nom de la catégorie…"
+              />
+            </div>
+
+            {/* Secteurs d'investissement */}
+            <div style={{ gridColumn: 'span 3' }}>
+              <label>Secteurs d'investissement</label>
+              <InvSelect
+                items={secteursInv}
+                selected={form.secteurs_inv_ids || []}
+                onChange={ids => onFieldChange('secteurs_inv_ids', ids)}
+                addApiPath="/secteurs-inv"
+                onItemAdded={onSectorAdded}
+                emptyLabel="Aucun secteur d'investissement"
+                addLabel="Ajouter un secteur d'investissement"
+                inputPlaceholder="Nom du secteur…"
+              />
+            </div>
+          </>)}
+
+        </div>
+      </form>
+    </Modal>
+  );
+}

frontend/src/pages/InvestissementDetail.jsx

@@ -6,7 +6,9 @@ import { useUi } from '../context/UiContext.jsx';
 import Modal from '../components/Modal.jsx';
 import ConfirmModal from '../components/ConfirmModal.jsx';
 import RembFormModal from '../components/RembFormModal.jsx';
-import CountrySelect, { COUNTRIES, FlagIcon } from '../components/CountrySelect.jsx';
+import { COUNTRIES, FlagIcon } from '../components/CountrySelect.jsx';
+import InvestissementFormModal from '../components/InvestissementFormModal.jsx';
+import { dayOfMonth } from '../utils/dateEcheances.js';
 import { fmtEUR, fmtPct, fmtDate, today } from '../utils/format.js';
 import { xirr } from '../utils/xirr.js';
 
@@ -18,6 +20,7 @@ const emptyForm = {
   statut: 'en_cours', reference: '', notes: '', pays_exposition: 'FR',
   echeance_fin_de_mois: false,
   methode_remboursement: '', nom_compte_courant: '', compte_id: '',
+  categories_inv_ids: [], secteurs_inv_ids: [],
 };
 
 /**
@@ -27,38 +30,6 @@ const emptyForm = {
  * - 2+           → première de la liste (pas d'historique disponible sur la page détail)
  */
 
-function addMonthsFE(isoDate, n) {
-  if (!isoDate || !n) return '';
-  const [y, m, d] = isoDate.split('-').map(Number);
-  const dt = new Date(Date.UTC(y, m - 1 + n, d));
-  return dt.toISOString().slice(0, 10);
-}
-
-/** Retourne le dernier jour du mois de isoDate. Ex : '2024-01-28' → '2024-01-31' */
-function lastDayOfMonthFE(isoDate) {
-  if (!isoDate) return isoDate;
-  const [y, m] = isoDate.split('-').map(Number);
-  const dt = new Date(Date.UTC(y, m, 0));
-  return dt.toISOString().slice(0, 10);
-}
-
-/**
- * Ajoute n mois et positionne sur le dernier jour du mois cible.
- * Évite les débordements JS (31 jan + 1 = 3 mar → ici = 29 fév).
- */
-function addMonthsFinDeMoisFE(isoDate, n) {
-  if (!isoDate || (n === undefined || n === null)) return '';
-  const [y, m] = isoDate.split('-').map(Number);
-  const dt = new Date(Date.UTC(y, m - 1 + Number(n) + 1, 0));
-  return dt.toISOString().slice(0, 10);
-}
-
-/** Retourne le numéro du jour dans le mois (1-31) ou 0 si absent. */
-function dayOfMonth(isoDate) {
-  if (!isoDate || isoDate.length < 10) return 0;
-  return parseInt(isoDate.slice(8, 10), 10);
-}
-
 function typeLabel(type_remb, freq_interets) {
   if (type_remb === 'in_fine') return `In fine · ${freq_interets === 'trimestriel' ? 'Trimestriel' : 'Mensuel'}`;
   if (type_remb === 'amortissable') return `Amortissable · ${freq_interets === 'trimestriel' ? 'Trimestriel' : 'Mensuel'}`;
@@ -91,6 +62,8 @@ export default function InvestissementDetail() {
   const [plats, setPlats] = useState([]);
   const [comptesCourants, setComptesCourants] = useState([]);
   const [comptesInvestisseur, setComptesInvestisseur] = useState([]);
+  const [categoriesInv, setCategoriesInv] = useState([]);
+  const [secteursInv,   setSecteursInv]   = useState([]);
   const [comptesRembInvestisseur, setComptesRembInvestisseur] = useState([]);
   const [pfuRates, setPfuRates] = useState([]);
   // Modal édition investissement
@@ -185,14 +158,18 @@ export default function InvestissementDetail() {
   const load = async () => {
     setLoading(true);
     try {
-      const [data, p, cats, comptes] = await Promise.all([
+      const [data, p, comptes, catInv, sectInv] = await Promise.all([
         api.get(`/investissements/${id}`),
         api.get('/plateformes'),
         api.get('/investissements/comptes-courants'),
+        api.get('/categories-inv'),
+        api.get('/secteurs-inv'),
       ]);
       setInv(data);
       setPlats(p);
       setComptesCourants(comptes);
+      setCategoriesInv(catInv);
+      setSecteursInv(sectInv);
     } finally { setLoading(false); }
   };
 
@@ -555,12 +532,42 @@ export default function InvestissementDetail() {
       nom_compte_courant: inv.nom_compte_courant || '',
       compte_id: inv.compte_id || '',
       pays_exposition: inv.pays_exposition || 'FR',
+      categories_inv_ids: (inv.categories_inv || []).map(c => c.id),
+      secteurs_inv_ids:   (inv.secteurs_inv   || []).map(s => s.id),
     });
     lastValidSouscriptionRef.current = inv.date_souscription || '';
     setErr(null);
     setModalOpen(true);
   };
 
+  /** Changement de plateforme dans le formulaire : résout la méthode de remboursement héritée
+   *  (le détenteur, lui, reste au choix de l'utilisateur — pas d'écrasement automatique en édition)
+   *  et préremplit catégories/secteurs depuis la plateforme. */
+  const handlePlateformeChange = (platId) => {
+    const platObj = plats.find(p => String(p.id) === String(platId));
+    const platMethode = platObj?.methode_remboursement;
+    const newMethode = platMethode === 'choix_investisseur' ? '' : (platMethode || '');
+    if (platId) {
+      Promise.all([
+        api.get(`/plateformes/${platId}/categories-inv`).catch(() => []),
+        api.get(`/plateformes/${platId}/secteurs-inv`).catch(() => []),
+      ]).then(([platCats, platSects]) => {
+        setForm(f => ({ ...f,
+          plateforme_id: platId,
+          investisseur_id: platObj?.investisseur_id ? String(platObj.investisseur_id) : f.investisseur_id,
+          methode_remboursement: newMethode, compte_id: '',
+          categories_inv_ids: platCats.map(c => c.id),
+          secteurs_inv_ids:   platSects.map(s => s.id),
+        }));
+      });
+    } else {
+      setForm(f => ({ ...f, plateforme_id: platId, methode_remboursement: newMethode, compte_id: '' }));
+    }
+  };
+
+  const handleCategoryAdded = (cat) => setCategoriesInv(prev => [...prev, cat].sort((a, b) => a.nom.localeCompare(b.nom)));
+  const handleSectorAdded   = (sect) => setSecteursInv(prev => [...prev, sect].sort((a, b) => a.nom.localeCompare(b.nom)));
+
   const close = () => { setModalOpen(false); setErr(null); setConfirmingInvDelete(false); };
 
   const submit = async (e) => {
@@ -572,7 +579,7 @@ export default function InvestissementDetail() {
 
       // Validation date d'échéance pour les prêts différés
       if (form.type_remb === 'differe' && !form.date_premiere_echeance) {
-        setEditErr("La date d'échéance est requise pour un prêt différé.");
+        setErr("La date d'échéance est requise pour un prêt différé. Vérifiez que la durée et la date de souscription sont renseignées.");
         return;
       }
 
@@ -600,6 +607,10 @@ export default function InvestissementDetail() {
         pays_exposition: form.pays_exposition || 'FR',
       };
       await api.put(`/investissements/${id}`, payload);
+      await Promise.all([
+        api.put(`/investissements/${id}/categories-inv`, { ids: form.categories_inv_ids || [] }),
+        api.put(`/investissements/${id}/secteurs-inv`,   { ids: form.secteurs_inv_ids   || [] }),
+      ]);
       close();
       await load();
     } catch (e) { setErr(e.message); }
@@ -2111,315 +2122,40 @@ export default function InvestissementDetail() {
       </Modal>
 
       {/* ── Modal édition ─────────────────────────────────────────── */}
-      <Modal
+      <InvestissementFormModal
         open={modalOpen}
-        title="Modifier l'investissement"
+        editingId={id}
         onClose={close}
-        width={720}
+        onSubmit={submit}
-        footer={
+        onDelete={onDelete}
-          <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: 8 }}>
+        confirmingDelete={confirmingInvDelete}
-            {/* Zone suppression — à gauche */}
+        setConfirmingDelete={setConfirmingInvDelete}
-            <div style={{ flex: 1 }}>
+        form={form}
-              {!confirmingInvDelete ? (
+        onFieldChange={(key, value) => setForm(f => ({ ...f, [key]: value }))}
-                <button className="danger" onClick={() => setConfirmingInvDelete(true)}>
+        onFormPatch={patch => setForm(f => typeof patch === 'function' ? patch(f) : { ...f, ...patch })}
-                  Supprimer
+        err={err}
-                </button>
+        plats={plats}
-              ) : (
+        multiDetenteur={multiDetenteur}
-                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        investisseurs={investisseurs}
-                  <span style={{ fontSize: 13, color: 'var(--danger, #ef4444)', whiteSpace: 'nowrap' }}>
+        comptesInvestisseur={comptesInvestisseur}
-                    Supprimer définitivement ?
+        onPlateformeChange={handlePlateformeChange}
-                  </span>
+        categoriesInv={categoriesInv}
-                  <button onClick={() => setConfirmingInvDelete(false)}>Non</button>
+        secteursInv={secteursInv}
-                  <button className="danger" onClick={() => { onDelete(); }}>Oui, supprimer</button>
+        onCategoryAdded={handleCategoryAdded}
-                </span>
+        onSectorAdded={handleSectorAdded}
-              )}
+        tauxRevisionWarning={lastTauxRevision && (
-            </div>
-            {/* Actions standard — à droite */}
-            <button onClick={close}>Annuler</button>
-            <button className="primary" onClick={submit}>Enregistrer</button>
-          </div>
-        }
-      >
-        <form onSubmit={submit}>
-          {err && <div className="error">{err}</div>}
-          <div className="form-grid">
-            <div>
-              <label>Plateforme *</label>
-              <select required value={form.plateforme_id} onChange={e => {
-                const platId = e.target.value;
-                const platObj = plats.find(p => String(p.id) === String(platId));
-                const platMethode = platObj?.methode_remboursement;
-                const newMethode = platMethode === 'choix_investisseur' ? '' : (platMethode || '');
-                setForm(f => ({ ...f, plateforme_id: platId, methode_remboursement: newMethode, compte_id: '' }));
-              }}>
-                <option value="">—</option>
-                {plats.map(p => <option key={p.id} value={p.id}>{p.nom}{multiDetenteur && p.investisseur_nom ? ` — ${p.investisseur_nom}` : ''}</option>)}
-              </select>
-            </div>
-            {(() => {
-              const platMethode = plats.find(p => String(p.id) === String(form.plateforme_id))?.methode_remboursement;
-              if (!platMethode) return null;
-              if (platMethode === 'choix_investisseur') return (
-                <div>
-                  <label>Méthode de remboursement</label>
-                  <select value={form.methode_remboursement} onChange={e => {
-                    const methode = e.target.value;
-                    const defaultCompte = methode === 'compte_courant'
-                      ? (comptesInvestisseur.find(c => c.type === 'compte_courant') ?? comptesInvestisseur[0])
-                      : null;
-                    setForm({ ...form, methode_remboursement: methode, nom_compte_courant: defaultCompte?.nom || '', compte_id: String(defaultCompte?.id || '') });
-                  }}>
-                    <option value="">— Non renseignée —</option>
-                    <option value="portefeuille">Porte-monnaie de la plateforme</option>
-                    <option value="compte_courant">Compte courant de l'investisseur</option>
-                  </select>
-                </div>
-              );
-              return (
-                <div>
-                  <label>Méthode de remboursement</label>
-                  <input readOnly value={platMethode === 'compte_courant' ? "Compte courant de l'investisseur" : 'Porte-monnaie de la plateforme'}
-                    style={{ background: 'var(--surface-2)', color: 'var(--text-muted)', cursor: 'default' }} />
-                </div>
-              );
-            })()}
-            {form.methode_remboursement === 'compte_courant' && (
-              <div>
-                <label>Compte de réception *</label>
-                {comptesInvestisseur.length > 0 ? (
-                  <select
-                    required
-                    value={form.compte_id}
-                    onChange={e => {
-                      const c = comptesInvestisseur.find(c => String(c.id) === e.target.value);
-                      setForm({ ...form, compte_id: e.target.value, nom_compte_courant: c?.nom || '' });
-                    }}
-                  >
-                    <option value="">— Choisir un compte —</option>
-                    {comptesInvestisseur.map(c => (
-                      <option key={c.id} value={c.id}>{c.nom}{c.banque ? ` — ${c.banque}` : ''}</option>
-                    ))}
-                  </select>
-                ) : (
-                  <p className="text-muted" style={{ fontSize: 'var(--fs-sm)', margin: '4px 0' }}>
-                    Aucun compte défini pour ce détenteur. <a href="/settings?section=comptes" target="_blank" rel="noreferrer">Créer un compte →</a>
-                  </p>
-                )}
-              </div>
-            )}
-            <div>
-              <label>Détenteur *</label>
-              <select required value={form.investisseur_id} onChange={e => setForm({ ...form, investisseur_id: e.target.value })}>
-                <option value="">—</option>
-                {investisseurs.filter(i => i.type !== 'entreprise').length > 0 && (
-                  <optgroup label="Famille">
-                    {investisseurs.filter(i => i.type !== 'entreprise').map(i => (
-                      <option key={i.id} value={i.id}>
-                        {i.nom}{i.is_principal ? ' (principal)' : ''}
-                      </option>
-                    ))}
-                  </optgroup>
-                )}
-                {investisseurs.filter(i => i.type === 'entreprise').length > 0 && (
-                  <optgroup label="Entreprises">
-                    {investisseurs.filter(i => i.type === 'entreprise').map(i => (
-                      <option key={i.id} value={i.id}>{i.nom}</option>
-                    ))}
-                  </optgroup>
-                )}
-              </select>
-            </div>
-            <div style={{ gridColumn: 'span 2' }}>
-              <label>Nom du projet *</label>
-              <input required value={form.nom_projet} onChange={e => setForm({ ...form, nom_projet: e.target.value })} />
-            </div>
-            <div>
-              <label>Type de prêt</label>
-              <select value={form.type_remb} onChange={e => {
-                const t = e.target.value;
-                const next = {
-                  ...form,
-                  type_remb: t,
-                  freq_interets: t === 'differe' ? 'in_fine' : (form.freq_interets === 'in_fine' ? 'mensuel' : form.freq_interets),
-                };
-                if (t === 'differe') {
-                  // Recalculer la date d'échéance depuis souscription+durée (prioritaire sur l'ancienne valeur)
-                  if (form.date_souscription && form.duree_mois) {
-                    const dpe = addMonthsFE(form.date_souscription, 1);
-                    const cible = addMonthsFE(dpe, Number(form.duree_mois) - 1);
-                    next.date_premiere_echeance = cible;
-                    next.date_cible = cible;
-                  } else if (form.date_premiere_echeance) {
-                    next.date_cible = form.date_premiere_echeance;
-                  }
-                } else {
-                  if (form.date_souscription) {
-                    next.date_premiere_echeance = addMonthsFE(form.date_souscription, 1);
-                    if (next.date_premiere_echeance && form.duree_mois)
-                      next.date_cible = addMonthsFE(next.date_premiere_echeance, Number(form.duree_mois) - 1);
-                  }
-                }
-                setForm(next);
-              }}>
-                <option value="in_fine">Prêt in fine</option>
-                <option value="amortissable">Prêt amortissable</option>
-                <option value="differe">Prêt différé</option>
-              </select>
-            </div>
-            <div>
-              <label>Fréquence intérêts</label>
-              <select
-                value={form.type_remb === 'differe' ? 'in_fine' : form.freq_interets}
-                disabled={form.type_remb === 'differe'}
-                onChange={e => setForm({ ...form, freq_interets: e.target.value })}
-              >
-                {form.type_remb === 'differe' ? (
-                  <option value="in_fine">In fine (unique)</option>
-                ) : (
-                  <>
-                    <option value="mensuel">Mensuel</option>
-                    <option value="trimestriel">Trimestriel</option>
-                  </>
-                )}
-              </select>
-            </div>
-            <div>
-              <label>Durée (mois)</label>
-              <input type="number" min="0" value={form.duree_mois} onChange={e => {
-                const duree = e.target.value;
-                const next = { ...form, duree_mois: duree };
-                if (duree) {
-                  if (form.type_remb === 'differe' && form.date_souscription) {
-                    const tempDpe = addMonthsFE(form.date_souscription, 1);
-                    const cible = addMonthsFE(tempDpe, Number(duree) - 1);
-                    next.date_premiere_echeance = cible;
-                    next.date_cible = cible;
-                  } else if (form.date_premiere_echeance) {
-                    next.date_cible = addMonthsFE(form.date_premiere_echeance, Number(duree) - 1);
-                  }
-                }
-                setForm(next);
-              }} />
-            </div>
-            <div>
-              <label>Taux annuel (%)</label>
-              <input type="number" step="0.01" value={form.taux_interet} onChange={e => setForm({ ...form, taux_interet: e.target.value })} />
-              {lastTauxRevision && (
           <div style={{ fontSize: 11, color: '#a78bfa', marginTop: 4, lineHeight: 1.4 }}>
             ⚠ Taux révisé le {fmtDate(lastTauxRevision.date_effet)}. Une modification ici ne sera pas tracée
             comme une révision — utilisez « Réviser les conditions » pour un changement lié à un événement.
           </div>
         )}
-            </div>
+        dateCibleRevisionWarning={lastDateCibleRevision && (
-            <div>
-              <label>Montant investi (€) *</label>
-              <input type="number" step="0.01" min="0" required value={form.montant_investi} onChange={e => setForm({ ...form, montant_investi: e.target.value })} />
-            </div>
-            <div>
-              <label>Date souscription *</label>
-              <input type="date" required value={form.date_souscription} onChange={e => {
-                const souscription = e.target.value;
-                setForm(prev => {
-                  const next = { ...prev, date_souscription: souscription };
-                  if (!souscription || souscription.length !== 10) return next;
-                  if (prev.type_remb === 'differe') {
-                    if (prev.duree_mois) {
-                      const tempDpe = addMonthsFE(souscription, 1);
-                      const cible = addMonthsFE(tempDpe, Number(prev.duree_mois) - 1);
-                      next.date_premiere_echeance = cible;
-                      next.date_cible = cible;
-                    }
-                  } else {
-                    // Pour in_fine / amortissable : recalcul systématique de premiere_echeance
-                    // (cohérent avec le comportement de "differe" et évite les faux négatifs
-                    // du test isAutoCalc quand premiere_echeance ne vaut pas exactement souscription+1m)
-                    next.date_premiere_echeance = addMonthsFE(souscription, 1);
-                    if (next.date_premiere_echeance && prev.duree_mois)
-                      next.date_cible = addMonthsFE(next.date_premiere_echeance, Number(prev.duree_mois) - 1);
-                  }
-                  return next;
-                });
-                // Mémorise la dernière souscription complète HORS setForm (évite les doubles appels Strict Mode)
-                if (souscription && souscription.length === 10) {
-                  lastValidSouscriptionRef.current = souscription;
-                }
-              }} />
-            </div>
-            <div>
-              <label>Date 1ère échéance</label>
-              <input
-                type="date"
-                value={form.date_premiere_echeance}
-                onChange={e => {
-                  const dpe = e.target.value;
-                  const next = { ...form, date_premiere_echeance: dpe };
-                  if (dayOfMonth(dpe) <= 27) next.echeance_fin_de_mois = false;
-                  if (form.type_remb === 'differe') {
-                    next.date_cible = dpe;
-                  } else if (dpe && form.duree_mois) {
-                    next.date_cible = next.echeance_fin_de_mois
-                      ? addMonthsFinDeMoisFE(dpe, Number(form.duree_mois) - 1)
-                      : addMonthsFE(dpe, Number(form.duree_mois) - 1);
-                  }
-                  setForm(next);
-                }}
-              />
-              {/* ── Case "Dernier jour du mois" — visible si jour > 27 ── */}
-              {(form.type_remb === 'in_fine' || form.type_remb === 'differe') &&
-               dayOfMonth(form.date_premiere_echeance) > 27 && (
-                <label style={{
-                  display: 'inline-flex', alignItems: 'center', gap: 8,
-                  marginTop: 6, cursor: 'pointer', userSelect: 'none',
-                  fontSize: 'var(--fs-sm)', color: 'var(--text)',
-                  width: 'fit-content',
-                }}>
-                  <input
-                    type="checkbox"
-                    style={{ width: 'auto', flexShrink: 0 }}
-                    checked={form.echeance_fin_de_mois}
-                    onChange={e => {
-                      const checked = e.target.checked;
-                      setForm(prev => {
-                        const next = { ...prev, echeance_fin_de_mois: checked };
-                        if (checked && prev.date_premiere_echeance) {
-                          const newDpe = lastDayOfMonthFE(prev.date_premiere_echeance);
-                          next.date_premiere_echeance = newDpe;
-                          if (prev.type_remb === 'differe') {
-                            next.date_cible = newDpe;
-                          } else if (newDpe && prev.duree_mois) {
-                            next.date_cible = addMonthsFinDeMoisFE(newDpe, Number(prev.duree_mois) - 1);
-                          }
-                        }
-                        return next;
-                      });
-                    }}
-                  />
-                  Dernier jour du mois
-                </label>
-              )}
-            </div>
-            <div>
-              <label>Date cible contractuelle{form.type_remb === 'differe' ? ' — calculée' : ''}</label>
-              <input
-                type="date"
-                value={form.date_cible}
-                readOnly={form.type_remb === 'differe'}
-                style={form.type_remb === 'differe' ? { opacity: 0.6, cursor: 'default' } : undefined}
-                onChange={e => {
-                  if (form.type_remb === 'differe') return;
-                  setForm({ ...form, date_cible: e.target.value });
-                }}
-              />
-              {lastDateCibleRevision && (
           <div style={{ fontSize: 11, color: '#a78bfa', marginTop: 4, lineHeight: 1.4 }}>
             ⚠ Date cible révisée le {fmtDate(lastDateCibleRevision.date_effet)}. Une modification ici ne sera pas tracée
             comme une révision — utilisez « Réviser les conditions » pour un changement lié à un événement.
           </div>
         )}
-            </div>
+        restructurationBlock={remb.length > 0 && (form.type_remb !== inv.type_remb || !!inv.date_debut_simul) && (
-            {/* Champ restructuration : visible uniquement si des remboursements existent
-                ET que le type de prêt a été modifié (ou qu'une date était déjà définie) */}
-            {remb.length > 0 && (form.type_remb !== inv.type_remb || !!inv.date_debut_simul) && (
           <div style={{ gridColumn: '1 / -1' }}>
             <div style={{
               borderLeft: '3px solid var(--warning, #f59e0b)',
@@ -2465,39 +2201,8 @@ export default function InvestissementDetail() {
             </div>
           </div>
         )}
-            <div>
+        width={720}
-              <label>Statut</label>
-              <select value={form.statut} onChange={e => setForm({ ...form, statut: e.target.value })}>
-                <option value="en_cours">En cours</option>
-                <option value="rembourse">Remboursé</option>
-                <option value="en_retard">En retard</option>
-                <option value="procedure">Procédure</option>
-                <option value="cloture">Clôturé</option>
-                <option value="perte_definitive">Perte définitive</option>
-              </select>
-            </div>
-            <div>
-              <label>Référence (ID plateforme)</label>
-              <input value={form.reference} onChange={e => setForm({ ...form, reference: e.target.value })} />
-            </div>
-            <div>
-              <label>Pays d'exposition</label>
-              <CountrySelect
-                value={form.pays_exposition || 'FR'}
-                onChange={code => setForm(f => ({ ...f, pays_exposition: code }))}
       />
-            </div>
-            <div>
-              <label>Émetteur</label>
-              <input value={form.emetteur} onChange={e => setForm({ ...form, emetteur: e.target.value })} />
-            </div>
-            <div style={{ gridColumn: '1 / -1' }}>
-              <label>Notes</label>
-              <textarea rows={2} value={form.notes} onChange={e => setForm({ ...form, notes: e.target.value })} />
-            </div>
-          </div>
-        </form>
-      </Modal>
 
       {/* ── Modal saisie remboursement (depuis projection) ────────── */}
       <RembFormModal

frontend/src/pages/Investissements.jsx

@@ -4,12 +4,12 @@ import Pagination from '../components/Pagination.jsx';
 import PageIcon from '../components/PageIcon.jsx';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { api } from '../api.js';
-import InvSelect from '../components/InvSelect.jsx';
+import InvestissementFormModal from '../components/InvestissementFormModal.jsx';
 import { useInvestisseur } from '../context/InvestisseurContext.jsx';
 import { useUi } from '../context/UiContext.jsx';
 import Modal from '../components/Modal.jsx';
 import ConfirmModal from '../components/ConfirmModal.jsx';
-import CountrySelect from '../components/CountrySelect.jsx';
+import { dayOfMonth } from '../utils/dateEcheances.js';
 import InvChart from '../components/InvChart.jsx';
 import DistributionChart from '../components/DistributionChart.jsx';
 import CapitalMensuelTable from '../components/CapitalMensuelTable.jsx';
@@ -241,38 +241,6 @@ const empty = {
   categories_inv_ids: [], secteurs_inv_ids: [],
 };
 
-function addMonthsFE(isoDate, n) {
-  if (!isoDate || !n) return '';
-  const [y, m, d] = isoDate.split('-').map(Number);
-  const dt = new Date(Date.UTC(y, m - 1 + n, d));
-  return dt.toISOString().slice(0, 10);
-}
-
-/** Retourne le dernier jour du mois de isoDate. Ex : '2024-01-28' → '2024-01-31' */
-function lastDayOfMonthFE(isoDate) {
-  if (!isoDate) return isoDate;
-  const [y, m] = isoDate.split('-').map(Number);
-  const dt = new Date(Date.UTC(y, m, 0)); // jour 0 du mois suivant
-  return dt.toISOString().slice(0, 10);
-}
-
-/**
- * Ajoute n mois et positionne sur le dernier jour du mois cible.
- * Évite les débordements JS (31 jan + 1 = 3 mar → ici = 29 fév).
- */
-function addMonthsFinDeMoisFE(isoDate, n) {
-  if (!isoDate || (n === undefined || n === null)) return '';
-  const [y, m] = isoDate.split('-').map(Number);
-  const dt = new Date(Date.UTC(y, m - 1 + Number(n) + 1, 0));
-  return dt.toISOString().slice(0, 10);
-}
-
-/** Retourne le numéro du jour dans le mois (1-31) ou 0 si absent. */
-function dayOfMonth(isoDate) {
-  if (!isoDate || isoDate.length < 10) return 0;
-  return parseInt(isoDate.slice(8, 10), 10);
-}
-
 /* ── Composant principal ─────────────────────────────────────── */
 export default function Investissements() {
   const { activeId, activeView, investisseurs } = useInvestisseur();
@@ -700,6 +668,33 @@ export default function Investissements() {
     setModalOpen(true);
   };
 
+  /** Changement de plateforme dans le formulaire : résout la méthode de remboursement,
+   *  le détenteur par défaut, et préremplit catégories/secteurs depuis la plateforme. */
+  const handlePlateformeChange = (platId) => {
+    const platObj = plats.find(p => String(p.id) === String(platId));
+    const platMethode = platObj?.methode_remboursement;
+    const newMethode = platMethode === 'choix_investisseur' ? '' : (platMethode || '');
+    if (platId) {
+      Promise.all([
+        api.get(`/plateformes/${platId}/categories-inv`).catch(() => []),
+        api.get(`/plateformes/${platId}/secteurs-inv`).catch(() => []),
+      ]).then(([platCats, platSects]) => {
+        setForm(f => ({ ...f,
+          plateforme_id: platId,
+          investisseur_id: investisseurForPlat(platId),
+          methode_remboursement: newMethode, compte_id: '',
+          categories_inv_ids: platCats.map(c => c.id),
+          secteurs_inv_ids:   platSects.map(s => s.id),
+        }));
+      });
+    } else {
+      setForm(f => ({ ...f, plateforme_id: platId, investisseur_id: investisseurForPlat(platId), methode_remboursement: newMethode, compte_id: '', categories_inv_ids: [], secteurs_inv_ids: [] }));
+    }
+  };
+
+  const handleCategoryAdded = (cat) => setCategoriesInv(prev => [...prev, cat].sort((a, b) => a.nom.localeCompare(b.nom)));
+  const handleSectorAdded   = (sect) => setSecteursInv(prev => [...prev, sect].sort((a, b) => a.nom.localeCompare(b.nom)));
+
   const close = () => { setModalOpen(false); setEditingId(null); setForm(empty); setErr(null); };
 
   const submit = async (e) => {
@@ -1282,347 +1277,26 @@ export default function Investissements() {
       )}
 
       {/* ── Modal création / édition ── */}
-      <Modal
+      <InvestissementFormModal
         open={modalOpen}
-        title={editingId ? 'Modifier l\'investissement' : 'Nouvel investissement'}
+        editingId={editingId}
         onClose={close}
+        onSubmit={submit}
+        form={form}
+        onFieldChange={(key, value) => setForm(f => ({ ...f, [key]: value }))}
+        onFormPatch={patch => setForm(f => typeof patch === 'function' ? patch(f) : { ...f, ...patch })}
+        err={err}
+        plats={plats}
+        multiDetenteur={multiDetenteur}
+        investisseurs={investisseurs}
+        comptesInvestisseur={comptesInvestisseur}
+        onPlateformeChange={handlePlateformeChange}
+        categoriesInv={categoriesInv}
+        secteursInv={secteursInv}
+        onCategoryAdded={handleCategoryAdded}
+        onSectorAdded={handleSectorAdded}
         width={720}
-        footer={
-          <>
-            <button onClick={close}>Annuler</button>
-            <button className="primary" onClick={submit}>{editingId ? 'Enregistrer' : 'Créer'}</button>
-          </>
-        }
-      >
-        <form onSubmit={submit}>
-          {err && <div className="error">{err}</div>}
-          <div className="form-grid">
-            <div>
-              <label>Plateforme *</label>
-              <select required value={form.plateforme_id} onChange={e => {
-                const platId = e.target.value;
-                const platObj = plats.find(p => String(p.id) === String(platId));
-                const platMethode = platObj?.methode_remboursement;
-                const newMethode = platMethode === 'choix_investisseur' ? '' : (platMethode || '');
-                // Pré-remplir catégories/secteurs depuis la plateforme
-                if (platId) {
-                  Promise.all([
-                    api.get(`/plateformes/${platId}/categories-inv`).catch(() => []),
-                    api.get(`/plateformes/${platId}/secteurs-inv`).catch(() => []),
-                  ]).then(([platCats, platSects]) => {
-                    setForm(f => ({ ...f,
-                      plateforme_id: platId,
-                      investisseur_id: investisseurForPlat(platId),
-                      methode_remboursement: newMethode, compte_id: '',
-                      categories_inv_ids: platCats.map(c => c.id),
-                      secteurs_inv_ids:   platSects.map(s => s.id),
-                    }));
-                  });
-                } else {
-                  setForm(f => ({ ...f, plateforme_id: platId, investisseur_id: investisseurForPlat(platId), methode_remboursement: newMethode, compte_id: '', categories_inv_ids: [], secteurs_inv_ids: [] }));
-                }
-              }}>
-                <option value="">—</option>
-                {plats.map(p => <option key={p.id} value={p.id}>{p.nom}{multiDetenteur && p.investisseur_nom ? ` — ${p.investisseur_nom}` : ''}</option>)}
-              </select>
-            </div>
-            {(() => {
-              const platMethode = plats.find(p => String(p.id) === String(form.plateforme_id))?.methode_remboursement;
-              if (!platMethode) return null;
-              if (platMethode === 'choix_investisseur') return (
-                <div>
-                  <label>Méthode de remboursement</label>
-                  <select value={form.methode_remboursement} onChange={e => {
-                    const methode = e.target.value;
-                    const defaultCompte = methode === 'compte_courant'
-                      ? (comptesInvestisseur.find(c => c.type === 'compte_courant') ?? comptesInvestisseur[0])
-                      : null;
-                    setForm({ ...form, methode_remboursement: methode, nom_compte_courant: defaultCompte?.nom || '', compte_id: String(defaultCompte?.id || '') });
-                  }}>
-                    <option value="">— Non renseignée —</option>
-                    <option value="portefeuille">Porte-monnaie de la plateforme</option>
-                    <option value="compte_courant">Compte courant de l'investisseur</option>
-                  </select>
-                </div>
-              );
-              // Méthode fixée par la plateforme — lecture seule
-              return (
-                <div>
-                  <label>Méthode de remboursement</label>
-                  <input readOnly value={platMethode === 'compte_courant' ? "Compte courant de l'investisseur" : 'Porte-monnaie de la plateforme'}
-                    style={{ background: 'var(--surface-2)', color: 'var(--text-muted)', cursor: 'default' }} />
-                </div>
-              );
-            })()}
-            {form.methode_remboursement === 'compte_courant' && (
-              <div>
-                <label>Compte de réception *</label>
-                {comptesInvestisseur.length > 0 ? (
-                  <select
-                    required
-                    value={form.compte_id}
-                    onChange={e => {
-                      const c = comptesInvestisseur.find(c => String(c.id) === e.target.value);
-                      setForm({ ...form, compte_id: e.target.value, nom_compte_courant: c?.nom || '' });
-                    }}
-                  >
-                    <option value="">— Choisir un compte —</option>
-                    {comptesInvestisseur.map(c => (
-                      <option key={c.id} value={c.id}>{c.nom}{c.banque ? ` — ${c.banque}` : ''}</option>
-                    ))}
-                  </select>
-                ) : (
-                  <p className="text-muted" style={{ fontSize: 'var(--fs-sm)', margin: '4px 0' }}>
-                    Aucun compte défini pour ce détenteur. <a href="/settings?section=comptes" target="_blank" rel="noreferrer">Créer un compte →</a>
-                  </p>
-                )}
-              </div>
-            )}
-            {/* Détenteur auto-déduit de la plateforme — champ masqué */}
-            <input type="hidden" value={form.investisseur_id} />
-
-            <div style={{ gridColumn: 'span 2' }}>
-              <label>Nom du projet *</label>
-              <input required value={form.nom_projet} onChange={e => setForm({ ...form, nom_projet: e.target.value })} />
-            </div>
-            <div>
-              <label>Montant investi (€) *</label>
-              <input type="number" step="0.01" min="0" required value={form.montant_investi}
-                onChange={e => setForm({ ...form, montant_investi: e.target.value })} />
-            </div>
-            <div>
-              <label>Taux annuel (%) *</label>
-              <input type="number" step="0.01" required value={form.taux_interet}
-                onChange={e => setForm({ ...form, taux_interet: e.target.value })} />
-            </div>
-            <div>
-              <label>Durée (mois) *</label>
-              <input type="number" min="0" required value={form.duree_mois} onChange={e => {
-                const duree = e.target.value;
-                const next = { ...form, duree_mois: duree };
-                if (duree) {
-                  if (form.type_remb === 'differe' && form.date_souscription) {
-                    const tempDpe = addMonthsFE(form.date_souscription, 1);
-                    const cible = addMonthsFE(tempDpe, Number(duree) - 1);
-                    next.date_premiere_echeance = cible;
-                    next.date_cible = cible;
-                  } else if (form.date_premiere_echeance) {
-                    next.date_cible = addMonthsFE(form.date_premiere_echeance, Number(duree) - 1);
-                  }
-                }
-                setForm(next);
-              }} />
-            </div>
-            <div>
-              <label>Type de prêt</label>
-              <select value={form.type_remb} onChange={e => {
-                const t = e.target.value;
-                const next = {
-                  ...form, type_remb: t,
-                  freq_interets: t === 'differe' ? 'in_fine' : (form.freq_interets === 'in_fine' ? 'mensuel' : form.freq_interets),
-                };
-                if (t === 'differe') {
-                  // Recalculer la date d'échéance depuis souscription+durée (prioritaire sur l'ancienne valeur)
-                  if (form.date_souscription && form.duree_mois) {
-                    const dpe = addMonthsFE(form.date_souscription, 1);
-                    const cible = addMonthsFE(dpe, Number(form.duree_mois) - 1);
-                    next.date_premiere_echeance = cible;
-                    next.date_cible = cible;
-                  } else if (form.date_premiere_echeance) {
-                    next.date_cible = form.date_premiere_echeance;
-                  }
-                } else {
-                  if (form.date_souscription) {
-                    next.date_premiere_echeance = addMonthsFE(form.date_souscription, 1);
-                    if (next.date_premiere_echeance && form.duree_mois) {
-                      next.date_cible = addMonthsFE(next.date_premiere_echeance, Number(form.duree_mois) - 1);
-                    }
-                  }
-                }
-                setForm(next);
-              }}>
-                <option value="in_fine">Prêt in fine</option>
-                <option value="amortissable">Prêt amortissable</option>
-                <option value="differe">Prêt différé</option>
-              </select>
-            </div>
-            <div>
-              <label>Fréquence intérêts</label>
-              <select
-                value={form.type_remb === 'differe' ? 'in_fine' : form.freq_interets}
-                disabled={form.type_remb === 'differe'}
-                onChange={e => setForm({ ...form, freq_interets: e.target.value })}
-              >
-                {form.type_remb === 'differe' ? (
-                  <option value="in_fine">In fine (unique)</option>
-                ) : (
-                  <>
-                    <option value="mensuel">Mensuel</option>
-                    <option value="trimestriel">Trimestriel</option>
-                  </>
-                )}
-              </select>
-            </div>
-            <div>
-              <label>Date souscription *</label>
-              <input type="date" required value={form.date_souscription} onChange={e => {
-                const souscription = e.target.value;
-                setForm(prev => {
-                  const next = { ...prev, date_souscription: souscription };
-                  if (!souscription || souscription.length !== 10) return next;
-                  if (prev.type_remb === 'differe') {
-                    if (prev.duree_mois) {
-                      const tempDpe = addMonthsFE(souscription, 1);
-                      const cible = addMonthsFE(tempDpe, Number(prev.duree_mois) - 1);
-                      next.date_premiere_echeance = cible;
-                      next.date_cible = cible;
-                    }
-                  } else {
-                    next.date_premiere_echeance = addMonthsFE(souscription, 1);
-                    if (next.date_premiere_echeance && prev.duree_mois) {
-                      next.date_cible = addMonthsFE(next.date_premiere_echeance, Number(prev.duree_mois) - 1);
-                    }
-                  }
-                  return next;
-                });
-                if (souscription && souscription.length === 10) {
-                  lastValidSouscriptionRef.current = souscription;
-                }
-              }} />
-            </div>
-            <div>
-              <label>{form.type_remb === 'differe' ? "Date d'échéance (versement unique) *" : 'Date 1ère échéance *'}</label>
-              <input type="date" required value={form.date_premiere_echeance}
-                onChange={e => {
-                  const dpe = e.target.value;
-                  const next = { ...form, date_premiere_echeance: dpe };
-                  // Si le jour passe à ≤ 27 on désactive fin-de-mois
-                  if (dayOfMonth(dpe) <= 27) next.echeance_fin_de_mois = false;
-                  if (form.type_remb === 'differe') {
-                    next.date_cible = dpe;
-                  } else if (dpe && form.duree_mois) {
-                    next.date_cible = next.echeance_fin_de_mois
-                      ? addMonthsFinDeMoisFE(dpe, Number(form.duree_mois) - 1)
-                      : addMonthsFE(dpe, Number(form.duree_mois) - 1);
-                  }
-                  setForm(next);
-                }}
       />
-              {/* ── Case "Dernier jour du mois" — visible si jour > 27 ── */}
-              {(form.type_remb === 'in_fine' || form.type_remb === 'differe') &&
-               dayOfMonth(form.date_premiere_echeance) > 27 && (
-                <label style={{
-                  display: 'inline-flex', alignItems: 'center', gap: 8,
-                  marginTop: 6, cursor: 'pointer', userSelect: 'none',
-                  fontSize: 'var(--fs-sm)', color: 'var(--text)',
-                  width: 'fit-content',
-                }}>
-                  <input
-                    type="checkbox"
-                    style={{ width: 'auto', flexShrink: 0 }}
-                    checked={form.echeance_fin_de_mois}
-                    onChange={e => {
-                      const checked = e.target.checked;
-                      setForm(prev => {
-                        const next = { ...prev, echeance_fin_de_mois: checked };
-                        if (checked && prev.date_premiere_echeance) {
-                          const newDpe = lastDayOfMonthFE(prev.date_premiere_echeance);
-                          next.date_premiere_echeance = newDpe;
-                          if (prev.type_remb === 'differe') {
-                            next.date_cible = newDpe;
-                          } else if (newDpe && prev.duree_mois) {
-                            next.date_cible = addMonthsFinDeMoisFE(newDpe, Number(prev.duree_mois) - 1);
-                          }
-                        }
-                        return next;
-                      });
-                    }}
-                  />
-                  Dernier jour du mois
-                </label>
-              )}
-            </div>
-            <div>
-              <label>Date cible contractuelle{form.type_remb === 'differe' ? ' — calculée' : ''}</label>
-              <input type="date" value={form.date_cible}
-                readOnly={form.type_remb === 'differe'}
-                onChange={e => setForm({ ...form, date_cible: e.target.value })}
-              />
-            </div>
-            <div>
-              <label>Pays d'exposition</label>
-              <CountrySelect
-                value={form.pays_exposition || 'FR'}
-                onChange={code => setForm(f => ({ ...f, pays_exposition: code }))}
-              />
-            </div>
-            <div>
-              <label>Émetteur</label>
-              <input value={form.emetteur}
-                onChange={e => setForm({ ...form, emetteur: e.target.value })}
-                placeholder="Nom de l'emprunteur"
-              />
-            </div>
-            {editingId && (
-              <div>
-                <label>Statut</label>
-                <select value={form.statut} onChange={e => setForm({ ...form, statut: e.target.value })}>
-                  <option value="en_cours">En cours</option>
-                  <option value="rembourse">Remboursé</option>
-                  <option value="en_retard">En retard</option>
-                  <option value="procedure">Procédure</option>
-                  <option value="cloture">Clôturé</option>
-                  <option value="perte_definitive">Perte définitive</option>
-                </select>
-              </div>
-            )}
-            <div>
-              <label>Référence</label>
-              <input value={form.reference}
-                onChange={e => setForm({ ...form, reference: e.target.value })}
-                placeholder="N° de dossier, code projet…"
-              />
-            </div>
-            <div style={{ gridColumn: 'span 2' }}>
-              <label>Notes</label>
-              <textarea rows={3} value={form.notes}
-                onChange={e => setForm({ ...form, notes: e.target.value })}
-                placeholder="Informations complémentaires…"
-              />
-            </div>
-
-            {/* Catégories d'investissement */}
-            <div style={{ gridColumn: 'span 3' }}>
-              <label>Catégories d'investissement</label>
-              <InvSelect
-                items={categoriesInv}
-                selected={form.categories_inv_ids || []}
-                onChange={ids => setForm(f => ({ ...f, categories_inv_ids: ids }))}
-                addApiPath="/categories-inv"
-                onItemAdded={cat => setCategoriesInv(prev => [...prev, cat].sort((a,b) => a.nom.localeCompare(b.nom)))}
-                emptyLabel="Aucune catégorie d'investissement"
-                addLabel="Ajouter une catégorie d'investissement"
-                inputPlaceholder="Nom de la catégorie…"
-              />
-            </div>
-
-            {/* Secteurs d'investissement */}
-            <div style={{ gridColumn: 'span 3' }}>
-              <label>Secteurs d'investissement</label>
-              <InvSelect
-                items={secteursInv}
-                selected={form.secteurs_inv_ids || []}
-                onChange={ids => setForm(f => ({ ...f, secteurs_inv_ids: ids }))}
-                addApiPath="/secteurs-inv"
-                onItemAdded={sect => setSecteursInv(prev => [...prev, sect].sort((a,b) => a.nom.localeCompare(b.nom)))}
-                emptyLabel="Aucun secteur d'investissement"
-                addLabel="Ajouter un secteur d'investissement"
-                inputPlaceholder="Nom du secteur…"
-              />
-            </div>
-          </div>
-        </form>
-      </Modal>
 
       {openMenu && (
         <>

frontend/src/utils/dateEcheances.js

@@ -0,0 +1,42 @@
+/**
+ * Helpers de calcul de dates pour les formulaires investissement
+ * (échéances, durée, fin de mois). Utilisés par InvestissementFormModal
+ * ainsi que par les pages Investissements / InvestissementDetail (ex. modale
+ * de révision des conditions).
+ *
+ * Extrait de code auparavant dupliqué à l'identique dans Investissements.jsx
+ * et InvestissementDetail.jsx.
+ */
+
+/** Ajoute n mois (calendaires, JS Date) à une date ISO. */
+export function addMonthsFE(isoDate, n) {
+  if (!isoDate || !n) return '';
+  const [y, m, d] = isoDate.split('-').map(Number);
+  const dt = new Date(Date.UTC(y, m - 1 + n, d));
+  return dt.toISOString().slice(0, 10);
+}
+
+/** Retourne le dernier jour du mois de isoDate. Ex : '2024-01-28' → '2024-01-31' */
+export function lastDayOfMonthFE(isoDate) {
+  if (!isoDate) return isoDate;
+  const [y, m] = isoDate.split('-').map(Number);
+  const dt = new Date(Date.UTC(y, m, 0)); // jour 0 du mois suivant
+  return dt.toISOString().slice(0, 10);
+}
+
+/**
+ * Ajoute n mois et positionne sur le dernier jour du mois cible.
+ * Évite les débordements JS (31 jan + 1 = 3 mar → ici = 29 fév).
+ */
+export function addMonthsFinDeMoisFE(isoDate, n) {
+  if (!isoDate || (n === undefined || n === null)) return '';
+  const [y, m] = isoDate.split('-').map(Number);
+  const dt = new Date(Date.UTC(y, m - 1 + Number(n) + 1, 0));
+  return dt.toISOString().slice(0, 10);
+}
+
+/** Retourne le numéro du jour dans le mois (1-31) ou 0 si absent. */
+export function dayOfMonth(isoDate) {
+  if (!isoDate || isoDate.length < 10) return 0;
+  return parseInt(isoDate.slice(8, 10), 10);
+}

frontend/vite.config.js.timestamp-1788000428327-c073ded7c221b.mjs

@@ -1,22 +0,0 @@
-// vite.config.js
-import { defineConfig } from "file:///sessions/rcw-01pwh3iqkqa3ylxs4htcpsue/mnt/C:--dev--crowdlending-app/frontend/node_modules/vite/dist/node/index.js";
-import react from "file:///sessions/rcw-01pwh3iqkqa3ylxs4htcpsue/mnt/C:--dev--crowdlending-app/frontend/node_modules/@vitejs/plugin-react/dist/index.js";
-var vite_config_default = defineConfig({
-  plugins: [react()],
-  server: {
-    port: 5173,
-    proxy: {
-      "/api": {
-        target: "http://localhost:4000",
-        changeOrigin: true
-      }
-    }
-  },
-  build: {
-    outDir: "dist"
-  }
-});
-export {
-  vite_config_default as default
-};
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvc2Vzc2lvbnMvcmN3LTAxcHdoM2lxa3FhM3lseHM0aHRjcHN1ZS9tbnQvQzotLWRldi0tY3Jvd2RsZW5kaW5nLWFwcC9mcm9udGVuZFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL3Nlc3Npb25zL3Jjdy0wMXB3aDNpcWtxYTN5bHhzNGh0Y3BzdWUvbW50L0M6LS1kZXYtLWNyb3dkbGVuZGluZy1hcHAvZnJvbnRlbmQvdml0ZS5jb25maWcuanNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL3Nlc3Npb25zL3Jjdy0wMXB3aDNpcWtxYTN5bHhzNGh0Y3BzdWUvbW50L0M6LS1kZXYtLWNyb3dkbGVuZGluZy1hcHAvZnJvbnRlbmQvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcclxuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0JztcclxuXHJcbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XHJcbiAgcGx1Z2luczogW3JlYWN0KCldLFxyXG4gIHNlcnZlcjoge1xyXG4gICAgcG9ydDogNTE3MyxcclxuICAgIHByb3h5OiB7XHJcbiAgICAgICcvYXBpJzoge1xyXG4gICAgICAgIHRhcmdldDogJ2h0dHA6Ly9sb2NhbGhvc3Q6NDAwMCcsXHJcbiAgICAgICAgY2hhbmdlT3JpZ2luOiB0cnVlLFxyXG4gICAgICB9LFxyXG4gICAgfSxcclxuICB9LFxyXG4gIGJ1aWxkOiB7XHJcbiAgICBvdXREaXI6ICdkaXN0JyxcclxuICB9LFxyXG59KTtcclxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUF5WixTQUFTLG9CQUFvQjtBQUN0YixPQUFPLFdBQVc7QUFFbEIsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUyxDQUFDLE1BQU0sQ0FBQztBQUFBLEVBQ2pCLFFBQVE7QUFBQSxJQUNOLE1BQU07QUFBQSxJQUNOLE9BQU87QUFBQSxNQUNMLFFBQVE7QUFBQSxRQUNOLFFBQVE7QUFBQSxRQUNSLGNBQWM7QUFBQSxNQUNoQjtBQUFBLElBQ0Y7QUFBQSxFQUNGO0FBQUEsRUFDQSxPQUFPO0FBQUEsSUFDTCxRQUFRO0FBQUEsRUFDVjtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==