fixing table filter and search on dashboard

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

@@ -22,15 +22,26 @@ import DialogClaimSubmitMember from './DialogClaimSubmitMember';
 
 type CardPolicyProps = {
   data: {
-    myLimit: {
-      balance: number;
-      total: number;
-      percentage: number;
-    };
-    lockLimit: {
-      balance: number;
-      percentage: number;
+    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: number;
+    //   totalLimit: number;
+    // };
   };
 };
 
@@ -65,7 +76,7 @@ export default function CardPolicy(props: CardPolicyProps) {
   const [dialogTitle, setDialogTitle] = useState('');
   const [isDialog, setIsDialog] = useState('');
 
-  const { myLimit, lockLimit } = props.data;
+  const { limit } = props.data;
 
   const clickHandler = (isDialog: string) => {
     switch (isDialog) {
@@ -94,23 +105,23 @@ export default function CardPolicy(props: CardPolicyProps) {
               Total Limit
             </Typography>
             <Typography sx={{ typography: 'body2' }}>
-              {fCurrency(myLimit ? myLimit.balance : 0)}
+              {fCurrency(limit.myLimit ? limit.myLimit.balance : 0)}
             </Typography>
             <Typography sx={{ typography: 'caption', color: '#919EAB' }}>
-              / {fSplit(myLimit ? myLimit.total : 0)}
+              / {fSplit(limit.myLimit ? limit.myLimit.total : 0)}
             </Typography>
           </div>
 
           <Stack direction="row" alignItems="center" justifyContent="center">
             <Typography variant="h5" sx={{ ml: 0.5 }}>
-              {myLimit ? myLimit.percentage : 0}%
+              {limit.myLimit ? limit.myLimit.percentage : 0}%
             </Typography>
           </Stack>
         </Stack>
 
         <BorderLinearProgress
           variant="determinate"
-          value={myLimit ? myLimit.percentage : 0}
+          value={limit.myLimit ? limit.myLimit.percentage : 0}
           sx={{ mb: 1 }}
         />
 
@@ -123,11 +134,12 @@ export default function CardPolicy(props: CardPolicyProps) {
               sx={{ color: '#424242', marginRight: '6px' }}
             />
             <Typography variant="caption" component="span">
-              Lock Fund ( {lockLimit ? lockLimit.percentage : 0}% )
+              Lock Fund ( {limit.lockLimit ? limit.lockLimit.percentage : 0}% )
             </Typography>
           </Typography>
           <Typography sx={{ typography: 'caption', color: '#637381' }}>
-            {fSplit(lockLimit ? lockLimit.balance : 0)} / {fSplit(myLimit ? myLimit.total : 0)}
+            {fSplit(limit.lockLimit ? limit.lockLimit.balance : 0)} /{' '}
+            {fSplit(limit.myLimit ? limit.myLimit.total : 0)}
           </Typography>
         </Stack>
 

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

@@ -21,14 +21,7 @@ import * as Yup from 'yup';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 
-// ----------------------------------------------------------------------
-
-type DataContent = {
-  info: string;
-  date: string;
-  time: string;
-};
-
+/* ---------------------------------- types --------------------------------- */
 type MuiDialogProps = {
   title?: {
     name?: string;
@@ -37,24 +30,31 @@ type MuiDialogProps = {
   openDialog: boolean;
   setOpenDialog: Function;
   content?: ReactElement;
-  data?: DataContent[];
+  data?: {
+    companyName: string;
+    policyNumber: number;
+    totalMembers: number;
+    totalCases: number;
+    totalPersen: number;
+    myLimit: number;
+    totalLimit: number;
+  };
 };
 
 type FormValuesProps = {
   topup: string;
 };
+/* -------------------------------------------------------------------------- */
 
-// ----------------------------------------------------------------------
-
-const testData = {
-  companyName: 'PT. Aman Mineral',
-  policyNumber: 12345678,
-  totalMembers: 50,
-  totalCases: 100,
-  totalPersen: 75,
-  myLimit: 375000000,
-  totalLimit: 500000000,
-};
+// const testData = {
+//   companyName: 'PT. Aman Mineral',
+//   policyNumber: 12345678,
+//   totalMembers: 50,
+//   totalCases: 100,
+//   totalPersen: 75,
+//   myLimit: 375000000,
+//   totalLimit: 500000000,
+// };
 
 const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
   height: 10,
@@ -70,7 +70,12 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
 
 // ----------------------------------------------------------------------
 
-const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+export default function DialogTopUpLimit({
+  title,
+  openDialog,
+  setOpenDialog,
+  data,
+}: MuiDialogProps) {
   const [isDisabledCheckbox, setIsDisabledCheckbox] = useState(false);
   const [isDisabledButton, setIsDisabledButton] = useState(true);
 
@@ -126,42 +131,42 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
         <Typography variant="caption" color="#637381">
           Company Name
         </Typography>
-        <Typography variant="body2">{testData.companyName}</Typography>
+        <Typography variant="body2">{data ? data.companyName : ''}</Typography>
       </Stack>
       <Stack>
         <Typography variant="caption" color="#637381">
           Policy Number
         </Typography>
-        <Typography variant="body2">{testData.policyNumber}</Typography>
+        <Typography variant="body2">{data ? data.policyNumber : 0}</Typography>
       </Stack>
       <Stack direction="row" spacing={22}>
         <Stack>
           <Typography variant="caption" color="#637381">
             Total Member
           </Typography>
-          <Typography variant="body2">{testData.totalMembers} Person</Typography>
+          <Typography variant="body2">{data ? data.totalMembers : 0} Person</Typography>
         </Stack>
         <Stack>
           <Typography variant="caption" color="#637381">
             Total Cases
           </Typography>
-          <Typography variant="body2">{testData.totalCases} Cases</Typography>
+          <Typography variant="body2">{data ? data.totalCases : 0} Cases</Typography>
         </Stack>
       </Stack>
       <Stack spacing={1} sx={{ backgroundColor: '#F4F6F8', borderRadius: 1.5, padding: 2 }}>
         <Stack direction="row" justifyContent="space-between" alignItems="center">
           <Stack>
             <Typography variant="body2">Company Pooled Fund</Typography>
-            <Typography variant="body2">{fCurrency(testData.myLimit)}</Typography>
+            <Typography variant="body2">{fCurrency(data ? data.myLimit : 0)}</Typography>
             <Typography variant="caption" color="#919EAB">
-              / {testData.totalLimit}
+              / {data ? data.totalLimit : 0}
             </Typography>
           </Stack>
           <Stack>
-            <Typography variant="h5">{testData.totalPersen}%</Typography>
+            <Typography variant="h5">{data ? data.totalPersen : 0}%</Typography>
           </Stack>
         </Stack>
-        <BorderLinearProgress variant="determinate" value={testData.totalPersen} />
+        <BorderLinearProgress variant="determinate" value={data ? data.totalPersen : 0} />
       </Stack>
       <Stack spacing={2}>
         <Typography variant="subtitle1" marginTop={3}>
@@ -178,7 +183,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
           <FormControlLabel
             sx={{ typography: 'caption' }}
             control={<Checkbox />}
-            label={'Max ' + fCurrency(testData.totalLimit - testData.myLimit)}
+            label={'Max ' + fCurrency((data ? data.totalLimit : 0) - (data ? data.myLimit : 0))}
             onChange={handleSubmit(onCheckHandler)}
           />
 
@@ -207,6 +212,4 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
       maxWidth="xs"
     />
   );
-};
-
-export default DialogTopUpLimit;
+}