Skip to content

MedAdemBHA/InvoiceHub

BranchesTags

Repository files navigation

InvoiceHub

Professional Invoice & Receipt Generator

Générateur de Factures Professionnel | مولد الفواتير الاحترافي

Version React Vite Global License

InvoiceHub is a modern, feature-rich invoice and receipt generator designed for businesses worldwide. Create professional invoices with comprehensive multi-currency support including Tunisian Dinar (TND) with millimes (3 decimal places), and many other international currencies.

Professional invoice generator with full multi-currency and international business support

Live Demo • Documentation • Report Bug • Request Feature

📸 Screenshots

Screenshots coming soon - showing invoice templates, receipt generators, and multi-language support

Key Features

Invoice Generation

  • 9 Professional Templates - Diverse, customizable invoice designs for every business need
  • Real-Time Calculations - Automatic subtotal, tax, discount, and grand total computation
  • Multi-Item Support - Add unlimited items with descriptions, quantities, and prices
  • Bill To & Ship To - Separate billing and shipping address fields
  • Company Branding - Upload your company logo (JPG, PNG, max 5MB)
  • Invoice Numbering - Auto-generated or custom invoice numbers
  • Date Management - Issue date and due date tracking

Currency Support

  • US Dollar (USD) - International standard currency
  • Euro (EUR) - European Union currency
  • British Pound (GBP) - United Kingdom currency
  • Tunisian Dinar (TND) - Full support with 3 decimal places (millimes)
  • Moroccan Dirham (MAD) - Morocco currency
  • Algerian Dinar (DZD) - Algeria currency
  • Smart Formatting - Automatic locale-based number and currency formatting

Internationalization (i18n)

  • French - Interface complète en français
  • Arabic (العربية) - دعم كامل للغة العربية مع RTL
  • English - Full English interface
  • Auto-Detection - Automatic language detection based on browser settings
  • RTL Support - Full right-to-left layout for Arabic

PDF Export

  • High-Quality PDFs - Export invoices as professional PDF documents
  • Template Preservation - Maintains selected template design in export
  • Print-Ready - Optimized for printing with proper margins and sizing
  • Batch Export - Generate multiple invoices efficiently

Data Management

  • Auto-Save - Form data automatically saved to browser localStorage
  • Data Persistence - Never lose your work, even on page refresh
  • Sample Data - One-click demo data population for testing
  • Quick Clear - Clear all form data with a single click
  • Form Reset - Return to clean state instantly

User Experience

  • Modern UI - Clean, intuitive interface built with Tailwind CSS and shadcn/ui
  • Live Preview - Real-time invoice preview as you type
  • Responsive Design - Works perfectly on desktop, tablet, and mobile devices
  • Template Gallery - Visual template selector with preview thumbnails
  • Smooth Animations - Polished transitions powered by Framer Motion
  • Keyboard Navigation - Full accessibility support

Quick Start

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js 16.x or higher (Download)
  • npm 8.x or higher (comes with Node.js)
  • A modern web browser (Chrome, Firefox, Safari, or Edge)

Installation

1. Clone the repository

git clone https://github.com/your-username/invoicehub.git
cd invoicehub

2. Install dependencies

npm install

3. Start the development server

npm run dev

The application will be available at http://localhost:5173

Build for Production

# Create optimized production build
npm run build

# Preview the production build locally
npm run preview

The production files will be in the dist/ directory, ready for deployment.

Quick Start Commands

# Development
npm run dev              # Start dev server with hot reload

# Production
npm run build            # Build for production
npm run build:dev        # Build in development mode
npm run preview          # Preview production build

# Code Quality
npm run lint             # Run ESLint to check code quality

Tech Stack

Core Technologies

Technology Version Purpose
React 18.2.0 UI framework for building interactive interfaces
Vite 5.1.4 Lightning-fast build tool and dev server
Tailwind CSS 3.4.4 Utility-first CSS framework for styling

UI & Components

Library Purpose
shadcn/ui Pre-built accessible component library (Radix UI)
Lucide React Modern icon library with 1000+ icons
React Icons Additional icon support (Fi icons)
Framer Motion Smooth animations and transitions

Functionality

Library Purpose
jsPDF PDF generation from HTML/Canvas
html2canvas HTML to Canvas conversion for PDF export
html-to-image Alternative image generation
React Hook Form Efficient form state management
Zod Schema validation for forms

Internationalization & Routing

Library Purpose
react-i18next Multi-language support (FR, AR, EN)
i18next-browser-languagedetector Automatic language detection
React Router DOM Client-side routing and navigation

Data & State Management

Library Purpose
TanStack Query (React Query) Server state management and caching
date-fns Modern date utility library
LocalStorage API Browser-based data persistence

Development Tools

Tool Purpose
ESLint Code linting and quality checks
PostCSS CSS processing and optimization
Autoprefixer Automatic CSS vendor prefixing

Project Structure

invoicehub/
├── public/                      # Static assets
│   ├── assets/                  # Template preview images
│   │   └── template*-preview.png
│   ├── favicon.ico
│   └── og-image.svg
│
├── src/
│   ├── components/              # Reusable React components
│   │   ├── templates/           # Invoice & receipt templates
│   │   │   ├── Template1.jsx    # Classic design
│   │   │   ├── Template2.jsx    # Modern minimalist
│   │   │   ├── Template3.jsx    # Corporate style
│   │   │   ├── Template4.jsx    # Elegant design
│   │   │   ├── Template5.jsx    # Creative layout
│   │   │   ├── Template6.jsx    # Bold modern
│   │   │   ├── Template7.jsx    # Clean business
│   │   │   ├── Template8.jsx    # Premium design
│   │   │   ├── Template9.jsx    # Contemporary style
│   │   │   └── Receipt*.jsx     # Receipt templates
│   │   │
│   │   ├── ui/                  # shadcn/ui components
│   │   │   ├── button.jsx
│   │   │   ├── input.jsx
│   │   │   ├── select.jsx
│   │   │   └── ...
│   │   │
│   │   ├── BillToSection.jsx    # Bill-to form section
│   │   ├── ShipToSection.jsx    # Ship-to form section
│   │   ├── ItemDetails.jsx      # Line items management
│   │   ├── FloatingLabelInput.jsx
│   │   └── LanguageSwitcher.jsx # Multi-language toggle
│   │
│   ├── hooks/                   # Custom React hooks
│   │   └── useFormPersistence.js
│   │
│   ├── i18n/                    # Internationalization
│   │   ├── locales/
│   │   │   ├── en.json          # English translations
│   │   │   ├── fr.json          # French translations
│   │   │   └── ar.json          # Arabic translations
│   │   └── config.js            # i18n configuration
│   │
│   ├── lib/                     # Utilities and helpers
│   │   └── utils.js             # Utility functions
│   │
│   ├── pages/                   # Page components
│   │   ├── Index.jsx            # Main invoice generator
│   │   ├── TemplatePage.jsx     # Template preview/export
│   │   └── ReceiptPage.jsx      # Receipt generator
│   │
│   ├── utils/                   # Core utilities
│   │   ├── formatCurrency.js    # Currency formatting logic
│   │   ├── templateRegistry.js  # Template management
│   │   └── validation.js        # Form validation
│   │
│   ├── App.jsx                  # Root application component
│   ├── main.jsx                 # Application entry point
│   └── index.css                # Global styles
│
├── .eslintrc.cjs               # ESLint configuration
├── components.json             # shadcn/ui config
├── jsconfig.json              # JavaScript configuration
├── package.json               # Project dependencies
├── postcss.config.js          # PostCSS configuration
├── tailwind.config.js         # Tailwind CSS configuration
├── vite.config.js             # Vite build configuration
└── README.md                  # This file

Available Templates

Invoice Templates (9 Designs)

Template Style Best For
Template 1 Classic Professional Traditional businesses, B2B transactions
Template 2 Modern Minimalist Tech companies, startups, creative agencies
Template 3 Corporate Large enterprises, formal business dealings
Template 4 Elegant Luxury brands, premium services
Template 5 Creative Design studios, freelancers, artists
Template 6 Bold Modern Contemporary businesses, e-commerce
Template 7 Clean Business General purpose, versatile use cases
Template 8 Premium High-end services, consulting firms
Template 9 Contemporary Modern startups, SaaS companies

Receipt Templates (4 Designs)

Template Style Best For
Receipt 1 Standard Retail Retail stores, supermarkets
Receipt 2 Compact Small businesses, food trucks
Receipt 3 Detailed Itemized sales, detailed transactions
Receipt 4 Modern Contemporary retail, cafes, boutiques

Usage Guide

Getting Started

  1. Select Your Template - Browse the template gallery on the left sidebar
  2. Fill Company Details - Add your business name, address, and phone number
  3. Add Customer Info - Enter bill-to details (and ship-to if different)
  4. Add Line Items - Click "Add Item" to include products/services
  5. Set Financial Details - Configure tax, discount, and shipping fees
  6. Choose Currency - Select from 6 supported international currencies
  7. Preview & Export - Review the live preview and generate PDF

Pro Tips

Tip Description
Quick Fill Use the "Fill with Sample Data" button to test with demo data
Quick Clear Click the "Clear" button to reset all form fields
Auto-Save Data is automatically saved to browser storage - no manual saving needed
Copy as Ship To In Ship To section, check "Same as Bill To" to duplicate billing address
Logo Upload Upload your company logo (JPG/PNG, max 5MB) for branding
Random Notes Click the refresh icon next to Notes to get random invoice text
Language Switch Change interface language anytime with the language selector
Mobile Friendly The app works on all devices - create invoices on the go

Keyboard Shortcuts

Shortcut Action
Tab Navigate between form fields
Enter Submit/confirm in input fields
Escape Close modals/dialogs

Configuration & Customization

Adding New Currencies

To add support for additional currencies, edit src/utils/formatCurrency.js:

1. Add currency to AVAILABLE_CURRENCIES array:

export const AVAILABLE_CURRENCIES = [
  { code: 'TND', name: 'Dinar Tunisien', symbol: 'د.ت', country: 'TN' },
  { code: 'EUR', name: 'Euro', symbol: '€', country: 'EU' },
  // Add your new currency here
  { code: 'INR', name: 'Indian Rupee', symbol: '₹', country: 'IN' },
];

2. Add locale mapping:

const CURRENCY_LOCALES = {
  TND: 'ar-TN',
  USD: 'en-US',
  // Add your locale
  INR: 'en-IN',
};

3. Add currency symbol:

export const getCurrencySymbol = (currencyCode) => {
  const symbols = {
    TND: 'د.ت',
    USD: '$',
    // Add your symbol
    INR: '₹',
  };
  return symbols[currencyCode] || currencyCode;
};

Creating Custom Templates

Templates are React components located in src/components/templates/. To create a new template:

1. Create a new template file:

// src/components/templates/Template10.jsx
import React from 'react';
import { formatCurrency } from '../../utils/formatCurrency';

const Template10 = ({ data }) => {
  const { billTo, shipTo, invoice, yourCompany, items, 
          taxAmount, discount, shippingFee, grandTotal, 
          notes, selectedCurrency, logo } = data;

  return (
    <div className="bg-white p-8 shadow-lg">
      {/* Your custom template design */}
      <h1>Invoice #{invoice.number}</h1>
      {/* ... rest of your template */}
    </div>
  );
};

export default Template10;

2. Register the template in src/utils/templateRegistry.js:

import Template10 from '../components/templates/Template10';

export const templates = [
  // ... existing templates
  { component: Template10, name: 'Template 10' },
];

3. Add preview image to public/assets/:

Add template10-preview.png (200x300px recommended)

Customizing Translations

To add or modify translations, edit the locale files in src/i18n/locales/:

  • en.json - English translations
  • fr.json - French translations
  • ar.json - Arabic translations
{
  "app": {
    "title": "InvoiceHub - Invoice Generator"
  },
  "form": {
    "companyDetails": "Company Details",
    "billTo": "Bill To"
  }
}

Environment Variables

Create a .env file in the root directory for custom configuration:

VITE_APP_NAME=InvoiceHub
VITE_APP_VERSION=3.0.0
VITE_DEFAULT_CURRENCY=TND
VITE_DEFAULT_LANGUAGE=fr

Access in code:

const appName = import.meta.env.VITE_APP_NAME;

Deployment

Deploy to Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Deploy to Netlify

# Build the project
npm run build

# Deploy the dist/ folder to Netlify

Deploy to GitHub Pages

# Install gh-pages
npm install --save-dev gh-pages

# Add to package.json scripts
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"

# Deploy
npm run deploy

Troubleshooting

Common Issues

Issue: Build fails with "Cannot find module" error

Solution: Clear cache and reinstall dependencies

rm -rf node_modules package-lock.json
npm install

Issue: PDF export doesn't work properly

Solution: Ensure html2canvas and jsPDF are installed

npm install html2canvas jspdf

Issue: Arabic text doesn't display correctly

Solution: Ensure your system has Arabic fonts installed

Issue: LocalStorage data not persisting

Solution: Check browser privacy settings and ensure localStorage is enabled

API Reference

formatCurrency(amount, currencyCode, minimumFractionDigits)

Formats a number as currency.

formatCurrency(1234.567, 'TND') // "1,234.567 د.ت"
formatCurrency(1234.50, 'USD')  // "$1,234.50"

getCurrencySymbol(currencyCode)

Returns the symbol for a currency code.

getCurrencySymbol('TND') // "د.ت"
getCurrencySymbol('EUR') // "€"

Contributing

We welcome contributions! Here's how you can help:

Ways to Contribute

  • Report Bugs - Found a bug? Open an issue
  • Request Features - Have an idea? We'd love to hear it
  • Improve Documentation - Help make our docs better
  • Add Translations - Add support for more languages
  • Create Templates - Design new invoice templates
  • Submit Code - Fix bugs or implement features

Development Workflow

1. Fork the repository

2. Clone your fork

git clone https://github.com/your-username/invoicehub.git
cd invoicehub

3. Create a feature branch

git checkout -b feature/amazing-feature

4. Make your changes and commit

git add .
git commit -m "feat: add amazing feature"

5. Push to your fork

git push origin feature/amazing-feature

6. Open a Pull Request

Commit Convention

We follow Conventional Commits:

  • feat: New feature
  • fix: Bug fix
  • docs: Documentation changes
  • style: Code style changes (formatting, etc.)
  • refactor: Code refactoring
  • test: Adding tests
  • chore: Maintenance tasks

License

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

Acknowledgments

Built With

Special Thanks

  • The open-source community for amazing tools and libraries
  • Contributors who help improve this project
  • The global tech community for inspiration and support

Support & Community

Get Help

  • Documentation - Check this README and code comments
  • Discussions - Ask questions in GitHub Discussions
  • Bug Reports - Open an issue on GitHub
  • Email - Contact for support

Stay Updated

  • Star this repo to show support
  • Watch for updates and releases
  • Follow for project news

Roadmap

Current Version (v3.0.0)

  • 9 invoice templates
  • Multi-currency support (USD, EUR, GBP, TND, MAD, DZD)
  • Multi-language (French, Arabic, English)
  • PDF export functionality
  • Auto-save feature

Planned Features (v3.1.0)

  • Database integration for invoice history
  • Client management system
  • Recurring invoices
  • Payment tracking
  • Email sending functionality

Future Vision (v4.0.0)

  • Cloud storage integration
  • Team collaboration features
  • Advanced analytics and reporting
  • Mobile app (iOS & Android)
  • API for third-party integrations

Made by Mohamed Adem Bel Hadj Amor for the global business community

Professional invoice generator for businesses worldwide

Back to Top

About

invoicehub.mohamedadembelhadjamor.me/

Resources

Readme

License

MIT license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages