Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into task-bubble-length

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

@@ -9,6 +9,11 @@ import { useSelector } from "react-redux";
 export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
   let { userDetails } = useSelector((state) => state.userDetails);
   const darkMode = useContext(DarkModeContext);
+
+  let { jobLists } = useSelector((state) => state.jobLists);
+  const marketData = jobLists?.result_list;
+  let noOfJobs = marketData?.length;
+
   return (
     <div className="w-full h-full">
       {/* logo-area */}
@@ -75,49 +80,20 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
           </div>
           <div className="items">
             <ul className="flex flex-col space-y-6">
-              <li className="item group">
-                <NavLink
-                  className="nav-item flex items-center justify-start space-x-3.5"
-                  to="/"
-                >
-                  <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="dashboard" />
-                  </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">
-                    Dashboard
-                  </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="active-bids" />
-                  </span>
-                  <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
-                    Market
-                    <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
-                      0
-                    </span>
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/mytask"
-                  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="market" />
-                  </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 Task(s)
-
-                  </span>
-                </NavLink>
-              </li>
+              {/* Using mini component reduces the bulk amount of html */}
+              {[
+                { name: "Dashboard", path: "/" },
+                { name: "Market", path: "/market", bubble: noOfJobs },
+                { name: "My Task(s)", path: "/mytask" },
+              ].map(({ name, path, bubble }, idx) => (
+                <ListItem
+                  key={idx}
+                  title={name}
+                  route={path}
+                  bubble={bubble}
+                  sidebar
+                />
+              ))}
               {/*<li className="item group">*/}
               {/*  <NavLink*/}
               {/*    to="/notification"*/}
@@ -312,3 +288,33 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
     </div>
   );
 }
+
+const ListItem = ({ sidebar, route, title, bubble }) => {
+  return (
+    <li className="item group">
+      <NavLink
+        to={route}
+        className={`nav-item flex items-center  ${
+          ((navData) => (navData.isActive ? "active" : ""),
+          sidebar ? "justify-start space-x-3.5" : "justify-center")
+        }`}
+      >
+        <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 dark:text-lighter-gray">
+          <Icons name="market" />
+        </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"
+          }`}
+        >
+          {title && title}
+          {bubble && (
+            <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
+              {bubble}
+            </span>
+          )}
+        </span>
+      </NavLink>
+    </li>
+  );
+};

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 ? 
                 (