From 4e30edeaf8d95c4ae2f791ec59c56fc6cadaac32 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Tue, 16 Sep 2025 14:40:21 +0700
Subject: [PATCH] update flow & screen adjust

---
 components/Home.vue                           |  494 ++++---
 components/PembayaranGagal.vue                |   51 +
 .../{Success.vue => PembayaranSukses.vue}     |    0
 components/QRISPayment.vue                    |   45 +-
 nuxt.config.ts                                |    5 +
 package-lock.json                             | 1148 ++++++++++++++++-
 package.json                                  |    5 +-
 pages/index.vue                               |   20 +-
 stores/payment.ts                             |   58 +-
 9 files changed, 1521 insertions(+), 305 deletions(-)
 create mode 100644 components/PembayaranGagal.vue
 rename components/{Success.vue => PembayaranSukses.vue} (100%)

diff --git a/components/Home.vue b/components/Home.vue
index e4079d6..9346713 100644
--- a/components/Home.vue
+++ b/components/Home.vue
@@ -1,50 +1,106 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="contact-page-container">
     <div class="logo-section-contact">
       <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" 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" 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" class="logo-img-contact" contain />
-        <v-img src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png" width="60" height="60" class="logo-img-contact" contain />
+        <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"
+          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"
+          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"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
+          width="60"
+          height="60"
+          class="logo-img-contact"
+          contain
+        />
       </div>
     </div>
 
     <div class="content-section-contact">
       <div class="title-section-contact">
         <h1 class="main-title-contact">With Love We Serve</h1>
-        <p class="subtitle-contact">Kami Menyediakan Layanan Medis yang Dapat Anda Percayai</p>
+        <p class="subtitle-contact">
+          Kami Menyediakan Layanan Medis yang Dapat Anda Percayai
+        </p>
       </div>
-      
-      <!-- Enhanced Banner Carousel -->
+
       <div class="banner-carousel-container">
         <v-carousel
           v-model="currentSlide"
           :show-arrows="true"
           :hide-delimiters="false"
-          height="500"
-          cycle
-          interval="5000"
+          :cycle="false"
+          :interval="0"
           class="banner-carousel"
+          height="450"
+          :continuous="false"
         >
           <v-carousel-item
             v-for="(item, index) in carouselItems"
             :key="index"
-            :src="item.src"
-            :alt="item.alt"
-            cover
             class="carousel-item"
           >
-            <div class="carousel-overlay">
-              <div class="overlay-content">
-                <h3 class="overlay-title">{{ item.title }}</h3>
-                <p class="overlay-description">{{ item.description }}</p>
+            <template v-if="item.isImage">
+              <v-img :src="item.src" :alt="item.alt" cover class="fill-height">
+                <div class="carousel-overlay">
+                  <div class="overlay-content">
+                    <h3 class="overlay-title">{{ item.title }}</h3>
+                    <p class="overlay-description">{{ item.description }}</p>
+                  </div>
+                </div>
+              </v-img>
+            </template>
+            <template v-else>
+              <div class="video-container">
+                <iframe
+                  v-if="currentSlide === index"
+                  :src="getYouTubeEmbedUrl(item.videoId)"
+                  width="100%"
+                  height="100%"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                  class="youtube-iframe"
+                  @load="onVideoLoad"
+                  @error="onVideoError"
+                ></iframe>
+
+                <div
+                  v-else
+                  class="video-thumbnail"
+                  @click="currentSlide = index"
+                >
+                  <img
+                    :src="`https://img.youtube.com/vi/${item.videoId}/maxresdefault.jpg`"
+                    alt="Video thumbnail"
+                    class="thumbnail-img"
+                  />
+                  <div class="play-button-overlay">
+                    <v-icon color="white" size="64">mdi-play-circle</v-icon>
+                  </div>
+                </div>
               </div>
-            </div>
+            </template>
           </v-carousel-item>
         </v-carousel>
-        
-        <!-- Custom Navigation Dots -->
+
         <div class="custom-indicators">
           <span
             v-for="(item, index) in carouselItems"
@@ -55,31 +111,26 @@
         </div>
       </div>
 
-      <div class="cta-section-contact">
-        <!-- <v-btn
-          color="primary"
-          size="large"
-          variant="flat"
-          rounded="xl"
-            class="cta-button-contact"
-            @click="paymentStore.nextStep"
+      <!-- <div class="cta-section-contact">
+        <v-btn
+          @click="navigateToQrisPayment"
+          color="#FF9248"
+          class="cta-button"
+          x-large
         >
-          Lanjut ke Pembayaran
-        </v-btn> -->
-        
-        <!-- <v-btn
-          color="secondary"
-          size="large"
-          variant="outlined"
-          rounded="xl"
-          class="cta-button-contact mt-4"
-          @click="triggerDummyData"
+          <span class="button-text">LANJUT KE PEMBAYARAN</span>
+        </v-btn>
+        <v-btn
+          @click="navigateToDebugPage"
+          color="#FF9248"
+          class="cta-button debug-button"
+          x-large
         >
-          Debug ke Step 2
-        </v-btn> -->
-      </div>
+          <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">
@@ -112,60 +163,88 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { usePaymentStore } from '~/stores/payment';
+import { ref, watch, nextTick } from "vue";
+import { usePaymentStore } from "~/stores/payment";
 
 const paymentStore = usePaymentStore();
 const currentSlide = ref(0);
+const videoLoaded = ref({});
 
-// Carousel items - you can add more images/videos here
 const carouselItems = ref([
   {
     src: "https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg",
     alt: "RSUD Dr. Saiful Anwar Main Building",
     title: "Fasilitas Modern",
-    description: "Rumah sakit dengan teknologi medis terdepan"
+    description: "Rumah sakit dengan teknologi medis terdepan",
+    isImage: true,
+  },
+  {
+    videoId: "KQZFfRtMHe0",
+    isImage: false,
+    loaded: false,
   },
   {
     src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide1.jpg",
     alt: "Medical Services",
     title: "Pelayanan Terbaik",
-    description: "Tim medis profesional siap melayani 24 jam"
+    description: "Tim medis profesional siap melayani 24 jam",
+    isImage: true,
   },
-  {
-    src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide2.jpg",
-    alt: "Emergency Services",
-    title: "Unit Gawat Darurat",
-    description: "Layanan emergency yang cepat dan tepat"
-  },
-  {
-    src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide3.jpg",
-    alt: "Medical Equipment",
-    title: "Peralatan Canggih",
-    description: "Teknologi medis terkini untuk diagnosis akurat"
-  }
 ]);
 
+const getYouTubeEmbedUrl = (videoId) => {
+  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'
+  });
+  return `${baseUrl}${videoId}?${params.toString()}`;
+};
+
+const onVideoLoad = () => {
+  console.log('Video iframe loaded successfully');
+};
+
+const onVideoError = (error) => {
+  console.error('Video iframe error:', error);
+};
+
+const navigateToQrisPayment = () => {
+  console.log("Navigating to QRIS Payment...");
+
+};
+
+const navigateToDebugPage = () => {
+  console.log("Navigating to Debug Page...");
+
+};
+
+watch(currentSlide, (newSlide, oldSlide) => {
+
+});
 </script>
 
 <style scoped>
+
 .contact-page-container {
-  position: relative;
+  min-height: 100vh;
   width: 100%;
-  height: 100vh;
   background: white;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
 .orange-background-contact {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 15%;
-  min-height: 120px;
+  width: 100%;
+  height: clamp(120px, 15vh, 200px);
   background: #ff9248;
   border-top-left-radius: 60px;
   border-top-right-radius: 60px;
@@ -174,6 +253,7 @@ const carouselItems = ref([
   align-items: center;
   justify-content: center;
   padding-bottom: 20px;
+  margin-top: 2rem;
 }
 
 .logo-section-contact {
@@ -186,12 +266,16 @@ const carouselItems = ref([
 
 .logo-group-contact {
   display: flex;
-  gap: 40px;
+  gap: 2rem;
   align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .logo-img-contact {
   transition: transform 0.3s ease;
+  width: clamp(40px, 6vw, 60px) !important;
+  height: clamp(40px, 6vw, 60px) !important;
 }
 
 .logo-img-contact:hover {
@@ -201,13 +285,12 @@ const carouselItems = ref([
 .content-section-contact {
   position: relative;
   z-index: 2;
-  flex: 1;
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   padding: 10px 20px;
-  padding-bottom: 140px;
 }
 
 .title-section-contact {
@@ -218,7 +301,7 @@ const carouselItems = ref([
 .main-title-contact {
   color: #ff9248;
   font-size: clamp(2.2rem, 5vw, 3.5rem);
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-weight: 800;
   margin-bottom: 12px;
   line-height: 1.2;
@@ -227,15 +310,14 @@ const carouselItems = ref([
 .subtitle-contact {
   color: black;
   font-size: clamp(0.9rem, 2vw, 1.1rem);
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-weight: 500;
   margin: 0;
   max-width: 600px;
 }
 
-/* Enhanced Banner Carousel Styles */
 .banner-carousel-container {
-  width: 100%;
+  width: 90%;
   max-width: 900px;
   margin-bottom: 30px;
   position: relative;
@@ -247,11 +329,63 @@ const carouselItems = ref([
 .banner-carousel {
   border-radius: 20px;
   overflow: hidden;
+  height: 450px;
 }
 
 .carousel-item {
   position: relative;
-  height: 500px !important;
+  width: 100%;
+  height: 450px;
+}
+
+.video-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.youtube-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 20px;
+}
+
+.video-thumbnail {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thumbnail-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 20px;
+}
+
+.play-button-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  padding: 20px;
+  transition: all 0.3s ease;
+}
+
+.play-button-overlay:hover {
+  background: rgba(0, 0, 0, 0.9);
+  transform: translate(-50%, -50%) scale(1.1);
 }
 
 .carousel-overlay {
@@ -270,21 +404,20 @@ const carouselItems = ref([
 }
 
 .overlay-title {
-  font-size: 1.8rem;
+  font-size: clamp(1.4rem, 2vw, 1.8rem);
   font-weight: 700;
   margin-bottom: 8px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .overlay-description {
-  font-size: 1.1rem;
+  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
   font-weight: 400;
   margin: 0;
   opacity: 0.9;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
-/* Custom Indicators */
 .custom-indicators {
   position: absolute;
   bottom: 15px;
@@ -313,10 +446,9 @@ const carouselItems = ref([
   background: rgba(255, 255, 255, 0.8);
 }
 
-/* Contact Info Styles */
 .contact-info-section-contact {
   display: flex;
-  gap: 60px; 
+  gap: 2rem;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
@@ -331,8 +463,8 @@ const carouselItems = ref([
 }
 
 .contact-icon-contact {
-  width: 50px;
-  height: 50px;
+  width: clamp(40px, 8vw, 50px);
+  height: clamp(40px, 8vw, 50px);
   border-radius: 50%;
   background: white;
   display: flex;
@@ -348,8 +480,8 @@ const carouselItems = ref([
 
 .contact-text-contact {
   color: white;
-  font-size: 14px;
-  font-family: 'Roboto', sans-serif;
+  font-size: clamp(12px, 2vw, 14px);
+  font-family: "Roboto", sans-serif;
   font-weight: 500;
   white-space: nowrap;
 }
@@ -362,194 +494,22 @@ const carouselItems = ref([
   margin-top: 20px;
 }
 
-.cta-button-contact {
-  padding: 12px 40px !important;
-  font-size: 1.1rem !important;
-  font-weight: 600 !important;
-  letter-spacing: 0.5px;
-  transition: all 0.3s ease;
-  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%) !important;
+.cta-button {
+  width: 100%;
+  max-width: 300px;
+  font-weight: 700;
+  letter-spacing: 1px;
 }
 
-.cta-button-contact:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 30px rgba(255, 152, 0, 0.4);
+.debug-button {
+  background: #808080 !important;
 }
 
-/* Responsive Design */
-@media (max-width: 768px) {
-  .banner-carousel-container {
-    max-width: 100%;
-    margin: 0 -20px 20px -20px;
-    border-radius: 0;
-  }
-  
-  .banner-carousel {
-    border-radius: 0;
-  }
-  
-  .carousel-item {
-    height: 300px !important;
-  }
-  
-  .overlay-title {
-    font-size: 1.4rem;
-  }
-  
-  .overlay-description {
-    font-size: 0.95rem;
-  }
-  
-  .carousel-overlay {
-    padding: 20px 20px 20px;
-  }
-  
-  .contact-info-section-contact {
-    gap: 30px;
-  }
-  
-  .logo-group-contact {
-    gap: 20px;
-  }
-  
-  .logo-img-contact {
-    width: 45px !important;
-    height: 45px !important;
-  }
-}
-
-/* Tablet Landscape Optimizations */
-@media (orientation: landscape) and (min-width: 768px) {
-  .carousel-item {
-    height: 400px !important;
-  }
-  
-  .main-title-contact { 
-    font-size: 2.8rem; 
-  }
-  
-  .subtitle-contact { 
-    font-size: 1.05rem; 
-  }
-  
-  .contact-info-section-contact { 
-    gap: 40px; 
-  }
-  
-  .logo-group-contact { 
-    gap: 30px; 
-  }
-  
-  .logo-img-contact {
-    width: 50px !important;
-    height: 50px !important;
-  }
-  
-  .contact-text-contact { 
-    font-size: 12px; 
-  }
-  
-  .contact-icon-contact { 
-    width: 40px; 
-    height: 40px; 
-  }
-  
-  @media (min-width: 900px) and (max-width: 1200px) {
-    .content-section-contact {
-      padding-bottom: 140px;
-    }
-    
-    .orange-background-contact {
-      height: 150px;
-      padding-bottom: 10px;
-    }
-    
-    .carousel-item {
-      height: 450px !important;
-    }
-  }
-}
-
-/* Small tablet adjustments */
-@media (max-width: 900px) and (orientation: landscape) {
-  .main-title-contact { 
-    font-size: 2.2rem; 
-  }
-  
-  .contact-info-section-contact { 
-    gap: 25px; 
-  }
-  
-  .logo-group-contact { 
-    gap: 20px; 
-  }
-  
-  .content-section-contact {
-    padding-bottom: 120px;
-  }
-  
-  .orange-background-contact {
-    height: 140px;
-  }
-  
-  .carousel-item {
-    height: 350px !important;
-  }
-}
-
-/* Very small tablet landscape */
-@media (max-width: 768px) and (orientation: landscape) {
-  .logo-group-contact { 
-    gap: 15px; 
-  }
-  
-  .logo-img-contact {
-    width: 35px !important;
-    height: 35px !important;
-  }
-  
-  .main-title-contact { 
-    font-size: 1.8rem; 
-  }
-  
-  .contact-info-section-contact { 
-    gap: 20px; 
-  }
-  
-  .contact-text-contact { 
-    font-size: 10px; 
-  }
-  
-  .contact-icon-contact { 
-    width: 35px; 
-    height: 35px; 
-  }
-  
-  .content-section-contact {
-    padding-bottom: 100px;
-  }
-  
-  .orange-background-contact {
-    height: 120px;
-  }
-  
-  .carousel-item {
-    height: 250px !important;
-  }
-}
-
-/* Hide Vuetify default carousel navigation */
 :deep(.v-carousel__controls) {
   display: none;
 }
 
-/* Style Vuetify carousel arrows */
-:deep(.v-btn--icon.v-carousel__controls__item) {
-  background: rgba(255, 146, 72, 0.8) !important;
-  color: white !important;
-}
-
-:deep(.v-btn--icon.v-carousel__controls__item:hover) {
-  background: rgba(255, 146, 72, 1) !important;
+:deep(.v-carousel__controls--bottom) {
+  bottom: 50px !important;
 }
 </style>
\ No newline at end of file
diff --git a/components/PembayaranGagal.vue b/components/PembayaranGagal.vue
new file mode 100644
index 0000000..fe60dab
--- /dev/null
+++ b/components/PembayaranGagal.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="payment-step">
+    <v-card-text class="pa-8 text-center">
+      <div class="failure-container">
+        <v-icon icon="mdi-close-circle" size="80" class="text-red mb-4" />
+        <h2 class="text-h4 mb-4 font-weight-bold text-dark">Pembayaran Gagal</h2>
+        <p class="text-h6 text-grey-darken-1 mb-6">
+          Terjadi kesalahan saat memproses<br />pembayaran Anda.
+        </p>
+        <div class="button-group">
+          <v-btn color="primary" size="large" variant="flat" rounded="xl" @click="retryPayment" class="mb-3">
+            Coba Lagi
+          </v-btn>
+          <v-btn color="grey-darken-1" size="large" variant="outlined" rounded="xl" @click="paymentStore.reset">
+            Kembali ke Awal
+          </v-btn>
+        </div>
+      </div>
+    </v-card-text>
+  </div>
+</template>
+
+<script setup>
+import { usePaymentStore } from '~/stores/payment';
+const paymentStore = usePaymentStore();
+
+const retryPayment = () => {
+  // Logika untuk mencoba lagi pembayaran
+  // Misalnya, memanggil API backend untuk mendapatkan tagihan baru
+  // Untuk saat ini, kita bisa mensimulasikannya
+  console.log("Mencoba pembayaran lagi...");
+  paymentStore.setPaymentStatus('aktif');
+};
+</script>
+
+<style scoped>
+.failure-container {
+  padding: 40px 20px;
+}
+.text-red {
+  color: #f44336 !important;
+}
+.text-dark {
+  color: #424242 !important;
+}
+.button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/components/Success.vue b/components/PembayaranSukses.vue
similarity index 100%
rename from components/Success.vue
rename to components/PembayaranSukses.vue
diff --git a/components/QRISPayment.vue b/components/QRISPayment.vue
index 6e9087f..cac9414 100644
--- a/components/QRISPayment.vue
+++ b/components/QRISPayment.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="payment-step">
     <v-card-text class="pa-8 text-center">
-      <div class="mb-4">
+      <div class="mb-2">
         <v-img
-          src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/QRIS_logo.svg/1200px-QRIS_logo.svg.png"
-          height="35"
+          src="https://iconlogovector.com/uploads/images/2024/03/lg-65ffda68a47ee-QRIS.webp"
+          height="100"
           class="mx-auto"
           contain
         />
@@ -19,11 +19,7 @@
           height="280"
           elevation="0"
         >
-          <NuxtQrcode
-            :value="paymentStore.qrData.qrvalue"
-            tag="svg"
-            :options="{ width: 280 }"
-          />
+          <img ref="qrCodeImage" alt="QR Code" width="280" height="280" />
         </v-card>
       </div>
 
@@ -54,14 +50,12 @@
             {{ paymentStore.qrData.display_nobill }}
           </v-col>
         </v-row>
-        
+
         <v-row dense class="mb-4">
           <v-col cols="5" class="text-left">
             <strong>BERLAKU SAMPAI:</strong>
           </v-col>
-          <v-col cols="7" class="text-left text-red">
-            N/A
-          </v-col>
+          <v-col cols="7" class="text-left text-red"> N/A </v-col>
         </v-row>
       </div>
 
@@ -79,11 +73,36 @@
 
 <script setup>
 import { usePaymentStore } from "~/stores/payment";
+import QRCode from 'qrcode';
+import { ref, onMounted, watch } from 'vue';
+
 const paymentStore = usePaymentStore();
+const qrCodeImage = ref(null);
+
+const generateQRCode = async () => {
+    const qrValue = paymentStore.qrData.qrvalue;
+    if (qrValue) {
+        try {
+            const dataUrl = await QRCode.toDataURL(qrValue);
+            if (qrCodeImage.value) {
+                qrCodeImage.value.src = dataUrl;
+            }
+        } catch (error) {
+            console.error('Failed to generate QR Code:', error);
+        }
+    }
+};
+
+onMounted(() => {
+    generateQRCode();
+});
+
+watch(() => paymentStore.qrData, () => {
+    generateQRCode();
+});
 </script>
 
 <style scoped>
-/* Style tetap sama */
 .payment-step {
   background: rgb(233, 233, 233);
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 742577f..9eae2d9 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -12,6 +12,7 @@ export default defineNuxtConfig({
     '@nuxt/test-utils',
     '@nuxt/ui',
     'nuxt-qrcode',
+    
     '@pinia/nuxt',
     (_options, nuxt) => {
       nuxt.hooks.hook('vite:extendConfig', (config) => {
@@ -28,6 +29,10 @@ export default defineNuxtConfig({
   build: {
     transpile: ['vuetify'],
   },
+  devServer: {
+    host: "10.10.150.114",
+    port: 3000,
+  },
   app: {
     head: {
       viewport: 'width=device-width,initial-scale=1',
diff --git a/package-lock.json b/package-lock.json
index 92be866..2313239 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,12 +19,15 @@
         "eslint": "^9.34.0",
         "nuxt": "^3.19.0",
         "pinia": "^3.0.3",
+        "qrcode": "^1.5.4",
         "typescript": "^5.9.2",
         "vue": "^3.5.20",
         "vue-router": "^4.5.1",
-        "vuetify": "^3.4.0"
+        "vuetify": "^3.4.0",
+        "youtube-vue3": "^0.1.15"
       },
       "devDependencies": {
+        "@types/qrcode": "^1.5.5",
         "nuxt-qrcode": "^0.4.8",
         "sass-embedded": "^1.92.1",
         "vite-plugin-vuetify": "^2.1.2",
@@ -4860,18 +4863,50 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
+      "license": "MIT"
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "24.3.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.1.tgz",
+      "integrity": "sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.10.0"
+      }
+    },
+    "node_modules/@types/normalize-package-data": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
+      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
+      "license": "MIT"
+    },
     "node_modules/@types/parse-path": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/parse-path/-/parse-path-7.0.3.tgz",
       "integrity": "sha512-LriObC2+KYZD3FzCrgWGv/qufdUy4eXrxcLgQMfYXgPbLIecKIsVBaQgUPmxSSLcjmYbDTQbMgr6qr6l/eb7Bg==",
       "license": "MIT"
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.5.tgz",
+      "integrity": "sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -5946,6 +5981,22 @@
         "node": ">= 14"
       }
     },
+    "node_modules/aggregate-error": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-4.0.1.tgz",
+      "integrity": "sha512-0poP0T7el6Vq3rstR8Mn4V/IQrpBLO6POkUSrN7RhyY+GF/InCFShQzsQ39T25gkHhLgSLByyAz+Kjb+c2L98w==",
+      "license": "MIT",
+      "dependencies": {
+        "clean-stack": "^4.0.0",
+        "indent-string": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -6101,6 +6152,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/arrify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-3.0.0.tgz",
+      "integrity": "sha512-tLkvA81vQG/XqE2mjDkGQHoOINtMHtysSnemrmoGe6PydDPMRbVugqyk4A6V/WDWEfm3l+0d8anA9r8cv/5Jaw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ast-kit": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.1.2.tgz",
@@ -6628,6 +6691,57 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-keys": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz",
+      "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==",
+      "license": "MIT",
+      "dependencies": {
+        "camelcase": "^6.3.0",
+        "map-obj": "^4.1.0",
+        "quick-lru": "^5.1.1",
+        "type-fest": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/camelcase-keys/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/camelcase-keys/node_modules/type-fest": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6837,6 +6951,21 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/clean-stack": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-4.2.0.tgz",
+      "integrity": "sha512-LYv6XPxoyODi36Dp976riBtSY27VmFo+MKqEU9QCCWyTrdEPDog+RWA7xQWHi6Vbp61j5c4cdzzX1NidnwtUWg==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "5.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/clipboardy": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-4.0.0.tgz",
@@ -7146,6 +7275,17 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.45.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.1.tgz",
+      "integrity": "sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.45.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.45.1.tgz",
@@ -7165,6 +7305,164 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "license": "MIT"
     },
+    "node_modules/cp-file": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/cp-file/-/cp-file-9.1.0.tgz",
+      "integrity": "sha512-3scnzFj/94eb7y4wyXRWwvzLFaQp87yyfTnChIjlfYrVqp5lVO3E2hIJMeQIltUT0K2ZAB3An1qXcBmwGyvuwA==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "nested-error-stacks": "^2.0.0",
+        "p-event": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cpy": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cpy/-/cpy-9.0.1.tgz",
+      "integrity": "sha512-D9U0DR5FjTCN3oMTcFGktanHnAG5l020yvOCR1zKILmAyPP7I/9pl6NFgRbDcmSENtbK1sQLBz1p9HIOlroiNg==",
+      "license": "MIT",
+      "dependencies": {
+        "arrify": "^3.0.0",
+        "cp-file": "^9.1.0",
+        "globby": "^13.1.1",
+        "junk": "^4.0.0",
+        "micromatch": "^4.0.4",
+        "nested-error-stacks": "^2.1.0",
+        "p-filter": "^3.0.0",
+        "p-map": "^5.3.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cpy-cli": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/cpy-cli/-/cpy-cli-4.2.0.tgz",
+      "integrity": "sha512-b04b+cbdr29CdpREPKw/itrfjO43Ty0Aj7wRM6M6LoE4GJxZJCk9Xp+Eu1IqztkKh3LxIBt1tDplENsa6KYprg==",
+      "license": "MIT",
+      "dependencies": {
+        "cpy": "^9.0.0",
+        "meow": "^10.1.2"
+      },
+      "bin": {
+        "cpy": "cli.js"
+      },
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cpy-cli/node_modules/decamelize": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz",
+      "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cpy-cli/node_modules/meow": {
+      "version": "10.1.5",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz",
+      "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/minimist": "^1.2.2",
+        "camelcase-keys": "^7.0.0",
+        "decamelize": "^5.0.0",
+        "decamelize-keys": "^1.1.0",
+        "hard-rejection": "^2.1.0",
+        "minimist-options": "4.1.0",
+        "normalize-package-data": "^3.0.2",
+        "read-pkg-up": "^8.0.0",
+        "redent": "^4.0.0",
+        "trim-newlines": "^4.0.2",
+        "type-fest": "^1.2.2",
+        "yargs-parser": "^20.2.9"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cpy-cli/node_modules/type-fest": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cpy-cli/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cpy/node_modules/globby": {
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+      "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
+      "license": "MIT",
+      "dependencies": {
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.3.0",
+        "ignore": "^5.2.4",
+        "merge2": "^1.4.1",
+        "slash": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cpy/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/cpy/node_modules/slash": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/crc-32": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@@ -7496,6 +7794,40 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decamelize-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz",
+      "integrity": "sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==",
+      "license": "MIT",
+      "dependencies": {
+        "decamelize": "^1.1.0",
+        "map-obj": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/decamelize-keys/node_modules/map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decode-named-character-reference": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
@@ -7682,6 +8014,33 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dir-glob/node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -8002,6 +8361,21 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/error-ex/node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
     "node_modules/error-stack-parser-es": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-1.0.5.tgz",
@@ -9278,6 +9652,15 @@
       "integrity": "sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==",
       "license": "MIT"
     },
+    "node_modules/hard-rejection": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
+      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -9628,6 +10011,36 @@
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
+    "node_modules/hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/hosted-git-info/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/hosted-git-info/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
     "node_modules/html-void-elements": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
@@ -10331,6 +10744,12 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
     "node_modules/json-schema-to-typescript": {
       "version": "15.0.4",
       "resolved": "https://registry.npmjs.org/json-schema-to-typescript/-/json-schema-to-typescript-15.0.4.tgz",
@@ -10415,6 +10834,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/junk": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/junk/-/junk-4.0.1.tgz",
+      "integrity": "sha512-Qush0uP+G8ZScpGMZvHUiRfI0YBWuB3gVBYlI0v0vvOJt5FLicco+IkP0a50LqTTQhmts/m6tP5SWE+USyIvcQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -10424,6 +10855,15 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -10768,6 +11208,12 @@
         "url": "https://github.com/sponsors/antonk52"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
     "node_modules/listhen": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.9.0.tgz",
@@ -10804,6 +11250,12 @@
       "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
       "license": "MIT"
     },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==",
+      "license": "MIT"
+    },
     "node_modules/load-tsconfig": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/load-tsconfig/-/load-tsconfig-0.2.5.tgz",
@@ -10950,6 +11402,42 @@
         "source-map-js": "^1.2.0"
       }
     },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/map-obj": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -11879,6 +12367,38 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/minimist-options": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
+      "license": "MIT",
+      "dependencies": {
+        "arrify": "^1.0.1",
+        "is-plain-obj": "^1.1.0",
+        "kind-of": "^6.0.3"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/minimist-options/node_modules/arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/minimist-options/node_modules/is-plain-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+      "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -12036,6 +12556,12 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "license": "MIT"
     },
+    "node_modules/nested-error-stacks": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-2.1.1.tgz",
+      "integrity": "sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==",
+      "license": "MIT"
+    },
     "node_modules/nitropack": {
       "version": "2.12.5",
       "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-2.12.5.tgz",
@@ -12280,6 +12806,21 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/normalize-package-data": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+      "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "hosted-git-info": "^4.0.1",
+        "is-core-module": "^2.5.0",
+        "semver": "^7.3.4",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -12796,6 +13337,45 @@
         "oxc-parser": ">=0.72.0"
       }
     },
+    "node_modules/p-event": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/p-event/-/p-event-4.2.0.tgz",
+      "integrity": "sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "p-timeout": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-filter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-filter/-/p-filter-3.0.0.tgz",
+      "integrity": "sha512-QtoWLjXAW++uTX67HZQz1dbTpqBfiidsB6VtQUC9iR85S120+s0T5sO6s+B5MLzFcZkrEd/DGMmCjR+f2Qpxwg==",
+      "license": "MIT",
+      "dependencies": {
+        "p-map": "^5.1.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/p-limit": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
@@ -12826,6 +13406,42 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-map": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-5.5.0.tgz",
+      "integrity": "sha512-VFqfGDHlx87K66yZrNdI4YGtD70IRyd+zSvgks6mzHPRNkoKy+9EKP4SFC77/vTTQYmRmti7dvqC+m5jBrBAcg==",
+      "license": "MIT",
+      "dependencies": {
+        "aggregate-error": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-timeout": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+      "license": "MIT",
+      "dependencies": {
+        "p-finally": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -12890,6 +13506,24 @@
         "parse-statements": "1.0.11"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse-path": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-7.1.0.tgz",
@@ -13095,6 +13729,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -13760,6 +14403,206 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/qrcode/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/quansync": {
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
@@ -13796,6 +14639,18 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/radix3": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -13863,6 +14718,147 @@
         "destr": "^2.0.3"
       }
     },
+    "node_modules/read-pkg": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz",
+      "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^3.0.2",
+        "parse-json": "^5.2.0",
+        "type-fest": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz",
+      "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^5.0.0",
+        "read-pkg": "^6.0.0",
+        "type-fest": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/type-fest": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg/node_modules/type-fest": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
@@ -13913,6 +14909,22 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/redent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz",
+      "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==",
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^5.0.0",
+        "strip-indent": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/redis-errors": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz",
@@ -14300,6 +15312,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -14963,6 +15981,12 @@
         "node": ">= 18"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -15059,6 +16083,33 @@
         "@types/hast": "^3.0.4"
       }
     },
+    "node_modules/shortid": {
+      "version": "2.2.17",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.17.tgz",
+      "integrity": "sha512-GpbM3gLF1UUXZvQw6MCyulHkWbRseNO4cyBEZresZRorwl1+SLu1ZdqgVtuwqz8mB6RpwPkm541mYSqrKyJSaA==",
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.8"
+      }
+    },
+    "node_modules/shortid/node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -15157,6 +16208,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/sister": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
+      "integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -15311,6 +16368,26 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-correct/node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
     "node_modules/spdx-exceptions": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
@@ -15892,6 +16969,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/trim-newlines": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz",
+      "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/trim-trailing-lines": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-2.1.0.tgz",
@@ -16016,6 +17105,13 @@
         "unplugin": "^2.1.0"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
+      "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/unenv": {
       "version": "2.0.0-rc.20",
       "resolved": "https://registry.npmjs.org/unenv/-/unenv-2.0.0-rc.20.tgz",
@@ -16697,6 +17793,26 @@
         }
       }
     },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/validate-npm-package-license/node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
     "node_modules/varint": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
@@ -17430,6 +18546,12 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -17744,6 +18866,30 @@
         "error-stack-parser-es": "^1.0.5"
       }
     },
+    "node_modules/youtube-player": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.6.0.tgz",
+      "integrity": "sha512-x95fBbxV7eZ1ZsFtMLMcSGX0Jb/GPPj69RsooyEDVa9bzvvNZ4d5VjnBVBYoY85008VefkLvtaV+b+l38R/LMQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "load-script": "^1.0.0",
+        "sister": "^3.0.0"
+      }
+    },
+    "node_modules/youtube-vue3": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/youtube-vue3/-/youtube-vue3-0.1.15.tgz",
+      "integrity": "sha512-UrD6ZjlXQrRyXhbp5EZxID+u+V2BgdiAfVH8eXfHwbdPZ1RUMvA+qbc2JdsBKBHnuXak+47YzaIUEwVurN3+aw==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^3.6.5",
+        "cpy-cli": "^4.0.0",
+        "shortid": "^2.2.16",
+        "vue": "^3.2.31",
+        "youtube-player": "^5.5.2"
+      }
+    },
     "node_modules/zip-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-6.0.1.tgz",
diff --git a/package.json b/package.json
index 89b50b1..d82dd57 100644
--- a/package.json
+++ b/package.json
@@ -22,12 +22,15 @@
     "eslint": "^9.34.0",
     "nuxt": "^3.19.0",
     "pinia": "^3.0.3",
+    "qrcode": "^1.5.4",
     "typescript": "^5.9.2",
     "vue": "^3.5.20",
     "vue-router": "^4.5.1",
-    "vuetify": "^3.4.0"
+    "vuetify": "^3.4.0",
+    "youtube-vue3": "^0.1.15"
   },
   "devDependencies": {
+    "@types/qrcode": "^1.5.5",
     "nuxt-qrcode": "^0.4.8",
     "sass-embedded": "^1.92.1",
     "vite-plugin-vuetify": "^2.1.2",
diff --git a/pages/index.vue b/pages/index.vue
index 9c4f335..2b5cfdd 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -23,10 +23,10 @@
 import { usePaymentStore } from '~/stores/payment';
 import Home from '~/components/Home.vue';
 import QRISPayment from '~/components/QRISPayment.vue';
-import Success from '~/components/Success.vue';
+import Success from '~/components/PembayaranSukses.vue';
 
 const paymentStore = usePaymentStore();
-const apiURL = 'http://10.10.150.188:8084/api/v1/qris';
+const apiURL = 'http://10.10.150.37:8084/api/v1/qris';
 
 const paymentSteps = {
   1: Home,
@@ -38,34 +38,29 @@ const activeComponent = computed(() => {
   return paymentSteps[paymentStore.currentStep] || Home;
 });
 
-// useFetch untuk pengambilan data dari API
 const { data: apiData, refresh } = await useFetch(apiURL, {
   server: false,
+  immediate: false,
 });
 
 watch(apiData, (newData) => {
   if (newData && newData.data && newData.data.length > 0) {
-    const loketIP = '10.10.150.106'; 
-    const relevantData = newData.data.find(item => item.ip === loketIP);
-
+    const relevantData = newData.data[0];
     if (relevantData) {
-      paymentStore.updatePayment(newData);
-      // Data ditemukan, hentikan polling
+      paymentStore.updatePayment({ data: [relevantData] });
       clearInterval(pollingInterval);
-      console.log('Polling stopped. Data received via useFetch.');
+      console.log('Polling stopped. Data received from API.');
     }
   }
 });
 
 let pollingInterval = null;
 
-// refresh setiap 5 detik untuk mengecek data
 onMounted(() => {
   if (paymentStore.currentStep === 1) {
-    refresh();
     pollingInterval = setInterval(() => {
       refresh();
-    }, 5000);
+    }, 500000);
   }
 });
 
@@ -78,7 +73,6 @@ onUnmounted(() => {
 
 watch(() => paymentStore.currentStep, (newStep, oldStep) => {
   if (newStep === 1 && oldStep !== 1) {
-    refresh();
     pollingInterval = setInterval(() => {
       refresh();
     }, 5000);
diff --git a/stores/payment.ts b/stores/payment.ts
index dc01e47..c96c5d0 100644
--- a/stores/payment.ts
+++ b/stores/payment.ts
@@ -7,10 +7,23 @@ export const usePaymentStore = defineStore('payment', {
     patientInfo: {
       name: '',
       amount: '',
-      expiry: '', // Tidak ada di API, bisa dihapus atau diisi null
+      expiry: '',
+    },
+    // Berikan default object instead of null
+    qrData: {
+      qrvalue: null,
+      display_nobill: null,
+      display_name: null,
+      display_amount: null
     },
-    qrData: null, // Properti baru untuk menyimpan data QRIS dari API
   }),
+  
+  getters: {
+    // Tambahkan getter untuk safe access
+    hasQrData: (state) => state.qrData && state.qrData.qrvalue,
+    safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com'
+  },
+  
   actions: {
     nextStep() {
       this.currentStep++;
@@ -25,21 +38,46 @@ export const usePaymentStore = defineStore('payment', {
         amount: '',
         expiry: '',
       };
-      this.qrData = null; // Reset data QR
+      // Reset ke default object, bukan null
+      this.qrData = {
+        qrvalue: null,
+        display_nobill: null,
+        display_name: null,
+        display_amount: null
+      };
     },
-    // Action baru untuk menerima dan memproses data dari backend
     updatePayment(apiResponse) {
-      // Ambil objek data pertama dari array 'data'
+      console.log("API Response:", apiResponse);
+      
+      // Validasi response
+      if (!apiResponse?.data || !Array.isArray(apiResponse.data) || apiResponse.data.length === 0) {
+        console.error("Invalid API response structure");
+        return;
+      }
+      
       const apiData = apiResponse.data[0];
+      console.log("API Data:", apiData);
 
-      // Perbarui state dengan data yang sesuai
-      this.qrData = apiData;
+      // Update qrData dengan validasi
+      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
+      };
+      
+      // Update patientInfo
       this.patientInfo = {
-        name: apiData.display_name,
-        amount: apiData.display_amount,
+        name: apiData.display_name || 'Unknown',
+        amount: apiData.display_amount || '0',
+        expiry: this.patientInfo.expiry, // keep existing value
       };
 
-      // Ganti step secara otomatis
+      console.log("Updated qrData:", this.qrData);
+      console.log("Updated patientInfo:", this.patientInfo);
+
+      // Ganti step
       this.currentStep = 2;
     },
   },