Overview

Timetracker was developed as an internal application to streamline the clock-in and clock-out process for assembly line employees. The tool ensured accurate payroll calculations and offered managers an intuitive dashboard to oversee employee hours and payroll data. This effort replaced manual methods, improving efficiency and satisfaction for employees and management.

Project Highlights

Impact

• Reduced clock-in/out time by approximately 30%.

• Improved payroll generation efficiency by an estimated 25%.

• Enhanced overall employee satisfaction through simplified workflows.

Tech Stack

• Frontend: TypeScript, AngularJS, Material UI

• Backend: Python Flask

• Database: SQL Server

Key Features

• Badge scanning for quick and secure clock-in/out.

• Manager dashboard to monitor hours, manage payroll, and oversee workflows.

• Secure API integration to ensure protected internal routes.

Problem Statement

Assembly line employees faced challenges with manual clock-in and clock-out systems, including:

1. Inefficient time tracking, leading to delays and inaccuracies in payroll.

2. Lack of a centralized system for managers to oversee employee hours and approve payments.

Timetracker aimed to address these issues by automating the process with a user-friendly interface.

Solution Overview

The solution provided a streamlined badge-based clock-in system integrated with a secure API. Key features included:

1. Automated Time Tracking: Employees could simply scan their badges to clock in or out, reducing time and errors.

2. Managerial Tools: A dashboard offered managers real-time updates on employee hours, payroll status, and insights to improve workflow.

3. Iterative Design Process: Regular feedback from non-technical users shaped the interface to be intuitive and accessible.

Table of contents

System Architecture

The Timetracker system was designed with a modular architecture to ensure scalability, security, and seamless integration across all components. Each layer of the architecture played a critical role in automating workflows and enhancing user experience.

Backend

• Framework: Python Flask
  • Chosen for its lightweight structure and ability to build RESTful APIs efficiently.

• Core Functionalities:
  • Processed clock-in/out requests via APIs with data validation to ensure accuracy.
  • Managed secure communication with the SQL Server database for real-time updates.

• Security Measures:
  • Enforced token-based authentication for secure API access.
  • Protected internal routes with role-based access controls to restrict unauthorized data manipulation.

Frontend

• Framework: TypeScript with AngularJS
  • Used AngularJS for creating dynamic, interactive interfaces tailored to the needs of employees and managers.

• Design System: Material UI
  • Ensured consistency and responsiveness across devices, from desktops to tablets used on the assembly line.

• Features:
  • User-friendly interface with a simple badge-scanning flow for employees.
  • Dashboard for managers with real-time tracking, employee hour summaries, and payroll tools.

Database

• Database Engine: SQL Server
  • Selected for its reliability and ability to handle structured data at scale.

• Database Schema:
  • Employee records, clock-in/out timestamps, and payroll data were stored in normalized tables.

• Optimizations:
  • Indexing ensured rapid data retrieval for real-time operations.
  • Scheduled backups maintained data integrity and recovery options.

Integration & Middleware

• API Development:
  • RESTful APIs connected the frontend to the backend, enabling seamless data exchange.
  • APIs handled CRUD operations for employee records, time tracking, and payroll data.

• Middleware:
  • Input validation middleware ensured consistent and secure data processing.

Deployment

• Infrastructure: Hosted on an on-premises server for internal use, ensuring data security and compliance with company policies.

• CI/CD Pipeline:
  • Automated testing and deployment pipelines minimized errors and reduced downtime during updates.

System Workflow

Employee Clock-In/Out:

Managerial Oversight:

Payroll Generation:

API Documentation

The Timetracker APIs provide secure endpoints for employee time tracking, payroll management, and administrative actions.

Endpoints Overview

Authentication

All endpoints require token-based authentication. Tokens are included in the Authorization header as a Bearer token.

Example:

Authorization: Bearer <your-token>

1. POST /api/clock-in

Description:

Logs a clock-in or clock-out event for an employee.

Headers:

• Authorization: Bearer token (required)

• Content-Type: application/json

Request Body:

{
  "employee_id": "12345",
  "timestamp": "2024-11-29T10:30:00Z",
  "action": "clock-in"
}

Response:

{
  "status": "success",
  "message": "Clock-in recorded successfully."
}

Error Codes:

• 400 Bad Request: Invalid data in the request body.

• 401 Unauthorized: Missing or invalid token.

2. GET /api/employee

Description:

Retrieves details for a specific employee.

Headers:

• Authorization: Bearer token (required)

Query Parameters:

• employee_id (required): ID of the employee.

Example Request:

GET /api/employee?employee_id=12345

Response:

{
  "employee_id": "12345",
  "name": "John Doe",
  "status": "clocked-in",
  "last_clock_in": "2024-11-29T10:30:00Z"
}

Error Codes:

• 404 Not Found: Employee ID not found.

• 401 Unauthorized: Missing or invalid token.

3. GET /api/employees

Description:

Fetches a list of all employees and their statuses.

Headers:

• Authorization: Bearer token (required)

Response:

[
  {
    "employee_id": "12345",
    "name": "John Doe",
    "status": "clocked-in"
  },
  {
    "employee_id": "67890",
    "name": "Jane Smith",
    "status": "clocked-out"
  }
]

Error Codes:

• 401 Unauthorized: Missing or invalid token.

4. POST /api/payroll

Description:

Generates a payroll summary for all employees.

Headers:

• Authorization: Bearer token (required)

• Content-Type: application/json

Request Body:

{
  "start_date": "2024-11-01",
  "end_date": "2024-11-30"
}

Response:

{
  "status": "success",
  "payroll_summary": [
    {
      "employee_id": "12345",
      "total_hours": 160,
      "pay": 3200
    },
    {
      "employee_id": "67890",
      "total_hours": 120,
      "pay": 2400
    }
  ]
}

Error Codes:

• 400 Bad Request: Invalid date range.

• 401 Unauthorized: Missing or invalid token.

5. PUT /api/update

Description:

Updates details of an employee, such as their name or status.

Headers:

• Authorization: Bearer token (required)

• Content-Type: application/json

Request Body:

{
  "employee_id": "12345",
  "name": "Johnathan Doe",
  "status": "active"
}

Response:

{
  "status": "success",
  "message": "Employee details updated."
}

Error Codes:

• 400 Bad Request: Invalid or missing fields in the request body.

• 404 Not Found: Employee ID not found.

User Documentation

The Timetracker system offers two primary interfaces: one for employees and another for managers. This documentation provides a guide for using the key features of the system.

For Employees

Purpose: To clock in and clock out of work easily using a badge-scanning system.

Steps to Clock In/Out

1. Scan Badge:
   • Use the badge scanner placed at your workstation or designated area.

2. Confirm Action:
   • Tap the confirmation button on the screen to complete the clock-in or clock-out action.
   • The system will display a success message once the action is recorded.

Troubleshooting:

• If your badge is not recognized, ensure it is held properly against the scanner.

• Contact your supervisor if the issue persists.

For Managers

Purpose: To oversee employee work hours, approve payroll, and manage team attendance.

Accessing the Dashboard

1. Log In:
   • Navigate to the secure portal at [internal URL].
   • Enter your credentials and complete multi-factor authentication (if enabled).

2. View Employee Statuses:
   • The dashboard displays a real-time list of all employees, their clock-in statuses, and hours worked.
   • Use the search bar to locate specific employees by name or ID.

Managing Payroll

1. Generate Payroll Summary:
   • Go to the "Payroll" tab in the dashboard.
   • Select the date range for the payroll period.
   • Click “Generate” to review the hours worked and corresponding pay for each employee.

2. Approve Payroll:
   • Review the summary and click “Approve” to finalize payroll.
   • The system saves the summary for future audits.

Editing Employee Details

1. Navigate to the Employee Tab:
   • Find the employee you wish to update in the dashboard.

2. Edit Information:
   • Click on the employee record and update their details (e.g., name, status).
   • Save the changes to apply them instantly.

Common Scenarios

1. Approving Late Clock-Ins

• Locate the employee in the dashboard.

• Click "Adjust Time" to edit the clock-in time manually.

• Save the changes, and the system will recalculate the total hours worked.

2. Generating Reports for Multiple Employees

• Use the "Batch Operations" tool to process multiple employees' data at once.

• Upload a CSV file with employee IDs and actions (e.g., clock-in, clock-out).

• Review the system-generated preview before finalizing.

3. Resolving Badge Issues

• If an employee's badge isn’t working, issue a temporary badge using the "Badge Management" tab.

Frequently Asked Questions (FAQ)

Q: What if I forget to clock in or out?

A: Inform your manager, who can manually adjust the time in the system.

Q: How secure is my data?

A: All data is encrypted and accessible only through role-based access controls.

Q: Can I access my work hours?

A: Employees can request their clock-in/out history from their manager.

Maintenance Guide

This guide outlines the best practices and steps for maintaining the Timetracker for Assembly Employees system to ensure reliability, performance, and security.

1. Regular Maintenance Tasks

1.1 Database Maintenance

• Backup:
  • Schedule daily backups of the SQL Server database.
  • Verify backup integrity weekly to ensure restorability.

• Optimization:
  • Run database optimization scripts monthly to rebuild indexes and update statistics for improved query performance.

• Cleanup:
  • Periodically archive or delete outdated clock-in/out records to maintain database size and performance.

1.2 Frontend Maintenance

• Code Review:
  • Review and update AngularJS and Material UI components quarterly to ensure compatibility with modern browsers.

• Dependency Updates:
  • Update TypeScript and AngularJS dependencies every quarter or as updates are released.
  • Test compatibility in a staging environment before deployment.

1.3 Backend Maintenance

• API Performance Testing:
  • Run stress tests on the Python Flask APIs biannually to ensure they handle peak loads effectively.

• Security Patching:
  • Apply patches and updates to Python Flask libraries and the server environment as soon as vulnerabilities are announced.

1.4 CI/CD Pipeline

• Pipeline Checks:
  • Review CI/CD workflows monthly to ensure deployments are automated and efficient.
  • Monitor build times and logs for bottlenecks or errors.

• Testing:
  • Update and expand automated test cases to cover new features or changes in business logic.

2. System Monitoring

2.1 Logs

• Log Types:
  • Application Logs: Monitor API requests, errors, and responses.
  • Access Logs: Track user activity for security and auditing purposes.

• Log Retention:
  • Retain logs for a minimum of 90 days for troubleshooting and audits.

• Tools:
  • Use tools like Logstash or ELK Stack for centralized log management.

2.2 Uptime Monitoring

• Tools:
  • Use uptime monitoring tools like Pingdom or Nagios to track the system's availability.

• Alerts:
  • Set up alerts for key issues such as server downtime, high API response times, or database connection errors.

3. Troubleshooting

3.1 Common Issues

• Issue: Badge scanning not working.
  • Cause: Scanner hardware malfunction or API connection error.
  • Solution: Verify hardware functionality, and check API logs for errors. Restart services if necessary.

• Issue: Payroll data discrepancies.
  • Cause: Clock-in/out data corruption or user error.
  • Solution: Verify database records for the affected employee and manually adjust as needed.

• Issue: Slow API response times.
  • Cause: High server load or inefficient database queries.
  • Solution: Analyze API logs and optimize queries or increase server resources.

3.2 Escalation Process

1. Identify and document the issue with detailed logs.

2. Escalate unresolved issues to the development team or vendor with all relevant details.

4. Security Best Practices

• Access Control:
  • Regularly audit user roles and permissions. Revoke access for inactive accounts immediately.

• Encryption:
  • Ensure all data in transit is encrypted using TLS.
  • Review encryption certificates annually and renew them before expiration.

• Vulnerability Scanning:
  • Perform security scans quarterly to identify and fix vulnerabilities in the application and infrastructure.

• Incident Response:
  • Maintain an incident response plan and practice it biannually to handle security breaches effectively.

5. Update & Upgrade Procedures

5.1 Frontend Upgrades

1. Clone the production codebase into a staging environment.

2. Update AngularJS and Material UI to the latest stable versions.

3. Test all UI functionalities and APIs in staging before deploying to production.

5.2 Backend Updates

1. Apply Python Flask and dependency updates in a staging environment.

2. Run regression tests to validate API functionality.

3. Deploy updates during off-peak hours to minimize disruptions.

5.3 Database Migration

1. Export the database schema and data as a backup.

2. Test schema changes or updates in a staging environment.

3. Apply the migration script to production during maintenance windows.

6. Documentation Updates

• Update technical and user documentation whenever features are added or modified.

• Maintain a changelog for every update to track changes across system versions.

Future Enhancements

1. Mobile Accessibility
   • Develop a mobile application to allow employees and managers to use the system on their smartphones.
   • Enable push notifications for reminders, such as clocking in or reviewing payroll.

2. Analytics and Reporting
   • Introduce advanced analytics to provide insights into employee attendance trends and productivity.
   • Generate customizable reports for managers to streamline decision-making.

3. Integration with HR Systems
   • Integrate with existing HR software for seamless data transfer and enhanced payroll processing.
   • Automate benefits calculations based on attendance data.

4. Biometric Support
   • Enhance badge scanning with biometric options like fingerprint or facial recognition for added security.

5. Multilingual Support
   • Provide language options to cater to a diverse workforce and improve accessibility.

Lessons Learned

1. User-Centric Design Matters
   • Iterative feedback from employees and managers was crucial for refining the interface. Simple and intuitive design significantly improved adoption rates.

2. Communication with Non-Technical Users
   • Explaining technical concepts and gathering feedback from non-technical users was a challenge but helped bridge the gap between user needs and technical implementation.

3. Importance of Scalability
   • While the system was designed for the current scale, planning for future growth could have been emphasized more during initial development.

4. Team Collaboration
   • Dividing work between frontend, backend, and database development fostered efficiency, but regular sync-ups were necessary to align on dependencies and integrations.

5. Proactive Maintenance Planning
   • Incorporating automated testing and robust CI/CD pipelines from the beginning helped streamline deployments and minimize downtime.

Impact

• Efficiency Gains:
  • Reduced clock-in/out time by approximately 30%.
  • Improved payroll generation by an estimated 25%.

• Enhanced Employee Satisfaction:
  • Employees appreciated the simplicity of badge scanning and error-free time tracking.
  • Managers benefited from the streamlined payroll process and improved oversight of employee attendance.

• Operational Improvements:
  • Enabled real-time tracking of attendance, reducing manual errors and delays.
  • Simplified workflows, freeing up managers to focus on higher-priority tasks.

Conclusion

The Timetracker for Assembly Employees project successfully addressed critical operational challenges by automating attendance tracking and payroll management. By simplifying workflows and providing a user-friendly interface, the system significantly improved efficiency and satisfaction among employees and managers.

This project demonstrated the power of user-centric design, iterative feedback, and cross-functional collaboration in creating impactful solutions. Future enhancements such as mobile accessibility and integration with HR systems will further expand the system's capabilities, ensuring it continues to deliver value as the organization grows.