fix(sep): integrate search + pagination on patient

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

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+
+// Helpers
+import { refDebounced } from '@vueuse/core'
+
+// Components
 import {
   Dialog,
   DialogContent,
@@ -11,44 +16,60 @@ import {
 import { Button } from '~/components/pub/ui/button'
 import { Input } from '~/components/pub/ui/input'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 const props = defineProps<{
   open: boolean
   patients: Array<{
-    ktp: string
-    rm: string
+    identity: string
+    number: string
     bpjs: string
-    nama: string
+    name: string
   }>
   selected: string
+  paginationMeta: PaginationMeta
 }>()
 
 const emit = defineEmits<{
   (e: 'update:open', value: boolean): void
   (e: 'update:selected', value: string): void
+  (e: 'fetch', value: any): void
   (e: 'save'): void
 }>()
 
 const search = ref('')
+const debouncedSearch = refDebounced(search, 500) // 500ms debounce
+
 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()),
-  )
+  return patients
 })
 
 function saveSelection() {
   emit('save')
   emit('update:open', false)
 }
+
+function handlePageChange(page: number) {
+  emit('fetch', { page })
+}
+
+watch(debouncedSearch, (newValue) => {
+  // Only search if 3+ characters or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= 3) {
+    emit('fetch', { search: newValue })
+  }
+})
 </script>
 
 <template>
-  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
+  <Dialog
+    :open="props.open"
+    @update:open="emit('update:open', $event)"
+  >
     <DialogTrigger as-child></DialogTrigger>
     <DialogContent class="max-w-3xl">
       <DialogHeader>
@@ -57,7 +78,10 @@ function saveSelection() {
 
       <!-- 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. KTP / No. RM / Nomor Kartu"
+        />
       </div>
 
       <!-- Table -->
@@ -73,25 +97,46 @@ function saveSelection() {
             </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 filteredPatients"
+              :key="p.identity"
+              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" />
+                <RadioGroup
+                  :model-value="props.selected"
+                  @update:model-value="emit('update:selected', $event)"
+                >
+                  <RadioGroupItem
+                    :id="p.identity"
+                    :value="p.identity"
+                  />
                 </RadioGroup>
               </td>
-              <td class="p-2">{{ p.ktp }}</td>
-              <td class="p-2">{{ p.rm }}</td>
+              <td class="p-2">{{ p.identity }}</td>
+              <td class="p-2">{{ p.number }}</td>
               <td class="p-2">{{ p.bpjs }}</td>
-              <td class="p-2">{{ p.nama }}</td>
+              <td class="p-2">{{ p.name }}</td>
             </tr>
           </tbody>
         </table>
+        <PaginationView
+          :pagination-meta="paginationMeta"
+          @page-change="handlePageChange"
+        />
       </div>
 
       <!-- Footer -->
       <DialogFooter>
-        <Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
-          <Icon name="i-lucide-save" class="h-5 w-5" />
+        <Button
+          variant="default"
+          class="h-[40px] min-w-[120px] text-white"
+          @click="saveSelection"
+        >
+          <Icon
+            name="i-lucide-save"
+            class="h-5 w-5"
+          />
           Simpan
         </Button>
       </DialogFooter>