From 22bfcbf0c6299ce6312a8515248f2592e034f77f Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Wed, 14 Jun 2023 20:54:14 +0100
Subject: [PATCH] interest processing page added

---
 src/Routers.jsx                               |   2 +
 .../OffersInterest/ManageInterestOffer.jsx    | 210 ++++++++++++++++++
 .../OffersInterest/OffersInterestTable.jsx    |   2 +-
 .../OffersInterest/OthersInterestedTable.jsx  | 144 ++++++++++++
 src/views/ManageInterestOfferPage.jsx         |  39 ++++
 5 files changed, 396 insertions(+), 1 deletion(-)
 create mode 100644 src/components/OffersInterest/ManageInterestOffer.jsx
 create mode 100644 src/components/OffersInterest/OthersInterestedTable.jsx
 create mode 100644 src/views/ManageInterestOfferPage.jsx

diff --git a/src/Routers.jsx b/src/Routers.jsx
index 460a8b1..7240e91 100644
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -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
diff --git a/src/components/OffersInterest/ManageInterestOffer.jsx b/src/components/OffersInterest/ManageInterestOffer.jsx
new file mode 100644
index 0000000..5e3c136
--- /dev/null
+++ b/src/components/OffersInterest/ManageInterestOffer.jsx
@@ -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>
+    );
+}
diff --git a/src/components/OffersInterest/OffersInterestTable.jsx b/src/components/OffersInterest/OffersInterestTable.jsx
index c34daa6..7e4951b 100644
--- a/src/components/OffersInterest/OffersInterestTable.jsx
+++ b/src/components/OffersInterest/OffersInterestTable.jsx
@@ -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 },
                                                 });
                                             }}
diff --git a/src/components/OffersInterest/OthersInterestedTable.jsx b/src/components/OffersInterest/OthersInterestedTable.jsx
new file mode 100644
index 0000000..8655fa3
--- /dev/null
+++ b/src/components/OffersInterest/OthersInterestedTable.jsx
@@ -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>
+    );
+}
\ No newline at end of file
diff --git a/src/views/ManageInterestOfferPage.jsx b/src/views/ManageInterestOfferPage.jsx
new file mode 100644
index 0000000..98df622
--- /dev/null
+++ b/src/views/ManageInterestOfferPage.jsx
@@ -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}
+            />
+        </>
+    );
+}