Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
ca9bb1c211 | ||
|
victorAnumudu
|
2f756d189a | ||
 ameye
|
d7acea769c | ||
|
Ebube
|
7ff5e2b6e0 | ||
|
Ebube
|
2f90c4a6c2 | ||
|
ameye
|
29e0345e1c |
@@ -98,4 +98,8 @@ REACT_APP_FAMILY_MINIMUM_AGE=4
|
|||||||
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
||||||
|
|
||||||
#CHANGE LOGIN LAYOUT
|
#CHANGE LOGIN LAYOUT
|
||||||
REACT_APP_NEW_LOGIN_LAYOUT=1
|
REACT_APP_NEW_LOGIN_LAYOUT=1
|
||||||
|
|
||||||
|
#APP DOWNLOAD LINKS
|
||||||
|
REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
|
||||||
|
REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
|
||||||
+5
-1
@@ -66,4 +66,8 @@ REACT_APP_FAMILY_MINIMUM_AGE=4
|
|||||||
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
||||||
|
|
||||||
#CHANGE LOGIN LAYOUT
|
#CHANGE LOGIN LAYOUT
|
||||||
REACT_APP_NEW_LOGIN_LAYOUT=1
|
REACT_APP_NEW_LOGIN_LAYOUT=1
|
||||||
|
|
||||||
|
#APP DOWNLOAD LINKS
|
||||||
|
REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
|
||||||
|
REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
|
||||||
@@ -73,3 +73,7 @@ REACT_APP_FAMILY_MAXIMUM_AGE=18
|
|||||||
|
|
||||||
#CHANGE LOGIN LAYOUT
|
#CHANGE LOGIN LAYOUT
|
||||||
REACT_APP_NEW_LOGIN_LAYOUT=1
|
REACT_APP_NEW_LOGIN_LAYOUT=1
|
||||||
|
|
||||||
|
#APP DOWNLOAD LINKS
|
||||||
|
REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
|
||||||
|
REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
|
||||||
|
|||||||
@@ -17,6 +17,9 @@
|
|||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
<title>WrenchBoard</title>
|
<title>WrenchBoard</title>
|
||||||
|
|
||||||
|
<!-- FONT AWESOME -->
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|||||||
@@ -520,11 +520,36 @@ export default function Login() {
|
|||||||
}
|
}
|
||||||
{/* END of login component */}
|
{/* END of login component */}
|
||||||
|
|
||||||
|
{/* APP DOWNLOAD STORE */}
|
||||||
|
<div className="w-full mt-4">
|
||||||
|
<div className="w-full flex justify-center items-center gap-4">
|
||||||
|
<div className='w-28 lg:w-32'>
|
||||||
|
<a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_APPLE_APP}>
|
||||||
|
<i className="fa-brands fa-apple text-3xl"></i>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-[11px]">Available on the</span>
|
||||||
|
<span className="text-[12px] lg:text-base">App Store</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className='w-28 lg:w-32'>
|
||||||
|
<a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
|
||||||
|
<i className="fa-brands fa-google-play text-2xl"></i>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-[11px]">Available on the</span>
|
||||||
|
<span className="text-[12px] lg:text-base">Google Play</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{loginType == "full" && (
|
{loginType == "full" && (
|
||||||
<div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
|
<>
|
||||||
This site is protected by a Captcha. Our Privacy Policy and
|
<div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
|
||||||
Terms of Service apply.
|
This site is protected by a Captcha. Our Privacy Policy and
|
||||||
</div>
|
Terms of Service apply.
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export default function HomeBannerOffersCard(props) {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let { banner, banner_location } = props?.itemData;
|
let { banner, banner_location } = props?.itemData;
|
||||||
if (banner_location === "LOCAL") {
|
if (banner_location === "LOCAL") {
|
||||||
const imagePath = require(`../../assets/images/${banner}`); // Replace with your directory path for local images
|
const imagePath = require(`../../assets/images/${banner}`);
|
||||||
setImageUrl(imagePath);
|
setImageUrl(imagePath);
|
||||||
} else if (banner_location === "URL") setImageUrl(banner);
|
} else if (banner_location === "URL") setImageUrl(banner);
|
||||||
else return null;
|
else return null;
|
||||||
|
|||||||
@@ -0,0 +1,103 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
|
||||||
|
import heroUser from "../../assets/images/hero-user.png";
|
||||||
|
import CountDown from "../Helpers/CountDown";
|
||||||
|
// import HomeSliders from "./HomeSliders";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import HomeSliders from "../Home/HomeSliders";
|
||||||
|
|
||||||
|
export default function FamilyParentDashboard({ className, bannerList, nextDueTask }) {
|
||||||
|
const settings = {
|
||||||
|
autoplay: true,
|
||||||
|
dots: true,
|
||||||
|
arrows: false,
|
||||||
|
infinite: true,
|
||||||
|
swipe: true,
|
||||||
|
};
|
||||||
|
const sildeData = null;
|
||||||
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||||
|
|
||||||
|
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||||
|
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||||
|
let userEmail = email.split("@")[0];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-blue-500 ${
|
||||||
|
className || ""
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
// background: `url(${heroBg})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||||
|
{/* heading */}
|
||||||
|
<div>
|
||||||
|
<h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
|
||||||
|
Welcome
|
||||||
|
</h1>
|
||||||
|
<span className="text-[18px] font-thin tracking-wide text-white">
|
||||||
|
Last Login : {loginDate}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/* user */}
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
|
||||||
|
<img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||||
|
{`${firstname} ${lastname}`}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm tracking-wide text-white">@{userEmail}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* countdown */}
|
||||||
|
{nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||||
|
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Current Task</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{(nextDueTask.next_due.item_code).substr(0,4)+'...'}
|
||||||
|
</p>
|
||||||
|
<p className="text-base text-white tracking-wide">
|
||||||
|
{nextDueTask.next_due.price * 0.01} Naira
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Next due in</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||||
|
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||||
|
</p>
|
||||||
|
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||||
|
<span>Hrs</span>
|
||||||
|
<span>Min</span>
|
||||||
|
<span>Sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* action */}
|
||||||
|
<div className="flex lg:space-x-3 space-x-1 items-center">
|
||||||
|
<Link to="/mytask" className="text-white text-base">
|
||||||
|
<span className=" border-b dark:border-[#5356fb29] border-white">
|
||||||
|
{" "}
|
||||||
|
View All Task(s)
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<HomeSliders
|
||||||
|
settings={settings}
|
||||||
|
sideData={sildeData}
|
||||||
|
bannerList={bannerList}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
|
||||||
|
import heroUser from "../../assets/images/hero-user.png";
|
||||||
|
import CountDown from "../Helpers/CountDown";
|
||||||
|
// import HomeSliders from "./HomeSliders";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import HomeSliders from "../Home/HomeSliders";
|
||||||
|
|
||||||
|
export default function HomeDashboard({ className, bannerList, nextDueTask }) {
|
||||||
|
const settings = {
|
||||||
|
autoplay: true,
|
||||||
|
dots: true,
|
||||||
|
arrows: false,
|
||||||
|
infinite: true,
|
||||||
|
swipe: true,
|
||||||
|
};
|
||||||
|
const sildeData = null;
|
||||||
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||||
|
|
||||||
|
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||||
|
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||||
|
let userEmail = email.split("@")[0];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden ${
|
||||||
|
className || ""
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
background: `url(${heroBg})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||||
|
{/* heading */}
|
||||||
|
<div>
|
||||||
|
<h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
|
||||||
|
Welcome
|
||||||
|
</h1>
|
||||||
|
<span className="text-[18px] font-thin tracking-wide text-white">
|
||||||
|
Last Login : {loginDate}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/* user */}
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
|
||||||
|
<img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||||
|
{`${firstname} ${lastname}`}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm tracking-wide text-white">@{userEmail}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* countdown */}
|
||||||
|
{nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||||
|
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Current Task</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{(nextDueTask.next_due.item_code).substr(0,4)+'...'}
|
||||||
|
</p>
|
||||||
|
<p className="text-base text-white tracking-wide">
|
||||||
|
{nextDueTask.next_due.price * 0.01} Naira
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Next due in</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||||
|
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||||
|
</p>
|
||||||
|
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||||
|
<span>Hrs</span>
|
||||||
|
<span>Min</span>
|
||||||
|
<span>Sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* action */}
|
||||||
|
<div className="flex lg:space-x-3 space-x-1 items-center">
|
||||||
|
<Link to="/mytask" className="text-white text-base">
|
||||||
|
<span className=" border-b dark:border-[#5356fb29] border-white">
|
||||||
|
{" "}
|
||||||
|
View All Task(s)
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<HomeSliders
|
||||||
|
settings={settings}
|
||||||
|
sideData={sildeData}
|
||||||
|
bannerList={bannerList}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
|
||||||
|
import heroUser from "../../assets/images/hero-user.png";
|
||||||
|
import CountDown from "../Helpers/CountDown";
|
||||||
|
// import HomeSliders from "./HomeSliders";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import HomeSliders from "../Home/HomeSliders";
|
||||||
|
|
||||||
|
export default function JobOwnerDashboard({ className, bannerList, nextDueTask }) {
|
||||||
|
const settings = {
|
||||||
|
autoplay: true,
|
||||||
|
dots: true,
|
||||||
|
arrows: false,
|
||||||
|
infinite: true,
|
||||||
|
swipe: true,
|
||||||
|
};
|
||||||
|
const sildeData = null;
|
||||||
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||||
|
|
||||||
|
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||||
|
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||||
|
let userEmail = email.split("@")[0];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-blue-800 ${
|
||||||
|
className || ""
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
// background: `url(${heroBg})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||||
|
{/* heading */}
|
||||||
|
<div>
|
||||||
|
<h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
|
||||||
|
Welcome
|
||||||
|
</h1>
|
||||||
|
<span className="text-[18px] font-thin tracking-wide text-white">
|
||||||
|
Last Login : {loginDate}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/* user */}
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
|
||||||
|
<img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||||
|
{`${firstname} ${lastname}`}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm tracking-wide text-white">@{userEmail}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* countdown */}
|
||||||
|
{nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||||
|
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Current Task</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{(nextDueTask.next_due.item_code).substr(0,4)+'...'}
|
||||||
|
</p>
|
||||||
|
<p className="text-base text-white tracking-wide">
|
||||||
|
{nextDueTask.next_due.price * 0.01} Naira
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Next due in</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||||
|
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||||
|
</p>
|
||||||
|
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||||
|
<span>Hrs</span>
|
||||||
|
<span>Min</span>
|
||||||
|
<span>Sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* action */}
|
||||||
|
<div className="flex lg:space-x-3 space-x-1 items-center">
|
||||||
|
<Link to="/mytask" className="text-white text-base">
|
||||||
|
<span className=" border-b dark:border-[#5356fb29] border-white">
|
||||||
|
{" "}
|
||||||
|
View All Task(s)
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<HomeSliders
|
||||||
|
settings={settings}
|
||||||
|
sideData={sildeData}
|
||||||
|
bannerList={bannerList}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
|
||||||
|
import heroUser from "../../assets/images/hero-user.png";
|
||||||
|
import CountDown from "../Helpers/CountDown";
|
||||||
|
// import HomeSliders from "./HomeSliders";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import HomeSliders from "../Home/HomeSliders";
|
||||||
|
|
||||||
|
export default function WorkerDashboard({ className, bannerList, nextDueTask }) {
|
||||||
|
const settings = {
|
||||||
|
autoplay: true,
|
||||||
|
dots: true,
|
||||||
|
arrows: false,
|
||||||
|
infinite: true,
|
||||||
|
swipe: true,
|
||||||
|
};
|
||||||
|
const sildeData = null;
|
||||||
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||||
|
|
||||||
|
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||||
|
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||||
|
let userEmail = email.split("@")[0];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-blue-900 ${
|
||||||
|
className || ""
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
// background: `url(${heroBg})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||||
|
{/* heading */}
|
||||||
|
<div>
|
||||||
|
<h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
|
||||||
|
Welcome
|
||||||
|
</h1>
|
||||||
|
<span className="text-[18px] font-thin tracking-wide text-white">
|
||||||
|
Last Login : {loginDate}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/* user */}
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
|
||||||
|
<img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||||
|
{`${firstname} ${lastname}`}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm tracking-wide text-white">@{userEmail}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* countdown */}
|
||||||
|
{nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||||
|
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Current Task</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{(nextDueTask.next_due.item_code).substr(0,4)+'...'}
|
||||||
|
</p>
|
||||||
|
<p className="text-base text-white tracking-wide">
|
||||||
|
{nextDueTask.next_due.price * 0.01} Naira
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Next due in</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||||
|
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||||
|
</p>
|
||||||
|
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||||
|
<span>Hrs</span>
|
||||||
|
<span>Min</span>
|
||||||
|
<span>Sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* action */}
|
||||||
|
<div className="flex lg:space-x-3 space-x-1 items-center">
|
||||||
|
<Link to="/mytask" className="text-white text-base">
|
||||||
|
<span className=" border-b dark:border-[#5356fb29] border-white">
|
||||||
|
{" "}
|
||||||
|
View All Task(s)
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<HomeSliders
|
||||||
|
settings={settings}
|
||||||
|
sideData={sildeData}
|
||||||
|
bannerList={bannerList}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import FamilyParentDashboard from "./FamilyParentDashboard";
|
||||||
|
import HomeDashboard from "./HomeDashboard";
|
||||||
|
import JobOwnerDashboard from "./JobOwnerDashboard";
|
||||||
|
import WorkerDashboard from "./WorkerDashboard";
|
||||||
|
|
||||||
|
export {
|
||||||
|
FamilyParentDashboard,
|
||||||
|
HomeDashboard,
|
||||||
|
JobOwnerDashboard,
|
||||||
|
WorkerDashboard,
|
||||||
|
};
|
||||||
@@ -4,22 +4,62 @@ import MyOffersTable from "../MyTasks/MyOffersTable";
|
|||||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||||
import Hero from "./Hero";
|
import Hero from "./Hero";
|
||||||
import HomeActivities from "./HomeActivities";
|
import HomeActivities from "./HomeActivities";
|
||||||
|
import { FamilyParentDashboard, HomeDashboard, JobOwnerDashboard, WorkerDashboard } from "../Dashboards";
|
||||||
|
|
||||||
export default function FullAccountDash(props) {
|
export default function FullAccountDash(props) {
|
||||||
// console.log("PROPS IN HOME->", props);
|
// console.log("PROPS IN HOME->", props);
|
||||||
|
|
||||||
const { userDetails } = useSelector((state) => state?.userDetails);
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||||
|
|
||||||
|
const renderDashboard = () => {
|
||||||
|
switch (props.dashTypes) {
|
||||||
|
case "DEFAULT_HOME_DASH":
|
||||||
|
return (
|
||||||
|
<HomeDashboard
|
||||||
|
className="mb-10"
|
||||||
|
data={userDetails}
|
||||||
|
bannerList={props.bannerList}
|
||||||
|
nextDueTask={props.nextDueTask}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "FAMILY_PARENT_DASH":
|
||||||
|
return (
|
||||||
|
<FamilyParentDashboard
|
||||||
|
className="mb-10"
|
||||||
|
data={userDetails}
|
||||||
|
bannerList={props.bannerList}
|
||||||
|
nextDueTask={props.nextDueTask}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "WORKER_HOME_DASH":
|
||||||
|
return (
|
||||||
|
<WorkerDashboard
|
||||||
|
className="mb-10"
|
||||||
|
data={userDetails}
|
||||||
|
bannerList={props.bannerList}
|
||||||
|
nextDueTask={props.nextDueTask}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "JOBOWNER_HOME_DASH":
|
||||||
|
return (
|
||||||
|
<JobOwnerDashboard
|
||||||
|
className="mb-10"
|
||||||
|
data={userDetails}
|
||||||
|
bannerList={props.bannerList}
|
||||||
|
nextDueTask={props.nextDueTask}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="home-page-wrapper">
|
<div className="home-page-wrapper">
|
||||||
<Hero
|
{renderDashboard()}
|
||||||
className="mb-10"
|
|
||||||
data={userDetails}
|
{props?.dashTypes !== "undefined" && props.offersList?.data?.result_list?.length ? (
|
||||||
bannerList={props.bannerList}
|
|
||||||
nextDueTask={props.nextDueTask}
|
|
||||||
/>
|
|
||||||
{props.offersList?.data?.result_list?.length ? (
|
|
||||||
<MyOffersTable
|
<MyOffersTable
|
||||||
MyActiveOffersList={props.offersList?.data}
|
MyActiveOffersList={props.offersList?.data}
|
||||||
className="mb-10"
|
className="mb-10"
|
||||||
|
|||||||
@@ -82,6 +82,7 @@ export default function Home(props) {
|
|||||||
<FullAccountDash
|
<FullAccountDash
|
||||||
nextDueTask={nextDueTask}
|
nextDueTask={nextDueTask}
|
||||||
bannerList={props.bannerList}
|
bannerList={props.bannerList}
|
||||||
|
dashTypes={props.dashTypes}
|
||||||
offersList={MyOffersList}
|
offersList={MyOffersList}
|
||||||
MyActiveJobList={MyActiveJobList}
|
MyActiveJobList={MyActiveJobList}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -227,7 +227,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
|
|||||||
console.log("ERROR ", error);
|
console.log("ERROR ", error);
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
//
|
|
||||||
//FUNCTION TO GET COMMON HEAD DATA
|
//FUNCTION TO GET COMMON HEAD DATA
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
apiCall
|
apiCall
|
||||||
|
|||||||
@@ -1,18 +1,17 @@
|
|||||||
import React, {useState, useEffect} from 'react'
|
import { useSelector } from "react-redux";
|
||||||
import Home from "../components/Home";
|
import Home from "../components/Home";
|
||||||
import usersService from "../services/UsersService";
|
|
||||||
|
|
||||||
import { useSelector } from 'react-redux';
|
|
||||||
|
|
||||||
export default function HomePages() {
|
export default function HomePages() {
|
||||||
|
const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
|
||||||
|
|
||||||
const {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
|
const bannerOptions = {
|
||||||
|
bannerList: commonHeadBanner?.result_list,
|
||||||
|
dashTypes: commonHeadBanner?.home_dash_type,
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Home
|
<Home {...bannerOptions} />
|
||||||
bannerList={commonHeadBanner?.result_list}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user