826 lines
30 KiB
JavaScript
826 lines
30 KiB
JavaScript
// Global state
|
||
let customers = [];
|
||
let quotes = [];
|
||
let invoices = [];
|
||
let currentQuoteId = null;
|
||
let currentInvoiceId = null;
|
||
let currentCustomerId = null;
|
||
let itemCounter = 0;
|
||
let currentLogoFile = null;
|
||
|
||
// Initialize app
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
loadCustomers();
|
||
loadQuotes();
|
||
loadInvoices();
|
||
setDefaultDate();
|
||
checkCurrentLogo();
|
||
|
||
// Setup form handlers
|
||
document.getElementById('customer-form').addEventListener('submit', handleCustomerSubmit);
|
||
document.getElementById('quote-form').addEventListener('submit', handleQuoteSubmit);
|
||
document.getElementById('invoice-form').addEventListener('submit', handleInvoiceSubmit);
|
||
document.getElementById('quote-tax-exempt').addEventListener('change', updateQuoteTotals);
|
||
document.getElementById('invoice-tax-exempt').addEventListener('change', updateInvoiceTotals);
|
||
|
||
// Setup logo upload handler
|
||
document.getElementById('logo-upload').addEventListener('change', (e) => {
|
||
const file = e.target.files[0];
|
||
if (file) {
|
||
currentLogoFile = file;
|
||
document.getElementById('logo-filename').textContent = file.name;
|
||
document.getElementById('upload-btn').disabled = false;
|
||
}
|
||
});
|
||
});
|
||
|
||
// Tab Management
|
||
function showTab(tabName) {
|
||
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
|
||
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('bg-blue-800'));
|
||
|
||
document.getElementById(`${tabName}-tab`).classList.remove('hidden');
|
||
document.getElementById(`tab-${tabName}`).classList.add('bg-blue-800');
|
||
|
||
if (tabName === 'quotes') {
|
||
loadQuotes();
|
||
} else if (tabName === 'invoices') {
|
||
loadInvoices();
|
||
} else if (tabName === 'customers') {
|
||
loadCustomers();
|
||
} else if (tabName === 'settings') {
|
||
checkCurrentLogo();
|
||
}
|
||
}
|
||
|
||
// Date helper
|
||
function setDefaultDate() {
|
||
const today = new Date().toISOString().split('T')[0];
|
||
const quoteDateEl = document.getElementById('quote-date');
|
||
const invoiceDateEl = document.getElementById('invoice-date');
|
||
if (quoteDateEl) quoteDateEl.value = today;
|
||
if (invoiceDateEl) invoiceDateEl.value = today;
|
||
}
|
||
|
||
function formatDate(date) {
|
||
const d = new Date(date);
|
||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||
const day = String(d.getDate()).padStart(2, '0');
|
||
const year = d.getFullYear();
|
||
return `${month}/${day}/${year}`;
|
||
}
|
||
|
||
// Logo Management
|
||
async function checkCurrentLogo() {
|
||
try {
|
||
const response = await fetch('/api/logo-info');
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
if (data.hasLogo) {
|
||
document.getElementById('logo-preview').classList.remove('hidden');
|
||
document.getElementById('logo-image').src = data.logoPath + '?t=' + Date.now();
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Error checking logo:', error);
|
||
}
|
||
}
|
||
|
||
async function uploadLogo() {
|
||
if (!currentLogoFile) {
|
||
alert('Please select a file first');
|
||
return;
|
||
}
|
||
|
||
const formData = new FormData();
|
||
formData.append('logo', currentLogoFile);
|
||
|
||
const statusDiv = document.getElementById('upload-status');
|
||
statusDiv.innerHTML = '<p class="text-blue-600">Uploading...</p>';
|
||
|
||
try {
|
||
const response = await fetch('/api/upload-logo', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
statusDiv.innerHTML = '<p class="text-green-600">✓ Logo uploaded successfully!</p>';
|
||
document.getElementById('logo-preview').classList.remove('hidden');
|
||
document.getElementById('logo-image').src = data.path + '?t=' + Date.now();
|
||
document.getElementById('upload-btn').disabled = true;
|
||
currentLogoFile = null;
|
||
document.getElementById('logo-filename').textContent = '';
|
||
document.getElementById('logo-upload').value = '';
|
||
} else {
|
||
const error = await response.json();
|
||
statusDiv.innerHTML = `<p class="text-red-600">✗ Error: ${error.error}</p>`;
|
||
}
|
||
} catch (error) {
|
||
console.error('Upload error:', error);
|
||
statusDiv.innerHTML = '<p class="text-red-600">✗ Upload failed</p>';
|
||
}
|
||
}
|
||
|
||
// Customer Management
|
||
async function loadCustomers() {
|
||
try {
|
||
const response = await fetch('/api/customers');
|
||
customers = await response.json();
|
||
renderCustomers();
|
||
updateCustomerDropdown();
|
||
} catch (error) {
|
||
console.error('Error loading customers:', error);
|
||
alert('Error loading customers');
|
||
}
|
||
}
|
||
|
||
function renderCustomers() {
|
||
const tbody = document.getElementById('customers-list');
|
||
tbody.innerHTML = customers.map(customer => `
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${customer.name}</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">${customer.street}, ${customer.city}, ${customer.state} ${customer.zip_code}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${customer.account_number || '-'}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
|
||
<button onclick="editCustomer(${customer.id})" class="text-blue-600 hover:text-blue-900">Edit</button>
|
||
<button onclick="deleteCustomer(${customer.id})" class="text-red-600 hover:text-red-900">Delete</button>
|
||
</td>
|
||
</tr>
|
||
`).join('');
|
||
}
|
||
|
||
function updateCustomerDropdown() {
|
||
const quoteSelect = document.getElementById('quote-customer');
|
||
const invoiceSelect = document.getElementById('invoice-customer');
|
||
|
||
const options = '<option value="">Select Customer...</option>' +
|
||
customers.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
|
||
|
||
if (quoteSelect) quoteSelect.innerHTML = options;
|
||
if (invoiceSelect) invoiceSelect.innerHTML = options;
|
||
}
|
||
|
||
function openCustomerModal(customerId = null) {
|
||
currentCustomerId = customerId;
|
||
const modal = document.getElementById('customer-modal');
|
||
const title = document.getElementById('customer-modal-title');
|
||
|
||
if (customerId) {
|
||
title.textContent = 'Edit Customer';
|
||
const customer = customers.find(c => c.id === customerId);
|
||
document.getElementById('customer-id').value = customer.id;
|
||
document.getElementById('customer-name').value = customer.name;
|
||
document.getElementById('customer-street').value = customer.street;
|
||
document.getElementById('customer-city').value = customer.city;
|
||
document.getElementById('customer-state').value = customer.state;
|
||
document.getElementById('customer-zip').value = customer.zip_code;
|
||
document.getElementById('customer-account').value = customer.account_number || '';
|
||
} else {
|
||
title.textContent = 'New Customer';
|
||
document.getElementById('customer-form').reset();
|
||
document.getElementById('customer-id').value = '';
|
||
}
|
||
|
||
modal.classList.add('active');
|
||
}
|
||
|
||
function closeCustomerModal() {
|
||
document.getElementById('customer-modal').classList.remove('active');
|
||
currentCustomerId = null;
|
||
}
|
||
|
||
async function handleCustomerSubmit(e) {
|
||
e.preventDefault();
|
||
|
||
const data = {
|
||
name: document.getElementById('customer-name').value,
|
||
street: document.getElementById('customer-street').value,
|
||
city: document.getElementById('customer-city').value,
|
||
state: document.getElementById('customer-state').value.toUpperCase(),
|
||
zip_code: document.getElementById('customer-zip').value,
|
||
account_number: document.getElementById('customer-account').value
|
||
};
|
||
|
||
try {
|
||
const customerId = document.getElementById('customer-id').value;
|
||
const url = customerId ? `/api/customers/${customerId}` : '/api/customers';
|
||
const method = customerId ? 'PUT' : 'POST';
|
||
|
||
const response = await fetch(url, {
|
||
method,
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
if (response.ok) {
|
||
closeCustomerModal();
|
||
loadCustomers();
|
||
} else {
|
||
alert('Error saving customer');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
alert('Error saving customer');
|
||
}
|
||
}
|
||
|
||
async function editCustomer(id) {
|
||
openCustomerModal(id);
|
||
}
|
||
|
||
async function deleteCustomer(id) {
|
||
if (!confirm('Are you sure you want to delete this customer?')) return;
|
||
|
||
try {
|
||
const response = await fetch(`/api/customers/${id}`, { method: 'DELETE' });
|
||
if (response.ok) {
|
||
loadCustomers();
|
||
} else {
|
||
alert('Error deleting customer');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
alert('Error deleting customer');
|
||
}
|
||
}
|
||
|
||
// Quote Management
|
||
async function loadQuotes() {
|
||
try {
|
||
const response = await fetch('/api/quotes');
|
||
quotes = await response.json();
|
||
renderQuotes();
|
||
} catch (error) {
|
||
console.error('Error loading quotes:', error);
|
||
alert('Error loading quotes');
|
||
}
|
||
}
|
||
|
||
function renderQuotes() {
|
||
const tbody = document.getElementById('quotes-list');
|
||
tbody.innerHTML = quotes.map(quote => {
|
||
const total = quote.has_tbd ? `$${parseFloat(quote.total).toFixed(2)}*` : `$${parseFloat(quote.total).toFixed(2)}`;
|
||
return `
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${quote.quote_number}</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">${quote.customer_name || 'N/A'}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatDate(quote.quote_date)}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-semibold">${total}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
|
||
<button onclick="viewQuotePDF(${quote.id})" class="text-green-600 hover:text-green-900">PDF</button>
|
||
<button onclick="convertQuoteToInvoice(${quote.id})" class="text-purple-600 hover:text-purple-900">→ Invoice</button>
|
||
<button onclick="editQuote(${quote.id})" class="text-blue-600 hover:text-blue-900">Edit</button>
|
||
<button onclick="deleteQuote(${quote.id})" class="text-red-600 hover:text-red-900">Delete</button>
|
||
</td>
|
||
</tr>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
async function openQuoteModal(quoteId = null) {
|
||
currentQuoteId = quoteId;
|
||
const modal = document.getElementById('quote-modal');
|
||
const title = document.getElementById('quote-modal-title');
|
||
|
||
if (quoteId) {
|
||
title.textContent = 'Edit Quote';
|
||
const response = await fetch(`/api/quotes/${quoteId}`);
|
||
const data = await response.json();
|
||
|
||
document.getElementById('quote-customer').value = data.quote.customer_id;
|
||
const dateOnly = data.quote.quote_date.split('T')[0];
|
||
document.getElementById('quote-date').value = dateOnly;
|
||
document.getElementById('quote-tax-exempt').checked = data.quote.tax_exempt;
|
||
|
||
// Load items
|
||
document.getElementById('quote-items').innerHTML = '';
|
||
itemCounter = 0;
|
||
data.items.forEach(item => {
|
||
addQuoteItem(item);
|
||
});
|
||
|
||
updateQuoteTotals();
|
||
} else {
|
||
title.textContent = 'New Quote';
|
||
document.getElementById('quote-form').reset();
|
||
document.getElementById('quote-items').innerHTML = '';
|
||
itemCounter = 0;
|
||
setDefaultDate();
|
||
|
||
// Add one default item
|
||
addQuoteItem();
|
||
}
|
||
|
||
modal.classList.add('active');
|
||
}
|
||
|
||
function closeQuoteModal() {
|
||
document.getElementById('quote-modal').classList.remove('active');
|
||
currentQuoteId = null;
|
||
}
|
||
|
||
function addQuoteItem(item = null) {
|
||
const itemId = itemCounter++;
|
||
const itemsDiv = document.getElementById('quote-items');
|
||
|
||
const itemDiv = document.createElement('div');
|
||
itemDiv.className = 'grid grid-cols-12 gap-3 items-start mb-3';
|
||
itemDiv.id = `quote-item-${itemId}`;
|
||
|
||
itemDiv.innerHTML = `
|
||
<div class="col-span-1">
|
||
<label class="block text-xs font-medium text-gray-700 mb-1">Qty</label>
|
||
<input type="text" data-item="${itemId}" data-field="quantity"
|
||
value="${item ? item.quantity : ''}"
|
||
class="quote-item-input w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
|
||
</div>
|
||
<div class="col-span-5">
|
||
<label class="block text-xs font-medium text-gray-700 mb-1">Description</label>
|
||
<div data-item="${itemId}" data-field="description"
|
||
class="quote-item-description-editor border border-gray-300 rounded-md bg-white"
|
||
style="min-height: 60px;">
|
||
</div>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<label class="block text-xs font-medium text-gray-700 mb-1">Rate</label>
|
||
<input type="text" data-item="${itemId}" data-field="rate"
|
||
value="${item ? item.rate : ''}"
|
||
class="quote-item-input w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
|
||
</div>
|
||
<div class="col-span-2">
|
||
<label class="block text-xs font-medium text-gray-700 mb-1">Amount</label>
|
||
<input type="text" data-item="${itemId}" data-field="amount"
|
||
value="${item ? item.amount : ''}"
|
||
class="quote-item-amount w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
|
||
</div>
|
||
<div class="col-span-1 flex items-end">
|
||
<button type="button" onclick="removeQuoteItem(${itemId})"
|
||
class="w-full px-2 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md text-sm">
|
||
×
|
||
</button>
|
||
</div>
|
||
`;
|
||
|
||
itemsDiv.appendChild(itemDiv);
|
||
|
||
// Initialize Quill editor
|
||
const editorDiv = itemDiv.querySelector('.quote-item-description-editor');
|
||
const quill = new Quill(editorDiv, {
|
||
theme: 'snow',
|
||
modules: {
|
||
toolbar: [
|
||
['bold', 'italic', 'underline'],
|
||
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||
['clean']
|
||
]
|
||
}
|
||
});
|
||
|
||
if (item && item.description) {
|
||
quill.root.innerHTML = item.description;
|
||
}
|
||
|
||
quill.on('text-change', () => {
|
||
updateQuoteTotals();
|
||
});
|
||
|
||
editorDiv.quillInstance = quill;
|
||
|
||
// Auto-calculate amount
|
||
const qtyInput = itemDiv.querySelector('[data-field="quantity"]');
|
||
const rateInput = itemDiv.querySelector('[data-field="rate"]');
|
||
const amountInput = itemDiv.querySelector('[data-field="amount"]');
|
||
|
||
const calculateAmount = () => {
|
||
if (qtyInput.value && rateInput.value && rateInput.value.toUpperCase() !== 'TBD') {
|
||
const qty = parseFloat(qtyInput.value) || 0;
|
||
const rateValue = parseFloat(rateInput.value.replace(/[^0-9.]/g, '')) || 0;
|
||
amountInput.value = (qty * rateValue).toFixed(2);
|
||
}
|
||
updateQuoteTotals();
|
||
};
|
||
|
||
qtyInput.addEventListener('input', calculateAmount);
|
||
rateInput.addEventListener('input', calculateAmount);
|
||
amountInput.addEventListener('input', updateQuoteTotals);
|
||
|
||
updateQuoteTotals();
|
||
}
|
||
|
||
function removeQuoteItem(itemId) {
|
||
document.getElementById(`quote-item-${itemId}`).remove();
|
||
updateQuoteTotals();
|
||
}
|
||
|
||
function updateQuoteTotals() {
|
||
const items = getQuoteItems();
|
||
const taxExempt = document.getElementById('quote-tax-exempt').checked;
|
||
|
||
let subtotal = 0;
|
||
let hasTbd = false;
|
||
|
||
items.forEach(item => {
|
||
if (item.rate.toUpperCase() === 'TBD' || item.amount.toUpperCase() === 'TBD') {
|
||
hasTbd = true;
|
||
} else {
|
||
const amount = parseFloat(item.amount.replace(/[$,]/g, '')) || 0;
|
||
subtotal += amount;
|
||
}
|
||
});
|
||
|
||
const taxAmount = taxExempt ? 0 : (subtotal * 8.25 / 100);
|
||
const total = subtotal + taxAmount;
|
||
|
||
document.getElementById('quote-subtotal').textContent = `$${subtotal.toFixed(2)}`;
|
||
document.getElementById('quote-tax').textContent = taxExempt ? '$0.00' : `$${taxAmount.toFixed(2)}`;
|
||
document.getElementById('quote-total').textContent = hasTbd ? `$${total.toFixed(2)}*` : `$${total.toFixed(2)}`;
|
||
|
||
document.getElementById('quote-tax-row').style.display = taxExempt ? 'none' : 'block';
|
||
}
|
||
|
||
function getQuoteItems() {
|
||
const items = [];
|
||
const itemDivs = document.querySelectorAll('#quote-items > div');
|
||
|
||
itemDivs.forEach(div => {
|
||
const descEditor = div.querySelector('.quote-item-description-editor');
|
||
const descriptionHTML = descEditor && descEditor.quillInstance
|
||
? descEditor.quillInstance.root.innerHTML
|
||
: '';
|
||
|
||
const item = {
|
||
quantity: div.querySelector('[data-field="quantity"]').value,
|
||
description: descriptionHTML,
|
||
rate: div.querySelector('[data-field="rate"]').value,
|
||
amount: div.querySelector('[data-field="amount"]').value
|
||
};
|
||
items.push(item);
|
||
});
|
||
|
||
return items;
|
||
}
|
||
|
||
async function handleQuoteSubmit(e) {
|
||
e.preventDefault();
|
||
|
||
const items = getQuoteItems();
|
||
|
||
if (items.length === 0) {
|
||
alert('Please add at least one item');
|
||
return;
|
||
}
|
||
|
||
const data = {
|
||
customer_id: parseInt(document.getElementById('quote-customer').value),
|
||
quote_date: document.getElementById('quote-date').value,
|
||
tax_exempt: document.getElementById('quote-tax-exempt').checked,
|
||
items: items
|
||
};
|
||
|
||
try {
|
||
const url = currentQuoteId ? `/api/quotes/${currentQuoteId}` : '/api/quotes';
|
||
const method = currentQuoteId ? 'PUT' : 'POST';
|
||
|
||
const response = await fetch(url, {
|
||
method,
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
if (response.ok) {
|
||
closeQuoteModal();
|
||
loadQuotes();
|
||
} else {
|
||
alert('Error saving quote');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
alert('Error saving quote');
|
||
}
|
||
}
|
||
|
||
async function editQuote(id) {
|
||
await openQuoteModal(id);
|
||
}
|
||
|
||
async function deleteQuote(id) {
|
||
if (!confirm('Are you sure you want to delete this quote?')) return;
|
||
|
||
try {
|
||
const response = await fetch(`/api/quotes/${id}`, { method: 'DELETE' });
|
||
if (response.ok) {
|
||
loadQuotes();
|
||
} else {
|
||
alert('Error deleting quote');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
alert('Error deleting quote');
|
||
}
|
||
}
|
||
|
||
function viewQuotePDF(id) {
|
||
window.open(`/api/quotes/${id}/pdf`, '_blank');
|
||
}
|
||
|
||
async function convertQuoteToInvoice(quoteId) {
|
||
if (!confirm('Convert this quote to an invoice?')) return;
|
||
|
||
try {
|
||
const response = await fetch(`/api/quotes/${quoteId}/convert-to-invoice`, {
|
||
method: 'POST'
|
||
});
|
||
|
||
if (response.ok) {
|
||
const invoice = await response.json();
|
||
alert(`Invoice ${invoice.invoice_number} created successfully!`);
|
||
loadInvoices();
|
||
showTab('invoices');
|
||
} else {
|
||
const error = await response.json();
|
||
alert(error.error || 'Error converting quote to invoice');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
alert('Error converting quote to invoice');
|
||
}
|
||
}
|
||
|
||
// Invoice Management
|
||
async function loadInvoices() {
|
||
try {
|
||
const response = await fetch('/api/invoices');
|
||
invoices = await response.json();
|
||
renderInvoices();
|
||
} catch (error) {
|
||
console.error('Error loading invoices:', error);
|
||
alert('Error loading invoices');
|
||
}
|
||
}
|
||
|
||
function renderInvoices() {
|
||
const tbody = document.getElementById('invoices-list');
|
||
tbody.innerHTML = invoices.map(invoice => `
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${invoice.invoice_number}</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">${invoice.customer_name || 'N/A'}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatDate(invoice.invoice_date)}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${invoice.terms}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-semibold">$${parseFloat(invoice.total).toFixed(2)}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
|
||
<button onclick="viewInvoicePDF(${invoice.id})" class="text-green-600 hover:text-green-900">PDF</button>
|
||
<button onclick="editInvoice(${invoice.id})" class="text-blue-600 hover:text-blue-900">Edit</button>
|
||
<button onclick="deleteInvoice(${invoice.id})" class="text-red-600 hover:text-red-900">Delete</button>
|
||
</td>
|
||
</tr>
|
||
`).join('');
|
||
}
|
||
|
||
async function openInvoiceModal(invoiceId = null) {
|
||
currentInvoiceId = invoiceId;
|
||
const modal = document.getElementById('invoice-modal');
|
||
const title = document.getElementById('invoice-modal-title');
|
||
|
||
if (invoiceId) {
|
||
title.textContent = 'Edit Invoice';
|
||
const response = await fetch(`/api/invoices/${invoiceId}`);
|
||
const data = await response.json();
|
||
|
||
document.getElementById('invoice-customer').value = data.invoice.customer_id;
|
||
const dateOnly = data.invoice.invoice_date.split('T')[0];
|
||
document.getElementById('invoice-date').value = dateOnly;
|
||
document.getElementById('invoice-terms').value = data.invoice.terms;
|
||
document.getElementById('invoice-authorization').value = data.invoice.auth_code || '';
|
||
document.getElementById('invoice-tax-exempt').checked = data.invoice.tax_exempt;
|
||
|
||
// Load items
|
||
document.getElementById('invoice-items').innerHTML = '';
|
||
itemCounter = 0;
|
||
data.items.forEach(item => {
|
||
addInvoiceItem(item);
|
||
});
|
||
|
||
updateInvoiceTotals();
|
||
} else {
|
||
title.textContent = 'New Invoice';
|
||
document.getElementById('invoice-form').reset();
|
||
document.getElementById('invoice-items').innerHTML = '';
|
||
document.getElementById('invoice-terms').value = 'Net 30';
|
||
itemCounter = 0;
|
||
setDefaultDate();
|
||
|
||
// Add one default item
|
||
addInvoiceItem();
|
||
}
|
||
|
||
modal.classList.add('active');
|
||
}
|
||
|
||
function closeInvoiceModal() {
|
||
document.getElementById('invoice-modal').classList.remove('active');
|
||
currentInvoiceId = null;
|
||
}
|
||
|
||
function addInvoiceItem(item = null) {
|
||
const itemId = itemCounter++;
|
||
const itemsDiv = document.getElementById('invoice-items');
|
||
|
||
const itemDiv = document.createElement('div');
|
||
itemDiv.className = 'grid grid-cols-12 gap-3 items-start mb-3';
|
||
itemDiv.id = `invoice-item-${itemId}`;
|
||
|
||
itemDiv.innerHTML = `
|
||
<div class="col-span-1">
|
||
<label class="block text-xs font-medium text-gray-700 mb-1">Qty</label>
|
||
<input type="text" data-item="${itemId}" data-field="quantity"
|
||
value="${item ? item.quantity : ''}"
|
||
class="invoice-item-input w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
|
||
</div>
|
||
<div class="col-span-5">
|
||
<label class="block text-xs font-medium text-gray-700 mb-1">Description</label>
|
||
<div data-item="${itemId}" data-field="description"
|
||
class="invoice-item-description-editor border border-gray-300 rounded-md bg-white"
|
||
style="min-height: 60px;">
|
||
</div>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<label class="block text-xs font-medium text-gray-700 mb-1">Rate</label>
|
||
<input type="text" data-item="${itemId}" data-field="rate"
|
||
value="${item ? item.rate : ''}"
|
||
class="invoice-item-input w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
|
||
</div>
|
||
<div class="col-span-2">
|
||
<label class="block text-xs font-medium text-gray-700 mb-1">Amount</label>
|
||
<input type="text" data-item="${itemId}" data-field="amount"
|
||
value="${item ? item.amount : ''}"
|
||
class="invoice-item-amount w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
|
||
</div>
|
||
<div class="col-span-1 flex items-end">
|
||
<button type="button" onclick="removeInvoiceItem(${itemId})"
|
||
class="w-full px-2 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md text-sm">
|
||
×
|
||
</button>
|
||
</div>
|
||
`;
|
||
|
||
itemsDiv.appendChild(itemDiv);
|
||
|
||
// Initialize Quill editor
|
||
const editorDiv = itemDiv.querySelector('.invoice-item-description-editor');
|
||
const quill = new Quill(editorDiv, {
|
||
theme: 'snow',
|
||
modules: {
|
||
toolbar: [
|
||
['bold', 'italic', 'underline'],
|
||
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||
['clean']
|
||
]
|
||
}
|
||
});
|
||
|
||
if (item && item.description) {
|
||
quill.root.innerHTML = item.description;
|
||
}
|
||
|
||
quill.on('text-change', () => {
|
||
updateInvoiceTotals();
|
||
});
|
||
|
||
editorDiv.quillInstance = quill;
|
||
|
||
// Auto-calculate amount
|
||
const qtyInput = itemDiv.querySelector('[data-field="quantity"]');
|
||
const rateInput = itemDiv.querySelector('[data-field="rate"]');
|
||
const amountInput = itemDiv.querySelector('[data-field="amount"]');
|
||
|
||
const calculateAmount = () => {
|
||
if (qtyInput.value && rateInput.value) {
|
||
const qty = parseFloat(qtyInput.value) || 0;
|
||
const rateValue = parseFloat(rateInput.value.replace(/[^0-9.]/g, '')) || 0;
|
||
amountInput.value = (qty * rateValue).toFixed(2);
|
||
}
|
||
updateInvoiceTotals();
|
||
};
|
||
|
||
qtyInput.addEventListener('input', calculateAmount);
|
||
rateInput.addEventListener('input', calculateAmount);
|
||
amountInput.addEventListener('input', updateInvoiceTotals);
|
||
|
||
updateInvoiceTotals();
|
||
}
|
||
|
||
function removeInvoiceItem(itemId) {
|
||
document.getElementById(`invoice-item-${itemId}`).remove();
|
||
updateInvoiceTotals();
|
||
}
|
||
|
||
function updateInvoiceTotals() {
|
||
const items = getInvoiceItems();
|
||
const taxExempt = document.getElementById('invoice-tax-exempt').checked;
|
||
|
||
let subtotal = 0;
|
||
|
||
items.forEach(item => {
|
||
const amount = parseFloat(item.amount.replace(/[$,]/g, '')) || 0;
|
||
subtotal += amount;
|
||
});
|
||
|
||
const taxAmount = taxExempt ? 0 : (subtotal * 8.25 / 100);
|
||
const total = subtotal + taxAmount;
|
||
|
||
document.getElementById('invoice-subtotal').textContent = `$${subtotal.toFixed(2)}`;
|
||
document.getElementById('invoice-tax').textContent = taxExempt ? '$0.00' : `$${taxAmount.toFixed(2)}`;
|
||
document.getElementById('invoice-total').textContent = `$${total.toFixed(2)}`;
|
||
|
||
document.getElementById('invoice-tax-row').style.display = taxExempt ? 'none' : 'block';
|
||
}
|
||
|
||
function getInvoiceItems() {
|
||
const items = [];
|
||
const itemDivs = document.querySelectorAll('#invoice-items > div');
|
||
|
||
itemDivs.forEach(div => {
|
||
const descEditor = div.querySelector('.invoice-item-description-editor');
|
||
const descriptionHTML = descEditor && descEditor.quillInstance
|
||
? descEditor.quillInstance.root.innerHTML
|
||
: '';
|
||
|
||
const item = {
|
||
quantity: div.querySelector('[data-field="quantity"]').value,
|
||
description: descriptionHTML,
|
||
rate: div.querySelector('[data-field="rate"]').value,
|
||
amount: div.querySelector('[data-field="amount"]').value
|
||
};
|
||
items.push(item);
|
||
});
|
||
|
||
return items;
|
||
}
|
||
|
||
async function handleInvoiceSubmit(e) {
|
||
e.preventDefault();
|
||
|
||
const items = getInvoiceItems();
|
||
|
||
if (items.length === 0) {
|
||
alert('Please add at least one item');
|
||
return;
|
||
}
|
||
|
||
const data = {
|
||
customer_id: parseInt(document.getElementById('invoice-customer').value),
|
||
invoice_date: document.getElementById('invoice-date').value,
|
||
terms: document.getElementById('invoice-terms').value,
|
||
auth_code: document.getElementById('invoice-authorization').value,
|
||
tax_exempt: document.getElementById('invoice-tax-exempt').checked,
|
||
items: items
|
||
};
|
||
|
||
try {
|
||
const url = currentInvoiceId ? `/api/invoices/${currentInvoiceId}` : '/api/invoices';
|
||
const method = currentInvoiceId ? 'PUT' : 'POST';
|
||
|
||
const response = await fetch(url, {
|
||
method,
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
if (response.ok) {
|
||
closeInvoiceModal();
|
||
loadInvoices();
|
||
} else {
|
||
alert('Error saving invoice');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
alert('Error saving invoice');
|
||
}
|
||
}
|
||
|
||
async function editInvoice(id) {
|
||
await openInvoiceModal(id);
|
||
}
|
||
|
||
async function deleteInvoice(id) {
|
||
if (!confirm('Are you sure you want to delete this invoice?')) return;
|
||
|
||
try {
|
||
const response = await fetch(`/api/invoices/${id}`, { method: 'DELETE' });
|
||
if (response.ok) {
|
||
loadInvoices();
|
||
} else {
|
||
alert('Error deleting invoice');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
alert('Error deleting invoice');
|
||
}
|
||
}
|
||
|
||
function viewInvoicePDF(id) {
|
||
window.open(`/api/invoices/${id}/pdf`, '_blank');
|
||
}
|