fix: connect header and layout user info to api, fix setting api and lazy load

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;