Added dockerfile

Dockerfile

@@ -0,0 +1,40 @@
+# Build stage
+FROM node:22-alpine as build
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build-time env (Vite inlines these at build time)
+ARG VITE_API_BASE_URL
+
+ENV VITE_API_BASE_URL=${VITE_API_BASE_URL}
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built assets from build stage
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port 80
+EXPOSE 80
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD wget --quiet --tries=1 --spider http://localhost/ || exit 1
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,34 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    # SPA routing - serve index.html for all routes
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache static assets
+    location /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Disable access to hidden files
+    location ~ /\. {
+        deny all;
+    }
+}

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>
   );
 }

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"] : [],
+    },
+  };
+});