From b1c1ff86f024a4113854740993043485764fb657 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Wed, 20 Aug 2025 15:04:15 +0700
Subject: [PATCH] update padding dan paginasi

---
 layouts/default.vue  |   2 +-
 pages/LoketAdmin.vue | 139 ++++++++-----
 pages/index.vue      | 471 ++++++++++++++++++++++++++++++-------------
 3 files changed, 417 insertions(+), 195 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 0191960..7fa0d0a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -73,7 +73,7 @@
 
     <!-- Area konten utama aplikasi -->
     <v-main>
-      <v-container fluid>
+      <v-container fluid class="pa-0">
         <!-- Di sini, konten halaman akan di-render oleh Nuxt -->
         <slot></slot>
       </v-container>
diff --git a/pages/LoketAdmin.vue b/pages/LoketAdmin.vue
index ca93d96..39b19d6 100644
--- a/pages/LoketAdmin.vue
+++ b/pages/LoketAdmin.vue
@@ -1,3 +1,5 @@
+<!-- eslint-disable vue/valid-v-slot -->
+<!-- eslint-disable vue/no-unused-vars -->
 <template>
   <v-app>
     <v-app-bar>
@@ -23,7 +25,7 @@
               </div>
             </div>
           </v-col>
-          <v-spacer></v-spacer>
+          <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>
@@ -36,7 +38,7 @@
     </v-app-bar>
 
     <!-- Cyan Divider -->
-    <div class="bg-cyan" style="height: 3px"></div>
+    <div class="bg-cyan" style="height: 3px" />
 
     <!-- Main Content -->
     <v-main>
@@ -48,7 +50,7 @@
               Loket 12 | Rabu, 13 Agustus 2025 - Pelayanan :
             </div>
           </v-col>
-          <v-spacer></v-spacer>
+          <v-spacer />
           <!-- Queue Number Buttons on the right -->
           <v-col cols="auto">
             <div class="d-flex align-center">
@@ -140,7 +142,7 @@
                 hide-details
                 class="mx-2"
                 style="width: 80px"
-              ></v-select>
+              />
               <span>entries</span>
             </div>
 
@@ -152,7 +154,7 @@
                 hide-details
                 density="compact"
                 style="min-width: 200px"
-              ></v-text-field>
+              />
             </div>
           </div>
 
@@ -163,7 +165,7 @@
             hide-default-footer
             class="elevation-1"
           >
-            <template v-slot:item.aksi="{ item }">
+            <template #item.aksi="{ item }">
               <div class="d-flex ga-1">
                 <v-btn size="small" color="success" variant="flat"
                   >Panggil</v-btn
@@ -174,7 +176,7 @@
                 >
               </div>
             </template>
-            <template v-slot:item.jamPanggil="{ item }">
+            <template #item.jamPanggil="{ item }">
               <span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
             </template>
           </v-data-table>
@@ -194,7 +196,7 @@
                 of {{ filteredMainPatients.length }} entries
               </span>
             </v-col>
-            <v-spacer></v-spacer>
+            <v-spacer />
             <v-col cols="auto">
               <div class="d-flex align-center">
                 <v-btn
@@ -265,7 +267,7 @@
                 hide-details
                 class="mx-2"
                 style="width: 80px"
-              ></v-select>
+              />
               <span>entries</span>
             </div>
 
@@ -277,7 +279,7 @@
                 hide-details
                 density="compact"
                 style="min-width: 200px"
-              ></v-text-field>
+              />
             </div>
           </div>
 
@@ -288,16 +290,16 @@
             hide-default-footer
             class="elevation-1"
           >
-            <template v-slot:no-data>
+            <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-if="filteredLatePatients.length > 0"
           >
             <v-col cols="auto">
               <span class="text-body-2 text-grey-darken-1">
@@ -313,7 +315,7 @@
                 of {{ filteredLatePatients.length }} entries
               </span>
             </v-col>
-            <v-spacer></v-spacer>
+            <v-spacer />
             <v-col cols="auto">
               <div class="d-flex align-center">
                 <v-btn
@@ -377,7 +379,7 @@
                 hide-details
                 class="mx-2"
                 style="width: 80px"
-              ></v-select>
+              />
               <span>entries</span>
             </div>
 
@@ -389,7 +391,7 @@
                 hide-details
                 density="compact"
                 style="min-width: 200px"
-              ></v-text-field>
+              />
             </div>
           </div>
 
@@ -400,16 +402,16 @@
             hide-default-footer
             class="elevation-1"
           >
-            <template v-slot:no-data>
+            <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-if="filteredClinicPatients.length > 0"
           >
             <v-col cols="auto">
               <span class="text-body-2 text-grey-darken-1">
@@ -425,7 +427,7 @@
                 of {{ filteredClinicPatients.length }} entries
               </span>
             </v-col>
-            <v-spacer></v-spacer>
+            <v-spacer />
             <v-col cols="auto">
               <div class="d-flex align-center">
                 <v-btn
@@ -477,39 +479,74 @@
 <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("");
-const lateSearch = ref("");
-const clinicSearch = ref("");
-const itemsPerPage = ref(10);
-const lateItemsPerPage = ref(10);
-const clinicItemsPerPage = ref(10);
+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(1);
-const lateCurrentPage = ref(1);
-const clinicCurrentPage = ref(1);
+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" },
-  { 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: "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" },
-  { title: "No Antrian", value: "noAntrian" },
-  { title: "Shift", value: "shift" },
-  { title: "Klinik", value: "klinik" },
+  { 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 },
 ]);
 
@@ -526,7 +563,7 @@ const clinicHeaders = ref([
 ]);
 
 // Sample data - Extended for pagination demo
-const mainPatients = ref([
+const mainPatients = ref<Patient[]>([
   {
     no: 1,
     jamPanggil: "12:49",
@@ -566,8 +603,8 @@ const mainPatients = ref([
   })),
 ]);
 
-const latePatients = ref([]);
-const clinicPatients = ref([]);
+const latePatients = ref<LatePatient[]>([]);
+const clinicPatients = ref<ClinicPatient[]>([]);
 
 // Computed properties for filtering
 const filteredMainPatients = computed(() => {
@@ -631,24 +668,24 @@ const paginatedClinicPatients = computed(() => {
 });
 
 // Methods
-const getRowClass = (item) => {
+const getRowClass = (item: Patient): string => {
   if (item.status === "current") {
     return "text-green font-weight-bold";
   }
   return "";
 };
 
-const getStartEntry = (currentPage, itemsPerPage) => {
+const getStartEntry = (currentPage: number, itemsPerPage: number): number => {
   return (currentPage - 1) * itemsPerPage + 1;
 };
 
-const getEndEntry = (currentPage, itemsPerPage, totalItems) => {
+const getEndEntry = (currentPage: number, itemsPerPage: number, totalItems: number): number => {
   const end = currentPage * itemsPerPage;
   return Math.min(end, totalItems);
 };
 
-const getVisiblePages = (currentPage, totalPages) => {
-  const pages = [];
+const getVisiblePages = (currentPage: number, totalPages: number): (number | string)[] => {
+  const pages: (number | string)[] = [];
   const total = totalPages;
   const current = currentPage;
 
@@ -680,7 +717,7 @@ const getVisiblePages = (currentPage, totalPages) => {
   return pages;
 };
 
-const goToMainPage = (page) => {
+const goToMainPage = (page: number): void => {
   if (
     page >= 1 &&
     page <= getMainTotalPages.value &&
@@ -690,7 +727,7 @@ const goToMainPage = (page) => {
   }
 };
 
-const goToLatePage = (page) => {
+const goToLatePage = (page: number): void => {
   if (
     page >= 1 &&
     page <= getLateTotalPages.value &&
@@ -700,7 +737,7 @@ const goToLatePage = (page) => {
   }
 };
 
-const goToClinicPage = (page) => {
+const goToClinicPage = (page: number): void => {
   if (
     page >= 1 &&
     page <= getClinicTotalPages.value &&
@@ -743,4 +780,4 @@ const goToClinicPage = (page) => {
   height: 32px;
   padding: 0 8px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 0c43a17..64ea199 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,144 +1,203 @@
+<!-- eslint-disable vue/valid-v-slot -->
+<!-- eslint-disable vue/no-unused-vars -->
 <template>
-          <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-container fluid class="bg-grey-lighten-4 pa-4">
+    <p class="mb-4">Admin Anjungan</p>
+    <v-card flat>
+      <v-card-text>
+        <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" text-color="white">
+              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-text>
 
-          <v-divider
-            class="my-5"
-            color="deep-orange-darken-4"
-            thickness="8"
-          ></v-divider>
+      <v-divider :thickness="5" color="deep-orange-darken-4"></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-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"
               >
-              <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>
+                {{ 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>
 
-          <v-divider
-            class="my-5"
-            color="blue-darken-4"
-            thickness="8"
-          ></v-divider>
+      <v-divider :thickness="5" color="deep-orange-darken-4"></v-divider>
 
-          <v-card>
-            <v-card-title class="text-subtitle-1 font-weight-bold bg-red-lighten-3">
+      <v-card-text>
+        <v-toolbar flat color="transparent" dense>
+          <v-toolbar-title class="text-subtitle-1 font-weight-bold">
             DATA PENGUNJUNG
-            </v-card-title>
-          </v-card>
-            <div class="d-flex justify-space-between align-center ps-4">
-              <div class="d-flex align-center">
-                <span>Show</span>
-                <v-select
-                  :items="[10, 25, 50]"
-                  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
-                  label="Search"
-                  hide-details
-                  density="compact"
-                  style="min-width: 200px"
-                ></v-text-field>
-              </div>
-            </div>
-            <v-card-text>
-              <v-data-table
-                :headers="headers"
-                :items="mainPatients"
-                :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,
-                }"
+          </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
               >
-                <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>
-            </v-card-text>
-
+              <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"
+            >
+              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>
+          </div>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-container>
 </template>
 
 <script setup lang="ts">
-import { ref } 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
+import { ref, computed } from "vue";
 
 // Struktur data yang memisahkan menu dengan dan tanpa submenu
 const items = ref([
@@ -165,6 +224,7 @@ const items = ref([
   { title: "Screen", icon: "mdi-monitor" },
   { title: "List Pasien", icon: "mdi-format-list-bulleted" },
 ]);
+
 const headers = ref([
   { title: "No", value: "no", sortable: false },
   { title: "Tgl Daftar", value: "tglDaftar", sortable: true },
@@ -178,6 +238,7 @@ const headers = ref([
   { title: "Masuk", value: "masuk", sortable: true },
   { title: "Aksi", value: "aksi", sortable: false },
 ]);
+
 const mainPatients = ref([
   {
     no: 1,
@@ -192,7 +253,7 @@ const mainPatients = ref([
     masuk : "TIDAK",
     status: "current",
   },
-   {
+  {
     no: 2,
     tglDaftar: "18:23",
     rm: "42081123200199",
@@ -205,7 +266,7 @@ const mainPatients = ref([
     masuk : "TIDAK",
     status: "current",
   },
-   {
+  {
     no: 3,
     tglDaftar: "02:19",
     rm: "15092710084",
@@ -218,7 +279,7 @@ const mainPatients = ref([
     masuk : "TIDAK",
     status: "current",
   },
-   {
+  {
     no: 4,
     tglDaftar: "10:09",
     rm: "250254310011",
@@ -231,14 +292,138 @@ const mainPatients = ref([
     masuk : "TIDAK",
     status: "current",
   },
-
 ]);
-const search = ref(""); 
-// const searchLate = ref('');
-// const page = ref(1);
-// const lateVisitors = ref('');
-// // const lateHeaders = ref ('');
-// definePageMeta({
-//   layout: 'MainL'
-// });
-</script>
+
+const search = ref("");
+const itemsPerPage = ref(10);
+
+// 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));
+
+// 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;
+};
+</script>
\ No newline at end of file