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

aso client-portal dashboard

Browse Source
This commit is contained in:
Muhammad Fajar
2022-11-09 13:20:08 +07:00
parent 20944e4992
commit ce8f59c2ff
9 changed files with 8062 additions and 25005 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,51 +1,37 @@
// @mui
import { Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
import { Container, Grid, Typography } 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';
import { useEffect, useState } from 'react';
// import axios from '../utils/axios';
// import { useEffect, useState } from 'react';
import BalanceCard from '../sections/dashboard/BalanceCard';
import NotificationCard from '../sections/dashboard/NotificationCard';
import DashboardTable from '../sections/dashboard/DashboardTable';
// ----------------------------------------------------------------------
export default function Dashboard() {
const { themeStretch } = useSettings();
const { logout } = useAuth();
const [ corporate, setCorporate ] = useState({});
const loadSomething = () => {
// axios.get('/user')
axios.get('dashboard')
.then((res) => {
setCorporate(res.data.corporate)
})
.catch((err) => {
alert('Opps, Something Went Wrong when collecting dashboard data')
})
};
// const { logout } = useAuth();
// const [corporate, setCorporate] = useState({});
useEffect(() => {
loadSomething()
}, [])
// const loadSomething = () => {
// axios
// .get('dashboard')
// .then((res) => {
// setCorporate(res.data.corporate);
// })
// .catch((err) => {
// alert('Opps, Something Went Wrong when collecting dashboard data');
// });
// };
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,
}));
// useEffect(() => {
// loadSomething();
// }, []);
return (
<Page title="Dashboard">
@@ -55,23 +41,14 @@ export default function Dashboard() {
</Typography>
<Grid container spacing={2}>
<Grid item xs={6}>
<SomethingUsage />
<Grid item xs={6} lg={6} md={12}>
<NotificationCard />
</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 item xs={6} lg={6} md={12}>
<BalanceCard />
</Grid>
<Grid item xs={12} lg={12} md={12}>
<DashboardTable />
</Grid>
</Grid>
</Container>