frontend refactor

frontend/src/App.tsx

@@ -1,10 +1,20 @@
-import { useState, useEffect } from 'react';
-import { Truck } from 'lucide-react';
-import { Dashboard } from './pages/Dashboard';
-import { DeliveryListPage } from './pages/DeliveryListPage';
+import { useState, useEffect, lazy, Suspense } from 'react';
+import { Truck, Loader2 } from 'lucide-react';
 import { DeliveryForm } from './components/delivery/DeliveryForm';
+import { ToastContainer } from './components/ui/Toast';
 import { useDeliveryStore } from './stores/deliveryStore';
 
+// Lazy load pages for code splitting
+const Dashboard = lazy(() => import('./pages/Dashboard'));
+const DeliveryListPage = lazy(() => import('./pages/DeliveryListPage'));
+
+// Fallback loading component
+const PageLoader = () => (
+  <div className="flex items-center justify-center py-20">
+    <Loader2 className="w-8 h-8 animate-spin text-[#1B263B]" />
+  </div>
+);
+
 function App() {
   const [view, setView] = useState<'dashboard' | 'delivery-list'>('dashboard');
   const [selectedDate, setSelectedDate] = useState<string>('');
@@ -76,17 +86,19 @@ function App() {
       </header>
 
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        {view === 'dashboard' ? (
-          <Dashboard 
-            onDateSelect={handleDateSelect}
-            onAddDelivery={handleAddDelivery}
-          />
-        ) : (
-          <DeliveryListPage 
-            selectedDate={selectedDate}
-            onBack={handleBackToDashboard}
-          />
-        )}
+        <Suspense fallback={<PageLoader />}>
+          {view === 'dashboard' ? (
+            <Dashboard
+              onDateSelect={handleDateSelect}
+              onAddDelivery={handleAddDelivery}
+            />
+          ) : (
+            <DeliveryListPage
+              selectedDate={selectedDate}
+              onBack={handleBackToDashboard}
+            />
+          )}
+        </Suspense>
       </main>
 
       <DeliveryForm
@@ -96,6 +108,8 @@ function App() {
         defaultDate={formDate}
         isSubmitting={isSubmitting}
       />
+
+      <ToastContainer />
     </div>
   );
 }