InvoicePro - Professional Invoice Management System

This README describes how to run the frontend and how it integrates with the backend service (invoice_generator_server) that provides the API and database.

InvoicePro Logo

This repository contains the React frontend for the Invoice Generator project. It pairs with the invoice_generator_server backend (Prisma + Express) located

A modern, feature-rich invoice generation platform with GST compliance, subscription management, and real-time analytics.

🎯 Overview : The backend runs on port `3001` by default and uses Prisma to connect to a PostgreSQL database.

InvoicePro is a comprehensive SaaS-based invoice management system designed specifically for Indian businesses. It provides GST-compliant invoice generation, customer relationship management, inventory tracking, and subscription-based access control with a clean, intuitive user interface.

Why InvoicePro?

✅ GST Compliant: Automatic CGST, SGST, and IGST calculations.
✅ Subscription-Based: Flexible pricing with 7-day trial and usage limits- PostgreSQL (or a hosted DB) for the backend
✅ Real-time Analytics: Dashboard with charts, metrics, and payment reminders.
✅ Professional PDFs: Generate print-ready invoices.
✅ Cloud-Based: Access from anywhere with secure authentication
✅ Mobile Responsive: Fully responsive design optimized for all devices
✅ Professional Landing Page: Marketing website with features showcase and pricing

🌐 Live Demo: https://invoice-generator-theta-olive.vercel.app

Key Features

npm install
🔐 Authentication & Authorization 

- Supabase Auth Integration: Email/password authentication with session management

- Protected Routes: Role-based access control with route guards2.

- Auto-login: Persistent sessions with automatic token refresh

- Profile Management: Complete company profile with GST and bank details create.

📊 Dashboard & Analytics

- Real-time Metrics: Total revenue, invoices, customers, and pending payments.

- Interactive Charts: Monthly revenue trends and invoice status distribution

- Payment Reminders: Automatic tracking of overdue invoices.

- GST Summary: CGST, SGST, IGST breakdown with compliance status

- Quick Actions: Fast access to create invoice, add customer, etc.



💳 Subscription Management

- Trial System: 7-day free trial with 10 invoice limit.
- Multiple Plans: FREE, BASIC, PROFESSIONAL, ENTERPRISE tiers with varying limits.
  - FREE: ₹0 (Trial - 10 invoices, 50 customers, 100 items)
  - BASIC: ₹499/month (100 invoices, 200 customers, 500 items).
  - PROFESSIONAL: ₹999/month (Unlimited everything).
  - ENTERPRISE: ₹2499/month (Unlimited + premium support)

- Usage Tracking: Real-time invoice, customer, and item usage counters.
- Auto-expiry: Automatic trial expiration and renewal reminders
- Upgrade Prompts: In-app notifications when nearing limits

📄 Invoice Management

- Invoice Creation: Multi-step wizard with real-time validation.
- GST Calculations: Automatic tax computation based on customer state.
- PDF Generation: Professional A4 invoices.
- Bulk Operations: Filter, search, export, and manage multiple invoices 
- Status Tracking: Draft, Sent, Paid, Overdue with color coding
- Preview Mode: See exactly how invoice will look before saving


👥 Customer Management

- Customer Database: Comprehensive client information storage.
- GST Details: GSTIN, PAN, and state for tax calculations.
- Purchase History: Track all invoices per customer with totals.
- Customer Analytics: Real-time calculation of total invoiced, paid, and outstanding amounts
- Invoice History Modal: View complete transaction history with status tracking
- Quick Actions: Add, edit, delete with inline validation.
- Search & Filter: Find customers quickly by name, company, or GSTIN.
- Shimmer Loading: Professional skeleton loaders while fetching data


📦 Items/Products Management `Item`, `Invoice`, etc.

- Inventory Tracking: Manage products and services catalog.
- Pricing Control: Set rates, tax rates, HSN/SAC codes, and units
- Reusable Items: Quick selection during invoice creation with autofill.
- Bulk Import: CSV upload for bulk item addition.


📈 Reports & Compliance

- GST Reports: GSTR-1 and GSTR-3B ready data exports.
- Revenue Reports: Monthly, quarterly, yearly revenue breakdowns.
- Export Options: CSV, Excel, PDF formats.
- Tax Summaries: Detailed CGST, SGST, IGST calculations for compliance.

🎨 UI/UX Features

- Modern Design: Clean, professional interface with Tailwind CSS
- Fully Responsive: Mobile-first design optimized for all devices (320px to 1920px+)
- Skeleton Loaders: Smooth loading animations for dashboard, tables, and forms
- Toast Notifications: User-friendly notifications using react-toastify (success, error, warning, info)
- Error Handling: Comprehensive error messages with actionable suggestions
- Landing Page: Professional marketing site with features, pricing, testimonials
- Accessibility: Keyboard navigation and screen reader support


🛠️ Tech Stack

Frontend Framework - 
- React 18.x - Modern UI library with hooks and concurrent features.
- Vite 5.x - Lightning-fast build tool and dev server with HMR.
- React Router DOM 6.x - Client-side routing with nested routes.

Styling & UI - 
- Tailwind CSS 3.x - Utility-first CSS framework with responsive utilities
- Lucide React - Beautiful, consistent icon library (600+ icons)
- react-toastify 11.x - Toast notification system for user feedback
- Custom Components - Reusable UI component library (buttons, inputs, modals)
- Skeleton Loaders - Custom loading animations for better UX

State Management & Data -
- Context API - Global state management (AuthContext, SubscriptionContext).
- Axios - Promise-based HTTP client with interceptors	for API calls.
- React Hooks - useState, useEffect, useContext, useNavigate, and custom hooks name, companyName, address, city, state, pincode, country, phone, email, EximCode, gstin, pan

Authentication	

- Supabase - Backend-as-a-Service for authentication and user management
- JWT Tokens - Secure API authentication with Bearer tokens.
- Express REST API - Node.js backend server (separate repository)	authenticated user (if present).

PDF Generation - 
- jsPDF - Client-side PDF generation library
- jsPDF-AutoTable - Table generation plugin for invoices
- Custom PDF Service - GST-compliant invoice template engine

Development Tools - 
- ESLint - Code linting with React and accessibility rules.
- PostCSS - CSS processing with Tailwind plugin.
- Autoprefixer - Automatic vendor prefixing for CSS.

Setup (frontend)

Clone the repository

git clone https://github.com/rupeshv2121/invoice_generator.git1. Start backend and frontend cd invoice_generator

Install dependencies
```
npm install
```
Configure environment variables

Create a .env file in the root directory:
1. Update the backend DTO schema (zod) in invoice_generator_server/src/dto
2. Update the Prisma schema and run migrations VITE_SUPABASE_URL=your_supabase_project_url
3. Regenerate the Prisma client (npx prisma generate) VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
4. Keep the frontend DTOs and field names aligned with backend DTOs VITE_API_BASE_URL=http://localhost:3001
Start the backend server -

In a separate terminal, navigate to the backend folder and start the server:
```
cd ../invoice_generator_server

nodemon index.js
```
Open in browser
```
http://localhost:5173
```

Deployment

Live Deployments:

Frontend (Vercel): https://invoice-generator-theta-olive.vercel.app
Backend (Vercel): https://invoice-generator-server-five.vercel.app

Deploy to Vercel:

Frontend Deployment:

# Install Vercel CLI
npm i -g vercel

# Deploy
cd invoice_generator
vercel --prod

Backend Deployment:

cd invoice_generator_server
vercel --prod

Environment Variables:
- Set environment variables in Vercel dashboard
- Update VITE_API_BASE_URL to production backend URL
- Update FRONTEND_URL in backend to production frontend URL
Database:
- Use Supabase hosted PostgreSQL or other cloud database
- Update DATABASE_URL in backend environment variables

Important Configuration Files:

vercel.json - Routing configuration for SPA
vite.config.js - Build configuration
.env.production - Production environment variables

📁 Project Structure

invoice_generator/

├── public/                     # Static assetsBuild / preview

├── src/

│   ├── api/                    # API service layernpm run build

│   │   ├── api.js              # Axios instance with interceptorsnpm run serve

│   │   ├── customers.js        # Customer CRUD operations

│   │   ├── invoice.js          # Invoice CRUD operations

│   │   ├── items.js            # Items CRUD operations

│   │   ├── myCompany.js        # Company profile management- Customers: frontend sends a flat object matching backend DTO

│   │   ├── subscription.js     # Subscription API calls	`{ name, companyName, address, city, state, pincode, country, phone, email, EximCode, gstin, pan }`

│   │   └── dashboard.js        # Dashboard data fetching-from the authenticated user. Keep DTOs in sync (backend: `src/dto/*`).

│   ├── components/             # Reusable React components

│   │   ├── ui/                 # Base UI componentsDebugging tips

│   │   │   ├── Button.jsx      # Customizable button component

│   │   │   ├── Input.jsx       # Form input with validation

│   │   │   ├── Modal.jsx       # Modal dialog component	tab to inspect requests and server responses.

│   │   │   ├── Select.jsx      # Dropdown select component

│   │   │   ├── Checkbox.jsx    # Checkbox component

│   │   │   ├── Header.jsx      # App header with navigation

│   │   │   ├── Breadcrumb.jsx  # Breadcrumb navigation

│   │   │   └── QuickActionButton.jsx # Floating action button

│   │   ├── SubscriptionBanner.jsx     # Trial/expiry banners

│   │   ├── SubscriptionStatusCard.jsx # Subscription widget

│   │   ├── ErrorBoundary.jsx   # Error boundary wrapper

│   │   ├── ProtectedRoute.jsx  # Route authentication wrapper

│   │   └── ScrollToTop.jsx     # Auto-scroll on route change

│   ├── context/                # React Context providers

│   │   ├── AuthContext.jsx    # Authentication state & methods

│   │   └── SubscriptionContext.jsx  # Subscription state & limits

│   ├── pages/                  # Page components (routes)

│   │   ├── dashboard/          # Dashboard pageEnd of frontend guide.
│   │   │   ├── index.jsx
│   │   │   └── components/
│   │   │       ├── MetricsCard.jsx
│   │   │       ├── InvoiceChart.jsx
│   │   │       ├── RecentInvoicesTable.jsx
│   │   │       ├── PaymentReminders.jsx
│   │   │       ├── GSTSummary.jsx
│   │   │       └── QuickActions.jsx
│   │   ├── invoice-creation/   # Invoice creation wizard
│   │   │   ├── index.jsx
│   │   │   └── components/
│   │   │       ├── CompanyCustomerSelector.jsx
│   │   │       ├── InvoiceDetailsSection.jsx
│   │   │       ├── InvoiceItemsTable.jsx
│   │   │       ├── InvoicePreviewModal.jsx
│   │   │       └── BankDetailsSection.jsx
│   │   ├── invoice-list/       # Invoice listing & management
│   │   │   ├── index.jsx
│   │   │   └── components/
│   │   ├── customer-management/ # Customer CRUD
│   │   │   ├── index.jsx
│   │   │   └── components/
│   │   │       ├── CustomerModal.jsx
│   │   │       ├── CustomerTable.jsx
│   │   │       ├── CustomerFilters.jsx
│   │   │       ├── CustomerStats.jsx
│   │   │       └── CustomerHistoryModal.jsx  # Real invoice data & analytics
│   │   ├── items-management/   # Items/products CRUD
│   │   │   ├── index.jsx
│   │   │   └── components/
│   │   ├── company-profile/    # Company settings
│   │   │   ├── index.jsx
│   │   │   └── components/
│   │   ├── pricing/            # Subscription plans page
│   │   │   └── index.jsx
│   │   ├── login/              # Login page
│   │   │   └── index.jsx
│   │   ├── register/           # Registration page
│   │   │   └── index.jsx
│   │   ├── setup/              # Setup wizard
│   │   │   └── index.jsx
│   │   ├── reports/            # Reports & analytics
│   │   │   └── index.jsx
│   │   ├── settings/           # App settings
│   │   │   └── index.jsx
│   │   ├── pdf-preview/        # PDF testing page
│   │   │   └── index.jsx
│   │   └── NotFound.jsx        # 404 page
│   │
│   ├── services/               # Business logic services
│   │   ├── pdfService.js      # PDF generation logic
│   │   ├── settingsService.js # App settings & localStorage
│   │   └── simplePdfService.js # Simple PDF templates
│   │
│   ├── styles/                 # Global styles
│   │   ├── index.css          # Base styles & Tailwind imports
│   │   └── tailwind.css       # Tailwind configuration
│   │
│   ├── utils/                  # Utility functions
│   │   ├── cn.js              # Class name merger (clsx)
│   │   └── numberUtils.js     # Number formatting (Indian)
│   │
│   ├── App.jsx                # Root component wrapper
│   ├── Routes.jsx             # Route configuration
│   ├── main.jsx               # React entry point
│   └── supabaseClient.js      # Supabase SDK initialization
│
├── .env                        # Environment variables (gitignored)
├── .eslintrc.json             # ESLint configuration
├── .gitignore                 # Git ignore rules
├── index.html                 # HTML template
├── package.json               # Dependencies & scripts
├── postcss.config.js          # PostCSS configuration
├── tailwind.config.js         # Tailwind theme & plugins
├── vite.config.js             # Vite build configuration
└── README.md                  # This file

🎨 Features in Detail

1. Authentication System

Registration Flow:

Step 1: Personal Information
- Full name, email, phone number
- Email format validation
- Phone number format check
Step 2: Business Information
- Company name
- GST registered checkbox
- GSTIN input (with format validation if checked)
Step 3: Account Credentials
- Password with strength indicator
- Confirm password matching
- Terms & privacy policy acceptance
Backend Actions:
- Creates Supabase Auth user
- Stores metadata (name, company, GST info)
- Sends verification email (if enabled)

Login Flow:

Email/password authentication
"Remember me" checkbox for persistent sessions
Auto-redirect to /setup if company profile not created
Auto-redirect to /dashboard if profile exists

Setup Wizard:

Purpose: Complete company profile after registration
Step 1: Company details (name, phone, email, website)
Step 2: Address (street, city, state, pincode, country)
Step 3: GST & Tax (GSTIN, PAN, ARN, IEC code)
Step 4: Bank details (name, account, IFSC, branch)
Auto-actions: Creates trial subscription after completion
Pre-fill: Uses data from registration metadata

2. Subscription System

How It Works:

Trial Creation: Automatically created when setup wizard completes
- Status: TRIAL
- Duration: 7 days from creation
- Limits: 10 invoices, 50 customers, 100 items
- Price: ₹0
Usage Tracking: Every action increments counters
- Invoice creation → invoicesUsed++
- Customer creation → checked against customersLimit
- Item creation → checked against itemsLimit
Limit Enforcement: Backend middleware blocks when limits reached
- Returns 403 error with message
- Frontend shows upgrade prompt
Expiry Handling: Check on every protected route
- If expired → Redirect to /pricing
- Show modal: "Your trial has ended"

Visual Indicators:

Banner (Dashboard):
- Blue: Trial active (5-7 days left)
- Orange: Trial expiring (1-2 days left)
- Red: Trial expired
- Amber: Invoice limit warning (<10 left)
Status Card (Sidebar):
- Plan badge with color coding
- Days remaining countdown
- Invoice usage progress bar
- Customers & items limits display
Header Badge (All Pages):
- Crown icon
- "Trial: Xd left" or plan name
- Click → Go to pricing page

3. Invoice Creation Workflow

Step-by-Step:

Select Company & Customer
- Dropdown with search
- Shows company name and GSTIN
- Auto-fills customer state for tax calculation
Invoice Details
- Invoice number (auto-generated or manual)
- Invoice date (defaults to today)
- Due date (defaults to 30 days later)
- Place of supply (for GST)
Add Line Items
- Select from items catalog or add custom
- Enter quantity and rate
- Auto-calculate amount
- Auto-calculate taxes:
  - Same state: CGST (9%) + SGST (9%)
  - Different state: IGST (18%)
- Show subtotal, tax totals, grand total
Additional Info
- Notes/remarks
- Terms & conditions
- Bank details (from company profile)
Preview & Save
- See exact PDF layout
- Edit if needed
- Save as draft or finalize
Generate PDF
- Click "Download PDF"
- Professional A4 invoice
- Filename: Invoice_INV001_CompanyName.pdf

GST Calculation Logic:

// Same state (e.g., Maharashtra to Maharashtra)
CGST = (amount × 9%) / 100
SGST = (amount × 9%) / 100
IGST = 0
Total Tax = CGST + SGST

// Different state (e.g., Maharashtra to Karnataka)
CGST = 0
SGST = 0
IGST = (amount × 18%) / 100
Total Tax = IGST

4. Dashboard Analytics

Metrics Cards:

Total Revenue: Sum of all paid invoices (current month)
Total Invoices: Count of all invoices (all time)
Active Customers: Count of customers with at least one invoice
Pending Payments: Sum of unpaid/overdue invoices

Charts:

Monthly Revenue Trend: Line/bar chart showing last 6 months
Invoice Status Distribution: Pie/donut chart (Draft, Sent, Paid, Overdue)

Widgets:

Recent Invoices: Last 5 invoices with quick actions
Payment Reminders: Overdue invoices sorted by due date
GST Summary: CGST, SGST, IGST breakdown with totals
Quick Actions: Shortcut buttons to create invoice, add customer, etc.

5. PDF Generation

Template Features:

Header Section:
- Company logo (left)
- Invoice title & number (center)
- Invoice date & due date (right)
Company Details (left column):
- Company name (bold)
- Full address
- GSTIN, PAN, State
- Phone & email
Customer Details (right column):
- Billing to label
- Customer name & company
- Full address
- GSTIN (if available)
Invoice Table:
- Columns: Sr.No, Description, HSN, Qty, Unit, Rate, Amount, GST%, Tax Amount, Total
- Auto-fills 12 rows minimum (fills empty with serial numbers)
- Row borders and zebra striping
Totals Section:
- Subtotal (before tax)
- CGST / SGST or IGST breakdown
- Grand total (bold, large font)
Bank Details Section:
- Bank name
- Account number
- IFSC code
- Branch
Footer:
- Terms & conditions
- Authorized signatory
- Company seal (if uploaded)

Technical Details:

Format: PDF (A4 size - 210mm × 297mm)
Library: jsPDF + jsPDF-AutoTable
Font: Helvetica (default)
Colors: Professional blue header (#4F46E5)
Margins: 15mm all sides
Minimum Rows: 12 (for consistent layout)

6. Loading States & Skeleton Loaders

Skeleton Component Types:

SkeletonBox: Basic rectangular skeleton for text/content blocks
SkeletonCircle: Circular skeleton for avatars/icons
SkeletonCard: Card-style skeleton with header and content
SkeletonTable: Table skeleton with rows and columns
SkeletonMetricsCard: Dashboard metric card skeleton
SkeletonInvoiceForm: Invoice creation form skeleton
SkeletonCustomerTable: Customer list table skeleton
SkeletonDashboard: Full dashboard loading state

Implementation:

import SkeletonLoader from '@/components/SkeletonLoader';

{loading ? (
  <SkeletonLoader variant="table" />
) : (
  <DataTable data={items} />
)}

Benefits:

Improves perceived performance
Reduces user frustration during data fetching
Maintains layout stability (no content jumping)
Professional, polished user experience

7. Toast Notifications

Implementation:

import { toast } from 'react-toastify';

// Success notification
toast.success('Customer created successfully!');

// Error notification
toast.error('Failed to save invoice');

// Warning notification
toast.warning('Invoice limit reached');

// Info notification
toast.info('Trial expires in 2 days');

Configuration:

Position: Top-right
Auto-close: 3 seconds
Theme: Light
Features: Draggable, pauseOnHover, closeButton

Usage Throughout App:

Customer management (create, update, delete)
Invoice operations (save, send, delete)
Item management (add, edit, remove)
Company profile updates
Settings changes
Authentication actions
Error handling

🔧 Environment Variables

Create a .env file in the root directory:

# Supabase Configuration
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here

# Backend API Base URL (Development)
VITE_API_BASE_URL=http://localhost:3001

# Backend API Base URL (Production)
# VITE_API_BASE_URL=https://invoice-generator-server-five.vercel.app

# Optional: Frontend URL for redirects
VITE_FRONTEND_URL=http://localhost:5173

# Frontend URL (Production)
# VITE_FRONTEND_URL=https://invoice-generator-theta-olive.vercel.app

How to Get Supabase Credentials:

Go to supabase.com and create an account
Create a new project
Go to Settings → API
Copy the following:
- Project URL → VITE_SUPABASE_URL
- anon/public key → VITE_SUPABASE_ANON_KEY

📜 Scripts

# Development
npm start              # Start Vite dev server on port 5173
npm run dev            # Alternative start command

# Production Build
npm run build          # Build optimized production bundle
npm run serve          # Preview production build locally

# Code Quality
npm run lint           # Run ESLint to check code quality
npm run format         # Auto-format code with Prettier (if configured)

# Testing (future)
npm test               # Run unit tests with Vitest
npm run test:e2e       # Run end-to-end tests with Playwright

Build Output:

Production files generated in dist/ folder
Optimized JavaScript bundles with code splitting
Minified CSS with Tailwind purge
Optimized images and assets

🏗️ Architecture & Design Patterns

Component Architecture

Atomic Design: Components organized by complexity
- Atoms: Button, Input, Checkbox
- Molecules: FormField, SearchBar, Card
- Organisms: Header, InvoiceTable, CustomerModal
- Templates: DashboardLayout, InvoiceLayout
- Pages: Dashboard, InvoiceCreation

Responsive Design Strategy

Mobile-First Approach:

Base styles for mobile (320px+)
Progressive enhancement with breakpoints:
- sm: - 640px (tablets)
- md: - 768px (small desktops)
- lg: - 1024px (desktops)
- xl: - 1280px (large desktops)

Responsive Patterns:

// Stack vertically on mobile, horizontal on desktop
className="flex flex-col md:flex-row gap-4"

// Grid: 1 column mobile, 2 tablet, 3 desktop
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"

// Text sizing
className="text-base sm:text-lg lg:text-xl"

// Spacing
className="gap-4 sm:gap-6 lg:gap-8"

// Full width on mobile, auto on desktop
className="w-full sm:w-auto"

Tested Viewports:

Mobile: 320px - 639px
Tablet: 640px - 1023px
Desktop: 1024px - 1919px
Large Desktop: 1920px+
Container/Presentational Pattern:
- Container: Handles logic, state, API calls
- Presentational: Pure UI components with props

State Management Strategy

Global State (Context API):

// AuthContext: User authentication
- user: Current user object
- session: Supabase session
- loading: Auth loading state
- login(), logout(), register()

// SubscriptionContext: Subscription data
- subscription: Current subscription object
- hasActiveSubscription(): Boolean check
- getRemainingInvoices(): Number
- getDaysRemaining(): Number

Local State (useState):

Form inputs
Modal open/close
Loading states
Validation errors

Server State (API):

Invoices, customers, items fetched from backend
Cached in component state
Refetched on mutations

API Layer Design

Service Pattern:

// Each resource has a service file
useCustomersService() → { getCustomers, createCustomer, ... }
useInvoiceService() → { getInvoices, createInvoice, ... }
useSubscriptionService() → { getCurrentSubscription, ... }

Axios Interceptors:

// Request interceptor: Add auth token
axios.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// Response interceptor: Handle errors
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      // Redirect to login
    }
    return Promise.reject(error);
  }
);

Routing Strategy

Route Protection:

<ProtectedRoute>
  <Dashboard />
</ProtectedRoute>

Lazy Loading (Future Optimization):

const Dashboard = lazy(() => import('./pages/dashboard'));

🔒 Security Features

✅ JWT Authentication: Secure token-based auth with Supabase
✅ Token Storage: Stored in memory (not localStorage to prevent XSS)
✅ Automatic Token Refresh: Supabase handles token rotation
✅ CSRF Protection: Handled by Supabase
✅ Input Validation: All forms validated on frontend and backend
✅ XSS Prevention: React escapes output by default
✅ SQL Injection Prevention: Prisma ORM with parameterized queries
✅ HTTPS Enforcement: Production deployment uses SSL/TLS
✅ Rate Limiting: Backend API rate limits to prevent abuse (future)

Best Practices:

Passwords hashed with bcrypt on backend
Sensitive data (tokens) never logged
API keys stored in environment variables
Regular security audits with npm audit

🚧 Future Enhancements

Recently Completed ✅

Phase 1 (Next Sprint)

Payment Gateway: Razorpay integration for subscriptions
Email Notifications: Invoice sent, payment reminders
WhatsApp Integration: Share invoices via WhatsApp API

Phase 2

Recurring Invoices: Auto-generate monthly invoices
Client Portal: Customers can view/pay invoices online
Multi-currency: Support for USD, EUR, GBP
Advanced Reporting: Custom date ranges, filters, exports

Phase 3

Mobile App: React Native app for iOS/Android
Multi-language: Support for Hindi, Marathi, etc.
Dark Mode: Theme switching
Offline Mode: PWA with offline invoice creation

Phase 4

Multi-user: Team accounts with role permissions
API Access: REST API for third-party integrations
Webhooks: Real-time event notifications
Advanced Analytics: AI-powered insights

🤝 Contributing

Contributions are welcome! Here's how you can help:

Reporting Bugs

Check if the bug is already reported in Issues
Create a new issue with:
- Clear title and description
- Steps to reproduce
- Expected vs actual behavior
- Screenshots if applicable

Suggesting Features

Open an issue with [Feature Request] tag
Describe the feature and use case
Explain why it would be useful

Submitting Pull Requests

Fork the repository
Create a feature branch: git checkout -b feature/AmazingFeature
Make your changes
Test thoroughly
Commit with clear messages: git commit -m 'Add some AmazingFeature'
Push to branch: git push origin feature/AmazingFeature
Open a Pull Request

Development Guidelines

Follow existing code style and patterns
Write meaningful variable and function names
Add comments for complex logic
Keep components small and focused
Test on multiple screen sizes
Ensure no console errors or warnings

📝 License

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

What this means:

✅ Commercial use allowed
✅ Modification allowed
✅ Distribution allowed
✅ Private use allowed
⚠️ Liability and warranty not provided

👨‍💻 Author

Rupesh Varshney

GitHub: @rupeshv2121
Email: rupeshvarshney7@gmail.com
LinkedIn: Rupesh Varshney

🙏 Acknowledgments

Special thanks to:

React Team - For the amazing UI library
Vercel - For creating Vite and making builds blazing fast
Supabase - For the excellent Backend-as-a-Service
Tailwind Labs - For the best CSS framework
Lucide - For beautiful open-source icons
jsPDF Contributors - For the PDF generation library
Open Source Community - For inspiration and support

📞 Support & Contact

Need Help?

📧 Email: rupeshvarshney7@gmail.com
🐛 Bug Reports: GitHub Issues
💬 Discussions: GitHub Discussions
📖 Documentation: See this README and code comments

Response Time

Bugs: Within 24-48 hours
Feature requests: Within 1 week
General questions: Within 48 hours

📊 Project Stats

Lines of Code: ~20,000+
Components: 70+
Pages: 15+
API Endpoints: 30+
Development Time: 4 months
Responsive Breakpoints: 4 (sm, md, lg, xl)
Toast Notifications: Implemented across 15+ pages
Skeleton Variants: 8 different loading states
Deployment: Production-ready on Vercel

📝 Changelog

Version 2.0 (December 2025)

UI/UX Improvements:

✅ Fully responsive design for all screen sizes (320px - 1920px+)
✅ Implemented skeleton loaders across all pages (8 variants)
✅ Replaced all alert() calls with react-toastify notifications
✅ Added professional landing page with 9 sections
✅ Mobile-optimized navigation with hamburger menu

Features Added:

✅ Customer history modal with real invoice data integration
✅ Customer analytics (total invoiced, total paid, outstanding)
✅ Reports module data synchronization
✅ Landing page sections: Hero, Features, Pricing, Demo, Benefits, Social Proof, CTA, Footer

Technical Improvements:

✅ Fixed CORS configuration for production deployment
✅ Added vercel.json for proper routing
✅ Implemented comprehensive error handling
✅ Optimized data fetching with useCallback hooks
✅ Fixed amount display formatting for undefined values

Version 1.0 (October 2025)

Initial release with core features
GST-compliant invoice generation
Customer and item management
Dashboard analytics
Subscription system with trial

⭐ If you find this project helpful, please star it on GitHub!

Made with ❤️ by Rupesh Varshney

Name		Name	Last commit message	Last commit date
Latest commit History 30 Commits
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation

InvoicePro - Professional Invoice Management System

📋 Table of Contents

🎯 Overview : The backend runs on port 3001 by default and uses Prisma to connect to a PostgreSQL database.

Why InvoicePro?

Key Features

Setup (frontend)

Deployment

📁 Project Structure

🎨 Features in Detail

1. Authentication System

2. Subscription System

3. Invoice Creation Workflow

4. Dashboard Analytics

5. PDF Generation

6. Loading States & Skeleton Loaders

7. Toast Notifications

🔧 Environment Variables

📜 Scripts

🏗️ Architecture & Design Patterns

Component Architecture

Responsive Design Strategy

State Management Strategy

API Layer Design

Routing Strategy

🔒 Security Features

🚧 Future Enhancements

Recently Completed ✅

Phase 1 (Next Sprint)

Phase 2

Phase 3

Phase 4

🤝 Contributing

Reporting Bugs

Suggesting Features

Submitting Pull Requests

Development Guidelines

📝 License

👨‍💻 Author

🙏 Acknowledgments

📞 Support & Contact

Need Help?

Response Time

📊 Project Stats

📝 Changelog

Version 2.0 (December 2025)

Version 1.0 (October 2025)

⭐ If you find this project helpful, please star it on GitHub!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

🎯 Overview : The backend runs on port `3001` by default and uses Prisma to connect to a PostgreSQL database.

Packages