victorAnumudu
211 lines
13 KiB
React
211 lines
13 KiB
React
import React, { useState } from "react";
|
|
import Layout from "../Partials/Layout";
|
|
import CommonHead from "../UserHeader/CommonHead";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
|
import PaginatedList from "../Pagination/PaginatedList";
|
|
|
|
import OthersInterestedTable from "./OthersInterestedTable";
|
|
|
|
export default function ManageInterestOffer(props) {
|
|
const navigate = useNavigate()
|
|
|
|
const messageList = {data: [1,2,3,4,5,6]} // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
|
|
const [currentPage, setCurrentPage] = useState(0);
|
|
const indexOfFirstItem = Number(currentPage);
|
|
const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
|
const currentMessageList = messageList?.data?.slice(indexOfFirstItem, indexOfLastItem);
|
|
|
|
const handlePagination = (e) => {
|
|
handlePagingFunc(e, setCurrentPage);
|
|
};
|
|
|
|
const [selectTab, setValue] = useState("today");
|
|
const filterHandler = (value) => {
|
|
setValue(value);
|
|
};
|
|
return (
|
|
<Layout>
|
|
<CommonHead
|
|
commonHeadData={props.commonHeadData}
|
|
/>
|
|
<div className="notification-page w-full mb-10">
|
|
<div className="notification-wrapper w-full">
|
|
{/* heading */}
|
|
<div className="sm:flex justify-between items-center mb-6">
|
|
<div className="mb-5 sm:mb-0">
|
|
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
|
<span className={`${selectTab === "today" ? "block" : "hidden"}`}>Manage Offer Interest</span>
|
|
</h1>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* manage offer section */}
|
|
<div className="w-full mb-8 p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow">
|
|
{/* <div className="w-full flex justify-start space-x-3 items-center">
|
|
<button
|
|
type="button"
|
|
className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
|
onClick={() =>
|
|
navigate(props.offerDetails.pathname, { replace: true })
|
|
}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="35"
|
|
height="35"
|
|
viewBox="0 0 24 24"
|
|
fill="skyblue"
|
|
>
|
|
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
|
|
</svg>
|
|
</button>
|
|
<h1 className="text-sm lg:text-xl font-bold text-sky-blue dark:text-white tracking-wide">
|
|
{props.offerDetails?.offer_code && props.offerDetails.offer_code}
|
|
</h1>
|
|
</div> */}
|
|
|
|
<div className="my-2 w-full md:grid gap-5 grid-cols-3">
|
|
{/* Detail section */}
|
|
<div className="w-full mb-5 lg:mb-0 col-span-2">
|
|
<div className="w-full flex justify-start space-x-3 items-center">
|
|
<button
|
|
type="button"
|
|
className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
|
onClick={() =>
|
|
navigate('/offer-interest', { replace: true })
|
|
}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="35"
|
|
height="35"
|
|
viewBox="0 0 24 24"
|
|
fill="skyblue"
|
|
>
|
|
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
|
|
</svg>
|
|
</button>
|
|
<h1 className="text-sm lg:text-xl font-bold text-sky-blue dark:text-white tracking-wide">
|
|
{props.offerDetails?.offer_code && props.offerDetails.offer_code}
|
|
</h1>
|
|
</div>
|
|
<h1 className="my-5 text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide border">
|
|
{props.offerDetails?.title}
|
|
</h1>
|
|
<div className="flex items-center">
|
|
<div className="w-3/4">
|
|
<div className="my-5 flex items-center gap-1">
|
|
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
|
|
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy name</span>
|
|
</div>
|
|
<div className="my-5 flex items-center gap-1">
|
|
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
|
|
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy Date</span>
|
|
</div>
|
|
<div className="my-5 flex items-center gap-1">
|
|
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
|
|
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
|
|
</div>
|
|
<div className="my-5 flex items-center gap-1">
|
|
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs active</span>
|
|
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
|
|
</div>
|
|
<div className="my-5 flex items-center gap-1">
|
|
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs uncompleted</span>
|
|
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
|
|
</div>
|
|
<div className="my-5 flex items-center gap-1">
|
|
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
|
|
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">% completion</span>
|
|
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-1/4 flex flex-col justify-center items-center gap-10">
|
|
<button
|
|
type="button"
|
|
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
>
|
|
<span className="text-white">Accept</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
|
|
>
|
|
<span className="text-gradient">Reject</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* END OF Detail section */}
|
|
|
|
{/* message section */}
|
|
<div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
|
|
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">Message to dummy name</p>
|
|
<div className="my-4 w-full">
|
|
<textarea rows={5} className="p-4 text-base font-bold text-dark-gray dark:text-white tracking-wide w-full resize-none rounded-md outline-none" />
|
|
<div className="w-full flex justify-end items-center">
|
|
<button
|
|
type="button"
|
|
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
>
|
|
<span className="text-white">Send</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* message list */}
|
|
{currentMessageList.map((item, index)=>(
|
|
<div key={index} className="my-3 w-full">
|
|
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
|
|
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
|
|
</div>
|
|
))}
|
|
|
|
{/* PAGINATION BUTTON */}
|
|
<PaginatedList
|
|
onClick={handlePagination}
|
|
prev={currentPage == 0 ? true : false}
|
|
next={
|
|
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
|
messageList?.data?.length
|
|
? true
|
|
: false
|
|
}
|
|
data={messageList?.data}
|
|
start={indexOfFirstItem}
|
|
stop={indexOfLastItem}
|
|
/>
|
|
{/* END OF PAGINATION BUTTON */}
|
|
</div>
|
|
{/* END of message section */}
|
|
</div>
|
|
</div>
|
|
{/* END OF manage offer section */}
|
|
</div>
|
|
|
|
<div className="w-full overflow-x-auto">
|
|
<div className="notification-page w-full mb-10">
|
|
<div className="notification-wrapper w-full">
|
|
{/* heading */}
|
|
<div className="sm:flex justify-between items-center mb-6">
|
|
<div className="mb-5 sm:mb-0">
|
|
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
|
<span className={`${selectTab === "today" ? "block" : "hidden"}`}>Others interested in this Task</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<OthersInterestedTable othersInterestedList={props.othersInterestedList} />
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|