Add Receipt Scanner Page for Automatic Expense Entry #999
Description
Add Receipt Scanner Page for Automatic Expense Entry
📌 Issue Summary
Add a Receipt Scanner page that allows users to upload a receipt image and automatically extract key expense details such as amount, date, and category. The extracted data should then auto-fill the expense form to make adding transactions faster and easier.
✅ Expected Features
Upload or drag-and-drop receipt image
Preview uploaded receipt
Extract text from receipt using OCR (Tesseract.js)
Detect important information such as:
Amount
Date
Merchant (if possible)
Auto-fill the transaction form with detected values
🎯 Tasks to Complete
Create a new Receipt Scanner page UI
Add file upload / drag-and-drop area for receipt images
Display preview of uploaded image
Integrate Tesseract.js for OCR text extraction
Parse extracted text to identify amount and date
Auto-fill the expense entry form with detected values
Ensure UI matches the project styling
💡 Suggested Tech
Frontend implementation can be done using:
HTML – Upload UI and form
CSS – Styling and layout
JavaScript – OCR processing and form auto-fill
Tesseract.js – Browser-based OCR library
🚀 Expected Outcome
Users will be able to scan receipts and quickly add expenses, improving usability and making the expense tracking process much faster.