update flow pasien, store & preview screen, source klinik, api dokter

components/features/queue/CurrentPatientCard.vue

@@ -32,7 +32,24 @@
       
       <div v-else class="empty-state">
         <v-icon size="48" color="grey-lighten-2">mdi-account-off-outline</v-icon>
-        <div class="empty-text">Tidak ada pasien yang diproses</div>
+        <div class="empty-text mb-4">Tidak ada pasien yang diproses</div>
+        <v-btn
+          block
+          class="py-6 text-white"
+          color="primary-600"
+          size="large"
+          :disabled="!hasNextQueue"
+          @click="$emit('process-next')"
+        >
+          <v-icon start>mdi-play-circle</v-icon>
+          Proses Antrian Berikutnya
+        </v-btn>
+        <div v-if="nextQueueInfo" class="next-queue-info mt-3">
+          <div class="info-text">{{ nextQueueInfo }}</div>
+        </div>
+        <div v-else-if="!hasNextQueue" class="no-next-queue mt-3">
+          <div class="info-text">Tidak ada antrian di loket</div>
+        </div>
       </div>
     </v-card-text>
   </v-card>
@@ -52,10 +69,18 @@ defineProps({
   changeButtonText: {
     type: String,
     default: 'Ubah Klinik'
+  },
+  hasNextQueue: {
+    type: Boolean,
+    default: false
+  },
+  nextQueueInfo: {
+    type: String,
+    default: null
   }
 });
 
-defineEmits(['action', 'change-klinik']);
+defineEmits(['action', 'change-klinik', 'process-next']);
 </script>
 
 <style scoped lang="scss">
@@ -121,6 +146,20 @@ defineEmits(['action', 'change-klinik']);
   margin-top: 8px;
 }
 
+.next-queue-info,
+.no-next-queue {
+  text-align: center;
+  padding: 8px;
+  background: var(--color-neutral-200);
+  border-radius: 8px;
+}
+
+.info-text {
+  font-size: 12px;
+  color: var(--color-neutral-700);
+  font-weight: 600;
+}
+
 @media (max-width: 960px) {
   .action-grid {
     grid-template-columns: 1fr;

components/features/queue/PatientCard.vue

@@ -100,6 +100,7 @@ const handleCardClick = () => {
 const getStatusColor = (status) => {
   const colors = {
     diloket: "var(--color-secondary-600)",
+    diproses: "var(--color-primary-600)",
     terlambat: "var(--color-primary-600)",
     pending: "var(--color-danger-600)"
   };
@@ -109,6 +110,7 @@ const getStatusColor = (status) => {
 const getStatusLabel = (status) => {
   const labels = {
     diloket: "Di Loket",
+    diproses: "Diproses",
     terlambat: "Terlambat",
     pending: "Pending"
   };

components/features/queue/QueueActionsCard.vue

@@ -29,7 +29,7 @@
           color="success-600" 
           variant="outlined" 
           @click="$emit('call', 1)" 
-          :disabled="!hasNext"
+          
         >
           1
         </v-btn>

components/features/queue/TabelPatientData.vue

@@ -202,6 +202,10 @@ const props = defineProps({
     type: Number,
     default: 0
   },
+  diprosesCount: {
+    type: Number,
+    default: 0
+  },
   terlambatCount: {
     type: Number,
     default: 0
@@ -210,6 +214,10 @@ const props = defineProps({
     type: Number,
     default: 0
   },
+  showDiproses: {
+    type: Boolean,
+    default: true
+  },
   itemsPerPage: {
     type: Number,
     default: 9
@@ -219,6 +227,7 @@ const props = defineProps({
     default: () => ({
       all: 'Semua',
       diloket: 'Di Loket',
+      diproses: 'Diproses',
       terlambat: 'Terlambat',
       pending: 'Pending'
     })
@@ -249,12 +258,30 @@ const searchModel = computed({
   }
 });
 
-const statusOptions = computed(() => [
-  { value: 'all', label: props.statusLabels.all, count: props.items.length },
-  { value: 'diloket', label: props.statusLabels.diloket, count: props.diLoketCount },
-  { value: 'terlambat', label: props.statusLabels.terlambat, count: props.terlambatCount },
-  { value: 'pending', label: props.statusLabels.pending, count: props.pendingCount }
-]);
+const statusOptions = computed(() => {
+  const baseOptions = [
+    { value: 'all', label: props.statusLabels.all, count: props.items.length },
+    { value: 'diloket', label: props.statusLabels.diloket, count: props.diLoketCount }
+  ];
+
+  // Tampilkan "Diproses" hanya jika:
+  // - label-nya didefinisikan, DAN
+  // - komponen mengizinkan (showDiproses = true)
+  if (props.showDiproses && props.statusLabels.diproses) {
+    baseOptions.push({
+      value: 'diproses',
+      label: props.statusLabels.diproses,
+      count: props.diprosesCount
+    });
+  }
+
+  baseOptions.push(
+    { value: 'terlambat', label: props.statusLabels.terlambat, count: props.terlambatCount },
+    { value: 'pending', label: props.statusLabels.pending, count: props.pendingCount }
+  );
+
+  return baseOptions;
+});
 
 // Generate filter options from items
 const klinikOptions = computed(() => {