From bbb0ac03d4b699c95c2700182842aa12b769b1ec Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 11 Sep 2025 13:26:32 +0700
Subject: [PATCH] feat(sep): create filter patient + sep

---
 app/components/app/sep/entry-form.vue     |   6 +-
 app/components/app/sep/search-letter.vue  | 103 ++++++++++++++++++++++
 app/components/app/sep/search-patient.vue | 103 ++++++++++++++++++++++
 app/components/content/sep/entry.vue      |  56 ++++++++++--
 4 files changed, 261 insertions(+), 7 deletions(-)
 create mode 100644 app/components/app/sep/search-letter.vue
 create mode 100644 app/components/app/sep/search-patient.vue

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 76880554..04ed4a30 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -12,6 +12,10 @@ import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 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
+}>()
+
 const items = [
   { value: 'item-1', label: 'Item 1' },
   { value: 'item-2', label: 'Item 2' },
@@ -88,7 +92,7 @@ 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">
+        <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>
diff --git a/app/components/app/sep/search-letter.vue b/app/components/app/sep/search-letter.vue
new file mode 100644
index 00000000..fb240ee0
--- /dev/null
+++ b/app/components/app/sep/search-letter.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+
+const props = defineProps<{
+  open: boolean
+  patients: Array<{
+    ktp: string
+    rm: string
+    bpjs: string
+    nama: string
+  }>
+  selected: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:selected', value: string): void
+  (e: 'save'): void
+}>()
+
+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()),
+  ),
+)
+
+function saveSelection() {
+  emit('save')
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
+    <DialogTrigger as-child>
+      <Button>Cari Pasien</Button>
+    </DialogTrigger>
+    <DialogContent class="max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>Cari Pasien</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="mb-2 max-w-[50%]">
+        <Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
+      </div>
+
+      <!-- Table -->
+      <div class="overflow-x-auto rounded-lg border">
+        <table class="w-full text-sm">
+          <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">NAMA PASIEN</th>
+            </tr>
+          </thead>
+          <tbody class="font-normal">
+            <tr v-for="p in filteredPatients" :key="p.ktp" 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>
+              </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>
+            </tr>
+          </tbody>
+        </table>
+      </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" />
+          Simpan
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/app/sep/search-patient.vue b/app/components/app/sep/search-patient.vue
new file mode 100644
index 00000000..fb240ee0
--- /dev/null
+++ b/app/components/app/sep/search-patient.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+
+const props = defineProps<{
+  open: boolean
+  patients: Array<{
+    ktp: string
+    rm: string
+    bpjs: string
+    nama: string
+  }>
+  selected: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:selected', value: string): void
+  (e: 'save'): void
+}>()
+
+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()),
+  ),
+)
+
+function saveSelection() {
+  emit('save')
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
+    <DialogTrigger as-child>
+      <Button>Cari Pasien</Button>
+    </DialogTrigger>
+    <DialogContent class="max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>Cari Pasien</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="mb-2 max-w-[50%]">
+        <Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
+      </div>
+
+      <!-- Table -->
+      <div class="overflow-x-auto rounded-lg border">
+        <table class="w-full text-sm">
+          <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">NAMA PASIEN</th>
+            </tr>
+          </thead>
+          <tbody class="font-normal">
+            <tr v-for="p in filteredPatients" :key="p.ktp" 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>
+              </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>
+            </tr>
+          </tbody>
+        </table>
+      </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" />
+          Simpan
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index e858cc09..0e8eb18c 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -1,13 +1,56 @@
 <script setup lang="ts">
-
 const isLoading = ref(false)
+const open = ref(false)
+const selected = ref('3456512345678880')
 
-function onBack() {
-  navigateTo('/bpjs/sep')
+const patients = [
+  {
+    ktp: '3456512345678880',
+    rm: 'RM23311224',
+    bpjs: '334423213214',
+    nama: 'Ahmad Baidowi',
+  },
+  {
+    ktp: '345678804565123',
+    rm: 'RM23455667',
+    bpjs: '33442367656',
+    nama: 'Bian Maulana',
+  },
+]
+
+const letters = [
+  {
+    noSurat: "SK22334442",
+    tglRencana: "12 Agustus 2025",
+    noSep: "SEP3232332",
+    namaPasien: "Ahmad Baidowi",
+    noBpjs: "33442331214",
+    klinik: "Penyakit Dalam",
+    dokter: "dr. Andi Prasetyo, Sp.PD-KHOM",
+  },
+  {
+    noSurat: "SK99120039",
+    tglRencana: "12 Agustus 2025",
+    noSep: "SEP4443232",
+    namaPasien: "Bian Maulana",
+    noBpjs: "33442367656",
+    klinik: "Gigi",
+    dokter: "dr. Achmad Suparjo",
+  },
+]
+
+
+function handleSave() {
+  console.log('Pasien dipilih:', selected.value)
 }
 
-async function onSubmit(data: any) {
-  console.log(data)
+function handleEvent(value: string) {
+  if (value === 'search-patient') {
+    open.value = true
+    return
+  } else if (value === 'back') {
+    navigateTo('/bpjs/sep')
+  }
 }
 </script>
 
@@ -16,5 +59,6 @@ async function onSubmit(data: any) {
     <Icon name="i-lucide-panel-bottom" class="me-2" />
     <span class="font-semibold">Tambah</span> SEP
   </div>
-  <AppSepEntryForm />
+  <AppSepEntryForm @event="handleEvent" />
+  <AppSepSearchPatient v-model:open="open" v-model:selected="selected" :patients="patients" @save="handleSave" />
 </template>