Improve Dashboard Experience

apps/web/app/(auth)/signup/(components)/SignupFullForm.tsx

@@ -2,7 +2,7 @@
 
 import { InputElement, SelectElement } from '@/components/forms';
 import { Button } from '@/components/globalComponents';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { 
   greaterThan8, validateEmail, validateLowercase, validateName, 
   validateNumber, validatePhoneNumber, validateSymbol, validateUppercase 
@@ -39,7 +39,7 @@ const SignupFullForm = () => {
   const [companyTypes, setCompanyTypes] = useState<any>(null);
 
 
-  const fetchSettings = async () => {
+  const fetchSettings = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getAgreements(),
@@ -48,9 +48,9 @@ const SignupFullForm = () => {
       noToast: true
     })
     setAgreements(result?.data);
-  }
+  }, []);
 
-  const fetchTypes = async () => {
+  const fetchTypes = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getCompanyTypes(),
@@ -59,9 +59,9 @@ const SignupFullForm = () => {
       noToast: true
     })
     setCompanyTypes(result?.data);
-  }
+  }, []);
 
-  const fetchRequiredFields = async () => {
+  const fetchRequiredFields = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getCompanyRequiredFields({
@@ -72,16 +72,16 @@ const SignupFullForm = () => {
       noToast: true
     })
     setRequiredFields(result?.data);
-  }
+  }, [userType]);
 
   useEffect(() => {
     fetchTypes();
-  }, []);
+  }, [fetchTypes]);
 
   useEffect(() => {
     fetchSettings();
     userType && fetchRequiredFields();
-  }, [userType]);
+  }, [fetchRequiredFields, fetchSettings, userType]);
 
   const upperAndLowerCase = validateUppercase(password) && validateLowercase(password);
   const number = validateNumber(password);

apps/web/app/(webapp)/(components)/AppLeftSideBar.tsx

@@ -3,62 +3,27 @@
 import { LEFT_SIDE_BAR_BOTTOM_DATA, LEFT_SIDE_BAR_TOP_DATA } from '@/data/leftSideBarData'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { motion } from 'framer-motion'
-import clientAxiosRequest from '@/hooks/clientAxiosRequest'
-import * as API from '@/config/endpoints';
 import { findPermissionSlug } from '@/utils/findPermissionSlug'
 import { truncateString } from '@/utils/truncateString'
+import { useUserStore } from '@/stores'
 
 const AppLeftSideBar = ({ bannerExist }: { bannerExist: boolean }) => {
   const pathname = usePathname();
-  const [profile, setProfile] = useState<any>();
-  const [businessDetails, setBusinessDetails] = useState<any>(null);
-  let userPermissions = profile?.user?.role?.permissions
-
-  async function fetchProfile() {
-    const result: any = await clientAxiosRequest({
-      headers: {},
-      apiEndpoint: API.getProfile(),
-      method: 'GET',
-      data: null,
-      noToast: true
-    });
-
-    setProfile(result?.data);
-    // setJsCookies('aperta-user-profile', JSON.stringify({
-    //   name: `${result?.data?.firstName} ${result?.data?.lastName}`,
-    //   companyRole: result?.data?.companyRole?.toLowerCase()?.replace(/_/g, ' '),
-    //   userType: result?.data?.user?.role?.parent?.slug
-    // }))
-  }
-
-  const fetchDetails = async () => {
-    const result : any = await clientAxiosRequest({
-      headers: {},
-      apiEndpoint: API.getCompanyDetails(),
-      method: 'GET',
-      data: null,
-      noToast: true
-    });
-
-    setBusinessDetails(result?.data);
-  }
-
-  useEffect(() => {
-    fetchProfile();
-    fetchDetails();
-  }, []);
+
+  // Get data from Zustand store instead of fetching
+  const profile = useUserStore((state) => state.profile);
+  const companyDetails = useUserStore((state) => state.companyDetails);
+  const getAvatarAlt = useUserStore((state) => state.getAvatarAlt);
+
+  const userPermissions = profile?.user?.role?.permissions;
+  const firstName = profile?.firstName;
+  const avatarAlt = getAvatarAlt();
 
   const isActive = (path: string): boolean => {
     return pathname?.includes(path);
-  }
-
-  let firstName = profile?.firstName;
-  let lastName = profile?.lastName;
-  let avatarAlt = (firstName || lastName) ? 
-    `${firstName ? firstName[0] : ''}${lastName ? lastName[0] : ''}` :
-    businessDetails?.name ? businessDetails?.name[0] : '';
+  };
 
   return (
     <aside className={`fixed w-[280px] z-[100] left-0 bottom-0 ${bannerExist ? 'h-[calc(100vh-56px)]' : 'h-screen'} border-r border-o-border bg-white flex flex-col gap-[24px] py-[24px]`}>
@@ -74,8 +39,8 @@ const AppLeftSideBar = ({ bannerExist }: { bannerExist: boolean }) => {
               {
                 firstName ? 
                   truncateString(`${firstName}`, 22) : 
-                  businessDetails?.name ? 
-                    truncateString(businessDetails?.name, 22) :
+                  companyDetails?.name ? 
+                    truncateString(companyDetails?.name, 22) :
                     ''
               }
             </h3>
@@ -108,7 +73,7 @@ const AppLeftSideBar = ({ bannerExist }: { bannerExist: boolean }) => {
         <div className='w-full h-fit flex flex-col gap-[20px]'>
           {
             LEFT_SIDE_BAR_TOP_DATA?.map((data: any) => (
-              findPermissionSlug(userPermissions, data?.permit) &&
+              findPermissionSlug(userPermissions || [], data?.permit) &&
               (
                 data?.access == profile?.user?.role?.parent?.slug ||
                 data?.access == 'all'
@@ -124,7 +89,7 @@ const AppLeftSideBar = ({ bannerExist }: { bannerExist: boolean }) => {
                 <div className='w-full flex flex-col gap-[4px]'>
                   {
                     data?.links?.map((link: any) => (
-                      findPermissionSlug(userPermissions, link?.permit) &&
+                      findPermissionSlug(userPermissions || [], link?.permit) &&
                       (
                         link?.access == profile?.user?.role?.parent?.slug ||
                         link?.access == 'all'
@@ -164,7 +129,7 @@ const AppLeftSideBar = ({ bannerExist }: { bannerExist: boolean }) => {
           <div className='w-full flex flex-col pt-[24px] border-t border-o-border'>
             {
               LEFT_SIDE_BAR_BOTTOM_DATA?.map((link) => (
-                findPermissionSlug(userPermissions, link?.permit) &&
+                findPermissionSlug(userPermissions || [], link?.permit) &&
                 <div
                   key={link?.id}
                   className='w-full relative h-fit'

apps/web/app/(webapp)/(components)/AppNavBar.tsx

@@ -9,8 +9,7 @@ import { Button } from '../../../components/globalComponents';
 import { AppCenterModal, AvatarMenu } from '.';
 import { toast } from 'react-toastify';
 import { getJsCookies, removeJsCookies, setJsCookies } from '@/config/jsCookie';
-import clientAxiosRequest from '@/hooks/clientAxiosRequest';
-import * as API from '@/config/endpoints';
+import { useUserStore } from '@/stores';
 
 const AppNavBar = ({ 
   bannerExist,
@@ -19,6 +18,10 @@ const AppNavBar = ({
   bannerExist: boolean;
   canToggleMode: boolean;
 }) => {
+  // Get data from Zustand store instead of fetching
+  const profile = useUserStore((state) => state.profile);
+  const companyDetails = useUserStore((state) => state.companyDetails);
+  const getAvatarAlt = useUserStore((state) => state.getAvatarAlt);
 
   const [openModal, setOpenModal] = useState(false);
   const [isLive, setToggleMode] = useState(false);
@@ -29,51 +32,17 @@ const AppNavBar = ({
   const router = useRouter();
   const { get } = useSearchParams();
   const slug = get('slug');
-  const [businessDetails, setBusinessDetails] = useState<any>(null);
-  const [profile, setProfile] = useState<any>(null);
-  // const getUserProfile = getJsCookies('aperta-user-profile');
-  // const userProfile = getUserProfile ? JSON.parse(getUserProfile) : null;
 
   useEffect(() => {
     const enviromentMode = canToggleMode ? getJsCookies('environment') : 'development';
     !canToggleMode && setJsCookies('environment', 'development');
     setToggleMode(enviromentMode == 'production' ? true : false);
   }, [canToggleMode]);
 
-  const fetchProfile = async() => {
-    const result: any = await clientAxiosRequest({
-      headers: {},
-      apiEndpoint: API.getProfile(),
-      method: 'GET',
-      data: null,
-      noToast: true
-    });
-
-    setProfile(result?.data);
-  }
-
-  const fetchDetails = async () => {
-    const result : any = await clientAxiosRequest({
-      headers: {},
-      apiEndpoint: API.getCompanyDetails(),
-      method: 'GET',
-      data: null,
-      noToast: true
-    });
-
-    setBusinessDetails(result?.data);
-  }
-
-  useEffect(() => {
-    fetchProfile();
-    fetchDetails();
-  }, []);
-
-  let firstName = profile?.firstName;
-  let lastName = profile?.lastName;
-  let avatarAlt = (firstName || lastName) ? 
-    `${firstName ? firstName[0] : ''}${lastName ? lastName[0] : ''}` :
-    businessDetails?.name ? businessDetails?.name[0] : '';
+  // Get computed values from store
+  const firstName = profile?.firstName;
+  const lastName = profile?.lastName;
+  const avatarAlt = getAvatarAlt();
 
   // const unReadNotifications = NOTIFICATIONS_DATA;
   // const notifications = NOTIFICATIONS_DATA?.slice(0, 5);

apps/web/app/(webapp)/(components)/DatePicker.tsx

@@ -3,7 +3,7 @@
 import { updateSearchParams } from '@/utils/searchParams';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react'
-import moment from 'moment';
+import { formatDateLabel, formatDateRangeLabel } from '@/utils/dateUtils'
 import Datepicker, { DateType, DateValueType } from 'react-tailwindcss-datepicker';
 import { DatePickerProps } from '@/types/webappTypes/componentsTypes';
 
@@ -96,11 +96,11 @@ const DatePicker = ({
               (changeValue && start_date) ?
                 `${start_date}` :
                   (start_date && end_date) ?
-                    `${moment(start_date).format('ll')} - ${moment(end_date).format('ll')}` :
+                    formatDateRangeLabel(start_date, end_date) :
                     start_date ? 
-                      moment(start_date).format('ll') :
+                      formatDateLabel(start_date) :
                       end_date ? 
-                        moment(end_date).format('ll') :
+                        formatDateLabel(end_date) :
                         placeholder ?
                           <div className='text-f14 text-o-text-muted'>
                             {placeholder}