feat: Ajout de la fratrie / Gestion des index de fratrie / Gestion des

required

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

@@ -21,6 +21,11 @@ const levels = [
   { value: '9', label: 'CM2' },
 ];
 
+const genders = [
+  { value: '1', label: 'Garçon' },
+  { value: '2', label: 'Fille' },
+];
+
 export default function StudentInfoForm({
   studentId,
   formData,
@@ -46,6 +51,7 @@ export default function StudentInfoForm({
           photo: photoPath,
           last_name: data?.student?.last_name || '',
           first_name: data?.student?.first_name || '',
+          gender: data?.student?.gender || '',
           address: data?.student?.address || '',
           birth_date: data?.student?.birth_date || '',
           birth_place: data?.student?.birth_place || '',
@@ -109,6 +115,8 @@ export default function StudentInfoForm({
         (!formData.last_name || formData.last_name.trim() === '')) ||
       (field === 'first_name' &&
         (!formData.first_name || formData.first_name.trim() === '')) ||
+      (field === 'gender' &&
+        (!formData.gender || String(formData.gender).trim() === '')) ||
       (field === 'nationality' &&
         (!formData.nationality || formData.nationality.trim() === '')) ||
       (field === 'birth_date' &&
@@ -124,8 +132,7 @@ export default function StudentInfoForm({
         (!formData.attending_physician ||
           formData.attending_physician.trim() === '')) ||
       (field === 'level' &&
-        (!formData.level || String(formData.level).trim() === '')) ||
-      (field === 'photo' && !formData.photo)
+        (!formData.level || String(formData.level).trim() === ''))
     ) {
       return 'Champs requis';
     }
@@ -156,37 +163,44 @@ export default function StudentInfoForm({
 
   return (
     <>
-      <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 space-y-8">
         <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">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           <InputText
             name="last_name"
             label="Nom"
             value={formData.last_name}
             onChange={(e) => onChange('last_name', e.target.value)}
             required
-            errorMsg={getError('last_name') || getLocalError('last_name')}
+            errorMsg={getError('last_name')}
+            errorLocalMsg={getLocalError('last_name')}
           />
           <InputText
             name="first_name"
             label="Prénom"
             value={formData.first_name}
             onChange={(e) => onChange('first_name', e.target.value)}
-            errorMsg={getError('first_name') || getLocalError('first_name')}
+            errorMsg={getError('first_name')}
+            errorLocalMsg={getLocalError('first_name')}
             required
           />
-          <InputText
-            name="nationality"
-            label="Nationalité"
-            value={formData.nationality}
+          <SelectChoice
+            name="gender"
+            label="Genre"
+            placeHolder="Sélectionner un genre"
+            selected={formData.gender}
+            callback={(e) => onChange('gender', e.target.value)}
+            choices={genders}
             required
-            onChange={(e) => onChange('nationality', e.target.value)}
-            errorMsg={getError('nationality') || getLocalError('nationality')}
+            errorMsg={getError('gender')}
+            errorLocalMsg={getLocalError('gender')}
           />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           <InputText
             name="birth_date"
             type="date"
@@ -194,7 +208,8 @@ export default function StudentInfoForm({
             value={formData.birth_date}
             onChange={(e) => onChange('birth_date', e.target.value)}
             required
-            errorMsg={getError('birth_date') || getLocalError('birth_date')}
+            errorMsg={getError('birth_date')}
+            errorLocalMsg={getLocalError('birth_date')}
           />
           <InputText
             name="birth_place"
@@ -202,7 +217,8 @@ export default function StudentInfoForm({
             value={formData.birth_place}
             onChange={(e) => onChange('birth_place', e.target.value)}
             required
-            errorMsg={getError('birth_place') || getLocalError('birth_place')}
+            errorMsg={getError('birth_place')}
+            errorLocalMsg={getLocalError('birth_place')}
           />
           <InputText
             name="birth_postal_code"
@@ -210,31 +226,39 @@ export default function StudentInfoForm({
             value={formData.birth_postal_code}
             onChange={(e) => onChange('birth_postal_code', e.target.value)}
             required
-            errorMsg={
-              getError('birth_postal_code') ||
-              getLocalError('birth_postal_code')
-            }
+            errorMsg={getError('birth_postal_code')}
+            errorLocalMsg={getLocalError('birth_postal_code')}
           />
-          <div className="md:col-span-2">
-            <InputText
-              name="address"
-              label="Adresse"
-              value={formData.address}
-              onChange={(e) => onChange('address', e.target.value)}
-              required
-              errorMsg={getError('address') || getLocalError('address')}
-            />
-          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <InputText
+            name="nationality"
+            label="Nationalité"
+            value={formData.nationality}
+            required
+            onChange={(e) => onChange('nationality', e.target.value)}
+            errorMsg={getError('nationality')}
+            errorLocalMsg={getLocalError('nationality')}
+          />
+          <InputText
+            name="address"
+            label="Adresse"
+            value={formData.address}
+            onChange={(e) => onChange('address', e.target.value)}
+            required
+            errorMsg={getError('address')}
+            errorLocalMsg={getLocalError('address')}
+          />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
           <InputText
             name="attending_physician"
             label="Médecin Traitant"
             value={formData.attending_physician}
             onChange={(e) => onChange('attending_physician', e.target.value)}
             required
-            errorMsg={
-              getError('attending_physician') ||
-              getLocalError('attending_physician')
-            }
+            errorMsg={getError('attending_physician')}
+            errorLocalMsg={getLocalError('attending_physician')}
           />
           <SelectChoice
             name="level"
@@ -244,25 +268,18 @@ export default function StudentInfoForm({
             callback={(e) => onChange('level', e.target.value)}
             choices={levels}
             required
-            errorMsg={getError('level') || getLocalError('level')}
+            errorMsg={getError('level')}
+            errorLocalMsg={getLocalError('level')}
+          />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-1 gap-8">
+          <FileUpload
+            selectionMessage="Sélectionnez une photo"
+            onFileSelect={(file) => handlePhotoUpload(file)}
+            existingFile={formData.photo}
+            errorMsg={getError('photo')}
           />
         </div>
-      </div>
-
-      {/* Section pour l'upload des fichiers */}
-      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mt-6">
-        <SectionHeader
-          icon={User}
-          title={`Photo de l'élève`}
-          description={`Ajoutez une photo de votre enfant`}
-        />
-        <FileUpload
-          selectionMessage="Sélectionnez une photo à uploader"
-          onFileSelect={(file) => handlePhotoUpload(file)}
-          existingFile={formData.photo}
-          required
-          errorMsg={getError('photo') || getLocalError('photo')}
-        />
       </div>
     </>
   );