From 761fe4e0ed973be6c5d9b5979d215d0b440a197b Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Sun, 19 Oct 2025 21:57:17 +0700
Subject: [PATCH] feat/encounter: improved processing needs

---
 app/components/app/encounter/quick-info.vue  |  64 +++++------
 app/components/app/intern/entry-form.vue     | 106 +++++++++++++++++++
 app/components/content/encounter/process.vue |  32 ++----
 app/models/encounter.ts                      |   4 +-
 app/models/person.ts                         |   2 +-
 app/services/encounter.service.ts            |   4 +-
 6 files changed, 155 insertions(+), 57 deletions(-)
 create mode 100644 app/components/app/intern/entry-form.vue

diff --git a/app/components/app/encounter/quick-info.vue b/app/components/app/encounter/quick-info.vue
index 49d81926..37ed817f 100644
--- a/app/components/app/encounter/quick-info.vue
+++ b/app/components/app/encounter/quick-info.vue
@@ -1,35 +1,50 @@
 <script setup lang="ts">
 import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { Encounter } from '~/models/encounter';
 
-defineProps<{
-  data: any
+const props = defineProps<{
+  data: Encounter
 }>()
+
+let address = ''
+if (props.data.patient.person.addresses) {
+  address = props.data.patient.person.addresses.map(a => a.address).join(', ')
+}
+
+let dpjp = '';
+if (props.data.responsible_doctor) {
+  const dp = props.data.responsible_doctor.employee.person
+  dpjp = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
+} else if (props.data.appointment_doctor) {
+  dpjp = props.data.appointment_doctor.employee.person.name
+}
+
 </script>
 
 <template>
   <div class="w-full rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
     <!-- Data Pasien -->
-    <h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ 'data.patient.person.name' }} - {{ 'data.patient.number' }}</h2>
+    <h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ data.patient.person.name }} - {{ data.patient.number }}</h2>
 
     <div class="grid grid-cols-3" >
       <div>
         <DE.Block mode="preview" labelSize="large">
           <DE.Cell>
-            <DE.Label>Tgl. Lahir</DE.Label>
+            <DE.Label class="font-semibold">No. RM</DE.Label>
             <DE.Field>
-              {{ 'data.patient.person.birthDate' }}
+              {{ data.patient.person.birthDate?.substring(0, 10) }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label>Jenis Kelamin</DE.Label>
+            <DE.Label class="font-semibold">Jenis Kelamin</DE.Label>
             <DE.Field>
-              {{ 'data.patient.person.gender_code' }}
+              {{ data.patient.person.gender_code }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label>Alamat</DE.Label>
+            <DE.Label class="font-semibold">Alamat</DE.Label>
             <DE.Field>
-              <div v-html="'data.patient.person .addresses[0].address'"></div>
+              <div v-html="address"></div>
             </DE.Field>
           </DE.Cell>
         </DE.Block>
@@ -37,21 +52,21 @@ defineProps<{
       <div>
         <DE.Block mode="preview" labelSize="large">
           <DE.Cell>
-            <DE.Label>Tgl. Kunjungan</DE.Label>
+            <DE.Label class="font-semibold">Tgl. Kunjungan</DE.Label>
             <DE.Field>
-              {{ 'data.date' }}
+              {{ data.visitDate.substring(0, 10) }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label>Klinik</DE.Label>
+            <DE.Label class="font-semibold">Klinik</DE.Label>
             <DE.Field>
-              {{ 'data.unit.name' }}
+              {{ data.unit?.name }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label>DPJP</DE.Label>
+            <DE.Label class="font-semibold">DPJP</DE.Label>
             <DE.Field>
-              {{ 'data.doctor.name' }}
+              {{ dpjp }}
             </DE.Field>
           </DE.Cell>
         </DE.Block>
@@ -59,21 +74,10 @@ defineProps<{
       <div>
         <DE.Block mode="preview" labelSize="large">
           <DE.Cell>
-            <DE.Label>Tgl. Kunjungan</DE.Label>
-            <DE.Field>
-              {{ 'data.date' }}
-            </DE.Field>
-          </DE.Cell>
-          <DE.Cell>
-            <DE.Label>Klinik</DE.Label>
-            <DE.Field>
-              {{ 'data.unit.name' }}
-            </DE.Field>
-          </DE.Cell>
-          <DE.Cell>
-            <DE.Label>DPJP</DE.Label>
-            <DE.Field>
-              {{ 'data.doctor.name' }}
+            <DE.Label position="dynamic" class="!text-base 2xl:!text-lg font-semibold">Billing</DE.Label>
+            <DE.Field class="text-base 2xl:text-lg">
+              Rp. 000.000
+              <!-- {{ data }} -->
             </DE.Field>
           </DE.Cell>
         </DE.Block>
diff --git a/app/components/app/intern/entry-form.vue b/app/components/app/intern/entry-form.vue
new file mode 100644
index 00000000..aca8245b
--- /dev/null
+++ b/app/components/app/intern/entry-form.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/my-ui/form/block.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+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 { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+import { Form } from '~/components/pub/ui/form'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+  }
+  items: {
+    value: string
+    label: string
+    code: string
+  }[]
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const relationshipOpts = mapToComboboxOptList(relationshipCodes)
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :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-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <Block>
+            <!-- Specialist -->
+            <FieldGroup :column="2">
+              <Label label-for="specialist_id">Specialist</Label>
+              <Field id="specialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="specialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="specialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Subpecialist -->
+            <FieldGroup :column="2">
+              <Label label-for="subspecialist_id">Subspecialist</Label>
+              <Field id="subspecialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="subspecialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="subspecialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index ea65f6a9..fcd447c4 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -3,18 +3,19 @@
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { getDetail } from '~/services/encounter.service'
+
+import type { Encounter } from '~/models/encounter'
+
 // Components
 import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
 
-import { getDetail } from '~/services/encounter.service'
-
+import Status from '~/components/app/encounter/status.vue'
 import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
 import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
-import PrescriptionList from '~/components/content/prescription/list.vue'
-import type { Encounter } from '~/models/encounter'
-import Status from '~/components/app/encounter/status.vue'
 // import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+import PrescriptionList from '~/components/content/prescription/list.vue'
 import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
 
 const route = useRoute()
@@ -29,25 +30,12 @@ const activeTab = computed({
 })
 
 const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const encounterRes = await getDetail(id)
-const encounterResBody = encounterRes.body ?? null
-const encounter = encounterResBody?.data ?? null
-
-const data = {
-  noRm: 'RM21123',
-  nama: 'Ahmad Sutanto',
-  alamat: 'Jl Jaksa Agung Suprapto No. 12, Jakarta',
-  tanggalKunjungan: '23 April 2024',
-  klinik: 'Bedah',
-  tanggalLahir: '23 April 1990 (25 Tahun)',
-  jenisKelamin: 'Laki-laki',
-  jenisPembayaran: 'JKN',
-  noBilling: '223332',
-  dpjp: 'dr. Syaifullah, Sp.OT(K)',
-}
+const dataRes = await getDetail(id, { includes: 'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person'})
+const dataResBody = dataRes.body ?? null
+const data = dataResBody?.data ?? null
 
 const tabs: TabItem[] = [
-  { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter } },
+  { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
   { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
   {
     value: 'rehab-medical-assessment',
diff --git a/app/models/encounter.ts b/app/models/encounter.ts
index d6928070..681a2ac9 100644
--- a/app/models/encounter.ts
+++ b/app/models/encounter.ts
@@ -17,7 +17,7 @@ export interface Encounter {
     specilist?: Specialist
     subspecialist_id?: number
     subspecialist?: Subspecialist
-    visitdate: string
+    visitDate: string
     adm_employee_id: number
     adm_employee: Employee
     appointment_doctor_id: number
@@ -43,7 +43,7 @@ export function genEncounter(): Encounter {
         class_code: '',
         unit_id: 0,
         unit: genUnit(),
-        visitdate: '',
+        visitDate: '',
         adm_employee_id: 0,
         adm_employee: genEmployee(),
         appointment_doctor_id: 0,
diff --git a/app/models/person.ts b/app/models/person.ts
index 477dd778..06b313b8 100644
--- a/app/models/person.ts
+++ b/app/models/person.ts
@@ -11,7 +11,7 @@ export interface Person extends Base {
   // alias?: string
   frontTitle?: string
   endTitle?: string
-  birthDate?: Date | string
+  birthDate?: string
   birthRegency_code?: string
   gender_code?: string
   residentIdentityNumber?: string
diff --git a/app/services/encounter.service.ts b/app/services/encounter.service.ts
index bf83c843..cd7c28ed 100644
--- a/app/services/encounter.service.ts
+++ b/app/services/encounter.service.ts
@@ -15,8 +15,8 @@ export function getList(params: any = null) {
   return base.getList(path, params, name)
 }
 
-export function getDetail(id: number | string) {
-  return base.getDetail(path, id, name)
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
 }
 
 export function update(id: number | string, data: any) {