Profile Admin
This commit is contained in:
pajri
379
frontend/dashboard/src/pages/Profile/Index.tsx
Normal file
379
frontend/dashboard/src/pages/Profile/Index.tsx
Normal file
@@ -0,0 +1,379 @@
|
||||
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}>
|
||||
<Card 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>
|
||||
<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 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>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
<Card 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>
|
||||
</Card>
|
||||
<div style={{ display: 'flex', justifyContent: 'Center', color: '#CB3A31' }}>
|
||||
<MenuItem sx={{ m: 5 }} onClick={handleLogout}>
|
||||
<LogoutTwoToneIcon /> Logout
|
||||
</MenuItem>
|
||||
</div>
|
||||
{/* </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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user