update komponen

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>
+</style>

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;

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);
 }
 

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 {