feat: Formulaire de création RF sur une seule pag

Front-End/src/components/InputTextIcon.js

@@ -6,8 +6,11 @@ export default function InputTextIcon({
   value,
   onChange,
   errorMsg,
+  errorLocalMsg,
   placeholder,
   className,
+  required,
+  enable = true, // Nouvelle prop pour activer/désactiver le champ
 }) {
   return (
     <>
@@ -17,9 +20,16 @@ export default function InputTextIcon({
           className="block text-sm font-medium text-gray-700"
         >
           {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
         </label>
         <div
-          className={`mt-1 flex items-stretch border border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} hover:border-gray-400 focus-within:border-gray-500`}
+          className={`mt-1 flex items-center border rounded-md ${
+            errorMsg || errorLocalMsg
+              ? 'border-red-500 hover:border-red-700'
+              : 'border-gray-200 hover:border-gray-400'
+          } ${!errorMsg && !errorLocalMsg ? 'focus-within:border-gray-500' : ''} ${
+            !enable ? 'bg-gray-100 cursor-not-allowed' : ''
+          }`}
         >
           <span className="inline-flex items-center px-3 rounded-l-md bg-gray-50 text-gray-500 text-sm">
             {IconItem && <IconItem />}
@@ -30,8 +40,12 @@ export default function InputTextIcon({
             placeholder={placeholder}
             name={name}
             value={value}
-            onChange={onChange}
-            className="flex-1 px-3 py-2 block w-full rounded-r-md sm:text-sm border-none focus:ring-0 outline-none"
+            onChange={enable ? onChange : undefined}
+            className={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none rounded-md ${
+              !enable ? 'bg-gray-100 cursor-not-allowed' : ''
+            }`}
+            required={required}
+            readOnly={!enable ? 'readOnly' : ''}
           />
         </div>
         {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}

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

@@ -14,6 +14,8 @@ import InputPhone from '../InputPhone';
 import { PhoneLabel } from '../PhoneLabel';
 import CheckBox from '@/components/CheckBox';
 import RadioList from '@/components/RadioList';
+import SelectChoice from '@/components/SelectChoice';
+import { getCurrentSchoolYear, getNextSchoolYear } from '@/utils/Date';
 
 const InscriptionForm = ({
   students,
@@ -52,6 +54,7 @@ const InscriptionForm = ({
       selectedTuitionDiscounts: [],
       selectedTuitionFees: [],
       selectedFileGroup: null, // Ajout du groupe de fichiers sélectionné
+      schoolYear: getCurrentSchoolYear(),
     };
   });
 
@@ -390,6 +393,24 @@ const InscriptionForm = ({
 
       {step === 1 && (
         <div className="mt-6">
+          {/* Sélection de l'année scolaire */}
+          <SelectChoice
+            name="schoolYear"
+            label="Année scolaire"
+            placeHolder="Sélectionnez une année scolaire"
+            choices={[
+              { value: getCurrentSchoolYear(), label: getCurrentSchoolYear() },
+              { value: getNextSchoolYear(), label: getNextSchoolYear() },
+            ]}
+            selected={formData.schoolYear || getCurrentSchoolYear()}
+            callback={(e) =>
+              setFormData((prevData) => ({
+                ...prevData,
+                schoolYear: e.target.value,
+              }))
+            }
+            className="w-full mt-4"
+          />
           <InputTextIcon
             name="studentLastName"
             type="text"

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

@@ -8,23 +8,7 @@ import SectionHeader from '@/components/SectionHeader';
 import { User } from 'lucide-react';
 import FileUpload from '@/components/FileUpload';
 import { BASE_URL } from '@/utils/Url';
-
-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 genders = [
-  { value: '1', label: 'Garçon' },
-  { value: '2', label: 'Fille' },
-];
+import { levels, genders } from '@/utils/constants';
 
 export default function StudentInfoForm({
   studentId,

Front-End/src/components/SectionTitle.js

@@ -1,13 +1,20 @@
 import React from 'react';
 
-const SectionTitle = ({ title }) => {
+const SectionTitle = ({ title, children }) => {
   return (
-    <div className="relative mb-4">
-      <div className="absolute inset-0 flex items-center">
-        <div className="w-full border-t border-gray-300"></div>
-      </div>
-      <div className="relative flex justify-center">
-        <div className="px-4 bg-white text-gray-500">{title}</div>
+    <div className="relative flex">
+      {/* Liseré vertical */}
+      <div className="w-1 bg-emerald-400"></div>
+
+      {/* Contenu de la section */}
+      <div className="flex-1 pl-6">
+        {/* Titre avec liseré horizontal */}
+        <div className="flex items-center mb-4">
+          <h2 className="text-emerald-700 font-bold text-xl">{title}</h2>
+          <div className="flex-1 h-0.5 bg-emerald-200 ml-4"></div>
+        </div>
+        {/* Contenu passé en children */}
+        {children}
       </div>
     </div>
   );

Front-End/src/components/Structure/Tarification/DiscountsSection.js

@@ -345,15 +345,17 @@ const DiscountsSection = ({
       ];
 
   return (
-    <div className="space-y-4 mt-8">
-      <SectionHeader
-        icon={Tag}
-        discountStyle={true}
-        title={`${type == 0 ? "Liste des réductions sur les frais d'inscription" : 'Liste des réductions sur les frais de scolarité'}`}
-        description={`${subscriptionMode ? 'Sélectionnez' : 'Gérez'} ${type == 0 ? " vos réductions sur les frais d'inscription" : ' vos réductions sur les frais de scolarité'}`}
-        button={!subscriptionMode}
-        onClick={handleAddDiscount}
-      />
+    <div className="space-y-4">
+      {!subscriptionMode && (
+        <SectionHeader
+          icon={Tag}
+          discountStyle={true}
+          title={`${type == 0 ? "Liste des réductions sur les frais d'inscription" : 'Liste des réductions sur les frais de scolarité'}`}
+          description={`'Gérez' ${type == 0 ? " vos réductions sur les frais d'inscription" : ' vos réductions sur les frais de scolarité'}`}
+          button={!subscriptionMode}
+          onClick={handleAddDiscount}
+        />
+      )}
       <Table
         data={newDiscount ? [newDiscount, ...discounts] : discounts}
         columns={columns}

Front-End/src/components/Structure/Tarification/FeesSection.js

@@ -321,13 +321,15 @@ const FeesSection = ({
 
   return (
     <div className="space-y-4">
-      <SectionHeader
-        icon={CreditCard}
-        title={`${type == 0 ? "Liste des frais d'inscription" : 'Liste des frais de scolarité'}`}
-        description={`${subscriptionMode ? 'Sélectionnez' : 'Gérez'} ${type == 0 ? " vos frais d'inscription" : ' vos frais de scolarité'}`}
-        button={!subscriptionMode}
-        onClick={handleAddFee}
-      />
+      {!subscriptionMode && (
+        <SectionHeader
+          icon={CreditCard}
+          title={`${type == 0 ? "Liste des frais d'inscription" : 'Liste des frais de scolarité'}`}
+          description={`'Gérez'${type == 0 ? " vos frais d'inscription" : ' vos frais de scolarité'}`}
+          button={!subscriptionMode}
+          onClick={handleAddFee}
+        />
+      )}
       <Table
         data={newFee ? [newFee, ...fees] : fees}
         columns={columns}