Directory Structure

In this section you will get a brief idea of our code flow.

Note: The above image is just a screen snap of my project folder, below I have explained the project skeleton in brief.

Invoice Generator/
│
├── assets/                              # General assets used across the website
│   ├── css/                             # Website CSS (Bootstrap, Help, Settings, Home, etc.)
│   ├── image/                           # Website images, organized in category-wise folders
│   ├── js/                              # Website JavaScript (Bootstrap, libraries, page-specific scripts)
│   └── purchase_order_generator/        # Styles and scripts specific to the purchase order generator
│
├── purchase-order-templates/           # Purchase Order Templates
│   ├── assets/                          # Common assets (CSS/JS) used by templates
│   ├── template-1/                      # Template 1
│   │   ├── assets/                      # CSS and JS for Template 1
│   │   ├── template_1.png               # Template preview image
│   │   └── template-1.html              # HTML code for Template 1
│   └── template-2/ to template-20/      # Same structure for templates 2 to 20
│
├── quote-generator/                    # Quote Generator Section
│   ├── assets/                          # Styles and scripts for quote generator
│   └── templates/                       # Quote generator templates
│       ├── assets/                      # Common template assets
│       ├── template-1/                  # Template 1
│       │   ├── assets/                  # CSS and JS for Template 1
│       │   ├── template_1.png           # Template preview image
│       │   └── template-1.html          # HTML code for Template 1
│       └── template-2/ to template-20/  # Same structure for templates 2 to 20
│
├── templates/                          # Invoice Generator Templates
│   ├── assets/                          # Common assets for all templates
│   ├── template-1/                      # Template 1
│   │   ├── assets/                      # CSS and JS for Template 1
│   │   ├── template_1.png               # Template preview image
│   │   └── template-1.html              # HTML code for Template 1
│   └── template-2/ to template-20/      # Same structure for templates 2 to 20
│
├── client-details.html                 # Client details section (part of Settings)
├── footer.html                         # Website footer
├── from-details.html                   # Sender's company details (part of Settings)
├── gst-calculator.html                 # Business tool: GST calculator
├── header.html                         # Website header
├── help.html                           # Step-by-step guide for using the invoice generator
├── history.html                        # Invoice history records
├── index.html                          # Website homepage
├── invoice.html                        # Invoice generator main interface
├── modals.html                         # All modals used across the website
├── paypal.html                         # Business tool: PayPal fee calculator
├── purchase-order-generator.html       # Purchase order generator interface
├── purchase-order-history.html         # Purchase order history records
├── quote-generator-history.html        # Quote generator history records
├── quote-generator.html                # Quote generator main interface
├── setting-default-currency.html       # Set default currency (Settings)
├── setting-default-template.html       # Set default invoice template (Settings)
├── setting-import-products.html        # Import products for purchase orders (Settings)
├── stripe.html                         # Business tool: Stripe fee calculator
└── upwork.html                         # Business tool: Upwork fee calculator

Purpose

This project is a comprehensive invoice/quote/purchase-order generator with support for multiple templates, business tools, and customization options.

---

🔹 How to Use

✅ Run the Project

• Open index.html in your browser to access the homepage.

• Navigate to:

  • invoice.html to generate invoices.

  • quote-generator.html for quotes.

  • purchase-order-generator.html for purchase orders.

🧩 Choose Templates

• All templates are located under:

  • /templates/ (Invoice)

  • /quote-generator/templates/

  • /purchase-order-templates/

• Preview available via template_1.png

• Template HTML available via template-1.html

⚙️ Settings Pages

Modify or set defaults:

• Currency: setting-default-currency.html

• Template: setting-default-template.html

• Product Import: setting-import-products.html

• Client/From Details: client-details.html, from-details.html

📦 Tools Available

• GST Calculator: gst-calculator.html

• PayPal Fee: paypal.html

• Stripe Fee: stripe.html

• Upwork Fee: upwork.html

📜 History Tracking

• Invoice: history.html

• Purchase Order: purchase-order-history.html

• Quote: quote-generator-history.html

---

📁 File Organization Tips

• Keep new templates within the appropriate template-x/ structure.

• Reuse common CSS/JS from the main assets/ folder when possible.

• Use consistent naming conventions for easy identification.

• Update the relevant HTML files if you add new templates or tools.

---