From 59e42f31b5519281d94bca50505066db423d76a8 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Thu, 29 Jan 2026 09:50:22 +0700
Subject: [PATCH] update minor anjungan

---
 pages/Anjungan/Anjungan/[id].vue | 109 +++++++++++++++----------------
 1 file changed, 51 insertions(+), 58 deletions(-)

diff --git a/pages/Anjungan/Anjungan/[id].vue b/pages/Anjungan/Anjungan/[id].vue
index 912337f..59e6edb 100644
--- a/pages/Anjungan/Anjungan/[id].vue
+++ b/pages/Anjungan/Anjungan/[id].vue
@@ -8,7 +8,7 @@
           class="header-logo"
           width="40"
           height="40"
-          style="width: 40px; height: 40px; object-fit= contain;"
+          style="width: 40px; height: 40px; object-fit: contain;"
         />
       </div>
       <div class="header-content">
@@ -112,6 +112,14 @@
         <v-card-title class="dialog-header">
           <v-icon size="20" class="mr-2">mdi-check-circle</v-icon>
           Konfirmasi Pilihan
+          <v-btn
+            icon
+            class="dialog-close-btn"
+            size="small"
+            @click="showVisitTypeDialog = false"
+          >
+            <v-icon size="20" color="white">mdi-close</v-icon>
+          </v-btn>
         </v-card-title>
 
         <v-card-text class="pa-6" v-if="selectedClinic">
@@ -249,10 +257,11 @@
             </v-row>
           </div>
           
-          <!-- For Non-Eksekutif: Show 3 payment type buttons -->
+          <!-- For Non-Eksekutif: Show payment type buttons and action buttons -->
           <div v-else>
+            <!-- Row 1: BPJS and UMUM -->
             <v-row dense>
-              <v-col cols="4">
+              <v-col cols="6">
                 <v-btn
                   color="success-600"
                   class="text-white payment-type-btn"
@@ -265,7 +274,7 @@
                   BPJS
                 </v-btn>
               </v-col>
-              <v-col cols="4">
+              <v-col cols="6">
                 <v-btn
                   color="secondary-600"
                   class="text-white payment-type-btn"
@@ -278,7 +287,15 @@
                   UMUM / JKMM / SPM / DLL
                 </v-btn>
               </v-col>
-              <v-col cols="4">
+            </v-row>
+            
+            <p v-if="isShift1Full(selectedClinic)" class="disabled-hint mt-2">
+              Kuota hari ini habis
+            </p>
+            
+            <!-- Row 2: JADWAL LAIN and Fast Track -->
+            <v-row dense class="mt-3">
+              <v-col cols="6">
                 <v-btn
                   color="primary-600"
                   class="text-white payment-type-btn"
@@ -289,28 +306,18 @@
                   JADWAL LAIN
                 </v-btn>
               </v-col>
-            </v-row>
-            <p v-if="isShift1Full(selectedClinic)" class="disabled-hint mt-2">
-              Kuota hari ini habis
-            </p>
-            
-            <!-- Fast Track button for non-eksekutif -->
-            <v-row dense class="mt-3">
-              <v-col cols="4" offset="4">
+              <v-col cols="6">
                 <v-btn
-                  color="yellow-darken-2"
-                  class="text-white"
+                  color="warning-600"
+                  class="text-neutral-900"
                   size="large"
                   block
                   @click="registerPatientDirectly('FAST_TRACK')"
                   :disabled="isShift1Full(selectedClinic)"
                   :class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
                 >
-                  Fast Track
+                  FAST TRACK
                 </v-btn>
-                <p v-if="isShift1Full(selectedClinic)" class="disabled-hint">
-                  Kuota hari ini habis
-                </p>
               </v-col>
             </v-row>
           </div>
@@ -336,15 +343,7 @@
           </v-row>
         </v-card-text>
 
-        <v-card-actions class="justify-center pa-4 pt-0">
-          <v-btn
-            variant="outlined"
-            color="neutral-600"
-            @click="showVisitTypeDialog = false"
-          >
-            Tutup
-          </v-btn>
-        </v-card-actions>
+
       </v-card>
     </v-dialog>
 
@@ -1523,8 +1522,22 @@ watch(lastRegisteredPatient, (newVal) => {
   align-items: center;
   font-size: 18px;
   font-weight: 700;
+  position: relative;
 }
 
+.dialog-close-btn {
+  position: absolute !important;
+  top: 12px;
+  right: 12px;
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  z-index: 10;
+  
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3) !important;
+  }
+}
+
+
 .dialog-header-simple {
   padding: 20px 24px;
   font-size: 18px;
@@ -1605,7 +1618,7 @@ watch(lastRegisteredPatient, (newVal) => {
 
 .doctor-info-unified {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   background-color: var(--color-neutral-100);
   border: 1px solid var(--color-neutral-300);
   border-radius: 8px;
@@ -1625,38 +1638,15 @@ watch(lastRegisteredPatient, (newVal) => {
   font-size: 13px;
   line-height: 1.4;
   color: var(--color-neutral-800);
-  word-break: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
 }
 
 /* Responsive & Separator Logic */
-@media (min-width: 961px) {
-  .doctor-info-unit:nth-child(4n) {
-    border-right: none;
-  }
-}
-
-@media (max-width: 960px) {
-  .doctor-info-unified {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (max-width: 960px) and (min-width: 769px) {
-  .doctor-info-unit:nth-child(3n) {
-    border-right: none;
-  }
-}
-
-@media (max-width: 768px) {
-  .doctor-info-unified {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) and (min-width: 481px) {
-  .doctor-info-unit:nth-child(2n) {
-    border-right: none;
-  }
+.doctor-info-unit:nth-child(2n) {
+  border-right: none;
 }
 
 @media (max-width: 480px) {
@@ -1666,6 +1656,9 @@ watch(lastRegisteredPatient, (newVal) => {
   .doctor-info-unit {
     border-right: none;
   }
+  .doctor-info-unit:nth-child(2n) {
+    border-right: none;
+  }
 }
 
 .doctor-selection-section {