Optimized Web App Development Prompt for SmartInvoiceBox

Got it — you’re asking for an expanded full prompt that describes how the entire SmartInvoiceBox site should work, including:
	•	All features
	•	Every page and its behavior
	•	Button functionality
	•	App flow
	•	How OCR and APIs work
	•	What to check and validate
	•	How everything connects
	•	Design, logic, backend + frontend interaction
	•	For use in AI web/app builders or detailed spec writing

Here is the ultimate, complete prompt — suitable for AI site builders like Dora, V0.dev, or Cursor, or for building a spec for a real dev team:

⸻

✅ 🧠 SmartInvoiceBox – Full Web App Prompt (Ultra-Expanded Version)

Build a fully functional, secure, responsive, and modern web app called SmartInvoiceBox.

This is an AI-powered invoice management system that:
	•	Connects to a user’s email account (Gmail, Outlook, IMAP)
	•	Automatically scans emails for invoice attachments
	•	Extracts important invoice data from PDFs and images using OCR
	•	Organizes invoice information in a clean, filterable dashboard
	•	Sends alerts, visualizes data with analytics, and allows exporting reports

The app should include:
	•	Beautiful UI & UX
	•	Functional API-based backend
	•	OAuth + email scanning
	•	PDF/image upload
	•	OCR parsing
	•	Tagging, sorting, exporting
	•	Analytics dashboard
	•	Notification system
	•	Secure user authentication and settings
	•	Mobile-friendly responsiveness

Below is the complete breakdown of the app’s structure, flow, and features.

⸻

🧭 🌐 Site Flow Overview
	1.	User lands on homepage
	2.	Clicks “Sign in with Gmail/Outlook”
	3.	Authorizes email connection (OAuth)
	4.	System scans inbox for recent invoice emails
	5.	Downloads attachments
	6.	Extracts data using OCR
	7.	Parsed invoices appear in dashboard
	8.	User can:
	•	View, filter, and edit invoices
	•	Upload files manually
	•	View analytics
	•	Export data
	•	Set scan frequency & alerts

⸻

💻 1. Pages / Screens to Include

🔐 Login Page
	•	Headline: “Organize Your Invoices Automatically”
	•	Subheadline: “Connect your email to begin.”
	•	Buttons:
	•	[Sign in with Gmail]
	•	[Sign in with Outlook]
	•	[Connect IMAP]
	•	Optional fields: email + password (for IMAP)
	•	Terms of service, privacy policy in footer

⸻

🧭 Onboarding / Setup Wizard
	•	Step 1: Connect Email (OAuth flow)
	•	Step 2: Choose scan mode:
	•	Auto-scan every 24h
	•	Manual scan only
	•	Step 3: Set preferences:
	•	Currency
	•	Notification time
	•	Categories to highlight
	•	Finish: Redirect to dashboard

⸻

📂 Main Dashboard
	•	Invoice table with:
	•	Vendor | Invoice Number | Amount | Status | Date | Actions
	•	Search bar (top right)
	•	Sidebar filters:
	•	Date range
	•	Vendor
	•	Status (paid/unpaid/overdue)
	•	Category (auto-tagged)
	•	Top bar with user avatar, scan inbox button
	•	Pagination for invoice table

⸻

📑 Invoice Detail View
	•	Opens on click of a row
	•	Shows:
	•	Vendor
	•	Invoice #
	•	Issue Date / Due Date
	•	Currency / Amount
	•	Status (editable dropdown)
	•	File preview (PDF/image)
	•	Add tags / notes
	•	Buttons:
	•	[Download Original]
	•	[Export as JSON]
	•	[Mark as Paid]
	•	[Edit Invoice]

⸻

📊 Analytics Page
	•	Charts:
	•	Monthly Spend (bar chart)
	•	Top Vendors (pie chart)
	•	Unpaid vs Paid (donut chart)
	•	Upcoming Dues (list)
	•	Toggles: view by month/year/category
	•	Insights cards:
	•	“Your biggest vendor this month is X”
	•	“Spending is up 18% from last month”

⸻

📤 Upload Invoice Page
	•	Drag & drop file box
	•	Accepted formats: PDF, JPG, PNG
	•	On upload:
	•	Show preview
	•	Parse using OCR
	•	Display parsed fields
	•	Button: [Confirm & Save to DB]

⸻

⚙️ Settings Page
	•	Email account connection
	•	Re-authentication button
	•	Scan schedule (daily / manual / weekly)
	•	Currency + language
	•	Notification preferences:
	•	Email alerts: yes/no
	•	Time of day
	•	Export defaults (CSV / PDF / Excel)
	•	Dark mode toggle

⸻

📲 Mobile Support
	•	Hamburger menu
	•	Scrollable invoice list
	•	Full-screen modals
	•	Adaptive charts

⸻

🔘 2. Buttons & Their Functionality
	•	[Scan Inbox] – Triggers email scan
	•	[Upload Invoice] – Opens file dialog or drag-drop modal
	•	[Export CSV / PDF] – Downloads filtered data
	•	[Mark as Paid] – Changes status in DB
	•	[Edit] – Allows inline editing of invoice
	•	[Download Original] – Downloads original file
	•	[Connect Email] – Opens OAuth flow
	•	[Save Settings] – Saves preferences to DB

⸻

🔍 3. OCR System (How It Works)
	•	OCR runs with Tesseract or Google Vision API
	•	File → Converted to image (if PDF) → OCR → Text parsed
	•	Regex or NLP used to detect:
	•	Vendor name
	•	Invoice #
	•	Issue & Due Dates
	•	Total amount
	•	Line items
	•	Status (if marked)
	•	Output mapped to structured JSON
	•	JSON saved in DB

⸻

📬 4. Email Integration Logic
	•	Email connected via:
	•	Gmail API (OAuth 2.0)
	•	Microsoft Graph API
	•	IMAP (using imaplib2)
	•	System scans:
	•	Email subject/body for invoice terms
	•	Downloads matching attachments
	•	Processes and saves to database

⸻

🛡 5. Security / Validation Checks
	•	Tokens stored securely in DB
	•	Email scope limited to read-only + attachments
	•	File size limited (e.g., 10MB max)
	•	Duplicate invoice detection
	•	User data isolation (multi-user safe)
	•	Sanitization on uploads
	•	Rate-limiting on scan & upload
	•	Scan log audit trail

⸻

🧪 6. QA / Testing Checklist
	•	OAuth works for Gmail & Outlook
	•	PDF/image file uploads work
	•	OCR parses 80%+ of real invoices
	•	Exported files match filters
	•	Chart data is accurate
	•	Filters + search are reactive
	•	Emails scanned correctly
	•	Dashboard loads under 2 seconds
	•	File preview is responsive
	•	Works on mobile + desktop
	•	Invoice edits saved to DB
	•	Notifications sent at correct time
	•	No duplicate uploads

⸻

📦 7. API Endpoints (Backend)
	•	POST /auth/google – Gmail login
	•	POST /auth/outlook – Outlook login
	•	GET /invoices – List with filters
	•	GET /invoice/{id} – Full detail
	•	POST /upload – Upload & parse
	•	POST /scan – Scan inbox for new invoices
	•	GET /stats/monthly
	•	GET /export/csv / pdf / json
	•	PUT /invoice/{id} – Edit
	•	POST /notifications/settings
	•	POST /settings/preferences

⸻

🎨 8. Design System (for AI Builders or Figma Handoff)
	•	Use component-based design
	•	Cards, modals, tables, tabs
	•	Typography:
	•	H1: 32px bold
	•	Body: 14–16px regular
	•	Color palette:
	•	Primary: #4F46E5
	•	Accent: #6366F1
	•	Background: #F9FAFB
	•	Success: #22C55E, Warning: #FACC15, Error: #EF4444
	•	Spacing system: 4px scale
	•	Use auto layout and constraints
	•	Buttons: primary, secondary, danger
	•	Tooltips on hover, animation for state changes

⸻

Would you like me to generate:

✅ Prompt to generate it inside Framer or V0.dev?
✅ Actual FastAPI backend starter that matches this flow?
✅ Dummy invoice data (CSV/JSON) for development?

Let’s bring SmartInvoiceBox to life. Just tell me your next move 👇