@spree/seller-dashboard 1.0.0-beta.1

package/src/routes/_authenticated/$sellerId/payouts/index.tsx

@@ -0,0 +1,15 @@
+import { type ResourceSearch, resourceSearchSchema } from '@spree/dashboard-core'
+import { createFileRoute } from '@tanstack/react-router'
+import { PayoutsPage } from '../../../../pages/payouts'
+
+/** Settlements to this seller — what has been sent, and what is owed. */
+export const Route = createFileRoute('/_authenticated/$sellerId/payouts/')({
+  validateSearch: resourceSearchSchema,
+  component: PayoutsRoute,
+})
+
+function PayoutsRoute() {
+  const search = Route.useSearch() as ResourceSearch
+
+  return <PayoutsPage search={search} />
+}

package/src/routes/_authenticated/$sellerId/products/$productId.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ProductPage } from '../../../../pages/product'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/products/$productId')({
+  component: () => <ProductPage mode="edit" />,
+})

package/src/routes/_authenticated/$sellerId/products/index.tsx

@@ -0,0 +1,23 @@
+import { type ResourceSearch, resourceSearchSchema } from '@spree/dashboard-core'
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+import { ProductsPage } from '../../../../pages/products'
+
+// `import` carries the prefixed id of the import whose wizard is open over the
+// table — deep-linkable and refresh-safe, which is what lets the import-done
+// email link straight back into it.
+const productsSearchSchema = resourceSearchSchema.extend({
+  import: z.string().optional(),
+})
+
+export const Route = createFileRoute('/_authenticated/$sellerId/products/')({
+  validateSearch: productsSearchSchema,
+  component: ProductsRoute,
+})
+
+function ProductsRoute() {
+  // Cast: the inferred type unions with the parent layout's shape.
+  const search = Route.useSearch() as ResourceSearch & { import?: string }
+
+  return <ProductsPage search={search} />
+}

package/src/routes/_authenticated/$sellerId/products/new.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ProductPage } from '../../../../pages/product'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/products/new')({
+  component: () => <ProductPage mode="new" />,
+})

package/src/routes/_authenticated/$sellerId/profile.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ProfilePage } from '../../../pages/profile'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/profile')({
+  component: ProfilePage,
+})

package/src/routes/_authenticated/$sellerId/settings/delivery-methods.tsx

@@ -0,0 +1,14 @@
+import { type ResourceSearch, resourceSearchSchema } from '@spree/dashboard-core'
+import { createFileRoute } from '@tanstack/react-router'
+import { DeliveryMethodsPage } from '../../../../pages/delivery-methods'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/settings/delivery-methods')({
+  validateSearch: resourceSearchSchema,
+  component: DeliveryMethodsRoute,
+})
+
+function DeliveryMethodsRoute() {
+  const search = Route.useSearch() as ResourceSearch
+
+  return <DeliveryMethodsPage search={search} />
+}

package/src/routes/_authenticated/$sellerId/settings/index.tsx

@@ -0,0 +1,18 @@
+import { SettingsIndexPage } from '@spree/dashboard-core'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/settings/')({
+  component: SettingsIndexRoute,
+})
+
+/**
+ * The same landing page the operator's dashboard renders: a card grid of every
+ * settings area this member can reach. On a narrow viewport the settings rail
+ * is hidden, so this grid is the only way into the area — it must not redirect
+ * to a specific page.
+ */
+function SettingsIndexRoute() {
+  const { sellerId } = Route.useParams()
+
+  return <SettingsIndexPage tenantId={sellerId} />
+}

package/src/routes/_authenticated/$sellerId/settings/package-types.tsx

@@ -0,0 +1,21 @@
+import { PackageTypesPage, packageTypesSearchSchema } from '@spree/dashboard-core'
+import { createFileRoute } from '@tanstack/react-router'
+import type { z } from 'zod/v4'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/settings/package-types')({
+  validateSearch: packageTypesSearchSchema,
+  component: PackageTypesRoute,
+})
+
+/**
+ * The same page the operator's dashboard renders, against this seller's own
+ * packaging — the Seller API scopes it, so nothing here has to.
+ *
+ * No owner column: the list is this seller's rows plus the marketplace's
+ * shared packaging, and the read-only rows already say which is which.
+ */
+function PackageTypesRoute() {
+  const search = Route.useSearch() as z.infer<typeof packageTypesSearchSchema>
+
+  return <PackageTypesPage search={search} />
+}

package/src/routes/_authenticated/$sellerId/settings/policies.tsx

@@ -0,0 +1,14 @@
+import { type ResourceSearch, resourceSearchSchema } from '@spree/dashboard-core'
+import { createFileRoute } from '@tanstack/react-router'
+import { PoliciesPage } from '../../../../pages/policies'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/settings/policies')({
+  validateSearch: resourceSearchSchema,
+  component: PoliciesRoute,
+})
+
+function PoliciesRoute() {
+  const search = Route.useSearch() as ResourceSearch
+
+  return <PoliciesPage search={search} />
+}

package/src/routes/_authenticated/$sellerId/settings/stock-locations.tsx

@@ -0,0 +1,22 @@
+import { StockLocationsPage, stockLocationsSearchSchema } from '@spree/dashboard-core'
+import { createFileRoute } from '@tanstack/react-router'
+import type { z } from 'zod/v4'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/settings/stock-locations')({
+  validateSearch: stockLocationsSearchSchema,
+  component: StockLocationsRoute,
+})
+
+/**
+ * The same page the operator's dashboard renders, against this seller's own
+ * locations — the Seller API scopes them, so nothing here has to.
+ *
+ * No stock-levels panel: editing on-hand counts reads the Admin API and links
+ * to the operator's product pages. A seller's stock lives on their products,
+ * which is where the panel will edit it.
+ */
+function StockLocationsRoute() {
+  const search = Route.useSearch() as z.infer<typeof stockLocationsSearchSchema>
+
+  return <StockLocationsPage search={search} />
+}

package/src/routes/_authenticated/$sellerId/settings/team.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { TeamPage } from '../../../../pages/team'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/settings/team')({
+  component: TeamPage,
+})

package/src/routes/_authenticated/$sellerId/settings.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/settings')({
+  component: SettingsLayout,
+})
+
+/**
+ * Content padding for the settings area. The rail itself lives in the chrome,
+ * one level up, so it can span full height beside the top bar — this layout
+ * owns only the right-hand column, matching the dashboard's settings layout.
+ */
+function SettingsLayout() {
+  return (
+    <div className="container mx-auto flex flex-1 flex-col gap-4 p-4 lg:p-6">
+      <Outlet />
+    </div>
+  )
+}

package/src/routes/_authenticated/$sellerId.tsx

@@ -0,0 +1,49 @@
+import { usePermissions } from '@spree/dashboard-core'
+import { createFileRoute, Outlet, useParams } from '@tanstack/react-router'
+import { useEffect } from 'react'
+import { rememberSeller, setActiveSeller } from '../../api-client'
+import { PanelChrome } from '../../panel-chrome'
+
+export const Route = createFileRoute('/_authenticated/$sellerId')({
+  component: SellerLayout,
+})
+
+/**
+ * Everything below this route acts as one seller.
+ *
+ * The id in the URL is the single source of truth — the client header follows
+ * it, so a seller can keep two sellers open in two tabs without one stealing
+ * the other's session, and a bookmarked page opens the seller it belongs to.
+ */
+function SellerLayout() {
+  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
+  const { refresh: refreshPermissions } = usePermissions()
+
+  // Synchronously, not in an effect: children render (and fetch) before
+  // effects run, and a request sent under the previous seller's header would
+  // load the wrong seller's data into this one's screen.
+  setActiveSeller(sellerId)
+
+  useEffect(() => {
+    rememberSeller(sellerId)
+  }, [sellerId])
+
+  // Capability is per seller, so the permission provider's own fetch — which
+  // runs the moment authentication succeeds, before any seller is chosen —
+  // comes back with nothing and every `<Can>` and permission-gated nav entry
+  // reads as denied. That is why the sidebar was empty until a refresh.
+  //
+  // Unlike the operator's dashboard, this does NOT skip its first run: there
+  // the initial fetch is already correct for the initial store, here it never
+  // is. Re-runs on `sellerId` so switching sellers reloads capability too.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: sellerId drives the seller-switch re-run
+  useEffect(() => {
+    void refreshPermissions()
+  }, [sellerId, refreshPermissions])
+
+  return (
+    <PanelChrome>
+      <Outlet />
+    </PanelChrome>
+  )
+}

package/src/routes/_authenticated/index.tsx

@@ -0,0 +1,48 @@
+import { useQuery } from '@tanstack/react-query'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { rememberedSeller, sellerClient } from '../../api-client'
+import { CenteredMessage } from '../../components/centered-message'
+import { SellerPicker } from '../../pages/seller-picker'
+
+export const Route = createFileRoute('/_authenticated/')({
+  component: SellerEntry,
+})
+
+/**
+ * Where a signed-in seller lands.
+ *
+ * Unlike the operator's dashboard, which always redirects into a store, a
+ * seller may genuinely run several sellers — so the picker is a real page.
+ * It is skipped in the two cases where the answer is already known: a
+ * remembered choice from last session, or exactly one seller.
+ */
+function SellerEntry() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['seller', 'me'],
+    queryFn: () => sellerClient().me(),
+  })
+
+  const sellers = data?.sellers ?? []
+  const remembered = rememberedSeller()
+  // A remembered id is only honoured if the seller still runs that seller —
+  // access can be revoked between sessions, and following a stale id would
+  // land them on a page that 403s.
+  const target =
+    (remembered && sellers.some((seller) => seller.id === remembered) ? remembered : null) ??
+    (sellers.length === 1 ? sellers[0].id : null)
+
+  useEffect(() => {
+    if (target) navigate({ to: '/$sellerId', params: { sellerId: target }, replace: true })
+  }, [navigate, target])
+
+  if (isLoading) return <CenteredMessage>{t('common.loading')}</CenteredMessage>
+  if (error) return <CenteredMessage>{t('common.error')}</CenteredMessage>
+  if (target) return null
+
+  return <SellerPicker />
+}

package/src/routes/_authenticated.tsx

@@ -0,0 +1,13 @@
+import { useAuth } from '@spree/dashboard-core'
+import { createFileRoute, Navigate, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated')({
+  component: AuthenticatedLayout,
+})
+
+function AuthenticatedLayout() {
+  const { isInitializing, isAuthenticated } = useAuth()
+  if (isInitializing) return null
+  if (!isAuthenticated) return <Navigate to="/login" replace />
+  return <Outlet />
+}

package/src/routes/accept-invitation.$invitationId.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod/v4'
+import { AcceptInvitationPage } from '../pages/accept-invitation'
+
+const acceptSearchSchema = z.object({
+  token: z.string().min(1).optional(),
+})
+
+export const Route = createFileRoute('/accept-invitation/$invitationId')({
+  validateSearch: acceptSearchSchema,
+  component: AcceptInvitation,
+})
+
+function AcceptInvitation() {
+  const { invitationId } = Route.useParams()
+  const { token } = Route.useSearch()
+
+  return <AcceptInvitationPage invitationId={invitationId} token={token} />
+}

package/src/routes/forgot-password.tsx

@@ -0,0 +1,15 @@
+import { useAuth } from '@spree/dashboard-core'
+import { createFileRoute, Navigate } from '@tanstack/react-router'
+import { ForgotPasswordPage } from '../pages/forgot-password'
+
+export const Route = createFileRoute('/forgot-password')({
+  component: ForgotPassword,
+})
+
+function ForgotPassword() {
+  const { isInitializing, isAuthenticated } = useAuth()
+  if (isInitializing) return null
+  // Someone already signed in has no use for a reset link.
+  if (isAuthenticated) return <Navigate to="/" replace />
+  return <ForgotPasswordPage />
+}

package/src/routes/login.tsx

@@ -0,0 +1,15 @@
+import { useAuth } from '@spree/dashboard-core'
+import { createFileRoute, Navigate } from '@tanstack/react-router'
+import { LoginPage } from '../pages/login'
+
+export const Route = createFileRoute('/login')({
+  component: Login,
+})
+
+function Login() {
+  const { isInitializing, isAuthenticated } = useAuth()
+  if (isInitializing) return null
+  // A live session landing on /login goes where it was headed instead.
+  if (isAuthenticated) return <Navigate to="/" replace />
+  return <LoginPage />
+}

package/src/routes/reset-password.tsx

@@ -0,0 +1,21 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod/v4'
+import { ResetPasswordPage } from '../pages/reset-password'
+
+const resetSearchSchema = z.object({
+  token: z.string().min(1).optional(),
+})
+
+export const Route = createFileRoute('/reset-password')({
+  validateSearch: resetSearchSchema,
+  component: ResetPassword,
+})
+
+function ResetPassword() {
+  const { token } = Route.useSearch()
+
+  // No redirect for a live session: someone following a reset link means to
+  // change their password, and a stale session in the same browser must not
+  // silently swallow the link.
+  return <ResetPasswordPage token={token} />
+}

package/src/schemas/fulfillment.ts

@@ -0,0 +1,31 @@
+import { z } from 'zod/v4'
+
+/**
+ * What the seller chose to send out of one parcel: per-line quantities plus
+ * the tracking number and whether the customer hears about it.
+ *
+ * Every line the parcel holds gets a row, so an unselected row means "leave
+ * this one behind" rather than being absent — the payload drops the
+ * unselected rows on submit.
+ *
+ * The upper bound is per row (how many units that parcel holds), so it lives
+ * on the field rather than in the schema; the schema only enforces that a
+ * quantity is a whole number that is not negative. Sending nothing at all is
+ * prevented by disabling the submit, since it is a no-op rather than a
+ * validation failure.
+ */
+export const fulfillItemsFormSchema = z.object({
+  items: z.array(
+    z.object({
+      item_id: z.string(),
+      selected: z.boolean(),
+      quantity: z.number().int().min(0),
+    }),
+  ),
+  tracking: z.string(),
+  // '' = detect from the number; slugs come from trackingCarriers.list().
+  tracking_carrier: z.string(),
+  notify_customer: z.boolean(),
+})
+
+export type FulfillItemsFormValues = z.infer<typeof fulfillItemsFormSchema>

package/src/seller-dashboard.tsx

@@ -0,0 +1,50 @@
+import { AuthProvider, PermissionProvider, queryClient } from '@spree/dashboard-core'
+import { ConfirmProvider, ThemeProvider, TooltipProvider } from '@spree/dashboard-ui'
+import { QueryClientProvider } from '@tanstack/react-query'
+import type { AnyRouter } from '@tanstack/react-router'
+import { RouterProvider } from '@tanstack/react-router'
+import { StrictMode } from 'react'
+
+/**
+ * The seller panel shell.
+ *
+ * The same providers as the marketplace operator's dashboard — that is what
+ * `@spree/dashboard-core` and `@spree/dashboard-ui` are for — pointed at the
+ * Seller API. The host registers that client before rendering:
+ *
+ *     // src/main.tsx
+ *     import { createRoot } from 'react-dom/client'
+ *     import { SellerDashboard, createSellerRouter } from '@spree/seller-dashboard'
+ *     import './api-client'   // registers the Seller API client
+ *     import './styles.css'
+ *     import { routeTree } from './routeTree.gen'
+ *
+ *     const router = createSellerRouter(routeTree)
+ *
+ *     declare module '@tanstack/react-router' {
+ *       interface Register {
+ *         router: typeof router
+ *       }
+ *     }
+ *
+ *     createRoot(document.getElementById('root')!).render(<SellerDashboard router={router} />)
+ */
+export function SellerDashboard({ router }: { router: AnyRouter }) {
+  return (
+    <StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider>
+          <TooltipProvider>
+            <ConfirmProvider>
+              <AuthProvider>
+                <PermissionProvider>
+                  <RouterProvider router={router} />
+                </PermissionProvider>
+              </AuthProvider>
+            </ConfirmProvider>
+          </TooltipProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </StrictMode>
+  )
+}

package/src/styles.css

@@ -0,0 +1,18 @@
+/* Seller panel CSS entry.
+ *
+ * Pulls in the design system stylesheet from `@spree/dashboard-ui` — the same
+ * components and the same look as the marketplace operator's dashboard, with
+ * a different API behind them.
+ *
+ * `@source` directives for this package and `@spree/dashboard-core` are
+ * appended at build time by `spreeSellerDashboardPlugin` from
+ * `@spree/seller-dashboard/vite`. Resolution goes through Node module
+ * resolution, so paths stay correct under any package layout (workspace
+ * symlinks, npm tarballs, pnpm's `.pnpm/` hoisting) — never hardcode them
+ * relative to this file.
+ *
+ * The Vite plugin bundles `@tailwindcss/vite` internally, so host apps must
+ * NOT register `tailwindcss()` separately.
+ */
+
+@import "@spree/dashboard-ui/styles.css";

package/src/tables/delivery-methods.tsx

@@ -0,0 +1,68 @@
+import { defineTable } from '@spree/dashboard-core'
+import { Badge, ResourceNameCell } from '@spree/dashboard-ui'
+import { TruckIcon } from '@spree/dashboard-ui/icons'
+import type { DeliveryMethod } from '@spree/seller-sdk'
+import i18n from 'i18next'
+
+defineTable<DeliveryMethod>('seller-delivery-methods', {
+  title: i18n.t('delivery_methods.title'),
+  searchParam: 'name_cont',
+  searchPlaceholder: i18n.t('delivery_methods.search_placeholder'),
+  defaultSort: { field: 'name', direction: 'asc' },
+  emptyIcon: <TruckIcon className="size-8 text-muted-foreground" />,
+  emptyMessage: i18n.t('delivery_methods.empty.title'),
+  columns: [
+    {
+      key: 'name',
+      label: i18n.t('delivery_methods.columns.name'),
+      sortable: true,
+      default: true,
+      // A marketplace method the operator merely shares renders as plain
+      // text: the API refuses every write against it, so making its name
+      // look clickable would open an editor whose Save could only 404.
+      render: (method) =>
+        method.editable ? (
+          <ResourceNameCell
+            id={method.id}
+            dataAttr="data-delivery-method-id"
+            name={method.name}
+            secondary={method.admin_name ?? undefined}
+          />
+        ) : (
+          <div className="flex flex-col">
+            <span className="font-medium">{method.name}</span>
+            {method.admin_name && (
+              <span className="text-muted-foreground text-xs">{method.admin_name}</span>
+            )}
+          </div>
+        ),
+    },
+    // Whose method it is. A marketplace method the operator shares is listed
+    // so a seller can see what already ships their goods, and cannot be
+    // changed here.
+    {
+      key: 'editable',
+      label: i18n.t('delivery_methods.columns.owner'),
+      default: true,
+      render: (method) => (
+        <Badge variant={method.editable ? 'default' : 'secondary'}>
+          {method.editable
+            ? i18n.t('delivery_methods.owner.mine')
+            : i18n.t('delivery_methods.owner.marketplace')}
+        </Badge>
+      ),
+    },
+    {
+      key: 'storefront_visible',
+      label: i18n.t('delivery_methods.columns.visibility'),
+      default: true,
+      render: (method) => (
+        <Badge variant={method.storefront_visible ? 'default' : 'outline'}>
+          {method.storefront_visible
+            ? i18n.t('delivery_methods.visibility.storefront')
+            : i18n.t('delivery_methods.visibility.hidden')}
+        </Badge>
+      ),
+    },
+  ],
+})

package/src/tables/orders.tsx

@@ -0,0 +1,116 @@
+import { defineTable, formatStoreDateTime } from '@spree/dashboard-core'
+import { ResourceNameCell, StatusBadge } from '@spree/dashboard-ui'
+import { PackageIcon } from '@spree/dashboard-ui/icons'
+import type { Order } from '@spree/seller-sdk'
+import i18n from 'i18next'
+import { useStoreTimezone } from '../hooks/use-store-timezone'
+
+/**
+ * An order date in the marketplace's timezone.
+ *
+ * Its own component because a table definition is module-level and has no
+ * access to hooks, while `render` is called inside the table's JSX.
+ */
+function OrderDate({ iso }: { iso: string }) {
+  const timezone = useStoreTimezone()
+
+  return <>{formatStoreDateTime(iso, timezone)}</>
+}
+
+/** Mirrors the operator dashboard's order status vocabularies. */
+const FULFILLMENT_STATUSES = [
+  'unfulfilled',
+  'backorder',
+  'partial',
+  'fulfilled',
+  'delivered',
+  'canceled',
+] as const
+const PAYMENT_STATUSES = [
+  'none',
+  'authorized',
+  'partially_paid',
+  'paid',
+  'partially_refunded',
+  'refunded',
+  'overcharged',
+  'voided',
+] as const
+
+defineTable<Order>('seller-orders', {
+  title: i18n.t('orders.title'),
+  searchParam: 'number_cont',
+  searchPlaceholder: i18n.t('orders.search_placeholder'),
+  defaultSort: { field: 'completed_at', direction: 'desc' },
+  emptyIcon: <PackageIcon className="size-8 text-muted-foreground" />,
+  emptyMessage: i18n.t('orders.empty'),
+  columns: [
+    {
+      key: 'number',
+      label: i18n.t('orders.columns.number'),
+      sortable: true,
+      default: true,
+      render: (order) => (
+        <ResourceNameCell id={order.id} dataAttr="data-order-id" name={order.number} />
+      ),
+    },
+    {
+      key: 'completed_at',
+      label: i18n.t('orders.columns.placed'),
+      sortable: true,
+      filterable: true,
+      filterType: 'date',
+      quickFilter: true,
+      default: true,
+      render: (order) => (order.completed_at ? <OrderDate iso={order.completed_at} /> : '—'),
+    },
+    {
+      key: 'fulfillment_status',
+      label: i18n.t('orders.columns.fulfillment'),
+      filterable: true,
+      filterType: 'enum',
+      filterOptions: FULFILLMENT_STATUSES.map((status) => ({
+        value: status,
+        label: i18n.t(`orders.fulfillment_statuses.${status}`),
+      })),
+      quickFilter: true,
+      default: true,
+      render: (order) =>
+        order.fulfillment_status ? (
+          <StatusBadge
+            status={order.fulfillment_status}
+            label={i18n.t(`orders.fulfillment_statuses.${order.fulfillment_status}`)}
+          />
+        ) : (
+          '—'
+        ),
+    },
+    {
+      key: 'payment_status',
+      label: i18n.t('orders.columns.payment'),
+      filterable: true,
+      filterType: 'enum',
+      filterOptions: PAYMENT_STATUSES.map((status) => ({
+        value: status,
+        label: i18n.t(`orders.payment_statuses.${status}`),
+      })),
+      quickFilter: true,
+      default: true,
+      render: (order) =>
+        order.payment_status ? (
+          <StatusBadge
+            status={order.payment_status}
+            label={i18n.t(`orders.payment_statuses.${order.payment_status}`)}
+          />
+        ) : (
+          '—'
+        ),
+    },
+    {
+      key: 'total',
+      label: i18n.t('orders.columns.total'),
+      default: true,
+      render: (order) => order.display_total as string,
+    },
+  ],
+})