84 lines
3.1 KiB
React
84 lines
3.1 KiB
React
import React from "react";
|
|
import CountDown from "../Helpers/CountDown";
|
|
// import HomeSliders from "./HomeSliders";
|
|
import { useSelector } from "react-redux";
|
|
|
|
export default function WorkerDashboard({
|
|
className,
|
|
bannerList,
|
|
nextDueTask,
|
|
}) {
|
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
|
|
|
let loginDate = userDetails?.last_login.split(" ")[0];
|
|
let { firstname, lastname, email } = userDetails;
|
|
let userEmail = email.split("@")[0];
|
|
|
|
return (
|
|
<div
|
|
className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
|
|
className || ""
|
|
}`}
|
|
style={{
|
|
// background: `url(${heroBg})`,
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundSize: "cover",
|
|
}}
|
|
>
|
|
<div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
|
|
{/* heading */}
|
|
<div className="flex gap-8">
|
|
<h1 className="text-base font-medium text-white tracking-wide">
|
|
Welcome
|
|
</h1>
|
|
{/* user */}
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-base tracking-wide font-bold antise text-white leading-[1]">
|
|
{`${firstname} ${lastname}`}
|
|
</p>
|
|
<p className="text-sm tracking-wide text-white leading-[1]">
|
|
@{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>
|
|
)}
|
|
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
|
Last Login : {loginDate}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|