SkyCrapt Pro | Professional Bill & Invoice Generator

A full-featured, modern, real-time web application built with Next.js 14 (App Router), TypeScript, Tailwind CSS, and Zustand. Designed for freelancers, agencies, and businesses to create, edit, calculate, preview, store, and export professional PDF invoices seamlessly.

---

Key Features

• Real-time Live Preview: Split-screen editor with instant side-by-side rendering as you edit.
• Automatic Dynamic Calculations: Instant subtotal, itemized tax rates, custom percentage discounts, and final total math.
• High-Resolution PDF Export: Single-click PDF generation powered by html2canvas and jsPDF.
• Print-Ready Layout: Optimized @media print CSS rules for direct browser printing.
• Local Persistence & History: Saved invoices are automatically persisted to localStorage via Zustand middleware and synchronized with REST API endpoints.
• Brand Customization: Custom business logo upload support and configurable biller/client details.
• Glassmorphism & Dark Mode Aesthetic: Sleek futuristic UI styled with Tailwind CSS and dynamic canvas background elements.
• Form Validation: Strict form schemas powered by Yup and React Hook Form.

---

Directory & Folder Structure

Bill---Invoice-Generator/
├── app/                        # Next.js 14 App Router Directory
│   ├── api/                    # Serverless API Routes
│   │   ├── auth/               # Mock Authentication API (POST login/register)
│   │   │   └── route.ts
│   │   └── invoices/           # Invoices REST API (GET, POST, DELETE)
│   │       └── route.ts
│   ├── globals.css             # Global Tailwind Styles & Print Rules
│   ├── layout.tsx              # Root Layout & Custom Typography Fonts
│   └── page.tsx                # Main Application Page (Editor & History Tabs)
│
├── components/                 # React UI Components
│   ├── AddInvoiceDetails.tsx   # Invoice Metadata (Number, Dates, Currency, Status)
│   ├── AddressForm.tsx         # Biller (Sender) & Client Address Forms + Logo Upload
│   ├── Cursorbackground.tsx    # Interactive Dynamic Dark Theme Background Canvas
│   ├── AuthModal.tsx           # Authentication Dialog (Login / Register)
│   ├── InvoiceActions.tsx      # Top Action Bar (PDF Download, Print, Save, Reset)
│   ├── InvoiceHistory.tsx      # History Dashboard with Search, Filter & Management
│   ├── InvoicePreview.tsx      # Real-Time Printable A4 Invoice Canvas
│   ├── ItemList.tsx            # Dynamic Line Item Rows (Add, Edit, Remove)
│   ├── Navbar.tsx              # Header Bar, Brand Logo, Tab Switcher, User Menu
│   └── TotalsSummary.tsx       # Subtotal, Tax Breakdown, Discount Input, Notes & Terms
│
├── lib/                        # Helpers, Utilities & State Management
│   ├── pdf.ts                  # PDF Generation Engine (html2canvas + jsPDF) & Print Trigger
│   ├── store.ts                # Zustand Store with LocalStorage Persistence & Calculation Logic
│   └── validations.ts          # Yup Validation Schemas
│
├── types/                      # TypeScript Interfaces & Types
│   └── index.ts                # Core Data Schemas (Invoice, InvoiceItem, PartyDetails, etc.)
│
├── public/                     # Static Web Assets
├── .gitignore                  # Git Exclusion Configurations
├── next.config.js              # Next.js Application Configurations
├── package.json                # Project Dependencies & Scripts
├── postcss.config.js          # PostCSS Processing Rules
├── tailwind.config.js          # Tailwind Utility & Theme Extensions
└── tsconfig.json               # TypeScript Compiler Setup

---

Core Functions & Architecture Breakdown

1. State Management & Calculations (lib/store.ts)

The application state is managed centrally using Zustand with the persist middleware.

• calculateTotals(items, discountRate): Calculates subtotal, itemized taxes per row, applies global discount percentage, and computes rounded total amount.
• createNewBlankInvoice(isRandom): Factory function producing default invoice templates with unique IDs and 30-day payment terms.
• addItem(itemData): Appends a new line item to the active invoice and triggers auto-recalculation.
• updateItem(id, itemData): Modifies quantity, unit price, or tax rate for a specific line item.
• deleteItem(id): Removes a line item and updates invoice totals.
• setDiscountRate(rate): Updates global discount percentage and recalculates totals.
• saveCurrentInvoice(): Persists the active invoice to savedInvoices array and syncs with /api/invoices.
• loadInvoice(invoice): Loads a past invoice into the editor.
• deleteSavedInvoice(id): Deletes an invoice from storage and backend API.
• resetInvoiceForm(): Clears editor fields and prepares a fresh invoice draft.

2. PDF & Printing Engine (lib/pdf.ts)

• downloadInvoicePDF(elementId, filename):
  • Captures the DOM #invoice-preview element at scale: 2 (high resolution) using html2canvas.
  • Converts canvas buffer into an A4 PDF document using jsPDF.
  • Auto-scales rendering dimensions while preserving aspect ratios to guarantee fit on a single page.
• printInvoice(): Triggers native browser print dialog (window.print()) configured with @media print rules to isolate the invoice paper template.

3. Data Schemas & Validation (lib/validations.ts)

• invoiceItemSchema: Validates line item description, quantity ($\ge 1$), price ($\ge 0$), and tax percentage ($0 - 100%$).
• partyDetailsSchema: Enforces required business/client name, email format, address, city, and country.
• invoiceDetailsSchema: Validates invoice number, issue/due dates, currency selection, status, and discount range.
• authSchema: Validates user authentication inputs (email, password, optional registration name).

---

API Endpoints Reference

Invoices API (/api/invoices)

• GET /api/invoices: Retrieves list of saved invoices.
• POST /api/invoices: Saves or updates an invoice payload in the backend store.
• DELETE /api/invoices?id={id}: Deletes an invoice by its unique identifier.

Auth API (/api/auth)

• POST /api/auth: Authenticates user login or registration requests and returns user profile metadata.

---

Getting Started

Prerequisites

Make sure you have Node.js (v18.x or higher) and npm installed on your system.

Installation

1. Clone the repository:

   git clone https://github.com/akashb8/Bill---Invoice-Generator.git
   cd Bill---Invoice-Generator

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open in browser: Navigate to http://localhost:3000 to start generating invoices.

---

Build & Scripts

• npm run dev: Launches local Next.js development server.
• npm run build: Compiles production build bundle.
• npm run start: Starts production server.
• npm run lint: Runs Next.js ESLint code checks.

---

License

This project is licensed under the MIT License.