started input validation on forms

src/components/Dashboard/DashboardFormInit.tsx

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

src/components/Dashboard/home/DashboardHomeAttestation.tsx

@@ -1,4 +1,7 @@
 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';
 
@@ -6,9 +9,29 @@ 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">
@@ -16,31 +39,51 @@ 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
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>          
                 <div className="flex flex-col gap-9">
                   <div className="flex items-center gap-[4.125rem]">
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="account_number"
                       floatLabel="Disbursement account number"
                       // labelClass="font-bold text-[1.125rem]"
                       input
                       inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                       placeholder="0102547896"
+                      value={props.values.account_number}
+                      onChange={props.handleChange}
+                      error={(props.errors.account_number && props.touched.account_number) ? props.errors.account_number : ''}
                     />
                   </div>
-        <div className='max-w-[25.875rem] flex gap-4 items-start'>
+                  <div className='max-w-[25.875rem]'>
-            <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' />
+                    <div className='flex gap-4 items-start'>
+                      <input 
+                        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="button"
+                    type="submit"
-          onClick={handleNextStep}
                   />
                 </div>
+              </Form>
+            )}
+      </Formik>
     </div>
   );
 }

src/components/Dashboard/home/DashboardHomeDetail.tsx

@@ -1,105 +1,166 @@
 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
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>          
                 <div className="mt-[3.25rem] flex flex-col gap-9">
                   <div className="flex items-center gap-[4.125rem]">
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="gender"
                       label="Select your gender"
                       labelClass="font-bold text-[1.125rem]"
                       select={true}
                       selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            // selectValue=''
                       selectOptions={gender}
-            // onChange={()=>{}}
+                      selectValue={props.values.gender}
+                      onChange={props.handleChange}
+                      error={(props.errors.gender && props.touched.gender) ? props.errors.gender : ''}
                     />
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="address"
                       label="Residential address"
                       labelClass="font-bold text-[1.125rem]"
                       input
                       inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                       placeholder="Somewhere in lagos"
+                      value={props.values.address}
+                      onChange={props.handleChange}
+                      error={(props.errors.address && props.touched.address) ? props.errors.address : ''}
                     />
                   </div>
                   <div className="flex items-center gap-[4.125rem]">
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="marital_status"
                       label="Marital status"
                       labelClass="font-bold text-[1.125rem]"
                       select={true}
                       selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            // selectValue=''
                       selectOptions={maritalStatus}
-            // onChange={()=>{}}
+                      selectValue={props.values.marital_status}
+                      onChange={props.handleChange}
+                      error={(props.errors.marital_status && props.touched.marital_status) ? props.errors.marital_status : ''}
                     />
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="state"
                       label="Select your state"
                       labelClass="font-bold text-[1.125rem]"
                       select={true}
                       selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            // selectValue=''
                       selectOptions={state}
-            // onChange={()=>{}}
+                      selectValue={props.values.state}
+                      onChange={props.handleChange}
+                      error={(props.errors.state && props.touched.state) ? props.errors.state : ''}
                     />
                   </div>
                   <InputCompOne
                     parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-          name="applyIshInput"
+                    name="email"
                     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="button"
+                    type="submit"
-          onClick={handleNextStep}
                   />
                 </div>
+              </Form>
+            )}
+      </Formik>
     </div>
   );
 }
 
-interface Option {
+interface SelectOption {
-  value: string;
+  loading: boolean;
-  label: string;
+  data: {value: string;
+  label: string}[]
 }
 
 
-const gender: Option[] = [
+const gender: SelectOption = {
+  loading: false,
+  data: [
     { value: "", label: "Please Select" },
     { value: "male", label: "Male" },
     { value: "female", label: "Female" },
     { value: "others", label: "Prefer not to say" },
-];
+  ]
+}
 
-const maritalStatus: Option[] = [
+const maritalStatus: SelectOption = {
+  loading: false,
+  data: [
     { value: "", label: "Please Select" },
     { value: "single", label: "Single" },
     { value: "married", label: "Married" },
     { value: "divorced", label: "Divorced" },
-];
+  ]
+}
 
-const state: Option[] = [
+const state: SelectOption = {
+  loading: false,
+  data: [
     { value: "", label: "Please Select" },
     { value: "abia", label: "Abia" },
     { value: "imo", label: "Imo" },
     { value: "lagos", label: "Lagos" },
-];
+  ]
+}

src/components/Dashboard/home/DashboardHomeEmploymentInfo.tsx

@@ -1,162 +1,275 @@
 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
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>          
                 <div className="mt-[3.25rem] flex flex-col gap-9">
                   <p className='text-red-500 text-lg md:text-2xl'>Employment Informaton</p>
                   <div className="flex items-center gap-[4.125rem]">
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="job_title"
                       floatLabel="Job Title"
                       // labelClass="font-bold text-[1.125rem]"
                       input
                       inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                       placeholder="Software Engineer"
+                      value={props.values.job_title}
+                      onChange={props.handleChange}
+                      error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
                     />
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="employer_name"
                       floatLabel="Employer name"
                       // labelClass="font-bold text-[1.125rem]"
                       input
                       inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                       placeholder="Mr. Mark John"
+                      value={props.values.employer_name}
+                      onChange={props.handleChange}
+                      error={(props.errors.employer_name && props.touched.employer_name) ? props.errors.employer_name : ''}
                     />
                   </div>
                   <div className="flex items-center gap-[4.125rem]">
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="job_sector"
                       floatLabel="Job Sector"
                       // labelClass="font-bold text-[1.125rem]"
                       select={true}
                       selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            // selectValue=''
+                      selectOptions={jobSector}
-            selectOptions={jobSection}
+                      selectValue={props.values.job_sector}
-            // onChange={()=>{}}
+                      onChange={props.handleChange}
+                      error={(props.errors.job_sector && props.touched.job_sector) ? props.errors.job_sector : ''}
                     />
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="industry"
                       floatLabel="Select your industry"
                       // labelClass="font-bold text-[1.125rem]"
                       select={true}
                       selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            // selectValue=''
                       selectOptions={industry}
-            // onChange={()=>{}}
+                      selectValue={props.values.industry}
+                      onChange={props.handleChange}
+                      error={(props.errors.industry && props.touched.industry) ? props.errors.industry : ''}
                     />
                   </div>
                   <div className="flex items-center gap-[4.125rem]">
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="date_of_resumption"
                       floatLabel="Date of resumption"
                       // labelClass="font-bold text-[1.125rem]"
                       input
+                      inputType='date'
                       inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                       placeholder="12/12/2015"
+                      value={props.values.date_of_resumption}
+                      onChange={props.handleChange}
+                      error={(props.errors.date_of_resumption && props.touched.date_of_resumption) ? props.errors.date_of_resumption : ''}
                     />
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="employer_email"
                       floatLabel="Employers official email"
                       // labelClass="font-bold text-[1.125rem]"
                       input
                       inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                       placeholder="example@gmail.com"
+                      value={props.values.employer_email}
+                      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]">
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="annual_income"
                       floatLabel="Annual Income"
                       // labelClass="font-bold text-[1.125rem]"
                       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] text-right"
                       placeholder="1,200,000"
+                      value={props.values.annual_income}
+                      onChange={props.handleChange}
+                      error={(props.errors.annual_income && props.touched.annual_income) ? props.errors.annual_income : ''}
                     />
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="monthly_salary"
                       floatLabel="Net monthly salary"
                       // labelClass="font-bold text-[1.125rem]"
                       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] text-right"
                       placeholder="100,000"
+                      value={props.values.monthly_salary}
+                      onChange={props.handleChange}
+                      error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
                     />
                   </div>
                   <div className="flex items-center gap-[4.125rem]">
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
+                      name="salary_payment_date"
                       floatLabel="Salary payment date"
                       // labelClass="font-bold text-[1.125rem]"
                       input
+                      inputType='date'
                       inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                       placeholder="30th of every month"
-          />{" "}
+                      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="applyIshInput"
+                      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="applyIshInput"
+                    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]"
-          // selectValue=''
                     selectOptions={qualification}
-          // onChange={()=>{}}
+                    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="button"
+                    type="submit"
-          onClick={handleNextStep}
                   />
                 </div>
+              </Form>
+            )}
+      </Formik>
     </div>
   );
 }
 
 
 
-interface Option {
+interface SelectOption {
-  value: string;
+  loading: boolean;
-  label: string;
+  data: {value: string;
+  label: string}[]
 }
 
 
-const jobSection: Option[] = [
+const jobSector: SelectOption = {
+  loading: false,
+  data: [
     { value: "", label: "Please Select" },
     { value: "private (non academic)", label: "Private (non academic)" },
-];
+  ]
+}
 
-const industry: Option[] = [
+const industry: SelectOption = {
+  loading: false,
+  data: [
     { value: "", label: "Please Select" },
     { value: "engineering", label: "Engineering" },
-];
+  ]
+}
 
-const qualification: Option[] = [
+const qualification: SelectOption = {
+  loading: false,
+  data: [
     { value: "", label: "Please Select" },
     { value: "b.sc + professional qualification", label: "B.Sc + Professional Qualification" },
-];
+  ]
+}

src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx

@@ -1,15 +1,72 @@
 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
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>          
                 <div className="mt-[3.25rem] flex flex-col gap-9">
                   <p className='text-red-500 text-lg md:text-2xl'>Reference Details <span className='text-base'>(Must be 18 years and above)</span></p>
                   <div className="flex items-center gap-[4.125rem]">
@@ -18,48 +75,63 @@ export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
                       <div className='w-full flex flex-col gap-9'>
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="applyIshInput"
+                              name="ref_name"
                               floatLabel="Full name"
                               // labelClass="font-bold text-[1.125rem]"
                               input
                               inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                               placeholder="John James"
+                              value={props.values.ref_name}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_name && props.touched.ref_name) ? props.errors.ref_name : ''}
                           />
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="applyIshInput"
+                              name="ref_relationship"
                               floatLabel="Relationship"
                               // labelClass="font-bold text-[1.125rem]"
                               input
                               inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                               placeholder="Sister"
+                              value={props.values.ref_relationship}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_relationship && props.touched.ref_relationship) ? props.errors.ref_relationship : ''}
                           />
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="applyIshInput"
+                              name="ref_number"
                               floatLabel="Phone number"
                               // labelClass="font-bold text-[1.125rem]"
                               input
                               inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                               placeholder="07000000000"
+                              value={props.values.ref_number}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_number && props.touched.ref_number) ? props.errors.ref_number : ''}
                           />
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="applyIshInput"
+                              name="ref_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_email}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_email && props.touched.ref_email) ? props.errors.ref_email : ''}
                           />
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="applyIshInput"
+                              name="ref_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_bvn}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_bvn && props.touched.ref_bvn) ? props.errors.ref_bvn : ''}
                           />
                       </div>
                     </div>
@@ -68,48 +140,63 @@ export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
                         <div className='w-full flex flex-col gap-9'>
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                        name="applyIshInput"
+                              name="ref_two_name"
                               floatLabel="Full name"
                               // labelClass="font-bold text-[1.125rem]"
                               input
                               inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                               placeholder="John James"
+                              value={props.values.ref_two_name}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_two_name && props.touched.ref_two_name) ? props.errors.ref_two_name : ''}
                           />
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                        name="applyIshInput"
+                              name="ref_two_relationship"
                               floatLabel="Relationship"
                               // labelClass="font-bold text-[1.125rem]"
                               input
                               inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                               placeholder="Sister"
+                              value={props.values.ref_two_relationship}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_two_relationship && props.touched.ref_two_relationship) ? props.errors.ref_two_relationship : ''}
                           />
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                        name="applyIshInput"
+                              name="ref_two_number"
                               floatLabel="Phone number"
                               // labelClass="font-bold text-[1.125rem]"
                               input
                               inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                               placeholder="07000000000"
+                              value={props.values.ref_two_number}
+                              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="applyIshInput"
+                              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="applyIshInput"
+                              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>
@@ -117,10 +204,12 @@ export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
                   <Button
                     className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
                     text="Next"
-          type="button"
+                    type="submit"
-          onClick={handleNextStep}
                   />
                 </div>
+              </Form>
+            )}
+      </Formik>
     </div>
   );
 }

src/components/GetStarted/BVN.tsx

@@ -32,6 +32,7 @@ const BVN = ({handleNextStep}:Props) => {
 
   const handleSubmit = (values:any) => {
     console.log('values', values)
+    handleNextStep()
   };
 
   return (
@@ -70,7 +71,6 @@ 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,9 +1,10 @@
 import React from "react";
 import InputCompOne from "../shared/InputCompOne";
 
-interface Option {
+interface SelectOption {
-  value: string;
+  loading: boolean;
-  label: string;
+  data: {value: string;
+  label: string}[]
 }
 
 interface InputSectionProps {
@@ -56,7 +57,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: [{ value: "", label: "Select" }],
+      selectOptions: {loading: false, data:[{ value: "", label: "Select" }]},
       value: inputValues.agentId,
       onInput: handleInput,
     },
@@ -116,18 +117,24 @@ const InputSection: React.FC<InputSectionProps> = ({
 
 export default InputSection;
 
-const maritalStatusOptions: Option[] = [
+const maritalStatusOptions: SelectOption = {
+  loading: false,
+  data: [
     { value: "", label: "Select" },
     { value: "single", label: "Single" },
     { value: "married", label: "Married" },
     { value: "divorced", label: "Divorced" },
     { value: "widowed", label: "Widowed" },
-];
+  ]
+}
 
-const titleOptions: Option[] = [
+const titleOptions: SelectOption = {
+  loading: false,
+  data: [
     { value: "", label: "Select" },
     { value: "ms", label: "Ms" },
     { value: "mr", label: "Mr" },
     { 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;
+  value?: string | any;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (e:any) => any;
-  onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
+  onInput?: (e:any) => any;
   name: string;
   tabIndex?: number;
   ref?: React.RefObject<HTMLInputElement>;
   selectValue?: string;
   input?: boolean;
   select?: boolean;
-  selectOptions?: { value: string; label: string }[];
+  selectOptions?: {loading:boolean, data:{ 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 = [],
+      selectOptions = {loading:false, data:[]},
       inputType = "text",
       inputClass,
       parentInputClass,
@@ -58,10 +58,10 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
     return (
       <div className={parentClass}>
         {label && (
-          <label htmlFor={label ? label : floatLabel} className={labelClass}>
+          <label htmlFor={label ? label : floatLabel} className={`flex gap-2 items-center ${labelClass}`}>
             {label}
             {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
-            {error && <span className='text-[10px] text-red-500'>{error}</span>}
+            {error && label && <span className='text-[10px] text-red-500'>{error}</span>}
           </label>
         )}
         {input && (
@@ -82,8 +82,11 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
             {floatLabel &&
               <label
                 htmlFor={label ? label : floatLabel}
-                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`}
+                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`}
-              >{floatLabel}</label>
+              >
+                {floatLabel}
+                {error && floatLabel && !label && <span className='text-[10px] text-red-500'>{error}</span>}
+              </label>
             }
           </div>
         )}
@@ -94,19 +97,33 @@ 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.map(({ value, label }) => (
+              {selectOptions.loading ?
+              <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={`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={`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`}
-              >{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'>