Attendance Management System
An attendance management platform designed to handle daily employee attendance, location validation, leave requests, supporting documents, and administrative workflows.
Administrative dashboard providing attendance overview, daily metrics, location monitoring, and operational presence summaries.
Interface Modules & Workflows
Context & Problem Statement
Attendance workflows can involve more than recording a timestamp. The system needs to account for work location, different attendance policies, employee identity, leave documentation, special assignments, and administrative review.
Relying on unverified self-reporting risks inaccurate attendance logs, while rigid timecard machines fail to accommodate flexible modern arrangements such as remote work, field assignments, or official travel.
Administrative teams require a consolidated operational view to monitor daily workforce presence, review leave submissions with verifiable attachments, and export consistent audit records.
- [01]Validate employee presence accurately for Work From Office (WFO) schedules using device geolocation and coordinate boundary verification.
- [02]Support multi-mode attendance flows encompassing Work From Home (WFH), leave requests (Izin and Sakit), and official duty assignments (Surat Tugas).
- [03]Centralize authentication, document uploads, bilingual support, and administrative monitoring in a single full-stack application.
Technical Approach & Key Decisions
Built as a full-stack Next.js application backed by PostgreSQL and Prisma. The system combines role-based authorization, secure session handling, geolocation validation, attendance workflows, document uploads, and administrative monitoring in a single application.
Full-Stack Next.js App Router & Prisma ORM
Centralized frontend interactions, server-side data fetching, and API route handlers within Next.js App Router, backed by Prisma ORM over PostgreSQL for type-safe relational data management.
Role-Based Access Control with Argon2id
Implemented multi-tier authorization with cryptographic Argon2id password hashing and session tokens, separating standard employee workflows from administrative oversight.
Client-Side Geolocation & Boundary Validation
Validated device GPS coordinates against configured office radius parameters on check-in, ensuring location-bound compliance for on-site attendance.
Blob Storage for Supporting Documentation
Integrated Vercel Blob storage for leave documents and doctor notes, guaranteeing fast uploads and secure retrieval for administrative audit.
Bilingual Dictionaries & Timezone Normalization
Structured bilingual dictionary support across Bahasa Indonesia and English with persisted locale preferences, normalizing all operational timestamps to Asia/Jakarta.
Architecture & Layer Breakdown
The architecture is structured around Next.js App Router, using Server Components for administrative views, route handlers for validated mutations, and Prisma ORM for relational queries against PostgreSQL.
Frontend & Presentation Layer
Next.js App Router interface styled with Tailwind CSS, interactive Leaflet mapping, and bilingual language switching.
- Next.js App Router & React Server Components
- Interactive Leaflet geospatial mapping
- Indonesian and English dictionary switching
- Responsive administrative dashboards and modals
Application & Security Layer
Session validation, role-conditioned route handlers, coordinate distance validation, and document upload pipelines.
- JWT and session-based authentication
- Argon2id password hashing
- Geofence distance calculation logic
- Vercel Blob document integration
Data & Persistence Layer
PostgreSQL database managed through Prisma ORM with relational foreign keys and indexed attendance logs.
- Prisma schema definitions & migrations
- PostgreSQL relational persistence
- Employee and attendance foreign key constraints
- Asia/Jakarta timezone normalized timestamps
System Integration
The Attendance Management System is part of the same broader personnel-management ecosystem as the P3K personnel dashboard. The two applications are maintained as separate web applications while sharing a PostgreSQL data layer. This allows attendance workflows to remain associated with employee and organizational data managed within the personnel system.
By utilizing common relational entities across PostgreSQL, daily attendance records, leave submissions, supporting documents, and official duty assignments are linked directly to employee and intern profiles maintained by the personnel administration system.
P3K Personnel Dashboard
- •Employee master data registry and service dossier records
- •Organizational hierarchy, departments, and section structure
- •Rank promotion tracking and civil service promotion ledgers
- •User account provisioning and administrative role assignments
Attendance Management System
- •Daily attendance check-in and check-out tracking (WFO and WFH)
- •Browser GPS coordinate capture and office radius validation
- •Leave and sick permit submission with document uploads
- •Official duty assignment (Surat Tugas) and meeting workflows
Key Engineering Capabilities
Geolocation Validation
GeolocationWFO attendance captures browser geolocation coordinates and computes distance against configured office boundaries to verify presence without exposing private infrastructure coordinates.
Attendance Lifecycle Workflow
AttendanceManages daily check-in and check-out transitions, tracking attendance states, timestamps, location metadata, and validation flags across both WFO and WFH policies.
Leave & Medical Permit Pipeline
Leave ManagementStructured Izin and Sakit submission flow enabling employees to upload supporting doctor notes or documentation, paired with administrative review queues.
Official Duty & Special Workflows
WorkflowsDedicated tracking for official assignments (Surat Tugas) and special operational routines such as Rapat, ensuring complete institutional accountability.
Administrative Monitoring Dashboard
AdministrationCentralized dashboard displaying real-time attendance counts, pending permit reviews, employee filters, and historical audit summaries.
Security & Role-Based Authorization
SecuritySecure session tokens, Argon2id password hashing, HttpOnly cookie handling, and middleware-enforced role restrictions.
Bilingual Interface & Timezone Consistency
LocalizationIntegrated language switcher between Bahasa Indonesia and English with persisted locale preferences, preserving Asia/Jakarta timezone integrity across all dates.
Automated Attendance Processing
AutomationAutomated background processing routines handling daily attendance state cutoffs, unresolved check-ins, and aggregate status compilation.
Results & Impact
Unified on-site attendance, remote check-ins, leave permits, and official duty assignments into a single, cohesive full-stack web application.
Established reliable location validation for on-site presence while maintaining distinct structured workflows for remote and field personnel.
Streamlined administrative verification of supporting documents through digital attachments and role-based review queues.
Challenges & Considerations
- •Handling variations in device GPS accuracy across different mobile browsers required implementing coordinate tolerance thresholds to avoid false rejections during valid check-ins.
- •Ensuring consistent date and time calculations across client and server environments required standardizing all timestamp operations on the Asia/Jakarta timezone.
Key Learnings
- •Building a workforce attendance platform highlighted that real-world operational software requires robust edge-case handling for location permissions, network interruptions, and diverse document formats.