Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ebube
|
a868713ae3 | ||
 ameye
|
e68603d836 | ||
|
victorAnumudu
|
67e227c554 | ||
|
ameye
|
f6fc004a06 | ||
|
ameye
|
1682a2221f | ||
|
Ebube
|
abef3bec01 | ||
|
Ebube
|
626835e1e0 |
@@ -9,13 +9,13 @@ export default function AvailableJobsCard({
|
||||
className,
|
||||
datas,
|
||||
hidden = false,
|
||||
contentDisplay
|
||||
contentDisplay,
|
||||
}) {
|
||||
//debugger;
|
||||
const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
|
||||
const [imageUrl, setImageUrl] = useState("");
|
||||
|
||||
let thePrice = PriceFormatter(
|
||||
let thePrice = PriceFormatter(
|
||||
datas?.price * 0.01,
|
||||
datas?.currency_code,
|
||||
datas?.currency
|
||||
@@ -27,121 +27,136 @@ export default function AvailableJobsCard({
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
{contentDisplay == 'grid' ?
|
||||
<div
|
||||
className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col justify-between w-full h-full">
|
||||
<Link to="/shop-details" className="mb-2.5">
|
||||
{contentDisplay == "grid" ? (
|
||||
<div
|
||||
className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
className="flex flex-col justify-between w-full h-full"
|
||||
>
|
||||
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
|
||||
{datas.title}
|
||||
</h1>
|
||||
</Link>
|
||||
|
||||
<div className="card-two-info flex justify-between items-center">
|
||||
<div className="owned-by flex space-x-2 items-center">
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-sm leading-3">Added</p>
|
||||
<p className="text-base text-dark-gray dark:text-white">
|
||||
{datas.offer_added}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[1px] bg-light-purple dark:bg-dark-light-purple h-7"></div>
|
||||
<div className="created-by flex space-x-2 items-center flex-row-reverse">
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-sm leading-3 text-right">
|
||||
Expires
|
||||
</p>
|
||||
<p className="text-base text-dark-gray dark:text-white text-right">
|
||||
{datas.expire}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="thumbnail-area w-full">
|
||||
<div
|
||||
className="w-full h-[236px] p-6 rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('${imageUrl}')`,
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-center">{datas.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="details-area">
|
||||
<div className="product-two-options flex justify-between mb-5 relative">
|
||||
{/* <div className="status">*/}
|
||||
{/* {datas.isActive && (*/}
|
||||
{/* <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
|
||||
{/* Active*/}
|
||||
{/*</span>*/}
|
||||
{/* )}*/}
|
||||
{/* </div>*/}
|
||||
|
||||
{/*<div className=" review flex space-x-2">*/}
|
||||
{/* <button*/}
|
||||
{/* onClick={favoriteHandler}*/}
|
||||
{/* type="button"*/}
|
||||
{/* className={`w-7 h-7 bg-white rounded-full flex justify-center items-center ${*/}
|
||||
{/* addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
|
||||
{/* }`}*/}
|
||||
{/* >*/}
|
||||
{/* <Icons name="star" />*/}
|
||||
{/* </button>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="card-two-info flex justify-between items-center">
|
||||
<div className="owned-by flex space-x-2 items-center">
|
||||
<div>
|
||||
<p className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white">
|
||||
{/* {thePrice} | {datas.timeline_days} day(s) */}
|
||||
{thePrice}
|
||||
<p className="text-thin-light-gray text-sm leading-3">
|
||||
Added
|
||||
</p>
|
||||
<p className="text-sm text-lighter-gray">
|
||||
( {datas.offer_code}) |
|
||||
<span className="italic ml-1">
|
||||
{datas.timeline_days} day(s)
|
||||
</span>
|
||||
<p className="text-base text-dark-gray dark:text-white">
|
||||
{datas.offer_added}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<div className="w-[1px] bg-light-purple dark:bg-dark-light-purple h-7"></div>
|
||||
<div className="created-by flex space-x-2 items-center flex-row-reverse">
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-sm leading-3 text-right">
|
||||
Expires
|
||||
</p>
|
||||
<p className="text-base text-dark-gray dark:text-white text-right">
|
||||
{datas.expire}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="thumbnail-area w-full">
|
||||
<div
|
||||
className="w-full h-[236px] p-6 rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('${imageUrl}')`,
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-center">{datas.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="details-area">
|
||||
<div className="product-two-options flex justify-between mb-5 relative">
|
||||
{/* <div className="status">*/}
|
||||
{/* {datas.isActive && (*/}
|
||||
{/* <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
|
||||
{/* Active*/}
|
||||
{/*</span>*/}
|
||||
{/* )}*/}
|
||||
{/* </div>*/}
|
||||
|
||||
{/*<div className=" review flex space-x-2">*/}
|
||||
{/* <button*/}
|
||||
{/* onClick={favoriteHandler}*/}
|
||||
{/* type="button"*/}
|
||||
{/* className={`w-7 h-7 bg-white rounded-full flex justify-center items-center ${*/}
|
||||
{/* addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
|
||||
{/* }`}*/}
|
||||
{/* >*/}
|
||||
{/* <Icons name="star" />*/}
|
||||
{/* </button>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div>
|
||||
<p className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white">
|
||||
{/* {thePrice} | {datas.timeline_days} day(s) */}
|
||||
{thePrice}
|
||||
</p>
|
||||
<p className="text-sm text-lighter-gray">
|
||||
( {datas.offer_code}) |
|
||||
<span className="italic ml-1">
|
||||
{datas.timeline_days} day(s)
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
|
||||
<div className="flex gap-5 items-center w-full">
|
||||
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
|
||||
<img src={dataImage2} alt="data" className="w-full h-full" />
|
||||
</div>
|
||||
<div className="flex flex-col flex-[0.9]">
|
||||
<Link to="/shop-details" className="">
|
||||
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
|
||||
) : (
|
||||
<div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
|
||||
<div className="flex gap-5 items-center w-full">
|
||||
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
|
||||
<img src={dataImage2} alt="data" className="w-full h-full" />
|
||||
</div>
|
||||
<div className="flex flex-col flex-[0.9]">
|
||||
<h1
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
|
||||
>
|
||||
{datas?.title}
|
||||
</h1>
|
||||
</Link>
|
||||
|
||||
<div className="my-2">
|
||||
<p className="text-dark-gray dark:text-white">{datas?.description}</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
className="my-2"
|
||||
>
|
||||
<p className="text-dark-gray dark:text-white">
|
||||
{datas?.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <div className="card-two-info flex gap-2 items-center">
|
||||
{/* <div className="card-two-info flex gap-2 items-center">
|
||||
<div className="owned-by flex space-x-2 items-center">
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-sm leading-3">Added</p>
|
||||
@@ -162,40 +177,37 @@ export default function AvailableJobsCard({
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="block sm:flex flex-wrap gap-4">
|
||||
<p className="text-sm text-thin-light-gray flex flext-start gap-1">
|
||||
Price: <span className="text-purple">{thePrice}</span>
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
Duration:{" "}
|
||||
<span className="text-purple italic">
|
||||
{" "}
|
||||
{datas?.timeline_days} day(s)
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
Code:{" "}
|
||||
<span className="text-purple">
|
||||
{" "}
|
||||
{datas?.offer_code}
|
||||
</span>
|
||||
</p>
|
||||
<div className="block sm:flex flex-wrap gap-4">
|
||||
<p className="text-sm text-thin-light-gray flex flext-start gap-1">
|
||||
Price: <span className="text-purple">{thePrice}</span>
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
Duration:{" "}
|
||||
<span className="text-purple italic">
|
||||
{" "}
|
||||
{datas?.timeline_days} day(s)
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
Code:{" "}
|
||||
<span className="text-purple"> {datas?.offer_code}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
{marketPopUp.show && (
|
||||
<MarketPopUp
|
||||
details={datas}
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
FamilyProfile,
|
||||
FamilyTasks,
|
||||
ProfileInfo,
|
||||
FamilyPending,
|
||||
} from "./Tabs";
|
||||
|
||||
export default function FamilyManageTabs({
|
||||
@@ -29,6 +30,7 @@ export default function FamilyManageTabs({
|
||||
familyDetails: { loading: false, data: null },
|
||||
familyTasks: { loading: false, data: null },
|
||||
familyWaitList: { loading: false, data: null },
|
||||
familyPending: { loading: false, data: null },
|
||||
});
|
||||
const [errMsg, setErrMsg] = useState("");
|
||||
const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
|
||||
@@ -62,25 +64,30 @@ export default function FamilyManageTabs({
|
||||
familyDetails: { loading: true },
|
||||
familyTasks: { loading: true },
|
||||
familyWaitList: { loading: true },
|
||||
familyPending: { loading: true },
|
||||
});
|
||||
|
||||
const { family_uid } = accountDetails;
|
||||
const reqData = { family_uid };
|
||||
|
||||
const [familyRes, tasksRes, familyWaitRes] = await Promise.all([
|
||||
apiCall.ManageFamily(reqData),
|
||||
apiCall.ManageTasks(reqData),
|
||||
apiCall.ManageFamilyWaitlist(),
|
||||
]);
|
||||
const [familyRes, tasksRes, familyWaitRes, familyPending] =
|
||||
await Promise.all([
|
||||
apiCall.ManageFamily(reqData),
|
||||
apiCall.ManageTasks(reqData),
|
||||
apiCall.ManageFamilyWaitlist(),
|
||||
apiCall.ManageFamilyPending(),
|
||||
]);
|
||||
|
||||
const familyData = familyRes.data;
|
||||
const tasksData = tasksRes.data;
|
||||
const familyWaitData = familyWaitRes.data;
|
||||
const familyPendingData = familyPending.data;
|
||||
|
||||
if (
|
||||
familyData?.internal_return < 0 ||
|
||||
tasksData?.internal_return < 0 ||
|
||||
familyWaitData?.internal_return < 0
|
||||
familyWaitData?.internal_return < 0 ||
|
||||
familyPendingData?.internal_return < 0
|
||||
)
|
||||
return;
|
||||
|
||||
@@ -88,12 +95,14 @@ export default function FamilyManageTabs({
|
||||
familyDetails: { loading: false, data: familyData },
|
||||
familyTasks: { loading: false, data: tasksData },
|
||||
familyWaitList: { loading: false, data: familyWaitData },
|
||||
familyPending: { loading: false, data: familyPendingData },
|
||||
});
|
||||
} catch (error) {
|
||||
setDetails({
|
||||
familyDetails: { loading: false },
|
||||
familyTasks: { loading: false },
|
||||
familyWaitList: { loading: false },
|
||||
familyPending: { loading: false },
|
||||
});
|
||||
setErrMsg("An error occurred");
|
||||
throw new Error(error);
|
||||
@@ -109,8 +118,9 @@ export default function FamilyManageTabs({
|
||||
const tabs = [
|
||||
{ id: 1, name: "Tasks" },
|
||||
{ id: 2, name: "Waiting" },
|
||||
{ id: 3, name: "Account" },
|
||||
{ id: 4, name: "Profile" },
|
||||
{ id: 3, name: "Pending" },
|
||||
{ id: 4, name: "Account" },
|
||||
{ id: 5, name: "Profile" },
|
||||
];
|
||||
|
||||
const [tab, setTab] = useState(tabs[0].name);
|
||||
@@ -131,6 +141,14 @@ export default function FamilyManageTabs({
|
||||
Waiting: (
|
||||
<FamilyWaitlist
|
||||
familyData={details.familyWaitList.data}
|
||||
accountDetails={accountDetails}
|
||||
loader={details.familyWaitList.loading}
|
||||
/>
|
||||
),
|
||||
Pending: (
|
||||
<FamilyPending
|
||||
familyData={details.familyPending.data}
|
||||
accountDetails={accountDetails}
|
||||
loader={details.familyWaitList.loading}
|
||||
/>
|
||||
),
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
import { useState } from "react";
|
||||
import { PaginatedList, handlePagingFunc } from "../../Pagination";
|
||||
import { PriceFormatter } from "../../Helpers/PriceFormatter";
|
||||
import dataImage2 from "../../../assets/images/data-table-user-2.png";
|
||||
import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
|
||||
|
||||
export default function FamilyPending({
|
||||
familyData,
|
||||
className,
|
||||
accountDetails,
|
||||
loader,
|
||||
}) {
|
||||
let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
|
||||
|
||||
let filteredFamilyData = familyData?.result_list?.filter(
|
||||
(data) => data?.family_uid === accountDetails?.family_uid
|
||||
);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
const indexOfFirstItem = Number(currentPage);
|
||||
const indexOfLastItem =
|
||||
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
const currentPendingTasks = filteredFamilyData?.slice(
|
||||
indexOfFirstItem,
|
||||
indexOfLastItem
|
||||
);
|
||||
|
||||
const handlePagination = (e) => {
|
||||
handlePagingFunc(e, setCurrentPage);
|
||||
};
|
||||
|
||||
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 || ""
|
||||
}`}
|
||||
>
|
||||
{filteredFamilyData && (
|
||||
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
|
||||
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
<tbody>
|
||||
{
|
||||
<>
|
||||
{currentPendingTasks.length > 0 ? (
|
||||
currentPendingTasks.map((value, index) => {
|
||||
let deliveryDate = value?.expire?.split(" ")[0];
|
||||
let thePrice = PriceFormatter(
|
||||
value?.price * 0.01,
|
||||
value?.currency_code,
|
||||
value?.currency
|
||||
);
|
||||
return (
|
||||
<tr
|
||||
key={index}
|
||||
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
|
||||
>
|
||||
<td className=" py-4">
|
||||
<div className="flex space-x-2 items-center w-full">
|
||||
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
|
||||
<img
|
||||
src={dataImage2}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col flex-[0.9]">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
|
||||
{value.title}
|
||||
</h1>
|
||||
<div>{value.description}</div>
|
||||
<span className="text-sm text-thin-light-gray flex items-start gap-1">
|
||||
Price:{" "}
|
||||
<span className="text-purple">
|
||||
{thePrice}
|
||||
</span>
|
||||
</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Duration:{" "}
|
||||
<span className="text-purple">
|
||||
{" "}
|
||||
{value.timeline_days} day(s)
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Expire:{" "}
|
||||
<span className="text-purple">
|
||||
{" "}
|
||||
{deliveryDate}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Sent to:{" "}
|
||||
<span className="text-purple">
|
||||
{" "}
|
||||
{value.job_to}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className="text-right py-4 px-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setJobPopout({ show: true, data: value });
|
||||
}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
<td className="p-2">No Pending Task!</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0}
|
||||
next={currentPage + itemsPerPage >= filteredFamilyData.length}
|
||||
data={filteredFamilyData}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Active Job Popout */}
|
||||
{jobPopout.show && (
|
||||
<PendingJobsPopout
|
||||
details={jobPopout.data}
|
||||
onClose={() => {
|
||||
setJobPopout({ show: false, data: {} });
|
||||
}}
|
||||
situation={jobPopout.show}
|
||||
/>
|
||||
)}
|
||||
{/* End of Active Job Popout */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +1,20 @@
|
||||
import { useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { handlePagingFunc, PaginatedList } from "../../Pagination";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import SuggestTask from "../../FamilyPopup/SuggestTask";
|
||||
|
||||
const FamilyWaitlist = ({ familyData, className, loader }) => {
|
||||
const navigate = useNavigate();
|
||||
const { pathname } = useLocation();
|
||||
const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
|
||||
const [popUp, setPopUp] = useState({ show: false, data: {} });
|
||||
|
||||
let filteredFamilyData = familyData?.result_list?.filter(
|
||||
(data) => data?.family_uid === accountDetails?.family_uid
|
||||
);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
const indexOfFirstItem = currentPage;
|
||||
const indexOfLastItem = currentPage + itemsPerPage;
|
||||
const currentTask = familyData?.result_list?.slice(
|
||||
const currentTask = filteredFamilyData?.slice(
|
||||
indexOfFirstItem,
|
||||
indexOfLastItem
|
||||
);
|
||||
@@ -30,7 +33,7 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{familyData && familyData.result_list && (
|
||||
{filteredFamilyData && (
|
||||
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
|
||||
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
<tbody>
|
||||
@@ -75,7 +78,9 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
|
||||
</td>
|
||||
<td className="text-right py-4 px-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setPopUp({ show: true, data: value })
|
||||
}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
View
|
||||
@@ -89,10 +94,8 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage === 0}
|
||||
next={
|
||||
currentPage + itemsPerPage >= familyData?.result_list.length
|
||||
}
|
||||
data={familyData?.result_list}
|
||||
next={currentPage + itemsPerPage >= filteredFamilyData?.length}
|
||||
data={filteredFamilyData}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
@@ -100,6 +103,15 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{popUp.show && (
|
||||
<SuggestTask
|
||||
details={popUp.data}
|
||||
onClose={() => {
|
||||
setPopUp({ show: false, data: {} });
|
||||
}}
|
||||
situation={popUp.show}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,6 +2,7 @@ import FamilyAccount from "./FamilyAccount";
|
||||
import FamilyProfile from "./FamilyProfile";
|
||||
import FamilyTasks from "./FamilyTasks";
|
||||
import FamilyWaitlist from "./FamilyWaitlist";
|
||||
import FamilyPending from "./FamilyPending";
|
||||
import ProfileInfo from "./ProfileInfo";
|
||||
|
||||
export {
|
||||
@@ -9,5 +10,6 @@ export {
|
||||
FamilyProfile,
|
||||
FamilyTasks,
|
||||
FamilyWaitlist,
|
||||
FamilyPending,
|
||||
ProfileInfo,
|
||||
};
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import ModalCom from "../Helpers/ModalCom";
|
||||
import { Form, Formik } from "formik";
|
||||
import InputCom from "../Helpers/Inputs/InputCom";
|
||||
@@ -6,6 +7,7 @@ import usersService from "../../services/UsersService";
|
||||
|
||||
const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
|
||||
const SuggestTask = ({ details, onClose, situation }) => {
|
||||
const { pathname, state } = useLocation();
|
||||
const [submitTask, setSubmitTask] = useState({
|
||||
loading: false,
|
||||
msg: "",
|
||||
@@ -16,16 +18,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
const initialValues = {
|
||||
title: details?.title || "",
|
||||
description: details?.description || "",
|
||||
banner: details?.banner
|
||||
banner: details?.banner,
|
||||
};
|
||||
|
||||
const apiCall = new usersService();
|
||||
|
||||
const handleSubmit = async (values) => {
|
||||
if(!values.title && !values.description) return;
|
||||
if (!values.title && !values.description) return;
|
||||
try {
|
||||
setSubmitTask({ loading: true });
|
||||
const reqData = { ...values, };
|
||||
const reqData = { ...values };
|
||||
const res = await apiCall.sendFamilySuggestedTasks(reqData);
|
||||
if (res.internal_return < 0) {
|
||||
setSubmitTask({ loading: false, msg: res.status, state: "bad" });
|
||||
@@ -40,12 +42,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
throw new Error("Error Occurred", error);
|
||||
}
|
||||
};
|
||||
|
||||
// console.log("state >-->>", state);
|
||||
return (
|
||||
<ModalCom action={onClose} situation={situation}>
|
||||
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
||||
<h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Suggest to Parent
|
||||
{pathname === "/manage-family"
|
||||
? `${state?.firstname}'s Suggested Task`
|
||||
: "Suggest to Parent"}
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
@@ -93,10 +99,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
{/* Title */}
|
||||
<div className="field w-full mb-[15px]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
fieldClass={
|
||||
pathname === "/manage-family" ? "px-2" : "px-6"
|
||||
}
|
||||
label="Title"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputBg={
|
||||
pathname === "/manage-family"
|
||||
? "bg-white"
|
||||
: "bg-slate-100"
|
||||
}
|
||||
inputClass="disabled:cursor-default"
|
||||
type="text"
|
||||
name="title"
|
||||
@@ -129,7 +141,11 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
<textarea
|
||||
id="description"
|
||||
rows="5"
|
||||
className={`input-field px-3 pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
|
||||
className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] ${
|
||||
pathname === "/manage-family"
|
||||
? "px-2"
|
||||
: "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]"
|
||||
}`}
|
||||
style={{ resize: "none" }}
|
||||
name="description"
|
||||
value={props.values.description}
|
||||
@@ -148,21 +164,21 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
>
|
||||
<span className="text-gradient"> Cancel</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={props.isSubmitting}
|
||||
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
||||
>
|
||||
{submitTask.loading
|
||||
? "Submitting Task"
|
||||
: submitTask.state == "success"
|
||||
? "Task Submitted"
|
||||
: submitTask.state == "bad"
|
||||
? "An Error Occurred"
|
||||
: "Send to Parents"}
|
||||
</button>
|
||||
{/* )} */}
|
||||
{pathname !== "/manage-family" && (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={props.isSubmitting}
|
||||
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
||||
>
|
||||
{submitTask.loading
|
||||
? "Submitting Task"
|
||||
: submitTask.state == "success"
|
||||
? "Task Submitted"
|
||||
: submitTask.state == "bad"
|
||||
? "An Error Occurred"
|
||||
: "Send to Parents"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
@@ -76,7 +76,7 @@ export default function InputCom({
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`input-wrapper border w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
|
||||
className={`input-wrapper w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-base ${inputClass ? inputClass : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] border"}`}
|
||||
>
|
||||
<input
|
||||
placeholder={placeholder}
|
||||
|
||||
@@ -93,8 +93,8 @@ export default function FamilyActiveLSlde({ className, trending }) {
|
||||
</div>
|
||||
</div>
|
||||
{/* trending products */}
|
||||
<div className="trending-products relative w-full rounded-2xl p-[10px] bg-alice-blue">
|
||||
<SliderCom selector={trendingSlider} settings={settings} className='bg-transparent opacity-100'>
|
||||
<div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
|
||||
<SliderCom selector={trendingSlider} settings={settings}>
|
||||
{trending &&
|
||||
trending.length > 0 &&
|
||||
trending.map((item) => (
|
||||
|
||||
@@ -14,8 +14,9 @@ export default function FamilyDash({familyOffers, MyActiveJobList}) {
|
||||
<div>
|
||||
<div className="home-page-wrapper">
|
||||
{/* <CommonHead commonHeadData={props.commonHeadData} /> */}
|
||||
{familyOffers && familyOffers.length > 0 &&
|
||||
<MyOffersFamilyTable familyOffers={familyOffers} className="mb-10" />
|
||||
|
||||
}
|
||||
{trending && trending.length > 0 &&
|
||||
<FamilyActiveLSlde trending={trending} className="mb-10" />
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import DataIteration from "../Helpers/DataIteration";
|
||||
import AvailableJobsCard from "../Cards/AvailableJobsCard";
|
||||
import ListView from '../../assets/images/list-view.png'
|
||||
import GridView from '../../assets/images/grid-view.svg'
|
||||
import ListView from "../../assets/images/list-view.png";
|
||||
import GridView from "../../assets/images/grid-view.svg";
|
||||
import SelectBox from "../Helpers/SelectBox";
|
||||
|
||||
export default function MainSection({
|
||||
@@ -17,7 +17,7 @@ export default function MainSection({
|
||||
);
|
||||
const [tab, setTab] = useState(Object.keys(marketCategories)[0]);
|
||||
|
||||
let [contentDisplay, setContentDisplay] = useState('grid') // STATE TO HOLD LIST VIEW STYLE
|
||||
let [contentDisplay, setContentDisplay] = useState("grid"); // STATE TO HOLD LIST VIEW STYLE
|
||||
|
||||
// Convert to array in order to map
|
||||
const mappedArray = Object.entries(marketCategories).map(([key, value]) => {
|
||||
@@ -29,8 +29,8 @@ export default function MainSection({
|
||||
setTab(value);
|
||||
};
|
||||
|
||||
// Handles the category selection on mobile view
|
||||
const handleSetCategory = (value) => {
|
||||
// Handles the category selection on mobile view
|
||||
const handleSetCategory = (value) => {
|
||||
for (let i in marketCategories) {
|
||||
if (marketCategories[i] == value) {
|
||||
setTab(i);
|
||||
@@ -57,7 +57,7 @@ export default function MainSection({
|
||||
<div className="hidden lg:flex md:space-x-8 space-x-2">
|
||||
{mappedArray.map(({ key, value }) => (
|
||||
<span
|
||||
key={key}
|
||||
key={key}
|
||||
onClick={() => tabHandler(key)}
|
||||
className={`md:text-[18px] text-md text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
|
||||
tab === key
|
||||
@@ -76,30 +76,43 @@ export default function MainSection({
|
||||
datas={Object.values(marketCategories)}
|
||||
className="Update-table-dropdown"
|
||||
contentBodyClasses="w-auto min-w-max"
|
||||
position='left'
|
||||
position="left"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* contentDisplay toggler */}
|
||||
<div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
|
||||
<img
|
||||
title={contentDisplay=='grid'? 'list view' : 'grid view'}
|
||||
onClick={()=>setContentDisplay((prev)=>prev=='grid'? 'list' : 'grid')}
|
||||
src={contentDisplay=='grid'? ListView : GridView}
|
||||
className="w-full h-full cursor-pointer" alt="view"
|
||||
/>
|
||||
<img
|
||||
title={contentDisplay == "grid" ? "list view" : "grid view"}
|
||||
onClick={() =>
|
||||
setContentDisplay((prev) => (prev == "grid" ? "list" : "grid"))
|
||||
}
|
||||
src={contentDisplay == "grid" ? ListView : GridView}
|
||||
className="w-full h-full cursor-pointer"
|
||||
alt="view"
|
||||
/>
|
||||
</div>
|
||||
{/* end of contentDisplay toggler */}
|
||||
</div>
|
||||
<div className="filter-navigate-content w-full min-h-screen">
|
||||
<div className={contentDisplay == 'grid' ? 'grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]' : 'w-full'}>
|
||||
<div
|
||||
className={
|
||||
contentDisplay == "grid"
|
||||
? "grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]"
|
||||
: "w-full"
|
||||
}
|
||||
>
|
||||
<DataIteration
|
||||
datas={products}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={products?.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<AvailableJobsCard contentDisplay={contentDisplay} key={datas.id} datas={datas} />
|
||||
<AvailableJobsCard
|
||||
contentDisplay={contentDisplay}
|
||||
key={datas.id}
|
||||
datas={datas}
|
||||
/>
|
||||
)}
|
||||
</DataIteration>
|
||||
</div>
|
||||
|
||||
@@ -104,7 +104,7 @@ export default function MyOffersFamilyTable({ className, familyOffers }) {
|
||||
</div>
|
||||
</div>
|
||||
{/* trending products */}
|
||||
<div className="trending-products relative w-full rounded-2xl p-[10px] bg-alice-blue">
|
||||
<div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
|
||||
<SliderCom selector={trendingSlider} settings={settings}>
|
||||
{familyOffers &&
|
||||
familyOffers.length > 0 &&
|
||||
|
||||
+2
-8
@@ -929,12 +929,6 @@ TODO: Responsive ===========================
|
||||
}
|
||||
|
||||
/* TO REMOVE SLIDER COMPONENT FROM CENTRALIZED */
|
||||
.trending-products .slick-slider .slick-track{
|
||||
.slider-left .slick-slider .slick-track{
|
||||
margin: 0;
|
||||
}
|
||||
/* .slick-slide, .slick-slide::after, .slick-slide::before{
|
||||
background-color: red;
|
||||
opacity: 1;
|
||||
padding: 20;
|
||||
box-shadow: none;
|
||||
} */
|
||||
}
|
||||
@@ -264,6 +264,18 @@ class usersService {
|
||||
return this.postAuxEnd("/familywaitingtasks", postData);
|
||||
}
|
||||
|
||||
ManageFamilyPending() {
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
page: 0,
|
||||
offset: 0,
|
||||
limit: 100,
|
||||
};
|
||||
return this.postAuxEnd("/jobmanageroffers", postData);
|
||||
}
|
||||
|
||||
// Task for the person doing the job
|
||||
getMyActiveTaskList() {
|
||||
var postData = {
|
||||
|
||||
Reference in New Issue
Block a user