diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx index bae4234..64dc4a5 100644 --- a/src/components/FamilyAcc/FamilyManageTabs.jsx +++ b/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: ( , }; + // 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 { @@ -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; }; diff --git a/src/components/Home/FullAccountDash.jsx b/src/components/Home/FullAccountDash.jsx index 3ec7ef8..a3d46ab 100644 --- a/src/components/Home/FullAccountDash.jsx +++ b/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 ( -
+ <>
- { props.offersList?.data?.result_list?.length ? + {props.offersList?.data?.result_list?.length ? ( - : props.MyActiveJobList?.data?.length ? + ) : props.MyActiveJobList?.data?.length ? ( <>

- - My Tasks - + My Tasks

- + - - : !props.offersList?.loading && !props.MyActiveJobList?.loading? + ) : !props.offersList?.loading && !props.MyActiveJobList?.loading ? ( - : + ) : (
- } - + )} + {/**/} {/**/} {/**/} @@ -61,24 +54,6 @@ export default function FullAccountDash(props) { {/* bannerList={props.bannerList}*/} {/*/>*/}
-
+ ); } -// /* -// -//
-// -// {/* -// */} -// -{ - /* - - */ -} -//
-//
diff --git a/src/components/Partials/Layout.jsx b/src/components/Partials/Layout.jsx index 531562e..1b6e44f 100644 --- a/src/components/Partials/Layout.jsx +++ b/src/components/Partials/Layout.jsx @@ -74,7 +74,7 @@ export default function Layout({ children }) { {/* container */}
-
+
{children && children}
diff --git a/src/index.css b/src/index.css index 1e77d46..47a0531 100644 --- a/src/index.css +++ b/src/index.css @@ -3,7 +3,7 @@ font-family: "Product Sans"; src: url("./assets/fonts/Product Sans Regular.ttf"); } -.nft-main-container{ +.nft-main-container { max-width: 1200px; } /* Bold Weight */ @@ -11,57 +11,59 @@ font-family: "Product Sans"; src: url("./assets/fonts/Product Sans Bold.ttf"); } -.SENDER{ +.SENDER { margin-left: 60px !important; background-color: azure; } -.RECIPIENT{ +.RECIPIENT { margin-right: 60px !important; background-color: #add8e6 !important; } -.wallet-box{ +.wallet-box { background-color: aliceblue; border-radius: 20px; } -.bal-col1{ +.bal-col1 { width: 110px; } -.bg-green{ +.bg-green { background-color: darkgreen; } -.referral{ - margin-bottom: 20px +.referral { + margin-bottom: 20px; } -.task_action_panel{ - font-family: sans; color: white; +.task_action_panel { + font-family: sans; + color: white; font-weight: bolder; font-size: 14px; font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; - padding: 0px 10px 5px 10px + padding: 0px 10px 5px 10px; } -.heroSilderTitle{ +.heroSilderTitle { text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; - font-family: sans; color: white; + font-family: sans; + color: white; font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; } -.back-dark1{ - background-color: #193F5F; +.back-dark1 { + background-color: #193f5f; min-width: 280px !important; } -.job-action{ +.job-action { background-color: #4687ba; height: 100px; border-radius: 15px; padding: 5px; } -.msg_box{ +.msg_box { background-color: aliceblue; margin: 5px; padding: 5px; border-radius: 15px; } -.msg_header{ +.msg_header { background-color: white; color: black; font-weight: bold; @@ -69,7 +71,7 @@ font-size: 14px; font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; } -.siderCardDescription{ +.siderCardDescription { background-color: aliceblue; padding: 5px; border-radius: 5px; @@ -78,7 +80,7 @@ font-size: 1.125rem; line-height: 1.56; } -.siderCardButton{ +.siderCardButton { margin-top: 10px; width: 100%; text-align: center; @@ -91,33 +93,39 @@ padding: 10px; } -.short_style{ +.short_style { background-color: transparent; border-color: #a2d7f1; border-width: 3px; } -.lr{ +.lr { background-color: #e1cace; } -.lg{ +.lg { background-color: #a7dca7; } -.lb{ +.lb { background-color: #b3ccd7; } -.ly{ +.ly { background-color: #eeee67; } -.offer-slide-item{ - background: rgb(2,0,36); - background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(3,51,2,0.782125350140056) 0%, rgba(0,212,255,0.07904411764705888) 0%, rgba(153,182,201,1) 99%); +.offer-slide-item { + background: rgb(2, 0, 36); + background: radial-gradient( + circle, + rgba(2, 0, 36, 1) 0%, + rgba(3, 51, 2, 0.782125350140056) 0%, + rgba(0, 212, 255, 0.07904411764705888) 0%, + rgba(153, 182, 201, 1) 99% + ); margin: 5px; border-radius: 15px; padding: 15px; height: 250px; border-color: beige; } -.banner-630-340{ +.banner-630-340 { width: 630px; height: 340px; background-color: aliceblue; @@ -133,6 +141,7 @@ font-family: "Product Sans"; src: url("./assets/fonts/Product Sans Regular.ttf"); } + @tailwind base; @tailwind components; @tailwind utilities; @@ -144,9 +153,8 @@ --toastify-color-success: #f539f8; } - /* ===================== EXTRA ===================== */ -.bottomMargin{ +.bottomMargin { margin-bottom: 15px; } /* TODO: =================================default================================ */ @@ -159,8 +167,13 @@ html { font-family: "Product Sans"; } .primary-gradient { - background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%); - /* background-image: url("./assets/images/left-myft.jpg"); + background: linear-gradient( + 134.38deg, + #f539f8 0%, + #284f64 43.55%, + #1a3544 104.51% + ); + /* background-image: url("./assets/images/left-myft.jpg"); background-repeat: no-repeat; background-size: cover; */ } @@ -199,7 +212,12 @@ html { top: 0; width: 100%; height: 100%; - background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%); + background: linear-gradient( + 134.38deg, + #5356fb 0%, + #c342f9 43.55%, + #f539f8 104.51% + ); opacity: 30%; } /* Chrome, Safari, Edge, Opera */ @@ -229,10 +247,20 @@ input[type="text"][dir="rtl"] { scrollbar-width: none; /* Firefox */ } .btn-gradient { - background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); + background: linear-gradient( + 134.38deg, + #f539f8 0%, + #c342f9 43.55%, + #5356fb 104.51% + ); } .btn-gradient:hover { - background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%); + background: linear-gradient( + 134.38deg, + #5356fb 0%, + #c342f9 43.55%, + #f539f8 104.51% + ); } .text-26 { font-size: 26px; @@ -246,7 +274,12 @@ input[type="text"][dir="rtl"] { } .text-gradient { - background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); + background: linear-gradient( + 134.38deg, + #f539f8 0%, + #c342f9 43.55%, + #5356fb 104.51% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @@ -305,6 +338,16 @@ input[type="text"][dir="rtl"] { transform: scale(1); width: 80%; } + +@media screen and (min-width: 25rem) { + .sidebar-logo.enter { + width: 65%; + } + .sidebar-logo.enter + span{ + position: revert; + } +} + .sidebar-logo { transform: scale(0); width: 0; @@ -437,7 +480,12 @@ input[type="text"][dir="rtl"] { .home-page-wrapper .hero-slider .slick-slider .slick-dots li { margin: 0; } -.home-page-wrapper .hero-slider .slick-slider .slick-dots li.slick-active button { +.home-page-wrapper + .hero-slider + .slick-slider + .slick-dots + li.slick-active + button { background: white; } .home-page-wrapper .hero-slider .slick-slider .slick-dots li button { @@ -460,7 +508,12 @@ input[type="text"][dir="rtl"] { top: 0; width: 100%; height: 100%; - background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%); + background: linear-gradient( + 134.38deg, + #5356fb 0%, + #c342f9 43.55%, + #f539f8 104.51% + ); z-index: -1; opacity: 30%; } @@ -476,8 +529,10 @@ input[type="text"][dir="rtl"] { margin: 0 16px; } -.transfer-field, .transfer-field:focus, .transfer-field:focus-within{ - background: #FFF !important; +.transfer-field, +.transfer-field:focus, +.transfer-field:focus-within { + background: #fff !important; border: none !important; outline: none !important; box-shadow: none !important; @@ -583,12 +638,12 @@ input[type="text"][dir="rtl"] { background-size: cover; } -.content{ +.content { overflow: hidden; } -.job-items{ - .job-sub-menu{ +.job-items { + .job-sub-menu { background-color: yellow; } } @@ -597,7 +652,7 @@ input[type="text"][dir="rtl"] { top: 0; right: -100%; opacity: 0; - transition: all .5s; + transition: all 0.5s; background-color: white; } @@ -612,7 +667,12 @@ input[type="text"][dir="rtl"] { .notification-page .content-item .notifications { @apply flex space-x-4 items-center; } -.notification-page .content-item .notifications .notification-page .content-item .notifications { +.notification-page + .content-item + .notifications + .notification-page + .content-item + .notifications { @apply mb-0; } .notification-setting-tab .notification-settings-items li:last-child { @@ -621,7 +681,11 @@ input[type="text"][dir="rtl"] { .faq-tab .accordion-items .accordion-item:first-child .accordion-title-bar { padding-top: 0; } -.faq-tab .accordion-items .accordion-item:last-child .accordion-body .accordion-body-content { +.faq-tab + .accordion-items + .accordion-item:last-child + .accordion-body + .accordion-body-content { padding-bottom: 20px; } .faq-tab .accordion-title-bar { @@ -665,14 +729,15 @@ input[type="text"][dir="rtl"] { } @media print { - body .modal-com{ + body .modal-com { height: 100%; overflow: hidden; } - .job-action-modal-body button, .message-modal-header button { + .job-action-modal-body button, + .message-modal-header button { display: none; } - .message-modal-wrapper .message-table{ + .message-modal-wrapper .message-table { height: 100%; overflow-y: hidden; } @@ -839,30 +904,40 @@ TODO: Responsive =========================== } } - /* LoginPage */ -.main-wrapper.login-wrapper{ - background-image: url('./assets/images/login-dots.jpg'); +.main-wrapper.login-wrapper { + background-image: url("./assets/images/login-dots.jpg"); background-attachment: fixed; background-size: contain; background-position-y: bottom; background-repeat: no-repeat; - } -.layout-wrapper.login{ - background: rgb(236,237,241); - background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%); +.layout-wrapper.login { + background: rgb(236, 237, 241); + background: linear-gradient( + 90deg, + rgba(236, 237, 241, 1) 0%, + rgba(252, 252, 252, 1) 31%, + rgba(255, 255, 255, 0.9416141456582633) 41%, + rgba(255, 255, 255, 0.9752275910364145) 61%, + rgba(252, 252, 252, 1) 71%, + rgba(236, 237, 241, 1) 100% + ); font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 1.125rem; line-height: 1.56; } -.content-wrapper.login{ - --bg-color: 255,255,255; - background: linear-gradient(90deg, rgba(236,237,240,1) 0%, rgba(255,255,255,1) 50%, rgba(236,237,240,1) 100%); - +.content-wrapper.login { + --bg-color: 255, 255, 255; + background: linear-gradient( + 90deg, + rgba(236, 237, 240, 1) 0%, + rgba(255, 255, 255, 1) 50%, + rgba(236, 237, 240, 1) 100% + ); } .content-wrapper select { @@ -880,51 +955,68 @@ TODO: Responsive =========================== } /* Update table scrollbar */ -.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track, +.update-table::-webkit-scrollbar-track, +.update-table > *::-webkit-scrollbar-track, .market-pop::-webkit-scrollbar-track, -.wallet.coupon::-webkit-scrollbar-track{ +.wallet.coupon::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: transparent; border-radius: 10px; } -.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar, +.update-table::-webkit-scrollbar, +.update-table > *::-webkit-scrollbar, .market-pop::-webkit-scrollbar, .wallet.coupon::-webkit-scrollbar { width: 10px; background-color: transparent; } -.update-table::-webkit-scrollbar-thumb, .update-table > *::-webkit-scrollbar-thumb, .wallet.coupon::-webkit-scrollbar-thumb { +.update-table::-webkit-scrollbar-thumb, +.update-table > *::-webkit-scrollbar-thumb, +.wallet.coupon::-webkit-scrollbar-thumb { border-radius: 10px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: #fff; - background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); + background: linear-gradient( + 134.38deg, + #f539f8 0%, + #c342f9 43.55%, + #5356fb 104.51% + ); } .market-pop::-webkit-scrollbar-thumb { border-radius: 100px; - + /* background-color: #fafafa; */ /* background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); */ - background: rgb(236,237,241); - background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%); + background: rgb(236, 237, 241); + background: linear-gradient( + 90deg, + rgba(236, 237, 241, 1) 0%, + rgba(252, 252, 252, 1) 31%, + rgba(255, 255, 255, 0.9416141456582633) 41%, + rgba(255, 255, 255, 0.9752275910364145) 61%, + rgba(252, 252, 252, 1) 71%, + rgba(236, 237, 241, 1) 100% + ); } -.input-curve.lg{ +.input-curve.lg { border-radius: 35px !important; } -.edit-popup{ +.edit-popup { top: 75px; } -.job-popup{ +.job-popup { top: 55px; } -.addJob-popup{ +.addJob-popup { top: 30px; height: 55rem !important; } @@ -952,10 +1044,10 @@ TODO: Responsive =========================== } /* TO REMOVE SLIDER COMPONENT FROM CENTRALIZED */ -.slider-left .slick-slider .slick-track{ +.slider-left .slick-slider .slick-track { margin: 0; } -.assign-task-popup{ +.assign-task-popup { top: 75px; -} \ No newline at end of file +}