feat: Précablage du formulaire dynamique [N3WTS-17]

Front-End/src/components/Inscription/DynamicFormsList.js

@@ -0,0 +1,295 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import FormRenderer from '@/components/Form/FormRenderer';
+import { CheckCircle, Hourglass, FileText } from 'lucide-react';
+import logger from '@/utils/logger';
+
+/**
+ * Composant pour afficher et gérer les formulaires dynamiques d'inscription
+ * @param {Array} schoolFileMasters - Liste des formulaires maîtres
+ * @param {Object} existingResponses - Réponses déjà sauvegardées
+ * @param {Function} onFormSubmit - Callback appelé quand un formulaire est soumis
+ * @param {Boolean} enable - Si les formulaires sont modifiables
+ */
+export default function DynamicFormsList({
+  schoolFileMasters,
+  existingResponses = {},
+  onFormSubmit,
+  enable = true,
+  onValidationChange,
+}) {
+  const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
+  const [formsData, setFormsData] = useState({});
+  const [formsValidation, setFormsValidation] = useState({});
+
+  // Initialiser les données avec les réponses existantes
+  useEffect(() => {
+    if (existingResponses && Object.keys(existingResponses).length > 0) {
+      setFormsData(existingResponses);
+
+      // Marquer les formulaires avec réponses comme valides
+      const validationState = {};
+      Object.keys(existingResponses).forEach((formId) => {
+        if (
+          existingResponses[formId] &&
+          Object.keys(existingResponses[formId]).length > 0
+        ) {
+          validationState[formId] = true;
+        }
+      });
+      setFormsValidation(validationState);
+    }
+  }, [existingResponses]);
+
+  // Debug: Log des formulaires maîtres reçus
+  useEffect(() => {
+    logger.debug(
+      'DynamicFormsList - Formulaires maîtres reçus:',
+      schoolFileMasters
+    );
+  }, [schoolFileMasters]);
+
+  // Mettre à jour la validation globale quand la validation des formulaires change
+  useEffect(() => {
+    const allFormsValid = schoolFileMasters.every(
+      (master, index) => formsValidation[master.id] === true
+    );
+
+    if (onValidationChange) {
+      onValidationChange(allFormsValid);
+    }
+  }, [formsValidation, schoolFileMasters, onValidationChange]);
+
+  /**
+   * Gère la soumission d'un formulaire individuel
+   */
+  const handleFormSubmit = async (formData, templateId) => {
+    try {
+      logger.debug('Soumission du formulaire:', { templateId, formData });
+
+      // Sauvegarder les données du formulaire
+      setFormsData((prev) => ({
+        ...prev,
+        [templateId]: formData,
+      }));
+
+      // Marquer le formulaire comme complété
+      setFormsValidation((prev) => ({
+        ...prev,
+        [templateId]: true,
+      }));
+
+      // Appeler le callback parent
+      if (onFormSubmit) {
+        await onFormSubmit(formData, templateId);
+      }
+
+      // Passer au formulaire suivant si disponible
+      if (currentTemplateIndex < schoolFileMasters.length - 1) {
+        setCurrentTemplateIndex(currentTemplateIndex + 1);
+      }
+
+      logger.debug('Formulaire soumis avec succès');
+    } catch (error) {
+      logger.error('Erreur lors de la soumission du formulaire:', error);
+    }
+  };
+
+  /**
+   * Gère les changements de validation d'un formulaire
+   */
+  const handleFormValidationChange = (isValid, templateId) => {
+    setFormsValidation((prev) => ({
+      ...prev,
+      [templateId]: isValid,
+    }));
+  };
+
+  /**
+   * Vérifie si un formulaire est complété
+   */
+  const isFormCompleted = (templateId) => {
+    return (
+      formsValidation[templateId] === true ||
+      (formsData[templateId] &&
+        Object.keys(formsData[templateId]).length > 0) ||
+      (existingResponses[templateId] &&
+        Object.keys(existingResponses[templateId]).length > 0)
+    );
+  };
+
+  /**
+   * Obtient l'icône de statut d'un formulaire
+   */
+  const getFormStatusIcon = (templateId, isActive) => {
+    if (isFormCompleted(templateId)) {
+      return <CheckCircle className="w-5 h-5 text-green-600" />;
+    }
+    if (isActive) {
+      return <FileText className="w-5 h-5 text-blue-600" />;
+    }
+    return <Hourglass className="w-5 h-5 text-gray-400" />;
+  };
+
+  /**
+   * Obtient le formulaire actuel à afficher
+   */
+  const getCurrentTemplate = () => {
+    return schoolFileMasters[currentTemplateIndex];
+  };
+
+  if (!schoolFileMasters || schoolFileMasters.length === 0) {
+    return (
+      <div className="text-center py-8">
+        <FileText className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+        <p className="text-gray-600 mb-4">Aucun formulaire à compléter</p>
+      </div>
+    );
+  }
+
+  const currentTemplate = getCurrentTemplate();
+
+  return (
+    <div className="mt-8 mb-4 w-full mx-auto flex gap-8">
+      {/* Liste des formulaires */}
+      <div className="w-1/4 bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
+        <h3 className="text-lg font-semibold text-gray-800 mb-4">
+          Formulaires à compléter
+        </h3>
+        <div className="text-sm text-gray-600 mb-4">
+          {
+            Object.keys(formsValidation).filter((id) => formsValidation[id])
+              .length
+          }{' '}
+          / {schoolFileMasters.length} complétés
+        </div>
+
+        <ul className="space-y-2">
+          {schoolFileMasters.map((master, index) => {
+            const isActive = index === currentTemplateIndex;
+            const isCompleted = isFormCompleted(master.id);
+
+            return (
+              <li
+                key={master.id}
+                className={`flex items-center cursor-pointer p-2 rounded-md transition-colors ${
+                  isActive
+                    ? 'bg-blue-100 text-blue-700 font-semibold'
+                    : isCompleted
+                      ? 'text-green-600 hover:bg-green-50'
+                      : 'text-gray-600 hover:bg-gray-100'
+                }`}
+                onClick={() => setCurrentTemplateIndex(index)}
+              >
+                <span className="mr-3">
+                  {getFormStatusIcon(master.id, isActive)}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm truncate">
+                    {master.formMasterData?.title ||
+                      master.title ||
+                      master.name ||
+                      'Formulaire sans nom'}
+                  </div>
+                  {isCompleted ? (
+                    <div className="text-xs text-green-600">
+                      Complété -{' '}
+                      {
+                        Object.keys(
+                          formsData[master.id] ||
+                            existingResponses[master.id] ||
+                            {}
+                        ).length
+                      }{' '}
+                      réponse(s)
+                    </div>
+                  ) : (
+                    <div className="text-xs text-gray-500">
+                      {master.formMasterData?.fields || master.fields
+                        ? `${(master.formMasterData?.fields || master.fields).length} champ(s)`
+                        : 'À compléter'}
+                    </div>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+
+      {/* Affichage du formulaire actuel */}
+      <div className="w-3/4">
+        {currentTemplate && (
+          <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+            <div className="mb-6">
+              <h3 className="text-xl font-semibold text-gray-800 mb-2">
+                {currentTemplate.formMasterData?.title ||
+                  currentTemplate.title ||
+                  currentTemplate.name ||
+                  'Formulaire sans nom'}
+              </h3>
+              <p className="text-sm text-gray-600">
+                {currentTemplate.formMasterData?.description ||
+                  currentTemplate.description ||
+                  'Veuillez compléter ce formulaire pour continuer votre inscription.'}
+              </p>
+              <div className="text-xs text-gray-500 mt-1">
+                Formulaire {currentTemplateIndex + 1} sur{' '}
+                {schoolFileMasters.length}
+              </div>
+            </div>
+
+            {/* Vérifier si le formulaire maître a des données de configuration */}
+            {(currentTemplate.formMasterData?.fields &&
+              currentTemplate.formMasterData.fields.length > 0) ||
+            (currentTemplate.fields && currentTemplate.fields.length > 0) ? (
+              <FormRenderer
+                key={currentTemplate.id}
+                formConfig={{
+                  id: currentTemplate.id,
+                  title:
+                    currentTemplate.formMasterData?.title ||
+                    currentTemplate.title ||
+                    currentTemplate.name ||
+                    'Formulaire',
+                  fields:
+                    currentTemplate.formMasterData?.fields ||
+                    currentTemplate.fields ||
+                    [],
+                  submitLabel:
+                    currentTemplate.formMasterData?.submitLabel || 'Valider',
+                }}
+                onFormSubmit={(formData) =>
+                  handleFormSubmit(formData, currentTemplate.id)
+                }
+              />
+            ) : (
+              <div className="text-center py-8">
+                <FileText className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+                <p className="text-gray-600">
+                  Ce formulaire n'est pas encore configuré.
+                </p>
+                <p className="text-sm text-gray-500 mt-2">
+                  Contactez l'administration pour plus d'informations.
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Message de fin */}
+        {currentTemplateIndex >= schoolFileMasters.length && (
+          <div className="text-center py-8">
+            <CheckCircle className="w-16 h-16 text-green-600 mx-auto mb-4" />
+            <h3 className="text-lg font-semibold text-green-600 mb-2">
+              Tous les formulaires ont été complétés !
+            </h3>
+            <p className="text-gray-600">
+              Vous pouvez maintenant passer à l'étape suivante.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

Front-End/src/components/Inscription/InscriptionFormShared.js

@@ -5,6 +5,10 @@ import DjangoCSRFToken from '@/components/DjangoCSRFToken';
 import {
   fetchSchoolFileTemplatesFromRegistrationFiles,
   fetchParentFileTemplatesFromRegistrationFiles,
+  fetchRegistrationSchoolFileMasters,
+  saveFormResponses,
+  fetchFormResponses,
+  autoSaveRegisterForm,
 } from '@/app/actions/subscriptionAction';
 import {
   downloadTemplate,
@@ -21,7 +25,8 @@ import { fetchProfiles } from '@/app/actions/authAction';
 import { BASE_URL, FE_PARENTS_HOME_URL } from '@/utils/Url';
 import logger from '@/utils/logger';
 import FilesToUpload from '@/components/Inscription/FilesToUpload';
-import { DocusealForm } from '@docuseal/react';
+import DynamicFormsList from '@/components/Inscription/DynamicFormsList';
+import AutoSaveIndicator from '@/components/AutoSaveIndicator';
 import StudentInfoForm from '@/components/Inscription/StudentInfoForm';
 import ResponsableInputFields from '@/components/Inscription/ResponsableInputFields';
 import SiblingInputFields from '@/components/Inscription/SiblingInputFields';
@@ -75,6 +80,8 @@ export default function InscriptionFormShared({
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
   const [parentFileTemplates, setParentFileTemplates] = useState([]);
+  const [schoolFileMasters, setSchoolFileMasters] = useState([]);
+  const [formResponses, setFormResponses] = useState({});
   const [currentPage, setCurrentPage] = useState(1);
 
   const [isPage1Valid, setIsPage1Valid] = useState(false);
@@ -90,6 +97,9 @@ export default function InscriptionFormShared({
   const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
 
   const [profiles, setProfiles] = useState([]);
+  const [isSaving, setIsSaving] = useState(false);
+  const [lastSaved, setLastSaved] = useState(null);
+  const [autoSaveEnabled, setAutoSaveEnabled] = useState(true);
 
   const router = useRouter();
 
@@ -121,18 +131,18 @@ export default function InscriptionFormShared({
   }, [schoolFileTemplates]);
 
   useEffect(() => {
-    // Vérifier si tous les templates ont leur champ "file" différent de null
-    const allSigned = schoolFileTemplates.every(
-      (template) => template.file !== null
-    );
+    // Vérifier si tous les formulaires maîtres sont complétés
+    const allCompleted =
+      schoolFileMasters.length === 0 ||
+      schoolFileMasters.every((master) => master.completed === true);
 
-    // Mettre à jour isPage4Valid en fonction de cette condition
-    setIsPage5Valid(allSigned);
+    // Mettre à jour isPage5Valid en fonction de cette condition
+    setIsPage5Valid(allCompleted);
 
-    if (allSigned) {
+    if (allCompleted) {
       setCurrentTemplateIndex(0);
     }
-  }, [schoolFileTemplates]);
+  }, [schoolFileMasters]);
 
   useEffect(() => {
     // Vérifier si tous les documents avec is_required = true ont leur champ "file" différent de null
@@ -145,57 +155,216 @@ export default function InscriptionFormShared({
     logger.debug(allRequiredUploaded);
   }, [parentFileTemplates]);
 
-  const handleTemplateSigned = (index) => {
-    const template = schoolFileTemplates[index];
+  // Auto-sauvegarde périodique (toutes les 30 secondes)
+  useEffect(() => {
+    if (!enable || !autoSaveEnabled) return;
 
-    if (!template) {
-      logger.error("Template introuvable pour l'index donné.");
+    const interval = setInterval(() => {
+      autoSave();
+    }, 30000); // 30 secondes
+
+    return () => clearInterval(interval);
+  }, [enable, autoSaveEnabled, formData, guardians, siblings]);
+
+  // Auto-sauvegarde quand les données changent (avec debounce)
+  useEffect(() => {
+    if (!enable || !autoSaveEnabled) return;
+
+    const timeout = setTimeout(() => {
+      autoSave();
+    }, 2000); // Attendre 2 secondes après le dernier changement
+
+    return () => clearTimeout(timeout);
+  }, [formData, guardians, siblings]);
+
+  /**
+   * Fonction d'auto-sauvegarde qui sauvegarde les données en cours
+   */
+  const autoSave = async () => {
+    if (!autoSaveEnabled || !studentId || isSaving) {
       return;
     }
 
-    // Télécharger le template
-    downloadTemplate(template.slug, selectedEstablishmentId, apiDocuseal)
-      .then((downloadUrl) => fetch(downloadUrl))
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error('Erreur lors du téléchargement du fichier.');
-        }
-        return response.blob();
-      })
-      .then((blob) => {
-        const file = new File([blob], `${template.name}.pdf`, {
-          type: blob.type,
-        });
-
-        // Préparer les données pour la mise à jour
-        const updateData = new FormData();
-        updateData.append('file', file);
-
-        // Mettre à jour le template via l'API
-        return editRegistrationSchoolFileTemplates(
-          template.id,
-          updateData,
-          csrfToken
-        );
-      })
-      .then((updatedTemplate) => {
-        logger.debug('Template mis à jour avec succès :', updatedTemplate);
-
-        // Mettre à jour l'état local de schoolFileTemplates
-        setSchoolFileTemplates((prevTemplates) => {
-          const updatedTemplates = prevTemplates.map((t, i) =>
-            i === index ? { ...t, file: updatedTemplate.data.file } : t
-          );
-          logger.debug(
-            'État schoolFileTemplates mis à jour :',
-            updatedTemplates
-          );
-          return updatedTemplates;
-        });
-      })
-      .catch((error) => {
-        logger.error('Erreur lors de la mise à jour du template :', error);
+    try {
+      setIsSaving(true);
+      logger.debug('Auto-sauvegarde en cours...', {
+        studentId,
+        formDataKeys: Object.keys(formData),
+        paymentFields: {
+          registration_payment: formData.registration_payment,
+          registration_payment_plan: formData.registration_payment_plan,
+          tuition_payment: formData.tuition_payment,
+          tuition_payment_plan: formData.tuition_payment_plan,
+        },
+        guardians: guardians.length,
+        siblings: siblings.length,
+        currentPage,
       });
+
+      // Fonction helper pour nettoyer les données avant sauvegarde
+      const cleanDataForAutoSave = (data) => {
+        const cleaned = {};
+        Object.keys(data).forEach((key) => {
+          const value = data[key];
+          // Garder seulement les valeurs non-vides et valides
+          if (value !== null && value !== undefined && value !== '') {
+            // Pour les dates, vérifier le format
+            if (key === 'birth_date' && value) {
+              // Vérifier que la date est dans un format valide
+              const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+              if (dateRegex.test(value)) {
+                cleaned[key] = value;
+              }
+            }
+            // Pour les codes postaux, vérifier que c'est un nombre
+            else if (key === 'birth_postal_code' && value) {
+              if (!isNaN(value) && value.toString().trim() !== '') {
+                cleaned[key] = parseInt(value);
+              }
+            }
+            // Pour les champs de paiement, toujours les inclure s'ils ont une valeur
+            else if (key.includes('payment') && value) {
+              cleaned[key] = value;
+            }
+            // Pour les autres champs, garder la valeur si elle n'est pas vide
+            else if (value.toString().trim() !== '') {
+              cleaned[key] = value;
+            }
+          }
+        });
+        return cleaned;
+      };
+
+      // Préparer les données à sauvegarder avec nettoyage
+      const cleanedFormData = cleanDataForAutoSave(formData);
+
+      const dataToSave = {
+        student: cleanedFormData,
+        guardians: guardians.filter(
+          (guardian) =>
+            guardian &&
+            (guardian.first_name || guardian.last_name || guardian.email)
+        ),
+        siblings: siblings.filter(
+          (sibling) => sibling && (sibling.first_name || sibling.last_name)
+        ),
+        currentPage: currentPage,
+      };
+
+      // Utiliser la fonction d'auto-save dédiée
+      await autoSaveRegisterForm(studentId, dataToSave, csrfToken);
+
+      setLastSaved(new Date());
+      logger.debug('Auto-sauvegarde réussie');
+    } catch (error) {
+      logger.error("Erreur lors de l'auto-sauvegarde:", error);
+      // Ne pas afficher d'erreur à l'utilisateur pour l'auto-save
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  /**
+   * Gère la sauvegarde à chaque changement d'étape
+   */
+  const saveStepData = async () => {
+    await autoSave();
+  };
+
+  /**
+   * Gère la soumission d'un formulaire dynamique
+   */
+  const handleDynamicFormSubmit = async (formData, templateId) => {
+    try {
+      logger.debug('Soumission du formulaire dynamique:', {
+        templateId,
+        formData,
+        csrfToken: !!csrfToken,
+      });
+
+      // Trouver le template correspondant pour récupérer sa configuration
+      const currentTemplate = schoolFileMasters.find(
+        (master) => master.id === templateId
+      );
+      if (!currentTemplate) {
+        throw new Error(`Template avec l'ID ${templateId} non trouvé`);
+      }
+
+      // Construire la structure complète avec la configuration et les réponses
+      const formTemplateData = {
+        id: currentTemplate.id,
+        title:
+          currentTemplate.formMasterData?.title ||
+          currentTemplate.title ||
+          currentTemplate.name ||
+          'Formulaire',
+        fields: (
+          currentTemplate.formMasterData?.fields ||
+          currentTemplate.fields ||
+          []
+        ).map((field) => ({
+          ...field,
+          // Ajouter la réponse de l'utilisateur selon le type de champ
+          ...(field.type === 'checkbox'
+            ? { checked: formData[field.id] || false }
+            : {}),
+          ...(field.type === 'radio' ? { selected: formData[field.id] } : {}),
+          ...(field.type === 'text' ||
+          field.type === 'textarea' ||
+          field.type === 'email'
+            ? { value: formData[field.id] || '' }
+            : {}),
+        })),
+        submitLabel: currentTemplate.formMasterData?.submitLabel || 'Valider',
+        responses: formData, // Garder aussi les réponses brutes pour facilité d'accès
+      };
+
+      // Sauvegarder les réponses du formulaire via l'API RegistrationSchoolFileTemplate
+      logger.debug('Appel API saveFormResponses avec:', {
+        templateId,
+        formTemplateData,
+      });
+      const result = await saveFormResponses(
+        templateId,
+        formTemplateData,
+        csrfToken
+      );
+      logger.debug("Réponse de l'API:", result);
+
+      // Mettre à jour l'état local des réponses
+      setFormResponses((prev) => ({
+        ...prev,
+        [templateId]: formData,
+      }));
+
+      // Mettre à jour l'état local pour indiquer que le formulaire est complété
+      setSchoolFileMasters((prevMasters) => {
+        return prevMasters.map((master) =>
+          master.id === templateId
+            ? { ...master, completed: true, responses: formData }
+            : master
+        );
+      });
+
+      logger.debug('Formulaire dynamique sauvegardé avec succès');
+      return Promise.resolve();
+    } catch (error) {
+      logger.error('Erreur lors de la soumission du formulaire dynamique:', {
+        templateId,
+        error: error.message,
+        stack: error.stack,
+      });
+      // Afficher l'erreur à l'utilisateur
+      alert(`Erreur lors de la sauvegarde du formulaire: ${error.message}`);
+      return Promise.reject(error);
+    }
+  };
+
+  /**
+   * Gère les changements de validation des formulaires dynamiques
+   */
+  const handleDynamicFormsValidationChange = (isValid) => {
+    setIsPage5Valid(isValid);
   };
 
   useEffect(() => {
@@ -223,6 +392,66 @@ export default function InscriptionFormShared({
       .catch((error) => logger.error('Error fetching profiles : ', error));
 
     if (selectedEstablishmentId) {
+      // Fetch data for school file masters
+      fetchRegistrationSchoolFileMasters(selectedEstablishmentId)
+        .then(async (data) => {
+          logger.debug('School file masters fetched:', data);
+          setSchoolFileMasters(data);
+
+          // Récupérer les données existantes de chaque template
+          const responsesMap = {};
+          for (const master of data) {
+            if (master.id) {
+              try {
+                const templateData = await fetchFormResponses(master.id);
+                if (templateData && templateData.formTemplateData) {
+                  // Si on a les réponses brutes sauvegardées, les utiliser
+                  if (templateData.formTemplateData.responses) {
+                    responsesMap[master.id] =
+                      templateData.formTemplateData.responses;
+                  } else {
+                    // Sinon, extraire les réponses depuis les champs
+                    const responses = {};
+                    if (templateData.formTemplateData.fields) {
+                      templateData.formTemplateData.fields.forEach((field) => {
+                        if (
+                          field.type === 'checkbox' &&
+                          field.checked !== undefined
+                        ) {
+                          responses[field.id] = field.checked;
+                        } else if (
+                          field.type === 'radio' &&
+                          field.selected !== undefined
+                        ) {
+                          responses[field.id] = field.selected;
+                        } else if (
+                          (field.type === 'text' ||
+                            field.type === 'textarea' ||
+                            field.type === 'email') &&
+                          field.value !== undefined
+                        ) {
+                          responses[field.id] = field.value;
+                        }
+                      });
+                    }
+                    responsesMap[master.id] = responses;
+                  }
+                }
+              } catch (error) {
+                logger.debug(
+                  `Pas de données existantes pour le template ${master.id}:`,
+                  error
+                );
+                // Ce n'est pas critique si un template n'a pas de données
+              }
+            }
+          }
+          setFormResponses(responsesMap);
+        })
+        .catch((error) =>
+          logger.error('Error fetching school file masters:', error)
+        );
+
       // Fetch data for registration payment modes
       handleRegistrationPaymentModes();
 
@@ -423,11 +652,16 @@ export default function InscriptionFormShared({
     onSubmit(formDataToSend);
   };
 
-  const handleNextPage = () => {
+  const handleNextPage = async () => {
+    // Sauvegarder avant de passer à l'étape suivante
+    await saveStepData();
+    setHasInteracted(false);
     setCurrentPage(currentPage + 1);
   };
 
-  const handlePreviousPage = () => {
+  const handlePreviousPage = async () => {
+    // Sauvegarder avant de revenir à l'étape précédente
+    await saveStepData();
     setCurrentPage(currentPage - 1);
   };
 
@@ -479,7 +713,18 @@ export default function InscriptionFormShared({
         setStep={setCurrentPage}
         isStepValid={isStepValid}
       />
-      <div className="flex-1 h-full mt-12 ">
+
+      {/* Indicateur de sauvegarde automatique */}
+      {enable && (
+        <AutoSaveIndicator
+          isSaving={isSaving}
+          lastSaved={lastSaved}
+          autoSaveEnabled={autoSaveEnabled}
+          onToggleAutoSave={() => setAutoSaveEnabled(!autoSaveEnabled)}
+        />
+      )}
+
+      <div className="flex-1 h-full mt-6">
         {/* Page 1 : Informations sur l'élève */}
         {currentPage === 1 && (
           <StudentInfoForm
@@ -538,86 +783,15 @@ export default function InscriptionFormShared({
           </>
         )}
 
-        {/* Page 5 : Section Fichiers d'inscription */}
+        {/* Page 5 : Formulaires dynamiques d'inscription */}
         {currentPage === 5 && (
-          <div className="mt-8 mb-4 w-full mx-auto flex gap-8">
-            {/* Liste des états de signature */}
-            <div className="w-1/4 bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
-              <h3 className="text-lg font-semibold text-gray-800 mb-4">
-                Documents
-              </h3>
-              <ul className="space-y-2">
-                {schoolFileTemplates.map((template, index) => (
-                  <li
-                    key={template.id}
-                    className={`flex items-center cursor-pointer ${
-                      index === currentTemplateIndex
-                        ? 'text-blue-600 font-bold'
-                        : template.file !== null
-                          ? 'text-green-600'
-                          : 'text-gray-600'
-                    }`}
-                    onClick={() => setCurrentTemplateIndex(index)} // Mettre à jour l'index du template actuel
-                  >
-                    <span className="mr-2">
-                      {template.file !== null ? (
-                        <CheckCircle className="w-5 h-5 text-green-600" />
-                      ) : (
-                        <Hourglass className="w-5 h-5 text-gray-600" />
-                      )}
-                    </span>
-                    {template.name || 'Document sans nom'}
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Affichage du fichier actuel */}
-            <div className="w-3/4">
-              {currentTemplateIndex < schoolFileTemplates.length && (
-                <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-                  <h3 className="text-lg font-semibold text-gray-800 mb-4">
-                    {schoolFileTemplates[currentTemplateIndex].name ||
-                      'Document sans nom'}
-                  </h3>
-                  <p className="text-sm text-gray-500 mb-4">
-                    {schoolFileTemplates[currentTemplateIndex].description ||
-                      'Aucune description disponible pour ce document.'}
-                  </p>
-
-                  {schoolFileTemplates[currentTemplateIndex].file === null ? (
-                    <DocusealForm
-                      key={schoolFileTemplates[currentTemplateIndex].slug}
-                      id="docusealForm"
-                      src={`https://docuseal.com/s/${schoolFileTemplates[currentTemplateIndex].slug}`}
-                      withDownloadButton={false}
-                      withTitle={false}
-                      onComplete={() =>
-                        handleTemplateSigned(currentTemplateIndex)
-                      }
-                    />
-                  ) : (
-                    <iframe
-                      src={`${BASE_URL}${schoolFileTemplates[currentTemplateIndex].file}`}
-                      title="Document Viewer"
-                      className="w-full"
-                      style={{
-                        height: '75vh',
-                        border: 'none',
-                      }}
-                    />
-                  )}
-                </div>
-              )}
-
-              {/* Message de fin */}
-              {currentTemplateIndex >= schoolFileTemplates.length && (
-                <div className="text-center text-green-600 font-semibold">
-                  Tous les formulaires ont été signés avec succès !
-                </div>
-              )}
-            </div>
-          </div>
+          <DynamicFormsList
+            schoolFileMasters={schoolFileMasters}
+            existingResponses={formResponses}
+            onFormSubmit={handleDynamicFormSubmit}
+            onValidationChange={handleDynamicFormsValidationChange}
+            enable={enable}
+          />
         )}
 
         {/* Dernière page : Section Fichiers parents */}