68 lines
2.1 KiB
TypeScript
Executable File
68 lines
2.1 KiB
TypeScript
Executable File
// @mui
|
|
import { Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
|
|
// hooks
|
|
import useSettings from '../hooks/useSettings';
|
|
// components
|
|
import Page from '../components/Page';
|
|
import axios from '../utils/axios';
|
|
import useAuth from '../hooks/useAuth';
|
|
import SomethingUsage from '../sections/dashboard/SomethingUsage';
|
|
import { fCurrency } from '../utils/formatNumber';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export default function Dashboard() {
|
|
const { themeStretch } = useSettings();
|
|
|
|
const { logout } = useAuth();
|
|
|
|
const loadSomething = () => {
|
|
axios.get('/user')
|
|
};
|
|
|
|
const DangerCard = styled(Card)(({ theme }) => ({
|
|
boxShadow: 'none',
|
|
padding: theme.spacing(3),
|
|
color: theme.palette.error.main,
|
|
backgroundColor: theme.palette.error.lighter,
|
|
}));
|
|
|
|
const SuccessCard = styled(Card)(({ theme }) => ({
|
|
boxShadow: 'none',
|
|
padding: theme.spacing(3),
|
|
color: theme.palette.success.darker,
|
|
backgroundColor: theme.palette.success.lighter,
|
|
}));
|
|
|
|
return (
|
|
<Page title="Dashboard">
|
|
<Container maxWidth={themeStretch ? false : 'xl'}>
|
|
<Typography variant="h3" component="h1" paragraph>
|
|
Dashboard
|
|
</Typography>
|
|
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<SomethingUsage />
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<DangerCard>
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
|
|
<Typography sx={{ typography: 'subtitle2' }}>This Month Usages </Typography>
|
|
<Typography>{fCurrency(15000000)} (57)</Typography>
|
|
</Stack>
|
|
</DangerCard>
|
|
<br />
|
|
<SuccessCard>
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
|
|
<Typography sx={{ typography: 'subtitle2' }}>Remaining Balance Estimation </Typography>
|
|
<Typography>November 2022</Typography>
|
|
</Stack>
|
|
</SuccessCard>
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
</Page>
|
|
);
|
|
}
|