max input length: bvn & code

.env

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

.env.development

@@ -1 +1,9 @@
 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
+
+# BACKEND END POINTS
+VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'

.env.production

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

docker-compose.yml

@@ -11,8 +11,13 @@ services:
     ports:
       - 6030:5173
     expose:
-      - "5173" 
+      - "5173"
+    extra_hosts:
+      - digifi-apidev.chiefsoft.net:10.10.33.15
+      - backend.wrenchboard.api.test:10.10.33.15
     environment:
       - PORT=${DIGIFI_PORT}
+    tty: true
+    stdin_open: true
 volumes:
-  src:
+  src:

package.json

@@ -11,10 +11,12 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.1",
+    "axios": "^1.6.8",
     "clsx": "2.1.0",
     "formik": "2.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "6.3.0",
     "react-select": "^5.8.0",

src/App.css

@@ -1,5 +1,5 @@
 .btn-primary {
-  background: #5A2C82;
+  background: #5A2C82 !important;
   color: #FFFFFF;
   display: block;
   text-decoration: none;
@@ -8,7 +8,34 @@
 }
 
 .btn-active {
-  background: #D10056;
+  background: #D10056 !important;
+}
+
+.btn-R {
+  padding-inline: 3rem !important;
+  font-weight: bold !important;
+  font-size: 16px !important;
+  background-color: #5A2C82;
+}
+
+.btn-W {
+  background: white !important;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #FBB700;
+  line-height: 25px;
+  align-items: center !important;
+}
+
+.btn-Y {
+  background: #FBB700 !important;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: bold;
+  /* color: white; */
+  line-height: 25px;
+  align-items: center !important;
 }
 
 .sidebar {

src/components/Dashboard/DashboardFormInit.tsx

@@ -0,0 +1,116 @@
+import { Button, InputCompOne, Stepper } from "..";
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+
+type Props = {
+  handleNextStep:(value:{})=>any
+}
+
+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()
+});
+
+export default function DashboardFormInit({handleNextStep}:Props) {
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = (values:{}) => {
+    handleNextStep(values)
+  };
+
+  return (
+    <div className="w-full">
+      <div className="w-full flex justify-center">
+        <Stepper step={0} />
+      </div>
+      <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>
+                <div className="mt-[3.25rem] flex flex-col gap-9">
+                  <InputCompOne
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    name="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.loan_amount}
+                    onChange={props.handleChange}
+                    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="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={paymentMonth}
+                    selectValue={props.values.payment_month}
+                    onChange={props.handleChange}
+                    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="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.sales_agent}
+                    onChange={props.handleChange}
+                    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"
+                    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/Dashboard/DashboardHome.tsx

@@ -1,58 +1,36 @@
-import { DefaultCard } from "../"
+import React, { FC } from "react";
+import DashboardHomeIntro from "./DashboardHomeIntro";
+import DashboardFormInit from "./DashboardFormInit";
+import DashboardHomeDetail from "./home/DashboardHomeDetail";
+import DashboardHomeEmploymentInfo from "./home/DashboardHomeEmploymentInfo";
+import DashboardHomeRefereeInfo from "./home/DashboardHomeRefereeInfo";
+import DashboardHomeAttestation from "./home/DashboardHomeAttestation";
+
+interface DashboardHomeProps {}
+
+const DashboardHome: FC<DashboardHomeProps> = () => {
+  const [step, setStep] = React.useState(1);
+  const [applicationDetails, setApplicationDetails] = React.useState({});
+
+  const handleNextStep = (values:{}={}) => {
+    if (step < 7) {
+      setStep(step + 1);
+    }
+    setApplicationDetails((prev:{}) => ({...prev, ...values}))
+    }
 
-export default function DashboardHome() {
   return (
-    <div className='w-full'>
-      <div className='group w-full lg:w-96 h-32'>
-        <DefaultCard 
-          descText='You currently do not have any open application. Click on apply for a loan to get started.'
-          iconName='arrow'
-          iconColor='#FBB700'
-          cardClass={`p-4 bg-[#FFFAFA] border border-[#EE4040]`}
-          descTextClass='text-[#423131] leading-5'
-          onClick={()=>{console.log('working')}}
-        />
-      </div>
-
-      <div className='w-full mt-20 flex gap-16 flex-wrap'>
-        {/* cards display */}
-        <div className='group h-40 w-full lg:w-80'>
-          <DefaultCard 
-            title='Apply for a loan'
-            descText='You currently do not have any open application. Click on apply for a loan to get started.'
-            iconName='greater-than'
-            iconColor='#FFF'
-            cardClass={`bg-[#5C2684] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
-            titleClass='text-[#FFF]'
-            descTextClass='text-[#EFEFEF] leading-5'
-            onClick={()=>{console.log('working')}}
-          />
-        </div>
-        <div className='group h-40 w-full lg:w-80'>
-          <DefaultCard 
-            title='Loan history'
-            descText='You currently do not have any open application. Click on apply for a loan to get started.'
-            iconName='greater-than'
-            iconColor='#FFF'
-            cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
-            titleClass='text-[#FFF]'
-            descTextClass='text-[#EFEFEF] leading-5'
-            onClick={()=>{console.log('working')}}
-          />
-        </div>
-        <div className='group h-40 w-full lg:w-80'>
-          <DefaultCard 
-            title='How it works?'
-            descText='Steps to follow to complete your loan application successfully.'
-            iconName='greater-than'
-            iconColor='#FFF'
-            cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
-            titleClass='text-[#FFF]'
-            descTextClass='text-[#EFEFEF] leading-5'
-            onClick={()=>{console.log('working')}}
-          />
-        </div>
-      </div>
+    <div className="w-full">
+      {step === 1 && <DashboardHomeIntro step={step} handleNextStep={handleNextStep} />}
+      {step === 2 && <DashboardFormInit handleNextStep={handleNextStep} />}
+      {step === 3 && <DashboardHomeDetail handleNextStep={handleNextStep} />}
+      {step === 4 && <DashboardHomeEmploymentInfo handleNextStep={handleNextStep} />}
+      {step === 5 && <DashboardHomeRefereeInfo handleNextStep={handleNextStep} />}
+      {step === 6 && <DashboardHomeAttestation handleNextStep={handleNextStep} applicationDetails={applicationDetails} />}
+      {step === 7 && <DashboardHomeIntro step={step} handleNextStep={handleNextStep} />}
+      {/* <DashboardHomeAttestation handleNextStep={handleNextStep} applicationDetails={applicationDetails} /> */}
     </div>
-  )
-}
+  );
+};
+
+export default DashboardHome;

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -0,0 +1,249 @@
+import React, { FC, useState, useEffect } from "react";
+import NairaBag from "../../assets/images/dashboard/naira-bag.png";
+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;
+  desc?: string;
+  descSpan?: string;
+  descSpanClass?: string;
+  onClick?: any;
+  cardClass?: string;
+  titleClass?: string;
+  descClass?: string;
+  btnTitle?: string;
+  btnTextClass?: string;
+  image?: any;
+  imgClass?: string;
+}
+
+export const DashBoardCard: React.FC<DashBoardCardProps> = ({
+  title,
+  desc,
+  onClick,
+  cardClass,
+  titleClass,
+  descClass,
+  descSpan,
+  descSpanClass,
+  btnTitle,
+  btnTextClass,
+  image,
+  imgClass,
+}) => {
+  return (
+    <div
+      className={`h-full w-full rounded-lg p-5 shadow-lg hover:shadow-none bg-no-repeat bg-[90%] flex justify-between gap-4 items-center transition-all duration-300 ${
+        cardClass && cardClass
+      }`}
+      // onClick={onClick}
+    >
+      <div className="w-3/4 flex flex-col gap-[2.3125rem]">
+        {title && (
+          <h1
+            className={`mb-1 text-[#FFF] text-lg text-left font-bold ${
+              titleClass && titleClass
+            }`}
+          >
+            {title}
+          </h1>
+        )}
+        {desc && (
+          <p className={`text-lg text-left ${descClass && descClass}`}>
+            {desc}{" "}
+            {descSpan && (
+              <span className={`${descSpanClass && descSpanClass}`}>
+                {descSpan}
+              </span>
+            )}
+          </p>
+        )}
+        {btnTitle && (
+          <Button className={btnTextClass} text={btnTitle} onClick={onClick} />
+        )}
+      </div>
+      {image && <img className={imgClass} src={image} alt="card-image" />}
+    </div>
+  );
+};
+
+interface DashboardHomeIntroProps {
+  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, {userDetails.firstname}</h1>
+        <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
+          <DashBoardCard
+            cardClass="bg-[#5C2684] relative"
+            desc="Begin your application and get up to "
+            descSpan="5 million naira loan."
+            descClass="leading-[1.5625rem] text-lg text-white"
+            descSpanClass="font-bold"
+            btnTitle="Apply here"
+            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({})}
+            />
+        </div>
+      </>
+      :
+      <>
+        <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"
+            desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
+            // descSpan="5 million naira loan."
+            descClass="leading-[1.5625rem] text-lg text-white"
+            // descSpanClass="font-bold"
+            btnTitle="View and accept"
+            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}
+            />
+        </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>
+  );
+};
+
+export default DashboardHomeIntro;
+
+//  {/* <div className="group w-full lg:w-96 h-32">
+//         <DefaultCard
+//           descText="You currently do not have any open application. Click on apply for a loan to get started."
+//           iconName="arrow"
+//           iconColor="#FBB700"
+//           cardClass={`p-4 bg-[#FFFAFA] border border-[#EE4040]`}
+//           descTextClass="text-[#423131] leading-5"
+//           onClick={() => {
+//             console.log("working");
+//           }}
+//         />
+//       </div> */}
+
+//       {/* <div className="w-full mt-20 flex gap-16 flex-wrap">
+//         <div className="group h-40 w-full lg:w-80">
+//           <DefaultCard
+//             title="Apply for a loan"
+//             descText="You currently do not have any open application. Click on apply for a loan to get started."
+//             iconName="greater-than"
+//             iconColor="#FFF"
+//             cardClass={`bg-[#5C2684] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+//             titleClass="text-[#FFF]"
+//             descTextClass="text-[#EFEFEF] leading-5"
+//             onClick={() => {
+//               console.log("working");
+//             }}
+//           />
+//         </div>
+//         <div className="group h-40 w-full lg:w-80">
+//           <DefaultCard
+//             title="Loan history"
+//             descText="You currently do not have any open application. Click on apply for a loan to get started."
+//             iconName="greater-than"
+//             iconColor="#FFF"
+//             cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+//             titleClass="text-[#FFF]"
+//             descTextClass="text-[#EFEFEF] leading-5"
+//             onClick={() => {
+//               console.log("working");
+//             }}
+//           />
+//         </div>
+//         <div className="group h-40 w-full lg:w-80">
+//           <DefaultCard
+//             title="How it works?"
+//             descText="Steps to follow to complete your loan application successfully."
+//             iconName="greater-than"
+//             iconColor="#FFF"
+//             cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+//             titleClass="text-[#FFF]"
+//             descTextClass="text-[#EFEFEF] leading-5"
+//             onClick={() => {
+//               console.log("working");
+//             }}
+//           />
+//         </div>
+//       </div> */}

src/components/Dashboard/DashboardProfile.tsx

@@ -0,0 +1,72 @@
+import { InputCompOne } from "..";
+
+import { useNavigate } from "react-router-dom";
+import { RouteHandler } from "../../router/routes";
+
+export default function DashboardProfile() {
+    let navigate = useNavigate();
+  const navigateToProfile = () => navigate(RouteHandler.dashboardHome);
+  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>
+      </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>
+    </div>
+  );
+}

src/components/Dashboard/home/DashboardHomeAttestation.tsx

@@ -0,0 +1,147 @@
+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:(value:{})=>any
+  applicationDetails: {}
+}
+
+const initialValues = {
+  account: "",
+  checked: false
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  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, applicationDetails}:Props) {
+  //     let navigate = useNavigate();
+  // const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
+
+  //FUNCTION TO HANDLE LOAN APPLICATION
+  const handleSubmit = (values:any) => {
+    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 (
+    <div className="w-full">
+      <div className="w-full flex justify-center">
+        <Stepper step={4} />
+      </div>
+      <p className='my-10 text-red-500 text-lg md:text-2xl'>Applicant's Attestation and Debit Instruction</p>
+      <p className='text-red-500 text-base'>NB: Must be your FCMB account number</p>
+      <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>          
+                <div className="flex flex-col gap-9">
+                  <div className="flex items-center gap-[4.125rem]">
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="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}
+                      onChange={props.handleChange}
+                      error={(props.errors.account && props.touched.account) ? props.errors.account : ''}
+                    />
+                  </div>
+                  <div className='max-w-[25.875rem]'>
+                    <div className='flex gap-4 items-start'>
+                      <input 
+                        type='checkbox' 
+                        name="checked"
+                        className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' 
+                        onChange={props.handleChange}
+                      />
+                      <p className='text-[12px] text-justify'>By pressing, you agree that you have read, understood and accept the <span className='text-blue-600'>applicatant's attestation</span> and <span className='text-blue-600'>terms and conditions</span> for FCMB
+                          premium salary loan. You also give us permission to collect financial information and run credit checks on the account provided through our partners
+                      </p>
+                    </div>
+                    {props.errors.checked && props.touched.checked && <span className='text-[10px] text-red-500'>{props.errors.checked}</span>}
+                  </div>
+                  <Button
+                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+                    text="Apply"
+                    type="submit"
+                  />
+                </div>
+              </Form>
+            )}
+      </Formik>
+    </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

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

src/components/Dashboard/home/DashboardHomeEmploymentInfo.tsx

@@ -0,0 +1,274 @@
+import { Button, InputCompOne, Stepper } from '../../shared/index';
+
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+
+type Props = {
+  handleNextStep:(value:{})=>any
+}
+
+const initialValues = {
+  job_title: "",
+  name: "",
+  sector: "",
+  industry: "",
+  resumption_date: "",
+  email:"",
+  annual_income: "",
+  monthly_salary: "",
+  salary_payment_date: "",
+  employment_id: "",
+  highest_eductaion: ""
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  job_title: Yup.string()
+    .required("Required"),
+  name: Yup.string()
+    .required("Required"),
+  sector: Yup.string()
+    .required("Required"),
+  industry: Yup.string()
+    .required("Required"),
+  resumption_date: Yup.string()
+    .required("Required"),
+  email: Yup.string()
+    .email("Invalid")
+    .required("Required"),
+  annual_income: Yup.string()
+    .required("Required")
+    .test("no-e", "Invalid", (value:any) => {
+      if (value && /^[0-9]*$/.test(value) == false) {
+        return false;
+      }
+      return true;
+    }),
+  monthly_salary: Yup.string()
+    .required("Required")
+    .test("no-e", "Invalid", (value:any) => {
+      if (value && /^[0-9]*$/.test(value) == false) {
+        return false;
+      }
+      return true;
+    }),
+  salary_payment_date: Yup.string()
+    .required("Required"),
+  employment_id: Yup.string()
+    .required("Required"),
+  highest_eductaion: Yup.string()
+    .required("Required"),
+});
+
+export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
+
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = (values:any) => {
+    handleNextStep({employment: values})
+  };
+
+
+  return (
+    <div className="w-full">
+      <div className="w-full flex justify-center">
+        <Stepper step={2} />
+      </div>
+      <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>          
+                <div className="mt-[3.25rem] flex flex-col gap-9">
+                  <p className='text-red-500 text-lg md:text-2xl'>Employment Informaton</p>
+                  <div className="flex items-center gap-[4.125rem]">
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="job_title"
+                      floatLabel="Job Title"
+                      // labelClass="font-bold text-[1.125rem]"
+                      input
+                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                      placeholder="Software Engineer"
+                      value={props.values.job_title}
+                      onChange={props.handleChange}
+                      error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
+                    />
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="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.name}
+                      onChange={props.handleChange}
+                      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="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.sector}
+                      onChange={props.handleChange}
+                      error={(props.errors.sector && props.touched.sector) ? props.errors.sector : ''}
+                    />
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="industry"
+                      floatLabel="Select your industry"
+                      // labelClass="font-bold text-[1.125rem]"
+                      select={true}
+                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                      selectOptions={industry}
+                      selectValue={props.values.industry}
+                      onChange={props.handleChange}
+                      error={(props.errors.industry && props.touched.industry) ? props.errors.industry : ''}
+                    />
+                  </div>
+                  <div className="flex items-center gap-[4.125rem]">
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="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.resumption_date}
+                      onChange={props.handleChange}
+                      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="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.email}
+                      onChange={props.handleChange}
+                      error={(props.errors.email && props.touched.email) ? props.errors.email : ''}
+                    />
+                  </div>
+                  <div className="flex items-center gap-[4.125rem]">
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="annual_income"
+                      floatLabel="Annual Income"
+                      // labelClass="font-bold text-[1.125rem]"
+                      input
+                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
+                      placeholder="1,200,000"
+                      value={props.values.annual_income}
+                      onChange={props.handleChange}
+                      error={(props.errors.annual_income && props.touched.annual_income) ? props.errors.annual_income : ''}
+                    />
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="monthly_salary"
+                      floatLabel="Net monthly salary"
+                      // labelClass="font-bold text-[1.125rem]"
+                      input
+                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
+                      placeholder="100,000"
+                      value={props.values.monthly_salary}
+                      onChange={props.handleChange}
+                      error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
+                    />
+                  </div>
+                  <div className="flex items-center gap-[4.125rem]">
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="salary_payment_date"
+                      floatLabel="Salary payment date"
+                      // labelClass="font-bold text-[1.125rem]"
+                      input
+                      inputType='date'
+                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                      placeholder="30th of every month"
+                      value={props.values.salary_payment_date}
+                      onChange={props.handleChange}
+                      error={(props.errors.salary_payment_date && props.touched.salary_payment_date) ? props.errors.salary_payment_date : ''}
+                    />
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="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.employment_id}
+                      onChange={props.handleChange}
+                      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="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={highestEductaion}
+                    selectValue={props.values.highest_eductaion}
+                    onChange={props.handleChange}
+                    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"
+                    text="Next"
+                    type="submit"
+                  />
+                </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/DashboardHomeRefereeInfo.tsx

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

src/components/Dashboard/index.tsx

@@ -1,3 +1,4 @@
 import DashboardHome from './DashboardHome'
+import DashboardProfile from './DashboardProfile';
 
-export { DashboardHome };
+export { DashboardHome, DashboardProfile };

src/components/DashboardLayout/Aside.tsx

@@ -1,116 +0,0 @@
-import {useState} from 'react'
-import { Link, useLocation, useNavigate } from "react-router-dom";
-
-import { Icons } from "../index";
-
-type Props = {
-  asideDisplay?: () => void
-}
-
-export default function Aside({asideDisplay}:Props) {
-
-  const {pathname} = useLocation()
-
-  const navigate = useNavigate()
-
-  const [openNestedLink, setOpenNestedLink] = useState<{name:string|null}>({name: ''})
-
-  const handleOpenNestedLink = (e:any) => {
-    if(!e || !e.target){
-      return setOpenNestedLink({name: ''})
-    }
-   if(openNestedLink.name && openNestedLink.name == e.target.name){
-      setOpenNestedLink({name: ''})
-    }else{
-      setOpenNestedLink({name: e.target.name})
-    }
-  }
-
-  return (
-    <div className="py-5 px-10 flex flex-col h-full bg-inherit">
-      <div className="flex justify-center items-center text-sm">
-        <p className="w-14 h-14 rounded-full bg-[#5C2684]/50 flex items-center justify-center">
-          AC
-        </p>
-      </div>
-      <div className="mt-10 h-full overflow-y-auto bg-inherit">
-        {asideLinks.map((link, index) => {
-          if(link.nestedLink?.length){
-            let allNestedLinks = link.nestedLink.map(item => item.link)
-            return (
-              <div key={index} className='w-full relative bg-inherit overflow-hidden'>
-                <button
-                    name={link.name} 
-                    onClick={(e)=>handleOpenNestedLink(e)}
-                    className={`py-2 pl-2 text-left relative w-full overflow-hidden rounded-lg border-2 flex justify-between items-center z-10 bg-inherit ${allNestedLinks.includes(pathname) ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`} 
-                >
-                  {link.name}
-                  <div className={`mr-2 ${openNestedLink.name == link.name ? '-rotate-90' : 'rotate-90'} transition-all duration-300`}>
-                    <Icons 
-                      name='greater-than' 
-                      fillColor={`${openNestedLink.name == link.name ? '#5C2684' : '#585858'}`} 
-                    />
-                  </div>
-                </button>
-                <div className={`transition-all duration-300 w-full z-1 ${openNestedLink.name == link.name ? 'relative top-0' : 'absolute -top-[500px]'}`}>
-                  {link.nestedLink.map((nextLink, index) => (
-                    <Link
-                      onClick={()=>{asideDisplay && asideDisplay()}}
-                      key={index}
-                      to={nextLink.link ? nextLink.link : '#'}
-                      className={`w-full my-1 flex items-center gap-2 py-2 pl-5 text-base font-medium border-l-2 ${pathname == nextLink.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`}
-                    >
-                    <Icons name={nextLink.icon} fillColor={`${pathname == nextLink.link ? '#5C2684' : '#585858'}`} />
-                    {nextLink.name}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            )
-          }else{
-            return(
-              <Link
-                onClick={()=>{asideDisplay && asideDisplay()}}
-                key={index}
-                to={link.link ? link.link : '#'}
-                className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium border-2 ${pathname == link.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`}
-              >
-              <Icons name={link.icon} fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`} />
-              {link.name}
-              </Link>
-            )
-          }
-        })}
-      </div>
-      <div className="w-full flex justify-center items-center">
-        <button className="py-3 px-6 bg-red-100 text-red-500 font-medium rounded-md" onClick={()=>navigate('/login', {replace:true})}>
-          Log out
-        </button>
-      </div>
-    </div>
-  );
-}
-
-
-type AsideLinksType = {
-    name: string,
-    link?: string,
-    icon: string,
-    nestedLink:{
-      name: string,
-      link: string,
-      icon: string,
-    }[]
-}[]
-const asideLinks:AsideLinksType = [
-    {name: 'Home', link: '/dashboard/home', icon: 'home', nestedLink:[]},
-    {name: 'My Profile', link: '/dashboard/profile', icon: 'profile', nestedLink:[]},
-    {name: 'Verification', link: '/dashboard/verification', icon: 'verification', nestedLink:[]},
-    {name: 'Payments', link: '/dashboard/payments', icon: 'payments', nestedLink:[]},
-    {name: 'Legals', link: '/dashboard/legals', icon: 'legals', nestedLink:[]},
-    {name: 'Nested Link', icon: 'home', nestedLink:[
-        {name: 'Link 2', link: '/dashboard/not-found', icon: 'legals'}, 
-        {name: 'Link 1', link: '/dashboard/not-found', icon: 'home'}
-      ]
-    },
-]

src/components/DashboardLayout/DashboardAuth.tsx

@@ -1,10 +0,0 @@
-import DashboardLayout from "./DashboardLayout";
-import { Outlet } from "react-router-dom";
-
-export default function DashboardAuth() {
-  return (
-  <DashboardLayout>
-    <Outlet />
-  </DashboardLayout>
-  )
-}

src/components/DashboardLayout/DashboardLayout.tsx

@@ -1,92 +0,0 @@
-import { ReactNode, useState, useEffect } from 'react'
-
-import Aside from './Aside'
-
-export default function DashboardLayout({children}:{children: ReactNode}) {
-
-  const [showAside, setShowAside] = useState<boolean>(false)
-
-  const asideDisplay = ():void => {
-    setShowAside(prev => !prev)
-  }
-
-  useEffect(() => {
-    const handleResize = () => {
-        return setShowAside(false)
-        // setWidthSize(window.innerWidth)
-    }
-    window.addEventListener('resize', handleResize)
-  
-    // return () => {
-    //   window.removeEventListener('resize', screenResized)
-    // }
-  }, [])
-  
-
-  return (
-    <div className='w-full max-w-[2000px] mx-auto h-screen flex bg-[#020202] text-black'>
-      <aside className='w-[300px] bg-white hidden md:block border-r-2 border-[#E6E6E6]'>
-        <Aside />
-      </aside>
-
-      <aside className={`w-[300px] md:hidden bg-white border-r-2 border-[#E6E6E6] fixed top-0 bottom-0 z-50 transition-all duration-500 ${showAside ? 'left-0' : '-left-[200%]'}`}>
-        <Aside asideDisplay={asideDisplay}/>
-      </aside>
-
-      <main className={`dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden`}>
-          <header className={`p-5 sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6] bg-[url('../../../src/assets/images/dashboard/bg_ellipse1.png')] bg-no-repeat bg-[top_right]`}>
-            <div className='h-14 w-full flex justify-end items-center gap-5'>
-                {/* <div className=''>
-                <button className='px-4 py-2 rounded-lg shadow-lg bg-white/50'>DarkMode</button>
-                </div> */}
-                {/* MENU HAND BURGER */}
-                <div className='w-full'>Welcome Austin Catherine</div>
-                <div
-                className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
-                onClick={asideDisplay}
-                >
-                <div
-                    className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
-                    showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
-                    }`}
-                ></div>
-                <div
-                    className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
-                    showAside
-                        ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
-                        : "top-1/2 -translate-y-1/2"
-                    }`}
-                ></div>
-                <div
-                    className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
-                    showAside
-                        ? "top-1/2 -translate-y-1/2 -rotate-45"
-                        : "bottom-0"
-                    }`}
-                ></div>
-                </div>
-            </div>
-          </header>
-          <div className='flex p-5 relative'>
-            <div className='w-full p-5'>
-              {children}
-            </div>
-
-            {/* <div className={`pl-5 w-[300px] min-w-[300px] hidden lg:block`}>
-              <div className='sticky top-16'>
-                <div className='w-full min-h-72 bg-white/50 shadow-lg rounded-lg p-5'>
-                  <p className='text-base font-semibold tracking-wide pb-2' title='Answered question is marked green'>Answered Question</p>
-                  <div className='grid grid-cols-8 gap-2'>
-                    {Array.from({length: 50}, (_, i) => i + 1).map((item, index) => (
-                      <span key={index} className={`w-6 h-6 text-sm rounded-full flex justify-center items-center shadow-lg cursor-pointer ${index%2 == 0 ? 'bg-emerald-600' : ''}`}>{item}</span>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div> */}
-          </div>
-      </main>
-    </div>
-  )
-}
-

src/components/Footer/Footer.tsx

@@ -1,22 +1,33 @@
-import { Link } from "react-router-dom";
+// import { Link } from "react-router-dom";
 import { socialsIcons } from "../../utils/data";
 
 export default function Footer() {
   const date = new Date().getFullYear();
+
   return (
     <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
-      <div className="containerMode flex justify-between items-center flex-wrap gap-2">
+      <div className="containerMode flex justify-center md:justify-between items-center flex-wrap gap-2">
         <p className="text-[.9375rem] tracking-[2%] font-semibold text-[#969696]">
           {date} @ First City Monument Bank Limited
         </p>
         <div className="footer-social-icons flex justify-end items-center gap-2">
-          {socialsIcons.map((icon, index) => (
-            <Link key={index} className="w-[1.875rem] h-[1.875rem]" to="#">
-              <img src={icon.image} alt={icon.name} />
-            </Link>
-          ))}
+          {renderSocialLinks()}
         </div>
       </div>
     </div>
   );
 }
+
+function renderSocialLinks(): JSX.Element {
+  const link = socialsIcons.map(function (item, index) {
+    let { name, image, link } = item;
+
+    return (
+      <a href={link} key={index} className="w-[1.875rem] h-[1.875rem]">
+        <img src={image} alt={name} />
+      </a>
+    );
+  });
+
+  return <ul className="flex items-center gap-2">{link}</ul>;
+}

src/components/GetStarted/ApplicantsAttestation.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import DebitAccount from "./DebitAccount";
+
+
+const ApplicantsAttestation: React.FC = () => {
+  return (
+    <>
+      <div className="flex justify-between items-center w-full mt-8 mb-[45px]">
+        <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem] max-w-[34rem]">
+          Applicant’s Attestation and Debit Instruction
+        </h1>
+        <div className="flex flex-col gap-[.4375rem]">
+          <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
+            For more enquiries and support
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Call: 09099000000
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Email: fcmbloan@support.com
+          </p>
+        </div>
+      </div>
+      <DebitAccount />
+    </>
+  );
+};
+
+export default ApplicantsAttestation;

src/components/GetStarted/BVN.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import * as Yup from "yup";
+import { Form, Formik } from "formik";
+import { InputCompOne } from "../shared";
+
+// 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")
+});
+
+// initial values for formik
+let initialValues = {
+  bvn: ''
+};
+
+type Props = {
+    handleNextStep:()=>any
+}
+
+const BVN = ({handleNextStep}:Props) => {
+
+  const firstInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (values:any) => {
+    console.log('values', values)
+    handleNextStep()
+  };
+
+  return (
+    <Formik
+    initialValues={initialValues}
+    validationSchema={validationSchema}
+    onSubmit={handleSubmit}
+    >
+    {(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]">
+              <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}
+                ref={firstInputRef}
+                maxLength={11}
+                error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
+              />
+              <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"
+              >
+                Enter
+              </button>
+              <p className="text-[#5C2684] mt-[1.5625rem] max-w-[31.625rem]">
+                ***Every personal information attached to your BVN is safe and secured. It is only inportant for us to verify your information and also give you access to your application profile/account
+              </p>
+            </div>
+          </div>
+        </div>
+      </Form>
+    )}
+    </Formik>
+  );
+};
+
+export default BVN;

src/components/GetStarted/BasicInfo.tsx

@@ -1,102 +1,311 @@
-import React, { useRef } from "react";
-import InputCompOne from "../shared/InputCompOne";
+import React from "react";
 
-interface Option {
-  value: string;
-  label: string;
+import { Button, InputCompOne } from "..";
+
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+
+const initialValues = {
+    title: "",
+    marital_status: "",
+    agent_id: "",
+    bvn: "",
+    first_name: "",
+    phone: "",
+    email: "",
+    surname: "",
+    dob: "",
+    second_name: "",
+    spouse_bvn: "",
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  title: Yup.string()
+    .required("Required"),
+  marital_status: Yup.string()
+    .required("Required"),
+  agent_id: Yup.string()
+    .required("Required"),
+  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"),
+    first_name: Yup.string()
+    .required("Required"),
+  phone: Yup.string()
+    .required("Required"),
+  email: Yup.string()
+    .required("Required")
+    .email("Wrong email format"),
+  surname: Yup.string()
+    .required("Required"),
+  dob: Yup.string()
+    .required("Required"),
+});
+
+interface BasicInfoProps {
+  handleNextStep: any;
 }
 
-const BasicInfo: React.FC = () => {
-  const inputRef = useRef<HTMLInputElement>(null);
+const BasicInfo: React.FC<BasicInfoProps> = ({
+  handleNextStep,
+}) => {
+  // const inputRef = useRef<HTMLInputElement>(null);
 
-  // Array for marital status options
-  const maritalStatusOptions: Option[] = [
+  // const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+  //   const { name, value } = e.target as HTMLInputElement;
+
+  //   if (name === "bvn") {
+  //     const isNumeric = /^[0-9]+$/.test(value);
+
+  //     if (isNumeric) {
+  //       if (value.length === 10) {
+  //         setHideOTPComponent(false);
+  //       } else {
+  //         setHideOTPComponent(true);
+  //       }
+  //     } else {
+  //       console.log("Invalid BVN");
+  //     }
+  //   }
+  // };
+
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = (values:any) => {
+    console.log(values)
+    handleNextStep()
+  };
+
+  return (
+    <>
+      {/* Header */}
+      <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
+        Let’s Get You Started
+      </h1>
+      <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>
+                <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+                  <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+                    BASIC INFORMATION
+                  </p>
+                </div>
+                <div className="mt-8 grid grid-cols-2">
+                  <div className="flex flex-col gap-4 max-w-[15.6875rem]">
+                    <InputCompOne
+                      parentInputClass="max-w-[224px] w-full"
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="title"
+                      label="Title"
+                      labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                      select={true}
+                      selectClass="w-full h-[36px] rounded-[6px]"
+                      selectOptions={titleOptions}
+                      selectValue={props.values.title}
+                      onChange={props.handleChange}
+                      error={(props.errors.title && props.touched.title) ? props.errors.title : ''}
+                    />
+                    <InputCompOne
+                      parentInputClass="max-w-[224px] w-full"
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="marital_status"
+                      label="Marital Status"
+                      labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                      select={true}
+                      selectClass="w-full h-[36px] rounded-[6px]"
+                      selectOptions={maritalStatusOptions}
+                      selectValue={props.values.marital_status}
+                      onChange={props.handleChange}
+                      error={(props.errors.marital_status && props.touched.marital_status) ? props.errors.marital_status : ''}
+                    />
+                    <InputCompOne
+                      parentInputClass="max-w-[224px] w-full"
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="agent_id"
+                      label="Direct Sales Agent ID"
+                      labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                      select={true}
+                      selectClass="w-full h-[36px] rounded-[6px]"
+                      selectOptions={{loading: false, data:[{ value: "", label: "Select" }, { value: "dd", label: "AB001" }]}}
+                      selectValue={props.values.agent_id}
+                      onChange={props.handleChange}
+                      error={(props.errors.agent_id && props.touched.agent_id) ? props.errors.agent_id : ''}
+                    />
+                    <InputCompOne
+                        label="BVN"
+                        name="bvn"
+                        parentInputClass="w-full"
+                        labelSpan="( To get your BVN, dial *565*0# )"
+                        labelSpanClass="text-[11px] text-[#7a7373]"
+                        placeholder="Enter your BVN"
+                        labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
+                        input={true}
+                        inputClass="w-full h-[36px] bg-[#EFEFEF] rounded-[6px]"
+                        value={props.values.bvn}
+                        onChange={props.handleChange}
+                        error={(props.errors.bvn && props.touched.bvn) ? props.errors.bvn : ''}
+                    />
+                  </div>
+                </div>
+                
+                <div className="mt-5">
+                  <div className="grid grid-cols-2 gap-4">
+                    <InputCompOne
+                      parentClass="max-w-[20.3125rem]"
+                      label="First Name"
+                      name="first_name"
+                      parentInputClass="w-full"
+                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                      input
+                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                      value={props.values.first_name}
+                      onChange={props.handleChange}
+                      error={(props.errors.first_name && props.touched.first_name) ? props.errors.first_name : ''}
+                    />
+                    <InputCompOne
+                      parentClass="max-w-[20.3125rem]"
+                      label="Phone Number"
+                      name="phone"
+                      parentInputClass="w-full"
+                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                      input
+                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                      value={props.values.phone}
+                      onChange={props.handleChange}
+                      error={(props.errors.phone && props.touched.phone) ? props.errors.phone : ''}
+                    />
+                    <InputCompOne
+                      parentClass="max-w-[20.3125rem]"
+                      label="Email Address"
+                      name="email"
+                      parentInputClass="w-full"
+                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                      input
+                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                      value={props.values.email}
+                      onChange={props.handleChange}
+                      error={(props.errors.email && props.touched.email) ? props.errors.email : ''}
+                    />
+
+                    <InputCompOne
+                      parentClass="max-w-[20.3125rem]"
+                      label="Surname"
+                      name="surname"
+                      parentInputClass="w-full"
+                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                      input
+                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem] px-3"
+                      value={props.values.surname}
+                      onChange={props.handleChange}
+                      error={(props.errors.surname && props.touched.surname) ? props.errors.surname : ''}
+                    />
+                    <InputCompOne
+                      parentClass="max-w-[20.3125rem]"
+                      label="Date of Birth"
+                      name="dob"
+                      parentInputClass="w-full"
+                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                      input
+                      inputType='date'
+                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem] px-3"
+                      value={props.values.dob}
+                      onChange={props.handleChange}
+                      error={(props.errors.dob && props.touched.dob) ? props.errors.dob : ''}
+                    />
+                    <InputCompOne
+                      parentClass="max-w-[20.3125rem]"
+                      label="Second Name"
+                      name="second_name"
+                      parentInputClass="w-full"
+                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                      input
+                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem] px-3"
+                      value={props.values.second_name}
+                      onChange={props.handleChange}
+                      error={(props.errors.second_name && props.touched.second_name) ? props.errors.second_name : ''}
+                    />
+                  </div>
+                </div>
+
+                <div className='w-full'>
+                  <div className="w-full rounded py-3 bg-[#5C2684] px-5 mt-5">
+                    <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+                      SPOUSE DETAILS ( If not applicable, please move to the next stage )
+                    </p>
+                  </div>
+                  <div className="mt-8 grid grid-cols-2">
+                    <div className="flex flex-col gap-4 max-w-[15.6875rem]">
+                      <InputCompOne
+                        parentClass="max-w-[20.3125rem]"
+                        label="BVN"
+                        name="spouse_bvn"
+                        parentInputClass="w-full"
+                        labelSpan="( To get your BVN, dial *565*0# )"
+                        labelSpanClass="text-[11px] text-[#7a7373]"
+                        labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                        input
+                        inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                        value={props.values.spouse_bvn}
+                        onChange={props.handleChange}
+                        error={(props.errors.spouse_bvn && props.touched.spouse_bvn) ? props.errors.spouse_bvn : ''}
+                      />
+                    </div>
+                  </div>
+                </div>
+                <>
+                  <Button
+                    className="mt-8 btn-R bg-[#5A2C82]"
+                    text="Enter"
+                    type="submit"
+                  />
+                </>
+              </Form>
+            )}
+      </Formik>
+    </>
+  );
+};
+
+export default BasicInfo;
+
+
+
+interface SelectOption {
+  loading: boolean;
+  data: {value: string;
+  label: string}[]
+}
+
+const maritalStatusOptions: SelectOption = {
+  loading: false,
+  data: [
     { value: "", label: "Select" },
     { value: "single", label: "Single" },
     { value: "married", label: "Married" },
     { value: "divorced", label: "Divorced" },
     { value: "widowed", label: "Widowed" },
-  ];
+  ]
+}
 
-  // Array for title options
-  const titleOptions: Option[] = [
+const titleOptions: SelectOption = {
+  loading: false,
+  data: [
     { value: "", label: "Select" },
     { value: "ms", label: "Ms" },
     { value: "mr", label: "Mr" },
     { value: "miss", label: "Miss" },
     { value: "mrs", label: "Mrs" },
-  ];
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Handle input value changes
-    console.log(e.target.value);
-  };
-
-  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
-    // Handle input events
-    console.log(e);
-  };
-
-  return (
-    <div className="mt-8">
-      <div className="flex flex-col gap-3">
-        <InputCompOne
-          label="Title"
-          name="title"
-          parentInputClass="max-w-[224px] w-full"
-          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-          select
-          selectClass="w-full h-[36px]"
-          selectOptions={titleOptions}
-          value=""
-          onChange={handleChange}
-          onInput={handleInput}
-          ref={inputRef}
-        />
-        <InputCompOne
-          label="Marital Status"
-          name="marital"
-          parentInputClass="max-w-[224px] w-full"
-          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-          select
-          selectClass="w-full h-[36px]"
-          selectOptions={maritalStatusOptions}
-          value=""
-          onChange={handleChange}
-          onInput={handleInput}
-          ref={inputRef}
-        />
-        <InputCompOne
-          label="Direct Sales Agent ID"
-          name="agentId"
-          parentInputClass="max-w-[224px] w-full"
-          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-          select
-          selectClass="w-full h-[36px]"
-          selectOptions={[{ value: "", label: "Select" }]}
-          value=""
-          onChange={handleChange}
-          onInput={handleInput}
-          ref={inputRef}
-        />
-        <InputCompOne
-          label="BVN"
-          name="bvn"
-          parentInputClass="max-w-[224px] w-full"
-          labelSpan="( To get your BVN, dial *565*0# )"
-          labelSpanClass="text-[11px] text-[#7a7373]"
-          placeholder="Enter your BVN"
-          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
-          input
-          inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px]"
-          value=""
-          onChange={handleChange}
-          onInput={handleInput}
-          ref={inputRef}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default BasicInfo;
+  ]
+}

src/components/GetStarted/CreditAccount.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { InputCompOne } from "..";
+
+const CreditAccount: React.FC = () => {
+  return (
+    <>
+      <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+          CREDIT ACCOUNT ( Your account to receive your loan )
+        </p>
+      </div>
+      <InputCompOne
+        parentClass="max-w-[29.4375rem] w-full my-5 ml-5"
+        label="Disbursement Account Number "
+        name="disbursementAccountNumber"
+        labelSpan="( Your FCMB Account )"
+        labelSpanClass="text-[12px] text-[#5C2684] ml-1"
+        parentInputClass="w-full"
+        labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+        input
+        inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
+      />
+    </>
+  );
+};
+
+export default CreditAccount;

src/components/GetStarted/DebitAccount.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+import {useNavigate} from 'react-router-dom'
+import { Button, InputCompOne } from "..";
+import { RouteHandler } from "../../router/routes";
+
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+
+const initialValues = {
+  disburse_account: "",
+  bank_name: "",
+  account_name: "",
+  account_number: "",
+  checked: false
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  disburse_account: Yup.string()
+    .required("Required"),
+  bank_name: Yup.string()
+    .required("Required"),
+  account_name: Yup.string()
+    .required("Required"),
+  account_number: Yup.string()
+    .required("Required"),
+  checked: Yup.bool() // use bool instead of boolean
+  .oneOf([true], "You must accept the terms and conditions")
+});
+
+const DebitAccount: React.FC = () => {
+  const navigate = useNavigate()
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = (values:any) => {
+    console.log(values)
+    navigate(RouteHandler.letsGetStarted, {replace:true})
+  };
+
+  return (
+    <>
+      <div className="w-full rounded py-3 mb-9 bg-[#5C2684] px-5">
+        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+          CREDIT ACCOUNT ( Your account to receive your loan )
+        </p>
+      </div>
+      <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>           
+                <InputCompOne
+                  parentClass="max-w-[29.4375rem] w-full my-5 ml-5"
+                  label="Disbursement Account Number "
+                  name="disburse_account"
+                  labelSpan="( Your FCMB Account )"
+                  labelSpanClass="text-[12px] text-[#5C2684] ml-1"
+                  parentInputClass="w-full"
+                  labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                  input
+                  inputClass="w-full h-[36px] bg-[#EFEFEF] rounded-[6px]"
+                  value={props.values.disburse_account}
+                  onChange={props.handleChange}
+                  error={(props.errors.disburse_account && props.touched.disburse_account) ? props.errors.disburse_account : ''}
+                />
+
+                <div className="mt-9 flex flex-col gap-9">
+                  <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+                    <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+                      DEBIT ACCOUNT ( Your salary account for monthly repayment )
+                    </p>
+                  </div>
+                  <InputCompOne
+                    parentClass="max-w-[471px] w-full ml-5"
+                    label="Bank Name"
+                    name="bank_name"
+                    parentInputClass="w-full"
+                    labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                    input
+                    inputClass="w-full h-[36px] bg-[#EFEFEF] rounded-[6px]"
+                    value={props.values.bank_name}
+                    onChange={props.handleChange}
+                    error={(props.errors.bank_name && props.touched.bank_name) ? props.errors.bank_name : ''}
+                  />
+
+                  <div className="flex items-center gap-[59px]">
+                    <InputCompOne
+                      parentClass="max-w-[471px] w-full ml-5"
+                      label="Account Number"
+                      name="account_number"
+                      parentInputClass="w-full"
+                      labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                      input
+                      inputClass="w-full h-[36px] bg-[#EFEFEF] rounded-[6px]"
+                      value={props.values.account_number}
+                      onChange={props.handleChange}
+                      error={(props.errors.account_number && props.touched.account_number) ? props.errors.account_number : ''}
+                    />
+                    <InputCompOne
+                      parentClass="max-w-[471px] w-full ml-5"
+                      label="Account Name"
+                      name="account_name"
+                      parentInputClass="w-full"
+                      labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                      input
+                      inputClass="w-full h-[36px] bg-[#EFEFEF] rounded-[6px]"
+                      value={props.values.account_name}
+                      onChange={props.handleChange}
+                      error={(props.errors.account_name && props.touched.account_name) ? props.errors.account_name : ''}
+                    />
+                  </div>
+
+                  <div className="max-w-[578px] flex items-center">
+                    <input
+                      type="checkbox"
+                    //   checked={true}
+                   
+                      name='checked'
+                      onChange={props.handleChange}
+                      className="form-checkbox h-[25px] w-[25px] rounded-sm text-[#5c2684] "
+                      style={{ backgroundColor: "#5C2684" }}
+                    />
+                    <label className="ml-2 text-gray-700">
+                      I have read, understood and accept the{" "}
+                      <span className="text-[#4545CB]">applicant's attestation</span> and
+                      all the <span className="text-[#4545CB]">terms and conditions</span>{" "}
+                      for FCMB premium salary loan.
+                    </label>
+                    {props.errors.checked && props.touched.checked && <span className='text-[10px] text-red-500'>{props.errors.checked}</span>}
+                  </div>
+                  <Button
+                    className="my-8 max-w-[33.875rem] btn-R bg-[#5A2C82] w-full h-11"
+                    text="Apply"
+                    type="submit"
+                  />
+                </div>
+              </Form>
+            )}
+      </Formik>
+    </>
+  );
+};
+
+export default DebitAccount;

src/components/GetStarted/GetStarted.tsx

@@ -1,21 +1,23 @@
 import BasicInfo from "./BasicInfo";
+import YourAreAlmostThere from "./YourAreAlmostThere";
+import LoanAmountComp from "./LoanAmountComp";
+import ApplicantsAttestation from "./ApplicantsAttestation";
+
+const GetStarted = ({handleNextStep, step}:{handleNextStep:any, step:string|number|any}) => {
 
-const GetStarted = () => {
   return (
     <div className="w-full flex items-center justify-center">
       <div className="containerMode">
-        {/* Header */}
-        <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
-          Let’s Get You Started
-        </h1>
         {/* Main */}
         <main>
-          <div className="w-full rounded py-3 bg-[#5C2684] px-5">
-            <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
-              BASIC INFORMATION
-            </p>
-          </div>
-          <BasicInfo />
+          {step === 2 && (
+            <BasicInfo
+              handleNextStep={handleNextStep}
+            />
+          )}
+          {step === 3 && <YourAreAlmostThere handleNextStep={handleNextStep} />}
+          {step === 4 && <LoanAmountComp handleNextStep={handleNextStep} />}
+          {step === 5 && <ApplicantsAttestation />}
         </main>
       </div>
     </div>

src/components/GetStarted/LoanAmountComp.tsx

@@ -0,0 +1,202 @@
+import { Button, InputCompOne } from "..";
+
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+
+const initialValues = {
+  monthly_salary: "",
+  loan_amount: "",
+  duration: 6
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  duration: Yup.number()
+    .required("Required"),
+  monthly_salary: Yup.string()
+    .required("Required")
+    .test("no-e", "Invalid", (value:any) => {
+      if (value && /^[0-9]*$/.test(value) == false) {
+        return false;
+      }
+      return true;
+    }),
+  loan_amount: Yup.string()
+    .required("Required")
+    .test("no-e", "Invalid", (value:any) => {
+      if (value && /^[0-9]*$/.test(value) == false) {
+        return false;
+      }
+      return true;
+    }),
+});
+
+// interface SliderProps {
+//   handleSliderChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+//   value: number;
+// }
+
+interface LoanAmountProps {
+  handleNextStep: any;
+}
+
+const LoanAmountComp: React.FC<LoanAmountProps> = ({ handleNextStep }) => {
+  // const [value, setValue] = React.useState(6);
+
+  // const handleSliderChange = (e: any) => {
+  //   setValue(e.target.value);
+  // };
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = (values:any) => {
+    console.log(values)
+    handleNextStep()
+  };
+
+  return (
+    <>
+      <div className="flex justify-between items-center w-full mt-8 mb-[2.8125rem]">
+        <h1 className="font-semibold text-[38px] text-[#5C2684] my-[8px]">
+          Loan Amount
+        </h1>
+        <div className="flex flex-col gap-[7px]">
+          <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
+            For more enquiries and support
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Call: 09099000000
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Email: fcmbloan@support.com
+          </p>
+        </div>
+      </div>
+      <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>           
+                <div className="flex flex-col gap-[45px] justify-center ml-[40px] mb-[40px]">
+                  <InputCompOne
+                    parentClass="max-w-[29.4375rem] w-full"
+                    label="Your Monthly Salary*"
+                    name="monthly_salary"
+                    parentInputClass="w-full"
+                    labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                    input
+                    inputClass="w-full h-[51px] bg-[#EFEFEF] rounded-[6px] placeholder:text-green-600 placeholder:font-bold px-4"
+                    placeholder="150,000"
+                    value={props.values.monthly_salary}
+                    onChange={props.handleChange}
+                    error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
+                  />
+
+                  <div className="w-full border-[.1875rem] rounded-xl border-black min-h-[884px] py-4 px-8 max-w-[784px]">
+                    <p className="leading-[22px] tracking-[3%] text-[#5C2684] w-[729px] mb-[2.625rem]">
+                      The maximum amount you can apply for on this offer is based on the
+                      information you shared with us in your loan application. We have
+                      made this offer to suit your monthly remuneration and to enable you
+                      pay your loan on-time
+                    </p>
+                    <InputCompOne
+                      parentClass="max-w-[45.8125rem] w-full mb-3"
+                      label="How much do you want to apply for?"
+                      name="loan_amount"
+                      parentInputClass="w-full"
+                      labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                      input
+                      inputClass="w-full h-[51px] bg-[#EFEFEF] rounded-[6px] placeholder:text-green-600 placeholder:font-bold px-9"
+                      placeholder="350,000"
+                      value={props.values.loan_amount}
+                      onChange={props.handleChange}
+                      error={(props.errors.loan_amount && props.touched.loan_amount) ? props.errors.loan_amount : ''}
+                    />
+                    <div className="flex items-center justify-between w-full">
+                      <div className=" h-[68px] flex flex-col py-1 px-[13px] shadow-md text-[#5C2684]">
+                        <span>Minimum Offer:</span>
+                        <p>
+                          <b>N</b>100,000
+                        </p>
+                      </div>
+
+                      <div className="h-[68px] flex flex-col py-1 px-[13px] shadow-md text-[#5C2684]">
+                        <span>Maximum Offer:</span>
+                        <p>
+                          <b>N</b>500,000
+                        </p>
+                      </div>
+                    </div>
+
+                    <>
+                      <div className="flex flex-col items-start mt-11 mb-16">
+                        <p className="text-lg font-semibold">For how many months? <span className='text-[10px] text-red-500'>{(props.errors.duration && props.touched.duration) ? props.errors.duration : ''}</span></p>
+                        <div className="w-full">
+                          <input
+                            type="range"
+                            min="6"
+                            max="24"
+                            value={props.values.duration}
+                            onChange={props.handleChange}
+                            className="slider w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"
+                            style={{
+                              background: `linear-gradient(90deg, #6B21A8 ${
+                                ((props.values.duration - 6) / 18) * 100
+                              }%, #D1D5DB ${((props.values.duration - 6) / 18) * 100}%)`,
+                            }}
+                          />
+                        </div>
+                        <div className="mt-4 text-lg font-semibold text-gray-700 w-full flex items-center text-center justify-center">
+                          {props.values.duration} months
+                        </div>
+                      </div>
+                    </>
+
+                    <div className="w-full flex items-center justify-center flex-col">
+                      <div className="w-[279px] h-[130px] mb-[76px] flex items-center justify-center flex-col">
+                        <p className="text-[#FBB700]">Your Monthly Repayment</p>
+                        <p>N</p>
+                      </div>
+                      <Button
+                        className="max-w-[462px] w-full bg-[#5C2684] rounded h-[2.75rem]"
+                        text="Submit"
+                        type='submit'
+                      />
+                    </div>
+                  </div>
+                </div>
+              </Form>
+            )}
+      </Formik>
+    </>
+  );
+};
+
+export default LoanAmountComp;
+
+// const Slider: React.FC<SliderProps> = ({ handleSliderChange, value }) => {
+//   return (
+//     <div className="flex flex-col items-start mt-11 mb-16">
+//       <p className="text-lg font-semibold">For how many months?</p>
+//       <div className="w-full">
+//         <input
+//           type="range"
+//           min="6"
+//           max="24"
+//           value={value}
+//           onChange={handleSliderChange}
+//           className="slider w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"
+//           style={{
+//             background: `linear-gradient(90deg, #6B21A8 ${
+//               ((value - 6) / 18) * 100
+//             }%, #D1D5DB ${((value - 6) / 18) * 100}%)`,
+//           }}
+//         />
+//       </div>
+//       <div className="mt-4 text-lg font-semibold text-gray-700 w-full flex items-center text-center justify-center">
+//         {value} months
+//       </div>
+//     </div>
+//   );
+// };

src/components/GetStarted/YourAreAlmostThere.tsx

@@ -0,0 +1,402 @@
+import React from "react";
+import { Button, InputCompOne } from "..";
+
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+
+const initialValues = {
+  job_title: "",
+  employer_name: "",
+  employer_email:"",
+  date_of_resumption: "",
+  employee_id: "",
+  annual_income: "",
+  monthly_salary: "",
+  salary_payment_date: "",
+  ref_name: "",
+  ref_email: "",
+  ref_number: "",
+  ref_relationship: "",
+  ref_bvn: "",
+  ref_two_name: "",
+  ref_two_email: "",
+  ref_two_number: "",
+  ref_two_relationship: "",
+  ref_two_bvn: "",
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  job_title: Yup.string()
+    .required("Required"),
+  employer_name: Yup.string()
+    .required("Required"),
+  date_of_resumption: Yup.string()
+    .required("Required"),
+  employer_email: Yup.string()
+    .email("Invalid")
+    .required("Required"),
+  annual_income: Yup.string()
+    .required("Required")
+    .test("no-e", "Invalid", (value:any) => {
+      if (value && /^[0-9]*$/.test(value) == false) {
+        return false;
+      }
+      return true;
+    }),
+  monthly_salary: Yup.string()
+    .required("Required")
+    .test("no-e", "Invalid", (value:any) => {
+      if (value && /^[0-9]*$/.test(value) == false) {
+        return false;
+      }
+      return true;
+    }),
+  salary_payment_date: Yup.string()
+    .required("Required"),
+  employee_id: Yup.string()
+    .required("Required"),
+    ref_name: Yup.string()
+    .required("Required"),
+  ref_email: Yup.string()
+    .email("Invalid")
+    .required("Required"),
+  ref_number: Yup.string()
+    .required("Required"),
+  ref_relationship: Yup.string()
+    .required("Required"),
+  ref_bvn: Yup.string()
+    .required("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"),
+  ref_two_name: Yup.string()
+    .required("Required"),
+  ref_two_email: Yup.string()
+    .email("Invalid")
+    .required("Required"),
+  ref_two_number: Yup.string()
+    .required("Required"),
+  ref_two_relationship: Yup.string()
+    .required("Required"),
+  ref_two_bvn: Yup.string()
+    .required("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"),
+});
+
+interface YourAreAlmostThereProps {
+  handleNextStep: any;
+}
+
+const YourAreAlmostThere: React.FC<YourAreAlmostThereProps> = ({ handleNextStep }) => {
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = (values:any) => {
+    console.log(values)
+    handleNextStep()
+  };
+
+  return (
+    <>
+      <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
+        You’re almost there
+      </h1>
+      <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>           
+                <div className="flex flex-col gap-6">
+                  <>
+                    <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+                      <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+                        EMPLOYMENT DETAILS
+                      </p>
+                    </div>
+
+                    <div className="flex flex-col gap-4">
+                      <InputCompOne
+                        parentClass="max-w-[17.9375rem] w-full"
+                        label="Job Title"
+                        name="job_title"
+                        parentInputClass="w-full"
+                        labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                        input
+                        inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                        value={props.values.job_title}
+                        onChange={props.handleChange}
+                        error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
+                      />
+                      <div className="flex items-center gap-[3.6875rem]">
+                        <InputCompOne
+                          parentClass="max-w-[23.1875rem] w-full"
+                          label="Employer’s Name"
+                          name="employer_name"
+                          parentInputClass="w-full"
+                          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                          input
+                          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                          value={props.values.employer_name}
+                          onChange={props.handleChange}
+                          error={(props.errors.employer_name && props.touched.employer_name) ? props.errors.employer_name : ''}
+                        />
+                        <InputCompOne
+                          parentClass="max-w-[23.1875rem] w-full"
+                          label="Employer’s Official Email"
+                          name="employer_email"
+                          parentInputClass="w-full"
+                          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                          input
+                          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                          value={props.values.employer_email}
+                          onChange={props.handleChange}
+                          error={(props.errors.employer_email && props.touched.employer_email) ? props.errors.employer_email : ''}
+                        />
+                      </div>
+                      <div className="flex items-center gap-[9rem]">
+                        <InputCompOne
+                          parentClass="max-w-[17.9375rem] w-full"
+                          label="Resumption Date"
+                          name="date_of_resumption"
+                          parentInputClass="w-full"
+                          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                          input
+                          inputType='date'
+                          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                          value={props.values.date_of_resumption}
+                          onChange={props.handleChange}
+                          error={(props.errors.date_of_resumption && props.touched.date_of_resumption) ? props.errors.date_of_resumption : ''}
+                        />
+                        <InputCompOne
+                          parentClass="max-w-[17.9375rem] w-full"
+                          label="Employee ID."
+                          name="employee_id"
+                          labelSpan="Upload your work ID"
+                          labelSpanClass="text-[11px] text-[#7a7373]"
+                          parentInputClass="w-full"
+                          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                          input
+                          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                          value={props.values.employee_id}
+                          onChange={props.handleChange}
+                          error={(props.errors.employee_id && props.touched.employee_id) ? props.errors.employee_id : ''}
+                        />
+                      </div>
+                      <div className="flex items-center gap-[3.6875rem]">
+                        <InputCompOne
+                          parentClass="max-w-[23.1875rem] w-full"
+                          label="Salary ( Gross annual income )"
+                          name="annual_income"
+                          parentInputClass="w-full"
+                          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                          input
+                          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                          value={props.values.annual_income}
+                          onChange={props.handleChange}
+                          error={(props.errors.annual_income && props.touched.annual_income) ? props.errors.annual_income : ''}
+                        />
+                        <InputCompOne
+                          parentClass="max-w-[23.1875rem] w-full"
+                          label="Salary ( Net monthly Income )"
+                          name="monthly_salary"
+                          parentInputClass="w-full"
+                          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                          input
+                          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                          value={props.values.monthly_salary}
+                          onChange={props.handleChange}
+                          error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
+                        />
+                      </div>
+                      <InputCompOne
+                        parentClass="max-w-[20.3125rem]"
+                        label="Salary Payment Date"
+                        name="salary_payment_date"
+                        parentInputClass="w-full"
+                        labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                        input
+                        inputType='date'
+                        inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                        value={props.values.salary_payment_date}
+                        onChange={props.handleChange}
+                        error={(props.errors.salary_payment_date && props.touched.salary_payment_date) ? props.errors.salary_payment_date : ''}
+                      />
+                    </div>
+                  </>
+                  
+                  <>
+                    <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+                      <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+                        REFERENCE DETAILS ( Must be 18 years and above )
+                      </p>
+                    </div>
+                    <div className="">
+                      <div className="flex flex-col gap-[3.4375rem]">
+                        <div className="flex flex-col gap-4">
+                          <div className="flex items-center gap-[6.5625rem]">
+                            <InputCompOne
+                              parentClass="max-w-[20.3125rem] w-full"
+                              label="Name"
+                              name="ref_name"
+                              labelSpan="1st reference"
+                              labelSpanClass="text-[12px] text-[#5C2684] ml-1"
+                              parentInputClass="w-full"
+                              labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                              input
+                              inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+                              value={props.values.ref_name}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_name && props.touched.ref_name) ? props.errors.ref_name : ''}
+                            />
+                            <InputCompOne
+                              parentClass="max-w-[20.3125rem] w-full"
+                              label="Relationship with He/She"
+                              name="ref_relationship"
+                              parentInputClass="w-full"
+                              labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                              input
+                              inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+                              value={props.values.ref_relationship}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_relationship && props.touched.ref_relationship) ? props.errors.ref_relationship : ''}
+                            />
+                          </div>
+                          <div className="flex items-center gap-[6.5625rem]">
+                            <InputCompOne
+                              parentClass="max-w-[20.3125rem] w-full"
+                              label="Phone Number"
+                              name="ref_number"
+                              parentInputClass="w-full"
+                              labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                              input
+                              inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                              value={props.values.ref_number}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_number && props.touched.ref_number) ? props.errors.ref_number : ''}
+                            />
+                            <InputCompOne
+                              parentClass="max-w-[20.3125rem] w-full"
+                              label="Email Address"
+                              name="ref_email"
+                              parentInputClass="w-full"
+                              labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                              input
+                              inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                              value={props.values.ref_email}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_email && props.touched.ref_email) ? props.errors.ref_email : ''}
+                            />
+                          </div>
+                          <InputCompOne
+                            parentClass="max-w-[20.3125rem] w-full"
+                            label="BVN"
+                            name="ref_bvn"
+                            parentInputClass="w-full"
+                            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                            input
+                            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                            value={props.values.ref_bvn}
+                            onChange={props.handleChange}
+                            error={(props.errors.ref_bvn && props.touched.ref_bvn) ? props.errors.ref_bvn : ''}
+                          />
+                        </div>
+                        <div className="flex flex-col gap-4">
+                          <div className="flex items-center gap-[6.5625rem]">
+                            <InputCompOne
+                              parentClass="max-w-[20.3125rem] w-full"
+                              label="Name"
+                              name="ref_two_name"
+                              labelSpan="2nd reference"
+                              labelSpanClass="text-[12px] text-[#5C2684] ml-[4px]"
+                              parentInputClass="w-full"
+                              labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                              input
+                              inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                              value={props.values.ref_two_name}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_two_name && props.touched.ref_two_name) ? props.errors.ref_two_name : ''}
+                            />
+                            <InputCompOne
+                              parentClass="max-w-[20.3125rem] w-full"
+                              label="Relationship with He/She"
+                              name="ref_two_relationship"
+                              parentInputClass="w-full"
+                              labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                              input
+                              inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                              value={props.values.ref_two_relationship}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_two_relationship && props.touched.ref_two_relationship) ? props.errors.ref_two_relationship : ''}
+                            />
+                          </div>
+                          <div className="flex items-center gap-[6.5625rem]">
+                            <InputCompOne
+                              parentClass="max-w-[20.3125rem] w-full"
+                              label="Phone Number"
+                              name="ref_two_number"
+                              parentInputClass="w-full"
+                              labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                              input
+                              inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                              value={props.values.ref_two_number}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_two_number && props.touched.ref_two_number) ? props.errors.ref_two_number : ''}
+                            />
+                            <InputCompOne
+                              parentClass="max-w-[20.3125rem] w-full"
+                              label="Email Address"
+                              name="ref_two_email"
+                              parentInputClass="w-full"
+                              labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                              input
+                              inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                              value={props.values.ref_two_email}
+                              onChange={props.handleChange}
+                              error={(props.errors.ref_two_email && props.touched.ref_two_email) ? props.errors.ref_two_email : ''}
+                            />
+                          </div>
+                          <InputCompOne
+                            parentClass="max-w-[20.3125rem] w-full"
+                            label="BVN"
+                            name="ref_two_bvn"
+                            parentInputClass="w-full"
+                            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                            input
+                            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
+                            value={props.values.ref_two_bvn}
+                            onChange={props.handleChange}
+                            error={(props.errors.ref_two_bvn && props.touched.ref_two_bvn) ? props.errors.ref_two_bvn : ''}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </>
+
+                  <Button
+                    className="my-8 max-w-[20.3125rem] btn-R bg-[#5A2C82]"
+                    text="Continue"
+                    type="submit"
+                  />
+                </div>
+              </Form>
+            )}
+      </Formik>
+    </>
+  );
+};
+
+export default YourAreAlmostThere;

src/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import { _lowerMenuItems } from "../../utils/data";
 import Sidebar from "./Sidebar";
 import { Link } from "react-router-dom";
 import HeaderMenuItem from "./HeaderMenuItem";
+import { RouteHandler } from "../../router/routes";
 
 export type LowerMenuItem = {
   name: string;
@@ -50,20 +51,25 @@ const Header: React.FC<HiddenMenuItems> = ({
         {!hideMenu && (
           <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">
-              {["Open An Account", "Internet Banking", "Contact Us"].map(
-                (text: string) => (
-                  <li key={text} className="hidden sm:flex">
-                    <a href="#">
-                      <Button
-                        className={
-                          text === "Open An Account" ? "btn-active" : ""
-                        }
-                        text={text}
-                      />
-                    </a>
-                  </li>
-                )
-              )}
+              {[
+                { text: "Open An Account", href: RouteHandler.letsGetStarted },
+                {
+                  text: "Internet Banking",
+                  href: RouteHandler.businessBanking,
+                },
+                { text: "Contact Us", href: RouteHandler.cooperateBanking },
+              ].map((item: { text: string; href: string }) => (
+                <li key={item.text} className="hidden sm:flex">
+                  <a href={item.href}>
+                    <Button
+                      className={
+                        item.text === "Open An Account" ? "btn-active" : ""
+                      }
+                      text={item.text}
+                    />
+                  </a>
+                </li>
+              ))}
               <li className="w-full lg:w-fit">
                 <SearchInput
                   onChange={handleSearchChange}
@@ -71,6 +77,7 @@ const Header: React.FC<HiddenMenuItems> = ({
                 />
               </li>
             </ul>
+
             <div className="flex lg:hidden">
               <svg
                 xmlns="http://www.w3.org/2000/svg"

src/components/Home/Hero/PersonalHero.tsx

@@ -7,7 +7,7 @@ interface PersonalHeroProps {
   body?: string;
   buttonLink?: string;
   buttonText?: string;
-};
+}
 const PersonalHero: React.FC<PersonalHeroProps> = ({
   heading,
   body,
@@ -16,15 +16,17 @@ const PersonalHero: React.FC<PersonalHeroProps> = ({
 }) => {
   return (
     <div
-      className={`w-full relative mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.personalHeroBg}`}
+      className={`w-full max-[28.125rem] relative mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.personalHeroBg}`}
     >
-      <div className="containerMode flex justify-between gap-1 xl:gap-8">
+      <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
         <h1 className="max-w-[32.9375rem] font-extrabold text-[1.3rem] leading-[2.5rem] sm:text-[3.625rem] sm:leading-[4.3869rem] text-[#5C2684] cursor-default">
           {heading}
         </h1>
-        <p>{body}</p>
+        <p className="p-[.3125rem] pr-5 font-medium table w-[25.375rem]">{body}</p>
         <Link to={buttonLink}>
-          <button>{buttonText}</button>
+          <button className="bg-[#A6368C] text-white text-[.9375rem] w-[10.9375rem] py-[.4375rem] px-[.625rem]">
+            {buttonText} &nbsp;
+          </button>
         </Link>
       </div>
     </div>

src/components/Home/Requirements/FeatureText.tsx

@@ -27,7 +27,7 @@ const FeatureText = () => {
         </ul>
       </div>
       <Link
-        to={RouteHandler.getStarted}
+        to={RouteHandler.letsGetStarted}
         className="text-[#5C2684] mt-[1.5625rem] w-fit"
       >
         *** <span className="hover:underline">Click here to apply</span>

src/components/Icons/Icons.tsx

@@ -1,45 +1,121 @@
-type Props = {
-    name:string,
-    fillColor?:string
-}
+import { FaCaretDown, FaCaretRight } from "react-icons/fa";
 
-export default function Icons({name, fillColor}:Props) {
+import dashIcon from "../../assets/images/dashboard/dashDefault.svg";
+type Props = {
+  name: string;
+  fillColor?: string;
+  className?:string;
+};
+
+export default function Icons({ name, fillColor, className }: Props) {
   return (
     <>
-    {name == 'home' ?
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M14.1667 14.9875V19.9875H17.5C18.8807 19.9875 20 18.8682 20 17.4875V9.88673C20.0002 9.4538 19.832 9.03778 19.5308 8.72673L12.4492 1.07087C11.1996 -0.281086 9.09074 -0.364094 7.73879 0.885437C7.67457 0.944812 7.6127 1.00665 7.55336 1.07087L0.48418 8.72423C0.173945 9.03657 -0.000117128 9.45899 5.9134e-08 9.89923V17.4875C5.9134e-08 18.8682 1.1193 19.9875 2.5 19.9875H5.83332V14.9875C5.84891 12.7152 7.68355 10.8596 9.89867 10.8061C12.1879 10.7509 14.1492 12.6381 14.1667 14.9875Z" fill={fillColor ? fillColor : '#5C2684'}/>
-        <path d="M10 12.4875C8.6193 12.4875 7.5 13.6068 7.5 14.9875V19.9875H12.5V14.9875C12.5 13.6068 11.3807 12.4875 10 12.4875Z" fill={fillColor ? fillColor : '#5C2684'}/>
-    </svg>
-    :name == 'profile'?
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z" fill={fillColor ? fillColor : '#5C2684'}/>
-        <path d="M10 11.6667C5.85977 11.6713 2.50461 15.0265 2.5 19.1667C2.5 19.6269 2.87309 20 3.33332 20H16.6666C17.1269 20 17.5 19.6269 17.5 19.1667C17.4954 15.0265 14.1402 11.6713 10 11.6667Z" fill={fillColor ? fillColor : '#5C2684'}/>
-    </svg>
-    :name == 'verification'?
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19.728 6.8281L18.1812 5.28145C17.814 4.91432 17.2203 4.91432 16.857 5.28145L7.50177 14.6356L3.15031 10.2807C2.78313 9.91359 2.1894 9.91359 1.82613 10.2807L0.275384 11.8313C-0.0917946 12.1984 -0.0917946 12.7921 0.275384 13.1592L6.83772 19.7246C7.2049 20.0918 7.79864 20.0918 8.16191 19.7246L19.7241 8.15603C20.0913 7.78499 20.0913 7.19133 19.728 6.8281ZM7.06037 10.9681C7.30256 11.2142 7.70098 11.2142 7.94316 10.9681L16.068 2.8365C16.3101 2.59044 16.3101 2.19597 16.068 1.95382L14.3024 0.184543C14.0602 -0.0615144 13.6618 -0.0615144 13.4196 0.184543L7.50177 6.10164L5.33776 3.93399C5.09558 3.68794 4.69715 3.68794 4.45497 3.93399L2.68548 5.70327C2.4433 5.94932 2.4433 6.3438 2.68548 6.58595L7.06037 10.9681Z" fill={fillColor ? fillColor : '#5C2684'}/>
-    </svg>
-    :name == 'payments'?
-    <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 14.2857C0 15.2321 0.746528 16 1.66667 16H18.3333C19.2535 16 20 15.2321 20 14.2857V8H0V14.2857ZM6.66667 11.8571C6.66667 11.6214 6.85417 11.4286 7.08333 11.4286H11.8056C12.0347 11.4286 12.2222 11.6214 12.2222 11.8571V13.2857C12.2222 13.5214 12.0347 13.7143 11.8056 13.7143H7.08333C6.85417 13.7143 6.66667 13.5214 6.66667 13.2857V11.8571ZM2.22222 11.8571C2.22222 11.6214 2.40972 11.4286 2.63889 11.4286H5.13889C5.36806 11.4286 5.55556 11.6214 5.55556 11.8571V13.2857C5.55556 13.5214 5.36806 13.7143 5.13889 13.7143H2.63889C2.40972 13.7143 2.22222 13.5214 2.22222 13.2857V11.8571ZM20 1.71429V3.42857H0V1.71429C0 0.767857 0.746528 0 1.66667 0H18.3333C19.2535 0 20 0.767857 20 1.71429Z" fill={fillColor ? fillColor : '#5C2684'}/>
-    </svg>
-    :name == 'legals'?
-    <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8 10.5H7.99937C7.99937 9.99438 8.04125 10.2272 5.34156 4.82781C4.79 3.725 3.21062 3.72281 2.65812 4.82781C-0.0643752 10.2734 0.000625 10.0103 0.000625 10.5H0C0 11.8806 1.79094 13 4 13C6.20906 13 8 11.8806 8 10.5ZM4 5.5L6.25 10H1.75L4 5.5ZM19.9994 10.5C19.9994 9.99438 20.0413 10.2272 17.3416 4.82781C16.79 3.725 15.2106 3.72281 14.6581 4.82781C11.9356 10.2734 12.0006 10.0103 12.0006 10.5H12C12 11.8806 13.7909 13 16 13C18.2091 13 20 11.8806 20 10.5H19.9994ZM13.75 10L16 5.5L18.25 10H13.75ZM16.5 14H11V4.78906C11.7347 4.4675 12.2863 3.80531 12.4497 3H16.5C16.7763 3 17 2.77625 17 2.5V1.5C17 1.22375 16.7763 1 16.5 1H11.9888C11.5325 0.39625 10.8153 0 10 0C9.18469 0 8.4675 0.39625 8.01125 1H3.5C3.22375 1 3 1.22375 3 1.5V2.5C3 2.77625 3.22375 3 3.5 3H7.55031C7.71375 3.805 8.265 4.4675 9 4.78906V14H3.5C3.22375 14 3 14.2238 3 14.5V15.5C3 15.7762 3.22375 16 3.5 16H16.5C16.7763 16 17 15.7762 17 15.5V14.5C17 14.2238 16.7763 14 16.5 14Z" fill={fillColor ? fillColor : '#5C2684'}/>
-    </svg>
-    :name == 'arrow'?
-    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6.3072 1.05822L7.03885 0.34847C7.34865 0.0479466 7.8496 0.0479466 8.15611 0.34847L14.563 6.56035C14.8728 6.86087 14.8728 7.34682 14.563 7.64415L8.15611 13.8592C7.84631 14.1597 7.34536 14.1597 7.03885 13.8592L6.3072 13.1495C5.9941 12.8458 6.00069 12.3502 6.32038 12.0529L10.2917 8.38267H0.819787C0.381453 8.38267 0.0288086 8.04058 0.0288086 7.61538V6.59232C0.0288086 6.16711 0.381453 5.82503 0.819787 5.82503H10.2917L6.32038 2.15481C5.9974 1.85748 5.99081 1.36194 6.3072 1.05822Z" fill={fillColor ? fillColor : '#FBB700'}/>
-    </svg>
-    :name == 'greater-than'?
-    <svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9.74365 8.64502L3.10303 15.2856C2.64404 15.7446 1.90186 15.7446 1.44775 15.2856L0.344238 14.1821C-0.114746 13.7231 -0.114746 12.981 0.344238 12.5269L5.05127 7.81982L0.344238 3.11279C-0.114746 2.65381 -0.114746 1.91162 0.344238 1.45752L1.44287 0.344238C1.90186 -0.114746 2.64404 -0.114746 3.09814 0.344238L9.73877 6.98486C10.2026 7.44385 10.2026 8.18604 9.74365 8.64502Z" fill={fillColor ? fillColor : '#FFF'}/>
-    </svg>
-    :
-    null
-    }
+      {name == "home" ? (
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14.1667 14.9875V19.9875H17.5C18.8807 19.9875 20 18.8682 20 17.4875V9.88673C20.0002 9.4538 19.832 9.03778 19.5308 8.72673L12.4492 1.07087C11.1996 -0.281086 9.09074 -0.364094 7.73879 0.885437C7.67457 0.944812 7.6127 1.00665 7.55336 1.07087L0.48418 8.72423C0.173945 9.03657 -0.000117128 9.45899 5.9134e-08 9.89923V17.4875C5.9134e-08 18.8682 1.1193 19.9875 2.5 19.9875H5.83332V14.9875C5.84891 12.7152 7.68355 10.8596 9.89867 10.8061C12.1879 10.7509 14.1492 12.6381 14.1667 14.9875Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+          <path
+            d="M10 12.4875C8.6193 12.4875 7.5 13.6068 7.5 14.9875V19.9875H12.5V14.9875C12.5 13.6068 11.3807 12.4875 10 12.4875Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+        </svg>
+      ) : name == "profile" ? (
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+          <path
+            d="M10 11.6667C5.85977 11.6713 2.50461 15.0265 2.5 19.1667C2.5 19.6269 2.87309 20 3.33332 20H16.6666C17.1269 20 17.5 19.6269 17.5 19.1667C17.4954 15.0265 14.1402 11.6713 10 11.6667Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+        </svg>
+      ) : name == "verification" ? (
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M19.728 6.8281L18.1812 5.28145C17.814 4.91432 17.2203 4.91432 16.857 5.28145L7.50177 14.6356L3.15031 10.2807C2.78313 9.91359 2.1894 9.91359 1.82613 10.2807L0.275384 11.8313C-0.0917946 12.1984 -0.0917946 12.7921 0.275384 13.1592L6.83772 19.7246C7.2049 20.0918 7.79864 20.0918 8.16191 19.7246L19.7241 8.15603C20.0913 7.78499 20.0913 7.19133 19.728 6.8281ZM7.06037 10.9681C7.30256 11.2142 7.70098 11.2142 7.94316 10.9681L16.068 2.8365C16.3101 2.59044 16.3101 2.19597 16.068 1.95382L14.3024 0.184543C14.0602 -0.0615144 13.6618 -0.0615144 13.4196 0.184543L7.50177 6.10164L5.33776 3.93399C5.09558 3.68794 4.69715 3.68794 4.45497 3.93399L2.68548 5.70327C2.4433 5.94932 2.4433 6.3438 2.68548 6.58595L7.06037 10.9681Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+        </svg>
+      ) : name == "payments" ? (
+        <svg
+          width="20"
+          height="16"
+          viewBox="0 0 20 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 14.2857C0 15.2321 0.746528 16 1.66667 16H18.3333C19.2535 16 20 15.2321 20 14.2857V8H0V14.2857ZM6.66667 11.8571C6.66667 11.6214 6.85417 11.4286 7.08333 11.4286H11.8056C12.0347 11.4286 12.2222 11.6214 12.2222 11.8571V13.2857C12.2222 13.5214 12.0347 13.7143 11.8056 13.7143H7.08333C6.85417 13.7143 6.66667 13.5214 6.66667 13.2857V11.8571ZM2.22222 11.8571C2.22222 11.6214 2.40972 11.4286 2.63889 11.4286H5.13889C5.36806 11.4286 5.55556 11.6214 5.55556 11.8571V13.2857C5.55556 13.5214 5.36806 13.7143 5.13889 13.7143H2.63889C2.40972 13.7143 2.22222 13.5214 2.22222 13.2857V11.8571ZM20 1.71429V3.42857H0V1.71429C0 0.767857 0.746528 0 1.66667 0H18.3333C19.2535 0 20 0.767857 20 1.71429Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+        </svg>
+      ) : name == "legals" ? (
+        <svg
+          width="20"
+          height="16"
+          viewBox="0 0 20 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 10.5H7.99937C7.99937 9.99438 8.04125 10.2272 5.34156 4.82781C4.79 3.725 3.21062 3.72281 2.65812 4.82781C-0.0643752 10.2734 0.000625 10.0103 0.000625 10.5H0C0 11.8806 1.79094 13 4 13C6.20906 13 8 11.8806 8 10.5ZM4 5.5L6.25 10H1.75L4 5.5ZM19.9994 10.5C19.9994 9.99438 20.0413 10.2272 17.3416 4.82781C16.79 3.725 15.2106 3.72281 14.6581 4.82781C11.9356 10.2734 12.0006 10.0103 12.0006 10.5H12C12 11.8806 13.7909 13 16 13C18.2091 13 20 11.8806 20 10.5H19.9994ZM13.75 10L16 5.5L18.25 10H13.75ZM16.5 14H11V4.78906C11.7347 4.4675 12.2863 3.80531 12.4497 3H16.5C16.7763 3 17 2.77625 17 2.5V1.5C17 1.22375 16.7763 1 16.5 1H11.9888C11.5325 0.39625 10.8153 0 10 0C9.18469 0 8.4675 0.39625 8.01125 1H3.5C3.22375 1 3 1.22375 3 1.5V2.5C3 2.77625 3.22375 3 3.5 3H7.55031C7.71375 3.805 8.265 4.4675 9 4.78906V14H3.5C3.22375 14 3 14.2238 3 14.5V15.5C3 15.7762 3.22375 16 3.5 16H16.5C16.7763 16 17 15.7762 17 15.5V14.5C17 14.2238 16.7763 14 16.5 14Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+        </svg>
+      ) : name == "arrow" ? (
+        <svg
+          width="15"
+          height="15"
+          viewBox="0 0 15 15"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.3072 1.05822L7.03885 0.34847C7.34865 0.0479466 7.8496 0.0479466 8.15611 0.34847L14.563 6.56035C14.8728 6.86087 14.8728 7.34682 14.563 7.64415L8.15611 13.8592C7.84631 14.1597 7.34536 14.1597 7.03885 13.8592L6.3072 13.1495C5.9941 12.8458 6.00069 12.3502 6.32038 12.0529L10.2917 8.38267H0.819787C0.381453 8.38267 0.0288086 8.04058 0.0288086 7.61538V6.59232C0.0288086 6.16711 0.381453 5.82503 0.819787 5.82503H10.2917L6.32038 2.15481C5.9974 1.85748 5.99081 1.36194 6.3072 1.05822Z"
+            fill={fillColor ? fillColor : "#FBB700"}
+          />
+        </svg>
+      ) : name == "greater-than" ? (
+        <svg
+          width="11"
+          height="16"
+          viewBox="0 0 11 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.74365 8.64502L3.10303 15.2856C2.64404 15.7446 1.90186 15.7446 1.44775 15.2856L0.344238 14.1821C-0.114746 13.7231 -0.114746 12.981 0.344238 12.5269L5.05127 7.81982L0.344238 3.11279C-0.114746 2.65381 -0.114746 1.91162 0.344238 1.45752L1.44287 0.344238C1.90186 -0.114746 2.64404 -0.114746 3.09814 0.344238L9.73877 6.98486C10.2026 7.44385 10.2026 8.18604 9.74365 8.64502Z"
+            fill={fillColor ? fillColor : "#FFF"}
+          />
+        </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/InternetBanking/InternetBanking.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const InternetBanking: React.FC = () => {
+  return (
+    <div>InternetBanking</div>
+  )
+}
+
+export default InternetBanking

src/components/InternetBanking/index.ts

@@ -0,0 +1,3 @@
+import InternetBanking from "./InternetBanking";
+
+export { InternetBanking };

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -1,106 +1,259 @@
-import React from "react";
-import { InputCompOne } from "..";
+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 { 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'),
+  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'),
+  // .test("no-e", "must be 11 characters", (value:any) => {
+  //   if (value.length < 11) {
+  //     return false;
+  //   }
+  //   return true;
+  // })
+});
+
+// initial values for formik
+let initialValues = {
+  bvn: '',
+  otp: '',
+};
+
+type ValidBVN = {
+  verification_id: string;
+  valid: undefined | boolean;
+};
 
 const LetsGetStarted: React.FC = () => {
-  const [pinValues, setPinValues] = React.useState({
-    bvn: "",
-    otp: "",
+  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 [requestStatusOTP, setRequestStatusOTP] = React.useState<RequestStatus>(
+    { loading: false, status: undefined, message: '' }
+  );
+
+  const [bvnIsValid, setBvnIsValid] = React.useState<ValidBVN>({
+    verification_id: '',
+    valid: undefined,
   });
 
-  const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
-  const firstInputRef = React.useRef<HTMLInputElement>(null);
-  const secondInputRef = React.useRef<HTMLInputElement>(null);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let { name, value } = e.target as HTMLInputElement;
-
-    setPinValues((prev) => ({ ...prev, [name]: value }));
+  // 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 handleInput = (e: React.FormEvent<HTMLInputElement>) => {
-    let { name, value } = e.target as HTMLInputElement;
-
-    if (name === "bvn") {
-      const regex = /^[0-9]+$/;
-
-      if (regex.test(value)) {
-        if (value?.length == 10) {
-          setHideOTPComponent(false);
-          secondInputRef.current?.focus();
-        } else setHideOTPComponent(true);
-      } else {
-        console.log("object not found");
-      }
-    }
+  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) => {
+        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);
+      });
   };
 
-  console.log(secondInputRef)
-
   return (
-    <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>
-        <form className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
-          <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={pinValues.bvn}
-            onChange={handleChange}
-            onInput={handleInput}
-            ref={firstInputRef}
-            maxLength={10}
-          />
-          {!hideOTPComponent ? (
-            <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={pinValues.otp}
-              onChange={handleChange}
-              onInput={handleInput}
-              ref={secondInputRef}
-            />
-          ) : null}
-          <button
-            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={!pinValues.otp}
-          >
-            Enter
-          </button>
+    <Formik
+      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
+                    }
+                    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>
 
-          {hideOTPComponent ? (
-            <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>
-          )}
-        </form>
-      </div>
-    </div>
+                <p
+                  className={`p-2 ${
+                    !requestStatusOTP.status
+                      ? 'text-red-500'
+                      : 'text-emerald-500'
+                  }`}
+                >
+                  {requestStatusOTP.message}
+                </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>
+        </Form>
+      )}
+    </Formik>
   );
 };
 

src/components/index.ts

@@ -3,7 +3,7 @@ export * from "./Home";
 export * from "./GetStarted";
 export * from "./shared";
 export * from "./Footer";
-export * from "./DashboardLayout";
+// export * from "./DashboardLayout";
 export * from "./Icons";
 export * from "./Dashboard";
 export * from "./Cards";

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/Button.tsx

@@ -3,13 +3,21 @@ import React from "react";
 interface ButtonProps {
   text: string;
   className?: string;
-  onClick?: () => void;
+  type?: "button" | "submit" | "reset";
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-const Button: React.FC<ButtonProps> = ({ text, className }) => {
+const Button: React.FC<ButtonProps> = ({
+  text,
+  className,
+  onClick,
+  type = "button",
+}) => {
   return (
     <button
       className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}
+      onClick={onClick}
+      type={type}
     >
       {text}
     </button>

src/components/shared/InputCompOne.tsx

@@ -1,28 +1,30 @@
 import React, { forwardRef } from "react";
+import { Icons } from "../Icons";
 
 export interface InputCompOneProps {
-  label: string;
-  labelClass: string;
+  label?: string;
+  labelClass?: string;
   labelSpan?: string;
   labelSpanClass?: string;
+  floatLabel?: string;
   placeholder?: string;
-  value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onInput: (e: React.FormEvent<HTMLInputElement>) => void;
+  value?: string | any;
+  onChange?: (e:any) => any;
+  onInput?: (e:any) => any;
   name: string;
   tabIndex?: number;
   ref?: React.RefObject<HTMLInputElement>;
   selectValue?: string;
   input?: boolean;
   select?: boolean;
-  selectOptions?: { value: string; label: string }[];
+  selectOptions?: {loading:boolean, data:{ value: string; label: string }[]};
   inputType?: string;
   inputClass?: string;
   parentInputClass?: string;
   selectClass?: string;
-  parentSelectClass?: string;
   parentClass?: string;
   maxLength?: number;
+  error?: string;
 }
 
 const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
@@ -32,6 +34,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       labelClass,
       labelSpan,
       labelSpanClass,
+      floatLabel,
       placeholder,
       value,
       onChange,
@@ -39,29 +42,30 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       name,
       tabIndex,
       selectValue,
-      input = true,
+      input = false,
       select = false,
-      selectOptions = [],
+      selectOptions = {loading:false, data:[]},
       inputType = "text",
       inputClass,
       parentInputClass,
       selectClass,
-      parentSelectClass,
       parentClass,
       maxLength,
+      error,
     },
     forwardedRef
   ) => {
     return (
       <div className={parentClass}>
         {label && (
-          <label htmlFor="" className={labelClass}>
+          <label htmlFor={label ? label : floatLabel} className={`flex gap-2 items-center flex-wrap ${labelClass}`}>
             {label}
             {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
+            {error && label && <span className='text-[10px] text-red-500'>{error}</span>}
           </label>
         )}
         {input && (
-          <div className={parentInputClass}>
+          <div className={`relative ${parentInputClass}`}>
             <input
               type={inputType}
               placeholder={placeholder}
@@ -71,25 +75,60 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               name={name}
               tabIndex={tabIndex}
               ref={forwardedRef}
-              className={inputClass}
+              className={`px-4 ${floatLabel && 'peer pt-4 placeholder:text-transparent'} ${inputClass}`}
               maxLength={maxLength}
+              id={label ? label : floatLabel}
             />
+            {floatLabel &&
+              <label
+                htmlFor={label ? label : floatLabel}
+                className={`flex items-center gap-2 cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
+              >
+                {floatLabel}
+                {error && floatLabel && !label && <span className='text-[10px] text-red-500'>{error}</span>}
+              </label>
+            }
           </div>
         )}
         {select && (
-          <div className={parentSelectClass}>
+          <div className={`relative ${parentInputClass}`}>
             <select
               name={name}
-              id=""
+              id={label ? label : floatLabel}
               value={selectValue}
-              className={selectClass}
+              className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass}`}
+              onChange={onChange}
             >
-              {selectOptions.map(({ value, label }) => (
+              {selectOptions.loading ?
+              <option value=''>Loading</option>
+              : selectOptions.data.length ?
+                selectOptions.data.map(({ value, label }) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))
+              :
+              <option value=''>Not Found</option>
+              }
+              {/* {selectOptions.map(({ value, label }) => (
                 <option key={value} value={value}>
                   {label}
                 </option>
-              ))}
+              ))} */}
             </select>
+            {floatLabel &&
+              <label
+                htmlFor={label ? label : floatLabel}
+                className={`flex items-center gap-2 cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 transition-all duration-500`}
+              >
+                {floatLabel}
+                {error && floatLabel && !label && <span className='text-[10px] text-red-500'>{error}</span>}
+              </label>
+            }
+            {/* select custon arrow */}
+            <div className='absolute right-4 top-1/2 -translate-y-1/2'>
+              <Icons name='arrow-down' />
+            </div>
           </div>
         )}
       </div>

src/components/shared/Stepper.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface StepperProps {
+  step: number;
+}
+
+const Stepper: React.FC<StepperProps> = ({ step = 0 }) => {
+  //   const [activeStep, setActiveStep] = useState(step);
+
+  return (
+    <div className="flex justify-between items-center gap-5">
+      {[...Array(5)].map((_, index) => (
+        <div
+          key={index}
+          className={`w-[1.875rem] border-[.1875rem] rounded-sm ${(step === index
+            ? "border-[#E8B4FF]"
+            : "border-[#5C2684]")}`}
+          //   onClick={() => setActiveStep(index)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Stepper;

src/components/shared/index.ts

@@ -1,5 +1,6 @@
 import Button from "./Button";
 import InputCompOne from "./InputCompOne";
 import FloatLabelInput from "./FloatLabelInput";
+import Stepper from "./Stepper";
 
-export { Button, FloatLabelInput, InputCompOne };
+export { Button, FloatLabelInput, InputCompOne, Stepper };

src/core/apiRequest.ts

@@ -0,0 +1,43 @@
+import { postAuxEnd, getAuxEnd } from "./axiosCall";
+
+// FUNCTION TO START BVN VALIDATION
+export const validateBVN = (postData:any) => {
+    let reqData = {
+        ...postData
+    }
+    return postAuxEnd('/bvn', reqData)
+}
+
+
+// FUNCTION TO VERIFY OTP AND LOGIN
+export const verifyOTP = (postData:any) => {
+    let reqData = {
+        ...postData
+    }
+    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

@@ -0,0 +1,81 @@
+import axios from "axios";
+
+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(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

@@ -0,0 +1,27 @@
+export interface RequestStatus {
+    loading?:boolean
+    status?:boolean | undefined
+    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/index.css

@@ -14,9 +14,7 @@ body {
 
 @layer components {
   .containerMode {
-    @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px];
-  }
-  .dash-bg-image{
-    background: url('../src/assets/images/dashboard/bg_ellipse1.png') right top no-repeat, url('../src/assets/images/dashboard/bg_ellipse2.png') -8% bottom no-repeat;;
+    /* @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px]; */
+    @apply container mx-auto px-5 max-w-[1500px]
   }
 }

src/layouts/DashboardLayout/Aside.tsx

@@ -0,0 +1,182 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import Logo from "../../assets/icons/logo.svg";
+import { Icons } from "../../components";
+
+type Props = {
+  asideDisplay?: () => void;
+  logoutUser: () => void
+};
+
+export default function Aside({ asideDisplay, logoutUser }: Props) {
+  const { pathname } = useLocation();
+
+  const [openNestedLink, setOpenNestedLink] = useState<{ name: string | null }>(
+    { name: "" }
+  );
+
+  const handleOpenNestedLink = (e: any) => {
+    if (!e || !e.target) {
+      return setOpenNestedLink({ name: "" });
+    }
+    if (openNestedLink.name && openNestedLink.name == e.target.name) {
+      setOpenNestedLink({ name: "" });
+    } else {
+      setOpenNestedLink({ name: e.target.name });
+    }
+  };
+
+  return (
+    <div className="py-5 px-10 flex flex-col h-full bg-inherit">
+      <Link to="/">
+        <img src={Logo} alt="Logo" className="w-[72px] h-[63px]" />
+      </Link>
+      <div className="mt-10 h-full overflow-y-auto bg-inherit">
+        {asideLinks.map((link, index) => {
+          if (link.nestedLink?.length) {
+            let allNestedLinks = link.nestedLink.map((item) => item.link);
+            return (
+              <div
+                key={index}
+                className="w-full relative bg-inherit overflow-hidden"
+              >
+                <button
+                  name={link.name}
+                  onClick={(e) => handleOpenNestedLink(e)}
+                  className={`py-2 pl-2 text-left relative w-full overflow-hidden rounded-lg flex justify-between items-center z-10 bg-inherit ${
+                    allNestedLinks.includes(pathname)
+                      ? " text-[#5C2684]"
+                      : " text-[#585858]"
+                  }`}
+                >
+                  {link.name}
+                  {/* <div className={`mr-2 ${openNestedLink.name == link.name ? '-rotate-90' : 'rotate-90'} transition-all duration-300`}>
+                    <Icons
+                      name='greater-than' 
+                      fillColor={`${openNestedLink.name == link.name ? '#5C2684' : '#585858'}`} 
+                    />
+                  </div> */}
+                </button>
+                <div
+                  className={`transition-all duration-300 w-full z-1 ${
+                    openNestedLink.name == link.name
+                      ? "relative top-0"
+                      : "absolute -top-[500px]"
+                  }`}
+                >
+                  {link.nestedLink.map((nextLink, index) => (
+                    <Link
+                      onClick={() => {
+                        asideDisplay && asideDisplay();
+                      }}
+                      key={index}
+                      to={nextLink.link ? nextLink.link : "#"}
+                      className={`w-full my-1 flex items-center gap-2 py-2 pl-5 text-base font-medium ${
+                        pathname == nextLink.link
+                          ? " text-[#5C2684]"
+                          : "text-[#585858]"
+                      }`}
+                    >
+                      <Icons
+                        name={nextLink.icon}
+                        fillColor={`${
+                          pathname == nextLink.link ? "#5C2684" : "#585858"
+                        }`}
+                      />
+                      {nextLink.name}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            );
+          } else {
+            return (
+              <Link
+                onClick={() => {
+                  asideDisplay && asideDisplay();
+                }}
+                key={index}
+                to={link.link ? link.link : "#"}
+                className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium ${
+                  pathname == link.link ? "text-[#5C2684]" : "text-[#585858]"
+                }`}
+              >
+                <Icons
+                  name={link.icon}
+                  fillColor={`${pathname == link.link ? "#5C2684" : "#585858"}`}
+                />
+                {link.name}
+              </Link>
+            );
+          }
+        })}
+      </div>
+      <div className="w-full flex justify-center items-center flex-col gap-3">
+        <button
+          className="py-3 px-6 bg-red-100 text-red-500 font-medium rounded-md w-full"
+          onClick={() => logoutUser()}
+        >
+          Log out
+        </button>
+
+      
+        <div className="flex flex-col gap-[.4375rem] text-[.75rem]">
+          <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
+            For more enquiries and support
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Call: 09099000000
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Email: fcmbloan@support.com
+          </p>
+        </div>
+      
+      </div>
+    </div>
+  );
+}
+
+type AsideLinksType = {
+  name: string;
+  link?: string;
+  icon: string;
+  nestedLink?: {
+    name: string;
+    link: string;
+    icon: string;
+  }[];
+}[];
+
+const asideLinks: AsideLinksType = [
+  { name: "Dashboard", link: "/dashboard/home", icon: "dash-icon", nestedLink: [] },
+  {
+    name: "Your Profile",
+    link: "/dashboard/profile",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  {
+    name: "Employment Details",
+    link: "/dashboard/verification",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  {
+    name: "Reference Details",
+    link: "/dashboard/payments",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  {
+    name: "Agreements",
+    link: "/dashboard/legals",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  // {name: 'Nested Link', icon: 'home', nestedLink:[
+  //     {name: 'Link 2', link: '/dashboard/not-found', icon: 'legals'},
+  //     {name: 'Link 1', link: '/dashboard/not-found', icon: 'home'}
+  //   ]
+  // },
+];

src/layouts/DashboardLayout/DashboardAuth.tsx

@@ -0,0 +1,61 @@
+
+import {useState, useEffect} from 'react'
+import DashboardLayout from "./DashboardLayout";
+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 (
+    <>
+    {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

@@ -0,0 +1,124 @@
+import { ReactNode, useState, useEffect } from "react";
+import { RouteHandler } from "../../router/routes";
+import { useNavigate } from "react-router-dom";
+
+import Aside from "./Aside";
+
+export default function DashboardLayout({ children }: { children: ReactNode }) {
+  const navigate = useNavigate();
+
+  const [showAside, setShowAside] = useState<boolean>(false);
+  const asideDisplay = (): void => {
+    setShowAside((prev) => !prev);
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      return setShowAside(false);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  // Assume this interface for ChildProps
+  // interface ChildProps {
+  //   customProp?: string;
+  // }
+
+  // const enhanceChildren = React.Children.map(children, (child) => {
+  //   if (React.isValidElement<ChildProps>(child)) {
+  //     return React.cloneElement(child, { customProp: "Hello, World!" });
+  //   }
+  //   return child;
+  // });
+
+  const logoutUser = () => {
+    localStorage.clear()
+    navigate(RouteHandler.letsGetStarted, {replace:true})
+  }
+
+  return (
+    <div className="w-full max-w-[2000px] mx-auto h-screen flex bg-[#020202] text-black">
+      <aside className="max-w-[18.75rem] w-full bg-white hidden md:block border-r-2 border-[#E6E6E6]">
+        <Aside logoutUser={logoutUser} />
+      </aside>
+      <aside
+        className={`max-w-[18.75rem] w-full md:hidden bg-white border-r-2 border-[#E6E6E6] fixed top-0 bottom-0 z-50 transition-all duration-500 ${
+          showAside ? "left-0" : "-left-[200%]"
+        }`}
+      >
+        <Aside logoutUser={logoutUser} asideDisplay={asideDisplay} />
+      </aside>
+      <main className="dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden">
+
+        <header className={`p-5 md:hidden sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6]`}>
+          <div className='h-14 w-full flex justify-end items-center gap-5'>
+              {/* MENU HAND BURGER */}
+              {/* <div className='w-full'>Welcome Austin Catherine</div> */}
+              <div
+              className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
+              onClick={asideDisplay}
+              >
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+                  showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
+                  }`}
+              ></div>
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
+                  showAside
+                      ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
+                      : "top-1/2 -translate-y-1/2"
+                  }`}
+              ></div>
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+                  showAside
+                      ? "top-1/2 -translate-y-1/2 -rotate-45"
+                      : "bottom-0"
+                  }`}
+              ></div>
+              </div>
+          </div>
+        </header>
+        <div className="flex p-5 relative">
+          <div className="w-full p-5">{children}</div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+// {/* <header className={`p-5 sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6]`}>
+// <div className='h-14 w-full flex justify-end items-center gap-5'>
+
+//     {/* MENU HAND BURGER */}
+//     <div className='w-full'>Welcome Austin Catherine</div>
+//     <div
+//     className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
+//     onClick={asideDisplay}
+//     >
+//     <div
+//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+//         showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
+//         }`}
+//     ></div>
+//     <div
+//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
+//         showAside
+//             ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
+//             : "top-1/2 -translate-y-1/2"
+//         }`}
+//     ></div>
+//     <div
+//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+//         showAside
+//             ? "top-1/2 -translate-y-1/2 -rotate-45"
+//             : "bottom-0"
+//         }`}
+//     ></div>
+//     </div>
+// </div>
+// </header> */}

src/layouts/GetStartedLayout.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Footer, Header } from "../components";
+
+interface GetStartedLayoutProps {
+  children: React.ReactNode;
+}
+
+const GetStartedLayout: React.FC<GetStartedLayoutProps> = ({ children }) => {
+  return (
+    <div className="containerMode mb-[5.4375rem]">
+      <div className='sticky z-50 top-0 bg-white'>
+        <Header hideSidebar={true} hideMenu={true} />
+      </div>
+      <div className="flex flex-col min-h-[70vh] justify-between">
+        {children}
+      </div>
+      <div className="fixed bottom-0 left-0 bg-white w-full">
+        <Footer />
+      </div>
+    </div>
+  );
+};
+
+export default GetStartedLayout;

src/layouts/LetsGetStartedLayout.tsx

@@ -1,23 +1,23 @@
 import React from "react";
 import { Footer, LetsGetStartedNav } from "../components";
-import layoutImage from "../assets/images/test1-reverse.png";
+// import layoutImage from "../assets/images/test1-reverse.png";
 
 const LetsGetStartedLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <>
-      <div className="grid md:grid-cols-2 h-[770px]">
+    <div className='containerMode mb-[5.4375rem]'>
+      <div className="w-full min-h-[90vh] grid lg:grid-cols-2">
         <div className="w-full flex flex-col my-3">
           <LetsGetStartedNav />
           {children}
         </div>
-        <div className="w-full">
-          <img src={layoutImage} alt="" className="w-full h-full" />
+        <div className="w-full h-96 lg:h-full bg-[url(../src/assets/images/test1-reverse.png)] bg-cover bg-no-repeat">
+          {/* <img src={layoutImage} alt="" className="w-full h-full object-cover" /> */}
         </div>
       </div>
       <div className="fixed bottom-0 left-0 bg-[#F7F7F7] w-full">
         <Footer />
       </div>
-    </>
+    </div>
   );
 };
 

src/layouts/index.ts

@@ -1,3 +1,7 @@
 import HomeLayout from "./HomeLayout";
 import LetsGetStartedLayout from "./LetsGetStartedLayout";
-export { HomeLayout, LetsGetStartedLayout };
+import GetStartedLayout from "./GetStartedLayout";
+import DashboardLayout from "./DashboardLayout/DashboardLayout";
+import { DashboardAuth } from "./DashboardLayout";
+
+export { HomeLayout, LetsGetStartedLayout, GetStartedLayout, DashboardLayout, DashboardAuth };

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/pages/BusinessBankingPage.tsx

@@ -5,7 +5,12 @@ import { PersonalHero } from "../components";
 const BusinessBankingPage: React.FC = () => {
   return (
     <HomeLayout>
-      <PersonalHero />
+      <PersonalHero
+        heading="Business Account"
+        body="Open a personal or business account in minutes, tailored to your unique needs."
+        buttonLink="#"
+        buttonText="Click here"
+      />
       Business Banking
     </HomeLayout>
   );

src/pages/CooperateBankingPage.tsx

@@ -1,14 +1,19 @@
-import React from 'react'
-import { HomeLayout } from '../layouts'
-import { PersonalHero } from '../components'
+import React from "react";
+import { HomeLayout } from "../layouts";
+import { PersonalHero } from "../components";
 
 const CooperateBankingPage: React.FC = () => {
   return (
     <HomeLayout>
-        <PersonalHero />
+      <PersonalHero
+        heading="Cooperate Account"
+        body="Open a personal or business account in minutes, tailored to your unique needs."
+        buttonLink="#"
+        buttonText="Click here"
+      />
       Cooperate Banking
     </HomeLayout>
-  )
-}
+  );
+};
 
-export default CooperateBankingPage
+export default CooperateBankingPage;

src/pages/DashboardProfilePage.tsx

@@ -1,5 +1,9 @@
+import { DashboardProfile } from "../components";
+
 export default function DashboardProfilePage() {
   return (
-    <div>DashboardProfile</div>
-  )
+    <>
+      <DashboardProfile />
+    </>
+  );
 }

src/pages/GetStartedPage.tsx

@@ -1,12 +1,27 @@
 import React from "react";
-import { GetStarted as Main, Header, Footer } from "../components";
+import { GetStarted as Main } from "../components";
+import { GetStartedLayout, LetsGetStartedLayout } from "../layouts";
+import BVN from "../components/GetStarted/BVN";
 
-const GetStartedPage :React.FC = () => {
+const GetStartedPage: React.FC = () => {
+  const [step, setStep] = React.useState(1);
+
+  const handleNextStep = () => {
+    if (step < 5) {
+      setStep(step + 1);
+    }
+  };
   return (
     <>
-      <Header hideSidebar={true} hideMenu={true} />
-      <Main />
-      <Footer />
+    {step == 1 ?
+      <LetsGetStartedLayout>
+        <BVN handleNextStep={handleNextStep} />
+      </LetsGetStartedLayout>
+    :
+      <GetStartedLayout>
+        <Main step={step} handleNextStep={handleNextStep} />
+      </GetStartedLayout>
+    }
     </>
   );
 };

src/pages/InternetBankingPage.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { HomeLayout } from '../layouts'
+
+const InternetBankingPage: React.FC = () => {
+  return (
+    <HomeLayout>InternetBankingPage</HomeLayout>
+  )
+}
+
+export default InternetBankingPage

src/pages/PersonalBankingPage.tsx

@@ -1,14 +1,19 @@
-import React from 'react'
-import { HomeLayout } from '../layouts'
-import { PersonalHero } from '../components'
+import React from "react";
+import { HomeLayout } from "../layouts";
+import { PersonalHero } from "../components";
 
 const PersonalBankingPage: React.FC = () => {
   return (
     <HomeLayout>
-      <PersonalHero />
+      <PersonalHero
+        heading="Personal Or Business Account"
+        body="Open a personal or business account in minutes, tailored to your unique needs."
+        buttonLink="#"
+        buttonText="Click here"
+      />
       Personal Banking
     </HomeLayout>
-  )
-}
+  );
+};
 
-export default PersonalBankingPage
+export default PersonalBankingPage;

src/router/Router.tsx

@@ -15,7 +15,7 @@ import {
   PersonalBankingPage,
   LetsGetStatedPage,
 } from "../pages";
-import { DashboardAuth } from "../components";
+import { DashboardAuth } from "../layouts";
 
 const Routers = () => {
   return (

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,
+  },
+});

src/utils/data.tsx

@@ -9,6 +9,8 @@ import YoutubeWhite from "../assets/images/socials/youtube.svg";
 import InstagramWhite from "../assets/images/socials/instagram.svg";
 import { RouteHandler } from "../router/routes";
 
+let process = import.meta.env;
+
 export const top_header_data = [
   { id: 1, name: "HOME", href: RouteHandler.homepage },
   { id: 2, name: "PERSONAL", href: RouteHandler.personalBanking },
@@ -30,7 +32,7 @@ export const lowerMenuItems = [
   {
     id: 3,
     name: "CORPORATE BANKING",
-    linkPath: "/corporate-banking",
+    linkPath: "/cooperate-banking",
   },
   {
     id: 4,
@@ -275,7 +277,7 @@ export const _lowerMenuItems = [
   },
   {
     name: "CORPORATE BANKING",
-    linkPath: "/corporate-banking",
+    linkPath: "/cooperate-banking",
     subItems: [
       {
         name: "FOREIGN EXCHANGE SERVICES",
@@ -398,9 +400,9 @@ export const _lowerMenuItems = [
 ];
 
 export const socialsIcons = [
-  { name: "facebook", image: FBook },
-  { name: "twitter", image: Twitter },
-  { name: "instagram", image: Instagram },
+  { name: "facebook", image: FBook, link: process.VITE_FACEBOOK_URL },
+  { name: "twitter", image: Twitter, link: process.VITE_TWITTER_URL },
+  { name: "instagram", image: Instagram, link: process.VITE_INSTAGRAM_URL },
 ];
 
 export const footerItems = [
@@ -434,12 +436,12 @@ export const footerItems = [
     ],
   },
   {
-    category: "CORPORATE BANKING",
+    category: "COOPORATE BANKING",
     subItems: [
       { text: "FOREIGN EXCHANGE SERVICES", href: "/foreign-exchange-services" },
       { text: "TRADE SERVICES", href: "/node/166" },
       { text: "CASH MANAGEMENT SOLUTIONS", href: "/cash-management" },
-      { text: "CORPORATE FINANCE", href: "/corporate-finance" },
+      { text: "COOPORATE FINANCE", href: "/corporate-finance" },
     ],
   },
   {