From 78de0418e11185f668bb9b5cd02bc10080ed6e13 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Tue, 16 Dec 2025 09:58:25 +0700
Subject: [PATCH] update logika dan flow anjungan, master, store

---
 components/ProfilePopup2.txt                  |  416 ------
 components/features/queue/PatientCard.vue     |  249 ++--
 .../features/queue/TabelPatientData.vue       |  258 +++-
 components/layout/AppBar.vue.txt              |  107 --
 composables/useQueue.js                       |   27 +-
 layouts/bagus.vue.txt                         |  286 -----
 pages/AdminLoket.vue                          |   36 +-
 pages/Anjungan/{Anjungan.vue => Anjungan.txt} |  609 +++++----
 pages/Anjungan/Anjungan/[id].vue              |  928 ++++++++++++++
 pages/Anjungan/Anjungan/index.vue             |  352 ++++++
 .../[id].vue}                                 |   75 +-
 pages/Anjungan/AntrianKlinik/index.vue        |  356 ++++++
 .../[kodeKlinik].vue}                         |  148 ++-
 pages/Anjungan/AntrianKlinikRuang/index.vue   |  381 ++++++
 pages/Anjungan/klinik                         |  543 --------
 pages/Profile/Pengaturan.vue.txt              | 1126 -----------------
 pages/Setting/MasterAnjungan.vue              |  547 ++++++++
 pages/Setting/Screen.vue                      |   72 +-
 stores/anjunganStore.js                       |   87 ++
 stores/clinicStore.js                         |  357 ++++++
 stores/navItems1.ts                           |    1 +
 stores/queueStore.js                          |   91 +-
 stores/screenStore.js                         |   90 ++
 23 files changed, 4169 insertions(+), 2973 deletions(-)
 delete mode 100644 components/ProfilePopup2.txt
 delete mode 100644 components/layout/AppBar.vue.txt
 delete mode 100644 layouts/bagus.vue.txt
 rename pages/Anjungan/{Anjungan.vue => Anjungan.txt} (70%)
 create mode 100644 pages/Anjungan/Anjungan/[id].vue
 create mode 100644 pages/Anjungan/Anjungan/index.vue
 rename pages/Anjungan/{AntrianKlinik.vue => AntrianKlinik/[id].vue} (90%)
 create mode 100644 pages/Anjungan/AntrianKlinik/index.vue
 rename pages/Anjungan/{AntrianKlinikRuang.vue => AntrianKlinikRuang/[kodeKlinik].vue} (77%)
 create mode 100644 pages/Anjungan/AntrianKlinikRuang/index.vue
 delete mode 100644 pages/Anjungan/klinik
 delete mode 100644 pages/Profile/Pengaturan.vue.txt
 create mode 100644 pages/Setting/MasterAnjungan.vue
 create mode 100644 stores/anjunganStore.js
 create mode 100644 stores/clinicStore.js
 create mode 100644 stores/screenStore.js

diff --git a/components/ProfilePopup2.txt b/components/ProfilePopup2.txt
deleted file mode 100644
index 8727b93..0000000
--- a/components/ProfilePopup2.txt
+++ /dev/null
@@ -1,416 +0,0 @@
-<template>
-  <v-menu
-    v-model="menu"
-    :close-on-content-click="false"
-    location="top end"
-    origin="bottom right"
-    transition="scale-transition"
-    open-on-hover
-  >
-    <template v-slot:activator="{ props: menuProps }">
-      <v-list-item
-        v-if="!rail"
-        v-bind="menuProps"
-        :title="user?.name || user?.preferred_username || 'User'"
-        :subtitle="user?.email || 'No email'"
-        class="pa-3 ma-1 rounded-xl profile-activator"
-        link
-      >
-        <template v-slot:prepend>
-          <div class="avatar-wrapper">
-            <v-avatar size="44" class="avatar-glow">
-              <v-img
-                :src="user?.picture || 'https://i.pravatar.cc/300?img=68'"
-                :alt="`${user?.name || 'User'} Profile`"
-              ></v-img>
-            </v-avatar>
-            <div class="status-dot"></div>
-          </div>
-        </template>
-        <template v-slot:append>
-          <v-icon size="20" class="chevron-icon">mdi-menu-down</v-icon>
-        </template>
-      </v-list-item>
-
-      <v-btn
-        v-else
-        icon
-        v-bind="menuProps"
-        size="large"
-        variant="flat"
-        class="avatar-btn"
-        :title="user?.name || 'Profile'"
-      >
-        <div class="avatar-wrapper">
-          <v-avatar size="44" class="avatar-glow">
-            <v-img
-              :src="user?.picture || 'https://i.pravatar.cc/300?img=68'"
-              :alt="`${user?.name || 'User'} Profile`"
-            ></v-img>
-          </v-avatar>
-          <div class="status-dot"></div>
-        </div>
-      </v-btn>
-    </template>
-
-    <v-card class="profile-card rounded-xl elevation-12" width="340">
-      <!-- Decorative Header -->
-      <div class="card-header">
-        <div class="header-pattern"></div>
-        <div class="header-content pa-6 text-center">
-          <div class="avatar-container mb-4">
-            <v-avatar size="90" class="profile-avatar">
-              <v-img
-                :src="user?.picture || 'https://i.pravatar.cc/300?img=68'"
-                :alt="`${user?.name || 'User'} Profile`"
-              ></v-img>
-            </v-avatar>
-            <div class="status-badge">
-              <v-icon size="12" color="white">mdi-check</v-icon>
-            </div>
-          </div>
-          <h3 class="text-h6 font-weight-bold text-white mb-1">
-            {{ user?.name || user?.preferred_username || 'User' }}
-          </h3>
-          <p class="text-body-2 text-white opacity-90 mb-2">
-            {{ user?.email || 'No email' }}
-          </p>
-          <v-chip
-            size="small"
-            class="glass-chip"
-            prepend-icon="mdi-identifier"
-          >
-            {{ user?.id?.substring(0, 10) }}...
-          </v-chip>
-        </div>
-      </div>
-
-      <!-- Menu Items -->
-      <v-card-text class="pa-4">
-        <div class="menu-grid">
-          <div 
-            class="menu-tile rounded-lg pa-4 text-center cursor-pointer"
-            @click="handleAction('profile')"
-          >
-            <div class="tile-icon-wrapper mb-2 mx-auto">
-              <v-icon size="24" color="blue-darken-2">mdi-account-circle</v-icon>
-            </div>
-            <div class="text-caption font-weight-medium">Profil</div>
-          </div>
-
-          <div 
-            class="menu-tile rounded-lg pa-4 text-center cursor-pointer"
-            @click="handleAction('account')"
-          >
-            <div class="tile-icon-wrapper mb-2 mx-auto">
-              <v-icon size="24" color="orange-darken-2">mdi-cog-outline</v-icon>
-            </div>
-            <div class="text-caption font-weight-medium">Pengaturan</div>
-          </div>
-
-          <div 
-            class="menu-tile rounded-lg pa-4 text-center cursor-pointer"
-            @click="handleAction('darkMode')"
-          >
-            <div class="tile-icon-wrapper mb-2 mx-auto">
-              <v-icon size="24" :color="darkMode ? 'deep-purple-darken-2' : 'amber-darken-2'">
-                {{ darkMode ? 'mdi-moon-waning-crescent' : 'mdi-white-balance-sunny' }}
-              </v-icon>
-            </div>
-            <div class="text-caption font-weight-medium">
-              {{ darkMode ? 'Gelap' : 'Terang' }}
-            </div>
-          </div>
-        </div>
-
-        <v-divider class="my-4"></v-divider>
-
-        <!-- Quick Actions -->
-        <div class="quick-actions">
-          <v-list-item 
-            class="rounded-lg px-3 py-2 action-item"
-            link
-            @click="handleAction('notifications')"
-          >
-            <template v-slot:prepend>
-              <v-icon size="20" color="blue-darken-1">mdi-bell-outline</v-icon>
-            </template>
-            <v-list-item-title class="text-body-2 font-weight-medium">
-              Notifikasi
-            </v-list-item-title>
-            <template v-slot:append>
-              <v-badge color="orange-darken-2" content="3" inline></v-badge>
-            </template>
-          </v-list-item>
-
-          <v-list-item 
-            class="rounded-lg px-3 py-2 action-item"
-            link
-            @click="handleAction('help')"
-          >
-            <template v-slot:prepend>
-              <v-icon size="20" color="blue-darken-1">mdi-help-circle-outline</v-icon>
-            </template>
-            <v-list-item-title class="text-body-2 font-weight-medium">
-              Bantuan & Dukungan
-            </v-list-item-title>
-          </v-list-item>
-        </div>
-
-        <v-divider class="my-4"></v-divider>
-
-        <!-- Logout Button -->
-        <v-btn
-          block
-          class="rounded-lg logout-btn"
-          variant="flat"
-          color="error"
-          prepend-icon="mdi-logout"
-          @click="signOut"
-          :disabled="isLoggingOut"
-          :loading="isLoggingOut"
-        >
-          {{ isLoggingOut ? 'Keluar...' : 'Keluar' }}
-        </v-btn>
-      </v-card-text>
-    </v-card>
-  </v-menu>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { navigateTo } from '#app';
-
-const props = defineProps({
-  user: {
-    type: Object,
-    required: true
-  },
-  rail: {
-    type: Boolean,
-    required: true
-  }
-})
-
-const menu = ref(false);
-const darkMode = ref(false);
-const isLoggingOut = ref(false);
-const emit = defineEmits(['logout']);
-
-const signOut = async () => {
-  if (isLoggingOut.value) return;
-  isLoggingOut.value = true;
-  menu.value = false;
-
-  try {
-    emit('logout'); 
-  } finally {
-    isLoggingOut.value = false;
-  }
-};
-
-const handleAction = (action) => {
-  switch(action) {
-    case 'account':
-      navigateTo('/Profile/Pengaturan')
-      break;
-    case 'profile':
-      navigateTo('/Profile/Profil')
-      break;
-    case 'notifications':
-      navigateTo('/notifications')
-      break;
-    case 'help':
-      navigateTo('/help')
-      break;
-    case 'darkMode':
-      darkMode.value = !darkMode.value;
-      return;
-  }
-
-  menu.value = false;
-};
-</script>
-
-<style scoped>
-.profile-activator {
-  background: linear-gradient(135deg, rgba(25, 118, 210, 0.1) 0%, rgba(245, 124, 0, 0.1) 100%);
-  border: 1px solid rgba(25, 118, 210, 0.2);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.profile-activator:hover {
-  background: linear-gradient(135deg, rgba(25, 118, 210, 0.15) 0%, rgba(245, 124, 0, 0.15) 100%);
-  border-color: rgba(25, 118, 210, 0.3);
-  transform: translateY(-2px);
-}
-
-.avatar-wrapper {
-  position: relative;
-}
-
-.avatar-glow {
-  border: 3px solid white;
-  box-shadow: 0 0 20px rgba(25, 118, 210, 0.4);
-}
-
-.status-dot {
-  position: absolute;
-  bottom: 2px;
-  right: 2px;
-  width: 12px;
-  height: 12px;
-  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
-  border: 2px solid white;
-  border-radius: 50%;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.8;
-    transform: scale(1.1);
-  }
-}
-
-.chevron-icon {
-  transition: transform 0.3s ease;
-}
-
-.profile-activator:hover .chevron-icon {
-  transform: translateY(2px);
-}
-
-.avatar-btn {
-  background: transparent !important;
-}
-
-.profile-card {
-  overflow: hidden;
-  border: 1px solid rgba(25, 118, 210, 0.1);
-}
-
-.card-header {
-  position: relative;
-  background: linear-gradient(135deg, #1976d2 0%, #fb8c00 100%);
-  overflow: hidden;
-}
-
-.header-pattern {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: 
-    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
-}
-
-.header-content {
-  position: relative;
-  z-index: 1;
-}
-
-.avatar-container {
-  position: relative;
-  display: inline-block;
-}
-
-.profile-avatar {
-  border: 4px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-}
-
-.status-badge {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 28px;
-  height: 28px;
-  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
-  border: 3px solid white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.glass-chip {
-  background: rgba(255, 255, 255, 0.2) !important;
-  backdrop-filter: blur(10px);
-  color: white !important;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.menu-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-}
-
-.menu-tile {
-  background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(245, 124, 0, 0.05) 100%);
-  border: 1px solid rgba(25, 118, 210, 0.1);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  cursor: pointer;
-}
-
-.menu-tile:hover {
-  background: linear-gradient(135deg, rgba(25, 118, 210, 0.1) 0%, rgba(245, 124, 0, 0.1) 100%);
-  border-color: rgba(25, 118, 210, 0.3);
-  transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-}
-
-.tile-icon-wrapper {
-  width: 48px;
-  height: 48px;
-  background: white;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.quick-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.action-item {
-  transition: all 0.2s ease;
-  background: transparent;
-}
-
-.action-item:hover {
-  background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(245, 124, 0, 0.05) 100%);
-  transform: translateX(4px);
-}
-
-.logout-btn {
-  text-transform: none;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
-}
-
-.logout-btn:hover {
-  box-shadow: 0 6px 20px rgba(244, 67, 54, 0.4);
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.opacity-90 {
-  opacity: 0.9;
-}
-</style>
\ No newline at end of file
diff --git a/components/features/queue/PatientCard.vue b/components/features/queue/PatientCard.vue
index 441ad19..3d4806a 100644
--- a/components/features/queue/PatientCard.vue
+++ b/components/features/queue/PatientCard.vue
@@ -1,106 +1,83 @@
 <template>
-  <v-card class="patient-card" elevation="0">
-    <v-card-text class="pa-4">
-      <!-- Header: Queue Number & Status -->
-      <div class="card-header">
-        <div class="queue-number">{{ patient.noAntrian.split(" |")[0] }}</div>
-        <v-chip
-          :color="getStatusColor(patient.status)"
-          size="small"
-          class="status-chip"
-        >
-          {{ getStatusLabel(patient.status) }}
-        </v-chip>
-      </div>
+  <v-tooltip 
+    :text="isClickable ? 'Klik untuk proses pasien' : ''" 
+    location="top"
+    :disabled="!isClickable"
+  >
+    <template #activator="{ props: tooltipProps }">
+      <v-card 
+        class="patient-card" 
+        elevation="2"
+        :class="{ 'clickable-card': isClickable }"
+        @click="handleCardClick"
+        v-bind="isClickable ? tooltipProps : {}"
+      >
+        <v-card-text class="pa-4">
+          <!-- Header: Queue Number, Status & Fast Track Badge -->
+          <div class="card-header">
+            <div class="header-left">
+              <div class="queue-number">{{ patient.noAntrian.split(" |")[0] }}</div>
+              <v-icon 
+                v-if="patient.fastTrack === 'YA'"
+                color="warning"
+                size="20"
+                class="fast-track-icon"
+              >
+                mdi-flash
+              </v-icon>
+            </div>
+            <v-chip
+              :color="getStatusColor(patient.status)"
+              size="small"
+              class="status-chip"
+            >
+              {{ getStatusLabel(patient.status) }}
+            </v-chip>
+          </div>
 
-      <!-- Patient Info Grid -->
-      <div class="patient-info mt-3">
-        <div class="info-row">
-          <span class="info-label">Barcode:</span>
-          <span class="info-value">{{ patient.barcode }}</span>
-        </div>
-        
-        <div class="info-row">
-          <span class="info-label">Jam Panggil:</span>
-          <span class="info-value">{{ patient.jamPanggil }}</span>
-        </div>
+          <!-- Patient Info Grid - Simplified -->
+          <div class="patient-info mt-3">
+            <div class="info-row">
+              <span class="info-label">Jam Panggil:</span>
+              <span class="info-value">{{ patient.jamPanggil }}</span>
+            </div>
 
-        <div class="info-row">
-          <span class="info-label">Klinik:</span>
-          <v-chip size="small" variant="outlined" class="klinik-chip">
-            {{ patient.klinik }}
-          </v-chip>
-        </div>
+            <div class="info-row">
+              <span class="info-label">Klinik:</span>
+              <v-chip size="small" variant="outlined" class="klinik-chip">
+                {{ patient.klinik }}
+              </v-chip>
+            </div>
 
-        <div class="info-row">
-          <span class="info-label">Fast Track:</span>
-          <span class="info-value">{{ patient.fastTrack }}</span>
-        </div>
+            <div class="info-row">
+              <span class="info-label">Pembayaran:</span>
+              <span class="info-value">{{ patient.pembayaran }}</span>
+            </div>
+          </div>
 
-        <div class="info-row">
-          <span class="info-label">Pembayaran:</span>
-          <span class="info-value">{{ patient.pembayaran }}</span>
-        </div>
-      </div>
-
-      <!-- Action Button -->
-      <div class="card-actions mt-4">
-        <v-btn
-          v-if="patient.status === 'diloket'"
-          block
-          color="primary-600"
-          variant="flat"
-          @click="$emit('action', patient, 'proses')"
-        >
-          <v-icon start size="18">mdi-account-check</v-icon>
-          Proses
-        </v-btn>
-        <v-btn
-          v-else-if="patient.status === 'terlambat'"
-          block
-          color="success-600"
-          variant="flat"
-          class="text-white"
-          @click="$emit('action', patient, 'aktifkan')"
-        >
-          <v-icon start size="18">mdi-check-circle</v-icon>
-          Aktifkan
-        </v-btn>
-        <v-btn
-          v-else-if="patient.status === 'pending'"
-          block
-          color="success-600"
-          class="text-white"
-          variant="flat"
-          @click="$emit('action', patient, 'proses')"
-        >
-          <v-icon start size="18">mdi-play-circle</v-icon>
-          Proses
-        </v-btn>
-      </div>
-    </v-card-text>
-
-    <!-- Card Menu (Optional) -->
-    <v-menu location="bottom end">
-      <template #activator="{ props }">
-        <v-btn
-          icon="mdi-dots-vertical"
-          variant="text"
-          size="small"
-          class="card-menu-btn"
-          v-bind="props"
-        />
-      </template>
-      <v-list density="compact">
-        <v-list-item @click="$emit('view-details', patient)">
-          <v-list-item-title>Lihat Detail</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-menu>
-  </v-card>
+          <!-- Action Button for non-clickable states -->
+          <div v-if="!isClickable && patient.status === 'terlambat'" class="card-actions mt-3">
+            <v-btn
+              block
+              color="success-600"
+              variant="flat"
+              size="small"
+              class="text-white"
+              @click.stop="$emit('action', patient, 'aktifkan')"
+            >
+              <v-icon start size="18">mdi-check-circle</v-icon>
+              Aktifkan
+            </v-btn>
+          </div>
+        </v-card-text>
+      </v-card>
+    </template>
+  </v-tooltip>
 </template>
 
 <script setup>
+import { computed } from 'vue';
+
 const props = defineProps({
   patient: {
     type: Object,
@@ -108,7 +85,17 @@ const props = defineProps({
   }
 });
 
-defineEmits(['action', 'view-details']);
+const emit = defineEmits(['action']);
+
+const isClickable = computed(() => {
+  return props.patient.status === 'diloket' || props.patient.status === 'pending';
+});
+
+const handleCardClick = () => {
+  if (isClickable.value) {
+    emit('action', props.patient, 'proses');
+  }
+};
 
 const getStatusColor = (status) => {
   const colors = {
@@ -137,11 +124,25 @@ const getStatusLabel = (status) => {
   background: var(--color-neutral-100);
   transition: all 0.2s ease;
   height: 100%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
   &:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     transform: translateY(-2px);
   }
+
+  &.clickable-card {
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--color-primary-600);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
 }
 
 .card-header {
@@ -149,7 +150,13 @@ const getStatusLabel = (status) => {
   justify-content: space-between;
   align-items: center;
   padding-bottom: 12px;
-  border-bottom: 1px solid var(--color-neutral-400);
+  border-bottom: 2px solid var(--color-neutral-400);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .queue-number {
@@ -158,9 +165,23 @@ const getStatusLabel = (status) => {
   color: var(--color-neutral-900);
 }
 
+.fast-track-icon {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
 .status-chip {
   font-weight: 600;
   font-size: 11px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
 .patient-info {
@@ -174,12 +195,26 @@ const getStatusLabel = (status) => {
   justify-content: space-between;
   align-items: center;
   font-size: 13px;
+  gap: 8px;
+}
+
+.payment-info {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fast-track-badge {
+  font-size: 10px;
+  font-weight: 700;
+  height: 20px;
+  padding: 0 6px;
 }
 
 .info-label {
   color: var(--color-neutral-600);
   font-weight: 500;
-  min-width: 100px;
+  min-width: 90px;
 }
 
 .info-value {
@@ -191,24 +226,14 @@ const getStatusLabel = (status) => {
 .klinik-chip {
   font-size: 11px;
   font-weight: 600;
+  border: 1.5px solid currentColor;
 }
 
 .card-actions .v-btn {
   text-transform: none;
   font-weight: 600;
   font-size: 13px;
-  height: 40px;
-}
-
-.card-menu-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.patient-card:hover .card-menu-btn {
-  opacity: 1;
+  height: 36px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 </style>
\ No newline at end of file
diff --git a/components/features/queue/TabelPatientData.vue b/components/features/queue/TabelPatientData.vue
index a8fc2df..9fb53a3 100644
--- a/components/features/queue/TabelPatientData.vue
+++ b/components/features/queue/TabelPatientData.vue
@@ -6,6 +6,7 @@
         <div class="section-label">DATA PASIEN</div>
         
         <div class="filters">
+          <!-- Status Filter -->
           <v-chip-group v-model="selectedStatusModel" mandatory class="status-filter">
             <v-chip 
               v-for="status in statusOptions" 
@@ -17,6 +18,7 @@
             </v-chip>
           </v-chip-group>
 
+          <!-- Search Field -->
           <v-text-field
             v-model="searchModel"
             placeholder="Cari barcode, nomor antrian..."
@@ -26,6 +28,123 @@
             prepend-inner-icon="mdi-magnify"
           />
         </div>
+
+        <!-- Advanced Filters -->
+        <div class="advanced-filters mt-3">
+          <v-select
+            v-model="selectedKlinik"
+            :items="klinikOptions"
+            label="Filter Klinik"
+            density="compact"
+            hide-details
+            clearable
+            class="filter-select"
+            variant="outlined"
+          >
+            <template #prepend-inner>
+              <v-icon size="20">mdi-hospital-building</v-icon>
+            </template>
+          </v-select>
+
+          <v-select
+            v-model="selectedPembayaran"
+            :items="pembayaranOptions"
+            label="Filter Pembayaran"
+            density="compact"
+            hide-details
+            clearable
+            class="filter-select"
+            variant="outlined"
+          >
+            <template #prepend-inner>
+              <v-icon size="20">mdi-cash</v-icon>
+            </template>
+          </v-select>
+
+          <v-select
+            v-model="selectedShift"
+            :items="shiftOptions"
+            label="Filter Shift"
+            density="compact"
+            hide-details
+            clearable
+            class="filter-select"
+            variant="outlined"
+          >
+            <template #prepend-inner>
+              <v-icon size="20">mdi-clock-outline</v-icon>
+            </template>
+          </v-select>
+
+          <v-select
+            v-model="selectedFastTrack"
+            :items="fastTrackOptions"
+            label="Filter Fast Track"
+            density="compact"
+            hide-details
+            clearable
+            class="filter-select"
+            variant="outlined"
+          >
+            <template #prepend-inner>
+              <v-icon size="20">mdi-flash</v-icon>
+            </template>
+          </v-select>
+
+          <v-btn
+            v-if="hasActiveFilters"
+            variant="text"
+            color="primary-600"
+            size="small"
+            @click="clearAllFilters"
+          >
+            <v-icon start size="18">mdi-filter-off</v-icon>
+            Reset Filter
+          </v-btn>
+        </div>
+
+        <!-- Active Filter Tags -->
+        <div v-if="hasActiveFilters" class="active-filters mt-2">
+          <v-chip
+            v-if="selectedKlinik"
+            size="small"
+            closable
+            @click:close="selectedKlinik = null"
+          >
+            Klinik: {{ selectedKlinik }}
+          </v-chip>
+          <v-chip
+            v-if="selectedPembayaran"
+            size="small"
+            closable
+            @click:close="selectedPembayaran = null"
+          >
+            Pembayaran: {{ selectedPembayaran }}
+          </v-chip>
+          <v-chip
+            v-if="selectedShift"
+            size="small"
+            closable
+            @click:close="selectedShift = null"
+          >
+            {{ selectedShift }}
+          </v-chip>
+          <v-chip
+            v-if="selectedFastTrack"
+            size="small"
+            closable
+            @click:close="selectedFastTrack = null"
+          >
+            Fast Track: {{ selectedFastTrack }}
+          </v-chip>
+        </div>
+      </div>
+
+      <!-- Results Info -->
+      <div v-if="filteredAndSearchedItems.length > 0" class="results-info mb-3">
+        <span class="results-text">
+          Menampilkan {{ paginatedItems.length }} dari {{ filteredAndSearchedItems.length }} pasien
+        </span>
       </div>
 
       <!-- Patient Cards Grid -->
@@ -41,8 +160,12 @@
       <!-- Empty State -->
       <div v-else class="empty-state">
         <v-icon size="64" color="neutral-500">mdi-account-search</v-icon>
-        <div class="empty-text mt-3">Tidak ada data pasien</div>
-        <div class="empty-subtext">Data akan muncul ketika ada pasien yang terdaftar</div>
+        <div class="empty-text mt-3">
+          {{ searchModel || hasActiveFilters ? 'Tidak ada pasien yang sesuai' : 'Tidak ada data pasien' }}
+        </div>
+        <div class="empty-subtext">
+          {{ searchModel || hasActiveFilters ? 'Coba ubah filter atau kata kunci pencarian' : 'Data akan muncul ketika ada pasien yang terdaftar' }}
+        </div>
       </div>
 
       <!-- Pagination -->
@@ -105,11 +228,15 @@ const props = defineProps({
 const emit = defineEmits(['update:selectedStatus', 'update:searchQuery', 'action']);
 
 const currentPage = ref(1);
+const selectedKlinik = ref(null);
+const selectedPembayaran = ref(null);
+const selectedShift = ref(null);
+const selectedFastTrack = ref(null);
 
 const selectedStatusModel = computed({
   get: () => props.selectedStatus,
   set: (value) => {
-    currentPage.value = 1; // Reset to first page on filter change
+    currentPage.value = 1;
     emit('update:selectedStatus', value);
   }
 });
@@ -117,7 +244,7 @@ const selectedStatusModel = computed({
 const searchModel = computed({
   get: () => props.searchQuery,
   set: (value) => {
-    currentPage.value = 1; // Reset to first page on search
+    currentPage.value = 1;
     emit('update:searchQuery', value);
   }
 });
@@ -129,20 +256,76 @@ const statusOptions = computed(() => [
   { value: 'pending', label: props.statusLabels.pending, count: props.pendingCount }
 ]);
 
+// Generate filter options from items
+const klinikOptions = computed(() => {
+  const kliniks = [...new Set(props.items.map(p => p.klinik))];
+  return kliniks.sort();
+});
+
+const pembayaranOptions = computed(() => {
+  const pembayaran = [...new Set(props.items.map(p => p.pembayaran))];
+  return pembayaran.sort();
+});
+
+const shiftOptions = computed(() => {
+  const shifts = [...new Set(props.items.map(p => p.shift))];
+  return shifts.sort();
+});
+
+const fastTrackOptions = computed(() => {
+  const normalizedValues = props.items
+    .map((p) => (p.fastTrack ?? "").toString().trim().toUpperCase())
+    .filter((v) => v.length > 0);
+
+  const uniqueTracks = [...new Set(normalizedValues)];
+  return uniqueTracks.sort();
+});
+
+const hasActiveFilters = computed(() => {
+  return !!(selectedKlinik.value || selectedPembayaran.value || selectedShift.value || selectedFastTrack.value);
+});
+
+const clearAllFilters = () => {
+  selectedKlinik.value = null;
+  selectedPembayaran.value = null;
+  selectedShift.value = null;
+  selectedFastTrack.value = null;
+  currentPage.value = 1;
+};
+
 const filteredItems = computed(() => {
   if (selectedStatusModel.value === 'all') return props.items;
   return props.items.filter(p => p.status === selectedStatusModel.value);
 });
 
 const filteredAndSearchedItems = computed(() => {
-  if (!searchModel.value) return filteredItems.value;
-  
-  const searchLower = searchModel.value.toLowerCase();
-  return filteredItems.value.filter(patient => 
-    patient.barcode?.toLowerCase().includes(searchLower) ||
-    patient.noAntrian?.toLowerCase().includes(searchLower) ||
-    patient.klinik?.toLowerCase().includes(searchLower)
-  );
+  let result = filteredItems.value;
+
+  // Apply attribute filters
+  if (selectedKlinik.value) {
+    result = result.filter(p => p.klinik === selectedKlinik.value);
+  }
+  if (selectedPembayaran.value) {
+    result = result.filter(p => p.pembayaran === selectedPembayaran.value);
+  }
+  if (selectedShift.value) {
+    result = result.filter(p => p.shift === selectedShift.value);
+  }
+  if (selectedFastTrack.value) {
+    result = result.filter(p => p.fastTrack === selectedFastTrack.value);
+  }
+
+  // Apply search
+  if (searchModel.value) {
+    const searchLower = searchModel.value.toLowerCase();
+    result = result.filter(patient => 
+      patient.barcode?.toLowerCase().includes(searchLower) ||
+      patient.noAntrian?.toLowerCase().includes(searchLower) ||
+      patient.klinik?.toLowerCase().includes(searchLower)
+    );
+  }
+
+  return result;
 });
 
 const totalPages = computed(() => 
@@ -190,6 +373,7 @@ const handleAction = (patient, action) => {
 
 .status-filter {
   flex: 1;
+  min-width: 300px;
 }
 
 .status-filter .v-chip {
@@ -214,11 +398,43 @@ const handleAction = (patient, action) => {
 
 .search-field {
   max-width: 300px;
+  min-width: 250px;
+}
+
+.advanced-filters {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.filter-select {
+  min-width: 180px;
+  max-width: 220px;
+}
+
+.active-filters {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.results-info {
+  padding: 8px 12px;
+  background: var(--color-neutral-200);
+  border-radius: 8px;
+  border-left: 3px solid var(--color-primary-600);
+}
+
+.results-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-neutral-700);
 }
 
 .patient-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 16px;
 }
 
@@ -260,8 +476,22 @@ const handleAction = (patient, action) => {
     align-items: stretch;
   }
 
+  .status-filter {
+    min-width: 100%;
+  }
+
   .search-field {
     max-width: 100%;
+    min-width: 100%;
+  }
+
+  .advanced-filters {
+    flex-direction: column;
+  }
+
+  .filter-select {
+    width: 100%;
+    max-width: 100%;
   }
 
   .patient-grid {
@@ -278,7 +508,7 @@ const handleAction = (patient, action) => {
 
 @media (min-width: 1265px) {
   .patient-grid {
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
   }
 }
 </style>
\ No newline at end of file
diff --git a/components/layout/AppBar.vue.txt b/components/layout/AppBar.vue.txt
deleted file mode 100644
index 27db287..0000000
--- a/components/layout/AppBar.vue.txt
+++ /dev/null
@@ -1,107 +0,0 @@
-<!-- components/AppBar.vue -->
-<template>
-  <v-app-bar app color="#ff9248" dark>
-    <v-app-bar-nav-icon @click="emit('toggle-rail')"></v-app-bar-nav-icon>
-     <v-toolbar-title class="ml-2 font-weight-bold">
-      <span class="text-blue-darken-2">Antrean</span> RSSA
-    </v-toolbar-title>
-    <v-spacer></v-spacer>
-    
-    <!-- Show loading state or user info -->
-    <div v-if="isLoading" class="d-flex align-center">
-      <v-progress-circular indeterminate size="20" class="mr-2"></v-progress-circular>
-      <span class="mr-2">Loading...</span>
-    </div>
-    
-    <template v-else-if="isAuthenticated && user">
-      <ProfilePopup 
-        :user="user" 
-        @logout="handleLogout" 
-      /><template>
-  <v-app-bar app color="blue-grey-darken-3" dark flat>
-    <v-app-bar-nav-icon @click="emit('toggle-rail')"></v-app-bar-nav-icon>
-    <v-toolbar-title class="ml-2 font-weight-bold">
-      <span class="text-orange-darken-2">Antrian</span> RSSA
-    </v-toolbar-title>
-
-    <v-spacer></v-spacer>
-    
-    <div v-if="isLoading" class="d-flex align-center">
-      <v-progress-circular indeterminate color="orange-darken-2" size="20" class="mr-2"></v-progress-circular>
-      <span class="text-caption">Loading...</span>
-    </div>
-
-    <template v-else-if="isAuthenticated && user">
-      <v-menu offset-y>
-        <template v-slot:activator="{ props }">
-          <v-btn
-            v-bind="props"
-            variant="flat"
-            rounded="xl"
-            color="transparent"
-            class="pa-2 text-capitalize"
-          >
-            <div class="d-flex align-center">
-              <v-avatar color="orange-darken-2" size="36" class="mr-2">
-                <span class="text-white font-weight-bold">{{ user.name?.charAt(0) || 'U' }}</span>
-              </v-avatar>
-              <span class="text-subtitle-1 font-weight-bold text-white">{{ user.name || 'User' }}</span>
-              <v-icon right size="20" class="ml-1">mdi-chevron-down</v-icon>
-            </div>
-          </v-btn>
-        </template>
-        <ProfilePopup 
-          :user="user" 
-          @logout="handleLogout" 
-        />
-      </v-menu>
-    </template>
-    
-    <template v-else>
-      <v-btn @click="redirectToLogin" color="orange-darken-2" variant="flat" rounded="lg" class="text-capitalize">
-        <v-icon left>mdi-login</v-icon>
-        Login
-      </v-btn>
-    </template>
-  </v-app-bar>
-</template>
-      <span class="mr-2">{{ user.name || user.preferred_username || user.email }}</span>
-    </template>
-    
-    <template v-else>
-      <v-btn @click="redirectToLogin" color="white" text>
-        Login
-      </v-btn>
-    </template>
-  </v-app-bar>
-</template>
-
-<script setup>
-import ProfilePopup from './ProfilePopup.vue';
-
-// Emit untuk parent component
-const emit = defineEmits(['toggle-rail']);
-
-// Use auth composable
-const { user, isAuthenticated, isLoading, checkAuth, logout } = useAuth()
-
-// Handle logout - use the composable's logout method
-const handleLogout = async () => {
-  console.log("🚪 AppBar logout initiated...")
-  try {
-    await logout()
-  } catch (error) {
-    console.error("❌ AppBar logout error:", error)
-  }
-}
-
-// Redirect to login if not authenticated
-const redirectToLogin = () => {
-  navigateTo('/LoginPage')
-}
-
-// Check authentication on mount
-onMounted(async () => {
-  await checkAuth()
-})
-</script>
diff --git a/composables/useQueue.js b/composables/useQueue.js
index 59a452c..82b5e31 100644
--- a/composables/useQueue.js
+++ b/composables/useQueue.js
@@ -31,12 +31,28 @@ export const useQueue = (adminType = "loket") => {
     return queueStore.currentProcessingPatient[adminType];
   });
 
-  // Derive from stagePatients
-  const diLoketPatients = computed(() => stagePatients.value.diLoket || []);
+  // Derive from stagePatients - ADD DEBUG LOGS
+  const diLoketPatients = computed(() => {
+    const patients = stagePatients.value.diLoket || [];
+    console.log('🔍 useQueue - diLoketPatients:', patients.length);
+    if (patients.length > 0) {
+      console.log('🔍 First diLoket patient:', patients[0]);
+      console.log('🔍 First diLoket patient fastTrack:', patients[0].fastTrack);
+    }
+    return patients;
+  });
   
-  const terlambatPatients = computed(() => stagePatients.value.terlambat || []);
+  const terlambatPatients = computed(() => {
+    const patients = stagePatients.value.terlambat || [];
+    console.log('🔍 useQueue - terlambatPatients:', patients.length);
+    return patients;
+  });
   
-  const pendingPatients = computed(() => stagePatients.value.pending || []);
+  const pendingPatients = computed(() => {
+    const patients = stagePatients.value.pending || [];
+    console.log('🔍 useQueue - pendingPatients:', patients.length);
+    return patients;
+  });
   
   const waitingPatients = computed(() => stagePatients.value.waiting || []);
 
@@ -52,6 +68,9 @@ export const useQueue = (adminType = "loket") => {
 
   const quotaUsed = computed(() => queueStore.quotaUsed);
 
+  // Expose dev helper to refresh seed data
+  const resetPatients = () => queueStore.resetPatients();
+
   // Filtered lists
   const filteredKliniks = computed(() => {
     if (!klinikSearch.value) return queueStore.kliniks;
diff --git a/layouts/bagus.vue.txt b/layouts/bagus.vue.txt
deleted file mode 100644
index fbd484d..0000000
--- a/layouts/bagus.vue.txt
+++ /dev/null
@@ -1,286 +0,0 @@
-<template>
-  <v-app>
-    <!-- <LazyAppBar @toggle-rail="rail = !rail" /> -->
-    <v-navigation-drawer 
-      v-model="drawer" 
-      :rail="rail" 
-      permanent 
-      app
-      color="white"
-      width="280"
-      rail-width="72"
-    >
-      <div 
-        class="pa-4 d-flex align-center cursor-pointer" 
-        style="height: 64px;"
-        @click="rail = !rail"
-      >
-        <v-icon color="#ff9248" size="32">mdi-hospital-building</v-icon>
-        <v-toolbar-title v-show="!rail" class="ml-3 text-h6">
-          Antrean RSSA
-        </v-toolbar-title>
-      </div>
-
-      <v-divider></v-divider>
-
-      <v-list density="default" nav class="py-2">
-        <v-list-subheader v-show="!rail" class="text-caption text-grey">
-          OVERVIEW
-        </v-list-subheader>
-
-        <template v-for="item in items" :key="item.title">
-          <v-menu
-            v-if="item.children"
-            open-on-hover
-            location="end"
-            :disabled="!rail"
-          >
-            <template v-slot:activator="{ props }">
-              <v-list-group v-if="!rail" :value="item.title">
-                <template v-slot:activator="{ props }">
-                  <v-list-item
-                    v-bind="props"
-                    :prepend-icon="item.icon"
-                    :title="item.title"
-                    :active="item.title === currentActiveMenu"
-                    rounded="lg"
-                    class="mx-2 my-1"
-                  >
-                  </v-list-item>
-                </template>
-                <v-list-item
-                  v-for="child in item.children"
-                  :key="child.title"
-                  :to="child.to"
-                  :title="child.title"
-                  :active="child.to === currentRoute.path"
-                  rounded="lg"
-                  class="mx-2 my-1 pl-12"
-                >
-                </v-list-item>
-              </v-list-group>
-
-              <v-list-item
-                v-else
-                v-bind="props"
-                :prepend-icon="item.icon"
-                :active="item.title === currentActiveMenu"
-                rounded="lg"
-                class="mx-2 my-1"
-              >
-              </v-list-item>
-            </template>
-
-            <v-list class="py-2" style="min-width: 200px;">
-              <v-list-item>
-                <v-list-item-title class="font-weight-bold">
-                  {{ item.title }}
-                </v-list-item-title>
-              </v-list-item>
-              <v-divider class="my-2"></v-divider>
-              <v-list-item
-                v-for="child in item.children"
-                :key="child.title"
-                :to="child.to"
-                :title="child.title"
-                :active="child.to === currentRoute.path"
-                rounded="lg"
-                class="mx-2"
-              >
-              </v-list-item>
-            </v-list>
-          </v-menu>
-
-          <v-list-item
-            v-else
-            :prepend-icon="item.icon"
-            :title="!rail ? item.title : ''"
-            :to="item.to"
-            :active="item.to === currentRoute.path"
-            rounded="lg"
-            class="mx-2 my-1"
-          >
-            <template v-slot:append v-if="item.badge && !rail">
-              <v-chip size="x-small" color="primary">{{ item.badge }}</v-chip>
-            </template>
-          </v-list-item>
-        </template>
-
-        <v-divider class="my-4"></v-divider>
-
-        <v-list-subheader v-show="!rail" class="text-caption text-grey">
-          ACCOUNT
-        </v-list-subheader>
-
-        <v-list-item
-          prepend-icon="mdi-cog-outline"
-          :title="!rail ? 'Settings' : ''"
-          to="/settings"
-          rounded="lg"
-          class="mx-2 my-1"
-        >
-        </v-list-item>
-
-        <v-list-item
-          prepend-icon="mdi-logout"
-          :title="!rail ? 'Log out' : ''"
-          rounded="lg"
-          class="mx-2 my-1"
-        >
-        </v-list-item>
-      </v-list>
-
-      <template v-slot:append>
-        <div class="pa-4 d-flex justify-center align-center">
-          <v-icon color="primary" size="20">mdi-white-balance-sunny</v-icon>
-          <v-switch
-            v-show="!rail"
-            v-model="darkMode"
-            hide-details
-            density="compact"
-            color="primary"
-            class="mx-2"
-          ></v-switch>
-          <v-icon v-show="!rail" size="20">mdi-moon-waning-crescent</v-icon>
-        </div>
-
-        <v-divider></v-divider>
-
-        <div class="pa-4">
-          <div class="d-flex align-center">
-            <v-avatar color="#ff9248" size="40">
-              <span class="text-white">AS</span>
-            </v-avatar>
-            <div v-show="!rail" class="ml-3 flex-grow-1">
-              <div class="text-subtitle-2 font-weight-bold">Adam Sulfat</div>
-              <div class="text-caption text-grey">adam@rssa.com</div>
-              </div>
-            <v-btn
-              v-show="!rail"
-              icon
-              size="small"
-              variant="text"
-            >
-              <v-icon size="20">mdi-dots-vertical</v-icon>
-            </v-btn>
-          </div>
-        </div>
-      </template>
-    </v-navigation-drawer>
-
-    <v-main>
-      <v-container fluid class="pa-6">
-        <slot></slot>
-      </v-container>
-    </v-main>
-
-    <v-footer app class="bg-grey-lighten-4">
-      <v-container fluid class="py-2">
-        <v-row no-gutters align="center">
-          <v-col cols="12" md="6">
-            <span class="text-caption text-grey-darken-2">
-              RSUD Dr. Saiful Anwar Malang | Jl. Jaksa Agung Suprapto No. 2 Malang | Telp: 0341-362101
-            </span>
-          </v-col>
-          <v-col cols="12" md="6" class="text-right">
-            <span class="text-caption text-grey-darken-2">
-              ITIKom Antrian RSSA Ver. 0.2
-            </span>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-footer>
-  </v-app>
-</template>
-
-<script setup>
-import { ref, computed } from "vue";
-import { useRoute } from 'vue-router';
-// NOTE: Make sure to check if LazyAppBar is still needed, 
-// as its original purpose might have been to handle the rail toggle.
-import AppBar from "../components/AppBar.vue"; 
-
-// Use auth composable
-// Assuming useAuth() is defined elsewhere
-// const { user, isAuthenticated, isLoading, checkAuth, logout } = useAuth()
-// console.log(user)
-
-// State
-const drawer = ref(true);
-const rail = ref(false);
-const darkMode = ref(false);
-
-// Menu Items
-const items = ref([
-  { title: "Dashboard", icon: "mdi-view-dashboard-outline", to: "/dashboard" },
-  { 
-    title: "Setting", 
-    icon: "mdi-cog-outline",
-    children: [
-      { title: "Hak Akses", to: "/setting/hak-akses" },
-      { title: "User Login", to: "/setting/user-login" },
-      { title: "Master Loket", to: "/setting/master-loket" },
-      { title: "Master Klinik", to: "/setting/master-klinik" },
-      { title: "Master Klinik Ruang", to: "/setting/master-klinik-ruang" },
-      { title: "Screen", to: "/setting/screen" },
-    ],
-  },
-  { title: "Loket Admin", icon: "mdi-account-supervisor-outline", to: "/loket-admin" },
-  { title: "Ranap Admin", icon: "mdi-bed-outline", to: "/ranap-admin" },
-  { 
-    title: "Anjungan", 
-    icon: "mdi-account-box-multiple-outline",
-    children: [
-      { title: "Anjungan", to: "/anjungan/anjungan" },
-      { title: "Klinik Ruang", to: "/anjungan/AntrianKlinik"},
-    ],
-  },
-  { title: "Data Pasien", icon: "mdi-account-multiple-outline", to: "/data-pasien" },
-]);
-
-const currentRoute = useRoute();
-const currentActiveMenu = computed(() => {
-  const currentItem = items.value.find(item => item.to === currentRoute.path);
-  if (currentItem) {
-    return currentItem.title;
-  }
-
-  for (const item of items.value) {
-    if (item.children) {
-      const childItem = item.children.find(child => child.to === currentRoute.path);
-      if (childItem) {
-        return item.title;
-      }
-    }
-  }
-  return '';
-});
-</script>
-
-<style scoped>
-/* Added cursor style for the new clickable header */
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.v-list-item--active {
-  background-color: #e8f5e9 !important;
-  color: #2e7d32 !important;
-}
-
-.v-list-item--active :deep(.v-list-item__prepend) {
-  color: #2e7d32 !important;
-}
-
-.v-list-item {
-  transition: all 0.2s ease;
-}
-
-.v-list-item:hover {
-  background-color: #f5f5f5;
-}
-
-.v-navigation-drawer {
-  border-right: 1px solid #e0e0e0 !important;
-}
-</style>
\ No newline at end of file
diff --git a/pages/AdminLoket.vue b/pages/AdminLoket.vue
index 12f2ac5..3fd5bb2 100644
--- a/pages/AdminLoket.vue
+++ b/pages/AdminLoket.vue
@@ -59,7 +59,7 @@
       <!-- Right Column: Patient Table -->
       <v-col cols="12" md="7">
         <PatientDataTable
-          :items="allPatients"
+          :items="allPatientsForStage"
           v-model:selected-status="selectedStatus"
           v-model:search-query="searchQuery"
           :di-loket-count="(diLoketPatients || []).length"
@@ -133,6 +133,7 @@ const {
   diLoketPatients,
   terlambatPatients,
   pendingPatients,
+  waitingPatients,
   nextPatient,
   quotaUsed,
   filteredKliniks,
@@ -159,13 +160,34 @@ const currentDate = ref(
 const selectedStatus = ref("all");
 const searchQuery = ref("");
 
-// Combine all patients with status
-const allPatients = computed(() => {
-  const diLoket = (diLoketPatients.value || []).map(p => ({ ...p, status: 'diloket' }));
-  const terlambat = (terlambatPatients.value || []).map(p => ({ ...p, status: 'terlambat' }));
-  const pending = (pendingPatients.value || []).map(p => ({ ...p, status: 'pending' }));
+// Combine all patients with status - PRESERVE ALL PROPERTIES
+const allPatientsForStage = computed(() => {
+  const diLoket = (diLoketPatients.value || []).map(p => ({ 
+    ...p, // Spread all properties first
+    status: 'diloket' // Then override only status
+  }));
+  const terlambat = (terlambatPatients.value || []).map(p => ({ 
+    ...p, 
+    status: 'terlambat'
+  }));
+  const pending = (pendingPatients.value || []).map(p => ({ 
+    ...p, 
+    status: 'pending'
+  }));
   
-  return [...diLoket, ...terlambat, ...pending];
+  // Do not show waiting patients in the table until called
+  const combined = [...diLoket, ...terlambat, ...pending];
+  
+  // Debug: check if fastTrack property exists
+  console.log('📊 AdminLoket - allPatientsForStage:', combined.length);
+  if (combined.length > 0) {
+    console.log('📊 First patient:', combined[0]);
+    console.log('📊 First patient has fastTrack?', 'fastTrack' in combined[0]);
+    console.log('📊 First patient fastTrack value:', combined[0].fastTrack);
+    console.log('📊 All fastTrack values:', combined.map(p => p.fastTrack));
+  }
+  
+  return combined;
 });
 
 const handlePatientAction = (action) => {
diff --git a/pages/Anjungan/Anjungan.vue b/pages/Anjungan/Anjungan.txt
similarity index 70%
rename from pages/Anjungan/Anjungan.vue
rename to pages/Anjungan/Anjungan.txt
index 186de69..9d9bac6 100644
--- a/pages/Anjungan/Anjungan.vue
+++ b/pages/Anjungan/Anjungan.txt
@@ -11,16 +11,21 @@
             <p class="page-subtitle">Pilih Klinik untuk Pendaftaran</p>
           </div>
         </div>
-        <div class="header-right">
-          <v-btn 
-            color="white" 
-            variant="flat" 
-            class="help-button"
-            @click="showHelpDialog = true"
-          >
-            <v-icon start size="20">mdi-help-circle</v-icon>
-            Bantuan
-          </v-btn>
+                  <div class="header-right">
+          <div class="info-guide">
+            <div class="guide-item">
+              <span class="guide-number">1</span>
+              <span class="guide-text">Pilih Poli (Hijau = Buka, Merah = Tutup)</span>
+            </div>
+            <div class="guide-item">
+              <span class="guide-number">2</span>
+              <span class="guide-text">Pilih: Daftar Sekarang atau Jadwal Lain</span>
+            </div>
+            <div class="guide-item">
+              <span class="guide-number">3</span>
+              <span class="guide-text">Pilih Jenis Pembayaran</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -90,71 +95,6 @@
       </v-card-text>
     </v-card>
 
-    <v-dialog v-model="showHelpDialog" max-width="600" persistent>
-      <v-card class="dialog-card">
-        <v-card-title class="dialog-header">
-          <v-icon class="mr-2">mdi-help-circle</v-icon>
-          Panduan Penggunaan Anjungan
-        </v-card-title>
-
-        <v-card-text class="pa-6">
-          <div class="help-content">
-            <h3 class="help-title">Cara Menggunakan Anjungan Pendaftaran:</h3>
-            
-            <div class="help-step">
-              <div class="step-number">1</div>
-              <div class="step-content">
-                <h4>Pilih Klinik/Poliklinik</h4>
-                <p>Sentuh card klinik yang Anda tuju. Card <strong style="color: var(--color-success-600);">HIJAU</strong> menandakan klinik tersedia, card <strong style="color: var(--color-danger-600);">MERAH</strong> menandakan klinik tutup.</p>
-              </div>
-            </div>
-
-            <div class="help-step">
-              <div class="step-number">2</div>
-              <div class="step-content">
-                <h4>Pilih Jenis Kunjungan</h4>
-                <p><strong>SEKARANG:</strong> Untuk berobat hari ini<br>
-                <strong>PESAN:</strong> Untuk membuat janji di hari lain<br>
-                <strong>FAST TRACK:</strong> Untuk kasus mendesak</p>
-              </div>
-            </div>
-
-            <div class="help-step">
-              <div class="step-number">3</div>
-              <div class="step-content">
-                <h4>Pilih Jenis Pembayaran</h4>
-                <p>Pilih <strong>BPJS</strong> atau <strong>UMUM/JKMM/SPM/DLL</strong> sesuai dengan kartu jaminan kesehatan Anda.</p>
-              </div>
-            </div>
-
-            <div class="help-step">
-              <div class="step-number">4</div>
-              <div class="step-content">
-                <h4>Lengkapi Formulir</h4>
-                <p>Isi data yang diminta sesuai jenis kunjungan yang Anda pilih.</p>
-              </div>
-            </div>
-
-            <v-divider class="my-4"></v-divider>
-
-            <div class="help-note">
-              <v-icon color="primary-600" size="20">mdi-information</v-icon>
-              <p><strong>Informasi Tambahan:</strong><br>
-              • Periksa ketersediaan dokter pada setiap card klinik<br>
-              • Pastikan datang 15 menit sebelum jadwal yang dipilih<br>
-              • Bawa kartu identitas dan kartu BPJS (jika menggunakan BPJS)</p>
-            </div>
-          </div>
-        </v-card-text>
-        
-        <v-card-actions class="justify-center pa-4">
-          <v-btn color="primary-600" size="large" class="text-white" variant="flat" @click="showHelpDialog = false">
-            Mengerti
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
     <v-dialog v-model="showVisitTypeDialog" max-width="400" persistent>
       <v-card class="dialog-card">
         <v-card-title class="dialog-header">
@@ -183,14 +123,16 @@
                   </li>
                 </ul>
               </div>
-              <p><strong>Shift:</strong> {{ selectedClinic.shift }}</p>
-              <p v-if="selectedClinic.schedule">
-                <strong>Jadwal:</strong> {{ selectedClinic.schedule }}
-              </p>
-              <p>
-                <strong>Status:</strong>
-                <span class="status-available">Tersedia</span>
-              </p>
+              
+              <div class="quota-section">
+                <p><strong>Kuota Hari Ini (Shift {{ getCurrentShiftNumber() }}):</strong></p>
+                <div class="current-quota-display" :class="{ 'quota-empty': getCurrentShiftQuota() === 0 }">
+                  <span class="quota-large-number">{{ getCurrentShiftQuota() }}</span>
+                  <span class="quota-label">pasien tersedia</span>
+                </div>
+              </div>
+              
+              <p><strong>Jadwal:</strong> {{ selectedClinic.schedule }}</p>
             </div>
           </div>
         </v-card-text>
@@ -198,15 +140,33 @@
         <v-divider />
         
         <v-card-text class="pa-4">
-          <v-btn color="primary-600" class="mb-3 text-white" size="large" block @click="selectVisitType('SEKARANG')">
-            SEKARANG
-          </v-btn>
-          <v-btn color="primary-600" variant="outlined" class="mb-3" size="large" block @click="selectVisitType('PESAN')">
-            PESAN
-          </v-btn>
-          <v-btn color="danger-600" class="text-white" size="large" block @click="selectVisitType('FAST TRACK')">
-            FAST TRACK
-          </v-btn>
+          <v-row dense>
+            <v-col cols="6">
+              <v-btn 
+                color="success-600" 
+                class="text-white" 
+                size="large" 
+                block 
+                @click="selectVisitType('SEKARANG')"
+                :disabled="isShift1Full(selectedClinic)"
+                :class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
+              >
+                DAFTAR SEKARANG
+              </v-btn>
+              <p v-if="isShift1Full(selectedClinic)" class="disabled-hint">Kuota hari ini habis</p>
+            </v-col>
+            <v-col cols="6">
+              <v-btn 
+                color="primary-600" 
+                class="text-white" 
+                size="large" 
+                block 
+                @click="selectVisitType('JADWAL_LAIN')"
+              >
+                JADWAL LAIN
+              </v-btn>
+            </v-col>
+          </v-row>
         </v-card-text>
         
         <v-card-actions class="justify-center pa-4 pt-0">
@@ -217,7 +177,7 @@
       </v-card>
     </v-dialog>
 
-    <v-dialog v-model="showPaymentTypeDialog" max-width="400" persistent>
+    <v-dialog v-model="showPaymentTypeDialog" max-width="400">
       <v-card class="dialog-card">
         <v-card-title class="dialog-header-simple">Jenis Pembayaran</v-card-title>
         <v-divider />
@@ -237,10 +197,10 @@
       </v-card>
     </v-dialog>
 
-    <v-dialog v-model="showBookingFormDialog" max-width="500" persistent>
+    <v-dialog v-model="showBookingFormDialog" max-width="500">
       <v-card class="dialog-card">
         <v-card-title class="dialog-header">
-          Pemesanan Antrian Poliklinik
+          Pilih Jadwal Kunjungan
         </v-card-title>
         <v-card-text class="pa-6">
           <v-form @submit.prevent="submitBooking">
@@ -252,12 +212,16 @@
               density="compact"
               required
               class="mb-3"
+              :min="getMinDate()"
+              :max="getMaxDate()"
             ></v-text-field>
 
             <v-select
               v-model="bookingForm.shift"
-              :items="['Shift 1', 'Shift 2']"
-              label="Shift"
+              :items="getAvailableShiftsForBooking()"
+              item-title="label"
+              item-value="value"
+              label="Pilih Shift"
               variant="outlined"
               density="compact"
               required
@@ -286,71 +250,6 @@
       </v-card>
     </v-dialog>
 
-    <v-dialog v-model="showFastTrackFormDialog" max-width="500" persistent>
-      <v-card class="dialog-card">
-        <v-card-title class="dialog-header">
-          Form Fast Track
-        </v-card-title>
-        <v-card-text class="pa-6">
-          <v-form @submit.prevent="submitFastTrack">
-            <v-text-field
-              v-model="fastTrackForm.guarantor"
-              label="Penanggung Jawab"
-              variant="outlined"
-              density="compact"
-              required
-              class="mb-3"
-            ></v-text-field>
-
-            <v-text-field
-              v-model="fastTrackForm.noRek"
-              label="No Rekam Medis (Jika Ada)"
-              variant="outlined"
-              density="compact"
-              class="mb-3"
-            ></v-text-field>
-
-            <v-text-field
-              v-model="fastTrackForm.patientName"
-              label="Nama Pasien"
-              variant="outlined"
-              density="compact"
-              required
-              class="mb-3"
-            ></v-text-field>
-
-            <v-textarea
-              v-model="fastTrackForm.reason"
-              label="Alasan Fast Track"
-              variant="outlined"
-              density="compact"
-              required
-              rows="3"
-              class="mb-3"
-            ></v-textarea>
-
-            <v-select
-              v-model="fastTrackForm.payment"
-              :items="['BPJS', 'UMUM/JKMM/SPM/DLL']"
-              label="Pembayaran"
-              variant="outlined"
-              density="compact"
-              required
-            ></v-select>
-          </v-form>
-        </v-card-text>
-        <v-card-actions class="pa-4">
-          <v-spacer />
-          <v-btn @click="showFastTrackFormDialog = false" variant="outlined" color="neutral-600">
-            Tutup
-          </v-btn>
-          <v-btn color="success-600" class="text-white" variant="flat" @click="submitFastTrack">
-            Simpan
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
     <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="3000" location="top right">
       {{ snackbarText }}
       <template v-slot:actions>
@@ -375,8 +274,6 @@ const searchQuery = ref("");
 const showVisitTypeDialog = ref(false);
 const showPaymentTypeDialog = ref(false);
 const showBookingFormDialog = ref(false);
-const showFastTrackFormDialog = ref(false);
-const showHelpDialog = ref(false);
 const selectedClinic = ref(null);
 const selectedVisitType = ref(null);
 const snackbar = ref(false);
@@ -389,14 +286,6 @@ const bookingForm = ref({
   payment: null,
 });
 
-const fastTrackForm = ref({
-  guarantor: "",
-  noRek: "",
-  patientName: "",
-  reason: "",
-  payment: null,
-});
-
 const statusOptions = ["Tersedia", "Tutup"];
 
 const clinics = ref([
@@ -409,6 +298,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Sarah Putri, Sp.A", "dr. Andi Wijaya, Sp.A"],
+    shifts: [
+      { name: "Shift 1", quota: 15 },
+      { name: "Shift 2", quota: 20 }
+    ]
   },
   {
     id: 2,
@@ -419,6 +312,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Ahmad Fauzi, Sp.An"],
+    shifts: [
+      { name: "Shift 1", quota: 0 },
+      { name: "Shift 2", quota: 12 }
+    ]
   },
   {
     id: 3,
@@ -429,6 +326,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Budi Santoso, Sp.B", "dr. Eko Prasetyo, Sp.B", "dr. Dian Permata, Sp.B"],
+    shifts: [
+      { name: "Shift 1", quota: 8 },
+      { name: "Shift 2", quota: 10 }
+    ]
   },
   {
     id: 4,
@@ -439,6 +340,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Siti Aminah, Sp.PD-KGer"],
+    shifts: [
+      { name: "Shift 1", quota: 10 },
+      { name: "Shift 2", quota: 8 }
+    ]
   },
   {
     id: 5,
@@ -449,6 +354,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["drg. Rina Wati, Sp.KG", "drg. Made Surya, Sp.KG"],
+    shifts: [
+      { name: "Shift 1", quota: 18 },
+      { name: "Shift 2", quota: 15 }
+    ]
   },
   {
     id: 6,
@@ -459,6 +368,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Lisa Andriani, Sp.GK"],
+    shifts: [
+      { name: "Shift 1", quota: 12 },
+      { name: "Shift 2", quota: 10 }
+    ]
   },
   {
     id: 7,
@@ -469,6 +382,7 @@ const clinics = ref([
     schedule: "",
     available: false,
     doctors: [],
+    shifts: []
   },
   {
     id: 8,
@@ -479,6 +393,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Hendra Wijaya, Sp.PD", "dr. Agus Salim, Sp.PD", "dr. Retno Wulan, Sp.PD", "dr. Bambang Susilo, Sp.PD"],
+    shifts: [
+      { name: "Shift 1", quota: 25 },
+      { name: "Shift 2", quota: 20 }
+    ]
   },
   {
     id: 9,
@@ -489,6 +407,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Rudi Hartono, Sp.JP", "dr. Sinta Dewi, Sp.JP"],
+    shifts: [
+      { name: "Shift 1", quota: 14 },
+      { name: "Shift 2", quota: 12 }
+    ]
   },
   {
     id: 10,
@@ -499,6 +421,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Maya Kusuma, Sp.KJ"],
+    shifts: [
+      { name: "Shift 1", quota: 10 },
+      { name: "Shift 2", quota: 8 }
+    ]
   },
   {
     id: 11,
@@ -509,6 +435,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Dewi Lestari, Sp.OG", "dr. Putri Andini, Sp.OG", "dr. Nova Riani, Sp.OG"],
+    shifts: [
+      { name: "Shift 1", quota: 16 },
+      { name: "Shift 2", quota: 14 }
+    ]
   },
   {
     id: 12,
@@ -519,6 +449,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Andi Pratama, Sp.PD-KHOM"],
+    shifts: [
+      { name: "Shift 1", quota: 8 },
+      { name: "Shift 2", quota: 6 }
+    ]
   },
   {
     id: 13,
@@ -529,6 +463,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Ratna Sari, Sp.KFR"],
+    shifts: [
+      { name: "Shift 1", quota: 10 },
+      { name: "Shift 2", quota: 8 }
+    ]
   },
   {
     id: 14,
@@ -539,6 +477,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Tika Anggraini, Sp.KK", "dr. Fajar Ramadhan, Sp.KK"],
+    shifts: [
+      { name: "Shift 1", quota: 12 },
+      { name: "Shift 2", quota: 10 }
+    ]
   },
   {
     id: 15,
@@ -549,6 +491,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Yudi Prasetyo, Sp.M", "dr. Linda Kartika, Sp.M"],
+    shifts: [
+      { name: "Shift 1", quota: 15 },
+      { name: "Shift 2", quota: 12 }
+    ]
   },
   {
     id: 16,
@@ -559,6 +505,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Fitri Handayani, Sp.OK"],
+    shifts: [
+      { name: "Shift 1", quota: 20 },
+      { name: "Shift 2", quota: 15 }
+    ]
   },
   {
     id: 17,
@@ -569,6 +519,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Dimas Prakoso, Sp.Onk-Rad"],
+    shifts: [
+      { name: "Shift 1", quota: 10 },
+      { name: "Shift 2", quota: 8 }
+    ]
   },
   {
     id: 18,
@@ -579,6 +533,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Nina Marlina, Sp.P", "dr. Arief Budiman, Sp.P"],
+    shifts: [
+      { name: "Shift 1", quota: 14 },
+      { name: "Shift 2", quota: 12 }
+    ]
   },
   {
     id: 19,
@@ -589,6 +547,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Fajar Nugroho, Sp.S"],
+    shifts: [
+      { name: "Shift 1", quota: 12 },
+      { name: "Shift 2", quota: 10 }
+    ]
   },
   {
     id: 20,
@@ -599,6 +561,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Wulan Safitri, Sp.Rad"],
+    shifts: [
+      { name: "Shift 1", quota: 8 },
+      { name: "Shift 2", quota: 6 }
+    ]
   },
   {
     id: 21,
@@ -609,6 +575,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Gita Permata, Sp.KFR", "dr. Rian Saputra, Sp.KFR"],
+    shifts: [
+      { name: "Shift 1", quota: 16 },
+      { name: "Shift 2", quota: 14 }
+    ]
   },
   {
     id: 22,
@@ -619,6 +589,7 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: false,
     doctors: [],
+    shifts: []
   },
   {
     id: 23,
@@ -629,6 +600,10 @@ const clinics = ref([
     schedule: "Mulai Pukul 07:00",
     available: true,
     doctors: ["dr. Reza Maulana, Sp.THT-KL"],
+    shifts: [
+      { name: "Shift 1", quota: 12 },
+      { name: "Shift 2", quota: 10 }
+    ]
   },
 ]);
 
@@ -672,6 +647,64 @@ const getDisplayDoctorInfo = (clinic) => {
   }
 };
 
+// Check if Shift 1 is full
+const isShift1Full = (clinic) => {
+  if (!clinic || !clinic.shifts || clinic.shifts.length === 0) return true;
+  const shift1 = clinic.shifts.find(s => s.name === "Shift 1");
+  return shift1 ? shift1.quota === 0 : true;
+};
+
+// Get current shift number (for demo purposes, assuming Shift 1 is current)
+const getCurrentShiftNumber = () => {
+  return 1; // In real app, this would be dynamic based on current time
+};
+
+// Get current shift quota
+const getCurrentShiftQuota = () => {
+  if (!selectedClinic.value || !selectedClinic.value.shifts) return 0;
+  const currentShift = selectedClinic.value.shifts.find(s => s.name === "Shift 1");
+  return currentShift ? currentShift.quota : 0;
+};
+
+// Get available shifts for booking form (excluding current shift)
+const getAvailableShiftsForBooking = () => {
+  if (!selectedClinic.value || !selectedClinic.value.shifts) return [];
+  
+  const selectedDate = bookingForm.value.date;
+  const today = new Date().toISOString().substring(0, 10);
+  const isToday = selectedDate === today;
+  
+  // If today, exclude current shift (Shift 1)
+  // If future date, show all shifts with available quota
+  return selectedClinic.value.shifts
+    .filter(shift => {
+      if (isToday) {
+        // Exclude Shift 1 for today
+        return shift.name !== "Shift 1" && shift.quota > 0;
+      } else {
+        // Show all shifts with quota for future dates
+        return shift.quota > 0;
+      }
+    })
+    .map(shift => ({
+      label: `${shift.name} (Kuota: ${shift.quota} pasien)`,
+      value: shift.name
+    }));
+};
+
+// Get minimum date (today)
+const getMinDate = () => {
+  return new Date().toISOString().substring(0, 10);
+};
+
+// Get maximum date (2 weeks from today)
+const getMaxDate = () => {
+  const today = new Date();
+  const maxDate = new Date(today);
+  maxDate.setDate(today.getDate() + 14); // 2 weeks = 14 days
+  return maxDate.toISOString().substring(0, 10);
+};
+
 const showSnackbar = (text, color = "success") => {
   snackbarText.value = text;
   snackbarColor.value = color;
@@ -691,28 +724,24 @@ const selectVisitType = (type) => {
 
   if (type === "SEKARANG") {
     showPaymentTypeDialog.value = true;
-  } else if (type === "PESAN") {
+  } else if (type === "JADWAL_LAIN") {
+    // Set default to tomorrow
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    const tomorrowStr = tomorrow.toISOString().substring(0, 10);
+    
     bookingForm.value = {
-      date: new Date().toISOString().substring(0, 10),
-      shift: "Shift 1",
+      date: tomorrowStr,
+      shift: "",
       payment: null,
     };
     showBookingFormDialog.value = true;
-  } else if (type === "FAST TRACK") {
-    fastTrackForm.value = {
-      guarantor: "",
-      noRek: "",
-      patientName: "",
-      reason: "",
-      payment: null,
-    };
-    showFastTrackFormDialog.value = true;
   }
 };
 
 const selectPaymentType = (paymentType) => {
   showPaymentTypeDialog.value = false;
-  const message = `Pendaftaran **${selectedClinic.value.name}** untuk kunjungan **SEKARANG** dengan pembayaran **${paymentType}** berhasil diproses.`;
+  const message = `Pendaftaran **${selectedClinic.value.name}** untuk kunjungan **HARI INI** dengan pembayaran **${paymentType}** berhasil diproses.`;
   showSnackbar(message, "success");
   console.log(
     "Proceeding to registration for:",
@@ -730,12 +759,12 @@ const submitBooking = () => {
     !bookingForm.value.shift ||
     !bookingForm.value.payment
   ) {
-    showSnackbar("Mohon lengkapi semua field Pemesanan.", "error");
+    showSnackbar("Mohon lengkapi semua field.", "error");
     return;
   }
 
   showBookingFormDialog.value = false;
-  const message = `Pemesanan antrian **${selectedClinic.value.name}** pada ${bookingForm.value.date} (**${bookingForm.value.payment}**) berhasil disimpan.`;
+  const message = `Jadwal kunjungan **${selectedClinic.value.name}** pada ${bookingForm.value.date} - ${bookingForm.value.shift} (**${bookingForm.value.payment}**) berhasil disimpan.`;
   showSnackbar(message, "success");
   console.log(
     "Submitted booking for:",
@@ -745,30 +774,6 @@ const submitBooking = () => {
   selectedClinic.value = null;
 };
 
-const submitFastTrack = () => {
-  if (
-    !fastTrackForm.value.guarantor ||
-    !fastTrackForm.value.patientName ||
-    !fastTrackForm.value.reason ||
-    !fastTrackForm.value.payment
-  ) {
-    showSnackbar(
-      "Mohon lengkapi semua field Fast Track yang wajib diisi.",
-      "error"
-    );
-    return;
-  }
-  showFastTrackFormDialog.value = false;
-  const message = `Permintaan Fast Track **${selectedClinic.value.name}** atas nama ${fastTrackForm.value.patientName} (**${fastTrackForm.value.payment}**) telah diajukan.`;
-  showSnackbar(message, "success");
-  console.log(
-    "Submitted Fast Track for:",
-    selectedClinic.value.name,
-    fastTrackForm.value
-  );
-  selectedClinic.value = null;
-};
-
 const refreshData = () => {
   loading.value = true;
   setTimeout(() => {
@@ -803,6 +808,7 @@ onMounted(() => {
   justify-content: space-between;
   padding: 20px 24px;
   color: var(--color-neutral-100);
+  gap: 32px;
 }
 
 .header-left {
@@ -838,13 +844,37 @@ onMounted(() => {
   align-items: center;
 }
 
-.help-button {
-  font-weight: 600;
+.info-guide {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.guide-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   font-size: 14px;
-  color: var(--color-primary-600) !important;
-  padding: 10px 20px;
-  text-transform: none;
-  letter-spacing: normal;
+  line-height: 1.5;
+}
+
+.guide-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  font-weight: 700;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.guide-text {
+  color: var(--color-neutral-100);
+  font-weight: 600;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .main-content-card {
@@ -870,21 +900,11 @@ onMounted(() => {
   overflow: hidden;
 }
 
-.clinic-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
-}
-
 .clinic-available {
   border-color: var(--color-success-600);
   background: var(--color-success-200);
 }
 
-.clinic-available:hover {
-  border-color: var(--color-success-700);
-  box-shadow: 0 6px 20px rgba(0, 146, 98, 0.3);
-}
-
 .clinic-closed {
   opacity: 0.65;
   cursor: not-allowed;
@@ -892,11 +912,6 @@ onMounted(() => {
   background: var(--color-danger-200);
 }
 
-.clinic-closed:hover {
-  transform: none;
-  box-shadow: none;
-}
-
 .clinic-content {
   padding: 18px !important;
   height: 100%;
@@ -1056,6 +1071,106 @@ onMounted(() => {
   line-height: 1.6;
 }
 
+/* Quota Section */
+.quota-section {
+  margin-bottom: 16px;
+  
+  p {
+    margin-bottom: 12px;
+    font-size: 15px;
+  }
+}
+
+.current-quota-display {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  background: linear-gradient(135deg, var(--color-success-100) 0%, var(--color-success-200) 100%);
+  border-radius: 12px;
+  border: 2px solid var(--color-success-400);
+  margin-bottom: 12px;
+  
+  &.quota-empty {
+    background: linear-gradient(135deg, var(--color-neutral-200) 0%, var(--color-neutral-300) 100%);
+    border-color: var(--color-neutral-500);
+    
+    .quota-large-number {
+      color: var(--color-neutral-600);
+    }
+    
+    .quota-label {
+      color: var(--color-neutral-700);
+    }
+  }
+}
+
+.quota-large-number {
+  font-size: 48px;
+  font-weight: 700;
+  color: var(--color-success-700);
+  line-height: 1;
+  margin-bottom: 4px;
+}
+
+.quota-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-success-800);
+}
+
+.disabled-hint {
+  font-size: 11px;
+  color: var(--color-danger-600);
+  text-align: center;
+  margin: 4px 0 0 0;
+  font-weight: 600;
+}
+
+.btn-disabled {
+  opacity: 0.5 !important;
+  background-color: var(--color-neutral-500) !important;
+}
+
+.quota-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.quota-item {
+  padding: 10px 12px;
+  background: var(--color-success-100);
+  border-radius: 8px;
+  border: 2px solid var(--color-success-300);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
+  &.quota-full {
+    background: var(--color-danger-100);
+    border-color: var(--color-danger-300);
+    opacity: 0.7;
+    
+    .quota-shift, .quota-number {
+      color: var(--color-danger-700);
+    }
+  }
+}
+
+.quota-shift {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--color-success-700);
+  margin-bottom: 4px;
+}
+
+.quota-number {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-success-800);
+}
+
 /* Dialog Styles */
 .dialog-card {
   border-radius: 16px !important;
@@ -1163,6 +1278,25 @@ onMounted(() => {
     flex-direction: column;
     gap: 12px;
   }
+  
+  .header-right {
+    width: 100%;
+  }
+  
+  .info-guide {
+    width: 100%;
+  }
+  
+  .guide-item {
+    font-size: 12px;
+    justify-content: center;
+  }
+  
+  .guide-number {
+    width: 22px;
+    height: 22px;
+    font-size: 12px;
+  }
 
   .page-title {
     font-size: 24px;
@@ -1233,9 +1367,14 @@ onMounted(() => {
     font-size: 18px;
   }
   
-  .help-button {
-    font-size: 13px;
-    padding: 8px 16px;
+  .guide-item {
+    font-size: 11px;
+  }
+  
+  .guide-number {
+    width: 20px;
+    height: 20px;
+    font-size: 11px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/pages/Anjungan/Anjungan/[id].vue b/pages/Anjungan/Anjungan/[id].vue
new file mode 100644
index 0000000..520c65c
--- /dev/null
+++ b/pages/Anjungan/Anjungan/[id].vue
@@ -0,0 +1,928 @@
+<template>
+  <div class="anjungan-container" v-if="anjunganData">
+    <div class="page-header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="header-icon">
+            <v-icon size="32" color="white">mdi-hospital-building</v-icon>
+          </div>
+          <div class="header-text">
+            <h1 class="page-title">{{ anjunganData.namaAnjungan }}</h1>
+            <p class="page-subtitle">Pilih Klinik untuk Pendaftaran - {{ anjunganData.jenisPasien }}</p>
+          </div>
+        </div>
+        <div class="header-right">
+          <div class="info-guide">
+            <div class="guide-item">
+              <span class="guide-number">1</span>
+              <span class="guide-text">Pilih Poli (Hijau = Buka, Merah = Tutup)</span>
+            </div>
+            <div class="guide-item">
+              <span class="guide-number">2</span>
+              <span class="guide-text">Pilih: Daftar Sekarang atau Jadwal Lain</span>
+            </div>
+            <div class="guide-item">
+              <span class="guide-number">3</span>
+              <span class="guide-text">Pilih Jenis Pembayaran</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <v-card elevation="0" class="main-content-card">
+      <v-card-text class="pa-6">
+        <v-row>
+          <v-col
+            v-for="clinic in filteredClinics"
+            :key="clinic.id"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="3"
+            class="pa-2"
+          >
+            <v-card
+              :class="{
+                'clinic-card': true,
+                'clinic-available': clinic.available,
+                'clinic-closed': !clinic.available,
+              }"
+              :disabled="!clinic.available"
+              @click="selectClinic(clinic)"
+              elevation="0"
+            >
+              <v-card-text class="clinic-content">
+                <!-- Clinic Name - HIERARCHY: Most Prominent -->
+                <h3 class="clinic-name">
+                  {{ clinic.name }}
+                </h3>
+
+                <!-- Doctor Info -->
+                <div class="doctor-info">
+                  <v-icon size="16" :color="clinic.available ? 'var(--color-primary-600)' : 'var(--color-neutral-600)'">
+                    mdi-doctor
+                  </v-icon>
+                  <span>{{ getDisplayDoctorInfo(clinic) }}</span>
+                </div>
+
+                <!-- Schedule Info - Fixed Bottom Left -->
+                <div class="schedule-info">
+                  <v-icon size="14" :color="clinic.available ? 'var(--color-success-600)' : 'var(--color-neutral-600)'">
+                    mdi-clock-outline
+                  </v-icon>
+                  <span>{{ clinic.schedule || 'Tidak tersedia' }}</span>
+                </div>
+
+                <!-- Clinic Icon - Secondary Element -->
+                <div class="clinic-icon-wrapper">
+                  <v-icon
+                    :icon="clinic.icon"
+                    size="40"
+                    :color="clinic.available ? 'var(--color-success-600)' : 'var(--color-neutral-100)'"
+                  ></v-icon>
+                </div>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+
+        <div v-if="filteredClinics.length === 0" class="empty-state">
+          <v-icon size="64" color="grey-lighten-1">mdi-hospital-marker-outline</v-icon>
+          <h3 class="empty-title">Tidak ada klinik yang sesuai</h3>
+          <p class="empty-subtitle">Anjungan ini belum memiliki klinik terpilih</p>
+        </div>
+      </v-card-text>
+    </v-card>
+
+    <v-dialog v-model="showVisitTypeDialog" max-width="400" persistent>
+      <v-card class="dialog-card">
+        <v-card-title class="dialog-header">
+          <v-icon class="mr-2">mdi-check-circle</v-icon>
+          Konfirmasi Pilihan
+        </v-card-title>
+
+        <v-card-text class="pa-6" v-if="selectedClinic">
+          <div class="dialog-content">
+            <div class="dialog-icon mb-3">
+              <v-icon :icon="selectedClinic.icon" size="48" color="primary-600"></v-icon>
+            </div>
+            <h3 class="dialog-clinic-name">{{ selectedClinic.name }}</h3>
+            <p v-if="selectedClinic.subtitle" class="dialog-subtitle">
+              {{ selectedClinic.subtitle }}
+            </p>
+
+            <v-divider class="my-4"></v-divider>
+
+            <div class="dialog-info">
+              <div class="doctor-list-section">
+                <p><strong>Dokter yang Tersedia:</strong></p>
+                <ul class="doctor-list">
+                  <li v-for="(doctor, index) in selectedClinic.doctors" :key="index">
+                    {{ doctor }}
+                  </li>
+                </ul>
+              </div>
+              
+              <div class="quota-section">
+                <p><strong>Kuota Hari Ini (Shift {{ getCurrentShiftNumber() }}):</strong></p>
+                <div class="current-quota-display" :class="{ 'quota-empty': getCurrentShiftQuota() === 0 }">
+                  <span class="quota-large-number">{{ getCurrentShiftQuota() }}</span>
+                  <span class="quota-label">pasien tersedia</span>
+                </div>
+              </div>
+              
+              <p><strong>Jadwal:</strong> {{ selectedClinic.schedule }}</p>
+            </div>
+          </div>
+        </v-card-text>
+        
+        <v-divider />
+        
+        <v-card-text class="pa-4">
+          <v-row dense>
+            <v-col cols="6">
+              <v-btn 
+                color="success-600" 
+                class="text-white" 
+                size="large" 
+                block 
+                @click="selectVisitType('SEKARANG')"
+                :disabled="isShift1Full(selectedClinic)"
+                :class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
+              >
+                DAFTAR SEKARANG
+              </v-btn>
+              <p v-if="isShift1Full(selectedClinic)" class="disabled-hint">Kuota hari ini habis</p>
+            </v-col>
+            <v-col cols="6">
+              <v-btn 
+                color="primary-600" 
+                class="text-white" 
+                size="large" 
+                block 
+                @click="selectVisitType('JADWAL_LAIN')"
+              >
+                JADWAL LAIN
+              </v-btn>
+            </v-col>
+          </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>
+
+    <v-dialog v-model="showPaymentTypeDialog" max-width="400">
+      <v-card class="dialog-card">
+        <v-card-title class="dialog-header-simple">Jenis Pembayaran</v-card-title>
+        <v-divider />
+        <v-card-text class="pa-4">
+          <v-btn color="success-600" class="mb-3 payment-btn text-white" size="x-large" block @click="selectPaymentType('BPJS')">
+            BPJS
+          </v-btn>
+          <v-btn color="secondary-600" class="payment-btn text-white" size="x-large" block @click="selectPaymentType('UMUM')">
+            UMUM / JKMM / SPM / DLL
+          </v-btn>
+        </v-card-text>
+        <v-card-actions class="justify-center pa-4 pt-0">
+          <v-btn variant="outlined" color="neutral-600" @click="showPaymentTypeDialog = false">
+            Tutup
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="showBookingFormDialog" max-width="500">
+      <v-card class="dialog-card">
+        <v-card-title class="dialog-header">
+          Pilih Jadwal Kunjungan
+        </v-card-title>
+        <v-card-text class="pa-6">
+          <v-form @submit.prevent="submitBooking">
+            <v-text-field
+              v-model="bookingForm.date"
+              label="Tanggal"
+              type="date"
+              variant="outlined"
+              density="compact"
+              required
+              class="mb-3"
+              :min="getMinDate()"
+              :max="getMaxDate()"
+            ></v-text-field>
+
+            <v-select
+              v-model="bookingForm.shift"
+              :items="getAvailableShiftsForBooking()"
+              item-title="label"
+              item-value="value"
+              label="Pilih Shift"
+              variant="outlined"
+              density="compact"
+              required
+              class="mb-3"
+            ></v-select>
+
+            <v-select
+              v-model="bookingForm.payment"
+              :items="['BPJS', 'UMUM/JKMM/SPM/DLL']"
+              label="Pembayaran"
+              variant="outlined"
+              density="compact"
+              required
+            ></v-select>
+          </v-form>
+        </v-card-text>
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn @click="showBookingFormDialog = false" variant="outlined" color="neutral-600">
+            Tutup
+          </v-btn>
+          <v-btn color="success-600" class="text-white" variant="flat" @click="submitBooking">
+            Simpan
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="3000" location="top right">
+      {{ snackbarText }}
+      <template v-slot:actions>
+        <v-btn icon @click="snackbar = false">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+  <div v-else class="not-found">
+    <v-icon size="64" color="grey">mdi-alert-circle-outline</v-icon>
+    <p>Anjungan tidak ditemukan</p>
+    <v-btn color="primary" variant="flat" @click="backToList">Kembali</v-btn>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRoute } from '#app';
+import { useAnjunganStore } from '@/stores/anjunganStore';
+import { useMasterStore } from '@/stores/masterStore';
+import { useClinicStore } from '@/stores/clinicStore';
+
+definePageMeta({
+  layout: false,
+});
+
+const route = useRoute();
+const anjunganStore = useAnjunganStore();
+const masterStore = useMasterStore();
+const clinicStore = useClinicStore();
+
+const anjunganId = computed(() => {
+  const raw = route.params.id;
+  const val = Array.isArray(raw) ? raw[0] : raw;
+  const parsed = parseInt(val, 10);
+  return isNaN(parsed) ? null : parsed;
+});
+
+const anjunganData = computed(() => {
+  if (!anjunganId.value) return null;
+  return anjunganStore.getAnjunganById(anjunganId.value)?.value || null;
+});
+
+// Filter clinics berdasarkan kode klinik yang dipilih di anjungan
+const filteredClinics = computed(() => {
+  if (!anjunganData.value || !anjunganData.value.klinik || anjunganData.value.klinik.length === 0) {
+    return [];
+  }
+
+  // Ambil semua clinics dari store
+  const allClinics = clinicStore.getAllClinics;
+  
+  // Filter berdasarkan kode klinik yang ada di anjungan
+  return allClinics.filter(clinic => {
+    // Cari kode klinik dari masterStore berdasarkan nama clinic
+    const klinikData = masterStore.klinikList.find(k => k.nama === clinic.name);
+    if (!klinikData) return false;
+    
+    // Cek apakah kode klinik ada di list anjungan
+    return anjunganData.value.klinik.includes(klinikData.kode);
+  });
+});
+
+const showVisitTypeDialog = ref(false);
+const showPaymentTypeDialog = ref(false);
+const showBookingFormDialog = ref(false);
+const selectedClinic = ref(null);
+const snackbar = ref(false);
+const snackbarText = ref("");
+const snackbarColor = ref("success");
+
+const bookingForm = ref({
+  date: new Date().toISOString().substring(0, 10),
+  shift: "Shift 1",
+  payment: null,
+});
+
+// Function to display doctor info on card (max 2 doctors shown)
+const getDisplayDoctorInfo = (clinic) => {
+  if (!clinic.doctors || clinic.doctors.length === 0) {
+    return "Tidak ada dokter";
+  }
+  
+  const maxDisplay = 2;
+  const doctors = clinic.doctors;
+  
+  if (doctors.length <= maxDisplay) {
+    return doctors.join(", ");
+  } else {
+    const displayedDoctors = doctors.slice(0, maxDisplay).join(", ");
+    const remainingCount = doctors.length - maxDisplay;
+    return `${displayedDoctors}, dan ${remainingCount} dokter lainnya`;
+  }
+};
+
+// Check if Shift 1 is full
+const isShift1Full = (clinic) => {
+  if (!clinic || !clinic.shifts || clinic.shifts.length === 0) return true;
+  const shift1 = clinic.shifts.find(s => s.name === "Shift 1");
+  return shift1 ? shift1.quota === 0 : true;
+};
+
+// Get current shift number
+const getCurrentShiftNumber = () => {
+  return 1;
+};
+
+// Get current shift quota
+const getCurrentShiftQuota = () => {
+  if (!selectedClinic.value || !selectedClinic.value.shifts) return 0;
+  const currentShift = selectedClinic.value.shifts.find(s => s.name === "Shift 1");
+  return currentShift ? currentShift.quota : 0;
+};
+
+// Get available shifts for booking form
+const getAvailableShiftsForBooking = () => {
+  if (!selectedClinic.value || !selectedClinic.value.shifts) return [];
+  
+  const selectedDate = bookingForm.value.date;
+  const today = new Date().toISOString().substring(0, 10);
+  const isToday = selectedDate === today;
+  
+  return selectedClinic.value.shifts
+    .filter(shift => {
+      if (isToday) {
+        return shift.name !== "Shift 1" && shift.quota > 0;
+      } else {
+        return shift.quota > 0;
+      }
+    })
+    .map(shift => ({
+      label: `${shift.name} (Kuota: ${shift.quota} pasien)`,
+      value: shift.name
+    }));
+};
+
+// Get minimum date (today)
+const getMinDate = () => {
+  return new Date().toISOString().substring(0, 10);
+};
+
+// Get maximum date (2 weeks from today)
+const getMaxDate = () => {
+  const today = new Date();
+  const maxDate = new Date(today);
+  maxDate.setDate(today.getDate() + 14);
+  return maxDate.toISOString().substring(0, 10);
+};
+
+const showSnackbar = (text, color = "success") => {
+  snackbarText.value = text;
+  snackbarColor.value = color;
+  snackbar.value = true;
+};
+
+const selectClinic = (clinic) => {
+  if (clinic.available) {
+    selectedClinic.value = clinic;
+    showVisitTypeDialog.value = true;
+  }
+};
+
+const selectVisitType = (type) => {
+  showVisitTypeDialog.value = false;
+
+  if (type === "SEKARANG") {
+    showPaymentTypeDialog.value = true;
+  } else if (type === "JADWAL_LAIN") {
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    const tomorrowStr = tomorrow.toISOString().substring(0, 10);
+    
+    bookingForm.value = {
+      date: tomorrowStr,
+      shift: "",
+      payment: null,
+    };
+    showBookingFormDialog.value = true;
+  }
+};
+
+const selectPaymentType = (paymentType) => {
+  showPaymentTypeDialog.value = false;
+  const message = `Pendaftaran **${selectedClinic.value.name}** untuk kunjungan **HARI INI** dengan pembayaran **${paymentType}** berhasil diproses.`;
+  showSnackbar(message, "success");
+  selectedClinic.value = null;
+};
+
+const submitBooking = () => {
+  if (
+    !bookingForm.value.date ||
+    !bookingForm.value.shift ||
+    !bookingForm.value.payment
+  ) {
+    showSnackbar("Mohon lengkapi semua field.", "error");
+    return;
+  }
+
+  showBookingFormDialog.value = false;
+  const message = `Jadwal kunjungan **${selectedClinic.value.name}** pada ${bookingForm.value.date} - ${bookingForm.value.shift} (**${bookingForm.value.payment}**) berhasil disimpan.`;
+  showSnackbar(message, "success");
+  selectedClinic.value = null;
+};
+
+const backToList = () => {
+  navigateTo('/anjungan/anjungan');
+};
+</script>
+
+<style scoped lang="scss">
+.anjungan-container {
+  background: var(--color-neutral-300);
+  min-height: 100vh;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.page-header {
+  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  box-shadow: 0 4px 16px rgba(255, 155, 27, 0.25);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  color: var(--color-neutral-100);
+  gap: 32px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  padding: 12px;
+  backdrop-filter: blur(10px);
+}
+
+.header-text {
+  flex: 1;
+}
+
+.page-title {
+  font-size: 26px;
+  font-weight: 700;
+  margin: 0;
+  color: var(--color-neutral-100);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.95;
+  font-size: 14px;
+  color: var(--color-neutral-100);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.info-guide {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.guide-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.guide-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  font-weight: 700;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.guide-text {
+  color: var(--color-neutral-100);
+  font-weight: 600;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.main-content-card {
+  border-radius: 12px;
+  border: 1px solid var(--color-neutral-500);
+  background: var(--color-neutral-100);
+  max-height: calc(100vh - 180px);
+  overflow-y: auto;
+}
+
+.main-content-card .v-card-text {
+  padding: 16px !important;
+}
+
+/* CLINIC CARD - Improved Hierarchy */
+.clinic-card {
+  cursor: pointer;
+  border-radius: 12px !important;
+  height: 180px;
+  background: var(--color-neutral-100);
+  border: 3px solid var(--color-neutral-500);
+  position: relative;
+  overflow: hidden;
+}
+
+.clinic-available {
+  border-color: var(--color-success-600);
+  background: var(--color-success-200);
+}
+
+.clinic-closed {
+  opacity: 0.65;
+  cursor: not-allowed;
+  border-color: var(--color-danger-600);
+  background: var(--color-danger-200);
+}
+
+.clinic-content {
+  padding: 18px !important;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  position: relative;
+  gap: 8px;
+}
+
+.clinic-name {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 0;
+  line-height: 1.2;
+  padding-right: 10px;
+}
+
+.clinic-closed .clinic-name {
+  color: var(--color-neutral-700);
+}
+
+.doctor-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--color-primary-700);
+  font-weight: 600;
+  line-height: 1.4;
+  padding-right: 70px;
+  flex: 1;
+}
+
+.clinic-closed .doctor-info {
+  color: var(--color-neutral-600);
+}
+
+.schedule-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--color-neutral-700);
+  font-weight: 500;
+  position: absolute;
+  bottom: 18px;
+  left: 18px;
+}
+
+.clinic-closed .schedule-info {
+  color: var(--color-neutral-600);
+}
+
+.clinic-icon-wrapper {
+  position: absolute;
+  bottom: 14px;
+  right: 14px;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  border: 2px solid var(--color-neutral-400);
+}
+
+.clinic-closed .clinic-icon-wrapper {
+  opacity: 0.5;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 48px 24px;
+}
+
+.empty-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  margin: 16px 0 8px 0;
+}
+
+.empty-subtitle {
+  font-size: 14px;
+  color: var(--color-neutral-600);
+  margin: 0;
+}
+
+.not-found {
+  min-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--color-neutral-700);
+}
+
+/* Dialog Styles */
+.dialog-card {
+  border-radius: 16px !important;
+}
+
+.dialog-header {
+  background: var(--color-primary-600);
+  color: var(--color-neutral-100);
+  padding: 20px 24px;
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.dialog-header-simple {
+  padding: 20px 24px;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+
+.dialog-content {
+  text-align: center;
+}
+
+.dialog-icon {
+  display: flex;
+  justify-content: center;
+}
+
+.dialog-clinic-name {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 8px 0;
+}
+
+.dialog-subtitle {
+  font-size: 14px;
+  color: var(--color-neutral-700);
+  margin: 0;
+}
+
+.dialog-info {
+  text-align: left;
+  font-size: 14px;
+  
+  p {
+    margin: 8px 0;
+    color: var(--color-neutral-800);
+  }
+  
+  strong {
+    color: var(--color-neutral-900);
+  }
+}
+
+.doctor-list-section {
+  margin-bottom: 12px;
+  
+  p {
+    margin-bottom: 8px;
+  }
+}
+
+.doctor-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  
+  li {
+    padding: 6px 12px;
+    margin: 4px 0;
+    background: var(--color-primary-100);
+    border-radius: 6px;
+    color: var(--color-neutral-800);
+    font-size: 13px;
+  }
+}
+
+.quota-section {
+  margin-bottom: 16px;
+  
+  p {
+    margin-bottom: 12px;
+    font-size: 15px;
+  }
+}
+
+.current-quota-display {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  background: linear-gradient(135deg, var(--color-success-100) 0%, var(--color-success-200) 100%);
+  border-radius: 12px;
+  border: 2px solid var(--color-success-400);
+  margin-bottom: 12px;
+  
+  &.quota-empty {
+    background: linear-gradient(135deg, var(--color-neutral-200) 0%, var(--color-neutral-300) 100%);
+    border-color: var(--color-neutral-500);
+    
+    .quota-large-number {
+      color: var(--color-neutral-600);
+    }
+    
+    .quota-label {
+      color: var(--color-neutral-700);
+    }
+  }
+}
+
+.quota-large-number {
+  font-size: 48px;
+  font-weight: 700;
+  color: var(--color-success-700);
+  line-height: 1;
+  margin-bottom: 4px;
+}
+
+.quota-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-success-800);
+}
+
+.disabled-hint {
+  font-size: 11px;
+  color: var(--color-danger-600);
+  text-align: center;
+  margin: 4px 0 0 0;
+  font-weight: 600;
+}
+
+.btn-disabled {
+  opacity: 0.5 !important;
+  background-color: var(--color-neutral-500) !important;
+}
+
+.payment-btn {
+  font-weight: 700;
+  height: 64px;
+  font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+@media (max-width: 1024px) {
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+    padding: 18px 20px;
+  }
+
+  .header-left {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .header-right {
+    width: 100%;
+  }
+  
+  .info-guide {
+    width: 100%;
+  }
+  
+  .guide-item {
+    font-size: 12px;
+    justify-content: center;
+  }
+  
+  .guide-number {
+    width: 22px;
+    height: 22px;
+    font-size: 12px;
+  }
+
+  .page-title {
+    font-size: 24px;
+  }
+  
+  .clinic-card {
+    height: 170px;
+  }
+  
+  .clinic-name {
+    font-size: 20px;
+  }
+}
+
+@media (max-width: 768px) {
+  .anjungan-container {
+    padding: 12px;
+  }
+
+  .header-content {
+    padding: 16px;
+  }
+
+  .page-title {
+    font-size: 22px;
+  }
+
+  .header-icon {
+    padding: 10px;
+  }
+
+  .clinic-card {
+    height: 165px;
+  }
+
+  .clinic-name {
+    font-size: 19px;
+  }
+
+  .clinic-icon-wrapper {
+    width: 50px;
+    height: 50px;
+  }
+
+  .clinic-icon-wrapper .v-icon {
+    font-size: 32px !important;
+  }
+  
+  .doctor-info, .schedule-info {
+    font-size: 11px;
+  }
+  
+  .doctor-info {
+    padding-right: 60px;
+  }
+}
+</style>
diff --git a/pages/Anjungan/Anjungan/index.vue b/pages/Anjungan/Anjungan/index.vue
new file mode 100644
index 0000000..cd5b9a7
--- /dev/null
+++ b/pages/Anjungan/Anjungan/index.vue
@@ -0,0 +1,352 @@
+<!-- pages/Anjungan/Anjungan/index.vue -->
+<template>
+  <div class="anjungan-selection-container">
+    <div class="selection-header">
+      <div class="header-icon">
+        <v-icon size="64" color="white">mdi-monitor-dashboard</v-icon>
+      </div>
+      <div class="header-content">
+        <h1 class="main-title">Pilih Anjungan</h1>
+        <p class="subtitle">RSUD dr. Saiful Anwar Provinsi Jawa Timur</p>
+      </div>
+    </div>
+
+    <div class="anjungan-grid">
+      <div
+        v-for="anj in paginatedAnjungan"
+        :key="anj.id"
+        class="anjungan-card"
+        @click="navigateToAnjungan(anj.id)"
+      >
+        <div class="anjungan-card-header">
+          <v-icon size="32" color="primary">mdi-monitor</v-icon>
+          <div class="anjungan-info">
+            <h3 class="anjungan-name">{{ anj.namaAnjungan }}</h3>
+            <p class="anjungan-type">{{ anj.jenisPasien }}</p>
+          </div>
+        </div>
+
+        <div class="anjungan-klinik-preview">
+          <div class="klinik-count">
+            <v-icon size="18" color="secondary">mdi-hospital-box</v-icon>
+            <span>{{ anj.klinik.length }} Klinik</span>
+          </div>
+          <div class="klinik-tags">
+            <v-chip
+              v-for="(kode, idx) in anj.klinik.slice(0, 4)"
+              :key="idx"
+              size="small"
+              class="ma-1 chip-preview"
+            >
+              {{ masterStore.getKlinikNameByKode(kode) }}
+            </v-chip>
+            <v-chip
+              v-if="anj.klinik.length > 4"
+              size="small"
+              class="ma-1 chip-more"
+            >
+              +{{ anj.klinik.length - 4 }}
+            </v-chip>
+          </div>
+        </div>
+
+        <div class="anjungan-card-footer">
+          <v-btn
+            color="primary"
+            variant="flat"
+            size="large"
+            block
+            class="btn-view"
+          >
+            <v-icon left>mdi-eye</v-icon>
+            Tampilkan
+          </v-btn>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="anjunganList.length === 0" class="empty-state">
+      <v-icon size="64" color="grey-lighten-1">mdi-monitor-off</v-icon>
+      <h3>Tidak Ada Anjungan Tersedia</h3>
+      <p>Silakan tambah anjungan terlebih dahulu di halaman master</p>
+      <v-btn
+        color="primary"
+        variant="flat"
+        @click="navigateToSettings"
+        class="mt-4"
+      >
+        <v-icon left>mdi-cog</v-icon>
+        Ke Halaman Master Anjungan
+      </v-btn>
+    </div>
+
+    <div v-else-if="totalPages > 1" class="pagination">
+      <v-btn variant="outlined" @click="goPrev" :disabled="page <= 1">Prev</v-btn>
+      <span class="page-info">Page {{ page }} / {{ totalPages }}</span>
+      <v-btn variant="outlined" @click="goNext" :disabled="page >= totalPages">Next</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useAnjunganStore } from '@/stores/anjunganStore';
+import { useMasterStore } from '@/stores/masterStore';
+import { useRoute } from '#app';
+
+definePageMeta({
+  layout: false,
+});
+
+const anjunganStore = useAnjunganStore();
+const masterStore = useMasterStore();
+const route = useRoute();
+
+// Safeguard supaya tidak undefined saat store belum terisi
+const anjunganList = computed(() => {
+  const fromGetter = anjunganStore.getAllAnjungan?.value;
+  const fromState = anjunganStore.anjunganItems?.value || anjunganStore.anjunganItems || [];
+  return Array.isArray(fromGetter) ? fromGetter : Array.isArray(fromState) ? fromState : [];
+});
+
+// Pagination
+const itemsPerPage = 10;
+const page = computed({
+  get: () => Number(route.query.page || 1),
+  set: (val) => navigateTo({ query: { ...route.query, page: val } }),
+});
+
+const totalPages = computed(() => Math.max(1, Math.ceil(anjunganList.value.length / itemsPerPage)));
+
+const paginatedAnjungan = computed(() => {
+  const start = (page.value - 1) * itemsPerPage;
+  return anjunganList.value.slice(start, start + itemsPerPage);
+});
+
+const goPrev = () => {
+  if (page.value > 1) page.value = page.value - 1;
+};
+
+const goNext = () => {
+  if (page.value < totalPages.value) page.value = page.value + 1;
+};
+
+const navigateToAnjungan = (anjunganId) => {
+  const id = typeof anjunganId === 'number' ? anjunganId : parseInt(anjunganId, 10);
+  if (isNaN(id)) {
+    console.error('Invalid anjungan ID:', anjunganId);
+    return;
+  }
+  navigateTo(`/anjungan/anjungan/${id}`);
+};
+
+const navigateToSettings = () => {
+  navigateTo('/setting/masteranjungan');
+};
+</script>
+
+<style scoped lang="scss">
+.anjungan-selection-container {
+  background: var(--color-neutral-300);
+  min-height: 100vh;
+  padding: 40px;
+  font-family: 'Inter', 'Roboto', sans-serif;
+}
+
+.selection-header {
+  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
+  border-radius: 20px;
+  padding: 40px;
+  margin-bottom: 40px;
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  box-shadow: 0 8px 24px rgba(255, 155, 27, 0.3);
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 20px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
+}
+
+.header-content {
+  flex: 1;
+  color: var(--color-neutral-100);
+}
+
+.main-title {
+  font-size: 40px;
+  font-weight: 800;
+  margin: 0;
+  color: var(--color-neutral-100);
+  line-height: 1.2;
+}
+
+.subtitle {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 8px 0 0 0;
+  color: var(--color-neutral-100);
+  opacity: 0.95;
+}
+
+.anjungan-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.anjungan-card {
+  background: var(--color-neutral-100);
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border: 2px solid var(--color-neutral-400);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(6, 113, 224, 0.2);
+    border-color: var(--color-secondary-600);
+  }
+}
+
+.anjungan-card-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid var(--color-neutral-400);
+}
+
+.anjungan-info {
+  flex: 1;
+}
+
+.anjungan-name {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+  color: var(--color-neutral-900);
+  line-height: 1.2;
+}
+
+.anjungan-type {
+  font-size: 14px;
+  color: var(--color-neutral-600);
+  margin: 4px 0 0 0;
+  font-weight: 500;
+}
+
+.anjungan-klinik-preview {
+  flex: 1;
+}
+
+.klinik-count {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-secondary-600);
+  margin-bottom: 12px;
+}
+
+.klinik-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.chip-preview {
+  background-color: var(--color-secondary-300) !important;
+  color: var(--color-secondary-700) !important;
+  font-weight: 500;
+  font-size: 12px;
+}
+
+.chip-more {
+  background-color: var(--color-neutral-600) !important;
+  color: var(--color-neutral-100) !important;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.anjungan-card-footer {
+  margin-top: auto;
+}
+
+.btn-view {
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.5px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 80px 20px;
+  color: var(--color-neutral-700);
+
+  h3 {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 24px 0 8px 0;
+    color: var(--color-neutral-800);
+  }
+
+  p {
+    font-size: 16px;
+    color: var(--color-neutral-600);
+  }
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.page-info {
+  font-weight: 600;
+  color: var(--color-neutral-800);
+}
+
+@media (max-width: 768px) {
+  .anjungan-selection-container {
+    padding: 20px;
+  }
+
+  .selection-header {
+    flex-direction: column;
+    text-align: center;
+    padding: 32px 24px;
+  }
+
+  .main-title {
+    font-size: 32px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+  }
+
+  .anjungan-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+</style>
+
diff --git a/pages/Anjungan/AntrianKlinik.vue b/pages/Anjungan/AntrianKlinik/[id].vue
similarity index 90%
rename from pages/Anjungan/AntrianKlinik.vue
rename to pages/Anjungan/AntrianKlinik/[id].vue
index a8ff586..f8981e9 100644
--- a/pages/Anjungan/AntrianKlinik.vue
+++ b/pages/Anjungan/AntrianKlinik/[id].vue
@@ -1,4 +1,4 @@
-<!-- pages/AntrianKlinik.vue -->
+<!-- pages/Anjungan/AntrianKlinik/[id].vue -->
 <template>
   <div class="tv-display-container">
     <!-- Header -->
@@ -10,6 +10,7 @@
         <div class="header-text">
           <h1 class="display-title">ANTRIAN KLINIK</h1>
           <p class="hospital-name">RSUD dr. Saiful Anwar Provinsi Jawa Timur</p>
+          <p v-if="screenData" class="screen-info">{{ screenData.namaScreen }} - {{ screenData.nomorScreen }}</p>
         </div>
       </div>
       <div class="tv-header-right">
@@ -124,13 +125,31 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from "vue";
-import { useQueueStore } from "../stores/queueStore";
+import { useQueueStore } from "@/stores/queueStore";
+import { useScreenStore } from "@/stores/screenStore";
+import { useMasterStore } from "@/stores/masterStore";
 
 definePageMeta({
   layout: false,
 });
 
+const route = useRoute();
 const queueStore = useQueueStore();
+const screenStore = useScreenStore();
+const masterStore = useMasterStore();
+
+const screenId = computed(() => {
+  const id = route.params.id;
+  // Handle both string and array cases
+  const idValue = Array.isArray(id) ? id[0] : id;
+  const parsed = parseInt(idValue);
+  return isNaN(parsed) ? null : parsed;
+});
+
+const screenData = computed(() => {
+  if (!screenId.value) return null;
+  return screenStore.getScreenById(screenId.value)?.value || null;
+});
 
 const currentTime = ref("");
 const currentDate = ref("");
@@ -141,10 +160,25 @@ const klinikPatients = computed(() => {
   return queueStore.getPatientsByStage("klinik").value.all;
 });
 
-const displayedClinics = computed(() => {
-  const allKliniks = queueStore.kliniks.slice(0, 9);
+// Get kliniks based on screen configuration
+const screenKliniks = computed(() => {
+  if (!screenData.value) return [];
+  
+  return screenData.value.klinik
+    .map(kode => {
+      const klinikData = masterStore.getKlinikByKode(kode);
+      return klinikData ? { kode: klinikData.kode, name: klinikData.nama } : null;
+    })
+    .filter(Boolean)
+    .slice(0, 9); // Max 9 kliniks for 3x3 grid
+});
 
-  return allKliniks.map((klinik) => {
+const displayedClinics = computed(() => {
+  if (!screenData.value || screenKliniks.value.length === 0) {
+    return [];
+  }
+
+  return screenKliniks.value.map((klinik) => {
     const queues = klinikPatients.value
       .filter((p) => p.klinik === klinik.name)
       .sort((a, b) => {
@@ -185,15 +219,24 @@ const displayedClinics = computed(() => {
 });
 
 const currentCalledQueue = computed(() => {
+  if (!screenData.value) return null;
+  
+  const screenKlinikNames = screenKliniks.value.map(k => k.name);
   const calledQueues = klinikPatients.value
-    .filter((p) => p.status === "di-loket")
+    .filter((p) => p.status === "di-loket" && screenKlinikNames.includes(p.klinik))
     .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
 
   return calledQueues[0] || null;
 });
 
 const statistics = computed(() => {
-  const all = klinikPatients.value;
+  if (!screenData.value) {
+    return { total: 0, waiting: 0, active: 0 };
+  }
+  
+  const screenKlinikNames = screenKliniks.value.map(k => k.name);
+  const all = klinikPatients.value.filter(p => screenKlinikNames.includes(p.klinik));
+  
   return {
     total: all.length,
     waiting: all.filter((p) => p.status === "waiting").length,
@@ -217,6 +260,13 @@ const updateTime = () => {
 };
 
 onMounted(() => {
+  // Redirect to index if screen not found
+  if (!screenData.value) {
+    // redirect ke list jika id tidak valid
+    navigateTo('/anjungan/antrianklinik');
+    return;
+  }
+  
   updateTime();
   timeInterval = setInterval(updateTime, 1000);
   refreshInterval = setInterval(() => {}, 5000);
@@ -289,6 +339,14 @@ onUnmounted(() => {
   opacity: 0.95;
 }
 
+.screen-info {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 4px 0 0 0;
+  color: var(--color-neutral-100);
+  opacity: 0.85;
+}
+
 .tv-header-right {
   text-align: right;
 }
@@ -1049,4 +1107,5 @@ onUnmounted(() => {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-</style>
\ No newline at end of file
+</style>
+
diff --git a/pages/Anjungan/AntrianKlinik/index.vue b/pages/Anjungan/AntrianKlinik/index.vue
new file mode 100644
index 0000000..4218aa2
--- /dev/null
+++ b/pages/Anjungan/AntrianKlinik/index.vue
@@ -0,0 +1,356 @@
+<!-- pages/Anjungan/AntrianKlinik/index.vue -->
+<template>
+  <div class="screen-selection-container">
+    <div class="selection-header">
+      <div class="header-icon">
+        <v-icon size="64" color="white">mdi-monitor-multiple</v-icon>
+      </div>
+      <div class="header-content">
+        <h1 class="main-title">Pilih Layar Antrian Klinik</h1>
+        <p class="subtitle">RSUD dr. Saiful Anwar Provinsi Jawa Timur</p>
+      </div>
+    </div>
+
+    <div class="screens-grid">
+      <div
+        v-for="screen in paginatedScreens"
+        :key="screen.id"
+        class="screen-card"
+        @click="navigateToScreen(screen.id)"
+      >
+        <div class="screen-card-header">
+          <v-icon size="32" color="primary">mdi-monitor</v-icon>
+          <div class="screen-info">
+            <h3 class="screen-name">{{ screen.namaScreen }}</h3>
+            <p class="screen-number">{{ screen.nomorScreen }}</p>
+          </div>
+        </div>
+        
+        <div class="screen-klinik-preview">
+          <div class="klinik-count">
+            <v-icon size="18" color="secondary">mdi-hospital-box</v-icon>
+            <span>{{ screen.klinik.length }} Klinik</span>
+          </div>
+          <div class="klinik-tags">
+            <v-chip
+              v-for="(kode, idx) in screen.klinik.slice(0, 4)"
+              :key="idx"
+              size="small"
+              class="ma-1 chip-preview"
+            >
+              {{ masterStore.getKlinikNameByKode(kode) }}
+            </v-chip>
+            <v-chip
+              v-if="screen.klinik.length > 4"
+              size="small"
+              class="ma-1 chip-more"
+            >
+              +{{ screen.klinik.length - 4 }}
+            </v-chip>
+          </div>
+        </div>
+
+        <div class="screen-card-footer">
+          <v-btn
+            color="primary"
+            variant="flat"
+            size="large"
+            block
+            class="btn-view"
+          >
+            <v-icon left>mdi-eye</v-icon>
+            Tampilkan
+          </v-btn>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="screens.length === 0" class="empty-state">
+      <v-icon size="64" color="grey-lighten-1">mdi-monitor-off</v-icon>
+      <h3>Tidak Ada Screen Tersedia</h3>
+      <p>Silakan tambah screen terlebih dahulu di halaman konfigurasi</p>
+      <v-btn
+        color="primary"
+        variant="flat"
+        @click="navigateToSettings"
+        class="mt-4"
+      >
+        <v-icon left>mdi-cog</v-icon>
+        Ke Halaman Konfigurasi
+      </v-btn>
+    </div>
+
+    <div v-else-if="totalPages > 1" class="pagination">
+      <v-btn variant="outlined" @click="goPrev" :disabled="page <= 1">Prev</v-btn>
+      <span class="page-info">Page {{ page }} / {{ totalPages }}</span>
+      <v-btn variant="outlined" @click="goNext" :disabled="page >= totalPages">Next</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useScreenStore } from '@/stores/screenStore';
+import { useMasterStore } from '@/stores/masterStore';
+import { useRoute } from '#app';
+
+definePageMeta({
+  layout: false,
+});
+
+const screenStore = useScreenStore();
+const masterStore = useMasterStore();
+const route = useRoute();
+
+// Safeguard supaya tidak undefined saat store belum terisi
+const screens = computed(() => {
+  const fromGetter = screenStore.getAllScreens?.value;
+  const fromState = screenStore.screenItems?.value || screenStore.screenItems || [];
+  return Array.isArray(fromGetter) ? fromGetter : Array.isArray(fromState) ? fromState : [];
+});
+
+// Pagination
+const itemsPerPage = 10;
+const page = computed({
+  get: () => Number(route.query.page || 1),
+  set: (val) => navigateTo({ query: { ...route.query, page: val } }),
+});
+
+const totalPages = computed(() => Math.max(1, Math.ceil(screens.value.length / itemsPerPage)));
+
+const paginatedScreens = computed(() => {
+  const start = (page.value - 1) * itemsPerPage;
+  return screens.value.slice(start, start + itemsPerPage);
+});
+
+const goPrev = () => {
+  if (page.value > 1) page.value = page.value - 1;
+};
+
+const goNext = () => {
+  if (page.value < totalPages.value) page.value = page.value + 1;
+};
+
+const navigateToScreen = (screenId) => {
+  const id = typeof screenId === 'number' ? screenId : parseInt(screenId, 10);
+  if (isNaN(id)) {
+    console.error('Invalid screen ID:', screenId);
+    return;
+  }
+
+  // gunakan path langsung agar tidak tergantung nama route auto-gen
+  navigateTo(`/anjungan/antrianklinik/${id}`);
+};
+
+const navigateToSettings = () => {
+  navigateTo('/setting/screen');
+};
+</script>
+
+<style scoped lang="scss">
+.screen-selection-container {
+  background: var(--color-neutral-300);
+  min-height: 100vh;
+  padding: 40px;
+  font-family: 'Inter', 'Roboto', sans-serif;
+}
+
+.selection-header {
+  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
+  border-radius: 20px;
+  padding: 40px;
+  margin-bottom: 40px;
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  box-shadow: 0 8px 24px rgba(255, 155, 27, 0.3);
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 20px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
+}
+
+.header-content {
+  flex: 1;
+  color: var(--color-neutral-100);
+}
+
+.main-title {
+  font-size: 48px;
+  font-weight: 800;
+  margin: 0;
+  letter-spacing: 2px;
+  color: var(--color-neutral-100);
+  line-height: 1.2;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.subtitle {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 8px 0 0 0;
+  color: var(--color-neutral-100);
+  opacity: 0.95;
+}
+
+.screens-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.screen-card {
+  background: var(--color-neutral-100);
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border: 2px solid var(--color-neutral-400);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(6, 113, 224, 0.2);
+    border-color: var(--color-secondary-600);
+  }
+}
+
+.screen-card-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid var(--color-neutral-400);
+}
+
+.screen-info {
+  flex: 1;
+}
+
+.screen-name {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+  color: var(--color-neutral-900);
+  line-height: 1.2;
+}
+
+.screen-number {
+  font-size: 14px;
+  color: var(--color-neutral-600);
+  margin: 4px 0 0 0;
+  font-weight: 500;
+}
+
+.screen-klinik-preview {
+  flex: 1;
+}
+
+.klinik-count {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-secondary-600);
+  margin-bottom: 12px;
+}
+
+.klinik-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.chip-preview {
+  background-color: var(--color-secondary-300) !important;
+  color: var(--color-secondary-700) !important;
+  font-weight: 500;
+  font-size: 12px;
+}
+
+.chip-more {
+  background-color: var(--color-neutral-600) !important;
+  color: var(--color-neutral-100) !important;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.screen-card-footer {
+  margin-top: auto;
+}
+
+.btn-view {
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.5px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 80px 20px;
+  color: var(--color-neutral-700);
+
+  h3 {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 24px 0 8px 0;
+    color: var(--color-neutral-800);
+  }
+
+  p {
+    font-size: 16px;
+    color: var(--color-neutral-600);
+  }
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.page-info {
+  font-weight: 600;
+  color: var(--color-neutral-800);
+}
+
+@media (max-width: 768px) {
+  .screen-selection-container {
+    padding: 20px;
+  }
+
+  .selection-header {
+    flex-direction: column;
+    text-align: center;
+    padding: 32px 24px;
+  }
+
+  .main-title {
+    font-size: 32px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+  }
+
+  .screens-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+</style>
+
diff --git a/pages/Anjungan/AntrianKlinikRuang.vue b/pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue
similarity index 77%
rename from pages/Anjungan/AntrianKlinikRuang.vue
rename to pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue
index 938dd12..f74c828 100644
--- a/pages/Anjungan/AntrianKlinikRuang.vue
+++ b/pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue
@@ -1,3 +1,4 @@
+<!-- pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue -->
 <template>
   <div class="antrian-display-container">
     <!-- Header -->
@@ -7,8 +8,9 @@
           <v-icon size="48" color="white">mdi-door-open</v-icon>
         </div>
         <div class="header-text">
-          <h1 class="hospital-name">ANTRIAN KLINIK</h1>
+          <h1 class="hospital-name">ANTRIAN KLINIK RUANG</h1>
           <p class="display-subtitle">RSUD dr. Saiful Anwar Provinsi Jawa Timur</p>
+          <p v-if="klinikData" class="klinik-info">{{ klinikData.namaKlinik }} ({{ klinikData.kodeKlinik }})</p>
         </div>
       </div>
       <div class="header-right">
@@ -82,7 +84,7 @@
     <div class="footer-stats-bar">
       <div class="stat-item">
         <div class="stat-icon stat-icon-total">
-          <v-icon size="32" color="primary-600">mdi-format-list-numbered</v-icon>
+          <v-icon size="32" color="success-600">mdi-format-list-numbered</v-icon>
         </div>
         <div class="stat-info">
           <div class="stat-value">{{ statistics.total }}</div>
@@ -94,7 +96,7 @@
 
       <div class="stat-item">
         <div class="stat-icon stat-icon-waiting">
-          <v-icon size="32" color="primary-600">mdi-clock-alert-outline</v-icon>
+          <v-icon size="32" color="success-600">mdi-clock-alert-outline</v-icon>
         </div>
         <div class="stat-info">
           <div class="stat-value">{{ statistics.waiting }}</div>
@@ -115,7 +117,7 @@
       </div>
 
       <div class="footer-message">
-        <v-icon size="24" color="primary-600" class="mr-2">mdi-information</v-icon>
+        <v-icon size="24" color="success-600" class="mr-2">mdi-information</v-icon>
         <span>Harap perhatikan nomor antrian Anda di layar</span>
       </div>
     </div>
@@ -124,16 +126,56 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useQueueStore } from '../stores/queueStore'
-import { useMasterStore } from '../stores/masterStore'
+import { useQueueStore } from '@/stores/queueStore'
+import { useMasterStore } from '@/stores/masterStore'
+import { useRoute } from '#app'
 
 definePageMeta({
   layout: false,
-});
+})
 
+const route = useRoute()
 const queueStore = useQueueStore()
 const masterStore = useMasterStore()
 
+const kodeKlinik = computed(() => {
+  const kode = route.params.kodeKlinik
+  // Handle both string and array cases
+  return Array.isArray(kode) ? kode[0] : kode
+})
+
+const klinikData = computed(() => {
+  const kode = kodeKlinik.value
+  if (!kode) return null
+
+  const fromGetter = masterStore.getAllRuangList?.value
+  const fromState = masterStore.ruangData?.value || masterStore.ruangData || []
+
+  let allRuang = Array.isArray(fromGetter) ? fromGetter : []
+  if (allRuang.length === 0 && Array.isArray(fromState)) {
+    fromState.forEach((r) => {
+      (r?.ruangList || []).forEach((ru) => {
+        allRuang.push({
+          kodeKlinik: r.kodeKlinik,
+          namaKlinik: r.namaKlinik,
+          nomorRuang: ru.nomorRuang,
+          namaRuang: ru.namaRuang,
+          nomorScreen: ru.nomorScreen,
+        })
+      })
+    })
+  }
+
+  const firstRuang = allRuang.find(r => r.kodeKlinik === kode)
+  if (firstRuang) {
+    return {
+      kodeKlinik: firstRuang.kodeKlinik,
+      namaKlinik: firstRuang.namaKlinik
+    }
+  }
+  return null
+})
+
 const currentTime = ref('')
 const currentDate = ref('')
 let timeInterval = null
@@ -142,14 +184,43 @@ const klinikPatients = computed(() => {
   return queueStore.getPatientsByStage('klinik').value.all
 })
 
-const allRuangList = computed(() => {
-  return masterStore.getAllRuangList || []
+// Get ruang list for this specific klinik
+const ruangListForKlinik = computed(() => {
+  if (!kodeKlinik.value || !klinikData.value) return []
+
+  const fromGetter = masterStore.getAllRuangList?.value
+  const fromState = masterStore.ruangData?.value || masterStore.ruangData || []
+  let allRuang = Array.isArray(fromGetter) ? fromGetter : []
+  if (allRuang.length === 0 && Array.isArray(fromState)) {
+    fromState.forEach((r) => {
+      (r?.ruangList || []).forEach((ru) => {
+        allRuang.push({
+          kodeKlinik: r.kodeKlinik,
+          namaKlinik: r.namaKlinik,
+          nomorRuang: ru.nomorRuang,
+          namaRuang: ru.namaRuang,
+          nomorScreen: ru.nomorScreen,
+        })
+      })
+    })
+  }
+  return allRuang
+    .filter(r => r.kodeKlinik === kodeKlinik.value)
+    .map(ruang => ({
+      kodeKlinik: ruang.kodeKlinik,
+      namaKlinik: ruang.namaKlinik,
+      nomorRuang: ruang.nomorRuang,
+      namaRuang: ruang.namaRuang,
+      nomorScreen: ruang.nomorScreen
+    }))
 })
 
 const displayedRuang = computed(() => {
-  const ruangToDisplay = (allRuangList.value || []).slice(0, 9)
+  if (!kodeKlinik.value || ruangListForKlinik.value.length === 0) {
+    return []
+  }
 
-  return ruangToDisplay.map(ruang => {
+  return ruangListForKlinik.value.map(ruang => {
     const queues = klinikPatients.value
       .filter(p => p.klinik === ruang.namaKlinik)
       .sort((a, b) => {
@@ -190,16 +261,18 @@ const displayedRuang = computed(() => {
 })
 
 const currentCalledQueue = computed(() => {
+  if (!kodeKlinik.value || !klinikData.value) return null
+  
   const calledQueues = klinikPatients.value
-    .filter(p => p.status === 'di-loket')
+    .filter(p => p.status === 'di-loket' && p.klinik === klinikData.value.namaKlinik)
     .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
   
   if (calledQueues.length > 0) {
     const patient = calledQueues[0]
-    const ruang = (allRuangList.value || []).find(r => r.namaKlinik === patient.klinik)
+    const ruang = ruangListForKlinik.value.find(r => r.namaKlinik === patient.klinik)
     return {
       ...patient,
-      ruang: ruang ? ruang.namaRuang : 'Ruang 1'
+      ruang: ruang ? ruang.namaRuang : ruangListForKlinik.value[0]?.namaRuang || 'Ruang 1'
     }
   }
   
@@ -207,7 +280,11 @@ const currentCalledQueue = computed(() => {
 })
 
 const statistics = computed(() => {
-  const all = klinikPatients.value
+  if (!kodeKlinik.value || !klinikData.value) {
+    return { total: 0, waiting: 0, active: 0 }
+  }
+  
+  const all = klinikPatients.value.filter(p => p.klinik === klinikData.value.namaKlinik)
   return {
     total: all.length,
     waiting: all.filter(p => p.status === 'waiting').length,
@@ -231,6 +308,12 @@ const updateTime = () => {
 }
 
 onMounted(() => {
+  // Redirect to index if klinik not found
+  if (!klinikData.value) {
+    navigateTo('/anjungan/antrianklinikruang')
+    return
+  }
+  
   updateTime()
   timeInterval = setInterval(updateTime, 1000)
 })
@@ -261,11 +344,11 @@ onUnmounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
+  background: linear-gradient(135deg, var(--color-success-600) 0%, var(--color-success-700) 100%);
   border-radius: 16px;
   padding: 24px 40px;
   margin-bottom: 20px;
-  box-shadow: 0 8px 24px rgba(255, 155, 27, 0.3);
+  box-shadow: 0 8px 24px rgba(0, 146, 98, 0.3);
 }
 
 .header-left {
@@ -303,6 +386,14 @@ onUnmounted(() => {
   opacity: 0.95;
 }
 
+.klinik-info {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--color-neutral-100);
+  margin: 4px 0 0 0;
+  opacity: 0.85;
+}
+
 .datetime-display {
   text-align: right;
 }
@@ -374,17 +465,17 @@ onUnmounted(() => {
 
 .clinic-box {
   background: var(--color-neutral-100);
-  border: 2px solid var(--color-primary-200);
+  border: 2px solid var(--color-success-200);
   border-radius: 16px;
   overflow: hidden;
-  box-shadow: 0 4px 12px rgba(255, 155, 27, 0.12);
+  box-shadow: 0 4px 12px rgba(0, 146, 98, 0.12);
   min-height: 240px;
   display: flex;
   flex-direction: column;
 }
 
 .clinic-header-bar {
-  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
+  background: linear-gradient(135deg, var(--color-success-600) 0%, var(--color-success-700) 100%);
   padding: 16px 20px;
   display: flex;
   justify-content: space-between;
@@ -422,7 +513,7 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: center;
   padding: 20px;
-  background: var(--color-primary-100);
+  background: var(--color-success-100);
 }
 
 .current-section {
@@ -470,13 +561,13 @@ onUnmounted(() => {
 }
 
 .next-item {
-  background: var(--color-secondary-600);
+  background: var(--color-success-600);
   color: var(--color-neutral-100);
   padding: 8px 16px;
   border-radius: 12px;
   font-size: 22px;
   font-weight: 700;
-  box-shadow: 0 2px 8px rgba(6, 99, 199, 0.25);
+  box-shadow: 0 2px 8px rgba(0, 146, 98, 0.25);
   letter-spacing: 1px;
   min-width: 60px;
   text-align: center;
@@ -497,13 +588,13 @@ onUnmounted(() => {
 /* ========== FOOTER STATS ========== */
 .footer-stats-bar {
   background: var(--color-neutral-100);
-  border: 2px solid var(--color-primary-200);
+  border: 2px solid var(--color-success-200);
   border-radius: 16px;
   padding: 20px 40px;
   display: flex;
   align-items: center;
   gap: 32px;
-  box-shadow: 0 4px 12px rgba(255, 155, 27, 0.12);
+  box-shadow: 0 4px 12px rgba(0, 146, 98, 0.12);
 }
 
 .stat-item {
@@ -523,7 +614,7 @@ onUnmounted(() => {
 
 .stat-icon-total,
 .stat-icon-waiting {
-  background: var(--color-primary-200);
+  background: var(--color-success-200);
 }
 
 .stat-icon-active {
@@ -553,7 +644,7 @@ onUnmounted(() => {
 .stat-divider {
   width: 2px;
   height: 60px;
-  background: var(--color-primary-200);
+  background: var(--color-success-200);
 }
 
 .footer-message {
@@ -749,4 +840,5 @@ onUnmounted(() => {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-</style>
\ No newline at end of file
+</style>
+
diff --git a/pages/Anjungan/AntrianKlinikRuang/index.vue b/pages/Anjungan/AntrianKlinikRuang/index.vue
new file mode 100644
index 0000000..dc87f14
--- /dev/null
+++ b/pages/Anjungan/AntrianKlinikRuang/index.vue
@@ -0,0 +1,381 @@
+<!-- pages/Anjungan/AntrianKlinikRuang/index.vue -->
+<template>
+  <div class="klinik-selection-container">
+    <div class="selection-header">
+      <div class="header-icon">
+        <v-icon size="64" color="white">mdi-door-open</v-icon>
+      </div>
+      <div class="header-content">
+        <h1 class="main-title">Pilih Klinik Ruang</h1>
+        <p class="subtitle">RSUD dr. Saiful Anwar Provinsi Jawa Timur</p>
+      </div>
+    </div>
+
+    <div class="kliniks-grid" v-if="paginatedKliniks.length > 0">
+      <div
+        v-for="klinik in paginatedKliniks"
+        :key="klinik.kodeKlinik"
+        class="klinik-card"
+        @click="navigateToKlinik(klinik.kodeKlinik)"
+      >
+        <div class="klinik-card-header">
+          <v-icon size="32" color="success">mdi-hospital-building</v-icon>
+          <div class="klinik-info">
+            <h3 class="klinik-name">{{ klinik.namaKlinik }}</h3>
+            <p class="klinik-code">{{ klinik.kodeKlinik }}</p>
+          </div>
+        </div>
+        
+        <div class="klinik-ruang-preview">
+          <div class="ruang-count">
+            <v-icon size="18" color="success">mdi-door</v-icon>
+            <span>{{ klinik.ruangList.length }} Ruang</span>
+          </div>
+          <div class="ruang-tags">
+            <v-chip
+              v-for="(ruang, idx) in klinik.ruangList.slice(0, 3)"
+              :key="idx"
+              size="small"
+              class="ma-1 chip-preview"
+            >
+              {{ ruang.namaRuang }}
+            </v-chip>
+            <v-chip
+              v-if="klinik.ruangList.length > 3"
+              size="small"
+              class="ma-1 chip-more"
+            >
+              +{{ klinik.ruangList.length - 3 }}
+            </v-chip>
+          </div>
+        </div>
+
+        <div class="klinik-card-footer">
+          <v-btn
+            color="success"
+            variant="flat"
+            size="large"
+            block
+            class="btn-view"
+          >
+            <v-icon left>mdi-eye</v-icon>
+            Tampilkan
+          </v-btn>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="empty-state">
+      <v-icon size="64" color="grey-lighten-1">mdi-hospital-building-off</v-icon>
+      <h3>Tidak Ada Klinik dengan Ruang Tersedia</h3>
+      <p>Silakan tambah ruang klinik terlebih dahulu di halaman master</p>
+      <v-btn
+        color="success"
+        variant="flat"
+        @click="navigateToSettings"
+        class="mt-4"
+      >
+        <v-icon left>mdi-cog</v-icon>
+        Ke Halaman Master
+      </v-btn>
+    </div>
+
+    <div v-if="paginatedKliniks.length > 0 && totalPages > 1" class="pagination">
+      <v-btn variant="outlined" @click="goPrev" :disabled="page <= 1">Prev</v-btn>
+      <span class="page-info">Page {{ page }} / {{ totalPages }}</span>
+      <v-btn variant="outlined" @click="goNext" :disabled="page >= totalPages">Next</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useMasterStore } from '@/stores/masterStore';
+import { useRoute } from '#app';
+
+definePageMeta({
+  layout: false,
+});
+
+const masterStore = useMasterStore();
+const route = useRoute();
+
+// Group klinik berdasarkan data flatten getAllRuangList agar nama ruang baru langsung muncul
+const kliniksWithRuang = computed(() => {
+  const fromGetter = masterStore.getAllRuangList?.value;
+  const fromState = masterStore.ruangData?.value || masterStore.ruangData || [];
+
+  let allRuang = Array.isArray(fromGetter) ? fromGetter : [];
+
+  // Jika getter kosong, flatten dari ruangData (grouped)
+  if (allRuang.length === 0 && Array.isArray(fromState)) {
+    fromState.forEach((r) => {
+      (r?.ruangList || []).forEach((ru) => {
+        allRuang.push({
+          kodeKlinik: r.kodeKlinik,
+          namaKlinik: r.namaKlinik,
+          nomorRuang: ru.nomorRuang,
+          namaRuang: ru.namaRuang,
+          nomorScreen: ru.nomorScreen,
+        });
+      });
+    });
+  }
+
+  const klinikMap = {};
+  allRuang.forEach((ruang) => {
+    if (!klinikMap[ruang.kodeKlinik]) {
+      klinikMap[ruang.kodeKlinik] = {
+        kodeKlinik: ruang.kodeKlinik,
+        namaKlinik: ruang.namaKlinik,
+        ruangList: [],
+      };
+    }
+    klinikMap[ruang.kodeKlinik].ruangList.push({
+      namaRuang: ruang.namaRuang,
+      nomorRuang: ruang.nomorRuang,
+      nomorScreen: ruang.nomorScreen,
+    });
+  });
+
+  return Object.values(klinikMap);
+});
+
+// Pagination
+const itemsPerPage = 10;
+const page = computed({
+  get: () => Number(route.query.page || 1),
+  set: (val) => navigateTo({ query: { ...route.query, page: val } }),
+});
+
+const totalPages = computed(() => Math.max(1, Math.ceil(kliniksWithRuang.value.length / itemsPerPage)));
+
+const paginatedKliniks = computed(() => {
+  const start = (page.value - 1) * itemsPerPage;
+  return kliniksWithRuang.value.slice(start, start + itemsPerPage);
+});
+
+const goPrev = () => {
+  if (page.value > 1) page.value = page.value - 1;
+};
+
+const goNext = () => {
+  if (page.value < totalPages.value) page.value = page.value + 1;
+};
+
+const navigateToKlinik = (kodeKlinik) => {
+  navigateTo(`/anjungan/antrianklinikruang/${kodeKlinik}`);
+};
+
+const navigateToSettings = () => {
+  navigateTo('/setting/masterklinikruang');
+};
+</script>
+
+<style scoped lang="scss">
+.klinik-selection-container {
+  background: var(--color-neutral-300);
+  min-height: 100vh;
+  padding: 40px;
+  font-family: 'Inter', 'Roboto', sans-serif;
+}
+
+.selection-header {
+  background: linear-gradient(135deg, var(--color-success-600) 0%, var(--color-success-700) 100%);
+  border-radius: 20px;
+  padding: 40px;
+  margin-bottom: 40px;
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  box-shadow: 0 8px 24px rgba(0, 146, 98, 0.3);
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 20px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
+}
+
+.header-content {
+  flex: 1;
+  color: var(--color-neutral-100);
+}
+
+.main-title {
+  font-size: 48px;
+  font-weight: 800;
+  margin: 0;
+  letter-spacing: 2px;
+  color: var(--color-neutral-100);
+  line-height: 1.2;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.subtitle {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 8px 0 0 0;
+  color: var(--color-neutral-100);
+  opacity: 0.95;
+}
+
+.kliniks-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.klinik-card {
+  background: var(--color-neutral-100);
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border: 2px solid var(--color-neutral-400);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 146, 98, 0.2);
+    border-color: var(--color-success-600);
+  }
+}
+
+.klinik-card-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid var(--color-neutral-400);
+}
+
+.klinik-info {
+  flex: 1;
+}
+
+.klinik-name {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+  color: var(--color-neutral-900);
+  line-height: 1.2;
+}
+
+.klinik-code {
+  font-size: 14px;
+  color: var(--color-neutral-600);
+  margin: 4px 0 0 0;
+  font-weight: 500;
+}
+
+.klinik-ruang-preview {
+  flex: 1;
+}
+
+.ruang-count {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-success-600);
+  margin-bottom: 12px;
+}
+
+.ruang-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.chip-preview {
+  background-color: var(--color-success-300) !important;
+  color: var(--color-success-700) !important;
+  font-weight: 500;
+  font-size: 12px;
+}
+
+.chip-more {
+  background-color: var(--color-neutral-600) !important;
+  color: var(--color-neutral-100) !important;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.klinik-card-footer {
+  margin-top: auto;
+}
+
+.btn-view {
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.5px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 80px 20px;
+  color: var(--color-neutral-700);
+
+  h3 {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 24px 0 8px 0;
+    color: var(--color-neutral-800);
+  }
+
+  p {
+    font-size: 16px;
+    color: var(--color-neutral-600);
+  }
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.page-info {
+  font-weight: 600;
+  color: var(--color-neutral-800);
+}
+
+@media (max-width: 768px) {
+  .klinik-selection-container {
+    padding: 20px;
+  }
+
+  .selection-header {
+    flex-direction: column;
+    text-align: center;
+    padding: 32px 24px;
+  }
+
+  .main-title {
+    font-size: 32px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+  }
+
+  .kliniks-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+</style>
+
diff --git a/pages/Anjungan/klinik b/pages/Anjungan/klinik
deleted file mode 100644
index 7d8ba5a..0000000
--- a/pages/Anjungan/klinik
+++ /dev/null
@@ -1,543 +0,0 @@
-<!-- pages/AntrianKlinik.vue -->
-<template>
-  <div class="tv-display-container">
-    <!-- Header -->
-    <div class="tv-header">
-      <div class="tv-header-left">
-        <div class="hospital-logo">
-          <v-icon size="64" color="white">mdi-hospital-box</v-icon>
-        </div>
-        <div class="header-text">
-          <h1 class="hospital-name">ANTRIAN KLINIK</h1>
-          <p class="display-title">RSUD Dr. Saiful Anwar Provinsi Jawa Timur</p>
-        </div>
-      </div>
-      <div class="tv-header-right">
-        <div class="current-time">{{ currentTime }}</div>
-        <div class="current-date">{{ currentDate }}</div>
-      </div>
-    </div>
-
-    <!-- Current Called Queue - Super Prominent -->
-    <div v-if="currentCalledQueue" class="hero-queue">
-      <div class="hero-label">SEDANG DIPANGGIL</div>
-      <div class="hero-number">{{ currentCalledQueue.noAntrian.split(' |')[0] }}</div>
-      <div class="hero-clinic">{{ currentCalledQueue.klinik }}</div>
-    </div>
-
-    <!-- Clinic Grid - 3x3 Layout -->
-    <div class="clinic-grid">
-      <div
-        v-for="clinic in displayedClinics"
-        :key="clinic.name"
-        class="clinic-card"
-      >
-        <div class="clinic-name">{{ clinic.name }}</div>
-        
-        <div class="queue-display">
-          <!-- Show current queue number -->
-          <div v-if="clinic.currentQueue" class="current-queue-large">
-            <div class="queue-label">SEKARANG</div>
-            <div class="queue-number-huge">
-              {{ clinic.currentQueue.noAntrian.split(' |')[0] }}
-            </div>
-          </div>
-          
-          <!-- Show next queues -->
-          <div v-if="clinic.nextQueues.length > 0" class="next-queues">
-            <div class="queue-label-small">SELANJUTNYA</div>
-            <div class="next-queue-numbers">
-              <span
-                v-for="(queue, index) in clinic.nextQueues.slice(0, 3)"
-                :key="queue.no"
-                class="next-number"
-              >
-                {{ queue.noAntrian.split(' |')[0] }}
-              </span>
-            </div>
-          </div>
-
-          <!-- Empty state -->
-          <div v-if="!clinic.currentQueue && clinic.nextQueues.length === 0" class="empty-queue">
-            <v-icon size="48" color="grey-lighten-2">mdi-checkbox-blank-circle-outline</v-icon>
-            <div class="empty-text">Tidak Ada Antrian</div>
-          </div>
-        </div>
-
-        <!-- Queue count badge -->
-        <div class="queue-count">
-          <v-icon size="20" class="mr-1">mdi-account-multiple</v-icon>
-          {{ clinic.totalQueues }}
-        </div>
-      </div>
-    </div>
-
-    <!-- Footer Info -->
-    <div class="tv-footer">
-      <div class="footer-stats">
-        <div class="stat-box">
-          <div class="stat-value">{{ statistics.total }}</div>
-          <div class="stat-label">Total Antrian</div>
-        </div>
-        <div class="stat-box">
-          <div class="stat-value">{{ statistics.waiting }}</div>
-          <div class="stat-label">Menunggu</div>
-        </div>
-        <div class="stat-box">
-          <div class="stat-value">{{ statistics.active }}</div>
-          <div class="stat-label">Sedang Dilayani</div>
-        </div>
-      </div>
-      <div class="footer-message">
-        <v-icon size="24" class="mr-2">mdi-information</v-icon>
-        Harap perhatikan nomor antrian Anda di layar
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useQueueStore } from '../stores/queueStore'
-
-definePageMeta({
-  layout: false,
-});
-
-// Store
-const queueStore = useQueueStore()
-
-// Reactive data
-const currentTime = ref('')
-const currentDate = ref('')
-let timeInterval = null
-let refreshInterval = null
-
-// Computed - Get all klinik patients (stage: klinik)
-const klinikPatients = computed(() => {
-  return queueStore.getPatientsByStage('klinik').value.all
-})
-
-// Get clinics with their queues organized
-const displayedClinics = computed(() => {
-  const allKliniks = queueStore.kliniks.slice(0, 9) // Max 9 clinics for 3x3 grid
-
-  return allKliniks.map(klinik => {
-    const queues = klinikPatients.value
-      .filter(p => p.klinik === klinik.name)
-      .sort((a, b) => {
-        // Sort by status priority then time
-        const statusPriority = {
-          'di-loket': 1,
-          'waiting': 2,
-          'terlambat': 3,
-          'pending': 4
-        }
-        
-        const priorityDiff = (statusPriority[a.status] || 99) - (statusPriority[b.status] || 99)
-        if (priorityDiff !== 0) return priorityDiff
-        
-        // Sort by time if same status
-        const timeA = a.jamPanggil.split(':').map(Number)
-        const timeB = b.jamPanggil.split(':').map(Number)
-        return timeA[0] * 60 + timeA[1] - (timeB[0] * 60 + timeB[1])
-      })
-
-    // Get current (first di-loket or first waiting)
-    const currentQueue = queues.find(q => q.status === 'di-loket') || 
-                        (queues.find(q => q.status === 'waiting') || null)
-    
-    // Get next queues (excluding current)
-    const nextQueues = queues.filter(q => 
-      q.no !== currentQueue?.no && 
-      (q.status === 'waiting' || q.status === 'di-loket')
-    )
-
-    return {
-      name: klinik.name,
-      currentQueue: currentQueue,
-      nextQueues: nextQueues,
-      totalQueues: queues.length
-    }
-  })
-})
-
-// Current queue being called (most recent di-loket)
-const currentCalledQueue = computed(() => {
-  const calledQueues = klinikPatients.value
-    .filter(p => p.status === 'di-loket')
-    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
-  
-  return calledQueues[0] || null
-})
-
-// Statistics
-const statistics = computed(() => {
-  const all = klinikPatients.value
-  return {
-    total: all.length,
-    waiting: all.filter(p => p.status === 'waiting').length,
-    active: all.filter(p => p.status === 'di-loket').length
-  }
-})
-
-// Methods
-const updateTime = () => {
-  const now = new Date()
-  currentTime.value = now.toLocaleTimeString('id-ID', { 
-    hour: '2-digit', 
-    minute: '2-digit',
-    second: '2-digit'
-  })
-  currentDate.value = now.toLocaleDateString('id-ID', {
-    weekday: 'long',
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric'
-  })
-}
-
-// Lifecycle
-onMounted(() => {
-  updateTime()
-  timeInterval = setInterval(updateTime, 1000)
-  
-  // Auto refresh every 5 seconds
-  refreshInterval = setInterval(() => {
-    // Data will auto-update due to reactive store
-  }, 5000)
-})
-
-onUnmounted(() => {
-  if (timeInterval) clearInterval(timeInterval)
-  if (refreshInterval) clearInterval(refreshInterval)
-})
-</script>
-
-<style scoped>
-.tv-display-container {
-  background: linear-gradient(135deg, #e7e7e7 0%, #FFDCAF 100%);
-  min-height: 100vh;
-  padding: 20px;
-  font-family: 'Roboto', sans-serif;
-  color: #fff;
-  overflow: hidden;
-}
-
-/* Header */
-.tv-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: #FAFAFA;
-  backdrop-filter: blur(10px);
-  border-radius: 20px;
-  padding: 20px 40px;
-  margin-bottom: 20px;
-  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.tv-header-left {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.hospital-logo {
-  background: #1e3c72;
-  border-radius: 50%;
-  padding: 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.hospital-name {
-  font-size: 36px;
-  margin: 0;
-  letter-spacing: 2px;
-  color: #1e3c72;
-  line-height: 1;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.display-title {
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0;
-  color: #1e3c72;
-  opacity: 0.9;
-}
-
-.tv-header-right {
-  text-align: right;
-}
-
-.current-time {
-  font-size: 48px;
-  font-weight: 700;
-  line-height: 1;
-  color: #1e3c72;
-  text-shadow: 2px 2px 4px rgba(124, 124, 124, 0.3);
-}
-
-.current-date {
-  font-size: 18px;
-  opacity: 0.9;
-  margin-top: 5px;
-}
-
-/* Hero Queue - Sedang Dipanggil */
-.hero-queue {
-  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
-  border-radius: 24px;
-  padding: 30px;
-  margin-bottom: 20px;
-  text-align: center;
-  box-shadow: 0 12px 48px rgba(255, 107, 107, 0.4);
-  animation: pulse-glow 2s infinite;
-}
-
-.hero-label {
-  font-size: 32px;
-  font-weight: 700;
-  letter-spacing: 3px;
-  margin-bottom: 10px;
-  text-transform: uppercase;
-}
-
-.hero-number {
-  font-size: 120px;
-  font-weight: 900;
-  line-height: 1;
-  margin: 10px 0;
-  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
-  letter-spacing: 4px;
-}
-
-.hero-clinic {
-  font-size: 40px;
-  font-weight: 600;
-  margin-top: 10px;
-}
-
-@keyframes pulse-glow {
-  0%, 100% {
-    box-shadow: 0 12px 48px rgba(255, 107, 107, 0.4);
-  }
-  50% {
-    box-shadow: 0 16px 64px rgba(255, 107, 107, 0.6);
-  }
-}
-
-/* Clinic Grid - 3x3 */
-.clinic-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-  margin-bottom: 20px;
-}
-
-.clinic-card {
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 16px;
-  padding: 20px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-  position: relative;
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-}
-
-.clinic-name {
-  font-size: 28px;
-  font-weight: 800;
-  color: #1e3c72;
-  text-align: center;
-  margin-bottom: 15px;
-  padding-bottom: 10px;
-  border-bottom: 3px solid #2a5298;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.queue-display {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-/* Current Queue Display */
-.current-queue-large {
-  text-align: center;
-  margin-bottom: 10px;
-}
-
-.queue-label {
-  font-size: 18px;
-  font-weight: 600;
-  color: #4caf50;
-  margin-bottom: 5px;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.queue-number-huge {
-  font-size: 72px;
-  font-weight: 900;
-  color: #1e3c72;
-  line-height: 1;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* Next Queues */
-.next-queues {
-  text-align: center;
-}
-
-.queue-label-small {
-  font-size: 14px;
-  font-weight: 600;
-  color: #666;
-  margin-bottom: 5px;
-  text-transform: uppercase;
-}
-
-.next-queue-numbers {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.next-number {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 8px 16px;
-  border-radius: 12px;
-  font-size: 24px;
-  font-weight: 700;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-}
-
-/* Empty State */
-.empty-queue {
-  text-align: center;
-  opacity: 0.5;
-}
-
-.empty-text {
-  font-size: 18px;
-  color: #999;
-  margin-top: 10px;
-  font-weight: 500;
-}
-
-/* Queue Count Badge */
-.queue-count {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 8px 16px;
-  border-radius: 20px;
-  font-size: 20px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-}
-
-/* Footer */
-.tv-footer {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  border-radius: 20px;
-  padding: 20px 40px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-}
-
-.footer-stats {
-  display: flex;
-  gap: 40px;
-}
-
-.stat-box {
-  text-align: center;
-}
-
-.stat-value {
-  font-size: 42px;
-  font-weight: 900;
-  line-height: 1;
-  color:#1e3c72;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-.stat-label {
-  font-size: 16px;
-  opacity: 0.9;
-  margin-top: 5px;
-  color:#1e3c72;
-  font-weight: 500;
-}
-
-.footer-message {
-  font-size: 22px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  opacity: 0.95;
-  color:#1e3c72;
-}
-
-/* Responsive for different TV sizes */
-@media (max-width: 1920px) {
-  .hero-number {
-    font-size: 100px;
-  }
-  
-  .queue-number-huge {
-    font-size: 64px;
-  }
-}
-
-@media (max-width: 1366px) {
-  .clinic-grid {
-    gap: 10px;
-  }
-  
-  .clinic-card {
-    padding: 15px;
-    min-height: 180px;
-  }
-  
-  .clinic-name {
-    font-size: 24px;
-  }
-  
-  .queue-number-huge {
-    font-size: 56px;
-  }
-  
-  .hero-number {
-    font-size: 90px;
-  }
-}
-
-/* Animation for smooth transitions */
-.clinic-card {
-  transition: all 0.3s ease;
-}
-
-.queue-number-huge,
-.hero-number {
-  transition: all 0.3s ease;
-}
-</style>
\ No newline at end of file
diff --git a/pages/Profile/Pengaturan.vue.txt b/pages/Profile/Pengaturan.vue.txt
deleted file mode 100644
index 6332cc7..0000000
--- a/pages/Profile/Pengaturan.vue.txt
+++ /dev/null
@@ -1,1126 +0,0 @@
-<template>
-  <v-container fluid class="settings-page pa-8">
-    <v-row justify="center">
-      <v-col cols="12" lg="10" xl="9">
-        <!-- Modern Header -->
-        <div class="page-header mb-8">
-          <div class="d-flex align-center mb-4">
-            <div class="header-icon">
-              <v-icon size="40" color="white">mdi-cog</v-icon>
-            </div>
-            <div class="ml-4">
-              <h1 class="text-h3 font-weight-bold gradient-text">Pengaturan Akun</h1>
-              <p class="text-subtitle-1 text-grey-darken-1 mt-1">Kelola keamanan, privasi, dan preferensi akun Anda</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Settings Navigation Tabs -->
-        <v-tabs
-          v-model="activeTab"
-          color="blue-darken-2"
-          class="mb-6 rounded-xl elevation-4 bg-white"
-        >
-          <v-tab value="security" class="tab-item">
-            <v-icon start>mdi-shield-lock</v-icon>
-            Keamanan
-          </v-tab>
-          <v-tab value="notifications" class="tab-item">
-            <v-icon start>mdi-bell</v-icon>
-            Notifikasi
-          </v-tab>
-          <v-tab value="privacy" class="tab-item">
-            <v-icon start>mdi-eye-off</v-icon>
-            Privasi
-          </v-tab>
-          <v-tab value="danger" class="tab-item">
-            <v-icon start>mdi-alert</v-icon>
-            Danger Zone
-          </v-tab>
-        </v-tabs>
-
-        <v-window v-model="activeTab">
-          <!-- Security Tab -->
-          <v-window-item value="security">
-            <v-card class="rounded-xl elevation-4 mb-4">
-              <div class="card-header-gradient pa-5">
-                <div class="d-flex align-center">
-                  <div class="header-icon-small">
-                    <v-icon color="white">mdi-lock</v-icon>
-                  </div>
-                  <h3 class="text-h6 font-weight-bold text-white ml-3">Password & Autentikasi</h3>
-                </div>
-              </div>
-
-              <v-card-text class="pa-6">
-                <div class="setting-item">
-                  <div class="d-flex align-center">
-                    <div class="setting-icon blue">
-                      <v-icon size="24" color="blue-darken-2">mdi-key</v-icon>
-                    </div>
-                    <div class="ml-4 flex-grow-1">
-                      <div class="text-subtitle-1 font-weight-bold">Password</div>
-                      <div class="text-body-2 text-grey-darken-1">
-                        Terakhir diubah: 2 bulan yang lalu
-                      </div>
-                    </div>
-                    <v-btn
-                      color="orange-darken-2"
-                      variant="flat"
-                      size="small"
-                      class="rounded-lg"
-                      @click="openChangePassword"
-                    >
-                      Ubah Password
-                    </v-btn>
-                  </div>
-                </div>
-
-                <v-divider class="my-4"></v-divider>
-
-                <div class="setting-item">
-                  <div class="d-flex align-center">
-                    <div class="setting-icon orange">
-                      <v-icon size="24" color="orange-darken-2">mdi-two-factor-authentication</v-icon>
-                    </div>
-                    <div class="ml-4 flex-grow-1">
-                      <div class="text-subtitle-1 font-weight-bold">Autentikasi Dua Faktor (2FA)</div>
-                      <div class="text-body-2 text-grey-darken-1">
-                        Tambahkan lapisan keamanan ekstra ke akun Anda
-                      </div>
-                      <v-chip
-                        size="small"
-                        :color="settings.twoFactorEnabled ? 'success' : 'grey'"
-                        class="mt-2"
-                      >
-                        {{ settings.twoFactorEnabled ? 'Aktif' : 'Nonaktif' }}
-                      </v-chip>
-                    </div>
-                    <v-switch
-                      v-model="settings.twoFactorEnabled"
-                      color="orange-darken-2"
-                      hide-details
-                      inset
-                      @change="toggleTwoFactor"
-                    ></v-switch>
-                  </div>
-                </div>
-
-                <v-divider class="my-4"></v-divider>
-
-                <div class="setting-item">
-                  <div class="d-flex align-center">
-                    <div class="setting-icon green">
-                      <v-icon size="24" color="green-darken-2">mdi-history</v-icon>
-                    </div>
-                    <div class="ml-4 flex-grow-1">
-                      <div class="text-subtitle-1 font-weight-bold">Riwayat Login</div>
-                      <div class="text-body-2 text-grey-darken-1">
-                        Lihat semua aktivitas login akun Anda
-                      </div>
-                    </div>
-                    <v-btn
-                      color="blue-darken-2"
-                      variant="outlined"
-                      size="small"
-                      class="rounded-lg"
-                      @click="viewLoginHistory"
-                    >
-                      Lihat Detail
-                    </v-btn>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
-
-            <!-- Session Management -->
-            <v-card class="rounded-xl elevation-4">
-              <div class="card-header-modern pa-5">
-                <div class="d-flex align-center">
-                  <div class="section-icon-small blue">
-                    <v-icon color="blue-darken-2">mdi-devices</v-icon>
-                  </div>
-                  <h3 class="text-h6 font-weight-bold ml-3">Sesi Aktif</h3>
-                </div>
-              </div>
-
-              <v-card-text class="pa-6">
-                <div class="session-list">
-                  <div v-for="(session, index) in activeSessions" :key="index" class="session-item">
-                    <div class="d-flex align-center">
-                      <div class="device-icon">
-                        <v-icon :color="session.current ? 'green' : 'blue-grey'">
-                          {{ session.icon }}
-                        </v-icon>
-                      </div>
-                      <div class="ml-4 flex-grow-1">
-                        <div class="text-subtitle-2 font-weight-bold">{{ session.device }}</div>
-                        <div class="text-caption text-grey-darken-1">
-                          {{ session.location }} • {{ session.lastActive }}
-                        </div>
-                        <v-chip v-if="session.current" size="x-small" color="success" class="mt-1">
-                          Sesi Ini
-                        </v-chip>
-                      </div>
-                      <v-btn
-                        v-if="!session.current"
-                        icon="mdi-close"
-                        size="small"
-                        variant="text"
-                        color="error"
-                      ></v-btn>
-                    </div>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-window-item>
-
-          <!-- Notifications Tab -->
-          <v-window-item value="notifications">
-            <v-card class="rounded-xl elevation-4">
-              <div class="card-header-gradient pa-5">
-                <div class="d-flex align-center">
-                  <div class="header-icon-small">
-                    <v-icon color="white">mdi-bell-ring</v-icon>
-                  </div>
-                  <h3 class="text-h6 font-weight-bold text-white ml-3">Preferensi Notifikasi</h3>
-                </div>
-              </div>
-
-              <v-card-text class="pa-6">
-                <div class="notification-group mb-6">
-                  <h4 class="text-subtitle-1 font-weight-bold mb-4">Notifikasi Sistem</h4>
-                  
-                  <div class="setting-item mb-4">
-                    <div class="d-flex align-center justify-space-between">
-                      <div class="d-flex align-center">
-                        <div class="setting-icon blue">
-                          <v-icon size="20" color="blue-darken-2">mdi-email</v-icon>
-                        </div>
-                        <div class="ml-3">
-                          <div class="text-body-1 font-weight-medium">Email Notifikasi</div>
-                          <div class="text-caption text-grey-darken-1">Terima pemberitahuan penting via email</div>
-                        </div>
-                      </div>
-                      <v-switch
-                        v-model="settings.emailNotifications"
-                        color="blue-darken-2"
-                        hide-details
-                        inset
-                      ></v-switch>
-                    </div>
-                  </div>
-
-                  <div class="setting-item mb-4">
-                    <div class="d-flex align-center justify-space-between">
-                      <div class="d-flex align-center">
-                        <div class="setting-icon orange">
-                          <v-icon size="20" color="orange-darken-2">mdi-cellphone</v-icon>
-                        </div>
-                        <div class="ml-3">
-                          <div class="text-body-1 font-weight-medium">Push Notifikasi</div>
-                          <div class="text-caption text-grey-darken-1">Notifikasi langsung di perangkat</div>
-                        </div>
-                      </div>
-                      <v-switch
-                        v-model="settings.pushNotifications"
-                        color="orange-darken-2"
-                        hide-details
-                        inset
-                      ></v-switch>
-                    </div>
-                  </div>
-
-                  <div class="setting-item">
-                    <div class="d-flex align-center justify-space-between">
-                      <div class="d-flex align-center">
-                        <div class="setting-icon green">
-                          <v-icon size="20" color="green-darken-2">mdi-message</v-icon>
-                        </div>
-                        <div class="ml-3">
-                          <div class="text-body-1 font-weight-medium">SMS Notifikasi</div>
-                          <div class="text-caption text-grey-darken-1">Terima kode verifikasi via SMS</div>
-                        </div>
-                      </div>
-                      <v-switch
-                        v-model="settings.smsNotifications"
-                        color="green-darken-2"
-                        hide-details
-                        inset
-                      ></v-switch>
-                    </div>
-                  </div>
-                </div>
-
-                <v-divider class="my-6"></v-divider>
-
-                <div class="notification-group">
-                  <h4 class="text-subtitle-1 font-weight-bold mb-4">Notifikasi Marketing</h4>
-                  
-                  <div class="setting-item mb-4">
-                    <div class="d-flex align-center justify-space-between">
-                      <div class="d-flex align-center">
-                        <div class="setting-icon purple">
-                          <v-icon size="20" color="deep-purple-darken-2">mdi-tag</v-icon>
-                        </div>
-                        <div class="ml-3">
-                          <div class="text-body-1 font-weight-medium">Promosi & Penawaran</div>
-                          <div class="text-caption text-grey-darken-1">Dapatkan info promo eksklusif</div>
-                        </div>
-                      </div>
-                      <v-switch
-                        v-model="settings.marketingNotifications"
-                        color="deep-purple-darken-2"
-                        hide-details
-                        inset
-                      ></v-switch>
-                    </div>
-                  </div>
-
-                  <div class="setting-item">
-                    <div class="d-flex align-center justify-space-between">
-                      <div class="d-flex align-center">
-                        <div class="setting-icon pink">
-                          <v-icon size="20" color="pink-darken-2">mdi-newspaper</v-icon>
-                        </div>
-                        <div class="ml-3">
-                          <div class="text-body-1 font-weight-medium">Newsletter</div>
-                          <div class="text-caption text-grey-darken-1">Update bulanan dan artikel</div>
-                        </div>
-                      </div>
-                      <v-switch
-                        v-model="settings.newsletter"
-                        color="pink-darken-2"
-                        hide-details
-                        inset
-                      ></v-switch>
-                    </div>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-window-item>
-
-          <!-- Privacy Tab -->
-          <v-window-item value="privacy">
-            <v-card class="rounded-xl elevation-4">
-              <div class="card-header-gradient pa-5">
-                <div class="d-flex align-center">
-                  <div class="header-icon-small">
-                    <v-icon color="white">mdi-shield-account</v-icon>
-                  </div>
-                  <h3 class="text-h6 font-weight-bold text-white ml-3">Pengaturan Privasi</h3>
-                </div>
-              </div>
-
-              <v-card-text class="pa-6">
-                <div class="setting-item mb-4">
-                  <div class="d-flex align-center justify-space-between">
-                    <div class="d-flex align-center">
-                      <div class="setting-icon blue">
-                        <v-icon size="24" color="blue-darken-2">mdi-account-eye</v-icon>
-                      </div>
-                      <div class="ml-4">
-                        <div class="text-subtitle-1 font-weight-bold">Profil Publik</div>
-                        <div class="text-body-2 text-grey-darken-1">
-                          Tampilkan profil Anda di hasil pencarian
-                        </div>
-                      </div>
-                    </div>
-                    <v-switch
-                      v-model="settings.publicProfile"
-                      color="blue-darken-2"
-                      hide-details
-                      inset
-                    ></v-switch>
-                  </div>
-                </div>
-
-                <v-divider class="my-4"></v-divider>
-
-                <div class="setting-item mb-4">
-                  <div class="d-flex align-center justify-space-between">
-                    <div class="d-flex align-center">
-                      <div class="setting-icon orange">
-                        <v-icon size="24" color="orange-darken-2">mdi-email-check</v-icon>
-                      </div>
-                      <div class="ml-4">
-                        <div class="text-subtitle-1 font-weight-bold">Tampilkan Email</div>
-                        <div class="text-body-2 text-grey-darken-1">
-                          Perlihatkan alamat email di profil publik
-                        </div>
-                      </div>
-                    </div>
-                    <v-switch
-                      v-model="settings.showEmail"
-                      color="orange-darken-2"
-                      hide-details
-                      inset
-                    ></v-switch>
-                  </div>
-                </div>
-
-                <v-divider class="my-4"></v-divider>
-
-                <div class="setting-item mb-4">
-                  <div class="d-flex align-center justify-space-between">
-                    <div class="d-flex align-center">
-                      <div class="setting-icon green">
-                        <v-icon size="24" color="green-darken-2">mdi-circle</v-icon>
-                      </div>
-                      <div class="ml-4">
-                        <div class="text-subtitle-1 font-weight-bold">Status Online</div>
-                        <div class="text-body-2 text-grey-darken-1">
-                          Tampilkan status online kepada pengguna lain
-                        </div>
-                      </div>
-                    </div>
-                    <v-switch
-                      v-model="settings.showOnlineStatus"
-                      color="green-darken-2"
-                      hide-details
-                      inset
-                    ></v-switch>
-                  </div>
-                </div>
-
-                <v-divider class="my-4"></v-divider>
-
-                <div class="setting-item">
-                  <div class="d-flex align-center justify-space-between">
-                    <div class="d-flex align-center">
-                      <div class="setting-icon purple">
-                        <v-icon size="24" color="deep-purple-darken-2">mdi-chart-line</v-icon>
-                      </div>
-                      <div class="ml-4">
-                        <div class="text-subtitle-1 font-weight-bold">Data Analytics</div>
-                        <div class="text-body-2 text-grey-darken-1">
-                          Izinkan pengumpulan data untuk meningkatkan layanan
-                        </div>
-                      </div>
-                    </div>
-                    <v-switch
-                      v-model="settings.allowAnalytics"
-                      color="deep-purple-darken-2"
-                      hide-details
-                      inset
-                    ></v-switch>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-window-item>
-
-          <!-- Danger Zone Tab -->
-          <v-window-item value="danger">
-            <v-card class="rounded-xl elevation-4 danger-card">
-              <div class="card-header-danger pa-5">
-                <div class="d-flex align-center">
-                  <div class="header-icon-small-danger">
-                    <v-icon color="white">mdi-alert-octagon</v-icon>
-                  </div>
-                  <h3 class="text-h6 font-weight-bold text-white ml-3">Danger Zone</h3>
-                </div>
-              </div>
-
-              <v-card-text class="pa-6">
-                <v-alert
-                  type="warning"
-                  variant="tonal"
-                  class="mb-6"
-                  icon="mdi-information"
-                >
-                  <div class="text-body-2">
-                    Tindakan di area ini bersifat sensitif dan dapat berdampak permanen pada akun Anda.
-                  </div>
-                </v-alert>
-
-                <div class="danger-item mb-4">
-                  <div class="d-flex align-center justify-space-between">
-                    <div class="d-flex align-center">
-                      <div class="danger-icon warning">
-                        <v-icon size="28" color="orange-darken-3">mdi-pause-circle</v-icon>
-                      </div>
-                      <div class="ml-4">
-                        <div class="text-subtitle-1 font-weight-bold">Nonaktifkan Akun</div>
-                        <div class="text-body-2 text-grey-darken-1">
-                          Akun Anda akan disembunyikan dan dapat diaktifkan kembali kapan saja
-                        </div>
-                      </div>
-                    </div>
-                    <v-btn
-                      color="orange-darken-3"
-                      variant="outlined"
-                      size="small"
-                      class="rounded-lg"
-                      @click="deactivateAccount"
-                    >
-                      Nonaktifkan
-                    </v-btn>
-                  </div>
-                </div>
-
-                <v-divider class="my-4"></v-divider>
-
-                <div class="danger-item">
-                  <div class="d-flex align-center justify-space-between">
-                    <div class="d-flex align-center">
-                      <div class="danger-icon error">
-                        <v-icon size="28" color="error">mdi-delete-forever</v-icon>
-                      </div>
-                      <div class="ml-4">
-                        <div class="text-subtitle-1 font-weight-bold text-error">Hapus Akun Permanen</div>
-                        <div class="text-body-2 text-grey-darken-1">
-                          Semua data Anda akan dihapus secara permanen dan tidak dapat dipulihkan
-                        </div>
-                      </div>
-                    </div>
-                    <v-btn
-                      color="error"
-                      variant="flat"
-                      size="small"
-                      class="rounded-lg"
-                      @click="deleteAccount"
-                    >
-                      Hapus Permanen
-                    </v-btn>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-window-item>
-        </v-window>
-
-        <!-- Save Button (Fixed at bottom for non-danger tabs) -->
-        <v-fade-transition>
-          <div v-if="activeTab !== 'danger'" class="save-bar mt-6">
-            <v-card class="rounded-xl elevation-8 pa-4">
-              <div class="d-flex align-center justify-space-between">
-                <div>
-                  <div class="text-subtitle-1 font-weight-bold">Pengaturan Telah Diubah</div>
-                  <div class="text-caption text-grey-darken-1">Jangan lupa simpan perubahan Anda</div>
-                </div>
-                <div class="d-flex align-center" style="gap: 12px;">
-                  <v-btn
-                    variant="outlined"
-                    class="rounded-lg"
-                    @click="resetSettings"
-                  >
-                    Reset
-                  </v-btn>
-                  <v-btn
-                    color="blue-darken-2"
-                    variant="flat"
-                    class="rounded-lg px-8"
-                    prepend-icon="mdi-content-save"
-                    @click="saveSettings"
-                    :loading="isSaving"
-                  >
-                    Simpan Semua Perubahan
-                  </v-btn>
-                </div>
-              </div>
-            </v-card>
-          </div>
-        </v-fade-transition>
-      </v-col>
-    </v-row>
-
-    <!-- Change Password Dialog -->
-    <v-dialog v-model="changePasswordDialog" max-width="550" persistent>
-      <v-card class="rounded-xl">
-        <div class="dialog-header pa-5">
-          <h3 class="text-h6 font-weight-bold text-white">Ubah Password</h3>
-        </div>
-        <v-card-text class="pa-6">
-          <v-form ref="passwordForm">
-            <div class="mb-4">
-              <label class="form-label">Password Saat Ini</label>
-              <v-text-field
-                v-model="passwordData.currentPassword"
-                type="password"
-                variant="outlined"
-                color="blue-darken-2"
-                density="comfortable"
-                hide-details="auto"
-              >
-                <template v-slot:prepend-inner>
-                  <v-icon size="20" color="grey-darken-1">mdi-lock</v-icon>
-                </template>
-              </v-text-field>
-            </div>
-            <div class="mb-4">
-              <label class="form-label">Password Baru</label>
-              <v-text-field
-                v-model="passwordData.newPassword"
-                type="password"
-                variant="outlined"
-                color="blue-darken-2"
-                density="comfortable"
-                hide-details="auto"
-              >
-                <template v-slot:prepend-inner>
-                  <v-icon size="20" color="blue-darken-2">mdi-lock-plus</v-icon>
-                </template>
-              </v-text-field>
-            </div>
-            <div>
-              <label class="form-label">Konfirmasi Password Baru</label>
-              <v-text-field
-                v-model="passwordData.confirmPassword"
-                type="password"
-                variant="outlined"
-                color="blue-darken-2"
-                density="comfortable"
-                hide-details="auto"
-              >
-                <template v-slot:prepend-inner>
-                  <v-icon size="20" color="orange-darken-2">mdi-lock-check</v-icon>
-                </template>
-              </v-text-field>
-            </div>
-          </v-form>
-        </v-card-text>
-        <v-card-actions class="pa-6 pt-0">
-          <v-spacer></v-spacer>
-          <v-btn
-            variant="text"
-            @click="changePasswordDialog = false"
-          >
-            Batal
-          </v-btn>
-          <v-btn
-            color="orange-darken-2"
-            variant="flat"
-            class="px-6"
-            @click="changePassword"
-            :loading="isChangingPassword"
-          >
-            Ubah Password
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- Login History Dialog -->
-    <v-dialog v-model="loginHistoryDialog" max-width="800" scrollable>
-      <v-card class="rounded-xl">
-        <div class="dialog-header pa-5">
-          <h3 class="text-h6 font-weight-bold text-white">Riwayat Login</h3>
-        </div>
-        <v-card-text class="pa-0" style="max-height: 500px;">
-          <v-timeline side="end" density="compact" class="pa-6">
-            <v-timeline-item
-              v-for="(login, index) in loginHistory"
-              :key="index"
-              :dot-color="login.success ? 'success' : 'error'"
-              size="small"
-            >
-              <div class="timeline-content">
-                <div class="d-flex align-center justify-space-between mb-2">
-                  <div class="text-subtitle-2 font-weight-bold">{{ login.device }}</div>
-                  <v-chip
-                    :color="login.success ? 'success' : 'error'"
-                    size="x-small"
-                    variant="flat"
-                  >
-                    {{ login.success ? 'Berhasil' : 'Gagal' }}
-                  </v-chip>
-                </div>
-                <div class="text-caption text-grey-darken-1">
-                  <v-icon size="14">mdi-map-marker</v-icon> {{ login.location }}
-                </div>
-                <div class="text-caption text-grey-darken-1">
-                  <v-icon size="14">mdi-clock</v-icon> {{ login.date }}
-                </div>
-              </div>
-            </v-timeline-item>
-          </v-timeline>
-        </v-card-text>
-        <v-card-actions class="pa-4">
-          <v-spacer></v-spacer>
-          <v-btn
-            variant="text"
-            @click="loginHistoryDialog = false"
-          >
-            Tutup
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- Confirmation Dialog -->
-    <v-dialog v-model="confirmDialog" max-width="500" persistent>
-      <v-card class="rounded-xl">
-        <v-card-title class="pa-6">
-          <div class="d-flex align-center">
-            <v-icon
-              :color="confirmDialogType === 'danger' ? 'error' : 'warning'"
-              size="32"
-              class="mr-3"
-            >
-              mdi-alert-circle
-            </v-icon>
-            <span class="text-h6 font-weight-bold">{{ confirmDialogTitle }}</span>
-          </div>
-        </v-card-title>
-        <v-card-text class="pa-6 pt-0">
-          <p class="text-body-1">{{ confirmDialogMessage }}</p>
-        </v-card-text>
-        <v-card-actions class="pa-6 pt-0">
-          <v-spacer></v-spacer>
-          <v-btn
-            variant="text"
-            @click="confirmDialog = false"
-          >
-            Batal
-          </v-btn>
-          <v-btn
-            :color="confirmDialogType === 'danger' ? 'error' : 'orange-darken-3'"
-            variant="flat"
-            class="px-6"
-            @click="confirmAction"
-          >
-            Konfirmasi
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- Snackbar -->
-    <v-snackbar
-      v-model="snackbar"
-      :color="snackbarColor"
-      timeout="3000"
-      location="top"
-    >
-      <div class="d-flex align-center">
-        <v-icon class="mr-2">
-          {{ snackbarColor === 'success' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
-        </v-icon>
-        {{ snackbarMessage }}
-      </div>
-      <template v-slot:actions>
-        <v-btn variant="text" @click="snackbar = false">Tutup</v-btn>
-      </template>
-    </v-snackbar>
-  </v-container>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue';
-
-definePageMeta({
-  middleware: 'auth'
-});
-
-const activeTab = ref('security');
-const isSaving = ref(false);
-const isChangingPassword = ref(false);
-const snackbar = ref(false);
-const snackbarMessage = ref('');
-const snackbarColor = ref('success');
-
-const changePasswordDialog = ref(false);
-const loginHistoryDialog = ref(false);
-const confirmDialog = ref(false);
-const confirmDialogTitle = ref('');
-const confirmDialogMessage = ref('');
-const confirmDialogType = ref('warning');
-const confirmDialogAction = ref(null);
-
-const settings = reactive({
-  twoFactorEnabled: false,
-  emailNotifications: true,
-  pushNotifications: true,
-  smsNotifications: false,
-  marketingNotifications: false,
-  newsletter: true,
-  publicProfile: true,
-  showEmail: false,
-  showOnlineStatus: true,
-  allowAnalytics: true
-});
-
-const passwordData = reactive({
-  currentPassword: '',
-  newPassword: '',
-  confirmPassword: ''
-});
-
-const activeSessions = ref([
-  {
-    device: 'Chrome on Windows 11',
-    location: 'Sidoarjo, Indonesia',
-    lastActive: 'Sekarang',
-    icon: 'mdi-laptop',
-    current: true
-  },
-  {
-    device: 'Mobile App on Android',
-    location: 'Surabaya, Indonesia',
-    lastActive: '2 jam yang lalu',
-    icon: 'mdi-cellphone',
-    current: false
-  },
-  {
-    device: 'Safari on macOS',
-    location: 'Jakarta, Indonesia',
-    lastActive: '1 hari yang lalu',
-    icon: 'mdi-laptop',
-    current: false
-  }
-]);
-
-const loginHistory = ref([
-  {
-    device: 'Chrome on Windows',
-    location: 'Sidoarjo, Indonesia',
-    date: '16 Oktober 2025, 10:30 AM',
-    success: true
-  },
-  {
-    device: 'Mobile App on Android',
-    location: 'Surabaya, Indonesia',
-    date: '15 Oktober 2025, 08:15 PM',
-    success: true
-  },
-  {
-    device: 'Firefox on Linux',
-    location: 'Jakarta, Indonesia',
-    date: '14 Oktober 2025, 02:45 PM',
-    success: false
-  },
-  {
-    device: 'Safari on macOS',
-    location: 'Sidoarjo, Indonesia',
-    date: '13 Oktober 2025, 11:20 AM',
-    success: true
-  }
-]);
-
-const openChangePassword = () => {
-  changePasswordDialog.value = true;
-  passwordData.currentPassword = '';
-  passwordData.newPassword = '';
-  passwordData.confirmPassword = '';
-};
-
-const changePassword = async () => {
-  if (passwordData.newPassword !== passwordData.confirmPassword) {
-    snackbarMessage.value = 'Password baru tidak cocok!';
-    snackbarColor.value = 'error';
-    snackbar.value = true;
-    return;
-  }
-
-  isChangingPassword.value = true;
-  try {
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    changePasswordDialog.value = false;
-    snackbarMessage.value = 'Password berhasil diubah!';
-    snackbarColor.value = 'success';
-    snackbar.value = true;
-  } catch (error) {
-    snackbarMessage.value = 'Gagal mengubah password!';
-    snackbarColor.value = 'error';
-    snackbar.value = true;
-  } finally {
-    isChangingPassword.value = false;
-  }
-};
-
-const viewLoginHistory = () => {
-  loginHistoryDialog.value = true;
-};
-
-const toggleTwoFactor = () => {
-  const status = settings.twoFactorEnabled ? 'diaktifkan' : 'dinonaktifkan';
-  snackbarMessage.value = `Autentikasi dua faktor ${status}`;
-  snackbarColor.value = 'info';
-  snackbar.value = true;
-};
-
-const deactivateAccount = () => {
-  confirmDialogTitle.value = 'Nonaktifkan Akun';
-  confirmDialogMessage.value = 'Apakah Anda yakin ingin menonaktifkan akun? Anda dapat mengaktifkannya kembali kapan saja dengan login kembali.';
-  confirmDialogType.value = 'warning';
-  confirmDialogAction.value = 'deactivate';
-  confirmDialog.value = true;
-};
-
-const deleteAccount = () => {
-  confirmDialogTitle.value = 'Hapus Akun Permanen';
-  confirmDialogMessage.value = 'PERINGATAN: Tindakan ini tidak dapat dibatalkan! Semua data Anda termasuk profil, posts, dan pengaturan akan dihapus secara permanen.';
-  confirmDialogType.value = 'danger';
-  confirmDialogAction.value = 'delete';
-  confirmDialog.value = true;
-};
-
-const confirmAction = async () => {
-  confirmDialog.value = false;
-  
-  if (confirmDialogAction.value === 'deactivate') {
-    snackbarMessage.value = 'Akun berhasil dinonaktifkan';
-    snackbarColor.value = 'warning';
-    snackbar.value = true;
-  } else if (confirmDialogAction.value === 'delete') {
-    snackbarMessage.value = 'Permintaan penghapusan akun sedang diproses';
-    snackbarColor.value = 'error';
-    snackbar.value = true;
-  }
-};
-
-const saveSettings = async () => {
-  isSaving.value = true;
-  try {
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    snackbarMessage.value = 'Pengaturan berhasil disimpan!';
-    snackbarColor.value = 'success';
-    snackbar.value = true;
-  } catch (error) {
-    snackbarMessage.value = 'Gagal menyimpan pengaturan!';
-    snackbarColor.value = 'error';
-    snackbar.value = true;
-  } finally {
-    isSaving.value = false;
-  }
-};
-
-const resetSettings = () => {
-  // Reset to default values
-  Object.assign(settings, {
-    twoFactorEnabled: false,
-    emailNotifications: true,
-    pushNotifications: true,
-    smsNotifications: false,
-    marketingNotifications: false,
-    newsletter: true,
-    publicProfile: true,
-    showEmail: false,
-    showOnlineStatus: true,
-    allowAnalytics: true
-  });
-  
-  snackbarMessage.value = 'Pengaturan direset ke default';
-  snackbarColor.value = 'info';
-  snackbar.value = true;
-};
-</script>
-
-<style scoped>
-.settings-page {
-  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
-  min-height: 100vh;
-}
-
-.page-header {
-  position: relative;
-}
-
-.header-icon {
-  width: 70px;
-  height: 70px;
-  border-radius: 20px;
-  background: linear-gradient(135deg, #fb8c00 0%, #f57c00 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 8px 24px rgba(251, 140, 0, 0.3);
-}
-
-.gradient-text {
-  background: linear-gradient(135deg, #1976d2 0%, #fb8c00 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.tab-item {
-  text-transform: none;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-}
-
-.card-header-gradient {
-  background: linear-gradient(135deg, #1976d2 0%, #2196f3 50%, #fb8c00 100%);
-  border-bottom: none;
-}
-
-.header-icon-small {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.card-header-modern {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  background: linear-gradient(135deg, rgba(25, 118, 210, 0.02) 0%, rgba(245, 124, 0, 0.02) 100%);
-}
-
-.section-icon-small {
-  width: 44px;
-  height: 44px;
-  border-radius: 11px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.section-icon-small.blue {
-  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
-}
-
-.setting-item {
-  padding: 16px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, rgba(25, 118, 210, 0.02) 0%, rgba(245, 124, 0, 0.02) 100%);
-  transition: all 0.3s ease;
-}
-
-.setting-item:hover {
-  background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(245, 124, 0, 0.05) 100%);
-  transform: translateX(4px);
-}
-
-.setting-icon {
-  width: 50px;
-  height: 50px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.setting-icon.blue {
-  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
-}
-
-.setting-icon.orange {
-  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
-}
-
-.setting-icon.green {
-  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
-}
-
-.setting-icon.purple {
-  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
-}
-
-.setting-icon.pink {
-  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
-}
-
-.session-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.session-item {
-  padding: 16px;
-  border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background: white;
-  transition: all 0.3s ease;
-}
-
-.session-item:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  transform: translateY(-2px);
-}
-
-.device-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, rgba(25, 118, 210, 0.1) 0%, rgba(245, 124, 0, 0.1) 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.notification-group {
-  padding: 16px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.danger-card {
-  border: 2px solid #ef5350;
-}
-
-.card-header-danger {
-  background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
-  border-bottom: none;
-}
-
-.header-icon-small-danger {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.danger-item {
-  padding: 20px;
-  border-radius: 12px;
-  border: 2px solid rgba(239, 83, 80, 0.2);
-  background: rgba(239, 83, 80, 0.03);
-}
-
-.danger-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.danger-icon.warning {
-  background: rgba(251, 140, 0, 0.1);
-  border: 2px solid rgba(251, 140, 0, 0.3);
-}
-
-.danger-icon.error {
-  background: rgba(244, 67, 54, 0.1);
-  border: 2px solid rgba(244, 67, 54, 0.3);
-}
-
-.save-bar {
-  position: sticky;
-  bottom: 20px;
-  z-index: 10;
-}
-
-.dialog-header {
-  background: linear-gradient(135deg, #1976d2 0%, #fb8c00 100%);
-}
-
-.form-label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #424242;
-  margin-bottom: 8px;
-}
-
-.timeline-content {
-  padding: 12px;
-  border-radius: 8px;
-  background: rgba(25, 118, 210, 0.03);
-}
-</style>
\ No newline at end of file
diff --git a/pages/Setting/MasterAnjungan.vue b/pages/Setting/MasterAnjungan.vue
new file mode 100644
index 0000000..fff6c35
--- /dev/null
+++ b/pages/Setting/MasterAnjungan.vue
@@ -0,0 +1,547 @@
+<template>
+  <v-container>
+    <v-card>
+      <div class="page-header">
+        <div class="header-content">
+          <div class="header-left">
+            <div class="header-icon">
+              <v-icon size="32" color="white">mdi-monitor-dashboard</v-icon>
+            </div>
+            <div class="header-text">
+              <h2 class="page-title">Master Anjungan</h2>
+              <p class="page-subtitle">Kelola anjungan dan klinik yang ditampilkan</p>
+            </div>
+          </div>
+          <v-btn
+            color="white"
+            @click="openTambahDialog"
+            elevation="0"
+            class="add-btn"
+          >
+            <v-icon left size="20">mdi-plus-circle</v-icon>
+            Tambah Anjungan
+          </v-btn>
+        </div>
+      </div>
+
+      <v-card-text>
+        <v-data-table
+          :headers="headers"
+          :items="anjunganItems"
+          :items-per-page="10"
+          class="elevation-0 data-table"
+        >
+          <template v-slot:item.no="{ index }">
+            {{ index + 1 }}
+          </template>
+
+          <template v-slot:item.jenisPasien="{ item }">
+            <v-chip size="small" class="chip-secondary-outline">
+              {{ item.jenisPasien }}
+            </v-chip>
+          </template>
+
+          <template v-slot:item.klinik="{ item }">
+            <div class="klinik-tags">
+              <v-chip
+                v-for="(kode, idx) in item.klinik.slice(0, 3)"
+                :key="idx"
+                size="small"
+                class="ma-1 chip-secondary-outline"
+              >
+                {{ masterStore.getKlinikNameByKode(kode) }}
+              </v-chip>
+              <v-chip
+                v-if="item.klinik.length > 3"
+                size="small"
+                class="ma-1 chip-neutral"
+              >
+                +{{ item.klinik.length - 3 }}
+              </v-chip>
+            </div>
+          </template>
+
+          <template v-slot:item.actions="{ item }">
+            <v-btn
+              size="small"
+              @click="openEditDialog(item)"
+              variant="flat"
+              class="btn-edit mr-2"
+            >
+              <v-icon size="16" left>mdi-cog</v-icon>
+              Edit
+            </v-btn>
+            <v-btn
+              size="small"
+              @click="handleDelete(item)"
+              variant="outlined"
+              class="btn-delete"
+            >
+              <v-icon size="16" left>mdi-delete</v-icon>
+              Delete
+            </v-btn>
+          </template>
+        </v-data-table>
+      </v-card-text>
+    </v-card>
+
+    <v-dialog v-model="dialog" max-width="700px" persistent scrollable>
+      <v-card class="dialog-card">
+        <v-card-title class="dialog-header">
+          <span class="headline-4">{{ isEdit ? 'Edit Anjungan' : 'Tambah Anjungan Baru' }}</span>
+          <v-btn icon variant="text" @click="closeDialog" size="small" class="btn-close">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-divider></v-divider>
+
+        <v-card-text class="dialog-content">
+          <v-form ref="formRef">
+            <div class="field-group">
+              <div class="group-label">Informasi Anjungan</div>
+
+              <v-text-field
+                label="Nama Anjungan"
+                v-model="formData.namaAnjungan"
+                variant="outlined"
+                density="compact"
+                :rules="[v => !!v || 'Nama anjungan harus diisi']"
+                hide-details="auto"
+                class="mb-3 input-field"
+                placeholder="Anjungan Lobby"
+              ></v-text-field>
+
+              <v-select
+                label="Jenis Pasien"
+                :items="jenisPasienOptions"
+                v-model="formData.jenisPasien"
+                variant="outlined"
+                density="compact"
+                :rules="[v => !!v || 'Pilih jenis pasien']"
+                hide-details="auto"
+                class="mb-3 input-field"
+                placeholder="Reguler atau BPJS"
+              ></v-select>
+
+              <v-select
+                label="Pilih Klinik"
+                :items="clinicStore.getClinicsForDropdown(masterStore)"
+                v-model="formData.klinik"
+                item-title="name"
+                item-value="kode"
+                variant="outlined"
+                density="compact"
+                multiple
+                chips
+                closable-chips
+                :rules="[v => v.length > 0 || 'Pilih minimal 1 klinik']"
+                hide-details="auto"
+                class="input-field"
+              >
+                <template v-slot:chip="{ props, item }">
+                  <v-chip
+                    v-bind="props"
+                    closable
+                    size="small"
+                    class="chip-secondary"
+                  >
+                    {{ item.raw.name }}
+                  </v-chip>
+                </template>
+                <template v-slot:item="{ props, item }">
+                  <v-list-item v-bind="props">
+                    <template v-slot:prepend>
+                      <v-chip size="x-small" class="chip-secondary-small">{{ item.raw.kode }}</v-chip>
+                    </template>
+                    <v-list-item-title class="body-3">{{ item.raw.name }}</v-list-item-title>
+                  </v-list-item>
+                </template>
+              </v-select>
+
+              <div v-if="formData.klinik.length > 0" class="selected-preview">
+                <v-icon size="14" class="icon-success">mdi-check-circle</v-icon>
+                <small class="caption-2">{{ formData.klinik.length }} klinik dipilih</small>
+              </div>
+            </div>
+          </v-form>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions class="dialog-actions">
+          <v-spacer></v-spacer>
+          <v-btn variant="outlined" @click="closeDialog" class="btn-cancel">
+            <v-icon left size="18">mdi-close</v-icon>
+            Batal
+          </v-btn>
+          <v-btn variant="flat" @click="submitForm" class="btn-submit">
+            <v-icon left size="18">mdi-content-save</v-icon>
+            Simpan
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="3000">
+      <span class="body-3">{{ snackbar.message }}</span>
+      <template v-slot:actions>
+        <v-btn variant="text" @click="snackbar.show = false" size="small">Tutup</v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useMasterStore } from '@/stores/masterStore';
+import { useAnjunganStore } from '@/stores/anjunganStore';
+import { useClinicStore } from '@/stores/clinicStore';
+
+const masterStore = useMasterStore();
+const anjunganStore = useAnjunganStore();
+const clinicStore = useClinicStore();
+
+const dialog = ref(false);
+const isEdit = ref(false);
+const formRef = ref(null);
+
+const snackbar = ref({
+  show: false,
+  message: '',
+  color: 'success'
+});
+
+const headers = ref([
+  { title: 'No', value: 'no', sortable: false, width: '60px' },
+  { title: 'Nama Anjungan', value: 'namaAnjungan', sortable: true },
+  { title: 'Jenis Pasien', value: 'jenisPasien', sortable: false },
+  { title: 'Klinik Ditampilkan', value: 'klinik', sortable: false },
+  { title: 'Actions', value: 'actions', sortable: false, width: 'auto' },
+]);
+
+const jenisPasienOptions = ['Reguler', 'BPJS'];
+
+const anjunganItems = computed(() => anjunganStore.getAllAnjungan);
+
+const formData = ref({
+  id: null,
+  namaAnjungan: '',
+  jenisPasien: '',
+  klinik: [],
+});
+
+const openTambahDialog = () => {
+  isEdit.value = false;
+  resetForm();
+  dialog.value = true;
+};
+
+const openEditDialog = (item) => {
+  isEdit.value = true;
+  formData.value = {
+    id: item.id,
+    namaAnjungan: item.namaAnjungan,
+    jenisPasien: item.jenisPasien,
+    klinik: [...item.klinik],
+  };
+  dialog.value = true;
+};
+
+const closeDialog = () => {
+  dialog.value = false;
+  resetForm();
+};
+
+const resetForm = () => {
+  formData.value = {
+    id: null,
+    namaAnjungan: '',
+    jenisPasien: '',
+    klinik: [],
+  };
+  if (formRef.value) {
+    formRef.value.reset();
+  }
+};
+
+const submitForm = async () => {
+  const { valid } = await formRef.value.validate();
+  if (!valid) return;
+
+  let result;
+  if (isEdit.value) {
+    result = anjunganStore.updateAnjungan(formData.value);
+  } else {
+    result = anjunganStore.addAnjungan(formData.value);
+  }
+
+  snackbar.value = {
+    show: true,
+    message: result.message,
+    color: result.success ? 'success' : 'error',
+  };
+
+  if (result.success) {
+    closeDialog();
+  }
+};
+
+const handleDelete = (item) => {
+  if (confirm(`Hapus anjungan ${item.namaAnjungan}?`)) {
+    const result = anjunganStore.deleteAnjungan(item.id);
+    snackbar.value = {
+      show: true,
+      message: result.message,
+      color: result.success ? 'success' : 'error',
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+$neutral-900: #212121;
+$neutral-800: #4D4D4D;
+$neutral-700: #717171;
+$neutral-600: #89939E;
+$neutral-500: #ABBED1;
+$neutral-400: #E5F7FA;
+$neutral-300: #F5F7FA;
+$neutral-100: #FFFFFF;
+
+$secondary-700: #0053AD;
+$secondary-600: #0671E0;
+$secondary-300: #DBEDFF;
+
+$success-600: #009262;
+$success-300: #84DFC1;
+$success-200: #F1FBF8;
+
+$danger-600: #E02B1D;
+
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+* {
+  font-family: $font-family-base;
+}
+
+.page-header {
+  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 4px 16px rgba(6, 113, 224, 0.2);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: $neutral-100;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+  color: $neutral-100;
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 15px;
+  line-height: 22px;
+  font-weight: $font-weight-regular;
+  color: $neutral-100;
+}
+
+.add-btn {
+  font-weight: $font-weight-semibold;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  font-size: 16px;
+  line-height: 24px;
+  color: $secondary-600 !important;
+}
+
+.data-table {
+  font-family: $font-family-base;
+}
+
+.klinik-tags {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 600px;
+}
+
+.chip-secondary-outline {
+  border: 1px solid $secondary-600;
+  background-color: transparent !important;
+  color: $secondary-600 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip-neutral {
+  background-color: $neutral-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.btn-edit {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.btn-delete {
+  border-color: $danger-600 !important;
+  color: $danger-600 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.dialog-card {
+  font-family: $font-family-base;
+}
+
+.dialog-header {
+  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  color: $neutral-100;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headline-4 {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+}
+
+.btn-close {
+  color: $neutral-100 !important;
+}
+
+.dialog-content {
+  padding: 24px !important;
+  background: $neutral-300;
+}
+
+.dialog-actions {
+  padding: 16px 24px;
+  background: $neutral-300;
+}
+
+.field-group {
+  background: $neutral-100;
+  padding: 20px;
+  border-radius: 12px;
+  margin-bottom: 0;
+  border: 1px solid $neutral-400;
+}
+
+.group-label {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-semibold;
+  color: $secondary-600;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.caption-2 {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: $font-weight-regular;
+  color: $neutral-700;
+}
+
+.body-3 {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-regular;
+}
+
+.input-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.chip-secondary {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-medium;
+}
+
+.chip-secondary-small {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.selected-preview {
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: $success-200;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid $success-300;
+}
+
+.icon-success {
+  color: $success-600 !important;
+}
+
+.btn-cancel {
+  border-color: $neutral-600 !important;
+  color: $neutral-800 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+
+.btn-submit {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+</style>
+
diff --git a/pages/Setting/Screen.vue b/pages/Setting/Screen.vue
index 331345c..5e8e199 100644
--- a/pages/Setting/Screen.vue
+++ b/pages/Setting/Screen.vue
@@ -225,10 +225,12 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useMasterStore } from '@/stores/masterStore';
+import { useScreenStore } from '@/stores/screenStore';
 
 const masterStore = useMasterStore();
+const screenStore = useScreenStore();
 const dialog = ref(false);
 const isEdit = ref(false);
 const formRef = ref(null);
@@ -247,26 +249,7 @@ const headers = ref([
   { title: "Actions", value: "actions", sortable: false, width: "auto" },
 ]);
 
-const screenItems = ref([
-  {
-    id: 1,
-    namaScreen: "Layar Screen 1",
-    nomorScreen: "SCR-001",
-    klinik: ["AN", "AS", "BD", "GI", "GR", "GZ", "IP", "JT"],
-  },
-  {
-    id: 2,
-    namaScreen: "Layar Screen 2",
-    nomorScreen: "SCR-002",
-    klinik: ["JW", "KK", "MT", "SR", "OB", "PR"],
-  },
-  {
-    id: 3,
-    namaScreen: "Layar Screen 3",
-    nomorScreen: "SCR-003",
-    klinik: ["RT", "RM", "HO"],
-  },
-]);
+const screenItems = computed(() => screenStore.screenItems);
 
 const formData = ref({
   id: null,
@@ -316,29 +299,19 @@ const submitForm = async () => {
 
   if (isEdit.value) {
     // Update screen
-    const index = screenItems.value.findIndex(s => s.id === formData.value.id);
-    if (index !== -1) {
-      screenItems.value[index] = {
-        ...screenItems.value[index],
-        ...formData.value,
-      };
-      snackbar.value = {
-        show: true,
-        message: `Konfigurasi ${formData.value.namaScreen} berhasil disimpan`,
-        color: 'success'
-      };
-    }
-  } else {
-    // Add new screen
-    const newId = Math.max(...screenItems.value.map(s => s.id), 0) + 1;
-    screenItems.value.push({
-      id: newId,
-      ...formData.value,
-    });
+    const result = screenStore.updateScreen(formData.value);
     snackbar.value = {
       show: true,
-      message: `Screen ${formData.value.namaScreen} berhasil ditambahkan`,
-      color: 'success'
+      message: result.message,
+      color: result.success ? 'success' : 'error'
+    };
+  } else {
+    // Add new screen
+    const result = screenStore.addScreen(formData.value);
+    snackbar.value = {
+      show: true,
+      message: result.message,
+      color: result.success ? 'success' : 'error'
     };
   }
 
@@ -347,15 +320,12 @@ const submitForm = async () => {
 
 const handleDelete = (item) => {
   if (confirm(`Hapus screen ${item.namaScreen}?`)) {
-    const index = screenItems.value.findIndex(s => s.id === item.id);
-    if (index !== -1) {
-      screenItems.value.splice(index, 1);
-      snackbar.value = {
-        show: true,
-        message: `Screen ${item.namaScreen} berhasil dihapus`,
-        color: 'success'
-      };
-    }
+    const result = screenStore.deleteScreen(item.id);
+    snackbar.value = {
+      show: true,
+      message: result.message,
+      color: result.success ? 'success' : 'error'
+    };
   }
 };
 </script>
diff --git a/stores/anjunganStore.js b/stores/anjunganStore.js
new file mode 100644
index 0000000..670e44c
--- /dev/null
+++ b/stores/anjunganStore.js
@@ -0,0 +1,87 @@
+// stores/anjunganStore.js
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useAnjunganStore = defineStore('anjungan', () => {
+  // Seed: existing static Anjungan page sebagai id 1
+  const anjunganItems = ref([
+    {
+      id: 1,
+      namaAnjungan: 'Anjungan',
+      jenisPasien: 'Reguler',
+      klinik: ['AN', 'AS', 'BD', 'GR', 'HO','GI', 'GZ','IP', 'JT', 'JW', 'KK', 'MT', 'OB', 'PR', 'RT', 'RM', 'SR'],
+    },
+    {
+      id: 2,
+      namaAnjungan: 'Anjungan BPJS',
+      jenisPasien: 'BPJS',
+      klinik: ['AN', 'AS', 'OB', 'PR', 'RT', 'RM', 'SR'],
+    },
+  ]);
+
+  const getAllAnjungan = computed(() => anjunganItems.value);
+
+  const getAnjunganById = (id) => {
+    return computed(() => {
+      const target = Number(id);
+      return anjunganItems.value.find((a) => Number(a.id) === target) || null;
+    });
+  };
+
+  const addAnjungan = (payload) => {
+    const maxId =
+      anjunganItems.value.length > 0
+        ? Math.max(...anjunganItems.value.map((a) => Number(a.id) || 0))
+        : 0;
+    const newId = maxId + 1;
+    const newItem = {
+      ...payload,
+      id: newId,
+    };
+    anjunganItems.value.push(newItem);
+    return {
+      success: true,
+      message: `Anjungan ${newItem.namaAnjungan} berhasil ditambahkan`,
+      data: newItem,
+    };
+  };
+
+  const updateAnjungan = (payload) => {
+    const idx = anjunganItems.value.findIndex(
+      (a) => Number(a.id) === Number(payload.id)
+    );
+    if (idx === -1) {
+      return { success: false, message: 'Anjungan tidak ditemukan' };
+    }
+    anjunganItems.value[idx] = {
+      ...anjunganItems.value[idx],
+      ...payload,
+    };
+    return {
+      success: true,
+      message: `Anjungan ${payload.namaAnjungan} berhasil diperbarui`,
+    };
+  };
+
+  const deleteAnjungan = (id) => {
+    const idx = anjunganItems.value.findIndex(
+      (a) => Number(a.id) === Number(id)
+    );
+    if (idx === -1) {
+      return { success: false, message: 'Anjungan tidak ditemukan' };
+    }
+    const name = anjunganItems.value[idx].namaAnjungan;
+    anjunganItems.value.splice(idx, 1);
+    return { success: true, message: `Anjungan ${name} berhasil dihapus` };
+  };
+
+  return {
+    anjunganItems,
+    getAllAnjungan,
+    getAnjunganById,
+    addAnjungan,
+    updateAnjungan,
+    deleteAnjungan,
+  };
+});
+
diff --git a/stores/clinicStore.js b/stores/clinicStore.js
new file mode 100644
index 0000000..4379654
--- /dev/null
+++ b/stores/clinicStore.js
@@ -0,0 +1,357 @@
+// stores/clinicStore.js
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useClinicStore = defineStore('clinic', () => {
+  // Data clinics dari Anjungan.vue
+  const clinics = ref([
+    {
+      id: 1,
+      name: "ANAK",
+      subtitle: "",
+      icon: "mdi-baby-face",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Sarah Putri, Sp.A", "dr. Andi Wijaya, Sp.A"],
+      shifts: [
+        { name: "Shift 1", quota: 15 },
+        { name: "Shift 2", quota: 20 }
+      ]
+    },
+    {
+      id: 2,
+      name: "ANESTESI",
+      subtitle: "",
+      icon: "mdi-face-mask",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Ahmad Fauzi, Sp.An"],
+      shifts: [
+        { name: "Shift 1", quota: 0 },
+        { name: "Shift 2", quota: 12 }
+      ]
+    },
+    {
+      id: 3,
+      name: "BEDAH",
+      subtitle: "",
+      icon: "mdi-medical-bag",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Budi Santoso, Sp.B", "dr. Eko Prasetyo, Sp.B", "dr. Dian Permata, Sp.B"],
+      shifts: [
+        { name: "Shift 1", quota: 8 },
+        { name: "Shift 2", quota: 10 }
+      ]
+    },
+    {
+      id: 4,
+      name: "GERIATRI",
+      subtitle: "",
+      icon: "mdi-human-cane",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Siti Aminah, Sp.PD-KGer"],
+      shifts: [
+        { name: "Shift 1", quota: 10 },
+        { name: "Shift 2", quota: 8 }
+      ]
+    },
+    {
+      id: 5,
+      name: "GIGI DAN MULUT",
+      subtitle: "",
+      icon: "mdi-tooth",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["drg. Rina Wati, Sp.KG", "drg. Made Surya, Sp.KG"],
+      shifts: [
+        { name: "Shift 1", quota: 18 },
+        { name: "Shift 2", quota: 15 }
+      ]
+    },
+    {
+      id: 6,
+      name: "GIZI",
+      subtitle: "",
+      icon: "mdi-food-apple",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Lisa Andriani, Sp.GK"],
+      shifts: [
+        { name: "Shift 1", quota: 12 },
+        { name: "Shift 2", quota: 10 }
+      ]
+    },
+    {
+      id: 7,
+      name: "HEMATO ONKOLOGI MEDIS",
+      subtitle: "",
+      icon: "mdi-water",
+      shift: "TUTUP",
+      schedule: "",
+      available: false,
+      doctors: [],
+      shifts: []
+    },
+    {
+      id: 8,
+      name: "IPD (PENYAKIT DALAM)",
+      subtitle: "",
+      icon: "mdi-hospital",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Hendra Wijaya, Sp.PD", "dr. Agus Salim, Sp.PD", "dr. Retno Wulan, Sp.PD", "dr. Bambang Susilo, Sp.PD"],
+      shifts: [
+        { name: "Shift 1", quota: 25 },
+        { name: "Shift 2", quota: 20 }
+      ]
+    },
+    {
+      id: 9,
+      name: "JANTUNG (CARDIOLOGI)",
+      subtitle: "",
+      icon: "mdi-heart-pulse",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Rudi Hartono, Sp.JP", "dr. Sinta Dewi, Sp.JP"],
+      shifts: [
+        { name: "Shift 1", quota: 14 },
+        { name: "Shift 2", quota: 12 }
+      ]
+    },
+    {
+      id: 10,
+      name: "JIWA",
+      subtitle: "",
+      icon: "mdi-head-dots-horizontal",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Maya Kusuma, Sp.KJ"],
+      shifts: [
+        { name: "Shift 1", quota: 10 },
+        { name: "Shift 2", quota: 8 }
+      ]
+    },
+    {
+      id: 11,
+      name: "KANDUNGAN",
+      subtitle: "",
+      icon: "mdi-human-pregnant",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Dewi Lestari, Sp.OG", "dr. Putri Andini, Sp.OG", "dr. Nova Riani, Sp.OG"],
+      shifts: [
+        { name: "Shift 1", quota: 16 },
+        { name: "Shift 2", quota: 14 }
+      ]
+    },
+    {
+      id: 12,
+      name: "KEMOTERAPI",
+      subtitle: "",
+      icon: "mdi-virus",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Andi Pratama, Sp.PD-KHOM"],
+      shifts: [
+        { name: "Shift 1", quota: 8 },
+        { name: "Shift 2", quota: 6 }
+      ]
+    },
+    {
+      id: 13,
+      name: "KOMPLEMENTER (NYERI)",
+      subtitle: "",
+      icon: "mdi-medical-bag",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Ratna Sari, Sp.KFR"],
+      shifts: [
+        { name: "Shift 1", quota: 10 },
+        { name: "Shift 2", quota: 8 }
+      ]
+    },
+    {
+      id: 14,
+      name: "KULIT KELAMIN",
+      subtitle: "",
+      icon: "mdi-human-male-female",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Tika Anggraini, Sp.KK", "dr. Fajar Ramadhan, Sp.KK"],
+      shifts: [
+        { name: "Shift 1", quota: 12 },
+        { name: "Shift 2", quota: 10 }
+      ]
+    },
+    {
+      id: 15,
+      name: "MATA",
+      subtitle: "",
+      icon: "mdi-eye",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Yudi Prasetyo, Sp.M", "dr. Linda Kartika, Sp.M"],
+      shifts: [
+        { name: "Shift 1", quota: 15 },
+        { name: "Shift 2", quota: 12 }
+      ]
+    },
+    {
+      id: 16,
+      name: "MCU",
+      subtitle: "",
+      icon: "mdi-clipboard-check",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Fitri Handayani, Sp.OK"],
+      shifts: [
+        { name: "Shift 1", quota: 20 },
+        { name: "Shift 2", quota: 15 }
+      ]
+    },
+    {
+      id: 17,
+      name: "ONKOLOGI",
+      subtitle: "",
+      icon: "mdi-virus",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Dimas Prakoso, Sp.Onk-Rad"],
+      shifts: [
+        { name: "Shift 1", quota: 10 },
+        { name: "Shift 2", quota: 8 }
+      ]
+    },
+    {
+      id: 18,
+      name: "PARU",
+      subtitle: "",
+      icon: "mdi-lungs",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Nina Marlina, Sp.P", "dr. Arief Budiman, Sp.P"],
+      shifts: [
+        { name: "Shift 1", quota: 14 },
+        { name: "Shift 2", quota: 12 }
+      ]
+    },
+    {
+      id: 19,
+      name: "R. TINDAKAN (EMG, ECG, DLL)",
+      subtitle: "",
+      icon: "mdi-waveform",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Fajar Nugroho, Sp.S"],
+      shifts: [
+        { name: "Shift 1", quota: 12 },
+        { name: "Shift 2", quota: 10 }
+      ]
+    },
+    {
+      id: 20,
+      name: "RADIOTERAPI",
+      subtitle: "",
+      icon: "mdi-radioactive",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Wulan Safitri, Sp.Rad"],
+      shifts: [
+        { name: "Shift 1", quota: 8 },
+        { name: "Shift 2", quota: 6 }
+      ]
+    },
+    {
+      id: 21,
+      name: "REHAB MEDIK",
+      subtitle: "",
+      icon: "mdi-human-cane",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Gita Permata, Sp.KFR", "dr. Rian Saputra, Sp.KFR"],
+      shifts: [
+        { name: "Shift 1", quota: 16 },
+        { name: "Shift 2", quota: 14 }
+      ]
+    },
+    {
+      id: 22,
+      name: "SARAF (NEUROLOGI)",
+      subtitle: "",
+      icon: "mdi-head-cog",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: false,
+      doctors: [],
+      shifts: []
+    },
+    {
+      id: 23,
+      name: "THT",
+      subtitle: "",
+      icon: "mdi-ear-hearing",
+      shift: "SHIFT 1",
+      schedule: "Mulai Pukul 07:00",
+      available: true,
+      doctors: ["dr. Reza Maulana, Sp.THT-KL"],
+      shifts: [
+        { name: "Shift 1", quota: 12 },
+        { name: "Shift 2", quota: 10 }
+      ]
+    },
+  ]);
+
+  // Get all clinics
+  const getAllClinics = computed(() => clinics.value);
+
+  // Get clinic by name (untuk mapping dengan kode klinik)
+  const getClinicByName = (name) => {
+    return clinics.value.find(c => c.name === name);
+  };
+
+  // Get clinics list untuk dropdown (format: { name, kode })
+  // Mapping name ke kode klinik dari masterStore
+  const getClinicsForDropdown = (masterStore) => {
+    return clinics.value.map(clinic => {
+      // Cari kode dari masterStore berdasarkan nama
+      const klinikData = masterStore.klinikList.find(k => k.nama === clinic.name);
+      return {
+        name: clinic.name,
+        kode: klinikData?.kode || clinic.name.substring(0, 2).toUpperCase(),
+        icon: clinic.icon,
+        available: clinic.available,
+        id: clinic.id
+      };
+    });
+  };
+
+  return {
+    clinics,
+    getAllClinics,
+    getClinicByName,
+    getClinicsForDropdown,
+  };
+});
+
diff --git a/stores/navItems1.ts b/stores/navItems1.ts
index e660da5..029ba34 100644
--- a/stores/navItems1.ts
+++ b/stores/navItems1.ts
@@ -54,6 +54,7 @@ const defaultNavItems: NavItem[] = [
       { id: 19, name: "Master Klinik Ruang", path: "/setting/masterklinikruang", icon: "mdi-circle-small" },
       { id: 20, name: "Master Penunjang", path: "/setting/masterpenunjang", icon: "mdi-circle-small" },
       { id: 21, name: "Screen", path: "/setting/screen", icon: "mdi-circle-small" },
+      { id: 22, name: "Master Anjungan", path: "/setting/masteranjungan", icon: "mdi-circle-small" },
     ],
   },
 ];
diff --git a/stores/queueStore.js b/stores/queueStore.js
index 337e097..88fcd1f 100644
--- a/stores/queueStore.js
+++ b/stores/queueStore.js
@@ -3,8 +3,8 @@ import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 
 export const useQueueStore = defineStore('queue', () => {
-  // State
-  const allPatients = ref([
+  // Seed data for easy reset during dev
+  const seedPatients = [
     {
       no: 1,
       jamPanggil: "12:49",
@@ -12,10 +12,10 @@ export const useQueueStore = defineStore('queue', () => {
       noAntrian: "UM1001 | Online - 250811100163",
       shift: "Shift 1",
       klinik: "KANDUNGAN",
-      fastTrack: "TIDAK",
-      pembayaran: "UMUM",
-      status: "waiting", // waiting, di-loket, terlambat, pending, processed
-      processStage: "loket", // loket, klinik, penunjang
+      fastTrack: "YA", // Fast Track Patient
+      pembayaran: "BPJS",
+      status: "waiting",
+      processStage: "loket",
       createdAt: new Date().toISOString(),
     },
     {
@@ -38,8 +38,8 @@ export const useQueueStore = defineStore('queue', () => {
       noAntrian: "UM1003 | Online - 250811100200",
       shift: "Shift 1",
       klinik: "SARAF",
-      fastTrack: "TIDAK",
-      pembayaran: "UMUM",
+      fastTrack: "YA", // Fast Track Patient
+      pembayaran: "BPJS",
       status: "waiting",
       processStage: "loket",
       createdAt: new Date().toISOString(),
@@ -57,28 +57,28 @@ export const useQueueStore = defineStore('queue', () => {
       processStage: "loket",
       createdAt: new Date().toISOString(),
     },
-       {
+    {
       no: 5,
       jamPanggil: "12:49",
       barcode: "250811100163",
-      noAntrian: "UM1001 | Online - 250811100163",
-      shift: "Shift 1",
+      noAntrian: "UM1005 | Online - 250811100163",
+      shift: "Shift 2",
       klinik: "KANDUNGAN",
       fastTrack: "TIDAK",
       pembayaran: "UMUM",
-      status: "waiting", // waiting, di-loket, terlambat, pending, processed
-      processStage: "loket", // loket, klinik, penunjang
+      status: "waiting",
+      processStage: "loket",
       createdAt: new Date().toISOString(),
     },
     {
       no: 6,
       jamPanggil: "10:52",
       barcode: "250811100155",
-      noAntrian: "UM1002 | Online - 250811100155",
+      noAntrian: "UM1006 | Online - 250811100155",
       shift: "Shift 1",
       klinik: "IPD",
-      fastTrack: "TIDAK",
-      pembayaran: "UMUM",
+      fastTrack: "YA", // Fast Track Patient
+      pembayaran: "BPJS",
       status: "waiting",
       processStage: "loket",
       createdAt: new Date().toISOString(),
@@ -87,7 +87,7 @@ export const useQueueStore = defineStore('queue', () => {
       no: 7,
       jamPanggil: "09:30",
       barcode: "250811100200",
-      noAntrian: "UM1003 | Online - 250811100200",
+      noAntrian: "UM1007 | Online - 250811100200",
       shift: "Shift 1",
       klinik: "SARAF",
       fastTrack: "TIDAK",
@@ -100,7 +100,7 @@ export const useQueueStore = defineStore('queue', () => {
       no: 8,
       jamPanggil: "14:15",
       barcode: "250811100210",
-      noAntrian: "UM1004 | Online - 250811100210",
+      noAntrian: "UM1008 | Online - 250811100210",
       shift: "Shift 1",
       klinik: "THT",
       fastTrack: "TIDAK",
@@ -109,24 +109,24 @@ export const useQueueStore = defineStore('queue', () => {
       processStage: "loket",
       createdAt: new Date().toISOString(),
     },
-       {
+    {
       no: 9,
       jamPanggil: "12:49",
       barcode: "250811100163",
-      noAntrian: "UM1001 | Online - 250811100163",
-      shift: "Shift 1",
+      noAntrian: "UM1009 | Online - 250811100163",
+      shift: "Shift 2",
       klinik: "KANDUNGAN",
-      fastTrack: "TIDAK",
-      pembayaran: "UMUM",
-      status: "waiting", // waiting, di-loket, terlambat, pending, processed
-      processStage: "loket", // loket, klinik, penunjang
+      fastTrack: "YA", // Fast Track Patient
+      pembayaran: "BPJS",
+      status: "waiting",
+      processStage: "loket",
       createdAt: new Date().toISOString(),
     },
     {
       no: 10,
       jamPanggil: "10:52",
       barcode: "250811100155",
-      noAntrian: "UM1002 | Online - 250811100155",
+      noAntrian: "UM1010 | Online - 250811100155",
       shift: "Shift 1",
       klinik: "IPD",
       fastTrack: "TIDAK",
@@ -139,7 +139,7 @@ export const useQueueStore = defineStore('queue', () => {
       no: 11,
       jamPanggil: "09:30",
       barcode: "250811100200",
-      noAntrian: "UM1003 | Online - 250811100200",
+      noAntrian: "UM1011 | Online - 250811100200",
       shift: "Shift 1",
       klinik: "SARAF",
       fastTrack: "TIDAK",
@@ -152,16 +152,21 @@ export const useQueueStore = defineStore('queue', () => {
       no: 12,
       jamPanggil: "14:15",
       barcode: "250811100210",
-      noAntrian: "UM1004 | Online - 250811100210",
-      shift: "Shift 1",
+      noAntrian: "UM1012 | Online - 250811100210",
+      shift: "Shift 2",
       klinik: "THT",
-      fastTrack: "TIDAK",
-      pembayaran: "UMUM",
+      fastTrack: "YA", // Fast Track Patient
+      pembayaran: "BPJS",
       status: "waiting",
       processStage: "loket",
       createdAt: new Date().toISOString(),
     },
-  ]);
+  ];
+
+  const cloneSeed = () => seedPatients.map(p => ({ ...p }));
+
+  // State
+  const allPatients = ref(cloneSeed());
 
   const quotaUsed = ref(5);
   const currentProcessingPatient = ref({
@@ -198,6 +203,14 @@ export const useQueueStore = defineStore('queue', () => {
   const getPatientsByStage = (stage) => {
     return computed(() => {
       const patients = allPatients.value.filter(p => p.processStage === stage);
+      
+      // Debug log
+      console.log(`getPatientsByStage(${stage}):`, patients.length, 'patients');
+      if (patients.length > 0) {
+        console.log('Sample patient properties:', Object.keys(patients[0]));
+        console.log('Sample fastTrack values:', patients.map(p => p.fastTrack));
+      }
+      
       return {
         all: patients,
         waiting: patients.filter(p => p.status === 'waiting'),
@@ -217,6 +230,12 @@ export const useQueueStore = defineStore('queue', () => {
 
   const totalPasien = computed(() => allPatients.value.length);
 
+  const resetPatients = () => {
+    allPatients.value = cloneSeed();
+    quotaUsed.value = 5;
+    currentProcessingPatient.value = { loket: null, klinik: null, penunjang: null };
+  };
+
   // Actions
   const callNext = (adminType = 'loket') => {
     const stageMap = {
@@ -396,9 +415,9 @@ export const useQueueStore = defineStore('queue', () => {
       noAntrian: `KL${String(newNo).padStart(4, "0")} | Klinik - ${barcode}`,
       shift: "Shift 1",
       klinik: klinik.name,
-      fastTrack: "UMUM",
+      fastTrack: "TIDAK",
       pembayaran: "UMUM",
-      status: "di-loket", // Langsung masuk tabel Di Loket Klinik
+      status: "di-loket",
       processStage: "klinik",
       createdAt: timestamp.toISOString(),
     };
@@ -426,9 +445,9 @@ export const useQueueStore = defineStore('queue', () => {
       noAntrian: `PN${String(newNo).padStart(4, "0")} | Penunjang - ${barcode}`,
       shift: "Shift 1",
       klinik: penunjang.name,
-      fastTrack: "UMUM",
+      fastTrack: "TIDAK",
       pembayaran: patient ? patient.pembayaran : "UMUM",
-      status: "di-loket", // Langsung masuk tabel Di Loket Penunjang
+      status: "di-loket",
       processStage: "penunjang",
       createdAt: timestamp.toISOString(),
       referencePatient: patient ? patient.noAntrian : null,
diff --git a/stores/screenStore.js b/stores/screenStore.js
new file mode 100644
index 0000000..967305d
--- /dev/null
+++ b/stores/screenStore.js
@@ -0,0 +1,90 @@
+// stores/screenStore.js
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useScreenStore = defineStore('screen', () => {
+  // Initial screen items data
+  const screenItems = ref([
+    {
+      id: 1,
+      namaScreen: "Layar Screen 1",
+      nomorScreen: "SCR-001",
+      klinik: ["AN", "AS", "BD", "GI", "GR", "GZ", "IP", "JT"],
+    },
+    {
+      id: 2,
+      namaScreen: "Layar Screen 2",
+      nomorScreen: "SCR-002",
+      klinik: ["JW", "KK", "MT", "SR", "OB", "PR"],
+    },
+    {
+      id: 3,
+      namaScreen: "Layar Screen 3",
+      nomorScreen: "SCR-003",
+      klinik: ["RT", "RM", "HO"],
+    },
+  ]);
+
+  // Computed
+  const getScreenById = (id) => {
+    return computed(() => {
+      const targetId = Number(id);
+      return screenItems.value.find((s) => Number(s.id) === targetId);
+    });
+  };
+
+  const getAllScreens = computed(() => screenItems.value);
+
+  // Actions
+  const addScreen = (screenPayload) => {
+    // Ensure we get a valid ID even if screenItems is empty
+    const maxId = screenItems.value.length > 0 
+      ? Math.max(...screenItems.value.map(s => s.id), 0) 
+      : 0;
+    const newId = maxId + 1;
+    // Pastikan id baru tidak tertimpa payload (payload.id bisa null)
+    const newScreen = {
+      ...screenPayload,
+      id: newId,
+    };
+    screenItems.value.push(newScreen);
+    return { success: true, message: `Screen ${newScreen.namaScreen} berhasil ditambahkan`, data: newScreen };
+  };
+
+  const updateScreen = (screenPayload) => {
+    const index = screenItems.value.findIndex(s => s.id === screenPayload.id);
+    if (index !== -1) {
+      screenItems.value[index] = {
+        ...screenItems.value[index],
+        ...screenPayload,
+      };
+      return { success: true, message: `Konfigurasi ${screenPayload.namaScreen} berhasil disimpan` };
+    }
+    return { success: false, message: 'Screen tidak ditemukan' };
+  };
+
+  const deleteScreen = (screenId) => {
+    const index = screenItems.value.findIndex(s => s.id === screenId);
+    if (index !== -1) {
+      const screenName = screenItems.value[index].namaScreen;
+      screenItems.value.splice(index, 1);
+      return { success: true, message: `Screen ${screenName} berhasil dihapus` };
+    }
+    return { success: false, message: 'Screen tidak ditemukan' };
+  };
+
+  return {
+    // State
+    screenItems,
+    
+    // Computed
+    getAllScreens,
+    getScreenById,
+    
+    // Actions
+    addScreen,
+    updateScreen,
+    deleteScreen,
+  };
+});
+