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

package/src/providers/auth-provider.tsx

@@ -3,10 +3,12 @@ import type {
   AuthTokens,
   InvitationAcceptParams,
   PasswordResetParams,
+  SetupParams,
 } from '@spree/admin-sdk'
 import { createContext, type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
-import { adminClient } from '../client'
+import { getApiClient, type PanelSession } from '../api-client'
 import { ADMIN_LOCALE_STORAGE_KEY, switchLocale } from '../lib/i18n'
+import { queryClient } from '../lib/query-client'
 
 interface AuthContextValue {
   user: AdminUser | null
@@ -14,15 +16,27 @@ interface AuthContextValue {
   isAuthenticated: boolean
   isInitializing: boolean
   isLoading: boolean
-  login: (email: string, password: string) => Promise<void>
+  login: (email: string, password: string) => Promise<AuthTokens>
   logout: () => Promise<void>
-  acceptInvitation: (id: string, token: string, params: InvitationAcceptParams) => Promise<void>
+  acceptInvitation: (
+    id: string,
+    token: string,
+    params: InvitationAcceptParams,
+  ) => Promise<AuthTokens>
+  /**
+   * Complete first-run setup (create the first admin account) and sign in —
+   * the endpoint issues a session just like login. `setupStatus` (the
+   * availability check) is unauthenticated and lives on `adminClient`.
+   * Resolves with the session so the caller can route straight to the store
+   * it just claimed.
+   */
+  completeSetup: (params: SetupParams) => Promise<AuthTokens>
   /**
    * Consume a password reset token, set the new password, and sign in — the
    * endpoint issues a session just like login. `requestPasswordReset` (the
    * step that sends the email) is unauthenticated and lives on `adminClient`.
    */
-  resetPassword: (token: string, params: PasswordResetParams) => Promise<void>
+  resetPassword: (token: string, params: PasswordResetParams) => Promise<AuthTokens>
   /**
    * Merge updated fields into the authenticated user (e.g. after a profile
    * save) so context consumers like the top-bar reflect the change immediately
@@ -36,6 +50,27 @@ export const AuthContext = createContext<AuthContextValue | null>(null)
 // Refresh ~30s before the JWT expires (default 5min TTL).
 const REFRESH_INTERVAL_MS = 4 * 60 * 1000 + 30 * 1000
 
+/**
+ * Reaches an admin-only sign-in flow. A seller's panel has none of these, so
+ * calling one there is a bug in the host rather than a runtime condition to
+ * handle — it fails here with a name rather than as `undefined is not a
+ * function` somewhere further away.
+ */
+function requireAuthMethod<K extends 'acceptInvitation' | 'resetPassword' | 'completeSetup'>(
+  name: K,
+  // The three flows take different arguments; their concrete types live on
+  // each panel's own client, so this signature stays deliberately loose.
+): (...args: any[]) => Promise<PanelSession> {
+  const method = getApiClient().auth[name] as
+    | ((...args: any[]) => Promise<PanelSession>)
+    | undefined
+  if (typeof method !== 'function') {
+    throw new Error(`@spree/dashboard-core: this panel's API client has no auth.${name}()`)
+  }
+
+  return method.bind(getApiClient().auth) as (...args: any[]) => Promise<PanelSession>
+}
+
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [token, setToken] = useState<string | null>(null)
   const [user, setUser] = useState<AdminUser | null>(null)
@@ -53,7 +88,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }, [])
 
   const applySession = useCallback((accessToken: string, authUser: AdminUser) => {
-    adminClient.setToken(accessToken)
+    getApiClient().setToken(accessToken)
     setToken(accessToken)
     setUser(authUser)
     // The account's saved admin language is the source of truth across devices.
@@ -73,7 +108,20 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }, [])
 
   const clearSession = useCallback(() => {
-    adminClient.setToken('')
+    const client = getApiClient()
+    client.setToken('')
+    // The tenant header is session state too — the store on the admin panel,
+    // the seller on a seller's. Left set, it would ride into the next
+    // principal's first requests (permissions, the index redirect) and 403
+    // them against a tenant they may hold no role on.
+    client.clearTenant?.()
+    // Everything fetched as the previous principal, permissions included. The
+    // permission query stops running once `isAuthenticated` goes false, but its
+    // cached rules survive — so the next admin to sign in on this browser would
+    // render the last one's navigation and action buttons until the refetch
+    // landed. Server-side authorization is unaffected either way; this is about
+    // not showing one principal what another may do.
+    queryClient.clear()
     setToken(null)
     setUser(null)
     clearRefreshTimer()
@@ -81,7 +129,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   const doRefresh = useCallback(async (): Promise<boolean> => {
     try {
-      const res = await adminClient.auth.refresh()
+      const res = await getApiClient().auth.refresh()
       applySession(res.token, res.user)
       return true
     } catch {
@@ -107,6 +155,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }, REFRESH_INTERVAL_MS)
   }, [refreshAccessToken, clearRefreshTimer])
 
+  // Returns the response so callers that need something from it — the setup
+  // screen reads the new store's id to land on — don't have to wait for the
+  // provider's state to settle.
   const establish = useCallback(
     async (req: Promise<AuthTokens>) => {
       setIsLoading(true)
@@ -114,6 +165,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         const res = await req
         applySession(res.token, res.user)
         scheduleRefresh()
+        return res
       } finally {
         setIsLoading(false)
       }
@@ -122,25 +174,30 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   )
 
   const login = useCallback(
-    (email: string, password: string) => establish(adminClient.auth.login({ email, password })),
+    (email: string, password: string) => establish(getApiClient().auth.login({ email, password })),
     [establish],
   )
 
   const acceptInvitation = useCallback(
     (id: string, token: string, params: InvitationAcceptParams) =>
-      establish(adminClient.auth.acceptInvitation(id, token, params)),
+      establish(requireAuthMethod('acceptInvitation')(id, token, params)),
     [establish],
   )
 
   const resetPassword = useCallback(
     (token: string, params: PasswordResetParams) =>
-      establish(adminClient.auth.resetPassword(token, params)),
+      establish(requireAuthMethod('resetPassword')(token, params)),
+    [establish],
+  )
+
+  const completeSetup = useCallback(
+    (params: SetupParams) => establish(requireAuthMethod('completeSetup')(params)),
     [establish],
   )
 
   const logout = useCallback(async () => {
     try {
-      await adminClient.auth.logout()
+      await getApiClient().auth.logout()
     } catch {
       // Server unreachable — clear locally; the row will expire naturally.
     } finally {
@@ -150,7 +207,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: only run on mount
   useEffect(() => {
-    adminClient.onUnauthorized(async () => {
+    getApiClient().onUnauthorized(async () => {
       const success = await refreshAccessToken()
       if (success) scheduleRefresh()
       return success
@@ -178,6 +235,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         login,
         logout,
         acceptInvitation,
+        completeSetup,
         resetPassword,
         updateUser,
       }}

package/src/providers/permission-provider.tsx

@@ -1,8 +1,11 @@
 import type { PermissionRule } from '@spree/admin-sdk'
-import { createContext, type ReactNode, useContext, useEffect, useMemo, useState } from 'react'
-import { adminClient } from '../client'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { createContext, type ReactNode, useCallback, useContext, useMemo } from 'react'
+import { getApiClient } from '../api-client'
 import { useAuth } from '../hooks/use-auth'
 import type { ActionName, SubjectName } from '../lib/permissions'
+import { useResourceKey } from '../lib/query-keys'
+import { useTenantId } from './tenant-provider'
 
 /**
  * Matcher that mirrors CanCanCan semantics:
@@ -24,7 +27,18 @@ export interface Permissions {
 interface PermissionContextValue {
   permissions: Permissions
   rules: PermissionRule[]
+  /**
+   * The flat expanded catalog permission keys the user holds on the current
+   * store (`read_orders`, `write_products`, …) — the same vocabulary as API
+   * key scopes and the role editor.
+   */
+  permissionKeys: string[]
   isLoading: boolean
+  /**
+   * Reloads `/me`. Permissions are store-scoped (roles are held per store),
+   * so the store route calls this whenever the active store changes.
+   */
+  refresh: () => Promise<void>
 }
 
 const PermissionContext = createContext<PermissionContextValue | null>(null)
@@ -62,6 +76,17 @@ export function buildPermissions(rules: PermissionRule[]): Permissions {
   }
 }
 
+/**
+ * Query resource name for the permission fetch. Exported so anything else
+ * reading the same `/me` response can share this cache entry rather than
+ * issuing a second identical request.
+ */
+export const PERMISSIONS_RESOURCE = 'permissions'
+
+/** Stable identities, so `data ?? []` doesn't produce a new array each render. */
+const EMPTY_RULES: PermissionRule[] = []
+const EMPTY_KEYS: string[] = []
+
 /** Empty permissions that deny everything — used before rules are loaded. */
 const EMPTY_PERMISSIONS: Permissions = {
   can: () => false,
@@ -71,33 +96,33 @@ const EMPTY_PERMISSIONS: Permissions = {
 
 export function PermissionProvider({ children }: { children: ReactNode }) {
   const { isAuthenticated } = useAuth()
-  const [rules, setRules] = useState<PermissionRule[]>([])
-  const [isLoading, setIsLoading] = useState(false)
+  const queryClient = useQueryClient()
+  // Store-scoped by construction: `useResourceKey` folds the tenant id in, so
+  // switching store changes the key and TanStack refetches on its own — no
+  // manual reload, and no chance of one store's rules being shown for another.
+  const queryKey = useResourceKey(PERMISSIONS_RESOURCE)
 
-  useEffect(() => {
-    if (!isAuthenticated) {
-      setRules([])
-      return
-    }
+  const query = useQuery({
+    queryKey,
+    queryFn: () => getApiClient().fetchPermissions(),
+    enabled: isAuthenticated,
+    // Permissions change when an admin's role does, which is rare and happens
+    // elsewhere. Refetching them on every window focus costs a request on the
+    // shell's critical path and almost never returns anything new.
+    staleTime: 5 * 60 * 1000,
+  })
 
-    let cancelled = false
-    setIsLoading(true)
-    adminClient.me
-      .get()
-      .then((res) => {
-        if (!cancelled) setRules(res.permissions)
-      })
-      .catch(() => {
-        if (!cancelled) setRules([])
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoading(false)
-      })
-
-    return () => {
-      cancelled = true
-    }
-  }, [isAuthenticated])
+  const rules = query.data?.rules ?? EMPTY_RULES
+  const permissionKeys = query.data?.keys ?? EMPTY_KEYS
+
+  // `useResourceKey` returns a fresh array each render, so depending on it
+  // directly would give `refresh` a new identity every render — and a consumer
+  // holding it in an effect's dependencies would then re-run that effect
+  // forever. Depend on the tenant id (a string) and rebuild the key inside.
+  const tenantId = useTenantId()
+  const refresh = useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: [PERMISSIONS_RESOURCE, tenantId] })
+  }, [queryClient, tenantId])
 
   const permissions = useMemo(
     () => (rules.length > 0 ? buildPermissions(rules) : EMPTY_PERMISSIONS),
@@ -105,7 +130,22 @@ export function PermissionProvider({ children }: { children: ReactNode }) {
   )
 
   return (
-    <PermissionContext.Provider value={{ permissions, rules, isLoading }}>
+    <PermissionContext.Provider
+      value={{
+        permissions,
+        rules,
+        permissionKeys,
+        // The first load only, which is what the nav's skeleton is for. Not
+        // `isFetching` alone: that is also true while a stale query refetches
+        // in the background, so an already-rendered nav would drop back to
+        // placeholders on every refresh — the flicker the skeleton exists to
+        // remove. Not `isPending` alone either: it stays true for a disabled
+        // query, leaving the sign-in screen loading forever. Both together
+        // mean "signed in, nothing cached yet, a request in flight".
+        isLoading: isAuthenticated && query.isPending && query.isFetching,
+        refresh,
+      }}
+    >
       {children}
     </PermissionContext.Provider>
   )

package/src/providers/sticky-header-provider.tsx

@@ -0,0 +1,134 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+/**
+ * The CSS variable every pinned band offsets itself by — the table's pinned
+ * column row, the bulk-action bar, scroll-margin on linked cards. It is
+ * declared in `styles.css` with a fallback for pages that have no
+ * `PageHeader`, and overwritten here with the real measurement when one is
+ * mounted.
+ */
+const OFFSET_VARIABLE = '--spacing-header-height'
+
+/**
+ * Tracks a mounted `PageHeader` and publishes its height as the shared sticky
+ * offset.
+ *
+ * The dashboard has no top bar: a page's own header is the only chrome above
+ * the scrolling content, so it is also the only thing other pinned bands need
+ * to clear. Its height is not a constant — badges, a subtitle and wrapped
+ * actions all change it, and so does a narrow viewport — so it is measured
+ * rather than assumed. A `ResizeObserver` keeps the variable current as the
+ * header reflows.
+ *
+ * The variable is set on `document.documentElement` because the elements
+ * reading it are not all descendants of the header (the pinned table row lives
+ * further down the tree, and Tailwind resolves `top-header-height` against
+ * whatever the cascade provides).
+ *
+ * @param enabled false for a header that does not pin — it then publishes no
+ *   offset at all, so the bands below it pin to the top of the scroll
+ *   container rather than clearing a header that never occupies that space.
+ * @returns a ref to attach to the `PageHeader` element
+ */
+export function useStickyHeaderOffset(enabled = true): (node: HTMLElement | null) => void {
+  const observerRef = useRef<ResizeObserver | null>(null)
+
+  useEffect(() => {
+    // Only on unmount: leaving a measured height behind would make the next
+    // page — which may have no header at all — pin its table that far down.
+    return () => {
+      observerRef.current?.disconnect()
+      document.documentElement.style.removeProperty(OFFSET_VARIABLE)
+    }
+  }, [])
+
+  return useCallback(
+    (node: HTMLElement | null) => {
+      observerRef.current?.disconnect()
+
+      if (!node || !enabled) {
+        document.documentElement.style.removeProperty(OFFSET_VARIABLE)
+        return
+      }
+
+      const publish = () => {
+        const { height } = node.getBoundingClientRect()
+        // Sub-pixel heights round up: rounding down leaves a hairline of the
+        // scrolling row visible above the pinned one.
+        document.documentElement.style.setProperty(OFFSET_VARIABLE, `${Math.ceil(height)}px`)
+      }
+
+      publish()
+
+      if (typeof ResizeObserver !== 'undefined') {
+        const observer = new ResizeObserver(publish)
+        observer.observe(node)
+        observerRef.current = observer
+      }
+    },
+    [enabled],
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Page-header presence — heading levels
+// ---------------------------------------------------------------------------
+
+const PageHeaderPresenceContext = createContext<{
+  hasPageHeader: boolean
+  register: () => () => void
+} | null>(null)
+
+/**
+ * Tracks whether a `PageHeader` is mounted on the current page.
+ *
+ * This is not about layout — it is about heading levels. When a page has a
+ * `PageHeader` it owns the `h1`, so a table heading below it must be an `h2`;
+ * on a page without one the table's own title is the first heading. Getting
+ * that wrong produces a document with two `h1`s or none, which is exactly what
+ * a screen-reader user navigates by.
+ */
+export function StickyHeaderProvider({ children }: { children: ReactNode }) {
+  const [count, setCount] = useState(0)
+
+  const value = useMemo(
+    () => ({
+      hasPageHeader: count > 0,
+      register: () => {
+        setCount((n) => n + 1)
+        return () => setCount((n) => n - 1)
+      },
+    }),
+    [count],
+  )
+
+  return (
+    <PageHeaderPresenceContext.Provider value={value}>
+      {children}
+    </PageHeaderPresenceContext.Provider>
+  )
+}
+
+/**
+ * Whether a `PageHeader` is mounted. Returns an inert default outside a
+ * provider so components stay usable standalone (tests, plugin previews).
+ */
+export function useStickyHeader(): { hasPageHeader: boolean } {
+  return useContext(PageHeaderPresenceContext) ?? { hasPageHeader: false }
+}
+
+/** Announces a mounted `PageHeader` for the lifetime of the calling component. */
+export function useRegisterPageHeader(): void {
+  const ctx = useContext(PageHeaderPresenceContext)
+  const register = ctx?.register
+  useEffect(() => register?.(), [register])
+}

package/src/providers/store-provider.tsx

@@ -28,12 +28,28 @@ interface StoreContextValue {
   availableLocales: string[]
   defaultCurrency: string
   defaultLocale: string
+  /** ISO country the store sells from — used to pre-fill new address forms. */
+  defaultCountry: string
   /** IANA timezone for the store (e.g. `Europe/Berlin`). Falls back to the
-   *  browser's resolved timezone when the store hasn't loaded yet. */
+   *  browser's resolved timezone when the store hasn't loaded yet, or when
+   *  the store's preference is not a name this platform recognizes. */
   timezone: string
   refetch: () => Promise<unknown>
 }
 
+const browserTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
+
+/** The store's zone when it is an IANA name the platform knows, else the browser's. */
+function resolveTimezone(preferred: string | null | undefined): string {
+  if (!preferred) return browserTimezone()
+  try {
+    Intl.DateTimeFormat('en-US', { timeZone: preferred })
+    return preferred
+  } catch {
+    return browserTimezone()
+  }
+}
+
 const StoreContext = createContext<StoreContextValue | null>(null)
 
 export function StoreProvider({ storeId, children }: { storeId: string; children: ReactNode }) {
@@ -79,8 +95,11 @@ export function StoreProvider({ storeId, children }: { storeId: string; children
   const availableLocales = store?.available_locales ?? []
   const defaultCurrency = store?.default_currency ?? 'USD'
   const defaultLocale = store?.default_locale ?? 'en'
-  const timezone =
-    store?.preferred_timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC'
+  const defaultCountry = store?.default_country_code ?? ''
+  // A store's zone preference defaults to the host app's `Time.zone.name`,
+  // which may be a Rails name ("Eastern Time (US & Canada)") that Intl and
+  // date-fns-tz reject — falling back keeps every date control working.
+  const timezone = resolveTimezone(store?.preferred_timezone)
 
   return (
     <StoreContext.Provider
@@ -93,6 +112,7 @@ export function StoreProvider({ storeId, children }: { storeId: string; children
         availableLocales,
         defaultCurrency,
         defaultLocale,
+        defaultCountry,
         timezone,
         refetch: query.refetch,
       }}
@@ -109,3 +129,16 @@ export function useStore(): StoreContextValue {
   }
   return context
 }
+
+/**
+ * The store context if a `StoreProvider` is mounted, else `null`.
+ *
+ * For code that runs in more than one panel. The operator's dashboard always
+ * has a store; the seller panel has none — its tenant is a seller, and the
+ * store is derived server-side. Shared pieces (the nav visibility context)
+ * take the store when it is there and carry on when it is not, rather than
+ * forcing every panel to mount a provider for a concept it does not have.
+ */
+export function useOptionalStore(): StoreContextValue | null {
+  return useContext(StoreContext)
+}

package/src/providers/tenant-provider.tsx

@@ -0,0 +1,33 @@
+import { createContext, type ReactNode, useContext, useMemo } from 'react'
+import { useOptionalStore } from './store-provider'
+
+/**
+ * Which tenant the signed-in principal is currently acting as — a store in the
+ * operator's dashboard, a seller in the marketplace panel.
+ *
+ * Query keys have to be scoped to it (a cached list must never survive a
+ * switch and be shown under the next tenant), and shared pages cannot reach
+ * for `useStore` to get it: a seller panel mounts no `StoreProvider`, so that
+ * throws. `useTenantId` reads this provider, falls back to the store when only
+ * a `StoreProvider` is mounted, and answers `'default'` when neither is —
+ * which keeps the operator's dashboard working with no change at all.
+ */
+const TenantContext = createContext<string | null>(null)
+
+export function TenantProvider({ id, children }: { id: string; children: ReactNode }) {
+  const value = useMemo(() => id, [id])
+
+  return <TenantContext.Provider value={value}>{children}</TenantContext.Provider>
+}
+
+/**
+ * The current tenant's id, for query-key scoping.
+ *
+ * @returns the tenant id, or `'default'` when no provider is mounted
+ */
+export function useTenantId(): string {
+  const explicit = useContext(TenantContext)
+  const store = useOptionalStore()
+
+  return explicit ?? store?.storeId ?? 'default'
+}

package/src/schemas/package-type.ts

@@ -0,0 +1,95 @@
+import { requiredMessage } from '@spree/dashboard-ui'
+import i18n from 'i18next'
+import { z } from 'zod/v4'
+import type { PanelPackageType, PanelPackageTypeCreateParams } from '../api-client'
+
+// The vocabulary the server validates against; typing anything else could
+// only fail on save.
+export const PACKAGE_TYPE_KINDS = ['box', 'envelope', 'carton', 'pallet', 'container'] as const
+export const PACKAGE_DIMENSION_UNITS = ['mm', 'cm', 'in', 'ft'] as const
+export const PACKAGE_WEIGHT_UNITS = ['g', 'kg', 'lb', 'oz'] as const
+
+export type PackageTypeKind = (typeof PACKAGE_TYPE_KINDS)[number]
+export type PackageDimensionUnit = (typeof PACKAGE_DIMENSION_UNITS)[number]
+export type PackageWeightUnit = (typeof PACKAGE_WEIGHT_UNITS)[number]
+
+// Blank is how a merchant says "not measured", so every number is optional
+// and an empty string reaches the API as null rather than zero — a box
+// recorded as zero long, zero wide is not the same as one nobody measured.
+const optionalNumber = z
+  .union([z.string(), z.number()])
+  .optional()
+  // `NaN >= 0` is already false, so the comparison alone rejects garbage.
+  .refine((value) => value === '' || value === undefined || Number(value) >= 0, {
+    error: () => i18n.t('admin.package_types.validation.non_negative'),
+  })
+
+export const packageTypeFormSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(1, { error: requiredMessage('package_type.name') }),
+  kind: z.enum(PACKAGE_TYPE_KINDS),
+  length: optionalNumber,
+  width: optionalNumber,
+  height: optionalNumber,
+  dimensions_unit: z.enum(PACKAGE_DIMENSION_UNITS).optional(),
+  weight: optionalNumber,
+  max_weight: optionalNumber,
+  weight_unit: z.enum(PACKAGE_WEIGHT_UNITS).optional(),
+  default: z.boolean().optional(),
+})
+
+export type PackageTypeFormValues = z.input<typeof packageTypeFormSchema>
+
+export const PACKAGE_TYPE_DEFAULTS: PackageTypeFormValues = {
+  name: '',
+  kind: 'box',
+  length: '',
+  width: '',
+  height: '',
+  dimensions_unit: 'cm',
+  weight: '',
+  max_weight: '',
+  weight_unit: 'kg',
+  default: false,
+}
+
+/**
+ * Blank erases a measurement, so it has to reach the API as an explicit null;
+ * undefined would leave whatever was recorded before untouched.
+ */
+export function packageTypeFormValuesToParams(
+  values: PackageTypeFormValues,
+): PanelPackageTypeCreateParams {
+  const measurement = (value: string | number | undefined) =>
+    value === '' || value === undefined ? null : Number(value)
+
+  return {
+    name: values.name,
+    kind: values.kind,
+    length: measurement(values.length),
+    width: measurement(values.width),
+    height: measurement(values.height),
+    weight: measurement(values.weight),
+    max_weight: measurement(values.max_weight),
+    dimensions_unit: values.dimensions_unit,
+    weight_unit: values.weight_unit,
+    default: values.default,
+  }
+}
+
+export function packageTypeToFormValues(packageType: PanelPackageType): PackageTypeFormValues {
+  return {
+    name: packageType.name,
+    kind: (packageType.kind ?? 'box') as PackageTypeKind,
+    length: packageType.length ?? '',
+    width: packageType.width ?? '',
+    height: packageType.height ?? '',
+    dimensions_unit: (packageType.dimensions_unit ?? 'cm') as PackageDimensionUnit,
+    weight: packageType.weight ?? '',
+    max_weight: packageType.max_weight ?? '',
+    weight_unit: (packageType.weight_unit ?? 'kg') as PackageWeightUnit,
+    default: packageType.default ?? false,
+  }
+}