added reference strict validation

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -1,13 +1,15 @@
 import React, { FC, useState, useEffect } from 'react';
 import NairaBag from '../../assets/images/dashboard/naira-bag.png';
+import {useNavigate} from 'react-router-dom'
 import { Button, Icons } from '../';
 import { useSelector } from 'react-redux';
-import PendingList from '../paginated-list/PendingList';
 import { PendingTableList } from '../../core/models';
 import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter';
 import { getUserPendingLoanList } from '../../core/apiRequest';
 import {FormatAmount} from '../../lib/FormatAmount'
 import PendingLoanPopout from './PendingLoanPopout';
+import { RouteHandler } from '../../router/routes';
+import TableWrapper from '../tableWrapper/TableWrapper';
 
 export interface DashBoardCardProps {
   title?: string;
@@ -88,6 +90,8 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
   handleNextStep,
   step,
 }) => {
+
+  const navigate = useNavigate()
   const { userDetails } = useSelector((state: any) => state?.userDetails); // CHECKS IF USER Details are avaliable
 
   const [loanPopout, setLoanPopout] = useState<PopoutProps<PendingTableList>>({show:false, data:{}})
@@ -97,7 +101,7 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
 
   const [userLoanList, setUserLoanList] = useState<{
     loading: boolean;
-    data: PendingTableList;
+    data: Array<PendingTableList>;
   }>({ loading: true, data: [] });
 
   useEffect(() => {
@@ -116,6 +120,7 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
       })
       .catch((err) => {
         setUserLoanList({ loading: false, data: [] });
+        console.log(err)
       });
   }, []);
 
@@ -165,58 +170,76 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
         )}
         {userLoanList.loading ? null : (
           <div className="mt-5 w-full">
-            <PendingList
+            <TableWrapper
               data={userLoanList.data}
-              itemsPerPage={5}
+              itemsPerPage={7}
-              tableTitle="Current Applications"
             >
-              {(data: any) => (
+            {({ data }:{data:any}) => (
-                <div className="w-full p-4 rounded-lg shadow-lg bg-white overflow-x-auto min-h-[250px] max-h-[450px]">
+              <>
-                  <table className="text-[12px] sm:text-base w-full table-auto">
+                <div className='w-full h-[420px] overflow-auto'>
-                    <thead>
+                  <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                      <tr className="text-left border-b-2">
+                      <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                        <th className="px-1 py-4">Date</th>
+                          <tr>
-                        <th className="px-1 py-4 text-right">Amount</th>
+                              <th scope="col" className="px-4 py-2">
-                        <th className="px-1 py-4 text-center min-w-[110px]">
+                                  Date
-                          Payment Term
+                              </th>
-                        </th>
+                              <th scope="col" className="px-4 py-2">
-                        <th className="px-1 py-4 text-center">Status</th>
+                                  Amount
-                        <th className="px-1 py-4 text-right">Action</th>
+                              </th>
-                      </tr>
+                              <th scope="col" className="px-4 py-2">
-                    </thead>
+                                  Payment Term
-                    <tbody>
+                              </th>
-                      {data.map((item: any, index: any) => (
+                              <th scope="col" className="px-4 py-2">
-                        <tr key={index || item} className="even:bg-slate-100">
+                                  Status
-                          <td className="px-1 py-2">
+                              </th>
-                            {NewDateTimeFormatter(item?.added)}
+                              <th scope="col" className="px-4 py-2">
-                          </td>
+                                  Action
-                          <td className="px-1 py-2 text-right">
+                              </th>
-                            {FormatAmount(item?.loan_amount)}
+                          </tr>
-                          </td>
+                      </thead>
-                          <td className="px-1 py-2 text-center">
+                      <tbody>
-                            {item?.payment_month}
+                          {(data && data.length > 0) ? data?.map((item:any) => (
-                          </td>
+                              <tr key={item?.application_uid} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-                          <td className="px-1 py-2 text-center">
+                                  <td className="px-3 py-2">
-                            <button 
+                                    {NewDateTimeFormatter(item?.added)}
-                              className={`${!item?.status_text?.button && 'pointer-events-none border-0'} border p-2`}
+                                  </td>
-                              onClick={()=>setLoanPopout({show:true, data:item})}
+                                  <td className="px-3 py-2">
-                            >
+                                    {FormatAmount(item?.loan_amount)}
-                              {item?.status_text?.text || 'Pending'}
+                                  </td>
-                            </button> 
+                                  <td className="px-3 py-2">
-                          </td>
+                                    {item?.payment_month}
-                          <td className="flex justify-end px-1 py-2 text-right">
+                                  </td>
-                            <button className="flex flex-nowrap items-center px-2 py-1 border-2 border-black">
+                                  <td className="px-3 py-2">
-                              View
+                                    <button 
-                              <Icons name="arrow-right" />
+                                      className={`${!item?.status_text?.button && 'pointer-events-none border-0'} border p-2`}
-                            </button>
+                                      onClick={()=>setLoanPopout({show:true, data:item})}
-                          </td>
+                                    >
-                        </tr>
+                                      {item?.status_text?.text || 'Pending'}
-                      ))}
+                                    </button>
-                    </tbody>
+                                  </td>
+                                  <td className="px-3 py-2 flex gap-2">
+                                    <button className="flex flex-nowrap items-center px-2 py-1 border-2 border-black" onClick={()=>navigate(RouteHandler.dashboardReference, {state:{application_uid: item?.application_uid}})}>
+                                      View
+                                      <Icons name="arrow-right" />
+                                    </button>
+                                  </td>
+                              </tr>
+                          ))
+                          :
+                          <tr className="w-3 p-3">
+                              <td className="px-3 py-2" colSpan={5}>
+                                  <div className="flex justify-center items-center">
+                                      No Record Found
+                                  </div>
+                              </td>
+                          </tr>
+                          }
+                      </tbody>
                   </table>
                 </div>
-              )}
+              </>
-            </PendingList>
+            )}
+            </TableWrapper>
           </div>
         )}
       </div>

src/components/Dashboard/DashboardProfile.tsx

@@ -1,72 +1,111 @@
-import { InputCompOne } from "..";
-
 import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+
 import { RouteHandler } from "../../router/routes";
 
+import { Button, InputCompOne } from "..";
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  firstname: Yup.string()
+    .required("Required"),
+  lastname: Yup.string()
+    .required("Required"),
+  internal_email : Yup.string().required("Required").email("Invalid"),
+});
+
 export default function DashboardProfile() {
     let navigate = useNavigate();
-  const navigateToProfile = () => navigate(RouteHandler.dashboardHome);
+  const navigateToHome = () => navigate(RouteHandler.dashboardHome);
+
+
+  const { userDetails } = useSelector((state:any) => state?.userDetails); // GETS USER DETAILS
+
+  const initialValues = {
+    firstname: userDetails.firstname,
+    lastname: userDetails.lastname,
+    internal_email: userDetails.internal_email
+  };
+
+   //FUNCTION TO HANDLE SUBMIT
+   const handleSubmit = (values:any) => {
+    console.log('good', values)
+  };
+  
   return (
     <div className="w-full">
+
       <div className='my-[2rem] flex items-center'>
-        <button onClick={navigateToProfile} className='w-6 h-6 text-lg flex justify-center items-center rounded-full bg-gray-500'>&lt;</button>
+        <button onClick={navigateToHome} className='py-2 px-4 text-lg text-white flex justify-center items-center bg-[#5C2684]'>&lt; Back</button>
-      </div>
-      <div className="max-w-[25.875rem] w-full p-4 rounded-xl flex flex-col gap-1 bg-[#FBB700]/30">
-          <InputCompOne
-            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
-            label="Full name"
-            labelClass="font-bold text-[1.125rem]"
-            input
-            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="John James"
-          />
-          <InputCompOne
-            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
-            label="Phone number"
-            labelClass="font-bold text-[1.125rem]"
-            input
-            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="07000000000"
-          />
-          <InputCompOne
-            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
-            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"
-          />
-          <InputCompOne
-            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
-            label="Select your state"
-            labelClass="font-bold text-[1.125rem]"
-            input
-            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="Lagos"
-          />
-          <InputCompOne
-            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
-            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"   
-          />
-            <InputCompOne
-            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
-            label="Date of birth"
-            labelClass="font-bold text-[1.125rem]"
-            input
-            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="12/10/1994"   
-          />
       </div>
+
+      <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema}
+              onSubmit={handleSubmit}
+            >
+              {(props)=>(
+                <Form>
+                  <div className="flex flex-col lg:flex-row items-start gap-[2rem]">
+                    <div className='w-full lg:max-w-[30rem] flex flex-col gap-[2rem]'>
+                      <InputCompOne
+                        parentClass="w-full"
+                        name="firstname"
+                        floatLabel="Firstname"
+                        // 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.firstname}
+                        onChange={props.handleChange}
+                        // error={(props.errors.firstname && props.touched.firstname) ? props.errors.firstname : ''}
+                      />
+                      <InputCompOne
+                        parentClass="w-full"
+                        name="internal_email"
+                        floatLabel="Email"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        // disabled={true}
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="Mr. Mark John"
+                        value={props.values.internal_email}
+                        onChange={props.handleChange}
+                        // error={(props.errors.internal_email && props.touched.internal_email) ? props.errors.internal_email : ''}
+                      />
+                    </div>
+
+                    <div className='w-full lg:max-w-[30rem] flex flex-col gap-[2rem]'>
+                      <InputCompOne
+                        parentClass="w-full"
+                        name="lastname"
+                        floatLabel="Lastname"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        // disabled={true}
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="Mr. Mark John"
+                        value={props.values.lastname}
+                        onChange={props.handleChange}
+                        // error={(props.errors.lastname && props.touched.lastname) ? props.errors.lastname : ''}
+                      />
+                    </div>
+                  </div>
+
+                  <div className='hidden w-full lg:max-w-[416px] flex flex-col gap-[2rem]'>
+                    <div className="w-full">
+                      <Button
+                        className="my-4 btn-Y text-black w-full h-11"
+                        text="Update"
+                        type="submit"
+                      />
+                    </div>
+                  </div>
+                </Form>
+              )}
+        </Formik>
     </div>
   );
 }

src/components/Dashboard/PendingLoanPopout.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useState} from 'react'
 import ModalWrapper from '../modal/ModalWrapper'
 import { PendingTableList } from '../../core/models'
 import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter'
@@ -19,7 +19,7 @@ export default function PendingLoanPopout({data, action}:Props<PendingTableList>
         msg: string
       }>({ loading: false, status: false, msg: ''});
 
-    const handleAddCard = (appID:string) => {
+    const handleAddCard = (appID:string | undefined) => {
         let reqData = {
             application_uid: appID
 

src/components/Dashboard/employmentDetails/EmploymentDetails.tsx

@@ -0,0 +1,365 @@
+import {useState, useEffect} from 'react'
+import { Button, InputCompOne } from '../../shared/index';
+
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+
+import { getEmployer } from '../../../core/apiRequest';
+import CustomSpinner from '../../CustomSpinner';
+import { FormatAmount } from '../../../lib/FormatAmount';
+
+// type Props = {
+//   handleNextStep?:(value:{})=>any
+// }
+
+// type EmployerProps = {
+//   loading?: boolean,
+//   data?: Array<{[index:string]: string}> | {[index:string]: Array<{[index:string]: string}> }
+// }
+
+const initialValues = {
+  job_title: "",
+  name: "",
+  job_sector: "",
+  industry: "",
+  start_date: "",
+  official_email:"",
+  annual_salary: "",
+  net_montlty: "",
+  salary_date: "",
+  employee_id: "",
+  highest_eductaion: "",
+  employer_uid: "",
+  isChecked: true
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  isChecked: Yup.bool(), // use bool instead of boolean
+  // .oneOf([true, false], "You must accept the terms and conditions"),
+  job_title: Yup.string()
+    .required("Required"),
+  name: Yup.string().when('isChecked', {
+      is: true, 
+      then: () => Yup.string().required('required'),
+      otherwise: () => Yup.string(),
+    }),
+  job_sector: Yup.string().when('isChecked', {
+      is: true, 
+      then: () => Yup.string().required('required'),
+    }),
+  industry: Yup.string().when('isChecked', {
+      is: true, 
+      then: () => Yup.string().required('required'),
+    }),
+  start_date: Yup.string()
+    .required("Required"),
+  official_email : Yup.string().when('isChecked', {
+      is: true, 
+      then: () => Yup.string().required('required'),
+    })
+    .email("Invalid"),
+  annual_salary: Yup.string()
+    .required("Required")
+    .test("no-e", "Invalid", (value:any) => {
+      if (value && /^[0-9]*$/.test(value) == false) {
+        return false;
+      }
+      return true;
+    }),
+  net_montlty: Yup.string()
+    .required("Required")
+    .test("no-e", "Invalid", (value:any) => {
+      if (value && /^[0-9]*$/.test(value) == false) {
+        return false;
+      }
+      return true;
+    }),
+  salary_date: Yup.string()
+    .required("Required"),
+  employee_id: Yup.string()
+    .required("Required"),
+  highest_eductaion: Yup.string()
+    .required("Required"),
+  employer_uid: Yup.string().when('isChecked', {
+      is: false, 
+      then: () => Yup.string().required('required'),
+    }),
+});
+
+export default function EmploymentDetail() {
+
+  const [employerList, setEmployerList] = useState<any>({
+    loading: true,
+    data: {}
+  })
+
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = () => {
+    console.log('good')
+  };
+
+  useEffect(()=>{
+    getEmployer().then(res => {
+      setEmployerList({loading:false, data:res?.data?.employer})
+    }).catch(err => {
+      console.log(err)
+      setEmployerList({loading:false, data:{}})
+    })
+  },[])
+
+  const formInitialValue = (employerList.loading || Object.keys(employerList?.data)?.length < 1) ? initialValues : {...initialValues, ...employerList?.data}
+
+  return (
+    <>
+    {employerList.loading ?
+        <div className='flex flex-col justify-center items-center h-96'>
+            <CustomSpinner width='w-8' height='h-8' />
+        </div>
+        :
+      <div className="w-full">
+        <Formik
+              initialValues={formInitialValue}
+              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 flex-col lg:flex-row items-start gap-[2rem]">
+                      <div className='w-full lg:max-w-[30rem] flex flex-col'>
+                        {/* <div className='w-full gap-[2rem]'>
+                          <InputCompOne
+                            parentClass="w-full"
+                            name="employer_uid"
+                            floatLabel="Employer Name"
+                            // labelClass="font-bold text-[1.125rem]"
+                            select={true}
+                            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                            selectOptions={{loading:employersList?.loading, data: employersList?.data?.records}}
+                            selectValue={props.values.employer_uid}
+                            onChange={props.handleChange}
+                            error={(props.errors.employer_uid && props.touched.employer_uid) ? props.errors.employer_uid : ''}
+                            disabled={props.values.isChecked}
+                          />
+                          <div className='flex gap-4 items-start my-2'>
+                            <input 
+                              type='checkbox' 
+                              name="isChecked"
+                              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}
+                              checked={props.values.isChecked}
+                            />
+                            <p className='text-[12px] text-justify'>Check here if employer is not on the list</p>
+                          </div>
+                          <div className={`hidden p-4 ${props.values.isChecked && 'hidden'}`}>
+                            Name: {'Name'}
+                          </div>
+                        </div> */}
+                        <div className={`w-full flex flex-col gap-[2rem] ${!props.values.isChecked && 'hidden'}`}>
+                          <InputCompOne
+                            parentClass="w-full"
+                            name="name"
+                            floatLabel="Employer name"
+                            // labelClass="font-bold text-[1.125rem]"
+                            input
+                            disabled={true}
+                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                            placeholder="Mr. Mark John"
+                            value={props.values.name}
+                            onChange={props.handleChange}
+                            // error={(props.errors.name && props.touched.name) ? props.errors.name : ''}
+                          />
+                          <InputCompOne
+                            parentClass="w-full"
+                            name="official_email"
+                            floatLabel="Employers official email"
+                            // labelClass="font-bold text-[1.125rem]"
+                            input
+                            disabled={true}
+                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                            placeholder="example@gmail.com"
+                            value={props.values.official_email}
+                            onChange={props.handleChange}
+                            // error={(props.errors.official_email && props.touched.official_email) ? props.errors.official_email : ''}
+                          />
+                          <InputCompOne
+                            parentClass="w-full"
+                            name="industry"
+                            floatLabel="Select your industry"
+                            // labelClass="font-bold text-[1.125rem]"
+                            select={true}
+                            disabled={true}
+                            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                            selectOptions={props.values.industry}
+                            selectValue={props.values.industry}
+                            onChange={props.handleChange}
+                            // error={(props.errors.industry && props.touched.industry) ? props.errors.industry : ''}
+                          />
+                          <InputCompOne
+                            parentClass="w-full"
+                            name="job_sector"
+                            floatLabel="Job Sector"
+                            // labelClass="font-bold text-[1.125rem]"
+                            select={true}
+                            disabled={true}
+                            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                            selectOptions={props.values.job_sector}
+                            selectValue={props.values.job_sector}
+                            onChange={props.handleChange}
+                            // error={(props.errors.job_sector && props.touched.job_sector) ? props.errors.job_sector : ''}
+                          />
+                        </div>
+                      </div>
+
+                      <div className='w-full lg:max-w-[30rem] flex flex-col gap-[2rem]'>  
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="job_title"
+                          floatLabel="Job Title"
+                          // labelClass="font-bold text-[1.125rem]"
+                          input
+                          disabled={true}
+                          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="w-full"
+                          name="highest_eductaion"
+                          floatLabel="Highest level of education"
+                          // labelClass="font-bold text-[1.125rem]"
+                          select={true}
+                          disabled={true}
+                          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                          selectOptions={props.values.highest_eductaion}
+                          selectValue={props.values.highest_eductaion}
+                          onChange={props.handleChange}
+                          // error={(props.errors.highest_eductaion && props.touched.highest_eductaion) ? props.errors.highest_eductaion : ''}
+                        />
+                        <div className="w-full flex flex-col sm:flex-row items-center gap-4">
+                            <InputCompOne
+                            parentClass="w-full"
+                            name="start_date"
+                            floatLabel="Date of resumption"
+                            // labelClass="font-bold text-[1.125rem]"
+                            input
+                            disabled={true}
+                            inputType='text'
+                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                            placeholder="12/12/2015"
+                            value={props.values.start_date}
+                            onChange={props.handleChange}
+                            // error={(props.errors.start_date && props.touched.start_date) ? props.errors.start_date : ''}
+                          />
+                          <InputCompOne
+                            parentClass="w-full"
+                            name="salary_date"
+                            floatLabel="Salary payment date"
+                            // labelClass="font-bold text-[1.125rem]"
+                            input
+                            disabled={true}
+                            inputType='text'
+                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                            placeholder="30th of every month"
+                            value={(props.values.salary_date)}
+                            onChange={props.handleChange}
+                            // error={(props.errors.salary_date && props.touched.salary_date) ? props.errors.salary_date : ''}
+                          />
+                        </div>
+                        <div className="w-full flex flex-col sm:flex-row items-center gap-4">
+                          <InputCompOne
+                            parentClass="w-full"
+                            name="annual_salary"
+                            floatLabel="Annual Income"
+                            // labelClass="font-bold text-[1.125rem]"
+                            input
+                            disabled={true}
+                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
+                            placeholder="1,200,000"
+                            value={FormatAmount(props.values.annual_salary)}
+                            onChange={props.handleChange}
+                            // error={(props.errors.annual_salary && props.touched.annual_salary) ? props.errors.annual_salary : ''}
+                          />
+                          <InputCompOne
+                            parentClass="w-full"
+                            name="net_montlty"
+                            floatLabel="Net monthly salary"
+                            // labelClass="font-bold text-[1.125rem]"
+                            input
+                            disabled={true}
+                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
+                            placeholder="100,000"
+                            value={FormatAmount(props.values.net_montlty)}
+                            onChange={props.handleChange}
+                            // error={(props.errors.net_montlty && props.touched.net_montlty) ? props.errors.net_montlty : ''}
+                          />
+                        </div>
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="employee_id"
+                          floatLabel="Employee ID"
+                          // labelClass="font-bold text-[1.125rem]"
+                          input
+                          disabled={true}
+                          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 className="hidden w-full">
+                          <Button
+                            className="my-4 btn-Y text-black w-full h-11"
+                            text="Next"
+                            type="submit"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </Form>
+              )}
+        </Formik>
+      </div>
+    }
+    </>
+  );
+}
+
+
+
+// interface SelectOption {
+//   loading: boolean;
+//   data: {value: string;
+//   label: string}[]
+// }
+
+
+// const jobSector: SelectOption = {
+//   loading: false,
+//   data: [
+//     { value: "", label: "Please Select" },
+//     { value: "private (non academic)", label: "Private (non academic)" },
+//   ]
+// }
+
+// const industry: SelectOption = {
+//   loading: false,
+//   data: [
+//     { value: "", label: "Please Select" },
+//     { value: "engineering", label: "Engineering" },
+//   ]
+// }
+
+// const highestEductaion: SelectOption = {
+//   loading: false,
+//   data: [
+//     { value: "", label: "Please Select" },
+//     { value: "b.sc + professional qualification", label: "B.Sc + Professional Qualification" },
+//   ]
+// }

src/components/Dashboard/home/DashboardHomeDetail.tsx

@@ -1,5 +1,7 @@
 import { Button, InputCompOne, Stepper } from '../../shared/index';
 
+import { state } from '../../../utils/states';
+
 import {Formik, Form} from 'formik'
 import * as Yup from "yup";
 
@@ -13,7 +15,7 @@ const initialValues = {
   marital_status: "",
   state: "",
   email:"",
-  country:""
+  country:"NG"
 };
 
 // To get the validation schema
@@ -171,16 +173,6 @@ const maritalStatus: SelectOption = {
   ]
 }
 
-const state: SelectOption = {
-  loading: false,
-  data: [
-    { value: "", label: "Please Select" },
-    { value: "abia", label: "Abia" },
-    { value: "imo", label: "Imo" },
-    { value: "lagos", label: "Lagos" },
-  ]
-}
-
 const country: SelectOption = {
   loading: false,
   data: [

src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx

@@ -42,16 +42,20 @@ const validationSchema = Yup.object().shape({
     .min(11, "must be 11 digits")
     .max(11, "must be 11 digits"),
   ref_two_name: Yup.string()
-    .required("Required"),
+  .notOneOf([Yup.ref('ref_name')], "Name cannot be the same")
+  .required("Required"),
   ref_two_email: Yup.string()
     .email("Invalid")
+    .notOneOf([Yup.ref('ref_email')], "Email cannot be the same")
     .required("Required"),
   ref_two_phone_number: Yup.string()
+    .notOneOf([Yup.ref('ref_phone_number')], "Phone number cannot be the same")
     .required("Required"),
   ref_two_relationship: Yup.string()
     .required("Required"),
   ref_two_bvn: Yup.string()
-    .required("BVN is required")
+  .notOneOf([Yup.ref('ref_bvn')], "BVN number cannot be the same")
+  .required("Required")
     .test("no-e", "Invalid number", (value:any) => {
       if (value && /^[0-9]*$/.test(value) == false) {
         return false;

src/components/Dashboard/referenceDetails/ReferenceDetails.tsx

@@ -0,0 +1,176 @@
+import {useEffect, useState} from 'react'
+import {useLocation, useNavigate} from 'react-router-dom'
+import { Button, InputCompOne } from "../../shared";
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+import { RouteHandler } from '../../../router/routes';
+import { getLoanDetail } from '../../../core/apiRequest';
+import CustomSpinner from '../../CustomSpinner';
+
+interface LoanDetail {
+  loan_amount: string;
+  payment_month: string;
+  sales_agent: string;
+  [key: string]: any;  // to accommodate any additional properties
+}
+
+// interface InitialValues {
+//   loan_amount: string;
+//   payment_month: string;
+//   sales_agent: string;
+// }
+
+const initialValues = {
+  loan_amount: "",
+  payment_month: "",
+  sales_agent: "",
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  payment_month: Yup.string()
+    .required("Required"),
+  loan_amount: Yup.string()
+    .required("Required")
+    .test("no-e", "Invalid", (value:any) => {
+      if (value && /^[0-9]*$/.test(value) == false) {
+        return false;
+      }
+      return true;
+    }),
+    sales_agent: Yup.string()
+});
+
+type LocationState = {
+  application_uid: string
+}
+
+export default function ReferenceDetails() {
+
+    const location = useLocation()
+    const navigate = useNavigate()
+
+    // const applicationUID = location?.state?.application_uid
+    const stateExist = location?.state as LocationState
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = (values:{}) => {
+    // handleNextStep(values)
+    console.log(values)
+  };
+
+  const [loanDetail, setLoanDetail] = useState<{loading:boolean, data:LoanDetail}>({
+    loading: true,
+    data: {
+      loan_amount: '',
+    payment_month: '',
+    sales_agent: '',
+    },
+  })
+  useEffect(()=>{
+    if(!stateExist){
+      navigate(RouteHandler.dashboardHome)
+      return
+    }
+    getLoanDetail({application_uid:stateExist.application_uid}).then(res => {
+      setLoanDetail({loading:false, data:res?.data?.loan})
+      }).catch(err => {
+        console.log(err)
+        setLoanDetail((prev:any) => ({...prev, loading:false}))
+      })
+  },[])
+
+  // const formInitialValue:LoanDetail = (loanDetail.loading) ? initialValues : loanDetail?.data
+  const formInitialValue = (loanDetail.loading || Object.keys(loanDetail?.data)?.length < 1) ? initialValues : {...initialValues, ...loanDetail?.data}
+
+  return (
+    <>
+        {loanDetail.loading ?
+        <div className='flex flex-col justify-center items-center h-96'>
+            <CustomSpinner width='w-8' height='h-8' />
+        </div>
+        :
+        <div className="w-full">
+        <Formik
+                initialValues={formInitialValue}
+                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'>Loan Details</p>
+                    <div className='w-full flex flex-wrap items-center gap-4'>
+                        <InputCompOne
+                            parentClass="w-full sm:max-w-[10rem] flex flex-col gap-4"
+                            name="loan_amount"
+                            label="Amount"
+                            labelClass="font-bold text-[1.125rem]"
+                            input
+                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
+                            placeholder="350,000"
+                            value={props.values.loan_amount}
+                            disabled={true}
+                            onChange={props.handleChange}
+                            // error={(props.errors.loan_amount && props.touched.loan_amount) ? props.errors.loan_amount : ''}
+                        />
+                        <InputCompOne
+                            parentClass="w-full sm:max-w-[10rem] flex flex-col gap-4"
+                            name="payment_month"
+                            label="Months?"
+                            labelClass="font-bold text-[1.125rem]"
+                            select={true}
+                            disabled={true}
+                            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                            selectOptions={props.values.payment_month}
+                            selectValue={props.values.payment_month}
+                            onChange={props.handleChange}
+                            // error={(props.errors.payment_month && props.touched.payment_month) ? props.errors.payment_month : ''}
+                        />
+                        <InputCompOne
+                            parentClass="w-full sm:max-w-[10rem] flex flex-col gap-4"
+                            name="sales_agent"
+                            label="agent ID"
+                            labelClass="font-bold text-[1.125rem]"
+                            floatLabel='Enter agent ID'
+                            input
+                            disabled={true}
+                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                            placeholder="Agent ID"
+                            value={props.values.sales_agent}
+                            onChange={props.handleChange}
+                            // error={(props.errors.sales_agent && props.touched.sales_agent) ? props.errors.sales_agent : ''}
+                        />
+                    </div>
+                    <Button
+                        className="hidden my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+                        text="Next"
+                        type="submit"
+                    />
+                    </div>
+                </Form>
+                )}
+        </Formik>
+        </div>
+        }
+    </>
+  );
+}
+
+// interface SelectOption {
+//   loading: boolean;
+//   data: {value: string;
+//   label: string}[]
+// }
+
+
+// const paymentMonth: 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/MainBtn.tsx

@@ -0,0 +1,30 @@
+type Props ={
+    text: string
+    onClick?: ()=>any
+    className?: string
+    shrinkAside?: boolean
+    icon?: string
+    loading?: boolean
+    disabled?: boolean
+}
+
+export default function MainBtn({
+    onClick,
+    className,
+    text,
+    shrinkAside,
+    icon,
+    loading,
+    disabled
+}:Props) {
+  return (
+    <button 
+        disabled={disabled}
+        className={`py-3 px-4 rounded-md ${className || ''} ${(disabled || loading) && 'opacity-60'}`}
+        onClick={onClick}
+    >
+        {icon && <i className={`fa-solid ${icon}`}></i>}
+        {shrinkAside ? '' : loading? 'Loading...' : text}
+    </button>
+  )
+}

src/components/Payment/Payment.tsx

@@ -1,7 +1,64 @@
-import React from 'react'
+import {useEffect, useState} from 'react'
+import { getPaymentDetails } from '../../core/apiRequest'
 
-export default function Payment() {
+type Props = {
-  return (
+  reference: string | null
-    <div>Payment Page</div>
-  )
 }
+
+// type PaymentPayloads = {
+//   uid?: string
+//   event?: string
+//   customer_code?: string
+//   plan_name?: string
+//   plan_code?: string
+//   subscription_code?: string | null,
+//   amount?: string
+//   authorization_code?: string
+//   gateway_response?: string
+//   gateway_status?: string
+//   reference?: string
+//   added?: string
+// }
+
+export default function Payment({reference}:Props) {
+
+  const [paymentDetails, setPaymentDetails] = useState<any>({
+    loading: true,
+    data: {}
+  })
+
+  useEffect(()=>{
+    getPaymentDetails({reference}).then(res => {
+      setPaymentDetails({loading:false, data:res?.data?.payment})
+      console.log(res?.data?.payment)
+    }).catch(err => {
+      setPaymentDetails({loading:false, data:{}})
+      console.log(err)
+    })
+  },[])
+
+  return (
+    <div className='w-full'>
+      <div className='p-4'>
+        <h1 className='p-2 mb-3 text-2xl'>Confirmation</h1>
+        <div className='p-8 w-full max-w-2xl bg-white shadow-md rounded-md'>
+          {paymentDetails.loading ? 
+          <p>Loading...</p>
+          :
+          (paymentDetails?.data && Object.keys(paymentDetails?.data).length > 0) ?
+          <>
+          {Object.keys(paymentDetails?.data).map((item) => (
+            <div key={item} className='p-2 flex gap-1'>
+            <p className='w-64 font-semibold'>{item}</p>
+            <p className=''>{paymentDetails?.data[item]}</p>
+            </div>
+          ))}
+          </>
+          :
+          <p className='p-2'>No Payment Found!</p>
+          }
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/paginated-list/PendingList.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useEffect, useState } from "react";
 import { PendingTableList } from "../../core/models";
 
 type PaginatedListProps = {
-    data: PendingTableList,
+    data: Array<PendingTableList>,
     itemsPerPage?: number,
     filterItem?: string[],
     tableTitle?: string,
@@ -28,12 +28,12 @@ export default function PendingList({
 
   const handlePrev = () => {
     if (currentPage != 0) {
-      setCurrentPage((prev) => prev - numberOfSelection);
+      setCurrentPage((prev:any) => prev - numberOfSelection);
     }
   };
   const handleNext = () => {
     if (currentPage < data.length) {
-      setCurrentPage((prev) => prev + numberOfSelection);
+      setCurrentPage((prev:any) => prev + numberOfSelection);
     }
   };
 

src/components/shared/InputCompOne.tsx

@@ -17,7 +17,7 @@ export interface InputCompOneProps {
   selectValue?: string;
   input?: boolean;
   select?: boolean;
-  selectOptions?: {loading:boolean, data:{ [index: string]: string; }[]};
+  selectOptions?: {loading:boolean, data:{ [index: string]: string; }[]} | any;
   inputType?: string;
   inputClass?: string;
   parentInputClass?: string;
@@ -103,19 +103,21 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               onChange={onChange}
               disabled={disabled}
             >
-              {selectOptions.loading ?
+              {typeof(selectOptions) == 'string' ?
+              <option value={selectValue}>{selectValue}</option>
+              :selectOptions.loading ?
               <option value=''>Loading...</option>
               : selectOptions.data.length && name == 'employer_uid' ?
                 <>
                   <option value=''>Please Select</option>
-                  {selectOptions.data.map(({ uid, name }) => (
+                  {selectOptions.data.map(({ uid, name }:any) => (
                     <option key={uid} value={uid}>
                       {name}
                     </option>
                   ))}
                 </>
               : selectOptions.data.length && name != 'employer_uid' ?
-                  selectOptions.data.map(({ value, label }) => (
+                  selectOptions.data.map(({ value, label }:any) => (
                     <option key={value} value={value}>
                       {label}
                     </option>

src/components/tableWrapper/TableWrapper.tsx

@@ -0,0 +1,149 @@
+import { ReactNode, useEffect, useState } from "react";
+import MainBtn from "../MainBtn";
+
+const data1:{ name: string; email: string; status: string; location: string; }[] = [];
+
+type PaginatedListProps = {
+    data: any,
+    itemsPerPage: number,
+    filterItem?: string[],
+    titleClass?:string,
+    children: (data:any) => ReactNode;
+}
+
+export default function TableWrapper({
+  data = data1,
+  itemsPerPage = 5,
+  filterItem,
+  children,
+}:PaginatedListProps) {
+  const [isLoading, setIsLoading] = useState(true)
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredData, setFilteredData] = useState(data);
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [newData, setNewData] = useState<{ name: string; email: string; status: string; location: string; }[]>([]);
+
+  const numberOfSelection = itemsPerPage;
+
+  const handlePrev = () => {
+    if (currentPage != 0) {
+      setCurrentPage((prev:any) => prev - numberOfSelection);
+    }
+  };
+  const handleNext = () => {
+    if (currentPage < data.length) {
+      setCurrentPage((prev:any) => prev + numberOfSelection);
+    }
+  };
+
+  const handleSearch = ({ target: { value } }:{target: {value:string}}, name:string) => {
+    setSearchTerm(value);
+    let newFilteredData:any = data.filter((item:any) =>
+      item[name].toLowerCase().startsWith(value.toLowerCase())
+    );
+    setFilteredData(newFilteredData);
+    setCurrentPage(0);
+  };
+
+  useEffect(() => {
+    setIsLoading(true)
+    setTimeout(()=>{
+      setNewData(
+        filteredData?.slice(currentPage, numberOfSelection + currentPage)
+      );
+      setIsLoading(false)
+    },1000)
+  }, [currentPage, filteredData]);
+
+  useEffect(()=>{
+    setCurrentPage(0)
+  },[itemsPerPage])
+
+  return (
+    <div className="p-2 w-full bg-white border-b dark:bg-gray-800 rounded-md">
+      {data.length > 0 && filterItem && (
+        <div className="mb-10 flex justify-end items-center gap-2">
+          {filterItem.map((item, index) => (
+            <label
+              key={index}
+              className="flex flex-col sm:flex-row items-center gap-2 text-slate-600 dark:text-slate-100 transition-all duration-500"
+            >
+              Search by {item[0].toUpperCase() + item.slice(1)}
+              <input
+                name={item}
+                type="text"
+                className="py-1 px-2 text-sm min-w-[100px] text-black dark:text-white bg-white dark:bg-slate-800 rounded-full border-0 outline-none ring-1 ring-slate-300 dark:ring-white transition-all duration-500"
+                value={searchTerm}
+                onChange={(e) => {
+                  handleSearch(e, item);
+                }}
+              />
+            </label>
+          ))}
+        </div>
+      )}
+    
+      <div className="flex flex-col">
+        <div className="w-full">
+          {children({ data: newData })}
+        </div>
+        
+        {/* PAGINATION BUTTON */}
+        {(newData.length > 0 && data.length > itemsPerPage) &&
+          <div className='p-2 w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
+            <div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
+              {isLoading ? '----' : `${currentPage + 1}-${currentPage + numberOfSelection >= data.length ? data.length : (currentPage + numberOfSelection)}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{data.length}</span>
+            </div>
+            <div className='flex items-center gap-3 md:gap-6'>
+                <MainBtn 
+                    onClick={handlePrev}
+                    text='Prev' 
+                    className={`${currentPage == 0 ? 'bg-sky-600/50 pointer-events-none' : 'bg-sky-600'} text-white-light`} 
+                    disabled={isLoading}
+                />
+                <MainBtn 
+                    onClick={handleNext}
+                    text='Next' 
+                    className={`${currentPage + numberOfSelection >= data.length ? 'bg-sky-600/50 pointer-events-none' : 'bg-sky-600'} text-white-light`} 
+                    disabled={isLoading}
+                />
+            </div>
+          </div>
+        }
+      </div>
+
+      {/* show prev and next button if data exist */}
+      {/* {data.length > 0 && (
+        {data.length && data.map((item, index)=>{
+          item = item
+          if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
+            return (
+              <button
+                key={index}
+                onClick={handleNext}
+                className={`w-6 h-6 md:w-12 md:h-12 text-sm md:text-lg rounded-full flex justify-center items-center border transition-all duration-300 ${
+                  currentPage != index
+                    ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
+                    : "text-slate-600 border-slate-600 dark:text-white dark:border-white pointer-events-none"
+                }`}
+              >
+                {index/itemsPerPage +1}
+              </button>
+            )
+          }
+        })}
+      </div>
+      )} */}
+    {isLoading && <TableIsLoading />}
+    </div>
+  );
+}
+
+const TableIsLoading = () => {
+  return (
+    <div className="w-full fixed z-[991] inset-0 flex justify-center items-center bg-white/50">
+      <p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
+    </div>
+  )
+}

src/core/apiRequest.ts

@@ -50,6 +50,32 @@ export const getEmployersList = () => {
     return getAuxEnd(`/employers`, reqData)
 }
 
+// FUNCTION TO GET USER EMPLOYER
+export const getEmployer = () => {
+    let reqData = {
+        uid: localStorage.getItem('uid'),
+    }
+    return getAuxEnd(`/dash/employer?uid=${reqData?.uid}`, null)
+}
+
+// FUNCTION TO GET LOAN DETAILS
+export const getLoanDetail = (postData:any) => {
+    let reqData = {
+        uid: localStorage.getItem('uid'),
+        ...postData
+    }
+    return getAuxEnd(`/loan/loandetail?uid=${reqData?.uid}&application_uid=${reqData?.application_uid}`, null)
+}
+
+// FUNCTION TO GET PAYMENT DETAILS
+export const getPaymentDetails = (postData:any) => {
+    let reqData = {
+        uid: localStorage.getItem('uid'),
+        ...postData
+    }
+    return getAuxEnd(`/payment/status?uid=${reqData?.uid}&reference=${reqData?.reference}`, null)
+}
+
 // FUNCTION TO ADD CARD
 export const addCard = (postData:any) => {
     let reqData = {
@@ -57,4 +83,12 @@ export const addCard = (postData:any) => {
         ...postData
     }
     return postAuxEnd('/addcard', reqData)
+}
+
+// FUNCTION TO GET USER AGREEMENTS LIST
+export const getAgreementsList = () => {
+    let reqData = {
+        uid: localStorage.getItem('uid'),
+    }
+    return getAuxEnd(`/agreements?uid=${reqData?.uid}`, null)
 }

src/core/models.ts

@@ -29,4 +29,4 @@ export type PendingTableList = {
         button?: boolean
         advise?: string
     }    
-}[];
+};

src/layouts/DashboardLayout/Aside.tsx

@@ -207,7 +207,7 @@ const asideLinks: AsideLinksType = [
   },
   {
     name: 'Reference Details',
-    link: '/dashboard/payments',
+    link: "/dashboard/reference",
     icon: 'dash-icon',
     nestedLink: [],
   },

src/pages/DashboardLegalsPage.tsx

@@ -1,5 +1,96 @@
+import {useEffect, useState} from 'react'
+import TableWrapper from "../components/tableWrapper/TableWrapper";
+import { getAgreementsList } from '../core/apiRequest';
+import { NewDateTimeFormatter } from '../lib/NewDateTimeFormatter';
+import { FormatAmount } from '../lib/FormatAmount';
+
 export default function DashboardLegalsPage() {
+
+  const [agreementList, setAgreementList] = useState({loading:true, data:[]})
+
+  useEffect(()=>{
+    getAgreementsList()
+    .then((res) => {
+      if (!res || !res.data) {
+        setAgreementList({ loading: false, data: [] });
+        return;
+      }
+      setAgreementList({ loading: false, data: res?.data });
+    })
+    .catch((err) => {
+      setAgreementList({ loading: false, data: [] });
+      console.log(err)
+    });
+  },[])
+
   return (
-    <div>DashboardLegals</div>
+    <div className='w-full'>
+      <h1 className='my-3 text-3xl font-bold'>Agreements</h1>
+      {agreementList.loading ? null : (
+        <div className="mt-5 w-full">
+          <TableWrapper
+            data={agreementList.data}
+            itemsPerPage={7}
+          >
+          {({ data }:{data:any}) => (
+            <>
+              <div className='w-full min-h-[300px] overflow-auto'>
+                <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                    <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                        <tr>
+                            <th scope="col" className="px-4 py-2">
+                                Date
+                            </th>
+                            <th scope="col" className="px-4 py-2">
+                                Amount
+                            </th>
+                            <th scope="col" className="px-4 py-2">
+                                Payment Term
+                            </th>
+                            <th scope="col" className="px-4 py-2">
+                                Status
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {(data && data.length > 0) ? data?.map((item:any) => (
+                            <tr key={item.loan_uid} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                                <td className="px-3 py-2">
+                                  {NewDateTimeFormatter(item?.added)}
+                                </td>
+                                <td className="px-3 py-2">
+                                  {FormatAmount(item?.loan_amount)}
+                                </td>
+                                <td className="px-3 py-2">
+                                  {item?.payment_month}
+                                </td>
+                                <td className="px-3 py-2">
+                                  <button 
+                                    className={`${!item?.status_text?.button && 'pointer-events-none border-0'} border p-2`}
+                                    // onClick={()=>setLoanPopout({show:true, data:item})}
+                                  >
+                                    {item?.status_text?.text || 'Pending'}
+                                  </button>
+                                </td>
+                            </tr>
+                        ))
+                        :
+                        <tr className="w-3 p-3">
+                            <td className="px-3 py-2" colSpan={5}>
+                                <div className="flex justify-center items-center">
+                                    No Record Found
+                                </div>
+                            </td>
+                        </tr>
+                        }
+                    </tbody>
+                </table>
+              </div>
+            </>
+          )}
+          </TableWrapper>
+        </div>
+      )}
+    </div>
   )
 }

src/pages/DashboardPaymentsPage.tsx

@@ -1,5 +0,0 @@
-export default function DashboardpaymentsPage() {
-  return (
-    <div>Dashboardpayments</div>
-  )
-}

src/pages/DashboardReferencePage.tsx

@@ -0,0 +1,9 @@
+import ReferenceDetails from "../components/Dashboard/referenceDetails/ReferenceDetails";
+
+export default function DashboardReferencePage() {
+  return (
+    <>
+      <ReferenceDetails />
+    </>
+  )
+}

src/pages/DashboardVerificationPage.tsx

@@ -1,5 +1,9 @@
+import EmploymentDetail from "../components/Dashboard/employmentDetails/EmploymentDetails";
+
 export default function DashboardVerificationPage() {
   return (
-    <div>DashboardVerification</div>
+    <>
+      <EmploymentDetail />
+    </>
   )
 }

src/pages/PaymentPage.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import {useEffect} from 'react'
 import {useLocation, useNavigate} from 'react-router-dom'
 import Payment from '../components/Payment/Payment'
 import { RouteHandler } from '../router/routes'
@@ -9,7 +9,7 @@ export default function PaymentPage() {
   const queryParams = new URLSearchParams(location?.search);
   const trxRef = queryParams.get("trxref");
   const reference = queryParams.get("reference");
-  console.log('LOC', trxRef, reference)
+  // console.log('TEST', trxRef, reference)
 
   useEffect(()=>{
     if(!trxRef || !reference){
@@ -18,7 +18,7 @@ export default function PaymentPage() {
   },[])
   return (
     <>
-        <Payment />
+        <Payment reference={reference} />
     </>
   )
 }

src/pages/index.ts

@@ -5,7 +5,7 @@ import DashboardHomePage from "./DashboardHomePage";
 import DashboardLegalsPage from "./DashboardLegalsPage";
 import DashboardProfilePage from "./DashboardProfilePage";
 import DashboardVerificationPage from "./DashboardVerificationPage";
-import DashboardpaymentsPage from "./DashboardPaymentsPage";
+import DashboardReferencePage from "./DashboardReferencePage";
 import TermsAndConditionPage from "./TermsAndConditionPage";
 import PersonalBankingPage from "./PersonalBankingPage";
 import BusinessBankingPage from "./BusinessBankingPage";
@@ -21,7 +21,7 @@ export {
   DashboardLegalsPage,
   DashboardProfilePage,
   DashboardVerificationPage,
-  DashboardpaymentsPage,
+  DashboardReferencePage,
   TermsAndConditionPage,
   PersonalBankingPage,
   BusinessBankingPage,

src/router/Router.tsx

@@ -8,7 +8,7 @@ import {
   DashboardLegalsPage,
   DashboardProfilePage,
   DashboardVerificationPage,
-  DashboardpaymentsPage,
+  DashboardReferencePage,
   TermsAndConditionPage,
   BusinessBankingPage,
   CooperateBankingPage,
@@ -60,8 +60,8 @@ const Routers = () => {
           element={<DashboardVerificationPage />}
         />
         <Route
-          path={RouteHandler.dashboardPayments}
+          path={RouteHandler.dashboardReference}
-          element={<DashboardpaymentsPage />}
+          element={<DashboardReferencePage />}
         />
         <Route
           path={RouteHandler.dashboardLegals}

src/router/routes.tsx

@@ -9,7 +9,7 @@ export class RouteHandler {
   static dashboardHome = "/dashboard/home";
   static dashboardProfile = "/dashboard/profile";
   static dashboardVerification = "/dashboard/verification";
-  static dashboardPayments = "/dashboard/payments";
+  static dashboardReference = "/dashboard/reference";
   static dashboardLegals = "/dashboard/legals";
   static termsAndConditions = "/terms-and-conditions";
   static paymentpage = "/payment";

src/utils/states.ts

@@ -0,0 +1,160 @@
+interface SelectOption {
+    loading: boolean;
+    data: {value: string;
+    label: string}[]
+  }
+
+export const state: SelectOption = {
+    loading: false,
+    data: [
+      { value: "", label: "Please Select" },
+      {
+          "value": "abia",
+          "label": "Abia"
+      },
+      {
+          "value": "adamawa",
+          "label": "Adamawa"
+      },
+      {
+          "value": "akwa ibom",
+          "label": "Akwa Ibom"
+      },
+      {
+          "value": "anambra",
+          "label": "Anambra"
+      },
+      {
+          "value": "bauchi",
+          "label": "Bauchi"
+      },
+      {
+          "value": "bayelsa",
+          "label": "Bayelsa"
+      },
+      {
+          "value": "benue",
+          "label": "Benue"
+      },
+      {
+          "value": "borno",
+          "label": "Borno"
+      },
+      {
+          "value": "cross river",
+          "label": "Cross River"
+      },
+      {
+          "value": "delta",
+          "label": "Delta"
+      },
+      {
+          "value": "ebonyi",
+          "label": "Ebonyi"
+      },
+      {
+          "value": "edo",
+          "label": "Edo"
+      },
+      {
+          "value": "ekiti",
+          "label": "Ekiti"
+      },
+      {
+          "value": "enugu",
+          "label": "Enugu"
+      },
+      {
+          "value": "fct - abuja",
+          "label": "FCT - Abuja"
+      },
+      {
+          "value": "gombe",
+          "label": "Gombe"
+      },
+      {
+          "value": "imo",
+          "label": "Imo"
+      },
+      {
+          "value": "jigawa",
+          "label": "Jigawa"
+      },
+      {
+          "value": "kaduna",
+          "label": "Kaduna"
+      },
+      {
+          "value": "kano",
+          "label": "Kano"
+      },
+      {
+          "value": "katsina",
+          "label": "Katsina"
+      },
+      {
+          "value": "kebbi",
+          "label": "Kebbi"
+      },
+      {
+          "value": "kogi",
+          "label": "Kogi"
+      },
+      {
+          "value": "kwara",
+          "label": "Kwara"
+      },
+      {
+          "value": "lagos",
+          "label": "Lagos"
+      },
+      {
+          "value": "nasarawa",
+          "label": "Nasarawa"
+      },
+      {
+          "value": "niger",
+          "label": "Niger"
+      },
+      {
+          "value": "ogun",
+          "label": "Ogun"
+      },
+      {
+          "value": "ondo",
+          "label": "Ondo"
+      },
+      {
+          "value": "osun",
+          "label": "Osun"
+      },
+      {
+          "value": "oyo",
+          "label": "Oyo"
+      },
+      {
+          "value": "plateau",
+          "label": "Plateau"
+      },
+      {
+          "value": "rivers",
+          "label": "Rivers"
+      },
+      {
+          "value": "sokoto",
+          "label": "Sokoto"
+      },
+      {
+          "value": "taraba",
+          "label": "Taraba"
+      },
+      {
+          "value": "yobe",
+          "label": "Yobe"
+      },
+      {
+          "value": "zamfara",
+          "label": "Zamfara"
+      }
+  ]
+  }