Employee Management

Relevant source files

The following files were used as context for generating this wiki page:

• models.py
• templates/admin_employees.html
• templates/add_employee_form.html
• static/openapi.yaml
• templates/admin_dashboard.html

The Employee Management module is a core administrative feature of the Smart Absen system. It provides administrators with the tools to perform Create, Read, Update, and Delete (CRUD) operations on employee records. This functionality is essential for maintaining an accurate roster of personnel, which is the foundation for the face recognition attendance system.

This module consists of a data model for storing employee information, API endpoints for programmatic access, and a web-based user interface integrated into the admin dashboard. The management process includes adding new hires, viewing the complete list of staff, modifying employee details, and removing them from the system.

Architecture Overview

The Employee Management feature is built on a standard web architecture, comprising a database model, backend API endpoints, and frontend templates.

• Data Model (models.py): The Employee class defines the structure of the employees table in the database and provides static methods for all data interactions.
• API Endpoints (app.py, static/openapi.yaml): A set of RESTful endpoints provides an interface for the frontend to manage employee data.
• User Interface (templates/): HTML templates rendered by the Flask backend provide the visual interface for administrators. This includes a comprehensive list view and a detailed form for adding/editing employees.

Data Model

The employee data is structured in the employees table. The Employee class in models.py serves as the data access layer.

Sources: models.py:10-73

ER Diagram

The following diagram shows the employees table and its relationship with other tables in the system.

employees Table Schema

Field	Type	Description	Constraints
id	int	Unique identifier for the employee.	Primary Key, Auto-increment
name	varchar	Full name of the employee.	Required
bagian	varchar	Department or division (e.g., "Operasional", "Dapur").	Required
email	varchar	Employee's email address.	Optional, Unique
phone	varchar	Employee's phone number.	Optional
gender	varchar	Gender of the employee ('L' or 'P').	Optional
address	text	Full residential address.	Optional
position	varchar	Job title (e.g., "Barista", "Manager").	Optional
status	varchar	Employment status ('aktif', 'tidak_aktif', 'cuti').	Default: 'aktif'
hire_date	date	The date the employee was hired.	Optional
nik	varchar	National Identity Number.	Optional, Unique

Sources: models.py:13-25, templates/add_employee_form.html:200-300

User Interface

The UI for employee management is split into two main pages within the admin panel.

1. Employee List (admin_employees.html): This page displays all registered employees in a filterable and searchable table. It serves as the main hub for viewing and initiating management actions like editing or deleting.
2. Add Employee Form (add_employee_form.html): A detailed, multi-section form for registering a new employee. It captures personal data, contact information, and job details. Upon successful submission, it redirects to the face capture page to complete the onboarding process.

The admin dashboard provides an entry point to these pages, often through an iframe to create a seamless single-page application experience.

Sources: templates/admin_dashboard.html:433-435, templates/admin_employees.html, templates/add_employee_form.html

Core Functionality (CRUD)

The module supports full CRUD operations on employee records.

Create Employee

Adding a new employee is a two-step process: first, filling out their data, and second, capturing their face for the recognition model.

1. The admin navigates to the "Add Employee" form (/admin/add_employee_form).
2. The admin fills in the employee's details.
3. The form is submitted via a POST request to /admin/add_employee_complete.
4. The backend validates the data and uses Employee.add_employee() to save the new record to the database.
5. If successful, the backend returns a JSON response containing the new employee_id.
6. The frontend JavaScript then redirects the admin to the /capture_wajah page, passing the new employee's ID to begin the face registration process.

Sources: templates/add_employee_form.html:410-451, models.py:13-25

Add Employee Sequence Diagram

This diagram illustrates the flow of adding a new employee.

Read Employees

Administrators can view a list of all employees on the employee management page.

1. The admin navigates to /admin/employees.
2. The Flask backend calls Employee.get_all_employees() to fetch all records from the database.
3. The backend renders the admin_employees.html template, passing the list of employees to it.
4. The template iterates through the list and displays each employee in a table row. The page also includes statistics like total employees.

Sources: templates/admin_employees.html:460-517, models.py:46-53

Update Employee

Employee details can be modified directly from the employee list page.

1. The admin clicks the "Edit" button for an employee in the list.
2. A JavaScript function editEmployee() is triggered, which makes a GET request to /api/employee/{id} to fetch the full, current details of that employee.
3. The data is used to populate a modal form (editEmployeeModal).
4. The admin modifies the data and clicks "Save Changes".
5. The saveEmployee() JavaScript function sends a POST request to /api/employee/update with the updated employee data in JSON format.
6. The backend processes the request, updates the database record, and returns a success message.
7. The page is reloaded to show the updated information.

Sources: templates/admin_employees.html:629-661, templates/admin_employees.html:692-731

Update Employee Sequence Diagram

Delete Employee

Employees can be removed from the system, which also purges their associated attendance and activity data.

1. The admin clicks the "Delete" button for an employee.
2. A confirmation modal appears to prevent accidental deletion.
3. Upon confirmation, the confirmDeleteEmployee() JavaScript function sends a POST request to /api/employee/delete with the employee's ID.
4. The backend calls the Employee.delete_employee(employee_id) method. This method first deletes all related records from the attendance and activity_log tables before deleting the record from the employees table.
5. The page is reloaded to reflect the removal of the employee.

Sources: templates/admin_employees.html:733-772, models.py:62-73

Delete Employee Sequence Diagram

API Endpoints Summary

The following table summarizes the API endpoints used for employee management. Note that the implementation in admin_employees.html uses slightly different paths and methods than specified in openapi.yaml. The table below reflects the actual implementation.

Method	Endpoint	Description	Used By
POST	/admin/add_employee_complete	Adds a new employee record from the detailed form.	add_employee_form.html
GET	/api/employee/{id}	Retrieves detailed information for a single employee.	admin_employees.html (Edit)
POST	/api/employee/update	Updates an existing employee's information.	admin_employees.html (Edit)
POST	/api/employee/delete	Deletes an employee and all their related data.	admin_employees.html (Delete)

Sources: templates/add_employee_form.html:429, templates/admin_employees.html:631, templates/admin_employees.html:709, templates/admin_employees.html:749, static/openapi.yaml:153-221

Conclusion

The Employee Management module is a complete and robust system for administering employee data within the Smart Absen application. It provides a user-friendly interface for all essential CRUD operations, backed by a clear data model and a set of dedicated API endpoints. The integrity of the attendance system relies heavily on the accuracy of the data managed through this module, making it a critical component of the overall architecture.