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 />