added completed job tab history

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -5,6 +5,8 @@ import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import Detail from "../../jobPopout/popoutcomponent/Detail";
 import { NewTasks } from "./forms";
+import { tableReload } from "../../../store/TableReloads";
+import { useDispatch } from "react-redux";
 
 const AssignTaskPopout = React.memo(
   ({
@@ -19,6 +21,8 @@ const AssignTaskPopout = React.memo(
   }) => {
     const apiCall = new usersService();
 
+    const dispatch = useDispatch()
+
     let [requestStatus, setRequestStatus] = useState({
       loading: false,
       status: false,
@@ -145,6 +149,7 @@ const AssignTaskPopout = React.memo(
             message: "action successful",
           });
           setUpdatePage(prev => !prev) // Updates family task page by calling the useeffect hook
+          dispatch(tableReload({ type: "WALLETTABLE" })); // RELOADS USER WALLET
           setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
             action(); // FUNCTION THAT CLOSES THE MODAL BOX

src/components/History/JobsCompleted.jsx

@@ -0,0 +1,106 @@
+import React, {useEffect, useState} from 'react'
+import Image from '../../assets/images/taskbanners/default.jpg'
+
+import usersService from '../../services/UsersService';
+import { handlePagingFunc } from '../../components/Pagination/HandlePagination';
+import PaginatedList from '../../components/Pagination/PaginatedList';
+
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+
+import { AmountTo2DP } from '../Helpers/PriceFormatter';
+
+function JobsCompleted() {
+
+    const apiCall = new usersService()
+
+    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
+        loading: true,
+        data: [],
+        error: false
+    })
+
+    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 handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
+
+
+    //FUNCTION TO GET FAMILY REWARD HISTORY
+    const getJobCompletedHistory = ()=>{
+        // apiCall.getFamilyRewardHx().then((res)=>{
+        //     if(res.data.internal_return < 0){ // success but no data
+        //         setFamilyRewardHistory(prev => ({...prev, loading: false}))
+        //         return
+        //     }
+        //     setFamilyRewardHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
+        // }).catch((error)=>{
+        //     setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
+        // })
+        setTimeout(()=>{
+            setFamilyRewardHistory(prev => ({...prev, loading: false, error:true}))
+        },3000)
+    }
+
+    useEffect(()=>{
+        getJobCompletedHistory()
+      }, [])
+
+  return (
+    <div className='flex flex-col justify-between min-h-[500px]'>
+    {familyRewardHistory.loading ? 
+    <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>
+            </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">
+                            <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'>
+                                    <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname}</h1>
+                                    <p className='text-sm'>{item.description}</p>
+                                </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>
+                    </tr>
+                )
+            }
+            )}
+        </tbody>
+    </table>
+    :familyRewardHistory.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>
+    :
+    <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
+        <span>No Completed Job History Found!</span>
+    </div>
+    }
+
+    {/* 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} />
+    {/* END OF PAGINATION BUTTON */}
+    </div>
+  )
+}
+
+export default JobsCompleted

src/components/History/index.jsx

@@ -11,6 +11,7 @@ import PurchasesTable from "../MyWallet/WalletComponent/PurchasesTable";
 import RecentActivityTable from "../MyWallet/WalletComponent/RecentActivityTable";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import RewardsTable from "./RewardsTable";
+import JobsCompleted from "./JobsCompleted";
 
 export default function History() {
 
@@ -249,6 +250,15 @@ export default function History() {
                     >
                     Rewards
                     </button>
+                    <button
+                    name="jobs_completed"
+                    onClick={(e) => setTab(e.target.name)}
+                    className={`px-4 py-1 rounded-t-2xl ${
+                        tab == "reward" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                      }`}
+                    >
+                    Jobs Completed
+                    </button>
                 </div>
                 {/* END OF switch button */}
                 <div className="history-tables w-full">
@@ -286,6 +296,14 @@ export default function History() {
                         </div>
                     }
                     {/* END OF REWARD SECTION */}
+
+                    {/* JOBS COMPLETED SECTION */}
+                    {tab == 'jobs_completed' &&
+                        <div className="wallet w-full border-t">
+                            <JobsCompleted />
+                        </div>
+                    }
+                    {/* END OF JOBS COMPLETED SECTION */}
                 </div>
             </div>
             {/*<HistoryTable />*/}