feat(frontend): fusion liste des frais et message compte existant [#NEWTS-9]

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

@@ -1,4 +1,4 @@
-import React 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';
@@ -31,223 +31,141 @@ const FeesManagement = ({
   handleEdit,
   handleDelete,
 }) => {
-  const handleDiscountDelete = (id, type) => {
-    if (type === 0) {
-      setRegistrationFees((prevFees) =>
-        prevFees.map((fee) => ({
-          ...fee,
-          discounts: fee.discounts.filter((discountId) => discountId !== id),
-        }))
-      );
-    } else {
-      setTuitionFees((prevFees) =>
-        prevFees.map((fee) => ({
-          ...fee,
-          discounts: fee.discounts.filter((discountId) => discountId !== id),
-        }))
-      );
-    }
+  // Liste unique triée par type puis par nom
+  const allFees = [...(registrationFees ?? []), ...(tuitionFees ?? [])].sort(
+    (a, b) => a.type - b.type || (a.name ?? '').localeCompare(b.name ?? '')
+  );
+
+  const setAllFees = (updater) => {
+    const next = typeof updater === 'function' ? updater(allFees) : updater;
+    setRegistrationFees(next.filter((f) => f.type === 0));
+    setTuitionFees(next.filter((f) => f.type === 1));
   };
 
+  const allDiscounts = [
+    ...(registrationDiscounts ?? []),
+    ...(tuitionDiscounts ?? []),
+  ].sort(
+    (a, b) => a.type - b.type || (a.name ?? '').localeCompare(b.name ?? '')
+  );
+
+  const setAllDiscounts = (updater) => {
+    const next =
+      typeof updater === 'function' ? updater(allDiscounts) : updater;
+    setRegistrationDiscounts(next.filter((d) => d.type === 0));
+    setTuitionDiscounts(next.filter((d) => d.type === 1));
+  };
+
+  const allPaymentPlans = [
+    ...(registrationPaymentPlans ?? []),
+    ...(tuitionPaymentPlans ?? []),
+  ];
+  const allPaymentModes = [
+    ...(registrationPaymentModes ?? []),
+    ...(tuitionPaymentModes ?? []),
+  ];
+
   return (
-    <div className="w-full">
-      <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&apos;inscription
-        </span>
-        <hr className="flex-grow border-t-2 border-gray-300" />
-      </div>
+    <div className="w-full space-y-12">
+      {/* Tableau unique des frais */}
+      <FeesSection
+        fees={allFees}
+        setFees={setAllFees}
+        unified={true}
+        handleCreate={(feeData) => {
+          const setter =
+            feeData.type === 0 ? setRegistrationFees : setTuitionFees;
+          return handleCreate(BE_SCHOOL_FEES_URL, feeData, setter);
+        }}
+        handleEdit={(id, data) => {
+          const fee = allFees.find((f) => f.id === id);
+          const feeType = data.type ?? fee?.type;
+          const setter = feeType === 0 ? setRegistrationFees : setTuitionFees;
+          return handleEdit(BE_SCHOOL_FEES_URL, id, data, setter);
+        }}
+        handleDelete={(id) => {
+          const fee = allFees.find((f) => f.id === id);
+          const setter = fee?.type === 0 ? setRegistrationFees : setTuitionFees;
+          return handleDelete(BE_SCHOOL_FEES_URL, id, setter);
+        }}
+      />
 
-      <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>
+      {/* Tableau unique des réductions */}
+      <DiscountsSection
+        discounts={allDiscounts}
+        setDiscounts={setAllDiscounts}
+        unified={true}
+        handleCreate={(data) => {
+          const setter =
+            data.type === 0 ? setRegistrationDiscounts : setTuitionDiscounts;
+          return handleCreate(BE_SCHOOL_DISCOUNTS_URL, data, setter);
+        }}
+        handleEdit={(id, data) => {
+          const discount = allDiscounts.find((d) => d.id === id);
+          const discountType = data.type ?? discount?.type;
+          const setter =
+            discountType === 0 ? setRegistrationDiscounts : setTuitionDiscounts;
+          return handleEdit(BE_SCHOOL_DISCOUNTS_URL, id, data, setter);
+        }}
+        handleDelete={(id) => {
+          const discount = allDiscounts.find((d) => d.id === id);
+          const setter =
+            discount?.type === 0
+              ? setRegistrationDiscounts
+              : setTuitionDiscounts;
+          return handleDelete(BE_SCHOOL_DISCOUNTS_URL, id, setter);
+        }}
+        onDiscountDelete={(id) => {
+          // Retire la réduction des frais concernés
+          setAllFees((prevFees) =>
+            prevFees.map((fee) => ({
+              ...fee,
+              discounts: fee.discounts.filter((dId) => dId !== id),
+            }))
+          );
+        }}
+      />
+
+      {/* Plans et modes de paiement communs */}
       <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}
-            handleCreate={(newData) =>
-              handleCreate(
-                `${BE_SCHOOL_PAYMENT_PLANS_URL}`,
-                newData,
-                setRegistrationPaymentPlans
-              )
-            }
-            handleDelete={(id) =>
-              handleDelete(
-                `${BE_SCHOOL_PAYMENT_PLANS_URL}`,
-                id,
-                setRegistrationPaymentPlans
-              )
-            }
-            type={0}
+            allPaymentPlans={allPaymentPlans}
+            handleCreate={(data) => {
+              const setter =
+                data.type === 0
+                  ? setRegistrationPaymentPlans
+                  : setTuitionPaymentPlans;
+              return handleCreate(BE_SCHOOL_PAYMENT_PLANS_URL, data, setter);
+            }}
+            handleDelete={(id) => {
+              const plan = allPaymentPlans.find((p) => p.id === id);
+              const setter =
+                plan?.type === 0
+                  ? setRegistrationPaymentPlans
+                  : setTuitionPaymentPlans;
+              return handleDelete(BE_SCHOOL_PAYMENT_PLANS_URL, id, setter);
+            }}
           />
         </div>
         <div className="col-span-1 mt-4">
           <PaymentModeSelector
-            paymentModes={registrationPaymentModes}
-            setPaymentModes={setRegistrationPaymentModes}
-            handleCreate={(newData) =>
-              handleCreate(
-                `${BE_SCHOOL_PAYMENT_MODES_URL}`,
-                newData,
-                setRegistrationPaymentModes
-              )
-            }
-            handleDelete={(id) =>
-              handleDelete(
-                `${BE_SCHOOL_PAYMENT_MODES_URL}`,
-                id,
-                setRegistrationPaymentModes
-              )
-            }
-            type={0}
-          />
-        </div>
-      </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}
-            handleCreate={(newData) =>
-              handleCreate(
-                `${BE_SCHOOL_PAYMENT_PLANS_URL}`,
-                newData,
-                setTuitionPaymentPlans
-              )
-            }
-            handleDelete={(id) =>
-              handleDelete(
-                `${BE_SCHOOL_PAYMENT_PLANS_URL}`,
-                id,
-                setTuitionPaymentPlans
-              )
-            }
-            type={1}
-          />
-        </div>
-        <div className="col-span-1 mt-4">
-          <PaymentModeSelector
-            paymentModes={tuitionPaymentModes}
-            setPaymentModes={setTuitionPaymentModes}
-            handleCreate={(newData) =>
-              handleCreate(
-                `${BE_SCHOOL_PAYMENT_MODES_URL}`,
-                newData,
-                setTuitionPaymentModes
-              )
-            }
-            handleDelete={(id) =>
-              handleDelete(
-                `${BE_SCHOOL_PAYMENT_MODES_URL}`,
-                id,
-                setTuitionPaymentModes
-              )
-            }
-            type={1}
+            allPaymentModes={allPaymentModes}
+            handleCreate={(data) => {
+              const setter =
+                data.type === 0
+                  ? setRegistrationPaymentModes
+                  : setTuitionPaymentModes;
+              return handleCreate(BE_SCHOOL_PAYMENT_MODES_URL, data, setter);
+            }}
+            handleDelete={(id) => {
+              const mode = allPaymentModes.find((m) => m.id === id);
+              const setter =
+                mode?.type === 0
+                  ? setRegistrationPaymentModes
+                  : setTuitionPaymentModes;
+              return handleDelete(BE_SCHOOL_PAYMENT_MODES_URL, id, setter);
+            }}
           />
         </div>
       </div>