Merge pull request #2 from Blaster4385/develop

Add remaining pages

client/public/assets/images/agreement.svg

@@ -0,0 +1,9 @@
+<svg width="203" height="209" viewBox="0 0 203 209" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="203" height="209" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_63_7" transform="translate(-0.0147783) scale(0.00457581 0.00444444)"/>
+</pattern>
+<image id="image0_63_7" width="225" height="225" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAIAAACx0UUtAAAOEUlEQVR4nO3dQWwbxRoH8GkVpUmjgpNGikF2iLQFIVcySg7QkyMqgYXSHjhUuFxQkEBquRQh95YTipAIMjdz4BAkF4kkN9oGC8HB7iUFlEio5VBsVCOV2FWJCw3YrSj7Dn4K0Nqzu7MzO99s/r/Tezg783n23/XuenbMbPUKhUIymWQQLslkslAoBJAfprqDdDqtezBBoXQ6rTpCajOay+V0jyEol8/nlaZIbUYty9I9gKBcMplUmqI9tm2rq37Pnj3qGgc6lKZor7qmAaRARoE6ZBSoQ0aBuj5dHSs9ywYVdF0B4zgK1CGjQB0yCtQho0AdMgrUIaNAHTIK1CGjQB0yCtQho0AdMgrUIaNAHTIK1CGjQB0yCtQho0CdtjnO/tXrdcdZt7Zt79mzZ2xsLJiS3Gs0Glr6JTgUzpQ+Ga2i383NzRMnTnh9m6rXKXCp1Wpls1kfu0uCbDbbarUEiue0KX2g/tOv2tZlv6vNzU3hfTM7Oyv33QkgsihGIpEQKJ7ToPSB+k+/aluX/a6OHz/uZ9+USiW5b9CThYUFP8XLlcvlvNbPaU3FcP3Tr9rWpb6rVqvlc8ecOnVK+nt0j8hBtMOyLK/1c1pTMVw7TLquv3nzps8WfvrpJymViKlWqxp7fwCpYvhMyuj4+LjPFp599lkplYhJpVIae38AqWL4TMooY8znRfFrr70mqxIBb731lsbeH3D27FndJbim9ExCRb/CB4ClpSWJb02M9htPHXNzcwLFcxqUPlD/pm1tRz/9Li8vF4vFr776yvEvbdseGRlJp9MnT56cnJwU7lGicrn82Wefffnll3fv3g1y5Q/btvft2/fiiy9mMhmxf+eK9qZzvyZmFLTQtTcNOx+FXQgZBeqQUaAOGQXqkFGgDhkF6pBRoA4ZBeqQUaDO4OeZgnHu3Lnl5eXffvtNdyFyHD58+I033iDytbBbSmcD6OpXilarlUgkAtsRQZqfnxcYEE6D0gf/P/2qbV3Tu5JC4Mk+g6yurnodEE5rKsZ/B+aUdNdoNKLRqO4qFEqlUqVSydMmmFNCy/Xr13WXoFa5XNZdglvIaHejo6O6S1CL1AOAfMhod5ZlxWIx3VUoROrBFT6cj/a0sbExNTWluwolEonE1atXvW6F81FyJicnK5XKsWPHdBci2dzcnEBANcJx1Fm73b5//77uKuQYGhoS3hbPMwF1+KwH6A4ZBeqQUaAOGQXqkFGgDhkF6pBRoA4ZBeqQUaAOGQXqkFGgDhkF6pBRoA4ZBeqQUaAOGQXqkFGgDhkF6pBRoA4ZBeqQUaAOGQXqkFGgDhkF6gxba7zdbpdKpb/++kt3Iabq6+ubnp4eGBjQXYgXSlfgldvv0tJSYMMSbhcuXNC+Nz30q7Z1ee+qWCzK3lO7WrFY1Lg3PTFmvSdOUyAgEok0m01Pm2C9J55Go6G7hLC5ffu2KaNqRkaV/jPdtUwZVXzW714SdwE+6xljDBf1cpk0nkqvyOT2m8vlAhuWcMvlctr3pnvGfNZ3NBqNUqn066+/+ihqVzt48OD09PTY2JjAtlhrHKjD+ShAd8goUIeMAnXIKFBn2Nw8xliz2bxz547uKkx14MCB4eFh3VV4pPTOltx+a7VaKpUKbGTCKpVK1Wo17XvTPWPuPdVqtYmJCd8Vwf/VarXx8XFPm+Dek4NMJqO7hFB58803dZfglhnH0WazOTIyIqMi+Mf29rann7jFcZTn999/111CCN26dUt3Ca6YcRzlNwViJO4CHEcZY2xubk53CaFi0ngqvWsgt990Oh3YsITbsWPHtO9N94z5rO+4ePHixYsX2+22j6J2tYGBgZmZmZmZGYFtMTcPqMP5KEB3yChQh4wCdcgoUIeMAnXIKFBn2BznWq22urrqdTEt2DE8PDwzM+N1Vp5mSr8hkNvvwsJCYMMSbmatAWFMRhcXF2XvqV1taWlJ4970xJjvmTDvSTqJu0Bpisy4Zvr55591lxBC9XpddwmumJHRffv26S4hhEwZVTMyOjY2ZlmW7ipCxbIsUx5iNiOjjLFPP/1UdwmhsrKyorsE15Rekcntt1QqBTYs4ba2tqZ9b7pnzHX9jmq1asrDYgSNjo4KnzVhjjNQh3tPAN0ho0AdMgrUIaNAnWFz8xhj5XIZ648yxkZHR5977jk3f7mxsVGv1//++++9e/dGo9HJyUnVtUmm9M6W3H7x08sPiEQi6+vrnBFbXV3tuqHAjy5L35se+lXburx3hRv4vVQqFYERK5VKGvemt37Vti7vXcViMcF9GHaZTKbriEUiEc5W8Xhc4970xIx7+I1GIxqNyqgonB4ezHq9/thjj/G32tra8jStBPfwee7evau7BMPcu3fP8W9MufQ04zjKb2qXS6VSXU89HUdM4i7AcZQxxvA8Uy/vv/9+1/+ez+c5WxUKBTXlKKD0bFduv/Pz84ENiyn4j871Wgh3fn5e+950z5jP+o5arXbp0iU83tTf3z8+Pv7CCy84XvRUq9VLly798ssvnf/7+OOPP//880888YRAp5ibB9ThfBSgO2QUqENGgTpkFKhDRoE6ZBSoQ0aBOmQUqENGgTpkFKhDRoE6ZBSoQ0aBOmQUqENGgTpkFKhDRoE6ZBSoQ0aBOmQUqENGgTpkFKgzb41cT5rN5tbWVud/9/X1jY2NDQwM6C0JvAphRjc2Nr7++uvz58+Xy+Wuf5DJZNLp9NGjR8fHxwOuDUQoXQUl4H4LhYKnH8hKp9MCS8XuWrpSFJJ1SpaXl1955RWxbS3LWllZMW+V+MBhnRJBzWZzenpaOKCMsWq1OjU1dfbsWYlVgURmH0c3Njampqb8t9MxOjp67do1U34xO3g4jnpWLpclBpQxduvWrZGRESzKR42px9HLly8fOXLETwscXheK3yWwtqMHbn6QwA/LsiqVirr2DYWMevDMM898//33Lv94dnb20UcfZYzduHFjZWXF5VZnzpz58MMPBesLKW2rySq9s6Wi34WFBTfvK5/Pb25uPrx5pVLJZrNuWlhbW/Px1kNIW4rUti77XdXrdcdsZbPZVqvl2M6JEyf47ViWJVZkWCGjrvT6EYIdFy5ccN8a/5c3mOjvaoYVMuqs1WpJjxQ/pqlUSqDOsEJGnS0tLXEazOVyYkVmMhlOs9evXxdrNnx0ZdSke/jnzp3r9VI8Hn/77bfFmuUfSnv9vDYExpiMttvt8+fP93r1o48+Em55eHiYc5r7xRdfCLcMUhhzf7RarR46dEhWa3Ibb7fbn3/++ZUrV/zU8ICnnnrq5ZdfHhoaktimT7rujxozx5nzxQ//hNIN/qzTZrPJ+WqUn2+f1tfXHScNlsvlDz744IcfflBUg35Kz3Yl9su5YMrn8/5LPX78eK/219fXe2218yCKOl2/idjheDMuGP7Hn8OY89E///yz10sHDx703/7TTz8tsNUnn3ziv2s+ziVduVx+9913VRegnTEZVY3zLN69e/d6vfTNN9+oKcdVF36uFA1iTEb379/f6yXOIda9O3fu9Hqpv7+/10uDg4P+u+bj9P7tt9+q7p0CYzJ64MCBXi9JOZhxbmw98sgjvV46evSo/675XnrppV4vcQ7wQfL0nKMIpWe7EvvlXNfHYjGfdfIvffjbKt1DkUiEMz8mHo+r69o9KdesHMZkdHt7m9Ma59LbjUKh0Ktlx9lP29vb6XRafA/3lkqltra2OF1TyGgymfQz8m4Yc390aGjoyJEja2trXV997733lpeXhRvnfI/66quvOhZWLBbr9fq1a9ccZ724NDg4ODEx4bhEBedUNRiJROLy5cvKu1H6L0Buv/wv1oWnJOdyORXNBoBzmlGr1bZF2U7zbDosy3KcpyuFSRl1nODM/2Tsan19nd+mQJ2B4WS0EzUxZ86c4Y8JYyyRSAQTUNusjNq2zZ88b1mWp33jGFDh+X7BUJFRNwEN7AjaYVhGHVPFXF8/ca6TdgS5JwRIz+ipU6ccxyTII2iHYRm13Z0qZTIZTlJLpZKbZ/MXFxeFiwyG3Iy6CWjAR9AOY+bm7Wg2myMjI27+Mh6PZzKZZDLZmbX0xx9/fPfddx9//PHt27cdt00kElevXhWrMDCHDh2qVqtdX/K6jMXp06cdv1m1LOvKlSsaFnBV+i9AUb+lUkn1sPBnGxHBOY56unwkewTtMDKjttMNI59MeRxUSkaJB9Q2N6O2sqmTnp5+1st/RmleJD3A4Izatj0/Py8Sw97MWtbZZ0bdBDQej2u/uWF2Rm3bLhaLImF8SCQSqVQqsqoKhp+MGnEE7TA+o7a7hXH4stmsxHoCI5xRU46gHWHIaMfa2loqlfKaztnZWeMOnzvEMjo7O+s4LESOoB3hyWhHpVJZWFhIJBKO+yCfz9frdUVlBEMgo/Sv4h9m3j18lzqT5er1+o0bN+7fvz80NDQ4OLh///4nn3xyYmIiHMs0Hz58uNcjy13v4b/++uuLi4v8NrXdqO/NmPmjXkWj0Wg0qrsKQk6fPm1iQFmIMwr/ZugRtMOYZ+5AmNEBZcho6LkJaCwWIxtQhoyGm8sj6I8//kg2oAwZDav+/n43F0nEj6AduGYKp5MnT3JWteigfA76bziOhlNoAsqQ0d3JoIAyZHQXMiugDBndbYwLKENGjdbX5+2S18SAMmR09zDiNlNX2u49caZEgXSGHkE7tM3Ng8DEYjHi3yTx4bM+5Oh/1ekIGQ0zoz/idyCjoRWOgDLVGVW+mj/0EJqAMtUZfeedd5S2D12FKaCMqV+nWNHvGUAvyWSS1FOd/gWxlvbi4iKSGoBUKqX6Z2i0+B8cF4IrjOT8IQAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>

client/src/components/Card/CardAgreement.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import styles from './CardAgreement.module.css'
+import SubmitButton from '../SubmitButton/SubmitButton'
+import { Typography } from '@mui/material'
+
+const CardAgreement = ({ title, image }) => {
+  return (
+    <>
+      <div className={styles.card}>
+        <img className={styles.card__image} src={image} alt="" />
+        <Typography>
+        I hereby confirm the identity and address of ___________ as being true, correct and accurate.
+        </Typography>
+      </div>
+      <SubmitButton />
+    </>
+  )
+}
+
+export default CardAgreement

client/src/components/Card/CardAgreement.module.css

@@ -0,0 +1,30 @@
+@import '../../styles/GlobalVariables.css';
+
+.card {
+  height: 400px;
+  width: 900px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 3px solid var(--color-black);
+  border-radius: 10px;
+  margin: 30px;
+  transition: 0.2s all;
+  cursor: pointer;
+  color: var(--color-black);
+  text-decoration-line: none;
+}
+
+.card:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
+}
+
+.card__title {
+  margin: 15px 0px;
+}
+
+.card__image {
+  padding-bottom: 32px;
+}

client/src/components/Card/CardBiometrics.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import styles from './CardBiometrics.module.css'
+import SubmitButton from '../SubmitButton/SubmitButton'
+
+const CardBiometrics = ({ title, image }) => {
+  return (
+    <>
+      <div className={styles.card}>
+        <img className={styles.card__image} src={image} alt="" />
+      </div>
+      <SubmitButton />
+    </>
+  )
+}
+
+export default CardBiometrics

client/src/components/Card/CardBiometrics.module.css

@@ -0,0 +1,26 @@
+@import '../../styles/GlobalVariables.css';
+
+.card {
+  height: 300px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 3px solid var(--color-black);
+  border-radius: 10px;
+  margin: 30px;
+  transition: 0.2s all;
+  cursor: pointer;
+  color: var(--color-black);
+  text-decoration-line: none;
+}
+
+.card:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
+}
+
+.card__title {
+  margin: 15px 0px;
+}

client/src/pages/Enrollment/Agreement/Agreement.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardAgreement from '../../../components/Card/CardAgreement'
+import styles from './Agreement.module.css'
+import Input from '../../../components/Input/Input'
+import { Grid, Button } from '@mui/material'
+
+const Agreement = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardAgreement
+          image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
+        />
+      </div>
+        <Input
+        type="text"
+        id="otp"
+        label="Please verify your identity by receiving the OTP on your registered mobile number xxxxxxxx15"
+        placeholder="XXXX"
+      />
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Send OTP
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Resend
+          </Button>
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default Agreement

client/src/pages/Enrollment/Agreement/Agreement.module.css

@@ -0,0 +1,4 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }

client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardScanner from '../../../components/Card/CardScanner'
+import styles from './FinalSlip.module.css'
+import { Grid, Typography } from '@mui/material'
+
+const FinalSlip = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardScanner
+          image={`${process.env.PUBLIC_URL}/assets/images/slip.svg`}
+        />
+      </div>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center" fontWeight={'Bold'}>
+          Thank you for your time.<br />
+          Please collect your slip before leaving
+          </Typography>
+        </Grid>
+      </div>
+    </>
+  )
+}
+
+export default FinalSlip

client/src/pages/Enrollment/FinalSlip/FinalSlip.module.css

@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  

client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardBiometrics from '../../../components/Card/CardBiometrics'
+import styles from './Fingerprint.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+const Fingerprint = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardBiometrics
+          image={`${process.env.PUBLIC_URL}/assets/images/fingerprint.svg`}
+        />
+        <CardBiometrics
+          image={`${process.env.PUBLIC_URL}/assets/images/fingerprint.svg`}
+        />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Scan
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Reset
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center">
+            Please put your eyes inside the iris scanner.
+            <br />
+            Wait for prompt and beep sound to remove your eyes
+          </Typography>
+        </Grid>
+      </div>
+      <SubmitButton />
+    </>
+  )
+}
+
+export default Fingerprint

client/src/pages/Enrollment/Fingerprint/Fingerprint.module.css

@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  

client/src/pages/Enrollment/IrisScan/IrisScan.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardBiometrics from '../../../components/Card/CardBiometrics'
+import styles from './IrisScan.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+const IrisScan = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardBiometrics
+          image={`${process.env.PUBLIC_URL}/assets/images/iris.svg`}
+        />
+        <CardBiometrics
+          image={`${process.env.PUBLIC_URL}/assets/images/iris.svg`}
+        />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Scan
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Reset
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center">
+            Please put your eyes inside the iris scanner.
+            <br />
+            Wait for prompt and beep sound to remove your eyes
+          </Typography>
+        </Grid>
+      </div>
+      <SubmitButton />
+    </>
+  )
+}
+
+export default IrisScan

client/src/pages/Enrollment/IrisScan/IrisScan.module.css

@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  

client/src/routes/index.js

@@ -8,6 +8,10 @@ import PhotoCapture from '../pages/Enrollment/PhotoCapture/PhotoCapture'
 import DocumentScanner from '../pages/Enrollment/DocumentScanner/DocumentScanner'
 import FormTwo from '../pages/Enrollment/FormTwo/FormTwo'
 import Address from '../pages/Enrollment/Address/Address'
+import IrisScan from '../pages/Enrollment/IrisScan/IrisScan'
+import Fingerprint from '../pages/Enrollment/Fingerprint/Fingerprint'
+import Agreement from '../pages/Enrollment/Agreement/Agreement'
+import FinalSlip from '../pages/Enrollment/FinalSlip/FinalSlip'
 
 const Index = () => {
   return (
@@ -27,6 +31,18 @@ const Index = () => {
         <Route path="documents">
           <Route index element={<DocumentScanner />} />
         </Route>
+        <Route path="irisscan">
+          <Route index element={<IrisScan />} />
+        </Route>
+        <Route path="fingerprint">
+          <Route index element={<Fingerprint />} />
+        </Route>
+        <Route path="agreement">
+          <Route index element={<Agreement />} />
+        </Route>
+        <Route path="finalslip">
+          <Route index element={<FinalSlip />} />
+        </Route>
       </Route>
       <Route path="update">
         <Route index element={<Update />} />