AI Invoice Processing System

A robust, agentic workflow for automating invoice processing. This project uses a FastAPI backend to simulate AI extraction and a React frontend for a modern, interactive dashboard.

Features

• File Upload: Drag-and-drop support for PDF and Image invoices.
• AI Extraction (Simulated): Extracts vendor details, dates, line items, and totals.
• Agentic Decision Logic:
  • Auto-approves low-risk invoices (High confidence, < $5,000).
  • Flags high-value or low-confidence invoices for human review.
• Real-time Dashboard: View status, extracted data, and validation rules.

Tech Stack & Rationale

Backend

• FastAPI: Chosen for its speed and native support for asynchronous operations.
• Pydantic: data validation library to ensure extracted data accurately matches our schemas (InvoiceData, ProcessingResult).
• Python: The standard language for AI and Data Engineering.

Frontend

• React + Vite: For a fast, responsive Single Page Application (SPA).
• TailwindCSS: For rapid, utility-first styling.
• Lucide React: For consistent, clean iconography.

Project Structure

invoice-system/
├── backend/                 # Python/FastAPI Backend
│   ├── app/
│   │   ├── models.py        # Data schemas (Invoice, ValidationRule)
│   │   ├── services/
│   │   │   ├── agent.py     # Rule-based decision engine
│   │   │   └── extractor.py # Mock AI service (simulates OCR/LLM)
│   ├── main.py              # API Entry point
│   └── requirements.txt     # Python dependencies
│
└── frontend/                # React/Vite Frontend
    ├── src/
    │   ├── components/      # UI Components (Dashboard, UploadArea)
    │   ├── api.js           # API Client (Axios)
    │   └── App.jsx          # Main application logic
    ├── tailwind.config.js   # Styling configuration
    └── package.json         # Node dependencies

Setup Instructions

1. Backend Setup

The backend runs on port 8000.

cd backend
# Create virtual environment
python3 -m venv venv
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

# Run server
uvicorn main:app --reload

2. Frontend Setup

The frontend runs on port 5173.

cd frontend
# Install dependencies
npm install

# Run dev server
npm run dev

How It Works

1. Ingestion: User uploads a file via the React Frontend.
2. Extraction:
   • The backend receives the file.
   • MockExtractor simulates reading the invoice (in a real scenario, this would call GPT-4 or AWS Textract).
   • It returns structured JSON data (Vendor, Date, Items).
3. Agentic Evaluation:
   • AgentLogic inspects the data against business rules.
   • Rule 1: Is extraction confidence > 80%?
   • Rule 2: Is the total amount < $5,000?
   • If checks pass -> APPROVED.
   • If checks fail -> REVIEW_REQUIRED.
4. Display: The Frontend polls the results and displays them on the Dashboard with appropriate status badges.

Testing Scenarios

The MockExtractor is programmed to react to specific filenames for testing:

• Upload large_invoice.png -> Returns $12,500 total -> Flags for Review (High Value).
• Upload blurry_scan.png -> Returns low confidence -> Flags for Review (Uncertainty).
• Upload clean_invoice.png -> Returns standard data -> Auto-Approves.