Web-Antrean/composables/useQueue.js

// composables/useQueue.js
import { ref, computed } from 'vue';
import { useQueueStore } from '../stores/queueStore';

export const useQueue = (adminType = 'loket') => {
  const queueStore = useQueueStore();
  
  // Local state
  const snackbar = ref(false);
  const snackbarText = ref('');
  const snackbarColor = ref('success');

  // Dialog states
  const showKlinikDialog = ref(false);
  const showPenunjangDialog = ref(false);
  const showChangeKlinikDialog = ref(false);
  const klinikSearch = ref('');
  const penunjangSearch = ref('');
  const changeKlinikSearch = ref('');
  const selectedPatientForPenunjang = ref(null);

  // Computed from store - filtered by stage
  const currentProcessingPatient = queueStore.getCurrentProcessing(adminType);
  
  // Get patients based on admin type stage - ISOLATED PER ADMIN
  const stagePatients = computed(() => {
    return queueStore.getPatientsByStage(adminType).value;
  });

  // Tabel "Di Loket" - hanya untuk stage admin ini
  const diLoketPatients = computed(() => stagePatients.value.diLoket);
  
  // Tabel "Terlambat" - hanya untuk stage admin ini
  const terlambatPatients = computed(() => stagePatients.value.terlambat);
  
  // Tabel "Pending" - hanya untuk stage admin ini
  const pendingPatients = computed(() => stagePatients.value.pending);
  
  // Pasien waiting - hanya untuk stage admin ini
  const waitingPatients = computed(() => stagePatients.value.waiting);
  
  const nextPatient = computed(() => {
    return waitingPatients.value[0] || null;
  });

  // Total pasien hanya untuk stage admin ini
  const totalPasien = computed(() => 
    queueStore.getTotalPasienByStage(adminType).value
  );
  
  const quotaUsed = computed(() => queueStore.quotaUsed);

  // Filtered lists
  const filteredKliniks = computed(() => {
    if (!klinikSearch.value) return queueStore.kliniks;
    return queueStore.kliniks.filter((k) =>
      k.name.toLowerCase().includes(klinikSearch.value.toLowerCase())
    );
  });

  const filteredPenunjangs = computed(() => {
    if (!penunjangSearch.value) return queueStore.penunjangs;
    return queueStore.penunjangs.filter((p) =>
      p.name.toLowerCase().includes(penunjangSearch.value.toLowerCase())
    );
  });

  const filteredChangeKliniks = computed(() => {
    if (!changeKlinikSearch.value) return queueStore.kliniks;
    return queueStore.kliniks.filter((k) =>
      k.name.toLowerCase().includes(changeKlinikSearch.value.toLowerCase())
    );
  });

  // Methods
  const showSnackbar = (text, color = 'success') => {
    snackbarText.value = text;
    snackbarColor.value = color;
    snackbar.value = true;
  };

  const callNext = () => {
    const result = queueStore.callNext(adminType);
    showSnackbar(result.message, result.success ? 'success' : 'warning');
  };

  const callMultiplePatients = (count) => {
    const result = queueStore.callMultiplePatients(count, adminType);
    showSnackbar(result.message, result.success ? 'success' : 'warning');
  };

  const processPatient = (patient, action) => {
    const result = queueStore.processPatient(patient, action, adminType);
    
    let color = 'success';
    if (action === 'terlambat') color = 'warning';
    else if (action === 'pending') color = 'info';
    
    showSnackbar(result.message, color);
  };

  const selectKlinik = (klinik) => {
    const result = queueStore.createAntreanKlinik(klinik, adminType);
    showSnackbar(result.message, 'success');
    showKlinikDialog.value = false;
  };

  const selectPenunjang = (penunjang) => {
    const result = queueStore.createAntreanPenunjang(
      penunjang,
      selectedPatientForPenunjang.value,
      adminType
    );
    showSnackbar(result.message, 'success');
    showPenunjangDialog.value = false;
    selectedPatientForPenunjang.value = null;
  };

  const openPenunjangDialog = (patient = null) => {
    selectedPatientForPenunjang.value = patient;
    showPenunjangDialog.value = true;
  };

  const changeKlinik = (klinik) => {
    if (currentProcessingPatient.value) {
      const result = queueStore.changeKlinik(
        currentProcessingPatient.value,
        klinik,
        adminType
      );
      showSnackbar(result.message, result.success ? 'success' : 'error');
      showChangeKlinikDialog.value = false;
    }
  };

  const getRowClass = (item) => {
    if (item.status === 'current') {
      return 'text-success font-weight-bold';
    }
    return '';
  };

  return {
    // State
    snackbar,
    snackbarText,
    snackbarColor,
    showKlinikDialog,
    showPenunjangDialog,
    showChangeKlinikDialog,
    klinikSearch,
    penunjangSearch,
    changeKlinikSearch,
    selectedPatientForPenunjang,
    
    // Computed
    currentProcessingPatient,
    diLoketPatients,
    terlambatPatients,
    pendingPatients,
    waitingPatients,
    nextPatient,
    totalPasien,
    quotaUsed,
    filteredKliniks,
    filteredPenunjangs,
    filteredChangeKliniks,
    stagePatients,
    
    // Methods
    showSnackbar,
    callNext,
    callMultiplePatients,
    processPatient,
    selectKlinik,
    selectPenunjang,
    openPenunjangDialog,
    changeKlinik,
    getRowClass,
  };
};