pagination display re-aligned

src/components/History/HistoryTable.jsx

@@ -25,7 +25,7 @@ export default function HistoryTable({ className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
         className || ""
       }`}
     >
@@ -43,7 +43,7 @@ export default function HistoryTable({ className }) {
         />
       </div>
       {data.length &&
-      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+      <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
         <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
           <tbody>
             <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">

src/components/History/index.jsx

@@ -204,7 +204,7 @@ export default function History() {
             <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
                 {/* PURCHASE SECTION */}
                 <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                         <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Purchases</h2>
                         {purchaseHistory.loading ? 
                         <LoadingSpinner size='16' color='sky-blue' />
@@ -217,9 +217,9 @@ export default function History() {
 
                 {/* RECENT ACTIVITY SECTION */}
                 <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                         <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                        <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
+                        {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                         {paymentHistory.loading ? 
                         <LoadingSpinner size='16' color='sky-blue' />
                         :

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -23,12 +23,12 @@ export default function MyActiveJobTable({MyJobList, className }) {
 
     return (
         <div
-            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
                 className || ""
             }`}
         >
             {MyJobList && MyJobList?.result_list &&
-            <div className="relative w-full overflow-x-auto sm:rounded-lg">
+            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
                 <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                     <tbody>
                     {/*<tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}

src/components/MyJobs/MyJobTable.jsx

@@ -23,7 +23,7 @@ export default function MyJobTable({MyJobList, className }) {
 
     return (
         <div
-            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
                 className || ""
             }`}
         >
@@ -41,7 +41,7 @@ export default function MyJobTable({MyJobList, className }) {
                 />
             </div>
             {MyJobList && MyJobList?.result_list &&
-            <div className="relative w-full overflow-x-auto sm:rounded-lg">
+            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
                 <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                     <tbody>
                     <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">

src/components/MyWallet/AddFund.jsx

@@ -73,7 +73,7 @@ function AddFund({payment}) {
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                 <div className="wallet w-full  md:p-8 p-4 h-full max-h-[590px] bg-white dark:bg-dark-white overflow-y-auto 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>
+                    {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :

src/components/MyWallet/ConfirmAddFund.jsx

@@ -117,7 +117,7 @@ function ConfirmAddFund({payment}) {
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                 <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto 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>
+                    {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :

src/components/MyWallet/ConfirmTransfer.jsx

@@ -151,9 +151,9 @@ function ConfirmTransfer({payment, wallet}) {
             }
     
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto 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>
+                    {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :

src/components/MyWallet/TransferFund.jsx

@@ -223,9 +223,9 @@ function TransferFund({payment, wallet}) {
             </div>
     
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[650px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                    <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
+                    {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :

src/components/MyWallet/WalletComponent/CouponTable.jsx

@@ -15,7 +15,7 @@ function CouponTable({coupon}) {
     }
 
   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'>
@@ -59,7 +59,7 @@ function CouponTable({coupon}) {
     {/* PAGINATION BUTTON */}
     <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
-    </>
+    </div>
   )
 }
 

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -15,7 +15,7 @@ function PurchasesTable({purchase}) {
     }
 
   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'>
@@ -59,7 +59,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} />
     {/* END OF PAGINATION BUTTON */}
-    </>
+    </div>
   )
 }
 

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -15,7 +15,7 @@ function RecentActivityTable({payment}) {
     }
 
   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'>
@@ -59,7 +59,7 @@ function RecentActivityTable({payment}) {
     {/* PAGINATION BUTTON */}
     <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= payment?.data?.length ? true : false} data={payment?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
-    </>
+    </div>
   )
 }
 

src/components/MyWallet/WalletComponent/ReferralTable.jsx

@@ -15,7 +15,7 @@ function ReferralTable({history}) {
     }
 
   return (
-    <>
+    <div className='flex flex-col justify-between h-full'>
         <table className="referral-list w-full table-auto border-collapse text-left">
             <thead className='border-b-2'>
                 <tr className='text-slate-600'>
@@ -53,7 +53,7 @@ function ReferralTable({history}) {
         {/* PAGINATION BUTTON */}
         <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= history?.data?.length ? true : false} data={history?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
         {/* END OF PAGINATION BUTTON */}
-    </>
+    </div>
   )
 }
 

src/components/Pagination/PaginatedList.jsx

@@ -5,7 +5,7 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
 
   if(data.length){
     return (
-      <div className='p-3 flex justify-center items-center space-x-2'>
+      <div className='p-3 flex justify-center items-center space-x-2 border-t-2'>
         {/* Render pagination buttons */}
           {!prev &&
               <button

src/components/Partials/MobileSideBar.jsx

@@ -4,10 +4,8 @@ import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg";
 import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
-import { useSelector } from "react-redux";
 
 export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
-  let { userDetails } = useSelector((state) => state.userDetails);
   const darkMode = useContext(DarkModeContext);
   return (
     <div className="w-full h-full">
@@ -186,67 +184,41 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
             </ul>
           </div>
         </div>
-
-        {!userDetails.post_jobs ? 
-          <div className="setting-item">
-          <div className="top-platform bg-pink dark:bg-dark-white   rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
-            <NavLink to="/start-job" className="nav-item flex items-center justify-start space-x-3.5">
-              <span className="item-content relative group-hover:text-purple text-xl transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
-                Enable Job Post
-              </span>
-            </NavLink>
+        <div className="setting-item">
+          <div className="heading mb-5">
+            <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
+          </div>
+          <div className="items">
+            <ul className="flex flex-col space-y-6">
+              <li className="item group">
+                <NavLink
+                  to="/myjobs"
+                  className="nav-item flex items-center justify-start space-x-3.5"
+                >
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                    <Icons name="people-two" />
+                  </span>
+                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
+                    My Jobs
+                  </span>
+                </NavLink>
+              </li>
+              <li className="item group">
+                <NavLink
+                  to="/market"
+                  className="nav-item flex items-center justify-start space-x-3.5"
+                >
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                    <Icons name="setting" />
+                  </span>
+                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
+                    Active Job(s)
+                  </span>
+                </NavLink>
+              </li>
+            </ul>
           </div>
         </div>
-        :
-          <div className="setting-item">
-            <div className="heading mb-5">
-              <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
-            </div>
-            <div className="items">
-              <ul className="flex flex-col space-y-6">
-                <li className="item group">
-                  <NavLink
-                    to="/myjobs"
-                    className="nav-item flex items-center justify-start space-x-3.5"
-                  >
-                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                      <Icons name="people-two" />
-                    </span>
-                    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                      My Jobs
-                    </span>
-                  </NavLink>
-                </li>
-                <li className="item group">
-                  <NavLink
-                    to="/my-active-jobs"
-                    className="nav-item flex items-center justify-start space-x-3.5"
-                  >
-                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                      <Icons name="setting" />
-                    </span>
-                    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                      Pending
-                    </span>
-                  </NavLink>
-                </li>
-                <li className="item group">
-                  <NavLink
-                    to="/my-active-jobs"
-                    className="nav-item flex items-center justify-start space-x-3.5"
-                  >
-                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                      <Icons name="setting" />
-                    </span>
-                    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                      Active Job(s)
-                    </span>
-                  </NavLink>
-                </li>
-              </ul>
-            </div>
-          </div>
-      }
       </div>
       {/* signout area */}
       {sidebar ? (

src/components/Partials/Sidebar.jsx

@@ -9,8 +9,6 @@ import { useSelector } from "react-redux";
 export default function Sidebar({ sidebar, action, logoutModalHandler }) {
   const darkMode = useContext(DarkModeContext);
 
-  let { userDetails } = useSelector((state) => state.userDetails);
-
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
   let noOfJobs = marketData?.length;
@@ -229,8 +227,6 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
             </NavLink>
           </div>
         </div>
-
-        {!userDetails.post_jobs ? 
         <div className="setting-item">
           <div className="top-platform bg-pink dark:bg-dark-white   rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
             <NavLink to="/start-job">
@@ -240,7 +236,6 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
             </NavLink>
           </div>
         </div>
-        :
         <div className="setting-item">
           <div className="heading mb-5">
             <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
@@ -350,8 +345,6 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
             </ul>
           </div>
         </div>
-        }
-
       </div>
       {/* signout area */}
       {sidebar ? (

src/components/Referral/ReferralDisplay.jsx

@@ -162,7 +162,7 @@ function ReferralDisplay() {
         </div>
 
         <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-            <div className="referral w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+            <div className="referral w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                 <h2 className='mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Referral List</h2>
                 {referralList.loading ? 
                 (