link name changed

src/components/History/JobsCompleted.jsx

@@ -40,9 +40,6 @@ function JobsCompleted() {
         }).catch((error)=>{
             setJobHistory(prev => ({...prev, loading: false, error: true}))
         })
-        setTimeout(()=>{
-            setJobHistory(prev => ({...prev, loading: false, error:true}))
-        },3000)
     }
 
     useEffect(()=>{
@@ -50,8 +47,8 @@ function JobsCompleted() {
       }, [])
 
   return (
-    <div className='flex flex-col justify-between min-h-[500px]'>
-    {jobHistory.loading ? 
+    <div className='p-4 flex flex-col justify-between min-h-[500px]'>
+    {jobHistory?.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : jobHistory?.data?.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
@@ -64,7 +61,7 @@ function JobsCompleted() {
             </tr>
         </thead>
         <tbody>
-            {currentReward.map((item, index) => {
+            {currentReward?.map((item, index) => {
                 let date = new Date(item?.delivery_date).toLocaleDateString()
                 return (
                     <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'>
@@ -86,7 +83,7 @@ function JobsCompleted() {
             )}
         </tbody>
     </table>
-    :jobHistory.error ?
+    :jobHistory?.error ?
     <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
         <span>Opps! an error occurred. Please try again!</span>
     </div>

src/components/History/RewardsTable.jsx

@@ -47,7 +47,7 @@ export const RewardsTable = memo(() => {
       }, [])
 
   return (
-    <div className='flex flex-col justify-between min-h-[500px]'>
+    <div className='p-4 flex flex-col justify-between min-h-[500px]'>
     {familyRewardHistory.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : familyRewardHistory.data.length ?

src/components/History/index.jsx

@@ -19,9 +19,32 @@ export default function History() {
 
     const apiCall = new usersService()
 
-    let [tab, setTab] = useState("purchases"); //STATE FOR SWITCHING BETWEEN TABS
     const [selectedTab, setSelectedTab] = useState("purchases");
-    const tabs = ["purchases", "recent activity", "rewards", 'jobs completed'] //STATE FOR SWITCHING BETWEEN TABS
+    // let [tab, setTab] = useState("purchases"); //STATE FOR SWITCHING BETWEEN TABS
+    // const tabs = ["purchases", "recent activity", "rewards", 'jobs completed'] //STATE FOR SWITCHING BETWEEN TABS
+
+    const tabs = [  //STATE FOR SWITCHING BETWEEN TABS
+        {
+            id: 1,
+            title: "purchases",
+            iconName: "history",
+          },
+          {
+            id: 2,
+            title: "recent activity",
+            iconName: "history",
+          },
+          {
+            id: 3,
+            title: "rewards",
+            iconName: "history",
+          },
+          {
+            id: 4,
+            title: "jobs completed",
+            iconName: "history",
+          },
+    ]
 
     let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
         loading: true,
@@ -91,12 +114,15 @@ export default function History() {
                     <div className="content-tab-items lg:w-[230px] w-full mr-2">
                         <div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
                             {tabs.map((item) => (
-                                <TabButton 
-                                    key={item}
-                                    item={item}
-                                    selectedTab={selectedTab}
-                                    setSelectedTab={setSelectedTab}
-                                />
+                                <div key={item.id} className='w-full'>
+                                    <TabButton 
+                                        key={item.id}
+                                        item={item.title}
+                                        iconName={item.iconName}
+                                        selectedTab={selectedTab}
+                                        setSelectedTab={setSelectedTab}
+                                    />
+                                </div>
                             ))}
                         </div>
                     </div>

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -15,7 +15,7 @@ function PurchasesTable({purchase}) {
     }
 
   return (
-    <div className='flex flex-col justify-between min-h-[500px]'>
+    <div className='p-4 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='w-full'>

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -18,7 +18,7 @@ function RecentActivityTable({ payment }) {
   };
 
   return (
-    <div className="flex flex-col justify-between min-h-[500px]">
+    <div className="p-4 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="w-full">

src/components/Partials/RightSideBar.jsx

@@ -323,7 +323,7 @@ export default function RightSideBar({ myJobList }) {
                   {/* name */}
                   <div>
                     <p className="text-thin-light-gray text-base font-medium">
-                      <NavLink to="/offer-interest">Offers Interest</NavLink>
+                      <NavLink to="/offer-interest">Interest</NavLink>
                     </p>
                   </div>
                   {/* action */}

src/components/customTabs/TabButton.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
+import Icons from '../Helpers/Icons'
 
-export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>{} }) {
+export default function TabButton({ item='', iconName='', selectedTab='', setSelectedTab=()=>{} }) {
   return (
     <button
       className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
@@ -10,7 +11,12 @@ export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>
       name={item}
       onClick={() => setSelectedTab(item)}
     >
-      {item[0].toUpperCase() + item.slice(1)}
+      <div>
+        <Icons name={iconName} />
+      </div>
+      <div>
+        <p className="text-18 tracking-wide">{item[0].toUpperCase() + item.slice(1)}</p>
+      </div>
     </button>
   )
 }