update komponen tabel

components/TabelData.vue

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