made currency to auto select during add job if user has only one wallet acct

src/components/AddJob/AddJob.jsx

@@ -72,9 +72,21 @@ function AddJob({ popUpHandler, categories }) {
     }
   };
 
+  // For form initial values
+  const initialValues = {
+    // initial values for formik
+    country: walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
+    price: "",
+    title: "",
+    description: "",
+    job_detail: "",
+    timeline_days: "",
+    category: [],
+  };
+
   return (
     <Formik
-        initialValues={IV}
+        initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={handleAddJob}
       >
@@ -105,12 +117,13 @@ function AddJob({ popUpHandler, categories }) {
                           className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
                           onChange={props.handleChange}
                           onBlur={props.handleBlur}
+                          disabled={walletDetails.data.length == 1}
                         >
                           {walletDetails?.loading ? (
                             <option className="text-slate-500 text-lg" value="">
                               Loading...
                             </option>
-                          ) : walletDetails.data.length ? (
+                          ) : walletDetails.data.length > 1 ? (
                             <>
                               <option className="text-slate-500 text-lg" value="">
                                 Select a currency
@@ -125,7 +138,19 @@ function AddJob({ popUpHandler, categories }) {
                                 </option>
                               ))}
                             </>
-                          ) : (
+                          ) : walletDetails.data.length == 1 ?
+                          <>
+                            {walletDetails.data?.map((item, index) => (
+                              <option
+                                key={index}
+                                className="text-slate-500 text-lg"
+                                value={item?.country}
+                              >
+                                {item?.description}
+                              </option>
+                            ))}
+                          </>
+                          :(
                             <option className="text-slate-500 text-lg" value="">
                               No Options Found! Try Again
                             </option>

src/components/History/RewardsTable.jsx

@@ -1,4 +1,4 @@
-import React, {memo, useCallback, useEffect, useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import Image from '../../assets/images/taskbanners/default.jpg'
 
 import usersService from '../../services/UsersService';
@@ -9,8 +9,8 @@ import LoadingSpinner from '../Spinners/LoadingSpinner';
 
 import { AmountTo2DP } from '../Helpers/PriceFormatter';
 
+function RewardsTable() {
 
-export const RewardsTable = memo(() => {
     const apiCall = new usersService()
 
     let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
@@ -30,7 +30,7 @@ export const RewardsTable = memo(() => {
 
 
     //FUNCTION TO GET FAMILY REWARD HISTORY
-    const getFamilyRewardHistory = useCallback(()=>{
+    const getFamilyRewardHistory = ()=>{
         apiCall.getFamilyRewardHx().then((res)=>{
             if(res.data.internal_return < 0){ // success but no data
                 setFamilyRewardHistory(prev => ({...prev, loading: false}))
@@ -40,7 +40,7 @@ export const RewardsTable = memo(() => {
         }).catch((error)=>{
             setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
         })
-    },[])
+    }
 
     useEffect(()=>{
         getFamilyRewardHistory()
@@ -99,5 +99,5 @@ export const RewardsTable = memo(() => {
     </div>
   )
 }
-)
+
 export default RewardsTable

src/components/History/index.jsx

@@ -13,15 +13,11 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import RewardsTable from "./RewardsTable";
 import JobsCompleted from "./JobsCompleted";
 
-import TabButton from "../customTabs/TabButton";
-
 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 [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
         loading: true,
@@ -226,18 +222,7 @@ export default function History() {
             {/* <TopHxBox className="mb-11" /> */}
             <div className='w-full p-4 md:p-8 bg-white dark:bg-dark-white rounded-2xl shadow bottomMargin'>
                 {/* switch button */}
-                <div className="grid grid-cols-4 mt-4">
-                {tabs.map((item) => (
-                    <TabButton 
-                        key={item}
-                        item={item}
-                        selectedTab={selectedTab}
-                        setSelectedTab={setSelectedTab}
-                    />
-                ))}
-                </div>
-                {/* switch button */}
-                {/* <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
+                <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
                     <button
                     name="purchases"
                     onClick={(e) => setTab(e.target.name)}
@@ -274,12 +259,12 @@ export default function History() {
                     >
                     Jobs Completed
                     </button>
-                </div> */}
+                </div>
                 {/* END OF switch button */}
-                <div className="history-tables w-full bg-red-50 overflow-x-auto">
+                <div className="history-tables w-full">
                     {/* PURCHASE SECTION */}
-                    {selectedTab == 'purchases' &&
-                        <div className="wallet w-full">
+                    {tab == 'purchases' &&
+                        <div className="wallet w-full border-t">
                             {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1> */}
                             {purchaseHistory.loading ? 
                             <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
@@ -291,8 +276,8 @@ export default function History() {
                     {/* END OF PURCHASE SECTION */}
                     
                     {/* RECENT ACTIVITY SECTION */}
-                    {selectedTab == 'recent activity' &&
-                        <div className="wallet w-full">
+                    {tab == 'recent' &&
+                        <div className="wallet w-full border-t">
                             {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1> */}
                             {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                             {paymentHistory.loading ? 
@@ -305,16 +290,16 @@ export default function History() {
                     {/* END OF RECENT ACTIVITY SECTION */}
 
                     {/* REWARD SECTION */}
-                    {selectedTab == 'rewards' &&
-                        <div className="wallet w-full">
+                    {tab == 'reward' &&
+                        <div className="wallet w-full border-t">
                             <RewardsTable />
                         </div>
                     }
                     {/* END OF REWARD SECTION */}
 
                     {/* JOBS COMPLETED SECTION */}
-                    {selectedTab == 'jobs completed' &&
-                        <div className="wallet w-full">
+                    {tab == 'jobs_completed' &&
+                        <div className="wallet w-full border-t">
                             <JobsCompleted />
                         </div>
                     }

src/components/MyWallet/WalletBox.jsx

@@ -22,7 +22,7 @@ export default function WalletBox({ wallet, payment, countries }) {
             </div>
           ) : (
             data.length > 0 && data.map((item) => (
-              <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
+              <div key={item.wallet_uid} className="max-w-[450px] w-full h-full mb-10 lg:mb-0">
                 <WalletItemCard walletItem={item} payment={payment} countries={countries} />
               </div>
             ))

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -24,7 +24,7 @@ function RecentActivityTable({ payment }) {
           <thead className="border-b-2">
             <tr className="text-slate-600">
               <th className="p-2">Date</th>
-              <th className="p-2">Trx.</th>
+              <th className="p-4">Trx.</th>
               <th className="p-2">Amnt./Fee</th>
               <th className="p-2">Status</th>
             </tr>

src/components/Partials/RightSideBar.jsx

@@ -40,7 +40,7 @@ export default function RightSideBar({ myJobList }) {
   return (
     <>
       <div className="right-sidebar-wrapper overflow-y-scroll overflow-style-none 2xl:fixed h-full 2xl:pb-96">
-        <div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 w-full 2xl:mb-6 2xl:border-none border ">
+        <div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-6 2xl:border-none border ">
           {/* heading */}
           <div className="heading flex justify-between items-center mb-3.5">
             <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
@@ -280,7 +280,7 @@ export default function RightSideBar({ myJobList }) {
         {/*JOB LINKS*/}
         {userDetails?.account_type !== "FAMILY" &&
           myJobList?.data?.result_list?.length > 0 && (
-            <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 w-full 2xl:mb-10 2xl:border-none border ">
+            <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none border ">
               {/* heading */}
               <div className="px-8 heading flex justify-between items-center mb-3.5">
                 <h3 className="text-xl font-bold   text-dark-gray dark:text-white">

src/components/customTabs/TabButton.jsx

@@ -1,26 +0,0 @@
-import React from 'react'
-
-export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>{} }) {
-  return (
-    <button
-      className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
-        selectedTab === item
-          ? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
-          : "bg-white text-[#000]"
-      }`}
-      value={item}
-      name={item}
-      onClick={() => setSelectedTab(item)}
-    >
-      <div
-        className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
-          selectedTab === item
-            ? "border-white bg-emerald-500"
-            : "border-red-50 dark:border-[#D85A5A] bg-white"
-        }`}
-      ></div>
-      {item[0].toUpperCase() + item.slice(1)}
-    </button>
-  )
-}
-