Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Elias
|
dd8290af9a | ||
 tokslaw
|
4d258a965b |
@@ -1,11 +1,11 @@
|
|||||||
import React, { FC, useState, useEffect } from "react";
|
import React, { FC, useState, useEffect } from 'react';
|
||||||
import NairaBag from "../../assets/images/dashboard/naira-bag.png";
|
import NairaBag from '../../assets/images/dashboard/naira-bag.png';
|
||||||
import { Button, Icons } from "../";
|
import { Button, Icons } from '../';
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from 'react-redux';
|
||||||
import PendingList from "../paginated-list/PendingList";
|
import PendingList from '../paginated-list/PendingList';
|
||||||
import { PendingTableList } from "../../core/models";
|
import { PendingTableList } from '../../core/models';
|
||||||
import { NewDateTimeFormatter } from "../../lib/NewDateTimeFormatter";
|
import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter';
|
||||||
import { getUserPendingLoanList } from "../../core/apiRequest";
|
import { getUserPendingLoanList } from '../../core/apiRequest';
|
||||||
|
|
||||||
export interface DashBoardCardProps {
|
export interface DashBoardCardProps {
|
||||||
title?: string;
|
title?: string;
|
||||||
@@ -55,7 +55,7 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
|
|||||||
)}
|
)}
|
||||||
{desc && (
|
{desc && (
|
||||||
<p className={`text-lg text-left ${descClass && descClass}`}>
|
<p className={`text-lg text-left ${descClass && descClass}`}>
|
||||||
{desc}{" "}
|
{desc}{' '}
|
||||||
{descSpan && (
|
{descSpan && (
|
||||||
<span className={`${descSpanClass && descSpanClass}`}>
|
<span className={`${descSpanClass && descSpanClass}`}>
|
||||||
{descSpan}
|
{descSpan}
|
||||||
@@ -73,117 +73,137 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
interface DashboardHomeIntroProps {
|
interface DashboardHomeIntroProps {
|
||||||
handleNextStep:(value:{})=>any
|
handleNextStep: (value: {}) => any;
|
||||||
step?:number|string
|
step?: number | string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step }) => {
|
const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
|
||||||
const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable
|
handleNextStep,
|
||||||
|
step,
|
||||||
|
}) => {
|
||||||
|
const { userDetails } = useSelector((state: any) => state?.userDetails); // CHECKS IF USER Details are avaliable
|
||||||
|
|
||||||
const [userLoanList, setUserLoanList] = useState<{loading:boolean, data:PendingTableList}>({loading: true, data:[]})
|
const [userLoanList, setUserLoanList] = useState<{
|
||||||
|
loading: boolean;
|
||||||
|
data: PendingTableList;
|
||||||
|
}>({ loading: true, data: [] });
|
||||||
|
|
||||||
useEffect(()=>{
|
useEffect(() => {
|
||||||
let token = localStorage.getItem('token')
|
let token = localStorage.getItem('token');
|
||||||
let uid = localStorage.getItem('uid')
|
let uid = localStorage.getItem('uid');
|
||||||
if(!token || !uid){
|
if (!token || !uid) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
getUserPendingLoanList(uid).then(res => {
|
getUserPendingLoanList(uid)
|
||||||
console.log('RES', res)
|
.then((res) => {
|
||||||
console.log('RES', userLoanList)
|
console.log('RES', res);
|
||||||
if(!res || !res.data.loans){
|
console.log('RES', userLoanList);
|
||||||
setUserLoanList({loading:false, data:[]})
|
if (!res || !res.data.loans) {
|
||||||
return
|
setUserLoanList({ loading: false, data: [] });
|
||||||
}
|
return;
|
||||||
setUserLoanList({loading:false, data:res?.data?.loans})
|
}
|
||||||
}).catch(err => {
|
setUserLoanList({ loading: false, data: res?.data?.loans });
|
||||||
console.log(err)
|
})
|
||||||
setUserLoanList({loading:false, data:[]})
|
.catch((err) => {
|
||||||
})
|
console.log(err);
|
||||||
},[])
|
setUserLoanList({ loading: false, data: [] });
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='w-full'>
|
<div className="w-full">
|
||||||
{step == 1 ?
|
{step == 1 ? (
|
||||||
<>
|
<>
|
||||||
<h1 className="font-bold my-5 text-2xl">Hello, {userDetails.firstname}</h1>
|
<h1 className="font-bold my-5 text-2xl">
|
||||||
<div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
|
Hello, {userDetails.firstname}
|
||||||
<DashBoardCard
|
</h1>
|
||||||
cardClass="bg-[#5C2684] relative"
|
<div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
|
||||||
desc="Begin your application and get up to "
|
<DashBoardCard
|
||||||
descSpan="5 million naira loan."
|
cardClass="bg-[#5C2684] relative"
|
||||||
descClass="leading-[1.5625rem] text-lg text-white"
|
desc="Begin your application and get up to "
|
||||||
descSpanClass="font-bold"
|
descSpan="5 million naira loan."
|
||||||
btnTitle="Apply here"
|
descClass="leading-[1.5625rem] text-lg text-white"
|
||||||
btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
|
descSpanClass="font-bold"
|
||||||
image={NairaBag}
|
btnTitle="Apply here"
|
||||||
imgClass="translate-y-4 -rotate-6"
|
btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
|
||||||
onClick={()=>handleNextStep({})}
|
image={NairaBag}
|
||||||
|
imgClass="translate-y-4 -rotate-6"
|
||||||
|
onClick={() => handleNextStep({})}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
:
|
) : (
|
||||||
<>
|
<>
|
||||||
<h1 className="font-bold my-5 text-2xl">Welcome Back, {userDetails.firstname}</h1>
|
<h1 className="font-bold my-5 text-2xl">
|
||||||
<div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
|
Welcome Back, {userDetails.firstname}
|
||||||
<DashBoardCard
|
</h1>
|
||||||
cardClass="bg-[#5C2684] relative"
|
<div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
|
||||||
desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
|
<DashBoardCard
|
||||||
// descSpan="5 million naira loan."
|
cardClass="bg-[#5C2684] relative"
|
||||||
descClass="leading-[1.5625rem] text-lg text-white"
|
desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
|
||||||
// descSpanClass="font-bold"
|
// descSpan="5 million naira loan."
|
||||||
btnTitle="View and accept"
|
descClass="leading-[1.5625rem] text-lg text-white"
|
||||||
btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
|
// descSpanClass="font-bold"
|
||||||
image={NairaBag}
|
btnTitle="View and accept"
|
||||||
imgClass="translate-y-4 -rotate-6"
|
btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
|
||||||
// onClick={handleNextStep}
|
image={NairaBag}
|
||||||
|
imgClass="translate-y-4 -rotate-6"
|
||||||
|
// onClick={handleNextStep}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
}
|
)}
|
||||||
{userLoanList.loading ?
|
{userLoanList.loading ? null : (
|
||||||
null
|
<div className="mt-5 w-full">
|
||||||
:
|
<PendingList
|
||||||
<div className='mt-5 w-full'>
|
data={userLoanList.data}
|
||||||
<PendingList
|
itemsPerPage={5}
|
||||||
data={userLoanList.data}
|
tableTitle="Current Applications"
|
||||||
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]">
|
||||||
{(data:any)=>(
|
<table className="text-[12px] sm:text-base w-full table-auto">
|
||||||
<div className="w-full p-4 rounded-lg shadow-lg bg-white overflow-x-auto min-h-[250px] max-h-[450px]">
|
<thead>
|
||||||
<table className="text-[12px] sm:text-base w-full table-auto">
|
<tr className="text-left border-b-2">
|
||||||
<thead>
|
<th className="px-1 py-4">Date</th>
|
||||||
<tr className='text-left border-b-2'>
|
<th className="px-1 py-4 text-right">Amount</th>
|
||||||
<th className='px-1 py-4'>Date</th>
|
<th className="px-1 py-4 text-center min-w-[110px]">
|
||||||
<th className='px-1 py-4 text-right'>Amount</th>
|
Payment Term
|
||||||
<th className='px-1 py-4 text-center min-w-[110px]'>Payment Term</th>
|
</th>
|
||||||
<th className='px-1 py-4 text-center'>Status</th>
|
<th className="px-1 py-4 text-center">Status</th>
|
||||||
<th className='px-1 py-4'>Action</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'>{item?.loan_amount}</td>
|
|
||||||
<td className='px-1 py-2 text-center'>{item?.payment_month}</td>
|
|
||||||
<td className='px-1 py-2 text-center'>{item?.status}</td>
|
|
||||||
<td className='px-1 py-2'>
|
|
||||||
<button className='px-2 py-1 border-2 border-black flex gap-2 items-center'>
|
|
||||||
View
|
|
||||||
<Icons name='arrow-right' />
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</table>
|
{data.map((item: any, index: any) => (
|
||||||
</div>
|
<tr key={index || item} className="even:bg-slate-100">
|
||||||
)}
|
<td className="px-1 py-2">
|
||||||
</PendingList>
|
{NewDateTimeFormatter(item?.added)}
|
||||||
</div>
|
</td>
|
||||||
}
|
<td className="px-1 py-2 text-right">
|
||||||
|
{item?.loan_amount}
|
||||||
|
</td>
|
||||||
|
<td className="px-1 py-2 text-center">
|
||||||
|
{item?.payment_month}
|
||||||
|
</td>
|
||||||
|
<td className="px-1 py-2 text-center">
|
||||||
|
{item?.status}
|
||||||
|
</td>
|
||||||
|
<td className="px-1 py-2 text-right">
|
||||||
|
<button className="px-2 py-1 border-2 border-black">
|
||||||
|
View
|
||||||
|
<Icons name="arrow-right" />
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</PendingList>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user