feat(sep): update filter function

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

@@ -13,7 +13,7 @@ import { Textarea } from '~/components/pub/ui/textarea'
 import DatepickerSingle from '~/components/pub/custom-ui/form/datepicker-single.vue'
 
 const emit = defineEmits<{
-  (e: "event", value: any): void
+  (e: 'event', value: any): void
 }>()
 
 const items = [
@@ -92,7 +92,11 @@ const onSubmit = handleSubmit((values) => {
       <!-- Data Pasien -->
       <div class="flex items-center gap-2">
         <h3 class="text-lg font-semibold">Data Pasien</h3>
-        <Button variant="outline" class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50" @click="emit('event', 'search-patient')">
+        <Button
+          variant="outline"
+          class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+          @click="emit('event', 'search-patient')"
+        >
           <Icon name="i-lucide-search" class="h-5 w-5" />
           Cari Pasien
         </Button>
@@ -134,7 +138,11 @@ const onSubmit = handleSubmit((values) => {
           <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
           <div class="flex gap-2">
             <Input class="flex-1" v-model="noSuratKontrol" />
-            <Button variant="outline" class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50">
+            <Button
+              variant="outline"
+              class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+              @click="emit('event', 'search-letter')"
+            >
               <Icon name="i-lucide-search" class="h-5 w-5" />
               Cari Data
             </Button>
@@ -259,7 +267,7 @@ const onSubmit = handleSubmit((values) => {
         >
           <Icon name="i-lucide-eye" class="h-5 w-5" />Preview
         </Button>
-        <Button type="submit" class="h-[40px] text-white min-w-[120px]">
+        <Button type="submit" class="h-[40px] min-w-[120px] text-white">
           <Icon name="i-lucide-save" class="h-5 w-5" />
           Simpan
         </Button>

app/components/app/sep/search-letter.vue

@@ -14,11 +14,14 @@ import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 
 const props = defineProps<{
   open: boolean
-  patients: Array<{
-    ktp: string
-    rm: string
-    bpjs: string
-    nama: string
+  letters: Array<{
+    noSurat: string
+    tglRencana: string
+    noSep: string
+    namaPasien: string
+    noBpjs: string
+    klinik: string
+    dokter: string
   }>
   selected: string
 }>()
@@ -30,15 +33,11 @@ const emit = defineEmits<{
 }>()
 
 const search = ref('')
-const filteredPatients = computed(() =>
-  props.patients.filter(
-    (p) =>
-      p.ktp.includes(search.value) ||
-      p.rm.includes(search.value) ||
-      p.bpjs.includes(search.value) ||
-      p.nama.toLowerCase().includes(search.value.toLowerCase()),
-  ),
-)
+
+const filteredLetters = computed(() => {
+  const letters = props.letters || []
+  return letters.filter((p) => p.noSurat.includes(search.value) || p.noSep.includes(search.value))
+})
 
 function saveSelection() {
   emit('save')
@@ -49,16 +48,16 @@ function saveSelection() {
 <template>
   <Dialog :open="props.open" @update:open="emit('update:open', $event)">
     <DialogTrigger as-child>
-      <Button>Cari Pasien</Button>
+      <Button>Cari No. Surat Kontrol</Button>
     </DialogTrigger>
-    <DialogContent class="max-w-3xl">
+    <DialogContent class="max-w-[50%]">
       <DialogHeader>
-        <DialogTitle>Cari Pasien</DialogTitle>
+        <DialogTitle>Cari No. Surat Kontrol</DialogTitle>
       </DialogHeader>
 
       <!-- Input Search -->
       <div class="mb-2 max-w-[50%]">
-        <Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
+        <Input v-model="search" placeholder="Cari berdasarkan No. Surat Kontrol / No. SEP" />
       </div>
 
       <!-- Table -->
@@ -67,25 +66,29 @@ function saveSelection() {
           <thead class="bg-gray-100">
             <tr class="text-left">
               <th class="p-2"></th>
-              <th class="p-2">NO. KTP</th>
-              <th class="p-2">NO. RM</th>
-              <th class="p-2">NO. KARTU BPJS</th>
+              <th class="p-2">NO. SURAT KONTROL</th>
+              <th class="p-2">TGL RENCANA KONTROL</th>
+              <th class="p-2">NO. SEP</th>
               <th class="p-2">NAMA PASIEN</th>
+              <th class="p-2">NO. KARTU BPJS</th>
+              <th class="p-2">KLINIK</th>
+              <th class="p-2">DOKTER</th>
             </tr>
           </thead>
           <tbody class="font-normal">
-            <tr v-for="p in filteredPatients" :key="p.ktp" class="border-t hover:bg-gray-50">
+            <tr v-for="p in filteredLetters" :key="p.noSurat" class="border-t hover:bg-gray-50">
               <td class="p-2">
                 <RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
-                  <RadioGroupItem :id="p.ktp" :value="p.ktp" />
+                  <RadioGroupItem :id="p.noSurat" :value="p.noSurat" />
                 </RadioGroup>
               </td>
-              <td class="p-2">{{ p.ktp }}</td>
-              <td class="p-2">{{ p.rm }}</td>
-              <td class="p-2">{{ p.bpjs }}</td>
-              <td class="p-2">
-                {{ p.nama }}
-              </td>
+              <td class="p-2">{{ p.noSurat }}</td>
+              <td class="p-2">{{ p.tglRencana }}</td>
+              <td class="p-2">{{ p.noSep }}</td>
+              <td class="p-2">{{ p.namaPasien }}</td>
+              <td class="p-2">{{ p.noBpjs }}</td>
+              <td class="p-2">{{ p.klinik }}</td>
+              <td class="p-2">{{ p.dokter }}</td>
             </tr>
           </tbody>
         </table>

app/components/app/sep/search-patient.vue

@@ -30,15 +30,16 @@ const emit = defineEmits<{
 }>()
 
 const search = ref('')
-const filteredPatients = computed(() =>
-  props.patients.filter(
+const filteredPatients = computed(() => {
+  const patients = props.patients || []
+  return patients.filter(
     (p) =>
       p.ktp.includes(search.value) ||
       p.rm.includes(search.value) ||
       p.bpjs.includes(search.value) ||
       p.nama.toLowerCase().includes(search.value.toLowerCase()),
-  ),
-)
+  )
+})
 
 function saveSelection() {
   emit('save')
@@ -83,9 +84,7 @@ function saveSelection() {
               <td class="p-2">{{ p.ktp }}</td>
               <td class="p-2">{{ p.rm }}</td>
               <td class="p-2">{{ p.bpjs }}</td>
-              <td class="p-2">
-                {{ p.nama }}
-              </td>
+              <td class="p-2">{{ p.nama }}</td>
             </tr>
           </tbody>
         </table>