partial done

Rupesh-2003 · Rupesh-2003 · commit 7fca93502985 · 2023-04-08T21:19:42.000+05:30
diff --git a/.env b/.env
@@ -1,2 +1,2 @@
 NEXT_PUBLIC_REACT_APP_API_KEY = 08387dfc64msh94f0df087928182p1213afjsn3aa4359e369c
-NEXT_APP_SERVER_URL=http://localhost:5001
+NEXT_APP_SERVER_URL = http://localhost:5001
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  env: {
+    NEXT_PUBLIC_REACT_APP_API_KEY: "08387dfc64msh94f0df087928182p1213afjsn3aa4359e369c",
+    NEXT_APP_SERVER_URL: "http://localhost:5001",
+  }
 }
 
 module.exports = nextConfig
diff --git a/server/constants/config.js b/server/constants/config.js
@@ -1,5 +1,5 @@
 const config = {
-  PORT: process.env.PORT || 5000,
+  PORT: process.env.PORT || 5001,
   JWT_SECRET: process.env.JWT_SECRET || "mysecret",
   MONGODB_SRV_STRING: process.env.MONGODB_SRV_STRING || "gg",
 }
diff --git a/src/components/employeeVerificationForm.jsx b/src/components/employeeVerificationForm.jsx
@@ -3,14 +3,17 @@ import DatePicker from "tailwind-datepicker-react"
 import { DatePickerOptions } from '../constants/Constants'
 import { Button } from "flowbite-react"
 import { useRouter } from 'next/router'
+import axios from 'axios'
 
-const EmployeeVerificationForm = (
-    createAccountHandler,
+const EmployeeVerificationForm = ({
+    onProceedHandler,
     stage,
     setStage,
-) => {
+}) => {
     const router = useRouter()
     const [show, setShow] = useState(false)
+    const [dob, setDob] = useState()
+
 	const handleClose = (state) => {
 		setShow(state)
 	}
@@ -26,15 +29,16 @@ const EmployeeVerificationForm = (
 
     const ocr = async (options) => {
         console.log("Inside ocr")
-        try {
-          const response = await axios.request(options);
-          console.log("Got response", response);
-          return response.data; 
-        } catch(err){
-          console.error(err);
-          return {"result":"1","subScans":[],"value":"HRE FRE\nGovernment of India\nAmitabh Rajendra Shah\nDOB: 03/02/1990\nMale\n1234 5678 9012\n\u00c5RT TEIR, \u00c0"};
-        }
-        // return {"result":"1","subScans":[],"value":"HRE FRE\nGovernment of India\nAmitabh Rajendra Shah\nDOB: 03/02/1990\nMale\n1234 5678 9012\n\u00c5RT TEIR, \u00c0"};
+        // try {
+        //   const response = await axios.request(options);
+        //   console.log("Got response", response);
+        //   return response.data; 
+        // } catch(err){
+        //   console.error(err);
+        //   return {"result":"1","subScans":[],"value":"HRE FRE\nGovernment of India\nAmitabh Rajendra Shah\nDOB: 03/02/1990\nMale\n1234 5678 9012\n\u00c5RT TEIR, \u00c0"};
+        // }
+        const data = {"result":"1","subScans":[],"value":"HRE FRE\nGovernment of India\nAmitabh Rajendra Shah\nDOB: 03/02/1990\nMale\n1234 5678 9012\n\u00c5RT TEIR, \u00c0"}
+        return data;
     }
 
     const handleFileInputChange = (event) => {
@@ -65,11 +69,31 @@ const EmployeeVerificationForm = (
             console.log(userName);
             console.log(DOB);
             console.log(aadhar);
+            document.getElementById('cardNumber').value = aadhar
           });
-      }
+    }
+
+    const onLocalProceedClickHandler = (event) => {
+        event.preventDefault();
+        const firstName = event.target.first_name.value
+        const lastName = event.target.last_name.value
+        const gender = event.target.gender.value
+        const cardNumber = event.target.cardNumber.value
+
+        const formData = {
+            firstName,
+            lastName,
+            dob,
+            gender,
+            cardNumber
+        }
+        onProceedHandler(formData)
+    }
+
+    console.log(dob)
 
     return (
-        <form className="mt-[40px]" action="">
+        <form className="mt-[40px]" onSubmit={onLocalProceedClickHandler}>
             <div className="flex flex-col gap-y-[25px]">
                 <div className="flex flex-row justify-between gap-x-[30px]">
                     <div className="w-[45%]">
@@ -87,7 +111,7 @@ const EmployeeVerificationForm = (
                     <div className="flex flex-col w-[45%]">
                         <label htmlFor="" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Date of Birth</label>
                         <div className="relative cursor-pointer">
-                        <DatePicker id="dob" options={DatePickerOptions} show={show} setShow={handleClose} />
+                        <DatePicker id="dob" options={DatePickerOptions} show={show} setShow={handleClose} onChange={setDob}/>
                         </div>
                     </div>
                     
@@ -108,8 +132,8 @@ const EmployeeVerificationForm = (
 
                 <div className="flex flex-row gap-x-[30px]">
                     <div className="w-[45%]">
-                        <label htmlFor="restuarant_address" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Address</label>
-                        <input type="address" id="restuarantAddress" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="L-12 Link Road, Andheri" required/>
+                        <label htmlFor="empolyee_address" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Address</label>
+                        <input type="address" id="employeeAddress" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="L-12 Link Road, Andheri" required/>
                     </div>
                 </div>
 
@@ -126,9 +150,9 @@ const EmployeeVerificationForm = (
 
                     <div className="flex flex-col w-[45%]">
                         <div className="flex items-center justify-center w-full">
-                            <label for="dropzone-file" className="flex flex-col items-center justify-center w-full h-[70px] border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
+                            <label htmlFor="dropzone-file" className="flex flex-col items-center justify-center w-full h-[70px] border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                                 <div className="flex flex-col items-center justify-center">
-                                    <svg aria-hidden="true" className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
+                                    <svg aria-hidden="true" className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
                                     <p className="mb-2 text-[10px] text-gray-500 dark:text-gray-400"><span className="font-semibold">Click to upload</span> or drag and drop</p>
                                     <p className="text-[8px] text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
                                 </div>
@@ -249,7 +273,7 @@ const EmployeeVerificationForm = (
             </div>
             
             <div className="flex flex-row gap-x-[20px] mt-[45px] items-center justify-center">
-                    <Button className="sm:w-[200px] w-[45%]" type="button" onClick={verifyAadhaarPan}>
+                    <Button className="sm:w-[200px] w-[45%]" type="submit">
                         Proceed
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 ml-[10px]">
                         <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
diff --git a/src/components/otpVerificationSingleEmployee.jsx b/src/components/otpVerificationSingleEmployee.jsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+import { Button } from 'flowbite-react'
+import OtpInput from 'react-otp-input';
+
+const OTPVerificationSingleEmployee = ({otp, setOtp, verifyOTPHandler}) => {
+
+  return (
+    <div className='flex flex-col mt-[40px]'>
+      <div>
+        <span className='text-[20px]'>We have sent you an OTP on</span><br/>
+        <span className='text-gray-600 dark:text-gray-200 mt-[10px]'>+91 9137357003</span>
+      </div>
+
+      <div className='flex flex-col justify-center items-center'>
+        <OtpInput
+          containerStyle={"flex flex-row gap-x-[15px] text-black mt-[100px] sm:mt-[40px] mb-[30px]"}
+          inputStyle={"min-w-[50px] min-h-[50px] p-0 rounded-md dark:bg-dark3 text-black dark:text-white"}
+          value={otp}
+          onChange={setOtp}
+          numInputs={4}
+          // renderSeparator={<span>-</span>}
+          renderInput={(props) => <input {...props} />}
+        />
+
+        <Button className="sm:w-[200px] w-[45%]" type="submit" onClick={verifyOTPHandler}>Verify OTP</Button>
+        <div className="text-[12px] text-[#6A7280] mt-[15px]">
+          By verifying OTP, your account will be successfully created!
+        </div>
+      </div>
+      
+    </div>
+  )
+}
+
+export default OTPVerificationSingleEmployee
diff --git a/src/constants/config.js b/src/constants/config.js
@@ -1 +1,2 @@
-export const SERVER_URL = process.env.NEXT_APP_SERVER_URL || "http://localhost:5000";
+export const SERVER_URL = process.env.NEXT_APP_SERVER_URL || "http://localhost:5001";
+console.log(SERVER_URL, process.env)
diff --git a/src/pages/singleEmployee.jsx b/src/pages/singleEmployee.jsx
@@ -1,14 +1,108 @@
 import EmployeeVerificationForm from '@/components/employeeVerificationForm'
-import React from 'react'
+import OTPVerificationSingleEmployee from '@/components/otpVerificationSingleEmployee'
+import React, { useState } from 'react'
 
 const SingleEmployee = () => {
+    const [stage, setStage] = useState('details') //details || verifyOTP || verifyImage
+    const [employeeData, setEmployeeData] = useState({})
+    const [otp, setOtp] = useState('');
+
+    const onProceedHandler = (formData) => {
+        setEmployeeData(formData)
+        setStage('verifyOTP')
+    }
+
+    const verifyOTPHandler = () => {
+        console.log(otp)
+        setStage('verifyImage')
+      }
+
   return (
     <div className='w-[70%] dark:text-white dark:bg-dark2 text-dark3'>
         <div className='flex flex-row items-center text-[26px] font-medium h-[70px] pl-[40px] border-b-[1px] dark:border-[#232830] border-[#DCE3EE] bg-'>
             Verify Employee
         </div>
+
+        <div className="flex flex-row w-[55%] mt-[20px] mx-auto items-center justify-between text-[14px] font-[12px]">
+          <div className="flex flex-row items-center text-blue-600 dark:text-blue-500">
+            <svg
+              aria-hidden="true"
+              className="w-4 h-4 mr-2"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+            Employee Details
+          </div>
+          <div
+            className={`h-[1px] w-[30px] sm:w-[30px] ${
+              stage == "verifyOTP" || stage == "verifyImage"
+                ? "bg-blue-600 dark:bg-blue-500"
+                : "bg-gray-500 dark:bg-gray-200"
+            }`}
+          ></div>
+          <div
+            className={`flex flex-row items-center ${
+              stage == "verifyOTP" || stage == "verifyImage"
+                ? "text-blue-600 dark:text-blue-500"
+                : "text-gray-500"
+            }`}
+          >
+            <svg
+              aria-hidden="true"
+              className="w-4 h-4 mr-2"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+            OTP Verification
+          </div>
+          <div
+            className={`h-[1px] w-[30px] sm:w-[30px] ${
+              stage == "verifyImage"
+                ? "bg-blue-600 dark:bg-blue-500"
+                : "bg-gray-500 dark:bg-gray-200"
+            }`}
+          ></div>
+          <div
+            className={`flex flex-row items-center ${
+              stage == "verifyImage"
+                ? "text-blue-600 dark:text-blue-500"
+                : "text-gray-500"
+            }`}
+          >
+            <svg
+              aria-hidden="true"
+              className="w-4 h-4 mr-2"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+            Image Verification
+          </div>
+        </div>
+
         <div className='w-[60%] mx-auto'>
-            <EmployeeVerificationForm/>
+            {stage == 'details' && <EmployeeVerificationForm onProceedHandler={onProceedHandler}/>}
+            {stage == 'verifyOTP' && <OTPVerificationSingleEmployee otp={otp} setOtp={setOtp} verifyOTPHandler={verifyOTPHandler}/>}
         </div>
     </div>
   )

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`NEXT_PUBLIC_REACT_APP_API_KEY = 08387dfc64msh94f0df087928182p1213afjsn3aa4359e369c`
`2`		`-NEXT_APP_SERVER_URL=http://localhost:5001`
	`2`	`+NEXT_APP_SERVER_URL = http://localhost:5001`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`const config = {`
`2`		`- PORT: process.env.PORT \|\| 5000,`
	`2`	`+ PORT: process.env.PORT \|\| 5001,`
`3`	`3`	`JWT_SECRET: process.env.JWT_SECRET \|\| "mysecret",`
`4`	`4`	`MONGODB_SRV_STRING: process.env.MONGODB_SRV_STRING \|\| "gg",`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-export const SERVER_URL = process.env.NEXT_APP_SERVER_URL \|\| "http://localhost:5000";`
	`1`	`+export const SERVER_URL = process.env.NEXT_APP_SERVER_URL \|\| "http://localhost:5001";`
	`2`	`+console.log(SERVER_URL, process.env)`