Account/src/routes/config.tsx

import { Layout } from '@/components';
import { NavigateWithToast } from '@/components/NavigateWithToast';
import { ProfileProvider } from '@/features/profile/providers/ProfileProvider';
import {
  Calendar,
  Devices,
  Mobile,
  PasswordCheck,
  Personalcard,
  ProfileCircle,
  Setting,
  Shield,
  Sms,
  type Icon,
} from 'iconsax-react';
import { lazy, type ReactNode } from 'react';
import { Navigate } from 'react-router-dom';

const AuthenticationPage = lazy(() =>
  import('@/features/authentication').then((module) => ({
    default: module.AuthenticationPage,
  })),
);
const AccountCreatedPage = lazy(() =>
  import('@/features/authentication').then((module) => ({
    default: module.AccountCreatedPage,
  })),
);
const UserCompletionPage = lazy(() =>
  import('@/features/authentication').then((module) => ({
    default: module.UserCompletionPage,
  })),
);
const ForgetPasswordPage = lazy(() =>
  import('@/features/authentication').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;
  authorize?: boolean;
  navConfig?: {
    title: string; // Translation key
    icon?: Icon;
  };
  children?: RouteConfig[];
}

// can lazy load component if needed (ex. lazy(() => import('@/features/home/routes/HomePage'));)
export const appRoutes: RouteConfig[] = [
  {
    path: '*',
    element: (
      <NavigateWithToast
        to="/setting/profile"
        replace
        message="messages.pageNotFound"
        severity="error"
      />
    ),
  },
  {
    path: '/',
    element: <Navigate to="/setting/profile" replace />,
  },
  {
    path: '/login',
    element: <AuthenticationPage />,
  },
  {
    path: '/account-created',
    element: <AccountCreatedPage />,
    authorize: true,
  },
  { path: '/signup', element: <UserCompletionPage /> },
  {
    path: '/forget-password',
    element: <ForgetPasswordPage />,
  },

  {
    path: '/setting',
    element: (
      <ProfileProvider>
        <Layout />
      </ProfileProvider>
    ),
    authorize: true,
    children: [
      {
        path: '/setting/',
        element: <Navigate to="/setting/profile" replace />,
      },
      {
        path: '/setting/profile',
        element: <UserInformationPage />,
        navConfig: {
          title: 'side.account',
          icon: ProfileCircle,
        },
        children: [
          {
            path: '/setting/profile#info',
            navConfig: {
              title: 'side.personalInfo',
              icon: Personalcard,
            },
          },
          {
            path: '/setting/profile#contact-info',
            navConfig: {
              title: 'side.contactInfo',
              icon: Mobile,
            },
          },
          {
            path: '/setting/profile#email',
            navConfig: {
              title: 'side.email',
              icon: Sms,
            },
          },
        ],
      },
      {
        path: '/setting/security',
        element: <SecurityPage />,
        navConfig: {
          title: 'side.security',
          icon: Shield,
        },
        children: [
          {
            path: '/setting/security#password',
            navConfig: {
              title: 'side.password',
              icon: PasswordCheck,
            },
          },
          {
            path: '/setting/security#recent-sessions',
            navConfig: {
              title: 'side.recentSessions',
              icon: Devices,
            },
          },
        ],
      },
      {
        path: '/setting/active-sessions',
        element: <ActiveDevicesPage />,
        navConfig: {
          title: 'side.activeSessions',
          icon: Calendar,
        },
      },
      {
        path: '/setting/preferences',
        element: <SettingPage />,
        navConfig: {
          title: 'side.setting',
          icon: Setting,
        },
      },
    ],
  },
];