history tab style changed

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,14 +9,14 @@ 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'>
@@ -27,10 +27,10 @@ export default function ActiveJobMessage({ activeJobMesList }) {
                 <th className="p-2"></th>
                 </tr>
             </thead>
-            {activeJobMesList.data.length ?
+            {activeJobMesList?.data?.length ?
             (
             <tbody>
-                {currentActiveJobMesList.map((item, index) => (
+                {activeJobMesList.data.map((item, index) => (
                 <tr key={index} className='text-slate-500'>
                     <td>
                         <div className={`msg_box ${item.who}`}>
@@ -63,7 +63,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
     </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
@@ -459,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/MyWallet/Popup/ConfirmAddFund.jsx

@@ -25,13 +25,6 @@ function ConfirmAddFund({
     status: false,
   }); // STATE FOR API REQUEST
 
-  // const [ConfirmCredit, setConfirmCredit] = useState({
-  //   show: false,
-  //   loader: false,
-  //   msg: "",
-  //   data: {},
-  // });
-
   const apiURL = new usersService();
   const navigate = useNavigate();
 
@@ -131,14 +124,18 @@ function ConfirmAddFund({
         return;
       }
 
-      setConfirmCredit((prev) => ({
-        ...prev,
-        show: {
-          awaitConfirm: { loader: false, state: false },
-          acceptConfirm: { loader: false, state: true },
-        },
-        data: _response,
-      }));
+      return setTimeout(
+        () =>
+          setConfirmCredit((prev) => ({
+            ...prev,
+            show: {
+              awaitConfirm: { loader: false, state: false },
+              acceptConfirm: { loader: false, state: true },
+            },
+            data: _response,
+          })),
+        1500
+      );
     } catch (error) {
       setConfirmCredit((prev) => ({
         ...prev,
@@ -170,7 +167,8 @@ function ConfirmAddFund({
           <div className="px-4 md:p-8 py-4 add-fund-info">
             <div className="field w-full mb-3 min-h-[45px]">
               {confirmCredit?.show?.awaitConfirm?.state ? (
-                <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-2">
+                  {/* Amount */}
                   <div
                     className={`flex items-center ${
                       __confirmCountry == "US" ? "gap-14" : "gap-4"
@@ -185,6 +183,40 @@ function ConfirmAddFund({
                       }`}
                     </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
@@ -220,9 +252,10 @@ function ConfirmAddFund({
 
           <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"

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -60,7 +60,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center">
           {confirmCredit?.show?.acceptConfirm?.loader ? (
-            <div className="h-[33rem] flex items-center justify-center">
+            <div className="h-[32rem] flex items-center justify-center">
               <LoadingSpinner size="12" color="sky-blue" />
             </div>
           ) : (

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/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"