@spree/dashboard-ui 0.13.1 → 1.0.0-beta.1

package/src/spree/address-map.tsx

@@ -0,0 +1,62 @@
+import { lazy, Suspense } from 'react'
+import { useTranslation } from 'react-i18next'
+
+/**
+ * Structural shape `<AddressMap>` needs. Declared here rather than imported
+ * so the design system stays decoupled from any SDK's `Address` type — the
+ * same reason `<AddressBlock>` carries its own.
+ */
+export interface AddressMapValue {
+  latitude?: number | null
+  longitude?: number | null
+}
+
+// MapLibre and its styles are a few megabytes for a map that appears on one
+// card of a page, so it is loaded on demand and every other screen is spared.
+const LazyMap = lazy(async () => ({ default: (await import('../ui/map')).Map }))
+const LazyMapControls = lazy(async () => ({ default: (await import('../ui/map')).MapControls }))
+const LazyMapMarker = lazy(async () => ({ default: (await import('../ui/map')).MapMarker }))
+const LazyMarkerContent = lazy(async () => ({ default: (await import('../ui/map')).MarkerContent }))
+const LazyMarkerTooltip = lazy(async () => ({ default: (await import('../ui/map')).MarkerTooltip }))
+
+/**
+ * Where an address actually is, beside the lines that describe it — a returns
+ * address is what shoppers are told to post to, so it is worth seeing on a map
+ * rather than trusting as typed.
+ *
+ * Coordinates are geocoded in the background after an address is saved, so a
+ * freshly entered one has none yet; the map is simply absent until then rather
+ * than showing the middle of the ocean.
+ */
+export function AddressMap({
+  address,
+  label,
+  className,
+}: {
+  address: AddressMapValue
+  /** Names whose address the pin marks — a seller, a customer, a branch. */
+  label?: string
+  className?: string
+}) {
+  const { t } = useTranslation()
+  const { latitude, longitude } = address
+
+  if (latitude == null || longitude == null) {
+    return <p className="text-muted-foreground text-xs">{t('admin.address.not_located_yet')}</p>
+  }
+
+  return (
+    <div className={className ?? 'h-40 overflow-hidden rounded-md border'}>
+      <Suspense fallback={<div className="size-full animate-pulse bg-muted" />}>
+        <LazyMap center={[longitude, latitude]} zoom={13}>
+          <LazyMapControls />
+          <LazyMapMarker longitude={longitude} latitude={latitude}>
+            {/* The default pin; the tooltip names whose address it is. */}
+            <LazyMarkerContent />
+            {label && <LazyMarkerTooltip>{label}</LazyMarkerTooltip>}
+          </LazyMapMarker>
+        </LazyMap>
+      </Suspense>
+    </div>
+  )
+}

package/src/spree/back-button.tsx

@@ -1,11 +1,12 @@
 import { useParams, useRouter } from '@tanstack/react-router'
-import { ArrowLeftIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { ArrowLeftIcon } from './icons'
 
 interface BackButtonProps {
   /**
-   * Fallback path segment under the current store when there is no history to go back to.
-   * Example: "products" → navigates to `/$storeId/products`
+   * Fallback path segment under the current tenant when there is no history to
+   * go back to. Example: "products" → navigates to `/$storeId/products` in the
+   * operator's dashboard, `/$sellerId/products` in a seller's panel.
    */
   fallback: string
   className?: string
@@ -13,22 +14,26 @@ interface BackButtonProps {
 
 /**
  * Back button that goes to the previous page in history (preserving that page's
- * state — filters, column selection, etc.), falling back to `/$storeId/{fallback}`
- * when there's nothing to go back to (e.g. deep-link, new tab).
+ * state — filters, column selection, etc.), falling back to the tenant's list
+ * page when there's nothing to go back to (e.g. deep-link, new tab).
  */
 export function BackButton({ fallback, className }: BackButtonProps) {
   const { t } = useTranslation()
   const router = useRouter()
-  const { storeId } = useParams({ strict: false }) as { storeId?: string }
+  // Whichever tenant this panel routes under. Reading `storeId` alone sent a
+  // seller to `/undefined/...`, since their routes are keyed `$sellerId` —
+  // this component is shared, so it cannot assume the operator's param name.
+  const params = useParams({ strict: false }) as { storeId?: string; sellerId?: string }
+  const tenantId = params.storeId ?? params.sellerId
 
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault()
     // If there's history within the app, go back to preserve previous state
     if (window.history.length > 1 && document.referrer.includes(window.location.host)) {
       router.history.back()
-    } else {
+    } else if (tenantId) {
       // Fallback to the list page
-      router.navigate({ to: `/${storeId}/${fallback}` as string })
+      router.navigate({ to: `/${tenantId}/${fallback}` as string })
     }
   }
 
@@ -38,7 +43,7 @@ export function BackButton({ fallback, className }: BackButtonProps) {
       onClick={handleClick}
       className={
         className ??
-        'inline-flex items-center justify-center rounded-lg p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors'
+        'inline-flex items-center justify-center rounded-lg p-1.5 text-muted-foreground bg-transparent hover:bg-accent hover:text-foreground transition-colors'
       }
       aria-label={t('admin.actions.back')}
     >

package/src/spree/bulk-dialog.tsx

@@ -57,10 +57,10 @@ export function BulkDialog({
             <FieldGroup>{children}</FieldGroup>
           </DialogBody>
           <DialogFooter>
-            <Button type="button" variant="outline" size="sm" onClick={onCancel}>
+            <Button type="button" variant="outline" onClick={onCancel}>
               {t('admin.actions.cancel')}
             </Button>
-            <Button type="submit" size="sm" disabled={submitDisabled}>
+            <Button type="submit" disabled={submitDisabled}>
               {submitLabel}
             </Button>
           </DialogFooter>

package/src/spree/bulk-price-table.tsx

@@ -1,14 +1,20 @@
 import type { ColumnDef } from '@tanstack/react-table'
+import { PlusIcon, XIcon } from 'lucide-react'
 import { useMemo } from 'react'
 import { Button } from '../ui/button'
-import { Input } from '../ui/input'
-import { DataGrid, editableRowIndex, MoneyCell, ReadOnlyCell } from './data-grid'
+import { DataGrid, DecimalCell, editableRowIndex, MoneyCell, ReadOnlyCell } from './data-grid'
+import { SearchInput } from './search-input'
 
 export interface BulkPriceRow {
   // Unique row id. For header rows use a synthetic key (e.g. `header:<groupId>`);
   // the table renders headers via `renderSectionHeader` without an editable cell.
   id: string
-  kind: 'header' | 'item'
+  // `tier` rows are a variant's quantity breaks. They are editable rows like
+  // any other, so Tab and the arrow keys flow through them rather than
+  // stopping at the variant. The last one is always blank and waiting — a
+  // ladder is grown by typing in it, not by asking for a row first
+  // (docs/plans/6.0-volume-pricing.md).
+  kind: 'header' | 'item' | 'tier'
   // Header rows: the section title (typically the product name).
   groupLabel?: string
   // Item rows.
@@ -18,6 +24,11 @@ export interface BulkPriceRow {
   // user input or the API's canonical decimal. The table passes them through.
   amount?: string | null
   compareAt?: string | null
+  // On a `tier` row: the quantity it applies from, as typed.
+  minQuantity?: string
+  // The trailing blank row a variant always carries. It commits to a real
+  // break the moment it holds a quantity and a price.
+  blank?: boolean
 }
 
 export interface BulkPriceTableLabels {
@@ -33,6 +44,8 @@ export interface BulkPriceTableLabels {
   variantDefault: string
   /** Placeholder text for the search input. Omit to hide the search input. */
   searchPlaceholder?: string
+  /** Accessible name for the search field's clear button. */
+  clearSearch?: string
   /** A short message shown above the grid summarising the matching row count. */
   countSummary?: string
   /** Shown when the loading flag is set. */
@@ -53,6 +66,14 @@ export interface BulkPriceTableLabels {
   priceAriaTemplate?: string
   /** Aria-label template for the compare-at input. `{label}` is replaced with the variant label. */
   compareAtAriaTemplate?: string
+  /** Column header over the quantity column. Omit to hide the column. */
+  tierFrom?: string
+  /** The "add a break" row's label. */
+  tierAdd?: string
+  /** Accessible name for a tier row's remove button. */
+  tierRemove?: string
+  /** Accessible name for a tier row's quantity input. */
+  tierQuantity?: string
 }
 
 export interface BulkPriceTableProps {
@@ -65,6 +86,12 @@ export interface BulkPriceTableProps {
   labels: BulkPriceTableLabels
   /** Called when the user commits a value to a cell. The id is the row id. */
   onChange: (rowId: string, field: 'amount' | 'compareAt', value: string | null) => void
+  /** Edits a tier row's quantity. */
+  onTierQuantityChange?: (rowId: string, value: string) => void
+  /** Appends a break to the variant the `tier-add` row belongs to. */
+  onTierAdd?: (rowId: string) => void
+  /** Removes a tier row. */
+  onTierRemove?: (rowId: string) => void
 
   // Optional state for the toolbar + pagination footer. Omitting all of these
   // hides the toolbar/pagination entirely (use for in-memory single-page lists).
@@ -89,6 +116,9 @@ export function BulkPriceTable({
   decimal,
   labels,
   onChange,
+  onTierQuantityChange,
+  onTierAdd,
+  onTierRemove,
   search,
   onSearchChange,
   page,
@@ -103,6 +133,11 @@ export function BulkPriceTable({
         header: labels.variant,
         cell: ({ row }) => {
           const r = row.original
+
+          // A break belongs to the variant above it, so it says nothing here
+          // — the indent and the quantity column carry the relationship.
+          if (r.kind === 'tier') return null
+
           if (r.kind !== 'item') return null
           return (
             <ReadOnlyCell className="text-muted-foreground">
@@ -124,14 +159,61 @@ export function BulkPriceTable({
           )
         },
       },
+      // The quantity a row's price applies from. A variant's own price is the
+      // ladder's first rung and always reads 1 — which is why this is a
+      // column rather than a panel: every price in the sheet has a quantity,
+      // and only the breaks have one worth typing
+      // (docs/plans/6.0-volume-pricing.md).
+      ...(labels.tierFrom
+        ? [
+            {
+              id: 'min_quantity',
+              header: () => <span className="block text-right">{labels.tierFrom}</span>,
+              cell: ({ row, table }) => {
+                const r = row.original
+                if (r.kind === 'item') {
+                  // justify-end, not text-right: ReadOnlyCell is a flex row,
+                  // so the quantity would otherwise sit left of every editable
+                  // quantity below it.
+                  return (
+                    <ReadOnlyCell className="justify-end text-muted-foreground tabular-nums">
+                      1
+                    </ReadOnlyCell>
+                  )
+                }
+
+                if (r.kind !== 'tier') return null
+
+                const coords = { row: editableRowIndex(table.getRowModel().rows, r.id), col: 2 }
+                return (
+                  // Decimal rather than number: a rung being typed has no
+                  // quantity yet, and a numeric cell would show that as 0 —
+                  // a value nobody chose and the server refuses.
+                  <DecimalCell
+                    coords={coords}
+                    value={r.minQuantity || null}
+                    onChange={(next) => onTierQuantityChange?.(r.id, next ?? '')}
+                    decimal={decimal}
+                    ariaLabel={labels.tierQuantity ?? labels.tierFrom ?? ''}
+                  />
+                )
+              },
+            } satisfies ColumnDef<BulkPriceRow>,
+          ]
+        : []),
       {
         id: 'amount',
         header: () => <span className="block text-right">{labels.price}</span>,
         cell: ({ row, table }) => {
           const r = row.original
-          if (r.kind !== 'item') return null
-          const coords = { row: editableRowIndex(table.getRowModel().rows, row.id), col: 2 }
-          const label = r.variantLabel ?? labels.variantDefault
+          // A break's unit price sits in the price column, under the price it
+          // replaces from that quantity up.
+          if (r.kind !== 'item' && r.kind !== 'tier') return null
+          const coords = { row: editableRowIndex(table.getRowModel().rows, row.id), col: 3 }
+          const label =
+            r.kind === 'tier'
+              ? `${labels.tierFrom ?? ''} ${r.minQuantity ?? ''}`.trim()
+              : (r.variantLabel ?? labels.variantDefault)
           return (
             <MoneyCell
               coords={coords}
@@ -149,8 +231,10 @@ export function BulkPriceTable({
         header: () => <span className="block text-right">{labels.compareAt}</span>,
         cell: ({ row, table }) => {
           const r = row.original
+          // Variants only: a break is a contracted unit price, never a claim
+          // about a former one.
           if (r.kind !== 'item') return null
-          const coords = { row: editableRowIndex(table.getRowModel().rows, row.id), col: 3 }
+          const coords = { row: editableRowIndex(table.getRowModel().rows, row.id), col: 4 }
           const label = r.variantLabel ?? labels.variantDefault
           return (
             <MoneyCell
@@ -164,8 +248,49 @@ export function BulkPriceTable({
           )
         },
       },
+      // A break removes itself where it sits; the trailing blank row offers
+      // the plus that starts another. Both fill the cell, so the whole square
+      // is the target rather than a small glyph inside it.
+      ...(onTierRemove
+        ? [
+            {
+              id: 'tier_actions',
+              header: () => <span className="sr-only">{labels.tierRemove}</span>,
+              cell: ({ row }) => {
+                const r = row.original
+                if (r.kind !== 'tier') return null
+
+                if (r.blank) {
+                  return (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      aria-label={labels.tierAdd}
+                      className="size-full min-h-9 rounded-none text-muted-foreground"
+                      onClick={() => onTierAdd?.(r.id)}
+                    >
+                      <PlusIcon className="size-4" />
+                    </Button>
+                  )
+                }
+
+                return (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    aria-label={labels.tierRemove}
+                    className="size-full min-h-9 rounded-none text-muted-foreground"
+                    onClick={() => onTierRemove(r.id)}
+                  >
+                    <XIcon className="size-4" />
+                  </Button>
+                )
+              },
+            } satisfies ColumnDef<BulkPriceRow>,
+          ]
+        : []),
     ],
-    [symbol, decimal, onChange, labels],
+    [symbol, decimal, onChange, onTierQuantityChange, onTierAdd, onTierRemove, labels],
   )
 
   const showToolbar =
@@ -177,28 +302,34 @@ export function BulkPriceTable({
   const hasSearch = !!search && search.length > 0
 
   return (
+    // Padding lives on the toolbar and the pager, not on this wrapper: the
+    // grid between them should run to the container's edges, the way a
+    // table in a card does.
     <div className="flex h-full flex-col gap-3">
       {showToolbar && (
         // Always-mounted toolbar. Conditionally rendering the search input
         // would unmount it whenever a deferred query refetches into the
         // loading state, blurring the field mid-keystroke.
-        <div className="flex shrink-0 items-center justify-between gap-3">
+        <div className="flex shrink-0 items-center justify-between gap-3 px-3">
           {labels.countSummary !== undefined && (
             <p className="text-xs text-muted-foreground">{labels.countSummary}</p>
           )}
           {onSearchChange !== undefined && labels.searchPlaceholder !== undefined && (
-            <Input
-              type="search"
+            <SearchInput
               placeholder={labels.searchPlaceholder}
               value={search ?? ''}
-              onChange={(e) => onSearchChange(e.target.value)}
+              onValueChange={onSearchChange}
+              clearLabel={labels.clearSearch}
               className="h-9 max-w-sm"
             />
           )}
         </div>
       )}
 
-      <div className="min-h-0 flex-1 overflow-auto">
+      {/* No `overflow-auto` here: the grid inside owns its own scroller
+          (it needs one for the sticky header), and a second one around it
+          nests two scrollbars over the same content. */}
+      <div className="min-h-0 flex-1">
         {isLoading ? (
           <p className="text-sm text-muted-foreground">{labels.loading}</p>
         ) : isEmpty ? (
@@ -223,7 +354,7 @@ export function BulkPriceTable({
       </div>
 
       {showPagination && (
-        <div className="flex shrink-0 items-center justify-between gap-2 text-xs text-muted-foreground">
+        <div className="flex shrink-0 items-center justify-between gap-2 px-3 pb-3 text-xs text-muted-foreground">
           <span>
             {labels.pageOf.replace('{page}', String(page)).replace('{total}', String(totalPages))}
           </span>