last update for pos

assets/js/main.js

@@ -63,6 +63,10 @@ document.addEventListener('DOMContentLoaded', () => {
     const pointsHistoryBody = document.getElementById('points-history-body');
     const pointsHistoryEmpty = document.getElementById('points-history-empty');
 
+    const addCustomerModalEl = document.getElementById('addCustomerModal');
+    const addCustomerModal = addCustomerModalEl ? new bootstrap.Modal(addCustomerModalEl) : null;
+    const saveNewCustomerBtn = document.getElementById('save-new-customer');
+
     let currentTableId = null;
     let currentTableName = null;
     const tableDisplay = document.getElementById('current-table-display');
@@ -288,6 +292,92 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
+    if (redeemLoyaltyBtn) {
+        redeemLoyaltyBtn.addEventListener('click', () => {
+            if (!currentCustomer) return;
+            isLoyaltyRedemption = true;
+            processOrder(null, 'Loyalty Redeem');
+        });
+    }
+
+    if (viewPointsHistoryBtn) {
+        viewPointsHistoryBtn.addEventListener('click', () => {
+            if (!currentCustomer || !pointsHistoryModal) return;
+            pointsHistoryBody.innerHTML = '<div class="text-center py-3"><div class="spinner-border spinner-border-sm text-primary"></div></div>';
+            pointsHistoryEmpty.classList.add('d-none');
+            pointsHistoryModal.show();
+
+            fetch(`api/customer_loyalty_history.php?customer_id=${currentCustomer.id}`)
+                .then(res => res.json())
+                .then(data => {
+                    pointsHistoryBody.innerHTML = '';
+                    if (data.success && data.history.length > 0) {
+                        data.history.forEach(h => {
+                            const item = document.createElement('div');
+                            item.className = 'list-group-item px-0 border-0 border-bottom';
+                            const badgeClass = h.points_change > 0 ? 'bg-success' : 'bg-danger';
+                            item.innerHTML = `
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <div class="fw-bold text-capitalize">${h.reason}</div>
+                                    <span class="badge ${badgeClass}">${h.points_change > 0 ? '+' : ''}${h.points_change}</span>
+                                </div>
+                                <div class="text-muted small">${h.created_at}</div>
+                            `;
+                            pointsHistoryBody.appendChild(item);
+                        });
+                    } else {
+                        pointsHistoryEmpty.classList.remove('d-none');
+                    }
+                })
+                .catch(() => {
+                    pointsHistoryBody.innerHTML = `<div class="alert alert-danger p-2 small">${_t('error')}</div>`;
+                });
+        });
+    }
+
+    if (saveNewCustomerBtn) {
+        saveNewCustomerBtn.addEventListener('click', () => {
+            const name = document.getElementById('new-customer-name').value.trim();
+            const phone = document.getElementById('new-customer-phone').value.trim();
+            
+            if (!name || !phone) {
+                showToast('Please fill in both name and phone', 'warning');
+                return;
+            }
+
+            saveNewCustomerBtn.disabled = true;
+            saveNewCustomerBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
+
+            fetch('api/create_customer.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, phone })
+            })
+            .then(res => res.json())
+            .then(data => {
+                saveNewCustomerBtn.disabled = false;
+                saveNewCustomerBtn.innerHTML = 'Add Customer';
+                
+                if (data.success) {
+                    showToast('Customer added successfully', 'success');
+                    selectCustomer(data.customer);
+                    if (addCustomerModal) addCustomerModal.hide();
+                    
+                    // Clear inputs
+                    document.getElementById('new-customer-name').value = '';
+                    document.getElementById('new-customer-phone').value = '';
+                } else {
+                    showToast(data.error || 'Failed to add customer', 'danger');
+                }
+            })
+            .catch(() => {
+                saveNewCustomerBtn.disabled = false;
+                saveNewCustomerBtn.innerHTML = 'Add Customer';
+                showToast('An error occurred', 'danger');
+            });
+        });
+    }
+
     window.checkOrderType = function() {
         const checked = document.querySelector('input[name="order_type"]:checked');
         if (!checked) return;
@@ -442,8 +532,8 @@ document.addEventListener('DOMContentLoaded', () => {
         if (typeof PAYMENT_TYPES !== 'undefined') {
             PAYMENT_TYPES.forEach(pt => {
                 const col = document.createElement('div');
-                col.className = 'col-6';
+                col.className = 'col-12';
-                col.innerHTML = `<button class="btn btn-outline-primary w-100 payment-btn" onclick="processOrder(${pt.id}, '${pt.name}')">${pt.name}</button>`;
+                col.innerHTML = `<button class="btn btn-outline-primary w-100 py-3 payment-btn" onclick="processOrder(${pt.id}, '${pt.name}')">${pt.name}</button>`;
                 paymentMethodsContainer.appendChild(col);
             });
         }
@@ -464,7 +554,9 @@ document.addEventListener('DOMContentLoaded', () => {
             outlet_id: CURRENT_OUTLET ? CURRENT_OUTLET.id : 1,
             payment_type_id: paymentTypeId,
             total_amount: subtotal + vat,
-            vat: vat, items: cart.map(item => ({ product_id: item.id, quantity: item.quantity, unit_price: item.price, variant_id: item.variant_id }))
+            vat: vat, 
+            items: cart.map(item => ({ product_id: item.id, quantity: item.quantity, unit_price: item.price, variant_id: item.variant_id })),
+            redeem_loyalty: isLoyaltyRedemption
         };
 
         fetch('api/order.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(orderData) })

assets/js/main.js?v=533-538

@@ -0,0 +1,6 @@
+            PAYMENT_TYPES.forEach(pt => {
+                const col = document.createElement('div');
+                col.className = 'col-12';
+                col.innerHTML = `<button class="btn btn-outline-primary w-100 py-3 payment-btn" onclick="processOrder(${pt.id}, '${pt.name}')">${pt.name}</button>`;
+                paymentMethodsContainer.appendChild(col);
+            });

pos.php

@@ -106,7 +106,7 @@ if (!$loyalty_settings) {
       .product-card:active { transform: scale(0.95); }
       .product-card:hover { border-color: #0d6efd !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }
       
-      .category-btn { text-align: left; border: none; background: none; padding: 10px 12px; width: 100%; display: flex; align-items: center; gap: 10px; border-radius: 12px; color: #64748b; font-weight: 700; transition: all 0.2s; }
+      .category-btn { font-size: 1.1rem; text-align: left; border: none; background: none; padding: 10px 12px; width: 100%; display: flex; align-items: center; gap: 10px; border-radius: 12px; color: #64748b; font-weight: 700; transition: all 0.2s; }
       .category-btn:hover { background-color: #f1f5f9; color: #0f172a; }
       .category-btn.active { background-color: #0d6efd; color: white; box-shadow: 0 4px 6px -1px rgba(13, 110, 253, 0.3); }
       .search-dropdown { position: absolute; width: 100%; z-index: 1000; max-height: 200px; overflow-y: auto; display: none; }
@@ -138,6 +138,23 @@ if (!$loyalty_settings) {
           body { overflow: visible !important; height: auto !important; }
       }
       .print-only { display: none; }
+
+      /* Touch-friendly enhancements */
+      .btn-touch {
+          padding-top: 0.75rem;
+          padding-bottom: 0.75rem;
+          font-weight: 700;
+          border-radius: 12px;
+      }
+      .btn-group-touch .btn {
+          padding-top: 0.75rem;
+          padding-bottom: 0.75rem;
+          font-weight: 700;
+      }
+      .input-group-touch .form-control, .input-group-touch .btn, .input-group-touch .input-group-text {
+          padding-top: 0.6rem;
+          padding-bottom: 0.6rem;
+      }
   </style>
 </head>
 <body>
@@ -157,8 +174,6 @@ if (!$loyalty_settings) {
         
         <div class="ms-auto d-flex align-items-center gap-1 gap-sm-2">
           <a href="kitchen.php" class="btn btn-outline-primary btn-sm rounded-pill px-2 px-sm-3 border-0"><i class="bi bi-fire me-1"></i> Kitchen</a>
-          <a href="pos.php?order_type=dine-in" class="btn btn-outline-info btn-sm rounded-pill px-2 px-sm-3 border-0"><i class="bi bi-person-badge me-1"></i> Waiter</a>
-          <a href="admin/orders.php" class="btn btn-outline-secondary btn-sm rounded-pill px-2 px-sm-3 border-0"><i class="bi bi-receipt me-1"></i> Orders</a>
           <button class="btn btn-outline-warning btn-sm rounded-pill px-2 px-sm-3 border-0" onclick="openRecallOrderModal()"><i class="bi bi-arrow-counterclockwise me-1"></i> Recall Bill</button>
           
           <div class="vr mx-1 h-25 d-none d-sm-block"></div>
@@ -211,7 +226,7 @@ if (!$loyalty_settings) {
                     <span class="position-absolute top-50 start-0 translate-middle-y ms-3 text-muted">
                     <i class="bi bi-search small"></i>
                     </span>
-                    <input type="text" id="product-search" class="form-control form-control-sm ps-5 border-0 bg-light rounded-3" placeholder="Search...">
+                    <input type="text" id="product-search" class="form-control fs-5 ps-5 border-0 bg-light rounded-3" placeholder="Search...">
                 </div>
             </div>
             <?php if (count($outlets) > 1): ?>
@@ -267,25 +282,38 @@ if (!$loyalty_settings) {
       <!-- Right Sidebar: Cart -->
       <div class="col-md-3 col-12 pos-cart shadow-sm">
          <div class="p-2 border-bottom bg-white">
-            <div class="btn-group w-100 mb-2" role="group">
+            <div class="btn-group btn-group-touch w-100 mb-2" role="group">
                 <input type="radio" class="btn-check" name="order_type" id="ot-takeaway" value="takeaway" <?= $order_type === 'takeaway' ? 'checked' : '' ?>>
-                <label class="btn btn-outline-primary btn-sm py-1 rounded-start-pill" for="ot-takeaway" style="font-size: 0.75rem; font-weight: 700;">Takeaway</label>
+                <label class="btn btn-outline-primary py-2 rounded-start-pill" for="ot-takeaway" style="font-weight: 700;">Takeaway</label>
                 <input type="radio" class="btn-check" name="order_type" id="ot-dine-in" value="dine-in" <?= $order_type === 'dine-in' ? 'checked' : '' ?>>
-                <label class="btn btn-outline-primary btn-sm py-1" for="ot-dine-in" style="font-size: 0.75rem; font-weight: 700;">Dine-In</label>
+                <label class="btn btn-outline-primary py-2" for="ot-dine-in" style="font-weight: 700;">Dine-In</label>
                 <input type="radio" class="btn-check" name="order_type" id="ot-delivery" value="delivery" <?= $order_type === 'delivery' ? 'checked' : '' ?>>
-                <label class="btn btn-outline-primary btn-sm py-1 rounded-end-pill" for="ot-delivery" style="font-size: 0.75rem; font-weight: 700;">Delivery</label>
+                <label class="btn btn-outline-primary py-2 rounded-end-pill" for="ot-delivery" style="font-weight: 700;">Delivery</label>
             </div>
 
             <div class="position-relative">
-                <div class="input-group input-group-sm">
+                <div class="input-group input-group-touch">
-                    <span class="input-group-text bg-light border-0 rounded-start-pill ps-3"><i class="bi bi-person text-muted"></i></span>
+                    <span class="input-group-text bg-light border-0 rounded-start-pill ps-3"><i class="bi bi-person text-muted fs-5"></i></span>
-                    <input type="text" class="form-control border-0 bg-light ps-1" id="customer-search" placeholder="Customer..." autocomplete="off" style="font-weight: 600;">
+                    <input type="text" class="form-control border-0 bg-light ps-1 fs-6" id="customer-search" placeholder="Customer..." autocomplete="off" style="font-weight: 600; font-size: 1.1rem;">
-                    <button class="btn btn-light border-0 d-none" type="button" id="clear-customer"><i class="bi bi-x"></i></button>
+                    <button class="btn btn-light border-0 d-none" type="button" id="clear-customer"><i class="bi bi-x fs-5"></i></button>
-                    <button class="btn btn-light border-0 rounded-end-pill pe-3 text-primary" type="button" data-bs-toggle="modal" data-bs-target="#addCustomerModal"><i class="bi bi-plus-lg"></i></button>
+                    <button class="btn btn-light border-0 rounded-end-pill pe-3 text-primary" type="button" data-bs-toggle="modal" data-bs-target="#addCustomerModal"><i class="bi bi-plus-lg fs-5"></i></button>
                 </div>
                 <div class="list-group shadow border-0 search-dropdown" id="customer-results" style="border-radius: 12px; margin-top: 5px;"></div>
                 <input type="hidden" id="selected-customer-id">
             </div>
+
+            <!-- Loyalty Section -->
+            <div id="loyalty-section" class="mt-2 p-2 bg-primary-subtle rounded-3 d-none border border-primary-subtle">
+                <div class="d-flex justify-content-between align-items-center mb-1">
+                    <span class="small fw-bold text-primary"><i class="bi bi-star-fill me-1"></i> Loyalty Points</span>
+                    <div class="d-flex align-items-center gap-2">
+                        <span class="badge bg-primary rounded-pill" id="loyalty-points-display">0 pts</span>
+                        <button type="button" class="btn btn-link p-0 text-primary" id="view-points-history-btn" title="View History"><i class="bi bi-clock-history"></i></button>
+                    </div>
+                </div>
+                <div id="loyalty-message" class="small text-muted mb-2" style="font-size: 0.75rem;"></div>
+                <button type="button" class="btn btn-primary btn-sm w-100 fw-bold rounded-3" id="redeem-loyalty-btn" disabled>Redeem Free Meal</button>
+            </div>
          </div>
 
          <div class="flex-grow-1 overflow-auto p-2 bg-white" id="cart-items">
@@ -305,10 +333,10 @@ if (!$loyalty_settings) {
                  <span class="fs-5 fw-bold text-primary" id="cart-total-price"><?= format_currency(0) ?></span>
              </div>
              
-             <button class="btn btn-link text-danger w-100 py-0 fw-semibold mb-3 btn-sm text-decoration-none" onclick="clearCart()" style="font-size: 0.75rem;">Clear Cart</button>
+             <button class="btn btn-link text-danger w-100 py-2 fw-bold mb-3 fs-6 text-decoration-none" onclick="clearCart()">Clear Cart</button>
              <div class="d-flex gap-2">
-                 <button class="btn btn-primary w-50 btn-sm shadow-sm fw-bold py-2 rounded-3" id="quick-order-btn" disabled>QUICK PAY</button>
+                 <button class="btn btn-primary w-50 shadow-sm fw-bold py-3 rounded-4 fs-6" id="quick-order-btn" disabled>QUICK PAY</button>
-                 <button class="btn btn-outline-warning w-50 btn-sm shadow-sm fw-bold py-2 rounded-3" id="place-order-btn" disabled>PLACE ORDER</button>
+                 <button class="btn btn-outline-warning w-50 shadow-sm fw-bold py-3 rounded-4 fs-6" id="place-order-btn" disabled>PLACE ORDER</button>
              </div>
          </div>
       </div>
@@ -374,6 +402,22 @@ if (!$loyalty_settings) {
         </div>
       </div>
     </div>
+
+    <!-- Loyalty History Modal -->
+    <div class="modal fade" id="pointsHistoryModal" tabindex="-1" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered modal-sm">
+        <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
+          <div class="modal-header border-0 pb-0">
+            <h6 class="modal-title fw-bold">Points History</h6>
+            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+          </div>
+          <div class="modal-body p-3">
+              <div id="points-history-body" class="list-group list-group-flush small"></div>
+              <div id="points-history-empty" class="text-center py-4 text-muted d-none">No history found.</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@@ -391,7 +435,7 @@ if (!$loyalty_settings) {
     const translations = {
         'en': {
             'cart_empty': 'No Items in Cart',
-            'remove': 'Remove',
+            'remove': '<i class="bi bi-trash fs-5"></i>',
             'order_placed': 'Order Placed!',
             'order_success': 'Order saved successfully',
             'error': 'Error',

qorder.php

@@ -60,7 +60,7 @@ foreach ($variants_raw as $v) {
       body.lang-ar { font-family: var(--arabic-font); direction: rtl; text-align: right; }
       
       .category-nav { overflow-x: auto; white-space: nowrap; background: #fff; padding: 10px; position: sticky; top: 0; z-index: 1020; border-bottom: 1px solid #eee; }
-      .category-item { display: inline-block; padding: 8px 16px; border-radius: 20px; background: #f1f3f5; margin-right: 8px; font-weight: 500; font-size: 0.9rem; cursor: pointer; border: 1px solid transparent; }
+      .category-item { display: inline-block; padding: 8px 16px; border-radius: 20px; background: #f1f3f5; margin-right: 8px; font-weight: 500; font-size: 1.1rem; cursor: pointer; border: 1px solid transparent; }
       .lang-ar .category-item { margin-right: 0; margin-left: 8px; }
       .category-item.active { background: #0d6efd; color: #fff; }