Merge master into session-implement

src/components/AuthPages/Login/index.jsx

@@ -17,6 +17,10 @@ import { updateUserDetails } from "../../../store/UserDetails";
 import ReCAPTCHA from "react-google-recaptcha";
 
 export default function Login() {
+
+  const queryParams = new URLSearchParams(location?.search);
+  const sessionExpired = queryParams.get("sessionExpired")
+
   const dispatch = useDispatch();
   const { state } = useLocation();
 
@@ -255,6 +259,13 @@ export default function Login() {
                   </Link>
                 </span>
               </div>
+              
+              {/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
+              {sessionExpired == 'true' &&
+              <div className="w-full p-1">
+                <p className="text-red-500 text-sm text-center">Your session expired and will need to login again</p>
+              </div>
+              }
 
               {/* switch login component */}
               <div className="ml-7 flex justify-start items-center gap-3">

src/components/AuthPages/SignUp/index.jsx

@@ -6,6 +6,7 @@ import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 
 export default function SignUp() {
+  // eslint-disable-next-line no-restricted-globals
   const queryParams = new URLSearchParams(location?.search);
   const country = queryParams.get("cnt")?.toUpperCase();
   

src/components/AuthPages/VerifyLink/index.jsx

@@ -54,6 +54,8 @@ export default function VerifyLink() {
             localStorage.setItem("member_id", `${data?.member_id}`);
             localStorage.setItem("session_token", `${data?.session}`);
             localStorage.setItem("session", `${data?.session}`);
+            localStorage.setItem("uid", data?.uid)
+
 
             navigate("/", { replace: true });
             setLinkLoader(false);

src/components/FamilyAcc/FamilyTable.jsx

@@ -53,6 +53,7 @@ export default function FamilyTable({
     family_uid,
     banner,
     enable_traking,
+    profile_picture,
   }) => {
     // Check for valid dates
     const addedDate = added ? added.split(" ")[0] : "N/A";
@@ -60,7 +61,11 @@ export default function FamilyTable({
     const key = `family-${family_uid}`; // Assign a unique key
 
     const trackingStatus =
-      enable_traking === "0" ? "Stopped" : enable_traking === "100" ? "Active" : "";
+      enable_traking === "0"
+        ? "Stopped"
+        : enable_traking === "100"
+        ? "Active"
+        : "";
 
     return (
       <tr
@@ -71,7 +76,8 @@ export default function FamilyTable({
           <div className="flex space-x-2 items-center w-full">
             <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
               <img
-                src={localImgLoad(`images/icons/${banner}`)}
+                src={profile_picture}
+                // src={profile_picture || localImgLoad(`images/icons/${banner}`)}
                 alt={`Avatar of ${firstname} ${lastname}`}
                 className="w-full h-full"
               />
@@ -130,17 +136,27 @@ export default function FamilyTable({
               })
             }
             type="button"
-            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
           >
-            Manage
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 11 20"
+              id="Arrow"
+              className="w-[0.7rem]"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                fill="#4687ba"
+                className="color000000 svgShape"
+              ></path>
+            </svg>
           </button>
         </td>
       </tr>
     );
   };
 
-  console.log(currentFamilyList);
-
   return (
     <div
       className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] flex flex-col justify-between ${

src/components/FamilyAcc/Tabs/FamilyProfile.jsx

@@ -49,12 +49,12 @@ export default function FamilyProfile({ familyData, className }) {
 
   // initial values for formik
   let initialValues = {
-    family_uid: familyData.uid,
-    firstname: familyData.firstname,
-    lastname: familyData.lastname,
-    year: familyData.year,
-    month: familyData.month,
-    enable_traking: familyData.enable_traking,
+    family_uid: familyData?.uid,
+    firstname: familyData?.firstname,
+    lastname: familyData?.lastname,
+    year: familyData?.year,
+    month: familyData?.month,
+    enable_traking: familyData?.enable_traking,
     action: 22020,
   };
 

src/components/FamilyAcc/index.jsx

@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import SiteService from "../../services/SiteService";
+import usersService from "../../services/UsersService";
 import InputCom from "../Helpers/Inputs/InputCom";
 import ModalCom from "../Helpers/ModalCom";
 import Layout from "../Partials/Layout";
@@ -27,7 +27,7 @@ export default function FamilyAcc() {
     last_name: "",
   });
 
-  const apiCall = useMemo(() => new SiteService(), []);
+  const apiCall = useMemo(() => new usersService(), []);
 
   const popUpHandler = () => {
     setPopUp((prev) => !prev);

src/components/FourZeroFour/index.jsx

@@ -2,6 +2,8 @@ import React from "react";
 // import Lottie from "react-lottie";
 import { useNavigate } from "react-router-dom";
 import * as animationData from "../../assets/images/Lotties/77618-website-404-error-animation.json";
+import { localImgLoad } from "../../lib";
+// import BgError from '../../assets/images/wrench-page-notfound.jpg'
 
 export default function FourZeroFour() {
   const navigate = useNavigate();
@@ -14,16 +16,21 @@ export default function FourZeroFour() {
     },
   };
   return (
-    <div className="flex justify-center items-center w-full h-screen bg-[#232247]">
-      <div>
+    <div className={`my-custom-bg-class flex justify-center items-center w-full min-h-screen before:content-[''] before:absolute before:inset-0 before:bg-[#cdcdcd]/[.8]`}>
+      <div className="relative pt-32 max-w-3xl">
         {/* <Lottie options={defaultOptions} width={600} height={600} /> */}
-        <div className="flex justify-center">
+        <div className="px-16 md:px-24 flex flex-col items-center justify-center gap-4">
+          <img src={localImgLoad('images/404.png')} className="w-72" alt='404Image' />
+          <p className="mt-8 text-red-600 font-black text-4xl md:text-5xl tracking-wider text-center">Sorry!</p>
+          <h1 className="text-black text-4xl md:text-5xl font-black tracking-wide text-center leading-tight">The page can’t be found.</h1>
+          <p className="px-2 md:px-8 text-slate-700 text-base md:text-lg text-center">The page you're looking for isn't available. Use the go back button below</p>
           <button
             onClick={() => navigate(-1)}
             type="button"
-            className="btn-gradient text-white text-lg w-[150px] h-[50px] rounded-full"
+            className="px-4 md:px-8 border-2 border-[#2b70fa] rounded-lg text-[#007bff] text-base md:text-lg h-[48px] flex justify-center items-center gap-1"
           >
-            Go Back
+            <span>Go Back</span>
+            <span className="pb-1">&rarr;</span>
           </button>
         </div>
       </div>

src/components/History/RewardsTable.jsx

@@ -49,12 +49,12 @@ function RewardsTable() {
   return (
     <div className='flex flex-col justify-between min-h-[500px]'>
     {familyRewardHistory.loading ? 
-    <LoadingSpinner size='16' color='sky-blue' height='h-full' />
+    <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     :
     <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">Description</th>
+            <th className="p-2"></th>
             <th className="p-2">Amount</th>
             <th className="p-2">Date</th>
             <th className="p-2">Confirmation</th>
@@ -71,7 +71,7 @@ function RewardsTable() {
                             <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>
+                                    <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname}</h1>
                                     <p className='text-sm'>{item.description}</p>
                                 </div>
                             </div>

src/components/History/index.jsx

@@ -282,8 +282,6 @@ export default function History() {
                     {/* REWARD SECTION */}
                     {tab == 'reward' &&
                         <div className="wallet w-full border-t">
-                            <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Rewards</h1>
-                            {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                             <RewardsTable />
                         </div>
                     }

src/components/jobPopout/JobListPopout.jsx

@@ -1,7 +1,7 @@
 import { Field, Form, Formik } from "formik";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import * as Yup from "yup";
-import SiteService from "../../services/SiteService";
+import usersService from "../../services/UsersService";
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -36,7 +36,7 @@ const dispatch = useDispatch()
     },
   });
 
-  const apiCall = useMemo(() => new SiteService(), []);
+  const apiCall = useMemo(() => new usersService(), []);
 
   // member listing
   const memberList = useCallback(async () => {

src/index.css

@@ -304,6 +304,12 @@ input[type="text"][dir="rtl"] {
     transform: rotate(360deg);
   }
 }
+
+.my-custom-bg-class{
+  background: url("./assets/images/wrench-page-notfound.jpg") center/cover;
+  position: relative;
+}
+
 /* TODO: =================================default end================================ */
 /* TODO: =================================update password================================ */
 .content-wrapper.thankyou-section {

src/services/UsersService.js

@@ -1237,6 +1237,10 @@ class usersService {
         console.log(response);
         // res = response;
         console.log("~~~~~~~ Toks2 POST ~~~~~~~~");
+        if(response.data.internal_return == '-9999'){
+          localStorage.clear()
+          window.location.href=`/login?sessionExpired=true`
+        }
         return response;
       })
       .catch((error) => {