@spree/seller-dashboard 1.0.0-beta.1

package/src/pages/onboarding.tsx

@@ -0,0 +1,539 @@
+import {
+  EMPTY_FILE_UPLOAD_VALUE,
+  FileUploadField,
+  type FileUploadValue,
+  PageHeader,
+  progressPercentage,
+} from '@spree/dashboard-core'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Field,
+  FieldLabel,
+  Input,
+  Progress,
+  ScrollArea,
+  StatusBadge as SharedStatusBadge,
+  Textarea,
+  toastManager,
+} from '@spree/dashboard-ui'
+import {
+  CheckCircle2Icon,
+  ChevronRightIcon,
+  CircleIcon,
+  ClockIcon,
+  ExternalLinkIcon,
+  XCircleIcon,
+} from '@spree/dashboard-ui/icons'
+import type { RequirementStatus } from '@spree/seller-sdk'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Link, useParams } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { sellerClient } from '../api-client'
+import { CenteredMessage } from '../components/centered-message'
+import { SellerAddressCard } from '../components/seller-address-card'
+import { SellerReturnsLocationCard } from '../components/seller-returns-location-card'
+
+/**
+ * What the marketplace asks of this seller before admitting them.
+ *
+ * Deliberately one page rather than a wizard: the checklist is not ordered by
+ * dependency, a seller can do these in any order, and several are things they
+ * have to go away and come back for (a document to find, an account to open).
+ * A wizard would trap them at step two.
+ *
+ * Every line and the progress bar render from `GET /seller/onboarding` and
+ * nothing else — the same evaluator the operator reads, so the two can never
+ * disagree about what is outstanding.
+ */
+export function OnboardingPage() {
+  const { t } = useTranslation()
+  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
+  const queryClient = useQueryClient()
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['seller', sellerId, 'onboarding'],
+    queryFn: () => sellerClient().onboarding.get(),
+  })
+
+  const submit = useMutation({
+    mutationFn: () => sellerClient().onboarding.submitForReview(),
+    onSuccess: (next) => {
+      queryClient.setQueryData(['seller', sellerId, 'onboarding'], next)
+      toastManager.add({ type: 'success', title: t('onboarding.submitted') })
+    },
+    // The server names what is outstanding; showing our own wording instead
+    // would tell the seller less than the API already knows.
+    onError: (err) =>
+      toastManager.add({
+        type: 'error',
+        title: err instanceof Error ? err.message : t('common.error'),
+      }),
+  })
+
+  if (isLoading) return <CenteredMessage>{t('common.loading')}</CenteredMessage>
+  if (error || !data) return <CenteredMessage>{t('common.error')}</CenteredMessage>
+
+  const { progress, requirements, status } = data
+  const blocking = requirements.filter((requirement) => requirement.blocking)
+  const submitted = status === 'ready_for_review'
+  const outstanding = firstOutstanding(requirements)
+  const openByDefault = outstanding ? [outstanding.id] : []
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title={t('onboarding.title')} subtitle={t('onboarding.subtitle')} />
+
+      <Card>
+        <CardHeader className="flex-row items-center justify-between gap-4">
+          <CardTitle>{t('onboarding.progress_title')}</CardTitle>
+          <Badge variant={progress.done >= progress.total ? 'success' : 'secondary'}>
+            {t('onboarding.progress_count', { done: progress.done, total: progress.total })}
+          </Badge>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <Progress value={progressPercentage(progress)} />
+
+          {submitted ? (
+            <p className="text-muted-foreground text-sm">{t('onboarding.under_review')}</p>
+          ) : (
+            <div className="flex items-center justify-between gap-4">
+              <p className="text-muted-foreground text-sm">
+                {blocking.length === 0
+                  ? t('onboarding.ready')
+                  : t('onboarding.remaining', { count: blocking.length })}
+              </p>
+              <Button
+                disabled={blocking.length > 0 || submit.isPending}
+                onClick={() => submit.mutate()}
+              >
+                {submit.isPending ? t('onboarding.submitting') : t('onboarding.submit')}
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {requirements.length > 0 && (
+        // One card holding every requirement, matching the operator's getting
+        // started checklist: this is a single list read top to bottom, and a
+        // frame around each line made them read as unrelated things.
+        //
+        // `multiple` because these are independent — a seller does them in any
+        // order — so opening one must not close the one they were reading.
+        // Opens on the first outstanding line, which answers "what next".
+        <Card className="overflow-hidden py-0">
+          <Accordion multiple defaultValue={openByDefault}>
+            {requirements.map((requirement) => (
+              <AccordionItem key={requirement.id} value={requirement.id}>
+                <AccordionTrigger>
+                  <StatusIcon status={requirement.status} />
+                  <div className="flex min-w-0 flex-col">
+                    <span
+                      className={
+                        requirement.status === 'complete' ? 'text-muted-foreground' : undefined
+                      }
+                    >
+                      {requirement.name}
+                    </span>
+                    {!requirement.required && (
+                      <span className="font-normal text-muted-foreground text-xs">
+                        {t('onboarding.optional')}
+                      </span>
+                    )}
+                  </div>
+                  <StatusBadge status={requirement.status} />
+                </AccordionTrigger>
+                <AccordionContent className="flex flex-col gap-3 ps-12">
+                  {requirement.description && (
+                    <p className="text-muted-foreground text-sm">{requirement.description}</p>
+                  )}
+                  <RequirementAction requirement={requirement} />
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </Card>
+      )}
+    </div>
+  )
+}
+
+function firstOutstanding(requirements: RequirementStatus[]): RequirementStatus | undefined {
+  return requirements.find((requirement) => requirement.status !== 'complete')
+}
+
+/**
+ * What the seller does about one line, keyed off `kind`.
+ *
+ * The server decides which kinds exist and what each means; this only decides
+ * how to ask. An unrecognised kind — one a provider gem added — still renders
+ * its name, description and any `action_url`, so a new kind is useful here
+ * before this file knows about it.
+ */
+function RequirementAction({ requirement }: { requirement: RequirementStatus }) {
+  const { t } = useTranslation()
+  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
+  const queryClient = useQueryClient()
+  const [note, setNote] = useState('')
+  const [file, setFile] = useState<FileUploadValue>(EMPTY_FILE_UPLOAD_VALUE)
+  const [fields, setFields] = useState<Record<string, string>>({})
+
+  // Only the billing address needs it, and it is already loaded by the
+  // profile page and the sidebar switcher — this reads the same cache entry.
+  // The returns address does not: it lives on a stock location, which its own
+  // card fetches.
+  const { data: profile } = useQuery({
+    queryKey: ['seller', sellerId, 'profile'],
+    queryFn: () => sellerClient().profile.get(),
+    enabled: requirement.kind === 'billing_address',
+  })
+
+  const invalidate = () =>
+    queryClient.invalidateQueries({ queryKey: ['seller', sellerId, 'onboarding'] })
+
+  const acceptTerms = useMutation({
+    mutationFn: () => sellerClient().profile.update({ accept_terms: true }),
+    onSuccess: () => {
+      toastManager.add({ type: 'success', title: t('onboarding.terms_accepted') })
+      void invalidate()
+    },
+    onError: (err) =>
+      toastManager.add({
+        type: 'error',
+        title: err instanceof Error ? err.message : t('common.error'),
+      }),
+  })
+
+  // Asked for at the moment the seller clicks, never earlier: a provider's
+  // hosted link is short-lived and single-use, so one fetched while drawing
+  // this page would often be dead by the time it was used. The seller comes
+  // back here — this page is where the checklist says what is outstanding.
+  const connectPayoutAccount = useMutation({
+    mutationFn: () => {
+      const here = window.location.href.split('?')[0]
+
+      return sellerClient().onboarding.payoutAccount({
+        refresh_url: here,
+        return_url: here,
+      })
+    },
+    onSuccess: ({ url }) => {
+      if (url) window.location.href = url
+    },
+    onError: (err) =>
+      toastManager.add({
+        type: 'error',
+        title: err instanceof Error ? err.message : t('common.error'),
+      }),
+  })
+
+  // One submit for every kind that takes one — an attestation the seller
+  // ticks, a document they upload, a manual check they say is ready. What
+  // differs is which controls render above it, not what posting means.
+  const submit = useMutation({
+    mutationFn: () =>
+      sellerClient().requirementSubmissions.create(requirement.id, {
+        note: note || undefined,
+        file: file.signedId || undefined,
+      }),
+    onSuccess: () => {
+      setNote('')
+      setFile(EMPTY_FILE_UPLOAD_VALUE)
+      toastManager.add({ type: 'success', title: t('onboarding.submitted_requirement') })
+      void invalidate()
+    },
+    onError: (err) =>
+      toastManager.add({
+        type: 'error',
+        title: err instanceof Error ? err.message : t('common.error'),
+      }),
+  })
+
+  // Custom fields are the seller's own profile data, so they save through the
+  // profile like the addresses do rather than as a submission.
+  const saveFields = useMutation({
+    mutationFn: () =>
+      sellerClient().profile.update({
+        custom_fields: Object.entries(fields).map(([id, value]) => ({
+          custom_field_definition_id: id,
+          value,
+        })),
+      }),
+    onSuccess: () => {
+      toastManager.add({ type: 'success', title: t('profile.saved') })
+      void invalidate()
+    },
+    onError: (err) =>
+      toastManager.add({
+        type: 'error',
+        title: err instanceof Error ? err.message : t('common.error'),
+      }),
+  })
+
+  const submission = requirement.submission
+
+  // A rejection the seller cannot read is a rejection they cannot act on.
+  const rejection = submission?.status === 'rejected' && submission.review_note && (
+    <p className="rounded-md bg-destructive/10 p-3 text-destructive text-sm">
+      {submission.review_note}
+    </p>
+  )
+
+  // Nothing to do on a finished line. The header already carries the tick and
+  // the Done badge, so a sentence saying the same thing a third time is noise.
+  if (requirement.status === 'complete') {
+    return rejection
+  }
+
+  if (requirement.status === 'pending') {
+    return (
+      <>
+        {rejection}
+        <p className="text-muted-foreground text-sm">{t('onboarding.awaiting_review')}</p>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {rejection}
+
+      {requirement.kind === 'accept_terms' && (
+        <div className="flex flex-col gap-3">
+          {/* The terms themselves. Accepting something a seller cannot
+              read is not consent — a link away is not enough. */}
+          {requirement.terms_html && (
+            <ScrollArea className="h-72 rounded-md border">
+              <div
+                className="prose prose-sm dark:prose-invert max-w-none p-4"
+                // Sanitized server-side by Spree::RichTextSanitizer.
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: sanitized on write
+                dangerouslySetInnerHTML={{ __html: requirement.terms_html }}
+              />
+            </ScrollArea>
+          )}
+          <div className="flex flex-wrap items-center gap-2">
+            {requirement.action_url && (
+              <Button variant="outline" asChild>
+                <a href={requirement.action_url} target="_blank" rel="noopener noreferrer">
+                  {t('onboarding.read_terms')}
+                  <ExternalLinkIcon className="size-4" />
+                </a>
+              </Button>
+            )}
+            <Button disabled={acceptTerms.isPending} onClick={() => acceptTerms.mutate()}>
+              {t('onboarding.accept_terms')}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Every kind that takes a submission gets the same form: a note, a
+          file picker when the kind asks for one, and one button. Keyed off
+          what the server says the kind accepts rather than off its name, so a
+          kind a gem adds is usable without this file knowing about it. */}
+      {requirement.accepts_submissions && requirement.kind !== 'accept_terms' && (
+        <div className="flex flex-col gap-3">
+          {requirement.requires_file && (
+            <FileUploadField
+              value={file}
+              onChange={setFile}
+              accept={requirement.accepted_content_types?.join(',')}
+              label={t('onboarding.document_label')}
+              help={t('onboarding.document_help')}
+            />
+          )}
+
+          <Textarea
+            rows={2}
+            value={note}
+            placeholder={t('onboarding.note_placeholder')}
+            onChange={(event) => setNote(event.target.value)}
+          />
+
+          <div className="flex justify-start">
+            <Button
+              // A document requirement with nothing attached is an empty
+              // submission the operator can only reject.
+              disabled={submit.isPending || (requirement.requires_file && !file.signedId)}
+              onClick={() => submit.mutate()}
+            >
+              {requirement.requires_file
+                ? t('onboarding.submit_document')
+                : t('onboarding.confirm')}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* The fields the marketplace asks this seller to fill in, rendered
+          here rather than behind a link: the checklist is where they were
+          asked, so it is where they answer. */}
+      {requirement.custom_fields && requirement.custom_fields.length > 0 && (
+        <div className="flex flex-col gap-3">
+          {requirement.custom_fields.map((field) => (
+            <Field key={field.id}>
+              <FieldLabel htmlFor={`cf-${field.id}`}>{field.label}</FieldLabel>
+              <Input
+                id={`cf-${field.id}`}
+                value={fields[field.id] ?? (field.value == null ? '' : String(field.value))}
+                onChange={(event) =>
+                  setFields((current) => ({ ...current, [field.id]: event.target.value }))
+                }
+              />
+            </Field>
+          ))}
+          <div className="flex justify-start">
+            <Button
+              disabled={saveFields.isPending || Object.keys(fields).length === 0}
+              onClick={() => saveFields.mutate()}
+            >
+              {t('common.save')}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Addresses are filled in here rather than on the profile page: a
+          seller working through setup should not be sent away and lose their
+          place. Same card either way, so the two cannot diverge. */}
+      {requirement.kind === 'billing_address' && profile && (
+        <SellerAddressCard profile={profile} headless />
+      )}
+
+      {/* Returns go to a stock location rather than a loose address, so this
+          one writes a different record — the seller still just sees an
+          address form. */}
+      {requirement.kind === 'returns_address' && <SellerReturnsLocationCard headless />}
+
+      {/* The provider hosts the form, so this is a redirect rather than a
+          page: the seller gives their bank and identity details to whoever
+          is paying them, and the marketplace never handles either.
+
+          Three outcomes, three different things to say. Waiting on the
+          provider gets no button at all — offering one would invite the
+          seller round a flow that cannot move, and they would click it
+          repeatedly wondering why nothing changed. */}
+      {requirement.kind === 'payout_account' && (
+        <div className="flex flex-col items-start gap-2">
+          {requirement.blocker?.message && (
+            <p className="text-muted-foreground text-sm">{requirement.blocker.message}</p>
+          )}
+
+          {requirement.blocker?.state === 'pending' ? (
+            <p className="text-muted-foreground text-sm">
+              {t('onboarding.awaiting_payout_provider')}
+            </p>
+          ) : (
+            <Button
+              disabled={connectPayoutAccount.isPending}
+              onClick={() => connectPayoutAccount.mutate()}
+            >
+              {requirement.blocker?.state === 'rejected'
+                ? t('onboarding.payout_account_rejected')
+                : t('onboarding.connect_payout_account')}
+              <ExternalLinkIcon className="size-4" />
+            </Button>
+          )}
+        </div>
+      )}
+
+      {/* Kinds whose work happens on a page this panel already has. The
+          server cannot supply these: `action_url` is for somewhere it knows
+          about (a provider's hosted flow), and it has no idea how this panel
+          routes. Anything unmapped falls through to `action_url` below, so a
+          kind added by a gem still gets a way in without this file changing. */}
+      {panelRoute(requirement.kind) && (
+        <div className="flex justify-start">
+          <Button asChild>
+            <Link to={panelRoute(requirement.kind)!} params={{ sellerId }}>
+              {t('onboarding.go')}
+              <ChevronRightIcon className="size-4" />
+            </Link>
+          </Button>
+        </div>
+      )}
+
+      {/* Which documents are still owed. The generic link below says where to
+          go; without this the seller would arrive not knowing what to write. */}
+      {/* `accept_terms` renders its own link above, with different words. */}
+      {requirement.action_url &&
+        requirement.kind !== 'accept_terms' &&
+        requirement.kind !== 'payout_account' && (
+          <div className="flex justify-start">
+            <Button variant="outline" asChild>
+              <a href={requirement.action_url} target="_blank" rel="noopener noreferrer">
+                {t('onboarding.go')}
+                <ExternalLinkIcon className="size-4" />
+              </a>
+            </Button>
+          </div>
+        )}
+    </>
+  )
+}
+
+/**
+ * Where in this panel a seller goes to satisfy a kind.
+ *
+ * Deliberately a short map rather than a per-kind component: these lines say
+ * "go and fill that in", and the page that owns the form already exists. A
+ * kind that is not here renders its description and any `action_url`, which
+ * is what makes a provider's kind useful before this file knows it exists.
+ */
+function panelRoute(kind: string): string | undefined {
+  switch (kind) {
+    case 'complete_profile':
+      return '/$sellerId/profile'
+    case 'policy':
+      return '/$sellerId/settings/policies'
+    case 'delivery_method':
+      return '/$sellerId/settings/delivery-methods'
+    case 'package_type':
+      return '/$sellerId/settings/package-types'
+    // `required_custom_fields` is not here: it renders its own fields inline,
+    // so a link away would offer a second, worse route to the same thing.
+    //
+    // `minimum_products` belongs here once the panel has a products page —
+    // until then it falls through and reads as a plain instruction rather
+    // than a link to nowhere.
+    default:
+      return undefined
+  }
+}
+
+function StatusIcon({ status }: { status: string }) {
+  if (status === 'complete') {
+    return <CheckCircle2Icon className="size-5 shrink-0 text-success" />
+  }
+  if (status === 'pending') {
+    return <ClockIcon className="size-5 shrink-0 text-warning" />
+  }
+  if (status === 'rejected') {
+    return <XCircleIcon className="size-5 shrink-0 text-destructive" />
+  }
+  return <CircleIcon className="size-5 shrink-0 text-muted-foreground" />
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const { t } = useTranslation()
+
+  // Only the wording is local — the colour comes from the shared status map.
+  if (status === 'complete')
+    return <SharedStatusBadge status="complete" label={t('onboarding.status.complete')} />
+  if (status === 'pending')
+    return <SharedStatusBadge status="pending" label={t('onboarding.status.pending')} />
+  if (status === 'rejected')
+    return <SharedStatusBadge status="rejected" label={t('onboarding.status.rejected')} />
+  return null
+}

package/src/pages/order.tsx

@@ -0,0 +1,119 @@
+import { formatStoreDateTime, PageHeader } from '@spree/dashboard-core'
+import { DropdownMenuItem, ResourceLayout, StatusBadge } from '@spree/dashboard-ui'
+import { XCircleIcon } from '@spree/dashboard-ui/icons'
+import { useParams } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CenteredMessage } from '../components/centered-message'
+import { FulfillmentsCard } from '../components/orders/fulfillments-card'
+import { OrderCancelDialog } from '../components/orders/order-cancel-dialog'
+import { OrderCustomerCard, OrderSummaryCard } from '../components/orders/order-cards'
+import { OrderEarningsCard } from '../components/orders/order-earnings-card'
+import { InternalNoteCard, SpecialInstructionsCard } from '../components/orders/order-notes-cards'
+import { OrderPaymentCard } from '../components/orders/order-payment-card'
+import { ClaimsCard, ExchangesCard } from '../components/orders/post-sale-cards'
+import { ReturnsCard } from '../components/orders/returns-card'
+import { RetryableError } from '../components/retryable-error'
+import { useOrder } from '../hooks/use-order'
+import { useStoreTimezone } from '../hooks/use-store-timezone'
+
+/**
+ * One order, as the seller needs it to pack, post, and put right.
+ *
+ * Laid out like the operator's order page — parcels and post-sale on the
+ * left, who and what on the right — minus the marketplace's own surfaces:
+ * the payment the customer made, the tax and discount breakdown, and the
+ * operator's bookkeeping all belong to whoever runs the marketplace.
+ */
+export function OrderPage() {
+  const { t } = useTranslation()
+  const { orderId } = useParams({ from: '/_authenticated/$sellerId/orders/$orderId' })
+  const timezone = useStoreTimezone()
+  const [canceling, setCanceling] = useState(false)
+
+  const { data: order, isLoading, isError, refetch } = useOrder(orderId)
+
+  if (isLoading) return <CenteredMessage>{t('common.loading')}</CenteredMessage>
+  if (isError) return <RetryableError onRetry={() => refetch()} />
+  if (!order) return <CenteredMessage>{t('orders.not_found')}</CenteredMessage>
+
+  const cancelable = order.status !== 'canceled'
+  // Nothing can come back from an order that never went out, so the post-sale
+  // cards would only render empty with a disabled button.
+  const placed = !!order.completed_at
+
+  return (
+    <>
+      {canceling && <OrderCancelDialog orderId={orderId} onClose={() => setCanceling(false)} />}
+      <ResourceLayout
+        header={
+          // Cancel sits in the menu's destructive group rather than beside the
+          // title: it is easy to hit by mistake there, and this is where the
+          // operator dashboard puts the same action.
+          <PageHeader
+            title={order.number}
+            backTo="orders"
+            subtitle={
+              order.completed_at ? formatStoreDateTime(order.completed_at, timezone) : undefined
+            }
+            badges={
+              <>
+                {order.fulfillment_status && (
+                  <StatusBadge
+                    status={order.fulfillment_status}
+                    label={t(`orders.fulfillment_statuses.${order.fulfillment_status}`, {
+                      defaultValue: order.fulfillment_status,
+                    })}
+                  />
+                )}
+                {order.payment_status && (
+                  <StatusBadge
+                    status={order.payment_status}
+                    label={t(`orders.payment_statuses.${order.payment_status}`, {
+                      defaultValue: order.payment_status,
+                    })}
+                  />
+                )}
+              </>
+            }
+            resource={{ id: order.id, number: order.number }}
+            destructiveItems={
+              cancelable ? (
+                <DropdownMenuItem variant="destructive" onClick={() => setCanceling(true)}>
+                  <XCircleIcon className="size-4" />
+                  {t('admin.pages.orders.detail.actions.cancel')}
+                </DropdownMenuItem>
+              ) : undefined
+            }
+          />
+        }
+        main={
+          <>
+            <FulfillmentsCard order={order} />
+            {placed && (
+              <>
+                <ReturnsCard order={order} />
+                <ExchangesCard order={order} />
+                <ClaimsCard order={order} />
+              </>
+            )}
+            <OrderSummaryCard order={order} />
+            {placed && (
+              <>
+                <OrderPaymentCard order={order} />
+                <OrderEarningsCard order={order} />
+              </>
+            )}
+          </>
+        }
+        sidebar={
+          <>
+            <OrderCustomerCard order={order} />
+            <SpecialInstructionsCard order={order} />
+            <InternalNoteCard order={order} />
+          </>
+        }
+      />
+    </>
+  )
+}

package/src/pages/orders.tsx

@@ -0,0 +1,33 @@
+import { ExportButton, PageHeader, type ResourceSearch, ResourceTable } from '@spree/dashboard-core'
+import { useRowClickBridge } from '@spree/dashboard-ui'
+import type { Order } from '@spree/seller-sdk'
+import { useNavigate, useParams } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { sellerClient } from '../api-client'
+import '../tables/orders'
+
+/** What this seller has sold, newest first. */
+export function OrdersPage({ search }: { search: ResourceSearch }) {
+  const { t } = useTranslation()
+  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
+  const navigate = useNavigate()
+
+  useRowClickBridge('data-order-id', (orderId: string) =>
+    navigate({ to: '/$sellerId/orders/$orderId', params: { sellerId, orderId } }),
+  )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <PageHeader title={t('orders.title')} sticky={false} />
+
+      <ResourceTable<Order>
+        hideHeader
+        tableKey="seller-orders"
+        queryKey="seller-orders"
+        queryFn={(params) => sellerClient().orders.list(params)}
+        searchParams={search}
+        actions={(ctx) => <ExportButton type="orders" {...ctx} />}
+      />
+    </div>
+  )
+}