update master dan ruang based on jenis layanan

pages/AdminKlinikRuang/[kodeKlinik].vue

@@ -811,17 +811,31 @@ const kodeKlinik = computed(() => {
   return Array.isArray(kode) ? kode[0] : kode;
 });
 
+// Get jenisLayanan from query parameter to differentiate same clinic code with different service types
+const jenisLayanan = computed(() => {
+  return route.query.jenisLayanan || null;
+});
+
 const klinikData = computed(() => {
   const kode = kodeKlinik.value;
   if (!kode) return null;
 
   const ruangData = masterStore.ruangData || [];
-  const klinikRuang = ruangData.find(r => r.kodeKlinik === kode);
+  
+  // Filter by kodeKlinik AND jenisLayanan if provided (to differentiate Reguler vs Eksekutif)
+  let klinikRuang;
+  if (jenisLayanan.value) {
+    klinikRuang = ruangData.find(r => r.kodeKlinik === kode && r.jenisLayanan === jenisLayanan.value);
+  } else {
+    // Fallback: just use kodeKlinik (for backward compatibility)
+    klinikRuang = ruangData.find(r => r.kodeKlinik === kode);
+  }
   
   if (klinikRuang) {
     return {
       kodeKlinik: klinikRuang.kodeKlinik,
-      namaKlinik: klinikRuang.namaKlinik
+      namaKlinik: klinikRuang.namaKlinik,
+      jenisLayanan: klinikRuang.jenisLayanan
     };
   }
   return null;
@@ -832,7 +846,15 @@ const ruangList = computed(() => {
   if (!kode) return [];
 
   const ruangData = masterStore.ruangData || [];
-  const klinikRuang = ruangData.find(r => r.kodeKlinik === kode);
+  
+  // Filter by kodeKlinik AND jenisLayanan if provided
+  let klinikRuang;
+  if (jenisLayanan.value) {
+    klinikRuang = ruangData.find(r => r.kodeKlinik === kode && r.jenisLayanan === jenisLayanan.value);
+  } else {
+    // Fallback: just use kodeKlinik
+    klinikRuang = ruangData.find(r => r.kodeKlinik === kode);
+  }
   
   return klinikRuang?.ruangList || [];
 });

pages/AdminKlinikRuang/index.vue

@@ -12,9 +12,9 @@
       <div v-if="klinikRuangList.length > 0" class="klinik-grid">
         <div
           v-for="klinikRuang in klinikRuangList"
-          :key="klinikRuang.id"
+          :key="`${klinikRuang.kodeKlinik}-${klinikRuang.jenisLayanan}`"
           class="klinik-card"
-          @click="navigateToKlinik(klinikRuang.kodeKlinik)"
+          @click="navigateToKlinik(klinikRuang.kodeKlinik, klinikRuang.jenisLayanan)"
         >
           <div class="klinik-card-header">
             <div class="klinik-info">
@@ -89,25 +89,116 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useMasterStore } from '@/stores/masterStore';
+import { useClinicStore } from '@/stores/clinicStore';
+import { useRuangStore } from '@/stores/ruangStore';
 import PageHeader from '@/components/common/PageHeader.vue';
 
 const router = useRouter();
 const masterStore = useMasterStore();
+const clinicStore = useClinicStore();
+const ruangStore = useRuangStore();
+
+const loading = ref(false);
 
 const klinikRuangList = computed(() => {
   return masterStore.ruangData || [];
 });
 
-const navigateToKlinik = (kodeKlinik) => {
-  router.push(`/adminklinikruang/${kodeKlinik}`);
+const navigateToKlinik = (kodeKlinik, jenisLayanan) => {
+  // Include jenisLayanan as query parameter to differentiate same clinic code with different service types
+  router.push({
+    path: `/adminklinikruang/${kodeKlinik}`,
+    query: { jenisLayanan }
+  });
 };
 
 const navigateToSettings = () => {
   router.push('/setting/masterklinikruang');
 };
+
+// Generate rooms from clinics based on spesialis field (same logic as MasterKlinikRuang)
+const generateRoomsFromClinics = () => {
+  console.log('🔄 AdminKlinikRuang/index - Generating rooms from clinics...');
+  const allRooms = [];
+  let roomIdCounter = 1;
+  
+  const allClinics = clinicStore.clinics;
+  console.log('📊 Total clinics:', allClinics.length);
+  
+  allClinics.forEach(clinic => {
+    if (clinic.jenisLayanan === 'Reguler') {
+      if (clinic.spesialis && Array.isArray(clinic.spesialis) && clinic.spesialis.length > 0) {
+        // Create room ONLY for each specialist (no duplicate clinic-name room)
+        clinic.spesialis.forEach((spec, index) => {
+          allRooms.push({
+            id: roomIdCounter++,
+            kodeKlinik: clinic.kode,
+            namaKlinik: clinic.name,
+            kodeRuang: `${clinic.kode}-${spec.idspesialis}`,
+            namaRuang: spec.Spesialis,
+            nomorRuang: (index + 1).toString(),
+            nomorScreen: `${clinic.kode}${index + 1}`,
+            jenisLayanan: 'Reguler'
+          });
+        });
+      } else {
+        // Only create 1 room with clinic name when NO spesialis
+        allRooms.push({
+          id: roomIdCounter++,
+          kodeKlinik: clinic.kode,
+          namaKlinik: clinic.name,
+          kodeRuang: clinic.kode,
+          namaRuang: clinic.name,
+          nomorRuang: '1',
+          nomorScreen: `${clinic.kode}1`,
+          jenisLayanan: 'Reguler'
+        });
+      }
+    } else if (clinic.jenisLayanan === 'Eksekutif') {
+      // For Eksekutif: always 1 room (no spesialis in seed data)
+      allRooms.push({
+        id: roomIdCounter++,
+        kodeKlinik: clinic.kode,
+        namaKlinik: clinic.name,
+        kodeRuang: clinic.kode,
+        namaRuang: clinic.name,
+        nomorRuang: '1',
+        nomorScreen: `${clinic.kode}1`,
+        jenisLayanan: 'Eksekutif'
+      });
+    }
+  });
+  
+  console.log(`✅ Generated ${allRooms.length} rooms from ${allClinics.length} clinics`);
+  
+  // Update ruangStore with generated rooms
+  const result = ruangStore.replaceAllRooms(allRooms);
+  console.log('💾 Rooms saved to ruangStore:', result.message);
+  
+  return result;
+};
+
+// Load data on mount (same as MasterKlinikRuang)
+onMounted(async () => {
+  console.log('🚀 AdminKlinikRuang/index mounted, loading data...');
+  loading.value = true;
+  
+  try {
+    // Fetch clinics from API (uses cache if available)
+    const fetchResult = await clinicStore.fetchRegulerClinics();
+    console.log('📥 Fetch result:', fetchResult);
+    
+    // Generate rooms based on fetched data
+    generateRoomsFromClinics();
+  } catch (error) {
+    console.error('❌ Error loading data:', error);
+  } finally {
+    loading.value = false;
+  }
+});
 </script>
 
 <style scoped lang="scss">

pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue

@@ -153,6 +153,11 @@ const kodeKlinik = computed(() => {
   return Array.isArray(kode) ? kode[0] : kode
 })
 
+// Get jenisLayanan from query parameter to differentiate same clinic code with different service types
+const jenisLayanan = computed(() => {
+  return route.query.jenisLayanan || null
+})
+
 const klinikData = computed(() => {
   const kode = kodeKlinik.value
   if (!kode) return null
@@ -170,16 +175,29 @@ const klinikData = computed(() => {
           nomorRuang: ru.nomorRuang,
           namaRuang: ru.namaRuang,
           nomorScreen: ru.nomorScreen,
+          jenisLayanan: r.jenisLayanan
         })
       })
     })
   }
 
-  const firstRuang = allRuang.find(r => r.kodeKlinik === kode)
+  // Filter by kodeKlinik AND jenisLayanan if provided
+  let filteredRuang
+  if (jenisLayanan.value) {
+    filteredRuang = allRuang.filter(r => 
+      r.kodeKlinik === kode && r.jenisLayanan === jenisLayanan.value
+    )
+  } else {
+    // Fallback: just filter by kodeKlinik
+    filteredRuang = allRuang.filter(r => r.kodeKlinik === kode)
+  }
+
+  const firstRuang = filteredRuang[0]
   if (firstRuang) {
     return {
       kodeKlinik: firstRuang.kodeKlinik,
-      namaKlinik: firstRuang.namaKlinik
+      namaKlinik: firstRuang.namaKlinik,
+      jenisLayanan: firstRuang.jenisLayanan
     }
   }
   return null
@@ -190,13 +208,19 @@ const currentDate = ref('')
 let timeInterval = null
 
 const klinikPatients = computed(() => {
+  // Get valid room numbers for this klinik+jenisLayanan combination
+  // This ensures we only show patients whose rooms belong to the selected jenisLayanan
+  const validRoomNumbers = ruangListForKlinik.value.map(r => r.nomorRuang)
+  
   // Get patients from klinik-ruang stage (created from AdminKlinikRuang)
   // Filter out finished patients (status: 'processed' or 'selesai')
+  // AND filter by room number to separate patients by jenisLayanan
   return queueStore.allPatients.filter(p => 
     p.processStage === 'klinik-ruang' && 
     p.kodeKlinik === kodeKlinik.value &&
     p.status !== 'processed' &&
-    p.status !== 'selesai'
+    p.status !== 'selesai' &&
+    validRoomNumbers.includes(p.nomorRuang) // Only show patients in rooms belonging to this jenisLayanan
   )
 })
 
@@ -216,19 +240,30 @@ const ruangListForKlinik = computed(() => {
           nomorRuang: ru.nomorRuang,
           namaRuang: ru.namaRuang,
           nomorScreen: ru.nomorScreen,
+          jenisLayanan: r.jenisLayanan
         })
       })
     })
   }
-  return allRuang
-    .filter(r => r.kodeKlinik === kodeKlinik.value)
-    .map(ruang => ({
-      kodeKlinik: ruang.kodeKlinik,
-      namaKlinik: ruang.namaKlinik,
-      nomorRuang: ruang.nomorRuang,
-      namaRuang: ruang.namaRuang,
-      nomorScreen: ruang.nomorScreen
-    }))
+  
+  // Filter by kodeKlinik AND jenisLayanan if provided
+  let filtered
+  if (jenisLayanan.value) {
+    filtered = allRuang.filter(r => 
+      r.kodeKlinik === kodeKlinik.value && r.jenisLayanan === jenisLayanan.value
+    )
+  } else {
+    filtered = allRuang.filter(r => r.kodeKlinik === kodeKlinik.value)
+  }
+  
+  return filtered.map(ruang => ({
+    kodeKlinik: ruang.kodeKlinik,
+    namaKlinik: ruang.namaKlinik,
+    nomorRuang: ruang.nomorRuang,
+    namaRuang: ruang.namaRuang,
+    nomorScreen: ruang.nomorScreen,
+    jenisLayanan: ruang.jenisLayanan
+  }))
 })
 
 const displayedRuang = computed(() => {

pages/Anjungan/AntrianKlinikRuang/index.vue

@@ -19,15 +19,23 @@
       <div class="kliniks-grid" v-if="paginatedKliniks.length > 0">
       <div
         v-for="klinik in paginatedKliniks"
-        :key="klinik.kodeKlinik"
+        :key="`${klinik.kodeKlinik}-${klinik.jenisLayanan}`"
         class="klinik-card"
-        @click="navigateToKlinik(klinik.kodeKlinik)"
+        @click="navigateToKlinik(klinik)"
       >
         <div class="klinik-card-header">
           <v-icon size="32" color="primary">mdi-hospital-building</v-icon>
           <div class="klinik-info">
             <h3 class="klinik-name">{{ klinik.namaKlinik }}</h3>
-            <p class="klinik-code">{{ klinik.kodeKlinik }}</p>
+            <div class="klinik-details">
+              <v-chip 
+                size="x-small" 
+                :class="klinik.jenisLayanan === 'Reguler' ? 'chip-reguler' : 'chip-eksekutif'"
+              >
+                {{ klinik.jenisLayanan }}
+              </v-chip>
+              <span class="kode-chip">{{ klinik.kodeKlinik }}</span>
+            </div>
           </div>
         </div>
         
@@ -95,8 +103,10 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useMasterStore } from '@/stores/masterStore';
+import { useClinicStore } from '@/stores/clinicStore';
+import { useRuangStore } from '@/stores/ruangStore';
 import { useRoute } from '#app';
 
 definePageMeta({
@@ -104,6 +114,8 @@ definePageMeta({
 });
 
 const masterStore = useMasterStore();
+const clinicStore = useClinicStore();
+const ruangStore = useRuangStore();
 const route = useRoute();
 
 // Group klinik berdasarkan data flatten getAllRuangList agar nama ruang baru langsung muncul
@@ -123,6 +135,7 @@ const kliniksWithRuang = computed(() => {
           nomorRuang: ru.nomorRuang,
           namaRuang: ru.namaRuang,
           nomorScreen: ru.nomorScreen,
+          jenisLayanan: r.jenisLayanan
         });
       });
     });
@@ -130,14 +143,17 @@ const kliniksWithRuang = computed(() => {
 
   const klinikMap = {};
   allRuang.forEach((ruang) => {
-    if (!klinikMap[ruang.kodeKlinik]) {
-      klinikMap[ruang.kodeKlinik] = {
+    // Use kodeKlinik + jenisLayanan as key to differentiate same clinic with different service types
+    const key = `${ruang.kodeKlinik}-${ruang.jenisLayanan || 'default'}`;
+    if (!klinikMap[key]) {
+      klinikMap[key] = {
         kodeKlinik: ruang.kodeKlinik,
         namaKlinik: ruang.namaKlinik,
+        jenisLayanan: ruang.jenisLayanan,
         ruangList: [],
       };
     }
-    klinikMap[ruang.kodeKlinik].ruangList.push({
+    klinikMap[key].ruangList.push({
       namaRuang: ruang.namaRuang,
       nomorRuang: ruang.nomorRuang,
       nomorScreen: ruang.nomorScreen,
@@ -169,13 +185,94 @@ const goNext = () => {
   if (page.value < totalPages.value) page.value = page.value + 1;
 };
 
-const navigateToKlinik = (kodeKlinik) => {
-  navigateTo(`/anjungan/antrianklinikruang/${kodeKlinik}`);
+const navigateToKlinik = (klinik) => {
+  // Build URL with jenisLayanan query parameter to differentiate same clinic codes
+  const url = `/anjungan/antrianklinikruang/${klinik.kodeKlinik}`;
+  const query = klinik.jenisLayanan ? { jenisLayanan: klinik.jenisLayanan } : {};
+  navigateTo({ path: url, query });
 };
 
 const navigateToSettings = () => {
   navigateTo('/setting/masterklinikruang');
 };
+
+// Generate rooms from clinics (same logic as AdminKlinikRuang)
+const generateRoomsFromClinics = () => {
+  console.log('🔄 Anjungan/index - Generating rooms from clinics...');
+  const allRooms = [];
+  let roomIdCounter = 1;
+  
+  const allClinics = clinicStore.clinics;
+  console.log('📊 Total clinics:', allClinics.length);
+  
+  allClinics.forEach(clinic => {
+    if (clinic.jenisLayanan === 'Reguler') {
+      if (clinic.spesialis && Array.isArray(clinic.spesialis) && clinic.spesialis.length > 0) {
+        // Create room ONLY for each specialist (no duplicate clinic-name room)
+        clinic.spesialis.forEach((spec, index) => {
+          allRooms.push({
+            id: roomIdCounter++,
+            kodeKlinik: clinic.kode,
+            namaKlinik: clinic.name,
+            kodeRuang: `${clinic.kode}-${spec.idspesialis}`,
+            namaRuang: spec.Spesialis,
+            nomorRuang: (index + 1).toString(),
+            nomorScreen: `${clinic.kode}${index + 1}`,
+            jenisLayanan: 'Reguler'
+          });
+        });
+      } else {
+        // Only create 1 room with clinic name when NO spesialis
+        allRooms.push({
+          id: roomIdCounter++,
+          kodeKlinik: clinic.kode,
+          namaKlinik: clinic.name,
+          kodeRuang: clinic.kode,
+          namaRuang: clinic.name,
+          nomorRuang: '1',
+          nomorScreen: `${clinic.kode}1`,
+          jenisLayanan: 'Reguler'
+        });
+      }
+    } else if (clinic.jenisLayanan === 'Eksekutif') {
+      // For Eksekutif: always 1 room (no spesialis in seed data)
+      allRooms.push({
+        id: roomIdCounter++,
+        kodeKlinik: clinic.kode,
+        namaKlinik: clinic.name,
+        kodeRuang: clinic.kode,
+        namaRuang: clinic.name,
+        nomorRuang: '1',
+        nomorScreen: `${clinic.kode}1`,
+        jenisLayanan: 'Eksekutif'
+      });
+    }
+  });
+  
+  console.log(`✅ Generated ${allRooms.length} rooms from ${allClinics.length} clinics`);
+  
+  // Update ruangStore with generated rooms
+  const result = ruangStore.replaceAllRooms(allRooms);
+  console.log('💾 Rooms saved to ruangStore:', result.message);
+  
+  return result;
+};
+
+// Load data on mount
+onMounted(async () => {
+  console.log('🚀 Anjungan/AntrianKlinikRuang/index mounted, loading data...');
+  
+  try {
+    // Fetch clinics from API (uses cache if available)
+    const fetchResult = await clinicStore.fetchRegulerClinics();
+    console.log('📥 Fetch result:', fetchResult);
+    
+    // Generate rooms based on fetched data
+    generateRoomsFromClinics();
+  } catch (error) {
+    console.error('❌ Error loading data:', error);
+  }
+});
 </script>
 
 <style scoped lang="scss">
@@ -287,6 +384,36 @@ const navigateToSettings = () => {
   line-height: 1.2;
 }
 
+.klinik-details {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.chip-reguler {
+  background-color: var(--color-primary-600) !important;
+  color: var(--color-neutral-100) !important;
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.chip-eksekutif {
+  background-color: var(--color-secondary-600) !important;
+  color: var(--color-neutral-100) !important;
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.kode-chip {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  background: var(--color-neutral-400);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
 .klinik-code {
   font-size: 14px;
   color: var(--color-neutral-600);

pages/Setting/MasterAnjungan.vue

@@ -19,10 +19,11 @@
       <div class="action-bar mb-4">
         <v-spacer></v-spacer>
         <v-btn
-          color="primary"
+          color="primary-600"
+          variant="flat"
           @click="openTambahDialog"
           elevation="0"
-          class="action-btn"
+          class="action-btn text-white"
         >
           <v-icon left size="20">mdi-plus-circle</v-icon>
           Tambah Anjungan
@@ -42,7 +43,10 @@
           </template>
 
           <template v-slot:item.jenisPasien="{ item }">
-            <v-chip size="small" class="chip-secondary-outline">
+            <v-chip 
+              size="small" 
+              :class="item.jenisPasien === 'Reguler' ? 'chip-reguler' : 'chip-eksekutif'"
+            >
               {{ item.jenisPasien }}
             </v-chip>
           </template>
@@ -53,14 +57,14 @@
                 v-for="(kode, idx) in item.klinik.slice(0, 3)"
                 :key="idx"
                 size="small"
-                class="ma-1 chip-secondary-outline"
+                class="mr-1 mb-1 chip-primary-outline"
               >
                 {{ masterStore.getKlinikNameByKode(kode) }}
               </v-chip>
               <v-chip
                 v-if="item.klinik.length > 3"
                 size="small"
-                class="ma-1 chip-neutral"
+                class="chip-neutral"
               >
                 +{{ item.klinik.length - 3 }}
               </v-chip>
@@ -70,8 +74,9 @@
           <template v-slot:item.layarInformasi="{ item }">
             <v-btn
               size="small"
+              variant="outlined"
+              color="primary-600"
               @click="openPreviewDialog(item)"
-              variant="flat"
               class="btn-preview mr-2"
             >
               <v-icon size="16" left>mdi-eye</v-icon>
@@ -82,8 +87,9 @@
           <template v-slot:item.actions="{ item }">
             <v-btn
               size="small"
-              @click="openEditDialog(item)"
               variant="flat"
+              color="warning-600"
+              @click="openEditDialog(item)"
               class="btn-edit mr-2"
             >
               <v-icon size="16" left>mdi-cog</v-icon>
@@ -91,8 +97,9 @@
             </v-btn>
             <v-btn
               size="small"
+              variant="flat"
+              color="error-600"
               @click="handleDelete(item)"
-              variant="outlined"
               class="btn-delete"
             >
               <v-icon size="16" left>mdi-delete</v-icon>
@@ -502,6 +509,31 @@ $font-weight-semibold: 600;
   max-width: 600px;
 }
 
+.chip-reguler {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip-eksekutif {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip-primary-outline {
+  border: 1px solid $primary-600;
+  background-color: transparent !important;
+  color: $primary-600 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
 .chip-secondary-outline {
   border: 1px solid $secondary-600;
   background-color: transparent !important;
@@ -520,7 +552,7 @@ $font-weight-semibold: 600;
 }
 
 .btn-edit {
-  background-color: $secondary-600 !important;
+  background-color: $primary-600 !important;
   color: $neutral-100 !important;
   text-transform: none;
   font-weight: $font-weight-semibold;

pages/Setting/MasterKlinik.vue

@@ -21,9 +21,10 @@
       <div class="action-bar mb-4">
         <v-spacer></v-spacer>
         <v-btn 
-          color="primary" 
+          color="primary-600"
+          variant="flat"
           elevation="0"
-          class="action-btn"
+          class="action-btn text-white"
           @click="openTambahDialog"
         >
           <v-icon left size="20">mdi-plus-circle</v-icon>
@@ -62,6 +63,7 @@
           <template #item.aksi="{ item }">
             <v-btn
               size="small"
+              color="warning-600"
               class="btn-edit mr-2"
               variant="flat"
               @click="openEditDialog(item)"
@@ -71,8 +73,9 @@
             </v-btn>
             <v-btn
               size="small"
+              color="error-600"
               class="btn-delete"
-              variant="outlined"
+              variant="flat"
               @click="handleDelete(item)"
             >
               <v-icon size="16" left>mdi-delete</v-icon>
@@ -808,13 +811,13 @@ $font-weight-bold: 700;
 }
 
 .chip-reguler {
-  background-color: #009262 !important;
+  background-color: $success-600 !important;
   color: #FFFFFF !important;
   font-weight: 500;
 }
 
 .chip-eksekutif {
-  background-color: #E67E22 !important;
+  background-color: $secondary-600 !important;
   color: #FFFFFF !important;
   font-weight: 500;
 }

pages/Setting/MasterKlinikRuang.vue

@@ -29,10 +29,11 @@
           </v-chip>
         </div>
         <v-btn 
-          color="primary" 
+          color="primary-600"
+          variant="flat"
           @click="openTambahDialog"
           elevation="0"
-          class="action-btn"
+          class="action-btn text-white"
         >
           <v-icon left size="20">mdi-plus-circle</v-icon>
           Tambah Ruang
@@ -56,18 +57,31 @@
           </template>
           
           <template v-slot:item.namaRuang="{ item }">
-            <span v-if="item.ruangList && item.ruangList.length > 3">
-              {{ item.ruangList.slice(0, 3).map(r => r.namaRuang).join(', ') }}
-              <span class="text-neutral-600"> +({{ item.ruangList.length - 3 }} ruang lainnya)</span>
-            </span>
-            <span v-else>{{ item.namaRuang }}</span>
+            <div class="ruang-tags">
+              <v-chip
+                v-for="(ruang, idx) in item.ruangList.slice(0, 3)"
+                :key="idx"
+                size="small"
+                class="mr-1 mb-1 chip-primary-outline"
+              >
+                {{ ruang.namaRuang }}
+              </v-chip>
+              <v-chip
+                v-if="item.ruangList.length > 3"
+                size="small"
+                class="chip-neutral"
+              >
+                +{{ item.ruangList.length - 3 }}
+              </v-chip>
+            </div>
           </template>
           
           <template v-slot:item.layarInformasi="{ item }">
             <v-btn
               size="small"
+              variant="outlined"
+              color="primary-600"
               @click="openPreviewDialog(item)"
-              variant="flat"
               class="btn-preview mr-2"
             >
               <v-icon size="16" left>mdi-eye</v-icon>
@@ -87,6 +101,7 @@
           <template v-slot:item.aksi="{ item }">
             <v-btn
               size="small"
+              color=" warning-600"
               @click="openEditDialog(item)"
               class="btn-edit mr-2"
               variant="flat"
@@ -96,9 +111,10 @@
             </v-btn>
             <v-btn
               size="small"
+              color="error-600"
               @click="handleDelete(item)"
               class="btn-delete"
-              variant="outlined"
+              variant="flat"
             >
               <v-icon size="16" left>mdi-delete</v-icon>
               Delete
@@ -841,6 +857,35 @@ $font-weight-semibold: 600;
   line-height: 16px;
 }
 
+.ruang-tags {
+  display: flex;
+  flex-wrap: nowrap;
+  max-width: 600px;
+  overflow: hidden;
+}
+
+.chip-primary-outline {
+  border: 1px solid $primary-600;
+  background-color: transparent !important;
+  color: $primary-600 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chip-neutral {
+  background-color: $neutral-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+  flex-shrink: 0;
+}
+
 // ============================================
 // RUANG ITEMS
 // ============================================
@@ -901,7 +946,7 @@ $font-weight-semibold: 600;
 // PREVIEW DIALOG
 // ============================================
 .btn-preview {
-  background-color: $secondary-600 !important;
+  background-color: $success-600 !important;
   color: $neutral-100 !important;
   text-transform: none;
   font-weight: $font-weight-semibold;

pages/Setting/MasterLoket.vue

@@ -21,9 +21,10 @@
       <div class="action-bar mb-4">
         <v-spacer></v-spacer>
         <v-btn 
-          color="primary" 
+          color="primary-600"
+          variant="flat"
           elevation="0"
-          class="action-btn"
+          class="action-btn text-white"
           @click="openTambahDialog"
         >
           <v-icon left size="20">mdi-plus-circle</v-icon>
@@ -78,20 +79,25 @@
             </v-chip>
           </template>
 
-          <template #item.aksi="{ item }">
+          <template #item.layarInformasi="{ item }">
             <v-btn
               size="small"
+              variant="outlined"
+              color="primary-600"
               @click="openPreview(item)"
-              variant="flat"
               class="btn-preview mr-2"
             >
               <v-icon size="16" left>mdi-eye</v-icon>
               Preview
             </v-btn>
+          </template>
+
+          <template #item.aksi="{ item }">
 
             <v-btn
               size="small"
               variant="flat"
+              color="warning-600"
               class="btn-edit mr-2"
               @click="openEditDialog(item)"
             >
@@ -99,8 +105,9 @@
               Edit
             </v-btn>
             <v-btn 
-              size="small" 
-              variant="outlined" 
+              size="small"
+              variant="flat"
+              color="error-600"
               class="btn-delete"
               @click="handleDelete(item)"
             >
@@ -393,12 +400,12 @@ onMounted(async () => {
 
 const loketHeaders = ref([
   { title: "No", value: "no" },
-  { title: "ID", value: "id" },
   { title: "Nama Loket", value: "namaLoket" },
   { title: "Kuota", value: "kuota" },
   { title: "Pelayanan", value: "pelayanan" },
   { title: "Pembayaran", value: "pembayaran" },
   { title: "Status Loket Aktif", value: "loketAktif" },
+  { title: "Layar Informasi", value: "layarInformasi", sortable: false, width: "150px" },
   { title: "Aksi", value: "aksi", sortable: false },
 ]);
 

pages/Setting/MasterPenunjang.vue

@@ -14,9 +14,10 @@
           </div>
         </div>
         <v-btn 
-          color="white" 
+          color="primary-600"
+          variant="flat"
           elevation="0"
-          class="add-btn"
+          class="action-btn"
           @click="openTambahDialog"
         >
           <v-icon left size="20">mdi-plus-circle</v-icon>
@@ -66,6 +67,7 @@
           <template #item.aksi="{ item }">
             <v-btn
               size="small"
+              color="warning-600"
               class="btn-edit mr-2"
               variant="flat"
               @click="openEditDialog(item)"
@@ -75,8 +77,9 @@
             </v-btn>
             <v-btn
               size="small"
+              color="error-600"
               class="btn-delete"
-              variant="outlined"
+              variant="flat"
               @click="handleDelete(item)"
             >
               <v-icon size="16" left>mdi-delete</v-icon>

pages/Setting/ScreenAntreanMasuk.vue

@@ -20,7 +20,8 @@
       <div class="action-bar mb-4">
         <v-spacer></v-spacer>
         <v-btn 
-          color="primary" 
+          color="primary-600"
+          variant="flat"
           @click="openTambahDialog"
           elevation="0"
           class="action-btn"
@@ -66,8 +67,9 @@
           <template v-slot:item.layarInformasi="{ item }">
             <v-btn
               size="small"
+              variant="outlined"
+              color="primary-600"
               @click="openPreviewDialog(item)"
-              variant="flat"
               class="btn-preview mr-2"
             >
               <v-icon size="16" left>mdi-eye</v-icon>
@@ -78,8 +80,9 @@
           <template v-slot:item.actions="{ item }">
             <v-btn
               size="small"
-              @click="openEditDialog(item)"
               variant="flat"
+              color="warning-600"
+              @click="openEditDialog(item)"
               class="btn-edit mr-2"
             >
               <v-icon size="16" left>mdi-cog</v-icon>
@@ -87,8 +90,9 @@
             </v-btn>
             <v-btn
               size="small"
+              variant="flat"
+              color="error-600"
               @click="handleDelete(item)"
-              variant="outlined"
               class="btn-delete"
             >
               <v-icon size="16" left>mdi-delete</v-icon>