uploaded link for file added

src/components/AddJob/AddJob.jsx

@@ -63,12 +63,12 @@ function AddJob({ popUpHandler, categories }) {
     message: "",
   }); // Holds state when submit button is pressed
 
-  const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
+  // const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
-    const walletChecker = walletDetails?.data.find(
+  //   const walletChecker = walletDetails?.data.find(
-      (item) => item.country === country
+  //     (item) => item.country === country
-    );
+  //   );
-    return walletChecker ? walletChecker.amount : 0;
+  //   return walletChecker ? walletChecker.amount : 0;
-  };
+  // };
 
   const handleAddJob = async (values, helpers) => {
     const reqData = {
@@ -81,20 +81,20 @@ function AddJob({ popUpHandler, categories }) {
       category: values.category?.join("@"),
     };
 
-    const walletAmount = getWalletDetail(reqData.country); // GETTING USER BALANCE BASED ON COUNTRY SELECTED
+    // const walletAmount = getWalletDetail(reqData.country); // GETTING USER BALANCE BASED ON COUNTRY SELECTED
 
-    if (reqData.price > walletAmount) {
+    // if (reqData.price > walletAmount) {
-      setRequestStatus({
+    //   setRequestStatus({
-        loading: false,
+    //     loading: false,
-        status: false,
+    //     status: false,
-        message: "Insufficient Balance",
+    //     message: "Insufficient Balance",
-      });
+    //   });
 
-      setTimeout(() => {
+    //   setTimeout(() => {
-        setRequestStatus({ loading: false, status: false, message: "" });
+    //     setRequestStatus({ loading: false, status: false, message: "" });
-      }, 1500);
+    //   }, 1500);
-      return;
+    //   return;
-    }
+    // }
 
     setRequestStatus({ loading: true, status: false, message: "" });
 

src/components/FamilyAcc/FamilySettings/Tabs/AddFamily.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AddFamily = () => {
+  return (
+    <div>Add Family</div>
+  )
+}
+
+export default AddFamily

src/components/FamilyAcc/FamilySettings/Tabs/FamilyBanner.jsx

@@ -0,0 +1,153 @@
+import React, { useMemo, useRef, useState } from "react";
+import usersService from "../../../../services/UsersService";
+
+const FamilyBanner = ({ imageServer }) => {
+  const uploadedImage = `${imageServer}${localStorage.getItem(
+    "session_token"
+  )}/familybanner/${localStorage.getItem("uid")}`;
+
+  const familyBannerRef = useRef(null);
+  const jobApi = useMemo(() => new usersService(), []);
+
+  const [familyBannerImage, setFamilyBannerImage] = useState(uploadedImage);
+  const [uploadStatus, setUploadStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  });
+
+  /**
+   * Handles the change event of the family image input field.
+   * Checks if the selected file exceeds the maximum file size limit and displays an alert if it does.
+   * If the file is within the size limit, it reads the file using the FileReader API and sets the profile image state with the result.
+   */
+
+  const familyBannerHandler = (e) => {
+    setUploadStatus({ loading: false, status: false, message: "" });
+    let acceptedFormat = ["jpeg", "jpg", "png", "bmp"]; // ARRAY OF SUPPORTED FORMATS
+    let uploadedFile = e.target.files[0]; //UPLOADED FILE
+
+    const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase();
+    if (!acceptedFormat.includes(fileFormat)) {
+      //CHECKING FOR CORRECT UPLOAD FORMAT
+      const msg = `Please select ${acceptedFormat
+        .slice(0, -1)
+        .join(", ")} or ${acceptedFormat.slice(-1)}`;
+      setUploadStatus({ loading: false, status: false, message: msg });
+      return setTimeout(() => {
+        // profileImgInput.current.value = '' // clear the input
+        setUploadStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+
+    if (uploadedFile.size > 5 * 1048576) {
+      // CHECKING FOR CORRECT FILE SIZE
+      setUploadStatus({
+        loading: false,
+        status: false,
+        message: "File must not exceed 5MB",
+      });
+      return setTimeout(() => {
+        // profileImgInput.current.value = '' // clear the input
+        setUploadStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+
+    if (e.target.value !== "") {
+      const imgReader = new FileReader();
+      imgReader.onload = (event) => {
+        let base64Img = imgReader.result.split(",")[1];
+        let reqData = {
+          // PAYLOAD FOR API CALL
+          job_uid: localStorage.getItem("uid"),
+          file_name: uploadedFile?.name.slice(0, 19),
+          file_size: uploadedFile?.size,
+          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
+          file_data: base64Img,
+          msg_type: "FILE",
+          action: 11303,
+        };
+        setUploadStatus({
+          loading: true,
+          status: false,
+          message: "Loading...",
+        });
+        jobApi
+          .sendFiles(reqData)
+          .then((res) => {
+            if (res.status != 200 || res.data.internal_return < 0) {
+              return setUploadStatus({
+                loading: false,
+                status: false,
+                message: "Something went wrong, try again",
+              });
+            }
+            setUploadStatus({
+              loading: false,
+              status: true,
+              message: "Uploaded successfully",
+            });
+            setFamilyBannerImage(event.target.result);
+          })
+          .catch((error) => {
+            setUploadStatus({
+              loading: false,
+              status: false,
+              message: "Network error, try again",
+            });
+          })
+          .finally(() => {
+            setTimeout(() => {
+              setUploadStatus({ loading: false, status: false, message: "" });
+            }, 5000);
+          });
+      };
+      imgReader.readAsDataURL(e.target.files[0]);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="w-full lg:h-[400px] rounded-2xl">
+        <img
+          src={familyBannerImage}
+          alt="familyBanner"
+          className="w-full h-full object-cover rounded-2xl"
+        />
+      </div>
+      <div className="flex justify-between w-full">
+        <div>
+          {uploadStatus.message && !uploadStatus.loading && (
+            <p
+              className={`text-center ${
+                uploadStatus.status ? "text-green-500" : "text-red-500"
+              }`}
+            >
+              {uploadStatus.message}
+            </p>
+          )}
+          {uploadStatus.loading && (
+            <p className="text-center">{uploadStatus.message}</p>
+          )}
+        </div>
+        <div>
+          <input
+            ref={familyBannerRef}
+            className="hidden"
+            type="file"
+            accept="image/*"
+            onChange={familyBannerHandler}
+          />
+          <button
+            className="btn-gradient w-[153px] h-[46px] rounded-full text-white lg:flex hidden justify-center items-center"
+            onClick={() => familyBannerRef.current.click()}
+          >
+            Change Banner
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FamilyBanner;

src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Relatives = () => {
+  return (
+    <div>Relatives</div>
+  )
+}
+
+export default Relatives

src/components/FamilyAcc/FamilySettings/Tabs/index.js

@@ -0,0 +1,5 @@
+import AddFamily from "./AddFamily";
+import FamilyBanner from "./FamilyBanner";
+import Relatives from "./Relatives";
+
+export {AddFamily, FamilyBanner, Relatives}

src/components/FamilyAcc/FamilySettings/index.jsx

@@ -1,8 +1,56 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import Icons from "../../Helpers/Icons";
 import Layout from "../../Partials/Layout";
-import { Link } from "react-router-dom";
+import { AddFamily, FamilyBanner, Relatives } from "./Tabs";
 
 const FamilySettings = () => {
+  let {state} = useLocation()
+  const tabs = [
+    {
+      id: 1,
+      name: "add_family",
+      title: "Add Family",
+      iconName: "new-family",
+    },
+    {
+      id: 2,
+      name: "relatives",
+      title: "Relatives",
+      iconName: "people-hover",
+    },
+    {
+      id: 3,
+      name: "family_banner",
+      title: "Family Banner",
+      iconName: "people-hover",
+    },
+  ];
+
+  const [tab, setTab] = useState(() => {
+    // Retrieve the active tab from local storage or use the default tab
+    return localStorage.getItem("activeTab") || tabs[0].name;
+  });
+
+  const tabHandler = (value) => {
+    setTab(value);
+  };
+
+  // Update local storage when the tab changes
+  useEffect(() => {
+    localStorage.setItem("activeTab", tab);
+  }, [tab]);
+
+  const tabComponents = {
+    add_family: <AddFamily />,
+    relatives: <Relatives />,
+    family_banner: <FamilyBanner imageServer={state.imageServer} />,
+  };
+
+  const defaultTabComponent = Array(tabComponents)[0].add_family;
+
+  const selectedComponent = tabComponents[tab] || defaultTabComponent;
+
   return (
     <Layout>
       <div className="notification-page w-full mb-10">
@@ -19,7 +67,32 @@ const FamilySettings = () => {
           {/* Something Here */}
           {/* <form className="logout-modal-body w-full flex flex-col items-center px-10 py-8 gap-4"></form> */}
           <div className="w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ">
-            <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 "></div>
+            <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] lg:flex lg:px-10 px-4 justify-between">
+              <div className="content-tab-items lg:w-[230px] w-full mr-2">
+                <ul className="overflow-hidden mb-10 lg:mb-0 py-8">
+                  {tabs.map(({ name, id, title, iconName }) => (
+                    <li
+                      onClick={() => tabHandler(name)}
+                      key={id}
+                      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+                        tab === name ? "text-purple" : " text-thin-light-gray"
+                      }`}
+                    >
+                      <div>
+                        <Icons name={iconName} />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">{title}</p>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+              <div className="flex-1">
+                <div className="tab-item">{selectedComponent}</div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/components/FamilyAcc/FamilyTable.jsx

@@ -149,7 +149,7 @@ export default function FamilyTable({
               className="w-[0.7rem]"
             >
               <path
-                fill-rule="evenodd"
+                fillRule="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=""
                 className="color000000 svgShape fill-[#fff]"

src/components/FamilyAcc/index.jsx

@@ -158,6 +158,7 @@ export default function FamilyAcc() {
             </div>
             <Link
               to={`/familysettings`}
+              state={{ imageServer: familyList?.session_image_server }}
               className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
             >
               <svg

src/components/MyActiveJobs/ActiveJobMessage.jsx

@@ -30,21 +30,26 @@ export default function ActiveJobMessage({ activeJobMesList }) {
             {activeJobMesList?.data?.length ?
             (
             <tbody>
-                {activeJobMesList.data.map((item, index) => (
+                {activeJobMesList.data.map((item, index) => 
-                <tr key={index} className='text-slate-500'>
+                {
-                    <td>
+                    let imageLink = `${activeJobMesList?.image}${localStorage.getItem('session_token')}/contrats/${item.msg_uid}`
-                        <div className={`msg_box ${item.who}`}>
+                    return (
-                            <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
+                        <tr key={index} className='text-slate-500'>
-                            {item.msg_type == 'FILE' ?
+                            <td>
-                            <a href='' className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></a>
+                                <div className={`msg_box ${item.who}`}>
-                            :
+                                    <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
-                            <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
+                                    {item.msg_type == 'FILE' ?
-                            }
+                                    <a href={imageLink} target="_blank" className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></a>
-                        </div>
+                                    :
-
+                                    <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
-                    </td>
+                                    }
-                </tr>
+                                </div>
-                ))}
+        
+                            </td>
+                        </tr>
+                    )
+                }
+                )}
             </tbody>
             )
             :

src/components/jobPopout/EditJobPopout.jsx

@@ -358,7 +358,7 @@ const EditJobPopOut = ({
                         />
                         {taskImage ?
                         <div className="w-full absolute -top-5">
-                          <img src={taskImage} className="max-h-[150px] min-h-[150px] w-full object-cover" alt="uplaoded task image" />
+                          <img src={taskImage} className="max-h-[150px] min-h-[150px] w-full object-cover" alt="uploaded task" />
                           <span onClick={()=>setTaskImage('')} className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800">Remove Image</span>
                         </div>
                         :

src/views/ManageActiveJobs.jsx

@@ -39,6 +39,7 @@ function ManageActiveJobs() {
           loading: false,
           error: false,
           data: res.data.result_list,
+          image: res.data.session_image_server
         });
       })
       .catch((error) => {