fixed height issues

.env

@@ -91,4 +91,8 @@ REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
 
 #GOOGLE RECAPTCHA SITEKEY
 REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
-#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+
+#FAMILY MEMBER MINIMUM AGE
+REACT_APP_FAMILY_MINIMUM_AGE=4
+REACT_APP_FAMILY_MAXIMUM_AGE=18

.env.development

@@ -59,4 +59,8 @@ REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
 
 #GOOGLE RECAPTCHA SITEKEY
 REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
-#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+
+#FAMILY MEMBER MINIMUM AGE
+REACT_APP_FAMILY_MINIMUM_AGE=4
+REACT_APP_FAMILY_MAXIMUM_AGE=18

.env.production

@@ -66,3 +66,7 @@ REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
 #GOOGLE RECAPTCHA SITEKEY
 REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
 #6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+
+#FAMILY MEMBER MINIMUM AGE
+REACT_APP_FAMILY_MINIMUM_AGE=4
+REACT_APP_FAMILY_MAXIMUM_AGE=18

.gitignore

@@ -19,6 +19,8 @@
 .env.test.local
 .env.production.local
 
+#package-lock.json
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

package-lock.json

@@ -22,13 +22,17 @@
         "flutterwave-react-v3": "^1.3.0",
         "formik": "^2.2.9",
         "react": "^18.2.0",
+        "react-apple-login": "^1.1.6",
         "react-chartjs-2": "^4.1.0",
         "react-countup": "^6.2.0",
         "react-dom": "^18.2.0",
+        "react-google-recaptcha": "^3.1.0",
+        "react-qr-code": "^2.0.11",
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.0.2",
         "react-scripts": "5.0.1",
         "react-slick": "^0.29.0",
+        "react-to-print": "^2.14.12",
         "react-toastify": "^9.0.1",
         "redux": "^4.2.0",
         "slick-carousel": "^1.8.1",
@@ -14801,6 +14805,11 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qr.js": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="
+    },
     "node_modules/qs": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@@ -14944,6 +14953,32 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/react-apple-login": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/react-apple-login/-/react-apple-login-1.1.6.tgz",
+      "integrity": "sha512-ySV6ax0aB+ksA7lKzhr4MvsgjwSH068VtdHJXS+7rL380IJnNQNl14SszR31k3UqB8q8C1H1oyjJFGq4MyO6tw==",
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.5.4",
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-chartjs-2": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz",
@@ -15044,11 +15079,41 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "node_modules/react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-qr-code": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.12.tgz",
+      "integrity": "sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "qr.js": "0.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x",
+        "react-native-svg": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-svg": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-redux": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
@@ -15218,6 +15283,15 @@
         "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-to-print": {
+      "version": "2.14.15",
+      "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.14.15.tgz",
+      "integrity": "sha512-SKnwOzU2cJ8eaAkoJO7+gNhvfEDmm+Y34IdcHsjtHioUevUPhprqbVtvNJlZ2JkGJ8ExK2QNWM9pXECTDR5D8w==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.1.tgz",

src/assets/images/icons/wallet.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 64 64" viewBox="0 0 64 64" id="wallet"><path d="M60.94,33.76H59.6V19.85c0-1.69-1.37-3.06-3.06-3.06h-1.61l-0.47-6.54c-0.12-1.67-1.57-2.94-3.27-2.84l-7.3,0.52
+		l-0.18-2.48c-0.12-1.67-1.57-2.95-3.27-2.84L7.83,4.93c-0.82,0.06-1.56,0.43-2.1,1.05C5.19,6.6,4.93,7.39,4.99,8.2l0.61,8.59H3.06
+		C1.37,16.79,0,18.17,0,19.85v38.48c0,1.69,1.37,3.06,3.06,3.06h53.48c1.69,0,3.06-1.37,3.06-3.06V44.43h1.33
+		c1.69,0,3.06-1.37,3.06-3.06v-4.55C64,35.13,62.63,33.76,60.94,33.76z M51.42,9.94c0.27,0,0.51,0.22,0.53,0.49l0.45,6.36H18.55
+		l-0.28-3.97c-0.01-0.19,0.07-0.32,0.13-0.38c0.05-0.06,0.17-0.17,0.36-0.18L51.42,9.94z M7.65,7.64C7.7,7.58,7.82,7.47,8.01,7.46
+		l32.66-2.32c0.27,0,0.51,0.22,0.53,0.49l0.18,2.48L18.58,9.73c-0.82,0.06-1.56,0.43-2.1,1.05c-0.54,0.62-0.8,1.41-0.74,2.22
+		l0.27,3.79H8.14L7.52,8.02C7.5,7.83,7.59,7.7,7.65,7.64z M57.07,58.34c0,0.28-0.24,0.53-0.53,0.53H3.06
+		c-0.28,0-0.53-0.24-0.53-0.53V19.85c0-0.29,0.24-0.53,0.53-0.53h53.48c0.28,0,0.53,0.24,0.53,0.53v13.91h-4.43
+		c-1.69,0-3.06,1.37-3.06,3.06v4.55c0,1.69,1.37,3.06,3.06,3.06h4.43V58.34z M61.47,41.37c0,0.28-0.24,0.53-0.53,0.53h-8.3
+		c-0.28,0-0.53-0.24-0.53-0.53v-4.55c0-0.28,0.24-0.53,0.53-0.53h8.3c0.29,0,0.53,0.24,0.53,0.53V41.37z"></path></svg>

src/components/Cards/AvailableJobsCard.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import dataImage2 from "../../assets/images/data-table-user-2.png";
+import dataImage2 from "../../assets/images/taskbanners/default.jpg";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
 

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -12,6 +12,7 @@ import localImgLoad from "../../lib/localImgLoad";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
+import FamilyWallet from "./Tabs/FamilyWallet";
 
 // Lazy Imports for components
 const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
@@ -165,7 +166,8 @@ export default function FamilyManageTabs({
         handlePrint={useHandlePrint}
       />
     ),
-    Profile: <FamilyProfile />,
+    Profile: <FamilyProfile familyData={details.familyDetails.data} />,
+    wallet: <FamilyWallet familyData={details.familyDetails.data} />,
   };
 
   // Default tab component
@@ -297,17 +299,17 @@ export default function FamilyManageTabs({
                 browseProfileImg={browseProfileImg}
                 accountDetails={accountDetails}
               />
-              <div className="mt-4 flex justify-start items-center gap-2">
+              <div className="mt-4 flex flex-col justify-center items-center gap-2 lg:flex-row lg:justify-center lg:items-center xl:flex-col xl:justify-center xl:items-center 2xl:flex-row 2xl:justify-center 2xl:items-center 2xl:gap-[2px]">
                 <button
                   onClick={() => tabHandler("Account")}
                   className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
                 >
                   <img
                     src={localImgLoad("images/icons/account.svg")}
-                    className="max-w-[30px] w-full"
+                    className="max-w-[30px]"
                     alt="Settings-Icon"
                   />
-                  <p className="text-lg text-sky-blue">Acc.</p>
+                  <p className="text-[16px] text-sky-blue">Acc.</p>
                 </button>
                 <button
                   onClick={() => tabHandler("Profile")}
@@ -315,10 +317,21 @@ export default function FamilyManageTabs({
                 >
                   <img
                     src={localImgLoad("images/icons/profile.svg")}
-                    className="max-w-[30px] w-full"
+                    className="max-w-[30px]"
                     alt="Settings-Icon"
                   />
-                  <p className="text-lg text-sky-blue">Profile</p>
+                  <p className="text-[16px] text-sky-blue">Profile</p>
+                </button>
+                <button
+                  onClick={() => tabHandler("wallet")}
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
+                >
+                  <img
+                    src={localImgLoad("images/icons/wallet.svg")}
+                    className="max-w-[30px]"
+                    alt="Settings-Icon"
+                  />
+                  <p className="text-[16px] text-sky-blue">Wallet</p>
                 </button>
               </div>
             </div>

src/components/FamilyAcc/FamilyTable.jsx

@@ -139,8 +139,8 @@ export default function FamilyTable({
                   </tr>
                 </thead>
                 <tbody className="h-full">
-                  {currentFamilyList?.map((familyMember) => {
-                    return <FamilyRow {...familyMember} />;
+                  {currentFamilyList?.map((familyMember, index) => {
+                    return <FamilyRow key={index} {...familyMember} />;
                   })}
                 </tbody>
               </table>

src/components/FamilyAcc/Tabs/FamilyProfile.jsx

@@ -1,11 +1,221 @@
-export default function FamilyProfile({ className }) {
+import { useState } from "react";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import usersService from "../../../services/UsersService";
+import { useNavigate } from "react-router-dom";
+
+import { Formik, Form } from "formik";
+import * as Yup from "yup";
+
+
+export default function FamilyProfile({familyData, className }) {
+
+  const validationSchema = Yup.object().shape({
+    firstname: Yup.string()
+      .required("Firstname is required"),
+    lastname: Yup.string()
+      // .min(3, "Minimum 3 characters")
+      // .max(25, "Maximum 25 characters")
+      .required("Lastname is required"),
+    year: Yup.number()
+      .required("Year is required")
+      .min(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MAXIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`)
+      .max(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MINIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`),
+    month: Yup.number()
+      .required("Month is required")
+      .min(1, "Month is required"),
+  });
+
+  const navigate = useNavigate()
+  const api = new usersService()
+
+  let [requestStatus, setRequestStatus] = useState({loading:false, status:false, message: ''})
+
+  // let [updateDetails, setUpdateDetails] = useState({
+  //   family_uid: familyData.uid,
+  //   firstname: familyData.firstname,
+  //   lastname: familyData.lastname,
+  //   year: familyData.year,
+  //   month: familyData.month,
+  //   action: 22020
+  // })
+
+  // initial values for formik
+  let initialValues = {
+    family_uid: familyData.uid,
+    firstname: familyData.firstname,
+    lastname: familyData.lastname,
+    year: familyData.year,
+    month: familyData.month,
+    action: 22020
+  };
+  
+  const handleChange = ({target:{name, value}})=>{
+    setUpdateDetails(prev => ({...prev, [name]:value}))
+  }
+
+  const updateFamily = (values, helpers) => {
+    setRequestStatus({loading:true, status:false, message: ''})
+    // let {firstname, lastname, year, month} = updateDetails
+    // if(!firstname || !lastname || year == 0 || month == 0) {
+    //   setRequestStatus({loading:false, status:false, message: 'Please fill all fields'})
+    //   return setTimeout(()=>{
+    //     setRequestStatus({loading:false, status:false, message: ''})
+    //   }, 5000)
+    // }
+    api.getFamilyUpdate(values).then(res=>{
+      if(res.data.internal_return < 0){
+        return setRequestStatus({loading:false, status:false, message: 'Failed, try again!'})
+      }
+      setRequestStatus({loading:false, status:true, message: 'Family account updated'})
+      setTimeout(()=>{
+        navigate('/acc-family', {replace:true})
+      }, 5000)
+    }).catch(error => {
+      setRequestStatus({loading:false, status:false, message: 'Unable to update, try again!'})
+    }).finally(()=>{
+      setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message: ''})
+      }, 5000)
+    })
+  }
+
   return (
     <div
-      className={`update-table w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
+      className={`w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
         className || ""
       }`}
     >
-      <h1>Profile</h1>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={updateFamily}
+      >
+        {(props) => {
+          return (
+          <Form className="logout-modal-body w-full lg:w-[500px] lg:mx-auto flex flex-col items-center px-10 py-8 gap-4">
+            <InputCom
+              placeholder="Firstname"
+              label="First Name:"
+              name="firstname"
+              type="text"
+              parentClass="flex items-center gap-1 w-full"
+              labelClass="flex-[0.2] mb-0"
+              inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.firstname && props.touched.firstname ? 'border border-red-500' : ''}`}
+              fieldClass="px-2"
+              value={props.values.firstname}
+              inputHandler={props.handleChange}
+            />
+            <InputCom
+              placeholder="Lastname"
+              label="Last Name:"
+              name="lastname"
+              type="text"
+              parentClass="flex items-center gap-1 w-full"
+              labelClass="flex-[0.2] mb-0"
+              inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.lastname && props.touched.lastname ? 'border border-red-500' : ''}`}
+              fieldClass="px-2"
+              value={props.values?.lastname}
+              inputHandler={props.handleChange}
+            />
+            <div className="input-com mb-7 flex flex-col gap-1 w-full">
+              {/* Age dropdown */}
+              <div className="">
+                <label
+                  className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
+                  htmlFor="age-selection"
+                >
+                  Birthday: (Year/Month)
+                </label>
+                {((props.errors.year && props.touched.year) || (props.errors.month && props.touched.month)) && (
+                  <span className="text-[12px] text-red-500">
+                    {' '}{props.errors.year || props.errors.month}
+                  </span>
+                )}
+              </div>
+              <div className="flex max-w-[330px] w-full self-end gap-4">
+                <select
+                  name='year'
+                  id="yearDropdown"
+                  value={props.values.year}
+                  onChange={props.handleChange}
+                  className={`input-wrapper border border-[#f5f8fa] ${props.errors.year && props.touched.year ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
+                >
+                  <option value="">Select a Year</option>
+                  {years.map((year) => (
+                    <option key={year} value={year}>
+                      {year}
+                    </option>
+                  ))}
+                </select>
+
+                <select
+                  name='month'
+                  id="monthDropdown"
+                  // value={(months.filter(month => month.id == selectedMonth)[0]?.id) || ''}
+                  value={(months.filter(month => month.id == props.values.month)[0]?.id) || 0}
+                  onChange={props.handleChange}
+                  className={`input-wrapper border border-[#f5f8fa] ${props.errors.month && props.touched.month ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
+                >
+                  <option value="">Select a Month</option>
+                  {months.map(({id, name}) => (
+                    <option key={id} value={id}>
+                      {name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+            {requestStatus.message && (
+              <div className={`relative p-2 ${!requestStatus.status ? 'text-[#912741] bg-[#fcd9e2] border-[#fbc6d3]' : 'text-green-700'} mb-2 rounded-[0.475rem] text-xs font-light leading-[19.5px]`}>
+                {requestStatus.message}
+              </div>
+            )}
+            <div className="flex justify-end w-full">
+              {requestStatus.loading ?
+                <>
+                <div className="signup btn-loader"></div>
+                <LoadingSpinner size='4' />
+                </>
+                :
+                <button
+                type="submit"
+                // onClick={updateFamily}
+                // className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+                className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
+                >
+                Update
+                </button>
+              }
+            </div>
+          </Form>
+          );
+        }}
+      </Formik>
     </div>
   );
 }
+
+  // Get the current year
+  // const currentYear = new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE;
+  const currentYear = new Date().getFullYear();
+
+  // Generate an array of years from the current year to (currentYear - 19)
+  const years = Array.from({ length: 19 }, (_, index) => currentYear - index);
+
+  const months = [
+    {id:'1', name:"January"},
+    {id:'2', name:"February"},
+    {id:'3', name:"March"},
+    {id:'4', name:"April"},
+    {id:'5', name:"May"},
+    {id:'6', name:"June"},
+    {id:'7', name:"July"},
+    {id:'8', name:"August"},
+    {id:'9', name:"September"},
+    {id:'10', name:"October"},
+    {id:'11', name:"November"},
+    {id:'12', name:"December"},
+  ];
+
+

src/components/FamilyAcc/Tabs/FamilyWallet.jsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react'
+
+import usersService from '../../../services/UsersService'
+
+import LoadingSpinner from '../../Spinners/LoadingSpinner'
+import { PriceFormatter } from '../../Helpers/PriceFormatter'
+import { localImgLoad } from '../../../lib'
+import background from '../../../assets/images/bg-sky-blue.jpg'
+
+function FamilyWallet({familyData}) {
+  const apiUrl = new usersService()
+
+  let [familyWallet, setFamilyWallet] = useState({loading:true, data: []})
+
+  useEffect(()=>{
+    apiUrl.getFamilyWallet({family_uid:familyData?.uid}).then(res => {
+      setFamilyWallet({loading:false, data: res?.data?.result_list || []})
+    }).catch(error => {
+      setFamilyWallet({loading:false, data: []})
+    })
+  },[])
+
+  return (
+    <div className='p-3 w-full h-full bg-white dark:bg-dark-white flex flex-col justify-start items-start'>
+        {familyWallet.loading ?
+        <div className='w-full h-20 flex justify-center items-center'>
+          <LoadingSpinner size='8' color='sky-blue' />
+        </div>
+        :
+        familyWallet?.data?.length > 0 ?
+        <div className='w-full p-4 flex flex-col gap-2'>
+        {familyWallet?.data?.map((wallet, index)=>(
+            <div key={index} className='w-full p-4 bg-[aliceblue] rounded-lg'
+              // style={{
+              //   background: `url(${background}) 0% 0% / cover no-repeat`,
+              // }}
+            >
+              <div className="w-full flex justify-start items-center gap-3">
+                <div className="min-w-[50px] min-h-[50px] max-w-min md:max-w-[80px] max-h-min md:max-h-[80px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+                  <img
+                    src={localImgLoad(`images/currency/${(wallet.code).toLowerCase()}.svg`)}
+                    className="w-full h-full"
+                    alt="currency-icon"
+                  />
+                </div>
+                <div className="balance mt-2 flex justify-center">
+                  <div className="flex gap-2">
+                    <p className="text-base md:text-lg text-thin-light-gray tracking-wide mb-2 sm:mb-6">
+                      Balance:
+                    </p>
+                    <p 
+                      className="text-base md:text-lg font-bold text-purple tracking-wide leading-10"
+                      // className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125"
+                      >
+                      {PriceFormatter(
+                        Number(wallet.amount) * 0.01,
+                        wallet.code,
+                        wallet.country,
+                        ""
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        :
+        <p className='text-lg text-gray-500 dark:text-gray-400'>No Wallet Found!</p>
+        }
+    </div>
+  )
+}
+
+export default FamilyWallet

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -7,6 +7,10 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
   const [textValue, setTextValue] = useState("");
+  const [errMsg, setErrMsg] = useState({
+    market: false,
+    manage: false,
+  });
   const apiCall = useMemo(() => new usersService(), []);
 
   const handleInputChange = ({ target: { value } }) => {
@@ -48,20 +52,17 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
           return;
         }
 
-        toast.success("Message sent", {
-          autoClose: 2500,
-          hideProgressBar: true,
-        });
-
         setMarketMsg({ data: marketMessageRes, state: true });
-        setTimeout(() => onClose(), 2000);
       } catch (error) {
+        setErrMsg({ market: true });
+        setMarketMsg({ loading: false, state: false });
         throw new Error(error);
       } finally {
+        setTextValue("");
         setTimeout(() => {
-          setTextValue("");
-          setMarketMsg({ loading: false });
-        }, 2000);
+          setMarketMsg({ loading: false, state: false });
+          setErrMsg({ market: false });
+        }, 5000);
       }
     };
 
@@ -117,7 +118,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper md:w-[750px] md:h-[660px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper md:w-[650px] md:h-[580px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px]">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {details.offer_code}
@@ -127,7 +128,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
         <div className="md:flex bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
           <div className="p-4 w-full md:w-[75%] md:border-r-1">
-            <div className="min-h-[263px]">
+            <div className="max-h-[240px] h-full">
               <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
                 {details?.title}
               </h2>
@@ -158,9 +159,9 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   <div
                     className={`w-full md:w-3/4 text-slate-900 dark:text-white market-pop ${
                       name !== "Delivery Detail"
-                        ? " h-full max-h-28 flex items-center"
-                        : " overflow-y-auto max-h-[100px]"
-                    }`}
+                        ? " h-full flex items-center"
+                        : " overflow-y-auto max-h-[80px]"
+                    }  ${name === "Description" && "max-h-14 h-full overflow-auto"}`}
                   >
                     {danger ? (
                       <p
@@ -195,40 +196,46 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
               ))}
             </div>
             <hr />
-            <div className="my-3 w-full flex flex-col gap-3">
+            <div className="w-full flex flex-col gap-3">
               <div className="w-full">
-                <label className="w-full text-slate-900 dark:text-white tracking-wide">
+                <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
                   If you have any questions about this task:
                 </label>
                 <textarea
-                  className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
-                  rows="5"
+                  className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
+                    marketMsg.loading && "italic text-[#9CA3AF]"
+                  } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
+                  rows="3"
                   style={{ resize: "none" }}
                   placeholder="Enter message here ..."
-                  value={textValue}
+                  value={marketMsg.loading ? "Sending..." : textValue}
                   onChange={handleInputChange}
                 />
               </div>
-              <button
-                className="self-end w-[150px] h-[52px] rounded-md text-base bg-yellow-500 text-white"
-                name="market-message"
-                onClick={MarketDetail}
-              >
-                {marketMsg.loading ? (
-                  <LoadingSpinner size={5} color="white" />
-                ) : !marketMsg.state ? (
-                  "Send Message"
-                ) : (
-                  "Message Sent"
-                )}
-              </button>
+              <div className="relative flex w-full justify-end ">
+                <span className="text-sm text-[#57cd89] absolute left-[8rem] top-4">
+                  {marketMsg.state && "Message Sent!"}
+                  {errMsg.market && "Something went wrong"}
+                </span>
+                <button
+                  className="self-end w-[150px] h-[48px] rounded-full text-base bg-yellow-500 text-white"
+                  name="market-message"
+                  onClick={MarketDetail}
+                >
+                  {marketMsg.loading ? (
+                    <LoadingSpinner size={5} color="white" />
+                  ) : (
+                    "Send Message"
+                  )}
+                </button>
+              </div>
             </div>
           </div>
 
           <div className="w-full md:w-[23%] h-full flex flex-col">
-            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] p-4 rounded-md md:min-h-[498px] flex flex-col justify-between">
-              <div className="w-full flex flex-col justify-center py-4 gap-2">
-                <p className="w-full text-slate-900 tracking-wide my-1">
+            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md md:min-h-[420px] flex flex-col justify-between">
+              <div className="w-full flex flex-col justify-center pb-4 gap-2">
+                <p className="w-full text-slate-900 tracking-wide my-1 font-semibold">
                   Interested in the task?
                 </p>
                 <hr />

src/components/Partials/Sidebar.jsx

@@ -8,6 +8,7 @@ import {
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
+
 export default function Sidebar({
   sidebar,
   action,

src/components/jobPopout/JobListPopout.jsx

@@ -6,6 +6,8 @@ import InputCom from "../Helpers/Inputs/InputCom/index";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
+import { tableReload } from "../../store/TableReloads";
+import { useDispatch } from "react-redux";
 
 const validationSchema = Yup.object().shape({
   family: Yup.string().required("This is required "),
@@ -21,6 +23,8 @@ const validationSchema = Yup.object().shape({
 });
 
 function JobListPopout({ details, onClose, situation }) {
+const dispatch = useDispatch()
+
   const [familyList, setFamilyList] = useState([]);
   let [loader, setLoader] = useState({
     member: false,
@@ -159,6 +163,7 @@ function JobListPopout({ details, onClose, situation }) {
       const res = await apiCall.assignJobTask(reqData);
       let { data } = await res;
       setLoader({ jobFields: false });
+      dispatch(tableReload({ type: "JOBTABLE" }));
       onClose();
       throw new Response(data);
     } catch (error) {

src/middleware/AuthRoute.jsx

@@ -11,6 +11,7 @@ import { updateNotifications } from "../store/notifications";
 import { updateUserJobList } from "../store/userJobList";
 import { updateWalletDetails } from "../store/walletDetails";
 import { formattedDate } from "../lib";
+import { tableReload } from "../store/TableReloads";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -204,7 +205,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMarketActiveJobList();
-  }, [apiCall, dispatch]);
+  }, [apiCall, dispatch, jobListTable]);
 
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {

src/services/UsersService.js

@@ -578,13 +578,14 @@ class usersService {
     return this.postAuxEnd("/familyadd", postData);
   }
 
-  getFamilyUpdate() {
+  getFamilyUpdate(reqdata) {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       page: 0,
       limit: 100,
+      ...reqdata
     };
     return this.postAuxEnd("/familyupdate", postData);
   }
@@ -1077,6 +1078,18 @@ class usersService {
       return this.postAuxEnd("/suggeststatus", postData);
     }
 
+    // FUNCTION TO GET FAMILY WALLET
+    getFamilyWallet(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 22012,
+        ...reqData,
+      };
+      return this.postAuxEnd("/familywallet", postData);
+    }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)