From edec5bb339ce99994abafe039ddd24e85ea08d13 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Fri, 12 Sep 2025 09:54:00 +0700
Subject: [PATCH] update async dan interface

---
 components/Home.vue         | 555 ++++++++++++++++++++++++++
 components/QRISPayment.vue  | 119 ++++++
 components/Success.vue      |  38 ++
 composables/useWebSocket.ts |  43 ++
 nuxt.config.ts              |   1 +
 package-lock.json           | 165 +++++++-
 package.json                |   1 +
 pages/Home.vue              | 775 ------------------------------------
 pages/figma.vue             | 541 -------------------------
 pages/index.vue             | 112 ++++++
 stores/payment.ts           |  53 ++-
 stores/payment1.ts          |  37 ++
 12 files changed, 1086 insertions(+), 1354 deletions(-)
 create mode 100644 components/Home.vue
 create mode 100644 components/QRISPayment.vue
 create mode 100644 components/Success.vue
 create mode 100644 composables/useWebSocket.ts
 delete mode 100644 pages/Home.vue
 delete mode 100644 pages/figma.vue
 create mode 100644 pages/index.vue
 create mode 100644 stores/payment1.ts

diff --git a/components/Home.vue b/components/Home.vue
new file mode 100644
index 0000000..e4079d6
--- /dev/null
+++ b/components/Home.vue
@@ -0,0 +1,555 @@
+<!-- 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 />
+      </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>
+      </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"
+          class="banner-carousel"
+        >
+          <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>
+              </div>
+            </div>
+          </v-carousel-item>
+        </v-carousel>
+        
+        <!-- Custom Navigation Dots -->
+        <div class="custom-indicators">
+          <span
+            v-for="(item, index) in carouselItems"
+            :key="index"
+            :class="['indicator-dot', { active: currentSlide === index }]"
+            @click="currentSlide = index"
+          />
+        </div>
+      </div>
+
+      <div class="cta-section-contact">
+        <!-- <v-btn
+          color="primary"
+          size="large"
+          variant="flat"
+          rounded="xl"
+            class="cta-button-contact"
+            @click="paymentStore.nextStep"
+        >
+          Lanjut ke Pembayaran
+        </v-btn> -->
+        
+        <!-- <v-btn
+          color="secondary"
+          size="large"
+          variant="outlined"
+          rounded="xl"
+          class="cta-button-contact mt-4"
+          @click="triggerDummyData"
+        >
+          Debug ke Step 2
+        </v-btn> -->
+      </div>
+    </div>
+    
+    <div class="orange-background-contact">
+      <div class="contact-info-section-contact">
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact whatsapp-icon">
+            <v-icon color="#25D366" size="28">mdi-whatsapp</v-icon>
+          </div>
+          <div class="contact-text-contact">+62 815-5560-6668</div>
+        </div>
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact instagram-icon">
+            <v-icon color="#E1306C" size="28">mdi-instagram</v-icon>
+          </div>
+          <div class="contact-text-contact">rssasaifulanwar</div>
+        </div>
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact phone-icon">
+            <v-icon color="#FF9248" size="28">mdi-phone</v-icon>
+          </div>
+          <div class="contact-text-contact">0341-362101</div>
+        </div>
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact web-icon">
+            <v-icon color="#2196F3" size="28">mdi-web</v-icon>
+          </div>
+          <div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { usePaymentStore } from '~/stores/payment';
+
+const paymentStore = usePaymentStore();
+const currentSlide = ref(0);
+
+// 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"
+  },
+  {
+    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"
+  },
+  {
+    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"
+  }
+]);
+
+</script>
+
+<style scoped>
+.contact-page-container {
+  position: relative;
+  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;
+  background: #ff9248;
+  border-top-left-radius: 60px;
+  border-top-right-radius: 60px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 20px;
+}
+
+.logo-section-contact {
+  position: relative;
+  z-index: 2;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.logo-group-contact {
+  display: flex;
+  gap: 40px;
+  align-items: center;
+}
+
+.logo-img-contact {
+  transition: transform 0.3s ease;
+}
+
+.logo-img-contact:hover {
+  transform: scale(1.1);
+}
+
+.content-section-contact {
+  position: relative;
+  z-index: 2;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px 20px;
+  padding-bottom: 140px;
+}
+
+.title-section-contact {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.main-title-contact {
+  color: #ff9248;
+  font-size: clamp(2.2rem, 5vw, 3.5rem);
+  font-family: 'Roboto', sans-serif;
+  font-weight: 800;
+  margin-bottom: 12px;
+  line-height: 1.2;
+}
+
+.subtitle-contact {
+  color: black;
+  font-size: clamp(0.9rem, 2vw, 1.1rem);
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  margin: 0;
+  max-width: 600px;
+}
+
+/* Enhanced Banner Carousel Styles */
+.banner-carousel-container {
+  width: 100%;
+  max-width: 900px;
+  margin-bottom: 30px;
+  position: relative;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+}
+
+.banner-carousel {
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.carousel-item {
+  position: relative;
+  height: 500px !important;
+}
+
+.carousel-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  color: white;
+  padding: 40px 30px 30px;
+  z-index: 2;
+}
+
+.overlay-content {
+  max-width: 600px;
+}
+
+.overlay-title {
+  font-size: 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-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;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 12px;
+  z-index: 3;
+}
+
+.indicator-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.indicator-dot.active {
+  background: #ff9248;
+  transform: scale(1.2);
+}
+
+.indicator-dot:hover {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+/* Contact Info Styles */
+.contact-info-section-contact {
+  display: flex;
+  gap: 60px; 
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.contact-item-contact {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.contact-icon-contact {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.contact-icon-contact:hover {
+  transform: scale(1.1);
+}
+
+.contact-text-contact {
+  color: white;
+  font-size: 14px;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.cta-section-contact {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  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-contact:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 30px rgba(255, 152, 0, 0.4);
+}
+
+/* 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;
+}
+</style>
\ No newline at end of file
diff --git a/components/QRISPayment.vue b/components/QRISPayment.vue
new file mode 100644
index 0000000..6e9087f
--- /dev/null
+++ b/components/QRISPayment.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="payment-step">
+    <v-card-text class="pa-8 text-center">
+      <div class="mb-4">
+        <v-img
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/QRIS_logo.svg/1200px-QRIS_logo.svg.png"
+          height="35"
+          class="mx-auto"
+          contain
+        />
+      </div>
+
+      <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2>
+
+      <div class="qr-container mb-6">
+        <v-card
+          class="qr-code mx-auto d-flex align-center justify-center"
+          width="280"
+          height="280"
+          elevation="0"
+        >
+          <NuxtQrcode
+            :value="paymentStore.qrData.qrvalue"
+            tag="svg"
+            :options="{ width: 280 }"
+          />
+        </v-card>
+      </div>
+
+      <div class="payment-details">
+        <v-row dense class="mb-2">
+          <v-col cols="5" class="text-left">
+            <strong>NAMA PASIEN:</strong>
+          </v-col>
+          <v-col cols="7" class="text-left">
+            {{ paymentStore.patientInfo.name }}
+          </v-col>
+        </v-row>
+
+        <v-row dense class="mb-2">
+          <v-col cols="5" class="text-left">
+            <strong>NOMINAL:</strong>
+          </v-col>
+          <v-col cols="7" class="text-left">
+            {{ paymentStore.patientInfo.amount }}
+          </v-col>
+        </v-row>
+
+        <v-row dense class="mb-2">
+          <v-col cols="5" class="text-left">
+            <strong>NOMOR TAGIHAN:</strong>
+          </v-col>
+          <v-col cols="7" class="text-left">
+            {{ 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-row>
+      </div>
+
+      <div class="d-flex gap-4 justify-center">
+        <v-btn color="grey" variant="outlined" @click="paymentStore.prevStep">
+          Kembali
+        </v-btn>
+        <v-btn color="primary" variant="flat" @click="paymentStore.nextStep">
+          Simulasi Pembayaran
+        </v-btn>
+      </div>
+    </v-card-text>
+  </div>
+</template>
+
+<script setup>
+import { usePaymentStore } from "~/stores/payment";
+const paymentStore = usePaymentStore();
+</script>
+
+<style scoped>
+/* Style tetap sama */
+.payment-step {
+  background: rgb(233, 233, 233);
+}
+.qr-container {
+  padding: 20px;
+  background: white;
+  border-radius: 16px;
+  display: inline-block;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+.qr-code {
+  position: relative;
+  background: white;
+  padding: 20px;
+}
+.qr-label {
+  position: absolute;
+  bottom: 5px;
+  right: 10px;
+  font-size: 10px;
+  font-weight: bold;
+}
+.payment-details {
+  max-width: 350px;
+  margin: 0 auto;
+}
+@media (orientation: landscape) and (min-width: 768px) {
+  .qr-code {
+    width: 240px !important;
+    height: 240px !important;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/Success.vue b/components/Success.vue
new file mode 100644
index 0000000..3e9f255
--- /dev/null
+++ b/components/Success.vue
@@ -0,0 +1,38 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="payment-step">
+    <v-card-text class="pa-8 text-center">
+      <div class="success-container">
+        <v-icon icon="mdi-check-circle" size="80" class="text-orange mb-4" />
+        <h2 class="text-h4 mb-4 font-weight-bold text-dark">Pembayaran Berhasil</h2>
+        <p class="text-h6 text-grey-darken-1 mb-6">
+          Silahkan Menunggu Bukti<br >Pembayaran
+        </p>
+        <v-btn color="primary" size="large" variant="flat" rounded="xl" @click="paymentStore.reset">
+          Kembali ke Awal
+        </v-btn>
+      </div>
+    </v-card-text>
+  </div>
+</template>
+
+<script setup>
+import { usePaymentStore } from '~/stores/payment';
+const paymentStore = usePaymentStore();
+</script>
+
+<style scoped>
+
+.payment-step {
+  background: rgb(233, 233, 233);
+}
+.success-container {
+  padding: 40px 20px;
+}
+.text-orange {
+  color: #ff9800 !important;
+}
+.text-dark {
+  color: #424242 !important;
+}
+</style>
\ No newline at end of file
diff --git a/composables/useWebSocket.ts b/composables/useWebSocket.ts
new file mode 100644
index 0000000..d18430e
--- /dev/null
+++ b/composables/useWebSocket.ts
@@ -0,0 +1,43 @@
+import { io } from 'socket.io-client';
+import { usePaymentStore } from '~/stores/payment1';
+
+// Fungsi untuk mendapatkan IP Address lokal (ini butuh bantuan backend/API eksternal)
+async function getLocalIpAddress() {
+  // Anda bisa menggunakan API eksternal atau endpoint di backend Anda sendiri.
+  // Contoh menggunakan API eksternal:
+  // const response = await fetch('https://api.ipify.org?format=json');
+  // const data = await response.json();
+  // return data.ip;
+
+  // ATAU, jika IP address diatur secara statis pada tablet:
+  return '192.168.1.101'; // Ganti dengan IP Address loket yang sesungguhnya
+}
+
+export async function setupSocket() {
+  const paymentStore = usePaymentStore();
+  const socket = io('https://your-backend-api.com'); // Ganti dengan URL backend Anda
+
+  const localIp = await getLocalIpAddress();
+
+  socket.on('connect', () => {
+    console.log('Connected to backend WebSocket');
+    
+    // Mengirim IP Address tablet ke backend untuk identifikasi loket.
+    socket.emit('register-kiosk', { ipAddress: localIp });
+  });
+
+  socket.on('payment-data-ready', (data) => {
+    console.log('Payment data received:', data);
+    // Panggil action Pinia untuk memperbarui state dan pindah step
+    paymentStore.updatePayment(data); 
+  });
+
+  socket.on('disconnect', () => {
+    console.log('Disconnected from backend');
+  });
+
+  // Tambahkan error handling
+  socket.on('error', (error) => {
+    console.error('Socket error:', error);
+  });
+}
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a57d680..742577f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,6 +11,7 @@ export default defineNuxtConfig({
     '@nuxt/scripts',
     '@nuxt/test-utils',
     '@nuxt/ui',
+    'nuxt-qrcode',
     '@pinia/nuxt',
     (_options, nuxt) => {
       nuxt.hooks.hook('vite:extendConfig', (config) => {
diff --git a/package-lock.json b/package-lock.json
index 1b577d6..92be866 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,9 +21,11 @@
         "pinia": "^3.0.3",
         "typescript": "^5.9.2",
         "vue": "^3.5.20",
-        "vue-router": "^4.5.1"
+        "vue-router": "^4.5.1",
+        "vuetify": "^3.4.0"
       },
       "devDependencies": {
+        "nuxt-qrcode": "^0.4.8",
         "sass-embedded": "^1.92.1",
         "vite-plugin-vuetify": "^2.1.2",
         "vuetify": "^3.9.7"
@@ -4808,6 +4810,20 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/dom-webcodecs": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.16.tgz",
+      "integrity": "sha512-gRNWaC3YW5EzhPRjVYy7BnxCbtLGqsgu+uTkmV/IxOF1bllFD+FAJ1KBdsDFsuJB+F+CE+nWmMlWt8vaZ3yYXA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/emscripten": {
+      "version": "1.41.1",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.41.1.tgz",
+      "integrity": "sha512-vW2aEgBUU1c2CB+qVMislA98amRVPszdALjqNCuUIJaEFZsNaFaM4g5IMXIs+6oHbmmb7q6zeXYubhtObJ9ZLg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -6188,6 +6204,16 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/barcode-detector": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-3.0.5.tgz",
+      "integrity": "sha512-SWeGhJ8SEW0T3Anbr2wEugUXW2bSCld3PauZh+LjTgN1lSInnIrI+RnG53NkzS4pl3cfPCl1AZ10Rq+hSkXBSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "zxing-wasm": "2.2.0"
+      }
+    },
     "node_modules/bare-events": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.6.1.tgz",
@@ -12455,6 +12481,55 @@
         "node": ">=18.12.0"
       }
     },
+    "node_modules/nuxt-qrcode": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/nuxt-qrcode/-/nuxt-qrcode-0.4.8.tgz",
+      "integrity": "sha512-m489cF5NtXbZ2P3s2euuKEQ2iClmNwFtXQU8B9H5RqdSpMrM+MRci9eHp+OE8IlTCXQBb4TEUZXApzz8xk91Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^4.1.1",
+        "@vueuse/core": "^13.9.0",
+        "barcode-detector": "^3.0.5",
+        "defu": "^6.1.4",
+        "uqr": "^0.1.2",
+        "vue-qrcode-reader": "^5.7.3"
+      }
+    },
+    "node_modules/nuxt-qrcode/node_modules/@nuxt/kit": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.1.1.tgz",
+      "integrity": "sha512-2MGfOXtbcxdkbUNZDjyEv4xmokicZhTrQBMrmNJQztrePfpKOVBe8AiGf/BfbHelXMKio5PgktiRoiEIyIsX4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.2.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.14",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
     "node_modules/nypm": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.1.tgz",
@@ -14494,7 +14569,6 @@
         "!riscv64",
         "!x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -14508,7 +14582,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14525,7 +14598,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14542,7 +14614,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14559,7 +14630,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14576,7 +14646,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14593,7 +14662,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14610,7 +14678,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14627,7 +14694,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14644,7 +14710,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14661,7 +14726,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14678,7 +14742,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14695,7 +14758,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14712,7 +14774,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14729,7 +14790,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14743,7 +14803,6 @@
       "version": "1.92.1",
       "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.92.1.tgz",
       "integrity": "sha512-AT9oXvtNY4N+Nd0wvoWqq9A5HjdH/X3aUH4boQUtXyaJ/9DUwnQmBpP5Gtn028ZS8exOGBdobmmWAuigv0k/OA==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14763,7 +14822,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14780,7 +14838,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14832,6 +14889,13 @@
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
       "license": "MIT"
     },
+    "node_modules/sdp": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.1.tgz",
+      "integrity": "sha512-lwsAIzOPlH8/7IIjjz3K0zYBk7aBVVcvjMwt3M4fLxpjMYyy7i3I97SLHebgn4YBjirkzfp3RvRDWSKsh/+WFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -17215,6 +17279,41 @@
         "eslint": "^8.57.0 || ^9.0.0"
       }
     },
+    "node_modules/vue-qrcode-reader": {
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-5.7.3.tgz",
+      "integrity": "sha512-iSGko42FsEvdHyizBMBs/X+HMO9Z5ONDxjW+mQdoraOR5emRNedmjC5SEJdYzGz8ZP5ME3lwB4iHy3S7MOt5Qw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "barcode-detector": "2.2.2",
+        "webrtc-adapter": "8.2.3"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/vue-qrcode-reader/node_modules/barcode-detector": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-2.2.2.tgz",
+      "integrity": "sha512-JcSekql+EV93evfzF9zBr+Y6aRfkR+QFvgyzbwQ0dbymZXoAI9+WgT7H1E429f+3RKNncHz2CW98VQtaaKpmfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/dom-webcodecs": "^0.1.11",
+        "zxing-wasm": "1.1.3"
+      }
+    },
+    "node_modules/vue-qrcode-reader/node_modules/zxing-wasm": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-1.1.3.tgz",
+      "integrity": "sha512-MYm9k/5YVs4ZOTIFwlRjfFKD0crhefgbnt1+6TEpmKUDFp3E2uwqGSKwQOd2hOIsta/7Usq4hnpNRYTLoljnfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/emscripten": "^1.39.10"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
@@ -17283,6 +17382,20 @@
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
       "license": "MIT"
     },
+    "node_modules/webrtc-adapter": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz",
+      "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -17672,6 +17785,20 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
+    },
+    "node_modules/zxing-wasm": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-2.2.0.tgz",
+      "integrity": "sha512-RyHxVaAHsLSDzmwcAG05IF8sVOE5Ta2JT1dRDh0mzVZOIiDXZstsjkqvKHasN1n4lvFSbX7ngkHDufnt/XI07Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/emscripten": "^1.40.1",
+        "type-fest": "^4.41.0"
+      },
+      "peerDependencies": {
+        "@types/emscripten": ">=1.39.6"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index c7d9d0e..89b50b1 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "vuetify": "^3.4.0"
   },
   "devDependencies": {
+    "nuxt-qrcode": "^0.4.8",
     "sass-embedded": "^1.92.1",
     "vite-plugin-vuetify": "^2.1.2",
     "vuetify": "^3.9.7"
diff --git a/pages/Home.vue b/pages/Home.vue
deleted file mode 100644
index 6f95b86..0000000
--- a/pages/Home.vue
+++ /dev/null
@@ -1,775 +0,0 @@
-<template>
-  <div class="medical-payment-app">
-    <!-- Header -->
-    <v-container fluid class="pa-4">
-      <v-row justify="center" class="mb-6">
-        <v-col cols="12" md="8" lg="6">
-          <div class="text-center mb-4">
-            <div class="d-flex justify-center align-center flex-wrap mb-4">
-              <!-- Logos -->
-              <v-img
-                src="/api/placeholder/80/80"
-                width="80"
-                height="80"
-                class="ma-2"
-                contain
-              />
-              <v-img
-                src="/api/placeholder/80/80"
-                width="80"
-                height="80"
-                class="ma-2"
-                contain
-              />
-              <v-img
-                src="/api/placeholder/80/80"
-                width="80"
-                height="80"
-                class="ma-2"
-                contain
-              />
-              <v-img
-                src="/api/placeholder/80/80"
-                width="80"
-                height="80"
-                class="ma-2"
-                contain
-              />
-            </div>
-
-            <h1 class="display-1 mb-2">
-              <span class="text-orange">With Love </span>
-              <span class="text-dark">We Serve</span>
-            </h1>
-
-            <p class="subtitle-1 text-grey-darken-1">
-              Kami Menyediakan Layanan Medis yang Dapat Anda Percayai
-            </p>
-          </div>
-        </v-col>
-      </v-row>
-    </v-container>
-
-    <!-- Main Content -->
-    <v-container>
-      <v-row justify="center">
-        <v-col cols="12" md="6" lg="7">
-          <v-card class="payment-card mx-auto" rounded="xl">
-            <!-- Step 1: Contact Info -->
-            <div v-if="paymentStore.currentStep === 1">
-    <v-card-text class="pa-4">
-      <div class="mb-6">
-        <v-img
-          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=1EijOtXRjUEQ7kNvwFf8ZY7&_nc_oc=Admd26Jbw1IeEOyHFjj4HiDEMtDA_PY83qxRWoy8hhdrfYe9yO6ZPv7pI4XJ79Vlb-I&_nc_zt=23&_nc_ht=scontent.fcgk22-2.fna&_nc_gid=tx2ZuC16d1ipgxGzCJ4SRw&oh=00_Afan6b2RW5WBSa9azzYS_sdYc781iAwqKv4dJjsC9MvAxw&oe=68C42CD8"
-          height="200"
-          class="rounded-lg"
-          cover
-        />
-      </div>
-
-      <h2 class="text-h5 mb-6 text-center font-weight-bold">Hubungi Kami</h2>
-
-      <v-row>
-        <v-col cols="12" sm="6">
-          <v-btn
-            block
-            size="large"
-            color="orange"
-            variant="flat"
-            rounded="xl"
-            class="mb-4 text-no-wrap"
-            prepend-icon="mdi-whatsapp"
-          >
-            +62 815-5560-6668
-          </v-btn>
-        </v-col>
-
-        <v-col cols="12" sm="6">
-          <v-btn
-            block
-            size="large"
-            color="orange"
-            variant="flat"
-            rounded="xl"
-            class="mb-4 text-no-wrap"
-            prepend-icon="mdi-phone"
-          >
-            0341-362101
-          </v-btn>
-        </v-col>
-
-        <v-col cols="12">
-          <v-btn
-            block
-            size="large"
-            color="orange"
-            variant="flat"
-            rounded="xl"
-            class="mb-4 text-no-wrap"
-            prepend-icon="mdi-instagram"
-          >
-            rssaifulanwar
-          </v-btn>
-        </v-col>
-
-        <v-col cols="12">
-          <v-btn
-            block
-            size="large"
-            color="orange"
-            variant="flat"
-            rounded="xl"
-            class="mb-4 text-no-wrap"
-            prepend-icon="mdi-web"
-          >
-            rsusaifulanwar.jatimprov.go.id
-          </v-btn>
-        </v-col>
-      </v-row>
-
-      <div class="text-center mt-6">
-        <v-btn
-          color="primary"
-          size="large"
-          variant="flat"
-          rounded="xl"
-          @click="paymentStore.nextStep"
-        >
-          Lanjut ke Pembayaran
-        </v-btn>
-      </div>
-    </v-card-text>
-  </div>
-            <!-- Step 2: QR Code Payment -->
-            <div v-else-if="paymentStore.currentStep === 2">
-              <v-card-text class="pa-8 text-center">
-                <div class="mb-4">
-                  <v-img
-                    src="/api/placeholder/60/30"
-                    width="60"
-                    height="30"
-                    class="mx-auto mb-2"
-                    contain
-                  />
-                  <v-img
-                    src="/api/placeholder/100/30"
-                    width="100"
-                    height="30"
-                    class="mx-auto"
-                    contain
-                  />
-                </div>
-
-                <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2>
-
-                <!-- QR Code -->
-                <div class="qr-container mb-6">
-                  <v-card
-                    class="qr-code mx-auto"
-                    width="280"
-                    height="280"
-                    elevation="0"
-                  >
-                    <div class="qr-pattern">
-                      <!-- Simplified QR pattern -->
-                      <svg viewBox="0 0 280 280" class="qr-svg">
-                        <!-- Corner markers -->
-                        <rect
-                          x="10"
-                          y="10"
-                          width="60"
-                          height="60"
-                          fill="black"
-                        />
-                        <rect
-                          x="20"
-                          y="20"
-                          width="40"
-                          height="40"
-                          fill="white"
-                        />
-                        <rect
-                          x="30"
-                          y="30"
-                          width="20"
-                          height="20"
-                          fill="black"
-                        />
-
-                        <rect
-                          x="210"
-                          y="10"
-                          width="60"
-                          height="60"
-                          fill="black"
-                        />
-                        <rect
-                          x="220"
-                          y="20"
-                          width="40"
-                          height="40"
-                          fill="white"
-                        />
-                        <rect
-                          x="230"
-                          y="30"
-                          width="20"
-                          height="20"
-                          fill="black"
-                        />
-
-                        <rect
-                          x="10"
-                          y="210"
-                          width="60"
-                          height="60"
-                          fill="black"
-                        />
-                        <rect
-                          x="20"
-                          y="220"
-                          width="40"
-                          height="40"
-                          fill="white"
-                        />
-                        <rect
-                          x="30"
-                          y="230"
-                          width="20"
-                          height="20"
-                          fill="black"
-                        />
-
-                        <!-- Random data pattern -->
-                        <g class="data-pattern">
-                          <rect
-                            x="90"
-                            y="90"
-                            width="10"
-                            height="10"
-                            fill="black"
-                          />
-                          <rect
-                            x="110"
-                            y="90"
-                            width="10"
-                            height="10"
-                            fill="black"
-                          />
-                          <rect
-                            x="130"
-                            y="90"
-                            width="10"
-                            height="10"
-                            fill="black"
-                          />
-                          <rect
-                            x="90"
-                            y="110"
-                            width="10"
-                            height="10"
-                            fill="black"
-                          />
-                          <rect
-                            x="130"
-                            y="110"
-                            width="10"
-                            height="10"
-                            fill="black"
-                          />
-                          <rect
-                            x="150"
-                            y="110"
-                            width="10"
-                            height="10"
-                            fill="black"
-                          />
-                          <rect
-                            x="170"
-                            y="110"
-                            width="10"
-                            height="10"
-                            fill="black"
-                          />
-                          <rect
-                            x="90"
-                            y="130"
-                            width="10"
-                            height="10"
-                            fill="black"
-                          />
-                          <rect
-                            x="110"
-                            y="130"
-                            width="10"
-                            height="10"
-                            fill="black"
-                          />
-                          <rect
-                            x="150"
-                            y="130"
-                            width="10"
-                            height="10"
-                            fill="black"
-                          />
-                        </g>
-                      </svg>
-                    </div>
-                    <div class="qr-label">
-                      <small class="text-grey-darken-1">QRIS</small>
-                    </div>
-                  </v-card>
-                </div>
-
-                <!-- Payment Details -->
-                <div class="payment-details">
-                  <v-row dense class="mb-2">
-                    <v-col cols="5" class="text-left">
-                      <strong>NAMA PASIEN:</strong>
-                    </v-col>
-                    <v-col cols="7" class="text-left">
-                      {{ paymentStore.patientInfo.name }}
-                    </v-col>
-                  </v-row>
-
-                  <v-row dense class="mb-2">
-                    <v-col cols="5" class="text-left">
-                      <strong>NOMINAL:</strong>
-                    </v-col>
-                    <v-col cols="7" class="text-left">
-                      {{ paymentStore.patientInfo.amount }}
-                    </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">
-                      {{ paymentStore.patientInfo.expiry }}
-                    </v-col>
-                  </v-row>
-                </div>
-
-                <div class="d-flex gap-2 justify-center">
-                  <v-btn
-                    color="grey"
-                    variant="outlined"
-                    @click="paymentStore.prevStep"
-                  >
-                    Kembali
-                  </v-btn>
-                  <v-btn
-                    color="primary"
-                    variant="flat"
-                    @click="paymentStore.nextStep"
-                  >
-                    Simulasi Pembayaran
-                  </v-btn>
-                </div>
-              </v-card-text>
-            </div>
-
-            <!-- Step 3: Success -->
-            <div v-else-if="paymentStore.currentStep === 3">
-              <v-card-text class="pa-8 text-center">
-                <div class="success-container">
-                  <v-icon
-                    icon="mdi-check-circle"
-                    size="80"
-                    color="orange"
-                    class="mb-4"
-                  />
-
-                  <h2 class="text-h4 mb-4 font-weight-bold">
-                    Pembayaran Berhasil
-                  </h2>
-
-                  <p class="text-h6 text-grey-darken-1 mb-6">
-                    Silahkan Menunggu Bukti<br />Pembayaran
-                  </p>
-
-                  <v-btn
-                    color="primary"
-                    size="large"
-                    variant="flat"
-                    rounded="xl"
-                    @click="paymentStore.reset"
-                  >
-                    Kembali ke Awal
-                  </v-btn>
-                </div>
-              </v-card-text>
-            </div>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
-</template>
-
-<script setup>
-import { usePaymentStore } from "~/stores/payment";
-
-const paymentStore = usePaymentStore();
-
-// Auto advance simulation
-onMounted(() => {
-  // Simulate QR code scanning after 10 seconds on QR step
-  const autoAdvance = () => {
-    if (paymentStore.currentStep === 2) {
-      setTimeout(() => {
-        if (paymentStore.currentStep === 2) {
-          paymentStore.nextStep();
-        }
-      }, 10000);
-    }
-  };
-
-  watch(() => paymentStore.currentStep, autoAdvance, { immediate: true });
-});
-</script>
-
-<style scoped>
-.medical-payment-app {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-}
-
-/* Step 1 - Modern Landing Page Styles */
-.main-content {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.content-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 2rem 1rem;
-}
-
-.header-section {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 1rem;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  z-index: 10;
-}
-
-.logo-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2rem;
-  flex-wrap: wrap;
-}
-
-.logo-item {
-  transition: transform 0.3s ease;
-}
-
-.logo-item:hover {
-  transform: scale(1.1);
-}
-
-.hero-section {
-  text-align: center;
-  max-width: 900px;
-  margin: 0 auto;
-  padding-top: 100px;
-}
-
-.hero-title {
-  font-size: clamp(2rem, 5vw, 3.5rem);
-  font-weight: 700;
-  margin-bottom: 1rem;
-  line-height: 1.2;
-}
-
-.hero-subtitle {
-  font-size: clamp(1rem, 2vw, 1.25rem);
-  color: #64748b;
-  margin-bottom: 3rem;
-  font-weight: 400;
-}
-
-.media-banner {
-  margin-bottom: 3rem;
-}
-
-.banner-card {
-  background: white;
-  overflow: hidden;
-}
-
-.banner-content {
-  padding: 1rem;
-}
-
-.banner-image {
-  position: relative;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.banner-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 152, 0, 0.8) 0%,
-    rgba(255, 193, 7, 0.8) 100%
-  );
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.overlay-content {
-  text-align: center;
-  padding: 2rem;
-}
-
-.info-cards {
-  margin-top: 1.5rem;
-}
-
-.info-card {
-  transition: all 0.3s ease;
-  height: 100%;
-}
-
-.info-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-}
-
-.cta-section {
-  margin-bottom: 2rem;
-}
-
-.cta-button {
-  padding: 1rem 3rem;
-  font-size: 1.1rem;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  transition: all 0.3s ease;
-  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
-}
-
-.cta-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 30px rgba(255, 152, 0, 0.4);
-}
-
-.footer-section {
-  background: white;
-  border-top: 1px solid #e2e8f0;
-  padding: 2rem 0;
-  margin-top: auto;
-}
-
-.contact-footer {
-  text-align: center;
-}
-
-.contact-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #1e293b;
-  margin-bottom: 2rem;
-}
-
-.contact-card {
-  transition: all 0.3s ease;
-  border: 2px solid transparent;
-  height: 100%;
-  min-height: 100px;
-}
-
-.contact-card .v-card-text {
-  padding: 12px 8px !important;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
-.contact-card:hover {
-  border-color: #ff9800;
-  transform: translateY(-4px);
-  box-shadow: 0 8px 25px rgba(255, 152, 0, 0.2);
-}
-
-/* Step 2 & 3 - Payment and Success Styles */
-.payment-card {
-  background: white;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
-}
-
-.qr-container {
-  padding: 20px;
-  background: white;
-  border-radius: 16px;
-  display: inline-block;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-}
-
-.qr-code {
-  position: relative;
-  background: white;
-  padding: 20px;
-}
-
-.qr-svg {
-  width: 100%;
-  height: 100%;
-}
-
-.qr-label {
-  position: absolute;
-  bottom: 5px;
-  right: 10px;
-  font-size: 10px;
-  font-weight: bold;
-}
-
-.payment-details {
-  max-width: 350px;
-  margin: 0 auto;
-}
-
-.success-container {
-  padding: 40px 20px;
-}
-
-.text-orange {
-  color: #ff9800 !important;
-}
-
-.text-dark {
-  color: #424242 !important;
-}
-
-/* Tablet Landscape Optimizations */
-@media (orientation: landscape) and (min-width: 768px) {
-  .medical-payment-app {
-    height: 100vh;
-    overflow-y: auto;
-  }
-
-  .content-wrapper {
-    padding: 1rem;
-    justify-content: flex-start;
-  }
-
-  .hero-section {
-    padding-top: 80px;
-  }
-
-  .hero-title {
-    font-size: 2.5rem;
-    margin-bottom: 0.75rem;
-  }
-
-  .hero-subtitle {
-    font-size: 1rem;
-    margin-bottom: 2rem;
-  }
-
-  .media-banner {
-    margin-bottom: 2rem;
-  }
-
-  .banner-content .v-img {
-    height: 220px !important;
-  }
-
-  .footer-section {
-    padding: 1.5rem 0;
-  }
-
-  .contact-title {
-    font-size: 1.25rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .logo-container {
-    gap: 1.5rem;
-  }
-
-  .logo-item .v-img {
-    width: 50px !important;
-    height: 50px !important;
-  }
-
-  /* Smaller QR code for landscape */
-  .qr-code {
-    width: 240px !important;
-    height: 240px !important;
-  }
-
-  .payment-card {
-    max-width: flex;
-  }
-}
-
-/* Small tablet adjustments */
-@media (max-width: 900px) and (orientation: landscape) {
-  .hero-title {
-    font-size: 2rem;
-  }
-
-  .banner-content .v-img {
-    height: 180px !important;
-  }
-
-  .info-cards .v-col {
-    padding: 4px;
-  }
-
-  .contact-footer .v-col {
-    margin-bottom: 8px;
-  }
-}
-
-/* Very small tablet landscape */
-@media (max-width: 768px) and (orientation: landscape) {
-  .hero-section {
-    padding-top: 60px;
-  }
-
-  .logo-container {
-    gap: 1rem;
-  }
-
-  .logo-item .v-img {
-    width: 40px !important;
-    height: 40px !important;
-  }
-
-  .banner-content .v-img {
-    height: 150px !important;
-  }
-
-  .hero-title {
-    font-size: 1.75rem;
-  }
-
-  .contact-footer .v-row .v-col {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-}
-</style>
diff --git a/pages/figma.vue b/pages/figma.vue
deleted file mode 100644
index 136daeb..0000000
--- a/pages/figma.vue
+++ /dev/null
@@ -1,541 +0,0 @@
-<template>
-  <div class="medical-payment-app">
-    <v-container fluid class="pa-0">
-      <v-row justify="center" no-gutters>
-        <v-col cols="12">
-          <v-card
-            class="payment-card mx-auto"
-            elevation="0"
-            :class="{
-              'contact-fullscreen': paymentStore.currentStep === 1,
-              'payment-centered': paymentStore.currentStep !== 1,
-            }"
-          >
-            <div v-if="paymentStore.currentStep === 1" 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 />
-                </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>
-                </div>
-                
-                <div class="image-placeholder-container">
-                    <v-img src="https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg" class="responsive-placeholder" object-fit=fill height=400 contain></v-img>
-                </div>
-
-                <div class="cta-section-contact">
-                  <v-btn
-                    color="primary"
-                    size="large"
-                    variant="flat"
-                    rounded="xl"
-                    class="cta-button-contact"
-                    @click="paymentStore.nextStep"
-                  >
-                    Lanjut ke Pembayaran
-                  </v-btn>
-                </div>
-              </div>
-              
-              <div class="orange-background-contact">
-                <div class="contact-info-section-contact">
-                  <div class="contact-item-contact">
-                    <div class="contact-icon-contact whatsapp-icon">
-                      <v-icon color="#25D366" size="28">mdi-whatsapp</v-icon>
-                    </div>
-                    <div class="contact-text-contact">+62 815-5560-6668</div>
-                  </div>
-
-                  <div class="contact-item-contact">
-                    <div class="contact-icon-contact instagram-icon">
-                      <v-icon color="#E1306C" size="28">mdi-instagram</v-icon>
-                    </div>
-                    <div class="contact-text-contact">rssasaifulanwar</div>
-                  </div>
-
-                  <div class="contact-item-contact">
-                    <div class="contact-icon-contact phone-icon">
-                      <v-icon color="#FF9248" size="28">mdi-phone</v-icon>
-                    </div>
-                    <div class="contact-text-contact">0341-362101</div>
-                  </div>
-
-                  <div class="contact-item-contact">
-                    <div class="contact-icon-contact web-icon">
-                      <v-icon color="#2196F3" size="28">mdi-web</v-icon>
-                    </div>
-                    <div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div v-else-if="paymentStore.currentStep === 2" class="payment-step">
-              <v-card-text class="pa-8 text-center">
-                <div class="mb-4">
-                  <v-img src="/api/placeholder/60/30" width="60" height="30" class="mx-auto mb-2" contain />
-                  <v-img src="/api/placeholder/100/30" width="100" height="30" class="mx-auto" contain />
-                </div>
-
-                <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2>
-
-                <div class="qr-container mb-6">
-                  <v-card class="qr-code mx-auto" width="280" height="280" elevation="0">
-                    <div class="qr-pattern">
-                      <svg viewBox="0 0 280 280" class="qr-svg">
-                        <rect x="10" y="10" width="60" height="60" fill="black" />
-                        <rect x="20" y="20" width="40" height="40" fill="white" />
-                        <rect x="30" y="30" width="20" height="20" fill="black" />
-
-                        <rect x="210" y="10" width="60" height="60" fill="black" />
-                        <rect x="220" y="20" width="40" height="40" fill="white" />
-                        <rect x="230" y="30" width="20" height="20" fill="black" />
-
-                        <rect x="10" y="210" width="60" height="60" fill="black" />
-                        <rect x="20" y="220" width="40" height="40" fill="white" />
-                        <rect x="30" y="230" width="20" height="20" fill="black" />
-
-                        <g class="data-pattern">
-                          <rect x="90" y="90" width="10" height="10" fill="black" />
-                          <rect x="110" y="90" width="10" height="10" fill="black" />
-                          <rect x="130" y="90" width="10" height="10" fill="black" />
-                          <rect x="90" y="110" width="10" height="10" fill="black" />
-                          <rect x="130" y="110" width="10" height="10" fill="black" />
-                          <rect x="150" y="110" width="10" height="10" fill="black" />
-                          <rect x="170" y="110" width="10" height="10" fill="black" />
-                          <rect x="90" y="130" width="10" height="10" fill="black" />
-                          <rect x="110" y="130" width="10" height="10" fill="black" />
-                          <rect x="150" y="130" width="10" height="10" fill="black" />
-                        </g>
-                      </svg>
-                    </div>
-                    <div class="qr-label">
-                      <small class="text-grey-darken-1">QRIS</small>
-                    </div>
-                  </v-card>
-                </div>
-
-                <div class="payment-details">
-                  <v-row dense class="mb-2">
-                    <v-col cols="5" class="text-left">
-                      <strong>NAMA PASIEN:</strong>
-                    </v-col>
-                    <v-col cols="7" class="text-left">
-                      {{ paymentStore.patientInfo.name }}
-                    </v-col>
-                  </v-row>
-
-                  <v-row dense class="mb-2">
-                    <v-col cols="5" class="text-left">
-                      <strong>NOMINAL:</strong>
-                    </v-col>
-                    <v-col cols="7" class="text-left">
-                      {{ paymentStore.patientInfo.amount }}
-                    </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">
-                      {{ paymentStore.patientInfo.expiry }}
-                    </v-col>
-                  </v-row>
-                </div>
-
-                <div class="d-flex gap-2 justify-center">
-                  <v-btn color="grey" variant="outlined" @click="paymentStore.prevStep"> Kembali </v-btn>
-                  <v-btn color="primary" variant="flat" @click="paymentStore.nextStep"> Simulasi Pembayaran </v-btn>
-                </div>
-              </v-card-text>
-            </div>
-
-            <div v-else-if="paymentStore.currentStep === 3" class="payment-step">
-              <v-card-text class="pa-8 text-center">
-                <div class="success-container">
-                  <v-icon icon="mdi-check-circle" size="80" color="orange" class="mb-4" />
-
-                  <h2 class="text-h4 mb-4 font-weight-bold">Pembayaran Berhasil</h2>
-
-                  <p class="text-h6 text-grey-darken-1 mb-6">
-                    Silahkan Menunggu Bukti<br />Pembayaran
-                  </p>
-
-                  <v-btn color="primary" size="large" variant="flat" rounded="xl" @click="paymentStore.reset">
-                    Kembali ke Awal
-                  </v-btn>
-                </div>
-              </v-card-text>
-            </div>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
-</template>
-
-<script setup>
-import { usePaymentStore } from '~/stores/payment';
-
-const paymentStore = usePaymentStore();
-
-// Auto advance simulation
-onMounted(() => {
-  // Simulate QR code scanning after 10 seconds on QR step
-  const autoAdvance = () => {
-    if (paymentStore.currentStep === 2) {
-      setTimeout(() => {
-        if (paymentStore.currentStep === 2) {
-          paymentStore.nextStep();
-        }
-      }, 10000);
-    }
-  };
-
-  watch(() => paymentStore.currentStep, autoAdvance, { immediate: true });
-});
-</script>
-
-<style scoped>
-.medical-payment-app {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #ffd7b5 20%, #ff9248 100%);
-}
-
-/* Contact Page Styles (Step 1) */
-.contact-fullscreen {
-  height: 100vh !important;
-  max-width: none !important;
-  border-radius: 0 !important;
-}
-
-.payment-centered {
-  max-width: 500px !important;
-  margin-top: 2rem !important;
-  border-radius: 16px !important;
-}
-
-.payment-step {
-  background: rgb(233, 233, 233);
-}
-
-.contact-page-container {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  background: white;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Orange curved background */
-.orange-background-contact {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 15%; /* Tinggi disesuaikan agar tidak terlalu besar */
-  background: #ff9248;
-  border-top-left-radius: 60px;
-  border-top-right-radius: 60px;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Logo section */
-.logo-section-contact {
-  position: relative;
-  z-index: 2;
-  padding: 20px;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 20px;
-}
-
-.logo-group-contact {
-  display: flex;
-  gap: 40px;
-  align-items: center;
-}
-
-.logo-img-contact {
-  transition: transform 0.3s ease;
-}
-
-.logo-img-contact:hover {
-  transform: scale(1.1);
-}
-
-/* Content section */
-.content-section-contact {
-  position: relative;
-  z-index: 2;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start; 
-  padding: 10px;
-}
-
-/* Title section */
-.title-section-contact {
-  text-align: center;
-  margin-top: 20px; /* Disesuaikan untuk memberi ruang logo */
-  margin-bottom: 30px; /* Jarak antara title dan placeholder */
-}
-
-.main-title-contact {
-  color: #ff9248;
-  font-size: clamp(2.5rem, 5vw, 4rem);
-  font-family: 'Roboto', sans-serif;
-  font-weight: 800;
-  margin-bottom: 16px;
-  line-height: 1.2;
-}
-
-.subtitle-contact {
-  color: black;
-  font-size: clamp(1rem, 2vw, 1.25rem);
-  font-family: 'Roboto', sans-serif;
-  font-weight: 500;
-  margin: 0;
-  max-width: 600px;
-}
-
-/* New Image Placeholder Styles */
-.image-placeholder-container {
-    width: 100%; /* Pastikan kontainer mengambil lebar penuh */
-    max-width: 600px; /* Batasi lebar maksimal */
-    margin-bottom: 40px; /* Jarak antara gambar dan tombol */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #f0f0f0; /* Warna latar belakang placeholder */
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
-}
-
-.responsive-placeholder {
-    width: 100%;
-    height: 200px;
-    object-fit: fill !important;
-    aspect-ratio: 16 / 9; /* Rasio aspek 2:1 */
-}
-
-
-/* Contact info section */
-.contact-info-section-contact {
-  display: flex;
-  gap: 60px; 
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  width: 100%;
-}
-
-.contact-item-contact {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.contact-icon-contact {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  background: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
-}
-
-.contact-icon-contact:hover {
-  transform: scale(1.1);
-}
-
-.contact-text-contact {
-  color: white;
-  font-size: 14px;
-  font-family: 'Roboto', sans-serif;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-/* CTA Section */
-.cta-section-contact {
-  margin-top: 20px;
-  margin-bottom: 20px; /* Tambahkan margin bawah agar tidak terlalu dekat dengan bar oranye */
-}
-
-.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-contact:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 30px rgba(255, 152, 0, 0.4);
-}
-
-
-/* Step 2 & 3 - Payment and Success Styles */
-.payment-card {
-  background: white;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
-}
-
-.qr-container {
-  padding: 20px;
-  background: white;
-  border-radius: 16px;
-  display: inline-block;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-}
-
-.qr-code {
-  position: relative;
-  background: white;
-  padding: 20px;
-}
-
-.qr-svg {
-  width: 100%;
-  height: 100%;
-}
-
-.qr-label {
-  position: absolute;
-  bottom: 5px;
-  right: 10px;
-  font-size: 10px;
-  font-weight: bold;
-}
-
-.payment-details {
-  max-width: 350px;
-  margin: 0 auto;
-}
-
-.success-container {
-  padding: 40px 20px;
-}
-
-.text-orange {
-  color: #ff9800 !important;
-}
-
-.text-dark {
-  color: #424242 !important;
-}
-
-/* Tablet Landscape Optimizations */
-@media (orientation: landscape) and (min-width: 768px) {
-  
-  .responsive-placeholder {
-    width: 100%;
-    height: 200px;
-    object-fit: fill !important;
-    aspect-ratio: 16 / 9; /* Rasio aspek 2:1 */
-  }
-  .main-title-contact {
-    font-size: 3rem;
-  }
-
-  .subtitle-contact {
-    font-size: 1.1rem;
-  }
-
-  .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;
-  }
-
-  /* Payment steps remain centered */
-  .qr-code {
-    width: 240px !important;
-    height: 240px !important;
-  }
-}
-
-/* Small tablet adjustments */
-@media (max-width: 900px) and (orientation: landscape) {
-  .main-title-contact {
-    font-size: 2.5rem;
-  }
-
-  .contact-info-section-contact {
-    gap: 30px;
-  }
-
-  .logo-group-contact {
-    gap: 25px;
-  }
-}
-
-/* Very small tablet landscape */
-@media (max-width: 768px) and (orientation: landscape) {
-  .logo-group-contact {
-    gap: 20px;
-  }
-
-  .logo-img-contact {
-    width: 40px !important;
-    height: 40px !important;
-  }
-
-  .main-title-contact {
-    font-size: 2rem;
-  }
-
-  .contact-info-section-contact {
-    gap: 20px; 
-  }
-
-  .contact-text-contact {
-    font-size: 10px;
-  }
-
-  .contact-icon-contact {
-    width: 36px;
-    height: 36px;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
new file mode 100644
index 0000000..9c4f335
--- /dev/null
+++ b/pages/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="medical-payment-app">
+    <v-container fluid class="pa-0">
+      <v-row justify="center" no-gutters>
+        <v-col cols="12">
+          <v-card
+            class="payment-card mx-auto"
+            elevation="0"
+            :class="{
+              'contact-fullscreen': paymentStore.currentStep === 1,
+              'payment-centered': paymentStore.currentStep !== 1,
+            }"
+          >
+            <component :is="activeComponent" />
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script setup>
+import { usePaymentStore } from '~/stores/payment';
+import Home from '~/components/Home.vue';
+import QRISPayment from '~/components/QRISPayment.vue';
+import Success from '~/components/Success.vue';
+
+const paymentStore = usePaymentStore();
+const apiURL = 'http://10.10.150.188:8084/api/v1/qris';
+
+const paymentSteps = {
+  1: Home,
+  2: QRISPayment,
+  3: Success,
+};
+
+const activeComponent = computed(() => {
+  return paymentSteps[paymentStore.currentStep] || Home;
+});
+
+// useFetch untuk pengambilan data dari API
+const { data: apiData, refresh } = await useFetch(apiURL, {
+  server: 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);
+
+    if (relevantData) {
+      paymentStore.updatePayment(newData);
+      // Data ditemukan, hentikan polling
+      clearInterval(pollingInterval);
+      console.log('Polling stopped. Data received via useFetch.');
+    }
+  }
+});
+
+let pollingInterval = null;
+
+// refresh setiap 5 detik untuk mengecek data
+onMounted(() => {
+  if (paymentStore.currentStep === 1) {
+    refresh();
+    pollingInterval = setInterval(() => {
+      refresh();
+    }, 5000);
+  }
+});
+
+onUnmounted(() => {
+  if (pollingInterval) {
+    clearInterval(pollingInterval);
+    console.log('Polling stopped on unmount.');
+  }
+});
+
+watch(() => paymentStore.currentStep, (newStep, oldStep) => {
+  if (newStep === 1 && oldStep !== 1) {
+    refresh();
+    pollingInterval = setInterval(() => {
+      refresh();
+    }, 5000);
+  } else if (newStep !== 1 && pollingInterval) {
+    clearInterval(pollingInterval);
+  }
+});
+</script>
+
+<style scoped>
+.medical-payment-app {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #ffd7b5 20%, #ff9248 100%);
+}
+
+.contact-fullscreen {
+  height: 100vh !important;
+  max-width: none !important;
+  border-radius: 0 !important;
+}
+.payment-centered {
+  max-width: 500px !important;
+  margin-top: 2rem !important;
+  border-radius: 16px !important;
+}
+
+.payment-card {
+  background: white;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+}
+</style>
\ No newline at end of file
diff --git a/stores/payment.ts b/stores/payment.ts
index f12c6ab..dc01e47 100644
--- a/stores/payment.ts
+++ b/stores/payment.ts
@@ -1,31 +1,46 @@
-import { defineStore } from 'pinia'
+// src/stores/payment.js
+import { defineStore } from 'pinia';
 
 export const usePaymentStore = defineStore('payment', {
   state: () => ({
-    currentStep: 1, // 1: info, 2: qr, 3: success
+    currentStep: 1,
     patientInfo: {
-      name: 'ALDY GUSTINARA',
-      amount: 'Rp 1.520.000',
-      expiry: '2025-08-24 12:30:00'
+      name: '',
+      amount: '',
+      expiry: '', // Tidak ada di API, bisa dihapus atau diisi null
     },
-    qrCode: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjE4MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNmZmYiLz48L3N2Zz4='
+    qrData: null, // Properti baru untuk menyimpan data QRIS dari API
   }),
-  
   actions: {
     nextStep() {
-      if (this.currentStep < 3) {
-        this.currentStep++
-      }
+      this.currentStep++;
     },
-    
     prevStep() {
-      if (this.currentStep > 1) {
-        this.currentStep--
-      }
+      this.currentStep--;
     },
-    
     reset() {
-      this.currentStep = 1
-    }
-  }
-})
\ No newline at end of file
+      this.currentStep = 1;
+      this.patientInfo = {
+        name: '',
+        amount: '',
+        expiry: '',
+      };
+      this.qrData = null; // Reset data QR
+    },
+    // Action baru untuk menerima dan memproses data dari backend
+    updatePayment(apiResponse) {
+      // Ambil objek data pertama dari array 'data'
+      const apiData = apiResponse.data[0];
+
+      // Perbarui state dengan data yang sesuai
+      this.qrData = apiData;
+      this.patientInfo = {
+        name: apiData.display_name,
+        amount: apiData.display_amount,
+      };
+
+      // Ganti step secara otomatis
+      this.currentStep = 2;
+    },
+  },
+});
\ No newline at end of file
diff --git a/stores/payment1.ts b/stores/payment1.ts
new file mode 100644
index 0000000..d1fc2b1
--- /dev/null
+++ b/stores/payment1.ts
@@ -0,0 +1,37 @@
+// src/stores/payment.js
+import { defineStore } from 'pinia';
+
+export const usePaymentStore = defineStore('payment', {
+  state: () => ({
+    currentStep: 1,
+    patientInfo: {
+      name: '',
+      amount: '',
+      expiry: '',
+    },
+    paymentData: null, // Tambahkan state ini untuk menyimpan data dari backend
+  }),
+  actions: {
+    nextStep() {
+      this.currentStep++;
+    },
+    prevStep() {
+      this.currentStep--;
+    },
+    reset() {
+      this.currentStep = 1;
+      this.patientInfo = {};
+      this.paymentData = null; // Reset data pembayaran
+    },
+    // Tambahkan action baru untuk menerima data dari WebSocket
+    updatePayment(data: { patientName: any; amount: any; expiryDate: any; } | null) {
+      this.paymentData = data;
+      this.patientInfo = {
+        name: data.patientName,
+        amount: data.amount,
+        expiry: data.expiryDate,
+      };
+      this.currentStep = 2; // Pindah ke step 2 secara otomatis
+    },
+  },
+});
\ No newline at end of file