From 2375f481ba3cea57947d24252acae7a6f9da4884 Mon Sep 17 00:00:00 2001
From: brooktewabe <brooktewabe00@gmail.com>
Date: Wed, 8 Apr 2026 15:29:31 +0300
Subject: [PATCH] code splitting added

---
 src/App.tsx    | 110 +++++++++++++++++++++++++++++--------------------
 vite.config.ts |  49 +++++++++++++++-------
 2 files changed, 100 insertions(+), 59 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c5da977..2e75922 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,67 +1,87 @@
+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 (
-    <Routes>
-      <Route path="/login" element={<LoginPage />} />
-      <Route element={<ProtectedLayout />}>
-        <Route path="/" element={<Navigate to="/dashboard" replace />} />
-        <Route path="/dashboard" element={<DashboardPage />} />
-        <Route path="/reservations" element={<ReservationsPage />} />
-        <Route path="/bookings" element={<BookingsPage />} />
-        <Route path="/bookings/new" element={<NewBookingPage />} />
-        <Route path="/bookings/:id" element={<BookingDetailPage />} />
-        <Route path="/calendar" element={<CalendarPage />} />
-        <Route path="/rooms" element={<RoomsPage />} />
-        <Route path="/guest-services" element={<GuestServicesPage />} />
-        <Route path="/loyalty/points" element={<LoyaltyPointsPage />} />
-        <Route path="/loyalty/raffles" element={<HotelRafflesPage />} />
-        <Route path="/customers" element={<CustomersPage />} />
-        <Route path="/transactions" element={<TransactionsPage />} />
-        <Route path="/payments" element={<PaymentsPage />} />
-        <Route path="/marketing/visits" element={<VisitsPage />} />
-        <Route path="/marketing/discount-codes" element={<DiscountCodesPage />} />
-        <Route path="/marketing/referral-codes" element={<ReferralCodesPage />} />
-        <Route path="/settings/users" element={<ManageUsersPage />} />
-        <Route path="/settings" element={<SettingsPage />} />
-      </Route>
-      <Route path="*" element={<Navigate to="/dashboard" replace />} />
-    </Routes>
+    <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 />} />
+          <Route path="/reservations" element={<ReservationsPage />} />
+          <Route path="/bookings" element={<BookingsPage />} />
+          <Route path="/bookings/new" element={<NewBookingPage />} />
+          <Route path="/bookings/:id" element={<BookingDetailPage />} />
+          <Route path="/calendar" element={<CalendarPage />} />
+          <Route path="/rooms" element={<RoomsPage />} />
+          <Route path="/guest-services" element={<GuestServicesPage />} />
+          <Route path="/loyalty/points" element={<LoyaltyPointsPage />} />
+          <Route path="/loyalty/raffles" element={<HotelRafflesPage />} />
+          <Route path="/customers" element={<CustomersPage />} />
+          <Route path="/transactions" element={<TransactionsPage />} />
+          <Route path="/payments" element={<PaymentsPage />} />
+          <Route path="/marketing/visits" element={<VisitsPage />} />
+          <Route path="/marketing/discount-codes" element={<DiscountCodesPage />} />
+          <Route path="/marketing/referral-codes" element={<ReferralCodesPage />} />
+          <Route path="/settings/users" element={<ManageUsersPage />} />
+          <Route path="/settings" element={<SettingsPage />} />
+        </Route>
+
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
+      </Routes>
+    </Suspense>
   );
 }
diff --git a/vite.config.ts b/vite.config.ts
index 05cb987..0ca5b53 100644
--- a/vite.config.ts
+++ b/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({
-  plugins: [react(), tailwindcss()],
-  server: {
-    proxy: {
-      "/api": {
-        target: process.env.VITE_PROXY_TARGET ?? "http://localhost:3000",
-        changeOrigin: true,
+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()],
+
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
       },
     },
-  },
-  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"] : [],
+    },
+  };
+});
\ No newline at end of file