Adding a price formatter
This commit was merged in pull request #170.
This commit is contained in:
@@ -4,6 +4,7 @@ import PaginatedList from "../Pagination/PaginatedList";
|
||||
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
|
||||
const noTasksBg = require("../../assets/images/no-task-background.jpg");
|
||||
|
||||
@@ -58,73 +59,79 @@ export default function MyJobTable({ className, ActiveJobList }) {
|
||||
<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}
|
||||
currentTask?.map((task, idx) => {
|
||||
let thePrice = PriceFormatter(
|
||||
task?.price * 0.01,
|
||||
task?.currency_code,
|
||||
task?.currency
|
||||
);
|
||||
return (
|
||||
<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>
|
||||
|
||||
<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 className="text-sm text-thin-light-gray">
|
||||
Price:
|
||||
<span className="text-purple ml-1">{thePrice}</span>
|
||||
</span>
|
||||
</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>
|
||||
<div className="flex gap-4 items-center">
|
||||
<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>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Confirmation:
|
||||
<span className="text-purple ml-1">
|
||||
{task?.contract}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 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>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
|
||||
{ActiveJobList?.data?.length <= 0 && (
|
||||
<div className="flex flex-col items-center justify-center gap-9 my-5">
|
||||
|
||||
Reference in New Issue
Block a user