Added new pages to dashboard
This commit was merged in pull request #30.
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
import { Button, InputCompOne, Stepper } from "..";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { RouteHandler } from "../../router/routes";
|
||||
|
||||
export default function DashboardFormInit() {
|
||||
let navigate = useNavigate();
|
||||
|
||||
const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="w-full flex justify-center">
|
||||
<Stepper step={0} />
|
||||
</div>
|
||||
<div className="mt-[3.25rem] flex flex-col gap-9">
|
||||
<InputCompOne
|
||||
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
||||
name="applyIshInput"
|
||||
label="How Much Do You Want To Apply For?"
|
||||
labelClass="font-bold text-[1.125rem]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
||||
placeholder="350,000"
|
||||
/>
|
||||
<InputCompOne
|
||||
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
||||
name="applyIshInput"
|
||||
label="For How Many Months?"
|
||||
labelClass="font-bold text-[1.125rem]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
||||
placeholder="12 Months"
|
||||
/>
|
||||
<InputCompOne
|
||||
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
||||
name="applyIshInput"
|
||||
label="Direct sales agent ID ( Optional )"
|
||||
labelClass="font-bold text-[1.125rem]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
||||
placeholder="Agent ID"
|
||||
/>
|
||||
<Button
|
||||
className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
|
||||
text="Next"
|
||||
type="button"
|
||||
onClick={navigateToProfile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,58 +1,24 @@
|
||||
import { DefaultCard } from "../"
|
||||
import React, { FC } from "react";
|
||||
import DashboardHomeIntro from "./DashboardHomeIntro";
|
||||
import DashboardFormInit from "./DashboardFormInit";
|
||||
|
||||
interface DashboardHomeProps {}
|
||||
|
||||
const DashboardHome: FC<DashboardHomeProps> = () => {
|
||||
const [step, setStep] = React.useState(1);
|
||||
|
||||
const handleNextStep = () => {
|
||||
if (step < 2) {
|
||||
setStep(step + 1);
|
||||
}
|
||||
};
|
||||
|
||||
export default function DashboardHome() {
|
||||
return (
|
||||
<div className='w-full'>
|
||||
<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'>
|
||||
{/* cards display */}
|
||||
<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>
|
||||
<div className="w-full">
|
||||
{step === 1 && <DashboardHomeIntro handleNextStep={handleNextStep} />}
|
||||
{step === 2 && <DashboardFormInit />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardHome;
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
import React, { FC } from "react";
|
||||
import NairaBag from "../../assets/images/dashboard/naira-bag.png";
|
||||
import { Button } from "../";
|
||||
|
||||
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: any;
|
||||
}
|
||||
|
||||
const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep }) => {
|
||||
return (
|
||||
<>
|
||||
<h1 className="font-bold my-5 text-2xl">Hello, Olanrewaju</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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> */}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Button, InputCompOne, Stepper } from "..";
|
||||
|
||||
export default function DashboardProfile() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="w-full flex justify-center">
|
||||
<Stepper step={1} />
|
||||
</div>
|
||||
<div className="mt-[3.25rem] flex flex-col gap-9">
|
||||
<div className="flex items-center gap-[4.125rem]">
|
||||
<InputCompOne
|
||||
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
||||
name="applyIshInput"
|
||||
label="Select your gender"
|
||||
labelClass="font-bold text-[1.125rem]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
||||
placeholder="Male"
|
||||
/>
|
||||
<InputCompOne
|
||||
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
||||
name="applyIshInput"
|
||||
label="Residential address"
|
||||
labelClass="font-bold text-[1.125rem]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
||||
placeholder="Somewhere in lagos"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-[4.125rem]">
|
||||
<InputCompOne
|
||||
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
||||
name="applyIshInput"
|
||||
label="Marital status"
|
||||
labelClass="font-bold text-[1.125rem]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
||||
placeholder="Single"
|
||||
/>{" "}
|
||||
<InputCompOne
|
||||
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
||||
name="applyIshInput"
|
||||
label="Select your state"
|
||||
labelClass="font-bold text-[1.125rem]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
||||
placeholder="Lagos"
|
||||
/>
|
||||
</div>
|
||||
<InputCompOne
|
||||
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
||||
name="applyIshInput"
|
||||
label="Email address"
|
||||
labelClass="font-bold text-[1.125rem]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
||||
placeholder="johndoe@gmail.com"
|
||||
/>
|
||||
<Button
|
||||
className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
|
||||
text="Next"
|
||||
type="button"
|
||||
// onClick={navigateToProfile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
import DashboardHome from './DashboardHome'
|
||||
import DashboardProfile from './DashboardProfile';
|
||||
|
||||
export { DashboardHome };
|
||||
export { DashboardHome, DashboardProfile };
|
||||
Reference in New Issue
Block a user