added props to docker compose file

docker-compose.yml

@@ -14,5 +14,7 @@ services:
       - "5173" 
     environment:
       - PORT=${DIGIFI_PORT}
+    tty: true
+    stdin_open: true
 volumes:
   src:

src/components/Dashboard/DashboardFormInit.tsx

@@ -1,118 +1,73 @@
 import { Button, InputCompOne, Stepper } from "..";
-import {Formik, Form} from 'formik'
+// import { useNavigate } from "react-router-dom";
-import * as Yup from "yup";
+// import { RouteHandler } from "../../router/routes";
 
 type Props = {
   handleNextStep:()=>any
 }
 
-const initialValues = {
-  amount: "",
-  duration: "",
-  id: "",
-};
-
-// To get the validation schema
-const validationSchema = Yup.object().shape({
-  duration: Yup.string()
-    .required("Required"),
-  amount: Yup.string()
-    .required("Required")
-    .test("no-e", "Invalid", (value:any) => {
-      if (value && /^[0-9]*$/.test(value) == false) {
-        return false;
-      }
-      return true;
-    }),
-  id: Yup.string()
-    .required("Required")
-});
-
 export default function DashboardFormInit({handleNextStep}:Props) {
 
-  //FUNCTION TO HANDLE SUBMIT
+  // let navigate = useNavigate();
-  const handleSubmit = (values:any) => {
+  // const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
-    console.log(values)
-    handleNextStep()
-  };
 
   return (
     <div className="w-full">
       <div className="w-full flex justify-center">
         <Stepper step={0} />
       </div>
-      <Formik
+      <div className="mt-[3.25rem] flex flex-col gap-9">
-            initialValues={initialValues}
+        <InputCompOne
-            validationSchema={validationSchema}
+          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            onSubmit={handleSubmit}
+          name="applyIshInput"
-          >
+          label="How Much Do You Want To Apply For?"
-            {(props)=>(
+          labelClass="font-bold text-[1.125rem]"
-              <Form>
+          input
-                <div className="mt-[3.25rem] flex flex-col gap-9">
+          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                  <InputCompOne
+          placeholder="350,000"
-                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+        />
-                    name="amount"
+        <InputCompOne
-                    label="How Much Do You Want To Apply For?"
+          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    labelClass="font-bold text-[1.125rem]"
+          name="applyIshInput"
-                    input
+          label="For How Many Months?"
-                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
+          labelClass="font-bold text-[1.125rem]"
-                    placeholder="350,000"
+          select={true}
-                    value={props.values.amount}
+          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    onChange={props.handleChange}
+          // selectValue=''
-                    error={(props.errors.amount && props.touched.amount) ? props.errors.amount : ''}
+          selectOptions={duration}
-                  />
+          // onChange={()=>{}}
-                  <InputCompOne
+        />
-                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+        <InputCompOne
-                    name="duration"
+          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    label="For How Many Months?"
+          name="applyIshInput"
-                    labelClass="font-bold text-[1.125rem]"
+          label="Direct sales agent ID ( Optional )"
-                    select={true}
+          labelClass="font-bold text-[1.125rem]"
-                    selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          floatLabel='Enter agent ID'
-                    selectOptions={duration}
+          input
-                    selectValue={props.values.duration}
+          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    onChange={props.handleChange}
+          placeholder="Agent ID"
-                    error={(props.errors.duration && props.touched.duration) ? props.errors.duration : ''}
+        />
-                  />
+        <Button
-                  <InputCompOne
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          text="Next"
-                    name="id"
+          type="button"
-                    label="Direct sales agent ID ( Optional )"
+          onClick={handleNextStep}
-                    labelClass="font-bold text-[1.125rem]"
+        />
-                    floatLabel='Enter agent ID'
+      </div>
-                    input
-                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    placeholder="Agent ID"
-                    value={props.values.id}
-                    onChange={props.handleChange}
-                    error={(props.errors.id && props.touched.id) ? props.errors.id : ''}
-                  />
-                  <Button
-                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-                    text="Next"
-                    type="submit"
-                  />
-                </div>
-              </Form>
-            )}
-      </Formik>
     </div>
   );
 }
 
-interface SelectOption {
+interface Option {
-  loading: boolean;
+  value: string;
-  data: {value: string;
+  label: string;
-  label: string}[]
 }
 
 
-const duration: SelectOption = {
+const duration: Option[] = [
-  loading: false,
+  { value: "", label: "Please Select" },
-  data: [
+  { value: "6", label: "6 Months" },
-    { value: "", label: "Please Select" },
+  { value: "12", label: "12 Months" },
-    { value: "6", label: "6 Months" },
+  { value: "18", label: "18 Months" },
-    { value: "12", label: "12 Months" },
+  { value: "24", label: "24 Months" },
-    { value: "18", label: "18 Months" },
+];
-    { value: "24", label: "24 Months" },
-  ]
-}

src/components/Dashboard/home/DashboardHomeAttestation.tsx

@@ -1,7 +1,4 @@
 import { Button, InputCompOne, Stepper } from '../../shared/index';
-
-import {Formik, Form} from 'formik'
-import * as Yup from "yup";
 // import { useNavigate } from "react-router-dom";
 // import { RouteHandler } from '../../../router/routes';
 
@@ -9,29 +6,9 @@ type Props = {
   handleNextStep:()=>any
 }
 
-const initialValues = {
-  account_number: "",
-  checked: false
-};
-
-// To get the validation schema
-const validationSchema = Yup.object().shape({
-  account_number: Yup.string()
-    .required("Required"),
-  checked: Yup.bool() // use bool instead of boolean
-  .oneOf([true], "You must accept the terms and conditions")
-});
-
 export default function DashboardHomeAttestation({handleNextStep}:Props) {
   //     let navigate = useNavigate();
   // const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
-
-  //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = (values:any) => {
-    console.log(values)
-    handleNextStep()
-  };
-
   return (
     <div className="w-full">
       <div className="w-full flex justify-center">
@@ -39,51 +16,31 @@ export default function DashboardHomeAttestation({handleNextStep}:Props) {
       </div>
       <p className='my-10 text-red-500 text-lg md:text-2xl'>Applicant's Attestation and Debit Instruction</p>
       <p className='text-red-500 text-base'>NB: Must be your FCMB account number</p>
-      <Formik
+      <div className="flex flex-col gap-9">
-            initialValues={initialValues}
+        <div className="flex items-center gap-[4.125rem]">
-            validationSchema={validationSchema}
+          <InputCompOne
-            onSubmit={handleSubmit}
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-          >
+            name="applyIshInput"
-            {(props)=>(
+            floatLabel="Disbursement account number"
-              <Form>          
+            // labelClass="font-bold text-[1.125rem]"
-                <div className="flex flex-col gap-9">
+            input
-                  <div className="flex items-center gap-[4.125rem]">
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    <InputCompOne
+            placeholder="0102547896"
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          />
-                      name="account_number"
+        </div>
-                      floatLabel="Disbursement account number"
+        <div className='max-w-[25.875rem] flex gap-4 items-start'>
-                      // labelClass="font-bold text-[1.125rem]"
+            <input type='checkbox' className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' />
-                      input
+            <p className='text-[12px] text-justify'>By pressing, you agree that you have read, understood and accept the <span className='text-blue-600'>applicatant's attestation</span> and <span className='text-blue-600'>terms and conditions</span> for FCMB
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                premium salary loan. You also give us permission to collect financial information and run credit checks on the account provided through our partners
-                      placeholder="0102547896"
+            </p>
-                      value={props.values.account_number}
+        </div>
-                      onChange={props.handleChange}
+        <Button
-                      error={(props.errors.account_number && props.touched.account_number) ? props.errors.account_number : ''}
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-                    />
+          text="Apply"
-                  </div>
+          type="button"
-                  <div className='max-w-[25.875rem]'>
+          onClick={handleNextStep}
-                    <div className='flex gap-4 items-start'>
+        />
-                      <input 
+      </div>
-                        type='checkbox' 
-                        name="checked"
-                        className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' 
-                        onChange={props.handleChange}
-                      />
-                      <p className='text-[12px] text-justify'>By pressing, you agree that you have read, understood and accept the <span className='text-blue-600'>applicatant's attestation</span> and <span className='text-blue-600'>terms and conditions</span> for FCMB
-                          premium salary loan. You also give us permission to collect financial information and run credit checks on the account provided through our partners
-                      </p>
-                    </div>
-                    {props.errors.checked && props.touched.checked && <span className='text-[10px] text-red-500'>{props.errors.checked}</span>}
-                  </div>
-                  <Button
-                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-                    text="Apply"
-                    type="submit"
-                  />
-                </div>
-              </Form>
-            )}
-      </Formik>
     </div>
   );
 }

src/components/Dashboard/home/DashboardHomeDetail.tsx

@@ -1,166 +1,105 @@
 import { Button, InputCompOne, Stepper } from '../../shared/index';
 
-import {Formik, Form} from 'formik'
-import * as Yup from "yup";
-
 type Props = {
   handleNextStep:()=>any
 }
 
-const initialValues = {
-  gender: "",
-  address: "",
-  marital_status: "",
-  state: "",
-  email:""
-};
-
-// To get the validation schema
-const validationSchema = Yup.object().shape({
-  gender: Yup.string()
-    .required("Required"),
-  address: Yup.string()
-    .required("Required"),
-  marital_status: Yup.string()
-    .required("Required"),
-  state: Yup.string()
-    .required("Required"),
-  email: Yup.string()
-    .email("Invalid")
-    .required("Required"),
-});
-
 export default function DashboardHomeDetail({handleNextStep}:Props) {
-
-  //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = (values:any) => {
-    console.log(values)
-    handleNextStep()
-  };
-
   return (
     <div className="w-full">
       <div className="w-full flex justify-center">
         <Stepper step={1} />
       </div>
-      <Formik
+      <div className="mt-[3.25rem] flex flex-col gap-9">
-            initialValues={initialValues}
+        <div className="flex items-center gap-[4.125rem]">
-            validationSchema={validationSchema}
+          <InputCompOne
-            onSubmit={handleSubmit}
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-          >
+            name="applyIshInput"
-            {(props)=>(
+            label="Select your gender"
-              <Form>          
+            labelClass="font-bold text-[1.125rem]"
-                <div className="mt-[3.25rem] flex flex-col gap-9">
+            select={true}
-                  <div className="flex items-center gap-[4.125rem]">
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    <InputCompOne
+            // selectValue=''
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            selectOptions={gender}
-                      name="gender"
+            // onChange={()=>{}}
-                      label="Select your gender"
+          />
-                      labelClass="font-bold text-[1.125rem]"
+          <InputCompOne
-                      select={true}
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            name="applyIshInput"
-                      selectOptions={gender}
+            label="Residential address"
-                      selectValue={props.values.gender}
+            labelClass="font-bold text-[1.125rem]"
-                      onChange={props.handleChange}
+            input
-                      error={(props.errors.gender && props.touched.gender) ? props.errors.gender : ''}
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    />
+            placeholder="Somewhere in lagos"
-                    <InputCompOne
+          />
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+        </div>
-                      name="address"
+        <div className="flex items-center gap-[4.125rem]">
-                      label="Residential address"
+          <InputCompOne
-                      labelClass="font-bold text-[1.125rem]"
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      input
+            name="applyIshInput"
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            label="Marital status"
-                      placeholder="Somewhere in lagos"
+            labelClass="font-bold text-[1.125rem]"
-                      value={props.values.address}
+            select={true}
-                      onChange={props.handleChange}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      error={(props.errors.address && props.touched.address) ? props.errors.address : ''}
+            // selectValue=''
-                    />
+            selectOptions={maritalStatus}
-                  </div>
+            // onChange={()=>{}}
-                  <div className="flex items-center gap-[4.125rem]">
+          />
-                    <InputCompOne
+          <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="marital_status"
+            name="applyIshInput"
-                      label="Marital status"
+            label="Select your state"
-                      labelClass="font-bold text-[1.125rem]"
+            labelClass="font-bold text-[1.125rem]"
-                      select={true}
+            select={true}
-                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      selectOptions={maritalStatus}
+            // selectValue=''
-                      selectValue={props.values.marital_status}
+            selectOptions={state}
-                      onChange={props.handleChange}
+            // onChange={()=>{}}
-                      error={(props.errors.marital_status && props.touched.marital_status) ? props.errors.marital_status : ''}
+          />
-                    />
+        </div>
-                    <InputCompOne
+        <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="state"
+          name="applyIshInput"
-                      label="Select your state"
+          label="Email address"
-                      labelClass="font-bold text-[1.125rem]"
+          labelClass="font-bold text-[1.125rem]"
-                      select={true}
+          input
-                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      selectOptions={state}
+          placeholder="johndoe@gmail.com"   
-                      selectValue={props.values.state}
+        />
-                      onChange={props.handleChange}
+        <Button
-                      error={(props.errors.state && props.touched.state) ? props.errors.state : ''}
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-                    />
+          text="Next"
-                  </div>
+          type="button"
-                  <InputCompOne
+          onClick={handleNextStep}
-                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+        />
-                    name="email"
+      </div>
-                    label="Email address"
-                    labelClass="font-bold text-[1.125rem]"
-                    input
-                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    placeholder="johndoe@gmail.com"
-                    value={props.values.email}
-                    onChange={props.handleChange}
-                    error={(props.errors.email && props.touched.email) ? props.errors.email : ''}
-                  />
-                  <Button
-                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-                    text="Next"
-                    type="submit"
-                  />
-                </div>
-              </Form>
-            )}
-      </Formik>
     </div>
   );
 }
 
-interface SelectOption {
+interface Option {
-  loading: boolean;
+  value: string;
-  data: {value: string;
+  label: string;
-  label: string}[]
 }
 
 
-const gender: SelectOption = {
+const gender: Option[] = [
-  loading: false,
+  { value: "", label: "Please Select" },
-  data: [
+  { value: "male", label: "Male" },
-    { value: "", label: "Please Select" },
+  { value: "female", label: "Female" },
-    { value: "male", label: "Male" },
+  { value: "others", label: "Prefer not to say" },
-    { value: "female", label: "Female" },
+];
-    { value: "others", label: "Prefer not to say" },
-  ]
-}
 
-const maritalStatus: SelectOption = {
+const maritalStatus: Option[] = [
-  loading: false,
+  { value: "", label: "Please Select" },
-  data: [
+  { value: "single", label: "Single" },
-    { value: "", label: "Please Select" },
+  { value: "married", label: "Married" },
-    { value: "single", label: "Single" },
+  { value: "divorced", label: "Divorced" },
-    { value: "married", label: "Married" },
+];
-    { value: "divorced", label: "Divorced" },
-  ]
-}
 
-const state: SelectOption = {
+const state: Option[] = [
-  loading: false,
+  { value: "", label: "Please Select" },
-  data: [
+  { value: "abia", label: "Abia" },
-    { value: "", label: "Please Select" },
+  { value: "imo", label: "Imo" },
-    { value: "abia", label: "Abia" },
+  { value: "lagos", label: "Lagos" },
-    { value: "imo", label: "Imo" },
+];
-    { value: "lagos", label: "Lagos" },
-  ]
-}

src/components/Dashboard/home/DashboardHomeEmploymentInfo.tsx

@@ -1,275 +1,162 @@
 import { Button, InputCompOne, Stepper } from '../../shared/index';
 
-import {Formik, Form} from 'formik'
-import * as Yup from "yup";
-
 type Props = {
   handleNextStep:()=>any
 }
 
-const initialValues = {
-  job_title: "",
-  employer_name: "",
-  job_sector: "",
-  industry: "",
-  date_of_resumption: "",
-  employer_email:"",
-  annual_income: "",
-  monthly_salary: "",
-  salary_payment_date: "",
-  employee_id: "",
-  qualification: ""
-};
-
-// To get the validation schema
-const validationSchema = Yup.object().shape({
-  job_title: Yup.string()
-    .required("Required"),
-  employer_name: Yup.string()
-    .required("Required"),
-  job_sector: Yup.string()
-    .required("Required"),
-  industry: Yup.string()
-    .required("Required"),
-  date_of_resumption: Yup.string()
-    .required("Required"),
-  employer_email: Yup.string()
-    .email("Invalid")
-    .required("Required"),
-  annual_income: Yup.string()
-    .required("Required")
-    .test("no-e", "Invalid", (value:any) => {
-      if (value && /^[0-9]*$/.test(value) == false) {
-        return false;
-      }
-      return true;
-    }),
-  monthly_salary: Yup.string()
-    .required("Required")
-    .test("no-e", "Invalid", (value:any) => {
-      if (value && /^[0-9]*$/.test(value) == false) {
-        return false;
-      }
-      return true;
-    }),
-  salary_payment_date: Yup.string()
-    .required("Required"),
-  employee_id: Yup.string()
-    .required("Required"),
-  qualification: Yup.string()
-    .required("Required"),
-});
-
 export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
-
-
-  //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = (values:any) => {
-    console.log(values)
-    handleNextStep()
-  };
-
-
   return (
     <div className="w-full">
       <div className="w-full flex justify-center">
         <Stepper step={2} />
       </div>
-      <Formik
+      <div className="mt-[3.25rem] flex flex-col gap-9">
-            initialValues={initialValues}
+        <p className='text-red-500 text-lg md:text-2xl'>Employment Informaton</p>
-            validationSchema={validationSchema}
+        <div className="flex items-center gap-[4.125rem]">
-            onSubmit={handleSubmit}
+          <InputCompOne
-          >
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            {(props)=>(
+            name="applyIshInput"
-              <Form>          
+            floatLabel="Job Title"
-                <div className="mt-[3.25rem] flex flex-col gap-9">
+            // labelClass="font-bold text-[1.125rem]"
-                  <p className='text-red-500 text-lg md:text-2xl'>Employment Informaton</p>
+            input
-                  <div className="flex items-center gap-[4.125rem]">
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    <InputCompOne
+            placeholder="Software Engineer"
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          />
-                      name="job_title"
+          <InputCompOne
-                      floatLabel="Job Title"
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      // labelClass="font-bold text-[1.125rem]"
+            name="applyIshInput"
-                      input
+            floatLabel="Employer name"
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // labelClass="font-bold text-[1.125rem]"
-                      placeholder="Software Engineer"
+            input
-                      value={props.values.job_title}
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      onChange={props.handleChange}
+            placeholder="Mr. Mark John"
-                      error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
+          />
-                    />
+        </div>
-                    <InputCompOne
+        <div className="flex items-center gap-[4.125rem]">
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          <InputCompOne
-                      name="employer_name"
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      floatLabel="Employer name"
+            name="applyIshInput"
-                      // labelClass="font-bold text-[1.125rem]"
+            floatLabel="Job Sector"
-                      input
+            // labelClass="font-bold text-[1.125rem]"
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            select={true}
-                      placeholder="Mr. Mark John"
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      value={props.values.employer_name}
+            // selectValue=''
-                      onChange={props.handleChange}
+            selectOptions={jobSection}
-                      error={(props.errors.employer_name && props.touched.employer_name) ? props.errors.employer_name : ''}
+            // onChange={()=>{}}
-                    />
+          />
-                  </div>
+          <InputCompOne
-                  <div className="flex items-center gap-[4.125rem]">
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    <InputCompOne
+            name="applyIshInput"
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            floatLabel="Select your industry"
-                      name="job_sector"
+            // labelClass="font-bold text-[1.125rem]"
-                      floatLabel="Job Sector"
+            select={true}
-                      // labelClass="font-bold text-[1.125rem]"
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      select={true}
+            // selectValue=''
-                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            selectOptions={industry}
-                      selectOptions={jobSector}
+            // onChange={()=>{}}
-                      selectValue={props.values.job_sector}
+          />
-                      onChange={props.handleChange}
+        </div>
-                      error={(props.errors.job_sector && props.touched.job_sector) ? props.errors.job_sector : ''}
+        <div className="flex items-center gap-[4.125rem]">
-                    />
+          <InputCompOne
-                    <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
-                      name="industry"
+            floatLabel="Date of resumption"
-                      floatLabel="Select your industry"
+            // labelClass="font-bold text-[1.125rem]"
-                      // labelClass="font-bold text-[1.125rem]"
+            input
-                      select={true}
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="12/12/2015"
-                      selectOptions={industry}
+          />
-                      selectValue={props.values.industry}
+          <InputCompOne
-                      onChange={props.handleChange}
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      error={(props.errors.industry && props.touched.industry) ? props.errors.industry : ''}
+            name="applyIshInput"
-                    />
+            floatLabel="Employers official email"
-                  </div>
+            // labelClass="font-bold text-[1.125rem]"
-                  <div className="flex items-center gap-[4.125rem]">
+            input
-                    <InputCompOne
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            placeholder="example@gmail.com"
-                      name="date_of_resumption"
+          />
-                      floatLabel="Date of resumption"
+        </div>
-                      // labelClass="font-bold text-[1.125rem]"
+        <div className="flex items-center gap-[4.125rem]">
-                      input
+          <InputCompOne
-                      inputType='date'
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            name="applyIshInput"
-                      placeholder="12/12/2015"
+            floatLabel="Annual Income"
-                      value={props.values.date_of_resumption}
+            // labelClass="font-bold text-[1.125rem]"
-                      onChange={props.handleChange}
+            input
-                      error={(props.errors.date_of_resumption && props.touched.date_of_resumption) ? props.errors.date_of_resumption : ''}
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    />
+            placeholder="1,200,000"
-                    <InputCompOne
+          />
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          <InputCompOne
-                      name="employer_email"
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      floatLabel="Employers official email"
+            name="applyIshInput"
-                      // labelClass="font-bold text-[1.125rem]"
+            floatLabel="Net monthly salary"
-                      input
+            // labelClass="font-bold text-[1.125rem]"
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            input
-                      placeholder="example@gmail.com"
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      value={props.values.employer_email}
+            placeholder="100,000"
-                      onChange={props.handleChange}
+          />
-                      error={(props.errors.employer_email && props.touched.employer_email) ? props.errors.employer_email : ''}
+        </div>
-                    />
+        <div className="flex items-center gap-[4.125rem]">
-                  </div>
+          <InputCompOne
-                  <div className="flex items-center gap-[4.125rem]">
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    <InputCompOne
+            name="applyIshInput"
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            floatLabel="Salary payment date"
-                      name="annual_income"
+            // labelClass="font-bold text-[1.125rem]"
-                      floatLabel="Annual Income"
+            input
-                      // labelClass="font-bold text-[1.125rem]"
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      input
+            placeholder="30th of every month"
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
+          />{" "}
-                      placeholder="1,200,000"
+          <InputCompOne
-                      value={props.values.annual_income}
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      onChange={props.handleChange}
+            name="applyIshInput"
-                      error={(props.errors.annual_income && props.touched.annual_income) ? props.errors.annual_income : ''}
+            floatLabel="Employee ID"
-                    />
+            // labelClass="font-bold text-[1.125rem]"
-                    <InputCompOne
+            input
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      name="monthly_salary"
+            placeholder="LS/001/005"
-                      floatLabel="Net monthly salary"
+          />
-                      // labelClass="font-bold text-[1.125rem]"
+        </div>
-                      input
+        <InputCompOne
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
+          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      placeholder="100,000"
+          name="applyIshInput"
-                      value={props.values.monthly_salary}
+          floatLabel="Highest level of education"
-                      onChange={props.handleChange}
+          // labelClass="font-bold text-[1.125rem]"
-                      error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
+          select={true}
-                    />
+          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                  </div>
+          // selectValue=''
-                  <div className="flex items-center gap-[4.125rem]">
+          selectOptions={qualification}
-                    <InputCompOne
+          // onChange={()=>{}}
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+        />
-                      name="salary_payment_date"
+        <Button
-                      floatLabel="Salary payment date"
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-                      // labelClass="font-bold text-[1.125rem]"
+          text="Next"
-                      input
+          type="button"
-                      inputType='date'
+          onClick={handleNextStep}
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+        />
-                      placeholder="30th of every month"
+      </div>
-                      value={props.values.salary_payment_date}
-                      onChange={props.handleChange}
-                      error={(props.errors.salary_payment_date && props.touched.salary_payment_date) ? props.errors.salary_payment_date : ''}
-                    />
-                    <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="employee_id"
-                      floatLabel="Employee ID"
-                      // labelClass="font-bold text-[1.125rem]"
-                      input
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      placeholder="LS/001/005"
-                      value={props.values.employee_id}
-                      onChange={props.handleChange}
-                      error={(props.errors.employee_id && props.touched.employee_id) ? props.errors.employee_id : ''}
-                    />
-                  </div>
-                  <InputCompOne
-                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="qualification"
-                    floatLabel="Highest level of education"
-                    // labelClass="font-bold text-[1.125rem]"
-                    select={true}
-                    selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    selectOptions={qualification}
-                    selectValue={props.values.qualification}
-                    onChange={props.handleChange}
-                    error={(props.errors.qualification && props.touched.qualification) ? props.errors.qualification : ''}
-                  />
-                  <Button
-                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-                    text="Next"
-                    type="submit"
-                  />
-                </div>
-              </Form>
-            )}
-      </Formik>
     </div>
   );
 }
 
 
 
-interface SelectOption {
+interface Option {
-  loading: boolean;
+  value: string;
-  data: {value: string;
+  label: string;
-  label: string}[]
 }
 
 
-const jobSector: SelectOption = {
+const jobSection: Option[] = [
-  loading: false,
+  { value: "", label: "Please Select" },
-  data: [
+  { value: "private (non academic)", label: "Private (non academic)" },
-    { value: "", label: "Please Select" },
+];
-    { value: "private (non academic)", label: "Private (non academic)" },
-  ]
-}
 
-const industry: SelectOption = {
+const industry: Option[] = [
-  loading: false,
+  { value: "", label: "Please Select" },
-  data: [
+  { value: "engineering", label: "Engineering" },
-    { value: "", label: "Please Select" },
+];
-    { value: "engineering", label: "Engineering" },
-  ]
-}
 
-const qualification: SelectOption = {
+const qualification: Option[] = [
-  loading: false,
+  { value: "", label: "Please Select" },
-  data: [
+  { value: "b.sc + professional qualification", label: "B.Sc + Professional Qualification" },
-    { value: "", label: "Please Select" },
+];
-    { value: "b.sc + professional qualification", label: "B.Sc + Professional Qualification" },
-  ]
-}

src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx

@@ -1,215 +1,126 @@
 import { Button, InputCompOne, Stepper } from '../../shared/index';
 
-import {Formik, Form} from 'formik'
-import * as Yup from "yup";
-
 type Props = {
   handleNextStep:()=>any
 }
 
-const initialValues = {
-  ref_name: "",
-  ref_email: "",
-  ref_number: "",
-  ref_relationship: "",
-  ref_bvn: "",
-  ref_two_name: "",
-  ref_two_email: "",
-  ref_two_number: "",
-  ref_two_relationship: "",
-  ref_two_bvn: "",
-};
-
-// To get the validation schema
-const validationSchema = Yup.object().shape({
-  ref_name: Yup.string()
-    .required("Required"),
-  ref_email: Yup.string()
-    .email("Invalid")
-    .required("Required"),
-  ref_number: Yup.string()
-    .required("Required"),
-  ref_relationship: Yup.string()
-    .required("Required"),
-  ref_bvn: Yup.string()
-    .required("Required"),
-  ref_two_name: Yup.string()
-    .required("Required"),
-  ref_two_email: Yup.string()
-    .email("Invalid")
-    .required("Required"),
-  ref_two_number: Yup.string()
-    .required("Required"),
-  ref_two_relationship: Yup.string()
-    .required("Required"),
-  ref_two_bvn: Yup.string()
-    .required("Required"),
-});
-
 export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
-
-  //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = (values:any) => {
-    console.log(values)
-    handleNextStep()
-  };
-
-
   return (
     <div className="w-full">
       <div className="w-full flex justify-center">
         <Stepper step={3} />
       </div>
-      <Formik
+      <div className="mt-[3.25rem] flex flex-col gap-9">
-            initialValues={initialValues}
+        <p className='text-red-500 text-lg md:text-2xl'>Reference Details <span className='text-base'>(Must be 18 years and above)</span></p>
-            validationSchema={validationSchema}
+        <div className="flex items-center gap-[4.125rem]">
-            onSubmit={handleSubmit}
+          <div className='w-full max-w-[25.875rem]'>
-          >
+            <p className='text-red-500 text-base'>Reference one</p>
-            {(props)=>(
+            <div className='w-full flex flex-col gap-9'>
-              <Form>          
+                <InputCompOne
-                <div className="mt-[3.25rem] flex flex-col gap-9">
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                  <p className='text-red-500 text-lg md:text-2xl'>Reference Details <span className='text-base'>(Must be 18 years and above)</span></p>
+                    name="applyIshInput"
-                  <div className="flex items-center gap-[4.125rem]">
+                    floatLabel="Full name"
-                    <div className='w-full max-w-[25.875rem]'>
+                    // labelClass="font-bold text-[1.125rem]"
-                      <p className='text-red-500 text-base'>Reference one</p>
+                    input
-                      <div className='w-full flex flex-col gap-9'>
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                          <InputCompOne
+                    placeholder="John James"
-                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                />
-                              name="ref_name"
+                <InputCompOne
-                              floatLabel="Full name"
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              // labelClass="font-bold text-[1.125rem]"
+                    name="applyIshInput"
-                              input
+                    floatLabel="Relationship"
-                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                    // labelClass="font-bold text-[1.125rem]"
-                              placeholder="John James"
+                    input
-                              value={props.values.ref_name}
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                              onChange={props.handleChange}
+                    placeholder="Sister"
-                              error={(props.errors.ref_name && props.touched.ref_name) ? props.errors.ref_name : ''}
+                />
-                          />
+                <InputCompOne
-                          <InputCompOne
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    name="applyIshInput"
-                              name="ref_relationship"
+                    floatLabel="Phone number"
-                              floatLabel="Relationship"
+                    // labelClass="font-bold text-[1.125rem]"
-                              // labelClass="font-bold text-[1.125rem]"
+                    input
-                              input
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                    placeholder="07000000000"
-                              placeholder="Sister"
+                />
-                              value={props.values.ref_relationship}
+                <InputCompOne
-                              onChange={props.handleChange}
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              error={(props.errors.ref_relationship && props.touched.ref_relationship) ? props.errors.ref_relationship : ''}
+                    name="applyIshInput"
-                          />
+                    floatLabel="Email address"
-                          <InputCompOne
+                    // labelClass="font-bold text-[1.125rem]"
-                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    input
-                              name="ref_number"
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                              floatLabel="Phone number"
+                    placeholder="demo@gamil.com"
-                              // labelClass="font-bold text-[1.125rem]"
+                />
-                              input
+                <InputCompOne
-                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              placeholder="07000000000"
+                    name="applyIshInput"
-                              value={props.values.ref_number}
+                    floatLabel="BVN"
-                              onChange={props.handleChange}
+                    // labelClass="font-bold text-[1.125rem]"
-                              error={(props.errors.ref_number && props.touched.ref_number) ? props.errors.ref_number : ''}
+                    input
-                          />
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                          <InputCompOne
+                    placeholder="2228457896"
-                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                />
-                              name="ref_email"
+            </div>
-                              floatLabel="Email address"
+          </div>
-                              // labelClass="font-bold text-[1.125rem]"
+            <div className='w-full max-w-[25.875rem]'>
-                              input
+              <p className='text-red-500 text-base'>Reference two</p>
-                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+              <div className='w-full flex flex-col gap-9'>
-                              placeholder="demo@gamil.com"
+                <InputCompOne
-                              value={props.values.ref_email}
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              onChange={props.handleChange}
+                        name="applyIshInput"
-                              error={(props.errors.ref_email && props.touched.ref_email) ? props.errors.ref_email : ''}
+                        floatLabel="Full name"
-                          />
+                        // labelClass="font-bold text-[1.125rem]"
-                          <InputCompOne
+                        input
-                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                              name="ref_bvn"
+                        placeholder="John James"
-                              floatLabel="BVN"
+                    />
-                              // labelClass="font-bold text-[1.125rem]"
+                    <InputCompOne
-                              input
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        name="applyIshInput"
-                              placeholder="2228457896"
+                        floatLabel="Relationship"
-                              value={props.values.ref_bvn}
+                        // labelClass="font-bold text-[1.125rem]"
-                              onChange={props.handleChange}
+                        input
-                              error={(props.errors.ref_bvn && props.touched.ref_bvn) ? props.errors.ref_bvn : ''}
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                          />
+                        placeholder="Sister"
-                      </div>
+                    />
-                    </div>
+                    <InputCompOne
-                      <div className='w-full max-w-[25.875rem]'>
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                        <p className='text-red-500 text-base'>Reference two</p>
+                        name="applyIshInput"
-                        <div className='w-full flex flex-col gap-9'>
+                        floatLabel="Phone number"
-                          <InputCompOne
+                        // labelClass="font-bold text-[1.125rem]"
-                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        input
-                              name="ref_two_name"
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                              floatLabel="Full name"
+                        placeholder="07000000000"
-                              // labelClass="font-bold text-[1.125rem]"
+                    />
-                              input
+                    <InputCompOne
-                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              placeholder="John James"
+                        name="applyIshInput"
-                              value={props.values.ref_two_name}
+                        floatLabel="Email address"
-                              onChange={props.handleChange}
+                        // labelClass="font-bold text-[1.125rem]"
-                              error={(props.errors.ref_two_name && props.touched.ref_two_name) ? props.errors.ref_two_name : ''}
+                        input
-                          />
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                          <InputCompOne
+                        placeholder="demo@gamil.com"
-                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    />
-                              name="ref_two_relationship"
+                    <InputCompOne
-                              floatLabel="Relationship"
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              // labelClass="font-bold text-[1.125rem]"
+                        name="applyIshInput"
-                              input
+                        floatLabel="BVN"
-                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        // labelClass="font-bold text-[1.125rem]"
-                              placeholder="Sister"
+                        input
-                              value={props.values.ref_two_relationship}
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                              onChange={props.handleChange}
+                        placeholder="2228457896"
-                              error={(props.errors.ref_two_relationship && props.touched.ref_two_relationship) ? props.errors.ref_two_relationship : ''}
+                    />
-                          />
+              </div>
-                          <InputCompOne
+            </div>
-                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+        </div>
-                              name="ref_two_number"
+        <Button
-                              floatLabel="Phone number"
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-                              // labelClass="font-bold text-[1.125rem]"
+          text="Next"
-                              input
+          type="button"
-                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          onClick={handleNextStep}
-                              placeholder="07000000000"
+        />
-                              value={props.values.ref_two_number}
+      </div>
-                              onChange={props.handleChange}
-                              error={(props.errors.ref_two_number && props.touched.ref_two_number) ? props.errors.ref_two_number : ''}
-                          />
-                          <InputCompOne
-                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              name="ref_two_email"
-                              floatLabel="Email address"
-                              // labelClass="font-bold text-[1.125rem]"
-                              input
-                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                              placeholder="demo@gamil.com"
-                              value={props.values.ref_two_email}
-                              onChange={props.handleChange}
-                              error={(props.errors.ref_two_email && props.touched.ref_two_email) ? props.errors.ref_two_email : ''}
-                          />
-                          <InputCompOne
-                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              name="ref_two_bvn"
-                              floatLabel="BVN"
-                              // labelClass="font-bold text-[1.125rem]"
-                              input
-                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                              placeholder="2228457896"
-                              value={props.values.ref_two_bvn}
-                              onChange={props.handleChange}
-                              error={(props.errors.ref_two_bvn && props.touched.ref_two_bvn) ? props.errors.ref_two_bvn : ''}
-                          />
-                        </div>
-                      </div>
-                  </div>
-                  <Button
-                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-                    text="Next"
-                    type="submit"
-                  />
-                </div>
-              </Form>
-            )}
-      </Formik>
     </div>
   );
 }

src/components/GetStarted/BVN.tsx

@@ -32,7 +32,6 @@ const BVN = ({handleNextStep}:Props) => {
 
   const handleSubmit = (values:any) => {
     console.log('values', values)
-    handleNextStep()
   };
 
   return (
@@ -71,6 +70,7 @@ const BVN = ({handleNextStep}:Props) => {
               <button
                 type='submit'
                 className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
+                onClick={handleNextStep}
               >
                 Enter
               </button>

src/components/GetStarted/IntroDetails.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import InputCompOne from "../shared/InputCompOne";
 
-interface SelectOption {
+interface Option {
-  loading: boolean;
+  value: string;
-  data: {value: string;
+  label: string;
-  label: string}[]
 }
 
 interface InputSectionProps {
@@ -57,7 +56,7 @@ const InputSection: React.FC<InputSectionProps> = ({
         "font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]",
       select: true,
       selectClass: "w-full h-[36px] rounded-[6px]",
-      selectOptions: {loading: false, data:[{ value: "", label: "Select" }]},
+      selectOptions: [{ value: "", label: "Select" }],
       value: inputValues.agentId,
       onInput: handleInput,
     },
@@ -117,24 +116,18 @@ const InputSection: React.FC<InputSectionProps> = ({
 
 export default InputSection;
 
-const maritalStatusOptions: SelectOption = {
+const maritalStatusOptions: Option[] = [
-  loading: false,
+  { value: "", label: "Select" },
-  data: [
+  { value: "single", label: "Single" },
-    { value: "", label: "Select" },
+  { value: "married", label: "Married" },
-    { value: "single", label: "Single" },
+  { value: "divorced", label: "Divorced" },
-    { value: "married", label: "Married" },
+  { value: "widowed", label: "Widowed" },
-    { value: "divorced", label: "Divorced" },
+];
-    { value: "widowed", label: "Widowed" },
-  ]
-}
 
-const titleOptions: SelectOption = {
+const titleOptions: Option[] = [
-  loading: false,
+  { value: "", label: "Select" },
-  data: [
+  { value: "ms", label: "Ms" },
-    { value: "", label: "Select" },
+  { value: "mr", label: "Mr" },
-    { value: "ms", label: "Ms" },
+  { value: "miss", label: "Miss" },
-    { value: "mr", label: "Mr" },
+  { value: "mrs", label: "Mrs" },
-    { value: "miss", label: "Miss" },
+];
-    { value: "mrs", label: "Mrs" },
-  ]
-}

src/components/shared/InputCompOne.tsx

@@ -8,16 +8,16 @@ export interface InputCompOneProps {
   labelSpanClass?: string;
   floatLabel?: string;
   placeholder?: string;
-  value?: string | any;
+  value?: string;
-  onChange?: (e:any) => any;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onInput?: (e:any) => any;
+  onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
   name: string;
   tabIndex?: number;
   ref?: React.RefObject<HTMLInputElement>;
   selectValue?: string;
   input?: boolean;
   select?: boolean;
-  selectOptions?: {loading:boolean, data:{ value: string; label: string }[]};
+  selectOptions?: { value: string; label: string }[];
   inputType?: string;
   inputClass?: string;
   parentInputClass?: string;
@@ -44,7 +44,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       selectValue,
       input = false,
       select = false,
-      selectOptions = {loading:false, data:[]},
+      selectOptions = [],
       inputType = "text",
       inputClass,
       parentInputClass,
@@ -58,10 +58,10 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
     return (
       <div className={parentClass}>
         {label && (
-          <label htmlFor={label ? label : floatLabel} className={`flex gap-2 items-center ${labelClass}`}>
+          <label htmlFor={label ? label : floatLabel} className={labelClass}>
             {label}
             {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
-            {error && label && <span className='text-[10px] text-red-500'>{error}</span>}
+            {error && <span className='text-[10px] text-red-500'>{error}</span>}
           </label>
         )}
         {input && (
@@ -82,11 +82,8 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
             {floatLabel &&
               <label
                 htmlFor={label ? label : floatLabel}
-                className={`flex items-center gap-2 cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
+                className={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
-              >
+              >{floatLabel}</label>
-                {floatLabel}
-                {error && floatLabel && !label && <span className='text-[10px] text-red-500'>{error}</span>}
-              </label>
             }
           </div>
         )}
@@ -97,33 +94,19 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               id={label ? label : floatLabel}
               value={selectValue}
               className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass}`}
-              onChange={onChange}
+              // onChange={onChange}
             >
-              {selectOptions.loading ?
+              {selectOptions.map(({ value, label }) => (
-              <option value=''>Loading</option>
-              : selectOptions.data.length ?
-                selectOptions.data.map(({ value, label }) => (
-                  <option key={value} value={value}>
-                    {label}
-                  </option>
-                ))
-              :
-              <option value=''>Not Found</option>
-              }
-              {/* {selectOptions.map(({ value, label }) => (
                 <option key={value} value={value}>
                   {label}
                 </option>
-              ))} */}
+              ))}
             </select>
             {floatLabel &&
               <label
                 htmlFor={label ? label : floatLabel}
-                className={`flex items-center gap-2 cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 transition-all duration-500`}
+                className={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 transition-all duration-500`}
-              >
+              >{floatLabel}</label>
-                {floatLabel}
-                {error && floatLabel && !label && <span className='text-[10px] text-red-500'>{error}</span>}
-              </label>
             }
             {/* select custon arrow */}
             <div className='absolute right-4 top-1/2 -translate-y-1/2'>