[Client Portal] Fix Dashboard change url & first default corporate & table loading

frontend/client-portal/src/components/Table.tsx

@@ -288,7 +288,11 @@ export default function Table<T>({
           {exportReport && exportReport.useExport ? (
             <Grid item xs={12} lg={2} xl={2}>
               <FormControl fullWidth>
-                <Button variant="contained" sx={{ p: 2 }} onClick={exportReport.handleExportReport}>
+                <Button
+                  variant="contained"
+                  sx={{ p: 2 }}
+                  onClick={() => exportReport.handleExportReport}
+                >
                   <Download />
                   <Typography variant="inherit" sx={{ marginLeft: 1 }}>
                     Export
@@ -329,12 +333,18 @@ export default function Table<T>({
                       ))}
                   </TableRow>
                 ))
-              ) : (
+              ) : loadings.isLoading === false && rows && rows.length === 0 ? (
                 <TableRow>
                   <TableCell colSpan={6} align="center">
                     No Data Found
                   </TableCell>
                 </TableRow>
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={6} align="center">
+                    Loading . . .
+                  </TableCell>
+                </TableRow>
               )}
             </TableBody>
             {/* End Table Body */}

frontend/client-portal/src/layouts/dashboard/header/CorporatePopover.tsx

@@ -14,24 +14,35 @@ type CorporateDataProps = {
 export default function CorporatePopover() {
   const { corporateValue, setCorporateValue } = useContext(UserCurrentCorporateContext);
   const [corporateData, setCorporateData] = useState([]);
-  //Check route in profile
+  const controller = new AbortController();
+
   const navigate = useNavigate();
   const currentPathname = window.location.pathname;
   const desiredPart = currentPathname.split('/')[1];
 
   const handleCorporateChange = (event: SelectChangeEvent) => {
     setCorporateValue(event.target.value as string);
-    if(desiredPart === 'user-profile')
-    {
+    if (desiredPart === 'user-profile') {
       navigate('/alarm-center');
     }
   };
 
   useEffect(() => {
     (async () => {
-      // @ts-ignore
-      const corporateManages = await axios.get(`/corporate-manage`);
-      setCorporateData(corporateManages.data);
+      try {
+        const corporateManages = await axios.get(`/corporate-manage`, {
+          signal: controller.signal,
+        });
+        setCorporateData(corporateManages.data);
+
+        setCorporateValue(corporateManages.data[0].id);
+      } catch (error: any) {
+        console.error('Error fetching data:', error.message);
+      }
+
+      return () => {
+        controller.abort();
+      };
     })();
   }, []);
 

frontend/client-portal/src/pages/Dashboard/Index.tsx

@@ -1,83 +1,25 @@
 // @mui
-import { styled } from '@mui/material/styles';
-import {
-  Typography,
-  Container,
-  Grid,
-  Button,
-  LinearProgress,
-  linearProgressClasses,
-  SelectChangeEvent,
-} from '@mui/material';
+import { Typography, Container, Grid, Button, SelectChangeEvent } from '@mui/material';
 // hooks
 import useSettings from '../../hooks/useSettings';
 // components
 import Page from '../../components/Page';
 // theme
-import CardPolicy from '../../sections/dashboard/CardPolicy';
 import { useContext, useEffect, useState } from 'react';
 import axios from '../../utils/axios';
 import { Stack } from '@mui/system';
 import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
 import Table from '../../components/Table';
 import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
-import { useLocation, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import palette from '../../theme/palette';
-import { fSplit } from '../../utils/formatNumber';
-import { closeSnackbar, enqueueSnackbar } from 'notistack';
-
-/* ------------------------------ default data ------------------------------ */
-type DataMember = {
-  id: number;
-  fullName: string;
-  memberId: string;
-  limit: {
-    current: number;
-    total: number;
-    percentage: number;
-  };
-  avatar?: {
-    url?: string;
-    title?: string;
-  };
-};
-
-type CardPolicyProps = {
-  limit: {
-    myLimit: {
-      balance: number;
-      total: number;
-      percentage: number;
-    };
-    lockLimit: {
-      balance: number;
-      percentage: number;
-    };
-  };
-  topUpLimit: {
-    companyName: string;
-    policyNumber: number;
-    totalMembers: number;
-    totalCases: number;
-    totalPersen: number;
-    myLimit: {
-      balance: number;
-      total: number;
-      percentage: number;
-    };
-    maxTopUp: number;
-  };
-  members?: DataMember[];
-};
-/* -------------------------------------------------------------------------- */
 
 export default function Index() {
   const { themeStretch } = useSettings();
   const { corporateValue } = useContext(UserCurrentCorporateContext);
-  const { pathname } = useLocation();
+  const controller = new AbortController();
 
   const [memberData, setMemberData] = useState([]);
-  const [policyData, setPolicyData] = useState<CardPolicyProps>();
 
   /* -------------------------------------------------------------------------- */
   /*                          setting up for the table                          */
@@ -89,20 +31,6 @@ export default function Index() {
     setIsLoading: setIsLoading,
   };
 
-  /* ----------------------------- limit progress ----------------------------- */
-  const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
-    height: 10,
-    borderRadius: 6,
-    [`&.${linearProgressClasses.colorPrimary}`]: {
-      backgroundColor: '#D1F1F1',
-    },
-    [`& .${linearProgressClasses.bar}`]: {
-      borderRadius: 6,
-      backgroundColor: theme.palette.primary.main,
-    },
-  }));
-  /* -------------------------------------------------------------------------- */
-
   /* ------------------------------ handle params ----------------------------- */
   const [searchParams, setSearchParams] = useSearchParams();
   const [appliedParams, setAppliedParams] = useState({});
@@ -227,12 +155,6 @@ export default function Index() {
       label: 'Divisi',
       isSort: true,
     },
-    // {
-    //   id: 'limit',
-    //   align: 'center',
-    //   label: 'Limit',
-    //   isSort: false,
-    // },
     {
       id: 'status',
       align: 'center',
@@ -250,106 +172,83 @@ export default function Index() {
 
   useEffect(() => {
     (async () => {
-      setIsLoading(true);
-      const loadNotif = enqueueSnackbar('Data sedang di load, harap tunggu!', {
-        variant: 'info',
-        autoHideDuration: null,
-        anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
-      });
+      try {
+        setIsLoading(true);
 
-      const parameters =
-        Object.keys(appliedParams).length !== 0
-          ? appliedParams
-          : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
+        const parameters =
+          Object.keys(appliedParams).length !== 0
+            ? appliedParams
+            : Object.fromEntries([
+                ...searchParams.entries(),
+                ['order', order],
+                ['orderBy', orderBy],
+              ]);
 
-      const corporatePolicyLimit = await axios.get(`${corporateValue}/policy`);
-      const corporateDivision = await axios.get(`${corporateValue}/division`);
-      const corporateMembers = await axios.get(`${corporateValue}/members`, {
-        params: { ...parameters },
-      });
+        const [divisionResponse, membersResponse] = await Promise.all([
+          axios.get(`${corporateValue}/division`, { signal: controller.signal }),
+          axios.get(`${corporateValue}/members`, {
+            params: { ...parameters },
+            signal: controller.signal,
+          }),
+        ]);
 
-      const corporateTopUpLimit = await axios.get(`${corporateValue}/topup`);
-
-      if (pathname === '/dashboard') {
         setSearchParams(parameters);
+        setDivisionData(divisionResponse.data);
+        setMemberData(
+          membersResponse.data.data.map((obj: any) => ({
+            ...obj,
+            status:
+              obj.status === 1 ? (
+                <Button
+                  sx={{
+                    backgroundColor: 'rgba(84, 214, 44, 0.16)',
+                    color: palette.dark.success.dark,
+                    paddingY: 0,
+                    '&:hover': {
+                      backgroundColor: 'rgba(84, 214, 44, 0.32)',
+                      color: palette.dark.success.darker,
+                    },
+                  }}
+                >
+                  Active
+                </Button>
+              ) : (
+                <Button
+                  sx={{
+                    backgroundColor: 'rgba(255, 72, 66, 0.16)',
+                    color: palette.dark.error.dark,
+                    paddingY: 0,
+                    '&:hover': {
+                      backgroundColor: 'rgba(255, 72, 66, 0.32)',
+                      color: palette.dark.error.darker,
+                    },
+                  }}
+                >
+                  Inactive
+                </Button>
+              ),
+          }))
+        );
+        setPaginationTable(membersResponse.data);
+        setRowsPerPage(membersResponse.data.per_page);
+
+        if (searchParams.get('page')) {
+          // @ts-ignore
+          const currentPage = parseInt(searchParams.get('page')) - 1;
+          paginationTable.current_page = currentPage;
+          setPage(currentPage);
+        }
+
+        setIsLoading(false);
+      } catch (error: any) {
+        console.error('Error fetching data:', error.message);
       }
-
-      setPolicyData({
-        limit: corporatePolicyLimit.data.data,
-        topUpLimit: corporateTopUpLimit.data.data,
-      });
-      setDivisionData(corporateDivision.data);
-      setMemberData(
-        corporateMembers.data.data.map((obj: any) => ({
-          ...obj,
-          // limit: (
-          //   <Stack>
-          //     <BorderLinearProgress
-          //       variant="determinate"
-          //       value={obj.limit.percentage}
-          //       sx={{ mb: 1 }}
-          //     />
-          //     <Typography sx={{ typography: 'caption', color: '#637381' }}>
-          //       {fSplit(obj.limit.current)} / {fSplit(obj.limit.total)}
-          //     </Typography>
-          //   </Stack>
-          // ),
-          status:
-            obj.status === 1 ? (
-              <Button
-                sx={{
-                  backgroundColor: 'rgba(84, 214, 44, 0.16)',
-                  color: palette.dark.success.dark,
-                  paddingY: 0,
-                  '&:hover': {
-                    backgroundColor: 'rgba(84, 214, 44, 0.32)',
-                    color: palette.dark.success.darker,
-                  },
-                }}
-              >
-                Active
-              </Button>
-            ) : (
-              <Button
-                sx={{
-                  backgroundColor: 'rgba(255, 72, 66, 0.16)',
-                  color: palette.dark.error.dark,
-                  paddingY: 0,
-                  '&:hover': {
-                    backgroundColor: 'rgba(255, 72, 66, 0.32)',
-                    color: palette.dark.error.darker,
-                  },
-                }}
-              >
-                Inactive
-              </Button>
-            ),
-          /* action: (
-              <IconButton onClick={handleAction}>
-                <MoreVertIcon />
-              </IconButton>
-            ), */
-        }))
-      );
-      setPaginationTable(corporateMembers.data);
-      setRowsPerPage(corporateMembers.data.per_page);
-
-      if (searchParams.get('page')) {
-        //@ts-ignore
-        const currentPage = parseInt(searchParams.get('page')) - 1;
-
-        paginationTable.current_page = currentPage;
-        setPage(currentPage);
-      }
-
-      closeSnackbar(loadNotif);
-      setIsLoading(false);
-      enqueueSnackbar('Data sudah di load!', {
-        variant: 'info',
-        anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
-      });
     })();
-  }, [appliedParams, searchParams, order, orderBy, pathname, setSearchParams, corporateValue]);
+
+    return () => {
+      controller.abort();
+    };
+  }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
 
   return (
     <Page title="Dashboard">
@@ -361,12 +260,6 @@ export default function Index() {
         </Stack>
 
         <Grid container spacing={2}>
-          {/* <Grid item xs={12} lg={6} md={12}>
-            <CardNotification data={itemList} />
-          </Grid>
-          <Grid item xs={12} lg={6} md={12}>
-            <CardPolicy data={policyData} />
-          </Grid> */}
           <Grid item xs={12} lg={12} md={12}>
             <Table
               headCells={headCells}