Upload 23 files

# WiFi Attendance Tracker - Employee Management Version

## Overview

The WiFi-Based Attendance & Break Tracker is an advanced employee time tracking system that monitors attendance by detecting MAC addresses of devices connected to the local WiFi network. This enhanced version includes comprehensive employee management features, password protection, and a modern web interface.

## Key Features

### 🔐 **Employee Management**
- **Add New Employees**: Password-protected employee addition with admin authentication
- **Search Functionality**: Search employees by name or MAC address
- **Employee Pictures**: Support for employee profile pictures
- **Password Protection**: Secure admin access with customizable passwords (default: 1122)

### ⏰ **Advanced Time Tracking**
- **Time-In/Time-Out**: Automatic detection of first arrival and final departure
- **Break Monitoring**: Tracks when employees go on break and return
- **5:00 PM Auto-Timeout**: Employees automatically marked as timed out at office closing
- **Duration Calculations**: Precise tracking of total work time and break time

### 📊 **Comprehensive Reporting**
- **Real-time Dashboard**: Live employee status updates every 10 seconds
- **Daily Attendance Sheets**: Detailed CSV reports with formatted durations
- **Event History**: Complete audit trail of all attendance events
- **Summary Statistics**: Daily overview with present/absent/break/timeout counts

### 🌐 **Modern Web Interface**
- **Responsive Design**: Works on desktop and mobile devices
- **Real-time Updates**: Live status changes and notifications
- **Interactive Dashboard**: Modern UI with statistics cards and employee cards
- **Modal Dialogs**: Professional forms for employee management

### 🔧 **System Features**
- **Non-Admin Operation**: Attempts to run without administrator privileges
- **Offline Operation**: Works completely without internet connection
- **Database Storage**: SQLite database for persistent data storage
- **JSON Configuration**: Separate employee data file for easy management
- **Integrated Application**: Single entry point for all functionality

## System Requirements

- **Operating System**: Windows 10/11, Linux, or macOS
- **Python**: 3.7 or higher
- **Network**: Local WiFi network access
- **Permissions**: Network scanning capabilities (admin/root recommended but not required)

## Installation

### Quick Setup (Windows)

1. **Extract the Project**
```
Extract wifi_attendance_tracker_advanced.zip to your desired location
```

2. **Run Setup Script**
```
Double-click setup.bat
```

3. **Configure Employees**
```
Edit employees.json with your employee data
```

4. **Start the Application**
```
Double-click run.bat or run: python main.py
```

### Manual Installation

1. **Install Python Dependencies**
```bash
pip install flask flask-cors bcrypt
```

2. **Configure System**
```bash
# Edit config.json for system settings
# Edit employees.json for employee data
```

3. **Run Application**
```bash
python main.py
```

## Configuration

### config.json
```json
{
"scan_interval_seconds": 60,
"web_port": 5000,
"office_timeout_hour": 17,
"office_timeout_minute": 0
}
```

### employees.json
```json
[
{
"name": "John Doe",
"mac_address": "aa-bb-cc-dd-ee-ff",
"picture": "static/img/john_doe.jpg"
},
{
"name": "Jane Smith",
"mac_address": "11-22-33-44-55-66",
"picture": "static/img/jane_smith.jpg"
}
]
```

## Usage

### Starting the Application

#### Web Interface Mode (Default)
```bash
python main.py
```
Access the web interface at: http://localhost:5000

#### Console Mode
```bash
python main.py --console
```

#### Custom Port
```bash
python main.py --port 8080
```

#### System Status
```bash
python main.py --status
```

### Web Interface Features

#### Dashboard Overview
- **System Status**: Current monitoring state and employee count
- **Statistics Cards**: Real-time counts of present, absent, on break, and timed out employees
- **Employee Status**: Live employee cards with status badges and time information
- **Recent Events**: Timeline of latest attendance events

#### Employee Management
1. **Adding Employees**:
- Click "Add Employee" button
- Fill in employee name and MAC address
- Optionally add picture path
- Enter admin password (default: 1122)
- Click "Add Employee"

2. **Searching Employees**:
- Use the search box to find employees by name or MAC address
- Results update in real-time

3. **Changing Admin Password**:
- Click "Settings" button
- Enter current password and new password
- Click "Change Password"

#### Monitoring Controls
- **Start Monitoring**: Begin attendance tracking
- **Stop Monitoring**: Pause attendance tracking
- **Refresh Data**: Manually update all data
- **Export CSV**: Download daily attendance summary

### Employee Pictures

To add employee pictures:

1. **Create Image Directory**:
```
Create: static/img/ directory
```

2. **Add Picture Files**:
```
Place images in: static/img/employee_name.jpg
```

3. **Update Configuration**:
```json
{
"name": "John Doe",
"mac_address": "aa-bb-cc-dd-ee-ff",
"picture": "static/img/john_doe.jpg"
}
```

## How It Works

### MAC Address Detection
The system uses the `arp -a` command to scan for devices on the local network. When an employee's device (identified by MAC address) is detected:

1. **First Detection**: Marked as "Time In"
2. **Continuous Presence**: Status remains "Present"
3. **Temporary Absence**: Marked as "On Break" if gone for short period
4. **Extended Absence**: Marked as "Time Out" if gone for extended period
5. **5:00 PM Timeout**: Automatically marked as "Timed Out" at office closing

### Status Logic
- **Present**: Device currently detected on network
- **Absent**: Device not detected and no previous activity today
- **On Break**: Device temporarily not detected but was present earlier
- **Timed Out**: Device not detected after 5:00 PM or extended absence

### Data Storage
- **SQLite Database**: Stores all attendance events and employee data
- **CSV Logs**: Daily attendance summaries exported to `logs/` directory
- **JSON Files**: Configuration and employee data in human-readable format

## Security Features

### Password Protection
- **Admin Authentication**: Required for adding new employees
- **Password Hashing**: Secure bcrypt hashing for stored passwords
- **Default Password**: 1122 (changeable through web interface)
- **Session Security**: No persistent login sessions for security

### Data Privacy
- **Local Storage**: All data stored locally, no cloud transmission
- **Offline Operation**: No internet connection required
- **Encrypted Passwords**: Admin passwords securely hashed
- **Access Control**: Employee management requires authentication

## Troubleshooting

### Common Issues

#### "Permission Denied" Errors
- **Windows**: Run Command Prompt as Administrator
- **Linux/macOS**: Use `sudo python main.py`
- **Alternative**: Use non-admin mode (limited network scanning)

#### No Employees Detected
1. Verify MAC addresses in `employees.json`
2. Check if devices are connected to same network
3. Ensure WiFi is enabled on employee devices
4. Run `python main.py --status` to check configuration

#### Web Interface Not Loading
1. Check if port 5000 is available
2. Try different port: `python main.py --port 8080`
3. Verify firewall settings
4. Check console for error messages

#### Database Errors
1. Delete `attendance.db` to reset database
2. Restart application to recreate tables
3. Check file permissions in project directory

### Network Scanning Limitations

#### Non-Admin Mode
When running without administrator privileges:
- Limited network scanning capabilities
- May not detect all devices
- Reduced accuracy in some network configurations
- Employee management features work normally

#### Admin Mode (Recommended)
- Full network scanning capabilities
- Accurate device detection
- Complete attendance tracking
- All features fully functional

## File Structure

```
wifi_attendance_tracker/
├── main.py # Main application entry point
├── attendance_tracker.py # Core attendance tracking logic
├── database.py # Database operations
├── auth.py # Authentication management
├── web_interface.py # Flask web interface (legacy)
├── config.json # System configuration
├── employees.json # Employee data
├── requirements.txt # Python dependencies
├── setup.bat # Windows setup script
├── run.bat # Windows run script
├── templates/
│ └── index.html # Web interface template
├── static/
│ ├── css/
│ │ └── style.css # Web interface styles
│ ├── js/
│ │ └── script.js # Web interface JavaScript
│ └── img/ # Employee pictures directory
├── logs/ # CSV export directory
└── attendance.db # SQLite database
```

## API Endpoints

The web interface provides REST API endpoints:

### System Status
- `GET /api/status` - Get system status
- `POST /api/start_monitoring` - Start monitoring
- `POST /api/stop_monitoring` - Stop monitoring

### Employee Management
- `GET /api/employees` - Get all employees
- `POST /api/add_employee` - Add new employee (requires password)
- `GET /api/search_employees?q=query` - Search employees

### Attendance Data
- `GET /api/attendance_events` - Get attendance events
- `GET /api/daily_summary?date=YYYY-MM-DD` - Get daily summary
- `GET /api/summary_stats?date=YYYY-MM-DD` - Get summary statistics
- `GET /api/export_csv?date=YYYY-MM-DD` - Export CSV

### Authentication
- `POST /api/change_password` - Change admin password

## Advanced Configuration

### Custom Office Hours
Edit `config.json`:
```json
{
"office_timeout_hour": 18,
"office_timeout_minute": 30
}
```

### Scan Interval
Adjust monitoring frequency:
```json
{
"scan_interval_seconds": 30
}
```

### Web Port
Change web interface port:
```json
{
"web_port": 8080
}
`

README.md

@@ -1,3 +1,416 @@
----
-license: llama2
----
+# WiFi Attendance Tracker - Employee Management Version
+
+## Overview
+
+The WiFi-Based Attendance & Break Tracker is an advanced employee time tracking system that monitors attendance by detecting MAC addresses of devices connected to the local WiFi network. This enhanced version includes comprehensive employee management features, password protection, and a modern web interface.
+
+## Key Features
+
+### 🔐 **Employee Management**
+- **Add New Employees**: Password-protected employee addition with admin authentication
+- **Search Functionality**: Search employees by name or MAC address
+- **Employee Pictures**: Support for employee profile pictures
+- **Password Protection**: Secure admin access with customizable passwords (default: 1122)
+
+### ⏰ **Advanced Time Tracking**
+- **Time-In/Time-Out**: Automatic detection of first arrival and final departure
+- **Break Monitoring**: Tracks when employees go on break and return
+- **5:00 PM Auto-Timeout**: Employees automatically marked as timed out at office closing
+- **Duration Calculations**: Precise tracking of total work time and break time
+
+### 📊 **Comprehensive Reporting**
+- **Real-time Dashboard**: Live employee status updates every 10 seconds
+- **Daily Attendance Sheets**: Detailed CSV reports with formatted durations
+- **Event History**: Complete audit trail of all attendance events
+- **Summary Statistics**: Daily overview with present/absent/break/timeout counts
+
+### 🌐 **Modern Web Interface**
+- **Responsive Design**: Works on desktop and mobile devices
+- **Real-time Updates**: Live status changes and notifications
+- **Interactive Dashboard**: Modern UI with statistics cards and employee cards
+- **Modal Dialogs**: Professional forms for employee management
+
+### 🔧 **System Features**
+- **Non-Admin Operation**: Attempts to run without administrator privileges
+- **Offline Operation**: Works completely without internet connection
+- **Database Storage**: SQLite database for persistent data storage
+- **JSON Configuration**: Separate employee data file for easy management
+- **Integrated Application**: Single entry point for all functionality
+
+## System Requirements
+
+- **Operating System**: Windows 10/11, Linux, or macOS
+- **Python**: 3.7 or higher
+- **Network**: Local WiFi network access
+- **Permissions**: Network scanning capabilities (admin/root recommended but not required)
+
+## Installation
+
+### Quick Setup (Windows)
+
+1. **Extract the Project**
+   ```
+   Extract wifi_attendance_tracker_advanced.zip to your desired location
+   ```
+
+2. **Run Setup Script**
+   ```
+   Double-click setup.bat
+   ```
+
+3. **Configure Employees**
+   ```
+   Edit employees.json with your employee data
+   ```
+
+4. **Start the Application**
+   ```
+   Double-click run.bat or run: python main.py
+   ```
+
+### Manual Installation
+
+1. **Install Python Dependencies**
+   ```bash
+   pip install flask flask-cors bcrypt
+   ```
+
+2. **Configure System**
+   ```bash
+   # Edit config.json for system settings
+   # Edit employees.json for employee data
+   ```
+
+3. **Run Application**
+   ```bash
+   python main.py
+   ```
+
+## Configuration
+
+### config.json
+```json
+{
+  "scan_interval_seconds": 60,
+  "web_port": 5000,
+  "office_timeout_hour": 17,
+  "office_timeout_minute": 0
+}
+```
+
+### employees.json
+```json
+[
+  {
+    "name": "John Doe",
+    "mac_address": "aa-bb-cc-dd-ee-ff",
+    "picture": "static/img/john_doe.jpg"
+  },
+  {
+    "name": "Jane Smith",
+    "mac_address": "11-22-33-44-55-66",
+    "picture": "static/img/jane_smith.jpg"
+  }
+]
+```
+
+## Usage
+
+### Starting the Application
+
+#### Web Interface Mode (Default)
+```bash
+python main.py
+```
+Access the web interface at: http://localhost:5000
+
+#### Console Mode
+```bash
+python main.py --console
+```
+
+#### Custom Port
+```bash
+python main.py --port 8080
+```
+
+#### System Status
+```bash
+python main.py --status
+```
+
+### Web Interface Features
+
+#### Dashboard Overview
+- **System Status**: Current monitoring state and employee count
+- **Statistics Cards**: Real-time counts of present, absent, on break, and timed out employees
+- **Employee Status**: Live employee cards with status badges and time information
+- **Recent Events**: Timeline of latest attendance events
+
+#### Employee Management
+1. **Adding Employees**:
+   - Click "Add Employee" button
+   - Fill in employee name and MAC address
+   - Optionally add picture path
+   - Enter admin password (default: 1122)
+   - Click "Add Employee"
+
+2. **Searching Employees**:
+   - Use the search box to find employees by name or MAC address
+   - Results update in real-time
+
+3. **Changing Admin Password**:
+   - Click "Settings" button
+   - Enter current password and new password
+   - Click "Change Password"
+
+#### Monitoring Controls
+- **Start Monitoring**: Begin attendance tracking
+- **Stop Monitoring**: Pause attendance tracking
+- **Refresh Data**: Manually update all data
+- **Export CSV**: Download daily attendance summary
+
+### Employee Pictures
+
+To add employee pictures:
+
+1. **Create Image Directory**:
+   ```
+   Create: static/img/ directory
+   ```
+
+2. **Add Picture Files**:
+   ```
+   Place images in: static/img/employee_name.jpg
+   ```
+
+3. **Update Configuration**:
+   ```json
+   {
+     "name": "John Doe",
+     "mac_address": "aa-bb-cc-dd-ee-ff",
+     "picture": "static/img/john_doe.jpg"
+   }
+   ```
+
+## How It Works
+
+### MAC Address Detection
+The system uses the `arp -a` command to scan for devices on the local network. When an employee's device (identified by MAC address) is detected:
+
+1. **First Detection**: Marked as "Time In"
+2. **Continuous Presence**: Status remains "Present"
+3. **Temporary Absence**: Marked as "On Break" if gone for short period
+4. **Extended Absence**: Marked as "Time Out" if gone for extended period
+5. **5:00 PM Timeout**: Automatically marked as "Timed Out" at office closing
+
+### Status Logic
+- **Present**: Device currently detected on network
+- **Absent**: Device not detected and no previous activity today
+- **On Break**: Device temporarily not detected but was present earlier
+- **Timed Out**: Device not detected after 5:00 PM or extended absence
+
+### Data Storage
+- **SQLite Database**: Stores all attendance events and employee data
+- **CSV Logs**: Daily attendance summaries exported to `logs/` directory
+- **JSON Files**: Configuration and employee data in human-readable format
+
+## Security Features
+
+### Password Protection
+- **Admin Authentication**: Required for adding new employees
+- **Password Hashing**: Secure bcrypt hashing for stored passwords
+- **Default Password**: 1122 (changeable through web interface)
+- **Session Security**: No persistent login sessions for security
+
+### Data Privacy
+- **Local Storage**: All data stored locally, no cloud transmission
+- **Offline Operation**: No internet connection required
+- **Encrypted Passwords**: Admin passwords securely hashed
+- **Access Control**: Employee management requires authentication
+
+## Troubleshooting
+
+### Common Issues
+
+#### "Permission Denied" Errors
+- **Windows**: Run Command Prompt as Administrator
+- **Linux/macOS**: Use `sudo python main.py`
+- **Alternative**: Use non-admin mode (limited network scanning)
+
+#### No Employees Detected
+1. Verify MAC addresses in `employees.json`
+2. Check if devices are connected to same network
+3. Ensure WiFi is enabled on employee devices
+4. Run `python main.py --status` to check configuration
+
+#### Web Interface Not Loading
+1. Check if port 5000 is available
+2. Try different port: `python main.py --port 8080`
+3. Verify firewall settings
+4. Check console for error messages
+
+#### Database Errors
+1. Delete `attendance.db` to reset database
+2. Restart application to recreate tables
+3. Check file permissions in project directory
+
+### Network Scanning Limitations
+
+#### Non-Admin Mode
+When running without administrator privileges:
+- Limited network scanning capabilities
+- May not detect all devices
+- Reduced accuracy in some network configurations
+- Employee management features work normally
+
+#### Admin Mode (Recommended)
+- Full network scanning capabilities
+- Accurate device detection
+- Complete attendance tracking
+- All features fully functional
+
+## File Structure
+
+```
+wifi_attendance_tracker/
+├── main.py                 # Main application entry point
+├── attendance_tracker.py   # Core attendance tracking logic
+├── database.py            # Database operations
+├── auth.py                # Authentication management
+├── web_interface.py       # Flask web interface (legacy)
+├── config.json            # System configuration
+├── employees.json         # Employee data
+├── requirements.txt       # Python dependencies
+├── setup.bat             # Windows setup script
+├── run.bat               # Windows run script
+├── templates/
+│   └── index.html        # Web interface template
+├── static/
+│   ├── css/
+│   │   └── style.css     # Web interface styles
+│   ├── js/
+│   │   └── script.js     # Web interface JavaScript
+│   └── img/              # Employee pictures directory
+├── logs/                 # CSV export directory
+└── attendance.db         # SQLite database
+```
+
+## API Endpoints
+
+The web interface provides REST API endpoints:
+
+### System Status
+- `GET /api/status` - Get system status
+- `POST /api/start_monitoring` - Start monitoring
+- `POST /api/stop_monitoring` - Stop monitoring
+
+### Employee Management
+- `GET /api/employees` - Get all employees
+- `POST /api/add_employee` - Add new employee (requires password)
+- `GET /api/search_employees?q=query` - Search employees
+
+### Attendance Data
+- `GET /api/attendance_events` - Get attendance events
+- `GET /api/daily_summary?date=YYYY-MM-DD` - Get daily summary
+- `GET /api/summary_stats?date=YYYY-MM-DD` - Get summary statistics
+- `GET /api/export_csv?date=YYYY-MM-DD` - Export CSV
+
+### Authentication
+- `POST /api/change_password` - Change admin password
+
+## Advanced Configuration
+
+### Custom Office Hours
+Edit `config.json`:
+```json
+{
+  "office_timeout_hour": 18,
+  "office_timeout_minute": 30
+}
+```
+
+### Scan Interval
+Adjust monitoring frequency:
+```json
+{
+  "scan_interval_seconds": 30
+}
+```
+
+### Web Port
+Change web interface port:
+```json
+{
+  "web_port": 8080
+}
+```
+
+## Development
+
+### Adding New Features
+1. **Backend**: Modify `main.py` or create new modules
+2. **Frontend**: Update `templates/index.html` and `static/` files
+3. **Database**: Add new tables/columns in `database.py`
+4. **API**: Add new endpoints in `main.py`
+
+### Testing
+```bash
+# Test database functionality
+python database.py
+
+# Test authentication
+python auth.py
+
+# Test attendance tracking
+python attendance_tracker.py
+
+# Check system status
+python main.py --status
+```
+
+## Support
+
+### Getting Help
+1. Check this README for common solutions
+2. Run `python main.py --status` for system diagnostics
+3. Check log files in `logs/` directory
+4. Verify configuration files are properly formatted
+
+### Reporting Issues
+When reporting issues, include:
+- Operating system and Python version
+- Error messages from console
+- Configuration files (remove sensitive data)
+- Steps to reproduce the issue
+
+## License
+
+This project is provided as-is for educational and internal business use. Please ensure compliance with local privacy and employment laws when monitoring employee attendance.
+
+## Version History
+
+### Version 3.0 (Current)
+- Employee management with password protection
+- Enhanced web interface with modern design
+- Non-admin operation support
+- Employee pictures and search functionality
+- Integrated single-file application
+
+### Version 2.0
+- Advanced time tracking with breaks
+- 5:00 PM automatic timeout
+- Daily attendance summaries
+- Web interface with real-time updates
+
+### Version 1.0
+- Basic MAC address detection
+- Simple console interface
+- CSV logging
+
+---
+
+**WiFi Attendance Tracker - Employee Management Version**  
+*Advanced MAC Detection with Employee Management Features*  
+*Version 3.0 - 2025*
+

attendance_tracker.py

@@ -0,0 +1,350 @@
+import subprocess
+import json
+import time
+import platform
+from datetime import datetime, timedelta
+from typing import Dict, Set, List, Tuple
+import os
+from database import AttendanceDatabase
+
+class AttendanceTracker:
+    def __init__(self, config_path: str = "config.json", employees_path: str = "employees.json", db_path: str = "attendance.db"):
+        """Initialize the attendance tracker with configuration and database."""
+        self.config_path = config_path
+        self.employees_path = employees_path
+        self.config = self.load_config()
+        self.employees = self.load_employees()
+        self.scan_interval = self.config.get("scan_interval_seconds", 60)
+        self.office_timeout_hour = self.config.get("office_timeout_hour", 17)
+        self.office_timeout_minute = self.config.get("office_timeout_minute", 0)
+
+        self.db = AttendanceDatabase(db_path)
+        
+        # State tracking for each employee
+        # {mac: {"is_present": bool, "last_seen": datetime, "time_in": datetime, "on_break": bool, "break_start_time": datetime}}
+        self.employee_states = {}
+        self._initialize_employee_states()
+        
+        # Ensure logs directory exists
+        os.makedirs("logs", exist_ok=True)
+        
+    def _initialize_employee_states(self):
+        """Initialize employee states from the database for the current day."""
+        today_str = datetime.now().strftime("%Y-%m-%d")
+        for mac, name in self.employees.items():
+            employee_info = self.db.get_employee_by_mac(mac)
+            if employee_info:
+                summary = self.db.get_daily_summary_for_employee(employee_info["id"], today_str)
+                if summary and summary["status"] == "Present":
+                    # If employee was marked present today and not timed out
+                    self.employee_states[mac] = {
+                        "is_present": True,
+                        "last_seen": datetime.now(), # Assume still present if last status was Present
+                        "time_in": datetime.strptime(f"{today_str} {summary['time_in']}", 
+                                                     "%Y-%m-%d %H:%M:%S") if summary["time_in"] else None,
+                        "on_break": False, # Cannot determine break status from summary, assume not on break
+                        "break_start_time": None
+                    }
+                else:
+                    self.employee_states[mac] = {
+                        "is_present": False,
+                        "last_seen": None,
+                        "time_in": None,
+                        "on_break": False,
+                        "break_start_time": None
+                    }
+            else:
+                self.employee_states[mac] = {
+                    "is_present": False,
+                    "last_seen": None,
+                    "time_in": None,
+                    "on_break": False,
+                    "break_start_time": None
+                }
+
+    def load_config(self) -> dict:
+        """Load configuration from JSON file."""
+        try:
+            with open(self.config_path, 'r') as f:
+                return json.load(f)
+        except FileNotFoundError:
+            print(f"Config file {self.config_path} not found. Using default settings.")
+            return {"scan_interval_seconds": 60, "office_timeout_hour": 17, "office_timeout_minute": 0}
+        except json.JSONDecodeError:
+            print(f"Invalid JSON in {self.config_path}. Using default settings.")
+            return {"scan_interval_seconds": 60, "office_timeout_hour": 17, "office_timeout_minute": 0}
+
+    def load_employees(self) -> dict:
+        """Load employees from employees.json file."""
+        try:
+            with open(self.employees_path, 'r') as f:
+                employees_list = json.load(f)
+            
+            # Convert list to dict for compatibility
+            employees_dict = {}
+            for emp in employees_list:
+                employees_dict[emp['mac_address']] = emp['name']
+            
+            return employees_dict
+        except FileNotFoundError:
+            print(f"Employees file {self.employees_path} not found. Using empty employee list.")
+            return {}
+        except json.JSONDecodeError:
+            print(f"Invalid JSON in {self.employees_path}. Using empty employee list.")
+            return {}
+        except Exception as e:
+            print(f"Error loading employees: {e}")
+            return {}
+    
+    def get_connected_devices(self) -> Set[str]:
+        """Get MAC addresses of devices connected to the local network."""
+        connected_macs = set()
+        
+        try:
+            if platform.system() == "Windows":
+                result = subprocess.run(['arp', '-a'], capture_output=True, text=True, timeout=30)
+                if result.returncode == 0:
+                    lines = result.stdout.split('\n')
+                    for line in lines:
+                        parts = line.strip().split()
+                        if len(parts) >= 2:
+                            potential_mac = parts[1]
+                            if self.is_valid_mac(potential_mac):
+                                normalized_mac = self.normalize_mac(potential_mac)
+                                connected_macs.add(normalized_mac)
+            else:
+                result = subprocess.run(['arp', '-a'], capture_output=True, text=True, timeout=30)
+                if result.returncode == 0:
+                    lines = result.stdout.split('\n')
+                    for line in lines:
+                        if '(' in line and ')' in line and 'at' in line:
+                            parts = line.split(' at ')
+                            if len(parts) >= 2:
+                                mac_part = parts[1].split(' ')[0]
+                                if self.is_valid_mac(mac_part):
+                                    normalized_mac = self.normalize_mac(mac_part)
+                                    connected_macs.add(normalized_mac)
+                                    
+        except subprocess.TimeoutExpired:
+            print("ARP command timed out")
+        except Exception as e:
+            print(f"Error getting connected devices: {e}")
+            
+        return connected_macs
+    
+    def is_valid_mac(self, mac: str) -> bool:
+        """Check if a string is a valid MAC address."""
+        if not mac:
+            return False
+        clean_mac = mac.replace('-', '').replace(':', '').replace('.', '')
+        if len(clean_mac) != 12:
+            return False
+        try:
+            int(clean_mac, 16)
+            return True
+        except ValueError:
+            return False
+    
+    def normalize_mac(self, mac: str) -> str:
+        """Normalize MAC address to lowercase with dashes."""
+        clean_mac = mac.replace('-', '').replace(':', '').replace('.', '').lower()
+        return '-'.join([clean_mac[i:i+2] for i in range(0, 12, 2)])
+    
+    def get_employee_name(self, mac: str) -> str:
+        """Get employee name from MAC address."""
+        return self.employees.get(mac, f"Unknown ({mac})")
+    
+    def process_scan_results(self, detected_macs: Set[str]) -> List[Tuple[str, str, datetime]]:
+        """Process scan results and generate attendance events."""
+        current_time = datetime.now()
+        today_str = current_time.strftime("%Y-%m-%d")
+        events = []
+        
+        known_detected = {mac for mac in detected_macs if mac in self.employees}
+        
+        for mac in self.employees:
+            employee_info = self.db.get_employee_by_mac(mac)
+            if not employee_info: # Should not happen if sync_employees_from_json is called
+                continue
+            employee_id = employee_info["id"]
+            
+            current_state = self.employee_states.get(mac, {})
+            was_present = current_state.get("is_present", False)
+            on_break = current_state.get("on_break", False)
+            time_in = current_state.get("time_in")
+            
+            is_currently_present = mac in known_detected
+            
+            # Handle Time-In
+            if is_currently_present and not was_present:
+                event_type = "time_in"
+                self.db.log_attendance_event(mac, event_type, current_time)
+                events.append((mac, event_type, current_time))
+                self.employee_states[mac]["is_present"] = True
+                self.employee_states[mac]["last_seen"] = current_time
+                self.employee_states[mac]["time_in"] = current_time
+                self.employee_states[mac]["on_break"] = False
+                self.employee_states[mac]["break_start_time"] = None
+                
+                # Update daily summary: set time_in and status to Present
+                self.db.update_daily_summary(employee_id, today_str, 
+                                             time_in=current_time.strftime("%H:%M:%S"), status="Present")
+
+            # Handle Break Start
+            elif was_present and not is_currently_present and not on_break:
+                event_type = "break_start"
+                self.db.log_attendance_event(mac, event_type, current_time)
+                events.append((mac, event_type, current_time))
+                self.employee_states[mac]["is_present"] = False
+                self.employee_states[mac]["last_seen"] = current_time
+                self.employee_states[mac]["on_break"] = True
+                self.employee_states[mac]["break_start_time"] = current_time
+                
+                # Update daily summary: status to On Break
+                self.db.update_daily_summary(employee_id, today_str, status="On Break")
+
+            # Handle Break End
+            elif not was_present and is_currently_present and on_break:
+                event_type = "break_end"
+                self.db.log_attendance_event(mac, event_type, current_time)
+                events.append((mac, event_type, current_time))
+                self.employee_states[mac]["is_present"] = True
+                self.employee_states[mac]["last_seen"] = current_time
+                self.employee_states[mac]["on_break"] = False
+                self.employee_states[mac]["break_start_time"] = None
+                
+                # Update daily summary: status to Present, recalculate break duration
+                durations = self.db.calculate_durations(employee_id, today_str)
+                self.db.update_daily_summary(employee_id, today_str, status="Present", 
+                                             total_break_duration=durations["total_break_duration"])
+
+            # Handle Time-Out (if employee was present and is now absent, and not on break)
+            elif was_present and not is_currently_present and not on_break and time_in:
+                # This is a final time_out for the day, not just a break
+                event_type = "time_out"
+                self.db.log_attendance_event(mac, event_type, current_time)
+                events.append((mac, event_type, current_time))
+                self.employee_states[mac]["is_present"] = False
+                self.employee_states[mac]["last_seen"] = current_time
+                self.employee_states[mac]["on_break"] = False
+                
+                # Update daily summary: set time_out and status to Absent, recalculate work duration
+                durations = self.db.calculate_durations(employee_id, today_str)
+                self.db.update_daily_summary(employee_id, today_str, 
+                                             time_out=current_time.strftime("%H:%M:%S"), status="Absent",
+                                             total_work_duration=durations["total_work_duration"])
+
+            # Update last seen for currently present employees
+            if is_currently_present:
+                self.employee_states[mac]["last_seen"] = current_time
+            
+            # Automatic 5:00 PM timeout
+            timeout_time = current_time.replace(hour=self.office_timeout_hour, minute=self.office_timeout_minute, second=0, microsecond=0)
+            if current_time >= timeout_time and was_present and time_in and not on_break:
+                # Check if already timed out today
+                summary = self.db.get_daily_summary_for_employee(employee_id, today_str)
+                if summary and summary["status"] != "Timed Out":
+                    event_type = "timeout_5pm"
+                    self.db.log_attendance_event(mac, event_type, timeout_time)
+                    events.append((mac, event_type, timeout_time))
+                    self.employee_states[mac]["is_present"] = False
+                    self.employee_states[mac]["last_seen"] = timeout_time
+                    
+                    # Update daily summary: set time_out to 5 PM and status to Timed Out
+                    durations = self.db.calculate_durations(employee_id, today_str)
+                    self.db.update_daily_summary(employee_id, today_str, 
+                                                 time_out=timeout_time.strftime("%H:%M:%S"), status="Timed Out",
+                                                 total_work_duration=durations["total_work_duration"])
+
+        # Export daily summary to CSV at the end of the day or on significant event
+        # For simplicity, let's export it every scan for now, or when a time_out/timeout_5pm event occurs
+        self.db.export_daily_summary_to_csv(today_str)
+
+        return events
+    
+    def scan_once(self) -> List[Tuple[str, str, datetime]]:
+        """Perform one scan and return any events."""
+        print(f"Scanning network at {datetime.now().strftime('%H:%M:%S')}...")
+        detected_macs = self.get_connected_devices()
+        print(f"Detected {len(detected_macs)} devices")
+        
+        events = self.process_scan_results(detected_macs)
+        return events
+    
+    def start_monitoring(self):
+        """Start continuous monitoring loop."""
+        print("Starting WiFi Attendance Tracker...")
+        print(f"Monitoring {len(self.employees)} employees")
+        print(f"Scan interval: {self.scan_interval} seconds")
+        print("Press Ctrl+C to stop")
+        
+        try:
+            while True:
+                self.scan_once()
+                time.sleep(self.scan_interval)
+        except KeyboardInterrupt:
+            print("\nStopping attendance tracker...")
+    
+    def get_current_status(self) -> Dict[str, dict]:
+        """Get current attendance status of all employees."""
+        status = {}
+        current_time = datetime.now()
+        
+        for mac, name in self.employees.items():
+            state = self.employee_states.get(mac, {})
+            is_present = state.get("is_present", False)
+            last_seen_time = state.get("last_seen")
+            on_break = state.get("on_break", False)
+            
+            display_status = "Present" if is_present else ("On Break" if on_break else "Absent")
+            
+            status[mac] = {
+                'name': name,
+                'mac': mac,
+                'is_present': is_present,
+                'status': display_status,
+                'last_seen': last_seen_time.strftime('%Y-%m-%d %H:%M:%S') if last_seen_time else 'Never',
+                'time_in': state.get('time_in').strftime('%H:%M:%S') if state.get('time_in') else 'N/A'
+            }
+        
+        return status
+
+    def sync_employees_from_json(self):
+        """Sync employees from employees.json to database."""
+        try:
+            with open(self.employees_path, 'r') as f:
+                employees_list = json.load(f)
+            
+            synced_count = 0
+            for emp in employees_list:
+                name = emp.get('name')
+                mac_address = emp.get('mac_address')
+                picture_path = emp.get('picture')
+                
+                if name and mac_address:
+                    if self.db.add_employee(name, mac_address, picture_path=picture_path):
+                        synced_count += 1
+                        # Also initialize daily summary for today if not exists
+                        today_str = datetime.now().strftime('%Y-%m-%d')
+                        employee_info = self.db.get_employee_by_mac(mac_address)
+                        if employee_info:
+                            self.db.update_daily_summary(employee_info['id'], today_str, status='Absent')
+
+            print(f"Synced {synced_count} new employees from {self.employees_path}")
+            return synced_count
+            
+        except FileNotFoundError:
+            print(f"Employees file {self.employees_path} not found")
+            return 0
+        except json.JSONDecodeError:
+            print(f"Invalid JSON in {self.employees_path}")
+            return 0
+        except Exception as e:
+            print(f"Error syncing employees: {e}")
+            return 0
+
+if __name__ == "__main__":
+    tracker = AttendanceTracker()
+    tracker.sync_employees_from_json()
+    tracker.start_monitoring()
+

auth.py

@@ -0,0 +1,78 @@
+import bcrypt
+from database import AttendanceDatabase
+from typing import Optional
+
+class AuthManager:
+    def __init__(self, db: AttendanceDatabase):
+        """Initialize the authentication manager with database connection."""
+        self.db = db
+        self.default_password = "1122"
+        self._ensure_default_password()
+    
+    def _ensure_default_password(self):
+        """Ensure the default password is set in the database."""
+        stored_password_hash = self.db.get_setting("admin_password_hash")
+        if not stored_password_hash:
+            # Set default password hash
+            default_hash = self.hash_password(self.default_password)
+            self.db.set_setting("admin_password_hash", default_hash)
+    
+    def hash_password(self, password: str) -> str:
+        """Hash a password using bcrypt."""
+        salt = bcrypt.gensalt()
+        hashed = bcrypt.hashpw(password.encode('utf-8'), salt)
+        return hashed.decode('utf-8')
+    
+    def verify_password(self, password: str, hashed_password: str) -> bool:
+        """Verify a password against its hash."""
+        try:
+            return bcrypt.checkpw(password.encode('utf-8'), hashed_password.encode('utf-8'))
+        except Exception as e:
+            print(f"Error verifying password: {e}")
+            return False
+    
+    def authenticate_admin(self, password: str) -> bool:
+        """Authenticate admin password for employee management operations."""
+        stored_password_hash = self.db.get_setting("admin_password_hash")
+        if not stored_password_hash:
+            # If no password is set, use default
+            return password == self.default_password
+        
+        return self.verify_password(password, stored_password_hash)
+    
+    def change_admin_password(self, current_password: str, new_password: str) -> bool:
+        """Change the admin password."""
+        if not self.authenticate_admin(current_password):
+            return False
+        
+        new_hash = self.hash_password(new_password)
+        return self.db.set_setting("admin_password_hash", new_hash)
+    
+    def get_current_admin_password_hint(self) -> str:
+        """Get a hint about the current admin password (for development/testing)."""
+        stored_password_hash = self.db.get_setting("admin_password_hash")
+        if not stored_password_hash:
+            return "Default password: 1122"
+        else:
+            return "Custom password set"
+
+if __name__ == "__main__":
+    # Test the authentication functionality
+    from database import AttendanceDatabase
+    
+    db = AttendanceDatabase()
+    auth = AuthManager(db)
+    
+    # Test default password
+    print("Testing default password '1122':", auth.authenticate_admin("1122"))
+    print("Testing wrong password 'wrong':", auth.authenticate_admin("wrong"))
+    
+    # Test changing password
+    print("Changing password from '1122' to 'newpass':", auth.change_admin_password("1122", "newpass"))
+    print("Testing old password '1122':", auth.authenticate_admin("1122"))
+    print("Testing new password 'newpass':", auth.authenticate_admin("newpass"))
+    
+    # Change back to default for testing
+    print("Changing back to default:", auth.change_admin_password("newpass", "1122"))
+    print("Testing default password again:", auth.authenticate_admin("1122"))
+

config.json

@@ -0,0 +1,15 @@
+{
+  "employees": {
+    "f8-98-b9-7f-fe-0d": "Ahsan",
+    "ff-ff-ff-ff-ff-ff": "Broadcast Device",
+    "01-00-5e-00-00-16": "Multicast Device 1",
+    "01-00-5e-00-00-fb": "Multicast Device 2",
+    "01-00-5e-00-00-fc": "Multicast Device 3",
+    "01-00-5e-7f-ff-fa": "Multicast Device 4"
+  },
+  "scan_interval_seconds": 60,
+  "web_port": 5000,
+  "office_timeout_hour": 17,
+  "office_timeout_minute": 0
+}
+

database.py

@@ -0,0 +1,573 @@
+import sqlite3
+import json
+from datetime import datetime, timedelta
+from typing import List, Dict, Optional, Tuple
+import os
+import csv
+
+class AttendanceDatabase:
+    def __init__(self, db_path: str = "attendance.db"):
+        """Initialize the database connection and create tables if they don't exist."""
+        self.db_path = db_path
+        self.init_database()
+    
+    def init_database(self):
+        """Create database tables if they don't exist."""
+        with sqlite3.connect(self.db_path) as conn:
+            cursor = conn.cursor()
+            
+            # Create employees table with password_hash and picture_path
+            cursor.execute("""
+                CREATE TABLE IF NOT EXISTS employees (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    name TEXT NOT NULL,
+                    mac_address TEXT UNIQUE NOT NULL,
+                    password_hash TEXT, -- New: for employee management
+                    picture_path TEXT,  -- New: path to employee picture
+                    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+                )
+            """)
+            
+            # Create attendance_events table (replaces attendance_logs)
+            cursor.execute("""
+                CREATE TABLE IF NOT EXISTS attendance_events (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    employee_id INTEGER,
+                    mac_address TEXT NOT NULL,
+                    event_type TEXT NOT NULL, -- 'time_in', 'time_out', 'break_start', 'break_end', 'timeout_5pm'
+                    timestamp TIMESTAMP NOT NULL,
+                    date TEXT NOT NULL,
+                    FOREIGN KEY (employee_id) REFERENCES employees (id)
+                )
+            """)
+            
+            # Create daily_attendance_summary table
+            cursor.execute("""
+                CREATE TABLE IF NOT EXISTS daily_attendance_summary (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    employee_id INTEGER NOT NULL,
+                    date TEXT NOT NULL,
+                    time_in TEXT,
+                    time_out TEXT,
+                    total_break_duration INTEGER DEFAULT 0, -- in seconds
+                    total_work_duration INTEGER DEFAULT 0, -- in seconds
+                    status TEXT NOT NULL, -- 'Present', 'Absent', 'Timed Out'
+                    UNIQUE(employee_id, date),
+                    FOREIGN KEY (employee_id) REFERENCES employees (id)
+                )
+            """)
+
+            # Create settings table for general application settings like admin password
+            cursor.execute("""
+                CREATE TABLE IF NOT EXISTS settings (
+                    key TEXT PRIMARY KEY,
+                    value TEXT
+                )
+            """)
+            
+            # Create indexes for better performance
+            cursor.execute("CREATE INDEX IF NOT EXISTS idx_mac_address ON employees (mac_address)")
+            cursor.execute("CREATE INDEX IF NOT EXISTS idx_event_date ON attendance_events (date)")
+            cursor.execute("CREATE INDEX IF NOT EXISTS idx_event_timestamp ON attendance_events (timestamp)")
+            cursor.execute("CREATE INDEX IF NOT EXISTS idx_summary_employee_date ON daily_attendance_summary (employee_id, date)")
+            
+            conn.commit()
+    
+    def add_employee(self, name: str, mac_address: str, password_hash: Optional[str] = None, picture_path: Optional[str] = None) -> bool:
+        """Add a new employee to the database."""
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                cursor.execute(
+                    "INSERT INTO employees (name, mac_address, password_hash, picture_path) VALUES (?, ?, ?, ?)",
+                    (name, mac_address.lower(), password_hash, picture_path)
+                )
+                conn.commit()
+                return True
+        except sqlite3.IntegrityError:
+            # print(f"Employee with MAC address {mac_address} already exists")
+            return False
+        except Exception as e:
+            print(f"Error adding employee: {e}")
+            return False
+
+    def update_employee(self, employee_id: int, name: Optional[str] = None, mac_address: Optional[str] = None, password_hash: Optional[str] = None, picture_path: Optional[str] = None) -> bool:
+        """Update an existing employee's information."""
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                update_fields = []
+                update_values = []
+                if name is not None: update_fields.append("name = ?"); update_values.append(name)
+                if mac_address is not None: update_fields.append("mac_address = ?"); update_values.append(mac_address.lower())
+                if password_hash is not None: update_fields.append("password_hash = ?"); update_values.append(password_hash)
+                if picture_path is not None: update_fields.append("picture_path = ?"); update_values.append(picture_path)
+                
+                if not update_fields:
+                    return False # Nothing to update
+
+                query = f"UPDATE employees SET {', '.join(update_fields)} WHERE id = ?"
+                cursor.execute(query, (*update_values, employee_id))
+                conn.commit()
+                return True
+        except Exception as e:
+            print(f"Error updating employee: {e}")
+            return False
+
+    def delete_employee(self, employee_id: int) -> bool:
+        """Delete an employee from the database."""
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                cursor.execute("DELETE FROM employees WHERE id = ?", (employee_id,))
+                conn.commit()
+                return True
+        except Exception as e:
+            print(f"Error deleting employee: {e}")
+            return False
+    
+    def get_employee_by_mac(self, mac_address: str) -> Optional[Dict]:
+        """Get employee information by MAC address."""
+        with sqlite3.connect(self.db_path) as conn:
+            cursor = conn.cursor()
+            cursor.execute(
+                "SELECT id, name, mac_address, password_hash, picture_path, created_at FROM employees WHERE mac_address = ?",
+                (mac_address.lower(),)
+            )
+            row = cursor.fetchone()
+            if row:
+                return {
+                    'id': row[0],
+                    'name': row[1],
+                    'mac_address': row[2],
+                    'password_hash': row[3],
+                    'picture_path': row[4],
+                    'created_at': row[5]
+                }
+        return None
+
+    def get_employee_by_id(self, employee_id: int) -> Optional[Dict]:
+        """Get employee information by ID."""
+        with sqlite3.connect(self.db_path) as conn:
+            cursor = conn.cursor()
+            cursor.execute(
+                "SELECT id, name, mac_address, password_hash, picture_path, created_at FROM employees WHERE id = ?",
+                (employee_id,)
+            )
+            row = cursor.fetchone()
+            if row:
+                return {
+                    'id': row[0],
+                    'name': row[1],
+                    'mac_address': row[2],
+                    'password_hash': row[3],
+                    'picture_path': row[4],
+                    'created_at': row[5]
+                }
+        return None
+    
+    def get_all_employees(self, search_query: Optional[str] = None) -> List[Dict]:
+        """Get all employees from the database, optionally filtered by search query."""
+        with sqlite3.connect(self.db_path) as conn:
+            cursor = conn.cursor()
+            if search_query:
+                search_query = f'%{search_query.lower()}%'
+                cursor.execute(
+                    "SELECT id, name, mac_address, password_hash, picture_path, created_at FROM employees WHERE LOWER(name) LIKE ? OR LOWER(mac_address) LIKE ? ORDER BY name",
+                    (search_query, search_query)
+                )
+            else:
+                cursor.execute('SELECT id, name, mac_address, password_hash, picture_path, created_at FROM employees ORDER BY name')
+            rows = cursor.fetchall()
+            return [
+                {
+                    'id': row[0],
+                    'name': row[1],
+                    'mac_address': row[2],
+                    'password_hash': row[3],
+                    'picture_path': row[4],
+                    'created_at': row[5]
+                }
+                for row in rows
+            ]
+    
+    def log_attendance_event(self, mac_address: str, event_type: str, timestamp: datetime = None) -> bool:
+        """Log an attendance event to the attendance_events table."""
+        if timestamp is None:
+            timestamp = datetime.now()
+        
+        date_str = timestamp.strftime('%Y-%m-%d')
+        
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                
+                employee = self.get_employee_by_mac(mac_address)
+                employee_id = employee['id'] if employee else None
+                
+                cursor.execute("""
+                    INSERT INTO attendance_events (employee_id, mac_address, event_type, timestamp, date)
+                    VALUES (?, ?, ?, ?, ?)
+                """, (employee_id, mac_address.lower(), event_type, timestamp.strftime('%Y-%m-%d %H:%M:%S'), date_str))
+                
+                conn.commit()
+                return True
+        except Exception as e:
+            print(f"Error logging attendance event: {e}")
+            return False
+    
+    def get_attendance_events(self, date: str = None, limit: int = 100) -> List[Dict]:
+        """Get attendance events, optionally filtered by date."""
+        with sqlite3.connect(self.db_path) as conn:
+            cursor = conn.cursor()
+            
+            if date:
+                cursor.execute("""
+                    SELECT ae.id, ae.mac_address, ae.event_type, ae.timestamp, ae.date,
+                           e.name as employee_name
+                    FROM attendance_events ae
+                    LEFT JOIN employees e ON ae.employee_id = e.id
+                    WHERE ae.date = ?
+                    ORDER BY ae.timestamp DESC
+                    LIMIT ?
+                """, (date, limit))
+            else:
+                cursor.execute("""
+                    SELECT ae.id, ae.mac_address, ae.event_type, ae.timestamp, ae.date,
+                           e.name as employee_name
+                    FROM attendance_events ae
+                    LEFT JOIN employees e ON ae.employee_id = e.id
+                    ORDER BY ae.timestamp DESC
+                    LIMIT ?
+                """, (limit,))
+            
+            rows = cursor.fetchall()
+            return [
+                {
+                    'id': row[0],
+                    'mac_address': row[1],
+                    'event_type': row[2],
+                    'timestamp': row[3],
+                    'date': row[4],
+                    'employee_name': row[5] or f"Unknown ({row[1]})"
+                }
+                for row in rows
+            ]
+
+    def update_daily_summary(self, employee_id: int, date_str: str, time_in: Optional[str] = None, 
+                             time_out: Optional[str] = None, total_break_duration: Optional[int] = None,
+                             total_work_duration: Optional[int] = None, status: Optional[str] = None):
+        """Update or insert a daily attendance summary record."""
+        with sqlite3.connect(self.db_path) as conn:
+            cursor = conn.cursor()
+            
+            # Check if record exists
+            cursor.execute("SELECT * FROM daily_attendance_summary WHERE employee_id = ? AND date = ?",
+                           (employee_id, date_str))
+            existing_record = cursor.fetchone()
+            
+            if existing_record:
+                # Update existing record
+                update_fields = []
+                update_values = []
+                if time_in is not None: update_fields.append("time_in = ?"); update_values.append(time_in)
+                if time_out is not None: update_fields.append("time_out = ?"); update_values.append(time_out)
+                if total_break_duration is not None: update_fields.append("total_break_duration = ?"); update_values.append(total_break_duration)
+                if total_work_duration is not None: update_fields.append("total_work_duration = ?"); update_values.append(total_work_duration)
+                if status is not None: update_fields.append("status = ?"); update_values.append(status)
+                
+                if update_fields:
+                    query = f"UPDATE daily_attendance_summary SET {', '.join(update_fields)} WHERE employee_id = ? AND date = ?"
+                    cursor.execute(query, (*update_values, employee_id, date_str))
+            else:
+                # Insert new record
+                cursor.execute("""
+                    INSERT INTO daily_attendance_summary (employee_id, date, time_in, time_out, total_break_duration, total_work_duration, status)
+                    VALUES (?, ?, ?, ?, ?, ?, ?)
+                """, (employee_id, date_str, time_in, time_out, total_break_duration, total_work_duration, status))
+            
+            conn.commit()
+
+    def get_daily_summary_for_employee(self, employee_id: int, date_str: str) -> Optional[Dict]:
+        """Get daily attendance summary for a specific employee on a specific date."""
+        with sqlite3.connect(self.db_path) as conn:
+            cursor = conn.cursor()
+            
+            cursor.execute("""
+                SELECT das.id, e.name, e.mac_address, das.date, das.time_in, das.time_out,
+                       das.total_break_duration, das.total_work_duration, das.status
+                FROM daily_attendance_summary das
+                JOIN employees e ON das.employee_id = e.id
+                WHERE das.employee_id = ? AND das.date = ?
+            """, (employee_id, date_str))
+            
+            row = cursor.fetchone()
+            if row:
+                return {
+                    'id': row[0],
+                    'name': row[1],
+                    'mac_address': row[2],
+                    'date': row[3],
+                    'time_in': row[4],
+                    'time_out': row[5],
+                    'total_break_duration': row[6],
+                    'total_work_duration': row[7],
+                    'status': row[8]
+                }
+            return None
+
+    def get_daily_summary(self, date_str: str = None) -> List[Dict]:
+        """Get daily attendance summary for all employees, optionally filtered by date."""
+        with sqlite3.connect(self.db_path) as conn:
+            cursor = conn.cursor()
+            
+            if date_str is None:
+                date_str = datetime.now().strftime('%Y-%m-%d')
+
+            cursor.execute("""
+                SELECT das.id, e.name, e.mac_address, das.date, das.time_in, das.time_out,
+                       das.total_break_duration, das.total_work_duration, das.status
+                FROM daily_attendance_summary das
+                JOIN employees e ON das.employee_id = e.id
+                WHERE das.date = ?
+                ORDER BY e.name
+            """, (date_str,))
+            
+            rows = cursor.fetchall()
+            summary_list = []
+            for row in rows:
+                summary_list.append({
+                    'id': row[0],
+                    'name': row[1],
+                    'mac_address': row[2],
+                    'date': row[3],
+                    'time_in': row[4],
+                    'time_out': row[5],
+                    'total_break_duration': row[6],
+                    'total_work_duration': row[7],
+                    'status': row[8]
+                })
+            return summary_list
+
+    def calculate_durations(self, employee_id: int, date_str: str):
+        """Calculate total break and work durations for an employee on a given day."""
+        with sqlite3.connect(self.db_path) as conn:
+            cursor = conn.cursor()
+            
+            cursor.execute("""
+                SELECT event_type, timestamp FROM attendance_events
+                WHERE employee_id = ? AND date = ?
+                ORDER BY timestamp
+            """, (employee_id, date_str))
+            
+            events = cursor.fetchall()
+            
+            time_in = None
+            time_out = None
+            total_break_duration = timedelta(0)
+            total_work_duration = timedelta(0)
+            
+            last_event_time = None
+            on_break = False
+            
+            for event_type, timestamp_str in events:
+                current_time = datetime.strptime(timestamp_str, '%Y-%m-%d %H:%M:%S')
+                
+                if event_type == 'time_in':
+                    if time_in is None: # Only set time_in once for the day
+                        time_in = current_time
+                    last_event_time = current_time
+                    on_break = False
+                elif event_type == 'time_out':
+                    if time_in and last_event_time and not on_break:
+                        total_work_duration += (current_time - last_event_time)
+                    time_out = current_time
+                    last_event_time = current_time
+                    on_break = False
+                elif event_type == 'break_start':
+                    if time_in and last_event_time and not on_break:
+                        total_work_duration += (current_time - last_event_time)
+                    last_event_time = current_time
+                    on_break = True
+                elif event_type == 'break_end':
+                    if time_in and last_event_time and on_break:
+                        total_break_duration += (current_time - last_event_time)
+                    last_event_time = current_time
+                    on_break = False
+                elif event_type == 'timeout_5pm':
+                    if time_in and last_event_time and not on_break:
+                        total_work_duration += (current_time - last_event_time)
+                    time_out = current_time # Set time_out to 5 PM
+                    last_event_time = current_time
+                    on_break = False
+
+            # If still present at the end of the day (no explicit time_out or 5pm timeout)
+            # and there was a time_in event, calculate work duration up to now
+            if time_in and time_out is None and last_event_time and not on_break:
+                total_work_duration += (datetime.now() - last_event_time)
+
+            return {
+                'time_in': time_in.strftime('%H:%M:%S') if time_in else None,
+                'time_out': time_out.strftime('%H:%M:%S') if time_out else None,
+                'total_break_duration': int(total_break_duration.total_seconds()),
+                'total_work_duration': int(total_work_duration.total_seconds())
+            }
+
+    def export_daily_summary_to_csv(self, date_str: str):
+        """Export daily attendance summary to a CSV file."""
+        summary_data = self.get_daily_summary(date_str)
+        
+        if not summary_data:
+            print(f"No summary data for {date_str} to export.")
+            return
+
+        log_file = f"logs/attendance_summary_{date_str}.csv"
+        os.makedirs(os.path.dirname(log_file), exist_ok=True)
+
+        fieldnames = ['Name', 'MAC Address', 'Date', 'Time In', 'Time Out', 'Total Break (HH:MM:SS)', 'Total Work (HH:MM:SS)', 'Status']
+        
+        with open(log_file, 'w', newline='', encoding='utf-8') as csvfile:
+            writer = csv.DictWriter(csvfile, fieldnames=fieldnames)
+            writer.writeheader()
+            
+            for row in summary_data:
+                # Convert seconds to HH:MM:SS format
+                total_break_duration = row['total_break_duration'] or 0
+                total_work_duration = row['total_work_duration'] or 0
+                total_break_formatted = str(timedelta(seconds=total_break_duration))
+                total_work_formatted = str(timedelta(seconds=total_work_duration))
+
+                writer.writerow({
+                    'Name': row['name'],
+                    'MAC Address': row['mac_address'],
+                    'Date': row['date'],
+                    'Time In': row['time_in'] if row['time_in'] else 'N/A',
+                    'Time Out': row['time_out'] if row['time_out'] else 'N/A',
+                    'Total Break (HH:MM:SS)': total_break_formatted,
+                    'Total Work (HH:MM:SS)': total_work_formatted,
+                    'Status': row['status']
+                })
+        print(f"Daily summary for {date_str} exported to {log_file}")
+
+    def sync_employees_from_config(self, config_path: str = "config.json"):
+        """Sync employees from config file to database."""
+        try:
+            with open(config_path, 'r') as f:
+                config = json.load(f)
+            
+            employees = config.get('employees', {})
+            synced_count = 0
+            
+            for mac_address, name in employees.items():
+                if self.add_employee(name, mac_address):
+                    synced_count += 1
+                    # Also initialize daily summary for today if not exists
+                    today_str = datetime.now().strftime('%Y-%m-%d')
+                    employee_info = self.get_employee_by_mac(mac_address)
+                    if employee_info:
+                        self.update_daily_summary(employee_info['id'], today_str, status='Absent')
+
+            print(f"Synced {synced_count} new employees from config")
+            return synced_count
+            
+        except FileNotFoundError:
+            print(f"Config file {config_path} not found")
+            return 0
+        except json.JSONDecodeError:
+            print(f"Invalid JSON in {config_path}")
+            return 0
+        except Exception as e:
+            print(f"Error syncing employees: {e}")
+            return 0
+
+    def get_setting(self, key: str) -> Optional[str]:
+        """Get a setting value from the settings table."""
+        with sqlite3.connect(self.db_path) as conn:
+            cursor = conn.cursor()
+            cursor.execute("SELECT value FROM settings WHERE key = ?", (key,))
+            row = cursor.fetchone()
+            return row[0] if row else None
+
+    def set_setting(self, key: str, value: str) -> bool:
+        """Set a setting value in the settings table."""
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                cursor.execute("INSERT OR REPLACE INTO settings (key, value) VALUES (?, ?)", (key, value))
+                conn.commit()
+                return True
+        except Exception as e:
+            print(f"Error setting setting {key}: {e}")
+            return False
+    
+    def cleanup_old_logs(self, days_to_keep: int = 30):
+        """Remove attendance events and summaries older than specified days."""
+        cutoff_date = datetime.now() - timedelta(days=days_to_keep)
+        cutoff_date_str = cutoff_date.strftime('%Y-%m-%d %H:%M:%S')
+        
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                
+                cursor.execute(
+                    "DELETE FROM attendance_events WHERE timestamp < ?",
+                    (cutoff_date_str,)
+                )
+                deleted_events = cursor.rowcount
+
+                cursor.execute(
+                    "DELETE FROM daily_attendance_summary WHERE date < ?",
+                    (cutoff_date.strftime('%Y-%m-%d'),)
+                )
+                deleted_summaries = cursor.rowcount
+
+                conn.commit()
+                print(f"Cleaned up {deleted_events} old attendance events and {deleted_summaries} old summaries.")
+                return deleted_events + deleted_summaries
+        except Exception as e:
+            print(f"Error cleaning up old logs: {e}")
+            return 0
+
+if __name__ == "__main__":
+    # Test the database functionality
+    db = AttendanceDatabase()
+    
+    # Sync employees from config
+    db.sync_employees_from_config()
+    
+    # Display all employees
+    employees = db.get_all_employees()
+    print(f"\nTotal employees in database: {len(employees)}")
+    for emp in employees:
+        print(f"- {emp['name']} ({emp['mac_address']})")
+    
+    # Display recent events
+    recent_events = db.get_attendance_events(limit=10)
+    print(f"\nRecent attendance events: {len(recent_events)}")
+    for event in recent_events:
+        print(f"- {event['timestamp']}: {event['employee_name']} - {event['event_type']}")
+
+    # Test daily summary export
+    today = datetime.now().strftime('%Y-%m-%d')
+    db.export_daily_summary_to_csv(today)
+
+    # Example of logging events and updating summary
+    # employee_mac = "f8-98-b9-7f-fe-0d"
+    # employee_info = db.get_employee_by_mac(employee_mac)
+    # if employee_info:
+    #     db.log_attendance_event(employee_mac, 'time_in')
+    #     db.update_daily_summary(employee_info['id'], today, time_in=datetime.now().strftime('%H:%M:%S'), status='Present')
+    #     time.sleep(5)
+    #     db.log_attendance_event(employee_mac, 'break_start')
+    #     db.update_daily_summary(employee_info['id'], today, total_break_duration=db.calculate_durations(employee_info['id'], today)['total_break_duration'])
+    #     time.sleep(5)
+    #     db.log_attendance_event(employee_mac, 'break_end')
+    #     db.update_daily_summary(employee_info['id'], today, total_break_duration=db.calculate_durations(employee_info['id'], today)['total_break_duration'])
+    #     time.sleep(5)
+    #     db.log_attendance_event(employee_mac, 'time_out')
+    #     db.update_daily_summary(employee_info['id'], today, time_out=datetime.now().strftime('%H:%M:%S'), status='Absent', total_work_duration=db.calculate_durations(employee_info['id'], today)['total_work_duration'])
+
+    # db.export_daily_summary_to_csv(today)
+
+
+

employees.json

@@ -0,0 +1,12 @@
+[
+  {
+    "name": "Ahsan",
+    "mac_address": "f8-98-b9-7f-fe-0d",
+    "picture": "static/img/ahsan.jpg"
+  },
+  {
+    "name": "John Smith Updated",
+    "mac_address": "aa-bb-cc-dd-ee-ff",
+    "picture": "static/img/john_doe.jpg"
+  }
+]

logs/attendance_summary_2025-07-28.csv

@@ -0,0 +1,8 @@
+Name,MAC Address,Date,Time In,Time Out,Total Break (HH:MM:SS),Total Work (HH:MM:SS),Status
+Ahsan,f8-98-b9-7f-fe-0d,2025-07-28,16:13:57,N/A,0:00:00,0:00:00,Present
+Broadcast Device,ff-ff-ff-ff-ff-ff,2025-07-28,N/A,N/A,0:00:00,0:00:00,Absent
+John Smith Updated,aa-bb-cc-dd-ee-ff,2025-07-28,N/A,N/A,0:00:00,0:00:00,Absent
+Multicast Device 1,01-00-5e-00-00-16,2025-07-28,N/A,N/A,0:00:00,0:00:00,Absent
+Multicast Device 2,01-00-5e-00-00-fb,2025-07-28,N/A,N/A,0:00:00,0:00:00,Absent
+Multicast Device 3,01-00-5e-00-00-fc,2025-07-28,N/A,N/A,0:00:00,0:00:00,Absent
+Multicast Device 4,01-00-5e-7f-ff-fa,2025-07-28,N/A,N/A,0:00:00,0:00:00,Absent

main.py

@@ -0,0 +1,865 @@
+#!/usr/bin/env python3
+"""
+WiFi-Based Attendance & Break Tracker - Advanced Employee Management Version
+Integrated main application entry point
+
+This application tracks employee attendance by detecting MAC addresses
+of devices connected to the local WiFi network with advanced features:
+- Employee management (add, search, password protection)
+- Time-in/time-out tracking
+- Break start/end monitoring
+- Automatic 5:00 PM timeout
+- Detailed attendance sheets
+- Real-time web interface
+- Non-admin operation (where possible)
+"""
+
+import sys
+import os
+import argparse
+import threading
+import time
+import json
+from datetime import datetime
+from flask import Flask, render_template, jsonify, request, session, redirect, url_for
+from flask_cors import CORS
+from functools import wraps
+
+# Import our modules
+from attendance_tracker import AttendanceTracker
+from database import AttendanceDatabase
+from auth import AuthManager
+
+# Flask app setup
+app = Flask(__name__)
+app.secret_key = 'wifi_attendance_tracker_secret_key_2025'  # Change this in production
+CORS(app)
+
+# Global variables
+tracker = None
+db = None
+auth = None
+latest_events = []
+is_monitoring = False
+
+# Dashboard password (can be changed via settings)
+DASHBOARD_PASSWORD = "admin123"
+
+def login_required(f):
+    """Decorator to require login for protected routes."""
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if 'logged_in' not in session or not session['logged_in']:
+            return redirect(url_for('login_page'))
+        return f(*args, **kwargs)
+    return decorated_function
+
+def check_dashboard_password(password):
+    """Check if the provided password matches the dashboard password."""
+    return password == DASHBOARD_PASSWORD
+
+def print_banner():
+    """Print application banner."""
+    banner = """
+    ╔══════════════════════════════════════════════════════════════╗
+    ║        WiFi Attendance Tracker - Employee Management        ║
+    ║                                                              ║
+    ║  Advanced MAC Detection with Employee Management Features    ║
+    ║  Version 3.0 - 2025                                         ║
+    ╚══════════════════════════════════════════════════════════════╝
+    """
+    print(banner)
+
+def check_requirements():
+    """Check if the system meets requirements."""
+    issues = []
+    
+    # Check if config file exists
+    if not os.path.exists('config.json'):
+        issues.append("config.json file not found")
+    
+    # Check if employees file exists
+    if not os.path.exists('employees.json'):
+        issues.append("employees.json file not found")
+    
+    # Note: We're removing the admin privilege check as requested
+    # The application will attempt to run without admin privileges
+    # and provide clear error messages if network scanning fails
+    
+    return issues
+
+def initialize_system():
+    """Initialize the attendance tracking system."""
+    global tracker, db, auth
+    
+    # Initialize database first
+    db = AttendanceDatabase()
+    
+    # Initialize authentication manager
+    auth = AuthManager(db)
+    
+    # Initialize tracker
+    tracker = AttendanceTracker()
+    
+    # Sync employees from JSON to database
+    tracker.sync_employees_from_json()
+
+def monitoring_loop():
+    """Background monitoring loop."""
+    global latest_events, is_monitoring
+    
+    while is_monitoring:
+        try:
+            events = tracker.scan_once()
+            
+            # Keep only the latest 50 events for the web interface
+            latest_events.extend(events)
+            latest_events = latest_events[-50:]  # Keep only last 50 events
+            
+            time.sleep(tracker.scan_interval)
+        except Exception as e:
+            print(f"Error in monitoring loop: {e}")
+            time.sleep(5)  # Wait before retrying
+
+# Web Interface Routes
+@app.route('/')
+def index():
+    """Redirect to login page."""
+    return redirect(url_for('login_page'))
+
+@app.route('/login')
+def login_page():
+    """Serve the login page."""
+    if 'logged_in' in session and session['logged_in']:
+        return redirect(url_for('dashboard'))
+    return render_template('login.html')
+
+@login_required
+@app.route('/api/login', methods=['POST'])
+def login():
+    """Handle login authentication."""
+    try:
+        data = request.get_json()
+        password = data.get('password', '')
+        
+        if check_dashboard_password(password):
+            session['logged_in'] = True
+            return jsonify({'success': True, 'message': 'Login successful'})
+        else:
+            return jsonify({'success': False, 'message': 'Invalid password'})
+    except Exception as e:
+        return jsonify({'success': False, 'message': 'Login error occurred'})
+
+@app.route('/logout')
+def logout():
+    """Handle logout."""
+    session.pop('logged_in', None)
+    return redirect(url_for('login_page'))
+
+@app.route('/dashboard')
+@login_required
+def dashboard():
+    """Serve the main dashboard page."""
+    return render_template('index.html')
+
+@login_required
+@app.route('/api/status')
+@login_required
+def get_status():
+    """Get current system status."""
+    return jsonify({
+        'is_monitoring': is_monitoring,
+        'employee_count': len(tracker.employees) if tracker else 0,
+        'scan_interval': tracker.scan_interval if tracker else 60,
+        'current_time': datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
+        'office_timeout': f"{tracker.office_timeout_hour:02d}:{tracker.office_timeout_minute:02d}" if tracker else "17:00"
+    })
+
+@login_required
+@app.route('/api/employees')
+@login_required
+def get_employees():
+    """Get all employees and their current status."""
+    if not tracker:
+        return jsonify([])
+    
+    search_query = request.args.get('search', '').strip()
+    
+    status = tracker.get_current_status()
+    employees = []
+    
+    for mac, info in status.items():
+        # Get employee picture from database
+        employee_info = db.get_employee_by_mac(mac)
+        picture_path = employee_info.get('picture_path') if employee_info else None
+        
+        employee_data = {
+            'name': info['name'],
+            'mac': info['mac'],
+            'is_present': info['is_present'],
+            'status': info['status'],
+            'last_seen': info['last_seen'],
+            'time_in': info['time_in'],
+            'picture': picture_path
+        }
+        
+        # Apply search filter if provided
+        if search_query:
+            if (search_query.lower() in info['name'].lower() or 
+                search_query.lower() in info['mac'].lower()):
+                employees.append(employee_data)
+        else:
+            employees.append(employee_data)
+    
+    return jsonify(employees)
+
+@app.route('/api/events')
+@login_required
+def get_recent_events():
+    """Get recent attendance events."""
+    global latest_events
+    
+    # Convert events to JSON-serializable format
+    events_data = []
+    for mac, event_type, timestamp in latest_events:
+        employee_name = tracker.get_employee_name(mac) if tracker else f"Unknown ({mac})"
+        events_data.append({
+            'name': employee_name,
+            'mac': mac,
+            'event_type': event_type,
+            'timestamp': timestamp.strftime('%Y-%m-%d %H:%M:%S'),
+            'time_ago': get_time_ago(timestamp)
+        })
+    
+    # Sort by timestamp (most recent first)
+    events_data.sort(key=lambda x: x['timestamp'], reverse=True)
+    
+    return jsonify(events_data)
+
+@login_required
+@app.route('/api/attendance_events')
+def get_attendance_events():
+    """Get attendance events from database."""
+    if not db:
+        return jsonify([])
+    
+    date_filter = request.args.get('date')
+    limit = int(request.args.get('limit', 50))
+    
+    events = db.get_attendance_events(date=date_filter, limit=limit)
+    
+    # Add time_ago field
+    for event in events:
+        timestamp = datetime.fromisoformat(event['timestamp'])
+        event['time_ago'] = get_time_ago(timestamp)
+    
+    return jsonify(events)
+
+@login_required
+@app.route('/api/daily_summary')
+def get_daily_summary():
+    """Get daily attendance summary."""
+    if not db:
+        return jsonify([])
+    
+    date_str = request.args.get('date', datetime.now().strftime('%Y-%m-%d'))
+    summary = db.get_daily_summary(date_str)
+    
+    # Format durations for display
+    for employee in summary:
+        employee['total_break_formatted'] = format_duration(employee['total_break_duration'])
+        employee['total_work_formatted'] = format_duration(employee['total_work_duration'])
+    
+    return jsonify(summary)
+
+@login_required
+@app.route('/api/summary_stats')
+def get_summary_stats():
+    """Get summary statistics for the dashboard."""
+    if not db:
+        return jsonify({})
+    
+    date_str = request.args.get('date', datetime.now().strftime('%Y-%m-%d'))
+    summary = db.get_daily_summary(date_str)
+    
+    stats = {
+        'total_employees': len(summary),
+        'present_count': len([emp for emp in summary if emp['status'] == 'Present']),
+        'absent_count': len([emp for emp in summary if emp['status'] == 'Absent']),
+        'on_break_count': len([emp for emp in summary if emp['status'] == 'On Break']),
+        'timed_out_count': len([emp for emp in summary if emp['status'] == 'Timed Out']),
+        'total_events': len(db.get_attendance_events(date=date_str, limit=1000))
+    }
+    
+    return jsonify(stats)
+
+@login_required
+@app.route('/api/start_monitoring', methods=['POST'])
+def start_monitoring():
+    """Start the attendance monitoring."""
+    global is_monitoring
+    
+    if not is_monitoring:
+        is_monitoring = True
+        monitoring_thread = threading.Thread(target=monitoring_loop, daemon=True)
+        monitoring_thread.start()
+        return jsonify({'success': True, 'message': 'Monitoring started'})
+    else:
+        return jsonify({'success': False, 'message': 'Monitoring already running'})
+
+@login_required
+@app.route('/api/stop_monitoring', methods=['POST'])
+def stop_monitoring():
+    """Stop the attendance monitoring."""
+    global is_monitoring
+    is_monitoring = False
+    return jsonify({'success': True, 'message': 'Monitoring stopped'})
+
+@login_required
+@app.route('/api/export_csv')
+def export_csv():
+    """Export daily summary to CSV."""
+    if not db:
+        return jsonify({'success': False, 'message': 'Database not available'})
+    
+    date_str = request.args.get('date', datetime.now().strftime('%Y-%m-%d'))
+    
+    try:
+        db.export_daily_summary_to_csv(date_str)
+        return jsonify({'success': True, 'message': f'CSV exported for {date_str}'})
+    except Exception as e:
+        return jsonify({'success': False, 'message': f'Export failed: {str(e)}'})
+
+@login_required
+@app.route('/api/add_employee', methods=['POST'])
+def add_employee():
+    """Add a new employee with password authentication."""
+    if not auth or not db:
+        return jsonify({'success': False, 'message': 'Authentication system not available'})
+    
+    try:
+        data = request.get_json()
+        
+        # Validate required fields
+        if not all(key in data for key in ['name', 'mac', 'password']):
+            return jsonify({'success': False, 'message': 'Missing required fields'})
+        
+        # Authenticate admin password
+        if not auth.authenticate_admin(data['password']):
+            return jsonify({'success': False, 'message': 'Invalid admin password'})
+        
+        # Validate MAC address format
+        mac_address = data['mac'].lower().strip()
+        if not is_valid_mac_format(mac_address):
+            return jsonify({'success': False, 'message': 'Invalid MAC address format. Use: aa-bb-cc-dd-ee-ff'})
+        
+        # Add employee to database
+        success = db.add_employee(
+            name=data['name'].strip(),
+            mac_address=mac_address,
+            picture_path=data.get('picture', '').strip() or None
+        )
+        
+        if success:
+            # Also add to employees.json for persistence
+            update_employees_json(data['name'].strip(), mac_address, data.get('picture', '').strip())
+            
+            # Reload tracker employees
+            tracker.employees = tracker.load_employees()
+            tracker._initialize_employee_states()
+            
+            return jsonify({'success': True, 'message': 'Employee added successfully'})
+        else:
+            return jsonify({'success': False, 'message': 'Employee with this MAC address already exists'})
+            
+    except Exception as e:
+        print(f"Error adding employee: {e}")
+        return jsonify({'success': False, 'message': f'Error adding employee: {str(e)}'})
+
+@login_required
+@app.route('/api/search_employees')
+def search_employees():
+    """Search employees by name or MAC address."""
+    if not db:
+        return jsonify([])
+    
+    search_query = request.args.get('q', '').strip()
+    
+    if not search_query:
+        return jsonify([])
+    
+    employees = db.get_all_employees(search_query=search_query)
+    
+    # Format response
+    result = []
+    for emp in employees:
+        result.append({
+            'id': emp['id'],
+            'name': emp['name'],
+            'mac_address': emp['mac_address'],
+            'picture_path': emp['picture_path'],
+            'created_at': emp['created_at']
+        })
+    
+    return jsonify(result)
+
+@app.route('/api/delete_employee', methods=['POST'])
+@login_required
+def delete_employee():
+    """Delete an employee with password authentication."""
+    if not auth or not db:
+        return jsonify({'success': False, 'message': 'Authentication system not available'})
+    
+    try:
+        data = request.get_json()
+        
+        # Validate required fields - now accepting either employee_id or mac_address
+        if not all(key in data for key in ['password']) or not any(key in data for key in ['employee_id', 'mac_address']):
+            return jsonify({'success': False, 'message': 'Missing required fields'})
+        
+        # Authenticate admin password
+        if not auth.authenticate_admin(data['password']):
+            return jsonify({'success': False, 'message': 'Invalid admin password'})
+        
+        # Get employee info - handle both employee_id and mac_address
+        if 'employee_id' in data and isinstance(data['employee_id'], int):
+            employee = db.get_employee_by_id(data['employee_id'])
+        else:
+            # If employee_id is actually a MAC address or mac_address is provided
+            mac_address = data.get('employee_id', data.get('mac_address'))
+            employee = db.get_employee_by_mac(mac_address)
+        
+        if not employee:
+            return jsonify({'success': False, 'message': 'Employee not found'})
+        
+        # Delete employee from database
+        success = db.delete_employee(employee['id'])
+        
+        if success:
+            # Remove from employees.json for persistence
+            remove_employee_from_json(employee['mac_address'])
+            
+            # Reload tracker employees
+            tracker.employees = tracker.load_employees()
+            tracker._initialize_employee_states()
+            
+            return jsonify({'success': True, 'message': f'Employee {employee["name"]} deleted successfully'})
+        else:
+            return jsonify({'success': False, 'message': 'Failed to delete employee'})
+            
+    except Exception as e:
+        print(f"Error deleting employee: {e}")
+        return jsonify({'success': False, 'message': f'Error deleting employee: {str(e)}'})
+
+@app.route('/api/modify_employee', methods=['POST'])
+@login_required
+def modify_employee():
+    """Modify employee information with password authentication."""
+    if not auth or not db:
+        return jsonify({'success': False, 'message': 'Authentication system not available'})
+    
+    try:
+        data = request.get_json()
+        
+        # Validate required fields - now accepting either employee_id or mac_address
+        if not all(key in data for key in ['password']) or not any(key in data for key in ['employee_id', 'mac_address']):
+            return jsonify({'success': False, 'message': 'Missing required fields'})
+        
+        # Authenticate admin password
+        if not auth.authenticate_admin(data['password']):
+            return jsonify({'success': False, 'message': 'Invalid admin password'})
+        
+        # Get current employee info - handle both employee_id and mac_address
+        if 'employee_id' in data and isinstance(data['employee_id'], int):
+            employee = db.get_employee_by_id(data['employee_id'])
+        else:
+            # If employee_id is actually a MAC address or mac_address is provided
+            mac_address = data.get('employee_id', data.get('mac_address'))
+            employee = db.get_employee_by_mac(mac_address)
+        
+        if not employee:
+            return jsonify({'success': False, 'message': 'Employee not found'})
+        
+        # Prepare update data
+        update_data = {}
+        if 'name' in data and data['name'].strip():
+            update_data['name'] = data['name'].strip()
+        if 'mac_address' in data and data['mac_address'].strip():
+            new_mac = data['mac_address'].lower().strip()
+            if not is_valid_mac_format(new_mac):
+                return jsonify({'success': False, 'message': 'Invalid MAC address format. Use: aa-bb-cc-dd-ee-ff'})
+            update_data['mac_address'] = new_mac
+        if 'picture_path' in data:
+            update_data['picture_path'] = data['picture_path'].strip() or None
+        
+        if not update_data:
+            return jsonify({'success': False, 'message': 'No valid fields to update'})
+        
+        # Update employee in database
+        success = db.update_employee(employee['id'], **update_data)
+        
+        if success:
+            # Update employees.json for persistence
+            update_employee_in_json(employee['mac_address'], update_data)
+            
+            # Reload tracker employees
+            tracker.employees = tracker.load_employees()
+            tracker._initialize_employee_states()
+            
+            return jsonify({'success': True, 'message': 'Employee updated successfully'})
+        else:
+            return jsonify({'success': False, 'message': 'Failed to update employee'})
+            
+    except Exception as e:
+        print(f"Error modifying employee: {e}")
+        return jsonify({'success': False, 'message': f'Error modifying employee: {str(e)}'})
+
+@app.route('/api/change_password', methods=['POST'])
+@login_required
+def change_password():
+    """Change the admin password."""
+    if not auth:
+        return jsonify({'success': False, 'message': 'Authentication system not available'})
+    
+    try:
+        data = request.get_json()
+        
+        if not all(key in data for key in ['currentPassword', 'newPassword']):
+            return jsonify({'success': False, 'message': 'Missing required fields'})
+        
+        success = auth.change_admin_password(data['currentPassword'], data['newPassword'])
+        
+        if success:
+            return jsonify({'success': True, 'message': 'Password changed successfully'})
+        else:
+            return jsonify({'success': False, 'message': 'Current password is incorrect'})
+            
+    except Exception as e:
+        print(f"Error changing password: {e}")
+        return jsonify({'success': False, 'message': f'Error changing password: {str(e)}'})
+
+def is_valid_mac_format(mac):
+    """Validate MAC address format."""
+    if not mac:
+        return False
+    
+    # Check for correct format: aa-bb-cc-dd-ee-ff
+    parts = mac.split('-')
+    if len(parts) != 6:
+        return False
+    
+    for part in parts:
+        if len(part) != 2:
+            return False
+        try:
+            int(part, 16)
+        except ValueError:
+            return False
+    
+    return True
+
+def update_employees_json(name, mac_address, picture_path):
+    """Update the employees.json file with new employee."""
+    try:
+        # Read existing employees
+        employees = []
+        if os.path.exists('employees.json'):
+            with open('employees.json', 'r') as f:
+                employees = json.load(f)
+        
+        # Check if employee already exists
+        for emp in employees:
+            if emp.get('mac_address') == mac_address:
+                return  # Already exists
+        
+        # Add new employee
+        new_employee = {
+            'name': name,
+            'mac_address': mac_address,
+            'picture': picture_path if picture_path else f"static/img/{name.lower().replace(' ', '_')}.jpg"
+        }
+        employees.append(new_employee)
+        
+        # Write back to file
+        with open('employees.json', 'w') as f:
+            json.dump(employees, f, indent=2)
+            
+    except Exception as e:
+        print(f"Error updating employees.json: {e}")
+
+def remove_employee_from_json(mac_address):
+    """Remove an employee from employees.json file."""
+    try:
+        if not os.path.exists('employees.json'):
+            return
+        
+        # Read existing employees
+        with open('employees.json', 'r') as f:
+            employees = json.load(f)
+        
+        # Remove employee with matching MAC address
+        employees = [emp for emp in employees if emp.get('mac_address') != mac_address]
+        
+        # Write back to file
+        with open('employees.json', 'w') as f:
+            json.dump(employees, f, indent=2)
+            
+    except Exception as e:
+        print(f"Error removing employee from employees.json: {e}")
+
+def update_employee_in_json(old_mac_address, update_data):
+    """Update an employee in employees.json file."""
+    try:
+        if not os.path.exists('employees.json'):
+            return
+        
+        # Read existing employees
+        with open('employees.json', 'r') as f:
+            employees = json.load(f)
+        
+        # Find and update employee
+        for emp in employees:
+            if emp.get('mac_address') == old_mac_address:
+                if 'name' in update_data:
+                    emp['name'] = update_data['name']
+                if 'mac_address' in update_data:
+                    emp['mac_address'] = update_data['mac_address']
+                if 'picture_path' in update_data:
+                    emp['picture'] = update_data['picture_path'] or f"static/img/{emp['name'].lower().replace(' ', '_')}.jpg"
+                break
+        
+        # Write back to file
+        with open('employees.json', 'w') as f:
+            json.dump(employees, f, indent=2)
+            
+    except Exception as e:
+        print(f"Error updating employee in employees.json: {e}")
+
+def get_time_ago(timestamp):
+    """Get human-readable time difference."""
+    now = datetime.now()
+    diff = now - timestamp
+    
+    if diff.days > 0:
+        return f"{diff.days} day{'s' if diff.days > 1 else ''} ago"
+    elif diff.seconds > 3600:
+        hours = diff.seconds // 3600
+        return f"{hours} hour{'s' if hours > 1 else ''} ago"
+    elif diff.seconds > 60:
+        minutes = diff.seconds // 60
+        return f"{minutes} minute{'s' if minutes > 1 else ''} ago"
+    else:
+        return "Just now"
+
+def format_duration(seconds):
+    """Format duration in seconds to HH:MM:SS."""
+    if seconds is None:
+        return "00:00:00"
+    
+    hours = seconds // 3600
+    minutes = (seconds % 3600) // 60
+    seconds = seconds % 60
+    
+    return f"{hours:02d}:{minutes:02d}:{seconds:02d}"
+
+def run_console_mode():
+    """Run the application in console mode (no web interface)."""
+    print("Starting in console mode...")
+    print("Press Ctrl+C to stop\n")
+    
+    initialize_system()
+    
+    try:
+        tracker.start_monitoring()
+    except KeyboardInterrupt:
+        print("\nShutting down...")
+        sys.exit(0)
+
+def run_web_mode(port=5000):
+    """Run the application with web interface."""
+    print("Starting integrated web interface mode...")
+    
+    # Initialize the system
+    initialize_system()
+    
+    print(f"\nWeb interface will be available at:")
+    print(f"  Local:    http://localhost:{port}")
+    print(f"  Network:  http://0.0.0.0:{port}")
+    print("\nPress Ctrl+C to stop\n")
+    
+    # Note about admin privileges
+    print("Note: This application attempts to run without administrator privileges.")
+    print("If network scanning fails, you may need to run as administrator/root.")
+    print("Employee management features work regardless of privilege level.\n")
+    
+    # Start monitoring automatically
+    global is_monitoring
+    is_monitoring = True
+    monitoring_thread = threading.Thread(target=monitoring_loop, daemon=True)
+    monitoring_thread.start()
+    
+    try:
+        app.run(host='0.0.0.0', port=port, debug=False)
+    except KeyboardInterrupt:
+        print("\nShutting down...")
+        is_monitoring = False
+        sys.exit(0)
+
+def show_status():
+    """Show current system status."""
+    print("System Status:")
+    print("=" * 50)
+    
+    # Initialize system for status check
+    initialize_system()
+    
+    # Check database
+    try:
+        employees = db.get_all_employees()
+        print(f"Database: Connected")
+        print(f"Employees: {len(employees)}")
+        
+        for emp in employees:
+            picture_info = f" (Picture: {emp['picture_path']})" if emp['picture_path'] else ""
+            print(f"  - {emp['name']} ({emp['mac_address']}){picture_info}")
+        
+        # Show recent events
+        recent_events = db.get_attendance_events(limit=5)
+        print(f"\nRecent Events: {len(recent_events)}")
+        for event in recent_events[-5:]:
+            print(f"  {event['timestamp']}: {event['employee_name']} - {event['event_type']}")
+            
+        # Show today's summary
+        today = datetime.now().strftime('%Y-%m-%d')
+        summary = db.get_daily_summary(today)
+        print(f"\nToday's Summary ({today}):")
+        for emp in summary:
+            print(f"  {emp['name']}: {emp['status']} | In: {emp['time_in'] or 'N/A'} | Out: {emp['time_out'] or 'N/A'}")
+            
+    except Exception as e:
+        print(f"Database: Error - {e}")
+    
+    # Check config
+    try:
+        import json
+        with open('config.json', 'r') as f:
+            config = json.load(f)
+        print(f"\nConfiguration:")
+        print(f"  Scan Interval: {config.get('scan_interval_seconds', 60)} seconds")
+        print(f"  Web Port: {config.get('web_port', 5000)}")
+        print(f"  Office Timeout: {config.get('office_timeout_hour', 17)}:{config.get('office_timeout_minute', 0):02d}")
+    except Exception as e:
+        print(f"\nConfiguration: Error - {e}")
+    
+    # Check employees.json
+    try:
+        with open('employees.json', 'r') as f:
+            employees_json = json.load(f)
+        print(f"\nEmployees JSON File:")
+        print(f"  Configured Employees: {len(employees_json)}")
+        for emp in employees_json:
+            print(f"  - {emp.get('name', 'Unknown')} ({emp.get('mac_address', 'Unknown')})")
+    except Exception as e:
+        print(f"\nEmployees JSON: Error - {e}")
+    
+    # Check authentication
+    try:
+        print(f"\nAuthentication:")
+        print(f"  Admin Password: {auth.get_current_admin_password_hint()}")
+    except Exception as e:
+        print(f"\nAuthentication: Error - {e}")
+
+def main():
+    """Main application entry point."""
+    parser = argparse.ArgumentParser(
+        description='WiFi-Based Attendance & Break Tracker - Employee Management Version',
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog="""
+Examples:
+  python main.py                    # Run with web interface (default)
+  python main.py --console          # Run in console mode only
+  python main.py --status           # Show system status
+  python main.py --port 8080        # Run web interface on port 8080
+  
+New Features:
+  - Employee management (add, search, password protection)
+  - Non-admin operation (where possible)
+  - Enhanced web interface with employee pictures
+  - Separate employees.json for better data management
+  - Password-protected employee addition (default: 1122)
+  
+For more information, see README.md
+        """
+    )
+    
+    parser.add_argument(
+        '--console', 
+        action='store_true',
+        help='Run in console mode without web interface'
+    )
+    
+    parser.add_argument(
+        '--status',
+        action='store_true',
+        help='Show system status and exit'
+    )
+    
+    parser.add_argument(
+        '--port',
+        type=int,
+        default=5000,
+        help='Port for web interface (default: 5000)'
+    )
+    
+    args = parser.parse_args()
+    
+    # Print banner
+    print_banner()
+    
+    # Check requirements
+    issues = check_requirements()
+    if issues:
+        print("⚠️  System Requirements Issues:")
+        for issue in issues:
+            print(f"   - {issue}")
+        print()
+        
+        # Create missing files with defaults
+        if "config.json file not found" in str(issues):
+            print("Creating default config.json...")
+            default_config = {
+                "scan_interval_seconds": 60,
+                "web_port": 5000,
+                "office_timeout_hour": 17,
+                "office_timeout_minute": 0
+            }
+            with open('config.json', 'w') as f:
+                json.dump(default_config, f, indent=2)
+        
+        if "employees.json file not found" in str(issues):
+            print("Creating default employees.json...")
+            default_employees = [
+                {
+                    "name": "Sample Employee",
+                    "mac_address": "aa-bb-cc-dd-ee-ff",
+                    "picture": "static/img/sample.jpg"
+                }
+            ]
+            with open('employees.json', 'w') as f:
+                json.dump(default_employees, f, indent=2)
+        
+        print("Default files created. Please edit them with your actual data.\n")
+    
+    # Handle different modes
+    if args.status:
+        show_status()
+        return
+    
+    if args.console:
+        run_console_mode()
+    else:
+        run_web_mode(args.port)
+
+if __name__ == "__main__":
+    main()
+

requirements.txt

@@ -0,0 +1,4 @@
+flask>=2.0.0
+flask-cors>=3.0.0
+bcrypt>=4.0.0
+

run.bat

@@ -0,0 +1,30 @@
+@echo off
+echo ========================================
+echo WiFi Attendance Tracker
+echo ========================================
+echo.
+
+REM Check if running as administrator
+net session >nul 2>&1
+if errorlevel 1 (
+    echo ERROR: This application must be run as Administrator
+    echo.
+    echo Please:
+    echo   1. Right-click Command Prompt
+    echo   2. Select "Run as Administrator"
+    echo   3. Navigate to this folder
+    echo   4. Run this script again
+    echo.
+    pause
+    exit /b 1
+)
+
+echo Starting WiFi Attendance Tracker...
+echo Web interface will be available at: http://localhost:5000
+echo Press Ctrl+C to stop
+echo.
+
+python main.py
+
+pause
+

setup.bat

@@ -0,0 +1,36 @@
+@echo off
+echo ========================================
+echo WiFi Attendance Tracker Setup
+echo ========================================
+echo.
+
+REM Check if Python is installed
+python --version >nul 2>&1
+if errorlevel 1 (
+    echo ERROR: Python is not installed or not in PATH
+    echo Please install Python 3.6+ from https://python.org
+    pause
+    exit /b 1
+)
+
+echo Python found. Installing dependencies...
+pip install -r requirements.txt
+
+if errorlevel 1 (
+    echo ERROR: Failed to install dependencies
+    pause
+    exit /b 1
+)
+
+echo.
+echo Setup completed successfully!
+echo.
+echo To run the application:
+echo   1. Right-click Command Prompt and select "Run as Administrator"
+echo   2. Navigate to this folder
+echo   3. Run: python main.py
+echo.
+echo The web interface will be available at: http://localhost:5000
+echo.
+pause
+

static/css/style.css

@@ -0,0 +1,899 @@
+/* WiFi Attendance Tracker - Advanced Styles */
+
+:root {
+    --primary-color: #2563eb;
+    --primary-hover: #1d4ed8;
+    --secondary-color: #64748b;
+    --success-color: #059669;
+    --success-hover: #047857;
+    --danger-color: #dc2626;
+    --danger-hover: #b91c1c;
+    --warning-color: #d97706;
+    --info-color: #0891b2;
+    --light-bg: #f8fafc;
+    --card-bg: #ffffff;
+    --border-color: #e2e8f0;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --text-muted: #94a3b8;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --radius: 8px;
+    --radius-lg: 12px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    min-height: 100vh;
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Header */
+.header {
+    background: var(--card-bg);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    margin-bottom: 24px;
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.header-content h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.header-content h1 i {
+    color: var(--primary-color);
+    margin-right: 12px;
+}
+
+.subtitle {
+    color: var(--text-secondary);
+    font-size: 1rem;
+}
+
+.header-actions {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+/* Status Bar */
+.status-bar {
+    background: var(--card-bg);
+    border-radius: var(--radius);
+    padding: 16px 24px;
+    margin-bottom: 24px;
+    box-shadow: var(--shadow-md);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.status-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.status-label {
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.status-value {
+    color: var(--text-primary);
+    font-weight: 500;
+}
+
+/* Control Panel */
+.control-panel {
+    background: var(--card-bg);
+    border-radius: var(--radius);
+    padding: 20px;
+    margin-bottom: 24px;
+    box-shadow: var(--shadow-md);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.control-group {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.search-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.search-input {
+    padding: 10px 16px;
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius);
+    font-size: 14px;
+    width: 250px;
+    transition: all 0.2s ease;
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
+}
+
+/* Buttons */
+.btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: var(--radius);
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-primary {
+    background: var(--primary-color);
+    color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+    background: var(--primary-hover);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+}
+
+.btn-secondary {
+    background: var(--secondary-color);
+    color: white;
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: #475569;
+    transform: translateY(-1px);
+}
+
+.btn-success {
+    background: var(--success-color);
+    color: white;
+}
+
+.btn-success:hover:not(:disabled) {
+    background: var(--success-hover);
+    transform: translateY(-1px);
+}
+
+.btn-danger {
+    background: var(--danger-color);
+    color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+    background: var(--danger-hover);
+    transform: translateY(-1px);
+}
+
+.btn-info {
+    background: var(--info-color);
+    color: white;
+}
+
+.btn-info:hover:not(:disabled) {
+    background: #0e7490;
+    transform: translateY(-1px);
+}
+
+.btn-outline {
+    background: transparent;
+    color: var(--text-primary);
+    border: 2px solid var(--border-color);
+}
+
+.btn-outline:hover:not(:disabled) {
+    background: var(--light-bg);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+/* Statistics Cards */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    margin-bottom: 24px;
+}
+
+.stat-card {
+    background: var(--card-bg);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    box-shadow: var(--shadow-md);
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    transition: all 0.2s ease;
+}
+
+.stat-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.stat-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: white;
+}
+
+.stat-card.present .stat-icon {
+    background: var(--success-color);
+}
+
+.stat-card.absent .stat-icon {
+    background: var(--danger-color);
+}
+
+.stat-card.break .stat-icon {
+    background: var(--warning-color);
+}
+
+.stat-card.timeout .stat-icon {
+    background: var(--info-color);
+}
+
+.stat-content h3 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.stat-content p {
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+/* Main Grid */
+.main-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    margin-bottom: 24px;
+}
+
+/* Panels */
+.panel {
+    background: var(--card-bg);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    overflow: hidden;
+}
+
+.panel-header {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.panel-header h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.panel-header h2 i {
+    color: var(--primary-color);
+}
+
+.panel-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.panel-content {
+    padding: 24px;
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+/* Employee List */
+.employee-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.employee-card {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.employee-card:hover {
+    border-color: var(--primary-color);
+    box-shadow: var(--shadow-sm);
+    transform: translateY(-1px);
+}
+
+.employee-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: var(--light-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    overflow: hidden;
+}
+
+.employee-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.employee-info {
+    flex: 1;
+}
+
+.employee-name {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.employee-mac {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-family: 'Courier New', monospace;
+}
+
+.employee-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.status-badge {
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.status-badge.present {
+    background: #dcfce7;
+    color: var(--success-color);
+}
+
+.status-badge.absent {
+    background: #fef2f2;
+    color: var(--danger-color);
+}
+
+.status-badge.break {
+    background: #fef3c7;
+    color: var(--warning-color);
+}
+
+.status-badge.timeout {
+    background: #e0f2fe;
+    color: var(--info-color);
+}
+
+.employee-time {
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+/* Events List */
+.events-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.event-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border-left: 4px solid var(--border-color);
+    background: var(--light-bg);
+    border-radius: 0 var(--radius) var(--radius) 0;
+}
+
+.event-item.time_in {
+    border-left-color: var(--success-color);
+}
+
+.event-item.time_out {
+    border-left-color: var(--danger-color);
+}
+
+.event-item.break_start {
+    border-left-color: var(--warning-color);
+}
+
+.event-item.break_end {
+    border-left-color: var(--info-color);
+}
+
+.event-item.timeout_5pm {
+    border-left-color: var(--secondary-color);
+}
+
+.event-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: white;
+}
+
+.event-item.time_in .event-icon {
+    background: var(--success-color);
+}
+
+.event-item.time_out .event-icon {
+    background: var(--danger-color);
+}
+
+.event-item.break_start .event-icon {
+    background: var(--warning-color);
+}
+
+.event-item.break_end .event-icon {
+    background: var(--info-color);
+}
+
+.event-item.timeout_5pm .event-icon {
+    background: var(--secondary-color);
+}
+
+.event-content {
+    flex: 1;
+}
+
+.event-name {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 2px;
+}
+
+.event-type {
+    font-size: 12px;
+    color: var(--text-secondary);
+    text-transform: capitalize;
+}
+
+.event-time {
+    font-size: 12px;
+    color: var(--text-muted);
+    text-align: right;
+}
+
+/* Summary Table */
+.summary-table {
+    overflow-x: auto;
+}
+
+.summary-table table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+}
+
+.summary-table th,
+.summary-table td {
+    padding: 12px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.summary-table th {
+    background: var(--light-bg);
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    font-size: 12px;
+    letter-spacing: 0.5px;
+}
+
+.summary-table tr:hover {
+    background: var(--light-bg);
+}
+
+/* Form Elements */
+.date-filter,
+.date-input {
+    padding: 8px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    font-size: 14px;
+    background: white;
+}
+
+.date-filter:focus,
+.date-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
+}
+
+/* Modals */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    backdrop-filter: blur(4px);
+}
+
+.modal.show {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: fadeIn 0.2s ease;
+}
+
+.modal-content {
+    background: var(--card-bg);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    animation: slideIn 0.3s ease;
+}
+
+.modal-header {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: var(--text-muted);
+    padding: 4px;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+    background: var(--light-bg);
+    color: var(--text-primary);
+}
+
+.modal-body {
+    padding: 24px;
+}
+
+.modal-footer {
+    padding: 16px 24px;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+/* Form Styles */
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.form-group input {
+    width: 100%;
+    padding: 12px 16px;
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius);
+    font-size: 14px;
+    transition: all 0.2s ease;
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
+}
+
+.form-group small {
+    display: block;
+    margin-top: 4px;
+    color: var(--text-muted);
+    font-size: 12px;
+}
+
+/* Settings */
+.settings-section {
+    margin-bottom: 32px;
+}
+
+.settings-section:last-child {
+    margin-bottom: 0;
+}
+
+.settings-section h4 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.info-grid {
+    display: grid;
+    gap: 12px;
+}
+
+.info-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    background: var(--light-bg);
+    border-radius: var(--radius);
+}
+
+.info-label {
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.info-value {
+    color: var(--text-primary);
+    font-weight: 500;
+}
+
+/* Notifications */
+.notifications {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1100;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.notification {
+    background: var(--card-bg);
+    border-radius: var(--radius);
+    padding: 16px 20px;
+    box-shadow: var(--shadow-lg);
+    border-left: 4px solid var(--primary-color);
+    min-width: 300px;
+    animation: slideInRight 0.3s ease;
+}
+
+.notification.success {
+    border-left-color: var(--success-color);
+}
+
+.notification.error {
+    border-left-color: var(--danger-color);
+}
+
+.notification.warning {
+    border-left-color: var(--warning-color);
+}
+
+.notification-title {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.notification-message {
+    color: var(--text-secondary);
+    font-size: 14px;
+}
+
+/* Loading States */
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    color: var(--text-muted);
+    font-style: italic;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 12px;
+    }
+    
+    .header {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .header-actions {
+        justify-content: center;
+    }
+    
+    .status-bar {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .control-panel {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .control-group {
+        justify-content: center;
+    }
+    
+    .search-container {
+        flex-direction: column;
+    }
+    
+    .search-input {
+        width: 100%;
+    }
+    
+    .main-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .modal-content {
+        width: 95%;
+        margin: 20px;
+    }
+    
+    .employee-card {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .employee-status {
+        justify-content: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .panel-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .panel-actions {
+        justify-content: center;
+    }
+}
+

static/js/script.js

@@ -0,0 +1,712 @@
+// WiFi Attendance Tracker - Advanced JavaScript
+
+class AttendanceTracker {
+    constructor() {
+        this.isMonitoring = false;
+        this.updateInterval = null;
+        this.employees = [];
+        this.events = [];
+        this.summary = [];
+        this.searchQuery = '';
+        
+        this.init();
+    }
+    
+    init() {
+        this.setupEventListeners();
+        this.loadInitialData();
+        this.startAutoUpdate();
+        this.updateCurrentTime();
+        
+        // Set today's date in summary date input
+        const today = new Date().toISOString().split('T')[0];
+        document.getElementById('summaryDate').value = today;
+    }
+    
+    setupEventListeners() {
+        // Control buttons
+        document.getElementById('startBtn').addEventListener('click', () => this.startMonitoring());
+        document.getElementById('stopBtn').addEventListener('click', () => this.stopMonitoring());
+        document.getElementById('refreshBtn').addEventListener('click', () => this.refreshData());
+        document.getElementById('exportBtn').addEventListener('click', () => this.exportCSV());
+        
+        // Search functionality
+        document.getElementById('searchBtn').addEventListener('click', () => this.performSearch());
+        document.getElementById('clearSearchBtn').addEventListener('click', () => this.clearSearch());
+        document.getElementById('searchInput').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') this.performSearch();
+        });
+        document.getElementById('searchInput').addEventListener('input', (e) => {
+            if (e.target.value === '') this.clearSearch();
+        });
+        
+        // Modal buttons
+        document.getElementById('addEmployeeBtn').addEventListener('click', () => this.openModal('addEmployeeModal'));
+        document.getElementById('settingsBtn').addEventListener('click', () => this.openModal('settingsModal'));
+        
+        // Form submissions
+        document.getElementById('addEmployeeForm').addEventListener('submit', (e) => this.handleAddEmployee(e));
+        document.getElementById('changePasswordForm').addEventListener('submit', (e) => this.handleChangePassword(e));
+        document.getElementById('deleteEmployeeForm').addEventListener('submit', (e) => this.handleDeleteEmployee(e));
+        document.getElementById('modifyEmployeeForm').addEventListener('submit', (e) => this.handleModifyEmployee(e));
+        
+        // Summary date change
+        document.getElementById('summaryDate').addEventListener('change', () => this.loadDailySummary());
+        document.getElementById('summaryRefreshBtn').addEventListener('click', () => this.loadDailySummary());
+        
+        // Event date filter
+        document.getElementById('eventDateFilter').addEventListener('change', () => this.loadEvents());
+        
+        // Modal close buttons
+        document.querySelectorAll('.modal-close').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const modal = e.target.closest('.modal');
+                this.closeModal(modal.id);
+            });
+        });
+        
+        // Close modal when clicking outside
+        document.querySelectorAll('.modal').forEach(modal => {
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    this.closeModal(modal.id);
+                }
+            });
+        });
+    }
+    
+    async loadInitialData() {
+        await Promise.all([
+            this.loadSystemStatus(),
+            this.loadEmployees(),
+            this.loadEvents(),
+            this.loadDailySummary(),
+            this.loadSummaryStats()
+        ]);
+    }
+    
+    async loadSystemStatus() {
+        try {
+            const response = await fetch('/api/status');
+            const status = await response.json();
+            
+            document.getElementById('systemStatus').textContent = status.is_monitoring ? 'Monitoring' : 'Stopped';
+            document.getElementById('systemStatus').className = `status-value ${status.is_monitoring ? 'monitoring' : 'stopped'}`;
+            document.getElementById('employeeCount').textContent = status.employee_count;
+            document.getElementById('scanInterval').textContent = `${status.scan_interval} seconds`;
+            document.getElementById('officeTimeout').textContent = status.office_timeout;
+            
+            this.isMonitoring = status.is_monitoring;
+            this.updateControlButtons();
+            
+        } catch (error) {
+            console.error('Error loading system status:', error);
+            this.showNotification('Error loading system status', 'error');
+        }
+    }
+    
+    async loadEmployees() {
+        try {
+            const response = await fetch('/api/employees');
+            this.employees = await response.json();
+            this.renderEmployees();
+        } catch (error) {
+            console.error('Error loading employees:', error);
+            this.showNotification('Error loading employees', 'error');
+        }
+    }
+    
+    async loadEvents() {
+        try {
+            const dateFilter = document.getElementById('eventDateFilter').value;
+            const url = dateFilter ? `/api/attendance_events?date=${dateFilter}&limit=50` : '/api/attendance_events?limit=50';
+            const response = await fetch(url);
+            this.events = await response.json();
+            this.renderEvents();
+        } catch (error) {
+            console.error('Error loading events:', error);
+            this.showNotification('Error loading events', 'error');
+        }
+    }
+    
+    async loadDailySummary() {
+        try {
+            const date = document.getElementById('summaryDate').value;
+            const response = await fetch(`/api/daily_summary?date=${date}`);
+            this.summary = await response.json();
+            this.renderDailySummary();
+        } catch (error) {
+            console.error('Error loading daily summary:', error);
+            this.showNotification('Error loading daily summary', 'error');
+        }
+    }
+    
+    async loadSummaryStats() {
+        try {
+            const date = document.getElementById('summaryDate').value;
+            const response = await fetch(`/api/summary_stats?date=${date}`);
+            const stats = await response.json();
+            
+            document.getElementById('presentCount').textContent = stats.present_count || 0;
+            document.getElementById('absentCount').textContent = stats.absent_count || 0;
+            document.getElementById('breakCount').textContent = stats.on_break_count || 0;
+            document.getElementById('timeoutCount').textContent = stats.timed_out_count || 0;
+            
+        } catch (error) {
+            console.error('Error loading summary stats:', error);
+        }
+    }
+    
+    renderEmployees() {
+        const container = document.getElementById('employeeList');
+        
+        if (this.employees.length === 0) {
+            container.innerHTML = '<div class="loading">No employees found</div>';
+            return;
+        }
+        
+        // Filter employees based on search query
+        const filteredEmployees = this.searchQuery 
+            ? this.employees.filter(emp => 
+                emp.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
+                emp.mac.toLowerCase().includes(this.searchQuery.toLowerCase())
+              )
+            : this.employees;
+        
+        if (filteredEmployees.length === 0) {
+            container.innerHTML = '<div class="loading">No employees match your search</div>';
+            return;
+        }
+        
+        container.innerHTML = filteredEmployees.map(employee => `
+            <div class="employee-card" onclick="attendanceTracker.showEmployeeDetails('${employee.mac}')">
+                <div class="employee-avatar">
+                    ${employee.picture ? 
+                        `<img src="${employee.picture}" alt="${employee.name}" onerror="this.style.display='none'; this.parentNode.textContent='${employee.name.charAt(0).toUpperCase()}'">` :
+                        employee.name.charAt(0).toUpperCase()
+                    }
+                </div>
+                <div class="employee-info">
+                    <div class="employee-name">${employee.name}</div>
+                    <div class="employee-mac">${employee.mac}</div>
+                </div>
+                <div class="employee-status">
+                    <span class="status-badge ${employee.status.toLowerCase().replace(' ', '')}">${employee.status}</span>
+                    <div class="employee-time">
+                        ${employee.time_in !== 'N/A' ? `In: ${employee.time_in}` : 'Not checked in'}
+                    </div>
+                </div>
+            </div>
+        `).join('');
+    }
+    
+    renderEvents() {
+        const container = document.getElementById('eventsList');
+        
+        if (this.events.length === 0) {
+            container.innerHTML = '<div class="loading">No recent events</div>';
+            return;
+        }
+        
+        container.innerHTML = this.events.map(event => `
+            <div class="event-item ${event.event_type}">
+                <div class="event-icon">
+                    <i class="fas ${this.getEventIcon(event.event_type)}"></i>
+                </div>
+                <div class="event-content">
+                    <div class="event-name">${event.employee_name}</div>
+                    <div class="event-type">${this.formatEventType(event.event_type)}</div>
+                </div>
+                <div class="event-time">${event.time_ago}</div>
+            </div>
+        `).join('');
+    }
+    
+    renderDailySummary() {
+        const container = document.getElementById('summaryTable');
+        
+        if (this.summary.length === 0) {
+            container.innerHTML = '<div class="loading">No summary data for selected date</div>';
+            return;
+        }
+        
+        container.innerHTML = `
+            <table>
+                <thead>
+                    <tr>
+                        <th>Employee</th>
+                        <th>Time In</th>
+                        <th>Time Out</th>
+                        <th>Work Duration</th>
+                        <th>Break Duration</th>
+                        <th>Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    ${this.summary.map(emp => `
+                        <tr>
+                            <td>
+                                <div style="display: flex; align-items: center; gap: 8px;">
+                                    <div class="employee-avatar" style="width: 32px; height: 32px; font-size: 12px;">
+                                        ${emp.name.charAt(0).toUpperCase()}
+                                    </div>
+                                    <div>
+                                        <div style="font-weight: 600;">${emp.name}</div>
+                                        <div style="font-size: 11px; color: var(--text-muted);">${emp.mac_address}</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td>${emp.time_in || 'N/A'}</td>
+                            <td>${emp.time_out || 'N/A'}</td>
+                            <td>${emp.total_work_formatted}</td>
+                            <td>${emp.total_break_formatted}</td>
+                            <td><span class="status-badge ${emp.status.toLowerCase().replace(' ', '')}">${emp.status}</span></td>
+                        </tr>
+                    `).join('')}
+                </tbody>
+            </table>
+        `;
+    }
+    
+    getEventIcon(eventType) {
+        const icons = {
+            'time_in': 'fa-sign-in-alt',
+            'time_out': 'fa-sign-out-alt',
+            'break_start': 'fa-coffee',
+            'break_end': 'fa-play',
+            'timeout_5pm': 'fa-clock'
+        };
+        return icons[eventType] || 'fa-circle';
+    }
+    
+    formatEventType(eventType) {
+        const formats = {
+            'time_in': 'Time In',
+            'time_out': 'Time Out',
+            'break_start': 'Break Start',
+            'break_end': 'Break End',
+            'timeout_5pm': '5 PM Timeout'
+        };
+        return formats[eventType] || eventType;
+    }
+    
+    async startMonitoring() {
+        try {
+            const response = await fetch('/api/start_monitoring', { method: 'POST' });
+            const result = await response.json();
+            
+            if (result.success) {
+                this.isMonitoring = true;
+                this.updateControlButtons();
+                this.showNotification('Monitoring started successfully', 'success');
+                await this.loadSystemStatus();
+            } else {
+                this.showNotification(result.message, 'error');
+            }
+        } catch (error) {
+            console.error('Error starting monitoring:', error);
+            this.showNotification('Error starting monitoring', 'error');
+        }
+    }
+    
+    async stopMonitoring() {
+        try {
+            const response = await fetch('/api/stop_monitoring', { method: 'POST' });
+            const result = await response.json();
+            
+            if (result.success) {
+                this.isMonitoring = false;
+                this.updateControlButtons();
+                this.showNotification('Monitoring stopped', 'warning');
+                await this.loadSystemStatus();
+            } else {
+                this.showNotification(result.message, 'error');
+            }
+        } catch (error) {
+            console.error('Error stopping monitoring:', error);
+            this.showNotification('Error stopping monitoring', 'error');
+        }
+    }
+    
+    async refreshData() {
+        document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();
+        await this.loadInitialData();
+        this.showNotification('Data refreshed', 'success');
+    }
+    
+    async exportCSV() {
+        try {
+            const date = document.getElementById('summaryDate').value;
+            const response = await fetch(`/api/export_csv?date=${date}`);
+            const result = await response.json();
+            
+            if (result.success) {
+                this.showNotification('CSV exported successfully', 'success');
+            } else {
+                this.showNotification(result.message, 'error');
+            }
+        } catch (error) {
+            console.error('Error exporting CSV:', error);
+            this.showNotification('Error exporting CSV', 'error');
+        }
+    }
+    
+    performSearch() {
+        this.searchQuery = document.getElementById('searchInput').value.trim();
+        this.renderEmployees();
+        
+        if (this.searchQuery) {
+            this.showNotification(`Searching for: ${this.searchQuery}`, 'info');
+        }
+    }
+    
+    clearSearch() {
+        this.searchQuery = '';
+        document.getElementById('searchInput').value = '';
+        this.renderEmployees();
+    }
+    
+    updateControlButtons() {
+        const startBtn = document.getElementById('startBtn');
+        const stopBtn = document.getElementById('stopBtn');
+        
+        startBtn.disabled = this.isMonitoring;
+        stopBtn.disabled = !this.isMonitoring;
+    }
+    
+    startAutoUpdate() {
+        // Update data every 10 seconds
+        this.updateInterval = setInterval(() => {
+            if (this.isMonitoring) {
+                this.loadEmployees();
+                this.loadEvents();
+                this.loadSummaryStats();
+            }
+        }, 10000);
+    }
+    
+    updateCurrentTime() {
+        const updateTime = () => {
+            const now = new Date();
+            document.getElementById('currentTime').textContent = now.toLocaleTimeString();
+        };
+        
+        updateTime();
+        setInterval(updateTime, 1000);
+    }
+    
+    openModal(modalId) {
+        const modal = document.getElementById(modalId);
+        modal.classList.add('show');
+        
+        // Load settings data if opening settings modal
+        if (modalId === 'settingsModal') {
+            this.loadSystemStatus();
+        }
+    }
+    
+    closeModal(modalId) {
+        const modal = document.getElementById(modalId);
+        modal.classList.remove('show');
+        
+        // Reset forms
+        const forms = modal.querySelectorAll('form');
+        forms.forEach(form => form.reset());
+    }
+    
+    async handleAddEmployee(e) {
+        e.preventDefault();
+        
+        const formData = new FormData(e.target);
+        const employeeData = {
+            name: formData.get('name'),
+            mac: formData.get('mac').toLowerCase(),
+            picture: formData.get('picture'),
+            password: formData.get('password')
+        };
+        
+        try {
+            const response = await fetch('/api/add_employee', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(employeeData)
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                this.showNotification('Employee added successfully', 'success');
+                this.closeModal('addEmployeeModal');
+                await this.loadEmployees();
+                await this.loadSystemStatus();
+            } else {
+                this.showNotification(result.message, 'error');
+            }
+        } catch (error) {
+            console.error('Error adding employee:', error);
+            this.showNotification('Error adding employee', 'error');
+        }
+    }
+    
+    async handleChangePassword(e) {
+        e.preventDefault();
+        
+        const formData = new FormData(e.target);
+        const newPassword = formData.get('newPassword');
+        const confirmPassword = formData.get('confirmPassword');
+        
+        if (newPassword !== confirmPassword) {
+            this.showNotification('Passwords do not match', 'error');
+            return;
+        }
+        
+        const passwordData = {
+            currentPassword: formData.get('currentPassword'),
+            newPassword: newPassword
+        };
+        
+        try {
+            const response = await fetch('/api/change_password', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(passwordData)
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                this.showNotification('Password changed successfully', 'success');
+                this.closeModal('settingsModal');
+            } else {
+                this.showNotification(result.message, 'error');
+            }
+        } catch (error) {
+            console.error('Error changing password:', error);
+            this.showNotification('Error changing password', 'error');
+        }
+    }
+    
+    showEmployeeDetails(mac) {
+        const employee = this.employees.find(emp => emp.mac === mac);
+        if (!employee) return;
+        
+        const modal = document.getElementById('employeeDetailsModal');
+        const content = document.getElementById('employeeDetailsContent');
+        
+        content.innerHTML = `
+            <div style="text-align: center; margin-bottom: 20px;">
+                <div class="employee-avatar" style="width: 80px; height: 80px; font-size: 32px; margin: 0 auto 12px;">
+                    ${employee.picture ? 
+                        `<img src="${employee.picture}" alt="${employee.name}" style="width: 100%; height: 100%; object-fit: cover;">` :
+                        employee.name.charAt(0).toUpperCase()
+                    }
+                </div>
+                <h3>${employee.name}</h3>
+                <p style="color: var(--text-muted); font-family: monospace;">${employee.mac}</p>
+            </div>
+            
+            <div class="info-grid">
+                <div class="info-item">
+                    <span class="info-label">Current Status:</span>
+                    <span class="status-badge ${employee.status.toLowerCase().replace(' ', '')}">${employee.status}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Time In:</span>
+                    <span class="info-value">${employee.time_in}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Last Seen:</span>
+                    <span class="info-value">${employee.last_seen}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Is Present:</span>
+                    <span class="info-value">${employee.is_present ? 'Yes' : 'No'}</span>
+                </div>
+            </div>
+        `;
+        
+        this.openModal('employeeDetailsModal');
+        
+        // Store current employee for delete/modify operations
+        this.currentEmployee = employee;
+        
+        // Add event listeners for delete and modify buttons
+        document.getElementById('deleteEmployeeBtn').onclick = () => this.openDeleteEmployeeModal();
+        document.getElementById('modifyEmployeeBtn').onclick = () => this.openModifyEmployeeModal();
+    }
+    
+    openDeleteEmployeeModal() {
+        if (!this.currentEmployee) return;
+        
+        // Populate delete employee info
+        document.getElementById('deleteEmployeeInfo').innerHTML = `
+            <div style="text-align: center; padding: 15px; background: #fee; border: 1px solid #fcc; border-radius: 8px;">
+                <h4>${this.currentEmployee.name}</h4>
+                <p style="font-family: monospace; color: #666;">${this.currentEmployee.mac}</p>
+                <p style="color: #999;">Status: ${this.currentEmployee.status}</p>
+            </div>
+        `;
+        
+        // Clear password field
+        document.getElementById('deleteAdminPassword').value = '';
+        
+        this.closeModal('employeeDetailsModal');
+        this.openModal('deleteEmployeeModal');
+    }
+    
+    openModifyEmployeeModal() {
+        if (!this.currentEmployee) return;
+        
+        // Pre-fill the form with current employee data
+        document.getElementById('modifyEmployeeName').value = this.currentEmployee.name;
+        document.getElementById('modifyEmployeeMac').value = this.currentEmployee.mac;
+        document.getElementById('modifyEmployeePicture').value = this.currentEmployee.picture || '';
+        document.getElementById('modifyAdminPassword').value = '';
+        
+        this.closeModal('employeeDetailsModal');
+        this.openModal('modifyEmployeeModal');
+    }
+    
+    async handleDeleteEmployee(e) {
+        e.preventDefault();
+        
+        if (!this.currentEmployee) {
+            this.showNotification('No employee selected', 'error');
+            return;
+        }
+        
+        const formData = new FormData(e.target);
+        const password = formData.get('password');
+        
+        if (!password) {
+            this.showNotification('Please enter admin password', 'error');
+            return;
+        }
+        
+        try {
+            const response = await fetch('/api/delete_employee', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    employee_id: this.getEmployeeIdByMac(this.currentEmployee.mac),
+                    password: password
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                this.showNotification(result.message, 'success');
+                this.closeModal('deleteEmployeeModal');
+                await this.loadEmployees();
+                await this.loadSummaryStats();
+            } else {
+                this.showNotification(result.message, 'error');
+            }
+        } catch (error) {
+            console.error('Error deleting employee:', error);
+            this.showNotification('Error deleting employee', 'error');
+        }
+    }
+    
+    async handleModifyEmployee(e) {
+        e.preventDefault();
+        
+        if (!this.currentEmployee) {
+            this.showNotification('No employee selected', 'error');
+            return;
+        }
+        
+        const formData = new FormData(e.target);
+        const name = formData.get('name');
+        const mac_address = formData.get('mac_address');
+        const picture_path = formData.get('picture_path');
+        const password = formData.get('password');
+        
+        if (!password) {
+            this.showNotification('Please enter admin password', 'error');
+            return;
+        }
+        
+        if (!name || !mac_address) {
+            this.showNotification('Please fill in all required fields', 'error');
+            return;
+        }
+        
+        try {
+            const response = await fetch('/api/modify_employee', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    employee_id: this.getEmployeeIdByMac(this.currentEmployee.mac),
+                    name: name,
+                    mac_address: mac_address,
+                    picture_path: picture_path,
+                    password: password
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                this.showNotification(result.message, 'success');
+                this.closeModal('modifyEmployeeModal');
+                await this.loadEmployees();
+                await this.loadSummaryStats();
+            } else {
+                this.showNotification(result.message, 'error');
+            }
+        } catch (error) {
+            console.error('Error modifying employee:', error);
+            this.showNotification('Error modifying employee', 'error');
+        }
+    }
+    
+    getEmployeeIdByMac(mac) {
+        // Since we don't have employee ID in the frontend data, we'll need to get it from the API
+        // For now, we'll use the MAC address as identifier and let the backend handle the ID lookup
+        return mac;
+    }
+
+    showNotification(message, type = 'info') {
+        const container = document.getElementById('notifications');
+        const notification = document.createElement('div');
+        notification.className = `notification ${type}`;
+        
+        const title = type.charAt(0).toUpperCase() + type.slice(1);
+        notification.innerHTML = `
+            <div class="notification-title">${title}</div>
+            <div class="notification-message">${message}</div>
+        `;
+        
+        container.appendChild(notification);
+        
+        // Auto remove after 5 seconds
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, 5000);
+    }
+}
+
+// Global functions for modal management
+function closeModal(modalId) {
+    if (window.attendanceTracker) {
+        window.attendanceTracker.closeModal(modalId);
+    }
+}
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.attendanceTracker = new AttendanceTracker();
+});
+

templates/index.html

@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WiFi Attendance Tracker - Advanced</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-content">
+                <h1><i class="fas fa-wifi"></i> WiFi Attendance Tracker</h1>
+                <p class="subtitle">Advanced Employee Management & Time Tracking</p>
+            </div>
+            <div class="header-actions">
+                <button id="settingsBtn" class="btn btn-secondary">
+                    <i class="fas fa-cog"></i> Settings
+                </button>
+                <button id="addEmployeeBtn" class="btn btn-primary">
+                    <i class="fas fa-user-plus"></i> Add Employee
+                </button>
+            </div>
+        </header>
+
+        <!-- System Status -->
+        <div class="status-bar">
+            <div class="status-item">
+                <span class="status-label">System Status:</span>
+                <span id="systemStatus" class="status-value">Loading...</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label">Last Update:</span>
+                <span id="lastUpdate" class="status-value">Never</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label">Employees:</span>
+                <span id="employeeCount" class="status-value">0</span>
+            </div>
+        </div>
+
+        <!-- Control Panel -->
+        <div class="control-panel">
+            <div class="control-group">
+                <button id="startBtn" class="btn btn-success">
+                    <i class="fas fa-play"></i> Start Monitoring
+                </button>
+                <button id="stopBtn" class="btn btn-danger" disabled>
+                    <i class="fas fa-stop"></i> Stop Monitoring
+                </button>
+                <button id="refreshBtn" class="btn btn-info">
+                    <i class="fas fa-sync-alt"></i> Refresh Data
+                </button>
+            </div>
+            <div class="control-group">
+                <div class="search-container">
+                    <input type="text" id="searchInput" placeholder="Search employees..." class="search-input">
+                    <button id="searchBtn" class="btn btn-outline">
+                        <i class="fas fa-search"></i>
+                    </button>
+                    <button id="clearSearchBtn" class="btn btn-outline">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Statistics Cards -->
+        <div class="stats-grid">
+            <div class="stat-card present">
+                <div class="stat-icon">
+                    <i class="fas fa-user-check"></i>
+                </div>
+                <div class="stat-content">
+                    <h3 id="presentCount">0</h3>
+                    <p>Present</p>
+                </div>
+            </div>
+            <div class="stat-card absent">
+                <div class="stat-icon">
+                    <i class="fas fa-user-times"></i>
+                </div>
+                <div class="stat-content">
+                    <h3 id="absentCount">0</h3>
+                    <p>Absent</p>
+                </div>
+            </div>
+            <div class="stat-card break">
+                <div class="stat-icon">
+                    <i class="fas fa-coffee"></i>
+                </div>
+                <div class="stat-content">
+                    <h3 id="breakCount">0</h3>
+                    <p>On Break</p>
+                </div>
+            </div>
+            <div class="stat-card timeout">
+                <div class="stat-icon">
+                    <i class="fas fa-clock"></i>
+                </div>
+                <div class="stat-content">
+                    <h3 id="timeoutCount">0</h3>
+                    <p>Timed Out</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Content Grid -->
+        <div class="main-grid">
+            <!-- Employee Status -->
+            <div class="panel">
+                <div class="panel-header">
+                    <h2><i class="fas fa-users"></i> Employee Status</h2>
+                    <div class="panel-actions">
+                        <button id="exportBtn" class="btn btn-outline">
+                            <i class="fas fa-download"></i> Export CSV
+                        </button>
+                    </div>
+                </div>
+                <div class="panel-content">
+                    <div id="employeeList" class="employee-list">
+                        <div class="loading">Loading employees...</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Recent Events -->
+            <div class="panel">
+                <div class="panel-header">
+                    <h2><i class="fas fa-history"></i> Recent Events</h2>
+                    <div class="panel-actions">
+                        <select id="eventDateFilter" class="date-filter">
+                            <option value="">All Events</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="panel-content">
+                    <div id="eventsList" class="events-list">
+                        <div class="loading">Loading events...</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Daily Summary -->
+        <div class="panel">
+            <div class="panel-header">
+                <h2><i class="fas fa-calendar-day"></i> Daily Summary</h2>
+                <div class="panel-actions">
+                    <input type="date" id="summaryDate" class="date-input">
+                    <button id="summaryRefreshBtn" class="btn btn-outline">
+                        <i class="fas fa-sync-alt"></i> Refresh
+                    </button>
+                </div>
+            </div>
+            <div class="panel-content">
+                <div id="summaryTable" class="summary-table">
+                    <div class="loading">Loading daily summary...</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Employee Modal -->
+    <div id="addEmployeeModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3><i class="fas fa-user-plus"></i> Add New Employee</h3>
+                <button class="modal-close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <form id="addEmployeeForm">
+                    <div class="form-group">
+                        <label for="employeeName">Employee Name</label>
+                        <input type="text" id="employeeName" name="name" required placeholder="Enter employee name">
+                    </div>
+                    <div class="form-group">
+                        <label for="employeeMac">MAC Address</label>
+                        <input type="text" id="employeeMac" name="mac" required placeholder="aa-bb-cc-dd-ee-ff" pattern="[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}">
+                        <small>Format: aa-bb-cc-dd-ee-ff (lowercase with dashes)</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="employeePicture">Picture Path (Optional)</label>
+                        <input type="text" id="employeePicture" name="picture" placeholder="static/img/employee.jpg">
+                        <small>Path to employee picture file</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="adminPassword">Admin Password</label>
+                        <input type="password" id="adminPassword" name="password" required placeholder="Enter admin password">
+                        <small>Default password: 1122</small>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" onclick="closeModal('addEmployeeModal')">Cancel</button>
+                <button type="submit" form="addEmployeeForm" class="btn btn-primary">Add Employee</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3><i class="fas fa-cog"></i> Settings</h3>
+                <button class="modal-close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="settings-section">
+                    <h4>Change Admin Password</h4>
+                    <form id="changePasswordForm">
+                        <div class="form-group">
+                            <label for="currentPassword">Current Password</label>
+                            <input type="password" id="currentPassword" name="currentPassword" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="newPassword">New Password</label>
+                            <input type="password" id="newPassword" name="newPassword" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="confirmPassword">Confirm New Password</label>
+                            <input type="password" id="confirmPassword" name="confirmPassword" required>
+                        </div>
+                        <button type="submit" class="btn btn-primary">Change Password</button>
+                    </form>
+                </div>
+                <div class="settings-section">
+                    <h4>System Information</h4>
+                    <div class="info-grid">
+                        <div class="info-item">
+                            <span class="info-label">Scan Interval:</span>
+                            <span id="scanInterval" class="info-value">60 seconds</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="info-label">Office Timeout:</span>
+                            <span id="officeTimeout" class="info-value">17:00</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="info-label">Current Time:</span>
+                            <span id="currentTime" class="info-value">--:--:--</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" onclick="closeModal('settingsModal')">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Employee Details Modal -->
+    <div id="employeeDetailsModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3><i class="fas fa-user"></i> Employee Details</h3>
+                <button class="modal-close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div id="employeeDetailsContent">
+                    <!-- Employee details will be loaded here -->
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-danger" id="deleteEmployeeBtn">
+                    <i class="fas fa-trash"></i> Delete Employee
+                </button>
+                <button type="button" class="btn btn-warning" id="modifyEmployeeBtn">
+                    <i class="fas fa-edit"></i> Modify Employee
+                </button>
+                <button type="button" class="btn btn-secondary" onclick="closeModal('employeeDetailsModal')">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Delete Employee Modal -->
+    <div id="deleteEmployeeModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3><i class="fas fa-trash"></i> Delete Employee</h3>
+                <button class="modal-close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="warning-message">
+                    <i class="fas fa-exclamation-triangle"></i>
+                    <p>Are you sure you want to delete this employee? This action cannot be undone.</p>
+                    <div id="deleteEmployeeInfo" class="employee-info">
+                        <!-- Employee info will be loaded here -->
+                    </div>
+                </div>
+                <form id="deleteEmployeeForm">
+                    <div class="form-group">
+                        <label for="deleteAdminPassword">Admin Password</label>
+                        <input type="password" id="deleteAdminPassword" name="password" required placeholder="Enter admin password">
+                        <small>Default password: 1122</small>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" onclick="closeModal('deleteEmployeeModal')">Cancel</button>
+                <button type="submit" form="deleteEmployeeForm" class="btn btn-danger">
+                    <i class="fas fa-trash"></i> Delete Employee
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modify Employee Modal -->
+    <div id="modifyEmployeeModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3><i class="fas fa-edit"></i> Modify Employee Information</h3>
+                <button class="modal-close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="info-message" style="background: #e3f2fd; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #2196f3;">
+                    <i class="fas fa-info-circle" style="color: #2196f3; margin-right: 8px;"></i>
+                    <strong>You can modify:</strong> Employee name, MAC address, or picture path. All fields are editable.
+                </div>
+                <form id="modifyEmployeeForm">
+                    <div class="form-group">
+                        <label for="modifyEmployeeName">
+                            <i class="fas fa-user"></i> Employee Name
+                            <small style="font-weight: normal; color: #666;">(Change the employee's display name)</small>
+                        </label>
+                        <input type="text" id="modifyEmployeeName" name="name" required placeholder="Enter new employee name">
+                    </div>
+                    <div class="form-group">
+                        <label for="modifyEmployeeMac">
+                            <i class="fas fa-network-wired"></i> MAC Address
+                            <small style="font-weight: normal; color: #666;">(Update the device MAC address for tracking)</small>
+                        </label>
+                        <input type="text" id="modifyEmployeeMac" name="mac_address" required placeholder="aa-bb-cc-dd-ee-ff" pattern="[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}">
+                        <small>Format: aa-bb-cc-dd-ee-ff (lowercase with dashes)</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="modifyEmployeePicture">
+                            <i class="fas fa-image"></i> Picture Path (Optional)
+                            <small style="font-weight: normal; color: #666;">(Update employee photo path)</small>
+                        </label>
+                        <input type="text" id="modifyEmployeePicture" name="picture_path" placeholder="static/img/employee.jpg">
+                        <small>Path to employee picture file</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="modifyAdminPassword">
+                            <i class="fas fa-lock"></i> Admin Password
+                            <small style="font-weight: normal; color: #666;">(Required for security verification)</small>
+                        </label>
+                        <input type="password" id="modifyAdminPassword" name="password" required placeholder="Enter admin password">
+                        <small>Default password: 1122</small>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" onclick="closeModal('modifyEmployeeModal')">Cancel</button>
+                <button type="submit" form="modifyEmployeeForm" class="btn btn-primary">
+                    <i class="fas fa-save"></i> Save Changes
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Notification Container -->
+    <div id="notifications" class="notifications"></div>
+
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+</html>
+

templates/login.html

@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WiFi Attendance Tracker - Login</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .login-container {
+            background: white;
+            padding: 2rem;
+            border-radius: 15px;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 400px;
+            text-align: center;
+        }
+
+        .login-header {
+            margin-bottom: 2rem;
+        }
+
+        .login-header i {
+            font-size: 3rem;
+            color: #667eea;
+            margin-bottom: 1rem;
+        }
+
+        .login-header h1 {
+            color: #333;
+            font-size: 1.8rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .login-header p {
+            color: #666;
+            font-size: 0.9rem;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+            text-align: left;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: #333;
+            font-weight: 500;
+        }
+
+        .password-input-container {
+            position: relative;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 0.75rem;
+            border: 2px solid #e1e5e9;
+            border-radius: 8px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+        }
+
+        .form-group input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .toggle-password {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            color: #666;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+
+        .login-btn {
+            width: 100%;
+            padding: 0.75rem;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+        }
+
+        .login-btn:hover {
+            transform: translateY(-2px);
+        }
+
+        .login-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .error-message {
+            background: #fee;
+            color: #c33;
+            padding: 0.75rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+            border-left: 4px solid #c33;
+            display: none;
+        }
+
+        .loading {
+            display: none;
+            margin-top: 1rem;
+        }
+
+        .loading i {
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .footer {
+            margin-top: 2rem;
+            padding-top: 1rem;
+            border-top: 1px solid #eee;
+            color: #666;
+            font-size: 0.8rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-header">
+            <i class="fas fa-wifi"></i>
+            <h1>WiFi Attendance Tracker</h1>
+            <p>Please enter your password to access the dashboard</p>
+        </div>
+
+        <div id="errorMessage" class="error-message"></div>
+
+        <form id="loginForm">
+            <div class="form-group">
+                <label for="password">Dashboard Password</label>
+                <div class="password-input-container">
+                    <input type="password" id="password" name="password" required placeholder="Enter dashboard password" autocomplete="current-password">
+                    <button type="button" class="toggle-password" onclick="togglePassword()">
+                        <i class="fas fa-eye" id="toggleIcon"></i>
+                    </button>
+                </div>
+            </div>
+
+            <button type="submit" class="login-btn" id="loginBtn">
+                <i class="fas fa-sign-in-alt"></i> Access Dashboard
+            </button>
+        </form>
+
+        <div class="loading" id="loading">
+            <i class="fas fa-spinner"></i> Authenticating...
+        </div>
+
+        <div class="footer">
+            <p>Default password: <strong>admin123</strong></p>
+            <p>Advanced Employee Management System</p>
+        </div>
+    </div>
+
+    <script>
+        function togglePassword() {
+            const passwordInput = document.getElementById('password');
+            const toggleIcon = document.getElementById('toggleIcon');
+            
+            if (passwordInput.type === 'password') {
+                passwordInput.type = 'text';
+                toggleIcon.className = 'fas fa-eye-slash';
+            } else {
+                passwordInput.type = 'password';
+                toggleIcon.className = 'fas fa-eye';
+            }
+        }
+
+        function showError(message) {
+            const errorDiv = document.getElementById('errorMessage');
+            errorDiv.textContent = message;
+            errorDiv.style.display = 'block';
+        }
+
+        function hideError() {
+            const errorDiv = document.getElementById('errorMessage');
+            errorDiv.style.display = 'none';
+        }
+
+        function setLoading(loading) {
+            const loginBtn = document.getElementById('loginBtn');
+            const loadingDiv = document.getElementById('loading');
+            const form = document.getElementById('loginForm');
+            
+            if (loading) {
+                loginBtn.disabled = true;
+                loadingDiv.style.display = 'block';
+                form.style.opacity = '0.6';
+            } else {
+                loginBtn.disabled = false;
+                loadingDiv.style.display = 'none';
+                form.style.opacity = '1';
+            }
+        }
+
+        document.getElementById('loginForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            
+            const password = document.getElementById('password').value;
+            
+            if (!password) {
+                showError('Please enter a password');
+                return;
+            }
+
+            hideError();
+            setLoading(true);
+
+            try {
+                const response = await fetch('/api/login', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ password: password })
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    // Redirect to dashboard
+                    window.location.href = '/dashboard';
+                } else {
+                    showError(result.message || 'Invalid password');
+                }
+            } catch (error) {
+                console.error('Login error:', error);
+                showError('Connection error. Please try again.');
+            } finally {
+                setLoading(false);
+            }
+        });
+
+        // Focus on password input when page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('password').focus();
+        });
+
+        // Handle Enter key
+        document.getElementById('password').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                document.getElementById('loginForm').dispatchEvent(new Event('submit'));
+            }
+        });
+    </script>
+</body>
+</html>
+

web_interface.py

@@ -0,0 +1,236 @@
+from flask import Flask, render_template, jsonify, request
+from flask_cors import CORS
+import json
+import threading
+import time
+from datetime import datetime, date, timedelta
+from attendance_tracker import AttendanceTracker
+from database import AttendanceDatabase
+
+app = Flask(__name__)
+CORS(app)  # Enable CORS for all routes
+
+# Global variables
+tracker = None
+db = None
+latest_events = []
+is_monitoring = False
+
+def initialize_system():
+    """Initialize the attendance tracking system."""
+    global tracker, db
+    tracker = AttendanceTracker()
+    db = AttendanceDatabase()
+    
+    # Sync employees from config to database
+    db.sync_employees_from_config()
+
+def monitoring_loop():
+    """Background monitoring loop."""
+    global latest_events, is_monitoring
+    
+    while is_monitoring:
+        try:
+            events = tracker.scan_once()
+            
+            # Keep only the latest 50 events for the web interface
+            latest_events.extend(events)
+            latest_events = latest_events[-50:]  # Keep only last 50 events
+            
+            time.sleep(tracker.scan_interval)
+        except Exception as e:
+            print(f"Error in monitoring loop: {e}")
+            time.sleep(5)  # Wait before retrying
+
+@app.route('/')
+def index():
+    """Serve the main dashboard page."""
+    return render_template('index.html')
+
+@app.route('/api/status')
+def get_status():
+    """Get current system status."""
+    return jsonify({
+        'is_monitoring': is_monitoring,
+        'employee_count': len(tracker.employees) if tracker else 0,
+        'scan_interval': tracker.scan_interval if tracker else 60,
+        'current_time': datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
+        'office_timeout': f"{tracker.office_timeout_hour:02d}:{tracker.office_timeout_minute:02d}" if tracker else "17:00"
+    })
+
+@app.route('/api/employees')
+def get_employees():
+    """Get all employees and their current status."""
+    if not tracker:
+        return jsonify([])
+    
+    status = tracker.get_current_status()
+    employees = []
+    
+    for mac, info in status.items():
+        employees.append({
+            'name': info['name'],
+            'mac': info['mac'],
+            'is_present': info['is_present'],
+            'status': info['status'],
+            'last_seen': info['last_seen'],
+            'time_in': info['time_in']
+        })
+    
+    return jsonify(employees)
+
+@app.route('/api/events')
+def get_recent_events():
+    """Get recent attendance events."""
+    global latest_events
+    
+    # Convert events to JSON-serializable format
+    events_data = []
+    for mac, event_type, timestamp in latest_events:
+        employee_name = tracker.get_employee_name(mac) if tracker else f"Unknown ({mac})"
+        events_data.append({
+            'name': employee_name,
+            'mac': mac,
+            'event_type': event_type,
+            'timestamp': timestamp.strftime('%Y-%m-%d %H:%M:%S'),
+            'time_ago': get_time_ago(timestamp)
+        })
+    
+    # Sort by timestamp (most recent first)
+    events_data.sort(key=lambda x: x['timestamp'], reverse=True)
+    
+    return jsonify(events_data)
+
+@app.route('/api/attendance_events')
+def get_attendance_events():
+    """Get attendance events from database."""
+    if not db:
+        return jsonify([])
+    
+    date_filter = request.args.get('date')
+    limit = int(request.args.get('limit', 50))
+    
+    events = db.get_attendance_events(date=date_filter, limit=limit)
+    
+    # Add time_ago field
+    for event in events:
+        timestamp = datetime.fromisoformat(event['timestamp'])
+        event['time_ago'] = get_time_ago(timestamp)
+    
+    return jsonify(events)
+
+@app.route('/api/daily_summary')
+def get_daily_summary():
+    """Get daily attendance summary."""
+    if not db:
+        return jsonify([])
+    
+    date_str = request.args.get('date', date.today().strftime('%Y-%m-%d'))
+    summary = db.get_daily_summary(date_str)
+    
+    # Format durations for display
+    for employee in summary:
+        employee['total_break_formatted'] = format_duration(employee['total_break_duration'])
+        employee['total_work_formatted'] = format_duration(employee['total_work_duration'])
+    
+    return jsonify(summary)
+
+@app.route('/api/summary_stats')
+def get_summary_stats():
+    """Get summary statistics for the dashboard."""
+    if not db:
+        return jsonify({})
+    
+    date_str = request.args.get('date', date.today().strftime('%Y-%m-%d'))
+    summary = db.get_daily_summary(date_str)
+    
+    stats = {
+        'total_employees': len(summary),
+        'present_count': len([emp for emp in summary if emp['status'] == 'Present']),
+        'absent_count': len([emp for emp in summary if emp['status'] == 'Absent']),
+        'on_break_count': len([emp for emp in summary if emp['status'] == 'On Break']),
+        'timed_out_count': len([emp for emp in summary if emp['status'] == 'Timed Out']),
+        'total_events': len(db.get_attendance_events(date=date_str, limit=1000))
+    }
+    
+    return jsonify(stats)
+
+@app.route('/api/start_monitoring', methods=['POST'])
+def start_monitoring():
+    """Start the attendance monitoring."""
+    global is_monitoring
+    
+    if not is_monitoring:
+        is_monitoring = True
+        monitoring_thread = threading.Thread(target=monitoring_loop, daemon=True)
+        monitoring_thread.start()
+        return jsonify({'success': True, 'message': 'Monitoring started'})
+    else:
+        return jsonify({'success': False, 'message': 'Monitoring already running'})
+
+@app.route('/api/stop_monitoring', methods=['POST'])
+def stop_monitoring():
+    """Stop the attendance monitoring."""
+    global is_monitoring
+    is_monitoring = False
+    return jsonify({'success': True, 'message': 'Monitoring stopped'})
+
+@app.route('/api/export_csv')
+def export_csv():
+    """Export daily summary to CSV."""
+    if not db:
+        return jsonify({'success': False, 'message': 'Database not available'})
+    
+    date_str = request.args.get('date', date.today().strftime('%Y-%m-%d'))
+    
+    try:
+        db.export_daily_summary_to_csv(date_str)
+        return jsonify({'success': True, 'message': f'CSV exported for {date_str}'})
+    except Exception as e:
+        return jsonify({'success': False, 'message': f'Export failed: {str(e)}'})
+
+def get_time_ago(timestamp):
+    """Get human-readable time difference."""
+    now = datetime.now()
+    diff = now - timestamp
+    
+    if diff.days > 0:
+        return f"{diff.days} day{'s' if diff.days > 1 else ''} ago"
+    elif diff.seconds > 3600:
+        hours = diff.seconds // 3600
+        return f"{hours} hour{'s' if hours > 1 else ''} ago"
+    elif diff.seconds > 60:
+        minutes = diff.seconds // 60
+        return f"{minutes} minute{'s' if minutes > 1 else ''} ago"
+    else:
+        return "Just now"
+
+def format_duration(seconds):
+    """Format duration in seconds to HH:MM:SS."""
+    if seconds is None:
+        return "00:00:00"
+    
+    hours = seconds // 3600
+    minutes = (seconds % 3600) // 60
+    seconds = seconds % 60
+    
+    return f"{hours:02d}:{minutes:02d}:{seconds:02d}"
+
+if __name__ == '__main__':
+    # Initialize the system
+    initialize_system()
+    
+    # Get port from config
+    port = tracker.config.get('web_port', 5000) if tracker else 5000
+    
+    print(f"Starting WiFi Attendance Tracker Web Interface on port {port}")
+    print(f"Open your browser and go to: http://localhost:{port}")
+    
+    # Start monitoring automatically
+    is_monitoring = True
+    monitoring_thread = threading.Thread(target=monitoring_loop, daemon=True)
+    monitoring_thread.start()
+    
+    # Start Flask app
+    app.run(host='0.0.0.0', port=port, debug=False)
+