dialog component, dash & service-monitoring slice
This commit is contained in:
Muhammad Fajar
@@ -1,74 +1,17 @@
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Typography,
|
||||
Link,
|
||||
Divider,
|
||||
Stack,
|
||||
LinearProgress,
|
||||
linearProgressClasses,
|
||||
Container,
|
||||
Grid,
|
||||
} from '@mui/material';
|
||||
import { ChevronRight } from '@mui/icons-material';
|
||||
import { Typography, Container, Grid } from '@mui/material';
|
||||
// hooks
|
||||
import useSettings from '../../hooks/useSettings';
|
||||
// utils
|
||||
import { fCurrency } from '../../utils/formatNumber';
|
||||
// components
|
||||
import Page from '../../components/Page';
|
||||
import Iconify from '../../components/Iconify';
|
||||
// import Popup from '../components/Popup';
|
||||
// import axios from '../utils/axios';
|
||||
// DashboardComponent
|
||||
// import BalanceCard from '../sections/dashboard/BalanceCard';
|
||||
// import NotificationCard from '../sections/dashboard/NotificationCard';
|
||||
// import DashboardTable from '../sections/dashboard/DashboardTable';
|
||||
// React
|
||||
import { useState } from 'react';
|
||||
// Table
|
||||
import List from './List';
|
||||
// theme
|
||||
import CardNotification from '../../sections/dashboard/CardNotification';
|
||||
import CardBalance from '../../sections/dashboard/CardBalance';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const RootBalanceStyle = styled(Card)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
padding: theme.spacing(3),
|
||||
color: 'black',
|
||||
backgroundColor: theme.palette.grey[200],
|
||||
maxHeight: '240px',
|
||||
}));
|
||||
|
||||
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
height: 10,
|
||||
borderRadius: 6,
|
||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
|
||||
},
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 6,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
}));
|
||||
|
||||
const RootNotificationStyle = styled(Card)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
padding: '1rem 0.5rem',
|
||||
color: 'black',
|
||||
backgroundColor: theme.palette.grey[200],
|
||||
maxHeight: '240px',
|
||||
}));
|
||||
|
||||
const ItemNotificationStyle = styled(Card)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
padding: theme.spacing(1),
|
||||
borderRadius: 0.5,
|
||||
color: 'black',
|
||||
maxHeight: '170px',
|
||||
}));
|
||||
|
||||
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' },
|
||||
@@ -76,17 +19,11 @@ const itemList = [
|
||||
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
|
||||
];
|
||||
|
||||
const INITIAL = '500.000.000';
|
||||
const TOTAL = 375000000;
|
||||
const PERCENT = 75;
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function Dashboard() {
|
||||
const { themeStretch } = useSettings();
|
||||
const [openPopup, setOpenPopup] = useState(false);
|
||||
|
||||
// const { logout } = useAuth();
|
||||
// const [corporate, setCorporate] = useState({});
|
||||
|
||||
// const loadSomething = () => {
|
||||
@@ -113,139 +50,18 @@ export default function Dashboard() {
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6} lg={6} md={12}>
|
||||
<RootNotificationStyle>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
component="span"
|
||||
sx={{ display: 'flex', alignItems: 'center' }}
|
||||
>
|
||||
<Iconify icon="eva:bell-fill" marginRight={0.75} />
|
||||
Notification
|
||||
<div
|
||||
style={{
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
backgroundColor: '#19BBBB',
|
||||
marginLeft: '0.5rem',
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
</Typography>
|
||||
<Button sx={{ typography: 'body2' }} endIcon={<ChevronRight />}>
|
||||
View All
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
<Stack sx={{ marginTop: 2 }}>
|
||||
<ItemNotificationStyle>
|
||||
{itemList.map(({ info, date, time }, key) => (
|
||||
<div key={key}>
|
||||
{key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Stack
|
||||
direction="column"
|
||||
justifyContent="flex-start"
|
||||
alignItems="flex-start"
|
||||
>
|
||||
<Typography sx={{ typography: 'caption' }}>{info}</Typography>
|
||||
<Link
|
||||
component="button"
|
||||
variant="caption"
|
||||
underline="always"
|
||||
onClick={() => {
|
||||
alert('Info Detail');
|
||||
}}
|
||||
>
|
||||
Info Detail
|
||||
</Link>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="column"
|
||||
justifyContent="flex-start"
|
||||
alignItems="flex-start"
|
||||
>
|
||||
<Typography sx={{ typography: 'caption', color: '#656565' }}>
|
||||
{date}
|
||||
</Typography>
|
||||
<Typography sx={{ typography: 'caption', color: '#656565' }}>
|
||||
{time}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
))}
|
||||
</ItemNotificationStyle>
|
||||
</Stack>
|
||||
</RootNotificationStyle>
|
||||
<CardNotification data={itemList} />
|
||||
</Grid>
|
||||
<Grid item xs={6} lg={6} md={12}>
|
||||
<RootBalanceStyle>
|
||||
<Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }}>
|
||||
<div>
|
||||
<Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
|
||||
Total Limit
|
||||
</Typography>
|
||||
<Typography sx={{ typography: 'body2' }}>{fCurrency(TOTAL)}</Typography>
|
||||
<Typography sx={{ typography: 'caption', color: '#919EAB' }}>
|
||||
/ {INITIAL}
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<Typography variant="h5" sx={{ ml: 0.5 }}>
|
||||
{PERCENT}%
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<BorderLinearProgress variant="determinate" value={PERCENT} sx={{ mb: 1 }} />
|
||||
|
||||
<Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
|
||||
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
|
||||
<Iconify
|
||||
icon="bxs:lock-alt"
|
||||
width={12}
|
||||
height={13}
|
||||
sx={{ color: '#424242', marginRight: '6px' }}
|
||||
/>
|
||||
<Typography variant="caption" component="span">
|
||||
Lock Fund ( 25% )
|
||||
</Typography>
|
||||
</Typography>
|
||||
<Typography sx={{ typography: 'caption', color: '#637381' }}>
|
||||
125.000.000 / 125.000.000
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<Iconify icon="bi:clipboard-check-fill" />}
|
||||
fullWidth={true}
|
||||
onClick={() => setOpenPopup(true)}
|
||||
>
|
||||
Submit Claim
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Iconify icon="heroicons-solid:cash" />}
|
||||
fullWidth={true}
|
||||
>
|
||||
Top Up
|
||||
</Button>
|
||||
</Stack>
|
||||
</RootBalanceStyle>
|
||||
<CardBalance />
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<List />
|
||||
{/* <List /> */}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
|
||||
{/* <Popup openPopup={openPopup} setOpenPopup={setOpenPopup} /> */}
|
||||
{/* <DialogDetailClaim /> */}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user