diff --git a/components/Home landscp.txt b/components/Home landscp.txt
new file mode 100644
index 0000000..da91ec5
--- /dev/null
+++ b/components/Home landscp.txt	
@@ -0,0 +1,570 @@
+<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="50"
+          height="50"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
+          width="50"
+          height="50"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
+          width="50"
+          height="50"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
+          width="50"
+          height="50"
+          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="banner-carousel-container">
+        <v-carousel
+          v-model="currentSlide"
+          ref="carousel"
+          :show-arrows="true"
+          :hide-delimiters="false"
+          :cycle="false"
+          :interval="5000"
+          class="banner-carousel"
+          height="400"
+          :continuous="false"
+        >
+          <v-carousel-item
+            v-for="(item, index) in carouselItems"
+            :key="index"
+            class="carousel-item"
+          >
+            <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="playVideo(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="48">mdi-play-circle</v-icon>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </v-carousel-item>
+        </v-carousel>
+
+        <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
+          @click="startDebugPayment"
+          color="#808080"
+          class="cta-button debug-button"
+          x-large
+        >
+          <span class="button-text">SIMULASI PEMBAYARAN</span>
+        </v-btn>
+      </div> -->
+    </div>
+
+    <div class="orange-background-contact">
+      <div class="contact-info-section-contact">
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact whatsapp-icon">
+            <v-icon color="#25D366" size="24">mdi-whatsapp</v-icon>
+          </div>
+          <div class="contact-text-contact">+62 815-5560-6668</div>
+        </div>
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact instagram-icon">
+            <v-icon color="#E1306C" size="24">mdi-instagram</v-icon>
+          </div>
+          <div class="contact-text-contact">rssasaifulanwar</div>
+        </div>
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact phone-icon">
+            <v-icon color="#FF9248" size="24">mdi-phone</v-icon>
+          </div>
+          <div class="contact-text-contact">0341-362101</div>
+        </div>
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact web-icon">
+            <v-icon color="#2196F3" size="24">mdi-web</v-icon>
+          </div>
+          <div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onUnmounted } from "vue";
+import { usePaymentStore } from "~/stores/payment";
+
+const paymentStore = usePaymentStore();
+const currentSlide = ref(0);
+const carouselInterval = ref(null);
+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",
+    isImage: true,
+  },
+  {
+    videoId: "KQZFfRtMHe0",
+    isImage: false,
+  },
+  {
+    src: "https://rsusaifulanwar.jatimprov.go.id/wp-content/uploads/2023/08/siam-2-scaled.jpg",
+    alt: "Medical Services",
+    title: "Pelayanan Terbaik",
+    description: "Tim medis profesional siap melayani 24 jam",
+    isImage: true,
+  },
+]);
+
+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 startCarousel = () => {
+  if (carouselInterval.value) {
+    clearInterval(carouselInterval.value);
+  }
+  carouselInterval.value = setInterval(() => {
+    const nextSlide = (currentSlide.value + 1) % carouselItems.value.length;
+    currentSlide.value = nextSlide;
+  }, 10000);
+};
+
+const stopCarousel = () => {
+  if (carouselInterval.value) {
+    clearInterval(carouselInterval.value);
+    carouselInterval.value = null;
+  }
+};
+
+const playVideo = (index) => {
+  currentSlide.value = index;
+  stopCarousel();
+};
+
+watch(currentSlide, (newSlide) => {
+  const currentItem = carouselItems.value[newSlide];
+  if (currentItem && !currentItem.isImage) {
+    console.log("Video detected, stopping carousel");
+    stopCarousel();
+  } else {
+    console.log("Image detected, starting carousel");
+    startCarousel();
+  }
+});
+
+onMounted(() => {
+  startCarousel();
+});
+
+onUnmounted(() => {
+  stopCarousel();
+});
+
+const startDebugPayment = () => {
+  console.log("Simulasi Pembayaran (Debug) dimulai.");
+
+  const dummyData = {
+    posdevice: "GRANDPAV",
+    invoice_number: "000000000000012000615",
+    updated_at: "2024-11-21T11:52:25.805965+07:00",
+    created_at: "2024-11-21T11:52:25.805965+07:00",
+    display_name: "KASIH",
+    id: "1",
+    status: "1",
+    display_amount: "90",
+    qrvalue:
+      "000201010212262710019ID.CO.BANKJATIM.WWW01189360011400001347728215ID02400134529083038ES1459015ID.OR.GPMQR.MM0215ID202431094996960309ES2049939530536054029605802D5923-RSUD SAIFUL ANWAR MLG-100000MALANG0556111622901250000000000000000000000000000012800061563040C9B",
+    ip: "10.10.150.106",
+    display_nobill: "24072579/10000675",
+  };
+  paymentStore.updatePayment({ data: [dummyData] });
+  paymentStore.currentStep = 2;
+};
+</script>
+
+<style scoped>
+.contact-page-container {
+  min-height: auto;
+  width: 100%;
+  background: white;
+  display: flex;
+  flex-direction: column;
+}
+
+.orange-background-contact {
+  width: 100%;
+  height: clamp(80px, 12vh, 180px);
+  background: #ff9248;
+  border-top-left-radius: 40px;
+  border-top-right-radius: 40px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 10px;
+  margin-top: auto;
+}
+
+.logo-section-contact {
+  position: relative;
+  z-index: 2;
+  padding: 8px 12px;
+  display: flex;
+  justify-content: center;
+}
+
+.logo-group-contact {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.logo-img-contact {
+  transition: transform 0.3s ease;
+  width: clamp(20px, 5vw, 50px) !important;
+  height: clamp(20px, 5vw, 50px) !important;
+}
+
+.logo-img-contact:hover {
+  transform: scale(1.1);
+}
+
+.content-section-contact {
+  position: relative;
+  z-index: 2;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 5px 15px;
+}
+
+.title-section-contact {
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.main-title-contact {
+  color: #ff9248;
+  font-size: clamp(2rem, 2vw, 1.5rem);
+  font-family: "Roboto", sans-serif;
+  font-weight: 800;
+  margin-bottom: 8px;
+  line-height: 0.8;
+}
+
+.subtitle-contact {
+  color: black;
+  font-size: clamp(0.8rem, 1.8vw, 1rem);
+  font-family: "Roboto", sans-serif;
+  font-weight: 500;
+  margin: 0;
+  max-width: 500px;
+}
+
+.banner-carousel-container {
+  width: 95%;
+  max-width: 800px;
+  margin-bottom: 20px;
+  position: relative;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
+}
+
+.banner-carousel {
+  border-radius: 15px;
+  overflow: hidden;
+  height: clamp(400px, 45vh, 400px);
+}
+
+.carousel-item {
+  position: relative;
+  width: 100%;
+  height: 400px;
+}
+
+.video-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* PASTIKAN INI ADA untuk membatasi iframe */
+  overflow: hidden;
+}
+
+.youtube-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 15px;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  min-width: 100%;
+  min-height: 100%;
+
+  aspect-ratio: 16 / 9;
+}
+
+.thumbnail-img {
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
+  border-radius: 15px;
+}
+.video-thumbnail {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thumbnail-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 15px;
+}
+
+.play-button-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  padding: 15px;
+  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 {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  color: white;
+  padding: 30px 20px 20px;
+  z-index: 2;
+}
+
+.overlay-content {
+  max-width: 500px;
+}
+
+.overlay-title {
+  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
+  font-weight: 700;
+  margin-bottom: 6px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.overlay-description {
+  font-size: clamp(0.8rem, 1.3vw, 1rem);
+  font-weight: 400;
+  margin: 0;
+  opacity: 0.9;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.custom-indicators {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 10px;
+  z-index: 3;
+}
+
+.indicator-dot {
+  width: 10px;
+  height: 10px;
+  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-section-contact {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.contact-item-contact {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.contact-icon-contact {
+  width: clamp(30px, 7vw, 35px); /* Adjusted with clamp */
+  height: clamp(30px, 7vw, 35px); /* Adjusted with clamp */
+  border-radius: 50%; /* Changed to 50% for perfect circle */
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 3px 8px 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: 12px;
+  font-family: "Roboto", sans-serif;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.cta-section-contact {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-top: 15px;
+}
+
+.cta-button {
+  width: 100%;
+  max-width: 250px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+
+.debug-button {
+  background: #808080 !important;
+}
+
+:deep(.v-carousel__controls) {
+  display: none;
+}
+
+:deep(.v-carousel__controls--bottom) {
+  bottom: 40px !important;
+}
+</style>
diff --git a/components/Home.vue b/components/Home.vue
index da91ec5..667b987 100644
--- a/components/Home.vue
+++ b/components/Home.vue
@@ -35,14 +35,35 @@
 
     <div class="content-section-contact">
       <div class="title-section-contact">
-        <h1 class="main-title-contact">With Love We Serve</h1>
+        <div class="title-decoration">
+          <div class="title-line"></div>
+          <v-icon color="#ff9248" size="32" class="title-heart"
+            >mdi-heart-pulse</v-icon
+          >
+          <div class="title-line"></div>
+        </div>
+        <h1 class="main-title-contact">
+          <span class="title-gradient">With Love</span>
+          <span class="title-highlight">We Serve</span>
+        </h1>
         <p class="subtitle-contact">
+          <v-icon color="#ff9248" size="16" class="subtitle-icon"
+            >mdi-shield-check</v-icon
+          >
           Kami Menyediakan Layanan Medis yang Dapat Anda Percayai
         </p>
       </div>
 
       <div class="banner-carousel-container">
+        <!-- Loading indicator -->
+        <div v-if="isLoading" class="loading-container">
+          <v-progress-circular indeterminate color="#ff9248" size="64" />
+          <p class="loading-text">Memuat media...</p>
+        </div>
+
+        <!-- Carousel -->
         <v-carousel
+          v-else-if="carouselItems.length > 0"
           v-model="currentSlide"
           ref="carousel"
           :show-arrows="true"
@@ -50,7 +71,7 @@
           :cycle="false"
           :interval="5000"
           class="banner-carousel"
-          height="400"
+          :height="getCarouselHeight()"
           :continuous="false"
         >
           <v-carousel-item
@@ -58,36 +79,53 @@
             :key="index"
             class="carousel-item"
           >
+            <!-- Image Item -->
             <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 class="media-wrapper" :class="getMediaClass(item)">
+                <v-img 
+                  :src="item.src" 
+                  :alt="item.alt" 
+                  :contain="item.aspectRatio === 'portrait' || item.aspectRatio === 'square'"
+                  :cover="item.aspectRatio === 'landscape'"
+                  class="media-image"
+                >
+                  <div class="carousel-overlay">
+                    <div class="overlay-content">
+                      <h3 class="overlay-title">{{ item.title }}</h3>
+                      <p class="overlay-description">{{ item.description }}</p>
+                    </div>
                   </div>
-                </div>
-              </v-img>
+                </v-img>
+              </div>
             </template>
+
+            <!-- Video Item -->
             <template v-else>
-              <div class="video-container">
-                <iframe
+              <div class="video-container" :class="getMediaClass(item)">
+                <video
                   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"
+                  ref="videoPlayer"
+                  :src="item.src"
+                  controls
+                  autoplay
+                  class="video-player"
+                  :class="getVideoClass(item)"
+                  @play="onVideoPlay"
+                  @pause="onVideoPause"
+                  @ended="onVideoEnded"
+                  @loadedmetadata="handleVideoMetadata($event, item)"
                   @error="onVideoError"
-                ></iframe>
+                >
+                  Browser Anda tidak mendukung tag video.
+                </video>
 
                 <div v-else class="video-thumbnail" @click="playVideo(index)">
-                  <img
-                    :src="`https://img.youtube.com/vi/${item.videoId}/maxresdefault.jpg`"
-                    alt="Video thumbnail"
-                    class="thumbnail-img"
+                  <video 
+                    :src="item.src" 
+                    class="thumbnail-video" 
+                    :class="getVideoClass(item)"
+                    muted 
+                    @loadedmetadata="handleVideoMetadata($event, item)"
                   />
                   <div class="play-button-overlay">
                     <v-icon color="white" size="48">mdi-play-circle</v-icon>
@@ -98,7 +136,14 @@
           </v-carousel-item>
         </v-carousel>
 
-        <div class="custom-indicators">
+        <!-- Empty state -->
+        <div v-else class="empty-state">
+          <v-icon color="#ff9248" size="64">mdi-image-off</v-icon>
+          <p>Tidak ada media tersedia</p>
+        </div>
+
+        <!-- Custom indicators -->
+        <div v-if="carouselItems.length > 0" class="custom-indicators">
           <span
             v-for="(item, index) in carouselItems"
             :key="index"
@@ -108,100 +153,249 @@
         </div>
       </div>
 
-      <!-- <div class="cta-section-contact">
-        <v-btn
-          @click="startDebugPayment"
-          color="#808080"
-          class="cta-button debug-button"
-          x-large
-        >
-          <span class="button-text">SIMULASI PEMBAYARAN</span>
-        </v-btn>
-      </div> -->
+      <!-- Info Cards Section - Tampil di Portrait -->
+      <div v-if="isPortrait" class="info-cards-section">
+        <div class="info-card">
+          <v-icon color="#ff9248" size="40">mdi-hospital-building</v-icon>
+          <h3>Fasilitas Modern</h3>
+          <p>Dilengkapi dengan peralatan medis terkini dan teknologi canggih</p>
+        </div>
+        <div class="info-card">
+          <v-icon color="#ff9248" size="40">mdi-doctor</v-icon>
+          <h3>Tim Profesional</h3>
+          <p>Dokter dan tenaga medis berpengalaman siap melayani 24/7</p>
+        </div>
+        <div class="info-card">
+          <v-icon color="#ff9248" size="40">mdi-heart-pulse</v-icon>
+          <h3>Pelayanan Prima</h3>
+          <p>Komitmen memberikan pelayanan kesehatan terbaik untuk Anda</p>
+        </div>
+      </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="24">mdi-whatsapp</v-icon>
+        <div class="contact-grid">
+          <div class="contact-item-contact whatsapp-item">
+            <div class="contact-card">
+              <div class="contact-icon-wrapper">
+                <div class="contact-icon-contact whatsapp-icon">
+                  <v-icon color="white" size="24">mdi-whatsapp</v-icon>
+                </div>
+              </div>
+              <div class="contact-details">
+                <div class="contact-label">WhatsApp</div>
+                <div class="contact-text-contact">+62 815-5560-6668</div>
+              </div>
+            </div>
           </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="24">mdi-instagram</v-icon>
+
+          <div class="contact-item-contact instagram-item">
+            <div class="contact-card">
+              <div class="contact-icon-wrapper">
+                <div class="contact-icon-contact instagram-icon">
+                  <v-icon color="white" size="24">mdi-instagram</v-icon>
+                </div>
+              </div>
+              <div class="contact-details">
+                <div class="contact-label">Instagram</div>
+                <div class="contact-text-contact">@rssasaifulanwar</div>
+              </div>
+            </div>
           </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="24">mdi-phone</v-icon>
+
+          <div class="contact-item-contact phone-item">
+            <div class="contact-card">
+              <div class="contact-icon-wrapper">
+                <div class="contact-icon-contact phone-icon">
+                  <v-icon color="white" size="24">mdi-phone</v-icon>
+                </div>
+              </div>
+              <div class="contact-details">
+                <div class="contact-label">Telepon</div>
+                <div class="contact-text-contact">0341-362101</div>
+              </div>
+            </div>
           </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="24">mdi-web</v-icon>
+
+          <div class="contact-item-contact web-item">
+            <div class="contact-card">
+              <div class="contact-icon-wrapper">
+                <div class="contact-icon-contact web-icon">
+                  <v-icon color="white" size="24">mdi-web</v-icon>
+                </div>
+              </div>
+              <div class="contact-details">
+                <div class="contact-label">Website</div>
+                <div class="contact-text-contact">
+                  rsusaifulanwar.jatimprov.go.id
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
         </div>
       </div>
     </div>
+    <div class="orange-background-portrait">
+      <div class="address-title">RSUD Dr. Saiful Anwar Provinsi Jawa Timur</div>
+      <div class="address-text">
+        Jl. Jaksa Agung Suprapto No.2, Klojen, Kec. Klojen, Kota Malang, Jawa
+        Timur 65112
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch, onMounted, onUnmounted } from "vue";
-import { usePaymentStore } from "~/stores/payment";
+import { ref, watch, onMounted, onUnmounted, computed } from "vue";
+import { useFileSync } from "~/composables/useFileSync";
+
+const { fileLocal, tampilFileBrowser } = useFileSync();
 
-const paymentStore = usePaymentStore();
 const currentSlide = ref(0);
 const carouselInterval = ref(null);
-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",
-    isImage: true,
-  },
-  {
-    videoId: "KQZFfRtMHe0",
-    isImage: false,
-  },
-  {
-    src: "https://rsusaifulanwar.jatimprov.go.id/wp-content/uploads/2023/08/siam-2-scaled.jpg",
-    alt: "Medical Services",
-    title: "Pelayanan Terbaik",
-    description: "Tim medis profesional siap melayani 24 jam",
-    isImage: true,
-  },
-]);
+const windowWidth = ref(window.innerWidth);
+const windowHeight = ref(window.innerHeight);
+const carouselItems = ref([]);
+const isLoading = ref(true);
+const videoPlayer = ref(null);
 
-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",
+const isPortrait = computed(() => windowHeight.value > windowWidth.value);
+
+// Deteksi aspect ratio media
+const detectAspectRatio = (width, height) => {
+  if (!width || !height) return 'landscape';
+  const ratio = width / height;
+  
+  if (ratio > 1.3) return 'landscape'; // 16:9, 4:3, dll
+  if (ratio < 0.7) return 'portrait';  // 9:16, dll
+  return 'square'; // 1:1
+};
+
+// Get carousel height berdasarkan orientasi screen dan media
+const getCarouselHeight = () => {
+  if (carouselItems.value.length === 0) return 400;
+  
+  const currentItem = carouselItems.value[currentSlide.value];
+  if (!currentItem) return 400;
+  
+  if (isPortrait.value) {
+    // Portrait screen
+    if (currentItem.aspectRatio === 'portrait') return 650;
+    if (currentItem.aspectRatio === 'square') return 500;
+    return 400;
+  } else {
+    // Landscape screen
+    return 400;
+  }
+};
+
+// Get media class untuk styling
+const getMediaClass = (item) => {
+  return `aspect-${item.aspectRatio || 'landscape'}`;
+};
+
+// Get video class
+const getVideoClass = (item) => {
+  return `video-${item.aspectRatio || 'landscape'}`;
+};
+
+// Handle video metadata untuk deteksi aspect ratio
+const handleVideoMetadata = (event, item) => {
+  const video = event.target;
+  if (video.videoWidth && video.videoHeight && !item.aspectRatio) {
+    item.aspectRatio = detectAspectRatio(video.videoWidth, video.videoHeight);
+    console.log(`Video ${item.name}: ${video.videoWidth}x${video.videoHeight} = ${item.aspectRatio}`);
+  }
+};
+
+// Function untuk extract nomor dari nama file
+const extractNumber = (filename) => {
+  const match = filename.match(/^(\d+)\./);
+  return match ? parseInt(match[1], 10) : 999999;
+};
+
+// Function untuk cek apakah file adalah gambar
+const isImageFile = (filename) => {
+  const ext = filename.split('.').pop()?.toLowerCase();
+  return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(ext || '');
+};
+
+// Function untuk cek apakah file adalah video
+const isVideoFile = (filename) => {
+  const ext = filename.split('.').pop()?.toLowerCase();
+  return ['mp4', 'mkv', 'avi', 'mov', 'webm'].includes(ext || '');
+};
+
+// Deteksi aspect ratio dari gambar
+const detectImageAspectRatio = (url) => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      const ratio = detectAspectRatio(img.width, img.height);
+      resolve(ratio);
+    };
+    img.onerror = () => resolve('landscape');
+    img.src = url;
   });
-  return `${baseUrl}${videoId}?${params.toString()}`;
+};
+
+// Load carousel items dari file sync
+const loadCarouselItems = async () => {
+  isLoading.value = true;
+  try {
+    await tampilFileBrowser();
+    
+    const mediaFiles = fileLocal.value
+      .filter(file => isImageFile(file.name) || isVideoFile(file.name))
+      .sort((a, b) => extractNumber(a.name) - extractNumber(b.name));
+
+    // Deteksi aspect ratio untuk semua media
+    const itemsWithRatio = await Promise.all(
+      mediaFiles.map(async (file) => {
+        const isImage = isImageFile(file.name);
+        const number = extractNumber(file.name);
+        let aspectRatio = 'landscape';
+        
+        if (isImage) {
+          aspectRatio = await detectImageAspectRatio(file.url);
+        }
+        
+        return {
+          src: file.url,
+          alt: `Media ${number}`,
+          // title: isImage ? `Slide ${number}` : `Video ${number}`,
+          // description: isImage 
+          //   ? 'Pelayanan kesehatan terbaik untuk Anda'
+          //   : 'Tonton video kami',
+          isImage: isImage,
+          name: file.name,
+          order: number,
+          aspectRatio: aspectRatio
+        };
+      })
+    );
+
+    carouselItems.value = itemsWithRatio;
+    console.log('Carousel items loaded:', carouselItems.value);
+  } catch (error) {
+    console.error('Error loading carousel items:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const handleResize = () => {
+  windowWidth.value = window.innerWidth;
+  windowHeight.value = window.innerHeight;
 };
 
 const onVideoLoad = () => {
-  console.log("Video iframe loaded successfully");
+  console.log("Video loaded successfully");
 };
 
 const onVideoError = (error) => {
-  console.error("Video iframe error:", error);
+  console.error("Video error:", error);
 };
 
 const startCarousel = () => {
@@ -226,50 +420,172 @@ const playVideo = (index) => {
   stopCarousel();
 };
 
+// Video event handlers
+const onVideoPlay = () => {
+  console.log("Video playing, stopping carousel");
+  stopCarousel();
+};
+
+const onVideoPause = () => {
+  console.log("Video paused, starting carousel");
+  startCarousel();
+};
+
+const onVideoEnded = () => {
+  console.log("Video ended, moving to next slide");
+  // Pindah ke slide berikutnya
+  const nextSlide = (currentSlide.value + 1) % carouselItems.value.length;
+  currentSlide.value = nextSlide;
+  
+  // Restart carousel untuk slide berikutnya
+  startCarousel();
+};
+
 watch(currentSlide, (newSlide) => {
   const currentItem = carouselItems.value[newSlide];
   if (currentItem && !currentItem.isImage) {
-    console.log("Video detected, stopping carousel");
     stopCarousel();
   } else {
-    console.log("Image detected, starting carousel");
     startCarousel();
   }
 });
 
-onMounted(() => {
-  startCarousel();
+onMounted(async () => {
+  await loadCarouselItems();
+  if (carouselItems.value.length > 0) {
+    startCarousel();
+  }
+  window.addEventListener("resize", handleResize);
 });
 
 onUnmounted(() => {
   stopCarousel();
+  window.removeEventListener("resize", handleResize);
+  carouselItems.value.forEach(item => {
+    if (item.src && item.src.startsWith('blob:')) {
+      URL.revokeObjectURL(item.src);
+    }
+  });
 });
-
-const startDebugPayment = () => {
-  console.log("Simulasi Pembayaran (Debug) dimulai.");
-
-  const dummyData = {
-    posdevice: "GRANDPAV",
-    invoice_number: "000000000000012000615",
-    updated_at: "2024-11-21T11:52:25.805965+07:00",
-    created_at: "2024-11-21T11:52:25.805965+07:00",
-    display_name: "KASIH",
-    id: "1",
-    status: "1",
-    display_amount: "90",
-    qrvalue:
-      "000201010212262710019ID.CO.BANKJATIM.WWW01189360011400001347728215ID02400134529083038ES1459015ID.OR.GPMQR.MM0215ID202431094996960309ES2049939530536054029605802D5923-RSUD SAIFUL ANWAR MLG-100000MALANG0556111622901250000000000000000000000000000012800061563040C9B",
-    ip: "10.10.150.106",
-    display_nobill: "24072579/10000675",
-  };
-  paymentStore.updatePayment({ data: [dummyData] });
-  paymentStore.currentStep = 2;
-};
 </script>
 
 <style scoped>
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  gap: 16px;
+}
+
+.loading-text {
+  color: #ff9248;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+/* Media Wrapper untuk handle berbagai aspect ratio */
+.media-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+}
+
+.media-image {
+  width: 100%;
+  height: 100%;
+}
+
+/* Aspect ratio classes */
+.aspect-landscape .media-image {
+  object-fit: cover;
+}
+
+.aspect-portrait .media-image,
+.aspect-square .media-image {
+  object-fit: contain;
+  background: #000;
+}
+
+/* Video styling */
+.video-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+}
+
+.video-player,
+.thumbnail-video {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.video-landscape {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.video-portrait,
+.video-square {
+  width: auto;
+  height: 100%;
+  object-fit: contain;
+}
+
+.video-thumbnail {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+}
+
+.play-button-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(255, 146, 72, 0.9);
+  border-radius: 50%;
+  padding: 20px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(255, 146, 72, 0.4);
+  z-index: 10;
+}
+
+.play-button-overlay:hover {
+  background: rgba(255, 146, 72, 1);
+  transform: translate(-50%, -50%) scale(1.15);
+  box-shadow: 0 6px 20px rgba(255, 146, 72, 0.6);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  gap: 16px;
+  color: #999;
+}
+
+.info-cards-section {
+  display: none;
+}
+
 .contact-page-container {
-  min-height: auto;
+  min-height: 100vh;
   width: 100%;
   background: white;
   display: flex;
@@ -278,29 +594,34 @@ const startDebugPayment = () => {
 
 .orange-background-contact {
   width: 100%;
-  height: clamp(80px, 12vh, 180px);
-  background: #ff9248;
+  background: linear-gradient(135deg, #ff9248 0%, #ff7b2e 100%);
   border-top-left-radius: 40px;
   border-top-right-radius: 40px;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-bottom: 10px;
   margin-top: auto;
+  transition: height 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.orange-background-portrait {
+  display: none;
 }
 
 .logo-section-contact {
   position: relative;
   z-index: 2;
-  padding: 8px 12px;
   display: flex;
   justify-content: center;
+  transition: padding 0.3s ease;
 }
 
 .logo-group-contact {
   display: flex;
-  gap: 1rem;
+  gap: 1.5rem;
   align-items: center;
   flex-wrap: wrap;
   justify-content: center;
@@ -308,12 +629,7 @@ const startDebugPayment = () => {
 
 .logo-img-contact {
   transition: transform 0.3s ease;
-  width: clamp(20px, 5vw, 50px) !important;
-  height: clamp(20px, 5vw, 50px) !important;
-}
-
-.logo-img-contact:hover {
-  transform: scale(1.1);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
 }
 
 .content-section-contact {
@@ -324,123 +640,157 @@ const startDebugPayment = () => {
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  padding: 5px 15px;
+  transition: padding 0.3s ease;
 }
 
 .title-section-contact {
+  margin-top: -8px;
   text-align: center;
-  margin-bottom: 8px;
+  transition: margin-bottom 0.3s ease;
+}
+
+.title-decoration {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  margin-bottom: 15px;
+  animation: fadeInDown 0.8s ease-out;
+}
+
+.title-line {
+  display: none;
+  width: 60px;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #ff9248, transparent);
+}
+
+.title-heart {
+  animation: heartbeat 1.5s ease-in-out infinite;
+  display: none;
+}
+
+@keyframes heartbeat {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .main-title-contact {
-  color: #ff9248;
-  font-size: clamp(2rem, 2vw, 1.5rem);
   font-family: "Roboto", sans-serif;
   font-weight: 800;
-  margin-bottom: 8px;
-  line-height: 0.8;
+  line-height: 1.2;
+  transition: font-size 0.3s ease;
+  display: flex;
+  gap: 10px;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+  animation: fadeInUp 0.8s ease-out 0.2s both;
+}
+
+.title-gradient {
+  background: linear-gradient(135deg, #ff9248 0%, #ff6b35 50%, #ff9248 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  display: inline-block;
+  position: relative;
+  background-size: 200% auto;
+  animation: shimmer 3s ease-in-out infinite;
+  margin-right: 8px;
+}
+
+@keyframes shimmer {
+  0%, 100% { background-position: 0% center; }
+  50% { background-position: 100% center; }
+}
+
+.title-highlight {
+  color: #333;
+  position: relative;
+  display: inline-block;
+}
+
+.title-highlight::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 8px;
+  background: rgba(255, 146, 72, 0.2);
+  z-index: -1;
+  border-radius: 4px;
 }
 
 .subtitle-contact {
-  color: black;
-  font-size: clamp(0.8rem, 1.8vw, 1rem);
+  color: #555;
   font-family: "Roboto", sans-serif;
   font-weight: 500;
-  margin: 0;
-  max-width: 500px;
+  margin-top: 10px;
+  font-size: 14px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  animation: fadeInUp 0.8s ease-out 0.4s both;
+}
+
+.subtitle-icon {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
 }
 
 .banner-carousel-container {
   width: 95%;
-  max-width: 800px;
-  margin-bottom: 20px;
   position: relative;
   border-radius: 15px;
   overflow: hidden;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+}
+
+.banner-carousel-container:hover {
+  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
+  transform: translateY(-2px);
 }
 
 .banner-carousel {
-  border-radius: 15px;
+  border-radius: 0px;
   overflow: hidden;
-  height: clamp(400px, 45vh, 400px);
+  transition: height 0.3s ease;
 }
 
 .carousel-item {
   position: relative;
-  width: 100%;
-  height: 400px;
-}
-
-.video-container {
   width: 100%;
   height: 100%;
-  position: relative;
-
-  background: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* PASTIKAN INI ADA untuk membatasi iframe */
-  overflow: hidden;
-}
-
-.youtube-iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-  border-radius: 15px;
-
-  position: absolute;
-  top: 50%;
-  left: 50%;
-
-  transform: translate(-50%, -50%);
-
-  min-width: 100%;
-  min-height: 100%;
-
-  aspect-ratio: 16 / 9;
-}
-
-.thumbnail-img {
-  width: 100%;
-  height: 100%;
-
-  object-fit: cover;
-  border-radius: 15px;
-}
-.video-thumbnail {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.thumbnail-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 15px;
-}
-
-.play-button-overlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: 50%;
-  padding: 15px;
-  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 {
@@ -459,23 +809,23 @@ const startDebugPayment = () => {
 }
 
 .overlay-title {
-  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
   font-weight: 700;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  transition: font-size 0.3s ease;
 }
 
 .overlay-description {
-  font-size: clamp(0.8rem, 1.3vw, 1rem);
   font-weight: 400;
   margin: 0;
   opacity: 0.9;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  transition: font-size 0.3s ease;
 }
 
 .custom-indicators {
   position: absolute;
-  bottom: 10px;
+  bottom: 15px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
@@ -484,8 +834,8 @@ const startDebugPayment = () => {
 }
 
 .indicator-dot {
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.5);
   cursor: pointer;
@@ -502,69 +852,341 @@ const startDebugPayment = () => {
 }
 
 .contact-info-section-contact {
-  display: flex;
-  gap: 1.5rem;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
   width: 100%;
+  max-width: 1200px;
+  margin-top: -12px;
+}
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+  animation: fadeInUp 0.8s ease-out 0.2s both;
+}
+
+.contact-card {
+  display: grid;
+  gap: 4px;
+  grid-template-columns: 50px 1fr;
+  align-items: center;
 }
 
 .contact-item-contact {
+  background: white;
+  border-radius: 16px;
+  padding: 16px;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 6px;
+  gap: 16px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.contact-item-contact::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  transition: all 0.3s ease;
+}
+
+.whatsapp-item::before {
+  background: linear-gradient(90deg, #25d366, #128c7e);
+}
+
+.instagram-item::before {
+  background: linear-gradient(90deg, #e1306c, #c13584, #833ab4);
+}
+
+.phone-item::before {
+  background: linear-gradient(90deg, #ff9248, #ff7b2e);
+}
+
+.web-item::before {
+  background: linear-gradient(90deg, #2196f3, #1976d2);
+}
+
+.contact-icon-wrapper {
+  width: fit-content;
 }
 
 .contact-icon-contact {
-  width: clamp(30px, 7vw, 35px); /* Adjusted with clamp */
-  height: clamp(30px, 7vw, 35px); /* Adjusted with clamp */
-  border-radius: 50%; /* Changed to 50% for perfect circle */
-  background: white;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  width: fit-content;
 }
 
-.contact-icon-contact:hover {
-  transform: scale(1.1);
+.whatsapp-icon {
+  background: linear-gradient(135deg, #25d366, #128c7e);
+}
+
+.instagram-icon {
+  background: linear-gradient(135deg, #e1306c, #c13584, #833ab4);
+}
+
+.phone-icon {
+  background: linear-gradient(135deg, #ff9248, #ff7b2e);
+}
+
+.web-icon {
+  background: linear-gradient(135deg, #2196f3, #1976d2);
+}
+
+.contact-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.contact-label {
+  font-size: 12px;
+  color: #999;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
 }
 
 .contact-text-contact {
-  color: white;
-  font-size: 12px;
+  color: #333;
   font-family: "Roboto", sans-serif;
-  font-weight: 500;
-  white-space: nowrap;
+  font-weight: 600;
+  font-size: 15px;
+  transition: color 0.3s ease;
+  word-break: break-word;
 }
 
-.cta-section-contact {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  margin-top: 15px;
-}
-
-.cta-button {
-  width: 100%;
-  max-width: 250px;
-  font-weight: 700;
-  letter-spacing: 1px;
-}
-
-.debug-button {
-  background: #808080 !important;
+.contact-item-contact:hover .contact-text-contact {
+  color: #ff9248;
 }
 
 :deep(.v-carousel__controls) {
   display: none;
 }
 
-:deep(.v-carousel__controls--bottom) {
-  bottom: 40px !important;
+/* PORTRAIT MODE */
+@media (orientation: portrait) {
+  .orange-background-contact {
+    background: white;
+    padding: 0px 0px 150px;
+    margin-top: -20px;
+  }
+
+  .orange-background-portrait {
+    display: block;
+    width: 100%;
+    background: linear-gradient(135deg, #ff9248 0%, #ff7b2e 100%);
+    border-top-left-radius: 40px;
+    border-top-right-radius: 40px;
+    padding-top: 16px;
+    z-index: 1;
+    height: 150px;
+    text-align: center;
+    margin-top: auto;
+    transition: height 0.3s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .logo-section-contact {
+    padding: 20px 12px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .logo-img-contact {
+    width: 100px !important;
+    height: 100px !important;
+  }
+
+  .contact-info-section-contact {
+    width: 100%;
+    max-width: 1200px;
+  }
+
+  .content-section-contact {
+    padding: 10px 10px;
+  }
+
+  .title-section-contact {
+    margin-bottom: 40px;
+  }
+
+  .main-title-contact {
+    font-size: 4.5rem;
+    margin-bottom: 15px;
+  }
+
+  .subtitle-contact {
+    font-size: 1.2rem !important;
+    text-align: center;
+  }
+
+  .banner-carousel-container {
+    max-width: 800px;
+    margin-bottom: 30px;
+  }
+
+  .overlay-title {
+    font-size: 1.6rem;
+  }
+
+  .overlay-description {
+    font-size: 1rem;
+  }
+
+  .contact-grid {
+    grid-template-columns: repeat(2, 1fr);
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  .address-title {
+    font-size: 24px;
+    font-weight: 500;
+    color: rgb(240, 240, 240);
+    margin-top: 20px;
+    margin-bottom: 6px;
+  }
+
+  .address-text {
+    color: rgb(240, 240, 240);
+  }
+
+  .info-cards-section {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
+    width: 100%;
+    max-width: 800px;
+    padding: 30px 20px;
+    margin-bottom: 20px;
+  }
+
+  .info-card {
+    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+    border-radius: 20px;
+    padding: 25px 20px;
+    text-align: center;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .info-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 30px rgba(255, 146, 72, 0.2);
+    border-color: #ff9248;
+  }
+
+  .info-card h3 {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #333;
+    margin: 15px 0 10px;
+  }
+
+  .info-card p {
+    font-size: 0.85rem;
+    color: #666;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .info-card:nth-child(1) {
+    animation: fadeInUp 0.6s ease-out 0.1s both;
+  }
+
+  .info-card:nth-child(2) {
+    animation: fadeInUp 0.6s ease-out 0.2s both;
+  }
+
+  .info-card:nth-child(3) {
+    animation: fadeInUp 0.6s ease-out 0.3s both;
+  }
 }
-</style>
+
+/* LANDSCAPE MODE */
+@media (orientation: landscape) {
+  .orange-background-contact {
+    padding: 25px 20px;
+  }
+
+  .logo-section-contact {
+    padding: 8px 12px;
+  }
+
+  .logo-img-contact {
+    width: clamp(20px, 5vw, 50px) !important;
+    height: clamp(20px, 5vw, 50px) !important;
+  }
+
+  .content-section-contact {
+    padding: 5px 15px;
+  }
+
+  .title-section-contact {
+    margin-bottom: 8px;
+  }
+
+  .main-title-contact {
+    font-size: clamp(2rem, 2vw, 1.5rem);
+    margin-bottom: 8px;
+    line-height: 0.8;
+  }
+
+  .subtitle-contact {
+    font-size: clamp(0.8rem, 1.8vw, 1rem);
+  }
+
+  .banner-carousel-container {
+    max-width: 800px;
+    margin-bottom: 20px;
+  }
+
+  .overlay-title {
+    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
+    margin-bottom: 6px;
+  }
+
+  .overlay-description {
+    font-size: clamp(0.8rem, 1.3vw, 1rem);
+  }
+
+  .contact-grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 15px;
+  }
+
+  .contact-item-contact {
+    padding: 8px;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .contact-icon-contact {
+    width: 32px;
+    height: 32px;
+  }
+
+  .contact-label {
+    font-size: 10px;
+  }
+
+  .contact-text-contact {
+    font-size: 12px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/PembayaranGagal.vue b/components/PembayaranGagal.vue
index 3f01666..8e18493 100644
--- a/components/PembayaranGagal.vue
+++ b/components/PembayaranGagal.vue
@@ -1,31 +1,54 @@
 <template>
   <div class="payment-step">
+    <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="50"
+          height="50"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
+          width="50"
+          height="50"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
+          width="50"
+          height="50"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
+          width="50"
+          height="50"
+          class="logo-img-contact"
+          contain
+        />
+      </div>
+    </div>
     <div class="payment-wrapper">
       <v-card-text class="payment-content text-center">
         <div class="failure-container">
-          <div class="icon-container mb-6">
-            <v-icon icon="mdi-close-circle" size="100" class="text-red animated-icon" />
+          <div class="icon-container">
+            <v-icon
+              icon="mdi-account-clock-outline"
+              size="100"
+              class="text-grey animated-icon"
+            />
           </div>
-          
-          <h2 class="failure-title mb-6">Pembayaran Gagal</h2>
-          
-          <p class="failure-message mb-8">
-            Terjadi kesalahan saat memproses<br />pembayaran Anda.
+
+          <h2 class="failure-title">Pembayaran Pending</h2>
+
+          <p class="failure-message">
+            Pembayaran Anda ditunda.
           </p>
-           <div class="action-section">
-            <v-btn 
-              color="primary" 
-              size="x-large" 
-              variant="flat" 
-              rounded="xl"
-              class="success-btn"
-              @click="paymentStore.reset"
-            >
-              <v-icon class="mr-2" >mdi-home</v-icon>
-              Kembali ke Awal
-            </v-btn>
-          </div>
-          
+
           <!-- Uncomment jika butuh buttons -->
           <!-- <div class="button-group">
             <v-btn 
@@ -34,7 +57,7 @@
               variant="flat" 
               rounded="xl" 
               @click="retryPayment" 
-              class="action-btn mb-3"
+              class="action-btn"
             >
               Coba Lagi
             </v-btn>
@@ -56,31 +79,49 @@
 </template>
 
 <script setup>
-import { usePaymentStore } from '~/stores/payment';
+import { usePaymentStore } from "~/stores/payment";
 const paymentStore = usePaymentStore();
 
 const retryPayment = () => {
   console.log("Mencoba pembayaran lagi...");
-  paymentStore.setPaymentStatus('aktif');
+  paymentStore.setPaymentStatus("aktif");
 };
 </script>
 
 <style scoped>
 .payment-step {
-  background:  #ff9248;
+  background: #ff9248;
   min-height: 100vh;
-  height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2rem 0;
+  padding: 1.5rem;
+}
+.logo-section-contact {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  display: flex;
+  background: rgb(255, 255, 255);
+  border-radius: 24px;
+  padding: 1rem 1rem;
+  margin: 0 auto;
+  width: fit-content;
+  justify-content: center;
+  z-index: 10;
 }
 
+.logo-group-contact {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
 .payment-wrapper {
   width: 100%;
   max-width: 600px;
-  margin: 0 auto;
-  padding: 0 1rem;
 }
 
 .payment-content {
@@ -88,10 +129,7 @@ const retryPayment = () => {
   border-radius: 24px;
   backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  /* box-shadow: 
-    0 20px 60px rgba(0, 0, 0, 0.08),
-    0 8px 32px rgba(0, 0, 0, 0.04),
-    inset 0 1px 0 rgba(255, 255, 255, 0.8); */
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
   padding: 3rem 2rem !important;
 }
 
@@ -103,7 +141,7 @@ const retryPayment = () => {
 }
 
 .icon-container {
-  position: relative;
+  margin-bottom: 2rem;
 }
 
 .animated-icon {
@@ -112,36 +150,38 @@ const retryPayment = () => {
 }
 
 @keyframes errorPulse {
-  0%, 100% { 
+  0%,
+  100% {
     transform: scale(1);
     opacity: 1;
   }
-  50% { 
+  50% {
     transform: scale(1.05);
     opacity: 0.8;
   }
 }
 
-.text-red {
-  color: #f44336 !important;
+.text-grey {
+  color: #817f7e !important;
 }
 
 .failure-title {
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 800;
-  color: #1a1a1a;
-  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
+  background:#777676 ;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  line-height: 1.2;
+  line-height: 1.3;
+  margin-bottom: 1rem;
 }
 
 .failure-message {
-  font-size: 1.25rem;
+  font-size: 1.1rem;
   font-weight: 500;
   color: #666;
-  line-height: 1.5;
+  line-height: 1.6;
+  margin-bottom: 2rem;
 }
 
 .button-group {
@@ -150,10 +190,7 @@ const retryPayment = () => {
   gap: 1rem;
   width: 100%;
   max-width: 300px;
-}
-
-.action-section {
-  margin-top: 2rem;
+  margin-top: 1rem;
 }
 
 .action-btn {
@@ -167,92 +204,137 @@ const retryPayment = () => {
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
 }
 
-/* Responsive Design */
-@media (max-width: 768px) {
+/* Portrait Phone - Small */
+@media (max-width: 480px) and (orientation: portrait) {
   .payment-step {
-    padding: 1rem 0;
+    padding: 1rem;
   }
-  
-  .payment-wrapper {
-    padding: 0 0.5rem;
-  }
-  
+
   .payment-content {
-    padding: 2rem 1.5rem !important;
+    padding: 2rem 1.25rem !important;
   }
-  
-  .failure-title {
-    font-size: 2rem;
-  }
-  
-  .failure-message {
-    font-size: 1.1rem;
-  }
-  
+
   .animated-icon {
     font-size: 80px !important;
   }
-}
 
-@media (max-width: 480px) {
-  .payment-content {
-    padding: 2rem 1rem !important;
-  }
-  
   .failure-title {
-    font-size: 1.8rem;
+    font-size: 1.75rem;
   }
-  
+
   .failure-message {
     font-size: 1rem;
   }
-  
+
+  .icon-container {
+    margin-bottom: 1.5rem;
+  }
+
   .button-group {
     max-width: 100%;
   }
 }
 
-/* Landscape Tablet Optimization */
-@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
-  .payment-step {
-    padding: 1rem 0;
-  }
-  
+/* Portrait Phone - Medium */
+@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
   .payment-content {
-    padding: 2rem !important;
+    padding: 2.5rem 1.5rem !important;
   }
-  
+
   .failure-title {
-    font-size: 2rem;
-    margin-bottom: 1rem;
-  }
-  
-  .failure-message {
-    font-size: 1rem;
-    margin-bottom: 1.5rem;
-  }
-  
-  .animated-icon {
-    font-size: 70px !important;
-  }
-  
-  .icon-container {
-    margin-bottom: 1rem;
+    font-size: 1.85rem;
   }
 }
 
-/* Large Tablet Landscape */
-@media (orientation: landscape) and (min-width: 1024px) {
+/* Portrait Tablet */
+@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+  .payment-step {
+    padding: 2rem;
+  }
+  .logo-section-contact {
+    padding: 20px 12px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .logo-img-contact {
+    width: 80px !important;
+    height: 80px !important;
+  }
+
   .payment-wrapper {
     max-width: 700px;
   }
-  
-  .failure-title {
-    font-size: 2.2rem;
+
+  .payment-content {
+    padding: 3.5rem 2.5rem !important;
   }
-  
+
+  .animated-icon {
+    font-size: 120px !important;
+  }
+
+  .failure-title {
+    font-size: 2.25rem;
+  }
+
   .failure-message {
     font-size: 1.2rem;
   }
 }
-</style>
\ No newline at end of file
+
+/* Landscape Mode - Compact */
+@media (max-height: 600px) and (orientation: landscape) {
+  .payment-step {
+    padding: 1rem;
+  }
+
+  .payment-content {
+    padding: 1.5rem !important;
+  }
+
+  .icon-container {
+    margin-bottom: 1rem;
+  }
+
+  .animated-icon {
+    font-size: 70px !important;
+  }
+
+  .failure-title {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .failure-message {
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+  }
+}
+
+/* Landscape Tablet */
+@media (min-width: 768px) and (orientation: landscape) {
+  .payment-wrapper {
+    max-width: 650px;
+  }
+}
+
+/* Very Small Screens */
+@media (max-width: 360px) {
+  .payment-content {
+    padding: 1.5rem 1rem !important;
+  }
+
+  .animated-icon {
+    font-size: 70px !important;
+  }
+
+  .failure-title {
+    font-size: 1.5rem;
+  }
+
+  .failure-message {
+    font-size: 0.9rem;
+  }
+}
+</style>
diff --git a/components/PembayaranSukses.vue b/components/PembayaranSukses.vue
index d6cb57b..4ee4e53 100644
--- a/components/PembayaranSukses.vue
+++ b/components/PembayaranSukses.vue
@@ -1,131 +1,167 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-   <div class="success-wrapper">
-      <div class="success-container">
-        <!-- Success Icon with Animation -->
-        <div class="success-icon-container mb-6">
-          <div class="success-icon-bg">
-            <v-icon 
-              icon="mdi-check-circle" 
-              size="100" 
-              class="success-icon"
-            />
-          </div>
-          <!-- <div class="success-checkmark">
-            <div class="check-icon">
-              <span class="icon-line line-tip"></span>
-              <span class="icon-line line-long"></span>
-              <div class="icon-circle"></div>
-              <div class="icon-fix"></div>
-            </div>
-          </div> -->
-        </div>
-
-        <!-- Success Content -->
-        <div class="success-content">
-          <h2 class="success-title mb-4">
-            Pembayaran Berhasil
-          </h2>
-          
-          <div class="success-message mb-8">
-            <p class="message-line">Silahkan Menunggu Bukti</p>
-            <p class="message-line">Pembayaran</p>
-          </div>
-
-          <!-- Payment Details Summary (Optional) -->
-          <div class="payment-summary mb-8" v-if="paymentStore.patientInfo">
-            <div class="summary-card">
-              <div class="summary-row">
-                <span class="summary-label">Pasien:</span>
-                <span class="summary-value">{{ paymentStore.patientInfo.name }}</span>
-              </div>
-              <div class="summary-row">
-                <span class="summary-label">Nominal:</span>
-                <span class="summary-value amount">{{ formatCurrency(paymentStore.patientInfo.amount) }}</span>
-              </div>
-              <div class="summary-row">
-                <span class="summary-label">Status:</span>
-                <v-chip color="success" variant="flat" size="small">
-                  <v-icon size="14" class="mr-1">mdi-check</v-icon>
-                  Berhasil
-                </v-chip>
-              </div>
-            </div>
-          </div>
-
-          <!-- Action Button -->
-          <div class="action-section">
-            <v-btn 
-              color="primary" 
-              size="x-large" 
-              variant="flat" 
-              rounded="xl"
-              class="success-btn"
-              @click="paymentStore.reset"
-            >
-              <v-icon class="mr-2">mdi-home</v-icon>
-              Kembali ke Awal
-            </v-btn>
-          </div>
-        </div>
+  <div class="success-wrapper">
+    <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="50"
+          height="50"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
+          width="50"
+          height="50"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
+          width="50"
+          height="50"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
+          width="50"
+          height="50"
+          class="logo-img-contact"
+          contain
+        />
       </div>
     </div>
+    <div class="success-container">
+      <div class="success-icon-container">
+        <div class="success-icon-bg">
+          <v-icon icon="mdi-check-circle" size="100" class="success-icon" />
+        </div>
+      </div>
+
+      <div class="success-content">
+        <h2 class="success-title">Pembayaran Berhasil</h2>
+
+        <div class="success-message">
+          <p class="message-line">Silahkan Menunggu Bukti Pembayaran</p>
+        </div>
+
+        <!-- Payment Details Summary -->
+      <div class="payment-summary" v-if="paymentStore.patientInfo">
+    <div class="summary-card">
+        
+        <div class="summary-row">
+            <span class="summary-label">Nomor RM:</span>
+            <span class="summary-value">{{
+                paymentStore.qrData.display_norm || '-'
+            }}</span>
+        </div>
+
+        <div class="summary-row">
+            <span class="summary-label">No. Billing:</span>
+            <span class="summary-value">{{
+                paymentStore.qrData.display_nobill || '-'
+            }}</span>
+        </div>
+
+        <div class="summary-row">
+            <span class="summary-label">Pasien:</span>
+            <span class="summary-value">{{
+                paymentStore.patientInfo.name
+            }}</span>
+        </div>
+        
+        <div class="summary-row">
+            <span class="summary-label">Nominal:</span>
+            <span class="summary-value amount">{{
+                formatCurrency(paymentStore.patientInfo.amount)
+            }}</span>
+        </div>
+        
+        <div class="summary-row">
+            <span class="summary-label">Status:</span>
+            <v-chip color="success" variant="flat" size="small">
+                <v-icon size="14" class="mr-1">mdi-check</v-icon>
+                Berhasil
+            </v-chip>
+        </div>
+    </div>
+</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { usePaymentStore } from '~/stores/payment';
+import { usePaymentStore } from "~/stores/payment";
 
 const paymentStore = usePaymentStore();
 
-const formatCurrency = (amount) => {
-  return new Intl.NumberFormat('id-ID', {
-    style: 'currency',
-    currency: 'IDR',
-    minimumFractionDigits: 0
+const formatCurrency = (amountString) => {
+  const cleanString = amountString.replace(/\./g, "").replace(",", ".");
+  const amount = parseFloat(cleanString);
+
+  if (isNaN(amount)) {
+    return "Invalid Amount";
+  }
+
+  return new Intl.NumberFormat("id-ID", {
+    style: "currency",
+    currency: "IDR",
+    minimumFractionDigits: 0,
   }).format(amount);
 };
 </script>
 
 <style scoped>
-.payment-step {
-  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
+.success-wrapper {
+  position: relative;
   min-height: 100vh;
-  height: auto;
-  padding: 1rem;
   display: flex;
-  margin: 80px;
   align-items: center;
   justify-content: center;
 }
+.logo-section-contact {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  display: flex;
+  background: rgb(255, 255, 255);
+  border-radius: 24px;
+  padding: 1rem 1rem;
+  margin: 0 auto;
+  width: fit-content;
+  justify-content: center;
+  z-index: 10;
+}
 
-.success-wrapper {
-  width: 100%;
-  max-width: 800px;
-  margin: 0;
-  padding: 0rem;
+.logo-group-contact {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .success-container {
   background: rgb(255, 255, 255);
   border-radius: 24px;
-  padding: 0.5rem 0.5rem;
+  padding: 3rem 2rem;
   text-align: center;
-  /* backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 
-    0 20px 60px rgba(0, 0, 0, 0.08),
-    0 8px 32px rgba(0, 0, 0, 0.04),
-    inset 0 1px 0 rgba(255, 255, 255, 0.8); */
+  width: 100%;
+  max-width: 600px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
 }
 
 /* Success Icon Animation */
 .success-icon-container {
-  position: relative;
   display: inline-block;
+  margin-bottom: 2rem;
 }
 
 .success-icon-bg {
-  position: relative;
   display: inline-block;
   animation: successPulse 2s ease-in-out infinite;
 }
@@ -136,83 +172,24 @@ const formatCurrency = (amount) => {
 }
 
 @keyframes successPulse {
-  0%, 100% { 
-    transform: scale(1); 
-    opacity: 1; 
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
   }
-  50% { 
-    transform: scale(1.05); 
-    opacity: 0.9; 
+  50% {
+    transform: scale(1.05);
+    opacity: 0.9;
   }
 }
 
-/* Animated Checkmark */
-.success-checkmark {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
-.check-icon {
-  width: 50px;
-  height: 50px;
-  position: relative;
-  border-radius: 50%;
-  box-sizing: content-box;
-  border: 3px solid #4caf50;
-  background: rgba(76, 175, 80, 0.1);
-}
-
-.icon-line {
-  height: 3px;
-  background-color: #4caf50;
-  display: block;
-  border-radius: 2px;
-  position: absolute;
-  z-index: 10;
-}
-
-.icon-line.line-tip {
-  top: 23px;
-  left: 8px;
-  width: 15px;
-  transform: rotate(45deg);
-  animation: checkTip 0.75s ease-in-out 1s both;
-}
-
-.icon-line.line-long {
-  top: 18px;
-  right: 8px;
-  width: 25px;
-  transform: rotate(-45deg);
-  animation: checkLong 0.75s ease-in-out 1.2s both;
-}
-
-@keyframes checkTip {
-  0% { width: 0; left: 1px; top: 19px; }
-  54% { width: 0; left: 1px; top: 19px; }
-  70% { width: 15px; left: -2px; top: 37px; }
-  84% { width: 17px; left: 8px; top: 23px; }
-  100% { width: 15px; left: 8px; top: 23px; }
-}
-
-@keyframes checkLong {
-  0% { width: 0; right: 46px; top: 54px; }
-  65% { width: 0; right: 46px; top: 54px; }
-  84% { width: 25px; right: 0px; top: 17px; }
-  100% { width: 25px; right: 8px; top: 18px; }
-}
-
 /* Success Content */
 .success-content {
   position: relative;
-  z-index: 2;
 }
 
 .success-title {
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 800;
   color: #1a1a1a;
   background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
@@ -220,30 +197,30 @@ const formatCurrency = (amount) => {
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 1rem;
-  line-height: 1.5;
+  line-height: 1.3;
 }
 
 .success-message {
   color: #666;
-  font-size: 1rem;
+  font-size: 1.1rem;
   font-weight: 500;
-  line-height: 2;
+  line-height: 1.6;
+  margin-bottom: 2rem;
 }
 
 .message-line {
-  margin: 0;
-  padding: 0.25rem 0;
+  margin: 0.25rem 0;
 }
 
 /* Payment Summary */
 .payment-summary {
-  margin: 1rem 0;
+  margin-top: 2rem;
 }
 
 .summary-card {
   background: rgba(76, 175, 80, 0.06);
   border-radius: 16px;
-  padding: 2rem;
+  padding: 1.5rem;
   border: 1px solid rgba(76, 175, 80, 0.2);
 }
 
@@ -269,6 +246,7 @@ const formatCurrency = (amount) => {
   color: #1a1a1a;
   font-weight: 700;
   font-size: 1rem;
+  text-align: right;
 }
 
 .summary-value.amount {
@@ -276,106 +254,43 @@ const formatCurrency = (amount) => {
   font-size: 1.1rem;
 }
 
-/* Action Button */
-.action-section {
-  margin-top: 2rem;
-}
-
-.success-btn {
-  background: linear-gradient(135deg, #ff9248 0%, #ff7043 100%) !important;
-  color: white !important;
-  font-weight: 700 !important;
-  font-size: 1.1rem !important;
-  text-transform: none !important;
-  padding: 0 3rem !important;
-  min-width: 200px;
-  box-shadow: 
-    0 8px 25px rgba(255, 146, 72, 0.3),
-    0 4px 15px rgba(255, 146, 72, 0.2) !important;
-  transition: all 0.3s ease !important;
-}
-
-.success-btn:hover {
-  transform: translateY(-3px);
-  box-shadow: 
-    0 12px 35px rgba(255, 146, 72, 0.4),
-    0 8px 25px rgba(255, 146, 72, 0.3) !important;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .payment-step {
-    padding: 1rem 0;
-  }
-  
+/* Portrait Tablet */
+@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
   .success-wrapper {
-    padding: 0 0.5rem;
+    padding: 2rem;
   }
-  
-  .success-container {
-    padding: 2rem 1.5rem;
+  .logo-section-contact {
+    padding: 20px 12px;
+    margin-top: 40px;
+    margin-bottom: 40px;
   }
-  
-  .success-title {
-    font-size: 2rem;
-  }
-  
-  .success-message {
-    font-size: 1.1rem;
-  }
-  
-  .success-icon {
-    font-size: 80px !important;
-  }
-}
 
-@media (max-width: 480px) {
+  .logo-img-contact {
+    width: 80px !important;
+    height: 80px !important;
+  }
   .success-container {
-    padding: 2rem 1rem;
+    max-width: 700px;
+    padding: 3.5rem 2.5rem;
   }
-  
+
+  .success-icon {
+    font-size: 120px !important;
+  }
+
   .success-title {
-    font-size: 1.8rem;
+    font-size: 2.25rem;
   }
-  
+
   .success-message {
-    font-size: 1rem;
-  }
-  
-  .success-btn {
-    min-width: 100%;
-    margin-top: 1rem;
+    font-size: 1.2rem;
   }
 }
 
 /* Landscape Tablet */
-@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
-  .payment-step {
-    padding: 1rem 0;
-  }
-  
+@media (min-width: 768px) and (orientation: landscape) {
   .success-container {
-    padding: 2rem;
-    max-width: 500px;
-    margin: 0 auto;
-  }
-  
-  .success-title {
-    font-size: 2rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  .success-message {
-    font-size: 1rem;
-    margin-bottom: 1.5rem;
-  }
-  
-  .payment-summary {
-    margin: 1rem 0;
-  }
-  
-  .success-icon {
-    font-size: 70px !important;
+    max-width: 650px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/QRISPayment landsc.txt b/components/QRISPayment landsc.txt
new file mode 100644
index 0000000..f4713de
--- /dev/null
+++ b/components/QRISPayment landsc.txt	
@@ -0,0 +1,901 @@
+<template>
+  <div class="payment-step">
+    <v-card-text class="main-content pa-4">
+      <div class="header-section text-center mb-8">
+        <h2 class="payment-title">Pindai Kode QR untuk Pembayaran</h2>
+        <p class="payment-subtitle">
+          Gunakan aplikasi mobile banking atau e-wallet Anda
+        </p>
+      </div>
+
+      <div class="main-content-section mb-8">
+        <div class="content-grid">
+          <div class="qr-section">
+            <div class="qr-container">
+              <div class="qris-logo-container mb-0">
+                <v-img
+                  src="/rssalogo.png"
+                  height="60"
+                  class="RSSA-logo"
+                  contain
+                />
+                <v-img
+                  src="/bankjatimlogo.png"
+                  height="30"
+                  class="qris-logo"
+                  contain
+                />
+              </div>
+              <div class="qr-wrapper">
+                <div class="qr-code-bg">
+                  <img
+                    ref="qrCodeImage"
+                    alt="QR Code"
+                    class="qr-image"
+                    :class="{ 'qr-loaded': qrLoaded }"
+                  />
+                  <div class="qr-overlay" v-if="!qrLoaded">
+                    <v-progress-circular
+                      indeterminate
+                      color="primary"
+                      size="40"
+                    />
+                  </div>
+                </div>
+                <!-- <div class="qr-brand-label">
+                  <span>QRIS</span>
+                </div> -->
+              </div>
+
+              <div class="scan-line" v-if="qrLoaded"></div>
+              <div>
+                <v-img
+                  src="/qrislogo.png"
+                  height="50"
+                  class="qris-logo mb-n4 mt-n2"
+                  contain
+                />
+              </div>
+            </div>
+
+            <div class="qr-instructions text-center mt-4">
+              <v-icon size="20" color="primary" class="mb-2"
+                >mdi-qrcode-scan</v-icon
+              >
+              <p class="instruction-text">Arahkan kamera ke QR code</p>
+            </div>
+          </div>
+
+          <div class="details-section">
+            <div class="payment-details-card">
+              <div class="details-header">
+                <v-icon color="primary" class="mr-2"
+                  >mdi-receipt-text-outline</v-icon
+                >
+                <span class="details-title">Detail Pembayaran</span>
+              </div>
+
+              <div class="details-content">
+                <div class="detail-row-split">
+                  <div class="detail-column">
+                    <div class="detail-label">
+                      <v-icon size="18" class="mr-2" color="primary"
+                        >mdi-card-account-details-outline</v-icon
+                      >
+                      No RM
+                    </div>
+                    <div class="detail-value">
+                      {{
+                        paymentStore.qrData.display_nobill?.split("/")[0] || "-"
+                      }}
+                    </div>
+                  </div>
+                  <div class="detail-column">
+                    <div class="detail-label">
+                      <v-icon size="18" class="mr-2" color="primary"
+                        >mdi-file-document-outline</v-icon
+                      >
+                      No Billing
+                    </div>
+                    <div class="detail-value">
+                      {{
+                        paymentStore.qrData.display_nobill?.split("/")[1] || "-"
+                      }}
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-row">
+                  <div class="detail-label">
+                    <v-icon size="18" class="mr-2" color="primary"
+                      >mdi-account-outline</v-icon
+                    >
+                    Nama Pasien
+                  </div>
+                  <div class="detail-value patient-name">
+                    {{ paymentStore.patientInfo.name }}
+                  </div>
+                </div>
+
+                <div class="detail-row highlight-row">
+                  <div class="detail-label">
+                    <v-icon size="18" class="mr-2" color="success"
+                      >mdi-cash</v-icon
+                    >
+                    Nominal
+                  </div>
+                  <div class="detail-value amount">
+                    {{ formatCurrency(paymentStore.patientInfo.amount) }}
+                  </div>
+                </div>
+
+                <!-- <div class="detail-row">
+                  <div class="detail-label">
+                    <v-icon size="18" class="mr-2" color="primary"
+                      >mdi-file-document-outline</v-icon
+                    >
+                    Nomor Tagihan
+                  </div>
+                  <div class="detail-value">
+                    {{ paymentStore.qrData.display_nobill }}
+                  </div>
+                </div> -->
+
+                <div class="detail-row">
+                  <div class="detail-label">
+                    <v-icon size="18" class="mr-2" color="warning"
+                      >mdi-clock-outline</v-icon
+                    >
+                    Berlaku Sampai
+                  </div>
+                  <div class="detail-value expired">
+                    {{ expiryDisplayTime }}
+                  </div>
+                </div>
+              </div>
+
+              <div class="payment-status mt-4">
+                <div class="status-row">
+                  <div class="status-indicator-inline">
+                    <div class="status-dot pulsing"></div>
+                    <span class="status-text">Menunggu pembayaran...</span>
+                  </div>
+                  <v-chip color="warning" variant="tonal" size="small">
+                    <v-icon size="14" class="mr-1">mdi-clock-fast</v-icon>
+                    Pending
+                  </v-chip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="action-buttons">
+        <v-btn
+          color="grey-lighten-1"
+          variant="outlined"
+          size="large"
+          class="action-btn back-btn"
+          @click="paymentStore.prevStep"
+        >
+          <v-icon class="mr-2">mdi-arrow-left</v-icon>
+          Kembali
+        </v-btn>
+
+        <v-btn
+          color="success"
+          variant="flat"
+          size="large"
+          class="action-btn"
+          @click="simulateSuccess"
+        >
+          <v-icon class="mr-2">mdi-check-circle-outline</v-icon>
+          Simulasi Sukses
+        </v-btn>
+
+        <v-btn
+          color="error"
+          variant="flat"
+          size="large"
+          class="action-btn"
+          @click="simulateFailure"
+        >
+          <v-icon class="mr-2">mdi-close-circle-outline</v-icon>
+          Simulasi Gagal
+        </v-btn>
+      </div>
+
+      <!-- <div class="help-text text-center mt-6">
+        <v-icon size="16" class="mr-1">mdi-information-outline</v-icon>
+        <span>Scan QR code menggunakan aplikasi pembayaran digital Anda</span>
+      </div> -->
+    </v-card-text>
+  </div>
+</template>
+<script setup>
+import { usePaymentStore } from "~/stores/payment";
+import QRCode from "qrcode";
+import { ref, onMounted, watch, onBeforeUnmount } from "vue";
+
+const paymentStore = usePaymentStore();
+const qrCodeImage = ref(null);
+const qrLoaded = ref(false);
+
+const EXPIRY_MINUTES = 1440;
+const expiryDisplayTime = ref("Menghitung...");
+let countdownInterval = null;
+
+const calculateExpiryDate = (createdAt) => {
+  if (!createdAt) return null;
+
+  try {
+    const createdDate = new Date(createdAt);
+    if (isNaN(createdDate.getTime())) return null;
+
+    return new Date(createdDate.getTime() + EXPIRY_MINUTES * 60000);
+  } catch (e) {
+    console.error("Error calculating expiry time:", e);
+    return null;
+  }
+};
+
+const formatTimeLeft = (seconds) => {
+  if (seconds <= 0) {
+    clearInterval(countdownInterval);
+    return "KEDALUWARSA";
+  }
+
+  const h = String(Math.floor(seconds / 3600)).padStart(2, "0");
+  const m = String(Math.floor((seconds % 3600) / 60)).padStart(2, "0");
+  const s = String(seconds % 60).padStart(2, "0");
+  return `${h}:${m}:${s}`;
+};
+
+// Memulai fungsi hitung mundur
+const startCountdown = (expiryDate) => {
+  if (!expiryDate) {
+    expiryDisplayTime.value = "Waktu tidak valid";
+    return;
+  }
+
+  // Hentikan interval sebelumnya jika ada
+  if (countdownInterval) {
+    clearInterval(countdownInterval);
+  }
+
+  const updateCountdown = () => {
+    const now = new Date().getTime();
+    const timeRemainingMs = expiryDate.getTime() - now;
+    const timeRemainingSeconds = Math.max(
+      0,
+      Math.floor(timeRemainingMs / 1000)
+    );
+
+    expiryDisplayTime.value = formatTimeLeft(timeRemainingSeconds);
+  };
+
+  updateCountdown();
+
+  countdownInterval = setInterval(updateCountdown, 1000);
+};
+
+// Membersihkan interval saat komponen dihancurkan
+onBeforeUnmount(() => {
+  if (countdownInterval) {
+    clearInterval(countdownInterval);
+  }
+});
+
+const formatCurrency = (amount) => {
+  return new Intl.NumberFormat("id-ID", {
+    style: "currency",
+    currency: "IDR",
+    minimumFractionDigits: 0,
+  }).format(amount);
+};
+
+const generateQRCode = async () => {
+  const qrValue = paymentStore.qrData.qrvalue;
+  if (qrValue) {
+    try {
+      qrLoaded.value = false;
+      const dataUrl = await QRCode.toDataURL(qrValue, {
+        width: 240,
+        margin: 1,
+        color: {
+          dark: "#000000",
+          light: "#FFFFFF",
+        },
+        errorCorrectionLevel: "M",
+      });
+      if (qrCodeImage.value) {
+        qrCodeImage.value.src = dataUrl;
+        qrCodeImage.value.onload = () => {
+          qrLoaded.value = true;
+        };
+      }
+    } catch (error) {
+      console.error("Failed to generate QR Code:", error);
+    }
+  }
+};
+
+const simulateSuccess = () => {
+  console.log("--- DEBUG: SIMULASI SUKSES ---");
+  const currentData = paymentStore.qrData;
+
+  // Simulasikan data status SUKSES (status "2")
+  const successData = {
+    data: [
+      {
+        ...currentData,
+        status: "2",
+        transaction_id: `TRX-SIM-SUKSES-${Date.now()}`,
+      },
+    ],
+  };
+
+  paymentStore.updatePayment(successData);
+};
+
+const simulateFailure = () => {
+  console.log("--- DEBUG: SIMULASI GAGAL ---");
+  const currentData = paymentStore.qrData;
+
+  // Simulasikan data status GAGAL (status "0")
+  const failureData = {
+    data: [
+      {
+        ...currentData,
+        status: "0",
+        reason: "SIMULASI: Transaksi dibatalkan atau kedaluwarsa.",
+      },
+    ],
+  };
+
+  paymentStore.updatePayment(failureData);
+};
+
+onMounted(() => {
+  generateQRCode();
+
+  // Hitung tanggal kedaluwarsa awal dan mulai hitung mundur
+  const createdAt = paymentStore.qrData.created_at;
+  if (createdAt) {
+    const expiryDate = calculateExpiryDate(createdAt);
+    startCountdown(expiryDate);
+  }
+});
+
+watch(
+  () => paymentStore.qrData,
+  (newQrData) => {
+    generateQRCode();
+
+    const createdAt = newQrData.created_at;
+    if (createdAt) {
+      const expiryDate = calculateExpiryDate(createdAt);
+      startCountdown(expiryDate); // Mulai hitung mundur setiap kali data QR berubah
+      console.log(`[QRISPayment] Waktu kedaluwarsa diperbarui.`);
+    } else {
+      expiryDisplayTime.value = "Data Waktu Tidak Tersedia";
+    }
+  },
+  { deep: true }
+);
+</script>
+<style scoped>
+.payment-step {
+  background: #ff9248;
+}
+.main-content {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
+  /* min-height: 100vh; */
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border-radius: 16px;
+  height: fit-content;
+}
+/* Header Section */
+.header-section {
+  padding-top: 0px;
+}
+
+.qris-logo-container {
+  display: flex;
+  gap: 0rem;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.qris-logo {
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
+  transition: transform 0.3s ease;
+  align-items: baseline;
+  margin-right: 25px;
+}
+
+.RSSA-logo {
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
+  transition: transform 0.3s ease;
+  align-items: end;
+  margin-right: -50px !important;
+}
+
+.qris-logo:hover {
+  transform: scale(1);
+}
+
+.payment-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-top: 0;
+  margin-bottom: 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.payment-subtitle {
+  color: #666;
+  font-size: 0.9rem;
+  margin-bottom: 0;
+}
+
+/* Main Content Grid Layout */
+.main-content-section {
+  width: 100%;
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  align-items: start;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+/* QR Code Section */
+.qr-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.details-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.qr-container {
+  position: relative;
+  background: linear-gradient(145deg, #ffffff, #f0f4f8);
+  border-radius: 24px;
+  padding: 1rem;
+  box-shadow:
+    0 20px 40px rgba(0, 0, 0, 0.08),
+    0 8px 16px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  width: 100%;
+  max-width: 350px;
+}
+
+.qr-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.qr-code-bg {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 1rem;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  position: relative;
+  overflow: hidden;
+}
+
+.qr-image {
+  width: 240px;
+  height: 240px;
+  border-radius: 8px;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.qr-image.qr-loaded {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.qr-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(248, 250, 252, 0.9);
+  border-radius: 8px;
+}
+
+.qr-brand-label {
+  position: absolute;
+  bottom: -8px;
+  right: -8px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+/* Scanning Animation */
+.scan-line {
+  position: absolute;
+  top: 2rem;
+  left: 2rem;
+  right: 2rem;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #667eea, transparent);
+  animation: scanning 2s ease-in-out infinite;
+}
+
+@keyframes scanning {
+  0% {
+    top: 2rem;
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    top: calc(100% - 2rem);
+    opacity: 0;
+  }
+}
+
+/* QR Instructions */
+.qr-instructions {
+  margin-top: 1rem;
+  display: flex;
+  gap: 8px;
+}
+
+.instruction-text {
+  color: #666;
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin: 0;
+}
+
+/* Payment Details Card */
+.payment-details-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20px;
+  padding: 1.5rem;
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  height: fit-content;
+  width: 100%;
+}
+
+.details-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
+}
+
+.details-title {
+  font-weight: 700;
+  color: #1a1a1a;
+  font-size: 1.2rem;
+}
+
+.details-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.detail-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 0.5rem;
+  border-radius: 12px;
+  background: rgba(248, 250, 252, 0.6);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  transition: all 0.3s ease;
+}
+
+.detail-row:hover {
+  background: rgba(248, 250, 252, 0.9);
+  transform: translateY(-1px);
+}
+
+.detail-row-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 12px;
+  background: rgba(248, 250, 252, 0.6);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  transition: all 0.3s ease;
+}
+
+.detail-row-split:hover {
+  background: rgba(248, 250, 252, 0.9);
+  transform: translateY(-1px);
+}
+
+.detail-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 0.5rem;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.highlight-row {
+  background: rgba(46, 204, 113, 0.08) !important;
+  border: 1px solid rgba(46, 204, 113, 0.2) !important;
+}
+
+.highlight-row:hover {
+  background: rgba(46, 204, 113, 0.12) !important;
+}
+
+.detail-label {
+  display: flex;
+  align-items: center;
+  color: #666;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.detail-value {
+  color: #1a1a1a;
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-left: 1.5rem;
+}
+
+.detail-value.patient-name {
+  color: #2c3e50;
+  font-size: 1.2rem;
+}
+
+.detail-value.amount {
+  color: #27ae60;
+  font-size: 1.4rem;
+  font-weight: 800;
+}
+
+.detail-value.expired {
+  color: #e67e22;
+  font-size: 1rem;
+}
+
+/* Payment Status */
+.payment-status {
+  padding: 1rem;
+  background: rgba(255, 193, 7, 0.08);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 193, 7, 0.2);
+}
+
+.status-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.status-indicator-inline {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Status Indicator */
+.status-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #f39c12;
+}
+
+.status-dot.pulsing {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(1.2);
+  }
+}
+
+.status-text {
+  color: #666;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+/* Action Buttons */
+.action-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.action-btn {
+  border-radius: 16px !important;
+  font-weight: 600 !important;
+  text-transform: none !important;
+  padding: 0 2rem !important;
+  min-width: 140px;
+  transition: all 0.3s ease !important;
+}
+
+.back-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
+}
+
+.simulate-btn {
+  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
+  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3) !important;
+}
+
+.simulate-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.4) !important;
+}
+
+/* Help Text */
+.help-text {
+  color: #888;
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+/* Responsive Design */
+@media (max-width: 900px) {
+  .content-grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .qr-container {
+    max-width: 320px;
+  }
+
+  .payment-details-card {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .qr-container {
+    padding: 1.5rem;
+    max-width: 280px;
+  }
+
+  .qr-image {
+    width: 200px;
+    height: 200px;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+  }
+
+  .action-btn {
+    min-width: 100%;
+  }
+
+  .payment-title {
+    font-size: 1.3rem;
+  }
+
+  .payment-details-card {
+    padding: 1.5rem;
+  }
+}
+
+/* Tablet Landscape Optimization */
+@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
+  .header-section {
+    padding-top: 0.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .payment-title {
+    font-size: 1.3rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .payment-subtitle {
+    font-size: 0.8rem;
+  }
+
+  .qr-container {
+    padding: 1.5rem;
+  }
+
+  .qr-image {
+    width: 200px;
+    height: 200px;
+  }
+
+  .payment-details-card {
+    padding: 1.5rem;
+    min-height: 300px;
+  }
+
+  .content-grid {
+    gap: 2rem;
+  }
+}
+
+/* Large Tablet Landscape */
+@media (orientation: landscape) and (min-width: 1024px) {
+  .content-grid {
+    max-width: 1200px;
+    gap: 4rem;
+  }
+
+  .qr-container {
+    max-width: 400px;
+  }
+
+  .qr-image {
+    width: 280px;
+    height: 280px;
+  }
+
+  .payment-details-card {
+    width: 100%;
+  }
+}
+</style>
diff --git a/components/QRISPayment.vue b/components/QRISPayment.vue
index dfb370b..24db124 100644
--- a/components/QRISPayment.vue
+++ b/components/QRISPayment.vue
@@ -9,19 +9,20 @@
       </div>
 
       <div class="main-content-section mb-8">
-        <div class="content-grid">
+        <div :class="isPortrait ? 'content-stack' : 'content-grid'">
+          <!-- QR Section -->
           <div class="qr-section">
             <div class="qr-container">
-              <div class="qris-logo-container mb-0">
+              <div class="qris-logo-container mb-4">
                 <v-img
-                  src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
-                  height="60"
+                  src="/rssalogo.png"
+                  :height="isPortrait ? 100 : 60"
                   class="RSSA-logo"
                   contain
                 />
                 <v-img
-                  src="https://ottocash.id/wp-content/uploads/2022/08/qris.png"
-                  height="60"
+                  src="/bankjatimlogo.png"
+                  :height="isPortrait ? 50 : 30"
                   class="qris-logo"
                   contain
                 />
@@ -42,22 +43,28 @@
                     />
                   </div>
                 </div>
-                <div class="qr-brand-label">
-                  <span>QRIS</span>
-                </div>
               </div>
 
               <div class="scan-line" v-if="qrLoaded"></div>
+              <div>
+                <v-img
+                  src="/qrislogo.png"
+                  :height="isPortrait ? 70 : 50"
+                  class="qris-logo mb-n3 mt-n2"
+                  contain
+                />
+              </div>
             </div>
 
             <div class="qr-instructions text-center mt-4">
               <v-icon size="20" color="primary" class="mb-2"
                 >mdi-qrcode-scan</v-icon
               >
-              <p class="instruction-text">Arahkan kamera ke QR code</p>
+              <div class="instruction-text">Arahkan kamera ke QR code</div>
             </div>
           </div>
 
+          <!-- Details Section -->
           <div class="details-section">
             <div class="payment-details-card">
               <div class="details-header">
@@ -68,6 +75,31 @@
               </div>
 
               <div class="details-content">
+                <div class="detail-row-split">
+                  <div class="detail-column">
+                    <div class="detail-label">
+                      <v-icon size="18" class="mr-2" color="primary"
+                        >mdi-card-account-details-outline</v-icon
+                      >
+                      No RM
+                    </div>
+                    <div class="detail-value">
+                      {{ paymentStore.qrData.display_norm || "-" }}
+                    </div>
+                  </div>
+                  <div class="detail-column">
+                    <div class="detail-label">
+                      <v-icon size="18" class="detail-icon mr-2" color="primary"
+                        >mdi-file-document-outline</v-icon
+                      >
+                      No Billing
+                    </div>
+                    <div class="detail-value">
+                      {{ paymentStore.qrData.display_nobill || "-" }}
+                    </div>
+                  </div>
+                </div>
+
                 <div class="detail-row">
                   <div class="detail-label">
                     <v-icon size="18" class="mr-2" color="primary"
@@ -76,7 +108,12 @@
                     Nama Pasien
                   </div>
                   <div class="detail-value patient-name">
-                    {{ paymentStore.patientInfo.name }}
+                    {{
+                      paymentStore.patientInfo.name &&
+                      paymentStore.patientInfo.name.length > 28
+                        ? paymentStore.patientInfo.name.substring(0, 25) + "..."
+                        : paymentStore.patientInfo.name
+                    }}
                   </div>
                 </div>
 
@@ -92,18 +129,6 @@
                   </div>
                 </div>
 
-                <div class="detail-row">
-                  <div class="detail-label">
-                    <v-icon size="18" class="mr-2" color="primary"
-                      >mdi-file-document-outline</v-icon
-                    >
-                    Nomor Tagihan
-                  </div>
-                  <div class="detail-value">
-                    {{ paymentStore.qrData.display_nobill }}
-                  </div>
-                </div>
-
                 <div class="detail-row">
                   <div class="detail-label">
                     <v-icon size="18" class="mr-2" color="warning"
@@ -165,42 +190,33 @@
           @click="simulateFailure"
         >
           <v-icon class="mr-2">mdi-close-circle-outline</v-icon>
-          Simulasi Gagal
+          Simulasi Pending
         </v-btn>
       </div>
-
-      <!-- <div class="help-text text-center mt-6">
-        <v-icon size="16" class="mr-1">mdi-information-outline</v-icon>
-        <span>Scan QR code menggunakan aplikasi pembayaran digital Anda</span>
-      </div> -->
     </v-card-text>
   </div>
 </template>
+
 <script setup>
 import { usePaymentStore } from "~/stores/payment";
 import QRCode from "qrcode";
-import { ref, onMounted, watch, onBeforeUnmount } from "vue";
+import { ref, onMounted, watch, onBeforeUnmount, computed } from "vue";
 
 const paymentStore = usePaymentStore();
 const qrCodeImage = ref(null);
 const qrLoaded = ref(false);
+const windowWidth = ref(window.innerWidth);
+const windowHeight = ref(window.innerHeight);
+
+const isPortrait = computed(() => windowHeight.value > windowWidth.value);
+const qrSize = computed(() => (isPortrait.value ? 280 : 240));
 
-const EXPIRY_MINUTES = 1440;
 const expiryDisplayTime = ref("Menghitung...");
 let countdownInterval = null;
 
-const calculateExpiryDate = (createdAt) => {
-  if (!createdAt) return null;
-
-  try {
-    const createdDate = new Date(createdAt);
-    if (isNaN(createdDate.getTime())) return null;
-
-    return new Date(createdDate.getTime() + EXPIRY_MINUTES * 60000);
-  } catch (e) {
-    console.error("Error calculating expiry time:", e);
-    return null;
-  }
+const handleResize = () => {
+  windowWidth.value = window.innerWidth;
+  windowHeight.value = window.innerHeight;
 };
 
 const formatTimeLeft = (seconds) => {
@@ -215,14 +231,21 @@ const formatTimeLeft = (seconds) => {
   return `${h}:${m}:${s}`;
 };
 
-// Memulai fungsi hitung mundur
-const startCountdown = (expiryDate) => {
-  if (!expiryDate) {
+/**
+ * Memulai hitungan mundur berdasarkan string waktu kedaluwarsa (expired_at).
+ * @param {string} expiryTimeString - String waktu kedaluwarsa, misal: "2025-10-29 13:10:49".
+ */
+const startCountdown = (expiryTimeString) => {
+  const isoDateString = expiryTimeString
+    ? expiryTimeString.replace(" ", "T")
+    : null;
+  const expiryDate = isoDateString ? new Date(isoDateString) : null;
+
+  if (!expiryDate || isNaN(expiryDate.getTime())) {
     expiryDisplayTime.value = "Waktu tidak valid";
     return;
   }
 
-  // Hentikan interval sebelumnya jika ada
   if (countdownInterval) {
     clearInterval(countdownInterval);
   }
@@ -230,6 +253,7 @@ const startCountdown = (expiryDate) => {
   const updateCountdown = () => {
     const now = new Date().getTime();
     const timeRemainingMs = expiryDate.getTime() - now;
+
     const timeRemainingSeconds = Math.max(
       0,
       Math.floor(timeRemainingMs / 1000)
@@ -243,14 +267,21 @@ const startCountdown = (expiryDate) => {
   countdownInterval = setInterval(updateCountdown, 1000);
 };
 
-// Membersihkan interval saat komponen dihancurkan
 onBeforeUnmount(() => {
   if (countdownInterval) {
     clearInterval(countdownInterval);
   }
+  window.removeEventListener("resize", handleResize);
 });
 
-const formatCurrency = (amount) => {
+const formatCurrency = (amountString) => {
+  const cleanString = amountString.replace(/\./g, "").replace(",", ".");
+  const amount = parseFloat(cleanString);
+
+  if (isNaN(amount)) {
+    return "Invalid Amount";
+  }
+
   return new Intl.NumberFormat("id-ID", {
     style: "currency",
     currency: "IDR",
@@ -264,7 +295,7 @@ const generateQRCode = async () => {
     try {
       qrLoaded.value = false;
       const dataUrl = await QRCode.toDataURL(qrValue, {
-        width: 240,
+        width: qrSize.value,
         margin: 1,
         color: {
           dark: "#000000",
@@ -288,7 +319,6 @@ const simulateSuccess = () => {
   console.log("--- DEBUG: SIMULASI SUKSES ---");
   const currentData = paymentStore.qrData;
 
-  // Simulasikan data status SUKSES (status "2")
   const successData = {
     data: [
       {
@@ -306,7 +336,6 @@ const simulateFailure = () => {
   console.log("--- DEBUG: SIMULASI GAGAL ---");
   const currentData = paymentStore.qrData;
 
-  // Simulasikan data status GAGAL (status "0")
   const failureData = {
     data: [
       {
@@ -317,19 +346,16 @@ const simulateFailure = () => {
     ],
   };
 
-  // Update store Pinia. Watcher di index.vue akan memicu transisi ke Step 4.
   paymentStore.updatePayment(failureData);
 };
-// ------------------------------------
 
 onMounted(() => {
   generateQRCode();
+  window.addEventListener("resize", handleResize);
 
-  // Hitung tanggal kedaluwarsa awal dan mulai hitung mundur
-  const createdAt = paymentStore.qrData.created_at;
-  if (createdAt) {
-    const expiryDate = calculateExpiryDate(createdAt);
-    startCountdown(expiryDate);
+  const expiryTimeString = paymentStore.qrData.expired_at;
+  if (expiryTimeString) {
+    startCountdown(expiryTimeString);
   }
 });
 
@@ -338,32 +364,37 @@ watch(
   (newQrData) => {
     generateQRCode();
 
-    // LOGIKA PERHITUNGAN WAKTU KEDALUWARSA
-    const createdAt = newQrData.created_at;
-    if (createdAt) {
-      const expiryDate = calculateExpiryDate(createdAt);
-      startCountdown(expiryDate); // Mulai hitung mundur setiap kali data QR berubah
-      console.log(`[QRISPayment] Waktu kedaluwarsa diperbarui.`);
+    const expiryTimeString = newQrData.expired_at;
+    if (expiryTimeString) {
+      startCountdown(expiryTimeString);
+      console.log(
+        `[QRISPayment] Waktu kedaluwarsa diperbarui: ${expiryTimeString}`
+      );
     } else {
       expiryDisplayTime.value = "Data Waktu Tidak Tersedia";
     }
   },
   { deep: true }
 );
+
+watch(isPortrait, () => {
+  generateQRCode();
+});
 </script>
+
 <style scoped>
 .payment-step {
   background: #ff9248;
 }
+
 .main-content {
   background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
-  /* min-height: 100vh; */
   margin-top: 10px;
   margin-bottom: 10px;
   border-radius: 16px;
   height: fit-content;
 }
-/* Header Section */
+
 .header-section {
   padding-top: 0px;
 }
@@ -380,7 +411,7 @@ watch(
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
   transition: transform 0.3s ease;
   align-items: baseline;
-  margin-right: 25px;
+  margin-right: 5px;
 }
 
 .RSSA-logo {
@@ -390,10 +421,6 @@ watch(
   margin-right: -50px !important;
 }
 
-.qris-logo:hover {
-  transform: scale(1);
-}
-
 .payment-title {
   font-size: 1.5rem;
   font-weight: 700;
@@ -412,21 +439,10 @@ watch(
   margin-bottom: 0;
 }
 
-/* Main Content Grid Layout */
 .main-content-section {
   width: 100%;
 }
 
-.content-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.5rem;
-  align-items: start;
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-/* QR Code Section */
 .qr-section {
   display: flex;
   flex-direction: column;
@@ -439,10 +455,10 @@ watch(
 }
 
 .qr-container {
-  position: relative;
+  position: center;
   background: linear-gradient(145deg, #ffffff, #f0f4f8);
   border-radius: 24px;
-  padding: 2rem;
+  padding: 1rem;
   box-shadow:
     0 20px 40px rgba(0, 0, 0, 0.08),
     0 8px 16px rgba(0, 0, 0, 0.04),
@@ -450,7 +466,7 @@ watch(
   border: 1px solid rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(10px);
   width: 100%;
-  max-width: 350px;
+  transition: all 0.3s ease;
 }
 
 .qr-wrapper {
@@ -459,23 +475,20 @@ watch(
 }
 
 .qr-code-bg {
-  background: #ffffff;
+  background: #00000000;
   border-radius: 16px;
   padding: 1rem;
-  box-shadow:
-    0 8px 32px rgba(0, 0, 0, 0.06),
-    inset 0 1px 0 rgba(255, 255, 255, 0.9);
   position: relative;
   overflow: hidden;
 }
 
 .qr-image {
-  width: 240px;
-  height: 240px;
   border-radius: 8px;
   transition:
     opacity 0.3s ease,
-    transform 0.3s ease;
+    transform 0.3s ease,
+    width 0.3s ease,
+    height 0.3s ease;
   opacity: 0;
   transform: scale(0.9);
 }
@@ -494,27 +507,12 @@ watch(
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(248, 250, 252, 0.9);
+  background: rgba(48, 72, 97, 0.9);
   border-radius: 8px;
 }
 
-.qr-brand-label {
-  position: absolute;
-  bottom: -8px;
-  right: -8px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 0.25rem 0.75rem;
-  border-radius: 12px;
-  font-size: 0.7rem;
-  font-weight: 700;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-}
-
-/* Scanning Animation */
 .scan-line {
   position: absolute;
-  top: 2rem;
   left: 2rem;
   right: 2rem;
   height: 2px;
@@ -536,7 +534,6 @@ watch(
   }
 }
 
-/* QR Instructions */
 .qr-instructions {
   margin-top: 1rem;
   display: flex;
@@ -545,12 +542,11 @@ watch(
 
 .instruction-text {
   color: #666;
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   font-weight: 500;
   margin: 0;
 }
 
-/* Payment Details Card */
 .payment-details-card {
   background: rgba(255, 255, 255, 0.95);
   border-radius: 20px;
@@ -600,6 +596,32 @@ watch(
   transform: translateY(-1px);
 }
 
+.detail-row-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 12px;
+  background: rgba(248, 250, 252, 0.6);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  transition: all 0.3s ease;
+}
+
+.detail-row-split:hover {
+  background: rgba(248, 250, 252, 0.9);
+  transform: translateY(-1px);
+}
+
+.detail-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 0.5rem;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
 .highlight-row {
   background: rgba(46, 204, 113, 0.08) !important;
   border: 1px solid rgba(46, 204, 113, 0.2) !important;
@@ -622,7 +644,7 @@ watch(
 .detail-value {
   color: #1a1a1a;
   font-weight: 700;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
   margin-left: 1.5rem;
 }
 
@@ -631,6 +653,10 @@ watch(
   font-size: 1.2rem;
 }
 
+.details-icon {
+  size: 18;
+}
+
 .detail-value.amount {
   color: #27ae60;
   font-size: 1.4rem;
@@ -642,7 +668,6 @@ watch(
   font-size: 1rem;
 }
 
-/* Payment Status */
 .payment-status {
   padding: 1rem;
   background: rgba(255, 193, 7, 0.08);
@@ -662,14 +687,6 @@ watch(
   gap: 0.5rem;
 }
 
-/* Status Indicator */
-.status-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
 .status-dot {
   width: 8px;
   height: 8px;
@@ -699,11 +716,11 @@ watch(
   font-weight: 500;
 }
 
-/* Action Buttons */
 .action-buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
+  transition: flex-direction 0.3s ease;
 }
 
 .action-btn {
@@ -720,123 +737,205 @@ watch(
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
 }
 
-.simulate-btn {
-  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
-  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3) !important;
-}
-
-.simulate-btn:hover {
+.action-btn:not(.back-btn):hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.4) !important;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
 }
 
-/* Help Text */
-.help-text {
-  color: #888;
-  font-size: 0.8rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-}
-
-/* Responsive Design */
-@media (max-width: 900px) {
-  .content-grid {
-    grid-template-columns: 1fr;
-    gap: 2rem;
-  }
-
-  .qr-container {
-    max-width: 320px;
-  }
-
-  .payment-details-card {
-    width: 100%;
-  }
-}
-
-@media (max-width: 480px) {
-  .qr-container {
-    padding: 1.5rem;
-    max-width: 280px;
-  }
-
-  .qr-image {
-    width: 200px;
-    height: 200px;
-  }
-
-  .action-buttons {
-    flex-direction: column;
-  }
-
-  .action-btn {
-    min-width: 100%;
-  }
-
+/* PORTRAIT MODE */
+@media (orientation: portrait) {
   .payment-title {
-    font-size: 1.3rem;
-  }
-
-  .payment-details-card {
-    padding: 1.5rem;
-  }
-}
-
-/* Tablet Landscape Optimization */
-@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
-  .header-section {
-    padding-top: 0.5rem;
-    margin-bottom: 2rem;
-  }
-
-  .payment-title {
-    font-size: 1.3rem;
-    margin-bottom: 0.25rem;
+    font-size: 2.5rem;
+    margin-top: 8px;
+    margin-bottom: 0;
   }
 
   .payment-subtitle {
-    font-size: 0.8rem;
+    color: #666;
+    font-size: 1.5rem;
+    margin-bottom: 0;
   }
 
-  .qr-container {
-    padding: 1.5rem;
+  .content-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    align-items: center;
+    max-width: 800px;
+    margin: 0 auto;
   }
 
-  .qr-image {
-    width: 200px;
-    height: 200px;
-  }
-
-  .payment-details-card {
-    padding: 1.5rem;
-    min-height: 300px;
-  }
-
-  .content-grid {
-    gap: 2rem;
-  }
-}
-
-/* Large Tablet Landscape */
-@media (orientation: landscape) and (min-width: 1024px) {
-  .content-grid {
-    max-width: 1200px;
-    gap: 4rem;
-  }
-
-  .qr-container {
-    max-width: 400px;
-  }
-
-  .qr-image {
-    width: 280px;
-    height: 280px;
-  }
-
-  .payment-details-card {
+  .qr-section {
     width: 100%;
   }
+
+  .details-section {
+    width: 100%;
+  }
+
+  .qr-container {
+    max-width: fit-content;
+    padding: 2rem;
+  }
+
+  .qr-code-bg {
+    padding: 0.5rem;
+  }
+
+  .qr-image {
+    width: 500px;
+    height: 500px;
+  }
+
+  .RSSA-logo {
+    margin-right: -40px !important;
+  }
+
+  .qris-logo {
+    margin-right: 20px;
+  }
+
+  .scan-line {
+    top: 2.5rem;
+  }
+
+  .qr-instructions {
+    align-items: center;
+    gap: 12px;
+  }
+  .qr-instructions .v-icon {
+    font-size: 40px !important;
+    width: 25px !important;
+    height: 25px !important;
+  }
+  .instruction-text {
+    color: #666;
+    font-size: 1.5rem;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  .details-title {
+    font-size: 2rem;
+  }
+  .details-icon {
+    size: 20 !important;
+  }
+
+  .detail-label {
+    font-size: 1.3em;
+  }
+  .detail-label .v-icon {
+    font-size: 25px !important;
+    width: 25px !important;
+    height: 25px !important;
+  }
+
+  .detail-value {
+    font-size: 1.8rem;
+    margin-left: 1.25rem;
+  }
+
+  .detail-value.patient-name {
+    font-size: 1.8rem;
+  }
+
+  .detail-value.amount {
+    font-size: 1.8rem;
+  }
+
+  .detail-value.expired {
+    font-size: 1.8rem;
+  }
+
+  .status-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #f39c12;
+  }
+
+  .status-text {
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+
+  .action-buttons {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .action-btn {
+    width: 100%;
+    padding: 0 1.5rem !important;
+    border-radius: 12px !important;
+  }
 }
+
+/* LANDSCAPE MODE */
+@media (orientation: landscape) {
+  .content-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+    align-items: start;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  .qr-container {
+    max-width: 350px;
+  }
+
+  .qr-image {
+    width: 240px;
+    height: 240px;
+  }
+
+  .scan-line {
+    top: 2rem;
+  }
+
+  .action-buttons {
+    flex-direction: row;
+  }
+}
+
+/* Small portrait */
+/* @media (max-width: 480px) and (orientation: portrait) {
+  .qr-container {
+    padding: 1rem;
+    max-width: 320px;
+  }
+
+  .qr-image {
+    width: 240px;
+    height: 240px;
+  }
+
+  .qr-code-bg {
+    padding: 1rem;
+  }
+
+  .payment-title {
+    font-size: 1.3rem;
+  }
+
+  .payment-details-card {
+    padding: 1.25rem;
+  }
+
+  .details-title {
+    font-size: rem;
+  }
+
+  .detail-value {
+    font-size: 0.95rem;
+  }
+
+  .detail-value.amount {
+    font-size: 1.2rem;
+  }
+} */
 </style>
diff --git a/composables/useFileSync.ts b/composables/useFileSync.ts
new file mode 100644
index 0000000..33c06f7
--- /dev/null
+++ b/composables/useFileSync.ts
@@ -0,0 +1,174 @@
+import localforage from "localforage"
+import type { FileInfo } from '~/types/serverFiles'
+
+export function useFileSync() {
+    const fileServer = ref<FileInfo[]>([])
+    const fileLocal = ref<{ name: string; blob: Blob; type: string; url: string }[]>([])
+    const errorMsg = ref<string | null>(null)
+    const isSyncing = ref(false)
+
+    // buat instance localforage langsung di sini
+    const localStore = localforage.createInstance({
+        name: 'nuxt-offline',
+        storeName: 'file-store',
+    })
+
+
+    // cek file server
+    const fetchServerFiles = async () => {
+        try {
+            const { data, error } = await useFetch<FileInfo[]>('/api/serverFile/files')
+            if (error.value) throw error.value
+            const sortedFiles = data.value?.sort((a, b) => a.name.localeCompare(b.name)) || []
+            fileServer.value = sortedFiles
+
+            return fileServer.value
+        } catch (err: any) {
+            errorMsg.value = err.message || 'Gagal mengambil data file'
+            return []
+        }
+    }
+
+    //cek indexedDB
+    const getLocalMeta = async (name: string) => {
+        return await localStore.getItem<{ modified: string, size: number }>(`${name}-meta`)
+    }
+
+
+    //Simpan  ke IndexedDB
+
+    const saveToIndexedDB = async (file: FileInfo, blob: Blob) => {
+        console.log('Downloaded file to save:', blob);
+
+        await localStore.setItem(file.name, blob)
+        await localStore.setItem(`${file.name}-meta`, {
+            modified: file.modified,
+            size: file.size,
+            typeFile: file.ext
+        })
+    }
+    const downloadFile = async (file: FileInfo) => {
+        const response = await fetch(`/api/serverFile/${file.name}`)
+        if (!response.ok) throw new Error(`Gagal download ${file.name}`)
+        const blob = await response.blob()
+
+        // console.log('blob server', blob ,file.name,file.ext)
+        await saveToIndexedDB(file, blob)
+    }
+    const removeFiles = async (prefix: string) => {
+
+        const IndexedDBKeys: string[] = []
+
+        // Ambil semua key dulu
+        await localStore.iterate((_value, key) => {
+            IndexedDBKeys.push(key)
+        })
+
+        // console.log('Removing files with prefix:', IndexedDBKeys)
+        for (const key of IndexedDBKeys) {
+            const baseName = key.split('-')[0].split('.')[0]
+            // console.log('Checking key:', key, 'Base name:', baseName)
+
+            if (baseName.startsWith(prefix)) {
+                await localStore.removeItem(key)
+                console.log('Removed:', key)
+            }
+        }
+    }
+
+    // Helper MIME
+    const mimeFromExt = (ext: string) => {
+        const e = ext.replace(/^\./, '').toLowerCase()
+        switch (e) {
+            case 'png': return 'image/png'
+            case 'jpg':
+            case 'jpeg': return 'image/jpeg'
+            case 'gif': return 'image/gif'
+            case 'svg': return 'image/svg+xml'
+            case 'mp4': return 'video/mp4'
+            case 'mkv': return 'video/x-matroska'
+            default: return 'application/octet-stream'
+        }
+    }
+
+    const syncFiles = async () => {
+        isSyncing.value = true
+        try {
+            const serverFiles = await fetchServerFiles()
+            // console.log('file server :', serverFiles)
+
+            for (const dataFileServer of serverFiles) {
+                const localMeta = await getLocalMeta(dataFileServer.name)
+                // console.log('fileServer', dataFileServer.name ,'local', localMeta)
+                // console.log('localMeta', localMeta)
+                const mime = mimeFromExt(dataFileServer.ext)
+                // Jika ekstensi tidak dalam mimeFromExt
+                if (mime !== 'application/octet-stream') {
+                    const firstNamePart = dataFileServer.name.split('.')[0]
+                    const isNew = !localMeta
+                    const isUpdated = localMeta && new Date(dataFileServer.modified) > new Date(localMeta.modified)
+                    //jika data baru atau di update
+                    if (isNew || isUpdated) {
+                        //  console.log('Download file: ', firstNamePart)
+                        await removeFiles(firstNamePart)
+                        await downloadFile(dataFileServer)
+
+                    }
+                }
+
+            }
+
+        } catch (err: any) {
+            errorMsg.value = err.message || 'Gagal sinkronisasi file'
+        }
+
+    }
+
+    const tampilFileBrowser = async () => {
+
+        await syncFiles();
+        if (isSyncing.value) {
+            try {
+                const localStoreKeys = await localStore.keys()
+                // console.log('localStore Keys:', localStoreKeys)
+                const files: { name: string; blob: Blob; type: string; url: string }[] = []
+
+                for (const key of localStoreKeys) {
+                    if (!key.endsWith('-meta')) {
+                        const fileBlob = await localStore.getItem<Blob>(key)
+
+                        if (fileBlob instanceof Blob) {
+                            const url = URL.createObjectURL(fileBlob)
+                            files.push({ name: key, blob: fileBlob, type: fileBlob.type, url: url })
+
+                        }
+                    }
+                }
+                // console.log('Files in IndexedDB:',fileLocal.value)
+                return fileLocal.value = files
+
+            } catch (err) {
+                console.error('Gagal memuat file dari IndexedDB:', err)
+            } finally {
+                isSyncing.value = false
+            }
+
+
+        }
+    }
+
+    // Bersihkan object URL biar gak bocor memori
+    onBeforeUnmount(() => {
+        fileLocal.value.forEach(f => URL.revokeObjectURL(f.url))
+    })
+
+
+
+    return {
+        fileServer,
+        errorMsg,
+        tampilFileBrowser,
+        fileLocal,
+
+    }
+}
diff --git a/composables/useWebSocket.js b/composables/useWebSocket.js
index 386f103..14b2cbc 100644
--- a/composables/useWebSocket.js
+++ b/composables/useWebSocket.js
@@ -1,9 +1,6 @@
 import { ref, onUnmounted } from 'vue';
 
-/**
- * Komposable untuk mengelola koneksi WebSocket.
- * @param {string} url - URL WebSocket lengkap.
- */
+
 export function useWebSocket(url) {
   const ws = ref(null);
   const data = ref(null);
@@ -29,7 +26,6 @@ export function useWebSocket(url) {
     };
 
     ws.value.onmessage = (event) => {
-      // LOGIC PENTING: Menerima data dan memicu watcher di index.vue
       console.log('🔔 [WS] Message received. Parsing data...'); 
       try {
         const parsedData = JSON.parse(event.data);
diff --git a/package-lock.json b/package-lock.json
index eeb953a..1776eff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@pinia/nuxt": "^0.11.2",
         "@unhead/vue": "^2.0.14",
         "eslint": "^9.34.0",
+        "localforage": "^1.10.0",
         "nuxt": "^3.19.0",
         "pinia": "^3.0.3",
         "qrcode": "^1.5.4",
@@ -10160,6 +10161,12 @@
       "integrity": "sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==",
       "license": "MIT"
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
@@ -10960,6 +10967,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
@@ -11283,6 +11299,15 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
     "node_modules/locate-path": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
diff --git a/package.json b/package.json
index e39216a..39061e7 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@pinia/nuxt": "^0.11.2",
     "@unhead/vue": "^2.0.14",
     "eslint": "^9.34.0",
+    "localforage": "^1.10.0",
     "nuxt": "^3.19.0",
     "pinia": "^3.0.3",
     "qrcode": "^1.5.4",
diff --git a/pages/index landsc.txt b/pages/index landsc.txt
new file mode 100644
index 0000000..e2348ff
--- /dev/null
+++ b/pages/index landsc.txt	
@@ -0,0 +1,247 @@
+<template>
+  <div class="medical-payment-app">
+    <v-container fluid class="pa-0 full-height">
+      <v-row justify="center" no-gutters class="full-height">
+        <v-col cols="12" class="full-height">
+          <v-card
+            class="payment-card mx-auto"
+            elevation="0"
+            :class="{
+              'contact-fullscreen': paymentStore.currentStep === 1,
+              'payment-centered': paymentStore.currentStep === 2,
+              'status-centered':
+                paymentStore.currentStep === 3 ||
+                paymentStore.currentStep === 4,
+            }"
+          >
+            <component :is="activeComponent" v-if="hasIpAddress" />
+            <div v-else class="text-center pa-10">
+              <v-progress-circular
+                indeterminate
+                color="primary"
+              ></v-progress-circular>
+              <p class="mt-4">Memeriksa konfigurasi dan koneksi data...</p>
+              <p v-if="hasIpAddress && wsIsConnected" class="mt-2 text-success">
+                Koneksi WS: **Terhubung** (Siap menerima data 30s)
+              </p>
+              <p v-else-if="hasIpAddress" class="mt-2 text-warning">
+                Koneksi WS: Menunggu/Terputus...
+              </p>
+            </div>
+          </v-card>
+        </v-col>
+      </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/PembayaranSukses.vue";
+import Gagal from "~/components/PembayaranGagal.vue";
+import { onMounted, onUnmounted, ref, computed, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useWebSocket } from "~/composables/useWebSocket";
+
+const paymentStore = usePaymentStore();
+const router = useRouter();
+const localIpAddress = ref(null);
+
+// **WEB SOCKET CONFIGURATION**
+const WS_URL_BASE = "ws://10.10.150.45:8084/api/v1/ws";
+const WS_QUERY = "user_id=QRIS&room=BANKJATIM";
+const fullWsUrl = `${WS_URL_BASE}?${WS_QUERY}`;
+
+const {
+  wsData,
+  isConnected: wsIsConnected,
+  connect: wsConnect,
+  disconnect: wsDisconnect,
+} = useWebSocket(fullWsUrl);
+
+const hasIpAddress = computed(() => !!localIpAddress.value);
+
+const paymentSteps = {
+  1: Home,
+  2: QRISPayment,
+  3: Success,
+  4: Gagal,
+};
+
+const activeComponent = computed(() => {
+  return paymentSteps[paymentStore.currentStep] || Home;
+});
+
+watch(
+  () => paymentStore.currentStep,
+  (newStep, oldStep) => {
+    console.log(`Step berubah dari ${oldStep} ke ${newStep}`);
+  },
+  { immediate: true }
+);
+
+watch(
+  wsData,
+  (newStatus) => {
+    const payloadData = newStatus?.data?.data; // Ambil array data transaksi
+
+    if (!newStatus || !payloadData || payloadData.length === 0) {
+      console.log(
+        "📭 WS: No valid payload data (newStatus.data.data) in message. Skipping state change."
+      );
+      return;
+    }
+
+    console.log(
+      `[WS] Menerima update data di Step ${paymentStore.currentStep}. Total records: ${payloadData.length}`
+    );
+    const allRecords = payloadData;
+
+    if (paymentStore.currentStep === 1) {
+      console.log("🔍 Step 1 (WS): Looking for IP:", localIpAddress.value);
+
+      const relevantData = allRecords.find(
+        (item) => item.ip === localIpAddress.value && item.status === "1"
+      );
+
+      if (relevantData) {
+        console.log(
+          "✅ WS Data found for IP (New Transaction). Moving to Step 2."
+        );
+        paymentStore.updatePayment({ data: [relevantData] });
+        paymentStore.setStep(2);
+      } else {
+        console.log(
+          `⏳ No relevant data found for IP ${localIpAddress.value} in this broadcast.`
+        );
+      }
+    } else if (paymentStore.currentStep === 2) {
+      const relevantData = allRecords.find(
+        (item) =>
+          item.ip === localIpAddress.value &&
+          item.display_nobill === paymentStore.qrData.display_nobill
+      );
+
+      if (relevantData) {
+        console.log(
+          "🔄 WS Update received for current patient in Step 2. Updating store..."
+        );
+        paymentStore.updatePayment({ data: [relevantData] });
+      }
+    }
+  },
+  { deep: true }
+);
+
+const checkAndRedirect = () => {
+  const savedIp = localStorage.getItem("loketIp");
+  if (!savedIp) {
+    router.push("/setupip");
+  } else {
+    localIpAddress.value = savedIp;
+    wsConnect();
+  }
+};
+
+onMounted(() => {
+  checkAndRedirect();
+});
+
+onUnmounted(() => {
+  wsDisconnect();
+});
+</script>
+>
+
+<style scoped>
+.medical-payment-app {
+  background: #ff9248;
+  min-height: 100vh;
+  height: fit-content;
+}
+
+.full-height {
+  min-height: 100vh;
+  height: auto;
+}
+
+.contact-fullscreen {
+  max-width: none !important;
+  border-radius: 0 !important;
+  height: auto !important;
+  min-height: 100vh;
+}
+
+.payment-centered {
+  background: #ff9248 !important;
+  max-width: 1200px !important;
+  width: fit-content !important;
+  margin: 1rem auto !important;
+  border-radius: 16px !important;
+  height: fit-content !important;
+  min-height: calc(100vh - 2rem);
+}
+
+.payment-card {
+  background: #ff9248;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  height: fit-content !important;
+  min-height: inherit;
+}
+
+.status-centered {
+  max-width: 1200px !important;
+  width: 100% !important;
+  margin: 1rem auto !important;
+  border-radius: 16px !important;
+  height: fit-content !important;
+  min-height: calc(100vh - 2rem);
+}
+
+.status-card {
+  background: #ff9248;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  height: fit-content !important;
+  min-height: inherit;
+}
+
+/* Responsive adjustments */
+@media (max-width: 900px) {
+  .payment-centered {
+    max-width: 500px !important;
+    margin: 1rem !important;
+  }
+
+  .status-centered {
+    max-width: 800px !important;
+    margin: 1rem !important;
+  }
+}
+
+@media (orientation: landscape) and (min-width: 768px) {
+  .payment-centered {
+    max-width: 1400px !important;
+    margin: 0.5rem auto !important;
+    min-height: calc(100vh - 1rem);
+  }
+
+  .status-centered {
+    max-width: 700px !important;
+    margin: 0.5rem auto !important;
+    min-height: calc(100vh - 1rem);
+  }
+}
+
+@media (orientation: landscape) and (max-height: 600px) {
+  .medical-payment-app {
+    min-height: 600px;
+  }
+
+  .contact-fullscreen,
+  .payment-centered,
+  .status-centered {
+    min-height: 600px;
+  }
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index e2348ff..bc1bdd8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -48,8 +48,7 @@ const paymentStore = usePaymentStore();
 const router = useRouter();
 const localIpAddress = ref(null);
 
-// **WEB SOCKET CONFIGURATION**
-const WS_URL_BASE = "ws://10.10.150.45:8084/api/v1/ws";
+const WS_URL_BASE = "ws://10.10.150.45:8080/api/v1/ws";
 const WS_QUERY = "user_id=QRIS&room=BANKJATIM";
 const fullWsUrl = `${WS_URL_BASE}?${WS_QUERY}`;
 
@@ -81,53 +80,58 @@ watch(
   { immediate: true }
 );
 
+// script page index:
 watch(
   wsData,
   (newStatus) => {
-    const payloadData = newStatus?.data?.data; // Ambil array data transaksi
+    const payloadData = newStatus?.data?.data;
+    const posDevices = newStatus?.data?.posdevice || [];
 
-    if (!newStatus || !payloadData || payloadData.length === 0) {
-      console.log(
-        "📭 WS: No valid payload data (newStatus.data.data) in message. Skipping state change."
-      );
+    if (!newStatus || !payloadData) {
+      console.log("📭 WS: No valid payload data in message. Skipping state change.");
       return;
     }
+    
+    // ... (console.log yang ada) ...
 
-    console.log(
-      `[WS] Menerima update data di Step ${paymentStore.currentStep}. Total records: ${payloadData.length}`
-    );
-    const allRecords = payloadData;
+    const isTargetDevice = payloadData.ip === localIpAddress.value;
+    const isPosDevice = posDevices.includes(localIpAddress.value);
+    const isRelevantDevice = isTargetDevice || isPosDevice; // Kita gunakan ini
 
-    if (paymentStore.currentStep === 1) {
+    // --- LOGIKA BARU DITAMBAHKAN DI SINI ---
+    // Jika kita di Step 3 (Sukses) atau 4 (Gagal) DAN ada transaksi BARU (status "1")
+    if (
+      (paymentStore.currentStep === 3 || paymentStore.currentStep === 4) &&
+      isRelevantDevice &&
+      payloadData.status === "1"
+    ) {
+      console.log("🔄 [WS] New transaction received on end screen. Resetting state...");
+      
+      // 1. Reset store secara paksa (ini akan membersihkan timer dan kembali ke step 1)
+      paymentStore.reset(); 
+      
+      // 2. Sekarang proses data baru seolah-olah kita berada di Step 1
+      paymentStore.updatePayment({ data: [payloadData] });
+      paymentStore.setStep(2);
+    }
+    // --- AKHIR LOGIKA BARU ---
+
+    // Logika Anda yang sudah ada
+    else if (paymentStore.currentStep === 1) {
       console.log("🔍 Step 1 (WS): Looking for IP:", localIpAddress.value);
 
-      const relevantData = allRecords.find(
-        (item) => item.ip === localIpAddress.value && item.status === "1"
-      );
-
-      if (relevantData) {
-        console.log(
-          "✅ WS Data found for IP (New Transaction). Moving to Step 2."
-        );
-        paymentStore.updatePayment({ data: [relevantData] });
+      if (isRelevantDevice && payloadData.status === "1") {
+        console.log("✅ WS Data found for IP (New Transaction). Moving to Step 2.");
+        paymentStore.updatePayment({ data: [payloadData] });
         paymentStore.setStep(2);
       } else {
-        console.log(
-          `⏳ No relevant data found for IP ${localIpAddress.value} in this broadcast.`
-        );
+        console.log(`⏳ No relevant data found for IP ${localIpAddress.value} in this broadcast.`);
       }
     } else if (paymentStore.currentStep === 2) {
-      const relevantData = allRecords.find(
-        (item) =>
-          item.ip === localIpAddress.value &&
-          item.display_nobill === paymentStore.qrData.display_nobill
-      );
-
-      if (relevantData) {
-        console.log(
-          "🔄 WS Update received for current patient in Step 2. Updating store..."
-        );
-        paymentStore.updatePayment({ data: [relevantData] });
+      if (isRelevantDevice && 
+          payloadData.display_nobill === paymentStore.qrData.display_nobill) {
+        console.log("🔄 WS Update received for current patient in Step 2. Updating store...");
+        paymentStore.updatePayment({ data: [payloadData] });
       }
     }
   },
@@ -152,7 +156,6 @@ onUnmounted(() => {
   wsDisconnect();
 });
 </script>
->
 
 <style scoped>
 .medical-payment-app {
@@ -173,30 +176,12 @@ onUnmounted(() => {
   min-height: 100vh;
 }
 
-.payment-centered {
-  background: #ff9248 !important;
-  max-width: 1200px !important;
-  width: fit-content !important;
-  margin: 1rem auto !important;
-  border-radius: 16px !important;
-  height: fit-content !important;
-  min-height: calc(100vh - 2rem);
-}
-
 .payment-card {
   background: #ff9248;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
   height: fit-content !important;
   min-height: inherit;
-}
-
-.status-centered {
-  max-width: 1200px !important;
-  width: 100% !important;
-  margin: 1rem auto !important;
-  border-radius: 16px !important;
-  height: fit-content !important;
-  min-height: calc(100vh - 2rem);
+  transition: all 0.3s ease;
 }
 
 .status-card {
@@ -206,8 +191,64 @@ onUnmounted(() => {
   min-height: inherit;
 }
 
-/* Responsive adjustments */
-@media (max-width: 900px) {
+/* PORTRAIT MODE*/
+@media (orientation: portrait) {
+  .payment-centered {
+    background: #ff9248 !important;
+    max-width: 600px !important;
+    width: 100% !important;
+    margin: 1rem auto !important;
+    border-radius: 16px !important;
+    height: fit-content !important;
+    min-height: calc(100vh - 2rem);
+  }
+
+  .status-centered {
+    max-width: 600px !important;
+    width: 100% !important;
+    margin: 1rem auto !important;
+    border-radius: 16px !important;
+    height: fit-content !important;
+    min-height: calc(100vh - 2rem);
+  }
+}
+
+/* LANDSCAPE MODE*/
+@media (orientation: landscape) {
+  .payment-centered {
+    background: #ff9248 !important;
+    max-width: 1200px !important;
+    width: fit-content !important;
+    margin: 1rem auto !important;
+    border-radius: 16px !important;
+    height: fit-content !important;
+    min-height: calc(100vh - 2rem);
+  }
+
+  .status-centered {
+    max-width: 1200px !important;
+    width: 100% !important;
+    margin: 1rem auto !important;
+    border-radius: 16px !important;
+    height: fit-content !important;
+    min-height: calc(100vh - 2rem);
+  }
+}
+
+
+/* Large tablet portrait */
+@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
+  .payment-centered {
+    max-width: 950px !important;
+  }
+
+  .status-centered {
+    max-width: 900px !important;
+  }
+}
+
+/* Landscape responsive */
+@media (max-width: 900px) and (orientation: landscape) {
   .payment-centered {
     max-width: 500px !important;
     margin: 1rem !important;
@@ -244,4 +285,4 @@ onUnmounted(() => {
     min-height: 600px;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/public/bankjatimlogo.png b/public/bankjatimlogo.png
new file mode 100644
index 0000000..2479996
Binary files /dev/null and b/public/bankjatimlogo.png differ
diff --git a/assets/qrislogo.png b/public/qrislogo.png
similarity index 100%
rename from assets/qrislogo.png
rename to public/qrislogo.png
diff --git a/assets/rssalogo.png b/public/rssalogo.png
similarity index 100%
rename from assets/rssalogo.png
rename to public/rssalogo.png
diff --git a/server/api/serverFile/[name].get.ts b/server/api/serverFile/[name].get.ts
new file mode 100644
index 0000000..8954bfe
--- /dev/null
+++ b/server/api/serverFile/[name].get.ts
@@ -0,0 +1,58 @@
+import fs from 'fs'
+import path from 'path'
+import { lookup } from 'mime-types'
+import { createError, setHeader, sendStream } from 'h3'
+
+const FOLDER_PATH = '\\\\10.10.150.129\\Shared'
+
+export default defineEventHandler(async (event) => {
+  const rawName = event.context.params?.name as string | undefined
+  if (!rawName) {
+    throw createError({ statusCode: 400, statusMessage: 'Nama file tidak diberikan' })
+  }
+
+  const name = decodeURIComponent(rawName)
+  const safeName = path.basename(name)
+  if (safeName !== name) {
+    throw createError({ statusCode: 400, statusMessage: 'Nama file tidak valid' })
+  }
+
+  const filePath = path.join(FOLDER_PATH, safeName)
+  if (!fs.existsSync(filePath)) {
+    throw createError({ statusCode: 404, statusMessage: 'File tidak ditemukan' })
+  }
+
+  // Ambil ekstensi file (lowercase)
+  const ext = path.extname(safeName).toLowerCase()
+  let mimeType = (lookup(safeName) as string) || 'application/octet-stream'
+
+  // Koreksi MIME type umum
+  switch (ext) {
+    case '.mp4':
+      mimeType = 'video/mp4'
+      break
+    case '.mkv':
+      mimeType = 'video/x-matroska'
+      break
+    case '.avi':
+      mimeType = 'video/x-msvideo'
+      break
+    case '.mov':
+      mimeType = 'video/quicktime'
+      break
+    case '.exe':
+    case '.msi':
+      mimeType = 'application/octet-stream'
+      break
+    case '.gif':
+      mimeType = 'image/gif'
+      break
+  }
+
+  setHeader(event, 'Content-Type', mimeType)
+  setHeader(event, 'Cache-Control', 'no-cache')
+  setHeader(event, 'Content-Disposition', `inline; filename="${safeName}"`)
+
+  const stream = fs.createReadStream(filePath)
+  return sendStream(event, stream)
+})
diff --git a/server/api/serverFile/files.get.ts b/server/api/serverFile/files.get.ts
new file mode 100644
index 0000000..7f41186
--- /dev/null
+++ b/server/api/serverFile/files.get.ts
@@ -0,0 +1,42 @@
+// server/api/serverFile/files.get.ts
+import fs from "fs"
+import path from "path"
+import { promisify } from "util"
+
+const readdir = promisify(fs.readdir)
+const stat = promisify(fs.stat)
+
+// Lokasi folder network share (pastikan sudah di-mount / accessible dari server)
+const FOLDER_PATH = "\\\\10.10.150.129\\Shared"
+
+export default defineEventHandler(async (event) => {
+  try {
+    
+    // Baca semua isi folder
+    const files = await readdir(FOLDER_PATH, { withFileTypes: true })
+
+    // Filter file saja dan ambil metadata
+    const list = await Promise.all(
+      files
+        .filter((f) => f.isFile())
+        .map(async (f) => {
+          const filePath = path.join(FOLDER_PATH, f.name)
+          const info = await stat(filePath)
+          return {
+            name: f.name,
+            size: info.size,
+            modified: info.ctime,
+            ext: path.extname(f.name),
+          }
+        })
+    )
+
+    return list.sort(
+      (a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime()
+    ) // urut terbaru
+  } catch (err: any) {
+    console.error("Gagal sinkronisasi file:", err.message)
+    return { error: err.message }
+  }
+})
+
diff --git a/stores/payment.ts b/stores/payment.ts
index 642b359..2b04453 100644
--- a/stores/payment.ts
+++ b/stores/payment.ts
@@ -1,39 +1,60 @@
-// src/stores/payment.js
+// src/stores/payment.ts
 import { defineStore } from 'pinia';
 
+// 1. Definisikan Tipe Data untuk qrData (penting untuk properti expired_at yang di-spread)
+interface QrData {
+    qrvalue: string | null;
+    display_nobill: string | null;
+    display_name: string | null;
+    display_amount: string | null;
+    status: '1' | '2' | '0' | null; // "1": Pending, "2": Sukses, "0": Gagal/Expired
+    ip: string | null;
+    // Tambahkan properti yang di-spread dari API, termasuk expired_at
+    expired_at?: string; // Tambahkan expired_at sebagai properti opsional
+    [key: string]: any; // Indeks signature untuk properti dinamis (misal: transaction_id, reason)
+}
+
+// 2. Definisikan Tipe Data untuk State
+interface PaymentState {
+    currentStep: 1 | 2 | 3 | 4;
+    patientInfo: {
+        name: string;
+        amount: string;
+        expiry: string;
+    };
+    qrData: QrData;
+}
+
 // Variabel di luar store untuk menyimpan timer, agar persistensi di luar state Pinia
-let autoResetTimer = null; 
+let autoResetTimer: number | null = null; 
 
 export const usePaymentStore = defineStore('payment', {
-  state: () => ({
+  state: (): PaymentState => ({ // Gunakan tipedata PaymentState
     currentStep: 1, // 1: Menunggu Data, 2: Tampilkan QRIS, 3: Sukses, 4: Gagal
     patientInfo: {
       name: '',
       amount: '',
-      expiry: '', // Dibiarkan kosong, waktu kedaluwarsa dihitung dari qrData.created_at
+      expiry: '', // Waktu kedaluwarsa diambil dari qrData (via spread)
     },
     qrData: {
       qrvalue: null,
       display_nobill: null,
       display_name: null,
       display_amount: null,
-      status: null, // Status pembayaran: "1" (Pending), "2" (Sukses), "0" (Gagal/Expired)
+      status: null, 
       ip: null,
-      created_at: null, // Tambahkan ini agar properti ada secara eksplisit
-      // ... properti lain dari API akan ditambahkan melalui spread operator
-    },
+      // created_at DIHAPUS
+    } as QrData, // Type casting untuk QrData
   }),
   
   getters: {
-    hasQrData: (state) => state.qrData && state.qrData.qrvalue,
-    safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com',
+    hasQrData: (state): boolean => !!state.qrData.qrvalue,
+    safeQrValue: (state): string => state.qrData.qrvalue || 'https://www.google.com',
     
-    // Getter untuk cek apakah data siap
-    isReadyForStatusCheck: (state) => {
-      return state.qrData.display_nobill && state.qrData.display_name;
+    isReadyForStatusCheck: (state): boolean => {
+      return !!(state.qrData.display_nobill && state.qrData.display_name);
     },
     
-    // Getter untuk debug
     debugInfo: (state) => ({
       step: state.currentStep,
       hasIdentifiers: !!(state.qrData.display_nobill && state.qrData.display_name),
@@ -50,26 +71,22 @@ export const usePaymentStore = defineStore('payment', {
       this.currentStep--;
     },
     
-    setStep(step) {
+    setStep(step: 1 | 2 | 3 | 4) {
       console.log(`[STORE] Setting step from ${this.currentStep} to ${step}`);
       this.currentStep = step;
     },
 
-    /**
-     * @description Memulai timer untuk reset state kembali ke Step 1 (Home) setelah 20 detik
-     */
     startAutoReset() {
-       
         if (autoResetTimer) {
             clearTimeout(autoResetTimer);
         }
-        console.log('🏠 [STORE] Starting auto return timer (20s) for reset.');
-        
+        console.log('🏠 [STORE] Starting auto return timer (50s) for reset.');
         
+        // Di TypeScript, setTimeout mengembalikan number
         autoResetTimer = setTimeout(() => {
             console.log('🏠 [STORE] Auto return to home triggered');
             this.reset();
-        }, 20000); 
+        }, 10000);  
     },
     
     reset() {
@@ -87,25 +104,24 @@ export const usePaymentStore = defineStore('payment', {
         display_amount: null,
         status: null,
         ip: null,
-        created_at: null,
-      };
+      } as QrData; // Pastikan tipe kembali ke QrData
         if (autoResetTimer) {
             clearTimeout(autoResetTimer);
             autoResetTimer = null;
         }
     },
     
-    updatePayment(apiResponse) {
+    // Definisikan tipe untuk apiResponse
+    updatePayment(apiResponse: { data: QrData[] }) {
       console.log("=== [STORE] UPDATE PAYMENT ===");
       
-      // Validasi response
-      if (!apiResponse?.data || !Array.isArray(apiResponse.data) || apiResponse.data.length === 0) {
+      if (!apiResponse?.data || apiResponse.data.length === 0) {
         console.error("Invalid API response structure or empty data array");
         return;
       }
       
       const apiData = apiResponse.data[0];
-      const oldStatus = this.qrData.status; // Simpan status lama
+      const oldStatus = this.qrData.status;
       
       // Update qrData dengan semua properti dari API
       this.qrData = {
@@ -113,11 +129,10 @@ export const usePaymentStore = defineStore('payment', {
         display_nobill: apiData.display_nobill || this.qrData.display_nobill,
         display_name: apiData.display_name || this.qrData.display_name,
         display_amount: apiData.display_amount || apiData.nominal || this.qrData.display_amount,
-        status: apiData.status || this.qrData.status,
+        status: apiData.status as QrData['status'] || this.qrData.status, // Type casting untuk status
         ip: apiData.ip || this.qrData.ip,
-        created_at: apiData.created_at || this.qrData.created_at, // Ambil 'created_at'
-        // Spread untuk properti lain yang mungkin ada (misal: transaction_id, reason)
-        ...apiData
+        // created_at DIHAPUS
+        ...apiData // expired_at akan masuk di sini
       };
       
       // Update patientInfo
@@ -130,28 +145,22 @@ export const usePaymentStore = defineStore('payment', {
       // --- LOGIKA TRANSISI STATUS OTOMATIS (SUCCESS/FAIL) ---
       const newStatus = this.qrData.status;
 
-      // Log perubahan status (jika ada)
       if (oldStatus !== newStatus) {
         console.log(`[STORE] Status changed: ${oldStatus} -> ${newStatus}`);
       }
 
-      // Proses transisi hanya jika kita berada di Step 2 (Menunggu Pembayaran)
-      // DAN status yang diterima berbeda dari status sebelumnya
       if (this.currentStep === 2 && oldStatus !== newStatus) {
           if (newStatus === "2") {
-              // Status Sukses
               console.log('🎉 [STORE] Status 2 (SUKSES) diterima. Pindah ke Step 3.');
               this.currentStep = 3;
               this.startAutoReset(); 
           } else if (newStatus === "0") {
-              // Status Gagal
               console.log('❌ [STORE] Status 0 (GAGAL) diterima. Pindah ke Step 4.');
               this.currentStep = 4;
               this.startAutoReset(); 
           }
       }
-      // ------------------------------------------------------
-
+      
       console.log("Updated qrData:", this.qrData);
       console.log("Updated patientInfo:", this.patientInfo);
       console.log("===================");
@@ -170,8 +179,8 @@ export const usePaymentStore = defineStore('payment', {
     },
     
     // Method untuk validasi data
-    validateData() {
-      const issues = [];
+    validateData(): boolean {
+      const issues: string[] = [];
       
       if (!this.qrData.display_nobill) {
         issues.push('display_nobill missing');
@@ -181,7 +190,8 @@ export const usePaymentStore = defineStore('payment', {
         issues.push('display_name missing');
       }
       
-      if (!this.qrData.qrvalue && !this.qrData.qr_code) {
+      // Perlu pengecekan properti qr_code pada apiData, bukan state
+      if (!this.qrData.qrvalue) { 
         issues.push('QR code missing');
       }
       
diff --git a/types/serverFiles.ts b/types/serverFiles.ts
new file mode 100644
index 0000000..5e5e570
--- /dev/null
+++ b/types/serverFiles.ts
@@ -0,0 +1,9 @@
+// types/serverFiles.ts
+
+export interface FileInfo {
+  name: string
+  size: number
+  modified: string | Date
+  ext: string
+}
+