WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Added the following changes

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2024-03-06 18:52:07 +01:00
parent de379c2bbc
commit 68115e79fa
8 changed files with 154 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+4 -1
View File
@@ -108,4 +108,7 @@ REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls
REACT_APP_SHOW_NEW_FAMILY_DASH=1
# Displays the account dashboard
REACT_APP_SHOW_ACCOUNT_DASH=1
REACT_APP_SHOW_ACCOUNT_DASH=1
# Displays the slider banners
REACT_APP_SHOW_SLIDER_BANNERS=0
.env.development
+4 -1
View File
@@ -76,4 +76,7 @@ REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls
REACT_APP_SHOW_NEW_FAMILY_DASH=1
# Displays the account dashboard
REACT_APP_SHOW_ACCOUNT_DASH=1
REACT_APP_SHOW_ACCOUNT_DASH=1
# Displays the slider banners
REACT_APP_SHOW_SLIDER_BANNERS=0
.env.production
+4 -1
View File
@@ -82,4 +82,7 @@ REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls
REACT_APP_SHOW_NEW_FAMILY_DASH=1
# Displays the account dashboard
REACT_APP_SHOW_ACCOUNT_DASH=1
REACT_APP_SHOW_ACCOUNT_DASH=1
# Displays the slider banners
REACT_APP_SHOW_SLIDER_BANNERS=0
src/components/FamilyAcc/FamilyTable.jsx
+2 -2
View File
@@ -16,7 +16,7 @@ import localImgLoad from "../../lib/localImgLoad";
*/
export default function FamilyTable({
className,
familyList,
familyList = [],
loader,
popUpHandler,
imageServer,
@@ -184,7 +184,7 @@ export default function FamilyTable({
</div>
) : (
<>
{familyList?.length > 0 ? (
{familyList?. > 0 ? (
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
<thead className="sticky top-0">
<tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29] default-border-bottom ">
src/components/FamilyAcc/index.jsx
+38 -24
View File
@@ -7,6 +7,7 @@ import React, {
} from "react";
import { Link } from "react-router-dom";
import usersService from "../../services/UsersService";
import Icons from "../Helpers/Icons";
import InputCom from "../Helpers/Inputs/InputCom";
import ModalCom from "../Helpers/ModalCom";
import Layout from "../Partials/Layout";
@@ -150,31 +151,44 @@ export default function FamilyAcc() {
)}
</h1>
</div>
<Link
to={`/familysettings`}
state={{ imageServer: familyList?.session_image_server }}
className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6 dark:stroke-white"
<div className="flex gap-2 items-center">
<Link to="/" className={`nav-item flex items-center `}>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="pending-job" />
</span>
<span
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium`}
>
Activities
</span>
</Link>
<Link
to={`/familysettings`}
state={{ imageServer: familyList?.session_image_server }}
className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</Link>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6 dark:stroke-white"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</Link>
</div>
</div>
<Suspense fallback={<LoadingSpinner color="sky-blue" size="16" />}>
<FamilyTable
src/components/JobGroups/MemberList.jsx
+1
View File
@@ -208,6 +208,7 @@ export default function MemberList({
labelClass="tracking-wider"
fieldClass="sm:px-6 px-2"
value={fields.firstname}
inputClass="xl:w-[16rem] 2xl:w-full"
inputHandler={handleFieldsChange}
placeholder="First Name"
// label="Firstname"
src/components/Partials/Sidebar.jsx
+90 -134
View File
@@ -8,96 +8,36 @@ import {
import DarkModeContext from "../Contexts/DarkModeContext";
import Icons from "../Helpers/Icons";
export default function Sidebar({
sidebar,
action,
logoutModalHandler,
myJobList,
}) {
const Sidebar = ({ sidebar, action, logoutModalHandler, myJobList }) => {
const darkMode = useContext(DarkModeContext);
let { userDetails } = useSelector((state) => state.userDetails);
//const jobLists = getJobList(); // pass from upper - we need in a lot of places
let { jobLists } = useSelector((state) => state.jobLists);
const { userDetails } = useSelector((state) => state.userDetails);
const { jobLists } = useSelector((state) => state.jobLists);
const marketData = jobLists?.result_list;
let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;
const noOfJobs = marketData?.length || 0;
useEffect(() => {
const title = document.querySelectorAll(".menu-setting-items .heading");
if (sidebar) {
title.forEach((elm) => {
elm.classList.add("active");
});
} else {
title.forEach((elm) => {
elm.classList.remove("active");
});
}
}, [jobLists]);
title.forEach((elm) => {
sidebar ? elm.classList.add("active") : elm.classList.remove("active");
});
}, [sidebar, jobLists]);
return (
<div className="w-full h-full">
{/* logo-area */}
<div
className={`w-full flex items-center transition-all duration-300 ease-in-out ${
sidebar ? "justify-start gap-3 mb-14" : "justify-center"
sidebar ? "justify-start gap-3 mb-14" : "justify-center"
}`}
>
<div className={`sidebar-logo ${sidebar ? "enter" : ""}`}>
{darkMode.theme === "light" ? (
<img src={logo} alt="nft" />
) : (
<img src={logo3} alt="nft" />
)}
<img src={darkMode.theme === "light" ? logo : logo3} alt="logo" />
</div>
<span onClick={action}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="19"
viewBox="0 0 25 19"
fill="none"
>
<path
d="M24.3544 8.45953L16.9855 0.271831C16.8283 0.0982522 16.6089 0 16.3763 0H11.4637C11.1411 0 10.848 0.189955 10.7153 0.484712C10.5843 0.781107 10.6384 1.12663 10.8545 1.36571L17.7306 9.00647L10.8545 16.6456C10.6384 16.8863 10.5827 17.2318 10.7153 17.5266C10.848 17.823 11.1411 18.0129 11.4637 18.0129H16.3763C16.6089 18.0129 16.8283 17.913 16.9855 17.7427L24.3544 9.55505C24.6344 9.24391 24.6344 8.76903 24.3544 8.45953Z"
fill="url(#paint0_linear_159_67708)"
/>
<path
d="M13.7104 8.45953L6.34148 0.271831C6.18427 0.0982522 5.96484 0 5.73231 0H0.819691C0.497095 0 0.203976 0.189955 0.071335 0.484712C-0.0596682 0.781107 -0.00562942 1.12663 0.210526 1.36571L7.08656 9.00647L0.210526 16.6456C-0.00562942 16.8863 -0.0613058 17.2318 0.071335 17.5266C0.203976 17.823 0.497095 18.0129 0.819691 18.0129H5.73231C5.96484 18.0129 6.18427 17.913 6.34148 17.7427L13.7104 9.55505C13.9904 9.24391 13.9904 8.76903 13.7104 8.45953Z"
fill="url(#paint1_linear_159_67708)"
/>
<defs>
<linearGradient
id="paint0_linear_159_67708"
x1="10.644"
y1="0"
x2="28.9548"
y2="13.8495"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint1_linear_159_67708"
x1="0"
y1="0"
x2="18.3108"
y2="13.8495"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
</defs>
</svg>
<SidebarToggleIcon />
</span>
</div>
{/* menu and settings item */}
<div className="menu-setting-items mb-11">
{/* menus item */}
<div
className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-5" : "mb-2"
@@ -108,9 +48,10 @@ export default function Sidebar({
</div>
<div className="items">
<ul className="flex flex-col space-y-6">
{/* Using mini component reduces the bulk amount of html */}
<ListItem
title={userDetails?.account_type == "FULL" ? "Dashboard" : "Home"}
title={
userDetails?.account_type === "FULL" ? "Dashboard" : "Home"
}
route="/"
sidebar={sidebar}
iconName="new-dashboard"
@@ -124,7 +65,6 @@ export default function Sidebar({
iconName="new-market"
/>
)}
<ListItem
title="My Task(s)"
route="/mytask"
@@ -135,7 +75,6 @@ export default function Sidebar({
</div>
</div>
{/* menu and settings item */}
{userDetails?.account_type !== "FAMILY" && (
<div
className={`menu-item transition-all duration-300 ease-in-out ${
@@ -157,6 +96,7 @@ export default function Sidebar({
</div>
</div>
)}
{userDetails?.account_type !== "FAMILY" && (
<>
{!userDetails?.post_jobs ? (
@@ -172,28 +112,12 @@ export default function Sidebar({
</div>
<div className="items">
<ul className="flex flex-col space-y-6">
<li className="item group">
<NavLink
to="/start-job"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar
? "justify-start space-x-3.5"
: "justify-center")
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="people-two" />
</span>
<span
className={`item-content group-hover:text-sky-blue text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
Enable Job Post
</span>
</NavLink>
</li>
<ListItem
title="Enable Job Post"
route="/start-job"
sidebar={sidebar}
iconName="people-two"
/>
</ul>
</div>
</div>
@@ -211,11 +135,7 @@ export default function Sidebar({
<div className="items">
<ul className="flex flex-col space-y-6">
{[
{
name: "List",
path: "/myjobs",
iconName: "job-list",
},
{ name: "List", path: "/myjobs", iconName: "job-list" },
{
name: "Waiting",
path: "/pend-interest",
@@ -261,7 +181,7 @@ export default function Sidebar({
route="/myjobs"
iconName="people-two"
sidebar={sidebar}
popup={true}
popup
/>
</ul>
</div>
@@ -270,51 +190,42 @@ export default function Sidebar({
</>
)}
</div>
{/* signout area */}
{sidebar ? (
<div className="flex justify-center">
<button
onClick={logoutModalHandler}
type="button"
className="signout-btn flex items-center space-x-1 p-2.5 w-2/3 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
className={`signout-btn flex items-center space-x-1 p-2.5 w-2/3 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full ${
sidebar ? "" : "justify-center w-full"
}`}
>
<span className="">
<Icons name="new-logout" />
</span>
<span
className={`signout-btn-content text-white text-xl font-bold ${
sidebar ? "active" : ""
}`}
>
{process.env.REACT_APP_LOGOUT_TEXT}
</span>
{sidebar && (
<span className="signout-btn-content text-white text-xl font-bold">
{process.env.REACT_APP_LOGOUT_TEXT}
</span>
)}
</button>
) : (
<button
onClick={logoutModalHandler}
type="button"
className="signout-btn w-full flex items-center justify-center"
>
<span className="p-[1px] w-[40px] h-[40px] border border-purple rounded-full">
<Icons name="new-logout" />
</span>
</button>
)}
</div>
</div>
);
}
};
export default Sidebar;
const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
return (
<li className={`item group`}>
<li className="item group">
<NavLink
to={route}
state={popup ? { popup: true } : { popup: false }}
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center")
}`}
className={`nav-item flex items-center ${
sidebar ? "justify-start space-x-3.5" : "justify-center"
} ${(navData) => (navData.isActive ? "active" : "")}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name={iconName} />
</span>
<span
@@ -322,7 +233,7 @@ const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
sidebar ? "active flex-1" : "w-0"
}`}
>
{title && title}
{title}
{bubble && (
<span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
{bubble}
@@ -333,3 +244,48 @@ const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
</li>
);
};
const SidebarToggleIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="19"
viewBox="0 0 25 19"
fill="none"
>
<path
d="M24.3544 8.45953L16.9855 0.271831C16.8283 0.0982522 16.6089 0 16.3763 0H11.4637C11.1411 0 10.848 0.189955 10.7153 0.484712C10.5843 0.781107 10.6384 1.12663 10.8545 1.36571L17.7306 9.00647L10.8545 16.6456C10.6384 16.8863 10.5827 17.2318 10.7153 17.5266C10.848 17.823 11.1411 18.0129 11.4637 18.0129H16.3763C16.6089 18.0129 16.8283 17.913 16.9855 17.7427L24.3544 9.55505C24.6344 9.24391 24.6344 8.76903 24.3544 8.45953Z"
fill="url(#paint0_linear_159_67708)"
/>
<path
d="M13.7104 8.45953L6.34148 0.271831C6.18427 0.0982522 5.96484 0 5.73231 0H0.819691C0.497095 0 0.203976 0.189955 0.071335 0.484712C-0.0596682 0.781107 -0.00562942 1.12663 0.210526 1.36571L7.08656 9.00647L0.210526 16.6456C-0.00562942 16.8863 -0.0613058 17.2318 0.071335 17.5266C0.203976 17.823 0.497095 18.0129 0.819691 18.0129H5.73231C5.96484 18.0129 6.18427 17.913 6.34148 17.7427L13.7104 9.55505C13.9904 9.24391 13.9904 8.76903 13.7104 8.45953Z"
fill="url(#paint1_linear_159_67708)"
/>
<defs>
<linearGradient
id="paint0_linear_159_67708"
x1="10.644"
y1="0"
x2="28.9548"
y2="13.8495"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
<linearGradient
id="paint1_linear_159_67708"
x1="0"
y1="0"
x2="18.3108"
y2="13.8495"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F539F8" />
<stop offset="0.416763" stopColor="#C342F9" />
<stop offset="1" stopColor="#5356FB" />
</linearGradient>
</defs>
</svg>
);
src/components/UserHeader/CommonHead.jsx
+11 -30
View File
@@ -1,37 +1,18 @@
import React from "react";
import { Link } from "react-router-dom";
import RecomendedSliders from "./RecomendedSliders";
export default function CommonHead({ className, commonHeadData }) {
export default function CommonHead({ className = "", commonHeadData = [] }) {
return (
<div
className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center md:p-2 p-2 bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
className || ""
}`}
>
{commonHeadData?.length > 0 && (
<RecomendedSliders bannerData={commonHeadData} />
<>
{process.env.REACT_APP_SHOW_SLIDER_BANNERS === "1" && (
<div
className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center md:p-2 p-2 bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${className}`}
>
{commonHeadData?.length > 0 && (
<RecomendedSliders bannerData={commonHeadData} />
)}
</div>
)}
{/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
{/* /!*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*!/*/}
{/* /!* This is common head which will appear as needed , will take many shape*!/*/}
{/* /!*</h1>*!/*/}
{/* /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
{/* /!* some space for extra texts here*!/*/}
{/* /!*</p>*!/*/}
{/* */}
{/*</div>*/}
{/*<div className="flex-1 flex lg:justify-end">*/}
{/* <div className="flex items-center space-x-5">*/}
{/* <Link*/}
{/* to="/mytask"*/}
{/* className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
{/* >*/}
{/* View Task*/}
{/* </Link>*/}
{/* </div>*/}
{/*</div>*/}
</div>
</>
);
}