From b8776c38c717c05d3e7d510df4c4db3b1da31cf3 Mon Sep 17 00:00:00 2001
From: Landris18 <landry.aps@gmail.com>
Date: Thu, 27 Jun 2024 23:55:36 +0300
Subject: [PATCH] [IMP] Refresh after adding cotisations and depenses, imp
 right sdb

---
 src/components/TabMenu/TabMenu.tsx | 13 +++++----
 src/pages/Dashboard/Dashboard.tsx  | 46 ++++++++++++++++++++++++------
 2 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/components/TabMenu/TabMenu.tsx b/src/components/TabMenu/TabMenu.tsx
index 5d25d26..fdf1d6d 100644
--- a/src/components/TabMenu/TabMenu.tsx
+++ b/src/components/TabMenu/TabMenu.tsx
@@ -24,6 +24,7 @@ interface TabPanelProps {
     data?: any;
     valueSwitch?: boolean;
     changeSwitch?: Function;
+    refreshData?: Function;
     isLoading?: boolean
 }
 
@@ -59,7 +60,7 @@ const DIALOG_ADD_DEPENSE = "DIALOG_ADD_DEPENSE";
 const TabPanel = (props: TabPanelProps) => {
     const { user } = React.useContext(UserContext);
 
-    const { value, index, data, valueSwitch, changeSwitch, isLoading } = props;
+    const { value, index, data, valueSwitch, changeSwitch, refreshData, isLoading } = props;
     const cols = columns[index];
 
     const [openDialogCommon, setOpenDialogCommon] = React.useState(false);
@@ -99,6 +100,7 @@ const TabPanel = (props: TabPanelProps) => {
         await Service.addCotisations(updatedCotisationsData).then((res: any) => {
             toast.success(`Cotisations enregistrées ${res["success"]["saved"]}, ignorées ${res["success"]["ignored"]}`);
             setOpenDialogCommon(false);
+            if (refreshData) refreshData();
         }).catch((_error: any) => {
             toast.error(_error?.response?.data?.error ?? "Impossible d'ajouter ces cotisations");
             setOpenDialogCommon(false);
@@ -109,6 +111,7 @@ const TabPanel = (props: TabPanelProps) => {
         await Service.addDepense(depenseData).then(() => {
             toast.success(`Dépense enregistrée`);
             setOpenDialogCommon(false);
+            if (refreshData) refreshData();
         }).catch((_error: any) => {
             toast.error(_error?.response?.data?.error ?? "Impossible d'ajouter la dépense");
             setOpenDialogCommon(false);
@@ -424,9 +427,9 @@ const a11yProps = (index: number) => {
 
 export default function TabMenu(props: any) {
     const { cotisations, revenus, depenses, dettes } = props;
-    const { dataCotisations, valueSwitchCotisations, changeOnlyPaid, isLoadingCotisations } = cotisations;
+    const { dataCotisations, valueSwitchCotisations, changeOnlyPaid, refreshFromCotisation, isLoadingCotisations } = cotisations;
     const { dataRevenus, isLoadingRevenus } = revenus;
-    const { dataDepenses, valueSwitchDepenses, changeForDette, isLoadingDepenses } = depenses;
+    const { dataDepenses, valueSwitchDepenses, changeForDette, refreshFromDepense, isLoadingDepenses } = depenses;
     const { dataDettes } = dettes;
 
     const [value, setValue] = React.useState(0);
@@ -451,9 +454,9 @@ export default function TabMenu(props: any) {
                     <StyledTab label="Dettes" {...a11yProps(3)} className="tab-label" />
                 </Tabs>
             </Stack>
-            <TabPanel value={value} index={0} data={dataCotisations} valueSwitch={valueSwitchCotisations} changeSwitch={changeOnlyPaid} isLoading={isLoadingCotisations} />
+            <TabPanel value={value} index={0} data={dataCotisations} valueSwitch={valueSwitchCotisations} changeSwitch={changeOnlyPaid} refreshData={refreshFromCotisation} isLoading={isLoadingCotisations} />
             <TabPanel value={value} index={1} data={dataRevenus} isLoading={isLoadingRevenus} />
-            <TabPanel value={value} index={2} data={dataDepenses} valueSwitch={valueSwitchDepenses} changeSwitch={changeForDette} isLoading={isLoadingDepenses} />
+            <TabPanel value={value} index={2} data={dataDepenses} valueSwitch={valueSwitchDepenses} changeSwitch={changeForDette} refreshData={refreshFromDepense} isLoading={isLoadingDepenses} />
             <TabPanel value={value} index={3} data={dataDettes} />
         </Box>
     );
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 232ea04..b3f7e6d 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -34,6 +34,9 @@ import LoadingGlobal from '../../components/LoadingGlobal/LoadingGlobal';
 import TabMenu from '../../components/TabMenu/TabMenu';
 import CommonDialog from '../../components/CommonDialog/CommonDialog';
 import { TbDatabaseExport } from "react-icons/tb";
+import { TfiPieChart } from "react-icons/tfi";
+import { IoBookmarkOutline } from "react-icons/io5";
+import { RiDonutChartLine } from 'react-icons/ri';
 import './Dashboard.scss';
 
 
@@ -309,7 +312,6 @@ export default function Dashboard() {
                 navigate("/", { replace: true });
             }, 1500);
         }).catch((_error: any) => {
-            console.log(_error);
             toast.error(_error?.response?.data?.error ?? "Impossible de vous déconnecter");
         });
     };
@@ -324,7 +326,6 @@ export default function Dashboard() {
                 navigate("/", { replace: true });
             }, 1500);
         }).catch((_error: any) => {
-            console.log(_error);
             toast.error(_error?.response?.data?.error ?? "Impossible de mettre à jour votre mot de passe");
         });
     };
@@ -404,6 +405,12 @@ export default function Dashboard() {
         }
     };
 
+    const refreshData = async () => {
+        queryResults.forEach((queryResult) => {
+            queryResult.refetch();
+        });
+    };
+
     /**
      * Charts
     */
@@ -577,13 +584,25 @@ export default function Dashboard() {
                                                 </Stack>
                                                 <TabMenu
                                                     cotisations={
-                                                        { dataCotisations: cotisations, valueSwitchCotisations: onlyPaid, changeOnlyPaid: handleOnlyPaidChange, isLoadingCotisations: loadingRefetch || loadingRefetchTab || loadingRefetchCotisations }
+                                                        {
+                                                            dataCotisations: cotisations,
+                                                            valueSwitchCotisations: onlyPaid,
+                                                            changeOnlyPaid: handleOnlyPaidChange,
+                                                            refreshFromCotisation: refreshData,
+                                                            isLoadingCotisations: loadingRefetch || loadingRefetchTab || loadingRefetchCotisations
+                                                        }
                                                     }
                                                     revenus={
                                                         { dataRevenus: revenus, isLoadingRevenus: loadingRefetch || loadingRefetchTab }
                                                     }
                                                     depenses={
-                                                        { dataDepenses: depenses, valueSwitchDepenses: forDette, changeForDette: handleForDetteChange, isLoadingDepenses: loadingRefetch || loadingRefetchTab || loadingRefetchDepenses }
+                                                        {
+                                                            dataDepenses: depenses,
+                                                            valueSwitchDepenses: forDette,
+                                                            changeForDette: handleForDetteChange,
+                                                            refreshFromDepense: refreshData,
+                                                            isLoadingDepenses: loadingRefetch || loadingRefetchTab || loadingRefetchDepenses
+                                                        }
                                                     }
                                                     dettes={
                                                         { dataDettes: dettes }
@@ -724,15 +743,21 @@ export default function Dashboard() {
                                             </Stack>
                                         </Menu>
                                     </Stack>
-                                    <Stack mt={2} bgcolor={`${colors.teal}09`} py={2} px={2.5} borderRadius={5} gap={3}>
+                                    <Stack mt={2} bgcolor={`${colors.teal}09`} py={4} px={4} borderRadius={10} gap={3}>
                                         <Stack gap={1} alignItems={"start"}>
-                                            <h4 className='m-0' style={{ fontSize: 16 }}>Situation</h4>
+                                            <Stack direction={"row"} gap={1} alignItems={"center"}>
+                                                <RiDonutChartLine size={18} color={colors.teal} />
+                                                <h4 className='m-0' style={{ fontSize: 15.6 }}>Situation</h4>
+                                            </Stack>
                                             <Stack py={0.8} px={1.5} bgcolor={`${getStatus()?.colors}20`} borderRadius={50}>
                                                 <small style={{ color: `${getStatus()?.colors}`, letterSpacing: 0.5, fontSize: 12.5 }}>{getStatus()?.status}</small>
                                             </Stack>
                                         </Stack>
                                         <Stack gap={1.8}>
-                                            <h4 className='m-0' style={{ fontSize: 16 }}>Budget</h4>
+                                            <Stack direction={"row"} gap={1} alignItems={"center"}>
+                                                <IoBookmarkOutline size={18} color={colors.teal} />
+                                                <h4 className='m-0' style={{ fontSize: 15.6 }}>Budget</h4>
+                                            </Stack>
                                             <Stack direction={"row"} bgcolor={colors.green} borderRadius={3} p={2} justifyContent={"space-between"} alignItems={"center"}>
                                                 <Stack direction={"row"} alignItems={"center"} gap={1.5}>
                                                     <TbMoneybag size={30} color='white' />
@@ -777,7 +802,10 @@ export default function Dashboard() {
                                             </Stack>
                                         </Stack>
                                         <Stack gap={1.5}>
-                                            <h4 className='m-0' style={{ fontSize: 16 }}>Répartition</h4>
+                                            <Stack direction={"row"} gap={1} alignItems={"center"}>
+                                                <TfiPieChart size={18} color={colors.teal} />
+                                                <h4 className='m-0' style={{ fontSize: 15.6 }}>Répartition</h4>
+                                            </Stack>
                                             <Doughnut data={totalsChartData} options={{
                                                 plugins: {
                                                     tooltip: {
@@ -814,4 +842,4 @@ export default function Dashboard() {
             <Toastr />
         </>
     );
-}
\ No newline at end of file
+};
\ No newline at end of file