Add remaining pages

13 files changed, 318 insertions, 0 deletions

diff --git a/client/src/components/Card/CardAgreement.jsx b/client/src/components/Card/CardAgreement.jsx
new file mode 100644
index 0000000..245cdbb
--- /dev/null
+++ b/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
diff --git a/client/src/components/Card/CardAgreement.module.css b/client/src/components/Card/CardAgreement.module.css
new file mode 100644
index 0000000..ed36cba
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/src/components/Card/CardBiometrics.jsx b/client/src/components/Card/CardBiometrics.jsx
new file mode 100644
index 0000000..49a913e
--- /dev/null
+++ b/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
diff --git a/client/src/components/Card/CardBiometrics.module.css b/client/src/components/Card/CardBiometrics.module.css
new file mode 100644
index 0000000..13bbbef
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx
new file mode 100644
index 0000000..94303d5
--- /dev/null
+++ b/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
diff --git a/client/src/pages/Enrollment/Agreement/Agreement.module.css b/client/src/pages/Enrollment/Agreement/Agreement.module.css
new file mode 100644
index 0000000..c618a4d
--- /dev/null
+++ b/client/src/pages/Enrollment/Agreement/Agreement.module.css
@@ -0,0 +1,4 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
\ No newline at end of file
diff --git a/client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx b/client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx
new file mode 100644
index 0000000..9ac568a
--- /dev/null
+++ b/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
diff --git a/client/src/pages/Enrollment/FinalSlip/FinalSlip.module.css b/client/src/pages/Enrollment/FinalSlip/FinalSlip.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/client/src/pages/Enrollment/FinalSlip/FinalSlip.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
diff --git a/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx b/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx
new file mode 100644
index 0000000..bb46556
--- /dev/null
+++ b/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
diff --git a/client/src/pages/Enrollment/Fingerprint/Fingerprint.module.css b/client/src/pages/Enrollment/Fingerprint/Fingerprint.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/client/src/pages/Enrollment/Fingerprint/Fingerprint.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
diff --git a/client/src/pages/Enrollment/IrisScan/IrisScan.jsx b/client/src/pages/Enrollment/IrisScan/IrisScan.jsx
new file mode 100644
index 0000000..c07e9b8
--- /dev/null
+++ b/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
diff --git a/client/src/pages/Enrollment/IrisScan/IrisScan.module.css b/client/src/pages/Enrollment/IrisScan/IrisScan.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/client/src/pages/Enrollment/IrisScan/IrisScan.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
diff --git a/client/src/routes/index.js b/client/src/routes/index.js
index fc2aeea..f5bd89e 100644
--- a/client/src/routes/index.js
+++ b/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 />} />