229 lines
12 KiB
TypeScript
229 lines
12 KiB
TypeScript
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
|
import { QueryClientProvider } from '@tanstack/react-query';
|
|
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
|
import { Suspense, lazy } from 'react';
|
|
import { AuthProvider } from './contexts/AuthContext';
|
|
import { ThemeProvider } from './contexts/ThemeContext';
|
|
import { ToastProvider } from './contexts/ToastContext';
|
|
import { ErrorBoundary } from './components/common/ErrorBoundary';
|
|
import { LoadingSpinner } from './components/ui/LoadingSpinner';
|
|
import { queryClient } from './lib/queryClient';
|
|
import { useAuth } from './contexts/AuthContext';
|
|
import { Layout } from './components/layout/Layout';
|
|
|
|
// Lazy load pages for better code splitting
|
|
const Login = lazy(() => import('./pages/Login').then(module => ({ default: module.Login })));
|
|
const Dashboard = lazy(() => import('./pages/Dashboard').then(module => ({ default: module.Dashboard })));
|
|
const Users = lazy(() => import('./pages/Users').then(module => ({ default: module.Users })));
|
|
const Reports = lazy(() => import('./pages/Reports').then(module => ({ default: module.Reports })));
|
|
const Notifications = lazy(() => import('./pages/Notifications').then(module => ({ default: module.Notifications })));
|
|
|
|
// Lazy load admin pages for better code splitting
|
|
// Roles Pages
|
|
const RolesListPage = lazy(() => import('./pages/roles/roles-list/RolesListPage'));
|
|
const RoleFormPage = lazy(() => import('./pages/roles/role-form/RoleFormPage'));
|
|
const RoleDetailPage = lazy(() => import('./pages/roles/role-detail/RoleDetailPage'));
|
|
const RolePermissionsPage = lazy(() => import('./pages/roles/role-permissions/RolePermissionsPage'));
|
|
|
|
// Admin Users Pages
|
|
const AdminUsersListPage = lazy(() => import('./pages/admin-users/admin-users-list/AdminUsersListPage'));
|
|
const AdminUserFormPage = lazy(() => import('./pages/admin-users/admin-user-form/AdminUserFormPage'));
|
|
const AdminUserDetailPage = lazy(() => import('./pages/admin-users/admin-user-detail/AdminUserDetailPage'));
|
|
|
|
// Permissions Pages
|
|
const PermissionsListPage = lazy(() => import('./pages/permissions/permissions-list/PermissionsListPage'));
|
|
const PermissionFormPage = lazy(() => import('./pages/permissions/permission-form/PermissionFormPage'));
|
|
|
|
// Product Options Pages
|
|
const ProductOptionsListPage = lazy(() => import('./pages/product-options/product-options-list/ProductOptionsListPage'));
|
|
const ProductOptionFormPage = lazy(() => import('./pages/product-options/product-option-form/ProductOptionFormPage'));
|
|
|
|
// Categories Pages
|
|
const CategoriesListPage = lazy(() => import('./pages/categories/categories-list/CategoriesListPage'));
|
|
const CategoryFormPage = lazy(() => import('./pages/categories/category-form/CategoryFormPage'));
|
|
|
|
// Discount Codes Pages
|
|
const DiscountCodesListPage = lazy(() => import('./pages/discount-codes/discount-codes-list/DiscountCodesListPage'));
|
|
const DiscountCodeFormPage = lazy(() => import('./pages/discount-codes/discount-code-form/DiscountCodeFormPage'));
|
|
|
|
// Orders Pages
|
|
const OrdersListPage = lazy(() => import('./pages/orders/orders-list/OrdersListPage'));
|
|
const OrderDetailPage = lazy(() => import('./pages/orders/order-detail/OrderDetailPage'));
|
|
|
|
// Users Admin Pages
|
|
const UsersAdminListPage = lazy(() => import('./pages/users-admin/users-admin-list/UsersAdminListPage'));
|
|
const UserAdminDetailPage = lazy(() => import('./pages/users-admin/user-admin-detail/UserAdminDetailPage'));
|
|
const UserAdminFormPage = lazy(() => import('./pages/users-admin/user-admin-form/UserAdminFormPage'));
|
|
|
|
// Products Pages
|
|
const ProductsListPage = lazy(() => import('./pages/products/products-list/ProductsListPage'));
|
|
const ProductFormPage = lazy(() => import('./pages/products/product-form/ProductFormPage'));
|
|
const ProductDetailPage = lazy(() => import('./pages/products/product-detail/ProductDetailPage'));
|
|
|
|
// Landing Hero Page
|
|
const HeroSliderPage = lazy(() => import('./pages/landing-hero/HeroSliderPage'));
|
|
|
|
// Shipping Methods Pages
|
|
const ShippingMethodsListPage = lazy(() => import('./pages/shipping-methods/shipping-methods-list/ShippingMethodsListPage'));
|
|
const ShippingMethodFormPage = lazy(() => import('./pages/shipping-methods/shipping-method-form/ShippingMethodFormPage'));
|
|
const TicketsListPage = lazy(() => import('./pages/tickets/tickets-list/TicketsListPage'));
|
|
const TicketDetailPage = lazy(() => import('./pages/tickets/ticket-detail/TicketDetailPage'));
|
|
const TicketConfigPage = lazy(() => import('./pages/tickets/ticket-config/TicketConfigPage'));
|
|
|
|
// Payment IPG Page
|
|
const IPGListPage = lazy(() => import('./pages/payment-ipg/ipg-list/IPGListPage'));
|
|
|
|
// Payment Card Page
|
|
const CardFormPage = lazy(() => import('./pages/payment-card/card-form/CardFormPage'));
|
|
|
|
// Wallet Page
|
|
const WalletListPage = lazy(() => import('./pages/wallet/wallet-list/WalletListPage'));
|
|
|
|
// Reports Pages
|
|
const DiscountUsageReportPage = lazy(() => import('./pages/reports/discount-statistics/discount-usage-report/DiscountUsageReportPage'));
|
|
const CustomerDiscountUsagePage = lazy(() => import('./pages/reports/discount-statistics/customer-discount-usage/CustomerDiscountUsagePage'));
|
|
const PaymentMethodsReportPage = lazy(() => import('./pages/reports/payment-statistics/payment-methods-report/PaymentMethodsReportPage'));
|
|
const ShipmentsByMethodReportPage = lazy(() => import('./pages/reports/shipment-statistics/shipments-by-method-report/ShipmentsByMethodReportPage'));
|
|
|
|
// Product Comments Page
|
|
const ProductCommentsListPage = lazy(() => import('./pages/products/comments/comments-list/ProductCommentsListPage'));
|
|
|
|
const ProtectedRoute = ({ children }: { children: any }) => {
|
|
const { user, isLoading } = useAuth();
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<Layout>
|
|
<div className="flex items-center justify-center py-12">
|
|
<LoadingSpinner />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
return user ? children : <Navigate to="/login" replace />;
|
|
};
|
|
|
|
const AppRoutes = () => {
|
|
return (
|
|
<Routes>
|
|
<Route path="/login" element={<Login />} />
|
|
<Route path="/" element={
|
|
<ProtectedRoute>
|
|
<Layout />
|
|
</ProtectedRoute>
|
|
}>
|
|
<Route index element={<Dashboard />} />
|
|
<Route path="users" element={<Users />} />
|
|
<Route path="products" element={<ProductsListPage />} />
|
|
<Route path="reports" element={<Reports />} />
|
|
<Route path="notifications" element={<Notifications />} />
|
|
|
|
{/* Roles Routes */}
|
|
<Route path="roles" element={<RolesListPage />} />
|
|
<Route path="roles/create" element={<RoleFormPage />} />
|
|
<Route path="roles/:id" element={<RoleDetailPage />} />
|
|
<Route path="roles/:id/edit" element={<RoleFormPage />} />
|
|
<Route path="roles/:id/permissions" element={<RolePermissionsPage />} />
|
|
|
|
{/* Admin Users Routes */}
|
|
<Route path="admin-users" element={<AdminUsersListPage />} />
|
|
<Route path="admin-users/create" element={<AdminUserFormPage />} />
|
|
<Route path="admin-users/:id" element={<AdminUserDetailPage />} />
|
|
<Route path="admin-users/:id/edit" element={<AdminUserFormPage />} />
|
|
|
|
{/* Permissions Routes */}
|
|
<Route path="permissions" element={<PermissionsListPage />} />
|
|
<Route path="permissions/create" element={<PermissionFormPage />} />
|
|
<Route path="permissions/:id/edit" element={<PermissionFormPage />} />
|
|
|
|
{/* Product Options Routes */}
|
|
<Route path="product-options" element={<ProductOptionsListPage />} />
|
|
<Route path="product-options/create" element={<ProductOptionFormPage />} />
|
|
<Route path="product-options/:id/edit" element={<ProductOptionFormPage />} />
|
|
|
|
{/* Categories Routes */}
|
|
<Route path="categories" element={<CategoriesListPage />} />
|
|
<Route path="categories/create" element={<CategoryFormPage />} />
|
|
<Route path="categories/:id/edit" element={<CategoryFormPage />} />
|
|
|
|
{/* Discount Codes Routes */}
|
|
<Route path="discount-codes" element={<DiscountCodesListPage />} />
|
|
<Route path="discount-codes/create" element={<DiscountCodeFormPage />} />
|
|
<Route path="discount-codes/:id/edit" element={<DiscountCodeFormPage />} />
|
|
|
|
{/* Orders Routes */}
|
|
<Route path="orders" element={<OrdersListPage />} />
|
|
<Route path="orders/:id" element={<OrderDetailPage />} />
|
|
|
|
{/* Users Admin Routes */}
|
|
<Route path="users-admin" element={<UsersAdminListPage />} />
|
|
<Route path="users-admin/create" element={<UserAdminFormPage />} />
|
|
<Route path="users-admin/:id" element={<UserAdminDetailPage />} />
|
|
<Route path="users-admin/:id/edit" element={<UserAdminFormPage />} />
|
|
|
|
{/* Landing Hero Route */}
|
|
<Route path="landing-hero" element={<HeroSliderPage />} />
|
|
|
|
{/* Shipping Methods Routes */}
|
|
<Route path="shipping-methods" element={<ShippingMethodsListPage />} />
|
|
<Route path="shipping-methods/create" element={<ShippingMethodFormPage />} />
|
|
<Route path="shipping-methods/:id/edit" element={<ShippingMethodFormPage />} />
|
|
|
|
<Route path="tickets" element={<TicketsListPage />} />
|
|
<Route path="tickets/config" element={<TicketConfigPage />} />
|
|
<Route path="tickets/:id" element={<TicketDetailPage />} />
|
|
|
|
{/* Products Routes */}
|
|
<Route path="products/create" element={<ProductFormPage />} />
|
|
<Route path="products/:id" element={<ProductDetailPage />} />
|
|
<Route path="products/:id/edit" element={<ProductFormPage />} />
|
|
<Route path="products/comments" element={<ProductCommentsListPage />} />
|
|
|
|
{/* Payment IPG Route */}
|
|
<Route path="payment-ipg" element={<IPGListPage />} />
|
|
|
|
{/* Payment Card Route */}
|
|
<Route path="payment-card" element={<CardFormPage />} />
|
|
|
|
{/* Wallet Route */}
|
|
<Route path="wallet" element={<WalletListPage />} />
|
|
|
|
{/* Reports Routes */}
|
|
<Route path="reports/discount-usage" element={<DiscountUsageReportPage />} />
|
|
<Route path="reports/customer-discount-usage" element={<CustomerDiscountUsagePage />} />
|
|
<Route path="reports/payment-methods" element={<PaymentMethodsReportPage />} />
|
|
<Route path="reports/shipments-by-method" element={<ShipmentsByMethodReportPage />} />
|
|
</Route>
|
|
</Routes>
|
|
);
|
|
};
|
|
|
|
const App = () => {
|
|
return (
|
|
<ErrorBoundary>
|
|
<QueryClientProvider client={queryClient}>
|
|
<ThemeProvider>
|
|
<ToastProvider>
|
|
<AuthProvider>
|
|
<Router>
|
|
<Suspense fallback={
|
|
<Layout>
|
|
<div className="flex items-center justify-center py-12">
|
|
<LoadingSpinner />
|
|
</div>
|
|
</Layout>
|
|
}>
|
|
<AppRoutes />
|
|
</Suspense>
|
|
</Router>
|
|
</AuthProvider>
|
|
</ToastProvider>
|
|
</ThemeProvider>
|
|
<ReactQueryDevtools initialIsOpen={false} />
|
|
</QueryClientProvider>
|
|
</ErrorBoundary>
|
|
);
|
|
};
|
|
|
|
export default App;
|