389 lines
11 KiB
TypeScript
389 lines
11 KiB
TypeScript
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,
|
|
Chip,
|
|
styled,
|
|
DialogTitle,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogActions,
|
|
Switch,
|
|
Avatar,
|
|
MenuItemClasses,
|
|
} from '@mui/material';
|
|
import * as Yup from 'yup';
|
|
import { yupResolver } from '@hookform/resolvers/yup';
|
|
|
|
import {
|
|
Link,
|
|
NavLink as RouterLink,
|
|
useSearchParams,
|
|
useNavigate,
|
|
useParams,
|
|
} from 'react-router-dom';
|
|
// hooks
|
|
import React, { ChangeEvent, Component, useEffect, useMemo, useRef, useState } from 'react';
|
|
import useSettings from '../../hooks/useSettings';
|
|
// components
|
|
import axios from '../../utils/axios';
|
|
import { LaravelPaginatedData } from '../../@types/paginated-data';
|
|
import { Icd } from '../../@types/diagnosis';
|
|
import BasePagination from '../../components/BasePagination';
|
|
import { Users } from '../../@types/user';
|
|
import CreateIcon from '@mui/icons-material/Create';
|
|
import { Props } from '../../components/editor/index';
|
|
import { red } from '@mui/material/colors';
|
|
import { borderRadius, margin, padding } from '@mui/system';
|
|
|
|
import FormPassword from './FormPassword';
|
|
import OrganizationsForm from './FormPassword';
|
|
import DialogTopUpLimit from './DialogTopUpLimit';
|
|
import { number } from 'yup/lib/locale';
|
|
import AccountBoxIcon from '@mui/icons-material/AccountBox';
|
|
import PersonIcon from '@mui/icons-material/Person';
|
|
import BadgeIcon from '@mui/icons-material/Badge';
|
|
import CallIcon from '@mui/icons-material/Call';
|
|
import MailIcon from '@mui/icons-material/Mail';
|
|
import LocationOnIcon from '@mui/icons-material/LocationOn';
|
|
import LockIcon from '@mui/icons-material/Lock';
|
|
import KeyIcon from '@mui/icons-material/Key';
|
|
import useAuth from '../../hooks/useAuth';
|
|
import LogoutTwoToneIcon from '@mui/icons-material/LogoutTwoTone';
|
|
|
|
export default function List() {
|
|
// Generate the every row of the table
|
|
const HeaderStyle = styled('header')(({ theme }) => ({
|
|
padding: theme.spacing(5),
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
}));
|
|
|
|
const Name = styled(Typography)(({ theme }) => ({
|
|
...theme.typography.h3,
|
|
marginBottom: theme.spacing(1),
|
|
marginTop: theme.spacing(2),
|
|
color: '#005B7F',
|
|
}));
|
|
|
|
const LabelStyle = styled(Typography)(({ theme }) => ({
|
|
...theme.typography.h6,
|
|
marginBottom: theme.spacing(2),
|
|
marginTop: theme.spacing(2),
|
|
color: '#005B7F',
|
|
}));
|
|
|
|
const navigate = useNavigate();
|
|
const { organization_id } = useParams();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const [importResult, setImportResult] = useState(null);
|
|
|
|
const { id } = useParams();
|
|
const isEdit = id ? true : false;
|
|
|
|
const Item = styled(Paper)(({ theme }) => ({
|
|
textAlign: 'left',
|
|
}));
|
|
|
|
const ButtonStyle = {
|
|
color: '#005B7F',
|
|
backgroundColor: '#FFFFFF',
|
|
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
|
|
borderRadius: '8px',
|
|
flex: 1,
|
|
marginRight: 3,
|
|
padding: '13px',
|
|
border: '2px solid #005B7F',
|
|
fontSize: '15px',
|
|
lineHeight: '16px',
|
|
textTransform: 'none',
|
|
'&:hover': {
|
|
backgroundColor: '#005B7F',
|
|
color: '#FFFFFF',
|
|
},
|
|
};
|
|
|
|
const ButtonStyle2 = {
|
|
color: '#CB3A31',
|
|
flex: 1,
|
|
marginRight: 3,
|
|
padding: '13px',
|
|
fontSize: '15px',
|
|
lineHeight: '16px',
|
|
textTransform: 'none',
|
|
'&:hover': {
|
|
backgroundColor: '#DFE2E1',
|
|
},
|
|
};
|
|
|
|
function createData(Users: Users): Users {
|
|
return {
|
|
...Users,
|
|
};
|
|
}
|
|
|
|
const headStyle = {
|
|
fontWeight: 'bold',
|
|
};
|
|
|
|
function DataUsers() {
|
|
const [user, setUser] = useState([]);
|
|
useEffect(() => {
|
|
axios.get('/user').then((response) => {
|
|
setUser(response.data);
|
|
});
|
|
}, []);
|
|
|
|
const defaultValues = useMemo(
|
|
() => ({
|
|
id: user?.id,
|
|
email: user?.email,
|
|
}),
|
|
[user]
|
|
);
|
|
|
|
console.log('user', user);
|
|
return (
|
|
<div>
|
|
<Typography variant="h3" sx={{ mb: 5 }}>
|
|
Profile
|
|
</Typography>
|
|
<Box position="relative" mb={5}>
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
position="relative"
|
|
minHeight="18.75rem"
|
|
borderRadius="xl"
|
|
sx={{
|
|
borderRadius: '20px',
|
|
}}
|
|
>
|
|
<img
|
|
src="/image/overlay.png"
|
|
alt="overlay"
|
|
width="100%"
|
|
height="100%"
|
|
style={{ borderTopLeftRadius: '20px', borderTopRightRadius: '20px' }}
|
|
/>
|
|
</Box>
|
|
<Card
|
|
sx={{
|
|
position: 'relative',
|
|
mt: -8,
|
|
mx: 3,
|
|
py: 2,
|
|
px: 2,
|
|
}}
|
|
>
|
|
<Grid container spacing={3} alignItems="center" sx={{ p: 3 }}>
|
|
<Grid item>
|
|
<Avatar
|
|
src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
|
|
alt="Rayan Moran"
|
|
sx={{ width: 100, height: 100, ml: '4%' }}
|
|
/>
|
|
</Grid>
|
|
<Grid item>
|
|
<Box height="100%" mt={0.5} lineHeight={1} sx={{ ml: 5 }}>
|
|
<Typography variant="h4" fontWeight="700">
|
|
Rayan Moran
|
|
</Typography>
|
|
<Typography variant="subtitle1" color="text.secondary">
|
|
Super Admin
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
<Grid item xs={12} md={6} lg={4} sx={{ ml: 'auto' }}></Grid>
|
|
</Grid>
|
|
</Card>
|
|
</Box>
|
|
<Stack spacing={3}>
|
|
<Grid container spacing={3}>
|
|
<Grid item xs={12} md={6}>
|
|
<Box sx={{ p: 3 }}>
|
|
<Grid sx={{ mt: 5, ml: 5, mb: 2 }}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
pb: 2,
|
|
borderBottom: '5px solid',
|
|
}}
|
|
>
|
|
<Stack spacing={2} justifyContent="center" alignItems="center" direction="row">
|
|
<AccountBoxIcon />
|
|
<Typography variant="h4" sx={{ ml: 1 }}>
|
|
Profil
|
|
</Typography>
|
|
</Stack>
|
|
</Box>
|
|
</Grid>
|
|
<Box sx={{ p: 5 }}>
|
|
<Grid container spacing={3}>
|
|
<Grid item xs={12} md={6}>
|
|
<Grid item xs={12} md={12}>
|
|
<LabelStyle>
|
|
<PersonIcon /> ID
|
|
</LabelStyle>
|
|
<Title>{user?.id ? user?.id : '-'}</Title>
|
|
</Grid>
|
|
<Grid item xs={12} md={12}>
|
|
<LabelStyle>
|
|
<BadgeIcon /> Nama
|
|
</LabelStyle>
|
|
<Title>Perdi</Title>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={12} md={6}>
|
|
<Grid item xs={12} md={12}>
|
|
<LabelStyle>
|
|
<CallIcon /> Telepon
|
|
</LabelStyle>
|
|
<Title>2131231231</Title>
|
|
</Grid>
|
|
<Grid item xs={12} md={12}>
|
|
<LabelStyle>
|
|
<MailIcon /> Email
|
|
</LabelStyle>
|
|
<Title>{user?.email ? user?.email : '-'}</Title>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</Box>
|
|
</Grid>
|
|
<Grid item xs={12} md={6}>
|
|
<Box sx={{ p: 3 }}>
|
|
<Grid sx={{ mt: 5, ml: 5, mb: 2 }}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
pb: 2,
|
|
borderBottom: '5px solid',
|
|
}}
|
|
>
|
|
<Stack spacing={2} justifyContent="center" alignItems="center" direction="row">
|
|
<LockIcon />
|
|
<Typography variant="h4" sx={{ ml: 1 }}>
|
|
Keamanan
|
|
</Typography>
|
|
</Stack>
|
|
</Box>
|
|
</Grid>
|
|
<Box sx={{ p: 5 }}>
|
|
<Grid item xs={12} md={12}>
|
|
<div style={{ display: 'flex', justifyContent: 'Center' }}>
|
|
<Button
|
|
variant="contained"
|
|
sx={ButtonStyle}
|
|
startIcon={<KeyIcon />}
|
|
onClick={() => {
|
|
clickHandler('edit');
|
|
setEdit(user.id);
|
|
}}
|
|
>
|
|
Ubah Kata Sandi
|
|
</Button>
|
|
</div>
|
|
</Grid>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{ p: 3 }} style={{ display: 'flex', justifyContent: 'center' }}>
|
|
<Button onClick={handleLogout} variant="outlined" color="error">
|
|
<LogoutTwoToneIcon /> Logout
|
|
</Button>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
{/* </Box>
|
|
</React.Fragment> */}
|
|
</Stack>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const Title = styled(Typography)(({ theme }) => ({
|
|
boxShadow: 'none',
|
|
// paddingBottom: theme.spacing(3),
|
|
fontWeight: 700,
|
|
color: '#000000',
|
|
}));
|
|
|
|
const TitleRole = styled(Typography)(({ theme }) => ({
|
|
...theme.typography.h5,
|
|
boxShadow: 'none',
|
|
fontWeight: 500,
|
|
color: '#000000',
|
|
}));
|
|
|
|
const [openDialog, setOpenDialog] = useState(false);
|
|
const [dialogTitle, setDialogTitle] = useState('');
|
|
const [isDialog, setIsDialog] = useState('');
|
|
const [edit, setEdit] = useState(number);
|
|
const clickHandler = (isDialog: string) => {
|
|
switch (isDialog) {
|
|
case 'edit':
|
|
setIsDialog(isDialog);
|
|
setOpenDialog(true);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
const { logout } = useAuth();
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
navigate('/auth/login');
|
|
};
|
|
|
|
return (
|
|
<Stack>
|
|
<Card sx={{ marginTop: '30px', p: 5, boxShadow: 'none' }}>
|
|
{/* <Row /> */}
|
|
<DataUsers />
|
|
{/* {dataTableData.map((row) => (
|
|
<Row key={row.id} row={row} />
|
|
))} */}
|
|
</Card>
|
|
|
|
{isDialog === 'edit' && (
|
|
<FormPassword
|
|
data={edit}
|
|
openDialog={openDialog}
|
|
setOpenDialog={setOpenDialog}
|
|
title={{ name: dialogTitle, icon: 'heroicons-solid:cash' }}
|
|
/>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|