victorAnumudu
293 lines
10 KiB
TypeScript
293 lines
10 KiB
TypeScript
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';
|
|
import { PendingTableList } from '../../core/models';
|
|
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;
|
|
desc?: string;
|
|
descSpan?: string;
|
|
descSpanClass?: string;
|
|
onClick?: any;
|
|
cardClass?: string;
|
|
titleClass?: string;
|
|
descClass?: string;
|
|
btnTitle?: string;
|
|
btnTextClass?: string;
|
|
image?: any;
|
|
imgClass?: string;
|
|
}
|
|
|
|
export const DashBoardCard: React.FC<DashBoardCardProps> = ({
|
|
title,
|
|
desc,
|
|
onClick,
|
|
cardClass,
|
|
titleClass,
|
|
descClass,
|
|
descSpan,
|
|
descSpanClass,
|
|
btnTitle,
|
|
btnTextClass,
|
|
image,
|
|
imgClass,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`h-full w-full rounded-lg p-5 shadow-lg hover:shadow-none bg-no-repeat bg-[90%] flex justify-between gap-4 items-center transition-all duration-300 ${
|
|
cardClass && cardClass
|
|
}`}
|
|
// onClick={onClick}
|
|
>
|
|
<div className="w-3/4 flex flex-col gap-[2.3125rem]">
|
|
{title && (
|
|
<h1
|
|
className={`mb-1 text-[#FFF] text-lg text-left font-bold ${
|
|
titleClass && titleClass
|
|
}`}
|
|
>
|
|
{title}
|
|
</h1>
|
|
)}
|
|
{desc && (
|
|
<p className={`text-lg text-left ${descClass && descClass}`}>
|
|
{desc}{' '}
|
|
{descSpan && (
|
|
<span className={`${descSpanClass && descSpanClass}`}>
|
|
{descSpan}
|
|
</span>
|
|
)}
|
|
</p>
|
|
)}
|
|
{btnTitle && (
|
|
<Button className={btnTextClass} text={btnTitle} onClick={onClick} />
|
|
)}
|
|
</div>
|
|
{image && <img className={imgClass} src={image} alt="card-image" />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface DashboardHomeIntroProps {
|
|
handleNextStep: (value: {}) => any;
|
|
step?: number | string;
|
|
}
|
|
|
|
interface PopoutProps<T> {
|
|
show?: boolean
|
|
data?: T
|
|
}
|
|
|
|
const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
|
|
handleNextStep,
|
|
step,
|
|
}) => {
|
|
|
|
const navigate = useNavigate()
|
|
const { userDetails } = useSelector((state: any) => state?.userDetails); // CHECKS IF USER Details are avaliable
|
|
|
|
const [loanPopout, setLoanPopout] = useState<PopoutProps<PendingTableList>>({show:false, data:{}})
|
|
const closePopout = () => {
|
|
setLoanPopout({show:false, data:{}})
|
|
}
|
|
|
|
const [userLoanList, setUserLoanList] = useState<{
|
|
loading: boolean;
|
|
data: Array<PendingTableList>;
|
|
}>({ loading: true, data: [] });
|
|
|
|
useEffect(() => {
|
|
let token = localStorage.getItem('token');
|
|
let uid = localStorage.getItem('uid');
|
|
if (!token || !uid) {
|
|
return;
|
|
}
|
|
getUserPendingLoanList(uid)
|
|
.then((res) => {
|
|
if (!res || !res.data.loans) {
|
|
setUserLoanList({ loading: false, data: [] });
|
|
return;
|
|
}
|
|
setUserLoanList({ loading: false, data: res?.data?.loans });
|
|
})
|
|
.catch((err) => {
|
|
setUserLoanList({ loading: false, data: [] });
|
|
console.log(err)
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div className="w-full">
|
|
{step == 1 ? (
|
|
<>
|
|
<h1 className="font-bold my-5 text-2xl">
|
|
Hello, {userDetails.firstname}
|
|
</h1>
|
|
<div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
|
|
<DashBoardCard
|
|
cardClass="bg-[#5C2684] relative"
|
|
desc="Begin your application and get up to "
|
|
descSpan="5 million naira loan."
|
|
descClass="leading-[1.5625rem] text-lg text-white"
|
|
descSpanClass="font-bold"
|
|
btnTitle="Apply here"
|
|
btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
|
|
image={NairaBag}
|
|
imgClass="translate-y-4 -rotate-6"
|
|
onClick={() => handleNextStep({})}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<h1 className="font-bold my-5 text-2xl">
|
|
Welcome Back, {userDetails.firstname}
|
|
</h1>
|
|
<div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
|
|
<DashBoardCard
|
|
cardClass="bg-[#5C2684] relative"
|
|
desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
|
|
// descSpan="5 million naira loan."
|
|
descClass="leading-[1.5625rem] text-lg text-white"
|
|
// descSpanClass="font-bold"
|
|
btnTitle="View and accept"
|
|
btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
|
|
image={NairaBag}
|
|
imgClass="translate-y-4 -rotate-6"
|
|
// onClick={handleNextStep}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
{userLoanList.loading ? null : (
|
|
<div className="mt-5 w-full">
|
|
<PendingList
|
|
data={userLoanList.data}
|
|
itemsPerPage={5}
|
|
tableTitle="Current Applications"
|
|
>
|
|
{(data: any) => (
|
|
<div className="w-full p-4 rounded-lg shadow-lg bg-white overflow-x-auto min-h-[250px] max-h-[450px]">
|
|
<table className="text-[12px] sm:text-base w-full table-auto">
|
|
<thead>
|
|
<tr className="text-left border-b-2">
|
|
<th className="px-1 py-4">Date</th>
|
|
<th className="px-1 py-4 text-right">Amount</th>
|
|
<th className="px-1 py-4 text-center min-w-[110px]">
|
|
Payment Term
|
|
</th>
|
|
<th className="px-1 py-4 text-center">Status</th>
|
|
<th className="px-1 py-4 text-right">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((item: any, index: any) => (
|
|
<tr key={index || item} className="even:bg-slate-100">
|
|
<td className="px-1 py-2">
|
|
{NewDateTimeFormatter(item?.added)}
|
|
</td>
|
|
<td className="px-1 py-2 text-right">
|
|
{FormatAmount(item?.loan_amount)}
|
|
</td>
|
|
<td className="px-1 py-2 text-center">
|
|
{item?.payment_month}
|
|
</td>
|
|
<td className="px-1 py-2 text-center">
|
|
<button
|
|
className={`${!item?.status_text?.button && 'pointer-events-none border-0'} border p-2`}
|
|
onClick={()=>setLoanPopout({show:true, data:item})}
|
|
>
|
|
{item?.status_text?.text || 'Pending'}
|
|
</button>
|
|
</td>
|
|
<td className="flex justify-end px-1 py-2 text-right">
|
|
<button className="flex flex-nowrap items-center px-2 py-1 border-2 border-black" onClick={()=>navigate(RouteHandler.dashboardPayments, {state:{application_uid: item?.application_uid}})}>
|
|
View
|
|
<Icons name="arrow-right" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</PendingList>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{loanPopout.show && <PendingLoanPopout data={loanPopout.data} action={closePopout} />}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DashboardHomeIntro;
|
|
|
|
// {/* <div className="group w-full lg:w-96 h-32">
|
|
// <DefaultCard
|
|
// descText="You currently do not have any open application. Click on apply for a loan to get started."
|
|
// iconName="arrow"
|
|
// iconColor="#FBB700"
|
|
// cardClass={`p-4 bg-[#FFFAFA] border border-[#EE4040]`}
|
|
// descTextClass="text-[#423131] leading-5"
|
|
// onClick={() => {
|
|
// console.log("working");
|
|
// }}
|
|
// />
|
|
// </div> */}
|
|
|
|
// {/* <div className="w-full mt-20 flex gap-16 flex-wrap">
|
|
// <div className="group h-40 w-full lg:w-80">
|
|
// <DefaultCard
|
|
// title="Apply for a loan"
|
|
// descText="You currently do not have any open application. Click on apply for a loan to get started."
|
|
// iconName="greater-than"
|
|
// iconColor="#FFF"
|
|
// cardClass={`bg-[#5C2684] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
|
|
// titleClass="text-[#FFF]"
|
|
// descTextClass="text-[#EFEFEF] leading-5"
|
|
// onClick={() => {
|
|
// console.log("working");
|
|
// }}
|
|
// />
|
|
// </div>
|
|
// <div className="group h-40 w-full lg:w-80">
|
|
// <DefaultCard
|
|
// title="Loan history"
|
|
// descText="You currently do not have any open application. Click on apply for a loan to get started."
|
|
// iconName="greater-than"
|
|
// iconColor="#FFF"
|
|
// cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
|
|
// titleClass="text-[#FFF]"
|
|
// descTextClass="text-[#EFEFEF] leading-5"
|
|
// onClick={() => {
|
|
// console.log("working");
|
|
// }}
|
|
// />
|
|
// </div>
|
|
// <div className="group h-40 w-full lg:w-80">
|
|
// <DefaultCard
|
|
// title="How it works?"
|
|
// descText="Steps to follow to complete your loan application successfully."
|
|
// iconName="greater-than"
|
|
// iconColor="#FFF"
|
|
// cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
|
|
// titleClass="text-[#FFF]"
|
|
// descTextClass="text-[#EFEFEF] leading-5"
|
|
// onClick={() => {
|
|
// console.log("working");
|
|
// }}
|
|
// />
|
|
// </div>
|
|
// </div> */}
|