fixed responsiveness issues for the layout

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -27,11 +27,13 @@ export default function FamilyManageTabs({
   listReload,
   loader,
 }) {
+  // Initial state for family details
   const initialDetailState = {
     loading: false,
     data: null,
   };
 
+  // State for family details, tasks, waitlist, and pending
   const [details, setDetails] = useState({
     familyDetails: { ...initialDetailState },
     familyTasks: { ...initialDetailState },
@@ -39,6 +41,7 @@ export default function FamilyManageTabs({
     familyPending: { ...initialDetailState },
   });
 
+  // Function to reset family details, tasks, waitlist, and pending
   const resetDetails = () => {
     setDetails({
       familyDetails: { ...initialDetailState },
@@ -48,23 +51,38 @@ export default function FamilyManageTabs({
     });
   };
 
+  // State for family task data
   const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
-  const [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK
 
+  // State for active task
+  const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
+
+  // State for error messages
   const [errMsg, setErrMsg] = useState("");
+
+  // State for family task popout
   const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
+
+  // State for profile image
   const [profileImg, setProfileImg] = useState(profile);
+
+  // Ref for profile image input
   const profileImgInput = useRef(null);
+
+  // Create an instance of the usersService class
   const apiCall = useMemo(() => new usersService(), []);
 
+  // Function to handle toggling the family task popout
   const familyPopUpHandler = () => {
     setFamilyTaskPopout((prev) => !prev);
   };
 
+  // Function to trigger a click on the hidden profile image input
   const browseProfileImg = () => {
     profileImgInput.current.click();
   };
 
+  // Function to handle changes in the profile image input
   const profileImgChangeHandler = (e) => {
     if (e.target.value !== "") {
       const imgReader = new FileReader();
@@ -75,24 +93,30 @@ export default function FamilyManageTabs({
     }
   };
 
+  // Ref for the account section
   const accountRef = useRef();
 
+  // React-to-Print hook for handling printing
   const useHandlePrint = useReactToPrint({
     content: () => accountRef.current,
   });
 
+  // Array of tab names
   const tabs = [
     { id: 1, name: "Tasks" },
     { id: 2, name: "Waiting" },
     { id: 3, name: "Pending" },
   ];
 
+  // State for the currently selected tab
   const [tab, setTab] = useState(tabs[0].name);
 
+  // Function to handle tab changes
   const tabHandler = (value) => {
     setTab(value);
   };
 
+  // Object that maps tab names to their corresponding components
   const tabComponents = {
     Tasks: (
       <FamilyTasks
@@ -127,6 +151,7 @@ export default function FamilyManageTabs({
     Profile: <FamilyProfile />,
   };
 
+  // Default tab component
   const defaultTabComponent = (
     <FamilyTasks
       className={className}
@@ -136,8 +161,10 @@ export default function FamilyManageTabs({
     />
   );
 
+  // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
+  // Effect to manage family details and related data
   useEffect(() => {
     const manageFamily = async () => {
       try {
@@ -166,7 +193,7 @@ export default function FamilyManageTabs({
         const familyWaitData = familyWaitRes.data;
         const familyPendingData = familyPending.data;
 
-        // In order to check errors
+        // Function to check for errors in data
         const checkDataError = (data) => data?.internal_return < 0;
 
         if (
@@ -191,9 +218,11 @@ export default function FamilyManageTabs({
       }
     };
 
+    // Invoke the manageFamily function when the component mounts
     manageFamily();
   }, []);
 
+  // Effect to manage family tasks
   useEffect(() => {
     let checkFamilyTask = true;
     const reqData = {
@@ -222,6 +251,7 @@ export default function FamilyManageTabs({
         });
     }
 
+    // Cleanup function to prevent memory leaks
     return () => {
       checkFamilyTask = false;
     };

src/components/Home/FullAccountDash.jsx

@@ -1,24 +1,17 @@
-import React from "react";
-import datas from "../../data/product_data.json";
-import Hero from "./Hero";
-// import HomeTaskDisplay from "./HomeTaskDisplay";
-import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
-// import SellHistoryMarketVisitorAnalytic from './SellHistoryMarketVisitorAnalytic';
-// import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
-//import UpdateTable from "./UpdateTable";
-import HomeActivities from "./HomeActivities";
-import MyOffersTable from "../MyTasks/MyOffersTable";
 import MyJobTable from "../MyTasks/MyJobTable";
+import MyOffersTable from "../MyTasks/MyOffersTable";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import Hero from "./Hero";
+import HomeActivities from "./HomeActivities";
 
 export default function FullAccountDash(props) {
-  console.log("PROPS IN HOME->", props);
+  // console.log("PROPS IN HOME->", props);
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   return (
-    <div>
+    <>
       <div className="home-page-wrapper">
         <Hero
           className="mb-10"
@@ -26,31 +19,31 @@ export default function FullAccountDash(props) {
           bannerList={props.bannerList}
           nextDueTask={props.nextDueTask}
         />
-        { props.offersList?.data?.result_list?.length ?
+        {props.offersList?.data?.result_list?.length ? (
           <MyOffersTable
             MyActiveOffersList={props.offersList?.data}
             className="mb-10"
           />
-        : props.MyActiveJobList?.data?.length ?
+        ) : props.MyActiveJobList?.data?.length ? (
           <>
             <div className="w-full mb-5 flex justify-between items-center gap-1">
               <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-                <span>
-                  My Tasks
-                </span>
+                <span>My Tasks</span>
               </h1>
             </div>
-            <MyJobTable ActiveJobList={props.MyActiveJobList} Account={userDetails} />
+            <MyJobTable
+              ActiveJobList={props.MyActiveJobList}
+              Account={userDetails}
+            />
           </>
-         
-        : !props.offersList?.loading && !props.MyActiveJobList?.loading?
+        ) : !props.offersList?.loading && !props.MyActiveJobList?.loading ? (
           <HomeActivities className="mb-10" />
-        :
+        ) : (
           <div className="w-full h-[220px] flex items-center justify-center">
             <LoadingSpinner size="16" color="sky-blue" />
           </div>
-        }
-        
+        )}
+
         {/*<UpdateTable className="mb-10"/>*/}
         {/*<SellHistoryMarketVisitorAnalytic className="mb-10"/>*/}
         {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
@@ -61,24 +54,6 @@ export default function FullAccountDash(props) {
         {/*    bannerList={props.bannerList}*/}
         {/*/>*/}
       </div>
-    </div>
+    </>
   );
 }
-// /*
-//      <Layout>
-//             <div className="home-page-wrapper">
-//                 <Hero className="mb-10" data={userDetails} />
-//                 {/* <CreateNft />
-//         <TrendingSection trending={trending} className="mb-10" />*/}
-// <HomeTaskDisplay
-//     jobData={jobData}
-//     className="mb-10"
-//     bannerList={props.bannerList}
-// />
-{
-  /*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
-                <TopSellerTopBuyerSliderSection className="mb-10" />
-                <UpdateTable className="mb-10"/>*/
-}
-// </div>
-// </Layout>

src/components/Partials/Layout.jsx

@@ -74,7 +74,7 @@ export default function Layout({ children }) {
             </div>
             {/* container */}
             <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
-              <div className="nft-main-container flex-[80%]">
+              <div className="nft-main-container flex-[80%] w-full">
                 {children && children}
               </div>
               <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">