Université de Sfax

***
Institut supérieur d’informatique et
multimédia de Sfax

End of the year project

Présented at

Higher Institute of Computer Science and Multimedia of sfax

completed at

IBS

By

Ahmed Atri
Program: Engineering cycle
Specialization: Software Engineering

University year: 2023/2024

Table of Contents
1
Chapter I: Introduction
I.1. Company Presentation

I.2. Problem Statement

I.3 Existing Work Study

I.4 Objectives

Chapter II: Requirements

II.1. Functional Requirements

II.2. Non-functional Requirements

II.3. Actors Description

II.4. Use Cases Diagram

Chapter III: System Architecture and Design

III.1. System Architecture

III.2. Class Diagram

Chapter IV: Implementation

IV.1. Technologies Used

IV.2. User Interface Overview

Appendix
Gantt Diagram

Conclusion

Chapter I: Introduction
2
I.1 Problem Statement
In today's dynamic work environment, efficient workforce management is crucial for
organizational success. Traditional methods of attendance tracking and leave management can be
cumbersome and prone to errors. As organizations grow, the need for a streamlined and user-
friendly solution becomes increasingly apparent. This problem forms the basis of our study and
motivates the development of the Work Clock and Leave Requests Management Web
Application.

I.2 Existing Work Study

Analytics and Reporting

Many existing work clock and attendance management solutions offer fundamental
clock-in/clock-out functionalities and leave management. However, a notable gap in several
applications lies in the absence of comprehensive analytics and reporting features. These features
play a crucial role in providing organizations with valuable insights into employee attendance
patterns, leave trends, and overall workforce management metrics. The Work Clock and Leave
Requests Management Web Application aim to bridge this gap by offering robust analytics tools,
enabling administrators to make informed decisions and optimize workforce strategies.

Comprehensive User Roles

While several existing solutions provide basic user roles, the differentiation among roles might
be limited. The Work Clock and Leave Requests Management Web Application introduce a
granular approach to user roles. Employees, accountants, and administrators each have distinct
responsibilities and permissions, ensuring a more secure and controlled access environment. This
finer level of control enhances the application's adaptability to various organizational structures,
accommodating diverse user needs.

User-Friendly UI and UX

In the realm of user interfaces, the emphasis on an intuitive and visually appealing design is
sometimes overlooked in existing work clock apps. The Work Clock and Leave Requests
Management Web Application address this by adopting Tailwind CSS for styling, a utility-first
CSS framework that facilitates the creation of a modern, efficient, and aesthetically pleasing user
interface. By prioritizing user experience, the application seeks to provide not only functionality
but also a seamless and enjoyable interaction for employees, accountants, and administrators.

By focusing on these aspects, the Work Clock and Leave Requests Management Web
Application strives to set itself apart from existing solutions, offering a more comprehensive,
user-friendly, and feature-rich experience for effective workforce management.

I.3 Objectives

3
The primary objectives of this project are as follows:

 To develop a comprehensive Work Clock and Leave Requests Management Web

Application: Addressing the shortcomings of existing solutions by providing a feature-
rich, user-centric, and scalable platform.
 To enhance user experience through intuitive design: Prioritizing usability and
accessibility to ensure a positive experience for employees, accountants, and
administrators.
 To introduce innovative features, including analytics and location-based attendance
tracking: Setting our application apart from existing solutions by incorporating advanced
functionalities.

I.4 Company presentation

IBS is a web agency that partners with professionals, offering comprehensive internet solutions
to businesses. Since 2009, IBS has been meeting the needs of its clients by implementing custom
projects, developing, and maintaining internet solutions that best meet their requirements. The
expertise of its team, creativity, and commitment to service are the values that IBS provides to its
clients, offering them impeccable quality services. From conception to monitoring and
maintenance, our team collaborates to ensure that all project stages align with the objectives.
Whether you are an SME, large enterprise, independent professional, or an individual: If you
want to enhance and expand your online presence, If you need a custom solution to streamline
your work and optimize your time

Chapter II: Requirements

4
II .1. Functional Requirements:
1. User Authentication:
o Employees must be able to log in with their unique credentials.
o Admins should have the ability to create, modify, and deactivate user accounts.

2. Clock In/Out:
o Employees should have the capability to clock in and out of work.
o The system should record the timestamp of each clock-in and clock-out action.

3. Attendance History:
o Employees can view their work attendance history, including clock-in and clock-
out times.

4. Leave Requests:
o Employees can create leave requests specifying the reason (e.g., vacation, sick
leave), start date, and end date.
o Admins can view, approve, or reject leave requests.

5. Accountant View:
o Accountants can view the overall work attendance of employees for payroll
purposes.

6. Admin Dashboard:
o Admins should have access to a dashboard displaying statistics on work
attendance and leave requests.

7. User Profile Management:

o Employees, accountants, and admins can view and edit their profiles.

II .2. Non-Functional Requirements:

1. Performance:
o The system should provide quick response times for user interactions (e.g.,
clocking in/out) to ensure a smooth user experience.

2. Scalability:
o The application should be scalable to handle a growing number of users and
attendance records.

3. Security:
o User authentication and authorization mechanisms should be robust to prevent
unauthorized access.

5
 o The system should encrypt sensitive data, such as user passwords.

4. Usability:
o The user interface should be intuitive, ensuring ease of use for employees,
accountants, and administrators.
o The application should be accessible across different devices and screen sizes.

5. Reliability:
o The system should be available and reliable during regular working hours.
o Data integrity must be maintained to ensure accurate attendance records.

6. Compliance:
o The application should comply with relevant data protection and privacy
regulations.
o It should adhere to industry standards for time tracking and attendance
management.

7. Reporting:
o The system should generate reports for admins, providing insights into employee
attendance patterns and leave statistics.

8. Maintainability:
o The codebase should be well-documented, and the system should be easily
maintainable for future updates and improvements.

II .3 Actors Description
1. Employee:

 Role: End-user who utilizes the application for clocking in/out, managing leave requests,
and viewing attendance history.
 Responsibilities:
o Logging in with provided credentials.
o Clocking in and out of work.
o Creating, viewing, and editing leave requests.
o Accessing and reviewing personal profile details.

2. Accountant:

 Role: End-user responsible for reviewing work attendance records for payroll processing.
 Responsibilities:
o Logging in with provided credentials.
o Accessing a comprehensive view of employee work attendance.
o Generating reports for payroll processing.

6
 o Accessing and reviewing personal profile details.

3. Admin:

 Role: System administrator with elevated privileges for managing users and system
settings.
 Responsibilities:
o Logging in with admin credentials.
o Managing user accounts (creating, modifying, deactivating).
o Accessing and reviewing comprehensive work attendance and leave request
statistics.
o Managing company settings, including rest days per week and holidays.
o Accessing and reviewing personal profile details.

II .3 Use cases diagram :

7
Chapter III: Design and architecture
III.1 System Architecture
The Work Clock and Leave Requests Management Web Application follow a Client-Server
Architecture with a Three-Tier Architecture, where the application's functionality is
distributed across three main components: the client-side (frontend), the server-side (backend),
and the database.

Key Components

1. Client-Side (Frontend):
o The frontend is developed using React, a JavaScript library for building user
interfaces. This allows for the creation of modular and reusable UI components,
providing a responsive and interactive user experience.

2. Server-Side (Backend):
o Node.js in conjunction with Express.js forms the server-side runtime
environment and web application framework. This tier handles business logic,
manages data flow, and communicates with the database.

3. Database Interaction:
o Sequelize, a promise-based Node.js ORM, facilitates communication with the
MySQL relational database. The database stores and manages application data,
ensuring data integrity and persistence.

System Flow

The application's architecture ensures a clear flow of data between the client-side and server-side
components. User interactions trigger requests that are processed by the server, which in turn
interacts with the database to fetch or update data. The server then sends the appropriate response
back to the client, maintaining a seamless and efficient system flow.

8
Scalability Considerations

The chosen architecture is designed to be scalable. As user demands increase, the system can be
easily scaled horizontally or vertically to handle higher workloads. Load balancing strategies and
caching mechanisms may be implemented to optimize performance.

III.2 Class diagram :

9
Chapter IV: Implementation
IV.1 Technologies used:
Programming Languages

5.1.1 HTML (HyperText Markup Language)

HTML serves as the foundation for structuring web content, providing the
essential markup elements for creating a webpage.

5.1.2 CSS (Cascading Style Sheets)

CSS is used to style and format HTML elements, ensuring a visually appealing
and consistent presentation across the web application.

5.1.3 JavaScript (JS)

JavaScript is employed for client-side scripting, enhancing the web application

with dynamic and interactive features.

Server-Side Environment

5.2.1 Node.js

Node.js serves as the server-side runtime environment, allowing the execution of

JavaScript on the server and facilitating scalable server applications.

Backend Framework

10
 5.2.2 Express

Express.js is a web application framework for Node.js, providing a set of

tools for building robust and scalable server-side components.

Frontend Framework

5.3.1 React

React is utilized as a JavaScript library for building user interfaces, promoting the
development of modular and reusable UI components.

Styling Library

5.3.2 Tailwind CSS

Tailwind CSS is a utility-first CSS framework that simplifies styling by offering

pre-designed utility classes for rapid and consistent UI development.

ORM

5.4.1 Sequelize

Sequelize, a promise-based Node.js ORM, is employed for interacting with

relational databases, simplifying database operations through JavaScript syntax.

IDE

5.5.1 Visual Studio Code (VSCode)

Visual Studio Code is the chosen integrated development environment (IDE) for
coding, providing a range of features that enhance the development workflow.

Database Management

5.6.1 MySQL

MySQL is the relational database management system (RDBMS) used for storing
and managing the web application's data.

Local Server Environment

11
 5.7.1 XAMPP

XAMPP is a cross-platform local server environment that facilitates the

development and testing of the web application on a local machine.

IV.2 User Interface Overview:

Login page:

Employee :

Work Clock page :

12
Work History page :

Leave Requests Page :

13
Admin:

Dashboard:

14
Users management page:

Employees Work History page:

Leave Requests:

15
Company settings management page:

Analytics page :

16
Accountant:

17
Appendix

Gantt diagram:

September August
Task
W1 W2 W3 W4 W5 W6 W7 W8
System design
User Interface
design
Implementation
Testing and
Maintenance
Deployment

18
Conclusion
In conclusion, the internship experience with IBS has been a transformative journey that has
significantly enriched my skills and understanding of software engineering. The development of
the work clock and leave requests management web application has not only met the outlined
objectives but has also contributed to the enhancement of processes within the organization.

Lessons Learned
Importance of Regular Meetings:

Regular meetings with the boss proved to be instrumental in maintaining focus and productivity.
The structured check-ins provided a valuable opportunity to discuss progress, set priorities, and
address challenges. The inherent sense of accountability that these meetings instilled played a
crucial role in maintaining a consistent pace and ensuring that project milestones were achieved
in a timely manner.

Value of Reusable Components:

The realization of the significant time-saving potential and enhanced maintainability through
reusable components has been a standout lesson. Developing modular and reusable UI
components, particularly in React, not only streamlined the development process but also
contributed to a more scalable and easily maintainable codebase. This strategic use of reusable
components emerged as a practical and valuable approach, reinforcing the importance of
efficiency in code organization and development.

19
Possible Improvements
Location Check Feature: One notable enhancement for future iterations of the
application could involve the implementation of a location check feature. By utilizing GPS
data, the app could verify that the user is approximately within the company premises
before allowing clock-in, adding an extra layer of accuracy to attendance tracking.

Gratitude
I extend my sincere gratitude to IBS for providing me with this invaluable opportunity for
professional growth. Special thanks to Mr. Wajdi Bouaziz for his guidance, mentorship, and
unwavering support throughout the internship.

This internship has been a pivotal chapter in my journey as a software engineer, and I look
forward to applying the knowledge gained in future endeavors. I am confident that the skills
acquired and lessons learned will contribute significantly to my ongoing academic and
professional development.

20