From 2f90c4a6c2d154f468b6056dc0e6023c44da6917 Mon Sep 17 00:00:00 2001 From: Ebube Date: Tue, 30 Jan 2024 17:10:30 +0100 Subject: [PATCH 1/2] Different dashboards for Home Banner --- src/components/Cards/HomeBannerOffersCard.jsx | 2 +- .../Dashboards/FamilyParentDashboard.jsx | 103 ++++++++++++++++++ src/components/Dashboards/HomeDashboard.jsx | 103 ++++++++++++++++++ .../Dashboards/JobOwnerDashboard.jsx | 103 ++++++++++++++++++ src/components/Dashboards/WorkerDashboard.jsx | 103 ++++++++++++++++++ src/components/Dashboards/index.js | 11 ++ src/components/Home/FullAccountDash.jsx | 56 ++++++++-- src/components/Home/index.jsx | 1 + src/middleware/AuthRoute.jsx | 2 +- src/views/HomePages.jsx | 15 ++- 10 files changed, 482 insertions(+), 17 deletions(-) create mode 100644 src/components/Dashboards/FamilyParentDashboard.jsx create mode 100644 src/components/Dashboards/HomeDashboard.jsx create mode 100644 src/components/Dashboards/JobOwnerDashboard.jsx create mode 100644 src/components/Dashboards/WorkerDashboard.jsx create mode 100644 src/components/Dashboards/index.js diff --git a/src/components/Cards/HomeBannerOffersCard.jsx b/src/components/Cards/HomeBannerOffersCard.jsx index 1532d2a..6344b7f 100644 --- a/src/components/Cards/HomeBannerOffersCard.jsx +++ b/src/components/Cards/HomeBannerOffersCard.jsx @@ -8,7 +8,7 @@ export default function HomeBannerOffersCard(props) { useEffect(() => { let { banner, banner_location } = props?.itemData; 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); } else if (banner_location === "URL") setImageUrl(banner); else return null; diff --git a/src/components/Dashboards/FamilyParentDashboard.jsx b/src/components/Dashboards/FamilyParentDashboard.jsx new file mode 100644 index 0000000..8440181 --- /dev/null +++ b/src/components/Dashboards/FamilyParentDashboard.jsx @@ -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 ( +
+
+ {/* heading */} +
+

+ Welcome +

+ + Last Login : {loginDate} + +
+ {/* user */} +
+
+ +
+
+

+ {`${firstname} ${lastname}`} +

+

@{userEmail}

+
+
+ {/* countdown */} + {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && ( +
+
+

Current Task

+

+ {(nextDueTask.next_due.item_code).substr(0,4)+'...'} +

+

+ {nextDueTask.next_due.price * 0.01} Naira +

+
+
+
+

Next due in

+

+ {/* */} + +

+
+ Hrs + Min + Sec +
+
+
+ )} + {/* action */} +
+ + + {" "} + View All Task(s) + + +
+
+ +
+ ); +} diff --git a/src/components/Dashboards/HomeDashboard.jsx b/src/components/Dashboards/HomeDashboard.jsx new file mode 100644 index 0000000..9c45836 --- /dev/null +++ b/src/components/Dashboards/HomeDashboard.jsx @@ -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 ( +
+
+ {/* heading */} +
+

+ Welcome +

+ + Last Login : {loginDate} + +
+ {/* user */} +
+
+ +
+
+

+ {`${firstname} ${lastname}`} +

+

@{userEmail}

+
+
+ {/* countdown */} + {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && ( +
+
+

Current Task

+

+ {(nextDueTask.next_due.item_code).substr(0,4)+'...'} +

+

+ {nextDueTask.next_due.price * 0.01} Naira +

+
+
+
+

Next due in

+

+ {/* */} + +

+
+ Hrs + Min + Sec +
+
+
+ )} + {/* action */} +
+ + + {" "} + View All Task(s) + + +
+
+ +
+ ); +} diff --git a/src/components/Dashboards/JobOwnerDashboard.jsx b/src/components/Dashboards/JobOwnerDashboard.jsx new file mode 100644 index 0000000..ee84790 --- /dev/null +++ b/src/components/Dashboards/JobOwnerDashboard.jsx @@ -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 ( +
+
+ {/* heading */} +
+

+ Welcome +

+ + Last Login : {loginDate} + +
+ {/* user */} +
+
+ +
+
+

+ {`${firstname} ${lastname}`} +

+

@{userEmail}

+
+
+ {/* countdown */} + {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && ( +
+
+

Current Task

+

+ {(nextDueTask.next_due.item_code).substr(0,4)+'...'} +

+

+ {nextDueTask.next_due.price * 0.01} Naira +

+
+
+
+

Next due in

+

+ {/* */} + +

+
+ Hrs + Min + Sec +
+
+
+ )} + {/* action */} +
+ + + {" "} + View All Task(s) + + +
+
+ +
+ ); +} diff --git a/src/components/Dashboards/WorkerDashboard.jsx b/src/components/Dashboards/WorkerDashboard.jsx new file mode 100644 index 0000000..5c56170 --- /dev/null +++ b/src/components/Dashboards/WorkerDashboard.jsx @@ -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 ( +
+
+ {/* heading */} +
+

+ Welcome +

+ + Last Login : {loginDate} + +
+ {/* user */} +
+
+ +
+
+

+ {`${firstname} ${lastname}`} +

+

@{userEmail}

+
+
+ {/* countdown */} + {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && ( +
+
+

Current Task

+

+ {(nextDueTask.next_due.item_code).substr(0,4)+'...'} +

+

+ {nextDueTask.next_due.price * 0.01} Naira +

+
+
+
+

Next due in

+

+ {/* */} + +

+
+ Hrs + Min + Sec +
+
+
+ )} + {/* action */} +
+ + + {" "} + View All Task(s) + + +
+
+ +
+ ); +} diff --git a/src/components/Dashboards/index.js b/src/components/Dashboards/index.js new file mode 100644 index 0000000..5da23db --- /dev/null +++ b/src/components/Dashboards/index.js @@ -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, +}; diff --git a/src/components/Home/FullAccountDash.jsx b/src/components/Home/FullAccountDash.jsx index 22502eb..b1e5cab 100644 --- a/src/components/Home/FullAccountDash.jsx +++ b/src/components/Home/FullAccountDash.jsx @@ -4,22 +4,64 @@ import MyOffersTable from "../MyTasks/MyOffersTable"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import Hero from "./Hero"; import HomeActivities from "./HomeActivities"; +import { FamilyParentDashboard, HomeDashboard, JobOwnerDashboard, WorkerDashboard } from "../Dashboards"; export default function FullAccountDash(props) { // console.log("PROPS IN HOME->", props); const { userDetails } = useSelector((state) => state?.userDetails); + console.log("This is the props for Full account dashboard >> ", props); + + const renderDashboard = () => { + switch (props.dashTypes) { + case "DEFAULT_HOME_DASH": + return ( + + ); + case "FAMILY_PARENT_DASH": + return ( + + ); + case "WORKER_HOME_DASH": + return ( + + ); + case "JOBOWNER_HOME_DASH": + return ( + + ); + default: + return null; + } + }; + return ( <>
- - {props.offersList?.data?.result_list?.length ? ( + {renderDashboard()} + + {props?.dashTypes !== "undefined" && props.offersList?.data?.result_list?.length ? ( diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx index f346f5b..0995d78 100644 --- a/src/middleware/AuthRoute.jsx +++ b/src/middleware/AuthRoute.jsx @@ -227,7 +227,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => { console.log("ERROR ", error); }); }, []); - // + //FUNCTION TO GET COMMON HEAD DATA useEffect(() => { apiCall diff --git a/src/views/HomePages.jsx b/src/views/HomePages.jsx index b6d1cda..132fa30 100644 --- a/src/views/HomePages.jsx +++ b/src/views/HomePages.jsx @@ -1,18 +1,17 @@ -import React, {useState, useEffect} from 'react' +import { useSelector } from "react-redux"; import Home from "../components/Home"; -import usersService from "../services/UsersService"; - -import { useSelector } from 'react-redux'; 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 ( <> - + ); } From 7ff5e2b6e0bfc518d1a9cf822668d61e68f6688a Mon Sep 17 00:00:00 2001 From: Ebube Date: Tue, 30 Jan 2024 17:10:39 +0100 Subject: [PATCH 2/2] . --- src/components/Home/FullAccountDash.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Home/FullAccountDash.jsx b/src/components/Home/FullAccountDash.jsx index b1e5cab..7178217 100644 --- a/src/components/Home/FullAccountDash.jsx +++ b/src/components/Home/FullAccountDash.jsx @@ -11,8 +11,6 @@ export default function FullAccountDash(props) { const { userDetails } = useSelector((state) => state?.userDetails); - console.log("This is the props for Full account dashboard >> ", props); - const renderDashboard = () => { switch (props.dashTypes) { case "DEFAULT_HOME_DASH":