From 3ef6f38f2e72d109a4bf4d4be1707ef103d69b4f Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Wed, 17 Sep 2025 15:40:54 +0700
Subject: [PATCH] update flow final

---
 .vscode/settings.json      |   2 +
 components/Home.vue        | 144 +++++++++++++----------------
 components/QRISPayment.vue |  24 +++--
 pages/SetupIP.vue          |  98 ++++++++++++++++++++
 pages/index.vue            | 181 +++++++++++++++++++++++++++++--------
 payment1.ts                |  37 ++++++++
 stores/payment.ts          | 104 +++++++++++++++++----
 stores/payment1.ts         |  37 --------
 8 files changed, 440 insertions(+), 187 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 pages/SetupIP.vue
 create mode 100644 payment1.ts
 delete mode 100644 stores/payment1.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7a73a41
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/components/Home.vue b/components/Home.vue
index 9346713..47202d4 100644
--- a/components/Home.vue
+++ b/components/Home.vue
@@ -4,29 +4,29 @@
       <div class="logo-group-contact">
         <v-img
           src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of_arms_of_East_Java.svg.png"
-          width="60"
-          height="60"
+          width="50"
+          height="50"
           class="logo-img-contact"
           contain
         />
         <v-img
           src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
-          width="60"
-          height="60"
+          width="50"
+          height="50"
           class="logo-img-contact"
           contain
         />
         <v-img
           src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
-          width="60"
-          height="60"
+          width="50"
+          height="50"
           class="logo-img-contact"
           contain
         />
         <v-img
           src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
-          width="60"
-          height="60"
+          width="50"
+          height="50"
           class="logo-img-contact"
           contain
         />
@@ -49,7 +49,7 @@
           :cycle="false"
           :interval="0"
           class="banner-carousel"
-          height="450"
+          height="300"
           :continuous="false"
         >
           <v-carousel-item
@@ -93,7 +93,7 @@
                     class="thumbnail-img"
                   />
                   <div class="play-button-overlay">
-                    <v-icon color="white" size="64">mdi-play-circle</v-icon>
+                    <v-icon color="white" size="48">mdi-play-circle</v-icon>
                   </div>
                 </div>
               </div>
@@ -110,50 +110,31 @@
           />
         </div>
       </div>
-
-      <!-- <div class="cta-section-contact">
-        <v-btn
-          @click="navigateToQrisPayment"
-          color="#FF9248"
-          class="cta-button"
-          x-large
-        >
-          <span class="button-text">LANJUT KE PEMBAYARAN</span>
-        </v-btn>
-        <v-btn
-          @click="navigateToDebugPage"
-          color="#FF9248"
-          class="cta-button debug-button"
-          x-large
-        >
-          <span class="button-text">DEBUG KE STEP 2</span>
-        </v-btn>
-      </div> -->
     </div>
 
     <div class="orange-background-contact">
       <div class="contact-info-section-contact">
         <div class="contact-item-contact">
           <div class="contact-icon-contact whatsapp-icon">
-            <v-icon color="#25D366" size="28">mdi-whatsapp</v-icon>
+            <v-icon color="#25D366" size="24">mdi-whatsapp</v-icon>
           </div>
           <div class="contact-text-contact">+62 815-5560-6668</div>
         </div>
         <div class="contact-item-contact">
           <div class="contact-icon-contact instagram-icon">
-            <v-icon color="#E1306C" size="28">mdi-instagram</v-icon>
+            <v-icon color="#E1306C" size="24">mdi-instagram</v-icon>
           </div>
           <div class="contact-text-contact">rssasaifulanwar</div>
         </div>
         <div class="contact-item-contact">
           <div class="contact-icon-contact phone-icon">
-            <v-icon color="#FF9248" size="28">mdi-phone</v-icon>
+            <v-icon color="#FF9248" size="24">mdi-phone</v-icon>
           </div>
           <div class="contact-text-contact">0341-362101</div>
         </div>
         <div class="contact-item-contact">
           <div class="contact-icon-contact web-icon">
-            <v-icon color="#2196F3" size="28">mdi-web</v-icon>
+            <v-icon color="#2196F3" size="24">mdi-web</v-icon>
           </div>
           <div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
         </div>
@@ -233,9 +214,8 @@ watch(currentSlide, (newSlide, oldSlide) => {
 </script>
 
 <style scoped>
-
 .contact-page-container {
-  min-height: 100vh;
+  min-height:auto;
   width: 100%;
   background: white;
   display: flex;
@@ -244,29 +224,29 @@ watch(currentSlide, (newSlide, oldSlide) => {
 
 .orange-background-contact {
   width: 100%;
-  height: clamp(120px, 15vh, 200px);
+  height: clamp(80px, 12vh, 180px);
   background: #ff9248;
-  border-top-left-radius: 60px;
-  border-top-right-radius: 60px;
+  border-top-left-radius: 40px;
+  border-top-right-radius: 40px;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-bottom: 20px;
-  margin-top: 2rem;
+  padding-bottom: 10px;
+  margin-top: auto;
 }
 
 .logo-section-contact {
   position: relative;
   z-index: 2;
-  padding: 15px 20px;
+  padding: 8px 12px;
   display: flex;
   justify-content: center;
 }
 
 .logo-group-contact {
   display: flex;
-  gap: 2rem;
+  gap: 1rem;
   align-items: center;
   flex-wrap: wrap;
   justify-content: center;
@@ -274,8 +254,8 @@ watch(currentSlide, (newSlide, oldSlide) => {
 
 .logo-img-contact {
   transition: transform 0.3s ease;
-  width: clamp(40px, 6vw, 60px) !important;
-  height: clamp(40px, 6vw, 60px) !important;
+  width: clamp(20px, 5vw, 50px) !important;
+  height: clamp(20px, 5vw, 50px) !important;
 }
 
 .logo-img-contact:hover {
@@ -290,52 +270,52 @@ watch(currentSlide, (newSlide, oldSlide) => {
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  padding: 10px 20px;
+  padding: 5px 15px;
 }
 
 .title-section-contact {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 8px;
 }
 
 .main-title-contact {
   color: #ff9248;
-  font-size: clamp(2.2rem, 5vw, 3.5rem);
+  font-size: clamp(2rem, 2vw, 1.5rem);
   font-family: "Roboto", sans-serif;
   font-weight: 800;
-  margin-bottom: 12px;
-  line-height: 1.2;
+  margin-bottom: 8px;
+  line-height: 0.8;
 }
 
 .subtitle-contact {
   color: black;
-  font-size: clamp(0.9rem, 2vw, 1.1rem);
+  font-size: clamp(0.8rem, 1.8vw, 1rem);
   font-family: "Roboto", sans-serif;
   font-weight: 500;
   margin: 0;
-  max-width: 600px;
+  max-width: 500px;
 }
 
 .banner-carousel-container {
-  width: 90%;
-  max-width: 900px;
-  margin-bottom: 30px;
+  width: 95%;
+  max-width: 800px;
+  margin-bottom: 20px;
   position: relative;
-  border-radius: 20px;
+  border-radius: 15px;
   overflow: hidden;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
 }
 
 .banner-carousel {
-  border-radius: 20px;
+  border-radius: 15px;
   overflow: hidden;
-  height: 450px;
+  height: clamp(300px, 45vh, 400px);
 }
 
 .carousel-item {
   position: relative;
   width: 100%;
-  height: 450px;
+  height: 350px;
 }
 
 .video-container {
@@ -352,7 +332,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
   width: 100%;
   height: 100%;
   border: none;
-  border-radius: 20px;
+  border-radius: 15px;
 }
 
 .video-thumbnail {
@@ -369,7 +349,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 20px;
+  border-radius: 15px;
 }
 
 .play-button-overlay {
@@ -379,7 +359,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
   transform: translate(-50%, -50%);
   background: rgba(0, 0, 0, 0.7);
   border-radius: 50%;
-  padding: 20px;
+  padding: 15px;
   transition: all 0.3s ease;
 }
 
@@ -395,23 +375,23 @@ watch(currentSlide, (newSlide, oldSlide) => {
   right: 0;
   background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
   color: white;
-  padding: 40px 30px 30px;
+  padding: 30px 20px 20px;
   z-index: 2;
 }
 
 .overlay-content {
-  max-width: 600px;
+  max-width: 500px;
 }
 
 .overlay-title {
-  font-size: clamp(1.4rem, 2vw, 1.8rem);
+  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
   font-weight: 700;
-  margin-bottom: 8px;
+  margin-bottom: 6px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .overlay-description {
-  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
+  font-size: clamp(0.8rem, 1.3vw, 1rem);
   font-weight: 400;
   margin: 0;
   opacity: 0.9;
@@ -420,17 +400,17 @@ watch(currentSlide, (newSlide, oldSlide) => {
 
 .custom-indicators {
   position: absolute;
-  bottom: 15px;
+  bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
-  gap: 12px;
+  gap: 10px;
   z-index: 3;
 }
 
 .indicator-dot {
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.5);
   cursor: pointer;
@@ -448,7 +428,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
 
 .contact-info-section-contact {
   display: flex;
-  gap: 2rem;
+  gap: 1.5rem;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
@@ -459,18 +439,18 @@ watch(currentSlide, (newSlide, oldSlide) => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
 .contact-icon-contact {
-  width: clamp(40px, 8vw, 50px);
-  height: clamp(40px, 8vw, 50px);
-  border-radius: 50%;
+  width: 35px;
+  height: 35px;
+  border-radius: 80%;
   background: white;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
 }
 
@@ -480,7 +460,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
 
 .contact-text-contact {
   color: white;
-  font-size: clamp(12px, 2vw, 14px);
+  font-size: 12px;
   font-family: "Roboto", sans-serif;
   font-weight: 500;
   white-space: nowrap;
@@ -490,13 +470,13 @@ watch(currentSlide, (newSlide, oldSlide) => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
-  margin-top: 20px;
+  gap: 12px;
+  margin-top: 15px;
 }
 
 .cta-button {
   width: 100%;
-  max-width: 300px;
+  max-width: 250px;
   font-weight: 700;
   letter-spacing: 1px;
 }
@@ -510,6 +490,6 @@ watch(currentSlide, (newSlide, oldSlide) => {
 }
 
 :deep(.v-carousel__controls--bottom) {
-  bottom: 50px !important;
+  bottom: 40px !important;
 }
 </style>
\ No newline at end of file
diff --git a/components/QRISPayment.vue b/components/QRISPayment.vue
index cac9414..cae4406 100644
--- a/components/QRISPayment.vue
+++ b/components/QRISPayment.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="payment-step">
-    <v-card-text class="pa-8 text-center">
-      <div class="mb-2">
+    <v-card-text class="pa-0 text-center">
+      <div class="mb-0">
         <v-img
           src="https://iconlogovector.com/uploads/images/2024/03/lg-65ffda68a47ee-QRIS.webp"
-          height="100"
-          class="mx-auto"
+          height="80"
+          class="mb-1"
           contain
         />
       </div>
 
-      <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2>
+      <!-- <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2> -->
 
       <div class="qr-container mb-6">
         <v-card
@@ -24,7 +24,7 @@
       </div>
 
       <div class="payment-details">
-        <v-row dense class="mb-2">
+        <v-row dense class="mb-1">
           <v-col cols="5" class="text-left">
             <strong>NAMA PASIEN:</strong>
           </v-col>
@@ -33,7 +33,7 @@
           </v-col>
         </v-row>
 
-        <v-row dense class="mb-2">
+        <v-row dense class="mb-1">
           <v-col cols="5" class="text-left">
             <strong>NOMINAL:</strong>
           </v-col>
@@ -42,7 +42,7 @@
           </v-col>
         </v-row>
 
-        <v-row dense class="mb-2">
+        <v-row dense class="mb-1">
           <v-col cols="5" class="text-left">
             <strong>NOMOR TAGIHAN:</strong>
           </v-col>
@@ -60,9 +60,9 @@
       </div>
 
       <div class="d-flex gap-4 justify-center">
-        <v-btn color="grey" variant="outlined" @click="paymentStore.prevStep">
+        <!-- <v-btn color="grey" variant="outlined" @click="paymentStore.prevStep">
           Kembali
-        </v-btn>
+        </v-btn> -->
         <v-btn color="primary" variant="flat" @click="paymentStore.nextStep">
           Simulasi Pembayaran
         </v-btn>
@@ -103,6 +103,10 @@ watch(() => paymentStore.qrData, () => {
 </script>
 
 <style scoped>
+.payment-content {
+  padding-top: 40px !important; /* Sesuaikan jarak atas */
+  padding-bottom: 40px !important; /* Sesuaikan jarak bawah */
+}
 .payment-step {
   background: rgb(233, 233, 233);
 }
diff --git a/pages/SetupIP.vue b/pages/SetupIP.vue
new file mode 100644
index 0000000..460cd0c
--- /dev/null
+++ b/pages/SetupIP.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="setup-container">
+    <v-card class="setup-card" elevation="4">
+      <v-card-title class="text-h5 text-center font-weight-bold">
+        Setup Loket Pembayaran
+      </v-card-title>
+      <v-card-text>
+        <div v-if="currentIp" class="mb-4 text-center">
+          <p class="text-subtitle-1 text-grey-darken-1">IP Loket Saat Ini:</p>
+          <p class="text-h5 font-weight-bold">{{ currentIp }}</p>
+          <v-btn
+            color="red"
+            variant="text"
+            size="small"
+            class="mt-2"
+            @click="clearIp"
+          >
+            Hapus IP
+          </v-btn>
+        </div>
+
+        <v-text-field
+          v-model="loketIp"
+          label="Masukkan IP Address Baru"
+          variant="outlined"
+          :rules="[rules.required, rules.ipAddress]"
+          hide-details="auto"
+          class="mt-4"
+        ></v-text-field>
+      </v-card-text>
+      <v-card-actions class="justify-center">
+        <v-btn
+          color="primary"
+          @click="saveIpAddress"
+          :disabled="!isValidIp"
+          variant="flat"
+        >
+          Simpan dan Lanjutkan
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const loketIp = ref('');
+const currentIp = ref(null);
+const router = useRouter();
+
+const rules = {
+  required: value => !!value || 'IP Address wajib diisi.',
+  ipAddress: value => {
+    const pattern = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
+    return pattern.test(value) || 'Format IP Address tidak valid.';
+  }
+};
+
+const isValidIp = computed(() => {
+  return loketIp.value && rules.ipAddress(loketIp.value) === true;
+});
+
+const saveIpAddress = () => {
+  if (isValidIp.value) {
+    localStorage.setItem('loketIp', loketIp.value);
+    console.log('IP Address disimpan:', loketIp.value);
+    router.push('/');
+  }
+};
+
+const clearIp = () => {
+  localStorage.removeItem('loketIp');
+  currentIp.value = null;
+  loketIp.value = '';
+};
+
+onMounted(() => {
+  currentIp.value = localStorage.getItem('loketIp');
+});
+</script>
+
+<style scoped>
+.setup-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #ffd7b5 20%, #ff9248 100%);
+}
+.setup-card {
+  max-width: 400px;
+  width: 100%;
+  padding: 20px;
+  border-radius: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 2b5cfdd..6973155 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,11 @@
               'payment-centered': paymentStore.currentStep !== 1,
             }"
           >
-            <component :is="activeComponent" />
+            <component :is="activeComponent" v-if="hasIpAddress" />
+            <div v-else class="text-center pa-10">
+              <v-progress-circular indeterminate color="primary"></v-progress-circular>
+              <p class="mt-4">Memeriksa konfigurasi...</p>
+            </div>
           </v-card>
         </v-col>
       </v-row>
@@ -24,83 +28,180 @@ import { usePaymentStore } from '~/stores/payment';
 import Home from '~/components/Home.vue';
 import QRISPayment from '~/components/QRISPayment.vue';
 import Success from '~/components/PembayaranSukses.vue';
+import Gagal from '~/components/PembayaranGagal.vue';
+import { onMounted, onUnmounted, ref, computed, watch } from 'vue';
 
 const paymentStore = usePaymentStore();
-const apiURL = 'http://10.10.150.37:8084/api/v1/qris';
+const router = useRouter();
+const localIpAddress = ref(null);
+const pollingInterval = ref(null);
+
+const hasIpAddress = computed(() => !!localIpAddress.value);
+const apiURL = 'http://10.10.150.68:8084/api/v1/qris/allstatus';
 
 const paymentSteps = {
   1: Home,
   2: QRISPayment,
   3: Success,
+  4: Gagal,
 };
 
 const activeComponent = computed(() => {
   return paymentSteps[paymentStore.currentStep] || Home;
 });
 
-const { data: apiData, refresh } = await useFetch(apiURL, {
-  server: false,
-  immediate: false,
-});
+// Watch untuk debugging perubahan step
+watch(() => paymentStore.currentStep, (newStep, oldStep) => {
+  console.log(`Step berubah dari ${oldStep} ke ${newStep}`);
+}, { immediate: true });
 
-watch(apiData, (newData) => {
-  if (newData && newData.data && newData.data.length > 0) {
-    const relevantData = newData.data[0];
-    if (relevantData) {
-      paymentStore.updatePayment({ data: [relevantData] });
-      clearInterval(pollingInterval);
-      console.log('Polling stopped. Data received from API.');
-    }
+const startPolling = () => {
+  if (pollingInterval.value) {
+    clearInterval(pollingInterval.value);
+    console.log('🛑 Stopping previous polling');
   }
-});
 
-let pollingInterval = null;
+  pollingInterval.value = setInterval(async () => {
+    try {
+      console.log(`🔄 POLLING - Step: ${paymentStore.currentStep}`);
+      const response = await $fetch(apiURL);
+      
+      if (response?.data?.length > 0) {
+        
+        if (paymentStore.currentStep === 1) {
+          // Step 1: Find data by IP address (original logic)
+          console.log('🔍 Step 1: Looking for IP:', localIpAddress.value);
+          const relevantData = response.data.find(item => item.ip === localIpAddress.value);
+          
+          if (relevantData) {
+            console.log('✅ Data found for IP:', relevantData);
+            paymentStore.updatePayment({ data: [relevantData] });
+            paymentStore.currentStep = 2;
+          } else {
+            console.log('⏳ No data found for IP:', localIpAddress.value);
+          }
+        } 
+        
+        else if (paymentStore.currentStep === 2) {
+          // Step 2: Monitor payment status for THE SAME PATIENT
+          console.log('🔍 Step 2: Monitoring payment status...');
+          
+          // Get patient identifiers from store (data yang sudah di-load di step 1)
+          const currentPatientBill = paymentStore.qrData.display_nobill;
+          const currentPatientName = paymentStore.qrData.display_name;
+          
+          console.log('👤 Current patient:', {
+            name: currentPatientName,
+            bill: currentPatientBill
+          });
+          
+          if (!currentPatientBill || !currentPatientName) {
+            console.warn('⚠️ Patient data incomplete in store');
+            return;
+          }
+          
+          // Find ALL records for this same patient (same name + bill)
+          const samePatientRecords = response.data.filter(item => {
+            const sameBill = item.display_nobill === currentPatientBill;
+            const sameName = item.display_name === currentPatientName;
+            
+            console.log(`🔄 Checking record: ${item.display_name} (${item.display_nobill}) status=${item.status}`);
+            console.log(`   → Same patient? ${sameBill && sameName}`);
+            
+            return sameBill && sameName;
+          });
+          
+          console.log(`📊 Found ${samePatientRecords.length} records for same patient:`, 
+            samePatientRecords.map(r => `status: ${r.status}`));
+          
+          // Now look for final status (success or fail) among same patient records
+          const successRecord = samePatientRecords.find(record => record.status === "2");
+          const failRecord = samePatientRecords.find(record => record.status === "0");
+          
+          if (successRecord) {
+            console.log('🎉 SUCCESS STATUS FOUND!', successRecord);
+            paymentStore.updatePayment({ data: [successRecord] });
+            paymentStore.currentStep = 3;
+            clearInterval(pollingInterval.value);
+            
+            // Auto return to home after 5 seconds
+            setTimeout(() => {
+              console.log('🏠 Auto return to home');
+              paymentStore.reset();
+              startPolling();
+            }, 10000);
+            
+          } else if (failRecord) {
+            console.log('❌ FAIL STATUS FOUND!', failRecord);
+            paymentStore.updatePayment({ data: [failRecord] });
+            paymentStore.currentStep = 4;
+            clearInterval(pollingInterval.value);
+            
+            // Auto return to home after 5 seconds
+            setTimeout(() => {
+              console.log('🏠 Auto return to home');
+              paymentStore.reset();
+              startPolling();
+            }, 10000);
+            
+          } else {
+            console.log('⏳ Still waiting for final status...');
+            console.log('Current statuses for this patient:', 
+              samePatientRecords.map(r => r.status));
+          }
+        }
+      } else {
+        console.log('📭 No data in API response');
+      }
+    } catch (error) {
+      console.error("❌ Polling error:", error);
+    }
+  }, 10000);
+  
+  console.log(`🚀 Polling started - IP-based patient detection`);
+};
+
+const checkAndRedirect = () => {
+  const savedIp = localStorage.getItem('loketIp');
+  if (!savedIp) {
+    console.warn('IP Address belum diatur. Mengarahkan ke halaman setup.');
+    router.push('/setup-ip');
+  } else {
+    localIpAddress.value = savedIp;
+    console.log('IP Address ditemukan:', savedIp);
+    startPolling();
+  }
+};
 
 onMounted(() => {
-  if (paymentStore.currentStep === 1) {
-    pollingInterval = setInterval(() => {
-      refresh();
-    }, 500000);
-  }
+  console.log('Component mounted, step saat ini:', paymentStore.currentStep);
+  checkAndRedirect();
 });
 
 onUnmounted(() => {
-  if (pollingInterval) {
-    clearInterval(pollingInterval);
-    console.log('Polling stopped on unmount.');
-  }
-});
-
-watch(() => paymentStore.currentStep, (newStep, oldStep) => {
-  if (newStep === 1 && oldStep !== 1) {
-    pollingInterval = setInterval(() => {
-      refresh();
-    }, 5000);
-  } else if (newStep !== 1 && pollingInterval) {
-    clearInterval(pollingInterval);
+  if (pollingInterval.value) {
+    clearInterval(pollingInterval.value);
+    console.log('Polling dihentikan saat unmount.');
   }
 });
 </script>
 
 <style scoped>
 .medical-payment-app {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #ffd7b5 20%, #ff9248 100%);
+  background: linear-gradient(135deg, #ff9248 20%, #ff9248 100%);
 }
-
 .contact-fullscreen {
-  height: 100vh !important;
   max-width: none !important;
   border-radius: 0 !important;
 }
 .payment-centered {
   max-width: 500px !important;
   margin-top: 2rem !important;
+  margin-bottom: 2rem !important;
   border-radius: 16px !important;
 }
-
 .payment-card {
-  background: white;
+  background: rgb(224, 224, 224);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
 }
 </style>
\ No newline at end of file
diff --git a/payment1.ts b/payment1.ts
new file mode 100644
index 0000000..9633514
--- /dev/null
+++ b/payment1.ts
@@ -0,0 +1,37 @@
+// // src/stores/payment.js
+// import { defineStore } from 'pinia';
+
+// export const usePaymentStore = defineStore('payment', {
+//   state: () => ({
+//     currentStep: 1,
+//     patientInfo: {
+//       name: '',
+//       amount: '',
+//       expiry: '',
+//     },
+//     paymentData: null, // Tambahkan state ini untuk menyimpan data dari backend
+//   }),
+//   actions: {
+//     nextStep() {
+//       this.currentStep++;
+//     },
+//     prevStep() {
+//       this.currentStep--;
+//     },
+//     reset() {
+//       this.currentStep = 1;
+//       this.patientInfo = {};
+//       this.paymentData = null; // Reset data pembayaran
+//     },
+//     // Tambahkan action baru untuk menerima data dari WebSocket
+//     updatePayment(data: { patientName: any; amount: any; expiryDate: any; } | null) {
+//       this.paymentData = data;
+//       this.patientInfo = {
+//         name: data.patientName,
+//         amount: data.amount,
+//         expiry: data.expiryDate,
+//       };
+//       this.currentStep = 2; // Pindah ke step 2 secara otomatis
+//     },
+//   },
+// });
\ No newline at end of file
diff --git a/stores/payment.ts b/stores/payment.ts
index c96c5d0..746ae20 100644
--- a/stores/payment.ts
+++ b/stores/payment.ts
@@ -9,19 +9,32 @@ export const usePaymentStore = defineStore('payment', {
       amount: '',
       expiry: '',
     },
-    // Berikan default object instead of null
     qrData: {
       qrvalue: null,
       display_nobill: null,
       display_name: null,
-      display_amount: null
+      display_amount: null,
+      status: null, // Tambahkan status untuk tracking
+      ip: null, // Tambahkan IP untuk reference
     },
   }),
   
   getters: {
-    // Tambahkan getter untuk safe access
     hasQrData: (state) => state.qrData && state.qrData.qrvalue,
-    safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com'
+    safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com',
+    
+    // Getter untuk cek apakah data siap untuk polling status
+    isReadyForStatusCheck: (state) => {
+      return state.qrData.display_nobill && state.qrData.display_name;
+    },
+    
+    // Getter untuk informasi debug
+    debugInfo: (state) => ({
+      step: state.currentStep,
+      hasIdentifiers: !!(state.qrData.display_nobill && state.qrData.display_name),
+      qrData: state.qrData,
+      patientInfo: state.patientInfo,
+    })
   },
   
   actions: {
@@ -31,22 +44,32 @@ export const usePaymentStore = defineStore('payment', {
     prevStep() {
       this.currentStep--;
     },
+    
+    setStep(step) {
+      console.log(`Setting step from ${this.currentStep} to ${step}`);
+      this.currentStep = step;
+    },
+    
     reset() {
+      console.log('Resetting payment store');
       this.currentStep = 1;
       this.patientInfo = {
         name: '',
         amount: '',
         expiry: '',
       };
-      // Reset ke default object, bukan null
       this.qrData = {
         qrvalue: null,
         display_nobill: null,
         display_name: null,
-        display_amount: null
+        display_amount: null,
+        status: null,
+        ip: null,
       };
     },
+    
     updatePayment(apiResponse) {
+      console.log("=== UPDATE PAYMENT ===");
       console.log("API Response:", apiResponse);
       
       // Validasi response
@@ -58,27 +81,72 @@ export const usePaymentStore = defineStore('payment', {
       const apiData = apiResponse.data[0];
       console.log("API Data:", apiData);
 
-      // Update qrData dengan validasi
+      // Simpan data lama untuk comparison
+      const oldQrData = { ...this.qrData };
+
+      // Update qrData dengan semua properti dari API
       this.qrData = {
-        qrvalue: apiData.qrvalue || null,
-        display_nobill: apiData.display_nobill || null,
-        display_name: apiData.display_name || null,
-        display_amount: apiData.display_amount || null,
-        ...apiData // spread untuk properti lain yang mungkin ada
+        qrvalue: apiData.qrvalue || apiData.qr_code || this.qrData.qrvalue,
+        display_nobill: apiData.display_nobill || this.qrData.display_nobill,
+        display_name: apiData.display_name || this.qrData.display_name,
+        display_amount: apiData.display_amount || apiData.nominal || this.qrData.display_amount,
+        status: apiData.status || this.qrData.status,
+        ip: apiData.ip || this.qrData.ip,
+        // Spread untuk properti lain yang mungkin ada
+        ...apiData
       };
       
       // Update patientInfo
       this.patientInfo = {
-        name: apiData.display_name || 'Unknown',
-        amount: apiData.display_amount || '0',
-        expiry: this.patientInfo.expiry, // keep existing value
+        name: apiData.display_name || this.patientInfo.name || 'Unknown',
+        amount: apiData.display_amount || apiData.nominal || this.patientInfo.amount || '0',
+        expiry: this.patientInfo.expiry,
       };
 
+      // Log changes
+      if (oldQrData.status !== this.qrData.status) {
+        console.log(`Status changed: ${oldQrData.status} -> ${this.qrData.status}`);
+      }
+
       console.log("Updated qrData:", this.qrData);
       console.log("Updated patientInfo:", this.patientInfo);
-
-      // Ganti step
-      this.currentStep = 2;
+      console.log("===================");
     },
+    
+    // Method untuk debug
+    debugCurrentState() {
+      console.log("=== PAYMENT STORE DEBUG ===");
+      console.log("Current Step:", this.currentStep);
+      console.log("Patient Info:", this.patientInfo);
+      console.log("QR Data:", this.qrData);
+      console.log("Has QR Data:", this.hasQrData);
+      console.log("Ready for Status Check:", this.isReadyForStatusCheck);
+      console.log("Safe QR Value:", this.safeQrValue);
+      console.log("==========================");
+    },
+    
+    // Method untuk validasi data
+    validateData() {
+      const issues = [];
+      
+      if (!this.qrData.display_nobill) {
+        issues.push('display_nobill missing');
+      }
+      
+      if (!this.qrData.display_name) {
+        issues.push('display_name missing');
+      }
+      
+      if (!this.qrData.qrvalue && !this.qrData.qr_code) {
+        issues.push('QR code missing');
+      }
+      
+      if (issues.length > 0) {
+        console.warn('Data validation issues:', issues);
+        return false;
+      }
+      
+      return true;
+    }
   },
 });
\ No newline at end of file
diff --git a/stores/payment1.ts b/stores/payment1.ts
deleted file mode 100644
index d1fc2b1..0000000
--- a/stores/payment1.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// src/stores/payment.js
-import { defineStore } from 'pinia';
-
-export const usePaymentStore = defineStore('payment', {
-  state: () => ({
-    currentStep: 1,
-    patientInfo: {
-      name: '',
-      amount: '',
-      expiry: '',
-    },
-    paymentData: null, // Tambahkan state ini untuk menyimpan data dari backend
-  }),
-  actions: {
-    nextStep() {
-      this.currentStep++;
-    },
-    prevStep() {
-      this.currentStep--;
-    },
-    reset() {
-      this.currentStep = 1;
-      this.patientInfo = {};
-      this.paymentData = null; // Reset data pembayaran
-    },
-    // Tambahkan action baru untuk menerima data dari WebSocket
-    updatePayment(data: { patientName: any; amount: any; expiryDate: any; } | null) {
-      this.paymentData = data;
-      this.patientInfo = {
-        name: data.patientName,
-        amount: data.amount,
-        expiry: data.expiryDate,
-      };
-      this.currentStep = 2; // Pindah ke step 2 secara otomatis
-    },
-  },
-});
\ No newline at end of file