From fa2d439ea4b0154cec586b5f3a4859b8b379f631 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Fri, 17 Oct 2025 15:12:20 +0700
Subject: [PATCH] update komponen

---
 assets/qrislogo.png             | Bin 0 -> 6905 bytes
 assets/rssalogo.png             | Bin 0 -> 6186 bytes
 components/Home.vue             |  89 ++++++-----
 components/PembayaranGagal.vue  |  23 ++-
 components/PembayaranSukses.vue |  35 ++--
 components/QRISPayment.vue      | 225 +++++++++++++++++++++-----
 composables/useWebSocket.js     |  79 +++++++++
 composables/useWebSocket.ts     |  43 -----
 config/websocket.js             | 185 ++++++++++++++++++++++
 nuxt.config.ts                  |  10 +-
 package-lock.json               |   1 +
 package.json                    |   1 +
 pages/SetupIP.vue               |   2 +-
 pages/index.vue                 | 273 ++++++++++++++++----------------
 stores/payment.ts               |  88 +++++++---
 15 files changed, 747 insertions(+), 307 deletions(-)
 create mode 100644 assets/qrislogo.png
 create mode 100644 assets/rssalogo.png
 create mode 100644 composables/useWebSocket.js
 delete mode 100644 composables/useWebSocket.ts
 create mode 100644 config/websocket.js

diff --git a/assets/qrislogo.png b/assets/qrislogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..80723ffdf49bd23c76871e8c85347c0c8b369f3e
GIT binary patch
literal 6905
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
TSe*LrQ-!1;t14411quE?5+Nrd

literal 0
HcmV?d00001

diff --git a/assets/rssalogo.png b/assets/rssalogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f0842d71f1ca9caa9efd30ca65ff981445f469e
GIT binary patch
literal 6186
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
IM6N<$f{|j->;M1&

literal 0
HcmV?d00001

diff --git a/components/Home.vue b/components/Home.vue
index 44219b7..da91ec5 100644
--- a/components/Home.vue
+++ b/components/Home.vue
@@ -83,11 +83,7 @@
                   @error="onVideoError"
                 ></iframe>
 
-                <div
-                  v-else
-                  class="video-thumbnail"
-                  @click="playVideo(index)"
-                >
+                <div v-else class="video-thumbnail" @click="playVideo(index)">
                   <img
                     :src="`https://img.youtube.com/vi/${item.videoId}/maxresdefault.jpg`"
                     alt="Video thumbnail"
@@ -112,7 +108,7 @@
         </div>
       </div>
 
-      <div class="cta-section-contact">
+      <!-- <div class="cta-section-contact">
         <v-btn
           @click="startDebugPayment"
           color="#808080"
@@ -121,7 +117,7 @@
         >
           <span class="button-text">SIMULASI PEMBAYARAN</span>
         </v-btn>
-      </div>
+      </div> -->
     </div>
 
     <div class="orange-background-contact">
@@ -175,7 +171,7 @@ const carouselItems = ref([
     isImage: false,
   },
   {
-    src: "https://scontent.fcgk22-2.fna.fbcdn.net/v/t39.30808-6/481267190_3904366386504845_1409667601717073976_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=110&ccb=1-7&_nc_sid=cc71e4&_nc_ohc=w6wAp5Df1lAQ7kNvwHL8Snq&_nc_oc=Adnq0LOV2vro6n7DGZu9GfUYGx3iBXzZ7LlUk7oWYi_lZ_OYDD7LVYe5zogYKxEEJdU&_nc_zt=23&_nc_ht=scontent.fcgk22-2.fna&_nc_gid=Dir3R7zaEbm2b0HPtrmGiQ&oh=00_AfaERSA1GyvNKkfajBF5yIv_JrijpizdmUqgy9528oAszQ&oe=68D12398",
+    src: "https://rsusaifulanwar.jatimprov.go.id/wp-content/uploads/2023/08/siam-2-scaled.jpg",
     alt: "Medical Services",
     title: "Pelayanan Terbaik",
     description: "Tim medis profesional siap melayani 24 jam",
@@ -184,31 +180,30 @@ const carouselItems = ref([
 ]);
 
 const getYouTubeEmbedUrl = (videoId) => {
-  const baseUrl = 'https://www.youtube.com/embed/';
+  const baseUrl = "https://www.youtube.com/embed/";
   const params = new URLSearchParams({
-    autoplay: '1',
-    mute: '0',
-    controls: '1',
-    modestbranding: '1',
-    rel: '0',
-    showinfo: '0',
-    fs: '1',
-    cc_load_policy: '0',
-    iv_load_policy: '3',
-    autohide: '0'
+    autoplay: "1",
+    mute: "0",
+    controls: "1",
+    modestbranding: "1",
+    rel: "0",
+    showinfo: "0",
+    fs: "1",
+    cc_load_policy: "0",
+    iv_load_policy: "3",
+    autohide: "0",
   });
   return `${baseUrl}${videoId}?${params.toString()}`;
 };
 
 const onVideoLoad = () => {
-  console.log('Video iframe loaded successfully');
+  console.log("Video iframe loaded successfully");
 };
 
 const onVideoError = (error) => {
-  console.error('Video iframe error:', error);
+  console.error("Video iframe error:", error);
 };
 
-// Fungsi untuk memulai carousel otomatis
 const startCarousel = () => {
   if (carouselInterval.value) {
     clearInterval(carouselInterval.value);
@@ -216,10 +211,9 @@ const startCarousel = () => {
   carouselInterval.value = setInterval(() => {
     const nextSlide = (currentSlide.value + 1) % carouselItems.value.length;
     currentSlide.value = nextSlide;
-  }, 10000); // Ganti gambar setiap 10 detik
+  }, 10000);
 };
 
-// Fungsi untuk menghentikan carousel otomatis
 const stopCarousel = () => {
   if (carouselInterval.value) {
     clearInterval(carouselInterval.value);
@@ -227,40 +221,33 @@ const stopCarousel = () => {
   }
 };
 
-// Fungsi untuk memutar video (menghentikan carousel)
 const playVideo = (index) => {
   currentSlide.value = index;
-  stopCarousel(); // Hentikan carousel saat video diputar
+  stopCarousel();
 };
 
-// Tonton perubahan slide
 watch(currentSlide, (newSlide) => {
   const currentItem = carouselItems.value[newSlide];
   if (currentItem && !currentItem.isImage) {
-    // Jika slide adalah video, hentikan carousel
-    console.log('Video detected, stopping carousel');
+    console.log("Video detected, stopping carousel");
     stopCarousel();
   } else {
-    // Jika slide adalah gambar, mulai kembali carousel
-    console.log('Image detected, starting carousel');
+    console.log("Image detected, starting carousel");
     startCarousel();
   }
 });
 
 onMounted(() => {
-  // Mulai carousel saat komponen dimuat
   startCarousel();
 });
 
 onUnmounted(() => {
-  // Hentikan carousel saat komponen dihancurkan
   stopCarousel();
 });
 
-// Fungsi untuk simulasi pembayaran debug
 const startDebugPayment = () => {
   console.log("Simulasi Pembayaran (Debug) dimulai.");
-  // Mengisi data dummy untuk simulasi
+
   const dummyData = {
     posdevice: "GRANDPAV",
     invoice_number: "000000000000012000615",
@@ -268,14 +255,15 @@ const startDebugPayment = () => {
     created_at: "2024-11-21T11:52:25.805965+07:00",
     display_name: "KASIH",
     id: "1",
-    status: "1", // Status awal untuk simulasi
+    status: "1",
     display_amount: "90",
-    qrvalue: "000201010212262710019ID.CO.BANKJATIM.WWW01189360011400001347728215ID02400134529083038ES1459015ID.OR.GPMQR.MM0215ID202431094996960309ES2049939530536054029605802D5923-RSUD SAIFUL ANWAR MLG-100000MALANG0556111622901250000000000000000000000000000012800061563040C9B",
+    qrvalue:
+      "000201010212262710019ID.CO.BANKJATIM.WWW01189360011400001347728215ID02400134529083038ES1459015ID.OR.GPMQR.MM0215ID202431094996960309ES2049939530536054029605802D5923-RSUD SAIFUL ANWAR MLG-100000MALANG0556111622901250000000000000000000000000000012800061563040C9B",
     ip: "10.10.150.106",
     display_nobill: "24072579/10000675",
   };
   paymentStore.updatePayment({ data: [dummyData] });
-  paymentStore.currentStep = 2; // Pindah ke QRISPayment
+  paymentStore.currentStep = 2;
 };
 </script>
 
@@ -388,10 +376,13 @@ const startDebugPayment = () => {
   width: 100%;
   height: 100%;
   position: relative;
-  background: #000;
+
+  background: white;
   display: flex;
   align-items: center;
   justify-content: center;
+  /* PASTIKAN INI ADA untuk membatasi iframe */
+  overflow: hidden;
 }
 
 .youtube-iframe {
@@ -399,8 +390,26 @@ const startDebugPayment = () => {
   height: 100%;
   border: none;
   border-radius: 15px;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  min-width: 100%;
+  min-height: 100%;
+
+  aspect-ratio: 16 / 9;
 }
 
+.thumbnail-img {
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
+  border-radius: 15px;
+}
 .video-thumbnail {
   width: 100%;
   height: 100%;
@@ -558,4 +567,4 @@ const startDebugPayment = () => {
 :deep(.v-carousel__controls--bottom) {
   bottom: 40px !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/PembayaranGagal.vue b/components/PembayaranGagal.vue
index 9273fa7..3f01666 100644
--- a/components/PembayaranGagal.vue
+++ b/components/PembayaranGagal.vue
@@ -12,6 +12,19 @@
           <p class="failure-message mb-8">
             Terjadi kesalahan saat memproses<br />pembayaran Anda.
           </p>
+           <div class="action-section">
+            <v-btn 
+              color="primary" 
+              size="x-large" 
+              variant="flat" 
+              rounded="xl"
+              class="success-btn"
+              @click="paymentStore.reset"
+            >
+              <v-icon class="mr-2" >mdi-home</v-icon>
+              Kembali ke Awal
+            </v-btn>
+          </div>
           
           <!-- Uncomment jika butuh buttons -->
           <!-- <div class="button-group">
@@ -54,7 +67,7 @@ const retryPayment = () => {
 
 <style scoped>
 .payment-step {
-  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
+  background:  #ff9248;
   min-height: 100vh;
   height: auto;
   display: flex;
@@ -75,10 +88,10 @@ const retryPayment = () => {
   border-radius: 24px;
   backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 
+  /* box-shadow: 
     0 20px 60px rgba(0, 0, 0, 0.08),
     0 8px 32px rgba(0, 0, 0, 0.04),
-    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    inset 0 1px 0 rgba(255, 255, 255, 0.8); */
   padding: 3rem 2rem !important;
 }
 
@@ -139,6 +152,10 @@ const retryPayment = () => {
   max-width: 300px;
 }
 
+.action-section {
+  margin-top: 2rem;
+}
+
 .action-btn {
   font-weight: 600 !important;
   text-transform: none !important;
diff --git a/components/PembayaranSukses.vue b/components/PembayaranSukses.vue
index ff977b8..d6cb57b 100644
--- a/components/PembayaranSukses.vue
+++ b/components/PembayaranSukses.vue
@@ -1,7 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="payment-step">
-    <div class="success-wrapper">
+   <div class="success-wrapper">
       <div class="success-container">
         <!-- Success Icon with Animation -->
         <div class="success-icon-container mb-6">
@@ -12,14 +11,14 @@
               class="success-icon"
             />
           </div>
-          <div class="success-checkmark">
+          <!-- <div class="success-checkmark">
             <div class="check-icon">
               <span class="icon-line line-tip"></span>
               <span class="icon-line line-long"></span>
               <div class="icon-circle"></div>
               <div class="icon-fix"></div>
             </div>
-          </div>
+          </div> -->
         </div>
 
         <!-- Success Content -->
@@ -71,7 +70,6 @@
         </div>
       </div>
     </div>
-  </div>
 </template>
 
 <script setup>
@@ -93,30 +91,31 @@ const formatCurrency = (amount) => {
   background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
   min-height: 100vh;
   height: auto;
-  padding: 2rem 0;
+  padding: 1rem;
   display: flex;
+  margin: 80px;
   align-items: center;
   justify-content: center;
 }
 
 .success-wrapper {
   width: 100%;
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 0 1rem;
+  max-width: 800px;
+  margin: 0;
+  padding: 0rem;
 }
 
 .success-container {
-  background: rgba(255, 255, 255, 0.95);
+  background: rgb(255, 255, 255);
   border-radius: 24px;
-  padding: 3rem 2rem;
+  padding: 0.5rem 0.5rem;
   text-align: center;
-  backdrop-filter: blur(20px);
+  /* backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 
     0 20px 60px rgba(0, 0, 0, 0.08),
     0 8px 32px rgba(0, 0, 0, 0.04),
-    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    inset 0 1px 0 rgba(255, 255, 255, 0.8); */
 }
 
 /* Success Icon Animation */
@@ -221,14 +220,14 @@ const formatCurrency = (amount) => {
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 1rem;
-  line-height: 1.2;
+  line-height: 1.5;
 }
 
 .success-message {
   color: #666;
-  font-size: 1.2rem;
+  font-size: 1rem;
   font-weight: 500;
-  line-height: 1.4;
+  line-height: 2;
 }
 
 .message-line {
@@ -238,13 +237,13 @@ const formatCurrency = (amount) => {
 
 /* Payment Summary */
 .payment-summary {
-  margin: 2rem 0;
+  margin: 1rem 0;
 }
 
 .summary-card {
   background: rgba(76, 175, 80, 0.06);
   border-radius: 16px;
-  padding: 1.5rem;
+  padding: 2rem;
   border: 1px solid rgba(76, 175, 80, 0.2);
 }
 
diff --git a/components/QRISPayment.vue b/components/QRISPayment.vue
index 6e0cba7..dfb370b 100644
--- a/components/QRISPayment.vue
+++ b/components/QRISPayment.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="payment-step">
-    <v-card-text class="pa-6">
-      <!-- Header Section -->
+    <v-card-text class="main-content pa-4">
       <div class="header-section text-center mb-8">
         <h2 class="payment-title">Pindai Kode QR untuk Pembayaran</h2>
         <p class="payment-subtitle">
@@ -9,15 +8,19 @@
         </p>
       </div>
 
-      <!-- Main Content Section - QR & Details Side by Side -->
       <div class="main-content-section mb-8">
         <div class="content-grid">
-          <!-- QR Code Section -->
           <div class="qr-section">
             <div class="qr-container">
               <div class="qris-logo-container mb-0">
                 <v-img
-                  src="https://iconlogovector.com/uploads/images/2024/03/lg-65ffda68a47ee-QRIS.webp"
+                  src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
+                  height="60"
+                  class="RSSA-logo"
+                  contain
+                />
+                <v-img
+                  src="https://ottocash.id/wp-content/uploads/2022/08/qris.png"
                   height="60"
                   class="qris-logo"
                   contain
@@ -44,11 +47,9 @@
                 </div>
               </div>
 
-              <!-- Scanning Animation -->
               <div class="scan-line" v-if="qrLoaded"></div>
             </div>
 
-            <!-- QR Instructions -->
             <div class="qr-instructions text-center mt-4">
               <v-icon size="20" color="primary" class="mb-2"
                 >mdi-qrcode-scan</v-icon
@@ -57,7 +58,6 @@
             </div>
           </div>
 
-          <!-- Payment Details Section -->
           <div class="details-section">
             <div class="payment-details-card">
               <div class="details-header">
@@ -111,11 +111,12 @@
                     >
                     Berlaku Sampai
                   </div>
-                  <div class="detail-value expired">Tidak terbatas</div>
+                  <div class="detail-value expired">
+                    {{ expiryDisplayTime }}
+                  </div>
                 </div>
               </div>
 
-              <!-- Status in Details Card -->
               <div class="payment-status mt-4">
                 <div class="status-row">
                   <div class="status-indicator-inline">
@@ -133,7 +134,6 @@
         </div>
       </div>
 
-      <!-- Action Buttons -->
       <div class="action-buttons">
         <v-btn
           color="grey-lighten-1"
@@ -150,32 +150,106 @@
           color="success"
           variant="flat"
           size="large"
-          class="action-btn simulate-btn"
-          @click="paymentStore.nextStep"
+          class="action-btn"
+          @click="simulateSuccess"
         >
-          <v-icon class="mr-2">mdi-play-circle-outline</v-icon>
-          Simulasi Pembayaran
+          <v-icon class="mr-2">mdi-check-circle-outline</v-icon>
+          Simulasi Sukses
+        </v-btn>
+
+        <v-btn
+          color="error"
+          variant="flat"
+          size="large"
+          class="action-btn"
+          @click="simulateFailure"
+        >
+          <v-icon class="mr-2">mdi-close-circle-outline</v-icon>
+          Simulasi Gagal
         </v-btn>
       </div>
 
-      <!-- Help Text -->
-      <div class="help-text text-center mt-6">
+      <!-- <div class="help-text text-center mt-6">
         <v-icon size="16" class="mr-1">mdi-information-outline</v-icon>
         <span>Scan QR code menggunakan aplikasi pembayaran digital Anda</span>
-      </div>
+      </div> -->
     </v-card-text>
   </div>
 </template>
-
 <script setup>
 import { usePaymentStore } from "~/stores/payment";
 import QRCode from "qrcode";
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, onBeforeUnmount } from "vue";
 
 const paymentStore = usePaymentStore();
 const qrCodeImage = ref(null);
 const qrLoaded = ref(false);
 
+const EXPIRY_MINUTES = 1440;
+const expiryDisplayTime = ref("Menghitung...");
+let countdownInterval = null;
+
+const calculateExpiryDate = (createdAt) => {
+  if (!createdAt) return null;
+
+  try {
+    const createdDate = new Date(createdAt);
+    if (isNaN(createdDate.getTime())) return null;
+
+    return new Date(createdDate.getTime() + EXPIRY_MINUTES * 60000);
+  } catch (e) {
+    console.error("Error calculating expiry time:", e);
+    return null;
+  }
+};
+
+const formatTimeLeft = (seconds) => {
+  if (seconds <= 0) {
+    clearInterval(countdownInterval);
+    return "KEDALUWARSA";
+  }
+
+  const h = String(Math.floor(seconds / 3600)).padStart(2, "0");
+  const m = String(Math.floor((seconds % 3600) / 60)).padStart(2, "0");
+  const s = String(seconds % 60).padStart(2, "0");
+  return `${h}:${m}:${s}`;
+};
+
+// Memulai fungsi hitung mundur
+const startCountdown = (expiryDate) => {
+  if (!expiryDate) {
+    expiryDisplayTime.value = "Waktu tidak valid";
+    return;
+  }
+
+  // Hentikan interval sebelumnya jika ada
+  if (countdownInterval) {
+    clearInterval(countdownInterval);
+  }
+
+  const updateCountdown = () => {
+    const now = new Date().getTime();
+    const timeRemainingMs = expiryDate.getTime() - now;
+    const timeRemainingSeconds = Math.max(
+      0,
+      Math.floor(timeRemainingMs / 1000)
+    );
+
+    expiryDisplayTime.value = formatTimeLeft(timeRemainingSeconds);
+  };
+
+  updateCountdown();
+
+  countdownInterval = setInterval(updateCountdown, 1000);
+};
+
+// Membersihkan interval saat komponen dihancurkan
+onBeforeUnmount(() => {
+  if (countdownInterval) {
+    clearInterval(countdownInterval);
+  }
+});
+
 const formatCurrency = (amount) => {
   return new Intl.NumberFormat("id-ID", {
     style: "currency",
@@ -210,51 +284,122 @@ const generateQRCode = async () => {
   }
 };
 
+const simulateSuccess = () => {
+  console.log("--- DEBUG: SIMULASI SUKSES ---");
+  const currentData = paymentStore.qrData;
+
+  // Simulasikan data status SUKSES (status "2")
+  const successData = {
+    data: [
+      {
+        ...currentData,
+        status: "2",
+        transaction_id: `TRX-SIM-SUKSES-${Date.now()}`,
+      },
+    ],
+  };
+
+  paymentStore.updatePayment(successData);
+};
+
+const simulateFailure = () => {
+  console.log("--- DEBUG: SIMULASI GAGAL ---");
+  const currentData = paymentStore.qrData;
+
+  // Simulasikan data status GAGAL (status "0")
+  const failureData = {
+    data: [
+      {
+        ...currentData,
+        status: "0",
+        reason: "SIMULASI: Transaksi dibatalkan atau kedaluwarsa.",
+      },
+    ],
+  };
+
+  // Update store Pinia. Watcher di index.vue akan memicu transisi ke Step 4.
+  paymentStore.updatePayment(failureData);
+};
+// ------------------------------------
+
 onMounted(() => {
   generateQRCode();
+
+  // Hitung tanggal kedaluwarsa awal dan mulai hitung mundur
+  const createdAt = paymentStore.qrData.created_at;
+  if (createdAt) {
+    const expiryDate = calculateExpiryDate(createdAt);
+    startCountdown(expiryDate);
+  }
 });
 
 watch(
   () => paymentStore.qrData,
-  () => {
+  (newQrData) => {
     generateQRCode();
-  }
+
+    // LOGIKA PERHITUNGAN WAKTU KEDALUWARSA
+    const createdAt = newQrData.created_at;
+    if (createdAt) {
+      const expiryDate = calculateExpiryDate(createdAt);
+      startCountdown(expiryDate); // Mulai hitung mundur setiap kali data QR berubah
+      console.log(`[QRISPayment] Waktu kedaluwarsa diperbarui.`);
+    } else {
+      expiryDisplayTime.value = "Data Waktu Tidak Tersedia";
+    }
+  },
+  { deep: true }
 );
 </script>
-
 <style scoped>
 .payment-step {
-  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
-  min-height: 100vh;
-  height: auto;
-  padding: 1rem 0;
+  background: #ff9248;
+}
+.main-content {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
+  /* min-height: 100vh; */
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border-radius: 16px;
+  height: fit-content;
 }
-
 /* Header Section */
 .header-section {
-  padding-top: 8px;
+  padding-top: 0px;
 }
 
 .qris-logo-container {
-  position: center;
-  /* display: inline-block; */
+  display: flex;
+  gap: 0rem;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .qris-logo {
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
   transition: transform 0.3s ease;
+  align-items: baseline;
+  margin-right: 25px;
+}
+
+.RSSA-logo {
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
+  transition: transform 0.3s ease;
+  align-items: end;
+  margin-right: -50px !important;
 }
 
 .qris-logo:hover {
-  transform: scale(1.05);
+  transform: scale(1);
 }
 
 .payment-title {
   font-size: 1.5rem;
   font-weight: 700;
   color: #1a1a1a;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
+  margin-top: 0;
+  margin-bottom: 0;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -275,7 +420,7 @@ watch(
 .content-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 3rem;
+  gap: 0.5rem;
   align-items: start;
   max-width: 1000px;
   margin: 0 auto;
@@ -394,6 +539,8 @@ watch(
 /* QR Instructions */
 .qr-instructions {
   margin-top: 1rem;
+  display: flex;
+  gap: 8px;
 }
 
 .instruction-text {
@@ -407,7 +554,7 @@ watch(
 .payment-details-card {
   background: rgba(255, 255, 255, 0.95);
   border-radius: 20px;
-  padding: 2rem;
+  padding: 1.5rem;
   backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow:
@@ -420,8 +567,8 @@ watch(
 .details-header {
   display: flex;
   align-items: center;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
   border-bottom: 2px solid rgba(0, 0, 0, 0.06);
 }
 
@@ -434,7 +581,7 @@ watch(
 .details-content {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.4rem;
 }
 
 .detail-row {
diff --git a/composables/useWebSocket.js b/composables/useWebSocket.js
new file mode 100644
index 0000000..386f103
--- /dev/null
+++ b/composables/useWebSocket.js
@@ -0,0 +1,79 @@
+import { ref, onUnmounted } from 'vue';
+
+/**
+ * Komposable untuk mengelola koneksi WebSocket.
+ * @param {string} url - URL WebSocket lengkap.
+ */
+export function useWebSocket(url) {
+  const ws = ref(null);
+  const data = ref(null);
+  const isConnected = ref(false);
+  const error = ref(null);
+  let reconnectTimer = null;
+
+  const connect = () => {
+    if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+      console.log('[WS] Already connected.');
+      return;
+    }
+    
+    error.value = null;
+    console.log(`[WS] Attempting to connect to: ${url}`);
+    
+    ws.value = new WebSocket(url);
+
+    ws.value.onopen = () => {
+      isConnected.value = true;
+      console.log('✅ [WS] Connection established.');
+      clearTimeout(reconnectTimer);
+    };
+
+    ws.value.onmessage = (event) => {
+      // LOGIC PENTING: Menerima data dan memicu watcher di index.vue
+      console.log('🔔 [WS] Message received. Parsing data...'); 
+      try {
+        const parsedData = JSON.parse(event.data);
+        data.value = parsedData; 
+      } catch (e) {
+        error.value = new Error('Gagal memproses pesan WebSocket.');
+        console.error('❌ [WS] Data parsing error:', e);
+        data.value = null; 
+      }
+    };
+
+    ws.value.onerror = (e) => {
+      console.error('❌ [WS] WebSocket error:', e);
+      error.value = e;
+    };
+
+    ws.value.onclose = (event) => {
+      isConnected.value = false;
+      if (event.code !== 1000) {
+          console.log('🛑 [WS] Connection closed unexpectedly. Reconnecting in 5s...');
+          reconnectTimer = setTimeout(connect, 5000); // Reconnect setelah 5 detik
+      } else {
+          console.log('🛑 [WS] Connection closed normally.');
+      }
+    };
+  };
+  
+  const disconnect = () => {
+    if (ws.value) {
+        ws.value.close(1000, "Component unmounted");
+        ws.value = null;
+    }
+    clearTimeout(reconnectTimer);
+  };
+  
+  onUnmounted(() => {
+    disconnect();
+  });
+
+  return {
+    wsData: data,
+    isConnected,
+    error,
+    connect,
+    disconnect,
+  };
+}
\ No newline at end of file
diff --git a/composables/useWebSocket.ts b/composables/useWebSocket.ts
deleted file mode 100644
index d18430e..0000000
--- a/composables/useWebSocket.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { io } from 'socket.io-client';
-import { usePaymentStore } from '~/stores/payment1';
-
-// Fungsi untuk mendapatkan IP Address lokal (ini butuh bantuan backend/API eksternal)
-async function getLocalIpAddress() {
-  // Anda bisa menggunakan API eksternal atau endpoint di backend Anda sendiri.
-  // Contoh menggunakan API eksternal:
-  // const response = await fetch('https://api.ipify.org?format=json');
-  // const data = await response.json();
-  // return data.ip;
-
-  // ATAU, jika IP address diatur secara statis pada tablet:
-  return '192.168.1.101'; // Ganti dengan IP Address loket yang sesungguhnya
-}
-
-export async function setupSocket() {
-  const paymentStore = usePaymentStore();
-  const socket = io('https://your-backend-api.com'); // Ganti dengan URL backend Anda
-
-  const localIp = await getLocalIpAddress();
-
-  socket.on('connect', () => {
-    console.log('Connected to backend WebSocket');
-    
-    // Mengirim IP Address tablet ke backend untuk identifikasi loket.
-    socket.emit('register-kiosk', { ipAddress: localIp });
-  });
-
-  socket.on('payment-data-ready', (data) => {
-    console.log('Payment data received:', data);
-    // Panggil action Pinia untuk memperbarui state dan pindah step
-    paymentStore.updatePayment(data); 
-  });
-
-  socket.on('disconnect', () => {
-    console.log('Disconnected from backend');
-  });
-
-  // Tambahkan error handling
-  socket.on('error', (error) => {
-    console.error('Socket error:', error);
-  });
-}
\ No newline at end of file
diff --git a/config/websocket.js b/config/websocket.js
new file mode 100644
index 0000000..5871165
--- /dev/null
+++ b/config/websocket.js
@@ -0,0 +1,185 @@
+// ~/config/websocket.js
+
+// Helper function untuk mendeteksi environment
+const detectEnvironment = () => {
+  // Jika ada environment variable NODE_ENV
+  if (process.env.NODE_ENV) {
+    return process.env.NODE_ENV;
+  }
+  
+  // Deteksi berdasarkan hostname/URL jika di browser
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname;
+    
+    // Local development
+    if (hostname === 'localhost' || hostname === '127.0.0.1') {
+      return 'development';
+    }
+    
+    // Server di jaringan lokal (IP private)
+    if (hostname.match(/^192\.168\./) || 
+        hostname.match(/^10\./) || 
+        hostname.match(/^172\.(1[6-9]|2[0-9]|3[0-1])\./)) {
+      return 'staging';
+    }
+    
+    // Production (domain atau IP public)
+    return 'production';
+  }
+  
+  // Default fallback
+  return 'development';
+};
+
+export const websocketConfig = {
+  // Local Development (localhost)
+  development: {
+    url: 'ws://localhost:8084/api/v1/ws',
+    // Alternative untuk development
+    // url: 'ws://localhost:8084/api/v1/ws',
+    queryParams: {
+      user_id: 'QRIS',
+      room: 'BANKJATIM'
+    },
+    options: {
+      transports: ['websocket', 'polling'],
+      timeout: 15000,
+      reconnection: true,
+      reconnectionAttempts: 3,
+      reconnectionDelay: 1000,
+      reconnectionDelayMax: 3000,
+    }
+  },
+  
+  // Staging/Network Server (IP jaringan)
+  staging: {
+    url: 'ws://10.10.150.68:8084/api/v1/ws',
+    queryParams: {
+      user_id: 'QRIS',
+      room: 'BANKJATIM'
+    },
+    options: {
+      transports: ['websocket', 'polling'],
+      timeout: 20000,
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1000,
+      reconnectionDelayMax: 5000,
+    }
+  },
+  
+  // Production (domain atau IP public)
+  production: {
+    url: 'wss://your-production-server.com/api/v1/ws',
+    queryParams: {
+      user_id: 'QRIS',
+      room: 'BANKJATIM'
+    },
+    options: {
+      transports: ['websocket', 'polling'],
+      timeout: 30000,
+      reconnection: true,
+      reconnectionAttempts: 10,
+      reconnectionDelay: 2000,
+      reconnectionDelayMax: 10000,
+      // Additional production settings
+      secure: true,
+      rejectUnauthorized: true,
+    }
+  },
+  
+  // Testing Environment
+  test: {
+    url: 'ws://test-server:8084/api/v1/ws',
+    queryParams: {
+      user_id: 'QRIS_TEST',
+      room: 'BANKJATIM_TEST'
+    },
+    options: {
+      transports: ['websocket'],
+      timeout: 10000,
+      reconnection: false,
+    }
+  }
+};
+
+// Helper function untuk build URL dengan query parameters
+export const buildWebSocketUrl = (baseUrl, queryParams = {}) => {
+  const url = new URL(baseUrl);
+  Object.entries(queryParams).forEach(([key, value]) => {
+    url.searchParams.append(key, value);
+  });
+  return url.toString();
+};
+
+// Helper function untuk mendapatkan config berdasarkan environment
+export const getWebSocketConfig = () => {
+  const env = detectEnvironment();
+  const config = websocketConfig[env] || websocketConfig.development;
+  
+  // Build URL dengan query parameters
+  const fullUrl = buildWebSocketUrl(config.url, config.queryParams);
+  
+  console.log(`🌍 Detected environment: ${env}`);
+  console.log(`🔗 WebSocket URL: ${fullUrl}`);
+  
+  return {
+    ...config,
+    fullUrl,
+    environment: env
+  };
+};
+
+// Helper untuk override manual dengan custom query params
+export const getCustomWebSocketConfig = (customUrl, customQueryParams = {}, customOptions = {}) => {
+  const baseConfig = getWebSocketConfig();
+  
+  const mergedQueryParams = {
+    ...baseConfig.queryParams,
+    ...customQueryParams
+  };
+  
+  const fullUrl = buildWebSocketUrl(customUrl, mergedQueryParams);
+  
+  return {
+    ...baseConfig,
+    url: customUrl,
+    queryParams: mergedQueryParams,
+    fullUrl,
+    options: {
+      ...baseConfig.options,
+      ...customOptions
+    },
+    environment: 'custom'
+  };
+};
+
+// Environment detection helpers
+export const isProduction = () => detectEnvironment() === 'production';
+export const isDevelopment = () => detectEnvironment() === 'development';
+export const isStaging = () => detectEnvironment() === 'staging';
+
+// Advanced configuration berdasarkan kondisi khusus
+export const getAdvancedConfig = () => {
+  const baseConfig = getWebSocketConfig();
+  
+  // Tambah konfigurasi khusus berdasarkan browser atau device
+  if (typeof window !== 'undefined') {
+    // Mobile device adjustments
+    if (navigator.userAgent.match(/Mobile|Android|iPhone|iPad/)) {
+      baseConfig.options.timeout = Math.min(baseConfig.options.timeout, 15000);
+      baseConfig.options.reconnectionDelay = 2000;
+    }
+    
+    // Connection type adjustments
+    if ('connection' in navigator) {
+      const connection = navigator.connection;
+      if (connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g') {
+        baseConfig.options.timeout = 30000;
+        baseConfig.options.reconnectionDelay = 3000;
+      }
+    }
+  }
+  
+  return baseConfig;
+};
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9eae2d9..5ed84ad 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,7 +3,7 @@ import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
-
+  ssr:false,
   modules: [
     '@nuxt/content',
     '@nuxt/eslint',
@@ -20,14 +20,13 @@ export default defineNuxtConfig({
         config.plugins.push(vuetify({ autoImport: true }))
       })
     },
-    //...
   ],
    css: [
     'vuetify/lib/styles/main.sass',
     '@mdi/font/css/materialdesignicons.min.css',
   ],
   build: {
-    transpile: ['vuetify'],
+    transpile: ['vuetify', 'socket.io-client'],
   },
   devServer: {
     host: "10.10.150.114",
@@ -38,5 +37,10 @@ export default defineNuxtConfig({
       viewport: 'width=device-width,initial-scale=1',
       charset: 'utf-8'
     }
+  },
+  nitro: {
+    experimental: {
+      wasm: true
+    }
   }
 })
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2313239..eeb953a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "nuxt": "^3.19.0",
         "pinia": "^3.0.3",
         "qrcode": "^1.5.4",
+        "socket.io-client": "^4.8.1",
         "typescript": "^5.9.2",
         "vue": "^3.5.20",
         "vue-router": "^4.5.1",
diff --git a/package.json b/package.json
index d82dd57..e39216a 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "nuxt": "^3.19.0",
     "pinia": "^3.0.3",
     "qrcode": "^1.5.4",
+    "socket.io-client": "^4.8.1",
     "typescript": "^5.9.2",
     "vue": "^3.5.20",
     "vue-router": "^4.5.1",
diff --git a/pages/SetupIP.vue b/pages/SetupIP.vue
index 460cd0c..0fef613 100644
--- a/pages/SetupIP.vue
+++ b/pages/SetupIP.vue
@@ -30,7 +30,7 @@
       </v-card-text>
       <v-card-actions class="justify-center">
         <v-btn
-          color="primary"
+          color="white"
           @click="saveIpAddress"
           :disabled="!isValidIp"
           variant="flat"
diff --git a/pages/index.vue b/pages/index.vue
index e0e1a17..e2348ff 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,13 +8,25 @@
             elevation="0"
             :class="{
               'contact-fullscreen': paymentStore.currentStep === 1,
-              'payment-centered': paymentStore.currentStep !== 1,
+              'payment-centered': paymentStore.currentStep === 2,
+              'status-centered':
+                paymentStore.currentStep === 3 ||
+                paymentStore.currentStep === 4,
             }"
           >
             <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>
+              <v-progress-circular
+                indeterminate
+                color="primary"
+              ></v-progress-circular>
+              <p class="mt-4">Memeriksa konfigurasi dan koneksi data...</p>
+              <p v-if="hasIpAddress && wsIsConnected" class="mt-2 text-success">
+                Koneksi WS: **Terhubung** (Siap menerima data 30s)
+              </p>
+              <p v-else-if="hasIpAddress" class="mt-2 text-warning">
+                Koneksi WS: Menunggu/Terputus...
+              </p>
             </div>
           </v-card>
         </v-col>
@@ -22,22 +34,33 @@
     </v-container>
   </div>
 </template>
-
 <script setup>
-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';
+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";
+import { useRouter } from "vue-router";
+import { useWebSocket } from "~/composables/useWebSocket";
 
 const paymentStore = usePaymentStore();
 const router = useRouter();
 const localIpAddress = ref(null);
-const pollingInterval = ref(null);
+
+// **WEB SOCKET CONFIGURATION**
+const WS_URL_BASE = "ws://10.10.150.45:8084/api/v1/ws";
+const WS_QUERY = "user_id=QRIS&room=BANKJATIM";
+const fullWsUrl = `${WS_URL_BASE}?${WS_QUERY}`;
+
+const {
+  wsData,
+  isConnected: wsIsConnected,
+  connect: wsConnect,
+  disconnect: wsDisconnect,
+} = useWebSocket(fullWsUrl);
 
 const hasIpAddress = computed(() => !!localIpAddress.value);
-const apiURL = 'http://10.10.150.67:8084/api/v1/qris/allstatus';
 
 const paymentSteps = {
   1: Home,
@@ -50,147 +73,92 @@ const activeComponent = computed(() => {
   return paymentSteps[paymentStore.currentStep] || Home;
 });
 
-// Watch untuk debugging perubahan step
-watch(() => paymentStore.currentStep, (newStep, oldStep) => {
-  console.log(`Step berubah dari ${oldStep} ke ${newStep}`);
-}, { immediate: true });
+watch(
+  () => paymentStore.currentStep,
+  (newStep, oldStep) => {
+    console.log(`Step berubah dari ${oldStep} ke ${newStep}`);
+  },
+  { immediate: true }
+);
 
-const startPolling = () => {
-  if (pollingInterval.value) {
-    clearInterval(pollingInterval.value);
-    console.log('🛑 Stopping previous polling');
-  }
+watch(
+  wsData,
+  (newStatus) => {
+    const payloadData = newStatus?.data?.data; // Ambil array data transaksi
 
-  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}`));
-          
-          
-          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);
-            
-            
-            setTimeout(() => {
-              console.log('🏠 Auto return to home');
-              paymentStore.reset();
-              startPolling();
-            }, 20000);
-            
-          } else if (failRecord) {
-            console.log('❌ FAIL STATUS FOUND!', failRecord);
-            paymentStore.updatePayment({ data: [failRecord] });
-            paymentStore.currentStep = 4;
-            clearInterval(pollingInterval.value);
-            
-            
-            setTimeout(() => {
-              console.log('🏠 Auto return to home');
-              paymentStore.reset();
-              startPolling();
-            }, 20000);
-            
-          } 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);
+    if (!newStatus || !payloadData || payloadData.length === 0) {
+      console.log(
+        "📭 WS: No valid payload data (newStatus.data.data) in message. Skipping state change."
+      );
+      return;
     }
-  }, 20000);
-  
-  console.log(`🚀 Polling started - IP-based patient detection`);
-};
+
+    console.log(
+      `[WS] Menerima update data di Step ${paymentStore.currentStep}. Total records: ${payloadData.length}`
+    );
+    const allRecords = payloadData;
+
+    if (paymentStore.currentStep === 1) {
+      console.log("🔍 Step 1 (WS): Looking for IP:", localIpAddress.value);
+
+      const relevantData = allRecords.find(
+        (item) => item.ip === localIpAddress.value && item.status === "1"
+      );
+
+      if (relevantData) {
+        console.log(
+          "✅ WS Data found for IP (New Transaction). Moving to Step 2."
+        );
+        paymentStore.updatePayment({ data: [relevantData] });
+        paymentStore.setStep(2);
+      } else {
+        console.log(
+          `⏳ No relevant data found for IP ${localIpAddress.value} in this broadcast.`
+        );
+      }
+    } else if (paymentStore.currentStep === 2) {
+      const relevantData = allRecords.find(
+        (item) =>
+          item.ip === localIpAddress.value &&
+          item.display_nobill === paymentStore.qrData.display_nobill
+      );
+
+      if (relevantData) {
+        console.log(
+          "🔄 WS Update received for current patient in Step 2. Updating store..."
+        );
+        paymentStore.updatePayment({ data: [relevantData] });
+      }
+    }
+  },
+  { deep: true }
+);
 
 const checkAndRedirect = () => {
-  const savedIp = localStorage.getItem('loketIp');
+  const savedIp = localStorage.getItem("loketIp");
   if (!savedIp) {
-    console.warn('IP Address belum diatur. Mengarahkan ke halaman setup.');
-    router.push('/setupip');
+    router.push("/setupip");
   } else {
     localIpAddress.value = savedIp;
-    console.log('IP Address ditemukan:', savedIp);
-    startPolling();
+    wsConnect();
   }
 };
 
 onMounted(() => {
-  console.log('Component mounted, step saat ini:', paymentStore.currentStep);
   checkAndRedirect();
 });
 
 onUnmounted(() => {
-  if (pollingInterval.value) {
-    clearInterval(pollingInterval.value);
-    console.log('Polling dihentikan saat unmount.');
-  }
+  wsDisconnect();
 });
 </script>
+>
 
 <style scoped>
 .medical-payment-app {
-  background: linear-gradient(135deg, #ff9248 20%, #ff9248 100%);
+  background: #ff9248;
   min-height: 100vh;
-  height: auto;
+  height: fit-content;
 }
 
 .full-height {
@@ -206,18 +174,35 @@ onUnmounted(() => {
 }
 
 .payment-centered {
+  background: #ff9248 !important;
   max-width: 1200px !important;
-  width: 100% !important;
+  width: fit-content !important;
   margin: 1rem auto !important;
   border-radius: 16px !important;
-  height: auto !important;
+  height: fit-content !important;
   min-height: calc(100vh - 2rem);
 }
 
 .payment-card {
-  background: rgb(224, 224, 224);
+  background: #ff9248;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
-  height: auto !important;
+  height: fit-content !important;
+  min-height: inherit;
+}
+
+.status-centered {
+  max-width: 1200px !important;
+  width: 100% !important;
+  margin: 1rem auto !important;
+  border-radius: 16px !important;
+  height: fit-content !important;
+  min-height: calc(100vh - 2rem);
+}
+
+.status-card {
+  background: #ff9248;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  height: fit-content !important;
   min-height: inherit;
 }
 
@@ -227,6 +212,11 @@ onUnmounted(() => {
     max-width: 500px !important;
     margin: 1rem !important;
   }
+
+  .status-centered {
+    max-width: 800px !important;
+    margin: 1rem !important;
+  }
 }
 
 @media (orientation: landscape) and (min-width: 768px) {
@@ -235,16 +225,23 @@ onUnmounted(() => {
     margin: 0.5rem auto !important;
     min-height: calc(100vh - 1rem);
   }
+
+  .status-centered {
+    max-width: 700px !important;
+    margin: 0.5rem auto !important;
+    min-height: calc(100vh - 1rem);
+  }
 }
 
 @media (orientation: landscape) and (max-height: 600px) {
   .medical-payment-app {
     min-height: 600px;
   }
-  
+
   .contact-fullscreen,
-  .payment-centered {
+  .payment-centered,
+  .status-centered {
     min-height: 600px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/stores/payment.ts b/stores/payment.ts
index 746ae20..642b359 100644
--- a/stores/payment.ts
+++ b/stores/payment.ts
@@ -1,21 +1,26 @@
 // src/stores/payment.js
 import { defineStore } from 'pinia';
 
+// Variabel di luar store untuk menyimpan timer, agar persistensi di luar state Pinia
+let autoResetTimer = null; 
+
 export const usePaymentStore = defineStore('payment', {
   state: () => ({
-    currentStep: 1,
+    currentStep: 1, // 1: Menunggu Data, 2: Tampilkan QRIS, 3: Sukses, 4: Gagal
     patientInfo: {
       name: '',
       amount: '',
-      expiry: '',
+      expiry: '', // Dibiarkan kosong, waktu kedaluwarsa dihitung dari qrData.created_at
     },
     qrData: {
       qrvalue: null,
       display_nobill: null,
       display_name: null,
       display_amount: null,
-      status: null, // Tambahkan status untuk tracking
-      ip: null, // Tambahkan IP untuk reference
+      status: null, // Status pembayaran: "1" (Pending), "2" (Sukses), "0" (Gagal/Expired)
+      ip: null,
+      created_at: null, // Tambahkan ini agar properti ada secara eksplisit
+      // ... properti lain dari API akan ditambahkan melalui spread operator
     },
   }),
   
@@ -23,12 +28,12 @@ export const usePaymentStore = defineStore('payment', {
     hasQrData: (state) => state.qrData && state.qrData.qrvalue,
     safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com',
     
-    // Getter untuk cek apakah data siap untuk polling status
+    // Getter untuk cek apakah data siap
     isReadyForStatusCheck: (state) => {
       return state.qrData.display_nobill && state.qrData.display_name;
     },
     
-    // Getter untuk informasi debug
+    // Getter untuk debug
     debugInfo: (state) => ({
       step: state.currentStep,
       hasIdentifiers: !!(state.qrData.display_nobill && state.qrData.display_name),
@@ -46,12 +51,29 @@ export const usePaymentStore = defineStore('payment', {
     },
     
     setStep(step) {
-      console.log(`Setting step from ${this.currentStep} to ${step}`);
+      console.log(`[STORE] Setting step from ${this.currentStep} to ${step}`);
       this.currentStep = step;
     },
+
+    /**
+     * @description Memulai timer untuk reset state kembali ke Step 1 (Home) setelah 20 detik
+     */
+    startAutoReset() {
+       
+        if (autoResetTimer) {
+            clearTimeout(autoResetTimer);
+        }
+        console.log('🏠 [STORE] Starting auto return timer (20s) for reset.');
+        
+        
+        autoResetTimer = setTimeout(() => {
+            console.log('🏠 [STORE] Auto return to home triggered');
+            this.reset();
+        }, 20000); 
+    },
     
     reset() {
-      console.log('Resetting payment store');
+      console.log('--- [STORE] Resetting payment store ---');
       this.currentStep = 1;
       this.patientInfo = {
         name: '',
@@ -65,25 +87,26 @@ export const usePaymentStore = defineStore('payment', {
         display_amount: null,
         status: null,
         ip: null,
+        created_at: null,
       };
+        if (autoResetTimer) {
+            clearTimeout(autoResetTimer);
+            autoResetTimer = null;
+        }
     },
     
     updatePayment(apiResponse) {
-      console.log("=== UPDATE PAYMENT ===");
-      console.log("API Response:", apiResponse);
+      console.log("=== [STORE] UPDATE PAYMENT ===");
       
       // Validasi response
       if (!apiResponse?.data || !Array.isArray(apiResponse.data) || apiResponse.data.length === 0) {
-        console.error("Invalid API response structure");
+        console.error("Invalid API response structure or empty data array");
         return;
       }
       
       const apiData = apiResponse.data[0];
-      console.log("API Data:", apiData);
-
-      // Simpan data lama untuk comparison
-      const oldQrData = { ...this.qrData };
-
+      const oldStatus = this.qrData.status; // Simpan status lama
+      
       // Update qrData dengan semua properti dari API
       this.qrData = {
         qrvalue: apiData.qrvalue || apiData.qr_code || this.qrData.qrvalue,
@@ -92,22 +115,43 @@ export const usePaymentStore = defineStore('payment', {
         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
+        created_at: apiData.created_at || this.qrData.created_at, // Ambil 'created_at'
+        // Spread untuk properti lain yang mungkin ada (misal: transaction_id, reason)
         ...apiData
       };
       
       // Update patientInfo
       this.patientInfo = {
-        name: apiData.display_name || this.patientInfo.name || 'Unknown',
-        amount: apiData.display_amount || apiData.nominal || this.patientInfo.amount || '0',
+        name: this.qrData.display_name || this.patientInfo.name || 'Unknown',
+        amount: this.qrData.display_amount || 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}`);
+      // --- LOGIKA TRANSISI STATUS OTOMATIS (SUCCESS/FAIL) ---
+      const newStatus = this.qrData.status;
+
+      // Log perubahan status (jika ada)
+      if (oldStatus !== newStatus) {
+        console.log(`[STORE] Status changed: ${oldStatus} -> ${newStatus}`);
       }
 
+      // Proses transisi hanya jika kita berada di Step 2 (Menunggu Pembayaran)
+      // DAN status yang diterima berbeda dari status sebelumnya
+      if (this.currentStep === 2 && oldStatus !== newStatus) {
+          if (newStatus === "2") {
+              // Status Sukses
+              console.log('🎉 [STORE] Status 2 (SUKSES) diterima. Pindah ke Step 3.');
+              this.currentStep = 3;
+              this.startAutoReset(); 
+          } else if (newStatus === "0") {
+              // Status Gagal
+              console.log('❌ [STORE] Status 0 (GAGAL) diterima. Pindah ke Step 4.');
+              this.currentStep = 4;
+              this.startAutoReset(); 
+          }
+      }
+      // ------------------------------------------------------
+
       console.log("Updated qrData:", this.qrData);
       console.log("Updated patientInfo:", this.patientInfo);
       console.log("===================");