offer interest page update

src/components/AuthPages/VerifyLink/index2.jsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import debounce from "../../../hooks/debounce";
@@ -6,8 +7,12 @@ import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout2";
 import LoadingSpinner from '../../../components/Spinners/LoadingSpinner'
+import { updateUserDetails } from "../../../store/UserDetails";
 
 export default function VerifyLink() {
+
+  const dispatch = useDispatch();
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [msgError, setMsgError] = useState("");
@@ -50,12 +55,14 @@ export default function VerifyLink() {
           ) {
             localStorage.setItem("email", `${data?.email}`);
             localStorage.setItem("member_id", `${data?.member_id}`);
+            localStorage.setItem("uid", `${data?.uid}`);
             localStorage.setItem("session_token", `${data?.session}`);
-            localStorage.setItem("session", `${data?.session}`);
-            localStorage.setItem("uid", data?.uid);
-
-            navigate("/", { replace: true });
-            setLinkLoader(false);
+            localStorage.setItem("wallet_available_status", `${data?.wallet_available_status}`);
+            dispatch(updateUserDetails({ ...data }));
+            setTimeout(() => {
+              navigate("/", { replace: true });
+              setLinkLoader(false);
+            }, 2000);
           } else {
             setLinkLoader(false);
             setMsgError("Invalid Link or Password Combination");

src/components/Cards/AvailableJobsCard.jsx

@@ -85,7 +85,7 @@ export default function AvailableJobsCard({
                 //   backgroundImage: `url('${image}')`,
                 // }}
               >
-                <div className="flex flex-col h-full bg-slate-100 p-2 rounded-md">
+                <div className="flex flex-col min-h-full bg-slate-100 p-2 rounded-md">
                   <p>{datas.description}</p>
                 </div>
               </div>
@@ -95,7 +95,7 @@ export default function AvailableJobsCard({
               <div className="flex justify-between">
                 <div className="flex items-center space-x-2">
                   <div>
-                    <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
+                    <p className="w-full font-bold text-xl tracking-wide text-dark-gray dark:text-white">
                       {/* {thePrice} | {datas.timeline_days} day(s) */}
                       {thePrice}
                     </p>

src/components/History/JobsCompleted.jsx

@@ -55,20 +55,20 @@ function JobsCompleted() {
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : familyRewardHistory.data.length ?
     <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>
-            <th className="p-2">Amount</th>
-            <th className="p-2">Date</th>
-            <th className="p-2">Confirmation</th>
+        <thead className='w-full'>
+            <tr className='text-slate-600 dark:text-white'>
+            <th className="p-4"></th>
+            <th className="p-4">Amount</th>
+            <th className="p-4">Date</th>
+            <th className="p-4">Confirmation</th>
             </tr>
         </thead>
         <tbody>
             {currentReward.map((item, index) => {
                 let date = new Date(item.added).toLocaleDateString()
                 return (
-                    <tr key={index} className='text-slate-500'>
-                        <td className="p-2">
+                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                        <td className="p-4">
                             <div className='flex items-center gap-2'>
                                 <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
                                 <div className='flex flex-col'>
@@ -77,9 +77,9 @@ function JobsCompleted() {
                                 </div>
                             </div>
                         </td>
-                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-2">{date}</td>
-                        <td className="p-2">{item.confirmation}</td>
+                        <td className="p-4">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-4">{date}</td>
+                        <td className="p-4">{item.confirmation}</td>
                     </tr>
                 )
             }
@@ -97,7 +97,7 @@ function JobsCompleted() {
     }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/History/RewardsTable.jsx

@@ -52,20 +52,20 @@ export const RewardsTable = memo(() => {
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : familyRewardHistory.data.length ?
     <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>
-            <th className="p-2">Amount</th>
-            <th className="p-2">Date</th>
-            <th className="p-2">Confirmation</th>
+        <thead className='w-full'>
+            <tr className='text-slate-600 dark:text-white'>
+            <th className="p-4"></th>
+            <th className="p-4">Amount</th>
+            <th className="p-4">Date</th>
+            <th className="p-4">Confirmation</th>
             </tr>
         </thead>
         <tbody>
             {currentReward.map((item, index) => {
                 let date = new Date(item.added).toLocaleDateString()
                 return (
-                    <tr key={index} className='text-slate-500'>
-                        <td className="p-2">
+                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                        <td className="p-4">
                             <div className='flex items-center gap-2'>
                                 <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
                                 <div className='flex flex-col'>
@@ -74,9 +74,9 @@ export const RewardsTable = memo(() => {
                                 </div>
                             </div>
                         </td>
-                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-2">{date}</td>
-                        <td className="p-2">{item.confirmation}</td>
+                        <td className="p-4">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-4">{date}</td>
+                        <td className="p-4">{item.confirmation}</td>
                     </tr>
                 )
             }
@@ -94,7 +94,7 @@ export const RewardsTable = memo(() => {
     }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/History/index.jsx

@@ -276,7 +276,7 @@ export default function History() {
                     </button>
                 </div> */}
                 {/* END OF switch button */}
-                <div className="history-tables w-full bg-red-50 overflow-x-auto">
+                <div className="history-tables w-full bg-red-50 dark:bg-dark-white overflow-x-auto">
                     {/* PURCHASE SECTION */}
                     {selectedTab == 'purchases' &&
                         <div className="wallet w-full">

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -80,18 +80,18 @@ function ActiveJobs(props) {
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 30mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });
       }, 5000);
       return;
     }
-    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
+    if (fileType != 'video' && files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 1mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -74,18 +74,18 @@ function ActiveJobsMedia(props) {
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 30mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });
       }, 5000);
       return;
     }
-    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
+    if (fileType != 'video' && files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 1mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -51,7 +51,7 @@ function AmountSection({ currency, amount, country }) {
     <div className={`flex items-center gap-8`}>
       {/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
       <h1 className="min-w-[150px] job-label">
-        Amount({currency})
+        Amount ({currency})
       </h1>
       <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedAmount}
@@ -91,7 +91,7 @@ function TotalSection({ currency, amount, fee, country }) {
   return (
     <div className={`flex items-center gap-8`}>
       <h1 className="min-w-[150px] job-label">
-        Total
+        Total ({currency})
       </h1>
       <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedTotal}

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -18,21 +18,21 @@ function PurchasesTable({purchase}) {
     <div className='flex flex-col justify-between min-h-[500px]'>
         {purchase.data.length ?
         <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">Trx.</th>
-                <th className="p-2">Amount</th>
-                <th className="p-2">Fee</th>
+            <thead className='w-full'>
+                <tr className='text-slate-600 dark:text-white'>
+                <th className="p-4">Trx.</th>
+                <th className="p-4">Amount</th>
+                <th className="p-4">Fee</th>
                 </tr>
             </thead>
             <tbody>
                 {currentPurchase.map((item, index) => (
-                <tr key={index} className='text-slate-500'>
-                    <td className="p-2">{item.added_date}<br />
+                <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                    <td className="p-4">{item.added_date}<br />
                     <b>{item.confirmation} </b>
                     </td>
-                    <td className="p-2">{item.amount}</td>
-                    <td className="p-2">{item.fee}</td>
+                    <td className="p-4">{item.amount}</td>
+                    <td className="p-4">{item.fee}</td>
                 </tr>
                 ))}
             </tbody>
@@ -48,7 +48,7 @@ function PurchasesTable({purchase}) {
         }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -21,28 +21,28 @@ function RecentActivityTable({ payment }) {
     <div className="flex flex-col justify-between min-h-[500px]">
       {payment?.data?.length > 0 ? 
         <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">Date</th>
-              <th className="p-2">Trx.</th>
-              <th className="p-2">Amnt./Fee</th>
-              <th className="p-2">Status</th>
+          <thead className="w-full">
+            <tr className="text-slate-600 dark:text-white">
+              <th className="p-4">Date</th>
+              <th className="p-4">Trx.</th>
+              <th className="p-4">Amnt./Fee</th>
+              <th className="p-4">Status</th>
             </tr>
           </thead>
           <tbody>
             {currentActivity.map((item, index) => (
-              <tr key={index} className="text-slate-500">
-                <td className="p-2">{item.trx_date}</td>
+              <tr key={index} className="dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300">
+                <td className="p-4">{item.trx_date}</td>
                 <td
                   className="p-4"
                   dangerouslySetInnerHTML={{ __html: item.recipient }}
                 ></td>
-                <td className="p-2">
+                <td className="p-4">
                   {item.amount}
                   <br />
                   {item.fee}
                 </td>
-                <td className="p-2">{item.status}</td>
+                <td className="p-4">{item.status}</td>
               </tr>
             ))}
           </tbody>
@@ -70,6 +70,7 @@ function RecentActivityTable({ payment }) {
         data={payment?.data}
         start={indexOfFirstItem}
         stop={indexOfLastItem}
+        borderTop={false}
       />
       {/* END OF PAGINATION BUTTON */}
     </div>

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -6,10 +6,18 @@ import CommonHead from "../UserHeader/CommonHead";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import OthersInterestedTable from "./OthersInterestedTable";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { tableReload } from "../../store/TableReloads";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 export default function ManageInterestOffer(props) {
+
+    const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+    
+    let walletBal = walletDetails?.data?.filter(wallet => wallet.code == props?.offerDetails?.currency_code) // USER WALLET BALANCE FOR CORRESPONDING TASK CURRENCY
+
+    let clientAdded = new Date(props.offerDetails?.client_added)
+
     const dispatch = useDispatch()
     const navigate = useNavigate()
     const apiCall = new usersService()
@@ -183,12 +191,21 @@ export default function ManageInterestOffer(props) {
                                         <button
                                         name="message"
                                         onClick={(e) => setTab(e.target.name)}
-                                        className={`px-4 py-1 rounded-t-2xl ${
+                                        className={`px-4 py-1 rounded-t-2xl flex gap-2 ${
                                             tab == "message" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
                                           }`}
                                         >
                                         Messages ({messageList.data.length})
                                         </button>
+                                        <button
+                                        name="details"
+                                        onClick={(e) => setTab(e.target.name)}
+                                        className={`px-4 py-1 rounded-t-2xl ${
+                                            tab == "details" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                                          }`}
+                                        >
+                                        Delivery Details
+                                        </button>
                                     </div>
                                     {/* END OF switch button */}
 
@@ -202,7 +219,10 @@ export default function ManageInterestOffer(props) {
                                             </div>
                                             <div className="my-3 md:my-0 flex items-center gap-1">
                                                 <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_added}</span>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">
+                                                    {clientAdded.getFullYear()}{" - "}
+                                                    {clientAdded.getMonth() < 9 ? '0'+ (clientAdded.getMonth() + 1) : clientAdded.getMonth() + 1}
+                                                </span>
                                             </div>
                                         </div>
                                         <div className="my-3 flex items-center gap-1">
@@ -230,7 +250,7 @@ export default function ManageInterestOffer(props) {
                                             </div>
                                         </div>
                                     </div>
-                                    :
+                                    : tab == 'message' ?
                                     <div className="message-details w-full border-t">
                                         <p className="my-1 text-base text-dark-gray dark:text-white tracking-wide">To: <span className="font-bold">{props.offerDetails?.client_name}</span></p>
                                         <div className="w-full flex items-center gap-5">
@@ -294,14 +314,31 @@ export default function ManageInterestOffer(props) {
                                         }
                                         </div>
                                     </div>
+                                    : tab == 'details' ?
+                                    <div className="info-details w-full border-t">
+                                        <h1 className="my-3 text-base font-medium text-dark-gray dark:text-white tracking-wide">{props?.offerDetails?.description}</h1>
+                                    </div>
+                                    :
+                                    null
                                     }
                                 </div>
                             </div>
                             {/* END OF Detail section */}
 
-                            {/* BUTTON section */}
                             <div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
-                                <div className="w-full h-full">
+                                {/* Wallet balance and reward */}
+                                <div className='mb-4 border-b-2 flex flex-col justify-center items-center gap-4'>
+                                    <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
+                                        <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Wallet:</p>
+                                        <span className="font-medium text-dark-gray dark:text-white">{PriceFormatter(walletBal[0]?.amount * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
+                                    </div>
+                                    <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
+                                        <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Reward:</p>
+                                        <span className="font-medium text-dark-gray dark:text-white">{PriceFormatter(props?.offerDetails?.price * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
+                                    </div>
+                                </div>
+                                {/* BUTTON section */}
+                                <div className="w-full">
                                     <div className="h-full flex sm:flex-col justify-center items-center gap-10">
                                         {requestStatus.loading && requestStatus.processType == 'accept' ?
                                             <LoadingSpinner color='sky-blue' size='10' />
@@ -333,6 +370,7 @@ export default function ManageInterestOffer(props) {
                                             </button>
                                         }
                                     </div>
+                                    {/* END of BUTTON section */}
 
                                     {/* ERROR DISPLAY */}
                                     <div className="w-full">
@@ -357,7 +395,6 @@ export default function ManageInterestOffer(props) {
                                     {/* End of error or success display */}
                                 </div>
                             </div>
-                            {/* END of BUTTON section */}
                         </div>
                     </div>
                     {/* END OF manage offer section */}

src/components/OffersInterest/OffersInterestTable.jsx

@@ -100,9 +100,21 @@ export default function OffersInterestTable({offerInterestList, className}) {
                                                 });
                                             }}
                                             type="button"
-                                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                            className='w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
                                         >
-                                            View
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 11 20"
+                                                id="Arrow"
+                                                className="w-[0.7rem]"
+                                                >
+                                                <path
+                                                    fillRule="evenodd"
+                                                    d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                                    // fill=""
+                                                    className="color000000 svgShape fill-[#fff]"
+                                                ></path>
+                                            </svg>
                                         </button>
                                     </td>
                                 </tr>

src/components/OffersInterest/OthersInterestedTable.jsx

@@ -101,9 +101,22 @@ export default function OthersInterestTable({othersInterestedList, className}) {
                                                 });
                                             }}
                                             type="button"
-                                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                            className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                         >
-                                            View
+                                            {/* View */}
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 11 20"
+                                                id="Arrow"
+                                                className="w-[0.7rem]"
+                                                >
+                                                <path
+                                                    fillRule="evenodd"
+                                                    d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                                    // fill=""
+                                                    className="color000000 svgShape fill-[#fff]"
+                                                ></path>
+                                            </svg>
                                         </button>
                                     </td>
                                 </tr>

src/components/Pagination/PaginatedList.jsx

@@ -1,7 +1,7 @@
-const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
+const PaginatedList = ({ onClick, prev, next, data, start, stop, borderTop=true }) => {
   if (data?.length > process.env.REACT_APP_ITEM_PER_PAGE) {
     return (
-      <div className="p-3 flex justify-center items-center min-h-[70px] space-x-2 border-t-2 w-full">
+      <div className={`p-3 flex justify-center items-center min-h-[70px] space-x-2 w-full ${borderTop ? 'border-t-2' : 'border-t-0'}`}>
         {/* Render pagination buttons */}
         {!prev && (
           <button

src/components/Partials/Layout.jsx

@@ -53,12 +53,12 @@ export default function Layout({ children }) {
               <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
             </div>
             {/* container */}
-            <div className="nft-container 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center xl:flex-row xl:justify-between gap-4">
-              <div className="flex-[80%] 2xl:flex-[85%] w-full">
+            <div className="nft-container h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center 2xl:flex-row 2xl:justify-between gap-10">
+              <div className="w-full 2xl:w-[calc(100%-250px)]">
                 {children && children}
               </div>
 
-              <div className="nft-right-side-content flex-[20%] 2xl:flex-[15%] w-full h-full 2xl:flex justify-center 2xl:justify-end relative">
+              <div className="nft-right-side-content w-full 2xl:w-[200px] 2xl:flex justify-center 2xl:justify-end relative">
                 <RightSideBar myJobList={userJobList} />
               </div>
             </div>

src/components/Partials/Sidebar.jsx

@@ -106,7 +106,7 @@ export default function Sidebar({
           }`}
         >
           <div className="heading mb-5">
-            <h1 className="title text-xl font-bold text-sky-blue">Menu</h1>
+            <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>Menu</h1>
           </div>
           <div className="items">
             <ul className="flex flex-col space-y-6">
@@ -141,11 +141,11 @@ export default function Sidebar({
         {userDetails?.account_type !== "FAMILY" && (
           <div
             className={`menu-item transition-all duration-300 ease-in-out ${
-              sidebar ? "my-5" : ""
+              sidebar ? "mb-5" : "mb-2"
             }`}
           >
             <div className="heading mb-5">
-              <h1 className="title text-xl font-bold text-sky-blue">Family</h1>
+              <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>Family</h1>
             </div>
             <div className="items">
               <ul className="flex flex-col space-y-6">
@@ -206,8 +206,8 @@ export default function Sidebar({
                 }`}
               >
                 <div className="heading mb-5">
-                  <h1 className="title text-xl font-bold text-sky-blue">
-                    My Jobs
+                  <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>
+                    Jobs
                   </h1>
                 </div>
                 <div className="items">
@@ -321,7 +321,7 @@ const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
         </span>
         <span
           className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
-            sidebar ? "active flex-1" : "w-0"
+            sidebar ? "active flex-1" : "hidden"
           }`}
         >
           {title && title}