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

fix cleint portal employee-data, dashboard, hide notification

Browse Source
This commit is contained in:
Muhammad Fajar
2023-12-31 23:44:43 +07:00
parent ae884f8cd0
commit 96034d069a
26 changed files with 684 additions and 804 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/client-portal/.env.development
View File

@@ -5,5 +5,5 @@ PORT=8083
REACT_APP_HOST_API_URL="https://aso-api.linksehat.dev/api/client"
# VITE_API_URL="https://aso-api.linksehat.dev/api/client"
VITE_API_URL="http://localhost:8000/api/client"
VITE_API_URL="https://primecenter-api.linksehat.com/api/client"

2
frontend/client-portal/.env.production
View File

@@ -1,3 +1,3 @@
GENERATE_SOURCEMAP=false
VITE_API_URL="https://aso-api.linksehat.dev/api/client"
VITE_API_URL="https://primecenter-api.linksehat.com/api/client"

2
frontend/client-portal/src/@types/table.ts
View File

@@ -82,7 +82,7 @@ export type TableListProps<DataType> = {
appliedParams: {};
setAppliedParams: Dispatch<SetStateAction<{}>>;
};
searchs: {
searchs?: {
useSearchs: boolean;
searchText: string;
setSearchText: Dispatch<SetStateAction<string>>;

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

@@ -5,7 +5,6 @@ import {
Container,
Grid,
Button,
IconButton,
LinearProgress,
linearProgressClasses,
SelectChangeEvent,
@@ -25,15 +24,14 @@ import Table from '../../components/Table';
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams } from 'react-router-dom';
import palette from '../../theme/palette';
import { MoreVert as MoreVertIcon } from '@mui/icons-material';
import { fSplit } from '../../utils/formatNumber';
const itemList = [
{ info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' },
{ info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' },
{ info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' },
{ info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' },
];
// const itemList = [
// { info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' },
// { info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' },
// { info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' },
// { info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' },
// ];
/* ------------------------------ default data ------------------------------ */
type DataMember = {
@@ -256,12 +254,6 @@ export default function Index() {
];
/* -------------------------------------------------------------------------- */
/* ----------------------------- handler action ----------------------------- */
const handleAction = () => {
alert('action');
};
/* -------------------------------------------------------------------------- */
useEffect(() => {
(async () => {
setIsLoading(true);
@@ -279,7 +271,7 @@ export default function Index() {
params: { ...parameters },
});
// console.log('member', corporateMembers);
// console.log('member', corporateMembers);
const corporateTopUpLimit = await axios.get(`${corporateValue}/topup`);
setSearchParams(parameters);
@@ -289,58 +281,56 @@ export default function Index() {
});
setDivisionData(corporateDivision.data);
setMemberData(
corporateMembers.data.data.map((obj: any) => {
return {
...obj,
limit: (
<Stack>
<BorderLinearProgress
variant="determinate"
value={obj.limit.percentage}
sx={{ mb: 1 }}
/>
<Typography sx={{ typography: 'caption', color: '#637381' }}>
{fSplit(obj.limit.current)} / {fSplit(obj.limit.total)}
</Typography>
</Stack>
corporateMembers.data.data.map((obj: any) => ({
...obj,
limit: (
<Stack>
<BorderLinearProgress
variant="determinate"
value={obj.limit.percentage}
sx={{ mb: 1 }}
/>
<Typography sx={{ typography: 'caption', color: '#637381' }}>
{fSplit(obj.limit.current)} / {fSplit(obj.limit.total)}
</Typography>
</Stack>
),
status:
obj.status === 1 ? (
<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,
},
}}
>
Active
</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,
},
}}
>
Inactive
</Button>
),
status:
obj.status === 1 ? (
<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,
},
}}
>
Active
</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,
},
}}
>
Inactive
</Button>
),
/* action: (
/* action: (
<IconButton onClick={handleAction}>
<MoreVertIcon />
</IconButton>
), */
};
})
}))
);
setPaginationTable(corporateMembers.data);
setRowsPerPage(corporateMembers.data.per_page);
@@ -357,8 +347,6 @@ export default function Index() {
})();
}, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
// console.log(policyData);
return (
<Page title="Dashboard">
<Container maxWidth={themeStretch ? false : 'xl'}>
@@ -370,7 +358,7 @@ export default function Index() {
<Grid container spacing={2}>
<Grid item xs={12} lg={6} md={12}>
<CardNotification data={itemList} />
<CardNotification />
</Grid>
<Grid item xs={12} lg={6} md={12}>
<CardPolicy data={policyData} />

101
frontend/client-portal/src/pages/EmployeeData/Index.tsx
View File

@@ -1,121 +1,26 @@
/* ---------------------------------- react --------------------------------- */
import { useState, SyntheticEvent } from 'react';
/* ---------------------------------- @mui ---------------------------------- */
import { Box, Tabs, Tab, Container, Grid, Card, Stack } from '@mui/material';
import { styled } from '@mui/material/styles';
import { Container, Grid } from '@mui/material';
/* ------------------------------- 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'}
]}
links={[{ name: 'Case Management' }, { name: 'Employee Data', href: '/employee-data' }]}
/>
<Grid container>
<Grid item xs={12} lg={12} md={12}>
<TabPanel value={value} index={0}>
<List />
</TabPanel>
<List />
</Grid>
</Grid>
</Container>

247
frontend/client-portal/src/pages/EmployeeData/List.tsx
View File

@@ -1,150 +1,23 @@
/* ---------------------------------- @mui ---------------------------------- */
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Stack,
Button,
TableSortLabel,
Box,
MenuItem
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';
import { Stack, MenuItem } from '@mui/material';
/* ---------------------------------- 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, fDateSuffix } from '../../utils/formatTime';
import { format } from 'date-fns';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { fDateSuffix } from '../../utils/formatTime';
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';
import Label from '../../components/Label';
/* ---------------------------------- 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();
@@ -212,28 +85,6 @@ export default function List() {
/* -------------------------------------------------------------------------- */
/* ------------------------------ 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>[] = [
{
@@ -248,7 +99,7 @@ export default function List() {
label: 'Name',
isSort: true,
},
{
id: 'start_date',
align: 'center',
@@ -290,68 +141,44 @@ export default function List() {
const response = await axios.get(`${corporateValue}/members?type=employee-data`, {
params: { ...parameters },
});
setSearchParams(parameters);
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 ? (
<Label color='success'>
Active
</Label>
) : (
<Label color='error'>
Inactive
</Label>
),
start_date:
<Label>
{obj.start_date ? fDateSuffix(obj.start_date) : ''}
</Label>
,
end_date:
<Label>
{obj.end_date ? fDateSuffix(obj.end_date) : ''}
</Label>
,
fullName:
<Typography
variant="body2"
>
{obj.fullName}
</Typography>
,
memberId:
<Typography
variant="body2"
>
{obj.memberId}
</Typography>
,
action:
<TableMoreMenu actions={
<>
<MenuItem onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}>
<VisibilityOutlinedIcon />
View
</MenuItem>
</>
} />
};
})
response.data.data.map((obj: any) => ({
...obj,
// memberId:
// <Button
// onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}
// >{obj.memberId}</Button>
// ,
status:
obj.status === 1 ? (
<Label color="success">Active</Label>
) : (
<Label color="error">Inactive</Label>
),
start_date: <Label>{obj.start_date ? fDateSuffix(obj.start_date) : ''}</Label>,
end_date: <Label>{obj.end_date ? fDateSuffix(obj.end_date) : ''}</Label>,
fullName: <Typography variant="body2">{obj.fullName}</Typography>,
memberId: <Typography variant="body2">{obj.memberId}</Typography>,
action: (
<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;
@@ -373,7 +200,7 @@ export default function List() {
paginations={paginations}
loadings={loadings}
params={params}
searchs={searchs}
// searchs={searchs}
// filters={filters}
/>
</Stack>

55
frontend/client-portal/src/sections/dashboard/CardNotification.tsx
View File

@@ -41,6 +41,7 @@ const ItemNotificationStyle = styled(Card)(({ theme }) => ({
marginTop: 2,
overflowY: 'auto',
maxHeight: '154px',
minHeight: '154px',
gap: '0.5rem',
}));
@@ -100,31 +101,37 @@ export default function CardNotification({ data }: NotificationProps) {
</Button>
</Stack>
<ItemNotificationStyle>
{data
? data.map(({ info, date, time }, index) => (
<div key={index}>
{index >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
<Typography sx={{ typography: 'caption' }}>{info}</Typography>
<Link
component="button"
variant="caption"
underline="always"
onClick={() => clickHandler('infoDetail')}
>
Info Detail
</Link>
</Stack>
<Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
<Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
<Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
</Stack>
<ItemNotificationStyle
sx={{ display: data?.length === 0 || data === undefined ? 'flex' : 'block' }}
>
{data ? (
data.map(({ info, date, time }, index) => (
<div key={index}>
{index >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
<Typography sx={{ typography: 'caption' }}>{info}</Typography>
<Link
component="button"
variant="caption"
underline="always"
onClick={() => clickHandler('infoDetail')}
>
Info Detail
</Link>
</Stack>
</div>
))
: ''}
<Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
<Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
<Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
</Stack>
</Stack>
</div>
))
) : (
<Stack justifyContent="center" alignItems="center" flexGrow={1}>
No Notification
</Stack>
)}
</ItemNotificationStyle>
{isDialog === 'allNotification' && (

1
frontend/hospital-portal/.env.production Normal file
View File

@@ -0,0 +1 @@
VITE_API_URL="https://primecenter-api.linksehat.com/api/v1/hospitalportal"