notification bug fixed

src/components/Blogs/index.jsx

@@ -31,7 +31,7 @@ export default function BlogItem(props) {
                         </div>
                     </div>
                    <div>
-                       Blog Items Details
+                       Blog Items Details need implenet
                    </div>
                 </div>
             </div>

src/components/History/index.jsx

@@ -217,22 +217,22 @@ export default function History() {
             {/* <TopHxBox className="mb-11" /> */}
             <div className='w-full p-4 md:p-8 bg-white dark:bg-dark-white rounded-2xl shadow bottomMargin'>
                 {/* switch button */}
-                <div className="my-1 flex items-center border-b border-slate-300">
+                <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
                     <button
                     name="purchases"
                     onClick={(e) => setTab(e.target.name)}
-                    className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                        tab == "purchases" ? "border-sky-blue" : "border-slate-300"
-                    } tracking-wide transition duration-200`}
+                    className={`px-4 py-1 rounded-t-2xl ${
+                        tab == "purchases" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                      }`}
                     >
                     Purchases
                     </button>
                     <button
                     name="recent"
                     onClick={(e) => setTab(e.target.name)}
-                    className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                        tab == "recent" ? "border-sky-blue" : "border-slate-300"
-                    }  tracking-wide transition duration-200`}
+                    className={`px-4 py-1 rounded-t-2xl ${
+                        tab == "recent" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                      }`}
                     >
                     Recent Activity
                     </button>

src/components/MyActiveJobs/ActiveJobMessage.jsx

@@ -9,59 +9,61 @@ import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 
 export default function ActiveJobMessage({ activeJobMesList }) {
-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentActiveJobMesList = activeJobMesList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+    // const [currentPage, setCurrentPage] = useState(0);
+    // const indexOfFirstItem = Number(currentPage);
+    // const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    // const currentActiveJobMesList = activeJobMesList?.data?.slice(indexOfFirstItem, indexOfLastItem);
   
-    const handlePagination = (e) => {
-      handlePagingFunc(e,setCurrentPage)
-    }
+    // const handlePagination = (e) => {
+    //   handlePagingFunc(e,setCurrentPage)
+    // }
 
   return (
-    <div className='flex flex-col justify-between h-full'>
-    <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='border-b-2'>
-            <tr className='text-slate-600'>
-            <th className="p-2"></th>
-            </tr>
-        </thead>
-        {activeJobMesList.data.length ?
-        (
-        <tbody>
-            {currentActiveJobMesList.map((item, index) => (
-            <tr key={index} className='text-slate-500'>
-                <td>
-                    <div className="msg_box">
-                        <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
-                        <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
-                    </div>
+    <div className='flex flex-col justify-between'>
+    <div className="w-full min-h-[450px] max-h-[450px] overflow-y-scroll">
+        <table className="wallet-activity w-full table-auto border-collapse text-left">
+            <thead className='border-b-2'>
+                <tr className='text-slate-600'>
+                <th className="p-2"></th>
+                </tr>
+            </thead>
+            {activeJobMesList?.data?.length ?
+            (
+            <tbody>
+                {activeJobMesList.data.map((item, index) => (
+                <tr key={index} className='text-slate-500'>
+                    <td>
+                        <div className={`msg_box ${item.who}`}>
+                            <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
+                            <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
+                        </div>
 
-                </td>
-            </tr>
-            ))}
-        </tbody>
-        )
-        :
-        activeJobMesList.error ? 
-        (
-        <tbody>
-            <tr className='text-slate-500'>
-                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
-            </tr>
-        </tbody>
-        )
-        :
-        <tbody>
-            <tr className='text-slate-500'>
-                <td className="p-2" colSpan={4}>No Message Found!</td>
-            </tr>
-        </tbody>
-        }
-    </table>
+                    </td>
+                </tr>
+                ))}
+            </tbody>
+            )
+            :
+            activeJobMesList.error ? 
+            (
+            <tbody>
+                <tr className='text-slate-500'>
+                    <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+                </tr>
+            </tbody>
+            )
+            :
+            <tbody>
+                <tr className='text-slate-500'>
+                    <td className="p-2" colSpan={4}>No Message Found!</td>
+                </tr>
+            </tbody>
+            }
+        </table>
+    </div>
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= activeJobMesList?.data?.length ? true : false} data={activeJobMesList?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    {/* <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= activeJobMesList?.data?.length ? true : false} data={activeJobMesList?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> */}
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -353,7 +353,7 @@ function ActiveJobs(props) {
       </div>
 
       <div className="my-4 py-[20px] bg-white dark:bg-black px-4 rounded-2xl shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
-        <div className="w-full lg:w-1/2">
+        <div className="w-full lg:w-1/2 mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
           <div className="">
             <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
               Actions
@@ -367,23 +367,25 @@ function ActiveJobs(props) {
           {/* TEXTAREA SECTION */}
           <div className="mt-5">
             <div className="">
-              {/* <p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p> */}
-              <div className="my-2 flex items-center border-b border-slate-300">
+              <div 
+                className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3"
+                // className='ml-7 flex justify-start items-center gap-3'
+                >
                 <button
                   name="message"
                   onClick={(e) => setTab(e.target.name)}
-                  className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                    tab == "message" ? "border-sky-blue" : "border-slate-300"
-                  } tracking-wide transition duration-200`}
+                  className={`px-4 py-1 rounded-t-2xl ${
+                    tab == "message" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                  }`}
                 >
                   Send Message
                 </button>
                 <button
                   name="files"
                   onClick={(e) => setTab(e.target.name)}
-                  className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                    tab == "files" ? "border-sky-blue" : "border-slate-300"
-                  }  tracking-wide transition duration-200`}
+                  className={`px-4 py-1 rounded-t-2xl ${
+                    tab == "files" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                  }`}
                 >
                   Send Files
                 </button>
@@ -457,7 +459,7 @@ function ActiveJobs(props) {
 
             {/* Buttons Sections */}
             <div className="py-2 sm:flex sm:justify-end sm:items-center">
-              <div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
+              <div className="w-full sm:w-3/4 flex justify-between items-center space-x-2">
                 <button
                   type="button"
                   onClick={handleClearAll}

src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx

@@ -4,15 +4,15 @@ function CurrentJobAction() {
   return (
     <div className='job-action  dark:bg-black'>
       <p className="my-3 py-1 text-base active-owner">
-          <table className="w-full text-sm text-left text-gray-500">
+          <table className="w-full text-sm text-left text-gray-500 ">
               <tbody>
               <tr>
                   <td>
-                      <div className="flex space-x-2 items-center w-full">
+                      <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                              <h1 className="text-xl text-dark-gray dark:text-white">
+                              <div>
                                   Waiting for the completion message from the client before you can approve.
-                              </h1>
+                              </div>
                               {/*<div className="flex flex-col flex-[0.9]">  </div>*/}
                       </div>
                   </td>

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -62,14 +62,14 @@ function CurrentTaskAction({jobDetails}) {
   return (
     <div className='job-action  dark:bg-black'>
 
-          <table className="w-full text-sm text-left text-gray-500 active-worker">
+          <table className="w-full text-sm text-left text-gray-500 active-worker ">
               <tbody>
               <tr>
                   <td>
-                      <div className="flex space-x-2 items-center w-full">
-                          <h1 className="text-xl text-dark-gray dark:text-white">
+                      <div className="flex space-x-2 items-center w-full task_action_panel">
+                          <div>
                               I completed this task and ready for review and acceptance.
-                          </h1>
+                          </div>
                           {/*<div className="flex flex-col flex-[0.9]">*/}
 
                           {/*</div>*/}

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -107,19 +107,18 @@ function PastDueJobAction({jobDetails}) {
             <tbody>
             <tr>
                 <td>
-                    <div className="flex space-x-2 items-center w-full">
+                    <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                            <h1 className="text-xl text-dark-gray dark:text-white">
+                            <div className="dark:text-red-700">
                                 Time allocated has passed
-                            </h1>
-                            {/*<div className="flex flex-col flex-[0.9]">  </div>*/}
+                            </div>
                     </div>
                 </td>
             </tr>
             <tr>
                 <td>
                     <div className="flex justify-center items-center">
-                        <button type="button" onClick={popUpHandler} className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                        <button type="button" onClick={popUpHandler} className="w-[180px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
                             Cancel or Extend Timeline
                         </button>
                     </div>

src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx

@@ -8,11 +8,11 @@ function PastDueTaskAction() {
             <tbody>
             <tr>
                 <td>
-                    <div className="flex space-x-2 items-center w-full">
+                    <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                            <h1 className="text-xl text-dark-gray dark:text-white">
+                            <div>
                                 You have missed the allocated time
-                            </h1>
+                            </div>
                             {/*<div className="flex flex-col flex-[0.9]"> </div>*/}
                     </div>
                 </td>

src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx

@@ -96,11 +96,11 @@ function ReviewJobAction({jobDetails}) {
               <tbody>
               <tr>
                   <td>
-                      <div className="flex space-x-2 items-center w-full">
+                      <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                              <h1 className="text-xl text-dark-gray dark:text-white">
+                              <div>
                                   This Job is Ready for your review
-                              </h1>
+                              </div>
                               {/*<div className="flex flex-col flex-[0.9]"> </div>*/}
                       </div>
                   </td>

src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 function ReviewTaskAction() {
   return (
-    <div className='job-action  dark:bg-black'>
+    <div className='job-action  dark:bg-black task_action_panel'>
       <p className="my-3 py-1 text-base text-dark-gray dark:text-white">
         Waiting for the completion message from the client before you can approve. Worker True & Review Job
       </p>

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import usersService from "../../services/UsersService";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 import { Form, Formik } from "formik";
 import { useSelector } from "react-redux";
 import * as Yup from "yup";
-import Icons from "../Helpers/Icons";
+import Icons from "../../Helpers/Icons";
 
 const validationSchema = Yup.object().shape({
   name: Yup.string()
@@ -65,7 +65,8 @@ function AddFundDollars(props) {
   const { firstname, lastname } = userDetails;
   const [prevCardDetails, setPrevCardDetails] = useState({});
   const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
-
+  let __awaitComponent = props.confirmCredit.show.awaitConfirm;
+  let __acceptComponent = props.confirmCredit.show.awaitConfirm;
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     setPrevCardDetails((prevState) => ({
@@ -84,6 +85,7 @@ function AddFundDollars(props) {
 
   const handleSubmit = async (values, helpers) => {
     props.setInputError("");
+
     if (!props.input || props.input === "0") {
       props.setInputError("Please Enter Amount");
       return;
@@ -98,7 +100,12 @@ function AddFundDollars(props) {
       if (!prevCardDetails) {
         return;
       }
-      setLoader(true);
+
+      props.setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: true } },
+      }));
+
       let stateData = {
         amount: Number(props.input) * 100,
         currency: props.walletItem?.code,
@@ -107,7 +114,10 @@ function AddFundDollars(props) {
       try {
         const res = await apiCall.getStartCredit(stateData);
         if (res.data.internal_return < 0) {
-          setLoader(false);
+          props.setConfirmCredit((prev) => ({
+            ...prev,
+            show: { awaitConfirm: { loader: false } },
+          }));
           props.setInputError("An Error Occurred");
           setTimeout(() => props.setInputError(""), 5000);
           return;
@@ -120,20 +130,21 @@ function AddFundDollars(props) {
         stateData = { ...stateData, ..._response };
 
         setTimeout(() => {
-          setLoader(false);
           props.setConfirmCredit({
-            show: true,
+            show: {
+              awaitConfirm: { loader: false, state: true },
+              acceptConfirm: { loader: false, state: false },
+            },
             data: stateData,
           });
         }, 1500);
       } catch (error) {
+        props.setConfirmCredit((prev) => ({
+          ...prev,
+          show: { awaitConfirm: { loader: false } },
+        }));
         console.log(error);
       }
-
-      return setTimeout(() => {
-        props.setConfirmCredit({ show: true, data: stateData });
-        setLoader(false);
-      }, 1500);
     }
 
     if (tab === "new") {
@@ -142,6 +153,8 @@ function AddFundDollars(props) {
         currency: props.currency,
         ...values,
       };
+
+      // Rest of the code for tab "new"
     }
   };
 
@@ -501,7 +514,7 @@ function AddFundDollars(props) {
             type="button"
             className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
           >
-            {loader ? (
+            {props.confirmCredit?.show?.awaitConfirm?.loader ? (
               <LoadingSpinner size="6" color="sky-blue" />
             ) : (
               <span className="text-white">Continue</span>

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import usersService from "../../services/UsersService";
-import Icons from "../Helpers/Icons";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+import usersService from "../../../services/UsersService";
+import Icons from "../../Helpers/Icons";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AddFundDollars from "./AddFundDollars";
 
 function AddFundPop({
@@ -11,6 +11,7 @@ function AddFundPop({
   input,
   setInput,
   onClose,
+  confirmCredit,
   setConfirmCredit,
   walletItem,
 }) {
@@ -20,7 +21,7 @@ function AddFundPop({
   const { payment, currency } = _payment;
 
   const [inputError, setInputError] = useState("");
-  const [loader, setLoader] = useState(false);
+  let __awaitComponent = confirmCredit.show.awaitConfirm;
 
   const handleChange = ({ target: { name, value } }) => {
     setInput(value);
@@ -28,17 +29,26 @@ function AddFundPop({
 
   const handleSubmit = async () => {
     setInputError("");
-    setLoader(true);
+    setConfirmCredit((prev) => ({
+      ...prev,
+      show: { awaitConfirm: { loader: true } },
+    }));
 
     if (!input || input === "0") {
-      setLoader(false);
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: false } },
+      }));
       setInputError("Please Enter Amount");
       setTimeout(() => setInputError(""), 5000);
       return;
     }
 
     if (isNaN(input)) {
-      setLoader(false);
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: false } },
+      }));
       setInputError("Amount must be a Number");
       setTimeout(() => setInputError(""), 5000);
       return;
@@ -52,7 +62,10 @@ function AddFundPop({
     try {
       const res = await apiCall.getStartCredit(stateData);
       if (res.data.internal_return < 0) {
-        setLoader(false);
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: { awaitConfirm: { loader: false } },
+        }));
         setInputError("An Error Occurred");
         setTimeout(() => setInputError(""), 5000);
         return;
@@ -64,13 +77,20 @@ function AddFundPop({
       stateData = { ...stateData, ..._response };
 
       setTimeout(() => {
-        setLoader(false);
-        setConfirmCredit({
-          show: true,
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            awaitConfirm: { loader: false, state: true },
+            acceptConfirm: { loader: false, state: false },
+          },
           data: stateData,
-        });
+        }));
       }, 1500);
     } catch (error) {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: false } },
+      }));
       console.log(error);
     }
   };
@@ -108,6 +128,7 @@ function AddFundPop({
                   setInput={setInput}
                   currency={currency}
                   onClose={onClose}
+                  confirmCredit={confirmCredit}
                   setConfirmCredit={setConfirmCredit}
                 />
               </div>
@@ -128,7 +149,7 @@ function AddFundPop({
                   type="button"
                   className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
                 >
-                  {loader ? (
+                  {__awaitComponent.loader ? (
                     <LoadingSpinner size="6" color="sky-blue" />
                   ) : (
                     <>

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -0,0 +1,106 @@
+import React from "react";
+
+function CompleteConfirmCredit({ onClose, confirmCredit }) {
+  console.log(confirmCredit);
+  const { data } = confirmCredit;
+  return (
+    <div className="logout-modal-body w-full flex flex-col items-center">
+      <div className="content-wrapper w-full h-[32rem]">
+        <div className="w-full mb-10">
+          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
+            <div className="px-4 md:p-8 py-4 add-fund-info">
+              <div className="field w-full mb-3 min-h-[45px]">
+                <div className="flex flex-col gap-4">
+                  {/* Success Icon for now */}
+                  <div className="flex items-center w-full justify-center">
+                    {data?.result == "Charge success" ? (
+                      <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>
+                    )}
+                  </div>
+
+                  <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"
+                        ? "Credit was Successful!"
+                        : "Credit was Unsuccessful"}
+                    </h1>
+                  </div>
+
+                  <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">
+                      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>
+            <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+              <button
+                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full w-[100px]"
+                onClick={onClose}
+              >
+                Ok
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CompleteConfirmCredit;

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -1,13 +1,17 @@
+import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
+import usersService from "../../../services/UsersService";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-import usersService from "../../services/UsersService";
-
-import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
-
-function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
+function ConfirmAddFund({
+  confirmCredit,
+  onClose,
+  walletItem,
+  setConfirmCredit,
+}) {
   const __confirmData = confirmCredit?.data;
   const __confirmCountry = walletItem?.country;
   const __confirmCardDetails = __confirmData.card
@@ -15,8 +19,6 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     : "";
   let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
 
-  let [confirmLoading, setConfirmLoading] = useState(false);
-
   let [requestStatus, setRequestStatus] = useState({
     message: "",
     loading: false,
@@ -29,7 +31,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   //FUNCTION TO HANDLE SUBMIT
   const onSuccessPayment = () => {
     setRequestStatus({ message: "", loading: true, status: false });
-    let reqData = { amount: confirmCredit?.data?.account, currency: "NGN" };
+    let reqData = { amount: __confirmData?.account, currency: "NGN" };
     apiURL
       .startTopUp(reqData)
       .then((res) => {
@@ -66,7 +68,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   const config = {
     public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
     tx_ref: Date.now(),
-    amount: confirmCredit?.data?.amount,
+    amount: __confirmData?.amount,
     currency: "NGN",
     payment_options: "card,mobilemoney,ussd",
     customer: {
@@ -91,24 +93,58 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     onClose: () => {},
   };
 
+  // Handling Previous Card
   const handlePrevCard = async () => {
-    setConfirmLoading(true);
-    let reqData = {
-      amount: __confirmData.amount * 100,
-      card_uid: __confirmCardDetails.card_uid,
-      credit_reference: __confirmData.credit_reference,
-      currency: __confirmData.currency,
+    const { amount, credit_reference, currency } = __confirmData;
+    const { card_uid } = __confirmCardDetails;
+
+    const reqData = {
+      amount: amount * 100,
+      card_uid,
+      credit_reference,
+      currency,
     };
 
     try {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: {
+          acceptConfirm: { loader: true },
+        },
+      }));
       const res = await apiURL.getPaidPrevCard(reqData);
-      setConfirmLoading(false);
-      console.log(res.data);
+      const _response = res.data;
+      if (res.data.internal_return < 0) {
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            acceptConfirm: { loader: false },
+          },
+        }));
+        return;
+      }
+
+      return setTimeout(
+        () =>
+          setConfirmCredit((prev) => ({
+            ...prev,
+            show: {
+              awaitConfirm: { loader: false, state: false },
+              acceptConfirm: { loader: false, state: true },
+            },
+            data: _response,
+          })),
+        1500
+      );
     } catch (error) {
-      setConfirmLoading(false);
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: {
+          acceptConfirm: { loader: false },
+        },
+      }));
       console.log(error);
     }
-    console.log("Test me");
   };
 
   const ThePaymentText = ({ value }) => (
@@ -124,16 +160,15 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     </div>
   );
 
-  console.log(confirmCredit);
-
   return (
     <div className="content-wrapper w-full h-[32rem]">
       <div className="w-full mb-10">
         <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
           <div className="px-4 md:p-8 py-4 add-fund-info">
             <div className="field w-full mb-3 min-h-[45px]">
-              {confirmCredit?.show ? (
-                <div className="flex flex-col gap-4">
+              {confirmCredit?.show?.awaitConfirm?.state ? (
+                <div className="flex flex-col gap-2">
+                  {/* Amount */}
                   <div
                     className={`flex items-center ${
                       __confirmCountry == "US" ? "gap-14" : "gap-4"
@@ -148,6 +183,40 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                       }`}
                     </span>
                   </div>
+                  {/* Transaction Fee */}
+                  <div
+                    className={`flex items-center border-b border-gray-600 ${
+                      __confirmCountry == "US" ? "gap-[2.7rem]" : "gap-4"
+                    }`}
+                  >
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Transaction Fee
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {`${walletItem?.symbol} ${
+                        Number(__confirmData?.fee).toLocaleString() || ""
+                      }`}
+                    </span>
+                  </div>
+                  {/* Total */}
+                  <div
+                    className={`flex items-center ${
+                      __confirmCountry == "US" ? "gap-[8rem]" : "gap-4"
+                    }`}
+                  >
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Total
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {`${walletItem?.symbol} ${
+                        (
+                          Number(__confirmData?.amount) +
+                          Number(__confirmData?.fee)
+                        ).toLocaleString() || ""
+                      }`}
+                    </span>
+                  </div>
+
                   {__confirmCountry == "US" && (
                     <div className="flex items-center gap-8">
                       <label
@@ -180,12 +249,13 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
               ) : null}
             </div>
           </div>
-          {/* <hr /> */}
+
           <div
             className={
-              __confirmCountry == "US" ? "min-h-[163px]" : "min-h-[200px]"
+              __confirmCountry == "US" ? "min-h-[96px]" : "min-h-[200px]"
             }
           ></div>
+          <hr />
           <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
             <button
               className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
@@ -202,7 +272,11 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                     : () => console.log("Test me")
                 }
               >
-                Proceed
+                {confirmCredit?.show?.acceptConfirm?.loader ? (
+                  <LoadingSpinner size="6" color="sky-blue" />
+                ) : (
+                  "Proceed"
+                )}
               </button>
             )}
             {__confirmCountry == "NG" && (
@@ -214,20 +288,6 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
           </div>
         </div>
       </div>
-
-      {/* <div className="w-full mb-10">
-        <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
-          <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
-            Recent Activity
-          </h2>
-          <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
-          {payment.loading ? (
-            <LoadingSpinner size="16" color="sky-blue" />
-          ) : (
-            <RecentActivityTable payment={payment} />
-          )}
-        </div>
-      </div> */}
     </div>
   );
 }

src/components/MyWallet/Popup/ConfirmTransfer.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import RecentActivityTable from "./WalletComponent/RecentActivityTable";
 
 import usersService from "../../services/UsersService";

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -1,39 +1,20 @@
 import { useState } from "react";
-import { useLocation } from "react-router-dom";
-import usersService from "../../../services/UsersService";
 import ModalCom from "../../Helpers/ModalCom";
-import AddFundPop from "../AddFundPop";
-import ConfirmAddFund from "../ConfirmAddFund";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import AddFundPop from "./AddFundPop";
+import CompleteConfirmCredit from "./CompleteConfirmCredit";
+import ConfirmAddFund from "./ConfirmAddFund";
 
 const CreditPopup = ({ details, onClose, situation, walletItem }) => {
-  const { pathname, state } = useLocation();
-  const [submitTask, setSubmitTask] = useState({
-    loading: false,
-    msg: "",
-    state: "",
-  });
-  const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
   let [input, setInput] = useState("");
   const [confirmCredit, setConfirmCredit] = useState({
-    show: false,
+    show: {
+      awaitConfirm: { loader: false, state: false },
+      acceptConfirm: { loader: false, state: false },
+    },
     data: {},
   });
 
-  const switchNextStep = ({ target: value }) => {
-    setSuggestedNextStep(value);
-  };
-
-  const apiCall = new usersService();
-
-  const handleParentSuggestion = (values) => {
-    if (suggestedNextStep == "Send Task") {
-      let firstName = state?.firstname;
-      let family_uid = state?.family_uid;
-      //   continuePopupData({ ...details, firstName, family_uid });
-    }
-    onClose();
-  };
-
   return (
     <ModalCom
       action={onClose}
@@ -43,7 +24,13 @@ 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 ? "Add Credit" : "Confirm Credit Add"}
+            {confirmCredit?.show?.acceptConfirm?.loader
+              ? "Confirming Credit..."
+              : confirmCredit?.show?.awaitConfirm?.state
+              ? "Confirm Credit Add"
+              : confirmCredit?.show?.acceptConfirm?.state
+              ? "Credit Add Completed"
+              : "Add Credit"}
           </h1>
           <button
             type="button"
@@ -72,22 +59,37 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center">
-          {confirmCredit.show ? (
-            <ConfirmAddFund
-              confirmCredit={confirmCredit}
-              walletItem={walletItem}
-              onClose={onClose}
-            />
+          {confirmCredit?.show?.acceptConfirm?.loader ? (
+            <div className="h-[32rem] flex items-center justify-center">
+              <LoadingSpinner size="12" color="sky-blue" />
+            </div>
           ) : (
-            <AddFundPop
-              _payment={details}
-              walletItem={walletItem}
-              input={input}
-              setInput={setInput}
-              onClose={onClose}
-              confirmCredit={confirmCredit}
-              setConfirmCredit={setConfirmCredit}
-            />
+            <>
+              {confirmCredit?.show?.awaitConfirm?.state ? (
+                <ConfirmAddFund
+                  confirmCredit={confirmCredit}
+                  setConfirmCredit={setConfirmCredit}
+                  walletItem={walletItem}
+                  onClose={onClose}
+                />
+              ) : confirmCredit?.show?.acceptConfirm?.state ? (
+                <CompleteConfirmCredit
+                  walletItem={walletItem}
+                  confirmCredit={confirmCredit}
+                  onClose={onClose}
+                />
+              ) : (
+                <AddFundPop
+                  _payment={details}
+                  walletItem={walletItem}
+                  input={input}
+                  setInput={setInput}
+                  onClose={onClose}
+                  confirmCredit={confirmCredit}
+                  setConfirmCredit={setConfirmCredit}
+                />
+              )}
+            </>
           )}
         </div>
       </div>

src/components/MyWallet/Popup/TransferFund.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+// import RecentActivityTable
 
-import usersService from "../../services/UsersService";
+import usersService from "../../../services/UsersService";
 
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
@@ -326,7 +326,8 @@ function TransferFund({ payment, wallet }) {
           {payment.loading ? (
             <LoadingSpinner size="16" color="sky-blue" />
           ) : (
-            <RecentActivityTable payment={payment} />
+            // <RecentActivityTable payment={payment} />
+            null
           )}
         </div>
       </div>

src/components/MyWallet/Wallet.jsx

@@ -11,12 +11,12 @@ import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-const AddFund = lazy(() => import("./AddFund"));
-const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
-const TransferFund = lazy(() => import("./TransferFund"));
+// const AddFund = lazy(() => import("./AddFund"));
+// const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
+// const TransferFund = lazy(() => import("./TransferFund"));
 const WalletBox = lazy(() => import("./WalletBox"));
-const AddRecipient = lazy(() => import("./AddRecipient"));
-const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
+// const AddRecipient = lazy(() => import("./AddRecipient"));
+// const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
 
 function Wallet() {
   return (
@@ -119,31 +119,6 @@ const WalletRoutes = () => {
           </Suspense>
         }
       >
-        {/* <Route
-          path="add-fund"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <AddFund payment={paymentHistory} />
-            </Suspense>
-          }
-        />
-        <Route
-          path="add-fund/confirm-add-fund"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <ConfirmAddFund payment={paymentHistory} />
-            </Suspense>
-          }
-        /> */}
-        <Route
-          path="transfer-fund"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <TransferFund payment={paymentHistory} wallet={walletList} />
-            </Suspense>
-          }
-        />
-        {/*<Route index element={<Balance wallet={walletList} />} />*/}
         <Route
           index
           element={
@@ -152,22 +127,6 @@ const WalletRoutes = () => {
             </Suspense>
           }
         />
-        <Route
-          path="transfer-fund/add-recipient"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <AddRecipient />
-            </Suspense>
-          }
-        />
-        <Route
-          path="transfer-fund/confirm-transfer"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <ConfirmTransfer payment={paymentHistory} wallet={walletList} />
-            </Suspense>
-          }
-        />
         <Route path="*" element={<Navigate to="/" />} />
       </Route>
     </Routes>

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -18,7 +18,7 @@ function RecentActivityTable({ payment }) {
   };
 
   return (
-    <div className="flex flex-col justify-between overflow-y-auto">
+    <div className="flex flex-col justify-between min-h-[500px]">
       <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className="border-b-2">
           <tr className="text-slate-600">

src/components/MyWallet/WalletItemCard.jsx

@@ -16,7 +16,6 @@ export default function WalletItemCard({ walletItem, payment }) {
 
   //   Credit popup
   const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
-
   const openPopUp = (value) => {
     setCreditPopup({
       show: true,
@@ -41,47 +40,52 @@ export default function WalletItemCard({ walletItem, payment }) {
         }}
       >
         {/* <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">
-              <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-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">
-                  Current Balance
-                </p>
-                <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-                  {PriceFormatter(
-                    walletItem.amount * 0.01,
-                    walletItem.code,
-                    undefined,
-                    "text-[2rem]"
-                  )}
-                </p>
-              </div>
+        <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">
+            <img
+              src={localImgLoad(`images/currency/${image}`)}
+              className="w-full h-full"
+              alt="curreny-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">
+                Current Balance
+              </p>
+              <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+                {PriceFormatter(
+                  walletItem.amount * 0.01,
+                  walletItem.code,
+                  undefined,
+                  "text-[2rem]"
+                )}
+              </p>
             </div>
           </div>
+        </div>
 
-          <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
-            HOLDINGS :{" "}
-            <span className="mt-1">
-              {PriceFormatter(
-                walletItem.escrow * 0.01,
-                walletItem.code,
-                undefined,
-                "text-[2rem]"
-              )}
-            </span>
-          </p>
-          {/* for white underline */}
-          <div className="my-2 w-full h-[1px] bg-white"></div> 
+        <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
+          HOLDINGS :{" "}
+          <span className="mt-1">
+            {PriceFormatter(
+              walletItem.escrow * 0.01,
+              walletItem.code,
+              undefined,
+              "text-[2rem]"
+            )}
+          </span>
+        </p>
+        {/* for white underline */}
+        <div className="my-2 w-full h-[1px] bg-white"></div>
 
-          {!accountType ? (
-            <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
-          )
-          :
-          null
-          }
+        {!accountType ? (
+          <WalletAction
+            walletItem={walletItem}
+            payment={payment}
+            openPopUp={openPopUp}
+          />
+        ) : null}
         {/* </div> */}
       </div>
       {creditPopup.show && (

src/components/Resources/index.jsx

@@ -9,6 +9,7 @@ import products from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
 import {
   ActivitiesTab, BlogTab,
+  QuestionsTab,
   CollectionTab,
   CreatedTab,
   HiddenProductsTab,
@@ -39,7 +40,7 @@ export default function Resources(props) {
   // Category Components
   const tabComponents = {
     blog: <BlogTab blogdata={blogItems} />,
-    onsale: <OnSaleTab products={onSaleProducts} />,
+    onsale: <QuestionsTab products={onSaleProducts} />,
     owned: <OwnTab products={ownProducts} />,
     created: (
       <CreatedTab marketProducts={CreatedSell} mainProducts={CreatedBits} />

src/components/Resources/tabs/QuestionsTab.jsx

@@ -0,0 +1,28 @@
+import ProductCardStyleTwo from "../../Cards/ProductCardStyleTwo";
+import DataIteration from "../../Helpers/DataIteration";
+import SearchCom from "../../Helpers/SearchCom";
+
+export default function QuestionsTab({ className, products }) {
+    return (
+        <>
+            <div className={`onsale-tab-wrapper w-full ${className || ""}`}>
+                <div className="main-container w-full">
+                    <div className="filter-section w-full items-center sm:flex justify-between mb-6">
+                        {/* filter-search */}
+                        <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
+                            <SearchCom />
+                        </div>
+
+                    </div>
+                    <div className="content-section w-full-width">
+                        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
+
+
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

src/components/Resources/tabs/index.js

@@ -5,9 +5,11 @@ import HiddenProductsTab from "./HiddenProductsTab";
 import OnSaleTab from "./OnSaleTab";
 import OwnTab from "./OwnTab";
 import BlogTab from "./BlogTab";
+import QuestionsTab from "./QuestionsTab";
 
 export {
   BlogTab,
+  QuestionsTab,
   ActivitiesTab,
   CollectionTab,
   CreatedTab,

src/components/Settings/Tabs/NotificationSettingTab.jsx

@@ -4,6 +4,7 @@ import SwitchCom from "../../Helpers/SwitchCom";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import usersService from "../../../services/UsersService";
 import localImgLoad from "../../../lib/localImgLoad";
+import { toast } from "react-toastify";
 
 import defaultImage from '../../../assets/images/banner-job-due.jpg'
 
@@ -13,17 +14,19 @@ export default function NotificationSettingTab() {
 
   const [accSettings, setAccSettings] = useState({loading: true, data: []}) // STATE TO HOLD ACCOUNT SETTINGS
 
+  let [notificationChange, setNotificationChange] = useState({loading: false, uid: ''})
+
   // const [updateNotification, setUpdateNotification] = useState(false);
   // const [uploadProduct, setUploadProduct] = useState(true);
   // const [saleProduct, setSaleProduct] = useState(true);
   // const [getProduct, setGetProduct] = useState(false);
   // const [authLevel, setAuthLevel] = useState(true);
 
-  const handleNotificationChange = (item) => {
+  const NotificationInterfaceChange = (item) => {
     setAccSettings(prev => {
       let newAccSettings = prev.data.map(data => {
         if(data.uid == item.uid){
-          let newPrefValue = data.pref_value == null || data.pref_value == false ? true : false
+          let newPrefValue = data.pref_value == null || data.pref_value == '0' ? '100' : '0'
           return {...data, pref_value: newPrefValue}
         }else{
           return data
@@ -33,6 +36,26 @@ export default function NotificationSettingTab() {
     })
   }
 
+  let handleNotificationChange = (item) => { // FUNCTION TO SET ACCOUNT SETTING
+    setNotificationChange({loading: true, uid: item.uid})
+    let reqData = { // API PAYLOADS
+      pref_id: item.pref_id,
+      status: item.pref_value == null || item.pref_value == 0 ? 100 : 0
+    }
+    api.setAccSettings(reqData).then(res => {
+      if(res.status != 200 || res.data.internal_return < 0){
+        toast.error("unable to complete");
+      }
+      toast.success("successful");
+      NotificationInterfaceChange(item) // CHANGES NOTIFICATION UI INTERFACE
+    }).catch(errer => {
+      toast.error("unable to complete");
+    }).finally(()=>{
+      setNotificationChange({loading: false, uid: {}})
+      // setTimeout(()=>{setNotificationChange({loading: false, uid: {}})},2000)
+    })
+  }
+
   useEffect(()=>{
     api.getAccSettings().then(res => {
       setAccSettings({loading: false, data: res.data?.result_list || []})
@@ -67,12 +90,16 @@ export default function NotificationSettingTab() {
                 </div>
               </div>
               <div className="mt-5 sm:mt-0">
+              {notificationChange.loading && notificationChange.uid == item.uid ?
+                <LoadingSpinner size='8' color='sky-blue' />
+                :
                 <SwitchCom
-                  value={item.pref_value}
-                  handler={() => handleNotificationChange(item)}
+                  value={item.pref_value == null || item.pref_value == '0' ? 0 : 100}
+                  handler={ notificationChange.loading ? ()=>{} : () => handleNotificationChange(item)}
                   // value={updateNotification}
                   // handler={() => setUpdateNotification(!updateNotification)}
                 />
+              }
               </div>
             </li>
             )}

src/components/jobPopout/JobListPopout.jsx

@@ -253,7 +253,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form className="mb-4">
+                  <Form className="mb-4 hidden">
                     {/* Assign to Family */}
                     <JobFieldInput
                       label="Assign to family"

src/index.css

@@ -11,6 +11,14 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
+.SENDER{
+  margin-left: 60px !important;
+  background-color: azure;
+}
+.RECIPIENT{
+  margin-right: 60px !important;
+  background-color: #add8e6 !important;
+}
 .wallet-box{
   background-color: aliceblue;
   border-radius: 20px;
@@ -24,6 +32,13 @@
 .referral{
   margin-bottom: 20px
 }
+.task_action_panel{
+  font-family: sans; color: white;
+  font-weight: bolder;
+  font-size: 14px;
+  font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+  padding: 0px 10px 5px 10px
+}
 .heroSilderTitle{
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   font-family: sans; color: white;
@@ -34,7 +49,7 @@
   min-width: 280px !important;
 }
 .job-action{
-  background-color: aliceblue;
+  background-color: #4687ba;
   height: 100px;
   border-radius: 15px;
   padding: 5px;
@@ -47,9 +62,12 @@
   border-radius: 15px;
 }
 .msg_header{
-  background-color: #1a3544;
-  color: white;
+  background-color: white;
+  color: black;
   font-weight: bold;
+  border-radius: 9px;
+  font-size: 14px;
+  font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
 }
 .siderCardDescription{
   background-color: aliceblue;

src/services/UsersService.js

@@ -944,6 +944,18 @@ class usersService {
       return this.postAuxEnd("/getaccsettings", postData);
     }
 
+    // FUNCTION TO SET ACCOUNT SETTINGS
+    setAccSettings(reqdata) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 11058,
+        ...reqdata,
+      };
+      return this.postAuxEnd("/setaccsettings", postData);
+    }
+
     // FUNCTION TO DELETE PAY CARD
     payRemCard(reqData) {
       var postData = {