StoreOrdersList

Store admin orders. A data-table order list with status, payment and fulfilment chips, filters, saved views and bulk actions; an order detail with partial fulfilment and tracking, refunds by line or amount with restock, cancel, a notes timeline and customer cards; printable invoices and packing slips; abandoned carts with a recovery email. The refund, fulfilment and status maths is pure and tested.

PreviewOpen ↗

Code

import { useState } from "react";import { StoreOrderDetail, StoreOrdersList, type CommerceOrder, type RefundRecord } from "@fadymondy/nasaq/web";export function Orders({ initial }: { initial: CommerceOrder[] }) {  const [orders, setOrders] = useState(initial);  const [refunds, setRefunds] = useState<Record<string, RefundRecord[]>>({});  const [open, setOpen] = useState<string | null>(null);  const order = orders.find((o) => o.id === open);  if (order) {    return (      <StoreOrderDetail        order={order}        refunds={refunds[order.id] ?? []}        currency="USD"        actor="Mona"        onBack={() => setOpen(null)}        onChange={(next) => {          setOrders((all) => all.map((o) => (o.id === next.order.id ? next.order : o)));          setRefunds((r) => ({ ...r, [next.order.id]: next.refunds }));        }}      />    );  }  return <StoreOrdersList orders={orders} currency="USD" onOpenOrder={(o) => setOpen(o.id)} />;}

Store Admin · beta

Live examples and controls: StoreOrdersList in the lab.

Install

npx shadcn@latest add https://docs.nasaqui.com/r/store-orders-admin.json

The order side of a store admin. StoreOrdersList is the list, StoreOrderDetail is one order, StoreOrderPrintView prints invoices and packing slips, and StoreAbandonedCarts lists carts that were left behind. They are presentational: you pass orders and callbacks, they never fetch. Money is integer minor units in one currency.

Every change goes through pure functions in order-math.ts, so the numbers on screen are the numbers your server should also compute: what is still refundable per line, whether an order is unfulfilled, partly or fully shipped, and which status follows. StoreOrderDetail calls onChange({ order, refunds, restock? }) with the new state; you save it.

When to use

The orders area of a store or marketplace admin.

When not to use

The customer's own orders: use store-account.
A one-off sales report: use store-dashboard.

Import

import { StoreOrdersList, StoreOrderDetail } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick start

import { useState } from "react";
import { StoreOrderDetail, StoreOrdersList, type CommerceOrder, type RefundRecord } from "@fadymondy/nasaq/web";

export function Orders({ initial }: { initial: CommerceOrder[] }) {
  const [orders, setOrders] = useState(initial);
  const [refunds, setRefunds] = useState<Record<string, RefundRecord[]>>({});
  const [open, setOpen] = useState<string | null>(null);
  const order = orders.find((o) => o.id === open);

  if (order) {
    return (
      <StoreOrderDetail
        order={order}
        refunds={refunds[order.id] ?? []}
        currency="USD"
        actor="Mona"
        onBack={() => setOpen(null)}
        onChange={(next) => {
          setOrders((all) => all.map((o) => (o.id === next.order.id ? next.order : o)));
          setRefunds((r) => ({ ...r, [next.order.id]: next.refunds }));
        }}
      />
    );
  }
  return <StoreOrdersList orders={orders} currency="USD" onOpenOrder={(o) => setOpen(o.id)} />;
}

Anatomy

StoreOrdersList [data-slot="store-orders-list"]
├─ views row              All, To fulfil, Unpaid, Delivered, Refunds and your saved views, each with a live count
├─ search, facet filters  status, payment, fulfilment
├─ DataTable              chips, total, row actions, selection
└─ bulk bar               Mark fulfilled, Print slips, Print invoices, Export selected

StoreOrderDetail [data-slot="store-order-detail"]
├─ header                 number, chips, Packing slip, Invoice, Cancel, Refund, Fulfil
├─ lines card             shipped, to ship and refunded badges, progress
├─ payment card           totals, refunds list, net paid, due
├─ timeline               StoreOrderTimeline variant="activity" with a note composer
├─ customer, addresses, shipment cards
└─ dialogs                Fulfil (per line, carrier, tracking), Refund (lines or amount, shipping, restock), Cancel

StoreOrderPrintView / StoreOrderDocument [data-slot="store-order-document"]
StoreAbandonedCarts [data-slot="store-abandoned-carts"]

API