From 0c7b33aa70fd313dde46d312c6f7b9fea86ccd02 Mon Sep 17 00:00:00 2001
From: Fanrouver <akbararya34@gmail.com>
Date: Tue, 13 Jan 2026 11:24:01 +0700
Subject: [PATCH] checkin tampilan

---
 pages/CheckInPasien/checkIn.vue | 91 +++++++++++++++++++++++++--------
 1 file changed, 71 insertions(+), 20 deletions(-)

diff --git a/pages/CheckInPasien/checkIn.vue b/pages/CheckInPasien/checkIn.vue
index 68c6ee1..a66ce6a 100644
--- a/pages/CheckInPasien/checkIn.vue
+++ b/pages/CheckInPasien/checkIn.vue
@@ -236,15 +236,15 @@
                             </div>
                             <div class="status-text">
                               <h3 class="status-title">Input Manual</h3>
-                              <p class="status-subtitle">Masukkan nomor antrean atau ID pasien</p>
+                              <p class="status-subtitle">Masukkan nomor Antrean Code atau Barcode Pasien</p>
                             </div>
                           </div>
     
                           <v-form @submit.prevent="checkInManual" ref="manualForm">
                             <v-text-field
                               v-model="manualInput"
-                              label="Nomor Antrean / ID Pasien"
-                              placeholder="Contoh: P12345"
+                              label="Nomor Antrean Code / Barcode Pasien" 
+                              placeholder="Contoh: 26011301220"
                               prepend-inner-icon="mdi-account-card-details"
                               variant="outlined"
                               :color="primaryColor"
@@ -320,7 +320,7 @@
                               >
                                 <v-card-text class="pa-3">
                                   <div class="history-item-content">
-                                    <!-- Top Row: Status & Method (Left) + Queue Number (Right) -->
+                                    <!-- Top Row: Status, Method & Klinik (Left) + Queue Number (Right) -->
                                     <div class="d-flex align-center justify-space-between mb-2">
                                       <div class="d-flex align-center flex-wrap gap-1">
                                         <v-chip
@@ -341,6 +341,17 @@
                                         >
                                           {{ item.method }}
                                         </v-chip>
+                                        <v-chip
+                                          v-if="item.klinik && item.klinik !== 'N/A'"
+                                          size="x-small"
+                                          color="info"
+                                          variant="tonal"
+                                          density="compact"
+                                          class="history-klinik-chip"
+                                        >
+                                          <v-icon start size="12">mdi-hospital-building</v-icon>
+                                          {{ item.klinik }}
+                                        </v-chip>
                                       </div>
                                       <!-- Queue Number (Right) -->
                                       <div class="history-queue-number-right">
@@ -875,7 +886,7 @@
               <v-col cols="12" md="6">
                 <v-text-field
                   v-model="historySearch"
-                  label="Cari ID Pasien atau Nomor Antrean"
+                  label="Cari ID Pasien, Nomor Antrean, atau Klinik"
                   prepend-inner-icon="mdi-magnify"
                   variant="outlined"
                   density="comfortable"
@@ -952,7 +963,7 @@
                         {{ item.klinikQueueNumber || item.queueNumber || 'N/A' }}
                       </p>
                       
-                      <!-- Patient ID & Pembayaran Info Grid -->
+                      <!-- Patient ID, Klinik & Pembayaran Info Grid -->
                       <div class="d-flex flex-wrap gap-2 mb-2">
                         <v-chip
                           v-if="item.patientId"
@@ -964,6 +975,16 @@
                           <v-icon start size="16">mdi-account-circle</v-icon>
                           {{ item.patientId }}
                         </v-chip>
+                        <v-chip
+                          v-if="item.klinik && item.klinik !== 'N/A'"
+                          size="small"
+                          color="info"
+                          variant="tonal"
+                          density="comfortable"
+                        >
+                          <v-icon start size="16">mdi-hospital-building</v-icon>
+                          {{ item.klinik }}
+                        </v-chip>
                         <v-chip
                           v-if="item.pembayaran"
                           size="small"
@@ -1261,6 +1282,8 @@ const checkInHistory = ref<Array<{
   checkInTime: string;
   checkInDate: string;
   method: string;
+  klinik?: string;
+  kodeKlinik?: string;
 }>>([]);
 
 // QR History Dialog
@@ -1903,7 +1926,9 @@ const handleQRScanSuccess = (decodedText: string) => {
         status: 'failed',
         checkInTime: new Date().toISOString(),
         checkInDate: new Date().toISOString(),
-        method: 'QR Scan'
+        method: 'QR Scan',
+        klinik: 'N/A',
+        kodeKlinik: null
       });
     });
   } catch (error) {
@@ -1919,7 +1944,9 @@ const handleQRScanSuccess = (decodedText: string) => {
       status: 'failed',
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'QR Scan'
+      method: 'QR Scan',
+      klinik: 'N/A',
+      kodeKlinik: null
     });
   }
   
@@ -2296,7 +2323,9 @@ const onDetect = async (decodedText: string) => {
         status: 'failed',
         checkInTime: new Date().toISOString(),
         checkInDate: new Date().toISOString(),
-        method: 'QR Scan'
+        method: 'QR Scan',
+        klinik: foundPatient.klinik || 'N/A',
+        kodeKlinik: foundPatient.kodeKlinik || null
       });
       
       const errorMsg = `❌ Pasien tidak ditemukan di sistem setelah refresh data.`;
@@ -2329,7 +2358,9 @@ const onDetect = async (decodedText: string) => {
         status: 'failed',
         checkInTime: new Date().toISOString(),
         checkInDate: new Date().toISOString(),
-        method: 'QR Scan'
+        method: 'QR Scan',
+        klinik: freshPatient.klinik || 'N/A',
+        kodeKlinik: freshPatient.kodeKlinik || null
       });
       
       lastCheckInResult.value = {
@@ -2357,7 +2388,9 @@ const onDetect = async (decodedText: string) => {
         status: 'NOT_ALLOWED',
         checkInTime: new Date().toISOString(),
         checkInDate: new Date().toISOString(),
-        method: 'QR Scan'
+        method: 'QR Scan',
+        klinik: freshPatient.klinik || 'N/A',
+        kodeKlinik: freshPatient.kodeKlinik || null
       });
       
       lastCheckInResult.value = {
@@ -2399,7 +2432,9 @@ const onDetect = async (decodedText: string) => {
         status: 'success',
         checkInTime: new Date().toISOString(),
         checkInDate: new Date().toISOString(),
-        method: 'QR Scan'
+        method: 'QR Scan',
+        klinik: checkInResult.patient.klinik || 'N/A',
+        kodeKlinik: checkInResult.patient.kodeKlinik || null
       });
       
       saveSuccessfulScan(decodedText);
@@ -2418,7 +2453,9 @@ const onDetect = async (decodedText: string) => {
         status: 'failed',
         checkInTime: new Date().toISOString(),
         checkInDate: new Date().toISOString(),
-        method: 'QR Scan'
+        method: 'QR Scan',
+        klinik: foundPatient.klinik || 'N/A',
+        kodeKlinik: foundPatient.kodeKlinik || null
       });
       
       lastCheckInResult.value = {
@@ -2551,7 +2588,9 @@ const checkInManual = async () => {
       status: 'failed',
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual'
+      method: 'Manual',
+      klinik: 'N/A',
+      kodeKlinik: null
     });
     
     const errorMsg = `❌ Tiket Belum Di-generate!\n\nInput: ${inputValue}\n\nTiket belum terdaftar di sistem. Pastikan tiket sudah di-generate terlebih dahulu.`;
@@ -2589,7 +2628,9 @@ const checkInManual = async () => {
       status: 'failed',
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual'
+      method: 'Manual',
+      klinik: foundPatient.klinik || 'N/A',
+      kodeKlinik: foundPatient.kodeKlinik || null
     });
     
     const errorMsg = `❌ Pasien tidak ditemukan di sistem setelah refresh data.`;
@@ -2622,7 +2663,9 @@ const checkInManual = async () => {
       status: 'failed',
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual'
+      method: 'Manual',
+      klinik: freshPatient.klinik || 'N/A',
+      kodeKlinik: freshPatient.kodeKlinik || null
     });
     
     lastCheckInResult.value = {
@@ -2650,7 +2693,9 @@ const checkInManual = async () => {
       status: 'NOT_ALLOWED',
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual'
+      method: 'Manual',
+      klinik: freshPatient.klinik || 'N/A',
+      kodeKlinik: freshPatient.kodeKlinik || null
     });
     
     lastCheckInResult.value = {
@@ -2692,7 +2737,9 @@ const checkInManual = async () => {
       status: 'success',
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual'
+      method: 'Manual',
+      klinik: checkInResult.patient.klinik || 'N/A',
+      kodeKlinik: checkInResult.patient.kodeKlinik || null
     });
     
     const successMsg = `✅ Check-in Berhasil!\n\nPasien ${successKlinikQueueNumber} berhasil melakukan check-in dan status berubah menjadi di loket.`;
@@ -2715,7 +2762,9 @@ const checkInManual = async () => {
       status: 'failed',
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual'
+      method: 'Manual',
+      klinik: foundPatient.klinik || 'N/A',
+      kodeKlinik: foundPatient.kodeKlinik || null
     });
     
     lastCheckInResult.value = {
@@ -2935,6 +2984,7 @@ const saveToHistory = (item: {
   checkInDate: string;
   method: string;
   kodeKlinik?: string;
+  klinik?: string;
 }) => {
   // JANGAN generate nomor antrean baru - selalu gunakan nomor dari pasien yang ditemukan
   // Jika queueNumber tidak ada, gunakan klinikQueueNumber atau patientId sebagai fallback
@@ -3119,7 +3169,8 @@ const filteredHistory = computed(() => {
       item.patientId.toLowerCase().includes(search) ||
       (item.queueNumber && item.queueNumber.toLowerCase().includes(search)) ||
       (item.klinikQueueNumber && item.klinikQueueNumber.toLowerCase().includes(search)) ||
-      (item.method && item.method.toLowerCase().includes(search))
+      (item.method && item.method.toLowerCase().includes(search)) ||
+      (item.klinik && item.klinik.toLowerCase().includes(search))
     );
   }