fixed bug

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -101,7 +101,7 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
 
   const [userLoanList, setUserLoanList] = useState<{
     loading: boolean;
-    data: PendingTableList;
+    data: Array<PendingTableList>;
   }>({ loading: true, data: [] });
 
   useEffect(() => {
@@ -120,6 +120,7 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
       })
       .catch((err) => {
         setUserLoanList({ loading: false, data: [] });
+        console.log(err)
       });
   }, []);
 

src/components/Dashboard/PendingLoanPopout.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useState} from 'react'
 import ModalWrapper from '../modal/ModalWrapper'
 import { PendingTableList } from '../../core/models'
 import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter'
@@ -12,6 +12,7 @@ interface Props<T> {
   }
 
 export default function PendingLoanPopout({data, action}:Props<PendingTableList>) {
+    console.log('MUMU', data)
 
     const [addCardStatus, setAddCardStatus] = useState<{
         loading: boolean;
@@ -19,7 +20,7 @@ export default function PendingLoanPopout({data, action}:Props<PendingTableList>
         msg: string
       }>({ loading: false, status: false, msg: ''});
 
-    const handleAddCard = (appID:string) => {
+    const handleAddCard = (appID:string | undefined) => {
         let reqData = {
             application_uid: appID
 

src/components/Dashboard/employmentDetails/EmploymentDetails.tsx

@@ -8,9 +8,9 @@ import { getEmployer } from '../../../core/apiRequest';
 import CustomSpinner from '../../CustomSpinner';
 import { FormatAmount } from '../../../lib/FormatAmount';
 
-type Props = {
-  handleNextStep?:(value:{})=>any
-}
+// type Props = {
+//   handleNextStep?:(value:{})=>any
+// }
 
 // type EmployerProps = {
 //   loading?: boolean,
@@ -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) {
@@ -87,7 +87,7 @@ const validationSchema = Yup.object().shape({
     }),
 });
 
-export default function EmploymentDetail({handleNextStep}:Props) {
+export default function EmploymentDetail() {
 
   const [employerList, setEmployerList] = useState<any>({
     loading: true,
@@ -96,21 +96,13 @@ export default function EmploymentDetail({handleNextStep}:Props) {
 
 
   //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = (values:any) => {
-    // if(values.employer_uid){
-    //   let employer_uid = values.employer_uid
-    //   delete values.employer_uid
-    //   handleNextStep({employer_uid, employment: values})
-    // }else{
-    //   handleNextStep({employment: values})
-    // }
+  const handleSubmit = () => {
     console.log('good')
   };
 
   useEffect(()=>{
     getEmployer().then(res => {
       setEmployerList({loading:false, data:res?.data?.employer})
-      // console.log('RES', res)
     }).catch(err => {
       console.log(err)
       setEmployerList({loading:false, data:{}})
@@ -173,11 +165,12 @@ 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}
                             onChange={props.handleChange}
-                            error={(props.errors.name && props.touched.name) ? props.errors.name : ''}
+                            // error={(props.errors.name && props.touched.name) ? props.errors.name : ''}
                           />
                           <InputCompOne
                             parentClass="w-full"
@@ -185,11 +178,12 @@ 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}
                             onChange={props.handleChange}
-                            error={(props.errors.official_email && props.touched.official_email) ? props.errors.official_email : ''}
+                            // error={(props.errors.official_email && props.touched.official_email) ? props.errors.official_email : ''}
                           />
                           <InputCompOne
                             parentClass="w-full"
@@ -197,23 +191,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 : ''}
+                            // 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}
-                            selectValue={props.values.sector}
+                            selectOptions={props.values.job_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,11 +221,12 @@ 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}
                           onChange={props.handleChange}
-                          error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
+                          // error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
                         />
                         <InputCompOne
                           parentClass="w-full"
@@ -237,11 +234,12 @@ 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}
+                          selectOptions={props.values.highest_eductaion}
                           selectValue={props.values.highest_eductaion}
                           onChange={props.handleChange}
-                          error={(props.errors.highest_eductaion && props.touched.highest_eductaion) ? props.errors.highest_eductaion : ''}
+                          // 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
@@ -250,12 +248,13 @@ 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"
                             value={props.values.start_date}
                             onChange={props.handleChange}
-                            error={(props.errors.start_date && props.touched.start_date) ? props.errors.start_date : ''}
+                            // error={(props.errors.start_date && props.touched.start_date) ? props.errors.start_date : ''}
                           />
                           <InputCompOne
                             parentClass="w-full"
@@ -263,12 +262,13 @@ 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"
                             value={(props.values.salary_date)}
                             onChange={props.handleChange}
-                            error={(props.errors.salary_date && props.touched.salary_date) ? props.errors.salary_date : ''}
+                            // error={(props.errors.salary_date && props.touched.salary_date) ? props.errors.salary_date : ''}
                           />
                         </div>
                         <div className="w-full flex flex-col sm:flex-row items-center gap-4">
@@ -278,23 +278,25 @@ 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)}
                             onChange={props.handleChange}
-                            error={(props.errors.annual_salary && props.touched.annual_salary) ? props.errors.annual_salary : ''}
+                            // error={(props.errors.annual_salary && props.touched.annual_salary) ? props.errors.annual_salary : ''}
                           />
                           <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,11 +305,12 @@ 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}
                           onChange={props.handleChange}
-                          error={(props.errors.employee_id && props.touched.employee_id) ? props.errors.employee_id : ''}
+                          // error={(props.errors.employee_id && props.touched.employee_id) ? props.errors.employee_id : ''}
                         />
                         <div className="hidden w-full">
                           <Button
@@ -330,33 +333,33 @@ export default function EmploymentDetail({handleNextStep}:Props) {
 
 
 
-interface SelectOption {
-  loading: boolean;
-  data: {value: string;
-  label: string}[]
-}
+// interface SelectOption {
+//   loading: boolean;
+//   data: {value: string;
+//   label: string}[]
+// }
 
 
-const jobSector: SelectOption = {
-  loading: false,
-  data: [
-    { value: "", label: "Please Select" },
-    { value: "private (non academic)", label: "Private (non academic)" },
-  ]
-}
+// const jobSector: SelectOption = {
+//   loading: false,
+//   data: [
+//     { value: "", label: "Please Select" },
+//     { value: "private (non academic)", label: "Private (non academic)" },
+//   ]
+// }
 
-const industry: SelectOption = {
-  loading: false,
-  data: [
-    { value: "", label: "Please Select" },
-    { value: "engineering", label: "Engineering" },
-  ]
-}
+// const industry: SelectOption = {
+//   loading: false,
+//   data: [
+//     { value: "", label: "Please Select" },
+//     { value: "engineering", label: "Engineering" },
+//   ]
+// }
 
-const highestEductaion: SelectOption = {
-  loading: false,
-  data: [
-    { value: "", label: "Please Select" },
-    { value: "b.sc + professional qualification", label: "B.Sc + Professional Qualification" },
-  ]
-}
+// const highestEductaion: SelectOption = {
+//   loading: false,
+//   data: [
+//     { value: "", label: "Please Select" },
+//     { value: "b.sc + professional qualification", label: "B.Sc + Professional Qualification" },
+//   ]
+// }

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/Dashboard/referenceDetails/ReferenceDetails.tsx

@@ -7,6 +7,18 @@ import { RouteHandler } from '../../../router/routes';
 import { getLoanDetail } from '../../../core/apiRequest';
 import CustomSpinner from '../../CustomSpinner';
 
+interface LoanDetail {
+  loan_amount: string;
+  payment_month: string;
+  sales_agent: string;
+  [key: string]: any;  // to accommodate any additional properties
+}
+
+// interface InitialValues {
+//   loan_amount: string;
+//   payment_month: string;
+//   sales_agent: string;
+// }
 
 const initialValues = {
   loan_amount: "",
@@ -29,36 +41,48 @@ const validationSchema = Yup.object().shape({
     sales_agent: Yup.string()
 });
 
+type LocationState = {
+  application_uid: string
+}
+
 export default function ReferenceDetails() {
 
     const location = useLocation()
     const navigate = useNavigate()
 
-    const applicationUID = location?.state?.application_uid
+    // const applicationUID = location?.state?.application_uid
+    const stateExist = location?.state as LocationState
 
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (values:{}) => {
     // handleNextStep(values)
+    console.log(values)
   };
 
-  const [loanDetail, setLoanDetail] = useState<any>({
+  const [loanDetail, setLoanDetail] = useState<{loading:boolean, data:LoanDetail}>({
     loading: true,
-    data: {}
+    data: {
+      loan_amount: '',
+    payment_month: '',
+    sales_agent: '',
+    },
   })
-
   useEffect(()=>{
-    if(!applicationUID){
-        navigate(RouteHandler.dashboardHome)
+    if(!stateExist){
+      navigate(RouteHandler.dashboardHome)
+      return
     }
-    getLoanDetail({application_uid:applicationUID}).then(res => {
-        setLoanDetail({loading:false, data:res?.data?.loan})
+    getLoanDetail({application_uid:stateExist.application_uid}).then(res => {
+      setLoanDetail({loading:false, data:res?.data?.loan})
       }).catch(err => {
         console.log(err)
-        setLoanDetail({loading:false, data:{}})
+        setLoanDetail((prev:any) => ({...prev, loading:false}))
       })
   },[])
 
-  const formInitialValue = (loanDetail.loading || Object.keys(loanDetail?.data)?.length < 1) ? initialValues : loanDetail?.data
+  // const formInitialValue:LoanDetail = (loanDetail.loading) ? initialValues : loanDetail?.data
+  const formInitialValue = (loanDetail.loading || Object.keys(loanDetail?.data)?.length < 1) ? initialValues : {...initialValues, ...loanDetail?.data}
+
   return (
     <>
         {loanDetail.loading ?
@@ -86,8 +110,9 @@ export default function ReferenceDetails() {
                             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
                             placeholder="350,000"
                             value={props.values.loan_amount}
+                            disabled={true}
                             onChange={props.handleChange}
-                            error={(props.errors.loan_amount && props.touched.loan_amount) ? props.errors.loan_amount : ''}
+                            // error={(props.errors.loan_amount && props.touched.loan_amount) ? props.errors.loan_amount : ''}
                         />
                         <InputCompOne
                             parentClass="w-full sm:max-w-[10rem] flex flex-col gap-4"
@@ -95,11 +120,12 @@ export default function ReferenceDetails() {
                             label="Months?"
                             labelClass="font-bold text-[1.125rem]"
                             select={true}
+                            disabled={true}
                             selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                            selectOptions={paymentMonth}
+                            selectOptions={props.values.payment_month}
                             selectValue={props.values.payment_month}
                             onChange={props.handleChange}
-                            error={(props.errors.payment_month && props.touched.payment_month) ? props.errors.payment_month : ''}
+                            // error={(props.errors.payment_month && props.touched.payment_month) ? props.errors.payment_month : ''}
                         />
                         <InputCompOne
                             parentClass="w-full sm:max-w-[10rem] flex flex-col gap-4"
@@ -108,11 +134,12 @@ export default function ReferenceDetails() {
                             labelClass="font-bold text-[1.125rem]"
                             floatLabel='Enter agent ID'
                             input
+                            disabled={true}
                             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                             placeholder="Agent ID"
                             value={props.values.sales_agent}
                             onChange={props.handleChange}
-                            error={(props.errors.sales_agent && props.touched.sales_agent) ? props.errors.sales_agent : ''}
+                            // error={(props.errors.sales_agent && props.touched.sales_agent) ? props.errors.sales_agent : ''}
                         />
                     </div>
                     <Button
@@ -130,20 +157,20 @@ export default function ReferenceDetails() {
   );
 }
 
-interface SelectOption {
-  loading: boolean;
-  data: {value: string;
-  label: string}[]
-}
+// interface SelectOption {
+//   loading: boolean;
+//   data: {value: string;
+//   label: string}[]
+// }
 
 
-const paymentMonth: SelectOption = {
-  loading: false,
-  data: [
-    { value: "", label: "Please Select" },
-    { value: "6", label: "6 Months" },
-    { value: "12", label: "12 Months" },
-    { value: "18", label: "18 Months" },
-    { value: "24", label: "24 Months" },
-  ]
-}
+// const paymentMonth: SelectOption = {
+//   loading: false,
+//   data: [
+//     { value: "", label: "Please Select" },
+//     { value: "6", label: "6 Months" },
+//     { value: "12", label: "12 Months" },
+//     { value: "18", label: "18 Months" },
+//     { value: "24", label: "24 Months" },
+//   ]
+// }

src/components/Payment/Payment.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function Payment() {
   return (
     <div>Payment Page</div>

src/components/paginated-list/PendingList.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useEffect, useState } from "react";
 import { PendingTableList } from "../../core/models";
 
 type PaginatedListProps = {
-    data: PendingTableList,
+    data: Array<PendingTableList>,
     itemsPerPage?: number,
     filterItem?: string[],
     tableTitle?: string,
@@ -28,12 +28,12 @@ export default function PendingList({
 
   const handlePrev = () => {
     if (currentPage != 0) {
-      setCurrentPage((prev) => prev - numberOfSelection);
+      setCurrentPage((prev:any) => prev - numberOfSelection);
     }
   };
   const handleNext = () => {
     if (currentPage < data.length) {
-      setCurrentPage((prev) => prev + numberOfSelection);
+      setCurrentPage((prev:any) => prev + numberOfSelection);
     }
   };
 

src/components/shared/InputCompOne.tsx

@@ -17,7 +17,7 @@ export interface InputCompOneProps {
   selectValue?: string;
   input?: boolean;
   select?: boolean;
-  selectOptions?: {loading:boolean, data:{ [index: string]: string; }[]};
+  selectOptions?: {loading:boolean, data:{ [index: string]: string; }[]} | any;
   inputType?: string;
   inputClass?: string;
   parentInputClass?: string;
@@ -103,19 +103,21 @@ 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' ?
                 <>
                   <option value=''>Please Select</option>
-                  {selectOptions.data.map(({ uid, name }) => (
+                  {selectOptions.data.map(({ uid, name }:any) => (
                     <option key={uid} value={uid}>
                       {name}
                     </option>
                   ))}
                 </>
               : selectOptions.data.length && name != 'employer_uid' ?
-                  selectOptions.data.map(({ value, label }) => (
+                  selectOptions.data.map(({ value, label }:any) => (
                     <option key={value} value={value}>
                       {label}
                     </option>

src/core/models.ts

@@ -29,4 +29,4 @@ export type PendingTableList = {
         button?: boolean
         advise?: string
     }    
-}[];
+};

src/pages/PaymentPage.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import {useEffect} from 'react'
 import {useLocation, useNavigate} from 'react-router-dom'
 import Payment from '../components/Payment/Payment'
 import { RouteHandler } from '../router/routes'

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"
+      }
+  ]
+  }