@spree/seller-dashboard 1.0.0-beta.1

package/src/tables/payouts.tsx

@@ -0,0 +1,87 @@
+import { defineTable, formatStoreDateTime } from '@spree/dashboard-core'
+import { ResourceNameCell, StatusBadge } from '@spree/dashboard-ui'
+import { HandCoinsIcon } from '@spree/dashboard-ui/icons'
+import type { Payout } from '@spree/seller-sdk'
+import i18n from 'i18next'
+import { useStoreTimezone } from '../hooks/use-store-timezone'
+
+/**
+ * A ledger row's 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 — so a
+ * cell may use them like any other component.
+ */
+function LedgerDate({ iso }: { iso: string }) {
+  const timezone = useStoreTimezone()
+
+  return <>{formatStoreDateTime(iso, timezone)}</>
+}
+
+const STATUSES = ['pending', 'processing', 'completed', 'failed', 'unresolved'] as const
+
+defineTable<Payout>('seller-payouts', {
+  title: i18n.t('payouts.title'),
+  searchParam: 'reference_cont',
+  searchPlaceholder: i18n.t('payouts.search_placeholder'),
+  defaultSort: { field: 'created_at', direction: 'desc' },
+  emptyIcon: <HandCoinsIcon className="size-8 text-muted-foreground" />,
+  emptyMessage: i18n.t('payouts.empty'),
+  columns: [
+    {
+      key: 'created_at',
+      label: i18n.t('payouts.columns.date'),
+      sortable: true,
+      filterable: true,
+      filterType: 'date',
+      quickFilter: true,
+      default: true,
+      render: (payout) => (
+        <ResourceNameCell
+          id={payout.id}
+          dataAttr="data-payout-id"
+          name={<LedgerDate iso={payout.created_at} />}
+        />
+      ),
+    },
+    {
+      key: 'status',
+      label: i18n.t('payouts.columns.status'),
+      sortable: true,
+      filterable: true,
+      filterType: 'enum',
+      filterOptions: STATUSES.map((status) => ({
+        value: status,
+        label: i18n.t(`earnings.statuses.${status}`),
+      })),
+      quickFilter: true,
+      default: true,
+      render: (payout) => (
+        <StatusBadge
+          status={payout.status}
+          label={i18n.t(`earnings.statuses.${payout.status}`, { defaultValue: payout.status })}
+        />
+      ),
+    },
+    {
+      key: 'transfers_count',
+      label: i18n.t('payouts.columns.earnings'),
+      default: true,
+      render: (payout) => payout.transfers_count,
+    },
+    {
+      key: 'reference',
+      label: i18n.t('payouts.columns.reference'),
+      default: true,
+      render: (payout) => payout.reference ?? '—',
+    },
+    {
+      key: 'amount',
+      label: i18n.t('payouts.columns.amount'),
+      sortable: true,
+      default: true,
+      className: 'text-right tabular-nums',
+      render: (payout) => payout.display_amount,
+    },
+  ],
+})

package/src/tables/policies.tsx

@@ -0,0 +1,37 @@
+import { defineTable } from '@spree/dashboard-core'
+import { RelativeTime, ResourceNameCell } from '@spree/dashboard-ui'
+import { ScrollTextIcon } from '@spree/dashboard-ui/icons'
+import type { Policy } from '@spree/seller-sdk'
+import i18n from 'i18next'
+
+defineTable<Policy>('seller-policies', {
+  title: i18n.t('policies.title'),
+  searchParam: 'name_cont',
+  searchPlaceholder: i18n.t('policies.search_placeholder'),
+  defaultSort: { field: 'name', direction: 'asc' },
+  emptyIcon: <ScrollTextIcon className="size-8 text-muted-foreground" />,
+  emptyMessage: i18n.t('policies.empty.title'),
+  columns: [
+    {
+      key: 'name',
+      label: i18n.t('policies.columns.name'),
+      sortable: true,
+      default: true,
+      render: (policy) => (
+        <ResourceNameCell
+          id={policy.id}
+          dataAttr="data-policy-id"
+          name={policy.name}
+          secondary={policy.slug}
+        />
+      ),
+    },
+    {
+      key: 'updated_at',
+      label: i18n.t('policies.columns.updated'),
+      sortable: true,
+      default: true,
+      render: (policy) => <RelativeTime iso={policy.updated_at} />,
+    },
+  ],
+})

package/src/tables/products.tsx

@@ -0,0 +1,56 @@
+import { defineTable } from '@spree/dashboard-core'
+import { ResourceNameCell, StatusBadge, Thumbnail } from '@spree/dashboard-ui'
+import { PackageIcon } from '@spree/dashboard-ui/icons'
+import type { Product } from '@spree/seller-sdk'
+import i18n from 'i18next'
+
+/** Mirrors the operator dashboard's product statuses. */
+const PRODUCT_STATUSES = ['active', 'draft', 'proposed', 'rejected', 'archived'] as const
+
+defineTable<Product>('seller-products', {
+  title: i18n.t('products.title'),
+  searchParam: 'name_cont',
+  searchPlaceholder: i18n.t('products.search_placeholder'),
+  defaultSort: { field: 'created_at', direction: 'desc' },
+  emptyIcon: <PackageIcon className="size-8 text-muted-foreground" />,
+  emptyMessage: i18n.t('products.empty'),
+  columns: [
+    {
+      key: 'name',
+      label: i18n.t('products.columns.name'),
+      sortable: true,
+      default: true,
+      render: (product) => (
+        <div className="flex items-center gap-3">
+          <Thumbnail src={product.thumbnail_url} alt={product.name} />
+          <ResourceNameCell id={product.id} dataAttr="data-product-id" name={product.name} />
+        </div>
+      ),
+    },
+    {
+      key: 'status',
+      label: i18n.t('products.columns.status'),
+      sortable: true,
+      filterable: true,
+      filterType: 'enum',
+      filterOptions: PRODUCT_STATUSES.map((status) => ({
+        value: status,
+        label: i18n.t(`products.statuses.${status}`),
+      })),
+      quickFilter: true,
+      default: true,
+      render: (product) => (
+        <StatusBadge
+          status={product.status}
+          label={i18n.t(`products.statuses.${product.status}`)}
+        />
+      ),
+    },
+    {
+      key: 'price',
+      label: i18n.t('products.columns.price'),
+      default: true,
+      render: (product) => product.price?.display_amount ?? '—',
+    },
+  ],
+})

package/src/tables/transfers.tsx

@@ -0,0 +1,118 @@
+import { defineTable, formatStoreDateTime, useTenantId } from '@spree/dashboard-core'
+import { StatusBadge } from '@spree/dashboard-ui'
+import { BanknoteIcon } from '@spree/dashboard-ui/icons'
+import type { Transfer } from '@spree/seller-sdk'
+import { Link } from '@tanstack/react-router'
+import i18n from 'i18next'
+import { useStoreTimezone } from '../hooks/use-store-timezone'
+
+/**
+ * The sale behind an earning — what a seller checking a figure wants next.
+ *
+ * Its own component because a table definition is module-level and holds no
+ * router context, while the link needs the seller whose panel this is. That
+ * is what `useTenantId` answers, and a cell is rendered inside React like any
+ * other component.
+ */
+function OrderCell({ transfer }: { transfer: Transfer }) {
+  const sellerId = useTenantId()
+
+  if (!transfer.order_id) return <>—</>
+
+  return (
+    <Link
+      to="/$sellerId/orders/$orderId"
+      params={{ sellerId, orderId: transfer.order_id }}
+      className="no-underline"
+    >
+      {transfer.order_number ?? transfer.order_id}
+    </Link>
+  )
+}
+
+/**
+ * A ledger row's 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 — so a
+ * cell may use them like any other component.
+ */
+function LedgerDate({ iso }: { iso: string }) {
+  const timezone = useStoreTimezone()
+
+  return <>{formatStoreDateTime(iso, timezone)}</>
+}
+
+const STATUSES = ['pending', 'processing', 'completed', 'failed', 'unresolved'] as const
+const KINDS = ['earning', 'refund_reversal'] as const
+
+defineTable<Transfer>('seller-transfers', {
+  title: i18n.t('earnings.transfers.title'),
+  // Without this the toolbar sends `name_cont`, which the ledger does not
+  // whitelist — Ransack drops an unknown condition, so the box would look
+  // like it worked and return everything.
+  searchParam: 'reference_cont',
+  searchPlaceholder: i18n.t('earnings.search_placeholder'),
+  defaultSort: { field: 'created_at', direction: 'desc' },
+  emptyIcon: <BanknoteIcon className="size-8 text-muted-foreground" />,
+  emptyMessage: i18n.t('earnings.transfers.empty'),
+  columns: [
+    {
+      key: 'created_at',
+      label: i18n.t('earnings.columns.date'),
+      sortable: true,
+      filterable: true,
+      filterType: 'date',
+      quickFilter: true,
+      default: true,
+      render: (transfer) => <LedgerDate iso={transfer.created_at} />,
+    },
+    {
+      key: 'order_number',
+      label: i18n.t('earnings.columns.order'),
+      default: true,
+      render: (transfer) => <OrderCell transfer={transfer} />,
+    },
+    {
+      key: 'kind',
+      label: i18n.t('earnings.columns.kind'),
+      filterable: true,
+      filterType: 'enum',
+      filterOptions: KINDS.map((kind) => ({
+        value: kind,
+        label: i18n.t(`earnings.kinds.${kind}`),
+      })),
+      quickFilter: true,
+      default: true,
+      render: (transfer) =>
+        i18n.t(`earnings.kinds.${transfer.kind}`, { defaultValue: transfer.kind }),
+    },
+    {
+      key: 'status',
+      label: i18n.t('earnings.columns.status'),
+      sortable: true,
+      filterable: true,
+      filterType: 'enum',
+      filterOptions: STATUSES.map((status) => ({
+        value: status,
+        label: i18n.t(`earnings.statuses.${status}`),
+      })),
+      quickFilter: true,
+      default: true,
+      render: (transfer) => (
+        <StatusBadge
+          status={transfer.status}
+          label={i18n.t(`earnings.statuses.${transfer.status}`, { defaultValue: transfer.status })}
+        />
+      ),
+    },
+    {
+      key: 'amount',
+      label: i18n.t('earnings.columns.amount'),
+      sortable: true,
+      default: true,
+      className: 'text-right tabular-nums',
+      render: (transfer) => transfer.display_amount,
+    },
+  ],
+})

package/src/vite/index.ts

@@ -0,0 +1,87 @@
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import {
+  type SpreeDashboardPluginOptions as CoreOptions,
+  spreeDashboardPlugin as spreeDashboardCorePlugin,
+} from '@spree/dashboard-core/vite'
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
+import { index, layout, physical, rootRoute, route } from '@tanstack/virtual-file-routes'
+import type { PluginOption } from 'vite'
+
+export interface SpreeSellerDashboardPluginOptions extends CoreOptions {
+  /**
+   * Where the composed route tree is generated, relative to the host root.
+   * Commit this file: it regenerates on every dev start/build, and its diff
+   * on a `@spree/seller-dashboard` upgrade shows exactly which pages the
+   * upgrade added or moved.
+   */
+  generatedRouteTree?: string
+  /**
+   * Host project root. Defaults to `process.cwd()` — correct when Vite runs
+   * from the package directory, which is how the starter operates.
+   */
+  root?: string
+}
+
+/**
+ * Vite integration for the seller panel.
+ *
+ * The Tailwind and plugin-discovery half comes from `@spree/dashboard-core`
+ * unchanged — neither is admin-specific. Only the route skeleton differs,
+ * because a seller's panel is scoped by seller where the operator's is scoped
+ * by store.
+ */
+export function spreeSellerDashboardPlugin(
+  options: SpreeSellerDashboardPluginOptions = {},
+): PluginOption[] {
+  const hostRoot = options.root ?? process.cwd()
+  return [
+    // This shell is always scanned, whatever the host passes. Core defaults to
+    // the operator's dashboard, which a seller's host does not install — and a
+    // host naming its own shell is adding one, not replacing the panel whose
+    // components it renders. Overwriting instead of merging drops the panel's
+    // classes from the production CSS, and only in a built bundle.
+    ...spreeDashboardCorePlugin({
+      ...options,
+      shellPackages: ['@spree/seller-dashboard', ...(options.shellPackages ?? [])],
+    }),
+    sellerRouterPlugin(hostRoot, options),
+  ]
+}
+
+/**
+ * The TanStack Router generator, configured with a virtual route config
+ * mirroring the panel's layout skeleton: public sign-in, then an
+ * authenticated branch whose pages all hang off a seller.
+ */
+function sellerRouterPlugin(hostRoot: string, options: SpreeSellerDashboardPluginOptions) {
+  const fromHost = createRequire(path.join(hostRoot, 'package.json'))
+  // Resolve the shell's routes directory from wherever the host's
+  // `@spree/seller-dashboard` lives (workspace symlink or npm install). The
+  // `.` export maps to a file in src/, so `routes/` is its sibling.
+  const shellEntry = fromHost.resolve('@spree/seller-dashboard')
+  const shellRoutesDir = path.join(path.dirname(shellEntry), 'routes')
+
+  const virtualRouteConfig = rootRoute('__root.tsx', [
+    route('/login', 'login.tsx'),
+    route('/forgot-password', 'forgot-password.tsx'),
+    route('/reset-password', 'reset-password.tsx'),
+    route('/accept-invitation/$invitationId', 'accept-invitation.$invitationId.tsx'),
+    layout('_authenticated.tsx', [
+      index('_authenticated/index.tsx'),
+      route('/$sellerId', '_authenticated/$sellerId.tsx', [
+        physical('', '_authenticated/$sellerId'),
+      ]),
+    ]),
+  ])
+
+  return TanStackRouterVite({
+    target: 'react',
+    virtualRouteConfig,
+    routesDirectory: shellRoutesDir,
+    generatedRouteTree: path.resolve(
+      hostRoot,
+      options.generatedRouteTree ?? 'src/routeTree.gen.ts',
+    ),
+  })
+}