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<{
+  letters: Array<{
-    ktp: string
+    noSurat: string
-    rm: string
+    tglRencana: string
-    bpjs: string
+    noSep: string
-    nama: 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(
+const filteredLetters = computed(() => {
-    (p) =>
+  const letters = props.letters || []
-      p.ktp.includes(search.value) ||
+  return letters.filter((p) => p.noSurat.includes(search.value) || p.noSep.includes(search.value))
-      p.rm.includes(search.value) ||
+})
-      p.bpjs.includes(search.value) ||
-      p.nama.toLowerCase().includes(search.value.toLowerCase()),
-  ),
-)
 
 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. SURAT KONTROL</th>
-              <th class="p-2">NO. RM</th>
+              <th class="p-2">TGL RENCANA KONTROL</th>
-              <th class="p-2">NO. KARTU BPJS</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.noSurat }}</td>
-              <td class="p-2">{{ p.rm }}</td>
+              <td class="p-2">{{ p.tglRencana }}</td>
-              <td class="p-2">{{ p.bpjs }}</td>
+              <td class="p-2">{{ p.noSep }}</td>
-              <td class="p-2">
+              <td class="p-2">{{ p.namaPasien }}</td>
-                {{ p.nama }}
+              <td class="p-2">{{ p.noBpjs }}</td>
-              </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(() =>
+const filteredPatients = computed(() => {
-  props.patients.filter(
+  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">
+              <td class="p-2">{{ p.nama }}</td>
-                {{ p.nama }}
-              </td>
             </tr>
           </tbody>
         </table>

app/components/content/sep/entry.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-const isLoading = ref(false)
+const openPatient = ref(false)
-const open = ref(false)
+const openLetter = ref(false)
-const selected = ref('3456512345678880')
+const selectedPatient = ref('3456512345678880')
+const selectedLetter = ref('SK22334442')
 
 const patients = [
   {
@@ -20,35 +21,43 @@ const patients = [
 
 const letters = [
   {
-    noSurat: "SK22334442",
+    noSurat: 'SK22334442',
-    tglRencana: "12 Agustus 2025",
+    tglRencana: '12 Agustus 2025',
-    noSep: "SEP3232332",
+    noSep: 'SEP3232332',
-    namaPasien: "Ahmad Baidowi",
+    namaPasien: 'Ahmad Baidowi',
-    noBpjs: "33442331214",
+    noBpjs: '33442331214',
-    klinik: "Penyakit Dalam",
+    klinik: 'Penyakit Dalam',
-    dokter: "dr. Andi Prasetyo, Sp.PD-KHOM",
+    dokter: 'dr. Andi Prasetyo, Sp.PD-KHOM',
   },
   {
-    noSurat: "SK99120039",
+    noSurat: 'SK99120039',
-    tglRencana: "12 Agustus 2025",
+    tglRencana: '12 Agustus 2025',
-    noSep: "SEP4443232",
+    noSep: 'SEP4443232',
-    namaPasien: "Bian Maulana",
+    namaPasien: 'Bian Maulana',
-    noBpjs: "33442367656",
+    noBpjs: '33442367656',
-    klinik: "Gigi",
+    klinik: 'Gigi',
-    dokter: "dr. Achmad Suparjo",
+    dokter: 'dr. Achmad Suparjo',
   },
 ]
 
+function handleSavePatient() {
+  console.log('Pasien dipilih:', selectedPatient.value)
+}
 
-function handleSave() {
+function handleSaveLetter() {
-  console.log('Pasien dipilih:', selected.value)
+  console.log('Letter dipilih:', selectedLetter.value)
 }
 
 function handleEvent(value: string) {
   if (value === 'search-patient') {
-    open.value = true
+    openPatient.value = true
     return
-  } else if (value === 'back') {
+  }
+  if (value === 'search-letter') {
+    openLetter.value = true
+    return
+  }
+  if (value === 'back') {
     navigateTo('/bpjs/sep')
   }
 }
@@ -60,5 +69,16 @@ function handleEvent(value: string) {
     <span class="font-semibold">Tambah</span> SEP
   </div>
   <AppSepEntryForm @event="handleEvent" />
-  <AppSepSearchPatient v-model:open="open" v-model:selected="selected" :patients="patients" @save="handleSave" />
+  <AppSepSearchPatient
+    v-model:open="openPatient"
+    v-model:selected="selectedPatient"
+    :patients="patients"
+    @save="handleSavePatient"
+  />
+  <AppSepSearchLetter
+    v-model:open="openLetter"
+    v-model:selected="selectedLetter"
+    :letters="letters"
+    @save="handleSaveLetter"
+  />
 </template>