🧾 Invoice Generator

A modern, easy-to-use invoice generator built with Next.js 15, TypeScript, and Tailwind CSS.

✨ Features

• 📝 Create Invoices - Generate professional invoices with company and client details
• ✏️ Edit Invoices - Update existing invoices anytime
• 👁️ View Invoices - Clean, printable invoice templates
• 🗑️ Delete Invoices - Remove invoices with confirmation
• 🖨️ Print Ready - Print-optimized styling for professional output
• 💾 Local Storage - All data saved locally in your browser
• ✅ Form Validation - Field-level validation with helpful error messages
• 🎨 Modern UI - Clean interface with Tailwind CSS

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/fawez9/invoice_generator.git
cd invoice-generator

2. Install dependencies

npm install

3. Run the development server

npm run dev

4. Open http://localhost:3000 in your browser

🛠️ Built With

• Next.js 15 - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Local Storage - Data persistence

📁 Project Structure

src/
├── app/                      # Next.js app router pages
│   ├── page.tsx             # Home page
│   ├── invoices/
│   │   ├── page.tsx         # Invoice list
│   │   ├── new/             # Create invoice
│   │   └── [id]/            # View/Edit invoice
├── components/
│   ├── ui/                  # Reusable UI components
│   ├── invoice/             # Invoice-specific components
│   └── layout/              # Layout components
├── hooks/                   # Custom React hooks
├── lib/                     # Utility functions
└── types/                   # TypeScript types

🎯 Usage

Creating an Invoice

1. Click "Create New Invoice" from the home page or invoice list
2. Fill in your company details
3. Add client information
4. Add line items (description, quantity, price,tax rate)
5. Add notes (optional)
6. Click "Create Invoice"

Viewing Invoices

• Navigate to Invoices to see all your invoices
• Click "View" on any invoice to see details
• Use "Print" button to print or save as PDF

Editing Invoices

• Open an invoice and click "Edit"
• Make your changes
• Click "Update Invoice"

Deleting Invoices

• Open an invoice and click "Delete"
• Confirm deletion

💡 Features in Detail

Calculations

• Automatic subtotal calculation
• Tax calculation based on percentage
• Total amount with tax included
• Per-item total calculation

Invoice Numbering

• Auto-generated invoice numbers (INV-0001, INV-0002, etc.)
• Sequential numbering

Data Persistence

• All invoices stored in browser's local storage
• Data persists across sessions
• No backend required

🖨️ Printing

The app includes print-optimized styles:

• Clean, professional invoice layout
• Hidden UI elements (buttons, navigation)
• Optimized for A4 paper size
• Use browser's print function (Ctrl+P / Cmd+P)

⚙️ Configuration

Currency

Default currency is Tunisian Dinar (TND). To change:

• Edit src/lib/utils.ts → formatCurrency() function
• Update locale and currency code

Tax Rate

Users can change it per invoice {19%,13%,7%}.

🔒 Data Privacy

• All data stored locally in your browser
• No data sent to external servers
• No user accounts or authentication required
• Clear browser data to reset

numbers-Tofrench.ts

• All the app is english version but this file contains a function that can turns numbers to french letters , I did this due to potential update for the whole app to be in french.
• Make sure to put that in your consideration to change it as you want.

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Next.js team for the amazing framework
• Tailwind CSS for the utility-first CSS framework

---

Note: This app uses browser local storage. Data is saved locally and will be lost if you clear your browser data.