Quickstart

type OrderStatus =
  | "RECEIVED"    // New orders from customers
  | "CONFIRMED"   // Orders confirmed by kitchen
  | "PREPARING"   // Orders being prepared
  | "READY"       // Orders ready for pickup
  | "PICKED_UP"   // Orders picked up by courier
  | "DELIVERED"   // Orders delivered to customer
  | "CANCELLED";  // Cancelled orders

// Example: The Kanban component from components/Kanban/Kanban.tsx:29
import { useOrders } from "@/contexts/Orders.context";

export default function Kanban() {
  const { ordersByStatus, updateOrderStatus } = useOrders();
  
  // Orders are automatically organized by status
  // and updates are synced in real-time via WebSocket
}

// Example: Orders context from contexts/Orders.context.tsx:55
useEffect(() => {
  // Load initial orders via HTTP
  const initial = await orderOrchestrator.listBoard();
  setOrders(initial);

  // Connect WebSocket for real-time updates
  orderOrchestrator.connect({
    onCreated: upsert,  // Handle new orders
    onUpdated: upsert,  // Handle order updates
  });

  return () => {
    orderOrchestrator.disconnect();
  };
}, []);