Site resource conservation added, for faster loading time. Only for Admin Frontend

This commit is contained in:
Sidharth Prabhu
2026-08-04 13:54:34 +05:30
parent 1a000a3be2
commit 6750c5456f
36 changed files with 352 additions and 306 deletions

View File

@@ -1,110 +1,121 @@
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import { CartProvider } from './contexts/CartContext';
import { AuthProvider } from './contexts/AuthContext';
import { FoodProvider } from './contexts/FoodContext';
import { ThemeProvider } from './contexts/ThemeContext';
import ProtectedRoute from './components/ProtectedRoute';
import HomeScreen from './pages/HomeScreen';
import CategoryScreen from './pages/CategoryScreen';
import ItemDetailScreen from './pages/ItemDetailScreen';
import CartScreen from './pages/CartScreen';
import CheckoutScreen from './pages/CheckoutScreen';
import SuccessScreen from './pages/SuccessScreen';
import MyOrdersScreen from './pages/MyOrdersScreen';
import LoginScreen from './pages/LoginScreen';
import ProfileScreen from './pages/ProfileScreen';
import ChangePinScreen from './pages/ChangePinScreen';
import StallDetailScreen from './pages/StallDetailScreen';
import WalletScreen from './pages/WalletScreen';
import TopUpScreen from './pages/TopUpScreen';
import PreferencesScreen from './pages/PreferencesScreen';
import NotFoundScreen from './pages/NotFoundScreen';
import StockAlert from './components/StockAlert';
import './App.css';
// Lazy load screens
const HomeScreen = lazy(() => import('./pages/HomeScreen'));
const CategoryScreen = lazy(() => import('./pages/CategoryScreen'));
const ItemDetailScreen = lazy(() => import('./pages/ItemDetailScreen'));
const CartScreen = lazy(() => import('./pages/CartScreen'));
const CheckoutScreen = lazy(() => import('./pages/CheckoutScreen'));
const SuccessScreen = lazy(() => import('./pages/SuccessScreen'));
const MyOrdersScreen = lazy(() => import('./pages/MyOrdersScreen'));
const LoginScreen = lazy(() => import('./pages/LoginScreen'));
const ProfileScreen = lazy(() => import('./pages/ProfileScreen'));
const ChangePinScreen = lazy(() => import('./pages/ChangePinScreen'));
const StallDetailScreen = lazy(() => import('./pages/StallDetailScreen'));
const WalletScreen = lazy(() => import('./pages/WalletScreen'));
const TopUpScreen = lazy(() => import('./pages/TopUpScreen'));
const PreferencesScreen = lazy(() => import('./pages/PreferencesScreen'));
const NotFoundScreen = lazy(() => import('./pages/NotFoundScreen'));
const LoadingFallback = () => (
<div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
<div className="loading-spinner">Loading...</div>
</div>
);
function App() {
return (
<ThemeProvider>
<AuthProvider>
<FoodProvider>
<CartProvider>
<StockAlert />
<Router>
<Routes>
<Route path="/login" element={<LoginScreen />} />
<Route path="/" element={
<ProtectedRoute>
<HomeScreen />
</ProtectedRoute>
} />
<Route path="/orders" element={
<ProtectedRoute>
<MyOrdersScreen />
</ProtectedRoute>
} />
<Route path="/category/:categoryId" element={
<ProtectedRoute>
<CategoryScreen />
</ProtectedRoute>
} />
<Route path="/item/:itemId" element={
<ProtectedRoute>
<ItemDetailScreen />
</ProtectedRoute>
} />
<Route path="/stall/:id" element={
<ProtectedRoute>
<StallDetailScreen />
</ProtectedRoute>
} />
<Route path="/cart" element={
<ProtectedRoute>
<CartScreen />
</ProtectedRoute>
} />
<Route path="/checkout" element={
<ProtectedRoute>
<CheckoutScreen />
</ProtectedRoute>
} />
<Route path="/success" element={
<ProtectedRoute>
<SuccessScreen />
</ProtectedRoute>
} />
<Route path="/profile" element={
<ProtectedRoute>
<ProfileScreen />
</ProtectedRoute>
} />
<Route path="/change-pin" element={
<ProtectedRoute>
<ChangePinScreen />
</ProtectedRoute>
} />
<Route path="/wallet" element={
<ProtectedRoute>
<WalletScreen />
</ProtectedRoute>
} />
<Route path="/topup" element={
<ProtectedRoute>
<TopUpScreen />
</ProtectedRoute>
} />
<Route path="/preferences" element={
<ProtectedRoute>
<PreferencesScreen />
</ProtectedRoute>
} />
<Route path="*" element={<NotFoundScreen />} />
</Routes>
</Router>
</CartProvider>
</FoodProvider>
</AuthProvider>
<StockAlert />
<Router>
<Suspense fallback={<LoadingFallback />}>
<Routes>
<Route path="/login" element={<LoginScreen />} />
<Route path="/" element={
<ProtectedRoute>
<HomeScreen />
</ProtectedRoute>
} />
<Route path="/orders" element={
<ProtectedRoute>
<MyOrdersScreen />
</ProtectedRoute>
} />
<Route path="/category/:categoryId" element={
<ProtectedRoute>
<CategoryScreen />
</ProtectedRoute>
} />
<Route path="/item/:itemId" element={
<ProtectedRoute>
<ItemDetailScreen />
</ProtectedRoute>
} />
<Route path="/stall/:id" element={
<ProtectedRoute>
<StallDetailScreen />
</ProtectedRoute>
} />
<Route path="/cart" element={
<ProtectedRoute>
<CartScreen />
</ProtectedRoute>
} />
<Route path="/checkout" element={
<ProtectedRoute>
<CheckoutScreen />
</ProtectedRoute>
} />
<Route path="/success" element={
<ProtectedRoute>
<SuccessScreen />
</ProtectedRoute>
} />
<Route path="/profile" element={
<ProtectedRoute>
<ProfileScreen />
</ProtectedRoute>
} />
<Route path="/change-pin" element={
<ProtectedRoute>
<ChangePinScreen />
</ProtectedRoute>
} />
<Route path="/wallet" element={
<ProtectedRoute>
<WalletScreen />
</ProtectedRoute>
} />
<Route path="/topup" element={
<ProtectedRoute>
<TopUpScreen />
</ProtectedRoute>
} />
<Route path="/preferences" element={
<ProtectedRoute>
<PreferencesScreen />
</ProtectedRoute>
} />
<Route path="*" element={<NotFoundScreen />} />
</Routes>
</Suspense>
</Router>
</CartProvider>
</FoodProvider>
</AuthProvider>
</ThemeProvider>
);
}

View File

@@ -8,7 +8,7 @@ import {
PlusCircle,
CreditCard
} from 'lucide-react';
import tokenImage from '../assets/display_ritz.png';
import tokenImage from '../assets/display_ritz.webp';
import { motion, AnimatePresence } from 'framer-motion';
import Header from '../components/Header';
import StockConflictModal from '../components/StockConflictModal';

View File

@@ -9,7 +9,7 @@ import FeedbackModal from '../components/FeedbackModal';
import { useFood } from '../contexts/FoodContext';
import { useAuth } from '../contexts/AuthContext';
import { motion, AnimatePresence } from 'framer-motion';
import walletIcon from '../assets/front.png';
import walletIcon from '../assets/front.webp';
import './HomeScreen.css';
const HomeScreen: React.FC = () => {