fix : hide antrean spesilis 0

pages/antrean/list-spesialis.vue

@@ -22,8 +22,21 @@ interface SpesialisData {
 }
 
 const loading = ref(true);
+const search = ref('');
 const spesialisList = ref<SpesialisData[]>([]);
 const expandedItems = ref<Set<number>>(new Set());
+const visibleSpesialisList = computed(() => spesialisList.value.filter((spesialis) => spesialis.JmlAntrian > 0));
+const filteredSpesialisList = computed(() => {
+  const keyword = search.value.trim().toLowerCase();
+
+  if (!keyword) {
+    return visibleSpesialisList.value;
+  }
+
+  return visibleSpesialisList.value.filter((spesialis) =>
+    spesialis.Spesialis.toLowerCase().includes(keyword)
+  );
+});
 
 // Toggle expand/collapse for subspecialist details
 const toggleExpand = (idSpesialis: number) => {
@@ -63,13 +76,29 @@ onMounted(() => {
 <template>
     <LoadingState
         :loading="loading"
-        :empty="spesialisList.length === 0 && !loading"
+      :empty="filteredSpesialisList.length === 0 && !loading"
         loading-text="Memuat data spesialis..."
         empty-text="Tidak ada data antrian per spesialis"
     >
-        <v-row>
+      <v-row class="mb-4">
+        <v-col cols="12" md="4" class="text-left">
+          <v-text-field
+            v-model="search"
+            placeholder="Cari spesialis..."
+            variant="outlined"
+            density="compact"
+            clearable
+            hide-details
+            prepend-inner-icon="mdi-magnify"
+            class="bg-white"
+            style="max-width: 320px;"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
             <v-col 
-                v-for="spesialis in spesialisList" 
+          v-for="spesialis in filteredSpesialisList" 
                 :key="spesialis.IdSpesialis"
                 cols="12"
                 md="4"