update icon header

pages/Anjungan/Anjungan/[id].vue

@@ -1363,15 +1363,15 @@ watch(lastRegisteredPatient, (newVal) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 54px;
+  height: 54px;
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .header-logo {
-  width: 28px;
-  height: 28px;
+  width: 40px;
+  height: 40px;
   object-fit: contain;
 }
 

pages/Anjungan/Anjungan/index.vue

@@ -178,15 +178,15 @@ const navigateToSettings = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 54px;
+  height: 54px;
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .header-logo {
-  width: 28px;
-  height: 28px;
+  width: 40px;
+  height: 40px;
   object-fit: contain;
 }
 

pages/Anjungan/AntreanMasuk/index.vue

@@ -3,7 +3,11 @@
   <div>
     <div class="selection-header">
       <div class="header-icon">
-        <v-icon size="28" color="white">mdi-ticket-account</v-icon>
+        <img
+          src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp"
+          alt="RSUD Logo"
+          class="header-logo"
+        />
       </div>
       <div class="header-content">
         <h1 class="main-title">Pilih Layar Antrean Masuk</h1>
@@ -173,12 +177,18 @@ const navigateToSettings = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 54px;
+  height: 54px;
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
+.header-logo {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
 .header-content {
   flex: 1;
   color: var(--color-neutral-100);

pages/Anjungan/AntrianKlinikRuang/index.vue

@@ -205,15 +205,15 @@ const navigateToSettings = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 54px;
+  height: 54px;
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .header-logo {
-  width: 28px;
-  height: 28px;
+  width: 40px;
+  height: 40px;
   object-fit: contain;
 }
 

pages/Anjungan/AntrianLoket/index.vue

@@ -187,15 +187,15 @@ const getKlinikName = (kode) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 54px;
+  height: 54px;
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .header-logo {
-  width: 28px;
-  height: 28px;
+  width: 40px;
+  height: 40px;
   object-fit: contain;
 }
 

pages/Setting/ScreenAntreanMasuk.vue

@@ -5,26 +5,31 @@
       <div class="header-content">
         <div class="header-left">
           <div class="header-icon">
-            <v-icon size="32" color="white">mdi-ticket-account</v-icon>
+            <v-icon size="28" color="white">mdi-ticket-account</v-icon>
           </div>
           <div class="header-text">
             <h2 class="page-title">Screen Antrean Masuk</h2>
             <p class="page-subtitle">Rabu, 13 Agustus 2025 - Konfigurasi Layar Antrean Masuk</p>
           </div>
         </div>
+      </div>
+    </div>
+
+    <v-container>
+      <!-- Action Bar -->
+      <div class="action-bar mb-4">
+        <v-spacer></v-spacer>
         <v-btn 
-          color="white" 
+          color="primary" 
           @click="openTambahDialog"
           elevation="0"
-          class="add-btn"
+          class="action-btn"
         >
           <v-icon left size="20">mdi-plus-circle</v-icon>
           Tambah Screen
         </v-btn>
       </div>
-    </div>
 
-    <v-container>
       <v-card>
         <!-- Table -->
         <v-card-text>
@@ -473,7 +478,8 @@ $font-weight-semibold: 600;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 32px;
+  padding: 16px 28px;
+  height: 80px;
   color: $neutral-100;
 }
 
@@ -484,15 +490,15 @@ $font-weight-semibold: 600;
 
 .header-icon {
   background: rgba(255, 255, 255, 0.2);
-  border-radius: 16px;
-  padding: 16px;
-  margin-right: 20px;
+  border-radius: 12px;
+  padding: 12px;
+  margin-right: 16px;
   backdrop-filter: blur(10px);
 }
 
 .page-title {
-  font-size: 36px;
-  line-height: 44px;
+  font-size: 32px;
+  line-height: 40px;
   font-weight: $font-weight-semibold;
   margin: 0;
   color: $neutral-100;
@@ -500,10 +506,10 @@ $font-weight-semibold: 600;
 }
 
 .page-subtitle {
-  margin: 4px 0 0 0;
+  margin: 2px 0 0 0;
   opacity: 0.9;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 15px;
+  line-height: 22px;
   font-weight: $font-weight-regular;
   color: $neutral-100;
 }
@@ -517,6 +523,28 @@ $font-weight-semibold: 600;
   color: $secondary-600 !important;
 }
 
+// ============================================
+// ACTION BAR
+// ============================================
+.action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  background: $neutral-100;
+  border-radius: 12px;
+  border: 1px solid $neutral-400;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.action-btn {
+  font-weight: $font-weight-semibold;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
 // ============================================
 // DATA TABLE
 // ============================================