added top banner #586
@@ -1,31 +1,22 @@
|
||||
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 React from "react";
|
||||
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;
|
||||
export default function JobOwnerDashboard({
|
||||
className,
|
||||
bannerList,
|
||||
nextDueTask,
|
||||
}) {
|
||||
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||
|
||||
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||
let { firstname, lastname, email } = 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={`w-full min-h-[100px] flex lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
|
||||
className || ""
|
||||
}`}
|
||||
style={{
|
||||
@@ -34,64 +25,56 @@ export default function FamilyParentDashboard({ className, bannerList, nextDueTa
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||
<div className="h-full flex w-full justify-between mb-5 lg:mb-0">
|
||||
{/* heading */}
|
||||
<div>
|
||||
<div className="flex gap-8">
|
||||
<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>
|
||||
{/* user */}
|
||||
<div>
|
||||
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||
<p className="text-3xl 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>
|
||||
{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>
|
||||
</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>
|
||||
)}
|
||||
<span className="text-[18px] font-thin tracking-wide text-white flex items-end">
|
||||
Last Login : {loginDate}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,97 +1,80 @@
|
||||
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 React from "react";
|
||||
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;
|
||||
export default function JobOwnerDashboard({
|
||||
className,
|
||||
bannerList,
|
||||
nextDueTask,
|
||||
}) {
|
||||
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||
|
||||
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||
let { firstname, lastname, email } = 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={`w-full min-h-[100px] flex lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
|
||||
className || ""
|
||||
}`}
|
||||
style={{
|
||||
background: `url(${heroBg})`,
|
||||
// background: `url(${heroBg})`,
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||
<div className="h-full flex w-full justify-between mb-5 lg:mb-0">
|
||||
{/* heading */}
|
||||
<div>
|
||||
<div className="flex gap-8">
|
||||
<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>
|
||||
{/* user */}
|
||||
<div>
|
||||
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||
<p className="text-3xl 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>
|
||||
{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>
|
||||
</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>
|
||||
)}
|
||||
<span className="text-[18px] font-thin tracking-wide text-white flex items-end">
|
||||
Last Login : {loginDate}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,31 +1,22 @@
|
||||
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 React from "react";
|
||||
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;
|
||||
export default function JobOwnerDashboard({
|
||||
className,
|
||||
bannerList,
|
||||
nextDueTask,
|
||||
}) {
|
||||
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||
|
||||
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||
let { firstname, lastname, email } = 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={`w-full min-h-[100px] flex lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
|
||||
className || ""
|
||||
}`}
|
||||
style={{
|
||||
@@ -34,70 +25,58 @@ export default function JobOwnerDashboard({ className, bannerList, nextDueTask }
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||
<div className="h-full flex w-full justify-between mb-5 lg:mb-0">
|
||||
{/* heading */}
|
||||
<div>
|
||||
<div className="flex gap-8">
|
||||
<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>
|
||||
{/* user */}
|
||||
<div>
|
||||
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||
<p className="text-3xl 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>
|
||||
{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>
|
||||
</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>
|
||||
)}
|
||||
<span className="text-[18px] font-thin tracking-wide text-white flex items-end">
|
||||
Last Login : {loginDate}
|
||||
</span>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -1,31 +1,22 @@
|
||||
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 React from "react";
|
||||
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;
|
||||
export default function JobOwnerDashboard({
|
||||
className,
|
||||
bannerList,
|
||||
nextDueTask,
|
||||
}) {
|
||||
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||
|
||||
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||
let { firstname, lastname, email } = 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={`w-full min-h-[100px] flex lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
|
||||
className || ""
|
||||
}`}
|
||||
style={{
|
||||
@@ -34,70 +25,57 @@ export default function WorkerDashboard({ className, bannerList, nextDueTask })
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||
<div className="h-full flex w-full justify-between mb-5 lg:mb-0">
|
||||
{/* heading */}
|
||||
<div>
|
||||
<div className="flex gap-8">
|
||||
<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>
|
||||
{/* user */}
|
||||
<div>
|
||||
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||
<p className="text-3xl 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>
|
||||
{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>
|
||||
</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>
|
||||
)}
|
||||
<span className="text-[18px] font-thin tracking-wide text-white flex items-end">
|
||||
Last Login : {loginDate}
|
||||
</span>
|
||||
</div>
|
||||
<HomeSliders
|
||||
settings={settings}
|
||||
sideData={sildeData}
|
||||
bannerList={bannerList}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function FullAccountDash(props) {
|
||||
case "DEFAULT_HOME_DASH":
|
||||
return (
|
||||
<HomeDashboard
|
||||
className="mb-10"
|
||||
className="mb-4"
|
||||
data={userDetails}
|
||||
bannerList={props.bannerList}
|
||||
nextDueTask={props.nextDueTask}
|
||||
@@ -30,7 +30,7 @@ export default function FullAccountDash(props) {
|
||||
case "FAMILY_PARENT_DASH":
|
||||
return (
|
||||
<FamilyParentDashboard
|
||||
className="mb-10"
|
||||
className="mb-4"
|
||||
data={userDetails}
|
||||
bannerList={props.bannerList}
|
||||
nextDueTask={props.nextDueTask}
|
||||
@@ -39,7 +39,7 @@ export default function FullAccountDash(props) {
|
||||
case "WORKER_HOME_DASH":
|
||||
return (
|
||||
<WorkerDashboard
|
||||
className="mb-10"
|
||||
className="mb-4"
|
||||
data={userDetails}
|
||||
bannerList={props.bannerList}
|
||||
nextDueTask={props.nextDueTask}
|
||||
@@ -48,7 +48,7 @@ export default function FullAccountDash(props) {
|
||||
case "JOBOWNER_HOME_DASH":
|
||||
return (
|
||||
<JobOwnerDashboard
|
||||
className="mb-10"
|
||||
className="mb-4"
|
||||
data={userDetails}
|
||||
bannerList={props.bannerList}
|
||||
nextDueTask={props.nextDueTask}
|
||||
@@ -62,10 +62,10 @@ export default function FullAccountDash(props) {
|
||||
return (
|
||||
<>
|
||||
<div className="home-page-wrapper">
|
||||
{renderDashboard()}
|
||||
{process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && (
|
||||
<AccountDashboard className="mb-4" bannerList={props.bannerList} />
|
||||
)}
|
||||
{renderDashboard()}
|
||||
|
||||
{props?.dashTypes !== "undefined" &&
|
||||
props.offersList?.data?.result_list?.length ? (
|
||||
|
||||
Reference in New Issue
Block a user