Exa HRM - React & Node.js HRIS with Geofencing, Webcam Snapshot & Automated Payroll

Exa HRM is a comprehensive and responsive Web Application designed to digitalize office operations smoothly across all devices, including mobile phones, tablets, and laptops/PCs. Built with a modern tech stack (React, Node.js, and Firebase), this platform delivers exceptional interactive performance, advanced attendance security, and fully automated human resource management pipelines.

🌟 Premium Core Features

1. Web Attendance System with Dual Verification

• Geofencing Validation: The backend automatically calculates the employee's live GPS coordinates against the office location using the Haversine Formula. Clock-in or clock-out attempts exceeding the allowed 50-meter radius are strictly rejected.
• Webcam Snapshot: Requires real-time camera access to capture a selfie snapshot during check-in/out, preventing identity fraud and attendance tampering.
• Automatic Lateness Tracker: Automatically logs "Late" status along with the exact duration in minutes if an employee clocks in past the cutoff time (e.g., 08:00 AM).

2. Automated Payroll System

• Formula-Based Calculation: Eliminates manual processes by retrieving monthly attendance records directly from Firestore. Net Salary is automatically calculated using the logic: Net Salary = Base Salary + Allowances - Deductions (Lateness/Absences).
• Automatic Deductions: Automatically applies penalties (e.g., deducting IDR 20,000 for lateness over 15 minutes or deducting a daily portion for unapproved absences).
• Digital PDF Payslips: Generates professional digital payslips available for instant bulk or individual download by both HRD and employees.

3. Background System Tasks (Cron Jobs)

• Auto-Absenteeism (Cron Alpa): Runs automatically every night at 23:59. Active employees who failed to check in and have no approved leave requests are automatically marked as "Absent" (Alpa) for that day.

4. Multi-Role Interactive Dashboards

• Employee Portal: Access to a quick single-click Clock-In/Out panel, real-time monthly personal attendance history charts, an online leave application system, and a digital salary slip download center.
• Admin / HRD Panel: Real-time analytical widgets showing today's attendance distribution percentages, active staff counts, centralized leave request management (Approve/Reject), bulk data importing from Excel templates, and full operational rules configuration.

🛠️ Technical Specification

• Frontend: React.js & Tailwind CSS (Interactive single-page application with an automatically collapsing sidebar and responsive mobile card-views).
• Backend: Node.js & Express.js (Centralized business logic validation, security enforcement, JWT authentication, and automated payroll computations).
• Database: Firebase Firestore (Real-time NoSQL database structure managing employee credentials, attendance logs, and digital reports securely).

📦 Package Content

• Complete Frontend Source Code (React.js + Vite)
• Complete Backend Server Source Code (Node.js + Express)
• Initial Administrator Account Generation Script (createAdmin.js)
• Environment Configuration Template Files (.env.example)
• Comprehensive End-User License Agreement (EULA) Text Documentation

🌟 Key System Features

• Dual-Verification Attendance: Uses live Geofencing (Haversine Formula) within a 50-meter radius and requires a webcam snapshot to prevent identity fraud.
• Automated Payroll System: Automatically calculates monthly net salaries based on live Firestore data, handling automatic deductions for lateness or unapproved absences.
• Digital PDF Payslips: Generates automated digital salary slips in PDF format that can be instantly downloaded by both employees and HRD.
• Background Cron Jobs: Runs daily at 23:59 to automatically mark active employees who didn't clock in as "Absent/Alpa" if no leave request is approved.
• Multi-Role Dashboard: Separate, interactive user experiences tailored for Employee portals and Admin/HRD control panels.
• Mass Data Import & Export: Features easy bulk employee data importing via Excel templates and comprehensive attendance report exporting to Excel/CSV.
• Fully Responsive Layout: Powered by Tailwind CSS, featuring a desktop-optimized sticky sidebar that smoothly transforms into mobile card-views.

📋 System Requirements

• Node.js Runtime: v16.x or higher (Recommended: Latest LTS version)
• NPM (Node Package Manager): v8.x or higher
• Database & Services: Free or Premium Google Firebase Account (Firestore Database & Firebase Auth enabled)
• Web Browser Support: Modern web browsers (Google Chrome, Mozilla Firefox, Safari, Edge) with Webcam and Location/GPS access permissions granted
• Server/Hosting Environment: Any VPS, Shared Hosting with Node.js support, or Cloud Platforms (such as Heroku, Render, AWS, Vercel/Railway)

🚀 Installation & Setup Instructions

Follow these step-by-step instructions to get your HRIS & Online Attendance system up and running on your local machine or production server.

Step 1: Firebase Console Configuration

1. Go to the Firebase Console: https://console.firebase.google.com/
2. Create a new project (e.g., "Sistem-Absensi-Karyawan").
3. Navigate to Authentication and enable the Email/Password sign-in method.
4. Navigate to Cloud Firestore Database, enable it in test or production mode, and select your preferred database location (e.g., asia-southeast2).
5. Download the Firebase Admin SDK Service Account Key:
   • Go to Project Settings > Service Accounts.
   • Click Generate New Private Key and download the JSON file. You will need the values inside this file for your backend configuration.

Step 2: Backend Server Setup

1. Open your terminal and navigate to the backend root directory:

   <code>cd /path-to-your-package/backend</code>
   
   

2. Install all required node dependencies:

   <code>npm install</code>
   
   

3. Create a new file named .env in the backend root directory (you can copy the structure from .env.example).
4. Fill out the .env file variables using your downloaded Firebase JSON key credentials:

   <code>PORT=5000
   NODE_ENV=development
   
   # Firebase Admin SDK Credentials
   FIREBASE_PROJECT_ID=your-firebase-project-id
   FIREBASE_PRIVATE_KEY_ID=your-private-key-id
   FIREBASE_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----nYOUR_KEY_HEREn-----END RSA PRIVATE KEY-----n"
   FIREBASE_CLIENT_EMAIL=your-client-email@your-project-id.iam.gserviceaccount.com
   FIREBASE_CLIENT_ID=your-client-id
   FIREBASE_WEB_API_KEY=your-firebase-web-api-key
   
   # JWT Secret
   JWT_SECRET=your_super_secret_jwt_key_here
   
   # Office Geofencing Configuration
   OFFICE_LATITUDE=-6.2088
   OFFICE_LONGITUDE=106.8456
   GEOFENCE_RADIUS_METER=50
   
   # Work Shift Rules
   ATTENDANCE_CUTOFF_HOUR=8
   ATTENDANCE_CUTOFF_MINUTE=0
   
   # Frontend Client URL
   FRONTEND_URL=http://localhost:5173</code>
   
   

5. Generate the initial system Administrator account by running the configuration script:

   <code>node src/scripts/createAdmin.js</code>
   
   

   *Note: You can open src/scripts/createAdmin.js beforehand to review or change the default email ([email protected]) and password (AdminPassword123!).

6. Start the backend development server:

   <code>npm run dev</code>
   
   

   The backend API will run actively at http://localhost:5000.

Step 3: Frontend Web Client Setup

1. Open a new terminal window and navigate to the frontend directory:

   <code>cd /path-to-your-package/frontend</code>
   
   

2. Install the frontend application dependencies:

   <code>npm install</code>
   
   

3. Create a new file named .env in the frontend root directory and configure your backend API gateway address:

   <code>VITE_API_URL=http://localhost:5000/api</code>
   
   

4. Launch the frontend development server:

   <code>npm run dev</code>
   
   

   The web client interface will successfully run at http://localhost:5173.