/** API Connectivity **/ const API_URL = 'api.php'; async function callAPI(action, data = null) { const payload = data ? { action, ...data } : { action }; const options = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }; try { const response = await fetch(`${API_URL}?action=${action}`, options); if (!response.ok) { const text = await response.text(); console.error('API Error:', text); alert('Server Error: ' + response.status + '\n' + text.substring(0, 200)); return null; } const result = await response.json(); console.log('API Result:', result); if (!result.success) { console.error(`API Business Error (${action}):`, result.message); alert('Login Failed: ' + result.message); return null; } return result.data; } catch (error) { console.error(`Fetch/Parse Error (${action}):`, error); alert('Error: ' + error.message + '\nไม่สามารถเชื่อมต่อกับ API ได้ กรุณาตรวจสอบ db.php หรือ Console'); setLoading(false); return null; } } let allPOs = []; let allSuppliers = []; let allProducts = []; let allProjects = []; let costChart = null; let statusChart = null; let inventoryData = []; function showView(viewId, element) { const target = document.getElementById('view-' + viewId); if (!target) return; document.querySelectorAll('.view').forEach(v => v.style.display = 'none'); target.style.display = 'block'; if (element) { document.querySelectorAll('.nav-item-single').forEach(l => l.classList.remove('active')); element.classList.add('active'); } if (viewId === 'dashboard') initDashboard(); if (viewId === 'po-list') loadPOList(); if (viewId === 'inventory') renderInventory(); if (viewId === 'suppliers') loadSuppliers(); if (viewId === 'products') loadProducts(); if (viewId === 'projects') loadProjects(); if (viewId === 'employee-list') loadEmployees(); } function toggleSection(sectionId, headerElement) { const content = document.getElementById(sectionId); content.classList.toggle('collapsed'); headerElement.classList.toggle('collapsed'); } function setLoading(s) { document.getElementById('loader').style.display = s ? 'flex' : 'none'; } async function initDashboard() { const data = await callAPI('getDashboardData'); if (data) { updateDashboardCharts(data); loadPOList(true); } } function updateDashboardCharts(data) { const labels = data.map(d => d.category); const costs = data.map(d => d.cost || 0); const ctxBar = document.getElementById('costChart').getContext('2d'); if (costChart) costChart.destroy(); costChart = new Chart(ctxBar, { type: 'bar', data: { labels: labels, datasets: [{ label: 'Jobs Value', data: costs, backgroundColor: '#42a5f5', borderRadius: 4 }] }, options: { indexAxis: 'y', responsive: true, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { grid: { display: false }, ticks: { font: { size: 10 } } } } } }); } async function loadPOList(isDashboard = false) { const data = await callAPI('getPOList'); if (!data) return; allPOs = data; const recentBody = document.getElementById('recent-po-body'); const fullBody = document.getElementById('full-po-list-body'); const tableHtml = data.map(po => { let statusClass = 'status-in-progress'; if (po.status.includes('Transit')) statusClass = 'status-shipped'; if (po.status.includes('Received')) statusClass = 'status-completed'; if (po.status.includes('Urgent')) statusClass = 'status-urgent'; return ` ${po.po_id} ${new Date(po.issue_date).toLocaleDateString()} ${po.supplier} ${po.project_name} ${po.status.split('. ')[1] || po.status} `; }).join(''); if (isDashboard && recentBody) { recentBody.innerHTML = tableHtml; updateStats(data); } if (fullBody) fullBody.innerHTML = tableHtml; } function updateStats(data) { const total = data.length; const production = data.filter(p => p.status.includes('Production')).length; const transit = data.filter(p => p.status.includes('Transit')).length; const received = data.filter(p => p.status.includes('Received')).length; document.getElementById('stat-total-po').innerText = total; document.getElementById('stat-prod').innerText = production; document.getElementById('stat-transit').innerText = transit; document.getElementById('stat-received').innerText = received; const ctxPie = document.getElementById('statusChart').getContext('2d'); if (statusChart) statusChart.destroy(); statusChart = new Chart(ctxPie, { type: 'doughnut', data: { labels: ['Issued', 'Production', 'Transit', 'Received'], datasets: [{ data: [ data.filter(p => p.status.includes('Issued')).length, production, transit, received ], backgroundColor: ['#007bff', '#ffc107', '#fd7e14', '#28a745'], borderWidth: 2, borderColor: '#ffffff' }] }, options: { cutout: '65%', plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 10 } } } } } }); } async function loadDetail(id) { setLoading(true); const po = allPOs.find(p => p.po_id === id); setLoading(false); if (po) { showView('detail'); document.getElementById('det-po-id').innerText = po.po_id; document.getElementById('det-po-id-title').innerText = `[${po.po_id}] - ${po.supplier}`; document.getElementById('det-supp').innerText = po.supplier; document.getElementById('det-title').innerText = po.project_name; document.getElementById('det-project-name').innerText = po.project_name; document.getElementById('det-sale-owner').innerText = po.sale_owner || '-'; document.getElementById('det-delivery-date').innerText = new Date(po.issue_date).toLocaleDateString(); const milestoneSelect = document.getElementById('upd-milestone'); milestoneSelect.value = po.status; toggleExtraFields(po.status); } } // --- Suppliers --- async function loadSuppliers() { const data = await callAPI('getSuppliers'); if (!data) return; allSuppliers = data; const body = document.getElementById('supplier-table-body'); body.innerHTML = data.map(s => ` ${s.name} ${s.address} ${s.contact_name} ${s.country} ${s.tax_id} ${s.category} ${s.credit_term} ${s.delivery_term} ${s.location} `).join(''); } function editSupplier(id) { const s = allSuppliers.find(x => x.id == id); if (!s) return; const form = document.getElementById('form-supplier'); form.id.value = s.id; form.name.value = s.name; form.country.value = s.country; form.address.value = s.address; form.contact.value = s.contact_name; form.tax_id.value = s.tax_id; form.credit.value = s.credit_term; form.delivery.value = s.delivery_term; form.location.value = s.location; document.getElementById('supplierModalTitle').innerText = 'แก้ไขซัพพลายเออร์'; new bootstrap.Modal(document.getElementById('modalSupplier')).show(); } async function deleteSupplier(id) { if (!confirm('ยืนยันการลบซัพพลายเออร์?')) return; const res = await callAPI('deleteSupplier', { id }); if (res !== null) loadSuppliers(); } document.getElementById('form-supplier').onsubmit = async function(e) { e.preventDefault(); const data = Object.fromEntries(new FormData(this)); const action = data.id ? 'updateSupplier' : 'addSupplier'; const res = await callAPI(action, data); if (res !== null) { bootstrap.Modal.getInstance(document.getElementById('modalSupplier')).hide(); loadSuppliers(); this.reset(); } }; // --- Products --- async function loadProducts() { const data = await callAPI('getInventory'); if (!data) return; allProducts = data; const body = document.getElementById('product-table-body'); body.innerHTML = data.map(p => ` ${p.product_id} ${p.product_name} ${p.currency} ${p.price_unit} ${p.brand} - - ${p.origin} ${p.location} `).join(''); } function editProduct(id) { const p = allProducts.find(x => x.product_id == id); if (!p) return; const form = document.getElementById('form-product'); form.product_id.value = p.product_id; form.product_id.readOnly = true; form.product_name.value = p.product_name; form.brand.value = p.brand; form.unit.value = p.unit; form.price_unit.value = p.price_unit; form.currency.value = p.currency; form.location.value = p.location; document.getElementById('productModalTitle').innerText = 'แก้ไขข้อมูลสินค้า'; new bootstrap.Modal(document.getElementById('modalProduct')).show(); } async function deleteProduct(id) { if (!confirm('ยืนยันการลบสินค้า?')) return; const res = await callAPI('deleteProduct', { product_id: id }); if (res !== null) loadProducts(); } document.getElementById('form-product').onsubmit = async function(e) { e.preventDefault(); const data = Object.fromEntries(new FormData(this)); const action = this.product_id.readOnly ? 'updateProduct' : 'addProduct'; const res = await callAPI(action, data); if (res !== null) { bootstrap.Modal.getInstance(document.getElementById('modalProduct')).hide(); loadProducts(); this.reset(); this.product_id.readOnly = false; } }; // --- Projects --- async function loadProjects() { const data = await callAPI('getProjects'); if (!data) return; allProjects = data; const body = document.getElementById('project-table-body'); body.innerHTML = data.map(p => ` ${p.project_id} ${p.project_name} ${p.address} ${new Date(p.start_date).toLocaleDateString()} ${new Date(p.end_date).toLocaleDateString()} ${p.sale_owner} ${p.pm_owner} ${p.technician_team} `).join(''); } function editProject(id) { const p = allProjects.find(x => x.project_id == id); if (!p) return; const form = document.getElementById('form-project-modal'); form.project_id.value = p.project_id; form.project_id.readOnly = true; form.project_name.value = p.project_name; form.address.value = p.address; form.start_date.value = p.start_date; form.end_date.value = p.end_date; form.sale_owner.value = p.sale_owner; form.pm_owner.value = p.pm_owner; form.technician_team.value = p.technician_team; document.getElementById('projectModalTitle').innerText = 'แก้ไขข้อมูลโครงการ'; new bootstrap.Modal(document.getElementById('modalProject')).show(); } async function deleteProject(id) { if (!confirm('ยืนยันการลบโครงการ?')) return; const res = await callAPI('deleteProject', { project_id: id }); if (res !== null) loadProjects(); } document.getElementById('form-project-modal').onsubmit = async function(e) { e.preventDefault(); const data = Object.fromEntries(new FormData(this)); const action = this.project_id.readOnly ? 'updateProject' : 'addProject'; const res = await callAPI(action, data); if (res !== null) { bootstrap.Modal.getInstance(document.getElementById('modalProject')).hide(); loadProjects(); this.reset(); this.project_id.readOnly = false; } }; // --- Employees --- async function loadEmployees() { const data = await callAPI('getEmployees'); if (!data) return; const tableBody = document.getElementById('employee-table-body'); tableBody.innerHTML = data.map((emp, idx) => ` ${idx + 1} ${emp.name} ${emp.phone} ${emp.email} ${emp.brand_focus} ${new Date(emp.start_date).toLocaleDateString()} `).join(''); } async function deleteEmployee(id) { if (!confirm('ยืนยันการลบพนักงาน?')) return; const res = await callAPI('deleteEmployee', { id }); if (res !== null) loadEmployees(); } // --- Inventory Rendering --- async function renderInventory(filter = '') { const data = await callAPI('getInventory'); if (!data) return; inventoryData = data; const body = document.getElementById('inventory-table-body'); const filtered = inventoryData.filter(p => p.product_id.toLowerCase().includes(filter) || p.product_name.toLowerCase().includes(filter) || p.brand.toLowerCase().includes(filter) ); body.innerHTML = filtered.map((p, idx) => ` ${idx + 1} ${p.product_id} ${p.product_name} ${p.brand} ${p.unit} ${p.initial_stock} ${p.in} ${p.out} ${parseInt(p.initial_stock) + parseInt(p.in) - parseInt(p.out)} `).join(''); } // Form Submissions for Stock document.getElementById('form-stock-in').onsubmit = async function (e) { e.preventDefault(); const date = this.querySelector('input[type="date"]').value; const productId = this.querySelector('select').value.split(' (')[0]; const qty = parseInt(this.querySelector('input[type="number"]').value); const ref = document.getElementById('stock-in-ref').value; const note = document.getElementById('stock-in-note').value; const res = await callAPI('addTransaction', { date, type: "IN", product: productId, qty, ref, note }); if (res !== null) { bootstrap.Modal.getInstance(document.getElementById('modalStockIn')).hide(); this.reset(); renderInventory(); } }; document.getElementById('form-stock-out').onsubmit = async function (e) { e.preventDefault(); const date = this.querySelector('input[type="date"]').value; const productId = this.querySelector('select').value.split(' (')[0]; const qty = parseInt(this.querySelector('input[type="number"]').value); const ref = document.getElementById('stock-out-ref').value; const note = document.getElementById('stock-out-note').value; const res = await callAPI('addTransaction', { date, type: "OUT", product: productId, qty, ref, note }); if (res !== null) { bootstrap.Modal.getInstance(document.getElementById('modalStockOut')).hide(); this.reset(); renderInventory(); } }; // PO Form document.getElementById('form-po').onsubmit = async function (e) { e.preventDefault(); setLoading(true); const data = Object.fromEntries(new FormData(this)); const res = await callAPI('createPO', data); if (res !== null) { this.reset(); loadPOList(); showView('po-list'); } setLoading(false); }; async function deletePO(id) { if (!confirm('ยืนยันการลบ PO?')) return; const res = await callAPI('deletePO', { po_id: id }); if (res !== null) loadPOList(); } // Update PO Status in Detail View async function updatePOStatus() { const po_id = document.getElementById('det-po-id').innerText; const status = document.getElementById('upd-milestone').value; // In a real system, we'd collect other fields too const res = await callAPI('updatePO', { po_id, status, cost: 0, project_name: document.getElementById('det-project-name').innerText }); if (res !== null) { alert('อัปเดตสถานะสำเร็จ'); loadPOList(); } } async function handleLogin(event) { if (event) event.preventDefault(); const username = document.getElementById('login-user').value; const password = document.getElementById('login-pass').value; console.log('Attempting login for:', username); const res = await callAPI('login', { username, password }); if (res) { console.log('Login success:', res); localStorage.setItem('isLoggedIn', 'true'); localStorage.setItem('username', res.username); document.getElementById('login-overlay').style.display = 'none'; showView('dashboard', document.querySelector('.nav-item-single.active')); } else { console.log('Login failed'); alert('ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง'); } } async function handleAddEmployee(event) { event.preventDefault(); const data = Object.fromEntries(new FormData(event.target)); const res = await callAPI('addEmployee', data); if (res !== null) { event.target.reset(); bootstrap.Modal.getInstance(document.getElementById('addEmployeeModal')).hide(); loadEmployees(); } } function handleLogout() { localStorage.removeItem('isLoggedIn'); localStorage.removeItem('username'); document.getElementById('login-overlay').style.display = 'flex'; } window.onload = () => { if (localStorage.getItem('isLoggedIn') === 'true') { document.getElementById('login-overlay').style.display = 'none'; showView('dashboard', document.querySelector('.nav-item-single.active')); } };