client portal update

frontend/client-portal/src/sections/claim-submit/CardPolicy.tsx

@@ -20,20 +20,20 @@ import DialogClaimSubmitMember from './DialogClaimSubmitMember';
 
 /* ---------------------------------- types --------------------------------- */
 
-type DataMember = {
-  id: number;
-  fullName: string;
-  memberId: string;
-  limit: {
-    current: number;
-    total: number;
-    percentage: number;
-  };
-  avatar?: {
-    url?: string;
-    title?: string;
-  };
-};
+// type DataMember = {
+//   id: number;
+//   fullName: string;
+//   memberId: string;
+//   limit: {
+//     current: number;
+//     total: number;
+//     percentage: number;
+//   };
+//   avatar?: {
+//     url?: string;
+//     title?: string;
+//   };
+// };
 
 type CardPolicyProps = {
   data: {
@@ -99,7 +99,7 @@ export default function CardPolicy(props: CardPolicyProps) {
   const [dialogTitle, setDialogTitle] = useState('');
   const [isDialog, setIsDialog] = useState('');
 
-  const { limit, topUpLimit, members } = props.data || {};
+  const { limit, topUpLimit } = props.data || {};
   if (!limit || !topUpLimit) {
     return null;
   }
@@ -178,14 +178,14 @@ export default function CardPolicy(props: CardPolicyProps) {
           >
             Submit Claim
           </Button>
-          <Button
+          {/* <Button
             variant="contained"
             startIcon={<Iconify icon="heroicons-solid:cash" />}
             fullWidth={true}
             onClick={() => clickHandler('topUpLimit')}
           >
             Top Up
-          </Button>
+          </Button> */}
         </Stack>
       </>
 

frontend/client-portal/src/sections/dashboard/CardPolicy.tsx

@@ -7,11 +7,12 @@ import {
   LinearProgress,
   linearProgressClasses,
   Stack,
+  Skeleton,
 } from '@mui/material';
 // components
 import Iconify from '../../components/Iconify';
 // React
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 // utils
 import { fCurrency, fSplit } from '../../utils/formatNumber';
 /* -------------------------------- sections -------------------------------- */
@@ -20,23 +21,23 @@ import DialogClaimSubmitMember from './DialogClaimSubmitMember';
 
 /* ---------------------------------- types --------------------------------- */
 
-type DataMember = {
-  id: number;
-  fullName: string;
-  memberId: string;
-  limit: {
-    current: number;
-    total: number;
-    percentage: number;
-  };
-  avatar?: {
-    url?: string;
-    title?: string;
-  };
-};
+// type DataMember = {
+//   id: number;
+//   fullName: string;
+//   memberId: string;
+//   limit: {
+//     current: number;
+//     total: number;
+//     percentage: number;
+//   };
+//   avatar?: {
+//     url?: string;
+//     title?: string;
+//   };
+// };
 
 type CardPolicyProps = {
-  data: {
+  data?: {
     limit: {
       myLimit: {
         balance: number;
@@ -61,10 +62,6 @@ type CardPolicyProps = {
       };
       maxTopUp: number;
     };
-    members: {
-      memberId: string;
-      memberFullName: string;
-    };
   };
 };
 
@@ -99,10 +96,7 @@ export default function CardPolicy(props: CardPolicyProps) {
   const [dialogTitle, setDialogTitle] = useState('');
   const [isDialog, setIsDialog] = useState('');
 
-  const { limit, topUpLimit, members } = props.data || {};
-  if (!limit || !topUpLimit) {
-    return null;
-  }
+  const { limit, topUpLimit } = props.data || {};
 
   const clickHandler = (isDialog: string) => {
     switch (isDialog) {
@@ -124,70 +118,108 @@ export default function CardPolicy(props: CardPolicyProps) {
 
   return (
     <RootBalanceStyle>
-      <>
-        <Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }}>
-          <div>
+      <Fragment>
+        <Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }} spacing={2}>
+          <Stack>
             <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
-              Total Limit
+              {limit ? (
+                'Total Limit'
+              ) : (
+                <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" width={75} />
+              )}
             </Typography>
             <Typography sx={{ typography: 'body2' }}>
-              {fCurrency(limit.myLimit ? limit.myLimit.balance : 0)}
+              {limit ? (
+                fCurrency(limit.myLimit.balance ?? 0)
+              ) : (
+                <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" width={150} />
+              )}
             </Typography>
             <Typography sx={{ typography: 'caption', color: '#919EAB' }}>
-              / {fSplit(limit.myLimit ? limit.myLimit.total : 0)}
+              {limit ? (
+                `/ ${fSplit(limit.myLimit.total ?? 0)}`
+              ) : (
+                <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" />
+              )}
             </Typography>
-          </div>
+          </Stack>
 
           <Stack direction="row" alignItems="center" justifyContent="center">
             <Typography variant="h5" sx={{ ml: 0.5 }}>
-              {limit.myLimit ? limit.myLimit.percentage : 0}%
+              {limit ? (
+                `${limit.myLimit.percentage ?? 0}%`
+              ) : (
+                <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" width={70} />
+              )}
             </Typography>
           </Stack>
         </Stack>
 
-        <BorderLinearProgress
-          variant="determinate"
-          value={limit.myLimit ? limit.myLimit.percentage : 0}
-          sx={{ mb: 1 }}
-        />
+        {limit ? (
+          <BorderLinearProgress
+            variant="determinate"
+            value={limit.myLimit.percentage ?? 0}
+            sx={{ mb: 1 }}
+          />
+        ) : (
+          <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" />
+        )}
 
         <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
           <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
-            <Iconify
-              icon="bxs:lock-alt"
-              width={12}
-              height={13}
-              sx={{ color: '#424242', marginRight: '6px' }}
-            />
-            <Typography variant="caption" component="span">
-              Lock Fund ( {limit.lockLimit ? limit.lockLimit.percentage : 0}% )
-            </Typography>
+            {limit ? (
+              <Fragment>
+                <Iconify
+                  icon="bxs:lock-alt"
+                  width={12}
+                  height={13}
+                  sx={{ color: '#424242', marginRight: '6px' }}
+                />
+                <Typography variant="caption" component="span">
+                  Lock Fund ( {limit.lockLimit.percentage ?? 0}% )
+                </Typography>
+              </Fragment>
+            ) : (
+              <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" width={130} />
+            )}
           </Typography>
           <Typography sx={{ typography: 'caption', color: '#637381' }}>
-            {fSplit(limit.lockLimit ? limit.lockLimit.balance : 0)} /{' '}
-            {fSplit(limit.myLimit ? limit.myLimit.total : 0)}
+            {limit ? (
+              `${fSplit(limit.lockLimit.balance ?? 0)} / ${fSplit(limit.myLimit.total ?? 0)}`
+            ) : (
+              <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" width={120} />
+            )}
           </Typography>
         </Stack>
 
         <Stack direction="row" spacing={2}>
-          <Button
-            variant="outlined"
-            startIcon={<Iconify icon="bi:clipboard-check-fill" />}
-            fullWidth={true}
-            onClick={() => clickHandler('submitClaim')}
-          >
-            Submit Claim
-          </Button>
-          <Button
+          {limit ? (
+            <Button
+              variant="outlined"
+              startIcon={<Iconify icon="bi:clipboard-check-fill" />}
+              fullWidth={true}
+              onClick={() => clickHandler('submitClaim')}
+            >
+              Submit Claim
+            </Button>
+          ) : (
+            <Skeleton
+              sx={{ bgcolor: 'grey.300' }}
+              animation="wave"
+              height={'36px'}
+              width={'100%'}
+            />
+          )}
+          {/* <Button
             variant="contained"
             startIcon={<Iconify icon="heroicons-solid:cash" />}
             fullWidth={true}
             onClick={() => clickHandler('topUpLimit')}
           >
             Top Up
-          </Button>
+          </Button> */}
         </Stack>
-      </>
+      </Fragment>
 
       {isDialog === 'submitClaim' && (
         <DialogClaimSubmitMember