create api for dashboard client portal

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

@@ -1,5 +1,13 @@
 // @mui
-import { Typography, Container, Grid } from '@mui/material';
+import {
+  Typography,
+  Container,
+  Grid,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+} from '@mui/material';
 // hooks
 import useSettings from '../../hooks/useSettings';
 // components
@@ -8,6 +16,11 @@ import Page from '../../components/Page';
 import CardNotification from '../../sections/dashboard/CardNotification';
 import CardBalance from '../../sections/dashboard/CardBalance';
 import TableList from '../../sections/dashboard/TableList';
+import { useEffect, useState } from 'react';
+import axios from '../../utils/axios';
+import { Stack } from '@mui/system';
+import { SelectChangeEvent } from '@mui/material/Select';
+import useAuth from '../../hooks/useAuth';
 
 // ----------------------------------------------------------------------
 
@@ -20,22 +33,93 @@ const itemList = [
 
 // ----------------------------------------------------------------------
 
+/* ---------------------------------- types --------------------------------- */
+
+type CorporateDataProps = {
+  id: number;
+  name: string;
+};
+
+type CardBalanceProps = {
+  myLimit: {
+    balance: number;
+    total: number;
+    percentage: number;
+  };
+  lockLimit: {
+    balance: number;
+    percentage: number;
+  };
+};
+
+/* -------------------------------------------------------------------------- */
+
 export default function Dashboard() {
   const { themeStretch } = useSettings();
+  const { user } = useAuth();
+
+  // @ts-ignore
+  const [corporateValue, setCorporateValue] = useState(`${user.corporate.id}`);
+  const [corporateData, setCorporateData] = useState([]);
+  const [policyData, setPolicyData] = useState<CardBalanceProps>({
+    myLimit: {
+      balance: 0,
+      total: 0,
+      percentage: 0,
+    },
+    lockLimit: {
+      balance: 0,
+      percentage: 0,
+    },
+  });
+
+  const handleCorporateChange = (event: SelectChangeEvent) => {
+    setCorporateValue(event.target.value as string);
+  };
+
+  useEffect(() => {
+    (async () => {
+      const corporates = await axios.get('corporate');
+      const dashboard = await axios.get('dashboard');
+
+      setCorporateData(corporates.data);
+      setPolicyData(dashboard.data.policy);
+    })();
+  }, [user, corporateValue]);
 
   return (
     <Page title="Dashboard">
       <Container maxWidth={themeStretch ? false : 'xl'}>
-        <Typography variant="h3" component="h1" paragraph>
-          Dashboard
-        </Typography>
+        <Stack direction="row" justifyContent="space-between">
+          <Typography variant="h3" component="h1" paragraph>
+            Dashboard
+          </Typography>
+
+          <FormControl>
+            <InputLabel id="simple-corporate-select-lable">Corporate</InputLabel>
+            <Select
+              labelId="simple-corporate-select-lable"
+              id="corporate-select-lable"
+              value={corporateValue}
+              label="Corporate"
+              defaultValue={corporateValue}
+              onChange={handleCorporateChange}
+            >
+              {corporateData.map((row: CorporateDataProps, index) => (
+                <MenuItem key={index} value={row.id}>
+                  {row.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </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}>
-            <CardBalance />
+            <CardBalance data={policyData} />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
             <TableList />

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

@@ -14,23 +14,29 @@ import Iconify from '../../components/Iconify';
 import { useState } from 'react';
 // utils
 import { fCurrency } from '../../utils/formatNumber';
-// <sections></sections>
+/* -------------------------------- sections -------------------------------- */
 import DialogTopUpLimit from './DialogTopUpLimit';
 import DialogClaimSubmitMember from './DialogClaimSubmitMember';
 
-// ----------------------------------------------------------------------
+/* ---------------------------------- types --------------------------------- */
 
-type DataMembers = {
-  name: string;
-  memberId: string;
-  saldo: string;
+type CardBalanceProps = {
+  data: {
+    myLimit: {
+      balance: number;
+      total: number;
+      percentage: number;
+    };
+    lockLimit: {
+      balance: number;
+      percentage: number;
+    };
+  };
 };
 
-type NotificationProps = {
-  data?: { members: DataMembers[] };
-};
+/* -------------------------------------------------------------------------- */
 
-// ----------------------------------------------------------------------
+/* --------------------------------- styled --------------------------------- */
 
 const RootBalanceStyle = styled(Card)(({ theme }) => ({
   boxShadow: 'none',
@@ -52,19 +58,15 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
   },
 }));
 
-// ----------------------------------------------------------------------
+/* -------------------------------------------------------------------------- */
 
-const INITIAL = '500.000.000';
-const TOTAL = 375000000;
-const PERCENT = 75;
-
-// ----------------------------------------------------------------------
-
-export default function CardBalance({ data }: NotificationProps) {
+export default function CardBalance(props: CardBalanceProps) {
   const [openDialog, setOpenDialog] = useState(false);
   const [dialogTitle, setDialogTitle] = useState('');
   const [isDialog, setIsDialog] = useState('');
 
+  const { myLimit, lockLimit } = props.data;
+
   const clickHandler = (isDialog: string) => {
     switch (isDialog) {
       case 'submitClaim':
@@ -91,18 +93,26 @@ export default function CardBalance({ data }: NotificationProps) {
             <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
               Total Limit
             </Typography>
-            <Typography sx={{ typography: 'body2' }}>{fCurrency(TOTAL)}</Typography>
-            <Typography sx={{ typography: 'caption', color: '#919EAB' }}>/ {INITIAL}</Typography>
+            <Typography sx={{ typography: 'body2' }}>
+              {fCurrency(myLimit ? myLimit.balance : 0)}
+            </Typography>
+            <Typography sx={{ typography: 'caption', color: '#919EAB' }}>
+              / {myLimit ? myLimit.total : 0}
+            </Typography>
           </div>
 
           <Stack direction="row" alignItems="center" justifyContent="center">
             <Typography variant="h5" sx={{ ml: 0.5 }}>
-              {PERCENT}%
+              {myLimit ? myLimit.percentage : 0}%
             </Typography>
           </Stack>
         </Stack>
 
-        <BorderLinearProgress variant="determinate" value={PERCENT} sx={{ mb: 1 }} />
+        <BorderLinearProgress
+          variant="determinate"
+          value={myLimit ? myLimit.percentage : 0}
+          sx={{ mb: 1 }}
+        />
 
         <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
           <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
@@ -113,11 +123,11 @@ export default function CardBalance({ data }: NotificationProps) {
               sx={{ color: '#424242', marginRight: '6px' }}
             />
             <Typography variant="caption" component="span">
-              Lock Fund ( 25% )
+              Lock Fund ( {lockLimit ? lockLimit.percentage : 0}% )
             </Typography>
           </Typography>
           <Typography sx={{ typography: 'caption', color: '#637381' }}>
-            125.000.000 / 125.000.000
+            {lockLimit ? lockLimit.balance : 0}
           </Typography>
         </Stack>
 
@@ -146,7 +156,7 @@ export default function CardBalance({ data }: NotificationProps) {
           openDialog={openDialog}
           setOpenDialog={setOpenDialog}
           title={{ name: dialogTitle }}
-          data={data?.members}
+          // data={data?.members}
         />
       )}