Data added
This commit is contained in:
@@ -45,123 +45,126 @@ export default function MyJobTable({ className, ActiveJobList }) {
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
{/* Adding this dark overlay in order to see the texts properly */}
|
||||
{!ActiveJobList?.data.length && (
|
||||
<div class="absolute inset-0 bg-black opacity-30"></div>
|
||||
)}
|
||||
{ActiveJobList.loading ? (
|
||||
{ActiveJobList?.data.length > 0 && ActiveJobList.loading && (
|
||||
<div className="w-full h-[520px] flex items-center justify-center">
|
||||
<LoadingSpinner size="16" color="sky-blue" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative w-full sm:rounded-lg">
|
||||
<div className="h-auto w-full">
|
||||
{ActiveJobList?.data?.length > 0 ? (
|
||||
currentTask?.map((task, idx) => (
|
||||
<div
|
||||
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
|
||||
key={idx}
|
||||
>
|
||||
<div className="py-4 max-w-[80%]">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-full min-w-[60px] max-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
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">
|
||||
{task?.title}
|
||||
</h1>
|
||||
<span className="text-base text-gray-600">
|
||||
{task?.description}
|
||||
)}
|
||||
|
||||
<div className="relative w-full sm:rounded-lg">
|
||||
<div className="h-auto w-full">
|
||||
{ActiveJobList?.data?.length > 0 &&
|
||||
currentTask?.map((task, idx) => (
|
||||
<div
|
||||
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
|
||||
key={idx}
|
||||
>
|
||||
<div className="py-4 max-w-[80%]">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-full min-w-[60px] max-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
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">
|
||||
{task?.title}
|
||||
</h1>
|
||||
<span className="text-base text-gray-600">
|
||||
{task?.description}
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Price:
|
||||
<span className="text-purple ml-1">
|
||||
{Number(task?.price) * 0.01}
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Price:
|
||||
<span className="text-purple ml-1">
|
||||
{Number(task?.price) * 0.01}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Duration:
|
||||
<span className="text-purple ml-1">
|
||||
{Number(task?.timeline_days) === 1
|
||||
? `${task?.timeline_days} day`
|
||||
: `${task?.timeline_days} day(s)`}
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Duration:
|
||||
<span className="text-purple ml-1">
|
||||
{Number(task?.timeline_days) === 1
|
||||
? `${task?.timeline_days} day`
|
||||
: `${task?.timeline_days} day(s)`}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Due Date:
|
||||
<span className="text-purple ml-1">
|
||||
{task?.delivery_date}
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Due Date:
|
||||
<span className="text-purple ml-1">
|
||||
{task?.delivery_date}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Confirmation:
|
||||
<span className="text-purple ml-1">
|
||||
{task?.contract}
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Confirmation:
|
||||
<span className="text-purple ml-1">
|
||||
{task?.contract}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center items-center py-4 px-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigate("/manage-active-job", {
|
||||
state: { ...task, pathname },
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : ActiveJobList.status ? (
|
||||
<div className="flex flex-col items-center justify-center gap-9 my-5">
|
||||
<div className="p-2 font-bold text-3xl text-white whitespace-nowrap">
|
||||
You currently have "0" task
|
||||
</div>
|
||||
<button
|
||||
className="w-[115px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
onClick={navigateMarket}
|
||||
>
|
||||
{btnLoader ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
"Find Task"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
<p className="p-2">Error Occurred! Unable to display Tasks!</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
ActiveJobList?.data?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={ActiveJobList?.data}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
<div className="flex justify-center items-center py-4 px-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigate("/manage-active-job", {
|
||||
state: { ...task, pathname },
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{ActiveJobList?.data?.length <= 0 && (
|
||||
<div className="flex flex-col items-center justify-center gap-9 my-5">
|
||||
<div className="p-2 font-bold text-3xl text-white whitespace-nowrap">
|
||||
You currently have "0" task
|
||||
</div>
|
||||
<button
|
||||
className="w-[115px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
onClick={navigateMarket}
|
||||
>
|
||||
{btnLoader ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
"Find Task"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{ActiveJobList?.internal_return < 0 && (
|
||||
<div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
<p className="p-2">Error Occurred! Unable to display Tasks!</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
ActiveJobList?.data?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={ActiveJobList?.data}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user