loan detail page added

2024-08-06 21:04:14 +01:00
parent 5efc935f05
commit 25545ad47e
6 changed files with 543 additions and 3 deletions
@@ -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<any>({
+    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 ?
+        <div className='flex flex-col justify-center items-center h-96'>
+            <CustomSpinner width='w-8' height='h-8' />
+        </div>
+        :
+        <div className="w-full">
+        <Formik
+                initialValues={formInitialValue}
+                validationSchema={validationSchema}
+                onSubmit={handleSubmit}
+            >
+                {(props)=>(
+                <Form>
+                    <div className="mt-[3.25rem] flex flex-col gap-9">
+                    <p className='text-red-500 text-lg md:text-2xl'>Loan Details</p>
+                    <div className='w-full flex flex-wrap items-center gap-4'>
+                        <InputCompOne
+                            parentClass="w-full sm:max-w-[10rem] flex flex-col gap-4"
+                            name="loan_amount"
+                            label="Amount"
+                            labelClass="font-bold text-[1.125rem]"
+                            input
+                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
+                            placeholder="350,000"
+                            value={props.values.loan_amount}
+                            onChange={props.handleChange}
+                            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"
+                            name="payment_month"
+                            label="Months?"
+                            labelClass="font-bold text-[1.125rem]"
+                            select={true}
+                            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                            selectOptions={paymentMonth}
+                            selectValue={props.values.payment_month}
+                            onChange={props.handleChange}
+                            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"
+                            name="sales_agent"
+                            label="agent ID"
+                            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"
+                            value={props.values.sales_agent}
+                            onChange={props.handleChange}
+                            error={(props.errors.sales_agent && props.touched.sales_agent) ? props.errors.sales_agent : ''}
+                        />
+                    </div>
+                    <Button
+                        className="hidden my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+                        text="Next"
+                        type="submit"
+                    />
+                    </div>
+                </Form>
+                )}
+        </Formik>
+        </div>
+        }
+    </>
+  );
+}
+
+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" },
+  ]
+}