Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Receipt and Invoice Scanner Mobile App is a web application designed to simplify the process of capturing, organizing, and analyzing receipts and invoices. Users can take photos, scan documents, or upload files to extract key financial data with OCR technology, enabling easy tracking of monthly spending and efficient document storage.

## CORE FEATURES
1. **User Registration and Authentication**: Secure sign-up and sign-in options to ensure user data privacy.
2. **Document Capture**: Allows users to capture receipts and invoices using the camera or upload from their device.
3. **OCR Data Extraction**: Automatically extracts key information such as merchant name, transaction date, and total amount from scanned documents.
4. **Monthly Spending Dashboard**: Provides a visual overview of total spending, category breakdowns, and trends over time.
5. **Receipt Vault**: A searchable archive where users can access all stored receipts and invoices.
6. **Category Management**: Users can edit existing categories, create custom categories, and apply tags for better organization.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The main layout will feature a responsive design with a top navigation bar, a central dashboard area for displaying monthly summaries, and side panels for navigation to features like document capture and receipt vault.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React Context API or Zustand for state management.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript, and install Tailwind CSS and shadcn/ui components.
2. **Create Authentication Flow**: Implement user registration and sign-in functionality with Firebase Auth or Auth0.
3. **Develop Document Capture Feature**: Integrate camera access using a library like `react-camera` for capturing images and a file upload component for selecting documents.
4. **Implement OCR Extraction**: Use a library such as Tesseract.js for OCR processing to extract data from images.
5. **Build Monthly Dashboard**: Create components to display total spending, number of receipts, and category breakdowns using charts and tables.
6. **Design Receipt Vault**: Develop a searchable archive interface where users can view and manage their uploaded documents.
7. **Add Category Management**: Create functionalities for users to edit categories and apply tags to expenses.
8. **Ensure Responsive Design**: Test and optimize the application for various screen sizes and devices.
9. **Implement Privacy Features**: Add user-controlled deletion and data export functionalities to meet privacy and security requirements.

## USER EXPERIENCE
Key user interactions will include a one-tap scan feature directly from the home dashboard, minimal typing required post-capture, and intuitive navigation between different months and categories. Users will receive confirmations after saving receipts, and they can easily search their vault by merchant, amount, or category. The dashboard will provide visual insights into spending habits, making it engaging and straightforward for users to understand their financial data.