diff --git a/app/components/app/encounter/quick-info-full.vue b/app/components/app/encounter/quick-info-full.vue
new file mode 100644
index 00000000..52e26e07
--- /dev/null
+++ b/app/components/app/encounter/quick-info-full.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+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'
+import { paymentTypes } from '~/lib/constants.vclaim'
+
+const props = defineProps<{
+  data: Encounter
+}>()
+
+// Address
+const address = computed(() => {
+  if (props.data.patient.person.addresses && props.data.patient.person.addresses.length > 0) {
+    return props.data.patient.person.addresses.map((a) => a.address).join(', ')
+  }
+  return '-'
+})
+
+// DPJP
+const dpjp = computed(() => {
+  if (props.data.responsible_doctor) {
+    const dp = props.data.responsible_doctor.employee.person
+    return `${dp.frontTitle || ''} ${dp.name || ''} ${dp.endTitle || ''}`.trim()
+  } else if (props.data.appointment_doctor) {
+    const dp = props.data.appointment_doctor.employee.person
+    return `${dp.frontTitle || ''} ${dp.name || ''} ${dp.endTitle || ''}`.trim()
+  }
+  return '-'
+})
+
+// Tanggal Lahir dengan Umur
+const birthDateFormatted = computed(() => {
+  if (!props.data.patient.person.birthDate) {
+    return '-'
+  }
+  try {
+    const ageData = getAge(props.data.patient.person.birthDate)
+    const ageYears = ageData.extFormat.split(' ')[0] || '0'
+    return `${ageData.idFormat} (${ageYears} Tahun)`
+  } catch {
+    return '-'
+  }
+})
+
+// Tanggal Masuk RS dengan waktu
+const registeredDateFormatted = computed(() => {
+  const dateStr = props.data.registeredAt || props.data.visitDate
+  if (!dateStr) {
+    return '-'
+  }
+  try {
+    const date = parseISO(dateStr)
+    return format(date, 'dd MMMM yyyy HH:mm', { locale: localeID })
+  } catch {
+    return '-'
+  }
+})
+
+// Jenis Kelamin
+const genderLabel = computed(() => {
+  const code = props.data.patient.person.gender_code
+  if (!code) return '-'
+  // Map common gender codes
+  if (code === 'M' || code === 'male' || code.toLowerCase() === 'l') {
+    return 'Laki-laki'
+  } else if (code === 'F' || code === 'female' || code.toLowerCase() === 'p') {
+    return 'Perempuan'
+  }
+  return code
+})
+
+// Jenis Pembayaran
+const paymentTypeLabel = computed(() => {
+  const code = props.data.paymentMethod_code
+  if (!code) return '-'
+  
+  // Map payment method codes
+  if (code === 'insurance') {
+    return 'JKN'
+  } else if (code === 'jkn') {
+    return 'JKN'
+  } else if (code === 'jkmm') {
+    return 'JKMM'
+  } else if (code === 'spm') {
+    return 'SPM'
+  } else if (code === 'pks') {
+    return 'PKS'
+  }
+  
+  // Try to get from paymentTypes constant
+  if (paymentTypes[code]) {
+    return paymentTypes[code].split(' ')[0] // Get first part (e.g., "JKN" from "JKN (Jaminan...)")
+  }
+  
+  return code
+})
+
+// No. Billing - try to get from trx_number or other billing fields
+const billingNumber = computed(() => {
+  // Check if encounter has payment data with trx_number
+  if ((props.data as any).trx_number) {
+    return (props.data as any).trx_number
+  }
+  // Check if encounter has payment relation
+  if ((props.data as any).payment?.trx_number) {
+    return (props.data as any).payment.trx_number
+  }
+  return '-'
+})
+
+// Nama Ruang - from unit name or room relation
+const roomName = computed(() => {
+  if (props.data.unit?.name) {
+    return props.data.unit.name
+  }
+  // Check if there's a room relation
+  if ((props.data as any).room?.name) {
+    return (props.data as any).room.name
+  }
+  return '-'
+})
+
+// No Bed - from bed relation or field
+const bedNumber = computed(() => {
+  // Check if encounter has bed data
+  if ((props.data as any).bed?.number) {
+    return (props.data as any).bed.number
+  }
+  if ((props.data as any).bed_number) {
+    return (props.data as any).bed_number
+  }
+  return '-'
+})
+</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 font-semibold text-base md:text-lg 2xl:text-xl">
+      Data Pasien:
+    </h2>
+
+    <DE.Block
+      mode="preview"
+      labelSize="large"
+    >
+      <DE.Cell>
+        <DE.Label class="font-semibold">No. RM</DE.Label>
+        <DE.Field>
+          {{ data.patient.number || '-' }}
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label class="font-semibold">Nama Pasien</DE.Label>
+        <DE.Field>
+          {{ data.patient.person.name || '-' }}
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label class="font-semibold">Alamat</DE.Label>
+        <DE.Field>
+          {{ address }}
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label class="font-semibold">Tanggal Lahir</DE.Label>
+        <DE.Field>
+          {{ birthDateFormatted }}
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label class="font-semibold">Tanggal Masuk RS</DE.Label>
+        <DE.Field>
+          {{ registeredDateFormatted }}
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label class="font-semibold">Jenis Kelamin</DE.Label>
+        <DE.Field>
+          {{ genderLabel }}
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label class="font-semibold">Jenis Pembayaran</DE.Label>
+        <DE.Field>
+          {{ paymentTypeLabel }}
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label class="font-semibold">No. Billing</DE.Label>
+        <DE.Field>
+          {{ billingNumber }}
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label class="font-semibold">Nama Ruang</DE.Label>
+        <DE.Field>
+          {{ roomName }}
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label class="font-semibold">No Bed</DE.Label>
+        <DE.Field>
+          {{ bedNumber }}
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label class="font-semibold">DPJP</DE.Label>
+        <DE.Field>
+          {{ dpjp }}
+        </DE.Field>
+      </DE.Cell>
+    </DE.Block>
+  </div>
+</template>
+
diff --git a/app/components/content/encounter/home.vue b/app/components/content/encounter/home.vue
index 5379d24b..e09d7630 100644
--- a/app/components/content/encounter/home.vue
+++ b/app/components/content/encounter/home.vue
@@ -186,13 +186,6 @@ const tabsRaws: TabItem[] = [
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     subClassCode: ['reg', 'rehab', 'chemo', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
   },
-  {
-    value: 'patient-note',
-    label: 'CPRJ',
-    groups: ['medical'],
-    classCode: ['ambulatory', 'emergency', 'inpatient'],
-    subClassCode: ['reg', 'rehab', 'chemo', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
-  },
   {
     value: 'prescription',
     label: 'Order Obat',