feat(sep): modify form entry with radio input

app/components/app/sep/entry-form.vue

@@ -8,6 +8,7 @@ import { Button } from '~/components/pub/ui/button'
 import { Input } from '~/components/pub/ui/input'
 import { Label } from '~/components/pub/ui/label'
 import { Select } from '~/components/pub/ui/select'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { Textarea } from '~/components/pub/ui/textarea'
 
 const items = [
@@ -30,6 +31,8 @@ const schema = z.object({
   klinikTujuan: z.string().min(1, 'Klinik tujuan wajib diisi'),
   dpjp: z.string().min(1, 'DPJP wajib diisi'),
   diagnosaAwal: z.string().min(1, 'Diagnosa awal wajib diisi'),
+  cob: z.string().min(1, 'COB wajib diisi'),
+  katarak: z.string().min(1, 'Katarak wajib diisi'),
 })
 
 const { handleSubmit, errors, defineField } = useForm({
@@ -49,6 +52,8 @@ const [tglSuratKontrol] = defineField('tglSuratKontrol')
 const [klinikTujuan] = defineField('klinikTujuan')
 const [dpjp] = defineField('dpjp')
 const [diagnosaAwal] = defineField('diagnosaAwal')
+const [cob] = defineField('cob')
+const [katarak] = defineField('katarak')
 
 // Submit handler
 const onSubmit = handleSubmit((values) => {
@@ -61,84 +66,133 @@ const onSubmit = handleSubmit((values) => {
     <form @submit.prevent="onSubmit" class="grid gap-6">
       <!-- Tanggal SEP & Jalur -->
       <div class="grid gap-4 md:grid-cols-3">
-        <div>
+        <div class="flex flex-col gap-2">
           <Label for="tanggalSep">Tanggal SEP</Label>
           <Input id="tanggalSep" type="date" v-model="tanggalSep" />
           <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
           <Label for="jalur">Jalur</Label>
           <Select icon-name="i-lucide-chevron-down" v-model="jalur" :items="items" placeholder="Pilih jalur"></Select>
           <p v-if="errors.jalur" class="text-sm text-red-500">{{ errors.jalur }}</p>
         </div>
       </div>
 
+      <hr />
+
       <!-- Data Pasien -->
-      <div class="flex gap-2">
+      <div class="flex items-center gap-2">
         <h3 class="text-lg font-semibold">Data Pasien</h3>
-        <Button variant="outline" class="rounded-full border-green-600 text-green-600 hover:bg-green-50">
-          <Icon name="i-lucide-search" class="h-4 w-4 mr-2" />
-          Cari Data
+        <Button variant="outline" class="rounded-</Button>md border-green-600 text-green-600 hover:bg-green-50">
+          <Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
+          Cari Pasien
         </Button>
       </div>
       <div class="grid gap-4 md:grid-cols-3">
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>No. Kartu BPJS<span class="text-red-500">*</span></Label>
           <Input v-model="noBpjs" />
           <p v-if="errors.noBpjs" class="text-sm text-red-500">{{ errors.noBpjs }}</p>
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>No. KTP<span class="text-red-500">*</span></Label>
           <Input v-model="noKtp" />
           <p v-if="errors.noKtp" class="text-sm text-red-500">{{ errors.noKtp }}</p>
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>No. RM<span class="text-red-500">*</span></Label>
           <Input v-model="noRm" />
           <p v-if="errors.noRm" class="text-sm text-red-500">{{ errors.noRm }}</p>
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>Nama Pasien<span class="text-red-500">*</span></Label>
           <Input v-model="namaPasien" />
           <p v-if="errors.namaPasien" class="text-sm text-red-500">{{ errors.namaPasien }}</p>
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>No. Telepon<span class="text-red-500">*</span></Label>
           <Input v-model="noTelp" />
           <p v-if="errors.noTelp" class="text-sm text-red-500">{{ errors.noTelp }}</p>
         </div>
       </div>
 
+      <hr />
+
       <!-- Data SEP -->
       <h3 class="text-lg font-semibold">Data SEP</h3>
       <div class="grid gap-4 md:grid-cols-3">
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
-          <Input v-model="noSuratKontrol" />
+          <div class="flex gap-2">
+            <Input class="flex-1" v-model="noSuratKontrol" />
+            <Button
+              variant="outline"
+              class="rounded-</Button>md h-[40px] border-green-600 text-green-600 hover:bg-green-50"
+            >
+              <Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
+              Cari Data
+            </Button>
+          </div>
           <p v-if="errors.noSuratKontrol" class="text-sm text-red-500">{{ errors.noSuratKontrol }}</p>
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
           <Input v-model="tglSuratKontrol" />
           <p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
-          <Select v-model="klinikTujuan" :items="items" placeholder="Pilih klinik"></Select>
+          <Select
+            icon-name="i-lucide-chevron-down"
+            v-model="klinikTujuan"
+            :items="items"
+            placeholder="Pilih klinik"
+          ></Select>
           <p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>DPJP<span class="text-red-500">*</span></Label>
-          <Select v-model="dpjp" :items="items" placeholder="Pilih DPJP"></Select>
+          <Select icon-name="i-lucide-chevron-down" v-model="dpjp" :items="items" placeholder="Pilih DPJP"></Select>
           <p v-if="errors.dpjp" class="text-sm text-red-500">{{ errors.dpjp }}</p>
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>Diagnosa Awal<span class="text-red-500">*</span></Label>
           <Input v-model="diagnosaAwal" />
           <p v-if="errors.diagnosaAwal" class="text-sm text-red-500">{{ errors.diagnosaAwal }}</p>
         </div>
       </div>
 
+      <hr />
+
+      <div class="flex items-center gap-4">
+        <div>
+          <Label class="mb-2 block">COB<span class="text-red-500">*</span></Label>
+          <RadioGroup v-model="cob" class="flex items-center gap-2">
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Ya" id="cob-ya" />
+              <Label for="cob-ya">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Tidak" id="cob-tidak" />
+              <Label for="cob-tidak">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </div>
+        <div>
+          <Label class="mb-2 block">Katarak<span class="text-red-500">*</span></Label>
+          <RadioGroup v-model="katarak" class="flex items-center gap-2">
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Ya" id="katarak-ya" />
+              <Label for="katarak-ya">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Tidak" id="katarak-tidak" />
+              <Label for="katarak-tidak">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </div>
+      </div>
+
       <!-- Catatan -->
       <div>
         <Label>Catatan</Label>