Merge branch 'main' into dev

src/App.tsx

@@ -1,38 +1,42 @@
+import React from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
-import DashboardRoute from '@/routes/Dashboard.route';
-import TransactionsRoute from './routes/Transactions.route';
-import SubscriptionsRoute from './routes/Subscriptions.route';
-import PaymentMethodsRoute from './routes/PaymentMethods.route';
-import CategoriesRoute from './routes/Categories.route';
-import NotFoundPage from '@/routes/NotFound.route';
-import SignInRoute from './routes/SignIn.route';
-import SignUpRoute from './routes/SignUp.route';
-import BudgetRoute from './routes/Budget.route';
-import VerifyMailRoute from './routes/VerifyMail.route';
-import RequestPasswordResetRoute from './routes/RequestPasswordReset.route';
-import ResetPasswordRoute from './routes/ResetPassword.route';
-import SettingsRoute from './routes/Settings.route';
+import { FullPageLoader } from './components/Loading/FullPageLoader.component';
+const DashboardRoute = React.lazy(() => import('./routes/Dashboard.route'));
+const TransactionsRoute = React.lazy(() => import('./routes/Transactions.route'));
+const SubscriptionsRoute = React.lazy(() => import('./routes/Subscriptions.route'));
+const PaymentMethodsRoute = React.lazy(() => import('./routes/PaymentMethods.route'));
+const CategoriesRoute = React.lazy(() => import('./routes/Categories.route'));
+const NotFoundPage = React.lazy(() => import('./routes/NotFound.route'));
+const SignInRoute = React.lazy(() => import('./routes/SignIn.route'));
+const SignUpRoute = React.lazy(() => import('./routes/SignUp.route'));
+const BudgetRoute = React.lazy(() => import('./routes/Budget.route'));
+const VerifyMailRoute = React.lazy(() => import('./routes/VerifyMail.route'));
+const RequestPasswordResetRoute = React.lazy(() => import('./routes/RequestPasswordReset.route'));
+const ResetPasswordRoute = React.lazy(() => import('./routes/ResetPassword.route'));
+const SettingsRoute = React.lazy(() => import('./routes/Settings.route'));
 
 const App = () => {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route index element={<DashboardRoute />} />
-        <Route path="/dashboard" element={<Navigate to="/" />} />
-        <Route path="/transactions" element={<TransactionsRoute />} />
-        <Route path="/subscriptions" element={<SubscriptionsRoute />} />
-        <Route path="/budgets" element={<BudgetRoute />} />
-        <Route path="/payment-methods" element={<PaymentMethodsRoute />} />
-        <Route path="/categories" element={<CategoriesRoute />} />
-        <Route path="/settings/profile" element={<SettingsRoute />} />
-        <Route path="/sign-in" element={<SignInRoute />} />
-        <Route path="/sign-up" element={<SignUpRoute />} />
-        <Route path="/verify-email" element={<VerifyMailRoute />} />
-        <Route path="/request-password-reset" element={<RequestPasswordResetRoute />} />
-        <Route path="/reset-password" element={<ResetPasswordRoute />} />
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
-    </BrowserRouter>
+    <React.Suspense fallback={<FullPageLoader />}>
+      <BrowserRouter>
+        <Routes>
+          <Route index element={<DashboardRoute />} />
+          <Route path="/dashboard" element={<Navigate to="/" />} />
+          <Route path="/transactions" element={<TransactionsRoute />} />
+          <Route path="/subscriptions" element={<SubscriptionsRoute />} />
+          <Route path="/budgets" element={<BudgetRoute />} />
+          <Route path="/payment-methods" element={<PaymentMethodsRoute />} />
+          <Route path="/categories" element={<CategoriesRoute />} />
+          <Route path="/settings/profile" element={<SettingsRoute />} />
+          <Route path="/sign-in" element={<SignInRoute />} />
+          <Route path="/sign-up" element={<SignUpRoute />} />
+          <Route path="/verify-email" element={<VerifyMailRoute />} />
+          <Route path="/request-password-reset" element={<RequestPasswordResetRoute />} />
+          <Route path="/reset-password" element={<ResetPasswordRoute />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </BrowserRouter>
+    </React.Suspense>
   );
 };
 

src/components/Brand.component.tsx

@@ -14,26 +14,36 @@ export type TBrandProps = {
   boxStyle?: BoxProps['sx'];
   iconStyle?: IconProps['sx'];
   typographyStyle?: TypographyProps['sx'];
+  asLink?: boolean;
 };
 
-export const Brand: React.FC<TBrandProps> = ({ boxStyle, iconStyle, typographyStyle }) => {
+export const Brand: React.FC<TBrandProps> = ({
+  boxStyle,
+  iconStyle,
+  typographyStyle,
+  asLink = false,
+}) => {
+  const baseProps: TypographyProps = {
+    variant: 'h5',
+    noWrap: true,
+    sx: {
+      fontWeight: 700,
+      color: 'inherit',
+      textDecoration: 'none',
+      ...typographyStyle,
+    },
+  };
+
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', ...boxStyle }}>
       <SavingsIcon sx={{ mr: 1, ...iconStyle }} />
-      <Typography
-        variant="h5"
-        component={Link}
-        to="/"
-        noWrap
-        sx={{
-          fontWeight: 700,
-          color: 'inherit',
-          textDecoration: 'none',
-          ...typographyStyle,
-        }}
-      >
-        {AppConfig.appName}
-      </Typography>
+      {asLink ? (
+        <Typography component={Link} to="/" {...baseProps}>
+          {AppConfig.appName}
+        </Typography>
+      ) : (
+        <Typography {...baseProps}>{AppConfig.appName}</Typography>
+      )}
     </Box>
   );
 };

src/components/Layout/AppBar.component.tsx

@@ -65,15 +65,15 @@ export const AppBar = () => {
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           {/* Desktop: Brand */}
-          <Brand boxStyle={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
+          <Brand asLink boxStyle={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
 
           {/* Menu: Mobile */}
           <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
             <DrawerHamburger size="large" />
           </Box>
 
           {/* Modile: Brand */}
-          <Brand boxStyle={{ display: { xs: 'flex', md: 'none' }, flexGrow: 1 }} />
+          <Brand asLink boxStyle={{ display: { xs: 'flex', md: 'none' }, flexGrow: 1 }} />
 
           {/* Menu: Desktop */}
           <Box sx={{ display: { xs: 'none', md: 'flex' }, marginLeft: 'auto', marginRight: 2 }}>

src/components/Layout/Drawer/DrawerHeader.component.tsx

@@ -13,6 +13,7 @@ export const DrawerHeader = () => {
       }}
     >
       <Brand
+        asLink
         boxStyle={{
           display: { xs: 'flex', md: open ? 'flex' : 'none' },
           ml: 2,

src/routes/PaymentMethods.route.tsx

@@ -29,7 +29,7 @@ interface IPaymentMethodsHandler {
   onSearch: (keyword: string) => void;
   onCreatePaymentMethod: (payload?: TCreatePaymentMethodDrawerPayload) => void;
   onPaymentMethodDelete: (paymentMethod: TPaymentMethod) => void;
-  onConfirmTransactionDelete: () => void;
+  onConfirmPaymentMethodDelete: () => void;
   onEditPaymentMethod: (paymentMethod: TPaymentMethod) => void;
   selection: ISelectionHandler<TPaymentMethod>;
 }
@@ -71,7 +71,7 @@ export const PaymentMethods = () => {
     onEditPaymentMethod(paymentMethod) {
       dispatchEditDrawer({ type: 'open', payload: paymentMethod });
     },
-    async onConfirmTransactionDelete() {
+    async onConfirmPaymentMethodDelete() {
       try {
         if (deletePaymentMethods.length === 0) return;
         const [deletedItem, error] = await PaymentMethodService.delete(

src/routes/Subscriptions.route.tsx

@@ -316,7 +316,7 @@ export const Subscriptions = () => {
           setShowDeleteSubscriptionDialog(false);
           setDeleteSubscriptions([]);
         }}
-        onConfirm={() => handler.onConfirmSubscriptionDelete()}
+        onConfirm={handler.onConfirmSubscriptionDelete}
         withTransition
       />