97 lines
3.0 KiB
TypeScript
Executable File
97 lines
3.0 KiB
TypeScript
Executable File
// @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 Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
|
|
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
|
|
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
|
|
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 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>
|
|
);
|
|
}
|