added the correct last time reminded

.env

@@ -63,20 +63,23 @@ REACT_APP_APPLE_REDIRECT_URL='http://localhost:9082/login/auth/apple'
 # /* 'client_id' => */ 'com.wrenchboard.users.client',
 # /* 'client_secret' => */ 'eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiIsImtpZCI6Ilc1V1RXQzlEVEoifQ.eyJpc3MiOiJKUjM2M0ZFWThSIiwiaWF0IjoxNjU0MDgzODQxLCJleHAiOjE2NTkyNjc4NDEsImF1ZCI6Imh0dHBzOi8vYXBwbGVpZC5hcHBsZS5jb20iLCJzdWIiOiJjb20ud3JlbmNoYm9hcmQudXNlcnMuY2xpZW50In0.TIPMwjS2MgSysqEuw3yu1nrOcrH-6omzerDhx0CadjWn2yCO8wZhQiAlhIFs7F-WPektIJ6h-2BT62yGrILiTA',
 # /* 'redirect_uri' => */ site_url('login/auth/apple')
-
-REACT_APP_MAX_FILE_SIZE=1000000
-REACT_APP_TOTAL_NUM_FILE=4
-
-REACT_APP_LOGOUT_TEXT="Sign Out"
+#SOCIALS Links Display
 REACT_APP_APPLE_SOCIAL_LOGIN=0
 REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
 
+#File Handling
+REACT_APP_MAX_FILE_SIZE=1000000
+REACT_APP_TOTAL_NUM_FILE=4
+
+#Auth Text(s)
+REACT_APP_LOGOUT_TEXT="Sign Out"
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
 
-
+#Cards Handling
 REACT_APP_MAX_CREDIT_CARDS=4
 REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
 
+#Family
 REACT_APP_MAX_FAMILY_MEMBERS=8

src/components/AddJob/AddJob.jsx

@@ -32,7 +32,7 @@ const validationSchema = Yup.object().shape({
     .required("Description is required"),
   job_detail: Yup.string()
     .min(3, "Minimum 3 characters")
-    .max(1440, "Maximum 1440 characters")
+    .max(499, "Maximum 499 characters")
     .required("Details is required"),
   timeline_days: Yup.number()
     .typeError("you must specify a number")

src/components/FamilyAcc/FamilyTable.jsx

@@ -8,6 +8,12 @@ import familyImage from "../../assets/images/no-family-side.png";
 import { formatDateString } from "../../lib";
 import localImgLoad from "../../lib/localImgLoad";
 
+/**
+ * Renders a list of family members that can be managed. 
+ * It has its current maximum members at 8 and it comes with pagination and loading spinner functionality.
+
+ * @returns {JSX.Element} - The rendered component.
+ */
 export default function FamilyTable({
   className,
   familyList,
@@ -15,8 +21,8 @@ export default function FamilyTable({
   popUpHandler,
 }) {
   const navigate = useNavigate();
-
   const [currentPage, setCurrentPage] = useState(0);
+  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
@@ -25,13 +31,94 @@ export default function FamilyTable({
     indexOfLastItem
   );
 
+  const handleManageClick = (familyMember) => {
+    navigate("/manage-family", { state: familyMember });
+  };
+
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
   };
 
+  /**
+   * Renders a table row for a family member.
+   * @returns {JSX.Element} - The table row component.
+   */
+  const FamilyRow = ({
+    firstname,
+    lastname,
+    age,
+    added,
+    last_login,
+    task_count,
+    family_uid,
+    banner,
+  }) => {
+    // Check for valid dates
+    const addedDate = added ? added.split(" ")[0] : "N/A";
+    const loginDate = last_login ? formatDateString(last_login) : "N/A";
+
+    return (
+      <tr
+        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+        key={family_uid}
+      >
+        <td className="py-4">
+          <div className="flex space-x-2 items-center w-full">
+            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
+              <img
+                src={localImgLoad(`images/icons/${banner}`)}
+                alt={`Avatar of ${firstname} ${lastname}`}
+                className="w-full h-full"
+              />
+            </div>
+            <div className="flex flex-col flex-[0.9]">
+              <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                {`${firstname} ${lastname} (${age})`}
+              </h1>
+              <span className="text-sm text-thin-light-gray">
+                Added: <span className="text-purple ml-1">{addedDate}</span>
+              </span>
+              <span className="text-sm text-thin-light-gray">
+                Last Login:{" "}
+                <span className="text-purple ml-1">{loginDate}</span>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td className="text-center py-4 px-2">
+          <div className="flex space-x-1 items-center justify-center">
+            <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+              {task_count}
+            </span>
+          </div>
+        </td>
+        <td className="text-right py-4 px-2 flex items-center justify-center">
+          <button
+            onClick={() =>
+              handleManageClick({
+                firstname,
+                lastname,
+                age,
+                added,
+                last_login,
+                task_count,
+                family_uid,
+                banner,
+              })
+            }
+            type="button"
+            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+          >
+            Manage
+          </button>
+        </td>
+      </tr>
+    );
+  };
+
   return (
     <div
-      className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] flex flex-col justify-between ${
         className || ""
       }`}
     >
@@ -40,129 +127,51 @@ export default function FamilyTable({
           <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
             <LoadingSpinner size="16" color="sky-blue" />
           </div>
-        ) : familyList?.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">
-              {currentFamilyList?.map((props, idx) => {
-                let {
-                  firstname,
-                  lastname,
-                  age,
-                  added,
-                  last_login,
-                  task_count,
-                  family_uid,
-                  banner,
-                } = props;
-                let addedDate = added?.split(" ")[0];
-                let LoginDate =
-                  last_login === ""
-                    ? "never logged in"
-                    : formatDateString(last_login);
-                return (
-                  <tr
-                    className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
-                    key={family_uid}
-                  >
-                    <td className=" py-4">
-                      <div className="flex space-x-2 items-center w-full">
-                        <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
-                          <img
-                            // src={dataImage1}
-                            src={localImgLoad(`images/icons/${banner}`)}
-                            alt="data"
-                            className="w-full h-full"
-                          />
-                        </div>
-                        <div className="flex flex-col flex-[0.9]">
-                          <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                            {`${firstname} ${lastname} (${age})`}
-                          </h1>
-                          <span className="text-sm text-thin-light-gray">
-                            Added:{" "}
-                            <span className="text-purple ml-1">
-                              {addedDate}
-                            </span>
-                          </span>
-                          <span className="text-sm text-thin-light-gray">
-                            Last Login:{" "}
-                            <span className="text-purple ml-1">
-                              {LoginDate}
-                            </span>
-                          </span>
-                        </div>
-                      </div>
-                    </td>
-                    {/* <td className="text-center py-4 px-2">
-                            <div className="flex space-x-1 items-center justify-center">
-                              <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                                {LoginDate}
-                              </span>
-                            </div>
-                          </td> */}
-                    <td className="text-center py-4 px-2">
-                      <div className="flex space-x-1 items-center justify-center">
-                        <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                          {task_count}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="text-right py-4 px-2 flex items-center justify-center">
-                      <button
-                        onClick={() => {
-                          navigate("/manage-family", {
-                            state: { ...props },
-                          });
-                        }}
-                        type="button"
-                        className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                      >
-                        Manage
-                      </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">
-                Add your family, assign tasks, and get the whole team engaged.
-              </p>
-              <button
-                onClick={popUpHandler}
-                type="button"
-                className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
-              >
-                Add Family
-              </button>
-            </div>
-            <div className="p-2 w-full md:w-1/2">
-              <img className="w-full" src={familyImage} alt="Add Family" />
-            </div>
-          </div>
+          <>
+            {familyList?.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">No of Tasks</th>
+                    <th className="py-4 text-right"></th>
+                  </tr>
+                </thead>
+                <tbody className="h-full">
+                  {currentFamilyList?.map((familyMember) => {
+                    return <FamilyRow {...familyMember} />;
+                  })}
+                </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">
+                    Add your family, assign tasks, and get the whole team
+                    engaged.
+                  </p>
+                  <button
+                    onClick={popUpHandler}
+                    type="button"
+                    className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+                  >
+                    Add Family
+                  </button>
+                </div>
+                <div className="p-2 w-full md:w-1/2">
+                  <img className="w-full" src={familyImage} alt="Add Family" />
+                </div>
+              </div>
+            )}
+          </>
         )}
       </div>
       {/* PAGINATION BUTTON */}
       <PaginatedList
         onClick={handlePagination}
-        prev={currentPage == 0 ? true : false}
-        next={
-          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-          familyList?.length
-            ? true
-            : false
-        }
+        prev={currentPage == 0}
+        next={currentPage + itemsPerPage >= familyList.length}
         data={familyList}
         start={indexOfFirstItem}
         stop={indexOfLastItem}

src/components/FamilyAcc/index.jsx

@@ -5,12 +5,12 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import InputCom from "../Helpers/Inputs/InputCom";
-import Layout from "../Partials/Layout";
-import FamilyTable from "./FamilyTable";
 import SiteService from "../../services/SiteService";
+import InputCom from "../Helpers/Inputs/InputCom";
 import ModalCom from "../Helpers/ModalCom";
+import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import FamilyTable from "./FamilyTable";
 
 export default function FamilyAcc() {
   const [selectTab, setValue] = useState("today");
@@ -129,6 +129,8 @@ export default function FamilyAcc() {
     };
   }, [listReload, memberList]);
 
+  console.log("Family List ====>", familyList.length);
+
   return (
     <Layout>
       {/*<CommonHead />*/}
@@ -143,13 +145,16 @@ export default function FamilyAcc() {
                 >
                   Family Accounts
                 </span>
-                <button
-                  onClick={popUpHandler}
-                  type="button"
-                  className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
-                >
-                  Add
-                </button>
+                {(familyList.length <
+                  process.env.REACT_APP_MAX_FAMILY_MEMBERS && !loader) && (
+                  <button
+                    onClick={popUpHandler}
+                    type="button"
+                    className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+                  >
+                    Add
+                  </button>
+                )}
               </h1>
             </div>
             <div className="slider-btns flex space-x-4">

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -25,6 +25,7 @@ export default function InputCom({
   maxLength = 45,
   minLength = 0,
   direction,
+  tabIndex,
   error,
 }) {
   const inputRef = useRef(null);
@@ -100,6 +101,7 @@ export default function InputCom({
           onInput={onInput}
           minLength={minLengthValidation()}
           maxLength={maxLengthValidation()}
+          tabIndex={tabIndex}
           // pattern={inputPatterns()}
           ref={inputRef}
           readOnly={disable}

src/components/Home/FamilyDash.jsx

@@ -1,12 +1,9 @@
 import React from "react";
-import datas from "../../data/product_data.json";
-import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
-import CommonHead from "../UserHeader/CommonHead";
-import FamilyActiveLSlde from "./FamilyActiveLSlde";
 import ParentWaiting from "../MyPendingJobs/ParentWaiting";
 import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
+import FamilyActiveLSlde from "./FamilyActiveLSlde";
 
-export default function FamilyDash({familyOffers, MyActiveJobList}) {
+export default function FamilyDash({ familyOffers, MyActiveJobList }) {
   console.log("PROPS IN FAMILY DASH->", familyOffers);
 
   const trending = MyActiveJobList;
@@ -14,13 +11,13 @@ export default function FamilyDash({familyOffers, MyActiveJobList}) {
     <div>
       <div className="home-page-wrapper">
         {/* <CommonHead commonHeadData={props.commonHeadData} /> */}
-        {familyOffers && familyOffers.length > 0 &&
-        <MyOffersFamilyTable familyOffers={familyOffers} className="mb-10" />
-        }
-        {trending && trending.length > 0 &&
-        <FamilyActiveLSlde trending={trending} className="mb-10" />
-        }
-        
+        {familyOffers && familyOffers.length > 0 && (
+          <MyOffersFamilyTable familyOffers={familyOffers} className="mb-10" />
+        )}
+        {trending && trending.length > 0 && (
+          <FamilyActiveLSlde trending={trending} className="mb-10" />
+        )}
+
         {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
         <ParentWaiting className="mb-10" />
       </div>

src/components/Home/HomeActivities.jsx

@@ -58,8 +58,8 @@ export default function HomeActivities({ className }) {
       }`}
     >
       <div className="header w-full sm:flex justify-between items-center mb-5">
-        <div className="flex space-x-2 items-center mb-2 sm:mb-0">
-          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+        <div className="flex space-x-2 items-center mb-4 sm:mb-0">
+          <h1 className="text-center text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
             Recent Activities
           </h1>
         </div>
@@ -79,28 +79,32 @@ export default function HomeActivities({ className }) {
             {/*</tr>*/}
 
             {recentActivitiesData.loading ? (
-              <div className="h-[100px] w-full flex justify-center items-center">
-                <LoadingSpinner color="sky-blue" size="16" />
-              </div>
+              <tr>
+                <td>
+                  <div className="h-[100px] w-full flex justify-center items-center">
+                    <LoadingSpinner color="sky-blue" size="16" />
+                  </div>
+                </td>
+              </tr>
             ) : recentActivitiesData.data ? (
               recentActivitiesData.data?.map((item) => {
                 let addedDate = item?.added?.split(" ")[0];
                 return (
                   <tr
-                    className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                    className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
                     key={item.uid}
                   >
-                    <td className=" py-8">
+                    <td className="py-3">
                       <div className="flex space-x-2 items-center">
-                        <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                        {/* <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                           <img
                             src={dataImage1}
                             alt="data"
                             className="w-full h-full"
                           />
-                        </div>
+                        </div> */}
                         <div className="flex flex-col">
-                          <h1 className="font-bold text-xl   text-dark-gray dark:text-white">
+                          <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                             {item.title ? item.title : "Title"}
                           </h1>
                           <span className="text-sm text-thin-light-gray">
@@ -110,8 +114,8 @@ export default function HomeActivities({ className }) {
                       </div>
                     </td>
 
-                    <td className="text-right py-4">
-                      <div className="flex space-x-1 items-center justify-center">
+                    <td className="text-right py-3">
+                      <div className="flex space-x-1 items-center justify-end">
                         <span className="text-base text-dark-gray dark:text-white font-medium">
                           {item.added ? addedDate : ""}
                         </span>

src/components/MyPendingJobs/DeleteTaskModal.jsx

@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import ModalCom from "../Helpers/ModalCom";
+import { useNavigate } from "react-router-dom";
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { useDispatch } from "react-redux";
+
+
+function DeleteTaskModal({ details, onClose, situation }) {
+  let dispatch = useDispatch();
+  const navigate = useNavigate();
+  const ApiCall = new usersService();
+
+  let [requestStatus, setRequestStatus] = useState({
+    laoding: false,
+    status: false,
+    message: "",
+  }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
+
+  // FUNCTION TO DELETE TASK
+  const deleteTask = () => {
+    setRequestStatus(prev => ({...prev, loading:true, message: 'No API Yet'}))
+    setTimeout(()=>{
+        setRequestStatus(prev => ({...prev, loading:false, message: ''}))
+    },3000)
+  }
+
+  return (
+    <ModalCom action={onClose} 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">
+            Delete Task
+          </h1>
+          <button
+            type="button"
+            className="text-[#374557] dark:text-red-500"
+            onClick={onClose}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+          <div className="what-icon mb-6 cursor-pointer">
+            <svg
+              width="136"
+              height="136"
+              viewBox="0 0 136 136"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="68" cy="68" r="68" fill="#4687ba" />
+              <path
+                d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z"
+                fill="white"
+              />
+              <path
+                d="M67.485 100.21C66.1617 99.9268 64.9041 99.5091 63.803 98.6787C61.3804 96.8484 60.2877 93.7699 61.0386 90.7888C61.7726 87.8747 64.2138 85.6703 67.2089 85.2157C71.273 84.6 75.2024 87.3681 75.8135 91.277C76.4937 95.6153 73.8202 99.3782 69.544 100.103C69.4429 100.12 69.3487 100.172 69.2527 100.209C68.6635 100.21 68.0742 100.21 67.485 100.21Z"
+                fill="white"
+              />
+            </svg>
+          </div>
+          <div className="mb-6">
+            <p className="text-xl tracking-wide text-dark-gray dark:text-white">
+              {details.title}
+            </p>
+          </div>
+          <div className="flex space-x-2.5">
+            <button
+              onClick={onClose}
+              type="button"
+              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteTask(details)}
+                type="button"
+                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+              >
+                Confirm Delete
+              </button>
+            )}
+          </div>
+
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
+        </div>
+      </div>
+    </ModalCom>
+  );
+}
+
+export default DeleteTaskModal;

src/components/MyPendingJobs/ParentWaitingTable.jsx

@@ -7,7 +7,9 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 import usersService from "../../services/UsersService";
-
+import DeleteIcon from '../../assets/images/icon-delete.svg'
+import DeleteTaskModal from "./DeleteTaskModal";
+import SendReminderModal from "./SendReminderModal";
 
 export default function ParentWaitingTable() {
     // const transationFilterData = [
@@ -34,6 +36,9 @@ export default function ParentWaitingTable() {
 
     const apiCall = new usersService()
 
+    let [deleteTaskPopout, setDeleteTaskPopout] = useState({show:false, data:{}}) // HOLDS THE INFO OF DELETE TASK POPOUT
+    let [sendReminderPopout, setSendReminderPopout] = useState({show:false, data:{}}) // HOLDS THE INFO OF SEND REMINDER POPOUT
+
     let [familySuggestList, setFamilySuggestList] = useState({loading: true, data:[]})
 
     const [currentPage, setCurrentPage] = useState(0);
@@ -97,7 +102,7 @@ export default function ParentWaitingTable() {
                                         <div className="icon w-14 h-14 flex justify-center items-center">
                                             <img src={Image} alt="" className="w-full h-full" />
                                         </div>
-                                        <div className="">
+                                        <div className="w-full">
                                             <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
                                                 {item.title}
                                             </p>
@@ -107,12 +112,35 @@ export default function ParentWaitingTable() {
                                             </p>
                                         </div>
                                     </div>
-                                    <div className="px-2 self-end">
-                                        <p className="text-sm font-bold text-dark-gray dark:text-white">
-                                            {new Date(item.added).toLocaleString().split(',')[0]}
-                                            
-                                        </p>
-                                        <p className="text-xs py-1.5 w-[50px] tracking-wide rounded-full bg-gold text-white flex justify-center items-center">{item.status_text}</p>
+                                    <div className="min-w-[100px] flex justify-start items-end px-2 gap-1">
+                                        <button
+                                            type="button"
+                                            className="p-1 border-2 border-red-400 rounded-md"
+                                            onClick={() => {
+                                                setDeleteTaskPopout({
+                                                    show: true,
+                                                    data: { ...item },
+                                                });
+                                            }}
+                                        >
+                                            <img className="min-w-[21px] h-[21px]" src={DeleteIcon} alt='delete-icon' />
+                                        </button>
+
+                                        <div className="">
+                                            <p className="text-sm font-bold text-dark-gray dark:text-white">
+                                                {new Date(item.added).toLocaleString().split(',')[0]}
+                                                
+                                            </p>
+                                            <p 
+                                                className="text-xs py-1.5 w-[50px] tracking-wide rounded-full bg-gold text-white flex justify-center items-center cursor-pointer"
+                                                onClick={() => {
+                                                    setSendReminderPopout({
+                                                        show: true,
+                                                        data: { ...item },
+                                                    });
+                                                }}
+                                            >{item.status_text}</p>
+                                        </div>
                                     </div>
                                 </div>
                             </li>
@@ -122,6 +150,30 @@ export default function ParentWaitingTable() {
                     :
                     <p className="w-full flex items-center justify-center text-xl text-dark-gray dark:text-white">No List Found!</p>
                 }
+
+                {/* Delete Task Popout */}
+                {deleteTaskPopout.show && (
+                    <DeleteTaskModal
+                    details={deleteTaskPopout.data}
+                    onClose={() => {
+                        setDeleteTaskPopout({ show: false, data: {} });
+                    }}
+                    situation={deleteTaskPopout.show}
+                    />
+                )}
+                {/* END of Delete Task Popout */}
+
+                {/* Send Reminder Popout */}
+                {sendReminderPopout.show && (
+                    <SendReminderModal
+                    details={sendReminderPopout.data}
+                    onClose={() => {
+                        setSendReminderPopout({ show: false, data: {} });
+                    }}
+                    situation={sendReminderPopout.show}
+                    />
+                )}
+                {/* END of Send Reminder Popout */}
             </div>
 
             {/* PAGINATION BUTTON */}

src/components/MyPendingJobs/SendReminderModal.jsx

@@ -0,0 +1,130 @@
+import React, { useState } from "react";
+import ModalCom from "../Helpers/ModalCom";
+import { useNavigate } from "react-router-dom";
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { useDispatch } from "react-redux";
+
+
+function SendReminderModal({ details, onClose, situation }) {
+  console.log('details',details)
+  let dispatch = useDispatch();
+  const navigate = useNavigate();
+  const ApiCall = new usersService();
+
+  let [requestStatus, setRequestStatus] = useState({
+    laoding: false,
+    status: false,
+    message: "",
+  }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
+
+  // FUNCTION TO SEND REMINDER
+  const sendReminder = () => {
+    setRequestStatus(prev => ({...prev, loading:true, message: 'No API Yet'}))
+    setTimeout(()=>{
+        setRequestStatus(prev => ({...prev, loading:false, message: ''}))
+    },3000)
+  }
+
+  return (
+    <ModalCom action={onClose} 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">
+            Send Reminder
+          </h1>
+          <button
+            type="button"
+            className="text-[#374557] dark:text-red-500"
+            onClick={onClose}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="logout-modal-body w-full flex flex-col items-center p-8">
+
+        <div className="mb-6 w-full flex gap-4 items-center">
+            <div className="icon max-w-[150px] min-w-[150px] max-h-[150px] min-h-[150px] flex justify-center items-center">
+                <img src={require(`../../assets/images/family/${details.banner || "default.jpg"}`)} alt="" className="w-full h-full" />
+            </div>
+            <div className="w-full">
+                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                    {details.title}
+                </p>
+
+                <p className="text-sm mb-2 text-thin-light-gray font-medium">
+                    {details.description}
+                </p>
+                {
+                  details.remind && 
+                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                    Last Remind: {new Date(details.remind).toLocaleString().split(',')[0]}
+                </p>
+                }
+            </div>
+        </div>
+
+          <div className="w-full flex justify-end">
+            {/* <button
+              onClick={onClose}
+              type="button"
+              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button> */}
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => sendReminder(details)}
+                type="button"
+                className="text-white bg-sky-blue text-18 tracking-wide px-4 py-3 rounded-full"
+              >
+                Send Reminder
+              </button>
+            )}
+          </div>
+
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
+        </div>
+      </div>
+    </ModalCom>
+  );
+}
+
+export default SendReminderModal;

src/components/MyTasks/MyOffersFamilyTable.jsx

@@ -38,8 +38,7 @@ export default function MyOffersFamilyTable({ className, familyOffers }) {
       },
     ],
   };
-
-  console.log("YES WE SEE OFFERS", familyOffers);
+  // console.log("YES WE SEE OFFERS", familyOffers);
 
   const trendingSlider = useRef(null);
   const prevHandler = () => {

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -26,46 +26,59 @@ function AddFundPop({
   };
 
   const handleSubmit = async () => {
-    setInputError("");
-    setConfirmCredit((prev) => ({
-      ...prev,
-      show: { awaitConfirm: { loader: true } },
-    }));
-
-    if (!input || input === "0") {
-      setConfirmCredit((prev) => ({
-        ...prev,
-        show: { awaitConfirm: { loader: false } },
-      }));
-      setInputError("Please Enter Amount");
-      setTimeout(() => setInputError(""), 5000);
-      return;
-    }
-
-    if (Number(input) * 100 > Number(walletItem?.transfer_limit)) {
-      setInputError("Credit limit has been exceeded");
-      setTimeout(() => setInputError(""), 5000);
-      return;
-    }
-
-    if (isNaN(input)) {
-      setConfirmCredit((prev) => ({
-        ...prev,
-        show: { awaitConfirm: { loader: false } },
-      }));
-      setInputError("Amount must be a Number");
-      setTimeout(() => setInputError(""), 5000);
-      return;
-    }
-
-    let stateData = {
-      amount: Number(input) * 100,
-      currency: walletItem?.code,
-    };
-
     try {
+      // Clear any previous input error and set the loading spinner to be shown
+      setInputError("");
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: true } },
+      }));
+
+      // Perform validation checks on the input amount
+      if (!input || input === "0") {
+        // Handle input validation error
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: { awaitConfirm: { loader: false } },
+        }));
+        setInputError("Please Enter Amount");
+        setTimeout(() => setInputError(""), 5000);
+        return;
+      }
+
+      if (Number(input) * 100 > Number(walletItem?.transfer_limit)) {
+        // Handle credit limit exceeded error
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: { awaitConfirm: { loader: false } },
+        }));
+        setInputError("Credit limit has been exceeded");
+        setTimeout(() => setInputError(""), 5000);
+        return;
+      }
+
+      if (isNaN(input)) {
+        // Handle invalid input error
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: { awaitConfirm: { loader: false } },
+        }));
+        setInputError("Amount must be a Number");
+        setTimeout(() => setInputError(""), 5000);
+        return;
+      }
+
+      // Prepare state data for API call
+      let stateData = {
+        amount: Number(input) * 100,
+        currency: walletItem?.code,
+      };
+
+      // Make API call to start credit process
       const res = await apiCall.getStartCredit(stateData);
+
       if (res.data.internal_return < 0) {
+        // Handle API error
         setConfirmCredit((prev) => ({
           ...prev,
           show: { awaitConfirm: { loader: false } },
@@ -75,6 +88,7 @@ function AddFundPop({
         return;
       }
 
+      // Update state with response data
       const _response = res.data;
       stateData.amount = Number(input);
       stateData.currency = currency;
@@ -91,6 +105,7 @@ function AddFundPop({
         }));
       }, 1500);
     } catch (error) {
+      // Handle API call error
       setConfirmCredit((prev) => ({
         ...prev,
         show: { awaitConfirm: { loader: false } },
@@ -116,6 +131,7 @@ function AddFundPop({
                   placeholder="0"
                   value={input}
                   inputHandler={handleChange}
+                  tabIndex={0}
                 />
                 <p className="text-base text-red-500 italic h-5">
                   {inputError && inputError}

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -1,5 +1,12 @@
+/**
+ * Renders a modal with information about a credit transaction.
+ * @returns {JSX.Element} - The rendered modal component.
+ */
 function CompleteConfirmCredit({ onClose, confirmCredit }) {
   const { data } = confirmCredit;
+  const isSuccess =
+    data?.result === "Charge success" || data?.status === "successful";
+
   return (
     <div className="logout-modal-body w-full flex flex-col items-center">
       <div className="content-wrapper w-full h-[32rem]">
@@ -9,91 +16,80 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
               <div className="field w-full mb-3 min-h-[45px]">
                 <div
                   className={`flex flex-col gap-4 ${
-                    data?.result !== "Charge success" &&
-                    "h-[328px] items-center justify-center"
+                    !isSuccess && "h-[328px] items-center justify-center"
                   }`}
                 >
-                  {/* Success Icon for now */}
                   <div className="flex items-center w-full justify-center">
-                    {data?.result == "Charge success" ||
-                    data?.status == "successful" ? (
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="100"
-                        height="100"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="green"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        className="feather feather-check-circle"
-                      >
-                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
-                      </svg>
-                    ) : (
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        width="100"
-                        height="100"
-                        stroke="red"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        className="feather feather-x-circle"
-                      >
-                        <circle cx="12" cy="12" r="10"></circle>
-                        <line x1="15" y1="9" x2="9" y2="15"></line>
-                        <line x1="9" y1="9" x2="15" y2="15"></line>
-                      </svg>
-                    )}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="100"
+                      height="100"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke={isSuccess ? "green" : "red"}
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className={`feather ${
+                        isSuccess ? "feather-check-circle" : "feather-x-circle"
+                      }`}
+                    >
+                      {isSuccess ? (
+                        <>
+                          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                          <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                        </>
+                      ) : (
+                        <>
+                          <circle cx="12" cy="12" r="10"></circle>
+                          <line x1="15" y1="9" x2="9" y2="15"></line>
+                          <line x1="9" y1="9" x2="15" y2="15"></line>
+                        </>
+                      )}
+                    </svg>
                   </div>
 
-                  <div className={`flex items-center`}>
+                  <div className="flex items-center">
                     <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {data?.result == "Charge success" ||
-                      data?.status == "successful"
+                      {isSuccess
                         ? "Credit was Successful!"
                         : "Credit was Unsuccessful"}
                     </h1>
                   </div>
 
                   {data?.internal_return >= 0 &&
-                  data?.result !== "Charge failed" ? (
-                    <>
-                      <div className="flex items-center gap-8">
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          Amount({data?.currency || ""})
-                        </h1>
-                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          {`${data?.symbol || ""} ${
-                            Number(data?.amount * 0.01).toLocaleString() || ""
-                          }`}
-                        </span>
-                      </div>
+                    data?.result !== "Charge failed" && (
+                      <>
+                        <div className="flex items-center gap-8">
+                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            Amount({data?.currency || ""})
+                          </h1>
+                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            {`${data?.symbol || ""} ${
+                              Number(data?.amount * 0.01).toLocaleString() || ""
+                            }`}
+                          </span>
+                        </div>
 
-                      <div className="flex items-center gap-8">
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          Wallet Balance
-                        </h1>
-                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          {data?.curr_balance}
-                        </span>
-                      </div>
+                        <div className="flex items-center gap-8">
+                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            Wallet Balance
+                          </h1>
+                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            {data?.curr_balance * 0.01}
+                          </span>
+                        </div>
 
-                      <div className="flex items-center gap-8">
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          Confirmation Number
-                        </h1>
-                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          {data?.confirmation}
-                        </span>
-                      </div>
-                    </>
-                  ) : null}
+                        <div className="flex items-center gap-8">
+                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            Confirmation Number
+                          </h1>
+                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            {data?.confirmation}
+                          </span>
+                        </div>
+                      </>
+                    )}
                 </div>
               </div>
             </div>

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -1,13 +1,14 @@
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { toast } from "react-toastify";
 import debounce from "../../../hooks/debounce";
 import usersService from "../../../services/UsersService";
-import { tableReload } from "../../../store/TableReloads";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-
+/**
+ * Renders a React component that displays the description and last four digits of a payment card.
+ */
 function ThePaymentText({ value, type }) {
   const { cardNum } = value;
   let description = value.description;
@@ -39,12 +40,16 @@ function ThePaymentText({ value, type }) {
   );
 }
 
+/**
+ * Renders the amount of a transaction in a specific currency.
+ * @returns {JSX.Element} - The rendered component.
+ */
 function AmountSection({ currency, amount, country }) {
-  const formattedAmount = Number(amount).toFixed(2);
+  const formattedAmount = amount?.toFixed(2);
+  const gapClassName = country === "US" ? "gap-14" : "gap-4";
+
   return (
-    <div
-      className={`flex items-center ${country == "US" ? "gap-14" : "gap-4"}`}
-    >
+    <div className={`flex items-center ${gapClassName}`}>
       <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
         Amount({currency})
       </h1>
@@ -55,14 +60,16 @@ function AmountSection({ currency, amount, country }) {
   );
 }
 
+/**
+ * Renders the transaction fee for a payment.
+ * @returns {JSX.Element} - Rendered JSX displaying the transaction fee with the label "Transaction Fee".
+ */
 function TransactionFeeSection({ currency, fee, country }) {
-  const formattedFee = Number(fee).toFixed(2);
+  const formattedFee = (+fee).toFixed(2);
+  const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4";
+
   return (
-    <div
-      className={`flex items-center border-b border-gray-600 ${
-        country == "US" ? "gap-[2.7rem]" : "gap-4"
-      }`}
-    >
+    <div className={`flex items-center border-b border-gray-600 ${gapClass}`}>
       <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
         Transaction Fee
       </h1>
@@ -73,15 +80,19 @@ function TransactionFeeSection({ currency, fee, country }) {
   );
 }
 
+/**
+ * Calculates the total amount by adding the `amount` and `fee` values together.
+ * Formats the total amount to two decimal places and displays it.
+ * @returns {JSX.Element} - The TotalSection component.
+ */
 function TotalSection({ currency, amount, fee, country }) {
   const total = Number(amount) + Number(fee);
-  const formattedTotal = total.toFixed(2);
+  const formattedTotal = total?.toFixed(2);
+
+  const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
+
   return (
-    <div
-      className={`flex items-center ${
-        country == "US" ? "gap-[8rem]" : "gap-[6.3rem]"
-      }`}
-    >
+    <div className={`flex items-center ${gap}`}>
       <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
         Total
       </h1>
@@ -109,8 +120,6 @@ function ConfirmAddFund({
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
-  const dispatch = useDispatch();
-
   const [requestStatus, setRequestStatus] = useState({
     message: "",
     loading: false,
@@ -169,8 +178,6 @@ function ConfirmAddFund({
             status: false,
           });
         }
-
-        return dispatch(tableReload({ type: "WALLETTABLE" }));
       })
       .catch((err) => {
         setRequestStatus({
@@ -248,8 +255,6 @@ function ConfirmAddFund({
           },
           data: _response,
         }));
-        // Dispatch an action to reload the wallet table
-        dispatch(tableReload({ type: "WALLETTABLE" }));
       }, 1500);
     } catch (error) {
       // Handle error and hide the loader
@@ -271,7 +276,8 @@ function ConfirmAddFund({
     try {
       // Extract necessary data from __confirmData and __confirmCardDetails
       const { amount, credit_reference, uid } = __confirmData;
-      const { address, cardNum, cvv, expirationMonth, expirationYear } = __confirmCardDetails;
+      const { address, cardNum, cvv, expirationMonth, expirationYear } =
+        __confirmCardDetails;
 
       // Set loading state to indicate payment is being processed
       setConfirmCredit((prev) => ({
@@ -320,8 +326,6 @@ function ConfirmAddFund({
             },
             data: _response,
           }));
-          console.log("Show meeeeeeeeee");
-          dispatch(tableReload({ type: "WALLETTABLE" }));
         }, 1500);
       }
     } catch (error) {

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -15,7 +15,19 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     data: {},
   });
 
-  console.log(confirmCredit);
+  const getTitle = () => {
+    if (confirmCredit?.show?.acceptConfirm?.state) {
+      if (confirmCredit?.data?.internal_return < 0) {
+        return "Credit Unsuccessful";
+      } else {
+        return "Credit Add Completed";
+      }
+    } else if (confirmCredit?.show?.awaitConfirm?.state) {
+      return "Confirm Credit Add";
+    } else {
+      return "Add Credit";
+    }
+  };
 
   return (
     <ModalCom
@@ -26,23 +38,9 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
       <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-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            {confirmCredit?.show?.acceptConfirm?.state &&
-            (confirmCredit?.data?.internal_return < 0 
-              // ||
-              // confirmCredit?.data?.status !== "successful"
-              ) ? (
-              "Credit Unsuccessful"
-            ) : (
-              <>
-                {confirmCredit?.show?.acceptConfirm?.loader
-                  ? "Confirming Credit..."
-                  : confirmCredit?.show?.awaitConfirm?.state
-                  ? "Confirm Credit Add"
-                  : confirmCredit?.show?.acceptConfirm?.state
-                  ? "Credit Add Completed"
-                  : "Add Credit"}
-              </>
-            )}
+            {confirmCredit?.show?.acceptConfirm?.loader
+              ? "Confirming Credit..."
+              : getTitle()}
           </h1>
           <button
             type="button"

src/components/MyWallet/WalletBox.jsx

@@ -1,29 +1,29 @@
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 
+/**
+ * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
+ */
 export default function WalletBox({ wallet, payment }) {
+  const { loading, data } = wallet;
+
   return (
-    <>
-      <div className="my-wallet-wrapper w-full mb-10">
-        <div className="main-wrapper w-full">
-          <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
-            {wallet.loading ? (
-              <div className="w-full h-full flex items-center justify-center">
-                <LoadingSpinner size="16" color="sky-blue" />
+    <div className="my-wallet-wrapper w-full mb-10">
+      <div className="main-wrapper w-full">
+        <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
+          {loading ? (
+            <div className="w-full h-full flex items-center justify-center">
+              <LoadingSpinner size="16" color="sky-blue" />
+            </div>
+          ) : (
+            data.length > 0 && data.map((item) => (
+              <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
+                <WalletItemCard walletItem={item} payment={payment} />
               </div>
-            ) : wallet.data.length ? (
-              wallet.data.map((item, index) => (
-                <div
-                  key={item.wallet_uid}
-                  className="lg:w-full h-full mb-10 lg:mb-0"
-                >
-                  <WalletItemCard walletItem={item} payment={payment} />
-                </div>
-              ))
-            ) : null}
-          </div>
+            ))
+          )}
         </div>
       </div>
-    </>
+    </div>
   );
 }

src/components/MyWallet/WalletItemCard.jsx

@@ -1,17 +1,25 @@
 import React, { useState } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
 import localImgLoad from "../../lib/localImgLoad";
+import { tableReload } from "../../store/TableReloads";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import CreditPopup from "./Popup/CreditPopup";
 import WalletAction from "./WalletAction";
 
+/**
+ * Renders a card displaying information about a wallet item.
+ */
 export default function WalletItemCard({ walletItem, payment }) {
-  const { userDetails } = useSelector((state) => state?.userDetails);
-  let accountType = userDetails?.account_type == "FAMILY";
-
-  //   Credit popup
+  const { userDetails } = useSelector((state) => state.userDetails);
+  const accountType = userDetails?.account_type === "FAMILY";
+  const dispatch = useDispatch();
   const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
+
+  /**
+   * Opens the credit popup.
+   * @param {Object} value - The value object.
+   */
   const openPopUp = (value) => {
     setCreditPopup({
       show: true,
@@ -19,37 +27,40 @@ export default function WalletItemCard({ walletItem, payment }) {
     });
   };
 
+  /**
+   * Closes the credit popup and dispatches a table reload action.
+   */
   const closePopUp = () => {
     setCreditPopup({ show: false, data: {} });
+    dispatch(tableReload({ type: "WALLETTABLE" }));
   };
 
-  let image = walletItem.code
-    ? `${walletItem.code.toLocaleLowerCase()}.svg`
-    : "default.png"; // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
+  const image = walletItem.code
+    ? `${walletItem.code.toLowerCase()}.svg`
+    : "default.png";
 
   return (
     <>
       <div
-        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 px-8 pt-9 pb-20`}
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
-        {/* <div className="w-[350px]"> */}
         <div className="wallet w-full flex justify-between items-start gap-3">
-          <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+          <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
             <img
               src={localImgLoad(`images/currency/${image}`)}
               className="w-full h-full"
-              alt="curreny-icon"
+              alt="currency-icon"
             />
           </div>
           <div className="balance w-full mt-2 flex justify-center">
             <div className="">
-              <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+              <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide mb-2 sm:mb-6">
                 Current Balance
               </p>
-              <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+              <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125">
                 {PriceFormatter(
                   walletItem.amount * 0.01,
                   walletItem.code,
@@ -61,9 +72,9 @@ export default function WalletItemCard({ walletItem, payment }) {
           </div>
         </div>
 
-        <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
+        <p className="text-lg text-white tracking-wide flex justify-center items-center gap-8">
           HOLDINGS :{" "}
-          <span className="mt-1">
+          <span className="xxs:scale-100 lg:scale-100 xl:scale-125">
             {PriceFormatter(
               walletItem.escrow * 0.01,
               walletItem.code,
@@ -72,18 +83,18 @@ export default function WalletItemCard({ walletItem, payment }) {
             )}
           </span>
         </p>
-        {/* for white underline */}
+
         <div className="my-2 w-full h-[1px] bg-white"></div>
 
-        {!accountType ? (
+        {!accountType && (
           <WalletAction
             walletItem={walletItem}
             payment={payment}
             openPopUp={openPopUp}
           />
-        ) : null}
-        {/* </div> */}
+        )}
       </div>
+
       {creditPopup.show && (
         <CreditPopup
           details={creditPopup.data}

src/components/Partials/Layout.jsx

@@ -55,59 +55,29 @@ export default function Layout({ children }) {
   return (
     <>
       <div className="nft-main-wrapper-layout">
-        <div className="nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex">
+        <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
           {/* sidebar */}
-          <div
-            className={`nft-sidebar xl:block hidden section-shadow ${
-              drawer
-                ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 "
-                : "w-[70px]"
-            } bg-white dark:bg-dark-white   h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}
-          >
-            <Sidebar
-              logoutModalHandler={logoutModalHandler}
-              sidebar={drawer}
-              action={() => dispatch(drawerToggle())}
-              myJobList={userJobList}
-            />
+          <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>
+            <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />
           </div>
           {MobileSideBar && (
-            <div
-              onClick={() => setMobileSidebar.toggle()}
-              className="bg-black bg-opacity-20 fixed left-0 top-0 w-full h-full z-[50] block xl:hidden"
-            ></div>
+            <div onClick={() => setMobileSidebar.toggle()} className="bg-black bg-opacity-20 fixed left-0 top-0 w-full h-full z-[50] block xl:hidden"></div>
           )}
-          <div
-            className={`nft-sidebar block xl:hidden section-shadow w-[280px] pl-3 bg-white dark:bg-dark-white   h-full overflow-y-scroll overflow-style-none fixed z-[60]  top-0 pt-8 ${
-              MobileSideBar ? "left-0" : "-left-[290px]"
-            }`}
-          >
-            <MobileSidebar
-              logoutModalHandler={logoutModalHandler}
-              sidebar={MobileSideBar}
-              action={() => setMobileSidebar.toggle()}
-              myJobList={userJobList}
-            />
+          <div className={`nft-sidebar block xl:hidden section-shadow w-[280px] pl-3 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>
+            <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />
           </div>
           {/* end sidebar */}
-          <div
-            className={`nft-header-container-wrapper flex-1 md:ml-10 ${
-              drawer ? "2xl:ml-[375px] xl:ml-[310px]" : "xl:ml-[110px]"
-            }  h-full`}
-          >
+          <div className={`nft-header-container-wrapper flex-1 md:ml-10 ${drawer ? "2xl:ml-[375px] xl:ml-[310px]" : "xl:ml-[110px]"} h-full`}>
             {/* header */}
-            <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967]  z-40 xl:sticky fixed top-0 left-0 ">
-              <Header
-                sidebarHandler={() => setMobileSidebar.toggle()}
-                logoutModalHandler={logoutModalHandler}
-              />
+            <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 ">
+              <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
             </div>
             {/* container */}
-            <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10">
-              <div className="nft-main-container flex-1">
+            <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
+              <div className="nft-main-container flex-[80%]">
                 {children && children}
               </div>
-              <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative">
+              <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
                 <RightSideBar />
               </div>
             </div>
@@ -121,50 +91,19 @@ export default function Layout({ children }) {
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                 Confirm
               </h1>
-              <button
-                type="button"
-                className="text-[#374557] dark:text-red-500"
-                onClick={logoutModalHandler}
-              >
-                <svg
-                  width="36"
-                  height="36"
-                  viewBox="0 0 36 36"
-                  fill="none"
-                  className="fill-current"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
-                    fill=""
-                    fillOpacity="0.6"
-                  />
-                  <path
-                    d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
-                    fill="#"
-                    fillOpacity="0.6"
-                  />
+              <button type="button" className="text-[#374557] dark:text-red-500" onClick={logoutModalHandler}>
+                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" className="fill-current" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z" fill="" fillOpacity="0.6" />
+                  <path d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z" fill="white" fillOpacity="0.6" />
                 </svg>
               </button>
             </div>
             <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
               <div className="what-icon mb-6 cursor-pointer">
-                <svg
-                  width="136"
-                  height="136"
-                  viewBox="0 0 136 136"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
+                <svg width="136" height="136" viewBox="0 0 136 136" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <circle cx="68" cy="68" r="68" fill="#4687ba" />
-                  <path
-                    d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M67.485 100.21C66.1617 99.9268 64.9041 99.5091 63.803 98.6787C61.3804 96.8484 60.2877 93.7699 61.0386 90.7888C61.7726 87.8747 64.2138 85.6703 67.2089 85.2157C71.273 84.6 75.2024 87.3681 75.8135 91.277C76.4937 95.6153 73.8202 99.3782 69.544 100.103C69.4429 100.12 69.3487 100.172 69.2527 100.209C68.6635 100.21 68.0742 100.21 67.485 100.21Z"
-                    fill="white"
-                  />
+                  <path d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z" fill="white" />
+                  <path d="M67.485 100.21C66.1617 99.9268 64.9041 99.5091 63.803 98.6787C61.3804 96.8484 60.2877 93.7699 61.0386 90.7888C61.7726 87.8747 64.2138 85.6703 67.2089 85.2157C71.273 84.6 75.2024 87.3681 75.8135 91.277C76.4937 95.6153 73.8202 99.3782 69.544 100.103C69.4429 100.12 69.3487 100.172 69.2527 100.209C68.6635 100.21 68.0742 100.21 67.485 100.21Z" fill="white" />
                 </svg>
               </div>
               <div className="mb-6">
@@ -173,18 +112,10 @@ export default function Layout({ children }) {
                 </p>
               </div>
               <div className="flex space-x-2.5">
-                <button
-                  onClick={logOut}
-                  type="button"
-                  className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-                >
+                <button onClick={logOut} type="button" className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full">
                   {`Yes ${process.env.REACT_APP_LOGOUT_TEXT}`}
                 </button>
-                <button
-                  onClick={logoutModalHandler}
-                  type="button"
-                  className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-                >
+                <button onClick={logoutModalHandler} type="button" className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full">
                   <span className="text-gradient">Not Now</span>
                 </button>
               </div>

src/components/Partials/RightSideBar.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { NavLink } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { NavLink } from "react-router-dom";
 //import SideStatistics from "./SideStatistics";
 
 export default function RightSideBar() {
@@ -35,8 +35,8 @@ export default function RightSideBar() {
 
   return (
     <>
-      <div className="right-sidebar-wrapper overflow-y-scroll overflow-style-none 2xl:fixed 2xl:grid-cols-none 2xl:block grid lg:grid-cols-2 grid-cols-1 xl:gap-7 gap-4 h-full 2xl:pb-96">
-        <div className="top-platform bg-white dark:bg-dark-white   rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none  border ">
+      <div className="right-sidebar-wrapper overflow-y-scroll overflow-style-none 2xl:fixed h-full 2xl:pb-96">
+        <div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none border ">
           {/* heading */}
           <div className="heading flex justify-between items-center mb-3.5">
             <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
@@ -47,31 +47,62 @@ export default function RightSideBar() {
 
           <div className="platform-list">
             {userDetails && userDetails?.account_type !== "FAMILY" && (
-                <>
-            <div className="item flex space-x-3 items-center mb-4">
-              {/* image */}
-              <div className="w-8 h-8 rounded-full">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="history">
-                  <g data-name="14"><circle cx="9" cy="14" r="7" fill="#ffd54f"></circle>
-                    <path fill="#ef6c00" d="M21 9H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zM21 5H3A1 1 0 0 1 3 3H21a1 1 0 0 1 0 2zM21 13H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 17H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 21H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"></path><path fill="#ff8f00" d="M10,10a1,1,0,0,0-2,0v3.59L6.29,15.29a1,1,0,1,0,1.41,1.41l2-2A1,1,0,0,0,10,14Z">
-                    </path>
-                  </g>
-                </svg>
-              </div>
-              {/* name */}
-              <div>
-                <p className="text-thin-light-gray text-base font-medium">
-                  <NavLink to="/history">History</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">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      id="history"
+                    >
+                      <g data-name="14">
+                        <circle cx="9" cy="14" r="7" fill="#ffd54f"></circle>
+                        <path
+                          fill="#ef6c00"
+                          d="M21 9H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zM21 5H3A1 1 0 0 1 3 3H21a1 1 0 0 1 0 2zM21 13H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 17H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 21H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"
+                        ></path>
+                        <path
+                          fill="#ff8f00"
+                          d="M10,10a1,1,0,0,0-2,0v3.59L6.29,15.29a1,1,0,1,0,1.41,1.41l2-2A1,1,0,0,0,10,14Z"
+                        ></path>
+                      </g>
+                    </svg>
+                  </div>
+                  {/* name */}
+                  <div>
+                    <p className="text-thin-light-gray text-base font-medium">
+                      <NavLink to="/history">History</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">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="add-user">
-                      <path fill="#9bcb5b" d="M12 13.4c-2 0-3.7-1.6-3.7-3.6s1.6-3.7 3.6-3.7 3.7 1.6 3.7 3.6-1.6 3.6-3.6 3.7zm0-6.2c-1.4 0-2.6 1.1-2.6 2.6 0 1.4 1.1 2.6 2.6 2.6s2.6-1.1 2.6-2.6c-.1-1.5-1.2-2.6-2.6-2.6z"></path><path fill="#9bcb5b" d="M16.6 17.9c-.3 0-.5-.2-.6-.5 0-2.2-1.8-4-4-4s-4 1.8-4 4c0 .3-.3.5-.6.5-.2 0-.4-.2-.5-.5 0-2.8 2.3-5.1 5.1-5.1s5.1 2.3 5.1 5.1c0 .3-.2.5-.5.5z"></path><path fill="#0376bc" d="M12 23.7C5.5 23.7.3 18.4.3 12 .3 5.5 5.6.3 12 .3c2.6 0 5.1.9 7.2 2.5.2.2.2.6 0 .8-.2.2-.4.2-.7.1-1.9-1.4-4.1-2.2-6.5-2.2C6.2 1.4 1.4 6.2 1.4 12S6.2 22.6 12 22.6 22.6 17.8 22.6 12c0-2.4-.8-4.6-2.2-6.5-.2-.3-.1-.6.2-.8.2-.1.5-.1.7.1 1.6 2 2.5 4.6 2.4 7.2 0 6.4-5.3 11.7-11.7 11.7z"></path><circle cx="20.2" cy="20.3" r="2.4" fill="#fff"></circle><path fill="#9bcb5b" d="M18 18.1c.6-.6 1.4-.9 2.2-.9.8 0 1.6.3 2.2.9s1 1.4.9 2.2c0 .8-.3 1.6-.9 2.2s-1.4 1-2.2.9c-.8 0-1.6-.3-2.2-.9s-1-1.4-.9-2.2c-.1-.8.3-1.7.9-2.2zm3.8 2.5V20h-1.3v-1.3h-.6V20h-1.3v.6h1.3v1.3h.6v-1.3h1.3z"></path>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      id="add-user"
+                    >
+                      <path
+                        fill="#9bcb5b"
+                        d="M12 13.4c-2 0-3.7-1.6-3.7-3.6s1.6-3.7 3.6-3.7 3.7 1.6 3.7 3.6-1.6 3.6-3.6 3.7zm0-6.2c-1.4 0-2.6 1.1-2.6 2.6 0 1.4 1.1 2.6 2.6 2.6s2.6-1.1 2.6-2.6c-.1-1.5-1.2-2.6-2.6-2.6z"
+                      ></path>
+                      <path
+                        fill="#9bcb5b"
+                        d="M16.6 17.9c-.3 0-.5-.2-.6-.5 0-2.2-1.8-4-4-4s-4 1.8-4 4c0 .3-.3.5-.6.5-.2 0-.4-.2-.5-.5 0-2.8 2.3-5.1 5.1-5.1s5.1 2.3 5.1 5.1c0 .3-.2.5-.5.5z"
+                      ></path>
+                      <path
+                        fill="#0376bc"
+                        d="M12 23.7C5.5 23.7.3 18.4.3 12 .3 5.5 5.6.3 12 .3c2.6 0 5.1.9 7.2 2.5.2.2.2.6 0 .8-.2.2-.4.2-.7.1-1.9-1.4-4.1-2.2-6.5-2.2C6.2 1.4 1.4 6.2 1.4 12S6.2 22.6 12 22.6 22.6 17.8 22.6 12c0-2.4-.8-4.6-2.2-6.5-.2-.3-.1-.6.2-.8.2-.1.5-.1.7.1 1.6 2 2.5 4.6 2.4 7.2 0 6.4-5.3 11.7-11.7 11.7z"
+                      ></path>
+                      <circle cx="20.2" cy="20.3" r="2.4" fill="#fff"></circle>
+                      <path
+                        fill="#9bcb5b"
+                        d="M18 18.1c.6-.6 1.4-.9 2.2-.9.8 0 1.6.3 2.2.9s1 1.4.9 2.2c0 .8-.3 1.6-.9 2.2s-1.4 1-2.2.9c-.8 0-1.6-.3-2.2-.9s-1-1.4-.9-2.2c-.1-.8.3-1.7.9-2.2zm3.8 2.5V20h-1.3v-1.3h-.6V20h-1.3v.6h1.3v1.3h.6v-1.3h1.3z"
+                      ></path>
                     </svg>
                   </div>
                   {/* name */}
@@ -81,16 +112,38 @@ export default function RightSideBar() {
                     </p>
                   </div>
                 </div>
-
               </>
             )}
 
             <div className="item flex space-x-3 items-center mb-4">
               {/* image */}
               <div className="w-8 h-8 rounded-full">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="InternationalUser">
-                    <path fill="#e6e7f9" d="M38.5 31.1c2.1-1.1 3.9-2.5 5.4-4.4h-3.2c-.6 1.6-1.3 3.1-2.2 4.4zm-5.8 1.4c2-.7 3.7-2.8 4.9-5.8h-4.9v5.8zm8.8-8.6h4.2c.9-1.8 1.5-3.7 1.7-5.8h-5.1c-.1 2-.4 4-.8 5.8zm2.4-17.3c-1.5-1.8-3.3-3.3-5.4-4.4.8 1.2 1.6 2.7 2.2 4.4h3.2zm-5.3 2.9h-5.9v5.8h6.7c-.1-2.1-.4-4.1-.8-5.8zm3.7 5.8h5.1c-.2-2.1-.8-4-1.7-5.8h-4.2c.4 1.8.7 3.7.8 5.8zM32.7.8v5.8h4.9c-1.2-2.9-2.9-5.1-4.9-5.8zm6.7 17.3h-6.7v5.8h5.9c.4-1.8.7-3.8.8-5.8zM25 6.6h4.9V.8c-2 .7-3.7 2.9-4.9 5.8zm-1.8 8.7h6.7V9.5H24c-.4 1.7-.7 3.7-.8 5.8zm6.7 17.2v-5.8H25c1.2 3 2.9 5.1 4.9 5.8zM24.1 2.3c-2.1 1.1-3.9 2.5-5.4 4.4H22c.5-1.7 1.3-3.2 2.1-4.4zM24 23.9h5.9v-5.8h-6.7c.1 2 .4 4 .8 5.8z" className="colorc1e5ff svgShape"></path><path fill="#ff6699" d="M3.7 44.7c0 1.6 1.2 2.8 2.8 2.8 1.3 0 2.4-.9 2.7-2.2.3 1.3 1.4 2.2 2.7 2.2 1.5 0 2.8-1.3 2.8-2.8V30.1h3.1V18.8c0-4.2-3.3-7.5-7.4-7.5H8c-4.1 0-7.4 3.4-7.4 7.5v11.3h3.1v14.6z" className="colorff99b0 svgShape"></path><path fill="#998da0" d="M9.2 10.3c2.4 0 4.4-2.2 4.4-4.9S11.6.5 9.2.5C6.8.5 4.8 2.7 4.8 5.4s2 4.9 4.4 4.9z" className="colorffd499 svgShape"></path><path fill="#e6e7f9" d="M16.9 9.5c-.3.6-.5 1.2-.8 1.8 1.3 1 2.3 2.4 2.9 4h1.3c.1-2 .3-4 .8-5.8h-4.2zm2.9 9.3v5.1h1.4c-.4-1.8-.7-3.8-.8-5.8h-.6c-.1.2 0 .4 0 .7zm2.2 7.9h-2.2v1.2c1.3 1.3 2.7 2.4 4.4 3.2-.9-1.3-1.7-2.8-2.2-4.4z" className="colorc1e5ff svgShape"></path>
-                  </svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 48 48"
+                  id="InternationalUser"
+                >
+                  <path
+                    fill="#e6e7f9"
+                    d="M38.5 31.1c2.1-1.1 3.9-2.5 5.4-4.4h-3.2c-.6 1.6-1.3 3.1-2.2 4.4zm-5.8 1.4c2-.7 3.7-2.8 4.9-5.8h-4.9v5.8zm8.8-8.6h4.2c.9-1.8 1.5-3.7 1.7-5.8h-5.1c-.1 2-.4 4-.8 5.8zm2.4-17.3c-1.5-1.8-3.3-3.3-5.4-4.4.8 1.2 1.6 2.7 2.2 4.4h3.2zm-5.3 2.9h-5.9v5.8h6.7c-.1-2.1-.4-4.1-.8-5.8zm3.7 5.8h5.1c-.2-2.1-.8-4-1.7-5.8h-4.2c.4 1.8.7 3.7.8 5.8zM32.7.8v5.8h4.9c-1.2-2.9-2.9-5.1-4.9-5.8zm6.7 17.3h-6.7v5.8h5.9c.4-1.8.7-3.8.8-5.8zM25 6.6h4.9V.8c-2 .7-3.7 2.9-4.9 5.8zm-1.8 8.7h6.7V9.5H24c-.4 1.7-.7 3.7-.8 5.8zm6.7 17.2v-5.8H25c1.2 3 2.9 5.1 4.9 5.8zM24.1 2.3c-2.1 1.1-3.9 2.5-5.4 4.4H22c.5-1.7 1.3-3.2 2.1-4.4zM24 23.9h5.9v-5.8h-6.7c.1 2 .4 4 .8 5.8z"
+                    className="colorc1e5ff svgShape"
+                  ></path>
+                  <path
+                    fill="#ff6699"
+                    d="M3.7 44.7c0 1.6 1.2 2.8 2.8 2.8 1.3 0 2.4-.9 2.7-2.2.3 1.3 1.4 2.2 2.7 2.2 1.5 0 2.8-1.3 2.8-2.8V30.1h3.1V18.8c0-4.2-3.3-7.5-7.4-7.5H8c-4.1 0-7.4 3.4-7.4 7.5v11.3h3.1v14.6z"
+                    className="colorff99b0 svgShape"
+                  ></path>
+                  <path
+                    fill="#998da0"
+                    d="M9.2 10.3c2.4 0 4.4-2.2 4.4-4.9S11.6.5 9.2.5C6.8.5 4.8 2.7 4.8 5.4s2 4.9 4.4 4.9z"
+                    className="colorffd499 svgShape"
+                  ></path>
+                  <path
+                    fill="#e6e7f9"
+                    d="M16.9 9.5c-.3.6-.5 1.2-.8 1.8 1.3 1 2.3 2.4 2.9 4h1.3c.1-2 .3-4 .8-5.8h-4.2zm2.9 9.3v5.1h1.4c-.4-1.8-.7-3.8-.8-5.8h-.6c-.1.2 0 .4 0 .7zm2.2 7.9h-2.2v1.2c1.3 1.3 2.7 2.4 4.4 3.2-.9-1.3-1.7-2.8-2.2-4.4z"
+                    className="colorc1e5ff svgShape"
+                  ></path>
+                </svg>
               </div>
               {/* name */}
               <div>
@@ -99,7 +152,6 @@ export default function RightSideBar() {
                 </p>
               </div>
             </div>
-
           </div>
         </div>
         {/*<SideStatistics />*/}

src/components/jobPopout/JobListPopout.jsx

@@ -225,7 +225,7 @@ function JobListPopout({ details, onClose, situation }) {
             <div className="my-3 md:flex">
               <Detail
                 label="Created"
-                value={new Date(details?.created).toDateString()}//{`Dummy, no value found for created!`}
+                value={new Date(details?.created).toDateString()}
                 />
             </div>
 
@@ -234,8 +234,8 @@ function JobListPopout({ details, onClose, situation }) {
                 Delivery Detail
               </label>
               <textarea
-                className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
-                rows="5"
+                className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+                rows="7"
                 style={{ resize: "none" }}
                 value={textArea}
                 onChange={handleInputChange}