feat: Upload du SEPA par les parents / Création d'un composant header

pour les titres de tableau

Front-End/src/components/Structure/Configuration/ClassesSection.js

@@ -12,6 +12,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { ESTABLISHMENT_ID } from '@/utils/Url';
 import logger from '@/utils/logger';
 import ClasseDetails from '@/components/ClasseDetails';
+import SectionHeader from '@/components/SectionHeader';
 
 const ItemTypes = {
   TEACHER: 'teacher',
@@ -444,15 +445,13 @@ const ClassesSection = ({ classes, setClasses, teachers, handleCreate, handleEdi
   return (
     <DndProvider backend={HTML5Backend}>
       <div className="space-y-4">
-        <div className="flex justify-between items-center">
-          <div className="flex items-center mb-4">
-            <Users className="w-6 h-6 text-emerald-500 mr-2" />
-            <h2 className="text-xl font-semibold">Classes</h2>
-          </div>
-          <button type="button" onClick={handleAddClass} className="text-emerald-500 hover:text-emerald-700">
-            <Plus className="w-5 h-5" />
-          </button>
-        </div>
+        <SectionHeader
+          icon={Users}
+          title="Liste des classes"
+          description="Gérez les classes de votre école"
+          button={true}
+          onClick={handleAddClass}
+        />
         <Table
           data={newClass ? [newClass, ...classes] : classes}
           columns={columns}

Front-End/src/components/Structure/Configuration/SpecialitiesSection.js

@@ -8,6 +8,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem';
 import { useEstablishment } from '@/context/EstablishmentContext';
 import logger from '@/utils/logger';
+import SectionHeader from '@/components/SectionHeader';
 
 const SpecialitiesSection = ({ specialities, setSpecialities, handleCreate, handleEdit, handleDelete }) => {
 
@@ -214,15 +215,13 @@ const SpecialitiesSection = ({ specialities, setSpecialities, handleCreate, hand
   return (
     <DndProvider backend={HTML5Backend}>
       <div className="space-y-4">
-        <div className="flex justify-between items-center">
-          <div className="flex items-center mb-4">
-            <BookOpen className="w-6 h-6 text-emerald-500 mr-2" />
-            <h2 className="text-xl font-semibold">Spécialités</h2>
-          </div>
-          <button type="button" onClick={handleAddSpeciality} className="text-emerald-500 hover:text-emerald-700">
-            <Plus className="w-5 h-5" />
-          </button>
-        </div>
+        <SectionHeader
+          icon={BookOpen}
+          title="Liste des spécialités"
+          description="Gérez les spécialités de votre école"
+          button={true}
+          onClick={handleAddSpeciality}
+        />
         <Table
           data={newSpeciality ? [newSpeciality, ...specialities] : specialities}
           columns={columns}

Front-End/src/components/Structure/Configuration/StructureManagement.js

@@ -7,9 +7,9 @@ import { BE_SCHOOL_SPECIALITIES_URL, BE_SCHOOL_TEACHERS_URL, BE_SCHOOL_SCHOOLCLA
 
 const StructureManagement = ({ specialities, setSpecialities, teachers, setTeachers, classes, setClasses, profiles, handleCreate, handleEdit, handleDelete }) => {
   return (
-    <div className="max-w-8xl mx-auto p-4 mt-6 space-y-8">
+    <div className="w-full mx-auto mt-6">
       <ClassesProvider>
-        <div className="w-2/5 p-4 bg-white rounded-lg shadow-md">
+        <div className="mt-8 w-2/5">
           <SpecialitiesSection
             specialities={specialities}
             setSpecialities={setSpecialities}
@@ -18,7 +18,7 @@ const StructureManagement = ({ specialities, setSpecialities, teachers, setTeach
             handleDelete={(id) => handleDelete(`${BE_SCHOOL_SPECIALITIES_URL}`, id, setSpecialities)}
           />
         </div>
-        <div className="w-4/5 p-4 bg-white rounded-lg shadow-md">
+        <div className="w-4/5 mt-12">
           <TeachersSection
             teachers={teachers}
             setTeachers={setTeachers}
@@ -29,7 +29,7 @@ const StructureManagement = ({ specialities, setSpecialities, teachers, setTeach
             handleDelete={(id) => handleDelete(`${BE_SCHOOL_TEACHERS_URL}`, id, setTeachers)}
           />
         </div>
-        <div className="w-full p-4 bg-white rounded-lg shadow-md">
+        <div className="w-full mt-12">
           <ClassesSection
             classes={classes}
             setClasses={setClasses}

Front-End/src/components/Structure/Configuration/TeachersSection.js

@@ -3,7 +3,6 @@ import { Plus, Edit3, Trash2, GraduationCap, Check, X, Hand, Search } from 'luci
 import Table from '@/components/Table';
 import Popup from '@/components/Popup';
 import ToggleSwitch from '@/components/ToggleSwitch';
-import { createProfile, updateProfile } from '@/app/actions/authAction';
 import { useCsrfToken } from '@/context/CsrfContext';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -11,8 +10,8 @@ import InputText from '@/components/InputText';
 import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem';
 import TeacherItem from './TeacherItem';
 import logger from '@/utils/logger';
-import { fetchProfiles } from '@/app/actions/authAction';
 import { useEstablishment } from '@/context/EstablishmentContext';
+import SectionHeader from '@/components/SectionHeader';
 
 const ItemTypes = {
   SPECIALITY: 'speciality',
@@ -468,15 +467,13 @@ const TeachersSection = ({ teachers, setTeachers, specialities, profiles, handle
   return (
     <DndProvider backend={HTML5Backend}>
       <div className="space-y-4">
-        <div className="flex justify-between items-center">
-          <div className="flex items-center mb-4">
-            <GraduationCap className="w-6 h-6 text-emerald-500 mr-2" />
-            <h2 className="text-xl font-semibold">Enseignants</h2>
-          </div>
-          <button type="button" onClick={handleAddTeacher} className="text-emerald-500 hover:text-emerald-700">
-            <Plus className="w-5 h-5" />
-          </button>
-        </div>
+        <SectionHeader
+          icon={GraduationCap}
+          title="Liste des enseignants.es"
+          description="Gérez les enseignants.es de votre école"
+          button={true}
+          onClick={handleAddTeacher}
+        />
         <Table
           data={newTeacher ? [newTeacher, ...teachers] : teachers}
           columns={columns}

Front-End/src/components/Structure/Files/FilesGroupsManagement.js

@@ -3,6 +3,7 @@ import { Plus, Download, Edit3, Trash2, FolderPlus, Signature, FileText, Check,
 import Modal from '@/components/Modal';
 import Table from '@/components/Table';
 import FileUploadDocuSeal from '@/components/Structure/Files/FileUploadDocuSeal';
+import FileUpload from '@/components/FileUpload'
 import { BASE_URL } from '@/utils/Url';
 import {
   // GET
@@ -26,6 +27,7 @@ import {
 import RegistrationFileGroupForm from '@/components/Structure/Files/RegistrationFileGroupForm';
 import logger from '@/utils/logger';
 import ParentFilesSection from '@/components/Structure/Files/ParentFilesSection';
+import SectionHeader from '@/components/SectionHeader';
 
 export default function FilesGroupsManagement({ csrfToken, selectedEstablishmentId }) {
   const [schoolFileMasters, setSchoolFileMasters] = useState([]);
@@ -42,6 +44,8 @@ export default function FilesGroupsManagement({ csrfToken, selectedEstablishment
   const [editingDocumentId, setEditingDocumentId] = useState(null);
   const [formData, setFormData] = useState({});
 
+  const [uploadedFileName, setUploadedFileName] = useState('');
+
   const handleReloadTemplates = () => {
     setReloadTemplates(true);
   }
@@ -253,84 +257,6 @@ export default function FilesGroupsManagement({ csrfToken, selectedEstablishment
     }
   };
 
-  const renderRequiredDocumentCell = (document, column) => {
-    const isEditing = editingDocumentId === document.id;
-  
-    if (isEditing) {
-      switch (column) {
-        case 'Nom de la pièce':
-          return (
-            <InputText
-              name="name"
-              value={formData.name}
-              onChange={(e) => handleChange(e, 'name')}
-              placeholder="Nom de la pièce"
-              className="w-full"
-            />
-          );
-        case 'Description':
-          return (
-            <InputText
-              name="description"
-              value={formData.description}
-              onChange={(e) => handleChange(e, 'description')}
-              placeholder="Description"
-              className="w-full"
-            />
-          );
-        case 'Actions':
-          return (
-            <div className="flex justify-center space-x-2">
-              <button
-                type="button"
-                onClick={() => handleSaveDocument(document.id)}
-                className="text-green-500 hover:text-green-700"
-              >
-                <Check className="w-5 h-5" />
-              </button>
-              <button
-                type="button"
-                onClick={handleCancelEdit}
-                className="text-red-500 hover:text-red-700"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-          );
-        default:
-          return null;
-      }
-    } else {
-      switch (column) {
-        case 'Nom de la pièce':
-          return <span>{document.name}</span>;
-        case 'Description':
-          return <span>{document.description}</span>;
-        case 'Actions':
-          return (
-            <div className="flex justify-center space-x-2">
-              <button
-                type="button"
-                onClick={() => handleEditDocument(document)}
-                className="text-blue-500 hover:text-blue-700"
-              >
-                <Edit3 className="w-5 h-5" />
-              </button>
-              <button
-                type="button"
-                onClick={() => handleDeleteRequiredDocument(document.id)}
-                className="text-red-500 hover:text-red-700"
-              >
-                <Trash2 className="w-5 h-5" />
-              </button>
-            </div>
-          );
-        default:
-          return null;
-      }
-    }
-  };
-
   const handleCreate = (newParentFile) => {
     return createRegistrationParentFileMaster(newParentFile, csrfToken)
       .then((response) => {
@@ -417,14 +343,8 @@ export default function FilesGroupsManagement({ csrfToken, selectedEstablishment
     )}
   ];
 
-  const columnsRequiredDocuments = [
-    { name: 'Nom de la pièce', transform: (row) => renderRequiredDocumentCell(row, 'Nom de la pièce') },
-    { name: 'Description', transform: (row) => renderRequiredDocumentCell(row, 'Description') },
-    { name: 'Actions', transform: (row) => renderRequiredDocumentCell(row, 'Actions') },
-  ];
-
   return (
-    <div className="space-y-12">
+    <div className="w-full mx-auto mt-6">
       {/* Modal pour les fichiers */}
       <Modal
         isOpen={isModalOpen}
@@ -460,26 +380,15 @@ export default function FilesGroupsManagement({ csrfToken, selectedEstablishment
       />
   
       {/* Section Groupes de fichiers */}
-      <div className="mt-8 mb-4 w-3/5">
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center space-x-4">
-            <div className="bg-emerald-100 p-3 rounded-full shadow-md">
-              <FolderPlus className="w-8 h-8 text-emerald-600" />
-            </div>
-            <div>
-              <h2 className="text-2xl font-bold text-gray-800">Dossiers d'inscriptions</h2>
-              <p className="text-sm text-gray-500 italic">
-                Gérez les dossiers d'inscription pour organiser vos documents.
-              </p>
-            </div>
-          </div>
-          <button
-            onClick={() => setIsGroupModalOpen(true)}
-            className="flex items-center bg-emerald-600 text-white p-2 rounded-full shadow hover:bg-emerald-700 transition duration-200"
-          >
-            <Plus className="w-6 h-6" />
-          </button>
-        </div>
+      <div className="mt-8 w-3/5">
+        <SectionHeader
+          icon={FolderPlus}
+          title="Dossiers d'inscriptions"
+          description="Gérez les dossiers d'inscription pour organiser vos documents."
+          button={true}
+          buttonOpeningModal={true}
+          onClick={() => setIsGroupModalOpen(true)}
+        />
         <Table
           data={groups}
           columns={columnsGroups}
@@ -487,29 +396,18 @@ export default function FilesGroupsManagement({ csrfToken, selectedEstablishment
       </div>
   
       {/* Section Fichiers */}
-      <div className="mt-8 mb-4 w-3/5">
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center space-x-4">
-            <div className="bg-emerald-100 p-3 rounded-full shadow-md">
-              <Signature className="w-8 h-8 text-emerald-600" />
-            </div>
-            <div>
-              <h2 className="text-2xl font-bold text-gray-800">Formulaires à remplir</h2>
-              <p className="text-sm text-gray-500 italic">
-                Gérez les formulaires nécessitant une signature électronique.
-              </p>
-            </div>
-          </div>
-          <button
-            onClick={() => {
-              setIsModalOpen(true);
-              setIsEditing(false);
-            }}
-            className="flex items-center bg-emerald-600 text-white p-2 rounded-full shadow hover:bg-emerald-700 transition duration-200"
-          >
-            <Plus className="w-6 h-6" />
-          </button>
-        </div>
+      <div className="mt-12 mb-4 w-3/5">
+        <SectionHeader
+          icon={Signature}
+          title="Formulaires à remplir"
+          description="Gérez les formulaires nécessitant une signature électronique."
+          button={true}
+          buttonOpeningModal={true}
+          onClick={() => {
+            setIsModalOpen(true);
+            setIsEditing(false);
+          }}
+        />
         <Table
           data={filteredFiles}
           columns={columnsFiles}

Front-End/src/components/Structure/Files/ParentFilesSection.js

@@ -7,6 +7,7 @@ import Popup from '@/components/Popup';
 import logger from '@/utils/logger';
 import { createRegistrationParentFileTemplate } from '@/app/actions/registerFileGroupAction';
 import { useCsrfToken } from '@/context/CsrfContext';
+import SectionHeader from '@/components/SectionHeader';
 
 export default function ParentFilesSection({ parentFiles, groups, handleCreate, handleEdit, handleDelete }) {
   const [editingDocumentId, setEditingDocumentId] = useState(null);
@@ -65,7 +66,6 @@ export default function ParentFilesSection({ parentFiles, groups, handleCreate,
           createRegistrationParentFileTemplate(data, csrfToken)
             .then(response => {
               logger.debug('Template enregistré avec succès:', response);
-              onSuccess();
             })
             .catch(error => {
               logger.error('Erreur lors de l\'enregistrement du template:', error);
@@ -243,26 +243,14 @@ export default function ParentFilesSection({ parentFiles, groups, handleCreate,
   ];
 
   return (
-    <div className="mt-8 mb-4 w-4/5">
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center space-x-4">
-          <div className="bg-emerald-100 p-3 rounded-full shadow-md">
-            <FileText className="w-8 h-8 text-emerald-600" />
-          </div>
-          <div>
-            <h2 className="text-2xl font-bold text-gray-800">Pièces à fournir</h2>
-            <p className="text-sm text-gray-500 italic">
-              Configurez la liste des documents que les parents doivent fournir.
-            </p>
-          </div>
-        </div>
-        <button
-          onClick={handleAddEmptyRequiredDocument}
-          className="text-emerald-500 hover:text-emerald-700"
-        >
-          <Plus className="w-6 h-6" />
-        </button>
-      </div>
+    <div className="mt-12 w-4/5">
+      <SectionHeader
+        icon={FileText}
+        title="Pièces à fournir"
+        description="Configurez la liste des documents que les parents doivent fournir."
+        button={true}
+        onClick={handleAddEmptyRequiredDocument}
+      />
       <Table
         data={editingDocumentId === 'new' ? [formData, ...parentFiles] : parentFiles}
         columns={columnsRequiredDocuments}

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

@@ -6,8 +6,9 @@ import CheckBox from '@/components/CheckBox';
 import InputText from '@/components/InputText';
 import logger from '@/utils/logger';
 import { ESTABLISHMENT_ID } from '@/utils/Url';
+import SectionHeader from '@/components/SectionHeader';
 
-const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, handleDelete, type, subscriptionMode = false, selectedDiscounts, handleDiscountSelection }) => {
+const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, handleDelete, type, selectedDiscounts, handleDiscountSelection }) => {
   const [editingDiscount, setEditingDiscount] = useState(null);
   const [newDiscount, setNewDiscount] = useState(null);
   const [formData, setFormData] = useState({});
@@ -253,14 +254,7 @@ const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, h
     }
   };
 
-  const columns = subscriptionMode
-  ? [
-      { name: 'LIBELLE', label: 'Libellé' },
-      { name: 'DESCRIPTION', label: 'Description' },
-      { name: 'REMISE', label: 'Remise' },
-      { name: '', label: 'Sélection' }
-    ]
-  : [
+  const columns = [
       { name: 'LIBELLE', label: 'Libellé' },
       { name: 'REMISE', label: 'Remise' },
       { name: 'DESCRIPTION', label: 'Description' },
@@ -269,18 +263,15 @@ const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, h
     ];
 
   return (
-    <div className="space-y-4">
-      {!subscriptionMode && (
-        <div className="flex justify-between items-center">
-          <div className="flex items-center mb-4">
-            <Tag className="w-6 h-6 text-emerald-500 mr-2" />
-            <h2 className="text-xl font-semibold">Liste des réductions</h2>
-          </div>
-          <button type="button" onClick={handleAddDiscount} className="text-emerald-500 hover:text-emerald-700">
-            <Plus className="w-5 h-5" />
-          </button>
-        </div>
-      )}
+    <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={`${type == 0 ? "Gérez vos réductions sur les frais d'inscription" : "Gérez vos réductions sur les frais de scolarité"}`}
+        button={true}
+        onClick={handleAddDiscount}
+      />
       <Table
         data={newDiscount ? [newDiscount, ...discounts] : discounts}
         columns={columns}

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

@@ -44,91 +44,100 @@ const FeesManagement = ({ registrationDiscounts,
   };
 
   return (
-    <div className="w-full mx-auto p-2 mt-6 space-y-6">
-      <div className="bg-white p-2 rounded-lg shadow-md">
-        <h2 className="text-2xl font-semibold mb-4">Frais d&apos;inscription</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="col-span-1 p-6 rounded-lg shadow-inner mt-4">
-            <FeesSection
-              fees={registrationFees}
-              setFees={setRegistrationFees}
-              discounts={registrationDiscounts}
-              handleCreate={(newData) => handleCreate(`${BE_SCHOOL_FEES_URL}`, newData, setRegistrationFees)}
-              handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_FEES_URL}`, id, updatedData, setRegistrationFees)}
-              handleDelete={(id) => handleDelete(`${BE_SCHOOL_FEES_URL}`, id, setRegistrationFees)}
-              type={0}
-            />
-          </div>
-          <div className="col-span-1 p-6 rounded-lg shadow-inner mt-4">
-            <DiscountsSection
-              discounts={registrationDiscounts}
-              setDiscounts={setRegistrationDiscounts}
-              handleCreate={(newData) => handleCreate(`${BE_SCHOOL_DISCOUNTS_URL}`, newData, setRegistrationDiscounts)}
-              handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_DISCOUNTS_URL}`, id, updatedData, setRegistrationDiscounts)}
-              handleDelete={(id) => handleDelete(`${BE_SCHOOL_DISCOUNTS_URL}`, id, setRegistrationDiscounts)}
-              onDiscountDelete={(id) => handleDiscountDelete(id, 0)}
-              type={0}
-            />
-          </div>
-          <div className="col-span-1 p-6 rounded-lg shadow-inner mt-4">
-            <PaymentPlanSelector
-              paymentPlans={registrationPaymentPlans}
-              setPaymentPlans={setRegistrationPaymentPlans}
-              handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_PAYMENT_PLANS_URL}`, id, updatedData, setRegistrationPaymentPlans)}
-              type={0}
-            />
-          </div>
-          <div className="col-span-1 p-6 rounded-lg shadow-inner mt-4">
-            <PaymentModeSelector
-              paymentModes={registrationPaymentModes}
-              setPaymentModes={setRegistrationPaymentModes}
-              handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_PAYMENT_MODES_URL}`, id, updatedData, setRegistrationPaymentModes)}
-              type={0}
-            />
-          </div>
+    <div className="w-full mx-auto mt-6">
+
+      <div className="w-4/5 mx-auto flex items-center mt-8">
+        <hr className="flex-grow border-t-2 border-gray-300" />
+        <span className="mx-4 text-gray-600 font-semibold">Frais d'inscription</span>
+        <hr className="flex-grow border-t-2 border-gray-300" />
+      </div>
+
+      <div className="mt-8 w-4/5">
+        <FeesSection
+          fees={registrationFees}
+          setFees={setRegistrationFees}
+          discounts={registrationDiscounts}
+          handleCreate={(newData) => handleCreate(`${BE_SCHOOL_FEES_URL}`, newData, setRegistrationFees)}
+          handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_FEES_URL}`, id, updatedData, setRegistrationFees)}
+          handleDelete={(id) => handleDelete(`${BE_SCHOOL_FEES_URL}`, id, setRegistrationFees)}
+          type={0}
+        />
+      </div>
+      <div className="mt-12 w-4/5">
+        <DiscountsSection
+          discounts={registrationDiscounts}
+          setDiscounts={setRegistrationDiscounts}
+          handleCreate={(newData) => handleCreate(`${BE_SCHOOL_DISCOUNTS_URL}`, newData, setRegistrationDiscounts)}
+          handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_DISCOUNTS_URL}`, id, updatedData, setRegistrationDiscounts)}
+          handleDelete={(id) => handleDelete(`${BE_SCHOOL_DISCOUNTS_URL}`, id, setRegistrationDiscounts)}
+          onDiscountDelete={(id) => handleDiscountDelete(id, 0)}
+          type={0}
+        />
+      </div>
+      <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="col-span-1 mt-4">
+          <PaymentPlanSelector
+            paymentPlans={registrationPaymentPlans}
+            setPaymentPlans={setRegistrationPaymentPlans}
+            handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_PAYMENT_PLANS_URL}`, id, updatedData, setRegistrationPaymentPlans)}
+            type={0}
+          />
+        </div>
+        <div className="col-span-1 mt-4">
+          <PaymentModeSelector
+            paymentModes={registrationPaymentModes}
+            setPaymentModes={setRegistrationPaymentModes}
+            handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_PAYMENT_MODES_URL}`, id, updatedData, setRegistrationPaymentModes)}
+            type={0}
+          />
         </div>
       </div>
-      <div className="bg-white p-2 rounded-lg shadow-md">
-      <h2 className="text-2xl font-semibold mb-4">Frais de scolarité</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="col-span-1 p-6 rounded-lg shadow-inner mt-4">
-            <FeesSection
-              fees={tuitionFees}
-              setFees={setTuitionFees}
-              discounts={tuitionDiscounts}
-              handleCreate={(newData) => handleCreate(`${BE_SCHOOL_FEES_URL}`, newData, setTuitionFees)}
-              handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_FEES_URL}`, id, updatedData, setTuitionFees)}
-              handleDelete={(id) => handleDelete(`${BE_SCHOOL_FEES_URL}`, id, setTuitionFees)}
-              type={1}
-            />
-          </div>
-          <div className="col-span-1 p-6 rounded-lg shadow-inner mt-4">
-            <DiscountsSection
-              discounts={tuitionDiscounts}
-              setDiscounts={setTuitionDiscounts}
-              handleCreate={(newData) => handleCreate(`${BE_SCHOOL_DISCOUNTS_URL}`, newData, setTuitionDiscounts)}
-              handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_DISCOUNTS_URL}`, id, updatedData, setTuitionDiscounts)}
-              handleDelete={(id) => handleDelete(`${BE_SCHOOL_DISCOUNTS_URL}`, id, setTuitionDiscounts)}
-              onDiscountDelete={(id) => handleDiscountDelete(id, 1)}
-              type={1}
-            />
-          </div>
-          <div className="col-span-1 p-6 rounded-lg shadow-inner mt-4">
-            <PaymentPlanSelector
-              paymentPlans={tuitionPaymentPlans}
-              setPaymentPlans={setTuitionPaymentPlans}
-              handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_PAYMENT_PLANS_URL}`, id, updatedData, setRegistrationPaymentPlans)}
-              type={1}
-            />
-          </div>
-          <div className="col-span-1 p-6 rounded-lg shadow-inner mt-4">
-            <PaymentModeSelector
-              paymentModes={tuitionPaymentModes}
-              setPaymentModes={setTuitionPaymentModes}
-              handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_PAYMENT_MODES_URL}`, id, updatedData, setTuitionPaymentModes)}
-              type={1}
-            />
-          </div>
+
+
+      <div className="w-4/5 mx-auto flex items-center mt-16">
+        <hr className="flex-grow border-t-2 border-gray-300" />
+        <span className="mx-4 text-gray-600 font-semibold">Frais de scolarité</span>
+        <hr className="flex-grow border-t-2 border-gray-300" />
+      </div>
+
+      <div className="mt-8 w-4/5">
+        <FeesSection
+          fees={tuitionFees}
+          setFees={setTuitionFees}
+          discounts={tuitionDiscounts}
+          handleCreate={(newData) => handleCreate(`${BE_SCHOOL_FEES_URL}`, newData, setTuitionFees)}
+          handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_FEES_URL}`, id, updatedData, setTuitionFees)}
+          handleDelete={(id) => handleDelete(`${BE_SCHOOL_FEES_URL}`, id, setTuitionFees)}
+          type={1}
+        />
+      </div>
+      <div className="mt-12 w-4/5">
+        <DiscountsSection
+          discounts={tuitionDiscounts}
+          setDiscounts={setTuitionDiscounts}
+          handleCreate={(newData) => handleCreate(`${BE_SCHOOL_DISCOUNTS_URL}`, newData, setTuitionDiscounts)}
+          handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_DISCOUNTS_URL}`, id, updatedData, setTuitionDiscounts)}
+          handleDelete={(id) => handleDelete(`${BE_SCHOOL_DISCOUNTS_URL}`, id, setTuitionDiscounts)}
+          onDiscountDelete={(id) => handleDiscountDelete(id, 1)}
+          type={1}
+        />
+      </div>
+      <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="col-span-1 mt-4">
+          <PaymentPlanSelector
+            paymentPlans={tuitionPaymentPlans}
+            setPaymentPlans={setTuitionPaymentPlans}
+            handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_PAYMENT_PLANS_URL}`, id, updatedData, setRegistrationPaymentPlans)}
+            type={1}
+          />
+        </div>
+        <div className="col-span-1 mt-4">
+          <PaymentModeSelector
+            paymentModes={tuitionPaymentModes}
+            setPaymentModes={setTuitionPaymentModes}
+            handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_PAYMENT_MODES_URL}`, id, updatedData, setTuitionPaymentModes)}
+            type={1}
+          />
         </div>
       </div>
     </div>

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

@@ -5,10 +5,11 @@ import Popup from '@/components/Popup';
 import CheckBox from '@/components/CheckBox';
 import InputText from '@/components/InputText';
 import logger from '@/utils/logger';
+import SectionHeader from '@/components/SectionHeader';
 
 import { ESTABLISHMENT_ID } from '@/utils/Url';
 
-const FeesSection = ({ fees, setFees, discounts, handleCreate, handleEdit, handleDelete, type, subscriptionMode = false, selectedFees, handleFeeSelection }) => {
+const FeesSection = ({ fees, setFees, discounts, handleCreate, handleEdit, handleDelete, type, selectedFees, handleFeeSelection }) => {
   const [editingFee, setEditingFee] = useState(null);
   const [newFee, setNewFee] = useState(null);
   const [formData, setFormData] = useState({});
@@ -243,14 +244,7 @@ const FeesSection = ({ fees, setFees, discounts, handleCreate, handleEdit, handl
     }
   };
 
-  const columns = subscriptionMode
-    ? [
-        { name: 'NOM', label: 'Nom' },
-        { name: 'DESCRIPTION', label: 'Description' },
-        { name: 'MONTANT', label: 'Montant de base' },
-        { name: '', label: 'Sélection' }
-      ]
-    : [
+  const columns = [
         { name: 'NOM', label: 'Nom' },
         { name: 'MONTANT', label: 'Montant de base' },
         { name: 'DESCRIPTION', label: 'Description' },
@@ -259,18 +253,14 @@ const FeesSection = ({ fees, setFees, discounts, handleCreate, handleEdit, handl
       ];
 
   return (
-    <div className="space-y-4">
-      {!subscriptionMode && (
-      <div className="flex justify-between items-center">
-        <div className="flex items-center mb-4">
-          <CreditCard className="w-6 h-6 text-emerald-500 mr-2" />
-          <h2 className="text-xl font-semibold">Liste des frais</h2>
-        </div>
-        <button type="button" onClick={handleAddFee} className="text-emerald-500 hover:text-emerald-700">
-          <Plus className="w-5 h-5" />
-        </button>
-      </div>
-        )}
+    <div className="space-y-4">      
+      <SectionHeader
+        icon={CreditCard}
+        title={`${type == 0 ? "Liste des frais d'inscription" : "Liste des frais de scolarité"}`}
+        description={`${type == 0 ? "Gérez vos frais d'inscription" : "Gérez vos frais de scolarité"}`}
+        button={true}
+        onClick={handleAddFee}
+      />
       <Table
         data={newFee ? [newFee, ...fees] : fees}
         columns={columns}