diff --git a/src/Routers.jsx b/src/Routers.jsx index 345f832..f1b658b 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -65,6 +65,7 @@ import FamMyFilesPage from "./views/FamMyFilesPage" import FamWorkInProgressPage from "./views/FamWorkInProgressPage"; import MyPastDueTasksPage from "./views/MyPastDueTasksPage"; import FamilyWalletPage from "./views/FamilyWalletPage"; +import FamilyActivitiesPage from "./views/FamilyActivitiesPage"; export default function Routers() { return ( @@ -168,6 +169,7 @@ export default function Routers() { element={} /> } /> + } /> } /> } /> } /> diff --git a/src/components/FamilyAcc/FamilyActivities.jsx b/src/components/FamilyAcc/FamilyActivities.jsx new file mode 100644 index 0000000..6d6e580 --- /dev/null +++ b/src/components/FamilyAcc/FamilyActivities.jsx @@ -0,0 +1,59 @@ +import React, { Suspense, useMemo, useState } from "react"; +import usersService from "../../services/UsersService"; +import Layout from "../Partials/Layout"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import FamilyTable from "./FamilyTable"; + +export default function FamilyActivities() { + const [familyList, setFamilyList] = useState({}); + const [loader, setLoader] = useState(false); + + const apiCall = useMemo(() => new usersService(), []); + + return ( + + {/**/} +
+
+ {/* heading */} +
+
+

+ Tasks & Chores +

+
+
+ }> + + +
+
+ + ); +} + +const CloseIcon = () => ( + + + + +); diff --git a/src/components/FamilyAcc/FamilyTableNew.jsx b/src/components/FamilyAcc/FamilyTableNew.jsx new file mode 100644 index 0000000..b9471bf --- /dev/null +++ b/src/components/FamilyAcc/FamilyTableNew.jsx @@ -0,0 +1,314 @@ +import React, { + Suspense, + lazy, + useEffect, + useMemo, + useRef, + useState, + } from "react"; + import { useReactToPrint } from "react-to-print"; + 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"; + import { apiConst } from "../../lib/apiConst"; + + // Lazy Imports for components + const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist")); + const FamilyAccount = lazy(() => import("./Tabs/FamilyAccount")); + const FamilyProfile = lazy(() => import("./Tabs/FamilyProfile")); + const FamilyTasks = lazy(() => import("./Tabs/FamilyTasks")); + const FamilyPending = lazy(() => import("./Tabs/FamilyPending")); + + export default function FamilyManageTabs({ + className, + accountDetails, + listReload, + loader, + }) { + // Initial state for family details + const initialDetailState = { + loading: false, + data: null, + }; + // console.log('accountDetails',accountDetails) + // State for family details, tasks, waitlist, and pending + const [details, setDetails] = useState({ + familyDetails: { ...initialDetailState }, + familyTasks: { ...initialDetailState }, + familyWaitList: { ...initialDetailState }, + familyPending: { ...initialDetailState }, + }); + + // Function to reset family details, tasks, waitlist, and pending + const resetDetails = () => { + setDetails({ + familyDetails: { ...initialDetailState }, + familyTasks: { ...initialDetailState }, + familyWaitList: { ...initialDetailState }, + familyPending: { ...initialDetailState }, + }); + }; + + const [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page + + // State for family task data + const [familyTask, setFamilyTask] = useState({ loading: false, data: [] }); + + // 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); + + // 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); + }; + + + // 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: ( + + ), + Waiting: ( + + ), + Pending: ( + + ), + Account: ( + + ), + Profile: , + wallet: , + }; + + // Default tab component + const defaultTabComponent = ( + + ); + + // 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 { + resetDetails(); + + setDetails({ + familyDetails: { loading: true }, + familyTasks: { loading: true }, + familyWaitList: { loading: true }, + familyPending: { loading: true }, + }); + + const { family_uid } = accountDetails; + const reqData = { family_uid }; + + const [familyRes, tasksRes, familyWaitRes, familyPending] = + await Promise.all([ + apiCall.ManageFamily(reqData), + apiCall.ManageTasks(reqData), + apiCall.ManageFamilyWaitlist(), + apiCall.ManageFamilyPending(), + ]); + + const familyData = familyRes.data; + const tasksData = tasksRes.data; + const familyWaitData = familyWaitRes.data; + const familyPendingData = familyPending.data; + + // Function to check for errors in data + const checkDataError = (data) => data?.internal_return < 0; + + if ( + checkDataError(familyData) || + checkDataError(tasksData) || + checkDataError(familyWaitData) || + checkDataError(familyPendingData) + ) { + return; + } + + setDetails({ + familyDetails: { loading: false, data: familyData }, + familyTasks: { loading: false, data: tasksData }, + familyWaitList: { loading: false, data: familyWaitData }, + familyPending: { loading: false, data: familyPendingData }, + }); + } catch (error) { + resetDetails(); + setErrMsg("An error occurred"); + throw new Error(error); + } + }; + + // Invoke the manageFamily function when the component mounts + manageFamily(); + }, [updatePage]); + + // Effect to manage family tasks + useEffect(() => { + let checkFamilyTask = true; + const reqData = { + limit: 30, + offset: 0, + job_type: "FAMILY", + action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER, + }; + + if (checkFamilyTask) { + setFamilyTask({ loading: true }); + apiCall + .getMyJobList(reqData) + .then((res) => { + setFamilyTask({ loading: false, data: res?.data?.result_list }); + if (res?.data?.result_list?.length) { + setActiveTask((prev) => ({ + ...prev, + data: res?.data?.result_list[0], + })); + } + }) + .catch((err) => { + setFamilyTask({ loading: false, data: [] }); + console.log("Error", err); + }); + } + + // Cleanup function to prevent memory leaks + return () => { + checkFamilyTask = false; + }; + }, []); + + return ( +
+
+ + +
+ } + > +
+
+
+
+
    + {tabs.map(({ name, id }) => ( +
  • tabHandler(name)} + className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${ + tab === name + ? "text-purple border-r" + : "text-thin-light-gray" + }`} + key={id} + > +

    {name}

    +
    • + ))} +
+ +
+ +
+
+ } + > + {selectedTabComponent} + +
+
+
+
+
+ +
+ + {familyTaskPopout && ( + + )} + + ); + } + \ No newline at end of file diff --git a/src/components/FamilyAcc/index.jsx b/src/components/FamilyAcc/index.jsx index 0c88965..dade8cb 100644 --- a/src/components/FamilyAcc/index.jsx +++ b/src/components/FamilyAcc/index.jsx @@ -153,7 +153,7 @@ export default function FamilyAcc() {
- + diff --git a/src/views/FamilyActivitiesPage.jsx b/src/views/FamilyActivitiesPage.jsx new file mode 100644 index 0000000..07114dc --- /dev/null +++ b/src/views/FamilyActivitiesPage.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import FamilyActivities from "../components/FamilyAcc/FamilyActivities"; + +const FamilyActivitiesPage = () => { + return ( + <> + + + ); +}; + +export default FamilyActivitiesPage;