switch frontend to real API instead of mocks

frontend/src/pages/DeliveryListPage.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { ArrowLeft, Filter } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { ArrowLeft, Filter, Loader2, AlertCircle } from 'lucide-react';
 import { useDeliveryStore } from '../stores/deliveryStore';
 import { DeliveryList as DeliveryListComponent } from '../components/delivery/DeliveryList';
 import { DeliveryForm } from '../components/delivery/DeliveryForm';
@@ -15,16 +15,26 @@ interface DeliveryListPageProps {
 
 export const DeliveryListPage = ({ selectedDate, onBack }: DeliveryListPageProps) => {
   const deliveries = useDeliveryStore(state => state.deliveries);
+  const isLoading = useDeliveryStore(state => state.isLoading);
+  const error = useDeliveryStore(state => state.error);
+  const fetchDeliveriesByDate = useDeliveryStore(state => state.fetchDeliveriesByDate);
   const toggleStatus = useDeliveryStore(state => state.toggleStatus);
   const deleteDelivery = useDeliveryStore(state => state.deleteDelivery);
   const updateDelivery = useDeliveryStore(state => state.updateDelivery);
   const addDelivery = useDeliveryStore(state => state.addDelivery);
+  const clearError = useDeliveryStore(state => state.clearError);
+
+  // Fetch deliveries when date changes
+  useEffect(() => {
+    fetchDeliveriesByDate(selectedDate);
+  }, [selectedDate, fetchDeliveriesByDate]);
 
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [editingDelivery, setEditingDelivery] = useState<Delivery | null>(null);
   const [pickupFilter, setPickupFilter] = useState<PickupLocation | 'all'>('all');
 
-  const dayDeliveries = deliveries.filter(d => d.date === selectedDate);
+  // Use all deliveries from store (already filtered by API)
+  const dayDeliveries = deliveries;
   const filteredDeliveries = pickupFilter === 'all' 
     ? dayDeliveries 
     : dayDeliveries.filter(d => d.pickupLocation === pickupFilter);
@@ -37,8 +47,11 @@ export const DeliveryListPage = ({ selectedDate, onBack }: DeliveryListPageProps
     { value: 'galaktika', label: pickupLocationLabels.galaktika },
   ];
 
-  const handleStatusChange = (id: string) => {
-    toggleStatus(id);
+  const handleStatusChange = async (id: string) => {
+    const delivery = deliveries.find(d => d.id === id);
+    if (delivery) {
+      await toggleStatus(id, delivery.status);
+    }
   };
 
   const handleEdit = (delivery: Delivery) => {
@@ -46,19 +59,27 @@ export const DeliveryListPage = ({ selectedDate, onBack }: DeliveryListPageProps
     setIsFormOpen(true);
   };
 
-  const handleDelete = (id: string) => {
+  const handleDelete = async (id: string) => {
     if (confirm('Удалить эту доставку?')) {
-      deleteDelivery(id);
+      try {
+        await deleteDelivery(id);
+      } catch {
+        // Error is handled by store
+      }
     }
   };
 
-  const handleSubmit = (data: Omit<Delivery, 'id' | 'createdAt' | 'updatedAt'>) => {
-    if (editingDelivery) {
-      updateDelivery(editingDelivery.id, data);
-    } else {
-      addDelivery(data);
+  const handleSubmit = async (data: Omit<Delivery, 'id' | 'createdAt' | 'updatedAt'>) => {
+    try {
+      if (editingDelivery) {
+        await updateDelivery(editingDelivery.id, data);
+      } else {
+        await addDelivery(data);
+      }
+      setEditingDelivery(null);
+    } catch {
+      // Error is handled by store
     }
-    setEditingDelivery(null);
   };
 
   const handleAdd = () => {
@@ -94,14 +115,30 @@ export const DeliveryListPage = ({ selectedDate, onBack }: DeliveryListPageProps
         </div>
       </div>
 
-      <DeliveryListComponent
-        deliveries={filteredDeliveries}
-        onStatusChange={handleStatusChange}
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-        onAdd={handleAdd}
-        date={selectedDate}
-      />
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-8 h-8 animate-spin text-[#1B263B]" />
+        </div>
+      ) : error ? (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center gap-3">
+          <AlertCircle className="w-5 h-5 text-red-500" />
+          <div className="flex-1">
+            <p className="text-red-700">{error}</p>
+          </div>
+          <Button variant="ghost" size="sm" onClick={() => { clearError(); fetchDeliveriesByDate(selectedDate); }}>
+            Повторить
+          </Button>
+        </div>
+      ) : (
+        <DeliveryListComponent
+          deliveries={filteredDeliveries}
+          onStatusChange={handleStatusChange}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+          onAdd={handleAdd}
+          date={selectedDate}
+        />
+      )}
 
       <DeliveryForm
         isOpen={isFormOpen}