Invoice Analytics Dashboard

AirGap Labs

TECHNICAL CASE STUDY

Internal CRM & Automation Suite

Stack: Shopify Liquid  •  n8n Cloud  •  Supabase  •  Chart.js  •  Harvest API

Role: Principal, AirGap Labs  •  Irvine, CA

CASE STUDY

Invoice Analytics Dashboard

Industry	IT Infrastructure & Managed Security Services
Platform	Shopify (Dawn theme) + n8n Cloud + Supabase
Timeline	Built and iterated over approx. 3 months
Audience	Internal finance and executive team

The Problem

AirGap Labs invoices across five distinct revenue categories — Subscriptions, Products, Professional Services, Managed Services, and Other — but had no unified view of how those categories trended over time. Finance data lived in a separate billing system. Understanding year-over-year performance required manual exports, pivot tables, and reconciliation that consumed hours every reporting cycle.

Leadership wanted answers to questions like: Which revenue categories are growing? Which customers account for the most open balance? How does this quarter compare to last year? None of that was accessible without a painful manual process.

The Solution

A custom Liquid dashboard page embedded inside the Shopify admin-gated CRM suite, pulling live data via n8n webhooks backed by Supabase. No third-party BI tools, no additional subscriptions — built entirely within the existing stack.

Key Features Built

• Year-over-year stacked bar chart using Chart.js, driven by a shared CATS palette that keeps chart datasets, summary cards, tooltips, and drill-through tables visually in sync
• Five revenue category breakdown with color-coded summary cards showing current totals and YoY delta
• Drill-through table: clicking any chart bar filters the invoice table below to matching records
• Open invoices table with sortable columns, aging buckets (30/60/90 days), and per-customer balance rollups
• Role-gated access via Shopify customer metafields — only admin and sales rep roles can view the page
• Migrated from a legacy recurring/non-recurring split to the five-category model without breaking historical data

~8 hrs/mo Manual reporting hours saved

5 Revenue categories tracked

Real-time Data freshness

0 added External BI tools replaced

Technical Highlights

One of the more interesting engineering challenges was maintaining visual consistency across every element of the dashboard. Rather than hardcoding colors in multiple places, a single CATS constant object drives the chart dataset colors, the summary card backgrounds, the tooltip labels, and the drill-down table row highlights. Changing a category color anywhere automatically propagates across the entire page.

The n8n webhook pattern uses a recursive response extractor to handle varied wrapper shapes returned by different workflow versions — a practical solution for a pipeline that evolved over several iterations without requiring a full data migration.

All JavaScript follows ES5/IIFE patterns and strict ASCII encoding to satisfy Shopify Liquid's parser. The final file size stays under 50KB per AirGap's internal standards.

Outcome

The finance team now opens the dashboard at the start of every reporting cycle instead of running a manual export. Revenue category trends are visible at a glance, open invoice aging is tracked in real time, and the YoY chart makes board-ready comparisons available on demand.

AirGap Labs  •  Irvine, CA  •  airgaplabs.com