HR Tech

Paystat

Paystat is a multi-tenant payroll and HR platform — companies process payroll, manage employees and attendance, and run reports, each on their own branded subdomain. I built the frontend: 12 modules (payroll, people, attendance, accounts, insights, integrations, workflows, an AI assistant…), an international banking layer that validates account numbers and IBANs across 15+ countries, and an AI-generated organogram rendered on an editable React Flow canvas — on Next.js with Mantine, AG Grid, and TanStack Query.

Visit project

Client: Paystat
Year: 2024
Category: HR Tech
Status: Live project

Paystat project snapshot — Snapshot / Paystat / 2024

Context

Payroll spans countries, banking formats, and org structures that differ at every company. Paystat runs each company as a tenant on its own subdomain and handles the messy parts — validating bank accounts across 15+ countries' formats and IBANs, generating and editing org charts, and exporting precise payroll reports — so HR teams can pay people accurately and on time.

Constraints

01Every company is its own tenant — middleware resolves the subdomain, confirms the company exists, and validates the JWT before any page renders.
02Payroll pays people across borders — bank-account and IBAN validation for 15+ countries' formats (sort codes, routing numbers, BSB).
03Org structures must be visual and editable — an AI-generated organogram on a React Flow canvas with drag, reconnect, and export.
04Payroll output must be portable — every report exports to PDF, Excel, CSV, and print.
05Non-technical HR users onboard themselves — guided product tours and live form-format hints.

Role & Team

Role: Frontend
Team: Paystat
Stack: Next.js, TypeScript, Mantine, AG Grid, React Flow
Engagement: Multi-tenant payroll and HR platform.

Process

One app, every tenant

I built subdomain-based multi-tenancy in middleware: extract the company from the host, validate it exists against the backend, then validate the session JWT (`/v1/auth/me`) with conditional auth redirects that remember where the user was headed — so each company gets a branded, isolated workspace from a single deployment.

// src/middleware.ts — resolve tenant from the subdomain, then auth
const subdomain = hostnameParts.length > 2 ? hostnameParts[0] : null;
const { data: company } = await fetch(
  `${SERVER_URL}/v1/auth/company/check/${subdomain}`
).then((r) => r.json());
if (!company) return NextResponse.redirect(new URL("/login", request.url));

const token = request.cookies.get("__ps-c-a")?.value;
if (!token || !(await validateToken(token)))
  return NextResponse.redirect(new URL(`/login?redirect=${path}`, request.url));

Get international banking right

Payroll can't fail on a malformed account number. I wrote a country-aware banking-validation layer covering 15+ countries — per-country account formats, IBAN validation, sort codes, routing numbers, BSB — with a debounced account-lookup hook and a live format-helper component that shows the expected format as the user types.

// src/lib/utils/bankingValidation.ts — per-country formats + IBAN
validateAccountNumber("DE89370400440532013000", "DE"); // IBAN
validateAccountNumber("0123456789", "NG");              // 10-digit
validateAccountNumber("12345678", "GB");                // 8-digit + sort code
// supports NG, US, GB, DE, FR, CA, AU … (15+ countries)

Make org structure and payroll tangible

I built an AI-generated organogram: a prompt-to-org-chart route in the app renders onto a React Flow canvas where HR can drag, reconnect, and export the chart, with positions and units CRUD and reorderable approval workflows behind it. I paired it with a heavy export layer so every payroll report ships as PDF, Excel, CSV, or print.

// AI org-chart generation stays in the Next.js app
// src/app/api/organogram/generate/route.ts -> React Flow canvas
// backend owns persistence only: save/retrieve chart, positions &
// units CRUD, approval-workflow ordering

Outcome

The measurable shape of the work.

Modules across the workforce platform

Countries for bank-account / IBAN validation

Branded subdomain per tenant company

Lessons

Subdomain multi-tenancy lives in the middleware — get tenant resolution and session validation right there and every module inherits isolation for free. And the long tail of international banking formats is real work: 'validate an account number' means 15 different rules, not one.

Paystat

One app, every tenant

// src/middleware.ts — resolve tenant from the subdomain, then auth const subdomain = hostnameParts.length > 2 ? hostnameParts[0] : null; const { data: company } = await fetch( `${SERVER_URL}/v1/auth/company/check/${subdomain}` ).then((r) => r.json()); if (!company) return NextResponse.redirect(new URL("/login", request.url)); const token = request.cookies.get("__ps-c-a")?.value; if (!token || !(await validateToken(token))) return NextResponse.redirect(new URL(`/login?redirect=${path}`, request.url));

Get international banking right

// src/lib/utils/bankingValidation.ts — per-country formats + IBAN validateAccountNumber("DE89370400440532013000", "DE"); // IBAN validateAccountNumber("0123456789", "NG"); // 10-digit validateAccountNumber("12345678", "GB"); // 8-digit + sort code // supports NG, US, GB, DE, FR, CA, AU … (15+ countries)

Make org structure and payroll tangible

// AI org-chart generation stays in the Next.js app // src/app/api/organogram/generate/route.ts -> React Flow canvas // backend owns persistence only: save/retrieve chart, positions & // units CRUD, approval-workflow ordering