feat(sep): update form entry

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

@@ -7,10 +7,8 @@ import * as z from 'zod'
 import { Button } from '~/components/pub/ui/button'
 import { Input } from '~/components/pub/ui/input'
 import { Label } from '~/components/pub/ui/label'
-import { Card, CardContent, CardHeader, CardTitle } from '~/components/pub/ui/card'
 import { Select } from '~/components/pub/ui/select'
 import { Textarea } from '~/components/pub/ui/textarea'
-import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 
 const items = [
   { value: 'item-1', label: 'Item 1' },
@@ -22,10 +20,15 @@ const items = [
 const schema = z.object({
   tanggalSep: z.string().min(1, 'Tanggal SEP wajib diisi'),
   jalur: z.string().min(1, 'Pilih jalur'),
+  noBpjs: z.string().min(1, 'No. Kartu BPJS wajib diisi'),
+  noKtp: z.string().min(1, 'No. KTP wajib diisi'),
   noRm: z.string().min(1, 'No. RM wajib diisi'),
   namaPasien: z.string().min(1, 'Nama pasien wajib diisi'),
   noTelp: z.string().min(1, 'Nomor telepon wajib diisi'),
+  noSuratKontrol: z.string().min(1, 'No. Surat Kontrol wajib diisi'),
+  tglSuratKontrol: z.string().min(1, 'Tanggal Surat Kontrol wajib diisi'),
   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'),
 })
 
@@ -36,10 +39,15 @@ const { handleSubmit, errors, defineField } = useForm({
 // Bind fields
 const [tanggalSep] = defineField('tanggalSep')
 const [jalur] = defineField('jalur')
+const [noBpjs] = defineField('noBpjs')
+const [noKtp] = defineField('noKtp')
 const [noRm] = defineField('noRm')
 const [namaPasien] = defineField('namaPasien')
 const [noTelp] = defineField('noTelp')
+const [noSuratKontrol] = defineField('noSuratKontrol')
+const [tglSuratKontrol] = defineField('tglSuratKontrol')
 const [klinikTujuan] = defineField('klinikTujuan')
+const [dpjp] = defineField('dpjp')
 const [diagnosaAwal] = defineField('diagnosaAwal')
 
 // Submit handler
@@ -49,75 +57,100 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <Card class="mx-auto w-full max-w-5xl">
-    <CardHeader>
-      <CardTitle></CardTitle>
-    </CardHeader>
-    <CardContent>
-      <form @submit.prevent="onSubmit" class="grid gap-6">
-        <!-- Tanggal SEP & Jalur -->
-        <div class="grid gap-4 md:grid-cols-2">
-          <div>
-            <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>
-            <Label for="jalur">Jalur</Label>
-            <Select 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>
-
-        <!-- Data Pasien -->
-        <h3 class="text-lg font-semibold">Data Pasien</h3>
-        <div class="grid gap-4 md:grid-cols-2">
-          <div>
-            <Label>No. RM*</Label>
-            <Input v-model="noRm" />
-            <p v-if="errors.noRm" class="text-sm text-red-500">{{ errors.noRm }}</p>
-          </div>
-          <div>
-            <Label>Nama Pasien*</Label>
-            <Input v-model="namaPasien" />
-            <p v-if="errors.namaPasien" class="text-sm text-red-500">{{ errors.namaPasien }}</p>
-          </div>
-          <div>
-            <Label>No. Telepon*</Label>
-            <Input v-model="noTelp" />
-            <p v-if="errors.noTelp" class="text-sm text-red-500">{{ errors.noTelp }}</p>
-          </div>
-        </div>
-
-        <!-- Data SEP -->
-        <h3 class="text-lg font-semibold">Data SEP</h3>
-        <div class="grid gap-4 md:grid-cols-2">
-          <div>
-            <Label>Klinik Tujuan*</Label>
-            <Select 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>
-            <Label>Diagnosa Awal*</Label>
-            <Input v-model="diagnosaAwal" />
-            <p v-if="errors.diagnosaAwal" class="text-sm text-red-500">{{ errors.diagnosaAwal }}</p>
-          </div>
-        </div>
-
-        <!-- Catatan -->
+  <div class="mx-auto w-full p-4">
+    <form @submit.prevent="onSubmit" class="grid gap-6">
+      <!-- Tanggal SEP & Jalur -->
+      <div class="grid gap-4 md:grid-cols-3">
         <div>
-          <Label>Catatan</Label>
-          <Textarea placeholder="Masukkan catatan opsional" />
+          <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>
+          <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>
 
-        <!-- Actions -->
-        <div class="mt-6 flex justify-end gap-4">
-          <Button type="button" variant="outline">Riwayat SEP</Button>
-          <Button type="button" variant="outline">Preview</Button>
-          <Button type="submit">Simpan</Button>
+      <!-- Data Pasien -->
+      <div class="flex 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>
+      </div>
+      <div class="grid gap-4 md:grid-cols-3">
+        <div>
+          <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>
-      </form>
-    </CardContent>
-  </Card>
+        <div>
+          <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>
+          <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>
+          <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>
+          <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>
+
+      <!-- Data SEP -->
+      <h3 class="text-lg font-semibold">Data SEP</h3>
+      <div class="grid gap-4 md:grid-cols-3">
+        <div>
+          <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
+          <Input v-model="noSuratKontrol" />
+          <p v-if="errors.noSuratKontrol" class="text-sm text-red-500">{{ errors.noSuratKontrol }}</p>
+        </div>
+        <div>
+          <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>
+          <Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
+          <Select 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>
+          <Label>DPJP<span class="text-red-500">*</span></Label>
+          <Select 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>
+          <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>
+
+      <!-- Catatan -->
+      <div>
+        <Label>Catatan</Label>
+        <Textarea placeholder="Masukkan catatan opsional" />
+      </div>
+
+      <!-- Actions -->
+      <div class="mt-6 flex justify-end gap-4">
+        <Button type="button" variant="outline">Riwayat SEP</Button>
+        <Button type="button" variant="outline">Preview</Button>
+        <Button type="submit">Simpan</Button>
+      </div>
+    </form>
+  </div>
 </template>

app/components/pub/ui/select/SelectTrigger.vue

@@ -28,7 +28,7 @@ const iconName = computed(() => props.iconName || 'i-radix-icons-caret-sort')
   >
     <slot />
     <SelectIcon as-child class="absolute right-3 top-1/2 -translate-y-1/2">
-      <Icon name="i-radix-icons-caret-sort" class="h-4 w-4 opacity-50" />
+      <Icon :name="iconName" class="h-4 w-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>