From 00bb95431cb35aaa650b15ae7741c0444b75e873 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Mon, 19 Jan 2026 09:21:30 +0700
Subject: [PATCH] update page header

---
 .env example                                |  51 ---
 pages/AdminKlinik.vue                       |   2 +-
 pages/AdminKlinikRuang/[kodeKlinik].vue     |   2 +-
 pages/AdminKlinikRuang/index.vue            |   2 +-
 pages/Anjungan/AdminAnjungan.vue            |   4 +-
 pages/Anjungan/Anjungan/[id].vue            |  57 ++-
 pages/BuatAntrean.vue                       |  16 +-
 pages/CheckInPasien/checkIn.vue             | 426 ++++++++++----------
 pages/MonitoringPasien/monitoringPasien.vue |   9 +-
 pages/Setting/HakAkses.vue                  |  11 +-
 pages/Setting/MasterAnjungan.vue            |  17 +-
 pages/Setting/MasterKlinik.vue              |  18 +-
 pages/Setting/MasterKlinikRuang.vue         |  19 +-
 pages/Setting/MasterLoket.vue               |   8 +-
 pages/Setting/MasterPenunjang.vue           |   6 +-
 pages/Setting/Screen.vue                    |  17 +-
 pages/Setting/ScreenAntreanMasuk.vue        |  17 +-
 pages/Setting/UserLogin.vue                 |  13 +-
 pages/verifikasiAkun/VerifikasiAkun.vue     |  18 +-
 stores/navItems1.ts                         |   8 +-
 20 files changed, 355 insertions(+), 366 deletions(-)
 delete mode 100644 .env example

diff --git a/.env example b/.env example
deleted file mode 100644
index fbf6e6d..0000000
--- a/.env example	
+++ /dev/null
@@ -1,51 +0,0 @@
-# # .env
-
-# # A random string used to hash tokens, sign cookies, and generate cryptographic keys.
-# # You can generate one here: https://generate-secret.vercel.app/32
-# NUXT_AUTH_SECRET="your-super-secret-string-of-at-least-32-characters"
-
-# # The base URL of your application
-# AUTH_ORIGIN="http://localhost:3000"
-
-# # Keycloak Credentials
-# # Get these from your Keycloak client configuration
-# KEYCLOAK_CLIENT_ID="nuxt-app"
-# KEYCLOAK_CLIENT_SECRET="OaB90t1HEEFBn31PUX4qELWHwErnwFtg"
-# KEYCLOAK_ISSUER="http://localhost:8080/realms/rssa-app"
-
-
-# .env
-
-# A random string used to hash tokens, sign cookies, and generate cryptographic keys.
-# You can generate one here: https://generate-secret.vercel.app/32
-NUXT_AUTH_SECRET="your-super-secret-string-of-at-least-32-characters"
-
-
-
-# Keycloak Credentials
-# Get these from your Keycloak client configuration
-# KEYCLOAK_CLIENT_ID="nuxt-app"
-# KEYCLOAK_CLIENT_SECRET="OaB90t1HEEFBn31PUX4qELWHwErnwFtg"
-# KEYCLOAK_ISSUER="http://localhost:8080/realms/rssa-app"
-
-KEYCLOAK_CLIENT_ID="akbar-test"
-KEYCLOAK_CLIENT_SECRET="FDyv3UYMgJOYPnvzXVVv6diRtcgEevKg"
-KEYCLOAK_ISSUER="https://auth.rssa.top/realms/sandbox"
-# The base URL of your application
-# AUTH_ORIGIN="http://localhost:3000"
-# AUTH_ORIGIN="http://10.10.150.175:3001"
-# AUTH_ORIGIN="http://0.0.0.0:3000"
-AUTH_ORIGIN="https://antrean.dev.rssa.id"
-# AUTH_ORIGIN="https://antrean.rssa.id"
-
-#nuxt config.ts dev server host and port
-# HOST="localhost"
-# PORT=3000
-# HOST="http://10.10.150.175:3000"
-# PORT=3000
-HOST="0.0.0.0"
-PORT=3000
-# HOST="https://antrean.dev.rssa.id/"
-# PORT=3000
-# HOST="https://antrean.rssa.id/"
-# PORT=3000
\ No newline at end of file
diff --git a/pages/AdminKlinik.vue b/pages/AdminKlinik.vue
index 302b1cb..66d3dd7 100644
--- a/pages/AdminKlinik.vue
+++ b/pages/AdminKlinik.vue
@@ -6,7 +6,7 @@
       title="Admin Klinik"
       :subtitle="currentDate"
       :show-add-button="false"
-      theme="secondary"
+      theme="primary"
     />
 
     <!-- Main Content Grid -->
diff --git a/pages/AdminKlinikRuang/[kodeKlinik].vue b/pages/AdminKlinikRuang/[kodeKlinik].vue
index 955215b..6d851b3 100644
--- a/pages/AdminKlinikRuang/[kodeKlinik].vue
+++ b/pages/AdminKlinikRuang/[kodeKlinik].vue
@@ -6,7 +6,7 @@
       :title="`Admin Klinik Ruang - ${klinikData?.namaKlinik || ''}`"
       :subtitle="currentDate"
       :show-add-button="false"
-      theme="warning"
+      theme="primary"
     />
 
     <!-- Global Search and Actions -->
diff --git a/pages/AdminKlinikRuang/index.vue b/pages/AdminKlinikRuang/index.vue
index 9ad9706..9633167 100644
--- a/pages/AdminKlinikRuang/index.vue
+++ b/pages/AdminKlinikRuang/index.vue
@@ -5,7 +5,7 @@
       title="Admin Klinik Ruang"
       subtitle="Pilih Klinik untuk mengelola antrian ruang"
       :show-add-button="false"
-      theme="warning"
+      theme="primary"
     />
 
     <v-row class="mt-4">
diff --git a/pages/Anjungan/AdminAnjungan.vue b/pages/Anjungan/AdminAnjungan.vue
index eb6e028..a290587 100644
--- a/pages/Anjungan/AdminAnjungan.vue
+++ b/pages/Anjungan/AdminAnjungan.vue
@@ -199,10 +199,10 @@ const items = ref([
 
 <style scoped>
 .page-header {
-  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  background: linear-gradient(135deg, #3A61C9 0%, #3556AE 100%);
   border-radius: 16px;
   margin-bottom: 24px;
-  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
+  box-shadow: 0 8px 32px rgba(58, 97, 201, 0.3);
 }
 
 .header-content {
diff --git a/pages/Anjungan/Anjungan/[id].vue b/pages/Anjungan/Anjungan/[id].vue
index f4a9153..c591b90 100644
--- a/pages/Anjungan/Anjungan/[id].vue
+++ b/pages/Anjungan/Anjungan/[id].vue
@@ -1407,7 +1407,7 @@ watch(lastRegisteredPatient, (newVal) => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 24px;
+  padding: 24px 40px;
   color: var(--color-neutral-100);
   gap: 32px;
 }
@@ -1415,13 +1415,14 @@ watch(lastRegisteredPatient, (newVal) => {
 .header-left {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 24px;
 }
 
 .header-icon {
   background: rgba(255, 255, 255, 0.95);
-  border-radius: 12px;
-  padding: 12px;
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
   backdrop-filter: blur(10px);
   display: flex;
   align-items: center;
@@ -1430,8 +1431,8 @@ watch(lastRegisteredPatient, (newVal) => {
 }
 
 .header-logo {
-  width: 48px;
-  height: 48px;
+  width: 64px;
+  height: 64px;
   object-fit: contain;
   padding: 4px;
 }
@@ -1441,16 +1442,20 @@ watch(lastRegisteredPatient, (newVal) => {
 }
 
 .page-title {
-  font-size: 26px;
-  font-weight: 700;
+  font-size: 48px;
+  font-weight: 800;
   margin: 0;
   color: var(--color-neutral-100);
+  letter-spacing: 2px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  line-height: 1;
 }
 
 .page-subtitle {
-  margin: 4px 0 0 0;
+  margin: 6px 0 0 0;
   opacity: 0.95;
-  font-size: 14px;
+  font-size: 20px;
+  font-weight: 600;
   color: var(--color-neutral-100);
 }
 
@@ -2027,7 +2032,22 @@ watch(lastRegisteredPatient, (newVal) => {
   }
 
   .page-title {
-    font-size: 24px;
+    font-size: 36px;
+    letter-spacing: 1.5px;
+  }
+
+  .page-subtitle {
+    font-size: 18px;
+  }
+
+  .header-icon {
+    width: 64px;
+    height: 64px;
+  }
+
+  .header-logo {
+    width: 52px;
+    height: 52px;
   }
 
   .clinic-card {
@@ -2049,11 +2069,22 @@ watch(lastRegisteredPatient, (newVal) => {
   }
 
   .page-title {
-    font-size: 22px;
+    font-size: 28px;
+    letter-spacing: 1px;
+  }
+
+  .page-subtitle {
+    font-size: 16px;
   }
 
   .header-icon {
-    padding: 10px;
+    width: 56px;
+    height: 56px;
+  }
+
+  .header-logo {
+    width: 44px;
+    height: 44px;
   }
 
   .clinic-card {
diff --git a/pages/BuatAntrean.vue b/pages/BuatAntrean.vue
index fbbbebd..274c2bc 100644
--- a/pages/BuatAntrean.vue
+++ b/pages/BuatAntrean.vue
@@ -547,11 +547,11 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
-$primary-700: #FF9B1B;
-$primary-600: #FFA532;
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
 
-$secondary-700: #0053AD;
-$secondary-600: #0671E0;
+$secondary-700: #E65A0D;
+$secondary-600: #F16F29;
 
 $warning-600: #FFB95F;
 
@@ -575,7 +575,7 @@ $font-weight-bold: 700;
 .page-header {
   background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(255, 165, 50, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
@@ -674,7 +674,7 @@ $font-weight-bold: 700;
 }
 
 .dialog-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   color: $neutral-100;
   padding: 20px 24px;
   display: flex;
@@ -683,11 +683,11 @@ $font-weight-bold: 700;
 }
 
 .dialog-header-warning {
-  background: linear-gradient(135deg, $warning-600 0%, $primary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
 }
 
 .dialog-header-secondary {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
 }
 
 .headline-4 {
diff --git a/pages/CheckInPasien/checkIn.vue b/pages/CheckInPasien/checkIn.vue
index 5484559..45980cd 100644
--- a/pages/CheckInPasien/checkIn.vue
+++ b/pages/CheckInPasien/checkIn.vue
@@ -8,42 +8,20 @@
             <!-- Main Card dengan Glassmorphism -->
             <v-card class="main-card" elevation="0">
               
-              <!-- Header Minimalis -->
-              <div class="header-modern">
-                <div class="header-content">
-                  <div class="icon-circle">
-                    <v-icon size="28" color="white">mdi-hospital-building</v-icon>
-                  </div>
-                  <div class="header-text">
-                    <h1 class="title-modern">Check-in Pasien</h1>
-                  </div>
-                </div>
-                
-                <!-- Tabs Minimalis -->
-                <v-tabs 
-                  v-model="tab" 
-                  align-tabs="center" 
-                  class="tabs-modern mt-1"
-                  bg-color="transparent"
-                  slider-color="#FB8C00"
-                  height="32"
-                >
-                  <v-tab value="checkin" class="tab-modern">
-                    <v-icon size="18" class="mr-2">mdi-login</v-icon>
-                    <span>Check-in</span>
-                  </v-tab>
-                  <v-tab value="generate" class="tab-modern">
-                    <v-icon size="18" class="mr-2">mdi-qrcode</v-icon>
-                    <span>Generate QR</span>
-                  </v-tab>
-                </v-tabs>
-              </div>
+              <!-- Page Header Component -->
+              <PageHeader
+                icon="mdi-hospital-building"
+                title="Check-In Pasien"
+                subtitle="Scan QR Code atau Input Manual untuk Check-In"
+                :show-add-button="true"
+                add-button-text="Generate QR"
+                theme="primary"
+                @add-click="showGenerateQRDialog = true"
+              />
 
                 <v-card-text class="content-modern pa-4 pa-md-6">
-                  <v-window v-model="tab" :key="`window-${tab}`">
-                    <!-- Tab Check-in (Combined Scan QR + Manual) -->
-                    <v-window-item value="checkin" :key="'checkin-tab'">
-                      <div class="checkin-wrapper">
+                  <!-- Check-in Content (Combined Scan QR + Manual) -->
+                  <div class="checkin-wrapper">
                         <v-row class="checkin-layout" no-gutters>
                         <!-- Left: Scan QR -->
                         <v-col cols="12" md="6" class="checkin-left-col">
@@ -392,209 +370,217 @@
                       </v-col>
                       </v-row>
                       </div>
-                    </v-window-item>
+              </v-card-text>
+            </v-card>
 
-                  <!-- Tab Generate QR -->
-                  <v-window-item value="generate">
-                    <div class="tab-content">
-                      <!-- Status Header -->
-                      <div class="status-header mb-3">
-                        <div class="status-icon-wrapper">
-                          <v-icon :color="primaryColor" size="24">mdi-qrcode</v-icon>
-                        </div>
-                        <div class="status-text">
-                          <h3 class="status-title">Generate QR Code untuk Testing</h3>
-                          <p class="status-subtitle">Buat QR code yang bisa Anda scan di tab "Scan QR"</p>
-                        </div>
-                      </div>
+            <!-- Generate QR Dialog -->
+            <v-dialog v-model="showGenerateQRDialog" max-width="600px" scrollable>
+              <v-card>
+                <v-card-title class="text-h5 pa-4 bg-primary text-white">
+                  <v-icon class="mr-2" color="white">mdi-qrcode</v-icon>
+                  Generate QR Code untuk Testing
+                </v-card-title>
+                <v-card-text class="pa-6">
+                  <!-- Status Header -->
+                  <div class="mb-4">
+                    <p class="text-body-2 text-grey">Buat QR code yang bisa Anda scan untuk testing check-in</p>
+                  </div>
 
-                      <!-- Quick Preset Buttons -->
-                      <div class="mb-3">
-                        <p class="text-caption text-grey text-center mb-2">Quick Test QR Codes:</p>
+                  <!-- Quick Preset Buttons -->
+                  <div class="mb-4">
+                    <p class="text-caption text-grey text-center mb-2">Quick Test QR Codes:</p>
+                    <v-row dense>
+                      <v-col cols="6">
+                        <v-btn
+                          variant="outlined"
+                          color="success"
+                          size="small"
+                          @click="generateQuickQR('ALLOWED')"
+                          class="text-none"
+                          block
+                        >
+                          <v-icon start size="16">mdi-check-circle</v-icon>
+                          Test ALLOWED
+                        </v-btn>
+                      </v-col>
+                      <v-col cols="6">
+                        <v-btn
+                          variant="outlined"
+                          color="warning"
+                          size="small"
+                          @click="generateQuickQR('NOT_ALLOWED')"
+                          class="text-none"
+                          block
+                        >
+                          <v-icon start size="16">mdi-clock-alert</v-icon>
+                          Test NOT_ALLOWED
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </div>
+
+                  <!-- Form Generate -->
+                  <v-form @submit.prevent="generateQRCode">
+                    <v-select
+                      v-model="selectedKlinik"
+                      label="Pilih Klinik/Poli"
+                      :items="klinikOptions"
+                      prepend-inner-icon="mdi-hospital-building"
+                      variant="outlined"
+                      :color="primaryColor"
+                      class="mb-3"
+                      density="comfortable"
+                      :rules="[v => !!v || 'Klinik/Poli harus dipilih']"
+                      hide-details="auto"
+                      required
+                    ></v-select>
+                    
+                    <v-text-field
+                      v-model="generatePatientId"
+                      label="ID Pasien"
+                      placeholder="Auto-generate: P-00001"
+                      prepend-inner-icon="mdi-identifier"
+                      variant="outlined"
+                      :color="primaryColor"
+                      class="mb-3"
+                      density="comfortable"
+                      readonly
+                      hint="ID Pasien akan di-generate secara otomatis secara sequential"
+                      persistent-hint
+                      hide-details="auto"
+                    >
+                      <template v-slot:append-inner>
+                        <v-btn
+                          icon
+                          size="small"
+                          variant="text"
+                          @click="generatePatientId = generateSequentialPatientId()"
+                          title="Generate ID Baru"
+                        >
+                          <v-icon size="18">mdi-refresh</v-icon>
+                        </v-btn>
+                      </template>
+                    </v-text-field>
+
+                    <v-select
+                      v-model="generateStatus"
+                      label="Status Check-in"
+                      :items="statusOptions"
+                      prepend-inner-icon="mdi-shield-check"
+                      variant="outlined"
+                      :color="primaryColor"
+                      class="mb-4"
+                      density="comfortable"
+                      hide-details="auto"
+                    ></v-select>
+
+                    <div class="d-flex justify-center">
+                      <v-btn
+                        color="primary"
+                        size="large"
+                        type="submit"
+                        elevation="0"
+                        :disabled="!selectedKlinik"
+                      >
+                        <v-icon start size="20">mdi-qrcode-plus</v-icon>
+                        Generate QR Code
+                      </v-btn>
+                    </div>
+                  </v-form>
+
+                  <!-- QR Code Display -->
+                  <div v-if="generatedQRData" class="mt-6">
+                    <v-card variant="outlined" class="pa-4">
+                      <div class="text-center">
+                        <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
+                        <div id="qrcode" class="qr-code-container mb-4"></div>
+                        
+                        <v-chip :color="generateStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
+                          <v-icon start>{{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
+                          {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
+                        </v-chip>
+
+                        <p class="text-body-2 text-grey mb-4">
+                          Data: {{ generatedQRData }}
+                        </p>
+
+                        <!-- Action Buttons -->
                         <v-row dense>
-                          <v-col cols="6">
+                          <v-col cols="4">
                             <v-btn
                               variant="outlined"
-                              color="success"
-                              size="small"
-                              @click="generateQuickQR('ALLOWED')"
-                              class="text-none"
+                              :color="primaryColor"
                               block
+                              size="small"
+                              @click="downloadQR"
+                              class="text-none"
                             >
-                              <v-icon start size="16">mdi-check-circle</v-icon>
-                              Test ALLOWED
+                              <v-icon start size="18">mdi-download</v-icon>
+                              Download
                             </v-btn>
                           </v-col>
-                          <v-col cols="6">
+                          <v-col cols="4">
                             <v-btn
                               variant="outlined"
-                              color="warning"
-                              size="small"
-                              @click="generateQuickQR('NOT_ALLOWED')"
-                              class="text-none"
+                              :color="primaryColor"
                               block
+                              size="small"
+                              @click="copyQRToClipboard"
+                              class="text-none"
                             >
-                              <v-icon start size="16">mdi-clock-alert</v-icon>
-                              Test NOT_ALLOWED
+                              <v-icon start size="18">mdi-content-copy</v-icon>
+                              Copy
+                            </v-btn>
+                          </v-col>
+                          <v-col cols="4">
+                            <v-btn
+                              variant="outlined"
+                              :color="primaryColor"
+                              block
+                              size="small"
+                              @click="shareQR"
+                              class="text-none"
+                            >
+                              <v-icon start size="18">mdi-share-variant</v-icon>
+                              Share
                             </v-btn>
                           </v-col>
                         </v-row>
                       </div>
+                    </v-card>
 
-                      <!-- Form Generate -->
-                      <v-form @submit.prevent="generateQRCode">
-                        <v-select
-                          v-model="selectedKlinik"
-                          label="Pilih Klinik/Poli"
-                          :items="klinikOptions"
-                          prepend-inner-icon="mdi-hospital-building"
-                          variant="outlined"
-                          :color="primaryColor"
-                          class="input-modern mb-3"
-                          density="comfortable"
-                          :rules="[v => !!v || 'Klinik/Poli harus dipilih']"
-                          hide-details="auto"
-                          required
-                        ></v-select>
-                        
-                        <v-text-field
-                          v-model="generatePatientId"
-                          label="ID Pasien"
-                          placeholder="Auto-generate: P-00001"
-                          prepend-inner-icon="mdi-identifier"
-                          variant="outlined"
-                          :color="primaryColor"
-                          class="input-modern mb-3"
-                          density="comfortable"
-                          readonly
-                          hint="ID Pasien akan di-generate secara otomatis secara sequential"
-                          persistent-hint
-                          hide-details="auto"
-                        >
-                          <template v-slot:append-inner>
-                            <v-btn
-                              icon
-                              size="small"
-                              variant="text"
-                              @click="generatePatientId = generateSequentialPatientId()"
-                              title="Generate ID Baru"
-                            >
-                              <v-icon size="18">mdi-refresh</v-icon>
-                            </v-btn>
-                          </template>
-                        </v-text-field>
-
-                        <v-select
-                          v-model="generateStatus"
-                          label="Status Check-in"
-                          :items="statusOptions"
-                          prepend-inner-icon="mdi-shield-check"
-                          variant="outlined"
-                          :color="primaryColor"
-                          class="input-modern mb-4"
-                          density="comfortable"
-                          hide-details="auto"
-                        ></v-select>
-
-                        <div class="d-flex justify-center">
-                          <v-btn
-                            class="btn-primary-modern btn-centered"
-                            size="large"
-                            type="submit"
-                            elevation="0"
-                            :disabled="!selectedKlinik"
-                          >
-                            <v-icon start size="20">mdi-qrcode-plus</v-icon>
-                            Generate QR Code
-                          </v-btn>
-                        </div>
-                      </v-form>
-
-                      <!-- QR Code Display -->
-                      <div v-if="generatedQRData" class="qr-display mt-6">
-                        <v-card variant="outlined" class="pa-4">
-                          <div class="text-center">
-                            <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
-                            <div id="qrcode" class="qr-code-container mb-4"></div>
-                            
-                            <v-chip :color="generateStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
-                              <v-icon start>{{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
-                              {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
-                            </v-chip>
-
-                            <p class="text-body-2 text-grey mb-4">
-                              Data: {{ generatedQRData }}
-                            </p>
-
-                            <!-- Action Buttons -->
-                            <v-row dense>
-                              <v-col cols="4">
-                                <v-btn
-                                  variant="outlined"
-                                  :color="primaryColor"
-                                  block
-                                  size="small"
-                                  @click="downloadQR"
-                                  class="text-none"
-                                >
-                                  <v-icon start size="18">mdi-download</v-icon>
-                                  Download
-                                </v-btn>
-                              </v-col>
-                              <v-col cols="4">
-                                <v-btn
-                                  variant="outlined"
-                                  :color="primaryColor"
-                                  block
-                                  size="small"
-                                  @click="copyQRToClipboard"
-                                  class="text-none"
-                                >
-                                  <v-icon start size="18">mdi-content-copy</v-icon>
-                                  Copy
-                                </v-btn>
-                              </v-col>
-                              <v-col cols="4">
-                                <v-btn
-                                  variant="outlined"
-                                  :color="primaryColor"
-                                  block
-                                  size="small"
-                                  @click="shareQR"
-                                  class="text-none"
-                                >
-                                  <v-icon start size="18">mdi-share-variant</v-icon>
-                                  Share
-                                </v-btn>
-                              </v-col>
-                            </v-row>
-                          </div>
-                        </v-card>
-
-                        <!-- Instructions -->
-                        <v-alert
-                          type="success"
-                          variant="tonal"
-                          class="mt-4 text-body-2"
-                        >
-                          <template v-slot:prepend>
-                            <v-icon>mdi-information</v-icon>
-                          </template>
-                          <strong>Cara menggunakan untuk Testing:</strong>
-                          <ol class="ml-4 mt-2">
-                            <li>Gunakan tombol <strong>"Test ALLOWED"</strong> atau <strong>"Test NOT_ALLOWED"</strong> untuk generate QR cepat, atau isi form manual</li>
-                            <li>Klik <strong>"Download"</strong> untuk menyimpan QR code ke komputer</li>
-                            <li>Buka file QR code yang didownload (bisa di HP atau layar lain)</li>
-                            <li>Pindah ke tab <strong>"Scan QR"</strong> dan scan QR code tersebut</li>
-                            <li>Atau gunakan <strong>"Copy"</strong> untuk menyalin QR ke clipboard dan paste di aplikasi lain</li>
-                          </ol>
-                        </v-alert>
-                      </div>
-                    </div>
-                  </v-window-item>
-                </v-window>
-              </v-card-text>
-            </v-card>
+                    <!-- Instructions -->
+                    <v-alert
+                      type="success"
+                      variant="tonal"
+                      class="mt-4 text-body-2"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon>mdi-information</v-icon>
+                      </template>
+                      <strong>Cara menggunakan untuk Testing:</strong>
+                      <ol class="ml-4 mt-2">
+                        <li>Gunakan tombol <strong>"Test ALLOWED"</strong> atau <strong>"Test NOT_ALLOWED"</strong> untuk generate QR cepat</li>
+                        <li>Klik <strong>"Download"</strong> untuk menyimpan QR code</li>
+                        <li>Buka file QR code yang didownload</li>
+                        <li>Scan QR code tersebut di halaman Check-In</li>
+                        <li>Atau gunakan <strong>"Copy"</strong> untuk menyalin QR</li>
+                      </ol>
+                    </v-alert>
+                  </div>
+                </v-card-text>
+                <v-card-actions class="pa-4">
+                  <v-spacer></v-spacer>
+                  <v-btn
+                    color="grey"
+                    variant="text"
+                    @click="showGenerateQRDialog = false"
+                  >
+                    Tutup
+                  </v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-dialog>
 
             <!-- Stats Footer (Horizontal) - For Small Screens -->
             <div class="stats-footer-horizontal mt-3">
@@ -1240,6 +1226,7 @@
 import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
 import { useQueueStore } from '@/stores/queueStore';
 import { useMasterStore } from '@/stores/masterStore';
+import PageHeader from '@/components/common/PageHeader.vue';
 
 definePageMeta({
   // middleware:['auth'],
@@ -1263,6 +1250,7 @@ const secondaryColor = ref('#FB8C00');
 
 // --- LOGIKA ---
 const tab = ref('checkin');
+const showGenerateQRDialog = ref(false);
 const infoDialog = ref(false);
 const infoMessage = ref('');
 const infoAction = ref<'checkin' | 'kembali'>('kembali');
diff --git a/pages/MonitoringPasien/monitoringPasien.vue b/pages/MonitoringPasien/monitoringPasien.vue
index e520982..d7d9811 100644
--- a/pages/MonitoringPasien/monitoringPasien.vue
+++ b/pages/MonitoringPasien/monitoringPasien.vue
@@ -302,6 +302,9 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
+
 $success-700: #1B6E53;
 $success-600: #009262;
 $success-400: #32C997;
@@ -325,9 +328,9 @@ $font-weight-semibold: 600;
 // PAGE HEADER
 // ============================================
 .page-header {
-  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
@@ -376,7 +379,7 @@ $font-weight-semibold: 600;
 }
 
 .stat-chip {
-  color: $success-600 !important;
+  color: $primary-600 !important;
   font-weight: $font-weight-semibold;
   font-size: 14px;
   line-height: 20px;
diff --git a/pages/Setting/HakAkses.vue b/pages/Setting/HakAkses.vue
index e28341b..0a6ba4e 100644
--- a/pages/Setting/HakAkses.vue
+++ b/pages/Setting/HakAkses.vue
@@ -1616,6 +1616,9 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
+
 $success-700: #1B6E53;
 $success-600: #009262;
 $success-400: #32C997;
@@ -1724,9 +1727,9 @@ $font-weight-semibold: 600;
 // PAGE HEADER
 // ============================================
 .page-header {
-  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
@@ -1775,7 +1778,7 @@ $font-weight-semibold: 600;
 }
 
 .stat-chip {
-  color: $success-600 !important;
+  color: $primary-600 !important;
   font-weight: $font-weight-semibold;
   font-size: 14px;
   line-height: 20px;
@@ -1787,7 +1790,7 @@ $font-weight-semibold: 600;
   letter-spacing: 0.5px;
   font-size: 16px;
   line-height: 24px;
-  color: $success-600 !important;
+  color: $primary-600 !important;
 }
 
 // ============================================
diff --git a/pages/Setting/MasterAnjungan.vue b/pages/Setting/MasterAnjungan.vue
index 7e1c665..70fe043 100644
--- a/pages/Setting/MasterAnjungan.vue
+++ b/pages/Setting/MasterAnjungan.vue
@@ -366,9 +366,12 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
-$secondary-700: #0053AD;
-$secondary-600: #0671E0;
-$secondary-300: #DBEDFF;
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
+
+$secondary-700: #E65A0D;
+$secondary-600: #F16F29;
+$secondary-300: #FFB58D;
 
 $success-600: #009262;
 $success-300: #84DFC1;
@@ -386,9 +389,9 @@ $font-weight-semibold: 600;
 }
 
 .page-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(6, 113, 224, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
@@ -488,7 +491,7 @@ $font-weight-semibold: 600;
 }
 
 .dialog-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   color: $neutral-100;
   padding: 20px 24px;
   display: flex;
@@ -622,7 +625,7 @@ $font-weight-semibold: 600;
 }
 
 .preview-dialog-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   color: $neutral-100;
   padding: 16px 24px;
   display: flex;
diff --git a/pages/Setting/MasterKlinik.vue b/pages/Setting/MasterKlinik.vue
index dd1732d..e0d25f5 100644
--- a/pages/Setting/MasterKlinik.vue
+++ b/pages/Setting/MasterKlinik.vue
@@ -450,11 +450,11 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
-$primary-700: #FF9B1B;
-$primary-600: #FFA532;
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
 
-$secondary-700: #0053AD;
-$secondary-600: #0671E0;
+$secondary-700: #E65A0D;
+$secondary-600: #F16F29;
 $secondary-300: #DBEDFF;
 
 $success-600: #009262;
@@ -480,9 +480,9 @@ $font-weight-bold: 700;
 // PAGE HEADER
 // ============================================
 .page-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(6, 113, 224, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
@@ -530,7 +530,7 @@ $font-weight-bold: 700;
   letter-spacing: 0.5px;
   font-size: 16px;
   line-height: 24px;
-  color: $secondary-600 !important;
+  color: $primary-600 !important;
 }
 
 // ============================================
@@ -541,7 +541,7 @@ $font-weight-bold: 700;
 }
 
 .chip-secondary {
-  background-color: $secondary-600 !important;
+  background-color: $primary-600 !important;
   color: $neutral-100 !important;
   font-weight: $font-weight-medium;
 }
@@ -572,7 +572,7 @@ $font-weight-bold: 700;
 }
 
 .dialog-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   color: $neutral-100;
   padding: 20px 24px;
   display: flex;
diff --git a/pages/Setting/MasterKlinikRuang.vue b/pages/Setting/MasterKlinikRuang.vue
index ff12ea0..9c02dc4 100644
--- a/pages/Setting/MasterKlinikRuang.vue
+++ b/pages/Setting/MasterKlinikRuang.vue
@@ -432,6 +432,9 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
+
 $success-700: #1B6E53;
 $success-600: #009262;
 $success-400: #32C997;
@@ -455,9 +458,9 @@ $font-weight-semibold: 600;
 // PAGE HEADER
 // ============================================
 .page-header {
-  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
@@ -506,7 +509,7 @@ $font-weight-semibold: 600;
 }
 
 .stat-chip {
-  color: $success-600 !important;
+  color: $primary-600 !important;
   font-weight: $font-weight-semibold;
   font-size: 14px;
   line-height: 20px;
@@ -518,7 +521,7 @@ $font-weight-semibold: 600;
   letter-spacing: 0.5px;
   font-size: 16px;
   line-height: 24px;
-  color: $success-600 !important;
+  color: $primary-600 !important;
 }
 
 // ============================================
@@ -529,16 +532,16 @@ $font-weight-semibold: 600;
 }
 
 .chip-success-outline {
-  border: 1px solid $success-600;
+  border: 1px solid $primary-600;
   background-color: transparent !important;
-  color: $success-600 !important;
+  color: $primary-600 !important;
   font-weight: $font-weight-medium;
   font-size: 12px;
   line-height: 16px;
 }
 
 .btn-edit {
-  background-color: $success-600 !important;
+  background-color: $primary-600 !important;
   color: $neutral-100 !important;
   text-transform: none;
   font-weight: $font-weight-semibold;
@@ -563,7 +566,7 @@ $font-weight-semibold: 600;
 }
 
 .dialog-header {
-  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   color: $neutral-100;
   padding: 20px 24px;
   display: flex;
diff --git a/pages/Setting/MasterLoket.vue b/pages/Setting/MasterLoket.vue
index 9505be0..254e2f0 100644
--- a/pages/Setting/MasterLoket.vue
+++ b/pages/Setting/MasterLoket.vue
@@ -368,9 +368,9 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
-$primary-700: #FF9B1B;
-$primary-600: #FFA532;
-$primary-300: #FFDCAF;
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
+$primary-300: #9AB2F1;
 
 $secondary-600: #0671E0;
 
@@ -397,7 +397,7 @@ $font-weight-semibold: 600;
 .page-header {
   background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(255, 165, 50, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
diff --git a/pages/Setting/MasterPenunjang.vue b/pages/Setting/MasterPenunjang.vue
index 10ffd78..29db4b2 100644
--- a/pages/Setting/MasterPenunjang.vue
+++ b/pages/Setting/MasterPenunjang.vue
@@ -529,8 +529,8 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
-$primary-700: #7c3aed;
-$primary-600: #8b5cf6;
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
 
 $success-600: #009262;
 $success-300: #84DFC1;
@@ -560,7 +560,7 @@ $font-weight-bold: 700;
 .page-header {
   background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
diff --git a/pages/Setting/Screen.vue b/pages/Setting/Screen.vue
index 1f6f1c9..5f1f0e0 100644
--- a/pages/Setting/Screen.vue
+++ b/pages/Setting/Screen.vue
@@ -399,9 +399,12 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
-$secondary-700: #0053AD;
-$secondary-600: #0671E0;
-$secondary-300: #DBEDFF;
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
+
+$secondary-700: #E65A0D;
+$secondary-600: #F16F29;
+$secondary-300: #FFB58D;
 
 $success-600: #009262;
 $success-300: #84DFC1;
@@ -424,9 +427,9 @@ $font-weight-semibold: 600;
 // PAGE HEADER
 // ============================================
 .page-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(6, 113, 224, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
@@ -533,7 +536,7 @@ $font-weight-semibold: 600;
 }
 
 .dialog-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   color: $neutral-100;
   padding: 20px 24px;
   display: flex;
@@ -713,7 +716,7 @@ $font-weight-semibold: 600;
 }
 
 .preview-dialog-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   color: $neutral-100;
   padding: 16px 24px;
   display: flex;
diff --git a/pages/Setting/ScreenAntreanMasuk.vue b/pages/Setting/ScreenAntreanMasuk.vue
index 08ba19f..33a4060 100644
--- a/pages/Setting/ScreenAntreanMasuk.vue
+++ b/pages/Setting/ScreenAntreanMasuk.vue
@@ -434,9 +434,12 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
-$secondary-700: #0053AD;
-$secondary-600: #0671E0;
-$secondary-300: #DBEDFF;
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
+
+$secondary-700: #E65A0D;
+$secondary-600: #F16F29;
+$secondary-300: #FFB58D;
 
 $success-600: #009262;
 $success-300: #84DFC1;
@@ -459,9 +462,9 @@ $font-weight-semibold: 600;
 // PAGE HEADER
 // ============================================
 .page-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(6, 113, 224, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
@@ -568,7 +571,7 @@ $font-weight-semibold: 600;
 }
 
 .dialog-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   color: $neutral-100;
   padding: 20px 24px;
   display: flex;
@@ -748,7 +751,7 @@ $font-weight-semibold: 600;
 }
 
 .preview-dialog-header {
-  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   color: $neutral-100;
   padding: 16px 24px;
   display: flex;
diff --git a/pages/Setting/UserLogin.vue b/pages/Setting/UserLogin.vue
index c84ee39..07a345a 100644
--- a/pages/Setting/UserLogin.vue
+++ b/pages/Setting/UserLogin.vue
@@ -1103,7 +1103,10 @@ const confirmDelete = async () => {
 </script>
 
 <style scoped lang="scss">
-// Colors from Design System (matching MasterKlinikRuang)
+// Colors from Design System
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
+
 $success-700: #1B6E53;
 $success-600: #009262;
 $neutral-100: #FFFFFF;
@@ -1124,9 +1127,9 @@ $font-weight-semibold: 600;
 // PAGE HEADER (matching MasterKlinikRuang style)
 // ============================================
 .page-header {
-  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
@@ -1175,7 +1178,7 @@ $font-weight-semibold: 600;
 }
 
 .stat-chip {
-  color: $success-600 !important;
+  color: $primary-600 !important;
   font-weight: $font-weight-semibold;
   font-size: 14px;
   line-height: 20px;
@@ -1187,7 +1190,7 @@ $font-weight-semibold: 600;
   letter-spacing: 0.5px;
   font-size: 16px;
   line-height: 24px;
-  color: $success-600 !important;
+  color: $primary-600 !important;
 }
 
 // ============================================
diff --git a/pages/verifikasiAkun/VerifikasiAkun.vue b/pages/verifikasiAkun/VerifikasiAkun.vue
index 9253f17..536c4b9 100644
--- a/pages/verifikasiAkun/VerifikasiAkun.vue
+++ b/pages/verifikasiAkun/VerifikasiAkun.vue
@@ -67,7 +67,7 @@
           :value="qrCodeData" 
           :size="qrSize" 
           level="H" 
-          :foreground="'#FFA532'"
+          :foreground="'#3A61C9'"
           :background="'#FFFFFF'"
           class="qr-code"
         />
@@ -222,13 +222,13 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
-// Orange/Primary Colors
-$primary-700: #FF9B1B;
-$primary-600: #FFA532;
-$primary-500: #FFB95F;
-$primary-400: #FFCD8D;
-$primary-300: #FFDCAF;
-$primary-200: #FFE6C6;
+// Blue/Primary Colors
+$primary-700: #3556AE;
+$primary-600: #3A61C9;
+$primary-500: #567EE7;
+$primary-400: #7898EC;
+$primary-300: #9AB2F1;
+$primary-200: #BBCBF5;
 
 $danger-600: #E02B1D;
 
@@ -249,7 +249,7 @@ $font-weight-semibold: 600;
 .page-header {
   background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(255, 165, 50, 0.2);
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
 }
 
 .header-content {
diff --git a/stores/navItems1.ts b/stores/navItems1.ts
index b09ac5e..1631346 100644
--- a/stores/navItems1.ts
+++ b/stores/navItems1.ts
@@ -25,7 +25,7 @@ const defaultNavItems: NavItem[] = [
   },
   { id: 4, name: "Admin Loket", icon: "mdi-account-supervisor-outline", path: "/AdminLoket" },
   { id: 6, name: "Admin Klinik Ruang", icon: "mdi-door-open", path: "/AdminKlinikRuang" },
-  { id: 7, name: "Admin Penunjang", icon: "mdi-plus-box-outline", path: "/AdminPenunjang" },
+  // { id: 7, name: "Admin Penunjang", icon: "mdi-plus-box-outline", path: "/AdminPenunjang" },
   { id: 8, name: "Buat Antrean", icon: "mdi-account-multiple-plus-outline", path: "/BuatAntrean" },
   { id: 9, name: "Monitoring Pasien", icon: "mdi-account-group-outline", path: "/MonitoringPasien/monitoringPasien" },
   {
@@ -37,7 +37,7 @@ const defaultNavItems: NavItem[] = [
       { id: 10, name: "Anjungan", path: "/anjungan/anjungan", icon: "mdi-circle-small" },
       { id: 11, name: "Klinik", path: "/anjungan/AntrianKlinik", icon: "mdi-circle-small" },
       { id: 12, name: "Klinik Ruang", path: "/anjungan/AntrianKlinikRuang", icon: "mdi-circle-small"},
-      { id: 13, name: "Penunjang", path: "/anjungan/AntrianPenunjang", icon: "mdi-circle-small"},
+      // { id: 13, name: "Penunjang", path: "/anjungan/AntrianPenunjang", icon: "mdi-circle-small"},
       {id: 14, name: "Loket", path: "/anjungan/AntrianLoket", icon: "mdi-circle-small"},
       {id: 15, name: "Antrean Masuk", path: "/anjungan/AntreanMasuk", icon: "mdi-circle-small"},
 
@@ -55,8 +55,8 @@ const defaultNavItems: NavItem[] = [
       { id: 19, name: "Master Loket", path: "/setting/masterloket", icon: "mdi-circle-small" },
       { id: 20, name: "Master Klinik", path: "/setting/masterklinik", icon: "mdi-circle-small" },
       { id: 21, name: "Master Klinik Ruang", path: "/setting/masterklinikruang", icon: "mdi-circle-small" },
-      { id: 22, name: "Master Penunjang", path: "/setting/masterpenunjang", icon: "mdi-circle-small" },
-      { id: 23, name: "Screen", path: "/setting/screen", icon: "mdi-circle-small" },
+      // { id: 22, name: "Master Penunjang", path: "/setting/masterpenunjang", icon: "mdi-circle-small" },
+      // { id: 23, name: "Screen", path: "/setting/screen", icon: "mdi-circle-small" },
       { id: 24, name: "Screen Antrean Masuk", path: "/setting/screenantreanmasuk", icon: "mdi-circle-small" },
     ],
   },