// ── Document type field toggling ──────────────────────────────
const FIELD_GROUPS = {
invoice: ['invoice', 'invoice_quote', 'line_items'],
quote: ['quote', 'invoice_quote', 'line_items'],
proposal: ['proposal'],
receipt: ['receipt', 'proposal receipt custom'],
statement: ['statement'],
work_order: ['work_order', 'line_items'],
delivery_note: ['delivery_note', 'line_items'],
contract: ['contract'],
certificate: ['certificate'],
report: ['report'],
custom: ['invoice', 'invoice_quote', 'line_items', 'proposal', 'proposal receipt custom'],
};
function toggleDocFields() {
const dtype = document.getElementById('gen-doc-type').value;
const groups = FIELD_GROUPS[dtype] || [];
// Hide all field groups first
document.querySelectorAll('[data-field-group]').forEach(el => {
el.style.display = 'none';
});
// Show the groups that match this type
groups.forEach(g => {
document.querySelectorAll(`[data-field-group="${g}"]`).forEach(el => {
el.style.display = '';
});
});
// Update layout hint text
const hint = document.querySelector('#gen-layout + .form-hint');
if (hint) {
const labels = {
invoice: 'invoice', quote: 'quote', proposal: 'proposal', receipt: 'receipt',
statement: 'statement', work_order: 'work order', delivery_note: 'delivery note',
contract: 'contract', certificate: 'certificate', report: 'report', custom: 'document',
};
hint.textContent = 'Choose the visual layout for this ' + (labels[dtype] || 'document') + '.';
}
// Update line item total label
const totalEl = document.querySelector('.line-total');
if (totalEl) {
totalEl.textContent = (dtype === 'invoice' || dtype === 'quote') ? 'Total: $' : '';
}
}
function filterDocs(status, chipEl) {
document.querySelectorAll('#status-filters .status-chip').forEach(c => c.classList.remove('active'));
if (chipEl) chipEl.classList.add('active');
const rows = document.querySelectorAll('#doc-table tbody tr');
const activeType = document.querySelector('#doc-type-filters .status-chip.active')?.dataset?.type || 'all';
rows.forEach(row => {
const typeMatch = !activeType || activeType === 'all' || row.dataset.type === activeType;
const statusMatch = !status || row.dataset.status === status;
row.style.display = (typeMatch && statusMatch) ? '' : 'none';
});
}
function filterByType(dtype, chipEl) {
document.querySelectorAll('#doc-type-filters .status-chip').forEach(c => c.classList.remove('active'));
if (chipEl) {
chipEl.classList.add('active');
chipEl.dataset.type = dtype || 'all';
}
const rows = document.querySelectorAll('#doc-table tbody tr');
const activeStatus = document.querySelector('#status-filters .status-chip.active')?.dataset?.status || null;
rows.forEach(row => {
const typeMatch = !dtype || dtype === 'all' || row.dataset.type === dtype;
const statusMatch = !activeStatus || row.dataset.status === activeStatus;
row.style.display = (typeMatch && statusMatch) ? '' : 'none';
});
}
// Tab switching
function switchTab(tab, btnEl) {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
btnEl.classList.add('active');
document.getElementById('tab-documents').style.display = tab === 'documents' ? '' : 'none';
document.getElementById('tab-templates').style.display = tab === 'templates' ? '' : 'none';
if (tab === 'templates') loadTemplates();
}
// Toast
function showToast(msg) {
const t = document.getElementById('toast');
t.textContent = msg;
t.classList.add('show');
setTimeout(() => t.classList.remove('show'), 3000);
}
// ---- Template Management ----
let templates = [];
async function loadTemplates() {
try {
const res = await fetch('/documents/templates');
if (!res.ok) {
throw new Error('HTTP ' + res.status + ': ' + res.statusText);
}
const contentType = res.headers.get('content-type');
if (!contentType || !contentType.includes('application/json')) {
throw new Error('Unexpected response — not JSON (possible login redirect)');
}
const data = await res.json();
templates = data.templates || [];
renderTemplates();
} catch (e) {
console.error('Failed to load templates', e);
document.getElementById('template-grid').innerHTML =
'<div style="grid-column:1/-1;text-align:center;padding:48px 20px;color:#888;">' +
'<p>Failed to load templates.</p>' +
'<p style="font-size:12px;color:#bbb;">' + e.message + '</p></div>';
}
}
function renderTemplates() {
const grid = document.getElementById('template-grid');
if (templates.length === 0) {
grid.innerHTML = `
<div style="grid-column:1/-1;text-align:center;padding:48px 20px;color:#888;">
<p>No templates yet.</p>
<button class="primary-btn" data-onclick="openTemplateModal()" style="margin-top:12px;">+ Create Template</button>
</div>`;
return;
}
grid.innerHTML = templates.map(t => `
<div class="template-card" data-id="${t.id}">
<div style="display:flex;justify-content:space-between;align-items:start;">
<h4>${escapeHtml(t.name)}</h4>
<span class="tpl-type">${escapeHtml(t.document_type || 'invoice')}</span>
</div>
<div class="tpl-layout">Layout: ${escapeHtml(t.layout || 'classic')}</div>
${t.invoice_number_format ? `<div style="font-size:12px;color:#666;">Format: ${escapeHtml(t.invoice_number_format)}</div>` : ''}
<div class="tpl-actions">
<button class="action-btn primary" data-onclick="generateFromTemplate(${t.id})">Generate</button>
<button class="action-btn danger" data-onclick="deleteTemplate(${t.id})">Delete</button>
</div>
</div>
`).join('');
}
function openTemplateModal() {
document.getElementById('template-modal').classList.add('open');
document.getElementById('tpl-name').value = '';
document.getElementById('tpl-doc-type').value = 'invoice';
document.getElementById('tpl-layout').value = 'classic';
document.getElementById('tpl-inv-format').value = 'INV-YYYY-####';
document.getElementById('tpl-error').style.display = 'none';
document.body.style.overflow = 'hidden';
document.querySelector('nav').style.display = 'none';
}
function closeTemplateModal() {
document.getElementById('template-modal').classList.remove('open');
document.body.style.overflow = '';
document.querySelector('nav').style.display = '';
}
async function createTemplate() {
const name = document.getElementById('tpl-name').value.trim();
if (!name) {
showFormError('tpl-error', 'Template name is required.');
return;
}
const data = {
name: name,
document_type: document.getElementById('tpl-doc-type').value,
layout: document.getElementById('tpl-layout').value,
invoice_number_format: document.getElementById('tpl-inv-format').value.trim() || 'INV-YYYY-####',
};
try {
const res = await fetch('/documents/templates', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data),
});
const result = await res.json();
if (!res.ok) throw new Error(result.error || 'Failed to create template');
closeTemplateModal();
await loadTemplates();
showToast('Template created');
} catch (e) {
showFormError('tpl-error', e.message);
}
}
async function deleteTemplate(templateId) {
if (!confirm('Delete this template? This cannot be undone.')) return;
try {
const res = await fetch(`/documents/templates/${templateId}`, { method: 'DELETE' });
const result = await res.json();
if (!res.ok) throw new Error(result.error || 'Failed to delete template');
await loadTemplates();
showToast('Template deleted');
} catch (e) {
showToast('Error: ' + e.message);
}
}
// ---- Invoice Generation ----
function openGenerateModal() {
document.getElementById('generate-modal').classList.add('open');
document.getElementById('gen-customer-name').value = '';
document.getElementById('gen-customer-email').value = '';
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 14);
document.getElementById('gen-due-date').value = tomorrow.toISOString().split('T')[0];
document.getElementById('line-items-container').innerHTML = `
<div class="line-item-row">
<input type="text" placeholder="Description" class="li-desc">
<input type="number" placeholder="Qty" value="1" min="1" class="li-qty" data-oninput="calcTotal()">
<input type="number" placeholder="Price" step="any" class="li-price" data-oninput="calcTotal()">
<button class="line-item-remove" data-onclick="removeLineItem(this)">×</button>
</div>`;
document.getElementById('gen-error').style.display = 'none';
toggleDocFields();
loadTemplateSelect();
document.body.style.overflow = 'hidden';
document.querySelector('nav').style.display = 'none';
}
function closeGenerateModal() {
document.getElementById('generate-modal').classList.remove('open');
document.body.style.overflow = '';
document.querySelector('nav').style.display = '';
}
async function loadTemplateSelect() {
const sel = document.getElementById('gen-template-select');
if (templates.length === 0) {
try {
const res = await fetch('/documents/templates');
const data = await res.json();
templates = data.templates || [];
} catch (e) { /* ignore */ }
}
sel.innerHTML = '<option value="">— No template (standalone) —</option>' +
templates.map(t => `<option value="${t.id}">${escapeHtml(t.name)} (${t.document_type || 'invoice'})</option>`).join('');
}
async function generateFromTemplate(templateId) {
// Ensure templates are loaded first
if (templates.length === 0) {
try {
const res = await fetch('/documents/templates');
const data = await res.json();
templates = data.templates || [];
} catch (e) { /* ignore */ }
}
// Populate the template select dropdown with options
await loadTemplateSelect();
openGenerateModal();
document.getElementById('gen-template-select').value = templateId;
// Sync document type to match the selected template
const template = templates.find(t => t.id == templateId);
if (template && template.document_type) {
document.getElementById('gen-doc-type').value = template.document_type;
toggleDocFields();
}
}
function addLineItem() {
const container = document.getElementById('line-items-container');
const row = document.createElement('div');
row.className = 'line-item-row';
row.innerHTML = `
<input type="text" placeholder="Description" class="li-desc">
<input type="number" placeholder="Qty" value="1" min="1" class="li-qty" data-oninput="calcTotal()">
<input type="number" placeholder="Price" step="any" class="li-price" data-oninput="calcTotal()">
<button class="line-item-remove" data-onclick="removeLineItem(this)">×</button>`;
container.appendChild(row);
}
function removeLineItem(btn) {
const container = document.getElementById('line-items-container');
if (container.children.length > 1) {
btn.closest('.line-item-row').remove();
calcTotal();
}
}
function calcTotal() {
let total = 0;
document.querySelectorAll('.line-item-row').forEach(row => {
const qty = parseFloat(row.querySelector('.li-qty').value) || 0;
const price = parseFloat(row.querySelector('.li-price').value) || 0;
total += qty * price;
});
document.getElementById('line-total').textContent = total.toFixed(2);
}
async function generateInvoice() {
const customerName = document.getElementById('gen-customer-name').value.trim();
const customerEmail = document.getElementById('gen-customer-email').value.trim();
if (!customerName) {
showFormError('gen-error', 'Customer name is required.');
return;
}
const dtype = document.getElementById('gen-doc-type').value;
// Determine which types need line items vs other data
const needsLineItems = ['invoice', 'quote', 'custom', 'work_order', 'delivery_note'].includes(dtype);
const lineItems = [];
if (needsLineItems) {
let valid = true;
document.querySelectorAll('.line-item-row').forEach(row => {
const desc = row.querySelector('.li-desc').value.trim();
const qty = parseFloat(row.querySelector('.li-qty').value) || 0;
const price = parseFloat(row.querySelector('.li-price').value) || 0;
if (!desc || price <= 0) valid = false;
lineItems.push({ description: desc || 'Service', qty, unit_price: price });
});
if (!valid || lineItems.length === 0) {
showFormError('gen-error', 'Each line item needs a description and price.');
return;
}
}
try {
const payload = {
template_id: document.getElementById('gen-template-select').value || null,
document_type: dtype,
layout: document.getElementById('gen-layout').value,
style: {
primary_color: document.getElementById('gen-primary-color').value,
},
customer_name: customerName,
customer_email: customerEmail,
due_date: dtype === 'invoice' ? (document.getElementById('gen-due-date').value || null) : null,
line_items: lineItems,
notes: document.getElementById('gen-notes')?.value.trim() || '',
tax_rate: parseFloat(document.getElementById('gen-tax-rate').value) || 0,
payment_terms: document.getElementById('gen-payment-terms')?.value.trim() || '',
payment_link: document.getElementById('gen-payment-link')?.value.trim() || '',
payment_link_text: document.getElementById('gen-payment-link-text')?.value.trim() || 'Pay Now',
};
// Handle type-specific fields
if (dtype === 'quote') {
payload.due_date = document.getElementById('gen-expiry-date').value || null;
}
if (dtype === 'proposal') {
payload.scope = document.getElementById('gen-scope')?.value.trim() || '';
payload.due_date = document.getElementById('gen-valid-until').value || null;
}
if (dtype === 'receipt') {
payload.due_date = document.getElementById('gen-receipt-date').value || null;
}
// Pass through any additional custom fields for all types
const extraFields = [
'executive_summary', 'scope', 'scope_items', 'timeline', 'terms', 'title',
'transactions', 'opening_balance', 'total_charges', 'total_payments', 'closing_balance',
'period_start', 'period_end',
'tasks', 'time_in', 'time_out', 'total_hours', 'work_order_number', 'service_address', 'scheduled_date',
'po_number', 'order_number', 'carrier', 'tracking_number', 'weight',
'contract_title', 'preamble', 'terms_sections', 'effective_date',
];
for (const field of extraFields) {
const el = document.getElementById('gen-' + field);
if (el) {
payload[field] = el.value?.trim() || '';
}
}
// Build from/to objects for templates
payload.from = {
name: document.getElementById('gen-from-name')?.value.trim() || '',
email: document.getElementById('gen-from-email')?.value.trim() || '',
address: document.getElementById('gen-from-address')?.value.trim() || '',
phone: document.getElementById('gen-from-phone')?.value.trim() || '',
};
payload.to = {
name: customerName,
email: customerEmail,
address: document.getElementById('gen-customer_address')?.value.trim() || '',
};
const res = await fetch('/documents/generate', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(payload),
});
const result = await res.json();
if (!res.ok) throw new Error(result.error || 'Generation failed');
closeGenerateModal();
// Show preview of the generated document
openPreview(result.document_id, result.invoice_number || 'Invoice Generated');
showToast('Document generated!');
} catch (e) {
showFormError('gen-error', e.message);
}
}
// ---- Portal Actions ----
async function copyPortalLink(documentId, btnEl) {
try {
const res = await fetch(`/documents/${documentId}/share-link`);
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed to get link');
await navigator.clipboard.writeText(data.portal_url);
const orig = btnEl.textContent;
btnEl.textContent = '✓';
btnEl.style.color = '#10b981';
showToast('Portal link copied to clipboard');
setTimeout(() => { btnEl.textContent = orig; btnEl.style.color = ''; }, 2000);
} catch (e) {
showToast('Error: ' + e.message);
}
}
async function sendInvoice(documentId, customerEmail, btnEl) {
if (!confirm(`Send invoice to ${customerEmail}?`)) return;
const orig = btnEl.textContent;
btnEl.textContent = '⏳';
btnEl.disabled = true;
try {
const res = await fetch(`/documents/${documentId}/send`, { method: 'POST' });
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed to send');
btnEl.textContent = '✓';
btnEl.style.color = '#10b981';
showToast('Invoice sent to ' + customerEmail);
setTimeout(() => { btnEl.textContent = orig; btnEl.style.color = ''; btnEl.disabled = false; }, 2000);
} catch (e) {
btnEl.textContent = orig;
btnEl.disabled = false;
showToast('Error: ' + e.message);
}
}
// ---- PDF Preview ----
function openPreview(documentId, title) {
document.getElementById('preview-title').textContent = title;
document.getElementById('preview-iframe').src = '/documents/' + documentId + '/embed?_t=' + Date.now();
document.getElementById('preview-download').href = '/documents/' + documentId + '/download';
document.getElementById('preview-fullscreen').href = '/documents/' + documentId + '/download';
document.getElementById('preview-modal').classList.add('open');
document.body.style.overflow = 'hidden';
document.querySelector('nav').style.display = 'none';
}
function printPreview() {
const iframe = document.getElementById('preview-iframe');
if (iframe.src) {
const printWin = window.open(iframe.src, '_blank');
printWin.onload = function() {
printWin.focus();
printWin.print();
};
}
}
function closePreview() {
document.getElementById('preview-modal').classList.remove('open');
document.getElementById('preview-iframe').src = '';
document.body.style.overflow = '';
document.querySelector('nav').style.display = '';
}
// ---- Helpers ----
function showFormError(elId, msg) {
const el = document.getElementById(elId);
el.textContent = msg;
el.style.display = 'block';
}
function escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}