added bank name in env variable

.env

@@ -6,4 +6,12 @@ TWITTER_URL=https://twitter.com
 INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'
+VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'
+
+# ENQUIRIES CONTACTS
+VITE_CALL_ENDPOINT='09099000000'
+VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
+
+#BANK NAME
+VITE_BANK_NAME='First City Monument Bank'
+VITE_BANK_NAME_SHORT='FCMB'

.env.development

@@ -6,4 +6,8 @@ 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'
+VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'
+
+#BANK NAME
+VITE_BANK_NAME='First City Monument Bank'
+VITE_BANK_NAME_SHORT='FCMB'

.env.production

@@ -6,4 +6,8 @@ TWITTER_URL=https://twitter.com
 INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'
+VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'
+
+#BANK NAME
+VITE_BANK_NAME='First City Monument Bank'
+VITE_BANK_NAME_SHORT='FCMB'

package-lock.json

@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "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",
@@ -1805,6 +1807,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.18",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz",
@@ -1842,6 +1849,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -2030,6 +2047,17 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2124,6 +2152,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2550,6 +2586,25 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -2565,6 +2620,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/formik": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.5.tgz",
@@ -3078,6 +3146,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
@@ -3532,6 +3619,11 @@
       "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
       "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3588,6 +3680,14 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useState, useEffect } from "react";
+import React, { FC, useState, useEffect } from 'react';
-import NairaBag from "../../assets/images/dashboard/naira-bag.png";
+import NairaBag from '../../assets/images/dashboard/naira-bag.png';
-import { Button, Icons } from "../";
+import { Button, Icons } from '../';
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
-import PendingList from "../paginated-list/PendingList";
+import PendingList from '../paginated-list/PendingList';
-import { PendingTableList } from "../../core/models";
+import { PendingTableList } from '../../core/models';
-import { NewDateTimeFormatter } from "../../lib/NewDateTimeFormatter";
+import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter';
-import { getUserPendingLoanList } from "../../core/apiRequest";
+import { getUserPendingLoanList } from '../../core/apiRequest';
 
 export interface DashBoardCardProps {
   title?: string;
@@ -55,7 +55,7 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
         )}
         {desc && (
           <p className={`text-lg text-left ${descClass && descClass}`}>
-            {desc}{" "}
+            {desc}{' '}
             {descSpan && (
               <span className={`${descSpanClass && descSpanClass}`}>
                 {descSpan}
@@ -73,117 +73,137 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
 };
 
 interface DashboardHomeIntroProps {
-  handleNextStep:(value:{})=>any
+  handleNextStep: (value: {}) => any;
-  step?:number|string
+  step?: number | string;
 }
 
-const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step }) => {
+const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
-  const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable
+  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:[]})
+  const [userLoanList, setUserLoanList] = useState<{
+    loading: boolean;
+    data: PendingTableList;
+  }>({ loading: true, data: [] });
 
-  useEffect(()=>{
+  useEffect(() => {
-    let token = localStorage.getItem('token')
+    let token = localStorage.getItem('token');
-    let uid = localStorage.getItem('uid')
+    let uid = localStorage.getItem('uid');
-    if(!token || !uid){
+    if (!token || !uid) {
-      return
+      return;
     }
-    getUserPendingLoanList(uid).then(res => {
+    getUserPendingLoanList(uid)
-      console.log('RES', res)
+      .then((res) => {
-      console.log('RES', userLoanList)
+        console.log('RES', res);
-      if(!res || !res.data.loans){
+        console.log('RES', userLoanList);
-        setUserLoanList({loading:false, data:[]})
+        if (!res || !res.data.loans) {
-        return
+          setUserLoanList({ loading: false, data: [] });
-      }
+          return;
-      setUserLoanList({loading:false, data:res?.data?.loans})
+        }
-    }).catch(err => {
+        setUserLoanList({ loading: false, data: res?.data?.loans });
-      console.log(err)
+      })
-      setUserLoanList({loading:false, data:[]})
+      .catch((err) => {
-    })
+        console.log(err);
-  },[])
+        setUserLoanList({ loading: false, data: [] });
+      });
+  }, []);
 
   return (
-    <div className='w-full'>
+    <div className="w-full">
-    {step == 1 ?
+      {step == 1 ? (
-      <>
+        <>
-        <h1 className="font-bold my-5 text-2xl">Hello, {userDetails.firstname}</h1>
+          <h1 className="font-bold my-5 text-2xl">
-        <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
+            Hello, {userDetails.firstname}
-          <DashBoardCard
+          </h1>
-            cardClass="bg-[#5C2684] relative"
+          <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
-            desc="Begin your application and get up to "
+            <DashBoardCard
-            descSpan="5 million naira loan."
+              cardClass="bg-[#5C2684] relative"
-            descClass="leading-[1.5625rem] text-lg text-white"
+              desc="Begin your application and get up to "
-            descSpanClass="font-bold"
+              descSpan="5 million naira loan."
-            btnTitle="Apply here"
+              descClass="leading-[1.5625rem] text-lg text-white"
-            btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
+              descSpanClass="font-bold"
-            image={NairaBag}
+              btnTitle="Apply here"
-            imgClass="translate-y-4 -rotate-6"
+              btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
-            onClick={()=>handleNextStep({})}
+              image={NairaBag}
+              imgClass="translate-y-4 -rotate-6"
+              onClick={() => handleNextStep({})}
             />
-        </div>
+          </div>
-      </>
+        </>
-      :
+      ) : (
-      <>
+        <>
-        <h1 className="font-bold my-5 text-2xl">Welcome Back, {userDetails.firstname}</h1>
+          <h1 className="font-bold my-5 text-2xl">
-        <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
+            Welcome Back, {userDetails.firstname}
-          <DashBoardCard
+          </h1>
-            cardClass="bg-[#5C2684] relative"
+          <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
-            desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
+            <DashBoardCard
-            // descSpan="5 million naira loan."
+              cardClass="bg-[#5C2684] relative"
-            descClass="leading-[1.5625rem] text-lg text-white"
+              desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
-            // descSpanClass="font-bold"
+              // descSpan="5 million naira loan."
-            btnTitle="View and accept"
+              descClass="leading-[1.5625rem] text-lg text-white"
-            btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
+              // descSpanClass="font-bold"
-            image={NairaBag}
+              btnTitle="View and accept"
-            imgClass="translate-y-4 -rotate-6"
+              btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
-            // onClick={handleNextStep}
+              image={NairaBag}
+              imgClass="translate-y-4 -rotate-6"
+              // onClick={handleNextStep}
             />
-        </div>
+          </div>
-    </>
+        </>
-    }
+      )}
-    {userLoanList.loading ?
+      {userLoanList.loading ? null : (
-    null
+        <div className="mt-5 w-full">
-    :
+          <PendingList
-      <div className='mt-5 w-full'>
+            data={userLoanList.data}
-        <PendingList
+            itemsPerPage={5}
-          data={userLoanList.data}
+            tableTitle="Current Applications"
-          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]">
-          {(data:any)=>(
+                <table className="text-[12px] sm:text-base w-full table-auto">
-            <div className="w-full p-4 rounded-lg shadow-lg bg-white overflow-x-auto min-h-[250px] max-h-[450px]">
+                  <thead>
-              <table className="w-full table-auto">
+                    <tr className="text-left border-b-2">
-                <thead>
+                      <th className="px-1 py-4">Date</th>
-                  <tr className='text-left border-b-2'>
+                      <th className="px-1 py-4 text-right">Amount</th>
-                    <th className='px-1 py-4'>Date</th>
+                      <th className="px-1 py-4 text-center min-w-[110px]">
-                    <th className='px-1 py-4 text-right'>Amount</th>
+                        Payment Term
-                    <th className='px-1 py-4 text-center'>Payment Term</th>
+                      </th>
-                    <th className='px-1 py-4 text-center'>Status</th>
+                      <th className="px-1 py-4 text-center">Status</th>
-                    <th className='px-1 py-4'>Action</th>
+                      <th className="px-1 py-4 text-right">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>
-                  ))}
+                  </thead>
-                </tbody>
+                  <tbody>
-              </table>
+                    {data.map((item: any, index: any) => (
-            </div>
+                      <tr key={index || item} className="even:bg-slate-100">
-          )}
+                        <td className="px-1 py-2">
-        </PendingList>
+                          {NewDateTimeFormatter(item?.added)}
-      </div>
+                        </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 text-right">
+                          <button className="px-2 py-1 border-2 border-black">
+                            View
+                            <Icons name="arrow-right" />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </PendingList>
+        </div>
+      )}
     </div>
   );
 };

src/components/Dashboard/home/DashboardHomeAttestation.tsx

@@ -53,7 +53,7 @@ export default function DashboardHomeAttestation({handleNextStep, applicationDet
         <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>
+      <p className='text-red-500 text-base'>NB: Must be your {import.meta.env.VITE_BANK_NAME_SHORT} account number</p>
       <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
@@ -84,7 +84,7 @@ export default function DashboardHomeAttestation({handleNextStep, applicationDet
                         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
+                      <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 {import.meta.env.VITE_BANK_NAME_SHORT}
                           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>

src/components/Dashboard/home/DashboardHomeEmploymentInfo.tsx

@@ -1,12 +1,20 @@
+import {useState, useEffect} from 'react'
 import { Button, InputCompOne, Stepper } from '../../shared/index';
 
 import {Formik, Form} from 'formik'
 import * as Yup from "yup";
 
+import { getEmployersList } from '../../../core/apiRequest';
+
 type Props = {
   handleNextStep:(value:{})=>any
 }
 
+// type EmployerProps = {
+//   loading?: boolean,
+//   data?: Array<{[index:string]: string}> | {[index:string]: Array<{[index:string]: string}> }
+// }
+
 const initialValues = {
   job_title: "",
   name: "",
@@ -18,24 +26,37 @@ const initialValues = {
   monthly_salary: "",
   salary_payment_date: "",
   employment_id: "",
-  highest_eductaion: ""
+  highest_eductaion: "",
+  employer_uid: "",
+  isChecked: false
 };
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
+  isChecked: Yup.bool(), // use bool instead of boolean
+  // .oneOf([true, false], "You must accept the terms and conditions"),
   job_title: Yup.string()
     .required("Required"),
-  name: Yup.string()
+  name: Yup.string().when('isChecked', {
-    .required("Required"),
+      is: true, 
-  sector: Yup.string()
+      then: () => Yup.string().required('required'),
-    .required("Required"),
+      otherwise: () => Yup.string(),
-  industry: Yup.string()
+    }),
-    .required("Required"),
+  sector: Yup.string().when('isChecked', {
+      is: true, 
+      then: () => Yup.string().required('required'),
+    }),
+  industry: Yup.string().when('isChecked', {
+      is: true, 
+      then: () => Yup.string().required('required'),
+    }),
   resumption_date: Yup.string()
     .required("Required"),
-  email: Yup.string()
+  email: Yup.string().when('isChecked', {
-    .email("Invalid")
+      is: true, 
-    .required("Required"),
+      then: () => Yup.string().required('required'),
+    })
+    .email("Invalid"),
   annual_income: Yup.string()
     .required("Required")
     .test("no-e", "Invalid", (value:any) => {
@@ -58,16 +79,41 @@ const validationSchema = Yup.object().shape({
     .required("Required"),
   highest_eductaion: Yup.string()
     .required("Required"),
+  employer_uid: Yup.string().when('isChecked', {
+      is: false, 
+      then: () => Yup.string().required('required'),
+    }),
 });
 
 export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
 
+  const [employersList, setEmployersList] = useState<any>({
+    loading: true,
+    data: []
+  })
+
 
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (values:any) => {
-    handleNextStep({employment: values})
+    // Remember to changed the checked value's name
+    if(values.employer_uid){
+      let employer_uid = values.employer_uid
+      delete values.employer_uid
+      handleNextStep({employer_uid, employment: values})
+    }else{
+      handleNextStep({employment: values})
+    }
   };
 
+  useEffect(()=>{
+    getEmployersList().then(res => {
+      setEmployersList({loading:false, data:res?.data})
+    }).catch(err => {
+      console.log(err)
+      setEmployersList({loading:false, data:[]})
+    })
+  },[])
+
 
   return (
     <div className="w-full">
@@ -83,155 +129,188 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}: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]">
+                  <div className="flex flex-col lg:flex-row items-start gap-[2rem]">
-                    <InputCompOne
+                    <div className='w-full lg:max-w-[30rem] flex flex-col'>
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      <div className='w-full gap-[2rem]'>
-                      name="job_title"
+                        <InputCompOne
-                      floatLabel="Job Title"
+                          parentClass="w-full"
-                      // labelClass="font-bold text-[1.125rem]"
+                          name="employer_uid"
-                      input
+                          floatLabel="Employer Name"
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                          // labelClass="font-bold text-[1.125rem]"
-                      placeholder="Software Engineer"
+                          select={true}
-                      value={props.values.job_title}
+                          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      onChange={props.handleChange}
+                          selectOptions={{loading:employersList?.loading, data: employersList?.data?.records}}
-                      error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
+                          selectValue={props.values.employer_uid}
-                    />
+                          onChange={props.handleChange}
-                    <InputCompOne
+                          error={(props.errors.employer_uid && props.touched.employer_uid) ? props.errors.employer_uid : ''}
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                          disabled={props.values.isChecked}
-                      name="name"
+                        />
-                      floatLabel="Employer name"
+                        <div className='flex gap-4 items-start my-2'>
-                      // labelClass="font-bold text-[1.125rem]"
+                          <input 
-                      input
+                            type='checkbox' 
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                            name="isChecked"
-                      placeholder="Mr. Mark John"
+                            className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' 
-                      value={props.values.name}
+                            onChange={props.handleChange}
-                      onChange={props.handleChange}
+                            checked={props.values.isChecked}
-                      error={(props.errors.name && props.touched.name) ? props.errors.name : ''}
+                          />
-                    />
+                          <p className='text-[12px] text-justify'>Check here if employer is not on the list</p>
+                        </div>
+                        <div className={`hidden p-4 ${props.values.isChecked && 'hidden'}`}>
+                          Name: {'Name'}
+                        </div>
+                      </div>
+                      <div className={`w-full flex flex-col gap-[2rem] ${!props.values.isChecked && 'hidden'}`}>
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="name"
+                          floatLabel="Employer name"
+                          // labelClass="font-bold text-[1.125rem]"
+                          input
+                          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                          placeholder="Mr. Mark John"
+                          value={props.values.name}
+                          onChange={props.handleChange}
+                          error={(props.errors.name && props.touched.name) ? props.errors.name : ''}
+                        />
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="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 : ''}
+                        />
+                        <InputCompOne
+                          parentClass="w-full"
+                          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 : ''}
+                        />
+                        <InputCompOne
+                          parentClass="w-full"
+                          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 : ''}
+                        />
+                      </div>
+                    </div>
+
+                    <div className='w-full lg:max-w-[30rem] flex flex-col gap-[2rem]'>  
+                      <InputCompOne
+                        parentClass="w-full"
+                        name="job_title"
+                        floatLabel="Job Title"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="Software Engineer"
+                        value={props.values.job_title}
+                        onChange={props.handleChange}
+                        error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
+                      />
+                      <InputCompOne
+                        parentClass="w-full"
+                        name="highest_eductaion"
+                        floatLabel="Highest level of education"
+                        // labelClass="font-bold text-[1.125rem]"
+                        select={true}
+                        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 : ''}
+                      />
+                      <div className="w-full flex flex-col sm:flex-row items-center gap-4">
+                          <InputCompOne
+                          parentClass="w-full"
+                          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="w-full"
+                          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 : ''}
+                        />
+                      </div>
+                      <div className="w-full flex flex-col sm:flex-row items-center gap-4">
+                        <InputCompOne
+                          parentClass="w-full"
+                          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="w-full"
+                          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>
+                      <InputCompOne
+                        parentClass="w-full"
+                        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 className="w-full">
+                        <Button
+                          className="my-4 btn-Y text-black w-full h-11"
+                          text="Next"
+                          type="submit"
+                        />
+                      </div>
+                    </div>
                   </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>
             )}

src/components/Footer/BottomFooterOne.tsx

@@ -17,7 +17,7 @@ const BottomFooterOne = () => {
           <CustomerLinks />
         </div>
         <p className="text-[.8125rem] text-[#333] leading-[1.42857]">
-          © <span>{date}</span> First City Monument Bank (Licensed by the
+          © <span>{date}</span> {import.meta.env.VITE_BANK_NAME} (Licensed by the
           Central Bank of Nigeria)
         </p>
       </div>

src/components/Footer/Footer.tsx

@@ -8,7 +8,7 @@ export default function Footer() {
     <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
       <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
+          {date} @ {import.meta.env.VITE_BANK_NAME} Limited
         </p>
         <div className="footer-social-icons flex justify-end items-center gap-2">
           {renderSocialLinks()}

src/components/Home/Requirements/EligiblityBox.tsx

@@ -12,7 +12,7 @@ const EligiblityBox = () => {
           You must have a valid BVN
         </li>
         <li className="text-base leading-[1.5625rem]">
-          Must have a salary or current bank account with FCMB
+          Must have a salary or current bank account with {import.meta.env.VITE_BANK_NAME_SHORT}
         </li>
       </ul>
     </div>

src/components/shared/InputCompOne.tsx

@@ -17,7 +17,7 @@ export interface InputCompOneProps {
   selectValue?: string;
   input?: boolean;
   select?: boolean;
-  selectOptions?: {loading:boolean, data:{ value: string; label: string }[]};
+  selectOptions?: {loading:boolean, data:{ [index: string]: string; }[]};
   inputType?: string;
   inputClass?: string;
   parentInputClass?: string;
@@ -25,6 +25,7 @@ export interface InputCompOneProps {
   parentClass?: string;
   maxLength?: number;
   error?: string;
+  disabled?: boolean
 }
 
 const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
@@ -52,6 +53,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       parentClass,
       maxLength,
       error,
+      disabled=false
     },
     forwardedRef
   ) => {
@@ -78,6 +80,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               className={`px-4 ${floatLabel && 'peer pt-4 placeholder:text-transparent'} ${inputClass}`}
               maxLength={maxLength}
               id={label ? label : floatLabel}
+              disabled={disabled}
             />
             {floatLabel &&
               <label
@@ -96,17 +99,27 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               name={name}
               id={label ? label : floatLabel}
               value={selectValue}
-              className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass}`}
+              className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass} ${disabled && 'opacity-50'}`}
               onChange={onChange}
+              disabled={disabled}
             >
               {selectOptions.loading ?
-              <option value=''>Loading</option>
+              <option value=''>Loading...</option>
-              : selectOptions.data.length ?
+              : selectOptions.data.length && name == 'employer_uid' ?
-                selectOptions.data.map(({ value, label }) => (
+                <>
-                  <option key={value} value={value}>
+                  <option value=''>Please Select</option>
-                    {label}
+                  {selectOptions.data.map(({ uid, name }) => (
-                  </option>
+                    <option key={uid} value={uid}>
-                ))
+                      {name}
+                    </option>
+                  ))}
+                </>
+              : selectOptions.data.length && name != 'employer_uid' ?
+                  selectOptions.data.map(({ value, label }) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  ))
               :
               <option value=''>Not Found</option>
               }

src/core/apiRequest.ts

@@ -40,4 +40,12 @@ export const getUserPendingLoanList = (uid:string) => {
         // customer_uid: localStorage.getItem('uid'),
     }
     return getAuxEnd(`/dash?uid=${uid}`, reqData)
+}
+
+// FUNCTION TO GET LIST OF EMPLOYERS
+export const getEmployersList = () => {
+    let reqData = {
+        // customer_uid: localStorage.getItem('uid'),
+    }
+    return getAuxEnd(`/employers`, reqData)
 }

src/layouts/DashboardLayout/Aside.tsx

@@ -1,31 +1,63 @@
-import { useState } from "react";
+import { useState, useEffect } from 'react';
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from 'react-router-dom';
-import Logo from "../../assets/icons/logo.svg";
+import Logo from '../../assets/icons/logo.svg';
-import { Icons } from "../../components";
+import { Icons } from '../../components';
+import { contactDetails } from '../../utils/data';
 
 type Props = {
   asideDisplay?: () => void;
-  logoutUser: () => void
+  logoutUser: () => void;
 };
 
 export default function Aside({ asideDisplay, logoutUser }: Props) {
   const { pathname } = useLocation();
 
   const [openNestedLink, setOpenNestedLink] = useState<{ name: string | null }>(
-    { name: "" }
+    { name: '' }
   );
 
   const handleOpenNestedLink = (e: any) => {
     if (!e || !e.target) {
-      return setOpenNestedLink({ name: "" });
+      return setOpenNestedLink({ name: '' });
     }
     if (openNestedLink.name && openNestedLink.name == e.target.name) {
-      setOpenNestedLink({ name: "" });
+      setOpenNestedLink({ name: '' });
     } else {
       setOpenNestedLink({ name: e.target.name });
     }
   };
 
+  // Track user activity
+  useEffect(() => {
+    let timeout: number;
+
+    const resetTimeout = () => {
+      clearTimeout(timeout);
+      timeout = window.setTimeout(() => {
+        // Logout user after 7 minutes of inactivity
+        logoutUser();
+      }, 7 * 60 * 1000); // 7 minutes in milliseconds
+    };
+
+    const handleUserActivity = () => {
+      resetTimeout();
+    };
+
+    // Attach event listeners to track user activity
+    document.addEventListener('mousemove', handleUserActivity);
+    document.addEventListener('keypress', handleUserActivity);
+
+    // Initialize timeout
+    resetTimeout();
+
+    // Clear timeout and remove event listeners on component unmount
+    return () => {
+      clearTimeout(timeout);
+      document.removeEventListener('mousemove', handleUserActivity);
+      document.removeEventListener('keypress', handleUserActivity);
+    };
+  }, [logoutUser]);
+
   return (
     <div className="py-5 px-10 flex flex-col h-full bg-inherit">
       <Link to="/">
@@ -45,8 +77,8 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                   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-[#5C2684]'
-                      : " text-[#585858]"
+                      : ' text-[#585858]'
                   }`}
                 >
                   {link.name}
@@ -60,8 +92,8 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                 <div
                   className={`transition-all duration-300 w-full z-1 ${
                     openNestedLink.name == link.name
-                      ? "relative top-0"
+                      ? 'relative top-0'
-                      : "absolute -top-[500px]"
+                      : 'absolute -top-[500px]'
                   }`}
                 >
                   {link.nestedLink.map((nextLink, index) => (
@@ -70,17 +102,17 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                         asideDisplay && asideDisplay();
                       }}
                       key={index}
-                      to={nextLink.link ? nextLink.link : "#"}
+                      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-[#5C2684]'
-                          : "text-[#585858]"
+                          : 'text-[#585858]'
                       }`}
                     >
                       <Icons
                         name={nextLink.icon}
                         fillColor={`${
-                          pathname == nextLink.link ? "#5C2684" : "#585858"
+                          pathname == nextLink.link ? '#5C2684' : '#585858'
                         }`}
                       />
                       {nextLink.name}
@@ -96,14 +128,14 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                   asideDisplay && asideDisplay();
                 }}
                 key={index}
-                to={link.link ? link.link : "#"}
+                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]"
+                  pathname == link.link ? 'text-[#5C2684]' : 'text-[#585858]'
                 }`}
               >
                 <Icons
                   name={link.icon}
-                  fillColor={`${pathname == link.link ? "#5C2684" : "#585858"}`}
+                  fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`}
                 />
                 {link.name}
               </Link>
@@ -119,19 +151,25 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
           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]">
+          {/* <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
             Call: 09099000000
           </p>
           <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
             Email: fcmbloan@support.com
-          </p>
+          </p> */}
+          {contactDetails.map(({ name, value }) => (
+            <p
+              key={name}
+              className="font-extrabold tracking-[3%] text-[#5A5A5A]"
+            >
+              {name}: {value}
+            </p>
+          ))}
         </div>
-      
       </div>
     </div>
   );
@@ -149,29 +187,34 @@ type AsideLinksType = {
 }[];
 
 const asideLinks: AsideLinksType = [
-  { name: "Dashboard", link: "/dashboard/home", icon: "dash-icon", nestedLink: [] },
   {
-    name: "Your Profile",
+    name: 'Dashboard',
-    link: "/dashboard/profile",
+    link: '/dashboard/home',
-    icon: "dash-icon",
+    icon: 'dash-icon',
     nestedLink: [],
   },
   {
-    name: "Employment Details",
+    name: 'Your Profile',
-    link: "/dashboard/verification",
+    link: '/dashboard/profile',
-    icon: "dash-icon",
+    icon: 'dash-icon',
     nestedLink: [],
   },
   {
-    name: "Reference Details",
+    name: 'Employment Details',
-    link: "/dashboard/payments",
+    link: '/dashboard/verification',
-    icon: "dash-icon",
+    icon: 'dash-icon',
     nestedLink: [],
   },
   {
-    name: "Agreements",
+    name: 'Reference Details',
-    link: "/dashboard/legals",
+    link: '/dashboard/payments',
-    icon: "dash-icon",
+    icon: 'dash-icon',
+    nestedLink: [],
+  },
+  {
+    name: 'Agreements',
+    link: '/dashboard/legals',
+    icon: 'dash-icon',
     nestedLink: [],
   },
   // {name: 'Nested Link', icon: 'home', nestedLink:[

src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -83,8 +83,8 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
               </div>
           </div>
         </header>
-        <div className="flex p-5 relative">
+        <div className="flex p-2 md:p-5 relative">
-          <div className="w-full p-5">{children}</div>
+          <div className="w-full p-2 md:p-5">{children}</div>
         </div>
       </main>
     </div>

src/utils/data.tsx

@@ -1,556 +1,561 @@
-import FBook from "../assets/icons/facebook.svg";
+import FBook from '../assets/icons/facebook.svg';
-import Twitter from "../assets/icons/twitter.svg";
+import Twitter from '../assets/icons/twitter.svg';
-import Instagram from "../assets/icons/instagram.svg";
+import Instagram from '../assets/icons/instagram.svg';
-import FBookWhite from "../assets/images/socials/facebook.svg";
+import FBookWhite from '../assets/images/socials/facebook.svg';
-import LinkedInWhite from "../assets/images/socials/linkedin.svg";
+import LinkedInWhite from '../assets/images/socials/linkedin.svg';
-import XWhite from "../assets/images/socials/twitterx.svg";
+import XWhite from '../assets/images/socials/twitterx.svg';
-import WhatsappWhite from "../assets/images/socials/whatsapp.svg";
+import WhatsappWhite from '../assets/images/socials/whatsapp.svg';
-import YoutubeWhite from "../assets/images/socials/youtube.svg";
+import YoutubeWhite from '../assets/images/socials/youtube.svg';
-import InstagramWhite from "../assets/images/socials/instagram.svg";
+import InstagramWhite from '../assets/images/socials/instagram.svg';
-import { RouteHandler } from "../router/routes";
+import { RouteHandler } from '../router/routes';
 
 let process = import.meta.env;
 
 export const top_header_data = [
-  { id: 1, name: "HOME", href: RouteHandler.homepage },
+  { id: 1, name: 'HOME', href: RouteHandler.homepage },
-  { id: 2, name: "PERSONAL", href: RouteHandler.personalBanking },
+  { id: 2, name: 'PERSONAL', href: RouteHandler.personalBanking },
-  { id: 3, name: "BUSINESS", href: RouteHandler.businessBanking },
+  { id: 3, name: 'BUSINESS', href: RouteHandler.businessBanking },
-  { id: 4, name: "CORPORATE", href: RouteHandler.cooperateBanking },
+  { id: 4, name: 'CORPORATE', href: RouteHandler.cooperateBanking },
 ];
 
 export const lowerMenuItems = [
   {
     id: 1,
-    name: "PERSONAL BANKING",
+    name: 'PERSONAL BANKING',
-    linkPath: "/personal-banking",
+    linkPath: '/personal-banking',
   },
   {
     id: 2,
-    name: "BUSINESS BANKING",
+    name: 'BUSINESS BANKING',
-    linkPath: "/business-banking",
+    linkPath: '/business-banking',
   },
   {
     id: 3,
-    name: "CORPORATE BANKING",
+    name: 'CORPORATE BANKING',
-    linkPath: "/cooperate-banking",
+    linkPath: '/cooperate-banking',
   },
   {
     id: 4,
-    name: "GROUP & SUBSIDIARIES",
+    name: 'GROUP & SUBSIDIARIES',
-    linkPath: "",
+    linkPath: '',
   },
   {
     id: 5,
-    name: "ABOUT US",
+    name: 'ABOUT US',
-    linkPath: "/about-us",
+    linkPath: '/about-us',
   },
   {
     id: 6,
-    name: "MY BANK AND I",
+    name: 'MY BANK AND I',
-    linkPath: "",
+    linkPath: '',
   },
 ];
 
 export const _lowerMenuItems = [
   {
-    name: "PERSONAL BANKING",
+    name: 'PERSONAL BANKING',
-    linkPath: "/personal-banking",
+    linkPath: '/personal-banking',
     subItems: [
       {
-        name: "CURRENT ACCOUNTS",
+        name: 'CURRENT ACCOUNTS',
-        linkPath: "/current-accounts",
+        linkPath: '/current-accounts',
         subItems: [
           {
-            name: "CLASSIC CURRENT ACCOUNT",
+            name: 'CLASSIC CURRENT ACCOUNT',
-            linkPath: "/personal-classic-current-account",
+            linkPath: '/personal-classic-current-account',
           },
           {
-            name: "PREMIUM CURRENT ACCOUNT",
+            name: 'PREMIUM CURRENT ACCOUNT',
-            linkPath: "/premium-current-account",
+            linkPath: '/premium-current-account',
           },
           {
-            name: "PERSONAL BUSINESS ACCOUNT",
+            name: 'PERSONAL BUSINESS ACCOUNT',
-            linkPath: "/personal-business-account",
+            linkPath: '/personal-business-account',
           },
           {
-            name: "DOMICILIARY CURRENT ACCOUNT",
+            name: 'DOMICILIARY CURRENT ACCOUNT',
-            linkPath: "/domiciliary-current-account",
+            linkPath: '/domiciliary-current-account',
           },
         ],
       },
       {
-        name: "SAVINGS ACCOUNTS",
+        name: 'SAVINGS ACCOUNTS',
-        linkPath: "/savings-accounts",
+        linkPath: '/savings-accounts',
         subItems: [
-          { name: "FCMB EASY ACCOUNT", linkPath: "/easy-account" },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} EASY ACCOUNT`, linkPath: '/easy-account' },
-          { name: "KIDS (0-17 YRS)", linkPath: "/kids" },
+          { name: 'KIDS (0-17 YRS)', linkPath: '/kids' },
-          { name: "FLEXX (18-30 YRS)", linkPath: "/flexx-account" },
+          { name: 'FLEXX (18-30 YRS)', linkPath: '/flexx-account' },
           {
-            name: "CLASSIC SAVINGS ACCOUNT",
+            name: 'CLASSIC SAVINGS ACCOUNT',
-            linkPath: "/classic-savings-account",
+            linkPath: '/classic-savings-account',
           },
           {
-            name: "PREMIUM SAVINGS ACCOUNT",
+            name: 'PREMIUM SAVINGS ACCOUNT',
-            linkPath: "/fcmb-premium-savings-account",
+            linkPath: '/fcmb-premium-savings-account',
           },
           {
-            name: "FCMB SALARY SAVINGS ACCOUNT",
+            name: `${import.meta.env.VITE_BANK_NAME_SHORT} SALARY SAVINGS ACCOUNT`,
-            linkPath: "/fcmb-salary-savings-account",
+            linkPath: '/fcmb-salary-savings-account',
           },
           {
-            name: "DOMICILIARY SAVINGS ACCOUNT",
+            name: 'DOMICILIARY SAVINGS ACCOUNT',
-            linkPath: "/domiciliary-savings-account",
+            linkPath: '/domiciliary-savings-account',
           },
         ],
       },
       {
-        name: "INVESTMENTS",
+        name: 'INVESTMENTS',
-        linkPath: "/investment-accounts",
+        linkPath: '/investment-accounts',
         subItems: [
-          { name: "FIXED DEPOSITS", linkPath: "/fixed-deposits" },
+          { name: 'FIXED DEPOSITS', linkPath: '/fixed-deposits' },
-          { name: "GRO (App)", linkPath: "/GRO" },
+          { name: 'GRO (App)', linkPath: '/GRO' },
-          { name: "GRO (Web)", linkPath: "https://www.investwithgro.com/" },
+          { name: 'GRO (Web)', linkPath: 'https://www.investwithgro.com/' },
           {
-            name: "I-NEST SAVING",
+            name: 'I-NEST SAVING',
-            linkPath: "https://i-nest.fcmb.com/#/welcome",
+            linkPath: 'https://i-nest.fcmb.com/#/welcome',
           },
-          { name: "CALL DEPOSITS", linkPath: "/call-deposits" },
+          { name: 'CALL DEPOSITS', linkPath: '/call-deposits' },
           {
-            name: "EDUCATION INVESTMENT PLAN",
+            name: 'EDUCATION INVESTMENT PLAN',
-            linkPath: "/education-investment",
+            linkPath: '/education-investment',
           },
           {
-            name: "MUTUAL FUNDS",
+            name: 'MUTUAL FUNDS',
-            linkPath: "https://www.fcmbassetmanagement.com/mutual-funds/",
+            linkPath: 'https://www.fcmbassetmanagement.com/mutual-funds/',
           },
         ],
       },
       {
-        name: "LOANS AND CREDIT CARDS",
+        name: 'LOANS AND CREDIT CARDS',
-        linkPath: "/loans-and-credit-cards",
+        linkPath: '/loans-and-credit-cards',
         subItems: [
-          { name: "FASTCASH", linkPath: "/fastcash" },
+          { name: 'FASTCASH', linkPath: '/fastcash' },
-          { name: "SALARY PLUS LOAN", linkPath: "/salary-plus-loan" },
+          { name: 'SALARY PLUS LOAN', linkPath: '/salary-plus-loan' },
-          { name: "PREMIUM SALARY LOAN", linkPath: "/premium-salary-loan" },
+          { name: 'PREMIUM SALARY LOAN', linkPath: '/premium-salary-loan' },
-          { name: "AUTO LOAN", linkPath: "/auto-loan" },
+          { name: 'AUTO LOAN', linkPath: '/auto-loan' },
-          { name: "AIRTIME LOAN", linkPath: "/airtime-loan" },
+          { name: 'AIRTIME LOAN', linkPath: '/airtime-loan' },
-          { name: "CREDIT CARDS", linkPath: "/credit-cards" },
+          { name: 'CREDIT CARDS', linkPath: '/credit-cards' },
           {
-            name: "EASYLIFT LOAN",
+            name: 'EASYLIFT LOAN',
-            linkPath: "https://easyliftloanform.fcmb.com",
+            linkPath: 'https://easyliftloanform.fcmb.com',
           },
-          { name: "MORTGAGE", linkPath: "http://mortgage.fcmb.com/" },
+          { name: 'MORTGAGE', linkPath: 'http://mortgage.fcmb.com/' },
         ],
       },
       {
-        name: "NON-RESIDENT NIGERIAN (NRN) BANKING",
+        name: 'NON-RESIDENT NIGERIAN (NRN) BANKING',
-        linkPath: "https://www.fcmb.com/non-resident-nigerian",
+        linkPath: 'https://www.fcmb.com/non-resident-nigerian',
       },
       {
-        name: "WAYS TO BANK",
+        name: 'WAYS TO BANK',
-        linkPath: "/ways-to-bank",
+        linkPath: '/ways-to-bank',
         subItems: [
-          { name: "FCMB MOBILE", linkPath: "/fcmb-mobile" },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} MOBILE`, linkPath: '/fcmb-mobile' },
           {
-            name: "RETAIL INTERNET BANKING",
+            name: 'RETAIL INTERNET BANKING',
-            linkPath: "https://ibank.fcmb.com/",
+            linkPath: 'https://ibank.fcmb.com/',
           },
-          { name: "USSD BANKING", linkPath: "/ussd" },
+          { name: 'USSD BANKING', linkPath: '/ussd' },
-          { name: "OUR BRANCH NETWORK", linkPath: "/branch-network" },
+          { name: 'OUR BRANCH NETWORK', linkPath: '/branch-network' },
-          { name: "OUR ATM NETWORK", linkPath: "/atm-network" },
+          { name: 'OUR ATM NETWORK', linkPath: '/atm-network' },
-          { name: "FLASHMECASH", linkPath: "/flashme-cash" },
+          { name: 'FLASHMECASH', linkPath: '/flashme-cash' },
-          { name: "OUR CARDS", linkPath: "/our-cards" },
+          { name: 'OUR CARDS', linkPath: '/our-cards' },
-          { name: "FCMB ELECTRONIC CHANNELS", linkPath: "/e-channels" },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} ELECTRONIC CHANNELS`, linkPath: '/e-channels' },
-          { name: "AGENT BANKING", linkPath: "/agent-banking" },
+          { name: 'AGENT BANKING', linkPath: '/agent-banking' },
           {
-            name: "FCMB SECURE COMMUNICATION",
+            name: `${import.meta.env.VITE_BANK_NAME_SHORT} SECURE COMMUNICATION`,
-            linkPath: "/secure-communication",
+            linkPath: '/secure-communication',
           },
-          { name: "TEMI", linkPath: "/temi" },
+          { name: 'TEMI', linkPath: '/temi' },
         ],
       },
-      { name: "BANCASSURANCE", linkPath: "/bancassurance" },
+      { name: 'BANCASSURANCE', linkPath: '/bancassurance' },
     ],
   },
   {
-    name: "BUSINESS BANKING",
+    name: 'BUSINESS BANKING',
-    linkPath: "/business-banking",
+    linkPath: '/business-banking',
     subItems: [
       {
-        name: "PROPOSITIONS",
+        name: 'PROPOSITIONS',
-        linkPath: "",
+        linkPath: '',
         subItems: [
-          { name: "SHEVENTURES", linkPath: "/she-ventures" },
+          { name: 'SHEVENTURES', linkPath: '/she-ventures' },
-          { name: "BUSINESS ZONE", linkPath: "https://businesszone.fcmb.com/" },
+          { name: 'BUSINESS ZONE', linkPath: 'https://businesszone.fcmb.com/' },
           {
-            name: "FOOD BUSINESS SUPPORT",
+            name: 'FOOD BUSINESS SUPPORT',
-            linkPath: "https://www.fcmb.com/food-business-support/",
+            linkPath: 'https://www.fcmb.com/food-business-support/',
           },
-          { name: "SCHOOL BUSINESS SUPPORT", linkPath: "/school-support" },
+          { name: 'SCHOOL BUSINESS SUPPORT', linkPath: '/school-support' },
         ],
       },
       {
-        name: "CURRENT ACCOUNTS",
+        name: 'CURRENT ACCOUNTS',
-        linkPath: "/business-current-accounts",
+        linkPath: '/business-current-accounts',
         subItems: [
           {
-            name: "CORPORATE CURRENT ACCOUNT",
+            name: 'CORPORATE CURRENT ACCOUNT',
-            linkPath: "/corporate-current-account",
+            linkPath: '/corporate-current-account',
           },
-          { name: "FCMB BUSINESS ACCOUNT", linkPath: "/fcmb-business-account" },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} BUSINESS ACCOUNT`, linkPath: '/fcmb-business-account' },
           {
-            name: "DOMICILIARY CURRENT ACCOUNT",
+            name: 'DOMICILIARY CURRENT ACCOUNT',
-            linkPath: "/business-domiciliary-current-account",
+            linkPath: '/business-domiciliary-current-account',
           },
         ],
       },
       {
-        name: "SAVINGS ACCOUNTS",
+        name: 'SAVINGS ACCOUNTS',
-        linkPath: "/node/178",
+        linkPath: '/node/178',
         subItems: [
           {
-            name: "BUSINESS SAVINGS ACCOUNT",
+            name: 'BUSINESS SAVINGS ACCOUNT',
-            linkPath: "/business-savings-account",
+            linkPath: '/business-savings-account',
           },
         ],
       },
       {
-        name: "LOANS",
+        name: 'LOANS',
-        linkPath: "/business-loans",
+        linkPath: '/business-loans',
         subItems: [
           {
-            name: "SME DEVELOPMENT FINANCE FACILITY",
+            name: 'SME DEVELOPMENT FINANCE FACILITY',
-            linkPath: "/sme-development-finance-facility",
+            linkPath: '/sme-development-finance-facility',
           },
           {
-            name: "SME ASSET FINANCE FACILITY",
+            name: 'SME ASSET FINANCE FACILITY',
-            linkPath: "/sme-asset-finance-facility",
+            linkPath: '/sme-asset-finance-facility',
           },
           {
-            name: "SME WORKING CAPITAL FACILITY",
+            name: 'SME WORKING CAPITAL FACILITY',
-            linkPath: "/sme-working-capital-facility",
+            linkPath: '/sme-working-capital-facility',
           },
-          { name: "QUICK LOAN", linkPath: "/quick-loan" },
+          { name: 'QUICK LOAN', linkPath: '/quick-loan' },
           {
-            name: "SME INVOICE DISCOUNTING FINANCE (IDF) FACILITY",
+            name: 'SME INVOICE DISCOUNTING FINANCE (IDF) FACILITY',
-            linkPath: "/invoice-discounting-loan",
+            linkPath: '/invoice-discounting-loan',
           },
           {
-            name: "SME LOCAL PURCHASE ORDER (LPO) FINANCE FACILITY",
+            name: 'SME LOCAL PURCHASE ORDER (LPO) FINANCE FACILITY',
-            linkPath: "/local-purchase-order-loan",
+            linkPath: '/local-purchase-order-loan',
           },
         ],
       },
-      { name: "BONDS & GUARANTEES", linkPath: "/bonds-and-guarantees" },
+      { name: 'BONDS & GUARANTEES', linkPath: '/bonds-and-guarantees' },
-      { name: "INTERVENTION FUNDS", linkPath: "/intervention-funds" },
+      { name: 'INTERVENTION FUNDS', linkPath: '/intervention-funds' },
-      { name: "TRADE SERVICE", linkPath: "/trade-service" },
+      { name: 'TRADE SERVICE', linkPath: '/trade-service' },
       {
-        name: "PAYMENT & COLLECTION",
+        name: 'PAYMENT & COLLECTION',
-        linkPath: "/payment-and-collection",
+        linkPath: '/payment-and-collection',
         subItems: [
-          { name: "COLLECTION SOLUTIONS", linkPath: "/collection-solutions" },
+          { name: 'COLLECTION SOLUTIONS', linkPath: '/collection-solutions' },
-          { name: "PAYMENT SOLUTIONS", linkPath: "/payment-solutions" },
+          { name: 'PAYMENT SOLUTIONS', linkPath: '/payment-solutions' },
         ],
       },
       {
-        name: "WAYS TO BANK",
+        name: 'WAYS TO BANK',
-        linkPath: "/business-ways-to-bank",
+        linkPath: '/business-ways-to-bank',
         subItems: [
           {
-            name: "BUSINESS INTERNET BANKING",
+            name: 'BUSINESS INTERNET BANKING',
-            linkPath: "https://ibank.fcmb.com/corporate/BbgLoginScreenUI.aspx",
+            linkPath: 'https://ibank.fcmb.com/corporate/BbgLoginScreenUI.aspx',
           },
           {
-            name: "CORPORATE INTERNET BANKING",
+            name: 'CORPORATE INTERNET BANKING',
-            linkPath: "https://www.fcmbonline.com/",
+            linkPath: 'https://www.fcmbonline.com/',
           },
-          { name: "OUR ATM NETWORK", linkPath: "/atm-network2" },
+          { name: 'OUR ATM NETWORK', linkPath: '/atm-network2' },
-          { name: "FCMB ONLINE", linkPath: "/fcmb-online-business" },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} ONLINE`, linkPath: '/fcmb-online-business' },
           {
-            name: "FCMB ELECTRONIC CHANNELS",
+            name: `${import.meta.env.VITE_BANK_NAME_SHORT} ELECTRONIC CHANNELS`,
-            linkPath: "https://www.fcmb.com/e-channels",
+            linkPath: 'https://www.fcmb.com/e-channels',
           },
-          { name: "FCMB BUSINESS APP", linkPath: "/FCMB-business-app" },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} BUSINESS APP`, linkPath: '/FCMB-business-app' },
         ],
       },
     ],
   },
   {
-    name: "CORPORATE BANKING",
+    name: 'CORPORATE BANKING',
-    linkPath: "/cooperate-banking",
+    linkPath: '/cooperate-banking',
     subItems: [
       {
-        name: "FOREIGN EXCHANGE SERVICES",
+        name: 'FOREIGN EXCHANGE SERVICES',
-        linkPath: "/foreign-exchange-services",
+        linkPath: '/foreign-exchange-services',
       },
-      { name: "TRADE SERVICES", linkPath: "/node/166" },
+      { name: 'TRADE SERVICES', linkPath: '/node/166' },
-      { name: "CASH MANAGEMENT SOLUTIONS", linkPath: "/cash-management" },
+      { name: 'CASH MANAGEMENT SOLUTIONS', linkPath: '/cash-management' },
-      { name: "CORPORATE FINANCE", linkPath: "/corporate-finance" },
+      { name: 'CORPORATE FINANCE', linkPath: '/corporate-finance' },
     ],
   },
   {
-    name: "GROUP & SUBSIDIARIES",
+    name: 'GROUP & SUBSIDIARIES',
-    linkPath: "",
+    linkPath: '',
     subItems: [
-      { name: "FCMB GROUP PLC", linkPath: "https://www.fcmbgroup.com/" },
+      { name: `${import.meta.env.VITE_BANK_NAME_SHORT} GROUP PLC`, linkPath: 'https://www.fcmbgroup.com/' },
       {
-        name: "CSL STOCKBROKERS",
+        name: 'CSL STOCKBROKERS',
-        linkPath: "https://www.cslstockbrokers.com/",
+        linkPath: 'https://www.cslstockbrokers.com/',
       },
       {
-        name: "FCMB CAPITAL MARKETS",
+        name: `${import.meta.env.VITE_BANK_NAME_SHORT} CAPITAL MARKETS`,
-        linkPath: "https://www.fcmbcapitalmarketsng.com/",
+        linkPath: 'https://www.fcmbcapitalmarketsng.com/',
       },
       {
-        name: "FCMB ASSET MANAGEMENT",
+        name: `${import.meta.env.VITE_BANK_NAME_SHORT} ASSET MANAGEMENT`,
-        linkPath: "https://www.fcmbassetmanagement.com/index/",
+        linkPath: 'https://www.fcmbassetmanagement.com/index/',
       },
       {
-        name: "FCMB MICROFINANCE BANK",
+        name: `${import.meta.env.VITE_BANK_NAME_SHORT} MICROFINANCE BANK`,
-        linkPath: "/fcmb-microfinance-initiative",
+        linkPath: '/fcmb-microfinance-initiative',
       },
-      { name: "FCMB UK", linkPath: "http://www.fcmbuk.com/" },
+      { name: `${import.meta.env.VITE_BANK_NAME_SHORT} UK`, linkPath: 'http://www.fcmbuk.com/' },
       {
-        name: "FCMB PENSIONS LIMITED",
+        name: `${import.meta.env.VITE_BANK_NAME_SHORT} PENSIONS LIMITED`,
-        linkPath: "https://www.fcmbpensions.com/",
+        linkPath: 'https://www.fcmbpensions.com/',
       },
       {
-        name: "CREDIT DIRECT LIMITED",
+        name: 'CREDIT DIRECT LIMITED',
-        linkPath: "https://www.creditdirect.ng",
+        linkPath: 'https://www.creditdirect.ng',
       },
-      { name: "FCMB TRUSTEES", linkPath: "http://fcmbtrustees.com/" },
+      { name: `${import.meta.env.VITE_BANK_NAME_SHORT} TRUSTEES`, linkPath: 'http://fcmbtrustees.com/' },
     ],
   },
   {
-    name: "ABOUT US",
+    name: 'ABOUT US',
-    linkPath: "/about-us",
+    linkPath: '/about-us',
     subItems: [
       {
-        name: "OUR VISION/MISSION/VALUES",
+        name: 'OUR VISION/MISSION/VALUES',
-        linkPath: "/about-us/vision-mision-core-values",
+        linkPath: '/about-us/vision-mision-core-values',
       },
-      { name: "OUR HISTORY", linkPath: "/about-us/our-history" },
+      { name: 'OUR HISTORY', linkPath: '/about-us/our-history' },
       {
-        name: "INVESTOR RELATIONS",
+        name: 'INVESTOR RELATIONS',
-        linkPath: "http://www.fcmbgroup.com/investor-relations",
+        linkPath: 'http://www.fcmbgroup.com/investor-relations',
       },
-      { name: "CSR", linkPath: "/corporate-social-responsibility/index.html" },
+      { name: 'CSR', linkPath: '/corporate-social-responsibility/index.html' },
-      { name: "SUSTAINABILITY", linkPath: "/sustainability/index.html" },
+      { name: 'SUSTAINABILITY', linkPath: '/sustainability/index.html' },
-      { name: "OUR LEADERSHIP", linkPath: "/about-us/our-leadership" },
+      { name: 'OUR LEADERSHIP', linkPath: '/about-us/our-leadership' },
-      { name: "BOARD OF DIRECTORS", linkPath: "/about-us/board-of-directors" },
+      { name: 'BOARD OF DIRECTORS', linkPath: '/about-us/board-of-directors' },
       {
-        name: "MEDIA RELATIONS",
+        name: 'MEDIA RELATIONS',
-        linkPath: "/media-relations",
+        linkPath: '/media-relations',
         subItems: [
-          { name: "PRESS RELEASES", linkPath: "/press-releases" },
+          { name: 'PRESS RELEASES', linkPath: '/press-releases' },
-          { name: "MEDIA STATEMENTS", linkPath: "/press-statements" },
+          { name: 'MEDIA STATEMENTS', linkPath: '/press-statements' },
         ],
       },
-      { name: "AWARDS AND RECOGNITION", linkPath: "/awards" },
+      { name: 'AWARDS AND RECOGNITION', linkPath: '/awards' },
       {
-        name: "OUR POLICY",
+        name: 'OUR POLICY',
-        linkPath: "/our-policies",
+        linkPath: '/our-policies',
         subItems: [
-          { name: "BUSINESS CONTINUITY", linkPath: "/business-continuity" },
+          { name: 'BUSINESS CONTINUITY', linkPath: '/business-continuity' },
           {
-            name: "CORPORATE GOVERNANCE POLICY",
+            name: 'CORPORATE GOVERNANCE POLICY',
-            linkPath: "/corporate-governance",
+            linkPath: '/corporate-governance',
           },
-          { name: "PRIVACY POLICY", linkPath: "/privacy-policy" },
+          { name: 'PRIVACY POLICY', linkPath: '/privacy-policy' },
-          { name: "QUALITY POLICY", linkPath: "/quality-policy" },
+          { name: 'QUALITY POLICY', linkPath: '/quality-policy' },
         ],
       },
     ],
   },
   {
-    name: "MY BANK AND I",
+    name: 'MY BANK AND I',
-    linkPath: "",
+    linkPath: '',
     subItems: [
-      { name: "TELEPHONE SELF SERVICE", linkPath: "/telephone-self-service" },
+      { name: 'TELEPHONE SELF SERVICE', linkPath: '/telephone-self-service' },
       {
-        name: "CURRENT CAMPAIGNS/PROMOS",
+        name: 'CURRENT CAMPAIGNS/PROMOS',
-        linkPath: "/current-campaigns-promos",
+        linkPath: '/current-campaigns-promos',
         subItems: [
           {
-            name: "BOOK YOUR FLIGHTS AND PAY IN INSTALMENTS WITH FCMB",
+            name: `BOOK YOUR FLIGHTS AND PAY IN INSTALMENTS WITH ${import.meta.env.VITE_BANK_NAME_SHORT}`,
-            linkPath: "/247travels",
+            linkPath: '/247travels',
           },
-          { name: "REFER AND WIN", linkPath: "/refer-and-win" },
+          { name: 'REFER AND WIN', linkPath: '/refer-and-win' },
-          { name: "CARD DISCOUNTS", linkPath: "/card-discounts" },
+          { name: 'CARD DISCOUNTS', linkPath: '/card-discounts' },
           {
-            name: "FLEXX WRITING CHALLENGE",
+            name: 'FLEXX WRITING CHALLENGE',
-            linkPath: "https://flexxzone.fcmb.com/writing-challenge/",
+            linkPath: 'https://flexxzone.fcmb.com/writing-challenge/',
           },
           {
-            name: "FLEXXPRENEUR",
+            name: 'FLEXXPRENEUR',
             linkPath:
-              "https://flexxzone.fcmb.com/2020/07/flexxpreneur-is-back-2/",
+              'https://flexxzone.fcmb.com/2020/07/flexxpreneur-is-back-2/',
           },
           {
-            name: "3-MONTH FREE BANKING",
+            name: '3-MONTH FREE BANKING',
-            linkPath: "https://www.fcmb.com/campaign/smebanking",
+            linkPath: 'https://www.fcmb.com/campaign/smebanking',
           },
         ],
       },
-      { name: "CAREERS", linkPath: "/career" },
+      { name: 'CAREERS', linkPath: '/career' },
-      { name: "CUSTOMER FEEDBACK", linkPath: "/customer-feedback" },
+      { name: 'CUSTOMER FEEDBACK', linkPath: '/customer-feedback' },
-      { name: "CUSTOMER SERVICE", linkPath: "/customer-service" },
+      { name: 'CUSTOMER SERVICE', linkPath: '/customer-service' },
     ],
   },
 ];
 
 export const socialsIcons = [
-  { name: "facebook", image: FBook, link: process.VITE_FACEBOOK_URL },
+  { name: 'facebook', image: FBook, link: process.VITE_FACEBOOK_URL },
-  { name: "twitter", image: Twitter, link: process.VITE_TWITTER_URL },
+  { name: 'twitter', image: Twitter, link: process.VITE_TWITTER_URL },
-  { name: "instagram", image: Instagram, link: process.VITE_INSTAGRAM_URL },
+  { name: 'instagram', image: Instagram, link: process.VITE_INSTAGRAM_URL },
 ];
 
 export const footerItems = [
   {
-    category: "PERSONAL BANKING",
+    category: 'PERSONAL BANKING',
     subItems: [
-      { text: "CURRENT ACCOUNTS", href: "/current-accounts" },
+      { text: 'CURRENT ACCOUNTS', href: '/current-accounts' },
-      { text: "SAVINGS ACCOUNTS", href: "/savings-accounts" },
+      { text: 'SAVINGS ACCOUNTS', href: '/savings-accounts' },
-      { text: "INVESTMENTS", href: "/investment-accounts" },
+      { text: 'INVESTMENTS', href: '/investment-accounts' },
-      { text: "LOANS AND CREDIT CARDS", href: "/loans-and-credit-cards" },
+      { text: 'LOANS AND CREDIT CARDS', href: '/loans-and-credit-cards' },
       {
-        text: "NON-RESIDENT NIGERIAN (NRN) BANKING",
+        text: 'NON-RESIDENT NIGERIAN (NRN) BANKING',
-        href: "https://www.fcmb.com/non-resident-nigerian",
+        href: 'https://www.fcmb.com/non-resident-nigerian',
       },
-      { text: "WAYS TO BANK", href: "/ways-to-bank" },
+      { text: 'WAYS TO BANK', href: '/ways-to-bank' },
-      { text: "BANCASSURANCE", href: "/bancassurance" },
+      { text: 'BANCASSURANCE', href: '/bancassurance' },
     ],
   },
   {
-    category: "BUSINESS BANKING",
+    category: 'BUSINESS BANKING',
     subItems: [
-      { text: "PROPOSITIONS", href: "" },
+      { text: 'PROPOSITIONS', href: '' },
-      { text: "CURRENT ACCOUNTS", href: "/business-current-accounts" },
+      { text: 'CURRENT ACCOUNTS', href: '/business-current-accounts' },
-      { text: "SAVINGS ACCOUNTS", href: "/node/178" },
+      { text: 'SAVINGS ACCOUNTS', href: '/node/178' },
-      { text: "LOANS", href: "/business-loans" },
+      { text: 'LOANS', href: '/business-loans' },
-      { text: "BONDS & GUARANTEES", href: "/bonds-and-guarantees" },
+      { text: 'BONDS & GUARANTEES', href: '/bonds-and-guarantees' },
-      { text: "INTERVENTION FUNDS", href: "/intervention-funds" },
+      { text: 'INTERVENTION FUNDS', href: '/intervention-funds' },
-      { text: "TRADE SERVICE", href: "/trade-service" },
+      { text: 'TRADE SERVICE', href: '/trade-service' },
-      { text: "PAYMENT & COLLECTION", href: "/payment-and-collection" },
+      { text: 'PAYMENT & COLLECTION', href: '/payment-and-collection' },
-      { text: "WAYS TO BANK", href: "/business-ways-to-bank" },
+      { text: 'WAYS TO BANK', href: '/business-ways-to-bank' },
     ],
   },
   {
-    category: "COOPORATE BANKING",
+    category: 'COOPORATE BANKING',
     subItems: [
-      { text: "FOREIGN EXCHANGE SERVICES", href: "/foreign-exchange-services" },
+      { text: 'FOREIGN EXCHANGE SERVICES', href: '/foreign-exchange-services' },
-      { text: "TRADE SERVICES", href: "/node/166" },
+      { text: 'TRADE SERVICES', href: '/node/166' },
-      { text: "CASH MANAGEMENT SOLUTIONS", href: "/cash-management" },
+      { text: 'CASH MANAGEMENT SOLUTIONS', href: '/cash-management' },
-      { text: "COOPORATE FINANCE", href: "/corporate-finance" },
+      { text: 'COOPORATE FINANCE', href: '/corporate-finance' },
     ],
   },
   {
-    category: "GROUP & SUBSIDIARIES",
+    category: 'GROUP & SUBSIDIARIES',
     subItems: [
-      { text: "FCMB GROUP PLC", href: "https://www.fcmbgroup.com/" },
+      { text: `${import.meta.env.VITE_BANK_NAME_SHORT} GROUP PLC`, href: 'https://www.fcmbgroup.com/' },
-      { text: "CSL STOCKBROKERS", href: "https://www.cslstockbrokers.com/" },
+      { text: 'CSL STOCKBROKERS', href: 'https://www.cslstockbrokers.com/' },
       {
-        text: "FCMB CAPITAL MARKETS",
+        text: `${import.meta.env.VITE_BANK_NAME_SHORT} CAPITAL MARKETS`,
-        href: "https://www.fcmbcapitalmarketsng.com/",
+        href: 'https://www.fcmbcapitalmarketsng.com/',
       },
       {
-        text: "FCMB ASSET MANAGEMENT",
+        text: `${import.meta.env.VITE_BANK_NAME_SHORT} ASSET MANAGEMENT`,
-        href: "https://www.fcmbassetmanagement.com/index/",
+        href: 'https://www.fcmbassetmanagement.com/index/',
       },
-      { text: "FCMB MICROFINANCE BANK", href: "/fcmb-microfinance-initiative" },
+      { text: `${import.meta.env.VITE_BANK_NAME_SHORT} MICROFINANCE BANK`, href: '/fcmb-microfinance-initiative' },
-      { text: "FCMB UK", href: "http://www.fcmbuk.com/" },
+      { text: `${import.meta.env.VITE_BANK_NAME_SHORT} UK`, href: 'http://www.fcmbuk.com/' },
-      { text: "FCMB PENSIONS LIMITED", href: "https://www.fcmbpensions.com/" },
+      { text: `${import.meta.env.VITE_BANK_NAME_SHORT} PENSIONS LIMITED`, href: 'https://www.fcmbpensions.com/' },
-      { text: "CREDIT DIRECT LIMITED", href: "https://www.creditdirect.ng" },
+      { text: 'CREDIT DIRECT LIMITED', href: 'https://www.creditdirect.ng' },
-      { text: "FCMB TRUSTEES", href: "http://fcmbtrustees.com/" },
+      { text: `${import.meta.env.VITE_BANK_NAME_SHORT} TRUSTEES`, href: 'http://fcmbtrustees.com/' },
     ],
   },
   {
-    category: "ABOUT US",
+    category: 'ABOUT US',
     subItems: [
       {
-        text: "OUR VISION/MISSION/VALUES",
+        text: 'OUR VISION/MISSION/VALUES',
-        href: "/about-us/vision-mision-core-values",
+        href: '/about-us/vision-mision-core-values',
       },
-      { text: "OUR HISTORY", href: "/about-us/our-history" },
+      { text: 'OUR HISTORY', href: '/about-us/our-history' },
       {
-        text: "INVESTOR RELATIONS",
+        text: 'INVESTOR RELATIONS',
-        href: "http://www.fcmbgroup.com/investor-relations",
+        href: 'http://www.fcmbgroup.com/investor-relations',
       },
-      { text: "CSR", href: "/corporate-social-responsibility/index.html" },
+      { text: 'CSR', href: '/corporate-social-responsibility/index.html' },
-      { text: "SUSTAINABILITY", href: "/sustainability/index.html" },
+      { text: 'SUSTAINABILITY', href: '/sustainability/index.html' },
-      { text: "OUR LEADERSHIP", href: "/about-us/our-leadership" },
+      { text: 'OUR LEADERSHIP', href: '/about-us/our-leadership' },
-      { text: "BOARD OF DIRECTORS", href: "/about-us/board-of-directors" },
+      { text: 'BOARD OF DIRECTORS', href: '/about-us/board-of-directors' },
-      { text: "MEDIA RELATIONS", href: "/media-relations" },
+      { text: 'MEDIA RELATIONS', href: '/media-relations' },
-      { text: "AWARDS AND RECOGNITION", href: "/awards" },
+      { text: 'AWARDS AND RECOGNITION', href: '/awards' },
-      { text: "OUR POLICY", href: "/our-policies" },
+      { text: 'OUR POLICY', href: '/our-policies' },
     ],
   },
   {
-    category: "MY BANK AND I",
+    category: 'MY BANK AND I',
     subItems: [
-      { text: "TELEPHONE SELF SERVICE", href: "/telephone-self-service" },
+      { text: 'TELEPHONE SELF SERVICE', href: '/telephone-self-service' },
-      { text: "CURRENT CAMPAIGNS/PROMOS", href: "/current-campaigns-promos" },
+      { text: 'CURRENT CAMPAIGNS/PROMOS', href: '/current-campaigns-promos' },
-      { text: "CAREERS", href: "/career" },
+      { text: 'CAREERS', href: '/career' },
-      { text: "CUSTOMER FEEDBACK", href: "/customer-feedback" },
+      { text: 'CUSTOMER FEEDBACK', href: '/customer-feedback' },
-      { text: "CUSTOMER SERVICE", href: "/customer-service" },
+      { text: 'CUSTOMER SERVICE', href: '/customer-service' },
     ],
   },
 ];
 
 export const footerSocialLinks = [
   {
-    href: "https://www.facebook.com/FcmbMyBank/",
+    href: 'https://www.facebook.com/FcmbMyBank/',
     icon: FBookWhite,
   },
   {
-    href: "https://twitter.com/myfcmb/",
+    href: 'https://twitter.com/myfcmb/',
     icon: XWhite,
   },
   {
-    href: "https://www.linkedin.com/company/first-city-monument-bank-ltd/",
+    href: 'https://www.linkedin.com/company/first-city-monument-bank-ltd/',
     icon: LinkedInWhite,
   },
   {
-    href: "https://www.youtube.com/user/fcmbplc",
+    href: 'https://www.youtube.com/user/fcmbplc',
     icon: YoutubeWhite,
   },
   {
-    href: "https://www.instagram.com/myfcmb/",
+    href: 'https://www.instagram.com/myfcmb/',
     icon: InstagramWhite,
   },
   {
-    href: "https://api.whatsapp.com/send?phone=09099999814",
+    href: 'https://api.whatsapp.com/send?phone=09099999814',
     icon: WhatsappWhite,
   },
 ];
 
 export const footerCustomerLinks = [
   {
-    text: "PRIVACY POLICY",
+    text: 'PRIVACY POLICY',
-    href: "https://www.fcmb.com/privacy-policy",
+    href: 'https://www.fcmb.com/privacy-policy',
   },
   {
-    text: "PRESS RELEASES",
+    text: 'PRESS RELEASES',
-    href: "/press-releases",
+    href: '/press-releases',
   },
   {
-    text: "SHARE PRICE",
+    text: 'SHARE PRICE',
-    href: "/",
+    href: '/',
   },
   {
-    text: "WHISTLE BLOWER",
+    text: 'WHISTLE BLOWER',
-    href: "/fcmb-whistle-blower-form",
+    href: '/fcmb-whistle-blower-form',
   },
   {
-    text: "FRAUD PREVENTION",
+    text: 'FRAUD PREVENTION',
-    href: "/customer-service",
+    href: '/customer-service',
   },
   {
-    text: "AML",
+    text: 'AML',
-    href: "/customer-service",
+    href: '/customer-service',
   },
   {
-    text: "CAREERS",
+    text: 'CAREERS',
-    href: "/career",
+    href: '/career',
   },
 ];
+
+export const contactDetails = [
+  { name: 'Call', value: import.meta.env.VITE_CALL_ENDPOINT },
+  { name: 'Email', value: import.meta.env.VITE_EMAIL_ENDPOINT },
+];