# POS UI Optimization

**Odoo 19 | Custom Addon**

Optimizes the Point of Sale UI for resource-constrained devices and adds a **switchable portrait display mode** designed for 6-inch touchscreen terminals.

---

## Features

### 1. Incremental Product Rendering
Prevents low-RAM devices from freezing when the product catalogue is large.

- Only **40 products** are rendered on initial load
- More products load automatically as the user scrolls down
- Resets the counter when the search word or category changes

### 2. Incremental Order Line Rendering
Same approach for the order/cart display.

- Only **20 order lines** rendered initially
- Scrolling loads more lines progressively
- Ensures the selected line is always visible (expands count if needed)

### 3. Portrait Mode (6-inch Display)

A dedicated compact layout for portrait-orientation small screens. Designed for devices like 6-inch Android POS terminals where the standard Odoo two-column layout clutters the screen.

#### Layout

```
┌──────────────────────────────┐
│  Navbar (compact)            │
├──────────────────────────────┤
│                              │
│  Active tab pane:            │
│  Products / Cart / Numpad    │
│                              │
├──────────────────────────────┤
│  TOTAL: Rp X,XXX  [Send][Pay]│  ← always visible
├──────────────────────────────┤
│  [Products]  [Cart]  [Numpad]│  ← bottom tab bar
└──────────────────────────────┘
```

#### Key Differences from Standard Mode

| Feature | Standard | Portrait |
|---|---|---|
| Layout | Two-column (order left, products right) | Single pane with bottom tabs |
| 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 |
| Navbar | Full labels | Compact with smaller padding |

#### 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`.

#### Send Button Behavior

The **Send** button appears only when:
1. The POS is in restaurant mode (`module_pos_restaurant = True`)
2. At least one **Preparation Category** is configured in POS → Kitchen Printers settings
3. The current order has unsent changes (`nbrOfChanges > 0`)
4. The order is not a direct sale / refund

This mirrors Odoo's standard restaurant `swapButton` logic exactly.

---

## Installation

1. Copy the `pos_ui_optimization` folder into your `customaddons` directory
2. Restart the Odoo server
3. Go to **Apps** → search for **POS UI Optimization** → Install
4. Reload your POS session

## Upgrade

```bash
./odoo-bin -u pos_ui_optimization -d <your_database>
```

---

## Compatibility

| Item | Value |
|---|---|
| Odoo version | 19.0 |
| Depends on | `point_of_sale` |
| Compatible with | `pos_restaurant`, `pos_custom_access`, `pos_kitchen_printer` |
| License | LGPL-3 |

---

## File Structure

```
pos_ui_optimization/
├── __manifest__.py
├── README.md
├── static/
│   └── src/
│       ├── app/
│       │   ├── components/
│       │   │   ├── navbar/
│       │   │   │   ├── navbar_patch.js       # Display Mode toggle in burger menu
│       │   │   │   └── navbar_patch.xml
│       │   │   └── order_display/
│       │   │       ├── order_display_patch.js # Incremental order line rendering
│       │   │       └── order_display_patch.xml
│       │   ├── screens/
│       │   │   └── product_screen/
│       │   │       ├── portrait_mode_patch.js # Tab state (products/cart/numpad)
│       │   │       ├── portrait_screen.xml    # Portrait layout XML patch
│       │   │       ├── product_screen_patch.js # Incremental product rendering
│       │   │       └── product_screen_patch.xml
│       │   └── services/
│       │       └── portrait_mode.js           # Auto-detect + localStorage service
│       └── scss/
│           └── portrait.scss                  # All portrait CSS (scoped to .pos-portrait)
```

---

## Author

**Suherdy Yacob**