149 lines
4.3 KiB
TypeScript
149 lines
4.3 KiB
TypeScript
// @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: '1.5rem',
|
|
color: 'black',
|
|
backgroundColor: theme.palette.grey[200],
|
|
height: '100%',
|
|
maxHeight: '240px',
|
|
}));
|
|
|
|
const ItemNotificationStyle = styled(Card)(({ theme }) => ({
|
|
boxShadow: 'none',
|
|
padding: theme.spacing(1),
|
|
borderRadius: 0.5,
|
|
color: 'black',
|
|
marginTop: 2,
|
|
overflowY: 'auto',
|
|
maxHeight: '154px',
|
|
gap: '0.5rem',
|
|
}));
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
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>
|
|
{data
|
|
? data.map(({ info, date, time }, index) => (
|
|
<div key={index}>
|
|
{index >= 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>
|
|
);
|
|
}
|