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 --> <!-- 4 Column Grid Layout -->
<div class="grid grid-cols-1 gap-4 sm:grid-cols-4"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
<!-- No. RM --> <!-- No. RM -->
<div class="flex gap-2"> <div class="flex gap-1">
<label class="w-[100px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. RM</label> <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> <label class="w-[20px] flex-none">:</label>
<p class="flex-1 text-sm text-gray-900 dark:text-gray-100"> <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
{{ data.patient.number || '-' }} {{ data.patient.number || '-' }}
@@ -152,8 +152,8 @@ const bedNumber = computed(() => {
</div> </div>
<!-- Tanggal Lahir --> <!-- Tanggal Lahir -->
<div class="flex gap-2"> <div class="flex gap-1">
<label class="w-[100px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Tanggal Lahir</label> <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> <label class="w-[20px] flex-none">:</label>
<p class="flex-1 text-sm text-gray-900 dark:text-gray-100"> <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
{{ birthDateFormatted }} {{ birthDateFormatted }}
@@ -161,8 +161,8 @@ const bedNumber = computed(() => {
</div> </div>
<!-- Jenis Pembayaran --> <!-- Jenis Pembayaran -->
<div class="flex gap-2"> <div class="flex gap-1">
<label class="w-[100px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300"> <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">
Jenis Pembayaran Jenis Pembayaran
</label> </label>
<label class="w-[20px] flex-none">:</label> <label class="w-[20px] flex-none">:</label>
@@ -172,8 +172,8 @@ const bedNumber = computed(() => {
</div> </div>
<!-- No Bed --> <!-- No Bed -->
<div class="flex gap-2"> <div class="flex gap-1">
<label class="w-[100px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No Bed</label> <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> <label class="w-[20px] flex-none">:</label>
<p class="flex-1 text-sm text-gray-900 dark:text-gray-100"> <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
{{ bedNumber }} {{ bedNumber }}
@@ -181,58 +181,67 @@ const bedNumber = computed(() => {
</div> </div>
<!-- Nama Pasien --> <!-- Nama Pasien -->
<div> <div class="flex gap-1">
<label class="text-sm font-semibold text-gray-700 dark:text-gray-300">Nama Pasien</label> <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. Bed</label>
<p class="mt-1 text-sm text-gray-900 dark:text-gray-100"> <label class="w-[20px] flex-none">:</label>
<p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
{{ data.patient.person.name || '-' }} {{ data.patient.person.name || '-' }}
</p> </p>
</div> </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 --> <!-- Tanggal Masuk RS -->
<div> <div class="flex gap-1">
<label class="text-sm font-semibold text-gray-700 dark:text-gray-300">Tanggal Masuk RS</label> <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">
<p class="mt-1 text-sm text-gray-900 dark:text-gray-100"> 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 }} {{ registeredDateFormatted }}
</p> </p>
</div> </div>
<!-- No. Billing --> <!-- No. Billing -->
<div> <div class="flex gap-1">
<label class="text-sm font-semibold text-gray-700 dark:text-gray-300">No. Billing</label> <label class="w-[150px] flex-none 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"> <label class="w-[20px] flex-none">:</label>
<p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
{{ billingNumber }} {{ billingNumber }}
</p> </p>
</div> </div>
<!-- Nama Ruang --> <!-- DPJP -->
<div> <div class="flex gap-1">
<label class="text-sm font-semibold text-gray-700 dark:text-gray-300">Nama Ruang</label> <label class="w-[150px] flex-none 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"> <label class="w-[20px] flex-none">:</label>
{{ roomName }} <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
{{ dpjp }}
</p> </p>
</div> </div>
<!-- DPJP (spans 2 columns on lg) --> <!-- Alamat -->
<div class="lg:col-span-2"> <div class="flex gap-1">
<label class="text-sm font-semibold text-gray-700 dark:text-gray-300">DPJP</label> <label class="w-[150px] flex-none 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"> <label class="w-[20px] flex-none">:</label>
{{ dpjp }} <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> </p>
</div> </div>
</div> </div>