max input length: bvn & code

.env

@@ -3,4 +3,7 @@ DIGIFI_PORT=5173
 # Social Links
 FACEBOOK_URL=https://www.facebook.com
 TWITTER_URL=https://twitter.com
-INSTAGRAM_URL=https://www.instagram.com
+INSTAGRAM_URL=https://www.instagram.com
+
+# BACKEND END POINTS
+VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'

.env.development

@@ -3,4 +3,7 @@ DIGIFI_PORT=5173
 # Social Links
 VITE_FACEBOOK_URL=https://www.facebook.com
 VITE_TWITTER_URL=https://twitter.com
-VITE_INSTAGRAM_URL=https://www.instagram.com
+VITE_INSTAGRAM_URL=https://www.instagram.com
+
+# BACKEND END POINTS
+VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'

.env.production

@@ -3,4 +3,7 @@ DIGIFI_PORT=5173
 # Social Links
 FACEBOOK_URL=https://www.facebook.com
 TWITTER_URL=https://twitter.com
-INSTAGRAM_URL=https://www.instagram.com
+INSTAGRAM_URL=https://www.instagram.com
+
+# BACKEND END POINTS
+VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'

src/components/Dashboard/DashboardFormInit.tsx

@@ -3,20 +3,20 @@ import {Formik, Form} from 'formik'
 import * as Yup from "yup";
 
 type Props = {
-  handleNextStep:()=>any
+  handleNextStep:(value:{})=>any
 }
 
 const initialValues = {
-  amount: "",
-  duration: "",
-  id: "",
+  loan_amount: "",
+  payment_month: "",
+  sales_agent: "",
 };
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
-  duration: Yup.string()
+  payment_month: Yup.string()
     .required("Required"),
-  amount: Yup.string()
+  loan_amount: Yup.string()
     .required("Required")
     .test("no-e", "Invalid", (value:any) => {
       if (value && /^[0-9]*$/.test(value) == false) {
@@ -24,16 +24,14 @@ const validationSchema = Yup.object().shape({
       }
       return true;
     }),
-  id: Yup.string()
-    .required("Required")
+    sales_agent: Yup.string()
 });
 
 export default function DashboardFormInit({handleNextStep}:Props) {
 
   //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = (values:any) => {
-    console.log(values)
-    handleNextStep()
+  const handleSubmit = (values:{}) => {
+    handleNextStep(values)
   };
 
   return (
@@ -51,40 +49,40 @@ export default function DashboardFormInit({handleNextStep}:Props) {
                 <div className="mt-[3.25rem] flex flex-col gap-9">
                   <InputCompOne
                     parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="amount"
+                    name="loan_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] text-right"
                     placeholder="350,000"
-                    value={props.values.amount}
+                    value={props.values.loan_amount}
                     onChange={props.handleChange}
-                    error={(props.errors.amount && props.touched.amount) ? props.errors.amount : ''}
+                    error={(props.errors.loan_amount && props.touched.loan_amount) ? props.errors.loan_amount : ''}
                   />
                   <InputCompOne
                     parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="duration"
+                    name="payment_month"
                     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]"
-                    selectOptions={duration}
-                    selectValue={props.values.duration}
+                    selectOptions={paymentMonth}
+                    selectValue={props.values.payment_month}
                     onChange={props.handleChange}
-                    error={(props.errors.duration && props.touched.duration) ? props.errors.duration : ''}
+                    error={(props.errors.payment_month && props.touched.payment_month) ? props.errors.payment_month : ''}
                   />
                   <InputCompOne
                     parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="id"
+                    name="sales_agent"
                     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}
+                    value={props.values.sales_agent}
                     onChange={props.handleChange}
-                    error={(props.errors.id && props.touched.id) ? props.errors.id : ''}
+                    error={(props.errors.sales_agent && props.touched.sales_agent) ? props.errors.sales_agent : ''}
                   />
                   <Button
                     className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
@@ -106,7 +104,7 @@ interface SelectOption {
 }
 
 
-const duration: SelectOption = {
+const paymentMonth: SelectOption = {
   loading: false,
   data: [
     { value: "", label: "Please Select" },

src/components/Dashboard/DashboardHome.tsx

@@ -10,12 +10,14 @@ interface DashboardHomeProps {}
 
 const DashboardHome: FC<DashboardHomeProps> = () => {
   const [step, setStep] = React.useState(1);
+  const [applicationDetails, setApplicationDetails] = React.useState({});
 
-  const handleNextStep = () => {
+  const handleNextStep = (values:{}={}) => {
     if (step < 7) {
       setStep(step + 1);
     }
-  };
+    setApplicationDetails((prev:{}) => ({...prev, ...values}))
+    }
 
   return (
     <div className="w-full">
@@ -24,8 +26,9 @@ const DashboardHome: FC<DashboardHomeProps> = () => {
       {step === 3 && <DashboardHomeDetail handleNextStep={handleNextStep} />}
       {step === 4 && <DashboardHomeEmploymentInfo handleNextStep={handleNextStep} />}
       {step === 5 && <DashboardHomeRefereeInfo handleNextStep={handleNextStep} />}
-      {step === 6 && <DashboardHomeAttestation handleNextStep={handleNextStep} />}
+      {step === 6 && <DashboardHomeAttestation handleNextStep={handleNextStep} applicationDetails={applicationDetails} />}
       {step === 7 && <DashboardHomeIntro step={step} handleNextStep={handleNextStep} />}
+      {/* <DashboardHomeAttestation handleNextStep={handleNextStep} applicationDetails={applicationDetails} /> */}
     </div>
   );
 };

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -1,6 +1,11 @@
-import React, { FC } from "react";
+import React, { FC, useState, useEffect } from "react";
 import NairaBag from "../../assets/images/dashboard/naira-bag.png";
-import { Button } from "../";
+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";
 
 export interface DashBoardCardProps {
   title?: string;
@@ -68,16 +73,40 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
 };
 
 interface DashboardHomeIntroProps {
-  handleNextStep: any;
+  handleNextStep:(value:{})=>any
   step?:number|string
 }
 
 const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step }) => {
+  const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable
+
+  const [userLoanList, setUserLoanList] = useState<{loading:boolean, data:PendingTableList}>({loading: true, data:[]})
+
+  useEffect(()=>{
+    let token = localStorage.getItem('token')
+    let uid = localStorage.getItem('uid')
+    if(!token || !uid){
+      return
+    }
+    getUserPendingLoanList(uid).then(res => {
+      console.log('RES', res)
+      console.log('RES', userLoanList)
+      if(!res || !res.data.loans){
+        setUserLoanList({loading:false, data:[]})
+        return
+      }
+      setUserLoanList({loading:false, data:res?.data?.loans})
+    }).catch(err => {
+      console.log(err)
+      setUserLoanList({loading:false, data:[]})
+    })
+  },[])
+
   return (
-    <>
+    <div className='w-full'>
     {step == 1 ?
       <>
-        <h1 className="font-bold my-5 text-2xl">Hello, Olanrewaju</h1>
+        <h1 className="font-bold my-5 text-2xl">Hello, {userDetails.firstname}</h1>
         <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
           <DashBoardCard
             cardClass="bg-[#5C2684] relative"
@@ -89,13 +118,13 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step
             btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
             image={NairaBag}
             imgClass="translate-y-4 -rotate-6"
-            onClick={handleNextStep}
+            onClick={()=>handleNextStep({})}
             />
         </div>
       </>
       :
       <>
-        <h1 className="font-bold my-5 text-2xl">Welcome Back, Olanrewaju</h1>
+        <h1 className="font-bold my-5 text-2xl">Welcome Back, {userDetails.firstname}</h1>
         <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
           <DashBoardCard
             cardClass="bg-[#5C2684] relative"
@@ -112,7 +141,50 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step
         </div>
     </>
     }
-    </>
+    {userLoanList.loading ?
+    null
+    :
+      <div className='mt-5 w-full'>
+        <PendingList
+          data={userLoanList.data}
+          itemsPerPage={5}
+          tableTitle='Current Applications'
+        >
+          {(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="w-full table-auto">
+                <thead>
+                  <tr className='text-left border-b-2'>
+                    <th className='px-1 py-4'>Date</th>
+                    <th className='px-1 py-4 text-right'>Amount</th>
+                    <th className='px-1 py-4 text-center'>Payment Term</th>
+                    <th className='px-1 py-4 text-center'>Status</th>
+                    <th className='px-1 py-4'>Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {data.map((item:any, index:any) =>(
+                    <tr key={index || item} className='even:bg-slate-100'>
+                      <td className='px-1 py-2'>{NewDateTimeFormatter(item?.added)}</td>
+                      <td className='px-1 py-2 text-right'>{item?.loan_amount}</td>
+                      <td className='px-1 py-2 text-center'>{item?.payment_month}</td>
+                      <td className='px-1 py-2 text-center'>{item?.status}</td>
+                      <td className='px-1 py-2'>
+                        <button className='px-2 py-1 border-2 border-black flex gap-2 items-center'>
+                          View
+                          <Icons name='arrow-right' />
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </PendingList>
+      </div>
+    }
+    </div>
   );
 };
 

src/components/Dashboard/home/DashboardHomeAttestation.tsx

@@ -2,34 +2,49 @@ import { Button, InputCompOne, Stepper } from '../../shared/index';
 
 import {Formik, Form} from 'formik'
 import * as Yup from "yup";
+import { applyForLoan } from '../../../core/apiRequest';
+
 // import { useNavigate } from "react-router-dom";
 // import { RouteHandler } from '../../../router/routes';
 
 type Props = {
-  handleNextStep:()=>any
+  handleNextStep:(value:{})=>any
+  applicationDetails: {}
 }
 
 const initialValues = {
-  account_number: "",
+  account: "",
   checked: false
 };
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
-  account_number: Yup.string()
+  account: 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) {
+export default function DashboardHomeAttestation({handleNextStep, applicationDetails}:Props) {
   //     let navigate = useNavigate();
   // const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
 
-  //FUNCTION TO HANDLE SUBMIT
+  //FUNCTION TO HANDLE LOAN APPLICATION
   const handleSubmit = (values:any) => {
-    console.log(values)
-    handleNextStep()
+    delete values.checked
+    applyForLoan({...applicationDetails, disbursement: values}).then(res=>{
+      console.log('APPLY FOR LOAN', res)
+      handleNextStep({disbursement: values})
+      console.log('ApplicationDetails', {...applicationDetails, disbursement: values})
+    }).catch(err=>{
+      console.log(err)
+    })
+    // applyForLoan(payload).then(res=>{
+    //   console.log('APPLY FOR LOAN', res)
+    //   // handleNextStep({disbursement: values})
+    // }).catch(err=>{
+    //   console.log(err)
+    // })
   };
 
   return (
@@ -50,15 +65,15 @@ export default function DashboardHomeAttestation({handleNextStep}:Props) {
                   <div className="flex items-center gap-[4.125rem]">
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="account_number"
+                      name="account"
                       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}
+                      value={props.values.account}
                       onChange={props.handleChange}
-                      error={(props.errors.account_number && props.touched.account_number) ? props.errors.account_number : ''}
+                      error={(props.errors.account && props.touched.account) ? props.errors.account : ''}
                     />
                   </div>
                   <div className='max-w-[25.875rem]'>
@@ -87,3 +102,46 @@ export default function DashboardHomeAttestation({handleNextStep}:Props) {
     </div>
   );
 }
+
+
+// const payload = {
+//   "loan_amount": "100000",
+//   "payment_month": "18",
+//   "sales_agent": "Testing1234",
+//   "gender": "male",
+//   "address": "World bank housing Estate, Umuahia",
+//   "marital_status": "single",
+//   "state": "abia",
+//   "email": "test5070@gmail.com",
+//   "country": "NG",
+//   "employment": {
+//       "job_title": "Information Officer",
+//       "name": "Testing Testing",
+//       "sector": "private (non academic)",
+//       "industry": "engineering",
+//       "resumption_date": "2024-04-05",
+//       "email": "test50700@gmail.com",
+//       "annual_income": "600000",
+//       "monthly_salary": "50000",
+//       "salary_payment_date": "2024-04-19",
+//       "employment_id": "2555566",
+//       "highest_eductaion": "b.sc + professional qualification"
+//   },
+//   "loan_reference": [
+//       {
+//           "fullname": "John Mike",
+//           "relationship": "Brother",
+//           "phone_number": "07055566611",
+//           "email": "refone@gmail.com",
+//           "bvn": "11111111111"
+//       },
+//       {
+//           "fullname": "Mary Paul",
+//           "relationship": "Brother",
+//           "phone_number": "07055577711",
+//           "email": "reftwo@gmail.com",
+//           "bvn": "22222222222"
+//       }
+//   ],
+//   disbursement:{account: '1122334456'}
+// }

src/components/Dashboard/home/DashboardHomeDetail.tsx

@@ -4,7 +4,7 @@ import {Formik, Form} from 'formik'
 import * as Yup from "yup";
 
 type Props = {
-  handleNextStep:()=>any
+  handleNextStep:(value:{})=>any
 }
 
 const initialValues = {
@@ -12,7 +12,8 @@ const initialValues = {
   address: "",
   marital_status: "",
   state: "",
-  email:""
+  email:"",
+  country:""
 };
 
 // To get the validation schema
@@ -28,14 +29,15 @@ const validationSchema = Yup.object().shape({
   email: Yup.string()
     .email("Invalid")
     .required("Required"),
+  country: Yup.string()
+    .required("Required"),
 });
 
 export default function DashboardHomeDetail({handleNextStep}:Props) {
 
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (values:any) => {
-    console.log(values)
-    handleNextStep()
+    handleNextStep(values)
   };
 
   return (
@@ -103,18 +105,32 @@ export default function DashboardHomeDetail({handleNextStep}:Props) {
                       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="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 : ''}
-                  />
+                  <div className="flex items-center gap-[4.125rem]">
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      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 : ''}
+                    />
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="country"
+                      label="Select your country"
+                      labelClass="font-bold text-[1.125rem]"
+                      select={true}
+                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                      selectOptions={country}
+                      selectValue={props.values.country}
+                      onChange={props.handleChange}
+                      error={(props.errors.country && props.touched.country) ? props.errors.country : ''}
+                    />
+                  </div>
                   <Button
                     className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
                     text="Next"
@@ -163,4 +179,12 @@ const state: SelectOption = {
     { value: "imo", label: "Imo" },
     { value: "lagos", label: "Lagos" },
   ]
+}
+
+const country: SelectOption = {
+  loading: false,
+  data: [
+    { value: "", label: "Please Select" },
+    { value: "NG", label: "Nigeria" },
+  ]
 }

src/components/Dashboard/home/DashboardHomeEmploymentInfo.tsx

@@ -4,36 +4,36 @@ import {Formik, Form} from 'formik'
 import * as Yup from "yup";
 
 type Props = {
-  handleNextStep:()=>any
+  handleNextStep:(value:{})=>any
 }
 
 const initialValues = {
   job_title: "",
-  employer_name: "",
-  job_sector: "",
+  name: "",
+  sector: "",
   industry: "",
-  date_of_resumption: "",
-  employer_email:"",
+  resumption_date: "",
+  email:"",
   annual_income: "",
   monthly_salary: "",
   salary_payment_date: "",
-  employee_id: "",
-  qualification: ""
+  employment_id: "",
+  highest_eductaion: ""
 };
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
   job_title: Yup.string()
     .required("Required"),
-  employer_name: Yup.string()
+  name: Yup.string()
     .required("Required"),
-  job_sector: Yup.string()
+  sector: Yup.string()
     .required("Required"),
   industry: Yup.string()
     .required("Required"),
-  date_of_resumption: Yup.string()
+  resumption_date: Yup.string()
     .required("Required"),
-  employer_email: Yup.string()
+  email: Yup.string()
     .email("Invalid")
     .required("Required"),
   annual_income: Yup.string()
@@ -54,9 +54,9 @@ const validationSchema = Yup.object().shape({
     }),
   salary_payment_date: Yup.string()
     .required("Required"),
-  employee_id: Yup.string()
+  employment_id: Yup.string()
     .required("Required"),
-  qualification: Yup.string()
+  highest_eductaion: Yup.string()
     .required("Required"),
 });
 
@@ -65,8 +65,7 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
 
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (values:any) => {
-    console.log(values)
-    handleNextStep()
+    handleNextStep({employment: values})
   };
 
 
@@ -99,29 +98,29 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
                     />
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="employer_name"
+                      name="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}
+                      value={props.values.name}
                       onChange={props.handleChange}
-                      error={(props.errors.employer_name && props.touched.employer_name) ? props.errors.employer_name : ''}
+                      error={(props.errors.name && props.touched.name) ? props.errors.name : ''}
                     />
                   </div>
                   <div className="flex items-center gap-[4.125rem]">
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="job_sector"
+                      name="sector"
                       floatLabel="Job Sector"
                       // labelClass="font-bold text-[1.125rem]"
                       select={true}
                       selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                       selectOptions={jobSector}
-                      selectValue={props.values.job_sector}
+                      selectValue={props.values.sector}
                       onChange={props.handleChange}
-                      error={(props.errors.job_sector && props.touched.job_sector) ? props.errors.job_sector : ''}
+                      error={(props.errors.sector && props.touched.sector) ? props.errors.sector : ''}
                     />
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
@@ -139,28 +138,28 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
                   <div className="flex items-center gap-[4.125rem]">
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="date_of_resumption"
+                      name="resumption_date"
                       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}
+                      value={props.values.resumption_date}
                       onChange={props.handleChange}
-                      error={(props.errors.date_of_resumption && props.touched.date_of_resumption) ? props.errors.date_of_resumption : ''}
+                      error={(props.errors.resumption_date && props.touched.resumption_date) ? props.errors.resumption_date : ''}
                     />
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="employer_email"
+                      name="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}
+                      value={props.values.email}
                       onChange={props.handleChange}
-                      error={(props.errors.employer_email && props.touched.employer_email) ? props.errors.employer_email : ''}
+                      error={(props.errors.email && props.touched.email) ? props.errors.email : ''}
                     />
                   </div>
                   <div className="flex items-center gap-[4.125rem]">
@@ -205,28 +204,28 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
                     />
                     <InputCompOne
                       parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="employee_id"
+                      name="employment_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}
+                      value={props.values.employment_id}
                       onChange={props.handleChange}
-                      error={(props.errors.employee_id && props.touched.employee_id) ? props.errors.employee_id : ''}
+                      error={(props.errors.employment_id && props.touched.employment_id) ? props.errors.employment_id : ''}
                     />
                   </div>
                   <InputCompOne
                     parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="qualification"
+                    name="highest_eductaion"
                     floatLabel="Highest level of education"
                     // labelClass="font-bold text-[1.125rem]"
                     select={true}
                     selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    selectOptions={qualification}
-                    selectValue={props.values.qualification}
+                    selectOptions={highestEductaion}
+                    selectValue={props.values.highest_eductaion}
                     onChange={props.handleChange}
-                    error={(props.errors.qualification && props.touched.qualification) ? props.errors.qualification : ''}
+                    error={(props.errors.highest_eductaion && props.touched.highest_eductaion) ? props.errors.highest_eductaion : ''}
                   />
                   <Button
                     className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
@@ -266,7 +265,7 @@ const industry: SelectOption = {
   ]
 }
 
-const qualification: SelectOption = {
+const highestEductaion: SelectOption = {
   loading: false,
   data: [
     { value: "", label: "Please Select" },

src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx

@@ -4,18 +4,18 @@ import {Formik, Form} from 'formik'
 import * as Yup from "yup";
 
 type Props = {
-  handleNextStep:()=>any
+  handleNextStep:(value:{})=>any
 }
 
 const initialValues = {
   ref_name: "",
   ref_email: "",
-  ref_number: "",
+  ref_phone_number: "",
   ref_relationship: "",
   ref_bvn: "",
   ref_two_name: "",
   ref_two_email: "",
-  ref_two_number: "",
+  ref_two_phone_number: "",
   ref_two_relationship: "",
   ref_two_bvn: "",
 };
@@ -27,7 +27,7 @@ const validationSchema = Yup.object().shape({
   ref_email: Yup.string()
     .email("Invalid")
     .required("Required"),
-  ref_number: Yup.string()
+  ref_phone_number: Yup.string()
     .required("Required"),
   ref_relationship: Yup.string()
     .required("Required"),
@@ -46,7 +46,7 @@ const validationSchema = Yup.object().shape({
   ref_two_email: Yup.string()
     .email("Invalid")
     .required("Required"),
-  ref_two_number: Yup.string()
+  ref_two_phone_number: Yup.string()
     .required("Required"),
   ref_two_relationship: Yup.string()
     .required("Required"),
@@ -66,8 +66,21 @@ export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
 
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (values:any) => {
-    console.log(values)
-    handleNextStep()
+    let refOne = {
+      fullname: values.ref_name,
+      relationship: values.ref_relationship,
+      phone_number:  values.ref_phone_number,
+      email:  values.ref_email,
+      bvn:  values.ref_bvn
+    }
+    let refTwo = {
+      fullname: values.ref_two_name,
+      relationship: values.ref_two_relationship,
+      phone_number:  values.ref_two_phone_number,
+      email:  values.ref_two_email,
+      bvn:  values.ref_two_bvn
+    }
+    handleNextStep({loan_reference:[refOne, refTwo]})
   };
 
 
@@ -115,15 +128,15 @@ export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
                           />
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              name="ref_number"
+                              name="ref_phone_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}
+                              value={props.values.ref_phone_number}
                               onChange={props.handleChange}
-                              error={(props.errors.ref_number && props.touched.ref_number) ? props.errors.ref_number : ''}
+                              error={(props.errors.ref_phone_number && props.touched.ref_phone_number) ? props.errors.ref_phone_number : ''}
                           />
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
@@ -180,15 +193,15 @@ export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
                           />
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                              name="ref_two_number"
+                              name="ref_two_phone_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}
+                              value={props.values.ref_two_phone_number}
                               onChange={props.handleChange}
-                              error={(props.errors.ref_two_number && props.touched.ref_two_number) ? props.errors.ref_two_number : ''}
+                              error={(props.errors.ref_two_phone_number && props.touched.ref_two_phone_number) ? props.errors.ref_two_phone_number : ''}
                           />
                           <InputCompOne
                               parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"

src/components/Header/Header.tsx

@@ -52,7 +52,7 @@ const Header: React.FC<HiddenMenuItems> = ({
           <div className="flex flex-col-reverse lg:flex-col grow lg:grow-0 justify-between items-end">
             <ul className="flex gap-0 lg:gap-[10px] items-center justify-end w-full flex-wrap">
               {[
-                { text: "Open An Account", href: RouteHandler.getStarted },
+                { text: "Open An Account", href: RouteHandler.letsGetStarted },
                 {
                   text: "Internet Banking",
                   href: RouteHandler.businessBanking,

src/components/Icons/Icons.tsx

@@ -1,4 +1,4 @@
-import { FaCaretDown } from "react-icons/fa";
+import { FaCaretDown, FaCaretRight } from "react-icons/fa";
 
 import dashIcon from "../../assets/images/dashboard/dashDefault.svg";
 type Props = {
@@ -111,6 +111,8 @@ export default function Icons({ name, fillColor, className }: Props) {
         </svg>
       ) :name == 'arrow-down'?
           <FaCaretDown className={`text-xl ${className && className}`} />
+        :name == 'arrow-right'?
+          <FaCaretRight className={`text-xl ${className && className}`} />
         :name == "dash-icon" ? (
         <img src={dashIcon} alt="dash-icon" />
       ) : null}

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -1,39 +1,42 @@
-import React from "react";
-import * as Yup from "yup";
-import { Form, Formik } from "formik";
-import { InputCompOne } from "..";
-import {useNavigate} from 'react-router-dom'
-import { RouteHandler } from "../../router/routes";
+import React from 'react';
+import * as Yup from 'yup';
+import { Form, Formik } from 'formik';
+import { InputCompOne } from '..';
+import { useNavigate } from 'react-router-dom';
+import { RouteHandler } from '../../router/routes';
 
-import { validateBVN, verifyOTP } from "../../core/apiRequest";
-import { RequestStatus } from "../../core/models";
+import { useDispatch } from 'react-redux';
+import { updateUserDetails } from '../../store/UserDetails';
+
+import { validateBVN, verifyOTP } from '../../core/apiRequest';
+import { RequestStatus } from '../../core/models';
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
   bvn: Yup.string()
-  .required("BVN is required")
-  .test("no-e", "Invalid number", (value:any) => {
-    if (value && /^[0-9]*$/.test(value) == false) {
-      return false;
-    }
-    return true;
-  })
-  .min(11, "must be 11 digits")
-  .max(11, "must be 11 digits"),
+    .required('BVN is required')
+    .test('no-e', 'Invalid number', (value: any) => {
+      if (value && /^[0-9]*$/.test(value) == false) {
+        return false;
+      }
+      return true;
+    })
+    .min(11, 'must be 11 digits')
+    .max(11, 'must be 11 digits'),
   otp: Yup.string()
-  // .when('require_otp', {
-  //   is: true,
-  //   then: Yup.string().required("OTP is required")
-  // })
-  // .required("OTP is required")
-  .test("no-e", "Invalid number", (value:any) => {
-    if (value && /^[0-9]*$/.test(value) == false) {
-      return false;
-    }
-    return true;
-  })
-  .min(5, "must be 5 digits")
-  .max(5, "must be 5 digits"),
+    // .when('require_otp', {
+    //   is: true,
+    //   then: Yup.string().required("OTP is required")
+    // })
+    // .required("OTP is required")
+    .test('no-e', 'Invalid number', (value: any) => {
+      if (value && /^[0-9]*$/.test(value) == false) {
+        return false;
+      }
+      return true;
+    })
+    .min(5, 'must be 5 digits')
+    .max(5, 'must be 5 digits'),
   // .test("no-e", "must be 11 characters", (value:any) => {
   //   if (value.length < 11) {
   //     return false;
@@ -49,133 +52,207 @@ let initialValues = {
 };
 
 type ValidBVN = {
-  verification_id:string
-  valid: undefined | boolean
-}
+  verification_id: string;
+  valid: undefined | boolean;
+};
 
 const LetsGetStarted: React.FC = () => {
-  const navigate = useNavigate()
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
   // const [pinValues, setPinValues] = React.useState({
   //   bvn: "",
   //   otp: "",
   // });
   // const otpInputRef = React.useRef<HTMLInputElement>(null);
 
-  const [requestStatusBVN, setRequestStatusBVN] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});
+  const [requestStatusBVN, setRequestStatusBVN] = React.useState<RequestStatus>(
+    { loading: false, status: undefined, message: '' }
+  );
+
+  const [requestStatusOTP, setRequestStatusOTP] = React.useState<RequestStatus>(
+    { loading: false, status: undefined, message: '' }
+  );
 
   const [bvnIsValid, setBvnIsValid] = React.useState<ValidBVN>({
     verification_id: '',
-    valid: undefined
+    valid: undefined,
   });
 
-
   // e: React.FormEvent<HTMLInputElement>
   // let { value } = e.target as HTMLInputElement;
-  const bvnValidation = (values:any) => {   // Function to Validate BVN
-    let bvn = values.bvn
-    setRequestStatusBVN({loading:true, status:false, message:''})
-    validateBVN({bvn}).then(res => {
-      if(!res || !res.data.call_return){
-        setBvnIsValid({verification_id:'', valid: false})
-        setRequestStatusBVN({loading:false, status:false, message:'unable to verify BVN'})
-        return setTimeout(()=>{
-          setRequestStatusBVN({loading:false, status:false, message:''})
-        }, 4000)
-      }
-      setBvnIsValid({verification_id:res.data.verification_id, valid: true})
-      setRequestStatusBVN({loading:false, status:true, message:'verified'})
-    }).catch(err => {
-      setBvnIsValid({verification_id:'', valid: false})
-      console.log(err)
-    })
+  const bvnValidation = (values: any) => {
+    // Function to Validate BVN
+    let bvn = values.bvn;
+    setRequestStatusBVN({ loading: true, status: false, message: '' });
+    validateBVN({ bvn })
+      .then((res) => {
+        if (!res || !res.data.call_return) {
+          setBvnIsValid({ verification_id: '', valid: false });
+          setRequestStatusBVN({
+            loading: false,
+            status: false,
+            message: 'unable to verify BVN',
+          });
+          return setTimeout(() => {
+            setRequestStatusBVN({ loading: false, status: false, message: '' });
+          }, 4000);
+        }
+        setBvnIsValid({
+          verification_id: res.data.verification_id,
+          valid: true,
+        });
+        setRequestStatusBVN({
+          loading: false,
+          status: true,
+          message: 'verified',
+        });
+      })
+      .catch((err) => {
+        setBvnIsValid({ verification_id: '', valid: false });
+        console.log(err);
+      });
   };
 
-  const handleSubmit = (values:any) => {  // Function to VERIFY OTP AND LOGIN USER
+  const handleSubmit = (values: any) => {
+    // Function to VERIFY OTP AND LOGIN USER
+    setRequestStatusOTP({ loading: true, status: false, message: '' });
     // console.log('values', values)
-    verifyOTP({...values, verification_id:bvnIsValid.verification_id}).then(res=>{
-      console.log(res.data)
-      navigate(RouteHandler.dashboardHome, {replace:true})
-    }).catch(err => {
-      console.log(err)
-    })
+    verifyOTP({ ...values, verification_id: bvnIsValid.verification_id })
+      .then((res) => {
+        if (!res || !res.data.call_return) {
+          setRequestStatusOTP({
+            loading: false,
+            status: false,
+            message: 'wrong otp',
+          });
+          return setTimeout(() => {
+            setRequestStatusOTP({ loading: false, status: false, message: '' });
+          }, 4000);
+        }
+        // console.log(res.data)
+        localStorage.setItem('token', res.data?.token);
+        localStorage.setItem('uid', res?.data?.customer[0]?.uid);
+        dispatch(updateUserDetails({ ...res?.data?.customer[0] }));
+        navigate(RouteHandler.dashboardHome, { replace: true });
+      })
+      .catch((err) => {
+        setRequestStatusOTP({
+          loading: false,
+          status: false,
+          message: 'something went wrong, try again',
+        });
+        console.log(err);
+        return setTimeout(() => {
+          setRequestStatusOTP({ loading: false, status: false, message: '' });
+        }, 4000);
+      });
   };
 
   return (
     <Formik
-    initialValues={initialValues}
-    validationSchema={validationSchema}
-    onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
     >
-    {(props:any) => (
-      <Form className="">
-        <div className="w-full">
-          <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
-            <div className="my-[4rem] flex items-center justify-center w-full">
-              <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
-                Let’s Get You Started
-              </h1>
-            </div>
-            <div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
-              <div className='w-full'>
-                <InputCompOne
-                  parentClass="flex flex-col gap-2"
-                  label="Enter Your BVN "
-                  name="bvn"
-                  parentInputClass="w-full"
-                  labelSpan="( To get your BVN, dial *565*0# )"
-                  labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
-                  placeholder="Enter your BVN"
-                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
-                  input
-                  inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
-                  value={props.values.bvn}
-                  onChange={props.handleChange}
-                  error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
-                />
-                <p className={`p-2 ${!requestStatusBVN.status ? 'text-red-500' : 'text-emerald-500'}`}>{requestStatusBVN.loading ? 'verifying...' : requestStatusBVN.message}</p>
+      {(props: any) => (
+        <Form className="">
+          <div className="w-full">
+            <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
+              <div className="my-[4rem] flex items-center justify-center w-full">
+                <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
+                  Let’s Get You Started
+                </h1>
               </div>
-              {bvnIsValid.valid && (
-                <InputCompOne
-                  parentClass="flex flex-col gap-2"
-                  label="Enter OTP "
-                  name="otp"
-                  parentInputClass="w-full"
-                  labelSpan="( Please check your BVN phone number for verification pin )"
-                  labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
-                  placeholder="Enter your OTP"
-                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
-                  input
-                  inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
-                  value={props.values.otp}
-                  onChange={props.handleChange}
-                  error={(props.errors.otp && props.touched.otp) && props.errors.otp}
-                />
-              )}
-              <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"
-                disabled={requestStatusBVN.loading || (!props.values.otp && bvnIsValid.valid)}
-              >
-                Enter
-              </button>
-              
+              <div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
+                <div className="w-full">
+                  <InputCompOne
+                    parentClass="flex flex-col gap-2"
+                    label="Enter Your BVN "
+                    name="bvn"
+                    parentInputClass="w-full"
+                    labelSpan="( To get your BVN, dial *565*0# )"
+                    labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+                    placeholder="Enter your BVN"
+                    labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+                    input
+                    inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+                    value={props.values.bvn}
+                    onChange={props.handleChange}
+                    error={
+                      props.errors.bvn && props.touched.bvn && props.errors.bvn
+                    }
+                    maxLength={11}
+                  />
+                  <p
+                    className={`p-2 ${
+                      !requestStatusBVN.status
+                        ? 'text-red-500'
+                        : 'text-emerald-500'
+                    }`}
+                  >
+                    {requestStatusBVN.loading
+                      ? 'verifying...'
+                      : requestStatusBVN.message}
+                  </p>
+                </div>
+                {bvnIsValid.valid && (
+                  <InputCompOne
+                    parentClass="flex flex-col gap-2"
+                    label="Enter OTP "
+                    name="otp"
+                    parentInputClass="w-full"
+                    labelSpan="( Please check your BVN phone number for verification pin )"
+                    labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+                    placeholder="Enter your OTP"
+                    labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+                    input
+                    inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+                    value={props.values.otp}
+                    onChange={props.handleChange}
+                    error={
+                      props.errors.otp && props.touched.otp && props.errors.otp
+                    }
+                    maxLength={5}
+                  />
+                )}
+                <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"
+                  disabled={
+                    requestStatusBVN.loading ||
+                    (!props.values.otp && bvnIsValid.valid)
+                  }
+                >
+                  Enter
+                </button>
 
-              {bvnIsValid.valid || bvnIsValid.valid == undefined ? (
-                <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
-                  ***Every personal information attached to your BVN is safe and
-                  secure. It is only important for us to verify your information and
-                  also give you access to your application profile/account.
+                <p
+                  className={`p-2 ${
+                    !requestStatusOTP.status
+                      ? 'text-red-500'
+                      : 'text-emerald-500'
+                  }`}
+                >
+                  {requestStatusOTP.message}
                 </p>
-              ) : (
-                <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
-                  ***Did not receive OTP? Click to resend
-                </p>
-              )}
+
+                {bvnIsValid.valid || bvnIsValid.valid == undefined ? (
+                  <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+                    ***Every personal information attached to your BVN is safe
+                    and secure. It is only important for us to verify your
+                    information and also give you access to your application
+                    profile/account.
+                  </p>
+                ) : (
+                  <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+                    ***Did not receive OTP? Click to resend
+                  </p>
+                )}
+              </div>
             </div>
           </div>
-        </div>
-      </Form>
-    )}
+        </Form>
+      )}
     </Formik>
   );
 };

src/components/paginated-list/PendingList.tsx

@@ -0,0 +1,134 @@
+import { ReactNode, useEffect, useState } from "react";
+import { PendingTableList } from "../../core/models";
+
+type PaginatedListProps = {
+    data: PendingTableList,
+    itemsPerPage?: number,
+    filterItem?: string[],
+    tableTitle?: string,
+    titleClass?:string,
+    children: (data:PendingTableList) => ReactNode;
+}
+
+export default function PendingList({
+  data,
+  itemsPerPage = 5,
+  filterItem,
+  tableTitle,
+  titleClass,
+  children,
+}:PaginatedListProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredData, setFilteredData] = useState(data);
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [newData, setNewData] = useState<any>([]);
+
+  const numberOfSelection = itemsPerPage;
+
+  const handlePrev = () => {
+    if (currentPage != 0) {
+      setCurrentPage((prev) => prev - numberOfSelection);
+    }
+  };
+  const handleNext = () => {
+    if (currentPage < data.length) {
+      setCurrentPage((prev) => 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(() => {
+    setNewData(
+      filteredData?.slice(currentPage, numberOfSelection + currentPage)
+    );
+  }, [currentPage, filteredData]);
+
+  useEffect(()=>{
+    setCurrentPage(0)
+  },[itemsPerPage])
+
+  return (
+    <div className="w-full">
+      <h1 className={`text-2xl mb-5 font-semibold ${titleClass && titleClass}`}>{tableTitle}</h1>
+
+      {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>
+      )}
+
+      {children(newData)}
+
+      {/* show prev and next button if data exist */}
+      {(data.length > 0 && data.length > itemsPerPage) && (
+        <div className="mt-5 md:mt-10 w-full flex gap-4 justify-center items-center">
+        <button
+          onClick={handlePrev}
+          className={`w-6 h-6 md:w-12 md:h-12 text-sm md:text-lg rounded-full flex justify-center items-center transition-all duration-300 ${
+            currentPage == 0
+              ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
+              : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
+          }`}
+        >
+          &lt;
+        </button>
+
+        {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>
+            )
+          }
+        })}
+
+        <button
+          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 transition-all duration-300 ${
+            currentPage + numberOfSelection >= data.length
+              ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
+              : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
+          }`}
+        >
+          &gt;
+        </button>
+      </div>
+      )}
+    </div>
+  );
+}

src/components/shared/Stepper.tsx

@@ -9,7 +9,7 @@ const Stepper: React.FC<StepperProps> = ({ step = 0 }) => {
 
   return (
     <div className="flex justify-between items-center gap-5">
-      {[...Array(6)].map((_, index) => (
+      {[...Array(5)].map((_, index) => (
         <div
           key={index}
           className={`w-[1.875rem] border-[.1875rem] rounded-sm ${(step === index

src/core/apiRequest.ts

@@ -1,12 +1,11 @@
-import { postAuxEnd } from "./axiosCall";
-
+import { postAuxEnd, getAuxEnd } from "./axiosCall";
 
 // FUNCTION TO START BVN VALIDATION
 export const validateBVN = (postData:any) => {
     let reqData = {
         ...postData
     }
-    return postAuxEnd('https://digifi-apidev.chiefsoft.net/digiusers/v1/bvn', reqData)
+    return postAuxEnd('/bvn', reqData)
 }
 
 
@@ -15,5 +14,30 @@ export const verifyOTP = (postData:any) => {
     let reqData = {
         ...postData
     }
-    return postAuxEnd('https://digifi-apidev.chiefsoft.net/digiusers/v1/bvn/verify', reqData)
+    return postAuxEnd('/bvn/verify', reqData)
+}
+
+// FUNCTION TO APPLY FOR LOAN
+export const applyForLoan = (postData:any) => {
+    let reqData = {
+        customer_uid: localStorage.getItem('uid'),
+        ...postData
+    }
+    return postAuxEnd('/loan/apply', reqData)
+}
+
+// FUNCTION TO GET USER BY CUSTOMER UID
+export const getUserByID = (uid:string) => {
+    let reqData = {
+        // customer_uid: localStorage.getItem('uid'),
+    }
+    return getAuxEnd(`/profile?uid=${uid}`, reqData)
+}
+
+// FUNCTION TO GET USER BY CUSTOMER UID
+export const getUserPendingLoanList = (uid:string) => {
+    let reqData = {
+        // customer_uid: localStorage.getItem('uid'),
+    }
+    return getAuxEnd(`/dash?uid=${uid}`, reqData)
 }

src/core/axiosCall.ts

@@ -1,49 +1,81 @@
 import axios from "axios";
 
-export function postAuxEnd(uri:string, reqData:any):Promise<any> {
-    // const endPoint = import.meta.env.REACT_APP_USERS_ENDPOINT + uri;
-    const formData = new FormData();
-    for (let value in reqData) {
+export function postAuxEnd(uri: string, reqData: any): Promise<any> {
+  const endPoint = import.meta.env.VITE_USERS_ENDPOINT + uri;
+  const formData = new FormData();
+  for (let value in reqData) {
+    if (typeof reqData[value] === "object") {
+      // for (let innerValue in reqData[value]) {
+      //   let innerReqData = reqData[value]
+      //   console.log('SAMPLE',innerReqData)
+      //   formData.append(reqData[value][innerValue], reqData[value][innerValue]);
+      // }
+      // formData.append(value, JSON.stringify(reqData[value]));
+      formData.append(value, reqData[value]);
+    } else {
       formData.append(value, reqData[value]);
     }
-    return axios.post(uri, formData)
-        .then((response:{}) => {
-        //   if (response.data.internal_return == "-9999") {
-        //     localStorage.clear();
-        //     window.location.href = `/login?sessionExpired=true`;
-        //   }
-          return response;
-        })
-        .catch((error:any) => {
-          if (error.response) {
-            //response status is an error code
-            console.log(
-                "ERROR-------------------------------------------------------"
-            );
-            console.log(error.response.status);
-            console.log(
-                "ERROR-------------------------------------------------------"
-            );
-          } else if (error.request) {
-            //response not received though the request was sent
-            console.log(
-                "ERROR2-------------------------------------------------------"
-            );
-            console.log(error?.request);
-            console.log(
-                "ERROR2-------------------------------------------------------"
-            );
-          } else {
-            //an error occurred when setting up the request
-            console.log(
-                "ERROR3-------------------------------------------------------"
-            );
-            console.log(error);
-            console.log(
-                "ERROR3-------------------------------------------------------"
-            );
-          }
-        });
   }
+  return axios
+    .post(endPoint, formData)
+    .then((response: {}) => {
+      //   if (response.data.internal_return == "-9999") {
+      //     localStorage.clear();
+      //     window.location.href = `/login?sessionExpired=true`;
+      //   }
+      return response;
+    })
+    .catch((error: any) => {
+      if (error.response) {
+        //response status is an error code
+        console.log(
+          "ERROR-------------------------------------------------------"
+        );
+        console.log(error.response.status);
+        console.log(
+          "ERROR-------------------------------------------------------"
+        );
+      } else if (error.request) {
+        //response not received though the request was sent
+        console.log(
+          "ERROR2-------------------------------------------------------"
+        );
+        console.log(error?.request);
+        console.log(
+          "ERROR2-------------------------------------------------------"
+        );
+      } else {
+        //an error occurred when setting up the request
+        console.log(
+          "ERROR3-------------------------------------------------------"
+        );
+        console.log(error);
+        console.log(
+          "ERROR3-------------------------------------------------------"
+        );
+      }
+    });
+}
 
 
+export function getAuxEnd(uri: string, reqData: any): Promise<any> {
+  const endPoint = import.meta.env.VITE_USERS_ENDPOINT + uri;
+  const formData = new FormData();
+  for (let value in reqData) {
+    formData.append(value, reqData[value]);
+  }
+  return axios
+    .get(endPoint, reqData)
+    .then((response: {}) => {
+      //   if (response.data.internal_return == "-9999") {
+      //     localStorage.clear();
+      //     window.location.href = `/login?sessionExpired=true`;
+      //   }
+      return response;
+    })
+    .catch((error: any) => {
+      console.log(
+        "ERROR3-------------------------------------------------------", error
+      );
+    });
+}

src/core/models.ts

@@ -4,4 +4,24 @@ export interface RequestStatus {
     message?:string
     name?:string
     data?:{}[] | [any] | {}
-  }
+}
+
+
+export interface User {
+    firstname?:string
+    lastname?:string
+    last_login?:string
+    message?:string
+    token?:string
+    customer_uid?:string
+    call_return?:string
+  }
+
+
+export type PendingTableList = {
+    status?: string | boolean;
+    application_uid?: string
+    added?: string
+    loan_amount?: string
+    payment_month?: string    
+}[];

src/layouts/DashboardLayout/DashboardAuth.tsx

@@ -1,11 +1,61 @@
 
+import {useState, useEffect} from 'react'
 import DashboardLayout from "./DashboardLayout";
-import { Outlet } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import { RouteHandler } from '../../router/routes';
+import { updateUserDetails } from '../../store/UserDetails';
+import { getUserByID } from '../../core/apiRequest';
+
+import Logo from '../../assets/images/logo.png'
 
 export default function DashboardAuth() {
+
+  const navigate = useNavigate()
+  const dispatch = useDispatch()
+
+  const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable
+
+  const [loading, setLoading] = useState(true)
+
+  useEffect(()=>{
+    let token = localStorage.getItem('token')
+    let uid = localStorage.getItem('uid')
+    if(!token || !uid){
+      navigate(RouteHandler.letsGetStarted, {replace:true})
+      return
+    }
+    const getUser = () => { // FUNCTION TO GET USER BY ID
+      // let data = {firstname:'firstname', lastname:'lastname', uid:'28273737646466464'}
+      getUserByID(uid).then(res=>{
+        if(!res.data.call_return || !Object.keys(res.data.customer).length){
+          navigate(RouteHandler.letsGetStarted, {replace:true})
+          return
+        }
+        setLoading(false)
+        dispatch(updateUserDetails(res.data.customer));
+      }).catch(err=>{
+        navigate(RouteHandler.letsGetStarted, {replace:true})
+        console.log('USER ERROR', err)
+      })
+    }
+    if(!Object.keys(userDetails).length){
+      getUser()
+    }
+  },[])
+
   return (
-  <DashboardLayout>
-    <Outlet />
-  </DashboardLayout>
+    <>
+    {loading && !Object.keys(userDetails).length ?
+      <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
+        <img className='animate-pulse' src={Logo} alt='Logo' />
+        <p className='animate-pulse'>loading...</p>
+      </div>
+    :
+      <DashboardLayout>
+        <Outlet />
+      </DashboardLayout>
+    }
+    </>
   )
 }

src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -35,6 +35,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
   // });
 
   const logoutUser = () => {
+    localStorage.clear()
     navigate(RouteHandler.letsGetStarted, {replace:true})
   }
 

src/lib/NewDateTimeFormatter.ts

@@ -0,0 +1,18 @@
+
+export function NewDateTimeFormatter(isoDateString:any, addHour = true) {
+    const date = new Date(isoDateString);
+    if (addHour) {
+      date.setTime(date.getTime() + 1 * 60 * 60 * 1000);
+    }
+    const formattedDate = date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    //   second: "2-digit",
+      hour12: true,
+      timeZone: "UTC",
+    });
+    return formattedDate;
+  }

src/main.tsx

@@ -4,10 +4,15 @@ import { BrowserRouter } from "react-router-dom";
 import App from "./App.tsx";
 import "./index.css";
 
+import { Provider } from "react-redux";
+import store from "./store/store";
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <Provider store={store}>
+        <App />
+      </Provider>
     </BrowserRouter>
   </React.StrictMode>
 );

src/store/UserDetails.ts

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  userDetails: {},
+};
+
+export const userSlice = createSlice({
+  name: "userDetails",
+  initialState,
+  reducers: {
+    updateUserDetails: (state, action) => {
+      state.userDetails = { ...action.payload };
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { updateUserDetails } = userSlice.actions;
+
+export default userSlice.reducer;

src/store/store.ts

@@ -0,0 +1,9 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+import userDetailReducer from "./UserDetails";
+
+export default configureStore({
+  reducer: {
+    userDetails: userDetailReducer,
+  },
+});