From ecb1a242f33ed63ec929d45dd27d76a5a9965fff Mon Sep 17 00:00:00 2001
From: Suherdy Yacob <suherdy.yacob@mapan.co.id>
Date: Mon, 1 Jun 2026 10:12:12 +0700
Subject: [PATCH] feat: add print checker button to POS portrait screen and
 update responsive styling

---
 README.md                                     | 36 ++++++++++++-------
 .../product_screen/portrait_screen.xml        | 14 ++++++++
 static/src/scss/portrait.scss                 |  7 +++-
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 8f9e979..114a90f 100644
--- a/README.md
+++ b/README.md
@@ -29,18 +29,18 @@ A dedicated compact layout for portrait-orientation small screens. Designed for
 #### Layout
 
 ```
-┌──────────────────────────────┐
-│  Navbar (compact)            │
-├──────────────────────────────┤
-│                              │
-│  Active tab pane:            │
-│  Products / Cart / Numpad    │
-│                              │
-├──────────────────────────────┤
-│  TOTAL: Rp X,XXX  [Send][Pay]│  ← always visible
-├──────────────────────────────┤
-│  [Products]  [Cart]  [Numpad]│  ← bottom tab bar
-└──────────────────────────────┘
+┌──────────────────────────────────────┐
+│  Navbar (compact)                    │
+├──────────────────────────────────────┤
+│                                      │
+│  Active tab pane:                    │
+│  Products / Cart / Numpad            │
+│                                      │
+├──────────────────────────────────────┤
+│ TOTAL: Rp X,XX [Checker] [Send] [Pay]│  ← always visible
+├──────────────────────────────────────┤
+│  [Products]    [Cart]    [Numpad]    │  ← bottom tab bar
+└──────────────────────────────────────┘
 ```
 
 #### Key Differences from Standard Mode
@@ -51,9 +51,19 @@ A dedicated compact layout for portrait-orientation small screens. Designed for
 | Product grid | `auto-fill minmax(115px)` | Fixed 2 columns |
 | Product images | Full aspect ratio | Capped at 90px height |
 | Numpad | Shown inline in left pane | Dedicated "Numpad" tab |
-| Pay/Send | Inside left pane action pad | Always-visible bottom strip |
+| Actions (Pay/Send/Checker) | Inside left pane action pad | Always-visible bottom strip |
 | Navbar | Full labels | Compact with smaller padding |
 
+#### Table Checker Button
+
+The **Checker** button is available in the bottom pay strip in portrait mode. It allows waiters or cashiers to quickly print a basic table checker receipt.
+
+The button is visible only when:
+1. The `basic_receipt` option is enabled in POS settings.
+2. The current cashier's role is either `waiter` or `cashier`.
+
+The button is disabled when the current order is empty.
+
 #### Auto-Activation
 
 Portrait mode **auto-activates** when the browser viewport width is **< 400 px** on first load. A manual override is always available via the burger menu (☰ → Switch to Portrait/Standard Mode). The choice is saved to `localStorage`.
diff --git a/static/src/app/screens/product_screen/portrait_screen.xml b/static/src/app/screens/product_screen/portrait_screen.xml
index 1d2e42d..8c5c755 100644
--- a/static/src/app/screens/product_screen/portrait_screen.xml
+++ b/static/src/app/screens/product_screen/portrait_screen.xml
@@ -31,6 +31,20 @@
                         <strong class="portrait-total-amount text-truncate lh-1 mt-1" t-esc="currentOrder.isEmpty() ? '—' : total"/>
                     </div>
 
+                    <!--
+                        Table Checker button:
+                        - Only displayed if basic_receipt is enabled.
+                        - Cashier role must be 'waiter' or 'cashier'.
+                        - Disabled when order is empty.
+                    -->
+                    <button
+                        t-if="pos.config.basic_receipt and pos.cashier and (pos.cashier.pos_role == 'waiter' or pos.cashier.pos_role == 'cashier')"
+                        class="btn btn-secondary portrait-print-btn"
+                        t-att-disabled="currentOrder.isEmpty()"
+                        t-on-click="() => this.pos.printReceipt({ order: this.currentOrder, basic: true, printBillActionTriggered: true })">
+                        <i class="fa fa-print me-1"/>Checker
+                    </button>
+
                     <!--
                         Send button logic mirrors pos_restaurant's swapButton:
                           swapButton = module_pos_restaurant AND preparationCategories.size > 0
diff --git a/static/src/scss/portrait.scss b/static/src/scss/portrait.scss
index 4830eb7..d5d3283 100644
--- a/static/src/scss/portrait.scss
+++ b/static/src/scss/portrait.scss
@@ -187,7 +187,8 @@
             }
 
             .portrait-pay-btn,
-            .portrait-send-btn {
+            .portrait-send-btn,
+            .portrait-print-btn {
                 border-radius: 10px;
                 font-weight: 600;
                 font-size: 0.9rem;
@@ -201,6 +202,10 @@
             .portrait-send-btn {
                 min-width: 80px;
             }
+
+            .portrait-print-btn {
+                min-width: 80px;
+            }
         }
 
         /* ---- BOTTOM TAB BAR ---- */