munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(encounter): unifies grid layout for patient info display

Browse Source
This commit is contained in:
riefive
2025-11-14 15:18:46 +07:00
parent 840efeba8c
commit 7fe66b1f40
1 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/encounter/quick-info-full.vue
+52 -43
View File
@@ -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>