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

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,