Add Dashboard for users with specific role.

app.py

@@ -59,6 +59,15 @@ def init_system_settings():
 def initialize_app():
     init_system_settings()
 
+# Add this after initializing the app but before defining routes
+@app.context_processor
+def inject_globals():
+    """Make certain variables available to all templates."""
+    return {
+        'Role': Role,
+        'current_year': datetime.now().year
+    }
+
 # Authentication decorator
 def login_required(f):
     @wraps(f)
@@ -84,7 +93,7 @@ def role_required(min_role):
     Decorator to restrict access based on user role.
     min_role should be a Role enum value (e.g., Role.TEAM_LEADER)
     """
-    def decorator(f):
+    def role_decorator(f):
         @wraps(f)
         def decorated_function(*args, **kwargs):
             if g.user is None:
@@ -107,8 +116,8 @@ def role_required(min_role):
                 return redirect(url_for('home'))
                 
             return f(*args, **kwargs)
-        return decorator
-    return decorator
+        return decorated_function
+    return role_decorator
 
 @app.before_request
 def load_logged_in_user():
@@ -127,14 +136,19 @@ def load_logged_in_user():
 @app.route('/')
 def home():
     if g.user:
-        today = datetime.now().date()
-        entries = TimeEntry.query.filter(
-            TimeEntry.user_id == g.user.id,
-            TimeEntry.arrival_time >= datetime.combine(today, time.min),
-            TimeEntry.arrival_time <= datetime.combine(today, time.max)
-        ).order_by(TimeEntry.arrival_time.desc()).all()
+        # Get active entry (no departure time)
+        active_entry = TimeEntry.query.filter_by(
+            user_id=g.user.id, 
+            departure_time=None
+        ).first()
         
-        return render_template('index.html', title='Home', entries=entries)
+        # Get recent completed entries for history (last 10 entries)
+        history = TimeEntry.query.filter(
+            TimeEntry.user_id == g.user.id,
+            TimeEntry.departure_time.isnot(None)
+        ).order_by(TimeEntry.arrival_time.desc()).limit(10).all()
+        
+        return render_template('index.html', title='Home', active_entry=active_entry, history=history)
     else:
         return render_template('index.html', title='Home')
 
@@ -281,10 +295,60 @@ def verify_email(token):
     
     return redirect(url_for('login'))
 
+@app.route('/dashboard')
+@role_required(Role.TEAM_LEADER)
+def dashboard():
+    # Get dashboard data based on user role
+    dashboard_data = {}
+    
+    if g.user.is_admin or g.user.role == Role.ADMIN:
+        # Admin sees everything
+        dashboard_data.update({
+            'total_users': User.query.count(),
+            'total_teams': Team.query.count(),
+            'blocked_users': User.query.filter_by(is_blocked=True).count(),
+            'unverified_users': User.query.filter_by(is_verified=False).count(),
+            'recent_registrations': User.query.order_by(User.id.desc()).limit(5).all()
+        })
+    
+    if g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR] or g.user.is_admin:
+        # Team leaders and supervisors see team-related data
+        if g.user.team_id or g.user.is_admin:
+            if g.user.is_admin:
+                # Admin can see all teams
+                teams = Team.query.all()
+                team_members = User.query.filter(User.team_id.isnot(None)).all()
+            else:
+                # Team leaders/supervisors see their own team
+                teams = [Team.query.get(g.user.team_id)] if g.user.team_id else []
+                team_members = User.query.filter_by(team_id=g.user.team_id).all() if g.user.team_id else []
+            
+            dashboard_data.update({
+                'teams': teams,
+                'team_members': team_members,
+                'team_member_count': len(team_members)
+            })
+    
+    # Get recent time entries for the user's oversight
+    if g.user.is_admin:
+        # Admin sees all recent entries
+        recent_entries = TimeEntry.query.order_by(TimeEntry.arrival_time.desc()).limit(10).all()
+    elif g.user.team_id:
+        # Team leaders see their team's entries
+        team_user_ids = [user.id for user in User.query.filter_by(team_id=g.user.team_id).all()]
+        recent_entries = TimeEntry.query.filter(TimeEntry.user_id.in_(team_user_ids)).order_by(TimeEntry.arrival_time.desc()).limit(10).all()
+    else:
+        recent_entries = []
+    
+    dashboard_data['recent_entries'] = recent_entries
+    
+    return render_template('dashboard.html', title='Dashboard', **dashboard_data)
+
+# Redirect old admin dashboard URL to new dashboard
 @app.route('/admin/dashboard')
 @admin_required
 def admin_dashboard():
-    return render_template('admin_dashboard.html', title='Admin Dashboard')
+    return redirect(url_for('dashboard'))
 
 @app.route('/admin/users')
 @admin_required
@@ -677,6 +741,48 @@ def update_entry(entry_id):
         }
     })
 
+@app.route('/team/hours')
+@login_required
+@role_required(Role.TEAM_LEADER)  # Only team leaders and above can access
+def team_hours():
+    # Get the current user's team
+    team = Team.query.get(g.user.team_id)
+    
+    if not team:
+        flash('You are not assigned to any team.', 'error')
+        return redirect(url_for('home'))
+    
+    # Get date range from query parameters or use current week as default
+    today = datetime.now().date()
+    start_of_week = today - timedelta(days=today.weekday())
+    end_of_week = start_of_week + timedelta(days=6)
+    
+    start_date_str = request.args.get('start_date', start_of_week.strftime('%Y-%m-%d'))
+    end_date_str = request.args.get('end_date', end_of_week.strftime('%Y-%m-%d'))
+    
+    try:
+        start_date = datetime.strptime(start_date_str, '%Y-%m-%d').date()
+        end_date = datetime.strptime(end_date_str, '%Y-%m-%d').date()
+    except ValueError:
+        flash('Invalid date format. Using current week instead.', 'warning')
+        start_date = start_of_week
+        end_date = end_of_week
+    
+    # Generate a list of dates in the range for the table header
+    date_range = []
+    current_date = start_date
+    while current_date <= end_date:
+        date_range.append(current_date)
+        current_date += timedelta(days=1)
+    
+    return render_template(
+        'team_hours.html',
+        title=f'Team Hours',
+        start_date=start_date,
+        end_date=end_date,
+        date_range=date_range
+    )
+
 @app.route('/history')
 @login_required
 def history():
@@ -774,10 +880,6 @@ def internal_server_error(e):
 def test():
     return "App is working!"
 
-@app.context_processor
-def inject_current_year():
-    return {'current_year': datetime.now().year}
-
 @app.route('/admin/users/toggle-status/<int:user_id>')
 @admin_required
 def toggle_user_status(user_id):
@@ -971,5 +1073,118 @@ def manage_team(team_id):
         available_users=available_users
     )
 
+@app.route('/api/team/hours_data', methods=['GET'])
+@login_required
+@role_required(Role.TEAM_LEADER)  # Only team leaders and above can access
+def team_hours_data():
+    # Get the current user's team
+    team = Team.query.get(g.user.team_id)
+    
+    if not team:
+        return jsonify({
+            'success': False,
+            'message': 'You are not assigned to any team.'
+        }), 400
+    
+    # Get date range from query parameters or use current week as default
+    today = datetime.now().date()
+    start_of_week = today - timedelta(days=today.weekday())
+    end_of_week = start_of_week + timedelta(days=6)
+    
+    start_date_str = request.args.get('start_date', start_of_week.strftime('%Y-%m-%d'))
+    end_date_str = request.args.get('end_date', end_of_week.strftime('%Y-%m-%d'))
+    include_self = request.args.get('include_self', 'false') == 'true'
+    
+    try:
+        start_date = datetime.strptime(start_date_str, '%Y-%m-%d').date()
+        end_date = datetime.strptime(end_date_str, '%Y-%m-%d').date()
+    except ValueError:
+        return jsonify({
+            'success': False,
+            'message': 'Invalid date format.'
+        }), 400
+    
+    # Get all team members
+    team_members = User.query.filter_by(team_id=team.id).all()
+    
+    # Prepare data structure for team members' hours
+    team_data = []
+    
+    for member in team_members:
+        # Skip if the member is the current user (team leader) and include_self is False
+        if member.id == g.user.id and not include_self:
+            continue
+            
+        # Get time entries for this member in the date range
+        entries = TimeEntry.query.filter(
+            TimeEntry.user_id == member.id,
+            TimeEntry.arrival_time >= datetime.combine(start_date, time.min),
+            TimeEntry.arrival_time <= datetime.combine(end_date, time.max)
+        ).order_by(TimeEntry.arrival_time).all()
+        
+        # Calculate daily and total hours
+        daily_hours = {}
+        total_seconds = 0
+        
+        for entry in entries:
+            if entry.duration:  # Only count completed entries
+                entry_date = entry.arrival_time.date()
+                date_str = entry_date.strftime('%Y-%m-%d')
+                
+                if date_str not in daily_hours:
+                    daily_hours[date_str] = 0
+                
+                daily_hours[date_str] += entry.duration
+                total_seconds += entry.duration
+        
+        # Convert seconds to hours for display
+        for date_str in daily_hours:
+            daily_hours[date_str] = round(daily_hours[date_str] / 3600, 2)  # Convert to hours
+        
+        total_hours = round(total_seconds / 3600, 2)  # Convert to hours
+        
+        # Format entries for JSON response
+        formatted_entries = []
+        for entry in entries:
+            formatted_entries.append({
+                'id': entry.id,
+                'arrival_time': entry.arrival_time.strftime('%Y-%m-%d %H:%M:%S'),
+                'departure_time': entry.departure_time.strftime('%Y-%m-%d %H:%M:%S') if entry.departure_time else None,
+                'duration': entry.duration,
+                'total_break_duration': entry.total_break_duration
+            })
+        
+        # Add member data to team data
+        team_data.append({
+            'user': {
+                'id': member.id,
+                'username': member.username,
+                'email': member.email
+            },
+            'daily_hours': daily_hours,
+            'total_hours': total_hours,
+            'entries': formatted_entries
+        })
+    
+    # Generate a list of dates in the range for the table header
+    date_range = []
+    current_date = start_date
+    while current_date <= end_date:
+        date_range.append(current_date.strftime('%Y-%m-%d'))
+        current_date += timedelta(days=1)
+    
+    return jsonify({
+        'success': True,
+        'team': {
+            'id': team.id,
+            'name': team.name,
+            'description': team.description
+        },
+        'team_data': team_data,
+        'date_range': date_range,
+        'start_date': start_date.strftime('%Y-%m-%d'),
+        'end_date': end_date.strftime('%Y-%m-%d')
+    })
+
 if __name__ == '__main__':
     app.run(debug=True)

templates/dashboard.html

@@ -0,0 +1,309 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="admin-container">
+    <h1>
+        {% if g.user.is_admin or g.user.role == Role.ADMIN %}
+            Admin Dashboard
+        {% elif g.user.role == Role.SUPERVISOR %}
+            Supervisor Dashboard
+        {% elif g.user.role == Role.TEAM_LEADER %}
+            Team Leader Dashboard
+        {% else %}
+            Dashboard
+        {% endif %}
+    </h1>
+    
+    <!-- Admin-only sections -->
+    {% if g.user.is_admin or g.user.role == Role.ADMIN %}
+    <div class="stats-section">
+        <h2>System Overview</h2>
+        <div class="stats-grid">
+            <div class="stat-card">
+                <h3>{{ total_users }}</h3>
+                <p>Total Users</p>
+            </div>
+            <div class="stat-card">
+                <h3>{{ total_teams }}</h3>
+                <p>Total Teams</p>
+            </div>
+            <div class="stat-card">
+                <h3>{{ blocked_users }}</h3>
+                <p>Blocked Users</p>
+            </div>
+            <div class="stat-card">
+                <h3>{{ unverified_users }}</h3>
+                <p>Unverified Users</p>
+            </div>
+        </div>
+    </div>
+    
+    <div class="admin-panel">
+        <div class="admin-card">
+            <h2>User Management</h2>
+            <p>Manage user accounts, permissions, and roles.</p>
+            <a href="{{ url_for('admin_users') }}" class="btn btn-primary">Manage Users</a>
+        </div>
+        
+        <div class="admin-card">
+            <h2>Team Management</h2>
+            <p>Configure teams and their members.</p>
+            <a href="{{ url_for('admin_teams') }}" class="btn btn-primary">Manage Teams</a>
+        </div>
+
+        <div class="admin-card">
+            <h2>System Settings</h2>
+            <p>Configure application-wide settings like registration and more.</p>
+            <a href="{{ url_for('admin_settings') }}" class="btn btn-primary">System Settings</a>
+        </div>
+    </div>
+    {% endif %}
+    
+    <!-- Team Leader and Supervisor sections -->
+    {% if g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR] or g.user.is_admin %}
+    <div class="team-section">
+        <h2>Team Management</h2>
+        
+        {% if teams %}
+        <div class="team-stats">
+            <div class="stat-card">
+                <h3>{{ team_member_count }}</h3>
+                <p>Team Members</p>
+            </div>
+            <div class="stat-card">
+                <h3>{{ teams|length }}</h3>
+                <p>Teams Managed</p>
+            </div>
+        </div>
+        
+        <div class="admin-panel">
+            <div class="admin-card">
+                <h2>Team Hours</h2>
+                <p>View and monitor team member working hours.</p>
+                <a href="{{ url_for('team_hours') }}" class="btn btn-primary">View Team Hours</a>
+            </div>
+            
+            {% if g.user.is_admin %}
+            <div class="admin-card">
+                <h2>Team Configuration</h2>
+                <p>Create and manage team structures.</p>
+                <a href="{{ url_for('admin_teams') }}" class="btn btn-primary">Configure Teams</a>
+            </div>
+            {% endif %}
+        </div>
+        
+        <div class="team-members">
+            <h3>Your Team Members</h3>
+            {% if team_members %}
+            <div class="members-grid">
+                {% for member in team_members %}
+                <div class="member-card">
+                    <h4>{{ member.username }}</h4>
+                    <p>{{ member.role.value if member.role else 'Team Member' }}</p>
+                    <p>{{ member.email }}</p>
+                    {% if member.is_blocked %}
+                        <span class="status blocked">Blocked</span>
+                    {% elif not member.is_verified %}
+                        <span class="status unverified">Unverified</span>
+                    {% else %}
+                        <span class="status active">Active</span>
+                    {% endif %}
+                </div>
+                {% endfor %}
+            </div>
+            {% else %}
+            <p>No team members assigned yet.</p>
+            {% endif %}
+        </div>
+        {% else %}
+        <div class="no-team">
+            <p>You are not assigned to any team. Contact your administrator to be assigned to a team.</p>
+        </div>
+        {% endif %}
+    </div>
+    {% endif %}
+    
+    <!-- Recent Activity section for all roles -->
+    {% if recent_entries %}
+    <div class="recent-activity">
+        <h2>Recent Time Entries</h2>
+        <div class="entries-table">
+            <table class="time-history">
+                <thead>
+                    <tr>
+                        {% if g.user.is_admin or g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR] %}
+                        <th>User</th>
+                        {% endif %}
+                        <th>Date</th>
+                        <th>Arrival</th>
+                        <th>Departure</th>
+                        <th>Duration</th>
+                        <th>Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for entry in recent_entries %}
+                    <tr>
+                        {% if g.user.is_admin or g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR] %}
+                        <td>{{ entry.user.username }}</td>
+                        {% endif %}
+                        <td>{{ entry.arrival_time.strftime('%Y-%m-%d') }}</td>
+                        <td>{{ entry.arrival_time.strftime('%H:%M:%S') }}</td>
+                        <td>{{ entry.departure_time.strftime('%H:%M:%S') if entry.departure_time else 'Active' }}</td>
+                        <td>
+                            {% if entry.duration %}
+                                {{ '%d:%02d:%02d'|format(entry.duration//3600, (entry.duration%3600)//60, entry.duration%60) }}
+                            {% else %}
+                                In progress
+                            {% endif %}
+                        </td>
+                        <td>
+                            {% if not entry.departure_time %}
+                                <span class="status active">Active</span>
+                            {% else %}
+                                <span class="status completed">Completed</span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    {% endif %}
+    
+    <!-- Quick Actions section -->
+    <div class="quick-actions">
+        <h2>Quick Actions</h2>
+        <div class="admin-panel">
+            <div class="admin-card">
+                <h2>My Profile</h2>
+                <p>Update your personal information and password.</p>
+                <a href="{{ url_for('profile') }}" class="btn btn-secondary">Edit Profile</a>
+            </div>
+            
+            <div class="admin-card">
+                <h2>Configuration</h2>
+                <p>Configure work hours and break settings.</p>
+                <a href="{{ url_for('config') }}" class="btn btn-secondary">Work Config</a>
+            </div>
+            
+            <div class="admin-card">
+                <h2>Time History</h2>
+                <p>View your complete time tracking history.</p>
+                <a href="{{ url_for('history') }}" class="btn btn-secondary">View History</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+.stats-section {
+    margin-bottom: 2rem;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin: 1rem 0;
+}
+
+.stat-card {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    text-align: center;
+}
+
+.stat-card h3 {
+    font-size: 2rem;
+    margin: 0 0 0.5rem 0;
+    color: #007bff;
+}
+
+.stat-card p {
+    margin: 0;
+    color: #6c757d;
+    font-weight: 500;
+}
+
+.team-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin: 1rem 0;
+}
+
+.members-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.member-card {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 0.5rem;
+    padding: 1rem;
+}
+
+.member-card h4 {
+    margin: 0 0 0.5rem 0;
+    color: #333;
+}
+
+.member-card p {
+    margin: 0.25rem 0;
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.status {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.8rem;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.status.active {
+    background: #d4edda;
+    color: #155724;
+}
+
+.status.blocked {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.status.unverified {
+    background: #fff3cd;
+    color: #856404;
+}
+
+.status.completed {
+    background: #d1ecf1;
+    color: #0c5460;
+}
+
+.no-team {
+    background: #fff3cd;
+    border: 1px solid #ffeaa7;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin: 1rem 0;
+}
+
+.entries-table {
+    overflow-x: auto;
+}
+
+.recent-activity, .team-section, .quick-actions {
+    margin-top: 2rem;
+}
+</style>
+{% endblock %}

templates/layout.html

@@ -15,19 +15,33 @@
                     <li><a href="{{ url_for('history') }}">History</a></li>
                     <li><a href="{{ url_for('about') }}">About</a></li>
                     
-                    <!-- Admin dropdown menu moved to the rightmost position -->
+                    <!-- Role-based dropdown menu -->
                     {% if g.user.is_admin %}
                     <li class="dropdown admin-dropdown">
                         <a href="#" class="dropdown-toggle">Admin</a>
                         <ul class="dropdown-menu">
                             <li><a href="{{ url_for('profile') }}">Profile</a></li>
                             <li><a href="{{ url_for('config') }}">Config</a></li>
-                            <li><a href="{{ url_for('admin_dashboard') }}">Dashboard</a></li>
+                            <li><a href="{{ url_for('dashboard') }}">Dashboard</a></li>
+                            <li><a href="{{ url_for('logout') }}">Logout</a></li>
+                        </ul>
+                    </li>
+                    {% elif g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR] %}
+                    <!-- Team Leader/Supervisor dropdown menu -->
+                    <li class="dropdown admin-dropdown">
+                        <a href="#" class="dropdown-toggle">{{ g.user.username }}</a>
+                        <ul class="dropdown-menu">
+                            <li><a href="{{ url_for('profile') }}">Profile</a></li>
+                            <li><a href="{{ url_for('config') }}">Config</a></li>
+                            <li><a href="{{ url_for('dashboard') }}">Dashboard</a></li>
+                            {% if g.user.team_id %}
+                            <li><a href="{{ url_for('team_hours') }}">Team Hours</a></li>
+                            {% endif %}
                             <li><a href="{{ url_for('logout') }}">Logout</a></li>
                         </ul>
                     </li>
                     {% else %}
-                    <!-- User dropdown menu for non-admin users -->
+                    <!-- Regular user dropdown menu -->
                     <li class="dropdown admin-dropdown">
                         <a href="#" class="dropdown-toggle">{{ g.user.username }}</a>
                         <ul class="dropdown-menu">

templates/team_hours.html

@@ -0,0 +1,184 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="timetrack-container">
+    <h2>Team Hours</h2>
+    
+    <div class="date-filter">
+        <form id="date-range-form" method="GET" action="{{ url_for('team_hours') }}">
+            <div class="form-group">
+                <label for="start-date">Start Date:</label>
+                <input type="date" id="start-date" name="start_date" value="{{ start_date.strftime('%Y-%m-%d') }}">
+            </div>
+            <div class="form-group">
+                <label for="end-date">End Date:</label>
+                <input type="date" id="end-date" name="end_date" value="{{ end_date.strftime('%Y-%m-%d') }}">
+            </div>
+            <div class="form-group">
+                <label for="include-self">
+                    <input type="checkbox" id="include-self" name="include_self" {% if request.args.get('include_self') %}checked{% endif %}> Include my hours
+                </label>
+            </div>
+            <button type="submit" class="btn">Apply Filter</button>
+        </form>
+    </div>
+    
+    <div class="team-hours-container">
+        <div id="loading">Loading team data...</div>
+        <div id="team-info" style="display: none;">
+            <h3>Team: <span id="team-name"></span></h3>
+            <p id="team-description"></p>
+        </div>
+        
+        <div id="team-hours-table" style="display: none;">
+            <table class="time-history">
+                <thead id="table-header">
+                    <tr>
+                        <th>Team Member</th>
+                        {% for date in date_range %}
+                            <th>{{ date.strftime('%a, %b %d') }}</th>
+                        {% endfor %}
+                        <th>Total Hours</th>
+                    </tr>
+                </thead>
+                <tbody id="table-body">
+                    <!-- Team member data will be added dynamically -->
+                </tbody>
+            </table>
+        </div>
+        
+        <div id="no-data" style="display: none;">
+            <p>No time entries found for the selected date range.</p>
+        </div>
+        
+        <div id="error-message" style="display: none;" class="error-message">
+            <!-- Error messages will be displayed here -->
+        </div>
+    </div>
+    
+    <div class="team-hours-details" id="member-details" style="display: none;">
+        <h3>Detailed Entries for <span id="selected-member"></span></h3>
+        <table class="time-history">
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Arrival</th>
+                    <th>Departure</th>
+                    <th>Work Duration</th>
+                    <th>Break Duration</th>
+                </tr>
+            </thead>
+            <tbody id="details-body">
+                <!-- Entry details will be added dynamically -->
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Load team hours data when the page loads
+        loadTeamHoursData();
+        
+        // Handle date filter form submission
+        document.getElementById('date-range-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            loadTeamHoursData();
+        });
+        
+        function loadTeamHoursData() {
+            // Show loading indicator
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('team-hours-table').style.display = 'none';
+            document.getElementById('team-info').style.display = 'none';
+            document.getElementById('no-data').style.display = 'none';
+            document.getElementById('error-message').style.display = 'none';
+            document.getElementById('member-details').style.display = 'none';
+            
+            // Get filter values
+            const startDate = document.getElementById('start-date').value;
+            const endDate = document.getElementById('end-date').value;
+            const includeSelf = document.getElementById('include-self').checked;
+            
+            // Build API URL with query parameters
+            const apiUrl = `/api/team/hours_data?start_date=${startDate}&end_date=${endDate}&include_self=${includeSelf}`;
+            
+            // Fetch data from API
+            fetch(apiUrl)
+                .then(response => {
+                    if (!response.ok) {
+                        return response.json().then(data => {
+                            throw new Error(data.message || 'Failed to load team hours data');
+                        });
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.success) {
+                        displayTeamData(data);
+                    } else {
+                        showError(data.message || 'Failed to load team hours data.');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error fetching team hours data:', error);
+                    showError(error.message || 'An error occurred while loading the team hours data.');
+                });
+        }
+        
+        function displayTeamData(data) {
+            // Populate team info
+            document.getElementById('team-name').textContent = data.team.name;
+            document.getElementById('team-description').textContent = data.team.description || '';
+            document.getElementById('team-info').style.display = 'block';
+            
+            // Populate team hours table
+            const tableHeader = document.getElementById('table-header').querySelector('tr');
+            tableHeader.innerHTML = '<th>Team Member</th>';
+            data.date_range.forEach(dateStr => {
+                const th = document.createElement('th');
+                th.textContent = new Date(dateStr).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+                tableHeader.appendChild(th);
+            });
+            const totalHoursTh = document.createElement('th');
+            totalHoursTh.textContent = 'Total Hours';
+            tableHeader.appendChild(totalHoursTh);
+            
+            const tableBody = document.getElementById('table-body');
+            tableBody.innerHTML = '';
+            data.team_data.forEach(memberData => {
+                const row = document.createElement('tr');
+                
+                // Add username cell
+                const usernameCell = document.createElement('td');
+                usernameCell.textContent = memberData.user.username;
+                row.appendChild(usernameCell);
+                
+                // Add daily hours cells
+                data.date_range.forEach(dateStr => {
+                    const cell = document.createElement('td');
+                    cell.textContent = `${memberData.daily_hours[dateStr] || 0}h`;
+                    row.appendChild(cell);
+                });
+                
+                // Add total hours cell
+                const totalCell = document.createElement('td');
+                totalCell.innerHTML = `<strong>${memberData.total_hours}h</strong>`;
+                row.appendChild(totalCell);
+                
+                tableBody.appendChild(row);
+            });
+            
+            // Populate detailed entries
+            document.getElementById('team-hours-table').style.display = 'block';
+            document.getElementById('loading').style.display = 'none';
+        }
+        
+        function showError(message) {
+            document.getElementById('error-message').textContent = message;
+            document.getElementById('error-message').style.display = 'block';
+            document.getElementById('loading').style.display = 'none';
+        }
+    });
+</script>
+{% endblock %}