feat: Implement comprehensive patient queue management system with Pinia store, API integration, and dedicated admin counter page.

composables/useQueue.js

@@ -135,7 +135,7 @@ export const useQueue = (adminType = "loket", specificId = null) => {
 
   // Filtered lists
   const filteredKliniks = computed(() => {
-    let result = queueStore.kliniks;
+    let result = (queueStore.kliniks.value || queueStore.kliniks || []).filter(k => k.jenisLayanan === 'Reguler');
     if (klinikSearch.value) {
       result = result.filter((k) =>
         k.name.toLowerCase().includes(klinikSearch.value.toLowerCase())
@@ -157,7 +157,7 @@ export const useQueue = (adminType = "loket", specificId = null) => {
   });
 
   const filteredChangeKliniks = computed(() => {
-    let result = queueStore.kliniks;
+    let result = (queueStore.kliniks.value || queueStore.kliniks || []).filter(k => k.jenisLayanan === 'Reguler');
     if (changeKlinikSearch.value) {
       result = result.filter((k) =>
         k.name.toLowerCase().includes(changeKlinikSearch.value.toLowerCase())
@@ -278,18 +278,21 @@ export const useQueue = (adminType = "loket", specificId = null) => {
     if (!patient) {
       showSnackbar("Tidak ada pasien yang sedang diproses", "error");
       showChangeKlinikDialog.value = false;
-      return;
+      return { success: false };
     }
     
     const result = queueStore.changeKlinik(
       patient,
       klinik,
-      adminType
+      adminType,
+      idValue.value
     );
     showSnackbar(result.message, result.success ? "success" : "error");
     showChangeKlinikDialog.value = false;
+    return result;
   };
 
+
   const processNextQueue = () => {
     const result = queueStore.processNextQueue(adminType, idValue.value);
     showSnackbar(result.message, result.success ? "success" : "warning");

pages/AdminLoket/[id].vue

@@ -368,10 +368,20 @@ const {
   selectKlinik,
   selectPenunjang,
   openPenunjangDialog,
-  changeKlinik,
+  changeKlinik: originalChangeKlinik,
   processNextQueue,
 } = useQueue("loket", loketId);
 
+// Handle change klinik with broadcast
+const changeKlinik = async (klinik) => {
+  const result = await originalChangeKlinik(klinik);
+  if (result.success) {
+    // Global broadcast to update all displays and other admins
+    broadcastUpdate();
+  }
+};
+
+
 // Generate a unique session suffix (random ID)
 const uniqueSessionSuffix = ref(process.client ? Math.random().toString(36).substring(2, 8) : '')
 

stores/queueStore.js

@@ -2709,23 +2709,73 @@ export const useQueueStore = defineStore('queue', () => {
     const patientIndex = allPatients.value.findIndex(p => p.no === patient.no);
     if (patientIndex === -1) return { success: false, message: "Pasien tidak ditemukan" };
 
-    allPatients.value[patientIndex] = { 
-      ...allPatients.value[patientIndex], 
+    const oldPatient = allPatients.value[patientIndex];
+    const oldLoketId = oldPatient.loketId;
+    
+    // Find appropriate loket for the new clinic from loketStore
+    let targetLoketId = oldLoketId;
+    let targetLoketName = oldPatient.loket;
+    
+    if (newKlinik.kode) {
+      const allLokets = loketStore.lokets || [];
+      const foundLoket = allLokets.find(l => 
+        l.pelayanan && Array.isArray(l.pelayanan) && l.pelayanan.includes(newKlinik.kode)
+      );
+      
+      if (foundLoket) {
+        targetLoketId = foundLoket.id;
+        targetLoketName = foundLoket.namaLoket;
+        console.log(`📡 [queueStore] changeKlinik: Re-assigning to Loket ${targetLoketId} (${targetLoketName})`);
+      }
+    }
+
+    // Determine if we need to reset status from 'diproses' to 'di-loket' if moved to different loket
+    const isMovedToDifferentLoket = String(oldLoketId) !== String(targetLoketId);
+    let newStatus = oldPatient.status;
+    
+    // Check if patient is currently being processed at the old loket
+    const oldKey = specificId ? `${adminType}-${specificId}` : adminType;
+    const isCurrentlyProcessingAtOld = currentProcessingPatient.value[oldKey]?.no === patient.no;
+
+    if (isMovedToDifferentLoket && isCurrentlyProcessingAtOld) {
+      // If moved, they should be back to waiting list ('di-loket') at the new target
+      newStatus = 'di-loket';
+      // Clear from old processing slot
+      currentProcessingPatient.value[oldKey] = null;
+      console.log(`📡 [queueStore] changeKlinik: Cleared processing at ${oldKey} and set status to 'di-loket'`);
+    }
+
+    // Update the patient in allPatients
+    const updatedPatient = { 
+      ...oldPatient, 
       klinik: newKlinik.name, 
-      kodeKlinik: newKlinik.kode 
+      kodeKlinik: newKlinik.kode,
+      loketId: targetLoketId,
+      loket: targetLoketName,
+      status: newStatus
     };
     
-    const key = specificId ? `${adminType}-${specificId}` : adminType;
-    if (currentProcessingPatient.value[key]?.no === patient.no) {
-      currentProcessingPatient.value[key] = { 
-        ...currentProcessingPatient.value[key], 
-        klinik: newKlinik.name, 
-        kodeKlinik: newKlinik.kode 
-      };
+    allPatients.value[patientIndex] = updatedPatient;
+    
+    // If they AREN'T moved but were processing, update their clinic info in the current slot
+    if (!isMovedToDifferentLoket && isCurrentlyProcessingAtOld) {
+      currentProcessingPatient.value[oldKey] = updatedPatient;
     }
-    return { success: true, message: `Klinik berhasil diubah ke ${newKlinik.name}` };
+
+    let successMessage = `Klinik berhasil diubah ke ${newKlinik.name}`;
+    if (isMovedToDifferentLoket) {
+      successMessage += `. Antrean dipindah ke ${targetLoketName}.`;
+    }
+
+    return { 
+      success: true, 
+      message: successMessage,
+      patient: updatedPatient,
+      moved: isMovedToDifferentLoket
+    };
   };
 
+
   const getCurrentProcessing = (adminType, id = null) => {
     const key = id ? `${adminType}-${id}` : adminType;
     return computed(() => currentProcessingPatient.value[key] || null);