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

update

Browse Source
This commit is contained in:
root
2023-05-24 16:55:56 +07:00
parent fff9b7cb18
commit d999d86959
22 changed files with 979 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/client-portal/src/pages/AlarmCenter/Index.tsx
View File

@@ -8,6 +8,8 @@ import Page from '../../components/Page';
/* ---------------------------------- hooks --------------------------------- */
import useSettings from '../../hooks/useSettings';
import List from './List';
import ServiceMonitoring from './ServiceMonitoring';
import UserProfile from './UserProfile';
/* ------------------------------ tabs setting ------------------------------ */
@@ -105,21 +107,21 @@ export default function Drugs() {
<Card>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
<StyledTab label="All Data (20)" {...a11yProps(0)} />
<StyledTab label="Ongoing (5)" {...a11yProps(1)} />
<StyledTab label="Done (15)" {...a11yProps(2)} />
<StyledTab label="All Data (999)" {...a11yProps(0)} />
<StyledTab label="Ongoing (888)" {...a11yProps(1)} />
<StyledTab label="Done (777)" {...a11yProps(2)} />
</StyledTabs>
</Box>
<TabPanel value={value} index={0}>
<List />
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
{/* <TabPanel value={value} index={1}>
<ServiceMonitoring/>
</TabPanel>
<TabPanel value={value} index={2}>
Item Two
</TabPanel>
</Card>
<UserProfile />
</TabPanel> */}
</Card>
</Grid>
</Grid>
</Container>

31
frontend/client-portal/src/pages/AlarmCenter/List.tsx
View File

@@ -31,7 +31,8 @@ import useMap from '../../hooks/useMap';
import palette from '../../theme/palette';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams } from 'react-router-dom';
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
/* ---------------------------------- types --------------------------------- */
@@ -137,6 +138,8 @@ import { useSearchParams } from 'react-router-dom';
/* -------------------------------------------------------------------------- */
export default function List() {
const navigate = useNavigate();
const { corporateValue } = useContext(UserCurrentCorporateContext);
const [data, setData] = useState([]);
@@ -198,6 +201,7 @@ export default function List() {
paginationTable: paginationTable,
setPaginationTable: setPaginationTable,
};
/* -------------------------------------------------------------------------- */
/* ------------------------------ handle search ----------------------------- */
@@ -224,18 +228,19 @@ export default function List() {
/* -------------------------------- headCell -------------------------------- */
const headCells: HeadCell<never>[] = [
{
id: 'fullName',
align: 'left',
label: 'Name',
isSort: true,
},
{
id: 'memberId',
align: 'left',
label: 'Member ID',
isSort: true,
},
{
id: 'fullName',
align: 'left',
label: 'Name',
isSort: true,
},
{
id: 'start_date',
align: 'center',
@@ -268,17 +273,23 @@ export default function List() {
? appliedParams
: Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
const response = await axios.get(`/${corporateValue}/members?type=alarm-center`, {
params: parameters,
const response = await axios.get(`${corporateValue}/members?type=alarm-center`, {
params: { ...parameters },
});
setData(
response.data.data.map((obj: any) => {
return {
...obj,
memberId:
// <Link to={'/user-profile/'+obj.personId} >
<Button
onClick={() => navigate ('/user-profile/'+obj.personId)}
>{obj.memberId}</Button>
,
status:
obj.status === 1 ? (
<Button
<Button onClick={() => navigate('service-monitoring/:id')}
startIcon={<Iconify icon="ic:round-check" />}
sx={{
backgroundColor: palette.light.grey[300],

14
frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
View File

@@ -18,6 +18,7 @@ import Iconify from '../../components/Iconify';
// utils
import useSettings from '../../hooks/useSettings';
import { useState, SyntheticEvent } from 'react';
import { useNavigate } from 'react-router-dom';
// sections
// import ListTable from '../../sections/claimreports/ListTable';
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
@@ -101,19 +102,28 @@ const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props
})
);
export default function ServiceMonitoring() {
const { themeStretch } = useSettings();
const navigate = useNavigate();
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' }}>
<IconButton onClick={() =>
navigate('/alarm-center')
}
sx={{ marginRight: '10px', color: '#424242' }}>
<Iconify icon="heroicons-outline:arrow-narrow-left" />
</IconButton>
<Typography variant="h5">Service Monitoring</Typography>
@@ -271,7 +281,7 @@ export default function ServiceMonitoring() {
<StyledTab icon={<Favorite />} label="Daily Monitoring" {...a11yProps(0)} />
<StyledTab
icon={<Iconify icon="heroicons-solid:beaker" />}
label="Item Two"
label="Laboratorium Result"
{...a11yProps(1)}
/>
</StyledTabs>

38
frontend/client-portal/src/pages/AlarmCenter/UserProfile.tsx
View File

@@ -12,21 +12,47 @@ import CardPolicyNumber from '../../sections/alarm-center/user-profile/CardPolic
import CardBenefitSummary from '../../sections/alarm-center/user-profile/CardBenefitSummary';
import CardClaimHistory from '../../sections/alarm-center/user-profile/CardClaimHistory';
// react
import { useNavigate } from 'react-router';
import { useNavigate, useParams } from 'react-router-dom';
import ButtonBack from '../../components/ButtonBack';
import { useEffect, useState, useContext } from 'react';
import axios from '../../utils/axios';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
// ----------------------------------------------------------------------
export default function UserProfile() {
const { themeStretch } = useSettings();
const navigate = useNavigate();
// const navigate = useNavigate();
const [data, setData] = useState();
const [data1, setData1] = useState();
const {corporateValue} = useContext(UserCurrentCorporateContext);
const {id} = useParams();
useEffect (() => {
axios.get('/data/'+id )
.then(response => {
setData(response.data);
})
.catch(error => {
console.error(error);
});
}, []);
console.log(id)
return (
<Page title="Profile Peserta Jessica Lie">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
<IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate(-1)}>
{/* <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate()}>
<Iconify icon="heroicons-outline:arrow-narrow-left" />
</IconButton>
</IconButton> */}
<ButtonBack/>
<Typography variant="h5">Profil Peserta</Typography>
</Stack>
<Grid container spacing={2}>
@@ -35,11 +61,11 @@ export default function UserProfile() {
<Grid container spacing={2}>
{/* Item 1 */}
<Grid item xs={12} md={12}>
<CardPersonalInformation />
<CardPersonalInformation data={data} />
</Grid>
{/* Item 2 */}
<Grid item xs={12} md={12}>
<CardFamilyInformation />
<CardFamilyInformation data={data1} />
</Grid>
</Grid>
</Grid>

178
frontend/client-portal/src/pages/ClaimReport/DialogDetailClaim.tsx Normal file
View File

@@ -0,0 +1,178 @@
// @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 = () => (
// );
return (
<>
<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>
</>
// <MuiDialog
// title={title}
// openDialog={openDialog}
// setOpenDialog={setOpenDialog}
// content={getContent()}
// />
);
};
export default DialogDetailClaim;

6
frontend/client-portal/src/pages/ClaimReport/Index.tsx
View File

@@ -16,6 +16,10 @@ import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate
/* --------------------------------- orders --------------------------------- */
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams } from 'react-router-dom';
import List from './List';
import ClaimItems from '../Claims/components/ClaimItems';
import DiagnosisHistory from '../Claims/components/DiagnosisHistory';
import Documents from '../Claims/components/Documents';
export default function Drugs() {
const { themeStretch } = useSettings();
@@ -154,6 +158,8 @@ export default function Drugs() {
<CardClaimStatus data={listClaimStatusItems} />
</Grid>
<Grid item xs={12} lg={12} md={12}>
<List/>
{/* <TableList
headCells={headCells}
rows={listAllMemberByClaimStatus}

404
frontend/client-portal/src/pages/ClaimReport/List.tsx Normal file
View File

@@ -0,0 +1,404 @@
/* ---------------------------------- @mui ---------------------------------- */
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Stack,
IconButton,
Button,
TableSortLabel,
Box,
} from '@mui/material';
import DialogDetailClaim from '../../sections/dashboard/DialogDetailClaim';
import { visuallyHidden } from '@mui/utils';
import { MoreVert as MoreVertIcon } from '@mui/icons-material';
/* ---------------------------------- axios --------------------------------- */
// import axios from 'axios';
import axios from '../../utils/axios';
/* ---------------------------------- react --------------------------------- */
import { useContext, useEffect, useState } from 'react';
/* -------------------------------- component ------------------------------- */
import Iconify from '../../components/Iconify';
import BaseTablePagination from '../../components/BaseTablePagination';
import TableComponent from '../../components/Table';
import { Navigate } from 'react-router-dom';
/* ---------------------------------- hooks --------------------------------- */
import useMap from '../../hooks/useMap';
/* ---------------------------------- theme --------------------------------- */
import palette from '../../theme/palette';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams, useNavigate } from 'react-router-dom';
/* ---------------------------------- types --------------------------------- */
// type PaginationTableProps = {
// current_page: number;
// from: number;
// last_page: number;
// links: [];
// path: string;
// per_page: number;
// to: number;
// total: number;
// };
// type DataTableProps = {
// fullName: string;
// memberId: string;
// service: string;
// start_date: string;
// end_date: string;
// status: boolean | number;
// };
// /* -------------------------------------------------------------------------- */
// /* -------------------------- enchanced table head -------------------------- */
// type Order = 'asc' | 'desc';
// interface HeadCell {
// id: string;
// label: string;
// }
// const headCells: readonly HeadCell[] = [
// {
// id: 'name',
// label: 'Name',
// },
// {
// id: 'member_id',
// label: 'Member ID',
// },
// {
// id: 'service',
// label: 'Service',
// },
// {
// id: 'start_date',
// label: 'Start Date',
// },
// {
// id: 'end_date',
// label: 'End Date',
// },
// {
// id: 'status',
// label: 'Status',
// },
// ];
// interface EnhancedTableProps {
// onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
// order: Order;
// orderBy: string;
// }
// function EnhancedTableHead(props: EnhancedTableProps) {
// const { order, orderBy, onRequestSort } = props;
// const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
// onRequestSort(event, property);
// };
// return (
// <TableHead>
// <TableRow>
// <TableCell align="center">No</TableCell>
// {headCells.map((headCell) => (
// <TableCell
// key={headCell.id}
// sortDirection={orderBy === headCell.id ? order : false}
// align="center"
// >
// <TableSortLabel
// active={orderBy === headCell.id}
// direction={orderBy === headCell.id ? order : 'asc'}
// onClick={createSortHandler(headCell.id)}
// >
// {headCell.label}
// {orderBy === headCell.id ? (
// <Box component="span" sx={visuallyHidden}>
// {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
// </Box>
// ) : null}
// </TableSortLabel>
// </TableCell>
// ))}
// </TableRow>
// </TableHead>
// );
// }
/* -------------------------------------------------------------------------- */
export default function List() {
const navigate = useNavigate();
const { corporateValue } = useContext(UserCurrentCorporateContext);
const [data, setData] = useState([]);
/* -------------------------------------------------------------------------- */
/* setting up for the table */
/* -------------------------------------------------------------------------- */
const [isLoading, setIsLoading] = useState(true);
const loadings = {
isLoading: isLoading,
setIsLoading: setIsLoading,
};
/* ------------------------------ handle params ----------------------------- */
const [searchParams, setSearchParams] = useSearchParams();
const [appliedParams, setAppliedParams] = useState({});
const params = {
searchParams: searchParams,
setSearchParams: setSearchParams,
appliedParams: appliedParams,
setAppliedParams: setAppliedParams,
};
/* -------------------------------------------------------------------------- */
/* ------------------------------ handle order ------------------------------ */
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState('fullName');
const orders = {
order: order,
setOrder: setOrder,
orderBy: orderBy,
setOrderBy: setOrderBy,
};
/* -------------------------------------------------------------------------- */
/* ---------------------------- handle pagination --------------------------- */
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
current_page: 0,
from: 0,
last_page: 0,
links: [],
path: '',
per_page: 0,
to: 0,
total: 0,
});
const paginations = {
page: page,
setPage: setPage,
rowsPerPage: rowsPerPage,
setRowsPerPage: setRowsPerPage,
paginationTable: paginationTable,
setPaginationTable: setPaginationTable,
};
/* -------------------------------------------------------------------------- */
/* ------------------------------ handle search ----------------------------- */
const [searchText, setSearchText] = useState('');
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (searchText === '') {
searchParams.delete('search');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
setAppliedParams(params);
}
};
const searchs = {
searchText: searchText,
setSearchText: setSearchText,
handleSearchSubmit: handleSearchSubmit,
};
/* -------------------------------- headCell -------------------------------- */
const headCells: HeadCell<never>[] = [
{
id: 'memberId',
align: 'left',
label: 'Member ID',
isSort: true,
},
{
id: 'fullName',
align: 'left',
label: 'Name',
isSort: true,
},
{
id: 'division',
align: 'left',
label: 'Divisi',
isSort: true,
},
/* {
id: 'end_date',
align: 'center',
label: 'End Date',
isSort: false,
}, */
{
id: 'status',
align: 'center',
label: 'Status',
isSort: true,
},
{
id: 'action',
align: 'right',
label: '',
isSort: false,
},
];
const [open, setOpen] = useState<HTMLElement | null>(null);
const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
setOpen(event.currentTarget);
};
const handleClose = () => {
setOpen(null);
};
/* const clickHandler = (isDialog: string) => {
switch (isDialog) {
case 'infoDetail':
setDialogTitle('Claim Details');
setIsDialog(isDialog);
setOpenDialog(true);
break;
default:
break;
}
}; */
/* -------------------------------------------------------------------------- */
useEffect(() => {
(async () => {
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 250));
const parameters =
Object.keys(appliedParams).length !== 0
? appliedParams
: Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
const response = await axios.get(`${corporateValue}/members`, {
params: { ...parameters },
});
setData(
response.data.data.map((obj: any) => {
return {
...obj,
/* memberId: <Button onClick={() => navigate ('user-profile/:id')}>{obj.memberId}</Button>, */
status:
obj.status === 1 ? (
<Button onClick={() => navigate('dialog-detail')}
/* startIcon={<Iconify icon="ic:round-check" />} */
sx={{
backgroundColor: 'rgba(84, 214, 44, 0.16)',
color: palette.dark.success.dark,
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: 'rgba(84, 214, 44, 0.16)',
color: palette.dark.success.dark,
},
}}
>
Request
</Button>
) : (
<Button
startIcon={<Iconify icon="fa6-solid:clock" />}
sx={{
backgroundColor: '#CD7B2E',
color: '#FFFF',
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: '#BF6919',
color: '#FFFF',
},
}}
>
Ongoing
</Button>
),
/* action: (
<IconButton onClick={() => clickHandler('infoDetail')}>
<MoreVertIcon />
</IconButton>
), */
};
})
);
setPaginationTable(response.data);
setRowsPerPage(response.data.per_page);
if (searchParams.get('page')) {
//@ts-ignore
const currentPage = parseInt(searchParams.get('page')) - 1;
paginationTable.current_page = currentPage;
setPage(currentPage);
}
setIsLoading(false);
})();
}, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
return (
<Stack>
<TableComponent
headCells={headCells}
rows={data}
orders={orders}
paginations={paginations}
loadings={loadings}
params={params}
searchs={searchs}
// filters={filters}
/>
</Stack>
);
}