From 197e79bd0c85cc3c981816f89f5db8812dfb29b3 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 24 Oct 2025 14:27:57 +0700
Subject: [PATCH] feat(sep): add selected prop to ListPatient and enhance radio
 selection handling in select-radio component

---
 app/components/app/sep/list-patient.vue |  2 ++
 app/components/app/sep/select-radio.vue | 26 ++++++++++------
 app/components/app/sep/view-patient.vue | 40 +++++++++++++++++++++++--
 app/components/content/sep/entry.vue    |  2 +-
 4 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/app/components/app/sep/list-patient.vue b/app/components/app/sep/list-patient.vue
index f61011b6..2b9902f2 100644
--- a/app/components/app/sep/list-patient.vue
+++ b/app/components/app/sep/list-patient.vue
@@ -11,6 +11,7 @@ import { config } from './list-cfg.patient'
 
 const props = defineProps<{
   data: PatientData[]
+  selected?: string
   paginationMeta?: PaginationMeta
 }>()
 
@@ -27,6 +28,7 @@ function handlePageChange(page: number) {
   <PubMyUiDataTable
     v-bind="config"
     :rows="props.data"
+    :selected="props.selected"
   />
   <PaginationView
     v-if="paginationMeta"
diff --git a/app/components/app/sep/select-radio.vue b/app/components/app/sep/select-radio.vue
index 5ad99631..9163c9d3 100644
--- a/app/components/app/sep/select-radio.vue
+++ b/app/components/app/sep/select-radio.vue
@@ -1,26 +1,34 @@
 <script setup lang="ts">
+import { computed, inject, type Ref } from 'vue'
 // Components
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 
 const props = defineProps<{
   rec: { id: string; name: string; menu: string }
+  selected?: string
+}>()
+
+const emit = defineEmits<{
+  // No emits needed - using provide/inject
 }>()
 
 const record = props.rec || {}
-const recId = inject<Ref<number>>('rec_select_id')!
-const recMenu = inject<Ref<string>>('rec_select_menu')!
-const selected = ref<string>('')
+const recId = inject('rec_select_id') as Ref<number>
+const recMenu = inject('rec_select_menu') as Ref<string>
+const selected = computed(() => recId.value === Number(record.id) ? record.id : '')
+
+function handleSelection(value: string) {
+  if (value === record.id) {
+    recId.value = Number(record.id) || 0
+    recMenu.value = record.menu || ''
+  }
+}
 </script>
 
 <template>
   <RadioGroup
     :model-value="selected"
-    @update:model-value="
-      () => {
-        recId = Number(record.id) || 0
-        recMenu = record.menu || ''
-      }
-    "
+    @update:model-value="handleSelection"
   >
     <RadioGroupItem
       :id="record.id"
diff --git a/app/components/app/sep/view-patient.vue b/app/components/app/sep/view-patient.vue
index 6a729008..d2df3251 100644
--- a/app/components/app/sep/view-patient.vue
+++ b/app/components/app/sep/view-patient.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, provide, watch, computed } from 'vue'
 
 // Components
 import {
@@ -38,17 +38,46 @@ const emit = defineEmits<{
 const search = ref('')
 const debouncedSearch = refDebounced(search, 500) // 500ms debounce
 
+// Provide for radio selection - use selected prop directly
+const recSelectId = ref<number>(Number(props.selected) || 0)
+const recSelectMenu = ref<string>('patient')
+
+provide('rec_select_id', recSelectId)
+provide('rec_select_menu', recSelectMenu)
+
 function saveSelection() {
+  // Validate that a patient is selected
+  if (!props.selected || props.selected === '') {
+    console.warn('No patient selected')
+    return
+  }
   emit('save')
   emit('update:open', false)
 }
 
+function handlePageChange(page: number) {
+  emit('fetch', { 'page-number': page })
+}
+
+// Watch for changes in recSelectId and emit update:selected
+watch(recSelectId, (newValue) => {
+  if (newValue > 0) {
+    emit('update:selected', String(newValue))
+  }
+})
+
+// Watch for changes in selected prop
+watch(() => props.selected, (newValue) => {
+  recSelectId.value = Number(newValue) || 0
+})
+
 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>
@@ -63,7 +92,7 @@ watch(debouncedSearch, (newValue) => {
       </DialogHeader>
 
       <!-- Input Search -->
-      <div class="mb-2 max-w-[50%]">
+      <div class="max-w-[50%]">
         <Input
           v-model="search"
           placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu"
@@ -71,7 +100,12 @@ watch(debouncedSearch, (newValue) => {
       </div>
 
       <div class="overflow-x-auto rounded-lg border">
-        <ListPatient :data="patients" :pagination-meta="paginationMeta" />
+        <ListPatient 
+          :data="patients" 
+          :selected="props.selected"
+          :pagination-meta="paginationMeta" 
+          @page-change="handlePageChange"
+        />
       </div>
 
       <!-- Footer -->
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index 20c3da8c..940e1cc7 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -227,7 +227,7 @@ const letters = [
   },
 ]
 
-function handleSavePatient() {
+function handleSavePatient() {  
   selectedPatientObject.value = null
   setTimeout(() => {
     getPatientCurrent(selectedPatient.value)