add WebSocket support for real-time delivery updates with JWT authentication and automatic reconnection

frontend/src/stores/deliveryStore.ts

@@ -7,6 +7,7 @@ interface DeliveryState {
   // Data
   deliveries: Delivery[];
   deliveryCounts: Record<string, number>;
+  currentDate: string | null;
 
   // Loading states
   isLoading: boolean;
@@ -24,19 +25,26 @@ interface DeliveryState {
   getDeliveriesByDateRange: (startDate: string, endDate: string) => Delivery[];
   getDeliveryCountsByDate: () => Record<string, number>;
   clearError: () => void;
+
+  // WebSocket event handlers
+  handleWsDeliveryCreated: (delivery: Delivery) => void;
+  handleWsDeliveryUpdated: (delivery: Delivery) => void;
+  handleWsStatusChanged: (id: string, status: string) => void;
+  handleWsDeliveryDeleted: (id: string) => void;
 }
 
 export const useDeliveryStore = create<DeliveryState>()((set, get) => ({
   // Initial state
   deliveries: [],
   deliveryCounts: {},
+  currentDate: null,
   isLoading: false,
   isLoadingCounts: false,
   error: null,
 
   // Fetch deliveries for a specific date
   fetchDeliveriesByDate: async (date: string) => {
-    set({ isLoading: true, error: null });
+    set({ isLoading: true, error: null, currentDate: date });
     try {
       const deliveries = await deliveriesApi.getByDate(date);
       set({ deliveries, isLoading: false });
@@ -174,4 +182,42 @@ export const useDeliveryStore = create<DeliveryState>()((set, get) => ({
   },
 
   clearError: () => set({ error: null }),
+
+  // WebSocket event handlers (update local state without refetching)
+  handleWsDeliveryCreated: (delivery: Delivery) => {
+    const { currentDate, deliveries } = get();
+    if (currentDate && delivery.date === currentDate) {
+      if (!deliveries.some(d => d.id === delivery.id)) {
+        set({ deliveries: [...deliveries, delivery] });
+      }
+    }
+  },
+
+  handleWsDeliveryUpdated: (delivery: Delivery) => {
+    const { currentDate, deliveries } = get();
+    const exists = deliveries.some(d => d.id === delivery.id);
+    if (exists) {
+      if (delivery.date === currentDate) {
+        set({ deliveries: deliveries.map(d => d.id === delivery.id ? delivery : d) });
+      } else {
+        set({ deliveries: deliveries.filter(d => d.id !== delivery.id) });
+      }
+    } else if (currentDate && delivery.date === currentDate) {
+      set({ deliveries: [...deliveries, delivery] });
+    }
+  },
+
+  handleWsStatusChanged: (id: string, status: string) => {
+    set(state => ({
+      deliveries: state.deliveries.map(d =>
+        d.id === id ? { ...d, status: status as DeliveryStatus, updatedAt: Date.now() } : d
+      ),
+    }));
+  },
+
+  handleWsDeliveryDeleted: (id: string) => {
+    set(state => ({
+      deliveries: state.deliveries.filter(d => d.id !== id),
+    }));
+  },
 }));