AI-Powered Invoice Management System

An intelligent invoice management web app that uses AI to extract, organize, and manage invoice data from PDFs, images, and Excel files. Extracted data is automatically structured into three connected views — Invoices, Products, and Customers — with real-time editing, search, sorting, pagination, and one-click export.

🔗 Live demo: https://aipims.vercel.app/

---

✨ Features

AI-powered data extraction

• Upload PDF, PNG/JPG, or Excel (.xlsx) files.
• PDFs and images are parsed by Google Gemini to extract invoice information, line items, charges, totals, and bank details.
• Excel files are parsed server-side and grouped into invoices automatically.
• Per-file upload progress with success/error status and one-click retry for failed files.

Organized, connected views

• Invoices — invoice number, customer, editable date, line items, and an auto-calculated total per invoice.
• Products — a flat, sortable list of all line items with an aggregate totals row.
• Customers — customers grouped by name/phone with total purchase amount and bank details.
• Editing a value in one view updates it everywhere instantly via centralized Redux state.

Productivity tools

• 🔍 Search across each view.
• ↕️ Sorting on the Products table (product, quantity, rate, amount).
• 📄 Pagination for large datasets.
• 🗑️ Delete individual invoices/items or clear all data (with confirmation).
• 📤 Export to CSV or Excel.
• 💾 Local persistence — data is saved to localStorage and survives page reloads.
• ✅ Inline validation for numeric fields with automatic total recalculation.

Modern UI

• Clean, minimal, responsive interface built with Tailwind CSS v4.
• Reusable component system (navbar, page headers, toolbars, dialogs).
• Toast notifications for key actions.

---

🛠️ Tech Stack

Area	Technology
Framework	Next.js 16 (App Router, Turbopack)
Language	TypeScript 5
UI Library	React 19
Styling	Tailwind CSS v4, shadcn/ui (Radix primitives)
State	Redux Toolkit + React-Redux
AI	Google Gemini (@google/generative-ai)
Files	SheetJS (xlsx)
Icons	lucide-react
Toasts	react-hot-toast
Linting	ESLint 9 (flat config)
Hosting	Vercel

---

🚀 Getting Started

Prerequisites

• Node.js v18.18 or higher
• npm (or yarn/pnpm)
• A Google Gemini API key — get one here

Installation

1. Clone the repository:

   git clone https://github.com/thekavikumar/ai-powered-invoice.git
   cd ai-powered-invoice

2. Install dependencies:

   npm install

3. Create a .env.local file in the project root:

   API_KEY=your_gemini_api_key

4. Start the development server:

   npm run dev

5. Open http://localhost:3000.

Available scripts

Command	Description
npm run dev	Start the development server (Turbopack)
npm run build	Create an optimized production build
npm run start	Run the production build
npm run lint	Lint the project with ESLint

---

📁 Project Structure

.
├── public/                     # Static assets (preview.png, logo.png, svgs)
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── api/
│   │   │   ├── extract/        # AI extraction endpoint (PDF/image → Gemini)
│   │   │   └── processXlsx/    # Excel parsing endpoint
│   │   ├── customers/          # Customers page
│   │   ├── invoices/           # Invoices page
│   │   ├── products/           # Products page
│   │   ├── favicon.ico
│   │   ├── globals.css         # Tailwind v4 + theme tokens
│   │   ├── layout.tsx          # Root layout + SEO metadata
│   │   └── page.tsx            # Landing page
│   ├── assets/                 # Source images (banner, logo, preview)
│   ├── components/
│   │   ├── ui/                 # shadcn/ui primitives (button, dialog, input, label)
│   │   ├── CustomLink.tsx
│   │   ├── ExportButtons.tsx   # CSV/Excel export + clear all
│   │   ├── Navbar.tsx          # Sub-route navigation
│   │   ├── PageHeader.tsx
│   │   ├── Pagination.tsx
│   │   ├── ReduxWrapper.tsx    # Redux provider + localStorage persistence
│   │   ├── SearchBar.tsx
│   │   └── UploadBtn.tsx       # Upload dialog with per-file status
│   ├── lib/
│   │   ├── export.ts           # CSV/XLSX export helpers
│   │   ├── ui.ts               # Shared className constants
│   │   └── utils.ts            # cn() helper
│   └── redux/
│       ├── slices/
│       │   └── invoicesSlice.ts
│       └── store.ts
├── eslint.config.mjs           # ESLint 9 flat config
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── tailwind.config.ts
└── tsconfig.json

---

🔌 API Reference

POST /api/extract

Extracts structured data from a PDF or image using Google Gemini.

Request body

{
  "file": "<base64-encoded-file>",
  "mimeType": "application/pdf | image/png | image/jpeg"
}

Response

{
  "success": true,
  "data": "{ \"invoiceInformation\": {}, \"items\": [], \"chargesAndTotals\": {}, \"bankDetails\": {} }"
}

POST /api/processXlsx

Parses an Excel file and groups rows into invoices.

Request body

{
  "file": "<base64-encoded-xlsx>"
}

Response

{
  "success": true,
  "data": [
    {
      "invoiceInformation": {},
      "items": [],
      "chargesAndTotals": {}
    }
  ]
}

---

🧪 Tested Scenarios

1. Single invoice PDF
2. Invoice PDF + image together
3. Single Excel file
4. Multiple Excel files
5. Mixed file types in one upload

Missing fields are left blank and can be edited manually; failed uploads can be retried individually.

---

☁️ Deployment

The app is deployed on Vercel at https://aipims.vercel.app/.

To deploy your own instance:

1. Push the repository to GitHub.
2. Import it into Vercel.
3. Add the API_KEY environment variable in the project settings.
4. Deploy.

---

🤝 Contributing

1. Fork the repository.
2. Create a feature branch:

   git checkout -b feature-name

3. Commit your changes:

   git commit -m "Add new feature"

4. Push the branch:

   git push origin feature-name

5. Open a pull request.