Attendance Analysis System

Overview

The Attendance Analysis System is a web-based tool designed to analyze and manage attendance data. It provides both monthly and yearly views, allowing users to fetch and print detailed or summarized attendance reports. The system is built using modern web technologies and provides a user-friendly interface with responsive design.

Features

• Monthly and Yearly Views: Toggle between detailed monthly and summarized yearly attendance views.
• Dynamic Year Selector: Choose a specific year to fetch yearly attendance data.
• Month Selector: Choose a month to fetch monthly attendance data.
• Chart Visualization: Display attendance data using pie charts.
• Print and Download Reports: Print or download attendance reports directly from the application.
• Responsive Design: Optimized for both desktop and mobile devices.

Technologies Used

• HTML5
• CSS3 (with Flexbox and Grid Layout)
• JavaScript
• ApexCharts for charting
• Google Material Icons
• Google Fonts (Montserrat)

Installation

Prerequisites

Ensure you have the following installed:

• A modern web browser (e.g., Google Chrome, Mozilla Firefox)
• Internet connection (for loading external libraries and icons)

Setup

1. Clone the Repository:

   git clone https://github.com/your-username/attendance-analysis-system.git
   cd attendance-analysis-system
   

Directory Structure

Your project directory should look like this:

attendance-analysis-system/
├── css/
│   ├── attendance-analysis.css
│   └── styles.css
├── js/
│   └── attendance_analysis.js
├── index.html
└── README.md

Dependencies:

No additional dependencies are required as the project uses CDN links for external libraries (ApexCharts and Google Fonts).

Usage

1. Open the Application:

   Open index.html in a web browser.

2. Navigate the Interface:

   • Use the Sidebar to navigate to different sections of the application.
   • Toggle between Monthly and Yearly views using the radio buttons.
   • Select a year or month and click the appropriate button to fetch data.
   • Use the Print and Download buttons in the modal to get reports.

3. Viewing Charts:

   • Monthly and yearly attendance data will be visualized using pie charts.
   • Ensure data is fetched before viewing the charts.

Modifications

To modify or extend the application:

• CSS: Update styles in attendance-analysis.css and styles.css.
• JavaScript: Modify functionality and data handling in attendance_analysis.js.
• HTML: Make changes to the layout and structure in index.html.

Contributing

If you would like to contribute to this project:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -am 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a Pull Request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any questions or issues, please contact:

• Name: Abdur Rahman
• Email: your.email@example.com