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

commit

Browse Source
This commit is contained in:
Muhammad Fajar
2023-09-27 17:49:36 +07:00
parent 544eb32a81
commit 52783b191a
7 changed files with 435 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/client-portal/.env.development
View File

@@ -2,6 +2,6 @@ GENERATE_SOURCEMAP=false
PORT=8083
REACT_APP_HOST_API_URL="http://localhost:8000"
REACT_APP_HOST_API_URL="http://aso.test"
VITE_API_URL="http://localhost:8000/api/client"
VITE_API_URL="http://aso.test/api/client"

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

@@ -20,12 +20,20 @@ import List from './List';
import ClaimItems from '../Claims/components/ClaimItems';
import DiagnosisHistory from '../Claims/components/DiagnosisHistory';
import Documents from '../Claims/components/Documents';
// theme
import palette from '../../theme/palette';
interface ClaimStatusType {
name: string;
value: number;
color: string;
}
export default function Drugs() {
const { themeStretch } = useSettings();
const { corporateValue } = useContext(UserCurrentCorporateContext);
const [listClaimStatusItems, setListClaimStatusItems] = useState([]);
const [listClaimStatusItems, setListClaimStatusItems] = useState<ClaimStatusType[]>([]);
const [listAllMemberByClaimStatus, setListAllMemberByClaimStatus] = useState([]);
/* -------------------------------------------------------------------------- */
@@ -127,6 +135,26 @@ export default function Drugs() {
(async () => {
setIsLoading(true);
const claimStatus = await axios.get(`${corporateValue}/claim-report/claim-status`);
setListClaimStatusItems([
{
name: 'Requested',
value: claimStatus.data.data.requesteds,
color: palette.dark.primary.dark,
},
{
name: 'Approval',
value: claimStatus.data.data.approveds,
color: palette.dark.warning.dark,
},
{
name: 'Rejected',
value: claimStatus.data.data.rejecteds,
color: palette.dark.error.dark,
},
]);
const parameters =
Object.keys(appliedParams).length !== 0
? appliedParams
@@ -142,7 +170,6 @@ export default function Drugs() {
setSearchParams(parameters);
setListClaimStatusItems(claim.data.data.allClaimStatus);
setListAllMemberByClaimStatus(claim.data.data.allMembersByClaimStatus.data);
setPaginationTable(claim.data.data.allMembersByClaimStatus);
@@ -158,8 +185,8 @@ export default function Drugs() {
<CardClaimStatus data={listClaimStatusItems} />
</Grid>
<Grid item xs={12} lg={12} md={12}>
<List/>
<List />
{/* <TableList
headCells={headCells}
rows={listAllMemberByClaimStatus}

730
frontend/client-portal/src/pages/ClaimReport/List.tsx
View File

@@ -1,404 +1,390 @@
/* ---------------------------------- @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);
}
};
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';
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,
},
/* {
/* -------------------------------- 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,
},
];
{
id: 'status',
align: 'center',
label: 'Status',
isSort: true,
},
{
id: 'action',
align: 'right',
label: '',
isSort: false,
},
];
const [open, setOpen] = useState<HTMLElement | null>(null);
const [open, setOpen] = useState<HTMLElement | null>(null);
const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
setOpen(event.currentTarget);
};
};
const handleClose = () => {
const handleClose = () => {
setOpen(null);
};
};
/* const clickHandler = (isDialog: string) => {
/* 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) => {
useEffect(() => {
(async () => {
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 250));
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: (
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, type: 'claim-report' },
});
setData(
response.data.data.map((obj: any) => ({
...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>
}))
);
);
}
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>
);
}

4
frontend/client-portal/src/sections/claim-report/CardClaimStatus.tsx
View File

@@ -45,7 +45,7 @@ export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
<Grid container spacing={2}>
{data
? data.map(({ name, value, color }: ClaimStatusType, key) => (
<Grid item key={key} xs={6} sm={3}>
<Grid item key={key} xs={6} sm={4}>
<Card
sx={{
paddingX: 1,
@@ -71,7 +71,7 @@ export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
</Grid>
))
: defaultData.map(({ name, value, color }: ClaimStatusType, key) => (
<Grid item key={key} xs={6} sm={3}>
<Grid item key={key} xs={6} sm={4}>
<Card
sx={{
paddingX: 1,