On-Site Face Verification & Multi-Tenant Payroll System

thumbnail
https://image.thum.io/get/width/1200/crop/630/https://adriandevera.vercel.app
date
Jun 24, 2026
slug
nunez-dental-clinic-payroll-system
status
Published
tags
Website
summary
Full-stack biometric attendance kiosk and multi-tenant payroll system built with Next.js 15, Flutter (on-device MobileFaceNet TFLite face recognition), Supabase Postgres, and Drizzle ORM.
type
Post

On-Site Face Verification & Multi-Tenant Payroll System

A full-stack, enterprise-grade payroll and biometric attendance solution built with Next.js 15, Supabase (Postgres), Drizzle ORM, and Flutter.
The system combines an on-device biometric mobile kiosk app with a multi-tenant web administration portal.

1. Problem & Challenge

Traditional payroll systems rely on manual timecards, badge swipes, or web-based timekeeping prone to buddy punching (employees clocking in for one another) and location fraud.
Client companies needed:
  • Zero-Trust Attendance Verification: Fraud-proof biometric verification directly at physical work sites.
  • Offline-First Kiosk Reliability: Ability to clock in/out during network drops or remote site shifts.
  • Multi-Tenant Isolation: Complete data isolation between client companies from a single deployment.
  • Compliant Philippine Payroll Engine: Automated calculations for daily/monthly rates, overtime rates, and statutory contributions (SSS, PhilHealth, Pag-IBIG).

2. System Architecture

The solution consists of two primary components communicating with a centralized Supabase/Postgres backend:

A. Companion Mobile Kiosk App (`/mobile_app` — Flutter)

  • **On-Device Biometrics:** Powered by Google ML Kit (face detection) and MobileFaceNet (TFLite) for local 192-dimensional vector embedding generation.
  • **Privacy-First Face Matching:** Facial recognition runs entirely on-device; biometric vector embeddings are never sent to external third-party cloud AI APIs.
  • **Biometric Liveness Verification:** Multi-angle head pose detection (blinking, smiling, turning) to prevent static photo or video playback spoofs.
  • **Network & Location Guard:** Enforces clock-ins only when connected to verified site Wi-Fi SSIDs or within geofenced GPS boundaries.
  • **Offline Sync & Reconciliation:** Stores encrypted attendance logs locally during connectivity outages and reconciles automatically when connection restores.

B. HR & Payroll Admin Dashboard (`/payroll-system` — Next.js 15)

  • **Multi-Tenant Portal:** Company member roles, location management, and kiosk device pairing via secure pairing codes.
  • **Payroll Processing Engine:** Real-time summary of regular hours, overtime, tardiness, and statutory contribution tiers.
  • **Audit & Evidence Viewer:** Admin review of attendance scan events with captured verification thumbnails and network metadata.
  • **Employee Portal:** Self-service payslip viewer and attendance history.

3. Technical Highlights

1. High-Performance On-Device Face Recognition

By running MobileFaceNet inference locally via TFLite on the Flutter app, biometric verification finishes in <300ms without server roundtrips. Facial embeddings are compared using cosine similarity against locally cached employee face profiles.

2. Multi-Tenant Architecture & Data Security

  • **Row Level Security (RLS):** Enforces strict company boundaries across Postgres tables (`companies`, `employees`, `attendance_logs`, `kiosk_devices`).
  • **Secure Kiosk Provisioning:** Kiosk devices pair with company accounts via short-lived alphanumeric pairing codes and device secret tokens.

3. Automated Statutory Computation Engine

Payroll runs automatically compute:
  • Gross Pay & Overtime Premiums (Regular Overtime, Rest Day, Special Non-Working, and Holiday rates).
  • Philippine Statutory Deductions: Tiered SSS bracket lookup, percentage-based PhilHealth with salary caps, and Pag-IBIG mandatory contributions.
  • Net Pay Calculation & PDF Payslip Generation.

4. Tech Stack Overview

  • **Mobile Kiosk:** Flutter, Dart, Google ML Kit, MobileFaceNet (TFLite), SQLite, Supabase Flutter SDK
  • **Web Portal:** Next.js 15 (App Router), TypeScript, Tailwind CSS 4, DaisyUI 5, Drizzle ORM
  • **Database & Auth:** Supabase PostgreSQL, Supabase Auth, Row Level Security (RLS)
  • **Deployment:** Vercel (Web Dashboard), Docker (Self-Hosted Postgres / Container Host)

*(Note: Proprietary enterprise platform. Specific client credentials, internal API keys, and database connections are excluded for privacy.)*

© Adrian De Vera - 2026