@open-mercato/core 0.5.1-develop.2949.009dcdd2d5 → 0.5.1-develop.2954.610bab2d08

package/src/modules/sales/components/ShippingMethodsSettings.tsx

@@ -13,8 +13,15 @@ import {
   DialogTitle,
 } from '@open-mercato/ui/primitives/dialog'
 import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Label } from '@open-mercato/ui/primitives/label'
-import { Switch } from '@open-mercato/ui/primitives/switch'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { CrudForm, type CrudCustomFieldRenderProps, type CrudField } from '@open-mercato/ui/backend/CrudForm'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCall, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
@@ -171,17 +178,21 @@ function FlatRateSettingsEditor(props: {
               <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                 <div className="space-y-1">
                   <Label className="text-xs uppercase text-muted-foreground">{translations.metric}</Label>
-                  <select
-                    className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                  <Select
                     value={rate.metric ?? 'item_count'}
-                    onChange={(evt) => updateRate(index, 'metric', evt.target.value)}
+                    onValueChange={(value) => updateRate(index, 'metric', value)}
                   >
-                    {metrics.map((opt) => (
-                      <option key={opt.value} value={opt.value}>
-                        {opt.label}
-                      </option>
-                    ))}
-                  </select>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {metrics.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>
+                          {opt.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
                 <div className="space-y-1">
                   <Label className="text-xs uppercase text-muted-foreground">{translations.min}</Label>
@@ -239,16 +250,13 @@ function FlatRateSettingsEditor(props: {
           ))
         )}
       </div>
-      <div className="flex items-center gap-2">
-        <Switch
-          id="apply-base-rate"
-          checked={applyBaseRate}
-          onCheckedChange={(checked) => onChange({ ...value, applyBaseRate: checked })}
-        />
-        <Label htmlFor="apply-base-rate" className="text-sm">
-          {translations.applyBaseRate}
-        </Label>
-      </div>
+      <SwitchField
+        id="apply-base-rate"
+        label={translations.applyBaseRate}
+        flip
+        checked={applyBaseRate}
+        onCheckedChange={(checked) => onChange({ ...value, applyBaseRate: checked })}
+      />
     </div>
   )
 }

package/src/modules/sales/components/channels/ChannelOfferForm.tsx

@@ -10,6 +10,14 @@ import { createCrudFormError, type CrudServerFieldErrors } from '@open-mercato/u
 import { readApiResultOrThrow, apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Loader2, Search, Image as ImageIcon, Trash2 } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { E } from '#generated/entities.ids.generated'
@@ -933,18 +941,18 @@ function ChannelSelectInput({
     )
   }
   return (
-    <select
-      className="w-full rounded border px-2 py-2 text-sm"
-      value={value ?? ''}
-      onChange={(event) => onChange(event.target.value || null)}
-    >
-      <option value="">{t('sales.channels.offers.form.channelPlaceholder', 'Select channel')}</option>
-      {options.map((opt) => (
-        <option key={opt.id} value={opt.id}>
-          {opt.code ? `${opt.name} (${opt.code})` : opt.name}
-        </option>
-      ))}
-    </select>
+    <Select value={value || undefined} onValueChange={(next) => onChange(next || null)}>
+      <SelectTrigger>
+        <SelectValue placeholder={t('sales.channels.offers.form.channelPlaceholder', 'Select channel')} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((opt) => (
+          <SelectItem key={opt.id} value={opt.id}>
+            {opt.code ? `${opt.name} (${opt.code})` : opt.name}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   )
 }
 
@@ -1027,19 +1035,16 @@ function ProductSelectInput({
 
   return (
     <div className="space-y-3">
-      <div className="relative">
-        <Search className="pointer-events-none absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-        <input
-          className="w-full rounded border pl-8 pr-2 py-2 text-sm"
-          value={query}
-          onChange={(event) => {
-            setQuery(event.target.value)
-            setHasTyped(true)
-          }}
-          onKeyDown={handleKeyDown}
-          placeholder={t('sales.channels.offers.form.productSearchPlaceholder', 'Search by title, SKU, or ID…')}
-        />
-      </div>
+      <Input
+        leftIcon={<Search />}
+        value={query}
+        onChange={(event) => {
+          setQuery(event.target.value)
+          setHasTyped(true)
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder={t('sales.channels.offers.form.productSearchPlaceholder', 'Search by title, SKU, or ID…')}
+      />
       {selectedHint ? (
         <div className="rounded border bg-muted px-3 py-2 text-xs text-muted-foreground">
           {selectedHint}
@@ -1819,11 +1824,10 @@ function PriceOverridesEditor({
         <div className="space-y-2">
           {values.map((row) => (
             <div key={row.tempId} className="grid gap-2 rounded border p-3 md:grid-cols-3">
-              <select
-                className="rounded border px-2 py-2 text-sm"
-                value={row.priceKindId ?? ''}
-                onChange={(event) => {
-                  const next = priceKinds.find((kind) => kind.id === event.target.value)
+              <Select
+                value={row.priceKindId || undefined}
+                onValueChange={(value) => {
+                  const next = priceKinds.find((kind) => kind.id === value)
                   updateRow(row.tempId, {
                     priceKindId: next?.id ?? null,
                     priceKindCode: next?.code ?? next?.title ?? null,
@@ -1832,28 +1836,29 @@ function PriceOverridesEditor({
                   })
                 }}
               >
-                <option value="">{t('sales.channels.offers.pricing.selectKind', 'Select price kind')}</option>
-                {priceKinds.map((kind) => (
-                  <option
-                    key={kind.id}
-                    value={kind.id}
-                    disabled={usedKindIdSet.has(kind.id) && row.priceKindId !== kind.id}
-                  >
-                  {kind.title ?? kind.code ?? kind.id}
-                </option>
-              ))}
-            </select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('sales.channels.offers.pricing.selectKind', 'Select price kind')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {priceKinds.map((kind) => (
+                    <SelectItem
+                      key={kind.id}
+                      value={kind.id}
+                      disabled={usedKindIdSet.has(kind.id) && row.priceKindId !== kind.id}
+                    >
+                      {kind.title ?? kind.code ?? kind.id}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
               <div className="relative">
                 {(row.currencyCode ?? basePrice?.currencyCode) ? (
                   <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-muted-foreground">
                     {row.currencyCode ?? basePrice?.currencyCode}
                   </span>
                 ) : null}
-                <input
-                  className={cn(
-                    'w-full rounded border py-2 text-sm',
-                    row.currencyCode || basePrice?.currencyCode ? 'pl-16 pr-2' : 'px-2',
-                  )}
+                <Input
+                  inputClassName={cn(row.currencyCode || basePrice?.currencyCode ? 'pl-13' : '')}
                   type="number"
                   placeholder={t('sales.channels.offers.pricing.amount', 'Amount')}
                   value={row.amount ?? ''}

package/src/modules/sales/components/documents/AddressesSection.tsx

@@ -9,7 +9,14 @@ import { createCrud } from '@open-mercato/ui/backend/utils/crud'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { ErrorMessage, LoadingMessage, TabEmptyState } from '@open-mercato/ui/backend/detail'
 import { Button } from '@open-mercato/ui/primitives/button'
-import { Switch } from '@open-mercato/ui/primitives/switch'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 import { AddressEditor, type AddressEditorDraft } from '@open-mercato/core/modules/customers/components/AddressEditor'
@@ -903,26 +910,27 @@ export function SalesDocumentAddressesSection({
     onChange: (next: string | null) => void,
     disabled: boolean
   ) => (
-    <select
-      className="w-full rounded border px-2 py-2 text-sm"
-      value={value}
-      onChange={(evt) => onChange(evt.target.value || null)}
-      disabled={disabled}
-    >
-      <option value="">
-        {addressesLoading
-          ? t('sales.documents.form.address.loading', 'Loading addresses…')
-          : t('sales.documents.form.address.placeholder', 'Select address')}
-      </option>
-      {options.map((addr) => {
-        const optionLabel = addr.summary ? `${addr.label} — ${addr.summary}` : addr.label
-        return (
-          <option key={addr.id} value={addr.id}>
-            {optionLabel}
-          </option>
-        )
-      })}
-    </select>
+    <Select value={value || undefined} onValueChange={(next) => onChange(next || null)} disabled={disabled}>
+      <SelectTrigger>
+        <SelectValue
+          placeholder={
+            addressesLoading
+              ? t('sales.documents.form.address.loading', 'Loading addresses…')
+              : t('sales.documents.form.address.placeholder', 'Select address')
+          }
+        />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((addr) => {
+          const optionLabel = addr.summary ? `${addr.label} — ${addr.summary}` : addr.label
+          return (
+            <SelectItem key={addr.id} value={addr.id}>
+              {optionLabel}
+            </SelectItem>
+          )
+        })}
+      </SelectContent>
+    </Select>
   )
 
   return (
@@ -962,14 +970,13 @@ export function SalesDocumentAddressesSection({
                   : t('sales.documents.form.shipping.hint', 'Select an address or define a new one.')}
               </p>
             </div>
-            <label className="flex items-center gap-2 text-sm">
-              <Switch
-                checked={useCustomShipping}
-                onCheckedChange={(checked) => setUseCustomShipping(checked)}
-                disabled={customerRequired || locked}
-              />
-              <span>{t('sales.documents.form.shipping.custom', 'Define new address')}</span>
-            </label>
+            <SwitchField
+              label={t('sales.documents.form.shipping.custom', 'Define new address')}
+              flip
+              checked={useCustomShipping}
+              onCheckedChange={(checked) => setUseCustomShipping(checked)}
+              disabled={customerRequired || locked}
+            />
           </div>
           {!useCustomShipping
             ? renderAddressSelect(
@@ -988,14 +995,13 @@ export function SalesDocumentAddressesSection({
                 onChange={(next) => setShippingDraft(next)}
                 hidePrimaryToggle
               />
-              <label className="flex items-center gap-2 text-sm">
-                <Switch
-                  checked={saveShippingAddress && !customerRequired}
-                  onCheckedChange={(checked) => setSaveShippingAddress(checked)}
-                  disabled={customerRequired || locked}
-                />
-                {t('sales.documents.form.address.saveToCustomer', 'Save this address to the customer')}
-              </label>
+              <SwitchField
+                label={t('sales.documents.form.address.saveToCustomer', 'Save this address to the customer')}
+                flip
+                checked={saveShippingAddress && !customerRequired}
+                onCheckedChange={(checked) => setSaveShippingAddress(checked)}
+                disabled={customerRequired || locked}
+              />
             </div>
           ) : null}
         </div>
@@ -1013,21 +1019,20 @@ export function SalesDocumentAddressesSection({
                   : t('sales.documents.form.billing.hint', 'Select an address or define a new one.')}
               </p>
             </div>
-            <label className="flex items-center gap-2 text-sm">
-              <Switch
-                checked={sameAsShipping}
-                onCheckedChange={(checked) => {
-                  setSameAsShipping(checked)
-                  if (checked) {
-                    setUseCustomBilling(useCustomShipping)
-                    setBillingAddressId(useCustomShipping ? null : shippingAddressIdState)
-                    setBillingDraft(useCustomShipping ? shippingDraft : emptyDraft)
-                  }
-                }}
-                disabled={locked}
-              />
-              <span>{t('sales.documents.form.address.sameAsShipping', 'Same as shipping')}</span>
-            </label>
+            <SwitchField
+              label={t('sales.documents.form.address.sameAsShipping', 'Same as shipping')}
+              flip
+              checked={sameAsShipping}
+              onCheckedChange={(checked) => {
+                setSameAsShipping(checked)
+                if (checked) {
+                  setUseCustomBilling(useCustomShipping)
+                  setBillingAddressId(useCustomShipping ? null : shippingAddressIdState)
+                  setBillingDraft(useCustomShipping ? shippingDraft : emptyDraft)
+                }
+              }}
+              disabled={locked}
+            />
           </div>
 
           {!sameAsShipping ? (
@@ -1040,14 +1045,13 @@ export function SalesDocumentAddressesSection({
                     addressesLoading || customerRequired || locked
                   )
                 : null}
-              <label className="flex items-center gap-2 text-sm">
-                <Switch
-                  checked={useCustomBilling}
-                  onCheckedChange={(checked) => setUseCustomBilling(checked)}
-                  disabled={customerRequired || locked}
-                />
-                <span>{t('sales.documents.form.shipping.custom', 'Define new address')}</span>
-              </label>
+              <SwitchField
+                label={t('sales.documents.form.shipping.custom', 'Define new address')}
+                flip
+                checked={useCustomBilling}
+                onCheckedChange={(checked) => setUseCustomBilling(checked)}
+                disabled={customerRequired || locked}
+              />
 
               {useCustomBilling ? (
                 <div className="space-y-3">
@@ -1058,14 +1062,13 @@ export function SalesDocumentAddressesSection({
                     onChange={(next) => setBillingDraft(next)}
                     hidePrimaryToggle
                   />
-                  <label className="flex items-center gap-2 text-sm">
-                    <Switch
-                      checked={saveBillingAddress && !customerRequired}
-                      onCheckedChange={(checked) => setSaveBillingAddress(checked)}
-                      disabled={customerRequired || locked}
-                    />
-                    {t('sales.documents.form.address.saveToCustomer', 'Save this address to the customer')}
-                  </label>
+                  <SwitchField
+                    label={t('sales.documents.form.address.saveToCustomer', 'Save this address to the customer')}
+                    flip
+                    checked={saveBillingAddress && !customerRequired}
+                    onCheckedChange={(checked) => setSaveBillingAddress(checked)}
+                    disabled={customerRequired || locked}
+                  />
                 </div>
               ) : null}
             </>
@@ -1252,14 +1255,13 @@ export function SalesDocumentAddressesSection({
               </Button>
             </div>
 
-            <label className="flex items-center gap-2 text-sm">
-              <Switch
-                checked={additionalUseCustom}
-                onCheckedChange={(checked) => setAdditionalUseCustom(checked)}
-                disabled={customerRequired || locked}
-              />
-              <span>{t('sales.documents.form.shipping.custom', 'Define new address')}</span>
-            </label>
+            <SwitchField
+              label={t('sales.documents.form.shipping.custom', 'Define new address')}
+              flip
+              checked={additionalUseCustom}
+              onCheckedChange={(checked) => setAdditionalUseCustom(checked)}
+              disabled={customerRequired || locked}
+            />
 
             {!additionalUseCustom
               ? renderAddressSelect(

package/src/modules/sales/components/documents/AdjustmentDialog.tsx

@@ -7,6 +7,13 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
 import { collectCustomFieldValues } from '@open-mercato/ui/backend/utils/customFieldValues'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
@@ -524,23 +531,28 @@ export function AdjustmentDialog({
           }
           return (
             <div className="flex items-center gap-2">
-              <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={rateId ?? ''}
-                onChange={handleChange}
+              <Select
+                value={rateId || undefined}
+                onValueChange={(value) => handleChange({ target: { value } } as React.ChangeEvent<HTMLSelectElement>)}
                 disabled={!taxRates.length}
               >
-                <option value="">
-                  {taxRates.length
-                    ? t('sales.documents.adjustments.taxRate.placeholder', 'No tax class selected')
-                    : t('sales.documents.adjustments.taxRate.empty', 'No tax classes available')}
-                </option>
-                {taxRates.map((rate) => (
-                  <option key={rate.id} value={rate.id}>
-                    {formatTaxRateLabel(rate)}
-                  </option>
-                ))}
-              </select>
+                <SelectTrigger>
+                  <SelectValue
+                    placeholder={
+                      taxRates.length
+                        ? t('sales.documents.adjustments.taxRate.placeholder', 'No tax class selected')
+                        : t('sales.documents.adjustments.taxRate.empty', 'No tax classes available')
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {taxRates.map((rate) => (
+                    <SelectItem key={rate.id} value={rate.id}>
+                      {formatTaxRateLabel(rate)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
               <Button
                 type="button"
                 variant="ghost"

package/src/modules/sales/components/documents/LineItemDialog.tsx

@@ -23,6 +23,13 @@ import {
 } from "@open-mercato/ui/primitives/dialog";
 import { Button } from "@open-mercato/ui/primitives/button";
 import { Input } from "@open-mercato/ui/primitives/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@open-mercato/ui/primitives/select";
 import { DollarSign, Settings } from "lucide-react";
 import { normalizeCustomFieldValues } from "@open-mercato/shared/lib/custom-fields/normalize";
 import {
@@ -1969,22 +1976,25 @@ export function LineItemDialog({
                   onChange={(event) => setValue(event.target.value)}
                   placeholder="0.00"
                 />
-                <select
-                  className="w-32 rounded border px-2 text-sm"
+                <Select
                   value={mode}
-                  onChange={(event) => {
-                    const nextMode =
-                      event.target.value === "net" ? "net" : "gross";
+                  onValueChange={(value) => {
+                    const nextMode = value === "net" ? "net" : "gross";
                     setFormValue?.("priceMode", nextMode);
                   }}
                 >
-                  <option value="gross">
-                    {t("sales.documents.items.priceGross", "Gross")}
-                  </option>
-                  <option value="net">
-                    {t("sales.documents.items.priceNet", "Net")}
-                  </option>
-                </select>
+                  <SelectTrigger className="w-32">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="gross">
+                      {t("sales.documents.items.priceGross", "Gross")}
+                    </SelectItem>
+                    <SelectItem value="net">
+                      {t("sales.documents.items.priceNet", "Net")}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
               {isCatalogLine && selectedPrice && quantityUnitCode && baseUnitCode ? (
                 unitFactor !== null && convertedAmount !== null ? (
@@ -2048,31 +2058,36 @@ export function LineItemDialog({
           };
           return (
             <div className="flex items-center gap-2">
-              <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={resolvedValue ?? ""}
-                onChange={handleChange}
+              <Select
+                value={resolvedValue || undefined}
+                onValueChange={(value) => handleChange({ target: { value } } as React.ChangeEvent<HTMLSelectElement>)}
                 disabled={!taxRates.length}
               >
-                <option value="">
-                  {taxRates.length
-                    ? t(
-                        "sales.documents.items.taxRate.none",
-                        "No tax class selected",
-                      )
-                    : t(
-                        "sales.documents.items.taxRate.empty",
-                        "No tax classes available",
-                      )}
-                </option>
-                {taxRates.map((rate) => (
-                  <option key={rate.id} value={rate.id}>
-                    {rate.name}
-                    {rate.code ? ` • ${rate.code.toUpperCase()}` : ""}
-                    {Number.isFinite(rate.rate) ? ` • ${rate.rate}%` : ""}
-                  </option>
-                ))}
-              </select>
+                <SelectTrigger>
+                  <SelectValue
+                    placeholder={
+                      taxRates.length
+                        ? t(
+                            "sales.documents.items.taxRate.none",
+                            "No tax class selected",
+                          )
+                        : t(
+                            "sales.documents.items.taxRate.empty",
+                            "No tax classes available",
+                          )
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {taxRates.map((rate) => (
+                    <SelectItem key={rate.id} value={rate.id}>
+                      {rate.name}
+                      {rate.code ? ` • ${rate.code.toUpperCase()}` : ""}
+                      {Number.isFinite(rate.rate) ? ` • ${rate.rate}%` : ""}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
               <Button
                 type="button"
                 variant="ghost"
@@ -2120,11 +2135,10 @@ export function LineItemDialog({
             );
           }
           return (
-            <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={typeof value === "string" ? value : ""}
-              onChange={(event) => {
-                const nextValue = event.target.value || null;
+            <Select
+              value={typeof value === "string" && value ? value : undefined}
+              onValueChange={(next) => {
+                const nextValue = next || null;
                 const nextUnitPrice = convertUnitPriceForUnitChange(
                   values?.unitPrice,
                   typeof value === "string" ? value : null,
@@ -2172,17 +2186,21 @@ export function LineItemDialog({
               }}
               disabled={!productId}
             >
-              <option value="">
-                {t("sales.documents.items.quantityUnitSelect", "Select unit")}
-              </option>
-              {unitOptions.map((option) => (
-                <option key={option.code} value={option.code}>
-                  {option.isBase
-                    ? `${option.code} (${t("sales.documents.items.baseUnitTag", "base")})`
-                    : option.code}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue
+                  placeholder={t("sales.documents.items.quantityUnitSelect", "Select unit")}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {unitOptions.map((option) => (
+                  <SelectItem key={option.code} value={option.code}>
+                    {option.isBase
+                      ? `${option.code} (${t("sales.documents.items.baseUnitTag", "base")})`
+                      : option.code}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           );
         },
       } satisfies CrudField,