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:
ivan-sim
2024-01-17 15:44:37 +07:00
parent 1d791a2643
commit 3f6a41cbb1
3 changed files with 132 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/hospital-portal/index.html
View File

@@ -34,6 +34,6 @@
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/index.tsx?version=1"></script> <script type="module" src="/src/index.tsx?version=2"></script>
</body> </body>
</html> </html>

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

@@ -31,6 +31,7 @@ import DialogMember from './DialogMember';
import DialogFinalLog from './DialogFinalLog'; import DialogFinalLog from './DialogFinalLog';
import { fPostFormat } from '@/utils/formatTime'; import { fPostFormat } from '@/utils/formatTime';
import TableListFinalLog from './TableListFinalLog'; import TableListFinalLog from './TableListFinalLog';
import TableListReqLog from './TableListReqLog';
export default function TableList() { export default function TableList() {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -39,363 +40,12 @@ export default function TableList() {
useEffect(() => { useEffect(() => {
setCurrentTab('request_log') setCurrentTab('request_log')
}, []) }, [])
function handleChangeTab(event: React.SyntheticEvent, newValue: string) { function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
setCurrentTab(newValue) setCurrentTab(newValue)
}
//const { corporateValue } = useContext(UserCurrentCorporateContext);
//const { corporateValue } = useContext(null);
const [data, setData] = useState([]);
// Download LOG
async function handleDownloadLog(request_log_id:any) {
return axios
.get(`download-log/${request_log_id}`, {
responseType: 'blob',
})
.then((response) => {
window.open(URL.createObjectURL(response.data), '_blank');
})
.catch((response) => {
enqueueSnackbar(response.message, { variant: 'error' });
});
} }
/* -------------------------------------------------------------------------- */
/* 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>('desc');
const [orderBy, setOrderBy] = useState('submission_date');
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 = {
useSearchs: true,
searchText: searchText,
setSearchText: setSearchText,
handleSearchSubmit: handleSearchSubmit,
};
/* ------------------------------ handle filter ----------------------------- */
const [statusValue, setStatusValue] = useState('all');
const [filterData, setStatusData] = useState([]);
// handle status
const handleStatusChanges = (event: SelectChangeEvent) => {
setStatusValue(event.target.value as string);
if (event.target.value === 'all') {
searchParams.delete('status');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([
...searchParams.entries(),
['status', event.target.value as string],
]);
setAppliedParams(params);
}
};
const filterStatus = {
useFilter: true,
config: {
label: 'Status',
statusValue: statusValue,
filterData: filterData,
handleStatusChange: handleStatusChanges,
},
};
// handle start date
const [startDateValue, setStartDateValue] = useState('');
const handleStartDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const newStartDateValue = event.currentTarget.elements['date-input'].value;
setStartDateValue(newStartDateValue);
if (newStartDateValue === '') {
searchParams.delete('start_date');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([...searchParams.entries(), ['start_date', newStartDateValue]]);
setAppliedParams(params);
}
};
const filterStartDate = {
useFilter: true,
startDate: startDateValue,
setStartDate: setStartDateValue,
handleStartDateChange: handleStartDateChanges,
};
// handle end date
const [endDateValue, setEndDateValue] = useState('');
const handleEndDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const newEndDateValue = event.currentTarget.elements['date-input'].value;
setEndDateValue(newEndDateValue);
if (newEndDateValue === '') {
searchParams.delete('end_date');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([...searchParams.entries(), ['end_date', newEndDateValue]]);
setAppliedParams(params);
}
};
const filterEndDate = {
useFilter: true,
endDate: endDateValue,
setEndDate: setEndDateValue,
handleEndDateChange: handleEndDateChanges,
};
/* -------------------------------- headCell Request LOG -------------------------------- */
const headCells: HeadCell<never>[] = [
{
id: 'code',
align: 'left',
label: localeData.txtRequestCode,
isSort: true,
},
{
id: 'provider',
align: 'left',
label: localeData.txtProvider,
isSort: true,
},
{
id: 'full_name',
align: 'left',
label: localeData.txtName,
isSort: true,
},
{
id: 'submission_date',
align: 'center',
label: localeData.txtSubmissionDate,
isSort: true,
},
{
id: 'status',
align: 'center',
label: localeData.txtStatus,
isSort: true,
},
{
id: 'action',
align: 'right',
label: '',
isSort: false,
},
];
function handleSearchMember(noPolis:any, birthDate:any) {
setLoadingClaim(false)
axios.post('/search-member', {
no_polis: noPolis,
birth_date: birthDate ? fPostFormat(birthDate, 'yyyy-MM-dd') : null,
type: 'view'
})
.then((response) => {
setOpenDialogBenefit(true)
setCurrentMember(response.data.data)
setNameMember(response.data.data.members.name);
})
.catch(({response}) => {
enqueueSnackbar(response.data.errors ? response.data.errors[0] : (response.data ? response.data.meta.message : 'Opps, Something went Wrong!'), {variant : "error"})
})
.then(() => {
});
}
function handleRequestFinalLog(id:any, full_name:any, no_polis:any, submission_date:any)
{
setOpenDialogFinalLog(true);
const datas_view = {
'id' : id,
'full_name' : full_name,
'no_polis' : no_polis,
'submission_date' : submission_date
};
setDataViewFinalDialog(datas_view);
}
useEffect(() => {
getData();
}, [appliedParams, searchParams, order, orderBy, setSearchParams]);
function getData()
{
(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(`/get-request-log`, {
params: { ...parameters, order: order,
orderBy: orderBy, type: 'request-log' },
});
setData(
response.data.data.map((obj: any) => ({
...obj,
status:
obj.status === 'requested' ? (
<Label color='primary'>
Request
</Label>
) : obj.status === 'approved' ? (
<Label color='success' >
Approval
</Label>
) : obj.status === 'declined' ? (
<Label color='error'>
Decline
</Label>
) : obj.status === 'reviewed' ? (
<Label color='info'>
Review
</Label>
) : (
<Label color='primary'>
Pending
</Label>
),
submission_date:
<Label>
{obj.submission_date ? fDateSuffix(obj.submission_date) : ''}
</Label>
,
action:
<TableMoreMenu actions={
<>
<MenuItem onClick={() => handleSearchMember(obj.no_polis, obj.birth_date) }>
<Iconify icon="eva:eye-fill" />
View
</MenuItem>
{obj.status === 'approved' ? (
<MenuItem onClick={() => handleDownloadLog(obj.id)}>
<Iconify icon="eva:download-fill" />
Download LOG
</MenuItem>
):''}
{obj.final_log === 0 && obj.status === 'approved' ? (
<MenuItem onClick={() => handleRequestFinalLog(obj.id, obj.full_name, obj.no_polis, obj.submission_date) }>
<Iconify icon="fa:file-text" />
Request Final LOG
</MenuItem>
):''}
</>
} />
}))
);
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);
}
const status:any = [
{"id": "requested", "name": "Request" },
{"id": "reviewed", "name": "Review" },
{"id": "approved", "name": "Approval" },
{"id": "declined", "name": "Decline" },
];
setStatusData(status)
setIsLoading(false);
})();
}
const RootNotificationStyle = styled(Card)(({ theme }) => ({ const RootNotificationStyle = styled(Card)(({ theme }) => ({
boxShadow: 'none', boxShadow: 'none',
@@ -425,18 +75,6 @@ function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
); );
} }
// const [noPolis, setNoPolis] = useState('AW001-01');
//const [birthDate, setBirthDate] = useState('1991-01-10');
const [loadingBenefit, setLoadingBenefit] = useState(false);
const [loadingClaim, setLoadingClaim] = useState(false);
const [openDialogBenefit, setOpenDialogBenefit] = useState(false);
const [openDialogFinalLog, setOpenDialogFinalLog] = useState(false);
const [openDialogClaim, setOpenDialogClaim] = useState(false);
const [currentMember, setCurrentMember] = useState(null);
const [nameMember, setNameMember] = useState('');
const [setIsRequestFinalLog, isRequestFinalLog] = useState(false);
const [dataViewFinalDialog, setDataViewFinalDialog] = useState<any>(null);
return ( return (
<Card> <Card>
<RootNotificationStyle sx={{ p: 2, height: 'auto' }}> <RootNotificationStyle sx={{ p: 2, height: 'auto' }}>
@@ -450,51 +88,12 @@ function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
</Tabs> </Tabs>
</RootNotificationStyle> </RootNotificationStyle>
<TabPanel value={currentTab} index={'request_log'}> <TabPanel value={currentTab} index={'request_log'}>
<TableComponent <TableListReqLog/>
headCells={headCells}
rows={data}
orders={orders}
paginations={paginations}
loadings={loadings}
params={params}
searchs={searchs}
filterStatus={filterStatus}
// filterStartDate={filterStartDate}
// filterEndDate={filterEndDate}
/>
</TabPanel> </TabPanel>
<TabPanel value={currentTab} index={'final_log'}> <TabPanel value={currentTab} index={'final_log'}>
<TableListFinalLog/> <TableListFinalLog/>
</TabPanel> </TabPanel>
<MuiDialog
title={{name: nameMember}}
openDialog={openDialogBenefit}
setOpenDialog={setOpenDialogBenefit}
content={
DialogMember(currentMember, () => setOpenDialogBenefit(false))
}
maxWidth="sm"
/>
<MuiDialog
title={{name: dataViewFinalDialog?.full_name}}
openDialog={openDialogFinalLog}
setOpenDialog={setOpenDialogFinalLog}
content={
<DialogFinalLog
member={dataViewFinalDialog}
getData={getData}
onClose={(data:any, getData:any) => {
console.log('Data returned:', data);
getData();
setOpenDialogFinalLog(false);
}}
handleSubmitSuccess={() => {
}}
/>
}
maxWidth="sm"
/>
</Card> </Card>
); );
} }

221
frontend/hospital-portal/src/sections/dashboard/TableListReqLog.tsx
View File

@@ -26,19 +26,15 @@ import Label from '../../components/Label';
import { enqueueSnackbar } from 'notistack'; import { enqueueSnackbar } from 'notistack';
import { LoadingButton, TabPanel } from "@mui/lab"; import { LoadingButton, TabPanel } from "@mui/lab";
import { LanguageContext } from '@/contexts/LanguageContext'; import { LanguageContext } from '@/contexts/LanguageContext';
import MuiDialog from '@/components/MuiDialog';
import DialogMember from './DialogMember';
import DialogFinalLog from './DialogFinalLog';
import { fPostFormat } from '@/utils/formatTime';
import TableListFinalLog from './TableListFinalLog';
export default function TableList() { export default function TableList() {
const navigate = useNavigate(); const navigate = useNavigate();
const { localeData }: any = useContext(LanguageContext); const { localeData }: any = useContext(LanguageContext);
const [currentTab, setCurrentTab] = useState<string>('request_log');
useEffect(() => {
setCurrentTab('request_log')
}, [])
function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
setCurrentTab(newValue)
}
//const { corporateValue } = useContext(UserCurrentCorporateContext); //const { corporateValue } = useContext(UserCurrentCorporateContext);
//const { corporateValue } = useContext(null); //const { corporateValue } = useContext(null);
@@ -46,23 +42,16 @@ function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
const [data, setData] = useState([]); const [data, setData] = useState([]);
// Download LOG // Download LOG
async function handleDownloadLog(claimRequest) { async function handleDownloadLog(request_log_id:any) {
return axios return axios
.get(`claim-requests/${claimRequest}/log`, { .get(`download-log/${request_log_id}`, {
responseType: 'blob', responseType: 'blob',
}) })
.then((response) => { .then((response) => {
window.open(URL.createObjectURL(response.data)); window.open(URL.createObjectURL(response.data), '_blank');
// setLoadingLog(false);
}) })
// .then((blobFile) => {
// new File([blobFile], 'asdads.pdf', { type: blobFile.type })
// setLoadingLog(false);
// })
.catch((response) => { .catch((response) => {
console.log(response);
enqueueSnackbar(response.message, { variant: 'error' }); enqueueSnackbar(response.message, { variant: 'error' });
// setLoadingLog(false);
}); });
} }
@@ -228,24 +217,18 @@ function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
handleEndDateChange: handleEndDateChanges, handleEndDateChange: handleEndDateChanges,
}; };
/* -------------------------------- headCell -------------------------------- */ /* -------------------------------- headCell Request LOG -------------------------------- */
const headCells: HeadCell<never>[] = [ const headCells: HeadCell<never>[] = [
{
id: 'submission_date',
align: 'center',
label: localeData.txtRequestDate,
isSort: true,
},
{
id: 'member_id',
align: 'left',
label: localeData.txtMemberID,
isSort: true,
},
{ {
id: 'code', id: 'code',
align: 'left', align: 'left',
label: localeData.txtClaimCode, label: localeData.txtRequestCode,
isSort: true,
},
{
id: 'provider',
align: 'left',
label: localeData.txtProvider,
isSort: true, isSort: true,
}, },
{ {
@@ -254,6 +237,12 @@ function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
label: localeData.txtName, label: localeData.txtName,
isSort: true, isSort: true,
}, },
{
id: 'submission_date',
align: 'center',
label: localeData.txtSubmissionDate,
isSort: true,
},
{ {
id: 'status', id: 'status',
align: 'center', align: 'center',
@@ -268,7 +257,46 @@ function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
}, },
]; ];
function handleSearchMember(noPolis:any, birthDate:any) {
setLoadingClaim(false)
axios.post('/search-member', {
no_polis: noPolis,
birth_date: birthDate ? fPostFormat(birthDate, 'yyyy-MM-dd') : null,
type: 'view'
})
.then((response) => {
setOpenDialogBenefit(true)
setCurrentMember(response.data.data)
setNameMember(response.data.data.members.name);
})
.catch(({response}) => {
enqueueSnackbar(response.data.errors ? response.data.errors[0] : (response.data ? response.data.meta.message : 'Opps, Something went Wrong!'), {variant : "error"})
})
.then(() => {
});
}
function handleRequestFinalLog(id:any, full_name:any, no_polis:any, submission_date:any)
{
setOpenDialogFinalLog(true);
const datas_view = {
'id' : id,
'full_name' : full_name,
'no_polis' : no_polis,
'submission_date' : submission_date
};
setDataViewFinalDialog(datas_view);
}
useEffect(() => { useEffect(() => {
getData();
}, [appliedParams, searchParams, order, orderBy, setSearchParams]);
function getData()
{
(async () => { (async () => {
setIsLoading(true); setIsLoading(true);
@@ -279,10 +307,10 @@ function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
? appliedParams ? appliedParams
: Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]); : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
const response = await axios.get(`/get-claim-requests`, { const response = await axios.get(`/get-request-log`, {
params: { ...parameters, type: 'claim-request' }, params: { ...parameters, order: order,
orderBy: orderBy, type: 'request-log' },
}); });
setData( setData(
response.data.data.map((obj: any) => ({ response.data.data.map((obj: any) => ({
...obj, ...obj,
@@ -316,14 +344,22 @@ function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
action: action:
<TableMoreMenu actions={ <TableMoreMenu actions={
<> <>
<MenuItem onClick={() => navigate ('/detail/'+obj.claim_request_id)}> <MenuItem onClick={() => handleSearchMember(obj.no_polis, obj.birth_date) }>
<Iconify icon="eva:eye-fill" /> <Iconify icon="eva:eye-fill" />
View View
</MenuItem> </MenuItem>
<MenuItem onClick={() => handleDownloadLog(obj.claim_request_id)}> {obj.status === 'approved' ? (
<MenuItem onClick={() => handleDownloadLog(obj.id)}>
<Iconify icon="eva:download-fill" /> <Iconify icon="eva:download-fill" />
Download LOG Download LOG
</MenuItem> </MenuItem>
):''}
{obj.final_log === 0 && obj.status === 'approved' ? (
<MenuItem onClick={() => handleRequestFinalLog(obj.id, obj.full_name, obj.no_polis, obj.submission_date) }>
<Iconify icon="fa:file-text" />
Request Final LOG
</MenuItem>
):''}
</> </>
} /> } />
})) }))
@@ -340,60 +376,37 @@ function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
setPage(currentPage); setPage(currentPage);
} }
const status = [ const status:any = [
{"id": "requested", "name": "Request" }, {"id": "requested", "name": "Request" },
{"id": "reviewed", "name": "Review" }, {"id": "reviewed", "name": "Review" },
{"id": "approved", "name": "Approval" }, {"id": "approved", "name": "Approval" },
{"id": "declined", "name": "Decline" }, {"id": "declined", "name": "Decline" },
] ];
setStatusData(status) setStatusData(status)
setIsLoading(false); setIsLoading(false);
})(); })();
}, [appliedParams, searchParams, order, orderBy, setSearchParams]);
const RootNotificationStyle = styled(Card)(({ theme }) => ({
boxShadow: 'none',
padding: '1rem 0.5rem',
color: 'black',
borderRadius: 0,
backgroundColor: theme.palette.grey[200],
// maxHeight: '240px',
}));
function TabPanel(props:any) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box sx={{ p: 3 }}>
<div>{children}</div>
</Box>
)}
</div>
);
} }
// const [noPolis, setNoPolis] = useState('AW001-01');
//const [birthDate, setBirthDate] = useState('1991-01-10');
const [loadingBenefit, setLoadingBenefit] = useState(false);
const [loadingClaim, setLoadingClaim] = useState(false);
const [openDialogBenefit, setOpenDialogBenefit] = useState(false);
const [openDialogFinalLog, setOpenDialogFinalLog] = useState(false);
const [openDialogClaim, setOpenDialogClaim] = useState(false);
const [currentMember, setCurrentMember] = useState(null);
const [nameMember, setNameMember] = useState('');
const [setIsRequestFinalLog, isRequestFinalLog] = useState(false);
const [dataViewFinalDialog, setDataViewFinalDialog] = useState<any>(null);
return ( return (
<Card> <>
<RootNotificationStyle sx={{ p: 2, height: 'auto' }}> <TableComponent
<Tabs
value={currentTab}
onChange={handleChangeTab}
aria-label="wrapped label tabs example"
>
<Tab value="request_log" label= "Request LOG" />
<Tab value="final_log" label= "Final LOG" />
</Tabs>
</RootNotificationStyle>
<TabPanel value={currentTab} index={'request_log'}>
<TableComponent
headCells={headCells} headCells={headCells}
rows={data} rows={data}
orders={orders} orders={orders}
@@ -405,21 +418,35 @@ function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
// filterStartDate={filterStartDate} // filterStartDate={filterStartDate}
// filterEndDate={filterEndDate} // filterEndDate={filterEndDate}
/> />
</TabPanel> <MuiDialog
<TabPanel value={currentTab} index={'request_log'}> title={{name: nameMember}}
<TableComponent openDialog={openDialogBenefit}
headCells={headCells} setOpenDialog={setOpenDialogBenefit}
rows={data} content={
orders={orders} DialogMember(currentMember, () => setOpenDialogBenefit(false))
paginations={paginations} }
loadings={loadings} maxWidth="sm"
params={params} />
searchs={searchs}
filterStatus={filterStatus} <MuiDialog
// filterStartDate={filterStartDate} title={{name: dataViewFinalDialog?.full_name}}
// filterEndDate={filterEndDate} openDialog={openDialogFinalLog}
/> setOpenDialog={setOpenDialogFinalLog}
</TabPanel> content={
</Card> <DialogFinalLog
member={dataViewFinalDialog}
getData={getData}
onClose={(data:any, getData:any) => {
console.log('Data returned:', data);
getData();
setOpenDialogFinalLog(false);
}}
handleSubmitSuccess={() => {
}}
/>
}
maxWidth="sm"
/>
</>
); );
} }