05/31 Phase 7: receipt ocr

app/routes/transactions.py

@@ -9,6 +9,7 @@ from app.models.account import Account
 from app.models.category import Category
 from app.services.account_service import calc_balance
 from datetime import date, datetime
+import os
 from sqlalchemy import or_
 
 transactions_bp = Blueprint('transactions', __name__, url_prefix='/transactions')
@@ -220,3 +221,106 @@ def transfer():
             return redirect(url_for('transactions.index'))
 
     return render_template('transactions/transfer.html', form=form)
+
+
+@transactions_bp.route('/ocr', methods=['POST'])
+@login_required
+def ocr_receipt():
+    """
+    POST a receipt image, get back extracted transaction data as JSON.
+    Used by both new expense form and edit form.
+    """
+    from app.services.ocr_service import extract_from_bytes
+    from app.models.category import Category
+
+    if 'receipt' not in request.files:
+        return jsonify({'error': 'No file uploaded'}), 400
+
+    f = request.files['receipt']
+    if not f.filename:
+        return jsonify({'error': 'Empty filename'}), 400
+
+    ext = os.path.splitext(f.filename)[1].lower()
+    allowed = {'.jpg', '.jpeg', '.png', '.gif', '.webp'}
+    if ext not in allowed:
+        return jsonify({'error': f'Unsupported type: {ext}. Use JPG, PNG, GIF, WEBP'}), 400
+
+    # Read bytes — limit 10MB
+    f.seek(0, 2)
+    size = f.tell()
+    f.seek(0)
+    if size > 10 * 1024 * 1024:
+        return jsonify({'error': 'File too large (max 10MB)'}), 400
+
+    mime_map = {'.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
+                '.png': 'image/png', '.gif': 'image/gif', '.webp': 'image/webp'}
+    mime_type = mime_map.get(ext, 'image/jpeg')
+    image_bytes = f.read()
+
+    result = extract_from_bytes(image_bytes, mime_type)
+
+    if result['error']:
+        return jsonify({'error': result['error']}), 422
+
+    # Look up category ID from suggestion
+    category_id = None
+    if result['category_suggestion']:
+        cat = Category.query.filter(
+            Category.name.ilike(result['category_suggestion']),
+            Category.is_active == True,
+        ).first()
+        if cat:
+            category_id = cat.id
+
+    return jsonify({
+        'amount':      result['amount'],
+        'date':        result['date'],
+        'description': result['merchant'] or result['notes'] or '',
+        'notes':       result['notes'],
+        'category_suggestion': result['category_suggestion'],
+        'category_id': category_id,
+    })
+
+
+@transactions_bp.route('/ocr-file', methods=['POST'])
+@login_required
+def ocr_receipt_file():
+    """
+    Re-extract from an already-uploaded receipt file stored on disk.
+    Body: { "filename": "abc123.jpg" }
+    """
+    from app.services.ocr_service import extract_from_file
+    from app.models.category import Category
+    from flask import current_app
+
+    data = request.get_json()
+    if not data or not data.get('filename'):
+        return jsonify({'error': 'No filename provided'}), 400
+
+    # Security: only allow basenames, no path traversal
+    filename = os.path.basename(data['filename'])
+    upload_dir = current_app.config.get('UPLOAD_FOLDER', '/home/pfm/app/uploads')
+    file_path = os.path.join(upload_dir, filename)
+
+    result = extract_from_file(file_path)
+
+    if result['error']:
+        return jsonify({'error': result['error']}), 422
+
+    category_id = None
+    if result['category_suggestion']:
+        cat = Category.query.filter(
+            Category.name.ilike(result['category_suggestion']),
+            Category.is_active == True,
+        ).first()
+        if cat:
+            category_id = cat.id
+
+    return jsonify({
+        'amount':      result['amount'],
+        'date':        result['date'],
+        'description': result['merchant'] or result['notes'] or '',
+        'notes':       result['notes'],
+        'category_suggestion': result['category_suggestion'],
+        'category_id': category_id,
+    })

app/services/ocr_service.py

@@ -0,0 +1,227 @@
+"""
+OCR Service — extracts transaction data from receipt images using Groq vision.
+
+Model: meta-llama/llama-4-scout-17b-16e-instruct (multimodal)
+Input: image file path or bytes
+Output: dict with amount, date, merchant, category_suggestion, notes
+"""
+
+import base64
+import json
+import logging
+import os
+import re
+from datetime import date, datetime
+from flask import current_app
+
+log = logging.getLogger(__name__)
+
+GROQ_VISION_MODEL = 'meta-llama/llama-4-scout-17b-16e-instruct'
+SUPPORTED_MIME_TYPES = {
+    '.jpg':  'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png':  'image/png',
+    '.gif':  'image/gif',
+    '.webp': 'image/webp',
+}
+
+RECEIPT_PROMPT = """You are a receipt data extractor. Analyze this receipt image and extract the following information.
+
+Respond ONLY with a valid JSON object, no explanation, no markdown, no code fences. Just raw JSON.
+
+Required format:
+{
+  "amount": <total amount as a number, no currency symbols, e.g. 85.50>,
+  "date": "<date in YYYY-MM-DD format, or null if not found>",
+  "merchant": "<store/restaurant/vendor name, or null if not found>",
+  "category_suggestion": "<one of: Food & Dining, Transport, Shopping, Health, Entertainment, Utilities, Housing, Education, Personal Care, Travel, Other>",
+  "notes": "<brief description, e.g. 'Lunch at McDonald\\'s' or 'Grocery shopping'>"
+}
+
+Rules:
+- amount: use the TOTAL/GRAND TOTAL amount, not subtotal. Numbers only, no commas.
+- date: format as YYYY-MM-DD. If only month/day visible, use current year.
+- merchant: the business name only, no address.
+- category_suggestion: pick the single most appropriate category from the list.
+- notes: keep under 60 characters.
+- If you cannot read the receipt clearly, still return your best guess with available data.
+- Never return null for amount if any number is visible."""
+
+
+def extract_from_file(file_path):
+    """
+    Extract receipt data from an image file on disk.
+    Returns dict or None on failure.
+    """
+    ext = os.path.splitext(file_path)[1].lower()
+    mime_type = SUPPORTED_MIME_TYPES.get(ext)
+
+    if not mime_type:
+        log.warning(f'[ocr] Unsupported file type: {ext}')
+        return _error_result(f'Unsupported file type: {ext}')
+
+    try:
+        with open(file_path, 'rb') as f:
+            image_bytes = f.read()
+        return extract_from_bytes(image_bytes, mime_type)
+    except FileNotFoundError:
+        log.error(f'[ocr] File not found: {file_path}')
+        return _error_result('Receipt file not found')
+    except Exception as e:
+        log.error(f'[ocr] File read error: {e}')
+        return _error_result(str(e))
+
+
+def extract_from_bytes(image_bytes, mime_type='image/jpeg'):
+    """
+    Extract receipt data from raw image bytes.
+    Returns dict with keys: amount, date, merchant, category_suggestion, notes, error
+    """
+    api_key = current_app.config.get('GROQ_API_KEY', '')
+    if not api_key:
+        return _error_result('GROQ_API_KEY not configured')
+
+    # Encode to base64
+    b64 = base64.b64encode(image_bytes).decode('utf-8')
+    data_url = f'data:{mime_type};base64,{b64}'
+
+    try:
+        import requests
+        resp = requests.post(
+            'https://api.groq.com/openai/v1/chat/completions',
+            headers={
+                'Authorization': f'Bearer {api_key}',
+                'Content-Type': 'application/json',
+            },
+            json={
+                'model': GROQ_VISION_MODEL,
+                'messages': [
+                    {
+                        'role': 'user',
+                        'content': [
+                            {
+                                'type': 'image_url',
+                                'image_url': {'url': data_url},
+                            },
+                            {
+                                'type': 'text',
+                                'text': RECEIPT_PROMPT,
+                            },
+                        ],
+                    }
+                ],
+                'max_tokens': 512,
+                'temperature': 0.1,  # low temp for consistent structured output
+            },
+            timeout=30,
+        )
+        resp.raise_for_status()
+        content = resp.json()['choices'][0]['message']['content'].strip()
+        log.info(f'[ocr] Raw response: {content[:200]}')
+        return _parse_response(content)
+
+    except requests.exceptions.HTTPError as e:
+        if e.response.status_code == 400:
+            # Model may not support this image — try to parse error
+            try:
+                err_body = e.response.json()
+                msg = err_body.get('error', {}).get('message', str(e))
+            except Exception:
+                msg = str(e)
+            log.error(f'[ocr] Groq 400 error: {msg}')
+            return _error_result(f'Image processing failed: {msg[:100]}')
+        elif e.response.status_code == 429:
+            return _error_result('Rate limit reached. Try again shortly.')
+        elif e.response.status_code == 401:
+            return _error_result('Invalid Groq API key.')
+        else:
+            log.error(f'[ocr] HTTP {e.response.status_code}: {e}')
+            return _error_result(f'API error ({e.response.status_code})')
+    except Exception as e:
+        log.error(f'[ocr] Unexpected error: {e}')
+        return _error_result('OCR service temporarily unavailable')
+
+
+def _parse_response(content):
+    """Parse the JSON response from Groq into a clean dict."""
+    # Strip any accidental markdown fences
+    content = re.sub(r'^```(?:json)?\s*', '', content, flags=re.MULTILINE)
+    content = re.sub(r'\s*```$', '', content, flags=re.MULTILINE)
+    content = content.strip()
+
+    try:
+        data = json.loads(content)
+    except json.JSONDecodeError:
+        # Try to extract JSON object from surrounding text
+        match = re.search(r'\{.*\}', content, re.DOTALL)
+        if match:
+            try:
+                data = json.loads(match.group())
+            except json.JSONDecodeError:
+                log.error(f'[ocr] Could not parse JSON: {content[:200]}')
+                return _error_result('Could not parse OCR response')
+        else:
+            return _error_result('No JSON found in OCR response')
+
+    # Normalise amount
+    amount = data.get('amount')
+    if amount is not None:
+        try:
+            amount = float(str(amount).replace(',', '').strip())
+            if amount <= 0:
+                amount = None
+        except (ValueError, TypeError):
+            amount = None
+
+    # Normalise date
+    raw_date = data.get('date')
+    parsed_date = None
+    if raw_date:
+        for fmt in ('%Y-%m-%d', '%m/%d/%Y', '%d/%m/%Y', '%Y/%m/%d'):
+            try:
+                parsed_date = datetime.strptime(str(raw_date).strip(), fmt).date().isoformat()
+                break
+            except ValueError:
+                continue
+
+    # Map category suggestion to our system category names
+    cat_map = {
+        'food & dining': 'Food & Dining',
+        'food':          'Food & Dining',
+        'dining':        'Food & Dining',
+        'transport':     'Transport',
+        'transportation':'Transport',
+        'shopping':      'Shopping',
+        'health':        'Health',
+        'entertainment': 'Entertainment',
+        'utilities':     'Utilities',
+        'housing':       'Housing',
+        'education':     'Education',
+        'personal care': 'Personal Care',
+        'travel':        'Travel',
+        'other':         'Other',
+    }
+    raw_cat = str(data.get('category_suggestion', '')).lower().strip()
+    category = cat_map.get(raw_cat, data.get('category_suggestion', 'Other'))
+
+    return {
+        'amount':              amount,
+        'date':                parsed_date or date.today().isoformat(),
+        'merchant':            data.get('merchant') or '',
+        'category_suggestion': category,
+        'notes':               data.get('notes') or '',
+        'error':               None,
+        'raw':                 data,
+    }
+
+
+def _error_result(msg):
+    return {
+        'amount':              None,
+        'date':                date.today().isoformat(),
+        'merchant':            '',
+        'category_suggestion': 'Other',
+        'notes':               '',
+        'error':               msg,
+        'raw':                 {},
+    }

app/templates/base.html

@@ -156,6 +156,7 @@
         .sb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1039; }
         .sb-overlay.on { display: block; }
 
+        @keyframes spin { to { transform: rotate(360deg); } }
         {% block extra_css %}{% endblock %}
     </style>
 </head>

app/templates/transactions/form.html

@@ -2,17 +2,70 @@
 {% 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-8 col-lg-6">
+<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>
+    <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?") }}
+            {{ 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>
 
@@ -21,13 +74,15 @@
                 {{ 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") }}
+                    {{ 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 "")) }}
+                {{ form.date(class="form-control" + (" is-invalid" if form.date.errors else ""),
+                              id="field_date") }}
             </div>
         </div>
 
@@ -39,15 +94,15 @@
 
         <div class="mb-3">
             {{ form.category_id.label(class="form-label fw-medium", style="font-size:13px;") }}
-            {{ form.category_id(class="form-select") }}
+            {{ form.category_id(class="form-select", id="field_category") }}
         </div>
 
-        <div class="mb-4">
+        <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") }}
+            {{ form.notes(class="form-control", rows=2, placeholder="Optional notes", id="field_notes") }}
         </div>
 
-
+        <!-- Receipt section (edit mode only) -->
         {% if txn and txn.receipt %}
         <div class="mb-3 p-3" style="background:#f8fafc;border-radius:8px;">
             <div class="d-flex justify-content-between align-items-center">
@@ -57,22 +112,32 @@
                         {{ txn.receipt.original_filename }}
                     </a>
                 </div>
-                <form method="POST" action="{{ url_for('settings.delete_receipt', txn_id=txn.id) }}" onsubmit="return confirm('Delete receipt?')">
+                <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;padding:2px 8px;">Remove</button>
+                        <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;">Remove</button>
                     </form>
                 </div>
             </div>
+        </div>
         {% elif txn %}
         <div class="mb-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">
+            <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" class="form-control" accept=".png,.jpg,.jpeg,.gif,.pdf" style="font-size:12px;">
+                    <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, GIF, PDF — max 10MB</small>
+                <small class="text-muted" style="font-size:11px;">PNG, JPG, WEBP, PDF — max 10MB</small>
             </form>
         </div>
         {% endif %}
@@ -88,3 +153,167 @@
 </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.');
+    });
+}
+
+// ── 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 %}