All work

Web · Next.js · TanStack Table · RBAC

Internal Billing & Operations Platform

A 0→1 internal platform centralizing financial workflows, payout management, and enterprise reporting — with a multi-tenant permission system scoping data access across three distinct roles.

10K+

Records managed

Solo FE lead

Role

0 → 1

Timeline

Web (Next.js)

Platform

Confidential

This platform handles sensitive financial and operational data. Screenshots have been omitted. Architecture, decisions, and technical details are available to discuss in interview.

01 — Problem

Finance and ops ran on spreadsheets

Before this platform, the finance team managed payouts and invoices manually across spreadsheets, while ops coordinators tracked appointment statuses through direct database queries and ad-hoc tooling. Cross-company reporting required assembling data from multiple sources by hand.

The company needed a single internal tool where finance, operations, and external service providers could each access the data relevant to their role — without exposing sensitive cross-company information to vendors, or requiring developers to run one-off queries for every reporting request.

02 — Roles & Access

Three roles. One codebase. Isolated data.

The permission model was the core design challenge. Internal roles (Finance and Ops) need visibility across all companies for analysis and coordination — but vendor organizations must be strictly scoped to their own data. All roles share the same UI surface with access enforced at both the API and UI layer.

Finance (AP)Internal
  • Review and pay outstanding invoices across all service providers
  • Adjust transaction records and add audit notes
  • Access full financial history for analysis and reconciliation
  • Export any data view as XLSX, CSV, or PDF
Operations ManagerInternal
  • Add, edit, or update appointment completion time and status
  • Monitor service delivery across all providers in real time
  • Run cross-company queries for operational research and reporting
  • Export any data view as XLSX, CSV, or PDF
Vendor (Phlebotomy Company)External
  • Search and filter their own appointments by date, status, and patient
  • View payout history and financial summaries scoped to their organization
  • Export their own data as XLSX, CSV, or PDF

03 — Key Technical Work

High-performance tables and auditable workflows

TanStack Table with server-side data

Financial dashboards handle 10K+ transaction records. Pagination, filtering, and multi-column sorting are all server-driven — the client never loads more than one page of data at a time, keeping performance consistent regardless of dataset size.

Multi-tenant RBAC

Designed a role-based access control system with three permission tiers. Internal roles (Finance, Ops) see aggregate cross-company data; vendor organizations are scoped to their own records at the API level — not just hidden in the UI.

Appointment management for ops

Operations managers can add or modify appointment completion times and status directly in the platform, replacing a workflow that previously required developer access to the database.

Universal data export

Every data view — filtered or not — can be exported as XLSX, CSV, or client-side PDF. Eliminated manual report preparation that previously took the finance team hours per reporting cycle.

04 — Key Decisions

Engineering choices that shaped the platform

TanStack Table over a simple list

Why: Financial data requires flexible filtering, sorting, and export across thousands of records. TanStack Table's headless architecture let us add server-side data control without sacrificing UI flexibility.

Tradeoff: Steeper setup than a basic table, but paid off immediately in performance and the ability to add new column types without refactoring.

Shared UI, role-scoped API responses

Why: Building separate UIs per role would have tripled maintenance cost. A single interface with role-aware data fetching keeps the codebase lean while enforcing access at the source.

Tradeoff: Requires careful coordination between frontend permission checks and backend scoping — both must agree, since UI-only gating is not sufficient for sensitive financial data.

Client-side PDF generation

Why: Finance teams needed to produce reports on demand without a server round-trip or file storage dependency. Client-side generation keeps exports instant and stateless.

Tradeoff: Large exports can briefly block the main thread — mitigated by chunking the render and showing a progress indicator.

05 — Testing & CI/CD

Automated coverage on financial workflows

Financial data requires a high bar for correctness — a mis-scoped query exposing one vendor's data to another, or a broken export, is a serious incident. Tests were added alongside each feature.

Jest — unit & integration

RBAC permission logic, filter state, and export formatting are all unit-tested. Role-scoping in particular must never regress — wrong data visibility is a compliance issue, not just a bug.

Playwright — E2E

5+ end-to-end scenarios cover role-based login flows, data visibility boundaries, transaction adjustments, and export generation across all three permission tiers.

GitHub Actions CI

Tests run on every PR via self-hosted runners. Blocking merges on failure ensures no permission or data-access regression reaches the internal team.

06 — Outcome

Operational finance, self-serve

10K+

Transaction records managed

3 roles

With isolated, scoped access

0 queries

Manual developer queries needed for reporting

Finance and operations teams went from manual spreadsheet workflows to a self-serve platform where every role has the access they need — and only that. Developer intervention for reporting and data queries was eliminated entirely.

Back to all work