update layout

pages/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="medical-payment-app">
-    <v-container fluid class="pa-0">
-      <v-row justify="center" no-gutters>
-        <v-col cols="12">
+    <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"
@@ -37,7 +37,7 @@ const localIpAddress = ref(null);
 const pollingInterval = ref(null);
 
 const hasIpAddress = computed(() => !!localIpAddress.value);
-const apiURL = 'http://10.10.150.68:8084/api/v1/qris/allstatus';
+const apiURL = 'http://10.10.150.67:8084/api/v1/qris/allstatus';
 
 const paymentSteps = {
   1: Home,
@@ -114,7 +114,7 @@ const startPolling = () => {
           console.log(`📊 Found ${samePatientRecords.length} records for same patient:`, 
             samePatientRecords.map(r => `status: ${r.status}`));
           
-          // Now look for final status (success or fail) among same patient records
+          
           const successRecord = samePatientRecords.find(record => record.status === "2");
           const failRecord = samePatientRecords.find(record => record.status === "0");
           
@@ -124,12 +124,12 @@ const startPolling = () => {
             paymentStore.currentStep = 3;
             clearInterval(pollingInterval.value);
             
-            // Auto return to home after 5 seconds
+            
             setTimeout(() => {
               console.log('🏠 Auto return to home');
               paymentStore.reset();
               startPolling();
-            }, 10000);
+            }, 20000);
             
           } else if (failRecord) {
             console.log('❌ FAIL STATUS FOUND!', failRecord);
@@ -137,12 +137,12 @@ const startPolling = () => {
             paymentStore.currentStep = 4;
             clearInterval(pollingInterval.value);
             
-            // Auto return to home after 5 seconds
+            
             setTimeout(() => {
               console.log('🏠 Auto return to home');
               paymentStore.reset();
               startPolling();
-            }, 10000);
+            }, 20000);
             
           } else {
             console.log('⏳ Still waiting for final status...');
@@ -156,7 +156,7 @@ const startPolling = () => {
     } catch (error) {
       console.error("❌ Polling error:", error);
     }
-  }, 10000);
+  }, 20000);
   
   console.log(`🚀 Polling started - IP-based patient detection`);
 };
@@ -165,7 +165,7 @@ const checkAndRedirect = () => {
   const savedIp = localStorage.getItem('loketIp');
   if (!savedIp) {
     console.warn('IP Address belum diatur. Mengarahkan ke halaman setup.');
-    router.push('/setup-ip');
+    router.push('/setupip');
   } else {
     localIpAddress.value = savedIp;
     console.log('IP Address ditemukan:', savedIp);
@@ -189,19 +189,62 @@ onUnmounted(() => {
 <style scoped>
 .medical-payment-app {
   background: linear-gradient(135deg, #ff9248 20%, #ff9248 100%);
+  min-height: 100vh;
+  height: auto;
 }
+
+.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 {
-  max-width: 500px !important;
-  margin-top: 2rem !important;
-  margin-bottom: 2rem !important;
+  max-width: 1200px !important;
+  width: 100% !important;
+  margin: 1rem auto !important;
   border-radius: 16px !important;
+  height: auto !important;
+  min-height: calc(100vh - 2rem);
 }
+
 .payment-card {
   background: rgb(224, 224, 224);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  height: auto !important;
+  min-height: inherit;
+}
+
+/* Responsive adjustments */
+@media (max-width: 900px) {
+  .payment-centered {
+    max-width: 500px !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);
+  }
+}
+
+@media (orientation: landscape) and (max-height: 600px) {
+  .medical-payment-app {
+    min-height: 600px;
+  }
+  
+  .contact-fullscreen,
+  .payment-centered {
+    min-height: 600px;
+  }
 }
 </style>