Family page Tasks

src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx

@@ -117,7 +117,7 @@ export default function FamilyManageTabs({
 
   return (
     <div
-      className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
         className || ""
       }`}
     >

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -5,16 +5,12 @@ import { handlePagingFunc } from "../../Pagination/HandlePagination";
 import PaginatedList from "../../Pagination/PaginatedList";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import Icons from "../../Helpers/Icons";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
 
 export default function FamilyTasks({ familyData, className, loader }) {
-  const filterCategories = ["All Categories", "Explore", "Featured"];
-  const [selectedCategory, setCategory] = useState(filterCategories[0]);
-
   let navigate = useNavigate();
   let { pathname } = useLocation();
 
-  let data = ["1", "2", "3", "4", "5", "6"]; // to be replaced later by result from API CALL
-
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
@@ -24,10 +20,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
     indexOfLastItem
   );
 
-
+  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
-  const handlePagination = (e) => {
-    handlePagingFunc(e, setCurrentPage);
-  };
 
   return (
     <div
@@ -52,8 +45,14 @@ export default function FamilyTasks({ familyData, className, loader }) {
                         familyData?.result_list &&
                         familyData.result_list.length > 0 &&
                         currentTask.map((value, index) => {
-  // find due date
+                          // find due date
-  const dueDate = value?.delivery_date.split(" ")[0]
+                          const dueDate = value?.delivery_date.split(" ")[0];
+                          // the price
+                          let thePrice = PriceFormatter(
+                            value?.price * 0.01,
+                            value?.currency_code,
+                            value?.currency
+                          );
                           return (
                             <tr
                               key={index}
@@ -73,37 +72,42 @@ export default function FamilyTasks({ familyData, className, loader }) {
                                       {value.title}
                                     </h1>
                                     <div className="flex gap-4 items-center">
-                                    <span className="text-sm text-thin-light-gray">
+                                      <span className="text-sm text-thin-light-gray">
-                                      Price:{" "}
+                                        Price:{" "}
-                                      <span className="text-purple">
+                                        <span className="text-purple">
-                                        {value.price * 0.01}
+                                          {thePrice}
+                                        </span>
                                       </span>
-                                    </span>
+                                      <span className="text-sm text-thin-light-gray">
-                                    <span className="text-sm text-thin-light-gray">
+                                        Duration:{" "}
-                                      Duration:{" "}
+                                        <span className="text-purple">
-                                      <span className="text-purple">
+                                          {" "}
-                                        {" "}
+                                          {value.timeline_days} day(s)
-                                        {value.timeline_days} day(s)
+                                        </span>
                                       </span>
-                                    </span>
+                                      <span className="text-sm text-thin-light-gray">
-                                    <span className="text-sm text-thin-light-gray">
+                                        Due Date:{" "}
-                                      Due Date:{" "}
+                                        <span className="text-purple">
-                                      <span className="text-purple">
+                                          {" "}
-                                        {" "}
+                                          {dueDate}
-                                        {dueDate}
+                                        </span>
                                       </span>
-                                    </span>
                                     </div>
                                   </div>
                                 </div>
                               </td>
-  
+
                               <td className="text-right py-4 px-2">
                                 <button
                                   type="button"
                                   onClick={() => {
                                     navigate("/manage-active-job", {
-                                      state: { ...value, pathname },
+                                      state: {
+                                        ...value,
+                                        pathname,
+                                        dueDate,
+                                        thePrice,
+                                      },
                                     });
                                   }}
                                   className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
@@ -112,7 +116,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
                                 </button>
                               </td>
                             </tr>
-                          )
+                          );
                         })}
                     </>
                   }

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -68,13 +68,13 @@ export default function InputCom({
         )}
       </div>
       <div
-        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
+        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
       >
         <input
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
+          className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide ${
             inputBg ? inputBg : "bg-[#FAFAFA]"
           } dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
           type={type}

src/components/History/index.jsx

@@ -241,7 +241,7 @@ export default function History() {
                 </div>
                 {/* END OF RECENT ACTIVITY SECTION */}
             </div>
-            <HistoryTable />
+            {/*<HistoryTable />*/}
           </div>
         </div>
       </Layout>

src/components/MyWallet/WalletComponent/ReferralTable.jsx

@@ -15,7 +15,7 @@ function ReferralTable({history}) {
     }
 
   return (
-    <div className='flex flex-col justify-between h-full'>
+    <div className='flex flex-col justify-between min-h-[420px] overflow-x-auto'>
         <table className="referral-list w-full table-auto border-collapse text-left">
             <thead className='border-b-2'>
                 <tr className='text-slate-600'>

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -75,7 +75,7 @@ export default function ManageInterestOffer(props) {
                                     type="button"
                                     className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
                                     onClick={() =>
-                                        navigate(props.offerDetails.pathname, { replace: true })
+                                        navigate('/offer-interest', { replace: true })
                                     }
                                     >
                                     <svg
@@ -161,7 +161,7 @@ export default function ManageInterestOffer(props) {
                                 </div>
                                 {/* message list */}
                                 {currentMessageList.map((item, index)=>(
-                                    <div className="my-3 w-full">
+                                    <div key={index} className="my-3 w-full">
                                         <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
                                         <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
                                     </div>

src/components/OffersInterest/OffersInterestTable.jsx

@@ -52,9 +52,9 @@ export default function OffersInterestTable({offerInterestList, className}) {
                             </tr> */}
                             </thead>
                             <tbody className="h-full">
-                            {currentOfferInterestList?.map((item, idx) => {
+                            {currentOfferInterestList?.map((item, index) => {
                                 return (
-                                <tr key={item?.offer_uid} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                                <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                     <td className=" py-4">
                                         <div className="flex space-x-2 items-center">
                                             <div className="min-w-[60px] min-h-[60px] rounded-full overflow-hidden flex justify-center items-center">

src/components/OffersInterest/OthersInterestedTable.jsx

@@ -4,6 +4,8 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate, useLocation, Link } from "react-router-dom";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
+import { useDispatch } from "react-redux";
+import { tableReload } from "../../store/TableReloads";
 
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
@@ -11,6 +13,7 @@ import familyImage from '../../assets/images/no-family-side.png'
 
 export default function OthersInterestTable({othersInterestedList, className}) {
 
+    const dispatch = useDispatch()
     const navigate = useNavigate();
     let { pathname } = useLocation();
     
@@ -52,9 +55,9 @@ export default function OthersInterestTable({othersInterestedList, className}) {
                             </tr> */}
                             </thead>
                             <tbody className="h-full">
-                            {currentOthersInterestedList?.map((item, idx) => {
+                            {currentOthersInterestedList?.map((item, index) => {
                                 return (
-                                <tr key={item?.offer_uid} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                                <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                     <td className=" py-4">
                                         <div className="flex space-x-2 items-center">
                                             <div className="min-w-[60px] min-h-[60px] rounded-full overflow-hidden flex justify-center items-center">
@@ -87,6 +90,7 @@ export default function OthersInterestTable({othersInterestedList, className}) {
                                     <td className="text-right py-4">
                                         <button
                                             onClick={() => {
+                                                dispatch(tableReload({type:'OTHERSINTERESTEDTABLE'}))
                                                 navigate("/manage-offer", {
                                                     state: { ...item, pathname },
                                                 });

src/components/Referral/ReferralDisplay.jsx

@@ -116,10 +116,21 @@ function ReferralDisplay() {
   }, [refHistoryReload]);
 
   return (
-    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+    <div className="content-wrapper w-full lg:flex xl:space-x-8  bottomMargin">
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+      <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-        <div className="referral w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
+        <div className="sm:flex justify-between items-center mb-6">
-          <h2 className="text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+          <div className="mb-5 sm:mb-0">
+            <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
+                <span>
+                 Refer a Friend
+                </span>
+            </h1>
+          </div>
+
+        </div>
+
+        <div className="referral w-full  md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+          <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
             Send Referral
           </h2>
           <Formik
@@ -129,42 +140,44 @@ function ReferralDisplay() {
           >
             {(props) => (
               <Form className="referral-info">
-                {/* Firstname */}
+                <div className="block md:mb-6 md:flex gap-10">
-                <div className="field w-full mb-6">
+                  {/* Firstname */}
-                  <InputCom
+                  <div className="field w-full mb-6 md:mb-0">
-                    fieldClass="px-6"
+                    <InputCom
-                    label="Firstname"
+                      fieldClass="px-6"
-                    type="text"
+                      label="Firstname"
-                    name="firstname"
+                      type="text"
-                    placeholder="Firstname"
+                      name="firstname"
-                    value={props.values.firstname}
+                      placeholder="Firstname"
-                    inputHandler={props.handleChange}
+                      value={props.values.firstname}
-                    blurHandler={props.handleBlur}
+                      inputHandler={props.handleChange}
-                  />
+                      blurHandler={props.handleBlur}
-                  {props.errors.firstname && props.touched.firstname && (
+                    />
-                    <p className="text-sm text-red-500">
+                    {props.errors.firstname && props.touched.firstname && (
-                      {props.errors.firstname}
+                      <p className="text-sm text-red-500">
-                    </p>
+                        {props.errors.firstname}
-                  )}
+                      </p>
-                </div>
+                    )}
+                  </div>
 
-                {/* Lastname */}
+                  {/* Lastname */}
-                <div className="field w-full mb-6">
+                  <div className="field w-full mb-6 md:mb-0">
-                  <InputCom
+                    <InputCom
-                    fieldClass="px-6"
+                      fieldClass="px-6"
-                    label="Lastname"
+                      label="Lastname"
-                    type="text"
+                      type="text"
-                    name="lastname"
+                      name="lastname"
-                    placeholder="Lastname"
+                      placeholder="Lastname"
-                    value={props.values.lastname}
+                      value={props.values.lastname}
-                    inputHandler={props.handleChange}
+                      inputHandler={props.handleChange}
-                    blurHandler={props.handleBlur}
+                      blurHandler={props.handleBlur}
-                  />
+                    />
-                  {props.errors.lastname && props.touched.lastname && (
+                    {props.errors.lastname && props.touched.lastname && (
-                    <p className="text-sm text-red-500">
+                      <p className="text-sm text-red-500">
-                      {props.errors.lastname}
+                        {props.errors.lastname}
-                    </p>
+                      </p>
-                  )}
+                    )}
+                  </div>
                 </div>
 
                 <div className="field w-full mb-6">
@@ -193,8 +206,7 @@ function ReferralDisplay() {
                   ) : (
                     <button
                       type="submit"
-                      className="text-lg text-white bg-sky-blue p-2 hover:opacity-90 rounded-md"
+                      className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"                    >
-                    >
                       Send Message
                     </button>
                   )}
@@ -203,20 +215,20 @@ function ReferralDisplay() {
             )}
           </Formik>
         </div>
-      </div>
 
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+        <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-        <div className="referral w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
           <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
             Referral List
           </h2>
           {referralList.loading ? (
-            <LoadingSpinner size="32" color="sky-blue" />
+              <LoadingSpinner size="32" color="sky-blue" />
           ) : (
-            <ReferralTable history={referralList} />
+              <ReferralTable history={referralList} />
           )}
         </div>
       </div>
+
+
     </div>
   );
 }

src/index.css

@@ -10,6 +10,9 @@
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
 
+.referral{
+  margin-bottom: 20px
+}
 .heroSilderTitle{
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   font-family: sans; color: white;

src/store/TableReloads.js

@@ -3,7 +3,8 @@ import { createSlice } from "@reduxjs/toolkit";
 const initialState = {
   jobListTable: false,
   pendingListTable: false,
-  myTaskTable: false
+  myTaskTable: false,
+  othersInterestedTable: false
 };
 
 export const tableReloadSlice = createSlice({
@@ -21,6 +22,9 @@ export const tableReloadSlice = createSlice({
         case 'MYTASKTABLE' :
           state.myTaskTable = !state.myTaskTable;
           return
+        case 'OTHERSINTERESTEDTABLE' :
+          state.othersInterestedTable = !state.othersInterestedTable;
+          return
         default:
           return state
       }

src/views/ManageInterestOfferPage.jsx

@@ -9,6 +9,7 @@ export default function MyReviewDueJobsPage() {
     let navigate = useNavigate()
 
     let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+    let { othersInterestedTable } = useSelector((state) => state.tableReload);
 
     const apiCall = new usersService();
     const [othersInterestedList, setOthersInterestedList] = useState({loading: true, data: []})
@@ -19,12 +20,18 @@ export default function MyReviewDueJobsPage() {
             return
         }
         apiCall.offersInterestList().then(res => {
-            setOthersInterestedList({loading: false, data: res.data.result_list})
+            let newData
+            if(res.data.result_list.length){
+                newData = res.data.result_list.filter(item => item.offer_code == state.offer_code && item.client_uid != state.client_uid)
+            }else{
+                newData = []
+            }
+            setOthersInterestedList({loading: false, data: newData})
         }).catch(err => {
             setOthersInterestedList({loading: false, data: []})
             console.log('Error: ', err)
         })
-    }, []);
+    }, [othersInterestedTable]);
 
     // debugger;
     return (