diff --git a/components/TabelData.vue b/components/TabelData.vue
new file mode 100644
index 0000000..f03e96a
--- /dev/null
+++ b/components/TabelData.vue
@@ -0,0 +1,189 @@
+<template>
+  <v-card-text>
+    <v-toolbar flat color="transparent" dense>
+      <v-toolbar-title class="text-subtitle-1 font-weight-bold" :class="{ 'red--text': title.includes('TERLAMBAT') }">
+        {{ title }}
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <div class="d-flex align-center">
+        <span>Show</span>
+        <v-select
+          :items="[10, 25, 50, 100]"
+          v-model="itemsPerPage"
+          label="entries"
+          dense
+          single-line
+          hide-details
+          class="shrink mx-2"
+          style="width: 80px"
+        ></v-select>
+        <span>entries</span>
+      </div>
+      <div v-if="showSearch" class="d-flex align-center ml-4">
+        <span class="mr-2">Search:</span>
+        <v-text-field
+          v-model="search"
+          label="Search"
+          hide-details
+          density="compact"
+          style="min-width: 200px"
+        ></v-text-field>
+      </div>
+    </v-toolbar>
+
+    <v-data-table
+      :headers="headers"
+      :items="paginatedItems"
+      :search="search"
+      no-data-text="No data available in table"
+      hide-default-footer
+      class="elevation-1"
+    >
+      <template v-slot:item.aksi="{ item }">
+        <slot name="actions" :item="item">
+          </slot>
+      </template>
+    </v-data-table>
+
+    <div class="d-flex justify-space-between align-center pt-4">
+      <div class="text-body-2 text-grey-darken-1">
+        Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalEntries }} entries
+      </div>
+      <div class="d-flex align-center">
+        <v-btn
+          :disabled="currentPage === 1"
+          @click="previousPage"
+          variant="text"
+          size="small"
+          class="text-body-2"
+        >
+          Previous
+        </v-btn>
+        <template v-for="page in visiblePages" :key="page">
+          <v-btn
+            v-if="page !== '...'"
+            :color="page === currentPage ? 'primary' : ''"
+            :variant="page === currentPage ? 'flat' : 'text'"
+            @click="goToPage(page)"
+            size="small"
+            class="mx-1"
+            min-width="40"
+          >
+            {{ page }}
+          </v-btn>
+          <span v-else class="mx-1">...</span>
+        </template>
+        <v-btn
+          :disabled="currentPage === totalPages"
+          @click="nextPage"
+          variant="text"
+          size="small"
+          class="text-body-2"
+        >
+          Next
+        </v-btn>
+      </div>
+    </div>
+  </v-card-text>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { defineProps } from "vue";
+
+const props = defineProps({
+  headers: {
+    type: Array,
+    required: true,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  showSearch: {
+    type: Boolean,
+    default: true,
+  }
+});
+
+const search = ref("");
+const itemsPerPage = ref(10);
+const currentPage = ref(1);
+
+const totalEntries = computed(() => props.items.length);
+const totalPages = computed(() => Math.ceil(totalEntries.value / itemsPerPage.value));
+
+const paginatedItems = computed(() => {
+  const start = (currentPage.value - 1) * itemsPerPage.value;
+  const end = start + itemsPerPage.value;
+  return props.items.slice(start, end);
+});
+
+const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1);
+const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalEntries.value));
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const total = totalPages.value;
+  const current = currentPage.value;
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    if (current <= 4) {
+      for (let i = 1; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    } else if (current >= total - 3) {
+      pages.push(1);
+      pages.push("...");
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+      pages.push("...");
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    }
+  }
+  return pages;
+});
+
+const previousPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--;
+  }
+};
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++;
+  }
+};
+
+const goToPage = (page) => {
+  currentPage.value = page;
+};
+
+// Reset halaman ke 1 saat jumlah itemsPerPage berubah
+watch(itemsPerPage, () => {
+  currentPage.value = 1;
+});
+
+// Reset halaman ke 1 saat data items berubah (misalnya, setelah filter atau fetch data baru)
+watch(() => props.items, () => {
+  currentPage.value = 1;
+});
+</script>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 7fa0d0a..a41788a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -152,7 +152,7 @@ const currentActiveMenu = computed(() => {
 
 <style scoped>
 .v-list-item--active {
-  background-color: var(--v-theme-primary);
-  color: #fff !important;
+  background-color: #ffffff;
+  color: #000000 !important;
 }
 </style>
\ No newline at end of file
diff --git a/pages/Loket-Admin.vue b/pages/Loket-Admin.vue
new file mode 100644
index 0000000..a141cce
--- /dev/null
+++ b/pages/Loket-Admin.vue
@@ -0,0 +1,318 @@
+<template>
+  <v-app>
+    <v-app-bar>
+      <v-container fluid class="pa-4">
+        <v-row align="center" no-gutters class="fill-height">
+          <v-col cols="auto">
+            <div class="d-flex align-center">
+              <div
+                class="bg-grey-darken-4 px-3 py-1 mr-2"
+                style="border-radius: 3px"
+              >
+                <span class="text-body-1 font-weight-bold text-white"
+                  >Total 2</span
+                >
+              </div>
+              <div
+                class="bg-grey-darken-2 px-3 py-1"
+                style="border-radius: 3px"
+              >
+                <span class="text-body-1 text-white">Max 150 Pasien</span>
+              </div>
+            </div>
+          </v-col>
+          <v-spacer />
+          <v-col cols="auto">
+            <div class="d-flex align-center text-body-2">
+              <v-icon size="small" class="mr-2">mdi-view-dashboard</v-icon>
+              <span class="mr-6">Dashboard</span>
+              <span>Loket 12 | Rabu, 13 Agustus 2025 - Pelayanan</span>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-app-bar>
+
+    <div class="bg-cyan" style="height: 3px" />
+
+    <v-main>
+      <v-container fluid class="pa-6">
+        <v-row class="mb-6">
+          <v-col>
+            <div class="text-h6 text-grey-darken-2 font-weight-medium">
+              Loket 12 | Rabu, 13 Agustus 2025 - Pelayanan :
+            </div>
+          </v-col>
+          <v-spacer />
+          <v-col cols="auto">
+            <div class="d-flex align-center">
+              <v-btn
+                color="success"
+                dark
+                size="large"
+                class="mr-4 px-8"
+                style="min-width: 120px; height: 40px"
+              >
+                <span class="text-h6 font-weight-bold">1</span>
+              </v-btn>
+              <v-btn
+                color="info"
+                dark
+                size="large"
+                class="mr-4 px-4"
+                style="min-width: 120px; height: 40px"
+              >
+                <span class="text-h6 font-weight-bold">5</span>
+              </v-btn>
+              <v-btn
+                color="warning"
+                dark
+                size="large"
+                class="mr-4 px-4"
+                style="min-width: 120px; height: 40px"
+              >
+                <span class="text-h6 font-weight-bold">10</span>
+              </v-btn>
+              <v-btn
+                color="error"
+                dark
+                size="large"
+                class="px-4"
+                style="min-width: 120px; height: 40px"
+              >
+                <span class="text-h6 font-weight-bold">20</span>
+              </v-btn>
+            </div>
+          </v-col>
+        </v-row>
+
+        <v-row justify="center" class="pa-12">
+          <v-col cols="12" md="10" lg="8">
+            <v-card
+              color="success"
+              dark
+              flat
+              class="text-center"
+              style="min-height: 160px; border-radius: 8px"
+            >
+              <v-card-text class="pa-8">
+                <div
+                  class="text-h2 font-weight-bold mb-2"
+                  style="letter-spacing: 4px"
+                >
+                  NEXT
+                </div>
+                <div class="text-h6 mb-4 font-weight-normal">
+                  Pasien - UM1004
+                </div>
+                <div
+                  class="text-body-1 font-weight-normal"
+                  style="opacity: 0.9"
+                >
+                  Klik untuk memanggil pasien selanjutnya
+                </div>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+
+        <v-card class="mb-4">
+          <TabelData
+            :headers="mainHeaders"
+            :items="mainPatients"
+            title="DATA PASIEN"
+          >
+            <template #actions="{ 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 #item.jamPanggil="{ item }">
+              <span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
+            </template>
+          </TabelData>
+        </v-card>
+
+        <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>
+
+        <v-card class="mb-4">
+          <TabelData
+            :headers="lateHeaders"
+            :items="latePatients"
+            title="INFO PASIEN LAPOR TERLAMBAT"
+            :show-search="false"
+          >
+            </TabelData>
+        </v-card>
+
+        <v-card class="mb-4">
+          <TabelData
+            :headers="clinicHeaders"
+            :items="clinicPatients"
+            title="INFO PASIEN MASUK KLINIK"
+          >
+            </TabelData>
+        </v-card>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import TabelData from "../components/TabelData.vue";
+
+// Define interfaces
+interface Patient {
+  no: number;
+  jamPanggil: string;
+  barcode: string;
+  noAntrian: string;
+  shift: string;
+  klinik: string;
+  fastTrack: string;
+  pembayaran: string;
+  panggil: string;
+  status: string;
+}
+
+interface LatePatient {
+  no: number;
+  barcode: string;
+  noAntrian: string;
+  shift: string;
+  klinik: string;
+  aksi: string;
+}
+
+interface ClinicPatient {
+  no: number;
+  barcode: string;
+  noAntrian: string;
+  noRM: string;
+  shift: string;
+  klinik: string;
+  fastTrack: string;
+  pembayaran: string;
+  aksi: string;
+}
+
+// Data and Headers
+const mainHeaders = ref([
+  { title: "No", value: "no", sortable: false },
+  { title: "Jam Panggil", value: "jamPanggil", sortable: true },
+  { title: "Barcode", value: "barcode", sortable: true },
+  { title: "No Antrian", value: "noAntrian", sortable: true },
+  { title: "Shift", value: "shift", sortable: true },
+  { title: "Klinik", value: "klinik", sortable: true },
+  { title: "Fast Track", value: "fastTrack", sortable: true },
+  { title: "Pembayaran", value: "pembayaran", sortable: true },
+  { title: "Panggil", value: "panggil", sortable: true },
+  { title: "Aksi", value: "aksi", sortable: false },
+]);
+
+const mainPatients = ref<Patient[]>([
+  {
+    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",
+  },
+  ...Array.from({ length: 20 }, (_, i) => ({
+    no: i + 3,
+    jamPanggil: `${String(Math.floor(Math.random() * 12) + 1).padStart(2, "0")}:${String(Math.floor(Math.random() * 60)).padStart(2, "0")}`,
+    barcode: `25081110${String(i + 200).padStart(4, "0")}`,
+    noAntrian: `UM100${i + 3} | Online - 25081110${String(i + 200).padStart(4, "0")}`,
+    shift: "Shift 1",
+    klinik: ["KANDUNGAN", "IPD", "THT", "SARAF"][Math.floor(Math.random() * 4)],
+    fastTrack: "UMUM",
+    pembayaran: "UMUM",
+    panggil: "Panggil",
+    status: "normal",
+  })),
+]);
+
+const lateHeaders = ref([
+  { title: "No", value: "no", sortable: false },
+  { title: "Barcode", value: "barcode", sortable: true },
+  { title: "No Antrian", value: "noAntrian", sortable: true },
+  { title: "Shift", value: "shift", sortable: true },
+  { title: "Klinik", value: "klinik", sortable: true },
+  { title: "Aksi", value: "aksi", sortable: false },
+]);
+const latePatients = ref<LatePatient[]>([]);
+
+const clinicHeaders = ref([
+  { title: "#", value: "no", sortable: false },
+  { title: "Barcode", value: "barcode", sortable: true },
+  { title: "No Antrian", value: "noAntrian", sortable: true },
+  { title: "No RM", value: "noRM", sortable: true },
+  { title: "Shift", value: "shift", sortable: true },
+  { title: "Klinik", value: "klinik", sortable: true },
+  { title: "Fast Track", value: "fastTrack", sortable: true },
+  { title: "Pembayaran", value: "pembayaran", sortable: true },
+  { title: "Aksi", value: "aksi", sortable: false },
+]);
+const clinicPatients = ref<ClinicPatient[]>([]);
+
+// Method yang tetap di halaman induk (seperti getRowClass)
+const getRowClass = (item: Patient): string => {
+  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;
+}
+
+.bg-cyan {
+  background-color: #00bcd4 !important;
+}
+
+/* Row highlighting */
+:deep(.v-data-table tbody tr:nth-child(1)) {
+  background-color: #fff3cd !important;
+}
+
+.v-btn {
+  text-transform: none !important;
+}
+
+.v-btn--size-small {
+  height: 32px;
+  padding: 0 8px;
+}
+</style>
\ No newline at end of file
diff --git a/pages/LoketAdmin.vue b/pages/LoketAdmin.vue
deleted file mode 100644
index 39b19d6..0000000
--- a/pages/LoketAdmin.vue
+++ /dev/null
@@ -1,783 +0,0 @@
-<!-- eslint-disable vue/valid-v-slot -->
-<!-- eslint-disable vue/no-unused-vars -->
-<template>
-  <v-app>
-    <v-app-bar>
-      <v-container fluid class="pa-4">
-        <v-row align="center" no-gutters class="fill-height">
-          <v-col cols="auto">
-            <div class="d-flex align-center">
-              <!-- Total 2 with dark background -->
-              <div
-                class="bg-grey-darken-4 px-3 py-1 mr-2"
-                style="border-radius: 3px"
-              >
-                <span class="text-body-1 font-weight-bold text-white"
-                  >Total 2</span
-                >
-              </div>
-              <!-- Max 150 Pasien with lighter background -->
-              <div
-                class="bg-grey-darken-2 px-3 py-1"
-                style="border-radius: 3px"
-              >
-                <span class="text-body-1 text-white">Max 150 Pasien</span>
-              </div>
-            </div>
-          </v-col>
-          <v-spacer />
-          <v-col cols="auto">
-            <div class="d-flex align-center text-body-2">
-              <v-icon size="small" class="mr-2">mdi-view-dashboard</v-icon>
-              <span class="mr-6">Dashboard</span>
-              <span>Loket 12 | Rabu, 13 Agustus 2025 - Pelayanan</span>
-            </div>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-app-bar>
-
-    <!-- Cyan Divider -->
-    <div class="bg-cyan" style="height: 3px" />
-
-    <!-- Main Content -->
-    <v-main>
-      <v-container fluid class="pa-6">
-        <!-- Date and Service Info -->
-        <v-row class="mb-6">
-          <v-col>
-            <div class="text-h6 text-grey-darken-2 font-weight-medium">
-              Loket 12 | Rabu, 13 Agustus 2025 - Pelayanan :
-            </div>
-          </v-col>
-          <v-spacer />
-          <!-- Queue Number Buttons on the right -->
-          <v-col cols="auto">
-            <div class="d-flex align-center">
-              <v-btn
-                color="success"
-                dark
-                size="large"
-                class="mr-4 px-8"
-                style="min-width: 120px; height: 40px"
-              >
-                <span class="text-h6 font-weight-bold">1</span>
-              </v-btn>
-              <v-btn
-                color="info"
-                dark
-                size="large"
-                class="mr-4 px-4"
-                style="min-width: 120px; height: 40px"
-              >
-                <span class="text-h6 font-weight-bold">5</span>
-              </v-btn>
-              <v-btn
-                color="warning"
-                dark
-                size="large"
-                class="mr-4 px-4"
-                style="min-width: 120px; height: 40px"
-              >
-                <span class="text-h6 font-weight-bold">10</span>
-              </v-btn>
-              <v-btn
-                color="error"
-                dark
-                size="large"
-                class="px-4"
-                style="min-width: 120px; height: 40px"
-              >
-                <span class="text-h6 font-weight-bold">20</span>
-              </v-btn>
-            </div>
-          </v-col>
-        </v-row>
-
-        <!-- Next Patient Card -->
-        <v-row justify="center" class="pa-12">
-          <v-col cols="12" md="10" lg="8">
-            <v-card
-              color="success"
-              dark
-              flat
-              class="text-center"
-              style="min-height: 160px; border-radius: 8px"
-            >
-              <v-card-text class="pa-8">
-                <div
-                  class="text-h2 font-weight-bold mb-2"
-                  style="letter-spacing: 4px"
-                >
-                  NEXT
-                </div>
-                <div class="text-h6 mb-4 font-weight-normal">
-                  Pasien - UM1004
-                </div>
-                <div
-                  class="text-body-1 font-weight-normal"
-                  style="opacity: 0.9"
-                >
-                  Klik untuk memanggil pasien selanjutnya
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
-
-        <!-- Main Data Table -->
-        <v-card class="mb-4">
-          <v-card-title class="text-subtitle-1 font-weight-bold">
-            DATA PASIEN
-          </v-card-title>
-
-          <div class="d-flex justify-space-between align-center pa-4">
-            <div class="d-flex align-center">
-              <span>Show</span>
-              <v-select
-                v-model="itemsPerPage"
-                :items="[10, 25, 50]"
-                label="Entries"
-                density="compact"
-                hide-details
-                class="mx-2"
-                style="width: 80px"
-              />
-              <span>entries</span>
-            </div>
-
-            <div class="d-flex align-center">
-              <span class="mr-2">Search:</span>
-              <v-text-field
-                v-model="search"
-                label="Search"
-                hide-details
-                density="compact"
-                style="min-width: 200px"
-              />
-            </div>
-          </div>
-
-          <v-data-table
-            :headers="mainHeaders"
-            :items="paginatedMainPatients"
-            :search="search"
-            hide-default-footer
-            class="elevation-1"
-          >
-            <template #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 #item.jamPanggil="{ item }">
-              <span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
-            </template>
-          </v-data-table>
-
-          <!-- Custom Pagination for Main Table -->
-          <v-row align="center" class="pa-4">
-            <v-col cols="auto">
-              <span class="text-body-2 text-grey-darken-1">
-                Showing {{ getStartEntry(mainCurrentPage, itemsPerPage) }} to
-                {{
-                  getEndEntry(
-                    mainCurrentPage,
-                    itemsPerPage,
-                    filteredMainPatients.length
-                  )
-                }}
-                of {{ filteredMainPatients.length }} entries
-              </span>
-            </v-col>
-            <v-spacer />
-            <v-col cols="auto">
-              <div class="d-flex align-center">
-                <v-btn
-                  :disabled="mainCurrentPage === 1"
-                  variant="text"
-                  size="small"
-                  class="text-grey-darken-1 mr-2"
-                  @click="goToMainPage(mainCurrentPage - 1)"
-                >
-                  Previous
-                </v-btn>
-
-                <v-btn
-                  v-for="page in getVisiblePages(
-                    mainCurrentPage,
-                    getMainTotalPages
-                  )"
-                  :key="page"
-                  :variant="page === mainCurrentPage ? 'flat' : 'text'"
-                  :color="
-                    page === mainCurrentPage ? 'primary' : 'grey-lighten-1'
-                  "
-                  size="small"
-                  class="mx-1"
-                  min-width="35"
-                  @click="goToMainPage(page)"
-                >
-                  {{ page }}
-                </v-btn>
-
-                <v-btn
-                  :disabled="mainCurrentPage === getMainTotalPages"
-                  variant="text"
-                  size="small"
-                  class="text-grey-darken-1 ml-2"
-                  @click="goToMainPage(mainCurrentPage + 1)"
-                >
-                  Next
-                </v-btn>
-              </div>
-            </v-col>
-          </v-row>
-        </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="text-subtitle-1 font-weight-bold bg-red-lighten-3"
-          >
-            INFO PASIEN LAPOR TERLAMBAT
-          </v-card-title>
-
-          <div class="d-flex justify-space-between align-center pa-4">
-            <div class="d-flex align-center">
-              <span>Show</span>
-              <v-select
-                v-model="lateItemsPerPage"
-                :items="[10, 25, 50]"
-                label="Entries"
-                density="compact"
-                hide-details
-                class="mx-2"
-                style="width: 80px"
-              />
-              <span>entries</span>
-            </div>
-
-            <div class="d-flex align-center">
-              <span class="mr-2">Search:</span>
-              <v-text-field
-                v-model="lateSearch"
-                label="Search"
-                hide-details
-                density="compact"
-                style="min-width: 200px"
-              />
-            </div>
-          </div>
-
-          <v-data-table
-            :headers="lateHeaders"
-            :items="paginatedLatePatients"
-            :search="lateSearch"
-            hide-default-footer
-            class="elevation-1"
-          >
-            <template #no-data>
-              <div class="text-center pa-4">No data available in table</div>
-            </template>
-          </v-data-table>
-
-          <!-- Custom Pagination for Late Patients -->
-          <v-row
-            v-if="filteredLatePatients.length > 0"
-            align="center"
-            class="pa-4"
-          >
-            <v-col cols="auto">
-              <span class="text-body-2 text-grey-darken-1">
-                Showing
-                {{ getStartEntry(lateCurrentPage, lateItemsPerPage) }} to
-                {{
-                  getEndEntry(
-                    lateCurrentPage,
-                    lateItemsPerPage,
-                    filteredLatePatients.length
-                  )
-                }}
-                of {{ filteredLatePatients.length }} entries
-              </span>
-            </v-col>
-            <v-spacer />
-            <v-col cols="auto">
-              <div class="d-flex align-center">
-                <v-btn
-                  :disabled="lateCurrentPage === 1"
-                  variant="text"
-                  size="small"
-                  class="text-grey-darken-1 mr-2"
-                  @click="goToLatePage(lateCurrentPage - 1)"
-                >
-                  Previous
-                </v-btn>
-
-                <v-btn
-                  v-for="page in getVisiblePages(
-                    lateCurrentPage,
-                    getLateTotalPages
-                  )"
-                  :key="page"
-                  :variant="page === lateCurrentPage ? 'flat' : 'text'"
-                  :color="
-                    page === lateCurrentPage ? 'primary' : 'grey-lighten-1'
-                  "
-                  size="small"
-                  class="mx-1"
-                  min-width="35"
-                  @click="goToLatePage(page)"
-                >
-                  {{ page }}
-                </v-btn>
-
-                <v-btn
-                  :disabled="lateCurrentPage === getLateTotalPages"
-                  variant="text"
-                  size="small"
-                  class="text-grey-darken-1 ml-2"
-                  @click="goToLatePage(lateCurrentPage + 1)"
-                >
-                  Next
-                </v-btn>
-              </div>
-            </v-col>
-          </v-row>
-        </v-card>
-
-        <!-- Clinic Entry Patients Table -->
-        <v-card class="mb-4">
-          <v-card-title
-            class="text-subtitle-1 font-weight-bold bg-red-lighten-3"
-          >
-            INFO PASIEN MASUK KLINIK
-          </v-card-title>
-
-          <div class="d-flex justify-space-between align-center pa-4">
-            <div class="d-flex align-center">
-              <span>Show</span>
-              <v-select
-                v-model="clinicItemsPerPage"
-                :items="[10, 25, 50]"
-                label="Entries"
-                density="compact"
-                hide-details
-                class="mx-2"
-                style="width: 80px"
-              />
-              <span>entries</span>
-            </div>
-
-            <div class="d-flex align-center">
-              <span class="mr-2">Search:</span>
-              <v-text-field
-                v-model="clinicSearch"
-                label="Search"
-                hide-details
-                density="compact"
-                style="min-width: 200px"
-              />
-            </div>
-          </div>
-
-          <v-data-table
-            :headers="clinicHeaders"
-            :items="paginatedClinicPatients"
-            :search="clinicSearch"
-            hide-default-footer
-            class="elevation-1"
-          >
-            <template #no-data>
-              <div class="text-center pa-4">No data available in table</div>
-            </template>
-          </v-data-table>
-
-          <!-- Custom Pagination for Clinic Patients -->
-          <v-row
-            v-if="filteredClinicPatients.length > 0"
-            align="center"
-            class="pa-4"
-          >
-            <v-col cols="auto">
-              <span class="text-body-2 text-grey-darken-1">
-                Showing
-                {{ getStartEntry(clinicCurrentPage, clinicItemsPerPage) }} to
-                {{
-                  getEndEntry(
-                    clinicCurrentPage,
-                    clinicItemsPerPage,
-                    filteredClinicPatients.length
-                  )
-                }}
-                of {{ filteredClinicPatients.length }} entries
-              </span>
-            </v-col>
-            <v-spacer />
-            <v-col cols="auto">
-              <div class="d-flex align-center">
-                <v-btn
-                  :disabled="clinicCurrentPage === 1"
-                  variant="text"
-                  size="small"
-                  class="text-grey-darken-1 mr-2"
-                  @click="goToClinicPage(clinicCurrentPage - 1)"
-                >
-                  Previous
-                </v-btn>
-
-                <v-btn
-                  v-for="page in getVisiblePages(
-                    clinicCurrentPage,
-                    getClinicTotalPages
-                  )"
-                  :key="page"
-                  :variant="page === clinicCurrentPage ? 'flat' : 'text'"
-                  :color="
-                    page === clinicCurrentPage ? 'primary' : 'grey-lighten-1'
-                  "
-                  size="small"
-                  class="mx-1"
-                  min-width="35"
-                  @click="goToClinicPage(page)"
-                >
-                  {{ page }}
-                </v-btn>
-
-                <v-btn
-                  :disabled="clinicCurrentPage === getClinicTotalPages"
-                  variant="text"
-                  size="small"
-                  class="text-grey-darken-1 ml-2"
-                  @click="goToClinicPage(clinicCurrentPage + 1)"
-                >
-                  Next
-                </v-btn>
-              </div>
-            </v-col>
-          </v-row>
-        </v-card>
-      </v-container>
-    </v-main>
-  </v-app>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-
-// Define interfaces for type safety
-interface Patient {
-  no: number;
-  jamPanggil: string;
-  barcode: string;
-  noAntrian: string;
-  shift: string;
-  klinik: string;
-  fastTrack: string;
-  pembayaran: string;
-  panggil: string;
-  status: string;
-}
-
-interface LatePatient {
-  no: number;
-  barcode: string;
-  noAntrian: string;
-  shift: string;
-  klinik: string;
-  aksi: string;
-}
-
-interface ClinicPatient {
-  no: number;
-  barcode: string;
-  noAntrian: string;
-  noRM: string;
-  shift: string;
-  klinik: string;
-  fastTrack: string;
-  pembayaran: string;
-  aksi: string;
-}
-
-// Reactive data
-const search = ref<string>("");
-const lateSearch = ref<string>("");
-const clinicSearch = ref<string>("");
-const itemsPerPage = ref<number>(10);
-const lateItemsPerPage = ref<number>(10);
-const clinicItemsPerPage = ref<number>(10);
-
-// Pagination current pages
-const mainCurrentPage = ref<number>(1);
-const lateCurrentPage = ref<number>(1);
-const clinicCurrentPage = ref<number>(1);
-
-// Table headers
-const mainHeaders = ref([
-  { title: "No", value: "no", sortable: false },
-  { title: "Jam Panggil", value: "jamPanggil", sortable: true },
-  { title: "Barcode", value: "barcode", sortable: true },
-  { title: "No Antrian", value: "noAntrian", sortable: true },
-  { title: "Shift", value: "shift", sortable: true },
-  { title: "Klinik", value: "klinik", sortable: true },
-  { title: "Fast Track", value: "fastTrack", sortable: true },
-  { title: "Pembayaran", value: "pembayaran", sortable: true },
-  { title: "Panggil", value: "panggil", sortable: true },
-  { title: "Aksi", value: "aksi", sortable: false },
-]);
-
-const lateHeaders = ref([
-  { title: "No", value: "no", sortable: false },
-  { title: "Barcode", value: "barcode", sortable: true },
-  { title: "No Antrian", value: "noAntrian", sortable: true },
-  { title: "Shift", value: "shift", sortable: true},
-  { title: "Klinik", value: "klinik", sortable: true },
-  { title: "Aksi", value: "aksi", sortable: false },
-]);
-
-const clinicHeaders = ref([
-  { title: "#", value: "no", sortable: false },
-  { title: "Barcode", value: "barcode", sortable: true },
-  { title: "No Antrian", value: "noAntrian", sortable: true },
-  { title: "No RM", value: "noRM", sortable: true },
-  { title: "Shift", value: "shift", sortable: true },
-  { title: "Klinik", value: "klinik", sortable: true },
-  { title: "Fast Track", value: "fastTrack", sortable: true },
-  { title: "Pembayaran", value: "pembayaran", sortable: true },
-  { title: "Aksi", value: "aksi", sortable: false },
-]);
-
-// Sample data - Extended for pagination demo
-const mainPatients = ref<Patient[]>([
-  {
-    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",
-  },
-  // Add more sample data for pagination demo
-  ...Array.from({ length: 20 }, (_, i) => ({
-    no: i + 3,
-    jamPanggil: `${String(Math.floor(Math.random() * 12) + 1).padStart(2, "0")}:${String(Math.floor(Math.random() * 60)).padStart(2, "0")}`,
-    barcode: `25081110${String(i + 200).padStart(4, "0")}`,
-    noAntrian: `UM100${i + 3} | Online - 25081110${String(i + 200).padStart(4, "0")}`,
-    shift: "Shift 1",
-    klinik: ["KANDUNGAN", "IPD", "THT", "SARAF"][Math.floor(Math.random() * 4)],
-    fastTrack: "UMUM",
-    pembayaran: "UMUM",
-    panggil: "Panggil",
-    status: "normal",
-  })),
-]);
-
-const latePatients = ref<LatePatient[]>([]);
-const clinicPatients = ref<ClinicPatient[]>([]);
-
-// Computed properties for filtering
-const filteredMainPatients = computed(() => {
-  if (!search.value) return mainPatients.value;
-  return mainPatients.value.filter((item) =>
-    Object.values(item).some((val) =>
-      String(val).toLowerCase().includes(search.value.toLowerCase())
-    )
-  );
-});
-
-const filteredLatePatients = computed(() => {
-  if (!lateSearch.value) return latePatients.value;
-  return latePatients.value.filter((item) =>
-    Object.values(item).some((val) =>
-      String(val).toLowerCase().includes(lateSearch.value.toLowerCase())
-    )
-  );
-});
-
-const filteredClinicPatients = computed(() => {
-  if (!clinicSearch.value) return clinicPatients.value;
-  return clinicPatients.value.filter((item) =>
-    Object.values(item).some((val) =>
-      String(val).toLowerCase().includes(clinicSearch.value.toLowerCase())
-    )
-  );
-});
-
-// Computed properties for pagination
-const getMainTotalPages = computed(() => {
-  return Math.ceil(filteredMainPatients.value.length / itemsPerPage.value);
-});
-
-const getLateTotalPages = computed(() => {
-  return Math.ceil(filteredLatePatients.value.length / lateItemsPerPage.value);
-});
-
-const getClinicTotalPages = computed(() => {
-  return Math.ceil(
-    filteredClinicPatients.value.length / clinicItemsPerPage.value
-  );
-});
-
-const paginatedMainPatients = computed(() => {
-  const start = (mainCurrentPage.value - 1) * itemsPerPage.value;
-  const end = start + itemsPerPage.value;
-  return filteredMainPatients.value.slice(start, end);
-});
-
-const paginatedLatePatients = computed(() => {
-  const start = (lateCurrentPage.value - 1) * lateItemsPerPage.value;
-  const end = start + lateItemsPerPage.value;
-  return filteredLatePatients.value.slice(start, end);
-});
-
-const paginatedClinicPatients = computed(() => {
-  const start = (clinicCurrentPage.value - 1) * clinicItemsPerPage.value;
-  const end = start + clinicItemsPerPage.value;
-  return filteredClinicPatients.value.slice(start, end);
-});
-
-// Methods
-const getRowClass = (item: Patient): string => {
-  if (item.status === "current") {
-    return "text-green font-weight-bold";
-  }
-  return "";
-};
-
-const getStartEntry = (currentPage: number, itemsPerPage: number): number => {
-  return (currentPage - 1) * itemsPerPage + 1;
-};
-
-const getEndEntry = (currentPage: number, itemsPerPage: number, totalItems: number): number => {
-  const end = currentPage * itemsPerPage;
-  return Math.min(end, totalItems);
-};
-
-const getVisiblePages = (currentPage: number, totalPages: number): (number | string)[] => {
-  const pages: (number | string)[] = [];
-  const total = totalPages;
-  const current = currentPage;
-
-  if (total <= 0) return pages;
-
-  // Always show first page
-  pages.push(1);
-
-  // Show pages around current page
-  const start = Math.max(2, current - 1);
-  const end = Math.min(total - 1, current + 1);
-
-  // Add ellipsis if needed
-  if (start > 2) pages.push("...");
-
-  // Add middle pages
-  for (let i = start; i <= end; i++) {
-    if (i !== 1 && i !== total) {
-      pages.push(i);
-    }
-  }
-
-  // Add ellipsis if needed
-  if (end < total - 1) pages.push("...");
-
-  // Always show last page if more than 1 page
-  if (total > 1) pages.push(total);
-
-  return pages;
-};
-
-const goToMainPage = (page: number): void => {
-  if (
-    page >= 1 &&
-    page <= getMainTotalPages.value &&
-    typeof page === "number"
-  ) {
-    mainCurrentPage.value = page;
-  }
-};
-
-const goToLatePage = (page: number): void => {
-  if (
-    page >= 1 &&
-    page <= getLateTotalPages.value &&
-    typeof page === "number"
-  ) {
-    lateCurrentPage.value = page;
-  }
-};
-
-const goToClinicPage = (page: number): void => {
-  if (
-    page >= 1 &&
-    page <= getClinicTotalPages.value &&
-    typeof page === "number"
-  ) {
-    clinicCurrentPage.value = page;
-  }
-};
-</script>
-
-<style scoped>
-.v-list-item--active {
-  background-color: rgba(25, 118, 210, 0.12);
-  color: #1976d2;
-}
-
-.text-green {
-  color: #4caf50 !important;
-}
-
-.bg-cyan {
-  background-color: #00bcd4 !important;
-}
-
-/* Custom scrollbar */
-:deep(.v-data-table) {
-  font-size: 14px;
-}
-
-/* Row highlighting */
-:deep(.v-data-table tbody tr:nth-child(1)) {
-  background-color: #fff3cd !important;
-}
-
-.v-btn {
-  text-transform: none !important;
-}
-
-.v-btn--size-small {
-  height: 32px;
-  padding: 0 8px;
-}
-</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 64ea199..e1d7f6f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,3 @@
-<!-- eslint-disable vue/valid-v-slot -->
-<!-- eslint-disable vue/no-unused-vars -->
 <template>
   <v-container fluid class="bg-grey-lighten-4 pa-4">
     <p class="mb-4">Admin Anjungan</p>
@@ -29,203 +27,42 @@
 
       <v-divider :thickness="5" color="deep-orange-darken-4"></v-divider>
 
-      <v-card-text>
-        <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>
-          <div class="d-flex align-center">
-            <span>Show</span>
-            <v-select
-              :items="[10, 25, 50, 100]"
-              label="entries"
-              dense
-              single-line
-              hide-details
-              class="shrink mx-2"
-              style="width: 80px"
-            ></v-select>
-            <span>entries</span>
-          </div>
-        </v-toolbar>
-        <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>
-        <!-- Custom Pagination for Late Visitors -->
-        <div class="d-flex justify-space-between align-center pt-4">
-          <div class="text-body-2 text-grey-darken-1">
-            Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalLateEntries }} entries
-          </div>
-          <div class="d-flex align-center">
-            <v-btn
-              :disabled="currentPage === 1"
-              @click="previousPage"
-              variant="text"
-              size="small"
-              class="text-body-2"
-            >
-              Previous
-            </v-btn>
-            <template v-for="page in visiblePages" :key="page">
-              <v-btn
-                v-if="page !== '...'"
-                :color="page === currentPage ? 'primary' : ''"
-                :variant="page === currentPage ? 'flat' : 'text'"
-                @click="goToPage(page)"
-                size="small"
-                class="mx-1"
-                min-width="40"
-              >
-                {{ page }}
-              </v-btn>
-              <span v-else class="mx-1">...</span>
-            </template>
-            <v-btn
-              :disabled="currentPage === totalPages"
-              @click="nextPage"
-              variant="text"
-              size="small"
-              class="text-body-2"
-            >
-              Next
-            </v-btn>
-          </div>
-        </div>
-      </v-card-text>
+      <TabelData
+        :headers="lateHeaders"
+        :items="lateVisitors"
+        title="DATA PENGUNJUNG TERLAMBAT"
+      />
 
       <v-divider :thickness="5" color="deep-orange-darken-4"></v-divider>
 
-      <v-card-text>
-        <v-toolbar flat color="transparent" dense>
-          <v-toolbar-title class="text-subtitle-1 font-weight-bold">
-            DATA PENGUNJUNG
-          </v-toolbar-title>
-        </v-toolbar>
-        <div class="d-flex justify-space-between align-center px-4">
-          <div class="d-flex align-center">
-            <span>Show</span>
-            <v-select
-              :items="[10, 25, 50]"
-              v-model="itemsPerPage"
-              label="Entries"
-              density="compact"
-              hide-details
-              class="mx-2"
-              style="width: 80px"
-            ></v-select>
-            <span>entries</span>
-          </div>
-          <div class="d-flex align-center">
-            <span class="mr-2">Search:</span>
-            <v-text-field
-              v-model="search"
-              label="Search"
-              hide-details
-              density="compact"
-              style="min-width: 200px"
-            ></v-text-field>
-          </div>
-        </div>
-        <v-data-table
-          :headers="headers"
-          :items="paginatedMainPatients"
-          :search="search"
-          no-data-text="No data available in table"
-          class="elevation-1"
-          hide-default-footer
-        >
-          <template v-slot:item.aksi="{ item }">
-            <div class="d-flex ga-1">
-              <v-btn small color="success" class="d-flex flex-row" variant="flat">Tiket</v-btn>
-              <v-btn small color="success" class="d-flex flex-row" variant="flat"
-                >Tiket Pengantar</v-btn
-              >
-              <v-btn small color="info" class="d-flex flex-row" variant="flat">ByPass</v-btn>
-            </div>
-          </template>
-        </v-data-table>
-        <!-- Custom Pagination for Main Patients -->
-        <div class="d-flex justify-space-between align-center pt-4">
-          <div class="text-body-2 text-grey-darken-1">
-            Showing {{ mainCurrentPageStart }} to {{ mainCurrentPageEnd }} of {{ totalMainEntries }} entries
-          </div>
-          <div class="d-flex align-center">
-            <v-btn
-              :disabled="mainCurrentPage === 1"
-              @click="mainPreviousPage"
-              variant="text"
-              size="small"
-              class="text-body-2"
+      <TabelData
+        :headers="mainHeaders"
+        :items="mainPatients"
+        title="DATA PENGUNJUNG"
+      >
+        <template v-slot:actions="{ item }">
+          <div class="d-flex ga-1">
+            <v-btn small color="success" class="d-flex flex-row" variant="flat">Tiket</v-btn>
+            <v-btn small color="success" class="d-flex flex-row" variant="flat"
+              >Tiket Pengantar</v-btn
             >
-              Previous
-            </v-btn>
-            <template v-for="page in mainVisiblePages" :key="page">
-              <v-btn
-                v-if="page !== '...'"
-                :color="page === mainCurrentPage ? 'primary' : ''"
-                :variant="page === mainCurrentPage ? 'flat' : 'text'"
-                @click="mainGoToPage(page)"
-                size="small"
-                class="mx-1"
-                min-width="40"
-              >
-                {{ page }}
-              </v-btn>
-              <span v-else class="mx-1">...</span>
-            </template>
-            <v-btn
-              :disabled="mainCurrentPage === mainTotalPages"
-              @click="mainNextPage"
-              variant="text"
-              size="small"
-              class="text-body-2"
-            >
-              Next
-            </v-btn>
+            <v-btn small color="info" class="d-flex flex-row" variant="flat">ByPass</v-btn>
           </div>
-        </div>
-      </v-card-text>
+        </template>
+      </TabelData>
+      
     </v-card>
   </v-container>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref } from "vue";
+import TabelData from "../components/TabelData.vue"; // Pastikan path-nya benar
 
-// 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" },
-  { 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" },
-]);
+// Ini adalah data yang akan menjadi "single source of truth"
+// untuk tabel Anda. Data ini dikirim sebagai props ke komponen anak.
 
-const headers = ref([
+const mainHeaders = ref([
   { title: "No", value: "no", sortable: false },
   { title: "Tgl Daftar", value: "tglDaftar", sortable: true },
   { title: "RM", value: "rm", sortable: true },
@@ -250,7 +87,7 @@ const mainPatients = ref([
     shift: "Shift 1",
     klinik: "KANDUNGAN",
     pembayaran: "UMUM",
-    masuk : "TIDAK",
+    masuk: "TIDAK",
     status: "current",
   },
   {
@@ -263,7 +100,7 @@ const mainPatients = ref([
     shift: "Shift 1",
     klinik: "DALAM",
     pembayaran: "UMUM",
-    masuk : "TIDAK",
+    masuk: "TIDAK",
     status: "current",
   },
   {
@@ -276,7 +113,7 @@ const mainPatients = ref([
     shift: "Shift 1",
     klinik: "ANAK",
     pembayaran: "UMUM",
-    masuk : "TIDAK",
+    masuk: "TIDAK",
     status: "current",
   },
   {
@@ -289,141 +126,43 @@ const mainPatients = ref([
     shift: "Shift 1",
     klinik: "JANTUNG",
     pembayaran: "UMUM",
-    masuk : "TIDAK",
+    masuk: "TIDAK",
     status: "current",
   },
 ]);
 
-const search = ref("");
-const itemsPerPage = ref(10);
+const lateHeaders = ref([
+  { title: "No", value: "no", sortable: false },
+  // Tambahkan headers spesifik untuk tabel ini jika berbeda
+]);
 
-// Pagination for Late Visitors
-const searchLate = ref('');
-const lateHeaders = ref([]);
-const lateVisitors = ref([]);
-const currentPage = ref(1);
-const totalLateEntries = computed(() => lateVisitors.value.length);
-const totalPages = computed(() => Math.ceil(totalLateEntries.value / itemsPerPage.value));
-const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1);
-const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalLateEntries.value));
+const lateVisitors = ref([
+  // Tambahkan data spesifik untuk tabel ini jika ada
+]);
 
-// Pagination for Main Patients
-const mainCurrentPage = ref(1);
-const totalMainEntries = computed(() => mainPatients.value.length);
-const mainTotalPages = computed(() => Math.ceil(totalMainEntries.value / itemsPerPage.value));
-const mainCurrentPageStart = computed(() => (mainCurrentPage.value - 1) * itemsPerPage.value + 1);
-const mainCurrentPageEnd = computed(() => Math.min(mainCurrentPage.value * itemsPerPage.value, totalMainEntries.value));
-
-// Paginated data for main patients
-const paginatedMainPatients = computed(() => {
-  const start = (mainCurrentPage.value - 1) * itemsPerPage.value;
-  const end = start + itemsPerPage.value;
-  return mainPatients.value.slice(start, end);
-});
-
-// Visible pages calculation for Late Visitors
-const visiblePages = computed(() => {
-  const pages = [];
-  const total = totalPages.value;
-  const current = currentPage.value;
-  
-  if (total <= 7) {
-    for (let i = 1; i <= total; i++) {
-      pages.push(i);
-    }
-  } else {
-    if (current <= 4) {
-      for (let i = 1; i <= 5; i++) {
-        pages.push(i);
-      }
-      pages.push('...');
-      pages.push(total);
-    } else if (current >= total - 3) {
-      pages.push(1);
-      pages.push('...');
-      for (let i = total - 4; i <= total; i++) {
-        pages.push(i);
-      }
-    } else {
-      pages.push(1);
-      pages.push('...');
-      for (let i = current - 1; i <= current + 1; i++) {
-        pages.push(i);
-      }
-      pages.push('...');
-      pages.push(total);
-    }
-  }
-  return pages;
-});
-
-// Visible pages calculation for Main Patients
-const mainVisiblePages = computed(() => {
-  const pages = [];
-  const total = mainTotalPages.value;
-  const current = mainCurrentPage.value;
-  
-  if (total <= 7) {
-    for (let i = 1; i <= total; i++) {
-      pages.push(i);
-    }
-  } else {
-    if (current <= 4) {
-      for (let i = 1; i <= 5; i++) {
-        pages.push(i);
-      }
-      pages.push('...');
-      pages.push(total);
-    } else if (current >= total - 3) {
-      pages.push(1);
-      pages.push('...');
-      for (let i = total - 4; i <= total; i++) {
-        pages.push(i);
-      }
-    } else {
-      pages.push(1);
-      pages.push('...');
-      for (let i = current - 1; i <= current + 1; i++) {
-        pages.push(i);
-      }
-      pages.push('...');
-      pages.push(total);
-    }
-  }
-  return pages;
-});
-
-// Pagination methods for Late Visitors
-const previousPage = () => {
-  if (currentPage.value > 1) {
-    currentPage.value--;
-  }
-};
-
-const nextPage = () => {
-  if (currentPage.value < totalPages.value) {
-    currentPage.value++;
-  }
-};
-
-const goToPage = (page: number) => {
-  currentPage.value = page;
-};
-
-// Pagination methods for Main Patients
-const mainPreviousPage = () => {
-  if (mainCurrentPage.value > 1) {
-    mainCurrentPage.value--;
-  }
-};
-
-const mainNextPage = () => {
-  if (mainCurrentPage.value < mainTotalPages.value) {
-    mainCurrentPage.value++;
-  }
-};
-
-const mainGoToPage = (page: number) => {
-  mainCurrentPage.value = page;
-};
+// ... Sisa kode lainnya yang tidak terkait dengan tabel ...
+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" },
+]);
 </script>
\ No newline at end of file