From bc5419ca4d95a9126843d3c9264cc2a47d827065 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Fri, 12 Sep 2025 15:34:02 +0700
Subject: [PATCH] update theme blue

---
 pages/Anjungan/Anjungan.vue |  584 ++++++++++++------
 pages/Fast-Track.vue        | 1106 +++++++++++++++++++++++++++++++++++
 pages/Loket-Admin.vue       |  576 +++++++++++-------
 pages/index.vue             |    8 +-
 4 files changed, 1892 insertions(+), 382 deletions(-)
 create mode 100644 pages/Fast-Track.vue

diff --git a/pages/Anjungan/Anjungan.vue b/pages/Anjungan/Anjungan.vue
index 44020e5..a57a1dc 100644
--- a/pages/Anjungan/Anjungan.vue
+++ b/pages/Anjungan/Anjungan.vue
@@ -1,126 +1,267 @@
+<!-- pages/Anjungan.vue -->
 <template>
-  <div class="clinic-selection-page">
-    <!-- Header -->
-    <v-app-bar color=#fafbfc elevation="2">
-      <v-toolbar-title class="text-h5 font-weight-bold">
-        Anjungan RSSA
-      </v-toolbar-title>
-      <v-spacer></v-spacer>
-      <v-chip color="white" >
-        Pilih Klinik Tekan Tombol Hijau, Tombol Merah Penuh / Klinik Tutup
-      </v-chip>
-    </v-app-bar>
+  <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>
 
-    <!-- Main Content -->
-    <v-container fluid class="pa-8 mt-4">
-      <v-row class="ma-4">
-        <!-- Clinic Cards -->
-        <v-col
-          v-for="clinic in clinics"
-          :key="clinic.id"
-          cols="12"
-          sm="6"
-          md="4"
-          lg="3"
-          class="pa-3"
-        >
-          <v-card   
-            :class="{
-              'clinic-card': true,
-              'clinic-available': clinic.available,
-              'clinic-closed': !clinic.available
-            }"
-            :disabled="!clinic.available"
-            @click="selectClinic(clinic)"
-            elevation="3"
-            hover
+    <!-- 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-text class="text-center pa-4">
-              <!-- Icon -->
-              <div class="clinic-icon-wrapper mb-3">
-                <v-icon
-                  :icon="clinic.icon"
-                  size="48"
-                  :color="clinic.available ? 'success' : 'error'"
-                  class="clinic-icon"
-                ></v-icon>
-              </div>
+            <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>
 
-              <!-- Clinic Name -->
-              <h3 class="text-h6 font-weight-bold mb-2" :class="clinic.available ? 'text-success' : 'text-error'">
-                {{ clinic.name }}
-              </h3>
+                <!-- Icon -->
+                <div class="clinic-icon-wrapper mb-3">
+                  <v-icon
+                    :icon="clinic.icon"
+                    size="40"
+                    :color="clinic.available ? 'success' : 'error'"
+                  ></v-icon>
+                </div>
 
-              <!-- Subtitle -->
-              <p v-if="clinic.subtitle" class="text-caption text-grey-darken-1 mb-2">
-                {{ clinic.subtitle }}
-              </p>
+                <!-- Clinic Name -->
+                <h3 class="text-h6 font-weight-bold mb-2">
+                  {{ clinic.name }}
+                </h3>
 
-              <!-- Shift Info -->
-              <div class="shift-info">
-                <v-chip
-                  size="small"
-                  :color="clinic.available ? 'success' : 'error'"
-                  variant="outlined"
-                  class="mb-1"
-                >
-                  {{ clinic.shift }}
-                </v-chip>
-                <br>
-                <span class="text-caption text-grey-darken-1">
-                  {{ clinic.schedule }}
-                </span>
-              </div>
+                <!-- Subtitle -->
+                <p v-if="clinic.subtitle" class="text-caption text-grey-darken-1 mb-2">
+                  {{ clinic.subtitle }}
+                </p>
 
-              <!-- Status -->
-              <div v-if="!clinic.available" class="mt-2">
-                <v-chip
-                  size="small"
-                  color="error"
-                  variant="flat"
-                  prepend-icon="mdi-clock-alert"
-                >
-                  {{ clinic.status }}
-                </v-chip>
-              </div>
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
+                <!-- 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="400">
+    <v-dialog v-model="showDialog" max-width="500">
       <v-card>
-        <v-card-title class="text-h5">
+        <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>
-          Anda telah memilih klinik <strong>{{ selectedClinic?.name }}</strong>.
-          Lanjutkan untuk mendaftar?
+        
+        <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>
-          <v-spacer></v-spacer>
-          <v-btn text @click="showDialog = false">
+        
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn @click="showDialog = false" variant="text">
             Batal
           </v-btn>
-          <v-btn color="primary" @click="proceedToRegistration">
+          <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 } from 'vue'
+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')
 
-// Clinic data with medical icons
+// Options
+const statusOptions = ['Tersedia', 'Tutup']
+
+// Clinic data
 const clinics = ref([
   {
     id: 1,
@@ -128,9 +269,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-baby-face',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 2,
@@ -138,9 +278,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-sleep',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 3,
@@ -148,9 +287,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-medical-bag',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 4,
@@ -158,9 +296,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-account-supervisor',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 5,
@@ -168,9 +305,8 @@ const clinics = ref([
     subtitle: 'GIGI DAN MULUT',
     icon: 'mdi-tooth',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 6,
@@ -178,9 +314,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-food-apple',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 7,
@@ -190,7 +325,6 @@ const clinics = ref([
     shift: 'TUTUP',
     schedule: '',
     available: false,
-    status: ''
   },
   {
     id: 8,
@@ -198,9 +332,8 @@ const clinics = ref([
     subtitle: 'PENYAKIT DALAM',
     icon: 'mdi-hospital',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 9,
@@ -208,9 +341,8 @@ const clinics = ref([
     subtitle: 'CARDIOLOGI',
     icon: 'mdi-heart-pulse',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 10,
@@ -218,9 +350,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-brain',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 11,
@@ -228,9 +359,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-human-pregnant',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 12,
@@ -238,9 +368,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-needle',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 13,
@@ -248,9 +377,8 @@ const clinics = ref([
     subtitle: 'NYERI',
     icon: 'mdi-leaf',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 14,
@@ -258,9 +386,8 @@ const clinics = ref([
     subtitle: 'KULIT KELAMIN',
     icon: 'mdi-hand-back-right',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 15,
@@ -268,9 +395,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-eye',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 16,
@@ -278,9 +404,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-clipboard-check',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 17,
@@ -288,9 +413,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-ribbon',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 18,
@@ -298,9 +422,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-lungs',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 19,
@@ -308,9 +431,8 @@ const clinics = ref([
     subtitle: 'EMG, ECG, DLL',
     icon: 'mdi-monitor-heart-rate',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 20,
@@ -318,9 +440,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-radioactive',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 21,
@@ -328,9 +449,8 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-human-cane',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   },
   {
     id: 22,
@@ -338,9 +458,8 @@ const clinics = ref([
     subtitle: 'NEUROLOGI',
     icon: 'mdi-head-cog',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: false,
-    status: ''
   },
   {
     id: 23,
@@ -348,13 +467,40 @@ const clinics = ref([
     subtitle: '',
     icon: 'mdi-ear-hearing',
     shift: 'SHIFT 1',
-    schedule: 'Mulai + Pukul 07:00',
+    schedule: 'Mulai Pukul 07:00',
     available: true,
-    status: ''
   }
 ])
 
+// 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
@@ -363,33 +509,93 @@ const selectClinic = (clinic) => {
 }
 
 const proceedToRegistration = () => {
-  // Navigate to registration page or emit event
+  showSnackbar(`Mengarahkan ke pendaftaran ${selectedClinic.value.name}...`, 'success')
   console.log('Proceeding to registration for:', selectedClinic.value.name)
   showDialog.value = false
-  // You can add navigation logic here
-  // await navigateTo(`/registration/${selectedClinic.value.id}`)
 }
 
-definePageMeta({
-  layout: false,
-});
-
+const refreshData = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    showSnackbar('Status klinik berhasil diperbarui', 'success')
+  }, 1000)
+}
 
+// Lifecycle
+onMounted(() => {
+  refreshData()
+})
 </script>
 
 <style scoped>
-.clinic-selection-page {
+.anjungan-container {
+  background: #f5f7fa;
   min-height: 100vh;
-  background: linear-gradient(135deg, #fafbfc 0%, #c3cfe2 100%);
+  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 {
-  transition: all 0.3s ease;
   cursor: pointer;
   border-radius: 16px !important;
-  height: 220px;
-  display: flex;
-  align-items: center;
+  height: 280px;
   background: white;
 }
 
@@ -397,24 +603,19 @@ definePageMeta({
   border-left: 6px solid #4CAF50;
 }
 
-.clinic-available:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.2) !important;
-  border-left: 6px solid #2E7D32;
-}
-
 .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: 80px;
-  height: 80px;
+  width: 70px;
+  height: 70px;
   background: rgba(76, 175, 80, 0.1);
   border-radius: 50%;
   margin: 0 auto;
@@ -423,20 +624,63 @@ definePageMeta({
 .clinic-closed .clinic-icon-wrapper {
   background: rgba(244, 67, 54, 0.1);
 }
-*
-.clinic-icon {
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
-}
 
 .shift-info {
   margin-top: 8px;
 }
 
-/* Custom Vuetify theme colors */
-.v-theme--light {
-  --v-theme-primary: #2E7D32;
-  --v-theme-secondary: #FF7043;
-  --v-theme-success: #4CAF50;
-  --v-theme-error: #F44336;
+/* 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>
\ No newline at end of file
diff --git a/pages/Fast-Track.vue b/pages/Fast-Track.vue
new file mode 100644
index 0000000..9d7b568
--- /dev/null
+++ b/pages/Fast-Track.vue
@@ -0,0 +1,1106 @@
+<!-- pages/FastTrack.vue -->
+<template>
+  <div class="fast-track-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-flash</v-icon>
+          </div>
+          <div class="header-text">
+            <h1 class="page-title">Fast Track</h1>
+            <p class="page-subtitle">Manajemen Pasien Jalur Cepat</p>
+          </div>
+        </div>
+        <div class="header-right">
+          <!-- <v-chip
+            :color="isLiveMode ? 'success' : 'warning'"
+            variant="flat"
+            class="mr-3"
+          >
+            <v-icon start>{{ isLiveMode ? 'mdi-circle' : 'mdi-circle-outline' }}</v-icon>
+            {{ isLiveMode ? 'Live Mode' : 'Offline Mode' }}
+          </v-chip> -->
+          <v-btn
+            color="white"
+            variant="flat"
+            prepend-icon="mdi-qrcode-scan"
+            @click="openScanDialog"
+            class="text-primary"
+          >
+            Scan Barcode
+          </v-btn>
+        </div>
+      </div>
+    </div>
+
+    <!-- Stats Cards -->
+    <!-- <div class="stats-section">
+      <v-row>
+        <v-col cols="12" sm="6" md="3">
+          <StatCard
+            title="Total Pasien"
+            :value="totalPatients"
+            icon="mdi-account-group"
+            color="primary"
+            trend="+12%"
+          />
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <StatCard
+            title="Tunggu Daftar"
+            :value="waitingCount"
+            icon="mdi-clock-outline"
+            color="warning"
+            :urgent="waitingCount > 10"
+          />
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <StatCard
+            title="Proses Barcode"
+            :value="barcodeCount"
+            icon="mdi-qrcode"
+            color="info"
+          />
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <StatCard
+            title="Selesai Hari Ini"
+            :value="completedCount"
+            icon="mdi-check-circle"
+            color="success"
+          />
+        </v-col>
+      </v-row>
+    </div> -->
+
+    <!-- Additional Controls -->
+    <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-select
+                v-model="selectedShift"
+                :items="shiftOptions"
+                label="Filter Shift"
+                density="compact"
+                variant="outlined"
+                hide-details
+                clearable
+                style="min-width: 120px;"
+              />
+
+              <v-select
+                v-model="selectedKlinik"
+                :items="klinikOptions"
+                label="Filter Klinik"
+                density="compact"
+                variant="outlined"
+                hide-details
+                clearable
+                style="min-width: 140px;"
+              />
+            </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
+                variant="outlined"
+                prepend-icon="mdi-export"
+                @click="exportData"
+                size="small"
+              >
+                Export
+              </v-btn>
+
+              <v-btn
+                color="primary"
+                prepend-icon="mdi-plus"
+                @click="addNewPatient"
+                size="small"
+              >
+                Tambah Pasien
+              </v-btn>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- Menggunakan TabelData Component yang sudah ada -->
+    <v-card elevation="2" class="main-table-card">
+      <TabelData
+        :headers="enhancedHeaders"
+        :items="filteredItems"
+        :title="tableTitle"
+        :show-search="true"
+      >
+        <!-- Custom Actions Slot -->
+        <template #actions="{ item }">
+          <div class="action-buttons">
+            <!-- Quick Status Update Buttons -->
+            <v-btn
+              v-if="item.status === 'Tunggu Daftar'"
+              icon
+              size="small"
+              variant="text"
+              color="info"
+              @click="updateStatus(item, 'Proses Barcode')"
+              v-tooltip="'Proses Barcode'"
+            >
+              <v-icon>mdi-qrcode</v-icon>
+            </v-btn>
+
+            <v-btn
+              v-if="item.status === 'Proses Barcode'"
+              icon
+              size="small"
+              variant="text"
+              color="success"
+              @click="updateStatus(item, 'Selesai')"
+              v-tooltip="'Tandai Selesai'"
+            >
+              <v-icon>mdi-check</v-icon>
+            </v-btn>
+            
+            <!-- View Details -->
+            <v-btn
+              icon
+              size="small"
+              variant="text"
+              color="primary"
+              @click="viewDetails(item)"
+              v-tooltip="'Lihat Detail'"
+            >
+              <v-icon>mdi-eye</v-icon>
+            </v-btn>
+            
+            <!-- Track Patient -->
+            <v-btn
+              icon
+              size="small"
+              variant="text"
+              color="info"
+              @click="trackPatient(item)"
+              v-tooltip="'Track Pasien'"
+            >
+              <v-icon>mdi-map-marker-path</v-icon>
+            </v-btn>
+            
+            <!-- More Actions Menu -->
+            <v-menu>
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  icon
+                  size="small"
+                  variant="text"
+                  v-bind="props"
+                  v-tooltip="'Aksi Lainnya'"
+                >
+                  <v-icon>mdi-dots-vertical</v-icon>
+                </v-btn>
+              </template>
+              
+              <v-list density="compact">
+                <v-list-item @click="copyBarcode(item.barcode)">
+                  <v-list-item-title>
+                    <v-icon start size="16">mdi-content-copy</v-icon>
+                    Copy Barcode
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="printLabel(item)">
+                  <v-list-item-title>
+                    <v-icon start size="16">mdi-printer</v-icon>
+                    Print Label
+                  </v-list-item-title>
+                </v-list-item>
+                <v-divider />
+                <v-list-item @click="editPatient(item)">
+                  <v-list-item-title>
+                    <v-icon start size="16">mdi-pencil</v-icon>
+                    Edit Data
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="cancelPatient(item)" class="text-error">
+                  <v-list-item-title>
+                    <v-icon start size="16">mdi-close</v-icon>
+                    Batalkan
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </div>
+        </template>
+      </TabelData>
+    </v-card>
+
+    <!-- Barcode Scanner Dialog -->
+    <!-- <v-dialog v-model="scanDialog" max-width="500">
+      <v-card class="scanner-dialog">
+        <v-card-title class="d-flex align-center bg-primary text-white">
+          <v-icon class="mr-2">mdi-qrcode-scan</v-icon>
+          Scan Barcode Pasien
+        </v-card-title>
+        
+        <v-card-text class="pa-6">
+          <div class="scanner-container">
+            <div class="scanner-preview">
+              <v-icon size="100" color="grey-lighten-1">mdi-qrcode</v-icon>
+              <p class="text-center mt-3 text-medium-emphasis">
+                Arahkan kamera ke barcode pasien
+              </p>
+            </div>
+            
+            <v-text-field
+              v-model="manualBarcode"
+              label="Atau masukkan barcode manual"
+              prepend-icon="mdi-keyboard"
+              variant="outlined"
+              class="mt-4"
+              hint="Contoh: 25090310822"
+              persistent-hint
+            />
+          </div>
+        </v-card-text>
+        
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn @click="scanDialog = false" variant="text">
+            Batal
+          </v-btn>
+          <v-btn 
+            color="primary" 
+            @click="processBarcode"
+            :disabled="!manualBarcode"
+            variant="flat"
+          >
+            Proses Barcode
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog> -->
+
+    <!-- Patient Detail Dialog -->
+    <v-dialog v-model="detailDialog" max-width="800">
+      <v-card>
+        <v-card-title class="bg-primary text-white">
+          <v-icon class="mr-2">mdi-account-details</v-icon>
+          Detail Pasien
+        </v-card-title>
+        
+        <v-card-text v-if="selectedPatient" class="pa-6">
+          <v-row>
+            <v-col cols="12" md="6">
+              <v-list density="compact">
+                <v-list-item>
+                  <v-list-item-title class="text-caption text-medium-emphasis">Barcode</v-list-item-title>
+                  <v-list-item-subtitle class="text-h6 font-weight-bold text-primary">
+                    {{ selectedPatient.barcode }}
+                  </v-list-item-subtitle>
+                </v-list-item>
+                <v-list-item>
+                  <v-list-item-title class="text-caption text-medium-emphasis">No Antrian</v-list-item-title>
+                  <v-list-item-subtitle>{{ selectedPatient.noAntrian }}</v-list-item-subtitle>
+                </v-list-item>
+                <v-list-item>
+                  <v-list-item-title class="text-caption text-medium-emphasis">Rekam Medis</v-list-item-title>
+                  <v-list-item-subtitle>{{ selectedPatient.rm }}</v-list-item-subtitle>
+                </v-list-item>
+                <v-list-item>
+                  <v-list-item-title class="text-caption text-medium-emphasis">Klinik Tujuan</v-list-item-title>
+                  <v-list-item-subtitle>
+                    <v-chip size="small" :color="getKlinikColor(selectedPatient.klinik)">
+                      {{ selectedPatient.klinik }}
+                    </v-chip>
+                  </v-list-item-subtitle>
+                </v-list-item>
+              </v-list>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-list density="compact">
+                <v-list-item>
+                  <v-list-item-title class="text-caption text-medium-emphasis">Status</v-list-item-title>
+                  <v-list-item-subtitle>
+                    <v-chip :color="getStatusColor(selectedPatient.status)" size="small">
+                      {{ selectedPatient.status }}
+                    </v-chip>
+                  </v-list-item-subtitle>
+                </v-list-item>
+                <v-list-item>
+                  <v-list-item-title class="text-caption text-medium-emphasis">Shift</v-list-item-title>
+                  <v-list-item-subtitle>{{ selectedPatient.shift }}</v-list-item-subtitle>
+                </v-list-item>
+                <v-list-item>
+                  <v-list-item-title class="text-caption text-medium-emphasis">Pembayaran</v-list-item-title>
+                  <v-list-item-subtitle>{{ selectedPatient.pembayaran }}</v-list-item-subtitle>
+                </v-list-item>
+                <v-list-item>
+                  <v-list-item-title class="text-caption text-medium-emphasis">Keterangan</v-list-item-title>
+                  <v-list-item-subtitle>
+                    {{ selectedPatient.keterangan || '-' }}
+                  </v-list-item-subtitle>
+                </v-list-item>
+              </v-list>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn @click="detailDialog = false" variant="text">
+            Tutup
+          </v-btn>
+          <v-btn color="primary" @click="printPatientDetail" variant="flat">
+            Print Detail
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Snackbar for notifications -->
+    <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'
+import TabelData from '@/components/TabelData.vue'
+
+// Stats Card Component
+const StatCard = {
+  props: ['title', 'value', 'icon', 'color', 'trend', 'urgent'],
+  template: `
+    <v-card 
+      :class="{ 'urgent-card': urgent }" 
+      class="stat-card" 
+      elevation="2"
+    >
+      <v-card-text class="pa-4">
+        <div class="d-flex align-center justify-space-between">
+          <div>
+            <div class="text-subtitle-2 text-medium-emphasis">{{ title }}</div>
+            <div class="text-h5 font-weight-bold mt-1" :class="urgent ? 'text-warning' : ''">
+              {{ value }}
+            </div>
+            <div v-if="trend" class="text-caption text-success mt-1">
+              <v-icon size="12">mdi-trending-up</v-icon>
+              {{ trend }}
+            </div>
+          </div>
+          <v-avatar :color="color" variant="tonal" size="48">
+            <v-icon>{{ icon }}</v-icon>
+          </v-avatar>
+        </div>
+      </v-card-text>
+    </v-card>
+  `
+}
+
+// Reactive data
+const loading = ref(false)
+const selectedStatus = ref(null)
+const selectedShift = ref(null)
+const selectedKlinik = ref(null)
+const scanDialog = ref(false)
+const detailDialog = ref(false)
+const manualBarcode = ref('')
+const selectedPatient = ref(null)
+const snackbar = ref(false)
+const snackbarText = ref('')
+const snackbarColor = ref('success')
+const isLiveMode = ref(true)
+
+// Sample data (dalam implementasi nyata, ini dari API)
+const items = ref([
+  {
+    id: 1,
+    barcode: '25090310822',
+    tanggal: '03-09-2025 / 06:49',
+    noAntrian: 'AN1113',
+    rm: 'JKN',
+    shift: 'Shift 1',
+    klinik: 'ANAK',
+    pj: 'JKN',
+    keterangan: 'Tunggu Daftar',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar'
+  },
+  {
+    id: 2,
+    barcode: '25090310831',
+    tanggal: '03-09-2025 / 06:51',
+    noAntrian: 'BD1147',
+    rm: 'JKN',
+    shift: 'Shift 1',
+    klinik: 'BEDAH',
+    pj: 'JKN',
+    keterangan: 'Tunggu Daftar',
+    pembayaran: 'JKN',
+    status: 'Proses Barcode'
+  },
+  {
+    id: 3,
+    barcode: '25090310830',
+    tanggal: '03-09-2025 / 06:51',
+    noAntrian: 'BD1146',
+    rm: 'JKN',
+    shift: 'Shift 1',
+    klinik: 'BEDAH',
+    pj: 'JKN',
+    keterangan: 'Tunggu Daftar',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar'
+  },
+  {
+    id: 4,
+    barcode: '25090310829',
+    tanggal: '03-09-2025 / 06:51',
+    noAntrian: 'TH1022',
+    rm: 'JKN',
+    shift: 'Shift 1',
+    klinik: 'THT',
+    pj: 'JKN',
+    keterangan: 'Tunggu Daftar',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar'
+  },
+  {
+    id: 5,
+    barcode: '25090310828',
+    tanggal: '03-09-2025 / 06:50',
+    noAntrian: 'OB1045',
+    rm: 'JKN',
+    shift: 'Shift 1',
+    klinik: 'KANDUNGAN',
+    pj: 'JKN',
+    keterangan: 'Tunggu Daftar',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar'
+  },
+  {
+    id: 6,
+    barcode: '25090310827',
+    tanggal: '03-09-2025 / 06:49',
+    noAntrian: 'IP1036',
+    rm: 'JKN',
+    shift: 'Shift 1',
+    klinik: 'IPD',
+    pj: 'JKN',
+    keterangan: 'Tunggu Daftar',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar'
+  },
+  {
+    id: 7,
+    barcode: '25090310826',
+    tanggal: '03-09-2025 / 06:49',
+    noAntrian: 'OB1044',
+    rm: 'JKN',
+    shift: 'Shift 1',
+    klinik: 'KANDUNGAN',
+    pj: 'JKN',
+    keterangan: 'Tunggu Daftar',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar'
+  },
+  {
+    id: 8,
+    barcode: '25090310825',
+    tanggal: '03-09-2025 / 06:49',
+    noAntrian: 'MT1067',
+    rm: 'JKN',
+    shift: 'Shift 1',
+    klinik: 'MATA',
+    pj: 'JKN',
+    keterangan: 'Tunggu Daftar',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar'
+  },
+  {
+    id: 9,
+    barcode: '25090310824',
+    tanggal: '03-09-2025 / 06:49',
+    noAntrian: 'JT1072',
+    rm: 'JKN',
+    shift: 'Shift 1',
+    klinik: 'JANTUNG',
+    pj: 'JKN',
+    keterangan: 'Tunggu Daftar',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar'
+  },
+  {
+    id: 10,
+    barcode: '25090310823',
+    tanggal: '03-09-2025 / 06:49',
+    noAntrian: 'MT1066',
+    rm: 'JKN',
+    shift: 'Shift 1',
+    klinik: 'MATA',
+    pj: 'JKN',
+    keterangan: 'Tunggu Daftar',
+    pembayaran: 'JKN',
+    status: 'Selesai'
+  }
+])
+
+// Enhanced headers untuk TabelData component
+const enhancedHeaders = ref([
+  { title: 'No', value: 'no', sortable: false, width: '60px' },
+  { title: 'Barcode', value: 'barcode', sortable: true, width: '140px' },
+  { title: 'Tanggal / Jam Daftar', value: 'tanggal', sortable: true, width: '160px' },
+  { title: 'No Antrian', value: 'noAntrian', sortable: true, width: '110px' },
+  { title: 'RM', value: 'rm', sortable: true, width: '80px' },
+  { title: 'Shift', value: 'shift', sortable: true, width: '90px' },
+  { title: 'Klinik', value: 'klinik', sortable: true, width: '120px' },
+  { title: 'PJ', value: 'pj', sortable: true, width: '80px' },
+  { title: 'Keterangan', value: 'keterangan', sortable: false, width: '120px' },
+  { title: 'Pembayaran', value: 'pembayaran', sortable: true, width: '100px' },
+  { title: 'Status', value: 'status', sortable: true, width: '140px' },
+  { title: 'Aksi', value: 'aksi', sortable: false, width: '140px' }
+])
+
+// Options
+const statusOptions = [
+  'Tunggu Daftar',
+  'Proses Barcode',
+  'Selesai',
+  'Batal'
+]
+
+const shiftOptions = [
+  'Shift 1',
+  'Shift 2',
+  'Shift 3'
+]
+
+const klinikOptions = [
+  'ANAK',
+  'BEDAH',
+  'THT',
+  'KANDUNGAN',
+  'IPD',
+  'MATA',
+  'JANTUNG'
+]
+
+// Computed properties
+const filteredItems = computed(() => {
+  let filtered = items.value
+
+  if (selectedStatus.value) {
+    filtered = filtered.filter(item => item.status === selectedStatus.value)
+  }
+
+  if (selectedShift.value) {
+    filtered = filtered.filter(item => item.shift === selectedShift.value)
+  }
+
+  if (selectedKlinik.value) {
+    filtered = filtered.filter(item => item.klinik === selectedKlinik.value)
+  }
+
+  return filtered
+})
+
+const tableTitle = computed(() => {
+  const totalFiltered = filteredItems.value.length
+  const totalAll = items.value.length
+  
+  if (totalFiltered !== totalAll) {
+    return `Fast Track - ${totalFiltered} dari ${totalAll} pasien`
+  }
+  
+  return `Fast Track - ${totalAll} pasien`
+})
+
+const totalPatients = computed(() => items.value.length)
+const waitingCount = computed(() => items.value.filter(item => item.status === 'Tunggu Daftar').length)
+const barcodeCount = computed(() => items.value.filter(item => item.status === 'Proses Barcode').length)
+const completedCount = computed(() => items.value.filter(item => item.status === 'Selesai').length)
+
+// Methods
+const getStatusColor = (status) => {
+  const colors = {
+    'Tunggu Daftar': 'warning',
+    'Proses Barcode': 'info',
+    'Selesai': 'success',
+    'Batal': 'error'
+  }
+  return colors[status] || 'grey'
+}
+
+const getKlinikColor = (klinik) => {
+  const colors = {
+    'ANAK': 'pink',
+    'BEDAH': 'blue',
+    'THT': 'green',
+    'KANDUNGAN': 'purple',
+    'IPD': 'orange',
+    'MATA': 'teal',
+    'JANTUNG': 'red'
+  }
+  return colors[klinik] || 'grey'
+}
+
+const showSnackbar = (text, color = 'success') => {
+  snackbarText.value = text
+  snackbarColor.value = color
+  snackbar.value = true
+}
+
+const openScanDialog = () => {
+  scanDialog.value = true
+  manualBarcode.value = ''
+}
+
+// const processBarcode = () => {
+//   if (manualBarcode.value) {
+//     // Simulasi proses barcode
+//     const existingPatient = items.value.find(item => item.barcode === manualBarcode.value)
+    
+//     if (existingPatient) {
+//       showSnackbar(`Barcode ${manualBarcode.value} ditemukan - Status: ${existingPatient.status}`, 'info')
+//       selectedPatient.value = existingPatient
+//       detailDialog.value = true
+//     } else {
+//       showSnackbar(`Barcode ${manualBarcode.value} tidak ditemukan`, 'warning')
+//     }
+    
+//     scanDialog.value = false
+//   }
+// }
+
+const copyBarcode = async (barcode) => {
+  try {
+    await navigator.clipboard.writeText(barcode)
+    showSnackbar('Barcode berhasil disalin', 'success')
+  } catch (error) {
+    showSnackbar('Gagal menyalin barcode', 'error')
+  }
+}
+
+const refreshData = () => {
+  loading.value = true
+  // Simulasi refresh data
+  setTimeout(() => {
+    loading.value = false
+    showSnackbar('Data berhasil diperbarui', 'success')
+    // Update live mode status
+    isLiveMode.value = Math.random() > 0.3 // 70% chance live mode
+  }, 1500)
+}
+
+const exportData = () => {
+  showSnackbar('Export data dimulai...', 'info')
+  // Implementasi export logic
+}
+
+const addNewPatient = () => {
+  showSnackbar('Fitur tambah pasien akan segera hadir', 'info')
+}
+
+const viewDetails = (item) => {
+  selectedPatient.value = item
+  detailDialog.value = true
+}
+
+const trackPatient = (item) => {
+  showSnackbar(`Tracking pasien ${item.barcode} - ${item.klinik}`, 'info')
+}
+
+const updateStatus = (item, newStatus) => {
+  const oldStatus = item.status
+  item.status = newStatus
+  showSnackbar(`Status ${item.barcode} berubah: ${oldStatus} → ${newStatus}`, 'success')
+}
+
+const editPatient = (item) => {
+  showSnackbar(`Edit data pasien ${item.barcode}`, 'info')
+}
+
+const cancelPatient = (item) => {
+  if (confirm(`Yakin ingin membatalkan pasien ${item.barcode}?`)) {
+    item.status = 'Batal'
+    showSnackbar(`Pasien ${item.barcode} dibatalkan`, 'warning')
+  }
+}
+
+const printLabel = (item) => {
+  showSnackbar(`Print label untuk ${item.barcode}`, 'info')
+}
+
+const printPatientDetail = () => {
+  if (selectedPatient.value) {
+    showSnackbar(`Print detail pasien ${selectedPatient.value.barcode}`, 'info')
+    detailDialog.value = false
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  refreshData()
+  
+  // Auto refresh setiap 30 detik untuk live mode
+  setInterval(() => {
+    if (isLiveMode.value) {
+      // Simulasi update data real-time
+      const randomIndex = Math.floor(Math.random() * items.value.length)
+      const randomStatuses = ['Tunggu Daftar', 'Proses Barcode', 'Selesai']
+      const randomStatus = randomStatuses[Math.floor(Math.random() * randomStatuses.length)]
+      
+      if (items.value[randomIndex] && items.value[randomIndex].status !== 'Selesai') {
+        items.value[randomIndex].status = randomStatus
+      }
+    }
+  }, 30000)
+})
+</script>
+
+<style scoped>
+.fast-track-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);
+  overflow: hidden;
+  position: relative;
+}
+/* 
+.page-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, transparent 30%, rgb(236, 216, 216) 50%, transparent 70%);
+  animation: shimmer 3s infinite;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+} */
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
+  position: relative;
+  z-index: 2;
+}
+
+.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;
+  gap: 12px;
+}
+
+/* .stats-section {
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  background: white;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(188, 245, 54, 0.15);
+} */
+
+.urgent-card {
+  border-left: 5px solid #ff9800;
+  animation: urgent-pulse 2s infinite;
+}
+
+@keyframes urgent-pulse {
+  0%, 100% { 
+    border-left-color: #ff9800; 
+    box-shadow: 0 4px 20px rgba(255, 152, 0, 0.2);
+  }
+  50% { 
+    border-left-color: #ff5722; 
+    box-shadow: 0 4px 20px rgba(255, 87, 34, 0.4);
+  }
+}
+
+.controls-card {
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.main-table-card {
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.scanner-dialog {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.scanner-container {
+  text-align: center;
+}
+
+.scanner-preview {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  border: 2px dashed #dee2e6;
+  border-radius: 16px;
+  padding: 48px;
+  margin-bottom: 24px;
+  transition: all 0.3s ease;
+}
+
+.scanner-preview:hover {
+  border-color: #1976d2;
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+}
+
+/* Enhanced table styling untuk override TabelData component */
+.main-table-card :deep(.v-card-text) {
+  padding: 0;
+}
+
+.main-table-card :deep(.v-data-table) {
+  border-radius: 0;
+}
+
+.main-table-card :deep(.v-data-table .v-data-table__wrapper) {
+  border-radius: 0;
+}
+
+.main-table-card :deep(.v-data-table th) {
+  background: #fafbfc;
+  font-weight: 600;
+  font-size: 13px;
+  color: #374151;
+  border-bottom: 1px solid #e5e7eb;
+  height: 56px;
+}
+
+.main-table-card :deep(.v-data-table tbody tr) {
+  transition: all 0.2s ease;
+}
+
+.main-table-card :deep(.v-data-table tbody tr:hover) {
+  background: #f8fafc !important;
+  /* transform: scale(1.001); */
+  box-shadow: 0 2px 8px rgba(248, 34, 34, 0.08);
+}
+
+.main-table-card :deep(.v-data-table tbody td) {
+  padding: 12px 16px;   
+  border-bottom: 1px solid #f1f5f9;
+}
+
+/* Custom styling untuk status chips */
+.main-table-card :deep(.v-chip.v-chip--size-small) {
+  font-weight: 600;
+  border-radius: 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) {
+  .fast-track-container {
+    padding: 16px;
+  }
+  
+  .header-content {
+    padding: 24px 20px;
+  }
+  
+  .page-title {
+    font-size: 24px;
+  }
+  
+  .header-icon {
+    padding: 12px;
+  }
+  
+  /* Hide beberapa columns pada mobile */
+  .main-table-card :deep(.v-data-table th:nth-child(5)),
+  .main-table-card :deep(.v-data-table td:nth-child(5)),
+  .main-table-card :deep(.v-data-table th:nth-child(6)),
+  .main-table-card :deep(.v-data-table td:nth-child(6)),
+  .main-table-card :deep(.v-data-table th:nth-child(8)),
+  .main-table-card :deep(.v-data-table td:nth-child(8)),
+  .main-table-card :deep(.v-data-table th:nth-child(10)),
+  .main-table-card :deep(.v-data-table td:nth-child(10)) {
+    display: none;
+  }
+}
+
+@media (max-width: 600px) {
+  .action-buttons {
+    flex-direction: column;
+    gap: 2px;
+  }
+  
+  /* Show only essential columns on very small screens */
+  .main-table-card :deep(.v-data-table th:nth-child(4)),
+  .main-table-card :deep(.v-data-table td:nth-child(4)),
+  .main-table-card :deep(.v-data-table th:nth-child(9)),
+  .main-table-card :deep(.v-data-table td:nth-child(9)) {
+    display: none;
+  }
+}
+
+/* Dark mode support (optional) */
+@media (prefers-color-scheme: dark) {
+  .fast-track-container {
+    background: #ffffff;
+  }
+  
+  .stat-card,
+  .controls-card,
+  .main-table-card {
+    background: "grey-lighten-4";
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  .main-table-card :deep(.v-data-table th) {
+    background: "grey-lighten-4";
+    color: #e0e0e0;
+    border-color: rgba(197, 197, 197, 0.1);
+  }
+  
+  .main-table-card :deep(.v-data-table tbody tr:hover) {
+    background: "grey-lighten-4" !important;
+  }
+}
+
+/* Loading animations */
+.main-table-card :deep(.v-data-table .v-data-table__loading) {
+  background: linear-gradient(90deg, transparent, rgba(25, 118, 210, 0.1), transparent);
+  animation: loading-shimmer 1.5s infinite;
+}
+
+@keyframes loading-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* Print styles */
+@media print {
+  .fast-track-container {
+    background: white;
+    padding: 0;
+  }
+  
+  .page-header,
+  .stats-section,
+  .controls-card {
+    display: none;
+  }
+  
+  .main-table-card {
+    box-shadow: none;
+    border: 1px solid #ccc;
+  }
+  
+  .action-buttons {
+    display: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/Loket-Admin.vue b/pages/Loket-Admin.vue
index a141cce..d097a0a 100644
--- a/pages/Loket-Admin.vue
+++ b/pages/Loket-Admin.vue
@@ -1,223 +1,223 @@
+<!-- pages/LoketAdmin.vue -->
 <template>
-  <v-app>
-    <v-app-bar>
-      <v-container fluid class="pa-4">
-        <v-row align="center" no-gutters class="fill-height">
-          <v-col cols="auto">
-            <div class="d-flex align-center">
-              <div
-                class="bg-grey-darken-4 px-3 py-1 mr-2"
-                style="border-radius: 3px"
-              >
-                <span class="text-body-1 font-weight-bold text-white"
-                  >Total 2</span
-                >
-              </div>
-              <div
-                class="bg-grey-darken-2 px-3 py-1"
-                style="border-radius: 3px"
-              >
-                <span class="text-body-1 text-white">Max 150 Pasien</span>
-              </div>
-            </div>
-          </v-col>
-          <v-spacer />
-          <v-col cols="auto">
-            <div class="d-flex align-center text-body-2">
-              <v-icon size="small" class="mr-2">mdi-view-dashboard</v-icon>
-              <span class="mr-6">Dashboard</span>
-              <span>Loket 12 | Rabu, 13 Agustus 2025 - Pelayanan</span>
-            </div>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-app-bar>
+  <div class="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 12</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 2 Pasien
+          </v-chip>
+          <v-chip
+            color="white"
+            variant="flat"
+            class="text-primary"
+          >
+            Max 150 Pasien
+          </v-chip>
+        </div>
+      </div>
+    </div>
 
-    <div class="bg-cyan" style="height: 3px" />
-
-    <v-main>
-      <v-container fluid class="pa-6">
-        <v-row class="mb-6">
-          <v-col>
-            <div class="text-h6 text-grey-darken-2 font-weight-medium">
-              Loket 12 | Rabu, 13 Agustus 2025 - Pelayanan :
-            </div>
-          </v-col>
-          <v-spacer />
-          <v-col cols="auto">
-            <div class="d-flex align-center">
+    <!-- Call Controls -->
+    <v-card class="call-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-3">
+              <span class="text-subtitle-1 font-weight-medium">Panggil Pasien:</span>
               <v-btn
                 color="success"
-                dark
+                variant="flat"
                 size="large"
-                class="mr-4 px-8"
-                style="min-width: 120px; height: 40px"
+                class="px-6"
+                @click="callPatient(1)"
               >
                 <span class="text-h6 font-weight-bold">1</span>
               </v-btn>
               <v-btn
                 color="info"
-                dark
+                variant="flat"
                 size="large"
-                class="mr-4 px-4"
-                style="min-width: 120px; height: 40px"
+                class="px-6"
+                @click="callPatient(5)"
               >
                 <span class="text-h6 font-weight-bold">5</span>
               </v-btn>
               <v-btn
                 color="warning"
-                dark
+                variant="flat"
                 size="large"
-                class="mr-4 px-4"
-                style="min-width: 120px; height: 40px"
+                class="px-6"
+                @click="callPatient(10)"
               >
                 <span class="text-h6 font-weight-bold">10</span>
               </v-btn>
               <v-btn
                 color="error"
-                dark
+                variant="flat"
                 size="large"
-                class="px-4"
-                style="min-width: 120px; height: 40px"
+                class="px-6"
+                @click="callPatient(20)"
               >
                 <span class="text-h6 font-weight-bold">20</span>
               </v-btn>
             </div>
           </v-col>
-        </v-row>
-
-        <v-row justify="center" class="pa-12">
-          <v-col cols="12" md="10" lg="8">
-            <v-card
-              color="success"
-              dark
-              flat
-              class="text-center"
-              style="min-height: 160px; border-radius: 8px"
+          <v-col cols="12" md="4">
+            <v-chip
+              color="info"
+              variant="flat"
+              class="float-right"
             >
-              <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>
+              Total Quota Terpakai: 5
+            </v-chip>
           </v-col>
         </v-row>
+      </v-card-text>
+    </v-card>
 
-        <v-card class="mb-4">
-          <TabelData
-            :headers="mainHeaders"
-            :items="mainPatients"
-            title="DATA PASIEN"
-          >
-            <template #actions="{ item }">
-              <div class="d-flex ga-1">
-                <v-btn size="small" color="success" variant="flat">Panggil</v-btn>
-                <v-btn size="small" color="info" variant="flat">Cancel</v-btn>
-                <v-btn size="small" color="primary" variant="flat">Selesai</v-btn>
-              </div>
-            </template>
-            <template #item.jamPanggil="{ item }">
-              <span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
-            </template>
-          </TabelData>
-        </v-card>
+    <!-- Next Patient Card -->
+    <v-card class="next-patient-card mb-4" elevation="2">
+      <v-card-text class="text-center pa-8">
+        <v-chip color="success" variant="flat" class="mb-4" size="large">
+          <v-icon start>mdi-account-arrow-right</v-icon>
+          PASIEN SELANJUTNYA
+        </v-chip>
+        <div class="text-h3 font-weight-bold mb-2 text-success">
+          UM1004
+        </div>
+        <div class="text-h6 mb-4 text-grey-darken-1">
+          Klik tombol hijau untuk memanggil
+        </div>
+        <v-btn
+          color="success"
+          variant="flat"
+          size="x-large"
+          class="px-12"
+          @click="callNext"
+        >
+          <v-icon start>mdi-microphone</v-icon>
+          PANGGIL NEXT
+        </v-btn>
+      </v-card-text>
+    </v-card>
 
-        <v-card color="cyan" dark class="mb-4">
-          <v-card-text class="text-center">
-            <div class="text-h6">Total Quota Terpakai 5</div>
-          </v-card-text>
-        </v-card>
+    <!-- Main Patients Table -->
+    <v-card class="main-table-card mb-4" elevation="2">
+      <TabelData
+        :headers="mainHeaders"
+        :items="mainPatients"
+        title="DATA PASIEN"
+      >
+        <template #actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn 
+              size="small" 
+              color="success" 
+              variant="flat"
+              @click="callPatient(item.no)"
+            >
+              Panggil
+            </v-btn>
+            <v-btn 
+              size="small" 
+              color="warning" 
+              variant="flat"
+              @click="cancelPatient(item)"
+            >
+              Cancel
+            </v-btn>
+            <v-btn 
+              size="small" 
+              color="primary" 
+              variant="flat"
+              @click="finishPatient(item)"
+            >
+              Selesai
+            </v-btn>
+          </div>
+        </template>
+        <template #item.jamPanggil="{ item }">
+          <span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
+        </template>
+      </TabelData>
+    </v-card>
 
-        <v-card class="mb-4">
-          <TabelData
-            :headers="lateHeaders"
-            :items="latePatients"
-            title="INFO PASIEN LAPOR TERLAMBAT"
-            :show-search="false"
-          >
-            </TabelData>
-        </v-card>
+    <!-- Late Patients Table -->
+    <v-card class="late-table-card mb-4" elevation="2" v-if="latePatients.length > 0">
+      <TabelData
+        :headers="lateHeaders"
+        :items="latePatients"
+        title="INFO PASIEN LAPOR TERLAMBAT"
+        :show-search="false"
+      />
+    </v-card>
 
-        <v-card class="mb-4">
-          <TabelData
-            :headers="clinicHeaders"
-            :items="clinicPatients"
-            title="INFO PASIEN MASUK KLINIK"
-          >
-            </TabelData>
-        </v-card>
-      </v-container>
-    </v-main>
-  </v-app>
+    <!-- Clinic Patients Table -->
+    <v-card class="clinic-table-card mb-4" elevation="2" v-if="clinicPatients.length > 0">
+      <TabelData
+        :headers="clinicHeaders"
+        :items="clinicPatients"
+        title="INFO PASIEN MASUK KLINIK"
+      />
+    </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 lang="ts">
+<script setup>
 import { ref } from "vue";
 import TabelData from "../components/TabelData.vue";
 
-// Define interfaces
-interface Patient {
-  no: number;
-  jamPanggil: string;
-  barcode: string;
-  noAntrian: string;
-  shift: string;
-  klinik: string;
-  fastTrack: string;
-  pembayaran: string;
-  panggil: string;
-  status: string;
-}
-
-interface LatePatient {
-  no: number;
-  barcode: string;
-  noAntrian: string;
-  shift: string;
-  klinik: string;
-  aksi: string;
-}
-
-interface ClinicPatient {
-  no: number;
-  barcode: string;
-  noAntrian: string;
-  noRM: string;
-  shift: string;
-  klinik: string;
-  fastTrack: string;
-  pembayaran: string;
-  aksi: string;
-}
+// Reactive data
+const snackbar = ref(false)
+const snackbarText = ref('')
+const snackbarColor = ref('success')
 
 // Data and Headers
 const mainHeaders = ref([
-  { title: "No", value: "no", sortable: false },
-  { title: "Jam Panggil", value: "jamPanggil", sortable: true },
-  { title: "Barcode", value: "barcode", sortable: true },
-  { title: "No Antrian", value: "noAntrian", sortable: true },
-  { title: "Shift", value: "shift", sortable: true },
-  { title: "Klinik", value: "klinik", sortable: true },
-  { title: "Fast Track", value: "fastTrack", sortable: true },
-  { title: "Pembayaran", value: "pembayaran", sortable: true },
-  { title: "Panggil", value: "panggil", sortable: true },
-  { title: "Aksi", value: "aksi", sortable: false },
+  { 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: "Status", value: "panggil", sortable: true, width: "80px" },
+  { title: "Aksi", value: "aksi", sortable: false, width: "200px" },
 ]);
 
-const mainPatients = ref<Patient[]>([
+const mainPatients = ref([
   {
     no: 1,
     jamPanggil: "12:49",
@@ -227,7 +227,7 @@ const mainPatients = ref<Patient[]>([
     klinik: "KANDUNGAN",
     fastTrack: "UMUM",
     pembayaran: "UMUM",
-    panggil: "Panggil",
+    panggil: "Aktif",
     status: "current",
   },
   {
@@ -239,7 +239,7 @@ const mainPatients = ref<Patient[]>([
     klinik: "IPD",
     fastTrack: "UMUM",
     pembayaran: "UMUM",
-    panggil: "Cancel",
+    panggil: "Menunggu",
     status: "normal",
   },
   ...Array.from({ length: 20 }, (_, i) => ({
@@ -251,68 +251,228 @@ const mainPatients = ref<Patient[]>([
     klinik: ["KANDUNGAN", "IPD", "THT", "SARAF"][Math.floor(Math.random() * 4)],
     fastTrack: "UMUM",
     pembayaran: "UMUM",
-    panggil: "Panggil",
+    panggil: "Menunggu",
     status: "normal",
   })),
 ]);
 
 const lateHeaders = ref([
-  { title: "No", value: "no", sortable: false },
-  { title: "Barcode", value: "barcode", sortable: true },
-  { title: "No Antrian", value: "noAntrian", sortable: true },
-  { title: "Shift", value: "shift", sortable: true },
-  { title: "Klinik", value: "klinik", sortable: true },
-  { title: "Aksi", value: "aksi", sortable: false },
+  { 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 latePatients = ref<LatePatient[]>([]);
+
+const latePatients = ref([]);
 
 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 },
+  { 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: "No RM", value: "noRM", sortable: true, width: "100px" },
+  { 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" },
 ]);
-const clinicPatients = ref<ClinicPatient[]>([]);
 
-// Method yang tetap di halaman induk (seperti getRowClass)
-const getRowClass = (item: Patient): string => {
+const clinicPatients = ref([]);
+
+// Methods
+const showSnackbar = (text, color = 'success') => {
+  snackbarText.value = text
+  snackbarColor.value = color
+  snackbar.value = true
+}
+
+const callPatient = (number) => {
+  showSnackbar(`Memanggil pasien nomor ${number}`, 'success')
+}
+
+const callNext = () => {
+  showSnackbar('Memanggil pasien selanjutnya: UM1004', 'success')
+}
+
+const cancelPatient = (patient) => {
+  showSnackbar(`Membatalkan pasien ${patient.noAntrian.split(' |')[0]}`, 'warning')
+}
+
+const finishPatient = (patient) => {
+  showSnackbar(`Menyelesaikan pasien ${patient.noAntrian.split(' |')[0]}`, 'success')
+}
+
+const getRowClass = (item) => {
   if (item.status === "current") {
-    return "text-green font-weight-bold";
+    return "text-success font-weight-bold";
   }
   return "";
 };
 </script>
 
 <style scoped>
-.v-list-item--active {
-  background-color: rgba(25, 118, 210, 0.12);
-  color: #1976d2;
+.loket-container {
+  background: #f5f7fa;
+  min-height: 100vh;
+  padding: 20px;
 }
 
-.text-green {
-  color: #4caf50 !important;
+.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);
 }
 
-.bg-cyan {
-  background-color: #00bcd4 !important;
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
 }
 
-/* Row highlighting */
-:deep(.v-data-table tbody tr:nth-child(1)) {
+.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,
+.main-table-card,
+.late-table-card,
+.clinic-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);
+}
+
+/* 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:nth-child(1)) {
   background-color: #fff3cd !important;
 }
 
+.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;
 }
 
 .v-btn--size-small {
   height: 32px;
-  padding: 0 8px;
+  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;
+  }
+}
+
+@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: flex-start;
+    gap: 16px;
+  }
+
+  .call-controls-card .v-btn {
+    min-width: 80px;
+  }
+}
+
+@media (max-width: 600px) {
+  .page-title {
+    font-size: 20px;
+  }
+
+  .next-patient-card .text-h3 {
+    font-size: 2rem !important;
+  }
+  
+  .call-controls-card .d-flex.flex-wrap {
+    justify-content: center;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index e1d7f6f..9aad804 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,7 +20,7 @@
             </v-chip>
           </v-col>
           <v-col cols="12" md="2">
-            <v-btn block color="info">Pendaftaran Online</v-btn>
+            <v-btn block color=#ff9248 style="color:white;">Pendaftaran Online</v-btn>
           </v-col>
         </v-row>
       </v-card-text>
@@ -42,9 +42,9 @@
       >
         <template v-slot:actions="{ item }">
           <div class="d-flex ga-1">
-            <v-btn small color="success" class="d-flex flex-row" variant="flat">Tiket</v-btn>
-            <v-btn small color="success" class="d-flex flex-row" variant="flat"
-              >Tiket Pengantar</v-btn
+            <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>