225 lines
9.6 KiB
PHP
225 lines
9.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CheersPOS System</title>
|
|
<style>
|
|
body { font-family: sans-serif; margin: 2em; background-color: #f4f4f9; color: #333; }
|
|
h1 { color: #0056b3; }
|
|
nav { margin-bottom: 1em; }
|
|
nav button { padding: 10px 15px; border: none; background-color: #007bff; color: white; cursor: pointer; margin-right: 10px; border-radius: 5px; }
|
|
nav button:hover { background-color: #0056b3; }
|
|
#content { background-color: white; padding: 1em; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
table { width: 100%; border-collapse: collapse; margin-top: 1em; }
|
|
th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; }
|
|
th { background-color: #f2f2f2; }
|
|
.error { color: red; }
|
|
.success { color: green; }
|
|
form div { margin-bottom: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>CheersPOS System</h1>
|
|
|
|
<nav>
|
|
<button onclick="loadProducts()">Products</button>
|
|
<button onclick="loadCustomers()">Customers</button>
|
|
<button onclick="loadEmployees()">Employees</button>
|
|
<button onclick="loadTaxes()">Manage Taxes</button>
|
|
<button onclick="showSaleForm()">Create Sale</button>
|
|
</nav>
|
|
|
|
<div id="content">
|
|
<p>Welcome to the AI Retail Management Solution. Select an option above to get started.</p>
|
|
</div>
|
|
|
|
<script>
|
|
const contentDiv = document.getElementById('content');
|
|
|
|
|
|
|
|
async function loadTaxes() {
|
|
try {
|
|
const response = await fetch('taxes/read.php');
|
|
const taxes = await response.json();
|
|
let html = `
|
|
<h2>Manage Taxes</h2>
|
|
<form id="taxForm" onsubmit="createTax(event)">
|
|
<input type="text" name="name" placeholder="Tax Name" required>
|
|
<input type="number" step="0.01" name="rate" placeholder="Rate (%)" required>
|
|
<button type="submit">Add Tax</button>
|
|
</form>
|
|
<div id="taxResult"></div>
|
|
`;
|
|
if (taxes.length === 0) {
|
|
html += '<p>No taxes found.</p>';
|
|
} else {
|
|
html += '<table><tr><th>ID</th><th>Name</th><th>Rate (%)</th><th>Action</th></tr>';
|
|
taxes.forEach(t => {
|
|
html += `<tr><td>${t.id}</td><td>${t.name}</td><td>${t.rate}</td><td><button onclick="deleteTax(${t.id})">Delete</button></td></tr>`;
|
|
});
|
|
html += '</table>';
|
|
}
|
|
contentDiv.innerHTML = html;
|
|
} catch (error) {
|
|
contentDiv.innerHTML = `<p class="error">Error loading taxes: ${error}</p>`;
|
|
}
|
|
}
|
|
|
|
async function createTax(event) {
|
|
event.preventDefault();
|
|
const form = document.getElementById('taxForm');
|
|
const resultDiv = document.getElementById('taxResult');
|
|
const formData = new FormData(form);
|
|
const taxData = Object.fromEntries(formData.entries());
|
|
|
|
try {
|
|
const response = await fetch('taxes/create.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(taxData)
|
|
});
|
|
const result = await response.json();
|
|
if (response.ok) {
|
|
resultDiv.innerHTML = `<p class="success">${result.success}</p>`;
|
|
loadTaxes(); // Refresh list
|
|
} else {
|
|
resultDiv.innerHTML = `<p class="error">${result.error}</p>`;
|
|
}
|
|
} catch (error) {
|
|
resultDiv.innerHTML = `<p class="error">Error creating tax: ${error}</p>`;
|
|
}
|
|
}
|
|
|
|
async function deleteTax(id) {
|
|
if (!confirm('Are you sure you want to delete this tax?')) return;
|
|
try {
|
|
const response = await fetch(`taxes/delete.php?id=${id}`);
|
|
const result = await response.json();
|
|
if (response.ok) {
|
|
loadTaxes();
|
|
} else {
|
|
alert(result.error);
|
|
}
|
|
} catch (error) {
|
|
alert(`Error deleting tax: ${error}`);
|
|
}
|
|
}
|
|
|
|
async function showSaleForm() {
|
|
let taxCheckboxes = '';
|
|
try {
|
|
const taxResponse = await fetch('taxes/read.php');
|
|
const taxes = await taxResponse.json();
|
|
taxes.forEach(tax => {
|
|
taxCheckboxes += `
|
|
<label>
|
|
<input type="checkbox" name="tax_ids[]" value="${tax.id}">
|
|
${tax.name} (${tax.rate}%)
|
|
</label><br>
|
|
`;
|
|
});
|
|
} catch (e) { taxCheckboxes = '<p class="error">Could not load taxes.</p>'; }
|
|
|
|
contentDiv.innerHTML = `
|
|
<h2>Create Sale</h2>
|
|
<form id="saleForm" onsubmit="createSale(event)">
|
|
<div>
|
|
<label for="customer_id">Customer ID (optional):</label>
|
|
<input type="number" id="customer_id" name="customer_id">
|
|
</div>
|
|
<h3>Items</h3>
|
|
<div id="saleItems">
|
|
<div class="sale-item">
|
|
<input type="number" name="product_id[]" placeholder="Product ID" required>
|
|
<input type="number" name="quantity[]" placeholder="Quantity" required>
|
|
</div>
|
|
</div>
|
|
<button type="button" onclick="addSaleItem()">Add Item</button>
|
|
<h3>Taxes</h3>
|
|
<div id="taxItems">
|
|
${taxCheckboxes}
|
|
</div>
|
|
<button type="submit">Submit Sale</button>
|
|
</form>
|
|
<div id="saleResult"></div>
|
|
`;
|
|
}
|
|
|
|
|
|
async function loadProducts() {
|
|
try {
|
|
const response = await fetch('products/read.php');
|
|
const products = await response.json();
|
|
let html = '<h2>Products</h2>';
|
|
if (products.length === 0) {
|
|
html += '<p>No products found.</p>';
|
|
} else {
|
|
html += '<table><tr><th>ID</th><th>Name</th><th>Description</th><th>Price</th><th>Cost</th><th>Quantity</th></tr>';
|
|
products.forEach(p => {
|
|
html += `<tr><td>${p.id}</td><td>${p.name}</td><td>${p.description}</td><td>${p.price}</td><td>${p.cost}</td><td>${p.quantity}</td></tr>`;
|
|
});
|
|
html += '</table>';
|
|
}
|
|
contentDiv.innerHTML = html;
|
|
} catch (error) {
|
|
contentDiv.innerHTML = `<p class="error">Error loading products: ${error}</p>`;
|
|
}
|
|
}
|
|
|
|
async function loadCustomers() {
|
|
try {
|
|
const response = await fetch('customers/read.php');
|
|
const customers = await response.json();
|
|
let html = '<h2>Customers</h2>';
|
|
if (customers.length === 0) {
|
|
html += '<p>No customers found.</p>';
|
|
} else {
|
|
html += '<table><tr><th>ID</th><th>Name</th><th>Email</th><th>Phone</th><th>Address</th></tr>';
|
|
customers.forEach(c => {
|
|
html += `<tr><td>${c.id}</td><td>${c.first_name} ${c.last_name}</td><td>${c.email}</td><td>${c.phone}</td><td>${c.address}</td></tr>`;
|
|
});
|
|
html += '</table>';
|
|
}
|
|
contentDiv.innerHTML = html;
|
|
} catch (error) {
|
|
contentDiv.innerHTML = `<p class="error">Error loading customers: ${error}</p>`;
|
|
}
|
|
}
|
|
|
|
async function loadEmployees() {
|
|
try {
|
|
const response = await fetch('employees/read.php');
|
|
const employees = await response.json();
|
|
let html = '<h2>Employees</h2>';
|
|
if (employees.length === 0) {
|
|
html += '<p>No employees found.</p>';
|
|
} else {
|
|
html += '<table><tr><th>ID</th><th>Name</th><th>Email</th><th>Phone</th><th>Role</th><th>Hire Date</th></tr>';
|
|
employees.forEach(e => {
|
|
html += `<tr><td>${e.id}</td><td>${e.first_name} ${e.last_name}</td><td>${e.email}</td><td>${e.phone}</td><td>${e.role_name}</td><td>${e.hire_date}</td></tr>`;
|
|
});
|
|
html += '</table>';
|
|
}
|
|
contentDiv.innerHTML = html;
|
|
} catch (error) {
|
|
contentDiv.innerHTML = `<p class="error">Error loading employees: ${error}</p>`;
|
|
}
|
|
}
|
|
function addSaleItem() {
|
|
const saleItems = document.getElementById('saleItems');
|
|
const newItem = document.createElement('div');
|
|
newItem.classList.add('sale-item');
|
|
newItem.innerHTML = '
|
|
<input type="number" name="product_id[]" placeholder="Product ID" required>
|
|
<input type="number" name="quantity[]" placeholder="Quantity" required>
|
|
';
|
|
saleItems.appendChild(newItem);
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |