From 979d73cca3d6a004a37dd09e1bb473e5f275d901 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Sat, 15 Nov 2025 08:07:12 +0700
Subject: [PATCH] fix(encounter): add history menu

---
 .../encounter/collapsible-patient-info.vue    |  32 +++
 .../app/encounter/history-button-menu.vue     | 110 ++++++++++
 .../app/encounter/quick-info-full.vue         | 193 +++++++++---------
 app/components/content/encounter/home.vue     |  11 +-
 4 files changed, 243 insertions(+), 103 deletions(-)
 create mode 100644 app/components/app/encounter/collapsible-patient-info.vue
 create mode 100644 app/components/app/encounter/history-button-menu.vue

diff --git a/app/components/app/encounter/collapsible-patient-info.vue b/app/components/app/encounter/collapsible-patient-info.vue
new file mode 100644
index 00000000..e74b33cd
--- /dev/null
+++ b/app/components/app/encounter/collapsible-patient-info.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// Types
+import type { Encounter } from '~/models/encounter'
+
+// Components
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/pub/ui/accordion'
+import EncounterQuickInfoFull from '~/components/app/encounter/quick-info-full.vue'
+
+const props = defineProps<{
+  data: Encounter
+}>()
+</script>
+
+<template>
+  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+        <!-- Data Pasien -->    
+    <Accordion
+      type="single"
+      defaultValue="item-patient"
+      collapsible
+    >
+      <AccordionItem value="item-patient" class="border-none">
+        <AccordionTrigger class="focus:outline-none focus:ring-0">
+          <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Data Pasien:</h2>
+        </AccordionTrigger>
+        <AccordionContent>
+          <EncounterQuickInfoFull :data="props.data" />
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  </div>
+</template>
diff --git a/app/components/app/encounter/history-button-menu.vue b/app/components/app/encounter/history-button-menu.vue
new file mode 100644
index 00000000..c86ce159
--- /dev/null
+++ b/app/components/app/encounter/history-button-menu.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+// Components
+import { Button } from '~/components/pub/ui/button'
+
+interface ButtonItems {
+  label: string
+  icon: string
+  value: string
+  type: 'icon' | 'image'
+}
+
+const itemsOne: ButtonItems[] = [
+  {
+    label: 'Data Pendaftaran',
+    icon: 'i-lucide-file',
+    value: 'register',
+    type: 'icon',
+  },
+  {
+    label: 'Status Pembayaran',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'status',
+    type: 'icon',
+  },
+  {
+    label: 'Riwayat Pasien',
+    icon: 'i-lucide-history',
+    value: 'history',
+    type: 'icon',
+  },
+  {
+    label: 'Penunjang',
+    icon: 'i-lucide-library-big',
+    value: 'support',
+    type: 'icon',
+  },
+  {
+    label: 'Resep',
+    icon: 'i-lucide-pill',
+    value: 'receipt',
+    type: 'icon',
+  },
+  {
+    label: 'DPJP',
+    icon: 'i-lucide-stethoscope',
+    value: 'doctor',
+    type: 'icon',
+  },
+  {
+    label: 'I-Care BPJS',
+    icon: 'i-lucide-file',
+    value: 'bpjs',
+    type: 'icon',
+  },
+  {
+    label: 'Fil SEP',
+    icon: 'i-lucide-file',
+    value: 'sep',
+    type: 'icon',
+  },
+]
+
+const itemsTwo: ButtonItems[] = [
+  {
+    label: 'Tarif Tindakan',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'action-fee',
+    type: 'icon',
+  },
+  {
+    label: 'Tarif Tindakan Paket',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'action-fee-package',
+    type: 'icon',
+  },
+]
+</script>
+
+<template>
+  <div class="my-4">
+  <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">History Pasien:</h2>
+  <div class="flex flex-wrap gap-2 mb-2">
+    <Button
+      v-for="item in itemsOne"
+      :key="item.value"
+      class="flex items-center gap-2 rounded-lg border border-orange-300 bg-white px-3 py-1 text-sm font-medium text-orange-500 hover:bg-orange-400 hover:text-white"
+    >
+      <Icon
+        :name="item.icon"
+        class="h-4 w-4"
+      />
+      {{ item.label }}
+    </Button>
+  </div>
+  <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Billing Pasien:</h2>
+  <div class="flex flex-wrap gap-2 mb-2">
+    <Button
+      v-for="item in itemsTwo"
+      :key="item.value"
+      class="flex items-center gap-2 rounded-lg border border-orange-300 bg-white px-3 py-1 text-sm font-medium text-orange-500 hover:bg-orange-400 hover:text-white"
+    >
+      <Icon
+        :name="item.icon"
+        class="h-4 w-4"
+      />
+      {{ item.label }}
+    </Button>
+  </div>
+  </div>
+</template>
diff --git a/app/components/app/encounter/quick-info-full.vue b/app/components/app/encounter/quick-info-full.vue
index 7d088971..5b9e6872 100644
--- a/app/components/app/encounter/quick-info-full.vue
+++ b/app/components/app/encounter/quick-info-full.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+// Helpers
 import { format, parseISO } from 'date-fns'
 import { id as localeID } from 'date-fns/locale'
-import * as DE from '~/components/pub/my-ui/doc-entry'
-import type { Encounter } from '~/models/encounter'
 import { getAge } from '~/lib/date'
+
+// Types
+import type { Encounter } from '~/models/encounter'
 import { paymentTypes } from '~/lib/constants.vclaim'
 
 const props = defineProps<{
@@ -136,114 +138,105 @@ const bedNumber = computed(() => {
 </script>
 
 <template>
-  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
-    <!-- Data Pasien -->
-    <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Data Pasien:</h2>
+  <!-- 4 Column Grid Layout -->
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
+    <!-- No. RM -->
+    <div class="flex gap-1">
+      <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. RM</label>
+      <label class="w-[20px] flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ data.patient.number || '-' }}
+      </p>
+    </div>
 
-    <!-- 4 Column Grid Layout -->
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
-      <!-- No. RM -->
-      <div class="flex gap-1">
-        <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. RM</label>
-        <label class="w-[20px] flex-none">:</label>
-        <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ data.patient.number || '-' }}
-        </p>
-      </div>
+    <!-- Tanggal Lahir -->
+    <div class="flex gap-1">
+      <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Tanggal Lahir</label>
+      <label class="w-[20px] flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ birthDateFormatted }}
+      </p>
+    </div>
 
-      <!-- Tanggal Lahir -->
-      <div class="flex gap-1">
-        <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Tanggal Lahir</label>
-        <label class="w-[20px] flex-none">:</label>
-        <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ birthDateFormatted }}
-        </p>
-      </div>
+    <!-- Jenis Pembayaran -->
+    <div class="flex gap-1">
+      <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Jenis Pembayaran</label>
+      <label class="w-[20px] flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ paymentTypeLabel }}
+      </p>
+    </div>
 
-      <!-- Jenis Pembayaran -->
-      <div class="flex gap-1">
-        <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">
-          Jenis Pembayaran
-        </label>
-        <label class="w-[20px] flex-none">:</label>
-        <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ paymentTypeLabel }}
-        </p>
-      </div>
+    <!-- No Bed -->
+    <div class="flex gap-1">
+      <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No Bed</label>
+      <label class="w-[20px] flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ bedNumber }}
+      </p>
+    </div>
 
-      <!-- No Bed -->
-      <div class="flex gap-1">
-        <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No Bed</label>
-        <label class="w-[20px] flex-none">:</label>
-        <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ bedNumber }}
-        </p>
-      </div>
+    <!-- Nama Pasien -->
+    <div class="flex gap-1">
+      <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. Bed</label>
+      <label class="w-[20px] flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ data.patient.person.name || '-' }}
+      </p>
+    </div>
 
-      <!-- Nama Pasien -->
-      <div class="flex gap-1">
-        <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. Bed</label>
-        <label class="w-[20px] flex-none">:</label>
-        <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ data.patient.person.name || '-' }}
-        </p>
-      </div>
+    <!-- Tanggal Masuk RS -->
+    <div class="flex gap-1">
+      <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Tanggal Masuk RS</label>
+      <label class="w-[20px] flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ registeredDateFormatted }}
+      </p>
+    </div>
 
-      <!-- Tanggal Masuk RS -->
-      <div class="flex gap-1">
-        <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">
-          Tanggal Masuk RS
-        </label>
-        <label class="w-[20px] flex-none">:</label>
-        <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ registeredDateFormatted }}
-        </p>
-      </div>
+    <!-- No. Billing -->
+    <div class="flex gap-1">
+      <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. Billing</label>
+      <label class="w-[20px] flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ billingNumber }}
+      </p>
+    </div>
 
-      <!-- No. Billing -->
-      <div class="flex gap-1">
-        <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. Billing</label>
-        <label class="w-[20px] flex-none">:</label>
-        <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ billingNumber }}
-        </p>
-      </div>
+    <!-- DPJP -->
+    <div class="flex gap-1">
+      <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">DPJP</label>
+      <label class="w-[20px] flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ dpjp }}
+      </p>
+    </div>
 
-      <!-- DPJP -->
-      <div class="flex gap-1">
-        <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">DPJP</label>
-        <label class="w-[20px] flex-none">:</label>
-        <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ dpjp }}
-        </p>
-      </div>
+    <!-- Alamat -->
+    <div class="flex gap-1">
+      <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Alamat</label>
+      <label class="w-[20px] flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ address }}
+      </p>
+    </div>
 
-      <!-- Alamat -->
-      <div class="flex gap-1">
-        <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Alamat</label>
-        <label class="w-[20px] flex-none">:</label>
-        <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ address }}
-        </p>
-      </div>
+    <!-- Jenis Kelamin -->
+    <div class="flex gap-1">
+      <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Jenis Kelamin</label>
+      <label class="w-[20px] flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ genderLabel }}
+      </p>
+    </div>
 
-      <!-- Jenis Kelamin -->
-      <div class="flex gap-1">
-        <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Jenis Kelamin</label>
-        <label class="w-[20px] flex-none">:</label>
-        <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ genderLabel }}
-        </p>
-      </div>
-
-      <!-- Nama Ruang -->
-      <div class="flex gap-1">
-        <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Nama Ruang</label>
-        <label class="w-[20px] flex-none">:</label>
-        <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ roomName }}
-        </p>
-      </div>
+    <!-- Nama Ruang -->
+    <div class="flex gap-1">
+      <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Nama Ruang</label>
+      <label class="w-[20px] flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ roomName }}
+      </p>
     </div>
   </div>
 </template>
diff --git a/app/components/content/encounter/home.vue b/app/components/content/encounter/home.vue
index 7f33fc87..51a0d4ce 100644
--- a/app/components/content/encounter/home.vue
+++ b/app/components/content/encounter/home.vue
@@ -6,7 +6,8 @@ import { getDetail } from '~/services/encounter.service'
 import { getPositionAs } from '~/lib/roles'
 
 import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
-import EncounterQuickInfoFull from '~/components/app/encounter/quick-info-full.vue'
+import EncounterPatientInfo from '~/components/app/encounter/collapsible-patient-info.vue'
+import EncounterHistoryButtonMenu from '~/components/app/encounter/history-button-menu.vue'
 import CompMenu from '~/components/pub/my-ui/comp-menu/comp-menu.vue'
 import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 
@@ -45,6 +46,7 @@ const activeTab = computed({
 
 const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 const data = ref<any>(null)
+const isShowPatient = computed(() => data.value && data.value?.patient?.person)
 
 if (activePosition.value === 'none') { // if user position is none, redirect to home page
   router.push('/')
@@ -401,10 +403,13 @@ onMounted(async () => {
     <div class="mb-4">
       <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" @click="handleClick" />
     </div>
-    <EncounterQuickInfoFull
-      v-if="data && data.patient && data.patient.person"
+    <EncounterPatientInfo
+      v-if="isShowPatient"
       :data="data"
     />
+    <EncounterHistoryButtonMenu
+      v-if="isShowPatient"
+    />
     <CompTab
       v-if="currentDisplay === 'tab'"
       :data="tabs"