Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
22bfcbf0c6 | ||
 ameye
|
7975bd3d11 |
@@ -44,6 +44,7 @@ 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'
|
||||
|
||||
export default function Routers() {
|
||||
return (
|
||||
@@ -99,6 +100,7 @@ export default function Routers() {
|
||||
<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
|
||||
|
||||
@@ -0,0 +1,210 @@
|
||||
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(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>
|
||||
<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 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>
|
||||
);
|
||||
}
|
||||
@@ -87,7 +87,7 @@ export default function OffersInterestTable({offerInterestList, className}) {
|
||||
<td className="text-right py-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/manage-active-job", {
|
||||
navigate("/manage-offer", {
|
||||
state: { ...item, pathname },
|
||||
});
|
||||
}}
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
import React, { useState } from "react";
|
||||
import dataImage1 from "../../assets/images/data-table-user-1.png";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import { useNavigate, useLocation, Link } from "react-router-dom";
|
||||
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
||||
import PaginatedList from "../Pagination/PaginatedList";
|
||||
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
|
||||
import familyImage from '../../assets/images/no-family-side.png'
|
||||
|
||||
export default function OthersInterestTable({othersInterestedList, className}) {
|
||||
|
||||
const navigate = useNavigate();
|
||||
let { pathname } = useLocation();
|
||||
|
||||
const filterCategories = ["All Categories", "Explore", "Featured"];
|
||||
const [selectedCategory, setCategory] = useState(filterCategories[0]);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const indexOfFirstItem = Number(currentPage);
|
||||
const indexOfLastItem =
|
||||
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
const currentOthersInterestedList = othersInterestedList?.data?.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
const handlePagination = (e) => {
|
||||
handlePagingFunc(e, setCurrentPage);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`update-table w-full p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
|
||||
{othersInterestedList?.loading ? (
|
||||
<div className="min-h-[520px] w-full flex flex-col justify-center items-center">
|
||||
<LoadingSpinner size="16" color="sky-blue" />
|
||||
</div>
|
||||
)
|
||||
:
|
||||
othersInterestedList?.data?.length > 0 ?
|
||||
(
|
||||
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
|
||||
<thead className="sticky top-0">
|
||||
{/* <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29] default-border-bottom ">
|
||||
<th className="py-4">Name</th>
|
||||
<th className="py-4 text-center">Last Login</th>
|
||||
<th className="py-4 text-center">No of Tasks</th>
|
||||
<th className="py-4 text-right"></th>
|
||||
</tr> */}
|
||||
</thead>
|
||||
<tbody className="h-full">
|
||||
{currentOthersInterestedList?.map((item, idx) => {
|
||||
return (
|
||||
<tr key={item?.offer_uid} 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">
|
||||
<div className="min-w-[60px] min-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">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
|
||||
{item?.title}
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">{item?.expire}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<div className="flex space-x-1 items-center justify-center">
|
||||
<p className="font-bold text-x text-dark-gray dark:text-white">{item?.client_name}</p>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<div className="flex space-x-1 items-center justify-center">
|
||||
{/* <span className="font-bold text-x text-dark-gray dark:text-white">{formatNumber(item?.price * 0.01)}</span> */}
|
||||
<span className="font-bold text-x text-dark-gray dark:text-white">{PriceFormatter(item?.price * 0.01,item?.currency_code,item?.currency)}</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className="text-right py-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/manage-offer", {
|
||||
state: { ...item, pathname },
|
||||
});
|
||||
}}
|
||||
type="button"
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
:
|
||||
(
|
||||
<div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
|
||||
<div className="p-2 w-full md:w-1/2">
|
||||
<p className="mb-4 p-3 md:p-16">No Offer list avaliable.</p>
|
||||
<button
|
||||
onClick={()=>{navigate('/market', {replace: true})}}
|
||||
type="button"
|
||||
className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
|
||||
>
|
||||
Goto Market
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-2 w-full md:w-1/2">
|
||||
<img className='w-full' src={familyImage && familyImage} alt="Add Family" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
othersInterestedList?.data?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={othersInterestedList?.data}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React, { useContext,useState, useEffect } from "react";
|
||||
import usersService from "../services/UsersService";
|
||||
import ManageInterestOffer from "../components/OffersInterest/ManageInterestOffer";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
export default function MyReviewDueJobsPage() {
|
||||
const {state} = useLocation()
|
||||
let navigate = useNavigate()
|
||||
|
||||
let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
|
||||
|
||||
const apiCall = new usersService();
|
||||
const [othersInterestedList, setOthersInterestedList] = useState({loading: true, data: []})
|
||||
|
||||
useEffect(() => {
|
||||
if(!state){
|
||||
navigate('/', {replace: true})
|
||||
return
|
||||
}
|
||||
apiCall.offersInterestList().then(res => {
|
||||
setOthersInterestedList({loading: false, data: res.data.result_list})
|
||||
}).catch(err => {
|
||||
setOthersInterestedList({loading: false, data: []})
|
||||
console.log('Error: ', err)
|
||||
})
|
||||
}, []);
|
||||
|
||||
// debugger;
|
||||
return (
|
||||
<>
|
||||
<ManageInterestOffer
|
||||
othersInterestedList={othersInterestedList}
|
||||
commonHeadData={commonHeadBanner.result_list}
|
||||
offerDetails={state}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user