[IMP] Improve ui cotisations and make the mois global for tab

Landris18 · Mar 12, 2024 · 0982fec · 0982fec
1 parent d997b5c
commit 0982fec
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 30 deletions.
diff --git a/src/components/TabMenu/TabMenu.scss b/src/components/TabMenu/TabMenu.scss
@@ -25,7 +25,7 @@
 .MuiTypography-body1 {
   font-family: "lexend" !important;
   color: #241f319b !important;
-  font-size: 15px !important;
+  font-size: 14px !important;
 }
 
 .MuiSwitch-thumb {

diff --git a/src/components/TabMenu/TabMenu.tsx b/src/components/TabMenu/TabMenu.tsx
@@ -3,10 +3,9 @@ import * as React from 'react';
 import {
     Stack, styled, Box, Tab, Tabs, TableContainer,
     Table, TableHead, TableRow, TableCell, TableBody,
-    InputLabel, Select, FormControl, MenuItem, FormControlLabel, Switch, alpha, CircularProgress
+    FormControlLabel, Switch, alpha, CircularProgress
 } from '@mui/material';
 import colors from '../../colors/colors';
-import { MONTHS } from '../../utility/utility';
 import { CiCircleInfo } from "react-icons/ci";
 import "./TabMenu.scss";
 
@@ -16,9 +15,7 @@ interface TabPanelProps {
     index: number;
     value: number;
     data?: any;
-    valueInput?: string;
     valueSwitch?: boolean;
-    changeMois?: Function;
     changeOnlyPaid?: Function;
     isLoading?: boolean
 }
@@ -29,7 +26,7 @@ const StyledTab = styled(Tab)({
     }
 });
 
-const PinkSwitch = styled(Switch)(({ theme }) => ({
+const CustomSwitch = styled(Switch)(({ theme }) => ({
     '& .MuiSwitch-switchBase.Mui-checked': {
         color: `${colors.blue} !important`,
         '&:hover': {
@@ -46,7 +43,7 @@ const columns = [
 ];
 
 const TabPanel = (props: TabPanelProps) => {
-    const { value, index, data, valueInput, valueSwitch, changeMois, changeOnlyPaid, isLoading } = props;
+    const { value, index, data, valueSwitch, changeOnlyPaid, isLoading } = props;
     const cols = columns[index];
 
     const getColorPaiement = (mode: string) => {
@@ -68,24 +65,10 @@ const TabPanel = (props: TabPanelProps) => {
                 if (index === 0) {
                     return (
                         <Stack mt={1.5}>
-                            <Stack direction={"row"} width={"100%"} justifyContent={"start"} alignItems={"center"} gap={2}>
-                                <FormControl size="small">
-                                    <InputLabel>Mois</InputLabel>
-                                    <Select
-                                        value={valueInput ?? ""}
-                                        label="Mois"
-                                        onChange={changeMois as any}
-                                    >
-                                        {
-                                            MONTHS.map((mo: string) => (
-                                                <MenuItem key={mo} value={mo}>{mo}</MenuItem>
-                                            ))
-                                        }
-                                    </Select>
-                                </FormControl>
-                                <FormControlLabel control={<PinkSwitch checked={valueSwitch} onChange={changeOnlyPaid as any} />} label="Payée seulement" />
+                            <Stack width={"100%"} alignItems={"end"}>
+                                    <FormControlLabel control={<CustomSwitch size="small" checked={valueSwitch} onChange={changeOnlyPaid as any} />} label={"Payées"} />
                             </Stack>
-                            <Stack bgcolor={"#e1e6ec20"}>
+                            <Stack bgcolor={"#1976d204"}>
                                 <TableContainer sx={{ maxHeight: 450 }} >
                                     <Table sx={{ minWidth: 650 }} aria-label="simple table" stickyHeader>
                                         <TableHead>
@@ -166,7 +149,7 @@ const a11yProps = (index: number) => {
 
 export default function TabMenu(props: any) {
     const { cotisations } = props;
-    const { data, valueInput, valueSwitch, changeMois, changeOnlyPaid, isLoading } = cotisations;
+    const { data, valueSwitch, changeOnlyPaid, isLoading } = cotisations;
 
     const [value, setValue] = React.useState(0);
 
@@ -176,7 +159,7 @@ export default function TabMenu(props: any) {
 
     return (
         <Box sx={{ width: '100%' }}>
-            <Stack alignItems={"end"} width={"100%"}>
+            <Stack alignItems={"center"} width={"100%"}>
                 <Tabs
                     value={value}
                     variant="scrollable" scrollButtons allowScrollButtonsMobile
@@ -189,7 +172,7 @@ export default function TabMenu(props: any) {
                     <StyledTab label="Dettes" {...a11yProps(3)} className="tab-label" />
                 </Tabs>
             </Stack>
-            <TabPanel value={value} index={0} data={data} valueInput={valueInput} valueSwitch={valueSwitch} changeOnlyPaid={changeOnlyPaid} changeMois={changeMois} isLoading={isLoading} />
+            <TabPanel value={value} index={0} data={data} valueSwitch={valueSwitch} changeOnlyPaid={changeOnlyPaid} isLoading={isLoading} />
             <TabPanel value={value} index={1} />
             <TabPanel value={value} index={2} />
             <TabPanel value={value} index={3} />

diff --git a/src/pages/Dashboard/Dashboard.scss b/src/pages/Dashboard/Dashboard.scss
@@ -22,7 +22,7 @@
 }
 
 .Mui-selected {
-  background-color: #1976d20b !important;
+  background-color: #1976d208 !important;
 }
 
 .MuiMenuItem-root {

diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
@@ -380,10 +380,26 @@ export default function Dashboard() {
                                                 }
                                             </Stack>
                                             <Stack p={3} borderRadius={4} bgcolor={"white"} mt={3} mb={4} gap={1}>
-                                                <h4 className='m-0'>Suivi financier </h4>
+                                                <Stack direction={"row"} alignItems={"start"} justifyContent={"space-between"}>
+                                                    <h4 className='m-0'>Suivi financier </h4>
+                                                    <FormControl size="small">
+                                                        <InputLabel>Mois</InputLabel>
+                                                        <Select
+                                                            value={moisCotisations}
+                                                            label="Mois"
+                                                            onChange={handleMoisChange}
+                                                        >
+                                                            {
+                                                                MONTHS.map((mo: string) => (
+                                                                    <MenuItem key={mo} value={mo}>{mo}</MenuItem>
+                                                                ))
+                                                            }
+                                                        </Select>
+                                                    </FormControl>
+                                                </Stack>
                                                 <TabMenu
                                                     cotisations={
-                                                        { data: cotisations, valueInput: moisCotisations, valueSwitch: onlyPaid, changeMois: handleMoisChange, changeOnlyPaid: handleOnlyPaidChange, isLoading: loadingRefetch || loadingRefetchTab }
+                                                        { data: cotisations, valueSwitch: onlyPaid, changeOnlyPaid: handleOnlyPaidChange, isLoading: loadingRefetch || loadingRefetchTab }
                                                     }
                                                 />
                                             </Stack>

diff --git a/src/services/services.ts b/src/services/services.ts
@@ -88,4 +88,16 @@ export default class Service {
         });
         return res;
     }
+
+    static async getRevenus(annee: number, mois: string) {
+        let res;
+        await axios.get(`${this.baseUrl}cotisations?annee=${annee}&mois=${mois}`, {
+            ...this.getBearerToken(),
+        }).then((response) => {
+            res = response.data;
+        }).catch((error) => {
+            throw error;
+        });
+        return res;
+    }
 }