@open-mercato/core 0.4.5-develop-3ce83a8b24 → 0.4.5-develop-539cff4960

package/src/modules/catalog/backend/catalog/products/[id]/page.tsx

@@ -1,38 +1,56 @@
-"use client"
-
-import * as React from 'react'
-import Link from 'next/link'
-import dynamic from 'next/dynamic'
-import { useRouter } from 'next/navigation'
-import { Page, PageBody } from '@open-mercato/ui/backend/Page'
-import { CrudForm, type CrudFormGroup, type CrudFormGroupComponentProps } from '@open-mercato/ui/backend/CrudForm'
-import { updateCrud, createCrud, deleteCrud } from '@open-mercato/ui/backend/utils/crud'
-import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
-import { collectCustomFieldValues } from '@open-mercato/ui/backend/utils/customFieldValues'
-import { flash } from '@open-mercato/ui/backend/FlashMessages'
-import { Button } from '@open-mercato/ui/primitives/button'
-import { Input } from '@open-mercato/ui/primitives/input'
-import { Label } from '@open-mercato/ui/primitives/label'
-import { TagsInput } from '@open-mercato/ui/backend/inputs/TagsInput'
-import { Textarea } from '@open-mercato/ui/primitives/textarea'
-import { DataLoader } from '@open-mercato/ui/primitives/DataLoader'
-import { cn } from '@open-mercato/shared/lib/utils'
-import { apiCall, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
-import { E } from '#generated/entities.ids.generated'
-import { ProductMediaManager, type ProductMediaItem } from '@open-mercato/core/modules/catalog/components/products/ProductMediaManager'
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/navigation";
+import { Page, PageBody } from "@open-mercato/ui/backend/Page";
+import {
+  CrudForm,
+  type CrudFormGroup,
+  type CrudFormGroupComponentProps,
+} from "@open-mercato/ui/backend/CrudForm";
+import {
+  updateCrud,
+  createCrud,
+  deleteCrud,
+} from "@open-mercato/ui/backend/utils/crud";
+import { createCrudFormError } from "@open-mercato/ui/backend/utils/serverErrors";
+import { collectCustomFieldValues } from "@open-mercato/ui/backend/utils/customFieldValues";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Label } from "@open-mercato/ui/primitives/label";
+import { TagsInput } from "@open-mercato/ui/backend/inputs/TagsInput";
+import { Textarea } from "@open-mercato/ui/primitives/textarea";
+import { DataLoader } from "@open-mercato/ui/primitives/DataLoader";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Spinner } from "@open-mercato/ui/primitives/spinner";
+import {
+  apiCall,
+  readApiResultOrThrow,
+} from "@open-mercato/ui/backend/utils/apiCall";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { E } from "#generated/entities.ids.generated";
+import {
+  ProductMediaManager,
+  type ProductMediaItem,
+} from "@open-mercato/core/modules/catalog/components/products/ProductMediaManager";
 import {
   fetchOptionSchemaTemplate,
   type OptionSchemaRecord,
   type OptionSchemaTemplateSummary,
-} from '../optionSchemaClient'
+} from "../optionSchemaClient";
 import {
   type ProductFormValues,
   type TaxRateSummary,
   type ProductOptionInput,
   type PriceKindSummary,
   type PriceKindApiPayload,
+  type ProductUnitConversionDraft,
+  type ProductUnitPriceReferenceUnit,
+  type ProductUnitRoundingMode,
   productFormSchema,
   BASE_INITIAL_VALUES,
   createLocalId,
@@ -49,226 +67,511 @@ import {
   sanitizeProductWeight,
   updateDimensionValue,
   updateWeightValue,
-} from '@open-mercato/core/modules/catalog/components/products/productForm'
-import type { CatalogProductOptionSchema } from '@open-mercato/core/modules/catalog/data/types'
-import { MetadataEditor } from '@open-mercato/core/modules/catalog/components/products/MetadataEditor'
-import { buildAttachmentImageUrl, slugifyAttachmentFileName } from '@open-mercato/core/modules/attachments/lib/imageUrls'
+} from "@open-mercato/core/modules/catalog/components/products/productForm";
+import type { CatalogProductOptionSchema } from "@open-mercato/core/modules/catalog/data/types";
+import { MetadataEditor } from "@open-mercato/core/modules/catalog/components/products/MetadataEditor";
+import {
+  buildAttachmentImageUrl,
+  slugifyAttachmentFileName,
+} from "@open-mercato/core/modules/attachments/lib/imageUrls";
 import {
   ProductCategorizeSection,
   type ProductCategorizePickerOption,
-} from '@open-mercato/core/modules/catalog/components/products/ProductCategorizeSection'
-import { AlignLeft, BookMarked, ExternalLink, FileText, Layers, Plus, Save, Trash2 } from 'lucide-react'
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
-
-const MarkdownEditor = dynamic(() => import('@uiw/react-md-editor'), {
+} from "@open-mercato/core/modules/catalog/components/products/ProductCategorizeSection";
+import { ProductUomSection } from "@open-mercato/core/modules/catalog/components/products/ProductUomSection";
+import { canonicalizeUnitCode } from "@open-mercato/core/modules/catalog/lib/unitCodes";
+import {
+  UNIT_PRICE_REFERENCE_UNITS,
+  toTrimmedOrNull,
+  parseNumericInput,
+  toPositiveNumberOrNull,
+  toIntegerInRangeOrDefault,
+  normalizeProductConversionInputs,
+  type ProductUnitConversionInput,
+} from "@open-mercato/core/modules/catalog/components/products/productFormUtils";
+import {
+  AlignLeft,
+  BookMarked,
+  ExternalLink,
+  FileText,
+  Layers,
+  Plus,
+  Save,
+  Trash2,
+} from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@open-mercato/ui/primitives/dialog";
+
+const MarkdownEditor = dynamic(() => import("@uiw/react-md-editor"), {
   ssr: false,
-  loading: () => <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">Loading editor…</div>,
-}) as unknown as React.ComponentType<{ value?: string; height?: number; onChange?: (value?: string) => void; previewOptions?: { remarkPlugins?: unknown[] } }>
+  loading: () => (
+    <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
+      <Spinner />
+    </div>
+  ),
+}) as unknown as React.ComponentType<{
+  value?: string;
+  height?: number;
+  onChange?: (value?: string) => void;
+  previewOptions?: { remarkPlugins?: unknown[] };
+}>;
 
 type ProductResponse = {
-  items?: Array<Record<string, unknown>>
-}
+  items?: Array<Record<string, unknown>>;
+};
 
 type VariantListResponse = {
-  items?: VariantSummaryApi[]
-}
+  items?: VariantSummaryApi[];
+};
 
 type VariantSummaryApi = {
-  id?: string
-  name?: string | null
-  sku?: string | null
-  is_default?: boolean
-  isDefault?: boolean
-  metadata?: Record<string, unknown> | null
-}
+  id?: string;
+  name?: string | null;
+  sku?: string | null;
+  is_default?: boolean;
+  isDefault?: boolean;
+  metadata?: Record<string, unknown> | null;
+};
 
 type AttachmentListResponse = {
   items?: {
-    id: string
-    url: string
-    fileName: string
-    fileSize: number
-    thumbnailUrl?: string | null
-  }[]
-}
+    id: string;
+    url: string;
+    fileName: string;
+    fileSize: number;
+    thumbnailUrl?: string | null;
+  }[];
+};
 
 type OptionSchemaTemplateListResponse = {
-  items?: OptionSchemaTemplateSummary[]
-}
+  items?: OptionSchemaTemplateSummary[];
+};
 
 type VariantSummary = {
-  id: string
-  name: string
-  sku: string
-  isDefault: boolean
-  prices: VariantPriceSummary[]
-  optionValues: Record<string, string> | null
-}
+  id: string;
+  name: string;
+  sku: string;
+  isDefault: boolean;
+  prices: VariantPriceSummary[];
+  optionValues: Record<string, string> | null;
+};
 
 type VariantPriceListResponse = {
-  items?: VariantPriceSummaryApi[]
-}
+  items?: VariantPriceSummaryApi[];
+};
 
 type VariantPriceSummaryApi = {
-  id?: string
-  variant_id?: string | null
-  variantId?: string | null
-  price_kind_id?: string | null
-  priceKindId?: string | null
-  currency_code?: string | null
-  currencyCode?: string | null
-  unit_price_net?: string | null
-  unitPriceNet?: string | null
-  unit_price_gross?: string | null
-  unitPriceGross?: string | null
-}
+  id?: string;
+  variant_id?: string | null;
+  variantId?: string | null;
+  price_kind_id?: string | null;
+  priceKindId?: string | null;
+  currency_code?: string | null;
+  currencyCode?: string | null;
+  unit_price_net?: string | null;
+  unitPriceNet?: string | null;
+  unit_price_gross?: string | null;
+  unitPriceGross?: string | null;
+};
 
 type VariantPriceSummary = {
-  id: string
-  variantId: string
-  priceKindId: string | null
-  currencyCode: string | null
-  amount: string | null
-  displayMode: 'including-tax' | 'excluding-tax'
-}
+  id: string;
+  variantId: string;
+  priceKindId: string | null;
+  currencyCode: string | null;
+  amount: string | null;
+  displayMode: "including-tax" | "excluding-tax";
+};
 
 type OfferSnapshot = {
-  id: string | null
-  channelId: string
-  title: string | null
-  description: string | null
-  defaultMediaId: string | null
-  defaultMediaUrl: string | null
-  metadata: Record<string, unknown> | null
-  isActive: boolean
-  channelName: string | null
-  channelCode: string | null
+  id: string | null;
+  channelId: string;
+  title: string | null;
+  description: string | null;
+  defaultMediaId: string | null;
+  defaultMediaUrl: string | null;
+  metadata: Record<string, unknown> | null;
+  isActive: boolean;
+  channelName: string | null;
+  channelCode: string | null;
+};
+
+function mapVariantPriceSummary(
+  item: VariantPriceSummaryApi | undefined,
+): VariantPriceSummary | null {
+  if (!item) return null;
+  const getString = (value: unknown): string | null => {
+    if (typeof value === "string" && value.trim().length) return value.trim();
+    if (typeof value === "number" || typeof value === "bigint")
+      return String(value);
+    return null;
+  };
+  const variantId = getString(item.variant_id ?? item.variantId);
+  const id = getString(item.id);
+  if (!variantId || !id) return null;
+  const priceKindId = getString(item.price_kind_id ?? item.priceKindId);
+  const currencyCode = getString(item.currency_code ?? item.currencyCode);
+  const unitGross = getString(item.unit_price_gross ?? item.unitPriceGross);
+  const unitNet = getString(item.unit_price_net ?? item.unitPriceNet);
+  const amount = unitGross ?? unitNet ?? null;
+  return {
+    id,
+    variantId,
+    priceKindId,
+    currencyCode,
+    amount,
+    displayMode: unitGross ? "including-tax" : "excluding-tax",
+  };
 }
 
-export default function EditCatalogProductPage({ params }: { params?: { id?: string } }) {
-  const productId = params?.id ? String(params.id) : null
-  const t = useT()
-  const router = useRouter()
-  const [taxRates, setTaxRates] = React.useState<TaxRateSummary[]>([])
-  const [variants, setVariants] = React.useState<VariantSummary[]>([])
-  const [priceKinds, setPriceKinds] = React.useState<PriceKindSummary[]>([])
-  const [initialValues, setInitialValues] = React.useState<Partial<ProductFormValues> | null>(null)
-  const [loading, setLoading] = React.useState(true)
-  const [error, setError] = React.useState<string | null>(null)
-  const offerSnapshotsRef = React.useRef<OfferSnapshot[]>([])
+function normalizeVariantOptionValues(
+  input: unknown,
+): Record<string, string> | null {
+  if (!input || typeof input !== "object") return null;
+  const result: Record<string, string> = {};
+  Object.entries(input as Record<string, unknown>).forEach(([key, value]) => {
+    if (
+      typeof key === "string" &&
+      typeof value === "string" &&
+      key.trim().length
+    ) {
+      result[key] = value;
+    }
+  });
+  return Object.keys(result).length ? result : null;
+}
+
+function readProductConversionRows(
+  items: Array<Record<string, unknown>> | undefined,
+): ProductUnitConversionDraft[] {
+  const rows = Array.isArray(items) ? items : [];
+  return rows
+    .map((item) => {
+      const id = toTrimmedOrNull(item.id);
+      const unitCode = canonicalizeUnitCode(item.unit_code ?? item.unitCode);
+      const factor = toPositiveNumberOrNull(
+        item.to_base_factor ?? item.toBaseFactor,
+      );
+      if (!unitCode || factor === null) return null;
+      const sortOrderRaw = toIntegerInRangeOrDefault(
+        item.sort_order ?? item.sortOrder,
+        0,
+        100000,
+        0,
+      );
+      const isActive =
+        typeof item.is_active === "boolean"
+          ? item.is_active
+          : typeof item.isActive === "boolean"
+            ? item.isActive
+            : true;
+      return {
+        id: id ?? null,
+        unitCode,
+        toBaseFactor: String(factor),
+        sortOrder: String(sortOrderRaw),
+        isActive,
+      } satisfies ProductUnitConversionDraft;
+    })
+    .filter((entry): entry is ProductUnitConversionDraft => Boolean(entry));
+}
+
+export default function EditCatalogProductPage({
+  params,
+}: {
+  params?: { id?: string };
+}) {
+  const productId = params?.id ? String(params.id) : null;
+  const t = useT();
+  const router = useRouter();
+  const [taxRates, setTaxRates] = React.useState<TaxRateSummary[]>([]);
+  const [variants, setVariants] = React.useState<VariantSummary[]>([]);
+  const [priceKinds, setPriceKinds] = React.useState<PriceKindSummary[]>([]);
+  const [initialValues, setInitialValues] =
+    React.useState<Partial<ProductFormValues> | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+  const offerSnapshotsRef = React.useRef<OfferSnapshot[]>([]);
+  const initialConversionsRef = React.useRef<ProductUnitConversionDraft[]>([]);
   const [categorizeOptions, setCategorizeOptions] = React.useState<{
-    categories: ProductCategorizePickerOption[]
-    channels: ProductCategorizePickerOption[]
-    tags: ProductCategorizePickerOption[]
-  }>({ categories: [], channels: [], tags: [] })
+    categories: ProductCategorizePickerOption[];
+    channels: ProductCategorizePickerOption[];
+    tags: ProductCategorizePickerOption[];
+  }>({ categories: [], channels: [], tags: [] });
+
+  const loadVariants = React.useCallback(async (id: string) => {
+    try {
+      const [variantsRes, pricesRes] = await Promise.all([
+        apiCall<VariantListResponse>(
+          `/api/catalog/variants?productId=${encodeURIComponent(id)}&page=1&pageSize=100`,
+        ),
+        apiCall<VariantPriceListResponse>(
+          `/api/catalog/prices?productId=${encodeURIComponent(id)}&page=1&pageSize=100`,
+        ),
+      ]);
+      if (!variantsRes.ok) {
+        setVariants([]);
+        return;
+      }
+      const priceMap: Record<string, VariantPriceSummary[]> = {};
+      if (pricesRes.ok) {
+        const priceItems = Array.isArray(pricesRes.result?.items)
+          ? pricesRes.result?.items
+          : [];
+        for (const item of priceItems) {
+          const summary = mapVariantPriceSummary(item);
+          if (!summary) continue;
+          if (!priceMap[summary.variantId]) {
+            priceMap[summary.variantId] = [];
+          }
+          priceMap[summary.variantId].push(summary);
+        }
+        Object.keys(priceMap).forEach((key) => {
+          priceMap[key].sort((left, right) => {
+            const leftKey =
+              (left.priceKindId ?? "") + (left.currencyCode ?? "");
+            const rightKey =
+              (right.priceKindId ?? "") + (right.currencyCode ?? "");
+            return leftKey.localeCompare(rightKey);
+          });
+        });
+      }
+      const items = Array.isArray(variantsRes.result?.items)
+        ? variantsRes.result?.items
+        : [];
+      setVariants(
+        items
+          .map((variant) => {
+            const variantId =
+              typeof variant.id === "string" ? variant.id : null;
+            if (!variantId) return null;
+            const variantRecord = variant as Record<string, unknown>;
+            const optionValues =
+              normalizeVariantOptionValues(variantRecord?.["option_values"]) ??
+              normalizeVariantOptionValues(variantRecord?.optionValues);
+            return {
+              id: variantId,
+              name:
+                typeof variant.name === "string" && variant.name.trim().length
+                  ? variant.name
+                  : (variant.sku ?? variantId),
+              sku: typeof variant.sku === "string" ? variant.sku : "",
+              isDefault: Boolean(variant.is_default ?? variant.isDefault),
+              prices: priceMap[variantId] ?? [],
+              optionValues,
+            };
+          })
+          .filter((entry): entry is VariantSummary => Boolean(entry)),
+      );
+    } catch (err) {
+      console.error("catalog.variants.fetch failed", err);
+      setVariants([]);
+    }
+  }, []);
+
+  const refreshVariants = React.useCallback(async () => {
+    if (!productId) return;
+    await loadVariants(productId);
+  }, [loadVariants, productId]);
+
+  const fetchAttachments = React.useCallback(
+    async (id: string): Promise<ProductMediaItem[]> => {
+      try {
+        const res = await apiCall<AttachmentListResponse>(
+          `/api/attachments?entityId=${encodeURIComponent(E.catalog.catalog_product)}&recordId=${encodeURIComponent(id)}`,
+        );
+        if (!res.ok) return [];
+        return (res.result?.items ?? []).map((item) => ({
+          id: item.id,
+          url: item.url,
+          fileName: item.fileName,
+          fileSize: item.fileSize,
+          thumbnailUrl: item.thumbnailUrl ?? undefined,
+        }));
+      } catch (err) {
+        console.error("attachments.fetch failed", err);
+        return [];
+      }
+    },
+    [],
+  );
 
   React.useEffect(() => {
     const loadTaxRates = async () => {
       try {
-        const payload = await readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(
-          '/api/sales/tax-rates?pageSize=200',
-          undefined,
-          { errorMessage: t('catalog.products.create.taxRates.error', 'Failed to load tax rates.'), fallback: { items: [] } },
-        )
-        const items = Array.isArray(payload.items) ? payload.items : []
+        const payload = await readApiResultOrThrow<{
+          items?: Array<Record<string, unknown>>;
+        }>("/api/sales/tax-rates?pageSize=100", undefined, {
+          errorMessage: t(
+            "catalog.products.create.taxRates.error",
+            "Failed to load tax rates.",
+          ),
+          fallback: { items: [] },
+        });
+        const items = Array.isArray(payload.items) ? payload.items : [];
         setTaxRates(
           items.map((item) => {
-            const rawRate = typeof item.rate === 'number' ? item.rate : Number(item.rate ?? Number.NaN)
+            const rawRate =
+              typeof item.rate === "number"
+                ? item.rate
+                : Number(item.rate ?? Number.NaN);
             return {
               id: String(item.id),
               name:
-                typeof item.name === 'string' && item.name.trim().length
+                typeof item.name === "string" && item.name.trim().length
                   ? item.name
-                  : t('catalog.products.create.taxRates.unnamed', 'Untitled tax rate'),
-              code: typeof item.code === 'string' && item.code.trim().length ? item.code : null,
+                  : t(
+                      "catalog.products.create.taxRates.unnamed",
+                      "Untitled tax rate",
+                    ),
+              code:
+                typeof item.code === "string" && item.code.trim().length
+                  ? item.code
+                  : null,
               rate: Number.isFinite(rawRate) ? rawRate : null,
               isDefault: Boolean(
-                typeof item.isDefault === 'boolean'
+                typeof item.isDefault === "boolean"
                   ? item.isDefault
-                  : typeof item.is_default === 'boolean'
+                  : typeof item.is_default === "boolean"
                     ? item.is_default
                     : false,
               ),
-            }
+            };
           }),
-        )
+        );
       } catch (err) {
-        console.error('sales.tax-rates.fetch failed', err)
-        setTaxRates([])
+        console.error("sales.tax-rates.fetch failed", err);
+        setTaxRates([]);
       }
-    }
-    loadTaxRates().catch(() => {})
-  }, [t])
+    };
+    loadTaxRates().catch(() => {});
+  }, [t]);
 
   React.useEffect(() => {
     if (!productId) {
-      setLoading(false)
-      setError(t('catalog.products.edit.errors.idMissing', 'Product identifier is missing.'))
-      return
+      setLoading(false);
+      setError(
+        t(
+          "catalog.products.edit.errors.idMissing",
+          "Product identifier is missing.",
+        ),
+      );
+      return;
     }
-    let cancelled = false
+    let cancelled = false;
     async function loadProduct() {
-      setLoading(true)
-      setError(null)
+      setLoading(true);
+      setError(null);
       try {
         const productRes = await apiCall<ProductResponse>(
           `/api/catalog/products?id=${encodeURIComponent(productId!)}&page=1&pageSize=1&withDeleted=false`,
-        )
-        if (!productRes.ok) throw new Error('load_failed')
-        const record = Array.isArray(productRes.result?.items) ? productRes.result?.items?.[0] : undefined
-        if (!record) throw new Error(t('catalog.products.edit.errors.notFound', 'Product not found.'))
+        );
+        if (!productRes.ok) throw new Error("load_failed");
+        const record = Array.isArray(productRes.result?.items)
+          ? productRes.result?.items?.[0]
+          : undefined;
+        if (!record)
+          throw new Error(
+            t("catalog.products.edit.errors.notFound", "Product not found."),
+          );
         const rawMetadata = isRecord(record.metadata)
           ? (record.metadata as Record<string, unknown>)
-          : isRecord((record as any).metadata)
-            ? ((record as any).metadata as Record<string, unknown>)
-            : null
+          : null;
         const dimensions = normalizeProductDimensions(
-          (record as any).dimensions ?? (rawMetadata as any)?.dimensions ?? null,
-        )
+          record.dimensions ?? rawMetadata?.dimensions ?? null,
+        );
+        const rawWeightMeta = isRecord(rawMetadata?.weight)
+          ? (rawMetadata.weight as Record<string, unknown>)
+          : null;
         const weight = normalizeProductWeight({
           value:
-            (record as any).weight_value ??
-            (record as any).weightValue ??
-            (isRecord((rawMetadata as any)?.weight) ? (rawMetadata as any).weight.value : undefined),
+            record.weight_value ??
+            record.weightValue ??
+            rawWeightMeta?.value,
           unit:
-            (record as any).weight_unit ??
-            (record as any).weightUnit ??
-            (isRecord((rawMetadata as any)?.weight) ? (rawMetadata as any).weight.unit : undefined),
-        })
-        const metadata = normalizeMetadata(rawMetadata)
+            record.weight_unit ??
+            record.weightUnit ??
+            rawWeightMeta?.unit,
+        });
+        const metadata = normalizeMetadata(rawMetadata);
         const optionSchemaId =
-          typeof record.option_schema_id === 'string'
+          typeof record.option_schema_id === "string"
             ? record.option_schema_id
-            : typeof (record as any).optionSchemaId === 'string'
-              ? (record as any).optionSchemaId
-              : null
+            : typeof record.optionSchemaId === "string"
+              ? record.optionSchemaId
+              : null;
         const taxRateId =
-          typeof (record as any).tax_rate_id === 'string'
-            ? (record as any).tax_rate_id
-            : typeof (record as any).taxRateId === 'string'
-              ? (record as any).taxRateId
-              : null
-        const optionSchemaTemplate = optionSchemaId ? await fetchOptionSchemaTemplate(optionSchemaId) : null
-        const normalizedSchema = normalizeOptionSchemaRecord(optionSchemaTemplate?.schema)
-        let optionInputs = normalizedSchema ? convertSchemaToProductOptions(normalizedSchema) : []
+          typeof record.tax_rate_id === "string"
+            ? record.tax_rate_id
+            : typeof record.taxRateId === "string"
+              ? record.taxRateId
+              : null;
+        const optionSchemaTemplate = optionSchemaId
+          ? await fetchOptionSchemaTemplate(optionSchemaId)
+          : null;
+        const normalizedSchema = normalizeOptionSchemaRecord(
+          optionSchemaTemplate?.schema,
+        );
+        let optionInputs = normalizedSchema
+          ? convertSchemaToProductOptions(normalizedSchema)
+          : [];
         if (!optionInputs.length) {
-          optionInputs = readOptionSchema(metadata)
+          optionInputs = readOptionSchema(metadata);
         }
-        const attachments = await fetchAttachments(productId!)
-        const { customValues } = extractCustomFields(record)
-        const offers = readOfferSnapshots(record)
-        offerSnapshotsRef.current = offers
-        const channelIds = extractChannelIds(offers)
-        const channelOptionEntries = buildChannelOptions(offers)
-        const { ids: categoryIds, options: categoryOptions } = readCategorySelections(record)
-        const { values: tagValues, options: tagOptions } = readTagSelections(record)
-        const defaultMediaId = typeof record.default_media_id === 'string' ? record.default_media_id : (record as any).defaultMediaId ?? null
-        const defaultMediaUrl = typeof record.default_media_url === 'string' ? record.default_media_url : (record as any).defaultMediaUrl ?? ''
+        const [attachments, conversionsRes] = await Promise.all([
+          fetchAttachments(productId!),
+          apiCall<{ items?: Array<Record<string, unknown>> }>(
+            `/api/catalog/product-unit-conversions?productId=${encodeURIComponent(productId!)}&page=1&pageSize=100`,
+            undefined,
+            { fallback: { items: [] } },
+          ),
+        ]);
+        const conversionRows = conversionsRes.ok
+          ? readProductConversionRows(conversionsRes.result?.items)
+          : [];
+        initialConversionsRef.current = conversionRows;
+        const { customValues } = extractCustomFields(record);
+        const offers = readOfferSnapshots(record);
+        offerSnapshotsRef.current = offers;
+        const channelIds = extractChannelIds(offers);
+        const channelOptionEntries = buildChannelOptions(offers);
+        const { ids: categoryIds, options: categoryOptions } =
+          readCategorySelections(record);
+        const { values: tagValues, options: tagOptions } =
+          readTagSelections(record);
+        const defaultMediaId =
+          typeof record.default_media_id === "string"
+            ? record.default_media_id
+            : typeof record.defaultMediaId === "string"
+              ? record.defaultMediaId
+              : null;
+        const defaultMediaUrl =
+          typeof record.default_media_url === "string"
+            ? record.default_media_url
+            : typeof record.defaultMediaUrl === "string"
+              ? record.defaultMediaUrl
+              : "";
+        const {
+          defaultUnit,
+          defaultSalesUnit,
+          defaultSalesUnitQuantity,
+          roundingScale,
+          roundingMode,
+          unitPriceEnabled,
+          unitPriceReferenceUnit,
+          unitPriceBaseQuantity,
+        } = extractUomFields(record);
         const initial: ProductFormValues = {
-          title: typeof record.title === 'string' ? record.title : '',
-          subtitle: typeof record.subtitle === 'string' ? record.subtitle : '',
-          handle: typeof record.handle === 'string' ? record.handle : '',
-          description: typeof record.description === 'string' ? record.description : '',
+          title: typeof record.title === "string" ? record.title : "",
+          subtitle: typeof record.subtitle === "string" ? record.subtitle : "",
+          handle: typeof record.handle === "string" ? record.handle : "",
+          description:
+            typeof record.description === "string" ? record.description : "",
           useMarkdown: Boolean(metadata.__useMarkdown),
           taxRateId,
           mediaDraftId: productId!,
@@ -282,544 +585,776 @@ export default function EditCatalogProductPage({ params }: { params?: { id?: str
           metadata,
           dimensions: sanitizeProductDimensions(dimensions),
           weight: sanitizeProductWeight(weight),
+          defaultUnit: defaultUnit ?? null,
+          defaultSalesUnit: defaultSalesUnit ?? defaultUnit ?? null,
+          defaultSalesUnitQuantity: String(defaultSalesUnitQuantity ?? 1),
+          uomRoundingScale: String(roundingScale),
+          uomRoundingMode: roundingMode,
+          unitPriceEnabled,
+          unitPriceReferenceUnit:
+            unitPriceReferenceUnit &&
+            UNIT_PRICE_REFERENCE_UNITS.has(
+              unitPriceReferenceUnit as ProductUnitPriceReferenceUnit,
+            )
+              ? (unitPriceReferenceUnit as ProductUnitPriceReferenceUnit)
+              : null,
+          unitPriceBaseQuantity:
+            unitPriceBaseQuantity === null ? "" : String(unitPriceBaseQuantity),
+          unitConversions: conversionRows,
           customFieldsetCode:
-            typeof record.custom_fieldset_code === 'string'
+            typeof record.custom_fieldset_code === "string"
               ? record.custom_fieldset_code
-              : typeof (record as any).customFieldsetCode === 'string'
-                ? (record as any).customFieldsetCode
+              : typeof record.customFieldsetCode === "string"
+                ? record.customFieldsetCode
                 : null,
           categoryIds,
           channelIds,
           tags: tagValues,
-        }
+        };
         if (!cancelled) {
-          setInitialValues({ ...initial, ...customValues })
+          setInitialValues({ ...initial, ...customValues });
           setCategorizeOptions({
             categories: categoryOptions,
             channels: channelOptionEntries,
             tags: tagOptions,
-          })
+          });
         }
-        await loadVariants(productId!)
+        await loadVariants(productId!);
       } catch (err) {
-        console.error('catalog.products.edit.load failed', err)
+        console.error("catalog.products.edit.load failed", err);
         if (!cancelled) {
-          const message = err instanceof Error && err.message
-            ? err.message
-            : t('catalog.products.edit.errors.load', 'Failed to load product details.')
-          setError(message)
+          const message =
+            err instanceof Error && err.message
+              ? err.message
+              : t(
+                  "catalog.products.edit.errors.load",
+                  "Failed to load product details.",
+                );
+          setError(message);
         }
       } finally {
-        if (!cancelled) setLoading(false)
+        if (!cancelled) setLoading(false);
       }
     }
-    loadProduct()
-    return () => { cancelled = true }
-  }, [productId, t])
+    loadProduct();
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchAttachments, loadVariants, productId, t]);
 
   React.useEffect(() => {
-    let cancelled = false
+    let cancelled = false;
     async function loadPriceKinds() {
       try {
-        const payload = await readApiResultOrThrow<{ items?: PriceKindApiPayload[] }>(
-          '/api/catalog/price-kinds?pageSize=100',
-          undefined,
-          { fallback: { items: [] } },
-        )
-        const items = Array.isArray(payload.items) ? payload.items : []
+        const payload = await readApiResultOrThrow<{
+          items?: PriceKindApiPayload[];
+        }>("/api/catalog/price-kinds?pageSize=100", undefined, {
+          fallback: { items: [] },
+        });
+        const items = Array.isArray(payload.items) ? payload.items : [];
         const summaries = items
           .map((item) => normalizePriceKindSummary(item))
-          .filter((entry): entry is PriceKindSummary => !!entry)
+          .filter((entry): entry is PriceKindSummary => !!entry);
         if (!cancelled) {
-          setPriceKinds(summaries)
+          setPriceKinds(summaries);
         }
       } catch (err) {
-        console.error('catalog.price-kinds.fetch failed', err)
+        console.error("catalog.price-kinds.fetch failed", err);
         if (!cancelled) {
-          setPriceKinds([])
+          setPriceKinds([]);
         }
       }
     }
-    loadPriceKinds().catch(() => {})
+    loadPriceKinds().catch(() => {});
     return () => {
-      cancelled = true
-    }
-  }, [])
+      cancelled = true;
+    };
+  }, []);
 
-  const loadVariants = React.useCallback(async (id: string) => {
-    try {
-      const [variantsRes, pricesRes] = await Promise.all([
-        apiCall<VariantListResponse>(`/api/catalog/variants?productId=${encodeURIComponent(id)}&page=1&pageSize=100`),
-        apiCall<VariantPriceListResponse>(`/api/catalog/prices?productId=${encodeURIComponent(id)}&page=1&pageSize=100`),
-      ])
-      if (!variantsRes.ok) {
-        setVariants([])
-        return
+  const handleVariantDeleted = React.useCallback((variantId: string) => {
+    setVariants((prev) => prev.filter((variant) => variant.id !== variantId));
+  }, []);
+
+  const groups = React.useMemo<CrudFormGroup[]>(
+    () => [
+      {
+        id: "details",
+        column: 1,
+        component: ({ values, setValue, errors }) => (
+          <ProductDetailsSection
+            values={values as ProductFormValues}
+            setValue={setValue}
+            errors={errors}
+            productId={productId ?? ""}
+          />
+        ),
+      },
+      {
+        id: "dimensions",
+        column: 1,
+        component: ({ values, setValue, errors }) => (
+          <ProductDimensionsSection
+            values={values as ProductFormValues}
+            setValue={setValue}
+            errors={errors}
+          />
+        ),
+      },
+      {
+        id: "metadata",
+        column: 1,
+        component: ({ values, setValue, errors }) => (
+          <ProductMetadataSection
+            values={values as ProductFormValues}
+            setValue={setValue}
+            errors={errors}
+          />
+        ),
+      },
+      {
+        id: "options",
+        column: 1,
+        component: ({ values, setValue, errors }) => (
+          <ProductOptionsSection
+            values={values as ProductFormValues}
+            setValue={setValue}
+            errors={errors}
+          />
+        ),
+      },
+      {
+        id: "product-uom",
+        column: 1,
+        bare: true,
+        component: ({ values, setValue, errors }) => (
+          <ProductUomSection
+            values={values as ProductFormValues}
+            setValue={setValue}
+            errors={errors}
+          />
+        ),
+      },
+      {
+        id: "variants",
+        column: 1,
+        component: ({ values, setValue, errors }) => (
+          <ProductVariantsSection
+            values={values as ProductFormValues}
+            setValue={setValue}
+            errors={errors}
+            productId={productId ?? ""}
+            variants={variants}
+            priceKinds={priceKinds}
+            onVariantDeleted={handleVariantDeleted}
+            onVariantsReload={refreshVariants}
+          />
+        ),
+      },
+      {
+        id: "meta",
+        column: 2,
+        title: t("catalog.products.create.meta.title", "Product meta"),
+        description: t(
+          "catalog.products.create.meta.description",
+          "Manage subtitle and handle for storefronts.",
+        ),
+        component: ({ values, setValue, errors }) => (
+          <ProductMetaSection
+            values={values as ProductFormValues}
+            setValue={setValue}
+            errors={errors}
+            taxRates={taxRates}
+          />
+        ),
+      },
+      {
+        id: "categorize",
+        column: 2,
+        title: t("catalog.products.create.organize.title", "Categorize"),
+        description: t(
+          "catalog.products.create.organize.description",
+          "Assign categories, sales channels, and tags.",
+        ),
+        component: ({ values, setValue, errors }) => (
+          <ProductCategorizeSection
+            values={values as ProductFormValues}
+            setValue={setValue}
+            errors={errors}
+            initialCategoryOptions={categorizeOptions.categories}
+            initialChannelOptions={categorizeOptions.channels}
+            initialTagOptions={categorizeOptions.tags}
+          />
+        ),
+      },
+      {
+        id: "custom-fields",
+        column: 2,
+        title: t("catalog.products.edit.custom.title", "Custom attributes"),
+        kind: "customFields",
+      },
+    ],
+    [
+      categorizeOptions,
+      handleVariantDeleted,
+      priceKinds,
+      productId,
+      refreshVariants,
+      t,
+      taxRates,
+      variants,
+    ],
+  );
+
+  const handleSubmit = React.useCallback(
+    async (formValues: ProductFormValues) => {
+      if (!productId) {
+        throw createCrudFormError(
+          t(
+            "catalog.products.edit.errors.idMissing",
+            "Product identifier is missing.",
+          ),
+        );
       }
-      const priceMap: Record<string, VariantPriceSummary[]> = {}
-      if (pricesRes.ok) {
-        const priceItems = Array.isArray(pricesRes.result?.items) ? pricesRes.result?.items : []
-        for (const item of priceItems) {
-          const summary = mapVariantPriceSummary(item)
-          if (!summary) continue
-          if (!priceMap[summary.variantId]) {
-            priceMap[summary.variantId] = []
-          }
-          priceMap[summary.variantId].push(summary)
-        }
-        Object.keys(priceMap).forEach((key) => {
-          priceMap[key].sort((a, b) => {
-            const left = (a.priceKindId ?? '') + (a.currencyCode ?? '')
-            const right = (b.priceKindId ?? '') + (b.currencyCode ?? '')
-            return left.localeCompare(right)
-          })
-        })
+      const parsed = productFormSchema.safeParse(formValues);
+      if (!parsed.success) {
+        const issues = parsed.error.issues;
+        const fieldErrors: Record<string, string> = {};
+        issues.forEach((issue) => {
+          const path = issue.path.join(".") || "form";
+          if (!fieldErrors[path]) fieldErrors[path] = issue.message;
+        });
+        const message =
+          issues[0]?.message ??
+          t(
+            "catalog.products.edit.errors.validation",
+            "Fix highlighted fields.",
+          );
+        throw createCrudFormError(message, fieldErrors);
       }
-      const items = Array.isArray(variantsRes.result?.items) ? variantsRes.result?.items : []
-      setVariants(
-        items
-          .map((variant) => {
-            const variantId = typeof variant.id === 'string' ? variant.id : null
-            if (!variantId) return null
-            const variantRecord = variant as Record<string, unknown>
-            const optionValues =
-              normalizeVariantOptionValues(variantRecord?.['option_values']) ??
-              normalizeVariantOptionValues(variantRecord?.optionValues)
-            return {
-              id: variantId,
-              name: typeof variant.name === 'string' && variant.name.trim().length ? variant.name : variant.sku ?? variantId,
-              sku: typeof variant.sku === 'string' ? variant.sku : '',
-              isDefault: Boolean(variant.is_default ?? variant.isDefault),
-              prices: priceMap[variantId] ?? [],
-              optionValues,
-            }
+      const values: ProductFormValues = {
+        ...BASE_INITIAL_VALUES,
+        ...parsed.data,
+        title: parsed.data.title ?? "",
+        subtitle: parsed.data.subtitle ?? "",
+        handle: parsed.data.handle ?? "",
+        description: parsed.data.description ?? "",
+        useMarkdown: parsed.data.useMarkdown ?? false,
+        taxRateId: parsed.data.taxRateId ?? null,
+        mediaDraftId: parsed.data.mediaDraftId ?? productId!,
+        mediaItems: Array.isArray(parsed.data.mediaItems)
+          ? parsed.data.mediaItems
+          : [],
+        defaultMediaId: parsed.data.defaultMediaId ?? null,
+        defaultMediaUrl: parsed.data.defaultMediaUrl ?? "",
+        hasVariants: parsed.data.hasVariants ?? false,
+        options: Array.isArray(parsed.data.options) ? parsed.data.options : [],
+        variants: Array.isArray(parsed.data.variants)
+          ? parsed.data.variants
+          : [],
+        metadata: parsed.data.metadata ?? {},
+        dimensions: parsed.data.dimensions ?? null,
+        weight: parsed.data.weight ?? null,
+        defaultUnit: parsed.data.defaultUnit ?? null,
+        defaultSalesUnit: parsed.data.defaultSalesUnit ?? null,
+        defaultSalesUnitQuantity:
+          parsed.data.defaultSalesUnitQuantity?.toString() ?? "1",
+        uomRoundingScale: parsed.data.uomRoundingScale?.toString() ?? "4",
+        uomRoundingMode: parsed.data.uomRoundingMode ?? "half_up",
+        unitPriceEnabled: Boolean(parsed.data.unitPriceEnabled),
+        unitPriceReferenceUnit: parsed.data.unitPriceReferenceUnit ?? null,
+        unitPriceBaseQuantity:
+          parsed.data.unitPriceBaseQuantity?.toString() ?? "",
+        unitConversions: Array.isArray(parsed.data.unitConversions)
+          ? parsed.data.unitConversions.map((entry) => ({
+              id: toTrimmedOrNull(entry.id) ?? null,
+              unitCode: toTrimmedOrNull(entry.unitCode) ?? "",
+              toBaseFactor:
+                toPositiveNumberOrNull(entry.toBaseFactor) === null
+                  ? ""
+                  : String(toPositiveNumberOrNull(entry.toBaseFactor)),
+              sortOrder:
+                typeof entry.sortOrder === "number" &&
+                Number.isFinite(entry.sortOrder)
+                  ? String(entry.sortOrder)
+                  : "",
+              isActive: entry.isActive !== false,
+            }))
+          : [],
+        customFieldsetCode: parsed.data.customFieldsetCode ?? null,
+        categoryIds: parsed.data.categoryIds ?? [],
+        channelIds: parsed.data.channelIds ?? [],
+        tags: parsed.data.tags ?? [],
+        optionSchemaId: parsed.data.optionSchemaId ?? null,
+      };
+      const title = values.title?.trim();
+      if (!title) {
+        const message = t(
+          "catalog.products.create.errors.title",
+          "Provide a product title.",
+        );
+        throw createCrudFormError(message, { title: message });
+      }
+      const handle = values.handle?.trim() || undefined;
+      const description = values.description?.trim() || undefined;
+      const metadata = buildMetadataPayload(values);
+      const dimensions = sanitizeProductDimensions(values.dimensions ?? null);
+      const weight = sanitizeProductWeight(values.weight ?? null);
+      const resolveTaxRateValue = (taxRateId?: string | null) => {
+        if (!taxRateId) return null;
+        const match = taxRates.find((rate) => rate.id === taxRateId);
+        return typeof match?.rate === "number" && Number.isFinite(match.rate)
+          ? match.rate
+          : null;
+      };
+      const productTaxRateValue = resolveTaxRateValue(values.taxRateId ?? null);
+      const defaultMediaId =
+        typeof values.defaultMediaId === "string" &&
+        values.defaultMediaId.trim().length
+          ? values.defaultMediaId
+          : null;
+      const defaultMediaEntry = defaultMediaId
+        ? values.mediaItems.find((item) => item.id === defaultMediaId)
+        : null;
+      const defaultMediaUrl = defaultMediaEntry
+        ? buildAttachmentImageUrl(defaultMediaEntry.id, {
+            slug: slugifyAttachmentFileName(defaultMediaEntry.fileName),
           })
-          .filter((entry): entry is VariantSummary => !!entry),
-      )
-    } catch (err) {
-      console.error('catalog.variants.fetch failed', err)
-      setVariants([])
-    }
-  }, [])
-
-  const refreshVariants = React.useCallback(async () => {
-    if (!productId) return
-    await loadVariants(productId)
-  }, [loadVariants, productId])
-
-  const fetchAttachments = React.useCallback(async (id: string): Promise<ProductMediaItem[]> => {
-    try {
-      const res = await apiCall<AttachmentListResponse>(
-        `/api/attachments?entityId=${encodeURIComponent(E.catalog.catalog_product)}&recordId=${encodeURIComponent(id)}`,
-      )
-      if (!res.ok) return []
-      return (res.result?.items ?? []).map((item) => ({
-        id: item.id,
-        url: item.url,
-        fileName: item.fileName,
-        fileSize: item.fileSize,
-        thumbnailUrl: item.thumbnailUrl ?? undefined,
-      }))
-    } catch (err) {
-      console.error('attachments.fetch failed', err)
-      return []
-    }
-  }, [])
-
-function mapVariantPriceSummary(item: VariantPriceSummaryApi | undefined): VariantPriceSummary | null {
-  if (!item) return null
-  const getString = (value: unknown): string | null => {
-    if (typeof value === 'string' && value.trim().length) return value.trim()
-    if (typeof value === 'number' || typeof value === 'bigint') return String(value)
-    return null
-  }
-  const variantId = getString(item.variant_id ?? item.variantId)
-  const id = getString(item.id)
-  if (!variantId || !id) return null
-  const priceKindId = getString(item.price_kind_id ?? item.priceKindId)
-  const currencyCode = getString(item.currency_code ?? item.currencyCode)
-  const unitGross = getString(item.unit_price_gross ?? item.unitPriceGross)
-  const unitNet = getString(item.unit_price_net ?? item.unitPriceNet)
-  const amount = unitGross ?? unitNet ?? null
-  return {
-    id,
-    variantId,
-    priceKindId,
-    currencyCode,
-    amount,
-    displayMode: unitGross ? 'including-tax' : 'excluding-tax',
-  }
-}
-
-function normalizeVariantOptionValues(input: unknown): Record<string, string> | null {
-  if (!input || typeof input !== 'object') return null
-  const result: Record<string, string> = {}
-  Object.entries(input as Record<string, unknown>).forEach(([key, value]) => {
-    if (typeof key === 'string' && typeof value === 'string' && key.trim().length) {
-      result[key] = value
-    }
-  })
-  return Object.keys(result).length ? result : null
-}
-
-  const handleVariantDeleted = React.useCallback((variantId: string) => {
-    setVariants((prev) => prev.filter((variant) => variant.id !== variantId))
-  }, [])
-
-  const groups = React.useMemo<CrudFormGroup[]>(() => [
-    {
-      id: 'details',
-      column: 1,
-      component: ({ values, setValue, errors }) => (
-        <ProductDetailsSection
-          values={values as ProductFormValues}
-          setValue={setValue}
-          errors={errors}
-          productId={productId ?? ''}
-        />
-      ),
-    },
-    {
-      id: 'dimensions',
-      column: 1,
-      component: ({ values, setValue, errors }) => (
-        <ProductDimensionsSection values={values as ProductFormValues} setValue={setValue} errors={errors} />
-      ),
-    },
-    {
-      id: 'metadata',
-      column: 1,
-      component: ({ values, setValue, errors }) => (
-        <ProductMetadataSection values={values as ProductFormValues} setValue={setValue} errors={errors} />
-      ),
-    },
-    {
-      id: 'options',
-      column: 1,
-      component: ({ values, setValue, errors }) => (
-        <ProductOptionsSection values={values as ProductFormValues} setValue={setValue} errors={errors} />
-      ),
-    },
-    {
-      id: 'variants',
-      column: 1,
-      component: ({ values, setValue, errors }) => (
-        <ProductVariantsSection
-          values={values as ProductFormValues}
-          setValue={setValue}
-          errors={errors}
-          productId={productId ?? ''}
-          variants={variants}
-          priceKinds={priceKinds}
-          onVariantDeleted={handleVariantDeleted}
-          onVariantsReload={refreshVariants}
-        />
-      ),
-    },
-    {
-      id: 'meta',
-      column: 2,
-      title: t('catalog.products.create.meta.title', 'Product meta'),
-      description: t('catalog.products.create.meta.description', 'Manage subtitle and handle for storefronts.'),
-      component: ({ values, setValue, errors }) => (
-        <ProductMetaSection values={values as ProductFormValues} setValue={setValue} errors={errors} taxRates={taxRates} />
-      ),
-    },
-    {
-      id: 'categorize',
-      column: 2,
-      title: t('catalog.products.create.organize.title', 'Categorize'),
-      description: t('catalog.products.create.organize.description', 'Assign categories, sales channels, and tags.'),
-      component: ({ values, setValue, errors }) => (
-        <ProductCategorizeSection
-          values={values as ProductFormValues}
-          setValue={setValue}
-          errors={errors}
-          initialCategoryOptions={categorizeOptions.categories}
-          initialChannelOptions={categorizeOptions.channels}
-          initialTagOptions={categorizeOptions.tags}
-        />
-      ),
-    },
-    {
-      id: 'custom-fields',
-      column: 2,
-      title: t('catalog.products.edit.custom.title', 'Custom attributes'),
-      kind: 'customFields',
-    },
-  ], [categorizeOptions, handleVariantDeleted, priceKinds, productId, t, taxRates, variants])
-
-  const handleSubmit = React.useCallback(async (formValues: ProductFormValues) => {
-    if (!productId) {
-      throw createCrudFormError(t('catalog.products.edit.errors.idMissing', 'Product identifier is missing.'))
-    }
-    const parsed = productFormSchema.safeParse(formValues)
-    if (!parsed.success) {
-      const issues = parsed.error.issues
-      const fieldErrors: Record<string, string> = {}
-      issues.forEach((issue) => {
-        const path = issue.path.join('.') || 'form'
-        if (!fieldErrors[path]) fieldErrors[path] = issue.message
-      })
-      const message = issues[0]?.message ?? t('catalog.products.edit.errors.validation', 'Fix highlighted fields.')
-      throw createCrudFormError(message, fieldErrors)
-    }
-    const values: ProductFormValues = {
-      ...BASE_INITIAL_VALUES,
-      ...parsed.data,
-      title: parsed.data.title ?? '',
-      subtitle: parsed.data.subtitle ?? '',
-      handle: parsed.data.handle ?? '',
-      description: parsed.data.description ?? '',
-      useMarkdown: parsed.data.useMarkdown ?? false,
-      taxRateId: parsed.data.taxRateId ?? null,
-      mediaDraftId: parsed.data.mediaDraftId ?? productId!,
-      mediaItems: Array.isArray(parsed.data.mediaItems) ? parsed.data.mediaItems : [],
-      defaultMediaId: parsed.data.defaultMediaId ?? null,
-      defaultMediaUrl: parsed.data.defaultMediaUrl ?? '',
-      hasVariants: parsed.data.hasVariants ?? false,
-      options: Array.isArray(parsed.data.options) ? parsed.data.options : [],
-      variants: Array.isArray(parsed.data.variants) ? parsed.data.variants : [],
-      metadata: parsed.data.metadata ?? {},
-      dimensions: parsed.data.dimensions ?? null,
-      weight: parsed.data.weight ?? null,
-      customFieldsetCode: parsed.data.customFieldsetCode ?? null,
-      categoryIds: parsed.data.categoryIds ?? [],
-      channelIds: parsed.data.channelIds ?? [],
-      tags: parsed.data.tags ?? [],
-      optionSchemaId: parsed.data.optionSchemaId ?? null,
-    }
-    const title = values.title?.trim()
-    if (!title) {
-      const message = t('catalog.products.create.errors.title', 'Provide a product title.')
-      throw createCrudFormError(message, { title: message })
-    }
-    const handle = values.handle?.trim() || undefined
-    const description = values.description?.trim() || undefined
-    const metadata = buildMetadataPayload(values)
-    const dimensions = sanitizeProductDimensions(values.dimensions ?? null)
-    const weight = sanitizeProductWeight(values.weight ?? null)
-    const resolveTaxRateValue = (taxRateId?: string | null) => {
-      if (!taxRateId) return null
-      const match = taxRates.find((rate) => rate.id === taxRateId)
-      return typeof match?.rate === 'number' && Number.isFinite(match.rate) ? match.rate : null
-    }
-    const productTaxRateValue = resolveTaxRateValue(values.taxRateId ?? null)
-    const defaultMediaId = typeof values.defaultMediaId === 'string' && values.defaultMediaId.trim().length
-      ? values.defaultMediaId
-      : null
-    const defaultMediaEntry = defaultMediaId ? values.mediaItems.find((item) => item.id === defaultMediaId) : null
-    const defaultMediaUrl = defaultMediaEntry
-      ? buildAttachmentImageUrl(defaultMediaEntry.id, {
-          slug: slugifyAttachmentFileName(defaultMediaEntry.fileName),
-        })
-      : null
-    const payload: Record<string, unknown> = {
-      id: productId,
-      title,
-      subtitle: values.subtitle?.trim() || undefined,
-      description,
-      handle,
-      taxRateId: values.taxRateId ?? null,
-      taxRate: productTaxRateValue ?? null,
-      isConfigurable: Boolean(values.hasVariants),
-      metadata,
-      dimensions,
-      weightValue: weight?.value ?? null,
-      weightUnit: weight?.unit ?? null,
-      defaultMediaId: defaultMediaId ?? undefined,
-      defaultMediaUrl: defaultMediaUrl ?? undefined,
-      customFieldsetCode: values.customFieldsetCode?.trim().length ? values.customFieldsetCode : undefined,
-    }
-    const categoryIds = normalizeIdList(values.categoryIds)
-    const channelIds = normalizeIdList(values.channelIds)
-    const tags = normalizeTagValues(values.tags)
-    payload.categoryIds = categoryIds
-    payload.tags = tags
-    const optionSchemaDefinition = buildOptionSchemaDefinition(values.options, title)
-    if (optionSchemaDefinition) {
-      payload.optionSchema = optionSchemaDefinition
-    } else if (values.optionSchemaId) {
-      payload.optionSchemaId = null
-    }
-    const customFields = collectCustomFieldValues(values)
-    if (Object.keys(customFields).length) {
-      payload.customFields = customFields
-    }
-    const previousSnapshots = offerSnapshotsRef.current
-    const offersPayload = buildOfferPayloads({
-      channelIds,
-      offerSnapshots: previousSnapshots,
-      fallback: {
+        : null;
+      const defaultUnit = canonicalizeUnitCode(values.defaultUnit);
+      const defaultSalesUnit = canonicalizeUnitCode(values.defaultSalesUnit);
+      const defaultSalesUnitQuantity =
+        toPositiveNumberOrNull(values.defaultSalesUnitQuantity) ?? 1;
+      const uomRoundingScale = toIntegerInRangeOrDefault(
+        values.uomRoundingScale,
+        0,
+        6,
+        4,
+      );
+      const uomRoundingMode: ProductUnitRoundingMode =
+        values.uomRoundingMode === "down" || values.uomRoundingMode === "up"
+          ? values.uomRoundingMode
+          : "half_up";
+      const unitPriceEnabled = Boolean(values.unitPriceEnabled);
+      const unitPriceReferenceUnit = canonicalizeUnitCode(
+        values.unitPriceReferenceUnit,
+      );
+      const unitPriceBaseQuantity = toPositiveNumberOrNull(
+        values.unitPriceBaseQuantity,
+      );
+      if (defaultSalesUnit && !defaultUnit) {
+        const message = t(
+          "catalog.products.uom.errors.baseRequired",
+          "Base unit is required when default sales unit is set.",
+        );
+        throw createCrudFormError(message, { defaultSalesUnit: message });
+      }
+      const conversionInputs = normalizeProductConversionInputs(
+        values.unitConversions,
+        t(
+          "catalog.products.uom.errors.duplicateConversion",
+          "Duplicate conversion unit is not allowed.",
+        ),
+      );
+      if (conversionInputs.length && !defaultUnit) {
+        const message = t(
+          "catalog.products.uom.errors.baseRequiredForConversions",
+          "Base unit is required when conversions are configured.",
+        );
+        throw createCrudFormError(message, { defaultUnit: message });
+      }
+      const defaultUnitKey = defaultUnit?.toLowerCase() ?? null;
+      const defaultSalesUnitKey = defaultSalesUnit?.toLowerCase() ?? null;
+      if (
+        defaultUnitKey &&
+        defaultSalesUnitKey &&
+        defaultSalesUnitKey !== defaultUnitKey
+      ) {
+        const hasDefaultSalesConversion = conversionInputs.some(
+          (entry) =>
+            entry.isActive &&
+            entry.unitCode.toLowerCase() === defaultSalesUnitKey,
+        );
+        if (!hasDefaultSalesConversion) {
+          const message = t(
+            "catalog.products.uom.errors.defaultSalesConversionRequired",
+            "Active conversion for default sales unit is required when it differs from base unit.",
+          );
+          throw createCrudFormError(message, {
+            defaultSalesUnit: message,
+            unitConversions: message,
+          });
+        }
+      }
+      if (unitPriceEnabled) {
+        if (
+          !unitPriceReferenceUnit ||
+          !UNIT_PRICE_REFERENCE_UNITS.has(
+            unitPriceReferenceUnit as ProductUnitPriceReferenceUnit,
+          )
+        ) {
+          const message = t(
+            "catalog.products.unitPrice.errors.referenceUnit",
+            "Reference unit is required when unit price display is enabled.",
+          );
+          throw createCrudFormError(message, {
+            unitPriceReferenceUnit: message,
+          });
+        }
+        if (unitPriceBaseQuantity === null) {
+          const message = t(
+            "catalog.products.unitPrice.errors.baseQuantity",
+            "Base quantity is required when unit price display is enabled.",
+          );
+          throw createCrudFormError(message, {
+            unitPriceBaseQuantity: message,
+          });
+        }
+      }
+      const payload: Record<string, unknown> = {
+        id: productId,
         title,
-        description: description ?? undefined,
-        defaultMediaId,
+        subtitle: values.subtitle?.trim() || undefined,
+        description,
+        handle,
+        taxRateId: values.taxRateId ?? null,
+        taxRate: productTaxRateValue ?? null,
+        isConfigurable: Boolean(values.hasVariants),
+        metadata,
+        dimensions,
+        weightValue: weight?.value ?? null,
+        weightUnit: weight?.unit ?? null,
+        defaultMediaId: defaultMediaId ?? undefined,
         defaultMediaUrl: defaultMediaUrl ?? undefined,
-      },
-    })
-    payload.offers = offersPayload
-    const removedOffers = previousSnapshots.filter(
-      (offer) => typeof offer.id === 'string' && !channelIds.includes(offer.channelId),
-    )
-    if (removedOffers.length) {
-      try {
-        for (const offer of removedOffers) {
-          if (!offer.id) continue
-          await deleteCrud('catalog/offers', offer.id, {
-            errorMessage: t('catalog.products.edit.offers.deleteError', 'Failed to remove sales channel offer.'),
-          })
+        defaultUnit: defaultUnit ?? null,
+        defaultSalesUnit: defaultSalesUnit ?? defaultUnit ?? null,
+        defaultSalesUnitQuantity,
+        uomRoundingScale,
+        uomRoundingMode,
+        unitPriceEnabled,
+        unitPriceReferenceUnit: unitPriceEnabled
+          ? unitPriceReferenceUnit
+          : undefined,
+        unitPriceBaseQuantity: unitPriceEnabled
+          ? unitPriceBaseQuantity
+          : undefined,
+        customFieldsetCode: values.customFieldsetCode?.trim().length
+          ? values.customFieldsetCode
+          : undefined,
+      };
+      const categoryIds = normalizeIdList(values.categoryIds);
+      const channelIds = normalizeIdList(values.channelIds);
+      const tags = normalizeTagValues(values.tags);
+      payload.categoryIds = categoryIds;
+      payload.tags = tags;
+      const optionSchemaDefinition = buildOptionSchemaDefinition(
+        values.options,
+        title,
+      );
+      if (optionSchemaDefinition) {
+        payload.optionSchema = optionSchemaDefinition;
+      } else if (values.optionSchemaId) {
+        payload.optionSchemaId = null;
+      }
+      const customFields = collectCustomFieldValues(values);
+      if (Object.keys(customFields).length) {
+        payload.customFields = customFields;
+      }
+      const previousSnapshots = offerSnapshotsRef.current;
+      const offersPayload = buildOfferPayloads({
+        channelIds,
+        offerSnapshots: previousSnapshots,
+        fallback: {
+          title,
+          description: description ?? undefined,
+          defaultMediaId,
+          defaultMediaUrl: defaultMediaUrl ?? undefined,
+        },
+      });
+      payload.offers = offersPayload;
+      const removedOffers = previousSnapshots.filter(
+        (offer) =>
+          typeof offer.id === "string" && !channelIds.includes(offer.channelId),
+      );
+      if (removedOffers.length) {
+        try {
+          for (const offer of removedOffers) {
+            if (!offer.id) continue;
+            await deleteCrud("catalog/offers", offer.id, {
+              errorMessage: t(
+                "catalog.products.edit.offers.deleteError",
+                "Failed to remove sales channel offer.",
+              ),
+            });
+          }
+        } catch (err) {
+          console.error("catalog.products.edit.offers.delete", err);
+          throw createCrudFormError(
+            t(
+              "catalog.products.edit.offers.deleteError",
+              "Failed to remove sales channel offer.",
+            ),
+          );
         }
-      } catch (err) {
-        console.error('catalog.products.edit.offers.delete', err)
-        throw createCrudFormError(
-          t('catalog.products.edit.offers.deleteError', 'Failed to remove sales channel offer.'),
-        )
       }
-    }
-    await updateCrud('catalog/products', payload)
-    offerSnapshotsRef.current = mergeOfferSnapshots(previousSnapshots, offersPayload)
-    flash(t('catalog.products.edit.success', 'Product updated.'), 'success')
-    router.push('/backend/catalog/products')
-  }, [productId, t, taxRates, router])
+      await updateCrud("catalog/products", payload);
+      const previousConversionIds = new Set(
+        initialConversionsRef.current
+          .map((entry) => toTrimmedOrNull(entry.id))
+          .filter((id): id is string => Boolean(id)),
+      );
+      const nextConversionIds = new Set(
+        conversionInputs
+          .map((entry) =>
+            entry.id && entry.id.trim().length ? entry.id : null,
+          )
+          .filter((id): id is string => Boolean(id)),
+      );
+      const removedConversionIds = Array.from(previousConversionIds).filter(
+        (id) => !nextConversionIds.has(id),
+      );
+      for (const conversionId of removedConversionIds) {
+        await deleteCrud("catalog/product-unit-conversions", conversionId, {
+          errorMessage: t(
+            "catalog.products.uom.errors.sync",
+            "Failed to synchronize product conversions.",
+          ),
+        });
+      }
+      const persistedConversions: ProductUnitConversionDraft[] = [];
+      for (const conversion of conversionInputs) {
+        if (conversion.id) {
+          await updateCrud("catalog/product-unit-conversions", {
+            id: conversion.id,
+            unitCode: conversion.unitCode,
+            toBaseFactor: conversion.toBaseFactor,
+            sortOrder: conversion.sortOrder,
+            isActive: conversion.isActive,
+          });
+          persistedConversions.push({
+            id: conversion.id,
+            unitCode: conversion.unitCode,
+            toBaseFactor: String(conversion.toBaseFactor),
+            sortOrder: String(conversion.sortOrder),
+            isActive: conversion.isActive,
+          });
+          continue;
+        }
+        const created = await createCrud<{ id?: string }>(
+          "catalog/product-unit-conversions",
+          {
+            productId,
+            unitCode: conversion.unitCode,
+            toBaseFactor: conversion.toBaseFactor,
+            sortOrder: conversion.sortOrder,
+            isActive: conversion.isActive,
+          },
+        );
+        const createdId =
+          created.result &&
+          typeof created.result === "object" &&
+          typeof (created.result as { id?: unknown }).id === "string"
+            ? (created.result as { id: string }).id
+            : null;
+        persistedConversions.push({
+          id: createdId,
+          unitCode: conversion.unitCode,
+          toBaseFactor: String(conversion.toBaseFactor),
+          sortOrder: String(conversion.sortOrder),
+          isActive: conversion.isActive,
+        });
+      }
+      initialConversionsRef.current = persistedConversions;
+      offerSnapshotsRef.current = mergeOfferSnapshots(
+        previousSnapshots,
+        offersPayload,
+      );
+      flash(t("catalog.products.edit.success", "Product updated."), "success");
+      router.push("/backend/catalog/products");
+    },
+    [productId, t, taxRates, router],
+  );
 
   if (!productId) {
     return (
       <Page>
         <PageBody>
           <div className="rounded border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
-            {t('catalog.products.edit.errors.idMissing', 'Product identifier is missing.')}
+            {t(
+              "catalog.products.edit.errors.idMissing",
+              "Product identifier is missing.",
+            )}
           </div>
         </PageBody>
       </Page>
-    )
+    );
   }
 
   return (
     <Page>
       <PageBody>
         {error ? (
-          <div className="mb-4 rounded border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">{error}</div>
+          <div className="mb-4 rounded border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+            {error}
+          </div>
         ) : null}
         <CrudForm<ProductFormValues>
-          title={t('catalog.products.edit.title', 'Edit product')}
+          title={t("catalog.products.edit.title", "Edit product")}
           backHref="/backend/catalog/products"
-          versionHistory={{ resourceKind: 'catalog.product', resourceId: productId ? String(productId) : '' }}
+          versionHistory={{
+            resourceKind: "catalog.product",
+            resourceId: productId ? String(productId) : "",
+          }}
           fields={[]}
           groups={groups}
           injectionSpotId="crud-form:catalog.product"
           entityId={E.catalog.catalog_product}
-          customFieldsetBindings={{ [E.catalog.catalog_product]: { valueKey: 'customFieldsetCode' } }}
+          customFieldsetBindings={{
+            [E.catalog.catalog_product]: { valueKey: "customFieldsetCode" },
+          }}
           initialValues={initialValues ?? undefined}
           isLoading={loading}
-          loadingMessage={t('catalog.products.edit.loading', 'Loading product')}
-          submitLabel={t('catalog.products.edit.save', 'Save changes')}
+          loadingMessage={t("catalog.products.edit.loading", "Loading product")}
+          submitLabel={t("catalog.products.edit.save", "Save changes")}
           cancelHref="/backend/catalog/products"
           onSubmit={handleSubmit}
         />
       </PageBody>
     </Page>
-  )
+  );
 }
 
+type ProductFormGroupProps = CrudFormGroupComponentProps & {
+  values: ProductFormValues;
+};
 
-type ProductFormGroupProps = CrudFormGroupComponentProps & { values: ProductFormValues }
+type ProductDetailsSectionProps = ProductFormGroupProps & { productId: string };
 
-type ProductDetailsSectionProps = ProductFormGroupProps & { productId: string }
+type ProductMetaSectionProps = ProductFormGroupProps & {
+  taxRates: TaxRateSummary[];
+};
 
-type ProductMetaSectionProps = ProductFormGroupProps & { taxRates: TaxRateSummary[] }
-
-type ProductVariantsSectionProps = Omit<CrudFormGroupComponentProps, 'values'> & {
-  values: ProductFormValues
-  productId: string
-  variants: VariantSummary[]
-  priceKinds: PriceKindSummary[]
-  onVariantDeleted: (variantId: string) => void
-  onVariantsReload?: () => Promise<void> | void
-}
+type ProductVariantsSectionProps = Omit<
+  CrudFormGroupComponentProps,
+  "values"
+> & {
+  values: ProductFormValues;
+  productId: string;
+  variants: VariantSummary[];
+  priceKinds: PriceKindSummary[];
+  onVariantDeleted: (variantId: string) => void;
+  onVariantsReload?: () => Promise<void> | void;
+};
 
-type ProductDimensionsSectionProps = ProductFormGroupProps
+type ProductDimensionsSectionProps = ProductFormGroupProps;
 
-function ProductDetailsSection({ values, setValue, errors, productId }: ProductDetailsSectionProps) {
-  const t = useT()
-  const mediaItems = Array.isArray(values.mediaItems) ? values.mediaItems : []
+function ProductDetailsSection({
+  values,
+  setValue,
+  errors,
+  productId,
+}: ProductDetailsSectionProps) {
+  const t = useT();
+  const mediaItems = React.useMemo(
+    () => (Array.isArray(values.mediaItems) ? values.mediaItems : []),
+    [values.mediaItems],
+  );
 
   const handleMediaItemsChange = React.useCallback(
     (nextItems: ProductMediaItem[]) => {
-      setValue('mediaItems', nextItems)
-      const hasCurrent = nextItems.some((item) => item.id === values.defaultMediaId)
+      setValue("mediaItems", nextItems);
+      const hasCurrent = nextItems.some(
+        (item) => item.id === values.defaultMediaId,
+      );
       if (!hasCurrent) {
-        const fallbackId = nextItems[0]?.id ?? null
-        setValue('defaultMediaId', fallbackId)
+        const fallbackId = nextItems[0]?.id ?? null;
+        setValue("defaultMediaId", fallbackId);
         if (fallbackId && nextItems[0]) {
           setValue(
-            'defaultMediaUrl',
+            "defaultMediaUrl",
             buildAttachmentImageUrl(fallbackId, {
               slug: slugifyAttachmentFileName(nextItems[0].fileName),
             }),
-          )
+          );
         } else {
-          setValue('defaultMediaUrl', '')
+          setValue("defaultMediaUrl", "");
         }
       }
     },
     [setValue, values.defaultMediaId],
-  )
+  );
 
   const handleDefaultMediaChange = React.useCallback(
     (attachmentId: string | null) => {
-      setValue('defaultMediaId', attachmentId)
+      setValue("defaultMediaId", attachmentId);
       if (!attachmentId) {
-        setValue('defaultMediaUrl', '')
-        return
+        setValue("defaultMediaUrl", "");
+        return;
       }
-      const target = mediaItems.find((item) => item.id === attachmentId)
+      const target = mediaItems.find((item) => item.id === attachmentId);
       if (target) {
         setValue(
-          'defaultMediaUrl',
-          buildAttachmentImageUrl(target.id, { slug: slugifyAttachmentFileName(target.fileName) }),
-        )
+          "defaultMediaUrl",
+          buildAttachmentImageUrl(target.id, {
+            slug: slugifyAttachmentFileName(target.fileName),
+          }),
+        );
       }
     },
     [mediaItems, setValue],
-  )
+  );
 
   return (
     <div className="space-y-6">
       <div className="space-y-2">
         <Label className="flex items-center gap-1">
-          {t('catalog.products.form.title', 'Title')}
+          {t("catalog.products.form.title", "Title")}
           <span className="text-red-600">*</span>
         </Label>
         <Input
           value={values.title}
-          onChange={(event) => setValue('title', event.target.value)}
-          placeholder={t('catalog.products.create.placeholders.title', 'e.g., Summer sneaker')}
+          onChange={(event) => setValue("title", event.target.value)}
+          placeholder={t(
+            "catalog.products.create.placeholders.title",
+            "e.g., Summer sneaker",
+          )}
         />
-        {errors.title ? <p className="text-xs text-red-600">{errors.title}</p> : null}
+        {errors.title ? (
+          <p className="text-xs text-red-600">{errors.title}</p>
+        ) : null}
       </div>
 
       <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <Label>{t('catalog.products.form.description', 'Description')}</Label>
+          <Label>{t("catalog.products.form.description", "Description")}</Label>
           <Button
             type="button"
             variant="ghost"
             size="sm"
-            onClick={() => setValue('useMarkdown', !values.useMarkdown)}
+            onClick={() => setValue("useMarkdown", !values.useMarkdown)}
             className="gap-2 text-xs"
           >
-            {values.useMarkdown ? <AlignLeft className="h-4 w-4" /> : <FileText className="h-4 w-4" />}
+            {values.useMarkdown ? (
+              <AlignLeft className="h-4 w-4" />
+            ) : (
+              <FileText className="h-4 w-4" />
+            )}
             {values.useMarkdown
-              ? t('catalog.products.create.actions.usePlain', 'Use plain text')
-              : t('catalog.products.create.actions.useMarkdown', 'Use markdown')}
+              ? t("catalog.products.create.actions.usePlain", "Use plain text")
+              : t(
+                  "catalog.products.create.actions.useMarkdown",
+                  "Use markdown",
+                )}
           </Button>
         </div>
         {values.useMarkdown ? (
-          <div data-color-mode="light" className="overflow-hidden rounded-md border">
+          <div
+            data-color-mode="light"
+            className="overflow-hidden rounded-md border"
+          >
             <MarkdownEditor
               value={values.description}
               height={260}
-              onChange={(val) => setValue('description', val ?? '')}
+              onChange={(val) => setValue("description", val ?? "")}
               previewOptions={{ remarkPlugins: [] }}
             />
           </div>
@@ -827,8 +1362,11 @@ function ProductDetailsSection({ values, setValue, errors, productId }: ProductD
           <Textarea
             className="min-h-[180px]"
             value={values.description}
-            onChange={(event) => setValue('description', event.target.value)}
-            placeholder={t('catalog.products.create.placeholders.description', 'Describe the product...')}
+            onChange={(event) => setValue("description", event.target.value)}
+            placeholder={t(
+              "catalog.products.create.placeholders.description",
+              "Describe the product...",
+            )}
           />
         )}
       </div>
@@ -842,195 +1380,334 @@ function ProductDetailsSection({ values, setValue, errors, productId }: ProductD
         onDefaultChange={handleDefaultMediaChange}
       />
     </div>
-  )
+  );
 }
 
-function ProductDimensionsSection({ values, setValue }: ProductDimensionsSectionProps) {
-  const t = useT()
-  const dimensionValues = normalizeProductDimensions(values.dimensions)
-  const weightValues = normalizeProductWeight(values.weight)
+function ProductDimensionsSection({
+  values,
+  setValue,
+}: ProductDimensionsSectionProps) {
+  const t = useT();
+  const dimensionValues = normalizeProductDimensions(values.dimensions);
+  const weightValues = normalizeProductWeight(values.weight);
 
   return (
     <div className="space-y-4">
-      <h3 className="text-sm font-semibold">{t('catalog.products.edit.dimensions', 'Dimensions & weight')}</h3>
+      <h3 className="text-sm font-semibold">
+        {t("catalog.products.edit.dimensions", "Dimensions & weight")}
+      </h3>
       <div className="grid gap-4 sm:grid-cols-2">
         <div className="space-y-2">
-          <Label className="text-xs uppercase text-muted-foreground">{t('catalog.products.edit.dimensions.width', 'Width')}</Label>
+          <Label className="text-xs uppercase text-muted-foreground">
+            {t("catalog.products.edit.dimensions.width", "Width")}
+          </Label>
           <Input
             type="number"
-            value={dimensionValues?.width ?? ''}
-            onChange={(event) => setValue('dimensions', updateDimensionValue(values.dimensions ?? null, 'width', event.target.value))}
+            value={dimensionValues?.width ?? ""}
+            onChange={(event) =>
+              setValue(
+                "dimensions",
+                updateDimensionValue(
+                  values.dimensions ?? null,
+                  "width",
+                  event.target.value,
+                ),
+              )
+            }
             placeholder="0"
           />
         </div>
         <div className="space-y-2">
-          <Label className="text-xs uppercase text-muted-foreground">{t('catalog.products.edit.dimensions.height', 'Height')}</Label>
+          <Label className="text-xs uppercase text-muted-foreground">
+            {t("catalog.products.edit.dimensions.height", "Height")}
+          </Label>
           <Input
             type="number"
-            value={dimensionValues?.height ?? ''}
-            onChange={(event) => setValue('dimensions', updateDimensionValue(values.dimensions ?? null, 'height', event.target.value))}
+            value={dimensionValues?.height ?? ""}
+            onChange={(event) =>
+              setValue(
+                "dimensions",
+                updateDimensionValue(
+                  values.dimensions ?? null,
+                  "height",
+                  event.target.value,
+                ),
+              )
+            }
             placeholder="0"
           />
         </div>
         <div className="space-y-2">
-          <Label className="text-xs uppercase text-muted-foreground">{t('catalog.products.edit.dimensions.depth', 'Depth')}</Label>
+          <Label className="text-xs uppercase text-muted-foreground">
+            {t("catalog.products.edit.dimensions.depth", "Depth")}
+          </Label>
           <Input
             type="number"
-            value={dimensionValues?.depth ?? ''}
-            onChange={(event) => setValue('dimensions', updateDimensionValue(values.dimensions ?? null, 'depth', event.target.value))}
+            value={dimensionValues?.depth ?? ""}
+            onChange={(event) =>
+              setValue(
+                "dimensions",
+                updateDimensionValue(
+                  values.dimensions ?? null,
+                  "depth",
+                  event.target.value,
+                ),
+              )
+            }
             placeholder="0"
           />
         </div>
         <div className="space-y-2">
-          <Label className="text-xs uppercase text-muted-foreground">{t('catalog.products.edit.dimensions.unit', 'Size unit')}</Label>
+          <Label className="text-xs uppercase text-muted-foreground">
+            {t("catalog.products.edit.dimensions.unit", "Size unit")}
+          </Label>
           <Input
-            value={dimensionValues?.unit ?? ''}
-            onChange={(event) => setValue('dimensions', updateDimensionValue(values.dimensions ?? null, 'unit', event.target.value))}
+            value={dimensionValues?.unit ?? ""}
+            onChange={(event) =>
+              setValue(
+                "dimensions",
+                updateDimensionValue(
+                  values.dimensions ?? null,
+                  "unit",
+                  event.target.value,
+                ),
+              )
+            }
             placeholder="cm"
           />
         </div>
         <div className="space-y-2">
-          <Label className="text-xs uppercase text-muted-foreground">{t('catalog.products.edit.weight.value', 'Weight')}</Label>
+          <Label className="text-xs uppercase text-muted-foreground">
+            {t("catalog.products.edit.weight.value", "Weight")}
+          </Label>
           <Input
             type="number"
-            value={weightValues?.value ?? ''}
-            onChange={(event) => setValue('weight', updateWeightValue(values.weight ?? null, 'value', event.target.value))}
+            value={weightValues?.value ?? ""}
+            onChange={(event) =>
+              setValue(
+                "weight",
+                updateWeightValue(
+                  values.weight ?? null,
+                  "value",
+                  event.target.value,
+                ),
+              )
+            }
             placeholder="0"
           />
         </div>
         <div className="space-y-2">
-          <Label className="text-xs uppercase text-muted-foreground">{t('catalog.products.edit.weight.unit', 'Weight unit')}</Label>
+          <Label className="text-xs uppercase text-muted-foreground">
+            {t("catalog.products.edit.weight.unit", "Weight unit")}
+          </Label>
           <Input
-            value={weightValues?.unit ?? ''}
-            onChange={(event) => setValue('weight', updateWeightValue(values.weight ?? null, 'unit', event.target.value))}
+            value={weightValues?.unit ?? ""}
+            onChange={(event) =>
+              setValue(
+                "weight",
+                updateWeightValue(
+                  values.weight ?? null,
+                  "unit",
+                  event.target.value,
+                ),
+              )
+            }
             placeholder="kg"
           />
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 function ProductMetadataSection({ values, setValue }: ProductFormGroupProps) {
-  const metadata = normalizeMetadata(values.metadata)
-  const handleMetadataChange = React.useCallback((next: Record<string, unknown>) => {
-    setValue('metadata', next)
-  }, [setValue])
+  const metadata = normalizeMetadata(values.metadata);
+  const handleMetadataChange = React.useCallback(
+    (next: Record<string, unknown>) => {
+      setValue("metadata", next);
+    },
+    [setValue],
+  );
 
-  return <MetadataEditor value={metadata} onChange={handleMetadataChange} embedded />
+  return (
+    <MetadataEditor value={metadata} onChange={handleMetadataChange} embedded />
+  );
 }
 
 function ProductOptionsSection({ values, setValue }: ProductFormGroupProps) {
-  const t = useT()
-  const [schemaDialogOpen, setSchemaDialogOpen] = React.useState(false)
-  const [schemaTemplates, setSchemaTemplates] = React.useState<OptionSchemaTemplateSummary[]>([])
-  const [schemaLoading, setSchemaLoading] = React.useState(false)
-  const [saveSchemaOpen, setSaveSchemaOpen] = React.useState(false)
-  const [schemaToEdit, setSchemaToEdit] = React.useState<OptionSchemaTemplateSummary | null>(null)
+  const t = useT();
+  const [schemaDialogOpen, setSchemaDialogOpen] = React.useState(false);
+  const [schemaTemplates, setSchemaTemplates] = React.useState<
+    OptionSchemaTemplateSummary[]
+  >([]);
+  const [schemaLoading, setSchemaLoading] = React.useState(false);
+  const [saveSchemaOpen, setSaveSchemaOpen] = React.useState(false);
+  const [schemaToEdit, setSchemaToEdit] =
+    React.useState<OptionSchemaTemplateSummary | null>(null);
 
   const loadSchemas = React.useCallback(async () => {
-    setSchemaLoading(true)
+    setSchemaLoading(true);
     try {
-      const res = await apiCall<OptionSchemaTemplateListResponse>('/api/catalog/option-schemas?page=1&pageSize=100')
+      const res = await apiCall<OptionSchemaTemplateListResponse>(
+        "/api/catalog/option-schemas?page=1&pageSize=100",
+      );
       if (res.ok) {
-        setSchemaTemplates(Array.isArray(res.result?.items) ? res.result?.items ?? [] : [])
+        setSchemaTemplates(
+          Array.isArray(res.result?.items) ? (res.result?.items ?? []) : [],
+        );
       } else {
-        setSchemaTemplates([])
+        setSchemaTemplates([]);
       }
     } catch (err) {
-      console.error('catalog.option-schemas.list failed', err)
-      setSchemaTemplates([])
+      console.error("catalog.option-schemas.list failed", err);
+      setSchemaTemplates([]);
     } finally {
-      setSchemaLoading(false)
+      setSchemaLoading(false);
     }
-  }, [])
+  }, []);
 
-  const handleDeleteSchema = React.useCallback(async (id: string) => {
-    try {
-      await deleteCrud('catalog/option-schemas', id, {
-        errorMessage: t('catalog.products.edit.schemas.deleteError', 'Failed to delete schema.'),
-      })
-      flash(t('catalog.products.edit.schemas.deleted', 'Schema deleted.'), 'success')
-      void loadSchemas()
-    } catch (err) {
-      console.error('catalog.option-schemas.delete failed', err)
-    }
-  }, [loadSchemas, t])
-
-  const handleSaveSchema = React.useCallback(async (name: string) => {
-    if (!name.trim().length) {
-      const message = t('catalog.products.edit.schemas.nameRequired', 'Provide a schema name.')
-      throw createCrudFormError(message, { name: message })
-    }
-    const schemaPayload = buildSchemaFromOptions(Array.isArray(values.options) ? values.options : [], name)
-    if (!schemaPayload.options?.length) {
-      throw createCrudFormError(t('catalog.products.edit.schemas.empty', 'Add at least one option before saving.'), {})
-    }
-    const payload: Record<string, unknown> = {
-      name: name.trim(),
-      code: slugify(name.trim()),
-      schema: schemaPayload,
-      isActive: true,
-    }
-    if (schemaToEdit?.id) payload.id = schemaToEdit.id
-    if (schemaToEdit?.id) await updateCrud('catalog/option-schemas', payload)
-    else await createCrud('catalog/option-schemas', payload)
-    flash(t('catalog.products.edit.schemas.saved', 'Schema saved.'), 'success')
-    setSaveSchemaOpen(false)
-    setSchemaToEdit(null)
-    void loadSchemas()
-  }, [schemaToEdit, t, values.options, loadSchemas])
-
-  const handleOptionTitleChange = React.useCallback((optionId: string, nextTitle: string) => {
-    const next = (Array.isArray(values.options) ? values.options : []).map((option) =>
-      option.id === optionId ? { ...option, title: nextTitle } : option,
-    )
-    setValue('options', next)
-  }, [setValue, values.options])
-
-  const setOptionValues = React.useCallback((optionId: string, labels: string[]) => {
-    const normalized = labels.map((label) => label.trim()).filter((label) => label.length)
-    const unique = Array.from(new Set(normalized))
-    const next = (Array.isArray(values.options) ? values.options : []).map((option) => {
-      if (option.id !== optionId) return option
-      const existingByLabel = new Map(option.values.map((value) => [value.label, value]))
-      const nextValues = unique.map((label) => existingByLabel.get(label) ?? { id: createLocalId(), label })
-      return {
-        ...option,
-        values: nextValues,
+  const handleDeleteSchema = React.useCallback(
+    async (id: string) => {
+      try {
+        await deleteCrud("catalog/option-schemas", id, {
+          errorMessage: t(
+            "catalog.products.edit.schemas.deleteError",
+            "Failed to delete schema.",
+          ),
+        });
+        flash(
+          t("catalog.products.edit.schemas.deleted", "Schema deleted."),
+          "success",
+        );
+        void loadSchemas();
+      } catch (err) {
+        console.error("catalog.option-schemas.delete failed", err);
       }
-    })
-    setValue('options', next)
-  }, [setValue, values.options])
+    },
+    [loadSchemas, t],
+  );
+
+  const handleSaveSchema = React.useCallback(
+    async (name: string) => {
+      if (!name.trim().length) {
+        const message = t(
+          "catalog.products.edit.schemas.nameRequired",
+          "Provide a schema name.",
+        );
+        throw createCrudFormError(message, { name: message });
+      }
+      const schemaPayload = buildSchemaFromOptions(
+        Array.isArray(values.options) ? values.options : [],
+        name,
+      );
+      if (!schemaPayload.options?.length) {
+        throw createCrudFormError(
+          t(
+            "catalog.products.edit.schemas.empty",
+            "Add at least one option before saving.",
+          ),
+          {},
+        );
+      }
+      const payload: Record<string, unknown> = {
+        name: name.trim(),
+        code: slugify(name.trim()),
+        schema: schemaPayload,
+        isActive: true,
+      };
+      if (schemaToEdit?.id) payload.id = schemaToEdit.id;
+      if (schemaToEdit?.id) await updateCrud("catalog/option-schemas", payload);
+      else await createCrud("catalog/option-schemas", payload);
+      flash(
+        t("catalog.products.edit.schemas.saved", "Schema saved."),
+        "success",
+      );
+      setSaveSchemaOpen(false);
+      setSchemaToEdit(null);
+      void loadSchemas();
+    },
+    [schemaToEdit, t, values.options, loadSchemas],
+  );
+
+  const handleOptionTitleChange = React.useCallback(
+    (optionId: string, nextTitle: string) => {
+      const next = (Array.isArray(values.options) ? values.options : []).map(
+        (option) =>
+          option.id === optionId ? { ...option, title: nextTitle } : option,
+      );
+      setValue("options", next);
+    },
+    [setValue, values.options],
+  );
+
+  const setOptionValues = React.useCallback(
+    (optionId: string, labels: string[]) => {
+      const normalized = labels
+        .map((label) => label.trim())
+        .filter((label) => label.length);
+      const unique = Array.from(new Set(normalized));
+      const next = (Array.isArray(values.options) ? values.options : []).map(
+        (option) => {
+          if (option.id !== optionId) return option;
+          const existingByLabel = new Map(
+            option.values.map((value) => [value.label, value]),
+          );
+          const nextValues = unique.map(
+            (label) =>
+              existingByLabel.get(label) ?? { id: createLocalId(), label },
+          );
+          return {
+            ...option,
+            values: nextValues,
+          };
+        },
+      );
+      setValue("options", next);
+    },
+    [setValue, values.options],
+  );
 
   const addOption = React.useCallback(() => {
     const next = [
       ...(Array.isArray(values.options) ? values.options : []),
-      { id: createLocalId(), title: '', values: [] },
-    ]
-    setValue('options', next)
-  }, [setValue, values.options])
-
-  const removeOption = React.useCallback((optionId: string) => {
-    const next = (Array.isArray(values.options) ? values.options : []).filter((option) => option.id !== optionId)
-    setValue('options', next)
-  }, [setValue, values.options])
+      { id: createLocalId(), title: "", values: [] },
+    ];
+    setValue("options", next);
+  }, [setValue, values.options]);
+
+  const removeOption = React.useCallback(
+    (optionId: string) => {
+      const next = (Array.isArray(values.options) ? values.options : []).filter(
+        (option) => option.id !== optionId,
+      );
+      setValue("options", next);
+    },
+    [setValue, values.options],
+  );
 
   return (
     <>
       <div className="space-y-4">
         <div className="flex flex-wrap items-center justify-between gap-2">
-          <h3 className="text-sm font-semibold">{t('catalog.products.create.optionsBuilder.title', 'Product options')}</h3>
+          <h3 className="text-sm font-semibold">
+            {t(
+              "catalog.products.create.optionsBuilder.title",
+              "Product options",
+            )}
+          </h3>
           <div className="flex flex-wrap items-center gap-2">
             <Button
               type="button"
               variant="ghost"
               size="icon"
               onClick={() => {
-                setSchemaDialogOpen(true)
-                void loadSchemas()
+                setSchemaDialogOpen(true);
+                void loadSchemas();
               }}
-              title={t('catalog.products.edit.schemas.manage', 'Open schema library')}
+              title={t(
+                "catalog.products.edit.schemas.manage",
+                "Open schema library",
+              )}
             >
               <BookMarked className="h-4 w-4" />
             </Button>
@@ -1039,16 +1716,21 @@ function ProductOptionsSection({ values, setValue }: ProductFormGroupProps) {
               variant="ghost"
               size="icon"
               onClick={() => {
-                setSchemaToEdit(null)
-                setSaveSchemaOpen(true)
+                setSchemaToEdit(null);
+                setSaveSchemaOpen(true);
               }}
-              title={t('catalog.products.edit.schemas.save', 'Save as schema')}
+              title={t("catalog.products.edit.schemas.save", "Save as schema")}
             >
               <Save className="h-4 w-4" />
             </Button>
-            <Button type="button" variant="outline" size="sm" onClick={addOption}>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={addOption}
+            >
               <Plus className="mr-2 h-4 w-4" />
-              {t('catalog.products.create.optionsBuilder.add', 'Add option')}
+              {t("catalog.products.create.optionsBuilder.add", "Add option")}
             </Button>
           </div>
         </div>
@@ -1057,29 +1739,45 @@ function ProductOptionsSection({ values, setValue }: ProductFormGroupProps) {
             <div className="flex items-center gap-2">
               <Input
                 value={option.title}
-                onChange={(event) => handleOptionTitleChange(option.id, event.target.value)}
-                placeholder={t('catalog.products.create.optionsBuilder.placeholder', 'e.g., Color')}
+                onChange={(event) =>
+                  handleOptionTitleChange(option.id, event.target.value)
+                }
+                placeholder={t(
+                  "catalog.products.create.optionsBuilder.placeholder",
+                  "e.g., Color",
+                )}
                 className="flex-1"
               />
-              <Button variant="ghost" size="icon" type="button" onClick={() => removeOption(option.id)}>
+              <Button
+                variant="ghost"
+                size="icon"
+                type="button"
+                onClick={() => removeOption(option.id)}
+              >
                 <Trash2 className="h-4 w-4" />
               </Button>
             </div>
             <div className="mt-3 space-y-2">
               <Label className="text-xs uppercase text-muted-foreground">
-                {t('catalog.products.create.optionsBuilder.values', 'Values')}
+                {t("catalog.products.create.optionsBuilder.values", "Values")}
               </Label>
               <TagsInput
                 value={option.values.map((value) => value.label)}
                 onChange={(labels) => setOptionValues(option.id, labels)}
-                placeholder={t('catalog.products.create.optionsBuilder.valuePlaceholder', 'Type a value and press Enter')}
+                placeholder={t(
+                  "catalog.products.create.optionsBuilder.valuePlaceholder",
+                  "Type a value and press Enter",
+                )}
               />
             </div>
           </div>
         ))}
         {!values.options?.length ? (
           <p className="text-sm text-muted-foreground">
-            {t('catalog.products.create.optionsBuilder.empty', 'No options yet. Add your first option to generate variants.')}
+            {t(
+              "catalog.products.create.optionsBuilder.empty",
+              "No options yet. Add your first option to generate variants.",
+            )}
           </p>
         ) : null}
       </div>
@@ -1087,35 +1785,35 @@ function ProductOptionsSection({ values, setValue }: ProductFormGroupProps) {
       <OptionSchemaDialog
         open={schemaDialogOpen}
         onOpenChange={(next) => {
-          setSchemaDialogOpen(next)
-          if (next) void loadSchemas()
+          setSchemaDialogOpen(next);
+          if (next) void loadSchemas();
         }}
         isLoading={schemaLoading}
         templates={schemaTemplates}
         onSelect={(template) => {
-          setSchemaDialogOpen(false)
-          if (!template) return
-          const options = extractOptionsFromTemplate(template)
-          setValue('options', options)
+          setSchemaDialogOpen(false);
+          if (!template) return;
+          const options = extractOptionsFromTemplate(template);
+          setValue("options", options);
         }}
         onDelete={handleDeleteSchema}
         onEdit={(template) => {
-          setSchemaToEdit(template)
-          setSaveSchemaOpen(true)
+          setSchemaToEdit(template);
+          setSaveSchemaOpen(true);
         }}
       />
 
       <SaveSchemaDialog
         open={saveSchemaOpen}
         onOpenChange={(next) => {
-          setSaveSchemaOpen(next)
-          if (!next) setSchemaToEdit(null)
+          setSaveSchemaOpen(next);
+          if (!next) setSchemaToEdit(null);
         }}
-        defaultName={schemaToEdit?.name ?? ''}
+        defaultName={schemaToEdit?.name ?? ""}
         onSubmit={handleSaveSchema}
       />
     </>
-  )
+  );
 }
 
 function ProductVariantsSection({
@@ -1126,174 +1824,235 @@ function ProductVariantsSection({
   onVariantDeleted,
   onVariantsReload,
 }: ProductVariantsSectionProps) {
-  const t = useT()
-  const { confirm, ConfirmDialogElement } = useConfirmDialog()
-  const [deletingId, setDeletingId] = React.useState<string | null>(null)
-  const [generating, setGenerating] = React.useState(false)
-  const [checkingVariantFeature, setCheckingVariantFeature] = React.useState(true)
-  const [canManageVariants, setCanManageVariants] = React.useState(false)
+  const t = useT();
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const [deletingId, setDeletingId] = React.useState<string | null>(null);
+  const [generating, setGenerating] = React.useState(false);
+  const [checkingVariantFeature, setCheckingVariantFeature] =
+    React.useState(true);
+  const [canManageVariants, setCanManageVariants] = React.useState(false);
   const optionDefinitions = React.useMemo(
     () => (Array.isArray(values.options) ? values.options : []),
     [values.options],
-  )
-  const combos = React.useMemo(() => buildVariantCombinations(optionDefinitions), [optionDefinitions])
+  );
+  const combos = React.useMemo(
+    () => buildVariantCombinations(optionDefinitions),
+    [optionDefinitions],
+  );
   const existingKeys = React.useMemo(() => {
-    const set = new Set<string>()
+    const set = new Set<string>();
     variants.forEach((variant) => {
-      const key = buildOptionValuesKey(variant.optionValues ?? undefined)
-      if (key) set.add(key)
-    })
-    return set
-  }, [variants])
+      const key = buildOptionValuesKey(variant.optionValues ?? undefined);
+      if (key) set.add(key);
+    });
+    return set;
+  }, [variants]);
   const missingCombos = React.useMemo(
     () =>
       combos.filter((combo) => {
-        const key = buildOptionValuesKey(combo)
-        if (!key) return false
-        return !existingKeys.has(key)
+        const key = buildOptionValuesKey(combo);
+        if (!key) return false;
+        return !existingKeys.has(key);
       }),
     [combos, existingKeys],
-  )
+  );
   const priceKindLookup = React.useMemo(() => {
-    const map = new Map<string, PriceKindSummary>()
+    const map = new Map<string, PriceKindSummary>();
     for (const kind of priceKinds) {
-      map.set(kind.id, kind)
+      map.set(kind.id, kind);
     }
-    return map
-  }, [priceKinds])
+    return map;
+  }, [priceKinds]);
   React.useEffect(() => {
-    let cancelled = false
+    let cancelled = false;
     async function checkVariantFeature() {
       try {
-        const payload = await readApiResultOrThrow<{ ok?: boolean; granted?: unknown }>(
-          '/api/auth/feature-check',
+        const payload = await readApiResultOrThrow<{
+          ok?: boolean;
+          granted?: unknown;
+        }>(
+          "/api/auth/feature-check",
           {
-            method: 'POST',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({ features: ['catalog.variants.manage'] }),
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ features: ["catalog.variants.manage"] }),
           },
           { allowNullResult: true },
-        )
-        if (cancelled) return
-        const sourceGranted = Array.isArray(payload?.granted) ? payload?.granted : []
+        );
+        if (cancelled) return;
+        const sourceGranted = Array.isArray(payload?.granted)
+          ? payload?.granted
+          : [];
         const granted = (sourceGranted as unknown[]).filter(
-          (entry): entry is string => typeof entry === 'string' && entry.length > 0,
-        )
-        const hasFeature = payload?.ok === true || granted.includes('catalog.variants.manage')
-        setCanManageVariants(hasFeature)
+          (entry): entry is string =>
+            typeof entry === "string" && entry.length > 0,
+        );
+        const hasFeature =
+          payload?.ok === true || granted.includes("catalog.variants.manage");
+        setCanManageVariants(hasFeature);
       } catch {
-        if (!cancelled) setCanManageVariants(false)
+        if (!cancelled) setCanManageVariants(false);
       } finally {
-        if (!cancelled) setCheckingVariantFeature(false)
+        if (!cancelled) setCheckingVariantFeature(false);
       }
     }
-    checkVariantFeature().catch(() => {})
+    checkVariantFeature().catch(() => {});
     return () => {
-      cancelled = true
-    }
-  }, [])
-  const allowVariantActions = canManageVariants && !checkingVariantFeature
+      cancelled = true;
+    };
+  }, []);
+  const allowVariantActions = canManageVariants && !checkingVariantFeature;
   const formatPriceLabel = React.useCallback(
     (price: VariantPriceSummary): string => {
-      const kind = price.priceKindId ? priceKindLookup.get(price.priceKindId) : null
-      if (kind?.title) return kind.title
-      if (kind?.code) return kind.code.toUpperCase()
-      return t('catalog.products.edit.variantList.priceFallback', 'Price')
+      const kind = price.priceKindId
+        ? priceKindLookup.get(price.priceKindId)
+        : null;
+      if (kind?.title) return kind.title;
+      if (kind?.code) return kind.code.toUpperCase();
+      return t("catalog.products.edit.variantList.priceFallback", "Price");
     },
     [priceKindLookup, t],
-  )
-  const formatPriceAmount = React.useCallback((price: VariantPriceSummary): string => {
-    const amount = typeof price.amount === 'string' && price.amount.trim().length ? price.amount.trim() : ''
-    if (!amount) return '—'
-    if (!price.currencyCode) return amount
-    return `${price.currencyCode.toUpperCase()} ${amount}`
-  }, [])
+  );
+  const formatPriceAmount = React.useCallback(
+    (price: VariantPriceSummary): string => {
+      const amount =
+        typeof price.amount === "string" && price.amount.trim().length
+          ? price.amount.trim()
+          : "";
+      if (!amount) return "—";
+      if (!price.currencyCode) return amount;
+      return `${price.currencyCode.toUpperCase()} ${amount}`;
+    },
+    [],
+  );
   const handleDeleteVariant = React.useCallback(
     async (variant: VariantSummary) => {
-      if (!allowVariantActions) return
-      const label = variant.name || variant.sku || variant.id
-      const confirmMessage = t('catalog.products.edit.variantList.deleteConfirm', 'Delete variant "{{name}}"?').replace(
-        '{{name}}',
-        label,
-      )
+      if (!allowVariantActions) return;
+      const label = variant.name || variant.sku || variant.id;
+      const confirmMessage = t(
+        "catalog.products.edit.variantList.deleteConfirm",
+        'Delete variant "{{name}}"?',
+      ).replace("{{name}}", label);
       const confirmed = await confirm({
         title: confirmMessage,
-        variant: 'destructive',
-      })
-      if (!confirmed) return
-      setDeletingId(variant.id)
+        variant: "destructive",
+      });
+      if (!confirmed) return;
+      setDeletingId(variant.id);
       try {
-        await deleteCrud('catalog/variants', variant.id, {
-          errorMessage: t('catalog.variants.form.deleteError', 'Failed to delete variant.'),
-        })
-        flash(t('catalog.variants.form.deleted', 'Variant deleted.'), 'success')
-        onVariantDeleted(variant.id)
+        await deleteCrud("catalog/variants", variant.id, {
+          errorMessage: t(
+            "catalog.variants.form.deleteError",
+            "Failed to delete variant.",
+          ),
+        });
+        flash(
+          t("catalog.variants.form.deleted", "Variant deleted."),
+          "success",
+        );
+        onVariantDeleted(variant.id);
       } catch (err) {
-        console.error('catalog.products.edit.variants.delete', err)
-        flash(t('catalog.variants.form.deleteError', 'Failed to delete variant.'), 'error')
+        console.error("catalog.products.edit.variants.delete", err);
+        flash(
+          t("catalog.variants.form.deleteError", "Failed to delete variant."),
+          "error",
+        );
       } finally {
-        setDeletingId(null)
+        setDeletingId(null);
       }
     },
     [allowVariantActions, confirm, onVariantDeleted, t],
-  )
+  );
   const handleGenerateVariants = React.useCallback(async () => {
-    if (!productId || !allowVariantActions) return
+    if (!productId || !allowVariantActions) return;
     if (!missingCombos.length) {
       flash(
-        t('catalog.products.edit.variantList.generateEmpty', 'All option combinations already exist.'),
-        'info',
-      )
-      return
+        t(
+          "catalog.products.edit.variantList.generateEmpty",
+          "All option combinations already exist.",
+        ),
+        "info",
+      );
+      return;
     }
-    setGenerating(true)
+    setGenerating(true);
     try {
       for (const combo of missingCombos) {
         const title =
           Object.values(combo)
             .map((value) => value?.trim())
             .filter((value) => value && value.length)
-            .join(' / ') || t('catalog.products.edit.variantList.defaultTitle', 'Variant')
-        await createCrud('catalog/variants', {
+            .join(" / ") ||
+          t("catalog.products.edit.variantList.defaultTitle", "Variant");
+        await createCrud("catalog/variants", {
           productId,
           name: title,
           optionValues: combo,
           isDefault: false,
           isActive: true,
-        })
+        });
       }
-      flash(t('catalog.products.edit.variantList.generateSuccess', 'Missing variants generated.'), 'success')
-      if (onVariantsReload) await onVariantsReload()
+      flash(
+        t(
+          "catalog.products.edit.variantList.generateSuccess",
+          "Missing variants generated.",
+        ),
+        "success",
+      );
+      if (onVariantsReload) await onVariantsReload();
     } catch (err) {
-      console.error('catalog.products.edit.variantList.generate', err)
-      flash(t('catalog.products.edit.variantList.generateError', 'Failed to generate variants.'), 'error')
+      console.error("catalog.products.edit.variantList.generate", err);
+      flash(
+        t(
+          "catalog.products.edit.variantList.generateError",
+          "Failed to generate variants.",
+        ),
+        "error",
+      );
     } finally {
-      setGenerating(false)
+      setGenerating(false);
     }
-  }, [allowVariantActions, missingCombos, onVariantsReload, productId, t])
+  }, [allowVariantActions, missingCombos, onVariantsReload, productId, t]);
 
-  const showGenerateButton = optionDefinitions.length > 0 && allowVariantActions
+  const showGenerateButton =
+    optionDefinitions.length > 0 && allowVariantActions;
 
   return (
     <>
       <div className="space-y-3">
         <div className="flex flex-wrap items-center justify-between gap-3">
           <h3 id="variants" className="text-sm font-semibold">
-            {t('catalog.products.edit.variants', 'Variants')}
+            {t("catalog.products.edit.variants", "Variants")}
           </h3>
           <div className="flex flex-wrap items-center gap-2">
             {showGenerateButton ? (
-              <Button type="button" size="sm" variant="outline" disabled={generating} onClick={() => { void handleGenerateVariants() }}>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                disabled={generating}
+                onClick={() => {
+                  void handleGenerateVariants();
+                }}
+              >
                 {generating
-                  ? t('catalog.products.edit.variantList.generating', 'Generating…')
-                  : t('catalog.products.edit.variantList.generate', 'Generate variants')}
+                  ? t(
+                      "catalog.products.edit.variantList.generating",
+                      "Generating…",
+                    )
+                  : t(
+                      "catalog.products.edit.variantList.generate",
+                      "Generate variants",
+                    )}
               </Button>
             ) : null}
             {allowVariantActions ? (
               <Button asChild size="sm">
-                <Link href={`/backend/catalog/products/${productId}/variants/create`}>
+                <Link
+                  href={`/backend/catalog/products/${productId}/variants/create`}
+                >
                   <Plus className="mr-2 h-4 w-4" />
-                  {t('catalog.products.edit.variants.add', 'Add variant')}
+                  {t("catalog.products.edit.variants.add", "Add variant")}
                 </Link>
               </Button>
             ) : null}
@@ -1304,14 +2063,21 @@ function ProductVariantsSection({
             <table className="w-full table-auto text-sm">
               <thead className="bg-muted/40 text-left text-xs uppercase text-muted-foreground">
                 <tr>
-                  <th className="px-3 py-2 font-normal">{t('catalog.products.form.variants', 'Variant')}</th>
+                  <th className="px-3 py-2 font-normal">
+                    {t("catalog.products.form.variants", "Variant")}
+                  </th>
                   <th className="px-3 py-2 font-normal">SKU</th>
                   <th className="px-3 py-2 font-normal">
-                    {t('catalog.products.edit.variantList.pricesHeading', 'Prices')}
+                    {t(
+                      "catalog.products.edit.variantList.pricesHeading",
+                      "Prices",
+                    )}
+                  </th>
+                  <th className="px-3 py-2 font-normal">
+                    {t("catalog.products.edit.variants.default", "Default")}
                   </th>
-                  <th className="px-3 py-2 font-normal">{t('catalog.products.edit.variants.default', 'Default')}</th>
                   <th className="px-3 py-2 font-normal text-right">
-                    {t('catalog.products.edit.variantList.actions', 'Actions')}
+                    {t("catalog.products.edit.variantList.actions", "Actions")}
                   </th>
                 </tr>
               </thead>
@@ -1326,29 +2092,43 @@ function ProductVariantsSection({
                         {variant.name || variant.id}
                       </Link>
                     </td>
-                    <td className="px-3 py-2 text-muted-foreground">{variant.sku || '—'}</td>
+                    <td className="px-3 py-2 text-muted-foreground">
+                      {variant.sku || "—"}
+                    </td>
                     <td className="px-3 py-2">
                       {variant.prices.length ? (
                         <ul className="space-y-1">
                           {variant.prices.map((price) => (
-                            <li key={price.id} className="text-xs text-muted-foreground">
-                              <span className="font-medium text-foreground">{formatPriceLabel(price)}</span>{' '}
+                            <li
+                              key={price.id}
+                              className="text-xs text-muted-foreground"
+                            >
+                              <span className="font-medium text-foreground">
+                                {formatPriceLabel(price)}
+                              </span>{" "}
                               <span>{formatPriceAmount(price)}</span>
                             </li>
                           ))}
                         </ul>
                       ) : (
                         <span className="text-xs text-muted-foreground">
-                          {t('catalog.products.edit.variantList.pricesEmpty', 'No prices yet.')}
+                          {t(
+                            "catalog.products.edit.variantList.pricesEmpty",
+                            "No prices yet.",
+                          )}
                         </span>
                       )}
                     </td>
-                    <td className="px-3 py-2 text-muted-foreground">{variant.isDefault ? t('common.yes', 'Yes') : '—'}</td>
+                    <td className="px-3 py-2 text-muted-foreground">
+                      {variant.isDefault ? t("common.yes", "Yes") : "—"}
+                    </td>
                     <td className="px-3 py-2">
                       <div className="flex flex-wrap justify-end gap-2">
                         <Button asChild size="sm" variant="outline">
-                          <Link href={`/backend/catalog/products/${productId}/variants/${variant.id}`}>
-                            {t('catalog.products.list.actions.edit', 'Edit')}
+                          <Link
+                            href={`/backend/catalog/products/${productId}/variants/${variant.id}`}
+                          >
+                            {t("catalog.products.list.actions.edit", "Edit")}
                           </Link>
                         </Button>
                         {allowVariantActions ? (
@@ -1358,11 +2138,19 @@ function ProductVariantsSection({
                             variant="ghost"
                             className="text-destructive hover:text-destructive"
                             disabled={deletingId === variant.id}
-                            onClick={() => { void handleDeleteVariant(variant) }}
+                            onClick={() => {
+                              void handleDeleteVariant(variant);
+                            }}
                           >
                             {deletingId === variant.id
-                              ? t('catalog.products.edit.variantList.deleting', 'Deleting…')
-                              : t('catalog.products.list.actions.delete', 'Delete')}
+                              ? t(
+                                  "catalog.products.edit.variantList.deleting",
+                                  "Deleting…",
+                                )
+                              : t(
+                                  "catalog.products.list.actions.delete",
+                                  "Delete",
+                                )}
                           </Button>
                         ) : null}
                       </div>
@@ -1374,115 +2162,160 @@ function ProductVariantsSection({
           </div>
         ) : (
           <p className="text-xs text-muted-foreground">
-            {t('catalog.products.edit.variants.empty', 'No variants defined yet.')}
+            {t(
+              "catalog.products.edit.variants.empty",
+              "No variants defined yet.",
+            )}
           </p>
         )}
       </div>
       {ConfirmDialogElement}
     </>
-  )
+  );
 }
 
-function ProductMetaSection({ values, setValue, errors, taxRates }: ProductMetaSectionProps) {
-  const t = useT()
-  const handleValue = typeof values.handle === 'string' ? values.handle : ''
-  const titleSource = typeof values.title === 'string' ? values.title : ''
-  const autoHandleEnabledRef = React.useRef(handleValue.trim().length === 0)
+function ProductMetaSection({
+  values,
+  setValue,
+  errors,
+  taxRates,
+}: ProductMetaSectionProps) {
+  const t = useT();
+  const handleValue = typeof values.handle === "string" ? values.handle : "";
+  const titleSource = typeof values.title === "string" ? values.title : "";
+  const autoHandleEnabledRef = React.useRef(handleValue.trim().length === 0);
 
   React.useEffect(() => {
-    if (!autoHandleEnabledRef.current) return
-    const normalizedTitle = titleSource.trim()
+    if (!autoHandleEnabledRef.current) return;
+    const normalizedTitle = titleSource.trim();
     if (!normalizedTitle) {
       if (handleValue) {
-        setValue('handle', '')
+        setValue("handle", "");
       }
-      return
+      return;
     }
-    const nextHandle = slugify(normalizedTitle)
+    const nextHandle = slugify(normalizedTitle);
     if (nextHandle !== handleValue) {
-      setValue('handle', nextHandle)
+      setValue("handle", nextHandle);
     }
-  }, [titleSource, handleValue, setValue])
+  }, [titleSource, handleValue, setValue]);
 
   const handleHandleInputChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
-      const nextValue = event.target.value
-      autoHandleEnabledRef.current = nextValue.trim().length === 0
-      setValue('handle', nextValue)
+      const nextValue = event.target.value;
+      autoHandleEnabledRef.current = nextValue.trim().length === 0;
+      setValue("handle", nextValue);
     },
     [setValue],
-  )
+  );
 
   const handleGenerateHandle = React.useCallback(() => {
-    const slug = slugify(titleSource)
-    autoHandleEnabledRef.current = true
-    setValue('handle', slug)
-  }, [titleSource, setValue])
+    const slug = slugify(titleSource);
+    autoHandleEnabledRef.current = true;
+    setValue("handle", slug);
+  }, [titleSource, setValue]);
 
   return (
     <div className="space-y-4">
       <div className="space-y-2">
-        <Label>{t('catalog.products.form.subtitle', 'Subtitle')}</Label>
+        <Label>{t("catalog.products.form.subtitle", "Subtitle")}</Label>
         <Input
-          value={typeof values.subtitle === 'string' ? values.subtitle : ''}
-          onChange={(event) => setValue('subtitle', event.target.value)}
-          placeholder={t('catalog.products.create.placeholders.subtitle', 'Optional subtitle')}
+          value={typeof values.subtitle === "string" ? values.subtitle : ""}
+          onChange={(event) => setValue("subtitle", event.target.value)}
+          placeholder={t(
+            "catalog.products.create.placeholders.subtitle",
+            "Optional subtitle",
+          )}
         />
-        {errors.subtitle ? <p className="text-xs text-red-600">{errors.subtitle}</p> : null}
+        {errors.subtitle ? (
+          <p className="text-xs text-red-600">{errors.subtitle}</p>
+        ) : null}
       </div>
 
       <div className="space-y-2">
         <div className="flex items-center justify-between gap-2">
-          <Label>{t('catalog.products.create.meta.handleLabel', 'Handle')}</Label>
+          <Label>
+            {t("catalog.products.create.meta.handleLabel", "Handle")}
+          </Label>
           <Button
             type="button"
             variant="outline"
             onClick={handleGenerateHandle}
           >
-            {t('catalog.products.create.actions.generateHandle', 'Generate')}
+            {t("catalog.products.create.actions.generateHandle", "Generate")}
           </Button>
         </div>
         <Input
           value={handleValue}
           onChange={handleHandleInputChange}
-          placeholder={t('catalog.products.create.placeholders.handle', 'e.g., summer-sneaker')}
+          placeholder={t(
+            "catalog.products.create.placeholders.handle",
+            "e.g., summer-sneaker",
+          )}
           className="font-mono lowercase"
         />
         <p className="text-xs text-muted-foreground">
-          {t('catalog.products.create.handleHelp', 'Handle is used for URLs and must be unique.')}
+          {t(
+            "catalog.products.create.handleHelp",
+            "Handle is used for URLs and must be unique.",
+          )}
         </p>
-        {errors.handle ? <p className="text-xs text-red-600">{errors.handle}</p> : null}
+        {errors.handle ? (
+          <p className="text-xs text-red-600">{errors.handle}</p>
+        ) : null}
       </div>
 
       <div className="space-y-2">
         <div className="flex items-center justify-between gap-2">
-          <Label>{t('catalog.products.create.taxRates.label', 'Tax class')}</Label>
+          <Label>
+            {t("catalog.products.create.taxRates.label", "Tax class")}
+          </Label>
           <Button
             type="button"
             variant="ghost"
             size="icon"
             onClick={() => {
-              if (typeof window !== 'undefined') {
-                window.open('/backend/config/sales?section=tax-rates', '_blank', 'noopener,noreferrer')
+              if (typeof window !== "undefined") {
+                window.open(
+                  "/backend/config/sales?section=tax-rates",
+                  "_blank",
+                  "noopener,noreferrer",
+                );
               }
             }}
-            title={t('catalog.products.create.taxRates.manage', 'Manage tax classes')}
+            title={t(
+              "catalog.products.create.taxRates.manage",
+              "Manage tax classes",
+            )}
             className="text-muted-foreground hover:text-foreground"
           >
             <Layers className="h-4 w-4" />
-            <span className="sr-only">{t('catalog.products.create.taxRates.manage', 'Manage tax classes')}</span>
+            <span className="sr-only">
+              {t(
+                "catalog.products.create.taxRates.manage",
+                "Manage tax classes",
+              )}
+            </span>
           </Button>
         </div>
         <select
           className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-          value={values.taxRateId ?? ''}
-          onChange={(event) => setValue('taxRateId', event.target.value || null)}
+          value={values.taxRateId ?? ""}
+          onChange={(event) =>
+            setValue("taxRateId", event.target.value || null)
+          }
           disabled={!taxRates.length}
         >
           <option value="">
             {taxRates.length
-              ? t('catalog.products.create.taxRates.noneSelected', 'No tax class selected')
-              : t('catalog.products.create.taxRates.emptyOption', 'No tax classes available')}
+              ? t(
+                  "catalog.products.create.taxRates.noneSelected",
+                  "No tax class selected",
+                )
+              : t(
+                  "catalog.products.create.taxRates.emptyOption",
+                  "No tax classes available",
+                )}
           </option>
           {taxRates.map((rate) => (
             <option key={rate.id} value={rate.id}>
@@ -1492,20 +2325,27 @@ function ProductMetaSection({ values, setValue, errors, taxRates }: ProductMetaS
         </select>
         <p className="text-xs text-muted-foreground">
           {taxRates.length
-            ? t('catalog.products.create.taxRates.help', 'Applied to prices unless overridden per variant.')
-            : t('catalog.products.create.taxRates.empty', 'Define tax classes under Sales → Configuration.')}
+            ? t(
+                "catalog.products.create.taxRates.help",
+                "Applied to prices unless overridden per variant.",
+              )
+            : t(
+                "catalog.products.create.taxRates.empty",
+                "Define tax classes under Sales → Configuration.",
+              )}
         </p>
       </div>
     </div>
-  )
+  );
 }
 
 function normalizeMetadata(value: unknown): Record<string, any> {
-  if (!value || typeof value !== 'object') return {}
+  if (!value || typeof value !== "object") return {};
   const entries = Object.entries(value as Record<string, unknown>).filter(
-    ([key]) => !key.startsWith('cf') && key !== 'dimensions' && key !== 'weight',
-  )
-  return Object.fromEntries(entries)
+    ([key]) =>
+      !key.startsWith("cf") && key !== "dimensions" && key !== "weight",
+  );
+  return Object.fromEntries(entries);
 }
 
 function readOptionSchema(metadata: Record<string, any>): ProductOptionInput[] {
@@ -1513,15 +2353,18 @@ function readOptionSchema(metadata: Record<string, any>): ProductOptionInput[] {
     ? metadata.optionSchema
     : Array.isArray(metadata.option_schema)
       ? metadata.option_schema
-      : []
+      : [];
   return raw
     .map((option) => {
-      if (!option || typeof option !== 'object') return null
-      const values = Array.isArray((option as any).values)
-        ? (option as any).values
+      if (!option || typeof option !== "object") return null;
+      const values = Array.isArray(option.values)
+        ? option.values
             .map((value: any) =>
-              value && typeof value === 'object'
-                ? { id: String(value.id ?? createLocalId()), label: typeof value.label === 'string' ? value.label : '' }
+              value && typeof value === "object"
+                ? {
+                    id: String(value.id ?? createLocalId()),
+                    label: typeof value.label === "string" ? value.label : "",
+                  }
                 : null,
             )
             .filter(
@@ -1529,274 +2372,386 @@ function readOptionSchema(metadata: Record<string, any>): ProductOptionInput[] {
                 entry: { id?: string; label?: string } | null,
               ): entry is { id: string; label: string } => !!entry,
             )
-        : []
+        : [];
       return {
-        id: String((option as any).id ?? createLocalId()),
-        title: typeof (option as any).title === 'string' ? (option as any).title : '',
+        id: String(option.id ?? createLocalId()),
+        title: typeof option.title === "string" ? option.title : "",
         values,
-      }
+      };
     })
-    .filter((entry): entry is ProductOptionInput => !!entry)
+    .filter((entry): entry is ProductOptionInput => !!entry);
 }
 
-
-function extractCustomFields(record: Record<string, unknown>): { customValues: Record<string, unknown> } {
-  const customValues: Record<string, unknown> = {}
+function extractCustomFields(record: Record<string, unknown>): {
+  customValues: Record<string, unknown>;
+} {
+  const customValues: Record<string, unknown> = {};
   Object.entries(record).forEach(([key, value]) => {
-    if (key.startsWith('cf_')) customValues[key] = value
-    else if (key.startsWith('cf:')) customValues[`cf_${key.slice(3)}`] = value
-  })
-  return { customValues }
+    if (key.startsWith("cf_")) customValues[key] = value;
+    else if (key.startsWith("cf:")) customValues[`cf_${key.slice(3)}`] = value;
+  });
+  return { customValues };
 }
 
 function normalizeIdList(value: unknown): string[] {
   const ids = Array.isArray(value)
     ? value
-        .map((entry) => (typeof entry === 'string' ? entry.trim() : ''))
+        .map((entry) => (typeof entry === "string" ? entry.trim() : ""))
         .filter((entry) => entry.length)
-    : []
-  return Array.from(new Set(ids))
+    : [];
+  return Array.from(new Set(ids));
 }
 
 function normalizeTagValues(value: unknown): string[] {
   const tags = Array.isArray(value)
     ? value
-        .map((entry) => (typeof entry === 'string' ? entry.trim() : ''))
+        .map((entry) => (typeof entry === "string" ? entry.trim() : ""))
         .filter((entry) => entry.length)
-    : []
-  return Array.from(new Set(tags))
+    : [];
+  return Array.from(new Set(tags));
 }
 
-function formatCategoryLabel(name: string | null, fallback: string, parentName: string | null): string {
-  const base = name ?? fallback
-  return parentName ? `${base} / ${parentName}` : base
+function formatCategoryLabel(
+  name: string | null,
+  fallback: string,
+  parentName: string | null,
+): string {
+  const base = name ?? fallback;
+  return parentName ? `${base} / ${parentName}` : base;
 }
 
 function readCategorySelections(record: Record<string, unknown>): {
-  ids: string[]
-  options: ProductCategorizePickerOption[]
+  ids: string[];
+  options: ProductCategorizePickerOption[];
 } {
-  const rawCategories = Array.isArray((record as Record<string, unknown>).categories)
-    ? ((record as Record<string, unknown>).categories as Array<Record<string, unknown>>)
-    : []
+  const rawCategories = Array.isArray(
+    (record as Record<string, unknown>).categories,
+  )
+    ? ((record as Record<string, unknown>).categories as Array<
+        Record<string, unknown>
+      >)
+    : [];
   const options = rawCategories
     .map((entry) => {
-      const value = getString(entry.id) ?? getString(entry.categoryId) ?? getString(entry.category_id)
-      if (!value) return null
-      const name = getString(entry.name)
-      const parentName = getString(entry.parentName)
-      const label = formatCategoryLabel(name, value, parentName)
+      const value =
+        getString(entry.id) ??
+        getString(entry.categoryId) ??
+        getString(entry.category_id);
+      if (!value) return null;
+      const name = getString(entry.name);
+      const parentName = getString(entry.parentName);
+      const label = formatCategoryLabel(name, value, parentName);
       const description =
-        parentName && !label.toLowerCase().includes(parentName.toLowerCase()) ? parentName : null
-      return { value, label, description }
+        parentName && !label.toLowerCase().includes(parentName.toLowerCase())
+          ? parentName
+          : null;
+      return { value, label, description };
     })
     .filter(
       (
-        option: { value: string; label: string; description: string | null } | null,
-      ): option is { value: string; label: string; description: string | null } => !!option,
-    )
-  const fallbackIds = normalizeIdList((record as Record<string, unknown>).categoryIds)
-  const combinedIds = Array.from(new Set([...options.map((option) => option.value), ...fallbackIds]))
-  return { ids: combinedIds, options }
+        option: {
+          value: string;
+          label: string;
+          description: string | null;
+        } | null,
+      ): option is {
+        value: string;
+        label: string;
+        description: string | null;
+      } => !!option,
+    );
+  const fallbackIds = normalizeIdList(
+    (record as Record<string, unknown>).categoryIds,
+  );
+  const combinedIds = Array.from(
+    new Set([...options.map((option) => option.value), ...fallbackIds]),
+  );
+  return { ids: combinedIds, options };
 }
 
 function readTagSelections(record: Record<string, unknown>): {
-  values: string[]
-  options: ProductCategorizePickerOption[]
+  values: string[];
+  options: ProductCategorizePickerOption[];
 } {
-  const values = normalizeTagValues((record as Record<string, unknown>).tags)
-  const options = values.map((label) => ({ value: label, label }))
-  return { values, options }
+  const values = normalizeTagValues((record as Record<string, unknown>).tags);
+  const options = values.map((label) => ({ value: label, label }));
+  return { values, options };
 }
 
 function readOfferSnapshots(record: Record<string, unknown>): OfferSnapshot[] {
   const rawOffers = Array.isArray((record as Record<string, unknown>).offers)
-    ? ((record as Record<string, unknown>).offers as Array<Record<string, unknown>>)
-    : []
-  const snapshots: OfferSnapshot[] = []
+    ? ((record as Record<string, unknown>).offers as Array<
+        Record<string, unknown>
+      >)
+    : [];
+  const snapshots: OfferSnapshot[] = [];
   for (const offer of rawOffers) {
-    if (!offer || typeof offer !== 'object') continue
+    if (!offer || typeof offer !== "object") continue;
     const channelId =
-      getString(offer.channelId) ??
-      getString(offer.channel_id) ??
-      null
-    if (!channelId) continue
+      getString(offer.channelId) ?? getString(offer.channel_id) ?? null;
+    if (!channelId) continue;
     snapshots.push({
       id: getString(offer.id),
       channelId,
       title: getString(offer.title) ?? null,
       description: getString(offer.description) ?? null,
-      defaultMediaId: getString(offer.defaultMediaId) ?? getString(offer.default_media_id),
-      defaultMediaUrl: getString(offer.defaultMediaUrl) ?? getString(offer.default_media_url),
-      metadata: isRecord(offer.metadata) ? (offer.metadata as Record<string, unknown>) : null,
+      defaultMediaId:
+        getString(offer.defaultMediaId) ?? getString(offer.default_media_id),
+      defaultMediaUrl:
+        getString(offer.defaultMediaUrl) ?? getString(offer.default_media_url),
+      metadata: isRecord(offer.metadata)
+        ? (offer.metadata as Record<string, unknown>)
+        : null,
       isActive: offer.isActive !== false,
-      channelName: getString(offer.channelName) ?? getString(offer.channel_name),
-      channelCode: getString(offer.channelCode) ?? getString(offer.channel_code),
-    })
+      channelName:
+        getString(offer.channelName) ?? getString(offer.channel_name),
+      channelCode:
+        getString(offer.channelCode) ?? getString(offer.channel_code),
+    });
   }
-  return snapshots
+  return snapshots;
 }
 
 function extractChannelIds(offers: OfferSnapshot[]): string[] {
-  return Array.from(new Set(offers.map((offer) => offer.channelId)))
+  return Array.from(new Set(offers.map((offer) => offer.channelId)));
 }
 
-function buildChannelOptions(offers: OfferSnapshot[]): ProductCategorizePickerOption[] {
-  const seen = new Set<string>()
-  const options: ProductCategorizePickerOption[] = []
+function buildChannelOptions(
+  offers: OfferSnapshot[],
+): ProductCategorizePickerOption[] {
+  const seen = new Set<string>();
+  const options: ProductCategorizePickerOption[] = [];
   for (const offer of offers) {
-    if (seen.has(offer.channelId)) continue
-    seen.add(offer.channelId)
-    const label = offer.channelName || offer.channelCode || offer.channelId
+    if (seen.has(offer.channelId)) continue;
+    seen.add(offer.channelId);
+    const label = offer.channelName || offer.channelCode || offer.channelId;
     const description =
       offer.channelCode && offer.channelCode !== label
         ? offer.channelCode
-        : null
+        : null;
     options.push({
       value: offer.channelId,
       label,
       description,
-    })
+    });
   }
-  return options
+  return options;
 }
 
 type OfferPayload = {
-  id?: string
-  channelId: string
-  title: string
-  description?: string
-  defaultMediaId?: string | null
-  defaultMediaUrl?: string | null
-  metadata?: Record<string, unknown> | null
-  isActive?: boolean
-}
+  id?: string;
+  channelId: string;
+  title: string;
+  description?: string;
+  defaultMediaId?: string | null;
+  defaultMediaUrl?: string | null;
+  metadata?: Record<string, unknown> | null;
+  isActive?: boolean;
+};
 
 function buildOfferPayloads(params: {
-  channelIds: string[]
-  offerSnapshots: OfferSnapshot[]
+  channelIds: string[];
+  offerSnapshots: OfferSnapshot[];
   fallback: {
-    title: string
-    description?: string
-    defaultMediaId?: string | null
-    defaultMediaUrl?: string | null
-  }
+    title: string;
+    description?: string;
+    defaultMediaId?: string | null;
+    defaultMediaUrl?: string | null;
+  };
 }): OfferPayload[] {
-  const { channelIds, offerSnapshots, fallback } = params
-  const byChannel = new Map(offerSnapshots.map((offer) => [offer.channelId, offer]))
-  const payloads: OfferPayload[] = []
-  const fallbackTitle = fallback.title.trim()
+  const { channelIds, offerSnapshots, fallback } = params;
+  const byChannel = new Map(
+    offerSnapshots.map((offer) => [offer.channelId, offer]),
+  );
+  const payloads: OfferPayload[] = [];
+  const fallbackTitle = fallback.title.trim();
   for (const channelId of channelIds) {
-    const existing = byChannel.get(channelId)
-    const title = ensureString(existing?.title) ?? fallbackTitle
-    const description = ensureString(existing?.description) ?? ensureString(fallback.description)
+    const existing = byChannel.get(channelId);
+    const title = ensureString(existing?.title) ?? fallbackTitle;
+    const description =
+      ensureString(existing?.description) ?? ensureString(fallback.description);
     payloads.push({
       id: existing?.id ?? undefined,
       channelId,
       title,
       description,
-      defaultMediaId: existing?.defaultMediaId ?? fallback.defaultMediaId ?? null,
-      defaultMediaUrl: existing?.defaultMediaUrl ?? fallback.defaultMediaUrl ?? null,
+      defaultMediaId:
+        existing?.defaultMediaId ?? fallback.defaultMediaId ?? null,
+      defaultMediaUrl:
+        existing?.defaultMediaUrl ?? fallback.defaultMediaUrl ?? null,
       metadata: existing?.metadata ?? undefined,
       isActive: existing?.isActive ?? true,
-    })
+    });
   }
-  return payloads
+  return payloads;
 }
 
-function mergeOfferSnapshots(current: OfferSnapshot[], payloads: OfferPayload[]): OfferSnapshot[] {
-  const currentByChannel = new Map(current.map((snapshot) => [snapshot.channelId, snapshot]))
+function mergeOfferSnapshots(
+  current: OfferSnapshot[],
+  payloads: OfferPayload[],
+): OfferSnapshot[] {
+  const currentByChannel = new Map(
+    current.map((snapshot) => [snapshot.channelId, snapshot]),
+  );
   return payloads.map((entry) => {
-    const previous = currentByChannel.get(entry.channelId)
+    const previous = currentByChannel.get(entry.channelId);
     return {
       id: entry.id ?? previous?.id ?? null,
       channelId: entry.channelId,
       title: entry.title ?? previous?.title ?? null,
       description: entry.description ?? previous?.description ?? null,
       defaultMediaId: entry.defaultMediaId ?? previous?.defaultMediaId ?? null,
-      defaultMediaUrl: entry.defaultMediaUrl ?? previous?.defaultMediaUrl ?? null,
+      defaultMediaUrl:
+        entry.defaultMediaUrl ?? previous?.defaultMediaUrl ?? null,
       metadata: entry.metadata ?? previous?.metadata ?? null,
       isActive: entry.isActive ?? previous?.isActive ?? true,
       channelName: previous?.channelName ?? null,
       channelCode: previous?.channelCode ?? null,
-    }
-  })
+    };
+  });
 }
 
 function getString(value: unknown): string | null {
-  if (typeof value === 'string' && value.trim().length) return value.trim()
-  return null
+  if (typeof value === "string" && value.trim().length) return value.trim();
+  return null;
 }
 
 function ensureString(value: unknown): string | undefined {
-  const normalized = getString(value)
-  return normalized ?? undefined
+  const normalized = getString(value);
+  return normalized ?? undefined;
 }
 
 function isRecord(value: unknown): value is Record<string, unknown> {
-  return !!value && typeof value === 'object' && !Array.isArray(value)
+  return !!value && typeof value === "object" && !Array.isArray(value);
 }
 
-function buildMetadataPayload(values: ProductFormValues): Record<string, unknown> {
-  const metadata = normalizeMetadata(values.metadata)
-  metadata.__useMarkdown = values.useMarkdown ?? false
-  delete metadata.optionSchema
-  delete metadata.option_schema
-  delete metadata.dimensions
-  delete metadata.weight
-  return metadata
+function extractUomFields(record: Record<string, unknown>) {
+  const unitPriceObject = isRecord(record.unit_price)
+    ? (record.unit_price as Record<string, unknown>)
+    : null;
+  const defaultUnit = canonicalizeUnitCode(
+    record.default_unit ?? record.defaultUnit,
+  );
+  const defaultSalesUnit = canonicalizeUnitCode(
+    record.default_sales_unit ?? record.defaultSalesUnit,
+  );
+  const defaultSalesUnitQuantity = toPositiveNumberOrNull(
+    record.default_sales_unit_quantity ?? record.defaultSalesUnitQuantity,
+  );
+  const roundingScale = toIntegerInRangeOrDefault(
+    record.uom_rounding_scale ?? record.uomRoundingScale,
+    0,
+    6,
+    4,
+  );
+  const roundingModeRaw = toTrimmedOrNull(
+    record.uom_rounding_mode ?? record.uomRoundingMode,
+  );
+  const roundingMode: ProductUnitRoundingMode =
+    roundingModeRaw === "down" || roundingModeRaw === "up"
+      ? roundingModeRaw
+      : "half_up";
+  const unitPriceEnabled = Boolean(
+    unitPriceObject?.enabled ??
+    record.unit_price_enabled ??
+    record.unitPriceEnabled,
+  );
+  const unitPriceReferenceUnit = canonicalizeUnitCode(
+    unitPriceObject?.reference_unit ??
+      unitPriceObject?.referenceUnit ??
+      record.unit_price_reference_unit ??
+      record.unitPriceReferenceUnit,
+  );
+  const unitPriceBaseQuantity = toPositiveNumberOrNull(
+    unitPriceObject?.base_quantity ??
+      unitPriceObject?.baseQuantity ??
+      record.unit_price_base_quantity ??
+      record.unitPriceBaseQuantity,
+  );
+  return {
+    defaultUnit,
+    defaultSalesUnit,
+    defaultSalesUnitQuantity,
+    roundingScale,
+    roundingMode,
+    unitPriceEnabled,
+    unitPriceReferenceUnit,
+    unitPriceBaseQuantity,
+  };
+}
+
+function buildMetadataPayload(
+  values: ProductFormValues,
+): Record<string, unknown> {
+  const metadata = normalizeMetadata(values.metadata);
+  metadata.__useMarkdown = values.useMarkdown ?? false;
+  delete metadata.optionSchema;
+  delete metadata.option_schema;
+  delete metadata.dimensions;
+  delete metadata.weight;
+  return metadata;
 }
 
 function normalizeOptionSchemaRecord(
   schema: OptionSchemaRecord | null | undefined,
 ): CatalogProductOptionSchema | null {
-  if (!schema || !Array.isArray(schema.options)) return null
+  if (!schema || !Array.isArray(schema.options)) return null;
   return {
-    version: typeof schema.version === 'number' ? schema.version : undefined,
+    version: typeof schema.version === "number" ? schema.version : undefined,
     name: schema.name ?? null,
     description: schema.description ?? null,
     options: schema.options.map((option) => {
-      const code = option.code?.trim() || createLocalId()
-      const label = option.label?.trim() || code
+      const code = option.code?.trim() || createLocalId();
+      const label = option.label?.trim() || code;
       const inputType =
-        option.inputType === 'text' || option.inputType === 'textarea' || option.inputType === 'number'
+        option.inputType === "text" ||
+        option.inputType === "textarea" ||
+        option.inputType === "number"
           ? option.inputType
-          : 'select'
+          : "select";
       const choices = Array.isArray(option.choices)
         ? option.choices.map((choice) => {
-            const choiceCode = choice.code?.trim() || createLocalId()
-            const choiceLabel = choice.label?.trim() || choiceCode
-            return { code: choiceCode, label: choiceLabel }
+            const choiceCode = choice.code?.trim() || createLocalId();
+            const choiceLabel = choice.label?.trim() || choiceCode;
+            return { code: choiceCode, label: choiceLabel };
           })
-        : []
+        : [];
       return {
         code,
         label,
         description: option.description ?? undefined,
         inputType,
         choices,
-      }
+      };
     }),
-  }
+  };
 }
 
-function buildSchemaFromOptions(options: ProductOptionInput[], name: string): OptionSchemaRecord {
+function buildSchemaFromOptions(
+  options: ProductOptionInput[],
+  name: string,
+): OptionSchemaRecord {
   return {
     version: 1,
     name,
     options: options.map((option) => ({
       code: slugify(option.title || createLocalId()),
       label: option.title,
-      inputType: 'select',
-      choices: option.values.map((value) => ({ code: slugify(value.label || value.id), label: value.label })),
+      inputType: "select",
+      choices: option.values.map((value) => ({
+        code: slugify(value.label || value.id),
+        label: value.label,
+      })),
     })),
-  }
+  };
 }
 
-function extractOptionsFromTemplate(template: OptionSchemaTemplateSummary): ProductOptionInput[] {
-  const schema = normalizeOptionSchemaRecord(template?.schema)
-  if (!schema) return []
-  return convertSchemaToProductOptions(schema)
+function extractOptionsFromTemplate(
+  template: OptionSchemaTemplateSummary,
+): ProductOptionInput[] {
+  const schema = normalizeOptionSchemaRecord(template?.schema);
+  if (!schema) return [];
+  return convertSchemaToProductOptions(schema);
 }
 
 function OptionSchemaDialog({
@@ -1808,18 +2763,23 @@ function OptionSchemaDialog({
   onDelete,
   onEdit,
 }: OptionSchemaDialogProps) {
-  const t = useT()
+  const t = useT();
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-xl">
         <DialogHeader>
-          <DialogTitle>{t('catalog.products.edit.schemas.dialogTitle', 'Option schemas')}</DialogTitle>
+          <DialogTitle>
+            {t("catalog.products.edit.schemas.dialogTitle", "Option schemas")}
+          </DialogTitle>
         </DialogHeader>
         {isLoading ? (
           <div className="py-6">
             <DataLoader
               isLoading
-              loadingMessage={t('catalog.products.edit.schemas.loading', 'Loading…')}
+              loadingMessage={t(
+                "catalog.products.edit.schemas.loading",
+                "Loading…",
+              )}
               spinnerSize="md"
             >
               <></>
@@ -1828,103 +2788,156 @@ function OptionSchemaDialog({
         ) : templates.length ? (
           <div className="divide-y rounded-md border">
             {templates.map((template) => {
-              const id = typeof template.id === 'string' ? template.id : null
+              const id = typeof template.id === "string" ? template.id : null;
               return (
-                <div key={id ?? template.name ?? createLocalId()} className="flex items-center justify-between px-4 py-3">
+                <div
+                  key={id ?? template.name ?? createLocalId()}
+                  className="flex items-center justify-between px-4 py-3"
+                >
                   <div>
-                    <p className="text-sm font-medium">{template.name ?? template.id ?? 'Schema'}</p>
+                    <p className="text-sm font-medium">
+                      {template.name ?? template.id ?? "Schema"}
+                    </p>
                     {template.description ? (
-                      <p className="text-xs text-muted-foreground">{template.description}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {template.description}
+                      </p>
                     ) : null}
                   </div>
                   <div className="flex items-center gap-2">
-                    <Button type="button" size="sm" variant="secondary" onClick={() => onSelect(template)}>
-                      {t('catalog.products.edit.schemas.apply', 'Apply')}
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => onSelect(template)}
+                    >
+                      {t("catalog.products.edit.schemas.apply", "Apply")}
                     </Button>
                     {id ? (
                       <>
-                        <Button type="button" size="icon" variant="ghost" onClick={() => onEdit(template)}>
+                        <Button
+                          type="button"
+                          size="icon"
+                          variant="ghost"
+                          onClick={() => onEdit(template)}
+                        >
                           <Save className="h-4 w-4" />
-                          <span className="sr-only">{t('catalog.products.edit.schemas.edit', 'Edit schema')}</span>
+                          <span className="sr-only">
+                            {t(
+                              "catalog.products.edit.schemas.edit",
+                              "Edit schema",
+                            )}
+                          </span>
                         </Button>
-                        <Button type="button" size="icon" variant="ghost" onClick={() => void onDelete(id)}>
+                        <Button
+                          type="button"
+                          size="icon"
+                          variant="ghost"
+                          onClick={() => void onDelete(id)}
+                        >
                           <Trash2 className="h-4 w-4 text-destructive" />
-                          <span className="sr-only">{t('catalog.products.edit.schemas.delete', 'Delete schema')}</span>
+                          <span className="sr-only">
+                            {t(
+                              "catalog.products.edit.schemas.delete",
+                              "Delete schema",
+                            )}
+                          </span>
                         </Button>
                       </>
                     ) : null}
                   </div>
                 </div>
-              )
+              );
             })}
           </div>
         ) : (
           <p className="py-4 text-sm text-muted-foreground">
-            {t('catalog.products.edit.schemas.empty', 'No saved schemas yet.')}
+            {t("catalog.products.edit.schemas.empty", "No saved schemas yet.")}
           </p>
         )}
       </DialogContent>
     </Dialog>
-  )
+  );
 }
 
 type OptionSchemaDialogProps = {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  templates: OptionSchemaTemplateSummary[]
-  isLoading: boolean
-  onSelect: (template: OptionSchemaTemplateSummary | null) => void
-  onDelete: (id: string) => Promise<void> | void
-  onEdit: (template: OptionSchemaTemplateSummary) => void
-}
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  templates: OptionSchemaTemplateSummary[];
+  isLoading: boolean;
+  onSelect: (template: OptionSchemaTemplateSummary | null) => void;
+  onDelete: (id: string) => Promise<void> | void;
+  onEdit: (template: OptionSchemaTemplateSummary) => void;
+};
 
 type SaveSchemaDialogProps = {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  defaultName?: string
-  onSubmit: (name: string) => Promise<void>
-}
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  defaultName?: string;
+  onSubmit: (name: string) => Promise<void>;
+};
 
-function SaveSchemaDialog({ open, onOpenChange, defaultName = '', onSubmit }: SaveSchemaDialogProps) {
-  const t = useT()
-  const [name, setName] = React.useState(defaultName)
-  const [saving, setSaving] = React.useState(false)
+function SaveSchemaDialog({
+  open,
+  onOpenChange,
+  defaultName = "",
+  onSubmit,
+}: SaveSchemaDialogProps) {
+  const t = useT();
+  const [name, setName] = React.useState(defaultName);
+  const [saving, setSaving] = React.useState(false);
 
   React.useEffect(() => {
-    if (open) setName(defaultName)
-  }, [defaultName, open])
+    if (open) setName(defaultName);
+  }, [defaultName, open]);
 
   const handleSubmit = React.useCallback(async () => {
-    setSaving(true)
+    setSaving(true);
     try {
-      await onSubmit(name)
-      onOpenChange(false)
+      await onSubmit(name);
+      onOpenChange(false);
     } catch (err) {
-      console.error('schema.save.failed', err)
+      console.error("schema.save.failed", err);
     } finally {
-      setSaving(false)
+      setSaving(false);
     }
-  }, [name, onOpenChange, onSubmit])
+  }, [name, onOpenChange, onSubmit]);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{t('catalog.products.edit.schemas.saveTitle', 'Save option schema')}</DialogTitle>
+          <DialogTitle>
+            {t("catalog.products.edit.schemas.saveTitle", "Save option schema")}
+          </DialogTitle>
         </DialogHeader>
         <div className="space-y-2">
-          <Label htmlFor="schemaName">{t('catalog.products.edit.schemas.nameLabel', 'Schema name')}</Label>
-          <Input id="schemaName" value={name} onChange={(event) => setName(event.target.value)} placeholder={t('catalog.products.edit.schemas.namePlaceholder', 'e.g., Color + Size set')} />
+          <Label htmlFor="schemaName">
+            {t("catalog.products.edit.schemas.nameLabel", "Schema name")}
+          </Label>
+          <Input
+            id="schemaName"
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            placeholder={t(
+              "catalog.products.edit.schemas.namePlaceholder",
+              "e.g., Color + Size set",
+            )}
+          />
         </div>
         <DialogFooter>
-          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
-            {t('common.cancel', 'Cancel')}
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            {t("common.cancel", "Cancel")}
           </Button>
           <Button type="button" onClick={handleSubmit} disabled={saving}>
-            {saving ? t('common.saving', 'Saving…') : t('common.save', 'Save')}
+            {saving ? t("common.saving", "Saving…") : t("common.save", "Save")}
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
+  );
 }