update fetch api

components/features/queue/PatientCard.vue

@@ -107,7 +107,7 @@ const props = defineProps({
 const emit = defineEmits(['action']);
 
 const isClickable = computed(() => {
-  return props.patient.status === 'diloket' || props.patient.status === 'pending';
+  return props.patient.status === 'di-loket' || props.patient.status === 'pending';
 });
 
 const isFastTrack = computed(() => {
@@ -177,7 +177,7 @@ const handleCardClick = () => {
 
 const getStatusColor = (status) => {
   const colors = {
-    diloket: "var(--color-secondary-600)",
+    'di-loket': "var(--color-secondary-600)",
     diproses: "var(--color-primary-600)",
     terlambat: "var(--color-primary-600)",
     pending: "var(--color-danger-600)"
@@ -187,7 +187,7 @@ const getStatusColor = (status) => {
 
 const getStatusLabel = (status) => {
   const labels = {
-    diloket: "Di Loket",
+    'di-loket': "Di Loket",
     diproses: "Diproses",
     terlambat: "Terlambat",
     pending: "Pending"

components/features/queue/TabelPatientData.vue

@@ -275,7 +275,7 @@ const searchModel = computed({
 const statusOptions = computed(() => {
   const baseOptions = [
     { value: 'all', label: props.statusLabels.all, count: props.items.length },
-    { value: 'diloket', label: props.statusLabels.diloket, count: props.diLoketCount }
+    { value: 'di-loket', label: props.statusLabels.diloket, count: props.diLoketCount }
   ];
 
   // Tampilkan "Diproses" hanya jika:

pages/AdminLoket/[id].vue

@@ -425,8 +425,6 @@ const allPatientsForStage = computed(() => {
   const currentPatientNo = currentProcessingPatient.value?.no;
   const targetLoketId = loketId.value;
   const currentLoket = loketStore.getLoketById(parseInt(targetLoketId));
-  console.log('🔍 [AdminLoket] currentLoket:', currentLoket);
-  console.log('🔍 [AdminLoket] targetLoketId:', targetLoketId);
   
   // Check if loket is EKSEKUTIF or REGULER
   const isLoketEksekutif = currentLoket?.tipeloket === 'EKSEKUTIF' || 
@@ -438,12 +436,15 @@ const allPatientsForStage = computed(() => {
   if (isLoketEksekutif) {
     // For EKSEKUTIF loket, use seed data (filter from allPatients)
     // IMPORTANT: Do NOT include menungguPatients - they are only called via QueueActionsCard
-    console.log('📋 [AdminLoket] Using seed data for EKSEKUTIF loket');
     basePatients = diLoketPatients.value.concat(waitingPatients.value, terlambatPatients.value, pendingPatients.value);
   } else {
-    // For REGULER loket, use API data
-    console.log('🌐 [AdminLoket] Using API data for REGULER loket');
-    const apiPatients = queueStore.apiPatientsPerLoket[targetLoketId] || [];
+    // For REGULER loket, use API data from allPatients (which is reactive)
+    // Filter patients that belong to this loket and are from API
+    const apiPatients = queueStore.allPatients.filter(p => 
+      p.registrationType === 'api' && 
+      p.processStage === 'loket' &&
+      String(p.loketId) === String(targetLoketId)
+    );
     basePatients = apiPatients;
   }
   
@@ -507,7 +508,7 @@ const allPatientsForStage = computed(() => {
       .filter(isPatientForThisLoket)
       .map((p) => ({
         ...p,
-        status: p.no === currentPatientNo ? "diproses" : "diloket",
+        status: p.no === currentPatientNo ? "diproses" : "di-loket",
       }));
     
     const terlambat = (terlambatPatients.value || [])
@@ -553,7 +554,7 @@ const filteredWaitingCount = computed(() => {
 });
 
 const filteredDiLoketCount = computed(() => {
-  return allPatientsForStage.value.filter(p => p.status === 'diloket' || p.status === 'di-loket').length;
+  return allPatientsForStage.value.filter(p => p.status === 'di-loket').length;
 });
 
 const filteredTerlambatCount = computed(() => {
@@ -587,8 +588,12 @@ const filteredMenungguCount = computed(() => {
       return true;
     }).length;
   } else {
-    // For REGULER, count from API data
-    const apiPatients = queueStore.apiPatientsPerLoket[targetLoketId] || [];
+    // For REGULER, count from allPatients (reactive) not apiPatientsPerLoket (snapshot)
+    const apiPatients = queueStore.allPatients.filter(p =>
+      p.registrationType === 'api' &&
+      p.processStage === 'loket' &&
+      String(p.loketId) === String(targetLoketId)
+    );
     return apiPatients.filter(p => p.status === 'menunggu').length;
   }
 });

stores/queueStore.js

@@ -18,6 +18,9 @@ export const useQueueStore = defineStore('queue', () => {
   const apiPatientsPerLoket = ref({});
   const isLoadingPatients = ref(false);
   const apiPatientsError = ref(null);
+  
+  // Throttle mechanism: track last fetch time per loket
+  const lastFetchTime = ref({});
 
   /**
    * Sync patient status to apiPatientsPerLoket for reactivity
@@ -186,6 +189,24 @@ export const useQueueStore = defineStore('queue', () => {
     isLoadingPatients.value = true;
     apiPatientsError.value = null;
 
+    // THROTTLE: Check if we recently fetched (within last 5 seconds)
+    const now = Date.now();
+    const lastFetch = lastFetchTime.value[loketId] || 0;
+    const timeSinceLastFetch = now - lastFetch;
+    
+    if (timeSinceLastFetch < 5000 && apiPatientsPerLoket.value[loketId]) {
+      console.log(`⏭️ [queueStore] Skipping fetch for loket ${loketId} (last fetched ${Math.round(timeSinceLastFetch/1000)}s ago)`);
+      isLoadingPatients.value = false;
+      return {
+        success: true,
+        message: 'Using cached data',
+        data: apiPatientsPerLoket.value[loketId]
+      };
+    }
+    
+    // Update last fetch time
+    lastFetchTime.value[loketId] = now;
+
     // Check for daily reset before fetching
     checkAndResetDaily();