added steps to loan application

2024-04-22 15:42:40 +01:00
parent 085b2d4aaa
commit 9ce7110a5d
8 changed files with 482 additions and 59 deletions
@@ -0,0 +1,133 @@
+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"
+            label="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"
+            label="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"
+            label="Job Sector"
+            labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="Technology"
+          />
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            label="Sector"
+            labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="Engineering"
+          />
+        </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="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"
+            label="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"
+            label="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"
+            label="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"
+            label="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"
+            label="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"
+          label="Highest level of education"
+          labelClass="font-bold text-[1.125rem]"
+          input
+          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          placeholder="B.sc"   
+        />
+        <Button
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+          text="Next"
+          type="button"
+          onClick={handleNextStep}
+        />
+      </div>
+    </div>
+  );
+}