CASE STUDY · 02
BTN Payroll AI Assistant
AI-assisted payroll operations platform
- Client
- Bank BTN
- Role
- Frontend Engineer
- Context
- Side project
Overview
Validates payroll data against business rules and uses OCR + LLM extraction to turn scanned deduction memos into upload-ready HR batch files.
What I built
- Built the Next.js 16 + React 19 frontend with shadcn/ui and Tailwind CSS
- Built payroll validation, CEB/PUS builder, and master data flows with TanStack Table and React Hook Form + Zod
- Consumed typed API calls generated from the OpenAPI spec (openapi-typescript)
- Built the AI usage dashboard with Recharts, plus ID/EN i18n with next-intl
- Wrote Vitest unit tests and Playwright E2E tests
Engineering highlights
OpenAPI-first: typed frontend API calls generated from a linted spec
Async submit + poll for multi-minute OCR jobs, avoiding the 30s gateway timeout
LLM isolated behind a gateway, with prod/dev AI environments separated by header
Two-step summary (facts → rule-based text) ready for an LLM writer with fallback
Key features
- Payroll validation against master data, with a Bahasa Indonesia summary (verdict, severity counts, top issues, recommendations) and export
- CEB Builder: AI extracts scanned deduction memos into upload-ready CEB batch workbooks
- PUS workbook builder, in manual and AI-extracted versions
- Master data management, including employee data from Oracle Fusion
- AI usage dashboard with trend and category charts
- Role-based admin, TOTP two-factor login, and a log center
Stack
Frontend
Next.jsReactTypeScriptTailwind CSSshadcn/uiTanStack Query & TableReact Hook FormZodZustandRechartsnext-intlVitestPlaywright
AI
OCRLLM extraction via gateway
Backend
DjangoDjango REST FrameworkJWT + TOTP 2FAPostgreSQLS3OpenAPIDockernginxSentry