customer display
This commit is contained in:
Flatlogic Bot
parent
d0564c7f58
commit
af4b79251b
271
customer-display.php
Normal file
271
customer-display.php
Normal file
@ -0,0 +1,271 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Customer Display</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||
<link rel="stylesheet" href="assets/css/custom.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.header {
|
||||
background: var(--surface);
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.items-section {
|
||||
flex: 2;
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
.totals-section {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.cart-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 0.5rem;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
}
|
||||
.item-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.item-details {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.item-price {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
}
|
||||
.total-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.grand-total {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.grand-total-label {
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.grand-total-amount {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.welcome-screen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.welcome-icon {
|
||||
font-size: 5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--border);
|
||||
opacity: 0.5;
|
||||
}
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<i class="bi bi-cart4 me-2"></i>Customer Display
|
||||
</div>
|
||||
<div id="customerName" class="badge bg-light text-dark fs-6 fw-normal border">
|
||||
Welcome
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="activeCart" class="content" style="display: none;">
|
||||
<div class="items-section" id="itemsList">
|
||||
<!-- Items will be injected here -->
|
||||
</div>
|
||||
|
||||
<div class="totals-section">
|
||||
<div class="total-row">
|
||||
<span>Subtotal</span>
|
||||
<span id="displaySubtotal">OMR 0.000</span>
|
||||
</div>
|
||||
<div id="displayDiscountRow" class="total-row text-danger" style="display: none;">
|
||||
<span>Discount</span>
|
||||
<span id="displayDiscount">- OMR 0.000</span>
|
||||
</div>
|
||||
<div id="displayLoyaltyRow" class="total-row text-success" style="display: none;">
|
||||
<span>Loyalty Redeemed</span>
|
||||
<span id="displayLoyalty">- OMR 0.000</span>
|
||||
</div>
|
||||
<div id="displayTaxRow" class="total-row text-muted" style="display: none;">
|
||||
<small>VAT Included</small>
|
||||
<small id="displayTax">OMR 0.000</small>
|
||||
</div>
|
||||
|
||||
<div class="grand-total">
|
||||
<div class="grand-total-label">Total to Pay</div>
|
||||
<div class="grand-total-amount" id="displayTotal">OMR 0.000</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="welcomeScreen" class="welcome-screen">
|
||||
<div class="welcome-icon">
|
||||
<i class="bi bi-shop"></i>
|
||||
</div>
|
||||
<h1 class="display-4 fw-bold" style="color: var(--text)">Welcome</h1>
|
||||
<p class="lead">Next customer, please.</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function formatMoney(amount) {
|
||||
return 'OMR ' + parseFloat(amount).toFixed(3);
|
||||
}
|
||||
|
||||
function updateDisplay(data) {
|
||||
// Update Theme
|
||||
if (data.theme) {
|
||||
document.body.className = data.theme;
|
||||
}
|
||||
|
||||
if (!data || !data.items || data.items.length === 0) {
|
||||
document.getElementById('activeCart').style.display = 'none';
|
||||
document.getElementById('welcomeScreen').style.display = 'flex';
|
||||
document.getElementById('customerName').innerText = 'Welcome';
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('welcomeScreen').style.display = 'none';
|
||||
document.getElementById('activeCart').style.display = 'flex';
|
||||
|
||||
// Update Customer Name
|
||||
if (data.customerName && data.customerName !== 'Walk-in Customer' && data.customerName !== 'عميل عابر') {
|
||||
document.getElementById('customerName').innerHTML = '<i class="bi bi-person me-1"></i> ' + data.customerName;
|
||||
} else {
|
||||
document.getElementById('customerName').innerText = 'Welcome';
|
||||
}
|
||||
|
||||
// Update Items
|
||||
const itemsList = document.getElementById('itemsList');
|
||||
itemsList.innerHTML = data.items.map(item => `
|
||||
<div class="cart-item">
|
||||
<div>
|
||||
<div class="item-name">${item.name}</div>
|
||||
<div class="item-details">
|
||||
${item.qty} x ${formatMoney(item.price)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-price">
|
||||
${formatMoney(item.qty * item.price)}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// Scroll to bottom of list
|
||||
itemsList.scrollTop = itemsList.scrollHeight;
|
||||
|
||||
// Update Totals
|
||||
document.getElementById('displaySubtotal').innerText = formatMoney(data.subtotal);
|
||||
|
||||
if (data.discount > 0) {
|
||||
document.getElementById('displayDiscountRow').style.display = 'flex';
|
||||
document.getElementById('displayDiscount').innerText = '- ' + formatMoney(data.discount);
|
||||
} else {
|
||||
document.getElementById('displayDiscountRow').style.display = 'none';
|
||||
}
|
||||
|
||||
if (data.loyalty > 0) {
|
||||
document.getElementById('displayLoyaltyRow').style.display = 'flex';
|
||||
document.getElementById('displayLoyalty').innerText = '- ' + formatMoney(data.loyalty);
|
||||
} else {
|
||||
document.getElementById('displayLoyaltyRow').style.display = 'none';
|
||||
}
|
||||
|
||||
document.getElementById('displayTotal').innerText = formatMoney(data.total);
|
||||
}
|
||||
|
||||
// Listen for storage events
|
||||
window.addEventListener('storage', (e) => {
|
||||
if (e.key === 'pos_cart_update') {
|
||||
try {
|
||||
const data = JSON.parse(e.newValue);
|
||||
updateDisplay(data);
|
||||
} catch (err) {
|
||||
console.error('Error parsing cart data', err);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initial check
|
||||
const stored = localStorage.getItem('pos_cart_update');
|
||||
if (stored) {
|
||||
try {
|
||||
updateDisplay(JSON.parse(stored));
|
||||
} catch (e) {}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
index.php
41
index.php
@ -2868,6 +2868,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
|
||||
<div class="p-3 border-bottom d-flex justify-content-between align-items-center">
|
||||
<h6 class="m-0 fw-bold"><i class="bi bi-cart3 me-2"></i>Cart</h6>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-sm btn-outline-info" onclick="window.open('customer-display.php', 'CustomerDisplay', 'width=1000,height=800')" title="Customer Display"><i class="bi bi-display me-1"></i> Customer Screen</button>
|
||||
<button class="btn btn-sm btn-outline-warning" onclick="cart.openHeldCartsModal()" title="Held List"><i class="bi bi-list-task"></i></button>
|
||||
<button class="btn btn-sm btn-outline-secondary" onclick="cart.hold()" title="Hold Cart"><i class="bi bi-pause-circle"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="cart.clear()" title="Clear Cart"><i class="bi bi-trash"></i></button>
|
||||
@ -2965,6 +2966,39 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
|
||||
}
|
||||
echo json_encode($custData);
|
||||
?>,
|
||||
broadcast() {
|
||||
try {
|
||||
const subtotal = this.items.reduce((sum, item) => sum + (parseFloat(item.price) * item.qty), 0);
|
||||
let discountAmount = 0;
|
||||
if (this.discount) {
|
||||
discountAmount = this.discount.type === 'percentage' ? subtotal * (parseFloat(this.discount.value) / 100) : parseFloat(this.discount.value);
|
||||
}
|
||||
const redeemSwitch = document.getElementById('redeemLoyalty');
|
||||
const redeemRate = (this.loyaltySettings && this.loyaltySettings.redeemPointsPerUnit) ? this.loyaltySettings.redeemPointsPerUnit : 100;
|
||||
let loyaltyRedeemed = (redeemSwitch && redeemSwitch.checked) ? Math.min(Math.max(0, subtotal - discountAmount), (parseFloat(this.customerPoints) || 0) / redeemRate) : 0;
|
||||
const total = Math.max(0, subtotal - discountAmount - loyaltyRedeemed);
|
||||
|
||||
const customerSelect = document.getElementById('posCustomer');
|
||||
const customerName = customerSelect ? customerSelect.options[customerSelect.selectedIndex].text : '';
|
||||
|
||||
const payload = {
|
||||
items: this.items.map(i => ({
|
||||
name: (document.documentElement.lang === 'ar' ? (i.nameAr || i.nameEn) : (i.nameEn || i.nameAr)),
|
||||
price: parseFloat(i.price),
|
||||
qty: parseFloat(i.qty)
|
||||
})),
|
||||
subtotal: subtotal,
|
||||
discount: discountAmount,
|
||||
loyalty: loyaltyRedeemed,
|
||||
total: total,
|
||||
customerName: customerName,
|
||||
theme: document.body.className,
|
||||
timestamp: Date.now()
|
||||
};
|
||||
|
||||
localStorage.setItem('pos_cart_update', JSON.stringify(payload));
|
||||
} catch (e) { console.error('Broadcast error', e); }
|
||||
},
|
||||
add(product) {
|
||||
if (!this.items) this.items = [];
|
||||
const allowZeroStock = (typeof companySettings !== 'undefined' && String(companySettings.allow_zero_stock_sell) === '1');
|
||||
@ -3216,6 +3250,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
|
||||
if (subtotalEl) subtotalEl.innerText = 'OMR 0.000';
|
||||
if (totalEl) totalEl.innerText = 'OMR 0.000';
|
||||
if (checkoutBtn) checkoutBtn.disabled = true;
|
||||
this.broadcast();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -3285,6 +3320,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
|
||||
|
||||
const checkoutBtn = document.getElementById('checkoutBtn');
|
||||
if (checkoutBtn) checkoutBtn.disabled = false;
|
||||
this.broadcast();
|
||||
} catch (e) {
|
||||
console.error('Cart render error:', e);
|
||||
}
|
||||
@ -3692,6 +3728,11 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
|
||||
placeholder: 'Select Customer',
|
||||
dropdownParent: $('#posPaymentModal')
|
||||
});
|
||||
|
||||
// Initial broadcast to sync customer display (theme & empty state)
|
||||
if (typeof cart !== 'undefined' && cart.broadcast) {
|
||||
cart.broadcast();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -17,3 +17,5 @@
|
||||
2026-02-18 13:05:39 - POST: {"settings":{"company_name":"Bahjet Al-Safa Trading","company_phone":"99359472","company_email":"aalabry@gmail.com","vat_number":"OM25418","company_address":"AL Hamra\r\nOman","allow_zero_stock_sell":"0","loyalty_enabled":"0","loyalty_points_per_unit":"1","loyalty_redeem_points_per_unit":"100"},"update_settings":""}
|
||||
2026-02-18 13:06:21 - POST: {"settings":{"company_name":"Bahjet Al-Safa Trading","company_phone":"99359472","company_email":"aalabry@gmail.com","vat_number":"OM25418","company_address":"AL Hamra\r\nOman","allow_zero_stock_sell":"1","loyalty_enabled":"0","loyalty_points_per_unit":"1","loyalty_redeem_points_per_unit":"100"},"update_settings":""}
|
||||
2026-02-18 13:33:14 - POST: {"action":"save_pos_transaction","customer_id":"1","payments":"[{\"method\":\"credit\",\"amount\":1.19}]","total_amount":"1.19","discount_code_id":"","discount_amount":"0","loyalty_redeemed":"0","items":"[{\"id\":1,\"qty\":2,\"price\":0.3825},{\"id\":2,\"qty\":2,\"price\":0.2125}]"}
|
||||
2026-02-18 14:03:07 - POST: {"action":"hold_pos_cart","cart_name":"Cart 6:03:04 PM","items":"[{\"id\":1,\"nameEn\":\"Tomato\",\"nameAr\":\"\u0637\u0645\u0627\u0637\u0645\",\"price\":0.3825,\"stock_quantity\":-17.5,\"qty\":1}]","customer_id":""}
|
||||
2026-02-18 14:03:18 - POST: {"action":"delete_held_cart","id":"9"}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user