update komponen tabel

components/TabelData.vue

@@ -0,0 +1,347 @@
+<!-- components/TabelData.vue -->
+<template>
+  <v-card-text>
+    <!-- Title Section -->
+    <v-row no-gutters class="mb-3" v-if="title">
+      <v-col cols="12">
+        <v-card-title 
+          class="text-subtitle-1 font-weight-bold pa-0" 
+          :class="getTitleClass(title)"
+        >
+          {{ title }}
+        </v-card-title>
+      </v-col>
+    </v-row>
+
+    <!-- Controls Section -->
+    <v-row no-gutters class="d-flex align-center mb-4">
+      <v-col cols="12" sm="6" class="d-flex align-center">
+        <div class="d-flex align-center">
+          <span>Show</span>
+          <v-select
+            v-model="itemsPerPage"
+            :items="[10, 25, 50, 100]"
+            density="compact"
+            variant="outlined"
+            hide-details
+            class="mx-2"
+            style="width: 80px;"
+          />
+          <span>entries</span>
+        </div>
+      </v-col>
+
+      <v-col cols="12" sm="6" class="d-flex justify-end align-center">
+        <div v-if="showSearch" class="d-flex align-center">
+          <span class="mr-2">Search:</span>
+          <v-text-field
+            v-model="search"
+            hide-details
+            density="compact"
+            variant="outlined"
+            style="width: 200px;"
+          />
+        </div>
+      </v-col>
+    </v-row>
+
+    <v-data-table
+      :headers="headers"
+      :items="paginatedItems"
+      :search="search"
+      no-data-text="No data available in table"
+      hide-default-footer
+      class="elevation-1"
+      item-value="no"
+    >
+      <!-- Custom slot untuk nomor urut -->
+      <template v-slot:item.no="{ index }">
+        {{ (currentPage - 1) * itemsPerPage + index + 1 }}
+      </template>
+
+      <!-- Custom slot untuk jam panggil dengan highlighting -->
+      <template v-slot:item.jamPanggil="{ item }">
+        <slot name="item.jamPanggil" :item="item">
+          <span>{{ item.jamPanggil }}</span>
+        </slot>
+      </template>
+
+      <!-- Custom slot untuk status -->
+      <template v-slot:item.status="{ item }">
+        <v-chip
+          :color="getStatusColor(item.status)"
+          size="small"
+          text-color="white"
+        >
+          {{ item.status }}
+        </v-chip>
+      </template>
+
+      <!-- Custom slot untuk barcode dengan formatting -->
+      <template v-slot:item.barcode="{ item }">
+        <span class="font-mono">{{ item.barcode }}</span>
+      </template>
+
+      <!-- Custom slot untuk no antrian dengan highlighting -->
+      <template v-slot:item.noAntrian="{ item }">
+        <div>
+          <span class="font-weight-medium">{{ item.noAntrian.split(' |')[0] }}</span>
+          <br>
+          <small class="text-grey-darken-1">{{ item.noAntrian.split(' |')[1] }}</small>
+        </div>
+      </template>
+
+      <!-- Custom slot untuk klinik dengan chip styling -->
+      <template v-slot:item.klinik="{ item }">
+        <v-chip
+          size="small"
+          variant="outlined"
+          :color="getKlinikColor(item.klinik)"
+        >
+          {{ item.klinik }}
+        </v-chip>
+      </template>
+
+      <!-- Custom slot untuk fast track -->
+      <template v-slot:item.fastTrack="{ item }">
+        <v-chip
+          size="small"
+          color="info"
+          variant="tonal"
+        >
+          {{ item.fastTrack }}
+        </v-chip>
+      </template>
+
+      <!-- Custom slot untuk pembayaran -->
+      <template v-slot:item.pembayaran="{ item }">
+        <v-chip
+          size="small"
+          color="success"
+          variant="tonal"
+        >
+          {{ item.pembayaran }}
+        </v-chip>
+      </template>
+
+      <!-- Custom slot untuk keterangan -->
+      <template v-slot:item.keterangan="{ item }">
+        <span v-if="item.keterangan" class="text-green font-weight-medium">
+          {{ item.keterangan }}
+        </span>
+        <span v-else>-</span>
+      </template>
+
+      <!-- Slot untuk aksi -->
+      <template v-slot:item.aksi="{ item }">
+        <slot name="actions" :item="item" />
+      </template>
+
+      <template #no-data>
+        <div class="text-center pa-4">No data available in table</div>
+      </template>
+    </v-data-table>
+
+    <!-- Footer Pagination -->
+    <div class="d-flex justify-space-between align-center mt-4">
+      <div class="text-body-2 text-grey-darken-1">
+        Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ filteredTotal }} entries
+      </div>
+      
+      <v-pagination
+        v-model="currentPage"
+        :length="totalPages"
+        :total-visible="7"
+      />
+    </div>
+  </v-card-text>
+</template>
+
+<script setup>
+import { ref, computed, watch } 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);
+
+// Filter items based on search
+const filteredItems = computed(() => {
+  if (!search.value) {
+    return props.items;
+  }
+  
+  const searchLower = search.value.toLowerCase();
+  return props.items.filter(item => {
+    return Object.values(item).some(value => 
+      String(value).toLowerCase().includes(searchLower)
+    );
+  });
+});
+
+const filteredTotal = computed(() => filteredItems.value.length);
+const totalPages = computed(() => Math.ceil(filteredTotal.value / itemsPerPage.value));
+
+// Paginate the filtered items
+const paginatedItems = computed(() => {
+  const start = (currentPage.value - 1) * itemsPerPage.value;
+  const end = start + itemsPerPage.value;
+  return filteredItems.value.slice(start, end);
+});
+
+const currentPageStart = computed(() => {
+  if (filteredTotal.value === 0) return 0;
+  return (currentPage.value - 1) * itemsPerPage.value + 1;
+});
+
+const currentPageEnd = computed(() => {
+  const end = currentPage.value * itemsPerPage.value;
+  return Math.min(end, filteredTotal.value);
+});
+
+// Method untuk mendapatkan warna status
+const getStatusColor = (status) => {
+  switch (status) {
+    case 'Tunggu Daftar':
+      return 'orange';
+    case 'Barcode':
+      return 'blue';
+    case 'Selesai':
+      return 'green';
+    case 'Batal':
+      return 'red';
+    case 'Aktif':
+      return 'success';
+    case 'Menunggu':
+      return 'warning';
+    default:
+      return 'grey';
+  }
+};
+
+// Method untuk mendapatkan warna klinik
+const getKlinikColor = (klinik) => {
+  switch (klinik) {
+    case 'KANDUNGAN':
+      return 'pink';
+    case 'IPD':
+      return 'blue';
+    case 'THT':
+      return 'orange';
+    case 'SARAF':
+      return 'purple';
+    default:
+      return 'grey';
+  }
+};
+
+// Method untuk mendapatkan class title
+const getTitleClass = (title) => {
+  if (title.includes('TERLAMBAT')) {
+    return 'text-warning';
+  } else if (title.includes('PENDING')) {
+    return 'text-info';
+  } else if (title.includes('DI LOKET')) {
+    return 'text-success';
+  }
+  return 'text-primary';
+};
+
+// Watch untuk reset halaman ketika items per page berubah
+watch(itemsPerPage, () => {
+  currentPage.value = 1;
+});
+
+// Watch untuk reset halaman ketika items berubah
+watch(() => props.items, () => {
+  currentPage.value = 1;
+});
+
+// Watch untuk reset halaman ketika search berubah
+watch(search, () => {
+  currentPage.value = 1;
+});
+</script>
+
+<style scoped>
+.text-red {
+  color: #f44336 !important;
+}
+
+.text-warning {
+  color: #ff9800 !important;
+}
+
+.text-info {
+  color: #2196f3 !important;
+}
+
+.text-success {
+  color: #4caf50 !important;
+}
+
+.text-primary {
+  color: #1976d2 !important;
+}
+
+.font-mono {
+  font-family: 'Courier New', monospace;
+  font-size: 0.875rem;
+}
+
+/* Table enhancements */
+:deep(.v-data-table) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:deep(.v-data-table tbody tr) {
+  transition: background-color 0.2s ease;
+}
+
+:deep(.v-data-table tbody tr:hover) {
+  background: rgba(25, 118, 210, 0.04) !important;
+}
+
+:deep(.v-data-table th) {
+  font-weight: 600 !important;
+  background: #fafafa !important;
+  color: #424242 !important;
+}
+
+:deep(.v-data-table td) {
+  border-bottom: 1px solid #e0e0e0 !important;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  :deep(.v-data-table) {
+    font-size: 0.875rem;
+  }
+  
+  .v-pagination {
+    :deep(.v-pagination__item) {
+      min-width: 32px;
+      height: 32px;
+    }
+  }
+}
+</style>

components/TabelLayanan.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="items"
+    hide-default-footer
+    class="elevation-1"
+  >
+    <template v-slot:item.pilih="{ item }">
+      <v-checkbox
+        :model-value="isSelected(item.id)"
+        @change="toggleService(item.id)"
+        color="primary"
+      ></v-checkbox>
+    </template>
+    
+    <template v-slot:item.no="{ item }">
+      {{ item.no }}
+    </template>
+  </v-data-table>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  headers: Array,
+  items: Array,
+  selectedItems: Array,
+});
+
+const emit = defineEmits(['update:selectedItems']);
+
+const isSelected = (id) => props.selectedItems.includes(id);
+
+const toggleService = (id) => {
+  const newSelection = isSelected(id)
+    ? props.selectedItems.filter(serviceId => serviceId !== id)
+    : [...props.selectedItems, id];
+  
+  emit('update:selectedItems', newSelection);
+};
+</script>
+
+<style scoped>
+.v-data-table {
+  border-radius: 8px;
+}
+
+.v-checkbox {
+  justify-content: center;
+}
+</style>

components/TabelListPasien.vue

@@ -0,0 +1,320 @@
+<template>
+  <div>
+    <!-- Filter Section -->
+    <v-row class="mb-4">
+      <v-col cols="12" class="d-flex align-center flex-wrap ml-4">
+        <div style="width: 200px;" class="mr-4">
+          <v-text-field
+            v-model="filterDate"
+            type="date"
+            label="Tanggal"
+            density="compact"
+            hide-details
+            variant="outlined"
+          />
+        </div>
+        <div style="width: 150px;" class="mr-4">
+          <v-select
+            v-model="filterStatus"
+            :items="statusOptions"
+            label="Status"
+            density="compact"
+            hide-details
+            variant="outlined"
+          />
+        </div>
+        <v-btn color="primary" @click="searchData" class="mr-3">
+          SEARCH
+        </v-btn>
+        <v-btn color="success" variant="outlined" @click="exportLaporan" class="mr-3">
+          Laporan Pasien
+        </v-btn>
+        <v-btn color="info" variant="outlined" @click="exportLaporanPerKlinik">
+          Laporan Pasien Per Klinik
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <!-- Table Controls -->
+    <v-row class="mb-3">
+      <v-col cols="12" md="6" class="d-flex align-center">
+        <span class="mr-2 pa-4">Show</span>
+        <div style="width: 100px;">
+          <v-select
+            v-model="itemsPerPage"
+            :items="[10, 25, 50, 100]"
+            density="compact"
+            hide-details
+            variant="outlined"
+          />
+        </div>
+        <span class="ml-2">entries</span>
+      </v-col>
+      <v-col cols="12" md="6" class="d-flex justify-end">
+        <div class="d-flex align-center pa-4">
+          <span class="mr-2">Search:</span>
+          <v-text-field
+            v-model="search"
+            density="compact"
+            hide-details
+            style="min-width: 200px"
+            variant="outlined"
+          />
+        </div>
+      </v-col>
+    </v-row>
+
+    <!-- Data Table -->
+    <v-data-table
+      :headers="headers"
+      :items="paginatedItems"
+      :search="search"
+      hide-default-footer
+      class="elevation-1"
+    >
+      <!-- Custom Status Column -->
+      <template v-slot:item.status="{ item }">
+        <v-chip
+          :color="getStatusColor(item.status)"
+          size="small"
+          variant="flat"
+        >
+          {{ item.status }}
+        </v-chip>
+      </template>
+
+      <!-- Custom Keterangan Column -->
+      <template v-slot:item.keterangan="{ item }">
+        <span :class="getKeteranganClass(item.keterangan)">
+          {{ item.keterangan }}
+        </span>
+      </template>
+
+      <!-- No Data -->
+      <template #no-data>
+        <div class="text-center pa-4">
+          No data available in table
+        </div>
+      </template>
+    </v-data-table>
+
+    <!-- Pagination -->
+    <div class="d-flex justify-space-between align-center pa-4">
+      <div class="text-body-2 text-grey-darken-1">
+        Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalFilteredItems }} entries
+      </div>
+      <div class="d-flex align-center">
+        <v-btn
+          :disabled="currentPage === 1"
+          @click="previousPage"
+          variant="text"
+          size="small"
+        >
+          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"
+        >
+          Next
+        </v-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['search', 'export-laporan', 'export-laporan-per-klinik'])
+
+// Filter states
+const filterDate = ref('')
+const filterStatus = ref('Semua')
+const search = ref('')
+
+// Pagination states
+const itemsPerPage = ref(10)
+const currentPage = ref(1)
+
+// Status options
+const statusOptions = ['Semua', 'Online', 'Offline', 'Tunggu Daftar', 'Barcode']
+
+// Table headers
+const headers = [
+  { title: 'No', key: 'no', sortable: false, width: '60px' },
+  { title: 'Tgl Periksa', key: 'tglPeriksa', sortable: true },
+  { title: 'NIK', key: 'nik', sortable: true },
+  { title: 'RM', key: 'rm', sortable: true },
+  { title: 'Barcode', key: 'barcode', sortable: true },
+  { title: 'No Antrian', key: 'noAntrian', sortable: true },
+  { title: 'Klinik', key: 'klinik', sortable: true },
+  { title: 'First Name Last Name', key: 'fullName', sortable: true },
+  { title: 'Shift', key: 'shift', sortable: true },
+  { title: 'Pembayaran', key: 'pembayaran', sortable: true },
+  { title: 'Keterangan', key: 'keterangan', sortable: true },
+  { title: 'Status', key: 'status', sortable: true }
+]
+
+// Computed properties
+const filteredItems = computed(() => {
+  let filtered = props.items
+
+  // Filter by date
+  if (filterDate.value) {
+    filtered = filtered.filter(item => 
+      item.tglPeriksa === filterDate.value
+    )
+  }
+
+  // Filter by status
+  if (filterStatus.value && filterStatus.value !== 'Semua') {
+    filtered = filtered.filter(item => 
+      item.status === filterStatus.value
+    )
+  }
+
+  return filtered
+})
+
+const totalFilteredItems = computed(() => filteredItems.value.length)
+const totalPages = computed(() => Math.ceil(totalFilteredItems.value / itemsPerPage.value))
+
+const paginatedItems = computed(() => {
+  const start = (currentPage.value - 1) * itemsPerPage.value
+  const end = start + itemsPerPage.value
+  return filteredItems.value.slice(start, end).map((item, index) => ({
+    ...item,
+    no: start + index + 1
+  }))
+})
+
+const currentPageStart = computed(() => 
+  totalFilteredItems.value === 0 ? 0 : (currentPage.value - 1) * itemsPerPage.value + 1
+)
+
+const currentPageEnd = computed(() => 
+  Math.min(currentPage.value * itemsPerPage.value, totalFilteredItems.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
+})
+
+// Methods
+const searchData = () => {
+  currentPage.value = 1
+  emit('search', {
+    date: filterDate.value,
+    status: filterStatus.value
+  })
+}
+
+const exportLaporan = () => {
+  emit('export-laporan')
+}
+
+const exportLaporanPerKlinik = () => {
+  // Navigate to laporan pasien per klinik page
+  navigateTo('/laporan-pasien-per-klinik')
+}
+
+const getStatusColor = (status) => {
+  const colorMap = {
+    'Online': 'success',
+    'Offline': 'error', 
+    'Tunggu Daftar': 'warning',
+    'Barcode': 'info'
+  }
+  return colorMap[status] || 'default'
+}
+
+const getKeteranganClass = (keterangan) => {
+  return keterangan === 'Online' ? 'text-success' : ''
+}
+
+const previousPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--
+  }
+}
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++
+  }
+}
+
+const goToPage = (page) => {
+  currentPage.value = page
+}
+
+// Watchers
+watch(itemsPerPage, () => {
+  currentPage.value = 1
+})
+
+watch([filterDate, filterStatus], () => {
+  currentPage.value = 1
+})
+</script>
+
+<style scoped>
+.text-success {
+  color: rgb(76, 175, 80) !important;
+}
+</style>

layouts/default.vue

@@ -2,14 +2,14 @@
   <!-- Root component for the entire Vuetify application -->
   <v-app>
     <!-- App bar di bagian atas layout -->
-     <v-app-bar app color="green darken-1" dark>
+     <v-app-bar app color=#ff9248 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-toolbar-title class="ml-2" style="color: white;">Antrean RSSA</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn icon>
-          <v-icon>mdi-account-circle</v-icon>
+          <v-icon color="white">mdi-account-circle</v-icon>
         </v-btn>
-        <span class="mr-2">Ragil Bayu Nogroho</span>
+        <span class="mr-2" style="color:white">Adam Sulfat</span>
       </v-app-bar>
 
     <!-- Komponen sidebar (v-navigation-drawer) yang Anda berikan -->
@@ -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>
@@ -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>

pages/Anjungan/Anjungan.vue

@@ -0,0 +1,686 @@
+<!-- pages/Anjungan.vue -->
+<template>
+  <div class="anjungan-container">
+    <!-- Header Section -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="header-icon">
+            <v-icon size="32" color="white">mdi-hospital-building</v-icon>
+          </div>
+          <div class="header-text">
+            <h1 class="page-title">Anjungan RSSA</h1>
+            <p class="page-subtitle">Pilih Klinik untuk Pendaftaran</p>
+          </div>
+        </div>
+        <div class="header-right">
+          <v-chip color="white" variant="flat" class="instruction-chip">
+            <v-icon start size="16">mdi-information</v-icon>
+            Hijau: Tersedia | Merah: Tutup/Penuh
+          </v-chip>
+        </div>
+      </div>
+    </div>
+
+    <!-- Controls Section -->
+    <v-card class="controls-card mb-4" elevation="2">
+      <v-card-text class="py-3">
+        <v-row align="center">
+          <v-col cols="12" md="6">
+            <div class="d-flex align-center flex-wrap gap-3">
+              <v-select
+                v-model="selectedStatus"
+                :items="statusOptions"
+                label="Filter Status"
+                density="compact"
+                variant="outlined"
+                hide-details
+                clearable
+                style="min-width: 160px;"
+              />
+              
+              <v-text-field
+                v-model="searchQuery"
+                label="Cari Klinik"
+                density="compact"
+                variant="outlined"
+                prepend-inner-icon="mdi-magnify"
+                hide-details
+                clearable
+                style="min-width: 200px;"
+              />
+            </div>
+          </v-col>
+          
+          <v-col cols="12" md="6">
+            <div class="d-flex justify-end align-center flex-wrap gap-2">
+              <v-btn
+                variant="outlined"
+                prepend-icon="mdi-refresh"
+                @click="refreshData"
+                :loading="loading"
+                size="small"
+              >
+                Refresh
+              </v-btn>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- Clinic Cards -->
+    <v-card elevation="2" class="main-content-card">
+      <v-card-title class="d-flex align-center pa-4 bg-grey-lighten-4">
+        <v-icon class="mr-2">mdi-hospital-marker</v-icon>
+        <span>Daftar Klinik - {{ filteredClinics.length }} dari {{ totalClinics }} klinik</span>
+      </v-card-title>
+
+      <v-card-text class="pa-6">
+        <v-row>
+          <v-col
+            v-for="clinic in filteredClinics"
+            :key="clinic.id"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="3"
+            class="pa-2"
+          >
+            <v-card   
+              :class="{
+                'clinic-card': true,
+                'clinic-available': clinic.available,
+                'clinic-closed': !clinic.available
+              }"
+              :disabled="!clinic.available"
+              @click="selectClinic(clinic)"
+              elevation="2"
+            >
+              <v-card-text class="text-center pa-4">
+                <!-- Status Chip -->
+                <div class="mb-3">
+                  <v-chip
+                    :color="clinic.available ? 'success' : 'error'"
+                    size="small"
+                    variant="flat"
+                  >
+                    {{ clinic.available ? 'TERSEDIA' : 'TUTUP' }}
+                  </v-chip>
+                </div>
+
+                <!-- Icon -->
+                <div class="clinic-icon-wrapper mb-3">
+                  <v-icon
+                    :icon="clinic.icon"
+                    size="40"
+                    :color="clinic.available ? 'success' : 'error'"
+                  ></v-icon>
+                </div>
+
+                <!-- Clinic Name -->
+                <h3 class="text-h6 font-weight-bold mb-2">
+                  {{ clinic.name }}
+                </h3>
+
+                <!-- Subtitle -->
+                <p v-if="clinic.subtitle" class="text-caption text-grey-darken-1 mb-2">
+                  {{ clinic.subtitle }}
+                </p>
+
+                <!-- Shift Info -->
+                <div class="shift-info">
+                  <v-chip
+                    size="small"
+                    :color="clinic.available ? 'info' : 'error'"
+                    variant="outlined"
+                    class="mb-2"
+                  >
+                    {{ clinic.shift }}
+                  </v-chip>
+                  <br>
+                  <span v-if="clinic.schedule" class="text-caption text-grey-darken-1">
+                    {{ clinic.schedule }}
+                  </span>
+                </div>
+
+                <!-- Action Button -->
+                <div class="mt-3">
+                  <v-btn
+                    v-if="clinic.available"
+                    color="success"
+                    variant="flat"
+                    size="small"
+                    block
+                  >
+                    Pilih Klinik
+                  </v-btn>
+                  <v-btn
+                    v-else
+                    color="error"
+                    variant="outlined"
+                    size="small"
+                    disabled
+                    block
+                  >
+                    Tidak Tersedia
+                  </v-btn>
+                </div>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+
+        <!-- Empty State -->
+        <div v-if="filteredClinics.length === 0" class="text-center py-8">
+          <v-icon size="64" color="grey-lighten-1">mdi-hospital-marker-outline</v-icon>
+          <h3 class="text-h6 mt-4 text-grey-darken-1">Tidak ada klinik yang sesuai filter</h3>
+          <p class="text-body-2 text-grey-darken-1">Coba ubah filter pencarian Anda</p>
+        </div>
+      </v-card-text>
+    </v-card>
+
+    <!-- Selection Dialog -->
+    <v-dialog v-model="showDialog" max-width="500">
+      <v-card>
+        <v-card-title class="d-flex align-center bg-primary text-white">
+          <v-icon class="mr-2">mdi-check-circle</v-icon>
+          Konfirmasi Pilihan
+        </v-card-title>
+        
+        <v-card-text class="pa-6" v-if="selectedClinic">
+          <div class="text-center">
+            <div class="mb-3">
+              <v-icon :icon="selectedClinic.icon" size="48" color="primary"></v-icon>
+            </div>
+            <h3 class="text-h5 font-weight-bold mb-2">{{ selectedClinic.name }}</h3>
+            <p v-if="selectedClinic.subtitle" class="text-body-1 text-grey-darken-1 mb-3">
+              {{ selectedClinic.subtitle }}
+            </p>
+            
+            <v-divider class="my-4"></v-divider>
+            
+            <div class="text-left">
+              <p><strong>Shift:</strong> {{ selectedClinic.shift }}</p>
+              <p v-if="selectedClinic.schedule"><strong>Jadwal:</strong> {{ selectedClinic.schedule }}</p>
+              <p><strong>Status:</strong> <span class="text-success">Tersedia</span></p>
+            </div>
+          </div>
+        </v-card-text>
+        
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn @click="showDialog = false" variant="text">
+            Batal
+          </v-btn>
+          <v-btn 
+            color="primary" 
+            @click="proceedToRegistration"
+            variant="flat"
+          >
+            Lanjutkan
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Snackbar -->
+    <v-snackbar
+      v-model="snackbar"
+      :color="snackbarColor"
+      :timeout="3000"
+      location="top right"
+    >
+      {{ snackbarText }}
+      
+      <template v-slot:actions>
+        <v-btn icon @click="snackbar = false">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+definePageMeta({
+      layout: false, // Disables the layout for this specific page
+    });
+
+// Reactive data
+const loading = ref(false)
+const selectedStatus = ref(null)
+const searchQuery = ref('')
+const showDialog = ref(false)
+const selectedClinic = ref(null)
+const snackbar = ref(false)
+const snackbarText = ref('')
+const snackbarColor = ref('success')
+
+// Options
+const statusOptions = ['Tersedia', 'Tutup']
+
+// Clinic data
+const clinics = ref([
+  {
+    id: 1,
+    name: 'ANAK',
+    subtitle: '',
+    icon: 'mdi-baby-face',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 2,
+    name: 'ANESTESI',
+    subtitle: '',
+    icon: 'mdi-sleep',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 3,
+    name: 'BEDAH',
+    subtitle: '',
+    icon: 'mdi-medical-bag',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 4,
+    name: 'GERIATRI',
+    subtitle: '',
+    icon: 'mdi-account-supervisor',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 5,
+    name: 'GIGI DAN MULUT',
+    subtitle: 'GIGI DAN MULUT',
+    icon: 'mdi-tooth',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 6,
+    name: 'GIZI',
+    subtitle: '',
+    icon: 'mdi-food-apple',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 7,
+    name: 'HOM',
+    subtitle: 'HEMATO ONKOLOGI MEDIS',
+    icon: 'mdi-water',
+    shift: 'TUTUP',
+    schedule: '',
+    available: false,
+  },
+  {
+    id: 8,
+    name: 'IPD',
+    subtitle: 'PENYAKIT DALAM',
+    icon: 'mdi-hospital',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 9,
+    name: 'JANTUNG',
+    subtitle: 'CARDIOLOGI',
+    icon: 'mdi-heart-pulse',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 10,
+    name: 'JIWA',
+    subtitle: '',
+    icon: 'mdi-brain',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 11,
+    name: 'KANDUNGAN',
+    subtitle: '',
+    icon: 'mdi-human-pregnant',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 12,
+    name: 'KEMOTERAPI',
+    subtitle: '',
+    icon: 'mdi-needle',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 13,
+    name: 'KOMPLEMENTER',
+    subtitle: 'NYERI',
+    icon: 'mdi-leaf',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 14,
+    name: 'KUL KEL',
+    subtitle: 'KULIT KELAMIN',
+    icon: 'mdi-hand-back-right',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 15,
+    name: 'MATA',
+    subtitle: '',
+    icon: 'mdi-eye',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 16,
+    name: 'MCU',
+    subtitle: '',
+    icon: 'mdi-clipboard-check',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 17,
+    name: 'ONKOLOGI',
+    subtitle: '',
+    icon: 'mdi-ribbon',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 18,
+    name: 'PARU',
+    subtitle: '',
+    icon: 'mdi-lungs',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 19,
+    name: 'R. TINDAKAN',
+    subtitle: 'EMG, ECG, DLL',
+    icon: 'mdi-monitor-heart-rate',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 20,
+    name: 'RADIOTERAPI',
+    subtitle: '',
+    icon: 'mdi-radioactive',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 21,
+    name: 'REHAB MEDIK',
+    subtitle: '',
+    icon: 'mdi-human-cane',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  },
+  {
+    id: 22,
+    name: 'SARAF',
+    subtitle: 'NEUROLOGI',
+    icon: 'mdi-head-cog',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: false,
+  },
+  {
+    id: 23,
+    name: 'THT',
+    subtitle: '',
+    icon: 'mdi-ear-hearing',
+    shift: 'SHIFT 1',
+    schedule: 'Mulai Pukul 07:00',
+    available: true,
+  }
+])
+
+// Computed properties
+const filteredClinics = computed(() => {
+  let filtered = clinics.value
+
+  if (selectedStatus.value) {
+    const isAvailable = selectedStatus.value === 'Tersedia'
+    filtered = filtered.filter(clinic => clinic.available === isAvailable)
+  }
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    filtered = filtered.filter(clinic => 
+      clinic.name.toLowerCase().includes(query) ||
+      clinic.subtitle.toLowerCase().includes(query)
+    )
+  }
+
+  return filtered
+})
+
+const totalClinics = computed(() => clinics.value.length)
+
+// Methods
+const showSnackbar = (text, color = 'success') => {
+  snackbarText.value = text
+  snackbarColor.value = color
+  snackbar.value = true
+}
+
+const selectClinic = (clinic) => {
+  if (clinic.available) {
+    selectedClinic.value = clinic
+    showDialog.value = true
+  }
+}
+
+const proceedToRegistration = () => {
+  showSnackbar(`Mengarahkan ke pendaftaran ${selectedClinic.value.name}...`, 'success')
+  console.log('Proceeding to registration for:', selectedClinic.value.name)
+  showDialog.value = false
+}
+
+const refreshData = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    showSnackbar('Status klinik berhasil diperbarui', 'success')
+  }, 1000)
+}
+
+// Lifecycle
+onMounted(() => {
+  refreshData()
+})
+</script>
+
+<style scoped>
+.anjungan-container {
+  background: #f5f7fa;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.page-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.instruction-chip {
+  font-weight: 500;
+  color: #1976d2 !important;
+}
+
+.controls-card,
+.main-content-card {
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.clinic-card {
+  cursor: pointer;
+  border-radius: 16px !important;
+  height: 280px;
+  background: white;
+}
+
+.clinic-available {
+  border-left: 6px solid #4CAF50;
+}
+
+.clinic-closed {
+  opacity: 0.7;
+  cursor: not-allowed;
+  border-left: 6px solid #F44336;
+  background: #fafafa;
+}
+
+.clinic-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 70px;
+  height: 70px;
+  background: rgba(76, 175, 80, 0.1);
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.clinic-closed .clinic-icon-wrapper {
+  background: rgba(244, 67, 54, 0.1);
+}
+
+.shift-info {
+  margin-top: 8px;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .header-content {
+    flex-direction: column;
+    gap: 20px;
+    text-align: center;
+  }
+  
+  .header-left {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .page-title {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 768px) {
+  .anjungan-container {
+    padding: 16px;
+  }
+  
+  .header-content {
+    padding: 24px 20px;
+  }
+  
+  .page-title {
+    font-size: 24px;
+  }
+  
+  .header-icon {
+    padding: 12px;
+  }
+
+  .clinic-card {
+    height: 260px;
+  }
+
+  .clinic-icon-wrapper {
+    width: 60px;
+    height: 60px;
+  }
+}
+
+@media (max-width: 600px) {
+  .clinic-card {
+    height: 240px;
+  }
+  
+  .page-title {
+    font-size: 20px;
+  }
+}
+</style>

pages/List-Pasien.vue

@@ -0,0 +1,635 @@
+<template>
+  <div class="pasien-container">
+    <!-- Header Section -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="header-icon">
+            <v-icon size="32" color="white">mdi-account-group</v-icon>
+          </div>
+          <div class="header-text">
+            <h1 class="page-title">List Pasien</h1>
+            <p class="page-subtitle">Senin, 15 September 2025 - Data Master Pasien</p>
+          </div>
+        </div>
+        <div class="header-right">
+          <v-chip
+            color="success"
+            variant="flat"
+            class="mr-2"
+          >
+            Total {{ pasienData.length }} Pasien
+          </v-chip>
+          <v-chip
+            color="white"
+            variant="flat"
+            class="text-primary"
+          >
+            Status: Aktif
+          </v-chip>
+        </div>
+      </div>
+    </div>
+
+    <!-- Filter Controls
+    <v-card class="filter-controls-card mb-4" elevation="2">
+      <v-card-text class="py-4">
+        <v-row align="center">
+          <v-col cols="12" md="8">
+            <div class="d-flex align-center flex-wrap gap-10">
+              <span class="text-subtitle-1 font-weight-medium">Filter Cepat:</span>
+              <v-btn
+                color="primary"
+                variant="flat"
+                size="default"
+                class="px-4"
+                @click="filterByStatus('Tunggu Daftar')"
+              >
+                <v-icon start size="16">mdi-clock-outline</v-icon>
+                Tunggu Daftar
+              </v-btn>
+              <v-btn
+                color="success"
+                variant="flat"
+                size="default"
+                class="px-4"
+                @click="filterByStatus('Selesai')"
+              >
+                <v-icon start size="16">mdi-check-circle</v-icon>
+                Selesai
+              </v-btn>
+              <v-btn
+                color="warning"
+                variant="flat"
+                size="default"
+                class="px-4"
+                @click="filterByKlinik('JKN')"
+              >
+                <v-icon start size="16">mdi-card-account-details</v-icon>
+                JKN
+              </v-btn>
+              <v-btn
+                color="info"
+                variant="flat"
+                size="default"
+                class="px-4"
+                @click="resetFilter()"
+              >
+                <v-icon start size="16">mdi-refresh</v-icon>
+                Reset
+              </v-btn>
+            </div>
+          </v-col>
+          <v-col cols="12" md="4">
+            <div class="d-flex justify-end gap-2">
+              <v-btn
+                color="success"
+                variant="flat"
+                @click="handleExportLaporan"
+                :loading="loading"
+              >
+                <v-icon start>mdi-file-excel</v-icon>
+                Export Laporan
+              </v-btn>
+              <v-btn
+                color="primary"
+                variant="flat"
+                @click="handleExportLaporanPerKlinik"
+                :loading="loading"
+              >
+                <v-icon start>mdi-hospital-building</v-icon>
+                Export Per Klinik
+              </v-btn>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card> -->
+
+    <!-- Main Patients Table -->
+    <v-card class="main-table-card mb-4" elevation="2">
+      <v-card-title class="d-flex align-center justify-space-between pa-6">
+        <div class="d-flex align-center">
+          <v-icon color="primary" class="mr-2">mdi-table</v-icon>
+          <span class="text-h6 font-weight-bold">DATA PASIEN</span>
+        </div>
+        <v-chip color="info" variant="flat">
+          {{ filteredData.length }} dari {{ pasienData.length }} pasien
+        </v-chip>
+      </v-card-title>
+      
+      <v-divider></v-divider>
+      
+      <TabelListPasien
+        :items="filteredData"
+        @search="handleSearch"
+        @export-laporan="handleExportLaporan"
+        @export-laporan-per-klinik="handleExportLaporanPerKlinik"
+      />
+    </v-card>
+
+    Statistics Cards
+    <v-row class="mb-4">
+      <v-col cols="12" md="3">
+        <v-card class="stats-card" elevation="2">
+          <v-card-text class="text-center pa-4">
+            <v-icon size="40" color="success" class="mb-2">mdi-account-check</v-icon>
+            <div class="text-h4 font-weight-bold text-success">{{ getStatsByStatus('Tunggu Daftar') }}</div>
+            <div class="text-body-2 text-grey-darken-1">Tunggu Daftar</div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card class="stats-card" elevation="2">
+          <v-card-text class="text-center pa-4">
+            <v-icon size="40" color="info" class="mb-2">mdi-barcode</v-icon>
+            <div class="text-h4 font-weight-bold text-info">{{ getStatsByStatus('Barcode') }}</div>
+            <div class="text-body-2 text-grey-darken-1">Barcode</div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card class="stats-card" elevation="2">
+          <v-card-text class="text-center pa-4">
+            <v-icon size="40" color="warning" class="mb-2">mdi-wifi</v-icon>
+            <div class="text-h4 font-weight-bold text-warning">{{ getStatsByKeterangan('Online') }}</div>
+            <div class="text-body-2 text-grey-darken-1">Online</div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card class="stats-card" elevation="2">
+          <v-card-text class="text-center pa-4">
+            <v-icon size="40" color="error" class="mb-2">mdi-wifi-off</v-icon>
+            <div class="text-h4 font-weight-bold text-error">{{ getStatsByKeterangan('Offline') }}</div>
+            <div class="text-body-2 text-grey-darken-1">Offline</div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Loading Overlay -->
+    <v-overlay v-model="loading" class="align-center justify-center">
+      <v-progress-circular
+        color="primary"
+        indeterminate
+        size="64"
+      />
+    </v-overlay>
+
+    <!-- Snackbar -->
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      :timeout="3000"
+      location="top right"
+    >
+      {{ snackbar.message }}
+      <template v-slot:actions>
+        <v-btn
+          icon
+          @click="snackbar.show = false"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import TabelListPasien from '~/components/TabelListPasien.vue'
+
+// Meta untuk SEO
+definePageMeta({
+  title: 'List Pasien',
+  layout: 'default'
+})
+
+// Reactive states
+const loading = ref(false)
+const currentFilter = ref('')
+const snackbar = ref({
+  show: false,
+  message: '',
+  color: 'success'
+})
+
+// Sample data
+const pasienData = ref([
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3507264104730004',
+    rm: '11412584',
+    barcode: '250627100001',
+    noAntrian: 'HQ1001',
+    klinik: 'HOM',
+    fullName: 'Binti Almatul',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3504096063630001',
+    rm: '',
+    barcode: '250627100002',
+    noAntrian: 'QB1001',
+    klinik: 'KANDUNGAN',
+    fullName: 'maret kumalal',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3507114102250002',
+    rm: '11555560',
+    barcode: '250627100003',
+    noAntrian: 'QB1002',
+    klinik: 'KANDUNGAN',
+    fullName: 'ayu rafti lelu amanda',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3508185040150002',
+    rm: '11333655',
+    barcode: '250627100004',
+    noAntrian: 'AN1001',
+    klinik: 'ANAK',
+    fullName: 'Erin Wahyuni',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3515085040110004',
+    rm: '11585554',
+    barcode: '250627100005',
+    noAntrian: 'IP1001',
+    klinik: 'IPD',
+    fullName: 'Yohana Karina Pusplta Sari',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3506246105750002',
+    rm: '11527608',
+    barcode: '250627100006',
+    noAntrian: 'IP1001',
+    klinik: 'IPD',
+    fullName: 'Elok Suharsti',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '',
+    rm: '',
+    barcode: '250627100007',
+    noAntrian: 'HQ1002',
+    klinik: 'HOM',
+    fullName: '',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Offline',
+    status: 'Barcode'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '',
+    rm: '',
+    barcode: '250627100008',
+    noAntrian: 'IP1002',
+    klinik: 'IPD',
+    fullName: '',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Offline',
+    status: 'Barcode'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '',
+    rm: '',
+    barcode: '250627100009',
+    noAntrian: 'IP1001',
+    klinik: 'IPD',
+    fullName: '',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Offline',
+    status: 'Barcode'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '',
+    rm: '',
+    barcode: '250627100010',
+    noAntrian: 'IP1001',
+    klinik: 'IPD',
+    fullName: '',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Offline',
+    status: 'Barcode'
+  }
+])
+
+// Computed properties
+const filteredData = computed(() => {
+  if (!currentFilter.value) {
+    return pasienData.value
+  }
+  
+  return pasienData.value.filter(item => {
+    return item.status === currentFilter.value || 
+           item.pembayaran === currentFilter.value ||
+           item.keterangan === currentFilter.value
+  })
+})
+
+// Methods
+const showSnackbar = (message, color = 'success') => {
+  snackbar.value = {
+    show: true,
+    message,
+    color
+  }
+}
+
+const filterByStatus = (status) => {
+  currentFilter.value = status
+  showSnackbar(`Filter diterapkan: ${status}`, 'info')
+}
+
+const filterByKlinik = (pembayaran) => {
+  currentFilter.value = pembayaran
+  showSnackbar(`Filter diterapkan: ${pembayaran}`, 'info')
+}
+
+const resetFilter = () => {
+  currentFilter.value = ''
+  showSnackbar('Filter direset', 'success')
+}
+
+const getStatsByStatus = (status) => {
+  return pasienData.value.filter(item => item.status === status).length
+}
+
+const getStatsByKeterangan = (keterangan) => {
+  return pasienData.value.filter(item => item.keterangan === keterangan).length
+}
+
+const handleSearch = async (filters) => {
+  loading.value = true
+  
+  try {
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    console.log('Search filters:', filters)
+    showSnackbar('Data berhasil difilter', 'success')
+  } catch (error) {
+    console.error('Error searching data:', error)
+    showSnackbar('Gagal memfilter data', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleExportLaporan = async () => {
+  loading.value = true
+  
+  try {
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    console.log('Exporting laporan pasien...')
+    showSnackbar('Laporan pasien berhasil diexport', 'success')
+  } catch (error) {
+    console.error('Error exporting laporan:', error)
+    showSnackbar('Gagal export laporan pasien', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleExportLaporanPerKlinik = async () => {
+  loading.value = true
+  
+  try {
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    console.log('Exporting laporan pasien per klinik...')
+    showSnackbar('Laporan pasien per klinik berhasil diexport', 'success')
+  } catch (error) {
+    console.error('Error exporting laporan per klinik:', error)
+    showSnackbar('Gagal export laporan pasien per klinik', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+const fetchPasienData = async () => {
+  loading.value = true
+  
+  try {
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    console.log('Patient data loaded successfully')
+  } catch (error) {
+    console.error('Error fetching patient data:', error)
+    showSnackbar('Gagal memuat data pasien', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  fetchPasienData()
+})
+
+// Head untuk SEO
+useHead({
+  title: 'List Pasien - Antrean RSSA',
+  meta: [
+    {
+      name: 'description',
+      content: 'Daftar master data seluruh pasien rumah sakit'
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.pasien-container {
+  background: #f5f7fa;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.page-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+/* .filter-controls-card, */
+.main-table-card,
+.stats-card {
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.stats-card {
+  transition: all 0.2s ease;
+}
+
+.stats-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+/* Enhanced table styling */
+.main-table-card :deep(.v-data-table th) {
+  background: #fafbfc;
+  font-weight: 600;
+  font-size: 13px;
+  color: #374151;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.main-table-card :deep(.v-data-table tbody tr:hover) {
+  background: #f8fafc !important;
+}
+
+.main-table-card :deep(.v-data-table tbody td) {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+/* Button styling */
+.v-btn {
+  text-transform: none !important;
+  font-weight: 500;
+}
+
+.v-btn--size-default {
+  height: 40px;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .header-content {
+    flex-direction: column;
+    gap: 20px;
+    text-align: center;
+  }
+  
+  .header-left {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .page-title {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 768px) {
+  .pasien-container {
+    padding: 16px;
+  }
+  
+  .header-content {
+    padding: 24px 20px;
+  }
+  
+  .page-title {
+    font-size: 24px;
+  }
+  
+  .header-icon {
+    padding: 12px;
+  }
+
+  /* .filter-controls-card .d-flex {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  } */
+
+  .filter-controls-card .v-col:last-child .d-flex {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 600px) {
+  .page-title {
+    font-size: 20px;
+  }
+  
+  .filter-buttons-container {
+    justify-content: center;
+  }
+  
+  .filter-btn {
+    margin-right: 12px;
+    margin-bottom: 10px;
+  }
+
+  .header-right .v-chip {
+    font-size: 12px;
+  }
+}
+</style>

pages/Loket-Admin.vue

@@ -0,0 +1,754 @@
+<!-- pages/LoketAdmin.vue -->
+<template>
+  <div class="loket-container">
+    <!-- Header Section -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="header-icon">
+            <v-icon size="32" color="white">mdi-view-dashboard</v-icon>
+          </div>
+          <div class="header-text">
+            <h1 class="page-title">Loket Admin</h1>
+            <p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
+          </div>
+        </div>
+        <div class="header-right">
+          <v-chip color="success" variant="flat" class="mr-2">
+            Total {{ totalPasien }} Pasien
+          </v-chip>
+          <v-chip color="white" variant="flat" class="text-primary">
+            Max 150 Pasien
+          </v-chip>
+        </div>
+      </div>
+    </div>
+    <div>
+      <v-card class="next-patient-card mb-4" elevation="2">
+        <v-card-text class="text-center pa-6">
+          <v-chip color="success" variant="flat" class="mb-3" size="large">
+            <v-icon start>mdi-account-arrow-right</v-icon>
+            PASIEN SELANJUTNYA
+          </v-chip>
+          <div class="text-h4 font-weight-bold mb-2 text-success">
+            {{ nextPatient ? nextPatient.noAntrian.split(" |")[0] : "UM1004" }}
+          </div>
+          <div class="text-body-1 mb-4 text-grey-darken-1">
+            Klik tombol hijau untuk memanggil
+          </div>
+          <v-btn
+            color="success"
+            variant="flat"
+            size="large"
+            class="px-8"
+            @click="callNext"
+            :disabled="!nextPatient"
+          >
+            <v-icon start>mdi-microphone</v-icon>
+            PANGGIL NEXT
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </div>
+    <!-- Combined Control Section -->
+    <v-row class="mb-4">
+      <!-- Left Side: Call Controls and Current Processing -->
+      <v-col cols="12" lg="6">
+        <!-- Current Patient Processing Card -->
+        <v-card
+          v-if="currentProcessingPatient"
+          class="current-processing-card"
+          elevation="2"
+        >
+          <v-card-text class="pa-4">
+            <div class="d-flex align-center justify-space-between">
+              <div class="patient-info">
+                <v-chip color="primary" variant="flat" class="mb-2">
+                  <v-icon start>mdi-account-clock</v-icon>
+                  SEDANG DIPROSES
+                </v-chip>
+                <div class="text-h5 font-weight-bold mb-1">
+                  {{ currentProcessingPatient.noAntrian.split(" |")[0] }}
+                </div>
+                <div class="text-subtitle-1 text-grey-darken-1">
+                  {{ currentProcessingPatient.barcode }} |
+                  {{ currentProcessingPatient.klinik }}
+                </div>
+              </div>
+              <div class="action-buttons">
+                <v-btn
+                  color="success"
+                  variant="flat"
+                  class="mr-2"
+                  @click="processPatient(currentProcessingPatient, 'check-in')"
+                >
+                  <v-icon start>mdi-check-circle</v-icon>
+                  Check In
+                </v-btn>
+                <v-btn
+                  color="warning"
+                  variant="flat"
+                  class="mr-2"
+                  @click="processPatient(currentProcessingPatient, 'terlambat')"
+                >
+                  <v-icon start>mdi-clock-alert</v-icon>
+                  Terlambat
+                </v-btn>
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  @click="processPatient(currentProcessingPatient, 'pending')"
+                >
+                  <v-icon start>mdi-pause-circle</v-icon>
+                  Pending
+                </v-btn>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <!-- Right Side: Patient Queue Info -->
+      <v-col cols="12" lg="6">
+        <!-- Next Patient Card -->
+        <!-- Quota Info Card -->
+        <v-card class="quota-info-card" elevation="2">
+          <v-card-text class="pa-4">
+            <div class="text-center">
+              <div class="text-h6 font-weight-medium mb-3">
+                Panggil Antrean Anjungan
+              </div>
+              <v-row class="mb-3">
+                <v-col cols="6" class="text-center">
+                  <div class="text-caption text-grey-darken-1">Kuota</div>
+                  <div class="text-h4 font-weight-bold">150</div>
+                </v-col>
+                <v-col cols="6" class="text-center">
+                  <div class="text-caption text-grey-darken-1">Tersedia</div>
+                  <div class="text-h4 font-weight-bold text-success">
+                    {{ 150 - quotaUsed }}
+                  </div>
+                </v-col>
+              </v-row>
+              <div class="text-body-2 text-grey-darken-1 mb-2">
+                Total Quota Terpakai: {{ quotaUsed }}
+              </div>
+              <v-progress-linear
+                :model-value="(quotaUsed / 150) * 100"
+                color="success"
+                height="8"
+                rounded
+              ></v-progress-linear>
+              <v-card-text class="call-controls-card align-center py-4">
+                <div> <span class="text-subtitle-1 font-weight-medium"
+                    >Panggil Pasien:</span> </div>
+                <div class="d-flex align-center flex-wrap mb-3">
+                  <v-btn
+                    color="success"
+                    variant="flat"
+                    size="large"
+                    class="px-6 ma-4"
+                    @click="callMultiplePatients(1)"
+                  >
+                    <span class="text-h6 font-weight-bold">1</span>
+                  </v-btn>
+                  <v-btn
+                    color="info"
+                    variant="flat"
+                    size="large"
+                    class="px-6 ma-4"
+                    @click="callMultiplePatients(5)"
+                  >
+                    <span class="text-h6 font-weight-bold">5</span>
+                  </v-btn>
+                  <v-btn
+                    color="warning"
+                    variant="flat"
+                    size="large"
+                    class="px-6 ma-4"
+                    @click="callMultiplePatients(10)"
+                  >
+                    <span class="text-h6 font-weight-bold">10</span>
+                  </v-btn>
+                  <v-btn
+                    color="error"
+                    variant="flat"
+                    size="large"
+                    class="px-6 ma-4"
+                    @click="callMultiplePatients(20)"
+                  >
+                    <span class="text-h6 font-weight-bold">20</span>
+                  </v-btn>
+                </div>
+              </v-card-text>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Di Loket Patients Table -->
+    <v-card class="main-table-card mb-4" elevation="2">
+      <TabelData
+        :headers="diLoketHeaders"
+        :items="diLoketPatients"
+        title="DATA PASIEN - DI LOKET"
+      >
+        <template #actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn
+              size="small"
+              color="info"
+              variant="flat"
+              @click="processPatient(item, 'aktifkan')"
+            >
+              Aktifkan
+            </v-btn>
+            <v-btn
+              size="small"
+              color="success"
+              variant="flat"
+              @click="processPatient(item, 'proses')"
+            >
+              Proses
+            </v-btn>
+          </div>
+        </template>
+        <template #item.jamPanggil="{ item }">
+          <span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
+        </template>
+      </TabelData>
+    </v-card>
+
+    <!-- Terlambat Patients Table -->
+    <v-card
+      class="late-table-card mb-4"
+      elevation="2"
+      v-if="terlambatPatients.length > 0"
+    >
+      <TabelData
+        :headers="terlambatHeaders"
+        :items="terlambatPatients"
+        title="INFO PASIEN LAPOR TERLAMBAT"
+      >
+        <template #actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn
+              size="small"
+              color="success"
+              variant="flat"
+              @click="processPatient(item, 'aktifkan')"
+            >
+              Aktifkan
+            </v-btn>
+          </div>
+        </template>
+      </TabelData>
+    </v-card>
+
+    <!-- Pending Patients Table -->
+    <v-card
+      class="pending-table-card mb-4"
+      elevation="2"
+      v-if="pendingPatients.length > 0"
+    >
+      <TabelData
+        :headers="pendingHeaders"
+        :items="pendingPatients"
+        title="INFO PASIEN PENDING"
+      >
+        <template #actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn
+              size="small"
+              color="success"
+              variant="flat"
+              @click="processPatient(item, 'proses')"
+            >
+              Proses
+            </v-btn>
+          </div>
+        </template>
+      </TabelData>
+    </v-card>
+
+    <!-- Snackbar -->
+    <v-snackbar
+      v-model="snackbar"
+      :color="snackbarColor"
+      :timeout="3000"
+      location="top right"
+    >
+      {{ snackbarText }}
+
+      <template v-slot:actions>
+        <v-btn icon @click="snackbar = false">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import TabelData from "../components/TabelData.vue";
+
+// Reactive data
+const snackbar = ref(false);
+const snackbarText = ref("");
+const snackbarColor = ref("success");
+const quotaUsed = ref(5);
+const currentProcessingPatient = ref(null);
+
+// Base patient data - semua pasien yang belum dipanggil
+const allPatients = ref([
+  {
+    no: 1,
+    jamPanggil: "12:49",
+    barcode: "250811100163",
+    noAntrian: "UM1001 | Online - 250811100163",
+    shift: "Shift 1",
+    klinik: "KANDUNGAN",
+    fastTrack: "UMUM",
+    pembayaran: "UMUM",
+    status: "waiting", // waiting, di-loket, terlambat, pending, processed
+  },
+  {
+    no: 2,
+    jamPanggil: "10:52",
+    barcode: "250811100155",
+    noAntrian: "UM1002 | Online - 250811100155",
+    shift: "Shift 1",
+    klinik: "IPD",
+    fastTrack: "UMUM",
+    pembayaran: "UMUM",
+    status: "waiting",
+  },
+  {
+    no: 3,
+    jamPanggil: "09:30",
+    barcode: "250811100200",
+    noAntrian: "UM1003 | Online - 250811100200",
+    shift: "Shift 1",
+    klinik: "SARAF",
+    fastTrack: "UMUM",
+    pembayaran: "UMUM",
+    status: "waiting",
+  },
+  {
+    no: 4,
+    jamPanggil: "14:15",
+    barcode: "250811100210",
+    noAntrian: "UM1004 | Online - 250811100210",
+    shift: "Shift 1",
+    klinik: "THT",
+    fastTrack: "UMUM",
+    pembayaran: "UMUM",
+    status: "waiting",
+  },
+  ...Array.from({ length: 16 }, (_, i) => ({
+    no: i + 5,
+    jamPanggil: `${String(Math.floor(Math.random() * 12) + 1).padStart(2, "0")}:${String(Math.floor(Math.random() * 60)).padStart(2, "0")}`,
+    barcode: `25081110${String(i + 300).padStart(4, "0")}`,
+    noAntrian: `UM100${i + 5} | Online - 25081110${String(i + 300).padStart(4, "0")}`,
+    shift: "Shift 1",
+    klinik: ["KANDUNGAN", "IPD", "THT", "SARAF"][Math.floor(Math.random() * 4)],
+    fastTrack: "UMUM",
+    pembayaran: "UMUM",
+    status: "waiting",
+  })),
+]);
+
+// Computed properties for different status tables
+const diLoketPatients = computed(() =>
+  allPatients.value.filter((patient) => patient.status === "di-loket")
+);
+
+const terlambatPatients = computed(() =>
+  allPatients.value.filter((patient) => patient.status === "terlambat")
+);
+
+const pendingPatients = computed(() =>
+  allPatients.value.filter((patient) => patient.status === "pending")
+);
+
+const nextPatient = computed(() => {
+  return allPatients.value.find((patient) => patient.status === "waiting");
+});
+
+const totalPasien = computed(() => allPatients.value.length);
+
+// Headers for different tables
+const diLoketHeaders = ref([
+  { title: "No", value: "no", sortable: false, width: "60px" },
+  { title: "Jam Panggil", value: "jamPanggil", sortable: true, width: "100px" },
+  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
+  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
+  { title: "Shift", value: "shift", sortable: true, width: "80px" },
+  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
+  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
+  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
+  { title: "Aksi", value: "aksi", sortable: false, width: "200px" },
+]);
+
+const terlambatHeaders = ref([
+  { title: "No", value: "no", sortable: false, width: "60px" },
+  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
+  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
+  { title: "Shift", value: "shift", sortable: true, width: "80px" },
+  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
+  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
+]);
+
+const pendingHeaders = ref([
+  { title: "#", value: "no", sortable: false, width: "60px" },
+  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
+  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
+  { title: "Shift", value: "shift", sortable: true, width: "80px" },
+  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
+  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
+  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
+  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
+]);
+
+// Methods
+const showSnackbar = (text, color = "success") => {
+  snackbarText.value = text;
+  snackbarColor.value = color;
+  snackbar.value = true;
+};
+
+const callMultiplePatients = (count) => {
+  const waitingPatients = allPatients.value.filter(
+    (patient) => patient.status === "waiting"
+  );
+  const patientsToCall = waitingPatients.slice(0, count);
+
+  if (patientsToCall.length === 0) {
+    showSnackbar("Tidak ada pasien yang menunggu", "warning");
+    return;
+  }
+
+  // Check quota
+  if (quotaUsed.value + patientsToCall.length > 150) {
+    showSnackbar("Quota tidak mencukupi", "error");
+    return;
+  }
+
+  // Move patients to "di-loket" status
+  patientsToCall.forEach((patient) => {
+    patient.status = "di-loket";
+  });
+
+  quotaUsed.value += patientsToCall.length;
+  showSnackbar(`Memanggil ${patientsToCall.length} pasien ke loket`, "success");
+};
+
+const callNext = () => {
+  if (!nextPatient.value) {
+    showSnackbar("Tidak ada pasien selanjutnya", "warning");
+    return;
+  }
+
+  if (quotaUsed.value >= 150) {
+    showSnackbar("Quota sudah penuh", "error");
+    return;
+  }
+
+  // Move next patient to processing
+  nextPatient.value.status = "di-loket";
+  currentProcessingPatient.value = nextPatient.value;
+  quotaUsed.value++;
+
+  showSnackbar(
+    `Memanggil pasien ${nextPatient.value.noAntrian.split(" |")[0]}`,
+    "success"
+  );
+};
+
+const processPatient = (patient, action) => {
+  const patientCode = patient.noAntrian.split(" |")[0];
+
+  switch (action) {
+    case "check-in":
+      patient.status = "processed";
+      if (currentProcessingPatient.value?.no === patient.no) {
+        currentProcessingPatient.value = null;
+      }
+      showSnackbar(`Pasien ${patientCode} berhasil check in`, "success");
+      break;
+
+    case "terlambat":
+      patient.status = "terlambat";
+      if (currentProcessingPatient.value?.no === patient.no) {
+        currentProcessingPatient.value = null;
+      }
+      showSnackbar(`Pasien ${patientCode} ditandai terlambat`, "warning");
+      break;
+
+    case "pending":
+      patient.status = "pending";
+      if (currentProcessingPatient.value?.no === patient.no) {
+        currentProcessingPatient.value = null;
+      }
+      showSnackbar(`Pasien ${patientCode} di-pending`, "info");
+      break;
+
+    case "aktifkan":
+      if (patient.status === "terlambat") {
+        patient.status = "di-loket";
+        showSnackbar(`Pasien ${patientCode} diaktifkan kembali`, "success");
+      }
+      break;
+
+    case "proses":
+      currentProcessingPatient.value = patient;
+      showSnackbar(`Memproses pasien ${patientCode}`, "info");
+      break;
+  }
+};
+
+const getRowClass = (item) => {
+  if (item.status === "current") {
+    return "text-success font-weight-bold";
+  }
+  return "";
+};
+</script>
+
+<style scoped>
+.loket-container {
+  background: #f5f7fa;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.page-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.call-controls-card,
+.next-patient-card,
+.current-processing-card,
+.quota-info-card,
+.main-table-card,
+.late-table-card,
+.pending-table-card {
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.next-patient-card {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  border: 2px solid rgba(76, 175, 80, 0.2);
+}
+
+.current-processing-card {
+  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
+  border: 2px solid rgba(255, 152, 0, 0.2);
+}
+
+.quota-info-card {
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+  border: 2px solid rgba(33, 150, 243, 0.2);
+}
+
+.patient-info .text-h5 {
+  color: #1976d2;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+}
+
+/* Enhanced table styling */
+.main-table-card :deep(.v-data-table th),
+.late-table-card :deep(.v-data-table th),
+.pending-table-card :deep(.v-data-table th) {
+  background: #fafbfc;
+  font-weight: 600;
+  font-size: 13px;
+  color: #374151;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.main-table-card :deep(.v-data-table tbody tr:hover),
+.late-table-card :deep(.v-data-table tbody tr:hover),
+.pending-table-card :deep(.v-data-table tbody tr:hover) {
+  background: #f8fafc !important;
+}
+
+.main-table-card :deep(.v-data-table tbody td),
+.late-table-card :deep(.v-data-table tbody td),
+.pending-table-card :deep(.v-data-table tbody td) {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+/* Button styling */
+.v-btn {
+  text-transform: none !important;
+}
+
+.v-btn--size-small {
+  height: 32px;
+  padding: 0 12px;
+}
+
+/* Success text color */
+.text-success {
+  color: #4caf50 !important;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .header-content {
+    flex-direction: column;
+    gap: 20px;
+    text-align: center;
+  }
+
+  .header-left {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .page-title {
+    font-size: 28px;
+  }
+
+  .current-processing-card .d-flex {
+    flex-direction: column;
+    gap: 20px;
+    align-items: flex-start;
+  }
+
+  .action-buttons {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .action-buttons .v-btn {
+    flex: 1;
+    min-width: 120px;
+  }
+
+  /* Stack layout vertically on medium screens */
+  .call-controls-card .d-flex {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 768px) {
+  .loket-container {
+    padding: 16px;
+  }
+
+  .header-content {
+    padding: 24px 20px;
+  }
+
+  .page-title {
+    font-size: 24px;
+  }
+
+  .header-icon {
+    padding: 12px;
+  }
+
+  .call-controls-card .d-flex {
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .call-controls-card .v-btn {
+    min-width: 80px;
+  }
+
+  /* Stack all control buttons vertically on mobile */
+  .call-controls-card .d-flex.flex-wrap {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .call-controls-card .v-btn {
+    width: 100%;
+    margin: 4px 0;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .action-buttons .v-btn {
+    width: 100%;
+    margin: 4px 0;
+  }
+}
+
+@media (max-width: 600px) {
+  .page-title {
+    font-size: 20px;
+  }
+
+  .next-patient-card .text-h4 {
+    font-size: 1.75rem !important;
+  }
+
+  .current-processing-card .patient-info .text-h5 {
+    font-size: 1.25rem !important;
+  }
+
+  .quota-info-card .text-h4 {
+    font-size: 1.5rem !important;
+  }
+}
+</style>

pages/LoketAdmin.vue

@@ -1,746 +0,0 @@
-<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-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"></div>
-
-    <!-- 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></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"
-              ></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="mainHeaders"
-            :items="paginatedMainPatients"
-            :search="search"
-            hide-default-footer
-            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>
-
-          <!-- 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-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"
-              ></v-select>
-              <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"
-              ></v-text-field>
-            </div>
-          </div>
-
-          <v-data-table
-            :headers="lateHeaders"
-            :items="paginatedLatePatients"
-            :search="lateSearch"
-            hide-default-footer
-            class="elevation-1"
-          >
-            <template v-slot: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
-            align="center"
-            class="pa-4"
-            v-if="filteredLatePatients.length > 0"
-          >
-            <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-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"
-              ></v-select>
-              <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"
-              ></v-text-field>
-            </div>
-          </div>
-
-          <v-data-table
-            :headers="clinicHeaders"
-            :items="paginatedClinicPatients"
-            :search="clinicSearch"
-            hide-default-footer
-            class="elevation-1"
-          >
-            <template v-slot: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
-            align="center"
-            class="pa-4"
-            v-if="filteredClinicPatients.length > 0"
-          >
-            <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-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";
-
-// Reactive data
-const search = ref("");
-const lateSearch = ref("");
-const clinicSearch = ref("");
-const itemsPerPage = ref(10);
-const lateItemsPerPage = ref(10);
-const clinicItemsPerPage = ref(10);
-
-// Pagination current pages
-const mainCurrentPage = ref(1);
-const lateCurrentPage = ref(1);
-const clinicCurrentPage = ref(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: "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", 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([
-  {
-    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([]);
-const clinicPatients = ref([]);
-
-// 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) => {
-  if (item.status === "current") {
-    return "text-green font-weight-bold";
-  }
-  return "";
-};
-
-const getStartEntry = (currentPage, itemsPerPage) => {
-  return (currentPage - 1) * itemsPerPage + 1;
-};
-
-const getEndEntry = (currentPage, itemsPerPage, totalItems) => {
-  const end = currentPage * itemsPerPage;
-  return Math.min(end, totalItems);
-};
-
-const getVisiblePages = (currentPage, totalPages) => {
-  const pages = [];
-  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) => {
-  if (
-    page >= 1 &&
-    page <= getMainTotalPages.value &&
-    typeof page === "number"
-  ) {
-    mainCurrentPage.value = page;
-  }
-};
-
-const goToLatePage = (page) => {
-  if (
-    page >= 1 &&
-    page <= getLateTotalPages.value &&
-    typeof page === "number"
-  ) {
-    lateCurrentPage.value = page;
-  }
-};
-
-const goToClinicPage = (page) => {
-  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>

pages/Screen/AntrianKlinik.vue

@@ -0,0 +1,713 @@
+<!-- pages/AntrianKlinik.vue -->
+<template>
+  <div class="antrian-container">
+    <!-- Header Section -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="header-icon">
+            <v-icon size="32" color="white">mdi-clipboard-list</v-icon>
+          </div>
+          <div class="header-text">
+            <h1 class="page-title">Antrian Klinik</h1>
+            <p class="page-subtitle">Informasi Antrian Real-time</p>
+          </div>
+        </div>
+        <div class="header-right">
+          <div class="time-display">
+            <v-chip color="white" variant="flat" size="large" class="time-chip">
+              <v-icon start size="16">mdi-clock-outline</v-icon>
+              {{ currentTime }}
+            </v-chip>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Controls Section -->
+    <v-card class="controls-card mb-4" elevation="2">
+      <v-card-text class="py-3">
+        <v-row align="center">
+          <v-col cols="12" md="6">
+            <div class="d-flex align-center flex-wrap gap-3">
+              <v-select
+                v-model="selectedClinic"
+                :items="clinicOptions"
+                label="Pilih Klinik"
+                density="compact"
+                variant="outlined"
+                hide-details
+                clearable
+                style="min-width: 200px;"
+              />
+              
+              <v-select
+                v-model="selectedStatus"
+                :items="statusOptions"
+                label="Filter Status"
+                density="compact"
+                variant="outlined"
+                hide-details
+                clearable
+                style="min-width: 160px;"
+              />
+            </div>
+          </v-col>
+          
+          <v-col cols="12" md="6">
+            <div class="d-flex justify-end align-center flex-wrap gap-2">
+              <v-btn
+                variant="outlined"
+                prepend-icon="mdi-refresh"
+                @click="refreshData"
+                :loading="loading"
+                size="small"
+              >
+                Refresh
+              </v-btn>
+              
+              <v-btn
+                :color="autoRefresh ? 'success' : 'grey'"
+                :variant="autoRefresh ? 'flat' : 'outlined'"
+                prepend-icon="mdi-autorenew"
+                @click="toggleAutoRefresh"
+                size="small"
+              >
+                Auto Refresh
+              </v-btn>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- Queue Display -->
+    <v-card elevation="2" class="main-content-card">
+      <v-card-title class="d-flex align-center pa-4 bg-grey-lighten-4">
+        <v-icon class="mr-2">mdi-format-list-numbered</v-icon>
+        <span>Antrian Aktif - {{ filteredQueues.length }} antrian</span>
+      </v-card-title>
+
+      <v-card-text class="pa-6">
+        <v-row>
+          <v-col
+            v-for="queue in filteredQueues"
+            :key="queue.id"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="3"
+            class="pa-2"
+          >
+            <v-card   
+              :class="{
+                'queue-card': true,
+                'queue-active': queue.status === 'active',
+                'queue-waiting': queue.status === 'waiting',
+                'queue-completed': queue.status === 'completed',
+                'queue-called': queue.status === 'called'
+              }"
+              elevation="3"
+            >
+              <v-card-text class="text-center pa-4">
+                <!-- Status Chip -->
+                <div class="mb-3">
+                  <v-chip
+                    :color="getStatusColor(queue.status)"
+                    size="small"
+                    variant="flat"
+                  >
+                    {{ getStatusText(queue.status) }}
+                  </v-chip>
+                </div>
+
+                <!-- Queue Number -->
+                <div class="queue-number-wrapper mb-3">
+                  <div class="queue-number">
+                    {{ queue.number }}
+                  </div>
+                </div>
+
+                <!-- Clinic Info -->
+                <h3 class="text-h6 font-weight-bold mb-2">
+                  {{ queue.clinicName }}
+                </h3>
+
+                <!-- Patient Info -->
+                <div class="patient-info mb-3">
+                  <p class="text-body-2 mb-1">
+                    <strong>Pasien:</strong> {{ queue.patientName }}
+                  </p>
+                  <p class="text-caption text-grey-darken-1 mb-1">
+                    <strong>Dokter:</strong> {{ queue.doctorName }}
+                  </p>
+                  <p class="text-caption text-grey-darken-1">
+                    <strong>Estimasi:</strong> {{ queue.estimatedTime }}
+                  </p>
+                </div>
+
+                <!-- Waiting Info -->
+                <div v-if="queue.status === 'waiting'" class="waiting-info">
+                  <v-chip
+                    size="small"
+                    color="orange"
+                    variant="outlined"
+                    class="mb-2"
+                  >
+                    Sisa {{ queue.remainingQueue }} antrian
+                  </v-chip>
+                </div>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+
+        <!-- Empty State -->
+        <div v-if="filteredQueues.length === 0" class="text-center py-8">
+          <v-icon size="64" color="grey-lighten-1">mdi-clipboard-list-outline</v-icon>
+          <h3 class="text-h6 mt-4 text-grey-darken-1">Tidak ada antrian yang sesuai filter</h3>
+          <p class="text-body-2 text-grey-darken-1">Coba ubah filter pencarian Anda</p>
+        </div>
+      </v-card-text>
+    </v-card>
+
+    <!-- Current Queue Display -->
+    <v-card class="current-queue-card mt-4" elevation="4" v-if="currentQueue">
+      <div class="current-queue-header">
+        <v-icon size="24" class="mr-2">mdi-account-voice</v-icon>
+        <span class="text-h6">Sedang Dipanggil</span>
+      </div>
+      <v-card-text class="pa-6">
+        <v-row align="center">
+          <v-col cols="12" md="8">
+            <div class="d-flex align-center">
+              <div class="current-number-display mr-4">
+                {{ currentQueue.number }}
+              </div>
+              <div>
+                <h3 class="text-h5 font-weight-bold mb-1">{{ currentQueue.patientName }}</h3>
+                <p class="text-body-1 mb-1">{{ currentQueue.clinicName }}</p>
+                <p class="text-body-2 text-grey-darken-1">Dr. {{ currentQueue.doctorName }}</p>
+              </div>
+            </div>
+          </v-col>
+          <v-col cols="12" md="4" class="text-right">
+            <v-chip color="success" size="large" variant="flat">
+              <v-icon start>mdi-microphone</v-icon>
+              DIPANGGIL
+            </v-chip>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- Statistics Card -->
+    <v-card class="stats-card mt-4" elevation="2">
+      <v-card-title class="d-flex align-center pa-4 bg-info text-white">
+        <v-icon class="mr-2">mdi-chart-line</v-icon>
+        Statistik Antrian Hari Ini
+      </v-card-title>
+      
+      <v-card-text class="pa-4">
+        <v-row>
+          <v-col cols="6" md="3" class="text-center">
+            <div class="stat-item">
+              <div class="stat-number text-primary">{{ statistics.total }}</div>
+              <div class="stat-label">Total Antrian</div>
+            </div>
+          </v-col>
+          <v-col cols="6" md="3" class="text-center">
+            <div class="stat-item">
+              <div class="stat-number text-success">{{ statistics.completed }}</div>
+              <div class="stat-label">Selesai</div>
+            </div>
+          </v-col>
+          <v-col cols="6" md="3" class="text-center">
+            <div class="stat-item">
+              <div class="stat-number text-warning">{{ statistics.waiting }}</div>
+              <div class="stat-label">Menunggu</div>
+            </div>
+          </v-col>
+          <v-col cols="6" md="3" class="text-center">
+            <div class="stat-item">
+              <div class="stat-number text-error">{{ statistics.avgWaitTime }}</div>
+              <div class="stat-label">Rata-rata Tunggu (menit)</div>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- Snackbar -->
+    <v-snackbar
+      v-model="snackbar"
+      :color="snackbarColor"
+      :timeout="3000"
+      location="top right"
+    >
+      {{ snackbarText }}
+      
+      <template v-slot:actions>
+        <v-btn icon @click="snackbar = false">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+definePageMeta({
+  layout: false,
+});
+
+// Reactive data
+const loading = ref(false)
+const selectedClinic = ref(null)
+const selectedStatus = ref(null)
+const snackbar = ref(false)
+const snackbarText = ref('')
+const snackbarColor = ref('success')
+const currentTime = ref('')
+const autoRefresh = ref(false)
+let autoRefreshInterval = null
+let timeInterval = null
+
+// Options - removed all filter options
+
+// Queue data
+const queues = ref([
+  {
+    id: 1,
+    number: '026',
+    clinicName: 'ANAK',
+    patientName: 'Ahmad Fauzi',
+    doctorName: 'Dr. Sarah Putri',
+    status: 'waiting',
+    estimatedTime: '10:30',
+    remainingQueue: 3
+  },
+  {
+    id: 2,
+    number: '018',
+    clinicName: 'JANTUNG',
+    patientName: 'Siti Aminah',
+    doctorName: 'Dr. Budi Santoso',
+    status: 'called',
+    estimatedTime: '10:15',
+    remainingQueue: 0
+  },
+  {
+    id: 3,
+    number: '019',
+    clinicName: 'MATA',
+    patientName: 'Rudi Hartono',
+    doctorName: 'Dr. Maya Sari',
+    status: 'active',
+    estimatedTime: '10:20',
+    remainingQueue: 0
+  },
+  {
+    id: 4,
+    number: '020',
+    clinicName: 'GIGI DAN MULUT',
+    patientName: 'Dewi Lestari',
+    doctorName: 'Dr. Agus Wijaya',
+    status: 'waiting',
+    estimatedTime: '10:40',
+    remainingQueue: 5
+  },
+  {
+    id: 5,
+    number: '021',
+    clinicName: 'IPD',
+    patientName: 'Bambang Susilo',
+    doctorName: 'Dr. Rina Handayani',
+    status: 'waiting',
+    estimatedTime: '10:50',
+    remainingQueue: 7
+  },
+  {
+    id: 6,
+    number: '022',
+    clinicName: 'THT',
+    patientName: 'Lisa Permata',
+    doctorName: 'Dr. Hendra Gunawan',
+    status: 'waiting',
+    estimatedTime: '11:00',
+    remainingQueue: 2
+  },
+  {
+    id: 7,
+    number: '015',
+    clinicName: 'BEDAH',
+    patientName: 'Eko Prasetyo',
+    doctorName: 'Dr. Diana Sari',
+    status: 'completed',
+    estimatedTime: '09:30',
+    remainingQueue: 0
+  }
+])
+
+// Current queue (being called)
+const currentQueue = ref({
+  number: '018',
+  clinicName: 'JANTUNG',
+  patientName: 'Siti Aminah',
+  doctorName: 'Budi Santoso'
+})
+
+// Statistics
+const statistics = ref({
+  total: 45,
+  completed: 18,
+  waiting: 22,
+  avgWaitTime: 25
+})
+
+// Computed properties
+const filteredQueues = computed(() => {
+  let filtered = queues.value
+
+  if (selectedClinic.value) {
+    filtered = filtered.filter(queue => queue.clinicName === selectedClinic.value)
+  }
+
+  if (selectedStatus.value) {
+    const statusMap = {
+      'Menunggu': 'waiting',
+      'Dipanggil': 'called',
+      'Aktif': 'active',
+      'Selesai': 'completed'
+    }
+    const statusFilter = statusMap[selectedStatus.value]
+    filtered = filtered.filter(queue => queue.status === statusFilter)
+  }
+
+  return filtered
+})
+
+// Methods
+const updateTime = () => {
+  const now = new Date()
+  currentTime.value = now.toLocaleTimeString('id-ID', { 
+    hour: '2-digit', 
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+const showSnackbar = (text, color = 'success') => {
+  snackbarText.value = text
+  snackbarColor.value = color
+  snackbar.value = true
+}
+
+const getStatusColor = (status) => {
+  const colors = {
+    'waiting': 'orange',
+    'called': 'info',
+    'active': 'success',
+    'completed': 'grey'
+  }
+  return colors[status] || 'grey'
+}
+
+const getStatusText = (status) => {
+  const texts = {
+    'waiting': 'MENUNGGU',
+    'called': 'DIPANGGIL',
+    'active': 'AKTIF',
+    'completed': 'SELESAI'
+  }
+  return texts[status] || 'UNKNOWN'
+}
+
+const refreshData = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    showSnackbar('Data antrian berhasil diperbarui', 'success')
+  }, 1000)
+}
+
+const toggleAutoRefresh = () => {
+  autoRefresh.value = !autoRefresh.value
+  
+  if (autoRefresh.value) {
+    autoRefreshInterval = setInterval(() => {
+      refreshData()
+    }, 30000) // Refresh every 30 seconds
+    showSnackbar('Auto refresh diaktifkan (30 detik)', 'info')
+  } else {
+    if (autoRefreshInterval) {
+      clearInterval(autoRefreshInterval)
+      autoRefreshInterval = null
+    }
+    showSnackbar('Auto refresh dinonaktifkan', 'warning')
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  updateTime()
+  timeInterval = setInterval(updateTime, 1000)
+  refreshData()
+})
+
+onUnmounted(() => {
+  if (timeInterval) {
+    clearInterval(timeInterval)
+  }
+  if (autoRefreshInterval) {
+    clearInterval(autoRefreshInterval)
+  }
+})
+</script>
+
+<style scoped>
+.antrian-container {
+  background: #f5f7fa;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.page-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.time-chip {
+  font-weight: 600;
+  color: #1976d2 !important;
+}
+
+.controls-card,
+.main-content-card,
+.current-queue-card,
+.stats-card {
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.queue-card {
+  border-radius: 16px !important;
+  height: 280px;
+  background: white;
+  transition: all 0.3s ease;
+}
+
+.queue-waiting {
+  border-left: 6px solid #FF9800;
+  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
+}
+
+.queue-called {
+  border-left: 6px solid #2196F3;
+  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
+  animation: pulse 2s infinite;
+}
+
+.queue-active {
+  border-left: 6px solid #4CAF50;
+  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+}
+
+.queue-completed {
+  border-left: 6px solid #9E9E9E;
+  opacity: 0.8;
+}
+
+.queue-number-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto 16px;
+}
+
+.queue-number {
+  background: linear-gradient(135deg, #1976d2, #1565c0);
+  color: white;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: bold;
+  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.4);
+}
+
+.patient-info {
+  text-align: left;
+}
+
+.current-queue-card {
+  background: linear-gradient(135deg, #4CAF50, #45a049);
+  color: white;
+}
+
+.current-queue-header {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  color: white;
+  font-weight: 600;
+}
+
+.current-number-display {
+  background: white;
+  color: #4CAF50;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  font-weight: bold;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+.stats-card .stat-item {
+  padding: 16px 0;
+}
+
+.stat-number {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
+  }
+  50% {
+    box-shadow: 0 8px 20px rgba(33, 150, 243, 0.6);
+  }
+  100% {
+    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .header-content {
+    flex-direction: column;
+    gap: 20px;
+    text-align: center;
+  }
+  
+  .header-left {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .page-title {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 768px) {
+  .antrian-container {
+    padding: 16px;
+  }
+  
+  .header-content {
+    padding: 24px 20px;
+  }
+  
+  .page-title {
+    font-size: 24px;
+  }
+  
+  .queue-card {
+    height: 260px;
+  }
+
+  .queue-number {
+    width: 70px;
+    height: 70px;
+    font-size: 20px;
+  }
+
+  .current-number-display {
+    width: 80px;
+    height: 80px;
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 600px) {
+  .queue-card {
+    height: 300px;
+  }
+  
+  .page-title {
+    font-size: 20px;
+  }
+  
+  .stat-number {
+    font-size: 24px;
+  }
+
+  .queue-number {
+    width: 90px;
+    height: 90px;
+    font-size: 24px;
+  }
+
+  .current-number-display {
+    width: 100px;
+    height: 100px;
+    font-size: 32px;
+  }
+}
+</style>

pages/Setting/Edit-Loket/[id].vue

@@ -0,0 +1,113 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card-title>Edit Loket</v-card-title>
+      <v-card-text>
+        <v-form @submit.prevent="simpanLoket">
+          <v-text-field label="Nama Loket" v-model="loket.namaLoket"></v-text-field>
+          <v-text-field label="Kuota Bangku" v-model="loket.kuota" type="number"></v-text-field>
+
+          <v-select
+            label="Status Pelayanan"
+            :items="['RAWAT JALAN', 'RAWAT INAP']"
+            v-model="loket.statusPelayanan"
+          ></v-select>
+
+          <v-select
+            label="Pembayaran"
+            :items="['JKN', 'UMUM']"
+            v-model="loket.pembayaran"
+          ></v-select>
+
+          <v-select
+            label="Keterangan"
+            :items="['ONLINE', 'MANUAL']"
+            v-model="loket.keterangan"
+          ></v-select>
+
+          <div class="my-4">
+            <h3 class="text-h6">Pelayanan</h3>
+            <TabelLayanan
+              :headers="serviceHeaders"
+              :items="availableServices"
+              v-model:selected-items="loket.pelayanan"
+            />
+          </div>
+
+          <v-btn color="success" type="submit" class="mr-2">Simpan</v-btn>
+          <v-btn color="secondary" @click="cancelEdit">Batal</v-btn>
+        </v-form>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import TabelLayanan from '../../components/TabelLayanan.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+// Data dummy loket yang sama seperti di Master-Loket.vue
+const loketData = ref([
+  { id: 1, no: 1, namaLoket: 'Loket 1', kuota: 500, pelayanan: ['RADIOTERAPI', 'REHAB MEDIK', 'TINDAKAN'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 2, no: 2, namaLoket: 'Loket 2', kuota: 666, pelayanan: ['JIWA', 'SARAF'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 3, no: 3, namaLoket: 'Loket 3', kuota: 666, pelayanan: ['ANESTESI', 'JANTUNG'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 4, no: 4, namaLoket: 'Loket 4', kuota: 3676, pelayanan: ['KULIT KELAMIN', 'PARU'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+]);
+
+const loket = ref({
+  id: null,
+  namaLoket: '',
+  kuota: 0,
+  statusPelayanan: '',
+  pembayaran: '',
+  keterangan: '',
+  pelayanan: [],
+});
+
+const serviceHeaders = ref([
+  { title: '#', value: 'no', sortable: false },
+  { title: 'Kode', value: 'id' },
+  { title: 'Klinik', value: 'nama' },
+  { title: 'Pilih', value: 'pilih', sortable: false },
+]);
+
+const availableServices = ref([
+  { no: 1, id: 'AN', nama: 'ANAK' },
+  { no: 2, id: 'AS', nama: 'ANESTESI' },
+  { no: 3, id: 'BD', nama: 'BEDAH' },
+  { no: 4, id: 'GR', nama: 'GERIATRI' },
+  { no: 5, id: 'GI', nama: 'GIGI DAN MULUT' },
+  { no: 6, id: 'GZ', nama: 'GIZI' },
+  { no: 7, id: 'HO', nama: 'HOM' },
+  { no: 8, id: 'IP', nama: 'IPD' },
+]);
+
+onMounted(() => {
+  // Cari loket yang sesuai dengan ID di URL
+  const selectedLoket = loketData.value.find(loket => loket.id === parseInt(route.params.id));
+  
+  if (selectedLoket) {
+    // Jika data ditemukan, salin ke objek loket
+    loket.value = { ...selectedLoket };
+    // Konversi string pelayanan menjadi array untuk checkbox
+    if (typeof loket.value.pelayanan === 'string') {
+        loket.value.pelayanan = loket.value.pelayanan.split(', ').map(s => s.trim());
+    }
+  }
+});
+
+const simpanLoket = () => {
+  // Dalam aplikasi nyata, ini adalah tempat untuk memanggil API update data
+  
+  // Untuk simulasi, kita akan kembali ke halaman master
+  router.back();
+};
+
+const cancelEdit = () => {
+  router.back();
+};
+</script>

pages/Setting/Master-Loket.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card-title class="d-flex justify-space-between align-center">
+        <span>Master Loket</span>
+        <v-btn color=#ff9248 @click="tambahLoket" style="color:white;">Tambah Baru</v-btn>
+      </v-card-title>
+      <TabelData
+        :headers="loketHeaders"
+        :items="loketData"
+        title="Master Loket"
+      >
+        <template #actions="{ item }">
+          <v-btn small color=#ff9248 @click="editLoket(item)" class="mr-2" style="color:white;">Edit</v-btn>
+          <v-btn small color="grey-lighten-4" @click="deleteLoket(item)">Delete</v-btn>
+        </template>
+      </TabelData>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import TabelData from '../../components/TabelData.vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const loketHeaders = ref([
+  { title: 'No', value: 'no' },
+  { title: 'Nama Loket', value: 'namaLoket' },
+  { title: 'Kuota', value: 'kuota' },
+  { title: 'Pelayanan', value: 'pelayanan' },
+  { title: 'Pembayaran', value: 'pembayaran' },
+  { title: 'Keterangan', value: 'keterangan' },
+  { title: 'Aksi', value: 'aksi', sortable: false }, // 'value' harus 'actions'
+]);
+
+// Master-Loket.vue
+const loketData = ref([
+  { id: 1, no: 1, namaLoket: 'Loket 1', kuota: 500, pelayanan: ['RADIOTERAPI', 'REHAB MEDIK', 'TINDAKAN'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 2, no: 2, namaLoket: 'Loket 2', kuota: 666, pelayanan: ['JIWA', 'SARAF'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 3, no: 3, namaLoket: 'Loket 3', kuota: 666, pelayanan: ['ANESTESI', 'JANTUNG'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 4, no: 4, namaLoket: 'Loket 4', kuota: 3676, pelayanan: ['KULIT KELAMIN', 'PARU'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+]);
+
+const editLoket = (item) => {
+  router.push({ path: `/Setting/Edit-Loket/${item.id}` });
+};
+
+const deleteLoket = (item) => {
+  const index = loketData.value.findIndex(loket => loket.id === item.id);
+  if (index !== -1) {
+    loketData.value.splice(index, 1);
+  }
+};
+
+const tambahLoket = () => {
+  router.push({ path: '/Setting/Tambah-Loket' });
+};
+</script>

pages/Setting/Screen/edit/[id].vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="screen-edit">
+    <!-- Header -->
+    <div class="d-flex align-center mb-4">
+      <v-btn icon="mdi-arrow-left" @click="goBack" class="mr-2"></v-btn>
+      <h2>Edit Screen</h2>
+    </div>
+
+    <!-- Screen Selection Cards -->
+    <div class="screen-cards mb-6">
+      <v-row>
+        <v-col cols="12" md="4" v-for="screen in screens" :key="screen.id">
+          <v-card
+            :class="['screen-card', { active: selectedScreen?.id === screen.id }]"
+            @click="selectScreen(screen)"
+            elevation="2"
+          >
+            <v-card-title class="text-center">
+              {{ screen.nama }}
+            </v-card-title>
+          </v-card>
+        </v-col>
+      </v-row>
+    </div>
+
+    <!-- Selected Screen Display -->
+    <div v-if="selectedScreen" class="mb-4">
+      <v-chip color="primary" size="large">
+        Selected: {{ selectedScreen.nama }}
+      </v-chip>
+    </div>
+
+    <!-- Clinic Selection Table -->
+    <TabelLayanan
+      v-if="selectedScreen"
+      :headers="computedHeaders"
+      :items="klinikItems"
+      :selectedItems="selectedKlinik"
+      @update:selectedItems="updateSelectedKlinik"
+    />
+
+    <!-- Action Buttons -->
+    <div class="d-flex justify-end gap-4 mt-6">
+      <v-btn variant="outlined" @click="cancel">
+        Cancel
+      </v-btn>
+      <v-btn color="warning" @click="submit" :disabled="!selectedScreen">
+        Submit
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import TabelLayanan from '~/components/TabelLayanan.vue';
+
+// Get route parameter
+const route = useRoute();
+const screenId = route.params.id;
+
+// Data
+const selectedScreen = ref(null);
+const selectedKlinik = ref([]);
+
+const screens = ref([
+  { id: 1, nama: 'Screen 1' },
+  { id: 2, nama: 'Screen 2' },
+  { id: 3, nama: 'Screen 3' }
+]);
+
+const klinikItems = ref([
+  { id: 1, no: 1, nama_klinik: 'ANAK' },
+  { id: 2, no: 2, nama_klinik: 'ANESTESI' },
+  { id: 3, no: 3, nama_klinik: 'BEDAH' },
+  { id: 4, no: 4, nama_klinik: 'GIGI DAN MULUT' },
+  { id: 5, no: 5, nama_klinik: 'GERIATRI' },
+  { id: 6, no: 6, nama_klinik: 'GIZI' },
+  { id: 7, no: 7, nama_klinik: 'IPD' },
+  { id: 8, no: 8, nama_klinik: 'JANTUNG' },
+  { id: 9, no: 9, nama_klinik: 'JIWA' },
+  { id: 10, no: 10, nama_klinik: 'KUL KEL' },
+  { id: 11, no: 11, nama_klinik: 'KOMPLEMENTER' },
+  { id: 12, no: 12, nama_klinik: 'MATA' },
+  { id: 13, no: 13, nama_klinik: 'SARAF' },
+  { id: 14, no: 14, nama_klinik: 'KANDUNGAN' },
+  { id: 15, no: 15, nama_klinik: 'ONKOLOGI' },
+  { id: 16, no: 16, nama_klinik: 'PARU' },
+  { id: 17, no: 17, nama_klinik: 'RADIOTERAPI' },
+  { id: 18, no: 18, nama_klinik: 'REHAB MEDIK' },
+  { id: 19, no: 19, nama_klinik: 'THT' },
+  { id: 20, no: 20, nama_klinik: 'MCU' },
+  { id: 21, no: 21, nama_klinik: 'KEMOTERAPI' },
+  { id: 22, no: 22, nama_klinik: 'R. TINDAKAN' },
+  { id: 23, no: 23, nama_klinik: 'HOM' }
+]);
+
+// Computed headers based on selected screen
+const computedHeaders = computed(() => {
+  return [
+    { title: 'No', key: 'no', sortable: false, width: '80px' },
+    { title: 'Nama Klinik', key: 'nama_klinik', sortable: true },
+    { title: 'Pilih', key: 'pilih', sortable: false, width: '100px' }
+  ];
+});
+
+// Methods
+const selectScreen = (screen) => {
+  selectedScreen.value = screen;
+  loadScreenData(screen.id);
+};
+
+const loadScreenData = (screenId) => {
+  // Simulate loading existing selections for the screen
+  switch(parseInt(screenId)) {
+    case 1:
+      selectedKlinik.value = [1, 2, 3, 4, 5, 6, 7, 8]; // ANAK, ANESTESI, etc.
+      break;
+    case 2:
+      selectedKlinik.value = [9, 10, 11, 12, 13, 14, 15, 16]; // JIWA, KUL KEL, etc.
+      break;
+    case 3:
+      selectedKlinik.value = [17, 18, 19, 20, 21, 22, 23]; // RADIOTERAPI, REHAB MEDIK, etc.
+      break;
+    default:
+      selectedKlinik.value = [];
+  }
+};
+
+const updateSelectedKlinik = (newSelection) => {
+  selectedKlinik.value = newSelection;
+};
+
+const submit = () => {
+  if (!selectedScreen.value) {
+    alert('Please select a screen first');
+    return;
+  }
+
+  // Simulate API call to save the configuration
+  const data = {
+    screenId: selectedScreen.value.id,
+    selectedKlinik: selectedKlinik.value
+  };
+
+  console.log('Saving configuration:', data);
+  alert('Configuration saved successfully!');
+  goBack();
+};
+
+const cancel = () => {
+  goBack();
+};
+
+const goBack = () => {
+  navigateTo('/setting/screen');
+};
+
+// Lifecycle
+onMounted(() => {
+  // Auto-select screen based on route parameter
+  if (screenId) {
+    const screen = screens.value.find(s => s.id == screenId);
+    if (screen) {
+      selectScreen(screen);
+    }
+  }
+});
+</script>
+
+<style scoped>
+.screen-edit {
+  padding: 20px;
+}
+
+.screen-cards {
+  margin-bottom: 2rem;
+}
+
+.screen-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.screen-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.screen-card.active {
+  border-color: #1976d2;
+  background-color: #f3f7ff;
+}
+
+.screen-card .v-card-title {
+  font-weight: 600;
+  padding: 20px;
+}
+
+.gap-4 {
+  gap: 16px;
+}
+</style>

pages/Setting/Screen/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="screen-list">
+    <!-- Header -->
+    <div class="d-flex justify-space-between align-center mb-4">
+      <h2>Screen</h2>
+      <div class="d-flex gap-2">
+        <v-btn color="primary" variant="outlined" prepend-icon="mdi-eye">
+          View
+        </v-btn>
+        <v-btn color="warning" prepend-icon="mdi-pencil">
+          Edit
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Controls -->
+    <div class="d-flex justify-space-between align-center mb-4">
+      <div class="d-flex align-center gap-2">
+        <span>Show</span>
+        <v-select
+          v-model="itemsPerPage"
+          :items="[10, 25, 50, 100]"
+          density="compact"
+          variant="outlined"
+          style="width: 80px;"
+        ></v-select>
+        <span>entries</span>
+      </div>
+      
+      <div class="d-flex align-center gap-2">
+        <span>Search:</span>
+        <v-text-field
+          v-model="search"
+          density="compact"
+          variant="outlined"
+          hide-details
+          style="width: 200px;"
+        ></v-text-field>
+      </div>
+    </div>
+
+    <!-- Table -->
+    <v-data-table
+      :headers="headers"
+      :items="screenItems"
+      :items-per-page="itemsPerPage"
+      :search="search"
+      class="elevation-1"
+    >
+      <template v-slot:item.no="{ index }">
+        {{ index + 1 }}
+      </template>
+      
+      <template v-slot:item.klinik="{ item }">
+        <div class="klinik-tags">
+          <v-chip
+            v-for="klinik in item.klinik"
+            :key="klinik"
+            size="small"
+            class="ma-1"
+            color="red"
+            text-color="white"
+          >
+            {{ klinik }}
+          </v-chip>
+        </div>
+      </template>
+
+      <template v-slot:item.actions="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          size="small"
+          color=#ff9248
+          @click="editScreen(item)"
+          style="color:white;"
+        ></v-btn>
+      </template>
+    </v-data-table>
+
+    <!-- Footer -->
+    <div class="d-flex justify-space-between align-center mt-4">
+      <div>
+        Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalItems }} entries
+      </div>
+      
+      <v-pagination
+        v-model="currentPage"
+        :length="totalPages"
+        :total-visible="5"
+      ></v-pagination>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+// Data
+const search = ref('');
+const itemsPerPage = ref(10);
+const currentPage = ref(1);
+
+const headers = [
+  { title: 'No', key: 'no', sortable: false, width: '60px' },
+  { title: 'Nama Screen', key: 'nama_screen', sortable: true },
+  { title: 'Klinik', key: 'klinik', sortable: false },
+  { title: 'Actions', key: 'actions', sortable: false, width: '100px' }
+];
+
+const screenItems = ref([
+  {
+    id: 1,
+    nama_screen: 'Layar Screen 1',
+    klinik: ['ANAK', 'ANESTESI', 'BEDAH', 'GIGI DAN MULUT', 'GERIATRI', 'GIZI', 'IPD', 'JANTUNG']
+  },
+  {
+    id: 2,
+    nama_screen: 'Layar Screen 2',
+    klinik: ['JIWA', 'KUL KEL', 'KOMPLEMENTER', 'MATA', 'SARAF', 'KANDUNGAN', 'ONKOLOGI', 'PARU']
+  },
+  {
+    id: 3,
+    nama_screen: 'Layar Screen 3',
+    klinik: ['RADIOTERAPI', 'REHAB MEDIK', 'THT', 'MCU', 'KEMOTERAPI', 'R. TINDAKAN', 'HOM']
+  }
+]);
+
+// Computed
+const totalItems = computed(() => screenItems.value.length);
+const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage.value));
+const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1);
+const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalItems.value));
+
+// Methods
+const editScreen = (item) => {
+  navigateTo(`/setting/screen/edit/${item.id}`);
+};
+</script>
+
+<style scoped>
+.screen-list {
+  padding: 20px;
+}
+
+.klinik-tags {
+  max-width: 600px;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+</style>

pages/data-pasien/edit/[id].vue

@@ -0,0 +1,308 @@
+<!-- page edit id data pasien -->
+<template>
+  <div class="edit-pasien">
+    <!-- Header -->
+    <div class="d-flex align-center mb-4">
+      <v-btn icon="mdi-arrow-left" @click="goBack" class="mr-2"></v-btn>
+      <h2>Edit Pasien</h2>
+    </div>
+
+    <!-- Form -->
+    <v-card class="pa-6" elevation="2">
+      <v-form ref="form" v-model="valid">
+        <v-row>
+          <!-- Tanggal Daftar -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.tanggal_daftar"
+              label="Tanggal Daftar"
+              variant="outlined"
+              readonly
+              density="compact"
+            ></v-text-field>
+          </v-col>
+
+          <!-- Tanggal Periksa -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.tanggal_periksa"
+              label="Tanggal Periksa"
+              variant="outlined"
+              type="date"
+              density="compact"
+              :rules="[rules.required]"
+            ></v-text-field>
+          </v-col>
+
+          <!-- No Barcode -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.no_barcode"
+              label="No Barcode"
+              variant="outlined"
+              readonly
+              density="compact"
+            ></v-text-field>
+          </v-col>
+
+          <!-- No Antrian -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.no_antrian"
+              label="No Antrian"
+              variant="outlined"
+              readonly
+              density="compact"
+            ></v-text-field>
+          </v-col>
+
+          <!-- No Klinik -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.no_klinik"
+              label="No Klinik"
+              variant="outlined"
+              placeholder="Belum Mendapatkan Antrian Klinik"
+              density="compact"
+            ></v-text-field>
+          </v-col>
+
+          <!-- No Rekammedik -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.no_rekammedik"
+              label="No Rekammedik"
+              variant="outlined"
+              density="compact"
+            ></v-text-field>
+          </v-col>
+
+          <!-- Klinik -->
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="formData.klinik"
+              label="Klinik"
+              :items="klinikOptions"
+              variant="outlined"
+              density="compact"
+              :rules="[rules.required]"
+            ></v-select>
+          </v-col>
+
+          <!-- Shift -->
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="formData.shift"
+              label="Shift"
+              :items="shiftOptions"
+              variant="outlined"
+              density="compact"
+              :rules="[rules.required]"
+            ></v-select>
+          </v-col>
+
+          <!-- Keterangan -->
+          <v-col cols="12">
+            <v-text-field
+              v-model="formData.keterangan"
+              label="Keterangan"
+              variant="outlined"
+              density="compact"
+              readonly
+            >
+              <template v-slot:append-inner>
+                <span class="text-red font-weight-bold">
+                  {{ formData.keterangan }}
+                </span>
+              </template>
+            </v-text-field>
+          </v-col>
+
+          <!-- Pembayaran -->
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="formData.pembayaran"
+              label="Pembayaran"
+              :items="pembayaranOptions"
+              variant="outlined"
+              density="compact"
+              :rules="[rules.required]"
+            ></v-select>
+          </v-col>
+        </v-row>
+
+        <!-- Action Buttons -->
+        <div class="d-flex justify-end gap-4 mt-6">
+          <v-btn variant="outlined" @click="cancel">
+            Cancel
+          </v-btn>
+          <v-btn 
+            color="warning" 
+            @click="submit"
+            :disabled="!valid"
+            :loading="loading"
+          >
+            Submit
+          </v-btn>
+        </div>
+      </v-form>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const route = useRoute();
+const pasienId = route.params.id;
+
+// Form data
+const valid = ref(false);
+const loading = ref(false);
+const form = ref(null);
+
+const formData = ref({
+  tanggal_daftar: '',
+  tanggal_periksa: '',
+  no_barcode: '',
+  no_antrian: '',
+  no_klinik: '',
+  no_rekammedik: '',
+  klinik: '',
+  shift: '',
+  keterangan: '',
+  pembayaran: ''
+});
+
+// Options
+const klinikOptions = [
+  'HOM',
+  'KANDUNGAN', 
+  'ANAK',
+  'IPD',
+  'JIWA',
+  'KUL KEL',
+  'KOMPLEMENTER',
+  'MATA',
+  'SARAF',
+  'ONKOLOGI',
+  'PARU',
+  'RADIOTERAPI',
+  'REHAB MEDIK',
+  'THT',
+  'MCU',
+  'KEMOTERAPI',
+  'R. TINDAKAN',
+  'ANESTESI',
+  'BEDAH',
+  'GIGI DAN MULUT',
+  'GERIATRI',
+  'GIZI',
+  'JANTUNG'
+];
+
+const shiftOptions = [
+  'Shift 1 = Mulai Pukul 07:00',
+  'Shift 2 = Mulai Pukul 13:00',
+  'Shift 3 = Mulai Pukul 19:00'
+];
+
+const pembayaranOptions = [
+  'JKN',
+  'UMUM',
+  'ASURANSI',
+  'KARYAWAN'
+];
+
+// Validation rules
+const rules = {
+  required: value => !!value || 'Field ini wajib diisi'
+};
+
+// Mock data for editing
+const mockPasienData = {
+  1: {
+    tanggal_daftar: '2025-08-13 00:00:03',
+    tanggal_periksa: '2025-08-27',
+    no_barcode: '25027100007',
+    no_antrian: 'IP1001',
+    no_klinik: 'Belum Mendapatkan Antrian Klinik',
+    no_rekammedik: '11555500',
+    klinik: 'IPD',
+    shift: 'Shift 1 = Mulai Pukul 07:00',
+    keterangan: 'FINGATMANA ONLINE',
+    pembayaran: 'JKN'
+  },
+  2: {
+    tanggal_daftar: '2025-07-24 13:50:01',
+    tanggal_periksa: '2025-08-27',
+    no_barcode: '25027100002',
+    no_antrian: 'OB1001',
+    no_klinik: '',
+    no_rekammedik: '',
+    klinik: 'KANDUNGAN',
+    shift: 'Shift 1 = Mulai Pukul 07:00',
+    keterangan: '',
+    pembayaran: 'JKN'
+  }
+};
+
+// Methods
+const loadPasienData = () => {
+  const data = mockPasienData[pasienId];
+  if (data) {
+    formData.value = { ...data };
+  }
+};
+
+const submit = async () => {
+  if (!valid.value) return;
+  
+  loading.value = true;
+  
+  try {
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    console.log('Updating pasien data:', formData.value);
+    
+    // Show success message (you can use a toast/snackbar here)
+    alert('Data pasien berhasil diperbarui!');
+    
+    // Navigate back to list
+    goBack();
+  } catch (error) {
+    console.error('Error updating pasien:', error);
+    alert('Gagal memperbarui data pasien!');
+  } finally {
+    loading.value = false;
+  }
+};
+
+const cancel = () => {
+  goBack();
+};
+
+const goBack = () => {
+  navigateTo('/data-pasien');
+};
+
+// Lifecycle
+onMounted(() => {
+  loadPasienData();
+});
+</script>
+
+<style scoped>
+.edit-pasien {
+  padding: 20px;
+}
+
+.gap-4 {
+  gap: 16px;
+}
+
+.text-red {
+  color: #d32f2f;
+}
+</style>

pages/data-pasien/index.vue

@@ -0,0 +1,437 @@
+<!-- pages/data-pasien.vue -->
+<template>
+  <div class="data-pasien-container">
+    <div class="data-pasien">
+      <!-- Header -->
+      <!-- <div class="d-flex justify-space-between align-center mb-4">
+        <h2>Data Pasien</h2>
+        <div class="d-flex gap-2">
+          <v-btn
+            color="#ff9248"
+            prepend-icon="mdi-plus"
+            @click="addPatient"
+            style="color: white"
+          >
+            Tambah Pasien
+          </v-btn>
+        </div>
+      </div> -->
+      <div class="page-header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="header-icon">
+            <v-icon size="32" color="white">mdi-view-dashboard</v-icon>
+          </div>
+          <div class="header-text">
+            <h1 class="page-title">Data Pasien</h1>
+          </div>
+        </div>
+        <div class="header-right">
+          <v-btn
+            color="#ff9248"
+            prepend-icon="mdi-plus"
+            @click="addPatient"
+            style="color: white"
+          >
+            Tambah Pasien
+          </v-btn>
+        </div>
+      </div>
+      </div>  
+
+      <!-- Menggunakan komponen TabelData -->
+      <TabelData
+        :headers="headers"
+        :items="pasienItems"
+        title="Daftar Data Pasien"
+        :show-search="true"
+      >
+        <template #actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn
+              size="small"
+              color="#ff9248"
+              variant="flat"
+              @click="viewPasien(item)"
+              style="color: white"
+              >VIEW</v-btn
+            >
+            <v-btn
+              size="small"
+              color="grey-lighten-4"
+              variant="flat"
+              @click="editPasien(item)"
+              >EDIT</v-btn
+            >
+          </div>
+        </template>
+      </TabelData>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import TabelData from "@/components/TabelData.vue";
+
+// Headers untuk tabel
+const headers = [
+  { title: "No", key: "no", sortable: false, width: "60px" },
+  { title: "Tgl Daftar", key: "tgl_daftar", sortable: true, width: "140px" },
+  { title: "No Barcode", key: "no_barcode", sortable: true, width: "120px" },
+  { title: "No Antrian", key: "no_antrian", sortable: true, width: "100px" },
+  { title: "No Klinik", key: "no_klinik", sortable: true, width: "100px" },
+  { title: "RM", key: "rm", sortable: true, width: "100px" },
+  { title: "Klinik", key: "klinik", sortable: true, width: "120px" },
+  { title: "Shift", key: "shift", sortable: true, width: "80px" },
+  { title: "Ket", key: "keterangan", sortable: false, width: "150px" },
+  { title: "Pembayaran", key: "pembayaran", sortable: true, width: "100px" },
+  { title: "Status", key: "status", sortable: true, width: "120px" },
+  { title: "Aksi", key: "aksi", sortable: false, width: "100px" },
+];
+
+// Data pasien dengan informasi lengkap untuk edit
+const pasienItems = ref([
+  {
+    id: 1,
+    no: 1,
+    tgl_daftar: "2025-07-15 13:47:33",
+    no_barcode: "25027100001",
+    no_antrian: "HO1001",
+    no_klinik: "",
+    rm: "",
+    klinik: "HOM",
+    shift: "Shift 1",
+    keterangan: "",
+    pembayaran: "JKN",
+    status: "Tunggu Daftar",
+    // Data tambahan untuk form edit
+    editData: {
+      tanggal_daftar: "2025-07-15 13:47:33",
+      tanggal_periksa: "2025-08-27",
+      no_barcode: "25027100001",
+      no_antrian: "HO1001",
+      no_klinik: "Belum Mendapatkan Antrian Klinik",
+      no_rekammedik: "",
+      klinik: "HOM",
+      shift: "Shift 1 = Mulai Pukul 07:00",
+      keterangan: "",
+      pembayaran: "JKN",
+    },
+  },
+  {
+    id: 2,
+    no: 2,
+    tgl_daftar: "2025-07-24 13:50:01",
+    no_barcode: "25027100002",
+    no_antrian: "OB1001",
+    no_klinik: "",
+    rm: "",
+    klinik: "KANDUNGAN",
+    shift: "Shift 1",
+    keterangan: "",
+    pembayaran: "JKN",
+    status: "Barcode",
+    editData: {
+      tanggal_daftar: "2025-07-24 13:50:01",
+      tanggal_periksa: "2025-08-27",
+      no_barcode: "25027100002",
+      no_antrian: "OB1001",
+      no_klinik: "",
+      no_rekammedik: "",
+      klinik: "KANDUNGAN",
+      shift: "Shift 1 = Mulai Pukul 07:00",
+      keterangan: "",
+      pembayaran: "JKN",
+    },
+  },
+  {
+    id: 3,
+    no: 3,
+    tgl_daftar: "2025-07-24 13:50:37",
+    no_barcode: "25027100003",
+    no_antrian: "OB1002",
+    no_klinik: "",
+    rm: "",
+    klinik: "KANDUNGAN",
+    shift: "Shift 1",
+    keterangan: "",
+    pembayaran: "JKN",
+    status: "Barcode",
+    editData: {
+      tanggal_daftar: "2025-07-24 13:50:37",
+      tanggal_periksa: "2025-08-27",
+      no_barcode: "25027100003",
+      no_antrian: "OB1002",
+      no_klinik: "",
+      no_rekammedik: "",
+      klinik: "KANDUNGAN",
+      shift: "Shift 1 = Mulai Pukul 07:00",
+      keterangan: "",
+      pembayaran: "JKN",
+    },
+  },
+  {
+    id: 4,
+    no: 4,
+    tgl_daftar: "2025-07-28 08:18:20",
+    no_barcode: "25027100004",
+    no_antrian: "AN1001",
+    no_klinik: "",
+    rm: "",
+    klinik: "ANAK",
+    shift: "Shift 1",
+    keterangan: "",
+    pembayaran: "JKN",
+    status: "Barcode",
+    editData: {
+      tanggal_daftar: "2025-07-28 08:18:20",
+      tanggal_periksa: "2025-08-27",
+      no_barcode: "25027100004",
+      no_antrian: "AN1001",
+      no_klinik: "",
+      no_rekammedik: "",
+      klinik: "ANAK",
+      shift: "Shift 1 = Mulai Pukul 07:00",
+      keterangan: "",
+      pembayaran: "JKN",
+    },
+  },
+  {
+    id: 5,
+    no: 5,
+    tgl_daftar: "2025-08-13 00:00:02",
+    no_barcode: "25027100005",
+    no_antrian: "HO1002",
+    no_klinik: "",
+    rm: "11412684",
+    klinik: "HOM",
+    shift: "Shift 1",
+    keterangan: "Online 25#27100005",
+    pembayaran: "JKN",
+    status: "Tunggu Daftar",
+    editData: {
+      tanggal_daftar: "2025-08-13 00:00:02",
+      tanggal_periksa: "2025-08-27",
+      no_barcode: "25027100005",
+      no_antrian: "HO1002",
+      no_klinik: "Belum Mendapatkan Antrian Klinik",
+      no_rekammedik: "11412684",
+      klinik: "HOM",
+      shift: "Shift 1 = Mulai Pukul 07:00",
+      keterangan: "Online 25#27100005",
+      pembayaran: "JKN",
+    },
+  },
+  {
+    id: 6,
+    no: 6,
+    tgl_daftar: "2025-08-13 00:00:03",
+    no_barcode: "25027100006",
+    no_antrian: "HO1003",
+    no_klinik: "",
+    rm: "",
+    klinik: "HOM",
+    shift: "Shift 1",
+    keterangan: "Online 25#27100006",
+    pembayaran: "JKN",
+    status: "Tunggu Daftar",
+    editData: {
+      tanggal_daftar: "2025-08-13 00:00:03",
+      tanggal_periksa: "2025-08-27",
+      no_barcode: "25027100006",
+      no_antrian: "HO1003",
+      no_klinik: "Belum Mendapatkan Antrian Klinik",
+      no_rekammedik: "",
+      klinik: "HOM",
+      shift: "Shift 1 = Mulai Pukul 07:00",
+      keterangan: "Online 25#27100006",
+      pembayaran: "JKN",
+    },
+  },
+  {
+    id: 7,
+    no: 7,
+    tgl_daftar: "2025-08-13 00:00:03",
+    no_barcode: "25027100007",
+    no_antrian: "IP1001",
+    no_klinik: "",
+    rm: "11555500",
+    klinik: "IPD",
+    shift: "Shift 1",
+    keterangan: "Online 25#27100007",
+    pembayaran: "JKN",
+    status: "Tunggu Daftar",
+    editData: {
+      tanggal_daftar: "2025-08-13 00:00:03",
+      tanggal_periksa: "2025-08-27",
+      no_barcode: "25027100007",
+      no_antrian: "IP1001",
+      no_klinik: "Belum Mendapatkan Antrian Klinik",
+      no_rekammedik: "11555500",
+      klinik: "IPD",
+      shift: "Shift 1 = Mulai Pukul 07:00",
+      keterangan: "FINGATMANA ONLINE",
+      pembayaran: "JKN",
+    },
+  },
+  {
+    id: 8,
+    no: 8,
+    tgl_daftar: "2025-08-13 00:00:04",
+    no_barcode: "25027100008",
+    no_antrian: "IP1001",
+    no_klinik: "",
+    rm: "11333855",
+    klinik: "IPD",
+    shift: "Shift 1",
+    keterangan: "Online 25#27100008",
+    pembayaran: "JKN",
+    status: "Tunggu Daftar",
+    editData: {
+      tanggal_daftar: "2025-08-13 00:00:04",
+      tanggal_periksa: "2025-08-27",
+      no_barcode: "25027100008",
+      no_antrian: "IP1001",
+      no_klinik: "Belum Mendapatkan Antrian Klinik",
+      no_rekammedik: "11333855",
+      klinik: "IPD",
+      shift: "Shift 1 = Mulai Pukul 07:00",
+      keterangan: "Online 25#27100008",
+      pembayaran: "JKN",
+    },
+  },
+  {
+    id: 9,
+    no: 9,
+    tgl_daftar: "2025-08-13 00:00:04",
+    no_barcode: "25027100009",
+    no_antrian: "IP1001",
+    no_klinik: "",
+    rm: "11565554",
+    klinik: "IPD",
+    shift: "Shift 1",
+    keterangan: "Online 25#27100009",
+    pembayaran: "JKN",
+    status: "Tunggu Daftar",
+    editData: {
+      tanggal_daftar: "2025-08-13 00:00:04",
+      tanggal_periksa: "2025-08-27",
+      no_barcode: "25027100009",
+      no_antrian: "IP1001",
+      no_klinik: "Belum Mendapatkan Antrian Klinik",
+      no_rekammedik: "11565554",
+      klinik: "IPD",
+      shift: "Shift 1 = Mulai Pukul 07:00",
+      keterangan: "Online 25#27100009",
+      pembayaran: "JKN",
+    },
+  },
+  {
+    id: 10,
+    no: 10,
+    tgl_daftar: "2025-08-13 00:00:04",
+    no_barcode: "25027100010",
+    no_antrian: "IP1001",
+    no_klinik: "",
+    rm: "11627608",
+    klinik: "IPD",
+    shift: "Shift 1",
+    keterangan: "Online 25#27100010",
+    pembayaran: "JKN",
+    status: "Tunggu Daftar",
+    editData: {
+      tanggal_daftar: "2025-08-13 00:00:04",
+      tanggal_periksa: "2025-08-27",
+      no_barcode: "25027100010",
+      no_antrian: "IP1001",
+      no_klinik: "Belum Mendapatkan Antrian Klinik",
+      no_rekammedik: "11627608",
+      klinik: "IPD",
+      shift: "Shift 1 = Mulai Pukul 07:00",
+      keterangan: "Online 25#27100010",
+      pembayaran: "JKN",
+    },
+  },
+]);
+
+// Methods
+const addPatient = () => {
+  // Navigate to add patient page
+  navigateTo("/data-pasien/add");
+};
+
+const viewPasien = (item) => {
+  // Implement view functionality
+  console.log("View pasien:", item);
+  // You can navigate to a view page or open a modal
+  // navigateTo(`/data-pasien/view/${item.id}`);
+};
+
+const editPasien = (item) => {
+  // Navigate to edit page
+  navigateTo(`/data-pasien/edit/${item.id}`);
+};
+
+// Provide data globally untuk diakses oleh halaman edit
+provide("pasienData", pasienItems);
+</script>
+
+<style scoped>
+.data-pasien-container {
+  background: #f5f7fa;
+  min-height: 100vh;
+  padding: 20px;
+}
+.page-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: rgb(255, 255, 255);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.data-pasien {
+  padding: 20px;
+}
+
+.gap-1 {
+  gap: 4px;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+</style>

pages/index.vue

@@ -1,146 +1,146 @@
 <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=#ff9248 style="color:white;">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-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>
+      <TabelData
+        :headers="lateHeaders"
+        :items="lateVisitors"
+        title="DATA PENGUNJUNG TERLAMBAT"
+      />
 
-          <v-divider
-            class="my-5"
-            color="blue-darken-4"
-            thickness="8"
-          ></v-divider>
-
-          <v-card>
-            <v-card-title class="text-subtitle-1 font-weight-bold bg-red-lighten-3">
-            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,
-                }"
-              >
-                <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-divider :thickness="5" color="deep-orange-darken-4"></v-divider>
 
+      <TabelData
+        :headers="mainHeaders"
+        :items="mainPatients"
+        title="DATA PENGUNJUNG"
+      >
+        <template v-slot:actions="{ item }">
+          <div class="d-flex ga-1">
+            <v-btn small color=#ff9248 class="d-flex flex-row" variant="flat" style="color:white;">PASIEN</v-btn>
+            <v-btn small color="grey-lighten-3" class="d-flex flex-row" variant="flat"
+              >PENGANTAR</v-btn
+            >
+            <v-btn small color="info" class="d-flex flex-row" variant="flat">ByPass</v-btn>
+          </div>
+        </template>
+      </TabelData>
+      
+    </v-card>
+  </v-container>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import TabelData from "../components/TabelData.vue"; // Pastikan path-nya benar
 
-// const drawer = ref(true); // Nilai awal true agar sidebar terlihat
-// const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
+// Ini adalah data yang akan menjadi "single source of truth"
+// untuk tabel Anda. Data ini dikirim sebagai props ke komponen anak.
 
-// Struktur data yang memisahkan menu dengan dan tanpa submenu
+const mainHeaders = ref([
+  { title: "No", value: "no", sortable: false },
+  { title: "Tgl Daftar", value: "tglDaftar", sortable: true },
+  { title: "RM", value: "rm", sortable: true },
+  { title: "Barcode", value: "barcode", sortable: true },
+  { title: "No Antrian", value: "noAntrian", sortable: true },
+  { title: "No Klinik", value: "noKlinik", sortable: true },
+  { title: "Shift", value: "shift", sortable: true },
+  { title: "Klinik", value: "klinik", sortable: true },
+  { title: "Pembayaran", value: "pembayaran", sortable: true },
+  { title: "Masuk", value: "masuk", sortable: true },
+  { title: "Aksi", value: "aksi", sortable: false },
+]);
+
+const mainPatients = ref([
+  {
+    no: 1,
+    tglDaftar: "12:49",
+    rm: "250811100163",
+    noAntrian: "UM1001 | Online - 250811100163",
+    noKlinik: "THT",
+    barcode: "2321232",
+    shift: "Shift 1",
+    klinik: "KANDUNGAN",
+    pembayaran: "UMUM",
+    masuk: "TIDAK",
+    status: "current",
+  },
+  {
+    no: 2,
+    tglDaftar: "18:23",
+    rm: "42081123200199",
+    noAntrian: "UM1001 | Online - 250811100163",
+    noKlinik: "THT",
+    barcode: "2321985",
+    shift: "Shift 1",
+    klinik: "DALAM",
+    pembayaran: "UMUM",
+    masuk: "TIDAK",
+    status: "current",
+  },
+  {
+    no: 3,
+    tglDaftar: "02:19",
+    rm: "15092710084",
+    noAntrian: "UM1001 | Online - 250811100163",
+    noKlinik: "THT",
+    barcode: "2321777",
+    shift: "Shift 1",
+    klinik: "ANAK",
+    pembayaran: "UMUM",
+    masuk: "TIDAK",
+    status: "current",
+  },
+  {
+    no: 4,
+    tglDaftar: "10:09",
+    rm: "250254310011",
+    noAntrian: "UM1001 | Online - 250811100163",
+    noKlinik: "THT",
+    barcode: "2321298",
+    shift: "Shift 1",
+    klinik: "JANTUNG",
+    pembayaran: "UMUM",
+    masuk: "TIDAK",
+    status: "current",
+  },
+]);
+
+const lateHeaders = ref([
+  { title: "No", value: "no", sortable: false },
+  // Tambahkan headers spesifik untuk tabel ini jika berbeda
+]);
+
+const lateVisitors = ref([
+  // Tambahkan data spesifik untuk tabel ini jika ada
+]);
+
+// ... Sisa kode lainnya yang tidak terkait dengan tabel ...
 const items = ref([
   { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
   {
@@ -165,80 +165,4 @@ 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 },
-  { title: "RM", value: "rm", sortable: true },
-  { title: "Barcode", value: "barcode", sortable: true },
-  { title: "No Antrian", value: "noAntrian", sortable: true },
-  { title: "No Klinik", value: "noKlinik", sortable: true },
-  { title: "Shift", value: "shift", sortable: true },
-  { title: "Klinik", value: "klinik", sortable: true },
-  { title: "Pembayaran", value: "pembayaran", sortable: true },
-  { title: "Masuk", value: "masuk", sortable: true },
-  { title: "Aksi", value: "aksi", sortable: false },
-]);
-const mainPatients = ref([
-  {
-    no: 1,
-    tglDaftar: "12:49",
-    rm: "250811100163",
-    noAntrian: "UM1001 | Online - 250811100163",
-    noKlinik: "THT",
-    barcode: "2321232",
-    shift: "Shift 1",
-    klinik: "KANDUNGAN",
-    pembayaran: "UMUM",
-    masuk : "TIDAK",
-    status: "current",
-  },
-   {
-    no: 2,
-    tglDaftar: "18:23",
-    rm: "42081123200199",
-    noAntrian: "UM1001 | Online - 250811100163",
-    noKlinik: "THT",
-    barcode: "2321985",
-    shift: "Shift 1",
-    klinik: "DALAM",
-    pembayaran: "UMUM",
-    masuk : "TIDAK",
-    status: "current",
-  },
-   {
-    no: 3,
-    tglDaftar: "02:19",
-    rm: "15092710084",
-    noAntrian: "UM1001 | Online - 250811100163",
-    noKlinik: "THT",
-    barcode: "2321777",
-    shift: "Shift 1",
-    klinik: "ANAK",
-    pembayaran: "UMUM",
-    masuk : "TIDAK",
-    status: "current",
-  },
-   {
-    no: 4,
-    tglDaftar: "10:09",
-    rm: "250254310011",
-    noAntrian: "UM1001 | Online - 250811100163",
-    noKlinik: "THT",
-    barcode: "2321298",
-    shift: "Shift 1",
-    klinik: "JANTUNG",
-    pembayaran: "UMUM",
-    masuk : "TIDAK",
-    status: "current",
-  },
-
-]);
-const search = ref(""); 
-// const searchLate = ref('');
-// const page = ref(1);
-// const lateVisitors = ref('');
-// // const lateHeaders = ref ('');
-// definePageMeta({
-//   layout: 'MainL'
-// });
-</script>
+</script>