diff --git a/src/components/Dashboard/DashboardHomeIntro.tsx b/src/components/Dashboard/DashboardHomeIntro.tsx index a53221b..2026e2c 100644 --- a/src/components/Dashboard/DashboardHomeIntro.tsx +++ b/src/components/Dashboard/DashboardHomeIntro.tsx @@ -1,5 +1,6 @@ import React, { FC, useState, useEffect } from 'react'; import NairaBag from '../../assets/images/dashboard/naira-bag.png'; +import {useNavigate} from 'react-router-dom' import { Button, Icons } from '../'; import { useSelector } from 'react-redux'; import PendingList from '../paginated-list/PendingList'; @@ -8,6 +9,7 @@ import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter'; import { getUserPendingLoanList } from '../../core/apiRequest'; import {FormatAmount} from '../../lib/FormatAmount' import PendingLoanPopout from './PendingLoanPopout'; +import { RouteHandler } from '../../router/routes'; export interface DashBoardCardProps { title?: string; @@ -88,6 +90,8 @@ const DashboardHomeIntro: FC = ({ handleNextStep, step, }) => { + + const navigate = useNavigate() const { userDetails } = useSelector((state: any) => state?.userDetails); // CHECKS IF USER Details are avaliable const [loanPopout, setLoanPopout] = useState>({show:false, data:{}}) @@ -205,7 +209,7 @@ const DashboardHomeIntro: FC = ({ - diff --git a/src/components/Dashboard/employmentDetails/EmploymentDetails.tsx b/src/components/Dashboard/employmentDetails/EmploymentDetails.tsx new file mode 100644 index 0000000..a3cf19e --- /dev/null +++ b/src/components/Dashboard/employmentDetails/EmploymentDetails.tsx @@ -0,0 +1,362 @@ +import {useState, useEffect} from 'react' +import { Button, InputCompOne } from '../../shared/index'; + +import {Formik, Form} from 'formik' +import * as Yup from "yup"; + +import { getEmployer } from '../../../core/apiRequest'; +import CustomSpinner from '../../CustomSpinner'; +import { FormatAmount } from '../../../lib/FormatAmount'; + +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: "", + sector: "", + industry: "", + start_date: "", + official_email:"", + annual_salary: "", + monthly_salary: "", + salary_date: "", + employee_id: "", + highest_eductaion: "", + employer_uid: "", + isChecked: true +}; + +// 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().when('isChecked', { + is: true, + then: () => Yup.string().required('required'), + otherwise: () => Yup.string(), + }), + sector: Yup.string().when('isChecked', { + is: true, + then: () => Yup.string().required('required'), + }), + industry: Yup.string().when('isChecked', { + is: true, + then: () => Yup.string().required('required'), + }), + start_date: Yup.string() + .required("Required"), + official_email : Yup.string().when('isChecked', { + is: true, + then: () => Yup.string().required('required'), + }) + .email("Invalid"), + annual_salary: Yup.string() + .required("Required") + .test("no-e", "Invalid", (value:any) => { + if (value && /^[0-9]*$/.test(value) == false) { + return false; + } + return true; + }), + monthly_salary: Yup.string() + .required("Required") + .test("no-e", "Invalid", (value:any) => { + if (value && /^[0-9]*$/.test(value) == false) { + return false; + } + return true; + }), + salary_date: Yup.string() + .required("Required"), + employee_id: Yup.string() + .required("Required"), + highest_eductaion: Yup.string() + .required("Required"), + employer_uid: Yup.string().when('isChecked', { + is: false, + then: () => Yup.string().required('required'), + }), +}); + +export default function EmploymentDetail({handleNextStep}:Props) { + + const [employerList, setEmployerList] = useState({ + loading: true, + data: {} + }) + + + //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}) + // } + 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:{}}) + }) + },[]) + + const formInitialValue = (employerList.loading || Object.keys(employerList?.data)?.length < 1) ? initialValues : {...initialValues, ...employerList?.data} + + return ( + <> + {employerList.loading ? +
+ +
+ : +
+ + {(props)=>( +
+
+

Employment Informaton

+
+
+ {/*
+ +
+ +

Check here if employer is not on the list

+
+
+ Name: {'Name'} +
+
*/} +
+ + + + +
+
+ +
+ + +
+ + +
+
+ + +
+ +
+
+
+
+
+
+ )} + +
+ } + + ); +} + + + +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 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" }, + ] +} \ No newline at end of file diff --git a/src/components/Dashboard/referenceDetails/ReferenceDetails.tsx b/src/components/Dashboard/referenceDetails/ReferenceDetails.tsx new file mode 100644 index 0000000..7f54346 --- /dev/null +++ b/src/components/Dashboard/referenceDetails/ReferenceDetails.tsx @@ -0,0 +1,149 @@ +import {useEffect, useState} from 'react' +import {useLocation, useNavigate} from 'react-router-dom' +import { Button, InputCompOne } from "../../shared"; +import {Formik, Form} from 'formik' +import * as Yup from "yup"; +import { RouteHandler } from '../../../router/routes'; +import { getLoanDetail } from '../../../core/apiRequest'; +import CustomSpinner from '../../CustomSpinner'; + + +const initialValues = { + loan_amount: "", + payment_month: "", + sales_agent: "", +}; + +// To get the validation schema +const validationSchema = Yup.object().shape({ + payment_month: Yup.string() + .required("Required"), + loan_amount: Yup.string() + .required("Required") + .test("no-e", "Invalid", (value:any) => { + if (value && /^[0-9]*$/.test(value) == false) { + return false; + } + return true; + }), + sales_agent: Yup.string() +}); + +export default function ReferenceDetails() { + + const location = useLocation() + const navigate = useNavigate() + + const applicationUID = location?.state?.application_uid + + //FUNCTION TO HANDLE SUBMIT + const handleSubmit = (values:{}) => { + // handleNextStep(values) + }; + + const [loanDetail, setLoanDetail] = useState({ + loading: true, + data: {} + }) + + useEffect(()=>{ + if(!applicationUID){ + navigate(RouteHandler.dashboardHome) + } + getLoanDetail({application_uid:applicationUID}).then(res => { + setLoanDetail({loading:false, data:res?.data?.loan}) + }).catch(err => { + console.log(err) + setLoanDetail({loading:false, data:{}}) + }) + },[]) + + const formInitialValue = (loanDetail.loading || Object.keys(loanDetail?.data)?.length < 1) ? initialValues : loanDetail?.data + return ( + <> + {loanDetail.loading ? +
+ +
+ : +
+ + {(props)=>( +
+
+

Loan Details

+
+ + + +
+
+
+ )} + +
+ } + + ); +} + +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" }, + ] +} diff --git a/src/core/apiRequest.ts b/src/core/apiRequest.ts index f05eb95..0b8f713 100644 --- a/src/core/apiRequest.ts +++ b/src/core/apiRequest.ts @@ -50,6 +50,23 @@ export const getEmployersList = () => { return getAuxEnd(`/employers`, reqData) } +// FUNCTION TO GET USER EMPLOYER +export const getEmployer = () => { + let reqData = { + uid: localStorage.getItem('uid'), + } + return getAuxEnd(`/dash/employer?uid=${reqData?.uid}`, null) +} + +// FUNCTION TO GET LOAN DETAILS +export const getLoanDetail = (postData:any) => { + let reqData = { + uid: localStorage.getItem('uid'), + ...postData + } + return getAuxEnd(`/loan/loandetail?uid=${reqData?.uid}&application_uid=${reqData?.application_uid}`, null) +} + // FUNCTION TO ADD CARD export const addCard = (postData:any) => { let reqData = { diff --git a/src/pages/DashboardPaymentsPage.tsx b/src/pages/DashboardPaymentsPage.tsx index 52e80af..3199927 100644 --- a/src/pages/DashboardPaymentsPage.tsx +++ b/src/pages/DashboardPaymentsPage.tsx @@ -1,5 +1,9 @@ +import ReferenceDetails from "../components/Dashboard/referenceDetails/ReferenceDetails"; + export default function DashboardpaymentsPage() { return ( -
Dashboardpayments
+ <> + + ) } diff --git a/src/pages/DashboardVerificationPage.tsx b/src/pages/DashboardVerificationPage.tsx index 65b9262..6da48e9 100644 --- a/src/pages/DashboardVerificationPage.tsx +++ b/src/pages/DashboardVerificationPage.tsx @@ -1,5 +1,9 @@ +import EmploymentDetail from "../components/Dashboard/employmentDetails/EmploymentDetails"; + export default function DashboardVerificationPage() { return ( -
DashboardVerification
+ <> + + ) }