375 lines
17 KiB
HTML
375 lines
17 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ title }}{% endblock %}
|
|
{% block page_title %}{{ title }}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
#ocrDropZone {
|
|
border: 2px dashed var(--border);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all .2s;
|
|
background: #f8fafc;
|
|
}
|
|
#ocrDropZone.dragover { border-color: #3b82f6; background: #eff6ff; }
|
|
#ocrDropZone.loading { border-color: #818cf8; background: #f5f3ff; }
|
|
#ocrDropZone.success { border-color: #10b981; background: #f0fdf4; }
|
|
#ocrDropZone.error { border-color: #ef4444; background: #fef2f2; }
|
|
.ocr-field-highlight { animation: ocr-flash .6s ease; }
|
|
@keyframes ocr-flash { 0%,100%{background:transparent} 50%{background:#d1fae5} }
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-9 col-lg-7">
|
|
|
|
<!-- OCR Receipt Scanner -->
|
|
<div class="pcard mb-3" style="border-left: 4px solid #818cf8;">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<div style="font-size:13px;font-weight:600;color:#4f46e5;">
|
|
<i class="bi bi-stars me-1" style="color:#818cf8;"></i>AI Receipt Scanner
|
|
</div>
|
|
<button type="button" onclick="toggleOcr()" id="ocrToggleBtn"
|
|
style="background:none;border:none;font-size:12px;color:#818cf8;cursor:pointer;">
|
|
<i class="bi bi-chevron-down" id="ocrChevron"></i>
|
|
</button>
|
|
</div>
|
|
<div id="ocrPanel" {% if not txn %}style="display:block;"{% else %}style="display:none;"{% endif %}>
|
|
<div id="ocrDropZone" onclick="document.getElementById('ocrFileInput').click()"
|
|
ondragover="event.preventDefault();this.classList.add('dragover')"
|
|
ondragleave="this.classList.remove('dragover')"
|
|
ondrop="handleDrop(event)">
|
|
<input type="file" id="ocrFileInput" accept=".jpg,.jpeg,.png,.gif,.webp"
|
|
style="display:none;" onchange="handleOcrFile(this.files[0])">
|
|
<div id="ocrDropContent">
|
|
<i class="bi bi-receipt" style="font-size:1.8rem;color:#a5b4fc;"></i>
|
|
<div style="font-size:13px;font-weight:500;color:#4f46e5;margin-top:8px;">
|
|
Drop receipt image here or click to upload
|
|
</div>
|
|
<div style="font-size:11px;color:var(--muted);margin-top:4px;">
|
|
JPG, PNG, GIF, WEBP · max 10MB · Powered by Groq vision
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="ocrStatus" style="font-size:12px;margin-top:8px;display:none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Form -->
|
|
<div class="pcard" style="border-top: 4px solid {% if txn_type=='income' %}var(--income){% else %}var(--expense){% endif %};">
|
|
<form method="POST" novalidate id="txnForm">
|
|
{{ form.hidden_tag() }}
|
|
{{ form.transaction_type() }}
|
|
|
|
<div class="mb-3">
|
|
{{ form.description.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.description(class="form-control" + (" is-invalid" if form.description.errors else ""),
|
|
placeholder="What was this for?", id="field_description") }}
|
|
{% for e in form.description.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-6">
|
|
{{ form.amount.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
<div class="input-group">
|
|
<span class="input-group-text" style="font-size:13px;">{{ current_user.currency_symbol }}</span>
|
|
{{ form.amount(class="form-control" + (" is-invalid" if form.amount.errors else ""),
|
|
placeholder="0.00", id="field_amount") }}
|
|
</div>
|
|
{% for e in form.amount.errors %}<div class="text-danger mt-1" style="font-size:12px;">{{ e }}</div>{% endfor %}
|
|
</div>
|
|
<div class="col-6">
|
|
{{ form.date.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.date(class="form-control" + (" is-invalid" if form.date.errors else ""),
|
|
id="field_date") }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
{{ form.account_id.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.account_id(class="form-select" + (" is-invalid" if form.account_id.errors else "")) }}
|
|
{% for e in form.account_id.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
{{ form.category_id.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.category_id(class="form-select", id="field_category") }}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
{{ form.notes.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.notes(class="form-control", rows=2, placeholder="Optional notes", id="field_notes") }}
|
|
</div>
|
|
|
|
<div class="d-flex gap-2">
|
|
<button type="submit" class="btn {% if txn_type=='income' %}btn-success{% else %}btn-danger{% endif %}">
|
|
Save {{ txn_type | title }}
|
|
</button>
|
|
<a href="{{ url_for('transactions.index', tab=txn_type) }}" class="btn btn-outline-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
|
|
{# Receipt section — kept OUTSIDE #txnForm to avoid nested-form breakage #}
|
|
{% if txn and txn.receipt %}
|
|
<div class="mt-3 p-3" style="background:#f8fafc;border-radius:8px;">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div style="font-size:13px;">
|
|
<i class="bi bi-paperclip me-1 text-muted"></i>
|
|
<a href="{{ url_for('settings.view_receipt', filename=txn.receipt.filename) }}" target="_blank">
|
|
{{ txn.receipt.original_filename }}
|
|
</a>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<button type="button" onclick="ocrExistingReceipt('{{ txn.receipt.filename }}')"
|
|
class="btn btn-sm" style="font-size:11px;background:#ede9fe;color:#5b21b6;border:none;">
|
|
<i class="bi bi-stars me-1"></i>Re-extract
|
|
</button>
|
|
<form method="POST" action="{{ url_for('settings.delete_receipt', txn_id=txn.id) }}"
|
|
onsubmit="return confirm('Delete receipt?')" style="display:inline;">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;">Remove</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% elif txn %}
|
|
<div class="mt-3">
|
|
<label class="form-label fw-medium" style="font-size:13px;">Receipt</label>
|
|
<form method="POST" action="{{ url_for('settings.upload_receipt', txn_id=txn.id) }}"
|
|
enctype="multipart/form-data" id="receiptUploadForm">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<div class="input-group input-group-sm">
|
|
<input type="file" name="receipt" id="receiptFileEdit"
|
|
class="form-control" accept=".png,.jpg,.jpeg,.gif,.pdf,.webp"
|
|
style="font-size:12px;" onchange="autoOcrOnUpload(this)">
|
|
<button type="submit" class="btn btn-outline-secondary" style="font-size:12px;">Upload</button>
|
|
</div>
|
|
<small class="text-muted" style="font-size:11px;">PNG, JPG, WEBP, PDF — max 10MB</small>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
const CSRF = '{{ csrf_token() }}';
|
|
const categoryOptions = [...document.getElementById('field_category').options];
|
|
|
|
// ── OCR panel toggle ─────────────────────────────────────────────────────────
|
|
function toggleOcr() {
|
|
const panel = document.getElementById('ocrPanel');
|
|
const icon = document.getElementById('ocrChevron');
|
|
const open = panel.style.display !== 'none';
|
|
panel.style.display = open ? 'none' : 'block';
|
|
icon.className = open ? 'bi bi-chevron-down' : 'bi bi-chevron-up';
|
|
}
|
|
|
|
// ── Drag & drop ───────────────────────────────────────────────────────────────
|
|
function handleDrop(e) {
|
|
e.preventDefault();
|
|
document.getElementById('ocrDropZone').classList.remove('dragover');
|
|
const file = e.dataTransfer.files[0];
|
|
if (file) handleOcrFile(file);
|
|
}
|
|
|
|
// ── Main OCR handler ──────────────────────────────────────────────────────────
|
|
function handleOcrFile(file) {
|
|
if (!file) return;
|
|
const allowed = ['image/jpeg','image/png','image/gif','image/webp'];
|
|
if (!allowed.includes(file.type)) {
|
|
setOcrStatus('error', 'Unsupported format. Use JPG, PNG, GIF or WEBP.');
|
|
return;
|
|
}
|
|
runOcr(file);
|
|
}
|
|
|
|
function runOcr(file) {
|
|
const zone = document.getElementById('ocrDropZone');
|
|
zone.className = 'loading';
|
|
document.getElementById('ocrDropContent').innerHTML = `
|
|
<div style="color:#818cf8;font-size:13px;">
|
|
<span style="display:inline-block;animation:spin .8s linear infinite;font-size:1.5rem;"><i class="bi bi-stars"></i></span><br>
|
|
<span style="margin-top:8px;display:block;">Scanning receipt with AI…</span>
|
|
</div>`;
|
|
setOcrStatus('', '', false);
|
|
|
|
const fd = new FormData();
|
|
fd.append('receipt', file);
|
|
fd.append('csrf_token', CSRF);
|
|
|
|
fetch('/transactions/ocr', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
zone.className = 'error';
|
|
resetOcrZone();
|
|
setOcrStatus('error', '⚠ ' + data.error);
|
|
return;
|
|
}
|
|
zone.className = 'success';
|
|
resetOcrZone(true);
|
|
fillForm(data);
|
|
setOcrStatus('success',
|
|
`✓ Extracted: ${data.description || 'receipt'} · ${data.amount ? '{{ current_user.currency_symbol }}' + data.amount : ''} · ${data.category_suggestion || ''}`
|
|
);
|
|
})
|
|
.catch(err => {
|
|
zone.className = 'error';
|
|
resetOcrZone();
|
|
setOcrStatus('error', '⚠ Network error. Please try again.');
|
|
});
|
|
}
|
|
|
|
function resetOcrZone(success) {
|
|
document.getElementById('ocrDropContent').innerHTML = success
|
|
? `<i class="bi bi-check-circle" style="font-size:1.8rem;color:#10b981;"></i>
|
|
<div style="font-size:13px;font-weight:500;color:#10b981;margin-top:8px;">Receipt scanned — form filled below</div>
|
|
<div style="font-size:11px;color:var(--muted);margin-top:4px;">Drop another receipt to re-scan</div>`
|
|
: `<i class="bi bi-receipt" style="font-size:1.8rem;color:#a5b4fc;"></i>
|
|
<div style="font-size:13px;font-weight:500;color:#4f46e5;margin-top:8px;">Drop receipt image here or click to upload</div>
|
|
<div style="font-size:11px;color:var(--muted);margin-top:4px;">JPG, PNG, GIF, WEBP · max 10MB</div>`;
|
|
}
|
|
|
|
function setOcrStatus(type, msg, show) {
|
|
const el = document.getElementById('ocrStatus');
|
|
if (show === false) { el.style.display = 'none'; return; }
|
|
el.style.display = msg ? 'block' : 'none';
|
|
el.style.color = type === 'error' ? '#ef4444' : type === 'success' ? '#10b981' : '#64748b';
|
|
el.textContent = msg;
|
|
}
|
|
|
|
// ── Fill form fields ──────────────────────────────────────────────────────────
|
|
function fillForm(data) {
|
|
if (data.amount) setField('field_amount', data.amount);
|
|
if (data.date) setField('field_date', data.date);
|
|
if (data.description) setField('field_description', data.description);
|
|
if (data.notes) setField('field_notes', data.notes);
|
|
|
|
// Category
|
|
if (data.category_id) {
|
|
const sel = document.getElementById('field_category');
|
|
if (sel) {
|
|
sel.value = String(data.category_id);
|
|
flash(sel);
|
|
}
|
|
}
|
|
|
|
// Scroll to form
|
|
document.getElementById('txnForm').scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
function setField(id, val) {
|
|
const el = document.getElementById(id);
|
|
if (el) { el.value = val; flash(el); }
|
|
}
|
|
|
|
function flash(el) {
|
|
el.classList.remove('ocr-field-highlight');
|
|
void el.offsetWidth; // reflow
|
|
el.classList.add('ocr-field-highlight');
|
|
setTimeout(() => el.classList.remove('ocr-field-highlight'), 700);
|
|
}
|
|
|
|
// ── Re-extract from already-uploaded receipt (edit mode) ──────────────────────
|
|
function ocrExistingReceipt(filename) {
|
|
const btn = event.target.closest('button');
|
|
btn.innerHTML = '<i class="bi bi-stars me-1" style="animation:spin .7s linear infinite;display:inline-block;"></i>Scanning…';
|
|
btn.disabled = true;
|
|
|
|
fetch('/transactions/ocr-file', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF },
|
|
body: JSON.stringify({ filename: filename }),
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
btn.innerHTML = '<i class="bi bi-stars me-1"></i>Re-extract';
|
|
btn.disabled = false;
|
|
if (data.error) { alert('OCR error: ' + data.error); return; }
|
|
fillForm(data);
|
|
const banner = document.createElement('div');
|
|
banner.style.cssText = 'font-size:12px;color:#10b981;margin-top:6px;';
|
|
banner.textContent = '✓ Fields updated from receipt';
|
|
btn.closest('.mb-3').appendChild(banner);
|
|
setTimeout(() => banner.remove(), 3000);
|
|
})
|
|
.catch(() => {
|
|
btn.innerHTML = '<i class="bi bi-stars me-1"></i>Re-extract';
|
|
btn.disabled = false;
|
|
alert('Network error. Please try again.');
|
|
});
|
|
}
|
|
|
|
// ── Client-side form validation ───────────────────────────────────────────────
|
|
document.getElementById('txnForm').addEventListener('submit', function(e) {
|
|
let valid = true;
|
|
|
|
const desc = document.getElementById('field_description');
|
|
if (!desc.value.trim()) {
|
|
desc.classList.add('is-invalid');
|
|
if (!desc.nextElementSibling || !desc.nextElementSibling.classList.contains('invalid-feedback')) {
|
|
const err = document.createElement('div');
|
|
err.className = 'invalid-feedback';
|
|
err.textContent = 'Description is required.';
|
|
desc.after(err);
|
|
}
|
|
valid = false;
|
|
} else {
|
|
desc.classList.remove('is-invalid');
|
|
}
|
|
|
|
const amt = document.getElementById('field_amount');
|
|
const amtVal = parseFloat(amt.value);
|
|
const amtParent = amt.closest('.input-group') || amt;
|
|
if (!amt.value || isNaN(amtVal) || amtVal <= 0) {
|
|
amt.classList.add('is-invalid');
|
|
let errEl = amtParent.parentElement.querySelector('.amt-error');
|
|
if (!errEl) {
|
|
errEl = document.createElement('div');
|
|
errEl.className = 'text-danger mt-1 amt-error';
|
|
errEl.style.fontSize = '12px';
|
|
amtParent.after(errEl);
|
|
}
|
|
errEl.textContent = amtVal < 0 ? 'Amount must be positive.' : 'Amount is required.';
|
|
valid = false;
|
|
} else {
|
|
amt.classList.remove('is-invalid');
|
|
const errEl = amtParent.parentElement.querySelector('.amt-error');
|
|
if (errEl) errEl.remove();
|
|
}
|
|
|
|
const dt = document.getElementById('field_date');
|
|
if (!dt.value) {
|
|
dt.classList.add('is-invalid');
|
|
valid = false;
|
|
} else {
|
|
dt.classList.remove('is-invalid');
|
|
}
|
|
|
|
if (!valid) e.preventDefault();
|
|
});
|
|
|
|
// Clear validation state on input
|
|
['field_description', 'field_amount', 'field_date'].forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) el.addEventListener('input', () => el.classList.remove('is-invalid'));
|
|
});
|
|
|
|
// ── Auto-OCR when receipt is selected in edit form ────────────────────────────
|
|
function autoOcrOnUpload(input) {
|
|
const file = input.files[0];
|
|
if (!file) return;
|
|
const imageTypes = ['image/jpeg','image/png','image/gif','image/webp'];
|
|
if (!imageTypes.includes(file.type)) return; // PDF — skip OCR
|
|
// Show OCR panel and run
|
|
const panel = document.getElementById('ocrPanel');
|
|
if (panel) { panel.style.display = 'block'; document.getElementById('ocrChevron').className = 'bi bi-chevron-up'; }
|
|
runOcr(file);
|
|
}
|
|
</script>
|
|
{% endblock %}
|