src/components/History/JobsCompleted.jsx

@@ -13,7 +13,7 @@ function JobsCompleted() {
 
     const apiCall = new usersService()
 
-    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
+    let [jobHistory, setJobHistory] = useState({ // FOR PURCHASE HISTORY
         loading: true,
         data: [],
         error: false
@@ -22,7 +22,7 @@ function JobsCompleted() {
     const [currentPage, setCurrentPage] = useState(0);
     const indexOfFirstItem = Number(currentPage);
     const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentReward = familyRewardHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
+    const currentReward = jobHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
   
     const handlePagination = (e) => {
       handlePagingFunc(e,setCurrentPage)
@@ -31,17 +31,17 @@ function JobsCompleted() {
 
     //FUNCTION TO GET FAMILY REWARD HISTORY
     const getJobCompletedHistory = ()=>{
-        // apiCall.getFamilyRewardHx().then((res)=>{
+        apiCall.getContractHx().then((res)=>{
-        //     if(res.data.internal_return < 0){ // success but no data
+            if(res.data.internal_return < 0){ // success but no data
-        //         setFamilyRewardHistory(prev => ({...prev, loading: false}))
+                setJobHistory(prev => ({...prev, loading: false}))
-        //         return
+                return
-        //     }
+            }
-        //     setFamilyRewardHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
+            setJobHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
-        // }).catch((error)=>{
+        }).catch((error)=>{
-        //     setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
+            setJobHistory(prev => ({...prev, loading: false, error: true}))
-        // })
+        })
         setTimeout(()=>{
-            setFamilyRewardHistory(prev => ({...prev, loading: false, error:true}))
+            setJobHistory(prev => ({...prev, loading: false, error:true}))
         },3000)
     }
 
@@ -51,42 +51,42 @@ function JobsCompleted() {
 
   return (
     <div className='flex flex-col justify-between min-h-[500px]'>
-    {familyRewardHistory.loading ? 
+    {jobHistory.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
-    : familyRewardHistory.data.length ?
+    : jobHistory.data.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='w-full'>
             <tr className='text-slate-600 dark:text-white'>
-            <th className="p-4"></th>
+            <th className="p-4">Title</th>
-            <th className="p-4">Amount</th>
+            <th className="p-4 text-right">Amount</th>
-            <th className="p-4">Date</th>
+            {/* <th className="p-4">Date</th>
-            <th className="p-4">Confirmation</th>
+            <th className="p-4">Contract</th> */}
             </tr>
         </thead>
         <tbody>
             {currentReward.map((item, index) => {
-                let date = new Date(item.added).toLocaleDateString()
+                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'>
-                        <td className="p-4">
+                        <td className="p-4 w-full">
                             <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' />
+                                {/* <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'>
-                                    <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname}</h1>
+                                    <h1 className='text-lg font-bold line-clamp-1'>{item?.title}</h1>
-                                    <p className='text-sm'>{item.description}</p>
+                                    <p className='text-sm line-clamp-2'>{item?.description}</p>
                                 </div>
                             </div>
                         </td>
-                        <td className="p-4">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-4 text-right">{AmountTo2DP(item?.price*0.01)} {item?.currency}</td>
-                        <td className="p-4">{date}</td>
+                        {/* <td className="p-4">{date}</td>
-                        <td className="p-4">{item.confirmation}</td>
+                        <td className="p-4">{item?.contract}</td> */}
                     </tr>
                 )
             }
             )}
         </tbody>
     </table>
-    :familyRewardHistory.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>
@@ -97,7 +97,7 @@ function JobsCompleted() {
     }
 
     {/* PAGINATION BUTTON */}
-    <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} />
+    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= jobHistory?.data?.length ? true : false} data={jobHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/History/RewardsTable.jsx

@@ -55,7 +55,7 @@ export const RewardsTable = memo(() => {
         <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 text-right">Amount</th>
             <th className="p-4">Date</th>
             <th className="p-4">Confirmation</th>
             </tr>
@@ -74,7 +74,7 @@ export const RewardsTable = memo(() => {
                                 </div>
                             </div>
                         </td>
-                        <td className="p-4">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-4 text-right">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
                         <td className="p-4">{date}</td>
                         <td className="p-4">{item.confirmation}</td>
                     </tr>

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -21,8 +21,8 @@ function PurchasesTable({purchase}) {
             <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 text-right">Amount</th>
-                <th className="p-4">Fee</th>
+                <th className="p-4 text-right">Fee</th>
                 </tr>
             </thead>
             <tbody>
@@ -31,8 +31,8 @@ function PurchasesTable({purchase}) {
                     <td className="p-4">{item.added_date}<br />
                     <b>{item.confirmation} </b>
                     </td>
-                    <td className="p-4">{item.amount}</td>
+                    <td className="p-4 text-right">{item.amount}</td>
-                    <td className="p-4">{item.fee}</td>
+                    <td className="p-4 text-right">{item.fee}</td>
                 </tr>
                 ))}
             </tbody>

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -25,7 +25,7 @@ function RecentActivityTable({ payment }) {
             <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 text-right">Amnt./Fee</th>
               <th className="p-4">Status</th>
             </tr>
           </thead>
@@ -37,7 +37,7 @@ function RecentActivityTable({ payment }) {
                   className="p-4"
                   dangerouslySetInnerHTML={{ __html: item.recipient }}
                 ></td>
-                <td className="p-4">
+                <td className="p-4 text-right">
                   {item.amount}
                   <br />
                   {item.fee}

src/services/UsersService.js

@@ -570,6 +570,20 @@ class usersService {
     return this.postAuxEnd("/familyrewardhx", postData);
   }
 
+  // API FUNCTION TO GET CONTRACT HISTORY
+  getContractHx() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      offset: 1,
+      limit: 20,
+      // action: apiConst.WRENCHBOARD_FAMILY_TRANSFERHX,
+      action: "",
+    };
+    return this.postAuxEnd("/contracthx", postData);
+  }
+
   // API FUNCTION TO GET PAYMENT HISTORY
   getPaymentHx() {
     var postData = {