admin/38682-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

last update for pos

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-24 18:11:49 +00:00
parent 0c612d04a8
commit a6faa425c0
4 changed files with 163 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
assets/js/main.js
View File

@ -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.innerHTML = `<button class="btn btn-outline-primary w-100 payment-btn" onclick="processOrder(${pt.id}, '${pt.name}')">${pt.name}</button>`;
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);
});
}
@ -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) })

6
assets/js/main.js?v=533-538 Normal file
View File

@ -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);
});

78
pos.php
View File

@ -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">
<span class="input-group-text bg-light border-0 rounded-start-pill ps-3"><i class="bi bi-person text-muted"></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;">
<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 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>
<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 fs-5"></i></span>
<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 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 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-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-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 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',

2
qorder.php
View File

@ -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; }