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

package/src/modules/customers/components/detail/DealForm.tsx

@@ -6,6 +6,13 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
 import { DictionarySelectField } from '../formConfig'
@@ -797,20 +804,23 @@ export function DealForm({
       type: 'custom',
       layout: 'half',
       component: ({ value, setValue }) => (
-        <select
-          className="w-full rounded border px-2 py-1.5 text-sm"
-          value={typeof value === 'string' ? value : ''}
-          onChange={(e) => {
-            setValue(e.target.value)
-            loadStagesForPipeline(e.target.value).catch(() => {})
+        <Select
+          value={typeof value === 'string' && value ? value : undefined}
+          onValueChange={(next) => {
+            setValue(next ?? '')
+            loadStagesForPipeline(next ?? '').catch(() => {})
           }}
           disabled={disabled}
         >
-          <option value="">{t('customers.deals.form.pipeline.placeholder', 'Select pipeline…')}</option>
-          {pipelines.map((p) => (
-            <option key={p.id} value={p.id}>{p.name}</option>
-          ))}
-        </select>
+          <SelectTrigger>
+            <SelectValue placeholder={t('customers.deals.form.pipeline.placeholder', 'Select pipeline…')} />
+          </SelectTrigger>
+          <SelectContent>
+            {pipelines.map((p) => (
+              <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       ),
     } as CrudField,
     {
@@ -819,17 +829,20 @@ export function DealForm({
       type: 'custom',
       layout: 'half',
       component: ({ value, setValue }) => (
-        <select
-          className="w-full rounded border px-2 py-1.5 text-sm"
-          value={typeof value === 'string' ? value : ''}
-          onChange={(e) => setValue(e.target.value)}
+        <Select
+          value={typeof value === 'string' && value ? value : undefined}
+          onValueChange={(next) => setValue(next ?? '')}
           disabled={disabled || !pipelineStages.length}
         >
-          <option value="">{t('customers.deals.form.pipelineStage.placeholder', 'Select stage…')}</option>
-          {pipelineStages.map((s) => (
-            <option key={s.id} value={s.id}>{s.label}</option>
-          ))}
-        </select>
+          <SelectTrigger>
+            <SelectValue placeholder={t('customers.deals.form.pipelineStage.placeholder', 'Select stage…')} />
+          </SelectTrigger>
+          <SelectContent>
+            {pipelineStages.map((s) => (
+              <SelectItem key={s.id} value={s.id}>{s.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       ),
     } as CrudField,
     {

package/src/modules/customers/components/formConfig.tsx

@@ -7,6 +7,14 @@ import { Check, Pencil, Plus, Settings } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 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 { deriveDisplayName, isDerivedDisplayName } from '../lib/displayName'
 import {
   Dialog,
@@ -255,9 +263,8 @@ const createPrimaryEmailField = (t: Translator): CrudField => ({
 
     return (
       <div className="space-y-2">
-        <input
+        <Input
           type="email"
-          className="w-full h-9 rounded border px-2 text-sm"
           value={inputValue}
           onChange={(event) => {
             const nextValue = event.target.value
@@ -561,19 +568,22 @@ export function CompanySelectField({ value, onChange, labels }: CompanySelectFie
   return (
     <div className="space-y-2">
       <div className="flex items-center gap-2">
-        <select
-          className="w-full h-9 rounded border px-2 text-sm"
-          value={value ?? ''}
-          onChange={(event) => onChange(event.target.value ? event.target.value : undefined)}
+        <Select
+          value={value || undefined}
+          onValueChange={(next) => onChange(next || undefined)}
           disabled={loading}
         >
-          <option value="">{labels.placeholder}</option>
-          {options.map((option) => (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
+          <SelectTrigger>
+            <SelectValue placeholder={labels.placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
         <Dialog open={dialogOpen} onOpenChange={handleDialogChange}>
           <DialogTrigger asChild>
             <Button
@@ -595,8 +605,7 @@ export function CompanySelectField({ value, onChange, labels }: CompanySelectFie
             <div className="space-y-4">
               <div className="space-y-1">
                 <label className="text-sm font-medium">{labels.inputLabel}</label>
-                <input
-                  className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                <Input
                   placeholder={labels.inputPlaceholder}
                   value={newCompany}
                   onChange={(event) => {
@@ -760,8 +769,7 @@ export const createDisplayNameSection = (t: Translator) =>
             </div>
             {editing ? (
               <div className="mt-2 space-y-2">
-                <input
-                  className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                <Input
                   value={currentValue}
                   onChange={handleChange}
                   placeholder={t('customers.people.form.displayName.placeholder')}

package/src/modules/customers/widgets/dashboard/customer-todos/widget.client.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import Link from 'next/link'
 import type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { DEFAULT_SETTINGS, hydrateCustomerTodoSettings, type CustomerTodoWidgetSettings } from './config'
@@ -132,12 +133,12 @@ const CustomerTodosWidget: React.FC<DashboardWidgetComponentProps<CustomerTodoWi
           <label htmlFor="customer-todos-page-size" className="text-xs font-semibold uppercase text-muted-foreground">
             {t('customers.widgets.todos.settings.pageSize')}
           </label>
-          <input
+          <Input
             id="customer-todos-page-size"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)

package/src/modules/customers/widgets/dashboard/new-customers/widget.client.tsx

@@ -4,6 +4,14 @@ import * as React from 'react'
 import Link from 'next/link'
 import type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import {
@@ -121,12 +129,12 @@ const CustomerNewCustomersWidget: React.FC<DashboardWidgetComponentProps<Custome
           <label htmlFor="customer-new-customers-page-size" className="text-xs font-semibold uppercase text-muted-foreground">
             {t('customers.widgets.newCustomers.settings.pageSize')}
           </label>
-          <input
+          <Input
             id="customer-new-customers-page-size"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)
@@ -138,21 +146,23 @@ const CustomerNewCustomersWidget: React.FC<DashboardWidgetComponentProps<Custome
           <label htmlFor="customer-new-customers-kind" className="text-xs font-semibold uppercase text-muted-foreground">
             {t('customers.widgets.newCustomers.settings.kind')}
           </label>
-          <select
-            id="customer-new-customers-kind"
-            className="w-full rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          <Select
             value={hydrated.kind}
-            onChange={(event) => {
-              const value = event.target.value
+            onValueChange={(value) => {
               if (value === 'person' || value === 'company' || value === 'all') {
                 onSettingsChange({ ...hydrated, kind: value })
               }
             }}
           >
-            <option value="all">{t('customers.widgets.newCustomers.filters.all')}</option>
-            <option value="person">{t('customers.widgets.newCustomers.filters.person')}</option>
-            <option value="company">{t('customers.widgets.newCustomers.filters.company')}</option>
-          </select>
+            <SelectTrigger id="customer-new-customers-kind" size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('customers.widgets.newCustomers.filters.all')}</SelectItem>
+              <SelectItem value="person">{t('customers.widgets.newCustomers.filters.person')}</SelectItem>
+              <SelectItem value="company">{t('customers.widgets.newCustomers.filters.company')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
     )

package/src/modules/customers/widgets/dashboard/new-deals/widget.client.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import Link from 'next/link'
 import type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { DEFAULT_SETTINGS, hydrateNewDealsSettings, type CustomerNewDealsSettings } from './config'
@@ -104,12 +105,12 @@ const CustomerNewDealsWidget: React.FC<DashboardWidgetComponentProps<CustomerNew
           <label htmlFor="customer-new-deals-page-size" className="text-xs font-semibold uppercase text-muted-foreground">
             {t('customers.widgets.newDeals.settings.pageSize')}
           </label>
-          <input
+          <Input
             id="customer-new-deals-page-size"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)

package/src/modules/customers/widgets/dashboard/next-interactions/widget.client.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { formatRelativeTime } from '@open-mercato/shared/lib/time'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import {
@@ -136,12 +137,12 @@ const CustomerNextInteractionsWidget: React.FC<DashboardWidgetComponentProps<Cus
           <label htmlFor="customer-next-interactions-page-size" className="text-xs font-semibold uppercase text-muted-foreground">
             {t('customers.widgets.nextInteractions.settings.pageSize')}
           </label>
-          <input
+          <Input
             id="customer-next-interactions-page-size"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)

package/src/modules/dashboards/components/WidgetVisibilityEditor.tsx

@@ -3,6 +3,8 @@
 import * as React from 'react'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
 import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -279,28 +281,21 @@ export const WidgetVisibilityEditor = React.forwardRef<WidgetVisibilityEditorHan
       )}
 
       {kind === 'user' && (
-        <div className="flex items-center gap-3 rounded-md border bg-muted/30 px-3 py-2">
-          <label className="flex items-center gap-2 text-sm">
-            <input
-              type="radio"
-              name="widgetOverride"
-              value="inherit"
-              checked={mode === 'inherit'}
-              onChange={() => setMode('inherit')}
-            />
-            {t('dashboards.widgets.mode.inherit', 'Inherit from roles')}
-          </label>
-          <label className="flex items-center gap-2 text-sm">
-            <input
-              type="radio"
-              name="widgetOverride"
-              value="override"
-              checked={mode === 'override'}
-              onChange={() => setMode('override')}
-            />
-            {t('dashboards.widgets.mode.override', 'Override for this user')}
-          </label>
-        </div>
+        <RadioGroup
+          className="flex flex-row items-center gap-3 rounded-md border bg-muted/30 px-3 py-2"
+          name="widgetOverride"
+          value={mode}
+          onValueChange={(next) => setMode(next as 'inherit' | 'override')}
+        >
+          <RadioField
+            value="inherit"
+            label={t('dashboards.widgets.mode.inherit', 'Inherit from roles')}
+          />
+          <RadioField
+            value="override"
+            label={t('dashboards.widgets.mode.override', 'Override for this user')}
+          />
+        </RadioGroup>
       )}
 
       {kind === 'user' && mode === 'inherit' && (

package/src/modules/dashboards/widgets/dashboard/orders-by-status/widget.client.tsx

@@ -10,6 +10,13 @@ import {
   InlineDateRangeSelect,
   type DateRangePreset,
 } from '@open-mercato/ui/backend/date-range'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { DEFAULT_SETTINGS, hydrateSettings, type OrdersByStatusSettings } from './config'
 import type { WidgetDataResponse } from '../../../services/widgetDataService'
 
@@ -115,15 +122,18 @@ const OrdersByStatusWidget: React.FC<DashboardWidgetComponentProps<OrdersByStatu
           >
             {t('dashboards.analytics.settings.chartVariant', 'Chart Style')}
           </label>
-          <select
-            id="orders-by-status-variant"
-            className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          <Select
             value={hydrated.variant}
-            onChange={(e) => onSettingsChange({ ...hydrated, variant: e.target.value as 'pie' | 'donut' })}
+            onValueChange={(value) => onSettingsChange({ ...hydrated, variant: value as 'pie' | 'donut' })}
           >
-            <option value="donut">{t('dashboards.analytics.chartVariant.donut', 'Donut')}</option>
-            <option value="pie">{t('dashboards.analytics.chartVariant.pie', 'Pie')}</option>
-          </select>
+            <SelectTrigger id="orders-by-status-variant" size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="donut">{t('dashboards.analytics.chartVariant.donut', 'Donut')}</SelectItem>
+              <SelectItem value="pie">{t('dashboards.analytics.chartVariant.pie', 'Pie')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
     )

package/src/modules/dashboards/widgets/dashboard/revenue-trend/widget.client.tsx

@@ -10,6 +10,13 @@ import {
   InlineDateRangeSelect,
   type DateRangePreset,
 } from '@open-mercato/ui/backend/date-range'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import type { DateGranularity } from '@open-mercato/shared/modules/analytics'
 import { DEFAULT_SETTINGS, hydrateSettings, type RevenueTrendSettings } from './config'
 import type { WidgetDataResponse } from '../../../services/widgetDataService'
@@ -163,18 +170,21 @@ const RevenueTrendWidget: React.FC<DashboardWidgetComponentProps<RevenueTrendSet
           >
             {t('dashboards.analytics.settings.granularity', 'Granularity')}
           </label>
-          <select
-            id="revenue-trend-granularity"
-            className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          <Select
             value={hydrated.granularity}
-            onChange={(e) => onSettingsChange({ ...hydrated, granularity: e.target.value as DateGranularity })}
+            onValueChange={(value) => onSettingsChange({ ...hydrated, granularity: value as DateGranularity })}
           >
-            {GRANULARITY_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {t(opt.labelKey, opt.value)}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id="revenue-trend-granularity" size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {GRANULARITY_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {t(opt.labelKey, opt.value)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
         <div className="space-y-1.5">
           <label className="flex items-center gap-2 text-sm">

package/src/modules/dashboards/widgets/dashboard/sales-by-region/widget.client.tsx

@@ -6,6 +6,7 @@ import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { BarChart, type BarChartDataItem } from '@open-mercato/ui/backend/charts'
 import { DateRangeSelect, type DateRangePreset } from '@open-mercato/ui/backend/date-range'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { DEFAULT_SETTINGS, hydrateSettings, type SalesByRegionSettings } from './config'
 import type { WidgetDataResponse } from '../../../services/widgetDataService'
 import { formatCurrencyCompact } from '../../../lib/formatters'
@@ -94,12 +95,12 @@ const SalesByRegionWidget: React.FC<DashboardWidgetComponentProps<SalesByRegionS
           >
             {t('dashboards.analytics.settings.limit', 'Number of items')}
           </label>
-          <input
+          <Input
             id="sales-by-region-limit"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.limit}
             onChange={(e) => {
               const next = Number(e.target.value)

package/src/modules/dashboards/widgets/dashboard/top-customers/widget.client.tsx

@@ -6,6 +6,7 @@ import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { TopNTable, type TopNTableColumn } from '@open-mercato/ui/backend/charts'
 import { DateRangeSelect, type DateRangePreset } from '@open-mercato/ui/backend/date-range'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { DEFAULT_SETTINGS, hydrateSettings, type TopCustomersSettings } from './config'
 import type { WidgetDataResponse } from '../../../services/widgetDataService'
 import { formatCurrencySafe } from '../../../lib/formatters'
@@ -130,12 +131,12 @@ const TopCustomersWidget: React.FC<DashboardWidgetComponentProps<TopCustomersSet
           >
             {t('dashboards.analytics.settings.limit', 'Number of items')}
           </label>
-          <input
+          <Input
             id="top-customers-limit"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.limit}
             onChange={(e) => {
               const next = Number(e.target.value)

package/src/modules/dashboards/widgets/dashboard/top-products/widget.client.tsx

@@ -6,6 +6,14 @@ import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { BarChart, type BarChartDataItem } from '@open-mercato/ui/backend/charts'
 import { DateRangeSelect, InlineDateRangeSelect, type DateRangePreset } from '@open-mercato/ui/backend/date-range'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { DEFAULT_SETTINGS, hydrateSettings, type TopProductsSettings } from './config'
 import type { WidgetDataResponse } from '../../../services/widgetDataService'
 import { formatCurrencyCompact } from '../../../lib/formatters'
@@ -117,12 +125,12 @@ const TopProductsWidget: React.FC<DashboardWidgetComponentProps<TopProductsSetti
           >
             {t('dashboards.analytics.settings.limit', 'Number of items')}
           </label>
-          <input
+          <Input
             id="top-products-limit"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.limit}
             onChange={(e) => {
               const next = Number(e.target.value)
@@ -137,15 +145,18 @@ const TopProductsWidget: React.FC<DashboardWidgetComponentProps<TopProductsSetti
           >
             {t('dashboards.analytics.settings.chartLayout', 'Chart Layout')}
           </label>
-          <select
-            id="top-products-layout"
-            className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          <Select
             value={hydrated.layout}
-            onChange={(e) => onSettingsChange({ ...hydrated, layout: e.target.value as 'horizontal' | 'vertical' })}
+            onValueChange={(value) => onSettingsChange({ ...hydrated, layout: value as 'horizontal' | 'vertical' })}
           >
-            <option value="horizontal">{t('dashboards.analytics.settings.horizontal', 'Horizontal')}</option>
-            <option value="vertical">{t('dashboards.analytics.settings.vertical', 'Vertical')}</option>
-          </select>
+            <SelectTrigger id="top-products-layout" size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="horizontal">{t('dashboards.analytics.settings.horizontal', 'Horizontal')}</SelectItem>
+              <SelectItem value="vertical">{t('dashboards.analytics.settings.vertical', 'Vertical')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
     )