Changed the Name of link

.vscode/settings.json

@@ -21,5 +21,14 @@
   "emmet.triggerExpansionOnTab": true,
   "emmet.includeLanguages": {
     "javascript": "javascriptreact"
-  }
+  },
+  "cSpell.words": [
+    "completesignuplink",
+    "MOBILEUSER",
+    "MYFILES",
+    "mynotifications",
+    "PASSWORDRESET",
+    "TRANSFERSTART",
+    "WRENCHBOARD"
+  ]
 }

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation } from "react-router-dom";
 import usersService from "../../../services/UsersService";
@@ -23,7 +23,9 @@ const AssignTaskPopout = ({
   
 }) => {
   const {parentAssignJobToKid} = SocketValues()
+
   const apiCall = new usersService();
+
   let { pathname, state } = useLocation();
 
   const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
@@ -219,7 +221,10 @@ const AssignTaskPopout = ({
           setRequestStatus({ loading: false, status: false, message: "" });
         }, 5000);
       });
-  };
+    };
+
+  let imageSrc = (localStorage.getItem("session_token")
+  ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeTask.data.job_uid}` : ""); // FOR GETTING JOB IMAGE
 
   useEffect(()=>{ // effect to update family UID when components mounts
     if(familyDetailsData?.uid){
@@ -231,6 +236,7 @@ const AssignTaskPopout = ({
     }
   },[])
 
+
   return (
     <>
       <ModalCom action={action} situation={situation}>
@@ -382,25 +388,37 @@ const AssignTaskPopout = ({
                               value={activeTask?.data?.description}
                             />
                           </div>
-                          <div className="flex items-center">
-                            <div className="my-3 w-full flex items-center gap-1">
-                              <label className="job-label">
-                                Price
-                              </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">
-                                {PriceFormatter(
-                                  activeTask?.data?.price * 0.01,
-                                  activeTask?.data?.currency,
-                                  activeTask?.data?.curreny_code
-                                )}
-                              </p>
-                            </div>
+                          <div className="grid grid-cols-2">
+                            <div className="w-full">
+                              <div className="my-3 w-full flex items-center gap-1">
+                                <label className="job-label">
+                                  Price
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                  {PriceFormatter(
+                                    activeTask?.data?.price * 0.01,
+                                    activeTask?.data?.currency,
+                                    activeTask?.data?.curreny_code
+                                  )}
+                                </p>
+                              </div>
 
-                            <div className="my-3 w-full flex items-center gap-1">
-                              <label className="job-label">
-                                Timeline
-                              </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                              <div className="my-3 w-full flex items-center gap-1">
+                                <label className="job-label">
+                                  Timeline
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                              </div>
+                            </div>
+                            <div className="w-full flex items-center justify-center">
+                              <div className="w-28 h-28 rounded-2xl flex items-center justify-center">
+                                  <img 
+                                    className="w-full h-auto"
+                                    loading="lazy"
+                                    src={imageSrc} 
+                                    alt='job image' 
+                                  />
+                              </div>
                             </div>
                           </div>
                           

src/components/JobGroups/AddGroup.jsx

@@ -89,13 +89,13 @@ export default function AddGroup({ action, situation, setUpdateList }) {
   return (
     <ModalCom action={action} situation={situation}>
       <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
-        <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+        <div className="modal-header-con">
+          <h1 className="modal-title">
             Add Group
           </h1>
           <button
             type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
             onClick={action}
           >
             <svg
@@ -139,9 +139,9 @@ export default function AddGroup({ action, situation, setUpdateList }) {
             <button
               onClick={action}
               type="button"
-              className="text-base text-light-red tracking-wide "
+              className="w-[152px] h-[46px] flex justify-center items-center rounded-full text-base text-light-red tracking-wide border border-light-red"
             >
-              <span className="border-b dark:border-[#5356fb29]  border-light-red">
+              <span className="">
                 Cancel
               </span>
             </button>

src/components/JobGroups/DeleteMember.jsx

@@ -21,13 +21,13 @@ export default function DeleteMember({action, situation, details}) {
         situation={situation}
     >
       <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
-        <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+        <div className="modal-header-con">
+          <h1 className="modal-title">
             Remove Member
           </h1>
           <button
             type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
             onClick={action}
           >
             <svg

src/components/JobGroups/MemberList.jsx

@@ -229,13 +229,15 @@ export default function MemberList({
                       // iconName="message"
                     />
                   </div>
-                  <div className="input-item w-full">
+                </div>
+                <div className="sm:flex gap-2 items-center">
+                  <div className="input-item my-2 w-full sm:w-9/12">
                     <InputCom
                       labelClass="tracking-wider"
                       fieldClass="sm:px-6 px-2"
                       value={fields.email}
                       inputHandler={handleFieldsChange}
-                      inputClass="xl:w-[16rem] 2xl:w-full"
+                      inputClass=""
                       placeholder="Email"
                       // label="Email"
                       name="email"
@@ -243,7 +245,7 @@ export default function MemberList({
                       // iconName="message"
                     />
                   </div>
-                  <div className="flex justify-end items-end">
+                  <div className="flex justify-end items-end w-full sm:w-3/12">
                     {requestState.loading ? (
                       <LoadingSpinner size="8" color="sky-blue" />
                     ) : (

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -546,13 +546,13 @@ function ActiveJobs(props) {
 
         {/* MESSAGE SECTION */}
         <div className="w-full lg:w-1/2">
-          <div className="flex justify-between items-center gap-5">
-            <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2">
+          <div className="flex justify-between items-center gap-5 justify-between">
+            <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
               <span>Message</span>
               <button
               type="button"
               onClick={popUpHandler}
-              className="text-[12px] tracking-wider text-emerald-600 dark:text-emerald-300"
+              className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400"
             >
               View all
             </button>

src/components/OffersInterest/index.jsx

@@ -9,6 +9,7 @@ export default function OffersInterest(props) {
     const filterHandler = (value) => {
         setValue(value);
     };
+    
     return (
         <Layout>
             <CommonHead

src/components/Partials/MobileSideBar.jsx

@@ -89,7 +89,9 @@ export default function MobileSidebar({
             <ul className="flex flex-col space-y-6">
               {/* Using mini component reduces the bulk amount of html */}
               <ListItem
-                title= {userDetails?.account_type == "FULL" ? "Dashboard" : "Home"}
+                title={
+                  userDetails?.account_type == "FULL" ? "Dashboard" : "Home"
+                }
                 route="/"
                 sidebar={sidebar}
                 iconName="new-dashboard"
@@ -190,17 +192,21 @@ export default function MobileSidebar({
                 <div className="items">
                   <ul className="flex flex-col space-y-6">
                     {[
-                      { name: "List", path: "/myjobs", iconName: "job-list" },
+                      {
+                        name: "List",
+                        path: "/myjobs",
+                        iconName: "job-list",
+                      },
+                      // {
+                      //   name: "Waiting",
+                      //   path: "/pend-interest",
+                      //   iconName: "pending-job",
+                      // },
                       {
                         name: "Offers",
                         path: "/my-offers",
                         iconName: "pending-job",
                       },
-                      {
-                        name: "Waiting",
-                        path: "/pend-interest",
-                        iconName: "pending-job",
-                      },
                       {
                         name: "Active",
                         path: "/my-active-jobs",

src/components/Partials/RightSideBar.jsx

@@ -4,6 +4,7 @@ import { NavLink } from "react-router-dom";
 //import SideStatistics from "./SideStatistics";
 import { localImgLoad } from "../../lib";
 import DarkModeContext from "../Contexts/DarkModeContext";
+import Icons from "../Helpers/Icons";
 
 export default function RightSideBar({ myJobList }) {
   const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
@@ -81,6 +82,19 @@ export default function RightSideBar({ myJobList }) {
                   {/* action */}
                 </div>
 
+                <div className="item flex space-x-3 items-center mb-4">
+                  {/* image */}
+                  <div className="w-8 h-8 rounded-full flex items-center justify-center">
+                    <Icons name="pending-job" />
+                  </div>
+                  {/* name */}
+                  <div>
+                    <p className="text-thin-light-gray text-base font-medium">
+                      <NavLink to="/pend-interest">Waiting</NavLink>
+                    </p>
+                  </div>
+                  {/* action */}
+                </div>
                 <div className="item flex space-x-3 items-center mb-4">
                   {/* image */}
                   <div className="w-8 h-8 rounded-full">
@@ -235,6 +249,7 @@ export default function RightSideBar({ myJobList }) {
                     />
                   </svg>
                 )}
+
               </span>
               <p className="text-thin-light-gray text-base font-medium">
                 {darkMode.theme === "light" ? "Dark" : "Light"} Mode
@@ -274,6 +289,24 @@ export default function RightSideBar({ myJobList }) {
                   {/* action */}
                 </div>
 
+                <div className="px-8 item flex space-x-3 items-center mb-4">
+                  {/* image */}
+                  <div className="w-8 h-8 p-[4px] rounded-full">
+                    <img
+                      src={localImgLoad("images/icons/job_active.svg")}
+                      className="w-full h-full"
+                      alt="Active Task"
+                    />
+                  </div>
+                  {/* name */}
+                  <div>
+                    <p className="text-thin-light-gray text-base font-medium">
+                      <NavLink to="/offer-interest">Offers Interest</NavLink>
+                    </p>
+                  </div>
+                  {/* action */}
+                </div>
+
                 <div className="px-8 item flex space-x-3 items-center mb-4">
                   {/* image */}
                   <div className="w-8 h-8 p-[4px] rounded-full">

src/components/Partials/Sidebar.jsx

@@ -216,11 +216,11 @@ export default function Sidebar({
                         path: "/myjobs",
                         iconName: "job-list",
                       },
-                      {
-                        name: "Waiting",
-                        path: "/pend-interest",
-                        iconName: "pending-job",
-                      },
+                      // {
+                      //   name: "Waiting",
+                      //   path: "/pend-interest",
+                      //   iconName: "pending-job",
+                      // },
                       {
                         name: "Offers",
                         path: "/my-offers",