Building the Digital Invoice Tool: A Technical Breakdown

The Digital Invoice Tool (Non-VAT and VAT-able) is a lightweight yet powerful invoicing web application developed specifically for creatives, freelancers, and small businesses in the Philippines. This article aims to offer a deeper look into the engineering process, tech stack, and internal architecture that powers this tool beyond its surface-level features.

---

Tech Stack & Frameworks

• Next.js – Full-stack React framework for routing, server-side rendering, and static exports.

• React – Core UI library for building modular and reusable components.

• TypeScript – For strong typing and robust data integrity across components and modules.

• Tailwind CSS – Used for utility-first styling.

• ShadCN/UI – Used primarily for base UI primitives, especially the table components.

• Styled Components – Employed for custom-designed reusable components that blend Tailwind’s utility logic with encapsulated styles.

---

UI Layer and Component Structure

The interface uses a hybrid design system that combines utility classes from Tailwind, atomic components from ShadCN, and custom logic-based components designed with Styled Components. This allows for:

• Flexibility in design aesthetics and responsiveness

• Maintainable and scalable component logic

• Visual consistency across both VAT and Non-VAT invoice variants

The order items table—one of the most crucial UI elements—is based on the ShadCN table system, which provides sorting, cell customization, and keyboard-accessible navigation, styled and extended via custom wrappers.

---

Core Logic: The DigitalInvoice Class

At the heart of the invoicing engine lies the custom-coded DigitalInvoice class. This class was entirely written from scratch using TypeScript and includes:

• Well-typed interfaces for OrderItem, CustomerInfo, IssuerInfo, TransactionType, and PaymentMethod

• Enums for system constants like InvoiceMode (VAT/Non-VAT), DiscountType, and PaymentChannel

• Built-in methods for:

  • Gross-to-net tax computations

  • Automatic VAT extraction from inclusive totals

  • Percentage tax logic (for Non-VAT)

  • Conditional withholding tax application (based on type of client and invoice)

  • Dynamic recalculations on updates (reactive invoice math)

The separation of tax logic by mode ensures that business rules are cleanly implemented without bloating the main UI logic.

---

Encrypted Profile Storage: The .zworld Format

One of the standout features of this tool is the ability to export and import encrypted .zworld files. These files allow:

• Version-controlled snapshots of each invoice project

• Reusability of legal and taxpayer info

• Secure and encrypted local backups for sensitive client data

• Avoidance of redundant input tasks across different invoices

The .zworld file structure includes metadata headers for type safety, schema versioning, and validation, making it easy to introduce backward compatibility in future updates.

---

Taxpayer Profile Reusability

Users can export their business profiles—complete with TIN, Registered Name, Logo, Business Name/Style, and Contact Info—into encrypted files that can be re-imported later. This enables speed and consistency in recurring transactions and minimizes human error in tax ID entries or invoice formatting.

---

Invoice PDF Output

The app uses a serverless-compatible PDF generation utility to export invoices that conform to standard Philippine invoice formatting rules. It automatically includes:

• Proper tax annotations and breakouts

• Client and issuer information

• Signed declarations (optional)

• Discount and payment breakdowns

PDF output remains identical across sessions, reinforcing predictability for archiving and auditing purposes.

---

Two Modes: VAT and Non-VAT

Each variant was built with unique layout and logic differences:

• Non-VAT Mode: Automatically applies Percentage Tax (3%) and optionally Withholding Tax (5%).

• VAT Mode: Calculates 12% VAT, deducts Withholding Tax from the VAT-exclusive base, and supports both VAT-inclusive and exclusive input handling.

Users simply input item details and let the app determine all the applicable math.

---

Closing Thoughts

This Digital Invoice Tool was built with attention to the actual tax rules creatives face in the Philippines. From typed class systems and UI reusability to the encrypted .zworld workflow, every feature was intentionally crafted. All logic, class structures, and architectural decisions were implemented by me—tailored to the needs of our local freelance ecosystem.

If you're a developer, creative, engineer, or agency looking to implement custom workflow tools like this, I'm always open to consulting or collaboration.

Let’s build things that make creativity easier—one line of code at a time.

I’m always open for commission-based projects — whether you're looking for custom music, 3D visuals, cinematic animation, or software development solutions. If you have a vision and need someone to bring it to life, I’m all in.

Let’s work! Your vision, my magic.

Email: business@thezelijah.world

With love,
Zelijah