💼 AI-Enabled B2B Invoice Management System

AI-powered fintech application for invoice management, payment delay prediction, and workflow automation

---

🌐 Live Demo

View Live App

---

🧠 Overview

The AI-Enabled B2B Invoice Management System is a full-stack fintech project designed to streamline invoice operations and improve payment visibility through machine learning.

This application helps businesses:

• manage invoice records efficiently
• predict expected payment delays
• identify late and high-risk invoices
• improve decision-making around accounts receivable workflows

The frontend delivers an interactive invoice dashboard, while the backend ML pipeline processes invoice data and generates payment delay predictions using a trained Random Forest Regressor.

---

✨ Features

📊 Invoice Dashboard

• Single-page invoice management interface at /
• Dark-themed UI with glass-morphism styling
• Branded header with HighRadius and ABC logos
• Clean, responsive table-driven workflow

📄 Invoice Table

Displays:

• Customer Name
• Customer Number
• Invoice Number
• Amount
• Due Date
• Predicted Payment Date
• Delay Badge
• Notes

Additional UI behavior:

• USD-formatted amounts
• Alternating row backgrounds
• Hover effects
• Click-to-select rows
• Color-coded prediction states

🤖 AI-Powered Payment Prediction

• Predicts payment delay in days using a Random Forest Regressor
• Shows predicted payment dates directly in the dashboard
• Highlights:
  • Late payments in red
  • On-time payments in green
• Delay badge logic:
  • 30+ days late → destructive red badge
  • 1–30 days late → default delay badge
  • On time / early → green badge

✏️ CRUD Operations

• Add Invoice

  • Dialog-based invoice creation
  • Fields: customer name, customer number, invoice ID, amount, due date, notes
  • Validation for all required fields except notes

• Edit Invoice

  • Enabled only when exactly one invoice is selected
  • Allows editing of amount and notes

• Delete Invoice

  • Supports bulk deletion
  • Confirmation dialog before removal

🔍 Search & Filter

• Real-time search by:
  • invoice ID
  • customer name
• Automatically resets to page 1 on new search

📑 Pagination

• 10 invoices per page
• Previous / Next navigation
• Page counter
• “Showing X–Y of Z” indicator

✅ Selection System

• Individual row checkbox
• Select-all toggle for current page
• Selection state controls Edit/Delete button availability

🧠 ML Model Info Card

Expandable model metadata card showing:

• Model: Random Forest Regressor
• R² Score: 0.4334
• MAE: 24.99 days
• RMSE: 45.69 days
• Training / Test split: 10,687 / 4,581 samples
• Top 5 feature importances:
  • Customer Identity
  • Customer Number
  • Invoice Amount
  • Due Day
  • Posting Day

🛣️ Routing

• / → Main invoice dashboard
• * → 404 Not Found page

✅ Testing

• Vitest setup for unit testing
• Playwright configuration for end-to-end testing

---

🏗️ Tech Stack

Category	Technologies
Frontend	React, TypeScript, Vite
Styling	Tailwind CSS, custom semantic tokens
UI Components	shadcn/ui
State / Routing	React Router
Backend / ML	Python
ML Libraries	scikit-learn, pandas, NumPy
Model	Random Forest Regressor
Testing	Vitest, Playwright
Deployment	Vercel

---

🧩 Architecture

                    ┌─────────────────────────────┐
                    │      React + TypeScript     │
                    │        Invoice Dashboard    │
                    └──────────────┬──────────────┘
                                   │
                                   │ displays invoice data +
                                   │ predicted payment dates
                                   │
                    ┌──────────────▼──────────────┐
                    │   Demo Dataset / Sample UI  │
                    │   15 invoices with ML-fed   │
                    │   predicted payment output   │
                    └──────────────┬──────────────┘
                                   │
                                   │ generated from
                                   │
                    ┌──────────────▼──────────────┐
                    │     Python ML Pipeline      │
                    │   data cleaning + features  │
                    │   model training + scoring  │
                    └──────────────┬──────────────┘
                                   │
                    ┌──────────────▼──────────────┐
                    │        CSV Datasets         │
                    │  NewDataset.csv / Archana   │
                    └─────────────────────────────┘

---

🤖 Machine Learning Pipeline

The backend ML logic is implemented in:

src/data/ml_pipeline.py

Pipeline Responsibilities

• Loads invoice data from NewDataset.csv
• Cleans and preprocesses invoice records
• Converts CAD to USD
• Parses dates
• Handles missing values
• Performs feature engineering
• Encodes categorical customer fields
• Trains and compares multiple regression models

Models Compared

• Linear Regression
• Random Forest
• Gradient Boosting

Selected Best Model

• Random Forest Regressor
• Chosen based on best R² score

Feature Engineering

• Day-of-month extraction from date fields
• Label encoding for:
  • customer identity
  • customer number

Model Output

• Predicted delay in days
• Converted into predicted payment dates shown in the frontend

---

📁 Datasets

public/NewDataset.csv

• Raw dataset containing 50K invoice records
• Original HighRadius invoice data source

public/HRC71251W_Archana.csv

• Preprocessed feature dataset used for ML workflow

---

📸 Screenshots

📊 Invoice Management Dashboard

---

📊 Demo Data Note

The frontend uses 15 sample invoices populated with ML-predicted payment dates.

This serves as a demo dataset that bridges:

• the Python model output
• the React invoice dashboard

This approach allows the UI to showcase prediction-driven workflows in a clean, interactive format.

---

⚙️ Installation & Setup

1. Clone the repository

git clone https://github.com/archanav12321/B2B-APP.git
cd B2B-APP

2. Move into the app directory

cd b2bApp

3. Install frontend dependencies

npm install

4. Run the development server

npm run dev

5. Build for production

npm run build

6. Preview production build

npm run preview

---

🧪 Testing

Run unit tests

npm run test

Run end-to-end tests

npx playwright test

---

🚀 Future Improvements

• Connect the dashboard to live backend/API data instead of demo invoice records
• Add invoice upload and ingestion workflow
• Add analytics charts for payment trends and customer behavior
• Add risk scoring for overdue invoices
• Introduce authentication and role-based access control
• Deploy the ML pipeline as a prediction API
• Support downloadable reports and CSV export

---

👩‍💻 Author

Archana Vellingiri Raja
MS in Computer Science | Full-Stack Developer | AI/ML Enthusiast

• GitHub
• LinkedIn

---

⭐ Why This Project Stands Out

This project demonstrates:

• real-world fintech problem solving
• full-stack frontend engineering with modern React tooling
• machine learning integration into business workflows
• practical prediction-based UI design
• clean product thinking, not just model training

It combines software engineering + machine learning + business use case alignment, making it a strong portfolio project for roles in:

• Full-Stack Development
• Frontend Engineering
• Product Engineering
• AI-Enabled Application Development

---

📜 License

This project is licensed under the MIT License.