GRAB X APOTEK X Hospital PORTAL
This commit is contained in:
ivan-sim
@@ -0,0 +1,450 @@
|
||||
/* ---------------------------------- @mui ---------------------------------- */
|
||||
import { Stack, Button, MenuItem, SelectChangeEvent, Tab, Tabs, Card, Box } from '@mui/material';
|
||||
/* ---------------------------------- axios --------------------------------- */
|
||||
// import axios from 'axios';
|
||||
import axios from '../../utils/axios';
|
||||
import { styled } from '@mui/material/styles';
|
||||
/* ---------------------------------- react --------------------------------- */
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
|
||||
/* -------------------------------- component ------------------------------- */
|
||||
import Iconify from '../../components/Iconify';
|
||||
import TableComponent from '../../components/Table';
|
||||
/* ---------------------------------- 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';
|
||||
import { fDate, fDateSuffix, fDateTime } from '../../utils/formatTime';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { format } from 'date-fns';
|
||||
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
||||
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
|
||||
import HistoryIcon from '@mui/icons-material/History';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import Label from '../../components/Label';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { LoadingButton, TabPanel } from "@mui/lab";
|
||||
import { LanguageContext } from '@/contexts/LanguageContext';
|
||||
import MuiDialog from '@/components/MuiDialog';
|
||||
import DialogMember from '@/sections/dashboard/DialogMember';
|
||||
import DialogClaimSubmit from '@/sections/dashboard/DialogClaimSubmit';
|
||||
import { fPostFormat } from '@/utils/formatTime';
|
||||
|
||||
export default function TableList() {
|
||||
const navigate = useNavigate();
|
||||
const { localeData }: any = useContext(LanguageContext);
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
// Download LOG
|
||||
async function handleDownloadLog(claimRequest:any) {
|
||||
return axios
|
||||
.get(`claim-requests/${claimRequest}/log`, {
|
||||
responseType: 'blob',
|
||||
})
|
||||
.then((response) => {
|
||||
window.open(URL.createObjectURL(response.data));
|
||||
// setLoadingLog(false);
|
||||
})
|
||||
// .then((blobFile) => {
|
||||
// new File([blobFile], 'asdads.pdf', { type: blobFile.type })
|
||||
// setLoadingLog(false);
|
||||
// })
|
||||
.catch((response) => {
|
||||
enqueueSnackbar(response.message, { variant: 'error' });
|
||||
// setLoadingLog(false);
|
||||
});
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* 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('dTanggalresep');
|
||||
|
||||
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 selected ---------------------
|
||||
const [selectAll, setSelectAll] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
const [dataTableData, setDataTableData] = useState<any>();
|
||||
const handleSelectAll = () => {
|
||||
setSelectAll(!selectAll);
|
||||
if (!selectAll) {
|
||||
const requestedIds = dataTableData?.data
|
||||
.filter((row: { status: string, check_claim:any }) => row.status === 'approved' && !row.check_claim)
|
||||
.map((row: { id: any }) => row.id);
|
||||
setSelectedRows(requestedIds);
|
||||
} else {
|
||||
setSelectedRows([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (id: any) => {
|
||||
setSelectedRows(prevSelectedRows => {
|
||||
const isSelected = prevSelectedRows.includes(id);
|
||||
if (isSelected) {
|
||||
return prevSelectedRows.filter(rowId => rowId !== id);
|
||||
} else {
|
||||
return [...prevSelectedRows, id];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
|
||||
const handleCloseDialogSubmit = () => {
|
||||
setOpenDialogSubmit(false);
|
||||
}
|
||||
const [valDialog, setValDialog] = useState('');
|
||||
const [reasonDecline, setReasonDecline] = useState('');
|
||||
const handleReasonDeclineChange = (event: { target: { value: SetStateAction<string>; }; }) => {
|
||||
setReasonDecline(event.target.value);
|
||||
};
|
||||
|
||||
const selected = {
|
||||
useSelected: false,
|
||||
selectAll: selectAll,
|
||||
handleSelectAll: handleSelectAll,
|
||||
selectedRows: selectedRows,
|
||||
handleCheckboxChange : handleCheckboxChange,
|
||||
totRows: 9,
|
||||
useDecline: false,
|
||||
txtDecline: 'Decline',
|
||||
useApprove:true,
|
||||
txtApprove: 'Submit Claim',
|
||||
setOpenDialogSubmit: setOpenDialogSubmit,
|
||||
setValDialog: setValDialog
|
||||
};
|
||||
|
||||
/* ------------------------------ 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 Claim -------------------------------- */
|
||||
const headCells: HeadCell<never>[] = [
|
||||
{
|
||||
id: 'no_resep',
|
||||
align: 'left',
|
||||
label: localeData.txtPrescriptionNumber,
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'tanggal',
|
||||
align: 'left',
|
||||
label: localeData.txtPrescriptionDate,
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'pasien',
|
||||
align: 'center',
|
||||
label: localeData.txtPrescriptionPatient,
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'apotek',
|
||||
align: 'center',
|
||||
label: localeData.txtPrescriptionPharmacy,
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
align: 'center',
|
||||
label: localeData.txtStatus,
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'action',
|
||||
align: 'right',
|
||||
label: '',
|
||||
isSort: false,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, [appliedParams, searchParams, order, orderBy, setSearchParams]);
|
||||
const [openRowId, setOpenRowId] = useState<number | null>(null);
|
||||
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-prescription-orders`, {
|
||||
params: { ...parameters, type: 'prescription-orders' },
|
||||
});
|
||||
setDataTableData(response.data);
|
||||
setData(
|
||||
response.data.data.map((obj: any) => ({
|
||||
...obj,
|
||||
status:
|
||||
obj.status === 'waiting_pharmacy' ? (
|
||||
<Label color='default'>
|
||||
{localeData.txtLabelNew}
|
||||
</Label>
|
||||
) : obj.status === 'order_prepared' ? (
|
||||
<Label color='primary' >
|
||||
{localeData.txtLabelAccepted}
|
||||
</Label>
|
||||
) : obj.status === 'ready' ? (
|
||||
<Label color='primary'>
|
||||
{localeData.txtLabelReady}
|
||||
</Label>
|
||||
) : obj.status === 'waiting_for_courir' ? (
|
||||
<Label color='primary'>
|
||||
{localeData.txtLabelWaitingCourir}
|
||||
</Label>
|
||||
) : obj.status === 'package_picked_up' ? (
|
||||
<Label color='primary'>
|
||||
{localeData.txtLabelPackagePickedUp}
|
||||
</Label>
|
||||
) : obj.status === 'package_on_delivery' ? (
|
||||
<Label color='primary'>
|
||||
{localeData.txtLabelPackageOnDelivery}
|
||||
</Label>
|
||||
) : obj.status === 'package_delivered' ? (
|
||||
<Label color='primary'>
|
||||
{localeData.txtLabelPackageDelivered}
|
||||
</Label>
|
||||
) : obj.status === 'waiting_for_payment' ? (
|
||||
<Label color='primary'>
|
||||
{localeData.txtLabelWaitingForPayment}
|
||||
</Label>
|
||||
) : (
|
||||
<Label color='primary'>
|
||||
Pending
|
||||
</Label>
|
||||
),
|
||||
tanggal:
|
||||
<Label>
|
||||
{obj.tanggal ? fDateTime(obj.tanggal) : ''}
|
||||
</Label>
|
||||
,
|
||||
valid_tanggal:
|
||||
<Label>
|
||||
{obj.valid_tanggal ? fDateTime(obj.valid_tanggal) : ''}
|
||||
</Label>
|
||||
,
|
||||
action:
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
<MenuItem onClick={() => setOpenRowId(obj.id === openRowId ? null : obj.id)}>
|
||||
<Iconify icon="eva:eye-fill" />
|
||||
{localeData.txtPrescriptionDetail}
|
||||
</MenuItem>
|
||||
{/* <MenuItem onClick={() => handleDownloadLog(obj.id, obj.service_code, obj.no_polis, obj.full_name, obj.provider, obj.approved_at)}>
|
||||
<Iconify icon="eva:download-fill" />
|
||||
{localeData.txtPrescriptionDownload}
|
||||
</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": "waiting_for_payment", "name": localeData.txtLabelWaitingForPayment },
|
||||
{"id": "waiting_pharmacy", "name": localeData.txtLabelNew },
|
||||
{"id": "order_prepared", "name": localeData.txtLabelAccepted },
|
||||
{"id": "ready", "name": localeData.txtLabelReady },
|
||||
{"id": "waiting_for_courir", "name": localeData.txtLabelWaitingCourir },
|
||||
{"id": "package_picked_up", "name": localeData.txtLabelPackagePickedUp },
|
||||
{"id": "package_on_delivery", "name": localeData.txtLabelPackageOnDelivery },
|
||||
{"id": "package_delivered", "name": localeData.txtLabelPackageDelivered },
|
||||
];
|
||||
setStatusData(status)
|
||||
|
||||
setIsLoading(false);
|
||||
})();
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<TableComponent
|
||||
headCells={headCells}
|
||||
rows={data}
|
||||
orders={orders}
|
||||
paginations={paginations}
|
||||
loadings={loadings}
|
||||
params={params}
|
||||
searchs={searchs}
|
||||
filterStatus={filterStatus}
|
||||
selected={selected}
|
||||
// filterStartDate={filterStartDate}
|
||||
// filterEndDate={filterEndDate}
|
||||
openRowId={openRowId} // Pass the currently opened row ID
|
||||
setOpenRowId={setOpenRowId} // Pass the function to set the opened row ID
|
||||
reloadData={getData}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user