update

Frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, lazy, Suspense } from 'react';
 import { 
   BrowserRouter, 
   Routes, 
@@ -7,6 +7,12 @@ import {
 } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { GlobalLoadingProvider } from './contexts/GlobalLoadingContext';
+import { CookieConsentProvider } from './contexts/CookieConsentContext';
+import OfflineIndicator from './components/common/OfflineIndicator';
+import CookieConsentBanner from './components/common/CookieConsentBanner';
+import AnalyticsLoader from './components/common/AnalyticsLoader';
+import Loading from './components/common/Loading';
 
 // Store
 import useAuthStore from './store/useAuthStore';
@@ -22,52 +28,42 @@ import {
   AdminRoute 
 } from './components/auth';
 
-// Pages
-import HomePage from './pages/HomePage';
-import DashboardPage from 
-  './pages/customer/DashboardPage';
-import RoomListPage from 
-  './pages/customer/RoomListPage';
-import RoomDetailPage from 
-  './pages/customer/RoomDetailPage';
-import SearchResultsPage from 
-  './pages/customer/SearchResultsPage';
-import FavoritesPage from 
-  './pages/customer/FavoritesPage';
-import MyBookingsPage from 
-  './pages/customer/MyBookingsPage';
-import BookingPage from 
-  './pages/customer/BookingPage';
-import BookingSuccessPage from 
-  './pages/customer/BookingSuccessPage';
-import BookingDetailPage from 
-  './pages/customer/BookingDetailPage';
-import DepositPaymentPage from 
-  './pages/customer/DepositPaymentPage';
-import PaymentConfirmationPage from 
-  './pages/customer/PaymentConfirmationPage';
-import PaymentResultPage from 
-  './pages/customer/PaymentResultPage';
-import { 
-  LoginPage, 
-  RegisterPage,
-  ForgotPasswordPage,
-  ResetPasswordPage 
-} from './pages/auth';
+// Lazy load pages for code splitting
+const HomePage = lazy(() => import('./pages/HomePage'));
+const DashboardPage = lazy(() => import('./pages/customer/DashboardPage'));
+const RoomListPage = lazy(() => import('./pages/customer/RoomListPage'));
+const RoomDetailPage = lazy(() => import('./pages/customer/RoomDetailPage'));
+const SearchResultsPage = lazy(() => import('./pages/customer/SearchResultsPage'));
+const FavoritesPage = lazy(() => import('./pages/customer/FavoritesPage'));
+const MyBookingsPage = lazy(() => import('./pages/customer/MyBookingsPage'));
+const BookingPage = lazy(() => import('./pages/customer/BookingPage'));
+const BookingSuccessPage = lazy(() => import('./pages/customer/BookingSuccessPage'));
+const BookingDetailPage = lazy(() => import('./pages/customer/BookingDetailPage'));
+const DepositPaymentPage = lazy(() => import('./pages/customer/DepositPaymentPage'));
+const PaymentConfirmationPage = lazy(() => import('./pages/customer/PaymentConfirmationPage'));
+const PaymentResultPage = lazy(() => import('./pages/customer/PaymentResultPage'));
+const ProfilePage = lazy(() => import('./pages/customer/ProfilePage'));
+const AboutPage = lazy(() => import('./pages/AboutPage'));
+const LoginPage = lazy(() => import('./pages/auth/LoginPage'));
+const RegisterPage = lazy(() => import('./pages/auth/RegisterPage'));
+const ForgotPasswordPage = lazy(() => import('./pages/auth/ForgotPasswordPage'));
+const ResetPasswordPage = lazy(() => import('./pages/auth/ResetPasswordPage'));
 
-// Admin Pages
-import {
-  DashboardPage as AdminDashboardPage,
-  RoomManagementPage,
-  UserManagementPage,
-  BookingManagementPage,
-  PaymentManagementPage,
-  ServiceManagementPage,
-  ReviewManagementPage,
-  PromotionManagementPage,
-  CheckInPage,
-  CheckOutPage,
-} from './pages/admin';
+// Lazy load admin pages
+const AdminDashboardPage = lazy(() => import('./pages/admin/DashboardPage'));
+const RoomManagementPage = lazy(() => import('./pages/admin/RoomManagementPage'));
+const UserManagementPage = lazy(() => import('./pages/admin/UserManagementPage'));
+const BookingManagementPage = lazy(() => import('./pages/admin/BookingManagementPage'));
+const PaymentManagementPage = lazy(() => import('./pages/admin/PaymentManagementPage'));
+const ServiceManagementPage = lazy(() => import('./pages/admin/ServiceManagementPage'));
+const ReviewManagementPage = lazy(() => import('./pages/admin/ReviewManagementPage'));
+const PromotionManagementPage = lazy(() => import('./pages/admin/PromotionManagementPage'));
+const BannerManagementPage = lazy(() => import('./pages/admin/BannerManagementPage'));
+const ReportsPage = lazy(() => import('./pages/admin/ReportsPage'));
+const CookieSettingsPage = lazy(() => import('./pages/admin/CookieSettingsPage'));
+const AuditLogsPage = lazy(() => import('./pages/admin/AuditLogsPage'));
+const CheckInPage = lazy(() => import('./pages/admin/CheckInPage'));
+const CheckOutPage = lazy(() => import('./pages/admin/CheckOutPage'));
 
 // Demo component for pages not yet created
 const DemoPage: React.FC<{ title: string }> = ({ title }) => (
@@ -125,8 +121,16 @@ function App() {
   };
 
   return (
-    <BrowserRouter>
-      <Routes>
+    <GlobalLoadingProvider>
+      <CookieConsentProvider>
+      <BrowserRouter
+        future={{
+          v7_startTransition: true,
+          v7_relativeSplatPath: true,
+        }}
+      >
+        <Suspense fallback={<Loading fullScreen text="Loading page..." />}>
+          <Routes>
         {/* Public Routes with Main Layout */}
         <Route 
           path="/" 
@@ -161,7 +165,7 @@ function App() {
           />
           <Route 
             path="about" 
-            element={<DemoPage title="About" />} 
+            element={<AboutPage />} 
           />
           
           {/* Protected Routes - Requires login */}
@@ -225,7 +229,7 @@ function App() {
             path="profile" 
             element={
               <ProtectedRoute>
-                <DemoPage title="Profile" />
+                <ProfilePage />
               </ProtectedRoute>
             } 
           />
@@ -301,15 +305,19 @@ function App() {
           />
           <Route 
             path="banners" 
-            element={<DemoPage title="Banner Management" />} 
+            element={<BannerManagementPage />} 
           />
-          <Route 
+          <Route
             path="reports" 
-            element={<DemoPage title="Reports" />} 
+            element={<ReportsPage />} 
           />
-          <Route 
+          <Route
+            path="audit-logs" 
+            element={<AuditLogsPage />} 
+          />
+          <Route
             path="settings" 
-            element={<DemoPage title="Settings" />} 
+            element={<CookieSettingsPage />} 
           />
         </Route>
 
@@ -320,18 +328,27 @@ function App() {
         />
       </Routes>
       
-      <ToastContainer 
-        position="top-right"
-        autoClose={3000}
-        hideProgressBar={false}
-        newestOnTop
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-      />
-    </BrowserRouter>
+          <ToastContainer 
+            position="top-right"
+            autoClose={3000}
+            hideProgressBar={false}
+            newestOnTop
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            theme="light"
+            toastClassName="rounded-lg shadow-lg"
+            bodyClassName="text-sm font-medium"
+          />
+          <OfflineIndicator />
+          <CookieConsentBanner />
+          <AnalyticsLoader />
+        </Suspense>
+      </BrowserRouter>
+      </CookieConsentProvider>
+    </GlobalLoadingProvider>
   );
 }