Attendance System

TECHNOLOGIES

• HTML5
• CSS3
• Advanced JS and ES6
• JQuery,fetch
• Bootstrap

Features

• This is an Attendance System APP for organizations. The system allows new users to sign-up for one time and then they can log in each time they want to open the website.
• We have three roles for users: Admin, Attendance Employee, and Employees.

1- Admin

• The Admin can take attendance for different employees, and can view different Admin Reports
• He/she can view the profile page for different employees
• The Admin is the first user to sign up.

2- Attendance Employee

• The attendance Employee is the employee responsible for the attendance for all employees and he/she can confirm attendace for different employees.
• The Attendance Employee is the second member to sign up.

3- Employees

• The nomral user would be able to confirm attendace only for him/herself.
• He/she would be able to view their daily reports as well as their monthly reports.

PREVIEW LINK

• https://attendence-system-iti.netlify.app/
• https://mahmoudmohamed22.github.io/Attendance-System-App/

Screenshots

Registration form

This would appear for new users to sign-up for the system.

Login form

If the user has already signed up, then he would be able to log-in via this page

Employee home page

Once the employee is logged in, his home page will show up like that:

Emplyee profile

Employee profile has the daily and monthly reports as well as the employee's profile information like name, mail, address, ...etc. If he/she attends between 9 am to 10 am, he/she considers attending (active). Between 10 am to 12 pm, he/she is considered late. After noon he/she is considered Absent.

Admin home page

The Admin user is having a home page different from the usual user. To login as admin use --> username:Admin || password:admin

Confirm attendence page

The Admin can confirm attendance by entering the user name and confirm his attendance.

Admin dashboard

In addition to Confirm attendance page and profile page, the admin is having a dashboard page. This page shows the profiles of attendee as well as some overall daily statistics.

Admin Reports

This page shows the reports for Admin, so that he can keep track of each employee as well as the overall performance from the whole employees to know the absentees and the late employees.

Admin Panel

This page contain employee attendence list with employee profile cards.

Setting page

This page contain admin inforamtion.

Authors

- Nada Marei. - Mahmoud Abdelwahab. - Mohamed Sharif.