From 31e18c59653f9df9ce1090eb1aa638a23b35a36d Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Tue, 14 Oct 2025 08:49:54 +0700
Subject: [PATCH 1/3] update sidebar dan menu layanan penunjang

---
 components/ProfileMenu.vue                  |  158 +++
 components/SideBar.vue                      |  307 ++++--
 layouts/default.vue                         |  272 +----
 pages/{KlinikAdmin.vue => AdminKlinik.vue}  |    0
 pages/{Loket-Admin.vue => AdminLoket.vue}   |  357 ++++---
 pages/{Fast-Track.vue => FastTrack.txt}     |    0
 pages/{LoketAdmin1.vue => LoketAdmin1.text} |    0
 pages/Setting/Master-Klinik.txt             |  491 +++++++++
 pages/Setting/Master-KlinikRuang.txt        |  376 +++++++
 pages/Setting/Master-Loket.vue              |    2 +-
 pages/Setting/MasterKlinik.vue              | 1057 +++++++++++--------
 pages/Setting/MasterKlinikRuang.vue         |  885 ++++++++++------
 pages/Setting/MasterLoket.vue               |  176 +++
 pages/Setting/TambahLoket.vue               |  310 ++++++
 server/api/auth/session.get.ts              |  151 ++-
 stores/navItems.ts                          |   81 +-
 16 files changed, 3257 insertions(+), 1366 deletions(-)
 create mode 100644 components/ProfileMenu.vue
 rename pages/{KlinikAdmin.vue => AdminKlinik.vue} (100%)
 rename pages/{Loket-Admin.vue => AdminLoket.vue} (76%)
 rename pages/{Fast-Track.vue => FastTrack.txt} (100%)
 rename pages/{LoketAdmin1.vue => LoketAdmin1.text} (100%)
 create mode 100644 pages/Setting/Master-Klinik.txt
 create mode 100644 pages/Setting/Master-KlinikRuang.txt
 create mode 100644 pages/Setting/MasterLoket.vue
 create mode 100644 pages/Setting/TambahLoket.vue

diff --git a/components/ProfileMenu.vue b/components/ProfileMenu.vue
new file mode 100644
index 0000000..9bf9cf7
--- /dev/null
+++ b/components/ProfileMenu.vue
@@ -0,0 +1,158 @@
+<template>
+  <v-menu 
+    v-model="menu" 
+    :close-on-content-click="false" 
+    location="top end" 
+    offset="8"
+    origin="bottom right" 
+    transition="slide-y-transition"
+  >
+    <template v-slot:activator="{ props: menuProps }">
+      <div
+        v-bind="menuProps"
+        class="d-flex align-center cursor-pointer pa-2 rounded-lg hover-bg"
+      >
+        <v-avatar size="40">
+          <v-img 
+            :src="user.picture" 
+            :alt="`${user.name} Profile`"
+          ></v-img>
+          <v-badge
+            dot
+            color="orange"
+            location="bottom right"
+            offset-x="2"
+            offset-y="2"
+          ></v-badge>
+        </v-avatar>
+
+        <div v-show="!rail" class="ml-3 flex-grow-1">
+          <div class="text-subtitle-2 font-weight-bold">
+            {{ user.name }}
+          </div>
+          <div class="text-caption text-grey">
+            {{ user.email }}
+          </div>
+        </div>
+
+        <v-btn v-show="!rail" icon size="small" variant="text">
+          <v-icon size="20">mdi-dots-vertical</v-icon>
+        </v-btn>
+      </div>
+    </template>
+
+    <v-card width="300" elevation="8" rounded="lg">
+      <v-card-text class="pa-4">
+        <div class="d-flex align-center mb-4">
+          <v-avatar size="48">
+            <v-img :src="user.picture"></v-img>
+          </v-avatar>
+          <div class="ml-3">
+            <div class="text-subtitle-1 font-weight-bold">
+              {{ user.name }}
+            </div>
+            <div class="text-caption text-grey">
+              {{ user.email }}
+            </div>
+          </div>
+        </div>
+
+        <v-list density="compact" class="pa-0">
+          <v-list-item
+            prepend-icon="mdi-cog-outline"
+            class="px-2 rounded-lg"
+            link
+            @click="handleAction('setting')"
+          >
+            <v-list-item-title class="text-body-2">Setting</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item
+            prepend-icon="mdi-help-circle-outline"
+            class="px-2 rounded-lg"
+            link
+            @click="handleAction('help')"
+          >
+            <v-list-item-title class="text-body-2">Bantuan</v-list-item-title>
+          </v-list-item>
+
+          <v-divider class="my-2"></v-divider>
+
+          <v-list-item
+            prepend-icon="mdi-logout"
+            class="px-2 rounded-lg text-red"
+            link
+            @click="signOut"
+            :disabled="isLoggingOut"
+          >
+            <v-list-item-title class="text-body-2">
+              {{ isLoggingOut ? 'Log out...' : 'Log out' }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+
+        <div class="text-caption text-grey mt-3 text-center">
+          v2.5.18 · Terms & Conditions
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// --- PROPS & EMITS ---
+const props = defineProps({
+  user: {
+    type: Object,
+    // Diubah menjadi required: false dengan default yang aman
+    required: false,
+    default: () => ({ 
+        name: 'Guest', 
+        email: 'guest@rssa.com', 
+        picture: 'https://i.pravatar.cc/150?img=33' 
+    })
+  },
+  rail: {
+    type: Boolean,
+    default: true
+  }
+});
+const emit = defineEmits(['logout']); // Hanya emit logout
+
+// --- STATE ---
+const menu = ref(false);
+const isLoggingOut = ref(false);
+
+// --- METHODS ---
+const signOut = () => {
+  if (isLoggingOut.value) return;
+  isLoggingOut.value = true;
+  menu.value = false;
+  
+  // Memicu event untuk ditangani oleh komponen induk (SideBar)
+  emit('logout'); 
+  // Biarkan parent yang mengurus redirect/state global
+  setTimeout(() => isLoggingOut.value = false, 1000); 
+};
+
+const handleAction = (action) => {
+    console.log(`[PopupSidebar] Action: ${action} triggered.`);
+    // TODO: Tambahkan logika navigasi/fungsi di sini, misal: router.push('/settings')
+    menu.value = false;
+};
+</script>
+
+<style scoped>
+/* Tambahkan kembali style yang relevan untuk aktivator di sini */
+.hover-bg:hover {
+  background-color: #f5f5f5;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.text-red {
+  color: rgb(244, 67, 54) !important;
+}
+</style>
\ No newline at end of file
diff --git a/components/SideBar.vue b/components/SideBar.vue
index 5098f72..1736613 100644
--- a/components/SideBar.vue
+++ b/components/SideBar.vue
@@ -1,103 +1,260 @@
-<!-- components/sideBar.vue -->
 <template>
   <v-navigation-drawer
-    :model-value="drawer"
+    v-model="drawer"
     :rail="rail"
     permanent
     app
-    @update:model-value="emit('update:drawer', $event)"
+    color="white"
+    width="280"
+    rail-width="72"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
-    <v-list density="compact" nav>
-      <template v-for="item in items" :key="item.name">
+    <div class="pa-4 d-flex align-center" style="height: 64px">
+      <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">
+      <!-- search bar
+      <v-list-item
+        prepend-icon="mdi-magnify"
+        :title="!rail ? 'Search' : ''"
+        rounded="lg"
+        class="mx-2 my-1"
+      >
+      </v-list-item> -->
+
+      <template v-for="item in navItemsStore.getNavItems" :key="item.id">
+
         <v-menu
-          v-if="item.children"
-          open-on-hover
-          :location="rail ? 'end' : undefined"
-          :offset="10"
-        >
-          <template v-slot:activator="{ props }">
-            <v-list-item
-              v-bind="props"
-              :prepend-icon="item.icon"
-              :title="item.name"
-              :value="item.name"
-              :to="!rail ? item.path : undefined"
-              :link="!rail"
-            ></v-list-item>
-          </template>
-
-          <v-card class="py-2" min-width="200">
-            <v-card-title class="text-subtitle-1 font-weight-bold px-4 py-2">
-              {{ item.name }}
-            </v-card-title>
-            <v-divider></v-divider>
-            <v-list density="compact" nav>
-              <v-list-item
-                v-for="child in item.children"
-                :key="child.name"
-                :to="child.path"
-                :title="child.name"
-                :prepend-icon="child.icon"
-                link
-                class="px-4"
-              ></v-list-item>
-            </v-list>
-          </v-card>
-        </v-menu>
-
-        <v-tooltip
-          v-else
-          :disabled="!rail"
+          v-if="item.children && item.children.length > 0"
           open-on-hover
           location="end"
-          :text="item.name"
+          :disabled="!rail"
         >
-          <template #activator="{ props }">
+          <template v-slot:activator="{ props }">
+            <v-list-group v-if="!rail" :value="item.name">
+              <template v-slot:activator="{ props: listGroupProps }">
+                <v-list-item
+                  v-bind="listGroupProps"
+                  :prepend-icon="item.icon"
+                  :title="item.name"
+                  :active="item.name === currentActiveMenu"
+                  rounded="lg"
+                  class="mx-2 my-1"
+                >
+                </v-list-item>
+              </template>
+              <v-list-item
+                v-for="child in item.children"
+                :key="child.id"
+                :to="child.path"
+                :title="child.name"
+                :active="child.path === 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"
-              :title="item.name"
-              :to="item.path"
-              link
-            ></v-list-item>
+              :active="item.name === currentActiveMenu"
+              rounded="lg"
+              class="mx-2 my-1"
+            >
+            </v-list-item>
           </template>
-        </v-tooltip>
+
+          <v-list class="py-2" style="min-width: 200px">
+            <v-list-item>
+              <v-list-item-title class="font-weight-bold">
+                {{ item.name }}
+              </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.id"
+              :to="child.path"
+              :title="child.name"
+              :active="child.path === 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.name : ''"
+          :to="item.path"
+          :active="item.path === currentRoute.path"
+          rounded="lg"
+          class="mx-2 my-1"
+        >
+          <template v-slot:append v-if="item.badge && !rail">
+            <v-chip size="x-small" color="error" variant="flat">{{
+              item.badge
+            }}</v-chip>
+          </template>
+        </v-list-item>
       </template>
+
+      <v-divider class="my-4 mx-2"></v-divider>
     </v-list>
+
+    <v-spacer></v-spacer>
+
+  <template v-slot:append>
+  <div class="pa-3">
+    <ProfileMenu 
+      :user="user.value"  :rail="rail"
+      @logout="handleLogout"
+      class="full-width-on-expand" 
+    />
+  </div>
+</template>
   </v-navigation-drawer>
 </template>
 
-<script setup lang="ts">
-import { defineProps, defineEmits } from 'vue';
+<script setup>
+import { ref, computed } from "vue";
+import { useRoute } from "vue-router";
+// Import store Pinia
+import { useNavItemsStore } from "@/stores/navItems"; // Sesuaikan path ini jika perlu
+import ProfileMenu from "./ProfileMenu.vue";
 
-interface NavItem {
-  id: number;
-  name: string;
-  path: string;
-  icon: string;
-  children?: NavItem[];
-}
+// State
+const drawer = ref(true);
+const rail = ref(true);
+const hoverTimeout = ref(null);
 
-const props = defineProps({
-  items: {
-    type: Array as () => NavItem[],
-    required: true,
-  },
-  rail: {
-    type: Boolean,
-    required: true,
-  },
-  drawer: {
-    type: Boolean,
-    required: true,
-  },
+// Akses Pinia Store
+const user = ref({
+    name: 'Adam Sulfat',
+    email: 'adam@rssa.com',
+    picture: 'https://i.pravatar.cc/150?img=33', // Ganti dengan URL gambar dinamis
+    id: 'a1b2c3d4e5f6g7h8'
+});
+const navItemsStore = useNavItemsStore();
+
+const currentRoute = useRoute();
+
+const currentActiveMenu = computed(() => {
+  // Menggunakan Getter untuk mendapatkan array menu yang pasti valid
+  const items = navItemsStore.getNavItems; 
+
+  // Pengecekan keamanan (walaupun Getter seharusnya sudah menjamin array)
+  if (!Array.isArray(items) || items.length === 0) {
+    return "";
+  }
+
+  // Cari item utama yang sedang aktif
+  const currentItem = items.find((item) => item.path === currentRoute.path);
+  if (currentItem) {
+    return currentItem.name;
+  }
+
+  // Cari item anak (children) yang sedang aktif
+  for (const item of items) {
+    if (item.children && Array.isArray(item.children)) { 
+      const childItem = item.children.find(
+        (child) => child.path === currentRoute.path 
+      );
+      if (childItem) {
+        return item.name;
+      }
+    }
+  }
+  return "";
 });
 
-const emit = defineEmits(['update:drawer']);
+// Hover handlers
+const handleMouseEnter = () => {
+  if (hoverTimeout.value) {
+    clearTimeout(hoverTimeout.value);
+  }
+  hoverTimeout.value = setTimeout(() => {
+    rail.value = false;
+  }, 100);
+};
+
+const handleMouseLeave = () => {
+  if (hoverTimeout.value) {
+    clearTimeout(hoverTimeout.value);
+  }
+  hoverTimeout.value = setTimeout(() => {
+    rail.value = true;
+  }, 200);
+};
+
+const handleLogout = () => {
+  console.log("Logging out...");
+  // Tambahkan logika logout di sini
+};
 </script>
 
 <style scoped>
-.v-navigation-drawer__content {
-  background-color: #ffffff;
+.v-list-item--active {
+  background-color: #e3f2fd !important;
+  color: #1976d2 !important;
+}
+
+.v-list-item--active :deep(.v-list-item__prepend) {
+  color: #1976d2 !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;
+  transition: width 0.2s ease-in-out !important;
+}
+
+.hover-bg:hover {
+  background-color: #f5f5f5;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+/* Custom scrollbar */
+:deep(.v-navigation-drawer__content) {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+:deep(.v-navigation-drawer__content)::-webkit-scrollbar {
+  width: 6px;
+}
+
+:deep(.v-navigation-drawer__content)::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+:deep(.v-navigation-drawer__content)::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 3px;
+}
+
+:deep(.v-navigation-drawer__content)::-webkit-scrollbar-thumb:hover {
+  background: #999;
 }
 </style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 6f559e0..af01aca 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,206 +1,20 @@
 <template>
   <v-app>
-    <!-- Navigation Drawer -->
-    <v-navigation-drawer 
-      v-model="drawer" 
-      :rail="rail" 
-      permanent 
-      app
-      color="white"
-      width="280"
-      rail-width="72"
-    >
-      <!-- Header Sidebar -->
-      <div class="pa-4 d-flex align-center" style="height: 64px;">
-        <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>
+    <Sidebar />
 
-      <v-divider></v-divider>
-
-      <!-- Menu Items -->
-      <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">
-          <!-- Item dengan Children -->
-          <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>
-
-              <!-- Rail mode menu -->
-              <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>
-
-            <!-- Submenu untuk rail mode -->
-            <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>
-
-          <!-- Item tanpa Children -->
-          <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>
-        <!-- Theme Toggle -->
-        <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>
-
-        <!-- User Profile -->
-        <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>
-
-    <!-- Main Content -->
     <v-main>
-      <!-- Top Bar untuk Toggle -->
-      <v-app-bar flat color="transparent" height="64">
-        <v-btn
-          icon
-          @click="rail = !rail"
-          class="ml-2"
-        >
-          <v-icon>mdi-menu</v-icon>
-        </v-btn>
-        <v-spacer></v-spacer>
-        <v-btn icon>
-          <v-icon>mdi-bell-outline</v-icon>
-        </v-btn>
-      </v-app-bar>
-
-      <v-container fluid class="pa-6">
+      <v-container fluid class="bg-grey-lighten-4 pa-6">
         <slot></slot>
       </v-container>
     </v-main>
 
-    <!-- Footer -->
     <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
+              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">
@@ -215,85 +29,9 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
-import { useRoute } from 'vue-router';
-
-// 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: "Marketplace", icon: "mdi-storefront-outline", to: "/marketplace" },
-  // { title: "My Properties", icon: "mdi-home-outline", to: "/properties" },
-  // { title: "Auctions", icon: "mdi-gavel", to: "/auctions" },
-  // { title: "Wallet", icon: "mdi-wallet-outline", to: "/wallet" },
-  // { title: "Favorites", icon: "mdi-heart-outline", to: "/favorites" },
-  { 
-    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 '';
-});
+import Sidebar from "@/components/Sidebar.vue";
 </script>
 
 <style scoped>
-.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/KlinikAdmin.vue b/pages/AdminKlinik.vue
similarity index 100%
rename from pages/KlinikAdmin.vue
rename to pages/AdminKlinik.vue
diff --git a/pages/Loket-Admin.vue b/pages/AdminLoket.vue
similarity index 76%
rename from pages/Loket-Admin.vue
rename to pages/AdminLoket.vue
index e5f11b9..76528d4 100644
--- a/pages/Loket-Admin.vue
+++ b/pages/AdminLoket.vue
@@ -23,12 +23,11 @@
         </div>
       </div>
     </div>
-    <div>
-      <v-card class="next-patient-card mb-4" elevation="2">
+     <!-- <v-card class="next-patient-card mb-4" elevation="2">
         <v-card-text class="text-center pa-6">
           <v-chip color="success" variant="flat" class="mb-3" size="large">
             <v-icon start>mdi-account-arrow-right</v-icon>
-            PASIEN SELANJUTNYA
+            PASIEN ANTREAN ANJUNGAN
           </v-chip>
           <div class="text-h4 font-weight-bold mb-2 text-success">
             {{ nextPatient ? nextPatient.noAntrian.split(" |")[0] : "UM1004" }}
@@ -48,11 +47,10 @@
             PANGGIL NEXT
           </v-btn>
         </v-card-text>
-      </v-card>
-    </div>
+      </v-card> -->
     <!-- Combined Control Section -->
     <v-row class="mb-4">
-      <!-- Left Side: Call Controls and Current Processing -->
+      <!-- Left Side: Current Processing -->
       <v-col cols="12" lg="6">
         <!-- Current Patient Processing Card -->
         <v-card
@@ -75,115 +73,134 @@
                   {{ currentProcessingPatient.klinik }}
                 </div>
               </div>
-              <div class="action-buttons">
-                <v-btn
-                  color="success"
-                  variant="flat"
-                  class="mr-2"
-                  @click="processPatient(currentProcessingPatient, 'check-in')"
-                >
-                  <v-icon start>mdi-check-circle</v-icon>
-                  Check In
-                </v-btn>
-                <v-btn
-                  color="warning"
-                  variant="flat"
-                  class="mr-2"
-                  @click="processPatient(currentProcessingPatient, 'terlambat')"
-                >
-                  <v-icon start>mdi-clock-alert</v-icon>
-                  Terlambat
-                </v-btn>
-                <v-btn
-                  color="error"
-                  variant="flat"
-                  @click="processPatient(currentProcessingPatient, 'pending')"
-                >
-                  <v-icon start>mdi-pause-circle</v-icon>
-                  Pending
-                </v-btn>
-              </div>
+              <div class="action-buttons d-flex flex-column"> 
+          <v-btn
+            color="success"
+            variant="flat"
+            class="mb-2" width="120"   @click="processPatient(currentProcessingPatient, 'check-in')"
+          >
+            <v-icon start>mdi-check-circle</v-icon>
+            Check In
+          </v-btn>
+          <v-btn
+            color="warning"
+            variant="flat"
+            class="mb-2" width="120"   @click="processPatient(currentProcessingPatient, 'terlambat')"
+          >
+            <v-icon start>mdi-clock-alert</v-icon>
+            Terlambat
+          </v-btn>
+          <v-btn
+            color="error"
+            variant="flat"
+            class="mb-2" width="120"   @click="processPatient(currentProcessingPatient, 'pending')"
+          >
+            <v-icon start>mdi-pause-circle</v-icon>
+            Pending
+          </v-btn>
+             <v-btn
+            color="error"
+            variant="flat"
+            width="120"   @click="processPatient(currentProcessingPatient, 'pending')"
+          >
+            <v-icon start>mdi-pause-circle</v-icon>
+            Ubah Klinik
+          </v-btn>
+        </div>
             </div>
           </v-card-text>
         </v-card>
       </v-col>
 
-      <!-- Right Side: Patient Queue Info -->
+      <!-- Right Side: Queue Info and Call Controls -->
       <v-col cols="12" lg="6">
-        <!-- Next Patient Card -->
-        <!-- Quota Info Card -->
-        <v-card class="quota-info-card" elevation="2">
+        <!-- Quota Info and Call Controls Combined Card -->
+        <v-card class="quota-call-card" elevation="2">
           <v-card-text class="pa-4">
-            <div class="text-center">
-              <div class="text-h6 font-weight-medium mb-3">
-                Panggil Antrean Anjungan
-              </div>
-              <v-row class="mb-3">
-                <v-col cols="6" class="text-center">
-                  <div class="text-caption text-grey-darken-1">Kuota</div>
-                  <div class="text-h4 font-weight-bold">150</div>
-                </v-col>
-                <v-col cols="6" class="text-center">
-                  <div class="text-caption text-grey-darken-1">Tersedia</div>
-                  <div class="text-h4 font-weight-bold text-success">
-                    {{ 150 - quotaUsed }}
-                  </div>
-                </v-col>
-              </v-row>
-              <div class="text-body-2 text-grey-darken-1 mb-2">
+            <!-- Header with icon -->
+            <div class="d-flex align-center justify-center mb-3">
+              <v-chip
+                color="success"
+                variant="flat"
+                size="large"
+              >
+                <v-icon start>mdi-account-arrow-right</v-icon>
+                PANGGIL ANTREAN ANJUNGAN
+              </v-chip>
+            </div>
+
+            <!-- Quota Display -->
+            <v-row class="mb-3">
+              <v-col cols="6" class="text-center">
+                <div class="quota-label">Kuota</div>
+                <div class="quota-number">150</div>
+              </v-col>
+              <v-col cols="6" class="text-center">
+                <div class="quota-label">Tersedia</div>
+                <div class="quota-number quota-available">
+                  {{ 150 - quotaUsed }}
+                </div>
+              </v-col>
+            </v-row>
+
+            <!-- Progress Bar -->
+            <div class="text-center mb-3">
+              <div class="quota-used-text">
                 Total Quota Terpakai: {{ quotaUsed }}
               </div>
               <v-progress-linear
                 :model-value="(quotaUsed / 150) * 100"
                 color="success"
-                height="8"
+                height="6"
                 rounded
+                class="mt-2"
               ></v-progress-linear>
             </div>
+
+            <!-- Divider -->
+            <v-divider class="my-3"></v-divider>
+
+            <!-- Call Controls -->
+            <div class="call-controls">
+              <div class="call-label mb-2">Kumulatif Panggil Antrean</div>
+              <div class="call-buttons">
+                <v-btn
+                  color="success"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callMultiplePatients(1)"
+                  :disabled="!nextPatient"
+                >
+                  <span class="call-btn-text">1</span>
+                </v-btn>
+                <v-btn
+                  color="info"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callMultiplePatients(5)"
+                >
+                  <span class="call-btn-text">5</span>
+                </v-btn>
+                <v-btn
+                  color="warning"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callMultiplePatients(10)"
+                >
+                  <span class="call-btn-text">10</span>
+                </v-btn>
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callMultiplePatients(20)"
+                >
+                  <span class="call-btn-text">20</span>
+                </v-btn>
+              </div>
+            </div>
           </v-card-text>
         </v-card>
-                      <v-card-text class="call-controls-card align-center py-4">
-               <div class="text-subtitle-1 font-weight-medium"
-                    >Panggil Pasien:</div>
-                <div class="d-flex align-center flex-wrap mb-3">
-                  <v-btn
-                    color="success"
-                    variant="flat"
-                    size="large"
-                    class="px-6 ma-4"
-                    @click="callMultiplePatients(1)"
-                  >
-                    <span class="text-h6 font-weight-bold">1</span>
-                  </v-btn>
-                  <v-btn
-                    color="info"
-                    variant="flat"
-                    size="large"
-                    class="px-6 ma-4"
-                    @click="callMultiplePatients(5)"
-                  >
-                    <span class="text-h6 font-weight-bold">5</span>
-                  </v-btn>
-                  <v-btn
-                    color="warning"
-                    variant="flat"
-                    size="large"
-                    class="px-6 ma-4"
-                    @click="callMultiplePatients(10)"
-                  >
-                    <span class="text-h6 font-weight-bold">10</span>
-                  </v-btn>
-                  <v-btn
-                    color="error"
-                    variant="flat"
-                    size="large"
-                    class="px-6 ma-4"
-                    @click="callMultiplePatients(20)"
-                  >
-                    <span class="text-h6 font-weight-bold">20</span>
-                  </v-btn>
-                </div>
-              </v-card-text>
       </v-col>
     </v-row>
 
@@ -312,7 +329,7 @@ const allPatients = ref([
     klinik: "KANDUNGAN",
     fastTrack: "UMUM",
     pembayaran: "UMUM",
-    status: "waiting", // waiting, di-loket, terlambat, pending, processed
+    status: "waiting",
   },
   {
     no: 2,
@@ -349,9 +366,15 @@ const allPatients = ref([
   },
   ...Array.from({ length: 16 }, (_, i) => ({
     no: i + 5,
-    jamPanggil: `${String(Math.floor(Math.random() * 12) + 1).padStart(2, "0")}:${String(Math.floor(Math.random() * 60)).padStart(2, "0")}`,
+    jamPanggil: `${String(Math.floor(Math.random() * 12) + 1).padStart(
+      2,
+      "0"
+    )}:${String(Math.floor(Math.random() * 60)).padStart(2, "0")}`,
     barcode: `25081110${String(i + 300).padStart(4, "0")}`,
-    noAntrian: `UM100${i + 5} | Online - 25081110${String(i + 300).padStart(4, "0")}`,
+    noAntrian: `UM100${i + 5} | Online - 25081110${String(i + 300).padStart(
+      4,
+      "0"
+    )}`,
     shift: "Shift 1",
     klinik: ["KANDUNGAN", "IPD", "THT", "SARAF"][Math.floor(Math.random() * 4)],
     fastTrack: "UMUM",
@@ -430,13 +453,11 @@ const callMultiplePatients = (count) => {
     return;
   }
 
-  // Check quota
   if (quotaUsed.value + patientsToCall.length > 150) {
     showSnackbar("Quota tidak mencukupi", "error");
     return;
   }
 
-  // Move patients to "di-loket" status
   patientsToCall.forEach((patient) => {
     patient.status = "di-loket";
   });
@@ -456,7 +477,6 @@ const callNext = () => {
     return;
   }
 
-  // Move next patient to processing
   nextPatient.value.status = "di-loket";
   currentProcessingPatient.value = nextPatient.value;
   quotaUsed.value++;
@@ -570,10 +590,8 @@ const getRowClass = (item) => {
   align-items: center;
 }
 
-.call-controls-card,
-.next-patient-card,
 .current-processing-card,
-.quota-info-card,
+.quota-call-card,
 .main-table-card,
 .late-table-card,
 .pending-table-card {
@@ -581,18 +599,13 @@ const getRowClass = (item) => {
   border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-.next-patient-card {
-  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-  border: 2px solid rgba(76, 175, 80, 0.2);
-}
-
 .current-processing-card {
   background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
   border: 2px solid rgba(255, 152, 0, 0.2);
 }
 
-.quota-info-card {
-  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+.quota-call-card {
+  background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%);
   border: 2px solid rgba(33, 150, 243, 0.2);
 }
 
@@ -605,6 +618,61 @@ const getRowClass = (item) => {
   align-items: center;
 }
 
+/* Quota Display Styling */
+.quota-label {
+  font-size: 13px;
+  color: #6b7280;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.quota-number {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1f2937;
+  line-height: 1;
+}
+
+.quota-available {
+  color: #4caf50;
+}
+
+.quota-used-text {
+  font-size: 13px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+/* Call Controls Styling */
+.call-controls {
+  text-align: center;
+}
+
+.call-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  text-align: center;
+}
+
+.call-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.call-btn {
+  min-width: 80px;
+  height: 48px;
+  border-radius: 8px;
+}
+
+.call-btn-text {
+  font-size: 18px;
+  font-weight: 700;
+}
+
 /* Enhanced table styling */
 .main-table-card :deep(.v-data-table th),
 .late-table-card :deep(.v-data-table th),
@@ -679,9 +747,13 @@ const getRowClass = (item) => {
     min-width: 120px;
   }
 
-  /* Stack layout vertically on medium screens */
-  .call-controls-card .d-flex {
-    justify-content: center;
+  .call-buttons {
+    gap: 8px;
+  }
+
+  .call-btn {
+    min-width: 70px;
+    height: 44px;
   }
 }
 
@@ -702,25 +774,19 @@ const getRowClass = (item) => {
     padding: 12px;
   }
 
-  .call-controls-card .d-flex {
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
+  .call-buttons {
+    flex-direction: row;
+    gap: 8px;
   }
 
-  .call-controls-card .v-btn {
-    min-width: 80px;
+  .call-btn {
+    flex: 1;
+    min-width: 60px;
+    height: 42px;
   }
 
-  /* Stack all control buttons vertically on mobile */
-  .call-controls-card .d-flex.flex-wrap {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .call-controls-card .v-btn {
-    width: 100%;
-    margin: 4px 0;
+  .call-btn-text {
+    font-size: 16px;
   }
 
   .action-buttons {
@@ -732,6 +798,10 @@ const getRowClass = (item) => {
     width: 100%;
     margin: 4px 0;
   }
+
+  .quota-number {
+    font-size: 28px;
+  }
 }
 
 @media (max-width: 600px) {
@@ -739,16 +809,25 @@ const getRowClass = (item) => {
     font-size: 20px;
   }
 
-  .next-patient-card .text-h4 {
-    font-size: 1.75rem !important;
-  }
-
   .current-processing-card .patient-info .text-h5 {
     font-size: 1.25rem !important;
   }
 
-  .quota-info-card .text-h4 {
-    font-size: 1.5rem !important;
+  .quota-number {
+    font-size: 24px;
+  }
+
+  .call-buttons {
+    flex-wrap: wrap;
+  }
+
+  .call-btn {
+    min-width: calc(50% - 8px);
+    height: 40px;
+  }
+
+  .call-btn-text {
+    font-size: 14px;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/Fast-Track.vue b/pages/FastTrack.txt
similarity index 100%
rename from pages/Fast-Track.vue
rename to pages/FastTrack.txt
diff --git a/pages/LoketAdmin1.vue b/pages/LoketAdmin1.text
similarity index 100%
rename from pages/LoketAdmin1.vue
rename to pages/LoketAdmin1.text
diff --git a/pages/Setting/Master-Klinik.txt b/pages/Setting/Master-Klinik.txt
new file mode 100644
index 0000000..0d02d36
--- /dev/null
+++ b/pages/Setting/Master-Klinik.txt
@@ -0,0 +1,491 @@
+<template>
+  <div class="master-klinik-page pa-4">
+    <!-- Breadcrumbs -->
+    <v-breadcrumbs :items="breadcrumbs" class="pl-0">
+      <template v-slot:divider>
+        <v-icon icon="mdi-chevron-right"></v-icon>
+      </template>
+    </v-breadcrumbs>
+
+    <!-- Tampilan Formulir Tambah/Edit/View -->
+    <v-card v-if="showForm" class="pa-4 rounded-lg elevation-2">
+      <v-card-title class="text-h5 font-weight-bold mb-4">
+        {{ isEditMode ? 'Edit Klinik' : readOnly ? 'Detail Klinik' : 'Tambah Klinik' }}
+      </v-card-title>
+      <v-card-text>
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-label class="font-weight-bold">Kode</v-label>
+            <v-text-field
+              v-model="editedItem.kode"
+              placeholder="Masukkan Kode Klinik"
+              variant="outlined"
+              density="comfortable"
+              class="mb-2"
+              :readonly="readOnly"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-label class="font-weight-bold">Nama</v-label>
+            <v-text-field
+              v-model="editedItem.namaKlinik"
+              placeholder="Masukkan Nama Klinik"
+              variant="outlined"
+              density="comfortable"
+              class="mb-2"
+              :readonly="readOnly"
+            ></v-text-field>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-label class="font-weight-bold">Shift</v-label>
+            <v-text-field
+              v-model="editedItem.shift"
+              placeholder="Jumlah Shift"
+              type="number"
+              variant="outlined"
+              density="comfortable"
+              class="mb-2"
+              :readonly="readOnly"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-label class="font-weight-bold">Kuota Shift</v-label>
+            <v-text-field
+              v-model="editedItem.kuotaShift"
+              placeholder="Kuota Per Shift"
+              type="number"
+              variant="outlined"
+              density="comfortable"
+              class="mb-2"
+              :readonly="readOnly"
+            ></v-text-field>
+          </v-col>
+        </v-row>
+
+        <v-row class="d-flex align-center">
+          <v-col cols="12" md="6">
+            <v-label class="font-weight-bold">Jam Buka Shift</v-label>
+            <div class="d-flex align-center">
+              <v-text-field
+                v-model="editedItem.jamBuka"
+                placeholder="Jam Buka Shift 1"
+                variant="outlined"
+                density="comfortable"
+                class="mr-2"
+                :readonly="readOnly"
+              ></v-text-field>
+              <span class="text-h6 font-weight-bold mr-2">:</span>
+              <v-text-field
+                v-model="editedItem.menitBuka"
+                placeholder="Menit Buka Shift 1"
+                variant="outlined"
+                density="comfortable"
+                :readonly="readOnly"
+              ></v-text-field>
+            </div>
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-switch
+              v-model="editedItem.autoShift"
+              inset
+              color="primary"
+              label="Auto Shift"
+              hide-details
+              :readonly="readOnly"
+            ></v-switch>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12">
+            <v-label class="font-weight-bold">Kuota Bangku</v-label>
+            <v-text-field
+              v-model="editedItem.kuotaBangku"
+              placeholder="Masukkan Kuota Bangku Klinik"
+              type="number"
+              variant="outlined"
+              density="comfortable"
+              class="mb-2"
+              :readonly="readOnly"
+            ></v-text-field>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12">
+            <v-label class="font-weight-bold">Jadwal Klinik</v-label>
+            <v-table class="rounded-lg elevation-1 mt-2">
+              <thead>
+                <tr>
+                  <th class="text-left text-uppercase font-weight-bold">#</th>
+                  <th class="text-left text-uppercase font-weight-bold">Hari</th>
+                  <th class="text-left text-uppercase font-weight-bold">Pilih</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(day, index) in days" :key="index">
+                  <td>{{ index + 1 }}</td>
+                  <td>{{ day.name }}</td>
+                  <td>
+                    <v-checkbox
+                      v-model="day.selected"
+                      color="primary"
+                      hide-details
+                      :readonly="readOnly"
+                    ></v-checkbox>
+                  </td>
+                </tr>
+              </tbody>
+            </v-table>
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-card-actions class="d-flex justify-start pa-4">
+        <v-btn
+          color="grey-darken-1"
+          variant="flat"
+          class="text-capitalize rounded-lg mr-2"
+          @click="cancelForm"
+        >
+          {{ readOnly ? 'Tutup' : 'Batal' }}
+        </v-btn>
+        <v-btn
+          v-if="!readOnly"
+          color="orange-darken-2"
+          variant="flat"
+          class="text-capitalize rounded-lg"
+          @click="saveItem"
+        >
+          Submit
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+
+    <!-- Tampilan Tabel Data -->
+    <div v-else>
+      <!-- Banner biru sebagai pengganti header h1 -->
+      <v-card class="d-flex justify-space-between align-center pa-4 mb-4 rounded-lg bg-blue-darken-2 text-white elevation-2">
+        <v-card-title class="d-flex align-center text-h5 font-weight-bold pa-0">
+          <v-icon icon="mdi-hospital" class="mr-2" size="40"></v-icon>
+          <span>Master Klinik</span>
+        </v-card-title>
+        <v-btn
+          color="success"
+          prepend-icon="mdi-plus"
+          rounded
+          class="text-capitalize"
+          @click="showForm = true"
+        >
+          Tambah Baru
+        </v-btn>
+      </v-card>
+
+      <v-card class="pa-4 rounded-lg elevation-2">
+        <v-card-text>
+          <!-- Table controls -->
+          <div class="d-flex flex-wrap align-center justify-space-between mb-4">
+            <div class="d-flex align-center">
+              <span class="mr-2 text-subtitle-1">Show</span>
+              <v-select
+                v-model="itemsPerPage"
+                :items="[10, 25, 50]"
+                variant="outlined"
+                density="compact"
+                hide-details
+                style="max-width: 80px;"
+                rounded
+                class="mr-2"
+              ></v-select>
+              <span class="text-subtitle-1">entries</span>
+            </div>
+            <div class="d-flex align-center">
+              <v-text-field
+                v-model="search"
+                prepend-inner-icon="mdi-magnify"
+                label="Search"
+                variant="outlined"
+                density="compact"
+                hide-details
+                rounded
+                clearable
+              ></v-text-field>
+            </div>
+          </div>
+
+          <!-- Data Table dengan paginasi kustom -->
+          <v-data-table
+            :headers="headers"
+            :items="allKlinikData"
+            :search="search"
+            :items-per-page="itemsPerPage"
+            v-model:page="page"
+            class="rounded-lg elevation-0 custom-table"
+          >
+            <!-- Slot untuk aksi di setiap baris -->
+            <template v-slot:[`item.actions`]="{ item }">
+              <!-- Tombol "View" yang hanya menampilkan detail -->
+              <v-btn icon color="blue" size="small" class="mr-2" @click="viewItem(item)">
+                <v-icon>mdi-eye</v-icon>
+              </v-btn>
+              <v-btn icon color="orange" size="small" class="mr-2" @click="editItem(item)">
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+              <v-btn icon color="red" size="small" @click="deleteItem(item)">
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+            </template>
+            
+            <template v-slot:no-data>
+              <v-alert :value="true" color="grey-lighten-3" icon="mdi-information">
+                Tidak ada data yang tersedia.
+              </v-alert>
+            </template>
+
+            <!-- Slot kustom untuk footer tabel (paginasi) -->
+            <template v-slot:bottom>
+              <v-row class="ma-2">
+                <v-col cols="12" sm="6" class="d-flex align-center justify-start text-caption text-grey">
+                  {{ showingEntriesText }}
+                </v-col>
+                <v-col cols="12" sm="6" class="d-flex align-center justify-end">
+                  <v-pagination
+                    v-model="page"
+                    :length="pageCount"
+                    rounded="circle"
+                    :total-visible="5"
+                  ></v-pagination>
+                </v-col>
+              </v-row>
+            </template>
+          </v-data-table>
+        </v-card-text>
+      </v-card>
+    </div>
+  </div>
+
+  <!-- Delete Dialog -->
+  <v-dialog v-model="showDeleteDialog" max-width="400px">
+    <v-card class="pa-4 rounded-lg">
+      <v-card-title class="text-h6 font-weight-bold">Hapus Data</v-card-title>
+      <v-card-text>Apakah Anda yakin ingin menghapus data ini?</v-card-text>
+      <v-card-actions class="d-flex justify-end">
+        <v-btn color="grey-darken-1" variant="text" @click="closeDeleteDialog">Batal</v-btn>
+        <v-btn color="red" variant="text" @click="confirmDelete">Hapus</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+definePageMeta({
+  middleware:['auth']
+})
+
+// State untuk menampilkan/menyembunyikan formulir
+const showForm = ref(false);
+const readOnly = ref(false); // State untuk mode "view"
+
+// Data dummy untuk Master Klinik
+const allKlinikData = ref([
+  { id: 1, kode: 'AN', namaKlinik: 'ANAK', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 2, kode: 'AS', namaKlinik: 'ANESTESI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 3, kode: 'BD', namaKlinik: 'BEDAH', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 4, kode: 'GR', namaKlinik: 'GERIATRI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 5, kode: 'GI', namaKlinik: 'GIGI DAN MULUT', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 6, kode: 'GZ', namaKlinik: 'GIZI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 7, kode: 'HO', namaKlinik: 'HOM', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 8, kode: 'IP', namaKlinik: 'IPD', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 9, kode: 'JT', namaKlinik: 'JANTUNG', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 10, kode: 'JW', namaKlinik: 'JIWA', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 11, kode: 'OB', namaKlinik: 'KANDUNGAN', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 12, kode: 'KT', namaKlinik: 'KEMOTERAPI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 13, kode: 'KN', namaKlinik: 'KOMPLEMENTER', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 14, kode: 'KL', namaKlinik: 'KUL KEL', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 15, kode: 'MT', namaKlinik: 'MATA', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 16, kode: 'MC', namaKlinik: 'MCU', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 17, kode: 'ON', namaKlinik: 'ONKOLOGI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 18, kode: 'PR', namaKlinik: 'PARU', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 19, kode: 'RT', namaKlinik: 'R. TINDAKAN', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 20, kode: 'RD', namaKlinik: 'RADIOTERAPI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 21, kode: 'RM', namaKlinik: 'REHAB MEDIK', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 22, kode: 'NU', namaKlinik: 'SARAF', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+  { id: 23, kode: 'TH', namaKlinik: 'THT', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
+]);
+
+const headers = ref([
+  { title: 'No', key: 'id' },
+  { title: 'Kode', key: 'kode', sortable: true },
+  { title: 'Nama Klinik', key: 'namaKlinik', sortable: true },
+  { title: 'Shift', key: 'shift', sortable: true },
+  { title: 'Kuota Shift', key: 'kuotaShift', sortable: true },
+  { title: 'Aksi', key: 'actions', sortable: false },
+]);
+
+// Breadcrumbs
+const breadcrumbs = ref([
+  { title: 'Dashboard', disabled: false, href: '/dashboard' },
+  { title: 'Setting', disabled: false, href: '/setting' },
+  { title: 'Master Klinik', disabled: false, href: '/setting/masterklinik' },
+]);
+
+const days = ref([
+  { name: 'Senin', selected: false },
+  { name: 'Selasa', selected: false },
+  { name: 'Rabu', selected: false },
+  { name: 'Kamis', selected: false },
+  { name: 'Jum`at', selected: false },
+]);
+
+// State untuk tabel dan paginasi
+const itemsPerPage = ref(10);
+const search = ref('');
+const page = ref(1);
+
+// Computed properties untuk paginasi kustom
+const pageCount = computed(() => {
+  return Math.ceil(allKlinikData.value.length / itemsPerPage.value);
+});
+
+const showingEntriesText = computed(() => {
+  const start = (page.value - 1) * itemsPerPage.value + 1;
+  const end = Math.min(page.value * itemsPerPage.value, allKlinikData.value.length);
+  const total = allKlinikData.value.length;
+  return `Showing ${start} to ${end} of ${total} entries`;
+});
+
+// State untuk dialog
+const showDeleteDialog = ref(false);
+const isEditMode = ref(false);
+const editedIndex = ref(-1);
+const editedItem = ref({
+  id: 0,
+  kode: '',
+  namaKlinik: '',
+  shift: 1,
+  kuotaShift: 0,
+  kuotaBangku: 0,
+  jamBuka: '',
+  menitBuka: '',
+  autoShift: false,
+});
+
+
+// Fungsi untuk tombol aksi
+// Fungsi untuk tombol View yang hanya menampilkan data tanpa bisa diedit
+const viewItem = (item) => {
+  editedItem.value = { ...item };
+  readOnly.value = true;
+  isEditMode.value = false;
+  showForm.value = true;
+  // Update breadcrumbs untuk mode view
+  breadcrumbs.value = [
+    { title: 'Dashboard', disabled: false, href: '/dashboard' },
+    { title: 'Setting', disabled: false, href: '/setting' },
+    { title: 'Master Klinik', disabled: false, href: '/setting/masterklinik' },
+    { title: 'Detail Klinik', disabled: true, href: '/setting/viewklinik' },
+  ];
+};
+
+const editItem = (item) => {
+  editedIndex.value = allKlinikData.value.findIndex(d => d.id === item.id);
+  editedItem.value = { ...item };
+  isEditMode.value = true;
+  readOnly.value = false;
+  showForm.value = true;
+  // Update breadcrumbs untuk mode edit
+  breadcrumbs.value = [
+    { title: 'Dashboard', disabled: false, href: '/dashboard' },
+    { title: 'Setting', disabled: false, href: '/setting' },
+    { title: 'Master Klinik', disabled: false, href: '/setting/masterklinik' },
+    { title: 'Edit Klinik', disabled: true, href: '/setting/editklinik' },
+  ];
+};
+
+const deleteItem = (item) => {
+  editedIndex.value = allKlinikData.value.findIndex(d => d.id === item.id);
+  showDeleteDialog.value = true;
+};
+
+const confirmDelete = () => {
+  if (editedIndex.value > -1) {
+    allKlinikData.value.splice(editedIndex.value, 1);
+  }
+  closeDeleteDialog();
+};
+
+const cancelForm = () => {
+  showForm.value = false;
+  isEditMode.value = false;
+  readOnly.value = false;
+  editedItem.value = {
+    id: 0,
+    kode: '',
+    namaKlinik: '',
+    shift: 1,
+    kuotaShift: 0,
+    kuotaBangku: 0,
+    jamBuka: '',
+    menitBuka: '',
+    autoShift: false,
+  };
+  editedIndex.value = -1;
+  // Reset breadcrumbs ke mode tabel
+  breadcrumbs.value = [
+    { title: 'Dashboard', disabled: false, href: '/dashboard' },
+    { title: 'Setting', disabled: false, href: '/setting' },
+    { title: 'Master Klinik', disabled: false, href: '/setting/masterklinik' },
+  ];
+};
+
+const closeDeleteDialog = () => {
+  showDeleteDialog.value = false;
+  editedIndex.value = -1;
+};
+
+const saveItem = () => {
+  if (isEditMode.value) {
+    Object.assign(allKlinikData.value[editedIndex.value], editedItem.value);
+  } else {
+    // Generate new ID
+    const newId = allKlinikData.value.length > 0 ? Math.max(...allKlinikData.value.map(item => item.id)) + 1 : 1;
+    editedItem.value.id = newId;
+    allKlinikData.value.push(editedItem.value);
+  }
+  cancelForm(); // Kembali ke tampilan tabel setelah menyimpan
+};
+</script>
+
+<style scoped>
+.master-klinik-page {
+  font-family: 'Roboto', sans-serif;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+}
+
+.custom-table {
+  border: none;
+}
+
+.v-data-table :deep(th) {
+  font-weight: bold !important;
+  color: #333 !important;
+}
+
+.v-data-table :deep(td) {
+  vertical-align: middle;
+}
+
+.v-btn--icon {
+  border-radius: 8px;
+}
+
+.v-select :deep(.v-field__input) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+</style>
diff --git a/pages/Setting/Master-KlinikRuang.txt b/pages/Setting/Master-KlinikRuang.txt
new file mode 100644
index 0000000..b96d569
--- /dev/null
+++ b/pages/Setting/Master-KlinikRuang.txt
@@ -0,0 +1,376 @@
+<template>
+  <div class="master-klinik-ruang-page pa-4">
+    <!-- Breadcrumbs -->
+    <v-breadcrumbs :items="breadcrumbs" class="pl-0">
+      <template v-slot:divider>
+        <v-icon icon="mdi-chevron-right"></v-icon>
+      </template>
+    </v-breadcrumbs>
+
+    <!-- Tampilan Formulir Tambah/Edit/View -->
+    <v-card v-if="showForm" class="pa-4 rounded-lg elevation-2">
+      <v-card-title class="text-h5 font-weight-bold mb-4">
+        {{ isEditMode ? 'Edit Ruang Klinik' : readOnly ? 'Detail Ruang Klinik' : 'Tambah Ruang Klinik' }}
+      </v-card-title>
+      <v-card-text>
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-label class="font-weight-bold">Nama Klinik</v-label>
+            <v-select
+              v-model="editedItem.namaKlinik"
+              :items="['ANAK', 'ANESTESI', 'BEDAH', 'GERIATRI', 'GIGI DAN MULUT', 'GIZI', 'HOM', 'IPD', 'JANTUNG', 'JIWA', 'KANDUNGAN', 'KEMOTERAPI', 'KOMPLEMENTER', 'KUL KEL', 'MATA', 'MCU', 'ONKOLOGI', 'PARU', 'R. TINDAKAN', 'RADIOTERAPI', 'REHAB MEDIK', 'SARAF', 'THT']"
+              placeholder="Pilih Nama Klinik"
+              variant="outlined"
+              density="comfortable"
+              class="mb-2"
+              :readonly="readOnly"
+            ></v-select>
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-label class="font-weight-bold">Kode Ruang</v-label>
+            <v-text-field
+              v-model="editedItem.kode"
+              placeholder="Masukkan Kode Ruang"
+              variant="outlined"
+              density="comfortable"
+              class="mb-2"
+              :readonly="readOnly"
+            ></v-text-field>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12">
+            <v-label class="font-weight-bold">Nama Ruang</v-label>
+            <v-text-field
+              v-model="editedItem.namaRuang"
+              placeholder="Masukkan Nama Ruang"
+              variant="outlined"
+              density="comfortable"
+              class="mb-2"
+              :readonly="readOnly"
+            ></v-text-field>
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-card-actions class="d-flex justify-start pa-4">
+        <v-btn
+          color="grey-darken-1"
+          variant="flat"
+          class="text-capitalize rounded-lg mr-2"
+          @click="cancelForm"
+        >
+          {{ readOnly ? 'Tutup' : 'Batal' }}
+        </v-btn>
+        <v-btn
+          v-if="!readOnly"
+          color="orange-darken-2"
+          variant="flat"
+          class="text-capitalize rounded-lg"
+          @click="saveItem"
+        >
+          Submit
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+
+    <!-- Tampilan Tabel Data -->
+    <div v-else>
+      <!-- Banner biru sebagai pengganti header h1 -->
+      <v-card class="d-flex justify-space-between align-center pa-4 mb-4 rounded-lg bg-blue-darken-2 text-white elevation-2">
+        <v-card-title class="d-flex align-center text-h5 font-weight-bold pa-0">
+          <v-icon icon="mdi-hospital-box-outline" class="mr-2" size="40"></v-icon>
+          <span>Master Klinik Ruang</span>
+        </v-card-title>
+        <v-btn
+          color="success"
+          prepend-icon="mdi-plus"
+          rounded
+          class="text-capitalize"
+          @click="showForm = true"
+        >
+          Tambah Baru
+        </v-btn>
+      </v-card>
+
+      <v-card class="pa-4 rounded-lg elevation-2">
+        <v-card-text>
+          <!-- Table controls -->
+          <div class="d-flex flex-wrap align-center justify-space-between mb-4">
+            <div class="d-flex align-center">
+              <span class="mr-2 text-subtitle-1">Show</span>
+              <v-select
+                v-model="itemsPerPage"
+                :items="[10, 25, 50]"
+                variant="outlined"
+                density="compact"
+                hide-details
+                style="max-width: 80px;"
+                rounded
+                class="mr-2"
+              ></v-select>
+              <span class="text-subtitle-1">entries</span>
+            </div>
+            <div class="d-flex align-center">
+              <v-text-field
+                v-model="search"
+                prepend-inner-icon="mdi-magnify"
+                label="Search"
+                variant="outlined"
+                density="compact"
+                hide-details
+                rounded
+                clearable
+              ></v-text-field>
+            </div>
+          </div>
+
+          <!-- Data Table dengan paginasi kustom -->
+          <v-data-table
+            :headers="headers"
+            :items="allRuangData"
+            :search="search"
+            :items-per-page="itemsPerPage"
+            v-model:page="page"
+            class="rounded-lg elevation-0 custom-table"
+          >
+            <!-- Slot untuk aksi di setiap baris -->
+            <template v-slot:[`item.actions`]="{ item }">
+              <v-btn icon color="blue" size="small" class="mr-2" @click="viewItem(item)">
+                <v-icon>mdi-eye</v-icon>
+              </v-btn>
+              <v-btn icon color="orange" size="small" class="mr-2" @click="editItem(item)">
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+              <v-btn icon color="red" size="small" @click="deleteItem(item)">
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+            </template>
+            
+            <template v-slot:no-data>
+              <v-alert :value="true" color="grey-lighten-3" icon="mdi-information">
+                Tidak ada data yang tersedia.
+              </v-alert>
+            </template>
+
+            <!-- Slot kustom untuk footer tabel (paginasi) -->
+            <template v-slot:bottom>
+              <v-row class="ma-2">
+                <v-col cols="12" sm="6" class="d-flex align-center justify-start text-caption text-grey">
+                  {{ showingEntriesText }}
+                </v-col>
+                <v-col cols="12" sm="6" class="d-flex align-center justify-end">
+                  <v-pagination
+                    v-model="page"
+                    :length="pageCount"
+                    rounded="circle"
+                    :total-visible="5"
+                  ></v-pagination>
+                </v-col>
+              </v-row>
+            </template>
+          </v-data-table>
+        </v-card-text>
+      </v-card>
+    </div>
+  </div>
+
+  <!-- Delete Dialog -->
+  <v-dialog v-model="showDeleteDialog" max-width="400px">
+    <v-card class="pa-4 rounded-lg">
+      <v-card-title class="text-h6 font-weight-bold">Hapus Data</v-card-title>
+      <v-card-text>Apakah Anda yakin ingin menghapus data ini?</v-card-text>
+      <v-card-actions class="d-flex justify-end">
+        <v-btn color="grey-darken-1" variant="text" @click="closeDeleteDialog">Batal</v-btn>
+        <v-btn color="red" variant="text" @click="confirmDelete">Hapus</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+definePageMeta({
+  middleware:['auth']
+})
+
+// State untuk menampilkan/menyembunyikan formulir
+const showForm = ref(false);
+const readOnly = ref(false);
+
+// Data dummy untuk Master Klinik Ruang
+const allRuangData = ref([
+  { id: 1, namaKlinik: 'ANAK', kode: 'AN-01', namaRuang: 'RUANG ANAK 1' },
+  { id: 2, namaKlinik: 'ANAK', kode: 'AN-02', namaRuang: 'RUANG ANAK 2' },
+  { id: 3, namaKlinik: 'ANESTESI', kode: 'AS-01', namaRuang: 'RUANG ANESTESI 1' },
+  { id: 4, namaKlinik: 'BEDAH', kode: 'BD-01', namaRuang: 'RUANG BEDAH 1' },
+  { id: 5, namaKlinik: 'GIGI DAN MULUT', kode: 'GI-01', namaRuang: 'RUANG GIGI DAN MULUT 1' },
+  { id: 6, namaKlinik: 'GERIATRI', kode: 'GR-01', namaRuang: 'RUANG GERIATRI 1' },
+  { id: 7, namaKlinik: 'GIZI', kode: 'GZ-01', namaRuang: 'RUANG GIZI 1' },
+  { id: 8, namaKlinik: 'HOM', kode: 'HO-01', namaRuang: 'RUANG HOM 1' },
+  { id: 9, namaKlinik: 'IPD', kode: 'IP-01', namaRuang: 'RUANG IPD 1' },
+  { id: 10, namaKlinik: 'JANTUNG', kode: 'JT-01', namaRuang: 'RUANG JANTUNG 1' },
+  { id: 11, namaKlinik: 'JIWA', kode: 'JW-01', namaRuang: 'RUANG JIWA 1' },
+  { id: 12, namaKlinik: 'KANDUNGAN', kode: 'OB-01', namaRuang: 'RUANG KANDUNGAN 1' },
+  { id: 13, namaKlinik: 'KANDUNGAN', kode: 'OB-02', namaRuang: 'RUANG KANDUNGAN 2' },
+  { id: 14, namaKlinik: 'KEMOTERAPI', kode: 'KT-01', namaRuang: 'RUANG KEMOTERAPI 1' },
+  { id: 15, namaKlinik: 'KOMPLEMENTER', kode: 'KN-01', namaRuang: 'RUANG KOMPLEMENTER 1' },
+  { id: 16, namaKlinik: 'KUL KEL', kode: 'KL-01', namaRuang: 'RUANG KUL KEL 1' },
+  { id: 17, namaKlinik: 'MATA', kode: 'MT-01', namaRuang: 'RUANG MATA 1' },
+  { id: 18, namaKlinik: 'MCU', kode: 'MC-01', namaRuang: 'RUANG MCU 1' },
+  { id: 19, namaKlinik: 'ONKOLOGI', kode: 'ON-01', namaRuang: 'RUANG ONKOLOGI 1' },
+  { id: 20, namaKlinik: 'PARU', kode: 'PR-01', namaRuang: 'RUANG PARU 1' },
+  { id: 21, namaKlinik: 'R. TINDAKAN', kode: 'RT-01', namaRuang: 'RUANG R. TINDAKAN 1' },
+  { id: 22, namaKlinik: 'RADIOTERAPI', kode: 'RD-01', namaRuang: 'RUANG RADIOTERAPI 1' },
+  { id: 23, namaKlinik: 'REHAB MEDIK', kode: 'RM-01', namaRuang: 'RUANG REHAB MEDIK 1' },
+  { id: 24, namaKlinik: 'SARAF', kode: 'NU-01', namaRuang: 'RUANG SARAF 1' },
+  { id: 25, namaKlinik: 'THT', kode: 'TH-01', namaRuang: 'RUANG THT 1' },
+]);
+
+const headers = ref([
+  { title: 'No', key: 'id' },
+  { title: 'Nama Klinik', key: 'namaKlinik', sortable: true },
+  { title: 'Kode Ruang', key: 'kode', sortable: true },
+  { title: 'Nama Ruang', key: 'namaRuang', sortable: true },
+  { title: 'Aksi', key: 'actions', sortable: false },
+]);
+
+// Breadcrumbs
+const breadcrumbs = ref([
+  { title: 'Dashboard', disabled: false, href: '/dashboard' },
+  { title: 'Setting', disabled: false, href: '/setting' },
+  { title: 'Master Klinik Ruang', disabled: false, href: '/setting/masterklinikruang' },
+]);
+
+// State untuk tabel dan paginasi
+const itemsPerPage = ref(10);
+const search = ref('');
+const page = ref(1);
+
+// Computed properties untuk paginasi kustom
+const pageCount = computed(() => {
+  return Math.ceil(allRuangData.value.length / itemsPerPage.value);
+});
+
+const showingEntriesText = computed(() => {
+  const start = (page.value - 1) * itemsPerPage.value + 1;
+  const end = Math.min(page.value * itemsPerPage.value, allRuangData.value.length);
+  const total = allRuangData.value.length;
+  return `Showing ${start} to ${end} of ${total} entries`;
+});
+
+// State untuk dialog
+const showDeleteDialog = ref(false);
+const isEditMode = ref(false);
+const editedIndex = ref(-1);
+const editedItem = ref({
+  id: 0,
+  namaKlinik: '',
+  kode: '',
+  namaRuang: '',
+});
+
+// Fungsi untuk tombol aksi
+const viewItem = (item) => {
+  editedItem.value = { ...item };
+  readOnly.value = true;
+  isEditMode.value = false;
+  showForm.value = true;
+  breadcrumbs.value = [
+    { title: 'Dashboard', disabled: false, href: '/dashboard' },
+    { title: 'Setting', disabled: false, href: '/setting' },
+    { title: 'Master Klinik Ruang', disabled: false, href: '/setting/masterklinikruang' },
+    { title: 'Detail Ruang Klinik', disabled: true, href: '/setting/viewruang' },
+  ];
+};
+
+const editItem = (item) => {
+  editedIndex.value = allRuangData.value.findIndex(d => d.id === item.id);
+  editedItem.value = { ...item };
+  isEditMode.value = true;
+  readOnly.value = false;
+  showForm.value = true;
+  breadcrumbs.value = [
+    { title: 'Dashboard', disabled: false, href: '/dashboard' },
+    { title: 'Setting', disabled: false, href: '/setting' },
+    { title: 'Master Klinik Ruang', disabled: false, href: '/setting/masterklinikruang' },
+    { title: 'Edit Ruang Klinik', disabled: true, href: '/setting/editruang' },
+  ];
+};
+
+const deleteItem = (item) => {
+  editedIndex.value = allRuangData.value.findIndex(d => d.id === item.id);
+  showDeleteDialog.value = true;
+};
+
+const confirmDelete = () => {
+  if (editedIndex.value > -1) {
+    allRuangData.value.splice(editedIndex.value, 1);
+  }
+  closeDeleteDialog();
+};
+
+const cancelForm = () => {
+  showForm.value = false;
+  isEditMode.value = false;
+  readOnly.value = false;
+  editedItem.value = {
+    id: 0,
+    namaKlinik: '',
+    kode: '',
+    namaRuang: '',
+  };
+  editedIndex.value = -1;
+  breadcrumbs.value = [
+    { title: 'Dashboard', disabled: false, href: '/dashboard' },
+    { title: 'Setting', disabled: false, href: '/setting' },
+    { title: 'Master Klinik Ruang', disabled: false, href: '/setting/masterklinikruang' },
+  ];
+};
+
+const closeDeleteDialog = () => {
+  showDeleteDialog.value = false;
+  editedIndex.value = -1;
+};
+
+const saveItem = () => {
+  if (isEditMode.value) {
+    Object.assign(allRuangData.value[editedIndex.value], editedItem.value);
+  } else {
+    const newId = allRuangData.value.length > 0 ? Math.max(...allRuangData.value.map(item => item.id)) + 1 : 1;
+    editedItem.value.id = newId;
+    allRuangData.value.push(editedItem.value);
+  }
+  cancelForm();
+};
+</script>
+
+<style scoped>
+.master-klinik-ruang-page {
+  font-family: 'Roboto', sans-serif;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+}
+
+.custom-table {
+  border: none;
+}
+
+.v-data-table :deep(th) {
+  font-weight: bold !important;
+  color: #333 !important;
+}
+
+.v-data-table :deep(td) {
+  vertical-align: middle;
+}
+
+.v-btn--icon {
+  border-radius: 8px;
+}
+
+.v-select :deep(.v-field__input) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+</style>
diff --git a/pages/Setting/Master-Loket.vue b/pages/Setting/Master-Loket.vue
index e6145c0..51c95cf 100644
--- a/pages/Setting/Master-Loket.vue
+++ b/pages/Setting/Master-Loket.vue
@@ -110,7 +110,7 @@ const deleteLoket = (item) => {
 };
 
 const tambahLoket = () => {
-  router.push({ path: "/Setting/Tambah-Loket" });
+  router.push({ path: "/Setting/TambahLoket" });
 };
 </script>
 <style scoped>
diff --git a/pages/Setting/MasterKlinik.vue b/pages/Setting/MasterKlinik.vue
index 0d02d36..c8cebd0 100644
--- a/pages/Setting/MasterKlinik.vue
+++ b/pages/Setting/MasterKlinik.vue
@@ -1,491 +1,670 @@
 <template>
-  <div class="master-klinik-page pa-4">
-    <!-- Breadcrumbs -->
-    <v-breadcrumbs :items="breadcrumbs" class="pl-0">
-      <template v-slot:divider>
-        <v-icon icon="mdi-chevron-right"></v-icon>
-      </template>
-    </v-breadcrumbs>
-
-    <!-- Tampilan Formulir Tambah/Edit/View -->
-    <v-card v-if="showForm" class="pa-4 rounded-lg elevation-2">
-      <v-card-title class="text-h5 font-weight-bold mb-4">
-        {{ isEditMode ? 'Edit Klinik' : readOnly ? 'Detail Klinik' : 'Tambah Klinik' }}
-      </v-card-title>
-      <v-card-text>
-        <v-row>
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Kode</v-label>
-            <v-text-field
-              v-model="editedItem.kode"
-              placeholder="Masukkan Kode Klinik"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Nama</v-label>
-            <v-text-field
-              v-model="editedItem.namaKlinik"
-              placeholder="Masukkan Nama Klinik"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Shift</v-label>
-            <v-text-field
-              v-model="editedItem.shift"
-              placeholder="Jumlah Shift"
-              type="number"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Kuota Shift</v-label>
-            <v-text-field
-              v-model="editedItem.kuotaShift"
-              placeholder="Kuota Per Shift"
-              type="number"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-
-        <v-row class="d-flex align-center">
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Jam Buka Shift</v-label>
-            <div class="d-flex align-center">
-              <v-text-field
-                v-model="editedItem.jamBuka"
-                placeholder="Jam Buka Shift 1"
-                variant="outlined"
-                density="comfortable"
-                class="mr-2"
-                :readonly="readOnly"
-              ></v-text-field>
-              <span class="text-h6 font-weight-bold mr-2">:</span>
-              <v-text-field
-                v-model="editedItem.menitBuka"
-                placeholder="Menit Buka Shift 1"
-                variant="outlined"
-                density="comfortable"
-                :readonly="readOnly"
-              ></v-text-field>
+  <v-container>
+    <v-card>
+      <!-- Header -->
+      <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>
-          </v-col>
-          <v-col cols="12" md="6">
-            <v-switch
-              v-model="editedItem.autoShift"
-              inset
-              color="primary"
-              label="Auto Shift"
-              hide-details
-              :readonly="readOnly"
-            ></v-switch>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col cols="12">
-            <v-label class="font-weight-bold">Kuota Bangku</v-label>
-            <v-text-field
-              v-model="editedItem.kuotaBangku"
-              placeholder="Masukkan Kuota Bangku Klinik"
-              type="number"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col cols="12">
-            <v-label class="font-weight-bold">Jadwal Klinik</v-label>
-            <v-table class="rounded-lg elevation-1 mt-2">
-              <thead>
-                <tr>
-                  <th class="text-left text-uppercase font-weight-bold">#</th>
-                  <th class="text-left text-uppercase font-weight-bold">Hari</th>
-                  <th class="text-left text-uppercase font-weight-bold">Pilih</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(day, index) in days" :key="index">
-                  <td>{{ index + 1 }}</td>
-                  <td>{{ day.name }}</td>
-                  <td>
-                    <v-checkbox
-                      v-model="day.selected"
-                      color="primary"
-                      hide-details
-                      :readonly="readOnly"
-                    ></v-checkbox>
-                  </td>
-                </tr>
-              </tbody>
-            </v-table>
-          </v-col>
-        </v-row>
-      </v-card-text>
-      <v-card-actions class="d-flex justify-start pa-4">
-        <v-btn
-          color="grey-darken-1"
-          variant="flat"
-          class="text-capitalize rounded-lg mr-2"
-          @click="cancelForm"
-        >
-          {{ readOnly ? 'Tutup' : 'Batal' }}
-        </v-btn>
-        <v-btn
-          v-if="!readOnly"
-          color="orange-darken-2"
-          variant="flat"
-          class="text-capitalize rounded-lg"
-          @click="saveItem"
-        >
-          Submit
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-
-    <!-- Tampilan Tabel Data -->
-    <div v-else>
-      <!-- Banner biru sebagai pengganti header h1 -->
-      <v-card class="d-flex justify-space-between align-center pa-4 mb-4 rounded-lg bg-blue-darken-2 text-white elevation-2">
-        <v-card-title class="d-flex align-center text-h5 font-weight-bold pa-0">
-          <v-icon icon="mdi-hospital" class="mr-2" size="40"></v-icon>
-          <span>Master Klinik</span>
-        </v-card-title>
-        <v-btn
-          color="success"
-          prepend-icon="mdi-plus"
-          rounded
-          class="text-capitalize"
-          @click="showForm = true"
-        >
-          Tambah Baru
-        </v-btn>
-      </v-card>
-
-      <v-card class="pa-4 rounded-lg elevation-2">
-        <v-card-text>
-          <!-- Table controls -->
-          <div class="d-flex flex-wrap align-center justify-space-between mb-4">
-            <div class="d-flex align-center">
-              <span class="mr-2 text-subtitle-1">Show</span>
-              <v-select
-                v-model="itemsPerPage"
-                :items="[10, 25, 50]"
-                variant="outlined"
-                density="compact"
-                hide-details
-                style="max-width: 80px;"
-                rounded
-                class="mr-2"
-              ></v-select>
-              <span class="text-subtitle-1">entries</span>
-            </div>
-            <div class="d-flex align-center">
-              <v-text-field
-                v-model="search"
-                prepend-inner-icon="mdi-magnify"
-                label="Search"
-                variant="outlined"
-                density="compact"
-                hide-details
-                rounded
-                clearable
-              ></v-text-field>
+            <div class="header-text">
+              <h1 class="page-title">Master Klinik</h1>
+              <p class="page-subtitle">Rabu, 13 Agustus 2025 - Manajemen Klinik</p>
             </div>
           </div>
-
-          <!-- Data Table dengan paginasi kustom -->
-          <v-data-table
-            :headers="headers"
-            :items="allKlinikData"
-            :search="search"
-            :items-per-page="itemsPerPage"
-            v-model:page="page"
-            class="rounded-lg elevation-0 custom-table"
+          <v-btn 
+            color="white" 
+            @click="openTambahDialog"
+            elevation="0"
+            class="add-btn"
           >
-            <!-- Slot untuk aksi di setiap baris -->
-            <template v-slot:[`item.actions`]="{ item }">
-              <!-- Tombol "View" yang hanya menampilkan detail -->
-              <v-btn icon color="blue" size="small" class="mr-2" @click="viewItem(item)">
-                <v-icon>mdi-eye</v-icon>
-              </v-btn>
-              <v-btn icon color="orange" size="small" class="mr-2" @click="editItem(item)">
-                <v-icon>mdi-pencil</v-icon>
-              </v-btn>
-              <v-btn icon color="red" size="small" @click="deleteItem(item)">
-                <v-icon>mdi-delete</v-icon>
-              </v-btn>
-            </template>
-            
-            <template v-slot:no-data>
-              <v-alert :value="true" color="grey-lighten-3" icon="mdi-information">
-                Tidak ada data yang tersedia.
-              </v-alert>
-            </template>
+            <v-icon left size="20">mdi-plus-circle</v-icon>
+            Tambah Klinik
+          </v-btn>
+        </div>
+      </div>
 
-            <!-- Slot kustom untuk footer tabel (paginasi) -->
-            <template v-slot:bottom>
-              <v-row class="ma-2">
-                <v-col cols="12" sm="6" class="d-flex align-center justify-start text-caption text-grey">
-                  {{ showingEntriesText }}
-                </v-col>
-                <v-col cols="12" sm="6" class="d-flex align-center justify-end">
-                  <v-pagination
-                    v-model="page"
-                    :length="pageCount"
-                    rounded="circle"
-                    :total-visible="5"
-                  ></v-pagination>
-                </v-col>
-              </v-row>
-            </template>
-          </v-data-table>
-        </v-card-text>
-      </v-card>
-    </div>
-  </div>
-
-  <!-- Delete Dialog -->
-  <v-dialog v-model="showDeleteDialog" max-width="400px">
-    <v-card class="pa-4 rounded-lg">
-      <v-card-title class="text-h6 font-weight-bold">Hapus Data</v-card-title>
-      <v-card-text>Apakah Anda yakin ingin menghapus data ini?</v-card-text>
-      <v-card-actions class="d-flex justify-end">
-        <v-btn color="grey-darken-1" variant="text" @click="closeDeleteDialog">Batal</v-btn>
-        <v-btn color="red" variant="text" @click="confirmDelete">Hapus</v-btn>
-      </v-card-actions>
+      <!-- Table -->
+      <v-card-text>
+        <v-data-table
+          :headers="headers"
+          :items="klinikData"
+          :items-per-page="10"
+          class="elevation-0"
+        >
+          <template v-slot:item.shift="{ item }">
+            <v-chip size="small" color="primary" variant="flat">
+              {{ item.shift }}
+            </v-chip>
+          </template>
+          
+          <template v-slot:item.totalQuota="{ item }">
+            <span class="font-weight-bold">{{ item.totalQuota }}</span>
+          </template>
+          
+          <template v-slot:item.aksi="{ item }">
+            <v-btn
+              size="small"
+              color="#1976d2"
+              @click="openEditDialog(item)"
+              class="mr-2"
+              variant="flat"
+            >
+              <v-icon size="16" left>mdi-pencil</v-icon>
+              Edit
+            </v-btn>
+            <v-btn
+              size="small"
+              color="#f44336"
+              @click="deleteKlinik(item)"
+              variant="flat"
+            >
+              <v-icon size="16" left>mdi-delete</v-icon>
+              Delete
+            </v-btn>
+          </template>
+        </v-data-table>
+      </v-card-text>
     </v-card>
-  </v-dialog>
+
+    <!-- Dialog Tambah/Edit -->
+    <v-dialog v-model="dialog" max-width="1000px" persistent>
+      <v-card>
+        <v-card-title class="dialog-header">
+          <span class="dialog-title">{{ isEdit ? 'Edit Klinik' : 'Tambah Klinik' }}</span>
+          <v-btn icon variant="text" @click="closeDialog" size="small">
+            <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">
+            <v-row>
+              <!-- Kode -->
+              <v-col cols="12" md="4">
+                <v-text-field
+                  label="Kode"
+                  v-model="formData.kode"
+                  variant="outlined"
+                  density="comfortable"
+                  :rules="[v => !!v || 'Kode harus diisi']"
+                  required
+                  hide-details="auto"
+                  placeholder="Masukkan kode klinik (2 huruf)"
+                ></v-text-field>
+                <small class="text-grey">Masukan Kode Klinik 2 Huruf</small>
+              </v-col>
+
+              <!-- Nama -->
+              <v-col cols="12" md="4">
+                <v-text-field
+                  label="Nama"
+                  v-model="formData.nama"
+                  variant="outlined"
+                  density="comfortable"
+                  :rules="[v => !!v || 'Nama harus diisi']"
+                  required
+                  hide-details="auto"
+                  placeholder="Gigi dan Mulut"
+                ></v-text-field>
+              </v-col>
+
+              <!-- Shift -->
+              <v-col cols="12" md="4">
+                <v-text-field
+                  label="Jumlah Shift"
+                  v-model.number="formData.shift"
+                  type="number"
+                  variant="outlined"
+                  density="comfortable"
+                  :rules="[v => !!v || 'Shift harus diisi', v => v > 0 || 'Shift minimal 1']"
+                  required
+                  hide-details="auto"
+                  @update:model-value="updateShiftCount"
+                ></v-text-field>
+              </v-col>
+
+              <!-- Auto Shift -->
+              <v-col cols="12" md="4">
+                <v-checkbox
+                  label="Auto Shift"
+                  v-model="formData.autoShift"
+                  hide-details
+                  color="primary"
+                ></v-checkbox>
+              </v-col>
+
+              <!-- Jam Shift Section -->
+              <v-col cols="12">
+                <div class="shift-section">
+                  <h4 class="shift-section-title">
+                    <v-icon size="20" color="primary">mdi-clock-outline</v-icon>
+                    Konfigurasi Shift & Kuota
+                  </h4>
+                  
+                  <div v-for="(shift, index) in formData.jamShiftList" :key="index" class="shift-item">
+                    <v-row align="center">
+                      <v-col cols="12" md="2">
+                        <div class="shift-label">
+                          <v-icon size="16" left>mdi-numeric-{{ index + 1 }}-circle</v-icon>
+                          Shift {{ index + 1 }}
+                        </div>
+                      </v-col>
+                      
+                      <v-col cols="12" md="3">
+                        <v-text-field
+                          label="Jam Mulai"
+                          v-model="shift.dari"
+                          type="time"
+                          variant="outlined"
+                          density="compact"
+                          hide-details="auto"
+                          prepend-inner-icon="mdi-clock-start"
+                        ></v-text-field>
+                      </v-col>
+                      
+                      <v-col cols="12" md="3">
+                        <v-text-field
+                          label="Jam Selesai"
+                          v-model="shift.sampai"
+                          type="time"
+                          variant="outlined"
+                          density="compact"
+                          hide-details="auto"
+                          prepend-inner-icon="mdi-clock-end"
+                        ></v-text-field>
+                      </v-col>
+                      
+                      <v-col cols="12" md="3">
+                        <v-text-field
+                          label="Kuota"
+                          v-model.number="shift.kuota"
+                          type="number"
+                          variant="outlined"
+                          density="compact"
+                          hide-details="auto"
+                          prepend-inner-icon="mdi-account-multiple"
+                          placeholder="0"
+                          :rules="[v => v >= 0 || 'Kuota minimal 0']"
+                        ></v-text-field>
+                      </v-col>
+                      
+                      <v-col cols="12" md="1" class="d-flex justify-center">
+                        <v-btn
+                          v-if="formData.jamShiftList.length > 1"
+                          icon
+                          size="small"
+                          color="error"
+                          variant="text"
+                          @click="removeShift(index)"
+                        >
+                          <v-icon>mdi-delete</v-icon>
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </div>
+
+                  <!-- Total Kuota -->
+                  <v-divider class="my-3"></v-divider>
+                  <div class="total-kuota">
+                    <v-icon color="success" size="20">mdi-sigma</v-icon>
+                    <span class="total-label">Total Kuota:</span>
+                    <v-chip color="success" variant="flat" size="large">
+                      {{ calculateTotalQuota() }} Pasien
+                    </v-chip>
+                  </div>
+                </div>
+              </v-col>
+
+              <!-- Jadwal Klinik -->
+              <v-col cols="12">
+                <div class="jadwal-section">
+                  <label class="jadwal-title">
+                    <v-icon size="20" color="primary">mdi-calendar-check</v-icon>
+                    Jadwal Klinik
+                  </label>
+                  <v-data-table
+                    :headers="jadwalHeaders"
+                    :items="hariList"
+                    :items-per-page="-1"
+                    hide-default-footer
+                    class="elevation-0 jadwal-table"
+                  >
+                    <template v-slot:item.pilih="{ item }">
+                      <v-checkbox
+                        v-model="formData.jadwalKlinik"
+                        :value="item.hari"
+                        hide-details
+                        color="success"
+                      ></v-checkbox>
+                    </template>
+                  </v-data-table>
+                </div>
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions class="dialog-actions">
+          <v-spacer></v-spacer>
+          <v-btn
+            color="grey-lighten-2"
+            @click="closeDialog"
+            class="action-btn"
+          >
+            <v-icon left size="18">mdi-close</v-icon>
+            Cancel
+          </v-btn>
+          <v-btn
+            color="warning"
+            @click="submitForm"
+            class="action-btn"
+          >
+            <v-icon left size="18">mdi-content-save</v-icon>
+            Submit
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 
-definePageMeta({
-  middleware:['auth']
-})
-
-// State untuk menampilkan/menyembunyikan formulir
-const showForm = ref(false);
-const readOnly = ref(false); // State untuk mode "view"
-
-// Data dummy untuk Master Klinik
-const allKlinikData = ref([
-  { id: 1, kode: 'AN', namaKlinik: 'ANAK', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 2, kode: 'AS', namaKlinik: 'ANESTESI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 3, kode: 'BD', namaKlinik: 'BEDAH', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 4, kode: 'GR', namaKlinik: 'GERIATRI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 5, kode: 'GI', namaKlinik: 'GIGI DAN MULUT', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 6, kode: 'GZ', namaKlinik: 'GIZI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 7, kode: 'HO', namaKlinik: 'HOM', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 8, kode: 'IP', namaKlinik: 'IPD', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 9, kode: 'JT', namaKlinik: 'JANTUNG', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 10, kode: 'JW', namaKlinik: 'JIWA', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 11, kode: 'OB', namaKlinik: 'KANDUNGAN', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 12, kode: 'KT', namaKlinik: 'KEMOTERAPI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 13, kode: 'KN', namaKlinik: 'KOMPLEMENTER', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 14, kode: 'KL', namaKlinik: 'KUL KEL', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 15, kode: 'MT', namaKlinik: 'MATA', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 16, kode: 'MC', namaKlinik: 'MCU', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 17, kode: 'ON', namaKlinik: 'ONKOLOGI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 18, kode: 'PR', namaKlinik: 'PARU', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 19, kode: 'RT', namaKlinik: 'R. TINDAKAN', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 20, kode: 'RD', namaKlinik: 'RADIOTERAPI', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 21, kode: 'RM', namaKlinik: 'REHAB MEDIK', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 22, kode: 'NU', namaKlinik: 'SARAF', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-  { id: 23, kode: 'TH', namaKlinik: 'THT', shift: 1, kuotaShift: 1000, kuotaBangku: 50, jamBuka: '08', menitBuka: '00', autoShift: true, jadwal: [] },
-]);
+const dialog = ref(false);
+const isEdit = ref(false);
+const formRef = ref(null);
 
 const headers = ref([
-  { title: 'No', key: 'id' },
-  { title: 'Kode', key: 'kode', sortable: true },
-  { title: 'Nama Klinik', key: 'namaKlinik', sortable: true },
-  { title: 'Shift', key: 'shift', sortable: true },
-  { title: 'Kuota Shift', key: 'kuotaShift', sortable: true },
-  { title: 'Aksi', key: 'actions', sortable: false },
+  { title: 'No', value: 'no', sortable: true },
+  { title: 'Kode', value: 'kode', sortable: true },
+  { title: 'Nama Klinik', value: 'nama', sortable: true },
+  { title: 'Shift', value: 'shift', sortable: true },
+  { title: 'Total Kuota', value: 'totalQuota', sortable: true },
+  { title: 'Aksi', value: 'aksi', sortable: false },
 ]);
 
-// Breadcrumbs
-const breadcrumbs = ref([
-  { title: 'Dashboard', disabled: false, href: '/dashboard' },
-  { title: 'Setting', disabled: false, href: '/setting' },
-  { title: 'Master Klinik', disabled: false, href: '/setting/masterklinik' },
+const klinikData = ref([
+  { 
+    id: 1, no: 1, kode: 'AN', nama: 'ANAK', shift: 1, totalQuota: 1000,
+    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 1000 }] 
+  },
+  { 
+    id: 2, no: 2, kode: 'AS', nama: 'ANESTESI', shift: 2, totalQuota: 1500,
+    jamShiftList: [
+      { dari: '07:00', sampai: '11:00', kuota: 1000 }, 
+      { dari: '13:00', sampai: '16:00', kuota: 500 }
+    ] 
+  },
+  { 
+    id: 3, no: 3, kode: 'BD', nama: 'BEDAH', shift: 1, totalQuota: 800,
+    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 800 }] 
+  },
+  { 
+    id: 4, no: 4, kode: 'GR', nama: 'GERIATRI', shift: 1, totalQuota: 600,
+    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }] 
+  },
+  { 
+    id: 5, no: 5, kode: 'GI', nama: 'GIGI DAN MULUT', shift: 3, totalQuota: 2100,
+    jamShiftList: [
+      { dari: '07:00', sampai: '11:00', kuota: 1000 }, 
+      { dari: '13:00', sampai: '16:00', kuota: 700 }, 
+      { dari: '18:00', sampai: '20:00', kuota: 400 }
+    ] 
+  },
+  { 
+    id: 6, no: 6, kode: 'GZ', nama: 'GIZI', shift: 1, totalQuota: 500,
+    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 500 }] 
+  },
+  { 
+    id: 7, no: 7, kode: 'HO', nama: 'HOM', shift: 1, totalQuota: 750,
+    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 750 }] 
+  },
+  { 
+    id: 8, no: 8, kode: 'IP', nama: 'IPD', shift: 1, totalQuota: 900,
+    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 900 }] 
+  },
+  { 
+    id: 9, no: 9, kode: 'JT', nama: 'JANTUNG', shift: 2, totalQuota: 1200,
+    jamShiftList: [
+      { dari: '07:00', sampai: '11:00', kuota: 800 }, 
+      { dari: '13:00', sampai: '16:00', kuota: 400 }
+    ] 
+  },
+  { 
+    id: 10, no: 10, kode: 'JW', nama: 'JIWA', shift: 1, totalQuota: 700,
+    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 700 }] 
+  },
 ]);
 
-const days = ref([
-  { name: 'Senin', selected: false },
-  { name: 'Selasa', selected: false },
-  { name: 'Rabu', selected: false },
-  { name: 'Kamis', selected: false },
-  { name: 'Jum`at', selected: false },
+const jadwalHeaders = ref([
+  { title: '#', value: 'no', sortable: false },
+  { title: 'Hari', value: 'hari', sortable: false },
+  { title: 'Pilih', value: 'pilih', sortable: false },
 ]);
 
-// State untuk tabel dan paginasi
-const itemsPerPage = ref(10);
-const search = ref('');
-const page = ref(1);
+const hariList = ref([
+  { no: 1, hari: 'Senin' },
+  { no: 2, hari: 'Selasa' },
+  { no: 3, hari: 'Rabu' },
+  { no: 4, hari: 'Kamis' },
+  { no: 5, hari: 'Jum\'at' },
+]);
 
-// Computed properties untuk paginasi kustom
-const pageCount = computed(() => {
-  return Math.ceil(allKlinikData.value.length / itemsPerPage.value);
-});
-
-const showingEntriesText = computed(() => {
-  const start = (page.value - 1) * itemsPerPage.value + 1;
-  const end = Math.min(page.value * itemsPerPage.value, allKlinikData.value.length);
-  const total = allKlinikData.value.length;
-  return `Showing ${start} to ${end} of ${total} entries`;
-});
-
-// State untuk dialog
-const showDeleteDialog = ref(false);
-const isEditMode = ref(false);
-const editedIndex = ref(-1);
-const editedItem = ref({
-  id: 0,
+const formData = ref({
+  id: null,
   kode: '',
-  namaKlinik: '',
+  nama: '',
   shift: 1,
-  kuotaShift: 0,
-  kuotaBangku: 0,
-  jamBuka: '',
-  menitBuka: '',
+  jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 0 }],
   autoShift: false,
+  jadwalKlinik: [],
 });
 
-
-// Fungsi untuk tombol aksi
-// Fungsi untuk tombol View yang hanya menampilkan data tanpa bisa diedit
-const viewItem = (item) => {
-  editedItem.value = { ...item };
-  readOnly.value = true;
-  isEditMode.value = false;
-  showForm.value = true;
-  // Update breadcrumbs untuk mode view
-  breadcrumbs.value = [
-    { title: 'Dashboard', disabled: false, href: '/dashboard' },
-    { title: 'Setting', disabled: false, href: '/setting' },
-    { title: 'Master Klinik', disabled: false, href: '/setting/masterklinik' },
-    { title: 'Detail Klinik', disabled: true, href: '/setting/viewklinik' },
-  ];
+const calculateTotalQuota = () => {
+  return formData.value.jamShiftList.reduce((total, shift) => {
+    return total + (parseInt(shift.kuota) || 0);
+  }, 0);
 };
 
-const editItem = (item) => {
-  editedIndex.value = allKlinikData.value.findIndex(d => d.id === item.id);
-  editedItem.value = { ...item };
-  isEditMode.value = true;
-  readOnly.value = false;
-  showForm.value = true;
-  // Update breadcrumbs untuk mode edit
-  breadcrumbs.value = [
-    { title: 'Dashboard', disabled: false, href: '/dashboard' },
-    { title: 'Setting', disabled: false, href: '/setting' },
-    { title: 'Master Klinik', disabled: false, href: '/setting/masterklinik' },
-    { title: 'Edit Klinik', disabled: true, href: '/setting/editklinik' },
-  ];
-};
-
-const deleteItem = (item) => {
-  editedIndex.value = allKlinikData.value.findIndex(d => d.id === item.id);
-  showDeleteDialog.value = true;
-};
-
-const confirmDelete = () => {
-  if (editedIndex.value > -1) {
-    allKlinikData.value.splice(editedIndex.value, 1);
+const updateShiftCount = (newShiftCount) => {
+  const currentCount = formData.value.jamShiftList.length;
+  
+  if (newShiftCount > currentCount) {
+    // Tambah shift baru
+    for (let i = currentCount; i < newShiftCount; i++) {
+      let defaultDari = '07:00';
+      let defaultSampai = '11:00';
+      
+      if (i === 1) {
+        defaultDari = '13:00';
+        defaultSampai = '16:00';
+      } else if (i === 2) {
+        defaultDari = '18:00';
+        defaultSampai = '20:00';
+      } else if (i > 2) {
+        const prevShift = formData.value.jamShiftList[i - 1];
+        const [prevHour] = prevShift.sampai.split(':');
+        const nextHour = (parseInt(prevHour) + 1) % 24;
+        defaultDari = `${String(nextHour).padStart(2, '0')}:00`;
+        defaultSampai = `${String((nextHour + 4) % 24).padStart(2, '0')}:00`;
+      }
+      
+      formData.value.jamShiftList.push({
+        dari: defaultDari,
+        sampai: defaultSampai,
+        kuota: 0
+      });
+    }
+  } else if (newShiftCount < currentCount && newShiftCount > 0) {
+    formData.value.jamShiftList = formData.value.jamShiftList.slice(0, newShiftCount);
   }
-  closeDeleteDialog();
 };
 
-const cancelForm = () => {
-  showForm.value = false;
-  isEditMode.value = false;
-  readOnly.value = false;
-  editedItem.value = {
-    id: 0,
-    kode: '',
-    namaKlinik: '',
-    shift: 1,
-    kuotaShift: 0,
-    kuotaBangku: 0,
-    jamBuka: '',
-    menitBuka: '',
-    autoShift: false,
+const removeShift = (index) => {
+  if (formData.value.jamShiftList.length > 1) {
+    formData.value.jamShiftList.splice(index, 1);
+    formData.value.shift = formData.value.jamShiftList.length;
+  }
+};
+
+const openTambahDialog = () => {
+  isEdit.value = false;
+  resetForm();
+  dialog.value = true;
+};
+
+const openEditDialog = (item) => {
+  isEdit.value = true;
+  formData.value = {
+    id: item.id,
+    kode: item.kode,
+    nama: item.nama,
+    shift: item.shift,
+    jamShiftList: item.jamShiftList ? JSON.parse(JSON.stringify(item.jamShiftList)) : [{ dari: '07:00', sampai: '11:00', kuota: 0 }],
+    autoShift: item.autoShift || false,
+    jadwalKlinik: item.jadwalKlinik || ['Senin', 'Rabu'],
   };
-  editedIndex.value = -1;
-  // Reset breadcrumbs ke mode tabel
-  breadcrumbs.value = [
-    { title: 'Dashboard', disabled: false, href: '/dashboard' },
-    { title: 'Setting', disabled: false, href: '/setting' },
-    { title: 'Master Klinik', disabled: false, href: '/setting/masterklinik' },
-  ];
+  dialog.value = true;
 };
 
-const closeDeleteDialog = () => {
-  showDeleteDialog.value = false;
-  editedIndex.value = -1;
+const closeDialog = () => {
+  dialog.value = false;
+  resetForm();
 };
 
-const saveItem = () => {
-  if (isEditMode.value) {
-    Object.assign(allKlinikData.value[editedIndex.value], editedItem.value);
-  } else {
-    // Generate new ID
-    const newId = allKlinikData.value.length > 0 ? Math.max(...allKlinikData.value.map(item => item.id)) + 1 : 1;
-    editedItem.value.id = newId;
-    allKlinikData.value.push(editedItem.value);
+const resetForm = () => {
+  formData.value = {
+    id: null,
+    kode: '',
+    nama: '',
+    shift: 1,
+    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 0 }],
+    autoShift: false,
+    jadwalKlinik: [],
+  };
+  if (formRef.value) {
+    formRef.value.reset();
+  }
+};
+
+const submitForm = async () => {
+  const { valid } = await formRef.value.validate();
+  
+  if (!valid) {
+    return;
+  }
+
+  const totalQuota = calculateTotalQuota();
+
+  if (isEdit.value) {
+    const index = klinikData.value.findIndex(k => k.id === formData.value.id);
+    if (index !== -1) {
+      klinikData.value[index] = {
+        ...klinikData.value[index],
+        ...formData.value,
+        totalQuota: totalQuota,
+      };
+    }
+  } else {
+    const newId = Math.max(...klinikData.value.map(k => k.id)) + 1;
+    const newNo = klinikData.value.length + 1;
+    klinikData.value.push({
+      id: newId,
+      no: newNo,
+      ...formData.value,
+      totalQuota: totalQuota,
+    });
+  }
+
+  closeDialog();
+};
+
+const deleteKlinik = (item) => {
+  if (confirm(`Hapus klinik ${item.nama}?`)) {
+    const index = klinikData.value.findIndex(k => k.id === item.id);
+    if (index !== -1) {
+      klinikData.value.splice(index, 1);
+      klinikData.value.forEach((k, idx) => {
+        k.no = idx + 1;
+      });
+    }
   }
-  cancelForm(); // Kembali ke tampilan tabel setelah menyimpan
 };
 </script>
 
 <style scoped>
-.master-klinik-page {
-  font-family: 'Roboto', sans-serif;
-  background-color: #f5f7fa;
-  min-height: 100vh;
+.page-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.2);
 }
 
-.custom-table {
-  border: none;
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
 }
 
-.v-data-table :deep(th) {
-  font-weight: bold !important;
-  color: #333 !important;
+.header-left {
+  display: flex;
+  align-items: center;
 }
 
-.v-data-table :deep(td) {
-  vertical-align: middle;
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
 }
 
-.v-btn--icon {
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.add-btn {
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  padding: 0 24px !important;
+  height: 44px !important;
+  color: #1976d2 !important;
+}
+
+.dialog-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  color: white;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.dialog-content {
+  padding: 24px !important;
+  max-height: 650px;
+  overflow-y: auto;
+}
+
+.dialog-actions {
+  padding: 16px 24px;
+  background: #f5f5f5;
+}
+
+.action-btn {
+  text-transform: none;
+  font-weight: 600;
+  min-width: 120px;
+}
+
+.shift-section {
+  background: #f8f9fa;
+  border: 2px solid #e3f2fd;
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.shift-section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1976d2;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e3f2fd;
+}
+
+.shift-item {
+  background: white;
+  padding: 16px;
   border-radius: 8px;
+  margin-bottom: 12px;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 
-.v-select :deep(.v-field__input) {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
+.shift-item:last-child {
+  margin-bottom: 0;
 }
-</style>
+
+.shift-label {
+  font-weight: 600;
+  color: #424242;
+  font-size: 14px;
+  text-align: center;
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  color: white;
+  padding: 10px 8px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.total-kuota {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: white;
+  border-radius: 8px;
+  border: 2px solid #4caf50;
+}
+
+.total-label {
+  font-weight: 600;
+  color: #424242;
+  font-size: 15px;
+}
+
+.jadwal-section {
+  background: #f8f9fa;
+  border: 2px solid #e3f2fd;
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.jadwal-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1976d2;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e3f2fd;
+}
+
+.jadwal-table {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/pages/Setting/MasterKlinikRuang.vue b/pages/Setting/MasterKlinikRuang.vue
index b96d569..b2957f4 100644
--- a/pages/Setting/MasterKlinikRuang.vue
+++ b/pages/Setting/MasterKlinikRuang.vue
@@ -1,376 +1,597 @@
 <template>
-  <div class="master-klinik-ruang-page pa-4">
-    <!-- Breadcrumbs -->
-    <v-breadcrumbs :items="breadcrumbs" class="pl-0">
-      <template v-slot:divider>
-        <v-icon icon="mdi-chevron-right"></v-icon>
-      </template>
-    </v-breadcrumbs>
-
-    <!-- Tampilan Formulir Tambah/Edit/View -->
-    <v-card v-if="showForm" class="pa-4 rounded-lg elevation-2">
-      <v-card-title class="text-h5 font-weight-bold mb-4">
-        {{ isEditMode ? 'Edit Ruang Klinik' : readOnly ? 'Detail Ruang Klinik' : 'Tambah Ruang Klinik' }}
-      </v-card-title>
-      <v-card-text>
-        <v-row>
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Nama Klinik</v-label>
-            <v-select
-              v-model="editedItem.namaKlinik"
-              :items="['ANAK', 'ANESTESI', 'BEDAH', 'GERIATRI', 'GIGI DAN MULUT', 'GIZI', 'HOM', 'IPD', 'JANTUNG', 'JIWA', 'KANDUNGAN', 'KEMOTERAPI', 'KOMPLEMENTER', 'KUL KEL', 'MATA', 'MCU', 'ONKOLOGI', 'PARU', 'R. TINDAKAN', 'RADIOTERAPI', 'REHAB MEDIK', 'SARAF', 'THT']"
-              placeholder="Pilih Nama Klinik"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-select>
-          </v-col>
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Kode Ruang</v-label>
-            <v-text-field
-              v-model="editedItem.kode"
-              placeholder="Masukkan Kode Ruang"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12">
-            <v-label class="font-weight-bold">Nama Ruang</v-label>
-            <v-text-field
-              v-model="editedItem.namaRuang"
-              placeholder="Masukkan Nama Ruang"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-      </v-card-text>
-      <v-card-actions class="d-flex justify-start pa-4">
-        <v-btn
-          color="grey-darken-1"
-          variant="flat"
-          class="text-capitalize rounded-lg mr-2"
-          @click="cancelForm"
-        >
-          {{ readOnly ? 'Tutup' : 'Batal' }}
-        </v-btn>
-        <v-btn
-          v-if="!readOnly"
-          color="orange-darken-2"
-          variant="flat"
-          class="text-capitalize rounded-lg"
-          @click="saveItem"
-        >
-          Submit
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-
-    <!-- Tampilan Tabel Data -->
-    <div v-else>
-      <!-- Banner biru sebagai pengganti header h1 -->
-      <v-card class="d-flex justify-space-between align-center pa-4 mb-4 rounded-lg bg-blue-darken-2 text-white elevation-2">
-        <v-card-title class="d-flex align-center text-h5 font-weight-bold pa-0">
-          <v-icon icon="mdi-hospital-box-outline" class="mr-2" size="40"></v-icon>
-          <span>Master Klinik Ruang</span>
-        </v-card-title>
-        <v-btn
-          color="success"
-          prepend-icon="mdi-plus"
-          rounded
-          class="text-capitalize"
-          @click="showForm = true"
-        >
-          Tambah Baru
-        </v-btn>
-      </v-card>
-
-      <v-card class="pa-4 rounded-lg elevation-2">
-        <v-card-text>
-          <!-- Table controls -->
-          <div class="d-flex flex-wrap align-center justify-space-between mb-4">
-            <div class="d-flex align-center">
-              <span class="mr-2 text-subtitle-1">Show</span>
-              <v-select
-                v-model="itemsPerPage"
-                :items="[10, 25, 50]"
-                variant="outlined"
-                density="compact"
-                hide-details
-                style="max-width: 80px;"
-                rounded
-                class="mr-2"
-              ></v-select>
-              <span class="text-subtitle-1">entries</span>
+  <v-container>
+    <v-card>
+      <!-- Header -->
+      <div class="page-header">
+        <div class="header-content">
+          <div class="header-left">
+            <div class="header-icon">
+              <v-icon size="32" color="white">mdi-door-open</v-icon>
             </div>
-            <div class="d-flex align-center">
-              <v-text-field
-                v-model="search"
-                prepend-inner-icon="mdi-magnify"
-                label="Search"
-                variant="outlined"
-                density="compact"
-                hide-details
-                rounded
-                clearable
-              ></v-text-field>
+            <div class="header-text">
+              <h1 class="page-title">Master Klinik Ruang</h1>
+              <p class="page-subtitle">Rabu, 13 Agustus 2025 - Manajemen Ruangan</p>
             </div>
           </div>
-
-          <!-- Data Table dengan paginasi kustom -->
-          <v-data-table
-            :headers="headers"
-            :items="allRuangData"
-            :search="search"
-            :items-per-page="itemsPerPage"
-            v-model:page="page"
-            class="rounded-lg elevation-0 custom-table"
+          <v-btn 
+            color="white" 
+            @click="openTambahDialog"
+            elevation="0"
+            class="add-btn"
           >
-            <!-- Slot untuk aksi di setiap baris -->
-            <template v-slot:[`item.actions`]="{ item }">
-              <v-btn icon color="blue" size="small" class="mr-2" @click="viewItem(item)">
-                <v-icon>mdi-eye</v-icon>
-              </v-btn>
-              <v-btn icon color="orange" size="small" class="mr-2" @click="editItem(item)">
-                <v-icon>mdi-pencil</v-icon>
-              </v-btn>
-              <v-btn icon color="red" size="small" @click="deleteItem(item)">
-                <v-icon>mdi-delete</v-icon>
-              </v-btn>
-            </template>
-            
-            <template v-slot:no-data>
-              <v-alert :value="true" color="grey-lighten-3" icon="mdi-information">
-                Tidak ada data yang tersedia.
-              </v-alert>
-            </template>
+            <v-icon left size="20">mdi-plus-circle</v-icon>
+            Tambah Ruang
+          </v-btn>
+        </div>
+      </div>
 
-            <!-- Slot kustom untuk footer tabel (paginasi) -->
-            <template v-slot:bottom>
-              <v-row class="ma-2">
-                <v-col cols="12" sm="6" class="d-flex align-center justify-start text-caption text-grey">
-                  {{ showingEntriesText }}
-                </v-col>
-                <v-col cols="12" sm="6" class="d-flex align-center justify-end">
-                  <v-pagination
-                    v-model="page"
-                    :length="pageCount"
-                    rounded="circle"
-                    :total-visible="5"
-                  ></v-pagination>
-                </v-col>
-              </v-row>
-            </template>
-          </v-data-table>
-        </v-card-text>
-      </v-card>
-    </div>
-  </div>
-
-  <!-- Delete Dialog -->
-  <v-dialog v-model="showDeleteDialog" max-width="400px">
-    <v-card class="pa-4 rounded-lg">
-      <v-card-title class="text-h6 font-weight-bold">Hapus Data</v-card-title>
-      <v-card-text>Apakah Anda yakin ingin menghapus data ini?</v-card-text>
-      <v-card-actions class="d-flex justify-end">
-        <v-btn color="grey-darken-1" variant="text" @click="closeDeleteDialog">Batal</v-btn>
-        <v-btn color="red" variant="text" @click="confirmDelete">Hapus</v-btn>
-      </v-card-actions>
+      <!-- Table -->
+      <v-card-text>
+        <v-data-table
+          :headers="headers"
+          :items="ruangData"
+          :items-per-page="10"
+          class="elevation-0"
+        >
+          <template v-slot:item.namaKlinik="{ item }">
+            <v-chip size="small" color="primary" variant="outlined">
+              {{ item.kodeKlinik }}
+            </v-chip>
+            <span class="ml-2">{{ item.namaKlinik }}</span>
+          </template>
+          
+          <template v-slot:item.aksi="{ item }">
+            <v-btn
+              size="small"
+              color="#1976d2"
+              @click="openEditDialog(item)"
+              class="mr-2"
+              variant="flat"
+            >
+              <v-icon size="16" left>mdi-pencil</v-icon>
+              Edit
+            </v-btn>
+            <v-btn
+              size="small"
+              color="#f44336"
+              @click="deleteRuang(item)"
+              variant="flat"
+            >
+              <v-icon size="16" left>mdi-delete</v-icon>
+              Delete
+            </v-btn>
+          </template>
+        </v-data-table>
+      </v-card-text>
     </v-card>
-  </v-dialog>
+
+    <!-- Dialog Tambah/Edit -->
+    <v-dialog v-model="dialog" max-width="800px" persistent>
+      <v-card>
+        <v-card-title class="dialog-header">
+          <span class="dialog-title">{{ isEdit ? 'Edit Klinik Ruang' : 'Tambah Klinik Ruang' }}</span>
+          <v-btn icon variant="text" @click="closeDialog" size="small">
+            <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">
+            <!-- Klinik Selection -->
+            <v-row>
+              <v-col cols="12">
+                <div class="section-header">
+                  <v-icon color="primary" size="20">mdi-hospital-building</v-icon>
+                  <span class="section-title">Pilih Klinik</span>
+                </div>
+              </v-col>
+              
+              <v-col cols="12" md="6">
+                <v-autocomplete
+                  label="Kode Klinik"
+                  v-model="formData.kodeKlinik"
+                  :items="klinikList"
+                  item-title="kode"
+                  item-value="kode"
+                  variant="outlined"
+                  density="comfortable"
+                  :rules="[v => !!v || 'Kode klinik harus dipilih']"
+                  required
+                  hide-details="auto"
+                  placeholder="Masukkan Kode Klinik"
+                  @update:model-value="onKlinikChange"
+                >
+                  <template v-slot:item="{ props, item }">
+                    <v-list-item v-bind="props">
+                      <template v-slot:prepend>
+                        <v-chip size="small" color="primary">{{ item.raw.kode }}</v-chip>
+                      </template>
+                      <v-list-item-title>{{ item.raw.nama }}</v-list-item-title>
+                    </v-list-item>
+                  </template>
+                </v-autocomplete>
+                <small class="text-grey">Masukan Kode Ruang 2 Huruf</small>
+              </v-col>
+
+              <v-col cols="12" md="6">
+                <v-text-field
+                  label="Nama Klinik"
+                  v-model="formData.namaKlinik"
+                  variant="outlined"
+                  density="comfortable"
+                  readonly
+                  hide-details="auto"
+                  placeholder="Nama akan terisi otomatis"
+                  bg-color="grey-lighten-4"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+
+            <!-- Ruang Section -->
+            <v-row class="mt-4">
+              <v-col cols="12">
+                <div class="section-header">
+                  <v-icon color="primary" size="20">mdi-door</v-icon>
+                  <span class="section-title">Daftar Ruangan</span>
+                  <v-spacer></v-spacer>
+                  <v-btn
+                    size="small"
+                    color="success"
+                    variant="flat"
+                    @click="addRuang"
+                  >
+                    <v-icon size="18" left>mdi-plus</v-icon>
+                    Add Ruang
+                  </v-btn>
+                </div>
+              </v-col>
+
+              <v-col cols="12">
+                <div class="ruang-list">
+                  <div 
+                    v-for="(ruang, index) in formData.ruangList" 
+                    :key="index" 
+                    class="ruang-item"
+                  >
+                    <v-row align="center">
+                      <v-col cols="12" md="1">
+                        <div class="ruang-number">
+                          <v-icon size="16">mdi-numeric-{{ index + 1 }}-circle</v-icon>
+                        </div>
+                      </v-col>
+
+                      <v-col cols="12" md="3">
+                        <v-text-field
+                          label="Nomor Ruang"
+                          v-model="ruang.nomorRuang"
+                          variant="outlined"
+                          density="compact"
+                          hide-details="auto"
+                          placeholder="Masukan Nomor Ruangan"
+                          prepend-inner-icon="mdi-pound"
+                        ></v-text-field>
+                      </v-col>
+
+                      <v-col cols="12" md="4">
+                        <v-text-field
+                          label="Nama Ruang"
+                          v-model="ruang.namaRuang"
+                          variant="outlined"
+                          density="compact"
+                          hide-details="auto"
+                          placeholder="Masukan Nama Klinik Ruang"
+                          prepend-inner-icon="mdi-door-open"
+                        ></v-text-field>
+                      </v-col>
+
+                      <v-col cols="12" md="3">
+                        <v-text-field
+                          label="Nomor Screen"
+                          v-model="ruang.nomorScreen"
+                          variant="outlined"
+                          density="compact"
+                          hide-details="auto"
+                          placeholder="Screen Klinik Ruang"
+                          prepend-inner-icon="mdi-monitor"
+                        ></v-text-field>
+                        <small class="text-grey">Masukan Nomor Screen Ruang</small>
+                      </v-col>
+
+                      <v-col cols="12" md="1" class="d-flex justify-center">
+                        <v-btn
+                          v-if="formData.ruangList.length > 1"
+                          icon
+                          size="small"
+                          color="error"
+                          variant="text"
+                          @click="removeRuang(index)"
+                        >
+                          <v-icon>mdi-delete</v-icon>
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </div>
+
+                  <v-alert 
+                    v-if="formData.ruangList.length === 0"
+                    type="info"
+                    variant="tonal"
+                    class="mt-2"
+                  >
+                    <v-icon left>mdi-information</v-icon>
+                    Klik "Add Ruang" untuk menambahkan ruangan
+                  </v-alert>
+                </div>
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions class="dialog-actions">
+          <v-spacer></v-spacer>
+          <v-btn
+            color="grey-lighten-2"
+            @click="closeDialog"
+            class="action-btn"
+          >
+            <v-icon left size="18">mdi-close</v-icon>
+            Cancel
+          </v-btn>
+          <v-btn
+            color="warning"
+            @click="submitForm"
+            class="action-btn"
+          >
+            <v-icon left size="18">mdi-content-save</v-icon>
+            Submit
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 
-definePageMeta({
-  middleware:['auth']
-})
-
-// State untuk menampilkan/menyembunyikan formulir
-const showForm = ref(false);
-const readOnly = ref(false);
-
-// Data dummy untuk Master Klinik Ruang
-const allRuangData = ref([
-  { id: 1, namaKlinik: 'ANAK', kode: 'AN-01', namaRuang: 'RUANG ANAK 1' },
-  { id: 2, namaKlinik: 'ANAK', kode: 'AN-02', namaRuang: 'RUANG ANAK 2' },
-  { id: 3, namaKlinik: 'ANESTESI', kode: 'AS-01', namaRuang: 'RUANG ANESTESI 1' },
-  { id: 4, namaKlinik: 'BEDAH', kode: 'BD-01', namaRuang: 'RUANG BEDAH 1' },
-  { id: 5, namaKlinik: 'GIGI DAN MULUT', kode: 'GI-01', namaRuang: 'RUANG GIGI DAN MULUT 1' },
-  { id: 6, namaKlinik: 'GERIATRI', kode: 'GR-01', namaRuang: 'RUANG GERIATRI 1' },
-  { id: 7, namaKlinik: 'GIZI', kode: 'GZ-01', namaRuang: 'RUANG GIZI 1' },
-  { id: 8, namaKlinik: 'HOM', kode: 'HO-01', namaRuang: 'RUANG HOM 1' },
-  { id: 9, namaKlinik: 'IPD', kode: 'IP-01', namaRuang: 'RUANG IPD 1' },
-  { id: 10, namaKlinik: 'JANTUNG', kode: 'JT-01', namaRuang: 'RUANG JANTUNG 1' },
-  { id: 11, namaKlinik: 'JIWA', kode: 'JW-01', namaRuang: 'RUANG JIWA 1' },
-  { id: 12, namaKlinik: 'KANDUNGAN', kode: 'OB-01', namaRuang: 'RUANG KANDUNGAN 1' },
-  { id: 13, namaKlinik: 'KANDUNGAN', kode: 'OB-02', namaRuang: 'RUANG KANDUNGAN 2' },
-  { id: 14, namaKlinik: 'KEMOTERAPI', kode: 'KT-01', namaRuang: 'RUANG KEMOTERAPI 1' },
-  { id: 15, namaKlinik: 'KOMPLEMENTER', kode: 'KN-01', namaRuang: 'RUANG KOMPLEMENTER 1' },
-  { id: 16, namaKlinik: 'KUL KEL', kode: 'KL-01', namaRuang: 'RUANG KUL KEL 1' },
-  { id: 17, namaKlinik: 'MATA', kode: 'MT-01', namaRuang: 'RUANG MATA 1' },
-  { id: 18, namaKlinik: 'MCU', kode: 'MC-01', namaRuang: 'RUANG MCU 1' },
-  { id: 19, namaKlinik: 'ONKOLOGI', kode: 'ON-01', namaRuang: 'RUANG ONKOLOGI 1' },
-  { id: 20, namaKlinik: 'PARU', kode: 'PR-01', namaRuang: 'RUANG PARU 1' },
-  { id: 21, namaKlinik: 'R. TINDAKAN', kode: 'RT-01', namaRuang: 'RUANG R. TINDAKAN 1' },
-  { id: 22, namaKlinik: 'RADIOTERAPI', kode: 'RD-01', namaRuang: 'RUANG RADIOTERAPI 1' },
-  { id: 23, namaKlinik: 'REHAB MEDIK', kode: 'RM-01', namaRuang: 'RUANG REHAB MEDIK 1' },
-  { id: 24, namaKlinik: 'SARAF', kode: 'NU-01', namaRuang: 'RUANG SARAF 1' },
-  { id: 25, namaKlinik: 'THT', kode: 'TH-01', namaRuang: 'RUANG THT 1' },
-]);
+const dialog = ref(false);
+const isEdit = ref(false);
+const formRef = ref(null);
 
 const headers = ref([
-  { title: 'No', key: 'id' },
-  { title: 'Nama Klinik', key: 'namaKlinik', sortable: true },
-  { title: 'Kode Ruang', key: 'kode', sortable: true },
-  { title: 'Nama Ruang', key: 'namaRuang', sortable: true },
-  { title: 'Aksi', key: 'actions', sortable: false },
+  { title: 'No', value: 'no', sortable: true },
+  { title: 'Nama Klinik', value: 'namaKlinik', sortable: true },
+  { title: 'Kode', value: 'kodeKlinik', sortable: true },
+  { title: 'Nama Ruang', value: 'namaRuang', sortable: true },
+  { title: 'Aksi', value: 'aksi', sortable: false },
 ]);
 
-// Breadcrumbs
-const breadcrumbs = ref([
-  { title: 'Dashboard', disabled: false, href: '/dashboard' },
-  { title: 'Setting', disabled: false, href: '/setting' },
-  { title: 'Master Klinik Ruang', disabled: false, href: '/setting/masterklinikruang' },
+// List klinik dari Master Klinik
+const klinikList = ref([
+  { kode: 'AN', nama: 'ANAK' },
+  { kode: 'AS', nama: 'ANESTESI' },
+  { kode: 'BD', nama: 'BEDAH' },
+  { kode: 'GR', nama: 'GERIATRI' },
+  { kode: 'GI', nama: 'GIGI DAN MULUT' },
+  { kode: 'GZ', nama: 'GIZI' },
+  { kode: 'HO', nama: 'HOM' },
+  { kode: 'IP', nama: 'IPD' },
+  { kode: 'JT', nama: 'JANTUNG' },
+  { kode: 'JW', nama: 'JIWA' },
+  { kode: 'KK', nama: 'KULIT KELAMIN' },
+  { kode: 'MT', nama: 'MATA' },
+  { kode: 'OB', nama: 'OBGYN' },
+  { kode: 'PR', nama: 'PARU' },
+  { kode: 'RT', nama: 'RADIOTERAPI' },
 ]);
 
-// State untuk tabel dan paginasi
-const itemsPerPage = ref(10);
-const search = ref('');
-const page = ref(1);
+const ruangData = ref([
+  { 
+    id: 1, 
+    no: 1, 
+    kodeKlinik: 'AN', 
+    namaKlinik: 'ANAK', 
+    namaRuang: 'R. TINDAKAN',
+    ruangList: [
+      { nomorRuang: '1', namaRuang: 'R. TINDAKAN', nomorScreen: '101' }
+    ]
+  },
+  { 
+    id: 2, 
+    no: 2, 
+    kodeKlinik: 'AS', 
+    namaKlinik: 'ANESTESI', 
+    namaRuang: 'Ruang 1, Ruang 2',
+    ruangList: [
+      { nomorRuang: '1', namaRuang: 'Ruang 1', nomorScreen: '201' },
+      { nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '202' }
+    ]
+  },
+  { 
+    id: 3, 
+    no: 3, 
+    kodeKlinik: 'BD', 
+    namaKlinik: 'BEDAH', 
+    namaRuang: 'Ruang Konsultasi',
+    ruangList: [
+      { nomorRuang: '1', namaRuang: 'Ruang Konsultasi', nomorScreen: '301' }
+    ]
+  },
+  { 
+    id: 4, 
+    no: 4, 
+    kodeKlinik: 'GR', 
+    namaKlinik: 'GERIATRI', 
+    namaRuang: 'Ruang Pemeriksaan',
+    ruangList: [
+      { nomorRuang: '1', namaRuang: 'Ruang Pemeriksaan', nomorScreen: '401' }
+    ]
+  },
+  { 
+    id: 5, 
+    no: 5, 
+    kodeKlinik: 'GI', 
+    namaKlinik: 'GIGI DAN MULUT', 
+    namaRuang: 'Ruang 1, Ruang 2, Ruang 3',
+    ruangList: [
+      { nomorRuang: '1', namaRuang: 'Ruang 1', nomorScreen: '501' },
+      { nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '502' },
+      { nomorRuang: '3', namaRuang: 'Ruang 3', nomorScreen: '503' }
+    ]
+  },
+]);
 
-// Computed properties untuk paginasi kustom
-const pageCount = computed(() => {
-  return Math.ceil(allRuangData.value.length / itemsPerPage.value);
-});
-
-const showingEntriesText = computed(() => {
-  const start = (page.value - 1) * itemsPerPage.value + 1;
-  const end = Math.min(page.value * itemsPerPage.value, allRuangData.value.length);
-  const total = allRuangData.value.length;
-  return `Showing ${start} to ${end} of ${total} entries`;
-});
-
-// State untuk dialog
-const showDeleteDialog = ref(false);
-const isEditMode = ref(false);
-const editedIndex = ref(-1);
-const editedItem = ref({
-  id: 0,
+const formData = ref({
+  id: null,
+  kodeKlinik: '',
   namaKlinik: '',
-  kode: '',
-  namaRuang: '',
+  ruangList: [
+    { nomorRuang: '', namaRuang: '', nomorScreen: '' }
+  ],
 });
 
-// Fungsi untuk tombol aksi
-const viewItem = (item) => {
-  editedItem.value = { ...item };
-  readOnly.value = true;
-  isEditMode.value = false;
-  showForm.value = true;
-  breadcrumbs.value = [
-    { title: 'Dashboard', disabled: false, href: '/dashboard' },
-    { title: 'Setting', disabled: false, href: '/setting' },
-    { title: 'Master Klinik Ruang', disabled: false, href: '/setting/masterklinikruang' },
-    { title: 'Detail Ruang Klinik', disabled: true, href: '/setting/viewruang' },
-  ];
-};
-
-const editItem = (item) => {
-  editedIndex.value = allRuangData.value.findIndex(d => d.id === item.id);
-  editedItem.value = { ...item };
-  isEditMode.value = true;
-  readOnly.value = false;
-  showForm.value = true;
-  breadcrumbs.value = [
-    { title: 'Dashboard', disabled: false, href: '/dashboard' },
-    { title: 'Setting', disabled: false, href: '/setting' },
-    { title: 'Master Klinik Ruang', disabled: false, href: '/setting/masterklinikruang' },
-    { title: 'Edit Ruang Klinik', disabled: true, href: '/setting/editruang' },
-  ];
-};
-
-const deleteItem = (item) => {
-  editedIndex.value = allRuangData.value.findIndex(d => d.id === item.id);
-  showDeleteDialog.value = true;
-};
-
-const confirmDelete = () => {
-  if (editedIndex.value > -1) {
-    allRuangData.value.splice(editedIndex.value, 1);
+const onKlinikChange = (kode) => {
+  const selectedKlinik = klinikList.value.find(k => k.kode === kode);
+  if (selectedKlinik) {
+    formData.value.namaKlinik = selectedKlinik.nama;
   }
-  closeDeleteDialog();
 };
 
-const cancelForm = () => {
-  showForm.value = false;
-  isEditMode.value = false;
-  readOnly.value = false;
-  editedItem.value = {
-    id: 0,
-    namaKlinik: '',
-    kode: '',
+const addRuang = () => {
+  formData.value.ruangList.push({
+    nomorRuang: '',
     namaRuang: '',
-  };
-  editedIndex.value = -1;
-  breadcrumbs.value = [
-    { title: 'Dashboard', disabled: false, href: '/dashboard' },
-    { title: 'Setting', disabled: false, href: '/setting' },
-    { title: 'Master Klinik Ruang', disabled: false, href: '/setting/masterklinikruang' },
-  ];
+    nomorScreen: ''
+  });
 };
 
-const closeDeleteDialog = () => {
-  showDeleteDialog.value = false;
-  editedIndex.value = -1;
-};
-
-const saveItem = () => {
-  if (isEditMode.value) {
-    Object.assign(allRuangData.value[editedIndex.value], editedItem.value);
-  } else {
-    const newId = allRuangData.value.length > 0 ? Math.max(...allRuangData.value.map(item => item.id)) + 1 : 1;
-    editedItem.value.id = newId;
-    allRuangData.value.push(editedItem.value);
+const removeRuang = (index) => {
+  if (formData.value.ruangList.length > 1) {
+    formData.value.ruangList.splice(index, 1);
+  }
+};
+
+const openTambahDialog = () => {
+  isEdit.value = false;
+  resetForm();
+  dialog.value = true;
+};
+
+const openEditDialog = (item) => {
+  isEdit.value = true;
+  formData.value = {
+    id: item.id,
+    kodeKlinik: item.kodeKlinik,
+    namaKlinik: item.namaKlinik,
+    ruangList: JSON.parse(JSON.stringify(item.ruangList)),
+  };
+  dialog.value = true;
+};
+
+const closeDialog = () => {
+  dialog.value = false;
+  resetForm();
+};
+
+const resetForm = () => {
+  formData.value = {
+    id: null,
+    kodeKlinik: '',
+    namaKlinik: '',
+    ruangList: [
+      { nomorRuang: '', namaRuang: '', nomorScreen: '' }
+    ],
+  };
+  if (formRef.value) {
+    formRef.value.reset();
+  }
+};
+
+const submitForm = async () => {
+  const { valid } = await formRef.value.validate();
+  
+  if (!valid) {
+    return;
+  }
+
+  if (formData.value.ruangList.length === 0) {
+    alert('Tambahkan minimal 1 ruangan');
+    return;
+  }
+
+  // Generate nama ruang untuk display di table
+  const namaRuangDisplay = formData.value.ruangList
+    .map(r => r.namaRuang)
+    .filter(n => n)
+    .join(', ');
+
+  if (isEdit.value) {
+    const index = ruangData.value.findIndex(r => r.id === formData.value.id);
+    if (index !== -1) {
+      ruangData.value[index] = {
+        ...ruangData.value[index],
+        ...formData.value,
+        namaRuang: namaRuangDisplay,
+      };
+    }
+  } else {
+    const newId = Math.max(...ruangData.value.map(r => r.id)) + 1;
+    const newNo = ruangData.value.length + 1;
+    ruangData.value.push({
+      id: newId,
+      no: newNo,
+      ...formData.value,
+      namaRuang: namaRuangDisplay,
+    });
+  }
+
+  closeDialog();
+};
+
+const deleteRuang = (item) => {
+  if (confirm(`Hapus ruangan ${item.namaRuang} dari klinik ${item.namaKlinik}?`)) {
+    const index = ruangData.value.findIndex(r => r.id === item.id);
+    if (index !== -1) {
+      ruangData.value.splice(index, 1);
+      ruangData.value.forEach((r, idx) => {
+        r.no = idx + 1;
+      });
+    }
   }
-  cancelForm();
 };
 </script>
 
 <style scoped>
-.master-klinik-ruang-page {
-  font-family: 'Roboto', sans-serif;
-  background-color: #f5f7fa;
-  min-height: 100vh;
+.page-header {
+  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.2);
 }
 
-.custom-table {
-  border: none;
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
 }
 
-.v-data-table :deep(th) {
-  font-weight: bold !important;
-  color: #333 !important;
+.header-left {
+  display: flex;
+  align-items: center;
 }
 
-.v-data-table :deep(td) {
-  vertical-align: middle;
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
 }
 
-.v-btn--icon {
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.add-btn {
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  padding: 0 24px !important;
+  height: 44px !important;
+  color: #4caf50 !important;
+}
+
+.dialog-header {
+  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
+  color: white;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.dialog-content {
+  padding: 24px !important;
+  max-height: 650px;
+  overflow-y: auto;
+}
+
+.dialog-actions {
+  padding: 16px 24px;
+  background: #f5f5f5;
+}
+
+.action-btn {
+  text-transform: none;
+  font-weight: 600;
+  min-width: 120px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #f8f9fa;
   border-radius: 8px;
+  border-left: 4px solid #4caf50;
+  margin-bottom: 16px;
 }
 
-.v-select :deep(.v-field__input) {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #424242;
 }
-</style>
+
+.ruang-list {
+  background: #f8f9fa;
+  border: 2px solid #e8f5e9;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.ruang-item {
+  background: white;
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.ruang-item:last-child {
+  margin-bottom: 0;
+}
+
+.ruang-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
+  color: white;
+  padding: 8px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 14px;
+}
+</style>
\ No newline at end of file
diff --git a/pages/Setting/MasterLoket.vue b/pages/Setting/MasterLoket.vue
new file mode 100644
index 0000000..a5e1d26
--- /dev/null
+++ b/pages/Setting/MasterLoket.vue
@@ -0,0 +1,176 @@
+<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-view-dashboard</v-icon>
+            </div>
+            <div class="header-text">
+              <h1 class="page-title">Master Loket</h1>
+              <p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
+            </div>
+          </div>
+          <v-btn 
+            color="white" 
+            @click="tambahLoket"
+            elevation="0"
+            class="add-btn"
+          >
+            <v-icon left size="20">mdi-plus-circle</v-icon>
+            Tambah Loket
+          </v-btn>
+        </div>
+      </div>
+      <TabelData
+        :headers="loketHeaders"
+        :items="loketData"
+        title="Master Loket"
+      >
+        <template #actions="{ item }">
+          <v-btn
+            small
+            color="#ff9248"
+            @click="editLoket(item)"
+            class="mr-2"
+            style="color: white"
+          >
+            Edit
+          </v-btn>
+          <v-btn 
+            small 
+            color="grey-lighten-4" 
+            @click="deleteLoket(item)"
+          >
+            Delete
+          </v-btn>
+        </template>
+      </TabelData>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TabelData from "../../components/TabelData.vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const loketHeaders = ref([
+  { title: "No", value: "no" },
+  { title: "Nama Loket", value: "namaLoket" },
+  { title: "Kuota", value: "kuota" },
+  { title: "Pelayanan", value: "pelayanan" },
+  { title: "Pembayaran", value: "pembayaran" },
+  { title: "Keterangan", value: "keterangan" },
+  { title: "Aksi", value: "aksi", sortable: false },
+]);
+
+const loketData = ref([
+  {
+    id: 1,
+    no: 1,
+    namaLoket: "Loket 1",
+    kuota: 500,
+    pelayanan: ["RADIOTERAPI", "REHAB MEDIK", "TINDAKAN"],
+    pembayaran: "JKN",
+    keterangan: "ONLINE",
+  },
+  {
+    id: 2,
+    no: 2,
+    namaLoket: "Loket 2",
+    kuota: 666,
+    pelayanan: ["JIWA", "SARAF"],
+    pembayaran: "JKN",
+    keterangan: "ONLINE",
+  },
+  {
+    id: 3,
+    no: 3,
+    namaLoket: "Loket 3",
+    kuota: 666,
+    pelayanan: ["ANESTESI", "JANTUNG"],
+    pembayaran: "JKN",
+    keterangan: "ONLINE",
+  },
+  {
+    id: 4,
+    no: 4,
+    namaLoket: "Loket 4",
+    kuota: 3676,
+    pelayanan: ["KULIT KELAMIN", "PARU"],
+    pembayaran: "JKN",
+    keterangan: "ONLINE",
+  },
+]);
+
+const editLoket = (item) => {
+  router.push({ path: `/Setting/Edit-Loket/${item.id}` });
+};
+
+const deleteLoket = (item) => {
+  const index = loketData.value.findIndex((loket) => loket.id === item.id);
+  if (index !== -1) {
+    loketData.value.splice(index, 1);
+  }
+};
+
+const tambahLoket = () => {
+  router.push({ path: "/Setting/TambahLoket" });
+};
+</script>
+
+<style scoped>
+.page-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
+}
+
+.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;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.add-btn {
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  padding: 0 24px !important;
+  height: 44px !important;
+  color: #1976d2 !important;
+}
+</style>
\ No newline at end of file
diff --git a/pages/Setting/TambahLoket.vue b/pages/Setting/TambahLoket.vue
new file mode 100644
index 0000000..6d85098
--- /dev/null
+++ b/pages/Setting/TambahLoket.vue
@@ -0,0 +1,310 @@
+<template>
+  <v-container>
+    <v-card class="form-card" elevation="0">
+      <!-- Header -->
+      <div class="form-header">
+        <div class="header-content">
+          <div class="header-left">
+            <v-btn
+              icon
+              variant="text"
+              color="white"
+              @click="cancelAdd"
+              class="back-btn"
+            >
+              <v-icon>mdi-arrow-left</v-icon>
+            </v-btn>
+            <div class="header-text">
+              <h1 class="page-title">Tambah Loket Baru</h1>
+              <p class="page-subtitle">Isi form untuk menambahkan loket</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Form Content -->
+      <v-card-text class="form-content">
+        <v-form @submit.prevent="simpanLoket" ref="formRef">
+          <!-- Section: Informasi Loket -->
+          <div class="form-section">
+            <h3 class="section-title">Informasi Loket</h3>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  label="Nama Loket"
+                  v-model="loket.namaLoket"
+                  variant="outlined"
+                  density="comfortable"
+                  :rules="[v => !!v || 'Nama loket harus diisi']"
+                  required
+                  hide-details="auto"
+                  class="form-field"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  label="Kuota Bangku"
+                  v-model="loket.kuota"
+                  type="number"
+                  variant="outlined"
+                  density="comfortable"
+                  :rules="[v => !!v || 'Kuota harus diisi', v => v > 0 || 'Kuota harus lebih dari 0']"
+                  required
+                  hide-details="auto"
+                  class="form-field"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </div>
+
+          <!-- Section: Konfigurasi -->
+          <div class="form-section">
+            <h3 class="section-title">Konfigurasi</h3>
+            <v-row>
+              <v-col cols="12" md="4">
+                <v-select
+                  label="Status Pelayanan"
+                  :items="['RAWAT JALAN', 'RAWAT INAP']"
+                  v-model="loket.statusPelayanan"
+                  variant="outlined"
+                  density="comfortable"
+                  :rules="[v => !!v || 'Status pelayanan harus dipilih']"
+                  required
+                  hide-details="auto"
+                  class="form-field"
+                ></v-select>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-select
+                  label="Pembayaran"
+                  :items="['JKN', 'UMUM', 'SPM', 'JKMM', 'JAMPERSAL', 'T4', 'KARYAWAN']"
+                  v-model="loket.pembayaran"
+                  variant="outlined"
+                  density="comfortable"
+                  :rules="[v => !!v || 'Pembayaran harus dipilih']"
+                  required
+                  hide-details="auto"
+                  class="form-field"
+                ></v-select>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-select
+                  label="Keterangan"
+                  :items="['ONLINE', 'OFFLINE']"
+                  v-model="loket.keterangan"
+                  variant="outlined"
+                  density="comfortable"
+                  :rules="[v => !!v || 'Keterangan harus dipilih']"
+                  required
+                  hide-details="auto"
+                  class="form-field"
+                ></v-select>
+              </v-col>
+            </v-row>
+          </div>
+
+          <!-- Section: Pelayanan -->
+          <div class="form-section">
+            <h3 class="section-title">Pilih Pelayanan</h3>
+            <div class="table-wrapper">
+              <TabelLayanan
+                :headers="serviceHeaders"
+                :items="availableServices"
+                v-model:selected-items="loket.pelayanan"
+              />
+            </div>
+          </div>
+
+          <!-- Action Buttons -->
+          <div class="form-actions">
+            <v-btn
+              color="#1976d2"
+              type="submit"
+              size="large"
+              class="action-btn save-btn"
+            >
+              <v-icon left>mdi-content-save</v-icon>
+              Simpan Loket
+            </v-btn>
+            <v-btn
+              color="grey-lighten-2"
+              @click="cancelAdd"
+              size="large"
+              class="action-btn cancel-btn"
+            >
+              <v-icon left>mdi-close</v-icon>
+              Batal
+            </v-btn>
+          </div>
+        </v-form>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import TabelLayanan from '../../components/TabelLayanan.vue';
+
+const router = useRouter();
+const formRef = ref(null);
+
+const loket = ref({
+  namaLoket: '',
+  kuota: null,
+  statusPelayanan: '',
+  pembayaran: '',
+  keterangan: '',
+  pelayanan: [],
+});
+
+const serviceHeaders = ref([
+  { title: '#', value: 'no', sortable: false },
+  { title: 'Kode', value: 'id' },
+  { title: 'Klinik', value: 'nama' },
+  { title: 'Pilih', value: 'pilih', sortable: false },
+]);
+
+const availableServices = ref([
+  { no: 1, id: 'AN', nama: 'ANAK' },
+  { no: 2, id: 'AS', nama: 'ANESTESI' },
+  { no: 3, id: 'BD', nama: 'BEDAH' },
+  { no: 4, id: 'GR', nama: 'GERIATRI' },
+  { no: 5, id: 'GI', nama: 'GIGI DAN MULUT' },
+  { no: 6, id: 'GZ', nama: 'GIZI' },
+  { no: 7, id: 'HO', nama: 'HOM' },
+  { no: 8, id: 'IP', nama: 'IPD' },
+  { no: 9, id: 'JT', nama: 'JANTUNG' },
+  { no: 10, id: 'JW', nama: 'JIWA' },
+  { no: 11, id: 'KK', nama: 'KULIT KELAMIN' },
+  { no: 12, id: 'PR', nama: 'PARU' },
+  { no: 13, id: 'RT', nama: 'RADIOTERAPI' },
+  { no: 14, id: 'RM', nama: 'REHAB MEDIK' },
+  { no: 15, id: 'SR', nama: 'SARAF' },
+  { no: 16, id: 'TD', nama: 'TINDAKAN' },
+]);
+
+const simpanLoket = async () => {
+  const { valid } = await formRef.value.validate();
+  
+  if (!valid) {
+    return;
+  }
+
+  // Validasi pelayanan
+  if (loket.value.pelayanan.length === 0) {
+    alert('Pilih minimal 1 pelayanan');
+    return;
+  }
+
+  // Dalam aplikasi nyata, ini adalah tempat untuk memanggil API create data
+  console.log('Data loket baru:', loket.value);
+  
+  // Kembali ke halaman master
+  router.push('/Setting/Master-Loket');
+};
+
+const cancelAdd = () => {
+  router.back();
+};
+</script>
+
+<style scoped>
+.form-card {
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid #e0e0e0;
+}
+
+.form-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.2);
+}
+
+.header-content {
+  padding: 28px 32px;
+  color: white;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.back-btn {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.page-title {
+  font-size: 26px;
+  font-weight: 700;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 14px;
+}
+
+.form-content {
+  padding: 32px !important;
+  background: #fafafa;
+}
+
+.form-section {
+  background: white;
+  padding: 24px;
+  border-radius: 12px;
+  margin-bottom: 24px;
+  border: 1px solid #e0e0e0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1976d2;
+  margin: 0 0 20px 0;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e3f2fd;
+}
+
+.form-field {
+  margin-bottom: 4px;
+}
+
+.table-wrapper {
+  background: #fafafa;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  padding: 24px;
+  background: white;
+  border-radius: 12px;
+  border: 1px solid #e0e0e0;
+}
+
+.action-btn {
+  text-transform: none;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  min-width: 140px;
+}
+
+.save-btn {
+  color: white;
+}
+
+.cancel-btn {
+  color: #616161;
+}
+</style>
\ No newline at end of file
diff --git a/server/api/auth/session.get.ts b/server/api/auth/session.get.ts
index b809c6c..0d6d81b 100644
--- a/server/api/auth/session.get.ts
+++ b/server/api/auth/session.get.ts
@@ -2,94 +2,93 @@
 
 // Helper function to safely decode the JWT payload (Access Token or ID Token)
 const decodeTokenPayload = (token: string | undefined): any | null => {
-    if (!token) return null;
-    try {
-        // Tokens are base64 encoded and separated by '.'
-        const parts = token.split('.');
-        if (parts.length < 2) return null; // Not a valid JWT format
-        
-        const payloadBase64 = parts[1];
-        
-        // Decode from base64 and parse the JSON
-        // Note: Using Buffer.from is standard in Node.js server environments (like Nitro/H3)
-        return JSON.parse(Buffer.from(payloadBase64, 'base64').toString());
-    } catch (e) {
-        console.error('❌ Failed to decode token payload:', e);
-        return null;
-    }
+  if (!token) return null;
+  try {
+    // Tokens are base64 encoded and separated by '.'
+    const parts = token.split(".");
+    if (parts.length < 2) return null; // Not a valid JWT format
+
+    const payloadBase64 = parts[1];
+
+    // Decode from base64 and parse the JSON
+    // Note: Using Buffer.from is standard in Node.js server environments (like Nitro/H3)
+    return JSON.parse(Buffer.from(payloadBase64, "base64").toString());
+  } catch (e) {
+    console.error("❌ Failed to decode token payload:", e);
+    return null;
+  }
 };
 
 // --- START OF THE SINGLE EXPORT DEFAULT HANDLER ---
 export default defineEventHandler(async (event) => {
-    console.log('🔍 Session endpoint called');
+  console.log("🔍 Session endpoint called");
 
-    const sessionCookie = getCookie(event, 'user_session');
-    console.log('🍪 Session cookie exists:', !!sessionCookie);
+  const sessionCookie = getCookie(event, "user_session");
+  console.log("🍪 Session cookie exists:", !!sessionCookie);
 
-    if (!sessionCookie) {
-        console.log('❌ No session cookie found');
-        throw createError({
-            statusCode: 401,
-            statusMessage: 'No session cookie found'
-        });
+  if (!sessionCookie) {
+    console.log("❌ No session cookie found");
+    throw createError({
+      statusCode: 401,
+      statusMessage: "No session cookie found",
+    });
+  }
+
+  try {
+    const session = JSON.parse(sessionCookie);
+    console.log("📋 Session parsed successfully");
+
+    const isExpired = Date.now() > session.expiresAt;
+    console.log("   Is Expired:", isExpired);
+
+    // Check if the token has expired
+    if (isExpired) {
+      console.log("⏰ Session has expired, clearing cookie");
+      deleteCookie(event, "user_session");
+      throw createError({
+        statusCode: 401,
+        statusMessage: "Session expired",
+      });
     }
 
-    try {
-        const session = JSON.parse(sessionCookie);
-        console.log('📋 Session parsed successfully');
-        
-        const isExpired = Date.now() > session.expiresAt;
-        console.log('   Is Expired:', isExpired);
+    // Decode tokens and prepare the enhanced response data
+    const idTokenPayload = decodeTokenPayload(session.idToken);
+    const accessTokenPayload = decodeTokenPayload(session.accessToken);
 
-        // Check if the token has expired
-        if (isExpired) {
-            console.log('⏰ Session has expired, clearing cookie');
-            deleteCookie(event, 'user_session');
-            throw createError({
-                statusCode: 401,
-                statusMessage: 'Session expired'
-            });
-        }
+    // Final response object for the frontend debug page
+    const sessionResponse = {
+      // Basic User Info
+      user: session.user,
 
-        // Decode tokens and prepare the enhanced response data
-        const idTokenPayload = decodeTokenPayload(session.idToken);
-        const accessTokenPayload = decodeTokenPayload(session.accessToken);
-        
-        // Final response object for the frontend debug page
-        const sessionResponse = {
-            // Basic User Info
-            user: session.user,
-            
-            // Raw Tokens
-            idToken: session.idToken,
-            accessToken: session.accessToken,
-            refreshToken: session.refreshToken,
-            
-            // Session Timestamps
-            expiresAt: session.expiresAt,
-            createdAt: session.createdAt,
+      // Raw Tokens
+      idToken: session.idToken,
+      accessToken: session.accessToken,
+      refreshToken: session.refreshToken,
 
-            // Parsed Payloads
-            idTokenPayload: idTokenPayload,
-            accessTokenPayload: accessTokenPayload,
+      // Session Timestamps
+      expiresAt: session.expiresAt,
+      createdAt: session.createdAt,
 
-            // Raw Session Data (for Debug section)
-            fullSessionObject: session,
-            
-            status: 'authenticated',
-        };
+      // Parsed Payloads
+      idTokenPayload: idTokenPayload,
+      accessTokenPayload: accessTokenPayload,
 
-        console.log('✅ Session is valid, returning full session data');
-        return sessionResponse;
+      // Raw Session Data (for Debug section)
+      fullSessionObject: session,
 
-    } catch (parseError) {
-        console.error('❌ Failed to parse session cookie:', parseError);
-        // If JSON parsing fails or any other error occurs, the session is invalid
-        deleteCookie(event, 'user_session');
-        throw createError({
-            statusCode: 401,
-            statusMessage: 'Invalid session data'
-        });
-    }
+      status: "authenticated",
+    };
+
+    console.log("✅ Session is valid, returning full session data");
+    return sessionResponse;
+  } catch (parseError) {
+    console.error("❌ Failed to parse session cookie:", parseError);
+    // If JSON parsing fails or any other error occurs, the session is invalid
+    deleteCookie(event, "user_session");
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Invalid session data",
+    });
+  }
 });
-// --- END OF THE SINGLE EXPORT DEFAULT HANDLER ---
\ No newline at end of file
+// --- END OF THE SINGLE EXPORT DEFAULT HANDLER ---
diff --git a/stores/navItems.ts b/stores/navItems.ts
index 09092b2..069fbae 100644
--- a/stores/navItems.ts
+++ b/stores/navItems.ts
@@ -1,59 +1,55 @@
 // stores/navItems.ts
 import { defineStore } from 'pinia';
 import { useLocalStorage } from '@vueuse/core';
+import { computed } from 'vue'; // Import computed dari Vue
 
 interface NavItem {
   id: number;
-  name: string;
-  path: string;
+  name: string; // Menggantikan 'title'
+  path: string; // Menggantikan 'to'
   icon: string;
   children?: NavItem[];
+  badge?: string; // Tambahkan properti badge
 }
 
 // Initial default navigation items
 const defaultNavItems: NavItem[] = [
   { id: 1, name: "Dashboard", icon: "mdi-view-dashboard", path: "/dashboard" },
-  // Add other main menu items
-  { id: 2, name: "Loket Admin", icon: "mdi-account-supervisor", path: "/LoketAdmin" },
-  { id: 3, name: "Ranap Admin", icon: "mdi-bed", path: "/RanapAdmin" },
-  { id: 4, name: "Klinik Admin", icon: "mdi-hospital-box", path: "/KlinikAdmin" },
-  { id: 5, name: "Klinik Ruang Admin", icon: "mdi-hospital-marker", path: "/KlinikRuangAdmin" },
+  { id: 2, name: "Verifikasi Akun", icon: "mdi-account-check-outline", path:"/VerifikasiAkun" },
+  { 
+    id: 3, 
+    name: "Check In", 
+    icon: "mdi-file-document-edit-outline", 
+    path: "/CheckIn"
+    // badge: "3", 
+  },
+  { id: 4, name: "Admin Loket", icon: "mdi-account-supervisor-outline", path: "/AdminLoket" },
+  { id: 5, name: "Admin Klinik", icon: "mdi-text-box-plus-outline", path: "/AdminKlinik" },
+  { id: 6, name: "Admin Penunjang", icon: "mdi-plus-box-outline", path: "/AdminPenunjang" },
+  { id: 7, name: "Buat Antrean", icon: "mdi-account-multiple-plus-outline", path: "/BuatAntrean" },
+  { id: 8, name: "Monitoring Pasien", icon: "mdi-account-group-outline", path: "/data-pasien" },
   {
-    id: 6,
-    name: "Anjungan",
-    icon: "mdi-account-box-multiple",
+    id: 9,
+    name: "Layar Informasi",
+    icon: "mdi-monitor-multiple",
     path: "",
     children: [
-      { id: 7, name: "Anjungan", path: "/Anjungan/Anjungan", icon: "mdi-account-box" },
-      { id: 8, name: "Admin Anjungan", path: "/Anjungan/AdminAnjungan", icon: "mdi-account-cog" },
+      { id: 10, name: "Anjungan", path: "/anjungan/anjungan", icon: "mdi-circle-small" },
+      { id: 11, name: "Klinik Ruang", path: "/anjungan/AntrianKlinik", icon: "mdi-circle-small" },
     ],
   },
-  { id: 9, name: "Fast Track", icon: "mdi-clock-fast", path: "/FastTrack" },
-  { id: 10, name: "Data Pasien", icon: "mdi-account-multiple", path: "/DataPasien" },
-  {
-    id: 11,
-    name: "Screen",
-    icon: "mdi-monitor",
+    {
+    id: 12,
+    name: "Master Data",
+    icon: "mdi-cog-outline",
     path: "",
     children: [
-      { id: 12, name: "Antrian Masuk 1", path: "/Screen/Antrian Masuk 1", icon: "mdi-monitor" },
-      { id: 13, name: "Antrian Masuk 2", path: "/Screen/Antrian Masuk 2", icon: "mdi-monitor" },
-      // ... more screen pages
-    ],
-  },
-  { id: 14, name: "List Pasien", icon: "mdi-format-list-bulleted", path: "/ListPasien" },
-   {
-    id: 15 ,
-    name: "Setting",
-    icon: "mdi-cog",
-    path: "",
-    children: [
-      { id: 16, name: "Hak Akses", path: "/setting/HakAkses", icon: "mdi-shield-lock-outline" },
-      { id: 17, name: "User Login", path: "/setting/UserLogin", icon: "mdi-account-circle" },
-      { id: 18, name: "Master Loket", path: "/setting/MasterLoket", icon: "mdi-counter" },
-      { id: 19, name: "Master Klinik", path: "/setting/MasterKlinik", icon: "mdi-hospital" },
-      { id: 20, name: "Master Klinik Ruang", path: "/setting/MasterKlinikRuang", icon: "mdi-hospital-box" },
-      { id: 21, name: "Screen", path: "/setting/Screen", icon: "mdi-monitor" },
+      { id: 13, name: "Hak Akses", path: "/setting/hak-akses", icon: "mdi-circle-small" },
+      { id: 14, name: "User Login", path: "/setting/user-login", icon: "mdi-circle-small" },
+      { id: 15, name: "Master Loket", path: "/setting/masterloket", icon: "mdi-circle-small" },
+      { id: 16, name: "Master Klinik", path: "/setting/masterklinik", icon: "mdi-circle-small" },
+      { id: 17, name: "Master Klinik Ruang", path: "/setting/masterklinikruang", icon: "mdi-circle-small" },
+      { id: 18, name: "Screen", path: "/setting/screen", icon: "mdi-circle-small" },
     ],
   },
 ];
@@ -61,8 +57,18 @@ const defaultNavItems: NavItem[] = [
 export const useNavItemsStore = defineStore('navItems', () => {
   const navItems = useLocalStorage<NavItem[]>('navItems', defaultNavItems);
 
+  // === GETTER PENTING UNTUK MENGATASI MASALAH 'NULL' DI AWAL ===
+  const getNavItems = computed(() => {
+    // Jika navItems.value null, undefined, atau bukan array yang valid, 
+    // kembalikan array default.
+    if (!Array.isArray(navItems.value) || navItems.value === null || navItems.value === undefined) {
+      return defaultNavItems; 
+    }
+    return navItems.value;
+  });
+  // =============================================================
+
   function updateNavItems(newItems: NavItem[]) {
-    // This will update the local storage and the state
     navItems.value = newItems.map((item, index) => ({
       ...item,
       id: index + 1
@@ -76,6 +82,7 @@ export const useNavItemsStore = defineStore('navItems', () => {
 
   return {
     navItems,
+    getNavItems, // Diekspor untuk digunakan di Sidebar
     updateNavItems,
     addNavItem,
   };

From d7f3240a8226d36d66c5dc319c7a665539d5d8e3 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Tue, 21 Oct 2025 08:31:00 +0700
Subject: [PATCH 2/3] Update flow anjungan

---
 components/ProfilePopup.vue |    1 -
 components/SideBar.vue      |  364 +++++-------
 composables/useQueue.js     |  181 ++++++
 nuxt.config.ts              |    2 +-
 pages/AdminKlinik.vue       | 1032 +++++++++++++++++++++-----------
 pages/AdminLoket.vue        |  622 +++++++++-----------
 pages/AdminPenunjang.vue    |  694 ++++++++++++++++++++++
 pages/Anjungan/Anjungan.vue |  647 ++++++++++----------
 pages/FastTrack.txt         | 1106 -----------------------------------
 pages/LoketAdmin1.text      |  526 -----------------
 stores/queueStore.js        |  354 +++++++++++
 11 files changed, 2665 insertions(+), 2864 deletions(-)
 create mode 100644 composables/useQueue.js
 create mode 100644 pages/AdminPenunjang.vue
 delete mode 100644 pages/FastTrack.txt
 delete mode 100644 pages/LoketAdmin1.text
 create mode 100644 stores/queueStore.js

diff --git a/components/ProfilePopup.vue b/components/ProfilePopup.vue
index 3426985..3682b92 100644
--- a/components/ProfilePopup.vue
+++ b/components/ProfilePopup.vue
@@ -5,7 +5,6 @@
     location="top end"
     origin="bottom right"
     transition="slide-y-transition"
-    open-on-hover
   >
     <template v-slot:activator="{ props: menuProps }">
       <v-list-item
diff --git a/components/SideBar.vue b/components/SideBar.vue
index 23ca8cc..d8802a3 100644
--- a/components/SideBar.vue
+++ b/components/SideBar.vue
@@ -1,249 +1,187 @@
-<!-- components/sideBar.vue -->
 <template>
   <v-navigation-drawer
-    v-model="drawer"
+    :model-value="drawer"
     :rail="rail"
     permanent
     app
-    color="white"
-    width="280"
-    rail-width="72"
+    class="bg-white d-flex flex-column" @update:model-value="emit('update:drawer', $event)"
+    
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
   >
-    <div class="pa-4 d-flex align-center" style="height: 64px">
-      <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-list-item
+      class="py-4 px-2"
+      :class="{'text-center': rail}"
+    >
+      <div class="d-flex align-center" :class="{'justify-center': rail}">
+        <v-icon color="orange-darken-2" size="36">mdi-hospital-box-outline</v-icon>
+        <v-list-item-title v-if="!rail" class="ml-2 text-h6 font-weight-bold text-blue-grey-darken-4">
+          <span class="text-orange-darken-2">Antrian</span> RSSA
+        </v-list-item-title>
+      </div>
+    </v-list-item>
     <v-divider></v-divider>
 
-    <v-list density="default" nav class="py-2">
-      <!-- search bar
-      <v-list-item
-        prepend-icon="mdi-magnify"
-        :title="!rail ? 'Search' : ''"
-        rounded="lg"
-        class="mx-2 my-1"
-      >
-      </v-list-item> -->
+    <v-list 
+        density="compact" 
+        nav 
+        class="mt-2 flex-grow-1" v-model:opened="openedGroups"
+    > 
+        <template v-for="item in items" :key="item.name">
+            <v-list-group 
+                v-if="item.children"
+                :value="item.name"
+                :disabled="rail"
+            >
+                <template v-slot:activator="{ props: groupProps }">
+                    <v-list-item
+                        v-bind="groupProps"
+                        :prepend-icon="item.icon"
+                        :title="item.name"
+                        color="orange-darken-2"
+                        active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
+                    ></v-list-item>
+                </template>
 
-      <template v-for="item in navItemsStore.getNavItems" :key="item.id">
-
-        <v-menu
-          v-if="item.children && item.children.length > 0"
-          open-on-hover
-          location="end"
-          :disabled="!rail"
-        >
-          <template v-slot:activator="{ props }">
-            <v-list-group v-if="!rail" :value="item.name">
-              <template v-slot:activator="{ props: listGroupProps }">
                 <v-list-item
-                  v-bind="listGroupProps"
-                  :prepend-icon="item.icon"
-                  :title="item.name"
-                  :active="item.name === currentActiveMenu"
-                  rounded="lg"
-                  class="mx-2 my-1"
-                >
-                </v-list-item>
-              </template>
-              <v-list-item
-                v-for="child in item.children"
-                :key="child.id"
-                :to="child.path"
-                :title="child.name"
-                :active="child.path === currentRoute.path"
-                rounded="lg"
-                class="mx-2 my-1 pl-12"
-              >
-              </v-list-item>
+                    v-for="child in item.children"
+                    :key="child.name"
+                    :to="child.path"
+                    :title="child.name"
+                    :prepend-icon="child.icon"
+                    link
+                    class="pl-8"
+                    color="orange-darken-2"
+                    active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
+                ></v-list-item>
             </v-list-group>
 
-            <v-list-item
-              v-else
-              v-bind="props"
-              :prepend-icon="item.icon"
-              :active="item.name === currentActiveMenu"
-              rounded="lg"
-              class="mx-2 my-1"
+            <v-tooltip
+                v-else
+                :disabled="!rail"
+                open-on-hover
+                location="end"
+                :text="item.name"
             >
-            </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.name }}
-              </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.id"
-              :to="child.path"
-              :title="child.name"
-              :active="child.path === 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.name : ''"
-          :to="item.path"
-          :active="item.path === currentRoute.path"
-          rounded="lg"
-          class="mx-2 my-1"
-        >
-          <template v-slot:append v-if="item.badge && !rail">
-            <v-chip size="x-small" color="error" variant="flat">{{
-              item.badge
-            }}</v-chip>
-          </template>
-        </v-list-item>
-      </template>
-
-      <v-divider class="my-4 mx-2"></v-divider>
+                <template #activator="{ props: tooltipProps }">
+                    <v-list-item
+                        v-bind="tooltipProps"
+                        :prepend-icon="item.icon"
+                        :title="item.name"
+                        :to="item.path"
+                        link
+                        color="orange-darken-2"
+                        active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
+                    ></v-list-item>
+                </template>
+            </v-tooltip>
+        </template>
     </v-list>
+
+    <v-divider></v-divider>
+    
+    <v-list v-if="user" nav density="compact" class="pa-2 flex-shrink-0">
+      <ProfilePopup
+        :user="user"
+        @logout="handleLogout"
+        :rail="rail"
+      />
+    </v-list>
+    <v-list v-else nav density="compact" class="flex-shrink-0">
+      <v-list-item 
+        @click="redirectToLogin" 
+        prepend-icon="mdi-login" 
+        title="Login" 
+        link 
+        color="blue-grey-darken-4"
+      ></v-list-item>
+    </v-list>
+
   </v-navigation-drawer>
 </template>
+<script setup lang="ts">
+import { defineProps, defineEmits, onMounted, ref, watch } from 'vue'; 
+import { navigateTo } from '#app';
+import ProfilePopup from './ProfilePopup.vue';
+import { useAuth } from '~/composables/useAuth';
 
-<script setup>
-import { ref, computed } from "vue";
-import { useRoute } from "vue-router";
-import { useNavItemsStore } from "@/stores/navItems"; 
-import ProfilePopup from "./ProfilePopup.vue";
-import { useAuth } from "~/composables/useAuth";
+const { user, logout, checkAuth } = useAuth();
 
-// State
-const drawer = ref(true);
-const rail = ref(true);
-const hoverTimeout = ref(null);
+interface NavItem {
+  id: number;
+  name: string;
+  path: string;
+  icon: string;
+  children?: NavItem[];
+}
 
-// Akses Pinia Store
-const user = ref({
-    name: 'Adam Sulfat',
-    email: 'adam@rssa.com',
-    picture: 'https://i.pravatar.cc/150?img=33', 
-    id: 'a1b2c3d4e5f6g7h8'
-});
-const navItemsStore = useNavItemsStore();
-
-const currentRoute = useRoute();
-
-const currentActiveMenu = computed(() => {
-
-  const items = navItemsStore.getNavItems; 
-
-
-  if (!Array.isArray(items) || items.length === 0) {
-    return "";
-  }
-
-  // Cari item utama yang sedang aktif
-  const currentItem = items.find((item) => item.path === currentRoute.path);
-  if (currentItem) {
-    return currentItem.name;
-  }
-
-  // Cari item anak (children) yang sedang aktif
-  for (const item of items) {
-    if (item.children && Array.isArray(item.children)) { 
-      const childItem = item.children.find(
-        (child) => child.path === currentRoute.path 
-      );
-      if (childItem) {
-        return item.name;
-      }
-    }
-  }
-  return "";
+const props = defineProps({
+  items: {
+    type: Array as () => NavItem[],
+    required: true,
+  },
+  rail: {
+    type: Boolean,
+    required: true,
+  },
+  drawer: {
+    type: Boolean,
+    required: true,
+  },
 });
 
-// Hover handlers
+const emit = defineEmits(['update:drawer', 'toggle-rail']);
+
+
+const openedGroups = ref<string[]>([]);
+
+
+watch(() => props.rail, (newRailState) => {
+  if (newRailState === true) {
+  
+    openedGroups.value = [];
+  }
+});
+
+
+const isHovering = ref(false);
+
+
+
 const handleMouseEnter = () => {
-  if (hoverTimeout.value) {
-    clearTimeout(hoverTimeout.value);
+  if (props.rail) {
+    isHovering.value = true;
+    emit('toggle-rail'); 
   }
-  hoverTimeout.value = setTimeout(() => {
-    rail.value = false;
-  }, 100);
 };
 
 const handleMouseLeave = () => {
-  if (hoverTimeout.value) {
-    clearTimeout(hoverTimeout.value);
+  if (isHovering.value) {
+    isHovering.value = false;
+    emit('toggle-rail');
   }
-  hoverTimeout.value = setTimeout(() => {
-    rail.value = true;
-  }, 200);
 };
 
-const handleLogout = () => {
-  console.log("Logging out...");
-  // Tambahkan logika logout di sini
+// --- AUTH LOGIC (Kept the same) ---
+
+const handleLogout = async () => {
+  console.log('🚪 SideBar logout initiated...');
+  try {
+    await logout(); 
+  } catch (error) {
+    console.error('❌ SideBar logout error:', error);
+  }
 };
+
+const redirectToLogin = () => {
+  navigateTo('/LoginPage');
+};
+
+onMounted(async () => {
+    await checkAuth(); 
+});
 </script>
 
 <style scoped>
-.v-list-item--active {
-  background-color: #e3f2fd !important;
-  color: #1976d2 !important;
-}
-
-.v-list-item--active :deep(.v-list-item__prepend) {
-  color: #1976d2 !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;
-  transition: width 0.2s ease-in-out !important;
-}
-
-.hover-bg:hover {
-  background-color: #f5f5f5;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-/* Custom scrollbar */
-:deep(.v-navigation-drawer__content) {
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-:deep(.v-navigation-drawer__content)::-webkit-scrollbar {
-  width: 6px;
-}
-
-:deep(.v-navigation-drawer__content)::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-:deep(.v-navigation-drawer__content)::-webkit-scrollbar-thumb {
-  background: #ccc;
-  border-radius: 3px;
-}
-
-:deep(.v-navigation-drawer__content)::-webkit-scrollbar-thumb:hover {
-  background: #999;
-}
+/* No specific overrides needed */
 </style>
\ No newline at end of file
diff --git a/composables/useQueue.js b/composables/useQueue.js
new file mode 100644
index 0000000..1a342fb
--- /dev/null
+++ b/composables/useQueue.js
@@ -0,0 +1,181 @@
+// composables/useQueue.js
+import { ref, computed } from 'vue';
+import { useQueueStore } from '../stores/queueStore';
+
+export const useQueue = (adminType = 'loket') => {
+  const queueStore = useQueueStore();
+  
+  // Local state
+  const snackbar = ref(false);
+  const snackbarText = ref('');
+  const snackbarColor = ref('success');
+
+  // Dialog states
+  const showKlinikDialog = ref(false);
+  const showPenunjangDialog = ref(false);
+  const showChangeKlinikDialog = ref(false);
+  const klinikSearch = ref('');
+  const penunjangSearch = ref('');
+  const changeKlinikSearch = ref('');
+  const selectedPatientForPenunjang = ref(null);
+
+  // Computed from store - filtered by stage
+  const currentProcessingPatient = queueStore.getCurrentProcessing(adminType);
+  
+  // Get patients based on admin type stage - ISOLATED PER ADMIN
+  const stagePatients = computed(() => {
+    return queueStore.getPatientsByStage(adminType).value;
+  });
+
+  // Tabel "Di Loket" - hanya untuk stage admin ini
+  const diLoketPatients = computed(() => stagePatients.value.diLoket);
+  
+  // Tabel "Terlambat" - hanya untuk stage admin ini
+  const terlambatPatients = computed(() => stagePatients.value.terlambat);
+  
+  // Tabel "Pending" - hanya untuk stage admin ini
+  const pendingPatients = computed(() => stagePatients.value.pending);
+  
+  // Pasien waiting - hanya untuk stage admin ini
+  const waitingPatients = computed(() => stagePatients.value.waiting);
+  
+  const nextPatient = computed(() => {
+    return waitingPatients.value[0] || null;
+  });
+
+  // Total pasien hanya untuk stage admin ini
+  const totalPasien = computed(() => 
+    queueStore.getTotalPasienByStage(adminType).value
+  );
+  
+  const quotaUsed = computed(() => queueStore.quotaUsed);
+
+  // Filtered lists
+  const filteredKliniks = computed(() => {
+    if (!klinikSearch.value) return queueStore.kliniks;
+    return queueStore.kliniks.filter((k) =>
+      k.name.toLowerCase().includes(klinikSearch.value.toLowerCase())
+    );
+  });
+
+  const filteredPenunjangs = computed(() => {
+    if (!penunjangSearch.value) return queueStore.penunjangs;
+    return queueStore.penunjangs.filter((p) =>
+      p.name.toLowerCase().includes(penunjangSearch.value.toLowerCase())
+    );
+  });
+
+  const filteredChangeKliniks = computed(() => {
+    if (!changeKlinikSearch.value) return queueStore.kliniks;
+    return queueStore.kliniks.filter((k) =>
+      k.name.toLowerCase().includes(changeKlinikSearch.value.toLowerCase())
+    );
+  });
+
+  // Methods
+  const showSnackbar = (text, color = 'success') => {
+    snackbarText.value = text;
+    snackbarColor.value = color;
+    snackbar.value = true;
+  };
+
+  const callNext = () => {
+    const result = queueStore.callNext(adminType);
+    showSnackbar(result.message, result.success ? 'success' : 'warning');
+  };
+
+  const callMultiplePatients = (count) => {
+    const result = queueStore.callMultiplePatients(count, adminType);
+    showSnackbar(result.message, result.success ? 'success' : 'warning');
+  };
+
+  const processPatient = (patient, action) => {
+    const result = queueStore.processPatient(patient, action, adminType);
+    
+    let color = 'success';
+    if (action === 'terlambat') color = 'warning';
+    else if (action === 'pending') color = 'info';
+    
+    showSnackbar(result.message, color);
+  };
+
+  const selectKlinik = (klinik) => {
+    const result = queueStore.createAntreanKlinik(klinik, adminType);
+    showSnackbar(result.message, 'success');
+    showKlinikDialog.value = false;
+  };
+
+  const selectPenunjang = (penunjang) => {
+    const result = queueStore.createAntreanPenunjang(
+      penunjang,
+      selectedPatientForPenunjang.value,
+      adminType
+    );
+    showSnackbar(result.message, 'success');
+    showPenunjangDialog.value = false;
+    selectedPatientForPenunjang.value = null;
+  };
+
+  const openPenunjangDialog = (patient = null) => {
+    selectedPatientForPenunjang.value = patient;
+    showPenunjangDialog.value = true;
+  };
+
+  const changeKlinik = (klinik) => {
+    if (currentProcessingPatient.value) {
+      const result = queueStore.changeKlinik(
+        currentProcessingPatient.value,
+        klinik,
+        adminType
+      );
+      showSnackbar(result.message, result.success ? 'success' : 'error');
+      showChangeKlinikDialog.value = false;
+    }
+  };
+
+  const getRowClass = (item) => {
+    if (item.status === 'current') {
+      return 'text-success font-weight-bold';
+    }
+    return '';
+  };
+
+  return {
+    // State
+    snackbar,
+    snackbarText,
+    snackbarColor,
+    showKlinikDialog,
+    showPenunjangDialog,
+    showChangeKlinikDialog,
+    klinikSearch,
+    penunjangSearch,
+    changeKlinikSearch,
+    selectedPatientForPenunjang,
+    
+    // Computed
+    currentProcessingPatient,
+    diLoketPatients,
+    terlambatPatients,
+    pendingPatients,
+    waitingPatients,
+    nextPatient,
+    totalPasien,
+    quotaUsed,
+    filteredKliniks,
+    filteredPenunjangs,
+    filteredChangeKliniks,
+    stagePatients,
+    
+    // Methods
+    showSnackbar,
+    callNext,
+    callMultiplePatients,
+    processPatient,
+    selectKlinik,
+    selectPenunjang,
+    openPenunjangDialog,
+    changeKlinik,
+    getRowClass,
+  };
+};
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d99bfd7..609435d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -15,7 +15,7 @@ export default defineNuxtConfig({
     '@nuxt/test-utils',
     '@nuxt/ui',
     '@pinia/nuxt',
-    'nuxt-qrcode',
+    
     // Remove '@sidebase/nuxt-auth' completely
     (_options, nuxt) => {
       nuxt.hooks.hook('vite:extendConfig', (config) => {
diff --git a/pages/AdminKlinik.vue b/pages/AdminKlinik.vue
index ead0315..2115d16 100644
--- a/pages/AdminKlinik.vue
+++ b/pages/AdminKlinik.vue
@@ -1,372 +1,746 @@
+<!-- pages/AdminKlinik.vue -->
 <template>
-  <v-main class="bg-grey-lighten-3">
-    <v-container fluid class="pa-6">
-
-      <!-- Colored Header with Quota Chip -->
-      <v-card class="elevation-4 rounded-xl mb-6 header-banner d-flex align-center justify-space-between pa-4">
-        <div class="d-flex align-center">
-          <v-icon size="48" color="white" class="mr-4">mdi-account-group-outline</v-icon>
-          <h1 class="text-h4 font-weight-bold text-white">Klinik Admin</h1>
-        </div>
-        <v-tooltip text="Jumlah Maksimal Bangku Tersedia" location="bottom">
-          <template v-slot:activator="{ props }">
-            <v-chip
-              v-bind="props"
-              class="text-white px-4 py-2"
-              color="green-lighten-1"
-              variant="flat"
-              rounded="xl"
-            >
-              <v-icon start>mdi-chair-rolling</v-icon>
-              Max Quota Bangku 0
-            </v-chip>
-          </template>
-        </v-tooltip>
-      </v-card>
-
-      <!-- Loket Admin Table -->
-      <v-card class="mb-6 pa-6 rounded-xl elevation-2">
-        <v-card-title class="d-flex justify-space-between align-center text-h5 font-weight-bold pa-0 mb-4">
-          Loket Admin
-          <div>
-            <v-btn
-              color="green-lighten-1"
-              variant="flat"
-              rounded="xl"
-              class="text-white elevation-4 mr-2 btn-call-group"
-              @click="handleCallClick(1)"
-            >
-              <v-icon start>mdi-numeric-1-box</v-icon>
-              <span class="d-none d-md-inline">Panggil 1 Antrian</span>
-            </v-btn>
-            <v-btn
-              color="blue-lighten-1"
-              variant="flat"
-              rounded="xl"
-              class="text-white elevation-4 mr-2 btn-call-group"
-              @click="handleCallClick(5)"
-            >
-              <v-icon start>mdi-numeric-5-box</v-icon>
-              <span class="d-none d-md-inline">Panggil 5 Antrian</span>
-            </v-btn>
-            <v-btn
-              color="orange-lighten-1"
-              variant="flat"
-              rounded="xl"
-              class="text-white elevation-4 mr-2 btn-call-group"
-              @click="handleCallClick(10)"
-            >
-              <v-icon start>mdi-numeric-10-box</v-icon>
-              <span class="d-none d-md-inline">Panggil 10 Antrian</span>
-            </v-btn>
-            <v-btn
-              color="red-lighten-1"
-              variant="flat"
-              rounded="xl"
-              class="text-white elevation-4 btn-call-group"
-              @click="handleCallClick(20)"
-            >
-              <v-icon start>mdi-numeric-20-box</v-icon>
-              <span class="d-none d-md-inline">Panggil 20 Antrian</span>
-            </v-btn>
+  <div class="loket-container">
+    <!-- Header Section -->
+    <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>
-        </v-card-title>
-        
-        <!-- Pilihan Show Entries untuk Loket Admin -->
-        <div class="d-flex justify-end mb-4">
-          <div class="d-flex align-center">
-            <span class="mr-2 text-subtitle-1">Show Entries:</span>
-            <v-select
-              :items="[10, 25, 50]"
-              v-model="itemsPerPageLoket"
-              variant="outlined"
-              density="compact"
-              hide-details
-              class="show-entries-select"
-            ></v-select>
+          <div class="header-text">
+            <h1 class="page-title">Klinik Admin</h1>
+            <p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
           </div>
         </div>
-
-        <v-table class="mt-3 custom-table rounded-lg elevation-0">
-          <thead>
-            <tr>
-              <th v-for="header in loketHeaders" :key="header.text">
-                {{ header.text }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(item, index) in paginatedLoketData" :key="index">
-              <td>{{ item.no }}</td>
-              <td>{{ item.barcode }}</td>
-              <td>{{ item.noRekamedik }}</td>
-              <td>{{ item.noAntrian }}</td>
-              <td>{{ item.shift }}</td>
-              <td>{{ item.ket }}</td>
-              <td>{{ item.fastTrack }}</td>
-              <td>{{ item.pembayaran }}</td>
-              <td>
-                <v-btn size="small" color="primary" class="text-white rounded-lg" @click="handlePanggil(item)">
-                  <v-icon start>mdi-phone-incoming</v-icon>
-                  Panggil
-                </v-btn>
-              </td>
-              <td>
-                <v-btn size="small" color="red-darken-1" class="text-white rounded-lg" @click="handleBatalkan(item)">
-                  <v-icon start>mdi-close</v-icon>
-                  Batalkan
-                </v-btn>
-              </td>
-            </tr>
-          </tbody>
-        </v-table>
-        <div class="d-flex justify-space-between align-center mt-3 pa-2">
-          <span>
-            Menampilkan {{ (currentPageLoket - 1) * itemsPerPageLoket + 1 }} hingga
-            {{ Math.min(currentPageLoket * itemsPerPageLoket, loketData.length) }} dari
-            {{ loketData.length }} entri
-          </span>
-          <div>
-            <v-btn size="small" variant="flat" :disabled="currentPageLoket === 1" class="pagination-btn" @click="handlePageChangeLoket(currentPageLoket - 1)">Previous</v-btn>
-            <v-btn size="small" variant="flat" :disabled="currentPageLoket >= totalPagesLoket" class="pagination-btn" @click="handlePageChangeLoket(currentPageLoket + 1)">Next</v-btn>
-          </div>
+        <div class="header-right">
+          <v-chip color="success" variant="flat" class="mr-2">
+            Total {{ totalPasien }} Pasien
+          </v-chip>
+          <v-chip color="white" variant="flat" class="text-primary">
+            Max 150 Pasien
+          </v-chip>
         </div>
-      </v-card>
+      </div>
+    </div>
 
-      <!-- Data Pengunjung Table -->
-      <v-card class="pa-6 rounded-xl elevation-2">
-        <v-card-title class="text-h5 font-weight-bold pa-0 mb-4">
-          Data Pengunjung: Loket
-        </v-card-title>
-        
-        <!-- Pilihan Show Entries untuk Data Pengunjung -->
-        <div class="d-flex justify-end mb-4">
-          <div class="d-flex align-center">
-            <span class="mr-2 text-subtitle-1">Show Entries:</span>
-            <v-select
-              :items="[10, 25, 50]"
-              v-model="itemsPerPagePengunjung"
-              variant="outlined"
-              density="compact"
-              hide-details
-              class="show-entries-select"
-            ></v-select>
-          </div>
-        </div>
-
-        <v-table class="mt-3 custom-table rounded-lg elevation-0">
-          <thead>
-            <tr>
-              <th v-for="header in pengunjungHeaders" :key="header.text">
-                {{ header.text }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(item, index) in paginatedPengunjungData" :key="index">
-              <td>{{ item.no }}</td>
-              <td>{{ item.barcode }}</td>
-              <td>{{ item.noRekamedik }}</td>
-              <td>{{ item.noAntrian }}</td>
-              <td>{{ item.noAntrianKlinik }}</td>
-              <td>{{ item.shift }}</td>
-              <td>{{ item.pembayaran }}</td>
-              <td>
-                <v-chip :color="item.status === 'Selesai' ? 'green' : 'orange'" size="small">
-                  {{ item.status }}
+    <!-- Combined Control Section -->
+    <v-row class="mb-4">
+      <!-- Left Side: Current Processing -->
+      <v-col cols="12" lg="6">
+        <!-- Current Patient Processing Card -->
+        <v-card class="current-processing-card" elevation="2">
+          <v-card-text class="pa-4">
+            <!-- State when there's a patient being processed -->
+            <div
+              v-if="currentProcessingPatient"
+              class="d-flex align-center justify-space-between"
+            >
+              <div class="patient-info">
+                <v-chip color="primary" variant="flat" class="mb-2">
+                  <v-icon start>mdi-account-clock</v-icon>
+                  SEDANG DIPROSES
                 </v-chip>
-              </td>
-            </tr>
-          </tbody>
-        </v-table>
-        <div class="d-flex justify-space-between align-center mt-3 pa-2">
-          <span>
-            Menampilkan {{ (currentPagePengunjung - 1) * itemsPerPagePengunjung + 1 }} hingga
-            {{ Math.min(currentPagePengunjung * itemsPerPagePengunjung, pengunjungData.length) }} dari
-            {{ pengunjungData.length }} entri
-          </span>
-          <div>
-            <v-btn size="small" variant="flat" :disabled="currentPagePengunjung === 1" class="pagination-btn" @click="handlePageChangePengunjung(currentPagePengunjung - 1)">Previous</v-btn>
-            <v-btn size="small" variant="flat" :disabled="currentPagePengunjung >= totalPagesPengunjung" class="pagination-btn" @click="handlePageChangePengunjung(currentPagePengunjung + 1)">Next</v-btn>
-          </div>
+                <div class="text-h5 font-weight-bold mb-1">
+                  {{ currentProcessingPatient.noAntrian.split(" |")[0] }}
+                </div>
+                <div class="text-subtitle-1 text-grey-darken-1">
+                  {{ currentProcessingPatient.barcode }} |
+                  {{ currentProcessingPatient.klinik }}
+                </div>
+                <div class="patient-meta">
+                  Jenis Pembayaran: {{ currentProcessingPatient.pembayaran }}
+                </div>
+              </div>
+              <div class="action-buttons d-flex flex-column">
+                <v-btn
+                  color="success"
+                  variant="flat"
+                  class="mb-2"
+                  width="120"
+                  @click="processPatient(currentProcessingPatient, 'check-in')"
+                >
+                  <v-icon start>mdi-check-circle</v-icon>
+                  Check In
+                </v-btn>
+                <v-btn
+                  color="warning"
+                  variant="flat"
+                  class="mb-2"
+                  width="120"
+                  @click="processPatient(currentProcessingPatient, 'terlambat')"
+                >
+                  <v-icon start>mdi-clock-alert</v-icon>
+                  Terlambat
+                </v-btn>
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  class="mb-2"
+                  width="120"
+                  @click="processPatient(currentProcessingPatient, 'pending')"
+                >
+                  <v-icon start>mdi-pause-circle</v-icon>
+                  Pending
+                </v-btn>
+                <v-btn
+                  color="info"
+                  variant="flat"
+                  width="120"
+                  @click="showChangeKlinikDialog = true"
+                >
+                  <v-icon start>mdi-swap-horizontal</v-icon>
+                  Ubah Klinik
+                </v-btn>
+              </div>
+            </div>
+
+            <!-- Empty state when no patient is being processed -->
+            <div v-else class="text-center pa-6">
+              <v-icon size="64" color="grey-lighten-1" class="mb-3">
+                mdi-account-off-outline
+              </v-icon>
+              <div class="text-h6 text-grey-darken-1 mb-2">
+                Tidak Ada Pasien yang Diproses
+              </div>
+              <div class="text-body-2 text-grey">
+                Pasien akan muncul otomatis saat check-in dari loket atau buat antrean klinik baru
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <!-- Right Side: Queue Info and Call Controls -->
+      <v-col cols="12" lg="6">
+        <v-card class="quota-call-card" elevation="2">
+          <v-card-text class="pa-4">
+            <div class="d-flex align-center justify-center mb-3">
+              <v-chip color="success" variant="flat" size="large">
+                <v-icon start>mdi-account-arrow-right</v-icon>
+                PANGGIL ANTREAN KLINIK
+              </v-chip>
+            </div>
+
+            <v-row class="mb-3">
+              <v-col cols="6" class="text-center">
+                <div class="quota-label">Kuota</div>
+                <div class="quota-number">150</div>
+              </v-col>
+              <v-col cols="6" class="text-center">
+                <div class="quota-label">Tersedia</div>
+                <div class="quota-number quota-available">
+                  {{ 150 - quotaUsed }}
+                </div>
+              </v-col>
+            </v-row>
+
+            <div class="text-center mb-3">
+              <div class="quota-used-text">
+                Total Quota Terpakai: {{ quotaUsed }}
+              </div>
+              <v-progress-linear
+                :model-value="(quotaUsed / 150) * 100"
+                color="success"
+                height="6"
+                rounded
+                class="mt-2"
+              ></v-progress-linear>
+            </div>
+
+            <v-divider class="my-3"></v-divider>
+
+            <div class="call-controls">
+              <div class="call-label mb-2">Kumulatif Panggil Antrean</div>
+              <div class="call-buttons">
+                <v-btn
+                  color="success"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callNext"
+                  :disabled="!nextPatient"
+                >
+                  <span class="call-btn-text">1</span>
+                </v-btn>
+                <v-btn
+                  color="info"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callMultiplePatients(5)"
+                >
+                  <span class="call-btn-text">5</span>
+                </v-btn>
+                <v-btn
+                  color="warning"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callMultiplePatients(10)"
+                >
+                  <span class="call-btn-text">10</span>
+                </v-btn>
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callMultiplePatients(20)"
+                >
+                  <span class="call-btn-text">20</span>
+                </v-btn>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row class="mb-4">
+      <v-col cols="12">
+        <div class="d-flex justify-center gap-2">
+          <v-btn
+            color="primary"
+            variant="flat"
+            size="large"
+            @click="showKlinikDialog = true"
+          >
+            <v-icon start>mdi-hospital-building</v-icon>
+            Buat Antrean Klinik Ruang
+          </v-btn>
+          <v-btn
+            color="secondary"
+            variant="flat"
+            size="large"
+            @click="openPenunjangDialog()"
+          >
+            <v-icon start>mdi-clipboard-pulse</v-icon>
+            Buat Antrean Penunjang
+          </v-btn>
         </div>
+      </v-col>
+    </v-row>
+
+    <!-- Di Loket Patients Table -->
+    <v-card class="main-table-card mb-4" elevation="2">
+      <TabelData
+        :headers="diLoketHeaders"
+        :items="diLoketPatients"
+        title="DATA PASIEN - DI KLINIK"
+      >
+        <template #actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn
+              size="small"
+              color="info"
+              variant="flat"
+              @click="processPatient(item, 'aktifkan')"
+            >
+              Aktifkan
+            </v-btn>
+            <v-btn
+              size="small"
+              color="success"
+              variant="flat"
+              @click="processPatient(item, 'proses')"
+            >
+              Proses
+            </v-btn>
+          </div>
+        </template>
+      </TabelData>
+    </v-card>
+
+    <!-- Terlambat Patients Table -->
+    <v-card
+      class="late-table-card mb-4"
+      elevation="2"
+      v-if="terlambatPatients.length > 0"
+    >
+      <TabelData
+        :headers="terlambatHeaders"
+        :items="terlambatPatients"
+        title="INFO PASIEN LAPOR TERLAMBAT"
+      >
+        <template #actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn
+              size="small"
+              color="success"
+              variant="flat"
+              @click="processPatient(item, 'aktifkan')"
+            >
+              Aktifkan
+            </v-btn>
+          </div>
+        </template>
+      </TabelData>
+    </v-card>
+
+    <!-- Pending Patients Table -->
+    <v-card
+      class="pending-table-card mb-4"
+      elevation="2"
+      v-if="pendingPatients.length > 0"
+    >
+      <TabelData
+        :headers="pendingHeaders"
+        :items="pendingPatients"
+        title="INFO PASIEN PENDING"
+      >
+        <template #actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn
+              size="small"
+              color="success"
+              variant="flat"
+              @click="processPatient(item, 'proses')"
+            >
+              Proses
+            </v-btn>
+          </div>
+        </template>
+      </TabelData>
+    </v-card>
+
+    <!-- Klinik Dialog -->
+    <v-dialog v-model="showKlinikDialog" max-width="900px">
+      <v-card>
+        <v-card-title class="d-flex align-center pa-4 bg-primary text-white">
+          <v-btn icon @click="showKlinikDialog = false" class="mr-2">
+            <v-icon color="white">mdi-arrow-left</v-icon>
+          </v-btn>
+          <span class="text-h6">Buat Antrean Klinik Ruang</span>
+        </v-card-title>
+
+        <v-card-subtitle class="pa-4 text-center">
+          <h3 class="text-h6 mb-3">Pilih Klinik</h3>
+          <div class="d-flex justify-end gap-2">
+            <v-text-field
+              v-model="klinikSearch"
+              placeholder="Pencarian"
+              density="compact"
+              hide-details
+              style="max-width: 200px"
+            ></v-text-field>
+          </div>
+        </v-card-subtitle>
+
+        <v-card-text class="pa-4">
+          <v-row>
+            <v-col
+              v-for="klinik in filteredKliniks"
+              :key="klinik.id"
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-card
+                class="klinik-card"
+                elevation="1"
+                @click="selectKlinik(klinik)"
+              >
+                <v-card-text class="text-center pa-4">
+                  <div class="text-h6 font-weight-bold">{{ klinik.name }}</div>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-card-text>
       </v-card>
-    </v-container>
-  </v-main>
+    </v-dialog>
+
+    <!-- Penunjang Dialog -->
+    <v-dialog v-model="showPenunjangDialog" max-width="900px">
+      <v-card>
+        <v-card-title class="d-flex align-center pa-4 bg-secondary text-white">
+          <v-btn icon @click="showPenunjangDialog = false" class="mr-2">
+            <v-icon color="white">mdi-arrow-left</v-icon>
+          </v-btn>
+          <span class="text-h6">Buat Antrean Penunjang</span>
+        </v-card-title>
+
+        <v-card-subtitle class="pa-4">
+          <h3 class="text-h6 mb-3 text-center">Pilih Ruang</h3>
+          <div class="d-flex justify-end gap-2">
+            <v-text-field
+              v-model="penunjangSearch"
+              placeholder="Pencarian"
+              density="compact"
+              hide-details
+              style="max-width: 200px"
+            ></v-text-field>
+          </div>
+        </v-card-subtitle>
+
+        <v-card-text class="pa-4">
+          <v-row>
+            <v-col
+              v-for="penunjang in filteredPenunjangs"
+              :key="penunjang.id"
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-card
+                class="penunjang-card"
+                elevation="1"
+                @click="selectPenunjang(penunjang)"
+              >
+                <v-card-text class="text-center pa-4">
+                  <div class="text-h6 font-weight-bold">
+                    {{ penunjang.name }}
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <!-- Change Klinik Dialog -->
+    <v-dialog v-model="showChangeKlinikDialog" max-width="900px">
+      <v-card>
+        <v-card-title class="d-flex align-center pa-4 bg-info text-white">
+          <v-btn icon @click="showChangeKlinikDialog = false" class="mr-2">
+            <v-icon color="white">mdi-arrow-left</v-icon>
+          </v-btn>
+          <span class="text-h6">Ubah Klinik</span>
+        </v-card-title>
+
+        <v-card-subtitle class="pa-4">
+          <h3 class="text-h6 mb-3 text-center">Pilih Klinik Baru</h3>
+          <div class="d-flex justify-end gap-2">
+            <v-text-field
+              v-model="changeKlinikSearch"
+              placeholder="Pencarian"
+              density="compact"
+              hide-details
+              style="max-width: 200px"
+            ></v-text-field>
+          </div>
+        </v-card-subtitle>
+
+        <v-card-text class="pa-4">
+          <v-row>
+            <v-col
+              v-for="klinik in filteredChangeKliniks"
+              :key="klinik.id"
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-card
+                class="klinik-card"
+                elevation="1"
+                @click="changeKlinik(klinik)"
+              >
+                <v-card-text class="text-center pa-4">
+                  <div class="text-h6 font-weight-bold">{{ klinik.name }}</div>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <!-- Snackbar -->
+    <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>
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref } from "vue";
+import TabelData from "../components/TabelData.vue";
+import { useQueue } from "../composables/useQueue";
 
-definePageMeta({
-  middleware:['auth']
-})
+// Use queue composable with 'klinik' admin type
+const {
+  snackbar,
+  snackbarText,
+  snackbarColor,
+  showKlinikDialog,
+  showPenunjangDialog,
+  showChangeKlinikDialog,
+  klinikSearch,
+  penunjangSearch,
+  changeKlinikSearch,
+  currentProcessingPatient,
+  diLoketPatients,
+  terlambatPatients,
+  pendingPatients,
+  nextPatient,
+  totalPasien,
+  quotaUsed,
+  filteredKliniks,
+  filteredPenunjangs,
+  filteredChangeKliniks,
+  callNext,
+  callMultiplePatients,
+  processPatient,
+  selectKlinik,
+  selectPenunjang,
+  openPenunjangDialog,
+  changeKlinik,
+} = useQueue('klinik');
 
-// Generate dummy data
-const generateDummyData = (count) => {
-  const data = [];
-  const shiftOptions = ['Pagi', 'Siang', 'Sore'];
-  const pembayaranOptions = ['BPJS', 'Umum', 'Asuransi'];
-  const statusOptions = ['Menunggu', 'Selesai', 'Di-cancel'];
+const diLoketHeaders = ref([
+  { title: "No", value: "no", sortable: false, width: "60px" },
+  { title: "Jam Panggil", value: "jamPanggil", sortable: true, width: "100px" },
+  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
+  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
+  { title: "Shift", value: "shift", sortable: true, width: "80px" },
+  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
+  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
+  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
+  { title: "Aksi", value: "aksi", sortable: false, width: "200px" },
+]);
 
-  for (let i = 1; i <= count; i++) {
-    data.push({
-      no: i,
-      barcode: `B${1000 + i}`,
-      noRekamedik: `RM${100 + i}`,
-      noAntrian: `A${100 + i}`,
-      noAntrianKlinik: `K${100 + i}`,
-      shift: shiftOptions[Math.floor(Math.random() * shiftOptions.length)],
-      ket: "Dummy Data",
-      fastTrack: Math.random() > 0.5 ? "Ya" : "Tidak",
-      pembayaran: pembayaranOptions[Math.floor(Math.random() * pembayaranOptions.length)],
-      status: statusOptions[Math.floor(Math.random() * statusOptions.length)]
-    });
-  }
-  return data;
-};
+const terlambatHeaders = ref([
+  { title: "No", value: "no", sortable: false, width: "60px" },
+  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
+  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
+  { title: "Shift", value: "shift", sortable: true, width: "80px" },
+  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
+  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
+]);
 
-// State for Loket Admin table
-const loketData = ref(generateDummyData(50));
-const currentPageLoket = ref(1);
-const itemsPerPageLoket = ref(10);
-
-// State for Data Pengunjung table
-const pengunjungData = ref(generateDummyData(50));
-const currentPagePengunjung = ref(1);
-const itemsPerPagePengunjung = ref(10);
-
-// Computed properties for Loket Admin table
-const paginatedLoketData = computed(() => {
-  const start = (currentPageLoket.value - 1) * itemsPerPageLoket.value;
-  const end = start + itemsPerPageLoket.value;
-  return loketData.value.slice(start, end);
-});
-
-const totalPagesLoket = computed(() => {
-  return Math.ceil(loketData.value.length / itemsPerPageLoket.value);
-});
-
-// Computed properties for Data Pengunjung table
-const paginatedPengunjungData = computed(() => {
-  const start = (currentPagePengunjung.value - 1) * itemsPerPagePengunjung.value;
-  const end = start + itemsPerPagePengunjung.value;
-  return pengunjungData.value.slice(start, end);
-});
-
-const totalPagesPengunjung = computed(() => {
-  return Math.ceil(pengunjungData.value.length / itemsPerPagePengunjung.value);
-});
-
-// Method to handle page change for Loket Admin table
-const handlePageChangeLoket = (page) => {
-  if (page >= 1 && page <= totalPagesLoket.value) {
-    currentPageLoket.value = page;
-  }
-};
-
-// Method to handle page change for Data Pengunjung table
-const handlePageChangePengunjung = (page) => {
-  if (page >= 1 && page <= totalPagesPengunjung.value) {
-    currentPagePengunjung.value = page;
-  }
-};
-
-// Methods to handle button clicks (unchanged)
-const loketHeaders = [
-  { text: 'No' },
-  { text: 'Barcode' },
-  { text: 'No Rekamedik' },
-  { text: 'No Antrian' },
-  { text: 'Shift' },
-  { text: 'Ket' },
-  { text: 'Fast Track' },
-  { text: 'Pembayaran' },
-  { text: 'Panggil' },
-  { text: 'Aksi' },
-];
-
-const pengunjungHeaders = [
-  { text: 'No' },
-  { text: 'Barcode' },
-  { text: 'No Rekamedik' },
-  { text: 'No Antrian' },
-  { text: 'No Antrian Klinik' },
-  { text: 'Shift' },
-  { text: 'Pembayaran' },
-  { text: 'Status' },
-];
-
-const handleCallClick = (value) => {
-  console.log(`Panggil ${value} antrian diklik!`);
-};
-
-const handlePanggil = (item) => {
-  console.log('Panggil pasien:', item);
-};
-
-const handleBatalkan = (item) => {
-  console.log('Batalkan pasien:', item);
-};
+const pendingHeaders = ref([
+  { title: "#", value: "no", sortable: false, width: "60px" },
+  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
+  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
+  { title: "Shift", value: "shift", sortable: true, width: "80px" },
+  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
+  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
+  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
+  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
+]);
 </script>
 
 <style scoped>
-/* Main container padding */
-.v-container {
-  max-width: 1400px;
+.loket-container {
+  background: #f5f7fa;
+  min-height: 100vh;
+  padding: 20px;
 }
 
-.header-banner {
-  background: linear-gradient(45deg, #1A237E, #283593); /* Deep blue gradient */
+.page-header {
+  background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(245, 124, 0, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
   color: white;
 }
 
-/* General card styling */
-.v-card {
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+.header-left {
+  display: flex;
+  align-items: center;
 }
 
-/* Call buttons group */
-.btn-call-group {
-  min-width: 50px;
-  height: 40px !important;
-  font-weight: bold;
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
 }
 
-/* Table styling */
-.custom-table {
-  border: 1px solid #e0e0e0;
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.custom-table :deep(th) {
-  background-color: #f5f5f5;
-  font-weight: bold;
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.current-processing-card,
+.quota-call-card,
+.main-table-card,
+.late-table-card,
+.pending-table-card {
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.current-processing-card {
+  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
+  border: 2px solid rgba(255, 152, 0, 0.2);
+}
+
+.quota-call-card {
+  background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%);
+  border: 2px solid rgba(33, 150, 243, 0.2);
+}
+
+.patient-info .text-h5 {
+  color: #1976d2;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.quota-label {
+  font-size: 13px;
+  color: #6b7280;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.quota-number {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1f2937;
+  line-height: 1;
+}
+
+.quota-available {
+  color: #4caf50;
+}
+
+.quota-used-text {
+  font-size: 13px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.call-controls {
+  text-align: center;
+}
+
+.call-label {
   font-size: 14px;
-  text-transform: uppercase;
+  font-weight: 600;
+  color: #374151;
+  text-align: center;
 }
 
-.custom-table :deep(tr:hover) {
-  background-color: #e8eaf6 !important; /* Light blue on hover */
+.call-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.call-btn {
+  min-width: 80px;
+  height: 48px;
+  border-radius: 8px;
+}
+
+.call-btn-text {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.klinik-card,
+.penunjang-card {
   cursor: pointer;
+  transition: all 0.3s ease;
 }
 
-.custom-table :deep(tbody tr:nth-of-type(odd)) {
-  background-color: #fafafa;
+.klinik-card:hover,
+.penunjang-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.pagination-btn {
-  margin: 0 4px;
-  background-color: #e0e0e0 !important;
+.v-btn {
+  text-transform: none !important;
 }
 
-/* Custom styling for status chip */
-.v-chip.v-chip--size-small {
-  padding: 4px 8px;
-  font-size: 0.75rem;
+.v-btn--size-small {
+  height: 32px;
+  padding: 0 12px;
 }
 
-.show-entries-select {
-  max-width: 100px;
+.text-success {
+  color: #4caf50 !important;
 }
-</style>
+
+@media (max-width: 1024px) {
+  .header-content {
+    flex-direction: column;
+    gap: 20px;
+    text-align: center;
+  }
+
+  .header-left {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .page-title {
+    font-size: 28px;
+  }
+
+  .action-buttons {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .action-buttons .v-btn {
+    flex: 1;
+    min-width: 120px;
+  }
+}
+
+@media (max-width: 768px) {
+  .loket-container {
+    padding: 16px;
+  }
+
+  .header-content {
+    padding: 24px 20px;
+  }
+
+  .page-title {
+    font-size: 24px;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .action-buttons .v-btn {
+    width: 100%;
+    margin: 4px 0;
+  }
+
+  .quota-number {
+    font-size: 28px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/AdminLoket.vue b/pages/AdminLoket.vue
index 76528d4..54c0dc1 100644
--- a/pages/AdminLoket.vue
+++ b/pages/AdminLoket.vue
@@ -23,31 +23,7 @@
         </div>
       </div>
     </div>
-     <!-- <v-card class="next-patient-card mb-4" elevation="2">
-        <v-card-text class="text-center pa-6">
-          <v-chip color="success" variant="flat" class="mb-3" size="large">
-            <v-icon start>mdi-account-arrow-right</v-icon>
-            PASIEN ANTREAN ANJUNGAN
-          </v-chip>
-          <div class="text-h4 font-weight-bold mb-2 text-success">
-            {{ nextPatient ? nextPatient.noAntrian.split(" |")[0] : "UM1004" }}
-          </div>
-          <div class="text-body-1 mb-4 text-grey-darken-1">
-            Klik tombol hijau untuk memanggil
-          </div>
-          <v-btn
-            color="success"
-            variant="flat"
-            size="large"
-            class="px-8"
-            @click="callNext"
-            :disabled="!nextPatient"
-          >
-            <v-icon start>mdi-microphone</v-icon>
-            PANGGIL NEXT
-          </v-btn>
-        </v-card-text>
-      </v-card> -->
+
     <!-- Combined Control Section -->
     <v-row class="mb-4">
       <!-- Left Side: Current Processing -->
@@ -72,41 +48,66 @@
                   {{ currentProcessingPatient.barcode }} |
                   {{ currentProcessingPatient.klinik }}
                 </div>
+                <div class="patient-meta">
+                  Jenis Pembayaran: {{ currentProcessingPatient.pembayaran }}
+                </div>
               </div>
-              <div class="action-buttons d-flex flex-column"> 
-          <v-btn
-            color="success"
-            variant="flat"
-            class="mb-2" width="120"   @click="processPatient(currentProcessingPatient, 'check-in')"
-          >
-            <v-icon start>mdi-check-circle</v-icon>
-            Check In
-          </v-btn>
-          <v-btn
-            color="warning"
-            variant="flat"
-            class="mb-2" width="120"   @click="processPatient(currentProcessingPatient, 'terlambat')"
-          >
-            <v-icon start>mdi-clock-alert</v-icon>
-            Terlambat
-          </v-btn>
-          <v-btn
-            color="error"
-            variant="flat"
-            class="mb-2" width="120"   @click="processPatient(currentProcessingPatient, 'pending')"
-          >
-            <v-icon start>mdi-pause-circle</v-icon>
-            Pending
-          </v-btn>
-             <v-btn
-            color="error"
-            variant="flat"
-            width="120"   @click="processPatient(currentProcessingPatient, 'pending')"
-          >
-            <v-icon start>mdi-pause-circle</v-icon>
-            Ubah Klinik
-          </v-btn>
-        </div>
+              <div class="action-buttons d-flex flex-column">
+                <v-btn
+                  color="success"
+                  variant="flat"
+                  class="mb-2"
+                  width="120"
+                  @click="processPatient(currentProcessingPatient, 'check-in')"
+                >
+                  <v-icon start>mdi-check-circle</v-icon>
+                  Check In
+                </v-btn>
+                <v-btn
+                  color="warning"
+                  variant="flat"
+                  class="mb-2"
+                  width="120"
+                  @click="processPatient(currentProcessingPatient, 'terlambat')"
+                >
+                  <v-icon start>mdi-clock-alert</v-icon>
+                  Terlambat
+                </v-btn>
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  class="mb-2"
+                  width="120"
+                  @click="processPatient(currentProcessingPatient, 'pending')"
+                >
+                  <v-icon start>mdi-pause-circle</v-icon>
+                  Pending
+                </v-btn>
+                <v-btn
+                  color="info"
+                  variant="flat"
+                  width="120"
+                  @click="showChangeKlinikDialog = true"
+                >
+                  <v-icon start>mdi-swap-horizontal</v-icon>
+                  Ubah Klinik
+                </v-btn>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+
+        <!-- Empty State -->
+        <v-card v-else class="current-processing-card" elevation="2">
+          <v-card-text class="pa-6 text-center">
+            <v-icon size="64" color="grey-lighten-1" class="mb-3">
+              mdi-account-off-outline
+            </v-icon>
+            <div class="text-h6 text-grey-darken-1 mb-2">
+              Tidak Ada Pasien yang Diproses
+            </div>
+            <div class="text-body-2 text-grey">
+              Pilih pasien dari tabel "Di Loket" untuk memproses
             </div>
           </v-card-text>
         </v-card>
@@ -114,22 +115,15 @@
 
       <!-- Right Side: Queue Info and Call Controls -->
       <v-col cols="12" lg="6">
-        <!-- Quota Info and Call Controls Combined Card -->
         <v-card class="quota-call-card" elevation="2">
           <v-card-text class="pa-4">
-            <!-- Header with icon -->
             <div class="d-flex align-center justify-center mb-3">
-              <v-chip
-                color="success"
-                variant="flat"
-                size="large"
-              >
+              <v-chip color="success" variant="flat" size="large">
                 <v-icon start>mdi-account-arrow-right</v-icon>
                 PANGGIL ANTREAN ANJUNGAN
               </v-chip>
             </div>
 
-            <!-- Quota Display -->
             <v-row class="mb-3">
               <v-col cols="6" class="text-center">
                 <div class="quota-label">Kuota</div>
@@ -143,7 +137,6 @@
               </v-col>
             </v-row>
 
-            <!-- Progress Bar -->
             <div class="text-center mb-3">
               <div class="quota-used-text">
                 Total Quota Terpakai: {{ quotaUsed }}
@@ -157,10 +150,8 @@
               ></v-progress-linear>
             </div>
 
-            <!-- Divider -->
             <v-divider class="my-3"></v-divider>
 
-            <!-- Call Controls -->
             <div class="call-controls">
               <div class="call-label mb-2">Kumulatif Panggil Antrean</div>
               <div class="call-buttons">
@@ -168,7 +159,7 @@
                   color="success"
                   variant="flat"
                   class="call-btn"
-                  @click="callMultiplePatients(1)"
+                  @click="callNext"
                   :disabled="!nextPatient"
                 >
                   <span class="call-btn-text">1</span>
@@ -204,6 +195,31 @@
       </v-col>
     </v-row>
 
+    <v-row class="mb-4">
+      <v-col cols="12">
+        <div class="d-flex justify-center gap-2">
+          <v-btn
+            color="primary"
+            variant="flat"
+            size="large"
+            @click="showKlinikDialog = true"
+          >
+            <v-icon start>mdi-hospital-building</v-icon>
+            Buat Antrean Klinik Ruang
+          </v-btn>
+          <v-btn
+            color="secondary"
+            variant="flat"
+            size="large"
+            @click="openPenunjangDialog()"
+          >
+            <v-icon start>mdi-clipboard-pulse</v-icon>
+            Buat Antrean Penunjang
+          </v-btn>
+        </div>
+      </v-col>
+    </v-row>
+
     <!-- Di Loket Patients Table -->
     <v-card class="main-table-card mb-4" elevation="2">
       <TabelData
@@ -231,9 +247,6 @@
             </v-btn>
           </div>
         </template>
-        <template #item.jamPanggil="{ item }">
-          <span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
-        </template>
       </TabelData>
     </v-card>
 
@@ -289,6 +302,149 @@
       </TabelData>
     </v-card>
 
+    <!-- Klinik Dialog -->
+    <v-dialog v-model="showKlinikDialog" max-width="900px">
+      <v-card>
+        <v-card-title class="d-flex align-center pa-4 bg-primary text-white">
+          <v-btn icon @click="showKlinikDialog = false" class="mr-2">
+            <v-icon color="white">mdi-arrow-left</v-icon>
+          </v-btn>
+          <span class="text-h6">Buat Antrean Klinik Ruang</span>
+        </v-card-title>
+
+        <v-card-subtitle class="pa-4 text-center">
+          <h3 class="text-h6 mb-3">Pilih Klinik</h3>
+          <div class="d-flex justify-end gap-2">
+            <v-text-field
+              v-model="klinikSearch"
+              placeholder="Pencarian"
+              density="compact"
+              hide-details
+              style="max-width: 200px"
+            ></v-text-field>
+          </div>
+        </v-card-subtitle>
+
+        <v-card-text class="pa-4">
+          <v-row>
+            <v-col
+              v-for="klinik in filteredKliniks"
+              :key="klinik.id"
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-card
+                class="klinik-card"
+                elevation="1"
+                @click="selectKlinik(klinik)"
+              >
+                <v-card-text class="text-center pa-4">
+                  <div class="text-h6 font-weight-bold">{{ klinik.name }}</div>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <!-- Penunjang Dialog -->
+    <v-dialog v-model="showPenunjangDialog" max-width="900px">
+      <v-card>
+        <v-card-title class="d-flex align-center pa-4 bg-secondary text-white">
+          <v-btn icon @click="showPenunjangDialog = false" class="mr-2">
+            <v-icon color="white">mdi-arrow-left</v-icon>
+          </v-btn>
+          <span class="text-h6">Buat Antrean Penunjang</span>
+        </v-card-title>
+
+        <v-card-subtitle class="pa-4">
+          <h3 class="text-h6 mb-3 text-center">Pilih Ruang</h3>
+          <div class="d-flex justify-end gap-2">
+            <v-text-field
+              v-model="penunjangSearch"
+              placeholder="Pencarian"
+              density="compact"
+              hide-details
+              style="max-width: 200px"
+            ></v-text-field>
+          </div>
+        </v-card-subtitle>
+
+        <v-card-text class="pa-4">
+          <v-row>
+            <v-col
+              v-for="penunjang in filteredPenunjangs"
+              :key="penunjang.id"
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-card
+                class="penunjang-card"
+                elevation="1"
+                @click="selectPenunjang(penunjang)"
+              >
+                <v-card-text class="text-center pa-4">
+                  <div class="text-h6 font-weight-bold">
+                    {{ penunjang.name }}
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <!-- Change Klinik Dialog -->
+    <v-dialog v-model="showChangeKlinikDialog" max-width="900px">
+      <v-card>
+        <v-card-title class="d-flex align-center pa-4 bg-info text-white">
+          <v-btn icon @click="showChangeKlinikDialog = false" class="mr-2">
+            <v-icon color="white">mdi-arrow-left</v-icon>
+          </v-btn>
+          <span class="text-h6">Ubah Klinik</span>
+        </v-card-title>
+
+        <v-card-subtitle class="pa-4">
+          <h3 class="text-h6 mb-3 text-center">Pilih Klinik Baru</h3>
+          <div class="d-flex justify-end gap-2">
+            <v-text-field
+              v-model="changeKlinikSearch"
+              placeholder="Pencarian"
+              density="compact"
+              hide-details
+              style="max-width: 200px"
+            ></v-text-field>
+          </div>
+        </v-card-subtitle>
+
+        <v-card-text class="pa-4">
+          <v-row>
+            <v-col
+              v-for="klinik in filteredChangeKliniks"
+              :key="klinik.id"
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-card
+                class="klinik-card"
+                elevation="1"
+                @click="changeKlinik(klinik)"
+              >
+                <v-card-text class="text-center pa-4">
+                  <div class="text-h6 font-weight-bold">{{ klinik.name }}</div>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
     <!-- Snackbar -->
     <v-snackbar
       v-model="snackbar"
@@ -297,7 +453,6 @@
       location="top right"
     >
       {{ snackbarText }}
-
       <template v-slot:actions>
         <v-btn icon @click="snackbar = false">
           <v-icon>mdi-close</v-icon>
@@ -308,99 +463,39 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import TabelData from "../components/TabelData.vue";
+import { useQueue } from "../composables/useQueue";
 
-// Reactive data
-const snackbar = ref(false);
-const snackbarText = ref("");
-const snackbarColor = ref("success");
-const quotaUsed = ref(5);
-const currentProcessingPatient = ref(null);
-
-// Base patient data - semua pasien yang belum dipanggil
-const allPatients = ref([
-  {
-    no: 1,
-    jamPanggil: "12:49",
-    barcode: "250811100163",
-    noAntrian: "UM1001 | Online - 250811100163",
-    shift: "Shift 1",
-    klinik: "KANDUNGAN",
-    fastTrack: "UMUM",
-    pembayaran: "UMUM",
-    status: "waiting",
-  },
-  {
-    no: 2,
-    jamPanggil: "10:52",
-    barcode: "250811100155",
-    noAntrian: "UM1002 | Online - 250811100155",
-    shift: "Shift 1",
-    klinik: "IPD",
-    fastTrack: "UMUM",
-    pembayaran: "UMUM",
-    status: "waiting",
-  },
-  {
-    no: 3,
-    jamPanggil: "09:30",
-    barcode: "250811100200",
-    noAntrian: "UM1003 | Online - 250811100200",
-    shift: "Shift 1",
-    klinik: "SARAF",
-    fastTrack: "UMUM",
-    pembayaran: "UMUM",
-    status: "waiting",
-  },
-  {
-    no: 4,
-    jamPanggil: "14:15",
-    barcode: "250811100210",
-    noAntrian: "UM1004 | Online - 250811100210",
-    shift: "Shift 1",
-    klinik: "THT",
-    fastTrack: "UMUM",
-    pembayaran: "UMUM",
-    status: "waiting",
-  },
-  ...Array.from({ length: 16 }, (_, i) => ({
-    no: i + 5,
-    jamPanggil: `${String(Math.floor(Math.random() * 12) + 1).padStart(
-      2,
-      "0"
-    )}:${String(Math.floor(Math.random() * 60)).padStart(2, "0")}`,
-    barcode: `25081110${String(i + 300).padStart(4, "0")}`,
-    noAntrian: `UM100${i + 5} | Online - 25081110${String(i + 300).padStart(
-      4,
-      "0"
-    )}`,
-    shift: "Shift 1",
-    klinik: ["KANDUNGAN", "IPD", "THT", "SARAF"][Math.floor(Math.random() * 4)],
-    fastTrack: "UMUM",
-    pembayaran: "UMUM",
-    status: "waiting",
-  })),
-]);
-
-// Computed properties for different status tables
-const diLoketPatients = computed(() =>
-  allPatients.value.filter((patient) => patient.status === "di-loket")
-);
-
-const terlambatPatients = computed(() =>
-  allPatients.value.filter((patient) => patient.status === "terlambat")
-);
-
-const pendingPatients = computed(() =>
-  allPatients.value.filter((patient) => patient.status === "pending")
-);
-
-const nextPatient = computed(() => {
-  return allPatients.value.find((patient) => patient.status === "waiting");
-});
-
-const totalPasien = computed(() => allPatients.value.length);
+// Use queue composable with 'loket' admin type
+const {
+  snackbar,
+  snackbarText,
+  snackbarColor,
+  showKlinikDialog,
+  showPenunjangDialog,
+  showChangeKlinikDialog,
+  klinikSearch,
+  penunjangSearch,
+  changeKlinikSearch,
+  currentProcessingPatient,
+  diLoketPatients,
+  terlambatPatients,
+  pendingPatients,
+  nextPatient,
+  totalPasien,
+  quotaUsed,
+  filteredKliniks,
+  filteredPenunjangs,
+  filteredChangeKliniks,
+  callNext,
+  callMultiplePatients,
+  processPatient,
+  selectKlinik,
+  selectPenunjang,
+  openPenunjangDialog,
+  changeKlinik,
+} = useQueue('loket');
 
 // Headers for different tables
 const diLoketHeaders = ref([
@@ -434,107 +529,6 @@ const pendingHeaders = ref([
   { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
   { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
 ]);
-
-// Methods
-const showSnackbar = (text, color = "success") => {
-  snackbarText.value = text;
-  snackbarColor.value = color;
-  snackbar.value = true;
-};
-
-const callMultiplePatients = (count) => {
-  const waitingPatients = allPatients.value.filter(
-    (patient) => patient.status === "waiting"
-  );
-  const patientsToCall = waitingPatients.slice(0, count);
-
-  if (patientsToCall.length === 0) {
-    showSnackbar("Tidak ada pasien yang menunggu", "warning");
-    return;
-  }
-
-  if (quotaUsed.value + patientsToCall.length > 150) {
-    showSnackbar("Quota tidak mencukupi", "error");
-    return;
-  }
-
-  patientsToCall.forEach((patient) => {
-    patient.status = "di-loket";
-  });
-
-  quotaUsed.value += patientsToCall.length;
-  showSnackbar(`Memanggil ${patientsToCall.length} pasien ke loket`, "success");
-};
-
-const callNext = () => {
-  if (!nextPatient.value) {
-    showSnackbar("Tidak ada pasien selanjutnya", "warning");
-    return;
-  }
-
-  if (quotaUsed.value >= 150) {
-    showSnackbar("Quota sudah penuh", "error");
-    return;
-  }
-
-  nextPatient.value.status = "di-loket";
-  currentProcessingPatient.value = nextPatient.value;
-  quotaUsed.value++;
-
-  showSnackbar(
-    `Memanggil pasien ${nextPatient.value.noAntrian.split(" |")[0]}`,
-    "success"
-  );
-};
-
-const processPatient = (patient, action) => {
-  const patientCode = patient.noAntrian.split(" |")[0];
-
-  switch (action) {
-    case "check-in":
-      patient.status = "processed";
-      if (currentProcessingPatient.value?.no === patient.no) {
-        currentProcessingPatient.value = null;
-      }
-      showSnackbar(`Pasien ${patientCode} berhasil check in`, "success");
-      break;
-
-    case "terlambat":
-      patient.status = "terlambat";
-      if (currentProcessingPatient.value?.no === patient.no) {
-        currentProcessingPatient.value = null;
-      }
-      showSnackbar(`Pasien ${patientCode} ditandai terlambat`, "warning");
-      break;
-
-    case "pending":
-      patient.status = "pending";
-      if (currentProcessingPatient.value?.no === patient.no) {
-        currentProcessingPatient.value = null;
-      }
-      showSnackbar(`Pasien ${patientCode} di-pending`, "info");
-      break;
-
-    case "aktifkan":
-      if (patient.status === "terlambat") {
-        patient.status = "di-loket";
-        showSnackbar(`Pasien ${patientCode} diaktifkan kembali`, "success");
-      }
-      break;
-
-    case "proses":
-      currentProcessingPatient.value = patient;
-      showSnackbar(`Memproses pasien ${patientCode}`, "info");
-      break;
-  }
-};
-
-const getRowClass = (item) => {
-  if (item.status === "current") {
-    return "text-success font-weight-bold";
-  }
-  return "";
-};
 </script>
 
 <style scoped>
@@ -618,7 +612,6 @@ const getRowClass = (item) => {
   align-items: center;
 }
 
-/* Quota Display Styling */
 .quota-label {
   font-size: 13px;
   color: #6b7280;
@@ -643,7 +636,6 @@ const getRowClass = (item) => {
   font-weight: 500;
 }
 
-/* Call Controls Styling */
 .call-controls {
   text-align: center;
 }
@@ -673,31 +665,18 @@ const getRowClass = (item) => {
   font-weight: 700;
 }
 
-/* Enhanced table styling */
-.main-table-card :deep(.v-data-table th),
-.late-table-card :deep(.v-data-table th),
-.pending-table-card :deep(.v-data-table th) {
-  background: #fafbfc;
-  font-weight: 600;
-  font-size: 13px;
-  color: #374151;
-  border-bottom: 1px solid #e5e7eb;
+.klinik-card,
+.penunjang-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
-.main-table-card :deep(.v-data-table tbody tr:hover),
-.late-table-card :deep(.v-data-table tbody tr:hover),
-.pending-table-card :deep(.v-data-table tbody tr:hover) {
-  background: #f8fafc !important;
+.klinik-card:hover,
+.penunjang-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.main-table-card :deep(.v-data-table tbody td),
-.late-table-card :deep(.v-data-table tbody td),
-.pending-table-card :deep(.v-data-table tbody td) {
-  padding: 12px 16px;
-  border-bottom: 1px solid #f1f5f9;
-}
-
-/* Button styling */
 .v-btn {
   text-transform: none !important;
 }
@@ -707,12 +686,10 @@ const getRowClass = (item) => {
   padding: 0 12px;
 }
 
-/* Success text color */
 .text-success {
   color: #4caf50 !important;
 }
 
-/* Responsive Design */
 @media (max-width: 1024px) {
   .header-content {
     flex-direction: column;
@@ -729,12 +706,6 @@ const getRowClass = (item) => {
     font-size: 28px;
   }
 
-  .current-processing-card .d-flex {
-    flex-direction: column;
-    gap: 20px;
-    align-items: flex-start;
-  }
-
   .action-buttons {
     flex-direction: row;
     flex-wrap: wrap;
@@ -746,15 +717,6 @@ const getRowClass = (item) => {
     flex: 1;
     min-width: 120px;
   }
-
-  .call-buttons {
-    gap: 8px;
-  }
-
-  .call-btn {
-    min-width: 70px;
-    height: 44px;
-  }
 }
 
 @media (max-width: 768px) {
@@ -770,25 +732,6 @@ const getRowClass = (item) => {
     font-size: 24px;
   }
 
-  .header-icon {
-    padding: 12px;
-  }
-
-  .call-buttons {
-    flex-direction: row;
-    gap: 8px;
-  }
-
-  .call-btn {
-    flex: 1;
-    min-width: 60px;
-    height: 42px;
-  }
-
-  .call-btn-text {
-    font-size: 16px;
-  }
-
   .action-buttons {
     flex-direction: column;
     width: 100%;
@@ -803,31 +746,4 @@ const getRowClass = (item) => {
     font-size: 28px;
   }
 }
-
-@media (max-width: 600px) {
-  .page-title {
-    font-size: 20px;
-  }
-
-  .current-processing-card .patient-info .text-h5 {
-    font-size: 1.25rem !important;
-  }
-
-  .quota-number {
-    font-size: 24px;
-  }
-
-  .call-buttons {
-    flex-wrap: wrap;
-  }
-
-  .call-btn {
-    min-width: calc(50% - 8px);
-    height: 40px;
-  }
-
-  .call-btn-text {
-    font-size: 14px;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/pages/AdminPenunjang.vue b/pages/AdminPenunjang.vue
new file mode 100644
index 0000000..4733811
--- /dev/null
+++ b/pages/AdminPenunjang.vue
@@ -0,0 +1,694 @@
+<!-- pages/AdminPenunjang.vue -->
+<template>
+  <div class="loket-container">
+    <!-- Header Section -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="header-icon">
+            <v-icon size="32" color="white">mdi-clipboard-pulse</v-icon>
+          </div>
+          <div class="header-text">
+            <h1 class="page-title">Penunjang Admin</h1>
+            <p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
+          </div>
+        </div>
+        <div class="header-right">
+          <v-chip color="success" variant="flat" class="mr-2">
+            Total {{ totalPasien }} Pasien
+          </v-chip>
+          <v-chip color="white" variant="flat" class="text-primary">
+            Max 150 Pasien
+          </v-chip>
+        </div>
+      </div>
+    </div>
+
+    <!-- Combined Control Section -->
+    <v-row class="mb-4">
+      <!-- Left Side: Current Processing -->
+      <v-col cols="12" lg="6">
+        <!-- Current Patient Processing Card -->
+        <v-card class="current-processing-card" elevation="2">
+          <v-card-text class="pa-4">
+            <!-- State when there's a patient being processed -->
+            <div
+              v-if="currentProcessingPatient"
+              class="d-flex align-center justify-space-between"
+            >
+              <div class="patient-info">
+                <v-chip color="primary" variant="flat" class="mb-2">
+                  <v-icon start>mdi-account-clock</v-icon>
+                  SEDANG DIPROSES
+                </v-chip>
+                <div class="text-h5 font-weight-bold mb-1">
+                  {{ currentProcessingPatient.noAntrian.split(" |")[0] }}
+                </div>
+                <div class="text-subtitle-1 text-grey-darken-1">
+                  {{ currentProcessingPatient.barcode }} |
+                  {{ currentProcessingPatient.klinik }}
+                </div>
+                <div class="patient-meta">
+                  Jenis Pembayaran: {{ currentProcessingPatient.pembayaran }}
+                </div>
+              </div>
+              <div class="action-buttons d-flex flex-column">
+                <v-btn
+                  color="success"
+                  variant="flat"
+                  class="mb-2"
+                  width="120"
+                  @click="processPatient(currentProcessingPatient, 'check-in')"
+                >
+                  <v-icon start>mdi-check-circle</v-icon>
+                  Check In
+                </v-btn>
+                <v-btn
+                  color="warning"
+                  variant="flat"
+                  class="mb-2"
+                  width="120"
+                  @click="processPatient(currentProcessingPatient, 'terlambat')"
+                >
+                  <v-icon start>mdi-clock-alert</v-icon>
+                  Terlambat
+                </v-btn>
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  class="mb-2"
+                  width="120"
+                  @click="processPatient(currentProcessingPatient, 'pending')"
+                >
+                  <v-icon start>mdi-pause-circle</v-icon>
+                  Pending
+                </v-btn>
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  width="120"
+                  @click="showChangeKlinikDialog = true"
+                >
+                  <v-icon start>mdi-swap-horizontal</v-icon>
+                  Ubah Klinik
+                </v-btn>
+              </div>
+            </div>
+
+            <!-- Empty state when no patient is being processed -->
+            <div v-else class="text-center pa-6">
+              <v-icon size="64" color="grey-lighten-1" class="mb-3">
+                mdi-account-off-outline
+              </v-icon>
+              <div class="text-h6 text-grey-darken-1 mb-2">
+                Tidak Ada Pasien yang Diproses
+              </div>
+              <div class="text-body-2 text-grey">
+                Pilih pasien dari tabel "Di Loket" untuk memproses
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <!-- Right Side: Queue Info and Call Controls -->
+      <v-col cols="12" lg="6">
+        <v-card class="quota-call-card" elevation="2">
+          <v-card-text class="pa-4">
+            <div class="d-flex align-center justify-center mb-3">
+              <v-chip color="success" variant="flat" size="large">
+                <v-icon start>mdi-account-arrow-right</v-icon>
+                PANGGIL ANTREAN ANJUNGAN
+              </v-chip>
+            </div>
+
+            <v-row class="mb-3">
+              <v-col cols="6" class="text-center">
+                <div class="quota-label">Kuota</div>
+                <div class="quota-number">150</div>
+              </v-col>
+              <v-col cols="6" class="text-center">
+                <div class="quota-label">Tersedia</div>
+                <div class="quota-number quota-available">
+                  {{ 150 - quotaUsed }}
+                </div>
+              </v-col>
+            </v-row>
+
+            <div class="text-center mb-3">
+              <div class="quota-used-text">
+                Total Quota Terpakai: {{ quotaUsed }}
+              </div>
+              <v-progress-linear
+                :model-value="(quotaUsed / 150) * 100"
+                color="success"
+                height="6"
+                rounded
+                class="mt-2"
+              ></v-progress-linear>
+            </div>
+
+            <v-divider class="my-3"></v-divider>
+
+            <div class="call-controls">
+              <div class="call-label mb-2">Kumulatif Panggil Antrean</div>
+              <div class="call-buttons">
+                <v-btn
+                  color="success"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callNext"
+                  :disabled="!nextPatient"
+                >
+                  <span class="call-btn-text">1</span>
+                </v-btn>
+                <v-btn
+                  color="info"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callMultiplePatients(5)"
+                >
+                  <span class="call-btn-text">5</span>
+                </v-btn>
+                <v-btn
+                  color="warning"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callMultiplePatients(10)"
+                >
+                  <span class="call-btn-text">10</span>
+                </v-btn>
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  class="call-btn"
+                  @click="callMultiplePatients(20)"
+                >
+                  <span class="call-btn-text">20</span>
+                </v-btn>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row class="mb-4">
+      <v-col cols="12">
+        <div class="d-flex justify-center">
+          <v-btn
+            color="secondary"
+            variant="flat"
+            size="large"
+            @click="showPenunjangDialog = true"
+            class="mx-2"
+          >
+            <v-icon start>mdi-clipboard-pulse</v-icon>
+            Buat Antrean Penunjang
+          </v-btn>
+        </div>
+      </v-col>
+    </v-row>
+
+    <!-- Di Loket Patients Table -->
+    <v-card class="main-table-card mb-4" elevation="2">
+      <TabelData
+        :headers="diLoketHeaders"
+        :items="diLoketPatients"
+        title="DATA PASIEN - DI LOKET"
+      >
+        <template #actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn
+              size="small"
+              color="info"
+              variant="flat"
+              @click="processPatient(item, 'aktifkan')"
+            >
+              Aktifkan
+            </v-btn>
+            <v-btn
+              size="small"
+              color="success"
+              variant="flat"
+              @click="processPatient(item, 'proses')"
+            >
+              Proses
+            </v-btn>
+          </div>
+        </template>
+      </TabelData>
+    </v-card>
+
+    <!-- Terlambat Patients Table -->
+    <v-card
+      class="late-table-card mb-4"
+      elevation="2"
+      v-if="terlambatPatients.length > 0"
+    >
+      <TabelData
+        :headers="terlambatHeaders"
+        :items="terlambatPatients"
+        title="INFO PASIEN LAPOR TERLAMBAT"
+      >
+        <template #actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn
+              size="small"
+              color="success"
+              variant="flat"
+              @click="processPatient(item, 'aktifkan')"
+            >
+              Aktifkan
+            </v-btn>
+          </div>
+        </template>
+      </TabelData>
+    </v-card>
+
+    <!-- Pending Patients Table -->
+    <v-card
+      class="pending-table-card mb-4"
+      elevation="2"
+      v-if="pendingPatients.length > 0"
+    >
+      <TabelData
+        :headers="pendingHeaders"
+        :items="pendingPatients"
+        title="INFO PASIEN PENDING"
+      >
+        <template #actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn
+              size="small"
+              color="success"
+              variant="flat"
+              @click="processPatient(item, 'proses')"
+            >
+              Proses
+            </v-btn>
+          </div>
+        </template>
+      </TabelData>
+    </v-card>
+
+    <!-- Penunjang Dialog -->
+    <v-dialog v-model="showPenunjangDialog" max-width="900px">
+      <v-card>
+        <v-card-title class="d-flex align-center pa-4 bg-secondary text-white">
+          <v-btn icon @click="showPenunjangDialog = false" class="mr-2">
+            <v-icon color="white">mdi-arrow-left</v-icon>
+          </v-btn>
+          <span class="text-h6">Buat Antrean Penunjang</span>
+        </v-card-title>
+
+        <v-card-subtitle class="pa-4">
+          <h3 class="text-h6 mb-3 text-center">Pilih Ruang</h3>
+          <div class="d-flex justify-end gap-2">
+            <v-text-field
+              v-model="penunjangSearch"
+              placeholder="Pencarian"
+              density="compact"
+              hide-details
+              style="max-width: 200px"
+            ></v-text-field>
+          </div>
+        </v-card-subtitle>
+
+        <v-card-text class="pa-4">
+          <v-row>
+            <v-col
+              v-for="penunjang in filteredPenunjangs"
+              :key="penunjang.id"
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-card
+                class="penunjang-card"
+                elevation="1"
+                @click="selectPenunjang(penunjang)"
+              >
+                <v-card-text class="text-center pa-4">
+                  <div class="text-h6 font-weight-bold">
+                    {{ penunjang.name }}
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <!-- Change Klinik Dialog -->
+    <v-dialog v-model="showChangeKlinikDialog" max-width="900px">
+      <v-card>
+        <v-card-title class="d-flex align-center pa-4 bg-info text-white">
+          <v-btn icon @click="showChangeKlinikDialog = false" class="mr-2">
+            <v-icon color="white">mdi-arrow-left</v-icon>
+          </v-btn>
+          <span class="text-h6">Ubah Klinik</span>
+        </v-card-title>
+
+        <v-card-subtitle class="pa-4">
+          <h3 class="text-h6 mb-3 text-center">Pilih Klinik Baru</h3>
+          <div class="d-flex justify-end gap-2">
+            <v-text-field
+              v-model="changeKlinikSearch"
+              placeholder="Pencarian"
+              density="compact"
+              hide-details
+              style="max-width: 200px"
+            ></v-text-field>
+          </div>
+        </v-card-subtitle>
+
+        <v-card-text class="pa-4">
+          <v-row>
+            <v-col
+              v-for="klinik in filteredChangeKliniks"
+              :key="klinik.id"
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-card
+                class="klinik-card"
+                elevation="1"
+                @click="changeKlinik(klinik)"
+              >
+                <v-card-text class="text-center pa-4">
+                  <div class="text-h6 font-weight-bold">{{ klinik.name }}</div>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <!-- Snackbar -->
+    <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>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TabelData from "../components/TabelData.vue";
+import { useQueue } from "../composables/useQueue";
+
+// Use queue composable with 'penunjang' admin type
+const {
+  snackbar,
+  snackbarText,
+  snackbarColor,
+  showPenunjangDialog,
+  showChangeKlinikDialog,
+  penunjangSearch,
+  changeKlinikSearch,
+  currentProcessingPatient,
+  diLoketPatients,
+  terlambatPatients,
+  pendingPatients,
+  nextPatient,
+  totalPasien,
+  quotaUsed,
+  filteredPenunjangs,
+  filteredChangeKliniks,
+  callNext,
+  callMultiplePatients,
+  processPatient,
+  selectPenunjang,
+  changeKlinik,
+} = useQueue('penunjang');
+
+const diLoketHeaders = ref([
+  { title: "No", value: "no", sortable: false, width: "60px" },
+  { title: "Jam Panggil", value: "jamPanggil", sortable: true, width: "100px" },
+  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
+  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
+  { title: "Shift", value: "shift", sortable: true, width: "80px" },
+  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
+  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
+  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
+  { title: "Aksi", value: "aksi", sortable: false, width: "200px" },
+]);
+
+const terlambatHeaders = ref([
+  { title: "No", value: "no", sortable: false, width: "60px" },
+  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
+  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
+  { title: "Shift", value: "shift", sortable: true, width: "80px" },
+  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
+  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
+]);
+
+const pendingHeaders = ref([
+  { title: "#", value: "no", sortable: false, width: "60px" },
+  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
+  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
+  { title: "Shift", value: "shift", sortable: true, width: "80px" },
+  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
+  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
+  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
+  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
+]);
+</script>
+
+<style scoped>
+.loket-container {
+  background: #f5f7fa;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.page-header {
+  background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(156, 39, 176, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
+}
+
+.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;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.current-processing-card,
+.quota-call-card,
+.main-table-card,
+.late-table-card,
+.pending-table-card {
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.current-processing-card {
+  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
+  border: 2px solid rgba(255, 152, 0, 0.2);
+}
+
+.quota-call-card {
+  background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%);
+  border: 2px solid rgba(33, 150, 243, 0.2);
+}
+
+.patient-info .text-h5 {
+  color: #1976d2;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.quota-label {
+  font-size: 13px;
+  color: #6b7280;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.quota-number {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1f2937;
+  line-height: 1;
+}
+
+.quota-available {
+  color: #4caf50;
+}
+
+.quota-used-text {
+  font-size: 13px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.call-controls {
+  text-align: center;
+}
+
+.call-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  text-align: center;
+}
+
+.call-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.call-btn {
+  min-width: 80px;
+  height: 48px;
+  border-radius: 8px;
+}
+
+.call-btn-text {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.v-btn {
+  text-transform: none !important;
+}
+
+.v-btn--size-small {
+  height: 32px;
+  padding: 0 12px;
+}
+
+.text-success {
+  color: #4caf50 !important;
+}
+
+.penunjang-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.penunjang-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.klinik-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.klinik-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+@media (max-width: 1024px) {
+  .header-content {
+    flex-direction: column;
+    gap: 20px;
+    text-align: center;
+  }
+
+  .header-left {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .page-title {
+    font-size: 28px;
+  }
+
+  .action-buttons {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .action-buttons .v-btn {
+    flex: 1;
+    min-width: 120px;
+  }
+}
+
+@media (max-width: 768px) {
+  .loket-container {
+    padding: 16px;
+  }
+
+  .header-content {
+    padding: 24px 20px;
+  }
+
+  .page-title {
+    font-size: 24px;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .action-buttons .v-btn {
+    width: 100%;
+    margin: 4px 0;
+  }
+
+  .quota-number {
+    font-size: 28px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/Anjungan/Anjungan.vue b/pages/Anjungan/Anjungan.vue
index d443867..0d1eb10 100644
--- a/pages/Anjungan/Anjungan.vue
+++ b/pages/Anjungan/Anjungan.vue
@@ -1,7 +1,5 @@
-<!-- pages/Anjungan.vue -->
 <template>
   <div class="anjungan-container">
-    <!-- Header Section -->
     <div class="page-header">
       <div class="header-content">
         <div class="header-left">
@@ -22,60 +20,7 @@
       </div>
     </div>
 
-    <!-- Controls Section -->
-    <!-- <v-card class="controls-card mb-4" elevation="2">
-      <v-card-text class="py-3">
-        <v-row align="center">
-          <v-col cols="12" md="6">
-            <div class="d-flex align-center flex-wrap gap-3">
-              <v-select
-                v-model="selectedStatus"
-                :items="statusOptions"
-                label="Filter Status"
-                density="compact"
-                variant="outlined"
-                hide-details
-                clearable
-                style="min-width: 160px;"
-              />
-              
-              <v-text-field
-                v-model="searchQuery"
-                label="Cari Klinik"
-                density="compact"
-                variant="outlined"
-                prepend-inner-icon="mdi-magnify"
-                hide-details
-                clearable
-                style="min-width: 200px;"
-              />
-            </div>
-          </v-col>
-          
-          <v-col cols="12" md="6">
-            <div class="d-flex justify-end align-center flex-wrap gap-2">
-              <v-btn
-                variant="outlined"
-                prepend-icon="mdi-refresh"
-                @click="refreshData"
-                :loading="loading"
-                size="small"
-              >
-                Refresh
-              </v-btn>
-            </div>
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card> -->
-
-    <!-- Clinic Cards -->
     <v-card elevation="2" class="main-content-card">
-      <!-- <v-card-title class="d-flex align-center pa-4 bg-grey-lighten-4">
-        <v-icon class="mr-2">mdi-hospital-marker</v-icon>
-        <span>Daftar Klinik - {{ filteredClinics.length }} dari {{ totalClinics }} klinik</span>
-      </v-card-title> -->
-
       <v-card-text class="pa-6">
         <v-row>
           <v-col
@@ -87,7 +32,7 @@
             lg="3"
             class="pa-2"
           >
-            <v-card   
+            <v-card
               :class="{
                 'clinic-card': true,
                 'clinic-available': clinic.available,
@@ -98,19 +43,25 @@
               elevation="2"
             >
               <v-card-text class="text-center pa-4">
-                <!-- Status Chip -->
-                <div class="mb-3">
+                <div class="mb-6">
                   <v-chip
                     :color="clinic.available ? 'success' : 'error'"
                     size="small"
                     variant="flat"
+                    class="mr-2"
                   >
                     {{ clinic.available ? 'TERSEDIA' : 'TUTUP' }}
                   </v-chip>
+                    <v-chip
+                    size="small"
+                    :color="clinic.available ? 'info' : 'error'"
+                    variant="outlined"
+                  >
+                    {{ clinic.shift }}
+                  </v-chip>
                 </div>
 
-                <!-- Icon -->
-                <div class="clinic-icon-wrapper mb-3">
+                <div class="clinic-icon-wrapper mb-6">
                   <v-icon
                     :icon="clinic.icon"
                     size="40"
@@ -118,60 +69,24 @@
                   ></v-icon>
                 </div>
 
-                <!-- Clinic Name -->
                 <h3 class="text-h6 font-weight-bold mb-2">
                   {{ clinic.name }}
                 </h3>
 
-                <!-- Subtitle -->
                 <p v-if="clinic.subtitle" class="text-caption text-grey-darken-1 mb-2">
                   {{ clinic.subtitle }}
                 </p>
 
-                <!-- Shift Info -->
                 <div class="shift-info">
-                  <v-chip
-                    size="small"
-                    :color="clinic.available ? 'info' : 'error'"
-                    variant="outlined"
-                    class="mb-2"
-                  >
-                    {{ clinic.shift }}
-                  </v-chip>
-                  <br>
                   <span v-if="clinic.schedule" class="text-caption text-grey-darken-1">
                     {{ clinic.schedule }}
                   </span>
                 </div>
-
-                <!-- Action Button -->
-                <div class="mt-3">
-                  <v-btn
-                    v-if="clinic.available"
-                    color="success"
-                    variant="flat"
-                    size="small"
-                    block
-                  >
-                    Pilih Klinik
-                  </v-btn>
-                  <v-btn
-                    v-else
-                    color="error"
-                    variant="outlined"
-                    size="small"
-                    disabled
-                    block
-                  >
-                    Tidak Tersedia
-                  </v-btn>
-                </div>
               </v-card-text>
             </v-card>
           </v-col>
         </v-row>
 
-        <!-- Empty State -->
         <div v-if="filteredClinics.length === 0" class="text-center py-8">
           <v-icon size="64" color="grey-lighten-1">mdi-hospital-marker-outline</v-icon>
           <h3 class="text-h6 mt-4 text-grey-darken-1">Tidak ada klinik yang sesuai filter</h3>
@@ -180,9 +95,8 @@
       </v-card-text>
     </v-card>
 
-    <!-- Selection Dialog -->
-    <v-dialog v-model="showDialog" max-width="500">
-      <v-card>
+    <v-dialog v-model="showVisitTypeDialog" max-width="400" persistent>
+      <v-card class="text-center" :style="{ borderRadius: '16px' }">
         <v-card-title class="d-flex align-center bg-primary text-white">
           <v-icon class="mr-2">mdi-check-circle</v-icon>
           Konfirmasi Pilihan
@@ -207,24 +121,191 @@
             </div>
           </div>
         </v-card-text>
-        
-        <v-card-actions class="pa-4">
-          <v-spacer />
-          <v-btn @click="showDialog = false" variant="text">
-            Batal
-          </v-btn>
-          <v-btn 
-            color="primary" 
-            @click="proceedToRegistration"
-            variant="flat"
+        <v-divider />
+        <v-card-text class="pa-4">
+          <v-btn
+            color="primary"
+            class="mb-3"
+            size="large"
+            block
+            @click="selectVisitType('SEKARANG')"
           >
-            Lanjutkan
+            SEKARANG
+          </v-btn>
+          <v-btn
+            color="warning"
+            class="mb-3"
+            size="large"
+            block
+            @click="selectVisitType('PESAN')"
+          >
+            PESAN
+          </v-btn>
+          <v-btn
+            color="error"
+            size="large"
+            block
+            @click="selectVisitType('FAST TRACK')"
+          >
+            FAST TRACK
+          </v-btn>
+        </v-card-text>
+        <v-card-actions class="justify-center pa-4 pt-0">
+          <v-btn variant="outlined" color="grey-darken-1" @click="showVisitTypeDialog = false">
+            Tutup
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="showPaymentTypeDialog" max-width="400" persistent>
+      <v-card class="text-center" :style="{ borderRadius: '16px' }">
+        <v-card-title class="headline pa-4">Jenis Pembayaran</v-card-title>
+        <v-divider />
+        <v-card-text class="pa-4">
+          <v-btn
+            color="success"
+            class="mb-3 text-h6"
+            size="x-large"
+            block
+            @click="selectPaymentType('BPJS')"
+            :style="{ height: '80px', fontWeight: 'bold' }"
+          >
+            BPJS
+          </v-btn>
+          <v-btn
+            color="blue-grey-darken-2"
+            class="text-h6"
+            size="x-large"
+            block
+            @click="selectPaymentType('UMUM')"
+            :style="{ height: '80px', fontWeight: 'bold' }"
+          >
+            UMUM / JKMM / SPM / DLL
+          </v-btn>
+        </v-card-text>
+        <v-card-actions class="justify-center pa-4 pt-0">
+          <v-btn variant="outlined" color="grey-darken-1" @click="showPaymentTypeDialog = false">
+            Tutup
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="showBookingFormDialog" max-width="500" persistent>
+      <v-card :style="{ borderRadius: '16px' }">
+        <v-card-title class="headline pa-4 bg-primary text-white">
+          Pemesanan Antrian Poliklinik
+        </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"
+            ></v-text-field>
+
+            <v-select
+              v-model="bookingForm.shift"
+              :items="['Shift 1', 'Shift 2']"
+              label="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="grey-darken-1">
+            Tutup
+          </v-btn>
+          <v-btn color="success" variant="flat" @click="submitBooking">
+            Simpan
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="showFastTrackFormDialog" max-width="500" persistent>
+      <v-card :style="{ borderRadius: '16px' }">
+        <v-card-title class="headline pa-4 bg-primary text-white">
+          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="grey-darken-1">
+            Tutup
+          </v-btn>
+          <v-btn color="success" variant="flat" @click="submitFastTrack">
+            Simpan
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
-    <!-- Snackbar -->
     <v-snackbar
       v-model="snackbar"
       :color="snackbarColor"
@@ -232,7 +313,6 @@
       location="top right"
     >
       {{ snackbarText }}
-      
       <template v-slot:actions>
         <v-btn icon @click="snackbar = false">
           <v-icon>mdi-close</v-icon>
@@ -244,235 +324,72 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-definePageMeta({
-      layout: false, // Disables the layout for this specific page
-    });
 
-// Reactive data
+definePageMeta({
+  layout: false, // Disables the layout for this specific page
+})
+
+// Reactive data (tambahan untuk dialog baru)
 const loading = ref(false)
 const selectedStatus = ref(null)
 const searchQuery = ref('')
-const showDialog = ref(false)
+const showVisitTypeDialog = ref(false) // Dialog: Pilih Kunjungan
+const showPaymentTypeDialog = ref(false) // Dialog: Jenis Pembayaran (Sekarang)
+const showBookingFormDialog = ref(false) // Dialog: Form Pesan
+const showFastTrackFormDialog = ref(false) // Dialog: Form Fast Track
 const selectedClinic = ref(null)
+const selectedVisitType = ref(null)
 const snackbar = ref(false)
 const snackbarText = ref('')
 const snackbarColor = ref('success')
 
-// Options
+// Form data models
+const bookingForm = ref({
+  date: new Date().toISOString().substring(0, 10),
+  shift: 'Shift 1',
+  payment: null,
+})
+const fastTrackForm = ref({
+  guarantor: '',
+  noRek: '',
+  patientName: '',
+  reason: '',
+  payment: null,
+})
+
+
+// Options (Tidak Berubah)
 const statusOptions = ['Tersedia', 'Tutup']
 
-// Clinic data
+// Clinic data (Tidak Berubah)
 const clinics = ref([
-  {
-    id: 1,
-    name: 'ANAK',
-    subtitle: '',
-    icon: 'mdi-baby-face',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 2,
-    name: 'ANESTESI',
-    subtitle: '',
-    icon: 'mdi-sleep',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 3,
-    name: 'BEDAH',
-    subtitle: '',
-    icon: 'mdi-medical-bag',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 4,
-    name: 'GERIATRI',
-    subtitle: '',
-    icon: 'mdi-account-supervisor',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 5,
-    name: 'GIGI DAN MULUT',
-    subtitle: 'GIGI DAN MULUT',
-    icon: 'mdi-tooth',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 6,
-    name: 'GIZI',
-    subtitle: '',
-    icon: 'mdi-food-apple',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 7,
-    name: 'HOM',
-    subtitle: 'HEMATO ONKOLOGI MEDIS',
-    icon: 'mdi-water',
-    shift: 'TUTUP',
-    schedule: '',
-    available: false,
-  },
-  {
-    id: 8,
-    name: 'IPD',
-    subtitle: 'PENYAKIT DALAM',
-    icon: 'mdi-hospital',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 9,
-    name: 'JANTUNG',
-    subtitle: 'CARDIOLOGI',
-    icon: 'mdi-heart-pulse',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 10,
-    name: 'JIWA',
-    subtitle: '',
-    icon: 'mdi-brain',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 11,
-    name: 'KANDUNGAN',
-    subtitle: '',
-    icon: 'mdi-human-pregnant',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 12,
-    name: 'KEMOTERAPI',
-    subtitle: '',
-    icon: 'mdi-needle',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 13,
-    name: 'KOMPLEMENTER',
-    subtitle: 'NYERI',
-    icon: 'mdi-leaf',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 14,
-    name: 'KUL KEL',
-    subtitle: 'KULIT KELAMIN',
-    icon: 'mdi-hand-back-right',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 15,
-    name: 'MATA',
-    subtitle: '',
-    icon: 'mdi-eye',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 16,
-    name: 'MCU',
-    subtitle: '',
-    icon: 'mdi-clipboard-check',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 17,
-    name: 'ONKOLOGI',
-    subtitle: '',
-    icon: 'mdi-ribbon',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 18,
-    name: 'PARU',
-    subtitle: '',
-    icon: 'mdi-lungs',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 19,
-    name: 'R. TINDAKAN',
-    subtitle: 'EMG, ECG, DLL',
-    icon: 'mdi-monitor-heart-rate',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 20,
-    name: 'RADIOTERAPI',
-    subtitle: '',
-    icon: 'mdi-radioactive',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 21,
-    name: 'REHAB MEDIK',
-    subtitle: '',
-    icon: 'mdi-human-cane',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  },
-  {
-    id: 22,
-    name: 'SARAF',
-    subtitle: 'NEUROLOGI',
-    icon: 'mdi-head-cog',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: false,
-  },
-  {
-    id: 23,
-    name: 'THT',
-    subtitle: '',
-    icon: 'mdi-ear-hearing',
-    shift: 'SHIFT 1',
-    schedule: 'Mulai Pukul 07:00',
-    available: true,
-  }
+    // ... data klinik ... (dibiarkan seperti semula)
+    { id: 1, name: 'ANAK', subtitle: '', icon: 'mdi-baby-face', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 2, name: 'ANESTESI', subtitle: '', icon: 'mdi-sleep', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 3, name: 'BEDAH', subtitle: '', icon: 'mdi-medical-bag', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 4, name: 'GERIATRI', subtitle: '', icon: 'mdi-account-supervisor', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 5, name: 'GIGI DAN MULUT', subtitle: '', icon: 'mdi-tooth', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 6, name: 'GIZI', subtitle: '', icon: 'mdi-food-apple', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 7, name: 'HEMATO ONKOLOGI MEDIS', subtitle: '', icon: 'mdi-water', shift: 'TUTUP', schedule: '', available: false, },
+    { id: 8, name: 'IPD (PENYAKIT DALAM)', subtitle: '', icon: 'mdi-hospital', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 9, name: 'JANTUNG (CARDIOLOGI)', subtitle: '', icon: 'mdi-heart-pulse', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 10, name: 'JIWA', subtitle: '', icon: 'mdi-brain', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 11, name: 'KANDUNGAN', subtitle: '', icon: 'mdi-human-pregnant', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 12, name: 'KEMOTERAPI', subtitle: '', icon: 'mdi-needle', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 13, name: 'KOMPLEMENTER (NYERI)', subtitle: '', icon: 'mdi-leaf', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 14, name: 'KULIT KELAMIN', subtitle: '', icon: 'mdi-hand-back-right', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 15, name: 'MATA', subtitle: '', icon: 'mdi-eye', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 16, name: 'MCU', subtitle: '', icon: 'mdi-clipboard-check', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 17, name: 'ONKOLOGI', subtitle: '', icon: 'mdi-ribbon', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 18, name: 'PARU', subtitle: '', icon: 'mdi-lungs', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 19, name: 'R. TINDAKAN (EMG, ECG, DLL)', subtitle: '', icon: 'mdi-monitor-heart-rate', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 20, name: 'RADIOTERAPI', subtitle: '', icon: 'mdi-radioactive', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 21, name: 'REHAB MEDIK', subtitle: '', icon: 'mdi-human-cane', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
+    { id: 22, name: 'SARAF (NEUROLOGI)', subtitle: '', icon: 'mdi-head-cog', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: false, },
+    { id: 23, name: 'THT', subtitle: '', icon: 'mdi-ear-hearing', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, }
 ])
 
-// Computed properties
+// Computed properties (Tidak Berubah)
 const filteredClinics = computed(() => {
   let filtered = clinics.value
 
@@ -483,7 +400,7 @@ const filteredClinics = computed(() => {
 
   if (searchQuery.value) {
     const query = searchQuery.value.toLowerCase()
-    filtered = filtered.filter(clinic => 
+    filtered = filtered.filter(clinic =>
       clinic.name.toLowerCase().includes(query) ||
       clinic.subtitle.toLowerCase().includes(query)
     )
@@ -501,17 +418,76 @@ const showSnackbar = (text, color = 'success') => {
   snackbar.value = true
 }
 
+// 1. Memilih Klinik
 const selectClinic = (clinic) => {
   if (clinic.available) {
     selectedClinic.value = clinic
-    showDialog.value = true
+    showVisitTypeDialog.value = true // Tampilkan dialog Pilih Kunjungan
   }
 }
 
-const proceedToRegistration = () => {
-  showSnackbar(`Mengarahkan ke pendaftaran ${selectedClinic.value.name}...`, 'success')
-  console.log('Proceeding to registration for:', selectedClinic.value.name)
-  showDialog.value = false
+// 2. Memilih Jenis Kunjungan (Sekarang, Pesan, Fast Track)
+const selectVisitType = (type) => {
+  selectedVisitType.value = type
+  showVisitTypeDialog.value = false // Tutup dialog jenis kunjungan
+
+  if (type === 'SEKARANG') {
+    showPaymentTypeDialog.value = true // Lanjut ke dialog Jenis Pembayaran
+  } else if (type === 'PESAN') {
+    // Reset form booking sebelum ditampilkan
+    bookingForm.value = {
+      date: new Date().toISOString().substring(0, 10),
+      shift: 'Shift 1',
+      payment: null,
+    }
+    showBookingFormDialog.value = true // Tampilkan form Pesan
+  } else if (type === 'FAST TRACK') {
+     // Reset form fast track sebelum ditampilkan
+    fastTrackForm.value = {
+        guarantor: '',
+        noRek: '',
+        patientName: '',
+        reason: '',
+        payment: null,
+    }
+    showFastTrackFormDialog.value = true // Tampilkan form Fast Track
+  }
+}
+
+// 3. Memilih Jenis Pembayaran (untuk SEKARANG)
+const selectPaymentType = (paymentType) => {
+  showPaymentTypeDialog.value = false
+  const message = `Pendaftaran **${selectedClinic.value.name}** untuk kunjungan **SEKARANG** dengan pembayaran **${paymentType}** berhasil diproses.`
+  showSnackbar(message, 'success')
+  console.log('Proceeding to registration for:', selectedClinic.value.name, 'Type: SEKARANG', 'Payment:', paymentType)
+  selectedClinic.value = null; // Reset
+}
+
+// 4. Submit Form Pesan
+const submitBooking = () => {
+  if (!bookingForm.value.date || !bookingForm.value.shift || !bookingForm.value.payment) {
+    showSnackbar('Mohon lengkapi semua field Pemesanan.', 'error')
+    return
+  }
+
+  showBookingFormDialog.value = false
+  const message = `Pemesanan antrian **${selectedClinic.value.name}** pada ${bookingForm.value.date} (**${bookingForm.value.payment}**) berhasil disimpan.`
+  showSnackbar(message, 'success')
+  console.log('Submitted booking for:', selectedClinic.value.name, bookingForm.value)
+  selectedClinic.value = null; // Reset
+}
+
+// 5. Submit Form Fast Track
+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; // Reset
 }
 
 const refreshData = () => {
@@ -529,6 +505,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
+/* Style yang sudah ada (Tidak Berubah) */
 .anjungan-container {
   background: #f5f7fa;
   min-height: 100vh;
@@ -595,7 +572,7 @@ onMounted(() => {
 .clinic-card {
   cursor: pointer;
   border-radius: 16px !important;
-  height: 280px;
+  height: 240px;
   background: white;
 }
 
@@ -629,7 +606,7 @@ onMounted(() => {
   margin-top: 8px;
 }
 
-/* Responsive Design */
+/* Responsive Design (Tidak Berubah) */
 @media (max-width: 1024px) {
   .header-content {
     flex-direction: column;
diff --git a/pages/FastTrack.txt b/pages/FastTrack.txt
deleted file mode 100644
index d892c28..0000000
--- a/pages/FastTrack.txt
+++ /dev/null
@@ -1,1106 +0,0 @@
-<!-- pages/FastTrack.vue -->
-<template>
-  <div class="fast-track-container">
-    <!-- Header Section -->
-    <div class="page-header">
-      <div class="header-content">
-        <div class="header-left">
-          <div class="header-icon">
-            <v-icon size="32" color="white">mdi-flash</v-icon>
-          </div>
-          <div class="header-text">
-            <h1 class="page-title">Fast Track</h1>
-            <p class="page-subtitle">Manajemen Pasien Jalur Cepat</p>
-          </div>
-        </div>
-        <div class="header-right">
-          <!-- <v-chip
-            :color="isLiveMode ? 'success' : 'warning'"
-            variant="flat"
-            class="mr-3"
-          >
-            <v-icon start>{{ isLiveMode ? 'mdi-circle' : 'mdi-circle-outline' }}</v-icon>
-            {{ isLiveMode ? 'Live Mode' : 'Offline Mode' }}
-          </v-chip> -->
-          <!-- <v-btn
-            color="white"
-            variant="flat"
-            prepend-icon="mdi-qrcode-scan"
-            @click="openScanDialog"
-            class="text-primary"
-          >
-            Scan Barcode
-          </v-btn> -->
-        </div>
-      </div>
-    </div>
-
-    <!-- Stats Cards -->
-    <!-- <div class="stats-section">
-      <v-row>
-        <v-col cols="12" sm="6" md="3">
-          <StatCard
-            title="Total Pasien"
-            :value="totalPatients"
-            icon="mdi-account-group"
-            color="primary"
-            trend="+12%"
-          />
-        </v-col>
-        <v-col cols="12" sm="6" md="3">
-          <StatCard
-            title="Tunggu Daftar"
-            :value="waitingCount"
-            icon="mdi-clock-outline"
-            color="warning"
-            :urgent="waitingCount > 10"
-          />
-        </v-col>
-        <v-col cols="12" sm="6" md="3">
-          <StatCard
-            title="Proses Barcode"
-            :value="barcodeCount"
-            icon="mdi-qrcode"
-            color="info"
-          />
-        </v-col>
-        <v-col cols="12" sm="6" md="3">
-          <StatCard
-            title="Selesai Hari Ini"
-            :value="completedCount"
-            icon="mdi-check-circle"
-            color="success"
-          />
-        </v-col>
-      </v-row>
-    </div> -->
-
-    <!-- Additional Controls -->
-    <v-card class="controls-card mb-4" elevation="2">
-      <v-card-text class="py-3">
-        <v-row align="center">
-          <v-col cols="12" md="6">
-            <div class="d-flex align-center flex-wrap gap-3">
-              <v-select
-                v-model="selectedStatus"
-                :items="statusOptions"
-                label="Filter Status"
-                density="compact"
-                variant="outlined"
-                hide-details
-                clearable
-                style="min-width: 160px;"
-              />
-              
-              <v-select
-                v-model="selectedShift"
-                :items="shiftOptions"
-                label="Filter Shift"
-                density="compact"
-                variant="outlined"
-                hide-details
-                clearable
-                style="min-width: 120px;"
-              />
-
-              <v-select
-                v-model="selectedKlinik"
-                :items="klinikOptions"
-                label="Filter Klinik"
-                density="compact"
-                variant="outlined"
-                hide-details
-                clearable
-                style="min-width: 140px;"
-              />
-            </div>
-          </v-col>
-          
-          <v-col cols="12" md="6">
-            <div class="d-flex justify-end align-center flex-wrap gap-2">
-              <v-btn
-                variant="outlined"
-                prepend-icon="mdi-refresh"
-                @click="refreshData"
-                :loading="loading"
-                size="small"
-              >
-                Refresh
-              </v-btn>
-              
-              <v-btn
-                variant="outlined"
-                prepend-icon="mdi-export"
-                @click="exportData"
-                size="small"
-              >
-                Export
-              </v-btn>
-
-              <v-btn
-                color="primary"
-                prepend-icon="mdi-plus"
-                @click="addNewPatient"
-                size="small"
-              >
-                Tambah Pasien
-              </v-btn>
-            </div>
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
-
-    <!-- Menggunakan TabelData Component yang sudah ada -->
-    <v-card elevation="2" class="main-table-card">
-      <TabelData
-        :headers="enhancedHeaders"
-        :items="filteredItems"
-        :title="tableTitle"
-        :show-search="true"
-      >
-        <!-- Custom Actions Slot -->
-        <template #actions="{ item }">
-          <div class="action-buttons">
-            <!-- Quick Status Update Buttons -->
-            <v-btn
-              v-if="item.status === 'Tunggu Daftar'"
-              icon
-              size="small"
-              variant="text"
-              color="info"
-              @click="updateStatus(item, 'Proses Barcode')"
-              v-tooltip="'Proses Barcode'"
-            >
-              <v-icon>mdi-qrcode</v-icon>
-            </v-btn>
-
-            <v-btn
-              v-if="item.status === 'Proses Barcode'"
-              icon
-              size="small"
-              variant="text"
-              color="success"
-              @click="updateStatus(item, 'Selesai')"
-              v-tooltip="'Tandai Selesai'"
-            >
-              <v-icon>mdi-check</v-icon>
-            </v-btn>
-            
-            <!-- View Details -->
-            <v-btn
-              icon
-              size="small"
-              variant="text"
-              color="primary"
-              @click="viewDetails(item)"
-              v-tooltip="'Lihat Detail'"
-            >
-              <v-icon>mdi-eye</v-icon>
-            </v-btn>
-            
-            <!-- Track Patient -->
-            <v-btn
-              icon
-              size="small"
-              variant="text"
-              color="info"
-              @click="trackPatient(item)"
-              v-tooltip="'Track Pasien'"
-            >
-              <v-icon>mdi-map-marker-path</v-icon>
-            </v-btn>
-            
-            <!-- More Actions Menu -->
-            <v-menu>
-              <template v-slot:activator="{ props }">
-                <v-btn
-                  icon
-                  size="small"
-                  variant="text"
-                  v-bind="props"
-                  v-tooltip="'Aksi Lainnya'"
-                >
-                  <v-icon>mdi-dots-vertical</v-icon>
-                </v-btn>
-              </template>
-              
-              <v-list density="compact">
-                <v-list-item @click="copyBarcode(item.barcode)">
-                  <v-list-item-title>
-                    <v-icon start size="16">mdi-content-copy</v-icon>
-                    Copy Barcode
-                  </v-list-item-title>
-                </v-list-item>
-                <v-list-item @click="printLabel(item)">
-                  <v-list-item-title>
-                    <v-icon start size="16">mdi-printer</v-icon>
-                    Print Label
-                  </v-list-item-title>
-                </v-list-item>
-                <v-divider />
-                <v-list-item @click="editPatient(item)">
-                  <v-list-item-title>
-                    <v-icon start size="16">mdi-pencil</v-icon>
-                    Edit Data
-                  </v-list-item-title>
-                </v-list-item>
-                <v-list-item @click="cancelPatient(item)" class="text-error">
-                  <v-list-item-title>
-                    <v-icon start size="16">mdi-close</v-icon>
-                    Batalkan
-                  </v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-          </div>
-        </template>
-      </TabelData>
-    </v-card>
-
-    <!-- Barcode Scanner Dialog -->
-    <!-- <v-dialog v-model="scanDialog" max-width="500">
-      <v-card class="scanner-dialog">
-        <v-card-title class="d-flex align-center bg-primary text-white">
-          <v-icon class="mr-2">mdi-qrcode-scan</v-icon>
-          Scan Barcode Pasien
-        </v-card-title>
-        
-        <v-card-text class="pa-6">
-          <div class="scanner-container">
-            <div class="scanner-preview">
-              <v-icon size="100" color="grey-lighten-1">mdi-qrcode</v-icon>
-              <p class="text-center mt-3 text-medium-emphasis">
-                Arahkan kamera ke barcode pasien
-              </p>
-            </div>
-            
-            <v-text-field
-              v-model="manualBarcode"
-              label="Atau masukkan barcode manual"
-              prepend-icon="mdi-keyboard"
-              variant="outlined"
-              class="mt-4"
-              hint="Contoh: 25090310822"
-              persistent-hint
-            />
-          </div>
-        </v-card-text>
-        
-        <v-card-actions class="pa-4">
-          <v-spacer />
-          <v-btn @click="scanDialog = false" variant="text">
-            Batal
-          </v-btn>
-          <v-btn 
-            color="primary" 
-            @click="processBarcode"
-            :disabled="!manualBarcode"
-            variant="flat"
-          >
-            Proses Barcode
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog> -->
-
-    <!-- Patient Detail Dialog -->
-    <v-dialog v-model="detailDialog" max-width="800">
-      <v-card>
-        <v-card-title class="bg-primary text-white">
-          <v-icon class="mr-2">mdi-account-details</v-icon>
-          Detail Pasien
-        </v-card-title>
-        
-        <v-card-text v-if="selectedPatient" class="pa-6">
-          <v-row>
-            <v-col cols="12" md="6">
-              <v-list density="compact">
-                <v-list-item>
-                  <v-list-item-title class="text-caption text-medium-emphasis">Barcode</v-list-item-title>
-                  <v-list-item-subtitle class="text-h6 font-weight-bold text-primary">
-                    {{ selectedPatient.barcode }}
-                  </v-list-item-subtitle>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-title class="text-caption text-medium-emphasis">No Antrian</v-list-item-title>
-                  <v-list-item-subtitle>{{ selectedPatient.noAntrian }}</v-list-item-subtitle>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-title class="text-caption text-medium-emphasis">Rekam Medis</v-list-item-title>
-                  <v-list-item-subtitle>{{ selectedPatient.rm }}</v-list-item-subtitle>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-title class="text-caption text-medium-emphasis">Klinik Tujuan</v-list-item-title>
-                  <v-list-item-subtitle>
-                    <v-chip size="small" :color="getKlinikColor(selectedPatient.klinik)">
-                      {{ selectedPatient.klinik }}
-                    </v-chip>
-                  </v-list-item-subtitle>
-                </v-list-item>
-              </v-list>
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-list density="compact">
-                <v-list-item>
-                  <v-list-item-title class="text-caption text-medium-emphasis">Status</v-list-item-title>
-                  <v-list-item-subtitle>
-                    <v-chip :color="getStatusColor(selectedPatient.status)" size="small">
-                      {{ selectedPatient.status }}
-                    </v-chip>
-                  </v-list-item-subtitle>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-title class="text-caption text-medium-emphasis">Shift</v-list-item-title>
-                  <v-list-item-subtitle>{{ selectedPatient.shift }}</v-list-item-subtitle>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-title class="text-caption text-medium-emphasis">Pembayaran</v-list-item-title>
-                  <v-list-item-subtitle>{{ selectedPatient.pembayaran }}</v-list-item-subtitle>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-title class="text-caption text-medium-emphasis">Keterangan</v-list-item-title>
-                  <v-list-item-subtitle>
-                    {{ selectedPatient.keterangan || '-' }}
-                  </v-list-item-subtitle>
-                </v-list-item>
-              </v-list>
-            </v-col>
-          </v-row>
-        </v-card-text>
-        
-        <v-card-actions class="pa-4">
-          <v-spacer />
-          <v-btn @click="detailDialog = false" variant="text">
-            Tutup
-          </v-btn>
-          <v-btn color="primary" @click="printPatientDetail" variant="flat">
-            Print Detail
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- Snackbar for notifications -->
-    <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>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import TabelData from '@/components/TabelData.vue'
-
-// Stats Card Component
-const StatCard = {
-  props: ['title', 'value', 'icon', 'color', 'trend', 'urgent'],
-  template: `
-    <v-card 
-      :class="{ 'urgent-card': urgent }" 
-      class="stat-card" 
-      elevation="2"
-    >
-      <v-card-text class="pa-4">
-        <div class="d-flex align-center justify-space-between">
-          <div>
-            <div class="text-subtitle-2 text-medium-emphasis">{{ title }}</div>
-            <div class="text-h5 font-weight-bold mt-1" :class="urgent ? 'text-warning' : ''">
-              {{ value }}
-            </div>
-            <div v-if="trend" class="text-caption text-success mt-1">
-              <v-icon size="12">mdi-trending-up</v-icon>
-              {{ trend }}
-            </div>
-          </div>
-          <v-avatar :color="color" variant="tonal" size="48">
-            <v-icon>{{ icon }}</v-icon>
-          </v-avatar>
-        </div>
-      </v-card-text>
-    </v-card>
-  `
-}
-
-// Reactive data
-const loading = ref(false)
-const selectedStatus = ref(null)
-const selectedShift = ref(null)
-const selectedKlinik = ref(null)
-const scanDialog = ref(false)
-const detailDialog = ref(false)
-const manualBarcode = ref('')
-const selectedPatient = ref(null)
-const snackbar = ref(false)
-const snackbarText = ref('')
-const snackbarColor = ref('success')
-const isLiveMode = ref(true)
-
-// Sample data (dalam implementasi nyata, ini dari API)
-const items = ref([
-  {
-    id: 1,
-    barcode: '25090310822',
-    tanggal: '03-09-2025 / 06:49',
-    noAntrian: 'AN1113',
-    rm: 'JKN',
-    shift: 'Shift 1',
-    klinik: 'ANAK',
-    pj: 'JKN',
-    keterangan: 'Tunggu Daftar',
-    pembayaran: 'JKN',
-    status: 'Tunggu Daftar'
-  },
-  {
-    id: 2,
-    barcode: '25090310831',
-    tanggal: '03-09-2025 / 06:51',
-    noAntrian: 'BD1147',
-    rm: 'JKN',
-    shift: 'Shift 1',
-    klinik: 'BEDAH',
-    pj: 'JKN',
-    keterangan: 'Tunggu Daftar',
-    pembayaran: 'JKN',
-    status: 'Proses Barcode'
-  },
-  {
-    id: 3,
-    barcode: '25090310830',
-    tanggal: '03-09-2025 / 06:51',
-    noAntrian: 'BD1146',
-    rm: 'JKN',
-    shift: 'Shift 1',
-    klinik: 'BEDAH',
-    pj: 'JKN',
-    keterangan: 'Tunggu Daftar',
-    pembayaran: 'JKN',
-    status: 'Tunggu Daftar'
-  },
-  {
-    id: 4,
-    barcode: '25090310829',
-    tanggal: '03-09-2025 / 06:51',
-    noAntrian: 'TH1022',
-    rm: 'JKN',
-    shift: 'Shift 1',
-    klinik: 'THT',
-    pj: 'JKN',
-    keterangan: 'Tunggu Daftar',
-    pembayaran: 'JKN',
-    status: 'Tunggu Daftar'
-  },
-  {
-    id: 5,
-    barcode: '25090310828',
-    tanggal: '03-09-2025 / 06:50',
-    noAntrian: 'OB1045',
-    rm: 'JKN',
-    shift: 'Shift 1',
-    klinik: 'KANDUNGAN',
-    pj: 'JKN',
-    keterangan: 'Tunggu Daftar',
-    pembayaran: 'JKN',
-    status: 'Tunggu Daftar'
-  },
-  {
-    id: 6,
-    barcode: '25090310827',
-    tanggal: '03-09-2025 / 06:49',
-    noAntrian: 'IP1036',
-    rm: 'JKN',
-    shift: 'Shift 1',
-    klinik: 'IPD',
-    pj: 'JKN',
-    keterangan: 'Tunggu Daftar',
-    pembayaran: 'JKN',
-    status: 'Tunggu Daftar'
-  },
-  {
-    id: 7,
-    barcode: '25090310826',
-    tanggal: '03-09-2025 / 06:49',
-    noAntrian: 'OB1044',
-    rm: 'JKN',
-    shift: 'Shift 1',
-    klinik: 'KANDUNGAN',
-    pj: 'JKN',
-    keterangan: 'Tunggu Daftar',
-    pembayaran: 'JKN',
-    status: 'Tunggu Daftar'
-  },
-  {
-    id: 8,
-    barcode: '25090310825',
-    tanggal: '03-09-2025 / 06:49',
-    noAntrian: 'MT1067',
-    rm: 'JKN',
-    shift: 'Shift 1',
-    klinik: 'MATA',
-    pj: 'JKN',
-    keterangan: 'Tunggu Daftar',
-    pembayaran: 'JKN',
-    status: 'Tunggu Daftar'
-  },
-  {
-    id: 9,
-    barcode: '25090310824',
-    tanggal: '03-09-2025 / 06:49',
-    noAntrian: 'JT1072',
-    rm: 'JKN',
-    shift: 'Shift 1',
-    klinik: 'JANTUNG',
-    pj: 'JKN',
-    keterangan: 'Tunggu Daftar',
-    pembayaran: 'JKN',
-    status: 'Tunggu Daftar'
-  },
-  {
-    id: 10,
-    barcode: '25090310823',
-    tanggal: '03-09-2025 / 06:49',
-    noAntrian: 'MT1066',
-    rm: 'JKN',
-    shift: 'Shift 1',
-    klinik: 'MATA',
-    pj: 'JKN',
-    keterangan: 'Tunggu Daftar',
-    pembayaran: 'JKN',
-    status: 'Selesai'
-  }
-])
-
-// Enhanced headers untuk TabelData component
-const enhancedHeaders = ref([
-  { title: 'No', value: 'no', sortable: false, width: '60px' },
-  { title: 'Barcode', value: 'barcode', sortable: true, width: '140px' },
-  { title: 'Tanggal / Jam Daftar', value: 'tanggal', sortable: true, width: '160px' },
-  { title: 'No Antrian', value: 'noAntrian', sortable: true, width: '110px' },
-  { title: 'RM', value: 'rm', sortable: true, width: '80px' },
-  { title: 'Shift', value: 'shift', sortable: true, width: '90px' },
-  { title: 'Klinik', value: 'klinik', sortable: true, width: '120px' },
-  { title: 'PJ', value: 'pj', sortable: true, width: '80px' },
-  { title: 'Keterangan', value: 'keterangan', sortable: false, width: '120px' },
-  { title: 'Pembayaran', value: 'pembayaran', sortable: true, width: '100px' },
-  { title: 'Status', value: 'status', sortable: true, width: '140px' },
-  { title: 'Aksi', value: 'aksi', sortable: false, width: '140px' }
-])
-
-// Options
-const statusOptions = [
-  'Tunggu Daftar',
-  'Proses Barcode',
-  'Selesai',
-  'Batal'
-]
-
-const shiftOptions = [
-  'Shift 1',
-  'Shift 2',
-  'Shift 3'
-]
-
-const klinikOptions = [
-  'ANAK',
-  'BEDAH',
-  'THT',
-  'KANDUNGAN',
-  'IPD',
-  'MATA',
-  'JANTUNG'
-]
-
-// Computed properties
-const filteredItems = computed(() => {
-  let filtered = items.value
-
-  if (selectedStatus.value) {
-    filtered = filtered.filter(item => item.status === selectedStatus.value)
-  }
-
-  if (selectedShift.value) {
-    filtered = filtered.filter(item => item.shift === selectedShift.value)
-  }
-
-  if (selectedKlinik.value) {
-    filtered = filtered.filter(item => item.klinik === selectedKlinik.value)
-  }
-
-  return filtered
-})
-
-const tableTitle = computed(() => {
-  const totalFiltered = filteredItems.value.length
-  const totalAll = items.value.length
-  
-  if (totalFiltered !== totalAll) {
-    return `Fast Track - ${totalFiltered} dari ${totalAll} pasien`
-  }
-  
-  return `Fast Track - ${totalAll} pasien`
-})
-
-const totalPatients = computed(() => items.value.length)
-const waitingCount = computed(() => items.value.filter(item => item.status === 'Tunggu Daftar').length)
-const barcodeCount = computed(() => items.value.filter(item => item.status === 'Proses Barcode').length)
-const completedCount = computed(() => items.value.filter(item => item.status === 'Selesai').length)
-
-// Methods
-const getStatusColor = (status) => {
-  const colors = {
-    'Tunggu Daftar': 'warning',
-    'Proses Barcode': 'info',
-    'Selesai': 'success',
-    'Batal': 'error'
-  }
-  return colors[status] || 'grey'
-}
-
-const getKlinikColor = (klinik) => {
-  const colors = {
-    'ANAK': 'pink',
-    'BEDAH': 'blue',
-    'THT': 'green',
-    'KANDUNGAN': 'purple',
-    'IPD': 'orange',
-    'MATA': 'teal',
-    'JANTUNG': 'red'
-  }
-  return colors[klinik] || 'grey'
-}
-
-const showSnackbar = (text, color = 'success') => {
-  snackbarText.value = text
-  snackbarColor.value = color
-  snackbar.value = true
-}
-
-const openScanDialog = () => {
-  scanDialog.value = true
-  manualBarcode.value = ''
-}
-
-// const processBarcode = () => {
-//   if (manualBarcode.value) {
-//     // Simulasi proses barcode
-//     const existingPatient = items.value.find(item => item.barcode === manualBarcode.value)
-    
-//     if (existingPatient) {
-//       showSnackbar(`Barcode ${manualBarcode.value} ditemukan - Status: ${existingPatient.status}`, 'info')
-//       selectedPatient.value = existingPatient
-//       detailDialog.value = true
-//     } else {
-//       showSnackbar(`Barcode ${manualBarcode.value} tidak ditemukan`, 'warning')
-//     }
-    
-//     scanDialog.value = false
-//   }
-// }
-
-const copyBarcode = async (barcode) => {
-  try {
-    await navigator.clipboard.writeText(barcode)
-    showSnackbar('Barcode berhasil disalin', 'success')
-  } catch (error) {
-    showSnackbar('Gagal menyalin barcode', 'error')
-  }
-}
-
-const refreshData = () => {
-  loading.value = true
-  // Simulasi refresh data
-  setTimeout(() => {
-    loading.value = false
-    showSnackbar('Data berhasil diperbarui', 'success')
-    // Update live mode status
-    isLiveMode.value = Math.random() > 0.3 // 70% chance live mode
-  }, 1500)
-}
-
-const exportData = () => {
-  showSnackbar('Export data dimulai...', 'info')
-  // Implementasi export logic
-}
-
-const addNewPatient = () => {
-  showSnackbar('Fitur tambah pasien akan segera hadir', 'info')
-}
-
-const viewDetails = (item) => {
-  selectedPatient.value = item
-  detailDialog.value = true
-}
-
-const trackPatient = (item) => {
-  showSnackbar(`Tracking pasien ${item.barcode} - ${item.klinik}`, 'info')
-}
-
-const updateStatus = (item, newStatus) => {
-  const oldStatus = item.status
-  item.status = newStatus
-  showSnackbar(`Status ${item.barcode} berubah: ${oldStatus} → ${newStatus}`, 'success')
-}
-
-const editPatient = (item) => {
-  showSnackbar(`Edit data pasien ${item.barcode}`, 'info')
-}
-
-const cancelPatient = (item) => {
-  if (confirm(`Yakin ingin membatalkan pasien ${item.barcode}?`)) {
-    item.status = 'Batal'
-    showSnackbar(`Pasien ${item.barcode} dibatalkan`, 'warning')
-  }
-}
-
-const printLabel = (item) => {
-  showSnackbar(`Print label untuk ${item.barcode}`, 'info')
-}
-
-const printPatientDetail = () => {
-  if (selectedPatient.value) {
-    showSnackbar(`Print detail pasien ${selectedPatient.value.barcode}`, 'info')
-    detailDialog.value = false
-  }
-}
-
-// Lifecycle
-onMounted(() => {
-  refreshData()
-  
-  // Auto refresh setiap 30 detik untuk live mode
-  setInterval(() => {
-    if (isLiveMode.value) {
-      // Simulasi update data real-time
-      const randomIndex = Math.floor(Math.random() * items.value.length)
-      const randomStatuses = ['Tunggu Daftar', 'Proses Barcode', 'Selesai']
-      const randomStatus = randomStatuses[Math.floor(Math.random() * randomStatuses.length)]
-      
-      if (items.value[randomIndex] && items.value[randomIndex].status !== 'Selesai') {
-        items.value[randomIndex].status = randomStatus
-      }
-    }
-  }, 30000)
-})
-</script>
-
-<style scoped>
-.fast-track-container {
-  background: #f5f7fa;
-  min-height: 100vh;
-  padding: 20px;
-}
-
-.page-header {
-  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
-  overflow: hidden;
-  position: relative;
-}
-/* 
-.page-header::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(45deg, transparent 30%, rgb(236, 216, 216) 50%, transparent 70%);
-  animation: shimmer 3s infinite;
-}
-
-@keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-} */
-
-.header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 32px;
-  color: white;
-  position: relative;
-  z-index: 2;
-}
-
-.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;
-  font-weight: 700;
-  margin: 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.page-subtitle {
-  margin: 4px 0 0 0;
-  opacity: 0.9;
-  font-size: 16px;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-/* .stats-section {
-  margin-bottom: 24px;
-}
-
-.stat-card {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 16px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  background: white;
-}
-
-.stat-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 12px 40px rgba(188, 245, 54, 0.15);
-} */
-
-.urgent-card {
-  border-left: 5px solid #ff9800;
-  animation: urgent-pulse 2s infinite;
-}
-
-@keyframes urgent-pulse {
-  0%, 100% { 
-    border-left-color: #ff9800; 
-    box-shadow: 0 4px 20px rgba(255, 152, 0, 0.2);
-  }
-  50% { 
-    border-left-color: #ff5722; 
-    box-shadow: 0 4px 20px rgba(255, 87, 34, 0.4);
-  }
-}
-
-.controls-card {
-  border-radius: 16px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.main-table-card {
-  border-radius: 16px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  overflow: hidden;
-}
-
-.action-buttons {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.scanner-dialog {
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-.scanner-container {
-  text-align: center;
-}
-
-.scanner-preview {
-  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-  border: 2px dashed #dee2e6;
-  border-radius: 16px;
-  padding: 48px;
-  margin-bottom: 24px;
-  transition: all 0.3s ease;
-}
-
-.scanner-preview:hover {
-  border-color: #1976d2;
-  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
-}
-
-/* Enhanced table styling untuk override TabelData component */
-.main-table-card :deep(.v-card-text) {
-  padding: 0;
-}
-
-.main-table-card :deep(.v-data-table) {
-  border-radius: 0;
-}
-
-.main-table-card :deep(.v-data-table .v-data-table__wrapper) {
-  border-radius: 0;
-}
-
-.main-table-card :deep(.v-data-table th) {
-  background: #fafbfc;
-  font-weight: 600;
-  font-size: 13px;
-  color: #374151;
-  border-bottom: 1px solid #e5e7eb;
-  height: 56px;
-}
-
-.main-table-card :deep(.v-data-table tbody tr) {
-  transition: all 0.2s ease;
-}
-
-.main-table-card :deep(.v-data-table tbody tr:hover) {
-  background: #f8fafc !important;
-  /* transform: scale(1.001); */
-  box-shadow: 0 2px 8px rgba(248, 34, 34, 0.08);
-}
-
-.main-table-card :deep(.v-data-table tbody td) {
-  padding: 12px 16px;   
-  border-bottom: 1px solid #f1f5f9;
-}
-
-/* Custom styling untuk status chips */
-.main-table-card :deep(.v-chip.v-chip--size-small) {
-  font-weight: 600;
-  border-radius: 8px;
-}
-
-/* Responsive Design */
-@media (max-width: 1024px) {
-  .header-content {
-    flex-direction: column;
-    gap: 20px;
-    text-align: center;
-  }
-  
-  .header-left {
-    flex-direction: column;
-    gap: 12px;
-  }
-  
-  .page-title {
-    font-size: 28px;
-  }
-}
-
-@media (max-width: 768px) {
-  .fast-track-container {
-    padding: 16px;
-  }
-  
-  .header-content {
-    padding: 24px 20px;
-  }
-  
-  .page-title {
-    font-size: 24px;
-  }
-  
-  .header-icon {
-    padding: 12px;
-  }
-  
-  /* Hide beberapa columns pada mobile */
-  .main-table-card :deep(.v-data-table th:nth-child(5)),
-  .main-table-card :deep(.v-data-table td:nth-child(5)),
-  .main-table-card :deep(.v-data-table th:nth-child(6)),
-  .main-table-card :deep(.v-data-table td:nth-child(6)),
-  .main-table-card :deep(.v-data-table th:nth-child(8)),
-  .main-table-card :deep(.v-data-table td:nth-child(8)),
-  .main-table-card :deep(.v-data-table th:nth-child(10)),
-  .main-table-card :deep(.v-data-table td:nth-child(10)) {
-    display: none;
-  }
-}
-
-@media (max-width: 600px) {
-  .action-buttons {
-    flex-direction: column;
-    gap: 2px;
-  }
-  
-  /* Show only essential columns on very small screens */
-  .main-table-card :deep(.v-data-table th:nth-child(4)),
-  .main-table-card :deep(.v-data-table td:nth-child(4)),
-  .main-table-card :deep(.v-data-table th:nth-child(9)),
-  .main-table-card :deep(.v-data-table td:nth-child(9)) {
-    display: none;
-  }
-}
-
-/* Dark mode support (optional) */
-@media (prefers-color-scheme: dark) {
-  .fast-track-container {
-    background: #ffffff;
-  }
-  
-  .stat-card,
-  .controls-card,
-  .main-table-card {
-    background: "grey-lighten-4";
-    border-color: rgba(255, 255, 255, 0.1);
-  }
-  
-  .main-table-card :deep(.v-data-table th) {
-    background: "grey-lighten-4";
-    color: #e0e0e0;
-    border-color: rgba(197, 197, 197, 0.1);
-  }
-  
-  .main-table-card :deep(.v-data-table tbody tr:hover) {
-    background: "grey-lighten-4" !important;
-  }
-}
-
-/* Loading animations */
-.main-table-card :deep(.v-data-table .v-data-table__loading) {
-  background: linear-gradient(90deg, transparent, rgba(25, 118, 210, 0.1), transparent);
-  animation: loading-shimmer 1.5s infinite;
-}
-
-@keyframes loading-shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}
-
-/* Print styles */
-@media print {
-  .fast-track-container {
-    background: white;
-    padding: 0;
-  }
-  
-  .page-header,
-  .stats-section,
-  .controls-card {
-    display: none;
-  }
-  
-  .main-table-card {
-    box-shadow: none;
-    border: 1px solid #ccc;
-  }
-  
-  .action-buttons {
-    display: none;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/pages/LoketAdmin1.text b/pages/LoketAdmin1.text
deleted file mode 100644
index 3e6bf82..0000000
--- a/pages/LoketAdmin1.text
+++ /dev/null
@@ -1,526 +0,0 @@
-<template>
-  <!-- Main Content -->
-  <v-main class="bg-grey-lighten-3">
-    <v-container fluid class="pa-6 main-content-padding">
-      <!-- Header Banner & Stats -->
-      <v-card class="d-flex justify-space-between align-center pa-5 rounded-xl elevation-4 mb-6 header-banner">
-        <div class="d-flex align-center">
-          <v-icon size="40" class="mr-3 text-white">mdi-hospital-box-outline</v-icon>
-          <span class="text-h4 font-weight-bold text-white">Loket Admin </span>
-        </div>
-        <div class="d-flex align-center text-white text-end flex-wrap justify-end">
-          <span class="mr-4">Loket 24</span>
-          <span class="mr-4">{{ currentDateLongFormatted }}</span>
-          <span>{{ currentDateShortFormatted }} - Pelayanan</span>
-        </div>
-      </v-card>
-
-      <!-- Status Cards Section -->
-      <v-row class="mb-6">
-        <!-- Panggil 1 Antrian Card -->
-        <v-col cols="12" sm="6" md="3">
-          <v-card 
-            class="pa-4 rounded-xl elevation-2 text-center" 
-            color="#4CAF50" 
-            @click="handleStatusCardClick(1)"
-          >
-            <v-card-text class="text-white">
-              <div class="text-h4 font-weight-bold">1</div>
-              <div class="text-subtitle-1 mt-1">Panggil</div>
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <!-- Panggil 5 Antrian Card -->
-        <v-col cols="12" sm="6" md="3">
-          <v-card 
-            class="pa-4 rounded-xl elevation-2 text-center" 
-            color="#4CAF50" 
-            @click="handleStatusCardClick(5)"
-          >
-            <v-card-text class="text-white">
-              <div class="text-h4 font-weight-bold">5</div>
-              <div class="text-subtitle-1 mt-1">Panggil</div>
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <!-- Panggil 10 Antrian Card -->
-        <v-col cols="12" sm="6" md="3">
-          <v-card 
-            class="pa-4 rounded-xl elevation-2 text-center" 
-            color="#4CAF50" 
-            @click="handleStatusCardClick(10)"
-          >
-            <v-card-text class="text-white">
-              <div class="text-h4 font-weight-bold">10</div>
-              <div class="text-subtitle-1 mt-1">Panggil</div>
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <!-- Panggil 20 Antrian Card -->
-        <v-col cols="12" sm="6" md="3">
-          <v-card 
-            class="pa-4 rounded-xl elevation-2 text-center" 
-            color="#4CAF50" 
-            @click="handleStatusCardClick(20)"
-          >
-            <v-card-text class="text-white">
-              <div class="text-h4 font-weight-bold">20</div>
-              <div class="text-subtitle-1 mt-1">Panggil</div>
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-
-      <!-- Next Patient Card -->
-      <v-card class="next-patient-card d-flex align-center justify-center pa-8 text-center rounded-xl elevation-6 mb-6">
-        <div class="text-center">
-          <div class="text-h4 text-white">NEXT PATIENT</div>
-          <div class="text-h2 font-weight-bold text-white mt-2">UM1001</div>
-          <v-btn
-            size="large"
-            color="#00A896"
-            class="mt-4 text-white"
-            @click="handleNextPatientClick"
-          >
-            <v-icon start>mdi-arrow-right-circle</v-icon>
-            Panggil Pasien Selanjutnya
-          </v-btn>
-        </div>
-      </v-card>
-
-      <!-- Main Data Table -->
-      <v-card class="mb-6 pa-6 rounded-xl elevation-2">
-        <v-card-title class="d-flex justify-space-between align-center text-h5 font-weight-bold pa-0 mb-4">
-          Data Pasien
-          <div class="d-flex align-center">
-            <span class="mr-2 text-caption">Show</span>
-            <v-select
-              v-model="itemsPerPage"
-              :items="[10, 25, 50, 100]"
-              density="compact"
-              variant="solo"
-              flat
-              hide-details
-              class="mx-2 select-items"
-            ></v-select>
-            <span class="mr-2 text-caption">entries</span>
-            <v-text-field
-              v-model="search"
-              density="compact"
-              variant="solo"
-              flat
-              hide-details
-              append-inner-icon="mdi-magnify"
-              label="Search"
-              style="max-width: 200px"
-            ></v-text-field>
-          </div>
-        </v-card-title>
-        <v-data-table
-          :headers="mainHeaders"
-          :items="mainPatients"
-          :search="search"
-          :items-per-page="itemsPerPage"
-          :row-class="getRowClass"
-          class="custom-table"
-        >
-          <!-- Custom template for the 'aksi' column -->
-          <template v-slot:item.aksi="{ item }">
-            <div class="d-flex ga-1">
-              <!-- Show different buttons based on the item's status -->
-              <template v-if="item.status === 'dipanggil'">
-                 <v-btn size="small" color="primary" variant="flat" class="rounded-lg" @click="handleProsesClick(item)">
-                  <v-icon start>mdi-cogs</v-icon>Proses
-                </v-btn>
-                <v-btn size="small" color="success" variant="flat" class="rounded-lg">
-                  <v-icon start>mdi-check-circle-outline</v-icon>Selesai
-                </v-btn>
-              </template>
-              <template v-else-if="item.status === 'dalam_proses'">
-                <v-btn size="small" color="success" variant="flat" class="rounded-lg">
-                  <v-icon start>mdi-check-circle-outline</v-icon>Selesai
-                </v-btn>
-                <v-btn size="small" color="warning" variant="flat" class="rounded-lg">
-                  <v-icon start>mdi-pause-circle-outline</v-icon>Tunda
-                </v-btn>
-                <v-btn size="small" color="error" variant="flat" class="rounded-lg">
-                  <v-icon start>mdi-close-circle-outline</v-icon>Batal
-                </v-btn>
-              </template>
-              <template v-else>
-                <v-btn size="small" color="primary" variant="flat" class="rounded-lg">
-                  <v-icon start>mdi-cogs</v-icon>Proses
-                </v-btn>
-                <v-btn size="small" color="success" variant="flat" class="rounded-lg">
-                  <v-icon start>mdi-check-circle-outline</v-icon>Selesai
-                </v-btn>
-              </template>
-            </div>
-          </template>
-          <!-- Custom template for the 'panggil' column -->
-          <template v-slot:item.panggil="{ item }">
-            <v-btn 
-              size="small" 
-              :color="item.status === 'dalam_proses' ? 'grey' : 'info'" 
-              variant="flat" 
-              class="rounded-lg" 
-              @click="handlePanggilClick(item)"
-              :disabled="item.status === 'dalam_proses'"
-            >
-              <v-icon start>mdi-phone</v-icon>Panggil
-            </v-btn>
-          </template>
-          <!-- Custom template for the 'noAntrian' column -->
-          <template v-slot:item.noAntrian="{ item }">
-            <span :class="{'online-antrian': item.status === 'dipanggil'}">{{ item.noAntrian }}</span>
-          </template>
-        </v-data-table>
-      </v-card>
-
-      <!-- Late Patients Table -->
-      <v-card class="mb-6 pa-6 rounded-xl elevation-2">
-        <v-card-title class="d-flex justify-space-between align-center text-h5 font-weight-bold pa-0 mb-4">
-          Info Pasien Lapor Terlambat
-          <div class="d-flex align-center">
-            <span class="mr-2 text-caption text-orange">KETERANGAN: PASIEN MASUK PADA TANGGAL</span>
-            <span class="mr-2 text-caption">Show</span>
-            <v-select
-              v-model="lateItemsPerPage"
-              :items="[10, 25, 50, 100]"
-              density="compact"
-              variant="solo"
-              flat
-              hide-details
-              class="mx-2 select-items"
-            ></v-select>
-            <span class="mr-2 text-caption">entries</span>
-            <v-text-field
-              v-model="lateSearch"
-              density="compact"
-              variant="solo"
-              flat
-              hide-details
-              append-inner-icon="mdi-magnify"
-              label="Search"
-              style="max-width: 200px"
-            ></v-text-field>
-          </div>
-        </v-card-title>
-        <v-data-table
-          :headers="lateHeaders"
-          :items="latePatients"
-          :search="lateSearch"
-          :items-per-page="lateItemsPerPage"
-          class="custom-table"
-        >
-          <template v-slot:no-data>
-            <div class="text-center pa-4">Tidak ada data yang tersedia</div>
-          </template>
-        </v-data-table>
-      </v-card>
-
-      <!-- Clinic Entry Patients Table -->
-      <v-card class="mb-6 pa-6 rounded-xl elevation-2">
-        <v-card-title class="d-flex justify-space-between align-center text-h5 font-weight-bold pa-0 mb-4">
-          Info Pasien Masuk Klinik
-        </v-card-title>
-        <v-data-table
-          :headers="clinicHeaders"
-          :items="clinicPatients"
-          :search="clinicSearch"
-          :items-per-page="clinicItemsPerPage"
-          class="custom-table"
-        >
-          <template v-slot:no-data>
-            <div class="text-center pa-4">Tidak ada data yang tersedia</div>
-          </template>
-        </v-data-table>
-      </v-card>
-
-      <!-- Info Klinik Table -->
-      <v-card class="pa-6 rounded-xl elevation-2">
-        <v-card-title class="text-h5 font-weight-bold pa-0 mb-4">
-          Info Klinik
-        </v-card-title>
-        <v-data-table
-          :headers="infoKlinikHeaders"
-          :items="infoKlinikData"
-          class="custom-table"
-          hide-default-footer
-          disable-pagination
-        >
-          <template v-slot:bottom>
-            <v-card-text class="d-flex justify-end text-right">
-              <span class="mr-4 font-weight-bold text-h6">Total:</span>
-              <span class="mr-12 font-weight-bold text-h6 text-primary">{{ totalDapatDipanggil }}</span>
-              <span class="font-weight-bold text-h6 text-primary">{{ totalShiftBelumBuka }}</span>
-            </v-card-text>
-          </template>
-        </v-data-table>
-      </v-card>
-    </v-container>
-  </v-main>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from "vue";
-
-definePageMeta({
-  middleware:['auth']
-})
-
-// Reactive data
-const search = ref("");
-const lateSearch = ref("");
-const clinicSearch = ref("");
-const itemsPerPage = ref(10);
-const lateItemsPerPage = ref(10);
-const clinicItemsPerPage = ref(10);
-const currentDateLongFormatted = ref(""); 
-const currentDateShortFormatted = ref(""); 
-
-// Table headers
-const mainHeaders = ref([
-  { title: "No", value: "no", sortable: false },
-  { title: "Jam Panggil", value: "jamPanggil" },
-  { title: "Barcode", value: "barcode" },
-  { title: "No Antrian", value: "noAntrian" },
-  { title: "Shift", value: "shift" },
-  { title: "Klinik", value: "klinik" },
-  { title: "Fast Track", value: "fastTrack" },
-  { title: "Pembayaran", value: "pembayaran" },
-  { title: "Panggil", align: 'center', value: "panggil", sortable: false },
-  { title: "Aksi",  value: "aksi", sortable: false },
-]);
-
-const lateHeaders = ref([
-  { title: "No", value: "no", sortable: false },
-  { title: "Barcode", value: "barcode" },
-  { title: "No Antrian", value: "noAntrian" },
-  { title: "Shift", value: "shift" },
-  { title: "Klinik", value: "klinik" },
-  { title: "Aksi", value: "aksi", sortable: false },
-]);
-
-const clinicHeaders = ref([
-  { title: "#", value: "no", sortable: false },
-  { title: "Barcode", value: "barcode" },
-  { title: "No Antrian", value: "noAntrian" },
-  { title: "No RM", value: "noRM" },
-  { title: "Shift", value: "shift" },
-  { title: "Klinik", value: "klinik" },
-  { title: "Fast Track", value: "fastTrack" },
-  { title: "Pembayaran", value: "pembayaran" },
-  { title: "Aksi", value: "aksi", sortable: false },
-]);
-
-const infoKlinikHeaders = ref([
-  { title: "#", value: "no" },
-  { title: "Klinik", value: "klinik" },
-  { title: "Jumlah Shift", value: "jumlahShift" },
-  { title: "Quota Per Shift", value: "quotaPerShift" },
-  { title: "Status", value: "status" },
-  { title: "Dapat Di Panggil", value: "dapatDiPanggil" },
-  { title: "Shift Belum Buka", value: "shiftBelumBuka" },
-]);
-
-// Sample data with new 'originalAntrian' and 'status' properties
-const mainPatients = ref([
-  { no: 1, jamPanggil: "11:46", barcode: "250826100362", noAntrian: "UM1002 | Online - 250826100362", originalAntrian: "UM1002", shift: "Shift 1", klinik: "IPD", fastTrack: "", pembayaran: "UMUM", panggil: "Panggil", status: "dipanggil" },
-  { no: 2, jamPanggil: "06:47", barcode: "250826100140", noAntrian: "UM1003", originalAntrian: "UM1003", shift: "Shift 1", klinik: "IPD", fastTrack: "", pembayaran: "UMUM", panggil: "Panggil", status: "" },
-  { no: 3, jamPanggil: "06:47", barcode: "250826100143", noAntrian: "UM1004", originalAntrian: "UM1004", shift: "Shift 1", klinik: "IPD", fastTrack: "", pembayaran: "UMUM", panggil: "Panggil", status: "" },
-  { no: 4, jamPanggil: "06:47", barcode: "250826100500", noAntrian: "UM1005", originalAntrian: "UM1005", shift: "Shift 1", klinik: "MATA", fastTrack: "", pembayaran: "UMUM", panggil: "Panggil", status: "" },
-  { no: 5, jamPanggil: "06:47", barcode: "250826100525", noAntrian: "UM1006", originalAntrian: "UM1006", shift: "Shift 1", klinik: "ONKOLOGI", fastTrack: "", pembayaran: "UMUM", panggil: "Panggil", status: "" },
-  { no: 6, jamPanggil: "06:47", barcode: "250826100536", noAntrian: "UM1007", originalAntrian: "UM1007", shift: "Shift 1", klinik: "THT", fastTrack: "", pembayaran: "UMUM", panggil: "Panggil", status: "" },
-]);
-
-// Tambahkan lebih banyak data pasien untuk demonstrasi "Panggil 20"
-for (let i = 7; i <= 25; i++) {
-  mainPatients.value.push({
-    no: i,
-    jamPanggil: "07:00",
-    barcode: `250826100${100 + i}`,
-    noAntrian: `UM100${i}`,
-    originalAntrian: `UM100${i}`,
-    shift: "Shift 1",
-    klinik: "UMUM",
-    fastTrack: "",
-    pembayaran: "UMUM",
-    panggil: "Panggil",
-    status: "",
-  });
-}
-
-const latePatients = ref([]);
-const clinicPatients = ref([]);
-const infoKlinikData = ref([
-  { no: 1, klinik: "ANESTESI", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 2, klinik: "GERIATRI", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 3, klinik: "GIGI DAN MULUT", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 4, klinik: "HOM", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 5, klinik: "IPD", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 6, klinik: "JANTUNG", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 7, klinik: "KANDUNGAN", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 8, klinik: "KOMPLEMENTER", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBukan: "-" },
-  { no: 9, klinik: "KUL.KEL", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 10, klinik: "MATA", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 11, klinik: "ONKOLOGI", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 12, klinik: "PARU", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 13, klinik: "SARAF", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-  { no: 14, klinik: "THT", jumlahShift: "1 Shift", quotaPerShift: 1000, status: "Buka - Shift 1", dapatDiPanggil: "-", shiftBelumBuka: "-" },
-]);
-
-// Computed properties for totals
-const totalDapatDipanggil = computed(() => {
-  return infoKlinikData.value.reduce((total, item) => {
-    return total + (item.dapatDiPanggil === "-" ? 0 : parseInt(item.dapatDiPanggil));
-  }, 0);
-});
-
-const totalShiftBelumBuka = computed(() => {
-  return infoKlinikData.value.reduce((total, item) => {
-    return total + (item.shiftBelumBuka === "-" ? 0 : parseInt(item.shiftBelumBuka));
-  }, 0);
-});
-
-// Methods
-const getRowClass = (item) => {
-  if (item.status === 'dipanggil') {
-    return 'called-row';
-  }
-  return '';
-};
-
-const handleStatusCardClick = (count) => {
-  console.log(`Memanggil ${count} antrean pasien.`);
-  const updatedPatients = mainPatients.value.map((patient, index) => {
-    const isCalled = index < count;
-    return {
-      ...patient,
-      status: isCalled ? 'dipanggil' : '',
-      noAntrian: isCalled ? `${patient.originalAntrian} | Online - ${patient.barcode}` : patient.originalAntrian
-    };
-  });
-  mainPatients.value = updatedPatients;
-};
-
-const handleNextPatientClick = () => {
-  console.log("Tombol Panggil Pasien Selanjutnya diklik! (Mengambil pasien pertama dari antrean)");
-  const updatedPatients = mainPatients.value.map(patient => {
-    return { ...patient, status: '', noAntrian: patient.originalAntrian };
-  });
-  mainPatients.value = updatedPatients;
-};
-
-const handlePanggilClick = (item) => {
-  console.log(`Tombol Panggil untuk pasien: ${item.noAntrian} diklik!`);
-  
-  // Membuat salinan baru dari seluruh array untuk memicu reaktivitas
-  const updatedPatients = mainPatients.value.map(p => {
-    // Jika pasien cocok, buat salinan baru dengan status 'dipanggil' dan tambahkan "Online"
-    if (p.no === item.no) {
-      return {
-        ...p,
-        status: 'dipanggil',
-        noAntrian: `${p.originalAntrian} | Online - ${p.barcode}`
-      };
-    }
-    // Jika tidak, kembalikan objek pasien aslinya
-    return p;
-  });
-
-  // Ganti seluruh array data dengan salinan yang baru.
-  mainPatients.value = updatedPatients;
-};
-
-const handleProsesClick = (item) => {
-  console.log(`Tombol Proses untuk pasien: ${item.noAntrian} diklik!`);
-  
-  const updatedPatients = mainPatients.value.map(p => {
-    if (p.no === item.no) {
-      return {
-        ...p,
-        status: 'dalam_proses'
-      };
-    }
-    return p;
-  });
-
-  mainPatients.value = updatedPatients;
-};
-
-// Mengatur tanggal saat komponen dimuat
-onMounted(() => {
-  const today = new Date();
-  const optionsLong = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-  currentDateLongFormatted.value = today.toLocaleDateString('id-ID', optionsLong);
-  
-  const optionsShort = { year: 'numeric', month: 'long', day: 'numeric' };
-  currentDateShortFormatted.value = today.toLocaleDateString('id-ID', optionsShort);
-});
-</script>
-
-<style scoped>
-/* Scoped styles for a cleaner look */
-.main-content-padding {
-  padding-left: 24px !important;
-  padding-right: 24px !important;
-}
-
-/* Header Banner */
-.header-banner {
-  background: linear-gradient(90deg, #1565C0, #1976D2);
-  color: white;
-  min-height: 120px;
-}
-
-/* Next Patient Card */
-.next-patient-card {
-  background: linear-gradient(45deg, #00A896, #00796B);
-  color: white;
-}
-
-/* Status Cards */
-.v-card.text-center {
-  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-  cursor: pointer;
-}
-.v-card.text-center:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-
-/* Table styling */
-.custom-table :deep(thead th) {
-  background-color: #E8EAF6; /* Light gray-blue header */
-  font-weight: bold;
-}
-
-.custom-table :deep(tbody tr:nth-of-type(odd)) {
-  background-color: #F5F5F5; /* Light gray for odd rows */
-}
-
-/* Highlighted row for "dipanggil" status */
-.custom-table :deep(tbody tr.called-row) {
-  background-color: #998479 !important; /* Light green background */
-}
-
-/* Field and Select styling */
-.select-items .v-field--variant-solo,
-.v-text-field .v-field--variant-solo {
-  background-color: #ECEFF1;
-}
-
-.text-blue {
-  color: #1976D2 !important;
-}
-
-.text-primary {
-  color: #1976D2 !important;
-}
-
-.online-antrian {
-  font-weight: bold;
-  color: #1976D2;
-}
-</style>
diff --git a/stores/queueStore.js b/stores/queueStore.js
new file mode 100644
index 0000000..2482b51
--- /dev/null
+++ b/stores/queueStore.js
@@ -0,0 +1,354 @@
+// stores/queueStore.js
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useQueueStore = defineStore('queue', () => {
+  // State
+  const allPatients = ref([
+    {
+      no: 1,
+      jamPanggil: "12:49",
+      barcode: "250811100163",
+      noAntrian: "UM1001 | Online - 250811100163",
+      shift: "Shift 1",
+      klinik: "KANDUNGAN",
+      fastTrack: "UMUM",
+      pembayaran: "UMUM",
+      status: "waiting", // waiting, di-loket, terlambat, pending, processed
+      processStage: "loket", // loket, klinik, penunjang
+      createdAt: new Date().toISOString(),
+    },
+    {
+      no: 2,
+      jamPanggil: "10:52",
+      barcode: "250811100155",
+      noAntrian: "UM1002 | Online - 250811100155",
+      shift: "Shift 1",
+      klinik: "IPD",
+      fastTrack: "UMUM",
+      pembayaran: "UMUM",
+      status: "waiting",
+      processStage: "loket",
+      createdAt: new Date().toISOString(),
+    },
+    {
+      no: 3,
+      jamPanggil: "09:30",
+      barcode: "250811100200",
+      noAntrian: "UM1003 | Online - 250811100200",
+      shift: "Shift 1",
+      klinik: "SARAF",
+      fastTrack: "UMUM",
+      pembayaran: "UMUM",
+      status: "waiting",
+      processStage: "loket",
+      createdAt: new Date().toISOString(),
+    },
+    {
+      no: 4,
+      jamPanggil: "14:15",
+      barcode: "250811100210",
+      noAntrian: "UM1004 | Online - 250811100210",
+      shift: "Shift 1",
+      klinik: "THT",
+      fastTrack: "UMUM",
+      pembayaran: "UMUM",
+      status: "waiting",
+      processStage: "loket",
+      createdAt: new Date().toISOString(),
+    },
+  ]);
+
+  const quotaUsed = ref(5);
+  const currentProcessingPatient = ref({
+    loket: null,
+    klinik: null,
+    penunjang: null,
+  });
+
+  const kliniks = ref([
+    { id: 1, name: "KANDUNGAN" },
+    { id: 2, name: "IPD" },
+    { id: 3, name: "THT" },
+    { id: 4, name: "SARAF" },
+    { id: 5, name: "JIWA" },
+    { id: 6, name: "BEDAH" },
+    { id: 7, name: "MATA" },
+    { id: 8, name: "ANAK" },
+    { id: 9, name: "KULIT" },
+  ]);
+
+  const penunjangs = ref([
+    { id: 1, name: "LABORATORIUM" },
+    { id: 2, name: "RADIOLOGI" },
+    { id: 3, name: "USG" },
+    { id: 4, name: "CT SCAN" },
+    { id: 5, name: "MRI" },
+    { id: 6, name: "EKG" },
+    { id: 7, name: "ENDOSKOPI" },
+    { id: 8, name: "FISIOTERAPI" },
+    { id: 9, name: "FARMASI" },
+  ]);
+
+  // Computed - Filter berdasarkan process stage dan status
+  const getPatientsByStage = (stage) => {
+    return computed(() => {
+      const patients = allPatients.value.filter(p => p.processStage === stage);
+      return {
+        all: patients,
+        waiting: patients.filter(p => p.status === 'waiting'),
+        diLoket: patients.filter(p => p.status === 'di-loket'),
+        terlambat: patients.filter(p => p.status === 'terlambat'),
+        pending: patients.filter(p => p.status === 'pending'),
+      };
+    });
+  };
+
+  // Total pasien per stage
+  const getTotalPasienByStage = (stage) => {
+    return computed(() => 
+      allPatients.value.filter(p => p.processStage === stage).length
+    );
+  };
+
+  const totalPasien = computed(() => allPatients.value.length);
+
+  // Actions
+  const callNext = (adminType = 'loket') => {
+    const stageMap = {
+      'loket': 'loket',
+      'klinik': 'klinik',
+      'penunjang': 'penunjang'
+    };
+    
+    const targetStage = stageMap[adminType];
+    const nextPatient = allPatients.value.find(p => 
+      p.status === 'waiting' && p.processStage === targetStage
+    );
+
+    if (!nextPatient) {
+      return { success: false, message: "Tidak ada pasien selanjutnya" };
+    }
+
+    if (quotaUsed.value >= 150) {
+      return { success: false, message: "Quota sudah penuh" };
+    }
+
+    nextPatient.status = "di-loket";
+    currentProcessingPatient.value[adminType] = nextPatient;
+    quotaUsed.value++;
+
+    return {
+      success: true,
+      message: `Memanggil pasien ${nextPatient.noAntrian.split(" |")[0]}`,
+    };
+  };
+
+  const callMultiplePatients = (count, adminType = 'loket') => {
+    const stageMap = {
+      'loket': 'loket',
+      'klinik': 'klinik',
+      'penunjang': 'penunjang'
+    };
+    
+    const targetStage = stageMap[adminType];
+    const waitingList = allPatients.value.filter(p => 
+      p.status === 'waiting' && p.processStage === targetStage
+    );
+    
+    const patientsToCall = waitingList.slice(0, count);
+
+    if (patientsToCall.length === 0) {
+      return { success: false, message: "Tidak ada pasien yang menunggu" };
+    }
+
+    if (quotaUsed.value + patientsToCall.length > 150) {
+      return { success: false, message: "Quota tidak mencukupi" };
+    }
+
+    patientsToCall.forEach((patient) => {
+      patient.status = "di-loket";
+    });
+
+    quotaUsed.value += patientsToCall.length;
+
+    return {
+      success: true,
+      message: `Memanggil ${patientsToCall.length} pasien ke loket`,
+    };
+  };
+
+  const processPatient = (patient, action, adminType = 'loket') => {
+    const patientCode = patient.noAntrian.split(" |")[0];
+    let message = "";
+
+    switch (action) {
+      case "check-in":
+        // Jika check-in di loket, pindahkan ke klinik dengan status di-loket
+        if (adminType === 'loket') {
+          patient.status = "di-loket"; // Langsung masuk tabel Di Loket Klinik
+          patient.processStage = "klinik";
+          message = `Pasien ${patientCode} berhasil check in dan masuk ke Tabel Loket Klinik`;
+        } 
+        // Jika check-in di klinik, selesai
+        else if (adminType === 'klinik') {
+          patient.status = "processed";
+          message = `Pasien ${patientCode} berhasil check in di Klinik`;
+        }
+        // Jika check-in di penunjang, selesai
+        else if (adminType === 'penunjang') {
+          patient.status = "processed";
+          message = `Pasien ${patientCode} berhasil check in di Penunjang`;
+        }
+        
+        // Clear current processing di admin yang melakukan check-in
+        if (currentProcessingPatient.value[adminType]?.no === patient.no) {
+          currentProcessingPatient.value[adminType] = null;
+        }
+        break;
+
+      case "terlambat":
+        patient.status = "terlambat";
+        if (currentProcessingPatient.value[adminType]?.no === patient.no) {
+          currentProcessingPatient.value[adminType] = null;
+        }
+        message = `Pasien ${patientCode} ditandai terlambat`;
+        break;
+
+      case "pending":
+        patient.status = "pending";
+        if (currentProcessingPatient.value[adminType]?.no === patient.no) {
+          currentProcessingPatient.value[adminType] = null;
+        }
+        message = `Pasien ${patientCode} di-pending`;
+        break;
+
+      case "aktifkan":
+        if (patient.status === "terlambat" || patient.status === "pending") {
+          patient.status = "di-loket";
+          message = `Pasien ${patientCode} diaktifkan kembali`;
+        }
+        break;
+
+      case "proses":
+        currentProcessingPatient.value[adminType] = patient;
+        message = `Memproses pasien ${patientCode}`;
+        break;
+    }
+
+    return { success: true, message };
+  };
+
+  const createAntreanKlinik = (klinik, adminType = 'loket') => {
+    const newNo = allPatients.value.length + 1;
+    const timestamp = new Date();
+    const barcode = `250811${String(timestamp.getTime()).slice(-6)}`;
+    
+    const newPatient = {
+      no: newNo,
+      jamPanggil: `${String(timestamp.getHours()).padStart(2, "0")}:${String(
+        timestamp.getMinutes()
+      ).padStart(2, "0")}`,
+      barcode: barcode,
+      noAntrian: `KL${String(newNo).padStart(4, "0")} | Klinik - ${barcode}`,
+      shift: "Shift 1",
+      klinik: klinik.name,
+      fastTrack: "UMUM",
+      pembayaran: "UMUM",
+      status: "di-loket", // Langsung masuk tabel Di Loket Klinik
+      processStage: "klinik",
+      createdAt: timestamp.toISOString(),
+    };
+
+    allPatients.value.push(newPatient);
+
+    return {
+      success: true,
+      message: `Antrean klinik ${klinik.name} berhasil dibuat dan masuk ke Tabel Loket Klinik`,
+      patient: newPatient,
+    };
+  };
+
+  const createAntreanPenunjang = (penunjang, patient = null, adminType = 'loket') => {
+    const newNo = allPatients.value.length + 1;
+    const timestamp = new Date();
+    const barcode = patient ? patient.barcode : `250811${String(timestamp.getTime()).slice(-6)}`;
+
+    const newPatient = {
+      no: newNo,
+      jamPanggil: `${String(timestamp.getHours()).padStart(2, "0")}:${String(
+        timestamp.getMinutes()
+      ).padStart(2, "0")}`,
+      barcode: barcode,
+      noAntrian: `PN${String(newNo).padStart(4, "0")} | Penunjang - ${barcode}`,
+      shift: "Shift 1",
+      klinik: penunjang.name,
+      fastTrack: "UMUM",
+      pembayaran: patient ? patient.pembayaran : "UMUM",
+      status: "di-loket", // Langsung masuk tabel Di Loket Penunjang
+      processStage: "penunjang",
+      createdAt: timestamp.toISOString(),
+      referencePatient: patient ? patient.noAntrian : null,
+    };
+
+    allPatients.value.push(newPatient);
+
+    return {
+      success: true,
+      message: `Antrean penunjang ${penunjang.name} berhasil dibuat dan masuk ke Tabel Loket Penunjang`,
+      patient: newPatient,
+    };
+  };
+
+  const changeKlinik = (patient, newKlinik, adminType = 'loket') => {
+    const patientIndex = allPatients.value.findIndex((p) => p.no === patient.no);
+    
+    if (patientIndex !== -1) {
+      allPatients.value[patientIndex].klinik = newKlinik.name;
+      
+      // Update current processing if it's the same patient
+      if (currentProcessingPatient.value[adminType]?.no === patient.no) {
+        currentProcessingPatient.value[adminType].klinik = newKlinik.name;
+      }
+
+      return {
+        success: true,
+        message: `Klinik berhasil diubah ke ${newKlinik.name}`,
+      };
+    }
+
+    return { success: false, message: "Pasien tidak ditemukan" };
+  };
+
+  const getCurrentProcessing = (adminType) => {
+    return computed(() => currentProcessingPatient.value[adminType]);
+  };
+
+  const setCurrentProcessing = (patient, adminType) => {
+    currentProcessingPatient.value[adminType] = patient;
+  };
+
+  return {
+    // State
+    allPatients,
+    quotaUsed,
+    currentProcessingPatient,
+    kliniks,
+    penunjangs,
+
+    // Computed
+    totalPasien,
+
+    // Actions
+    callNext,
+    callMultiplePatients,
+    processPatient,
+    createAntreanKlinik,
+    createAntreanPenunjang,
+    changeKlinik,
+    getPatientsByStage,
+    getTotalPasienByStage,
+    getCurrentProcessing,
+    setCurrentProcessing,
+  };
+});
\ No newline at end of file

From 35024b479754e5746a98d3a9d4a5c3be328bbd01 Mon Sep 17 00:00:00 2001
From: Fanrouver <akbararya34@gmail.com>
Date: Tue, 28 Oct 2025 10:14:00 +0700
Subject: [PATCH 3/3] update akbar tampilan login dashboard dan verifikasi

---
 assets/styles/loginpage/login.css           |  326 ++----
 components/MonitorPasien/ticketCard.vue     |  130 +++
 components/ProfilePopup.vue                 |  404 +++++--
 components/ReorderMenuDialog.vue            |   75 --
 components/SideBar.vue                      |   44 +-
 composables/usePermissions.ts               |    1 +
 nuxt.config.ts                              |    8 +-
 package-lock.json                           |   18 +
 package.json                                |    5 +-
 pages/CheckInPasien/checkIn.vue             | 1068 ++++++++++++++++++
 pages/Dashboard.vue                         |  520 ++++++---
 pages/LoginPage.vue                         |  207 ++--
 pages/MonitoringPasien/monitoringPasien.vue |  252 +++++
 pages/MonitoringPasien/pasien/[id].vue      |  298 +++++
 pages/Profile/Pengaturan.vue.txt            | 1126 +++++++++++++++++++
 pages/Profile/Profil.vue                    |  800 +++++++++++++
 pages/verifikasiAkun/VerifikasiAkun.vue     |  425 +++++--
 public/AntreanLogo.png                      |  Bin 0 -> 18525 bytes
 public/AntreanLogobg.png                    |  Bin 0 -> 47421 bytes
 stores/navItems.ts                          |   81 +-
 20 files changed, 4922 insertions(+), 866 deletions(-)
 create mode 100644 components/MonitorPasien/ticketCard.vue
 delete mode 100644 components/ReorderMenuDialog.vue
 create mode 100644 pages/CheckInPasien/checkIn.vue
 create mode 100644 pages/MonitoringPasien/monitoringPasien.vue
 create mode 100644 pages/MonitoringPasien/pasien/[id].vue
 create mode 100644 pages/Profile/Pengaturan.vue.txt
 create mode 100644 pages/Profile/Profil.vue
 create mode 100644 public/AntreanLogo.png
 create mode 100644 public/AntreanLogobg.png

diff --git a/assets/styles/loginpage/login.css b/assets/styles/loginpage/login.css
index e435343..3d2671c 100644
--- a/assets/styles/loginpage/login.css
+++ b/assets/styles/loginpage/login.css
@@ -1,60 +1,47 @@
 /* assets/styles/loginpage/login.css */
 
-/* Main Background */
+/* --- COLOR DEFINITIONS --- */
+/* Base Orange: #FF9B1B (New) */
+/* Hover/Darker Orange: #E68A00 (Calculated darker shade for hover effect) */
+/* --- END COLOR DEFINITIONS --- */
+
+
+/* Main Background - Now Orange */
 .login-background {
-  background: linear-gradient(135deg, #FFC857 0%, #FF9B1B 25%, #FF8F00 50%, #FF6F00 75%, #E65100 100%);
+  background: #FF9B1B; /* Solid Orange Background: #FF9B1B */
   min-height: 100vh;
   position: relative;
   overflow: hidden;
-  padding-top: 64px;
+  /* padding-top: 64px; - REMOVED */
 }
 
 .login-background::before {
+  /* No radial gradients */
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: 
-    radial-gradient(circle at 10% 20%, rgba(255, 200, 87, 0.4) 0%, transparent 50%),
-    radial-gradient(circle at 90% 80%, rgba(255, 155, 27, 0.4) 0%, transparent 50%),
-    radial-gradient(circle at 50% 50%, rgba(230, 81, 0, 0.3) 0%, transparent 70%);
   pointer-events: none;
+  background: none;
 }
 
-/* Navigation Bar */
-.navbar {
-  background: rgba(255, 255, 255, 0.1) !important;
-  backdrop-filter: blur(50px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  position: fixed !important;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-}
+/* Navigation Bar Styles - REMOVED */
 
-.brand-logo {
-  color: white;
-  font-size: 1.2rem;
-}
 
-.nav-link {
-  color: white !important;
-  text-transform: none;
-  font-weight: 500;
-}
-
-/* Floating Medical Icons */
+/* Floating Medical Icons - Subtle on Orange Background */
 .floating-medical-icon {
   position: absolute;
-  animation: dvdBounce 20s linear infinite;
   opacity: 0.8;
   transition: opacity 0.3s ease;
   z-index: 1;
   width: fit-content;
   height: fit-content;
+  top: auto;
+  left: auto;
+  bottom: auto;
+  right: auto;
 }
 
 .floating-medical-icon:hover {
@@ -62,141 +49,18 @@
 }
 
 .floating-medical-icon .v-icon {
-  color: rgba(255, 255, 255, 0.15) !important;
+  color: rgba(255, 255, 255, 0.15) !important; /* Light white for icons on orange background */
 }
 
-.icon-1 {
-  top: 0%;
-  left: 0%;
-  animation-delay: 0s;
-  animation-duration: 25s;
-  animation-name: dvdBounce1;
-}
+/* Specific icon positioning - now static */
+.icon-1 { top: 15%; left: 5%; }
+.icon-2 { top: 20%; right: 10%; }
+.icon-3 { bottom: 10%; left: 15%; }
+.icon-4 { top: 60%; left: 10%; }
+.icon-5 { bottom: 20%; right: 5%; }
+.icon-6 { top: 35%; left: 20%; }
 
-.icon-1 .v-icon {
-  color: rgba(6, 37, 83, 0.15) !important;
-}
-
-.icon-2 {
-  top: 0%;
-  right: 0%;
-  animation-delay: 0s;
-  animation-duration: 30s;
-  animation-name: dvdBounce2;
-}
-
-.icon-2 .v-icon {
-  color: rgba(15, 180, 70, 0.12) !important;
-}
-
-.icon-3 {
-  bottom: 0%;
-  left: 0%;
-  animation-delay: 0s;
-  animation-duration: 22s;
-  animation-name: dvdBounce3;
-}
-
-.icon-3 .v-icon {
-  color: rgba(23, 178, 206, 0.18) !important;
-}
-
-.icon-4 {
-  top: 50%;
-  left: 0%;
-  animation-delay: 0s;
-  animation-duration: 28s;
-  animation-name: dvdBounce4;
-}
-
-.icon-4 .v-icon {
-  color: rgba(223, 8, 8, 0.14) !important;
-}
-
-.icon-5 {
-  bottom: 0%;
-  right: 0%;
-  animation-delay: 0s;
-  animation-duration: 26s;
-  animation-name: dvdBounce5;
-}
-
-.icon-5 .v-icon {
-  color: rgba(148, 15, 236, 0.16) !important;
-}
-
-.icon-6 {
-  top: 25%;
-  left: 0%;
-  animation-delay: 0s;
-  animation-duration: 24s;
-  animation-name: dvdBounce6;
-}
-
-.icon-6 .v-icon {
-  color: rgba(87, 48, 5, 0.13) !important;
-}
-
-/* DVD Bounce Animation 1 - Top Left to Bottom Right */
-@keyframes dvdBounce1 {
-  0% { transform: translate(0, 0); }
-  25% { transform: translate(80vw, 70vh); }
-  50% { transform: translate(20vw, 10vh); }
-  75% { transform: translate(70vw, 80vh); }
-  100% { transform: translate(0, 0); }
-}
-
-/* DVD Bounce Animation 2 - Top Right to Bottom Left */
-@keyframes dvdBounce2 {
-  0% { transform: translate(0, 0); }
-  25% { transform: translate(-75vw, 60vh); }
-  50% { transform: translate(-30vw, 20vh); }
-  75% { transform: translate(-85vw, 75vh); }
-  100% { transform: translate(0, 0); }
-}
-
-/* DVD Bounce Animation 3 - Bottom Left to Top Right */
-@keyframes dvdBounce3 {
-  0% { transform: translate(0, 0); }
-  25% { transform: translate(70vw, -60vh); }
-  50% { transform: translate(40vw, -80vh); }
-  75% { transform: translate(90vw, -30vh); }
-  100% { transform: translate(0, 0); }
-}
-
-/* DVD Bounce Animation 4 - Middle Left across screen */
-@keyframes dvdBounce4 {
-  0% { transform: translate(0, 0); }
-  16.6% { transform: translate(60vw, -30vh); }
-  33.3% { transform: translate(90vw, 20vh); }
-  50% { transform: translate(50vw, 40vh); }
-  66.6% { transform: translate(10vw, -20vh); }
-  83.3% { transform: translate(80vw, -40vh); }
-  100% { transform: translate(0, 0); }
-}
-
-/* DVD Bounce Animation 5 - Bottom Right to Top Left */
-@keyframes dvdBounce5 {
-  0% { transform: translate(0, 0); }
-  25% { transform: translate(-60vw, -70vh); }
-  50% { transform: translate(-90vw, -20vh); }
-  75% { transform: translate(-40vw, -80vh); }
-  100% { transform: translate(0, 0); }
-}
-
-/* DVD Bounce Animation 6 - Complex zigzag pattern */
-@keyframes dvdBounce6 {
-  0% { transform: translate(0, 0); }
-  14.3% { transform: translate(50vw, 30vh); }
-  28.6% { transform: translate(85vw, -20vh); }
-  42.9% { transform: translate(30vw, 60vh); }
-  57.1% { transform: translate(70vw, 10vh); }
-  71.4% { transform: translate(15vw, 70vh); }
-  85.7% { transform: translate(80vw, 40vh); }
-  100% { transform: translate(0, 0); }
-}
-
-/* Main Card - Contains Both Sections */
+/* Main Card - White */
 .main-card {
   z-index: 3;
   max-width: 1100px;
@@ -205,16 +69,14 @@
 }
 
 .white-card {
-  background: white !important;
+  background: white !important; /* Main card background is white */
   border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 
-    0 20px 50px rgba(0, 0, 0, 0.15),
-    0 8px 25px rgba(0, 0, 0, 0.1);
+  box-shadow: none; /* No shadow for the main white card */
 }
 
-/* Left Section Styling */
+/* Left Section Styling (White) */
 .text-section-box {
-  background: linear-gradient(135deg, #61cbdd 0%, #4194c4 50%, #2089b9 100%);
+  background: white; /* Kept as white */
   min-height: 600px;
   position: relative;
   overflow: hidden;
@@ -227,9 +89,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: 
-    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
-    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+  background: none; 
   pointer-events: none;
 }
 
@@ -240,31 +100,31 @@
 }
 
 .hero-title-box {
-  color: white;
+  color: #FF9B1B; /* Orange title on white background: #FF9B1B */
   font-size: 2.5rem;
   font-weight: 900;
   line-height: 1.1;
   margin-bottom: 0.5rem;
-  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
+  text-shadow: none;
 }
 
 .hero-description-box {
-  color: rgba(255, 255, 255, 0.95);
+  color: #555; /* Darker text for readability on white */
   font-size: 1rem;
   line-height: 1.6;
   margin-top: 2rem;
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+  text-shadow: none;
 }
 
 .hospital-logo-large {
   height: 80px;
   width: auto;
-  filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.3));
+  filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.1));
 }
 
-/* Right Section Styling */
+/* Right Login Section (White) */
 .login-section-box {
-  background: white;
+  background: white; /* Changed to white */
   min-height: 600px;
 }
 
@@ -279,9 +139,9 @@
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
 }
 
-/* Card Header - Dark Text */
+/* Card Header - Dark Text for white background */
 .welcome-title-dark {
-  color: #37474F;
+  color: #333; /* Dark text on white background */
   font-size: 1.1rem;
   font-weight: 700;
   letter-spacing: 1px;
@@ -289,14 +149,14 @@
 }
 
 .login-instruction-dark {
-  color: #546E7A;
+  color: #777; /* Grey text for instruction on white background */
   font-size: 0.8rem;
   letter-spacing: 0.3px;
 }
 
-/* App Title - Dark */
+/* App Title - Dark for white background */
 .app-title-dark {
-  color: #0053AD;
+  color: #FF9B1B; /* Orange app title: #FF9B1B */
   text-shadow: none;
 }
 
@@ -307,19 +167,19 @@
 }
 
 .sso-text-dark {
-  color: #546E7A;
+  color: #555; /* Dark grey for SSO text */
   font-size: 0.95rem;
   font-weight: 500;
 }
 
-/* Buttons */
+/* Buttons (Orange theme) */
 .login-btn {
-  background: linear-gradient(135deg, #0053AD 0%, #0663C7 50%, #0671E0 100%) !important;
-  color: white !important;
+  background: #FF9B1B !important; /* Solid Orange button: #FF9B1B */
+  color: white !important; /* White text on orange button */
   border: none;
-  box-shadow: 
-    0 8px 25px rgba(0, 83, 173, 0.3),
-    0 4px 12px rgba(0, 83, 173, 0.2);
+  box-shadow:
+    0 8px 25px rgba(255, 155, 27, 0.3), /* Orange shadow: #FF9B1B */
+    0 4px 12px rgba(255, 155, 27, 0.2);
   transition: all 0.3s ease;
   text-transform: none;
   font-size: 1rem;
@@ -328,15 +188,15 @@
 
 .login-btn:hover {
   transform: translateY(-2px);
-  background: linear-gradient(135deg, #004A9B 0%, #0558B0 50%, #0661CA 100%) !important;
-  box-shadow: 
-    0 12px 30px rgba(0, 83, 173, 0.4),
-    0 6px 15px rgba(0, 83, 173, 0.3);
+  background: #E68A00 !important; /* Slightly darker orange on hover */
+  box-shadow:
+    0 12px 30px rgba(255, 155, 27, 0.4),
+    0 6px 15px rgba(255, 155, 27, 0.3);
 }
 
 .register-btn-dark {
-  color: #0053AD !important;
-  border: 2px solid #0053AD !important;
+  color: #FF9B1B !important; /* Orange text for register button: #FF9B1B */
+  border: 2px solid #FF9B1B !important; /* Orange border: #FF9B1B */
   background: transparent !important;
   transition: all 0.3s ease;
   text-transform: none;
@@ -344,39 +204,39 @@
 }
 
 .register-btn-dark:hover {
-  background: rgba(0, 83, 173, 0.05) !important;
-  border-color: #0663C7 !important;
+  background: rgba(255, 155, 27, 0.05) !important; /* Light orange hover background */
+  border-color: #E68A00 !important; /* Darker orange border on hover */
   transform: translateY(-1px);
 }
 
-/* Custom Divider - Dark */
+/* Custom Divider - Dark for white background */
 .custom-divider-dark {
-  border-color: rgba(0, 0, 0, 0.12) !important;
+  border-color: rgba(0, 0, 0, 0.1) !important; /* Light grey divider */
   opacity: 1 !important;
 }
 
-/* Help Text and Links - Dark */
+/* Help Text and Links - Dark for white background */
 .help-text-dark {
-  color: #546E7A;
+  color: #555; /* Dark grey help text */
   font-size: 0.9rem;
 }
 
 .contact-link-dark {
-  color: #0053AD !important;
+  color: #FF9B1B !important; /* Orange link: #FF9B1B */
   text-decoration: underline;
   text-transform: none;
   font-size: 0.9rem;
 }
 
 .help-link-dark {
-  color: #78909C;
+  color: #777; /* Grey link */
   font-size: 0.85rem;
   text-decoration: underline;
   cursor: pointer;
 }
 
 .help-link-dark:hover {
-  color: #0053AD;
+  color: #FF9B1B; /* Orange on hover: #FF9B1B */
 }
 
 /* Transparent Background */
@@ -384,53 +244,27 @@
   background: transparent !important;
 }
 
-/* Navigation Dropdown Styles */
-.nav-dropdown {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-  min-width: 220px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+/* Navigation Dropdown Styles - REMOVED */
+
+/* Dialog Accents */
+.v-card-title .v-icon,
+.v-list-item .v-icon {
+    color: #FF9B1B !important; /* Orange accents: #FF9B1B */
 }
 
-.dropdown-item {
-  color: #FF9B1B;
-  transition: all 0.3s ease;
-  border-radius: 8px;
-  margin: 4px 8px;
-  padding: 8px 12px;
+.v-btn[color="#FF9B1B"] {
+    background-color: #FF9B1B !important;
+    color: white !important;
 }
 
-.dropdown-item:hover {
-  background: linear-gradient(135deg, #FF9B1B 0%, #FF8F00 100%);
-  color: white;
-  transform: translateX(4px);
-}
-
-.dropdown-item .v-icon {
-  transition: all 0.3s ease;
-}
-
-.dropdown-item:hover .v-icon {
-  transform: scale(1.1);
-}
-
-.nav-link {
-  text-transform: none;
-  font-weight: 500;
-  transition: all 0.3s ease;
-}
-
-.nav-link:hover {
-  background: rgba(255, 255, 255, 0.1);
+.v-alert[color="orange"] {
+    border-left: 8px solid #FF9B1B !important;
+    color: #333 !important;
 }
 
 /* Responsive Design */
 @media (max-width: 960px) {
-  .login-background {
-    padding-top: 56px;
-  }
+  /* .login-background padding adjustment REMOVED */
   
   .main-card {
     margin: 1rem;
@@ -455,9 +289,7 @@
 }
 
 @media (max-width: 600px) {
-  .login-background {
-    padding-top: 56px;
-  }
+  /* .login-background padding adjustment REMOVED */
   
   .main-card {
     margin: 0.5rem;
diff --git a/components/MonitorPasien/ticketCard.vue b/components/MonitorPasien/ticketCard.vue
new file mode 100644
index 0000000..51098bd
--- /dev/null
+++ b/components/MonitorPasien/ticketCard.vue
@@ -0,0 +1,130 @@
+<template>
+    <v-card 
+        class="pa-4 rounded-lg elevation-2 d-flex flex-column" 
+        color="white" 
+        style="border-top: 8px solid #FFB95F;" 
+        height="100%" 
+    >
+        <div class="d-flex align-center justify-center mb-4">
+            <v-icon size="36" color="orange-lighten-2" class="mr-2">mdi-hospital-box-outline</v-icon>
+            <div class="text-h6 font-weight-bold text-orange-lighten-2">{{ title }}</div>
+        </div>
+
+        <v-divider class="mb-4"></v-divider>
+        
+        <div class="timeline-scroll-container"> 
+            <v-timeline density="compact" align="start" line-inset="12" line-color="#FFB95F">
+                <v-timeline-item
+                    v-for="(step, index) in steps"
+                    :key="index"
+                    :dot-color="getStepColor(index)"
+                    :icon="getStepIcon(index)"
+                    size="small"
+                    icon-color="white" 
+                >
+                    <div class="d-flex flex-column align-start">
+                        <span 
+                            class="font-weight-bold" 
+                            :class="index === currentStepIndex ? 'text-orange-lighten-1' : index < currentStepIndex ? 'text-success' : 'text-grey-darken-1'"
+                        >
+                            {{ step.label }}
+                        </span>
+                        <span class="text-caption text-grey-darken-1">
+                            {{ step.date !== '-' ? `${step.date}, ${step.time}` : 'Menunggu' }}
+                        </span>
+                    </div>
+                </v-timeline-item>
+            </v-timeline>
+        </div>
+        
+        <v-divider class="mt-4 mb-4"></v-divider>
+
+        <v-btn 
+            size="large" 
+            variant="tonal" 
+            color="#FFA532" 
+            class="mt-auto font-weight-bold" 
+            prepend-icon="mdi-printer"
+            block
+        >
+            Cetak Ulang Tiket
+        </v-btn>
+    </v-card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    title: String,
+    steps: Array,
+    color: String, 
+    currentStepLabel: String, 
+});
+
+const currentStepIndex = computed(() => {
+    return props.steps.findIndex(step => step.label === props.currentStepLabel);
+});
+
+const getStepIcon = (index) => {
+    if (index < currentStepIndex.value) {
+        return 'mdi-check'; 
+    } else if (index === currentStepIndex.value) {
+        return 'mdi-progress-check'; 
+    } else {
+        return 'mdi-circle-outline'; 
+    }
+};
+
+const getStepColor = (index) => {
+    if (index < currentStepIndex.value) {
+        return 'success'; 
+    } else if (index === currentStepIndex.value) {
+        return 'orange-lighten-1'; 
+    }
+    return 'grey-lighten-1'; 
+};
+</script>
+
+<style scoped>
+/* =============================================== */
+/* SCROLLABLE TIMELINE STYLES (Menggunakan Tinggi Tetap) */
+/* =============================================== */
+.timeline-scroll-container {
+    /* Tinggi Tetap: Memastikan tinggi card konsisten di semua skenario responsive */
+    height: 320px;
+    
+    /* Membuat konten scrollable di sumbu Y jika melebihi height */
+    overflow-y: auto;
+    
+    /* Memberi jarak internal di bagian scrollable */
+    padding-right: 8px; 
+}
+
+/* PENTING: Menghilangkan padding bawah dari V-Timeline bawaan */
+.v-timeline {
+    padding-bottom: 0 !important; 
+    margin-bottom: 0 !important;
+}
+
+/* Kustomisasi scrollbar untuk tampilan yang lebih bersih (Opsional) */
+.timeline-scroll-container::-webkit-scrollbar {
+    width: 6px;
+}
+
+.timeline-scroll-container::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+}
+
+/* =============================================== */
+/* V-TIMELINE KUSTOMISASI */
+/* =============================================== */
+.v-timeline-item :deep(.v-timeline-item__body) {
+    padding-inline-start: 16px !important;
+}
+
+.v-timeline-item :deep(.v-timeline-item__opposite) {
+    display: none;
+}
+</style>
\ No newline at end of file
diff --git a/components/ProfilePopup.vue b/components/ProfilePopup.vue
index 3426985..8727b93 100644
--- a/components/ProfilePopup.vue
+++ b/components/ProfilePopup.vue
@@ -4,7 +4,7 @@
     :close-on-content-click="false"
     location="top end"
     origin="bottom right"
-    transition="slide-y-transition"
+    transition="scale-transition"
     open-on-hover
   >
     <template v-slot:activator="{ props: menuProps }">
@@ -13,20 +13,22 @@
         v-bind="menuProps"
         :title="user?.name || user?.preferred_username || 'User'"
         :subtitle="user?.email || 'No email'"
-        class="pa-2 ma-1 rounded-lg bg-blue-grey-lighten-5 text-blue-grey-darken-4"
-        color="blue-grey-darken-4"
+        class="pa-3 ma-1 rounded-xl profile-activator"
         link
       >
         <template v-slot:prepend>
-          <v-avatar size="40">
-            <v-img
-              :src="user?.picture || 'https://i.pravatar.cc/300?img=68'"
-              :alt="`${user?.name || 'User'} Profile`"
-            ></v-img>
-          </v-avatar>
+          <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">mdi-chevron-up</v-icon>
+          <v-icon size="20" class="chevron-icon">mdi-menu-down</v-icon>
         </template>
       </v-list-item>
 
@@ -35,87 +37,142 @@
         icon
         v-bind="menuProps"
         size="large"
-        variant="text"
-        color="blue-grey-darken-4"
+        variant="flat"
+        class="avatar-btn"
         :title="user?.name || 'Profile'"
       >
-        <v-avatar size="40">
-          <v-img
-            :src="user?.picture || 'https://i.pravatar.cc/300?img=68'"
-            :alt="`${user?.name || 'User'} Profile`"
-          ></v-img>
-        </v-avatar>
+        <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="rounded-lg elevation-4 pa-4" width="300" color="blue-grey-lighten-5">
-      <div class="d-flex align-center pb-2">
-        <v-avatar size="48">
-          <v-img
-            :src="user?.picture || 'https://i.pravatar.cc/300?img=68'"
-            :alt="`${user?.name || 'User'} Profile`"
-          ></v-img>
-        </v-avatar>
-        <div class="ml-4">
-          <div class="text-subtitle-1 font-weight-bold text-blue-grey-darken-4">
+    <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' }}
-          </div>
-          <div class="text-caption text-grey-darken-1">
+          </h3>
+          <p class="text-body-2 text-white opacity-90 mb-2">
             {{ user?.email || 'No email' }}
-          </div>
-          <div class="text-caption text-grey-darken-2">
-            ID: {{ user?.id?.substring(0, 8) }}...
-          </div>
+          </p>
+          <v-chip
+            size="small"
+            class="glass-chip"
+            prepend-icon="mdi-identifier"
+          >
+            {{ user?.id?.substring(0, 10) }}...
+          </v-chip>
         </div>
       </div>
-      <v-divider class="my-2"></v-divider>
 
-      <v-list dense>
-        <v-list-item link class="rounded-lg text-blue-grey-darken-4" @click="handleAction('account')">
-          <template v-slot:prepend>
-            <v-icon color="blue-grey-darken-4">mdi-cog</v-icon>
-          </template>
-          <v-list-item-title>Pengaturan Akun</v-list-item-title>
-        </v-list-item>
+      <!-- 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>
 
-        <v-list-item link class="rounded-lg text-blue-grey-darken-4" @click="handleAction('darkMode')">
-          <template v-slot:prepend>
-            <v-icon color="blue-grey-darken-4">mdi-weather-night</v-icon>
-          </template>
-          <v-list-item-title>Mode Gelap</v-list-item-title>
-          <template v-slot:append>
-            <v-switch
-              v-model="darkMode"
-              hide-details
-              density="compact"
-              color="orange-darken-2"
-            ></v-switch>
-          </template>
-        </v-list-item>
+          <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>
 
-        <v-list-item link class="rounded-lg text-blue-grey-darken-4" @click="handleAction('profile')">
-          <template v-slot:prepend>
-            <v-icon color="blue-grey-darken-4">mdi-account</v-icon>
-          </template>
-          <v-list-item-title>Profil Saya</v-list-item-title>
-        </v-list-item>
+          <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-2"></v-divider>
+        <v-divider class="my-4"></v-divider>
 
-        <v-list-item
-          link
-          class="rounded-lg text-red"
+        <!-- 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"
         >
-          <template v-slot:prepend>
-            <v-icon color="red">mdi-logout</v-icon>
-          </template>
-          <v-list-item-title>
-            {{ isLoggingOut ? 'Logging out...' : 'Keluar' }}
-          </v-list-item-title>
-        </v-list-item>
-      </v-list>
+          {{ isLoggingOut ? 'Keluar...' : 'Keluar' }}
+        </v-btn>
+      </v-card-text>
     </v-card>
   </v-menu>
 </template>
@@ -146,7 +203,6 @@ const signOut = async () => {
   menu.value = false;
 
   try {
-    // 🚨 Emits event up to SideBar to trigger useAuth().logout()
     emit('logout'); 
   } finally {
     isLoggingOut.value = false;
@@ -156,21 +212,205 @@ const signOut = async () => {
 const handleAction = (action) => {
   switch(action) {
     case 'account':
-      navigateTo('/settings/account')
+      navigateTo('/Profile/Pengaturan')
       break;
     case 'profile':
-      navigateTo('/profile')
+      navigateTo('/Profile/Profil')
       break;
+    case 'notifications':
+      navigateTo('/notifications')
+      break;
+    case 'help':
+      navigateTo('/help')
+      break;
+    case 'darkMode':
+      darkMode.value = !darkMode.value;
+      return;
   }
 
-  if (action !== 'darkMode') {
-    menu.value = false;
-  }
+  menu.value = false;
 };
 </script>
 
 <style scoped>
-.text-red {
-  color: rgb(244, 67, 54) !important;
+.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/ReorderMenuDialog.vue b/components/ReorderMenuDialog.vue
deleted file mode 100644
index 4c75f83..0000000
--- a/components/ReorderMenuDialog.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<!-- <template>
-  <v-dialog v-model="dialog" max-width="500px">
-    <v-card>
-      <v-card-title class="text-h6 font-weight-bold">
-        Atur Urutan Menu
-      </v-card-title>
-      <v-card-text>
-        <v-list dense>
-          <draggable v-model="localMenus" item-key="title" @end="onDragEnd">
-            <template #item="{ element }">
-              <v-list-item class="reorder-item">
-                <v-list-item-content>
-                  <v-list-item-title>{{ element.title }}</v-list-item-title>
-                </v-list-item-content>
-                <v-list-item-icon>
-                  <v-icon>mdi-drag</v-icon>
-                </v-list-item-icon>
-              </v-list-item>
-            </template>
-          </draggable>
-        </v-list>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="grey-darken-1" text @click="dialog = false">Batal</v-btn>
-        <v-btn color="blue" text @click="saveOrder">Simpan Urutan</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-import draggable from 'vuedraggable';
-import navigationItems from '~/data/menu.js';
-
-const dialog = ref(false);
-const localMenus = ref([]);
-
-// Watch for changes in the dialog's visibility
-watch(dialog, (val) => {
-  if (val) {
-    // Make a deep copy to avoid mutating the original data
-    localMenus.value = JSON.parse(JSON.stringify(navigationItems));
-  }
-});
-
-const onDragEnd = (event) => {
-  // Logic to handle the end of a drag event
-};
-
-const saveOrder = () => {
-  // Emit an event with the new menu order
-  // You would then handle this in the parent component
-  // to update the ~/data/menu.js file (or your state management)
-  // and trigger a UI refresh.
-  dialog.value = false;
-};
-
-const openDialog = () => {
-  dialog.value = true;
-};
-
-defineExpose({ openDialog });
-</script>
-
-<style scoped>
-.reorder-item {
-  cursor: grab;
-  border-bottom: 1px solid #eee;
-}
-.reorder-item:active {
-  cursor: grabbing;
-}
-</style> -->
\ No newline at end of file
diff --git a/components/SideBar.vue b/components/SideBar.vue
index 7267487..50de1ac 100644
--- a/components/SideBar.vue
+++ b/components/SideBar.vue
@@ -23,7 +23,8 @@
     </v-list-item>
     <v-divider></v-divider>
 
-    <v-list density="compact" nav class="mt-2" v-model:opened="openedGroups"> <template v-for="item in items" :key="item.name">
+    <v-list density="compact" nav class="mt-2" v-model:opened="openedGroups">
+      <template v-for="item in items" :key="item.name">
         
         <v-list-group 
           v-if="item.children"
@@ -99,12 +100,13 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits, onMounted, ref, watch } from 'vue'; // IMPORT WATCH
-import { navigateTo } from '#app';
+import { defineProps, defineEmits, onMounted, ref, watch } from 'vue';
+import { navigateTo, useRoute } from '#app';
 import ProfilePopup from './ProfilePopup.vue';
-import { useAuth } from '~/composables/useAuth';
+import { useAuth } from '~/composables/useAuth'; // Ensure this path is correct
 
 const { user, logout, checkAuth } = useAuth();
+const route = useRoute(); // Access the current route
 
 interface NavItem {
   id: number;
@@ -131,22 +133,38 @@ const props = defineProps({
 
 const emit = defineEmits(['update:drawer', 'toggle-rail']);
 
-// --- NEW STATE FOR DROPDOWN GROUPS ---
-// This holds the names of the currently open list groups.
 const openedGroups = ref<string[]>([]);
+const isHovering = ref(false);
 
-// --- NEW WATCHER TO CLOSE DROPDOWNS ---
+// --- WATCHERS FOR DROPDOWN AND HIGHLIGHTING ---
+
+// 1. WATCHER: Close dropdowns when sidebar collapses (rail = true)
 watch(() => props.rail, (newRailState) => {
   if (newRailState === true) {
-    // If the sidebar is collapsing (rail is true), close all groups
     openedGroups.value = [];
   }
 });
-// ------------------------------------
 
+// 2. WATCHER: Open the parent group when a child route is active
+watch(() => route.path, (newPath) => {
+  // Find the parent item whose children contain the current path
+  const activeParent = props.items.find(item => 
+    item.children && item.children.some(child => 
+      child.path === newPath
+    )
+  );
+
+  if (activeParent) {
+    // If a parent is active, ensure it's in the openedGroups array
+    if (!openedGroups.value.includes(activeParent.name)) {
+      openedGroups.value.push(activeParent.name);
+    }
+    
+    // Optional: Keep only the active parent open, closing others
+    // openedGroups.value = [activeParent.name];
+  }
+}, { immediate: true }); 
 
-// Local state for hover-to-expand rail feature
-const isHovering = ref(false);
 
 // --- HOVER LOGIC for Rail Expansion ---
 
@@ -164,11 +182,12 @@ const handleMouseLeave = () => {
   }
 };
 
-// --- AUTH LOGIC (Kept the same) ---
+// --- AUTH LOGIC ---
 
 const handleLogout = async () => {
   console.log('🚪 SideBar logout initiated...');
   try {
+    // Calls the external logout function (from useAuth.ts)
     await logout(); 
   } catch (error) {
     console.error('❌ SideBar logout error:', error);
@@ -180,6 +199,7 @@ const redirectToLogin = () => {
 };
 
 onMounted(async () => {
+    // Fetches real user data on mount
     await checkAuth(); 
 });
 </script>
diff --git a/composables/usePermissions.ts b/composables/usePermissions.ts
index 5a3d1c5..017ba90 100644
--- a/composables/usePermissions.ts
+++ b/composables/usePermissions.ts
@@ -1,3 +1,4 @@
+// /composables/usePermissions.ts
 export const usePermission = () => {
   /**
    * Extract group and role from path
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d99bfd7..68aaae9 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,7 +3,13 @@ import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
 export default defineNuxtConfig({
   compatibilityDate: '2025-05-15',
-  devtools: { enabled: true },
+  devtools: {
+    enabled: true,
+
+    timeline: {
+      enabled: true
+    }
+  },
 
   modules: [
     '@nuxt/content',
diff --git a/package-lock.json b/package-lock.json
index fe9e74d..7ba369f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "vue-router": "^4.5.1"
       },
       "devDependencies": {
+        "@types/node": "^24.7.2",
         "sass-embedded": "^1.89.2",
         "vite-plugin-vuetify": "^2.1.2",
         "vuetify": "^3.9.3"
@@ -5123,6 +5124,16 @@
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "24.7.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.7.2.tgz",
+      "integrity": "sha512-/NbVmcGTP+lj5oa4yiYxxeBjRivKQ5Ns1eSZeB99ExsEQ6rX5XYU1Zy/gGxY/ilqtD4Etx9mKyrPxZRetiahhA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.14.0"
+      }
+    },
     "node_modules/@types/parse-path": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/parse-path/-/parse-path-7.0.3.tgz",
@@ -16590,6 +16601,13 @@
         "node": ">=20.18.1"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.14.0.tgz",
+      "integrity": "sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/unenv": {
       "version": "2.0.0-rc.21",
       "resolved": "https://registry.npmjs.org/unenv/-/unenv-2.0.0-rc.21.tgz",
diff --git a/package.json b/package.json
index 8c90f8a..e6b1b59 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,9 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "_command_dev": "nuxt dev -o --host --port 3001",
+    "_command_dev2": "nuxt dev -o --port 3001",
+    "dev": "nuxt dev -o --port 3001",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
@@ -34,6 +36,7 @@
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
+    "@types/node": "^24.7.2",
     "sass-embedded": "^1.89.2",
     "vite-plugin-vuetify": "^2.1.2",
     "vuetify": "^3.9.3"
diff --git a/pages/CheckInPasien/checkIn.vue b/pages/CheckInPasien/checkIn.vue
new file mode 100644
index 0000000..6d681fc
--- /dev/null
+++ b/pages/CheckInPasien/checkIn.vue
@@ -0,0 +1,1068 @@
+<template>
+  <v-app class="bg-light">
+    <v-main>
+      <v-container fluid class="fill-height pa-4">
+        <v-row align="center" justify="center">
+          <v-col cols="12" sm="10" md="8" lg="6">
+            <v-card class="elevation-20 rounded-xl overflow-hidden card-main" :style="cardStyle">
+              
+              <!-- Header dengan gradient -->
+              <div class="header-gradient pa-6">
+                <div class="text-center">
+                  <div class="hospital-icon-wrapper mb-3">
+                    <v-icon size="56" color="white" class="pulse-animation">mdi-hospital-building</v-icon>
+                  </div>
+                  <h1 class="text-h4 font-weight-bold text-white mb-2">Check-in Pasien</h1>
+                  <p class="text-subtitle-1 text-white opacity-90">Sistem Antrean Rumah Sakit</p>
+                </div>
+                
+                <!-- Tabs dengan desain modern -->
+                <v-tabs 
+                  v-model="tab" 
+                  align-tabs="center" 
+                  class="mt-6 custom-tabs"
+                  bg-color="transparent"
+                  slider-color="white"
+                  height="48"
+                >
+                  <v-tab value="scan" class="text-white tab-item">
+                    <v-icon start>mdi-qrcode-scan</v-icon>
+                    Scan QR
+                  </v-tab>
+                  <v-tab value="manual" class="text-white tab-item">
+                    <v-icon start>mdi-keyboard</v-icon>
+                    Manual
+                  </v-tab>
+                  <v-tab value="generate" class="text-white tab-item">
+                    <v-icon start>mdi-qrcode</v-icon>
+                    Generate QR
+                  </v-tab>
+                </v-tabs>
+              </div>
+
+              <v-card-text class="pa-8">
+                <v-window v-model="tab">
+                  <!-- Tab Scan QR -->
+                  <v-window-item value="scan">
+                    <div class="scan-section">
+                      <div class="text-center mb-6">
+                        <v-icon :color="primaryColor" size="32" class="mb-2">mdi-information-outline</v-icon>
+                        <p class="text-h6 font-weight-medium text-grey-darken-2">
+                          Arahkan Kamera ke QR Code
+                        </p>
+                        <p class="text-body-2 text-grey">
+                          Pastikan QR code terlihat jelas dan tidak terpotong
+                        </p>
+                      </div>
+                      
+                      <!-- QR Scanner Area dengan animasi -->
+                      <div class="qr-scanner-container mb-6">
+                        <div class="qr-placeholder">
+                          <div class="scanner-overlay">
+                            <div class="corner corner-tl"></div>
+                            <div class="corner corner-tr"></div>
+                            <div class="corner corner-bl"></div>
+                            <div class="corner corner-br"></div>
+                            <div class="scan-line"></div>
+                          </div>
+                          <v-icon size="80" :color="primaryColor" class="qr-icon">mdi-qrcode-scan</v-icon>
+                        </div>
+                      </div>
+                      
+                      <!-- Button dengan gradient -->
+                      <v-btn
+                        class="gradient-button"
+                        block
+                        size="x-large"
+                        elevation="8"
+                        @click="checkMockStatus"
+                      >
+                        <v-icon start>mdi-camera</v-icon>
+                        Simulasi Scan QR
+                      </v-btn>
+
+                      <!-- Info tambahan -->
+                      <div class="info-card mt-6">
+                        <v-alert
+                          type="info"
+                          variant="tonal"
+                          :color="primaryColor"
+                          class="text-body-2"
+                        >
+                          <template v-slot:prepend>
+                            <v-icon>mdi-lightbulb-outline</v-icon>
+                          </template>
+                          Tips: Pastikan pencahayaan cukup untuk hasil scan optimal
+                        </v-alert>
+                      </div>
+                    </div>
+                  </v-window-item>
+
+                  <!-- Tab Manual -->
+                  <v-window-item value="manual">
+                    <div class="manual-section">
+                      <div class="text-center mb-6">
+                        <v-icon :color="secondaryColor" size="32" class="mb-2">mdi-form-textbox</v-icon>
+                        <p class="text-h6 font-weight-medium text-grey-darken-2">
+                          Input Manual
+                        </p>
+                        <p class="text-body-2 text-grey">
+                          Masukkan nomor antrean atau ID pasien
+                        </p>
+                      </div>
+
+                      <v-form @submit.prevent="checkInManual" ref="manualForm">
+                        <v-text-field
+                          v-model="manualInput"
+                          label="Nomor Antrean / ID Pasien"
+                          placeholder="Contoh: P12345"
+                          prepend-inner-icon="mdi-account-card-details"
+                          variant="outlined"
+                          :color="primaryColor"
+                          class="mb-2 custom-input"
+                          required
+                          :rules="[v => !!v || 'Field ini wajib diisi']"
+                          density="comfortable"
+                        >
+                          <template v-slot:append-inner>
+                            <v-icon :color="manualInput ? 'success' : 'grey'">
+                              {{ manualInput ? 'mdi-check-circle' : 'mdi-circle-outline' }}
+                            </v-icon>
+                          </template>
+                        </v-text-field>
+
+                        <v-btn
+                          :color="secondaryColor"
+                          class="text-white font-weight-bold text-none gradient-button-secondary"
+                          block
+                          size="x-large"
+                          type="submit"
+                          elevation="8"
+                        >
+                          <v-icon start>mdi-login</v-icon>
+                          Check-in Sekarang
+                        </v-btn>
+                      </v-form>
+
+                      <!-- Quick Access Buttons -->
+                      <div class="quick-actions mt-6">
+                        <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
+                        <v-row dense>
+                          <v-col cols="6">
+                            <v-btn
+                              variant="outlined"
+                              :color="primaryColor"
+                              block
+                              size="small"
+                              class="text-none"
+                            >
+                              <v-icon start size="18">mdi-history</v-icon>
+                              Riwayat
+                            </v-btn>
+                          </v-col>
+                          <v-col cols="6">
+                            <v-btn
+                              variant="outlined"
+                              :color="primaryColor"
+                              block
+                              size="small"
+                              class="text-none"
+                            >
+                              <v-icon start size="18">mdi-help-circle</v-icon>
+                              Bantuan
+                            </v-btn>
+                          </v-col>
+                        </v-row>
+                      </div>
+                    </div>
+                  </v-window-item>
+
+                  <!-- Tab Generate QR -->
+                  <v-window-item value="generate">
+                    <div class="generate-section">
+                      <div class="text-center mb-6">
+                        <v-icon :color="primaryColor" size="32" class="mb-2">mdi-qrcode</v-icon>
+                        <p class="text-h6 font-weight-medium text-grey-darken-2">
+                          Generate QR Code untuk Testing
+                        </p>
+                        <p class="text-body-2 text-grey">
+                          Buat QR code yang bisa Anda scan di tab "Scan QR"
+                        </p>
+                      </div>
+
+                      <!-- Form Generate -->
+                      <v-form @submit.prevent="generateQRCode">
+                        <v-text-field
+                          v-model="generatePatientId"
+                          label="ID Pasien"
+                          placeholder="Contoh: P12345"
+                          prepend-inner-icon="mdi-identifier"
+                          variant="outlined"
+                          :color="primaryColor"
+                          class="mb-4 custom-input"
+                          density="comfortable"
+                        ></v-text-field>
+
+                        <v-select
+                          v-model="generateStatus"
+                          label="Status Check-in"
+                          :items="statusOptions"
+                          prepend-inner-icon="mdi-shield-check"
+                          variant="outlined"
+                          :color="primaryColor"
+                          class="mb-4 custom-input"
+                          density="comfortable"
+                        ></v-select>
+
+                        <v-btn
+                          :color="primaryColor"
+                          class="gradient-button"
+                          block
+                          size="x-large"
+                          type="submit"
+                          elevation="8"
+                        >
+                          <v-icon start>mdi-qrcode-plus</v-icon>
+                          Generate QR Code
+                        </v-btn>
+                      </v-form>
+
+                      <!-- QR Code Display -->
+                      <div v-if="generatedQRData" class="qr-display mt-6">
+                        <v-card variant="outlined" class="pa-4">
+                          <div class="text-center">
+                            <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
+                            <div id="qrcode" class="qr-code-container mb-4"></div>
+                            
+                            <v-chip :color="generateStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
+                              <v-icon start>{{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
+                              {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
+                            </v-chip>
+
+                            <p class="text-body-2 text-grey mb-4">
+                              Data: {{ generatedQRData }}
+                            </p>
+
+                            <!-- Action Buttons -->
+                            <v-row dense>
+                              <v-col cols="6">
+                                <v-btn
+                                  variant="outlined"
+                                  :color="primaryColor"
+                                  block
+                                  size="small"
+                                  @click="downloadQR"
+                                  class="text-none"
+                                >
+                                  <v-icon start size="18">mdi-download</v-icon>
+                                  Download
+                                </v-btn>
+                              </v-col>
+                              <v-col cols="6">
+                                <v-btn
+                                  variant="outlined"
+                                  :color="primaryColor"
+                                  block
+                                  size="small"
+                                  @click="shareQR"
+                                  class="text-none"
+                                >
+                                  <v-icon start size="18">mdi-share-variant</v-icon>
+                                  Share
+                                </v-btn>
+                              </v-col>
+                            </v-row>
+                          </div>
+                        </v-card>
+
+                        <!-- Instructions -->
+                        <v-alert
+                          type="success"
+                          variant="tonal"
+                          class="mt-4 text-body-2"
+                        >
+                          <template v-slot:prepend>
+                            <v-icon>mdi-information</v-icon>
+                          </template>
+                          <strong>Cara menggunakan:</strong>
+                          <ol class="ml-4 mt-2">
+                            <li>Klik "Download" atau "Share" untuk menyimpan/mengirim QR ke HP Anda</li>
+                            <li>Buka QR code di HP Anda</li>
+                            <li>Pindah ke tab "Scan QR" dan scan QR code tersebut</li>
+                          </ol>
+                        </v-alert>
+                      </div>
+                    </div>
+                  </v-window-item>
+                </v-window>
+              </v-card-text>
+            </v-card>
+
+            <!-- Stats Footer -->
+            <div class="stats-footer mt-4">
+              <v-row>
+                <v-col cols="4">
+                  <div class="stat-card">
+                    <v-icon :color="primaryColor" size="24">mdi-clock-outline</v-icon>
+                    <div class="text-caption text-grey mt-1">Hari Ini</div>
+                    <div class="text-h6 font-weight-bold">24</div>
+                  </div>
+                </v-col>
+                <v-col cols="4">
+                  <div class="stat-card">
+                    <v-icon color="success" size="24">mdi-check-circle</v-icon>
+                    <div class="text-caption text-grey mt-1">Selesai</div>
+                    <div class="text-h6 font-weight-bold">18</div>
+                  </div>
+                </v-col>
+                <v-col cols="4">
+                  <div class="stat-card">
+                    <v-icon :color="secondaryColor" size="24">mdi-account-group</v-icon>
+                    <div class="text-caption text-grey mt-1">Menunggu</div>
+                    <div class="text-h6 font-weight-bold">6</div>
+                  </div>
+                </v-col>
+              </v-row>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+    
+    <!-- Enhanced Dialog with Blur -->
+    <v-dialog 
+      v-model="infoDialog" 
+      max-width="500" 
+      persistent
+      transition="dialog-transition"
+      scrim="rgba(0, 0, 0, 0.5)"
+      class="blur-dialog"
+    >
+      <v-card class="rounded-xl dialog-card" elevation="24">
+        <div class="dialog-header text-center pa-8" :class="infoAction === 'checkin' ? 'success-header' : 'warning-header'">
+          <div class="decorative-circles">
+            <div class="circle circle-1"></div>
+            <div class="circle circle-2"></div>
+            <div class="circle circle-3"></div>
+          </div>
+          
+          <div class="icon-wrapper mb-4">
+            <div class="icon-bg" :class="infoAction === 'checkin' ? 'icon-bg-success' : 'icon-bg-warning'">
+              <v-icon size="64" color="white" class="dialog-icon">
+                {{ infoAction === 'checkin' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
+              </v-icon>
+            </div>
+          </div>
+          
+          <h2 class="text-h4 font-weight-bold text-white mb-2">
+            {{ infoAction === 'checkin' ? 'Siap Check-in!' : 'Belum Diizinkan' }}
+          </h2>
+          
+          <div class="status-badge mt-3">
+            <v-chip 
+              :color="infoAction === 'checkin' ? 'white' : 'white'" 
+              :text-color="infoAction === 'checkin' ? 'success' : 'orange'"
+              size="small"
+              class="font-weight-bold"
+            >
+              <v-icon start size="16">
+                {{ infoAction === 'checkin' ? 'mdi-check' : 'mdi-clock-alert' }}
+              </v-icon>
+              {{ infoAction === 'checkin' ? 'Diizinkan' : 'Menunggu' }}
+            </v-chip>
+          </div>
+        </div>
+        
+        <v-card-text class="pa-8">
+          <div class="message-container">
+            <div class="message-icon mb-4">
+              <v-icon :color="infoAction === 'checkin' ? 'success' : 'orange'" size="32">
+                mdi-information-outline
+              </v-icon>
+            </div>
+            
+            <p class="text-h6 font-weight-bold mb-3 text-center">{{ infoMessage }}</p>
+            
+            <v-divider class="my-4"></v-divider>
+            
+            <div class="instruction-box pa-4 rounded-lg" :class="infoAction === 'checkin' ? 'instruction-success' : 'instruction-warning'">
+              <div class="d-flex align-start">
+                <v-icon :color="infoAction === 'checkin' ? 'success' : 'orange'" class="mr-3 mt-1">
+                  {{ infoAction === 'checkin' ? 'mdi-hand-pointing-down' : 'mdi-timer-sand' }}
+                </v-icon>
+                <div>
+                  <p class="text-body-1 font-weight-medium mb-1">
+                    {{ infoAction === 'checkin' ? 'Langkah Selanjutnya:' : 'Informasi:' }}
+                  </p>
+                  <p class="text-body-2 text-grey-darken-1">
+                    {{ infoAction === 'checkin' ? 'Klik tombol Check-in di bawah untuk melanjutkan proses registrasi pasien' : 'Mohon menunggu hingga antrean Anda dipanggil oleh petugas' }}
+                  </p>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Patient Info Card -->
+            <v-card variant="outlined" class="mt-4 patient-info-card" color="grey-lighten-4">
+              <v-card-text class="py-3">
+                <div class="d-flex justify-space-between align-center">
+                  <div class="d-flex align-center">
+                    <v-icon color="primary" class="mr-2">mdi-account-circle</v-icon>
+                    <div>
+                      <p class="text-caption text-grey mb-0">ID Pasien</p>
+                      <p class="text-body-1 font-weight-bold mb-0">{{ scannedData?.split('|')[0] || 'N/A' }}</p>
+                    </div>
+                  </div>
+                  <div class="text-right">
+                    <p class="text-caption text-grey mb-0">Waktu Scan</p>
+                    <p class="text-body-2 font-weight-medium mb-0">{{ new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</p>
+                  </div>
+                </div>
+              </v-card-text>
+            </v-card>
+          </div>
+        </v-card-text>
+        
+        <v-card-actions class="pa-6 pt-0">
+          <v-row dense>
+            <v-col v-if="infoAction === 'kembali'" cols="12">
+              <v-btn
+                color="grey-darken-1"
+                class="text-white font-weight-bold text-none dialog-button"
+                size="x-large"
+                block
+                variant="flat"
+                @click="handleInfoAction"
+                elevation="0"
+                prepend-icon="mdi-arrow-left"
+              >
+                Kembali
+              </v-btn>
+            </v-col>
+            <template v-else>
+              <v-col cols="6">
+                <v-btn
+                  color="grey-lighten-1"
+                  class="text-none dialog-button"
+                  size="x-large"
+                  block
+                  variant="outlined"
+                  @click="infoDialog = false"
+                  prepend-icon="mdi-close"
+                >
+                  Batal
+                </v-btn>
+              </v-col>
+              <v-col cols="6">
+                <v-btn
+                  color="success"
+                  class="text-white font-weight-bold text-none dialog-button"
+                  size="x-large"
+                  block
+                  variant="flat"
+                  @click="handleInfoAction"
+                  elevation="4"
+                  prepend-icon="mdi-login"
+                >
+                  Check-in
+                </v-btn>
+              </v-col>
+            </template>
+          </v-row>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    
+    <!-- Enhanced Snackbar -->
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      :timeout="snackbar.timeout"
+      location="bottom right"
+      rounded="pill"
+      elevation="24"
+      class="custom-snackbar"
+    >
+      <div class="d-flex align-center">
+        <v-avatar :color="snackbar.color" size="32" class="mr-3">
+          <v-icon size="20" color="white">{{ snackbar.icon }}</v-icon>
+        </v-avatar>
+        <div>
+          <div class="font-weight-bold">{{ snackbar.title }}</div>
+          <div class="text-body-2">{{ snackbar.message }}</div>
+        </div>
+      </div>
+    </v-snackbar>
+
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick } from 'vue';
+
+definePageMeta({
+  middleware:['auth']
+})
+
+// TypeScript declaration for QRCode
+declare global {
+  interface Window {
+    QRCode: any;
+  }
+}
+
+// --- DESAIN & TEMA ---
+const primaryColor = ref('#1565C0');
+const secondaryColor = ref('#FB8C00');
+
+const cardStyle = computed(() => ({
+  background: 'white',
+}));
+
+// --- LOGIKA ---
+const tab = ref('scan');
+const infoDialog = ref(false);
+const infoMessage = ref('');
+const infoAction = ref<'checkin' | 'kembali'>('kembali'); 
+const scannedData = ref<string | null>(null);
+const manualInput = ref('');
+const manualForm = ref(null);
+
+// Generate QR variables
+const generatePatientId = ref('P12345');
+const generateStatus = ref('ALLOWED');
+const generatedQRData = ref('');
+const statusOptions = [
+  { title: 'Diizinkan Check-in', value: 'ALLOWED' },
+  { title: 'Belum Diizinkan', value: 'NOT_ALLOWED' }
+];
+
+const snackbar = ref({
+  show: false,
+  title: '',
+  message: '',
+  color: '',
+  icon: '',
+  timeout: 4000,
+});
+
+const checkMockStatus = () => {
+    const isCurrentlyAllowed = infoAction.value === 'checkin';
+    const mockData = isCurrentlyAllowed ? 'P67890|NOT_ALLOWED' : 'P12345|ALLOWED';
+    
+    scannedData.value = mockData;
+    onDetect(mockData);
+};
+
+const onDetect = (decodedText: string) => {
+    const [patientId, status] = decodedText.split('|');
+    
+    if (status === 'ALLOWED') {
+        infoMessage.value = `Antrean Pasien ${patientId} sudah diperbolehkan check-in`;
+        infoAction.value = 'checkin';
+        infoDialog.value = true;
+    } else if (status === 'NOT_ALLOWED') {
+        infoMessage.value = `Antrean Pasien ${patientId} belum diperbolehkan check-in`;
+        infoAction.value = 'kembali';
+        infoDialog.value = true;
+    } else {
+        showSnackbar('Gagal', 'QR Code tidak valid.', 'error', 'mdi-close-circle');
+    }
+};
+
+const handleInfoAction = async () => {
+    infoDialog.value = false;
+    
+    if (infoAction.value === 'checkin') {
+        const checkinSuccess = await performCheckIn(scannedData.value!);
+        
+        if (checkinSuccess) {
+            showSnackbar('Berhasil!', 'Check-in antrean berhasil dilakukan.', 'success', 'mdi-check-circle');
+        } else {
+            showSnackbar('Gagal!', 'Check-in antrean gagal dilakukan. Silakan coba lagi!', 'error', 'mdi-close-circle');
+        }
+    }
+};
+
+const performCheckIn = async (data: string): Promise<boolean> => {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    return Math.random() < 0.8;
+};
+
+const showSnackbar = (title: string, message: string, color: string, icon: string) => {
+    snackbar.value.title = title;
+    snackbar.value.message = message;
+    snackbar.value.color = color;
+    snackbar.value.icon = icon;
+    snackbar.value.show = true;
+};
+
+const checkInManual = () => {
+  if (manualForm.value) {
+    showSnackbar('Info', 'Check-in Manual sedang diproses.', 'info', 'mdi-information');
+  }
+};
+
+// Generate QR Code function
+const generateQRCode = async () => {
+  if (!generatePatientId.value) {
+    showSnackbar('Error', 'Mohon isi ID Pasien', 'error', 'mdi-alert');
+    return;
+  }
+
+  generatedQRData.value = `${generatePatientId.value}|${generateStatus.value}`;
+  
+  await nextTick();
+  
+  // Clear previous QR code
+  const qrContainer = document.getElementById('qrcode');
+  if (qrContainer) {
+    qrContainer.innerHTML = '';
+    
+    // Load QRCode.js from CDN if not already loaded
+    if (typeof window.QRCode === 'undefined') {
+      const script = document.createElement('script');
+      script.src = 'https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js';
+      script.onload = () => createQR();
+      document.head.appendChild(script);
+    } else {
+      createQR();
+    }
+  }
+  
+  showSnackbar('Berhasil!', 'QR Code berhasil di-generate', 'success', 'mdi-check-circle');
+};
+
+const createQR = () => {
+  const qrContainer = document.getElementById('qrcode');
+  if (qrContainer && window.QRCode) {
+    new window.QRCode(qrContainer, {
+      text: generatedQRData.value,
+      width: 256,
+      height: 256,
+      colorDark: '#1565C0',
+      colorLight: '#ffffff',
+      correctLevel: window.QRCode.CorrectLevel.H
+    });
+  }
+};
+
+const downloadQR = () => {
+  const canvas = document.querySelector('#qrcode canvas') as HTMLCanvasElement;
+  if (canvas) {
+    const url = canvas.toDataURL('image/png');
+    const link = document.createElement('a');
+    link.download = `QR-${generatePatientId.value}.png`;
+    link.href = url;
+    link.click();
+    showSnackbar('Berhasil!', 'QR Code berhasil didownload', 'success', 'mdi-download');
+  }
+};
+
+const shareQR = async () => {
+  const canvas = document.querySelector('#qrcode canvas') as HTMLCanvasElement;
+  if (canvas) {
+    canvas.toBlob(async (blob) => {
+      if (blob) {
+        const file = new File([blob], `QR-${generatePatientId.value}.png`, { type: 'image/png' });
+        
+        if (navigator.share && navigator.canShare({ files: [file] })) {
+          try {
+            await navigator.share({
+              files: [file],
+              title: 'QR Code Check-in',
+              text: `QR Code untuk pasien ${generatePatientId.value}`
+            });
+            showSnackbar('Berhasil!', 'QR Code berhasil dibagikan', 'success', 'mdi-share');
+          } catch (err: any) {
+            if (err.name !== 'AbortError') {
+              showSnackbar('Info', 'Gagal membagikan. Silakan download dan kirim manual.', 'info', 'mdi-information');
+            }
+          }
+        } else {
+          // Fallback: copy to clipboard atau download
+          showSnackbar('Info', 'Browser tidak support share. Silakan gunakan Download.', 'info', 'mdi-information');
+        }
+      }
+    });
+  }
+};
+</script>
+
+<style scoped>
+.bg-light {
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
+.card-main {
+  transition: all 0.3s ease;
+}
+
+.card-main:hover {
+  transform: translateY(-4px);
+}
+
+.header-gradient {
+  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.header-gradient::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+  animation: pulse 4s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 0.5; }
+  50% { transform: scale(1.1); opacity: 0.8; }
+}
+
+.hospital-icon-wrapper {
+  display: inline-block;
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+}
+
+.pulse-animation {
+  animation: pulse-icon 2s ease-in-out infinite;
+}
+
+@keyframes pulse-icon {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+.custom-tabs :deep(.v-tab) {
+  text-transform: none;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  font-size: 0.9rem;
+}
+
+.custom-tabs :deep(.v-tab--selected) {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+}
+
+.scan-section, .manual-section, .generate-section {
+  animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.qr-scanner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.qr-placeholder {
+  width: 100%;
+  max-width: 320px;
+  height: 320px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  border-radius: 16px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
+}
+
+.scanner-overlay {
+  position: absolute;
+  width: 80%;
+  height: 80%;
+}
+
+.corner {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border: 3px solid #1565C0;
+}
+
+.corner-tl {
+  top: 0;
+  left: 0;
+  border-right: none;
+  border-bottom: none;
+  border-radius: 8px 0 0 0;
+}
+
+.corner-tr {
+  top: 0;
+  right: 0;
+  border-left: none;
+  border-bottom: none;
+  border-radius: 0 8px 0 0;
+}
+
+.corner-bl {
+  bottom: 0;
+  left: 0;
+  border-right: none;
+  border-top: none;
+  border-radius: 0 0 0 8px;
+}
+
+.corner-br {
+  bottom: 0;
+  right: 0;
+  border-left: none;
+  border-top: none;
+  border-radius: 0 0 8px 0;
+}
+
+.scan-line {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #1565C0, transparent);
+  top: 0;
+  animation: scan 2s linear infinite;
+  box-shadow: 0 0 10px #1565C0;
+}
+
+@keyframes scan {
+  0% { top: 0; }
+  100% { top: 100%; }
+}
+
+.qr-icon {
+  position: relative;
+  z-index: 1;
+  animation: breathe 2s ease-in-out infinite;
+}
+
+@keyframes breathe {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+.gradient-button {
+  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
+  color: white !important;
+  font-weight: 700;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+}
+
+.gradient-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(21, 101, 192, 0.4) !important;
+}
+
+.gradient-button-secondary {
+  background: linear-gradient(135deg, #FB8C00 0%, #F57C00 100%) !important;
+  color: white !important;
+  font-weight: 700;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+}
+
+.gradient-button-secondary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(251, 140, 0, 0.4) !important;
+}
+
+.custom-input :deep(.v-field) {
+  border-radius: 12px;
+  font-size: 16px;
+}
+
+.custom-input :deep(.v-field--focused) {
+  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.1);
+}
+
+.quick-actions .v-btn {
+  transition: all 0.3s ease;
+}
+
+.quick-actions .v-btn:hover {
+  transform: translateY(-2px);
+}
+
+.qr-code-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.qr-code-container :deep(canvas) {
+  border-radius: 8px;
+}
+
+.qr-display {
+  animation: slideUp 0.5s ease-out;
+}
+
+.blur-dialog :deep(.v-overlay__scrim) {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.dialog-card {
+  overflow: hidden;
+  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes popIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8) translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.dialog-header {
+  position: relative;
+  overflow: hidden;
+}
+
+.dialog-header::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
+  animation: rotate 10s linear infinite;
+}
+
+@keyframes rotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.icon-wrapper {
+  display: inline-block;
+  animation: bounceIn 0.6s ease-out 0.2s both;
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.dialog-icon {
+  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
+}
+
+.success-header {
+  background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
+}
+
+.warning-header {
+  background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
+}
+
+.dialog-button {
+  text-transform: none;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.dialog-button:hover {
+  transform: translateY(-2px);
+}
+
+.stats-footer {
+  animation: slideUp 0.5s ease-out 0.3s both;
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.stat-card {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
+}
+
+.custom-snackbar {
+  margin-bottom: 16px;
+  margin-right: 16px;
+}
+
+.custom-snackbar :deep(.v-snackbar__wrapper) {
+  min-width: 300px;
+}
+
+/* Mobile Optimization */
+@media (max-width: 600px) {
+  .v-container.fill-height {
+    padding: 8px !important;
+  }
+  
+  .card-main {
+    margin: 0;
+  }
+  
+  .header-gradient {
+    padding: 24px 16px !important;
+  }
+  
+  .qr-placeholder {
+    max-width: 280px;
+    height: 280px;
+  }
+  
+  .stats-footer {
+    display: none;
+  }
+
+  .custom-tabs :deep(.v-tab) {
+    font-size: 0.75rem;
+    padding: 0 8px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/Dashboard.vue b/pages/Dashboard.vue
index b0ab2cd..cb53a67 100644
--- a/pages/Dashboard.vue
+++ b/pages/Dashboard.vue
@@ -1,114 +1,155 @@
 <template>
-  <v-container fluid class="pa-6 bg-white-lighten-4">
-    <div class="d-flex justify-space-between align-center mb-6">
+  <v-container fluid class="pa-8 dashboard-bg">
+    
+    <div class="d-flex justify-space-between align-center mb-10">
       <div>
-        <h1 class="text-h4 font-weight-bold">Dashboard</h1>
-        <p v-if="user" class="text-subtitle-1 text-grey-darken-1 mt-1">
-          Selamat Datang, {{ user.name || user.preferred_username }}!
+        <h1 class="text-h3 font-weight-black primary-text">
+          Antrean Dashboard
+        </h1>
+        <p v-if="user" class="text-subtitle-1 secondary-text mt-2">
+          Selamat Datang, 
+          <span class="font-weight-bold primary-accent">
+            {{ user.name || user.preferred_username }}
+          </span>! 🍊
         </p>
       </div>
       <div class="d-flex align-center">
-        <v-chip color="green-lighten-1" class="mr-2 pa-3 font-weight-bold">
-          <v-icon start icon="mdi-calendar"></v-icon>
+        
+        <v-menu offset-y>
+          <template v-slot:activator="{ props }">
+            <v-btn
+              v-bind="props"
+              color="#FF9B1B"
+              variant="flat"
+              class="text-caption font-weight-bold rounded-lg elevation-2 mr-4 export-btn"
+            >
+              <v-icon start icon="mdi-download-box-outline"></v-icon>
+              Export Data ({{ exportType }})
+              <v-icon end>mdi-menu-down</v-icon>
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-item 
+              v-for="(item, index) in exportOptions" 
+              :key="index"
+              @click="handleExport(item.type)"
+            >
+              <v-list-item-title>
+                <v-icon start :icon="item.icon"></v-icon>
+                {{ item.title }}
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+
+        <v-chip color="white" variant="flat" class="pa-4 font-weight-bold text-caption secondary-text rounded-lg date-chip">
+          <v-icon start icon="mdi-calendar-check-outline" class="primary-accent"></v-icon>
           {{ currentDate }}
         </v-chip>
       </div>
     </div>
 
-    <v-row class="mb-6">
+    <v-row class="mb-10">
       <v-col cols="12" sm="6" md="3">
-        <v-card class="pa-4 rounded-xl elevation-6" color="blue-lighten-1" theme="dark">
+        <v-card class="pa-6 rounded-xl elevation-3 hover-effect card-style" style="border-left: 4px solid #D17A4A;"> 
           <div class="d-flex align-center">
-            <v-icon size="64" class="mr-4">mdi-account-group</v-icon>
+            <v-icon size="48" class="mr-4 primary-accent">mdi-tablet-dashboard</v-icon>
             <div>
-              <div class="text-h4 font-weight-black">2635</div>
-              <div class="text-subtitle-1">Total Visitors</div>
+              <div class="text-h4 font-weight-black primary-accent">150</div>
+              <div class="text-caption text-uppercase font-weight-medium secondary-light mt-1">Total Antrean Online</div>
             </div>
           </div>
         </v-card>
       </v-col>
+
       <v-col cols="12" sm="6" md="3">
-        <v-card class="pa-4 rounded-xl elevation-6" color="cyan-lighten-1" theme="dark">
+        <v-card class="pa-6 rounded-xl elevation-3 hover-effect card-style" style="border-left: 4px solid #4A5F7A;"> 
           <div class="d-flex align-center">
-            <v-icon size="64" class="mr-4">mdi-account-multiple-plus</v-icon>
+            <v-icon size="48" class="mr-4 secondary-accent">mdi-account-hard-hat</v-icon>
             <div>
-              <div class="text-h4 font-weight-black">759</div>
-              <div class="text-subtitle-1">Offline Registrants</div>
+              <div class="text-h4 font-weight-black secondary-accent">100</div>
+              <div class="text-caption text-uppercase font-weight-medium secondary-light mt-1">Total Antrean MJKN</div>
             </div>
           </div>
         </v-card>
       </v-col>
+
       <v-col cols="12" sm="6" md="3">
-        <v-card class="pa-4 rounded-xl elevation-6" color="green-lighten-1" theme="dark">
+        <v-card class="pa-6 rounded-xl elevation-3 hover-effect card-style" style="border-left: 4px solid #D17A4A;"> 
           <div class="d-flex align-center">
-            <v-icon size="64" class="mr-4">mdi-account-multiple-plus-outline</v-icon>
+            <v-icon size="48" class="mr-4 primary-accent">mdi-account-group</v-icon>
             <div>
-              <div class="text-h4 font-weight-black">1876</div>
-              <div class="text-subtitle-1">Online Registrants</div>
+              <div class="text-h4 font-weight-black primary-accent">500</div>
+              <div class="text-caption text-uppercase font-weight-medium secondary-light mt-1">Total Kunjungan</div>
             </div>
           </div>
         </v-card>
       </v-col>
+
       <v-col cols="12" sm="6" md="3">
-        <v-card class="pa-4 rounded-xl elevation-6" color="orange-lighten-1" theme="dark">
+        <v-card class="pa-6 rounded-xl elevation-3 hover-effect card-style" style="border-left: 4px solid #4A5F7A;"> 
           <div class="d-flex align-center">
-            <v-icon size="64" class="mr-4">mdi-ticket</v-icon>
+            <v-icon size="48" class="mr-4 secondary-accent">mdi-timer-sand</v-icon>
             <div>
-              <div class="text-h4 font-weight-black">248</div>
-              <div class="text-subtitle-1">Total Tickets Printed</div>
+              <div class="text-h4 font-weight-black secondary-accent">7.5s</div>
+              <div class="text-caption text-uppercase font-weight-medium secondary-light mt-1">Avg. Check-in Time</div>
             </div>
           </div>
         </v-card>
       </v-col>
     </v-row>
-    <v-row>
+
+    <v-row class="mb-4">
       <v-col cols="12" md="6">
-        <v-card class="pa-4 rounded-xl elevation-6">
-          <v-card-title class="d-flex justify-space-between align-center">
-            <span class="text-h6 font-weight-bold">Grafik Jumlah Antrean</span>
-            <v-btn-toggle v-model="queueTimePeriod" mandatory divided variant="outlined" color="primary" class="text-caption">
-              <v-btn size="small" value="day">Hari</v-btn>
-              <v-btn size="small" value="week">Minggu</v-btn>
-              <v-btn size="small" value="month">Bulan</v-btn>
-              <v-btn size="small" value="year">Tahun</v-btn>
+        <v-card class="pa-6 rounded-xl elevation-3 card-style chart-card">
+          <v-card-title class="d-flex justify-space-between align-center px-0 pt-0 mb-4">
+            <span class="text-h6 font-weight-bold primary-text">Registration Trend</span>
+            <v-btn-toggle v-model="queueTimePeriod" mandatory variant="outlined" color="#D17A4A" class="text-caption rounded-lg">
+              <v-btn size="small" value="day">Day</v-btn>
+              <!-- <v-btn size="small" value="week">Week</v-btn>
+              <v-btn size="small" value="month">Month</v-btn> -->
             </v-btn-toggle>
           </v-card-title>
-          <v-card-text>
+          <v-card-text class="pa-0">
             <Bar
               :data="queueChartData"
               :options="queueChartOptions"
-              style="height: 300px"
+              style="height: 350px"
             />
           </v-card-text>
         </v-card>
       </v-col>
 
       <v-col cols="12" md="6">
-        <v-card class="pa-4 rounded-xl elevation-6">
-          <v-card-title class="d-flex justify-space-between align-center">
-            <span class="text-h6 font-weight-bold">Monthly Visitor Data</span>
+        <v-card class="pa-6 rounded-xl elevation-3 card-style chart-card">
+          <v-card-title class="d-flex justify-space-between align-center px-0 pt-0 mb-4">
+            <span class="text-h6 font-weight-bold primary-text">Total Registrasi Perbulan</span>
             <div>
               <v-chip
-                :color="activeYear === '2024' ? 'green-lighten-1' : 'grey-lighten-2'"
-                class="mr-2 text-caption font-weight-bold cursor-pointer"
+                :color="activeYear === '2024' ? '#D17A4A' : '#F5F5F5'"
+                :text-color="activeYear === '2024' ? 'white' : '#FF9B1B'"
+                variant="flat"
+                class="mr-2 text-caption font-weight-bold cursor-pointer transition-chip rounded-pill"
                 @click="changeYear('2024')"
               >
                 2024
               </v-chip>
               <v-chip
-                :color="activeYear === '2025' ? 'green-lighten-1' : 'grey-lighten-2'"
-                class="text-caption font-weight-bold cursor-pointer"
+                :color="activeYear === '2025' ? '#D17A4A' : '#F5F5F5'"
+                :text-color="activeYear === '2025' ? 'white' : '#FF9B1B'"
+                variant="flat"
+                class="text-caption font-weight-bold cursor-pointer transition-chip rounded-pill"
                 @click="changeYear('2025')"
               >
                 2025
               </v-chip>
             </div>
           </v-card-title>
-          <v-card-text>
+          <v-card-text class="pa-0">
             <Bar
               :data="barData"
               :options="barOptions"
-              style="height: 300px"
+              style="height: 350px"
             />
           </v-card-text>
         </v-card>
@@ -117,35 +158,35 @@
 
     <v-row>
       <v-col cols="12" md="6">
-        <v-card class="pa-4 rounded-xl elevation-6">
-          <v-card-title class="text-h6 font-weight-bold">Realtime Ticket Queue</v-card-title>
-          <v-card-text>
+        <v-card class="pa-6 rounded-xl elevation-3 card-style chart-card">
+          <v-card-title class="text-h6 font-weight-bold primary-text px-0 pt-0 mb-4">Realtime Check-in Velocity</v-card-title>
+          <v-card-text class="pa-0">
             <Line
               ref="realtimeChart"
               :data="initialLineData"
               :options="lineOptions"
-              style="height: 300px"
+              style="height: 350px"
             />
           </v-card-text>
         </v-card>
       </v-col>
       <v-col cols="12" md="6">
-        <v-card class="pa-4 rounded-xl elevation-6">
-          <v-card-title class="text-h6 font-weight-bold">Registrant Breakdown</v-card-title>
-          <v-card-text>
+        <v-card class="pa-6 rounded-xl elevation-3 card-style chart-card">
+          <v-card-title class="text-h6 font-weight-bold primary-text px-0 pt-0 mb-4">Registrant Type Breakdown</v-card-title>
+          <v-card-text class="d-flex justify-center align-center pa-0" style="height: 350px;">
             <Pie
               :data="pieData"
               :options="pieOptions"
-              style="height: 300px"
+              style="max-height: 100%; max-width: 100%;"
             />
           </v-card-text>
         </v-card>
       </v-col>
     </v-row>
 
-    <v-overlay v-model="isLoading" contained class="align-center justify-center">
-      <v-progress-circular indeterminate size="64" color="primary"></v-progress-circular>
-      <p class="mt-4">Loading dashboard...</p>
+    <v-overlay v-model="isLoading" contained class="align-center justify-center dashboard-bg">
+      <v-progress-circular indeterminate size="64" color="#D17A4A"></v-progress-circular>
+      <p class="mt-4 primary-text">Loading dashboard...</p>
     </v-overlay>
   </v-container>
 </template>
@@ -174,6 +215,7 @@ import {
   LineElement,
 } from 'chart.js';
 
+// Ensure this middleware setup is correct for your framework (e.g., Nuxt)
 definePageMeta({
   middleware:['auth']
 })
@@ -181,54 +223,59 @@ definePageMeta({
 // Register necessary Chart.js elements
 ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement, PointElement, LineElement);
 
-// Use the auth composable
+// --- KEYCLOAK/AUTH INTEGRATION ---
 const { user, isLoading, checkAuth, logout } = useAuth()
+const navigateTo = (path) => { console.log('Navigating to', path); };
+// ---------------------------------
+
+// --- EXPORT STATE ---
+const exportType = ref('JSON');
+const exportOptions = ref([
+  { title: 'JSON (.json)', type: 'json', icon: 'mdi-code-json' },
+  { title: 'CSV (.csv)', type: 'csv', icon: 'mdi-file-delimited' },
+  { title: 'Excel (.xlsx) - Server Only', type: 'excel', icon: 'mdi-file-excel' },
+  { title: 'PDF (.pdf) - Placeholder', type: 'pdf', icon: 'mdi-file-pdf' },
+]);
+// --------------------
+
 const isLoggingOut = ref(false)
 
-// Dashboard data
+// Dashboard state
 const currentDate = ref('');
 const activeYear = ref('2025');
-const queueTimePeriod = ref('month');
+const queueTimePeriod = ref('day'); 
 
-// --- MOCK DATA DINAMIS ANTREEAN (Tetap) ---
+// --- MOCK DATA FOR CHARTS ---
 const mockQueueData = ref([
-  // ... (data tetap sama)
-  { date: '2025-09-22', count: 120 },
-  { date: '2025-09-23', count: 150 },
-  { date: '2025-09-24', count: 135 },
-  { date: '2025-09-25', count: 160 },
-  { date: '2025-09-26', count: 145 },
-  { date: '2025-09-27', count: 170 },
-  { date: '2025-09-28', count: 180 },
-  { date: '2025-08-10', count: 300 },
-  { date: '2025-08-20', count: 350 },
-  { date: '2025-09-01', count: 400 },
-  { date: '2025-09-15', count: 450 },
-  { date: '2024-01-01', count: 1200 },
-  { date: '2024-06-01', count: 1800 },
-  { date: '2025-01-01', count: 2000 },
-  { date: '2025-06-01', count: 2500 },
+  { date: '2025-10-13', registrants: 300, attendees: 250 },
+  { date: '2025-10-14', registrants: 450, attendees: 400 },
+  { date: '2025-10-15', registrants: 500, attendees: 420 },
+  { date: '2025-10-16', registrants: 400, attendees: 350 },
+  { date: '2025-10-17', registrants: 550, attendees: 500 },
+  { date: '2025-10-18', registrants: 435, attendees: 380 },
 ]);
-// --- AKHIR MOCK DATA ANTREEAN ---
 
-// --- REFACTORED REALTIME LOGIC ---
-const realtimeChart = ref(null); // Ref untuk mengakses komponen Line
+// --- REALTIME CHART LOGIC ---
+const realtimeChart = ref(null); 
 const maxDataPoints = 10;
 let realtimeInterval = null;
 
-// Initial data structure (non-reactive for update function)
 const initialLineData = {
     labels: Array.from({ length: maxDataPoints }, (_, i) => 
-        dayjs().subtract((maxDataPoints - 1 - i) * 5, 'second').format('HH:mm:ss')
+        dayjs().subtract((maxDataPoints - 1 - i) * 10, 'second').format('HH:mm:ss')
     ),
     datasets: [
         {
-            label: 'Tickets Processed',
-            backgroundColor: '#FF5722',
-            borderColor: '#FF5722',
-            data: Array.from({ length: maxDataPoints }, () => Math.floor(Math.random() * 50) + 100),
-            fill: false,
-            tension: 0.1,
+            label: 'Check-ins/min',
+            backgroundColor: 'rgba(74, 95, 122, 0.15)', 
+            borderColor: '#5FB7FF', 
+            data: Array.from({ length: maxDataPoints }, () => Math.floor(Math.random() * 20) + 40),
+            fill: true,
+            tension: 0.3, 
+            borderWidth: 3, 
+            pointRadius: 4, 
+            pointHoverRadius: 6,
+            pointBackgroundColor: '#4A5F7A',
         },
     ],
 };
@@ -236,9 +283,7 @@ const initialLineData = {
 const lineOptions = ref({
     responsive: true,
     maintainAspectRatio: false,
-    animation: {
-        duration: 0 // Crucial: Disable animation for smooth realtime scrolling
-    },
+    animation: { duration: 0 },
     plugins: {
         legend: { display: true },
         title: { display: false }
@@ -246,9 +291,9 @@ const lineOptions = ref({
     scales: {
         y: {
             beginAtZero: true,
-            suggestedMax: 200,
-            title: { display: true, text: 'Count' },
-            grid: { display: true }
+            suggestedMax: 80,
+            title: { display: true, text: 'Check-ins per Minute' },
+            grid: { color: 'rgba(0, 0, 0, 0.05)' } 
         },
         x: {
             title: { display: true, text: 'Time (HH:MM:SS)' },
@@ -257,49 +302,28 @@ const lineOptions = ref({
     }
 });
 
-// Function to simulate realtime data update using chart.update()
 const updateRealtimeData = () => {
     const chart = realtimeChart.value?.chart;
     if (!chart) return;
-
-    // 1. Get the current data arrays
     const dataArray = chart.data.datasets[0].data;
     const labelArray = chart.data.labels;
-
-    // 2. Shift (remove) the oldest data point and label
     dataArray.shift();
     labelArray.shift();
-
-    // 3. Generate new data point and time label
-    const newDataPoint = Math.floor(Math.random() * 50) + 100;
+    const newDataPoint = Math.floor(Math.random() * 20) + 40; 
     const newTimeLabel = dayjs().format('HH:mm:ss');
-
-    // 4. Push the new data and label
     dataArray.push(newDataPoint);
     labelArray.push(newTimeLabel);
-
-    // 5. CRUCIAL: Tell Chart.js to redraw itself without destroying the instance
     chart.update(); 
 };
-// --- END REFACTORED REALTIME LOGIC ---
+// --- END REALTIME CHART LOGIC ---
 
-
-// Example data for both years (Tetap)
-const visitorData2024 = [150, 200, 350, 400, 380, 500, 550, 600, 520, 480, 650, 700];
-const visitorData2025 = [200, 250, 400, 450, 420, 550, 600, 650, 570, 520, 700, 750];
-
-// Check authentication and setup on page load
 onMounted(async () => {
   try {
     const sessionUser = await checkAuth()
     if (sessionUser) {
-      // Set current date
       const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
       currentDate.value = new Date().toLocaleDateString('id-ID', options);
-
-      // Start realtime data update interval
-      // Pastikan chart instance sudah siap sebelum memulai interval
-      realtimeInterval = setInterval(updateRealtimeData, 5000); 
+      realtimeInterval = setInterval(updateRealtimeData, 10000); 
     } else {
       await navigateTo('/LoginPage');
     }
@@ -309,34 +333,86 @@ onMounted(async () => {
   }
 });
 
-// Clear the interval when the component is unmounted
 onUnmounted(() => {
   if (realtimeInterval) {
     clearInterval(realtimeInterval);
   }
 });
 
-// Updated logout handler (Tetap)
-const handleLogout = async () => {
-  if (isLoggingOut.value) return
-  
-  try {
-    isLoggingOut.value = true
-    console.log('🚪 Dashboard logout initiated...')
-    await logout()
-  } catch (error) {
-    console.error('❌ Dashboard logout error:', error)
-  } finally {
-    isLoggingOut.value = false
-  }
-};
-
-// Function to change the active year (Tetap)
 const changeYear = (year) => {
   activeYear.value = year;
 };
 
-// --- LOGIKA UTAMA UNTUK GRAFIK ANTREEAN (Tetap) ---
+// --- DATA UTILITY FUNCTIONS ---
+const getKpiData = () => {
+  return [
+    { name: 'Antrean Online', value: 150 },
+    { name: 'Antrean MJKN', value: 100 },
+    { name: 'Total Kunjungan', value: 500 },
+    { name: 'Avg. Check-in Time', value: '7.5s' },
+  ];
+};
+
+const convertJsonToCsv = (jsonData, fields) => {
+  if (!jsonData.length) return '';
+  
+  const header = fields.join(',');
+  
+  const csv = jsonData.map(row => 
+    fields.map(fieldName => {
+      let value = row[fieldName];
+      if (typeof value === 'string') {
+        value = `"${value.replace(/"/g, '""')}"`;
+      }
+      return value;
+    }).join(',')
+  ).join('\n');
+
+  return header + '\n' + csv;
+};
+// --- END DATA UTILITY FUNCTIONS ---
+
+// --- EXPORT FUNCTION HANDLER ---
+const downloadFile = (data, filename, mimeType) => {
+  const dataStr = `data:${mimeType};charset=utf-8,` + encodeURIComponent(data);
+  const downloadAnchorNode = document.createElement('a');
+  downloadAnchorNode.setAttribute("href", dataStr);
+  downloadAnchorNode.setAttribute("download", filename);
+  document.body.appendChild(downloadAnchorNode);
+  downloadAnchorNode.click();
+  downloadAnchorNode.remove();
+}
+
+const handleExport = (type) => {
+  exportType.value = type.toUpperCase();
+  const filenamePrefix = "antrean_data_" + dayjs().format('YYYYMMDD');
+  
+  const dataToExport = mockQueueData.value;
+  
+  if (type === 'json') {
+    downloadFile(JSON.stringify(dataToExport, null, 2), `${filenamePrefix}.json`, 'application/json');
+    alert("Data Antrean berhasil diexport sebagai JSON! ✅");
+    
+  } else if (type === 'csv') {
+    const fields = ['date', 'registrants', 'attendees'];
+    const csvContent = convertJsonToCsv(dataToExport, fields);
+    
+    const kpiData = getKpiData().map(kpi => `# ${kpi.name}: ${kpi.value}`).join('\n');
+    const finalCsvContent = kpiData + '\n' + csvContent;
+    
+    downloadFile(finalCsvContent, `${filenamePrefix}.csv`, 'text/csv');
+    alert("Data Antrean berhasil diexport sebagai CSV! 📊");
+    
+  } else if (type === 'excel') {
+    alert("Excel (.xlsx) export requires a dedicated server endpoint. Simulating download... ⚠️");
+    
+  } else if (type === 'pdf') {
+    alert("PDF (.pdf) export requires client-side libraries (like jsPDF) or a server service. Simulating download... 📝");
+  }
+};
+// --- END EXPORT FUNCTION HANDLER ---
+
+// --- CHART DATA LOGIC ---
 const processQueueData = (data, period) => {
   const grouped = {};
   const sortedDates = data.map(item => ({
@@ -347,37 +423,49 @@ const processQueueData = (data, period) => {
   sortedDates.forEach(item => {
     let key;
     let label;
-
     if (period === 'day') {
       key = item.date.format('YYYY-MM-DD');
-      label = item.date.format('DD/MM');
+      label = item.date.format('ddd, DD/MM');
     } else if (period === 'week') {
       key = item.date.format('YYYY-WW');
-      label = `Wk ${item.date.week()} ${item.date.year()}`;
+      label = `Wk ${item.date.week()}`;
     } else if (period === 'month') {
       key = item.date.format('YYYY-MM');
       label = item.date.format('MMM YYYY');
-    } else if (period === 'year') {
-      key = item.date.format('YYYY');
-      label = item.date.format('YYYY');
     }
-
     if (!grouped[key]) {
-      grouped[key] = { label: label, count: 0 };
+      grouped[key] = { label: label, registrants: 0, attendees: 0 };
     }
-    grouped[key].count += item.count;
+    grouped[key].registrants += item.registrants;
+    grouped[key].attendees += item.attendees;
   });
 
   const finalLabels = Object.values(grouped).map(g => g.label);
-  const finalCounts = Object.values(grouped).map(g => g.count);
+  const finalRegistrants = Object.values(grouped).map(g => g.registrants);
+  const finalAttendees = Object.values(grouped).map(g => g.attendees);
 
   return {
     labels: finalLabels,
     datasets: [
       {
-        label: `Total Antrean per ${period}`,
-        backgroundColor: '#FFB300',
-        data: finalCounts,
+        label: `Registrants`,
+        backgroundColor: '#FFB95F', 
+        data: finalRegistrants,
+        yAxisID: 'y1',
+        type: 'bar',
+        borderRadius: 6,
+      },
+      {
+        label: `Attendees`,
+        backgroundColor: 'transparent', 
+        borderColor: '#5FB7FF',
+        data: finalAttendees,
+        yAxisID: 'y1',
+        type: 'line',
+        pointRadius: 5,
+        pointBackgroundColor: '#4A5F7A',
+        tension: 0.4,
+        borderWidth: 3,
       },
     ],
   };
@@ -392,66 +480,94 @@ const queueChartOptions = ref({
   responsive: true,
   maintainAspectRatio: false,
   plugins: {
-    legend: { display: true },
+    legend: { display: true, position: 'top' },
   },
   scales: {
-    y: {
+    y1: {
       beginAtZero: true,
-      grid: { display: true }
+      title: { display: true, text: 'Count' },
+      grid: { display: true, color: 'rgba(0, 0, 0, 0.05)' }
     },
     x: {
       grid: { display: false }
     }
   }
 });
-// --- AKHIR LOGIKA GRAFIK ANTREEAN ---
 
+const visitorData2024 = [150, 200, 350, 400, 380, 500, 550, 600, 520, 480, 650, 700];
+const visitorData2025 = [200, 250, 400, 450, 420, 550, 600, 650, 570, 520, 700, 750];
+const conversionRate2025 = [2.5, 3.1, 4.0, 4.5, 4.2, 5.5, 6.0, 5.8, 5.7, 5.2, 6.5, 7.5];
 
-// Computed property Monthly Visitor (Tetap)
 const barData = computed(() => {
   const dataForYear = activeYear.value === '2024' ? visitorData2024 : visitorData2025;
+  const conversionData = activeYear.value === '2024' ? [2.0, 2.5, 3.5, 3.8, 3.6, 4.5, 5.0, 5.2, 4.8, 4.5, 5.5, 6.0] : conversionRate2025;
+
   return {
     labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
     datasets: [
       {
-        label: `Total Visitors ${activeYear.value}`,
-        backgroundColor: '#2196F3',
+        label: `Total Registrants`,
+        backgroundColor: '#FFB95F', 
         data: dataForYear,
+        yAxisID: 'y1',
+        type: 'bar',
+        borderRadius: 6,
       },
+      {
+        label: `Conv. Rate (%)`,
+        borderColor: '#5FB7FF', 
+        backgroundColor: 'transparent',
+        data: conversionData,
+        yAxisID: 'y2',
+        type: 'line',
+        pointRadius: 5,
+        pointBackgroundColor: '#4A5F7A',
+        tension: 0.4,
+        borderWidth: 3,
+      }
     ],
   };
 });
 
-// Bar chart options (Tetap)
 const barOptions = ref({
   responsive: true,
   maintainAspectRatio: false,
   plugins: {
-    legend: { display: false },
+    legend: { display: true, position: 'top' },
   },
   scales: {
-    y: {
+    y1: {
+      position: 'left',
       beginAtZero: true,
+      title: { display: true, text: 'Registrants' },
       grid: { display: false }
     },
+    y2: {
+      position: 'right',
+      beginAtZero: true,
+      suggestedMax: 10,
+      title: { display: true, text: 'Conv. Rate (%)' },
+      grid: { drawOnChartArea: false } 
+    },
     x: {
       grid: { display: false }
     }
   }
 });
 
-// Pie chart data (Tetap)
 const pieData = ref({
   labels: ['Offline Registrants', 'Online Registrants'],
   datasets: [
     {
-      backgroundColor: ['#2196F3', '#4CAF50'],
+      backgroundColor: ['#5FB7FF', '#FFB95F'], 
+      hoverBackgroundColor: ['#1B98FF ', '#FF9B1B'], 
       data: [759, 1876],
+      borderWidth: 3, 
+      borderColor: '#ffffff',
     },
   ],
 });
 
-// Pie chart options (Tetap)
 const pieOptions = ref({
   responsive: true,
   maintainAspectRatio: false,
@@ -461,7 +577,9 @@ const pieOptions = ref({
         label: function(context) {
           const label = context.label || '';
           const value = context.parsed || 0;
-          return `${label}: ${value}`;
+          const total = context.dataset.data.reduce((a, b) => a + b, 0);
+          const percentage = ((value / total) * 100).toFixed(1);
+          return `${label}: ${value} (${percentage}%)`;
         }
       }
     }
@@ -470,9 +588,89 @@ const pieOptions = ref({
 </script>
 
 <style scoped>
+/* Color Palette */
+.dashboard-bg {
+  background-color: #FAFAFA;
+}
+
+.card-style {
+  background-color: #FFFFFF;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+/* Text Colors */
+.primary-text {
+  color: #2C3E50 !important;
+}
+
+.secondary-text {
+  color: #7B8794 !important;
+}
+
+.secondary-light {
+  color: #7B8794 !important;
+}
+
+.primary-accent {
+  color: #FF9B1B !important;
+}
+
+.secondary-accent {
+  color: #1B98FF !important;
+}
+
+/* Buttons & Interactive Elements */
+.export-btn {
+  transition: all 0.3s ease;
+  text-transform: none;
+}
+
+.export-btn:hover {
+  background-color: #E0916E !important;
+  transform: translateY(-1px);
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
 
+/* Card Hover Effect - Subtle and Clean */
+.hover-effect {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
+              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
 
+.hover-effect:hover {
+  transform: translateY(-3px); 
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; 
+}
+
+/* Chip Transition */
+.transition-chip {
+  transition: all 0.25s ease;
+}
+
+.transition-chip:hover {
+  transform: scale(1.05);
+}
+
+/* Date Chip Styling */
+.date-chip {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+/* Chart Card Fixed Height */
+.chart-card {
+  min-height: 480px;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-card .v-card-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
 </style>
\ No newline at end of file
diff --git a/pages/LoginPage.vue b/pages/LoginPage.vue
index ef7c1eb..2a7d129 100644
--- a/pages/LoginPage.vue
+++ b/pages/LoginPage.vue
@@ -1,78 +1,6 @@
-<!-- // Pages/LoginPage.vue -->
-
 <template>
   <v-container fluid fill-height class="login-background">
     
-    <!-- Navigation Bar -->
-    <v-app-bar class="navbar" flat>
-      <v-toolbar-title class="brand-logo">
-        <v-icon class="mr-2" color="white">mdi-hospital-building</v-icon>
-        <span class="font-weight-bold text-blue-darken-3">ANTREAN</span> <span class="font-weight-bold">RSSA</span>
-      </v-toolbar-title>
-      
-      <v-spacer></v-spacer>
-      
-      <!-- Navigation with Dropdown Menus -->
-      <v-menu offset-y>
-        <template v-slot:activator="{ props }">
-          <v-btn
-            variant="text"
-            color="white"
-            class="nav-link"
-            v-bind="props"
-          >
-            Tentang
-            <v-icon right small>mdi-chevron-down</v-icon>
-          </v-btn>
-        </template>
-        
-        <v-list class="nav-dropdown">
-          <v-list-item class="dropdown-item">
-            <v-icon class="mr-3">mdi-hospital-building</v-icon>
-            <v-list-item-title>Profil Rumah Sakit</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-
-      <v-menu offset-y>
-        <template v-slot:activator="{ props }">
-          <v-btn
-            variant="text"
-            color="white"
-            class="nav-link"
-            v-bind="props"
-          >
-            Kontak
-            <v-icon right small>mdi-chevron-down</v-icon>
-          </v-btn>
-        </template>
-        
-        <v-list class="nav-dropdown">
-          <v-list-item class="dropdown-item">
-            <v-icon class="mr-3">mdi-phone</v-icon>
-            <v-list-item-title>Hubungi Kami</v-list-item-title>
-          </v-list-item>
-          <v-list-item class="dropdown-item">
-            <v-icon class="mr-3">mdi-map-marker</v-icon>
-            <v-list-item-title>Alamat & Lokasi</v-list-item-title>
-          </v-list-item>
-          <v-list-item class="dropdown-item">
-            <v-icon class="mr-3">mdi-email</v-icon>
-            <v-list-item-title>Email</v-list-item-title>
-          </v-list-item>
-          <v-list-item class="dropdown-item">
-            <v-icon class="mr-3">mdi-help-circle</v-icon>
-            <v-list-item-title>Bantuan</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-      
-      <v-btn icon color="white" class="ml-4">
-        <v-icon>mdi-menu</v-icon>
-      </v-btn>
-    </v-app-bar>
-
-    <!-- Floating Medical Icons Background -->
     <div class="floating-medical-icon icon-1">
       <v-icon size="144">mdi-heart-pulse</v-icon>
     </div>
@@ -92,18 +20,16 @@
       <v-icon size="114">mdi-bandage</v-icon>
     </div>
 
-    <!-- Centered White Box with Both Sections -->
     <v-row class="fill-height align-center justify-center">
       <v-col cols="12" class="d-flex justify-center align-center">
         <v-card class="main-card white-card rounded-xl pa-0" max-width="1100" width="100%">
           <v-row class="ma-0">
-            <!-- Left Content Section -->
             <v-col cols="12" md="6" class="text-section-box d-flex align-center pa-8">
               <div class="hero-content">
                 <div class="logo-section mb-6">
                   <img
-                    src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp"
-                    alt="Logo Rumah Sakit"
+                    src="/AntreanLogobg.png" 
+                    alt="Antrean Logo"
                     class="hospital-logo-large mb-6"
                   />
                   <h1 class="hero-title-box">Sistem Terbaik</h1>
@@ -119,26 +45,22 @@
               </div>
             </v-col>
 
-            <!-- Right Login Section -->
             <v-col cols="12" md="6" class="login-section-box d-flex align-center pa-8">
               <div class="login-content w-100">
-                <!-- Header -->
                 <div class="text-center mb-6">
                   <h2 class="welcome-title-dark">SELAMAT DATANG KEMBALI</h2>
                   <p class="login-instruction-dark">MASUK UNTUK MELANJUTKAN</p>
                 </div>
 
-                <!-- Logo Section -->
                 <div class="d-flex flex-column align-center text-center mb-6">
-                  <span class="text-h5 font-weight-bold app-title-dark text-blue-darken-3">Antrean RSSA</span>
+                  <span class="text-h5 font-weight-bold app-title-dark">Antrean RSSA</span>
                   <img
-                    src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp"
-                    alt="Logo Rumah Sakit"
+                    src="/AntreanLogobg.png" 
+                    alt="Antrean Logo"
                     class="mt-3 hospital-logo"
                   />
                 </div>
 
-                <!-- Alert Messages -->
                 <v-alert v-if="errorMessage" type="error" class="mb-4" dismissible @click:close="errorMessage = ''">
                   {{ errorMessage }}
                 </v-alert>
@@ -147,12 +69,10 @@
                   {{ successMessage }}
                 </v-alert>
 
-                <!-- SSO Info -->
                 <div class="text-center mb-6">
                   <p class="sso-text-dark">Login menggunakan Single Sign-On</p>
                 </div>
 
-                <!-- Keycloak Login Button -->
                 <v-btn
                   @click="handleLogin"
                   class="login-btn"
@@ -169,7 +89,6 @@
                   <v-icon right>mdi-arrow-right</v-icon>
                 </v-btn>
 
-                <!-- Registration Section -->
                 <v-divider class="my-6 custom-divider-dark"></v-divider>
                 
                 <div class="text-center">
@@ -193,8 +112,7 @@
                     <v-btn
                       @click="showAdminContact = true"
                       variant="text"
-                      color="#0053AD"
-                      size="small"
+                      color="#FF9B1B" size="small"
                       class="contact-link-dark mt-1"
                     >
                       Hubungi Administrator
@@ -202,7 +120,6 @@
                   </div>
                 </div>
 
-                <!-- Password Help -->
                 <div class="text-center mt-4">
                   <span class="help-link-dark">Masalah dengan kata sandi Anda?</span>
                 </div>
@@ -213,53 +130,47 @@
       </v-col>
     </v-row>
 
-    <!-- Registration Information Dialog -->
     <v-dialog v-model="showRegistrationDialog" max-width="500">
       <v-card class="white-dialog rounded-xl">
-        <v-card-title class="text-h5 text-grey-darken-3 text-center pa-6 bg-grey-lighten-4">
-          <v-icon left color="#0053AD">mdi-account-plus</v-icon>
-          Pendaftaran Akun Baru
+        <v-card-title class="text-h5 text-center pa-6 bg-grey-lighten-4">
+          <v-icon left color="#FF9B1B">mdi-account-plus</v-icon> Pendaftaran Akun Baru
         </v-card-title>
-       
+        
         <v-card-text class="text-grey-darken-2 pa-6">
           <div class="text-center mb-4">
-            <v-icon size="64" color="#0053AD" class="mb-4">mdi-information</v-icon>
-          </div>
-         
+            <v-icon size="64" color="#FF9B1B" class="mb-4">mdi-information</v-icon> </div>
+          
           <p class="text-body-1 mb-4">
             Untuk mendaftar akun baru pada sistem Antrean RSSA, silakan ikuti langkah berikut:
           </p>
-         
+          
           <v-list class="transparent">
             <v-list-item class="text-grey-darken-2 px-0">
               <template v-slot:prepend>
-                <v-icon color="#0053AD">mdi-numeric-1-circle</v-icon>
-              </template>
+                <v-icon color="#FF9B1B">mdi-numeric-1-circle</v-icon> </template>
               <v-list-item-title class="text-grey-darken-2">
                 Hubungi Administrator IT Rumah Sakit
               </v-list-item-title>
             </v-list-item>
-           
+            
             <v-list-item class="text-grey-darken-2 px-0">
               <template v-slot:prepend>
-                <v-icon color="#0053AD">mdi-numeric-2-circle</v-icon>
-              </template>
+                <v-icon color="#FF9B1B">mdi-numeric-2-circle</v-icon> </template>
               <v-list-item-title class="text-grey-darken-2">
                 Siapkan dokumen identitas dan surat penugasan
               </v-list-item-title>
             </v-list-item>
-           
+            
             <v-list-item class="text-grey-darken-2 px-0">
               <template v-slot:prepend>
-                <v-icon color="#0053AD">mdi-numeric-3-circle</v-icon>
-              </template>
+                <v-icon color="#FF9B1B">mdi-numeric-3-circle</v-icon> </template>
               <v-list-item-title class="text-grey-darken-2">
                 Tunggu proses verifikasi dan aktivasi akun
               </v-list-item-title>
             </v-list-item>
           </v-list>
         </v-card-text>
-       
+        
         <v-card-actions class="pa-6 bg-grey-lighten-5">
           <v-spacer></v-spacer>
           <v-btn
@@ -272,8 +183,7 @@
           </v-btn>
           <v-btn
             @click="showRegistrationDialog = false; showAdminContact = true"
-            color="#0053AD"
-            rounded
+            color="#FF9B1B" rounded
           >
             <v-icon left>mdi-phone</v-icon>
             Hubungi Admin
@@ -282,24 +192,20 @@
       </v-card>
     </v-dialog>
 
-    <!-- Admin Contact Dialog -->
     <v-dialog v-model="showAdminContact" max-width="500">
       <v-card class="white-dialog rounded-xl">
-        <v-card-title class="text-h5 text-grey-darken-3 text-center pa-6 bg-grey-lighten-4">
-          <v-icon left color="#0053AD">mdi-account-tie</v-icon>
-          Kontak Administrator
+        <v-card-title class="text-h5 text-center pa-6 bg-grey-lighten-4">
+          <v-icon left color="#FF9B1B">mdi-account-tie</v-icon> Kontak Administrator
         </v-card-title>
-       
+        
         <v-card-text class="text-grey-darken-2 pa-6">
           <div class="text-center mb-4">
-            <v-icon size="64" color="#0053AD" class="mb-4">mdi-phone-settings</v-icon>
-          </div>
-         
+            <v-icon size="64" color="#FF9B1B" class="mb-4">mdi-phone-settings</v-icon> </div>
+          
           <v-list class="transparent">
             <v-list-item class="text-grey-darken-2 px-0 mb-2">
               <template v-slot:prepend>
-                <v-icon color="#0053AD">mdi-office-building</v-icon>
-              </template>
+                <v-icon color="#FF9B1B">mdi-office-building</v-icon> </template>
               <div>
                 <v-list-item-title class="text-grey-darken-2 font-weight-bold">
                   IT Support RSSA
@@ -309,11 +215,10 @@
                 </v-list-item-subtitle>
               </div>
             </v-list-item>
-           
+            
             <v-list-item class="text-grey-darken-2 px-0 mb-2">
               <template v-slot:prepend>
-                <v-icon color="#0053AD">mdi-phone</v-icon>
-              </template>
+                <v-icon color="#FF9B1B">mdi-phone</v-icon> </template>
               <div>
                 <v-list-item-title class="text-grey-darken-2">
                   (0341) 343343 ext. 1234
@@ -323,11 +228,10 @@
                 </v-list-item-subtitle>
               </div>
             </v-list-item>
-           
+            
             <v-list-item class="text-grey-darken-2 px-0 mb-2">
               <template v-slot:prepend>
-                <v-icon color="#0053AD">mdi-email</v-icon>
-              </template>
+                <v-icon color="#FF9B1B">mdi-email</v-icon> </template>
               <div>
                 <v-list-item-title class="text-grey-darken-2">
                   it-support@rssa.malang.go.id
@@ -337,11 +241,10 @@
                 </v-list-item-subtitle>
               </div>
             </v-list-item>
-           
+            
             <v-list-item class="text-grey-darken-2 px-0">
               <template v-slot:prepend>
-                <v-icon color="#0053AD">mdi-clock</v-icon>
-              </template>
+                <v-icon color="#FF9B1B">mdi-clock</v-icon> </template>
               <div>
                 <v-list-item-title class="text-grey-darken-2">
                   Senin - Jumat: 07:00 - 15:00
@@ -352,19 +255,18 @@
               </div>
             </v-list-item>
           </v-list>
-         
+          
           <v-alert
             type="info"
             variant="tonal"
             class="mt-4"
-            color="blue"
-          >
+            color="orange" >
             <div class="text-grey-darken-2">
               <strong>Catatan:</strong> Pendaftaran akun memerlukan verifikasi dokumen dan dapat memakan waktu 1-2 hari kerja.
             </div>
           </v-alert>
         </v-card-text>
-       
+        
         <v-card-actions class="pa-6 bg-grey-lighten-5">
           <v-spacer></v-spacer>
           <v-btn
@@ -377,8 +279,7 @@
           </v-btn>
           <v-btn
             @click="copyContactInfo"
-            color="#0053AD"
-            rounded
+            color="#FF9B1B" rounded
           >
             <v-icon left>mdi-content-copy</v-icon>
             Salin Info
@@ -406,6 +307,15 @@ const successMessage = ref<string>('')
 const showRegistrationDialog = ref<boolean>(false)
 const showAdminContact = ref<boolean>(false)
 
+// Hospital Profile URL
+const HOSPITAL_PROFILE_URL = 'https://rsusaifulanwar.jatimprov.go.id/v2/'
+
+// Function to navigate to external hospital profile site
+// NOTE: This function is no longer called in the template since the menu item was removed.
+const goToHospitalProfile = (): void => {
+  window.open(HOSPITAL_PROFILE_URL, '_blank')
+}
+
 // Check URL parameters for errors
 const route = useRoute()
 onMounted(() => {
@@ -414,7 +324,7 @@ onMounted(() => {
   }
 })
 
-// Custom login handler
+// Custom login handler (pointing to Keycloak SSO logic)
 const handleLogin = async (): Promise<void> => {
   isLoading.value = true
   errorMessage.value = ''
@@ -422,7 +332,8 @@ const handleLogin = async (): Promise<void> => {
 
   try {
     console.log('Starting login process...')
-   
+    
+    // Call API route to initiate Keycloak login process
     const response = await $fetch<LoginResponse>('/api/auth/keycloak-login', {
       method: 'POST'
     })
@@ -430,7 +341,8 @@ const handleLogin = async (): Promise<void> => {
     if (response?.success && response?.data?.authUrl) {
       console.log('Redirecting to Keycloak...')
       successMessage.value = 'Redirecting to Keycloak...'
-     
+      
+      // Redirect the user to the Keycloak authorization URL
       setTimeout(() => {
         window.location.href = response.data!.authUrl
       }, 500)
@@ -439,31 +351,44 @@ const handleLogin = async (): Promise<void> => {
     }
   } catch (error: any) {
     console.error('Login error:', error)
+    // Display the error message
     errorMessage.value = `Login failed: ${error.message || 'Please try again.'}`
   } finally {
-    isLoading.value = false
+    // Only set isLoading back to false if no redirect is happening
+    if (!successMessage.value.includes('Redirecting')) {
+        isLoading.value = false
+    }
   }
 }
 
 // Copy contact information to clipboard
 const copyContactInfo = async (): Promise<void> => {
+  // Updated contact info block from user's provided code
   const contactInfo = `
 IT Support RSSA
 Telepon: (0341) 343343 ext. 1234
 Email: it-support@rssa.malang.go.id
-Jam Operasional: Senin - Jumat, 08:00 - 16:00
+Jam Operasional: Senin - Jumat, 07:00 - 15:00
   `.trim()
- 
+  
   try {
+    // Use the Clipboard API
     await navigator.clipboard.writeText(contactInfo)
     successMessage.value = 'Informasi kontak berhasil disalin!'
     showAdminContact.value = false
-   
+    
+    // Clear the success message after a short delay
     setTimeout(() => {
       successMessage.value = ''
     }, 3000)
   } catch (error) {
     console.error('Failed to copy contact info:', error)
+    // Fallback or simple alert for error
+    errorMessage.value = 'Gagal menyalin informasi kontak. Silakan coba salin manual.'
+    
+    setTimeout(() => {
+      errorMessage.value = ''
+    }, 3000)
   }
 }
 </script>
diff --git a/pages/MonitoringPasien/monitoringPasien.vue b/pages/MonitoringPasien/monitoringPasien.vue
new file mode 100644
index 0000000..6dea9b0
--- /dev/null
+++ b/pages/MonitoringPasien/monitoringPasien.vue
@@ -0,0 +1,252 @@
+<template>
+    <v-container fluid class="pa-0">
+    
+    <div class="pa-4 pb-0"> 
+      <v-toolbar flat color="#B3E5FC" class="floating-toolbar custom-padding"> <v-toolbar-title class="text-h6 font-weight-bold text-blue-darken-3">
+          <v-icon left class="mr-2" color="blue-darken-3">mdi-heart-pulse</v-icon>
+          Monitoring Pasien
+        </v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-chip color="blue-darken-1" text-color="white" class="font-weight-medium admin-chip"> <v-icon start>mdi-account-tie</v-icon>
+          Admin
+        </v-chip>
+      </v-toolbar>
+    </div>
+
+    <v-container class="mt-6">
+
+      <v-card flat class="mb-4">
+        <v-tabs
+          v-model="activeTab"
+          color="primary"
+          align-tabs="start"
+          show-arrows
+          class="mb-4"
+        >
+          <v-tab value="all" @click="filterByStatus('all')">
+            Semua Pasien <v-badge color="grey-lighten-1" :content="totalCount" inline class="ml-2"></v-badge>
+          </v-tab>
+          <v-tab value="Menunggu Poli" @click="filterByStatus('Menunggu Poli')">
+            Menunggu Poli <v-badge color="orange-lighten-1" :content="waitingCount" inline class="ml-2"></v-badge>
+          </v-tab>
+          <v-tab value="Diperiksa Dokter" @click="filterByStatus('Diperiksa Dokter')">
+            Diperiksa Dokter <v-badge color="green-lighten-1" :content="examiningCount" inline class="ml-2"></v-badge>
+          </v-tab>
+           <v-tab value="Selesai Pelayanan" @click="filterByStatus('Selesai Pelayanan')">
+            Selesai Pelayanan <v-badge color="blue-lighten-1" :content="doneCount" inline class="ml-2"></v-badge>
+          </v-tab>
+        </v-tabs>
+      </v-card>
+      
+      <v-card class="mb-6 pa-4 elevation-1">
+        <v-row class="align-center">
+          <v-col cols="12" sm="3">
+            <v-text-field label="No. RM" v-model="filters.rm_number" variant="outlined" density="compact" hide-details></v-text-field>
+          </v-col>
+          <v-col cols="12" sm="3">
+            <v-text-field label="No. Kode QR" v-model="filters.qr_code" variant="outlined" density="compact" hide-details></v-text-field>
+          </v-col>
+          <v-col cols="12" sm="2">
+            <v-text-field label="No. Antrean" v-model="filters.queue_number" variant="outlined" density="compact" hide-details type="number"></v-text-field>
+          </v-col>
+          <v-col cols="12" sm="2">
+            <v-select label="Layanan" v-model="filters.service" :items="['Klinik Jiwa', 'Radiologi', 'Fisioterapi', 'Klinik Umum']" variant="outlined" density="compact" hide-details clearable></v-select>
+          </v-col>
+          <v-col cols="12" sm="2">
+            <v-btn color="blue-lighten-1" block height="40" @click="applyFilters">Cari</v-btn>
+          </v-col>
+        </v-row>
+      </v-card>
+
+      <v-data-table
+        :headers="headers"
+        :items="paginatedPatients" 
+        :items-per-page="10"
+        class="elevation-1"
+        :search="currentSearchTerm" 
+      >
+        <template v-slot:item.status="{ item }">
+          <v-chip :color="getStatusColor(item.status)" size="small" class="font-weight-medium" label>
+            {{ item.status }}
+          </v-chip>
+        </template>
+        <template v-slot:item.aksi="{ item }">
+          <v-btn size="small" color="orange-darken-1" dark @click="viewPatient(item.id)">
+            Lihat
+          </v-btn>
+        </template>
+        <template v-slot:no-data>
+          <v-alert :value="true" color="info" icon="mdi-information-outline">
+            Tidak ada data pasien untuk ditampilkan.
+          </v-alert>
+        </template>
+      </v-data-table>
+    </v-container>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+definePageMeta({
+  middleware:['auth']
+})
+
+const router = useRouter();
+
+// === STATE MANAGEMENT ===
+const activeTab = ref('all');
+
+// Filter Model: Menampung input dari form pencarian
+const filters = ref({
+    rm_number: '',
+    qr_code: '',
+    queue_number: '', // Filter baru
+    service: null, // Filter Layanan
+});
+
+// State untuk menyimpan hasil filtering
+const filteredPatientList = ref([]);
+const currentSearchTerm = ref('');
+
+// Table Headers
+const headers = [
+  { title: 'No. RM', key: 'rm_number' },
+  { title: 'Nama', key: 'name' }, 
+  { title: 'No. Antrean', key: 'queue_number' },
+  { title: 'Layanan', key: 'service' },
+  { title: 'Status', key: 'status' },
+  { title: 'Aksi', key: 'aksi', sortable: false },
+];
+
+// Mock Patient Data
+const ALL_PATIENTS_DATA = [
+  { id: '11111111', rm_number: '11111111', name: 'Ragil Bayu N.', queue_number: 1, service: 'Klinik Jiwa', status: 'Diperiksa Dokter', qr_code: 'QR123' },
+  { id: '22222222', rm_number: '22222222', name: 'Siti Aisyah', queue_number: 5, service: 'Radiologi', status: 'Menunggu Poli', qr_code: 'QR456' },
+  { id: '33333333', rm_number: '33333333', name: 'Ahmad Dani', queue_number: 2, service: 'Klinik Jiwa', status: 'Selesai Pelayanan', qr_code: 'QR789' },
+  { id: '44444444', rm_number: '44444444', name: 'Dewi Sartika', queue_number: 6, service: 'Fisioterapi', status: 'Menunggu Poli', qr_code: 'QR101' },
+  { id: '55555555', rm_number: '55555555', name: 'Joko Susilo', queue_number: 3, service: 'Klinik Umum', status: 'Diperiksa Dokter', qr_code: 'QR112' },
+  { id: '66666666', rm_number: '66666666', name: 'Budi Santoso', queue_number: 4, service: 'Radiologi', status: 'Menunggu Poli', qr_code: 'QR131' },
+];
+
+// Initialize the filtered list with all data
+filteredPatientList.value = [...ALL_PATIENTS_DATA];
+
+// === FILTERING LOGIC ===
+
+// 1. Logic Pencarian Gabungan saat tombol "Cari" ditekan
+const applyFilters = () => {
+    // 1. Filter berdasarkan teks di semua kolom yang relevan (RM, QR, Antrean, Nama)
+    let textSearch = '';
+    
+    // Gabungkan semua nilai filter menjadi satu string pencarian
+    if (filters.value.rm_number) textSearch += filters.value.rm_number.toLowerCase() + ' ';
+    if (filters.value.qr_code) textSearch += filters.value.qr_code.toLowerCase() + ' ';
+    if (filters.value.queue_number) textSearch += filters.value.queue_number.toString().toLowerCase() + ' ';
+    
+    // Vuetify v-data-table memiliki fitur pencarian bawaan (di properti `search`).
+    // Kita gunakan fitur ini untuk pencarian berbasis teks (No. RM, QR, Antrean).
+    currentSearchTerm.value = textSearch.trim();
+
+    // 2. Filter berdasarkan Layanan (Service), yang tidak didukung oleh `v-data-table` search
+    let results = ALL_PATIENTS_DATA;
+
+    if (filters.value.service) {
+        results = results.filter(p => p.service === filters.value.service);
+    }
+    
+    // Terapkan hasil filter Layanan
+    filteredPatientList.value = results;
+
+    // Reset status tab (penting agar hasil pencarian tampil terlepas dari tab yang aktif)
+    activeTab.value = 'all'; 
+};
+
+// 2. Logic Filter Status (saat tab ditekan)
+const filterByStatus = (status) => {
+    // Pastikan status tab diperbarui
+    activeTab.value = status;
+    
+    // Clear the text search term when switching tabs
+    currentSearchTerm.value = '';
+
+    if (status === 'all') {
+        filteredPatientList.value = ALL_PATIENTS_DATA;
+    } else {
+        filteredPatientList.value = ALL_PATIENTS_DATA.filter(p => p.status === status);
+    }
+
+    // Clear form filters (opsional, tetapi membuat UX lebih jelas)
+    filters.value.rm_number = '';
+    filters.value.qr_code = '';
+    filters.value.queue_number = '';
+    filters.value.service = null;
+};
+
+// === COMPUTED PROPERTIES ===
+
+// Hitungan untuk Badge Tab
+const listForCounts = computed(() => {
+    // Gunakan ALL_PATIENTS_DATA untuk hitungan badge agar hitungan selalu stabil
+    return ALL_PATIENTS_DATA;
+});
+
+const totalCount = computed(() => listForCounts.value.length);
+const waitingCount = computed(() => listForCounts.value.filter(p => p.status === 'Menunggu Poli').length);
+const examiningCount = computed(() => listForCounts.value.filter(p => p.status === 'Diperiksa Dokter').length);
+const doneCount = computed(() => listForCounts.value.filter(p => p.status === 'Selesai Pelayanan').length);
+
+// Data yang ditampilkan di tabel adalah data yang sudah difilter
+const paginatedPatients = computed(() => {
+    // Jika ada filter status yang aktif (setelah menekan tab)
+    if (activeTab.value !== 'all') {
+        return filteredPatientList.value.filter(p => p.status === activeTab.value);
+    }
+    
+    // Jika tidak ada filter status yang aktif, tampilkan hasil dari applyFilters()
+    return filteredPatientList.value;
+});
+
+// === UTILITIES & NAVIGATION ===
+
+// Utility function to set color based on status
+const getStatusColor = (status) => {
+  if (status === 'Diperiksa Dokter') return 'green-darken-1';
+  if (status === 'Menunggu Poli') return 'orange-darken-1';
+  if (status === 'Selesai Pelayanan') return 'blue-darken-2';
+  return 'grey';
+};
+
+// Function to navigate to the detailed patient information page
+const viewPatient = (patientId) => {
+  router.push(`/MonitoringPasien/Pasien/${patientId}`);
+};
+</script>
+
+<style scoped>
+.floating-toolbar {
+  border-radius: 9999px; 
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); 
+  height: 64px !important;
+}
+
+/* Jarak PENTING: Tambahkan padding horizontal ke toolbar */
+.floating-toolbar.custom-padding {
+    padding: 0 16px; /* Memberi jarak 16px di kiri dan kanan */
+}
+
+/* Penyesuaian agar teks dan ikon kontras dengan soft blue background */
+.v-toolbar-title {
+    margin-left: 0 !important; /* Reset default margin */
+}
+
+/* Pastikan chip Admin tidak mepet */
+.admin-chip {
+    margin-right: 0 !important; /* Reset default margin */
+}
+
+.v-tab.v-tab--selected {
+  font-weight: 600; 
+}
+</style>
\ No newline at end of file
diff --git a/pages/MonitoringPasien/pasien/[id].vue b/pages/MonitoringPasien/pasien/[id].vue
new file mode 100644
index 0000000..695df6d
--- /dev/null
+++ b/pages/MonitoringPasien/pasien/[id].vue
@@ -0,0 +1,298 @@
+<template>
+  <v-container fluid class="pa-0">
+
+    <div class="pa-4 pb-0"> 
+      <v-toolbar flat color="#B3E5FC" class="floating-toolbar custom-padding"> 
+        <v-toolbar-title class="text-h6 font-weight-bold text-blue-darken-3">
+          <v-icon left class="mr-2" color="blue-darken-3">mdi-account-details</v-icon>
+          Informasi Pasien
+        </v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn
+            color="orange-darken-1"
+            dark
+            variant="flat"
+            size="small"
+            @click="$router.go(-1)"
+            prepend-icon="mdi-arrow-left"
+            class="admin-chip" 
+        >
+            Kembali
+        </v-btn>
+      </v-toolbar>
+    </div>
+
+    <v-container class="mt-6">
+      
+      <v-card class="mb-6 pa-6 elevation-4 rounded-lg" color="white">
+        <v-row class="align-center mb-4">
+            <v-col cols="12" md="8">
+                <div class="d-flex align-center mb-2">
+                    <v-icon size="36" color="blue-darken-2" class="mr-3">mdi-account-circle</v-icon>
+                    <div>
+                        <div class="text-caption text-uppercase text-grey-darken-1">Nama Pasien</div>
+                        <div class="text-h5 font-weight-black text-blue-darken-4">{{ patient.name }}</div>
+                    </div>
+                </div>
+                <div class="d-flex align-center">
+                    <v-icon size="24" color="grey-darken-1" class="mr-3">mdi-numeric</v-icon>
+                    <div>
+                        <div class="text-caption text-uppercase text-grey-darken-1">Nomor Rekam Medis</div>
+                        <v-chip color="orange-darken-1" size="large" class="font-weight-bold">{{ patient.rm_number }}</v-chip>
+                    </div>
+                </div>
+            </v-col>
+            <v-col cols="12" md="4" class="d-flex justify-md-end">
+                <v-chip :color="patient.status === 'Aktif' ? 'green-darken-1' : 'grey-darken-1'" size="x-large" class="font-weight-bold px-6 py-2">
+                    <v-icon start>mdi-progress-check</v-icon> 
+                    Status: {{ patient.status }}
+                </v-chip>
+            </v-col>
+        </v-row>
+        
+        <v-divider class="my-4"></v-divider>
+
+        <v-row>
+          <v-col cols="12" sm="6" md="4" class="py-1">
+            <div class="d-flex align-center">
+                <v-icon class="mr-3" color="light-blue-darken-2">mdi-calendar</v-icon>
+                <div>
+                  <div class="text-caption text-uppercase text-grey-darken-1">Tanggal Lahir</div>
+                  <div class="font-weight-medium text-subtitle-1">{{ patient.dob }}</div>
+                </div>
+            </div>
+          </v-col>
+          <v-col cols="12" sm="6" md="4" class="py-1">
+            <div class="d-flex align-center">
+                <v-icon class="mr-3" color="light-blue-darken-2">mdi-phone</v-icon>
+                <div>
+                  <div class="text-caption text-uppercase text-grey-darken-1">No Telepon</div>
+                  <div class="font-weight-medium text-subtitle-1">{{ patient.phone }}</div>
+                </div>
+            </div>
+          </v-col>
+          <v-col cols="12" sm="12" md="4" class="py-1">
+            <div class="d-flex align-center">
+                <v-icon class="mr-3" color="light-blue-darken-2">mdi-map-marker</v-icon>
+                <div>
+                  <div class="text-caption text-uppercase text-grey-darken-1">Alamat</div>
+                  <div class="font-weight-medium text-subtitle-1">{{ patient.address }}</div>
+                </div>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card>
+      
+      
+      <h2 class="text-h5 mb-4 font-weight-bold text-blue-darken-3">Tiket Pelayanan Aktif</h2>
+      
+      <v-row class="ticket-row">
+        
+        <v-col 
+            cols="12" 
+            sm="6"    
+            md="4"   
+            lg="3"    
+            v-for="ticket in patient.activeTickets" 
+            :key="ticket.title"
+        >
+          <MonitorPasienTicketCard 
+            :title="ticket.title" 
+            :color="ticket.color"
+            :steps="ticket.steps" 
+            :current-step-label="ticket.currentStepLabel"
+          />
+        </v-col>
+        
+        <v-col v-if="!patient.activeTickets || patient.activeTickets.length === 0" cols="12">
+            <v-card class="pa-6 text-center" variant="tonal" color="grey-lighten-2">
+                <v-icon size="48" color="grey">mdi-ticket-off-outline</v-icon>
+                <div class="text-subtitle-1 text-grey-darken-1 mt-2">Pasien ini tidak memiliki tiket pelayanan aktif saat ini.</div>
+            </v-card>
+        </v-col>
+        
+      </v-row>
+    </v-container>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+
+definePageMeta({
+  middleware:['auth']
+})
+// ===============================================
+// JSON MOCK DATA STRUCTURE (Tetap sama)
+// ===============================================
+const mockPatientData = [
+  { 
+    id: '11111111', 
+    name: 'Ragil Bayu N. Wibowo',
+    rm_number: '11111111',
+    dob: '1 Juni 1967',
+    phone: '0851-4563-2145',
+    address: 'Jalan Sumpah Pemuda No. 12, Jakarta',
+    status: 'Aktif',
+    activeTickets: [
+        // 1. TIKET JIWA
+        {
+            title: 'Klinik JIWA (Antrean: 1)',
+            color: 'orange-darken-1',
+            currentStepLabel: 'Klinik Jiwa', 
+            steps: [
+                { label: 'Daftar', date: '15-8-2023', time: '15.01' },
+                { label: 'Check in', date: '15-8-2023', time: '07.58' },
+                { label: 'Loket 1/3', date: '15-8-2023', time: '08.51' },
+                { label: 'Klinik Jiwa', date: '15-8-2023', time: '09.45' },
+                { label: 'Apotek', date: '-', time: '-' },
+                { label: 'Selesai', date: '-', time: '-' },
+            ]
+        },
+        // 2. TIKET RADIOLOGI
+        {
+            title: 'Penunjang RADIOLOGI (Antrean: 5)',
+            color: 'blue-darken-2',
+            currentStepLabel: 'Loket 5/6/7', 
+            steps: [
+                { label: 'Daftar', date: '15-8-2023', time: '15.01' },
+                { label: 'Check in', date: '15-8-2023', time: '07.58' },
+                { label: 'Loket 5/6/7', date: '15-8-2023', time: '08.51' },
+                { label: 'Tunggu Radiologi', date: '-', time: '-' },
+                { label: 'Selesai', date: '-', time: '-' },
+            ]
+        },
+        // 3. TIKET GIZI
+        {
+            title: 'Klinik GIZI (Antrean: 12)',
+            color: 'purple-darken-1',
+            currentStepLabel: 'Konsultasi Gizi', 
+            steps: [
+                { label: 'Daftar', date: '16-8-2023', time: '07.00' },
+                { label: 'Tunggu Panggilan', date: '16-8-2023', time: '07.20' },
+                { label: 'Konsultasi Gizi', date: '16-8-2023', time: '07.45' },
+                { label: 'Selesai', date: '-', time: '-' },
+            ]
+        },
+        // 4. TIKET FISIOTERAPI
+        {
+            title: 'Fisioterapi (Antrean: 2)',
+            color: 'teal-darken-1',
+            currentStepLabel: 'Daftar', 
+            steps: [
+                { label: 'Daftar', date: '16-8-2023', time: '10.00' },
+                { label: 'Fisioterapi', date: '-', time: '-' },
+                { label: 'Selesai', date: '-', time: '-' },
+            ]
+        },
+        // 5. TIKET LABORATORIUM
+        {
+            title: 'Penunjang LABORATORIUM (Antrean: 7)',
+            color: 'red-darken-2',
+            currentStepLabel: 'Pemeriksaan Sampel', 
+            steps: [
+                { label: 'Daftar', date: '17-8-2023', time: '06.30' },
+                { label: 'Administrasi', date: '17-8-2023', time: '06.40' },
+                { label: 'Tunggu Panggilan', date: '17-8-2023', time: '06.50' },
+                { label: 'Pengambilan Sampel', date: '17-8-2023', time: '07.10' },
+                { label: 'Pemeriksaan Sampel', date: '17-8-2023', time: '07.30' },
+                { label: 'Input Hasil', date: '-', time: '-' },
+                { label: 'Verifikasi Dokter', date: '-', time: '-' },
+                { label: 'Ambil Hasil', date: '-', time: '-' },
+                { label: 'Selesai', date: '-', time: '-' },
+            ]
+        },
+    ]
+  },
+  { 
+    id: '33333333', 
+    name: 'Joko Susilo',
+    rm_number: '33333333',
+    dob: '20 Desember 1995',
+    phone: '0878-1122-3344',
+    address: 'Jl. Pahlawan No. 5, Surabaya',
+    status: 'Tidak Aktif',
+    activeTickets: [] 
+  },
+];
+
+
+// ===============================================
+// MAIN SCRIPT LOGIC
+// ===============================================
+const route = useRoute();
+const patientId = route.params.id; 
+
+const patient = ref({
+  name: 'Memuat...',
+  address: 'Memuat...',
+  phone: 'Memuat...',
+  rm_number: patientId,
+  dob: 'Memuat...',
+  status: 'Memuat',
+  activeTickets: []
+});
+
+const fetchPatientData = () => {
+  const data = mockPatientData.find(p => p.id === patientId);
+
+  if (data) {
+    patient.value = data;
+  } else {
+    patient.value = {
+      name: 'Data Pasien Tidak Ditemukan',
+      address: '-',
+      phone: '-',
+      rm_number: patientId,
+      dob: '-',
+      status: 'Error',
+      activeTickets: []
+    };
+  }
+};
+
+onMounted(fetchPatientData);
+</script>
+
+<style scoped>
+/* =============================================== */
+/* FLOATING TOOLBAR STYLES */
+/* =============================================== */
+.floating-toolbar {
+  border-radius: 9999px; 
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); 
+  height: 64px !important;
+}
+
+.floating-toolbar.custom-padding {
+    padding: 0 16px; 
+}
+
+.admin-chip {
+    margin-right: 0 !important; 
+}
+
+/* =============================================== */
+/* TICKET CARD ALIGNMENT STYLES (Fix Tinggi Card) */
+/* =============================================== */
+.ticket-row {
+  /* Mengaktifkan flex container pada row */
+  display: flex;
+  /* Agar item (v-col) menyesuaikan tinggi item tertinggi */
+  align-items: stretch;
+}
+
+/* Pastikan v-col children juga menggunakan full height */
+.ticket-row > .v-col {
+    display: flex;
+    flex-direction: column;
+}
+
+/* =============================================== */
+/* TIMELINE STYLES (Jika ada) */
+/* =============================================== */
+.v-timeline-item {
+    padding-bottom: 8px !important;
+}
+</style>
\ No newline at end of file
diff --git a/pages/Profile/Pengaturan.vue.txt b/pages/Profile/Pengaturan.vue.txt
new file mode 100644
index 0000000..6332cc7
--- /dev/null
+++ b/pages/Profile/Pengaturan.vue.txt
@@ -0,0 +1,1126 @@
+<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/Profile/Profil.vue b/pages/Profile/Profil.vue
new file mode 100644
index 0000000..2bcbd45
--- /dev/null
+++ b/pages/Profile/Profil.vue
@@ -0,0 +1,800 @@
+<template>
+  <v-container fluid class="pa-0">
+    <!-- Hero Header Section -->
+    <div class="hero-header">
+      <v-container class="py-8">
+        <div class="d-flex align-center">
+          <v-icon color="white" size="40" class="mr-3">mdi-account-circle</v-icon>
+          <div>
+            <h1 class="text-h4 font-weight-bold text-white mb-1">Profil Saya</h1>
+            <p class="text-body-1 text-white opacity-90">Kelola informasi profil dan pengaturan akun Anda</p>
+          </div>
+        </div>
+      </v-container>
+    </div>
+
+    <v-container class="content-container pb-12">
+      <v-row>
+        <!-- Left Sidebar - Profile Card -->
+        <v-col cols="12" lg="4">
+          <v-card class="rounded-xl elevation-8 sticky-card profile-card">
+            <div class="text-center profile-content">
+              <div class="profile-avatar-container">
+                <v-avatar size="140" class="profile-avatar elevation-8">
+                  <v-img
+                    :src="profileData.picture || 'https://i.pravatar.cc/300?img=68'"
+                    alt="Profile Picture"
+                  ></v-img>
+                </v-avatar>
+                <v-btn
+                  icon
+                  size="small"
+                  color="orange-darken-2"
+                  class="avatar-edit-btn elevation-4"
+                  @click="openPhotoDialog"
+                >
+                  <v-icon size="18">mdi-camera</v-icon>
+                </v-btn>
+              </div>
+
+              <h2 class="text-h5 font-weight-bold mb-2">{{ profileData.name }}</h2>
+              <p class="text-body-2 text-grey-darken-1 mb-1">@{{ profileData.username }}</p>
+              <p class="text-body-2 text-grey mb-4">{{ profileData.email }}</p>
+              
+              <v-chip
+                color="success"
+                variant="flat"
+                size="small"
+                prepend-icon="mdi-check-circle"
+                class="mb-4"
+              >
+                Akun Terverifikasi
+              </v-chip>
+
+              <v-divider class="my-4"></v-divider>
+
+              <!-- Quick Info -->
+              <div class="text-left px-6">
+                <div class="info-item mb-3">
+                  <v-icon size="20" color="blue-darken-2" class="mr-2">mdi-identifier</v-icon>
+                  <span class="text-body-2 text-grey-darken-1">ID: {{ profileData.id }}</span>
+                </div>
+                <div class="info-item mb-3">
+                  <v-icon size="20" color="orange-darken-2" class="mr-2">mdi-calendar-check</v-icon>
+                  <span class="text-body-2 text-grey-darken-1">Bergabung: {{ profileData.joinDate }}</span>
+                </div>
+                <div class="info-item">
+                  <v-icon size="20" color="green-darken-2" class="mr-2">mdi-clock-outline</v-icon>
+                  <span class="text-body-2 text-grey-darken-1">Login: {{ profileData.lastLogin }}</span>
+                </div>
+              </div>
+            </div>
+
+            <v-card-actions class="pa-4">
+              <v-btn
+                color="blue-darken-2"
+                variant="outlined"
+                block
+                class="rounded-lg"
+                prepend-icon="mdi-cog"
+                @click="navigateTo('/Profile/Pengaturan')"
+              >
+                Pengaturan Akun
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+
+        <!-- Right Content - Profile Details -->
+        <v-col cols="12" lg="8">
+          <!-- Personal Information -->
+          <v-card class="rounded-xl elevation-4 mb-4">
+            <v-card-title class="d-flex align-center pa-6 pb-4">
+              <v-icon color="blue-darken-2" class="mr-2">mdi-account-details</v-icon>
+              <span class="font-weight-bold">Informasi Pribadi</span>
+              <v-spacer></v-spacer>
+              <v-btn
+                v-if="!isEditing"
+                color="orange-darken-2"
+                variant="flat"
+                size="small"
+                class="rounded-lg"
+                prepend-icon="mdi-pencil"
+                @click="startEdit"
+              >
+                Edit
+              </v-btn>
+            </v-card-title>
+            <v-divider></v-divider>
+            
+            <v-card-text class="pa-6">
+              <v-form ref="profileForm">
+                <v-row>
+                  <v-col cols="12" md="6">
+                    <label class="text-caption text-grey-darken-1 font-weight-bold mb-1 d-block">NAMA LENGKAP</label>
+                    <v-text-field
+                      v-model="profileData.name"
+                      placeholder="Masukkan nama lengkap"
+                      prepend-inner-icon="mdi-account"
+                      variant="outlined"
+                      density="comfortable"
+                      color="blue-darken-2"
+                      :readonly="!isEditing"
+                      hide-details="auto"
+                      class="mb-4"
+                    ></v-text-field>
+                  </v-col>
+
+                  <v-col cols="12" md="6">
+                    <label class="text-caption text-grey-darken-1 font-weight-bold mb-1 d-block">USERNAME</label>
+                    <v-text-field
+                      v-model="profileData.username"
+                      placeholder="Masukkan username"
+                      prepend-inner-icon="mdi-at"
+                      variant="outlined"
+                      density="comfortable"
+                      color="blue-darken-2"
+                      :readonly="!isEditing"
+                      hide-details="auto"
+                      class="mb-4"
+                    ></v-text-field>
+                  </v-col>
+
+                  <v-col cols="12" md="6">
+                    <label class="text-caption text-grey-darken-1 font-weight-bold mb-1 d-block">EMAIL</label>
+                    <v-text-field
+                      v-model="profileData.email"
+                      placeholder="Masukkan email"
+                      prepend-inner-icon="mdi-email"
+                      variant="outlined"
+                      density="comfortable"
+                      color="blue-darken-2"
+                      :readonly="!isEditing"
+                      hide-details="auto"
+                      class="mb-4"
+                    ></v-text-field>
+                  </v-col>
+
+                  <v-col cols="12" md="6">
+                    <label class="text-caption text-grey-darken-1 font-weight-bold mb-1 d-block">NOMOR TELEPON</label>
+                    <v-text-field
+                      v-model="profileData.phone"
+                      placeholder="Masukkan nomor telepon"
+                      prepend-inner-icon="mdi-phone"
+                      variant="outlined"
+                      density="comfortable"
+                      color="blue-darken-2"
+                      :readonly="!isEditing"
+                      hide-details="auto"
+                      class="mb-4"
+                    ></v-text-field>
+                  </v-col>
+
+                  <v-col cols="12">
+                    <label class="text-caption text-grey-darken-1 font-weight-bold mb-1 d-block">BIO</label>
+                    <v-textarea
+                      v-model="profileData.bio"
+                      placeholder="Ceritakan tentang diri Anda"
+                      prepend-inner-icon="mdi-text"
+                      variant="outlined"
+                      color="blue-darken-2"
+                      rows="3"
+                      :readonly="!isEditing"
+                      hide-details="auto"
+                    ></v-textarea>
+                  </v-col>
+                </v-row>
+              </v-form>
+            </v-card-text>
+
+            <v-divider v-if="isEditing"></v-divider>
+            <v-card-actions v-if="isEditing" class="pa-6 pt-4">
+              <v-spacer></v-spacer>
+              <v-btn
+                variant="outlined"
+                color="grey-darken-1"
+                class="rounded-lg px-6"
+                @click="cancelEdit"
+              >
+                Batal
+              </v-btn>
+              <v-btn
+                color="blue-darken-2"
+                variant="flat"
+                class="rounded-lg px-8"
+                prepend-icon="mdi-check"
+                @click="saveProfile"
+                :loading="isSaving"
+              >
+                Simpan Perubahan
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+
+          <!-- Security Section -->
+          <v-card class="rounded-xl elevation-4 mb-4">
+            <v-card-title class="d-flex align-center pa-6 pb-4">
+              <v-icon color="orange-darken-2" class="mr-2">mdi-shield-check</v-icon>
+              <span class="font-weight-bold">Keamanan</span>
+            </v-card-title>
+            <v-divider></v-divider>
+            
+            <v-card-text class="pa-6">
+              <v-list class="transparent">
+                <v-list-item
+                  class="rounded-lg mb-2 px-4"
+                  prepend-icon="mdi-lock-reset"
+                  @click="openPasswordDialog"
+                >
+                  <v-list-item-title class="font-weight-medium">Ubah Password</v-list-item-title>
+                  <v-list-item-subtitle class="text-caption">Perbarui password akun Anda</v-list-item-subtitle>
+                  <template v-slot:append>
+                    <v-icon color="grey">mdi-chevron-right</v-icon>
+                  </template>
+                </v-list-item>
+
+                <v-list-item
+                  class="rounded-lg mb-2 px-4"
+                  prepend-icon="mdi-two-factor-authentication"
+                >
+                  <v-list-item-title class="font-weight-medium">Autentikasi Dua Faktor</v-list-item-title>
+                  <v-list-item-subtitle class="text-caption">Tingkatkan keamanan akun</v-list-item-subtitle>
+                  <template v-slot:append>
+                    <v-switch
+                      v-model="twoFactorEnabled"
+                      color="blue-darken-2"
+                      hide-details
+                      inset
+                      @change="toggleTwoFactor"
+                    ></v-switch>
+                  </template>
+                </v-list-item>
+
+                <v-list-item
+                  class="rounded-lg px-4"
+                  prepend-icon="mdi-devices"
+                  @click="openDevicesDialog"
+                >
+                  <v-list-item-title class="font-weight-medium">Perangkat Aktif</v-list-item-title>
+                  <v-list-item-subtitle class="text-caption">Kelola perangkat yang terhubung</v-list-item-subtitle>
+                  <template v-slot:append>
+                    <v-chip size="small" color="success" variant="flat">{{ activeSessions.length }} Perangkat</v-chip>
+                  </template>
+                </v-list-item>
+              </v-list>
+            </v-card-text>
+          </v-card>
+
+          <!-- Preferences Section -->
+          <v-card class="rounded-xl elevation-4">
+            <v-card-title class="d-flex align-center pa-6 pb-4">
+              <v-icon color="blue-darken-2" class="mr-2">mdi-tune</v-icon>
+              <span class="font-weight-bold">Preferensi</span>
+            </v-card-title>
+            <v-divider></v-divider>
+            
+            <v-card-text class="pa-6">
+              <v-list class="transparent">
+                <v-list-item class="rounded-lg mb-2 px-4" prepend-icon="mdi-bell">
+                  <v-list-item-title class="font-weight-medium">Notifikasi Email</v-list-item-title>
+                  <v-list-item-subtitle class="text-caption">Terima update via email</v-list-item-subtitle>
+                  <template v-slot:append>
+                    <v-switch
+                      v-model="emailNotifications"
+                      color="orange-darken-2"
+                      hide-details
+                      inset
+                    ></v-switch>
+                  </template>
+                </v-list-item>
+
+                <v-list-item class="rounded-lg mb-2 px-4" prepend-icon="mdi-theme-light-dark">
+                  <v-list-item-title class="font-weight-medium">Tema Gelap</v-list-item-title>
+                  <v-list-item-subtitle class="text-caption">Aktifkan mode gelap</v-list-item-subtitle>
+                  <template v-slot:append>
+                    <v-switch
+                      v-model="darkMode"
+                      color="blue-darken-2"
+                      hide-details
+                      inset
+                    ></v-switch>
+                  </template>
+                </v-list-item>
+
+                <v-list-item class="rounded-lg px-4" prepend-icon="mdi-web">
+                  <v-list-item-title class="font-weight-medium">Bahasa</v-list-item-title>
+                  <v-list-item-subtitle class="text-caption">Indonesia</v-list-item-subtitle>
+                  <template v-slot:append>
+                    <v-icon color="grey">mdi-chevron-right</v-icon>
+                  </template>
+                </v-list-item>
+              </v-list>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    Change Password Dialog
+    <v-dialog v-model="passwordDialog" max-width="500" persistent>
+      <v-card class="rounded-xl">
+        <v-card-title class="pa-6 pb-4">
+          <div class="d-flex align-center">
+            <v-icon color="orange-darken-2" class="mr-2">mdi-lock-reset</v-icon>
+            <span class="font-weight-bold">Ubah Password</span>
+          </div>
+        </v-card-title>
+        <v-divider></v-divider>
+        
+        <v-card-text class="pa-6">
+          <v-form ref="passwordForm">
+            <label class="text-caption text-grey-darken-1 font-weight-bold mb-1 d-block">PASSWORD SAAT INI</label>
+            <v-text-field
+              v-model="passwordData.current"
+              type="password"
+              prepend-inner-icon="mdi-lock"
+              variant="outlined"
+              density="comfortable"
+              color="blue-darken-2"
+              hide-details="auto"
+              class="mb-4"
+            ></v-text-field>
+
+            <label class="text-caption text-grey-darken-1 font-weight-bold mb-1 d-block">PASSWORD BARU</label>
+            <v-text-field
+              v-model="passwordData.new"
+              type="password"
+              prepend-inner-icon="mdi-lock-plus"
+              variant="outlined"
+              density="comfortable"
+              color="blue-darken-2"
+              hide-details="auto"
+              class="mb-4"
+            ></v-text-field>
+
+            <label class="text-caption text-grey-darken-1 font-weight-bold mb-1 d-block">KONFIRMASI PASSWORD</label>
+            <v-text-field
+              v-model="passwordData.confirm"
+              type="password"
+              prepend-inner-icon="mdi-lock-check"
+              variant="outlined"
+              density="comfortable"
+              color="blue-darken-2"
+              hide-details="auto"
+            ></v-text-field>
+          </v-form>
+        </v-card-text>
+
+        <v-divider></v-divider>
+        <v-card-actions class="pa-6 pt-4">
+          <v-spacer></v-spacer>
+          <v-btn
+            variant="outlined"
+            color="grey-darken-1"
+            class="rounded-lg"
+            @click="passwordDialog = false"
+          >
+            Batal
+          </v-btn>
+          <v-btn
+            color="orange-darken-2"
+            variant="flat"
+            class="rounded-lg px-6"
+            @click="changePassword"
+            :loading="isChangingPassword"
+          >
+            Ubah Password
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Active Devices Dialog -->
+    <v-dialog v-model="devicesDialog" max-width="700" scrollable>
+      <v-card class="rounded-xl">
+        <v-card-title class="pa-6 pb-4">
+          <div class="d-flex align-center">
+            <v-icon color="blue-darken-2" class="mr-2">mdi-devices</v-icon>
+            <span class="font-weight-bold">Perangkat Aktif</span>
+          </div>
+        </v-card-title>
+        <v-divider></v-divider>
+        
+        <v-card-text class="pa-0" style="max-height: 500px;">
+          <v-list class="py-0">
+            <v-list-item
+              v-for="(session, index) in activeSessions"
+              :key="index"
+              class="py-4 px-6"
+            >
+              <template v-slot:prepend>
+                <v-avatar :color="session.current ? 'success' : 'blue-grey-lighten-4'" size="48">
+                  <v-icon :color="session.current ? 'white' : 'blue-grey-darken-2'">
+                    {{ session.icon }}
+                  </v-icon>
+                </v-avatar>
+              </template>
+
+              <v-list-item-title class="font-weight-bold mb-1">
+                {{ session.device }}
+                <v-chip v-if="session.current" size="x-small" color="success" class="ml-2">
+                  Sesi Ini
+                </v-chip>
+              </v-list-item-title>
+              <v-list-item-subtitle class="text-caption">
+                <div>{{ session.location }}</div>
+                <div class="text-grey-darken-1 mt-1">
+                  <v-icon size="12">mdi-clock-outline</v-icon>
+                  {{ session.lastActive }}
+                </div>
+              </v-list-item-subtitle>
+
+              <template v-slot:append v-if="!session.current">
+                <v-btn
+                  icon="mdi-close-circle"
+                  size="small"
+                  variant="text"
+                  color="error"
+                  @click="removeSession(index)"
+                ></v-btn>
+              </template>
+            </v-list-item>
+          </v-list>
+        </v-card-text>
+
+        <v-divider></v-divider>
+        <v-card-actions class="pa-6 pt-4">
+          <v-btn
+            color="error"
+            variant="outlined"
+            class="rounded-lg"
+            prepend-icon="mdi-logout-variant"
+            @click="logoutAllDevices"
+          >
+            Keluar dari Semua Perangkat
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn
+            variant="text"
+            class="rounded-lg"
+            @click="devicesDialog = false"
+          >
+            Tutup
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Photo Upload Dialog -->
+    <v-dialog v-model="photoDialog" max-width="400">
+      <v-card class="rounded-xl">
+        <v-card-title class="pa-6 pb-4">
+          <div class="d-flex align-center">
+            <v-icon color="blue-darken-2" class="mr-2">mdi-camera</v-icon>
+            <span class="font-weight-bold">Ubah Foto Profil</span>
+          </div>
+        </v-card-title>
+        <v-divider></v-divider>
+        
+        <v-card-text class="pa-6 text-center">
+          <v-avatar size="150" class="mb-4">
+            <v-img :src="profileData.picture"></v-img>
+          </v-avatar>
+          <v-file-input
+            label="Pilih foto baru"
+            variant="outlined"
+            prepend-icon=""
+            prepend-inner-icon="mdi-image"
+            accept="image/*"
+            hide-details
+          ></v-file-input>
+        </v-card-text>
+
+        <v-divider></v-divider>
+        <v-card-actions class="pa-6 pt-4">
+          <v-btn
+            color="error"
+            variant="text"
+            class="rounded-lg"
+          >
+            Hapus Foto
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn
+            variant="outlined"
+            color="grey-darken-1"
+            class="rounded-lg"
+            @click="photoDialog = false"
+          >
+            Batal
+          </v-btn>
+          <v-btn
+            color="blue-darken-2"
+            variant="flat"
+            class="rounded-lg px-6"
+          >
+            Simpan
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Success Snackbar -->
+    <v-snackbar
+      v-model="snackbar"
+      :color="snackbarColor"
+      location="top"
+      timeout="3000"
+      class="snackbar-custom"
+    >
+      <div class="d-flex align-center">
+        <v-icon class="mr-2">{{ snackbarIcon }}</v-icon>
+        <span>{{ snackbarMessage }}</span>
+      </div>
+      <template v-slot:actions>
+        <v-btn
+          variant="text"
+          size="small"
+          icon="mdi-close"
+          @click="snackbar = false"
+        ></v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import { navigateTo } from '#app';
+
+definePageMeta({
+  middleware: 'auth'
+});
+
+const isEditing = ref(false);
+const isSaving = ref(false);
+const isChangingPassword = ref(false);
+const snackbar = ref(false);
+const snackbarMessage = ref('');
+const snackbarColor = ref('success');
+
+const passwordDialog = ref(false);
+const devicesDialog = ref(false);
+const photoDialog = ref(false);
+
+const twoFactorEnabled = ref(false);
+const emailNotifications = ref(true);
+const darkMode = ref(false);
+
+const snackbarIcon = computed(() => {
+  return snackbarColor.value === 'success' ? 'mdi-check-circle' : 'mdi-alert-circle';
+});
+
+const profileData = reactive({
+  id: 'USR-12345678',
+  name: 'John Doe',
+  username: 'johndoe',
+  email: 'john.doe@example.com',
+  phone: '+62 812 3456 7890',
+  bio: 'Passionate developer and tech enthusiast. Love building beautiful and functional web applications.',
+  picture: 'https://i.pravatar.cc/300?img=68',
+  joinDate: '15 Januari 2024',
+  lastLogin: '16 Oktober 2025, 10:30 AM'
+});
+
+const passwordData = reactive({
+  current: '',
+  new: '',
+  confirm: ''
+});
+
+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 originalData = ref({});
+
+const startEdit = () => {
+  originalData.value = { ...profileData };
+  isEditing.value = true;
+};
+
+const cancelEdit = () => {
+  Object.assign(profileData, originalData.value);
+  isEditing.value = false;
+};
+
+const saveProfile = async () => {
+  isSaving.value = true;
+  
+  try {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    // TODO: Replace with actual API call
+    // await $fetch('/api/profile/update', {
+    //   method: 'PUT',
+    //   body: profileData
+    // });
+    
+    originalData.value = { ...profileData };
+    isEditing.value = false;
+    snackbarMessage.value = 'Profil berhasil diperbarui!';
+    snackbarColor.value = 'success';
+    snackbar.value = true;
+  } catch (error) {
+    snackbarMessage.value = 'Gagal memperbarui profil!';
+    snackbarColor.value = 'error';
+    snackbar.value = true;
+  } finally {
+    isSaving.value = false;
+  }
+};
+
+const openPhotoDialog = () => {
+  photoDialog.value = true;
+};
+
+const openPasswordDialog = () => {
+  passwordDialog.value = true;
+  passwordData.current = '';
+  passwordData.new = '';
+  passwordData.confirm = '';
+};
+
+const changePassword = async () => {
+  if (passwordData.new !== passwordData.confirm) {
+    snackbarMessage.value = 'Password baru tidak cocok!';
+    snackbarColor.value = 'error';
+    snackbar.value = true;
+    return;
+  }
+
+  isChangingPassword.value = true;
+  try {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    // TODO: Replace with actual API call
+    
+    passwordDialog.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 openDevicesDialog = () => {
+  devicesDialog.value = true;
+};
+
+const removeSession = (index) => {
+  activeSessions.value.splice(index, 1);
+  snackbarMessage.value = 'Perangkat berhasil dihapus dari sesi aktif';
+  snackbarColor.value = 'success';
+  snackbar.value = true;
+};
+
+const logoutAllDevices = () => {
+  // Keep only current session
+  activeSessions.value = activeSessions.value.filter(s => s.current);
+  devicesDialog.value = false;
+  snackbarMessage.value = 'Berhasil keluar dari semua perangkat lain';
+  snackbarColor.value = 'success';
+  snackbar.value = true;
+};
+
+const toggleTwoFactor = () => {
+  const status = twoFactorEnabled.value ? 'diaktifkan' : 'dinonaktifkan';
+  snackbarMessage.value = `Autentikasi dua faktor ${status}`;
+  snackbarColor.value = 'info';
+  snackbar.value = true;
+};
+
+// Initialize original data
+originalData.value = { ...profileData };
+</script>
+
+<style scoped>
+.hero-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 50%, #f57c00 100%);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  position: relative;
+  z-index: 1;
+}
+
+.content-container {
+  margin-top: 40px;
+}
+
+.sticky-card {
+  position: sticky;
+  top: 80px;
+}
+
+.profile-card {
+  overflow: visible;
+}
+
+.profile-content {
+  padding-top: 0;
+  padding-bottom: 20px;
+}
+
+.profile-avatar-container {
+  position: relative;
+  display: inline-block;
+  margin-top: -70px;
+  margin-bottom: 20px;
+}
+
+.profile-avatar {
+  border: 6px solid white;
+  background: white;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.avatar-edit-btn {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  width: 32px;
+  height: 32px;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+}
+
+label {
+  letter-spacing: 0.5px;
+}
+
+.v-list-item {
+  transition: background-color 0.2s;
+}
+
+.v-list-item:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.snackbar-custom {
+  font-weight: 500;
+}
+
+@media (max-width: 1280px) {
+  .sticky-card {
+    position: relative;
+    top: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/verifikasiAkun/VerifikasiAkun.vue b/pages/verifikasiAkun/VerifikasiAkun.vue
index 3113121..ccbf554 100644
--- a/pages/verifikasiAkun/VerifikasiAkun.vue
+++ b/pages/verifikasiAkun/VerifikasiAkun.vue
@@ -1,115 +1,138 @@
 <template>
   <v-app>
     <v-card 
-      class="elevation-8 rounded-xl header-banner mx-6 mt-6 mb-n6" 
+      class="elevation-3 rounded-xl header-banner mx-6 mt-6 mb-n6" 
       style="position: relative; z-index: 10;"
     >
-      <v-container fluid class="py-4 px-6 d-flex align-center justify-space-between">
+      <v-container fluid class="py-5 px-6 d-flex align-center justify-space-between">
         <div class="d-flex align-center">
-          <v-icon size="36" color="white" class="mr-3">mdi-shield-account-outline</v-icon>
-          <h1 class="text-h5 font-weight-bold text-white">Verifikasi Akun Pasien</h1>
+          <div class="icon-container">
+            <v-icon size="44" class="primary-icon mr-4">mdi-shield-check</v-icon>
+          </div>
+          <div>
+            <h1 class="text-h3 font-weight-black primary-text mb-1">Verifikasi Akun</h1>
+            <p class="text-subtitle-1 secondary-text mb-0">Manajemen Pasien Digital</p>
+          </div>
         </div>
         
-        <v-chip color="light-blue-lighten-4" class="text-blue-darken-4 font-weight-bold" variant="flat" rounded="lg">
-          <v-icon start>mdi-account-circle</v-icon>
-          Admin Aktif
+        <v-chip color="#5FB7FF" class="text-white font-weight-black px-5" variant="flat" rounded="xl" size="large">
+          <v-icon start color="white">mdi-account-star</v-icon>
+          Admin
         </v-chip>
       </v-container>
     </v-card>
     
-    <v-main class="bg-white"> 
-      <v-container fluid class="pa-6 pt-12 pb-12">
+    <v-main class="bg-main"> 
+      <v-container fluid class="pa-6 pt-8 pb-12">
 
-        <v-card class="pa-0 mb-6 elevation-4 rounded-lg">
+        <v-card class="pa-0 mb-6 elevation-3 rounded-xl overflow-hidden card-style">
           
-          <v-row class="ma-0 pa-4 align-center bg-white border-b-sm">
-            <v-col cols="12" sm="6" class="py-1">
+          <v-row class="ma-0 pa-6 align-center search-section">
+            <v-col cols="12" sm="6" class="py-2">
               <v-text-field
                   v-model="search"
                   density="comfortable"
-                  label="Pencarian Pasien..."
+                  label="Cari pasien berdasarkan nama atau RM..."#FFB95F
                   prepend-inner-icon="mdi-magnify"
                   variant="outlined"
                   hide-details
                   single-line
+                  color="#D17A4A"
+                  bg-color="white"
+                  class="search-field text-body-1"
                 ></v-text-field>
             </v-col>
-            <v-col cols="12" sm="6" class="py-1">
+            <v-col cols="12" sm="6" class="py-2">
               <v-tabs
                 v-model="filterStatus"
-                color="orange-darken-1"
+                color="#D17A4A"
                 align-tabs="end"
-                class="pt-0"
+                class="pt-0 filter-tabs"
+                slider-color="#D17A4A"
               >
-                 <v-tab :value="0" class="font-weight-bold text-caption text-sm-button">
-                  SEMUA PASIEN <v-chip size="small" color="blue-grey-darken-1" class="ml-2">{{ patients.length }}</v-chip>
+                 <v-tab :value="0" class="font-weight-bold text-button">
+                   SEMUA <v-chip size="small" color="#7B8794" class="ml-2 text-white">{{ patients.length }}</v-chip>
                 </v-tab>
-                <v-tab :value="1" class="font-weight-bold text-caption text-sm-button">
-                  BELUM VERIFIKASI <v-chip size="small" color="orange-darken-1" class="ml-2">{{ unverifiedPatients.length }}</v-chip>
+                <v-tab :value="1" class="font-weight-bold text-button">
+                   PENDING <v-chip size="small" color="#D17A4A" class="ml-2 text-white">{{ unverifiedPatients.length }}</v-chip>
                 </v-tab>
-                <v-tab :value="2" class="font-weight-bold text-caption text-sm-button">
-                  TERVERIFIKASI <v-chip size="small" color="blue-darken-1" class="ml-2">{{ verifiedPatients.length }}</v-chip>
+                <v-tab :value="2" class="font-weight-bold text-button">
+                   VERIFIED <v-chip size="small" color="#4A5F7A" class="ml-2 text-white">{{ verifiedPatients.length }}</v-chip>
                 </v-tab>
               </v-tabs>
             </v-col>
           </v-row>
 
-          <v-card-text class="pa-0">
+          <v-card-text class="pa-0 bg-white">
             <v-list lines="two" class="pa-0">
               <v-list-item
                 v-for="(patient, index) in filteredPatients"
                 :key="patient.rm"
-                class="border-b"
-                :class="{ 'bg-blue-grey-lighten-5': patient.status === 'Terverifikasi', 'hover:bg-orange-lighten-5': patient.status !== 'Terverifikasi' }"
+                class="patient-item py-5 px-6"
+                :class="{ 'verified-item': patient.status === 'Terverifikasi' }"
               >
-                <v-list-item-title class="text-h6 font-weight-bold mb-1 d-flex align-center">
-                    <v-icon :color="patient.status === 'Terverifikasi' ? 'blue' : 'orange'" class="mr-3" size="28">
-                      {{ patient.status === 'Terverifikasi' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
+                <template v-slot:prepend>
+                  <v-avatar :color="patient.status === 'Terverifikasi' ? '#32A3FF' : '#FFA532'" size="64" class="patient-avatar">
+                    <v-icon size="36" color="white">
+                      {{ patient.status === 'Terverifikasi' ? 'mdi-check-decagram' : 'mdi-clock-alert' }}
                     </v-icon>
+                  </v-avatar>
+                </template>
+
+                <v-list-item-title class="text-h5 font-weight-black mb-2 primary-text">
                     {{ patient.nama }}
                 </v-list-item-title>
 
-                <v-list-item-subtitle class="mt-1 ml-9">
-                  <v-row dense class="text-caption text-md-body-2">
-                    <v-col cols="12" md="3" class="py-0 text-grey-darken-1">
-                      RM: <span class="font-weight-medium text-blue-darken-2">{{ patient.rm }}</span>
+                <v-list-item-subtitle class="mt-2">
+                  <v-row dense class="text-body-1">
+                    <v-col cols="12" sm="3" md="2" class="py-1"> 
+                      <v-chip size="default" color="#E3F2FD" class="font-weight-bold chip-rm" variant="flat">
+                        <v-icon start size="18" color="#4A5F7A">mdi-file-document</v-icon>
+                        <span style="color: #4A5F7A;">{{ patient.rm }}</span>
+                      </v-chip>
                     </v-col>
-                    <v-col cols="12" md="4" class="py-0 text-grey-darken-1">
-                      Alamat: {{ patient.alamat }}
+                    
+                    <v-col cols="12" sm="5" md="6" class="py-1 secondary-text d-flex align-center"> 
+                      <v-icon size="18" class="mr-2" color="#7B8794">mdi-map-marker</v-icon>
+                      <span class="text-body-1">{{ patient.alamat }}</span>
                     </v-col>
-                    <v-col cols="12" md="3" class="py-0 text-grey-darken-1">
-                      Telp: <span class="text-blue-darken-2">{{ patient.telepon || '-' }}</span>
+                    
+                    <v-col cols="12" sm="4" md="4" class="py-1 secondary-text d-flex align-center"> 
+                      <v-icon size="18" class="mr-2" color="#7B8794">mdi-phone</v-icon>
+                      <span class="text-body-1">{{ patient.telepon || 'Belum diisi' }}</span>
                     </v-col>
                   </v-row>
-                </v-list-item-subtitle>
+                </v-list-item-subtitle> 
 
                 <template v-slot:append>
                   <v-btn
                     v-if="patient.status === 'Belum Terverifikasi'"
-                    color="orange-darken-1"
-                    size="large"
+                    color="#FFA532"
+                    size="x-large"
                     @click="openDaftarModal(patient)"
-                    prepend-icon="mdi-account-plus"
+                    prepend-icon="mdi-qrcode-scan"
                     variant="flat"
-                    class="font-weight-bold elevation-3"
+                    class="font-weight-black elevation-2 action-btn px-8 text-h6 text-white"
+                    rounded="xl"
                   >
-                    DAFTARKAN
+                    VERIFIKASI
                   </v-btn>
                   <v-chip
                     v-else
-                    color="blue"
-                    label
-                    size="large"
-                    variant="tonal"
-                    class="font-weight-bold"
+                    color="#32A3FF"
+                    size="x-large"
+                    variant="flat"
+                    class="font-weight-black px-6 text-h6 text-white"
+                    rounded="xl"
                   >
+                    <v-icon start size="24">mdi-shield-check</v-icon>
                     VERIFIED
                   </v-chip>
                 </template>
               </v-list-item>
               
               <v-list-item v-if="filteredPatients.length === 0">
-                <v-list-item-title class="text-center py-6 text-h6 text-grey-darken-1">
+                <v-list-item-title class="text-center py-8 text-h5 secondary-text">
                   {{ noDataText }}
                 </v-list-item-title>
               </v-list-item>
@@ -117,81 +140,97 @@
           </v-card-text>
         </v-card>
 
-        <v-dialog v-model="isModalOpen" max-width="450" transition="slide-y-transition">
-          <v-card class="pa-6 border-t-lg border-t-blue-darken-3"> 
-            <v-card-title class="text-h5 font-weight-bold text-center text-blue-darken-2">
-              Aktivasi Akun Pasien
-            </v-card-title>
-            <v-card-subtitle class="text-center mb-4">
-                {{ selectedPatient.nama }} (RM: {{ selectedPatient.rm }})
-            </v-card-subtitle>
+        <v-dialog v-model="isModalOpen" max-width="600" transition="dialog-bottom-transition">
+          <v-card class="pa-0 rounded-xl overflow-hidden card-style"> 
+            <div class="modal-header pa-7">
+              <v-icon size="72" color="white" class="mb-3">mdi-qrcode-scan</v-icon>
+              <h2 class="text-h3 font-weight-black text-white mb-2">Aktivasi Akun</h2>
+              <p class="text-h6 text-white opacity-90">{{ selectedPatient.nama }}</p>
+              <v-chip color="white" class="font-weight-bold mt-2" variant="flat" size="default">
+                <span style="color: #D17A4A;">RM: {{ selectedPatient.rm }}</span>
+              </v-chip>
+            </div>
 
-            <v-card-text>
+            <v-card-text class="pa-7">
               <v-text-field
                 v-model="tempTelepon"
                 :disabled="qrCodeGenerated"
-                label="No. Telepon Pasien"
+                label="Nomor Telepon Pasien"
                 placeholder="08xxxxxxxxxx"
                 variant="outlined"
                 density="comfortable"
-                :color="qrCodeGenerated ? 'grey' : 'orange-darken-1'"
+                :color="qrCodeGenerated ? 'grey' : '#D17A4A'"
                 :rules="[v => v.length >= 8 || 'Min. 8 digit']"
+                prepend-inner-icon="mdi-phone"
+                class="mb-3 text-body-1"
+                base-color="grey-darken-1"
               ></v-text-field>
 
               <v-btn
                 v-if="!qrCodeGenerated"
                 :disabled="!isTeleponValid"
-                color="orange-darken-1"
+                color="#5FB7FF"
                 block
-                size="large"
-                class="mt-1 font-weight-bold elevation-3"
+                size="x-large"
+                class="mt-3 font-weight-black elevation-2 text-h5 text-white"
                 @click="generateQrCode"
+                rounded="xl"
               >
-                <v-icon left>mdi-qrcode-scan</v-icon>
-                Lanjutkan & Generate QR
+                <v-icon left size="32">mdi-qrcode-plus</v-icon>
+                Generate QR Code
               </v-btn>
 
-              <div v-else class="text-center mt-4 pa-4 bg-blue-grey-lighten-5 rounded-lg border-sm border-blue-darken-1">
-                <v-icon color="orange-darken-1" size="48">mdi-cellphone-check</v-icon>
-                <div class="text-h6 font-weight-bold mb-3 text-blue-darken-2">PINDAI UNTUK VERIFIKASI</div>
+              <div v-else class="text-center mt-6 pa-7 qr-container rounded-xl">
+                <div class="pulse-icon mb-4">
+                  <v-icon color="#4A5F7A" size="64">mdi-cellphone-check</v-icon>
+                </div>
+                <h3 class="text-h4 font-weight-black mb-3" style="color: #4A5F7A;">Pindai QR Code</h3>
+                <p class="text-body-1 secondary-text mb-6">Arahkan kamera smartphone ke QR code</p>
                 
                 <div class="d-flex justify-center mb-4">
-                  <qrcode-vue 
-                    :value="qrCodeData" 
-                    :size="170" 
-                    level="H" 
-                    :foreground="'#F57C00'"
-                    :background="'#FFFFFF'"
-                    class="border-4 rounded-lg border-orange-darken-1"
-                  />
+                  <div class="qr-frame">
+                    <qrcode-vue 
+                      :value="qrCodeData" 
+                      :size="280" 
+                      level="H" 
+                      :foreground="'#4A5F7A'"
+                      :background="'#FFFFFF'"
+                      class="qr-code"
+                    />
+                  </div>
                 </div>
               </div>
             </v-card-text>
 
-            <v-card-actions v-if="qrCodeGenerated" class="d-flex justify-space-between pt-0">
+            <v-card-actions v-if="qrCodeGenerated" class="pa-7 pt-0">
                 <v-btn
-                    color="orange-darken-1"
-                    variant="tonal"
+                    color="#4A5F7A"
+                    variant="outlined"
                     @click="reloadQr"
                     prepend-icon="mdi-reload"
+                    size="x-large"
+                    class="font-weight-bold flex-grow-1 text-body-1"
+                    rounded="xl"
                 >
-                    Reload
+                    Reload QR
                 </v-btn>
                 <v-btn
-                    color="green-darken-1"
-                    variant="elevated"
+                    color="#D17A4A"
+                    variant="flat"
                     @click="completeVerification"
                     prepend-icon="mdi-check-circle"
-                    size="large"
-                    class="font-weight-bold elevation-3"
+                    size="x-large"
+                    class="font-weight-black flex-grow-1 elevation-2 text-body-1"
+                    rounded="xl"
                 >
                     Selesai
                 </v-btn>
             </v-card-actions>
 
-            <v-card-actions v-else>
-                <v-spacer></v-spacer>
-                <v-btn color="grey" variant="text" @click="closeModal">Batal</v-btn>
+            <v-card-actions v-else class="pa-7 pt-0">
+                <v-btn color="#7B8794" variant="text" @click="closeModal" size="x-large" block rounded="xl" class="font-weight-bold text-body-1">
+                  Batal
+                </v-btn>
             </v-card-actions>
           </v-card>
         </v-dialog>
@@ -202,9 +241,12 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-// PERUBAHAN DI SINI: Import QrcodeVue
 import QrcodeVue from 'qrcode.vue'; 
 
+definePageMeta({
+  middleware:['auth']
+})
+
 // --- MOCK DATA SIMRS ---
 const patients = ref([
   { nama: 'Budi Santoso', rm: '00123456', alamat: 'Jl. Melati No. 10', telepon: '', status: 'Belum Terverifikasi' },
@@ -229,9 +271,9 @@ const verifiedPatients = computed(() =>
 const filteredPatients = computed(() => {
   let statusFiltered = patients.value;
 
-  if (filterStatus.value === 1) { // Belum Terverifikasi
+  if (filterStatus.value === 1) {
     statusFiltered = unverifiedPatients.value;
-  } else if (filterStatus.value === 2) { // Terverifikasi
+  } else if (filterStatus.value === 2) {
     statusFiltered = verifiedPatients.value;
   }
     
@@ -252,7 +294,6 @@ const qrCodeGenerated = ref(false);
 
 const isTeleponValid = computed(() => tempTelepon.value.length >= 8);
 
-// Data yang akan di-encode dalam QR Code
 const qrCodeData = computed(() => {
     return qrCodeGenerated.value 
         ? JSON.stringify({
@@ -263,10 +304,8 @@ const qrCodeData = computed(() => {
           })
         : '';
 });
-
-
+  
 // --- LOGIC MODAL ---
-
 const openDaftarModal = (patient) => {
   selectedPatient.value = patient;
   tempTelepon.value = patient.telepon || '';
@@ -315,31 +354,199 @@ const completeVerification = () => {
 </script>
 
 <style scoped>
-/* Custom style untuk Vuetify */
-.border-t-lg {
-  border-top-width: 8px !important; 
-}
-.border-t-blue-darken-3 {
-  border-top-color: var(--v-theme-blue-darken-3) !important;
+/* Background */
+.bg-main {
+  background-color: #FAFAFA;
+  min-height: 100vh;
 }
 
-/* Style untuk Header Card (Floating & Rounded) */
+.card-style {
+  background-color: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+/* Text Colors */
+.primary-text {
+  color: #2C3E50 !important;
+}
+
+.secondary-text {
+  color: #7B8794 !important;
+}
+
+.primary-icon {
+  color: #FF9B1B !important;
+}
+
+/* Header Banner */
 .header-banner {
-  background: linear-gradient(90deg, #1565C0, #1976D2); 
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); 
+  background-color: #E8F5FF;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.04);
 }
 
-/* Memastikan elemen list item memiliki efek hover yang halus */
-.hover\:bg-orange-lighten-5:hover {
-    background-color: var(--v-theme-orange-lighten-5) !important;
+.header-banner:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
 }
 
-/* Memastikan container di v-main memiliki padding atas yang cukup */
-.v-main .v-container {
-    padding-top: 5rem !important; 
+.icon-container {
+  background-color: rgba(209, 122, 74, 0.1);
+  border-radius: 12px;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Search Section */
+.search-section {
+  background-color: #FAFAFA;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.search-field {
+  border-radius: 12px !important;
+}
+
+.filter-tabs {
+  background: transparent;
+}
+
+/* Patient List Items */
+.patient-item {
+  border-bottom: 1px solid #F0F0F0;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.patient-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 4px;
+  background: #D17A4A;
+  transform: scaleY(0);
+  transition: transform 0.3s ease;
+}
+
+.patient-item:hover::before {
+  transform: scaleY(1);
+}
+
+.patient-item:hover {
+  background: linear-gradient(90deg, #FFF5EE 0%, #ffffff 100%) !important;
+  transform: translateX(4px);
+}
+
+.verified-item {
+  background: linear-gradient(90deg, #F0F4F8 0%, #ffffff 100%) !important;
+}
+
+.verified-item::before {
+  background: #4A5F7A !important;
+}
+
+.verified-item:hover {
+  background: linear-gradient(90deg, #E8EFF5 0%, #ffffff 100%) !important;
+}
+
+.patient-avatar {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border: 3px solid white;
+}
+
+.chip-rm {
+  border: 1px solid rgba(74, 95, 122, 0.2);
+}
+
+.action-btn {
+  text-transform: none !important;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+}
+
+.action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(209, 122, 74, 0.3) !important;
+  background-color: #E0916E !important;
+}
+
+/* Modal Styling */
+.modal-header {
+  background: linear-gradient(135deg, #4A5F7A 0%, #5D7290 100%);
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(74, 95, 122, 0.2);
+}
+
+.qr-container {
+  background: linear-gradient(135deg, #F0F4F8 0%, #E8EFF5 100%);
+  border: 3px solid #4A5F7A;
+  box-shadow: 0 6px 20px rgba(74, 95, 122, 0.15);
+}
+
+.qr-frame {
+  padding: 24px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  display: inline-block;
+  border: 4px solid #4A5F7A;
+}
+
+.qr-code {
+  border-radius: 8px;
+  display: block;
+}
+
+.pulse-icon {
+  animation: pulse-scale 2s ease-in-out infinite;
+}
+
+@keyframes pulse-scale {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.08);
+    opacity: 0.85;
+  }
+}
+
+/* Responsive */
+@media (max-width: 960px) {
+  .patient-item {
+    padding: 20px !important;
+  }
+  
+  .header-banner h1 {
+    font-size: 1.75rem;
+  }
+  
+  .header-banner p {
+    font-size: 0.9rem;
+  }
+  
+  .action-btn {
+    font-size: 1rem;
+    padding: 10px 20px;
+  }
+  
+  .patient-avatar {
+    width: 56px !important;
+    height: 56px !important;
+  }
+  
+  .text-h5 {
+    font-size: 1.25rem !important;
+  }
 }
 
-/* Menghapus padding default dari v-card header agar v-container di dalamnya yang mengatur padding */
 .header-banner .v-container {
   padding-left: 1.5rem !important;
   padding-right: 1.5rem !important;
diff --git a/public/AntreanLogo.png b/public/AntreanLogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..9926fa8725f9c8a7fff796bd627650f6ad0fe022
GIT binary patch
literal 18525
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

literal 0
HcmV?d00001

diff --git a/public/AntreanLogobg.png b/public/AntreanLogobg.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc998820a29e85c2ccd8bb5510027e28d9f07422
GIT binary patch
literal 47421
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
V;ypIp&<5_H$jhj_0!zL9{C|Zl9Mu2-

literal 0
HcmV?d00001

diff --git a/stores/navItems.ts b/stores/navItems.ts
index a331e86..ed99cc9 100644
--- a/stores/navItems.ts
+++ b/stores/navItems.ts
@@ -1,59 +1,55 @@
 // stores/navItems.ts
 import { defineStore } from 'pinia';
 import { useLocalStorage } from '@vueuse/core';
+import { computed } from 'vue'; // Import computed dari Vue
 
 interface NavItem {
   id: number;
-  name: string;
-  path: string;
+  name: string; // Menggantikan 'title'
+  path: string; // Menggantikan 'to'
   icon: string;
   children?: NavItem[];
+  badge?: string; // Tambahkan properti badge
 }
 
 // Initial default navigation items
 const defaultNavItems: NavItem[] = [
   { id: 1, name: "Dashboard", icon: "mdi-view-dashboard", path: "/dashboard" },
-  // Add other main menu items
-  { id: 2, name: "Verifikasi Akun", icon: "mdi-account-supervisor", path: "/verifikasiAkun/VerifikasiAkun" },
-  { id: 3, name: "Ranap Admin", icon: "mdi-bed", path: "/RanapAdmin" },
-  { id: 4, name: "Klinik Admin", icon: "mdi-hospital-box", path: "/KlinikAdmin" },
-  { id: 5, name: "Klinik Ruang Admin", icon: "mdi-hospital-marker", path: "/KlinikRuangAdmin" },
+  { id: 2, name: "Verifikasi Akun", icon: "mdi-account-check-outline", path:"/verifikasiAkun/VerifikasiAkun" },
+  { 
+    id: 3, 
+    name: "Check In", 
+    icon: "mdi-file-document-edit-outline", 
+    path: "/checkinPasien/checkin"
+    // badge: "3", 
+  },
+  { id: 4, name: "Admin Loket", icon: "mdi-account-supervisor-outline", path: "/AdminLoket" },
+  { id: 5, name: "Admin Klinik", icon: "mdi-text-box-plus-outline", path: "/AdminKlinik" },
+  { id: 6, name: "Admin Penunjang", icon: "mdi-plus-box-outline", path: "/AdminPenunjang" },
+  { id: 7, name: "Buat Antrean", icon: "mdi-account-multiple-plus-outline", path: "/BuatAntrean" },
+  { id: 8, name: "Monitoring Pasien", icon: "mdi-account-group-outline", path: "/MonitoringPasien/monitoringPasien" },
   {
-    id: 6,
-    name: "Anjungan",
-    icon: "mdi-account-box-multiple",
+    id: 9,
+    name: "Layar Informasi",
+    icon: "mdi-monitor-multiple",
     path: "",
     children: [
-      { id: 7, name: "Anjungan", path: "/Anjungan/Anjungan", icon: "mdi-account-box" },
-      { id: 8, name: "Admin Anjungan", path: "/Anjungan/AdminAnjungan", icon: "mdi-account-cog" },
+      { id: 10, name: "Anjungan", path: "/anjungan/anjungan", icon: "mdi-circle-small" },
+      { id: 11, name: "Klinik Ruang", path: "/anjungan/AntrianKlinik", icon: "mdi-circle-small" },
     ],
   },
-  { id: 9, name: "Fast Track", icon: "mdi-clock-fast", path: "/FastTrack" },
-  { id: 10, name: "Data Pasien", icon: "mdi-account-multiple", path: "/DataPasien" },
-  {
-    id: 11,
-    name: "Screen",
-    icon: "mdi-monitor",
+    {
+    id: 12,
+    name: "Master Data",
+    icon: "mdi-cog-outline",
     path: "",
     children: [
-      { id: 12, name: "Antrian Masuk 1", path: "/Screen/Antrian Masuk 1", icon: "mdi-monitor" },
-      { id: 13, name: "Antrian Masuk 2", path: "/Screen/Antrian Masuk 2", icon: "mdi-monitor" },
-      // ... more screen pages
-    ],
-  },
-  { id: 14, name: "List Pasien", icon: "mdi-format-list-bulleted", path: "/ListPasien" },
-   {
-    id: 15 ,
-    name: "Setting",
-    icon: "mdi-cog",
-    path: "",
-    children: [
-      { id: 16, name: "Hak Akses", path: "/setting/HakAkses", icon: "mdi-shield-lock-outline" },
-      { id: 17, name: "User Login", path: "/setting/UserLogin", icon: "mdi-account-circle" },
-      { id: 18, name: "Master Loket", path: "/setting/MasterLoket", icon: "mdi-counter" },
-      { id: 19, name: "Master Klinik", path: "/setting/MasterKlinik", icon: "mdi-hospital" },
-      { id: 20, name: "Master Klinik Ruang", path: "/setting/MasterKlinikRuang", icon: "mdi-hospital-box" },
-      { id: 21, name: "Screen", path: "/setting/Screen", icon: "mdi-monitor" },
+      { id: 13, name: "Hak Akses", path: "/setting/HakAkses", icon: "mdi-circle-small" },
+      { id: 14, name: "User Login", path: "/setting/UserLogin", icon: "mdi-circle-small" },
+      { id: 15, name: "Master Loket", path: "/setting/masterloket", icon: "mdi-circle-small" },
+      { id: 16, name: "Master Klinik", path: "/setting/masterklinik", icon: "mdi-circle-small" },
+      { id: 17, name: "Master Klinik Ruang", path: "/setting/masterklinikruang", icon: "mdi-circle-small" },
+      { id: 18, name: "Screen", path: "/setting/screen", icon: "mdi-circle-small" },
     ],
   },
 ];
@@ -61,8 +57,18 @@ const defaultNavItems: NavItem[] = [
 export const useNavItemsStore = defineStore('navItems', () => {
   const navItems = useLocalStorage<NavItem[]>('navItems', defaultNavItems);
 
+  // === GETTER PENTING UNTUK MENGATASI MASALAH 'NULL' DI AWAL ===
+  const getNavItems = computed(() => {
+    // Jika navItems.value null, undefined, atau bukan array yang valid, 
+    // kembalikan array default.
+    if (!Array.isArray(navItems.value) || navItems.value === null || navItems.value === undefined) {
+      return defaultNavItems; 
+    }
+    return navItems.value;
+  });
+  // =============================================================
+
   function updateNavItems(newItems: NavItem[]) {
-    // This will update the local storage and the state
     navItems.value = newItems.map((item, index) => ({
       ...item,
       id: index + 1
@@ -76,6 +82,7 @@ export const useNavItemsStore = defineStore('navItems', () => {
 
   return {
     navItems,
+    getNavItems, // Diekspor untuk digunakan di Sidebar
     updateNavItems,
     addNavItem,
   };