diff --git a/package-lock.json b/package-lock.json
index 9a001b1..9d93c95 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@nuxt/test-utils": "^3.19.2",
         "@nuxt/ui": "^3.3.0",
         "@unhead/vue": "^2.0.13",
+        "better-sqlite3": "^12.2.0",
         "eslint": "^9.32.0",
         "nuxt": "^3.17.7",
         "typescript": "^5.8.3",
@@ -7003,6 +7004,20 @@
       ],
       "license": "MIT"
     },
+    "node_modules/better-sqlite3": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-12.2.0.tgz",
+      "integrity": "sha512-eGbYq2CT+tos1fBwLQ/tkBt9J5M3JEHjku4hbvQUePCckkvVf14xWj+1m7dGoK81M/fOjFT7yM9UMeKT/+vFLQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "bindings": "^1.5.0",
+        "prebuild-install": "^7.1.1"
+      },
+      "engines": {
+        "node": "20.x || 22.x || 23.x || 24.x"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -7038,7 +7053,6 @@
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
       "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
@@ -7064,7 +7078,6 @@
         }
       ],
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "base64-js": "^1.3.1",
         "ieee754": "^1.1.13"
@@ -7075,7 +7088,6 @@
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
       "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -8326,7 +8338,6 @@
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
       "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "mimic-response": "^3.1.0"
       },
@@ -8342,7 +8353,6 @@
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
       "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=4.0.0"
       }
@@ -9807,7 +9817,6 @@
       "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
       "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
       "license": "(MIT OR WTFPL)",
-      "optional": true,
       "engines": {
         "node": ">=6"
       }
@@ -10191,8 +10200,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -10364,8 +10372,7 @@
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
       "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/github-slugger": {
       "version": "2.0.0",
@@ -13258,7 +13265,6 @@
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
       "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=10"
       },
@@ -13351,8 +13357,7 @@
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/mlly": {
       "version": "1.7.4",
@@ -13454,8 +13459,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
       "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/napi-postinstall": {
       "version": "0.3.2",
@@ -13628,7 +13632,6 @@
       "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.75.0.tgz",
       "integrity": "sha512-OhYaY5sDsIka7H7AtijtI9jwGYLyl29eQn/W623DiN/MIv5sUqc4g7BIDThX+gb7di9f6xK02nkp8sdfFWZLTg==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "semver": "^7.3.5"
       },
@@ -15149,7 +15152,6 @@
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
       "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "detect-libc": "^2.0.0",
         "expand-template": "^2.0.3",
@@ -15175,15 +15177,13 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
       "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-      "license": "ISC",
-      "optional": true
+      "license": "ISC"
     },
     "node_modules/prebuild-install/node_modules/detect-libc": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
       "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
       "license": "Apache-2.0",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -15193,7 +15193,6 @@
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
       "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -15208,7 +15207,6 @@
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.3.tgz",
       "integrity": "sha512-090nwYJDmlhwFwEW3QQl+vaNnxsO2yVsd45eTKRBzSzu+hlb1w2K9inVq5b0ngXuLVqQ4ApvsUHHnu/zQNkWAg==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "chownr": "^1.1.1",
         "mkdirp-classic": "^0.5.2",
@@ -15221,7 +15219,6 @@
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
       "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "bl": "^4.0.3",
         "end-of-stream": "^1.4.1",
@@ -15456,7 +15453,6 @@
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
       "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
       "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
-      "optional": true,
       "dependencies": {
         "deep-extend": "^0.6.0",
         "ini": "~1.3.0",
@@ -15471,15 +15467,13 @@
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "license": "ISC",
-      "optional": true
+      "license": "ISC"
     },
     "node_modules/rc/node_modules/strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
       "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16227,7 +16221,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16244,7 +16237,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16261,7 +16253,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16278,7 +16269,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16295,7 +16285,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16312,7 +16301,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16329,7 +16317,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16346,7 +16333,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16363,7 +16349,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16380,7 +16365,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16397,7 +16381,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16414,7 +16397,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16431,7 +16413,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16448,7 +16429,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16465,7 +16445,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16482,7 +16461,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16826,8 +16804,7 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/simple-get": {
       "version": "4.0.1",
@@ -16848,7 +16825,6 @@
         }
       ],
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "decompress-response": "^6.0.0",
         "once": "^1.3.1",
@@ -17731,7 +17707,6 @@
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
       "license": "Apache-2.0",
-      "optional": true,
       "dependencies": {
         "safe-buffer": "^5.0.1"
       },
diff --git a/package.json b/package.json
index 2f7f8c1..4f8e97e 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@nuxt/test-utils": "^3.19.2",
     "@nuxt/ui": "^3.3.0",
     "@unhead/vue": "^2.0.13",
+    "better-sqlite3": "^12.2.0",
     "eslint": "^9.32.0",
     "nuxt": "^3.17.7",
     "typescript": "^5.8.3",
diff --git a/pages/LoketAdmin.vue b/pages/LoketAdmin.vue
new file mode 100644
index 0000000..afa0e08
--- /dev/null
+++ b/pages/LoketAdmin.vue
@@ -0,0 +1,447 @@
+<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>
+
+      <!-- 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>
+          </v-card>
+
+          <!-- 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>
+            </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>
+    </v-layout>
+  </v-app>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+// Reactive data
+const drawer = ref(true);
+const rail = ref(false);
+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" },
+  { title: "Ranap Admin", icon: "mdi-bed" },
+  { title: "Klinik Admin", icon: "mdi-hospital-box" },
+  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker" },
+  { 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
+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", value: "panggil" },
+  { 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 },
+]);
+
+// Sample data
+const mainPatients = ref([
+  {
+    no: 1,
+    jamPanggil: "12:49",
+    barcode: "250811100163",
+    noAntrian: "UM1001 | Online - 250811100163",
+    shift: "Shift 1",
+    klinik: "KANDUNGAN",
+    fastTrack: "UMUM",
+    pembayaran: "UMUM",
+    panggil: "Panggil",
+    status: "current",
+  },
+  {
+    no: 2,
+    jamPanggil: "10:52",
+    barcode: "250811100155",
+    noAntrian: "UM1002 | Online - 250811100155",
+    shift: "Shift 1",
+    klinik: "IPD",
+    fastTrack: "UMUM",
+    pembayaran: "UMUM",
+    panggil: "Cancel",
+    status: "normal",
+  },
+  {
+    no: 3,
+    jamPanggil: "07:35",
+    barcode: "250811100355",
+    noAntrian: "UM1005 | Online - 250811100355",
+    shift: "Shift 1",
+    klinik: "THT",
+    fastTrack: "UMUM",
+    pembayaran: "UMUM",
+    panggil: "Panggil",
+    status: "normal",
+  },
+  {
+    no: 4,
+    jamPanggil: "08:05",
+    barcode: "250811100355",
+    noAntrian: "UM1006 | Online - 250811100355",
+    shift: "Shift 1",
+    klinik: "THT",
+    fastTrack: "UMUM",
+    pembayaran: "UMUM",
+    panggil: "Panggil",
+    status: "normal",
+  },
+  {
+    no: 5,
+    jamPanggil: "12:43",
+    barcode: "250811100402",
+    noAntrian: "UM1004 | Online - 250811100402",
+    shift: "Shift 1",
+    klinik: "SARAF",
+    fastTrack: "UMUM",
+    pembayaran: "UMUM",
+    panggil: "Panggil",
+    status: "normal",
+  },
+]);
+
+const latePatients = ref([]);
+
+const clinicPatients = ref([]);
+
+// Methods
+const getRowClass = (item) => {
+  if (item.status === "current") {
+    return "text-green font-weight-bold";
+  }
+  return "";
+};
+</script>
+
+<style scoped>
+.v-list-item--active {
+  background-color: rgba(25, 118, 210, 0.12);
+  color: #1976d2;
+}
+
+.text-green {
+  color: #4caf50 !important;
+}
+
+/* Custom scrollbar */
+:deep(.v-data-table) {
+  font-size: 14px;
+}
+
+:deep(.v-data-table__wrapper) {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+/* Row highlighting */
+:deep(.v-data-table tbody tr:nth-child(1)) {
+  background-color: #fff3cd !important;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 9cb5ceb..4ff7530 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -29,9 +29,6 @@
                   :title="item.title"
                   :value="item.title"
                 >
-                  <v-list-item-title v-if="!rail">{{
-                    item.title
-                  }}</v-list-item-title>
                 </v-list-item>
               </template>
 
@@ -129,8 +126,8 @@
               ></v-data-table>
               <div class="d-flex justify-end pt-2">
                 <v-pagination
-                  v-model="latePage"
-                  :length="latePageCount"
+                  v-model="page"
+                  :length="10"
                   :total-visible="5"
                 ></v-pagination>
               </div>
diff --git a/server/api/datapengunjung.ts b/server/api/datapengunjung.ts
new file mode 100644
index 0000000..e69de29