Agthia Employee Hub – Payslip Self-Service Platform
HOME - our portfolio - agthia employee hub
Agthia Employee Hub – Payslip Self-Service Platform
Industry
Food & Beverage / HR Technology
Built for
Web + Mobile (iOS & Android)
Country
United Arab Emirates
Region
Middle East
ERP Integration
SAP (XML API)
Project Description
Agthia Employee Hub is a cross-platform payslip self-service solution built by TTPL for Agthia Group PJSC — one of the UAE's largest food and beverage conglomerates. The platform gives employees secure, on-demand access to their monthly payslips across both a Flutter mobile app (iOS & Android) and a Angular web portal, eliminating HR dependency for payslip requests and enabling employees to view, download, and share their pay documents from any device.
The system integrates directly with Agthia's SAP ERP to fetch live payslip data in real time. Authentication is passwordless — employees validate their identity against SAP records using their registered email or mobile number, receive a time-bound OTP, and are issued a secure JWT token that authorizes all subsequent payslip requests. No static credentials are stored.
Generated payslips are pixel-perfect branded PDFs — carrying the Agthia Group logo, company stamp, and footer — produced on demand via PuppeteerSharp (headless Chromium rendering). The platform handles the full payslip lifecycle: identity verification, live SAP data retrieval, cutoff-date enforcement, PDF rendering, and download — across both mobile and web interfaces from a single unified API.
Goal
The goal of Agthia Employee Hub was to give Agthia Group's workforce direct, secure, and immediate access to their monthly payslips — without routing every request through the HR department. The platform needed to integrate with the existing SAP ERP system, enforce authentication without managing static passwords, and deliver a consistent experience across both mobile and web channels.
- Enable employees to access payslips on demand via mobile (iOS & Android) and web browser
- Authenticate users passwordlessly through SAP identity validation and OTP delivery
- Retrieve real-time payslip data directly from SAP ERP via XML API
- Generate high-fidelity, branded PDF payslips on demand with Agthia Group's visual identity
- Enforce payslip cutoff dates so documents are only accessible after the relevant processing period
- Eliminate HR team involvement in routine payslip distribution
Challenges
SAP ERP Integration via XML: Agthia's payslip data lives inside SAP, which exposes it through an XML-based API with a non-standard response format. Parsing and mapping complex SAP XML structures — covering employee details, multi-line earnings, multi-line deductions, summaries, and bank information — into a clean, structured model required careful XML deserialization and field mapping work.
Passwordless Authentication Across Two Channels: The platform had to authenticate employees without storing passwords — using only their SAP-registered email or mobile number. The authentication flow had to validate identity against live SAP records, deliver a time-bound OTP, verify it, and issue a JWT token containing the employee's SAP Personnel Number (Pernr) — all within a seamless UI experience on both mobile and web.
Pixel-Perfect Branded PDF Generation: Payslips had to be rendered as fully branded PDF documents — matching Agthia Group's official payslip format — with the company logo, stamp, footer, and precisely formatted earnings/deductions tables. Generating consistent, print-ready PDFs across server environments required a headless Chromium pipeline (PuppeteerSharp) rendering a Razor-templated HTML document.
Cross-Platform Delivery from a Single API: The same backend API had to serve both a Flutter mobile app and an Angular web portal with identical data and security guarantees — requiring the API to be platform-agnostic in authentication, response format, and PDF streaming behavior while remaining compatible with mobile download flows and browser inline display.
Solutions
SAP XML Integration with Structured Payslip Parsing
We built a dedicated SAP API service that calls Agthia's SAP system with the employee's Personnel Number (Pernr) and the requested month/year, receives the payslip response as XML, and deserializes it into a structured model covering employee details (name, department, designation, grade, cost center, bank, IBAN, passport, nationality), a financial summary (total earnings, adjustments, gross pay, deductions, net pay, bank transfer, currency), and itemized earnings and deductions lists. The parsed model feeds both the web/mobile display and the PDF generator.
OTP-Based Passwordless Authentication
The authentication flow is entirely passwordless. An employee enters their registered email or mobile number, which is validated live against SAP records. If found, a time-bound OTP is dispatched via email or SMS. On successful OTP verification, a JWT token is issued with the employee's SAP Pernr embedded as a claim — no passwords, no stored credentials. Every subsequent API request uses this token; the Pernr claim is extracted server-side to authorize payslip access for the correct employee, with token expiration enforced via a custom request filter.
On-Demand PDF Generation via PuppeteerSharp
Payslips are generated as fully branded, print-quality PDFs using PuppeteerSharp — a .NET headless Chromium library. The payslip data is first rendered into a Razor HTML view applying Agthia Group's exact visual identity (logo, company stamp, footer image, and formatted tables), then PuppeteerSharp converts the rendered HTML to PDF with precise typography and layout control. This approach produces payslips visually identical to the official Agthia format, downloadable on demand from both the mobile app and web portal.
Flutter Mobile App (iOS & Android)
The Flutter mobile app gives employees a native experience on both iOS and Android. Employees log in via OTP, view their profile on the dashboard, and navigate to the payslip screen where they select a month and year to fetch their pay document. The payslip is rendered inline using SyncFusion's Flutter PDF viewer and can be downloaded to device storage or shared directly via the native share sheet (share_plus). Provider handles state management, and Dio manages all HTTP communication with the API.
Angular Web Portal
The Angular 20 web portal delivers the same self-service experience through the browser, with a responsive layout using Bootstrap 5. Employees authenticate via OTP, access their dashboard showing employee details, select payslip month and year, view the full payslip rendered inline, and download it as a PDF. The portal supports multiple languages via an i18n translation layer (ngx-translate), ensuring accessibility for Agthia's internationally diverse workforce across the UAE.
Cutoff Date Enforcement & Access Controls
A dedicated cutoff date validation service ensures payslips are only accessible after the relevant payroll processing period closes. When a payslip request is made, the system validates the requested month/year against the configured cutoff date for the employee's company — returning a clear, actionable error message if the payslip is not yet available. This prevents employees from accessing incomplete or unprocessed pay data, maintaining data integrity aligned with Agthia's payroll cycle.
