---

Staff Attendance Tracking System

A modern, intuitive, and professional staff attendance tracking system. Designed with a sleek interface, it allows managers to track, approve, and export timesheets efficiently. Built using Python (Flask), HTML, CSS, and JavaScript.

---

Table of Contents

• Features
• Getting Started
• Screenshots
• Installation
• Usage
• License

---

Features

• 🕒 Real-time attendance tracking: View and track employee time-in/time-out status with detailed timesheet reports.
• 📈 Analytics: Capacity and work status indicators for visualizing employee productivity.
• 📝 Approval & Export: Approve or reject timesheets and export data for reporting.
• 🎨 Interactive UI: Smooth animations, responsive design, and professional look-and-feel.
• 🔐 Secure Authentication: Easily integrated with user authentication for managers and employees.

---

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Python 3.x
• Flask
• Modern Web Browser

Installation

1. Clone the repo:

   git clone https://github.com/your-username/staff-attendance-tracking-system.git

2. Navigate into the project directory:

   cd staff-attendance-tracking-system

3. Install the required Python packages:

   pip install flask

4. Run the application:

   python app.py

---

Screenshots

Dashboard View

---

Timesheets Overview

---

Employee Status

---

Code Snippets

Here are some key code snippets used in the project:

Backend (Flask)

@app.route('/')
def index():
    return render_template('index.html', employee=employee_data)

Frontend (HTML & Flask Templating)

<div class="employee-details">
    <h3>{{ employee['name'] }}</h3>
    <p>{{ employee['title'] }}, Location: {{ employee['location'] }}</p>
</div>

JavaScript for Animations

approveButton.addEventListener('mouseover', () => {
    body.style.backgroundColor = '#dff9fb';
});

---

Installation

1. Clone the Repository:

   git clone https://github.com/your-username/staff-attendance-tracking-system.git

2. Install Dependencies:

   pip install flask

3. Run the Application:

   python app.py

4. Open a browser and go to http://127.0.0.1:5000.

---

SVG Icons Overview

We use SVG icons to make the interface more attractive. Here are some examples:

Approve Button

```

Export Button

```

---

Usage

• Access the Timesheets tab to view and manage employee attendance.
• Use the Approve button to approve timesheets or the Export button to download the data.
• Hover over statistics and buttons to see smooth animations and transitions!

---

License

Distributed under the MIT License. See LICENSE for more information.

---

Contact

👤 Techsynx

• GitHub: @your-Techsynx
• Email: [email protected]

Feel free to open an issue if you find a bug or have suggestions to improve the project.

---

Contributions

• 🛠️ Contributions are what make the open-source community such an amazing place to be.
• Feel free to fork the repository and submit pull requests!