Blaster4385/aadhaar-kiosk-web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

admin UI fixes

Browse source
This commit is contained in:
rohan09-raj 2022-08-26 02:04:49 +05:30
parent 3e354484fb
commit 951b6dbaf9
12 changed files with 237 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
admin/package.json
View file

@ -5,6 +5,7 @@
"dependencies": {
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@mui/lab": "^5.0.0-alpha.96",
"@mui/material": "^5.10.2",
"@mui/styles": "^5.10.2",
"@testing-library/jest-dom": "^5.16.5",

121
admin/src/components/Accordion/Accordion.jsx
View file

@ -2,54 +2,91 @@ import React, {useState} from 'react';
import {Button} from '@mui/material';
import styles from './Accordion.module.css';
import PopUpModal from '../Modal/Modal';
const Accordion = ({name, user}) => {
const [isActive, setIsActive] = useState(false);
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
return (
<div className={styles.accordion}>
<div
className={styles.accordion__title}
onClick={() => setIsActive(!isActive)}
>
<h2>{name}</h2>
<div>&#10095;</div>
</div>
{isActive && (
<div className={styles.accordion__content}>
<div className={styles.accordion__demographic}>
<div><span>Name</span> <hr/> {user.name}</div>
<div><span>Gender</span> <hr/> {user.gender}</div>
<div><span>Date of Birth</span> <hr/> {user.dob}</div>
<div><span>Mobile Number</span> <hr/> {user.mobile}</div>
<div><span>Email</span> <hr/> {user.email}</div>
<div><span>Address</span> <hr/> {user.address.houseNo},{user.address.street},
{user.address.locality},{user.address.landmark},
{user.address.village},{user.address.district.name},
{user.address.state.name},{user.address.pincode}</div>
<div><span>Indian Resident</span> <hr/> {user.indianResident ? 'Yes' : 'No'}</div>
</div>
<div className={styles.accordion__biometric}>
<img
src={user.photo}
alt=''
height='300px'
className={styles.accordion__biometric_image}
/>
<Button
sx={{margin: '10px 0px', padding: '20px'}}
variant='contained'
onClick={() => {}}
>
Documents
</Button>
<Button sx={{padding: '20px'}} variant='contained'>
Biometric
</Button>
</div>
<>
<div className={styles.accordion}>
<div
className={styles.accordion__title}
onClick={() => setIsActive(!isActive)}
>
<h2>{name}</h2>
<span className={styles.accordion__subheading}>
Date of Birth: {user.dob}
</span>
<span className={styles.accordion__subheading}>
Mobile Number: {user.mobile}
</span>
<div>&#10095;</div>
</div>
)}
</div>
{isActive && (
<div className={styles.accordion__content}>
<div className={styles.accordion__demographic}>
<div>
<span>Name</span> <hr /> {user.name}
</div>
<div>
<span>Gender</span> <hr /> {user.gender}
</div>
<div>
<span>Date of Birth</span> <hr /> {user.dob}
</div>
<div>
<span>Mobile Number</span> <hr /> {user.mobile}
</div>
<div>
<span>Email</span> <hr /> {user.email}
</div>
<div>
<span>Address</span> <hr /> {user.address.houseNo},
{user.address.street},{user.address.locality},
{user.address.landmark},{user.address.village},
{user.address.district.name},{user.address.state.name},
{user.address.pincode}
</div>
<div>
<span>Indian Resident</span> <hr />{' '}
{user.indianResident ? 'Yes' : 'No'}
</div>
</div>
<div className={styles.accordion__biometric}>
<img
src={user.photo}
alt=''
height='300px'
className={styles.accordion__biometric_image}
/>
<Button
sx={{margin: '10px 0px', padding: '20px'}}
variant='contained'
onClick={() => {
handleOpen();
}}
>
Documents
</Button>
<Button
sx={{padding: '20px'}}
variant='contained'
onClick={() => {
handleOpen();
}}
>
Biometric
</Button>
</div>
</div>
)}
</div>
<PopUpModal open={open} setOpen={setOpen} documents={user.documents} />
</>
);
};

6
admin/src/components/Accordion/Accordion.module.css
View file

@ -5,7 +5,7 @@
.accordion__title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
cursor: pointer;
background-color: #2c3e50;
@ -23,6 +23,10 @@
padding: 1rem;
}
.accordion__subheading {
font-size: 1.1rem;
}
.accordion__content {
display: flex;
justify-content: center;

18
admin/src/components/Header/Header.jsx
View file

@ -1,13 +1,17 @@
import React from 'react'
import styles from './Header.module.css'
import React from 'react';
import styles from './Header.module.css';
const Header = ({ subheading }) => {
const Header = ({subheading}) => {
return (
<header className={styles.header}>
<img src={`${process.env.PUBLIC_URL}/favicon.ico`} className={styles.header__image}/>
<img
src={`${process.env.PUBLIC_URL}/favicon.ico`}
className={styles.header__image}
alt=''
/>
<h3 className={styles.header__subheading}>{subheading}</h3>
</header>
)
}
);
};
export default Header
export default Header;

78
admin/src/components/Modal/Modal.jsx Normal file
View file

@ -0,0 +1,78 @@
import React from 'react';
import {Modal, Box} from '@mui/material';
import styles from './Modal.module.css';
import Tab from '@mui/material/Tab';
import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList';
import TabPanel from '@mui/lab/TabPanel';
const PopUpModal = ({documents, open, setOpen}) => {
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 1000,
bgcolor: 'background.paper',
borderRadius: '10px',
boxShadow: 24,
p: 4,
};
const [value, setValue] = React.useState('1');
const handleChange = (event, newValue) => {
setValue(newValue);
};
const handleClose = () => setOpen(false);
return (
<div className={styles.modal}>
<Modal
open={open}
onClose={handleClose}
aria-labelledby='modal-modal-title'
aria-describedby='modal-modal-description'
>
<Box sx={style}>
<TabContext value={value}>
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
<TabList onChange={handleChange}>
<Tab label='Proof of Identity' value='1' />
<Tab label='Proof of Address' value='2' />
<Tab label='Proof of Date of Birth' value='3' />
</TabList>
</Box>
<TabPanel
value='1'
sx={{
textAlign: 'center',
}}
>
<img src={documents.POI} alt='' />
</TabPanel>
<TabPanel
value='2'
sx={{
textAlign: 'center',
}}
>
<img src={documents.POA} alt='' />
</TabPanel>
<TabPanel
value='3'
sx={{
textAlign: 'center',
}}
>
<img src={documents.DOB} alt='' />
</TabPanel>
</TabContext>
</Box>
</Modal>
</div>
);
};
export default PopUpModal;

21
admin/src/components/Modal/Modal.module.css Normal file
View file

@ -0,0 +1,21 @@
.modal {
margin: 0px 15px;
position: absolute;
top: 100px;
right: 250px;
}
.modal__title {
text-align: center;
margin: 20px 0px 40px;
font-size: var(--font-medium-large);
}
.modal__image {
width: 50%;
}
.modal__content {
width: 50%;
font-size: var(--font-medium-sm);
}

9
admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx
View file

@ -10,6 +10,7 @@ import {
import {useQuery, useMutation} from 'react-query';
import {useNavigate} from 'react-router-dom';
import BackButton from '../../components/BackButton/BackButton';
import {sendMessage} from '../../services/apiservice';
import styles from './EnrollmentRequests.module.css';
@ -28,6 +29,10 @@ const EnrollmentRequests = () => {
},
});
const setConfirm = useMutation((payload) => {
sendMessage(payload);
});
return (
<div className={styles.unverified_users}>
<Header subheading='Admin' />
@ -46,7 +51,9 @@ const EnrollmentRequests = () => {
<Button
title='Reject'
color='red'
onClick={() => deleteUse.mutate(item._id)}
onClick={() => {
deleteUse.mutate(item._id);
}}
/>
</div>
))

22
admin/src/pages/UpdateRequests/UpdateRequests.jsx
View file

@ -49,16 +49,18 @@ const UpdateRequests = () => {
data?.data.map((item) => (
<div className={styles.unverified_users__accordion} key={item._id}>
<Accordion name={item.name} user={item} />
<Button
title='Accept'
color='green'
onClick={() => updateUse.mutate(item._id)}
/>
<Button
title='Reject'
color='red'
onClick={() => deleteUse.mutate(item._id)}
/>
<div>
<Button
title='Accept'
color='green'
onClick={() => updateUse.mutate(item._id)}
/>
<Button
title='Reject'
color='red'
onClick={() => deleteUse.mutate(item._id)}
/>
</div>
</div>
))
) : (

5
admin/src/services/apiservice.js
View file

@ -28,3 +28,8 @@ export const updatingUsers = async () => {
const response = await apiClient.get(`/users/updating`);
return response;
};
export const sendMessage = async (payload) => {
const response = await apiClient.post('/message', payload);
return response;
};

13
admin/yarn.lock
View file

@ -1611,6 +1611,19 @@
resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.2.tgz#d54811df1d2d26ce87c0648e0e17061a41fe292c"
integrity sha512-1guoGvL3QZ7VjA3y9zye9Rpm+jz18rVZIo3AauTGyW5ntDMxr/cR0M18nuc/NH2KqpMt+coh4NwPEO1uPuKM5w==
"@mui/lab@^5.0.0-alpha.96":
version "5.0.0-alpha.96"
resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.96.tgz#f34e6c86ff4c1fc9a87592c8428b0771d3c1c970"
integrity sha512-hA3nef9cV50eIljPA/otQ6CrDeI276UGRJmVw6YZzSBtUeGuE9FY411VOZeST4I4OM88RD3lwiRbN5aTX5Nn3g==
dependencies:
"@babel/runtime" "^7.17.2"
"@mui/base" "5.0.0-alpha.94"
"@mui/system" "^5.10.2"
"@mui/utils" "^5.9.3"
clsx "^1.2.1"
prop-types "^15.8.1"
react-is "^18.2.0"
"@mui/material@^5.10.2":
version "5.10.2"
resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.10.2.tgz#e440c7839bff31c9bb075ce12eaebac83b4f1d9e"

2
client/src/components/Card/Card.jsx
View file

@ -4,7 +4,7 @@ import styles from './Card.module.css'
const Card = ({ title, image, onClick }) => {
return (
<div onClick={onClick} className={styles.card}>
<img className={styles.card__image} src={image} alt="" height="300px" />
<img className={styles.card__image} src={image} alt="" height="250px" />
<h2 className={styles.card__title}>{title}</h2>
</div>
)

6
client/src/components/Card/Card.module.css
View file

@ -1,8 +1,8 @@
@import '../../styles/GlobalVariables.css';
.card {
height: 500px;
width: 500px;
height: 400px;
width: 400px;
display: flex;
flex-direction: column;
justify-content: center;
@ -13,7 +13,7 @@
transition: 0.2s all;
cursor: pointer;
color: var(--color-black);
font-size: 2.25rem;
font-size: 1.5rem;
text-decoration: none;
}