+--------------------+
| Admin Panel |
|--------------------|
| Create Geofences |
| Assign Locations |
| View Reports |
+---------+----------+
|
v
+---------------------+
| Backend Server |
|---------------------|
| Stores Geofence |
| Validates Check-ins |
+----------+----------+
|
+---------------------+----------------------+
| |
+--------v--------+ +---------v---------+
| Mobile App | | Database (SQL) |
|-----------------| |-------------------|
| GPS Coordinates | | Geofence Table |
| Check-in Button | | Attendance Table |
| Geofence Logic | +-------------------+
+-----------------+
CREATE TABLE attendance (
id INT PRIMARY KEY AUTO_INCREMENT,
employee_id INT,
latitude DECIMAL(9,6),
longitude DECIMAL(9,6),
status ENUM('IN', 'OUT'),
is_within_geofence BOOLEAN,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
app.post('/api/geofence', async (req, res) => {
const { name, latitude, longitude, radius } = req.body;
const query = `INSERT INTO geofences (name, latitude, longitude, radius) VALUES (?, ?, ?, ?)`;
await db.execute(query, [name, latitude, longitude, radius]);
res.send({ message: 'Geofence created' });
});
import Geolocation from '@react-native-community/geolocation';
const checkDistanceFromGeofence = (userLat, userLng, fenceLat, fenceLng, radiusMeters) => {
const toRad = (val) => val * Math.PI / 180;
const R = 6371e3; // Earth radius in meters
const φ1 = toRad(userLat);
const φ2 = toRad(fenceLat);
const Δφ = toRad(fenceLat - userLat);
const Δλ = toRad(fenceLng - userLng);
const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
Math.cos(φ1) * Math.cos(φ2) *
Math.sin(Δλ/2) * Math.sin(Δλ/2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
const distance = R * c; // in meters
return distance <= radiusMeters;
};
// Usage inside a function
Geolocation.getCurrentPosition((position) => {
const { latitude, longitude } = position.coords;
const isInside = checkDistanceFromGeofence(latitude, longitude, fenceLat, fenceLng, radius);
if (isInside) {
// Enable Punch-In Button
} else {
// Show "Outside location" warning
}
});
app.post('/api/attendance', async (req, res) => {
const { employee_id, latitude, longitude, status } = req.body;
// Fetch employee’s assigned geofence
const [row] = await db.execute(`
SELECT g.latitude, g.longitude, g.radius
FROM geofences g
JOIN employee_geofence eg ON eg.geofence_id = g.id
WHERE eg.employee_id = ?
`, [employee_id]);
if (!row.length) return res.status(400).send({ error: 'No geofence assigned' });
const geofence = row[0];
const distance = getDistance(latitude, longitude, geofence.latitude, geofence.longitude);
const is_within_geofence = distance <= geofence.radius;
await db.execute(`
INSERT INTO attendance (employee_id, latitude, longitude, status, is_within_geofence)
VALUES (?, ?, ?, ?, ?)`,
[employee_id, latitude, longitude, status, is_within_geofence]
);
res.send({ success: true, is_within_geofence });
});
// Haversine Formula
function getDistance(lat1, lon1, lat2, lon2) {
const R = 6371e3;
const toRad = (v) => v * Math.PI / 180;
const φ1 = toRad(lat1), φ2 = toRad(lat2);
const Δφ = toRad(lat2 - lat1), Δλ = toRad(lon2 - lon1);
const a = Math.sin(Δφ/2)**2 + Math.cos(φ1)*Math.cos(φ2)*Math.sin(Δλ/2)**2;
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return R * c;
}Adding Geofencing Feature in TimeChart Mobile Attendance App
Objective:To integrate geofencing-based attendance tracking in the TimeChart mobile app, allowing employees to automatically mark attendance only when they are within a pre-defined location radius (geofence)—such as an office, project site, or client location.
Goals:Improve attendance accuracy for on-site and field employees.
- Improve attendance accuracy for on-site and field employees.
Prevent fake or off-site punch-ins.
- Prevent fake or off-site punch-ins.
Make mobile attendance automatic and location-aware.
- Make mobile attendance automatic and location-aware.
Provide real-time attendance data for HR/admin managers.
- Provide real-time attendance data for HR/admin managers.
Add a "Geofence Management" module in the admin dashboard.
- Add a "Geofence Management" module in the admin dashboard.
Allow admins to:
Add multiple locations.
- Add multiple locations.
Set radius (e.g. 100m, 200m) for each location.
- Set radius (e.g. 100m, 200m) for each location.
Name each location (e.g. Main Office, Site A, Site B).
- Name each location (e.g. Main Office, Site A, Site B).
Assign employees or teams to specific geofenced locations.
- Assign employees or teams to specific geofenced locations.
View a map view using Google Maps API or similar.
- View a map view using Google Maps API or similar.
- Allow admins to:Add multiple locations.Set radius (e.g. 100m, 200m) for each location.Name each location (e.g. Main Office, Site A, Site B).Assign employees or teams to specific geofenced locations.View a map view using Google Maps API or similar.
Enable background GPS tracking only during working hours or app usage.
- Enable background GPS tracking only during working hours or app usage.
Trigger attendance actions (punch in/out) only when:
The user is inside the geofence.
- The user is inside the geofence.
The app confirms entry via latitude/longitude.
- The app confirms entry via latitude/longitude.
- Trigger attendance actions (punch in/out) only when:The user is inside the geofence.The app confirms entry via latitude/longitude.
Show "Punch In" and "Punch Out" buttons only if the employee is within the geofenced area.
- Show "Punch In" and "Punch Out" buttons only if the employee is within the geofenced area.
Display real-time status: “Inside Geofence” / “Outside Geofence”.
- Display real-time status: “Inside Geofence” / “Outside Geofence”.
Push alert: "You are outside your assigned work area" if a user tries to mark attendance beyond the boundary.
- Push alert: "You are outside your assigned work area" if a user tries to mark attendance beyond the boundary.
Store geofence coordinates and radius in the database.
- Store geofence coordinates and radius in the database.
Calculate and validate device location against stored geofence.
- Calculate and validate device location against stored geofence.
Log geofenced attendance attempts with timestamp and coordinates.
- Log geofenced attendance attempts with timestamp and coordinates.
Generate geofence-related attendance reports for each location.
- Generate geofence-related attendance reports for each location.
App will request location permission from the user clearly.
- App will request location permission from the user clearly.
Location data will be:
Used only during work hours or app usage.
- Used only during work hours or app usage.
Stored securely (encrypted if needed).
- Stored securely (encrypted if needed).
Never shared with third parties.
- Never shared with third parties.
- Location data will be:Used only during work hours or app usage.Stored securely (encrypted if needed).Never shared with third parties.
Show location-based reports:
Daily employee punch-ins by location.
- Daily employee punch-ins by location.
Late arrivals or off-site punches.
- Late arrivals or off-site punches.
- Show location-based reports:Daily employee punch-ins by location.Late arrivals or off-site punches.
Visual map report: “Who checked in where?”
- Visual map report: “Who checked in where?”
Export to Excel/CSV.
- Export to Excel/CSV.
Frontend: React Native (Mobile), React/Angular (Admin Dashboard)
- Frontend: React Native (Mobile), React/Angular (Admin Dashboard)
Backend: Node.js / Laravel / Django (choose depending on current system)
- Backend: Node.js / Laravel / Django (choose depending on current system)
Database: MySQL / PostgreSQL
- Database: MySQL / PostgreSQL
Location API: Google Maps API or Mapbox API
- Location API: Google Maps API or Mapbox API
Mobile Location Services: Android Location Manager, iOS Core Location Framework
- Mobile Location Services: Android Location Manager, iOS Core Location Framework
Phase
Description
Duration
Phase 1
Requirement Analysis & Design
5 Days
Phase 2
Backend Development
7 Days
Phase 3
Mobile App Integration
10 Days
Phase 4
Admin Dashboard Update
5 Days
Phase 5
Testing & QA
7 Days
Phase 6
Deployment & User Training
3 Days
Total Estimated Time: 37 Days
Team Roles:Project Manager: Oversees planning, execution, and delivery.
- Project Manager: Oversees planning, execution, and delivery.
Backend Developer: Builds geofence logic and location data storage.
- Backend Developer: Builds geofence logic and location data storage.
Mobile Developer: Integrates GPS and geofence into the app.
- Mobile Developer: Integrates GPS and geofence into the app.
Frontend Developer: Updates admin dashboard for geofence management.
- Frontend Developer: Updates admin dashboard for geofence management.
QA Tester: Tests functionality, accuracy, and performance.
- QA Tester: Tests functionality, accuracy, and performance.
UI/UX Designer: Designs interface for map view and location setup (if needed).
- UI/UX Designer: Designs interface for map view and location setup (if needed).
Working Geofencing Feature in TimeChart mobile apps (Android + iOS).
- Working Geofencing Feature in TimeChart mobile apps (Android + iOS).
Admin panel with geofence setup and assignment tools.
- Admin panel with geofence setup and assignment tools.
Real-time attendance validation via geofence.
- Real-time attendance validation via geofence.
Location-based attendance reports and alerts.
- Location-based attendance reports and alerts.
Comments