code splitting added

src/App.tsx

@@ -1,45 +1,63 @@
+import type { ComponentType } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
+import { Suspense, lazy } from "react";
 
 import { AppLayout } from "@/components/layout/AppLayout";
 import { useAuthStore } from "@/store/authStore";
-import { BookingDetailPage } from "@/pages/BookingDetailPage";
-import { BookingsPage } from "@/pages/BookingsPage";
-import { CalendarPage } from "@/pages/CalendarPage";
-import { CustomersPage } from "@/pages/CustomersPage";
-import { DashboardPage } from "@/pages/DashboardPage";
-import { DiscountCodesPage } from "@/pages/DiscountCodesPage";
-import { LoginPage } from "@/pages/LoginPage";
-import { NewBookingPage } from "@/pages/NewBookingPage";
-import { PaymentsPage } from "@/pages/PaymentsPage";
-import { ReferralCodesPage } from "@/pages/ReferralCodesPage";
-import { ReservationsPage } from "@/pages/ReservationsPage";
-import { RoomsPage } from "@/pages/RoomsPage";
-import { SettingsPage } from "@/pages/SettingsPage";
-import { TransactionsPage } from "@/pages/TransactionsPage";
-import { VisitsPage } from "@/pages/VisitsPage";
-import { ManageUsersPage } from "@/pages/ManageUsersPage";
-import { GuestServicesPage } from "@/pages/GuestServicesPage";
-import { LoyaltyPointsPage } from "@/pages/LoyaltyPointsPage";
-import { HotelRafflesPage } from "@/pages/HotelRafflesPage";
+import { Spinner } from "./components/ui/spinner";
+
+function lazyNamed<T extends ComponentType<unknown>, TModule extends Record<string, T>>(
+  importer: () => Promise<TModule>,
+  exportName: keyof TModule,
+) {
+  return lazy(async () => ({
+    default: (await importer())[exportName],
+  }));
+}
+
+// Lazy load pages
+const LoginPage = lazyNamed(() => import("@/pages/LoginPage"), "LoginPage");
+const DashboardPage = lazyNamed(() => import("@/pages/DashboardPage"), "DashboardPage");
+const ReservationsPage = lazyNamed(() => import("@/pages/ReservationsPage"), "ReservationsPage");
+const BookingsPage = lazyNamed(() => import("@/pages/BookingsPage"), "BookingsPage");
+const NewBookingPage = lazyNamed(() => import("@/pages/NewBookingPage"), "NewBookingPage");
+const BookingDetailPage = lazyNamed(() => import("@/pages/BookingDetailPage"), "BookingDetailPage");
+const CalendarPage = lazyNamed(() => import("@/pages/CalendarPage"), "CalendarPage");
+const RoomsPage = lazyNamed(() => import("@/pages/RoomsPage"), "RoomsPage");
+const GuestServicesPage = lazyNamed(() => import("@/pages/GuestServicesPage"), "GuestServicesPage");
+const LoyaltyPointsPage = lazyNamed(() => import("@/pages/LoyaltyPointsPage"), "LoyaltyPointsPage");
+const HotelRafflesPage = lazyNamed(() => import("@/pages/HotelRafflesPage"), "HotelRafflesPage");
+const CustomersPage = lazyNamed(() => import("@/pages/CustomersPage"), "CustomersPage");
+const TransactionsPage = lazyNamed(() => import("@/pages/TransactionsPage"), "TransactionsPage");
+const PaymentsPage = lazyNamed(() => import("@/pages/PaymentsPage"), "PaymentsPage");
+const VisitsPage = lazyNamed(() => import("@/pages/VisitsPage"), "VisitsPage");
+const DiscountCodesPage = lazyNamed(() => import("@/pages/DiscountCodesPage"), "DiscountCodesPage");
+const ReferralCodesPage = lazyNamed(() => import("@/pages/ReferralCodesPage"), "ReferralCodesPage");
+const ManageUsersPage = lazyNamed(() => import("@/pages/ManageUsersPage"), "ManageUsersPage");
+const SettingsPage = lazyNamed(() => import("@/pages/SettingsPage"), "SettingsPage");
 
 function ProtectedLayout() {
   const accessToken = useAuthStore((s) => s.accessToken);
   const bootstrapped = useAuthStore((s) => s.bootstrapped);
+
   if (!bootstrapped) {
     return (
       <div className="flex min-h-screen items-center justify-center text-muted-foreground">
-        Loading…
+        <Spinner />
       </div>
     );
   }
+
   if (!accessToken) return <Navigate to="/login" replace />;
   return <AppLayout />;
 }
 
 export default function App() {
   return (
+    <Suspense fallback={<div className="p-4">Loading...</div>}>
       <Routes>
         <Route path="/login" element={<LoginPage />} />
+
         <Route element={<ProtectedLayout />}>
           <Route path="/" element={<Navigate to="/dashboard" replace />} />
           <Route path="/dashboard" element={<DashboardPage />} />
@@ -61,7 +79,9 @@ export default function App() {
           <Route path="/settings/users" element={<ManageUsersPage />} />
           <Route path="/settings" element={<SettingsPage />} />
         </Route>
+
         <Route path="*" element={<Navigate to="/dashboard" replace />} />
       </Routes>
+    </Suspense>
   );
 }

vite.config.ts

@@ -1,21 +1,42 @@
 import path from "node:path";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  const isProduction = mode === "production";
+  const env = loadEnv(mode, process.cwd(), "");
+
+  const backendUrl =
+    env.VITE_PROXY_TARGET?.replace(/\/api\/?$/, "") ||
+    "http://localhost:3000";
+
+  return {
     plugins: [react(), tailwindcss()],
-  server: {
-    proxy: {
-      "/api": {
-        target: process.env.VITE_PROXY_TARGET ?? "http://localhost:3000",
-        changeOrigin: true,
-      },
-    },
-  },
+
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),
       },
     },
+
+    server: {
+      proxy: {
+        "/api": {
+          target: backendUrl,
+          changeOrigin: true,
+        },
+      },
+    },
+
+    build: {
+      target: "esnext",
+      minify: "esbuild",
+      sourcemap: !isProduction,
+      reportCompressedSize: false,
+    },
+    esbuild: {
+      drop: isProduction ? ["console", "debugger"] : [],
+    },
+  };
 });