feat(admin): add v2 orders list (CardList with status pill + relative time)

2026-06-17 14:44:24 -06:00
parent d629cfe3d5
commit 9b9643e2c7
1 changed files with 119 additions and 0 deletions
@@ -0,0 +1,119 @@
 import { getAdminUser } from "@/lib/admin-permissions";
 import { getAdminOrders } from "@/actions/orders";
 import PageHeader from "@/components/admin/PageHeader";
 import { CardList, CardListItem } from "@/components/admin/CardList";
 import StatusPill, { type StatusKind } from "@/components/admin/StatusPill";
 import EmptyState from "@/components/admin/EmptyState";
 import OrdersFilterButton from "@/components/admin/orders/OrdersFilterButton";
 import PullToRefresh from "@/components/admin/PullToRefresh";
 import { formatRelativeTime } from "@/lib/format-date";
 export const dynamic = "force-dynamic";
 /**
 * Map the legacy `orders.status` + `pickup_complete` pair onto the
 * StatusPill's `StatusKind` union. The legacy schema uses
 * ('pending' | 'confirmed' | 'fulfilled' | 'canceled') and a boolean
 * `pickup_complete`; the v2 design uses the simpler
 * (placed | ready | picked-up | cancelled) vocabulary.
 */
 function statusKind(o: { status: string; pickup_complete: boolean }): StatusKind {
  if (o.status === "canceled") return "cancelled";
  if (o.pickup_complete || o.status === "fulfilled") return "picked-up";
  if (o.status === "confirmed") return "ready";
  return "placed";
 }
 export default async function OrdersV2Page({
  searchParams,
 }: {
  searchParams: Promise<{ status?: string }>;
 }) {
  const adminUser = await getAdminUser();
  if (!adminUser) return null;
  const result = await getAdminOrders();
  const allOrders = result.success ? result.orders : [];
  const params = await searchParams;
  // The legacy RPC doesn't accept a status filter — apply it client-side.
  // The shape we filter on matches the StatusPill vocabulary (placed/ready/
  // picked-up/cancelled), not the legacy DB status string, so the user
  // intent is the same.
  const filtered = params.status
    ? allOrders.filter((o) => statusKind(o) === params.status)
    : allOrders;
  // Show at most 50 — the plan's example limit. Anything more is paginated
  // (PR follow-up).
  const orders = filtered.slice(0, 50);
  if (orders.length === 0) {
    return (
      <main>
        <PageHeader title="Orders" actions={<OrdersFilterButton />} />
        <EmptyState
          title="No orders yet"
          description="When customers place orders, they'll show up here."
          icon={<span aria-hidden="true">📦</span>}
        />
      </main>
    );
  }
  return (
    <main>
      <PageHeader
        title="Orders"
        subtitle={`${orders.length} order${orders.length === 1 ? "" : "s"}`}
        actions={<OrdersFilterButton />}
      />
      <PullToRefresh>
        <CardList ariaLabel="Orders">
          {orders.map((order) => {
            const total = Number(order.subtotal ?? 0);
            return (
              <CardListItem key={order.id} href={`/admin/v2/orders/${order.id}`}>
                <div className="flex items-start justify-between gap-3 mb-2">
                  <StatusPill status={statusKind(order)} />
                  <span
                    className="text-mono"
                    style={{ color: "var(--color-text-faint)" }}
                  >
                    #{order.id.slice(0, 8)}
                  </span>
                  <span
                    className="text-meta ml-auto"
                    style={{ color: "var(--color-text-muted)" }}
                  >
                    {formatRelativeTime(order.created_at)}
                  </span>
                </div>
                <div
                  className="text-h2"
                  style={{ fontWeight: 700, lineHeight: 1.3 }}
                >
                  {order.customer_name ?? "Customer"}
                </div>
                <div className="flex items-center justify-between mt-2">
                  <span
                    className="text-h1 font-display"
                    style={{ fontWeight: 600 }}
                  >
                    ${total.toFixed(2)}
                  </span>
                  <span
                    aria-hidden="true"
                    style={{ color: "var(--color-text-faint)" }}
                  >
                    ›
                  </span>
                </div>
              </CardListItem>
            );
          })}
        </CardList>
      </PullToRefresh>
    </main>
  );
 }