On-Site Face Verification & Multi-Tenant Payroll System
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.)*