init

apps/web/src/orders/orders-page.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import type { OrderSummary } from "@orderops/shared";
+import { listOrders } from "./order-api";
+import { OrderList } from "./order-list";
+import { OrderSearch } from "./order-search";
+
+export function OrdersPage() {
+  const [query, setQuery] = useState("");
+  const [orders, setOrders] = useState<OrderSummary[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      void listOrders(query)
+        .then((nextOrders) => {
+          setOrders(nextOrders);
+          setError(null);
+        })
+        .catch((caught: unknown) => setError(caught instanceof Error ? caught.message : "Failed to load orders."));
+    }, 150);
+
+    return () => window.clearTimeout(timeout);
+  }, [query]);
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-4">
+      <div>
+        <h1 className="text-2xl font-semibold text-slate-900">Orders</h1>
+        <p className="text-sm text-slate-600">Search orders and open an order workspace.</p>
+      </div>
+      <OrderSearch query={query} onQueryChange={setQuery} />
+      {error ? <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div> : null}
+      <OrderList orders={orders} />
+    </div>
+  );
+}