Merge branch 'dev' into feat/ap-lab-order-52

app/components/app/antibiotic-in-use/list.cfg.ts

@@ -0,0 +1,28 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }]],
+
+  keys: ['code', 'name'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+  },
+
+  components: {
+  },
+
+  htmls: {
+  },
+}

app/components/app/antibiotic-in-use/list.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+// Pub components
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
+// Configs
+import { config } from './list.cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <div class="space-y-4">
+    <DataTable v-bind="config" :rows="data" />
+  </div>
+</template>

app/components/app/control-letter/_common/select-unit.vue

@@ -33,7 +33,7 @@ const {
 const units = ref<Array<Item>>([])
 
 async function fetchData() {
-  units.value = await getUnitLabelList({}, true)
+  units.value = await getUnitLabelList({})
 }
 
 const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!

app/components/app/encounter/check-in-entry.vue

@@ -10,12 +10,13 @@ import ComboBox from '~/components/pub/my-ui/combobox/combobox.vue'
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import type { CheckInFormData } from '~/schemas/encounter.schema'
 import type { Encounter } from '~/models/encounter'
+import { now } from '@internationalized/date';
 
 interface Props {
   schema: z.ZodSchema<any>
   values: any
   doctors: { value: string; label: string }[]
-  employees: { value: string; label: string }[]
+  // employees: { value: string; label: string }[]
   encounter: Encounter
   isLoading?: boolean
   isReadonly?: boolean
@@ -36,18 +37,23 @@ const { defineField, errors, meta } = useForm({
   } as Partial<CheckInFormData>,
 })
 
-const [responsible_doctor_id, responsible_doctor_idAttrs] = defineField('responsible_doctor_id')
+const [responsible_doctor_code, responsible_doctor_codeAttrs] = defineField('responsible_doctor_code')
-const [adm_employee_id, adm_employee_idAttrs] = defineField('discharge_method_code')
+// const [adm_employee_id, adm_employee_idAttrs] = defineField('discharge_method_code')
 const [registeredAt, registeredAtAttrs] = defineField('registeredAt')
 
 function submitForm() {
   const formData: CheckInFormData = {
-    responsible_doctor_id: responsible_doctor_id.value,
+    responsible_doctor_code: responsible_doctor_code.value,
-    adm_employee_id: adm_employee_id.value,
+    // adm_employee_id: adm_employee_id.value,
-    // registeredAt: registeredAt.value || '',
+    registeredAt: registeredAt.value || '',
   }
   emit('submit', formData)
 }
+
+function setTime() {
+  const today = new Date()
+  registeredAt.value = today.toISOString().substring(0, 10) + ' ' + today.toLocaleTimeString('id-ID').substring(0, 5).replace('.', ':');
+}
 </script>
 
 <template>
@@ -57,8 +63,8 @@ function submitForm() {
       <DE.Field>
         <ComboBox
           id="doctor"
-          v-model="responsible_doctor_id"
+          v-model="responsible_doctor_code"
-          v-bind="responsible_doctor_idAttrs"
+          v-bind="responsible_doctor_codeAttrs"
           :items="doctors"
           :disabled="isLoading || isReadonly"
           placeholder="Pilih Dokter DPJP"
@@ -67,7 +73,7 @@ function submitForm() {
         />
       </DE.Field>
     </DE.Cell>
-    <DE.Cell>
+    <!-- <DE.Cell>
       <DE.Label>PJ Berkas</DE.Label>
       <DE.Field>
         <ComboBox
@@ -81,7 +87,7 @@ function submitForm() {
           empty-message="Petugas tidak ditemukan"
         />
       </DE.Field>
-    </DE.Cell>
+    </DE.Cell> -->
     <DE.Cell>
       <DE.Label>Waktu Masuk</DE.Label>
       <DE.Field>
@@ -89,7 +95,8 @@ function submitForm() {
             id="name"
             v-model="registeredAt"
             v-bind="registeredAtAttrs"
-            :disabled="isLoading || isReadonly"
+            @click="setTime"
+            readonly
           />
       </DE.Field>
     </DE.Cell>
@@ -104,4 +111,4 @@ function submitForm() {
 
 <style>
 
-</style>
+</style>

app/components/app/encounter/check-in-view.vue

@@ -7,43 +7,48 @@ import type { Encounter } from '~/models/encounter'
 
 interface Props {
   encounter: Encounter
+  canUpdate?: boolean
+  isLoading?: boolean
 }
 const props = defineProps<Props>()
-const doctor = ref('-belum dipilih-')
+const doctor = computed(() => {
+  return props.encounter.responsible_doctor?.employee?.person?.name ?? '-belum dipilih-'
+})
 const adm = ref('-belum dipilih-')
 
 const emit = defineEmits<{
   edit: []
 }>()
-
-watch(props.encounter, () => {
-  doctor.value = props.encounter.responsible_doctor?.employee?.person?.name ?? props.encounter.appointment_doctor?.employee?.person?.name ?? '-belum dipilih-'
-  adm.value = props.encounter.adm_employee?.person?.name ?? '-belum dipilih-'
-})
 </script>
 
 <template>
   <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Label class="font-semibold">Waktu Masuk</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter?.registeredAt?.substring(0, 15).replace('T', ' ') || '-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label class="font-semibold">PJ Berkas</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.adm_employee?.person?.name || '-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label class="font-semibold">Perawat</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.responsible_nurse?.employee?.person?.name || '-' }}</div>
+      </DE.Field>
+    </DE.Cell>
     <DE.Cell>
       <DE.Label class="font-semibold">Dokter</DE.Label>
       <DE.Field>
         <div class="py-2 border-b border-b-slate-300">{{ doctor }}</div>
       </DE.Field>
     </DE.Cell>
-    <DE.Cell>
-      <DE.Label class="font-semibold">PJ Berkas</DE.Label>
-      <DE.Field>
-        <div class="py-2 border-b border-b-slate-300">{{ adm }}</div>
-      </DE.Field>
-    </DE.Cell>
-    <DE.Cell>
-      <DE.Label class="font-semibold">Waktu Masuk</DE.Label>
-      <DE.Field>
-        <div class="py-2 border-b border-b-slate-300">{{ encounter?.registeredAt || '-' }}</div>
-      </DE.Field>
-    </DE.Cell>
   </DE.Block>
-  <div class="text-center">
+  <div v-if="canUpdate" class="text-center">
     <Button @click="() => emit('edit')">
       <LucidePen />
       Edit
@@ -53,4 +58,4 @@ watch(props.encounter, () => {
 
 <style>
 
-</style>
+</style>

app/components/app/encounter/check-out-view.vue

@@ -12,8 +12,7 @@ import type { Encounter } from '~/models/encounter';
 
 interface Props {
   encounter: Encounter
-  isLoading?: boolean
+  canUpdate?: boolean
-  isReadonly?: boolean
 }
 const props = defineProps<Props>()
 
@@ -73,7 +72,7 @@ const emit = defineEmits<{
       </DE.Field>
     </DE.Cell>
   </DE.Block>
-  <div class="text-center [&>*]:mx-1">
+  <div v-if="canUpdate" class="text-center [&>*]:mx-1">
     <Button @click="() => emit('edit')">
       <LucidePen />
       Edit
@@ -87,4 +86,4 @@ const emit = defineEmits<{
 
 <style>
 
-</style>
+</style>

app/components/app/encounter/dropdown-action.vue

@@ -13,32 +13,39 @@ const activeServicePosition = inject<Ref<string>>('activeServicePosition')! // p
 
 const activeKey = ref<string | null>(null)
 const linkItemsFiltered = ref<LinkItem[]>([])
+
 const baseLinkItems: LinkItem[] = [
   {
     label: 'Detail',
     value: 'detail',
+    groups: ['medical', 'registration'],
     onClick: () => {
       proceedItem(ActionEvents.showDetail)
     },
     icon: 'i-lucide-eye',
   },
-]
+  {
-
+    label: 'Edit',
-const medicalLinkItems: LinkItem[] = [
+    value: 'edit',
+    groups: ['registration'],
+    onClick: () => {
+      proceedItem(ActionEvents.showEdit)
+    },
+    icon: 'i-lucide-pencil',
+  },
   {
     label: 'Process',
     value: 'process',
+    groups: ['medical'],
     onClick: () => {
       proceedItem(ActionEvents.showProcess)
     },
     icon: 'i-lucide-shuffle',
   },
-]
-
-const regLinkItems: LinkItem[] = [
   {
     label: 'Print',
     value: 'print',
+    groups: ['registration'],
     onClick: () => {
       proceedItem(ActionEvents.showPrint)
     },
@@ -47,6 +54,7 @@ const regLinkItems: LinkItem[] = [
   {
     label: 'Batalkan',
     value: 'cancel',
+    groups: ['registration'],
     onClick: () => {
       proceedItem(ActionEvents.showCancel)
     },
@@ -55,6 +63,7 @@ const regLinkItems: LinkItem[] = [
   {
     label: 'Hapus',
     value: 'remove',
+    groups: ['registration'],
     onClick: () => {
       proceedItem(ActionEvents.showConfirmDelete)
     },
@@ -62,7 +71,7 @@ const regLinkItems: LinkItem[] = [
   },
 ]
 
-const voidLinkItems: LinkItem[] = [
+const noneLinkItems: LinkItem[] = [
    {
     label: 'Nothing',
     value: 'nothing',
@@ -72,12 +81,6 @@ const voidLinkItems: LinkItem[] = [
 
 linkItemsFiltered.value = [...baseLinkItems]
 
-getLinks()
-
-watch(activeServicePosition, () => {
-  getLinks()
-})
-
 function proceedItem(action: string) {
   recId.value = props.rec.id || 0
   recItem.value = props.rec
@@ -87,18 +90,24 @@ function proceedItem(action: string) {
 function getLinks() {
   switch (activeServicePosition.value) {
     case 'medical':
-      linkItemsFiltered.value = [...baseLinkItems, ...medicalLinkItems]
+      linkItemsFiltered.value = baseLinkItems.filter((item) => item.groups?.includes('medical'))
       break
     case 'registration':
-      linkItemsFiltered.value = [...baseLinkItems, ...regLinkItems]
+      linkItemsFiltered.value = baseLinkItems.filter((item) => item.groups?.includes('registration'))
-    case 'unit|resp':
-      linkItemsFiltered.value = [...baseLinkItems]
       break
     default:
-      linkItemsFiltered.value = voidLinkItems
+      linkItemsFiltered.value = noneLinkItems
       break
   }
 }
+
+watch(activeServicePosition, () => {
+  getLinks()
+})
+
+onMounted(() => {
+  getLinks()
+})
 </script>
 
 <template>

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

@@ -23,22 +23,25 @@ import { paymentMethodCodes } from '~/const/key-val/common'
 
 // App things
 import { genEncounter, type Encounter } from '~/models/encounter'
+import { se } from 'date-fns/locale'
 
 // Props
 const props = defineProps<{
+  mode?: string
   isLoading?: boolean
   isReadonly?: boolean
   isSepValid?: boolean
+  isMemberValid?: boolean
   isCheckingSep?: boolean
   doctorItems?: CB.Item[]
   selectedDoctor: Doctor
   // subSpecialist?: any[]
   // specialists?: TreeItem[]
-  // paymentMethods: PaymentMethodCode[]
+  payments?: any[]
   participantGroups?: any[]
   seps: any[]
   patient?: PatientEntity | null | undefined
-  // objects?: any
+  objects?: any
 }>()
 
 // Model
@@ -46,7 +49,7 @@ const model = defineModel<Encounter>()
 model.value = genEncounter()
 
 // Common preparation
-const defaultCBItems = [{ label: 'Pilih', value: '' }];
+const defaultCBItems = [{ label: 'Pilih', value: '' }]
 const paymentMethodItems = CB.recStrToItem(paymentMethodCodes)
 
 // Emit preparation
@@ -73,86 +76,75 @@ const [sepNumber, sepNumberAttrs] = defineField('sepNumber')
 const [patientName, patientNameAttrs] = defineField('patientName')
 const [nationalIdentity, nationalIdentityAttrs] = defineField('nationalIdentity')
 const [medicalRecordNumber, medicalRecordNumberAttrs] = defineField('medicalRecordNumber')
+const [sepFile, sepFileAttrs] = defineField('sepFile')
+const [sippFile, sippFileAttrs] = defineField('sippFile')
 const patientId = ref('')
+const sepReference = ref('')
+const sepControlDate = ref('')
+const sepTrafficStatus = ref('')
+const diagnosis = ref('')
+const noteReference = ref('Hanya diperlukan jika pembayaran jenis JKN')
+const noteFile = ref('Gunakan file [.pdf, .jpg, .png] dengan ukuran maksimal 1MB')
 
 const isLoading = props.isLoading !== undefined ? props.isLoading : false
 const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
-
+const mode = props.mode !== undefined ? props.mode : 'add'
 // SEP validation state from props
 const isSepValid = computed(() => props.isSepValid || false)
 const isCheckingSep = computed(() => props.isCheckingSep || false)
+const isInsurancePayment = computed(() => ['insurance', 'jkn'].includes(paymentMethodCode.value))
+const isDateLoading = ref(false)
+const debouncedSepNumber = refDebounced(sepNumber, 500)
+const debouncedCardNumber = refDebounced(cardNumber, 500)
+const sepFileReview = ref<any>(null)
+const sippFileReview = ref<any>(null)
+const unitFullName = ref('') // Unit, specialist, subspecialist
+const formRef = ref<HTMLFormElement | null>(null) // Expose submit method for parent component
 
-// Unit, specialist, subspecialist
+if (mode === 'add') {
-const unitFullName = ref('')
+  // Set default sepDate to current date in YYYY-MM-DD format
-watch(() => props.selectedDoctor, (doctor) => {
+  const today = new Date()
-    unitFullName.value = doctor.subspecialist?.name ??
+  const year = today.getFullYear()
-      doctor.specialist?.name ??
+  const month = String(today.getMonth() + 1).padStart(2, '0')
-      doctor.unit?.name ??
+  const day = String(today.getDate()).padStart(2, '0')
-      'tidak diketahui'
+  registerDate.value = `${year}-${month}-${day}`
+}
+
+watch(
+  () => props.selectedDoctor,
+  (doctor) => {
+    unitFullName.value = doctor.subspecialist?.name ?? doctor.specialist?.name ?? doctor.unit?.name ?? 'tidak diketahui'
     model.value!.unit_code = doctor.unit_code || ''
     model.value!.specialist_code = doctor.specialist_code || ''
     model.value!.subspecialist_code = doctor.subspecialist_code || ''
   },
 )
-// const doctorOpts = computed(() => {
-//   const defaultOption = [{ label: 'Pilih', value: '' }]
-//   const doctors = props.doctors || []
-//   return [...defaultOption, ...doctors]
-// })
-// watch(doctorCode, (newValue) => {
-//   // doctor.value = props.doctors?.find(doc => doc.code === newValue)
-//   unitFullName.value = doctor.value?.subspecialist?.name ??
-//     doctor.value?.specialist?.name ??
-//     doctor.value?.unit?.name ??
-//     'tidak diketahui'
-//   model.value!.responsible_doctor_code = doctor.value?.code
-//   // const unitName = selectedDoctor?.specialist?.name || ''
-//   // emit('event', 'unit-changed', unitName)
-// })
-
-const isJKNPayment = computed(() => paymentMethodCode.value === 'jkn')
-
-// async function onFetchChildren(parentId: string): Promise<void> {
-//   console.log('onFetchChildren', parentId)
-// }
-
-// Watch specialist/subspecialist selection to fetch doctors
-// watch(subSpecialistCode, async (newValue) => {
-//   if (newValue) {
-//     console.log('SubSpecialist changed:', newValue)
-//     // Reset doctor selection
-//     doctorCode.value = ''
-//     // Emit fetch event to parent
-//     emit('fetch', { subSpecialistCode: newValue })
-//   }
-// })
-
-// Debounced SEP number watcher: emit change only after user stops typing
-const debouncedSepNumber = refDebounced(sepNumber, 500)
-watch(debouncedSepNumber, (newValue) => {
-  emit('event', 'sep-number-changed', newValue)
-})
 
 // Sync props to form fields
-// watch(
+watch(
-//   () => props.objects,
+  () => props.objects,
-//   (objects) => {
+  (objects) => {
-//     if (objects && Object.keys(objects).length > 0) {
+    if (objects && Object.keys(objects).length > 0) {
-//       patientName.value = objects?.patientName || ''
+      patientName.value = objects?.patientName || ''
-//       nationalIdentity.value = objects?.nationalIdentity || ''
+      nationalIdentity.value = objects?.nationalIdentity || ''
-//       medicalRecordNumber.value = objects?.medicalRecordNumber || ''
+      medicalRecordNumber.value = objects?.medicalRecordNumber || ''
-//       doctorCode.value = objects?.doctorCode || ''
+      doctorCode.value = objects?.doctorCode || ''
-//       subSpecialistCode.value = objects?.subSpecialistCode || ''
+      paymentMethodCode.value = objects?.paymentMethodCode || ''
-//       registerDate.value = objects?.registerDate || ''
+      patientCategory.value = objects?.patientCategory || ''
-//       paymentMethodCode.value = objects?.paymentMethodCode || ''
+      cardNumber.value = objects?.cardNumber || ''
-//       patientCategory.value = objects?.patientCategory || ''
+      sepType.value = objects?.sepType || ''
-//       cardNumber.value = objects?.cardNumber || ''
+      sepNumber.value = objects?.sepNumber || ''
-//       sepType.value = objects?.sepType || ''
+      sepFileReview.value = objects?.sepFileReview || ''
-//       sepNumber.value = objects?.sepNumber || ''
+      sippFileReview.value = objects?.sippFileReview || ''
-//     }
+      isDateLoading.value = true
-//   },
+      setTimeout(() => {
-//   { deep: true, immediate: true },
+        registerDate.value = objects?.registerDate || ''
-// )
+        isDateLoading.value = false
+      }, 100)
+    }
+  },
+  { deep: true, immediate: true },
+)
 
 watch(
   () => props.patient,
@@ -167,46 +159,69 @@ watch(
   { deep: true, immediate: true },
 )
 
+watch(
+  () => props.isSepValid,
+  (value) => {
+    if (!value) return
+    const objects = props.objects
+    if (objects && Object.keys(objects).length > 0) {
+      sepReference.value = objects?.sepReference || ''
+      sepControlDate.value = objects?.sepControlDate || ''
+      sepTrafficStatus.value = objects?.sepTrafficStatus || ''
+      diagnosis.value = objects?.diagnosis || ''
+    }
+  },
+)
+
+watch(debouncedSepNumber, (newValue) => {
+  emit('event', 'sep-number-changed', newValue)
+})
+
+watch(debouncedCardNumber, (newValue) => {
+  emit('event', 'member-changed', newValue)
+})
+
 function onAddSep() {
   const formValues = {
     patientId: patientId.value || '',
     doctorCode: doctorCode.value,
-    // subSpecialistCode: subSpecialistCode.value,
     registerDate: registerDate.value,
     cardNumber: cardNumber.value,
     paymentMethodCode: paymentMethodCode.value,
-    sepType: sepType.value
+    sepFile: sepFile.value,
+    sippFile: sippFile.value,
+    sepType: sepType.value,
   }
   emit('event', 'add-sep', formValues)
 }
 
+function onSearchSep() {
+  emit('event', 'search-sep', { cardNumber: cardNumber.value })
+}
+
 // Submit handler
 const onSubmit = handleSubmit((values) => {
-  console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
+  let payload: any = values
-  emit('event', 'save', values)
+  if (props.mode === 'edit') {
+    payload = {
+      ...payload,
+      sepFileReview: sepFileReview.value,
+      sippFileReview: sippFileReview.value,
+    }
+  }
+  emit('event', 'save', payload)
 })
 
-// Expose submit method for parent component
+function openFile(path: string) {
-const formRef = ref<HTMLFormElement | null>(null)
+  window.open(path, '_blank')
+}
 
 function submitForm() {
-  console.log('🔵 submitForm called, formRef:', formRef.value)
-  console.log('🔵 Form values:', {
-    doctorCode: doctorCode.value,
-    // subSpecialistCode: subSpecialistCode.value,
-    registerDate: registerDate.value,
-    paymentMethodCode: paymentMethodCode.value,
-  })
-  console.log('🔵 Form errors:', errors.value)
-  console.log('🔵 Form meta:', meta.value)
-
   // Trigger form submit using native form submit
   // This will trigger validation and onSubmit handler
   if (formRef.value) {
-    console.log('🔵 Calling formRef.value.requestSubmit()')
     formRef.value.requestSubmit()
   } else {
-    console.warn('⚠️ formRef.value is null, cannot submit form')
     // Fallback: directly call onSubmit handler
     // Create a mock event object
     const mockEvent = {
@@ -215,7 +230,6 @@ function submitForm() {
     } as SubmitEvent
 
     // Call onSubmit directly
-    console.log('🔵 Calling onSubmit with mock event')
     onSubmit(mockEvent)
   }
 }
@@ -345,14 +359,26 @@ defineExpose({
             <span class="text-red-500">*</span>
           </DE.Label>
           <DE.Field :errMessage="errors.unit_code">
-            <Input :value="unitFullName"/>
+            <Input
-            <!-- <TreeSelect
+              :value="unitFullName"
-              id="subSpecialistCode"
+              :disabled="true"
-              v-model="subSpecialistCode"
+            />
-              v-bind="subSpecialistCodeAttrs"
+          </DE.Field>
-              :data="specialists || []"
+        </DE.Cell>
-              :on-fetch-children="onFetchChildren"
+
-            /> -->
+        <DE.Cell>
+          <DE.Label height="compact">
+            Tanggal Daftar
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.registerDate">
+            <DatepickerSingle
+              v-if="!isDateLoading"
+              id="registerDate"
+              v-model="registerDate"
+              v-bind="registerDateAttrs"
+              placeholder="Pilih tanggal"
+            />
           </DE.Field>
         </DE.Cell>
       </DE.Block>
@@ -363,21 +389,6 @@ defineExpose({
         :colCount="3"
         :cellFlex="false"
       >
-        <DE.Cell>
-          <DE.Label height="compact">
-            Tanggal Daftar
-            <span class="text-red-500">*</span>
-          </DE.Label>
-          <DE.Field :errMessage="errors.registerDate">
-            <DatepickerSingle
-              id="registerDate"
-              v-model="registerDate"
-              v-bind="registerDateAttrs"
-              placeholder="Pilih tanggal"
-            />
-          </DE.Field>
-        </DE.Cell>
-
         <DE.Cell>
           <DE.Label height="compact">
             Jenis Pembayaran
@@ -397,7 +408,7 @@ defineExpose({
       </DE.Block>
 
       <!-- BPJS Fields (conditional) -->
-      <template v-if="isJKNPayment">
+      <template v-if="isInsurancePayment">
         <DE.Block
           labelSize="thin"
           class="!pt-0"
@@ -419,6 +430,9 @@ defineExpose({
                 placeholder="Pilih Kelompok Peserta"
               />
             </DE.Field>
+            <span class="text-sm text-gray-500">
+              {{ noteReference }}
+            </span>
           </DE.Cell>
 
           <DE.Cell>
@@ -435,6 +449,26 @@ defineExpose({
                 placeholder="Masukkan nomor kartu BPJS"
               />
             </DE.Field>
+            <div
+              v-if="isMemberValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-badge-check"
+                class="h-4 w-4 bg-green-500 text-white"
+              />
+              <span class="text-sm text-green-500">Aktif</span>
+            </div>
+            <div
+              v-if="!isMemberValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-x"
+                class="h-4 w-4 bg-red-500 text-white"
+              />
+              <span class="text-sm text-red-500">Tidak aktif</span>
+            </div>
           </DE.Cell>
 
           <DE.Cell>
@@ -474,7 +508,7 @@ defineExpose({
                   v-bind="sepNumberAttrs"
                   placeholder="Tambah SEP terlebih dahulu"
                   class="flex-1"
-                  :disabled="isLoading || isReadonly"
+                  :disabled="isLoading || isReadonly || isSepValid"
                 />
                 <Button
                   v-if="!isSepValid"
@@ -490,44 +524,170 @@ defineExpose({
                     name="i-lucide-loader-2"
                     class="h-4 w-4 animate-spin"
                   />
-                   <Icon
+                  <Icon
                     v-else
                     name="i-lucide-plus"
                     class="h-4 w-4"
                   />
                 </Button>
                 <Button
-                  v-else
+                  v-if="isMemberValid"
                   variant="outline"
                   type="button"
-                  class="bg-green-500 text-white hover:bg-green-600"
+                  class="bg-primary"
                   size="sm"
-                  disabled
+                  @click="onSearchSep"
                 >
                   <Icon
-                    name="i-lucide-check"
+                    name="i-lucide-search"
                     class="h-4 w-4"
                   />
                 </Button>
               </div>
             </DE.Field>
+            <div
+              v-if="isSepValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-badge-check"
+                class="h-4 w-4 bg-green-500 text-white"
+              />
+              <span class="text-sm text-green-500">Aktif</span>
+            </div>
+            <span class="text-sm text-gray-500">
+              {{ noteReference }}
+            </span>
           </DE.Cell>
 
-          <FileUpload
+          <DE.Cell>
-            field-name="sepFile"
+            <FileUpload
-            label="Dokumen SEP"
+              field-name="sepFile"
-            placeholder="Unggah dokumen SEP"
+              label="Dokumen SEP"
-            :accept="['pdf', 'jpg', 'png']"
+              placeholder="Pilih file"
-            :max-size-mb="1"
+              :accept="['pdf', 'jpg', 'png']"
-          />
+              :max-size-mb="1"
+              v-model="sepFile"
+              v-bind="sepFileAttrs"
+              @file-selected="() => {}"
+            />
+            <span class="mt-1 text-sm text-gray-500">
+              {{ noteFile }}
+            </span>
+            <p v-if="sepFileReview">
+              <a
+                class="mt-1 text-sm text-blue-500 capitalize"
+                href="#"
+                @click="openFile(sepFileReview.filePath)"
+              >
+                {{ sepFileReview?.fileName }}
+              </a>
+            </p>
+          </DE.Cell>
 
-          <FileUpload
+          <DE.Cell>
-            field-name="sippFile"
+            <FileUpload
-            label="Dokumen SIPP"
+              field-name="sippFile"
-            placeholder="Unggah dokumen SIPP"
+              label="Dokumen SIPP"
-            :accept="['pdf', 'jpg', 'png']"
+              placeholder="Pilih file"
-            :max-size-mb="1"
+              :accept="['pdf', 'jpg', 'png']"
-          />
+              :max-size-mb="1"
+              v-model="sippFile"
+              v-bind="sippFileAttrs"
+              @file-selected="() => {}"
+            />
+            <span class="mt-1 text-sm text-gray-500">
+              {{ noteFile }}
+            </span>
+            <p v-if="sippFileReview">
+              <a
+                class="mt-1 text-sm text-blue-500 capitalize"
+                href="#"
+                @click="openFile(sippFileReview.filePath)"
+              >
+                {{ sippFileReview?.fileName }}
+              </a>
+            </p>
+          </DE.Cell>
+        </DE.Block>
+      </template>
+
+      <template v-if="isSepValid">
+        <hr />
+        <!-- Data SEP -->
+        <h3 class="text-lg font-semibold">Data SEP</h3>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell>
+            <Label height="compact">Dengan Rujukan / Surat Kontrol</Label>
+            <DE.Field>
+              <Input
+                id="sepReference"
+                v-model="sepReference"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">No. Rujukan / Surat Kontrol</Label>
+            <DE.Field>
+              <Input
+                id="sepReference"
+                v-model="sepNumber"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">
+              Tanggal Rujukan / Surat Kontrol
+              <span class="ml-1 text-red-500">*</span>
+            </Label>
+            <DE.Field>
+              <DatepickerSingle
+                id="sepControlDate"
+                v-model="sepControlDate"
+                :disabled="true"
+                placeholder="Pilih tanggal sep"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell :col-span="2">
+            <Label height="compact">Diagnosis</Label>
+            <DE.Field>
+              <Input
+                id="diagnosis"
+                v-model="diagnosis"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">Status Kecelakaan</Label>
+            <DE.Field>
+              <Input
+                id="sepTrafficStatus"
+                v-model="sepTrafficStatus"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
         </DE.Block>
       </template>
     </form>

app/components/app/encounter/filter-nav.vue

@@ -8,6 +8,7 @@ import { cn } from '~/lib/utils'
 import type { RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
 
 const props = defineProps<{
+  activePositon?: string
   refSearchNav?: RefSearchNav
   enableExport?: boolean
   refExportNav?: RefExportNav
@@ -17,23 +18,13 @@ const props = defineProps<{
   onExportCsv?: () => void
 }>()
 
-// function emitSearchNavClick() {
+const emit = defineEmits<{
-//   props.refSearchNav?.onClick()
+  apply: [filters: { personName: string; startDate: string; endDate: string }]
-// }
+}>()
-//
-// function onInput(event: Event) {
-//   props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
-// }
-//
-// function btnClick() {
-//   props.prep?.addNav?.onClick?.()
-// }
 
 const searchQuery = ref('')
-const dateRange = ref<{ from: Date | null; to: Date | null }>({
+const isRoleRegistration = props.activePositon === 'registration'
-  from: new Date(),
+const isRoleMedical = props.activePositon === 'medical'
-  to: new Date(),
-})
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'medium',
@@ -46,31 +37,47 @@ const todayCalendar = new CalendarDate(today.getFullYear(), today.getMonth() + 1
 // Get date 1 month ago
 const oneMonthAgo = new Date(today)
 oneMonthAgo.setMonth(today.getMonth() - 1)
-const oneMonthAgoCalendar = new CalendarDate(oneMonthAgo.getFullYear(), oneMonthAgo.getMonth() + 1, oneMonthAgo.getDate())
+const oneMonthAgoCalendar = new CalendarDate(
+  oneMonthAgo.getFullYear(),
+  oneMonthAgo.getMonth() + 1,
+  oneMonthAgo.getDate(),
+)
 
 const value = ref({
   start: oneMonthAgoCalendar,
   end: todayCalendar,
 }) as Ref<DateRange>
 
-// function onFilterClick() {
+function onFilterClick() {
-//   console.log('Search:', searchQuery.value)
+  const startDate = value.value.start ? value.value.start.toString() : ''
-//   console.log('Date Range:', dateRange.value)
+  const endDate = value.value.end ? value.value.end.toString() : startDate
-//   props.refSearchNav?.onClick()
+
-// }
+  emit('apply', {
+    personName: searchQuery.value,
+    startDate,
+    endDate,
+  })
+}
 </script>
 
 <template>
   <div class="relative w-64">
     <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
-    <Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
+    <Input
+      v-model="searchQuery"
+      type="text"
+      placeholder="Cari Nama /No.RM"
+      class="pl-9"
+    />
   </div>
 
   <Popover>
     <PopoverTrigger as-child>
       <Button
         variant="outline"
-        :class="cn('w-[200px] justify-start text-left font-normal', !value && 'text-muted-foreground')"
+        :class="
+          cn('min-w-[240px] max-w-[320px] justify-start text-left font-normal', !value && 'text-muted-foreground')
+        "
       >
         <CalendarIcon class="mr-2 h-4 w-4" />
         <template v-if="value.start">
@@ -83,7 +90,7 @@ const value = ref({
             {{ df.format(value.start.toDate(getLocalTimeZone())) }}
           </template>
         </template>
-        <template v-else> Pick a date </template>
+        <template v-else>Pick a date</template>
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-auto p-0">
@@ -96,28 +103,32 @@ const value = ref({
     </PopoverContent>
   </Popover>
 
-  <Button variant="outline" class="border-orange-500 text-orange-600 hover:bg-orange-50" @click="onFilterClick">
+  <Button
+    variant="outline"
+    class="border-orange-500 text-orange-600 hover:bg-orange-50"
+    @click="onFilterClick"
+  >
     <FilterIcon class="mr-2 size-4" />
     Filter
   </Button>
 
-  <DropdownMenu v-show="props.enableExport">
+  <DropdownMenu v-show="props.enableExport && (isRoleRegistration || isRoleMedical)">
     <DropdownMenuTrigger as-child>
-      <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
+      <Button
-        <Icon name="i-lucide-download" class="h-4 w-4" />
+        variant="outline"
+        class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50"
+      >
+        <Icon
+          name="i-lucide-download"
+          class="h-4 w-4"
+        />
         Ekspor
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent>
-      <DropdownMenuItem @click="onExportPdf">
+      <DropdownMenuItem @click="onExportPdf">Ekspor PDF</DropdownMenuItem>
-        Ekspor PDF
+      <DropdownMenuItem @click="onExportCsv">Ekspor CSV</DropdownMenuItem>
-      </DropdownMenuItem>
+      <DropdownMenuItem @click="onExportExcel">Ekspor Excel</DropdownMenuItem>
-      <DropdownMenuItem @click="onExportCsv">
-        Ekspor CSV
-      </DropdownMenuItem>
-      <DropdownMenuItem @click="onExportExcel">
-        Ekspor Excel
-      </DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>
 </template>

app/components/app/encounter/quick-info.vue

@@ -42,14 +42,14 @@ if (props.data.responsible_doctor) {
 </script>
 
 <template>
-  <div class="w-full">
+  <div class="w-full py-3 2xl:py-4 px-5">
     <!-- Data Pasien -->
     <h2 class="mb-2 font-semibold md:text-base 2xl:text-lg">
       {{ data.patient.person.name }} - {{ data.patient.number }}
     </h2>
     <div class="grid grid-cols-3">
       <div>
-        <DE.Block mode="preview">
+        <DE.Block mode="preview" class="!mb-0">
           <DE.Cell>
             <DE.Label class="font-semibold">Tgl. Lahir</DE.Label>
             <DE.Colon />
@@ -58,7 +58,7 @@ if (props.data.responsible_doctor) {
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label class="font-semibold">Jns. Kelamin</DE.Label>
+            <DE.Label class="font-semibold"><span class="hidden xl:inline">Jns.</span> Kelamin</DE.Label>
             <DE.Colon />
             <DE.Field>
               {{ genderCodes[data.patient.person.gender_code as keyof typeof genderCodes] }}
@@ -74,7 +74,7 @@ if (props.data.responsible_doctor) {
         </DE.Block>
       </div>
       <div>
-        <DE.Block mode="preview">
+        <DE.Block mode="preview" class="!mb-0">
           <DE.Cell>
             <DE.Label position="dynamic" class="font-semibold">Tgl. Masuk</DE.Label>
             <DE.Colon />
@@ -99,7 +99,7 @@ if (props.data.responsible_doctor) {
         </DE.Block>
       </div>
       <div>
-        <DE.Block mode="preview">
+        <DE.Block mode="preview" class="!mb-0">
           <DE.Cell>
             <DE.Label position="dynamic" class="font-semibold">DPJP</DE.Label>
             <DE.Colon />

app/components/app/encounter/quick-shortcut.vue

@@ -87,44 +87,46 @@ function handleClick(value: string) {
 </script>
 
 <template>
-  <h2 class="mb-4 font-semibold md:text-base 2xl:text-lg">Menu Cepat:</h2>
+  <div class="w-full py-3 2xl:py-4 px-5">
-  <div class="flex flex-wrap gap-2 mb-2">
+    <h2 class="mb-2 font-semibold md:text-base 2xl:text-lg">Akses Cepat:</h2>
-    <Button
+    <div class="flex flex-wrap gap-2 mb-2">
-      v-for="item in itemsOne"
+      <Button
-      :key="item.value"
+        v-for="item in itemsOne"
-      :class="[
+        :key="item.value"
-        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+        :class="[
-        activeMenu === item.value
+          'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
-          ? 'border-orange-300 bg-orange-400 text-white'
+          activeMenu === item.value
-          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+            ? 'border-orange-300 bg-orange-400 text-white'
-      ]"
+            : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
-      @click="handleClick(item.value)"
+        ]"
-    >
+        @click="handleClick(item.value)"
-      <Icon v-if="item.type === 'icon'"
+      >
-        :name="item.icon"
+        <Icon v-if="item.type === 'icon'"
-        class="h-4 w-4"
+          :name="item.icon"
-      />
+          class="h-4 w-4"
-      <img v-else-if="item.type === 'image'" :src="item.icon" class="h-[24px] w-[24px] object-contain" />
+        />
-      {{ item.label }}
+        <img v-else-if="item.type === 'image'" :src="item.icon" class="h-[24px] w-[24px] object-contain" />
-    </Button>
+        {{ item.label }}
-  </div>
+      </Button>
-  <div class="flex flex-wrap gap-2 mb-2">
+    </div>
-    <Button
+    <div class="flex flex-wrap gap-2 mb-2">
-      v-for="item in itemsTwo"
+      <Button
-      :key="item.value"
+        v-for="item in itemsTwo"
-      :class="[
+        :key="item.value"
-        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+        :class="[
-        activeMenu === item.value
+          'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
-          ? 'border-orange-300 bg-orange-400 text-white'
+          activeMenu === item.value
-          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+            ? 'border-orange-300 bg-orange-400 text-white'
-      ]"
+            : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
-      @click="handleClick(item.value)"
+        ]"
-    >
+        @click="handleClick(item.value)"
-      <Icon
+      >
-        :name="item.icon"
+        <Icon
-        class="h-4 w-4"
+          :name="item.icon"
-      />
+          class="h-4 w-4"
-      {{ item.label }}
+        />
-    </Button>
+        {{ item.label }}
+      </Button>
+    </div>
   </div>
 </template>

app/components/app/initial-nursing/entry-form.vue

@@ -0,0 +1,524 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+interface Masalah {
+  id: number
+  date: string
+  diagnosa: string
+  finishDate: string
+  staff: string
+}
+
+const props = defineProps<{
+  modelValue: any
+  schema: z.ZodSchema<any>
+  excludeFields?: string[]
+  isReadonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'submit', val: any): void
+}>()
+
+// Setup form
+const {
+  validate: _validate,
+  defineField,
+  handleSubmit,
+  errors,
+  values,
+} = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: props.modelValue,
+})
+
+watch(values, (val) => emit('update:modelValue', val), { deep: true })
+
+// Subjective
+const [primaryComplaint, primaryComplaintAttrs] = defineField('pri-complain')
+const [medType, medTypeAttrs] = defineField('med-type')
+const [medName, medNameAttrs] = defineField('med-name')
+const [medReaction, medReactionAttrs] = defineField('med-reaction')
+const [foodType, foodTypeAttrs] = defineField('food-type')
+const [foodName, foodNameAttrs] = defineField('food-name')
+const [foodReaction, foodReactionAttrs] = defineField('food-reaction')
+const [otherType, otherTypeAttrs] = defineField('other-type')
+const [otherName, otherNameAttrs] = defineField('other-name')
+const [otherReaction, otherReactionAttrs] = defineField('other-reaction')
+const [painAsst, painAsstAttrs] = defineField('pain-asst')
+const [painScale, painScaleAttrs] = defineField('pain-scale')
+const [painTime, painTimeAttrs] = defineField('pain-time')
+const [painDuration, painDurationAttrs] = defineField('pain-duration')
+const [painFreq, painFreqAttrs] = defineField('pain-freq')
+const [painLoc, painLocAttrs] = defineField('pain-loc')
+const [nutScreening, nutScreeningAttrs] = defineField('nut-screening')
+const [spiritualAsst, spiritualAsstAttrs] = defineField('spiritual-asst')
+
+// Objective
+const [generalCondition, generalConditionAttrs] = defineField('general-condition')
+const [supportExam, supportExamAttrs] = defineField('support-exam')
+const [riskFall, riskFallAttrs] = defineField('risk-fall')
+const [bracelet, braceletAttrs] = defineField('bracelet')
+const [braceletAlg, braceletAlgAttrs] = defineField('bracelet-alg')
+
+const validate = async () => {
+  const result = await _validate()
+  console.log('Component validate() result:', result)
+
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+const form = ref<Masalah>({
+  id: 0,
+  date: '',
+  diagnosa: '',
+  finishDate: '',
+  staff: '',
+})
+
+const list = ref<Masalah[]>([])
+const isEditing = ref(false)
+const showForm = ref(false)
+
+const resetForm = () => {
+  form.value = {
+    id: 0,
+    date: '',
+    diagnosa: '',
+    finishDate: '',
+    staff: '',
+  }
+  isEditing.value = false
+}
+
+const openAdd = () => {
+  resetForm()
+  showForm.value = true
+}
+
+const submitForm = () => {
+  if (isEditing.value) {
+    const index = list.value.findIndex((v) => v.id === form.value.id)
+    if (index !== -1) list.value[index] = { ...form.value }
+  } else {
+    list.value.push({
+      ...form.value,
+      id: Date.now(),
+    })
+    emit('click', { type: 'add-problem', data: list.value })
+  }
+
+  showForm.value = false
+  resetForm()
+}
+
+const editItem = (item: Masalah) => {
+  form.value = { ...item }
+  isEditing.value = true
+  showForm.value = true
+}
+
+const deleteItem = (id: number) => {
+  list.value = list.value.filter((v) => v.id !== id)
+}
+
+defineExpose({ validate })
+const icdPreview = inject('icdPreview')
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div>
+        <h1 class="font-semibold">A. Data Subyektif</h1>
+      </div>
+
+      <div class="my-2">
+        <Block>
+          <Cell>
+            <Label dynamic>Keluhan Pasien</Label>
+            <Field :errMessage="errors['pri-complain']">
+              <Textarea
+                v-model="primaryComplaint"
+                v-bind="primaryComplaintAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <span class="mb-4 text-sm font-semibold">Riwayat Alergi dan Reaksi Alergi</span>
+        <Block
+          :colCount="3"
+          class="mt-2"
+        >
+          <Cell>
+            <Label dynamic>a. Obat</Label>
+            <Field>
+              <Input
+                v-model="medType"
+                v-bind="medTypeAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Sebutkan</Label>
+            <Field>
+              <Input
+                v-model="medName"
+                v-bind="medNameAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Reaksi</Label>
+            <Field>
+              <Input
+                v-model="medReaction"
+                v-bind="medReactionAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block
+          :colCount="3"
+          class="mt-2"
+        >
+          <Cell>
+            <Label dynamic>b. Makanan</Label>
+            <Field>
+              <Input
+                v-model="foodType"
+                v-bind="foodTypeAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Sebutkan</Label>
+            <Field>
+              <Input
+                v-model="foodName"
+                v-bind="foodNameAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Reaksi</Label>
+            <Field>
+              <Input
+                v-model="foodReaction"
+                v-bind="foodReactionAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block
+          :colCount="3"
+          class="mt-2"
+        >
+          <Cell>
+            <Label dynamic>c. Lain-Lain</Label>
+            <Field>
+              <Input
+                v-model="otherType"
+                v-bind="otherTypeAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Sebutkan</Label>
+            <Field>
+              <Input
+                v-model="otherName"
+                v-bind="otherNameAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Reaksi</Label>
+            <Field>
+              <Input
+                v-model="otherReaction"
+                v-bind="otherReactionAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <div class="my-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Kajian Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painAsst"
+                v-bind="painAsstAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Skala Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painScale"
+                v-bind="painScaleAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Waktu Nyeri</Label>
+            <Field>
+              <Input
+                v-model="paintTime"
+                v-bind="painTimeAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Durasi Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painDuration"
+                v-bind="painDurationAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Frequensi Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painFreq"
+                v-bind="painFreqAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lokasi</Label>
+            <Field>
+              <Input
+                v-model="painLoc"
+                v-bind="painLocAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Skrining Nutrisi</Label>
+            <Field>
+              <Textarea
+                v-model="nutScreening"
+                v-bind="nutScreeningAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Kajian Spiritual</Label>
+            <Field>
+              <Textarea
+                v-model="spiritualAsst"
+                v-bind="spiritualAsstAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">B. Data Obyektif</h1>
+      </div>
+
+      <div class="my-2">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Keadaan Umum</Label>
+            <Field>
+              <Textarea
+                v-model="generalCondition"
+                v-bind="generalConditionAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Pemeriksaan Penunjang</Label>
+            <Field>
+              <Input
+                v-model="supportExam"
+                v-bind="supportExamAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Risiko Jatuh</Label>
+            <Field>
+              <Input
+                v-model="riskFall"
+                v-bind="riskFallAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Pemakaian Gelang</Label>
+            <Field>
+              <Input
+                v-model="bracelet"
+                v-bind="braceletAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Pasang Gelang Alergi</Label>
+            <Field>
+              <Input
+                v-model="braceletAlg"
+                v-bind="braceletAlgAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="my-3 font-semibold">C. Daftar Masalah Keperawatan</h1>
+
+        <Button
+          class="rounded bg-orange-100 px-3 py-1 text-orange-600"
+          type="button"
+          @click="showForm = true"
+        >
+          + Tambah
+        </Button>
+      </div>
+
+      <div
+        v-if="showForm"
+        class="mb-4 space-y-3 rounded border bg-gray-50 p-4 shadow-sm"
+      >
+        <div>
+          <Label>Tanggal Muncul</Label>
+          <Input
+            v-model="form.date"
+            type="date"
+          />
+        </div>
+
+        <div>
+          <Label class="font-medium">Diagnosa Keperawatan</Label>
+          <Input v-model="form.diagnosa" />
+        </div>
+
+        <div>
+          <Label class="font-medium">Tanggal Teratasi</Label>
+          <Input
+            v-model="form.finishDate"
+            type="date"
+          />
+        </div>
+
+        <div>
+          <Label class="font-medium">Nama Petugas</Label>
+          <Input v-model="form.staff" />
+        </div>
+
+        <div class="mt-2 flex gap-2">
+          <Button
+            @click="submitForm"
+            type="button"
+          >
+            {{ isEditing ? 'Update' : 'Tambah' }}
+          </Button>
+
+          <Button
+            @click="showForm = false"
+            type="button"
+            class="rounded bg-gray-300 px-3 py-1"
+          >
+            Batal
+          </Button>
+        </div>
+      </div>
+
+      <div class="mb-8">
+        <table class="w-full border text-sm">
+          <thead class="bg-gray-100">
+            <tr>
+              <th class="border p-2">Tanggal Muncul</th>
+              <th class="border p-2">Diagnosa</th>
+              <th class="border p-2">Tanggal Teratasi</th>
+              <th class="border p-2">Petugas</th>
+              <th class="w-28 border p-2">Aksi</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="item in list"
+              :key="item.id"
+              class="border"
+            >
+              <td class="border p-2">{{ item.date }}</td>
+              <td class="border p-2">{{ item.diagnosa }}</td>
+              <td class="border p-2">{{ item.finishDate }}</td>
+              <td class="border p-2">{{ item.staff }}</td>
+              <td class="flex justify-center gap-4 border p-2">
+                <Icon
+                  @click="editItem(item)"
+                  name="i-lucide-pencil"
+                  class="h-4 w-4 cursor-pointer"
+                />
+
+                <Icon
+                  @click="deleteItem(item.id)"
+                  name="i-lucide-trash"
+                  class="h-4 w-4 cursor-pointer"
+                />
+              </td>
+            </tr>
+
+            <tr v-if="list.length === 0">
+              <td
+                colspan="5"
+                class="p-4 text-center text-gray-500"
+              >
+                Belum ada data
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </form>
+</template>

app/components/app/initial-nursing/list-cfg.ts

@@ -0,0 +1,73 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 50 }],
+
+  headers: [
+    [{ label: 'Tanggal' }, { label: 'Diagnosa' }, { label: 'Tanggal Selesai' }, { label: 'Staff' }, { label: 'Aksi' }],
+  ],
+
+  keys: ['date', 'diagnosa', 'finishDate', 'staff', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    time(rec: any) {
+      return rec.time ? new Date(rec.time).toLocaleDateString() : ''
+    },
+    main_complaint(rec: any) {
+      const { value } = rec ?? {}
+
+      if (typeof value !== 'string') return '-'
+
+      try {
+        const parsed = JSON.parse(value)
+        console.log('parsed', parsed)
+        return parsed?.['prim-compl'] || '-'
+      } catch {
+        return '-'
+      }
+    },
+    encounter(rec: any) {
+      const data = rec?.encounter ?? {}
+      return data?.class_code || '-'
+    },
+    diagnose(rec: any) {
+      const { value } = rec ?? {}
+
+      if (typeof value !== 'string') return '-'
+
+      try {
+        const parsed = JSON.parse(value)
+        const diagnose = parsed?.diagnose || []
+        return diagnose.map((d: any) => d.name).join(', ')
+      } catch {
+        return '-'
+      }
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}

app/components/app/initial-nursing/list.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>

app/components/app/initial-nursing/preview.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+const props = defineProps<{
+  preview: any
+}>()
+</script>
+
+<template>
+  <div class="p-1 text-sm">
+    <div class="mb-4 flex gap-3">
+      <span class="w-40 font-semibold">Jam Tanggal</span>
+      <span>: {{ '-' }}</span>
+    </div>
+
+    <hr class="my-4" />
+
+    <h2 class="mb-3 font-semibold">A. Data Subyektif</h2>
+
+    <div class="space-y-3">
+      <div class="flex">
+        <span class="w-40 font-medium">Keluhan Pasien</span>
+        <span>: {{ preview?.['pri-complain'] || '-' }}</span>
+      </div>
+
+      <div>
+        <div class="flex">
+          <span class="w-40 font-medium">Riwayat Alergi dan Reaksi</span>
+          <span>:</span>
+        </div>
+
+        <div class="mt-1 space-y-1 pl-10">
+          <div class="flex">
+            <span class="w-28">a. Obat</span>
+            <span>: {{ preview?.['med-type'] || '-' }}</span>
+            <span class="ml-6 w-20">Sebutkan</span>
+            <span>: {{ preview?.['med-name'] || '-' }}</span>
+            <span class="ml-6 w-16">Reaksi</span>
+            <span>: {{ preview?.['med-reaction'] || '-' }}</span>
+          </div>
+
+          <div class="flex">
+            <span class="w-28">b. Makanan</span>
+            <span>: {{ preview?.['food-type'] || '-' }}</span>
+            <span class="ml-6 w-20">Sebutkan</span>
+            <span>: {{ preview?.['food-name'] || '-' }}</span>
+            <span class="ml-6 w-16">Reaksi</span>
+            <span>: {{ preview?.['food-reaction'] || '-' }}</span>
+          </div>
+
+          <div class="flex">
+            <span class="w-28">c. Lain-lain</span>
+            <span>: {{ preview?.['other-type'] || '-' }}</span>
+            <span class="ml-6 w-20">Sebutkan</span>
+            <span>: {{ preview?.['other-name'] || '-' }}</span>
+            <span class="ml-6 w-16">Reaksi</span>
+            <span>: {{ preview?.['other-reaction'] || '-' }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Kajian Nyeri</span>
+        <span>: {{ preview?.['pain-asst'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40">Skala Nyeri</span>
+        <span>: {{ preview?.['pain-scale'] || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Waktu Nyeri</span>
+        <span>: {{ preview?.['pain-time'] || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Durasi Nyeri</span>
+        <span>: {{ preview?.['pain-duration'] || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Frekwensi Nyeri</span>
+        <span>: {{ preview?.['pain-freq'] || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Lokasi</span>
+        <span>: {{ preview?.['pain-loc'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Skrining Nutrisi</span>
+        <span>: {{ preview?.['nut-screening'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Kajian psiko-sosio-kultural-spiritual</span>
+        <span>: {{ preview?.['spiritual-asst'] || '-' }}</span>
+      </div>
+    </div>
+
+    <hr class="my-4" />
+
+    <h2 class="mb-3 font-semibold">B. Data Obyektif</h2>
+
+    <div class="space-y-3">
+      <div class="flex">
+        <span class="w-40 font-medium">Keadaan Umum</span>
+        <span>: {{ preview?.['general-condition'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Pemeriksaan Penunjang</span>
+        <span>: {{ preview?.['support-exam'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Risiko Jatuh</span>
+        <span>: {{ preview?.['risk-fall'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Pemakaian Gelang Risiko Jatuh</span>
+        <span>: {{ preview?.['bracelet'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Pasang Gelang Alergi</span>
+        <span>: {{ preview?.['bracelet-alg'] || '-' }}</span>
+      </div>
+    </div>
+  </div>
+</template>

app/components/app/material-package-item/quick-list.cfg.ts

@@ -0,0 +1,23 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+type SmallDetailDto = any
+
+export const config: Config = {
+  cols: [ { width: 150 }, {}, { width: 150 }],
+
+  headers: [
+    [
+      { label: 'No' },
+      { label: 'Name' },
+      { label: 'Jumlah' },
+    ],
+  ],
+
+  keys: ['number', 'material.name', 'count'],
+
+  parses: {
+    number: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+  },
+}

app/components/app/material-package-item/quick-list.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+//
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
+// Configs
+import { config } from './quick-list.cfg'
+import type { MaterialPackageItem } from '~/models/material-package-item';
+
+interface Props {
+  data: MaterialPackageItem[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="mb-4">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+        Daftar Item BMHP
+    </div>
+    <DataTable v-bind="config" :rows="data" class="border"/>
+  </div>
+</template>

app/components/app/material-package/switcher.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+//
+import * as CB from '~/components/pub/my-ui/combobox'
+import type { MaterialPackage } from '~/models/material-package';
+
+//
+const props =defineProps<{
+  data: MaterialPackage[]
+}>()
+
+const model = defineModel()
+
+const items = computed(() => {
+  return props.data.map((item) => {
+    return {
+      label: item.name,
+      value: item.code,
+    }
+  })
+})
+
+</script>
+
+<template>
+  <div class="mb-4 2xl:mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Paket BMHP
+    </div>
+    <div class="max-w-[600px]">
+      <CB.Combobox :items="items" v-model="model" />
+    </div>
+  </div>
+</template>

app/components/app/mcu-order-item/list-entry.cfg.ts

@@ -1,18 +1,20 @@
 import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
+import type { McuOrderItem } from '~/models/mcu-order-item'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+// const input = defineAsyncComponent(() => import('~/components/pub/my-ui/data/editable-div.vue'))
 const input = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
 
 export const config: Config = {
-  cols: [{}, {}, { classVal: '!p-0.5' }, { width: 50 }],
+  cols: [{}, {}, { classVal: '!p-0.5' }],
 
   headers: [
     [
       { label: 'Nama' },
       { label: 'Jenis' },
-      { label: 'Catatan' },
+      { label: 'Catatan', classVal: '!w-[40%]' },
-      { label: '' },
+      // { label: '' },
     ],
   ],
 
@@ -27,16 +29,17 @@ export const config: Config = {
       return {
         idx,
         rec: rec as object,
+        props: { data: (rec as McuOrderItem).note },
         component: input,
       }
     },
-    action(rec, idx) {
+    // action(rec, idx) {
-      return {
+    //   return {
-        idx,
+    //     idx,
-        rec: rec as object,
+    //     rec: rec as object,
-        component: action,
+    //     component: action,
-      }
+    //   }
-    },
+    // },
   },
 
   htmls: {},

app/components/app/mcu-order-item/list-entry.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
 import { config } from './list-entry.cfg'
 import type { McuOrderItem } from '~/models/mcu-order-item';
 
@@ -13,7 +15,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <PubMyUiDataTable class="border mb-3 2xl:mb-4"
+  <DataTable class="border mb-3 2xl:mb-4"
     v-bind="config"
     :rows="data"
   />

app/components/app/mcu-order-item/list.cfg.ts

@@ -1,16 +1,18 @@
 import type { Config } from '~/components/pub/my-ui/data-table'
 
 export const config: Config = {
-  cols: [{}, {}],
+  cols: [{}, { width: 150 }, {}],
 
   headers: [
     [
       { label: 'Nama' },
-      { label: 'Jenis' },
+      { label: 'Jadwal Pemeriksaan' },
+      { label: 'Status' },
+      { label: 'Catatan' },
     ],
   ],
 
-  keys: ['mcuSrc.name', 'mcuSrcCategory.name'],
+  keys: ['mcuSrc.name', 'examinationDate', 'status_code', 'note'],
 
   delKeyNames: [
     { key: 'mcuSrc.name', label: 'Nama' },

app/components/app/mcu-order/confirmation-info.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { McuOrder } from '~/models/mcu-order';
+
+defineProps<{
+  recItem: McuOrder
+}>()
+</script>
+
+<template>
+    <div class="flex mb-2">
+      <div class="w-20">Tanggal</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.createdAt?.substring(0, 10) }}</div>
+    </div>
+    <div class="flex">
+      <div class="w-20">DPJP</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
+    </div>
+</template>

app/components/app/mcu-order/detail.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 
 <template>
     <div class="text-sm 2xl:text-base font-semibold mb-3">
-      Order {{ data?.createdAt?.substring(0, 10) }} - {{ data.status_code }}
+      Order {{ data?.createdAt?.substring(0, 10) }} - {{ data?.status_code }}
     </div>
     <div class="max-w-[1000px]">
       <DE.Block mode="preview" :col-count=5 class="!mb-3">

app/components/app/mcu-order/list.vue

@@ -34,7 +34,7 @@ function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
     <div class="mb-4 xl:mb-5">Belum Ada Data</div>
   </div>
   <template v-for="item, idx in data">
-    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-0' : 'mb-2')">
       Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
     </div>
     <DE.Block mode="preview" :col-count=7 class="!mb-3">

app/components/app/mcu-order/micro-list.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { McuOrder } from '~/models/mcu-order';
+import AntibioticInUseList from '~/components/app/antibiotic-in-use/list.vue';
+import McuOrderItems from '~/components/app/mcu-order-item/list.vue';
+import type { AntibioticInUse } from '~/models/antibiotic-in-use';
+
+interface Props {
+  data: McuOrder[]
+  antibioticInUses: AntibioticInUse[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
+<template>
+  <div v-if="data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-0' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count=7 class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '........' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <AntibioticInUseList v-if="item.antibioticInUseItems?.length > 0" :data="[]" class="!mb-5" />
+    <McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
+  </template>
+</template>

app/components/app/mcu-src/picker-accordion.vue

@@ -37,7 +37,7 @@ function pick(item: McuSrc) {
     <div class="grid lg:grid-cols-4 2xl:grid-cols-5 gap-2 [&_button]:w-full">
       <div v-for="item, idx in dataSource" :key="idx" class="flex gap-2">
         <Button 
-          :variant="data.some(e => e.mcuSrc_id === item.id) ? 'default' : 'outline'"
+          :variant="data.some(e => e.mcuSrc_code === item.code) ? 'default' : 'outline'"
           type="button"
           @click="pick(item)"
         > 

app/components/app/prb/_common/btn-history.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ActionEvents, type ListItemDto } from '~/components/pub/my-ui/data/types';
+import Button from '~/components/pub/ui/button/Button.vue';
+
+const props = defineProps<{
+  
+}>()
+const isModalOpen = inject<Ref<boolean>>('isHistoryDialogOpen')!
+
+function openDialog() {
+  isModalOpen.value = true
+}
+</script>
+
+<template>
+    <Button type="button" variant="outline" class="text-orange-500 border border-orange-400 bg-orange-50"
+        @click="openDialog">
+        <Icon name="i-lucide-history" class="h-4 w-4 align-middle transition-colors" />
+        History
+    </Button>
+</template>

app/components/app/prb/_common/filter.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import { cn } from '~/lib/utils'
+
+interface InstallationFormData {
+  name: string
+  code: string
+  encounterClassCode: string
+}
+
+const props = defineProps<{
+  schema: any
+  initialValues?: Partial<InstallationFormData>
+}>()
+
+const emit = defineEmits<{
+  submit: [values: InstallationFormData, resetForm: () => void]
+  reset: [resetForm: () => void]
+}>()
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  emit('submit', values, resetForm)
+}
+
+// Form cancel handler
+function onResetForm({ resetForm }: { resetForm: () => void }) {
+  emit('reset', resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-7 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <InputBase
+            field-name="patientName"
+            label="Nama Pasien"
+            placeholder="Nama Pasien"
+          />
+          <InputBase
+            field-name="cardNumber"
+            label="Nomor Kartu"
+            placeholder="Nomor Kartu"
+          />
+          <InputBase
+            field-name="sepNumber"
+            label="Nomor SEP"
+            placeholder="Nomor SEP"
+          />
+        </div>
+      </div>
+     
+      <div class="my-2 flex items-center gap-3 justify-end">
+        <Button @click="onResetForm" variant="secondary">Reset</Button>
+        <Button @click="onSubmitForm">Terapkan</Button>
+      </div>
+    </form>
+  </Form>
+</template>

app/components/app/prb/_common/select-date.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+  isWithTime?: boolean
+}>()
+
+const {
+  fieldName = 'birthDate',
+  label = 'Tanggal Lahir',
+  placeholder = 'Pilih tanggal lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Reactive variables for age calculation
+const patientAge = ref<string>('Masukkan tanggal lahir')
+
+// Function to calculate age with years, months, and days
+function calculateAge(birthDate: string | Date | undefined): string {
+  if (!birthDate) {
+    return 'Masukkan tanggal lahir'
+  }
+
+  try {
+    let dateObj: Date
+
+    if (typeof birthDate === 'string') {
+      dateObj = parseISO(birthDate)
+    } else {
+      dateObj = birthDate
+    }
+
+    const today = new Date()
+
+    // Calculate years, months, and days
+    const totalYears = differenceInYears(today, dateObj)
+
+    // Calculate remaining months after years
+    const yearsPassed = new Date(dateObj)
+    yearsPassed.setFullYear(yearsPassed.getFullYear() + totalYears)
+    const remainingMonths = differenceInMonths(today, yearsPassed)
+
+    // Calculate remaining days after years and months
+    const monthsPassed = new Date(yearsPassed)
+    monthsPassed.setMonth(monthsPassed.getMonth() + remainingMonths)
+    const remainingDays = differenceInDays(today, monthsPassed)
+
+    // Format the result
+    const parts = []
+    if (totalYears > 0) parts.push(`${totalYears} Tahun`)
+    if (remainingMonths > 0) parts.push(`${remainingMonths} Bulan`)
+    if (remainingDays > 0) parts.push(`${remainingDays} Hari`)
+
+    return parts.length > 0 ? parts.join(' ') : '0 Hari'
+  } catch {
+    return 'Masukkan tanggal lahir'
+  }
+}
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              id="birthDate"
+              :type="props.isWithTime ? 'datetime-local' : 'date'"
+              min="1900-01-01"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :disabled="isDisabled"
+              @update:model-value="
+                (value: string | number) => {
+                  const dateStr = typeof value === 'number' ? String(value) : value
+                  patientAge = calculateAge(dateStr)
+                }
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/prb/_common/select-dpjp.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn } from '~/lib/utils'
+import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const doctors = ref<Array<Item>>([])
+
+async function fetchDpjp() {
+  doctors.value = await getDoctorLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    includes: 'employee-person',
+  }, true)
+}
+
+onMounted(() => {
+  fetchDpjp()
+})
+
+// function handleDpjpChange(selected: string) {
+//   selectedDpjpId.value = selected ?? null
+// }
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="doctors"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/prb/_common/select-medicine-form.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn } from '~/lib/utils'
+import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const doctors = ref<Array<Item>>([])
+
+async function fetchDpjp() {
+  doctors.value = await getDoctorLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    includes: 'employee-person',
+  }, true)
+}
+
+onMounted(() => {
+  fetchDpjp()
+})
+
+// function handleDpjpChange(selected: string) {
+//   selectedDpjpId.value = selected ?? null
+// }
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="doctors"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/prb/_common/select-medicine.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn } from '~/lib/utils'
+import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const doctors = ref<Array<Item>>([])
+
+async function fetchDpjp() {
+  doctors.value = await getDoctorLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    includes: 'employee-person',
+  }, true)
+}
+
+onMounted(() => {
+  fetchDpjp()
+})
+
+// function handleDpjpChange(selected: string) {
+//   selectedDpjpId.value = selected ?? null
+// }
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="doctors"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/prb/_common/select-program.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { PrbProgramTypeOptList } from '~/lib/constants'
+import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+onMounted(() => {
+  
+})
+
+// function handleDpjpChange(selected: string) {
+//   selectedDpjpId.value = selected ?? null
+// }
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="PrbProgramTypeOptList"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/prb/bpjs-list.cfg.ts

@@ -0,0 +1,60 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-upd.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {width: 50}, ],
+
+  headers: [
+    [
+      { label: 'No. PRB' },
+      { label: 'No. RM' },
+      { label: 'Nama Pasien' },
+      { label: 'Jenis Kelamin' },
+      { label: 'Alamat' },
+      { label: 'Klinik' },
+      { label: 'Nama Dokter' },
+      { label: 'Tanggal' },
+      { label: 'Program PRB' },
+      { label: 'No. SEP' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['date', 'name1', 'name2', 'name3', 'name4', 'name5', 'name6', 'name7', 'name8', 'name9', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+
+  },
+}

app/components/app/prb/detail.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import { type Variants, Badge } from '~/components/pub/ui/badge'
+import { cn, } from '~/lib/utils'
+import type { Prb } from '~/models/prb'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+// #region Props & Emits
+const props = defineProps<{
+  instance: Prb | null
+}>()
+
+// const emit = defineEmits<{
+//   (e: 'click'): void
+// }>()
+
+const dummy = [
+  {
+    id: 1,
+    number: 1,
+    name: 'Operasi',
+    code: 'OP-001'
+  }
+]
+
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// Computed addresses from nested data
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+// function onClick() {
+//   emit('click')
+// }
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <article :class="cn('mb-5 space-y-1',)">
+    <DetailRow label="No. PRB">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="Waktu dan Tanggal">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="Program PRB">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="DPJP">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="Keterangan">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="Saran">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+  </article>
+</template>
+
+<style scoped></style>

app/components/app/prb/entry.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import SelectDate from './_common/select-date.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import ObatPicker from './obat-picker/picker-dialog.vue'
+import SepPicker from './sep-picker/picker-dialog.vue'
+import SelectDpjp from './_common/select-dpjp.vue'
+import SelectProgram from './_common/select-program.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
+
+const props = withDefaults(defineProps<{
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+  isBpjs?: boolean
+}>(), {
+  isBpjs: false,
+})
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+const isSepDialogOpen = ref(false)
+provide("isSepDialogOpen", isSepDialogOpen);
+const handleToggleSepDialog = () => isSepDialogOpen.value = !isSepDialogOpen.value
+const setNoSep = (inputValue: string) => formRef.value?.setValues({ a0: inputValue }, false)
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ? initialValues : {}"
+  >
+    <DE.Block :col-count="2" :cell-flex="false">
+      <DE.Cell :col-span="2" v-if="isBpjs">
+        <div class="w-1/2 flex items-end gap-3">
+          <InputBase :errors="errors"
+            field-name="a0"
+            label="No. RM/Kartu BPJS" placeholder="Masukkan No. RM/Kartu BPJS"
+          />
+          <Button @click="handleToggleSepDialog" size="icon" variant="outline"
+            class="text-orange-400 border-orange-400 bg-transparent">
+            <Icon name="i-lucide-search" class="h-4 w-4 align-middle transition-colors" />
+          </Button>
+        </div>
+      </DE.Cell>     
+      <InputBase :errors="errors"
+        field-name="a1"
+        label="No. PRB" placeholder="Akan terisi otomatis"
+        is-disabled
+      />      
+      <SelectDate
+        field-name="a2"
+        label="Waktu & Tanggal"
+        :errors="errors"
+        is-disabled
+        is-with-time
+      />
+      <SelectProgram :errors="errors"
+        field-name="a3"
+        label="Program PRB" placeholder="Pilih Program PRB"
+        is-required
+      />
+      <SelectDpjp :errors="errors"
+        field-name="a4"
+        label="DPJP" placeholder="Pilih DPJP"
+        is-required
+      />    
+      <TextAreaInput :errors="errors"
+        field-name="a5"
+        label="Keterangan" placeholder="Isi Keterangan"
+      />
+      <TextAreaInput :errors="errors"
+        field-name="a6"
+        label="Saran" placeholder="Isi Saran"
+      />
+    </DE.Block>
+        
+    <!-- PICKER -->
+    <DE.Block :col-count="1" :cell-flex="false">
+      <ObatPicker field-name="a7" title="Obat" />
+    </DE.Block>
+    <SepPicker title="SEP" :choose-fn="setNoSep" />
+    <!-- -->
+  </Form>
+</template>

app/components/app/prb/history-list.cfg.ts

@@ -0,0 +1,62 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-print.vue'))
+const statusBadge = defineAsyncComponent(() => import('~/components/pub/my-ui/badge/status-badge.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {width: 100}, {width: 50}, ],
+
+  headers: [
+    [
+      { label: 'Tgl Diterbitkan' },
+      { label: 'Kode Obat' },
+      { label: 'Nama Obat' },
+      { label: 'Signa' },
+      { label: 'Jumlah' },
+      { label: 'Durasi Pemberian' },
+      { label: 'status' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['date', 'name1', 'name2', 'name3', 'name4', 'name5', 'status', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {
+
+  },
+}

app/components/app/prb/history-list.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './history-list.cfg'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:dateValue': [value: DateRange]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>

app/components/app/prb/list.cfg.ts

@@ -0,0 +1,56 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-upd.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {width: 50}, ],
+
+  headers: [
+    [
+      { label: 'Tgl Diterbitkan' },
+      { label: 'Kode Obat' },
+      { label: 'Nama Obat' },
+      { label: 'Signa' },
+      { label: 'Jumlah' },
+      { label: 'Durasi Pemberian' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['date', 'name1', 'name2', 'name3', 'name4', 'name5', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+
+  },
+}

app/components/app/prb/list.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './list.cfg'
+import { config as bpjsConfig } from './bpjs-list.cfg'
+
+const props = withDefaults(defineProps<{
+  data: any[]
+  isBpjs?: boolean
+}>(), {
+  isBpjs: false,
+})
+
+const tableConfig = computed(() => {
+  return props.isBpjs ? bpjsConfig : config
+})
+// const emit = defineEmits<{
+//   pageChange: [page: number]
+// }>()
+
+// function handlePageChange(page: number) {
+//   emit('pageChange', page)
+// }
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="tableConfig"
+      :rows="data"
+    />
+    <!-- <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" /> -->
+  </div>
+</template>

app/components/app/prb/obat-picker/form.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+// Components
+import type { FormErrors } from '~/types/error'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+// Helpers
+
+// Types
+import { toTypedSchema } from '@vee-validate/zod'
+
+// Handlers
+import {
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/procedure-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/procedure-src.service'
+import SelectMedicine from '../_common/select-medicine.vue'
+import SelectMedicineForm from '../_common/select-medicine-form.vue'
+
+interface Props {
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+  medicineData: any[]
+  medicineFormsData: any[]
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  toggleDialog: []
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ? initialValues : {}"
+  >
+    <DE.Block :col-count="6" :cell-flex="false">      
+      <DE.Cell :col-span="6">   
+        <SelectMedicine :errors="errors"
+          field-name="a1"
+          label="Obat" placeholder="Pilih Obat"
+        />
+      </DE.Cell>
+      <DE.Cell :col-span="4" class="mt-1.5">
+        <h1 class="mb-1">Signa</h1>
+        <div class="flex items-start gap-3">
+          <InputBase :errors="errors"
+            field-name="a2"
+            label="" placeholder="0"
+            right-label="Frekuensi"
+            numeric-only
+          /> 
+          <p class="text-3xl text-gray-400">X</p>
+          <InputBase :errors="errors"
+            field-name="a3"
+            label="" placeholder="0"
+            right-label="Dosis"
+            numeric-only
+          />
+        </div>
+      </DE.Cell>  
+      <DE.Cell :col-span="2">   
+        <SelectMedicineForm :errors="errors"
+          field-name="a4"
+          label="Satuan" placeholder="Pilih Satuan"
+        />
+      </DE.Cell>  
+      <DE.Cell :col-span="3">   
+        <InputBase :errors="errors"
+          field-name="a5"
+          label="Jumlah" placeholder="Masukkan Jumlah"
+        /> 
+      </DE.Cell> 
+      <DE.Cell :col-span="3">  
+        <InputBase :errors="errors"
+          field-name="a6"
+          label="Durasi Pemberian" placeholder="Masukkan Durasi Pemberian"
+          right-label="Hari"
+          numeric-only
+        /> 
+      </DE.Cell>  
+    </DE.Block>
+  </Form>
+</template>

app/components/app/prb/obat-picker/picker-dialog.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import ProcedureListDialog from './form.vue'
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { FieldArray } from 'vee-validate'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
+import { cn } from '~/lib/utils'
+import TableHeader from '~/components/pub/ui/table/TableHeader.vue'
+import { is } from 'date-fns/locale'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import List from './form.vue'
+import { getValueLabelList as getMedicineFormList } from '~/services/medicine-form.service'
+import { getValueLabelList as getMedicineList } from '~/services/medicine.service'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import FormEntry from './form.vue'
+import { PrbSchema } from '~/schemas/prb.schema'
+import type { ExposedForm } from '~/types/form'
+import type { Prb } from '~/models/prb'
+import { PrbMedicineSchema } from '~/schemas/prb-medicine.schema'
+
+interface Props {
+  fieldName: string
+  title: string
+}
+const props = defineProps<Props>()
+const isOperativeActionDialogOpen = ref(false)
+provide("isOperativeActionDialogOpen", isOperativeActionDialogOpen);
+
+const inputForm = ref<ExposedForm<any> | null>(null)
+const medicine = ref<{ value: string; label: string }[]>([])
+const medicineForms = ref<{ value: string; label: string }[]>([])
+
+const handleToggleOperativeActionDialog = () => {
+  isOperativeActionDialogOpen.value = !isOperativeActionDialogOpen.value
+}
+
+async function init(){
+  const [medicineRes, medicineFormRes] = await Promise.all([
+    getMedicineList({ sort: 'createdAt:asc', }),
+    getMedicineFormList({ sort: 'createdAt:asc', })
+  ])
+  medicine.value = medicineRes 
+  medicineForms.value = medicineFormRes 
+}
+
+onMounted(()=>{
+  init()
+})
+
+async function handleAdd(psuhFn: (input: unknown) => void) {
+  const validated = await composeFormData()
+  psuhFn({
+    code: validated.a1,
+    name: validated.a2,
+    signa: validated.a3,
+    total: validated.a5,
+    duration: validated.a6,
+  })
+  handleToggleOperativeActionDialog()
+}
+
+async function composeFormData(): Promise<any> {
+  const [input,] = await Promise.all([
+    inputForm.value?.validate(),
+  ])
+
+  const results = [input]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = input?.values
+  return new Promise((resolve) => resolve(formData))
+}
+</script>
+
+<template>
+  <div class="">
+    <div class="mb-2 flex items-center gap-3">
+      <h1 class="font-medium text-base">{{ title }}</h1>
+      <Button @click="isOperativeActionDialogOpen = true" size="xs" variant="outline"
+        class="rounded-lg text-orange-400 border-orange-400 bg-transparent">
+        <Icon name="i-lucide-search" class="h-4 w-4 align-middle transition-colors" />
+        Pilih {{ title }}
+      </Button>
+    </div>
+
+    <FieldArray v-slot="{ fields, push, remove }" :name="props.fieldName">
+      <Dialog
+        v-model:open="isOperativeActionDialogOpen"
+        title="" size="xl">
+        <FormEntry
+          ref="inputForm"
+          :schema="PrbMedicineSchema"
+          :medicine-data="medicine"
+          :medicine-forms-data="medicineForms"
+          @toggle-dialog="handleToggleOperativeActionDialog"
+        />
+        <div class="mt-2 flex justify-end">
+          <Button @click="handleAdd(push)" class="">
+            <Icon name="i-lucide-save" class="h-4 w-4 align-middle transition-colors" />
+            Simpan
+          </Button>
+        </div>
+      </Dialog>
+
+      <div class="border border-gray-200 rounded-lg overflow-hidden">
+        <Table>
+          <TableHeader class="bg-gray-100">
+            <TableRow>
+              <TableHead class="">Code</TableHead>
+              <TableHead class="">Name</TableHead>
+              <TableHead class="">Signa</TableHead>
+              <TableHead class="">Jumlah</TableHead>
+              <TableHead class="">Durasi Pemberian</TableHead>
+              <TableHead class="w-24">Action</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow v-for="(field, idx) in fields" :key="idx">
+              <TableCell class="2xl:pl-4">{{ field.value?.code }}</TableCell>
+              <TableCell class="2xl:pl-4">{{ field.value?.name }}</TableCell>
+              <TableCell class="2xl:pl-4">{{ field.value?.signa }}</TableCell>
+              <TableCell class="2xl:pl-4">{{ field.value?.total }}</TableCell>
+              <TableCell class="2xl:pl-4">{{ field.value?.duration }}</TableCell>
+              <TableCell class="2xl:pl-4">
+                <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
+                  <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+                </Button>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </FieldArray>
+  </div>
+</template>

app/components/app/prb/sep-picker/list.cfg.ts

@@ -0,0 +1,83 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-choose.vue'))
+const statusBadge = defineAsyncComponent(() => import('~/components/pub/my-ui/badge/status-badge.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 }, // TGL. SEP
+    { width: 150 }, // NO. SEP
+    { width: 120 }, // PELAYANAN
+    { width: 100 }, // JALUR
+    { width: 150 }, // NO. RM
+    { width: 200 }, // NAMA PASIEN
+    { width: 150 }, // NO. KARTU BPJS
+    { width: 150 }, // NO. SURAT KONTROL
+    { width: 150 }, // TGL SURAT KONTROL
+    { width: 150 }, // KLINIK TUJUAN
+    { width: 200 }, // DPJP
+    { width: 200 }, // DIAGNOSIS AWAL
+    { width: 100 }, // AKSI
+  ],
+
+  headers: [
+    [
+      { label: 'TGL. SEP' },
+      { label: 'NO. SEP' },
+      { label: 'PELAYANAN' },
+      { label: 'JALUR' },
+      { label: 'NO. RM' },
+      { label: 'NAMA PASIEN' },
+      { label: 'NO. KARTU BPJS' },
+      { label: 'NO. SURAT KONTROL' },
+      { label: 'TGL SURAT KONTROL' },
+      { label: 'KLINIK TUJUAN' },
+      { label: 'DPJP' },
+      { label: 'DIAGNOSIS AWAL' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'letterDate',
+    'letterNumber',
+    'serviceType',
+    'flow',
+    'medicalRecordNumber',
+    'patientName',
+    'cardNumber',
+    'controlLetterNumber',
+    'controlLetterDate',
+    'clinicDestination',
+    'attendingDoctor',
+    'diagnosis',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'letterNumber', label: 'NO. SEP' },
+    { key: 'patientName', label: 'Nama Pasien' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {},
+}

app/components/app/prb/sep-picker/list.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from './list.cfg'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ProcedureSrcSchema, type ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
+
+// Handlers
+import {
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/procedure-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/procedure-src.service'
+
+const title = ref('')
+
+interface Props {
+  data: any[]
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  toggleDialog: []
+}>()
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+    />
+  </div>
+</template>

app/components/app/prb/sep-picker/picker-dialog.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import List from './list.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { ActionEvents, type HeaderPrep, type RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { getList } from '~/services/vclaim-monitoring-visit.service'
+import type { VclaimSepData } from '~/models/vclaim'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import { defaultQuerySchema, defaultQueryParams } from '~/composables/usePaginatedList'
+
+interface Props {
+  title: string
+  chooseFn: (inputValue: string) => void
+}
+const props = defineProps<Props>()
+const isSepDialogOpen = inject('isSepDialogOpen') as Ref<boolean>;
+const handleToggleSepDialog = () => isSepDialogOpen.value = !isSepDialogOpen.value
+
+const data = ref<VclaimSepData[]>([])// Search model with debounce
+  const searchInput = ref('')
+  const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+// const paginationMeta = reactive<PaginationMeta>({
+//   recordCount: 0,
+//   page: 1,
+//   pageSize: 10,
+//   totalPage: 5,
+//   hasNext: false,
+//   hasPrev: false,
+// })
+// // URL state management
+// const queryParams = useUrlSearchParams('history', {
+//   initialValue: defaultQueryParams,
+//   removeFalsyValues: true,
+// })
+// const params = computed(() => {
+//   const result = defaultQuerySchema.safeParse(queryParams)
+//   return result.data || defaultQueryParams
+// })
+
+const recId = ref<string>(``)
+const recAction = ref<string>(``)
+const recItem = ref<any>({})
+const timestamp = ref<any>({})
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('timestamp', timestamp)
+
+const headerPrep: HeaderPrep = {
+  title: props.title,
+  icon: 'i-lucide-clipboard-list',
+}
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+
+async function getMonitoringVisitMappers() {
+  data.value = []
+  const tempArr: VclaimSepData[] = []
+
+  const result = await getList({
+    serviceType: 1,
+    search: debouncedSearch.value,
+  })
+
+  if (result && result.success && result.body) {
+    const visitsRaw = result.body?.response?.sep || []
+
+    visitsRaw.forEach((result: any) => {
+      // Format pelayanan: "R.Inap" -> "Rawat Inap", "1" -> "Rawat Jalan", dll
+      let serviceType = result.jnsPelayanan || '-'
+      if (serviceType === 'R.Inap') {
+        serviceType = 'Rawat Inap'
+      } else if (serviceType === '1' || serviceType === 'R.Jalan') {
+        serviceType = 'Rawat Jalan'
+      }
+
+      tempArr.push({
+        letterDate: result.tglSep || '-',
+        letterNumber: result.noSep || '-',
+        serviceType: serviceType,
+        flow: '-',
+        medicalRecordNumber: '-',
+        patientName: result.nama || '-',
+        cardNumber: result.noKartu || '-',
+        controlLetterNumber: result.noRujukan || '-',
+        controlLetterDate: result.tglPlgSep || '-',
+        clinicDestination: result.poli || '-',
+        attendingDoctor: '-',
+        diagnosis: result.diagnosa || '-',
+        careClass: result.kelasRawat || '-',
+      })
+    })
+    data.value = tempArr
+  }
+}
+// Handle pagination page change
+// function handlePageChange(page: number) {
+//   // Update URL params - this will trigger watcher
+//   queryParams['page-number'] = page
+// }
+
+onMounted(async () => {
+  await getMonitoringVisitMappers()
+})
+
+
+watch([recId, recAction, timestamp], () => {
+  switch (recAction.value) {
+    case ActionEvents.showProcess:
+      props.chooseFn(recItem.value.cardNumber)
+      handleToggleSepDialog()
+      break
+  }
+})
+
+watch(debouncedSearch, () => {
+  getMonitoringVisitMappers()
+})
+</script>
+
+<template>
+  <div class="">
+    <Dialog v-model:open="isSepDialogOpen" title="" size="full">
+      <Header 
+        v-model="searchInput"
+        :prep="headerPrep"
+        :ref-search-nav="refSearchNav" />
+      <List :data="data" />
+    </Dialog>
+  </div>
+</template>

app/components/app/prescription/flat-list.vue

@@ -31,12 +31,6 @@ function navClick(type: 'cancel' | 'edit' | 'submit', data: Prescription): void
 <template>
   <div v-if="data.length == 0" class="p-10 text-center">
     <div class="mb-4 xl:mb-5">Belum Ada Data</div>
-    <div>
-      <Button>
-        <Icon name="i-lucide-plus" class="me-2 align-middle" />
-        Tambah Order
-      </Button>
-    </div>
   </div>
   <Table.Table>
     <Table.TableHeader>

app/components/app/prescription/grouped-list.vue

@@ -32,12 +32,6 @@ function navClick(type: 'cancel' | 'edit' | 'submit', data: Prescription): void
 <template>
   <div v-if="data.length == 0" class="p-10 text-center">
     <div class="mb-4 xl:mb-5">Belum Ada Data</div>
-    <div>
-      <Button>
-        <Icon name="i-lucide-plus" class="me-2 align-middle" />
-        Tambah Order
-      </Button>
-    </div>
   </div>
   <template v-for="item, idx in data">
     <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">

app/components/app/procedure-room-order-item/list-detail.cfg.ts

@@ -0,0 +1,16 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+export const config: Config = {
+  cols: [{}, {}, { classVal: '!p-0.5' }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Catatan' },
+    ],
+  ],
+
+  keys: ['procedureRoom.code', 'procedureRoom.infra.name', 'note'],
+}

app/components/app/procedure-room-order-item/list-detail.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
+import { config } from './list-detail.cfg'
+import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
+
+defineProps<{
+  data: ProcedureRoomOrderItem[]
+}>()
+</script>
+
+<template>
+  <div class="mb-4 2xl:mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Daftar Order Ruang
+    </div>
+    <DataTable class="border mb-3 2xl:mb-4"
+      v-bind="config"
+      :rows="data"
+    />
+  </div>
+</template>

app/components/app/procedure-room-order-item/list-entry.cfg.ts

@@ -0,0 +1,43 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const input = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { classVal: '!p-0.5' }, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Catatan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['procedureRoom.code', 'procedureRoom.infra.name', 'note'],
+
+  delKeyNames: [
+    { key: 'mcuSrc.name', label: 'Nama' },
+  ],
+
+  components: {
+    note(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: input,
+      }
+    },
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}

app/components/app/procedure-room-order-item/list-entry.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
+import { config } from './list-entry.cfg'
+import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
+
+defineProps<{
+  data: ProcedureRoomOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  requestItem: []
+}>()
+
+</script>
+
+<template>
+  <div class="mb-4 2xl:mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Daftar Order Ruang
+    </div>
+    <DataTable class="border mb-3 2xl:mb-4"
+      v-bind="config"
+      :rows="data"
+    />
+    <div class="-mx-1 [&_button]:mx-1">
+      <Button @click="emit('requestItem')">
+        <Icon name="i-lucide-plus" />
+        Pilih Item
+      </Button>
+    </div>
+  </div>
+</template>

app/components/app/procedure-room-order/detail.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { ProcedureRoom } from '~/models/procedure-room';
+
+defineProps<{
+  data: ProcedureRoom
+}>()
+</script>
+
+<template>
+  <div class="mb-4 2xl:mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Detail Order
+    </div>
+    <DE.Block :col-count="2" mode="preview">
+      <DE.Cell>
+        <DE.Label>No. Order</DE.Label>
+        <DE.Colon />
+        <DE.Field>ORT-{{ data.id }}</DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Tgl. Order</DE.Label>
+        <DE.Colon />
+        <DE.Field>{{ data.createdAt?.substring(0, 10) }}</DE.Field>
+      </DE.Cell>
+    </DE.Block>
+  </div>
+</template>

app/components/app/procedure-room-order/form.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+
+</template>

app/components/app/procedure-room-order/list.cfg.ts

@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { ProcedureRoomOrder } from '~/models/procedure-room-order'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dsd.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'Tgl. Order' },
+    { label: 'No. Order' },
+    { label: 'Ruangan' },
+    { label: 'Status' },
+    { label: 'Resume' },
+    { label: '' },
+  ]],
+
+  keys: ['date', 'number', 'room', 'status_code', 'resume', 'action'],
+
+  delKeyNames: [
+    { key: 'createdAt', label: 'Tgl. Order' },
+    { key: 'id', label: 'No. Order' },
+  ],
+
+  parses: {
+    date: (rec: any) => {
+      const recX = rec as ProcedureRoomOrder
+      return recX.createdAt ? recX.createdAt.substring(0, 10) : ''
+
+    },
+    number: (rec: any) => {
+      const recX = rec as ProcedureRoomOrder
+      return `ORT-${recX.id}`
+    },
+    room: (rec: any) => {
+      const recX = rec as ProcedureRoomOrder
+      let result = ''
+      if (recX.items && recX.items.length > 0) {
+        recX.items.forEach((item, idx) => {
+          result += item.infra?.name ? `<div>${item.infra.name}</div>` : ''
+        })
+      }
+      // recX.ite
+      return ''
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/procedure-room-order/list.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// Components
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.cfg'
+
+defineProps<{
+  data: any[]
+  paginationMeta: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <DataTable
+    v-bind="config"
+    :rows="data"
+    :skeleton-size="paginationMeta?.pageSize"
+    class="mb-4 border"
+  />
+  <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+</template>

app/components/app/procedure-room/multi-opt-picker.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ProcedureRoom } from '~/models/procedure-room';
+import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
+
+const dataModel = defineModel({ type: Array as PropType<ProcedureRoomOrderItem[]>, required: true })
+defineProps<{
+  data: ProcedureRoom[]
+}>()
+
+const emit = defineEmits<{
+  pick: [item: ProcedureRoom]
+}>()
+
+function pick(item: ProcedureRoom) {
+  emit('pick', item)
+}
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Daftar Pilihan Ruang Tindakan
+    </div>
+    <div class="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2 2xl:gap-2">
+      <!-- <div v-for="item, idx in data" :key="idx" class="flex gap-2"> -->
+      <div v-if="data.length > 0" v-for="item, idx in data">
+        <Button
+          :variant="dataModel.some(e => e.procedureRoom.code === item.code) ? 'default' : 'outline'"
+          class="w-full"
+          type="button"
+          @click="pick(item)"
+        >
+          {{ item.infra?.name }}
+        </Button>
+      </div>
+      <div v-else  class="col-span-full text-center text-sm text-gray-500">
+        <div>Tidak ada data ruang tindakan.</div>
+      </div>
+    </div>
+  </div>
+</template>

app/components/app/procedure-room/picker.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ProcedureRoom } from '~/models/procedure-room';
+import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
+
+const dataModel = defineModel({ type: Array as PropType<ProcedureRoomOrderItem[]>, required: true })
+defineProps<{
+  data: ProcedureRoom[]
+  pickMode: 'single' | 'multi'
+}>()
+
+const emit = defineEmits<{
+  pick: [item: ProcedureRoom]
+}>()
+
+function pick(item: ProcedureRoom) {
+  emit('pick', item)
+}
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Daftar Pilihan Ruang Tindakan
+    </div>
+    <div class="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2 2xl:gap-2">
+      <!-- <div v-for="item, idx in data" :key="idx" class="flex gap-2"> -->
+      <div v-if="data.length > 0" v-for="item, idx in data">
+        <Button
+          :variant="dataModel.some(e => e.procedureRoom.code === item.code) ? 'default' : 'outline'"
+          class="w-full"
+          type="button"
+          @click="pick(item)"
+        >
+          {{ item.infra?.name }}
+        </Button>
+      </div>
+      <div v-else  class="col-span-full text-center text-sm text-gray-500">
+        <div>Tidak ada data ruang tindakan.</div>
+      </div>
+    </div>
+  </div>
+</template>

app/components/app/procedure-room/single-opt-picker.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ProcedureRoom } from '~/models/procedure-room';
+import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
+
+const dataModel = defineModel({ type: Array as PropType<ProcedureRoomOrderItem[]>, required: true })
+defineProps<{
+  data: ProcedureRoom[]
+}>()
+
+const emit = defineEmits<{
+  pick: [item: ProcedureRoom]
+}>()
+
+function pick(item: ProcedureRoom) {
+  emit('pick', item)
+}
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Daftar Pilihan Ruang Tindakan
+    </div>
+    <div class="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2 2xl:gap-2">
+      <!-- <div v-for="item, idx in data" :key="idx" class="flex gap-2"> -->
+      <div v-if="data.length > 0" v-for="item, idx in data">
+        <Button
+          :variant="dataModel.some(e => e.procedureRoom.code === item.code) ? 'default' : 'outline'"
+          class="w-full"
+          type="button"
+          @click="pick(item)"
+        >
+          {{ item.infra?.name }}
+        </Button>
+      </div>
+      <div v-else  class="col-span-full text-center text-sm text-gray-500">
+        <div>Tidak ada data ruang tindakan.</div>
+      </div>
+    </div>
+  </div>
+</template>

app/components/app/procedure-room/switcher.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { procedureRoomTypeCodes } from '~/const/key-val/clinical'
+
+const model = defineModel()
+model.value = 'procedure'
+
+const emit = defineEmits<{
+  pick: [type_code: string]
+}>()
+
+function pick(type_code: string) {
+  model.value = type_code
+  emit('pick', type_code)
+}
+
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Jenis Ruang Tindakan
+    </div>
+    <div class="-mx-1 [&_button]:mx-1 ">
+      <Button v-for="item, key in procedureRoomTypeCodes" :variant="model === key ? 'default' : 'outline'" @click="pick(key)">
+        {{ item }}
+      </Button>
+    </div>
+  </div>
+</template>

app/components/app/sep/action-history.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { inject, type Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+// Components
+import { Button } from '~/components/pub/ui/button'
+
+const props = defineProps<{
+  rec: { sepNumber: string; }
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const record = props.rec || {}
+const recSepId = inject('rec_sep_id') as Ref<string>
+
+function handleSelection() {
+  recSepId.value = record.sepNumber || ''
+  const pathUrl = `/integration/bpjs-vclaim/sep/${record.sepNumber || ''}/link?source-path=${route.path}`
+  router.push(pathUrl)
+}
+</script>
+
+<template>
+  <Button
+    variant="outline"
+    type="button"
+    class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+    @click="handleSelection"
+  >
+    Detail SEP
+  </Button>
+</template>

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

@@ -24,11 +24,11 @@ import { useForm } from 'vee-validate'
 import { refDebounced } from '@vueuse/core'
 
 const props = defineProps<{
+  mode?: string
   isLoading?: boolean
   isReadonly?: boolean
   isService?: boolean
-  isShowPatient?: boolean;
+  isShowPatient?: boolean
-  mode?: string
   doctors: any[]
   diagnoses: any[]
   facilitiesFrom: any[]
@@ -102,14 +102,17 @@ const titleLetterNumber = computed(() => (admissionType.value === '3' ? 'Surat K
 const titleLetterDate = computed(() =>
   admissionType.value === '3' ? 'Tanggal Surat Kontrol' : 'Tanggal Surat Rujukan',
 )
+const mode = props.mode !== undefined ? props.mode : 'add'
+const attendingDoctorName = ref('')
+const diagnosisName = ref('')
 const isAccidentally = computed(() => accident.value === '1' || accident.value === '2')
 const isProvinceSelected = computed(() => accidentProvince.value !== '')
 const isCitySelected = computed(() => accidentCity.value !== '')
-const mode = props.mode !== undefined ? props.mode : 'add'
 const isLoading = props.isLoading !== undefined ? props.isLoading : false
 const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 const isService = ref(props.isService || false)
 const isShowPatient = ref(props.isShowPatient || false)
+const isShowSpecialist = ref(false)
 const isDateReload = ref(false)
 
 // Debounced search for bpjsNumber and nationalId
@@ -129,32 +132,138 @@ async function onFetchChildren(parentId: string): Promise<void> {
   console.log('onFetchChildren', parentId)
 }
 
+const onBack = () => {
+  emit('event', 'back')
+}
+
+const onSaveNumber = () => {
+  emit('event', 'save-sep-number', { sepNumber: props?.objects?.sepNumber || '' })
+}
+
 // Submit handler
 const onSubmit = handleSubmit((values) => {
-  console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
   emit('event', 'save-sep', values)
 })
 
+const onInitialized = (objects: any) => {
+  sepDate.value = objects?.registerDate || new Date().toISOString().substring(0, 10)
+  cardNumber.value = objects?.cardNumber || '-'
+  nationalId.value = objects?.nationalIdentity || '-'
+  medicalRecordNumber.value = objects?.medicalRecordNumber || '-'
+  patientName.value = objects?.patientName || '-'
+  phoneNumber.value = objects?.phoneNumber || '-'
+  if (objects?.sepType === 'internal') {
+    admissionType.value = '4'
+  }
+  if (objects?.sepType === 'external') {
+    admissionType.value = '1'
+  }
+  if (objects?.diagnosisName) {
+    diagnosisName.value = objects?.diagnosisName
+  }
+  // Patient data
+  if (objects?.serviceType) {
+    serviceType.value = objects?.serviceType
+  }
+  if (objects?.fromClinic) {
+    fromClinic.value = objects?.fromClinic
+  }
+  if (objects?.destinationClinic) {
+    destinationClinic.value = objects?.destinationClinic
+  }
+  // Doctor & Support data
+  if (objects?.attendingDoctor) {
+    attendingDoctor.value = objects?.attendingDoctor
+  }
+  if (objects?.attendingDoctorName) {
+    attendingDoctorName.value = objects?.attendingDoctorName
+  }
+  if (objects?.cob) {
+    cob.value = objects?.cob
+  }
+  if (objects?.cataract) {
+    cataract.value = objects?.cataract
+  }
+  if (objects?.clinicExcecutive) {
+    clinicExcecutive.value = objects?.clinicExcecutive
+  }
+  if (objects?.procedureType) {
+    procedureType.value = objects?.procedureType
+  }
+  if (objects?.supportCode) {
+    supportCode.value = objects?.supportCode
+  }
+  // Class & Payment data
+  if (objects?.classLevel) {
+    classLevel.value = objects?.classLevel
+  }
+  if (objects?.classLevelUpgrade) {
+    classLevelUpgrade.value = objects?.classLevelUpgrade
+  }
+  if (objects?.classPaySource) {
+    classPaySource.value = objects?.classPaySource
+  }
+  if (objects?.responsiblePerson) {
+    responsiblePerson.value = objects?.responsiblePerson
+  }
+  // Accident data
+  if (objects?.trafficAccident) {
+    accident.value = objects?.trafficAccident
+  }
+  if (objects?.lpNumber) {
+    lpNumber.value = objects?.lpNumber
+  }
+  if (objects?.accidentDate) {
+    accidentDate.value = objects?.accidentDate
+  }
+  if (objects?.accidentNote) {
+    accidentNote.value = objects?.accidentNote
+  }
+  if (objects?.accidentProvince) {
+    accidentProvince.value = objects?.accidentProvince
+  }
+  if (objects?.accidentCity) {
+    accidentCity.value = objects?.accidentCity
+  }
+  if (objects?.accidentDistrict) {
+    accidentDistrict.value = objects?.accidentDistrict
+  }
+  if (objects?.suplesi) {
+    suplesi.value = objects?.suplesi
+  }
+  if (objects?.suplesiNumber) {
+    suplesiNumber.value = objects?.suplesiNumber
+  }
+  // Visit purpose & Assessment
+  if (objects?.purposeOfVisit) {
+    purposeOfVisit.value = objects?.purposeOfVisit
+  }
+  if (objects?.serviceAssessment) {
+    serviceAssessment.value = objects?.serviceAssessment
+  }
+  // Note & Specialist
+  if (objects?.note) {
+    note.value = objects?.note
+  }
+  if (objects?.subSpecialistId) {
+    subSpecialistId.value = objects?.subSpecialistId
+  }
+  // Referral letter
+  if (objects?.referralLetterNumber) {
+    referralLetterNumber.value = objects?.referralLetterNumber
+  }
+}
+
 watch(props, (value) => {
   const objects = value.objects || ({} as any)
   if (Object.keys(objects).length > 0) {
-    sepDate.value = objects?.registerDate || new Date().toISOString().substring(0, 10)
+    onInitialized(objects)
-    cardNumber.value = objects?.cardNumber || '-'
-    nationalId.value = objects?.nationalIdentity || '-'
-    medicalRecordNumber.value = objects?.medicalRecordNumber || '-'
-    patientName.value = objects?.patientName || '-'
-    phoneNumber.value = objects?.phoneNumber || '-'
-    if (objects?.sepType === 'internal') {
-      admissionType.value = '4'
-    }
-    if (objects?.sepType === 'external') {
-      admissionType.value = '1'
-    }
-    if (objects?.diagnoseLabel) {
-      initialDiagnosis.value = objects?.diagnoseLabel
-    }
     isDateReload.value = true
     setTimeout(() => {
+      if (objects?.sepDate) {
+        sepDate.value = objects?.sepDate
+        referralLetterDate.value = objects?.sepDate
+      }
       if (objects?.letterDate) {
         referralLetterDate.value = objects?.letterDate
       }
@@ -206,10 +315,11 @@ onMounted(() => {
           </Label>
           <Field :errMessage="errors.sepDate">
             <DatepickerSingle
+              v-if="!isDateReload"
               id="sepDate"
               v-model="sepDate"
               v-bind="sepDateAttrs"
-              :disabled="true"
+              :disabled="isLoading || isReadonly"
               placeholder="Pilih tanggal sep"
             />
           </Field>
@@ -284,7 +394,7 @@ onMounted(() => {
               id="cardNumber"
               v-model="cardNumber"
               v-bind="cardNumberAttrs"
-              :disabled="false"
+              :disabled="isLoading || isReadonly"
             />
           </Field>
         </Cell>
@@ -299,7 +409,7 @@ onMounted(() => {
               id="nationalId"
               v-model="nationalId"
               v-bind="nationalIdAttrs"
-              :disabled="false"
+              :disabled="isLoading || isReadonly"
             />
           </Field>
         </Cell>
@@ -378,6 +488,7 @@ onMounted(() => {
                 "
               />
               <Button
+                v-if="!isReadonly"
                 variant="outline"
                 type="button"
                 class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
@@ -406,7 +517,7 @@ onMounted(() => {
               id="referralLetterDate"
               v-model="referralLetterDate"
               v-bind="referralLetterDateAttrs"
-              :disabled="true"
+              :disabled="isLoading || isReadonly"
               placeholder="Pilih tanggal surat"
             />
           </Field>
@@ -417,11 +528,12 @@ onMounted(() => {
             Klinik Eksekutif
             <span class="text-red-500">*</span>
           </Label>
-          <Field :errMessage="errors.cob">
+          <Field :errMessage="errors.clinicExcecutive">
             <RadioGroup
               v-model="clinicExcecutive"
               v-bind="clinicExcecutiveAttrs"
               class="flex items-center gap-2"
+              :disabled="isLoading || isReadonly"
             >
               <div class="flex items-center space-x-2">
                 <RadioGroupItem
@@ -481,7 +593,7 @@ onMounted(() => {
           </Field>
         </Cell>
 
-         <Cell>
+        <Cell v-if="!isReadonly && isShowSpecialist">
           <Label height="compact">
             Spesialis / Subspesialis
             <span class="text-red-500">*</span>
@@ -504,6 +616,7 @@ onMounted(() => {
           </Label>
           <Field :errMessage="errors.attendingDoctor">
             <Combobox
+              v-if="!isReadonly"
               id="attendingDoctor"
               v-model="attendingDoctor"
               v-bind="attendingDoctorAttrs"
@@ -514,6 +627,12 @@ onMounted(() => {
               empty-message="Item tidak ditemukan"
               @update:searchText="emit('fetch', { menu: 'doctor', value: $event })"
             />
+            <Input
+              v-else
+              v-model="attendingDoctorName"
+              v-bind="attendingDoctorAttrs"
+              :disabled="isLoading || isReadonly"
+            />
           </Field>
         </Cell>
 
@@ -524,6 +643,7 @@ onMounted(() => {
           </Label>
           <Field :errMessage="errors.initialDiagnosis">
             <Combobox
+              v-if="!isReadonly"
               id="initialDiagnosis"
               v-model="initialDiagnosis"
               v-bind="initialDiagnosisAttrs"
@@ -534,6 +654,12 @@ onMounted(() => {
               empty-message="Item tidak ditemukan"
               @update:searchText="emit('fetch', { menu: 'diagnosis', value: $event })"
             />
+            <Input
+              v-else
+              v-model="diagnosisName"
+              v-bind="initialDiagnosisAttrs"
+              :disabled="isLoading || isReadonly"
+            />
           </Field>
         </Cell>
       </Block>
@@ -658,6 +784,7 @@ onMounted(() => {
               v-model="cob"
               v-bind="cobAttrs"
               class="flex items-center gap-2"
+              :disabled="isLoading || isReadonly"
             >
               <div class="flex items-center space-x-2">
                 <RadioGroupItem
@@ -668,7 +795,7 @@ onMounted(() => {
               </div>
               <div class="flex items-center space-x-2">
                 <RadioGroupItem
-                  value="Tidak"
+                  value="no"
                   id="cob-no"
                 />
                 <Label for="cob-no">Tidak</Label>
@@ -687,6 +814,7 @@ onMounted(() => {
               v-model="cataract"
               v-bind="cataractAttrs"
               class="flex items-center gap-2"
+              :disabled="isLoading || isReadonly"
             >
               <div class="flex items-center space-x-2">
                 <RadioGroupItem
@@ -756,7 +884,7 @@ onMounted(() => {
               id="accidentDate"
               v-model="accidentDate"
               v-bind="accidentDateAttrs"
-              :disabled="true"
+              :disabled="isLoading || isReadonly"
               placeholder="Pilih tanggal kejadian"
             />
           </Field>
@@ -966,6 +1094,7 @@ onMounted(() => {
       <!-- Actions -->
       <div class="mt-6 flex justify-end gap-2">
         <Button
+          v-if="props.mode === 'detail'"
           variant="ghost"
           type="button"
           class="h-[40px] min-w-[120px] text-orange-400 hover:bg-green-50"
@@ -978,6 +1107,7 @@ onMounted(() => {
           Riwayat SEP
         </Button>
         <Button
+          v-if="props.mode === 'detail'"
           variant="outline"
           type="button"
           class="h-[40px] min-w-[120px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50 hover:text-orange-400"
@@ -989,6 +1119,7 @@ onMounted(() => {
           Preview
         </Button>
         <Button
+          v-if="props.mode === 'add'"
           type="button"
           class="h-[40px] min-w-[120px] text-white"
           :disabled="isLoading"
@@ -1000,6 +1131,32 @@ onMounted(() => {
           />
           Simpan
         </Button>
+        <Button
+          v-if="props.mode === 'detail'"
+          type="button"
+          class="h-[40px] min-w-[120px] text-white"
+          :disabled="isLoading"
+          @click="onBack"
+        >
+          <Icon
+            name="i-lucide-chevron-left"
+            class="h-5 w-5"
+          />
+          Kembali
+        </Button>
+        <Button
+          v-if="props.mode === 'link'"
+          type="button"
+          class="h-[40px] min-w-[120px] text-white"
+          :disabled="isLoading"
+          @click="onSaveNumber"
+        >
+          <Icon
+            name="i-lucide-save"
+            class="h-5 w-5"
+          />
+          Terapkan
+        </Button>
       </div>
     </form>
   </div>

app/components/app/sep/list-cfg.history.ts

@@ -9,21 +9,25 @@ export interface SepHistoryData {
   careClass: string
 }
 
+const ActionHistory = defineAsyncComponent(() => import('~/components/app/sep/action-history.vue'))
+
+const keysDefault = ['sepNumber', 'sepDate', 'referralNumber', 'diagnosis', 'serviceType', 'careClass']
+const colsDefault = [{ width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }]
+const headersDefault = [
+  { label: 'NO. SEP' },
+  { label: 'TGL. SEP' },
+  { label: 'NO. RUJUKAN' },
+  { label: 'DIAGNOSIS AWAL' },
+  { label: 'JENIS PELAYANAN' },
+  { label: 'KELAS RAWAT' },
+]
+
 export const config: Config = {
-  cols: [{ width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }],
+  cols: [...colsDefault],
 
-  headers: [
+  headers: [[...headersDefault]],
-    [
-      { label: 'NO. SEP' },
-      { label: 'TGL. SEP' },
-      { label: 'NO. RUJUKAN' },
-      { label: 'DIAGNOSIS AWAL' },
-      { label: 'JENIS PELAYANAN' },
-      { label: 'KELAS RAWAT' },
-    ],
-  ],
 
-  keys: ['sepNumber', 'sepDate', 'referralNumber', 'diagnosis', 'serviceType', 'careClass'],
+  keys: [...keysDefault],
 
   delKeyNames: [{ key: 'code', label: 'Kode' }],
 
@@ -33,3 +37,27 @@ export const config: Config = {
 
   htmls: {},
 }
+
+export const configDetail: Config = {
+  cols: [...colsDefault, { width: 50 }],
+
+  headers: [[...headersDefault, { label: 'AKSI' }]],
+
+  keys: [...keysDefault, 'action'],
+
+  delKeyNames: [{ key: 'code', label: 'Kode' }],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: { ...(rec as object) },
+        component: ActionHistory,
+      }
+    },
+  },
+
+  htmls: {},
+}

app/components/app/sep/list-cfg.ts

@@ -1,9 +1,7 @@
 import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
-type SepDto = any
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dd.vue'))
-
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
 export const config: Config = {
   cols: [

app/components/app/sep/list-history.vue

@@ -7,9 +7,10 @@ import type { SepHistoryData } from './list-cfg.history'
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { config } from './list-cfg.history'
+import { config, configDetail } from './list-cfg.history'
 
 const props = defineProps<{
+  isAction?: boolean
   data: SepHistoryData[]
   paginationMeta?: PaginationMeta
 }>()
@@ -25,7 +26,7 @@ function handlePageChange(page: number) {
 
 <template>
   <PubMyUiDataTable
-    v-bind="config"
+    v-bind="isAction ? configDetail : config"
     :rows="props.data"
   />
   <PaginationView

app/components/app/sep/view-history.vue

@@ -16,6 +16,7 @@ import type { PaginationMeta } from '~/components/pub/my-ui/pagination/paginatio
 
 const props = defineProps<{
   open: boolean
+  isAction?: boolean
   histories: Array<SepHistoryData>
   paginationMeta?: PaginationMeta
 }>()
@@ -37,7 +38,7 @@ const emit = defineEmits<{
       </DialogHeader>
 
       <div class="overflow-x-auto rounded-lg border">
-        <ListHistory :data="histories" :pagination-meta="paginationMeta" />
+        <ListHistory :data="histories" :is-action="props.isAction || false" :pagination-meta="paginationMeta" />
       </div>
 
       <DialogFooter></DialogFooter>

app/components/app/surgery-report/_common/history-dialog.vue

@@ -42,7 +42,7 @@ const itemsCount = computed(() => items.length || 0)
             {{ item?.createdAt.toLocaleDateString('id-ID') }}
           </time>
           <h1 :class="cn('text-gray-500 dark:text-gray-400', '')">Ditambahkan Oleh : {{ item.updatedBy }}</h1>
-          <NuxtLink class="mt-1 text-orange-500" :to="`surgery-report/${item.id}`">
+          <NuxtLink class="mt-1 text-orange-500" :to="`process?menu=surgery-report&mode=list&record-id=${item.id}`">
             Lihat Detail
           </NuxtLink>
         </div>

app/components/app/vaccine-data/_common/select-date.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+  isWithTime?: boolean
+}>()
+
+const {
+  fieldName = 'birthDate',
+  label = 'Tanggal Lahir',
+  placeholder = 'Pilih tanggal lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Reactive variables for age calculation
+const patientAge = ref<string>('Masukkan tanggal lahir')
+
+// Function to calculate age with years, months, and days
+function calculateAge(birthDate: string | Date | undefined): string {
+  if (!birthDate) {
+    return 'Masukkan tanggal lahir'
+  }
+
+  try {
+    let dateObj: Date
+
+    if (typeof birthDate === 'string') {
+      dateObj = parseISO(birthDate)
+    } else {
+      dateObj = birthDate
+    }
+
+    const today = new Date()
+
+    // Calculate years, months, and days
+    const totalYears = differenceInYears(today, dateObj)
+
+    // Calculate remaining months after years
+    const yearsPassed = new Date(dateObj)
+    yearsPassed.setFullYear(yearsPassed.getFullYear() + totalYears)
+    const remainingMonths = differenceInMonths(today, yearsPassed)
+
+    // Calculate remaining days after years and months
+    const monthsPassed = new Date(yearsPassed)
+    monthsPassed.setMonth(monthsPassed.getMonth() + remainingMonths)
+    const remainingDays = differenceInDays(today, monthsPassed)
+
+    // Format the result
+    const parts = []
+    if (totalYears > 0) parts.push(`${totalYears} Tahun`)
+    if (remainingMonths > 0) parts.push(`${remainingMonths} Bulan`)
+    if (remainingDays > 0) parts.push(`${remainingDays} Hari`)
+
+    return parts.length > 0 ? parts.join(' ') : '0 Hari'
+  } catch {
+    return 'Masukkan tanggal lahir'
+  }
+}
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              id="birthDate"
+              :type="props.isWithTime ? 'datetime-local' : 'date'"
+              min="1900-01-01"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :disabled="isDisabled"
+              @update:model-value="
+                (value: string | number) => {
+                  const dateStr = typeof value === 'number' ? String(value) : value
+                  patientAge = calculateAge(dateStr)
+                }
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/vaccine-data/_common/select-vaccine-type.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { PrbProgramTypeOptList } from '~/lib/constants'
+import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+onMounted(() => {
+  
+})
+
+// function handleDpjpChange(selected: string) {
+//   selectedDpjpId.value = selected ?? null
+// }
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="PrbProgramTypeOptList"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/vaccine-data/detail.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import { type Variants, Badge } from '~/components/pub/ui/badge'
+import { cn, } from '~/lib/utils'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { VaccineData } from '~/models/vaccine-data';
+
+// #region Props & Emits
+const props = defineProps<{
+  instance: VaccineData | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const dummy = [
+  {
+    id: 1,
+    number: 1,
+    name: 'Operasi',
+    code: 'OP-001'
+  }
+]
+
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// Computed addresses from nested data
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+function onClick() {
+  emit('click')
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <article :class="cn('mb-5 space-y-1',)">
+    <DetailRow label="Jenis Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="Tanggal Pemberian Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="Tanggal Kedaluwarsa Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="Nomor Batch Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="Dosis Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="Dosis Ke">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="Lokasi Injeksi">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+    <DetailRow label="Tanggal Terlaksana">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
+  </article>  
+
+    <div class="border-t-1 py-2 flex justify-end border-t-slate-300">
+      <PubMyUiNavFooterBa @click="onClick" />
+    </div>
+</template>
+
+<style scoped></style>

app/components/app/vaccine-data/entry.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import SelectDate from './_common/select-date.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectVaccineType from './_common/select-vaccine-type.vue'
+
+const props = withDefaults(defineProps<{
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+}>(), {
+
+})
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ? initialValues : {}"
+  >
+    <DE.Block :col-count="3" :cell-flex="false">
+      <SelectVaccineType :errors="errors"
+        field-name="a1"
+        label="Jenis Vaksin" placeholder="Pilih Jenis Vaksin"
+        is-required
+      />
+      <SelectDate
+        field-name="a2"
+        label="Tanggal Pemberian Vaksin"
+        :errors="errors"
+        is-with-time
+      />
+      <SelectDate
+        field-name="a3"
+        label="Tanggal Kedaluwarsa Vaksin"
+        :errors="errors"
+        is-with-time
+      />
+    </DE.Block>
+    
+    <DE.Block :col-count="2" :cell-flex="false">
+      <InputBase :errors="errors"
+        field-name="a4"
+        label="Nomor Batch Vaksin" placeholder="Isi Nomor Batch Vaksin"
+      />
+      <InputBase :errors="errors"
+        field-name="a5"
+        label="Dosis Vaksin" placeholder="Isi Dosis Vaksin"
+        right-label="ml"
+        numeric-only
+      />
+      <InputBase :errors="errors"
+        field-name="a6"
+        label="Dosis Ke" placeholder="Isi Dosis Ke"
+        numeric-only
+      />
+      <InputBase :errors="errors"
+        field-name="a7"
+        label="Lokasi Injeksi" placeholder="Isi Lokasi Injeksi"
+      />
+    </DE.Block>
+  </Form>
+</template>

app/components/app/vaccine-data/list-doctor.cfg.ts

@@ -0,0 +1,53 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import actionDoctor from '~/components/pub/my-ui/data/dropdown-action-dd.vue'
+import actionNursePhysio from '~/components/pub/my-ui/data/dropdown-action-detail.vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dd.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {width: 50}, ],
+
+  headers: [
+    [
+      { label: 'Jenis Vaksin' },
+      { label: 'Tanggal Pemberian Vaksin' },
+      { label: 'Tanggal Kedaluwarsa Vaksin' },
+      { label: 'Dosis Ke' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['name1', 'date', 'date', 'name2', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+
+  },
+}

app/components/app/vaccine-data/list-nurse-physio.cfg.ts

@@ -0,0 +1,53 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import actionDoctor from '~/components/pub/my-ui/data/dropdown-action-dd.vue'
+import actionNursePhysio from '~/components/pub/my-ui/data/dropdown-action-detail.vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-detail.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {width: 50}, ],
+
+  headers: [
+    [
+      { label: 'Jenis Vaksin' },
+      { label: 'Tanggal Pemberian Vaksin' },
+      { label: 'Tanggal Kedaluwarsa Vaksin' },
+      { label: 'Dosis Ke' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['name1', 'date', 'date', 'name2', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+
+  },
+}

app/components/app/vaccine-data/list.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config as configDoctor } from './list-doctor.cfg'
+import { config as configNursePhysio } from './list-nurse-physio.cfg'
+
+const props = withDefaults(defineProps<{
+  data: any[]
+  paginationMeta: PaginationMeta
+}>(), {
+  
+})
+
+const { user, } = useUserStore()
+const tableConfig = computed(() => {
+  if(user.activeRole === 'emp|doc' || user.activeRole === 'system') {
+    return configDoctor
+  } else {
+    return configNursePhysio
+  }
+})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="tableConfig"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>

app/components/content/control-letter/add.vue

@@ -10,13 +10,14 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import { type ControlLetter } from '~/models/control-letter'
 
 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
   callbackUrl?: string
-}>()
+}>(), {
+
+})
 
 // form related state
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 const controlLetterForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
@@ -72,7 +73,7 @@ async function composeFormData(): Promise<ControlLetter> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = controlLetter?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
   return new Promise((resolve) => resolve(formData))
 }
 // #endregion region

app/components/content/control-letter/detail.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import { withBase } from '~/models/_base'
 import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
-import type { Patient } from '~/models/patient'
-import type { Person } from '~/models/person'
 import { getDetail } from '~/services/control-letter.service'
 
 // Components
@@ -11,18 +8,19 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import type { ControlLetter } from '~/models/control-letter'
 
 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
-}>()
+  encounter_id: number
+  record_id: number 
+  redirectToForm?: (myRecord_id?: any) => void
+}>(), {
+  redirectToForm: () => {},
+})
 
 // #endregion
 
 // #region State & Computed
 
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
-
 const controlLetter = ref<ControlLetter | null>(null)
 
 const headerPrep: HeaderPrep = {
@@ -34,7 +32,7 @@ const headerPrep: HeaderPrep = {
 
 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(controlLetterId, {
+  const result = await getDetail(props.record_id, {
     includes: "unit,specialist,subspecialist,doctor-employee-person",
   })
   if (result.success) {
@@ -54,11 +52,7 @@ function goBack() {
 function handleAction(type: string) {
   switch (type) {
     case 'edit':
-      // TODO: Handle edit action
+      props.redirectToForm(props.record_id)
-      navigateTo({
-        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
-        params: { id: encounterId, "control_letter_id": controlLetterId },
-      })
       break
 
     case 'back':

app/components/content/control-letter/edit.vue

@@ -1,17 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import type { Patient, genPatientProps } from '~/models/patient'
 import type { ExposedForm } from '~/types/form'
-import type { PatientBase } from '~/models/patient'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
-import { genPatient } from '~/models/patient'
-import { PatientSchema } from '~/schemas/patient.schema'
-import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
-import { PersonAddressSchema } from '~/schemas/person-address.schema'
-import { PersonContactListSchema } from '~/schemas/person-contact.schema'
-import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
-import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
-import { uploadAttachment } from '~/services/patient.service'
 import { getDetail, update } from '~/services/control-letter.service'
 
 import {
@@ -26,27 +16,26 @@ import {
 } from '~/handlers/control-letter.handler'
 
 import { toast } from '~/components/pub/ui/toast'
-import { withBase } from '~/models/_base'
-import type { Person } from '~/models/person'
 import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import type { ControlLetter } from '~/models/control-letter'
 import { ControlLetterSchema } from '~/schemas/control-letter.schema'
 import { formatDateYyyyMmDd } from '~/lib/date'
 
 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
   callbackUrl?: string
-}>()
+  record_id: number 
+}>(), {
+
+})
 
 // form related state
 const controlLetterForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
 // #region State & Computed
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
 
 const isConfirmationOpen = ref(false)
 const controlLetter = ref({})
@@ -58,7 +47,7 @@ const selectedSubSpecialistId = ref<number|null>(null)
 
 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(controlLetterId)
+  const result = await getDetail(props.record_id)
   if (result.success) {
     const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
     selectedUnitId.value = responseData?.unit_code
@@ -78,7 +67,7 @@ function goBack() {
 
 async function handleConfirmAdd() {
   const response = await handleActionEdit(
-    controlLetterId,
+    props.record_id,
     await composeFormData(),
     () => { },
     () => { },
@@ -99,7 +88,7 @@ async function composeFormData(): Promise<ControlLetter> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = controlLetter?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
   return new Promise((resolve) => resolve(formData))
 }
 // #endregion region

app/components/content/control-letter/list.vue

@@ -13,24 +13,28 @@ import type { Encounter } from '~/models/encounter'
 import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
 // import type { PagePermission } from '~/models/role'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-import { permissions } from '~/const/page-permission/chemoteraphy'
+import { permissions } from '~/const/page-permission/ambulatory'
 import { unauthorizedToast } from '~/lib/utils'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 import HistoryDialog from '~/components/app/control-letter/history-dialog.vue'
+import type { RoleAccesses } from '~/models/role'
 // #endregion
 
 // #region Permission
-const roleAccess = permissions['/rehab/encounter'] || {}
+const roleAccess: RoleAccesses = permissions['/ambulatory/encounter'] || {}
 const { getPagePermissions } = useRBAC()
 const pagePermission = getPagePermissions(roleAccess)
 
 // #region State
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
-  encounter?: Encounter
+  encounter_id: number
-}>()
+  redirectToForm?: (myRecord_id?: any) => void
-const route = useRoute()
+  redirectToDetail?: (myRecord_id: string|number) => void
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+}>(), {
+  redirectToForm: () => { },
+  redirectToDetail: () => { }
+})
 
 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
   fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
@@ -73,10 +77,11 @@ const headerPrep: HeaderPrep = {
 if (pagePermission.canCreate) {
   headerPrep.addNav = {
     label: "Surat Kontrol",
-    onClick: () => navigateTo({
+    onClick: () => {
-        name: 'rehab-encounter-id-control-letter-add',
+      console.log('redirectToForm')
-        params: { id: encounterId },
+      console.log(props.redirectToForm())
-      }),
+      props.redirectToForm()
+    },
   }
 }
 // #endregion
@@ -136,18 +141,12 @@ provide('table_data_loader', isLoading)
 watch([recId, recAction, timestamp], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      navigateTo({
+      props.redirectToDetail(recId.value)
-        name: 'rehab-encounter-id-control-letter-control_letter_id',
-        params: { id: encounterId, "control_letter_id": recId.value },
-      })
       break
 
     case ActionEvents.showEdit:
-      if(pagePermission.canUpdate){
+      if(pagePermission.canUpdate){ 
-        navigateTo({
+        props.redirectToForm(recId.value)
-          name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
-          params: { id: encounterId, "control_letter_id": recId.value },
-        })
       } else {
         unauthorizedToast()
       }
@@ -186,7 +185,7 @@ watch([recId, recAction, timestamp], () => {
         @click="isHistoryDialogOpen = true">
         <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Program Nasional</Button>
     </div>
-
+    
     <AppControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
     <Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
@@ -212,7 +211,7 @@ watch([recId, recAction, timestamp], () => {
         </div>
       </template>
     </RecordConfirmation>
-
+    
       <HistoryDialog
         v-model:is-modal-open="isHistoryDialogOpen"
         :data="historyData.data.value"

app/components/content/control-letter/main.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Detail from './detail.vue'
+import Add from './add.vue'
+import Edit from './edit.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list && !crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Detail v-else-if="crudQueryParams.mode === crudQueryParamsMode.list && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId"
+    :redirectToForm="goToEntry"/>
+  <Add v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && !crudQueryParams.recordId"
+    :encounter_id="encounter_id" />
+  <Edit v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>

app/components/content/cp-lab-order/list.vue

@@ -21,7 +21,7 @@ import {
 
 // Apps
 import { getList, getDetail } from '~/services/mcu-order.service'
-import List from '~/components/app/mcu-order/list.vue'
+import List from '~/components/app/mcu-order/micro-list.vue'
 import type { McuOrder } from '~/models/mcu-order'
 
 const route = useRoute()
@@ -55,7 +55,7 @@ const {
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'Order Lab PK',
+  title: 'Order Lab Mikro',
   icon: 'i-lucide-box',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',

app/components/content/cprj/list.vue

@@ -63,7 +63,7 @@ const {
   fetchFn: async ({ page, search }) => {
     const result = await getList({
       'encounter-id': id,
-      typeCode: 'dev-record',
+      'type-code': 'dev-record',
       includes: 'encounter',
       search,
       page,

app/components/content/document-upload/add.vue

@@ -10,13 +10,13 @@ import { toFormData } from '~/lib/utils'
 import { uploadAttachment } from '~/services/supporting-document.service'
 
 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
-  callbackUrl?: string
+  encounter_id: number 
-}>()
+}>(), {
+
+})
 
 // form related state
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 const inputForm = ref<ExposedForm<any> | null>(null)
 const { user } = useUserStore()
 // #endregion
@@ -43,20 +43,14 @@ async function handleConfirmAdd() {
   const inputFormData: FormData = toFormData(inputData)
 
   const response = await handleActionSave(inputFormData, () => { }, () => { }, toast, )
-  const data = (response?.body?.data ?? null)
+  // const data = (response?.body?.data ?? null)
-  if (!data) return
-
-  // // If has callback provided redirect to callback with patientData
-  if (props.callbackUrl) {
-    navigateTo(props.callbackUrl + '?control-letter-id=' + inputData.id)
-  }
   goBack()
 }
 
 async function composeFormData(): Promise<any> {
   inputForm.value?.setValues({
     ...inputForm.value?.values,
-    ref_id: encounterId,
+    ref_id: props.encounter_id,
     upload_employee_id: user.employee_id
   })
 
@@ -83,13 +77,7 @@ async function handleActionClick(eventType: string) {
     isConfirmationOpen.value = true
   }
 
-  if (eventType === 'back') {
+  if (eventType === 'back') goBack()
-    if (props.callbackUrl) {
-      await navigateTo(props.callbackUrl)
-      return
-    }
-    goBack()
-  }
 }
 
 function handleCancelAdd() {

app/components/content/document-upload/edit.vue

@@ -8,15 +8,15 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import { DocumentUploadSchema } from '~/schemas/document-upload.schema'
 import { getDetail } from '~/services/supporting-document.service'
 
-// #region Props & Emits
+const props = withDefaults(defineProps<{ 
-const props = defineProps<{
+  encounter_id: number 
-  callbackUrl?: string
+  record_id: number 
-}>()
+}>(), {
+  
+})
 
 // form related state
-const route = useRoute()
+const docId = props.record_id
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const docId = typeof route.params.document_id == 'string' ? parseInt(route.params.document_id) : 0
 const inputForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
@@ -77,7 +77,7 @@ async function composeFormData(): Promise<any> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = inputFormState?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
   return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
@@ -88,14 +88,7 @@ async function handleActionClick(eventType: string) {
     isConfirmationOpen.value = true
   }
 
-  if (eventType === 'back') {
+  if (eventType === 'back') goBack()
-    if (props.callbackUrl) {
-      await navigateTo(props.callbackUrl)
-      return
-    }
-
-    goBack()
-  }
 }
 
 function handleCancelAdd() {
@@ -109,7 +102,7 @@ function handleCancelAdd() {
 
 <template>
   <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">
-    <h1>Upload Dokumen</h1>
+    <h1>Update Upload Dokumen</h1>
   </div>
   <AppDocumentUploadEntryForm
     ref="inputForm"

app/components/content/document-upload/list.vue

@@ -9,33 +9,30 @@ import type { Encounter } from '~/models/encounter'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
-import type { PagePermission } from '~/models/role'
+import type { Permission, RoleAccesses, } from '~/models/role'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 import { unauthorizedToast } from '~/lib/utils'
+import { permissions } from '~/const/page-permission/ambulatory'
+import { usePageChecker } from '~/lib/page-checker'
 // #endregion
 
 
 // #region Permission
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+const roleAccess: RoleAccesses = permissions['/ambulatory/encounter'] || {}
 const { getPagePermissions } = useRBAC()
 const pagePermission = getPagePermissions(roleAccess)
-
-// const {user,userRole} = useUserStore()
-// const {getUserPermissions} = useRBAC()
 // #endregion
 
 // #region State
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
-  encounter?: Encounter
+  encounter_id: number
-  refresh: () => void
+  redirectToForm?: (myRecord_id?: any) => void
-}>()
+}>(), {
-
+  redirectToForm: () => { }
-const route = useRoute()
+})
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 
 const { data, paginationMeta, handlePageChange, handleSearch, searchInput, fetchData } = usePaginatedList({
   fetchFn: (params) => getList({
-    'encounter-id': encounterId,
+    'encounter-id': props.encounter_id,
     // includes: "employee",
     ...params,
   }),
@@ -56,10 +53,9 @@ const headerPrep: HeaderPrep = {
 if (pagePermission.canCreate) {
   headerPrep.addNav = {
     label: "Upload Dokumen",
-    onClick: () => navigateTo({
+    onClick: () => {
-        name: 'rehab-encounter-id-document-upload-add',
+      props.redirectToForm()
-        params: { id: encounterId },
+    },
-      }),
    }
 }
 
@@ -78,6 +74,7 @@ const refSearchNav: RefSearchNav = {
 
 // #region Lifecycle Hooks
 onMounted(() => {
+
 })
 // #endregion
 
@@ -99,7 +96,6 @@ async function handleConfirmDelete(record: any, action: string) {
   }
 }
 
-
 function handleCancelConfirmation() {
   // Reset record state when cancelled
   recId.value = 0
@@ -124,10 +120,7 @@ watch([recId, recAction, timestamp], () => {
 
     case ActionEvents.showEdit:
       if(pagePermission.canUpdate){
-        navigateTo({
+        props.redirectToForm(recId.value)
-          name: 'rehab-encounter-id-document-upload-document_id-edit',
-          params: { id: encounterId, "document_id": recId.value },
-        })
       } else {
         unauthorizedToast()
       }

app/components/content/document-upload/main.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Add from './add.vue'
+import Edit from './edit.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list" :encounter_id="encounter_id" :redirectToForm="goToEntry" />
+  <Add v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && !crudQueryParams.recordId" :encounter_id="encounter_id" />
+  <Edit v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && crudQueryParams.recordId"
+    :encounter_id="encounter_id" 
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" />
+</template>

app/components/content/encounter/entry.vue

@@ -3,14 +3,14 @@
 import { Button } from '~/components/pub/ui/button'
 import AppEncounterEntryForm from '~/components/app/encounter/entry-form.vue'
 import AppViewPatient from '~/components/app/patient/view-patient.vue'
+import AppViewHistory from '~/components/app/sep/view-history.vue'
 
 // Helpers
 import { refDebounced } from '@vueuse/core'
 
 // Handlers
-import { getDetail as getDoctorDetail  } from '~/services/doctor.service'
 import { useEncounterEntry } from '~/handlers/encounter-entry.handler'
-import { genDoctor, type Doctor } from '~/models/doctor'
+import { useIntegrationSepEntry } from '~/handlers/integration-sep-entry.handler'
 
 // Props
 const props = defineProps<{
@@ -34,54 +34,33 @@ const {
   isLoadingDetail,
   formObjects,
   openPatient,
+  isMemberValid,
   isSepValid,
   isCheckingSep,
   isSaveDisabled,
-  isSaving,
   isLoading,
   patients,
+  selectedDoctor,
   selectedPatient,
   selectedPatientObject,
   paginationMeta,
   toNavigateSep,
   getListPath,
   handleInit,
-  loadEncounterDetail,
+  getFetchEncounterDetail,
   handleSaveEncounter,
   getPatientsList,
   getPatientCurrent,
   getPatientByIdentifierSearch,
-  getIsSubspecialist,
+  // getIsSubspecialist,
+  getDoctorInfo,
+  getValidateMember,
   getValidateSepNumber,
   handleFetchDoctors,
 } = useEncounterEntry(props)
+const { recSepId, openHistory, histories, getMonitoringHistoryMappers } = useIntegrationSepEntry()
 
 const debouncedSepNumber = refDebounced(sepNumber, 500)
-const selectedDoctor = ref<Doctor>(genDoctor())
-
-provide('rec_select_id', recSelectId)
-provide('table_data_loader', isLoading)
-
-watch(debouncedSepNumber, async (newValue) => {
-  await getValidateSepNumber(newValue)
-})
-
-watch(
-  () => formObjects.value?.paymentType,
-  (newValue) => {
-    isSepValid.value = false
-    if (newValue !== 'jkn') {
-      sepNumber.value = ''
-    }
-  },
-)
-
-onMounted(async () => {
-  await handleInit()
-  if (props.id > 0) {
-    await loadEncounterDetail()
-  }
-})
 
 ///// Functions
 function handleSavePatient() {
@@ -116,12 +95,28 @@ async function handleEvent(menu: string, value?: any) {
     }
     toNavigateSep({
       isService: 'false',
+      encounterId: props.id || null,
       sourcePath: route.path,
       resource: `${props.classCode}-${props.subClassCode}`,
       ...value,
     })
   } else if (menu === 'sep-number-changed') {
-    await getValidateSepNumber(String(value || ''))
+    const sepNumberText = String(value || '').trim()
+    if (sepNumberText.length > 5) {
+      await getValidateSepNumber(sepNumberText)
+    }
+  } else if (menu === 'member-changed') {
+    const memberText = String(value || '').trim()
+    if (memberText.length > 5) {
+      await getValidateMember(memberText)
+    }
+  } else if (menu === 'search-sep') {
+    const memberText = String(value?.cardNumber || '').trim()
+    if (memberText.length < 5) return
+    getMonitoringHistoryMappers(memberText).then(() => {
+      openHistory.value = true
+    })
+    return
   } else if (menu === 'save') {
     await handleSaveEncounter(value)
   } else if (menu === 'cancel') {
@@ -129,13 +124,39 @@ async function handleEvent(menu: string, value?: any) {
   }
 }
 
-async function getDoctorInfo(value: string) {
+provide('rec_select_id', recSelectId)
-  const resp = await getDoctorDetail(value, { includes: 'unit,specialist,subspecialist'})
+provide('rec_sep_id', recSepId)
-  if (resp.success) {
+provide('table_data_loader', isLoading)
-    selectedDoctor.value = resp.body.data
+
-    // console.log(selectedDoctor.value)
+watch(debouncedSepNumber, async (newValue) => {
+  await getValidateSepNumber(newValue)
+})
+
+watch(
+  () => formObjects.value?.paymentType,
+  (newValue) => {
+    isSepValid.value = false
+    if (newValue !== 'jkn') {
+      sepNumber.value = ''
+    }
+  },
+)
+
+watch(
+  () => props.id,
+  async (newId) => {
+    if (props.formType === 'edit' && newId > 0) {
+      await getFetchEncounterDetail()
+    }
+  },
+)
+
+onMounted(async () => {
+  await handleInit()
+  if (props.formType === 'edit' && props.id > 0) {
+    await getFetchEncounterDetail()
   }
-}
+})
 </script>
 
 <template>
@@ -144,13 +165,15 @@ async function getDoctorInfo(value: string) {
       name="i-lucide-user"
       class="me-2"
     />
-    <span class="font-semibold">{{ props.formType }}</span>
+    <span class="font-semibold">{{ props.formType === 'add' ? 'Tambah' : 'Ubah' }}</span>
     Kunjungan
   </div>
 
   <AppEncounterEntryForm
     ref="formRef"
+    :mode="props.formType"
     :is-loading="isLoadingDetail"
+    :is-member-valid="isMemberValid"
     :is-sep-valid="isSepValid"
     :is-checking-sep="isCheckingSep"
     :payments="paymentsList"
@@ -165,7 +188,6 @@ async function getDoctorInfo(value: string) {
     @event="handleEvent"
     @fetch="handleFetch"
   />
-
   <AppViewPatient
     v-model:open="openPatient"
     v-model:selected="selectedPatient"
@@ -184,7 +206,11 @@ async function getDoctorInfo(value: string) {
     "
     @save="handleSavePatient"
   />
-
+  <AppViewHistory
+    v-model:open="openHistory"
+    :is-action="true"
+    :histories="histories"
+  />
   <!-- Footer Actions -->
   <div class="mt-6 flex justify-end gap-2 border-t border-t-slate-300 pt-4">
     <Button

app/components/content/encounter/list.vue

@@ -13,7 +13,11 @@ import { useSidebar } from '~/components/pub/ui/sidebar/utils'
 import { getServicePosition } from '~/lib/roles' // previously getPositionAs
 
 // Services
-import { getList as getEncounterList, remove as removeEncounter, cancel as cancelEncounter } from '~/services/encounter.service'
+import {
+  getList as getEncounterList,
+  remove as removeEncounter,
+  cancel as cancelEncounter,
+} from '~/services/encounter.service'
 
 // Apps
 import Content from '~/components/app/encounter/list.vue'
@@ -34,8 +38,14 @@ const props = defineProps<{
 const { setOpen } = useSidebar()
 setOpen(true)
 
+// Role reactivities
+const { getActiveRole } = useUserStore()
+
 // Main data
 const data = ref([])
+const dataFiltered = ref([])
+const filterParams = ref<any>({})
+const activeServicePosition = ref(getServicePosition(getActiveRole()))
 const isLoading = reactive<DataTableLoader>({
   summary: false,
   isTableLoading: false,
@@ -87,39 +97,38 @@ const filter = ref<{
   schema: {},
 })
 
-// Role reactivities
-const { getActiveRole } = useUserStore()
-const activeServicePosition = ref(getServicePosition(getActiveRole()))
-provide('activeServicePosition', activeServicePosition)
-watch(getActiveRole, (role? : string) => {
-  activeServicePosition.value = getServicePosition(role)
-})
-
 // Recrod reactivities
+provide('activeServicePosition', activeServicePosition)
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
-watch(() => recAction.value, () => {
+
-  const basePath = `/${props.classCode}/encounter`
+watch(getActiveRole, (role?: string) => {
-  // console.log(`${basePath}/${recId.value}`, recAction.value)
+  activeServicePosition.value = getServicePosition(role)
-  // return
-  if (recAction.value === ActionEvents.showConfirmDelete) {
-    isRecordConfirmationOpen.value = true
-  } else if (recAction.value === ActionEvents.showCancel) {
-    isRecordCancelOpen.value = true
-  } else if (recAction.value === ActionEvents.showDetail) {
-    navigateTo(`${basePath}/${recId.value}`)
-  } else if (recAction.value === ActionEvents.showEdit) {
-    navigateTo(`${basePath}/${recId.value}/edit`)
-  } else if (recAction.value === ActionEvents.showProcess) {
-    navigateTo(`${basePath}/${recId.value}/process`)
-  } else if (recAction.value === ActionEvents.showConfirmDelete) {
-    isRecordConfirmationOpen.value = true
-  }
-  recAction.value = '' // reset
 })
 
+watch(
+  () => recAction.value,
+  () => {
+    const basePath = `/${props.classCode}/encounter`
+    if (recAction.value === ActionEvents.showConfirmDelete) {
+      isRecordConfirmationOpen.value = true
+    } else if (recAction.value === ActionEvents.showCancel) {
+      isRecordCancelOpen.value = true
+    } else if (recAction.value === ActionEvents.showDetail) {
+      navigateTo(`${basePath}/${recId.value}/detail`)
+    } else if (recAction.value === ActionEvents.showEdit) {
+      navigateTo(`${basePath}/${recId.value}/edit`)
+    } else if (recAction.value === ActionEvents.showProcess) {
+      navigateTo(`${basePath}/${recId.value}/process`)
+    } else if (recAction.value === ActionEvents.showConfirmDelete) {
+      isRecordConfirmationOpen.value = true
+    }
+    recAction.value = '' // reset
+  },
+)
+
 onMounted(() => {
   getPatientList()
 })
@@ -127,17 +136,21 @@ onMounted(() => {
 /////// Functions
 async function getPatientList() {
   isLoading.isTableLoading = true
+  const includesParams =
+    'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,Responsible_Doctor,Responsible_Doctor-employee,Responsible_Doctor-employee-person'
+  data.value = []
   try {
-    const params: any = { includes: 'patient,patient-person' }
+    const params: any = { includes: includesParams, ...filterParams.value }
     if (props.classCode) {
-      params['class-code'] = props.classCode
+      params.class_code = props.classCode
     }
     if (props.subClassCode) {
-      params['sub-class-code'] = props.subClassCode
+      params.sub_class_code = props.subClassCode
     }
     const result = await getEncounterList(params)
     if (result.success) {
       data.value = result.body?.data || []
+      dataFiltered.value = [...data.value]
     }
   } catch (error) {
     console.error('Error fetching encounter list:', error)
@@ -146,6 +159,15 @@ async function getPatientList() {
   }
 }
 
+function handleFilterApply(filters: { personName: string; startDate: string; endDate: string }) {
+  filterParams.value = {
+    'person-name': filters.personName,
+    'start-date': filters.startDate,
+    'end-date': filters.endDate,
+  }
+  getPatientList()
+}
+
 // Handle confirmation result
 async function handleConfirmCancel(record: any, action: string) {
   if (action === 'deactivate' && record?.id) {
@@ -240,7 +262,8 @@ function handleRemoveConfirmation() {
 <template>
   <CH.ContentHeader v-bind="hreaderPrep">
     <FilterNav
-      @onFilterClick="() => isFilterFormDialogOpen = true"
+      :active-positon="activeServicePosition"
+      @apply="handleFilterApply"
       @onExportPdf="() => {}"
       @onExportExcel="() => {}"
       @nExportCsv="() => {}"
@@ -256,11 +279,12 @@ function handleRemoveConfirmation() {
     size="lg"
     prevent-outside
   >
-    <FilterForm v-bind="filter"  />
+    <FilterForm v-bind="filter" />
   </Dialog>
 
   <!-- Batal -->
   <RecordConfirmation
+    v-if="canDelete"
     v-model:open="isRecordCancelOpen"
     custom-title="Batalkan Kunjungan"
     custom-message="Apakah anda yakin ingin membatalkan kunjungan pasien berikut?"

app/components/content/encounter/process-bu.vue

@@ -26,6 +26,7 @@ import DocUploadList from '~/components/content/document-upload/list.vue'
 import GeneralConsentList from '~/components/content/general-consent/entry.vue'
 import ResumeList from '~/components/content/resume/list.vue'
 import ControlLetterList from '~/components/content/control-letter/list.vue'
+import VaccineDataList from '~/components/content/vaccine-data/list.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -96,6 +97,7 @@ const tabs: TabItem[] = [
     component: DocUploadList,
     props: { encounter: data },
   },
+  { value: 'vaccine-data', label: 'Data Vaksin', component: VaccineDataList, props: { encounter: data } },
 ]
 </script>
 

app/components/content/encounter/process.vue

@@ -16,8 +16,24 @@ import { genEncounter, type Encounter } from '~/models/encounter'
 // Handlers
 import type { EncounterProps } from '~/handlers/encounter-init.handler'
 import { getEncounterData } from '~/handlers/encounter-process.handler'
-import { getMenuItems } from "~/handlers/encounter-init.handler"
+import { getMenuItems } from '~/handlers/encounter-init.handler'
 
+// PLASE ORDER BY TAB POSITION
+import Status from '~/components/content/encounter/status.vue'
+import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import DeviceOrder from '~/components/content/device-order/main.vue'
+import Prescription from '~/components/content/prescription/main.vue'
+import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
+import Radiology from '~/components/content/radiology-order/main.vue'
+import Consultation from '~/components/content/consultation/list.vue'
+import Cprj from '~/components/content/cprj/entry.vue'
+import DocUploadList from '~/components/content/document-upload/list.vue'
+import GeneralConsentList from '~/components/content/general-consent/entry.vue'
+import ResumeList from '~/components/content/resume/list.vue'
+import ControlLetterList from '~/components/content/control-letter/list.vue'
+import InitialNursingStudy from '~/components/content/initial-nursing/entry.vue'
 // App Components
 import EncounterPatientInfo from '~/components/app/encounter/quick-info.vue'
 import EncounterHistoryButtonMenu from '~/components/app/encounter/quick-shortcut.vue'
@@ -27,6 +43,10 @@ import EncounterHistoryButtonMenu from '~/components/app/encounter/quick-shortcu
 const props = defineProps<{
   classCode: EncounterProps['classCode']
   subClassCode?: EncounterProps['subClassCode']
+  canCreate?: boolean
+  canRead?: boolean
+  canUpdate?: boolean
+  canDelete?: boolean
 }>()
 
 // Common preparations
@@ -51,7 +71,8 @@ const isShowPatient = computed(() => data.value && data.value?.patient?.person)
 const { setOpen } = useSidebar()
 setOpen(false)
 
-if (activePosition.value === 'none') { // if user position is none, redirect to home page
+if (activePosition.value === 'none') {
+  // if user position is none, redirect to home page
   router.push('/')
 }
 
@@ -66,6 +87,45 @@ const protocolRows = [
     action: '',
   },
   {
+    value: 'rehab-medical-assessment',
+    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    component: EarlyMedicalRehabList,
+    props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  },
+  {
+    value: 'function-assessment',
+    label: 'Asesmen Fungsi',
+    component: AssesmentFunctionList,
+    props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
+  },
+  { value: 'therapy-protocol', label: 'Protokol Terapi' },
+  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'patient-note', label: 'CPRJ', component: Cprj, props: { encounter: data } },
+  { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
+  {
+    value: 'initial-nursing-study',
+    label: 'Kajian Awal Keperawatan',
+    component: InitialNursingStudy,
+    props: { encounter: data },
+  },
+  { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.value.id } },
+  { value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter_id: data.value.id } },
+  { value: 'device', label: 'Order Alkes' },
+  { value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.value.id } },
+  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.value.id } },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
+  { value: 'medical-action', label: 'Order Ruang Tindakan' },
+  { value: 'mcu-result', label: 'Hasil Penunjang' },
+  { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
+  { value: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
+  { value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
+  { value: 'screening', label: 'Skrinning MPP' },
+  {
+    value: 'supporting-document',
+    label: 'Upload Dokumen Pendukung',
+    component: DocUploadList,
+    props: { encounter: data },
     number: '2',
     tanggal: new Date().toISOString().substring(0, 10),
     siklus: 'II',
@@ -98,18 +158,24 @@ onMounted(async () => {
 ///// Functions
 function handleClick(type: string) {
   if (type === 'draft') {
-    router.back()
+    router.push(`/${props.classCode}/encounter`)
   }
 }
 
 function initMenus() {
-  menus.value = getMenuItems(id, props, user, {
+  menus.value = getMenuItems(
-    encounter: data.value
+    id,
-  } as any, {
+    props,
-    protocolTheraphy: paginationMeta,
+    user,
-    protocolChemotherapy: paginationMeta,
+    {
-    medicineProtocolChemotherapy: paginationMeta,
+      encounter: data.value,
-  })
+    } as any,
+    {
+      protocolTheraphy: paginationMeta,
+      protocolChemotherapy: paginationMeta,
+      medicineProtocolChemotherapy: paginationMeta,
+    },
+  )
 }
 
 async function getData() {
@@ -119,16 +185,11 @@ async function getData() {
 
 <template>
   <div class="w-full">
-    <div class="bg-white dark:bg-slate-800 p-4 2xl:p-5">
+    <div class="bg-white dark:bg-slate-800">
-      <div class="mb-4 flex">
+      <div class="p-3 2xl:p-4 border-b border-slate-300  dark:border-slate-700">
-        <div>
+        <ContentNavBa label="Kembali Ke Daftar" @click="handleClick" />
-          <ContentNavBa label="Kembali" @click="handleClick" />
-        </div>
-        <!-- <div class="ms-auto pe-3 pt-1 text-end text-xl 2xl:text-2xl font-semibold">
-            Pasien: {{ data.patient.person.name }} --- No. RM: {{ data.patient.number }}
-        </div> -->
       </div>
-      <ContentSwitcher :active="1" :height="150">
+      <ContentSwitcher :active="1" class="h-[130px] 2xl:h-[160px]">
         <template v-slot:content1>
           <EncounterPatientInfo v-if="isShowPatient" :data="data" />
         </template>
@@ -137,6 +198,14 @@ async function getData() {
         </template>
       </ContentSwitcher>
     </div>
-    <SubMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
+    <SubMenu
+      :data="menus"
+      :initial-active-menu="activeMenu"
+      @change-menu="activeMenu = $event"
+      :can-create="canCreate"
+      :can-read="canRead"
+      :can-update="canUpdate"
+      :can-delete="canDelete"
+    />
   </div>
 </template>

app/components/content/encounter/status.vue

@@ -5,6 +5,7 @@ import { getValueLabelList as getEmployeeValueLabelList } from '~/services/emplo
 import { getValueLabelList as getUnitValueLabelList } from '~/services/unit.service'
 import type { CheckInFormData, CheckOutFormData } from '~/schemas/encounter.schema'
 import { CheckInSchema, CheckOutSchema } from '~/schemas/encounter.schema'
+import { getEncounterData } from '~/handlers/encounter-process.handler'
 
 //
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
@@ -18,10 +19,12 @@ import { checkIn } from '~/services/encounter.service'
 //
 const props = defineProps<{
   encounter: Encounter
+  canUpdate?: boolean
 }>()
 
 // doctors
-const doctors = await getDoctorValueLabelList({'includes': 'employee,employee-person'})
+const localEncounter = ref<Encounter>(props.encounter)
+const doctors = await getDoctorValueLabelList({'includes': 'employee,employee-person'}, true)
 const employees = await getEmployeeValueLabelList({'includes': 'person', 'position-code': 'reg'})
 const units = await getUnitValueLabelList()
 
@@ -32,7 +35,7 @@ const checkInValues = ref<any>({
   // registeredAt: '',
 })
 const checkInIsLoading = ref(false)
-const checkInIsReadonly = ref(false)
+const checkInIsReadonly = ref(props.canUpdate )
 const checkInDialogOpen = ref(false)
 
 // check out
@@ -49,8 +52,15 @@ function editCheckIn() {
   checkInDialogOpen.value = true
 }
 
-function submitCheckIn(values: CheckInFormData) {
+async function submitCheckIn(values: CheckInFormData) {
-  checkIn(props.encounter.id, values)
+  const res = await checkIn(props.encounter.id, values)
+  if (res.success) {
+    checkInDialogOpen.value = false
+    const resEnc = await getEncounterData(props.encounter.id)
+    if (resEnc.success) {
+      localEncounter.value = resEnc.body.data
+    }
+  }
 }
 
 function editCheckOut() {
@@ -67,9 +77,8 @@ function submitCheckOut(values: CheckOutFormData) {
     <div class="border-r lg:pe-4 xl:pe-5 mb-10">
       <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Masuk</div>
       <CheckInView
-        :encounter="encounter"
+        :encounter="localEncounter"
-        :is-loading="checkInIsLoading"
+        :can-update="canUpdate"
-        :is-readonly="checkInIsReadonly"
         @edit="editCheckIn"
       />
     </div>
@@ -77,9 +86,8 @@ function submitCheckOut(values: CheckOutFormData) {
       <Separator class="lg:hidden my-4 xl:my-5" />
       <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Keluar</div>
       <CheckOutView
-        :encounter="encounter"
+        :encounter="localEncounter"
-        :is-loading="checkOutIsLoading"
+        :can-update="canUpdate"
-        :is-readonly="checkOutIsReadonly"
         @edit="editCheckOut"
       />
     </div>
@@ -122,4 +130,4 @@ function submitCheckOut(values: CheckOutFormData) {
       @cancel="checkInDialogOpen = false"
     />
   </Dialog>
-</template>
+</template>

app/components/content/initial-nursing/entry.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useQueryMode } from '@/composables/useQueryMode'
+
+import List from './list.vue'
+import Form from './form.vue'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+
+const props = defineProps<Props>()
+const route = useRoute()
+
+const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
+</script>
+
+<template>
+  <div>
+    <List
+      v-if="mode === 'list'"
+      :encounter="props.encounter"
+      @add="goToEntry"
+      @edit="goToEntry"
+    />
+    <Form
+      v-else
+      @back="backToList"
+    />
+  </div>
+</template>

app/components/content/initial-nursing/form.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import Entry from '~/components/app/initial-nursing/entry-form.vue'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { InitialNursingSchema } from '~/schemas/soapi.schema'
+import { toast } from '~/components/pub/ui/toast'
+import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+const { backToList } = useQueryMode('mode')
+
+const route = useRoute()
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
+const schema = InitialNursingSchema
+const payload = ref({
+  encounter_id: 0,
+  time: '',
+  typeCode: 'early-nursery',
+  value: '',
+})
+const listProblem = ref([])
+
+const model = ref({
+  'pri-complain': '',
+  'med-type': '',
+  'med-name': '',
+  'med-reaction': '',
+  'food-type': '',
+  'food-name': '',
+  'food-reaction': '',
+  'other-type': '',
+  'other-name': '',
+  'other-reaction': '',
+  'pain-asst': '',
+  'pain-scale': '',
+  'pain-time': '',
+  'pain-duration': '',
+  'pain-freq': '',
+  'pain-loc': '',
+  'nut-screening': '',
+  'spiritual-asst': '',
+  'general-condition': '',
+  'support-exam': '',
+  'risk-fall': '',
+  bracelet: '',
+  'bracelet-alg': '',
+})
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+function handleOpen(event: any) {
+  console.log('handleOpen', event.type)
+  const type = event.type
+  if (type === 'add-problem') {
+    listProblem.value = event.data
+  }
+}
+
+const entryRehabRef = ref()
+async function actionHandler(type: string) {
+  if (type === 'back') {
+    backToList()
+    return
+  }
+  const result = await entryRehabRef.value?.validate()
+  if (result?.valid) {
+    if (listProblem.value?.length > 0) {
+      result.data.listProblem = listProblem.value || []
+    }
+    console.log('data', result.data)
+    handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+        time: new Date().toISOString(),
+      },
+      () => {},
+      () => {},
+      toast,
+    )
+
+    backToList()
+  } else {
+    console.log('Ada error di form', result)
+  }
+}
+
+const icdPreview = ref({
+  procedures: [],
+  diagnoses: [],
+})
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    icdPreview.value.procedures = selectedProcedure.value || []
+    icdPreview.value.diagnoses = selectedDiagnose.value || []
+  }
+  isOpenProcedure.value = false
+  isOpenDiagnose.value = false
+}
+
+provide('table_data_loader', isLoading)
+provide('icdPreview', icdPreview)
+</script>
+<template>
+  <Entry
+    ref="entryRehabRef"
+    v-model="model"
+    :schema="schema"
+    type="early-rehab"
+    @click="handleOpen"
+  />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="actionHandler" />
+  </div>
+  <Dialog
+    v-model:open="isOpenDiagnose"
+    title="Pilih Fungsional"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedDiagnose"
+      :data="diagnoses"
+    />
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </Dialog>
+</template>

app/components/content/initial-nursing/list.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/initial-nursing/list.vue'
+import Preview from '~/components/app/initial-nursing/preview.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/soapi-early.handler'
+
+// Services
+import { getList, getDetail } from '~/services/soapi-early.service'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['add', 'edit'])
+const route = useRoute()
+
+const { recordId } = useQueryCRUDRecordId()
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+
+let units = ref<{ value: string; label: string }[]>([])
+const encounterId = ref<number>(props?.encounter?.id || 0)
+const title = ref('')
+const id = route.params.id
+const descData = ref({})
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      'encounter-id': id,
+      'type-code': 'early-nursery',
+      includes: 'encounter',
+      search,
+      page,
+    })
+    console.log('masukkk', result)
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'initial-nursing',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Kajian Awal Keperawatan',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      goToEntry()
+      emits('add')
+    },
+  },
+}
+
+const today = new Date()
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+const mappedData = computed(() => {
+  if (!data.value || data.value.length === 0) return []
+
+  const raw = data.value[0]
+
+  // Pastikan raw.value adalah string JSON
+  let parsed: any = {}
+  try {
+    parsed = JSON.parse(raw.value || '{}')
+  } catch (err) {
+    console.error('JSON parse error:', err)
+    return []
+  }
+
+  // Ambil listProblem
+  const list = parsed.listProblem || []
+  const textData = parsed
+
+  // Untuk keamanan: pastikan selalu array
+  if (!Array.isArray(list)) return []
+
+  return { list, textData }
+})
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Konsultasi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      emits('edit')
+      recordId.value = recId.value
+      console.log('recordId', recId.value)
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMyList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Preview :preview="mappedData.textData" />
+
+  <h2 class="my-3 p-1 font-semibold">C. Daftar Masalah Keperawatan</h2>
+  <List :data="mappedData.list || []" />
+  <!-- :pagination-meta="paginationMeta" -->
+  <!-- @page-change="handlePageChange" -->
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/kfr/entry.vue

@@ -10,17 +10,16 @@ import { getDetail } from '~/services/kfr.service';
 
 // #region Props & Emits
 const props = withDefaults(defineProps<{
+  encounter_id: number
   callbackUrl?: string
-  mode?: 'add' | 'edit'
+  record_id: number 
 }>(), {
-  mode: "add",
+
 })
 
 // form related state
 const route = useRoute()
-
+const mode = computed(() => props.record_id ? `edit` : `add`)
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const kfrId = typeof route.params.kfr_id == 'string' ? parseInt(route.params.kfr_id) : 0
 const inputForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
@@ -31,13 +30,13 @@ const isConfirmationOpen = ref(false)
 
 // #region Lifecycle Hooks
 onMounted(() => {
-  if(props.mode === `edit`) init()
+  if(mode.value === `edit`) init()
 })
 // #endregion
 
 // #region Functions
 async function init(){
-  const result = await getDetail(kfrId)
+  const result = await getDetail(props.record_id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     inputForm.value?.setValues(currentValue)
@@ -50,7 +49,7 @@ function goBack() {
 
 async function handleConfirmAdd() {
   const inputData: any = await composeFormData()
-  const response = props.mode === `add` 
+  const response = mode.value === `add` 
   ? await handleActionSave(
       inputData,
       () => { },
@@ -58,7 +57,7 @@ async function handleConfirmAdd() {
       toast,
     )
   : await handleActionEdit(
-      kfrId,
+      props.record_id,
       inputData,
       () => { },
       () => { },
@@ -82,7 +81,7 @@ async function composeFormData(): Promise<any> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = input?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
 
   return new Promise((resolve) => resolve(formData))
 }
@@ -123,7 +122,7 @@ const initial = {
 
 <template>
   <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">
-    {{ props.mode === "add" ? `Tambah` : `Update` }} Formulir Rawat Jalan KFR
+    Formulir Rawat Jalan KFR
   </div>
   <AppKfrEntry
     ref="inputForm"

app/components/content/kfr/list.vue

@@ -27,10 +27,12 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 interface Props {
   encounter: Encounter
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<{ 
-const route = useRoute()
+  encounter_id: number
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+  redirectToForm?: (myRecord_id?: any) => void
-const kfrId = typeof route.params.kfr_id == 'string' ? parseInt(route.params.kfr_id) : 0
+}>(), {
+  redirectToForm: () => { }
+})
 // #endregion
 
 // #region State
@@ -104,17 +106,16 @@ const addBtnTxt = computed(() => {
   }
   return `Tambah Asesmen`
 })
-
+const headerPrep: HeaderPrep = {
-  const headerPrep: HeaderPrep = {
     title: "Formulir Rawat Jalan KFR",
     icon: 'i-lucide-newspaper',
   }
 if(isDoctor.value || isAdmin.value) {
   headerPrep.addNav = {
     label: addBtnTxt.value,
-    onClick: () => navigateTo({
+    onClick: () => {
-      name: 'rehab-encounter-id-kfr-add',
+      props.redirectToForm()
-    }),
+    },
   }
 }
 if(!isAssessment.value) {
@@ -283,12 +284,7 @@ watch([recId, recAction, timestamp], () => {
   switch (recAction.value) {
     case ActionEvents.showEdit:
       // if(pagePermission.canUpdate) { 
-      navigateTo({
+      props.redirectToForm(recId.value)
-        name: 'rehab-encounter-id-kfr-kfr_id-edit',
-        params: {
-          kfr_id: kfrId
-        }
-      })
       // } else {
       //   unauthorizedToast()
       // }

app/components/content/kfr/main.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Entry v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>

app/components/content/mcu-order/entry.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// mcu src category
+import ScrCategorySwitcher from '~/components/app/mcu-src-category/switcher.vue'
+import { getList as getMcuCategoryList } from '~/services/mcu-src-category.service'
+
+// mcu src
+import { type McuSrc } from '~/models/mcu-src'
+import { getList as getMcuSrcList } from '~/services/mcu-src.service'
+import McuSrcPicker from '~/components/app/mcu-src/picker-accordion.vue'
+
+// mcu order
+import { getDetail } from '~/services/mcu-order.service'
+import Detail from '~/components/app/mcu-order/detail.vue'
+
+// mcu order item, manually not using composable
+import {
+  getList as getMcuOrderItemList,
+  create as createMcuOrderItem,
+  remove as removeMcuOrderItem,
+} from '~/services/mcu-order-item.service'
+import { type McuOrderItem } from '~/models/mcu-order-item'
+import ItemListEntry from '~/components/app/mcu-order-item/list-entry.vue'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+  scopeCode: string
+}>()
+
+// declaration & flows
+
+// MCU Order
+const { backToList, crudQueryParams } = useQueryCRUD()
+const id = crudQueryParams.value.recordId
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data
+
+// MCU items
+const items = ref<McuOrderItem[]>([])
+
+// MCU Categories
+const mcuSrcCategoryRes = await getMcuCategoryList({ 'scope-code': props.scopeCode })
+const mcuSrcCategories = mcuSrcCategoryRes.body?.data
+const selectedMcuSrcCategory_code = ref('')
+
+// MCU Sources
+const mcuSrcs = ref<McuSrc[]>([])
+
+// const {
+//   data: items,
+//   fetchData: getItems,
+// } = usePaginatedList<McuOrderItem> ({
+//   fetchFn: async ({ page, search }) => {
+//     const result = await getMcuOrderItemList({ 'mcu-order-id': id, search, page })
+//     if (result.success) {
+//       items.value = result.body.data
+//     }
+//     return { success: result.success || false, body: result.body || {} }
+//   },
+//   entityName: 'mcu-order-item',
+// })
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail dan List Item Order Radiologi ',
+  icon: 'i-lucide-box',
+}
+
+const pickerDialogOpen = ref(false)
+
+onMounted(async () => {
+  await getItems()
+})
+
+watch(selectedMcuSrcCategory_code, async () => {
+  const res = await getMcuSrcList({ 'mcu-src-category-code': selectedMcuSrcCategory_code.value })
+  mcuSrcs.value = res.body?.data
+})
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+function requestItem() {
+  pickerDialogOpen.value = true
+}
+
+async function pickItem(item: McuSrc) {
+  const exItem = items.value.find(e => e.mcuSrc_code === item.code)
+  if (exItem) {
+    await removeMcuOrderItem(exItem.id)
+    await getItems()
+  } else {
+    const intId = parseInt(id?.toString() || '0')
+    await createMcuOrderItem({
+      mcuOrder_id: intId,
+      mcuSrc_code: item.code,
+    })
+    await getItems()
+  }
+}
+
+async function getItems() {
+  const itemsRes = await getMcuOrderItemList({ 'mcu-order-id': id, includes: 'mcuSrc,mcuSrc-mcuSrcCategory' })
+  if (itemsRes.success) {
+      items.value = itemsRes.body.data
+  } else {
+    items.value = []
+  }
+}
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="items"
+    @requestItem="requestItem"/>
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+
+  <Dialog
+    v-model:open="pickerDialogOpen"
+    title="Pilih Item"
+    size="2xl"
+    prevent-outside
+  >
+    <ScrCategorySwitcher :data="mcuSrcCategories" v-model="selectedMcuSrcCategory_code" />
+    <McuSrcPicker v-model="items" :data-source="mcuSrcs" @pick="pickItem" />
+    <Separator />
+    <NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
+  </Dialog>
+</template>

app/components/content/mcu-order/list.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import type { ToastFn } from '~/handlers/_handler'
+
+// Apps
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionRemove,
+} from '~/handlers/mcu-order.handler'
+import { getList, getDetail, submit } from '~/services/mcu-order.service'
+import type { McuOrder } from '~/models/mcu-order'
+// import List from '~/components/app/mcu-order/micro-list.vue'
+import ConfirmationInfo from '~/components/app/mcu-order/confirmation-info.vue'
+
+// Props
+const props = defineProps<{
+  scopeCode: string
+}>()
+
+// Common preparations
+const route = useRoute()
+const { crudQueryParams } = useQueryCRUD()
+
+const title = ref('')
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
+const isSubmitConfirmationOpen = ref(false)
+
+// Data
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  fetchData: getMyList,
+} = usePaginatedList<McuOrder>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'scope-code': props.scopeCode,
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person,items,items-mcuSrc',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'mcu-order'
+})
+
+// Header
+const headerPrep: HeaderPrep = {
+  title: 'Order Lab Mikro',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: async () => {
+      const saveResp = await handleActionSave({ encounter_id, scope_code: props.scopeCode }, () => {}, () =>{}, toast)
+      if (saveResp.success) {
+        crudQueryParams.value = { mode: 'entry', recordId: saveResp.body?.data?.id.toString() }
+      }
+    },
+  },
+}
+
+// List component
+let List: Component
+if(props.scopeCode == 'radiology') {
+  List = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
+} else if(props.scopeCode == 'cp-lab') {
+  List = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
+} else if (props.scopeCode == 'micro-lab') {
+  List = defineAsyncComponent(() => import('~/components/app/mcu-order/micro-list.vue'))
+} else {
+  List = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
+}
+
+// Reactivities
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Order Lab PK'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Order Lab PK'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+///// Functions
+async function getMyDetail (id: number | string) {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+function cancel(data: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: McuOrder) {
+  crudQueryParams.value = { mode: 'entry', recordId: data.id.toString() }
+}
+
+function confirmSubmit(data: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isSubmitConfirmationOpen.value = true
+}
+
+async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
+  const result = await submit(id)
+  if (result.success) {
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    setTimeout(refresh, 300)
+  } else {
+    toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
+  }
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="confirmSubmit"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <ConfirmationInfo :rec-item="recItem" />
+  </RecordConfirmation>
+
+  <RecordConfirmation
+    v-model:open="isSubmitConfirmationOpen"
+    action="delete"
+    customTitle="Ajukan Resep"
+    customMessage="Proses akan mengajukan resep ini untuk diproses lebih lanjut. Lanjutkan?"
+    customConfirmText="Ajukan"
+    :record="recItem"
+    @confirm="() => handleActionSubmit(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <ConfirmationInfo :rec-item="recItem" />
+  </RecordConfirmation>
+</template>

app/components/content/mcu-order/main.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>

app/components/content/micro-lab-order/entry.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Entry from '~/components/content/mcu-order/entry.vue'
+
+defineProps<{
+  encounter_id: number
+}>()
+</script>
+
+<template>
+  <Entry :encounter_id="encounter_id" scope-code="micro-lab" />
+</template>