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

Remove Dummy Notifications

Browse Source
This commit is contained in:
R
2023-02-14 15:31:57 +07:00
parent 4f2bb19d8a
commit 8c97df9fc4
5 changed files with 301 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/hospital-portal/src/pages/Dashboard.tsx
View File

@@ -16,11 +16,13 @@ import TableList from '@/sections/dashboard/TableList';
// ----------------------------------------------------------------------
// const [notifications, setNotifications] = useState([])
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' },
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
{ 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: '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: '10:00 WIB' },
// { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
];
// ----------------------------------------------------------------------

6
frontend/hospital-portal/src/sections/dashboard/CardNotification.tsx
View File

@@ -6,6 +6,8 @@ import { ChevronRight } from '@mui/icons-material';
import Iconify from '@/components/Iconify';
// React
import { useState } from 'react';
import DialogNotification from './DialogNotification';
import DialogDetailClaim from './DialogDetailClaim';
// ----------------------------------------------------------------------
@@ -93,7 +95,7 @@ export default function CardNotification({ data }: NotificationProps) {
</Stack>
<ItemNotificationStyle sx={{ marginTop: 2, overflowY: 'auto', maxHeight: '154px' }}>
{data
{(data && data.length)
? data.map(({ info, date, time }, key) => (
<div key={key}>
{key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
@@ -116,7 +118,7 @@ export default function CardNotification({ data }: NotificationProps) {
</Stack>
</div>
))
: ''}
: <Typography variant="body2" align="center">Tidak ada notifikasi</Typography>}
</ItemNotificationStyle>
{isDialog === 'allNotification' && (

175
frontend/hospital-portal/src/sections/dashboard/DialogDetailClaim.tsx Normal file
View File

@@ -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;

93
frontend/hospital-portal/src/sections/dashboard/DialogNotification.tsx Normal file
View File

@@ -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;

65
frontend/hospital-portal/src/sections/dashboard/TableList.tsx
View File

@@ -38,6 +38,7 @@ import palette from '@/theme/palette';
import { useSearchParams } from 'react-router-dom';
// import { UserCurrentCorporateContext } from '@/contexts/UserCurrentCorporate';
import { fSplit } from '@/utils/formatNumber';
import { Chip } from '@mui/material';
/* ---------------------------------- types --------------------------------- */
type PaginationTableProps = {
@@ -60,7 +61,7 @@ type DataTableProps = {
total: number;
percentage: number;
};
status: number;
status: string;
};
type Order = 'asc' | 'desc';
@@ -174,7 +175,6 @@ function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps
/* -------------------------------------------------------------------------- */
export default function TableList(props: any) {
const [dataTable, setDataTable] = useState([]);
const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
current_page: 0,
@@ -294,7 +294,7 @@ export default function TableList(props: any) {
const response = await axios.get(`/claim-requests`, {
params: { ...params, claimMember: false },
});
setSearchParams(params);
setDataTable(response.data.data.data);
setPaginationTable(response.data.data);
@@ -365,8 +365,9 @@ export default function TableList(props: any) {
<TableCell align="left">{row.code}</TableCell>
<TableCell align="center">{row.member?.full_name ?? ''}</TableCell>
<TableCell align="center">{row.submission_date}</TableCell>
<TableCell align="right">{ row.log_url ? (
<Button
<TableCell align="right">
{row.log_url ? (
<Button
sx={{
backgroundColor: palette.light.grey[400],
color: palette.dark.grey[900],
@@ -379,46 +380,26 @@ export default function TableList(props: any) {
>
Download LOG
</Button>
) : (
<Typography>Belum Tersedia</Typography>
)}
</TableCell>
<TableCell align="right">
{row.status == 'requested' ? (
<Button
sx={{
backgroundColor: 'rgba(84, 214, 44, 0.16)',
color: palette.dark.success.dark,
paddingY: 0,
'&:hover': {
backgroundColor: 'rgba(84, 214, 44, 0.32)',
color: palette.dark.success.darker,
},
}}
>
Requested
</Button>
) : (
<Button
sx={{
backgroundColor: 'rgba(255, 72, 66, 0.16)',
color: palette.dark.error.dark,
paddingY: 0,
'&:hover': {
backgroundColor: 'rgba(255, 72, 66, 0.32)',
color: palette.dark.error.darker,
},
}}
>
Declined
</Button>
<Typography>Belum Tersedia</Typography>
)}
</TableCell>
{/* <TableCell align="right">
<IconButton>
<Iconify icon="ic:baseline-more-vert" />
</IconButton>
</TableCell> */}
<TableCell align="right">
<Chip
color={
row.status == 'requested'
? 'default'
: row.status == 'approved'
? 'success'
: row.status == 'declined'
? 'error'
: 'default'
}
size="small"
label={row.status ?? 'unknown'}
sx={{ textTransform: 'capitalize' }}
/>
</TableCell>
</TableRow>
))
) : (