wallet API changed

src/components/Helpers/PriceFormatter.jsx

@@ -75,4 +75,23 @@ export const AmountTo2DP = (
 
   // return formattedNumber;
   return formattedNumber;
+};
+
+
+
+// FUNCTION TO RETURN CURRENCY SYMBOL
+export const currencySymbol = (
+  currencyName = "naira",
+  amount = "00",
+) => {
+  // Cureency Array
+  let currencyArray = [
+    {currencyName:'naira', symbol:'₦'},
+    {currencyName:'usd', symbol:'$'},
+  ]
+
+  const matchedCurrency = currencyArray.filter(item => item.currencyName.toLocaleLowerCase() == currencyName.toLocaleLowerCase())
+  const amountTo2DP = AmountTo2DP(amount)
+  // return formattedNumber;
+  return  matchedCurrency.length ? <><span>{matchedCurrency[0].symbol}</span><span>{amountTo2DP}</span></> : <><span>$</span><span>{amountTo2DP}</span></>;
 };

src/components/History/JobsCompleted.jsx

@@ -7,7 +7,8 @@ import PaginatedList from '../../components/Pagination/PaginatedList';
 
 import LoadingSpinner from '../Spinners/LoadingSpinner';
 
-import { AmountTo2DP } from '../Helpers/PriceFormatter';
+import { currencySymbol } from '../Helpers/PriceFormatter';
+import {NewDateTimeFormatter} from '../../lib/NewDateTimeFormatter'
 
 function JobsCompleted() {
 
@@ -47,7 +48,7 @@ function JobsCompleted() {
       }, [])
 
   return (
-    <div className='p-4 flex flex-col justify-between min-h-[500px]'>
+    <div className='py-4 flex flex-col justify-between min-h-[500px]'>
     {jobHistory?.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : jobHistory?.data?.length ?
@@ -71,12 +72,11 @@ function JobsCompleted() {
                                 <div className='flex flex-col'>
                                     <h1 className='text-lg font-bold line-clamp-1'>{item?.title}</h1>
                                     <p className='text-sm line-clamp-2'>{item?.description}</p>
+                                    <p className='text-sm line-clamp-2'>{NewDateTimeFormatter(item?.delivery_date)}</p>
                                 </div>
                             </div>
                         </td>
-                        <td className="p-4 text-right">{AmountTo2DP(item?.price*0.01)} {item?.currency}</td>
+                        <td className="p-4 flex text-right justify-end items-center">{currencySymbol(item?.currency_code, item?.price*0.01)}</td>
-                        {/* <td className="p-4">{date}</td>
-                        <td className="p-4">{item?.contract}</td> */}
                     </tr>
                 )
             }

src/components/History/RewardsTable.jsx

@@ -7,7 +7,7 @@ import PaginatedList from '../../components/Pagination/PaginatedList';
 
 import LoadingSpinner from '../Spinners/LoadingSpinner';
 
-import { AmountTo2DP } from '../Helpers/PriceFormatter';
+import { currencySymbol } from '../Helpers/PriceFormatter';
 
 
 export const RewardsTable = memo(() => {
@@ -47,7 +47,7 @@ export const RewardsTable = memo(() => {
       }, [])
 
   return (
-    <div className='p-4 flex flex-col justify-between min-h-[500px]'>
+    <div className='py-4 flex flex-col justify-between min-h-[500px] w-full overflow-x-auto'>
     {familyRewardHistory.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : familyRewardHistory.data.length ?
@@ -55,9 +55,9 @@ 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 text-right">Amount</th>
+            <th className="p-4 text-center">Amount</th>
-            <th className="p-4">Date</th>
+            <th className="p-4 text-center">Date</th>
-            <th className="p-4">Confirmation</th>
+            <th className="p-4 text-center">Confirmation</th>
             </tr>
         </thead>
         <tbody>
@@ -65,18 +65,18 @@ export const RewardsTable = memo(() => {
                 let date = new Date(item.added).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 min-w-[300px]">
-                            <div className='flex items-center gap-2'>
+                            <div className='flex w-full 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'>
+                                <div className='flex flex-col w-full'>
                                     <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-4 text-right">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-4 text-right flex-nowrap">{currencySymbol(item.currency, item.amount*0.01)}</td>
-                        <td className="p-4">{date}</td>
+                        <td className="p-4 text-center">{date}</td>
-                        <td className="p-4">{item.confirmation}</td>
+                        <td className="p-4 text-center">{item.confirmation}</td>
                     </tr>
                 )
             }

src/components/History/index.jsx

@@ -127,7 +127,7 @@ export default function History() {
                         </div>
                     </div>
                     <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
-                    <div className="flex-1 overflow-y-auto min-h-[520px]">
+                    <div className="w-full overflow-y-auto min-h-[520px]">
                         <>
                             {/* PURCHASE SECTION */}
                             {selectedTab == 'purchases' &&

src/components/Home/HomeActivities.jsx

@@ -53,7 +53,7 @@ export default function HomeActivities({ className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl relative min-h-[520px] ${
+      className={`update-table w-full bg-white dark:bg-dark-white   overflow-hidden rounded-2xl relative min-h-[520px] ${
         className || ""
       }`}
     >

src/components/MyActiveJobs/ActiveJobMessage.jsx

@@ -19,8 +19,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
     // }
 
   return (
-    <div className='flex flex-col justify-between'>
+    <div className="w-full h-full max-h-[343px] overflow-y-auto">
-    <div className="w-full h-full min-h-[250px] max-h-[300px] overflow-y-auto">
         <table className="wallet-activity w-full table-auto border-collapse text-left">
             <thead className='border-b-2'>
                 <tr className='text-slate-600'>
@@ -71,9 +70,10 @@ export default function ActiveJobMessage({ activeJobMesList }) {
         </table>
     </div>
 
-    {/* PAGINATION BUTTON */}
+    // <div className='flex flex-col justify-between'>
-    {/* <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= activeJobMesList?.data?.length ? true : false} data={activeJobMesList?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> */}
+    // PAGINATION BUTTON
-    {/* END OF PAGINATION BUTTON */}
+    // <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= activeJobMesList?.data?.length ? true : false} data={activeJobMesList?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
-    </div>
+    // END OF PAGINATION BUTTON
+    // </div>
   )
 }

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -12,7 +12,7 @@ import IndexJobActions from "./JobActions/IndexJobActions";
 import usersService from "../../services/UsersService";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { SocketValues } from "../Contexts/SocketIOContext";
-import TabButton from "../customTabs/TabButton";
+import ManageJobTab from "../customTabs/ManageJobTab";
 import AttachFile from "../attachmentCom/AttachFile";
 
 import JobDetailPopout from "./JobDetailPopout";
@@ -390,8 +390,8 @@ function ActiveJobs(props) {
         {/* end of job details */}
       </div>
 
-      <div className="my-4 py-[20px] bg-white dark:bg-black px-4 rounded-2xl shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+      <div className="my-4 py-[20px] bg-white dark:bg-black px-4 rounded-2xl shadow-md grid grid-cols-1 lg:grid-cols-2 gap-3">
-        <div className="w-full lg:w-1/2 mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
+        <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
           <div className="">
             <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
               Actions
@@ -408,7 +408,7 @@ function ActiveJobs(props) {
                 {/* switch button */}
                 <div className="grid grid-cols-2">
                 {tabs.map((item) => (
-                    <TabButton 
+                    <ManageJobTab 
                         key={item}
                         item={item}
                         selectedTab={selectedTab}
@@ -545,14 +545,16 @@ function ActiveJobs(props) {
         </div>
 
         {/* MESSAGE SECTION */}
-        <div className="w-full lg:w-1/2">
+        <div className="w-full flex flex-col">
-          <div className="mb-4">
+          {props.details &&
-            <AttachFile
+            <div className="mb-4">
-              data={props.details}
+              <AttachFile
-              showOnData={true}
+                data={props.details}
-              fontSize={'text-lg'}
+                showOnData={true}
-            />
+                fontSize={'text-lg'}
-          </div>
+              />
+            </div>
+          }
           <div className="flex justify-between items-center gap-5">
             <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
               <span>Message</span>
@@ -671,37 +673,46 @@ const PopModal = ({
             </svg>
           </button>
         </div>
-        <div className="job-action-modal-body w-full px-10 py-8 gap-4">
+        <div className="job-action-modal-body w-full px-10 py-2 gap-4">
-          <div className="w-full flex flex-col items-center">
+          <div className="w-full">
             {activeJobMesList.loading ? (
               <LoadingSpinner size="16" color="sky-blue" />
             ) : (
               <div className="message-table h-[500px] overflow-y-auto">
                 <table className="wallet-activity w-full table-auto border-collapse text-left">
-                  <thead className="border-b-2">
+                  {/* <thead className="border-b-0">
                     <tr className="text-slate-600">
-                      <th className="p-2"></th>
+                      <th className="p-0"></th>
                     </tr>
-                  </thead>
+                  </thead> */}
                   {activeJobMesList?.data?.length ? (
                     <tbody>
-                      {activeJobMesList?.data?.map((item, index) => (
+                      {activeJobMesList?.data?.map((item, index) => {
+                        let imageLink = `${activeJobMesList?.image}${localStorage.getItem('session_token')}/contracts/${item.msg_uid}`
+
+                        return (
                         <tr key={index} className="text-slate-500">
                           <td>
-                            <div className="msg_box">
+                            <div className={`msg_box ${item.who}`}>
                               <div className="msg_header">
                                 {item.msg_date} {item.msg_firstname}
                               </div>
-                              <span
+                              {/* <span
                                 className="p-2"
                                 dangerouslySetInnerHTML={{
                                   __html: item.message,
                                 }}
-                              ></span>
+                              ></span> */}
+                              {item.msg_type == 'FILE' ?
+                                <a href={imageLink} target="_blank" className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></a>
+                                :
+                                <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
+                              }
                             </div>
                           </td>
                         </tr>
-                      ))}
+                        )
+                      })}
                     </tbody>
                   ) : activeJobMesList.error ? (
                     <tbody>

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -6,11 +6,13 @@ import LoadingSpinner from '../../Spinners/LoadingSpinner'
 
 import usersService from '../../../services/UsersService'
 
+import {NewDateTimeFormatter }from '../../../lib/NewDateTimeFormatter'
+
 function CurrentTaskAction({jobDetails}) {
 
     const currTime = new Date().getTime() / (1000*60*60)
     const minDueTime = new Date(jobDetails?.minimum_due).getTime() / (1000*60*60)
-    const canSendForReview = jobDetails.strict_timeline ? currTime >= minDueTime : true // calculation to determine when send for review button will be active
+    const canSendForReview = Number(jobDetails.strict_timeline) ? currTime >= minDueTime : true // calculation to determine when send for review button will be active
 
     const apiCall = new usersService()
     const navigate = useNavigate()
@@ -69,7 +71,7 @@ function CurrentTaskAction({jobDetails}) {
           <div className="h-full w-full text-sm text-left text-gray-500">
             {jobDetails.job_type == 'MEDIA' ?
             <div className="h-full flex justify-center items-center">
-                <button onClick={popUpHandler} type="button" className="btn-gradient h-full text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
+                <button onClick={popUpHandler} type="button" className="btn-gradient h-full text-white px-5 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
                     I have completed this task
                 </button>
             </div>
@@ -82,7 +84,7 @@ function CurrentTaskAction({jobDetails}) {
                 </div>
 
                 <div className="flex justify-center items-center">
-                    <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
+                    <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient px-5 py-2 text-white">
                         Send for Review
                     </button>
                 </div>
@@ -124,7 +126,18 @@ function CurrentTaskAction({jobDetails}) {
                         </button>
                     </div>
                     <div className="job-action-modal-body w-full px-10 py-8 gap-4">
-                        <div className="w-full flex flex-col gap-8 items-center">
+                        <div className="w-full flex flex-col min-h-[150px] gap-8 items-center">
+                            {!canSendForReview ?
+                            <>
+                                <h1 
+                                    // className='font-bold text-base tracking-wide text-dark-gray dark:text-white'
+                                    className='font-bold text-xl tracking-wide text-red-500 text-center'
+                                >
+                                    This task can be marked completed after {NewDateTimeFormatter(jobDetails?.minimum_due)}
+                                </h1>
+
+                            </>
+                            :
                             <>
                                 <div className="flex justify-center items-center gap-2">
                                     <input 
@@ -132,7 +145,6 @@ function CurrentTaskAction({jobDetails}) {
                                         checked={checked} 
                                         onChange={()=>{setChecked(prev => !prev)}} 
                                         className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue' 
-                                        disabled={!canSendForReview}
                                     />
                                     <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>If you have completed this task</p>
                                 </div>
@@ -163,18 +175,8 @@ function CurrentTaskAction({jobDetails}) {
                                 }
                                 {/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
                             
-                                {!canSendForReview &&
-                                <>
-                                    <h1 
-                                        // className='font-bold text-base tracking-wide text-dark-gray dark:text-white'
-                                        className='font-bold text-xl tracking-wide text-red-500 text-center'
-                                    >
-                                        This task requires you use about 80% of the time allocated
-                                    </h1>
-
-                                </>
-                                }
                             </>
+                            }
                         </div> 
                     </div> 
                     {/* cancel btn */}

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -121,7 +121,7 @@ function PastDueJobAction({jobDetails}) {
                         <button 
                             type="button" 
                             onClick={popUpHandler} 
-                            className="custom-btn btn-gradient text-base text-white"
+                            className="custom-btn btn-gradient px-5 py-2 text-base text-white"
                         >
                             Cancel or Extend Timeline
                         </button>

src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx

@@ -129,7 +129,7 @@ function PastDueTaskAction({jobDetails}) {
                         <button 
                             type="button" 
                             onClick={popUpHandler} 
-                            className="custom-btn btn-gradient text-base text-white"
+                            className="custom-btn btn-gradient px-5 py-2 text-base text-white"
                         >
                             Request Extension
                         </button>

src/components/MyActiveJobs/JobDetailPopout.jsx

@@ -36,7 +36,21 @@ export default function JobDetailPopout({action, situation, jobDetail}) {
                     </button>
                 </div>
                 <div className="modal-body-wrapper">
-                    <p className='w-full text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white'>{jobDetail}</p>
+                    {/* <p className='w-full text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white'>{jobDetail}</p> */}
+                    {/* <div 
+                        className='w-full text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white'
+                        dangerouslySetInnerHTML={{__html: jobDetail}}
+                    >
+                    </div> */}
+                    <textarea
+                        id="Job Delivery Details"
+                        readOnly
+                        // rows="5"
+                        className={`w-full h-full overflow-y-auto text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white`}
+                        style={{ resize: "none" }}
+                        name="job_detail"
+                        value={jobDetail}
+                    />
                 </div>
                 <div className="modal-footer-wrapper justify-end">
                     <button

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -3,6 +3,8 @@ import React, {useState} from 'react'
 import PaginatedList from '../../Pagination/PaginatedList';
 import { handlePagingFunc } from '../../Pagination/HandlePagination';
 
+import { currencySymbol } from '../../Helpers/PriceFormatter';
+
 function PurchasesTable({purchase}) {
 
     const [currentPage, setCurrentPage] = useState(0);
@@ -15,7 +17,7 @@ function PurchasesTable({purchase}) {
     }
 
   return (
-    <div className='p-4 flex flex-col justify-between min-h-[500px]'>
+    <div className='py-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'>
@@ -31,8 +33,8 @@ function PurchasesTable({purchase}) {
                     <td className="p-4">{item.added_date}<br />
                     <b>{item.confirmation} </b>
                     </td>
-                    <td className="p-4 text-right">{item.amount}</td>
+                    <td className="p-4 text-right">{currencySymbol(item.currency, item.amount)}</td>
-                    <td className="p-4 text-right">{item.fee}</td>
+                    <td className="p-4 text-right">{currencySymbol(item.currency, item.fee)}</td>
                 </tr>
                 ))}
             </tbody>

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -3,6 +3,8 @@ import React, { useState } from "react";
 import PaginatedList from "../../Pagination/PaginatedList";
 import { handlePagingFunc } from "../../Pagination/HandlePagination";
 
+import { currencySymbol } from '../../Helpers/PriceFormatter';
+
 function RecentActivityTable({ payment }) {
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
@@ -18,7 +20,7 @@ function RecentActivityTable({ payment }) {
   };
 
   return (
-    <div className="p-4 flex flex-col justify-between min-h-[500px]">
+    <div className="py-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">
@@ -38,9 +40,9 @@ function RecentActivityTable({ payment }) {
                   dangerouslySetInnerHTML={{ __html: item.recipient }}
                 ></td>
                 <td className="p-4 text-right">
-                  {item.amount}
+                  {currencySymbol(item.currency, item.amount)}
                   <br />
-                  {item.fee}
+                  {currencySymbol(item.currency, item.fee)}
                 </td>
                 <td className="p-4">{item.status}</td>
               </tr>

src/components/MyWallet/WalletItemCard.jsx

@@ -73,18 +73,22 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
             </div>
           </div>
         </div>
-
+        
-        <p className="text-lg text-white tracking-wide flex justify-center items-center gap-8">
+        {walletItem.escrow > 0 ? 
-          HOLDINGS :{" "}
+          <p className="text-lg text-white tracking-wide flex justify-center items-center gap-8">
-          <span className="xxs:scale-100 lg:scale-100 xl:scale-125">
+            HOLDINGS :{" "}
-            {PriceFormatter(
+            <span className="xxs:scale-100 lg:scale-100 xl:scale-125">
-              walletItem.escrow * 0.01,
+              {PriceFormatter(
-              walletItem.code,
+                walletItem.escrow * 0.01,
-              undefined,
+                walletItem.code,
-              "text-[1.5rem]"
+                undefined,
-            )}
+                "text-[1.5rem]"
-          </span>
+              )}
-        </p>
+            </span>
+          </p>
+          :
+          null
+        }
 
         <div className="w-full h-[1px] bg-white"></div>
 

src/components/Partials/Header.jsx

@@ -413,7 +413,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                         </div>
                       </Link>
                     </li>
-                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                    {(userDetails && userDetails?.account_type !== "FAMILY" && Number(process.env.REACT_APP_SHOW_USER_PAGE) == 1) && (
                       <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
                         <Link to="/yourpage" className="notifications">
                           <div className="name">

src/components/Partials/MediaHeader.jsx

@@ -457,7 +457,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
                         </div>
                       </Link>
                     </li>
-                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                    {(userDetails && userDetails?.account_type !== "FAMILY" && Number(process.env.REACT_APP_SHOW_USER_PAGE) == 1) && (
                       <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
                         <Link to="/yourpage" className="notifications">
                           <div className="name">

src/components/Partials/MobileSideBar.jsx

@@ -92,7 +92,7 @@ export default function MobileSidebar({
               {/* Using mini component reduces the bulk amount of html */}
               <ListItem
                 title={
-                  userDetails?.account_type == "FULL" ? "Dashboard" : "Home"
+                  userDetails?.account_type == "FULL" ? "Home" : "Home"
                 }
                 route="/"
                 sidebar={sidebar}

src/components/Partials/Sidebar.jsx

@@ -112,7 +112,7 @@ export default function Sidebar({
             <ul className="flex flex-col space-y-6">
               {/* Using mini component reduces the bulk amount of html */}
               <ListItem
-                title={userDetails?.account_type == "FULL" ? "Dashboard" : "Home"}
+                title={userDetails?.account_type == "FULL" ? "Home" : "Home"}
                 route="/"
                 sidebar={sidebar}
                 iconName="new-dashboard"

src/components/Resources/tabs/BlogTab.jsx

@@ -2,9 +2,10 @@ import ProductCardStyleTwo from "../../Cards/ProductCardStyleTwo";
 import DataIteration from "../../Helpers/DataIteration";
 import SearchCom from "../../Helpers/SearchCom";
 import ResourceBlogCard from "../../Cards/ResourceBlogCard";
+import NewPaginatedList from '../../../components/Pagination/NewPaginatedList'
 
 export default function BlogTab({ className, blogdata }) {
-  console.log("Blog data here>> ", blogdata);
+  // console.log("Blog data here>> ", blogdata);
   // debugger;
   return (
     <>
@@ -15,33 +16,9 @@ export default function BlogTab({ className, blogdata }) {
             <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
               <SearchCom placeholder='Search Blog Items...' />
             </div>
-            {/* filer-dropdown */}
-            <div className="flex-1 flex sm:justify-end">
-              {/*            <div className="flex space-x-1 items-center">*/}
-              {/*<span className="text-18 text-thin-light-gray">*/}
-              {/*  Recently Received*/}
-              {/*</span>*/}
-              {/*                <span>*/}
-              {/*  <svg*/}
-              {/*      width="20"*/}
-              {/*      height="10"*/}
-              {/*      viewBox="0 0 13 6"*/}
-              {/*      fill="none"*/}
-              {/*      xmlns="http://www.w3.org/2000/svg"*/}
-              {/*  >*/}
-              {/*    <path*/}
-              {/*        opacity="0.7"*/}
-              {/*        d="M12.4124 0.247421C12.3327 0.169022 12.2379 0.106794 12.1335 0.0643287C12.0291 0.0218632 11.917 0 11.8039 0C11.6908 0 11.5787 0.0218632 11.4743 0.0643287C11.3699 0.106794 11.2751 0.169022 11.1954 0.247421L7.27012 4.07837C7.19045 4.15677 7.09566 4.219 6.99122 4.26146C6.88678 4.30393 6.77476 4.32579 6.66162 4.32579C6.54848 4.32579 6.43646 4.30393 6.33202 4.26146C6.22758 4.219 6.13279 4.15677 6.05312 4.07837L2.12785 0.247421C2.04818 0.169022 1.95338 0.106794 1.84895 0.0643287C1.74451 0.0218632 1.63249 0 1.51935 0C1.40621 0 1.29419 0.0218632 1.18975 0.0643287C1.08531 0.106794 0.990517 0.169022 0.910844 0.247421C0.751218 0.404141 0.661621 0.616141 0.661621 0.837119C0.661621 1.0581 0.751218 1.2701 0.910844 1.42682L4.84468 5.26613C5.32677 5.73605 5.98027 6 6.66162 6C7.34297 6 7.99647 5.73605 8.47856 5.26613L12.4124 1.42682C12.572 1.2701 12.6616 1.0581 12.6616 0.837119C12.6616 0.616141 12.572 0.404141 12.4124 0.247421Z"*/}
-              {/*        fill="#374557"*/}
-              {/*        fillOpacity="0.6"*/}
-              {/*    />*/}
-              {/*  </svg>*/}
-              {/*</span>*/}
-              {/*            </div>*/}
-            </div>
           </div>
 
-          <div className="content-section w-full-width">
+          {/* <div className="content-section w-full-width">
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={blogdata?.blogdata}
@@ -57,7 +34,42 @@ export default function BlogTab({ className, blogdata }) {
                 )}
               </DataIteration>
             </div>
+          </div> */}
+
+          {blogdata?.blogdata?.length ?
+          <NewPaginatedList
+              data={blogdata?.blogdata}
+              itemsPerPage={9}
+              filterItem=''
+              tableTitle='' 
+          >
+            {
+              ({data})=>(
+                <div className="filter-navigate-content w-full min-h-[600px]">
+                  <div
+                    className={"grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]"}
+                  >
+                  {
+                    data.map((datum, index) => (
+                      <div key={index}>
+                        <ResourceBlogCard
+                          key={index}
+                          datas={datum}
+                          bg={blogdata.image_url}
+                        />
+                      </div>
+                    ))
+                  }
+                  </div>
+                </div>
+              )
+            }
+          </NewPaginatedList>
+          :
+          <div className="w-full h-[40rem] bg-white dark:bg-dark-white flex justify-center items-center">
+            No Blog Found!
           </div>
+          }
         </div>
       </div>
     </>

src/components/Settings/Tabs/ChangePasswordTab.jsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import Icons from "../../Helpers/Icons";
-import PasswordSvg from "../PasswordSvg";
+// import PasswordSvg from "../PasswordSvg";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import usersService from "../../../services/UsersService";
 import { useNavigate } from "react-router-dom";
@@ -113,14 +113,19 @@ export default function ChangePasswordTab() {
   }
   return (
     <div className="changePasswordTab w-full">
-      <div className="w-full flex xxl:flex-row flex-col-reverse space-x-5 xxl:items-start">
+      <div className="w-full">
-        <div className="flex-1 mb-10">
+        <div className="content-heading w-full mb-8">
+          <h1 className="text-2xl font-extrabold text-black dark:text-white antialiased">
+            Reset Password
+          </h1>
+        </div>
+        <div className="w-full md:w-[calc(100%-100px)] md:ml-auto pb-10">
           <div className="input-field mb-6">
             <label
               className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
               htmlFor="old_password"
             >
-              Old Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.old_pwd) && 'required'}</span>
+              Current Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.old_pwd) && 'required'}</span>
             </label>
             <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] overflow-hidden relative ">
               <div className="absolute left-6 bottom-[17px] z-10">
@@ -202,7 +207,7 @@ export default function ChangePasswordTab() {
               </div>
             </div>
           </div>
-          <div className="flex justify-center space-x-4 items-center">
+          <div className="flex w-full md:w-[calc(100%-128px)] md:ml-auto justify-between gap-4 items-center">
             <button
               type="button"
               className="text-light-red text-18 tracking-wide border-b dark:border-[#5356fb29]  border-light-red"
@@ -246,9 +251,9 @@ export default function ChangePasswordTab() {
             ))}
           {/* End of error or success display */}
         </div>
-        <div className="w-[440px] sm:flex hidden justify-end">
+        {/* <div className="w-[440px] sm:flex hidden justify-end">
           <PasswordSvg />
-        </div>
+        </div> */}
       </div>
     </div>
   );

src/components/Settings/Tabs/Preferences.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Icons from "../../Helpers/Icons";
+
+export default function Preferences() {
+  return (
+    <div className="login-activity-tab w-full">
+      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+          {/* <thead>
+            <tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b ">
+              <td className="py-4 text-center">Channel</td>
+              <td className="py-4 text-center">Date</td>
+              <td className="py-4 text-center">Location</td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+              <td className="text-center py-4">
+                <div className="flex items-center justify-center">
+                  <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap px-2">
+                    Desktop
+                  </span>
+                </div>
+              </td>
+              <td className="text-center py-4">
+                <div className="flex space-x-1 items-center justify-center">
+                  <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap px-2">
+                    10-10-2035
+                  </span>
+                </div>
+              </td>
+              <td className="text-center py-4">
+                <span className="text-base text-dark-gray dark:text-white whitespace-nowrap px-2">
+                  10.0.0.1000
+                </span>
+              </td>
+            </tr>
+          </tbody> */}
+        </table>
+      </div>
+    </div>
+  );
+}

src/components/Settings/Tabs/RecipientAccountTab.jsx

@@ -80,7 +80,7 @@ export default function RecipientAccountTab({
               })
             ) : (
               <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                No Cards Found
+                No Recipient on this account yet.
               </h1>
             )}
           </ul>

src/components/Settings/Tabs/index.jsx

@@ -7,6 +7,7 @@ import PersonalInfoTab from "./PersonalInfoTab";
 import PrivacyPolicyTab from "./PrivacyPolicyTab";
 import RecentActivitiesTab from "./RecentActivitiesTab";
 import TermsConditionTab from "./TermsConditionTab";
+import Preferences from './Preferences'
 
 export {
   ChangePasswordTab,
@@ -18,4 +19,5 @@ export {
   PrivacyPolicyTab,
   RecentActivitiesTab,
   TermsConditionTab,
+  Preferences
 };

src/components/Settings/index.jsx

@@ -13,6 +13,7 @@ import {
   PrivacyPolicyTab,
   RecentActivitiesTab,
   TermsConditionTab,
+  Preferences,
 } from "./Tabs";
 import RecipientAccountTab from "./Tabs/RecipientAccountTab";
 
@@ -91,8 +92,8 @@ export default function Settings({ faq }) {
     },
     {
       id: 5,
-      name: "login_activity",
+      name: "preferences",
-      title: "Login Activity",
+      title: "Preferences",
       iconName: "login-activity",
     },
     {
@@ -166,7 +167,7 @@ export default function Settings({ faq }) {
         <NotificationSettingTab />
       </div>
     ),
-    login_activity: <LoginActivityTab />,
+    preferences: <Preferences />,
     recent_activities: <RecentActivitiesTab />,
     password: <ChangePasswordTab />,
     faq: <FaqTab datas={faq} />,

src/components/customTabs/ManageJobTab.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import Icons from '../Helpers/Icons'
+
+export default function ManageJobTab({ 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 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+        selectedTab === item ? "text-purple" : " text-thin-light-gray"
+      }`}
+      value={item}
+      name={item}
+      onClick={() => setSelectedTab(item)}
+    >
+      <div>
+        <Icons name={iconName} />
+      </div>
+      <div>
+        <p className="text-18 tracking-wide">{item[0]?.toUpperCase() + item?.slice(1)}</p>
+      </div>
+    </button>
+  )
+}
+

src/components/jobPopout/PendingJobsPopout.jsx

@@ -5,6 +5,7 @@ import usersService from "../../services/UsersService";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
+import {PriceFormatter} from '../Helpers/PriceFormatter'
 
 import { useDispatch } from "react-redux";
 import { NewDateTimeFormatter } from "../../lib/NewDateTimeFormatter";

src/index.css

@@ -53,7 +53,7 @@
 .job-action {
   background-color: #4687ba;
   border-radius: 15px;
-  padding: 3px;
+  padding: 10px;
 }
 
 .msg_box {

src/services/UsersService.js

@@ -126,7 +126,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
     };
-    return this.postAuxEnd("/getwallets", postData);
+    return this.postAuxEnd("/wallets", postData);
   }
   getApiGate() {
     // localStorage.setItem("session_token", ``);