Compare commits

..

13 Commits

24 changed files with 440 additions and 281 deletions
+1 -1
View File
@@ -72,4 +72,4 @@ REACT_APP_FAMILY_MINIMUM_AGE=4
REACT_APP_FAMILY_MAXIMUM_AGE=18
#CHANGE LOGIN LAYOUT
REACT_APP_NEW_LOGIN_LAYOUT=0
REACT_APP_NEW_LOGIN_LAYOUT=1
+111 -76
View File
@@ -1,65 +1,61 @@
import { Route, Routes } from "react-router-dom";
import FourZeroFour from "./components/FourZeroFour";
import ScrollToTop from "./components/Helpers/ScrollToTop";
import MyCollection from "./components/MyCollection";
import StartJob from "./components/MyJobs/StartJob";
import Notification from "./components/Notification";
import AuthRoute from "./middleware/AuthRoute";
import AcitveBidsPage from "./views/AcitveBidsPage";
import AppDownloadPage from "./views/AppDownloadPage";
import AppleRedirectPage from "./views/AppleRedirectPage";
import AuthProfilePage from "./views/AuthProfilePage";
import AuthRedirect from "./views/AuthRedirect";
import BlogPage from "./views/BlogPage";
import CalendarPage from "./views/CalendarPage";
import CollectionItemPage from "./views/CollectionItemPage";
import FacebookRedirect from "./views/FacebookRedirect";
import FamilyAccPage from "./views/FamilyAccPage";
import FamilyManagePage from "./views/FamilyManagePage";
import FamilyMarketPage from "./views/FamilyMarketPage";
import FamilySettingsPage from "./views/FamilySettingsPage";
import ForgotPasswordPages from "./views/ForgotPasswordPages";
import ForgotPasswordPagesTwo from "./views/ForgotPasswordPagesTwo";
import HistoryPage from "./views/HistoryPage";
import HomePages from "./views/HomePages";
import JobGroupsPage from "./views/JobGroupsPage";
import LndPage from "./views/LndPage";
import LoginPage from "./views/LoginPage";
import LoginPageTwo from "./views/LoginPageTwo";
import ManageActiveJobs from "./views/ManageActiveJobs";
import ManageInterestOfferPage from "./views/ManageInterestOfferPage";
import MarketPlacePage from "./views/MarketPlacePage";
import MyActiveJobsPage from "./views/MyActiveJobsPage";
import MyCouponPage from "./views/MyCouponPage";
import MyJobsPage from "./views/MyJobsPage";
import MyOffersPage from "./views/MyOffersPage";
import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
import MyReviewDueJobsPage from "./views/MyReviewDueJobsPage";
import MyTaskPage from "./views/MyTaskPage";
import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
import MyWalletPage from "./views/MyWalletPage";
import OffersInterestPage from "./views/OffersInterestPage";
import ReferralPage from "./views/ReferralPage";
import RemindersPage from "./views/RemindersPage";
import ResourcePage from "./views/ResourcePage";
import SavedPage from "./views/SavedPage";
import SellPage from "./views/SellPage";
import SettingsPage from "./views/SettingsPage";
import ShopDetailsPage from "./views/ShopDetailsPage";
import SignupPage from "./views/SignupPage";
import SignupPageTwo from "./views/SignupPageTwo";
import TrackingPage from "./views/TrackingPage";
import UpdatePasswordPages from "./views/UpdatePasswordPages";
import UpdatePasswordPagesTwo from "./views/UpdatePasswordPagesTwo";
import UploadProductPage from "./views/UploadProductPage";
import UserProfilePage from "./views/UserProfilePage";
import VerifyYouPages from "./views/VerifyYouPages";
import VerifyYouPagesTwo from "./views/VerifyYouPagesTwo";
import VerifyPasswordPages from "./views/VerifyPasswordPages";
import VerifyPasswordPagesTwo from "./views/VerifyPasswordPagesTwo";
import RemindersPage from './views/RemindersPage';
import TrackingPage from "./views/TrackingPage";
import CalendarPage from "./views/CalendarPage";
import ResourcePage from "./views/ResourcePage";
import MyTaskPage from "./views/MyTaskPage";
import MyJobsPage from "./views/MyJobsPage";
import ReferralPage from "./views/ReferralPage";
import VerifyLinkPages from "./views/VerifyLinkPages";
import VerifyLinkPagesTwo from "./views/VerifyLinkPagesTwo";
import MyActiveJobsPage from "./views/MyActiveJobsPage";
import FamilyAccPage from "./views/FamilyAccPage";
import StartJob from "./components/MyJobs/StartJob";
import AddJobPage from "./views/AddJobPage";
import MyPendingJobsPage from "./views/MyPendingJobsPage";
import ManageActiveJobs from "./views/ManageActiveJobs";
import FamilyManagePage from "./views/FamilyManagePage";
import MyCouponPage from "./views/MyCouponPage";
import AuthRedirect from "./views/AuthRedirect";
import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
import BlogPage from "./views/BlogPage";
import MyReviewDueJobsPage from "./views/MyReviewDueJobsPage";
import OffersInterestPage from "./views/OffersInterestPage";
import ManageInterestOfferPage from './views/ManageInterestOfferPage'
import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
import FamilyMarketPage from "./views/FamilyMarketPage";
import FacebookRedirect from "./views/FacebookRedirect";
import AppleRedirectPage from "./views/AppleRedirectPage";
import LndPage from "./views/LndPage";
import FamilySettingsPage from "./views/FamilySettingsPage";
import AppDownloadPage from "./views/AppDownloadPage";
import JobGroupsPage from "./views/JobGroupsPage";
import VerifyPasswordPages from "./views/VerifyPasswordPages";
import VerifyPasswordPagesTwo from "./views/VerifyPasswordPagesTwo";
import VerifyYouPages from "./views/VerifyYouPages";
import VerifyYouPagesTwo from "./views/VerifyYouPagesTwo";
import YourPages from "./views/YourPage_";
export default function Routers() {
@@ -67,31 +63,47 @@ export default function Routers() {
<ScrollToTop>
<Routes>
{/* guest routes */}
{process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ?
<>
<Route exact path="/login" element={<LoginPageTwo />} />
<Route exact path="/signup" element={<SignupPageTwo />} />
<Route exact path="/forgot-password" element={<ForgotPasswordPagesTwo />} />
<Route exact path="/update-password" element={<UpdatePasswordPagesTwo />} />
<Route path="/vemail" element={<VerifyLinkPagesTwo />} />
<Route path="/complereset" element={<VerifyPasswordPagesTwo />} />
<Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
<Route exact path="/eoffer" element={<LoginPageTwo />} />
<Route exact path="/invite" element={<LoginPageTwo />} />
</>
:
<>
<Route exact path="/login" element={<LoginPage />} />
<Route exact path="/signup" element={<SignupPage />} />
<Route exact path="/forgot-password" element={<ForgotPasswordPages />} />
<Route exact path="/update-password" element={<UpdatePasswordPages />} />
<Route path="/vemail" element={<VerifyLinkPages />} />
<Route path="/complereset" element={<VerifyPasswordPages />} />
<Route exact path="/outmessage" element={<VerifyYouPages />} />
<Route exact path="/eoffer" element={<LoginPage />} />
<Route exact path="/invite" element={<LoginPage />} />
</>
}
{process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ? (
<>
<Route exact path="/login" element={<LoginPageTwo />} />
<Route exact path="/signup" element={<SignupPageTwo />} />
<Route
exact
path="/forgot-password"
element={<ForgotPasswordPagesTwo />}
/>
<Route
exact
path="/update-password"
element={<UpdatePasswordPagesTwo />}
/>
<Route path="/vemail" element={<VerifyLinkPagesTwo />} />
<Route path="/complereset" element={<VerifyPasswordPagesTwo />} />
<Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
<Route exact path="/eoffer" element={<LoginPageTwo />} />
<Route exact path="/invite" element={<LoginPageTwo />} />
</>
) : (
<>
<Route exact path="/login" element={<LoginPage />} />
<Route exact path="/signup" element={<SignupPage />} />
<Route
exact
path="/forgot-password"
element={<ForgotPasswordPages />}
/>
<Route
exact
path="/update-password"
element={<UpdatePasswordPages />}
/>
<Route path="/vemail" element={<VerifyLinkPages />} />
<Route path="/complereset" element={<VerifyPasswordPages />} />
<Route exact path="/outmessage" element={<VerifyYouPages />} />
<Route exact path="/eoffer" element={<LoginPage />} />
<Route exact path="/invite" element={<LoginPage />} />
</>
)}
<Route exact path="/login/auth" element={<AuthRedirect />} />
<Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
<Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
@@ -117,25 +129,48 @@ export default function Routers() {
<Route exact path="/market-place" element={<MarketPlacePage />} />
<Route exact path="/market" element={<MarketPlacePage />} />
<Route exact path="/familymarket" element={<FamilyMarketPage />} />
<Route exact path="/familysettings" element={<FamilySettingsPage />} />
<Route
exact
path="/familysettings"
element={<FamilySettingsPage />}
/>
<Route exact path="/notification" element={<Notification />} />
<Route exact path="/mytask" element={<MyTaskPage />} />
<Route exact path="/myjobs" element={<MyJobsPage />} />
{/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
<Route exact path="/my-active-jobs" element={<MyActiveJobsPage />} />
<Route exact path="/my-pastdue-jobs" element={<MyPastDueJobsPage />} />
<Route exact path="/my-pending-jobs" element={<MyPendingJobsPage />} />
<Route exact path="/pend-interest" element={<MyWaitingJobsPage />} />
<Route exact path="/my-review-jobs" element={<MyReviewDueJobsPage />} />
<Route exact path="/acc-family" element={<FamilyAccPage />} />
<Route exact path="/manage-family" element={<FamilyManagePage />} />
<Route exact path="/start-job" element={<StartJob />} />
<Route exact path="/yourpage" element={<YourPages />} />
<Route exact path="/manage-active-job" element={<ManageActiveJobs />} />
<Route exact path="/blog-page" element={<BlogPage />} />
<Route exact path="/offer-interest" element={<OffersInterestPage />} />
<Route exact path="/manage-offer" element={<ManageInterestOfferPage />} />
<Route exact path="/my-active-jobs" element={<MyActiveJobsPage />} />
<Route
exact
path="/my-pastdue-jobs"
element={<MyPastDueJobsPage />}
/>
<Route exact path="/my-offers" element={<MyOffersPage />} />
<Route exact path="/pend-interest" element={<MyWaitingJobsPage />} />
<Route
exact
path="/my-review-jobs"
element={<MyReviewDueJobsPage />}
/>
<Route exact path="/acc-family" element={<FamilyAccPage />} />
<Route exact path="/manage-family" element={<FamilyManagePage />} />
<Route exact path="/start-job" element={<StartJob />} />
<Route exact path="/yourpage" element={<YourPages />} />
<Route
exact
path="/manage-active-job"
element={<ManageActiveJobs />}
/>
<Route exact path="/blog-page" element={<BlogPage />} />
<Route
exact
path="/offer-interest"
element={<OffersInterestPage />}
/>
<Route
exact
path="/manage-offer"
element={<ManageInterestOfferPage />}
/>
<Route
exact
+6 -6
View File
@@ -12,17 +12,17 @@ export default function LoginLayout({ slogan, children }) {
const {countryMode} = useContext(DarkModeContext);
return (
<div className={`layout-wrapper login`}>
<div className={`w-full h-screen overflow-y-auto grid grid-cols-1 lg:grid-cols-2 bg-cover bg-center`}
style={{backgroundImage: `url(${ countryMode == 'NG' ? bgImgNig : bgImgCom})`}}
>
<div className={`h-screen overflow-y-auto bg-cover bg-center`}
style={{backgroundImage: `url(${ countryMode == 'NG' ? bgImgNig : bgImgCom})`}}
>
<div className={`w-full grid grid-cols-1 lg:grid-cols-2`}>
{/* <div
className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`}
style={{backgroundImage: `url(${bgImg})`}}
>
</div> */}
<div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
<div className="py-10 w-11/12 h-full flex flex-col justify-between items-center content-wrapper login shadow-md xl:bg-white dark:bg-dark-white rounded-[0.475rem]">
<div className="py-10 w-full sm:w-11/12 max-w-2xl shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
<div className="w-full flex justify-center items-center">
{children && children}
</div>
@@ -56,7 +56,7 @@ export default function LoginLayout({ slogan, children }) {
</div>
</div>
<p className="py-1 text-black text-[15px] px-2 font-medium flex items-center gap-1">
<span className="">&copy; {new Date().getFullYear()} -</span>
<span className="dark:text-white">&copy; {new Date().getFullYear()} -</span>
<Link to="/" className="text-[#009ef7] ml-1">
WrenchBoard
</Link>{" "}
@@ -99,7 +99,7 @@ export default function ForgotPassword() {
</Link>
</div>
<div className="flex place-content-center">
<div className="w-11/12 sm:max-w-[400px]">
<div className="w-10/12">
{msgSuccess == null ?
<>
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+1 -1
View File
@@ -264,7 +264,7 @@ export default function Login() {
</div>
{/* <div className="content-wrapper login shadow-md w-10/12 mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5"> */}
<div className="flex place-content-center">
<div className="w-11/12 sm:max-w-[530px]">
<div className="w-10/12">
{/* HIDES THIS IF USER SESSION HAS EXPIRED */}
{sessionExpired != "true" && (
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+1 -1
View File
@@ -158,7 +158,7 @@ export default function SignUp() {
</Link>
</div>
<div className="flex place-content-center">
<div className="w-11/12 sm:max-w-[530px]">
<div className="w-10/12">
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
Create Account
@@ -19,7 +19,7 @@ export default function UpdatePassword() {
<AuthLayout slogan="Welcome to myFit">
{updated === false ? (
<div className="flex place-content-center">
<div className="w-11/12 sm:max-w-[600px]">
<div className="w-10/12">
<div className="title-area relative flex flex-col justify-center items-center mb-7">
<h1 className="sm:text-5xl text-4xl font-bold leading-[74px] text-dark-gray dark:text-white">
Update Password
@@ -132,7 +132,7 @@ export default function VerifyLink() {
</Link>
</div>
<div className="flex place-content-center">
<div className="w-11/12 sm:max-w-[500px]">
<div className="w-10/12">
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
{linkSuccess
@@ -152,7 +152,7 @@ const VerifyPassword = () => {
{requestStatus.loading ? (
<LoadingSpinner color="sky-blue" size="16" height="h-300px" />
) : !requestStatus.loading && requestStatus.status ? (
<div className="w-11/12 sm:max-w-[500px]">
<div className="w-10/12">
{linkSuccess == null ? (
<>
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
@@ -18,7 +18,7 @@ export default function VerifyYou() {
</Link>
</div>
<div className="flex place-content-center">
<div className="w-11/12 sm:max-w-[500px]">
<div className="w-10/12">
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
Let's verify your email now
+6 -2
View File
@@ -1,5 +1,5 @@
import React from "react";
import ParentWaiting from "../MyPendingJobs/ParentWaiting";
import ParentWaiting from "../MyOffers/ParentWaiting";
import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
import FamilyActiveLSlde from "./FamilyActiveLSlde";
@@ -19,7 +19,11 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
/>
)}
{trending && trending.length > 0 && (
<FamilyActiveLSlde trending={trending} className="mb-10" image_server={familyOffers?.session_image_server} />
<FamilyActiveLSlde
trending={trending}
className="mb-10"
image_server={familyOffers?.session_image_server}
/>
)}
{/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
+163 -84
View File
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { useSelector } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import usersService from "../../services/UsersService";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import SelectBox from "../Helpers/SelectBox";
@@ -11,9 +11,13 @@ import EditJobPopOut from "../jobPopout/EditJobPopout";
import DeleteIcon from "../../assets/images/icon-delete.svg";
import EditIcon from "../../assets/images/icon-edit.svg";
import { tableReload } from "../AddJob/settings";
import CreditPopup from "../MyWallet/Popup/CreditPopup";
import JobListPopout from "../jobPopout/JobListPopout";
export default function MyJobTable({ MyJobList, reloadJobList, className }) {
const dispatch = useDispatch();
// Getting the categories
const currentJobCart = MyJobList?.data?.categories;
// DropDown Box
@@ -23,21 +27,44 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
Object.keys(filterCategories)[0]
);
let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
const [jobPopout, setJobPopout] = useState({ show: false, data: {} });
let [deleteJobPopout, setDeleteJobPopout] = useState({
const [deleteJobPopout, setDeleteJobPopout] = useState({
show: false,
data: {},
}); // STATE TO HOLD THE VALUE OF THE ITEM DETAILS TO DELETE AND DETERMINE WHEN TO SHOW
});
const [editJob, setEditJob] = useState({ show: false, data: {} });
const [myCountry, setCountries] = useState("");
const {
userDetails: { country },
} = useSelector((state) => state?.userDetails);
const userApi = useMemo(() => new usersService(), []);
const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
const [walletItem, setWalletItem] = useState(null);
/**
* Opens the credit popup.
* @param {Object} value - The value object.
*/
const openPopUp = (value) => {
setCreditPopup({
show: true,
data: { ...value },
});
};
/**
* Closes the credit popup and dispatches a table reload action.
*/
const closePopUp = () => {
setCreditPopup({ show: false, data: {} });
dispatch(tableReload({ type: "WALLETTABLE" }));
};
// Get Country Api
const getCountryList = useCallback(async () => {
try {
@@ -98,6 +125,121 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
}
};
const { MyJobListHeader, MyJobListTable } = myJobTableFeatures(
filterCategories,
selectedCategory,
handleSetCategory,
setDeleteJobPopout,
setEditJob,
setJobPopout,
MyJobList,
filteredCurrentJobList,
handlePagination,
currentPage,
currentJobList,
indexOfFirstItem,
indexOfLastItem
);
return (
<div
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
className || ""
}`}
>
<MyJobListHeader />
{MyJobList?.loading ? (
<LoadingSpinner size="16" color="sky-blue" />
) : (
<MyJobListTable />
)}
{/* Job List Popout */}
{jobPopout.show && (
<JobListPopout
details={jobPopout.data}
onClose={() => {
setJobPopout({ show: false, data: {} });
}}
setWalletItem={setWalletItem}
openWallet={openPopUp}
situation={jobPopout.show}
/>
)}
{/* End of Job List Popout */}
{/* Delete Job Popout */}
{deleteJobPopout.show && (
<DeleteJobPopout
details={deleteJobPopout.data}
onClose={() => {
setDeleteJobPopout({ show: false, data: {} });
}}
reloadJobList={reloadJobList}
situation={deleteJobPopout.show}
/>
)}
{/* END of Delete Job Popout */}
{editJob.show && (
<EditJobPopOut
details={editJob.data}
onClose={() => {
setEditJob({
show: false,
data: {},
});
}}
situation={editJob.show}
country={myCountry}
categories={currentJobCart}
/>
)}
{creditPopup.show && (
<CreditPopup
details={creditPopup.data}
walletItem={walletItem}
onClose={closePopUp}
situation={openPopUp}
/>
)}
</div>
);
}
function myJobTableFeatures(
filterCategories,
selectedCategory,
handleSetCategory,
setDeleteJobPopout,
setEditJob,
setJobPopout,
MyJobList,
filteredCurrentJobList,
handlePagination,
currentPage,
currentJobList,
indexOfFirstItem,
indexOfLastItem
) {
// List of job table features
const MyJobListHeader = () => (
<div className="header w-full flex justify-between items-center mb-5">
<div className="flex space-x-2 items-center">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
{filterCategories[selectedCategory]} Jobs
</h1>
</div>
<SelectBox
action={handleSetCategory}
datas={Object.values(filterCategories)}
className="Update-table-dropdown"
contentBodyClasses="w-auto min-w-max"
/>
</div>
);
const JobListItem = ({ value, index, image_server }) => {
let thePrice = PriceFormatter(
value?.price * 0.01,
@@ -187,7 +329,10 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
<button
type="button"
onClick={() => {
setJobPopout({ show: true, data: { thePrice, ...value } });
setJobPopout({
show: true,
data: { thePrice, ...value },
});
}}
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
@@ -198,32 +343,32 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
);
};
const NoJobsRow = ({ text }) => (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-2">{text}</td>
</tr>
);
const MyJobListTable = () => (
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[520px]">
<table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
<>
{MyJobList &&
MyJobList?.data?.result_list &&
MyJobList.data?.result_list.length > 0 ? (
filteredCurrentJobList?.length ? (
{MyJobList?.data?.result_list?.length > 0 ? (
filteredCurrentJobList.length > 0 ? (
filteredCurrentJobList.map((value, index) => (
<JobListItem
index={index}
key={index}
index={index}
value={value}
image_server={MyJobList?.data.session_image_server}
image_server={MyJobList.data.session_image_server}
/>
))
) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-2">No Jobs Available In This Category!</td>
</tr>
<NoJobsRow text="No Jobs Available In This Category!" />
)
) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-2">No Jobs Available!</td>
</tr>
<NoJobsRow text="No Jobs Available!" />
)}
</>
</tbody>
@@ -246,71 +391,5 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
{/* END OF PAGINATION BUTTON */}
</div>
);
return (
<div
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
className || ""
}`}
>
<div className="header w-full flex justify-between items-center mb-5">
<div className="flex space-x-2 items-center">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
{filterCategories[selectedCategory]} Jobs
</h1>
</div>
<SelectBox
action={handleSetCategory}
datas={Object.values(filterCategories)}
className="Update-table-dropdown"
contentBodyClasses="w-auto min-w-max"
/>
</div>
{MyJobList?.loading ? (
<LoadingSpinner size="16" color="sky-blue" />
) : (
<MyJobListTable />
)}
{/* Job List Popout */}
{jobPopout.show && (
<JobListPopout
details={jobPopout.data}
onClose={() => {
setJobPopout({ show: false, data: {} });
}}
situation={jobPopout.show}
/>
)}
{/* End of Job List Popout */}
{/* Delete Job Popout */}
{deleteJobPopout.show && (
<DeleteJobPopout
details={deleteJobPopout.data}
onClose={() => {
setDeleteJobPopout({ show: false, data: {} });
}}
reloadJobList={reloadJobList}
situation={deleteJobPopout.show}
/>
)}
{/* END of Delete Job Popout */}
{editJob.show && (
<EditJobPopOut
details={editJob.data}
onClose={() => {
setEditJob({
show: false,
data: {},
});
}}
situation={editJob.show}
country={myCountry}
categories={currentJobCart}
/>
)}
</div>
);
return { MyJobListHeader, MyJobListTable };
}
@@ -1,11 +1,10 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import Layout from "../Partials/Layout";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import CommonHead from "../UserHeader/CommonHead";
import MyPendingJobTable from "./MyPendingJobTable";
import LoadingSpinner from "../Spinners/LoadingSpinner";
export default function MyPendingJobs(props) {
export default function MyOffers(props) {
const [selectTab, setValue] = useState("today");
const filterHandler = (value) => {
setValue(value);
@@ -13,9 +12,7 @@ export default function MyPendingJobs(props) {
// console.log("AMEYE LOC1", props.MyJobList);
return (
<Layout>
<CommonHead
commonHeadData={props.commonHeadData}
/>
<CommonHead commonHeadData={props.commonHeadData} />
<div className="notification-page w-full mb-10">
<div className="notification-wrapper w-full">
{/* heading */}
@@ -25,7 +22,7 @@ export default function MyPendingJobs(props) {
<span
className={`${selectTab === "today" ? "block" : "hidden"}`}
>
Pending Job(s)
Pending Offers
</span>
</h1>
</div>
@@ -36,13 +33,17 @@ export default function MyPendingJobs(props) {
></div>
</div>
</div>
{props.MyJobList.loading ?
<div className="bg-white">
<LoadingSpinner size='16' color='sky-blue' height='min-h-[300px]' />
</div>
:
<MyPendingJobTable MyJobList={props.MyJobList.data} />
}
{props.MyJobList.loading ? (
<div className="bg-white">
<LoadingSpinner
size="16"
color="sky-blue"
height="min-h-[300px]"
/>
</div>
) : (
<MyPendingJobTable MyJobList={props.MyJobList.data} />
)}
</div>
</div>
</Layout>
@@ -79,7 +79,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
<ConfirmAddFund
confirmCredit={confirmCredit}
setConfirmCredit={setConfirmCredit}
walletItem={walletItem}
walletItem={walletItem || details}
onClose={onClose}
/>
) : confirmCredit?.show?.acceptConfirm?.state ? (
+7 -2
View File
@@ -192,8 +192,13 @@ export default function MobileSidebar({
{[
{ name: "List", path: "/myjobs", iconName: "job-list" },
{
name: "Pending",
path: "/my-pending-jobs",
name: "Offers",
path: "/my-offers",
iconName: "pending-job",
},
{
name: "Waiting",
path: "/pend-interest",
iconName: "pending-job",
},
{
+1 -1
View File
@@ -190,7 +190,7 @@ export default function RightSideBar({myJobList}) {
{/* name */}
<div>
<p className="text-thin-light-gray text-base font-medium">
<NavLink to="/my-review-jobs">Review Pending</NavLink>
<NavLink to="/my-review-jobs">Review</NavLink>
</p>
</div>
</div>
+9 -5
View File
@@ -8,14 +8,13 @@ import {
import DarkModeContext from "../Contexts/DarkModeContext";
import Icons from "../Helpers/Icons";
export default function Sidebar({
sidebar,
action,
logoutModalHandler,
myJobList,
}) {
const darkMode = useContext(DarkModeContext);
const darkMode = useContext(DarkModeContext);
let { userDetails } = useSelector((state) => state.userDetails);
//const jobLists = getJobList(); // pass from upper - we need in a lot of places
@@ -218,8 +217,13 @@ export default function Sidebar({
iconName: "job-list",
},
{
name: "Pending",
path: "/my-pending-jobs",
name: "Waiting",
path: "/pend-interest",
iconName: "pending-job",
},
{
name: "Offers",
path: "/my-offers",
iconName: "pending-job",
},
{
@@ -291,7 +295,7 @@ export default function Sidebar({
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' />
<Icons name="new-logout" />
</span>
</button>
)}
+102 -71
View File
@@ -6,7 +6,6 @@ import usersService from "../../services/UsersService";
import { tableReload } from "../../store/TableReloads";
import InputCom from "../Helpers/Inputs/InputCom/index";
import ModalCom from "../Helpers/ModalCom";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import Detail from "./popoutcomponent/Detail";
@@ -23,7 +22,13 @@ const validationSchema = Yup.object().shape({
group: Yup.string(),
});
function JobListPopout({ details, onClose, situation }) {
function JobListPopout({
details,
onClose,
situation,
openWallet,
setWalletItem,
}) {
const [selectedTab, setSelectedTab] = useState("public");
const tabs = ["public", "individual", "group"];
@@ -65,6 +70,12 @@ function JobListPopout({ details, onClose, situation }) {
const taskWalletSelector = getWalletDetail(details?.currency);
const openCreditPopup = () => {
onClose();
setWalletItem(taskWalletSelector);
openWallet();
};
// member listing
const memberList = useCallback(async () => {
setLoader({ member: true, jobFields: false });
@@ -138,6 +149,7 @@ function JobListPopout({ details, onClose, situation }) {
job_uid,
job_description: textArea,
};
let reqData;
// for family input
@@ -194,7 +206,7 @@ function JobListPopout({ details, onClose, situation }) {
setTimeout(() => {
setLoader({ jobFields: false });
onClose();
throw new Response(data);
// throw new Response(data);
}, 3000);
} catch (error) {
setRequestStatus({ message: "Unable to complete", status: false });
@@ -238,7 +250,50 @@ function JobListPopout({ details, onClose, situation }) {
});
}, []);
console.log("wallet >> ", walletDetails, details, taskWalletSelector);
const DetailsSection = ({ label, value }) => (
<div className="my-3 md:flex">
<Detail label={label} value={value} />
</div>
);
const DetailsComponent = () => {
const detailsArray = [
{ label: "Description", value: details.description },
{ label: "Price", value: details.thePrice },
{ label: "Timeline", value: `${details.timeline_days} day(s)` },
{ label: "Created", value: new Date(details?.created).toDateString() },
];
return (
<div className="px-4 pb-3 w-full md:border-r-2">
{/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
{/* INPUT SECTION */}
{detailsArray.map((detail, index) => (
<DetailsSection
key={index}
label={detail.label}
value={detail.value}
/>
))}
<div className="">
<label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
Delivery Detail
</label>
<textarea
className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
rows="7"
style={{ resize: "none" }}
value={textArea}
onChange={handleInputChange}
/>
<p>{errMsg.deliveryDetail}</p>
</div>
</div>
);
};
return (
<ModalCom action={onClose} situation={situation} className="">
<div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -272,47 +327,9 @@ function JobListPopout({ details, onClose, situation }) {
</svg>
</button>
</div>
<div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
<div className="px-4 pb-3 w-full md:border-r-2">
{/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
{/* INPUT SECTION */}
<div className="my-3 md:flex">
<Detail label="Description" value={details.description} />
</div>
<div className="my-3 md:flex">
<Detail label="Price" value={details.thePrice} />
</div>
<div className="my-3 md:flex">
<Detail
label="Timeline"
value={`${details.timeline_days} day(s)`}
/>
</div>
<div className="my-3 md:flex">
<Detail
label="Created"
value={new Date(details?.created).toDateString()}
/>
</div>
<div className="">
<label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
Delivery Detail
</label>
<textarea
className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
rows="7"
style={{ resize: "none" }}
value={textArea}
onChange={handleInputChange}
/>
<p>{errMsg.deliveryDetail}</p>
</div>
</div>
<DetailsComponent />
<>
{/* ACTION SECTION */}
@@ -324,26 +341,12 @@ function JobListPopout({ details, onClose, situation }) {
<div className="flex flex-col grow">
<div className="grid grid-cols-3 mt-4">
{tabs.map((item) => (
<button
// className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
selectedTab == item
? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
: "bg-white text-[#000]"
}`}
value={item}
name={item}
onClick={() => setSelectedTab(item)}
>
<div
className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
selectedTab == item
? "border-white bg-emerald-500"
: "border-red-50 dark:border-[#D85A5A] bg-white"
}`}
></div>
{item[0].toUpperCase() + item.slice(1)}
</button>
<TabButton
key={item}
item={item}
selectedTab={selectedTab}
setSelectedTab={setSelectedTab}
/>
))}
</div>
<div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
@@ -496,7 +499,10 @@ function JobListPopout({ details, onClose, situation }) {
</div>
</div>
) : (
<ZeroBalanceChecker {...taskWalletSelector} />
<ZeroBalanceChecker
{...taskWalletSelector}
openCreditPopup={openCreditPopup}
/>
)}
{/* END OF ACTION SECTION */}
@@ -653,18 +659,43 @@ const publicArray = [
{ duration: 28, name: "4 weeks" },
];
const ZeroBalanceChecker = ({ amount, code, country }) => {
let thePrice = PriceFormatter(amount * 0.01, code, country);
const ZeroBalanceChecker = ({ amount, code, country, openCreditPopup }) => {
return (
<div className="px-4 pb-3 w-full flex flex-col gap-5 items-center">
<h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">
Wallet Balance:{` ${code} ${amount}`}
Wallet Balance:{` ${code} ${(+amount * 0.01).toFixed(2)}`}
</h1>
<p className="font-semibold text-center text-red-500 text-lg">You do not have sufficient balance to assign this task</p>
<button className="btn-gradient w-48 h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center">
<p className="font-semibold text-center text-red-500 text-lg">
You do not have sufficient balance to assign this task
</p>
<button
onClick={openCreditPopup}
className="btn-gradient w-48 h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
>
Add Credit to Wallet
</button>
</div>
);
};
const TabButton = ({ item, selectedTab, setSelectedTab }) => (
<button
className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
selectedTab === item
? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
: "bg-white text-[#000]"
}`}
value={item}
name={item}
onClick={() => setSelectedTab(item)}
>
<div
className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
selectedTab === item
? "border-white bg-emerald-500"
: "border-red-50 dark:border-[#D85A5A] bg-white"
}`}
></div>
{item[0].toUpperCase() + item.slice(1)}
</button>
);
@@ -1,34 +1,34 @@
import React, { useContext, useState, useEffect } from "react";
import usersService from "../services/UsersService";
import MyPendingJobs from "../components/MyPendingJobs";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import MyOffers from "../components/MyOffers";
import usersService from "../services/UsersService";
export default function MyPendingJobsPage() {
export default function MyOffersPage() {
let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
let { pendingListTable } = useSelector((state) => state.tableReload);
const [MyJobList, setMyJobList] = useState({loading: true, data: []});
const [MyJobList, setMyJobList] = useState({ loading: true, data: [] });
const api = new usersService();
const getMyJobList = async () => {
setMyJobList({loading: true, data: []});
setMyJobList({ loading: true, data: [] });
try {
const res = await api.getMyPendingJobList();
setMyJobList({loading: false, data: res.data});
setMyJobList({ loading: false, data: res.data });
} catch (error) {
setMyJobList({loading: false, data: []});
setMyJobList({ loading: false, data: [] });
console.log("Error getting mode");
}
};
useEffect(() => {
getMyJobList();
getMyJobList();
}, [pendingListTable]);
// debugger;
return (
<>
<MyPendingJobs
<MyOffers
MyJobList={MyJobList}
commonHeadData={commonHeadBanner.result_list}
/>