From 04fc1f0c124fa081594f0d58d9f93349d170b9d3 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Thu, 30 Oct 2025 08:48:56 +0700
Subject: [PATCH] version 1 - update component, desain, store

---
 pages/Anjungan/AntrianKlinik.vue | 1032 +++++++++++++-----------------
 1 file changed, 431 insertions(+), 601 deletions(-)

diff --git a/pages/Anjungan/AntrianKlinik.vue b/pages/Anjungan/AntrianKlinik.vue
index 025b544..7d8ba5a 100644
--- a/pages/Anjungan/AntrianKlinik.vue
+++ b/pages/Anjungan/AntrianKlinik.vue
@@ -1,392 +1,184 @@
 <!-- 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 class="tv-display-container">
+    <!-- Header -->
+    <div class="tv-header">
+      <div class="tv-header-left">
+        <div class="hospital-logo">
+          <v-icon size="64" color="white">mdi-hospital-box</v-icon>
+        </div>
+        <div class="header-text">
+          <h1 class="hospital-name">ANTRIAN KLINIK</h1>
+          <p class="display-title">RSUD Dr. Saiful Anwar Provinsi Jawa Timur</p>
+        </div>
+      </div>
+      <div class="tv-header-right">
+        <div class="current-time">{{ currentTime }}</div>
+        <div class="current-date">{{ currentDate }}</div>
+      </div>
+    </div>
+
+    <!-- Current Called Queue - Super Prominent -->
+    <div v-if="currentCalledQueue" class="hero-queue">
+      <div class="hero-label">SEDANG DIPANGGIL</div>
+      <div class="hero-number">{{ currentCalledQueue.noAntrian.split(' |')[0] }}</div>
+      <div class="hero-clinic">{{ currentCalledQueue.klinik }}</div>
+    </div>
+
+    <!-- Clinic Grid - 3x3 Layout -->
+    <div class="clinic-grid">
+      <div
+        v-for="clinic in displayedClinics"
+        :key="clinic.name"
+        class="clinic-card"
+      >
+        <div class="clinic-name">{{ clinic.name }}</div>
+        
+        <div class="queue-display">
+          <!-- Show current queue number -->
+          <div v-if="clinic.currentQueue" class="current-queue-large">
+            <div class="queue-label">SEKARANG</div>
+            <div class="queue-number-huge">
+              {{ clinic.currentQueue.noAntrian.split(' |')[0] }}
+            </div>
           </div>
-          <div class="header-text">
-            <h1 class="page-title">Antrian Klinik</h1>
-            <p class="page-subtitle">Informasi Antrian Real-time</p>
+          
+          <!-- Show next queues -->
+          <div v-if="clinic.nextQueues.length > 0" class="next-queues">
+            <div class="queue-label-small">SELANJUTNYA</div>
+            <div class="next-queue-numbers">
+              <span
+                v-for="(queue, index) in clinic.nextQueues.slice(0, 3)"
+                :key="queue.no"
+                class="next-number"
+              >
+                {{ queue.noAntrian.split(' |')[0] }}
+              </span>
+            </div>
+          </div>
+
+          <!-- Empty state -->
+          <div v-if="!clinic.currentQueue && clinic.nextQueues.length === 0" class="empty-queue">
+            <v-icon size="48" color="grey-lighten-2">mdi-checkbox-blank-circle-outline</v-icon>
+            <div class="empty-text">Tidak Ada Antrian</div>
           </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>
+
+        <!-- Queue count badge -->
+        <div class="queue-count">
+          <v-icon size="20" class="mr-1">mdi-account-multiple</v-icon>
+          {{ clinic.totalQueues }}
         </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>
+    <!-- Footer Info -->
+    <div class="tv-footer">
+      <div class="footer-stats">
+        <div class="stat-box">
+          <div class="stat-value">{{ statistics.total }}</div>
+          <div class="stat-label">Total Antrian</div>
+        </div>
+        <div class="stat-box">
+          <div class="stat-value">{{ statistics.waiting }}</div>
+          <div class="stat-label">Menunggu</div>
+        </div>
+        <div class="stat-box">
+          <div class="stat-value">{{ statistics.active }}</div>
+          <div class="stat-label">Sedang Dilayani</div>
         </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="8" md="4" 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="8" md="4" 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="8" md="4" 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 class="footer-message">
+        <v-icon size="24" class="mr-2">mdi-information</v-icon>
+        Harap perhatikan nomor antrian Anda di layar
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useQueueStore } from '../stores/queueStore'
 
 definePageMeta({
   layout: false,
 });
 
+// Store
+const queueStore = useQueueStore()
+
 // 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
+const currentDate = ref('')
 let timeInterval = null
+let refreshInterval = null
 
-// Options - removed all filter options
+// Computed - Get all klinik patients (stage: klinik)
+const klinikPatients = computed(() => {
+  return queueStore.getPatientsByStage('klinik').value.all
+})
 
-// 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
-  }
-])
+// Get clinics with their queues organized
+const displayedClinics = computed(() => {
+  const allKliniks = queueStore.kliniks.slice(0, 9) // Max 9 clinics for 3x3 grid
 
-// Current queue (being called)
-const currentQueue = ref({
-  number: '018',
-  clinicName: 'JANTUNG',
-  patientName: 'Siti Aminah',
-  doctorName: 'Budi Santoso'
+  return allKliniks.map(klinik => {
+    const queues = klinikPatients.value
+      .filter(p => p.klinik === klinik.name)
+      .sort((a, b) => {
+        // Sort by status priority then time
+        const statusPriority = {
+          'di-loket': 1,
+          'waiting': 2,
+          'terlambat': 3,
+          'pending': 4
+        }
+        
+        const priorityDiff = (statusPriority[a.status] || 99) - (statusPriority[b.status] || 99)
+        if (priorityDiff !== 0) return priorityDiff
+        
+        // Sort by time if same status
+        const timeA = a.jamPanggil.split(':').map(Number)
+        const timeB = b.jamPanggil.split(':').map(Number)
+        return timeA[0] * 60 + timeA[1] - (timeB[0] * 60 + timeB[1])
+      })
+
+    // Get current (first di-loket or first waiting)
+    const currentQueue = queues.find(q => q.status === 'di-loket') || 
+                        (queues.find(q => q.status === 'waiting') || null)
+    
+    // Get next queues (excluding current)
+    const nextQueues = queues.filter(q => 
+      q.no !== currentQueue?.no && 
+      (q.status === 'waiting' || q.status === 'di-loket')
+    )
+
+    return {
+      name: klinik.name,
+      currentQueue: currentQueue,
+      nextQueues: nextQueues,
+      totalQueues: queues.length
+    }
+  })
+})
+
+// Current queue being called (most recent di-loket)
+const currentCalledQueue = computed(() => {
+  const calledQueues = klinikPatients.value
+    .filter(p => p.status === 'di-loket')
+    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+  
+  return calledQueues[0] || null
 })
 
 // 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)
+const statistics = computed(() => {
+  const all = klinikPatients.value
+  return {
+    total: all.length,
+    waiting: all.filter(p => p.status === 'waiting').length,
+    active: all.filter(p => p.status === 'di-loket').length
   }
-
-  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
@@ -397,317 +189,355 @@ const updateTime = () => {
     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')
-  }
+  currentDate.value = now.toLocaleDateString('id-ID', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
 }
 
 // Lifecycle
 onMounted(() => {
   updateTime()
   timeInterval = setInterval(updateTime, 1000)
-  refreshData()
+  
+  // Auto refresh every 5 seconds
+  refreshInterval = setInterval(() => {
+    // Data will auto-update due to reactive store
+  }, 5000)
 })
 
 onUnmounted(() => {
-  if (timeInterval) {
-    clearInterval(timeInterval)
-  }
-  if (autoRefreshInterval) {
-    clearInterval(autoRefreshInterval)
-  }
+  if (timeInterval) clearInterval(timeInterval)
+  if (refreshInterval) clearInterval(refreshInterval)
 })
 </script>
 
 <style scoped>
-.antrian-container {
-  background: #f5f7fa;
+.tv-display-container {
+  background: linear-gradient(135deg, #e7e7e7 0%, #FFDCAF 100%);
   min-height: 100vh;
   padding: 20px;
+  font-family: 'Roboto', sans-serif;
+  color: #fff;
+  overflow: hidden;
 }
 
-.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 {
+/* Header */
+.tv-header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  padding: 32px;
-  color: white;
+  align-items: center;
+  background: #FAFAFA;
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 20px 40px;
+  margin-bottom: 20px;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
 }
 
-.header-left {
+.tv-header-left {
   display: flex;
   align-items: center;
+  gap: 20px;
 }
 
-.header-icon {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 16px;
-  padding: 16px;
-  margin-right: 20px;
-  backdrop-filter: blur(10px);
+.hospital-logo {
+  background: #1e3c72;
+  border-radius: 50%;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.page-title {
+.hospital-name {
+  font-size: 36px;
+  margin: 0;
+  letter-spacing: 2px;
+  color: #1e3c72;
+  line-height: 1;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.display-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0;
+  color: #1e3c72;
+  opacity: 0.9;
+}
+
+.tv-header-right {
+  text-align: right;
+}
+
+.current-time {
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 1;
+  color: #1e3c72;
+  text-shadow: 2px 2px 4px rgba(124, 124, 124, 0.3);
+}
+
+.current-date {
+  font-size: 18px;
+  opacity: 0.9;
+  margin-top: 5px;
+}
+
+/* Hero Queue - Sedang Dipanggil */
+.hero-queue {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+  border-radius: 24px;
+  padding: 30px;
+  margin-bottom: 20px;
+  text-align: center;
+  box-shadow: 0 12px 48px rgba(255, 107, 107, 0.4);
+  animation: pulse-glow 2s infinite;
+}
+
+.hero-label {
   font-size: 32px;
   font-weight: 700;
-  margin: 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  letter-spacing: 3px;
+  margin-bottom: 10px;
+  text-transform: uppercase;
 }
 
-.page-subtitle {
-  margin: 4px 0 0 0;
-  opacity: 0.9;
-  font-size: 16px;
+.hero-number {
+  font-size: 120px;
+  font-weight: 900;
+  line-height: 1;
+  margin: 10px 0;
+  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
+  letter-spacing: 4px;
 }
 
-.time-chip {
+.hero-clinic {
+  font-size: 40px;
   font-weight: 600;
-  color: #1976d2 !important;
+  margin-top: 10px;
 }
 
-.controls-card,
-.main-content-card,
-.current-queue-card,
-.stats-card {
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 12px 48px rgba(255, 107, 107, 0.4);
+  }
+  50% {
+    box-shadow: 0 16px 64px rgba(255, 107, 107, 0.6);
+  }
+}
+
+/* Clinic Grid - 3x3 */
+.clinic-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.clinic-card {
+  background: rgba(255, 255, 255, 0.95);
   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 {
+  padding: 20px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  position: relative;
+  min-height: 200px;
   display: flex;
+  flex-direction: column;
+}
+
+.clinic-name {
+  font-size: 28px;
+  font-weight: 800;
+  color: #1e3c72;
+  text-align: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 3px solid #2a5298;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.queue-display {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   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);
+/* Current Queue Display */
+.current-queue-large {
+  text-align: center;
+  margin-bottom: 10px;
 }
 
-.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;
+.queue-label {
+  font-size: 18px;
   font-weight: 600;
+  color: #4caf50;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
-.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);
+.queue-number-huge {
+  font-size: 72px;
+  font-weight: 900;
+  color: #1e3c72;
+  line-height: 1;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.stats-card .stat-item {
-  padding: 16px 0;
+/* Next Queues */
+.next-queues {
+  text-align: center;
 }
 
-.stat-number {
-  font-size: 32px;
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.stat-label {
+.queue-label-small {
   font-size: 14px;
+  font-weight: 600;
   color: #666;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+}
+
+.next-queue-numbers {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.next-number {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 12px;
+  font-size: 24px;
+  font-weight: 700;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+/* Empty State */
+.empty-queue {
+  text-align: center;
+  opacity: 0.5;
+}
+
+.empty-text {
+  font-size: 18px;
+  color: #999;
+  margin-top: 10px;
   font-weight: 500;
 }
 
-@keyframes pulse {
-  0% {
-    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
+/* Queue Count Badge */
+.queue-count {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 20px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+/* Footer */
+.tv-footer {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 20px 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.footer-stats {
+  display: flex;
+  gap: 40px;
+}
+
+.stat-box {
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 42px;
+  font-weight: 900;
+  line-height: 1;
+  color:#1e3c72;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.stat-label {
+  font-size: 16px;
+  opacity: 0.9;
+  margin-top: 5px;
+  color:#1e3c72;
+  font-weight: 500;
+}
+
+.footer-message {
+  font-size: 22px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  opacity: 0.95;
+  color:#1e3c72;
+}
+
+/* Responsive for different TV sizes */
+@media (max-width: 1920px) {
+  .hero-number {
+    font-size: 100px;
   }
-  50% {
-    box-shadow: 0 8px 20px rgba(33, 150, 243, 0.6);
-  }
-  100% {
-    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
+  
+  .queue-number-huge {
+    font-size: 64px;
   }
 }
 
-/* Responsive Design */
-@media (max-width: 1024px) {
-  .header-content {
-    flex-direction: column;
-    gap: 20px;
-    text-align: center;
+@media (max-width: 1366px) {
+  .clinic-grid {
+    gap: 10px;
   }
   
-  .header-left {
-    flex-direction: column;
-    gap: 12px;
+  .clinic-card {
+    padding: 15px;
+    min-height: 180px;
   }
   
-  .page-title {
-    font-size: 28px;
+  .clinic-name {
+    font-size: 24px;
+  }
+  
+  .queue-number-huge {
+    font-size: 56px;
+  }
+  
+  .hero-number {
+    font-size: 90px;
   }
 }
 
-@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;
-  }
+/* Animation for smooth transitions */
+.clinic-card {
+  transition: all 0.3s ease;
 }
 
-@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;
-  }
+.queue-number-huge,
+.hero-number {
+  transition: all 0.3s ease;
 }
 </style>
\ No newline at end of file