@spree/dashboard-core 6.0.3 → 6.0.4

package/src/products/variants-options-builder.tsx

@@ -110,7 +110,12 @@ export function VariantsOptionsBuilder({ selected, onChange, extraOptionTypes }:
             const isEditing = expandedIndex === i
             if (isEditing && optionType) {
               return (
-                <li key={ot.id} className="rounded-lg border border-border-subtle p-3">
+                <Item
+                  variant="outline"
+                  render={<li />}
+                  key={ot.id}
+                  className="flex-col items-stretch border-border-subtle"
+                >
                   <OptionPicker
                     optionType={optionType}
                     initialValues={ot.values}
@@ -130,7 +135,7 @@ export function VariantsOptionsBuilder({ selected, onChange, extraOptionTypes }:
                       })
                     }
                   />
-                </li>
+                </Item>
               )
             }
             return (
@@ -157,7 +162,7 @@ export function VariantsOptionsBuilder({ selected, onChange, extraOptionTypes }:
                   </Button>
                   <Button
                     type="button"
-                    variant="ghost"
+                    variant="destructive-ghost"
                     size="icon-sm"
                     aria-label={t('admin.actions.remove')}
                     onClick={() => removeAt(i)}
@@ -172,14 +177,14 @@ export function VariantsOptionsBuilder({ selected, onChange, extraOptionTypes }:
       )}
 
       {isAdding ? (
-        <div className="rounded-lg border border-border-subtle p-3">
+        <Item variant="outline" className="flex-col items-stretch border-border-subtle">
           <AddOptionForm
             availableTypes={availableTypes}
             allOptionTypes={allOptionTypes}
             onCancel={() => setIsAdding(false)}
             onSave={(payload) => upsertAt(null, payload)}
           />
-        </div>
+        </Item>
       ) : (
         <div>
           <Button type="button" variant="outline" size="sm" onClick={() => setIsAdding(true)}>
@@ -373,7 +378,7 @@ function OptionPicker({ optionType, initialValues, onSave, onCancel }: OptionPic
   return (
     <div className="flex flex-col gap-3">
       <div className="flex items-center justify-between">
-        <div className="text-sm font-medium">{optionType.label}</div>
+        <div className="text-base font-medium">{optionType.label}</div>
       </div>
       <div className="flex flex-wrap gap-2">
         {available.map((v) => {
@@ -461,7 +466,7 @@ function CreateOptionTypeInline({
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="text-sm font-medium">
+      <div className="text-base font-medium">
         {t('admin.products.variants.create_option_type_title')}
       </div>
       <Field>
@@ -530,7 +535,7 @@ function CreateOptionValueInline({ onCancel, onCreate, isPending }: CreateOption
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="text-sm font-medium">{t('admin.products.variants.create_value_title')}</div>
+      <div className="text-base font-medium">{t('admin.products.variants.create_value_title')}</div>
       <Field>
         <FieldLabel htmlFor="new-option-value-label">
           {t('admin.fields.option_value.label.label')}

package/src/products/variants-section.tsx

@@ -33,12 +33,23 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from '@spree/dashboard-ui'
-import { PencilIcon, SwatchBookIcon, TriangleAlertIcon, XIcon } from '@spree/dashboard-ui/icons'
+import {
+  ImageIcon,
+  ImagePlusIcon,
+  PencilIcon,
+  SwatchBookIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from '@spree/dashboard-ui/icons'
 import { type CSSProperties, useEffect, useMemo, useState } from 'react'
 import { type UseFormReturn, useFieldArray, useWatch } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import type { PanelOptionType as OptionType } from '../api-client'
+import { MediaPickerDialog } from '../components/media-picker-dialog'
 import { BulkVariantsDialog } from './bulk-variants-dialog'
 import {
   useFormOptionTypes as useOptionTypes,
@@ -145,6 +156,7 @@ export function VariantsSection({ form, seedFromType = false, formKey = 'product
   })
 
   const [editingIndex, setEditingIndex] = useState<number | null>(null)
+  const [pickingImagesFor, setPickingImagesFor] = useState<number | null>(null)
   const [sheetOpen, setSheetOpen] = useState(false)
   const [bulkOpen, setBulkOpen] = useState(false)
   const [orphanedKeys, setOrphanedKeys] = useState<string[]>([])
@@ -407,7 +419,7 @@ export function VariantsSection({ form, seedFromType = false, formKey = 'product
                 items={fields.map((f) => f._key)}
                 strategy={verticalListSortingStrategy}
               >
-                <Table>
+                <Table roundedTop>
                   <TableHeader>
                     <TableRow>
                       {!isSimpleProduct && (
@@ -433,6 +445,7 @@ export function VariantsSection({ form, seedFromType = false, formKey = 'product
                         optionTypes={allOptionTypes}
                         onEdit={() => handleEditRow(index)}
                         onRemove={() => handleRowRemove(index)}
+                        onPickImages={() => setPickingImagesFor(index)}
                       />
                     ))}
                   </TableBody>
@@ -445,6 +458,15 @@ export function VariantsSection({ form, seedFromType = false, formKey = 'product
 
       <BulkVariantsDialog form={form} open={bulkOpen} onOpenChange={setBulkOpen} />
 
+      {pickingImagesFor !== null && (
+        <VariantImagesPicker
+          form={form}
+          variantIndex={pickingImagesFor}
+          optionTypes={allOptionTypes}
+          onClose={() => setPickingImagesFor(null)}
+        />
+      )}
+
       {editingIndex !== null && (
         <VariantEditSheet
           form={form}
@@ -470,6 +492,7 @@ interface SortableVariantRowProps {
   optionTypes: OptionType[]
   onEdit: () => void
   onRemove: () => void
+  onPickImages: () => void
 }
 
 function SortableVariantRow({
@@ -480,6 +503,7 @@ function SortableVariantRow({
   optionTypes,
   onEdit,
   onRemove,
+  onPickImages,
 }: SortableVariantRowProps) {
   const { t } = useTranslation()
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -510,7 +534,19 @@ function SortableVariantRow({
           <DragHandle attributes={attributes} listeners={listeners} />
         </TableCell>
       )}
-      <TableCell className="font-medium">{label}</TableCell>
+      <TableCell className="font-medium">
+        <div className="flex items-center gap-3">
+          {!isSimpleProduct && (
+            <VariantImageButton
+              form={form}
+              variantId={variant.id}
+              label={label}
+              onPick={onPickImages}
+            />
+          )}
+          {label}
+        </div>
+      </TableCell>
       <TableCell>
         <Input
           aria-label={t('admin.fields.variant.sku.label')}
@@ -532,7 +568,7 @@ function SortableVariantRow({
           {!isSimpleProduct && (
             <Button
               type="button"
-              variant="ghost"
+              variant="destructive-ghost"
               size="icon-sm"
               aria-label={t('admin.products.variants.remove_row_aria', { name: label })}
               onClick={onRemove}
@@ -545,3 +581,159 @@ function SortableVariantRow({
     </TableRow>
   )
 }
+
+type MediaRow = NonNullable<ProductFormValues['media']>[number]
+
+/** A media row's stable key: its id once saved, before that its upload's. */
+function mediaRowKey(media: MediaRow): string | null {
+  return media.id ?? media.signed_id ?? media.uploadId ?? null
+}
+
+/**
+ * A variant's image: its first assigned image (in gallery
+ * order) as a thumbnail, with a count when it has more, or an empty dashed
+ * square. Opens the picker of the product's images. An unsaved variant has no
+ * id to assign media to yet, so its square waits for the save.
+ */
+function VariantImageButton({
+  form,
+  variantId,
+  label,
+  onPick,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  form: UseFormReturn<ProductFormValues, any, any>
+  variantId?: string | null
+  label: string
+  onPick: () => void
+}) {
+  const { t } = useTranslation()
+  const media = useWatch({ control: form.control, name: 'media' }) ?? []
+  const assigned = variantId ? media.filter((m) => m.variant_ids?.includes(variantId)) : []
+  const first = assigned[0]
+  const preview = first?.previewUrl ?? null
+
+  const button = (
+    <button
+      type="button"
+      // `aria-disabled` rather than `disabled`: a disabled button gets no
+      // pointer events, so the tooltip saying why could never open.
+      onClick={variantId ? onPick : undefined}
+      aria-disabled={!variantId || undefined}
+      aria-label={t('admin.products.variants.images_aria', { name: label })}
+      className={cn(
+        'relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-card text-muted-foreground transition-colors hover:text-foreground focus-visible:shadow-field-focus aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:text-muted-foreground',
+        first ? 'border border-border-card' : 'border border-border border-dashed',
+      )}
+    >
+      {preview ? (
+        <img src={preview} alt="" className="size-full object-cover" />
+      ) : first ? (
+        <ImageIcon className="size-4" />
+      ) : (
+        <ImagePlusIcon className="size-4" />
+      )}
+      {assigned.length > 1 && (
+        <span className="absolute right-0.5 bottom-0.5 rounded bg-black/60 px-1 text-[10px] text-white tabular-nums leading-4">
+          +{assigned.length - 1}
+        </span>
+      )}
+    </button>
+  )
+
+  if (variantId) return button
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent>{t('admin.products.variants.images_unsaved')}</TooltipContent>
+    </Tooltip>
+  )
+}
+
+/**
+ * The media picker over this product's own images, with the variant's
+ * current ones ticked. Done applies exactly the ticked set — the same
+ * many-to-many assignment the media editor's variant pills make, seen from
+ * the variant's side — and, like every product edit, saves with the product.
+ */
+function VariantImagesPicker({
+  form,
+  variantIndex,
+  optionTypes,
+  onClose,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  form: UseFormReturn<ProductFormValues, any, any>
+  variantIndex: number
+  optionTypes: OptionType[]
+  onClose: () => void
+}) {
+  const { t } = useTranslation()
+  const variant = form.getValues(`variants.${variantIndex}`)
+  const variantId = variant?.id
+  if (!variant || !variantId) return null
+
+  const label = variantDisplayLabel(
+    variant,
+    t('admin.products.variants.default_variant'),
+    optionTypes,
+  )
+  const rows = form.getValues('media') ?? []
+  const options = rows.flatMap((m) => {
+    const key = mediaRowKey(m)
+    if (!key) return []
+    return [
+      {
+        id: key,
+        alt: m.alt,
+        filename: m.filename,
+        media_type: m.media_type,
+        small_url: m.previewUrl ?? null,
+      },
+    ]
+  })
+  const assigned = new Set(
+    rows.filter((m) => m.variant_ids?.includes(variantId)).flatMap((m) => mediaRowKey(m) ?? []),
+  )
+  const initialSelection = options.filter((option) => assigned.has(option.id))
+
+  return (
+    <MediaPickerDialog
+      open
+      onOpenChange={(open) => !open && onClose()}
+      // Keyed on the files and their alt text, so a file added or renamed
+      // since the last opening shows up rather than a cached copy.
+      queryKey={`variant-images-${variantId}-${options.map((o) => `${o.id}:${o.alt ?? ''}`).join(',')}`}
+      // Local, so the list is the form's — including files added this session.
+      search={async (query) => ({
+        data: query
+          ? options.filter((o) =>
+              `${o.alt ?? ''} ${o.filename ?? ''}`.toLowerCase().includes(query.toLowerCase()),
+            )
+          : options,
+      })}
+      initialSelection={initialSelection}
+      allowEmptyConfirm
+      browseControls={false}
+      // Listed in the Media card's order, so the first ticked is the one the
+      // variant row shows; the badge says which, live.
+      firstSelectedBadge={t('admin.products.variants.thumbnail_badge')}
+      title={t('admin.products.variants.images_title', { name: label })}
+      description={t('admin.products.variants.images_description')}
+      confirmLabel={t('admin.actions.done')}
+      onConfirm={(picked) => {
+        const ticked = new Set(picked.map((media) => media.id))
+        const next = (form.getValues('media') ?? []).map((m) => {
+          const ids = new Set(m.variant_ids ?? [])
+          const key = mediaRowKey(m)
+          if (key && ticked.has(key)) ids.add(variantId)
+          else ids.delete(variantId)
+          return { ...m, variant_ids: [...ids] }
+        })
+        form.setValue('media', next, { shouldDirty: true })
+        onClose()
+      }}
+    />
+  )
+}

package/src/providers/auth-provider.tsx

@@ -7,6 +7,7 @@ import type {
 } from '@spree/admin-sdk'
 import { createContext, type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { getApiClient, type PanelSession } from '../api-client'
+import { clearDeveloperInspector } from '../lib/developer-inspector'
 import { ADMIN_LOCALE_STORAGE_KEY, sessionLocale, switchLocale } from '../lib/i18n'
 import { queryClient } from '../lib/query-client'
 
@@ -122,6 +123,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     // landed. Server-side authorization is unaffected either way; this is about
     // not showing one principal what another may do.
     queryClient.clear()
+    clearDeveloperInspector()
     setToken(null)
     setUser(null)
     clearRefreshTimer()

package/src/providers/developer-inspector-provider.tsx

@@ -0,0 +1,145 @@
+import { toastManager } from '@spree/dashboard-ui'
+import { useHotkey } from '@tanstack/react-hotkeys'
+import {
+  createContext,
+  lazy,
+  type ReactNode,
+  Suspense,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  getDeveloperInspectorEntries,
+  subscribeDeveloperInspector,
+} from '../lib/developer-inspector'
+
+// Developer-only, so the drawer and its JSON viewer ship in their own chunk,
+// fetched the first time an admin opens it.
+const DeveloperInspectorDrawer = lazy(() =>
+  import('../components/developer-inspector-drawer').then((m) => ({
+    default: m.DeveloperInspectorDrawer,
+  })),
+)
+
+export const DEVELOPER_INSPECTOR_HOTKEY = 'Mod+Shift+D'
+
+interface DeveloperInspectorState {
+  open: boolean
+  setOpen: (open: boolean) => void
+  /** Opens the panel's feedback dialog, when it has one; `'bug'` opens it on a bug report. */
+  sendFeedback?: (kind?: 'bug') => void
+}
+
+const DeveloperInspectorContext = createContext<DeveloperInspectorState | null>(null)
+
+/**
+ * The developer inspector: the admin client's recent requests in a bottom
+ * drawer, for debugging an integration or filing an issue. Opened from the
+ * account menu or the keyboard shortcut.
+ *
+ * Records only what `adminClient` sends, so a panel built on another client
+ * mounts it to no effect.
+ */
+export function DeveloperInspectorProvider({
+  children,
+  systemInfoPath,
+  onSendFeedback,
+}: {
+  children: ReactNode
+  /**
+   * Offered in the account menu, the drawer and on a server error, when the
+   * panel takes feedback.
+   */
+  onSendFeedback?: (kind?: 'bug') => void
+  /** Linked from the drawer header, when the panel has a system info page. */
+  systemInfoPath?: string
+}) {
+  const [open, setOpen] = useState(false)
+  // Latches on first open so the lazy chunk loads only for admins who use it,
+  // and the drawer keeps its state between openings.
+  const [mounted, setMounted] = useState(false)
+
+  const value = useMemo<DeveloperInspectorState>(
+    () => ({
+      open,
+      setOpen: (next) => {
+        if (next) setMounted(true)
+        setOpen(next)
+      },
+      sendFeedback: onSendFeedback,
+    }),
+    [open, onSendFeedback],
+  )
+
+  useServerErrorToast(onSendFeedback)
+
+  useHotkey(DEVELOPER_INSPECTOR_HOTKEY, () => value.setOpen(!open))
+
+  return (
+    <DeveloperInspectorContext.Provider value={value}>
+      {children}
+      {mounted && (
+        <Suspense fallback={null}>
+          <DeveloperInspectorDrawer
+            open={value.open}
+            onOpenChange={value.setOpen}
+            systemInfoPath={systemInfoPath}
+          />
+        </Suspense>
+      )}
+    </DeveloperInspectorContext.Provider>
+  )
+}
+
+// One toast for a burst of failures: a failed query is retried, and a page
+// often fires several requests that fail for the same reason.
+const SERVER_ERROR_TOAST_INTERVAL_MS = 10_000
+
+/**
+ * Offers to report a bug when the Admin API answers with a 5xx: that is a
+ * bug in Spree or the installation, not something the admin did wrong.
+ */
+function useServerErrorToast(sendFeedback?: (kind?: 'bug') => void) {
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (!sendFeedback) return
+    let seen = getDeveloperInspectorEntries()[0]?.id ?? 0
+    let toastedAt = 0
+
+    return subscribeDeveloperInspector(() => {
+      const entries = getDeveloperInspectorEntries()
+      const fresh = entries.filter((entry) => entry.id > seen)
+      seen = entries[0]?.id ?? seen
+      const failure = fresh.find((entry) => entry.status !== null && entry.status >= 500)
+      if (!failure || Date.now() - toastedAt < SERVER_ERROR_TOAST_INTERVAL_MS) return
+
+      toastedAt = Date.now()
+      toastManager.add({
+        type: 'error',
+        title: t('admin.components.server_error.title'),
+        description: failure.requestId
+          ? t('admin.components.server_error.request_id', { id: failure.requestId })
+          : undefined,
+        actionProps: {
+          children: t('admin.components.server_error.report'),
+          onClick: () => sendFeedback('bug'),
+        },
+      })
+    })
+  }, [sendFeedback, t])
+}
+
+/** The inspector's state when a provider is mounted, `null` otherwise. */
+export function useOptionalDeveloperInspector(): DeveloperInspectorState | null {
+  return useContext(DeveloperInspectorContext)
+}
+
+/** The recorded requests, newest first. */
+export function useDeveloperInspectorEntries() {
+  return useSyncExternalStore(subscribeDeveloperInspector, getDeveloperInspectorEntries)
+}

package/src/providers/json-link-resolver-provider.tsx

@@ -0,0 +1,27 @@
+import type { JsonValueLinkResolver } from '@spree/dashboard-ui/spree/json-preview-drawer'
+import { createContext, type ReactNode, useContext } from 'react'
+
+const JsonLinkResolverContext = createContext<JsonValueLinkResolver | undefined>(undefined)
+
+/**
+ * Supplies the resolver every "View as JSON" drawer uses to turn IDs in a
+ * payload into links. The admin dashboard mounts it with its prefixed-ID
+ * routes; a panel that mounts none gets plain, unlinked JSON.
+ */
+export function JsonLinkResolverProvider({
+  resolveLink,
+  children,
+}: {
+  resolveLink: JsonValueLinkResolver
+  children: ReactNode
+}) {
+  return (
+    <JsonLinkResolverContext.Provider value={resolveLink}>
+      {children}
+    </JsonLinkResolverContext.Provider>
+  )
+}
+
+export function useJsonLinkResolver(): JsonValueLinkResolver | undefined {
+  return useContext(JsonLinkResolverContext)
+}

package/src/sellers/seller-schema.ts

@@ -0,0 +1,107 @@
+import type { Seller, SellerCreateParams } from '@spree/admin-sdk'
+import { PAYOUT_SCHEDULE_INTERVALS, TAX_REMITTANCES } from '@spree/core'
+import { requiredMessage } from '@spree/dashboard-ui'
+import { z } from 'zod/v4'
+import { blankToNull } from '../lib/form-mappers'
+
+export const sellerFormSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(1, { error: requiredMessage('name') }),
+  slug: z.string().trim().optional(),
+  contact_email: z.email().or(z.literal('')).optional(),
+  billing_email: z.email().or(z.literal('')).optional(),
+  about: z.string().optional(),
+  tax_remittance: z.enum(TAX_REMITTANCES).optional(),
+  payouts_schedule_interval: z.enum(PAYOUT_SCHEDULE_INTERVALS).or(z.literal('')).optional(),
+  minimum_payout_amount: z.string().trim().optional(),
+  holiday_mode_until: z.string().optional(),
+  // Three-state image fields, one triple per attachment. See ResourceImageField.
+  logo_signed_id: z.string().nullable(),
+  logo_preview_url: z.string().nullable(),
+  logo_cleared: z.boolean(),
+  square_logo_signed_id: z.string().nullable(),
+  square_logo_preview_url: z.string().nullable(),
+  square_logo_cleared: z.boolean(),
+  cover_photo_signed_id: z.string().nullable(),
+  cover_photo_preview_url: z.string().nullable(),
+  cover_photo_cleared: z.boolean(),
+})
+
+export type SellerFormValues = z.infer<typeof sellerFormSchema>
+
+export const SELLER_DEFAULTS: SellerFormValues = {
+  name: '',
+  slug: '',
+  contact_email: '',
+  billing_email: '',
+  about: '',
+  tax_remittance: 'seller',
+  payouts_schedule_interval: '',
+  minimum_payout_amount: '',
+  holiday_mode_until: '',
+  logo_signed_id: null,
+  logo_preview_url: null,
+  logo_cleared: false,
+  square_logo_signed_id: null,
+  square_logo_preview_url: null,
+  square_logo_cleared: false,
+  cover_photo_signed_id: null,
+  cover_photo_preview_url: null,
+  cover_photo_cleared: false,
+}
+
+/**
+ * What the form reads from a seller. Structural, so the seller panel's own
+ * profile — the same record under another API — seeds it too.
+ */
+export type SellerFormSource = Pick<
+  Seller,
+  | 'name'
+  | 'slug'
+  | 'contact_email'
+  | 'billing_email'
+  | 'about_html'
+  | 'tax_remittance'
+  | 'payouts_schedule_interval'
+  | 'minimum_payout_amount'
+  | 'holiday_mode_until'
+>
+
+/**
+ * The form seeded from a saved seller. Images start as the empty triple: the
+ * saved ones are shown through the field's `serverUrl`, and the triple only
+ * carries what the operator changes this time.
+ */
+export function sellerFormValues(seller: SellerFormSource): SellerFormValues {
+  return {
+    ...SELLER_DEFAULTS,
+    name: seller.name,
+    slug: seller.slug,
+    contact_email: seller.contact_email ?? '',
+    billing_email: seller.billing_email ?? '',
+    about: seller.about_html ?? '',
+    tax_remittance: (seller.tax_remittance ?? 'seller') as SellerFormValues['tax_remittance'],
+    payouts_schedule_interval: (seller.payouts_schedule_interval ??
+      '') as SellerFormValues['payouts_schedule_interval'],
+    minimum_payout_amount: seller.minimum_payout_amount ?? '',
+    holiday_mode_until: seller.holiday_mode_until ?? '',
+  }
+}
+
+export function sellerValuesToParams(values: SellerFormValues): SellerCreateParams {
+  return {
+    name: values.name,
+    slug: blankToNull(values.slug) ?? undefined,
+    contact_email: blankToNull(values.contact_email),
+    billing_email: blankToNull(values.billing_email),
+    about: blankToNull(values.about),
+    tax_remittance: values.tax_remittance,
+    payouts_schedule_interval: blankToNull(values.payouts_schedule_interval) as
+      | SellerCreateParams['payouts_schedule_interval']
+      | null,
+    minimum_payout_amount: blankToNull(values.minimum_payout_amount),
+    holiday_mode_until: blankToNull(values.holiday_mode_until),
+  }
+}

package/src/tables/package-types.tsx

@@ -45,7 +45,7 @@ defineTable<PanelPackageType>('package-types', {
       key: 'dimensions',
       label: i18n.t('admin.package_types.dimensions_column'),
       default: true,
-      className: 'text-sm text-muted-foreground whitespace-nowrap',
+      className: 'text-base text-muted-foreground whitespace-nowrap',
       // Three numbers mean nothing without the unit they were measured in —
       // the same figures read as inches or centimetres differ sixteenfold by
       // volume, which is what the freight tiers compare.
@@ -57,7 +57,7 @@ defineTable<PanelPackageType>('package-types', {
     {
       key: 'volume',
       label: i18n.t('admin.package_types.volume_column'),
-      className: 'text-sm text-muted-foreground whitespace-nowrap',
+      className: 'text-base text-muted-foreground whitespace-nowrap',
       render: (packageType) =>
         packageType.volume ? `${Number(packageType.volume).toFixed(3)} m³` : '—',
     },
@@ -67,7 +67,7 @@ defineTable<PanelPackageType>('package-types', {
       sortable: true,
       filterable: true,
       filterType: 'date',
-      className: 'text-sm text-muted-foreground whitespace-nowrap',
+      className: 'text-base text-muted-foreground whitespace-nowrap',
       render: (packageType) => <RelativeTime iso={packageType.created_at} />,
     },
   ],