update async dan interface

2025-09-12 09:54:00 +07:00
parent 831cb0a4ea
commit edec5bb339
12 changed files with 1086 additions and 1354 deletions
@@ -0,0 +1,555 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="contact-page-container">
+    <div class="logo-section-contact">
+      <div class="logo-group-contact">
+        <v-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of_arms_of_East_Java.svg.png" width="60" height="60" class="logo-img-contact" contain />
+        <v-img src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png" width="60" height="60" class="logo-img-contact" contain />
+        <v-img src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png" width="60" height="60" class="logo-img-contact" contain />
+        <v-img src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png" width="60" height="60" class="logo-img-contact" contain />
+      </div>
+    </div>
+
+    <div class="content-section-contact">
+      <div class="title-section-contact">
+        <h1 class="main-title-contact">With Love We Serve</h1>
+        <p class="subtitle-contact">Kami Menyediakan Layanan Medis yang Dapat Anda Percayai</p>
+      </div>
+      
+      <!-- Enhanced Banner Carousel -->
+      <div class="banner-carousel-container">
+        <v-carousel
+          v-model="currentSlide"
+          :show-arrows="true"
+          :hide-delimiters="false"
+          height="500"
+          cycle
+          interval="5000"
+          class="banner-carousel"
+        >
+          <v-carousel-item
+            v-for="(item, index) in carouselItems"
+            :key="index"
+            :src="item.src"
+            :alt="item.alt"
+            cover
+            class="carousel-item"
+          >
+            <div class="carousel-overlay">
+              <div class="overlay-content">
+                <h3 class="overlay-title">{{ item.title }}</h3>
+                <p class="overlay-description">{{ item.description }}</p>
+              </div>
+            </div>
+          </v-carousel-item>
+        </v-carousel>
+        
+        <!-- Custom Navigation Dots -->
+        <div class="custom-indicators">
+          <span
+            v-for="(item, index) in carouselItems"
+            :key="index"
+            :class="['indicator-dot', { active: currentSlide === index }]"
+            @click="currentSlide = index"
+          />
+        </div>
+      </div>
+
+      <div class="cta-section-contact">
+        <!-- <v-btn
+          color="primary"
+          size="large"
+          variant="flat"
+          rounded="xl"
+            class="cta-button-contact"
+            @click="paymentStore.nextStep"
+        >
+          Lanjut ke Pembayaran
+        </v-btn> -->
+        
+        <!-- <v-btn
+          color="secondary"
+          size="large"
+          variant="outlined"
+          rounded="xl"
+          class="cta-button-contact mt-4"
+          @click="triggerDummyData"
+        >
+          Debug ke Step 2
+        </v-btn> -->
+      </div>
+    </div>
+    
+    <div class="orange-background-contact">
+      <div class="contact-info-section-contact">
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact whatsapp-icon">
+            <v-icon color="#25D366" size="28">mdi-whatsapp</v-icon>
+          </div>
+          <div class="contact-text-contact">+62 815-5560-6668</div>
+        </div>
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact instagram-icon">
+            <v-icon color="#E1306C" size="28">mdi-instagram</v-icon>
+          </div>
+          <div class="contact-text-contact">rssasaifulanwar</div>
+        </div>
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact phone-icon">
+            <v-icon color="#FF9248" size="28">mdi-phone</v-icon>
+          </div>
+          <div class="contact-text-contact">0341-362101</div>
+        </div>
+        <div class="contact-item-contact">
+          <div class="contact-icon-contact web-icon">
+            <v-icon color="#2196F3" size="28">mdi-web</v-icon>
+          </div>
+          <div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { usePaymentStore } from '~/stores/payment';
+
+const paymentStore = usePaymentStore();
+const currentSlide = ref(0);
+
+// Carousel items - you can add more images/videos here
+const carouselItems = ref([
+  {
+    src: "https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg",
+    alt: "RSUD Dr. Saiful Anwar Main Building",
+    title: "Fasilitas Modern",
+    description: "Rumah sakit dengan teknologi medis terdepan"
+  },
+  {
+    src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide1.jpg",
+    alt: "Medical Services",
+    title: "Pelayanan Terbaik",
+    description: "Tim medis profesional siap melayani 24 jam"
+  },
+  {
+    src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide2.jpg",
+    alt: "Emergency Services",
+    title: "Unit Gawat Darurat",
+    description: "Layanan emergency yang cepat dan tepat"
+  },
+  {
+    src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide3.jpg",
+    alt: "Medical Equipment",
+    title: "Peralatan Canggih",
+    description: "Teknologi medis terkini untuk diagnosis akurat"
+  }
+]);
+
+</script>
+
+<style scoped>
+.contact-page-container {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  background: white;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.orange-background-contact {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 15%;
+  min-height: 120px;
+  background: #ff9248;
+  border-top-left-radius: 60px;
+  border-top-right-radius: 60px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 20px;
+}
+
+.logo-section-contact {
+  position: relative;
+  z-index: 2;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.logo-group-contact {
+  display: flex;
+  gap: 40px;
+  align-items: center;
+}
+
+.logo-img-contact {
+  transition: transform 0.3s ease;
+}
+
+.logo-img-contact:hover {
+  transform: scale(1.1);
+}
+
+.content-section-contact {
+  position: relative;
+  z-index: 2;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px 20px;
+  padding-bottom: 140px;
+}
+
+.title-section-contact {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.main-title-contact {
+  color: #ff9248;
+  font-size: clamp(2.2rem, 5vw, 3.5rem);
+  font-family: 'Roboto', sans-serif;
+  font-weight: 800;
+  margin-bottom: 12px;
+  line-height: 1.2;
+}
+
+.subtitle-contact {
+  color: black;
+  font-size: clamp(0.9rem, 2vw, 1.1rem);
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  margin: 0;
+  max-width: 600px;
+}
+
+/* Enhanced Banner Carousel Styles */
+.banner-carousel-container {
+  width: 100%;
+  max-width: 900px;
+  margin-bottom: 30px;
+  position: relative;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+}
+
+.banner-carousel {
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.carousel-item {
+  position: relative;
+  height: 500px !important;
+}
+
+.carousel-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  color: white;
+  padding: 40px 30px 30px;
+  z-index: 2;
+}
+
+.overlay-content {
+  max-width: 600px;
+}
+
+.overlay-title {
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.overlay-description {
+  font-size: 1.1rem;
+  font-weight: 400;
+  margin: 0;
+  opacity: 0.9;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+/* Custom Indicators */
+.custom-indicators {
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 12px;
+  z-index: 3;
+}
+
+.indicator-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.indicator-dot.active {
+  background: #ff9248;
+  transform: scale(1.2);
+}
+
+.indicator-dot:hover {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+/* Contact Info Styles */
+.contact-info-section-contact {
+  display: flex;
+  gap: 60px; 
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.contact-item-contact {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.contact-icon-contact {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.contact-icon-contact:hover {
+  transform: scale(1.1);
+}
+
+.contact-text-contact {
+  color: white;
+  font-size: 14px;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.cta-section-contact {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.cta-button-contact {
+  padding: 12px 40px !important;
+  font-size: 1.1rem !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%) !important;
+}
+
+.cta-button-contact:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 30px rgba(255, 152, 0, 0.4);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .banner-carousel-container {
+    max-width: 100%;
+    margin: 0 -20px 20px -20px;
+    border-radius: 0;
+  }
+  
+  .banner-carousel {
+    border-radius: 0;
+  }
+  
+  .carousel-item {
+    height: 300px !important;
+  }
+  
+  .overlay-title {
+    font-size: 1.4rem;
+  }
+  
+  .overlay-description {
+    font-size: 0.95rem;
+  }
+  
+  .carousel-overlay {
+    padding: 20px 20px 20px;
+  }
+  
+  .contact-info-section-contact {
+    gap: 30px;
+  }
+  
+  .logo-group-contact {
+    gap: 20px;
+  }
+  
+  .logo-img-contact {
+    width: 45px !important;
+    height: 45px !important;
+  }
+}
+
+/* Tablet Landscape Optimizations */
+@media (orientation: landscape) and (min-width: 768px) {
+  .carousel-item {
+    height: 400px !important;
+  }
+  
+  .main-title-contact { 
+    font-size: 2.8rem; 
+  }
+  
+  .subtitle-contact { 
+    font-size: 1.05rem; 
+  }
+  
+  .contact-info-section-contact { 
+    gap: 40px; 
+  }
+  
+  .logo-group-contact { 
+    gap: 30px; 
+  }
+  
+  .logo-img-contact {
+    width: 50px !important;
+    height: 50px !important;
+  }
+  
+  .contact-text-contact { 
+    font-size: 12px; 
+  }
+  
+  .contact-icon-contact { 
+    width: 40px; 
+    height: 40px; 
+  }
+  
+  @media (min-width: 900px) and (max-width: 1200px) {
+    .content-section-contact {
+      padding-bottom: 140px;
+    }
+    
+    .orange-background-contact {
+      height: 150px;
+      padding-bottom: 10px;
+    }
+    
+    .carousel-item {
+      height: 450px !important;
+    }
+  }
+}
+
+/* Small tablet adjustments */
+@media (max-width: 900px) and (orientation: landscape) {
+  .main-title-contact { 
+    font-size: 2.2rem; 
+  }
+  
+  .contact-info-section-contact { 
+    gap: 25px; 
+  }
+  
+  .logo-group-contact { 
+    gap: 20px; 
+  }
+  
+  .content-section-contact {
+    padding-bottom: 120px;
+  }
+  
+  .orange-background-contact {
+    height: 140px;
+  }
+  
+  .carousel-item {
+    height: 350px !important;
+  }
+}
+
+/* Very small tablet landscape */
+@media (max-width: 768px) and (orientation: landscape) {
+  .logo-group-contact { 
+    gap: 15px; 
+  }
+  
+  .logo-img-contact {
+    width: 35px !important;
+    height: 35px !important;
+  }
+  
+  .main-title-contact { 
+    font-size: 1.8rem; 
+  }
+  
+  .contact-info-section-contact { 
+    gap: 20px; 
+  }
+  
+  .contact-text-contact { 
+    font-size: 10px; 
+  }
+  
+  .contact-icon-contact { 
+    width: 35px; 
+    height: 35px; 
+  }
+  
+  .content-section-contact {
+    padding-bottom: 100px;
+  }
+  
+  .orange-background-contact {
+    height: 120px;
+  }
+  
+  .carousel-item {
+    height: 250px !important;
+  }
+}
+
+/* Hide Vuetify default carousel navigation */
+:deep(.v-carousel__controls) {
+  display: none;
+}
+
+/* Style Vuetify carousel arrows */
+:deep(.v-btn--icon.v-carousel__controls__item) {
+  background: rgba(255, 146, 72, 0.8) !important;
+  color: white !important;
+}
+
+:deep(.v-btn--icon.v-carousel__controls__item:hover) {
+  background: rgba(255, 146, 72, 1) !important;
+}
+</style>
@@ -0,0 +1,119 @@
+<template>
+  <div class="payment-step">
+    <v-card-text class="pa-8 text-center">
+      <div class="mb-4">
+        <v-img
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/QRIS_logo.svg/1200px-QRIS_logo.svg.png"
+          height="35"
+          class="mx-auto"
+          contain
+        />
+      </div>
+
+      <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2>
+
+      <div class="qr-container mb-6">
+        <v-card
+          class="qr-code mx-auto d-flex align-center justify-center"
+          width="280"
+          height="280"
+          elevation="0"
+        >
+          <NuxtQrcode
+            :value="paymentStore.qrData.qrvalue"
+            tag="svg"
+            :options="{ width: 280 }"
+          />
+        </v-card>
+      </div>
+
+      <div class="payment-details">
+        <v-row dense class="mb-2">
+          <v-col cols="5" class="text-left">
+            <strong>NAMA PASIEN:</strong>
+          </v-col>
+          <v-col cols="7" class="text-left">
+            {{ paymentStore.patientInfo.name }}
+          </v-col>
+        </v-row>
+
+        <v-row dense class="mb-2">
+          <v-col cols="5" class="text-left">
+            <strong>NOMINAL:</strong>
+          </v-col>
+          <v-col cols="7" class="text-left">
+            {{ paymentStore.patientInfo.amount }}
+          </v-col>
+        </v-row>
+
+        <v-row dense class="mb-2">
+          <v-col cols="5" class="text-left">
+            <strong>NOMOR TAGIHAN:</strong>
+          </v-col>
+          <v-col cols="7" class="text-left">
+            {{ paymentStore.qrData.display_nobill }}
+          </v-col>
+        </v-row>
+        
+        <v-row dense class="mb-4">
+          <v-col cols="5" class="text-left">
+            <strong>BERLAKU SAMPAI:</strong>
+          </v-col>
+          <v-col cols="7" class="text-left text-red">
+            N/A
+          </v-col>
+        </v-row>
+      </div>
+
+      <div class="d-flex gap-4 justify-center">
+        <v-btn color="grey" variant="outlined" @click="paymentStore.prevStep">
+          Kembali
+        </v-btn>
+        <v-btn color="primary" variant="flat" @click="paymentStore.nextStep">
+          Simulasi Pembayaran
+        </v-btn>
+      </div>
+    </v-card-text>
+  </div>
+</template>
+
+<script setup>
+import { usePaymentStore } from "~/stores/payment";
+const paymentStore = usePaymentStore();
+</script>
+
+<style scoped>
+/* Style tetap sama */
+.payment-step {
+  background: rgb(233, 233, 233);
+}
+.qr-container {
+  padding: 20px;
+  background: white;
+  border-radius: 16px;
+  display: inline-block;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+.qr-code {
+  position: relative;
+  background: white;
+  padding: 20px;
+}
+.qr-label {
+  position: absolute;
+  bottom: 5px;
+  right: 10px;
+  font-size: 10px;
+  font-weight: bold;
+}
+.payment-details {
+  max-width: 350px;
+  margin: 0 auto;
+}
+@media (orientation: landscape) and (min-width: 768px) {
+  .qr-code {
+    width: 240px !important;
+    height: 240px !important;
+  }
+}
+</style>
@@ -0,0 +1,38 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="payment-step">
+    <v-card-text class="pa-8 text-center">
+      <div class="success-container">
+        <v-icon icon="mdi-check-circle" size="80" class="text-orange mb-4" />
+        <h2 class="text-h4 mb-4 font-weight-bold text-dark">Pembayaran Berhasil</h2>
+        <p class="text-h6 text-grey-darken-1 mb-6">
+          Silahkan Menunggu Bukti<br >Pembayaran
+        </p>
+        <v-btn color="primary" size="large" variant="flat" rounded="xl" @click="paymentStore.reset">
+          Kembali ke Awal
+        </v-btn>
+      </div>
+    </v-card-text>
+  </div>
+</template>
+
+<script setup>
+import { usePaymentStore } from '~/stores/payment';
+const paymentStore = usePaymentStore();
+</script>
+
+<style scoped>
+
+.payment-step {
+  background: rgb(233, 233, 233);
+}
+.success-container {
+  padding: 40px 20px;
+}
+.text-orange {
+  color: #ff9800 !important;
+}
+.text-dark {
+  color: #424242 !important;
+}
+</style>