all states added

src/components/Dashboard/employmentDetails/EmploymentDetails.tsx

@@ -20,12 +20,12 @@ type Props = {
 const initialValues = {
   job_title: "",
   name: "",
-  sector: "",
+  job_sector: "",
   industry: "",
   start_date: "",
   official_email:"",
   annual_salary: "",
-  monthly_salary: "",
+  net_montlty: "",
   salary_date: "",
   employee_id: "",
   highest_eductaion: "",
@@ -44,7 +44,7 @@ const validationSchema = Yup.object().shape({
       then: () => Yup.string().required('required'),
       otherwise: () => Yup.string(),
     }),
-  sector: Yup.string().when('isChecked', {
+  job_sector: Yup.string().when('isChecked', {
       is: true, 
       then: () => Yup.string().required('required'),
     }),
@@ -67,7 +67,7 @@ const validationSchema = Yup.object().shape({
       }
       return true;
     }),
-  monthly_salary: Yup.string()
+  net_montlty: Yup.string()
     .required("Required")
     .test("no-e", "Invalid", (value:any) => {
       if (value && /^[0-9]*$/.test(value) == false) {
@@ -173,6 +173,7 @@ export default function EmploymentDetail({handleNextStep}:Props) {
                             floatLabel="Employer name"
                             // labelClass="font-bold text-[1.125rem]"
                             input
+                            disabled={true}
                             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                             placeholder="Mr. Mark John"
                             value={props.values.name}
@@ -185,6 +186,7 @@ export default function EmploymentDetail({handleNextStep}:Props) {
                             floatLabel="Employers official email"
                             // labelClass="font-bold text-[1.125rem]"
                             input
+                            disabled={true}
                             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                             placeholder="example@gmail.com"
                             value={props.values.official_email}
@@ -197,23 +199,25 @@ export default function EmploymentDetail({handleNextStep}:Props) {
                             floatLabel="Select your industry"
                             // labelClass="font-bold text-[1.125rem]"
                             select={true}
+                            disabled={true}
                             selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                            selectOptions={industry}
+                            selectOptions={props.values.industry}
                             selectValue={props.values.industry}
                             onChange={props.handleChange}
                             error={(props.errors.industry && props.touched.industry) ? props.errors.industry : ''}
                           />
                           <InputCompOne
                             parentClass="w-full"
-                            name="sector"
+                            name="job_sector"
                             floatLabel="Job Sector"
                             // labelClass="font-bold text-[1.125rem]"
                             select={true}
+                            disabled={true}
                             selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                            selectOptions={jobSector}
+                            selectOptions={props.values.job_sector}
-                            selectValue={props.values.sector}
+                            selectValue={props.values.job_sector}
                             onChange={props.handleChange}
-                            error={(props.errors.sector && props.touched.sector) ? props.errors.sector : ''}
+                            error={(props.errors.job_sector && props.touched.job_sector) ? props.errors.job_sector : ''}
                           />
                         </div>
                       </div>
@@ -225,6 +229,7 @@ export default function EmploymentDetail({handleNextStep}:Props) {
                           floatLabel="Job Title"
                           // labelClass="font-bold text-[1.125rem]"
                           input
+                          disabled={true}
                           inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                           placeholder="Software Engineer"
                           value={props.values.job_title}
@@ -237,6 +242,7 @@ export default function EmploymentDetail({handleNextStep}:Props) {
                           floatLabel="Highest level of education"
                           // labelClass="font-bold text-[1.125rem]"
                           select={true}
+                          disabled={true}
                           selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                           selectOptions={highestEductaion}
                           selectValue={props.values.highest_eductaion}
@@ -250,6 +256,7 @@ export default function EmploymentDetail({handleNextStep}:Props) {
                             floatLabel="Date of resumption"
                             // labelClass="font-bold text-[1.125rem]"
                             input
+                            disabled={true}
                             inputType='text'
                             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                             placeholder="12/12/2015"
@@ -263,6 +270,7 @@ export default function EmploymentDetail({handleNextStep}:Props) {
                             floatLabel="Salary payment date"
                             // labelClass="font-bold text-[1.125rem]"
                             input
+                            disabled={true}
                             inputType='text'
                             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                             placeholder="30th of every month"
@@ -278,6 +286,7 @@ export default function EmploymentDetail({handleNextStep}:Props) {
                             floatLabel="Annual Income"
                             // labelClass="font-bold text-[1.125rem]"
                             input
+                            disabled={true}
                             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
                             placeholder="1,200,000"
                             value={FormatAmount(props.values.annual_salary)}
@@ -286,15 +295,16 @@ export default function EmploymentDetail({handleNextStep}:Props) {
                           />
                           <InputCompOne
                             parentClass="w-full"
-                            name="monthly_salary"
+                            name="net_montlty"
                             floatLabel="Net monthly salary"
                             // labelClass="font-bold text-[1.125rem]"
                             input
+                            disabled={true}
                             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
                             placeholder="100,000"
-                            value={FormatAmount(props.values.monthly_salary)}
+                            value={FormatAmount(props.values.net_montlty)}
                             onChange={props.handleChange}
-                            error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
+                            error={(props.errors.net_montlty && props.touched.net_montlty) ? props.errors.net_montlty : ''}
                           />
                         </div>
                         <InputCompOne
@@ -303,6 +313,7 @@ export default function EmploymentDetail({handleNextStep}:Props) {
                           floatLabel="Employee ID"
                           // labelClass="font-bold text-[1.125rem]"
                           input
+                          disabled={true}
                           inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                           placeholder="LS/001/005"
                           value={props.values.employee_id}

src/components/Dashboard/home/DashboardHomeDetail.tsx

@@ -1,5 +1,7 @@
 import { Button, InputCompOne, Stepper } from '../../shared/index';
 
+import { state } from '../../../utils/states';
+
 import {Formik, Form} from 'formik'
 import * as Yup from "yup";
 
@@ -13,7 +15,7 @@ const initialValues = {
   marital_status: "",
   state: "",
   email:"",
-  country:""
+  country:"NG"
 };
 
 // To get the validation schema
@@ -171,16 +173,6 @@ const maritalStatus: SelectOption = {
   ]
 }
 
-const state: SelectOption = {
-  loading: false,
-  data: [
-    { value: "", label: "Please Select" },
-    { value: "abia", label: "Abia" },
-    { value: "imo", label: "Imo" },
-    { value: "lagos", label: "Lagos" },
-  ]
-}
-
 const country: SelectOption = {
   loading: false,
   data: [

src/components/shared/InputCompOne.tsx

@@ -103,7 +103,9 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               onChange={onChange}
               disabled={disabled}
             >
-              {selectOptions.loading ?
+              {typeof(selectOptions) == 'string' ?
+              <option value={selectValue}>{selectValue}</option>
+              :selectOptions.loading ?
               <option value=''>Loading...</option>
               : selectOptions.data.length && name == 'employer_uid' ?
                 <>

src/utils/states.ts

@@ -0,0 +1,160 @@
+interface SelectOption {
+    loading: boolean;
+    data: {value: string;
+    label: string}[]
+  }
+
+export const state: SelectOption = {
+    loading: false,
+    data: [
+      { value: "", label: "Please Select" },
+      {
+          "value": "abia",
+          "label": "Abia"
+      },
+      {
+          "value": "adamawa",
+          "label": "Adamawa"
+      },
+      {
+          "value": "akwa ibom",
+          "label": "Akwa Ibom"
+      },
+      {
+          "value": "anambra",
+          "label": "Anambra"
+      },
+      {
+          "value": "bauchi",
+          "label": "Bauchi"
+      },
+      {
+          "value": "bayelsa",
+          "label": "Bayelsa"
+      },
+      {
+          "value": "benue",
+          "label": "Benue"
+      },
+      {
+          "value": "borno",
+          "label": "Borno"
+      },
+      {
+          "value": "cross river",
+          "label": "Cross River"
+      },
+      {
+          "value": "delta",
+          "label": "Delta"
+      },
+      {
+          "value": "ebonyi",
+          "label": "Ebonyi"
+      },
+      {
+          "value": "edo",
+          "label": "Edo"
+      },
+      {
+          "value": "ekiti",
+          "label": "Ekiti"
+      },
+      {
+          "value": "enugu",
+          "label": "Enugu"
+      },
+      {
+          "value": "fct - abuja",
+          "label": "FCT - Abuja"
+      },
+      {
+          "value": "gombe",
+          "label": "Gombe"
+      },
+      {
+          "value": "imo",
+          "label": "Imo"
+      },
+      {
+          "value": "jigawa",
+          "label": "Jigawa"
+      },
+      {
+          "value": "kaduna",
+          "label": "Kaduna"
+      },
+      {
+          "value": "kano",
+          "label": "Kano"
+      },
+      {
+          "value": "katsina",
+          "label": "Katsina"
+      },
+      {
+          "value": "kebbi",
+          "label": "Kebbi"
+      },
+      {
+          "value": "kogi",
+          "label": "Kogi"
+      },
+      {
+          "value": "kwara",
+          "label": "Kwara"
+      },
+      {
+          "value": "lagos",
+          "label": "Lagos"
+      },
+      {
+          "value": "nasarawa",
+          "label": "Nasarawa"
+      },
+      {
+          "value": "niger",
+          "label": "Niger"
+      },
+      {
+          "value": "ogun",
+          "label": "Ogun"
+      },
+      {
+          "value": "ondo",
+          "label": "Ondo"
+      },
+      {
+          "value": "osun",
+          "label": "Osun"
+      },
+      {
+          "value": "oyo",
+          "label": "Oyo"
+      },
+      {
+          "value": "plateau",
+          "label": "Plateau"
+      },
+      {
+          "value": "rivers",
+          "label": "Rivers"
+      },
+      {
+          "value": "sokoto",
+          "label": "Sokoto"
+      },
+      {
+          "value": "taraba",
+          "label": "Taraba"
+      },
+      {
+          "value": "yobe",
+          "label": "Yobe"
+      },
+      {
+          "value": "zamfara",
+          "label": "Zamfara"
+      }
+  ]
+  }