tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

create table component & connect api for dashboard

Browse Source
This commit is contained in:
Fajar
2023-03-24 09:14:49 +07:00
parent d5dfc7d36c
commit 3c5f06ef26
17 changed files with 745 additions and 681 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/client-portal/src/pages/Dashboard/Dashboard.tsx
View File

@@ -1,93 +0,0 @@
// @mui
import { Typography, Container, Grid } from '@mui/material';
// hooks
import useSettings from '../../hooks/useSettings';
// components
import Page from '../../components/Page';
// theme
import CardNotification from '../../sections/dashboard/CardNotification';
import CardBalance from '../../sections/dashboard/CardBalance';
import TableList from '../../sections/dashboard/TableList';
import { useContext, useEffect, useState } from 'react';
import axios from '../../utils/axios';
import { Stack } from '@mui/system';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
// ----------------------------------------------------------------------
const itemList = [
{ info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' },
];
// ----------------------------------------------------------------------
/* ---------------------------------- types --------------------------------- */
type PolicyProps = {
myLimit: {
balance: number;
total: number;
percentage: number;
};
lockLimit: {
balance: number;
percentage: number;
};
};
/* -------------------------------------------------------------------------- */
/* ------------------------------ default data ------------------------------ */
const defaultPolicyData = {
myLimit: {
balance: 0,
total: 0,
percentage: 0,
},
lockLimit: {
balance: 0,
percentage: 0,
},
};
/* -------------------------------------------------------------------------- */
export default function Dashboard() {
const { themeStretch } = useSettings();
const { corporateValue } = useContext(UserCurrentCorporateContext);
// const [tableData, setTableData] = useState([]);
const [policyData, setPolicyData] = useState<PolicyProps>(defaultPolicyData);
useEffect(() => {
(async () => {
setPolicyData(defaultPolicyData);
await new Promise((resolve) => setTimeout(resolve, 250));
const dashboard = await axios.get(`${corporateValue}/policy`);
setPolicyData(dashboard.data.policy);
})();
}, [corporateValue]);
return (
<Page title="Dashboard">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" justifyContent="space-between">
<Typography variant="h3" component="h1" paragraph>
Dashboard
</Typography>
</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 data={policyData} />
</Grid>
<Grid item xs={12} lg={12} md={12}>
<TableList />
</Grid>
</Grid>
</Container>
</Page>
);
}