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

frontend/src/App.tsx

@@ -1,101 +1,111 @@
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
 import Layout from './components/Layout.tsx';
-import Dashboard from './pages/Dashboard.tsx';
-import BaseMenu from './pages/BaseMenu.tsx';
-import Products from './pages/Products.tsx';
-import Orders from './pages/Orders.tsx';
-import ArchivedOrders from './pages/ArchivedOrders.tsx';
-import Customers from './pages/Customers.tsx';
-import Login from './pages/Login.tsx';
-import Managers from './pages/Managers.tsx';
-import Stalls from './pages/Stalls.tsx';
-import Staff from './pages/Staff.tsx';
-import Terminals from './pages/Terminals.tsx';
-import Vendors from './pages/Vendors.tsx';
-import Purchases from './pages/Purchases.tsx';
-import VendorDashboard from './pages/VendorDashboard.tsx';
-import PurchaseAnalytics from './pages/PurchaseAnalytics.tsx';
-import Bills from './pages/Bills.tsx';
-import PurchaseSummary from './pages/PurchaseSummary.tsx';
-import IntentDashboard from './pages/IntentDashboard.tsx';
-import IntentList from './pages/IntentList.tsx';
-import NewArrivals from './pages/NewArrivals.tsx';
-import Reports from './pages/Reports.tsx';
-import Feedback from './pages/Feedback.tsx';
-import Ritz from './pages/Ritz.tsx';
-import RitzCirculation from './pages/RitzCirculation.tsx';
-import ManageWallets from './pages/ManageWallets.tsx';
-import ManageCoupons from './pages/ManageCoupons.tsx';
-import Settings from './pages/Settings.tsx';
-import NotFound from './pages/NotFound.tsx';
 
+// Lazy load pages to decrease initial bundle size
+const Dashboard = lazy(() => import('./pages/Dashboard.tsx'));
+const BaseMenu = lazy(() => import('./pages/BaseMenu.tsx'));
+const Products = lazy(() => import('./pages/Products.tsx'));
+const Orders = lazy(() => import('./pages/Orders.tsx'));
+const ArchivedOrders = lazy(() => import('./pages/ArchivedOrders.tsx'));
+const Customers = lazy(() => import('./pages/Customers.tsx'));
+const Login = lazy(() => import('./pages/Login.tsx'));
+const Managers = lazy(() => import('./pages/Managers.tsx'));
+const Stalls = lazy(() => import('./pages/Stalls.tsx'));
+const Staff = lazy(() => import('./pages/Staff.tsx'));
+const Terminals = lazy(() => import('./pages/Terminals.tsx'));
+const Vendors = lazy(() => import('./pages/Vendors.tsx'));
+const Purchases = lazy(() => import('./pages/Purchases.tsx'));
+const VendorDashboard = lazy(() => import('./pages/VendorDashboard.tsx'));
+const PurchaseAnalytics = lazy(() => import('./pages/PurchaseAnalytics.tsx'));
+const Bills = lazy(() => import('./pages/Bills.tsx'));
+const PurchaseSummary = lazy(() => import('./pages/PurchaseSummary.tsx'));
+const IntentDashboard = lazy(() => import('./pages/IntentDashboard.tsx'));
+const IntentList = lazy(() => import('./pages/IntentList.tsx'));
+const NewArrivals = lazy(() => import('./pages/NewArrivals.tsx'));
+const Reports = lazy(() => import('./pages/Reports.tsx'));
+const Feedback = lazy(() => import('./pages/Feedback.tsx'));
+const Ritz = lazy(() => import('./pages/Ritz.tsx'));
+const RitzCirculation = lazy(() => import('./pages/RitzCirculation.tsx'));
+const ManageWallets = lazy(() => import('./pages/ManageWallets.tsx'));
+const ManageCoupons = lazy(() => import('./pages/ManageCoupons.tsx'));
+const Settings = lazy(() => import('./pages/Settings.tsx'));
+const NotFound = lazy(() => import('./pages/NotFound.tsx'));
 
 const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
   const isLoggedIn = sessionStorage.getItem('isLoggedIn') === 'true';
   return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
 };
 
+const LoadingFallback = () => (
+  <div className="min-h-screen flex items-center justify-center bg-slate-50/50">
+    <div className="text-primary font-black uppercase tracking-widest text-sm animate-pulse">
+      Loading...
+    </div>
+  </div>
+);
+
 function App() {
   return (
     <Router>
-      <Routes>
-        <Route path="/login" element={<Login />} />
-        <Route path="/" element={
-          <ProtectedRoute>
-            <Layout />
-          </ProtectedRoute>
-        }>
-          <Route index element={<Navigate to="/dashboard" replace />} />
-          <Route path="dashboard" element={<Dashboard />} />
-          
-          {/* Sale */}
-          <Route path="sale/orders" element={<Orders />} />
-          <Route path="sale/archived-bills" element={<ArchivedOrders />} />
-          
-          {/* Customers */}
-          <Route path="customers/orders" element={<Customers />} />
-          
-          {/* Purchases */}
-          <Route path="purchases/dashboard" element={<VendorDashboard />} />
-          <Route path="purchases/orders" element={<Purchases />} />
-          <Route path="purchases/summary" element={<PurchaseSummary />} />
-          <Route path="purchases/bills" element={<Bills />} />
-          <Route path="purchases/vendor" element={<Vendors />} />
-          <Route path="purchases/analytics" element={<PurchaseAnalytics />} />
-          
-          {/* Intent */}
-          <Route path="purchases/intent/orders-dashboard" element={<IntentDashboard title="ORDER DASHBOARD" />} />
-          <Route path="purchases/intent/receives-dashboard" element={<IntentDashboard title="RECEIVABLE DASHBOARD" />} />
-          <Route path="purchases/intent/orders" element={<IntentList title="ORDERS" />} />
-          <Route path="purchases/intent/receives" element={<IntentList title="RECEIVES" />} />
+      <Suspense fallback={<LoadingFallback />}>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route path="/" element={
+            <ProtectedRoute>
+              <Layout />
+            </ProtectedRoute>
+          }>
+            <Route index element={<Navigate to="/dashboard" replace />} />
+            <Route path="dashboard" element={<Dashboard />} />
+            
+            {/* Sale */}
+            <Route path="sale/orders" element={<Orders />} />
+            <Route path="sale/archived-bills" element={<ArchivedOrders />} />
+            
+            {/* Customers */}
+            <Route path="customers/orders" element={<Customers />} />
+            
+            {/* Purchases */}
+            <Route path="purchases/dashboard" element={<VendorDashboard />} />
+            <Route path="purchases/orders" element={<Purchases />} />
+            <Route path="purchases/summary" element={<PurchaseSummary />} />
+            <Route path="purchases/bills" element={<Bills />} />
+            <Route path="purchases/vendor" element={<Vendors />} />
+            <Route path="purchases/analytics" element={<PurchaseAnalytics />} />
+            
+            {/* Intent */}
+            <Route path="purchases/intent/orders-dashboard" element={<IntentDashboard title="ORDER DASHBOARD" />} />
+            <Route path="purchases/intent/receives-dashboard" element={<IntentDashboard title="RECEIVABLE DASHBOARD" />} />
+            <Route path="purchases/intent/orders" element={<IntentList title="ORDERS" />} />
+            <Route path="purchases/intent/receives" element={<IntentList title="RECEIVES" />} />
 
-          
-          {/* Inventory */}
-          <Route path="inventory/new-arrivals" element={<NewArrivals />} />
-          <Route path="inventory/base" element={<BaseMenu />} />
-          <Route path="inventory/products" element={<Products />} />
-          <Route path="inventory/online" element={<Navigate to="/inventory/products" replace />} />
-          
-          {/* Others */}
-          <Route path="reports" element={<Reports />} />
-          <Route path="feedback" element={<Feedback />} />
-          <Route path="ritz/overview" element={<Ritz />} />
-          <Route path="ritz/circulation" element={<RitzCirculation />} />
-          <Route path="ritz/wallets" element={<ManageWallets />} />
-          <Route path="ritz/coupons" element={<ManageCoupons />} />
+            {/* Inventory */}
+            <Route path="inventory/new-arrivals" element={<NewArrivals />} />
+            <Route path="inventory/base" element={<BaseMenu />} />
+            <Route path="inventory/products" element={<Products />} />
+            <Route path="inventory/online" element={<Navigate to="/inventory/products" replace />} />
+            
+            {/* Others */}
+            <Route path="reports" element={<Reports />} />
+            <Route path="feedback" element={<Feedback />} />
+            <Route path="ritz/overview" element={<Ritz />} />
+            <Route path="ritz/circulation" element={<RitzCirculation />} />
+            <Route path="ritz/wallets" element={<ManageWallets />} />
+            <Route path="ritz/coupons" element={<ManageCoupons />} />
 
-          
-          {/* Stores */}
-          <Route path="stores/terminals" element={<Terminals />} />
-          <Route path="stores/managers" element={<Managers />} />
-          <Route path="stores/staffs" element={<Staff />} />
-          <Route path="stores/stalls" element={<Stalls />} />
+            {/* Stores */}
+            <Route path="stores/terminals" element={<Terminals />} />
+            <Route path="stores/managers" element={<Managers />} />
+            <Route path="stores/staffs" element={<Staff />} />
+            <Route path="stores/stalls" element={<Stalls />} />
 
-          {/* Settings */}
-          <Route path="settings" element={<Settings />} />
-        </Route>
-        <Route path="*" element={<NotFound />} />
-      </Routes>
+            {/* Settings */}
+            <Route path="settings" element={<Settings />} />
+          </Route>
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </Suspense>
     </Router>
   );
 }

frontend/src/components/Sidebar.tsx

@@ -19,7 +19,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import collegeLogo from '../assets/college-logo.png';
-import colorVector from '../assets/color-vector.png';
+import colorVector from '../assets/color-vector.webp';
 
 function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));

frontend/src/pages/Ritz.tsx

@@ -1,4 +1,4 @@
-import { apiFetch } from '../api';
+import { apiFetch } from '../api';
 import React, { useState, useEffect } from 'react';
 import { 
   Building2, 
@@ -14,7 +14,7 @@ import {
   Fingerprint
 } from 'lucide-react';
 import { motion } from 'framer-motion';
-import colorVector from '../assets/color-vector.png';
+import colorVector from '../assets/color-vector.webp';
 
 interface TokenTransaction {
   id: number;

frontend/src/pages/RitzCirculation.tsx

@@ -1,4 +1,4 @@
-import { apiFetch } from '../api';
+import { apiFetch } from '../api';
 import React, { useState, useEffect } from 'react';
 import { 
   CircleDollarSign, 
@@ -15,7 +15,7 @@ import {
   ChevronRight
 } from 'lucide-react';
 import { motion } from 'framer-motion';
-import colorVector from '../assets/color-vector.png';
+import colorVector from '../assets/color-vector.webp';
 
 interface TokenUnit {
   id: number;