Change Permission & WIP Dashboard Client Portal

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

@@ -21,9 +21,8 @@ import { useContext, useEffect, useState } from 'react';
 import axios from '../../utils/axios';
 import { Stack } from '@mui/system';
 import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
-import { PolicyProps } from '../../@types/policy';
 import Table from '../../components/Table';
-import { DivisionData, HeadCell, Order, PaginationTableProps } from '../../@types/table';
+import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
 import { useSearchParams } from 'react-router-dom';
 import palette from '../../theme/palette';
 import { MoreVert as MoreVertIcon } from '@mui/icons-material';
@@ -37,16 +36,47 @@ const itemList = [
 ];
 
 /* ------------------------------ default data ------------------------------ */
-const defaultPolicyData = {
-  myLimit: {
-    balance: 0,
-    total: 0,
-    percentage: 0,
-  },
-  lockLimit: {
-    balance: 0,
-    percentage: 0,
-  },
+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[];
 };
 /* -------------------------------------------------------------------------- */
 
@@ -55,7 +85,7 @@ export default function Index() {
   const { corporateValue } = useContext(UserCurrentCorporateContext);
 
   const [memberData, setMemberData] = useState([]);
-  const [policyData, setPolicyData] = useState<PolicyProps>(defaultPolicyData);
+  const [policyData, setPolicyData] = useState<CardPolicyProps>();
 
   /* -------------------------------------------------------------------------- */
   /*                          setting up for the table                          */
@@ -209,7 +239,6 @@ export default function Index() {
       align: 'center',
       label: 'Limit',
       isSort: false,
-      //   width: 170,
     },
     {
       id: 'status',
@@ -235,7 +264,6 @@ export default function Index() {
   useEffect(() => {
     (async () => {
       setIsLoading(true);
-      let mounted = true;
 
       await new Promise((resolve) => setTimeout(resolve, 250));
 
@@ -244,85 +272,89 @@ export default function Index() {
           ? appliedParams
           : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
 
-      // get data policy, division, member using axios
       const corporatePolicyLimit = await axios.get(`${corporateValue}/policy`);
       const corporateDivision = await axios.get(`${corporateValue}/division`);
       const corporateMembers = await axios.get(`${corporateValue}/members`, {
         params: { ...parameters },
       });
+      const corporateTopUpLimit = await axios.get(`${corporateValue}/topup`);
 
       setSearchParams(parameters);
+      setPolicyData({
+        limit: corporatePolicyLimit.data.data,
+        topUpLimit: corporateTopUpLimit.data.data,
+      });
+      setDivisionData(corporateDivision.data);
+      setMemberData(
+        corporateMembers.data.data.map((obj: any) => {
+          return {
+            ...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 (mounted) {
-        setPolicyData(corporatePolicyLimit.data.data);
-        setDivisionData(corporateDivision.data);
-        setMemberData(corporateMembers.data.data);
-        setPaginationTable(corporateMembers.data);
-        setRowsPerPage(corporateMembers.data.per_page);
+      if (searchParams.get('page')) {
+        //@ts-ignore
+        const currentPage = parseInt(searchParams.get('page')) - 1;
 
-        setIsLoading(false);
+        paginationTable.current_page = currentPage;
+        setPage(currentPage);
       }
 
-      return () => {
-        mounted = false;
-      };
+      setIsLoading(false);
     })();
   }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
 
-  /* ------------------------------- card policy ------------------------------ */
-  const newPolicyData = {
-    limit: policyData,
-  };
-  /* -------------------------------------------------------------------------- */
-
-  const newMemberData: any = memberData.map((obj: any) => {
-    return {
-      ...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>
-      ),
-    };
-  });
+  console.log(policyData);
 
   return (
     <Page title="Dashboard">
@@ -338,12 +370,12 @@ export default function Index() {
             <CardNotification data={itemList} />
           </Grid>
           <Grid item xs={12} lg={6} md={12}>
-            <CardPolicy data={newPolicyData} />
+            <CardPolicy data={policyData} />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
             <Table
               headCells={headCells}
-              rows={newMemberData}
+              rows={memberData}
               orders={orders}
               paginations={paginations}
               loadings={loadings}