Merge remote-tracking branch 'origin/WIP_Inscriptions' into develop

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import FeesSection from '@/components/Structure/Tarification/FeesSection';
 import DiscountsSection from '@/components/Structure/Tarification/DiscountsSection';
 import PaymentPlanSelector from '@/components/PaymentPlanSelector';
@@ -50,185 +50,181 @@ const FeesManagement = ({
   };
 
   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>