Rodrigo Rodriguez (Pragmatismo)
c24ff23a07
- Add CRM tab to header navigation after tasks - Add CSS breakpoint at 1350px for CRM tab hiding - Add app-item breakpoint for CRM in dropdown - Delete i18n.js (translations moved to botlib .ftl files) - Update TODO.md with completed phases
98 lines
5 KiB
HTML
98 lines
5 KiB
HTML
<!-- Payment Form - Billing Partial -->
|
|
<form class="invoice-form" hx-post="/api/billing/payments" hx-target="#payments-table-body" hx-swap="innerHTML" hx-on::after-request="closeBillingModal()">
|
|
<div class="invoice-form-header">
|
|
<h2 class="invoice-form-title" data-i18n="billing-record-payment">Record Payment</h2>
|
|
<button type="button" class="form-close" onclick="closeBillingModal()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Invoice Selection -->
|
|
<div class="form-section">
|
|
<div class="form-section-title" data-i18n="billing-invoice-details">Invoice Details</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="billing-invoice">Invoice *</label>
|
|
<select name="invoice_id" class="form-select" required hx-get="/api/billing/invoices/unpaid" hx-trigger="load" hx-on::after-request="updateInvoiceInfo()">
|
|
<option value="" data-i18n="billing-select-invoice">Select invoice...</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="billing-invoice-amount">Invoice Amount</label>
|
|
<input type="text" id="invoice-amount-display" class="form-input" readonly placeholder="$0.00">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Details -->
|
|
<div class="form-section">
|
|
<div class="form-section-title" data-i18n="billing-payment-details">Payment Details</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="billing-payment-date">Payment Date *</label>
|
|
<input type="date" name="payment_date" class="form-input" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="billing-amount">Amount *</label>
|
|
<input type="number" name="amount" class="form-input" required placeholder="0.00" min="0" step="0.01">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="billing-payment-method">Payment Method *</label>
|
|
<select name="method" class="form-select" required>
|
|
<option value="" data-i18n="billing-select-method">Select method...</option>
|
|
<option value="bank" data-i18n="billing-method-bank">Bank Transfer</option>
|
|
<option value="card" data-i18n="billing-method-card">Credit Card</option>
|
|
<option value="pix" data-i18n="billing-method-pix">PIX</option>
|
|
<option value="boleto" data-i18n="billing-method-boleto">Boleto</option>
|
|
<option value="cash" data-i18n="billing-method-cash">Cash</option>
|
|
<option value="check" data-i18n="billing-method-check">Check</option>
|
|
<option value="other" data-i18n="billing-method-other">Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="billing-reference">Reference Number</label>
|
|
<input type="text" name="reference" class="form-input" placeholder="Transaction ID, Check #, etc.">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="billing-notes">Notes</label>
|
|
<textarea name="notes" class="form-textarea" rows="2" placeholder="Additional payment notes..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="form-btn secondary" onclick="closeBillingModal()" data-i18n="common-cancel">Cancel</button>
|
|
<button type="submit" class="form-btn primary" data-i18n="billing-record">Record Payment</button>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
(function() {
|
|
// Set default date to today
|
|
const today = new Date().toISOString().split('T')[0];
|
|
document.querySelector('input[name="payment_date"]').value = today;
|
|
|
|
// Update invoice info when selection changes
|
|
window.updateInvoiceInfo = function() {
|
|
const select = document.querySelector('select[name="invoice_id"]');
|
|
const amountDisplay = document.getElementById('invoice-amount-display');
|
|
const amountInput = document.querySelector('input[name="amount"]');
|
|
|
|
if (select.selectedOptions[0] && select.selectedOptions[0].dataset.amount) {
|
|
const amount = select.selectedOptions[0].dataset.amount;
|
|
amountDisplay.value = '$' + parseFloat(amount).toFixed(2);
|
|
amountInput.value = amount;
|
|
}
|
|
};
|
|
|
|
// Add change listener
|
|
document.querySelector('select[name="invoice_id"]').addEventListener('change', updateInvoiceInfo);
|
|
})();
|
|
</script>
|