Merge branch 'develop' into chore/google-authentication

src/components/Layout/Header.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, Typography } from '@mui/material';
+import { Box, IconButton, Skeleton, Typography } from '@mui/material';
 import { Icon } from '@rkheftan/harmony-ui';
 import { More } from 'iconsax-react';
 import type { UserInfo } from '@/contexts/AuthContext';
@@ -7,7 +7,7 @@ interface HeaderProps {
   user: UserInfo;
 }
 
-export const Header: React.FC<HeaderProps> = ({ user }) => {
+export const Header: React.FC<HeaderProps> = ({ user, loading }) => {
   return (
     <Box
       sx={{

src/components/Layout/Layout.tsx

@@ -14,7 +14,6 @@ export const Layout = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [sideNavOpen, setSideNavOpen] = useState(false);
-
   const { userInfo } = useAuth();
 
   return (
@@ -45,7 +44,9 @@ export const Layout = () => {
             setSideNavOpen={setSideNavOpen}
             user={userInfo}
           />
-          <Outlet />
+          <Box sx={{ flex: 1, overflowY: 'auto' }}>
+            <Outlet />
+          </Box>
         </Box>
 
         <SideNav

src/components/Layout/Toolbar.tsx

@@ -3,7 +3,7 @@ import {
   Box,
   IconButton,
   Toolbar as MuiToolbar,
-  Typography,
+  Skeleton,
 } from '@mui/material';
 import { Icon } from '@rkheftan/harmony-ui';
 import { HambergerMenu, Menu } from 'iconsax-react';
@@ -22,6 +22,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   setSideNavOpen,
   isMobile,
   user,
+  loading,
 }) => {
   return (
     <MuiToolbar
@@ -52,8 +53,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
             <Icon Component={HambergerMenu} />
           </IconButton>
         )}
-        {/* <Logo /> */}
-        <Typography variant="h6">LOGO placeholder</Typography>
+        <Logo />
       </Box>
       <Box
         sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 1 }}

src/features/profile/api/settingsApi.ts

@@ -15,7 +15,7 @@ import {
 import { type InfoRowData } from '../types/settingsType';
 
 export async function fetchProfile() {
-  return apiClient.post<GetProfileApiResponse>('/Profile/GetProfile');
+  return apiClient.post<GetProfileApiResponse>('/Profile/GetProfile', {});
 }
 
 export async function saveProfile(payload: {

src/routes/config.tsx

@@ -1,15 +1,4 @@
 import { Layout } from '@/components';
-import {
-  AuthenticationPage,
-  ForgetPasswordPage,
-  UserCompletionPage,
-} from '@/features/authorization';
-import {
-  ActiveDevicesPage,
-  SecurityPage,
-  SettingPage,
-  UserInformationPage,
-} from '@/features/profile';
 import {
   Calendar,
   Devices,
@@ -23,9 +12,45 @@ import {
   Sms,
   type Icon,
 } from 'iconsax-react';
-import { type ReactNode } from 'react';
+import { lazy, type ReactNode } from 'react';
 import { Navigate } from 'react-router-dom';
 
+const AuthenticationPage = lazy(() =>
+  import('@/features/authorization').then((module) => ({
+    default: module.AuthenticationPage,
+  })),
+);
+const UserCompletionPage = lazy(() =>
+  import('@/features/authorization').then((module) => ({
+    default: module.UserCompletionPage,
+  })),
+);
+const ForgetPasswordPage = lazy(() =>
+  import('@/features/authorization').then((module) => ({
+    default: module.ForgetPasswordPage,
+  })),
+);
+const UserInformationPage = lazy(() =>
+  import('@/features/profile').then((module) => ({
+    default: module.UserInformationPage,
+  })),
+);
+const SecurityPage = lazy(() =>
+  import('@/features/profile').then((module) => ({
+    default: module.SecurityPage,
+  })),
+);
+const ActiveDevicesPage = lazy(() =>
+  import('@/features/profile').then((module) => ({
+    default: module.ActiveDevicesPage,
+  })),
+);
+const SettingPage = lazy(() =>
+  import('@/features/profile').then((module) => ({
+    default: module.SettingPage,
+  })),
+);
+
 export interface RouteConfig {
   path: string;
   element?: ReactNode;