Merge branch 'staging' of itcorp.primaya.id:rajif/aso into staging
This commit is contained in:
@@ -28,6 +28,9 @@ class CorporateMemberController extends Controller
|
||||
public function index(Request $request, $corporate_id)
|
||||
{
|
||||
switch ($request->input('type')) {
|
||||
case 'employee-data':
|
||||
$members = $this->corporateMemberService->getAllMemberAlarmCenter($corporate_id, $request);
|
||||
return response()->json(Helper::paginateResources(DashboardMemberAlarmResources::collection($members)));
|
||||
case 'claim-report':
|
||||
$members = $this->corporateMemberService->getAllMemberClaimReports($corporate_id, $request);
|
||||
return response()->json(Helper::paginateResources(ClaimReportMemberResources::collection($members)));
|
||||
|
||||
@@ -46,12 +46,15 @@ class DataController extends Controller
|
||||
Member::where('person_id', $person_id)->update([
|
||||
'name' => $familyMember['name'],
|
||||
'email' => $familyMember['email'],
|
||||
'relation_with_principal' => $familyMember['relation_with_principal'],
|
||||
'birth_date' => $familyMember['birth_date'],
|
||||
]);
|
||||
|
||||
Person::where('id', $person_id)->update([
|
||||
'name' => $familyMember['name'],
|
||||
'email' => $familyMember['email'],
|
||||
'phone' => $familyMember['phone'],
|
||||
'birth_date' => $familyMember['birth_date']
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@@ -26,6 +26,10 @@ const navConfig = [
|
||||
{
|
||||
subheader: 'Case Management',
|
||||
items: [
|
||||
{
|
||||
title: 'Employee Data',
|
||||
path: '/employee-data',
|
||||
},
|
||||
{
|
||||
title: 'Alarm Center',
|
||||
path: '/alarm-center',
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
406
frontend/client-portal/src/pages/EmployeeData/List.tsx
Normal file
406
frontend/client-portal/src/pages/EmployeeData/List.tsx
Normal file
@@ -0,0 +1,406 @@
|
||||
/* ---------------------------------- @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: true,
|
||||
},
|
||||
{
|
||||
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: '95%',
|
||||
}}
|
||||
variant="body2"
|
||||
>
|
||||
{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: '95%',
|
||||
}}
|
||||
variant="body2"
|
||||
>
|
||||
{obj.end_date ? format(new Date(obj.end_date), "d MMMM yyyy HH:mm:ss") : ''}
|
||||
</Typography>
|
||||
,
|
||||
fullName:
|
||||
<Typography
|
||||
variant="body2"
|
||||
>
|
||||
{obj.fullName}
|
||||
</Typography>
|
||||
,
|
||||
memberId:
|
||||
<Typography
|
||||
variant="body2"
|
||||
>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
@@ -73,6 +73,26 @@ export default function Router() {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/employee-data',
|
||||
element: (
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<DashboardLayout />
|
||||
</AuthGuard>
|
||||
</AuthProvider>
|
||||
),
|
||||
children: [
|
||||
{
|
||||
element: <EmployeeData />,
|
||||
index: true,
|
||||
},
|
||||
{
|
||||
path: '/employee-data/user-profile/:id',
|
||||
element: <EmployeeDataUserProfile/>,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/alarm-center',
|
||||
element: (
|
||||
@@ -216,6 +236,10 @@ const Login = Loadable(lazy(() => import('../pages/auth/Login')));
|
||||
const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Index')));
|
||||
const NotFound = Loadable(lazy(() => import('../pages/Page404')));
|
||||
|
||||
// Employee Data
|
||||
const EmployeeData = Loadable(lazy(() => import('../pages/EmployeeData/Index')));
|
||||
const EmployeeDataUserProfile = Loadable(lazy(() => import('../pages/EmployeeData/UserProfile')));
|
||||
|
||||
// Alarm Center
|
||||
const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
|
||||
const AlarmCenterServiceMonitoring = Loadable(
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
// mui
|
||||
import { Button, Card, Stack, Typography, Grid, Switch, TextField } from '@mui/material';
|
||||
import { FormHelperText, FormControl, Button, Card, Stack, Typography, Grid, Switch, TextField, IconButton, Select, MenuItem, InputLabel } from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
// components
|
||||
import Iconify from '../../../components/Iconify';
|
||||
import { fDate } from '../../../utils/formatTime';
|
||||
import { fDate, fPostFormat } from '../../../utils/formatTime';
|
||||
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
@@ -16,10 +19,39 @@ export default function CardFamilyInformation({ data }) {
|
||||
const [editedFamilyData, setEditedFamilyData] = useState({});
|
||||
const { id } = useParams();
|
||||
|
||||
//Check Required
|
||||
//State Field
|
||||
const [nameField, setNameField] = useState('');
|
||||
const [relationshipField, setRelationshipField] = useState('');
|
||||
const [birthDateField, setBirthDateField] = useState('');
|
||||
const [birthDateFieldCheck, setBirthDateFieldCheck] = useState(1);
|
||||
const [emailField, setEmailField] = useState('');
|
||||
const [emailFieldCheck, setEmailFieldCheck] = useState(false);
|
||||
const [phoneField, setPhoneField] = useState('');
|
||||
//State Field Error
|
||||
const [nameFieldError, setNameFieldError] = useState('');
|
||||
const [relationshipFieldError, setRelationshipFieldError] = useState('');
|
||||
const [birthDateFieldError, setBirthDateFieldError] = useState('');
|
||||
const [emailFieldError, setEmailFieldError] = useState('');
|
||||
const [phoneFieldError, setPhoneFieldError] = useState('');
|
||||
|
||||
const handleEditData = (index) => {
|
||||
setEditIndex(index);
|
||||
setEditedFamilyData(data?.family[index] || {});
|
||||
setOpenDialog(true);
|
||||
|
||||
setNameField(data?.family[index].name);
|
||||
setRelationshipField(data?.family[index].relation_with_principal);
|
||||
setBirthDateField(data?.family[index].birth_date);
|
||||
setEmailField(data?.family[index].email);
|
||||
setEmailFieldCheck(isValidEmail(data?.family[index].email));
|
||||
setPhoneField(data?.family[index].phone);
|
||||
|
||||
setNameFieldError('');
|
||||
setRelationshipFieldError('');
|
||||
setBirthDateFieldError('');
|
||||
setEmailFieldError('');
|
||||
setPhoneFieldError('');
|
||||
};
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
@@ -37,10 +69,14 @@ export default function CardFamilyInformation({ data }) {
|
||||
updatedFamily[editIndex] = editedFamilyData;
|
||||
|
||||
// Perbarui data utama dengan data keluarga yang telah diperbarui
|
||||
const updatedData = { ...data, family: updatedFamily };
|
||||
const updatedData = { ...data, family: updatedFamily[editIndex]};
|
||||
|
||||
updatedData.family.birth_date = fPostFormat(updatedData.family.birth_date, 'yyyy-MM-dd') ;
|
||||
|
||||
const familyArray = [updatedData.family];
|
||||
|
||||
axios
|
||||
.post('/update-family', updatedData.family)
|
||||
.post('/update-family', familyArray)
|
||||
.then((response) => {
|
||||
enqueueSnackbar('Data updated successfully', { variant: 'success' });
|
||||
setOpenDialog(false);
|
||||
@@ -55,6 +91,15 @@ export default function CardFamilyInformation({ data }) {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const isValidEmail = (email) => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
};
|
||||
|
||||
const isRequiredFieldsFilled = () => {
|
||||
return nameField.trim() !== '' && relationshipField.trim() !== '' && birthDateField !== '' && birthDateFieldCheck !== 0 && emailField.trim() !== '' && emailFieldCheck && phoneField.trim() !== '';
|
||||
};
|
||||
|
||||
return (
|
||||
<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
|
||||
@@ -66,17 +111,17 @@ export default function CardFamilyInformation({ data }) {
|
||||
sx={{ paddingY: 1, paddingX: 3 }}
|
||||
>
|
||||
<Typography variant="subtitle2">Beneficiary / Family</Typography>
|
||||
<Button startIcon={<Iconify icon="ic:round-add" />} disabled>Add Member</Button>
|
||||
{/*<Button startIcon={<Iconify icon="ic:round-add" />} disabled>Add Member</Button>*/}
|
||||
</Stack>
|
||||
{/* Stack 2 */}
|
||||
<Grid container maxHeight="307px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
|
||||
<Grid container maxHeight="584px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
|
||||
{data?.family.map((familyMember, index) => (
|
||||
<Grid item xs={12} sm={6} md={6} key={index}>
|
||||
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
|
||||
{/* Stack 1 */}
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
alignItems="left"
|
||||
justifyContent="space-between"
|
||||
spacing={2}
|
||||
sx={{ flex: '100%' }}
|
||||
@@ -84,13 +129,17 @@ export default function CardFamilyInformation({ data }) {
|
||||
{/* Row 1 */}
|
||||
<Stack direction="row" spacing={1}>
|
||||
<img
|
||||
width={24}
|
||||
height={24}
|
||||
width={34}
|
||||
height={34}
|
||||
src="/images/husband-user-profile.png"
|
||||
alt="user-profile"
|
||||
style={{ borderRadius: '50%' }}
|
||||
/>
|
||||
<Stack>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500 }}>
|
||||
{familyMember?.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="#757575">
|
||||
{familyMember.relation_with_principal === 'H'
|
||||
? 'Husband'
|
||||
: familyMember.relation_with_principal === 'W'
|
||||
@@ -101,29 +150,72 @@ export default function CardFamilyInformation({ data }) {
|
||||
? 'Daughter'
|
||||
: ''}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
{/* Row 2 */}
|
||||
<Stack alignItems="center">
|
||||
<Stack sx={{display:'none'}} alignItems="center">
|
||||
<Typography variant="caption">Suspend</Typography>
|
||||
<Switch aria-label="switch demo" disabled />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Typography variant="body2" color="#757575">
|
||||
{familyMember?.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="#757575">
|
||||
{familyMember?.birth_date ? fDate(familyMember?.birth_date) : ''}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="#757575">
|
||||
{familyMember?.phone}
|
||||
</Typography>
|
||||
{/* Stack 2 */}
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
marginTop={1.25}
|
||||
alignItems="left"
|
||||
spacing={10}
|
||||
sx={{ flex: '100%' }}
|
||||
>
|
||||
<Typography sx={{width: '20%'}} variant="body2" color="#757575">
|
||||
Date of Birth
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500 }}>
|
||||
{familyMember?.birth_date ? fDate(familyMember?.birth_date) : ''}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="left"
|
||||
spacing={10}
|
||||
sx={{ flex: '100%' }}
|
||||
>
|
||||
<Typography sx={{width: '20%'}} variant="body2" color="#757575">
|
||||
Email
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500 }}>
|
||||
{familyMember?.email}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="left"
|
||||
spacing={10}
|
||||
sx={{ flex: '100%' }}
|
||||
>
|
||||
<Typography sx={{width: '20%'}} variant="body2" color="#757575">
|
||||
Phone Number
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500 }}>
|
||||
{familyMember?.phone}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="left"
|
||||
spacing={10}
|
||||
sx={{ flex: '100%' }}
|
||||
>
|
||||
<Typography sx={{width: '20%'}} variant="body2" color="#757575">
|
||||
Status
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500 }}>
|
||||
{
|
||||
familyMember?.phone === '1'
|
||||
? 'Active'
|
||||
: 'Inactive'
|
||||
}
|
||||
</Typography>
|
||||
</Stack>
|
||||
{/* Stack 2 */}
|
||||
<Stack sx={{display:'none'}} direction="row" alignItems="center" justifyContent="space-between" marginTop={1.25}>
|
||||
<Button color="error" startIcon={<Iconify icon="ic:round-close" />} disabled>
|
||||
Remove
|
||||
</Button>
|
||||
@@ -136,32 +228,117 @@ export default function CardFamilyInformation({ data }) {
|
||||
))}
|
||||
</Grid>
|
||||
{/* Dialog */}
|
||||
<Dialog open={openDialog} onClose={handleCloseDialog}>
|
||||
<DialogTitle>Edit Data</DialogTitle>
|
||||
<Dialog open={openDialog} onClose={handleCloseDialog} fullWidth={true}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
<Stack direction="row">
|
||||
<Iconify width={25} height={25} sx={{ marginRight: '10px' }} />
|
||||
<Typography variant="h6">Edit Data</Typography>
|
||||
</Stack>
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialog}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<TextField
|
||||
label="Name"
|
||||
required
|
||||
value={editedFamilyData?.name || ''}
|
||||
onChange={(e) => setEditedFamilyData({ ...editedFamilyData, name: e.target.value })}
|
||||
onChange={(e) => {
|
||||
setEditedFamilyData({ ...editedFamilyData, name: e.target.value })
|
||||
setNameField(e.target.value);
|
||||
setNameFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
|
||||
}}
|
||||
fullWidth
|
||||
sx={{ marginTop: '16px' }}
|
||||
error={!!nameFieldError}
|
||||
helperText={nameFieldError}
|
||||
/>
|
||||
|
||||
<FormControl>
|
||||
<InputLabel htmlFor="relationship" required>
|
||||
Relationship
|
||||
</InputLabel>
|
||||
<Select
|
||||
id="relationship"
|
||||
value={editedFamilyData?.relation_with_principal || ''}
|
||||
onChange={(e) => {
|
||||
setEditedFamilyData({ ...editedFamilyData, relation_with_principal: e.target.value })
|
||||
setRelationshipField(e.target.value);
|
||||
setRelationshipFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
|
||||
}}
|
||||
fullWidth
|
||||
label="Relationship"
|
||||
error={!!relationshipFieldError}
|
||||
>
|
||||
<MenuItem value="H">Husband</MenuItem>
|
||||
<MenuItem value="W">Wife</MenuItem>
|
||||
<MenuItem value="S">Son</MenuItem>
|
||||
<MenuItem value="D">Daughter</MenuItem>
|
||||
</Select>
|
||||
<FormHelperText style={{ color: 'red' }}>{relationshipFieldError}</FormHelperText>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DatePicker
|
||||
label="Date of Birth"
|
||||
value={editedFamilyData?.birth_date || ''}
|
||||
onChange={(newValue) => {
|
||||
setEditedFamilyData({ ...editedFamilyData, birth_date: newValue });
|
||||
setBirthDateField(newValue);
|
||||
setBirthDateFieldError(newValue === '' || newValue === null ? 'This field is required' : '');
|
||||
if(newValue !== null)
|
||||
{
|
||||
newValue = newValue.toString();
|
||||
setBirthDateFieldCheck(newValue === 'Invalid Date' ? 0 : 1);
|
||||
}
|
||||
}}
|
||||
inputFormat="dd-MM-yyyy"
|
||||
renderInput={(params) => <TextField {...params} required/>}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<FormHelperText style={{ color: 'red' }}>{birthDateFieldError}</FormHelperText>
|
||||
</FormControl>
|
||||
<TextField
|
||||
label="Email Address"
|
||||
required
|
||||
value={editedFamilyData?.email || ''}
|
||||
onChange={(e) => setEditedFamilyData({ ...editedFamilyData, email: e.target.value })}
|
||||
onChange={(e) => {
|
||||
setEditedFamilyData({ ...editedFamilyData, email: e.target.value })
|
||||
setEmailField(e.target.value);
|
||||
setEmailFieldError(
|
||||
e.target.value.trim() === '' ? 'This field is required' : !isValidEmail(e.target.value) ? 'Invalid email address' : ''
|
||||
);
|
||||
setEmailFieldCheck(isValidEmail(e.target.value));
|
||||
}}
|
||||
fullWidth
|
||||
sx={{ marginTop: '16px' }}
|
||||
error={!!emailFieldError}
|
||||
helperText={emailFieldError}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Phone No."
|
||||
value={editedFamilyData?.phone || ''}
|
||||
onChange={(e) => setEditedFamilyData({ ...editedFamilyData, phone: e.target.value })}
|
||||
onChange={(e) => {
|
||||
let input = e.target.value;
|
||||
// Hanya izinkan angka dan karakter '+'
|
||||
input = input.replace(/[^0-9+]/g, '');
|
||||
// Batasi panjang input menjadi 15 digit
|
||||
const maxLength = 15;
|
||||
const sanitizedInput = input.slice(0, maxLength);
|
||||
setEditedFamilyData({ ...editedFamilyData, phone: sanitizedInput });
|
||||
setPhoneField(sanitizedInput);
|
||||
setPhoneFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
|
||||
}}
|
||||
fullWidth
|
||||
sx={{ marginTop: '16px' }}
|
||||
inputProps={{
|
||||
inputMode: 'tel',
|
||||
pattern: '^\\+?[0-9]*$', // Memungkinkan karakter '+' di awal, diikuti oleh angka
|
||||
}}
|
||||
error={!!phoneFieldError}
|
||||
helperText={phoneFieldError}
|
||||
/>
|
||||
|
||||
</Stack>
|
||||
@@ -169,7 +346,7 @@ export default function CardFamilyInformation({ data }) {
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleCloseDialog}>Cancel</Button>
|
||||
<Button onClick={handleSaveData} variant="contained" color="primary">
|
||||
<Button onClick={handleSaveData} variant="contained" color="primary" disabled={!isRequiredFieldsFilled()}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogActions>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// mui
|
||||
import { Button, IconButton, Card, Stack, Typography, TextField } from '@mui/material';
|
||||
import { Button, IconButton, Card, Stack, Typography, TextField, InputLabel } from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { CardMembership, Visibility as VisibilityIcon } from '@mui/icons-material';
|
||||
// components
|
||||
import Iconify from '../../../components/Iconify';
|
||||
@@ -22,10 +23,42 @@ export default function CardPersonalInformation({ data }) {
|
||||
const [phone, setPhone] = useState(data?.phone || '');
|
||||
const [address, setAddress] = useState(data?.main_address_id || '');
|
||||
|
||||
/* const [updatedData, setUpdatedData] = useState(data); */
|
||||
//Check Required
|
||||
const [nameField, setNameField] = useState('');
|
||||
const [weightField, setWeightField] = useState('');
|
||||
const [heightField, setHeightField] = useState('');
|
||||
const [emailField, setEmailField] = useState('');
|
||||
const [emailFieldCheck, setEmailFieldCheck] = useState(false);
|
||||
const [phoneField, setPhoneField] = useState('');
|
||||
|
||||
const [nameFieldError, setNameFieldError] = useState('');
|
||||
const [weightFieldError, setWeightFieldError] = useState('');
|
||||
const [heightFieldError, setHeightFieldError] = useState('');
|
||||
const [emailFieldError, setEmailFieldError] = useState('');
|
||||
const [phoneFieldError, setPhoneFieldError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
// Periksa apakah data sudah terdefinisi
|
||||
if (data) {
|
||||
// Atur state sesuai dengan data yang diterima
|
||||
setNameField(data?.name || '');
|
||||
setWeightField((data?.last_weight_kg || '').toString());
|
||||
setHeightField((data?.last_height_cm || '').toString());
|
||||
setEmailField(data?.email || '');
|
||||
setEmailFieldCheck(isValidEmail(data?.email));
|
||||
setPhoneField(data?.phone || '');
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const isValidEmail = (email) => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
};
|
||||
|
||||
const isRequiredFieldsFilled = () => {
|
||||
return nameField.trim() !== '' && weightField.trim() !== '' && heightField.trim() !== '' && emailField.trim() !== '' && emailFieldCheck && phoneField.trim() !== '';
|
||||
};
|
||||
|
||||
|
||||
//console.log(data);
|
||||
|
||||
const handleEditData = () => {
|
||||
setWeight(data?.last_weight_kg || '');
|
||||
@@ -35,6 +68,20 @@ export default function CardPersonalInformation({ data }) {
|
||||
setAddress(data?.main_address_id || '');
|
||||
setEditedData(data);
|
||||
setOpenDialog(true);
|
||||
if (data) {
|
||||
// Atur state sesuai dengan data yang diterima
|
||||
setNameField(data?.name || '');
|
||||
setWeightField((data?.last_weight_kg || '').toString());
|
||||
setHeightField((data?.last_height_cm || '').toString());
|
||||
setEmailField(data?.email || '');
|
||||
setPhoneField(data?.phone || '');
|
||||
|
||||
setNameFieldError('');
|
||||
setWeightFieldError('');
|
||||
setHeightFieldError('');
|
||||
setEmailFieldError('');
|
||||
setPhoneFieldError('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
@@ -79,131 +126,121 @@ export default function CardPersonalInformation({ data }) {
|
||||
justifyContent="space-between"
|
||||
sx={{ paddingY: 1, paddingX: 3 }}
|
||||
>
|
||||
<Typography variant="subtitle2">Informasi Pribadi</Typography>
|
||||
<Button startIcon={<Iconify icon="heroicons:pencil-solid" />} onClick={handleEditData}>
|
||||
<Typography variant="subtitle2">Personal Information</Typography>
|
||||
{/*<Button startIcon={<Iconify icon="heroicons:pencil-solid" />} onClick={handleEditData}>
|
||||
Edit Data
|
||||
</Button>
|
||||
</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"> {data?.name} </Typography>
|
||||
</Stack>
|
||||
<Stack sx={{ width: '20%' }}>
|
||||
<Typography variant="caption">Berat Badan </Typography>
|
||||
<Typography variant="body2">{data?.last_weight_kg} kg</Typography>
|
||||
</Stack>
|
||||
<Stack sx={{ width: '20%' }}>
|
||||
<Typography variant="caption">Tinggi Badan </Typography>
|
||||
<Typography variant="body2">{data?.last_height_cm} cm</Typography>
|
||||
</Stack>
|
||||
<Stack maxHeight="584px" paddingX={2} sx={{ overflowY: 'auto' }}>
|
||||
{/* Stack 2.1 */}
|
||||
<Stack marginTop={2} spacing={1}>
|
||||
{/*<Typography variant="subtitle2">Informasi Dasar</Typography>*/}
|
||||
<Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
|
||||
<Stack direction="row" spacing={2} sx={{ width: '40%' }}>
|
||||
<img
|
||||
width={52}
|
||||
height={52}
|
||||
src="/images/user-profile.png"
|
||||
alt="user-profile"
|
||||
style={{ borderRadius: '50%' }}
|
||||
/>
|
||||
<Stack>
|
||||
<Typography variant="caption">Full Name</Typography>
|
||||
<Typography variant="body2"> {data?.name} </Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack sx={{ width: '30%' }}>
|
||||
<Typography variant="caption">Weight</Typography>
|
||||
<Typography variant="body2">{data?.last_weight_kg} kg</Typography>
|
||||
</Stack>
|
||||
<Stack sx={{ width: '30%' }}>
|
||||
<Typography variant="caption">Height</Typography>
|
||||
<Typography variant="body2">{data?.last_height_cm} cm</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
{/* Stack 3 */}
|
||||
<Stack maxHeight="338px" paddingX={2} sx={{ overflowY: 'auto' }}>
|
||||
<Stack maxHeight="584px" paddingX={2} sx={{ overflowY: 'auto' }}>
|
||||
{/* Stack 3.1 */}
|
||||
<Stack marginTop={2} spacing={1}>
|
||||
<Typography variant="subtitle2">Informasi Dasar</Typography>
|
||||
{/*<Typography variant="subtitle2">Informasi Dasar</Typography>*/}
|
||||
<Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
|
||||
<Stack sx={{ width: '100%' }}>
|
||||
<Typography variant="caption">Tempat Lahir</Typography>
|
||||
<Stack sx={{ width: '40%' }}>
|
||||
<Typography variant="caption">Place of Birth</Typography>
|
||||
<Typography variant="body2"> {data?.birth_place} </Typography>
|
||||
</Stack>
|
||||
<Stack sx={{ width: '100%' }}>
|
||||
<Typography variant="caption">Tanggal Lahir</Typography>
|
||||
<Stack sx={{ width: '30%' }}>
|
||||
<Typography variant="caption">Date of Birth</Typography>
|
||||
<Typography variant="body2">
|
||||
{' '}
|
||||
{data?.birth_date ? fDate(data?.birth_date) : ''}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack sx={{ width: '100%' }}>
|
||||
<Typography variant="caption">Jenis Kelamin</Typography>
|
||||
<Stack sx={{ width: '30%' }}>
|
||||
<Typography variant="caption">Gender</Typography>
|
||||
<Typography variant="body2">{data?.gender ? data.gender.charAt(0).toUpperCase() + data.gender.slice(1) : ''}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
{/* Stack 3.2 */}
|
||||
<Stack marginTop={2} spacing={1}>
|
||||
<Typography variant="subtitle2">Informasi Kontak</Typography>
|
||||
{/*<Typography variant="subtitle2">Informasi Kontak</Typography>*/}
|
||||
<Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
|
||||
<Stack sx={{ width: '100%' }}>
|
||||
<Typography variant="caption">Nomor Telpon</Typography>
|
||||
<Stack sx={{ width: '40%' }}>
|
||||
<Typography variant="caption">Phone Number</Typography>
|
||||
<Typography variant="body2">{data?.phone}</Typography>
|
||||
</Stack>
|
||||
<Stack sx={{ width: '100%' }}>
|
||||
<Stack sx={{ width: '30%' }}>
|
||||
<Typography variant="caption">Email</Typography>
|
||||
<Typography variant="body2">{data?.email}</Typography>
|
||||
</Stack>
|
||||
<Stack sx={{ width: '30%' }}>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Alamat</Typography>
|
||||
<Typography variant="caption">Address</Typography>
|
||||
<Typography variant="body2">{data?.main_address_id}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
{/* Stack 3.3 */}
|
||||
<Stack marginTop={2} spacing={1}>
|
||||
<Typography variant="subtitle2">Identitas Diri</Typography>
|
||||
{/*<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>
|
||||
<Stack sx={{ width: '40%' }}>
|
||||
<Typography variant="caption">ID Member</Typography>
|
||||
<Typography variant="body2">{data?.nik}</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Button variant="contained" startIcon={<VisibilityIcon />} disabled>
|
||||
<Stack sx={{ width: '30%' }}>
|
||||
<Typography variant="caption">Agama</Typography>
|
||||
<Typography variant="body2">{data?.religion}</Typography>
|
||||
</Stack>
|
||||
<Stack sx={{ width: '30%' }}>
|
||||
{/*<Button variant="contained" startIcon={<VisibilityIcon />} disabled>
|
||||
Lihat Foto
|
||||
</Button>
|
||||
</Button>*/}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
{/* Stack 3.4 */}
|
||||
<Stack marginTop={2} spacing={1}>
|
||||
<Typography variant="subtitle2">Informasi Lainnya</Typography>
|
||||
{/*<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">{data?.religion}</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Status</Typography>
|
||||
<Stack sx={{ width: '40%' }}>
|
||||
<Typography variant="caption">Marital Status</Typography>
|
||||
<Typography variant="body2">{data?.marital_status}</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Pendidikan</Typography>
|
||||
<Stack sx={{ width: '30%' }}>
|
||||
<Typography variant="caption">Education</Typography>
|
||||
<Typography variant="body2">{data?.last_education}</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Pekerjaan</Typography>
|
||||
<Stack sx={{ width: '30%' }}>
|
||||
<Typography variant="caption">Occupation</Typography>
|
||||
<Typography variant="body2">{data?.current_employment}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
@@ -211,44 +248,124 @@ export default function CardPersonalInformation({ data }) {
|
||||
</Stack>
|
||||
|
||||
{/* Dialog */}
|
||||
<Dialog open={openDialog} onClose={handleCloseDialog}>
|
||||
<DialogTitle>Edit Data</DialogTitle>
|
||||
<Dialog open={openDialog} onClose={handleCloseDialog} fullWidth={true}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
<Stack direction="row">
|
||||
<Iconify width={25} height={25} sx={{ marginRight: '10px' }} />
|
||||
<Typography variant="h6">Edit Data</Typography>
|
||||
</Stack>
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialog}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<TextField
|
||||
label="Full Name"
|
||||
required
|
||||
value={editedData ? editedData.name : ''}
|
||||
onChange={(e) => setEditedData({ ...editedData, name: e.target.value })}
|
||||
onChange={(e) =>{
|
||||
setEditedData({ ...editedData, name: e.target.value });
|
||||
setNameField(e.target.value);
|
||||
setNameFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
|
||||
}}
|
||||
fullWidth
|
||||
sx={{ marginTop: '16px' }}
|
||||
inputProps={{ maxLength: 50 }}
|
||||
error={!!nameFieldError}
|
||||
helperText={nameFieldError}
|
||||
/>
|
||||
<TextField
|
||||
label="Weight (kg)"
|
||||
required
|
||||
value={weight}
|
||||
onChange={(e) => setWeight(e.target.value)}
|
||||
onChange={(e) => {
|
||||
let input = e.target.value;
|
||||
// Hanya izinkan angka
|
||||
input = input.replace(/[^0-9]/g, '');
|
||||
// Batasi panjang input menjadi 3 digit
|
||||
const maxLength = 3;
|
||||
const sanitizedInput = input.slice(0, maxLength);
|
||||
setWeight(sanitizedInput);
|
||||
setWeightField(sanitizedInput);
|
||||
setWeightFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
|
||||
}}
|
||||
fullWidth
|
||||
sx={{ marginTop: '16px' }}
|
||||
inputProps={{
|
||||
inputMode: 'numeric',
|
||||
pattern: '[0-9]*', // Memungkinkan hanya karakter angka
|
||||
}}
|
||||
error={!!weightFieldError}
|
||||
helperText={weightFieldError}
|
||||
/>
|
||||
<TextField
|
||||
label="Height (cm)"
|
||||
required
|
||||
value={height}
|
||||
onChange={(e) => setHeight(e.target.value)}
|
||||
onChange={(e) => {
|
||||
let input = e.target.value;
|
||||
// Hanya izinkan angka
|
||||
input = input.replace(/[^0-9]/g, '');
|
||||
// Batasi panjang input menjadi 3 digit
|
||||
const maxLength = 3;
|
||||
const sanitizedInput = input.slice(0, maxLength);
|
||||
setHeight(sanitizedInput);
|
||||
setHeightField(sanitizedInput);
|
||||
setHeightFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
|
||||
}}
|
||||
fullWidth
|
||||
sx={{ marginTop: '16px' }}
|
||||
inputProps={{
|
||||
inputMode: 'numeric',
|
||||
pattern: '[0-9]*', // Memungkinkan hanya karakter angka
|
||||
}}
|
||||
error={!!heightFieldError}
|
||||
helperText={heightFieldError}
|
||||
|
||||
/>
|
||||
<TextField
|
||||
label="Email Address"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setEmail(e.target.value)
|
||||
setEmailField(e.target.value);
|
||||
setEmailFieldError(
|
||||
e.target.value.trim() === '' ? 'This field is required' : !isValidEmail(e.target.value) ? 'Invalid email address' : ''
|
||||
);
|
||||
setEmailFieldCheck(isValidEmail(e.target.value));
|
||||
}}
|
||||
fullWidth
|
||||
sx={{ marginTop: '16px' }}
|
||||
error={!!emailFieldError}
|
||||
helperText={emailFieldError}
|
||||
/>
|
||||
<TextField
|
||||
label="Phone No."
|
||||
required
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
onChange={(e) => {
|
||||
let input = e.target.value;
|
||||
// Hanya izinkan angka dan karakter '+'
|
||||
input = input.replace(/[^0-9+]/g, '');
|
||||
// Batasi panjang input menjadi 13 digit
|
||||
const maxLength = 15;
|
||||
const sanitizedInput = input.slice(0, maxLength);
|
||||
setPhone(sanitizedInput);
|
||||
setPhoneField(sanitizedInput);
|
||||
setPhoneFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
|
||||
}}
|
||||
fullWidth
|
||||
sx={{ marginTop: '16px' }}
|
||||
inputProps={{
|
||||
inputMode: 'tel',
|
||||
pattern: '^\\+?[0-9]*$', // Memungkinkan karakter '+' di awal, diikuti oleh angka
|
||||
}}
|
||||
error={!!phoneFieldError}
|
||||
helperText={phoneFieldError}
|
||||
/>
|
||||
{/* <TextField
|
||||
label="Address"
|
||||
@@ -264,7 +381,7 @@ export default function CardPersonalInformation({ data }) {
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleCloseDialog}>Cancel</Button>
|
||||
<Button onClick={handleSaveData} variant="contained" color="primary">
|
||||
<Button onClick={handleSaveData} variant="contained" color="primary" disabled={!isRequiredFieldsFilled()}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogActions>
|
||||
|
||||
@@ -133,7 +133,7 @@ export default function DialogClaimSubmitMember({
|
||||
const response = await axios.get(`${corporateValue}/members`, {
|
||||
params: { ...appliedParams, type: 'claim-submit' },
|
||||
});
|
||||
|
||||
//console.log(response.data.data);
|
||||
setData(response.data.data);
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user