added props to docker compose file

docker-compose.yml

@@ -14,5 +14,7 @@ services:
       - "5173" 
     environment:
       - PORT=${DIGIFI_PORT}
+    tty: true
+    stdin_open: true
 volumes:
   src:

package.json

@@ -15,6 +15,7 @@
     "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/components/Dashboard/DashboardFormInit.tsx

@@ -1,11 +1,16 @@
 import { Button, InputCompOne, Stepper } from "..";
-import { useNavigate } from "react-router-dom";
-import { RouteHandler } from "../../router/routes";
+// import { useNavigate } from "react-router-dom";
+// import { RouteHandler } from "../../router/routes";
 
-export default function DashboardFormInit() {
-  let navigate = useNavigate();
+type Props = {
+  handleNextStep:()=>any
+}
+
+export default function DashboardFormInit({handleNextStep}:Props) {
+
+  // let navigate = useNavigate();
+  // const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
 
-  const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
   return (
     <div className="w-full">
       <div className="w-full flex justify-center">
@@ -26,15 +31,18 @@ export default function DashboardFormInit() {
           name="applyIshInput"
           label="For How Many Months?"
           labelClass="font-bold text-[1.125rem]"
-          input
-          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-          placeholder="12 Months"
+          select={true}
+          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          // selectValue=''
+          selectOptions={duration}
+          // onChange={()=>{}}
         />
         <InputCompOne
           parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
           name="applyIshInput"
           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"
@@ -43,9 +51,23 @@ export default function DashboardFormInit() {
           className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
           text="Next"
           type="button"
-          onClick={navigateToProfile}
+          onClick={handleNextStep}
         />
       </div>
     </div>
   );
 }
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+
+const duration: Option[] = [
+  { 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,6 +1,10 @@
 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 {}
 
@@ -8,15 +12,20 @@ const DashboardHome: FC<DashboardHomeProps> = () => {
   const [step, setStep] = React.useState(1);
 
   const handleNextStep = () => {
-    if (step < 2) {
+    if (step < 7) {
       setStep(step + 1);
     }
   };
 
   return (
     <div className="w-full">
-      {step === 1 && <DashboardHomeIntro handleNextStep={handleNextStep} />}
-      {step === 2 && <DashboardFormInit />}
+      {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} />}
+      {step === 7 && <DashboardHomeIntro step={step} handleNextStep={handleNextStep} />}
     </div>
   );
 };

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -69,26 +69,49 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
 
 interface DashboardHomeIntroProps {
   handleNextStep: any;
+  step?:number|string
 }
 
-const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep }) => {
+const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step }) => {
   return (
     <>
-      <h1 className="font-bold my-5 text-2xl">Hello, Olanrewaju</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>
+    {step == 1 ?
+      <>
+        <h1 className="font-bold my-5 text-2xl">Hello, Olanrewaju</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, Olanrewaju</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>
+    </>
+    }
     </>
   );
 };

src/components/Dashboard/DashboardProfile.tsx

@@ -1,21 +1,34 @@
-import { Button, InputCompOne, Stepper } from "..";
+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="w-full flex justify-center">
-        <Stepper step={1} />
+      <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="mt-[3.25rem] flex flex-col gap-9">
-        <div className="flex items-center gap-[4.125rem]">
+      <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="Select your gender"
+            label="Full name"
             labelClass="font-bold text-[1.125rem]"
             input
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="Male"
+            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"
@@ -26,17 +39,6 @@ export default function DashboardProfile() {
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
             placeholder="Somewhere in lagos"
           />
-        </div>
-        <div className="flex items-center gap-[4.125rem]">
-          <InputCompOne
-            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
-            label="Marital status"
-            labelClass="font-bold text-[1.125rem]"
-            input
-            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="Single"
-          />{" "}
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
@@ -46,22 +48,24 @@ export default function DashboardProfile() {
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
             placeholder="Lagos"
           />
-        </div>
-        <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"   
-        />
-        <Button
-          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-          text="Next"
-          type="button"
-          // onClick={navigateToProfile}
-        />
+          <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,46 @@
+import { Button, InputCompOne, Stepper } from '../../shared/index';
+// import { useNavigate } from "react-router-dom";
+// import { RouteHandler } from '../../../router/routes';
+
+type Props = {
+  handleNextStep:()=>any
+}
+
+export default function DashboardHomeAttestation({handleNextStep}:Props) {
+  //     let navigate = useNavigate();
+  // const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
+  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>
+      <div className="flex flex-col gap-9">
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            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"
+          />
+        </div>
+        <div className='max-w-[25.875rem] flex gap-4 items-start'>
+            <input type='checkbox' className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' />
+            <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>
+        <Button
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+          text="Apply"
+          type="button"
+          onClick={handleNextStep}
+        />
+      </div>
+    </div>
+  );
+}

src/components/Dashboard/home/DashboardHomeDetail.tsx

@@ -0,0 +1,105 @@
+import { Button, InputCompOne, Stepper } from '../../shared/index';
+
+type Props = {
+  handleNextStep:()=>any
+}
+
+export default function DashboardHomeDetail({handleNextStep}:Props) {
+  return (
+    <div className="w-full">
+      <div className="w-full flex justify-center">
+        <Stepper step={1} />
+      </div>
+      <div className="mt-[3.25rem] flex flex-col gap-9">
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            label="Select your gender"
+            labelClass="font-bold text-[1.125rem]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={gender}
+            // onChange={()=>{}}
+          />
+          <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"
+          />
+        </div>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            label="Marital status"
+            labelClass="font-bold text-[1.125rem]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={maritalStatus}
+            // onChange={()=>{}}
+          />
+          <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]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={state}
+            // onChange={()=>{}}
+          />
+        </div>
+        <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"   
+        />
+        <Button
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+          text="Next"
+          type="button"
+          onClick={handleNextStep}
+        />
+      </div>
+    </div>
+  );
+}
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+
+const gender: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "male", label: "Male" },
+  { value: "female", label: "Female" },
+  { value: "others", label: "Prefer not to say" },
+];
+
+const maritalStatus: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "single", label: "Single" },
+  { value: "married", label: "Married" },
+  { value: "divorced", label: "Divorced" },
+];
+
+const state: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "abia", label: "Abia" },
+  { value: "imo", label: "Imo" },
+  { value: "lagos", label: "Lagos" },
+];

src/components/Dashboard/home/DashboardHomeEmploymentInfo.tsx

@@ -0,0 +1,162 @@
+import { Button, InputCompOne, Stepper } from '../../shared/index';
+
+type Props = {
+  handleNextStep:()=>any
+}
+
+export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
+  return (
+    <div className="w-full">
+      <div className="w-full flex justify-center">
+        <Stepper step={2} />
+      </div>
+      <div className="mt-[3.25rem] flex flex-col gap-9">
+        <p className='text-red-500 text-lg md:text-2xl'>Employment Informaton</p>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            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"
+          />
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            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"
+          />
+        </div>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Job Sector"
+            // labelClass="font-bold text-[1.125rem]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={jobSection}
+            // onChange={()=>{}}
+          />
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Select your industry"
+            // labelClass="font-bold text-[1.125rem]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={industry}
+            // onChange={()=>{}}
+          />
+        </div>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Date of resumption"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="12/12/2015"
+          />
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            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"
+          />
+        </div>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Annual Income"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="1,200,000"
+          />
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Net monthly salary"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="100,000"
+          />
+        </div>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Salary payment date"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="30th of every month"
+          />{" "}
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            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"
+          />
+        </div>
+        <InputCompOne
+          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          name="applyIshInput"
+          floatLabel="Highest level of education"
+          // labelClass="font-bold text-[1.125rem]"
+          select={true}
+          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          // selectValue=''
+          selectOptions={qualification}
+          // onChange={()=>{}}
+        />
+        <Button
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+          text="Next"
+          type="button"
+          onClick={handleNextStep}
+        />
+      </div>
+    </div>
+  );
+}
+
+
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+
+const jobSection: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "private (non academic)", label: "Private (non academic)" },
+];
+
+const industry: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "engineering", label: "Engineering" },
+];
+
+const qualification: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "b.sc + professional qualification", label: "B.Sc + Professional Qualification" },
+];

src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx

@@ -0,0 +1,126 @@
+import { Button, InputCompOne, Stepper } from '../../shared/index';
+
+type Props = {
+  handleNextStep:()=>any
+}
+
+export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
+  return (
+    <div className="w-full">
+      <div className="w-full flex justify-center">
+        <Stepper step={3} />
+      </div>
+      <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="applyIshInput"
+                    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"
+                />
+                <InputCompOne
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    name="applyIshInput"
+                    floatLabel="Relationship"
+                    // labelClass="font-bold text-[1.125rem]"
+                    input
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                    placeholder="Sister"
+                />
+                <InputCompOne
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    name="applyIshInput"
+                    floatLabel="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"
+                    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"
+                />
+                <InputCompOne
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    name="applyIshInput"
+                    floatLabel="BVN"
+                    // labelClass="font-bold text-[1.125rem]"
+                    input
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                    placeholder="2228457896"
+                />
+            </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="applyIshInput"
+                        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"
+                    />
+                    <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="Relationship"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="Sister"
+                    />
+                    <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="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"
+                        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"
+                    />
+                    <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="BVN"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="2228457896"
+                    />
+              </div>
+            </div>
+        </div>
+        <Button
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+          text="Next"
+          type="button"
+          onClick={handleNextStep}
+        />
+      </div>
+    </div>
+  );
+}

src/components/Icons/Icons.tsx

@@ -1,10 +1,13 @@
+import { FaCaretDown } from "react-icons/fa";
+
 import dashIcon from "../../assets/images/dashboard/dashDefault.svg";
 type Props = {
   name: string;
   fillColor?: string;
+  className?:string;
 };
 
-export default function Icons({ name, fillColor }: Props) {
+export default function Icons({ name, fillColor, className }: Props) {
   return (
     <>
       {name == "home" ? (
@@ -106,7 +109,9 @@ export default function Icons({ name, fillColor }: Props) {
             fill={fillColor ? fillColor : "#FFF"}
           />
         </svg>
-      ) : name == "dash-icon" ? (
+      ) :name == 'arrow-down'?
+          <FaCaretDown className={`text-xl ${className && className}`} />
+        :name == "dash-icon" ? (
         <img src={dashIcon} alt="dash-icon" />
       ) : null}
     </>

src/components/shared/InputCompOne.tsx

@@ -1,10 +1,12 @@
 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;
@@ -20,7 +22,6 @@ export interface InputCompOneProps {
   inputClass?: string;
   parentInputClass?: string;
   selectClass?: string;
-  parentSelectClass?: string;
   parentClass?: string;
   maxLength?: number;
   error?: string;
@@ -33,6 +34,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       labelClass,
       labelSpan,
       labelSpanClass,
+      floatLabel,
       placeholder,
       value,
       onChange,
@@ -47,7 +49,6 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       inputClass,
       parentInputClass,
       selectClass,
-      parentSelectClass,
       parentClass,
       maxLength,
       error,
@@ -57,14 +58,14 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
     return (
       <div className={parentClass}>
         {label && (
-          <label htmlFor="" className={labelClass}>
+          <label htmlFor={label ? label : floatLabel} className={labelClass}>
             {label}
             {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
             {error && <span className='text-[10px] text-red-500'>{error}</span>}
           </label>
         )}
         {input && (
-          <div className={parentInputClass}>
+          <div className={`relative ${parentInputClass}`}>
             <input
               type={inputType}
               placeholder={placeholder}
@@ -74,18 +75,26 @@ 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={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
+              >{floatLabel}</label>
+            }
           </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 }) => (
                 <option key={value} value={value}>
@@ -93,6 +102,16 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
                 </option>
               ))}
             </select>
+            {floatLabel &&
+              <label
+                htmlFor={label ? label : floatLabel}
+                className={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 transition-all duration-500`}
+              >{floatLabel}</label>
+            }
+            {/* select custon arrow */}
+            <div className='absolute right-4 top-1/2 -translate-y-1/2'>
+              <Icons name='arrow-down' />
+            </div>
           </div>
         )}
       </div>