🧾 Invoice AI - Intelligent Invoice Processing System

An AI-powered invoice processing system that transforms PDF invoices into structured JSON data with intelligent extraction and management capabilities.

🚀 Demo • 📋 Features • 🛠️ Installation • 📖 API Documentation • 🤝 Contributing

🌟 Overview

Invoice AI is a cutting-edge full-stack application that revolutionizes invoice processing by combining the power of OpenAI's GPT-3.5 with modern web technologies. Upload PDF invoices and watch as our AI intelligently extracts structured data, stores it in MongoDB, and presents it through an elegant, responsive dashboard.

🎯 Key Highlights

🤖 AI-Powered Extraction: Leverages OpenAI GPT-3.5-turbo for intelligent invoice data parsing
📱 Modern UI/UX: Built with React 18, TypeScript, and Tailwind CSS for exceptional user experience
🔄 Real-time Processing: Instant feedback with progress indicators and notifications
🗃️ Smart Storage: MongoDB integration with duplicate detection and version control
🔗 SAP Integration: Ready-to-use SAP-compatible data formatting
📊 Analytics Dashboard: Comprehensive invoice management and tracking

🚀 Features

Core Functionality

✅ Multi-file PDF Upload - Process multiple invoices simultaneously
✅ Intelligent Data Extraction - Extract 15+ key invoice fields automatically
✅ Duplicate Detection - Prevent duplicate invoice processing
✅ Real-time Processing Status - Live updates during AI processing
✅ JSON Export - Clean, structured data output
✅ Invoice Management - Full CRUD operations on processed invoices

Data Extraction Capabilities

📄 Invoice details (number, date, PO number)
👤 Customer information (name, address, PAN, GST)
🏢 Seller information (details, address)
🛍️ Itemized purchases (name, quantity, price, subtotal)
💰 Financial data (CGST, SGST, total amounts)
💱 Currency information
📝 Total amount in words

Technical Features

🎨 Modern Design System - Radix UI components with custom styling
📱 Responsive Design - Works flawlessly on all devices
🔒 Secure Processing - Environment-based API key management
🚄 Fast Performance - Optimized React 18 with efficient state management
🎯 Type Safety - Full TypeScript implementation

🛠️ Tech Stack

Frontend

Technology	Version	Purpose
React	18.3.1	Core frontend framework
TypeScript	4.9.5	Type safety and developer experience
Tailwind CSS	3.4.12	Utility-first styling framework
Radix UI	Latest	Accessible component primitives
React Router	6.26.2	Client-side routing
Lucide React	0.441.0	Modern icon library

Backend

Technology	Purpose
Python Flask	RESTful API framework
OpenAI API	AI-powered text processing
PyMuPDF	PDF text extraction
MongoDB	NoSQL database for invoice storage
Flask-CORS	Cross-origin resource sharing

🚀 Quick Start

Prerequisites

Node.js 16+ and npm
Python 3.8+ and pip
MongoDB (local or cloud instance)
OpenAI API Key (get one at platform.openai.com)

Frontend Setup

# Clone the repository
git clone https://github.com/yourusername/invoice-ai.git
cd invoice-ai

# Install dependencies
npm install

# Start development server
npm start

The frontend will be available at http://localhost:3000

Backend Setup

# Navigate to backend directory (if separate)
cd backend

# Install Python dependencies
pip install flask flask-cors pymupdf openai pymongo python-dotenv

# Set up environment variables
export OPENAI_API_KEY="your-openai-api-key-here"

# Start Flask server
python api.py

The API will be available at http://localhost:5000

Environment Configuration

Create a .env file in your backend directory:

OPENAI_API_KEY=your_openai_api_key_here
MONGODB_URI=mongodb://localhost:27017/
DATABASE_NAME=invoiceDB
PORT=5000

📖 API Documentation

Base URL

http://localhost:5000

Endpoints

📤 Process Invoices

POST /process_invoice
Content-Type: multipart/form-data

Request Body:

files: Multiple PDF files

Response:

{
  "filename.pdf": {
    "Details": {
      "invoice_details": {
        "invoice_number": "INV-001",
        "invoices_date": "2024-01-15",
        "customer_name": "John Doe",
        "total_amount_with_gst": 1180.00
      }
    },
    "duplicate": false,
    "processed_at": "13-09-2024 01:12:30"
  }
}

📋 Get All Invoices

GET /invoices

Response:

[
  {
    "filename": "invoice_001.pdf",
    "customer_name": "John Doe",
    "invoice_number": "INV-001",
    "invoices_date": "2024-01-15",
    "total_amount_with_gst": 1180.00,
    "processed_at": "13-09-2024 01:12:30"
  }
]

🔍 Get Invoice Details

GET /invoice/<filename>

✏️ Update Invoice

POST /update_invoice
Content-Type: application/json

🔗 SAP Integration

GET /postSap/<filename>

🎨 UI Components

Available Scripts

# Development server
npm start

# Build for production
npm run build

# Run tests
npm test

# Eject configuration (one-way operation)
npm run eject

Custom Components

File Upload Dropzone - Drag & drop PDF upload interface
Processing Status Cards - Real-time extraction progress
Invoice Data Viewer - JSON tree view with editing capabilities
Dashboard Analytics - Invoice statistics and trends
Responsive Navigation - Mobile-first navigation system

🏗️ Project Structure

invoice-ai/
├── 📁 public/
│   ├── index.html
│   └── manifest.json
├── 📁 src/
│   ├── 📁 components/
│   │   ├── ui/              # Reusable UI components
│   │   ├── forms/           # Form components
│   │   └── dashboard/       # Dashboard components
│   ├── 📁 pages/            # Route components
│   ├── 📁 hooks/            # Custom React hooks
│   ├── 📁 utils/            # Utility functions
│   ├── 📁 types/            # TypeScript type definitions
│   └── App.tsx
├── 📁 backend/
│   ├── api.py               # Flask API server
│   └── requirements.txt     # Python dependencies
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── README.md

🧪 Testing

# Run all tests
npm test

# Run tests with coverage
npm test -- --coverage

# Run tests in watch mode
npm test -- --watch

🚀 Deployment

Frontend (Vercel/Netlify)

# Build production bundle
npm run build

# Deploy to Vercel
vercel --prod

# Or deploy to Netlify
netlify deploy --prod --dir=build

Backend (Heroku/Railway)

# Install Gunicorn
pip install gunicorn

# Create Procfile
echo "web: gunicorn api:app" > Procfile

# Deploy to Heroku
heroku create your-app-name
git push heroku main

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Development Workflow

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

OpenAI for providing powerful AI capabilities
Vercel for hosting and deployment platform
MongoDB for reliable database solutions
React Team for the amazing frontend framework
Tailwind CSS for the utility-first CSS framework

Made with ❤️ by TechnoAS

⭐ Star this repo if it helped you! ⭐

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
python/python		python/python
react		react
LICENSE		LICENSE
README.md		README.md

License

TechnoAS/EazyInvoice

Folders and files

Latest commit

History

Repository files navigation