M E
Case study
InvoKraken billing without the SaaS tax
A client-side invoicing engine that turns tracked hours into print-ready A4 PDFs in seconds.
Overview
About the project
InvoKraken is a lightweight, responsive client-invoicing web application engineered to bridge the gap between time-tracking data (e.g. Toggl Track) and professional, print-ready client billing.
Built with a strong focus on typography, brand identity, and browser-native PDF generation, it lets freelancers and creative studios convert tracked project hours into styled, error-free A4 PDF invoices in seconds — without heavy third-party SaaS subscriptions or server-side rendering pipelines.
The problem
Friction in the monthly billing cycle
Freelancers and design agencies often lose time — and credibility — when turning timesheets into invoices:
- Manual math & time conversion errors Time trackers log hours in sexagesimal format (HH:MM:SS), while billing needs exact decimal hours (hours + min/60 + sec/3600). Doing that by hand is slow and easy to get wrong.
- Inconsistent branding Generic invoice generators lack customization, diluting brand credibility with unstyled tables or third-party watermarks.
- Fragile print / PDF outputs Standard web-to-PDF tools frequently suffer from multi-page overflow, clipped headers, washed-out colors (WebKit print contrast reduction), or broken page breaks.
The solution
One file. Live editing. Pixel-perfect print.
I designed and developed a single-file, client-side web application that combines an interactive editing experience with an automated calculation engine and a pixel-perfect print layout.
Users can edit fields inline, update hourly rates and tracked task breakdowns in real time, and trigger instant browser-native A4 PDF generation with full color accuracy.
Key features
-
Interactive live inline editing
Every data point — client details, task descriptions, invoice IDs, and rates — is editable in the DOM with
contenteditable="true"and custom hover and focus indicators. - Sexagesimal-to-decimal calculation engine Automatically recalculates subtotals and totals in real time from raw Toggl time entries (HH:MM:SS), including exact hours, minutes, and seconds.
-
Pixel-perfect A4 single-page print engine
CSS
@pagerules, strict height containment, and-webkit-print-color-adjust: exactkeep PDF rendering consistent across modern browsers. - Zero-dependency portability A standalone HTML/JS structure that runs entirely in the browser — no backend, servers, or database setup.
-
Branded design system
Custom SVG wave headers and footers, geometric hatch patterns, and a cohesive palette of Navy Blue
#003859and Cyan#92d0f0tailored to the Kraken brand.
Engineering
Technical highlights
Robust time-to-currency conversion
Freelance billing needs exact floating-point arithmetic. The JavaScript engine parses raw input strings, handles both comma (,) and dot (.) decimal notations, and computes clean currency values:
Overcoming browser print limits
Web-to-PDF conversion often strips background graphics or shifts text layers. Strict color reproduction, SVG layering, and page-break control keep a single A4 sheet intact.
Decimal Hours = Hours + (Minutes / 60) + (Seconds / 3600)
Total Due = Decimal Hours × Hourly Rate
Print fidelity was enforced with print-color-adjust: exact and explicit -webkit-text-fill-color: #ffffff, plus controlled z-index layering and SVG positioning so typography does not clip in headless print environments. Page boundaries use page-break-inside: avoid to guarantee single-sheet A4 output.
Result
Impact
Time saved on monthly billing — from ~20 minutes of formatting and math down to under 2 minutes.
Calculation accuracy on complex Toggl logs — rounding errors eliminated.
To a branded, print-ready invoice that reinforces agency credibility with clients.
The result is a tool that feels as considered as the work it bills for: clean documents, exact numbers, and a billing ritual that no longer eats an evening.