Yo Man

14 files changed, 299 insertions, 38 deletions

diff --git a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx
index bd2b17b..eed7e64 100644
--- a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx
+++ b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import Accordion from '../../components/Accordion/Accordion';
 import Button from '../../components/Button/Button';
 import Header from '../../components/Header/Header';
@@ -7,11 +7,12 @@ import {
   getUnverifiedUsers,
   updateUser,
 } from '../../services/apiservice';
-import {useQuery, useMutation} from 'react-query';
-import {useNavigate} from 'react-router-dom';
+import { useQuery, useMutation } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 import BackButton from '../../components/BackButton/BackButton';
-import {sendMessage} from '../../services/apiservice';
+import { sendMessage } from '../../services/apiservice';
 import Spinner from '../../components/Spinner/Spinner';
+import TextField from '@mui/material/TextField';
 
 import styles from './EnrollmentRequests.module.css';
 import MessageModal from '../../components/Modal/MessageModal';
@@ -20,11 +21,11 @@ const EnrollmentRequests = () => {
   const navigate = useNavigate();
   const [open, setOpen] = React.useState(false);
   const [message, setMessage] = React.useState('');
-  const {data, refetch, isLoading} = useQuery('unverified', getUnverifiedUsers);
+  const { data, refetch, isLoading } = useQuery('unverified', getUnverifiedUsers);
 
   const deleteUse = useMutation((payload) => deleteUser(payload));
 
-  const updateUse = useMutation((id) => updateUser(id, {verified: true}), {
+  const updateUse = useMutation((id) => updateUser(id, { verified: true }), {
     onSuccess: () => {
       refetch();
     },
@@ -47,6 +48,21 @@ const EnrollmentRequests = () => {
     });
   };
 
+  const [inputText, setInputText] = useState("");
+
+  const inputHandler = (e) => {
+    const lowerCase = e.target.value.toLowerCase();
+    setInputText(lowerCase);
+  };
+
+  const filteredData = data?.data?.filter((el) => {
+    if (inputText === '') {
+      return el;
+    } else {
+      return el.name.toLowerCase().includes(inputText);
+    }
+  })
+
   if (isLoading) {
     return <Spinner heading='Admin' />;
   }
@@ -54,11 +70,17 @@ const EnrollmentRequests = () => {
   return (
     <div className={styles.unverified_users}>
       <Header subheading='Admin' />
+      <h1 className={styles.unverified_users__heading}>Search</h1>
+      <input
+        className={styles.input__search}
+        onChange={inputHandler}
+        placeholder="Enter name of user to search"
+      />
       <BackButton onClick={() => navigate('/')} />
       <h1 className={styles.unverified_users__heading}>Enrollment Requests</h1>
       <div className={styles.accordion}>
-        {data?.data.length !== 0 ? (
-          data?.data.map((item) => (
+        {data?.data?.length !== 0 ? (
+          filteredData?.map((item) => (
             <div className={styles.unverified_users__accordion} key={item._id}>
               <Accordion name={item.name} user={item} />
               <Button
diff --git a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css
index 8100a67..90bf8e7 100644
--- a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css
+++ b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css
@@ -26,3 +26,13 @@
   margin: 20px;
   text-align: center;
 }
+
+.input__search {
+  width: 400px;
+  height: 60px;
+  margin: 10px 0px 30px;
+  padding: 18px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+  font-size: 1.25rem;
+}
diff --git a/admin/src/pages/UpdateRequests/UpdateRequests.jsx b/admin/src/pages/UpdateRequests/UpdateRequests.jsx
index 7888e7f..010a3ea 100644
--- a/admin/src/pages/UpdateRequests/UpdateRequests.jsx
+++ b/admin/src/pages/UpdateRequests/UpdateRequests.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Accordion from '../../components/Accordion/Accordion';
 import Button from '../../components/Button/Button';
 import Header from '../../components/Header/Header';
@@ -7,15 +7,15 @@ import {
   getUpdatingUsers,
   updateUser,
 } from '../../services/apiservice';
-import {useQuery, useMutation} from 'react-query';
-import {useNavigate} from 'react-router-dom';
+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(
+  const { data, isLoading, isError, refetch } = useQuery(
     'updating',
     getUpdatingUsers
   );
@@ -25,12 +25,27 @@ const UpdateRequests = () => {
     },
   });
 
-  const updateUse = useMutation((id) => updateUser(id, {verified: true}), {
+  const updateUse = useMutation((id) => updateUser(id, { verified: true }), {
     onSuccess: () => {
       refetch();
     },
   });
 
+  const [inputText, setInputText] = useState("");
+
+  const inputHandler = (e) => {
+    const lowerCase = e.target.value.toLowerCase();
+    setInputText(lowerCase);
+  };
+
+  const filteredData = data?.data?.filter((el) => {
+    if (inputText === '') {
+      return el;
+    } else {
+      return el.name.toLowerCase().includes(inputText);
+    }
+  })
+
   if (isLoading) {
     return <Spinner heading='Admin' />;
   }
@@ -42,25 +57,29 @@ const UpdateRequests = () => {
   return (
     <div className={styles.unverified_users}>
       <Header subheading='Admin' />
+      <h1 className={styles.unverified_users__heading}>Search</h1>
+      <input
+        className={styles.input__search}
+        onChange={inputHandler}
+        placeholder="Enter name of user to search"
+      />
       <BackButton onClick={() => navigate('/')} />
       <h1 className={styles.unverified_users__heading}>Update Requests</h1>
       <div className={styles.accordion}>
         {data?.data.length !== 0 ? (
-          data?.data.map((item) => (
+          filteredData?.map((item) => (
             <div className={styles.unverified_users__accordion} key={item._id}>
               <Accordion name={item.name} user={item} />
-              <div>
-                <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>
           ))
         ) : (
diff --git a/admin/src/pages/UpdateRequests/UpdateRequests.module.css b/admin/src/pages/UpdateRequests/UpdateRequests.module.css
index 59a1b08..c041f10 100644
--- a/admin/src/pages/UpdateRequests/UpdateRequests.module.css
+++ b/admin/src/pages/UpdateRequests/UpdateRequests.module.css
@@ -26,3 +26,13 @@
   margin: 20px;
   text-align: center;
 }
+
+.input__search {
+  width: 400px;
+  height: 60px;
+  margin: 10px 0px 30px;
+  padding: 18px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+  font-size: 1.25rem;
+}
diff --git a/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx b/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx
index 12d1317..c03791c 100644
--- a/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx
+++ b/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import Accordion from '../../components/Accordion/Accordion';
 import Header from '../../components/Header/Header';
 import {getVerifiedUsers} from '../../services/apiservice';
@@ -9,13 +9,34 @@ import styles from './VerifiedUsers.module.css';
 const VerifiedUsers = () => {
   const {data} = useQuery('verified', getVerifiedUsers);
 
+  const [inputText, setInputText] = useState("");
+
+  const inputHandler = (e) => {
+    const lowerCase = e.target.value.toLowerCase();
+    setInputText(lowerCase);
+  };
+
+  const filteredData = data?.data?.filter((el) => {
+    if (inputText === '') {
+      return el;
+    } else {
+      return el.name.toLowerCase().includes(inputText);
+    }
+  })
+
   return (
     <div className={styles.verified_users}>
       <Header subheading='Admin' />
+      <h1 className={styles.unverified_users__heading}>Search</h1>
+      <input
+        className={styles.input__search}
+        onChange={inputHandler}
+        placeholder="Enter name of user to search"
+      />
       <h1 className={styles.verified_users__heading}>Verified Users</h1>
       <div className='accordion'>
         {data?.data.length !== 0 ? (
-          data?.data.map((item) => (
+          filteredData?.map((item) => (
             <div>
               <Accordion name={item.name} user={item} />
             </div>
diff --git a/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css b/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css
index f558e85..242b539 100644
--- a/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css
+++ b/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
 }
 
 .verified_users__heading {
@@ -12,3 +13,13 @@
   margin: 20px;
   text-align: center;
 }
+
+.input__search {
+  width: 400px;
+  height: 60px;
+  margin: 10px 0px 30px;
+  padding: 18px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+  font-size: 1.25rem;
+}
diff --git a/client/src/components/BackButton/BackButton.jsx b/client/src/components/BackButton/BackButton.jsx
index fdb85f1..c6bba82 100644
--- a/client/src/components/BackButton/BackButton.jsx
+++ b/client/src/components/BackButton/BackButton.jsx
@@ -1,8 +1,10 @@
 import { Typography } from '@mui/material'
 import React from 'react'
 import styles from './BackButton.module.css'
+import { useTranslation } from 'react-i18next'
 
 const BackButton = ({ onClick, onChange }) => {
+  const { t } = useTranslation()
   return (
     <>
       <button
@@ -17,7 +19,7 @@ const BackButton = ({ onClick, onChange }) => {
             src={`${process.env.PUBLIC_URL}/assets/images/back.svg`}
             alt=""
           />
-          <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>Back</Typography>
+          <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>{t('BACK')}</Typography>
         </div>
       </button>
     </>
diff --git a/client/src/components/LanguageSelect/locales/en/translation.json b/client/src/components/LanguageSelect/locales/en/translation.json
index 4cf2201..c25f669 100644
--- a/client/src/components/LanguageSelect/locales/en/translation.json
+++ b/client/src/components/LanguageSelect/locales/en/translation.json
@@ -143,5 +143,6 @@
   "APPROVED": "Approved",
   "YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED": "Your Aadhaar update status is approved",
   "ENTER_YOUR_EID_NUMBER": "Enter your EID number",
-  "PENDING": "Pending"
+  "PENDING": "Pending",
+  "SAVE_&_NEXT": "Save & Next"
 }
diff --git a/client/src/components/LanguageSelect/locales/hi/translation.json b/client/src/components/LanguageSelect/locales/hi/translation.json
index 3adcc12..12cba40 100644
--- a/client/src/components/LanguageSelect/locales/hi/translation.json
+++ b/client/src/components/LanguageSelect/locales/hi/translation.json
@@ -142,5 +142,6 @@
   "YOUR_AADHAAR_STATUS_IS_APPROVED": "आपका आधार नामांकन अनुरोध स्वीकृत हो गया है",
   "PENDING": "लंबित",
   "YOUR_AADHAAR_STATUS_IS_IN_PENDING_STATE": "आपका आधार नामांकन अनुरोध प्रक्रिया में है",
-  "PLEASE_HAVE_PATIENCE": "कृपया धैर्य रखें, और कम से कम 48 घंटे तक प्रतीक्षा करें"
+  "PLEASE_HAVE_PATIENCE": "कृपया धैर्य रखें, और कम से कम 48 घंटे तक प्रतीक्षा करें",
+  "SAVE_&_NEXT": "सहेजें और अगला"
 }
diff --git a/client/src/components/LanguageSelect/locales/te/translation.json b/client/src/components/LanguageSelect/locales/te/translation.json
index 14de630..725ba0c 100644
--- a/client/src/components/LanguageSelect/locales/te/translation.json
+++ b/client/src/components/LanguageSelect/locales/te/translation.json
@@ -143,5 +143,6 @@
   "APPROVED": "ఆమోదించబడింది",
   "YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED": "మీ ఆధార్ అప్‌డేట్ స్థితి ఆమోదించబడింది",
   "ENTER_YOUR_EID_NUMBER": "మీ EID నంబర్‌ని నమోదు చేయండి",
-  "PENDING": "పెండింగ్‌లో ఉంది"
+  "PENDING": "పెండింగ్‌లో ఉంది",
+  "SAVE_&_NEXT": "భద్రపరచు & తదుపరి"
 }
diff --git a/client/src/components/SubmitButton/SubmitButton.jsx b/client/src/components/SubmitButton/SubmitButton.jsx
index df1269f..230f973 100644
--- a/client/src/components/SubmitButton/SubmitButton.jsx
+++ b/client/src/components/SubmitButton/SubmitButton.jsx
@@ -1,8 +1,10 @@
 import React from 'react'
 import styles from './SubmitButton.module.css'
 import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
 
 const SubmitButton = ({ onClick, onChange, disabled }) => {
+  const { t } = useTranslation()
   return (
     <>
       <button
@@ -13,12 +15,12 @@ const SubmitButton = ({ onClick, onChange, disabled }) => {
         disabled={disabled}
       >
         <div className={styles.submit__content}>
-        <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>Save & Next</Typography>
-        <img
-          className={styles.submit__image}
-          src={`${process.env.PUBLIC_URL}/assets/images/next_icon.svg`}
-          alt=""
-        />
+          <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>{t('SAVE_&_NEXT')}</Typography>
+          <img
+            className={styles.submit__image}
+            src={`${process.env.PUBLIC_URL}/assets/images/next_icon.svg`}
+            alt=""
+          />
         </div>
       </button>
     </>
diff --git a/client/src/i18nextInit.js b/client/src/i18nextInit.js
index 3ae0848..a6f764b 100644
--- a/client/src/i18nextInit.js
+++ b/client/src/i18nextInit.js
@@ -4,6 +4,7 @@ import Backend from 'i18next-xhr-backend'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import translationEN from '../src/components/LanguageSelect/locales/en/translation.json'
 import translationHI from '../src/components/LanguageSelect/locales/hi/translation.json'
+import translationTE from '../src/components/LanguageSelect/locales/te/translation.json'
 
 const fallbackLng = ['en']
 const availableLanguages = ['en', 'hi']
@@ -14,6 +15,9 @@ const resources = {
   },
   hi: {
     translation: translationHI
+  },
+  te: {
+    translation: translationTE
   }
 }
 
diff --git a/client/src/pages/Enrollment/Scanner/Scanner.jsx b/client/src/pages/Enrollment/Scanner/Scanner.jsx
new file mode 100644
index 0000000..fb015fe
--- /dev/null
+++ b/client/src/pages/Enrollment/Scanner/Scanner.jsx
@@ -0,0 +1,139 @@
+/* eslint-disable multiline-ternary */
+import React from 'react'
+import Webcam from 'react-webcam'
+import { useNavigate } from 'react-router-dom'
+import Header from '../../../components/Header/Header'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import styles from './Scanner.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+import { t } from 'i18next'
+import { userContext } from '../../../context/User'
+import PopUpModal from '../../../components/Modal/Modal'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
+
+const Scanner = () => {
+  const navigate = useNavigate()
+  const { userData, setUserData } = userContext()
+  const webcamRef = React.useRef(null)
+
+  const capture = React.useCallback(() => {
+    const imageSrc = webcamRef.current.getScreenshot()
+    setUserData({ ...userData, photo: imageSrc })
+  })
+
+  const description = [
+    'ENSURE_THAT_YOUR_PHOTO_IS_CLEAR_AND_IN_FOCUS',
+    'ALSO_ENSURE_THAT_YOU_ARE_IN_THE_CENTER_OF_YOUR_PHOTO',
+    'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO'
+  ]
+
+  const svgIcon = () => (
+    <svg
+      width="100%"
+      height="100%"
+      className="svg"
+      viewBox="0 0 300 200"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
+          <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
+          <circle cx="50%" cy="50%" r="70" />
+        </mask>
+      </defs>
+      <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7" />
+    </svg>
+  )
+
+  return (
+    <>
+      <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/photograph`}
+      />
+      <PopUpModal
+        title="CAPTURE_YOUR_PHOTO"
+        image={`${process.env.PUBLIC_URL}/assets/images/photo.svg`}
+        description={
+          <>
+            <ul>
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
+            </ul>
+          </>
+        }
+      />
+      <div className={styles.card__container}>
+          <div className={styles.webcam__container}>
+            <Webcam
+              audio={false}
+              height={400}
+              ref={webcamRef}
+              screenshotFormat="image/jpeg"
+              width={600}
+              videoConstraints={{
+                height: 400,
+                width: 600,
+                facingMode: 'user'
+              }}
+            />
+            <div className={styles.overlay__container}>
+              {svgIcon()}
+            </div>
+          </div>
+          <img id="img" src={userData.photo} />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            sx={{ fontSize: '1.5rem', padding: '10px 30px' }}
+            onClick={(e) => {
+              e.preventDefault()
+              capture()
+            }}
+          >
+            {t('CAPTURE')}
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            sx={{ fontSize: '1.5rem', padding: '10px 48px' }}
+            onClick={(e) => {
+              e.preventDefault()
+              setUserData({ ...userData, photo: '' })
+            }}
+          >
+            {t('RESET')}
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center" sx={{ fontSize: '1.25rem' }}>
+            {t('PLEASE_LOOK_INTO_THE_CAMERA')}
+            <br></br>
+            {t('CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO')}
+            <br></br>
+            {t('CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO')}
+          </Typography>
+        </Grid>
+      </div>
+      <SubmitButton onClick={() => navigate('/enrollment/documents')} />
+    </>
+  )
+}
+
+export default Scanner
diff --git a/client/src/pages/Enrollment/Scanner/Scanner.module.css b/client/src/pages/Enrollment/Scanner/Scanner.module.css
new file mode 100644
index 0000000..4a82e8e
--- /dev/null
+++ b/client/src/pages/Enrollment/Scanner/Scanner.module.css
@@ -0,0 +1,18 @@
+.card__container {
+  display: flex;
+  justify-content: center;
+  margin: 10px;
+}
+
+.webcam__container {
+  position: relative;
+}
+
+.overlay__container {
+  position: absolute ;
+  width: 100%;
+  top: 0 ;
+  right: 0 ;
+  bottom: 0 ;
+  left: 0;
+}
\ No newline at end of file