From 20378433d86964bfbdf32429b03d216b8143c0da Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 12 Jun 2026 16:53:08 +0700
Subject: [PATCH] Refactor PayrollAdjustmentModal to replace Select component
 with RadioGroup for type selection, enhancing user experience and
 streamlining form handling. Update imports and adjust layout for improved
 accessibility and clarity.

---
 .../payroll/PayrollAdjustmentModal.vue        | 29 +++++++------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/resources/js/components/admin/finance/payroll/PayrollAdjustmentModal.vue b/resources/js/components/admin/finance/payroll/PayrollAdjustmentModal.vue
index e7d9a6f..cb5a6ee 100644
--- a/resources/js/components/admin/finance/payroll/PayrollAdjustmentModal.vue
+++ b/resources/js/components/admin/finance/payroll/PayrollAdjustmentModal.vue
@@ -18,14 +18,9 @@ import {
     FieldLabel,
     FieldSet,
 } from '@/components/ui/field';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { RupiahInput } from '@/components/ui/rupiah-input';
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { parseRupiah } from '@/lib/rupiah';
 import type { PayrollAdjustmentFormData, PayrollListItem, SelectOption } from '@/types/payroll';
@@ -91,18 +86,16 @@ function submit() {
                         </Field>
 
                         <Field>
-                            <FieldLabel for="type">Jenis</FieldLabel>
-                            <Select v-model="form.type">
-                                <SelectTrigger id="type">
-                                    <SelectValue placeholder="Pilih jenis" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem v-for="option in adjustmentTypes" :key="option.value"
-                                        :value="option.value">
+                            <FieldLabel>Jenis</FieldLabel>
+                            <RadioGroup v-model="form.type" class="flex flex-wrap gap-4 pt-1">
+                                <div v-for="option in adjustmentTypes" :key="option.value"
+                                    class="flex items-center gap-2">
+                                    <RadioGroupItem :id="`type-${option.value}`" :value="option.value" />
+                                    <Label :for="`type-${option.value}`" class="font-normal">
                                         {{ option.label }}
-                                    </SelectItem>
-                                </SelectContent>
-                            </Select>
+                                    </Label>
+                                </div>
+                            </RadioGroup>
                             <FieldError :message="form.errors.type" />
                         </Field>