From 7fe66b1f404c84339043cbbbcff5355123d0020b Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 14 Nov 2025 15:18:46 +0700
Subject: [PATCH] fix(encounter): unifies grid layout for patient info display

---
 .../app/encounter/quick-info-full.vue         | 95 ++++++++++---------
 1 file changed, 52 insertions(+), 43 deletions(-)

diff --git a/app/components/app/encounter/quick-info-full.vue b/app/components/app/encounter/quick-info-full.vue
index 4c1f3861..7d088971 100644
--- a/app/components/app/encounter/quick-info-full.vue
+++ b/app/components/app/encounter/quick-info-full.vue
@@ -143,8 +143,8 @@ const bedNumber = computed(() => {
     <!-- 4 Column Grid Layout -->
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
       <!-- No. RM -->
-      <div class="flex gap-2">
-        <label class="w-[100px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. RM</label>
+      <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 || '-' }}
@@ -152,8 +152,8 @@ const bedNumber = computed(() => {
       </div>
 
       <!-- Tanggal Lahir -->
-      <div class="flex gap-2">
-        <label class="w-[100px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Tanggal Lahir</label>
+      <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 }}
@@ -161,8 +161,8 @@ const bedNumber = computed(() => {
       </div>
 
       <!-- Jenis Pembayaran -->
-      <div class="flex gap-2">
-        <label class="w-[100px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">
+      <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>
@@ -172,8 +172,8 @@ const bedNumber = computed(() => {
       </div>
 
       <!-- No Bed -->
-      <div class="flex gap-2">
-        <label class="w-[100px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No Bed</label>
+      <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 }}
@@ -181,58 +181,67 @@ const bedNumber = computed(() => {
       </div>
 
       <!-- Nama Pasien -->
-      <div>
-        <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">Nama Pasien</label>
-        <p class="mt-1 text-sm text-gray-900 dark:text-gray-100">
+      <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>
 
-      <!-- Jenis Kelamin -->
-      <div>
-        <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">Jenis Kelamin</label>
-        <p class="mt-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ genderLabel }}
-        </p>
-      </div>
-
-      <!-- Alamat (spans 2 columns on lg) -->
-      <div class="lg:col-span-2">
-        <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">Alamat</label>
-        <p class="mt-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ address }}
-        </p>
-      </div>
-
       <!-- Tanggal Masuk RS -->
-      <div>
-        <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">Tanggal Masuk RS</label>
-        <p class="mt-1 text-sm text-gray-900 dark:text-gray-100">
+      <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>
-        <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">No. Billing</label>
-        <p class="mt-1 text-sm text-gray-900 dark:text-gray-100">
+      <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>
 
-      <!-- Nama Ruang -->
-      <div>
-        <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">Nama Ruang</label>
-        <p class="mt-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ roomName }}
+      <!-- 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 (spans 2 columns on lg) -->
-      <div class="lg:col-span-2">
-        <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">DPJP</label>
-        <p class="mt-1 text-sm text-gray-900 dark:text-gray-100">
-          {{ dpjp }}
+      <!-- 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>
+
+      <!-- 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>