dialog component, dash & service-monitoring slice
This commit is contained in:
Muhammad Fajar
56
frontend/client-portal/src/components/MuiDialog.tsx
Normal file
56
frontend/client-portal/src/components/MuiDialog.tsx
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton } from '@mui/material';
|
||||||
|
import CloseIcon from '@mui/icons-material/Close';
|
||||||
|
import { ReactElement } from 'react';
|
||||||
|
import Iconify from './Iconify';
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
type MuiDialogProps = {
|
||||||
|
title?: {
|
||||||
|
name?: string;
|
||||||
|
icon?: string;
|
||||||
|
};
|
||||||
|
openDialog: boolean;
|
||||||
|
setOpenDialog: Function;
|
||||||
|
content?: ReactElement;
|
||||||
|
maxWidth?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
const MuiDialog = ({ title, openDialog, setOpenDialog, content, maxWidth }: MuiDialogProps) => {
|
||||||
|
const handleClose = () => {
|
||||||
|
setOpenDialog(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
let maxWidthDialog = 'md';
|
||||||
|
|
||||||
|
if (maxWidth) {
|
||||||
|
maxWidthDialog = maxWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth={maxWidthDialog}>
|
||||||
|
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||||
|
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||||
|
{title?.icon ? (
|
||||||
|
<Stack direction="row">
|
||||||
|
<Iconify icon={title?.icon} width={25} height={25} sx={{ marginRight: '10px' }} />
|
||||||
|
<Typography variant="h6">{title?.name}</Typography>
|
||||||
|
</Stack>
|
||||||
|
) : (
|
||||||
|
<Typography variant="h6">{title?.name ? title?.name : 'Testing Title'}</Typography>
|
||||||
|
)}
|
||||||
|
<IconButton sx={{ color: '#FFF' }} onClick={handleClose}>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Stack>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
|
||||||
|
{content ? content : 'Testing Content Dialog'}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MuiDialog;
|
||||||
@@ -10,12 +10,18 @@ import { isExternalLink } from '..';
|
|||||||
|
|
||||||
// ----------------------------------------------------------------------
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
export function NavItemRoot({ item, isCollapse, open = false, active, onOpen }: NavItemProps) {
|
export function NavItemRoot({
|
||||||
const { title, path, icon, info, children } = item;
|
item,
|
||||||
|
isCollapse,
|
||||||
|
open = false,
|
||||||
|
active = false,
|
||||||
|
onOpen,
|
||||||
|
}: NavItemProps) {
|
||||||
|
const { title, path, info, children } = item;
|
||||||
|
|
||||||
const renderContent = (
|
const renderContent = (
|
||||||
<>
|
<>
|
||||||
{icon && <ListItemIconStyle>{icon}</ListItemIconStyle>}
|
<DotIcon active={active} />
|
||||||
<ListItemTextStyle disableTypography primary={title} isCollapse={isCollapse} />
|
<ListItemTextStyle disableTypography primary={title} isCollapse={isCollapse} />
|
||||||
{!isCollapse && (
|
{!isCollapse && (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -1,50 +1,13 @@
|
|||||||
// components
|
|
||||||
import SvgIconStyle from '../../../components/SvgIconStyle';
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
const getIcon = (name: string) => (
|
|
||||||
<SvgIconStyle src={`/icons/${name}.svg`} sx={{ width: 1, height: 1 }} />
|
|
||||||
);
|
|
||||||
|
|
||||||
const ICONS = {
|
|
||||||
user: getIcon('ic_user'),
|
|
||||||
ecommerce: getIcon('ic_ecommerce'),
|
|
||||||
analytics: getIcon('ic_analytics'),
|
|
||||||
dashboard: getIcon('ic_dashboard'),
|
|
||||||
};
|
|
||||||
|
|
||||||
const navConfig = [
|
const navConfig = [
|
||||||
// GENERAL
|
// GENERAL
|
||||||
// ----------------------------------------------------------------------
|
// ----------------------------------------------------------------------
|
||||||
{
|
{
|
||||||
items: [{ title: 'Dashboard', path: '/dashboard', icon: ICONS.dashboard }],
|
items: [{ title: 'Dashboard', path: '/dashboard' }],
|
||||||
},
|
},
|
||||||
|
|
||||||
// Membership
|
// Alarm Center
|
||||||
// ----------------------------------------------------------------------
|
|
||||||
{
|
|
||||||
subheader: 'Membership',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: 'Member List',
|
|
||||||
path: '/members',
|
|
||||||
icon: ICONS.user,
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// title: 'Member Movement',
|
|
||||||
// // path: '/',
|
|
||||||
// icon: ICONS.user,
|
|
||||||
// children: [
|
|
||||||
// { title: '', path: '/medicines' },
|
|
||||||
// { title: 'Obat', path: '/medicines' },
|
|
||||||
// { title: 'Obat', path: '/medicines' },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
// Membership
|
|
||||||
// ----------------------------------------------------------------------
|
// ----------------------------------------------------------------------
|
||||||
{
|
{
|
||||||
subheader: 'Case Management',
|
subheader: 'Case Management',
|
||||||
@@ -52,18 +15,11 @@ const navConfig = [
|
|||||||
{
|
{
|
||||||
title: 'Alarm Center',
|
title: 'Alarm Center',
|
||||||
path: '/alarm-center',
|
path: '/alarm-center',
|
||||||
icon: ICONS.ecommerce,
|
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// title: 'Member Movement',
|
title: 'Claim Report',
|
||||||
// // path: '/',
|
path: '/claim-report',
|
||||||
// icon: ICONS.user,
|
},
|
||||||
// children: [
|
|
||||||
// { title: '', path: '/medicines' },
|
|
||||||
// { title: 'Obat', path: '/medicines' },
|
|
||||||
// { title: 'Obat', path: '/medicines' },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
291
frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
Executable file
291
frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
Executable file
@@ -0,0 +1,291 @@
|
|||||||
|
// mui
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Box,
|
||||||
|
Tabs,
|
||||||
|
Tab,
|
||||||
|
IconButton,
|
||||||
|
Container,
|
||||||
|
Grid,
|
||||||
|
Card,
|
||||||
|
Stack,
|
||||||
|
Typography,
|
||||||
|
} from '@mui/material';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import { Favorite } from '@mui/icons-material';
|
||||||
|
// components
|
||||||
|
import Page from '../../components/Page';
|
||||||
|
import Iconify from '../../components/Iconify';
|
||||||
|
// utils
|
||||||
|
import useSettings from '../../hooks/useSettings';
|
||||||
|
import { useRef, useState, SyntheticEvent } from 'react';
|
||||||
|
// sections
|
||||||
|
// import ListTable from '../../sections/claimreports/ListTable';
|
||||||
|
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
|
||||||
|
|
||||||
|
interface TabPanelProps {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
index: number;
|
||||||
|
value: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabPanel(props: TabPanelProps) {
|
||||||
|
const { children, value, index, ...other } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="tabpanel"
|
||||||
|
hidden={value !== index}
|
||||||
|
id={`simple-tabpanel-${index}`}
|
||||||
|
aria-labelledby={`simple-tab-${index}`}
|
||||||
|
style={{ backgroundColor: '#F9FAFB' }}
|
||||||
|
{...other}
|
||||||
|
>
|
||||||
|
{value === index && (
|
||||||
|
<Box sx={{ p: 3 }}>
|
||||||
|
<Typography>{children}</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function a11yProps(index: number) {
|
||||||
|
return {
|
||||||
|
id: `simple-tab-${index}`,
|
||||||
|
'aria-controls': `simple-tabpanel-${index}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface StyledTabsProps {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
value: number;
|
||||||
|
onChange: (event: React.SyntheticEvent, newValue: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
|
||||||
|
'& .MuiTabs-indicator': {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
'& .MuiTabs-indicatorSpan': {
|
||||||
|
maxWidth: 40,
|
||||||
|
width: '100%',
|
||||||
|
backgroundColor: '#635ee7',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
interface StyledTabProps {
|
||||||
|
label: string;
|
||||||
|
icon?: string | React.ReactElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
|
||||||
|
({ theme }) => ({
|
||||||
|
textTransform: 'none',
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: theme.typography.pxToRem(20),
|
||||||
|
color: theme.palette.primary.main,
|
||||||
|
maxWidth: '100%',
|
||||||
|
flex: 1,
|
||||||
|
margin: '0 !important',
|
||||||
|
'&.Mui-selected': {
|
||||||
|
color: '#FFF',
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
},
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: theme.palette.primary.dark,
|
||||||
|
color: '#FFF',
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
export default function Drugs() {
|
||||||
|
const { themeStretch } = useSettings();
|
||||||
|
|
||||||
|
const [value, setValue] = useState(0);
|
||||||
|
const handleChange = (event: SyntheticEvent, newValue: number) => {
|
||||||
|
setValue(newValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page title="Service Monitoring 123456">
|
||||||
|
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||||
|
<Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
|
||||||
|
<IconButton sx={{ marginRight: '10px', color: '#424242' }}>
|
||||||
|
<Iconify icon="heroicons-outline:arrow-narrow-left" />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="h5">Service Monitoring</Typography>
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
alignItems="center"
|
||||||
|
sx={{
|
||||||
|
backgroundColor: '#DFE3E8',
|
||||||
|
color: '#212B36',
|
||||||
|
paddingX: 2,
|
||||||
|
paddingY: 1,
|
||||||
|
marginLeft: 3,
|
||||||
|
borderRadius: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Iconify icon="akar-icons:check" sx={{ marginRight: 1 }} />
|
||||||
|
<Typography variant="caption">Done</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
<Grid container spacing={3} sx={{ marginBottom: 5 }}>
|
||||||
|
{/* Item 1 */}
|
||||||
|
<Grid item xs={4} lg={4} md={6}>
|
||||||
|
<Card sx={{ borderRadius: '6px' }}>
|
||||||
|
<Stack>
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
alignItems="center"
|
||||||
|
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
|
||||||
|
>
|
||||||
|
<Iconify icon="bxs:user" width={22} height={18} sx={{ marginRight: '10px' }} />
|
||||||
|
<Typography>Employee Profiles</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
|
||||||
|
<Stack spacing={2}>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Nama perusahaan</Typography>
|
||||||
|
<Typography variant="body2">PT. Amman Mineral</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Nama Lengkap</Typography>
|
||||||
|
<Typography variant="body2">Stephen kuow</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Tanggal lahir</Typography>
|
||||||
|
<Typography variant="body2">09 Aug 1980</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Email</Typography>
|
||||||
|
<Typography variant="body2">Stephen.uow@gmal.com</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">No telepon</Typography>
|
||||||
|
<Typography variant="body2">+62 821-8123-2323</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">ID Karyawan</Typography>
|
||||||
|
<Typography variant="body2">12345678</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
{/* Item 2 */}
|
||||||
|
<Grid item xs={4} lg={4} md={6}>
|
||||||
|
<Card sx={{ borderRadius: '6px', height: '100%' }}>
|
||||||
|
<Stack>
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
alignItems="center"
|
||||||
|
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
|
||||||
|
>
|
||||||
|
<Iconify
|
||||||
|
icon="heroicons-solid:clipboard-list"
|
||||||
|
width={22}
|
||||||
|
height={18}
|
||||||
|
sx={{ marginRight: '10px' }}
|
||||||
|
/>
|
||||||
|
<Typography>Diagnose Summary</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack spacing={2} sx={{ paddingY: 1, paddingX: 2 }}>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Gejala</Typography>
|
||||||
|
<Typography variant="body2">Nyeri dada</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Tanda</Typography>
|
||||||
|
<Typography variant="body2">Sesak Napas</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Main Diagnose</Typography>
|
||||||
|
<Typography variant="body2">
|
||||||
|
J46 Status asthmaticus, Acute severe asthma
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Diagnosis pembanding</Typography>
|
||||||
|
<Typography variant="body2">K21 Gastro-oesophageal reflux disease</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
{/* Item 3 */}
|
||||||
|
<Grid item xs={4} lg={4} md={6}>
|
||||||
|
<Card sx={{ borderRadius: '6px', height: '100%' }}>
|
||||||
|
<Stack>
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
alignItems="center"
|
||||||
|
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
|
||||||
|
>
|
||||||
|
<Iconify
|
||||||
|
icon="iconoir:healthcare"
|
||||||
|
width={22}
|
||||||
|
height={18}
|
||||||
|
sx={{ marginRight: '10px' }}
|
||||||
|
/>
|
||||||
|
<Typography>Services</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
|
||||||
|
<Stack spacing={2}>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Evakuasi medis</Typography>
|
||||||
|
<Typography variant="body2">Land Transportation</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Rumah sakit</Typography>
|
||||||
|
<Typography variant="body2">Primaya Hospital</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack direction="row" spacing={16}>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Tanggal mulai</Typography>
|
||||||
|
<Typography variant="body2">17 Aug 2022</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Selesai</Typography>
|
||||||
|
<Typography variant="body2">18 Aug 2022</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Daftar layanan</Typography>
|
||||||
|
<Typography variant="body2">
|
||||||
|
Inpatient, Medivac (Medical Evacuation)
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm>
|
||||||
|
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||||
|
<StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
|
||||||
|
<StyledTab icon={<Favorite />} label="Daily Monitoring" {...a11yProps(0)} />
|
||||||
|
<StyledTab
|
||||||
|
icon={<Iconify icon="heroicons-solid:beaker" />}
|
||||||
|
label="Item Two"
|
||||||
|
{...a11yProps(1)}
|
||||||
|
/>
|
||||||
|
</StyledTabs>
|
||||||
|
</Box>
|
||||||
|
<TabPanel value={value} index={0}>
|
||||||
|
Item One
|
||||||
|
</TabPanel>
|
||||||
|
<TabPanel value={value} index={1}>
|
||||||
|
Item Two
|
||||||
|
</TabPanel>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
</Page>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,74 +1,17 @@
|
|||||||
// @mui
|
// @mui
|
||||||
import { styled } from '@mui/material/styles';
|
import { Typography, Container, Grid } from '@mui/material';
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
Typography,
|
|
||||||
Link,
|
|
||||||
Divider,
|
|
||||||
Stack,
|
|
||||||
LinearProgress,
|
|
||||||
linearProgressClasses,
|
|
||||||
Container,
|
|
||||||
Grid,
|
|
||||||
} from '@mui/material';
|
|
||||||
import { ChevronRight } from '@mui/icons-material';
|
|
||||||
// hooks
|
// hooks
|
||||||
import useSettings from '../../hooks/useSettings';
|
import useSettings from '../../hooks/useSettings';
|
||||||
// utils
|
|
||||||
import { fCurrency } from '../../utils/formatNumber';
|
|
||||||
// components
|
// components
|
||||||
import Page from '../../components/Page';
|
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
|
// Table
|
||||||
import List from './List';
|
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 = [
|
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: '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: '09:00 WIB' },
|
||||||
@@ -76,17 +19,11 @@ const itemList = [
|
|||||||
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
|
{ 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() {
|
export default function Dashboard() {
|
||||||
const { themeStretch } = useSettings();
|
const { themeStretch } = useSettings();
|
||||||
const [openPopup, setOpenPopup] = useState(false);
|
|
||||||
|
|
||||||
// const { logout } = useAuth();
|
|
||||||
// const [corporate, setCorporate] = useState({});
|
// const [corporate, setCorporate] = useState({});
|
||||||
|
|
||||||
// const loadSomething = () => {
|
// const loadSomething = () => {
|
||||||
@@ -113,139 +50,18 @@ export default function Dashboard() {
|
|||||||
|
|
||||||
<Grid container spacing={2}>
|
<Grid container spacing={2}>
|
||||||
<Grid item xs={6} lg={6} md={12}>
|
<Grid item xs={6} lg={6} md={12}>
|
||||||
<RootNotificationStyle>
|
<CardNotification data={itemList} />
|
||||||
<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>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={6} lg={6} md={12}>
|
<Grid item xs={6} lg={6} md={12}>
|
||||||
<RootBalanceStyle>
|
<CardBalance />
|
||||||
<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>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} lg={12} md={12}>
|
<Grid item xs={12} lg={12} md={12}>
|
||||||
<List />
|
{/* <List /> */}
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Container>
|
</Container>
|
||||||
|
|
||||||
{/* <Popup openPopup={openPopup} setOpenPopup={setOpenPopup} /> */}
|
{/* <DialogDetailClaim /> */}
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -52,10 +52,6 @@ export default function Router() {
|
|||||||
// { path: 'reset-password', element: <ResetPassword /> },
|
// { path: 'reset-password', element: <ResetPassword /> },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// path: '/',
|
|
||||||
// element: <Navigate to="/dashboard/one" replace />,
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
element: (
|
element: (
|
||||||
@@ -73,26 +69,6 @@ export default function Router() {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/members',
|
|
||||||
element: (
|
|
||||||
<AuthProvider>
|
|
||||||
<AuthGuard>
|
|
||||||
<DashboardLayout />
|
|
||||||
</AuthGuard>
|
|
||||||
</AuthProvider>
|
|
||||||
),
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
element: <Members />,
|
|
||||||
index: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'create',
|
|
||||||
element: <MembersCreate />,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/alarm-center',
|
path: '/alarm-center',
|
||||||
element: (
|
element: (
|
||||||
@@ -107,29 +83,12 @@ export default function Router() {
|
|||||||
element: <AlarmCenter />,
|
element: <AlarmCenter />,
|
||||||
index: true,
|
index: true,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'service-monitoring/:id',
|
||||||
|
element: <AlarmCenterServiceMonitoring />,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// path: '/dashboard',
|
|
||||||
// element: <DashboardLayout />,
|
|
||||||
// children: [
|
|
||||||
// { element: <Navigate to="/dashboard/one" replace />, index: true },
|
|
||||||
// { path: 'one', element:
|
|
||||||
// <AuthProvider><PageOne /></AuthProvider> },
|
|
||||||
// { path: 'two', element:
|
|
||||||
// <AuthProvider><PageTwo /></AuthProvider> },
|
|
||||||
// { path: 'three', element:
|
|
||||||
// <AuthProvider><PageThree /></AuthProvider> },
|
|
||||||
// {
|
|
||||||
// path: 'user',
|
|
||||||
// children: [
|
|
||||||
// { element: <Navigate to="/dashboard/user/four" replace />, index: true },
|
|
||||||
// { path: 'four', element: <AuthProvider><PageFour /></AuthProvider> },
|
|
||||||
// { path: 'six', element: <AuthProvider><PageSix /> </AuthProvider> },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
path: '*',
|
path: '*',
|
||||||
element: <LogoOnlyLayout />,
|
element: <LogoOnlyLayout />,
|
||||||
@@ -150,9 +109,8 @@ const VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode')));
|
|||||||
const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard')));
|
const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard')));
|
||||||
const NotFound = Loadable(lazy(() => import('../pages/Page404')));
|
const NotFound = Loadable(lazy(() => import('../pages/Page404')));
|
||||||
|
|
||||||
// Members
|
|
||||||
const Members = Loadable(lazy(() => import('../pages/Members/Index')));
|
|
||||||
const MembersCreate = Loadable(lazy(() => import('../pages/Members/Create')));
|
|
||||||
|
|
||||||
// Alarm Center
|
// Alarm Center
|
||||||
const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
|
const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
|
||||||
|
const AlarmCenterServiceMonitoring = Loadable(
|
||||||
|
lazy(() => import('../pages/AlarmCenter/ServiceMonitoring'))
|
||||||
|
);
|
||||||
|
|||||||
161
frontend/client-portal/src/sections/dashboard/CardBalance.tsx
Normal file
161
frontend/client-portal/src/sections/dashboard/CardBalance.tsx
Normal file
@@ -0,0 +1,161 @@
|
|||||||
|
// @mui
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Typography,
|
||||||
|
LinearProgress,
|
||||||
|
linearProgressClasses,
|
||||||
|
Stack,
|
||||||
|
} from '@mui/material';
|
||||||
|
// components
|
||||||
|
import Iconify from '../../components/Iconify';
|
||||||
|
// React
|
||||||
|
import { useState } from 'react';
|
||||||
|
// utils
|
||||||
|
import { fCurrency } from '../../utils/formatNumber';
|
||||||
|
// <sections></sections>
|
||||||
|
import DialogTopUpLimit from './DialogTopUpLimit';
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
type DataContent = {
|
||||||
|
info: string;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type NotificationProps = {
|
||||||
|
data?: DataContent[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
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 INITIAL = '500.000.000';
|
||||||
|
const TOTAL = 375000000;
|
||||||
|
const PERCENT = 75;
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
export default function CardBalance({ data }: NotificationProps) {
|
||||||
|
const [openDialog, setOpenDialog] = useState(false);
|
||||||
|
const [dialogTitle, setDialogTitle] = useState('');
|
||||||
|
const [isDialog, setIsDialog] = useState('');
|
||||||
|
|
||||||
|
const clickHandler = (isDialog: string) => {
|
||||||
|
switch (isDialog) {
|
||||||
|
case 'submitClaim':
|
||||||
|
setDialogTitle('Notification');
|
||||||
|
setIsDialog(isDialog);
|
||||||
|
setOpenDialog(true);
|
||||||
|
break;
|
||||||
|
case 'topUpLimit':
|
||||||
|
setDialogTitle('Top Up Limit');
|
||||||
|
setIsDialog(isDialog);
|
||||||
|
setOpenDialog(true);
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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={() => clickHandler('submitClaim')}
|
||||||
|
>
|
||||||
|
Submit Claim
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<Iconify icon="heroicons-solid:cash" />}
|
||||||
|
fullWidth={true}
|
||||||
|
onClick={() => clickHandler('topUpLimit')}
|
||||||
|
>
|
||||||
|
Top Up
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
|
||||||
|
{/* {isDialog === 'submitClaim' && (
|
||||||
|
<DialogNotification
|
||||||
|
openDialog={openDialog}
|
||||||
|
setOpenDialog={setOpenDialog}
|
||||||
|
title={dialogTitle}
|
||||||
|
data={data}
|
||||||
|
/>
|
||||||
|
)} */}
|
||||||
|
|
||||||
|
{isDialog === 'topUpLimit' && (
|
||||||
|
<DialogTopUpLimit
|
||||||
|
openDialog={openDialog}
|
||||||
|
setOpenDialog={setOpenDialog}
|
||||||
|
title={{ name: dialogTitle, icon: 'heroicons-solid:cash' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</RootBalanceStyle>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,143 @@
|
|||||||
|
// @mui
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import { Button, Card, Typography, Link, Divider, Stack } from '@mui/material';
|
||||||
|
import { ChevronRight } from '@mui/icons-material';
|
||||||
|
// components
|
||||||
|
import Iconify from '../../components/Iconify';
|
||||||
|
// Section
|
||||||
|
import DialogNotification from './DialogNotification';
|
||||||
|
import DialogDetailClaim from './DialogDetailClaim';
|
||||||
|
// React
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
type DataContent = {
|
||||||
|
info: string;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type NotificationProps = {
|
||||||
|
data?: DataContent[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
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',
|
||||||
|
}));
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
export default function CardNotification({ data }: NotificationProps) {
|
||||||
|
const [openDialog, setOpenDialog] = useState(false);
|
||||||
|
const [dialogTitle, setDialogTitle] = useState('');
|
||||||
|
const [isDialog, setIsDialog] = useState('');
|
||||||
|
|
||||||
|
const clickHandler = (isDialog: string) => {
|
||||||
|
switch (isDialog) {
|
||||||
|
case 'allNotification':
|
||||||
|
setDialogTitle('Notification');
|
||||||
|
setIsDialog(isDialog);
|
||||||
|
setOpenDialog(true);
|
||||||
|
break;
|
||||||
|
case 'infoDetail':
|
||||||
|
setDialogTitle('Claim Details');
|
||||||
|
setIsDialog(isDialog);
|
||||||
|
setOpenDialog(true);
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
width: '12px',
|
||||||
|
height: '12px',
|
||||||
|
backgroundColor: '#19BBBB',
|
||||||
|
marginLeft: '0.5rem',
|
||||||
|
borderRadius: '50%',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Typography>
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
sx={{ typography: 'body2' }}
|
||||||
|
endIcon={<ChevronRight />}
|
||||||
|
onClick={() => clickHandler('allNotification')}
|
||||||
|
>
|
||||||
|
View All
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<ItemNotificationStyle sx={{ marginTop: 2, overflowY: 'auto', maxHeight: '154px' }}>
|
||||||
|
{data
|
||||||
|
? data.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={() => clickHandler('infoDetail')}
|
||||||
|
>
|
||||||
|
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>
|
||||||
|
|
||||||
|
{isDialog === 'allNotification' && (
|
||||||
|
<DialogNotification
|
||||||
|
openDialog={openDialog}
|
||||||
|
setOpenDialog={setOpenDialog}
|
||||||
|
title={{ name: dialogTitle }}
|
||||||
|
data={data}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isDialog === 'infoDetail' && (
|
||||||
|
<DialogDetailClaim
|
||||||
|
openDialog={openDialog}
|
||||||
|
setOpenDialog={setOpenDialog}
|
||||||
|
title={{ name: dialogTitle }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</RootNotificationStyle>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,175 @@
|
|||||||
|
// @mui
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Box,
|
||||||
|
Stepper,
|
||||||
|
Step,
|
||||||
|
StepLabel,
|
||||||
|
Card,
|
||||||
|
Typography,
|
||||||
|
Divider,
|
||||||
|
Stack,
|
||||||
|
} from '@mui/material';
|
||||||
|
import { Add } from '@mui/icons-material';
|
||||||
|
// components
|
||||||
|
import MuiDialog from '../../components/MuiDialog';
|
||||||
|
// theme
|
||||||
|
import palette from '../../theme/palette';
|
||||||
|
// React
|
||||||
|
import { ReactElement } from 'react';
|
||||||
|
|
||||||
|
type DataContent = {
|
||||||
|
info: string;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type MuiDialogProps = {
|
||||||
|
title?: {
|
||||||
|
name?: string;
|
||||||
|
icon?: string;
|
||||||
|
};
|
||||||
|
openDialog: boolean;
|
||||||
|
setOpenDialog: Function;
|
||||||
|
content?: ReactElement;
|
||||||
|
data?: DataContent[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const steps = ['Review', 'Approval', 'Disbursement'];
|
||||||
|
|
||||||
|
const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
|
||||||
|
const getContent = () => (
|
||||||
|
<>
|
||||||
|
<Stack
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="space-between"
|
||||||
|
direction="row"
|
||||||
|
sx={{ marginTop: 1 }}
|
||||||
|
>
|
||||||
|
<Typography variant="subtitle1" sx={{ height: 'max-content' }}>
|
||||||
|
Claim Request
|
||||||
|
</Typography>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption">Submission date</Typography>
|
||||||
|
<Typography variant="caption">15 / 05 / 2022</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
<Box sx={{ width: '100%', marginTop: 2 }}>
|
||||||
|
<Stepper alternativeLabel>
|
||||||
|
{steps.map((label) => (
|
||||||
|
<Step key={label}>
|
||||||
|
<StepLabel>{label}</StepLabel>
|
||||||
|
</Step>
|
||||||
|
))}
|
||||||
|
</Stepper>
|
||||||
|
</Box>
|
||||||
|
<Stack marginTop={2}>
|
||||||
|
<Typography variant="subtitle1" paddingY={2}>
|
||||||
|
17 Mei 2022
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack direction="row" spacing={2}>
|
||||||
|
<Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
|
||||||
|
<Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
|
||||||
|
{/* Item 1 */}
|
||||||
|
<Card sx={{ paddingY: 2, paddingX: 3 }}>
|
||||||
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||||
|
<Typography variant="body1">09:10 WIB</Typography>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
backgroundColor: palette.light.warning.lighter,
|
||||||
|
color: palette.light.warning.dark,
|
||||||
|
borderColor: palette.light.warning.dark,
|
||||||
|
border: '1px solid',
|
||||||
|
borderRadius: '6px',
|
||||||
|
padding: 1,
|
||||||
|
}}
|
||||||
|
variant="caption"
|
||||||
|
>
|
||||||
|
Approval
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Divider sx={{ marginY: 2 }} />
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="subtitle2" color="#404040">
|
||||||
|
Details : mohon melengkapi kekurangan dokumen
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="caption" color="#757575" sx={{ marginTop: 2, marginBottom: 1 }}>
|
||||||
|
Lab pemeriksaan darah
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<Add />}
|
||||||
|
fullWidth
|
||||||
|
sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
|
||||||
|
>
|
||||||
|
Hasil Pemeriksaan Laboratorium
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
{/* Item 2 */}
|
||||||
|
<Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
|
||||||
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||||
|
<Typography variant="body1">09:00 WIB</Typography>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
backgroundColor: palette.light.warning.lighter,
|
||||||
|
color: palette.light.warning.dark,
|
||||||
|
borderColor: palette.light.warning.dark,
|
||||||
|
border: '1px solid',
|
||||||
|
borderRadius: '6px',
|
||||||
|
padding: 1,
|
||||||
|
}}
|
||||||
|
variant="caption"
|
||||||
|
>
|
||||||
|
Approval
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Divider sx={{ marginY: 2 }} />
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="subtitle2" color="#404040">
|
||||||
|
Details : Penilaian Dokter
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
{/* Item 3 */}
|
||||||
|
<Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
|
||||||
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||||
|
<Typography variant="body1">08:00 WIB</Typography>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
backgroundColor: '#F5F5F5',
|
||||||
|
color: '#757575',
|
||||||
|
borderColor: '#757575',
|
||||||
|
border: '1px solid',
|
||||||
|
borderRadius: '6px',
|
||||||
|
padding: 1,
|
||||||
|
}}
|
||||||
|
variant="caption"
|
||||||
|
>
|
||||||
|
Review
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Divider sx={{ marginY: 2 }} />
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="subtitle2" color="#404040">
|
||||||
|
Details : Klaim Diajukan
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MuiDialog
|
||||||
|
title={title}
|
||||||
|
openDialog={openDialog}
|
||||||
|
setOpenDialog={setOpenDialog}
|
||||||
|
content={getContent()}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DialogDetailClaim;
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
// react
|
||||||
|
import { ReactElement, useState } from 'react';
|
||||||
|
// mui
|
||||||
|
import { Card, Divider, Link, Stack, Typography } from '@mui/material';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
// Component
|
||||||
|
import MuiDialog from '../../components/MuiDialog';
|
||||||
|
// Sections
|
||||||
|
import DialogDetailClaim from './DialogDetailClaim';
|
||||||
|
|
||||||
|
type DataContent = {
|
||||||
|
info: string;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type MuiDialogProps = {
|
||||||
|
title?: {
|
||||||
|
name?: string;
|
||||||
|
icon?: string;
|
||||||
|
};
|
||||||
|
openDialog: boolean;
|
||||||
|
setOpenDialog: Function;
|
||||||
|
content?: ReactElement;
|
||||||
|
data?: DataContent[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const ItemNotificationStyle = styled(Card)(({ theme }) => ({
|
||||||
|
boxShadow: 'none',
|
||||||
|
padding: theme.spacing(1),
|
||||||
|
borderRadius: 0.5,
|
||||||
|
color: 'black',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const DialogNotification = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
|
||||||
|
const [openDialogClaim, setOpenDialogClaim] = useState(false);
|
||||||
|
const [dialogTitleClaim, setDialogTitleClaim] = useState('');
|
||||||
|
|
||||||
|
const clickHandler = () => {
|
||||||
|
setDialogTitleClaim('Claim Details');
|
||||||
|
setOpenDialogClaim(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getContent = () => (
|
||||||
|
<Stack sx={{ marginTop: 2 }}>
|
||||||
|
<ItemNotificationStyle>
|
||||||
|
{data
|
||||||
|
? data.map(({ info, date, time }: DataContent, 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={clickHandler}
|
||||||
|
>
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<MuiDialog
|
||||||
|
title={title}
|
||||||
|
openDialog={openDialog}
|
||||||
|
setOpenDialog={setOpenDialog}
|
||||||
|
content={getContent()}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DialogDetailClaim
|
||||||
|
openDialog={openDialogClaim}
|
||||||
|
setOpenDialog={setOpenDialogClaim}
|
||||||
|
title={{ name: dialogTitleClaim }}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DialogNotification;
|
||||||
@@ -0,0 +1,209 @@
|
|||||||
|
// @mui
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import {
|
||||||
|
Typography,
|
||||||
|
LinearProgress,
|
||||||
|
linearProgressClasses,
|
||||||
|
Stack,
|
||||||
|
FormControlLabel,
|
||||||
|
} from '@mui/material';
|
||||||
|
import { LoadingButton } from '@mui/lab';
|
||||||
|
import Checkbox from '@mui/material/Checkbox';
|
||||||
|
// components
|
||||||
|
import MuiDialog from '../../components/MuiDialog';
|
||||||
|
import { FormProvider, RHFTextField } from '../../components/hook-form';
|
||||||
|
// React
|
||||||
|
import { ReactElement, useEffect, useState } from 'react';
|
||||||
|
import { fCurrency } from '../../utils/formatNumber';
|
||||||
|
// yup
|
||||||
|
import * as Yup from 'yup';
|
||||||
|
// form
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { yupResolver } from '@hookform/resolvers/yup';
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
type DataContent = {
|
||||||
|
info: string;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type MuiDialogProps = {
|
||||||
|
title?: {
|
||||||
|
name?: string;
|
||||||
|
icon?: string;
|
||||||
|
};
|
||||||
|
openDialog: boolean;
|
||||||
|
setOpenDialog: Function;
|
||||||
|
content?: ReactElement;
|
||||||
|
data?: DataContent[];
|
||||||
|
};
|
||||||
|
|
||||||
|
type FormValuesProps = {
|
||||||
|
topup: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
const testData = {
|
||||||
|
companyName: 'PT. Aman Mineral',
|
||||||
|
policyNumber: 12345678,
|
||||||
|
totalMembers: 50,
|
||||||
|
totalCases: 100,
|
||||||
|
totalPersen: 75,
|
||||||
|
myLimit: '375.000.000',
|
||||||
|
totalLimit: 500000000,
|
||||||
|
};
|
||||||
|
|
||||||
|
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,
|
||||||
|
background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
|
||||||
|
const [isDisabledCheckbox, setIsDisabledCheckbox] = useState(false);
|
||||||
|
const [isDisabledButton, setIsDisabledButton] = useState(true);
|
||||||
|
|
||||||
|
const TopUpSchema = Yup.object().shape({
|
||||||
|
topup: Yup.string()
|
||||||
|
/*
|
||||||
|
// @ts-ignore */
|
||||||
|
.test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
|
||||||
|
});
|
||||||
|
|
||||||
|
const defaultValues = {
|
||||||
|
topup: '0',
|
||||||
|
};
|
||||||
|
|
||||||
|
const methods = useForm<FormValuesProps>({
|
||||||
|
resolver: yupResolver(TopUpSchema),
|
||||||
|
defaultValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const {
|
||||||
|
setValue,
|
||||||
|
reset,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { isSubmitting },
|
||||||
|
} = methods;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (openDialog === false) {
|
||||||
|
reset();
|
||||||
|
}
|
||||||
|
}, [openDialog, reset]);
|
||||||
|
|
||||||
|
const onSubmit = async (data: FormValuesProps) => {
|
||||||
|
reset();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onCheckHandler = (data: FormValuesProps) => {
|
||||||
|
setIsDisabledCheckbox(!isDisabledCheckbox);
|
||||||
|
setValue('topup', '5000000');
|
||||||
|
};
|
||||||
|
|
||||||
|
const onTopupHandler = (value: string) => {
|
||||||
|
value === '0' || value === '' ? setIsDisabledButton(true) : setIsDisabledButton(false);
|
||||||
|
setValue('topup', value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getContent = () => (
|
||||||
|
<Stack spacing={1} marginTop={2}>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption" color="#637381">
|
||||||
|
Company Name
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2">{testData.companyName}</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption" color="#637381">
|
||||||
|
Policy Number
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2">{testData.policyNumber}</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack direction="row" spacing={22}>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption" color="#637381">
|
||||||
|
Total Member
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2">{testData.totalMembers} Person</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="caption" color="#637381">
|
||||||
|
Total Cases
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2">{testData.totalCases} Cases</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
<Stack spacing={1} sx={{ backgroundColor: '#F4F6F8', borderRadius: 1.5, padding: 2 }}>
|
||||||
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="body2">Company Pooled Fund</Typography>
|
||||||
|
<Typography variant="body2">{fCurrency(testData.myLimit)}</Typography>
|
||||||
|
<Typography variant="caption" color="#919EAB">
|
||||||
|
/ {testData.totalLimit}
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack>
|
||||||
|
<Typography variant="h5">{testData.totalPersen}%</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
<BorderLinearProgress variant="determinate" value={testData.totalPersen} />
|
||||||
|
</Stack>
|
||||||
|
<Stack spacing={2}>
|
||||||
|
<Typography variant="subtitle1" marginTop={3}>
|
||||||
|
Top Up Limit
|
||||||
|
</Typography>
|
||||||
|
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<RHFTextField
|
||||||
|
name="topup"
|
||||||
|
label="Top Up"
|
||||||
|
type="number"
|
||||||
|
disabled={isDisabledCheckbox}
|
||||||
|
onChange={(e) => onTopupHandler(e.target.value)}
|
||||||
|
/>
|
||||||
|
<FormControlLabel
|
||||||
|
sx={{ typography: 'caption' }}
|
||||||
|
control={<Checkbox />}
|
||||||
|
label={'Max ' + fCurrency(5000000)}
|
||||||
|
onChange={handleSubmit(onCheckHandler)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<LoadingButton
|
||||||
|
fullWidth
|
||||||
|
size="large"
|
||||||
|
type="submit"
|
||||||
|
variant="contained"
|
||||||
|
loading={isSubmitting}
|
||||||
|
sx={{ marginTop: 2 }}
|
||||||
|
disabled={isDisabledButton}
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</LoadingButton>
|
||||||
|
</FormProvider>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MuiDialog
|
||||||
|
title={title}
|
||||||
|
openDialog={openDialog}
|
||||||
|
setOpenDialog={setOpenDialog}
|
||||||
|
content={getContent()}
|
||||||
|
maxWidth="xs"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DialogTopUpLimit;
|
||||||
Reference in New Issue
Block a user