From daad12cf40ce3b628581892f9a894a0841baa5e3 Mon Sep 17 00:00:00 2001
From: N3WT DE COMPET <n3wt.school@gmail.com>
Date: Sat, 26 Apr 2025 16:43:25 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Ordonnancement=20de=20l'inscription=20s?=
 =?UTF-8?q?ur=20plusieurs=20pages=20+=20contr=C3=B4le=20des=20champs=20rem?=
 =?UTF-8?q?plis=20dans=20le=20formulaire?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/[locale]/users/login/page.js      |   7 +-
 .../Inscription/InscriptionFormShared.js      | 304 +++++++++---------
 .../Inscription/PaymentMethodSelector.js      | 136 +++++---
 .../Inscription/ResponsableInputFields.js     |  75 ++++-
 .../components/Inscription/StudentInfoForm.js | 179 +++++++----
 5 files changed, 437 insertions(+), 264 deletions(-)

diff --git a/Front-End/src/app/[locale]/users/login/page.js b/Front-End/src/app/[locale]/users/login/page.js
index 2e6be43..47b1c8d 100644
--- a/Front-End/src/app/[locale]/users/login/page.js
+++ b/Front-End/src/app/[locale]/users/login/page.js
@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import DjangoCSRFToken from '@/components/DjangoCSRFToken';
 import Logo from '@/components/Logo';
-import { useSearchParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import InputTextIcon from '@/components/InputTextIcon';
 import Loader from '@/components/Loader'; // Importez le composant Loader
 import Button from '@/components/Button'; // Importez le composant Button
@@ -16,7 +16,6 @@ import logger from '@/utils/logger';
 import { useEstablishment } from '@/context/EstablishmentContext';
 
 export default function Page() {
-  const searchParams = useSearchParams();
   const [errorMessage, setErrorMessage] = useState('');
   const [userFieldError, setUserFieldError] = useState('');
   const [passwordFieldError, setPasswordFieldError] = useState('');
@@ -26,10 +25,6 @@ export default function Page() {
   const router = useRouter();
   const csrfToken = useCsrfToken(); // Utilisez le hook useCsrfToken
 
-  function isOK(data) {
-    return data.errorMessage === '';
-  }
-
   function handleFormLogin(formData) {
     setIsLoading(true);
     setErrorMessage('');
diff --git a/Front-End/src/components/Inscription/InscriptionFormShared.js b/Front-End/src/components/Inscription/InscriptionFormShared.js
index 445eba6..ad8fff6 100644
--- a/Front-End/src/components/Inscription/InscriptionFormShared.js
+++ b/Front-End/src/components/Inscription/InscriptionFormShared.js
@@ -1,10 +1,8 @@
 // Import des dépendances nécessaires
 import React, { useState, useEffect } from 'react';
-import Loader from '@/components/Loader';
 import Button from '@/components/Button';
 import DjangoCSRFToken from '@/components/DjangoCSRFToken';
 import {
-  fetchRegisterForm,
   fetchSchoolFileTemplatesFromRegistrationFiles,
   fetchParentFileTemplatesFromRegistrationFiles,
 } from '@/app/actions/subscriptionAction';
@@ -19,11 +17,12 @@ import {
 } from '@/app/actions/schoolAction';
 import { BASE_URL } from '@/utils/Url';
 import logger from '@/utils/logger';
-import StudentInfoForm, {
-  validateStudentInfo,
-} from '@/components/Inscription/StudentInfoForm';
 import FilesToUpload from '@/components/Inscription/FilesToUpload';
 import { DocusealForm } from '@docuseal/react';
+import StudentInfoForm from '@/components/Inscription/StudentInfoForm';
+import ResponsableInputFields from '@/components/Inscription/ResponsableInputFields';
+import PaymentMethodSelector from '@/components/Inscription/PaymentMethodSelector';
+import ProgressStep from '@/components/ProgressStep';
 
 /**
  * Composant de formulaire d'inscription partagé
@@ -41,7 +40,6 @@ export default function InscriptionFormShared({
   errors = {}, // Nouvelle prop pour les erreurs
 }) {
   // États pour gérer les données du formulaire
-  const [isLoading, setIsLoading] = useState(true);
   const [formData, setFormData] = useState({
     id: '',
     last_name: '',
@@ -67,44 +65,13 @@ export default function InscriptionFormShared({
   const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
   const [parentFileTemplates, setParentFileTemplates] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
+  const [isSignatureComplete, setIsSignatureComplete] = useState(false);
 
-  const isCurrentPageValid = () => {
-    if (currentPage === 1) {
-      const isValid = validateStudentInfo(formData);
-      return isValid;
-    }
-    return true;
-  };
+  const [isPage1Valid, setIsPage1Valid] = useState(false);
+  const [isPage2Valid, setIsPage2Valid] = useState(false);
+  const [isPage3Valid, setIsPage3Valid] = useState(false);
 
-  // Chargement initial des données
-  // Mettre à jour les données quand initialData change
-  useEffect(() => {
-    if (studentId) {
-      fetchRegisterForm(studentId).then((data) => {
-        logger.debug(data);
-
-        setFormData({
-          id: data?.student?.id || '',
-          last_name: data?.student?.last_name || '',
-          first_name: data?.student?.first_name || '',
-          address: data?.student?.address || '',
-          birth_date: data?.student?.birth_date || '',
-          birth_place: data?.student?.birth_place || '',
-          birth_postal_code: data?.student?.birth_postal_code || '',
-          nationality: data?.student?.nationality || '',
-          attending_physician: data?.student?.attending_physician || '',
-          level: data?.student?.level || '',
-          registration_payment: data?.registration_payment || '',
-          tuition_payment: data?.tuition_payment || '',
-          totalRegistrationFees: data?.totalRegistrationFees,
-          totalTuitionFees: data?.totalTuitionFees,
-        });
-        setGuardians(data?.student?.guardians || []);
-      });
-
-      setIsLoading(false);
-    }
-  }, [studentId]);
+  const [hasInteracted, setHasInteracted] = useState(false);
 
   useEffect(() => {
     fetchSchoolFileTemplatesFromRegistrationFiles(studentId).then((data) => {
@@ -159,11 +126,6 @@ export default function InscriptionFormShared({
       );
   };
 
-  // Fonctions de gestion du formulaire et des fichiers
-  const updateFormField = (field, value) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-  };
-
   const handleFileUpload = (file, selectedFile) => {
     if (!file || !selectedFile) {
       logger.error('Données manquantes pour le téléversement.');
@@ -265,19 +227,6 @@ export default function InscriptionFormShared({
     onSubmit(data);
   };
 
-  // Soumission du formulaire
-  const handleSave = (e) => {
-    e.preventDefault();
-    const data = {
-      student: {
-        ...formData,
-        guardians,
-      },
-      establishment: selectedEstablishmentId,
-    };
-    onSubmit(data);
-  };
-
   const handleNextPage = () => {
     setCurrentPage(currentPage + 1);
   };
@@ -286,96 +235,163 @@ export default function InscriptionFormShared({
     setCurrentPage(currentPage - 1);
   };
 
-  // Affichage du loader pendant le chargement
-  if (isLoading) return <Loader />;
+  const stepTitles = {
+    1: 'Elève',
+    2: 'Responsables légaux',
+    3: "Modalités de paiement",
+    4: "Formulaires à signer",
+    5: "Pièces à fournir",
+    6: "Validation"
+  };
+
+  const steps = [
+    'Élève',
+    'Responsable',
+    'Paiement',
+    'Formulaires',
+    'Documents parent',
+    'Validation'
+  ];
+
+  const isStepValid = (stepNumber) => {
+    switch (stepNumber) {
+      case 1:
+        return isPage1Valid;
+      case 2:
+        return isPage2Valid;
+      case 3:
+        return isPage3Valid;
+      default:
+        return false;
+    }
+  };
 
   // Rendu du composant
   return (
     <div className="mx-auto p-6">
-      <form onSubmit={handleSubmit} className="space-y-8">
-        <DjangoCSRFToken csrfToken={csrfToken} />
-        {/* Page 1 : Informations de l'élève et Responsables */}
+      <DjangoCSRFToken csrfToken={csrfToken} />
+      <ProgressStep
+        steps={steps}
+        stepTitles={stepTitles}
+        currentStep={currentPage}
+        setStep={setCurrentPage}
+        isStepValid={isStepValid}
+      />
+      <div className="flex-1 overflow-y-auto mt-12 " style={{ maxHeight: 'calc(100vh - 300px)' }}>
+        {/* Page 1 : Informations sur l'élève */}
         {currentPage === 1 && (
           <StudentInfoForm
+            studentId={studentId}
             formData={formData}
-            updateFormField={updateFormField}
+            setFormData={setFormData}
             guardians={guardians}
             setGuardians={setGuardians}
-            registrationPaymentModes={registrationPaymentModes}
-            tuitionPaymentModes={tuitionPaymentModes}
             errors={errors}
+            setIsPageValid={setIsPage1Valid}
+            hasInteracted={hasInteracted}
+            setHasInteracted={setHasInteracted}
           />
         )}
 
+        {/* Page 2 : Informations sur les responsables légaux */}
+        {currentPage === 2 && (
+          <ResponsableInputFields
+            guardians={guardians}
+            setGuardians={setGuardians}
+            errors={errors}
+            setIsPageValid={setIsPage2Valid}
+          />
+        )}
+
+        {/* Page 3 : Informations sur les modalités de paiement */}
+        {currentPage === 3 && (
+          <>
+            <PaymentMethodSelector
+              formData={formData}
+              setFormData={setFormData}
+              registrationPaymentModes={registrationPaymentModes}
+              tuitionPaymentModes={tuitionPaymentModes}
+              errors={errors}
+              setIsPageValid={setIsPage3Valid}
+            />
+          </>
+        )}
+
         {/* Pages suivantes : Section Fichiers d'inscription */}
-        {currentPage > 1 && currentPage <= schoolFileTemplates.length + 1 && (
-          <div className="mt-8 mb-4 w-3/5">
-            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-              {/* Titre du document */}
-              <div className="mb-4">
-                <h2 className="text-lg font-semibold text-gray-800">
-                  {schoolFileTemplates[currentPage - 2].name ||
-                    'Document sans nom'}
-                </h2>
-                <p className="text-sm text-gray-500">
-                  {schoolFileTemplates[currentPage - 2].description ||
-                    'Aucune description disponible pour ce document.'}
-                </p>
-              </div>
+        {currentPage === 4 && (
+          <div className="mt-8 mb-4 w-3/5 mx-auto">
+            {schoolFileTemplates.length > 0 && (
+              <div className="mt-8 mb-4 w-3/5 mx-auto">
+                  {/* Titre du document */}
+                  <div className="mb-4">
+                    <h2 className="text-lg font-semibold text-gray-800">
+                      {schoolFileTemplates[currentPage - 2].name ||
+                        'Document sans nom'}
+                    </h2>
+                    <p className="text-sm text-gray-500">
+                      {schoolFileTemplates[currentPage - 2].description ||
+                        'Aucune description disponible pour ce document.'}
+                    </p>
+                  </div>
 
-              {/* Affichage du formulaire ou du document */}
-              {schoolFileTemplates[currentPage - 2].file === null ? (
-                <DocusealForm
-                  id="docusealForm"
-                  src={
-                    'https://docuseal.com/s/' +
-                    schoolFileTemplates[currentPage - 2].slug
-                  }
-                  withDownloadButton={false}
-                  onComplete={() => {
-                    downloadTemplate(schoolFileTemplates[currentPage - 2].slug)
-                      .then((data) => fetch(data))
-                      .then((response) => response.blob())
-                      .then((blob) => {
-                        const file = new File(
-                          [blob],
-                          `${schoolFileTemplates[currentPage - 2].name}.pdf`,
-                          { type: blob.type }
-                        );
-                        const updateData = new FormData();
-                        updateData.append('file', file);
+                  {/* Affichage du formulaire ou du document */}
+                  {schoolFileTemplates[currentPage - 2].file === null ? (
+                    <DocusealForm
+                      key={schoolFileTemplates[currentPage - 2].slug} // Clé unique basée sur le slug du document
+                      id="docusealForm"
+                      src={
+                        'https://docuseal.com/s/' +
+                        schoolFileTemplates[currentPage - 2].slug
+                      }
+                      withDownloadButton={false}
+                      withTitle={false}
+                      onComplete={() => {
+                        downloadTemplate(schoolFileTemplates[currentPage - 2].slug)
+                          .then((data) => fetch(data))
+                          .then((response) => response.blob())
+                          .then((blob) => {
+                            const file = new File(
+                              [blob],
+                              `${schoolFileTemplates[currentPage - 2].name}.pdf`,
+                              { type: blob.type }
+                            );
+                            const updateData = new FormData();
+                            updateData.append('file', file);
 
-                        return editRegistrationSchoolFileTemplates(
-                          schoolFileTemplates[currentPage - 2].id,
-                          updateData,
-                          csrfToken
-                        );
-                      })
-                      .then((data) => {
-                        logger.debug('EDIT TEMPLATE : ', data);
-                      })
-                      .catch((error) => {
-                        logger.error('error editing template : ', error);
-                      });
-                  }}
-                />
-              ) : (
-                <iframe
-                  src={`${BASE_URL}/${schoolFileTemplates[currentPage - 2].file}`}
-                  title="Document Viewer"
-                  className="w-full"
-                  style={{
-                    height: '75vh', // Ajuster la hauteur à 75% de la fenêtre
-                    border: 'none',
-                  }}
-                />
+                            return editRegistrationSchoolFileTemplates(
+                              schoolFileTemplates[currentPage - 2].id,
+                              updateData,
+                              csrfToken
+                            );
+                          })
+                          .then((data) => {
+                            logger.debug('EDIT TEMPLATE : ', data);
+                            setIsSignatureComplete(true);
+                          })
+                          .catch((error) => {
+                            logger.error('error editing template : ', error);
+                            setIsSignatureComplete(false);
+                          });
+                      }}
+                    />
+                  ) : (
+                    <iframe
+                      src={`${BASE_URL}/${schoolFileTemplates[currentPage - 2].file}`}
+                      title="Document Viewer"
+                      className="w-full"
+                      style={{
+                        height: '75vh', // Ajuster la hauteur à 75% de la fenêtre
+                        border: 'none',
+                      }}
+                    />
+                  )}
+                </div>
               )}
-            </div>
-          </div>
+           </div>
         )}
 
         {/* Dernière page : Section Fichiers parents */}
-        {currentPage === schoolFileTemplates.length + 2 && (
+        {currentPage === 5 && (
           <FilesToUpload
             parentFileTemplates={parentFileTemplates}
             uploadedFiles={uploadedFiles}
@@ -383,16 +399,10 @@ export default function InscriptionFormShared({
             onFileDelete={handleDeleteFile}
           />
         )}
+      </div>
 
         {/* Boutons de contrôle */}
-        <div className="flex justify-center space-x-4">
-          <Button
-            text="Sauvegarder"
-            onClick={handleSave}
-            className="px-4 py-2 rounded-md shadow-sm focus:outline-none bg-orange-500 text-white hover:bg-orange-600"
-            primary
-            name="Save"
-          />
+        <div className="flex justify-center space-x-4 mt-12">
           {currentPage > 1 && (
             <Button
               text="Précédent"
@@ -400,9 +410,10 @@ export default function InscriptionFormShared({
                 e.preventDefault();
                 handlePreviousPage();
               }}
+              primary
             />
           )}
-          {currentPage < schoolFileTemplates.length + 2 && (
+          {currentPage < steps.length && (
             <Button
               text="Suivant"
               onClick={(e) => {
@@ -410,20 +421,25 @@ export default function InscriptionFormShared({
                 handleNextPage();
               }}
               className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
-                !isCurrentPageValid()
+                (currentPage === 1 && !isPage1Valid) ||
+                (currentPage === 2 && !isPage2Valid) ||
+                (currentPage === 3 && !isPage3Valid)
                   ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
                   : 'bg-emerald-500 text-white hover:bg-emerald-600'
               }`}
-              disabled={!isCurrentPageValid()}
+              disabled={
+                (currentPage === 1 && !isPage1Valid) ||
+                (currentPage === 2 && !isPage2Valid) ||
+                (currentPage === 3 && !isPage3Valid)
+              }
               primary
               name="Next"
             />
           )}
-          {currentPage === schoolFileTemplates.length + 2 && (
-            <Button type="submit" text="Valider" primary />
+          {currentPage === steps.length && (
+            <Button onClick={handleSubmit} text="Valider" primary />
           )}
         </div>
-      </form>
     </div>
   );
 }
diff --git a/Front-End/src/components/Inscription/PaymentMethodSelector.js b/Front-End/src/components/Inscription/PaymentMethodSelector.js
index 9195398..3d945c8 100644
--- a/Front-End/src/components/Inscription/PaymentMethodSelector.js
+++ b/Front-End/src/components/Inscription/PaymentMethodSelector.js
@@ -1,48 +1,108 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import SelectChoice from '@/components/SelectChoice';
 
 export default function PaymentMethodSelector({
   formData,
-  title,
-  name,
-  updateFormField,
-  selected,
-  paymentModes,
-  paymentModesOptions,
-  amount,
-  getError,
+  setFormData,
+  registrationPaymentModes,
+  tuitionPaymentModes,
+  errors,
+  setIsPageValid
 }) {
-  //console.log(paymentModes)
-  //console.log(selected)
-  return (
-    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-      {/* Titre */}
-      <h2 className="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">
-        {title}
-      </h2>
 
-      {/* Section d'information */}
-      <div className="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-100">
-        <p className="text-gray-700 text-sm mb-2">
-          <strong className="text-gray-900">Montant :</strong> {amount} €
-        </p>
+  useEffect(() => {
+    const isValid = !Object.keys(formData).some((field) => getLocalError(field) !== '');
+    console.log(isValid)
+    setIsPageValid(isValid);
+  }, [formData, setIsPageValid]);
+
+  const paymentModesOptions = [
+    { id: 1, name: 'Prélèvement SEPA' },
+    { id: 2, name: 'Virement' },
+    { id: 3, name: 'Chèque' },
+    { id: 4, name: 'Espèce' },
+  ];
+
+  const getError = (field) => {
+    return errors?.student?.[field]?.[0];
+  };
+
+  const getLocalError = (field) => {
+    if (
+      // Student Form
+      ( field === 'registration_payment' && (!formData.registration_payment || String(formData.registration_payment).trim() === '') ) ||
+      ( field === 'tuition_payment' && (!formData.tuition_payment || String(formData.tuition_payment).trim() === '') )
+    ) {
+      return 'Champs requis';
+    }
+    return '';
+  };
+
+  const onChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <>
+      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+        {/* Titre */}
+        <h2 className="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">
+        Frais d'inscription
+        </h2>
+
+        {/* Section d'information */}
+        <div className="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-100">
+          <p className="text-gray-700 text-sm mb-2">
+            <strong className="text-gray-900">Montant :</strong> {formData.totalRegistrationFees} €
+          </p>
+        </div>
+
+        <SelectChoice
+          name="registration_payment"
+          label="Mode de Paiement"
+          placeHolder="Sélectionner un mode de paiement"
+          selected={formData.registration_payment}
+          callback={(e) => onChange("registration_payment", e.target.value)}
+          choices={registrationPaymentModes.map((mode) => ({
+            value: mode.mode,
+            label:
+              paymentModesOptions.find((option) => option.id === mode.mode)
+                ?.name || 'Mode inconnu',
+          }))}
+          required
+          errorMsg={getError("registration_payment") || getLocalError("registration_payment")}
+        />
       </div>
 
-      <SelectChoice
-        name={name}
-        label="Mode de Paiement"
-        placeHolder="Sélectionner un mode de paiement"
-        selected={selected || ''}
-        callback={(e) => updateFormField(name, e.target.value)}
-        choices={paymentModes.map((mode) => ({
-          value: mode.mode,
-          label:
-            paymentModesOptions.find((option) => option.id === mode.mode)
-              ?.name || 'Mode inconnu',
-        }))}
-        required
-        errorMsg={getError('payment_method')}
-      />
-    </div>
+      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mt-12">
+        {/* Titre */}
+        <h2 className="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">
+        Frais de scolarité
+        </h2>
+
+        {/* Section d'information */}
+        <div className="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-100">
+          <p className="text-gray-700 text-sm mb-2">
+            <strong className="text-gray-900">Montant :</strong> {formData.totalTuitionFees} €
+          </p>
+        </div>
+
+        <SelectChoice
+          name="tuition_payment"
+          label="Mode de Paiement"
+          placeHolder="Sélectionner un mode de paiement"
+          selected={formData.tuition_payment}
+          callback={(e) => onChange("tuition_payment", e.target.value)}
+          choices={tuitionPaymentModes.map((mode) => ({
+            value: mode.mode,
+            label:
+              paymentModesOptions.find((option) => option.id === mode.mode)
+                ?.name || 'Mode inconnu',
+          }))}
+          required
+          errorMsg={getError("tuition_payment") || getLocalError("tuition_payment")}
+        />
+      </div>
+    </>
   );
 }
diff --git a/Front-End/src/components/Inscription/ResponsableInputFields.js b/Front-End/src/components/Inscription/ResponsableInputFields.js
index f880a1e..3026250 100644
--- a/Front-End/src/components/Inscription/ResponsableInputFields.js
+++ b/Front-End/src/components/Inscription/ResponsableInputFields.js
@@ -1,27 +1,70 @@
 import InputText from '@/components/InputText';
 import InputPhone from '@/components/InputPhone';
-import Button from '@/components/Button';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
-import { Trash2, Plus } from 'lucide-react';
+import { Trash2, Plus, Users } from 'lucide-react';
+import SectionHeader from '@/components/SectionHeader';
 
 export default function ResponsableInputFields({
   guardians,
-  onGuardiansChange,
-  addGuardian,
-  deleteGuardian,
-  errors = [],
+  setGuardians,
+  errors,
+  setIsPageValid
 }) {
   const t = useTranslations('ResponsableInputFields');
 
+  useEffect(() => {
+    const isValid = guardians.length > 0 && guardians.every((guardian, index) => {
+      return !Object.keys(guardian).some((field) => getLocalError(index, field) !== '');
+    });
+
+    setIsPageValid(isValid);
+  }, [guardians, setIsPageValid]);
+
   const getError = (index, field) => {
     return errors[index]?.[field]?.[0];
   };
 
+  const getLocalError = (index, field) => {
+    if (
+      // Student Form
+      ( field === 'last_name' && (!guardians[index].last_name || guardians[index].last_name.trim() === '') ) ||
+      ( field === 'first_name' && (!guardians[index].first_name || guardians[index].first_name.trim() === '') ) ||
+      ( field === 'email' && (!guardians[index].associated_profile_email || guardians[index].associated_profile_email.trim() === '') ) ||
+      ( field === 'birth_date' && (!guardians[index].birth_date || guardians[index].birth_date.trim() === '') ) ||
+      ( field === 'profession' && (!guardians[index].profession || guardians[index].profession.trim() === '') ) ||
+      ( field === 'address' && (!guardians[index].address || guardians[index].address.trim() === '') )
+    ) {
+      return 'Champs requis';
+    }
+    return '';
+  };
+  
+  const onGuardiansChange = (id, field, value) => {
+    const updatedGuardians = guardians.map((guardian) =>
+      guardian.id === id ? { ...guardian, [field]: value } : guardian
+    );
+    setGuardians(updatedGuardians);
+  };
+
+  const addGuardian = () => {
+    setGuardians([...guardians, { id: Date.now(), name: '', email: '' }]);
+  };
+  
+  const deleteGuardian = (index) => {
+    const updatedGuardians = guardians.filter((_, i) => i !== index);
+    setGuardians(updatedGuardians);
+  };
+
   return (
-    <div className="space-y-8">
+    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+      <SectionHeader
+        icon={Users}
+        title={`Responsables légaux`}
+        description={`Remplissez les champs requis`}
+      />
       {guardians.map((item, index) => (
-        <div className="p-6 bg-gray-50 rounded-lg shadow-sm" key={index}>
+        <div className="p-6 " key={index}>
           <div className="flex justify-between items-center mb-4">
             <h3 className="text-xl font-bold">
               {t('responsable')} {index + 1}
@@ -45,7 +88,7 @@ export default function ResponsableInputFields({
               onChange={(event) => {
                 onGuardiansChange(item.id, 'last_name', event.target.value);
               }}
-              errorMsg={getError(index, 'last_name')}
+              errorMsg={getError(index, 'last_name') || getLocalError(index, 'last_name')}
               required
             />
             <InputText
@@ -56,7 +99,7 @@ export default function ResponsableInputFields({
               onChange={(event) => {
                 onGuardiansChange(item.id, 'first_name', event.target.value);
               }}
-              errorMsg={getError(index, 'first_name')}
+              errorMsg={getError(index, 'first_name') || getLocalError(index, 'first_name')}
               required
             />
           </div>
@@ -75,11 +118,11 @@ export default function ResponsableInputFields({
                 );
               }}
               required
-              errorMsg={getError(index, 'email')}
+              errorMsg={getError(index, 'email')  || getLocalError(index, 'email')}
             />
             <InputPhone
               name="telephoneResponsable"
-              label={t('phone')}
+              label='phone'
               value={item.phone}
               onChange={(event) => {
                 onGuardiansChange(item.id, 'phone', event);
@@ -99,7 +142,7 @@ export default function ResponsableInputFields({
                 onGuardiansChange(item.id, 'birth_date', event.target.value);
               }}
               required
-              errorMsg={getError(index, 'birth_date')}
+              errorMsg={getError(index, 'birth_date') || getLocalError(index, 'birth_date')}
             />
             <InputText
               name="professionResponsable"
@@ -110,7 +153,7 @@ export default function ResponsableInputFields({
                 onGuardiansChange(item.id, 'profession', event.target.value);
               }}
               required
-              errorMsg={getError(index, 'profession')}
+              errorMsg={getError(index, 'profession') || getLocalError(index, 'profession')}
             />
           </div>
 
@@ -124,7 +167,7 @@ export default function ResponsableInputFields({
                 onGuardiansChange(item.id, 'address', event.target.value);
               }}
               required
-              errorMsg={getError(index, 'address')}
+              errorMsg={getError(index, 'address') || getLocalError(index, 'address')}
             />
           </div>
         </div>
diff --git a/Front-End/src/components/Inscription/StudentInfoForm.js b/Front-End/src/components/Inscription/StudentInfoForm.js
index 4a6b594..62a4d6e 100644
--- a/Front-End/src/components/Inscription/StudentInfoForm.js
+++ b/Front-End/src/components/Inscription/StudentInfoForm.js
@@ -1,79 +1,135 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import InputText from '@/components/InputText';
 import SelectChoice from '@/components/SelectChoice';
-import ResponsableInputFields from '@/components/Inscription/ResponsableInputFields';
-import PaymentMethodSelector from '@/components/Inscription/PaymentMethodSelector';
+import Loader from '@/components/Loader';
+import {
+  fetchRegisterForm
+} from '@/app/actions/subscriptionAction';
+import logger from '@/utils/logger';
+import SectionHeader from '@/components/SectionHeader';
+import { User } from 'lucide-react';
 
 const levels = [
   { value: '1', label: 'TPS - Très Petite Section' },
   { value: '2', label: 'PS - Petite Section' },
   { value: '3', label: 'MS - Moyenne Section' },
   { value: '4', label: 'GS - Grande Section' },
+  { value: '5', label: 'CP' },
+  { value: '6', label: 'CE1' },
+  { value: '7', label: 'CE2' },
+  { value: '8', label: 'CM1' },
+  { value: '9', label: 'CM2' },
 ];
 
-const paymentModesOptions = [
-  { id: 1, name: 'Prélèvement SEPA' },
-  { id: 2, name: 'Virement' },
-  { id: 3, name: 'Chèque' },
-  { id: 4, name: 'Espèce' },
-];
-
-// Fonction de validation pour vérifier les champs requis
-export function validateStudentInfo(formData) {
-  const requiredFields = [
-    'last_name',
-    'first_name',
-    'nationality',
-    'birth_date',
-    'birth_place',
-    'birth_postal_code',
-    'address',
-    'attending_physician',
-    'level',
-  ];
-
-  const isValid = requiredFields.every((field) => {
-    const value = formData[field];
-    return typeof value === 'string' ? value.trim() !== '' : Boolean(value);
-  });
-
-  return isValid;
-}
-
 export default function StudentInfoForm({
+  studentId,
   formData,
-  updateFormField,
-  guardians,
+  setFormData,
   setGuardians,
-  registrationPaymentModes,
-  tuitionPaymentModes,
   errors,
+  setIsPageValid,
+  hasInteracted,
+  setHasInteracted
 }) {
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (studentId && !hasInteracted) {
+      fetchRegisterForm(studentId).then((data) => {
+        logger.debug(data);
+
+        setFormData({
+          id: data?.student?.id || '',
+          last_name: data?.student?.last_name || '',
+          first_name: data?.student?.first_name || '',
+          address: data?.student?.address || '',
+          birth_date: data?.student?.birth_date || '',
+          birth_place: data?.student?.birth_place || '',
+          birth_postal_code: data?.student?.birth_postal_code || '',
+          nationality: data?.student?.nationality || '',
+          attending_physician: data?.student?.attending_physician || '',
+          level: data?.student?.level || '',
+          registration_payment: data?.registration_payment || '',
+          tuition_payment: data?.tuition_payment || '',
+          totalRegistrationFees: data?.totalRegistrationFees,
+          totalTuitionFees: data?.totalTuitionFees,
+        });
+        setGuardians(data?.student?.guardians || []);
+      });
+
+      setIsLoading(false);
+    }
+    else {
+      setIsLoading(false);
+    }
+  }, [studentId, hasInteracted]);
+
+  useEffect(() => {
+    const isValid = !Object.keys(formData).some((field) => getLocalError(field) !== '');
+    setIsPageValid(isValid);
+  }, [formData, hasInteracted, setIsPageValid]);
+
   const getError = (field) => {
     return errors?.student?.[field]?.[0];
   };
 
+  const getLocalError = (field) => {
+    if (!hasInteracted) {
+      return ''; // Ne pas afficher les erreurs locales au premier chargement
+    }
+    if (
+      // Student Form
+      ( field === 'last_name' && (!formData.last_name || formData.last_name.trim() === '') ) ||
+      ( field === 'first_name' && (!formData.first_name || formData.first_name.trim() === '') ) ||
+      ( field === 'nationality' && (!formData.nationality || formData.nationality.trim() === '') ) ||
+      ( field === 'birth_date' && (!formData.birth_date || formData.birth_date.trim() === '') ) ||
+      ( field === 'birth_place' && (!formData.birth_place || formData.birth_place.trim() === '') ) ||
+      ( field === 'birth_postal_code' && (!formData.birth_postal_code || String(formData.birth_postal_code).trim() === '') ) ||
+      ( field === 'address' && (!formData.address || formData.address.trim() === '') ) ||
+      ( field === 'attending_physician' && (!formData.attending_physician || formData.attending_physician.trim() === '') ) ||
+      ( field === 'level' && (!formData.level || String(formData.level).trim() === '') )
+    ) {
+      return 'Champs requis';
+    }
+    return '';
+  };
+
+  const onChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+
+    // Marquer que l'utilisateur a interagi avec le formulaire
+    if (!hasInteracted) {
+      setHasInteracted(true);
+    }
+  };
+
+  // Affichage du loader pendant le chargement
+  if (isLoading) return <Loader />;
+
   return (
     <>
       <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-        <h2 className="text-xl font-bold mb-4 text-gray-800">
-          Informations de l&apos;élève
-        </h2>
+        <SectionHeader
+          icon={User}
+          title={`Informations de l'élève`}
+          description={`Remplissez les champs requis`}
+        />
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <InputText
             name="last_name"
             label="Nom"
             value={formData.last_name}
-            onChange={(e) => updateFormField('last_name', e.target.value)}
+            onChange={(e) => onChange('last_name', e.target.value)}
             required
-            errorMsg={getError('last_name')}
+            errorMsg={getError('last_name') || getLocalError('last_name')}
           />
           <InputText
             name="first_name"
             label="Prénom"
             value={formData.first_name}
-            onChange={(e) => updateFormField('first_name', e.target.value)}
-            errorMsg={getError('first_name')}
+            onChange={(e) => onChange('first_name', e.target.value)}
+            errorMsg={getError('first_name') || getLocalError('first_name')}
             required
           />
           <InputText
@@ -81,43 +137,44 @@ export default function StudentInfoForm({
             label="Nationalité"
             value={formData.nationality}
             required
-            onChange={(e) => updateFormField('nationality', e.target.value)}
+            onChange={(e) => onChange('nationality', e.target.value)}
+            errorMsg={getError('nationality') || getLocalError('nationality')}
           />
           <InputText
             name="birth_date"
             type="date"
             label="Date de Naissance"
             value={formData.birth_date}
-            onChange={(e) => updateFormField('birth_date', e.target.value)}
+            onChange={(e) => onChange('birth_date', e.target.value)}
             required
-            errorMsg={getError('birth_date')}
+            errorMsg={getError('birth_date') || getLocalError('birth_date')}
           />
           <InputText
             name="birth_place"
             label="Lieu de Naissance"
             value={formData.birth_place}
-            onChange={(e) => updateFormField('birth_place', e.target.value)}
+            onChange={(e) => onChange('birth_place', e.target.value)}
             required
-            errorMsg={getError('birth_place')}
+            errorMsg={getError('birth_place') || getLocalError('birth_place')}
           />
           <InputText
             name="birth_postal_code"
             label="Code Postal de Naissance"
             value={formData.birth_postal_code}
             onChange={(e) =>
-              updateFormField('birth_postal_code', e.target.value)
+              onChange('birth_postal_code', e.target.value)
             }
             required
-            errorMsg={getError('birth_postal_code')}
+            errorMsg={getError('birth_postal_code') || getLocalError('birth_postal_code')}
           />
           <div className="md:col-span-2">
             <InputText
               name="address"
               label="Adresse"
               value={formData.address}
-              onChange={(e) => updateFormField('address', e.target.value)}
+              onChange={(e) => onChange('address', e.target.value)}
               required
-              errorMsg={getError('address')}
+              errorMsg={getError('address') || getLocalError('address')}
             />
           </div>
           <InputText
@@ -125,25 +182,25 @@ export default function StudentInfoForm({
             label="Médecin Traitant"
             value={formData.attending_physician}
             onChange={(e) =>
-              updateFormField('attending_physician', e.target.value)
+              onChange('attending_physician', e.target.value)
             }
             required
-            errorMsg={getError('attending_physician')}
+            errorMsg={getError('attending_physician') || getLocalError('attending_physician')}
           />
           <SelectChoice
             name="level"
             label="Niveau"
             placeHolder="Sélectionner un niveau"
             selected={formData.level}
-            callback={(e) => updateFormField('level', e.target.value)}
+            callback={(e) => onChange('level', e.target.value)}
             choices={levels}
             required
-            errorMsg={getError('level')}
+            errorMsg={getError('level') || getLocalError('level')}
           />
         </div>
       </div>
 
-      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+      {/* <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
         <h2 className="text-xl font-bold mb-4 text-gray-800">Responsables</h2>
         <ResponsableInputFields
           guardians={guardians}
@@ -170,25 +227,27 @@ export default function StudentInfoForm({
         formData={formData}
         title="Frais d'inscription"
         name="registration_payment"
-        updateFormField={updateFormField}
+        onChange={onChange}
         selected={formData.registration_payment}
         paymentModes={registrationPaymentModes}
         paymentModesOptions={paymentModesOptions}
         amount={formData.totalRegistrationFees}
         getError={getError}
+        getLocalError={getLocalError}
       />
 
       <PaymentMethodSelector
         formData={formData}
         title="Frais de scolarité"
         name="tuition_payment"
-        updateFormField={updateFormField}
+        onChange={onChange}
         selected={formData.tuition_payment}
         paymentModes={tuitionPaymentModes}
         paymentModesOptions={paymentModesOptions}
         amount={formData.totalTuitionFees}
         getError={getError}
-      />
+        getLocalError={getLocalError}
+      /> */}
     </>
   );
 }