update list pasien dan antrian klinik

pages/List-Pasien.vue

@@ -1,25 +1,172 @@
 <template>
-  <div>
-    <!-- Page Header -->
-    <v-container fluid>
-      <v-row>
-        <v-col cols="12">
-          <h1 class="text-h4 font-weight-bold mb-6">List Pasien</h1>
-        </v-col>
-      </v-row>
+  <div class="pasien-container">
+    <!-- Header Section -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="header-icon">
+            <v-icon size="32" color="white">mdi-account-group</v-icon>
+          </div>
+          <div class="header-text">
+            <h1 class="page-title">List Pasien</h1>
+            <p class="page-subtitle">Senin, 15 September 2025 - Data Master Pasien</p>
+          </div>
+        </div>
+        <div class="header-right">
+          <v-chip
+            color="success"
+            variant="flat"
+            class="mr-2"
+          >
+            Total {{ pasienData.length }} Pasien
+          </v-chip>
+          <v-chip
+            color="white"
+            variant="flat"
+            class="text-primary"
+          >
+            Status: Aktif
+          </v-chip>
+        </div>
+      </div>
+    </div>
 
-      <!-- Main Content Card -->
-      <v-card elevation="2">
-        <v-card-text class="pa-6">
-          <TabelListPasien
-            :items="pasienData"
-            @search="handleSearch"
-            @export-laporan="handleExportLaporan"
-            @export-laporan-per-klinik="handleExportLaporanPerKlinik"
-          />
-        </v-card-text>
-      </v-card>
-    </v-container>
+    <!-- Filter Controls
+    <v-card class="filter-controls-card mb-4" elevation="2">
+      <v-card-text class="py-4">
+        <v-row align="center">
+          <v-col cols="12" md="8">
+            <div class="d-flex align-center flex-wrap gap-10">
+              <span class="text-subtitle-1 font-weight-medium">Filter Cepat:</span>
+              <v-btn
+                color="primary"
+                variant="flat"
+                size="default"
+                class="px-4"
+                @click="filterByStatus('Tunggu Daftar')"
+              >
+                <v-icon start size="16">mdi-clock-outline</v-icon>
+                Tunggu Daftar
+              </v-btn>
+              <v-btn
+                color="success"
+                variant="flat"
+                size="default"
+                class="px-4"
+                @click="filterByStatus('Selesai')"
+              >
+                <v-icon start size="16">mdi-check-circle</v-icon>
+                Selesai
+              </v-btn>
+              <v-btn
+                color="warning"
+                variant="flat"
+                size="default"
+                class="px-4"
+                @click="filterByKlinik('JKN')"
+              >
+                <v-icon start size="16">mdi-card-account-details</v-icon>
+                JKN
+              </v-btn>
+              <v-btn
+                color="info"
+                variant="flat"
+                size="default"
+                class="px-4"
+                @click="resetFilter()"
+              >
+                <v-icon start size="16">mdi-refresh</v-icon>
+                Reset
+              </v-btn>
+            </div>
+          </v-col>
+          <v-col cols="12" md="4">
+            <div class="d-flex justify-end gap-2">
+              <v-btn
+                color="success"
+                variant="flat"
+                @click="handleExportLaporan"
+                :loading="loading"
+              >
+                <v-icon start>mdi-file-excel</v-icon>
+                Export Laporan
+              </v-btn>
+              <v-btn
+                color="primary"
+                variant="flat"
+                @click="handleExportLaporanPerKlinik"
+                :loading="loading"
+              >
+                <v-icon start>mdi-hospital-building</v-icon>
+                Export Per Klinik
+              </v-btn>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card> -->
+
+    <!-- Main Patients Table -->
+    <v-card class="main-table-card mb-4" elevation="2">
+      <v-card-title class="d-flex align-center justify-space-between pa-6">
+        <div class="d-flex align-center">
+          <v-icon color="primary" class="mr-2">mdi-table</v-icon>
+          <span class="text-h6 font-weight-bold">DATA PASIEN</span>
+        </div>
+        <v-chip color="info" variant="flat">
+          {{ filteredData.length }} dari {{ pasienData.length }} pasien
+        </v-chip>
+      </v-card-title>
+      
+      <v-divider></v-divider>
+      
+      <TabelListPasien
+        :items="filteredData"
+        @search="handleSearch"
+        @export-laporan="handleExportLaporan"
+        @export-laporan-per-klinik="handleExportLaporanPerKlinik"
+      />
+    </v-card>
+
+    Statistics Cards
+    <v-row class="mb-4">
+      <v-col cols="12" md="3">
+        <v-card class="stats-card" elevation="2">
+          <v-card-text class="text-center pa-4">
+            <v-icon size="40" color="success" class="mb-2">mdi-account-check</v-icon>
+            <div class="text-h4 font-weight-bold text-success">{{ getStatsByStatus('Tunggu Daftar') }}</div>
+            <div class="text-body-2 text-grey-darken-1">Tunggu Daftar</div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card class="stats-card" elevation="2">
+          <v-card-text class="text-center pa-4">
+            <v-icon size="40" color="info" class="mb-2">mdi-barcode</v-icon>
+            <div class="text-h4 font-weight-bold text-info">{{ getStatsByStatus('Barcode') }}</div>
+            <div class="text-body-2 text-grey-darken-1">Barcode</div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card class="stats-card" elevation="2">
+          <v-card-text class="text-center pa-4">
+            <v-icon size="40" color="warning" class="mb-2">mdi-wifi</v-icon>
+            <div class="text-h4 font-weight-bold text-warning">{{ getStatsByKeterangan('Online') }}</div>
+            <div class="text-body-2 text-grey-darken-1">Online</div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card class="stats-card" elevation="2">
+          <v-card-text class="text-center pa-4">
+            <v-icon size="40" color="error" class="mb-2">mdi-wifi-off</v-icon>
+            <div class="text-h4 font-weight-bold text-error">{{ getStatsByKeterangan('Offline') }}</div>
+            <div class="text-body-2 text-grey-darken-1">Offline</div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
 
     <!-- Loading Overlay -->
     <v-overlay v-model="loading" class="align-center justify-center">
@@ -30,7 +177,7 @@
       />
     </v-overlay>
 
-    <!-- Success Snackbar -->
+    <!-- Snackbar -->
     <v-snackbar
       v-model="snackbar.show"
       :color="snackbar.color"
@@ -40,19 +187,18 @@
       {{ snackbar.message }}
       <template v-slot:actions>
         <v-btn
-          variant="text"
+          icon
           @click="snackbar.show = false"
         >
-          Close
+          <v-icon>mdi-close</v-icon>
         </v-btn>
       </template>
     </v-snackbar>
   </div>
 </template>
 
-
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import TabelListPasien from '~/components/TabelListPasien.vue'
 
 // Meta untuk SEO
@@ -63,13 +209,14 @@ definePageMeta({
 
 // Reactive states
 const loading = ref(false)
+const currentFilter = ref('')
 const snackbar = ref({
   show: false,
   message: '',
   color: 'success'
 })
 
-// Sample data (replace with actual API call)
+// Sample data
 const pasienData = ref([
   {
     tglPeriksa: '27/08/2025',
@@ -203,17 +350,57 @@ const pasienData = ref([
   }
 ])
 
+// Computed properties
+const filteredData = computed(() => {
+  if (!currentFilter.value) {
+    return pasienData.value
+  }
+  
+  return pasienData.value.filter(item => {
+    return item.status === currentFilter.value || 
+           item.pembayaran === currentFilter.value ||
+           item.keterangan === currentFilter.value
+  })
+})
+
 // Methods
+const showSnackbar = (message, color = 'success') => {
+  snackbar.value = {
+    show: true,
+    message,
+    color
+  }
+}
+
+const filterByStatus = (status) => {
+  currentFilter.value = status
+  showSnackbar(`Filter diterapkan: ${status}`, 'info')
+}
+
+const filterByKlinik = (pembayaran) => {
+  currentFilter.value = pembayaran
+  showSnackbar(`Filter diterapkan: ${pembayaran}`, 'info')
+}
+
+const resetFilter = () => {
+  currentFilter.value = ''
+  showSnackbar('Filter direset', 'success')
+}
+
+const getStatsByStatus = (status) => {
+  return pasienData.value.filter(item => item.status === status).length
+}
+
+const getStatsByKeterangan = (keterangan) => {
+  return pasienData.value.filter(item => item.keterangan === keterangan).length
+}
+
 const handleSearch = async (filters) => {
   loading.value = true
   
   try {
-    // Simulate API call
     await new Promise(resolve => setTimeout(resolve, 1000))
-    
-    // Here you would typically call your API with filters
     console.log('Search filters:', filters)
-    
     showSnackbar('Data berhasil difilter', 'success')
   } catch (error) {
     console.error('Error searching data:', error)
@@ -227,12 +414,8 @@ const handleExportLaporan = async () => {
   loading.value = true
   
   try {
-    // Simulate export process
     await new Promise(resolve => setTimeout(resolve, 2000))
-    
-    // Here you would typically call your export API
     console.log('Exporting laporan pasien...')
-    
     showSnackbar('Laporan pasien berhasil diexport', 'success')
   } catch (error) {
     console.error('Error exporting laporan:', error)
@@ -246,12 +429,8 @@ const handleExportLaporanPerKlinik = async () => {
   loading.value = true
   
   try {
-    // Simulate export process
     await new Promise(resolve => setTimeout(resolve, 2000))
-    
-    // Here you would typically call your export API
     console.log('Exporting laporan pasien per klinik...')
-    
     showSnackbar('Laporan pasien per klinik berhasil diexport', 'success')
   } catch (error) {
     console.error('Error exporting laporan per klinik:', error)
@@ -261,25 +440,11 @@ const handleExportLaporanPerKlinik = async () => {
   }
 }
 
-const showSnackbar = (message, color = 'success') => {
-  snackbar.value = {
-    show: true,
-    message,
-    color
-  }
-}
-
 const fetchPasienData = async () => {
   loading.value = true
   
   try {
-    // Simulate API call to fetch patient data
     await new Promise(resolve => setTimeout(resolve, 1000))
-    
-    // Here you would typically call your API
-    // const response = await $fetch('/api/pasien')
-    // pasienData.value = response.data
-    
     console.log('Patient data loaded successfully')
   } catch (error) {
     console.error('Error fetching patient data:', error)
@@ -307,5 +472,164 @@ useHead({
 </script>
 
 <style scoped>
-/* Custom styles if needed */
+.pasien-container {
+  background: #f5f7fa;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.page-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+/* .filter-controls-card, */
+.main-table-card,
+.stats-card {
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.stats-card {
+  transition: all 0.2s ease;
+}
+
+.stats-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+/* Enhanced table styling */
+.main-table-card :deep(.v-data-table th) {
+  background: #fafbfc;
+  font-weight: 600;
+  font-size: 13px;
+  color: #374151;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.main-table-card :deep(.v-data-table tbody tr:hover) {
+  background: #f8fafc !important;
+}
+
+.main-table-card :deep(.v-data-table tbody td) {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+/* Button styling */
+.v-btn {
+  text-transform: none !important;
+  font-weight: 500;
+}
+
+.v-btn--size-default {
+  height: 40px;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .header-content {
+    flex-direction: column;
+    gap: 20px;
+    text-align: center;
+  }
+  
+  .header-left {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .page-title {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 768px) {
+  .pasien-container {
+    padding: 16px;
+  }
+  
+  .header-content {
+    padding: 24px 20px;
+  }
+  
+  .page-title {
+    font-size: 24px;
+  }
+  
+  .header-icon {
+    padding: 12px;
+  }
+
+  /* .filter-controls-card .d-flex {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  } */
+
+  .filter-controls-card .v-col:last-child .d-flex {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 600px) {
+  .page-title {
+    font-size: 20px;
+  }
+  
+  .filter-buttons-container {
+    justify-content: center;
+  }
+  
+  .filter-btn {
+    margin-right: 12px;
+    margin-bottom: 10px;
+  }
+
+  .header-right .v-chip {
+    font-size: 12px;
+  }
+}
 </style>