@open-mercato/core 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2954.610bab2d08

package/src/modules/catalog/components/products/ProductUomSection.tsx

@@ -7,6 +7,13 @@ import { Button } from "@open-mercato/ui/primitives/button";
 import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
 import { Input } from "@open-mercato/ui/primitives/input";
 import { Label } from "@open-mercato/ui/primitives/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@open-mercato/ui/primitives/select";
 import { Spinner } from "@open-mercato/ui/primitives/spinner";
 import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react";
 import type {
@@ -318,24 +325,22 @@ export function ProductUomSection({
       <div className="grid gap-4 md:grid-cols-2">
         <div className="space-y-2">
           <Label htmlFor="catalog-product-uom-base-unit">{t("catalog.products.uom.baseUnit", "Base unit")}</Label>
-          <select
-            id="catalog-product-uom-base-unit"
-            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={defaultUnit}
-            onChange={(event) =>
-              setValue("defaultUnit", event.target.value || null)
-            }
+          <Select
+            value={defaultUnit || undefined}
+            onValueChange={(value) => setValue("defaultUnit", value || null)}
             disabled={loadingUnits}
           >
-            <option value="">
-              {t("catalog.products.uom.selectUnit", "Select unit")}
-            </option>
-            {unitOptions.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id="catalog-product-uom-base-unit">
+              <SelectValue placeholder={t("catalog.products.uom.selectUnit", "Select unit")} />
+            </SelectTrigger>
+            <SelectContent>
+              {unitOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
           {errors.defaultUnit ? (
             <p className="text-xs text-destructive">{errors.defaultUnit}</p>
           ) : null}
@@ -345,24 +350,22 @@ export function ProductUomSection({
           <Label htmlFor="catalog-product-uom-sales-unit">
             {t("catalog.products.uom.defaultSalesUnit", "Default sales unit")}
           </Label>
-          <select
-            id="catalog-product-uom-sales-unit"
-            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={defaultSalesUnit}
-            onChange={(event) =>
-              setValue("defaultSalesUnit", event.target.value || null)
-            }
+          <Select
+            value={defaultSalesUnit || undefined}
+            onValueChange={(value) => setValue("defaultSalesUnit", value || null)}
             disabled={loadingUnits}
           >
-            <option value="">
-              {t("catalog.products.uom.selectUnit", "Select unit")}
-            </option>
-            {unitOptions.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id="catalog-product-uom-sales-unit">
+              <SelectValue placeholder={t("catalog.products.uom.selectUnit", "Select unit")} />
+            </SelectTrigger>
+            <SelectContent>
+              {unitOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
           {errors.defaultSalesUnit ? (
             <p className="text-xs text-destructive">{errors.defaultSalesUnit}</p>
           ) : null}
@@ -432,24 +435,25 @@ export function ProductUomSection({
           <Label htmlFor="catalog-product-uom-rounding-mode">
             {t("catalog.products.uom.roundingMode", "Rounding mode")}
           </Label>
-          <select
-            id="catalog-product-uom-rounding-mode"
-            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"
+          <Select
             value={values.uomRoundingMode ?? "half_up"}
-            onChange={(event) =>
-              setValue("uomRoundingMode", event.target.value)
-            }
+            onValueChange={(value) => setValue("uomRoundingMode", value)}
           >
-            <option value="half_up">
-              {t("catalog.products.uom.roundingModeHalfUp", "Half up (default)")}
-            </option>
-            <option value="down">
-              {t("catalog.products.uom.roundingModeDown", "Round down")}
-            </option>
-            <option value="up">
-              {t("catalog.products.uom.roundingModeUp", "Round up")}
-            </option>
-          </select>
+            <SelectTrigger id="catalog-product-uom-rounding-mode">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="half_up">
+                {t("catalog.products.uom.roundingModeHalfUp", "Half up (default)")}
+              </SelectItem>
+              <SelectItem value="down">
+                {t("catalog.products.uom.roundingModeDown", "Round down")}
+              </SelectItem>
+              <SelectItem value="up">
+                {t("catalog.products.uom.roundingModeUp", "Round up")}
+              </SelectItem>
+            </SelectContent>
+          </Select>
         </div>
         <div className="space-y-2">
           <Label htmlFor="catalog-product-uom-rounding-scale">
@@ -498,26 +502,26 @@ export function ProductUomSection({
                   "Reference unit",
                 )}
               </Label>
-              <select
-                id="catalog-product-uom-reference-unit"
-                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={unitPriceReferenceUnit}
-                onChange={(event) =>
-                  setValue("unitPriceReferenceUnit", event.target.value || null)
-                }
+              <Select
+                value={unitPriceReferenceUnit || undefined}
+                onValueChange={(value) => setValue("unitPriceReferenceUnit", value || null)}
               >
-                <option value="">
-                  {t(
-                    "catalog.products.unitPrice.selectReferenceUnit",
-                    "Select reference unit",
-                  )}
-                </option>
-                {REFERENCE_UNIT_OPTIONS.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {t(option.i18nKey, option.fallback)}
-                  </option>
-                ))}
-              </select>
+                <SelectTrigger id="catalog-product-uom-reference-unit">
+                  <SelectValue
+                    placeholder={t(
+                      "catalog.products.unitPrice.selectReferenceUnit",
+                      "Select reference unit",
+                    )}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {REFERENCE_UNIT_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {t(option.i18nKey, option.fallback)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
             <div className="space-y-2">
               <Label htmlFor="catalog-product-uom-unit-price-base-quantity">
@@ -613,24 +617,22 @@ export function ProductUomSection({
                   <Label htmlFor={`catalog-product-uom-conversion-unit-${index}`} className="text-xs text-muted-foreground">
                     {t("catalog.products.uom.conversionUnit", "Sales unit")}
                   </Label>
-                  <select
-                    id={`catalog-product-uom-conversion-unit-${index}`}
-                    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={entry.unitCode}
-                    onChange={(event) =>
-                      updateConversion(index, { unitCode: event.target.value })
-                    }
+                  <Select
+                    value={entry.unitCode || undefined}
+                    onValueChange={(value) => updateConversion(index, { unitCode: value ?? '' })}
                     disabled={loadingUnits}
                   >
-                    <option value="">
-                      {t("catalog.products.uom.selectUnit", "Select unit")}
-                    </option>
-                    {unitOptions.map((option) => (
-                      <option key={option.value} value={option.value}>
-                        {option.label}
-                      </option>
-                    ))}
-                  </select>
+                    <SelectTrigger id={`catalog-product-uom-conversion-unit-${index}`}>
+                      <SelectValue placeholder={t("catalog.products.uom.selectUnit", "Select unit")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {unitOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
 
                 <div className="space-y-1 md:col-span-3">

package/src/modules/catalog/components/products/VariantBuilder.tsx

@@ -4,6 +4,13 @@ import * as React from 'react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Label } from '@open-mercato/ui/primitives/label'
 import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Switch } from '@open-mercato/ui/primitives/switch'
 import { ProductMediaManager } from './ProductMediaManager'
 import { MetadataEditor } from './MetadataEditor'
@@ -160,18 +167,21 @@ export function VariantOptionValuesSection({
         {optionDefinitions.map((option) => (
           <div key={option.code} className="space-y-2">
             <Label className="text-xs uppercase text-muted-foreground">{option.label}</Label>
-            <select
-              className="w-full rounded border px-3 py-2 text-sm"
-              value={values.optionValues?.[option.code] ?? ''}
-              onChange={(event) => handleOptionChange(option.code, event.target.value)}
+            <Select
+              value={values.optionValues?.[option.code] || undefined}
+              onValueChange={(value) => handleOptionChange(option.code, value ?? '')}
             >
-              <option value="">{t('catalog.variants.form.optionPlaceholder', 'Select value')}</option>
-              {option.values.map((value) => (
-                <option key={value.id} value={value.label}>
-                  {value.label}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue placeholder={t('catalog.variants.form.optionPlaceholder', 'Select value')} />
+              </SelectTrigger>
+              <SelectContent>
+                {option.values.map((value) => (
+                  <SelectItem key={value.id} value={value.label}>
+                    {value.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         ))}
       </div>
@@ -294,34 +304,40 @@ export function VariantPricesSection({
             </p>
           </div>
           <div className="flex items-center gap-2">
-            <select
-              className="rounded border px-3 py-2 text-sm"
-              value={values.taxRateId ?? ''}
-              onChange={(event) => setValue('taxRateId', event.target.value || null)}
+            <Select
+              value={values.taxRateId || undefined}
+              onValueChange={(value) => setValue('taxRateId', value || null)}
             >
-              <option value="">{t('catalog.variants.form.pricesTaxNone', 'No tax override')}</option>
-              {taxRates.map((rate) => (
-                <option key={rate.id} value={rate.id}>
-                  {formatTaxRateLabel(rate)}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue placeholder={t('catalog.variants.form.pricesTaxNone', 'No tax override')} />
+              </SelectTrigger>
+              <SelectContent>
+                {taxRates.map((rate) => (
+                  <SelectItem key={rate.id} value={rate.id}>
+                    {formatTaxRateLabel(rate)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         </div>
       ) : (
         <div className="flex justify-end">
-          <select
-            className="rounded border px-3 py-2 text-sm"
-            value={values.taxRateId ?? ''}
-            onChange={(event) => setValue('taxRateId', event.target.value || null)}
+          <Select
+            value={values.taxRateId || undefined}
+            onValueChange={(value) => setValue('taxRateId', value || null)}
           >
-            <option value="">{t('catalog.variants.form.pricesTaxNone', 'No tax override')}</option>
-            {taxRates.map((rate) => (
-              <option key={rate.id} value={rate.id}>
-                {formatTaxRateLabel(rate)}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger>
+              <SelectValue placeholder={t('catalog.variants.form.pricesTaxNone', 'No tax override')} />
+            </SelectTrigger>
+            <SelectContent>
+              {taxRates.map((rate) => (
+                <SelectItem key={rate.id} value={rate.id}>
+                  {formatTaxRateLabel(rate)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )}
       <div className="space-y-3">

package/src/modules/customer_accounts/backend/customer_accounts/users/[id]/page.tsx

@@ -6,7 +6,9 @@ import { useRouter } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { FormHeader } from '@open-mercato/ui/backend/forms'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { apiCall, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -110,14 +112,13 @@ function ResetPasswordDialog({
             <label className="text-sm font-medium" htmlFor="reset-password">
               {t('customer_accounts.admin.detail.resetPassword.fields.newPassword', 'New Password')}
             </label>
-            <input
+            <Input
               id="reset-password"
               type="password"
               required
               minLength={8}
               value={newPassword}
               onChange={(event) => setNewPassword(event.target.value)}
-              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               placeholder={t('customer_accounts.admin.detail.resetPassword.fields.placeholder', 'Min. 8 characters')}
             />
           </div>
@@ -571,12 +572,11 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
                 ) : (
                   <div className="space-y-1">
                     <div className="relative">
-                      <input
+                      <Input
                         type="text"
                         value={personSearchQuery}
                         onChange={(event) => { void handleSearchPeople(event.target.value) }}
                         placeholder={t('customer_accounts.admin.detail.fields.searchPerson', 'Search people by name...')}
-                        className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                       />
                       {personResults.length > 0 && (
                         <div className="absolute z-10 mt-1 w-full rounded-md border bg-background shadow-lg max-h-40 overflow-y-auto">
@@ -615,12 +615,11 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
                 ) : (
                   <div className="space-y-1">
                     <div className="relative">
-                      <input
+                      <Input
                         type="text"
                         value={companySearchQuery}
                         onChange={(event) => { void handleSearchCompanies(event.target.value) }}
                         placeholder={t('customer_accounts.admin.detail.fields.searchCompany', 'Search companies by name...')}
-                        className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                       />
                       {companyResults.length > 0 && (
                         <div className="absolute z-10 mt-1 w-full rounded-md border bg-background shadow-lg max-h-40 overflow-y-auto">
@@ -660,34 +659,20 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
                 <label className="text-sm font-medium" htmlFor="user-display-name">
                   {t('customer_accounts.admin.detail.fields.displayName', 'Display Name')}
                 </label>
-                <input
+                <Input
                   id="user-display-name"
                   type="text"
                   value={editDisplayName}
                   onChange={(event) => setEditDisplayName(event.target.value)}
-                  className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 />
               </div>
 
-              <div className="flex items-center gap-3">
-                <label className="text-sm font-medium" htmlFor="user-active-toggle">
-                  {t('customer_accounts.admin.detail.fields.isActive', 'Active')}
-                </label>
-                <button
-                  id="user-active-toggle"
-                  type="button"
-                  role="switch"
-                  aria-checked={editActive ?? data.isActive}
-                  onClick={() => setEditActive((prev) => !(prev ?? data.isActive))}
-                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                    (editActive ?? data.isActive) ? 'bg-primary' : 'bg-muted'
-                  }`}
-                >
-                  <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                    (editActive ?? data.isActive) ? 'translate-x-6' : 'translate-x-1'
-                  }`} />
-                </button>
-              </div>
+              <SwitchField
+                id="user-active-toggle"
+                label={t('customer_accounts.admin.detail.fields.isActive', 'Active')}
+                checked={editActive ?? data.isActive}
+                onCheckedChange={(next) => setEditActive(next)}
+              />
             </div>
 
             <div className="space-y-2">

package/src/modules/customer_accounts/backend/customer_accounts/users/page.tsx

@@ -9,6 +9,7 @@ import { DataTable } from '@open-mercato/ui/backend/DataTable'
 import type { ColumnDef } from '@tanstack/react-table'
 import { RowActions } from '@open-mercato/ui/backend/RowActions'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { apiCall, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -143,13 +144,12 @@ function CreateUserDialog({
             <label className="text-sm font-medium" htmlFor="create-email">
               {t('customer_accounts.admin.createUser.fields.email', 'Email')}
             </label>
-            <input
+            <Input
               id="create-email"
               type="email"
               required
               value={email}
               onChange={(event) => setEmail(event.target.value)}
-              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               placeholder={t('customer_accounts.admin.createUser.fields.emailPlaceholder', 'user@example.com')}
             />
           </div>
@@ -157,13 +157,12 @@ function CreateUserDialog({
             <label className="text-sm font-medium" htmlFor="create-name">
               {t('customer_accounts.admin.createUser.fields.displayName', 'Display Name')}
             </label>
-            <input
+            <Input
               id="create-name"
               type="text"
               required
               value={displayName}
               onChange={(event) => setDisplayName(event.target.value)}
-              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               placeholder={t('customer_accounts.admin.createUser.fields.displayNamePlaceholder', 'John Doe')}
             />
           </div>
@@ -171,14 +170,13 @@ function CreateUserDialog({
             <label className="text-sm font-medium" htmlFor="create-password">
               {t('customer_accounts.admin.createUser.fields.password', 'Password')}
             </label>
-            <input
+            <Input
               id="create-password"
               type="password"
               required
               minLength={8}
               value={password}
               onChange={(event) => setPassword(event.target.value)}
-              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               placeholder={t('customer_accounts.admin.createUser.fields.passwordPlaceholder', 'Min. 8 characters')}
             />
           </div>

package/src/modules/customer_accounts/widgets/injection/account-status/widget.client.tsx

@@ -5,6 +5,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 
 interface AccountStatusData {
@@ -167,12 +168,12 @@ function InviteForm({ personEntityId, onSuccess }: { personEntityId: string; onS
         <label htmlFor="invite-email" className="block text-xs font-medium text-muted-foreground mb-1">
           {t('common.email', 'Email')}
         </label>
-        <input
+        <Input
           id="invite-email"
           type="email"
+          size="sm"
           value={email}
           onChange={(event) => setEmail(event.target.value)}
-          className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           required
           disabled={isSubmitting}
         />
@@ -182,12 +183,12 @@ function InviteForm({ personEntityId, onSuccess }: { personEntityId: string; onS
         <label htmlFor="invite-display-name" className="block text-xs font-medium text-muted-foreground mb-1">
           {t('customer_accounts.widgets.invite.displayName', 'Display Name')}
         </label>
-        <input
+        <Input
           id="invite-display-name"
           type="text"
+          size="sm"
           value={displayName}
           onChange={(event) => setDisplayName(event.target.value)}
-          className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           disabled={isSubmitting}
         />
       </div>

package/src/modules/customers/backend/config/customers/pipeline-stages/page.tsx

@@ -8,6 +8,13 @@ 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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@open-mercato/ui/primitives/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 import { AppearanceSelector, type AppearanceSelectorLabels } from '@open-mercato/core/modules/dictionaries/components/AppearanceSelector'
@@ -316,22 +323,28 @@ export default function PipelineStagesPage() {
           ) : (
             <>
               <div className="flex items-center gap-3">
-                <select
-                  className="flex h-9 w-full max-w-xs rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                  value={selectedPipelineId ?? ''}
-                  onChange={(e) => setSelectedPipelineId(e.target.value || null)}
+                <Select
+                  value={selectedPipelineId || undefined}
+                  onValueChange={(value) => setSelectedPipelineId(value || null)}
+                  disabled={pipelines.length === 0}
                 >
-                  {pipelines.length === 0 && (
-                    <option value="">
-                      {t('customers.config.pipelineStages.noPipelines', 'No pipelines yet')}
-                    </option>
-                  )}
-                  {pipelines.map((p) => (
-                    <option key={p.id} value={p.id}>
-                      {p.name}{p.isDefault ? ` (${t('customers.config.pipelineStages.default', 'default')})` : ''}
-                    </option>
-                  ))}
-                </select>
+                  <SelectTrigger className="w-full max-w-xs">
+                    <SelectValue
+                      placeholder={
+                        pipelines.length === 0
+                          ? t('customers.config.pipelineStages.noPipelines', 'No pipelines yet')
+                          : undefined
+                      }
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {pipelines.map((p) => (
+                      <SelectItem key={p.id} value={p.id}>
+                        {p.name}{p.isDefault ? ` (${t('customers.config.pipelineStages.default', 'default')})` : ''}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
                 {selectedPipeline && (
                   <>
                     <Button variant="outline" size="sm" onClick={() => openEditPipeline(selectedPipeline)}>