YaltopiaTech/Yaltopia-Hotels
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code splitting added

Browse Source
This commit is contained in:
brooktewabe 2026-04-08 15:29:31 +03:00
parent cb5ad19655
commit 2375f481ba
2 changed files with 100 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/App.tsx
View File

@ -1,67 +1,87 @@
import type { ComponentType } from "react";
import { Navigate, Route, Routes } from "react-router-dom"; import { Navigate, Route, Routes } from "react-router-dom";
import { Suspense, lazy } from "react";
import { AppLayout } from "@/components/layout/AppLayout"; import { AppLayout } from "@/components/layout/AppLayout";
import { useAuthStore } from "@/store/authStore"; import { useAuthStore } from "@/store/authStore";
import { BookingDetailPage } from "@/pages/BookingDetailPage"; import { Spinner } from "./components/ui/spinner";
import { BookingsPage } from "@/pages/BookingsPage";
import { CalendarPage } from "@/pages/CalendarPage"; function lazyNamed<T extends ComponentType<unknown>, TModule extends Record<string, T>>(
import { CustomersPage } from "@/pages/CustomersPage"; importer: () => Promise<TModule>,
import { DashboardPage } from "@/pages/DashboardPage"; exportName: keyof TModule,
import { DiscountCodesPage } from "@/pages/DiscountCodesPage"; ) {
import { LoginPage } from "@/pages/LoginPage"; return lazy(async () => ({
import { NewBookingPage } from "@/pages/NewBookingPage"; default: (await importer())[exportName],
import { PaymentsPage } from "@/pages/PaymentsPage"; }));
import { ReferralCodesPage } from "@/pages/ReferralCodesPage"; }
import { ReservationsPage } from "@/pages/ReservationsPage";
import { RoomsPage } from "@/pages/RoomsPage"; // Lazy load pages
import { SettingsPage } from "@/pages/SettingsPage"; const LoginPage = lazyNamed(() => import("@/pages/LoginPage"), "LoginPage");
import { TransactionsPage } from "@/pages/TransactionsPage"; const DashboardPage = lazyNamed(() => import("@/pages/DashboardPage"), "DashboardPage");
import { VisitsPage } from "@/pages/VisitsPage"; const ReservationsPage = lazyNamed(() => import("@/pages/ReservationsPage"), "ReservationsPage");
import { ManageUsersPage } from "@/pages/ManageUsersPage"; const BookingsPage = lazyNamed(() => import("@/pages/BookingsPage"), "BookingsPage");
import { GuestServicesPage } from "@/pages/GuestServicesPage"; const NewBookingPage = lazyNamed(() => import("@/pages/NewBookingPage"), "NewBookingPage");
import { LoyaltyPointsPage } from "@/pages/LoyaltyPointsPage"; const BookingDetailPage = lazyNamed(() => import("@/pages/BookingDetailPage"), "BookingDetailPage");
import { HotelRafflesPage } from "@/pages/HotelRafflesPage"; 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() { function ProtectedLayout() {
const accessToken = useAuthStore((s) => s.accessToken); const accessToken = useAuthStore((s) => s.accessToken);
const bootstrapped = useAuthStore((s) => s.bootstrapped); const bootstrapped = useAuthStore((s) => s.bootstrapped);
if (!bootstrapped) { if (!bootstrapped) {
return ( return (
<div className="flex min-h-screen items-center justify-center text-muted-foreground"> <div className="flex min-h-screen items-center justify-center text-muted-foreground">
Loading… <Spinner />
</div> </div>
); );
} }
if (!accessToken) return <Navigate to="/login" replace />; if (!accessToken) return <Navigate to="/login" replace />;
return <AppLayout />; return <AppLayout />;
} }
export default function App() { export default function App() {
return ( return (
<Routes> <Suspense fallback={<div className="p-4">Loading...</div>}>
<Route path="/login" element={<LoginPage />} /> <Routes>
<Route element={<ProtectedLayout />}> <Route path="/login" element={<LoginPage />} />
<Route path="/" element={<Navigate to="/dashboard" replace />} />
<Route path="/dashboard" element={<DashboardPage />} /> <Route element={<ProtectedLayout />}>
<Route path="/reservations" element={<ReservationsPage />} /> <Route path="/" element={<Navigate to="/dashboard" replace />} />
<Route path="/bookings" element={<BookingsPage />} /> <Route path="/dashboard" element={<DashboardPage />} />
<Route path="/bookings/new" element={<NewBookingPage />} /> <Route path="/reservations" element={<ReservationsPage />} />
<Route path="/bookings/:id" element={<BookingDetailPage />} /> <Route path="/bookings" element={<BookingsPage />} />
<Route path="/calendar" element={<CalendarPage />} /> <Route path="/bookings/new" element={<NewBookingPage />} />
<Route path="/rooms" element={<RoomsPage />} /> <Route path="/bookings/:id" element={<BookingDetailPage />} />
<Route path="/guest-services" element={<GuestServicesPage />} /> <Route path="/calendar" element={<CalendarPage />} />
<Route path="/loyalty/points" element={<LoyaltyPointsPage />} /> <Route path="/rooms" element={<RoomsPage />} />
<Route path="/loyalty/raffles" element={<HotelRafflesPage />} /> <Route path="/guest-services" element={<GuestServicesPage />} />
<Route path="/customers" element={<CustomersPage />} /> <Route path="/loyalty/points" element={<LoyaltyPointsPage />} />
<Route path="/transactions" element={<TransactionsPage />} /> <Route path="/loyalty/raffles" element={<HotelRafflesPage />} />
<Route path="/payments" element={<PaymentsPage />} /> <Route path="/customers" element={<CustomersPage />} />
<Route path="/marketing/visits" element={<VisitsPage />} /> <Route path="/transactions" element={<TransactionsPage />} />
<Route path="/marketing/discount-codes" element={<DiscountCodesPage />} /> <Route path="/payments" element={<PaymentsPage />} />
<Route path="/marketing/referral-codes" element={<ReferralCodesPage />} /> <Route path="/marketing/visits" element={<VisitsPage />} />
<Route path="/settings/users" element={<ManageUsersPage />} /> <Route path="/marketing/discount-codes" element={<DiscountCodesPage />} />
<Route path="/settings" element={<SettingsPage />} /> <Route path="/marketing/referral-codes" element={<ReferralCodesPage />} />
</Route> <Route path="/settings/users" element={<ManageUsersPage />} />
<Route path="*" element={<Navigate to="/dashboard" replace />} /> <Route path="/settings" element={<SettingsPage />} />
</Routes> </Route>
<Route path="*" element={<Navigate to="/dashboard" replace />} />
</Routes>
</Suspense>
); );
} }

47
vite.config.ts
View File

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