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

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)}>

package/src/modules/customers/backend/customers/deals/pipeline/page.tsx

@@ -4,6 +4,13 @@ import * as React from 'react'
 import Link from 'next/link'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { ErrorNotice } from '@open-mercato/ui/primitives/ErrorNotice'
 import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
@@ -399,9 +406,8 @@ export default function SalesPipelinePage(): React.ReactElement {
     event.stopPropagation()
   }, [])
 
-  const handleSortChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    const value = event.target.value as SortOption
-    if (sortOptions.includes(value)) setSortBy(value)
+  const handleSortChange = React.useCallback((value: string) => {
+    if (sortOptions.includes(value as SortOption)) setSortBy(value as SortOption)
   }, [])
 
   const handleDragStart = React.useCallback((dealId: string) => {
@@ -478,15 +484,19 @@ export default function SalesPipelinePage(): React.ReactElement {
               {pipelinesQuery.data && pipelinesQuery.data.length > 0 ? (
                 <label className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                   <span>{translate('customers.deals.pipeline.switch.label', 'Pipeline')}</span>
-                  <select
-                    className="h-9 rounded-md border border-border bg-background px-3 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
-                    value={selectedPipelineId ?? ''}
-                    onChange={(e) => setSelectedPipelineId(e.target.value || null)}
+                  <Select
+                    value={selectedPipelineId || undefined}
+                    onValueChange={(value) => setSelectedPipelineId(value || null)}
                   >
-                    {pipelinesQuery.data.map((p) => (
-                      <option key={p.id} value={p.id}>{p.name}</option>
-                    ))}
-                  </select>
+                    <SelectTrigger className="w-auto min-w-[12rem]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {pipelinesQuery.data.map((p) => (
+                        <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </label>
               ) : null}
               <Link
@@ -497,21 +507,22 @@ export default function SalesPipelinePage(): React.ReactElement {
               </Link>
               <label className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                 <span>{translate('customers.deals.pipeline.sort.label', 'Sort by')}</span>
-                <select
-                  className="h-9 rounded-md border border-border bg-background px-3 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
-                  value={sortBy}
-                  onChange={handleSortChange}
-                >
-                  <option value="probability">
-                    {translate('customers.deals.pipeline.sort.probability', 'Probability (high to low)')}
-                  </option>
-                  <option value="createdAt">
-                    {translate('customers.deals.pipeline.sort.createdAt', 'Created (newest first)')}
-                  </option>
-                  <option value="expectedCloseAt">
-                    {translate('customers.deals.pipeline.sort.expectedCloseAt', 'Expected close (soonest first)')}
-                  </option>
-                </select>
+                <Select value={sortBy} onValueChange={handleSortChange}>
+                  <SelectTrigger className="w-auto min-w-[14rem]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="probability">
+                      {translate('customers.deals.pipeline.sort.probability', 'Probability (high to low)')}
+                    </SelectItem>
+                    <SelectItem value="createdAt">
+                      {translate('customers.deals.pipeline.sort.createdAt', 'Created (newest first)')}
+                    </SelectItem>
+                    <SelectItem value="expectedCloseAt">
+                      {translate('customers.deals.pipeline.sort.expectedCloseAt', 'Expected close (soonest first)')}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
               </label>
             </div>
           </div>

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

@@ -6,6 +6,13 @@ import { usePathname, useSearchParams } from 'next/navigation'
 import { Plus, Settings } from 'lucide-react'
 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 {
   Dialog,
   DialogContent,
@@ -168,24 +175,31 @@ export function AddressEditor({
           aria-invalid={errors.name ? 'true' : undefined}
         />
         <div className="flex gap-2">
-          <select
-            className={inputClass('purpose')}
-            value={current.purpose}
-            onChange={(evt) => update('purpose', evt.target.value)}
+          <Select
+            value={current.purpose || undefined}
+            onValueChange={(next) => update('purpose', next ?? '')}
             disabled={disabled}
-            aria-invalid={errors.purpose ? 'true' : undefined}
           >
-            <option value="">
-              {addressTypesLoading
-                ? t('customers.people.detail.addresses.types.loading', 'Loading…')
-                : t('customers.people.detail.addresses.types.placeholder', 'Address type')}
-            </option>
-            {addressTypes.map((entry) => (
-              <option key={entry.value} value={entry.value}>
-                {entry.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger
+              className={errors.purpose ? 'border-destructive' : undefined}
+              aria-invalid={errors.purpose ? 'true' : undefined}
+            >
+              <SelectValue
+                placeholder={
+                  addressTypesLoading
+                    ? t('customers.people.detail.addresses.types.loading', 'Loading…')
+                    : t('customers.people.detail.addresses.types.placeholder', 'Address type')
+                }
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {addressTypes.map((entry) => (
+                <SelectItem key={entry.value} value={entry.value}>
+                  {entry.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
           <Dialog open={typeDialogOpen} onOpenChange={setTypeDialogOpen}>
             <DialogTrigger asChild>
               <Button type="button" variant="outline" size="icon" className="shrink-0" disabled={disabled}>

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

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { RadioGroup, Radio } from '@open-mercato/ui/primitives/radio'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -139,24 +140,29 @@ export function AddressFormatSettings() {
           {t('customers.config.addressFormat.loading', 'Loading current preference…')}
         </div>
       ) : (
-        <div className="space-y-3">
-          {options.map((option) => (
-            <label key={option.id} className="flex cursor-pointer items-start gap-3 rounded border p-3">
-              <input
-                type="radio"
-                name="address-format"
-                className="mt-1"
-                value={option.id}
-                checked={format === option.id}
-                disabled={pending !== null && pending !== option.id}
-                onChange={() => handleChange(option.id)}
-              />
-              <span className="space-y-1">
-                <span className="block text-sm font-medium">{option.title}</span>
-                <span className="block text-xs text-muted-foreground">{option.description}</span>
-              </span>
-            </label>
-          ))}
+        <RadioGroup
+          className="space-y-3"
+          value={format}
+          onValueChange={(next) => handleChange(next as AddressFormatStrategy)}
+          name="address-format"
+        >
+          {options.map((option) => {
+            const inputId = `address-format-${option.id}`
+            return (
+              <label key={option.id} htmlFor={inputId} className="flex cursor-pointer items-start gap-3 rounded border p-3">
+                <Radio
+                  id={inputId}
+                  className="mt-1"
+                  value={option.id}
+                  disabled={pending !== null && pending !== option.id}
+                />
+                <span className="space-y-1">
+                  <span className="block text-sm font-medium">{option.title}</span>
+                  <span className="block text-xs text-muted-foreground">{option.description}</span>
+                </span>
+              </label>
+            )
+          })}
           {error ? <p className="text-sm text-status-error-text">{error}</p> : null}
           {pending ? (
             <div className="inline-flex items-center gap-2 rounded border border-dashed px-3 py-1 text-xs text-muted-foreground">
@@ -164,7 +170,7 @@ export function AddressFormatSettings() {
               {t('customers.config.addressFormat.updating', 'Saving preference…')}
             </div>
           ) : null}
-        </div>
+        </RadioGroup>
       )}
     </section>
   )

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

@@ -5,6 +5,13 @@ import { z } from 'zod'
 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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { collectCustomFieldValues } from '@open-mercato/ui/backend/utils/customFieldValues'
 import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
 import { DictionaryEntrySelect, type DictionarySelectLabels } from '@open-mercato/core/modules/dictionaries/components/DictionaryEntrySelect'
@@ -150,17 +157,21 @@ export function ActivityForm({
           const currentValue =
             typeof value === 'string' && value.length ? value : normalizedEntityOptions[0]?.id ?? ''
           return (
-            <select
-              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              value={currentValue}
-              onChange={(event) => setValue(event.target.value)}
+            <Select
+              value={currentValue || undefined}
+              onValueChange={(next) => setValue(next ?? '')}
             >
-              {normalizedEntityOptions.map((option) => (
-                <option key={option.id} value={option.id}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {normalizedEntityOptions.map((option) => (
+                  <SelectItem key={option.id} value={option.id}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           )
         },
       } as CrudField)
@@ -175,20 +186,21 @@ export function ActivityForm({
         component: ({ value, setValue }) => {
           const currentValue = typeof value === 'string' ? value : ''
           return (
-            <select
-              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              value={currentValue}
-              onChange={(event) => setValue(event.target.value)}
+            <Select
+              value={currentValue || undefined}
+              onValueChange={(next) => setValue(next ?? '')}
             >
-              <option value="">
-                {t('customers.people.detail.activities.fields.dealPlaceholder', 'No linked deal')}
-              </option>
-              {normalizedDealOptions.map((option) => (
-                <option key={option.id} value={option.id}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue placeholder={t('customers.people.detail.activities.fields.dealPlaceholder', 'No linked deal')} />
+              </SelectTrigger>
+              <SelectContent>
+                {normalizedDealOptions.map((option) => (
+                  <SelectItem key={option.id} value={option.id}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           )
         },
       } as CrudField)

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

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { Loader2, Pencil, X } from 'lucide-react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { DictionaryEntrySelect } from '@open-mercato/core/modules/dictionaries/components/DictionaryEntrySelect'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
@@ -223,8 +224,7 @@ export function AnnualRevenueField({
             <label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
               {t('customers.companies.detail.fields.annualRevenuePlaceholder', 'Enter amount')}
             </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
               value={draftAmount}
               onChange={(event) => {
                 setDraftAmount(event.target.value)