LMSN-191
Data corporate & member linking ke client portal
This commit is contained in:
ivan-sim
126
frontend/client-portal/src/pages/EmployeeData/Index.tsx
Normal file
126
frontend/client-portal/src/pages/EmployeeData/Index.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
/* ---------------------------------- react --------------------------------- */
|
||||
import { useState, SyntheticEvent } from 'react';
|
||||
/* ---------------------------------- @mui ---------------------------------- */
|
||||
import { Box, Tabs, Tab, Container, Grid, Card, Stack } from '@mui/material';
|
||||
import { styled } from '@mui/material/styles';
|
||||
/* ------------------------------- components ------------------------------- */
|
||||
import Page from '../../components/Page';
|
||||
/* ---------------------------------- hooks --------------------------------- */
|
||||
import useSettings from '../../hooks/useSettings';
|
||||
import List from './List';
|
||||
import ServiceMonitoring from './ServiceMonitoring';
|
||||
import UserProfile from './UserProfile';
|
||||
|
||||
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
|
||||
|
||||
/* ------------------------------ 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 [value, setValue] = useState(0);
|
||||
const handleChange = (event: SyntheticEvent, newValue: number) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<Page title="Employee Data">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<HeaderBreadcrumbs
|
||||
heading={'Employee Data'}
|
||||
links={[
|
||||
{ name: 'Case Management', href: '/employee-data' },
|
||||
{ name: 'Employee Data', href: '/employee-data'}
|
||||
]}
|
||||
/>
|
||||
<Grid container>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Card>
|
||||
<TabPanel value={value} index={0}>
|
||||
<List />
|
||||
</TabPanel>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
402
frontend/client-portal/src/pages/EmployeeData/List.tsx
Normal file
402
frontend/client-portal/src/pages/EmployeeData/List.tsx
Normal file
@@ -0,0 +1,402 @@
|
||||
/* ---------------------------------- @mui ---------------------------------- */
|
||||
import {
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Stack,
|
||||
Button,
|
||||
TableSortLabel,
|
||||
Box,
|
||||
MenuItem
|
||||
} from '@mui/material';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
/* ---------------------------------- axios --------------------------------- */
|
||||
// import axios from 'axios';
|
||||
import axios from '../../utils/axios';
|
||||
/* ---------------------------------- react --------------------------------- */
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
|
||||
/* -------------------------------- component ------------------------------- */
|
||||
import Iconify from '../../components/Iconify';
|
||||
import BaseTablePagination from '../../components/BaseTablePagination';
|
||||
import TableComponent from '../../components/Table';
|
||||
|
||||
/* ---------------------------------- hooks --------------------------------- */
|
||||
import useMap from '../../hooks/useMap';
|
||||
/* ---------------------------------- theme --------------------------------- */
|
||||
import palette from '../../theme/palette';
|
||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
|
||||
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { fDate } from '../../utils/formatTime';
|
||||
import { format } from 'date-fns';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
||||
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
|
||||
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
|
||||
|
||||
|
||||
/* ---------------------------------- types --------------------------------- */
|
||||
|
||||
// type PaginationTableProps = {
|
||||
// current_page: number;
|
||||
// from: number;
|
||||
// last_page: number;
|
||||
// links: [];
|
||||
// path: string;
|
||||
// per_page: number;
|
||||
// to: number;
|
||||
// total: number;
|
||||
// };
|
||||
|
||||
// type DataTableProps = {
|
||||
// fullName: string;
|
||||
// memberId: string;
|
||||
// service: string;
|
||||
// start_date: string;
|
||||
// end_date: string;
|
||||
// status: boolean | number;
|
||||
// };
|
||||
|
||||
// /* -------------------------------------------------------------------------- */
|
||||
|
||||
// /* -------------------------- enchanced table head -------------------------- */
|
||||
|
||||
// type Order = 'asc' | 'desc';
|
||||
|
||||
// interface HeadCell {
|
||||
// id: string;
|
||||
// label: string;
|
||||
// }
|
||||
|
||||
// const headCells: readonly HeadCell[] = [
|
||||
// {
|
||||
// id: 'name',
|
||||
// label: 'Name',
|
||||
// },
|
||||
// {
|
||||
// id: 'member_id',
|
||||
// label: 'Member ID',
|
||||
// },
|
||||
// {
|
||||
// id: 'service',
|
||||
// label: 'Service',
|
||||
// },
|
||||
// {
|
||||
// id: 'start_date',
|
||||
// label: 'Start Date',
|
||||
// },
|
||||
// {
|
||||
// id: 'end_date',
|
||||
// label: 'End Date',
|
||||
// },
|
||||
// {
|
||||
// id: 'status',
|
||||
// label: 'Status',
|
||||
// },
|
||||
// ];
|
||||
|
||||
// interface EnhancedTableProps {
|
||||
// onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
|
||||
// order: Order;
|
||||
// orderBy: string;
|
||||
// }
|
||||
|
||||
// function EnhancedTableHead(props: EnhancedTableProps) {
|
||||
// const { order, orderBy, onRequestSort } = props;
|
||||
// const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
|
||||
// onRequestSort(event, property);
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <TableHead>
|
||||
// <TableRow>
|
||||
// <TableCell align="center">No</TableCell>
|
||||
// {headCells.map((headCell) => (
|
||||
// <TableCell
|
||||
// key={headCell.id}
|
||||
// sortDirection={orderBy === headCell.id ? order : false}
|
||||
// align="center"
|
||||
// >
|
||||
// <TableSortLabel
|
||||
// active={orderBy === headCell.id}
|
||||
// direction={orderBy === headCell.id ? order : 'asc'}
|
||||
// onClick={createSortHandler(headCell.id)}
|
||||
// >
|
||||
// {headCell.label}
|
||||
// {orderBy === headCell.id ? (
|
||||
// <Box component="span" sx={visuallyHidden}>
|
||||
// {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
|
||||
// </Box>
|
||||
// ) : null}
|
||||
// </TableSortLabel>
|
||||
// </TableCell>
|
||||
// ))}
|
||||
// </TableRow>
|
||||
// </TableHead>
|
||||
// );
|
||||
// }
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
export default function List() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { corporateValue } = useContext(UserCurrentCorporateContext);
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* setting up for the table */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const loadings = {
|
||||
isLoading: isLoading,
|
||||
setIsLoading: setIsLoading,
|
||||
};
|
||||
|
||||
/* ------------------------------ handle params ----------------------------- */
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [appliedParams, setAppliedParams] = useState({});
|
||||
|
||||
const params = {
|
||||
searchParams: searchParams,
|
||||
setSearchParams: setSearchParams,
|
||||
appliedParams: appliedParams,
|
||||
setAppliedParams: setAppliedParams,
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* ------------------------------ handle order ------------------------------ */
|
||||
const [order, setOrder] = useState<Order>('asc');
|
||||
const [orderBy, setOrderBy] = useState('fullName');
|
||||
|
||||
const orders = {
|
||||
order: order,
|
||||
setOrder: setOrder,
|
||||
orderBy: orderBy,
|
||||
setOrderBy: setOrderBy,
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* ---------------------------- handle pagination --------------------------- */
|
||||
const [page, setPage] = useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = useState(10);
|
||||
|
||||
const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
|
||||
current_page: 0,
|
||||
from: 0,
|
||||
last_page: 0,
|
||||
links: [],
|
||||
path: '',
|
||||
per_page: 0,
|
||||
to: 0,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const paginations = {
|
||||
page: page,
|
||||
setPage: setPage,
|
||||
rowsPerPage: rowsPerPage,
|
||||
setRowsPerPage: setRowsPerPage,
|
||||
paginationTable: paginationTable,
|
||||
setPaginationTable: setPaginationTable,
|
||||
};
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* ------------------------------ handle search ----------------------------- */
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (searchText === '') {
|
||||
searchParams.delete('search');
|
||||
const params = Object.fromEntries([...searchParams.entries()]);
|
||||
setAppliedParams(params);
|
||||
} else {
|
||||
const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
|
||||
setAppliedParams(params);
|
||||
}
|
||||
};
|
||||
|
||||
const searchs = {
|
||||
searchText: searchText,
|
||||
setSearchText: setSearchText,
|
||||
handleSearchSubmit: handleSearchSubmit,
|
||||
};
|
||||
|
||||
/* -------------------------------- headCell -------------------------------- */
|
||||
const headCells: HeadCell<never>[] = [
|
||||
{
|
||||
id: 'memberId',
|
||||
align: 'left',
|
||||
label: 'Member ID',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'fullName',
|
||||
align: 'left',
|
||||
label: 'Name',
|
||||
isSort: true,
|
||||
},
|
||||
|
||||
{
|
||||
id: 'start_date',
|
||||
align: 'left',
|
||||
label: 'Start Date',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'end_date',
|
||||
align: 'left',
|
||||
label: 'End Date',
|
||||
isSort: false,
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
align: 'left',
|
||||
label: 'Status',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'view',
|
||||
align: 'center',
|
||||
label: '',
|
||||
isSort: true,
|
||||
},
|
||||
];
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 250));
|
||||
|
||||
const parameters =
|
||||
Object.keys(appliedParams).length !== 0
|
||||
? appliedParams
|
||||
: Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
|
||||
|
||||
const response = await axios.get(`${corporateValue}/members?type=employee-data`, {
|
||||
params: { ...parameters },
|
||||
});
|
||||
|
||||
console.log(response.data.data);
|
||||
|
||||
setData(
|
||||
response.data.data.map((obj: any) => {
|
||||
return {
|
||||
...obj,
|
||||
// memberId:
|
||||
// <Button
|
||||
// onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}
|
||||
// >{obj.memberId}</Button>
|
||||
// ,
|
||||
status:
|
||||
obj.status === 1 ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="success"
|
||||
size="small"
|
||||
sx={{cursor:'default'}}
|
||||
>
|
||||
Active
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
size="small"
|
||||
sx={{cursor:'default'}}
|
||||
>
|
||||
Inactive
|
||||
</Button>
|
||||
),
|
||||
start_date:
|
||||
<Typography
|
||||
sx={{
|
||||
backgroundColor: (theme) => theme.palette.grey[300],
|
||||
borderRadius: '4px',
|
||||
width: '70%',
|
||||
}}
|
||||
>
|
||||
{obj.start_date ? format(new Date(obj.start_date), "dd MMMM yyyy HH:mm:ss") : ''}
|
||||
</Typography>
|
||||
,
|
||||
end_date:
|
||||
<Typography
|
||||
sx={{
|
||||
backgroundColor: (theme) => theme.palette.grey[300],
|
||||
borderRadius: '4px',
|
||||
width: '70%',
|
||||
}}
|
||||
>
|
||||
{obj.end_date ? format(new Date(obj.end_date), "d MMMM yyyy HH:mm:ss") : ''}
|
||||
</Typography>
|
||||
,
|
||||
fullName:
|
||||
<Typography
|
||||
>
|
||||
{obj.fullName}
|
||||
</Typography>
|
||||
,
|
||||
memberId:
|
||||
<Typography
|
||||
>
|
||||
{obj.memberId}
|
||||
</Typography>
|
||||
,
|
||||
view:
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
<MenuItem onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}>
|
||||
<VisibilityOutlinedIcon />
|
||||
View
|
||||
</MenuItem>
|
||||
</>
|
||||
} />
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
setPaginationTable(response.data);
|
||||
setRowsPerPage(response.data.per_page);
|
||||
|
||||
|
||||
|
||||
if (searchParams.get('page')) {
|
||||
//@ts-ignore
|
||||
const currentPage = parseInt(searchParams.get('page')) - 1;
|
||||
|
||||
paginationTable.current_page = currentPage;
|
||||
setPage(currentPage);
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
})();
|
||||
}, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<TableComponent
|
||||
headCells={headCells}
|
||||
rows={data}
|
||||
orders={orders}
|
||||
paginations={paginations}
|
||||
loadings={loadings}
|
||||
params={params}
|
||||
searchs={searchs}
|
||||
// filters={filters}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// 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, useParams } from 'react-router-dom';
|
||||
import ButtonBack from '../../components/ButtonBack';
|
||||
import { useEffect, useState, useContext } from 'react';
|
||||
import axios from '../../utils/axios';
|
||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function UserProfile() {
|
||||
const { themeStretch } = useSettings();
|
||||
// const navigate = useNavigate();
|
||||
const [data, setData] = useState();
|
||||
|
||||
const { corporateValue } = useContext(UserCurrentCorporateContext);
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
axios
|
||||
.get(corporateValue + '/members/' + id)
|
||||
.then((response) => {
|
||||
setData(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// console.log('data', data);
|
||||
|
||||
return (
|
||||
<Page title="Profile">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
|
||||
{/* <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate()}>
|
||||
<Iconify icon="heroicons-outline:arrow-narrow-left" />
|
||||
</IconButton> */}
|
||||
<ButtonBack />
|
||||
<Typography variant="h5">Profile</Typography>
|
||||
</Stack>
|
||||
<Grid container spacing={2}>
|
||||
{/* Row 1 */}
|
||||
<Grid item xs={12} md={12}>
|
||||
<CardPersonalInformation data={data} />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={12}>
|
||||
<CardFamilyInformation data={data} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user