change mongodb to mongo atlas
This commit is contained in:
kicap1992
280
component/admin/theComponent/adminDialog.js
Normal file
280
component/admin/theComponent/adminDialog.js
Normal file
@ -0,0 +1,280 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import FormGroup from '@mui/material/FormGroup';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import Box from '@mui/material/Box';
|
||||
import Card from '@mui/material/Card';
|
||||
|
||||
|
||||
export default function AdminDialog(props) {
|
||||
// console.log(props.datanya);
|
||||
// console.log(props.role);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<Dialog
|
||||
open={props.open}
|
||||
fullWidth={true}
|
||||
onClose={props.handleClose}
|
||||
aria-labelledby="alert-dialog-title"
|
||||
aria-describedby="alert-dialog-description"
|
||||
|
||||
>
|
||||
|
||||
<DialogContent
|
||||
style={{
|
||||
background: 'linear-gradient(to left bottom, #430089, #82ffa1)',
|
||||
color: '#fff'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
align="center"
|
||||
>
|
||||
Detail Kurir
|
||||
</Typography>
|
||||
<Box sx={{ p: 2 }}><Divider sx={{ bgcolor: "white" }} /> </Box>
|
||||
|
||||
<FormGroup sx={{ paddingTop: 1 }}>
|
||||
<span>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
NIK :
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
fontWeight: 'bold',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
{props.datanya.nik}
|
||||
</Typography>
|
||||
</span>
|
||||
</FormGroup>
|
||||
<FormGroup sx={{ paddingTop: 1 }}>
|
||||
<span>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
Nama :
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
fontWeight: 'bold',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
{props.datanya.nama}
|
||||
</Typography>
|
||||
</span>
|
||||
</FormGroup>
|
||||
<FormGroup sx={{ paddingTop: 1 }}>
|
||||
<span>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
No Kenderaan :
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
fontWeight: 'bold',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
{props.datanya.no_kenderaan}
|
||||
</Typography>
|
||||
</span>
|
||||
</FormGroup>
|
||||
<FormGroup sx={{ paddingTop: 1 }}>
|
||||
<span>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
No Telepon :
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
fontWeight: 'bold',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
{props.datanya.no_telp}
|
||||
</Typography>
|
||||
</span>
|
||||
</FormGroup>
|
||||
<FormGroup sx={{ paddingTop: 1 }}>
|
||||
<span>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
Alamat :
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
fontWeight: 'bold',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
{props.datanya.alamat}
|
||||
</Typography>
|
||||
</span>
|
||||
</FormGroup>
|
||||
<FormGroup sx={{ paddingTop: 1 }}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
KTP :
|
||||
</Typography>
|
||||
<Card
|
||||
component="img"
|
||||
sx={{
|
||||
height: 450,
|
||||
width: "100%",
|
||||
// maxHeight: { xs: 233, md: 167 },
|
||||
// maxWidth: { xs: 350, md: 250 },
|
||||
}}
|
||||
alt="The house from the offer."
|
||||
src={props.datanya.ktp_url}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup sx={{ paddingTop: 1 }}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
Memegang KTP :
|
||||
</Typography>
|
||||
<Card
|
||||
component="img"
|
||||
sx={{
|
||||
height: 450,
|
||||
width: "100%",
|
||||
// maxHeight: { xs: 233, md: 167 },
|
||||
// maxWidth: { xs: 350, md: 250 },
|
||||
}}
|
||||
alt="The house from the offer."
|
||||
src={props.datanya.ktp_url}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup sx={{ paddingTop: 1 }}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
Foto:
|
||||
</Typography>
|
||||
<Card
|
||||
component="img"
|
||||
sx={{
|
||||
height: 450,
|
||||
width: "100%",
|
||||
// maxHeight: { xs: 233, md: 167 },
|
||||
// maxWidth: { xs: 350, md: 250 },
|
||||
}}
|
||||
alt="The house from the offer."
|
||||
src={props.datanya.photo_url}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup sx={{ paddingTop: 1 }}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
Kenderaan:
|
||||
</Typography>
|
||||
<Card
|
||||
component="img"
|
||||
sx={{
|
||||
height: 450,
|
||||
width: "100%",
|
||||
// maxHeight: { xs: 233, md: 167 },
|
||||
// maxWidth: { xs: 350, md: 250 },
|
||||
}}
|
||||
alt="The house from the offer."
|
||||
src={props.datanya.kenderaan_url}
|
||||
/>
|
||||
</FormGroup>
|
||||
</DialogContent>
|
||||
<DialogActions
|
||||
style={{
|
||||
background: '#C7D6EA ',
|
||||
color: '#fff'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={
|
||||
() => {
|
||||
props.terimaKurir(props.datanya._id)
|
||||
}
|
||||
}
|
||||
// style={{
|
||||
// color: '#fff',
|
||||
|
||||
// }}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
>
|
||||
Terima<br/>Pendaftaran
|
||||
</Button>
|
||||
<Button
|
||||
onClick={
|
||||
() => {
|
||||
props.batalKurir(props.datanya._id)
|
||||
}
|
||||
}
|
||||
style={{
|
||||
color: '#fff',
|
||||
}}
|
||||
color="error"
|
||||
variant="contained"
|
||||
>
|
||||
Batalkan<br/>Pendaftaran
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
54
component/admin/theComponent/appBar.js
Normal file
54
component/admin/theComponent/appBar.js
Normal file
@ -0,0 +1,54 @@
|
||||
|
||||
import MuiAppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const AppBar = styled(MuiAppBar, {
|
||||
shouldForwardProp: (prop) => prop !== 'open',
|
||||
})(({ theme, open }) => ({
|
||||
transition: theme.transitions.create(['margin', 'width'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
...(open && {
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
marginLeft: `${drawerWidth}px`,
|
||||
transition: theme.transitions.create(['margin', 'width'], {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
}),
|
||||
}));
|
||||
|
||||
function AdminAppBar(props) {
|
||||
return (
|
||||
<AppBar position="fixed" open={props.open}>
|
||||
<Toolbar>
|
||||
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={props.onClick}
|
||||
edge="start"
|
||||
sx={{ mr: 2, ...(props.open && { display: 'none' }) }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Box sx={{ flexGrow: 0.5 }} />
|
||||
<Avatar src="/logo.png" sx={{ mr: 2 }} />
|
||||
<Typography variant="h6" noWrap component="div">
|
||||
Enrekang Kurir
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)
|
||||
}
|
||||
|
||||
export default AdminAppBar;
|
||||
105
component/admin/theComponent/drawer.js
Normal file
105
component/admin/theComponent/drawer.js
Normal file
@ -0,0 +1,105 @@
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import Drawer from '@mui/material/Drawer';
|
||||
import List from '@mui/material/List';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import AdminDrawerHeader from './drawerHeadaer';
|
||||
import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
|
||||
import PlaylistAddCheckIcon from '@mui/icons-material/PlaylistAddCheck';
|
||||
import LogoutIcon from '@mui/icons-material/Logout';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Router from 'next/router';
|
||||
|
||||
|
||||
const listmenu = [
|
||||
{
|
||||
name: "Home",
|
||||
name2: "Verifikasi Kurir",
|
||||
icon: <PlaylistAddIcon />,
|
||||
router: "/admin"
|
||||
},
|
||||
{
|
||||
name: "list_user",
|
||||
name2: "List User",
|
||||
icon: <PlaylistAddCheckIcon />,
|
||||
router: "/admin/list_user"
|
||||
},
|
||||
{
|
||||
name: "logout",
|
||||
name2: "Logout",
|
||||
icon: <LogoutIcon />,
|
||||
// router : "/admin/logout"
|
||||
},
|
||||
]
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
function AdminDrawer(props) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Drawer
|
||||
sx={{
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
'& .MuiDrawer-paper': {
|
||||
width: drawerWidth,
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
}}
|
||||
variant="persistent"
|
||||
anchor="left"
|
||||
open={props.open}
|
||||
>
|
||||
<AdminDrawerHeader>
|
||||
<Typography variant="h6" noWrap>Enrekang Kurir</Typography>
|
||||
<IconButton onClick={props.onClickClose} >
|
||||
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
|
||||
</IconButton>
|
||||
</AdminDrawerHeader>
|
||||
<Divider />
|
||||
<List>
|
||||
{listmenu.map((menu, index) => (
|
||||
<ListItem key={menu.name} disablePadding>
|
||||
<ListItemButton
|
||||
sx={{
|
||||
backgroundColor: (props.title === menu.name) ? '#046767' : null,
|
||||
color: (props.title === menu.name) ? 'white' : "black",
|
||||
'&:hover': {
|
||||
background: (props.title === menu.name) ? "#024848" : null, // ini
|
||||
},
|
||||
cursor: (props.title == menu.name) ? 'default' : "pointer",
|
||||
}}
|
||||
onClick={() =>
|
||||
{
|
||||
if(menu.name != "logout" && menu.name != props.title){
|
||||
props.disconnectSocket()
|
||||
Router.push(menu.router)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
color: (props.title === menu.name) ? 'white' : "black",
|
||||
}}
|
||||
>
|
||||
{menu.icon}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={menu.name2} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
export default AdminDrawer
|
||||
11
component/admin/theComponent/drawerHeadaer.js
Normal file
11
component/admin/theComponent/drawerHeadaer.js
Normal file
@ -0,0 +1,11 @@
|
||||
import { styled , useTheme } from '@mui/material/styles';
|
||||
const AdminDrawerHeader = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: theme.spacing(0, 1),
|
||||
// necessary for content to be below app bar
|
||||
...theme.mixins.toolbar,
|
||||
justifyContent: 'flex-end',
|
||||
}));
|
||||
|
||||
export default AdminDrawerHeader;
|
||||
24
component/admin/theComponent/main.js
Normal file
24
component/admin/theComponent/main.js
Normal file
@ -0,0 +1,24 @@
|
||||
import { styled, useTheme } from '@mui/material/styles';
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const AdminMain = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
|
||||
({ theme, open }) => ({
|
||||
flexGrow: 1,
|
||||
padding: theme.spacing(3),
|
||||
transition: theme.transitions.create('margin', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
marginLeft: `-${drawerWidth}px`,
|
||||
...(open && {
|
||||
transition: theme.transitions.create('margin', {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
marginLeft: 0,
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
export default AdminMain;
|
||||
69
component/appBar.js
Normal file
69
component/appBar.js
Normal file
@ -0,0 +1,69 @@
|
||||
import * as React from 'react';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
|
||||
|
||||
|
||||
|
||||
const MyAppBar = () => {
|
||||
|
||||
return (
|
||||
<AppBar position="static"
|
||||
color='secondary'
|
||||
>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters>
|
||||
<Box sx={{ flexGrow:1 }} />
|
||||
<Avatar src="/logo.png" sx={{ display: { xs: 'none', md: 'flex' }, mr: 2 }} />
|
||||
<Typography
|
||||
|
||||
variant="h5"
|
||||
noWrap
|
||||
component="a"
|
||||
href=""
|
||||
sx={{
|
||||
mr: 2,
|
||||
display: { xs: 'none', md: 'flex' },
|
||||
flexGrow: 1,
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '.3rem',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
Enrekang Kurir
|
||||
</Typography>
|
||||
<Avatar src="/logo.png" sx={{ display: { xs: 'flex', md: 'none' }, mr: 2 }} />
|
||||
<Typography
|
||||
variant="h5"
|
||||
noWrap
|
||||
component="a"
|
||||
href=""
|
||||
sx={{
|
||||
mr: 2,
|
||||
display: { xs: 'flex', md: 'none' },
|
||||
flexGrow: 1,
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '.3rem',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
Enrekang Kurir
|
||||
</Typography>
|
||||
|
||||
|
||||
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
|
||||
);
|
||||
};
|
||||
export default MyAppBar;
|
||||
Reference in New Issue
Block a user