From 54a27fb52551069fa6d40c6f5941c5d49c0f0506 Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Thu, 25 Aug 2022 11:52:33 +0530 Subject: admin UI improvement and back button added --- admin/public/assets/images/back.svg | 1 + admin/public/assets/images/enrollment.svg | 11 ++++ admin/public/assets/images/update.svg | 11 ++++ admin/src/components/Accordion/Accordion.jsx | 56 +++++++++++------ .../src/components/Accordion/Accordion.module.css | 30 ++++++++- admin/src/components/BackButton/BackButton.jsx | 23 +++++++ .../components/BackButton/BackButton.module.css | 20 ++++++ admin/src/components/Card/Card.jsx | 22 ++++--- .../EnrollmentRequests/EnrollmentRequests.jsx | 61 ++++++++++++++++++ .../EnrollmentRequests.module.css | 21 +++++++ admin/src/pages/Home/Home.jsx | 14 +++-- .../src/pages/UnverifiedUsers/UnverifiedUsers.jsx | 60 ------------------ .../UnverifiedUsers/UnverifiedUsers.module.css | 21 ------- admin/src/pages/UpdateRequests/UpdateRequests.jsx | 72 ++++++++++++++++++++++ .../pages/UpdateRequests/UpdateRequests.module.css | 21 +++++++ admin/src/routes/index.js | 11 ++-- admin/src/styles/GlobalVariables.css | 4 ++ .../src/components/AudioAutoplay/AudioAutoplay.jsx | 26 ++++++++ client/src/pages/Enrollment/FormOne/FormOne.jsx | 2 + 19 files changed, 371 insertions(+), 116 deletions(-) create mode 100644 admin/public/assets/images/back.svg create mode 100644 admin/public/assets/images/enrollment.svg create mode 100644 admin/public/assets/images/update.svg create mode 100644 admin/src/components/BackButton/BackButton.jsx create mode 100644 admin/src/components/BackButton/BackButton.module.css create mode 100644 admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx create mode 100644 admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css delete mode 100644 admin/src/pages/UnverifiedUsers/UnverifiedUsers.jsx delete mode 100644 admin/src/pages/UnverifiedUsers/UnverifiedUsers.module.css create mode 100644 admin/src/pages/UpdateRequests/UpdateRequests.jsx create mode 100644 admin/src/pages/UpdateRequests/UpdateRequests.module.css create mode 100644 client/src/components/AudioAutoplay/AudioAutoplay.jsx diff --git a/admin/public/assets/images/back.svg b/admin/public/assets/images/back.svg new file mode 100644 index 0000000..16b658a --- /dev/null +++ b/admin/public/assets/images/back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/admin/public/assets/images/enrollment.svg b/admin/public/assets/images/enrollment.svg new file mode 100644 index 0000000..efbc75f --- /dev/null +++ b/admin/public/assets/images/enrollment.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/admin/public/assets/images/update.svg b/admin/public/assets/images/update.svg new file mode 100644 index 0000000..08f6a12 --- /dev/null +++ b/admin/public/assets/images/update.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/admin/src/components/Accordion/Accordion.jsx b/admin/src/components/Accordion/Accordion.jsx index 62663a6..4e7c1c1 100644 --- a/admin/src/components/Accordion/Accordion.jsx +++ b/admin/src/components/Accordion/Accordion.jsx @@ -18,28 +18,48 @@ const Accordion = ({name, user}) => { {isActive && (
-
Name : {user.name}
-
Gender : {user.gender}
-
Date of Birth : {user.dob}
-
Mobile Number : {user.mobile}
-
Email : {user.email}
-
- Address : {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} +
+
Name
+
Gender
+
Date of Birth
+
Mobile Number
+
Email
+
Address
+
Indian Resident
+
+
+
+
{user.name}
+
{user.gender}
+
{user.dob}
+
{user.mobile}
+
{user.email}
+
+ {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} +
+
Indian Resident : {user.indianResident ? 'Yes' : 'No'}
-
Indian Resident : {user.indianResident ? 'Yes' : 'No'}
- - - + + +
- - - -
)}
diff --git a/admin/src/components/Accordion/Accordion.module.css b/admin/src/components/Accordion/Accordion.module.css index 86a1c7b..70bee92 100644 --- a/admin/src/components/Accordion/Accordion.module.css +++ b/admin/src/components/Accordion/Accordion.module.css @@ -1,5 +1,5 @@ .accordion { - width: 600px; + width: 1500px; margin: 2rem auto; } @@ -24,6 +24,34 @@ } .accordion__content { + display: flex; + justify-content: center; + background-color: #2c3e50; + border-radius: 10px; + margin: 10px 0px; +} + +.accordion__demographic { + display: flex; + width: 60%; background-color: #ecf0f1; border-radius: 10px; + margin-right: 10px; + padding: 20px; +} + +.accordion__biometric { + width: 40%; + display: flex; + flex-direction: column; +} + +.accordion__biometric_image { + border-radius: 6px; +} + +.demographic__heading div, +.demographic__content div { + margin: 20px 0px; + font-size: var(--font-medium-s); } diff --git a/admin/src/components/BackButton/BackButton.jsx b/admin/src/components/BackButton/BackButton.jsx new file mode 100644 index 0000000..ff99eb6 --- /dev/null +++ b/admin/src/components/BackButton/BackButton.jsx @@ -0,0 +1,23 @@ +import React from 'react' +import styles from './BackButton.module.css' + +const BackButton = ({ onClick, onChange }) => { + return ( + <> + + + ) +} + +export default BackButton diff --git a/admin/src/components/BackButton/BackButton.module.css b/admin/src/components/BackButton/BackButton.module.css new file mode 100644 index 0000000..cc9b51c --- /dev/null +++ b/admin/src/components/BackButton/BackButton.module.css @@ -0,0 +1,20 @@ +.submit { + position: absolute; + top: 100px; + left: 150px; + background: transparent; + border: none; + border-radius: 50%; + transition: 0.2s all; + cursor: pointer; +} + +.submit:active { + transform: scale(0.98); + box-shadow: 3px 2px 22px 1px var(--color-shadow); +} + +.submit__image { + height: 75px; + width: 75px; +} diff --git a/admin/src/components/Card/Card.jsx b/admin/src/components/Card/Card.jsx index 9460955..d57607b 100644 --- a/admin/src/components/Card/Card.jsx +++ b/admin/src/components/Card/Card.jsx @@ -1,13 +1,19 @@ -import React from 'react' -import styles from './Card.module.css' +import React from 'react'; +import styles from './Card.module.css'; -const Card = ({ title, image, onClick }) => { +const Card = ({title, image, onClick}) => { return ( -
- +
+

{title}

- ) -} + ); +}; -export default Card +export default Card; diff --git a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx new file mode 100644 index 0000000..8423fc0 --- /dev/null +++ b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx @@ -0,0 +1,61 @@ +import React from 'react'; +import Accordion from '../../components/Accordion/Accordion'; +import Button from '../../components/Button/Button'; +import Header from '../../components/Header/Header'; +import { + deleteUser, + getUnverifiedUsers, + updateUser, +} from '../../services/apiservice'; +import {useQuery, useMutation} from 'react-query'; +import {useNavigate} from 'react-router-dom'; +import BackButton from '../../components/BackButton/BackButton'; + +import styles from './EnrollmentRequests.module.css'; + +const EnrollmentRequests = () => { + const navigate = useNavigate(); + const {data, refetch} = useQuery('unverified', getUnverifiedUsers); + const deleteUse = useMutation((id) => deleteUser(id), { + onSuccess: () => { + refetch(); + }, + }); + + const updateUse = useMutation((id) => updateUser(id, {verified: true}), { + onSuccess: () => { + refetch(); + }, + }); + + return ( +
+
+ navigate('/')} /> +

Unverified Users

+
+ {data?.data.length !== 0 ? ( + data?.data.map((item) => ( +
+ +
+ )) + ) : ( +
No Data Found
+ )} +
+
+ ); +}; + +export default EnrollmentRequests; diff --git a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css new file mode 100644 index 0000000..652fe52 --- /dev/null +++ b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css @@ -0,0 +1,21 @@ +.unverified_users { + display: flex; + flex-direction: column; + justify-content: center; +} + +.unverified_users__heading { + text-align: center; +} + +.unverified_users__accordion { + display: flex; + justify-content: center; + align-items: center; + width: 80%; +} + +.unverified_users__nodata { + margin: 20px; + text-align: center; +} diff --git a/admin/src/pages/Home/Home.jsx b/admin/src/pages/Home/Home.jsx index b8d556e..bdc01c8 100644 --- a/admin/src/pages/Home/Home.jsx +++ b/admin/src/pages/Home/Home.jsx @@ -12,14 +12,20 @@ const Home = ({page, setPage}) => {
- + + + +
diff --git a/admin/src/pages/UnverifiedUsers/UnverifiedUsers.jsx b/admin/src/pages/UnverifiedUsers/UnverifiedUsers.jsx deleted file mode 100644 index 0c3a57d..0000000 --- a/admin/src/pages/UnverifiedUsers/UnverifiedUsers.jsx +++ /dev/null @@ -1,60 +0,0 @@ -import React, {useEffect} from 'react'; -import Accordion from '../../components/Accordion/Accordion'; -import Button from '../../components/Button/Button'; -import Header from '../../components/Header/Header'; -import { - deleteUser, - getUnverifiedUsers, - updateUser, -} from '../../services/apiservice'; -import {useQuery, useMutation} from 'react-query'; - -import styles from './UnverifiedUsers.module.css'; -import Spinner from '../../components/Spinner/Spinner'; - -const UnverifiedUsers = () => { - const {data, isLoading, isError} = useQuery('unverified', getUnverifiedUsers); - const deleteUse = useMutation((id) => deleteUser(id)); - const updateUse = useMutation((id) => updateUser(id, {verified: true})); - - useEffect(() => {}, [data]); - - if (isLoading) { - return - } - - if (isError) { - return
Error
- } - - - return ( -
-
-

Unverified Users

-
- {data?.data.length !== 0 ? ( - data?.data.map((item) => ( -
- -
- )) - ) : ( -
No Data Found
- )} -
-
- ); -}; - -export default UnverifiedUsers; diff --git a/admin/src/pages/UnverifiedUsers/UnverifiedUsers.module.css b/admin/src/pages/UnverifiedUsers/UnverifiedUsers.module.css deleted file mode 100644 index 652fe52..0000000 --- a/admin/src/pages/UnverifiedUsers/UnverifiedUsers.module.css +++ /dev/null @@ -1,21 +0,0 @@ -.unverified_users { - display: flex; - flex-direction: column; - justify-content: center; -} - -.unverified_users__heading { - text-align: center; -} - -.unverified_users__accordion { - display: flex; - justify-content: center; - align-items: center; - width: 80%; -} - -.unverified_users__nodata { - margin: 20px; - text-align: center; -} diff --git a/admin/src/pages/UpdateRequests/UpdateRequests.jsx b/admin/src/pages/UpdateRequests/UpdateRequests.jsx new file mode 100644 index 0000000..174dbdc --- /dev/null +++ b/admin/src/pages/UpdateRequests/UpdateRequests.jsx @@ -0,0 +1,72 @@ +import React from 'react'; +import Accordion from '../../components/Accordion/Accordion'; +import Button from '../../components/Button/Button'; +import Header from '../../components/Header/Header'; +import { + deleteUser, + getUnverifiedUsers, + updateUser, +} from '../../services/apiservice'; +import {useQuery, useMutation} from 'react-query'; +import {useNavigate} from 'react-router-dom'; +import styles from './UpdateRequests.module.css'; +import BackButton from '../../components/BackButton/BackButton'; +import Spinner from '../../components/Spinner/Spinner'; + +const UpdateRequests = () => { + const navigate = useNavigate(); + const {data, isLoading, isError, refetch} = useQuery( + 'unverified', + getUnverifiedUsers + ); + const deleteUse = useMutation((id) => deleteUser(id), { + onSuccess: () => { + refetch(); + }, + }); + + const updateUse = useMutation((id) => updateUser(id, {verified: true}), { + onSuccess: () => { + refetch(); + }, + }); + + if (isLoading) { + return ; + } + + if (isError) { + return
Error
; + } + + return ( +
+
+ navigate('/')} /> +

Unverified Users

+
+ {data?.data.length !== 0 ? ( + data?.data.map((item) => ( +
+ +
+ )) + ) : ( +
No Data Found
+ )} +
+
+ ); +}; + +export default UpdateRequests; diff --git a/admin/src/pages/UpdateRequests/UpdateRequests.module.css b/admin/src/pages/UpdateRequests/UpdateRequests.module.css new file mode 100644 index 0000000..652fe52 --- /dev/null +++ b/admin/src/pages/UpdateRequests/UpdateRequests.module.css @@ -0,0 +1,21 @@ +.unverified_users { + display: flex; + flex-direction: column; + justify-content: center; +} + +.unverified_users__heading { + text-align: center; +} + +.unverified_users__accordion { + display: flex; + justify-content: center; + align-items: center; + width: 80%; +} + +.unverified_users__nodata { + margin: 20px; + text-align: center; +} diff --git a/admin/src/routes/index.js b/admin/src/routes/index.js index a42c529..f306a3b 100644 --- a/admin/src/routes/index.js +++ b/admin/src/routes/index.js @@ -1,8 +1,8 @@ import React from 'react'; import {Route, Routes} from 'react-router-dom'; - import Home from '../pages/Home/Home'; -import UnverifiedUsers from '../pages/UnverifiedUsers/UnverifiedUsers'; +import EnrollmentRequests from '../pages/EnrollmentRequests/EnrollmentRequests'; +import UpdateRequests from '../pages/UpdateRequests/UpdateRequests'; import VerifiedUsers from '../pages/VerifiedUsers/VerifiedUsers'; const Index = () => { @@ -12,8 +12,11 @@ const Index = () => { } /> - - } /> + + } /> + + + } /> ); diff --git a/admin/src/styles/GlobalVariables.css b/admin/src/styles/GlobalVariables.css index a1e3384..2786f06 100644 --- a/admin/src/styles/GlobalVariables.css +++ b/admin/src/styles/GlobalVariables.css @@ -3,6 +3,10 @@ --color-shadow: rgba(0, 0, 0, 0.24); --font-large: 4rem; + --font-medium-lm: 3rem; + --font-medium-large: 2.5rem; --font-medium: 2rem; + --font-medium-sm: 1.5rem; --font-medium-s: 1.25rem; + --font-small: 1rem; } diff --git a/client/src/components/AudioAutoplay/AudioAutoplay.jsx b/client/src/components/AudioAutoplay/AudioAutoplay.jsx new file mode 100644 index 0000000..285aeb6 --- /dev/null +++ b/client/src/components/AudioAutoplay/AudioAutoplay.jsx @@ -0,0 +1,26 @@ +import React from 'react' + +const AudioAutoplay = ({ audio }) => { + const language = localStorage.getItem('i18nextLng') + + const audioLanguage = () => { + if (language === 'en') { + return `${audio}-english.mp3` + } else if (language === 'hi') { + return `${audio}-hindi.mp3` + } else { + return `${audio}-english.mp3` + } + } + + return ( +