From 55d8920a82232bfe10f4f69b35914652bf08622e Mon Sep 17 00:00:00 2001
From: Fanrouver <akbararya34@gmail.com>
Date: Wed, 20 Aug 2025 15:03:50 +0700
Subject: [PATCH] wednesday 20 august 2025

---
 components/ProfilePopup.vue      |  60 ++++
 layouts/default.vue              | 133 ++++++++
 pages/Anjungan/AdminAnjungan.vue | 398 +++++++++++-------------
 pages/FastTrack.vue              | 128 ++++++++
 pages/KlinikAdmin.vue            | 409 +++++++++++-------------
 pages/KlinikRuangAdmin.vue       | 257 ++++-----------
 pages/LoketAdmin.vue             | 519 +++++++++++++------------------
 pages/index.vue                  | 402 +++++++++++-------------
 8 files changed, 1141 insertions(+), 1165 deletions(-)
 create mode 100644 components/ProfilePopup.vue
 create mode 100644 layouts/default.vue
 create mode 100644 pages/FastTrack.vue

diff --git a/components/ProfilePopup.vue b/components/ProfilePopup.vue
new file mode 100644
index 0000000..4313b54
--- /dev/null
+++ b/components/ProfilePopup.vue
@@ -0,0 +1,60 @@
+<template>
+  <v-menu
+    v-model="menu"
+    :close-on-content-click="false"
+    location="bottom"
+    origin="top right"
+    transition="scale-transition"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+        icon
+        v-bind="props"
+        class="ml-auto"
+      >
+        <v-icon size="40" color="#000000">mdi-account</v-icon>
+      </v-btn>
+    </template>
+
+    <v-card class="mx-auto" color="#FFA000" dark width="250">
+      <v-list-item three-line class="py-4">
+        <v-list-item-title class="text-h6 text-center font-weight-bold">
+          <v-avatar color="#fff" size="60">
+            <v-icon size="40" color="#4CAF50">mdi-account</v-icon>
+          </v-avatar>
+        </v-list-item-title>
+        <v-list-item-subtitle class="text-center mt-2 text-black">
+          <span class="d-block font-weight-bold">Rajal Bayu Nogroho</span>
+          <span class="d-block">Super Admin</span>
+        </v-list-item-subtitle>
+      </v-list-item>
+
+      <v-card-actions class="d-flex justify-center pa-2">
+        <v-btn 
+          color="black" 
+          variant="text" 
+          class="font-weight-bold"
+          @click="signOut"
+        >
+          Sign out
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const menu = ref(false);
+
+const signOut = () => {
+  console.log("Sign out button clicked!");
+  menu.value = false;
+  // Implementasi logika logout di sini
+};
+</script>
+
+<style scoped>
+/* No specific scoped styles needed for this component as Vuetify classes handle styling */
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..feabeef
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,133 @@
+<template>
+  <v-app>
+    <v-layout>
+      <!-- App Bar Header -->
+      <v-app-bar app color="#FFA000" dark>
+        <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
+        <v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
+        <v-spacer></v-spacer>
+          <!-- Profile Popup Component -->
+        <ProfilePopup />
+        <span class="mr-2">Rajal Bayu Nogroho</span>
+      </v-app-bar>
+
+      <!-- Navigation Drawer -->
+      <v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
+        <v-list density="compact" nav>
+          <template v-for="item in items" :key="item.title">
+            <v-menu
+              v-if="item.children"
+              open-on-hover
+              location="end"
+              :nudge-right="3"
+            >
+              <template v-slot:activator="{ props }">
+                <v-list-item
+                  v-bind="props"
+                  :prepend-icon="item.icon"
+                  :title="item.title"
+                  :value="item.title"
+                  :class="{ 'v-list-item--active': item.title === currentPage }"
+                >
+                </v-list-item>
+              </template>
+
+              <v-list>
+                <v-list-item>
+                  <v-list-item-title class="font-weight-bold">{{
+                    item.title
+                  }}</v-list-item-title>
+                </v-list-item>
+                <v-divider></v-divider>
+                <v-list-item
+                  v-for="child in item.children"
+                  :key="child.title"
+                  :to="child.to"
+                  link
+                >
+                  <v-list-item-title>{{ child.title }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+
+            <v-tooltip
+              v-else
+              :disabled="!rail"
+              open-on-hover
+              location="end"
+              :text="item.title"
+            >
+              <template v-slot:activator="{ props }">
+                <v-list-item
+                  v-bind="props"
+                  :prepend-icon="item.icon"
+                  :title="item.title"
+                  :to="item.to"
+                  :value="item.title"
+                  :class="{ 'v-list-item--active': item.title === currentPage }"
+                  link
+                ></v-list-item>
+              </template>
+            </v-tooltip>
+          </template>
+        </v-list>
+      </v-navigation-drawer>
+
+      <!-- Page content will be rendered here -->
+      <slot />
+
+    </v-layout>
+  </v-app>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+// Reactive data
+const drawer = ref(true); 
+const rail = ref(true); 
+const currentPage = ref("Klinik Admin");
+
+// Navigation items
+const items = ref([
+  { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
+  {
+    title: "Setting",
+    icon: "mdi-cog",
+    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", to: "/LoketAdmin" },
+  { title: "Ranap Admin", icon: "mdi-bed" },
+  { title: "Klinik Admin", icon: "mdi-hospital-box", to: "/KlinikAdmin" },
+  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
+  { 
+    title: "Anjungan", 
+    icon: "mdi-account-box-multiple", 
+    children: [
+      { title: "Anjungan", to: "/Anjungan/Anjungan" },
+      { title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan" },
+    ],
+  },
+  { title: "Fast Track", icon: "mdi-clock-fast", to: "/FastTrack" },
+  { title: "Data Pasien", icon: "mdi-account-multiple" },
+  { title: "Screen", icon: "mdi-monitor" },
+  { title: "List Pasien", icon: "mdi-format-list-bulleted" },
+]);
+</script>
+
+<style scoped>
+#inspire .v-navigation-drawer__content {
+  background-color: #f5f5f5;
+}
+
+#inspire .v-app-bar {
+  background-color: #fff;
+}
+</style>
diff --git a/pages/Anjungan/AdminAnjungan.vue b/pages/Anjungan/AdminAnjungan.vue
index 4a1f04c..27583bc 100644
--- a/pages/Anjungan/AdminAnjungan.vue
+++ b/pages/Anjungan/AdminAnjungan.vue
@@ -1,235 +1,189 @@
 <template>
-  <v-app>
-    <v-layout>
-      <!-- App Bar Header -->
-      <v-app-bar app color="green darken-1" dark>
-        <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
-        <v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn icon>
-          <v-icon>mdi-account-circle</v-icon>
-        </v-btn>
-        <span class="mr-2">Rajal Bayu Nogroho</span>
-      </v-app-bar>
+  <v-divider class="my-8"></v-divider>
+  <v-main class="bg-grey-lighten-3">
+    <!-- Konten utama dibungkus dalam div yang menyesuaikan padding kiri -->
+    <div :style="contentStyle">
+      <v-container fluid>
+          <h1 class="text-h4">Admin Anjungan</h1>
+        <v-card class="pa-5 mb-5" color="white" flat>
+          <v-row align="center">
+            <v-col cols="12" md="4">
+              <v-text-field
+                label="Barcode"
+                placeholder="Masukkan Barcode"
+                outlined
+                dense
+                hide-details
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-chip color="#B71C1C" class="text-caption">
+                Tekan Enter. (Barcode depan nomor selalu ada huruf lain, Ex:
+                J20073010005 "Hiraukan huruf 'J' nya")
+              </v-chip>
+            </v-col>
+            <v-col cols="12" md="2">
+              <v-btn block color="info">Pendaftaran Online</v-btn>
+            </v-col>
+          </v-row>
+        </v-card>
 
-      <!-- Navigation Drawer -->
-      <v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
-        <v-list density="compact" nav>
-          <template v-for="item in items" :key="item.title">
-            <v-menu
-              v-if="item.children"
-              open-on-hover
-              location="end"
-              :nudge-right="3"
+        <v-divider class="my-5"></v-divider>
+
+        <v-card class="mb-5">
+          <v-toolbar flat color="transparent" dense>
+            <v-toolbar-title class="text-subtitle-1 font-weight-bold red--text">
+              DATA PENGUNJUNG TERLAMBAT
+            </v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-text-field
+              v-model="searchLate"
+              append-icon="mdi-magnify"
+              label="Search"
+              single-line
+              hide-details
+              dense
+              class="mr-2"
+              variant="outlined"
+            ></v-text-field>
+            <v-select
+              :items="[10, 25, 50, 100]"
+              label="Show"
+              dense
+              single-line
+              hide-details
+              class="shrink"
+              variant="outlined"
+            ></v-select>
+          </v-toolbar>
+          <v-card-text>
+            <v-data-table
+              :headers="lateHeaders"
+              :items="lateVisitors"
+              :search="searchLate"
+              no-data-text="No data available in table"
+              hide-default-footer
+              class="elevation-1"
+            ></v-data-table>
+            <div class="d-flex justify-end pt-2">
+              <v-pagination
+                v-model="page"
+                :length="10"
+                :total-visible="5"
+              ></v-pagination>
+            </div>
+          </v-card-text>
+        </v-card>
+
+        <v-divider class="my-5"></v-divider>
+
+        <v-card>
+          <v-toolbar flat color="transparent" dense>
+            <v-toolbar-title class="text-subtitle-1 font-weight-bold red--text">
+              DATA PENGUNJUNG
+            </v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-text-field
+              v-model="search"
+              append-icon="mdi-magnify"
+              label="Search"
+              single-line
+              hide-details
+              dense
+              class="mr-2"
+              variant="outlined"
+            ></v-text-field>
+            <v-select
+              :items="[10, 25, 50, 100]"
+              label="Show"
+              dense
+              single-line
+              hide-details
+              class="shrink"
+              variant="outlined"
+            ></v-select>
+          </v-toolbar>
+          <v-card-text>
+            <v-data-table
+              :headers="headers"
+              :items="visitors"
+              :search="search"
+              no-data-text="No data available in table"
+              class="elevation-1"
             >
-              <template v-slot:activator="{ props }">
-                <v-list-item
-                  v-bind="props"
-                  :prepend-icon="item.icon"
-                  :title="item.title"
-                  :value="item.title"
-                  :class="{ 'v-list-item--active': item.title === currentPage }"
-                >
-                </v-list-item>
+              <template v-slot:item.aksi="{ item }">
+                <div class="d-flex flex-column">
+                  <v-btn small color="success" class="my-1">Tiket</v-btn>
+                  <v-btn small color="primary" class="my-1">Tiket Pengantar</v-btn>
+                  <v-btn small color="warning" class="my-1">ByPass</v-btn>
+                </div>
               </template>
-
-              <v-list>
-                <v-list-item>
-                  <v-list-item-title class="font-weight-bold">{{
-                    item.title
-                  }}</v-list-item-title>
-                </v-list-item>
-                <v-divider></v-divider>
-                <v-list-item
-                  v-for="child in item.children"
-                  :key="child.title"
-                  :to="child.to"
-                  link
-                >
-                  <v-list-item-title>{{ child.title }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-
-            <v-list-item
-              v-else
-              :prepend-icon="item.icon"
-              :title="item.title"
-              :to="item.to"
-              :value="item.title"
-              :class="{ 'v-list-item--active': item.title === currentPage }"
-              link
-            ></v-list-item>
-          </template>
-        </v-list>
-      </v-navigation-drawer>    
-
-      <v-main>
-        <v-container fluid>
-          <p>Admin Anjungan</p>
-          <v-card class="pa-5 mb-5" color="white" flat>
-            <v-row align="center">
-              <v-col cols="12" md="4">
-                <v-text-field
-                  label="Barcode"
-                  placeholder="Masukkan Barcode"
-                  outlined
-                  dense
-                  hide-details
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-chip color="#B71C1C" class="text-caption">
-                  Tekan Enter. (Barcode depan nomor selalu ada huruf lain, Ex:
-                  J20073010005 "Hiraukan huruf 'J' nya")
-                </v-chip>
-              </v-col>
-              <v-col cols="12" md="2">
-                <v-btn block color="info">Pendaftaran Online</v-btn>
-              </v-col>
-            </v-row>
-          </v-card>
-
-          <v-divider class="my-5"></v-divider>
-
-          <v-card class="mb-5">
-            <v-toolbar flat color="transparent" dense>
-              <v-toolbar-title
-                class="text-subtitle-1 font-weight-bold red--text"
-                >DATA PENGUNJUNG TERLAMBAT</v-toolbar-title
-              >
-              <v-spacer></v-spacer>
-              <v-text-field
-                v-model="searchLate"
-                append-icon="mdi-magnify"
-                label="Search"
-                single-line
-                hide-details
-                dense
-                class="mr-2"
-              ></v-text-field>
-              <v-select
-                :items="[10, 25, 50, 100]"
-                label="Show"
-                dense
-                single-line
-                hide-details
-                class="shrink"
-              ></v-select>
-            </v-toolbar>
-            <v-card-text>
-              <v-data-table
-                :headers="lateHeaders"
-                :items="lateVisitors"
-                :search="searchLate"
-                no-data-text="No data available in table"
-                hide-default-footer
-                class="elevation-1"
-              ></v-data-table>
-              <div class="d-flex justify-end pt-2">
-                <v-pagination
-                  v-model="page"
-                  :length="10"
-                  :total-visible="5"
-                ></v-pagination>
-              </div>
-            </v-card-text>
-          </v-card>
-
-          <v-divider class="my-5"></v-divider>
-
-          <v-card>
-            <v-toolbar flat color="transparent" dense>
-              <v-toolbar-title
-                class="text-subtitle-1 font-weight-bold red--text"
-                >DATA PENGUNJUNG</v-toolbar-title
-              >
-              <v-spacer></v-spacer>
-              <v-text-field
-                v-model="search"
-                append-icon="mdi-magnify"
-                label="Search"
-                single-line
-                hide-details
-                dense
-                class="mr-2"
-              ></v-text-field>
-              <v-select
-                :items="[10, 25, 50, 100]"
-                label="Show"
-                dense
-                single-line
-                hide-details
-                class="shrink"
-              ></v-select>
-            </v-toolbar>
-            <v-card-text>
-              <v-data-table
-                :headers="headers"
-                :items="visitors"
-                :search="search"
-                no-data-text="No data available in table"
-                class="elevation-1"
-                :footer-props="{
-                  'items-per-page-options': [10, 25, 50, 100],
-                  'show-current-page': true,
-                }"
-              >
-                <template v-slot:item.aksi="{ item }">
-                  <div class="d-flex flex-column">
-                    <v-btn small color="success" class="my-1">Tiket</v-btn>
-                    <v-btn small color="primary" class="my-1"
-                      >Tiket Pengantar</v-btn
-                    >
-                    <v-btn small color="warning" class="my-1">ByPass</v-btn>
-                  </div>
-                </template>
-              </v-data-table>
-            </v-card-text>
-          </v-card>
-        </v-container>
-      </v-main>
-    </v-layout>
-  </v-app>
+            </v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-container>
+    </div>
+  </v-main>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 
-const drawer = ref(true); // Nilai awal true agar sidebar terlihat
-const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
+// Definisikan props untuk menerima status 'rail' dari layout induk
+const props = defineProps({
+  rail: Boolean,
+});
+
+// Reactive data
 const search = ref("");
-const lateSearch = ref("");
-const clinicSearch = ref("");
-const itemsPerPage = ref(10);
-const lateItemsPerPage = ref(10);
-const clinicItemsPerPage = ref(10);
-const currentPage = ref("Admin Anjungan");
+const searchLate = ref("");
+const page = ref(1);
 
+// Gaya komputasi untuk menyesuaikan padding
+const contentStyle = computed(() => {
+  return {
+    paddingLeft: props.rail ? '56px' : '64px',
+    transition: 'padding-left 0.3s ease-in-out',
+  };
+});
 
-// Struktur data yang memisahkan menu dengan dan tanpa submenu
-const items = ref([
-  { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
-  {
-    title: "Setting",
-    icon: "mdi-cog",
-    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", to : "/LoketAdmin" },
-  { title: "Ranap Admin", icon: "mdi-bed" },
-  { title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
-  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
-  { title: "Anjungan", icon: "mdi-account-box-multiple", to: "/anjungan" },
-  { title: "Fast Track", icon: "mdi-clock-fast" },
-  { title: "Data Pasien", icon: "mdi-account-multiple" },
-  { title: "Screen", icon: "mdi-monitor" },
-  { title: "List Pasien", icon: "mdi-format-list-bulleted" },
+// Table headers for late visitors
+const lateHeaders = [
+  { text: 'No', value: 'no' },
+  { text: 'Barcode', value: 'barcode' },
+  { text: 'No Rekamedik', value: 'noRekamedik' },
+  { text: 'No Antrian', value: 'noAntrian' },
+  { text: 'No Antrian Klinik', value: 'noAntrianKlinik' },
+  { text: 'Shift', value: 'shift' },
+  { text: 'Pembayaran', value: 'pembayaran' },
+  { text: 'Status', value: 'status' },
+];
+
+// Table headers for all visitors
+const headers = [
+  { text: 'No', value: 'no' },
+  { text: 'Barcode', value: 'barcode' },
+  { text: 'No Rekamedik', value: 'noRekamedik' },
+  { text: 'No Antrian', value: 'noAntrian' },
+  { text: 'Shift', value: 'shift' },
+  { text: 'Ket', value: 'ket' },
+  { text: 'Fast Track', value: 'fastTrack' },
+  { text: 'Pembayaran', value: 'pembayaran' },
+  { text: 'Panggil', value: 'panggil' },
+  { text: 'Aksi', value: 'aksi' },
+];
+
+// Mock data for late visitors
+const lateVisitors = ref([
+  { no: 1, barcode: '250813100928', noRekamedik: 'RM001', noAntrian: 'ON1045', noAntrianKlinik: 'K1', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
+  { no: 2, barcode: '250813100930', noRekamedik: 'RM002', noAntrian: 'GI1018', noAntrianKlinik: 'K2', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
+  { no: 3, barcode: '250813100937', noRekamedik: 'RM003', noAntrian: 'MT1073', noAntrianKlinik: 'K3', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
+]);
+
+// Mock data for all visitors
+const visitors = ref([
+  { no: 1, barcode: '250813100928', noRekamedik: 'RM001', noAntrian: 'ON1045', shift: 'Shift 1', ket: '', fastTrack: 'Ya', pembayaran: 'JKN', panggil: 'Ya' },
+  { no: 2, barcode: '250813100930', noRekamedik: 'RM002', noAntrian: 'GI1018', shift: 'Shift 1', ket: '', fastTrack: 'Tidak', pembayaran: 'JKN', panggil: 'Tidak' },
+  { no: 3, barcode: '250813100937', noRekamedik: 'RM003', noAntrian: 'MT1073', shift: 'Shift 1', ket: '', fastTrack: 'Tidak', pembayaran: 'JKN', panggil: 'Tidak' },
 ]);
 </script>
diff --git a/pages/FastTrack.vue b/pages/FastTrack.vue
new file mode 100644
index 0000000..159e35b
--- /dev/null
+++ b/pages/FastTrack.vue
@@ -0,0 +1,128 @@
+<template>
+  <v-main class="bg-grey-lighten-3">
+    <v-container>
+      <!-- Fast Track Content -->
+      <div class="d-flex align-center justify-space-between mb-4">
+        <h1 class="text-h4">Fast Track</h1>
+        <div class="d-flex">
+          <v-btn
+            prepend-icon="mdi-view-dashboard"
+            variant="text"
+            class="text-capitalize"
+          >
+            Dashboard
+          </v-btn>
+          <v-btn
+            prepend-icon="mdi-fast-forward"
+            variant="text"
+            class="text-capitalize"
+          >
+            Fast Track
+          </v-btn>
+        </div>
+      </div>
+
+      <!-- Fast Track Table -->
+      <v-card class="pa-4">
+        <div class="d-flex justify-space-between align-center my-3">
+          <div class="d-flex align-center">
+            <span>Show</span>
+            <v-select
+              density="compact"
+              variant="outlined"
+              :items="[10, 25, 50, 100]"
+              class="mx-2"
+              style="width: 90px"
+            ></v-select>
+            <span>entries</span>
+          </div>
+          <v-text-field
+            label="Search"
+            variant="outlined"
+            density="compact"
+            style="max-width: 200px"
+          ></v-text-field>
+        </div>
+
+        <v-table class="mt-3">
+          <thead>
+            <tr>
+              <th
+                v-for="header in fastTrackHeaders"
+                :key="header.text"
+              >
+                {{ header.text }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in fastTrackData" :key="index">
+              <td>{{ item.no }}</td>
+              <td>{{ item.barcode }}</td>
+              <td>{{ item.tanggal }}</td>
+              <td>{{ item.noAntrian }}</td>
+              <td>{{ item.rm }}</td>
+              <td>{{ item.shift }}</td>
+              <td>{{ item.klinik }}</td>
+              <td>{{ item.pj }}</td>
+              <td>{{ item.keterangan }}</td>
+              <td>{{ item.pembayaran }}</td>
+              <td>{{ item.status }}</td>
+              <td>
+                <v-btn color="blue">Fast Track</v-btn>
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
+
+        <div class="d-flex justify-space-between align-center mt-3">
+          <span>Showing 1 to 10 of 1,434 entries</span>
+          <v-pagination
+            v-model="page"
+            :length="144"
+            :total-visible="5"
+          ></v-pagination>
+        </div>
+      </v-card>
+    </v-container>
+  </v-main>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+// Reactive data
+const search = ref("");
+const itemsPerPage = ref(10);
+const page = ref(1);
+
+// Table headers
+const fastTrackHeaders = [
+  { text: 'No' },
+  { text: 'Barcode' },
+  { text: 'Tanggal / Jam Daftar' },
+  { text: 'No Antrian' },
+  { text: 'RM' },
+  { text: 'Shift' },
+  { text: 'Klinik' },
+  { text: 'PJ' },
+  { text: 'Keterangan' },
+  { text: 'Pembayaran' },
+  { text: 'Status' },
+  { text: 'Aksi' },
+];
+
+// Mock data
+const fastTrackData = [
+  { no: 1, barcode: '250813100928', tanggal: '13-08-2025 / 07:17', noAntrian: 'ON1045', rm: '', shift: 'Shift 1', klinik: 'ONKOLOGI', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
+  { no: 2, barcode: '250813100930', tanggal: '13-08-2025 / 07:19', noAntrian: 'GI1018', rm: '', shift: 'Shift 1', klinik: 'GIGI DAN MULUT', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
+  { no: 3, barcode: '250813100937', tanggal: '13-08-2025 / 07:19', noAntrian: 'MT1073', rm: '', shift: 'Shift 1', klinik: 'MATA', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
+  { no: 4, barcode: '250813100936', tanggal: '13-08-2025 / 07:19', noAntrian: 'ON1047', rm: '', shift: 'Shift 1', klinik: 'ONKOLOGI', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
+  { no: 5, barcode: '250813100935', tanggal: '13-08-2025 / 07:18', noAntrian: 'ON1046', rm: '', shift: 'Shift 1', klinik: 'ONKOLOGI', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
+  { no: 6, barcode: '250813100934', tanggal: '13-08-2025 / 07:18', noAntrian: 'IP1101', rm: '', shift: 'Shift 1', klinik: 'IPD', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
+  { no: 7, barcode: '250813100933', tanggal: '13-08-2025 / 07:18', noAntrian: 'UM1031', rm: '', shift: 'Shift 1', klinik: 'IPD', pj: '', keterangan: '', pembayaran: 'UMUM', status: 'Proses Barcode' },
+  { no: 8, barcode: '250813100932', tanggal: '13-08-2025 / 07:17', noAntrian: 'AN1122', rm: '', shift: 'Shift 1', klinik: 'ANAK', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Proses Barcode' },
+  { no: 9, barcode: '250813100931', tanggal: '13-08-2025 / 07:17', noAntrian: 'PR1033', rm: '', shift: 'Shift 1', klinik: 'PARU', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Anjungan' },
+  { no: 10, barcode: '250813100930', tanggal: '13-08-2025 / 07:17', noAntrian: 'TH1035', rm: '', shift: 'Shift 1', klinik: 'THT', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Anjungan' },
+];
+</script>
diff --git a/pages/KlinikAdmin.vue b/pages/KlinikAdmin.vue
index d3d7343..bf49731 100644
--- a/pages/KlinikAdmin.vue
+++ b/pages/KlinikAdmin.vue
@@ -1,238 +1,192 @@
 <template>
-  <v-app id="inspire">
-<!-- App Bar Header -->
-      <v-app-bar app color="green darken-1" dark>
-        <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
-        <v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn icon>
-          <v-icon>mdi-account-circle</v-icon>
-        </v-btn>
-        <span class="mr-2">Rajal Bayu Nogroho</span>
-      </v-app-bar>
-
-      <!-- Navigation Drawer -->
-      <v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
-        <v-list density="compact" nav>
-          <template v-for="item in items" :key="item.title">
-            <v-menu
-              v-if="item.children"
-              open-on-hover
-              location="end"
-              :nudge-right="3"
-              
+  <v-divider class="my-8"></v-divider>
+  <v-main class="bg-grey-lighten-3">
+    <v-container>
+      <div class="d-flex align-center justify-space-between mb-4 mt-10">
+        <h1 class="text-h4">Klinik Admin</h1>
+        <v-tooltip text="Jumlah Maksimal Bangku Tersedia">
+          <template v-slot:activator="{ props }">
+            <v-chip
+              v-bind="props"
+              class="text-white"
+              color="green-darken-1"
             >
-              <template v-slot:activator="{ props }">
-                <v-list-item
-                  v-bind="props"
-                  :prepend-icon="item.icon"
-                  :title="item.title"
-                  :value="item.title"
-                  :class="{ 'v-list-item--active': item.title === currentPage }"
-                >
-                </v-list-item>
-              </template>
-
-              <v-list>
-                <v-list-item>
-                  <v-list-item-title class="font-weight-bold">{{
-                    item.title
-                  }}</v-list-item-title>
-                </v-list-item>
-                <v-divider></v-divider>
-                <v-list-item
-                  v-for="child in item.children"
-                  :key="child.title"
-                  :to="child.to"
-                  link
-                >
-                  <v-list-item-title>{{ child.title }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-
-         <v-tooltip
-            v-else
-            :disabled="!rail"
-            open-on-hover
-            location="end"
-            :text="item.title"
-            color="blue"
-          >
-            <template v-slot:activator="{ props }">
-              <v-list-item
-                v-bind="props"
-                :prepend-icon="item.icon"
-                :title="item.title"
-                :to="item.to"
-                :value="item.title"
-                :class="{ 'v-list-item--active': item.title === currentPage }"
-                link
-              ></v-list-item>
-            </template>
-          </v-tooltip>
+              <v-icon left>mdi-circle-small</v-icon>
+              Max Quota Bangku 0
+            </v-chip>
           </template>
-        </v-list>
-      </v-navigation-drawer>    
+        </v-tooltip>
+      </div>
 
-    <!-- Main Content -->
-    <v-main class="bg-grey-lighten-3">
-      <v-container>
-        <div class="d-flex align-center justify-space-between mb-4">
-          <h1 class="text-h4">Klinik Admin</h1>
-          <v-tooltip text="Jumlah Maksimal Bangku Tersedia">
-            <template v-slot:activator="{ props }">
-          <v-chip v-bind="props" color="green" variant="elevated">
-            <v-icon left>mdi-circle-small</v-icon>
-            Max Quota Bangku 0
-          </v-chip>
-            </template>
-          </v-tooltip>
+      <!-- Loket Admin Table -->
+      <v-card class="mb-5 pa-4">
+        <v-card-title class="d-flex justify-space-between align-center">
+          Loket Admin
+          <div>
+            <v-tooltip text="Panggil 1 Antrian">
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  color="green"
+                  class="mr-2 clickable-btn"
+                  @click="handleCallClick(1)"
+                  >1</v-btn
+                >
+              </template>
+            </v-tooltip>
+            <v-tooltip text="Panggil 5 Antrian">
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  color="blue"
+                  class="mr-2 clickable-btn"
+                  @click="handleCallClick(5)"
+                  >5</v-btn
+                >
+              </template>
+            </v-tooltip>
+            <v-tooltip text="Panggil 10 Antrian">
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  color="orange"
+                  class="mr-2 clickable-btn"
+                  @click="handleCallClick(10)"
+                  >10</v-btn
+                >
+              </template>
+            </v-tooltip>
+            <v-tooltip text="Panggil 20 Antrian">
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  color="red"
+                  class="clickable-btn"
+                  @click="handleCallClick(20)"
+                  >20</v-btn
+                >
+              </template>
+            </v-tooltip>
+          </div>
+        </v-card-title>
+        <v-table class="mt-3">
+          <thead>
+            <tr>
+              <th v-for="header in loketHeaders" :key="header.text">
+                {{ header.text }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in loketData" :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="x-small" color="primary">Panggil</v-btn></td>
+              <td>
+                <v-btn size="x-small" color="red">Batalkan</v-btn>
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
+        <div class="d-flex justify-space-between align-center mt-3">
+          <span>Showing {{ loketData.length > 0 ? 1 : 0 }} to {{ loketData.length }} of {{ loketData.length }} entries</span>
+          <div>
+            <v-btn size="small" variant="text" disabled>Previous</v-btn>
+            <v-btn size="small" variant="text" disabled>Next</v-btn>
+          </div>
         </div>
+      </v-card>
 
-        <!-- Loket Admin Table -->
-        <v-card class="mb-5 pa-4">
-          <v-card-title class="d-flex justify-space-between align-center">
-            Loket Admin
-             <!-- <div class="d-flex align-center">
-              <span text-h1>Show</span>
-              <v-select
-                density="compact"
-                variant="outlined"
-                :items="[10, 25, 50, 100]"
-                class="mx-1"
-                style="width: 90px"
-              ></v-select>
-              <span>entries</span>
-            </div>   --> 
-            <!-- not aligned with the class div "need seperated div class" -->
-            <div>
-                <v-tooltip text="Panggil 1 Antrian">
-                  <template v-slot:activator="{ props }">
-                    <v-btn v-bind="props" color="green" class="mr-2">1</v-btn>
-                  </template>
-                </v-tooltip>
-                <v-tooltip text="Panggil 5 Antrian">
-                  <template v-slot:activator="{ props }">
-                    <v-btn v-bind="props" color="blue" class="mr-2">5</v-btn>
-                  </template>
-                </v-tooltip>
-                <v-tooltip text="Panggil 10 Antrian">
-                  <template v-slot:activator="{ props }">
-                    <v-btn v-bind="props" color="orange" class="mr-2">10</v-btn>
-                  </template>
-                </v-tooltip>
-                <v-tooltip text="Panggil 20 Antrian">
-                  <template v-slot:activator="{ props }">
-                    <v-btn v-bind="props" color="red">20</v-btn>
-                  </template>
-                </v-tooltip>
-            </div>  
-          </v-card-title>
-          <v-table class="mt-3">
-            <thead>
-              <tr>
-                <th v-for="header in loketHeaders" :key="header.text">
-                  {{ header.text }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td :colspan="loketHeaders.length" class="text-center">
-                  No data available in table
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-          <div class="d-flex justify-space-between align-center mt-3">
-            <span>Showing 0 to 0 of 0 entries</span>
-            <div>
-              <v-btn size="small" variant="text" disabled>Previous</v-btn>
-              <v-btn size="small" variant="text" disabled>Next</v-btn>
-            </div>
+      <!-- Data Pengunjung Table -->
+      <v-card class="pa-4">
+        <v-card-title>Data Pengunjung: Loket</v-card-title>
+        <v-table class="mt-3">
+          <thead>
+            <tr>
+              <th v-for="header in pengunjungHeaders" :key="header.text">
+                {{ header.text }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in pengunjungData" :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>{{ item.status }}</td>
+            </tr>
+          </tbody>
+        </v-table>
+        <div class="d-flex justify-space-between align-center mt-3">
+          <span>Showing {{ pengunjungData.length > 0 ? 1 : 0 }} to {{ pengunjungData.length }} of {{ pengunjungData.length }} entries</span>
+          <div>
+            <v-btn size="small" variant="text" disabled>Previous</v-btn>
+            <v-btn size="small" variant="text" disabled>Next</v-btn>
           </div>
-        </v-card>
-
-        <!-- Data Pengunjung Table -->
-        <v-card class="pa-4">
-          <v-card-title>Data Pengunjung: Loket</v-card-title>
-          <v-table class="mt-3">
-            <thead>
-              <tr>
-                <th v-for="header in pengunjungHeaders" :key="header.text">
-                  {{ header.text }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td :colspan="pengunjungHeaders.length" class="text-center">
-                  No data available in table
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-          <div class="d-flex justify-space-between align-center mt-3">
-            <span>Showing 0 to 0 of 0 entries</span>
-            <div>
-              <v-btn size="small" variant="text" disabled>Previous</v-btn>
-              <v-btn size="small" variant="text" disabled>Next</v-btn>
-            </div>
-          </div>
-        </v-card>
-      </v-container>
-    </v-main>
-  </v-app>
+        </div>
+      </v-card>
+    </v-container>
+  </v-main>
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
-
-// Reactive data
-const drawer = ref(true); // Nilai awal true agar sidebar terlihat
-const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
-const search = ref("");
-const lateSearch = ref("");
-const clinicSearch = ref("");
-const itemsPerPage = ref(10);
-const lateItemsPerPage = ref(10);
-const clinicItemsPerPage = ref(10);
-const currentPage = ref("Klinik Admin");
-
-// Navigation items
-const items = ref([
-  { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
+import { ref } from "vue";
 
+// Sample data for the tables
+const loketData = ref([
   {
-    title: "Setting",
-    icon: "mdi-cog",
-    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" },
-    ],
+    no: 1,
+    barcode: "1234567890",
+    noRekamedik: "RM001",
+    noAntrian: "A001",
+    shift: "Pagi",
+    ket: "Normal",
+    fastTrack: "Tidak",
+    pembayaran: "BPJS"
   },
-  { title: "Loket Admin", icon: "mdi-account-supervisor", to : "/LoketAdmin" },
-  { title: "Ranap Admin", icon: "mdi-bed" },
-  { title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
-  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
+  {
+    no: 2,
+    barcode: "0987654321",
+    noRekamedik: "RM002",
+    noAntrian: "A002",
+    shift: "Pagi",
+    ket: "Normal",
+    fastTrack: "Ya",
+    pembayaran: "Umum"
+  }
+]);
 
-  { 
-    title: "Anjungan", 
-    icon: "mdi-account-box-multiple", 
-    children: [
-      {title: "Anjungan", to: "/Anjungan/Anjungan"},
-      {title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
-    ],
+const pengunjungData = ref([
+  {
+    no: 1,
+    barcode: "1234567890",
+    noRekamedik: "RM001",
+    noAntrian: "A001",
+    noAntrianKlinik: "K001",
+    shift: "Pagi",
+    pembayaran: "BPJS",
+    status: "Menunggu"
   },
-  { title: "Fast Track", icon: "mdi-clock-fast" },
-  { title: "Data Pasien", icon: "mdi-account-multiple" },
-  { title: "Screen", icon: "mdi-monitor" },
-  { title: "List Pasien", icon: "mdi-format-list-bulleted" },
+  {
+    no: 2,
+    barcode: "0987654321",
+    noRekamedik: "RM002",
+    noAntrian: "A002",
+    noAntrianKlinik: "K002",
+    shift: "Pagi",
+    pembayaran: "Umum",
+    status: "Selesai"
+  }
 ]);
 
 const loketHeaders = [
@@ -258,14 +212,21 @@ const pengunjungHeaders = [
   { text: 'Pembayaran' },
   { text: 'Status' },
 ]
+
+// Methods to handle clicks
+const handleCallClick = (value) => {
+  console.log(`Panggil ${value} antrian diklik!`);
+  // Tambahkan logika untuk memanggil antrian di sini
+};
 </script>
 
 <style scoped>
-#inspire .v-navigation-drawer__content {
-  background-color: #f5f5f5;
+.clickable-btn {
+  cursor: pointer;
+  transition: transform 0.2s ease-in-out;
 }
 
-#inspire .v-app-bar {
-  background-color: #fff;
+.clickable-btn:hover {
+  transform: translateY(-2px);
 }
 </style>
diff --git a/pages/KlinikRuangAdmin.vue b/pages/KlinikRuangAdmin.vue
index 101b952..c417954 100644
--- a/pages/KlinikRuangAdmin.vue
+++ b/pages/KlinikRuangAdmin.vue
@@ -1,196 +1,82 @@
 <template>
-  <v-app id="inspire">
-    <!-- App Bar Header -->
-      <v-app-bar app color="green darken-1" dark>
-        <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
-        <v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn icon>
-          <v-icon>mdi-account-circle</v-icon>
-        </v-btn>
-        <span class="mr-2">Rajal Bayu Nogroho</span>
-      </v-app-bar>
+  <v-divider class="my-8"></v-divider>
+  <v-main class="bg-grey-lighten-3">
+    <v-container>
+      <!-- Klinik Ruang Admin Content -->
+      <h1 class="text-h4 mb-4 mt-10">Klinik Ruang Admin</h1>
+      <v-card class="pa-4 mb-4">
+        <v-card-title>GENERATE TIKET</v-card-title>
+        <div class="d-flex align-center">
+          <v-text-field
+            label="Masukkan Barcode"
+            variant="outlined"
+            density="compact"
+            class="mr-4"
+          ></v-text-field>
+          <v-col cols="12 " md="6">
+            <v-chip color="#B71C1C" class="text-caption">
+              Tekan Enter: (Apabila barcode depan nomor ada huruf lain, ex: J008730180085 "hiraukan huruf 'J' nya")
+            </v-chip>
+          </v-col>
+        </div>
+      </v-card>
 
-      <!-- Navigation Drawer -->
-      <v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
-        <v-list density="compact" nav>
-          <template v-for="item in items" :key="item.title">
-            <v-menu
-              v-if="item.children"
-              open-on-hover
-              location="end"
-              :nudge-right="3"
-            >
-              <template v-slot:activator="{ props }">
-                <v-list-item
-                  v-bind="props"
-                  :prepend-icon="item.icon"
-                  :title="item.title"
-                  :value="item.title"
-                  :class="{ 'v-list-item--active': item.title === currentPage }"
-                >
-                </v-list-item>
-              </template>
-
-              <v-list>
-                <v-list-item>
-                  <v-list-item-title class="font-weight-bold">{{
-                    item.title
-                  }}</v-list-item-title>
-                </v-list-item>
-                <v-divider></v-divider>
-                <v-list-item
-                  v-for="child in item.children"
-                  :key="child.title"
-                  :to="child.to"
-                  link
-                >
-                  <v-list-item-title>{{ child.title }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-
-            <v-list-item
-              v-else
-              :prepend-icon="item.icon"
-              :title="item.title"
-              :to="item.to"
-              :value="item.title"
-              :class="{ 'v-list-item--active': item.title === currentPage }"
-              link
-            ></v-list-item>
-          </template>
-        </v-list>
-      </v-navigation-drawer>  
-
-    <!-- Main Content -->
-    <v-main class="bg-grey-lighten-3">
-      <v-container>
-        <!-- Klinik Ruang Admin Content -->
-        <h1 class="text-h4 mb-4">Klinik Ruang Admin</h1>
-        <v-card class="pa-4 mb-4">
-          <v-card-title>GENERATE TIKET</v-card-title>
+      <v-card class="pa-4">
+        <v-card-title>Pasien Klinik Ruang Admin</v-card-title>
+        <div class="d-flex justify-space-between align-center my-3">
           <div class="d-flex align-center">
-            <v-text-field
-              label="Masukkan Barcode"
-              variant="outlined"
+            <span>Show</span>
+            <v-select
               density="compact"
-              class="mr-4"
-            ></v-text-field> 
-            <v-col cols="12 " md="6">
-                <v-chip color="#B71C1C" class="text-caption">
-                  Tekan Enter: (Apabila barcode depan nomor ada huruf lain, ex:
-                    J008730180085 "hiraukan huruf 'J' nya")
-                </v-chip>
-              </v-col>
-          </div>
-         
-        </v-card>
-
-        <v-card class="pa-4">
-          <v-card-title>Pasien Klinik Ruang Admin</v-card-title>
-          <div class="d-flex justify-space-between align-center my-3">
-            <div class="d-flex align-center">
-              <span>Show</span>
-              <v-select
-                density="compact"
-                variant="outlined"
-                :items="[10, 25, 50, 100]"
-                class="mx-2"
-                style="width: 80px"
-              ></v-select>
-              <span>entries</span>
-            </div>
-            <v-text-field
-              label="Search"
               variant="outlined"
-              density="compact"
-              style="max-width: 200px"
-            ></v-text-field>
+              :items="[10, 25, 50, 100]"
+              class="mx-2"
+              style="width: 80px"
+            ></v-select>
+            <span>entries</span>
           </div>
+          <v-text-field
+            label="Search"
+            variant="outlined"
+            density="compact"
+            style="max-width: 200px"
+          ></v-text-field>
+        </div>
 
-          <v-table class="mt-3">
-            <thead>
-              <tr>
-                <th
-                  v-for="header in klinikRuangAdminHeaders"
-                  :key="header.text"
-                >
-                  {{ header.text }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td :colspan="klinikRuangAdminHeaders.length" class="text-center">
-                  No data available in table
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
+        <v-table class="mt-3">
+          <thead>
+            <tr>
+              <th
+                v-for="header in klinikRuangAdminHeaders"
+                :key="header.text"
+              >
+                {{ header.text }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td :colspan="klinikRuangAdminHeaders.length" class="text-center">
+                No data available in table
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
 
-          <div class="d-flex justify-space-between align-center mt-3">
-            <span>Showing 0 to 0 of 0 entries</span>
-            <div>
-              <v-btn size="small" variant="text" disabled>Previous</v-btn>
-              <v-btn size="small" variant="text" disabled>Next</v-btn>
-            </div>
+        <div class="d-flex justify-space-between align-center mt-3">
+          <span>Showing 0 to 0 of 0 entries</span>
+          <div>
+            <v-btn size="small" variant="text" disabled>Previous</v-btn>
+            <v-btn size="small" variant="text" disabled>Next</v-btn>
           </div>
-        </v-card>
-      </v-container>
-    </v-main>
-  </v-app>
+        </div>
+      </v-card>
+    </v-container>
+  </v-main>
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
-
-// Reactive data
-const drawer = ref(true); // Nilai awal true agar sidebar terlihat
-const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
-const search = ref("");
-const lateSearch = ref("");
-const clinicSearch = ref("");
-const itemsPerPage = ref(10);
-const lateItemsPerPage = ref(10);
-const clinicItemsPerPage = ref(10);
-const currentPage = ref("Klinik Ruang Admin");
-
-// Navigation items
-const items = ref([
-  { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
-
-  {
-    title: "Setting",
-    icon: "mdi-cog",
-    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", to : "/LoketAdmin" },
-  { title: "Ranap Admin", icon: "mdi-bed" },
-  { title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
-  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
-
-  { 
-    title: "Anjungan", 
-    icon: "mdi-account-box-multiple", 
-    children: [
-      {title: "Anjungan", to: "/Anjungan/Anjungan"},
-      {title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
-    ],
-  },
-  { title: "Fast Track", icon: "mdi-clock-fast" },
-  { title: "Data Pasien", icon: "mdi-account-multiple" },
-  { title: "Screen", icon: "mdi-monitor" },
-  { title: "List Pasien", icon: "mdi-format-list-bulleted" },
-]);
-
+import { ref } from "vue";
 
 const klinikRuangAdminHeaders = [
   { text: 'No' },
@@ -204,15 +90,8 @@ const klinikRuangAdminHeaders = [
   { text: 'Action' },
   { text: 'Status' },
 ]
-
 </script>
 
 <style scoped>
-#inspire .v-navigation-drawer__content {
-  background-color: #f5f5f5;
-}
-
-#inspire .v-app-bar {
-  background-color: #fff;
-}
+/* Scoped styles can be added here if needed for this specific component */
 </style>
diff --git a/pages/LoketAdmin.vue b/pages/LoketAdmin.vue
index ee7efdf..95a7921 100644
--- a/pages/LoketAdmin.vue
+++ b/pages/LoketAdmin.vue
@@ -1,321 +1,215 @@
 <template>
-  <v-app>
-    <v-layout>
-      <!-- App Bar Header -->
-      <v-app-bar app color="green darken-1" dark>
-        <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
-        <v-toolbar-title class="ml-2">Antrean RSSA</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn icon>
-          <v-icon>mdi-account-circle</v-icon>
-        </v-btn>
-        <span class="mr-2">Rajal Bayu Nogroho</span>
-      </v-app-bar>
+  <!-- Main Content -->
+  <v-main>
+    <v-container fluid class="pa-4 main-content-padding">
+      <!-- Header Stats -->
+      <div class="d-flex justify-space-between align-center mb-4">
+        <div class="d-flex align-center">
+          <span class="text-h6 mr-4">Total 0</span>
+          <span class="text-body-2">Max 150 Pasien</span>
+        </div>
+        <div class="d-flex align-center">
+          <span class="mr-4">Dashboard</span>
+          <span class="mr-4">Loket 24 | Senin, 11 Agustus 2025</span>
+          <span class="mr-4">11 Agustus 2025 - Pelayanan</span>
+        </div>
+      </div>
 
-      <!-- Navigation Drawer -->
-      <v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
-        <v-list density="compact" nav>
-          <template v-for="item in items" :key="item.title">
-            <v-menu
-              v-if="item.children"
-              open-on-hover
-              location="end"
-              :nudge-right="8"
-            >
-              <template v-slot:activator="{ props }">
-                <v-list-item
-                  v-bind="props"
-                  :prepend-icon="item.icon"
-                  :title="item.title"
-                  :value="item.title"
-                  :class="{ 'v-list-item--active': item.title === currentPage }"
-                >
-                </v-list-item>
-              </template>
-
-              <v-list>
-                <v-list-item>
-                  <v-list-item-title class="font-weight-bold">{{
-                    item.title
-                  }}</v-list-item-title>
-                </v-list-item>
-                <v-divider></v-divider>
-                <v-list-item
-                  v-for="child in item.children"
-                  :key="child.title"
-                  :to="child.to"
-                  link
-                >
-                  <v-list-item-title>{{ child.title }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-
-            <v-list-item
-              v-else
-              :prepend-icon="item.icon"
-              :title="item.title"
-              :to="item.to"
-              :value="item.title"
-              :class="{ 'v-list-item--active': item.title === currentPage }"
-              link
-            ></v-list-item>
-          </template>
-        </v-list>
-      </v-navigation-drawer>
-
-      <!-- Main Content -->
-      <v-main>
-        <v-container fluid class="pa-4">
-          <!-- Header Stats -->
-          <div class="d-flex justify-space-between align-center mb-4">
-            <div class="d-flex align-center">
-              <span class="text-h6 mr-4">Total 0</span>
-              <span class="text-body-2">Max 150 Pasien</span>
-            </div>
-            <div class="d-flex align-center">
-              <span class="mr-4">Dashboard</span>
-              <span class="mr-4">Loket 24 | Senin, 11 Agustus 2025</span>
-              <span class="mr-4">11 Agustus 2025 - Pelayanan</span>
-            </div>
-          </div>
-
-          <!-- Status Cards -->
-          <v-card class="pa-5 mb-5" color="white" flat></v-card>
-          <v-row align="center">
-            <v-col cols="1
-            2" md="1">
-              <v-card color="green" dark class="text-center">
-                <v-card-text>
-                  <div class="text-h4">1</div>
-                </v-card-text>
-              </v-card>
-            </v-col>
-            <v-col cols="12" md="1">
-              <v-card color="blue" dark class="text-center">
-                <v-card-text>
-                  <div class="text-h4">1</div>
-                </v-card-text>
-              </v-card>
-            </v-col>
-            <v-col cols="12" md="1">
-              <v-card color="orange" dark class="text-center">
-                <v-card-text>
-                  <div class="text-h4">4</div>
-                </v-card-text>
-              </v-card>
-            </v-col>
-            <v-col cols="12" md="1">
-              <v-card color="red" dark class="text-center">
-                <v-card-text>
-                  <div class="text-h4">30</div>
-                </v-card-text>
-              </v-card>
-            </v-col>
-          </v-row>
-        
-
-          <!-- Next Patient Card -->
-          <v-col cols="12" md="4">
-            <v-card color="green" dark class="mb-4">
-              <v-card-text class="text-center">
-                <div class="text-h4 mb-2">NEXT</div>
-                <div class="text-h6 mb-1">Pasien : UM1001</div>
-                <div class="text-body-2">
-                  Klik untuk memanggil pasien selanjutnya
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-col>
-
-          <!-- Main Data Table -->
-          <v-card class="mb-4">
-            <v-card-title class="d-flex justify-space-between align-center">
-              <span>Data Pasien</span>
-              <div class="d-flex align-center">
-                <span class="mr-2">Show</span>
-                <v-select
-                  v-model="itemsPerPage"
-                  :items="[10, 25, 50, 100]"
-                  density="compact"
-                  variant="outlined"
-                  style="max-width: 80px"
-                  class="mr-4"
-                ></v-select>
-                <span class="mr-2">entries</span>
-                <span class="mr-4">Search:</span>
-                <v-text-field
-                  v-model="search"
-                  density="compact"
-                  variant="outlined"
-                  style="max-width: 200px"
-                  hide-details
-                ></v-text-field>
-              </div>
-            </v-card-title>
-            <v-data-table
-              :headers="mainHeaders"
-              :items="mainPatients"
-              :search="search"
-              :items-per-page="itemsPerPage"
-              class="elevation-1"
-            >
-              <template v-slot:item.aksi="{ item }">
-                <div class="d-flex ga-1">
-                  <v-btn size="small" color="success" variant="flat"
-                    >Panggil</v-btn
-                  >
-                  <v-btn size="small" color="info" variant="flat">Cancel</v-btn>
-                  <v-btn size="small" color="primary" variant="flat"
-                    >Selesai</v-btn
-                  >
-                </div>
-              </template>
-              <template v-slot:item.jamPanggil="{ item }">
-                <span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
-              </template>
-            </v-data-table>
-          </v-card>
-
-          <!-- Total Quota Used -->
-          <v-card color="cyan" dark class="mb-4">
-            <v-card-text class="text-center">
-              <div class="text-h6">Total Quota Terpakai 5</div>
+      <!-- Status Cards -->
+      <v-card class="pa-5 mb-5" color="white" flat></v-card>
+      <v-row align="center">
+        <v-col cols="12" md="1">
+          <v-card color="green" dark class="text-center clickable-card" @click="handleStatusCardClick('1')">
+            <v-card-text>
+              <div class="text-h4">1</div>
             </v-card-text>
           </v-card>
-
-          <!-- Late Patients Table -->
-          <v-card class="mb-4">
-            <v-card-title class="d-flex justify-space-between align-center">
-              <span>Info Pasien Lapor Terlambat</span>
-              <div class="d-flex align-center">
-                <span class="mr-2 text-caption text-orange"
-                  >KETERANGAN: PASIEN MASUK PADA TANGGAL</span
-                >
-                <span class="mr-2">Show</span>
-                <v-select
-                  v-model="lateItemsPerPage"
-                  :items="[10, 25, 50, 100]"
-                  density="compact"
-                  variant="outlined"
-                  style="max-width: 80px"
-                  class="mr-4"
-                ></v-select>
-                <span class="mr-2">entries</span>
-                <span class="mr-4">Search:</span>
-                <v-text-field
-                  v-model="lateSearch"
-                  density="compact"
-                  variant="outlined"
-                  style="max-width: 200px"
-                  hide-details
-                ></v-text-field>
-              </div>
-            </v-card-title>
-            <v-data-table
-              :headers="lateHeaders"
-              :items="latePatients"
-              :search="lateSearch"
-              :items-per-page="lateItemsPerPage"
-              class="elevation-1"
-            >
-              <template v-slot:no-data>
-                <div class="text-center pa-4">No data available in table</div>
-              </template>
-            </v-data-table>
+        </v-col>
+        <v-col cols="12" md="1">
+          <v-card color="blue" dark class="text-center clickable-card" @click="handleStatusCardClick('5')">
+            <v-card-text>
+              <div class="text-h4">5</div>
+            </v-card-text>
           </v-card>
-
-          <!-- Clinic Entry Patients Table -->
-          <v-card>
-            <v-card-title class="d-flex justify-space-between align-center">
-              <span>Info Pasien Masuk Klinik</span>
-              <div class="d-flex align-center">
-                <span class="mr-2">Show</span>
-                <v-select
-                  v-model="clinicItemsPerPage"
-                  :items="[10, 25, 50, 100]"
-                  density="compact"
-                  variant="outlined"
-                  style="max-width: 80px"
-                  class="mr-4"
-                ></v-select>
-                <span class="mr-2">entries</span>
-                <span class="mr-4">Search:</span>
-                <v-text-field
-                  v-model="clinicSearch"
-                  density="compact"
-                  variant="outlined"
-                  style="max-width: 200px"
-                  hide-details
-                ></v-text-field>
-              </div>
-            </v-card-title>
-            <v-data-table
-              :headers="clinicHeaders"
-              :items="clinicPatients"
-              :search="clinicSearch"
-              :items-per-page="clinicItemsPerPage"
-              class="elevation-1"
-            >
-              <template v-slot:no-data>
-                <div class="text-center pa-4">No data available in table</div>
-              </template>
-            </v-data-table>
+        </v-col>
+        <v-col cols="12" md="1">
+          <v-card color="orange" dark class="text-center clickable-card" @click="handleStatusCardClick('10')">
+            <v-card-text>
+              <div class="text-h4">10</div>
+            </v-card-text>
           </v-card>
-        </v-container>
-      </v-main>
-    </v-layout>
-  </v-app>
+        </v-col>
+        <v-col cols="12" md="1">
+          <v-card color="red" dark class="text-center clickable-card" @click="handleStatusCardClick('20')">
+            <v-card-text>
+              <div class="text-h4">20</div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    
+
+      <!-- Next Patient Card -->
+      <v-col cols="12" md="4">
+        <v-card color="green" dark class="mb-4 clickable-card" @click="handleNextPatientClick">
+          <v-card-text class="text-center">
+            <div class="text-h4 mb-2">NEXT</div>
+            <div class="text-h6 mb-1">Pasien : UM1001</div>
+            <div class="text-body-2">
+              Klik untuk memanggil pasien selanjutnya
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <!-- Main Data Table -->
+      <v-card class="mb-4">
+        <v-card-title class="d-flex justify-space-between align-center">
+          <span>Data Pasien</span>
+          <div class="d-flex align-center">
+            <span class="mr-2">Show</span>
+            <v-select
+              v-model="itemsPerPage"
+              :items="[10, 25, 50, 100]"
+              density="compact"
+              variant="outlined"
+              style="max-width: 80px"
+              class="mr-4"
+            ></v-select>
+            <span class="mr-2">entries</span>
+            <span class="mr-4">Search:</span>
+            <v-text-field
+              v-model="search"
+              density="compact"
+              variant="outlined"
+              style="max-width: 200px"
+              hide-details
+            ></v-text-field>
+          </div>
+        </v-card-title>
+        <v-data-table
+          :headers="mainHeaders"
+          :items="mainPatients"
+          :search="search"
+          :items-per-page="itemsPerPage"
+          class="elevation-1"
+        >
+          <template v-slot:item.aksi="{ item }">
+            <div class="d-flex ga-1">
+              <v-btn size="small" color="success" variant="flat"
+                >Panggil</v-btn
+              >
+              <v-btn size="small" color="info" variant="flat">Cancel</v-btn>
+              <v-btn size="small" color="primary" variant="flat"
+                >Selesai</v-btn
+              >
+            </div>
+          </template>
+          <template v-slot:item.jamPanggil="{ item }">
+            <span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
+          </template>
+        </v-data-table>
+      </v-card>
+
+      <!-- Total Quota Used -->
+      <v-card color="cyan" dark class="mb-4">
+        <v-card-text class="text-center">
+          <div class="text-h6">Total Quota Terpakai 5</div>
+        </v-card-text>
+      </v-card>
+
+      <!-- Late Patients Table -->
+      <v-card class="mb-4">
+        <v-card-title class="d-flex justify-space-between align-center">
+          <span>Info Pasien Lapor Terlambat</span>
+          <div class="d-flex align-center">
+            <span class="mr-2 text-caption text-orange"
+              >KETERANGAN: PASIEN MASUK PADA TANGGAL</span
+            >
+            <span class="mr-2">Show</span>
+            <v-select
+              v-model="lateItemsPerPage"
+              :items="[10, 25, 50, 100]"
+              density="compact"
+              variant="outlined"
+              style="max-width: 80px"
+              class="mr-4"
+            ></v-select>
+            <span class="mr-2">entries</span>
+            <span class="mr-4">Search:</span>
+            <v-text-field
+              v-model="lateSearch"
+              density="compact"
+              variant="outlined"
+              style="max-width: 200px"
+              hide-details
+            ></v-text-field>
+          </div>
+        </v-card-title>
+        <v-data-table
+          :headers="lateHeaders"
+          :items="latePatients"
+          :search="lateSearch"
+          :items-per-page="lateItemsPerPage"
+          class="elevation-1"
+        >
+          <template v-slot:no-data>
+            <div class="text-center pa-4">No data available in table</div>
+          </template>
+        </v-data-table>
+      </v-card>
+
+      <!-- Clinic Entry Patients Table -->
+      <v-card>
+        <v-card-title class="d-flex justify-space-between align-center">
+          <span>Info Pasien Masuk Klinik</span>
+          <div class="d-flex align-center">
+            <span class="mr-2">Show</span>
+            <v-select
+              v-model="clinicItemsPerPage"
+              :items="[10, 25, 50, 100]"
+              density="compact"
+              variant="outlined"
+              style="max-width: 80px"
+              class="mr-4"
+            ></v-select>
+            <span class="mr-2">entries</span>
+            <span class="mr-4">Search:</span>
+            <v-text-field
+              v-model="clinicSearch"
+              density="compact"
+              variant="outlined"
+              style="max-width: 200px"
+              hide-details
+            ></v-text-field>
+          </div>
+        </v-card-title>
+        <v-data-table
+          :headers="clinicHeaders"
+          :items="clinicPatients"
+          :search="clinicSearch"
+          :items-per-page="clinicItemsPerPage"
+          class="elevation-1"
+        >
+          <template v-slot:no-data>
+            <div class="text-center pa-4">No data available in table</div>
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-container>
+  </v-main>
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref } from "vue";
 
 // Reactive data
-const drawer = ref(true); // Nilai awal true agar sidebar terlihat
-const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
 const search = ref("");
 const lateSearch = ref("");
 const clinicSearch = ref("");
 const itemsPerPage = ref(10);
 const lateItemsPerPage = ref(10);
 const clinicItemsPerPage = ref(10);
-const currentPage = ref("Loket Admin");
-
-// Navigation items
-const items = ref([
-  { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
-
-  {
-    title: "Setting",
-    icon: "mdi-cog",
-    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", to : "/LoketAdmin" },
-  { title: "Ranap Admin", icon: "mdi-bed" },
-  { title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
-  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
-
-  { 
-    title: "Anjungan", 
-    icon: "mdi-account-box-multiple", 
-    children: [
-      {title: "Anjungan", to: "/Anjungan/Anjungan"},
-      {title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
-    ],
-  },
-  { title: "Fast Track", icon: "mdi-clock-fast" },
-  { title: "Data Pasien", icon: "mdi-account-multiple" },
-  { title: "Screen", icon: "mdi-monitor" },
-  { title: "List Pasien", icon: "mdi-format-list-bulleted" },
-]);
 
 // Table headers
 const mainHeaders = ref([
@@ -427,6 +321,16 @@ const getRowClass = (item) => {
   }
   return "";
 };
+
+const handleStatusCardClick = (value) => {
+  console.log(`Status card with value ${value} was clicked!`);
+  // Tambahkan logika Anda di sini
+};
+
+const handleNextPatientClick = () => {
+  console.log("Next Patient card was clicked!");
+  // Tambahkan logika untuk memanggil pasien selanjutnya di sini
+};
 </script>
 
 <style scoped>
@@ -453,4 +357,17 @@ const getRowClass = (item) => {
 :deep(.v-data-table tbody tr:nth-child(1)) {
   background-color: #fff3cd !important;
 }
+
+.main-content-padding {
+  padding-left: 64px !important;
+}
+
+.clickable-card {
+  cursor: pointer;
+  transition: transform 0.2s ease-in-out;
+}
+
+.clickable-card:hover {
+  transform: translateY(-4px);
+}
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index a45d0da..7bb6dcc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,244 +1,188 @@
 <template>
-  <v-app>
-    <v-layout>
-      <!-- App Bar Header -->
-      <v-app-bar app color="green darken-1" dark>
-        <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
-        <v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn icon>
-          <v-icon>mdi-account-circle</v-icon>
-        </v-btn>
-        <span class="mr-2">Rajal Bayu Nogroho</span>
-      </v-app-bar>
+  <v-main class="bg-grey-lighten-3">
+    <!-- Konten utama dibungkus dalam div yang menyesuaikan padding kiri -->
+    <div :style="contentStyle">
+      <v-container fluid>
+        <p>Admin Anjungan</p>
+        <v-card class="pa-5 mb-5" color="white" flat>
+          <v-row align="center">
+            <v-col cols="12" md="4">
+              <v-text-field
+                label="Barcode"
+                placeholder="Masukkan Barcode"
+                outlined
+                dense
+                hide-details
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-chip color="#B71C1C" class="text-caption">
+                Tekan Enter. (Barcode depan nomor selalu ada huruf lain, Ex:
+                J20073010005 "Hiraukan huruf 'J' nya")
+              </v-chip>
+            </v-col>
+            <v-col cols="12" md="2">
+              <v-btn block color="info">Pendaftaran Online</v-btn>
+            </v-col>
+          </v-row>
+        </v-card>
 
-      <!-- Navigation Drawer -->
-      <v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
-        <v-list density="compact" nav>
-          <template v-for="item in items" :key="item.title">
-            <v-menu
-              v-if="item.children"
-              open-on-hover
-              location="end"
-              :nudge-right="3"
+        <v-divider class="my-5"></v-divider>
+
+        <v-card class="mb-5">
+          <v-toolbar flat color="transparent" dense>
+            <v-toolbar-title class="text-subtitle-1 font-weight-bold red--text">
+              DATA PENGUNJUNG TERLAMBAT
+            </v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-text-field
+              v-model="searchLate"
+              append-icon="mdi-magnify"
+              label="Search"
+              single-line
+              hide-details
+              dense
+              class="mr-2"
+              variant="outlined"
+            ></v-text-field>
+            <v-select
+              :items="[10, 25, 50, 100]"
+              label="Show"
+              dense
+              single-line
+              hide-details
+              class="shrink"
+              variant="outlined"
+            ></v-select>
+          </v-toolbar>
+          <v-card-text>
+            <v-data-table
+              :headers="lateHeaders"
+              :items="lateVisitors"
+              :search="searchLate"
+              no-data-text="No data available in table"
+              hide-default-footer
+              class="elevation-1"
+            ></v-data-table>
+            <div class="d-flex justify-end pt-2">
+              <v-pagination
+                v-model="page"
+                :length="10"
+                :total-visible="5"
+              ></v-pagination>
+            </div>
+          </v-card-text>
+        </v-card>
+
+        <v-divider class="my-5"></v-divider>
+
+        <v-card>
+          <v-toolbar flat color="transparent" dense>
+            <v-toolbar-title class="text-subtitle-1 font-weight-bold red--text">
+              DATA PENGUNJUNG
+            </v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-text-field
+              v-model="search"
+              append-icon="mdi-magnify"
+              label="Search"
+              single-line
+              hide-details
+              dense
+              class="mr-2"
+              variant="outlined"
+            ></v-text-field>
+            <v-select
+              :items="[10, 25, 50, 100]"
+              label="Show"
+              dense
+              single-line
+              hide-details
+              class="shrink"
+              variant="outlined"
+            ></v-select>
+          </v-toolbar>
+          <v-card-text>
+            <v-data-table
+              :headers="headers"
+              :items="visitors"
+              :search="search"
+              no-data-text="No data available in table"
+              class="elevation-1"
             >
-              <template v-slot:activator="{ props }">
-                <v-list-item
-                  v-bind="props"
-                  :prepend-icon="item.icon"
-                  :title="item.title"
-                  :value="item.title"
-                  :class="{ 'v-list-item--active': item.title === currentPage }"
-                >
-                </v-list-item>
+              <template v-slot:item.aksi="{ item }">
+                <div class="d-flex flex-column">
+                  <v-btn small color="success" class="my-1">Tiket</v-btn>
+                  <v-btn small color="primary" class="my-1">Tiket Pengantar</v-btn>
+                  <v-btn small color="warning" class="my-1">ByPass</v-btn>
+                </div>
               </template>
-
-              <v-list>
-                <v-list-item>
-                  <v-list-item-title class="font-weight-bold">{{
-                    item.title
-                  }}</v-list-item-title>
-                </v-list-item>
-                <v-divider></v-divider>
-                <v-list-item
-                  v-for="child in item.children"
-                  :key="child.title"
-                  :to="child.to"
-                  link
-                >
-                  <v-list-item-title>{{ child.title }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-
-            <v-list-item
-              v-else
-              :prepend-icon="item.icon"
-              :title="item.title"
-              :to="item.to"
-              :value="item.title"
-              :class="{ 'v-list-item--active': item.title === currentPage }"
-              link
-            ></v-list-item>
-          </template>
-        </v-list>
-      </v-navigation-drawer>    
-
-      <v-main>
-        <v-container fluid>
-          <p>Admin Anjungan</p>
-          <v-card class="pa-5 mb-5" color="white" flat>
-            <v-row align="center">
-              <v-col cols="12" md="4">
-                <v-text-field
-                  label="Barcode"
-                  placeholder="Masukkan Barcode"
-                  outlined
-                  dense
-                  hide-details
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-chip color="#B71C1C" class="text-caption">
-                  Tekan Enter. (Barcode depan nomor selalu ada huruf lain, Ex:
-                  J20073010005 "Hiraukan huruf 'J' nya")
-                </v-chip>
-              </v-col>
-              <v-col cols="12" md="2">
-                <v-btn block color="info">Pendaftaran Online</v-btn>
-              </v-col>
-            </v-row>
-          </v-card>
-
-          <v-divider class="my-5"></v-divider>
-
-          <v-card class="mb-5">
-            <v-toolbar flat color="transparent" dense>
-              <v-toolbar-title
-                class="text-subtitle-1 font-weight-bold red--text"
-                >DATA PENGUNJUNG TERLAMBAT</v-toolbar-title
-              >
-              <v-spacer></v-spacer>
-              <v-text-field
-                v-model="searchLate"
-                append-icon="mdi-magnify"
-                label="Search"
-                single-line
-                hide-details
-                dense
-                class="mr-2"
-              ></v-text-field>
-              <v-select
-                :items="[10, 25, 50, 100]"
-                label="Show"
-                dense
-                single-line
-                hide-details
-                class="shrink"
-              ></v-select>
-            </v-toolbar>
-            <v-card-text>
-              <v-data-table
-                :headers="lateHeaders"
-                :items="lateVisitors"
-                :search="searchLate"
-                no-data-text="No data available in table"
-                hide-default-footer
-                class="elevation-1"
-              ></v-data-table>
-              <div class="d-flex justify-end pt-2">
-                <v-pagination
-                  v-model="page"
-                  :length="10"
-                  :total-visible="5"
-                ></v-pagination>
-              </div>
-            </v-card-text>
-          </v-card>
-
-          <v-divider class="my-5"></v-divider>
-
-          <v-card>
-            <v-toolbar flat color="transparent" dense>
-              <v-toolbar-title
-                class="text-subtitle-1 font-weight-bold red--text"
-                >DATA PENGUNJUNG</v-toolbar-title
-              >
-              <v-spacer></v-spacer>
-              <v-text-field
-                v-model="search"
-                append-icon="mdi-magnify"
-                label="Search"
-                single-line
-                hide-details
-                dense
-                class="mr-2"
-              ></v-text-field>
-              <v-select
-                :items="[10, 25, 50, 100]"
-                label="Show"
-                dense
-                single-line
-                hide-details
-                class="shrink"
-              ></v-select>
-            </v-toolbar>
-            <v-card-text>
-              <v-data-table
-                :headers="headers"
-                :items="visitors"
-                :search="search"
-                no-data-text="No data available in table"
-                class="elevation-1"
-                :footer-props="{
-                  'items-per-page-options': [10, 25, 50, 100],
-                  'show-current-page': true,
-                }"
-              >
-                <template v-slot:item.aksi="{ item }">
-                  <div class="d-flex flex-column">
-                    <v-btn small color="success" class="my-1">Tiket</v-btn>
-                    <v-btn small color="primary" class="my-1"
-                      >Tiket Pengantar</v-btn
-                    >
-                    <v-btn small color="warning" class="my-1">ByPass</v-btn>
-                  </div>
-                </template>
-              </v-data-table>
-            </v-card-text>
-          </v-card>
-        </v-container>
-      </v-main>
-    </v-layout>
-  </v-app>
+            </v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-container>
+    </div>
+  </v-main>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 
-const drawer = ref(true); // Nilai awal true agar sidebar terlihat
-const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
+// Definisikan props untuk menerima status 'rail' dari layout induk
+const props = defineProps({
+  rail: Boolean,
+});
+
+// Reactive data
 const search = ref("");
-const lateSearch = ref("");
-const clinicSearch = ref("");
-const itemsPerPage = ref(10);
-const lateItemsPerPage = ref(10);
-const clinicItemsPerPage = ref(10);
-const currentPage = ref("Admin Anjungan");
+const searchLate = ref("");
+const page = ref(1);
 
+// Gaya komputasi untuk menyesuaikan padding
+const contentStyle = computed(() => {
+  return {
+    paddingLeft: props.rail ? '56px' : '256px',
+    transition: 'padding-left 0.3s ease-in-out',
+  };
+});
 
-// Struktur data yang memisahkan menu dengan dan tanpa submenu
-const items = ref([
-  { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
+// Table headers for late visitors
+const lateHeaders = [
+  { text: 'No', value: 'no' },
+  { text: 'Barcode', value: 'barcode' },
+  { text: 'No Rekamedik', value: 'noRekamedik' },
+  { text: 'No Antrian', value: 'noAntrian' },
+  { text: 'No Antrian Klinik', value: 'noAntrianKlinik' },
+  { text: 'Shift', value: 'shift' },
+  { text: 'Pembayaran', value: 'pembayaran' },
+  { text: 'Status', value: 'status' },
+];
 
-  {
-    title: "Setting",
-    icon: "mdi-cog",
-    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", to : "/LoketAdmin" },
-  { title: "Ranap Admin", icon: "mdi-bed" },
-  { title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
-  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
+// Table headers for all visitors
+const headers = [
+  { text: 'No', value: 'no' },
+  { text: 'Barcode', value: 'barcode' },
+  { text: 'No Rekamedik', value: 'noRekamedik' },
+  { text: 'No Antrian', value: 'noAntrian' },
+  { text: 'Shift', value: 'shift' },
+  { text: 'Ket', value: 'ket' },
+  { text: 'Fast Track', value: 'fastTrack' },
+  { text: 'Pembayaran', value: 'pembayaran' },
+  { text: 'Panggil', value: 'panggil' },
+  { text: 'Aksi', value: 'aksi' },
+];
 
-  { 
-    title: "Anjungan", 
-    icon: "mdi-account-box-multiple", 
-    children: [
-      {title: "Anjungan", to: "/Anjungan/Anjungan"},
-      {title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
-    ],
-  },
-  { title: "Fast Track", icon: "mdi-clock-fast" },
-  { title: "Data Pasien", icon: "mdi-account-multiple" },
-  { title: "Screen", icon: "mdi-monitor" },
-  { title: "List Pasien", icon: "mdi-format-list-bulleted" },
+// Mock data for late visitors
+const lateVisitors = ref([
+  { no: 1, barcode: '250813100928', noRekamedik: 'RM001', noAntrian: 'ON1045', noAntrianKlinik: 'K1', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
+  { no: 2, barcode: '250813100930', noRekamedik: 'RM002', noAntrian: 'GI1018', noAntrianKlinik: 'K2', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
+  { no: 3, barcode: '250813100937', noRekamedik: 'RM003', noAntrian: 'MT1073', noAntrianKlinik: 'K3', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
+]);
+
+// Mock data for all visitors
+const visitors = ref([
+  { no: 1, barcode: '250813100928', noRekamedik: 'RM001', noAntrian: 'ON1045', shift: 'Shift 1', ket: '', fastTrack: 'Ya', pembayaran: 'JKN', panggil: 'Ya' },
+  { no: 2, barcode: '250813100930', noRekamedik: 'RM002', noAntrian: 'GI1018', shift: 'Shift 1', ket: '', fastTrack: 'Tidak', pembayaran: 'JKN', panggil: 'Tidak' },
+  { no: 3, barcode: '250813100937', noRekamedik: 'RM003', noAntrian: 'MT1073', shift: 'Shift 1', ket: '', fastTrack: 'Tidak', pembayaran: 'JKN', panggil: 'Tidak' },
 ]);
 </script>