From 4bafd467ce86fcefa952ca9e51e5d086c95e9ee7 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 1 Jul 2026 13:51:09 +0700
Subject: [PATCH] feat: add dialog description and refactor variant selection
 to use native select element in RetailStockTransferModal

---
 .../modal/RetailStockTransferModal.vue        | 43 ++++++++-----------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/resources/js/components/modal/RetailStockTransferModal.vue b/resources/js/components/modal/RetailStockTransferModal.vue
index ca5d36a..6752b03 100644
--- a/resources/js/components/modal/RetailStockTransferModal.vue
+++ b/resources/js/components/modal/RetailStockTransferModal.vue
@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import {
     Dialog,
     DialogContent,
+    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
@@ -18,14 +19,6 @@ import {
     FieldLabel,
     FieldSet,
 } from '@/components/ui/field';
-import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { apiFetch } from '@/lib/api';
 import { transfer } from '@/routes/admin/manage/retail-stock';
@@ -151,6 +144,9 @@ function formatNumber(value: number): string {
                 <DialogTitle class="flex items-center gap-2">
                     Transfer Stok Ecer
                 </DialogTitle>
+                <DialogDescription class="sr-only">
+                    Form pengajuan transfer stok ecer untuk produk {{ productName }}
+                </DialogDescription>
             </DialogHeader>
 
             <div class="space-y-4">
@@ -159,22 +155,21 @@ function formatNumber(value: number): string {
 
                     <Field v-if="hasMultipleVariants">
                         <FieldLabel for="transfer-variant" required>Pilih Varian</FieldLabel>
-                        <Select :model-value="selectedVariantId ? String(selectedVariantId) : undefined" @update:model-value="selectedVariantId = Number($event)">
-                            <SelectTrigger id="transfer-variant" class="w-full">
-                                <SelectValue placeholder="Pilih varian" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectGroup>
-                                    <SelectItem
-                                        v-for="variant in variants"
-                                        :key="variant.id"
-                                        :value="String(variant.id)"
-                                    >
-                                        {{ variant.name }}
-                                    </SelectItem>
-                                </SelectGroup>
-                            </SelectContent>
-                        </Select>
+                        <select
+                            id="transfer-variant"
+                            :value="selectedVariantId ? String(selectedVariantId) : ''"
+                            @change="selectedVariantId = Number(($event.target as HTMLSelectElement).value)"
+                            class="border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex h-9 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50"
+                        >
+                            <option value="" disabled>Pilih varian</option>
+                            <option
+                                v-for="variant in props.variants"
+                                :key="variant.id"
+                                :value="String(variant.id)"
+                            >
+                                {{ variant.name }}
+                            </option>
+                        </select>
                     </Field>
 
                     <p v-if="!hasMultipleVariants" class="text-xs text-muted-foreground">Varian: {{ displayVariantName }}</p>