From d778d5af892bde9660dfc4e2f1ae64687c7b868b Mon Sep 17 00:00:00 2001 From: Muhammad Fajar Date: Mon, 14 Nov 2022 15:27:18 +0700 Subject: [PATCH] alarm center --- .../layouts/dashboard/navbar/NavConfig.tsx | 23 + .../src/pages/AlarmCenter/Index.tsx | 9 +- .../src/pages/AlarmCenter/List.tsx | 417 ++++++++++++++++++ frontend/client-portal/src/routes/index.tsx | 20 +- 4 files changed, 461 insertions(+), 8 deletions(-) create mode 100755 frontend/client-portal/src/pages/AlarmCenter/List.tsx diff --git a/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx b/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx index 69f2d97c..1fa49018 100755 --- a/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx +++ b/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx @@ -43,6 +43,29 @@ const navConfig = [ // }, ], }, + + // Membership + // ---------------------------------------------------------------------- + { + subheader: 'Case Management', + items: [ + { + title: 'Alarm Center', + path: '/alarm-center', + icon: ICONS.ecommerce, + }, + // { + // title: 'Member Movement', + // // path: '/', + // icon: ICONS.user, + // children: [ + // { title: '', path: '/medicines' }, + // { title: 'Obat', path: '/medicines' }, + // { title: 'Obat', path: '/medicines' }, + // ], + // }, + ], + }, ]; export default navConfig; diff --git a/frontend/client-portal/src/pages/AlarmCenter/Index.tsx b/frontend/client-portal/src/pages/AlarmCenter/Index.tsx index 793014eb..1f00f75f 100755 --- a/frontend/client-portal/src/pages/AlarmCenter/Index.tsx +++ b/frontend/client-portal/src/pages/AlarmCenter/Index.tsx @@ -8,7 +8,7 @@ import useSettings from '../../hooks/useSettings'; // import ListTable from '../../sections/claimreports/ListTable'; // import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard'; -import List from '../Members/List'; +import List from './List'; export default function Drugs() { const { themeStretch } = useSettings(); @@ -16,12 +16,9 @@ export default function Drugs() { // const { corporate_id } = useParams(); return ( - + - - - {/* */} - + diff --git a/frontend/client-portal/src/pages/AlarmCenter/List.tsx b/frontend/client-portal/src/pages/AlarmCenter/List.tsx new file mode 100755 index 00000000..5b362fcd --- /dev/null +++ b/frontend/client-portal/src/pages/AlarmCenter/List.tsx @@ -0,0 +1,417 @@ +// @mui +import { + Box, + Button, + Card, + Collapse, + IconButton, + InputLabel, + MenuItem, + OutlinedInput, + Paper, + Select, + SelectChangeEvent, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + TextField, + Typography, + Badge, + Tab, + Tabs, + CardHeader, + Stack, + Menu, + ButtonGroup, + Pagination, + Grid, +} from '@mui/material'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; +import AddIcon from '@mui/icons-material/Add'; +import UploadIcon from '@mui/icons-material/Upload'; +import CancelIcon from '@mui/icons-material/Cancel'; +// hooks +import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react'; +import useSettings from '../../hooks/useSettings'; +import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; +// components +import axios from '../../utils/axios'; +import { LaravelPaginatedData } from '../../@types/paginated-data'; +import { Icd } from '../../@types/diagnosis'; +import BasePagination from '../../components/BasePagination'; +import { Member } from '../../@types/member'; + +export default function List() { + const navigate = useNavigate(); + const { themeStretch } = useSettings(); + const { corporate_id } = useParams(); + const [searchParams, setSearchParams] = useSearchParams(); + const [importResult, setImportResult] = useState(null); + + function SearchInput(props: any) { + // SEARCH + const searchInput = useRef(null); + const [searchText, setSearchText] = useState(''); + + const handleSearchChange = (event: any) => { + const newSearchText = event.target.value ?? ''; + setSearchText(newSearchText); + }; + + const handleSearchSubmit = (event: any) => { + event.preventDefault(); + props.onSearch(searchText); // Trigger to Parent + }; + + useEffect(() => { + // Trigger First Search + setSearchText(searchParams.get('search') ?? ''); + }, [searchParams]); + + return ( +
+ + + ); + } + + function ImportForm(props: any) { + // IMPORT + // Create Button Menu + const [anchorEl, setAnchorEl] = React.useState(null); + const createMenu = Boolean(anchorEl); + const importForm = useRef(null); + const [currentImportFileName, setCurrentImportFileName] = useState(null); + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const handleImportButton = () => { + if (importForm?.current) { + handleClose(); + importForm.current ? importForm.current.click() : console.log('No File selected'); + } else { + alert('No file selected'); + } + }; + + const handleCancelImportButton = () => { + importForm.current.value = ''; + importForm.current.dispatchEvent(new Event('change', { bubbles: true })); + }; + + const handleImportChange = (event: any) => { + if (event.target.files[0]) { + setCurrentImportFileName(event.target.files[0].name); + } else { + setCurrentImportFileName(null); + } + }; + + const handleUpload = () => { + if (importForm.current?.files.length) { + const formData = new FormData(); + formData.append('file', importForm.current?.files[0]); + axios + .post(`master/formularium/import`, formData) + .then((response) => { + handleCancelImportButton(); + loadDataTableData(); + setImportResult(response.data); + // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows'); + }) + .catch((response) => { + alert( + 'Looks like something went wrong. Please check your data and try again. ' + + response.message + ); + }); + } else { + alert('No File Selected'); + } + }; + + return ( +
+ + {!currentImportFileName && ( + + + + )} + + {currentImportFileName && ( + + + + + + + + + )} + {importResult && ( + + + Last Import Result Report :{' '} + + {importResult.result_file?.name ?? '-'} + + + + )} +
+ ); + } + + // Called on every row to map the data to the columns + function createData(member: Member): Member { + return { + ...member, + }; + } + + // Generate the every row of the table + function Row(props: { row: ReturnType }) { + const { row } = props; + const [open, setOpen] = React.useState(true); + + return ( + + *': { borderBottom: 'unset' } }}> + + setOpen(!open)}> + {open ? : } + + + {row.member_id} + {row.payor_id} + {row.name} + {row.nik} + {row.nric} + + + + + {/* */} + + {/* COLLAPSIBLE ROW */} + + + + + + + + + + + + + ); + } + + // Dummy Default Data + const [dataTableIsLoading, setDataTableLoading] = useState(true); + const [dataTableLastRequest, setDataTableLastRequest] = useState(0); + const [dataTableResponseState, setDataTableResponseState] = useState('idle'); + const [dataTableData, setDataTableData] = useState({ + current_page: 1, + data: [], + path: '', + first_page_url: '', + last_page: 1, + last_page_url: '', + next_page_url: '', + prev_page_url: '', + per_page: 10, + from: 0, + to: 0, + total: 0, + }); + const [dataTablePage, setDataTablePage] = useState(5); + + const loadDataTableData = async (appliedFilter: any | null = null) => { + setDataTableLoading(true); + const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]); + const response = await axios.get('/members', { params: filter }); + + setDataTableData(response.data.members); + setDataTableLoading(false); + }; + + const headStyle = { + fontWeight: 'bold', + }; + + const applyFilter = async (searchFilter: string) => { + await loadDataTableData({ search: searchFilter }); + setSearchParams({ search: searchFilter }); + }; + + const handlePageChange = (event: ChangeEvent, value: number) => { + const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]); + loadDataTableData(filter); + setSearchParams(filter); + }; + + useEffect(() => { + loadDataTableData(); + }, []); + + return ( + + + + + + + + + + + {/* The Main Table */} + + + + + + No + + + Name + + + Member ID + + + Service + + + Start Date + + + End Date + + + Status + + + + {dataTableIsLoading ? ( + + + + Loading + + + + ) : dataTableData.data.length === 0 ? ( + + + + No Data + + + + ) : ( + + {dataTableData.data.map((row) => ( + + ))} + + )} +
+ + + + + + ); +} diff --git a/frontend/client-portal/src/routes/index.tsx b/frontend/client-portal/src/routes/index.tsx index 789cca00..236cee39 100755 --- a/frontend/client-portal/src/routes/index.tsx +++ b/frontend/client-portal/src/routes/index.tsx @@ -93,6 +93,22 @@ export default function Router() { }, ], }, + { + path: '/alarm-center', + element: ( + + + + + + ), + children: [ + { + element: , + index: true, + }, + ], + }, // { // path: '/dashboard', // element: , @@ -131,7 +147,7 @@ const Login = Loadable(lazy(() => import('../pages/auth/Login'))); const VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode'))); // Dashboard -const Dashboard = Loadable(lazy(() => import('../pages/Dashboard'))); +const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard'))); const NotFound = Loadable(lazy(() => import('../pages/Page404'))); // Members @@ -139,4 +155,4 @@ const Members = Loadable(lazy(() => import('../pages/Members/Index'))); const MembersCreate = Loadable(lazy(() => import('../pages/Members/Create'))); // Alarm Center -// const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index'))); +const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));