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

Merge branch 'mhmfajar' of http://itcorp.primaya.id:3000/rajif/aso into mhmfajar

Browse Source
This commit is contained in:
R
2022-12-04 12:56:54 +07:00
parent b3eb9b5f9d d12fe31a82
commit 2d5c7b571e
46 changed files with 6598 additions and 4522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/.DS_Store vendored Normal file
View File

Binary file not shown.

9
frontend/client-portal/index.html
View File

@@ -13,8 +13,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Using Google Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<!-- Using Local Font -->
<link rel="stylesheet" type="text/css" href="/fonts/index.css" />
@@ -29,8 +32,8 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
</html>

BIN
frontend/client-portal/public/images/husband-user-profile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
frontend/client-portal/public/images/login-image.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 MiB

BIN
frontend/client-portal/public/images/login-image.mp4 Normal file
View File

Binary file not shown.

BIN
frontend/client-portal/public/images/login-image.webm Normal file
View File

Binary file not shown.

BIN
frontend/client-portal/public/images/member.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
frontend/client-portal/public/images/user-profile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

25
frontend/client-portal/src/components/BaseTablePagination.tsx Executable file
View File

@@ -0,0 +1,25 @@
/* ---------------------------------- @mui ---------------------------------- */
import { TablePagination, TablePaginationProps } from '@mui/material';
import { Box } from '@mui/system';
export default function BaseTablePagination({
count,
onPageChange,
page,
rowsPerPage,
onRowsPerPageChange,
}: TablePaginationProps) {
return (
<Box>
<TablePagination
component="div"
rowsPerPageOptions={[10, 25]}
count={count}
page={page}
onPageChange={onPageChange}
rowsPerPage={rowsPerPage}
onRowsPerPageChange={onRowsPerPageChange}
/>
</Box>
);
}

5
frontend/client-portal/src/contexts/LaravelAuthContext.tsx
View File

@@ -78,12 +78,9 @@ function AuthProvider({ children }: AuthProviderProps) {
useEffect(() => {
(async () => {
console.log('initialize', state);
try {
const accessToken = getSession();
console.log('');
if (accessToken) {
setSession(accessToken);
@@ -144,6 +141,8 @@ function AuthProvider({ children }: AuthProviderProps) {
user,
},
});
return response.data;
})
.catch((error) => {
if (error.response.status !== 404) throw error.response;

50
frontend/client-portal/src/hooks/useMap.ts Normal file
View File

@@ -0,0 +1,50 @@
import { useCallback, useState } from 'react'
export type MapOrEntries<K, V> = Map<K, V> | [K, V][]
// Public interface
export interface Actions<K, V> {
set: (key: K, value: V) => void
setAll: (entries: MapOrEntries<K, V>) => void
remove: (key: K) => void
reset: Map<K, V>['clear']
}
// We hide some setters from the returned map to disable autocompletion
type Return<K, V> = [Omit<Map<K, V>, 'set' | 'clear' | 'delete'>, Actions<K, V>]
function useMap<K, V>(
initialState: MapOrEntries<K, V> = new Map(),
): Return<K, V> {
const [map, setMap] = useState(new Map(initialState))
const actions: Actions<K, V> = {
set: useCallback((key, value) => {
setMap(prev => {
const copy = new Map(prev)
copy.set(key, value)
return copy
})
}, []),
setAll: useCallback(entries => {
setMap(() => new Map(entries))
}, []),
remove: useCallback(key => {
setMap(prev => {
const copy = new Map(prev)
copy.delete(key)
return copy
})
}, []),
reset: useCallback(() => {
setMap(() => new Map())
}, []),
}
return [map, actions]
}
export default useMap

16
frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx
View File

@@ -5,8 +5,9 @@ import { Box, Divider, Typography, Stack, MenuItem, Avatar } from '@mui/material
// components
import MenuPopover from '../../../components/MenuPopover';
import { IconButtonAnimate } from '../../../components/animate';
import { useNavigate } from "react-router-dom";
import { useNavigate } from 'react-router-dom';
import useAuth from '../../../hooks/useAuth';
import useLocalStorage from '../../../hooks/useLocalStorage';
// ----------------------------------------------------------------------
@@ -32,6 +33,10 @@ export default function AccountPopover() {
const navigate = useNavigate();
const { logout } = useAuth();
const [emailOrPhone, setEmailOrPhone] = useLocalStorage('emailOrPhone', '');
const [emailOrPhoneForm, setEmailOrPhoneForm] = useLocalStorage('emailOrPhoneForm', false);
const [loginOrVerifyCode, setLoginOrVerifyCode] = useLocalStorage('loginOrVerifyCode', false);
const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
setOpen(event.currentTarget);
};
@@ -41,9 +46,12 @@ export default function AccountPopover() {
};
const handleLogout = () => {
setEmailOrPhone('');
setEmailOrPhoneForm(false);
setLoginOrVerifyCode(false);
logout();
navigate('/auth/login');
}
};
return (
<>
@@ -105,7 +113,9 @@ export default function AccountPopover() {
<Divider sx={{ borderStyle: 'dashed' }} />
<MenuItem sx={{ m: 1 }} onClick={handleLogout}>Logout</MenuItem>
<MenuItem sx={{ m: 1 }} onClick={handleLogout}>
Logout
</MenuItem>
</MenuPopover>
</>
);

8
frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx
View File

@@ -11,10 +11,10 @@ const navConfig = [
{
subheader: 'Case Management',
items: [
{
title: 'Alarm Center',
path: '/alarm-center',
},
// {
// title: 'Alarm Center',
// path: '/alarm-center',
// },
{
title: 'Claim Report',
path: '/claim-report',

5
frontend/client-portal/src/layouts/dashboard/navbar/NavbarVertical.tsx
View File

@@ -16,7 +16,6 @@ import Scrollbar from '../../../components/Scrollbar';
import { NavSectionVertical } from '../../../components/nav-section';
//
import navConfig from './NavConfig';
import NavbarDocs from './NavbarDocs';
import NavbarAccount from './NavbarAccount';
import CollapseButton from './CollapseButton';
@@ -76,7 +75,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
<Stack direction="row" alignItems="center" justifyContent="space-between">
<Stack direction="row" alignItems="center">
<Logo />
<Typography ml={3}>PRIME CENTER</Typography>
<Typography ml={3}>Client Portal</Typography>
</Stack>
<CollapseButton onToggleCollapse={onToggleCollapse} collapseClick={collapseClick} />
</Stack>
@@ -92,8 +91,6 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
<NavSectionVertical navConfig={navConfig} isCollapse={isCollapse} />
<Box sx={{ flexGrow: 1 }} />
{!isCollapse && <NavbarDocs />}
</Scrollbar>
);

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

@@ -1,19 +1,101 @@
// mui
import { Container, Grid, Card } from '@mui/material';
// components
/* ---------------------------------- react --------------------------------- */
import { useState, SyntheticEvent } from 'react';
/* ---------------------------------- @mui ---------------------------------- */
import { Box, Tabs, Tab, Container, Grid, Card } from '@mui/material';
import { styled } from '@mui/material/styles';
/* ------------------------------- components ------------------------------- */
import Page from '../../components/Page';
// utils
/* ---------------------------------- hooks --------------------------------- */
import useSettings from '../../hooks/useSettings';
// sections
// import ListTable from '../../sections/claimreports/ListTable';
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
import List from './List';
/* ------------------------------ tabs setting ------------------------------ */
/* ---------------------------------- types --------------------------------- */
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}
interface StyledTabsProps {
children?: React.ReactNode;
value: number;
onChange: (event: React.SyntheticEvent, newValue: number) => void;
}
interface StyledTabProps {
label: string;
icon?: string | React.ReactElement;
}
/* -------------------------------- tab style ------------------------------- */
function TabPanel(props: TabPanelProps) {
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>{children}</Box>}
</div>
);
}
function a11yProps(index: number) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
backgroundColor: '#F4F6F8',
padding: '0 24px',
'& .MuiTabs-indicator': {
display: 'flex',
justifyContent: 'space-between',
backgroundColor: 'transparent',
},
'& .MuiTabs-indicatorSpan': {
maxWidth: 40,
backgroundColor: '#635ee7',
},
});
const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
({ theme }) => ({
textTransform: 'none',
fontWeight: 600,
color: theme.palette.grey[600],
marginRight: '5rem',
'&.Mui-selected': {
color: '#212B36',
borderBottom: '2px solid ' + theme.palette.primary.main,
},
'&:hover': {
color: '#212B36',
opacity: 1,
borderBottom: '2px solid ' + theme.palette.primary.main,
},
})
);
/* -------------------------------------------------------------------------- */
export default function Drugs() {
const { themeStretch } = useSettings();
// const { corporate_id } = useParams();
const [value, setValue] = useState(0);
const handleChange = (event: SyntheticEvent, newValue: number) => {
setValue(newValue);
};
return (
<Page title="Alarm Center">
@@ -21,7 +103,22 @@ export default function Drugs() {
<Grid container>
<Grid item xs={12} lg={12} md={12}>
<Card>
<List />
<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)} />
</StyledTabs>
</Box>
<TabPanel value={value} index={0}>
<List />
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Two
</TabPanel>
</Card>
</Grid>
</Grid>

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

@@ -1,16 +1,6 @@
// @mui
/* ---------------------------------- @mui ---------------------------------- */
import {
Box,
Button,
Card,
Collapse,
IconButton,
InputLabel,
MenuItem,
OutlinedInput,
Paper,
Select,
SelectChangeEvent,
Table,
TableBody,
TableCell,
@@ -18,400 +8,323 @@ import {
TableHead,
TableRow,
TextField,
Typography,
Badge,
Tab,
Tabs,
CardHeader,
Stack,
Menu,
ButtonGroup,
Pagination,
Grid,
Button,
TableSortLabel,
Box,
} 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';
import { visuallyHidden } from '@mui/utils';
/* ---------------------------------- axios --------------------------------- */
import axios from 'axios';
/* ---------------------------------- react --------------------------------- */
import { useEffect, useState } from 'react';
/* -------------------------------- component ------------------------------- */
import Iconify from '../../components/Iconify';
import BaseTablePagination from '../../components/BaseTablePagination';
/* ---------------------------------- hooks --------------------------------- */
import useMap from '../../hooks/useMap';
/* ---------------------------------- theme --------------------------------- */
import palette from '../../theme/palette';
/* ---------------------------------- types --------------------------------- */
type PaginationTableProps = {
current_page: number;
from: number;
last_page: number;
links: [];
path: string;
per_page: number;
to: number;
total: number;
};
type DataTableProps = {
name: string;
member_id: string;
service: string;
start_date: string;
end_date: string;
status: string;
};
/* -------------------------------------------------------------------------- */
/* -------------------------- 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 { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState(null);
function SearchInput(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(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 (
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
<TextField
id="search-input"
ref={searchInput}
label="Search"
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
/>
</form>
);
}
function ImportForm(props: any) {
// IMPORT
// Create Button Menu
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const createMenu = Boolean(anchorEl);
const importForm = useRef<HTMLInputElement>(null);
const [currentImportFileName, setCurrentImportFileName] = useState(null);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
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 (
<div>
<input
type="file"
id="file"
ref={importForm}
style={{ display: 'none' }}
onChange={handleImportChange}
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
/>
{!currentImportFileName && (
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<SearchInput onSearch={applyFilter} />
</Stack>
)}
{currentImportFileName && (
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
<Button onClick={handleImportButton} fullWidth>
{currentImportFileName ?? 'No File Selected'}
</Button>
<Button
onClick={handleCancelImportButton}
size="small"
fullWidth={false}
sx={{ p: 1.8 }}
>
<CancelIcon color="error" />
</Button>
</ButtonGroup>
<Button
id="upload-button"
variant="outlined"
startIcon={<UploadIcon />}
sx={{ p: 1.8 }}
onClick={handleUpload}
>
Upload
</Button>
</Stack>
)}
{importResult && (
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
<Box sx={{ color: 'text.secondary' }}>
Last Import Result Report :{' '}
<a href={importResult.result_file?.url ?? '#'}>
{importResult.result_file?.name ?? '-'}
</a>
</Box>
</Stack>
)}
</div>
);
}
// 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<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(true);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.member_id}</TableCell>
<TableCell align="left">{row.payor_id}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{row.nik}</TableCell>
<TableCell align="left">{row.nric}</TableCell>
<TableCell align="right">
<Button variant="outlined" color="success" size="small">
Active
</Button>
</TableCell>
{/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ borderBottom: 1 }}>
<Typography variant="body2" gutterBottom component="div">
<Grid></Grid>
</Typography>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: '',
first_page_url: '',
last_page: 1,
last_page_url: '',
next_page_url: '',
prev_page_url: '',
per_page: 10,
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState('name');
const [customSearchParams, setCustomSearchParams] = useMap<string, any>();
const [isLoading, setIsLoading] = useState(true);
const [dataTable, setDataTable] = useState([]);
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 [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 });
/* ------------------------------- handle sort ------------------------------ */
const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
const params = Object.fromEntries([
...customSearchParams.entries(),
['order', isAsc ? 'desc' : 'asc'],
['orderBy', property],
]);
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 500));
loadDataTable(params);
setIsLoading(false);
};
/* -------------------------------------------------------------------------- */
setDataTableData(response.data.members);
setDataTableLoading(false);
/* ------------------------------ Search field ------------------------------ */
const [searchText, setSearchText] = useState('');
const handleSearch = (event: any) => {
setSearchText(event.target.value);
};
const headStyle = {
fontWeight: 'bold',
const handleSearchSubmit = async (event: any) => {
event.preventDefault();
const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 500));
loadDataTable(params);
setIsLoading(false);
};
/* -------------------------------------------------------------------------- */
const applyFilter = async (searchFilter: string) => {
await loadDataTableData({ search: searchFilter });
setSearchParams({ search: searchFilter });
};
/* --------------------------- Load Data Table API -------------------------- */
const loadDataTable = async (appliedParams: any | null = null) => {
setIsLoading(true);
const handlePageChange = (event: ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
loadDataTableData(filter);
setSearchParams(filter);
const params = appliedParams
? appliedParams
: Object.fromEntries([
...customSearchParams.entries(),
['order', order],
['orderBy', orderBy],
]);
const response = await axios.get('http://localhost:8001/api/alarm-center', { params: params });
setDataTable(response.data.data);
setPaginationTable(response.data.meta);
setRowsPerPage(response.data.meta.per_page);
setIsLoading(false);
};
/* -------------------------------------------------------------------------- */
/* ------------------------ button change pagination ------------------------ */
const onPageChangeHandle = async (event: unknown, newPage: number) => {
const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
setPage(newPage);
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 500));
loadDataTable(params);
setIsLoading(false);
setCustomSearchParams.set('page', newPage + 1);
};
/* -------------------------------------------------------------------------- */
/* ----------------------- row page per limit on click ---------------------- */
const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
setPage(0);
const params = Object.fromEntries([
...customSearchParams.entries(),
['page', 0],
['per_page', parseInt(event.target.value, 10)],
]);
setRowsPerPage(parseInt(event.target.value, 10));
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 500));
loadDataTable(params);
setIsLoading(false);
setCustomSearchParams.set('per_page', parseInt(event.target.value, 10));
};
/* -------------------------------------------------------------------------- */
useEffect(() => {
loadDataTableData();
loadDataTable();
}, []);
return (
<Stack>
<Stack
direction="row"
spacing={5}
sx={{ backgroundColor: '#F4F6F8', paddingX: 3, paddingY: '13px' }}
>
<Button variant="subtitle2" sx={{ position: 'relative' }}>
All Data ( Count )
<Typography
sx={{
borderBottom: '2px solid #19BBBB',
borderRadius: '1px',
position: 'absolute',
bottom: '-13px',
left: 0,
width: '100%',
}}
component="span"
/>
</Button>
<Button variant="subtitle2" sx={{ position: 'relative' }}>
Ongoing ( Count )
{/* <Typography
sx={{
borderBottom: '2px solid #19BBBB',
borderRadius: '1px',
position: 'absolute',
bottom: '-13px',
left: 0,
width: '100%',
}}
component="span"
/> */}
</Button>
<Button variant="subtitle2" sx={{ position: 'relative' }}>
Done ( Count )
{/* <Typography
sx={{
borderBottom: '2px solid #19BBBB',
borderRadius: '1px',
position: 'absolute',
bottom: '-13px',
left: 0,
width: '100%',
}}
component="span"
/> */}
</Button>
</Stack>
{/* Search */}
<form onSubmit={handleSearchSubmit} style={{ width: '100%', padding: '20px 24px' }}>
<TextField
id="search-input"
label="Search"
variant="outlined"
fullWidth
onChange={handleSearch}
value={searchText}
/>
</form>
<ImportForm />
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleRequestSort} />
<TableBody>
{isLoading ? (
<TableRow>
<TableCell style={headStyle} align="left">
No
</TableCell>
<TableCell style={headStyle} align="left">
Name
</TableCell>
<TableCell style={headStyle} align="left">
Member ID
</TableCell>
<TableCell style={headStyle} align="left">
Service
</TableCell>
<TableCell style={headStyle} align="left">
Start Date
</TableCell>
<TableCell style={headStyle} align="left">
End Date
</TableCell>
<TableCell style={headStyle} align="right" width={100}>
Status
<TableCell colSpan={8} align="center">
Loading . . .
</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
Loading
) : dataTable.length >= 1 ? (
dataTable.map((row: DataTableProps, index) => (
<TableRow key={index}>
<TableCell align="center">{paginationTable.from + index++}</TableCell>
<TableCell align="center">{row.name}</TableCell>
<TableCell align="center">{row.member_id}</TableCell>
<TableCell align="center">{row.service}</TableCell>
<TableCell align="center">{row.start_date}</TableCell>
<TableCell align="center">{row.end_date}</TableCell>
<TableCell align="center">
{row.status.toLowerCase() === 'done' ? (
<Button
startIcon={<Iconify icon="ic:round-check" />}
sx={{
backgroundColor: palette.light.grey[300],
color: palette.light.grey[800],
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: palette.light.grey[400],
color: palette.light.grey[800],
},
}}
>
{row.status}
</Button>
) : (
<Button
startIcon={<Iconify icon="fa6-solid:clock" />}
sx={{
backgroundColor: '#CD7B2E',
color: '#FFFF',
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: '#BF6919',
color: '#FFFF',
},
}}
>
{row.status}
</Button>
)}
</TableCell>
</TableRow>
</TableBody>
) : dataTableData.data.length === 0 ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
No Data
</TableCell>
</TableRow>
</TableBody>
))
) : (
<TableBody>
{dataTableData.data.map((row) => (
<Row key={row.id} row={row} />
))}
</TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
No Data Found
</TableCell>
</TableRow>
)}
</Table>
</TableContainer>
</TableBody>
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
{/* Pagination */}
<BaseTablePagination
count={paginationTable.total}
onPageChange={onPageChangeHandle}
page={page}
rowsPerPage={rowsPerPage}
onRowsPerPageChange={onRowsPerPageChangeHandle}
/>
</Stack>
);
}

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

@@ -1,6 +1,5 @@
// mui
import {
Button,
Box,
Tabs,
Tab,
@@ -18,7 +17,7 @@ import Page from '../../components/Page';
import Iconify from '../../components/Iconify';
// utils
import useSettings from '../../hooks/useSettings';
import { useRef, useState, SyntheticEvent } from 'react';
import { useState, SyntheticEvent } from 'react';
// sections
// import ListTable from '../../sections/claimreports/ListTable';
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
@@ -102,7 +101,7 @@ const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props
})
);
export default function Drugs() {
export default function ServiceMonitoring() {
const { themeStretch } = useSettings();
const [value, setValue] = useState(0);

63
frontend/client-portal/src/pages/AlarmCenter/UserProfile.tsx Executable file
View File

@@ -0,0 +1,63 @@
// mui
import { IconButton, Container, Grid, Stack, Typography } from '@mui/material';
// components
import Page from '../../components/Page';
import Iconify from '../../components/Iconify';
// utils
import useSettings from '../../hooks/useSettings';
// section
import CardPersonalInformation from '../../sections/alarm-center/user-profile/CardPersonalInformation';
import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
import CardPolicyNumber from '../../sections/alarm-center/user-profile/CardPolicyNumber';
import CardBenefitSummary from '../../sections/alarm-center/user-profile/CardBenefitSummary';
import CardClaimHistory from '../../sections/alarm-center/user-profile/CardClaimHistory';
// react
import { useNavigate } from 'react-router';
// ----------------------------------------------------------------------
export default function UserProfile() {
const { themeStretch } = useSettings();
const navigate = useNavigate();
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)}>
<Iconify icon="heroicons-outline:arrow-narrow-left" />
</IconButton>
<Typography variant="h5">Profil Peserta</Typography>
</Stack>
<Grid container spacing={2}>
{/* Row 1 */}
<Grid item xs={12} md={6}>
<Grid container spacing={2}>
{/* Item 1 */}
<Grid item xs={12} md={12}>
<CardPersonalInformation />
</Grid>
{/* Item 2 */}
<Grid item xs={12} md={12}>
<CardFamilyInformation />
</Grid>
</Grid>
</Grid>
{/* Row 2 */}
<Grid item xs={12} md={6}>
<Grid container spacing={2}>
{/* Item 1 */}
<Grid item xs={12}>
<CardPolicyNumber />
</Grid>
{/* Item 2 */}
<Grid item xs={12}>
<CardClaimHistory />
</Grid>
</Grid>
</Grid>
</Grid>
</Container>
</Page>
);
}

30
frontend/client-portal/src/pages/ClaimReports/Index.tsx
View File

@@ -1,30 +0,0 @@
// mui
import { Container, Grid } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
// sections
import ListTable from '../../sections/claimreports/ListTable';
import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
export default function Drugs() {
const { themeStretch } = useSettings();
// const { corporate_id } = useParams();
return (
<Page title="Claim Reports">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2}>
<Grid item xs={12} lg={12} md={12}>
<ClaimStatusCard />
</Grid>
<Grid item xs={12} lg={12} md={12}>
<ListTable />
</Grid>
</Grid>
</Container>
</Page>
);
}

7
frontend/client-portal/src/pages/Dashboard/Dashboard.tsx
View File

@@ -4,11 +4,11 @@ import { Typography, Container, Grid } from '@mui/material';
import useSettings from '../../hooks/useSettings';
// components
import Page from '../../components/Page';
// Table
import List from './List';
// theme
import CardNotification from '../../sections/dashboard/CardNotification';
import CardBalance from '../../sections/dashboard/CardBalance';
import TableList from '../../sections/dashboard/TableList';
import List from './List';
// ----------------------------------------------------------------------
@@ -56,12 +56,11 @@ export default function Dashboard() {
<CardBalance />
</Grid>
<Grid item xs={12} lg={12} md={12}>
<TableList />
{/* <List /> */}
</Grid>
</Grid>
</Container>
{/* <DialogDetailClaim /> */}
</Page>
);
}

373
frontend/client-portal/src/pages/Dashboard/List.tsx Normal file
View File

@@ -0,0 +1,373 @@
// @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,
Autocomplete,
} 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';
import Iconify from '../../components/Iconify';
const options = [
{ label: 'The Shawshank Redemption', value: 1994 },
{ label: 'The Godfather', year: 1972 },
{ label: 'The Godfather: Part II', year: 1974 },
{ label: 'The Dark Knight', year: 2008 },
{ label: '12 Angry Men', year: 1957 },
{ label: "Schindler's List", year: 1993 },
{ label: 'Pulp Fiction', year: 1994 },
];
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<HTMLInputElement>(null);
const [searchText, setSearchText] = useState('');
const [value, setValue] = useState<string | null>(options[0]);
const [inputValue, setInputValue] = 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') ?? '');
console.log(value, inputValue);
}, [searchParams, value, inputValue]);
return (
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
<Stack direction="row" spacing={2}>
<Autocomplete
value={value}
onChange={(event: any, newValue: string | null) => {
setValue(newValue);
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
id="controllable-states-demo"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Division" />}
/>
<TextField
id="search-input"
ref={searchInput}
label="Search"
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
/>
</Stack>
</form>
);
}
function ImportForm(props: any) {
// IMPORT
// Create Button Menu
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const createMenu = Boolean(anchorEl);
const importForm = useRef<HTMLInputElement>(null);
const [currentImportFileName, setCurrentImportFileName] = useState(null);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
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 (
<Stack direction="row" spacing={2} padding={2}>
<SearchInput onSearch={applyFilter} />
<Button
id="import-button"
variant="outlined"
startIcon={<Iconify icon="material-symbols:download-rounded" />}
sx={{ paddingY: '15px', paddingX: '22px', flex: '10%' }}
component="label"
>
Import
<input
type="file"
id="file"
ref={importForm}
style={{ display: 'none' }}
onChange={handleImportChange}
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
/>
</Button>
<Button
id="import-button"
variant="contained"
startIcon={<AddIcon />}
sx={{ paddingY: '15px', paddingX: '22px', flex: '15%' }}
onClick={handleClick}
>
Add Data
</Button>
</Stack>
);
}
// 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<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(true);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.member_id}</TableCell>
<TableCell align="left">{row.payor_id}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{row.nik}</TableCell>
<TableCell align="left">{row.nric}</TableCell>
<TableCell align="right">
<Button variant="outlined" color="success" size="small">
Active
</Button>
</TableCell>
{/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ borderBottom: 1 }}>
<Typography variant="body2" gutterBottom component="div">
<Grid></Grid>
</Typography>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
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 (
<Stack>
<Card>
<ImportForm />
{/* The Main Table */}
<TableContainer component={Paper} sx={{ paddingX: 1, borderRadius: 2 }}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow sx={{ backgroundColor: '#F4F6F8' }}>
<TableCell style={headStyle} align="left">
Member ID
</TableCell>
<TableCell style={headStyle} align="center">
Name
</TableCell>
<TableCell style={headStyle} align="center">
Divisi
</TableCell>
<TableCell style={headStyle} align="center">
Limit
</TableCell>
<TableCell style={headStyle} align="center">
Status
</TableCell>
<TableCell style={headStyle} align="right">
{' '}
</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ? (
<TableBody>
<TableRow>
<TableCell colSpan={6} align="center">
Loading
</TableCell>
</TableRow>
</TableBody>
) : dataTableData.data.length === 0 ? (
<TableBody>
<TableRow>
<TableCell colSpan={6} align="center">
No Data
</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map((row) => (
<Row key={row.id} row={row} />
))}
</TableBody>
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Stack>
);
}

141
frontend/client-portal/src/pages/auth/Login.tsx
View File

@@ -1,17 +1,16 @@
// @mui
/* ---------------------------------- @mui ---------------------------------- */
import { styled } from '@mui/material/styles';
import { Box, Card, Divider, Grid, Link, Stack, Typography } from '@mui/material';
// components
import { Box, Card, Divider, Grid, Link, Stack, Typography, IconButton } from '@mui/material';
/* ------------------------------- components ------------------------------- */
import Page from '../../components/Page';
import Image from '../../components/Image';
// sections
import { LoginEmailForm, LoginPhoneForm } from '../../sections/auth/login';
import Logo from '../../components/Logo';
// react
import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import Iconify from '../../components/Iconify';
/* ---------------------------------- hooks --------------------------------- */
import useLocalStorage from '../../hooks/useLocalStorage';
/* -------------------------------- sections -------------------------------- */
import { LoginEmailForm, LoginPhoneForm, VerifyCodeForm } from '../../sections/auth/login';
// ----------------------------------------------------------------------
/* --------------------------------- styled --------------------------------- */
const RootStyle = styled('div')(({ theme }) => ({
[theme.breakpoints.up('md')]: {
@@ -33,20 +32,9 @@ const ContentStyle = styled(Card)(({ theme }) => ({
// ----------------------------------------------------------------------
export default function Login() {
const { state } = useLocation();
const [formPhone, setFormPhone] = useState(false);
const handlerChange = (event: any, setForm: boolean) => {
event.preventDefault();
setFormPhone(setForm);
};
useEffect(() => {
if (state !== null) {
setFormPhone(state.formPhone);
}
console.log(state);
}, [state]);
const [emailOrPhone, setEmailOrPhone] = useLocalStorage('emailOrPhone', '');
const [emailOrPhoneForm, setEmailOrPhoneForm] = useLocalStorage('emailOrPhoneForm', false);
const [loginOrVerifyCode, setLoginOrVerifyCode] = useLocalStorage('loginOrVerifyCode', false);
return (
<Page title="Login">
@@ -54,35 +42,99 @@ export default function Login() {
<ContentStyle>
<Grid container>
<Grid item xs={6}>
<Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
<video
autoPlay={true}
loop={true}
muted={true}
playsInline={true}
style={{ width: '100%' }}
>
<source src="/images/login-image.webm" type="video/webm" />
<source src="/images/login-image.mp4" type="video/mp4" />
</video>
</Grid>
<Grid item xs={6} sx={{ padding: 3 }}>
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
<Logo sx={{ width: 90, height: 90 }} />
<Box sx={{ flexGrow: 1 }}>
<Typography variant="h4" gutterBottom>
Sign in to LinkSehat
</Typography>
<Typography variant="body1" sx={{ color: 'text.secondary' }}>
Enter your details below.
</Typography>
</Box>
</Stack>
{loginOrVerifyCode && emailOrPhone ? (
<>
<Stack direction="column" sx={{ mb: 5 }}>
<Stack direction="row" alignItems="center">
<IconButton
onClick={() => {
localStorage.removeItem('emailOrPhone');
setLoginOrVerifyCode(false);
}}
>
<Iconify
icon="heroicons-outline:arrow-narrow-left"
sx={{ marginRight: '10px' }}
/>
</IconButton>
<Typography variant="h4" gutterBottom>
Verifikasi OTP
</Typography>
</Stack>
<Box sx={{ flexGrow: 1 }}>
<Typography
variant="body1"
sx={{ color: 'text.secondary', textAlign: 'left' }}
>
Masukkan kode OTP anda disini
</Typography>
</Box>
</Stack>
{formPhone ? (
<LoginPhoneForm formPhone={formPhone} />
<VerifyCodeForm
setEmailOrPhoneForm={setEmailOrPhoneForm}
setLoginOrVerifyCode={setLoginOrVerifyCode}
emailOrPhone={emailOrPhone}
/>
<Stack sx={{ marginTop: 5 }} spacing={1} alignItems="center">
<Typography>Tidak mendapatkan kode?</Typography>
<Link sx={{ cursor: 'pointer' }}>Kirim Ulang Kode OTP</Link>
</Stack>
</>
) : (
<LoginEmailForm formPhone={formPhone} />
<>
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
<Logo sx={{ width: 90, height: 90 }} />
<Box sx={{ flexGrow: 1 }}>
<Typography variant="h4" gutterBottom>
Sign in to LinkSehat
</Typography>
<Typography variant="body1" sx={{ color: 'text.secondary' }}>
Enter your details below.
</Typography>
</Box>
</Stack>
{emailOrPhoneForm ? (
<LoginPhoneForm
setEmailOrPhone={setEmailOrPhone}
setLoginOrVerifyCode={setLoginOrVerifyCode}
/>
) : (
<LoginEmailForm
setEmailOrPhone={setEmailOrPhone}
setLoginOrVerifyCode={setLoginOrVerifyCode}
/>
)}
</>
)}
<Divider sx={{ marginTop: 5 }}>Atau</Divider>
<Stack sx={{ marginTop: 5 }}>
{formPhone ? (
{emailOrPhoneForm ? (
<Link
align="center"
underline="hover"
onClick={(event) => handlerChange(event, false)}
onClick={() => {
setEmailOrPhone('');
setLoginOrVerifyCode(false);
setEmailOrPhoneForm(false);
}}
sx={{ cursor: 'pointer' }}
>
Masuk menggunakan email
</Link>
@@ -90,7 +142,12 @@ export default function Login() {
<Link
align="center"
underline="hover"
onClick={(event) => handlerChange(event, true)}
onClick={() => {
setEmailOrPhone('');
setLoginOrVerifyCode(false);
setEmailOrPhoneForm(true);
}}
sx={{ cursor: 'pointer' }}
>
Masuk menggunakan nomor handphone
</Link>

107
frontend/client-portal/src/pages/auth/VerifyCode.tsx
View File

@@ -1,107 +0,0 @@
import { useLocation, useNavigate } from 'react-router-dom';
// @mui
import { styled } from '@mui/material/styles';
import { Box, Card, Divider, IconButton, Grid, Link, Stack, Typography } from '@mui/material';
// components
import Page from '../../components/Page';
import Image from '../../components/Image';
import Iconify from '../../components/Iconify';
// sections
import { VerifyCodeForm } from '../../sections/auth/verify-code';
import { useEffect } from 'react';
// ----------------------------------------------------------------------
const RootStyle = styled('div')(({ theme }) => ({
[theme.breakpoints.up('md')]: {
display: 'flex',
},
minHeight: '100vh',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}));
const ContentStyle = styled(Card)(({ theme }) => ({
[theme.breakpoints.up('md')]: {
maxHeight: '600px',
maxWidth: '1000px',
},
}));
// ----------------------------------------------------------------------
export default function VerifyCode() {
const { state } = useLocation();
const navigate = useNavigate();
useEffect(() => {
if (state === null) {
navigate('/auth/login');
}
}, [state, navigate]);
return (
<Page title="Login">
<RootStyle>
<ContentStyle>
<Grid container>
<Grid item xs={6}>
<Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
</Grid>
<Grid item xs={6} sx={{ padding: 3, textAlign: 'center' }}>
<Stack direction="column" sx={{ mb: 5 }}>
<Stack direction="row" alignItems="center">
<IconButton
onClick={() =>
navigate('/auth/login', { state: { formPhone: state.formPhone } })
}
>
<Iconify
icon="heroicons-outline:arrow-narrow-left"
sx={{ marginRight: '10px' }}
/>
</IconButton>
<Typography variant="h4" gutterBottom>
Verifikasi OTP
</Typography>
</Stack>
<Box sx={{ flexGrow: 1 }}>
<Typography variant="body1" sx={{ color: 'text.secondary', textAlign: 'left' }}>
Masukkan kode OTP anda disini
</Typography>
</Box>
</Stack>
<VerifyCodeForm phoneOrEmail={state.phoneOrEmail} />
<Typography sx={{ marginTop: 5 }}>Tidak mendapatkan kode?</Typography>
<Link sx={{ marginTop: 1 }}>Kirim Ulang Kode OTP</Link>
<Divider sx={{ marginTop: 5 }}>Atau</Divider>
<Stack sx={{ marginTop: 5 }}>
{state.formPhone ? (
<Link
align="center"
underline="hover"
onClick={() => navigate('/auth/login', { state: { formPhone: false } })}
>
Masuk menggunakan email
</Link>
) : (
<Link
align="center"
underline="hover"
onClick={() => navigate('/auth/login', { state: { formPhone: true } })}
>
Masuk menggunakan nomor handphone
</Link>
)}
</Stack>
</Grid>
</Grid>
</ContentStyle>
</RootStyle>
</Page>
);
}

28
frontend/client-portal/src/routes/index.tsx
View File

@@ -37,16 +37,6 @@ export default function Router() {
</AuthProvider>
),
},
{
path: 'verify-code',
element: (
<AuthProvider>
<GuestGuard>
<VerifyCode />
</GuestGuard>
</AuthProvider>
),
},
],
},
{
@@ -66,6 +56,22 @@ export default function Router() {
},
],
},
{
path: 'user-profile/:id',
element: (
<AuthProvider>
<AuthGuard>
<DashboardLayout />
</AuthGuard>
</AuthProvider>
),
children: [
{
element: <AlarmCenterUserProfile />,
index: true,
},
],
},
{
path: '/alarm-center',
element: (
@@ -116,7 +122,6 @@ export default function Router() {
// Auth
const Login = Loadable(lazy(() => import('../pages/auth/Login')));
const VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode')));
// Dashboard
const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard')));
@@ -127,6 +132,7 @@ const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
const AlarmCenterServiceMonitoring = Loadable(
lazy(() => import('../pages/AlarmCenter/ServiceMonitoring'))
);
const AlarmCenterUserProfile = Loadable(lazy(() => import('../pages/AlarmCenter/UserProfile')));
// Claim Report
const ClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/Index')));

229
frontend/client-portal/src/sections/alarm-center/user-profile/CardBenefitSummary.tsx Normal file
View File

@@ -0,0 +1,229 @@
// mui
import { styled } from '@mui/material/styles';
import {
Card,
Typography,
Stack,
LinearProgress,
linearProgressClasses,
Grid,
} from '@mui/material';
// ----------------------------------------------------------------------
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
height: 10,
borderRadius: 6,
[`&.${linearProgressClasses.colorPrimary}`]: {
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
},
[`& .${linearProgressClasses.bar}`]: {
borderRadius: 6,
background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
},
}));
// ----------------------------------------------------------------------
export default function CardBenefitSummary() {
return (
<div style={{ marginTop: '1rem' }}>
<Typography padding={1} variant="subtitle2">
Benefit Summary
</Typography>
<Card>
<Grid container spacing={1} marginTop={1} sx={{ backgroundColor: '#F4F6F8', padding: 1 }}>
{/* Card 1 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Rawat Jalan
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 2 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Rawat Inap
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 3 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Manfaat Special
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 4 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Manfaat Special
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 5 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Perobatan Mata
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 6 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Perawatan Gigi
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 7 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Kehamilan
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 8 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Laboratorium
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 9 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Manfaat Farmasi
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
</Grid>
</Card>
</div>
);
}

97
frontend/client-portal/src/sections/alarm-center/user-profile/CardClaimHistory.tsx Normal file
View File

@@ -0,0 +1,97 @@
// mui
import {
Card,
Typography,
Stack,
TablePagination,
TableContainer,
Table,
TableHead,
TableRow,
TableCell,
TableBody,
} from '@mui/material';
// react
import { useState } from 'react';
// ----------------------------------------------------------------------
function createData(benefitType: string, submissionDate: string, status: string) {
return { benefitType, submissionDate, status };
}
const rows = [
createData('Rawat Jalan', '15-10-2022', 'Request'),
createData('Rawat Inap', '15-10-2022', 'Request'),
createData('Manfaat Special', '15-10-2022', 'Request'),
createData('Perobatan Mata', '15-10-2022', 'Request'),
createData('Perawatan Gigi', '15-10-2022', 'Request'),
createData('Kehamilan', '15-10-2022', 'Request'),
createData('Laboratorium', '15-10-2022', 'Request'),
createData('Manfaat Farmasi', '15-10-2022', 'Request'),
];
// ----------------------------------------------------------------------
export default function CardClaimHistory() {
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);
const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
setPage(newPage);
};
return (
<Card sx={{ padding: 2 }}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography variant="subtitle2">Claim History</Typography>
<TablePagination
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[]}
page={page}
onPageChange={handleChangePage}
sx={{
border: 'none',
'.MuiToolbar-root.MuiTablePagination-toolbar': {
height: '24px',
minHeight: '24px',
},
'.MuiTablePagination-actions .MuiButtonBase-root:nth-last-of-type': {
marginLeft: 2,
},
'.MuiTablePagination-actions .MuiButtonBase-root': { padding: 1 },
}}
/>
</Stack>
<Card>
<TableContainer>
<Table sx={{ minWidth: 650 }} size="small">
<TableHead>
<TableRow>
<TableCell>Benefit Type</TableCell>
<TableCell align="center">Submission Date</TableCell>
<TableCell align="center">Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{/* if you don't need to support IE11, you can replace the `stableSort` call with:
rows.sort(getComparator(order, orderBy)).slice() */}
{rows
// .sort(getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => (
<TableRow key={index}>
<TableCell>{row.benefitType}</TableCell>
<TableCell align="center">{row.submissionDate}</TableCell>
<TableCell align="center">{row.status}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Card>
</Card>
);
}

359
frontend/client-portal/src/sections/alarm-center/user-profile/CardFamilyInformation.tsx Normal file
View File

@@ -0,0 +1,359 @@
// mui
import { Button, Card, Stack, Typography, Grid, Switch } from '@mui/material';
// components
import Iconify from '../../../components/Iconify';
export default function CardFamilyInformation() {
return (
<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
sx={{ paddingY: 1, paddingX: 3 }}
>
<Typography variant="subtitle2">Beneficiary / Family</Typography>
<Button startIcon={<Iconify icon="ic:round-add" />}>Add Member</Button>
</Stack>
{/* Stack 2 */}
<Grid container maxHeight="307px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
{/* Card 1 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<img
width={24}
height={24}
src="/images/husband-user-profile.png"
alt="user-profile"
style={{ borderRadius: '50%' }}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Husband
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Octa Xavier
</Typography>
<Typography variant="body2" color="#757575">
14 Jan 1986
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
{/* Card 2 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<div
style={{
borderRadius: '50%',
width: '24px',
height: '24px',
backgroundColor: '#D9D9D9',
}}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Kid
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Celine Claudia
</Typography>
<Typography variant="body2" color="#757575">
15 Oct 2000
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
{/* Card 3 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<div
style={{
borderRadius: '50%',
width: '24px',
height: '24px',
backgroundColor: '#D9D9D9',
}}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Kid
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Celine Claudia
</Typography>
<Typography variant="body2" color="#757575">
15 Oct 2000
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
{/* Card 4 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<div
style={{
borderRadius: '50%',
width: '24px',
height: '24px',
backgroundColor: '#D9D9D9',
}}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Kid
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Celine Claudia
</Typography>
<Typography variant="body2" color="#757575">
15 Oct 2000
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
{/* Card 5 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<div
style={{
borderRadius: '50%',
width: '24px',
height: '24px',
backgroundColor: '#D9D9D9',
}}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Kid
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Celine Claudia
</Typography>
<Typography variant="body2" color="#757575">
15 Oct 2000
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
{/* Card 6 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<div
style={{
borderRadius: '50%',
width: '24px',
height: '24px',
backgroundColor: '#D9D9D9',
}}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Kid
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Celine Claudia
</Typography>
<Typography variant="body2" color="#757575">
15 Oct 2000
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
</Grid>
</Card>
);
}

147
frontend/client-portal/src/sections/alarm-center/user-profile/CardPersonalInformation.tsx Normal file
View File

@@ -0,0 +1,147 @@
// mui
import { Button, IconButton, Card, Stack, Typography } from '@mui/material';
import { Visibility as VisibilityIcon } from '@mui/icons-material';
// components
import Iconify from '../../../components/Iconify';
export default function CardPersonalInformation() {
return (
<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
sx={{ paddingY: 1, paddingX: 3 }}
>
<Typography variant="subtitle2">Informasi Pribadi</Typography>
<Button startIcon={<Iconify icon="heroicons:pencil-solid" />}>Edit Data</Button>
</Stack>
{/* Stack 2 */}
<Stack direction="row" spacing={2} paddingX={2}>
<div style={{ position: 'relative', flex: 'none', height: 'fit-content' }}>
<img
width={52}
height={52}
src="/images/user-profile.png"
alt="user-profile"
style={{ borderRadius: '50%' }}
/>
<IconButton
color="primary"
sx={{
position: 'absolute',
bottom: 0,
right: 0,
width: '20px',
height: '20px',
padding: '4px',
backgroundColor: 'rgba(255,255,255,0.9)',
}}
>
<Iconify icon="material-symbols:photo-camera" />
</IconButton>
</div>
<Stack direction="row" paddingY={1} spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '60%' }}>
<Typography variant="caption">Nama Lengkap</Typography>
<Typography variant="body2">Jessica Lie</Typography>
</Stack>
<Stack sx={{ width: '20%' }}>
<Typography variant="caption">Berat Badan</Typography>
<Typography variant="body2">40 kg</Typography>
</Stack>
<Stack sx={{ width: '20%' }}>
<Typography variant="caption">Tinggi Badan</Typography>
<Typography variant="body2">165 cm</Typography>
</Stack>
</Stack>
</Stack>
{/* Stack 3 */}
<Stack maxHeight="338px" paddingX={2} sx={{ overflowY: 'auto' }}>
{/* Stack 3.1 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Informasi Dasar</Typography>
<Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Tempat Lahir</Typography>
<Typography variant="body2">Jakarta</Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Tanggal Lahir</Typography>
<Typography variant="body2">15-05-1996</Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Jenis Kelamin</Typography>
<Typography variant="body2">Perempuan</Typography>
</Stack>
</Stack>
</Stack>
{/* Stack 3.2 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Informasi Kontak</Typography>
<Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Nomor Telpon</Typography>
<Typography variant="body2">081256788765</Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Email</Typography>
<Typography variant="body2">Jessica.lie@gmail.com</Typography>
</Stack>
</Stack>
<Stack>
<Typography variant="caption">Alamat</Typography>
<Typography variant="body2">
Jl. Kalimantan No.6, Rw. Mekar Jaya, Kec. Serpong, Kota Tangerang Selatan, Banten
15310
</Typography>
</Stack>
</Stack>
{/* Stack 3.3 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Identitas Diri</Typography>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={2}
sx={{ flex: '100%' }}
>
<Stack>
<Typography variant="caption">Nomor NIK</Typography>
<Typography variant="body2">081256788765</Typography>
</Stack>
<Stack>
<Button variant="contained" startIcon={<VisibilityIcon />}>
Lihat Foto
</Button>
</Stack>
</Stack>
</Stack>
{/* Stack 3.4 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Informasi Lainnya</Typography>
<Stack direction="row" justifyContent="space-between" spacing={2} sx={{ flex: '100%' }}>
<Stack>
<Typography variant="caption">Agama</Typography>
<Typography variant="body2">Kristen</Typography>
</Stack>
<Stack>
<Typography variant="caption">Status</Typography>
<Typography variant="body2">Menikah</Typography>
</Stack>
<Stack>
<Typography variant="caption">Pendidikan</Typography>
<Typography variant="body2">S1</Typography>
</Stack>
<Stack>
<Typography variant="caption">Pekerjaan</Typography>
<Typography variant="body2">Ibu Rumah Tangga</Typography>
</Stack>
</Stack>
</Stack>
</Stack>
</Card>
);
}

50
frontend/client-portal/src/sections/alarm-center/user-profile/CardPolicyNumber.tsx Normal file
View File

@@ -0,0 +1,50 @@
// mui
import { styled } from '@mui/material/styles';
import { Card, Typography, Stack, LinearProgress, linearProgressClasses } from '@mui/material';
import CardBenefitSummary from './CardBenefitSummary';
// ----------------------------------------------------------------------
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
height: 10,
borderRadius: 6,
[`&.${linearProgressClasses.colorPrimary}`]: {
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
},
[`& .${linearProgressClasses.bar}`]: {
borderRadius: 6,
background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
},
}));
// ----------------------------------------------------------------------
export default function CardPolicyNumber() {
return (
<Card sx={{ padding: 2 }}>
<Stack>
<Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
<Stack direction="row" spacing={1} alignItems="center">
<img width={52} height={52} src="/logo/logo-linksehat.png" alt="LinkSehat" />
<Stack spacing={1}>
<Typography variant="subtitle2">Policy Number</Typography>
<Typography variant="subtitle2">12345678910</Typography>
</Stack>
</Stack>
<Stack spacing={1} sx={{ width: '206.5px' }}>
<Typography variant="subtitle2">Yearly Limit</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
10.000.000 /{' '}
<Typography variant="body2" color="#757575" component="span">
10.000.000
</Typography>
</Typography>
</Stack>
</Stack>
{/* Benefit Summary */}
<CardBenefitSummary />
</Stack>
</Card>
);
}

32
frontend/client-portal/src/sections/auth/login/LoginEmailForm.tsx
View File

@@ -1,34 +1,33 @@
/* ----------------------------------- yup ---------------------------------- */
import * as Yup from 'yup';
import { useNavigate } from 'react-router-dom';
// form
/* ---------------------------------- form ---------------------------------- */
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
// @mui
/* ---------------------------------- @mui ---------------------------------- */
import { Stack, Alert } from '@mui/material';
import { LoadingButton } from '@mui/lab';
// hooks
/* ---------------------------------- hooks --------------------------------- */
import useAuth from '../../../hooks/useAuth';
import useIsMountedRef from '../../../hooks/useIsMountedRef';
// components
/* ------------------------------- components ------------------------------- */
import { FormProvider, RHFTextField } from '../../../components/hook-form';
// ----------------------------------------------------------------------
/* ---------------------------------- types --------------------------------- */
type LoginFormProps = {
setEmailOrPhone: Function;
setLoginOrVerifyCode: Function;
};
type FormValuesProps = {
email: string;
afterSubmit?: string;
};
interface Props {
formPhone: boolean;
}
/* -------------------------------------------------------------------------- */
// ----------------------------------------------------------------------
export default function LoginForm({ formPhone }: Props) {
export default function LoginForm({ setEmailOrPhone, setLoginOrVerifyCode }: LoginFormProps) {
const { login } = useAuth();
const navigate = useNavigate();
const isMountedRef = useIsMountedRef();
const LoginSchema = Yup.object().shape({
@@ -54,8 +53,9 @@ export default function LoginForm({ formPhone }: Props) {
const onSubmit = async (data: FormValuesProps) => {
try {
await login(data.email);
navigate('/auth/verify-code', { state: { phoneOrEmail: data.email, formPhone } });
setEmailOrPhone(data.email);
setLoginOrVerifyCode(true);
reset();
} catch (error: any) {
reset();

34
frontend/client-portal/src/sections/auth/login/LoginPhoneForm.tsx
View File

@@ -1,29 +1,34 @@
/* ----------------------------------- yup ---------------------------------- */
import * as Yup from 'yup';
import { useNavigate } from 'react-router-dom';
// form
/* ---------------------------------- form ---------------------------------- */
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
// @mui
/* ---------------------------------- @mui ---------------------------------- */
import { Stack, Alert, InputAdornment } from '@mui/material';
import { LoadingButton } from '@mui/lab';
// components
/* ------------------------------- components ------------------------------- */
import { FormProvider, RHFTextField } from '../../../components/hook-form';
/* ---------------------------------- hooks --------------------------------- */
import useAuth from '../../../hooks/useAuth';
import useIsMountedRef from '../../../hooks/useIsMountedRef';
// ----------------------------------------------------------------------
/* ---------------------------------- types --------------------------------- */
type LoginFormProps = {
setEmailOrPhone: Function;
setLoginOrVerifyCode: Function;
};
type FormValuesProps = {
phone: string;
afterSubmit?: string;
};
interface Props {
formPhone: boolean;
}
/* -------------------------------------------------------------------------- */
export default function LoginPhoneForm({ formPhone }: Props) {
export default function LoginPhoneForm({ setEmailOrPhone, setLoginOrVerifyCode }: LoginFormProps) {
const { login } = useAuth();
const navigate = useNavigate();
const isMountedRef = useIsMountedRef();
const LoginSchema = Yup.object().shape({
phone: Yup.string().required('Phone is required'),
@@ -48,10 +53,15 @@ export default function LoginPhoneForm({ formPhone }: Props) {
const onSubmit = async (data: FormValuesProps) => {
try {
await login(0 + data.phone);
navigate('/auth/verify-code', { state: { phoneOrEmail: 0 + data.phone, formPhone } });
setEmailOrPhone(0 + data.phone);
setLoginOrVerifyCode(true);
reset();
} catch (error: any) {
reset();
setError('afterSubmit', { ...error, message: error.response.data.message });
if (isMountedRef.current) {
setError('afterSubmit', { ...error, message: error.data.message });
}
}
};

91
frontend/client-portal/src/sections/auth/verify-code/VerifyCodeForm.tsx → frontend/client-portal/src/sections/auth/login/VerifyCodeForm.tsx
View File

@@ -1,17 +1,25 @@
/* ---------------------------------- @mui ---------------------------------- */
import { OutlinedInput, Stack } from '@mui/material';
/* ----------------------------------- yup ---------------------------------- */
import * as Yup from 'yup';
/* -------------------------------- snackbar -------------------------------- */
import { useSnackbar } from 'notistack';
import { useNavigate, useLocation } from 'react-router-dom';
/* ---------------------------------- react --------------------------------- */
import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';
// form
/* ---------------------------------- form ---------------------------------- */
import { useForm, Controller } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
// @mui
import { OutlinedInput, Stack } from '@mui/material';
/* ---------------------------------- hooks --------------------------------- */
import useAuth from '../../../hooks/useAuth';
// routes
// import { PATH_DASHBOARD } from '../../../routes/paths';
// ----------------------------------------------------------------------
/* ---------------------------------- types --------------------------------- */
type VerifyCodeFormProps = {
emailOrPhone: string;
setEmailOrPhoneForm: Function;
setLoginOrVerifyCode: Function;
};
type FormValuesProps = {
code1: string;
@@ -20,18 +28,25 @@ type FormValuesProps = {
code4: string;
};
type Props = {
phoneOrEmail: string;
};
type ValueNames = 'code1' | 'code2' | 'code3' | 'code4';
export default function VerifyCodeForm({ phoneOrEmail }: Props) {
type responseProps = {
status: string;
statusCode: number;
data: [];
message: string;
};
/* -------------------------------------------------------------------------- */
export default function VerifyCodeForm({
emailOrPhone,
setEmailOrPhoneForm,
setLoginOrVerifyCode,
}: VerifyCodeFormProps) {
const navigate = useNavigate();
const location = useLocation();
const { validateOtp } = useAuth();
const { enqueueSnackbar } = useSnackbar();
const { phone_or_email } = location.state;
const VerifyCodeSchema = Yup.object().shape({
code1: Yup.string().required('Code is required'),
@@ -47,13 +62,7 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
code4: '',
};
const {
watch,
control,
setValue,
handleSubmit,
formState: { isSubmitting, isValid },
} = useForm({
const { watch, control, setValue, handleSubmit } = useForm({
mode: 'onBlur',
resolver: yupResolver(VerifyCodeSchema),
defaultValues,
@@ -62,15 +71,35 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
const values = watch();
useEffect(() => {
console.log('phone number : ' + phone_or_email);
const handlePasteClipboard = (event: ClipboardEvent) => {
let data: string | string[] = event?.clipboardData?.getData('Text') || '';
data = data.split('');
[].forEach.call(document.querySelectorAll('#field-code'), (node: any, index) => {
node.value = data[index];
const fieldIndex = `code${index + 1}`;
setValue(fieldIndex as ValueNames, data[index]);
});
};
document.addEventListener('paste', handlePasteClipboard);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}, [setValue]);
const onSubmit = async (data: FormValuesProps) => {
try {
await new Promise((resolve) => setTimeout(resolve, 1000));
await validateOtp(phoneOrEmail, Object.values(data).join(''));
// @ts-ignore
const response: responseProps = await validateOtp(emailOrPhone, Object.values(data).join(''));
if (response.data.length === 0) {
return enqueueSnackbar(response.message, {
variant: 'error',
autoHideDuration: 4000,
preventDuplicate: true,
});
}
navigate('/dashboard');
enqueueSnackbar('Verify success!', { variant: 'success' });
} catch (error) {
@@ -78,18 +107,6 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
}
};
const handlePasteClipboard = (event: ClipboardEvent) => {
let data: string | string[] = event?.clipboardData?.getData('Text') || '';
data = data.split('');
[].forEach.call(document.querySelectorAll('#field-code'), (node: any, index) => {
node.value = data[index];
const fieldIndex = `code${index + 1}`;
setValue(fieldIndex as ValueNames, data[index]);
});
};
const handleChangeWithNextField = (
event: React.ChangeEvent<HTMLInputElement>,
handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void

3
frontend/client-portal/src/sections/auth/login/index.ts
View File

@@ -1,2 +1,3 @@
export { default as LoginEmailForm } from './LoginEmailForm';
export { default as LoginPhoneForm } from './LoginPhoneForm';
export { default as LoginPhoneForm } from './LoginPhoneForm';
export { default as VerifyCodeForm } from './VerifyCodeForm';

1
frontend/client-portal/src/sections/auth/verify-code/index.ts
View File

@@ -1 +0,0 @@
export { default as VerifyCodeForm } from './VerifyCodeForm';

67
frontend/client-portal/src/sections/claimreports/ClaimStatusCard.tsx
View File

@@ -1,67 +0,0 @@
// @mui
import { styled } from '@mui/material/styles';
import { Card, Typography, Stack } from '@mui/material';
// theme
import palette from '../../theme/palette';
// ----------------------------------------------------------------------
const RootStyle = styled(Card)(({ theme }) => ({
boxShadow: 'none',
padding: theme.spacing(2),
color: 'black',
backgroundColor: theme.palette.grey[200],
maxHeight: '240px',
}));
// ----------------------------------------------------------------------
interface ClaimStatusType {
name: string;
value: number;
color: string;
}
export default function ClaimStatusCard({ name, value, color }: ClaimStatusType) {
const listItems = [
{ name: 'Requested', value: 15, color: palette.dark.primary.dark },
{ name: 'Approval', value: 20, color: palette.dark.warning.dark },
{ name: 'Disbrusment', value: 20, color: palette.dark.success.dark },
{ name: 'Rejected', value: 20, color: palette.dark.error.dark },
];
return (
<RootStyle>
<Stack sx={{ mb: 1 }}>
<Typography variant="body2">Claim Status</Typography>
</Stack>
<Stack direction="row" spacing={2}>
{listItems.map(({ name, value, color }, key) => (
<Card
key={key}
sx={{
paddingX: 1,
borderRadius: 0.75,
borderColor: color,
borderStyle: 'solid',
borderWidth: '1px',
padding: 2,
flex: 1,
textAlign: 'center',
}}
>
<Typography component="p" variant="body2">
{name}
</Typography>
<Typography component="p" variant="h5" sx={{ marginTop: 2 }}>
{value}
</Typography>
<Typography component="p" variant="body2" sx={{ marginTop: 2 }}>
Cases
</Typography>
</Card>
))}
</Stack>
</RootStyle>
);
}

313
frontend/client-portal/src/sections/claimreports/ListTable.tsx
View File

@@ -1,313 +0,0 @@
// @mui
import {
Autocomplete,
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,
TablePagination,
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 { Member } from '../../@types/member';
import Iconify from '../../components/Iconify';
export default function ListTable() {
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<HTMLInputElement>(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 (
<form onSubmit={handleSearchSubmit} style={{ flex: '1' }}>
<TextField
id="search-input"
ref={searchInput}
label="Search"
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
/>
</form>
);
}
function ImportForm(props: any) {
// IMPORT
// Create Button Menu
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const createMenu = Boolean(anchorEl);
const importForm = useRef<HTMLInputElement>(null);
const [currentImportFileName, setCurrentImportFileName] = useState(null);
const handleImportChange = (event: any) => {
if (event.target.files[0]) {
setCurrentImportFileName(event.target.files[0].name);
} else {
setCurrentImportFileName(null);
}
};
const options = ['All', 'Option 2'];
const [value, setValue] = React.useState<string | null>(options[0]);
const [inputValue, setInputValue] = React.useState('');
return (
<div>
<Stack direction={'row'} justifyContent="space-between" spacing={2} sx={{ p: 2 }}>
{/* Filter Division */}
<Autocomplete
value={value}
onChange={(event: any, newValue: string | null) => {
setValue(newValue);
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
id="controllable-states-demo"
options={options}
sx={{ minWidth: 240 }}
renderInput={(params) => <TextField {...params} label="Division" />}
/>
{/* Search */}
<SearchInput onSearch={applyFilter} />
{/* Button Import */}
<Button
id="import-button"
variant="outlined"
startIcon={<Iconify icon="eva:download-fill" />}
sx={{ p: 1.8, minWidth: '104px' }}
// onClick={() => {}}
>
Import
</Button>
{/* <input
type="file"
id="file"
ref={importForm}
style={{ display: 'none' }}
onChange={handleImportChange}
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
/> */}
{/* Button Add Task */}
<Button variant="contained" startIcon={<AddIcon />} sx={{ p: 1.8, minWidth: '142px' }}>
Submit Claim
</Button>
</Stack>
</div>
);
}
// 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<typeof createData> }) {
// const { row } = props;
// const [open, setOpen] = React.useState(true);
// return (
// <React.Fragment>
// <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
// <TableCell>
// <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
// {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
// </IconButton>
// </TableCell>
// <TableCell align="left">{row.member_id}</TableCell>
// <TableCell align="left">{row.payor_id}</TableCell>
// <TableCell align="left">{row.name}</TableCell>
// <TableCell align="left">{row.nik}</TableCell>
// <TableCell align="left">{row.nric}</TableCell>
// <TableCell align="right">
// <Button variant="outlined" color="success" size="small">
// Active
// </Button>
// </TableCell>
// {/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
// </TableRow>
// {/* COLLAPSIBLE ROW */}
// <TableRow>
// <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
// <Collapse in={open} timeout="auto" unmountOnExit>
// <Box sx={{ borderBottom: 1 }}>
// <Typography variant="body2" gutterBottom component="div">
// <Grid></Grid>
// </Typography>
// </Box>
// </Collapse>
// </TableCell>
// </TableRow>
// </React.Fragment>
// );
// }
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
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 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 });
};
useEffect(() => {
loadDataTableData();
}, []);
return (
<Card>
<ImportForm />
{/* The Main Table */}
<TableContainer component={Stack} sx={{ padding: 2, borderRadius: 1 }}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow sx={{ backgroundColor: '#F4F6F8' }}>
<TableCell style={headStyle} align="left">
MemberID
</TableCell>
<TableCell style={headStyle} align="left">
Name
</TableCell>
<TableCell style={headStyle} align="left">
Divisi
</TableCell>
<TableCell style={headStyle} align="left">
Limit
</TableCell>
<TableCell style={headStyle} align="right" width={100}>
Status
</TableCell>
<TableCell style={headStyle} align="right" width={100}>
Action
</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
No Data Found
</TableCell>
</TableRow>
</TableBody>
) : dataTableData.data.length === 0 ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
No Data
</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{/* {dataTableData.data.map((row) => (
<Row key={row.id} row={row} />
))} */}
Testing
</TableBody>
)}
</Table>
</TableContainer>
{/* <TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/> */}
</Card>
);
}

23
frontend/client-portal/src/sections/dashboard/CardBalance.tsx
View File

@@ -16,17 +16,18 @@ import { useState } from 'react';
import { fCurrency } from '../../utils/formatNumber';
// <sections></sections>
import DialogTopUpLimit from './DialogTopUpLimit';
import DialogClaimSubmitMember from './DialogClaimSubmitMember';
// ----------------------------------------------------------------------
type DataContent = {
info: string;
date: string;
time: string;
type DataMembers = {
name: string;
memberId: string;
saldo: string;
};
type NotificationProps = {
data?: DataContent[];
data?: { members: DataMembers[] };
};
// ----------------------------------------------------------------------
@@ -67,7 +68,7 @@ export default function CardBalance({ data }: NotificationProps) {
const clickHandler = (isDialog: string) => {
switch (isDialog) {
case 'submitClaim':
setDialogTitle('Notification');
setDialogTitle('Add Claim');
setIsDialog(isDialog);
setOpenDialog(true);
break;
@@ -140,14 +141,14 @@ export default function CardBalance({ data }: NotificationProps) {
</Stack>
</>
{/* {isDialog === 'submitClaim' && (
<DialogNotification
{isDialog === 'submitClaim' && (
<DialogClaimSubmitMember
openDialog={openDialog}
setOpenDialog={setOpenDialog}
title={dialogTitle}
data={data}
title={{ name: dialogTitle }}
data={data?.members}
/>
)} */}
)}
{isDialog === 'topUpLimit' && (
<DialogTopUpLimit

191
frontend/client-portal/src/sections/dashboard/DialogClaimSubmitMember.tsx Normal file
View File

@@ -0,0 +1,191 @@
// @mui
import { styled } from '@mui/material/styles';
import {
Typography,
LinearProgress,
linearProgressClasses,
Stack,
TextField,
InputAdornment,
Card,
IconButton,
} from '@mui/material';
import { Search as SearchIcon } from '@mui/icons-material';
// components
import MuiDialog from '../../components/MuiDialog';
import Iconify from '../../components/Iconify';
// React
import { ReactElement, useRef, useState } from 'react';
import DialogClaimSubmitMemberSubmission from './DialogClaimSubmitMemberSubmission';
// ----------------------------------------------------------------------
type DataContent = {
name: string;
memberId: string;
saldo: string;
};
type MuiDialogProps = {
title?: {
name?: string;
icon?: string;
};
openDialog: boolean;
setOpenDialog: Function;
content?: ReactElement;
data?: DataContent[];
};
// ----------------------------------------------------------------------
function createData(name: string, memberId: string, saldo: string) {
return { name, memberId, saldo };
}
const rows = [
createData('Alexandra tjoa tri atmaja kurniadi', '0122122', '10.000.000'),
createData('Marina kurniadi', '0122123', '10.000.000'),
createData('Tjoa Indri', '0122124', '10.000.000'),
createData('Atmaja Tirta', '0122125', '10.000.000'),
createData('Alexandra kurniadi', '0122126', '10.000.000'),
];
// ----------------------------------------------------------------------
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
height: 10,
borderRadius: 6,
[`&.${linearProgressClasses.colorPrimary}`]: {
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
},
[`& .${linearProgressClasses.bar}`]: {
borderRadius: 6,
background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
},
}));
// ----------------------------------------------------------------------
const DialogClaimSubmitMember = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
/* --------------------------------- Search --------------------------------- */
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState('');
const [dataMemberClaim, setDataMemberClaim] = useState({
name: '',
memberId: '',
saldo: '',
});
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
};
/* -------------------------------------------------------------------------- */
/* ---------------------------- Get Current Date ---------------------------- */
const current = new Date();
const date = `${current.getDate()} / ${current.getMonth() + 1} / ${current.getFullYear()}`;
/* -------------------------------------------------------------------------- */
/* ------------------------------ Icon On Click ----------------------------- */
const [openDialogClaimMember, setOpenDialogMemberClaim] = useState(false);
const clickHandler = (name: string, memberId: string, saldo: string) => {
setDataMemberClaim({ name: name, memberId: memberId, saldo: saldo });
setOpenDialogMemberClaim(true);
};
/* -------------------------------------------------------------------------- */
const getContent = () => (
<Stack>
<Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
<Typography variant="subtitle1">Pilih Karyawan</Typography>
<Stack sx={{ color: '#757575' }}>
<Typography variant="caption">Submission date</Typography>
<Typography variant="caption">{date}</Typography>
</Stack>
</Stack>
<TextField
id="search-input"
ref={searchInput}
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
placeholder="Cari nama atau member ID disini..."
sx={{ marginTop: 2 }}
/>
<Stack marginTop={2} spacing={1}>
{rows.map((row, key) => (
<Card key={key} sx={{ paddingY: 1, paddingX: 2 }}>
<Stack direction="row" alignItems="center" spacing={2}>
<img
width={40}
height={40}
src="/images/member.png"
alt="user-profile"
style={{ borderRadius: '50%' }}
/>
<Stack sx={{ flex: '45%' }}>
<Typography variant="subtitle1">{row.name}</Typography>
<Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
Member ID : {row.memberId}
</Typography>
</Stack>
<Stack spacing={1} paddingY={1}>
<Typography color="#0A0A0A" variant="caption">
Total Limit
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
{row.saldo} /{' '}
<Typography variant="body2" color="#757575" component="span">
10.000.000
</Typography>
</Typography>
</Stack>
<IconButton onClick={() => clickHandler(row.name, row.memberId, row.saldo)}>
<Iconify icon="ic:round-chevron-right" />
</IconButton>
</Stack>
</Card>
))}
</Stack>
</Stack>
);
return (
<>
<MuiDialog
title={title}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="sm"
/>
<DialogClaimSubmitMemberSubmission
title={title}
openDialog={openDialogClaimMember}
setOpenDialog={setOpenDialogMemberClaim}
data={dataMemberClaim}
/>
</>
);
};
export default DialogClaimSubmitMember;

352
frontend/client-portal/src/sections/dashboard/DialogClaimSubmitMemberSubmission.tsx Normal file
View File

@@ -0,0 +1,352 @@
// @mui
import { styled } from '@mui/material/styles';
import {
Typography,
LinearProgress,
linearProgressClasses,
Stack,
Card,
Button,
Link,
Switch,
SwitchProps,
FormControlLabel,
} from '@mui/material';
import { Add as AddIcon } from '@mui/icons-material';
// components
import MuiDialog from '../../components/MuiDialog';
import Iconify from '../../components/Iconify';
import { FormProvider } from '../../components/hook-form';
// React
import { ReactElement, useEffect, useRef, useState } from 'react';
// yup
import * as Yup from 'yup';
// form
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { LoadingButton } from '@mui/lab';
// ----------------------------------------------------------------------
type DataContent = {
name: string;
memberId: string;
saldo: string;
};
type MuiDialogProps = {
title?: {
name?: string;
icon?: string;
};
openDialog: boolean;
setOpenDialog: Function;
content?: ReactElement;
data?: DataContent;
};
// ----------------------------------------------------------------------
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
height: 10,
borderRadius: 6,
[`&.${linearProgressClasses.colorPrimary}`]: {
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
},
[`& .${linearProgressClasses.bar}`]: {
borderRadius: 6,
background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
},
}));
// ----------------------------------------------------------------------
const DialogClaimSubmitMemberSubmission = ({
title,
openDialog,
setOpenDialog,
data,
}: MuiDialogProps) => {
/* --------------------------------- Search --------------------------------- */
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState('');
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
};
/* -------------------------------------------------------------------------- */
/* ---------------------------- Get Current Date ---------------------------- */
const current = new Date();
const date = `${current.getDate()} / ${current.getMonth() + 1} / ${current.getFullYear()}`;
/* -------------------------------------------------------------------------- */
/* ------------------------------- Form Submit ------------------------------ */
type FormValuesProps = {
topup: string;
};
const TopUpSchema = Yup.object().shape({
topup: Yup.string(),
});
const defaultValues = {
topup: '',
};
const methods = useForm<FormValuesProps>({
resolver: yupResolver(TopUpSchema),
defaultValues,
});
const {
reset,
handleSubmit,
formState: { isSubmitting },
} = methods;
useEffect(() => {
if (openDialog === false) {
reset();
}
}, [openDialog, reset]);
const onSubmit = async (data: FormValuesProps) => {
reset();
};
/* -------------------------------------------------------------------------- */
/* ---------------------------- Ios Switch Style ---------------------------- */
const IosSwitch = styled((props: SwitchProps) => (
<Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
))(({ theme }) => ({
width: 28,
height: 16,
padding: 0,
marginRight: '10px',
'& .MuiSwitch-switchBase': {
padding: 0,
margin: 2,
transitionDuration: '300ms',
'&.Mui-checked': {
transform: 'translateX(12px)',
color: '#fff',
'& + .MuiSwitch-track': {
opacity: 1,
border: 0,
},
'&.Mui-disabled + .MuiSwitch-track': {
opacity: 0.5,
},
},
'&.Mui-focusVisible .MuiSwitch-thumb': {
color: '#33cf4d',
border: '6px solid #fff',
},
'&.Mui-disabled .MuiSwitch-thumb': {
color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
},
'&.Mui-disabled + .MuiSwitch-track': {
opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
},
},
'& .MuiSwitch-thumb': {
boxSizing: 'border-box',
width: 12,
height: 12,
},
'& .MuiSwitch-track': {
borderRadius: 26 / 2,
opacity: 1,
transition: theme.transitions.create(['background-color'], {
duration: 500,
}),
},
}));
/* -------------------------------------------------------------------------- */
const getContent = () => (
<Stack>
<Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
<Typography variant="subtitle1">Claim Submission</Typography>
<Stack sx={{ color: '#757575' }}>
<Typography variant="caption">Submission date</Typography>
<Typography variant="caption">{date}</Typography>
</Stack>
</Stack>
<Card sx={{ paddingY: 1, paddingX: 2, marginTop: 2, backgroundColor: '#F4F6F8' }}>
<Stack direction="row" alignItems="center" spacing={2}>
<img
width={40}
height={40}
src="/images/member.png"
alt="user-profile"
style={{ borderRadius: '50%' }}
/>
<Stack sx={{ flex: '45%' }}>
<Typography variant="subtitle1">{data && data.name}</Typography>
<Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
Member ID : {data && data.memberId}
</Typography>
</Stack>
</Stack>
</Card>
<Card sx={{ paddingY: 1, paddingX: 2, marginTop: 2 }}>
<Stack spacing={1} paddingY={1}>
<Stack direction="row" justifyContent="space-between">
<Typography color="#0A0A0A" variant="caption">
Total Limit
</Typography>
<Link variant="caption" textAlign="center" href="">
Details Benefits <Iconify icon="ic:round-chevron-right" />
</Link>
</Stack>
<BorderLinearProgress variant="determinate" value={100} />
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
{data && data.saldo} /{' '}
<Typography variant="body2" color="#757575" component="span">
10.000.000
</Typography>
</Typography>
</Stack>
</Card>
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
{/* Invoice */}
<Stack marginTop={2} spacing={1}>
<Stack>
<Typography variant="subtitle2">Real Invoice</Typography>
<Typography color="#9E9E9E" variant="caption">
Real invoice required
</Typography>
</Stack>
<Card>
<Button
variant="outlined"
startIcon={<AddIcon />}
component="label"
sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
>
Add Invoice
<input name="invoice" hidden accept="image/*" multiple type="file" />
</Button>
</Card>
</Stack>
{/* Prescription */}
<Stack marginTop={2} spacing={1}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Stack>
<Typography variant="subtitle2">
Doctor's Prescription and Another Documents
</Typography>
<Typography color="#9E9E9E" variant="caption">
Doctor's Prescription required
</Typography>
</Stack>
<Stack
direction="row"
padding={1}
alignItems="center"
sx={{
backgroundColor: 'white',
border: '1px solid #E0E0E0',
borderRadius: '6px',
height: 32,
}}
>
<IosSwitch defaultChecked />
<Typography color="#404040" variant="body2">
Yes
</Typography>
</Stack>
</Stack>
<Card>
<Button
variant="outlined"
startIcon={<AddIcon />}
component="label"
sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
>
Add Prescription
<input name="invoice" hidden accept="image/*" multiple type="file" />
</Button>
</Card>
</Stack>
{/* Laboratory */}
<Stack marginTop={2} spacing={1}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Stack>
<Typography variant="subtitle2">
Doctor's Prescription and Another Documents
</Typography>
<Typography color="#9E9E9E" variant="caption">
Doctor's Prescription required
</Typography>
</Stack>
<Stack
direction="row"
padding={1}
alignItems="center"
sx={{
backgroundColor: 'white',
border: '1px solid #E0E0E0',
borderRadius: '6px',
height: 32,
}}
>
<IosSwitch defaultChecked />
<Typography color="#404040" variant="body2">
Yes
</Typography>
</Stack>
</Stack>
<Card>
<Button
variant="outlined"
startIcon={<AddIcon />}
component="label"
sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
>
Add Result
<input name="invoice" hidden accept="image/*" multiple type="file" />
</Button>
</Card>
</Stack>
<Stack marginTop={1}>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
sx={{ marginTop: 2 }}
>
Ajukan Permintaan
</LoadingButton>
</Stack>
</FormProvider>
</Stack>
);
return (
<>
<MuiDialog
title={title}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="sm"
/>
</>
);
};
export default DialogClaimSubmitMemberSubmission;

19
frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx
View File

@@ -52,7 +52,7 @@ const testData = {
totalMembers: 50,
totalCases: 100,
totalPersen: 75,
myLimit: '375.000.000',
myLimit: 375000000,
totalLimit: 500000000,
};
@@ -75,14 +75,14 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
const [isDisabledButton, setIsDisabledButton] = useState(true);
const TopUpSchema = Yup.object().shape({
topup: Yup.string()
/*
// @ts-ignore */
.test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
topup: Yup.number(),
// /*
// // @ts-ignore */
// .test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
});
const defaultValues = {
topup: '0',
topup: 0,
};
const methods = useForm<FormValuesProps>({
@@ -109,7 +109,8 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
const onCheckHandler = (data: FormValuesProps) => {
setIsDisabledCheckbox(!isDisabledCheckbox);
setValue('topup', '5000000');
setIsDisabledButton(false);
setValue('topup', testData.totalLimit - testData.myLimit);
};
const onTopupHandler = (value: string) => {
@@ -175,7 +176,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
<FormControlLabel
sx={{ typography: 'caption' }}
control={<Checkbox />}
label={'Max ' + fCurrency(5000000)}
label={'Max ' + fCurrency(testData.totalLimit - testData.myLimit)}
onChange={handleSubmit(onCheckHandler)}
/>
@@ -188,7 +189,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
sx={{ marginTop: 2 }}
disabled={isDisabledButton}
>
Login
Ajukan Permintaan
</LoadingButton>
</FormProvider>
</Stack>

361
frontend/client-portal/src/sections/dashboard/TableList.tsx Executable file
View File

@@ -0,0 +1,361 @@
/* ---------------------------------- @mui ---------------------------------- */
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Button,
TableSortLabel,
Box,
IconButton,
Card,
Grid,
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';
/* ---------------------------------- axios --------------------------------- */
import axios from 'axios';
/* ---------------------------------- react --------------------------------- */
import { useEffect, useState } from 'react';
/* -------------------------------- component ------------------------------- */
import Iconify from '../../components/Iconify';
import BaseTablePagination from '../../components/BaseTablePagination';
/* ---------------------------------- theme --------------------------------- */
import palette from '../../theme/palette';
import { useSearchParams } 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 = {
name: string;
member_id: string;
division: string;
limit: string;
status: string;
};
type Order = 'asc' | 'desc';
interface HeadCell {
id: string;
align: string;
label: string;
isSort: boolean;
}
interface EnhancedTableProps {
onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
order: Order;
orderBy: string;
}
/* -------------------------------------------------------------------------- */
/* -------------------------- enchanced table head -------------------------- */
const headCells: readonly HeadCell[] = [
{
id: 'member_id',
align: 'left',
label: 'Member ID',
isSort: true,
},
{
id: 'name',
align: 'center',
label: 'Name',
isSort: true,
},
{
id: 'division',
align: 'center',
label: 'Divisi',
isSort: true,
},
{
id: 'limit',
align: 'center',
label: 'Limit',
isSort: true,
},
{
id: 'status',
align: 'center',
label: 'Status',
isSort: true,
},
];
function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps) {
const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
sortDirection={orderBy === headCell.id ? order : false}
// @ts-ignore
align={headCell.align}
sx={{ padding: 2 }}
>
{headCell.isSort ? (
<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>
) : (
headCell.label
)}
</TableCell>
))}
<TableCell align="center">{''}</TableCell>
</TableRow>
</TableHead>
);
}
/* -------------------------------------------------------------------------- */
export default function TableList() {
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState('name');
const [customSearchParams, setCustomSearchParams] = useSearchParams();
const [isLoading, setIsLoading] = useState(true);
const [dataTable, setDataTable] = useState([]);
const [dataDivision, setDataDivision] = useState([]);
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [appliedParams, setAppliedParams] = useState({});
const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
current_page: 0,
from: 0,
last_page: 0,
links: [],
path: '',
per_page: 0,
to: 0,
total: 0,
});
/* ------------------------------- handle sort ------------------------------ */
const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
const params = Object.fromEntries([
...customSearchParams.entries(),
['order', isAsc ? 'desc' : 'asc'],
['orderBy', property],
]);
setAppliedParams(params);
};
/* -------------------------------------------------------------------------- */
/* ------------------------------ Search field ------------------------------ */
const [searchText, setSearchText] = useState('');
const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchText(event.target.value);
};
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
setIsLoading(true);
const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
await new Promise((resolve) => setTimeout(resolve, 500));
setAppliedParams(params);
setIsLoading(false);
};
/* -------------------------------------------------------------------------- */
/* ---------------------------- table pagination ---------------------------- */
/* ------------------------ button change pagination ------------------------ */
const onPageChangeHandle = async (
event: React.MouseEvent<HTMLButtonElement> | null,
newPage: number
) => {
setIsLoading(true);
const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
setPage(newPage);
await new Promise((resolve) => setTimeout(resolve, 500));
setAppliedParams(params);
setIsLoading(false);
// setCustomSearchParams.set('page', newPage + 1);
};
/* -------------------------------------------------------------------------- */
/* --------------------------- row page per limit --------------------------- */
const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
setIsLoading(true);
setPage(0);
const params = Object.fromEntries([
...customSearchParams.entries(),
['per_page', parseInt(event.target.value, 10)],
]);
setRowsPerPage(parseInt(event.target.value, 10));
await new Promise((resolve) => setTimeout(resolve, 500));
setAppliedParams(params);
setIsLoading(false);
};
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
useEffect(() => {
(async () => {
setIsLoading(true);
const params =
Object.keys(appliedParams).length !== 0
? appliedParams
: Object.fromEntries([
...customSearchParams.entries(),
['order', order],
['orderBy', orderBy],
]);
const response = await axios.get('http://localhost:8001/api/dashboard', {
params: params,
});
const division = await axios.get('http://localhost:8001/api/division');
setDataDivision(division.data);
setCustomSearchParams(params);
setDataTable(response.data.data);
setPaginationTable(response.data.meta);
setRowsPerPage(response.data.meta.per_page);
setIsLoading(false);
})();
}, [appliedParams, customSearchParams, order, orderBy, setCustomSearchParams]);
return (
<Card>
<Grid container>
{/* Field 1 */}
<Grid item xs={12} paddingX="24px" paddingY="20px">
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
<TextField
id="search-input"
label="Search"
variant="outlined"
fullWidth
onChange={handleSearch}
value={searchText}
/>
</form>
</Grid>
{/* End Field 1 */}
{/* Field 2 */}
<Grid item xs={12}>
<TableContainer component={Paper}>
<Table aria-label="collapsible table" size="small">
<EnhancedTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
/>
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={6} align="center">
Loading . . .
</TableCell>
</TableRow>
) : dataTable.length >= 1 ? (
dataTable.map((row: DataTableProps, index) => (
<TableRow key={index}>
<TableCell align="left">{row.member_id}</TableCell>
<TableCell align="center">{row.name}</TableCell>
<TableCell align="center">{row.division}</TableCell>
<TableCell align="center">{row.limit}</TableCell>
<TableCell align="center">
{row.status.toLowerCase() === 'active' ? (
<Button
sx={{
backgroundColor: 'rgba(84, 214, 44, 0.16)',
color: palette.dark.success.dark,
paddingY: 0,
'&:hover': {
backgroundColor: 'rgba(84, 214, 44, 0.32)',
color: palette.dark.success.darker,
},
}}
>
{row.status}
</Button>
) : (
<Button
sx={{
backgroundColor: 'rgba(255, 72, 66, 0.16)',
color: palette.dark.error.dark,
paddingY: 0,
'&:hover': {
backgroundColor: 'rgba(255, 72, 66, 0.32)',
color: palette.dark.error.darker,
},
}}
>
{row.status}
</Button>
)}
</TableCell>
<TableCell align="right">
<IconButton>
<Iconify icon="ic:baseline-more-vert" />
</IconButton>
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={6} align="center">
No Data Found
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
{/* Pagination */}
<BaseTablePagination
count={paginationTable.total}
onPageChange={onPageChangeHandle}
page={page}
rowsPerPage={rowsPerPage}
onRowsPerPageChange={onRowsPerPageChangeHandle}
/>
</Grid>
{/* End Field 2 */}
</Grid>
</Card>
);
}

10
frontend/client-portal/src/theme/overrides/Table.ts
View File

@@ -4,9 +4,19 @@ import { Theme } from '@mui/material/styles';
export default function Table(theme: Theme) {
return {
MuiTableHead: {
styleOverrides: {
root: {
'.MuiTableRow-root': {
borderBottom: 'none',
},
},
},
},
MuiTableRow: {
styleOverrides: {
root: {
borderBottom: '1px solid rgba(241, 243, 244, 1)',
'&.Mui-selected': {
backgroundColor: theme.palette.action.selected,
'&:hover': {

6794
frontend/client-portal/yarn.lock
View File

File diff suppressed because it is too large Load Diff

297
frontend/dashboard/src/pages/Corporates/Index.tsx
View File

@@ -1,5 +1,30 @@
// @mui
import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Stack } from '@mui/material';
import {
Box,
Button,
Card,
Collapse,
Container,
FormControl,
Grid,
IconButton,
InputLabel,
MenuItem,
OutlinedInput,
Paper,
Select,
SelectChangeEvent,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Typography,
Badge,
Stack,
} from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import PublishIcon from '@mui/icons-material/Publish';
@@ -10,7 +35,7 @@ import useSettings from '../../hooks/useSettings';
import Page from '../../components/Page';
import axios from '../../utils/axios';
import useAuth from '../../hooks/useAuth';
import { Link , NavLink as RouterLink, useSearchParams } from 'react-router-dom';
import { Link, NavLink as RouterLink, useSearchParams } from 'react-router-dom';
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
import { Theme, useTheme } from '@mui/material/styles';
import { Corporate } from '../../@types/corporates';
@@ -25,10 +50,10 @@ export default function Corporates() {
const [searchParams, setSearchParams] = useSearchParams();
// Called on every row to map the data to the columns
function createData( corporate: Corporate ): Corporate {
function createData(corporate: Corporate): Corporate {
return {
...corporate,
}
};
}
// Dummy Default Data
@@ -36,19 +61,19 @@ export default function Corporates() {
const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: "",
first_page_url: "",
path: '',
first_page_url: '',
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
last_page_url: '',
next_page_url: '',
prev_page_url: '',
per_page: 10,
from: 0,
to: 0,
total: 0
total: 0,
});
const loadDataTableData = async (appliedFilter : any | null = null) => {
const loadDataTableData = async (appliedFilter: any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/corporates', { params: filter });
@@ -56,31 +81,28 @@ export default function Corporates() {
setDataTableLoading(false);
setDataTableData(response.data);
}
};
const applyFilter = async (searchFilter: any) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
await loadDataTableData({ search: searchFilter });
setSearchParams({ search: searchFilter });
};
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
const handlePageChange = (event: ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
};
useEffect(() => {
loadDataTableData();
}, [])
}, []);
const headStyle = {
fontWeight: 'bold',
};
// FILTER SELECT
// FILTER SELECT
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
@@ -92,13 +114,7 @@ export default function Corporates() {
},
};
const names = [
'PLAN001',
'PLAN002',
'PLAN003',
'PLAN004',
'PLAN005',
];
const names = ['PLAN001', 'PLAN002', 'PLAN003', 'PLAN004', 'PLAN005'];
function getStyles(name: string, personName: string[], theme: Theme) {
return {
fontWeight:
@@ -107,7 +123,7 @@ export default function Corporates() {
: theme.typography.fontWeightMedium,
};
}
const theme = useTheme();
const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
@@ -117,7 +133,7 @@ export default function Corporates() {
} = event;
setPlanIdFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
typeof value === 'string' ? value.split(',') : value
);
};
@@ -128,37 +144,45 @@ export default function Corporates() {
} = event;
setStatusFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
typeof value === 'string' ? value.split(',') : value
);
};
// END FILTER SELECT
// Component Search Input
function SearchInput(props: any) {
// SEARCH
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState("");
const [searchText, setSearchText] = useState('');
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? ''
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
}
};
const handleSubmit = (event: any) => {
event.preventDefault();
props.onSearch(searchText); // Trigger to Parent
}
};
useEffect(() => {
useEffect(() => {
// console.log('Search Input: useEffect')
setSearchText(searchParams.get('search') ?? '');
}, [searchParams])
}, [searchParams]);
return (
<form onSubmit={handleSubmit} style={{ width: '100%' }}>
<Stack direction={'row'} spacing={2} sx={{ mb: 2 }}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
<TextField
id="search-input"
ref={searchInput}
label="Search"
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
/>
{/* <Grid item>
<TextField id="outlined-basic" label="Search" variant="outlined" sx={{ width: 400 }}/>
</Grid>
@@ -214,17 +238,21 @@ export default function Corporates() {
</Grid> */}
{/* <Grid item> */}
{/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
{/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
<Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
Import
</Button> */}
<Link to={"/corporates/create"}>
<Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
</Link>
<Link to={'/corporates/create'}>
<Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }}>
Create
</Button>
</Link>
{/* </Grid> */}
</Stack>
<Button type='submit' sx={{ display: 'none' }}>Search</Button>
<Button type="submit" sx={{ display: 'none' }}>
Search
</Button>
</form>
);
}
@@ -236,50 +264,80 @@ export default function Corporates() {
const [open, setOpen] = React.useState(false);
const handleActivate = (model: any, status: string) => {
axios.put(`/corporates/${row.id}/activation`, {
// service_code: service.service_code,
active: status == 'active'
})
.then((res) => {
setDataTableData({
...dataTableData,
data: dataTableData.data.map((model) => {
let updatedModel = model
if (row.id == model.id) {
updatedModel.active = res.data.corporate.active
}
return updatedModel
})
axios
.put(`/corporates/${row.id}/activation`, {
// service_code: service.service_code,
active: status == 'active',
})
})
.catch((error) => {
// console.log('asdasd', error.response.data.message)
enqueueSnackbar(error.response.data.message ?? error.message ?? 'Failed Processing Request', { variant: 'error' });
})
}
.then((res) => {
setDataTableData({
...dataTableData,
data: dataTableData.data.map((model) => {
let updatedModel = model;
if (row.id == model.id) {
updatedModel.active = res.data.corporate.active;
}
return updatedModel;
}),
});
})
.catch((error) => {
// console.log('asdasd', error.response.data.message)
enqueueSnackbar(
error.response.data.message ?? error.message ?? 'Failed Processing Request',
{ variant: 'error' }
);
});
};
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">
{( row.active == 1 && <Button variant="outlined" color="success" size="small" onClick={() => { handleActivate(row, 'inactive') }}>Active</Button> )}
{( row.active != 1 && <Button variant="outlined" color="error" size="small" onClick={() => { handleActivate(row, 'active') }}>Inactive</Button> )}
{row.active == 1 && (
<Button
variant="outlined"
color="success"
size="small"
onClick={() => {
handleActivate(row, 'inactive');
}}
>
Active
</Button>
)}
{row.active != 1 && (
<Button
variant="outlined"
color="error"
size="small"
onClick={() => {
handleActivate(row, 'active');
}}
>
Inactive
</Button>
)}
</TableCell>
<TableCell align="right">
<Stack direction="row" justifyContent="flex-end" spacing={1}>
<Link to={"/corporates/" + row.id + "/edit"}><Button variant="outlined" color="primary" size="small">Edit</Button></ Link>
<Link to={"/corporates/" + row.id + ""}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
<Link to={'/corporates/' + row.id + '/edit'}>
<Button variant="outlined" color="primary" size="small">
Edit
</Button>
</Link>
<Link to={'/corporates/' + row.id + ''}>
<Button variant="outlined" color="primary" size="small">
Config
</Button>
</Link>
</Stack>
</TableCell>
</TableRow>
@@ -335,7 +393,10 @@ export default function Corporates() {
Minimal Deposit
</Grid>
<Grid item xs={6}>
: {row.current_policy ? fCurrency(row.current_policy?.minimal_deposit_net) : '-'}
:{' '}
{row.current_policy
? fCurrency(row.current_policy?.minimal_deposit_net)
: '-'}
</Grid>
</Grid>
</Grid>
@@ -365,7 +426,6 @@ export default function Corporates() {
</Grid>
</Grid>
</Grid>
<Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Sub Corporate</Typography>
<Grid container>
@@ -380,7 +440,6 @@ export default function Corporates() {
</Grid>
</Grid>
</Grid>
</Box>
</Collapse>
</TableCell>
@@ -403,47 +462,55 @@ export default function Corporates() {
]}
/>
<SearchInput onSearch={applyFilter}/>
<SearchInput onSearch={applyFilter} />
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left" width={50} />
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left" width={100}>Status</TableCell>
<TableCell style={headStyle} align="right" width={100}>Action</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
(
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left" width={50} />
<TableCell style={headStyle} align="left">
Code
</TableCell>
<TableCell style={headStyle} align="left">
Name
</TableCell>
<TableCell style={headStyle} align="left" width={100}>
Status
</TableCell>
<TableCell style={headStyle} align="right" width={100}>
Action
</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">Loading</TableCell>
<TableCell colSpan={8} align="center">
Loading
</TableCell>
</TableRow>
</TableBody>
) : dataTableData.data.length == 0 ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
No Data
</TableCell>
</TableRow>
</TableBody>
) : (
dataTableData.data.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">No Data</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map(row => (
<Row key={row.code} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
<TableBody>
{dataTableData.data.map((row) => (
<Row key={row.code} row={row} />
))}
</TableBody>
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Container>
</Page>