fix :

- second display ui adjustment
- show ui on cashier

app/views/foodcourt/qrpay/init.html.erb

@@ -205,16 +205,22 @@
 <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 d-flex flex-column h-100" style="padding-right: 10px;">
 
     <div class="card-block">
-        <div class="payment-waiting text-center" style="height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
+        <div class="payment-waiting text-center" style="height: 400px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;">
+            <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
             <h3 class="m-t-20" style="color: #555;">Waiting for Customer Payment</h3>
             <p class="text-muted">Please ask customer to scan the QR code</p>
-            <div class="processing-indicator m-t-10">
+            <% if @qr_svg %>
+                <div>
+                    <%= raw @qr_svg %>
+                </div>
+            <% end %>
+            <div class="processing-indicator m-t-10" style="margin-top: 8rem;">
                 <div class="processing-dot"></div>
                 <div class="processing-dot"></div>
                 <div class="processing-dot"></div>
             </div>
         </div>
-        <div class="d-flex">
+        <div class="d-flex" style="margin-top: 10rem;">
             <button class="btn btn-block btn-default waves-effect" id="cancel-btn">Cancel</button>
         </div>
         <input type="hidden" name="server_mode" value="<%=ENV["SERVER_MODE"]%>" id="server_mode">
@@ -252,8 +258,7 @@
   document.addEventListener('DOMContentLoaded', function() {
     const paymentWaiting = document.querySelector('.payment-waiting');
     let amountToReceive = <%= number_with_precision(@sale_data.grand_total, precision: precision.to_i) %>;
-    let receipt_no = document.querySelector('#receipt_no').textContent;
+    const receipt_no = document.querySelector('#receipt_no').textContent;
-    console.log(receipt_no);
     const ws = new WebSocket("wss://juicecorner-0mo.sx-fc.app/cable");
 
 
@@ -264,7 +269,8 @@
       ws.send(JSON.stringify({
         command: "subscribe",
         identifier: JSON.stringify({
-          channel: "TestChannel"
+          channel: "TestChannel",
+          // receipt_no: receipt_no
         })
       }));
     }
@@ -279,6 +285,7 @@
 
       if(msg?.message?.status === "PAY_SUCCESS") {
         paymentWaiting.innerHTML = `
+                  <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
                   <div class="payment-success text-center">
                     <i class="material-icons" style="font-size: 50px; color: #4CAF50;">check_circle</i>
                     <h3 class="m-t-20" style="color: #4CAF50;">Payment Successful!</h3>
@@ -341,10 +348,12 @@
           },
           body: JSON.stringify(data)
         }).then(function(res) {
+          customer_display_view(null,"reload");
           return  res.json();
         }).then(function(data) {
             if(data.status) {
-              window.location.href = "/"
+
+              window.location.href = "/";
             }
         });
     });

app/views/foodcourt/second_display/_second_display.html.erb

@@ -55,14 +55,19 @@
       <div class="card-header text-white" style="background-color: #ffc107;">
         <h4 class="mb-0">MMQR Payment Option</h4>
       </div>
-      <div class="card-body d-flex flex-column align-items-center justify-content-center">
+      <!-- MODIFICATION HERE: Removed flex-column -->
-        <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
+      <div class="card-body row d-flex align-items-center justify-content-center">
+
+        <!-- This is now Column 1 -->
+        <div class="col-6"> <!-- Using col-md-6 for responsiveness, col-6 is also fine -->
             <div class="text-center">
+              <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
               <h5>Scan to Pay</h5>
               <p class="text-muted">Use your mobile wallet app</p>
             </div>
 
-        <div id="qr-payment-container" class="text-center p-3 bg-white rounded border" style="max-width: 300px;">
+            <div id="qr-payment-container" class="mx-auto text-center p-3 bg-white rounded border" style="max-width: 300px;">
+              <!-- Added mx-auto to center this block within its col-6 parent -->
               <div id="qr-code" class="mb-2">
                 <div id="qrpay_svg">
                   <svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
@@ -74,18 +79,22 @@
               <div class="payment-details text-dark">
               </div>
             </div>
+        </div>
 
+        <!-- This is now Column 2 -->
+        <div class="col-6 d-flex flex-column"> <!-- Using col-md-6. Added d-flex flex-column here to make mt-auto work -->
             <div class="payment-instructions mt-4 text-center">
               <h6>How to Pay:</h6>
-          <ol class="text-left small pl-3 mb-0">
+              <!-- text-left on ol seems fine, but you might want text-md-left if it looks odd on small screens -->
+              <ol class="text-left small pl-3 mb-0" style="display: inline-block;"> <!-- inline-block for text-center to work on ol -->
                 <li>Open your mobile wallet app</li>
                 <li>Tap on 'Scan QR Code'</li>
                 <li>Point your camera at this code</li>
                 <li>Confirm the payment details</li>
               </ol>
             </div>
-      </div>
+            <!-- mt-auto will push this to the bottom of this column if the column has extra space -->
-      <div class="supported-partners-container mt-auto pt-3 pb-3">
+            <div class="supported-partners-container mt-auto pt-3 pb-3 text-center">
                 <h6 class="supported-partners-title">Supported Partners</h6>
                 <div class="partner-logos">
                     <img src="/image/logo/AYA-Pay.webp" alt="AYA Pay" class="partner-logo">
@@ -96,6 +105,8 @@
             </div>
         </div>
       </div>
+    </div>
+  </div>
 
   <!-- Third Column: Payment Success -->
   <div class="col-12 d-flex flex-column h-100 hidden" id="payment_success">
@@ -178,7 +189,6 @@
     background-color: #f8f9fa;
     padding: 15px;
     border-radius: 8px;
-    max-width: 300px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.05);
   }
   .payment-instructions ol {
@@ -286,6 +296,17 @@
       font-size: 0.95rem;
   }
 
+  @media(min-width: 600px){
+      #second_display_order_items{
+        margin-top: -3rem;
+      }
+      #mmqr_payment{
+        margin-top: -3rem;
+      }
+  }
+
+
+
 
   @media (max-width: 576px) {
     .card-header h4 { font-size: 1.1rem; }

app/views/foodcourt/second_display/index.html.erb

@@ -1,3 +1,9 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    </head>
     <style>
       * {box-sizing: border-box;}
       body {
@@ -88,6 +94,7 @@
       }
     </style>
 
+    <body>
         <div class="container-fluid h-100">
             <button type="button" class="hidden" id="s_reload">Reload</button>
             <div class="slider" id="second_display_slider">
@@ -98,7 +105,7 @@
             	<%= render 'second_display' %>
             </div>
         </div>
-
+    </body>
     <script type="text/javascript">
 	$(document).ready(function () {
         //html font-size for second display till 35px!
@@ -130,6 +137,7 @@
         slides[slideIndex].classList.add("slide-in");
 
         slider.dataset.slideIndex = slideIndex;
-    setTimeout(showSlides, 5000, sliderId); // Change image every 5 seconds
+        setTimeout(showSlides, 5000, sliderId);
       }
     </script>
+</html>