added job action components

src/Routers.jsx

@@ -41,6 +41,7 @@ import FamilyManagePage from "./views/FamilyManagePage";
 import MyCouponPage from "./views/MyCouponPage";
 import AuthRedirect from "./views/AuthRedirect";
 import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
+import BlogPage from "./views/BlogPage";
 
 export default function Routers() {
   return (
@@ -93,6 +94,9 @@ export default function Routers() {
           <Route exact path="/manage-family"  element={<FamilyManagePage />} />
           <Route exact path="/start-job"  element={<StartJob />} />
           <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
+          <Route exact path="/blog-page"  element={<BlogPage />} />
+
+
           <Route
             exact
             path="/my-collection/collection-item"

src/components/Blogs/index.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+
+export default function BlogItem(props) {
+    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"}`}
+                >
+                  Title of this Blog Items
+                </span>
+                            </h1>
+                        </div>
+                        <div className="slider-btns flex space-x-4">
+
+                        </div>
+                    </div>
+                   <div>
+                       Blog Items Details
+                   </div>
+                </div>
+            </div>
+        </Layout>
+    );
+}

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -11,6 +11,13 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
     data: {},
     state: undefined,
   });
+  const [manageInt, setManageInt] = useState({
+    loading: false,
+    data: {},
+    state: undefined,
+    msg: "",
+  });
+
   const [textValue, setTextValue] = useState("");
 
   const handleInputChange = ({ target: { value } }) => {
@@ -21,21 +28,21 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
   const marketCalls = useCallback(
     async (e) => {
-      let nameOfCall = e?.target?.name;
-      let { offer_code } = details;
-      let reqData = { offer_code };
-
       try {
+        const nameOfCall = e?.target?.name;
+        const { offer_code } = details;
+        const reqData = { offer_code };
+
         if (nameOfCall === "market-message") {
-          // To manage the manage msg data
           setMarketMsg({ loading: true });
-          reqData = { yourmessage: textValue, ...reqData };
+          if (!textValue) return;
+
+          reqData.yourmessage = textValue;
 
           const marketMessage = await apiCall.MarketMessage(reqData);
-          const marketMessageRes = await marketMessage?.data;
+          const marketMessageRes = marketMessage?.data;
 
           if (marketMessageRes?.internal_return < 0) {
-            setMarketMsg({ loading: false });
             toast.warn("Something wrong happened", {
               autoClose: 2000,
               hideProgressBar: true,
@@ -48,73 +55,127 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             autoClose: 2500,
             hideProgressBar: true,
           });
-          // To manage the manage msg data
+
           setMarketMsg({ data: marketMessageRes, state: true });
+          setTimeout(() => onClose(), 2000);
+        } else {
+          setManageInt({ loading: true });
+
+          const manageInt = await apiCall.MarketInterest(reqData);
+          const manageIntRes = manageInt?.data;
+
+          if (manageIntRes?.internal_return < 0) {
+            setManageInt({
+              loading: false,
+              msg: `Error - ${manageIntRes?.status}`,
+              data: manageIntRes,
+              state: false,
+            });
+          } else {
+            setManageInt({
+              loading: false,
+              msg: manageIntRes?.status,
+              data: manageIntRes,
+              state: true,
+            });
+          }
+
+          setTimeout(() => setManageInt({ msg: "" }), 3000);
+
+          return;
         }
       } catch (error) {
         throw new Error(error);
       } finally {
         setTimeout(() => {
-          onClose();
           setTextValue("");
           setMarketMsg({ loading: false });
         }, 2000);
       }
     },
-    [apiCall, details, onClose, setMarketMsg, textValue]
+    [apiCall, details, onClose, textValue]
   );
 
+  console.log('Checking my mangeInt',manageInt)
+
   // let addedIntDate = marketInt?.added?.split(" ")[0];
   let expireIntDate = marketInt?.expire?.split(" ")[0];
 
   return (
-    // className="job-popup"
-    <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-        <div className="logout-modal-header w-full flex items-center justify-end lg:p-6 px-[30px] py-[23px]">
+    <ModalCom action={onClose} situation={situation} className="edit-popup">
+      <div className="logout-modal-wrapper md:w-[750px] md:h-[700px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px]">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+            {details.offer_code}
+          </h1>
           <CloseIcon onClose={onClose} />
         </div>
 
-        <div className="md:flex bg-white rounded-lg shadow-lg">
+        <div className="md:flex bg-white rounded-lg">
           <div className="p-4 w-full md:w-3/4 md:border-r-1">
-            <div className="flex items-center gap-4 md:text-[16px] text-md tracking-wide text-dark-gray dark:text-white">
-              <p className="font-semibold text-slate-900">
-                {details.offer_code}
-              </p>
-              <p>
-                <span className="text-slate-900">{`Timeline: ${details.timeline_days} day(s) -- `}</span>
-                <span className="font-semibold text-slate-900">{`Budget: ${details.price} naira`}</span>
-              </p>
-            </div>
+            <div className="min-h-[290px]">
+              <h2 className="font-semibold text-slate-900 dark:text-black tracking-wide">
+                {details?.title}
+              </h2>
 
-            {/* INPUT SECTION */}
-            {[
-              { name: "Title", content: details.title },
-              { name: "Description", content: details.description },
-              {
-                name: "Detail",
-                content: details.job_description,
-                danger: true,
-              },
-            ].map(({ name, content, danger }, idx) => (
-              <div className="my-3 md:flex" key={idx}>
-                <label className="w-full md:w-1/4 text-slate-900 tracking-wide font-semibold">
-                  {name}
-                </label>
-                {danger ? (
-                  <p
-                    className={`w-full md:w-3/4 text-slate-900 `}
-                    dangerouslySetInnerHTML={{
-                      __html: danger && content?.replace(/"/g, ""),
-                    }}
-                  />
-                ) : (
-                  <p className={`w-full md:w-3/4 text-slate-900 `}>
-                    {content !== "Detail" ? content : null}
-                  </p>
-                )}
-              </div>
-            ))}
+              {/* INPUT SECTION */}
+              {[
+                {
+                  name: "Description",
+                  content: details.description,
+                },
+                {
+                  name: "",
+                  content: {
+                    text: `Timeline: ${details.timeline_days} day(s) -- `,
+                    bold: `Budget: ${details.price} naira`,
+                  },
+                },
+                {
+                  name: "Delivery Detail",
+                  content: details.job_description,
+                  danger: true,
+                },
+              ].map(({ name, content, danger }, idx) => (
+                <div className={`my-3 md:flex items-center`} key={idx}>
+                  <label className="w-full md:w-1/4 text-slate-900 tracking-wide font-semibold">
+                    {name}
+                  </label>
+                  <div
+                    className={`w-full md:w-3/4 text-slate-900 market-pop ${
+                      name !== "Delivery Detail"
+                        ? " h-full max-h-28 flex items-center"
+                        : " overflow-y-auto max-h-[100px]"
+                    }`}
+                  >
+                    {danger ? (
+                      <p
+                        className={``}
+                        dangerouslySetInnerHTML={{
+                          __html: danger && content?.replace(/"/g, ""),
+                        }}
+                      />
+                    ) : (
+                      <p className={`w-full md:w-3/4 text-slate-900`}>
+                        {name !== "Delivery Detail" ? (
+                          <>
+                            {typeof content !== "object" ? content : null}
+                            {typeof content === "object" && (
+                              <span className="flex items-center gap-2">
+                                {content?.text}
+                                <strong>{content?.bold}</strong>
+                              </span>
+                            )}
+                          </>
+                        ) : (
+                          ""
+                        )}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
             <hr />
             <div className="my-3 w-full flex flex-col gap-3">
               <div className="w-full">
@@ -146,26 +207,49 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             </div>
           </div>
 
-          <div className="w-full md:w-1/4 h-full">
-            <div className="w-[90%] mx-auto bg-[#f1f8ff] p-4 rounded-md">
-              <p className="w-full text-slate-900 tracking-wide my-1">
-                Interested in the task?
-              </p>
+          <div className="w-full md:w-1/4 h-full ">
+            <div className="w-[90%] mx-auto bg-[#f1f8ff] p-4 rounded-md md:min-h-[550px] flex flex-col justify-between">
               <div className="w-full flex flex-col justify-center py-4 gap-2">
+                <p className="w-full text-slate-900 tracking-wide my-1">
+                  Interested in the task?
+                </p>
                 <hr />
-                <button className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex flex-col items-center justify-center">
+                <button
+                  className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex flex-col items-center justify-center"
+                  name="market-interest"
+                  onClick={marketCalls}
+                >
                   {" "}
                   <span>Send</span>
                   <span>Interest</span>
                   <span>Request</span>
                 </button>
-                <p>Error - {marketInt?.status}</p>
-                <p className="mt-2 flex items-center">
+                <>
+                  {manageInt.loading ? (
+                    <p className="text-sm italic">please wait...</p>
+                  ) : (
+                    <>
+                      {manageInt?.msg !== "" && (
+                        <p
+                          className={`text-sm italic ${
+                            manageInt?.state ? "text-green-500" : "text-red-500"
+                          }`}
+                        >
+                          {manageInt?.msg}
+                        </p>
+                      )}
+                    </>
+                  )}
+                </>
+              </div>
+
+              <div className="">
+                <p className="flex items-center tracking-wide">
                   Interest: <b className="ml-1">{marketInt?.public_view}</b>
                 </p>
                 <hr />
+                <p className="my-1">Expire: {expireIntDate}</p>
               </div>
-              <p className="my-10">Expire: {expireIntDate}</p>
             </div>
           </div>
           {/* END OF ACTION SECTION */}

src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function CurrentJobAction() {
+  return (
+    <div>CurrentJobAction</div>
+  )
+}
+
+export default CurrentJobAction

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function CurrentTaskAction() {
+  return (
+    <div>CurrentTaskAction</div>
+  )
+}
+
+export default CurrentTaskAction

src/components/MyActiveJobs/JobActions/PassDueJobAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function PassDueJobAction() {
+  return (
+    <div>PassDueJobAction</div>
+  )
+}
+
+export default PassDueJobAction

src/components/MyActiveJobs/JobActions/PassDueTaskAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function PassDueTaskAction() {
+  return (
+    <div>PassDueTaskAction</div>
+  )
+}
+
+export default PassDueTaskAction

src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function ReviewJobAction() {
+  return (
+    <div>ReviewJobAction</div>
+  )
+}
+
+export default ReviewJobAction

src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function ReviewTaskAction() {
+  return (
+    <div>ReviewTaskAction</div>
+  )
+}
+
+export default ReviewTaskAction

src/index.css

@@ -786,13 +786,15 @@ TODO: Responsive ===========================
 }
 
 /* Update table scrollbar */
-.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track{
+.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track,
+.market-pop::-webkit-scrollbar-track{
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
   background-color: transparent;
   border-radius: 10px;
 }
 
-.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar {
+.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar,
+.market-pop::-webkit-scrollbar {
   width: 10px;
   background-color: transparent;
 }
@@ -805,6 +807,15 @@ TODO: Responsive ===========================
   background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
 }
 
+.market-pop::-webkit-scrollbar-thumb {
+  border-radius: 100px;
+  
+  /* background-color: #fafafa; */
+  /* background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); */
+  background: rgb(236,237,241);
+  background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%);
+}
+
 .input-curve.lg{
   border-radius: 35px !important;
 }

src/views/BlogPage.jsx

@@ -0,0 +1,15 @@
+import React, { useContext, useState, useEffect } from "react";
+import BlogItem from "../components/Blogs";
+
+export default function BlogPage() {
+    const commonHeadData = () => {
+        console.log("COMMON HEAD DATA ----------------=====---------------------");
+        return 0;
+    };
+
+    return (
+        <>
+            <BlogItem  commonHeadData={commonHeadData} />
+        </>
+    );
+}