From 0c2e0b92f43f223adc22db36ecad7fd864737a98 Mon Sep 17 00:00:00 2001
From: N3WT DE COMPET <n3wt.school@gmail.com>
Date: Sat, 25 Jan 2025 17:23:15 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Ajout=20des=20frais=20de=20scolarit?=
 =?UTF-8?q?=C3=A9=20dans=20le=20dossier=20d'inscription=20[#18]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/[locale]/admin/subscriptions/page.js  |  13 +-
 .../components/Inscription/InscriptionForm.js | 252 +++++++++++++-----
 2 files changed, 188 insertions(+), 77 deletions(-)

diff --git a/Front-End/src/app/[locale]/admin/subscriptions/page.js b/Front-End/src/app/[locale]/admin/subscriptions/page.js
index 641d223..c555a73 100644
--- a/Front-End/src/app/[locale]/admin/subscriptions/page.js
+++ b/Front-End/src/app/[locale]/admin/subscriptions/page.js
@@ -355,6 +355,11 @@ useEffect(()=>{
     console.log('createRF updatedData:', updatedData);
     const selectedRegistrationFeesIds = updatedData.selectedRegistrationFees.map(feeId => feeId)
     const selectedRegistrationDiscountsIds = updatedData.selectedRegistrationDiscounts.map(discountId => discountId)
+    const selectedTuitionFeesIds = updatedData.selectedTuitionFees.map(feeId => feeId)
+    const selectedTuitionDiscountsIds = updatedData.selectedTuitionDiscounts.map(discountId => discountId)
+
+    const allFeesIds = [...selectedRegistrationFeesIds, ...selectedTuitionFeesIds];
+    const allDiscountsds = [...selectedRegistrationDiscountsIds, ...selectedTuitionDiscountsIds];
 
     if (updatedData.selectedGuardians.length !== 0) {
       const selectedGuardiansIds = updatedData.selectedGuardians.map(guardianId => guardianId)
@@ -365,8 +370,8 @@ useEffect(()=>{
               first_name: updatedData.studentFirstName,
           },
           idGuardians: selectedGuardiansIds,
-          fees: selectedRegistrationFeesIds,
-          discounts: selectedRegistrationDiscountsIds
+          fees: allFeesIds,
+          discounts: allDiscountsds
       };
 
       createRegisterForm(data,csrfToken)
@@ -416,8 +421,8 @@ useEffect(()=>{
                             ],
                             sibling: []
                         },
-                        fees: selectedRegistrationFeesIds,
-                        discounts: selectedRegistrationDiscountsIds
+                        fees: allFeesIds,
+                        discounts: allDiscountsds
                     };
 
                 createRegisterForm(data,csrfToken)
diff --git a/Front-End/src/components/Inscription/InscriptionForm.js b/Front-End/src/components/Inscription/InscriptionForm.js
index 8895f33..adbe6d2 100644
--- a/Front-End/src/components/Inscription/InscriptionForm.js
+++ b/Front-End/src/components/Inscription/InscriptionForm.js
@@ -17,22 +17,26 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
         responsableType: 'new',
         autoMail: false,
         selectedRegistrationDiscounts: [],
-        selectedRegistrationFees: registrationFees.map(fee => fee.id)
+        selectedRegistrationFees: registrationFees.map(fee => fee.id),
+        selectedTuitionDiscounts: [],
+        selectedTuitionFees: []
     });
 
-    const [step, setStep] = useState(0);
+    const [step, setStep] = useState(1);
     const [selectedStudent, setSelectedEleve] = useState('');
     const [existingGuardians, setExistingGuardians] = useState([]);
     const [totalRegistrationAmount, setTotalRegistrationAmount] = useState(0);
-    const maxStep = 4
+    const [totalTuitionAmount, setTotalTuitionAmount] = useState(0);
+    const maxStep = 6
 
     useEffect(() => {
-        // Calcul du montant total lors de l'initialisation
-        const initialTotalAmount = calculateFinalRegistrationAmount(
+        // Calcul du montant total des frais d'inscription lors de l'initialisation
+        const initialTotalRegistrationAmount = calculateFinalRegistrationAmount(
             registrationFees.map(fee => fee.id),
             []
         );
-        setTotalRegistrationAmount(initialTotalAmount);
+        setTotalRegistrationAmount(initialTotalRegistrationAmount);
+
     }, [registrationDiscounts, registrationFees]);
 
     const handleToggleChange = () => {
@@ -54,7 +58,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
     };
 
     const prevStep = () => {
-        if (step >= 1) {
+        if (step > 1) {
             setStep(step - 1);
         }
     };
@@ -81,7 +85,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
         onSubmit(formData);
     }
 
-    const handleFeeSelection = (feeId) => {
+    const handleRegistrationFeeSelection = (feeId) => {
         setFormData((prevData) => {
           const selectedRegistrationFees = prevData.selectedRegistrationFees.includes(feeId)
             ? prevData.selectedRegistrationFees.filter(id => id !== feeId)
@@ -90,9 +94,20 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
           setTotalRegistrationAmount(finalAmount);
           return { ...prevData, selectedRegistrationFees };
         });
-      };
+    };
+    
+    const handleTuitionFeeSelection = (feeId) => {
+        setFormData((prevData) => {
+            const selectedTuitionFees = prevData.selectedTuitionFees.includes(feeId)
+            ? prevData.selectedTuitionFees.filter(id => id !== feeId)
+            : [...prevData.selectedTuitionFees, feeId];
+            const finalAmount = calculateFinalTuitionAmount(selectedTuitionFees, prevData.selectedTuitionDiscounts);
+            setTotalTuitionAmount(finalAmount);
+            return { ...prevData, selectedTuitionFees };
+        });
+    };
       
-      const handleDiscountSelection = (discountId) => {
+    const handleRegistrationDiscountSelection = (discountId) => {
         setFormData((prevData) => {
           const selectedRegistrationDiscounts = prevData.selectedRegistrationDiscounts.includes(discountId)
             ? prevData.selectedRegistrationDiscounts.filter(id => id !== discountId)
@@ -101,9 +116,20 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
           setTotalRegistrationAmount(finalAmount);
           return { ...prevData, selectedRegistrationDiscounts };
         });
-      };
+    };
+
+    const handleTuitionDiscountSelection = (discountId) => {
+        setFormData((prevData) => {
+          const selectedTuitionDiscounts = prevData.selectedTuitionDiscounts.includes(discountId)
+            ? prevData.selectedTuitionDiscounts.filter(id => id !== discountId)
+            : [...prevData.selectedTuitionDiscounts, discountId];
+          const finalAmount = calculateFinalTuitionAmount(prevData.selectedTuitionFees, selectedTuitionDiscounts);
+          setTotalTuitionAmount(finalAmount);
+          return { ...prevData, selectedTuitionDiscounts };
+        });
+    };
     
-      const calculateFinalRegistrationAmount = (selectedRegistrationFees, selectedRegistrationDiscounts) => {
+    const calculateFinalRegistrationAmount = (selectedRegistrationFees, selectedRegistrationDiscounts) => {
         const totalFees = selectedRegistrationFees.reduce((sum, feeId) => {
           const fee = registrationFees.find(f => f.id === feeId);
           if (fee && !isNaN(parseFloat(fee.base_amount))) {
@@ -111,8 +137,6 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
           }
           return sum;
         }, 0);
-
-        console.log(totalFees);
       
         const totalDiscounts = selectedRegistrationDiscounts.reduce((sum, discountId) => {
           const discount = registrationDiscounts.find(d => d.id === discountId);
@@ -129,7 +153,33 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
         const finalAmount = totalFees - totalDiscounts;
       
         return finalAmount.toFixed(2);
-      };
+    };
+
+    const calculateFinalTuitionAmount = (selectedTuitionFees, selectedTuitionDiscounts) => {
+        const totalFees = selectedTuitionFees.reduce((sum, feeId) => {
+          const fee = tuitionFees.find(f => f.id === feeId);
+          if (fee && !isNaN(parseFloat(fee.base_amount))) {
+            return sum + parseFloat(fee.base_amount);
+          }
+          return sum;
+        }, 0);
+      
+        const totalDiscounts = selectedTuitionDiscounts.reduce((sum, discountId) => {
+          const discount = tuitionDiscounts.find(d => d.id === discountId);
+          if (discount) {
+            if (discount.discount_type === 0 && !isNaN(parseFloat(discount.amount))) { // Currency
+              return sum + parseFloat(discount.amount);
+            } else if (discount.discount_type === 1 && !isNaN(parseFloat(discount.amount))) { // Percent
+              return sum + (totalFees * parseFloat(discount.amount) / 100);
+            }
+          }
+          return sum;
+        }, 0);
+      
+        const finalAmount = totalFees - totalDiscounts;
+      
+        return finalAmount.toFixed(2);
+    };
 
     const isLabelAttenuated = (item) => { 
         return !formData.selectedRegistrationDiscounts.includes(parseInt(item.id)); 
@@ -140,63 +190,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
     };
 
     return (
-        <div className="space-y-4 mt-8">
-            {step === 0 && (
-                <div>
-                    <h2 className="text-l font-bold mb-4">Frais d'inscription</h2>
-                    {registrationFees.length > 0 ? (
-                        <>
-                        <div className="mb-4">
-                            <FeesSection
-                                fees={registrationFees}
-                                type={0}
-                                subscriptionMode={true}
-                                selectedFees={formData.selectedRegistrationFees}
-                                handleFeeSelection={handleFeeSelection}
-                            />
-                        </div>
-                        <h2 className="text-l font-bold mb-4">Réductions</h2>
-                            <div className="mb-4">
-                            {registrationDiscounts.length > 0 ? (
-                                <DiscountsSection
-                                    discounts={registrationDiscounts}
-                                    type={0}
-                                    subscriptionMode={true}
-                                    selectedDiscounts={formData.selectedRegistrationDiscounts}
-                                    handleDiscountSelection={handleDiscountSelection}
-                                />
-                            ) : (
-                                <p className="bg-orange-100 border border-orange-400 text-orange-700 px-4 py-3 rounded relative" role="alert">
-                                    <strong className="font-bold">Information</strong>
-                                    <span className="block sm:inline"> Aucune réduction n'a été créée sur les frais d'inscription.</span>
-                                </p>
-                            )}
-                            </div>
-                        <Table
-                            data={[ {id: 1}]}
-                            columns={[
-                                {
-                                    name: 'LIBELLE', 
-                                    transform: () => <span>MONTANT TOTAL</span>
-                                },
-                                {
-                                    name: 'TOTAL', 
-                                    transform: () => <b>{totalRegistrationAmount} €</b>
-                                }
-                            ]}
-                            defaultTheme='bg-cyan-100'
-                        />
-                    </>
-                    ) : (
-                        <p className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
-                            <strong className="font-bold">Attention!</strong>
-                            <span className="block sm:inline"> Aucun frais d'inscription n'a été créé.</span>
-                        </p>
-                    )}
-                </div>
-                   
-            )}
-
+        <div className="space-y-4 mt-8">            
             {step === 1 && (
                 <div>
                     <h2 className="text-l font-bold mb-4">Nouvel élève</h2>
@@ -324,6 +318,118 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
                 </div>
             )}
 
+            {step === 4 && (
+                <div>
+                    <h2 className="text-l font-bold mb-4">Frais d'inscription</h2>
+                    {registrationFees.length > 0 ? (
+                        <>
+                        <div className="mb-4">
+                            <FeesSection
+                                fees={registrationFees}
+                                type={0}
+                                subscriptionMode={true}
+                                selectedFees={formData.selectedRegistrationFees}
+                                handleFeeSelection={handleRegistrationFeeSelection}
+                            />
+                        </div>
+                        <h2 className="text-l font-bold mb-4">Réductions</h2>
+                            <div className="mb-4">
+                            {registrationDiscounts.length > 0 ? (
+                                <DiscountsSection
+                                    discounts={registrationDiscounts}
+                                    type={0}
+                                    subscriptionMode={true}
+                                    selectedDiscounts={formData.selectedRegistrationDiscounts}
+                                    handleDiscountSelection={handleRegistrationDiscountSelection}
+                                />
+                            ) : (
+                                <p className="bg-orange-100 border border-orange-400 text-orange-700 px-4 py-3 rounded relative" role="alert">
+                                    <strong className="font-bold">Information</strong>
+                                    <span className="block sm:inline"> Aucune réduction n'a été créée sur les frais d'inscription.</span>
+                                </p>
+                            )}
+                            </div>
+                        <Table
+                            data={[ {id: 1}]}
+                            columns={[
+                                {
+                                    name: 'LIBELLE', 
+                                    transform: () => <span>MONTANT TOTAL</span>
+                                },
+                                {
+                                    name: 'TOTAL', 
+                                    transform: () => <b>{totalRegistrationAmount} €</b>
+                                }
+                            ]}
+                            defaultTheme='bg-cyan-100'
+                        />
+                    </>
+                    ) : (
+                        <p className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+                            <strong className="font-bold">Attention!</strong>
+                            <span className="block sm:inline"> Aucun frais d'inscription n'a été créé.</span>
+                        </p>
+                    )}
+                </div>
+                   
+            )}
+
+            {step === 5 && (
+                <div>
+                    <h2 className="text-l font-bold mb-4">Frais de scolarité</h2>
+                    {tuitionFees.length > 0 ? (
+                        <>
+                        <div className="mb-4">
+                            <FeesSection
+                                fees={tuitionFees}
+                                type={1}
+                                subscriptionMode={true}
+                                selectedFees={formData.selectedTuitionFees}
+                                handleFeeSelection={handleTuitionFeeSelection}
+                            />
+                        </div>
+                        <h2 className="text-l font-bold mb-4">Réductions</h2>
+                            <div className="mb-4">
+                            {tuitionDiscounts.length > 0 ? (
+                                <DiscountsSection
+                                    discounts={tuitionDiscounts}
+                                    type={1}
+                                    subscriptionMode={true}
+                                    selectedDiscounts={formData.selectedTuitionDiscounts}
+                                    handleDiscountSelection={handleTuitionDiscountSelection}
+                                />
+                            ) : (
+                                <p className="bg-orange-100 border border-orange-400 text-orange-700 px-4 py-3 rounded relative" role="alert">
+                                    <strong className="font-bold">Information</strong>
+                                    <span className="block sm:inline"> Aucune réduction n'a été créée sur les frais de scolarité.</span>
+                                </p>
+                            )}
+                            </div>
+                        <Table
+                            data={[ {id: 1}]}
+                            columns={[
+                                {
+                                    name: 'LIBELLE', 
+                                    transform: () => <span>MONTANT TOTAL</span>
+                                },
+                                {
+                                    name: 'TOTAL', 
+                                    transform: () => <b>{totalTuitionAmount} €</b>
+                                }
+                            ]}
+                            defaultTheme='bg-cyan-100'
+                        />
+                    </>
+                    ) : (
+                        <p className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+                            <strong className="font-bold">Attention!</strong>
+                            <span className="block sm:inline"> Aucun frais de scolarité n'a été créé.</span>
+                        </p>
+                    )}
+                </div>
+                   
+            )}
+
             {step === maxStep && (
                 <div>
                     <h2 className="text-l font-bold mb-4">Récapitulatif</h2>
@@ -399,7 +505,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
             )}
 
             <div className="flex justify-end mt-4 space-x-4">
-                {step >= 1 && (
+                {step > 1 && (
                     <Button     text="Précédent"
                                 onClick={prevStep}
                                 className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md shadow-sm hover:bg-gray-400 focus:outline-none"