March 18 2026: Update attendance report filter multiple employees

app.py

@@ -4618,20 +4618,30 @@ def attendance_report():
         date_from = request.args.get('date_from', '')
         date_to = request.args.get('date_to', '')
         location_filter = request.args.get('location', '')
+        # employee param is now a comma-separated list of IDs (multi-employee filter)
         employee_filter = request.args.get('employee', '')
         project_filter = request.args.get('project', '')
 
-        # Get employee display name for filter if employee ID is provided
+        # Build the list of selected employee IDs (strip blanks)
-        employee_display_name = ''
+        employee_ids = [e.strip() for e in employee_filter.split(',') if e.strip()] if employee_filter else []
-        if employee_filter:
+
+        # Build display names for each selected employee
+        employee_display_names = []
+        for eid in employee_ids:
             try:
-                employee = Employee.query.filter_by(id=int(employee_filter)).first()
+                emp = Employee.query.filter_by(id=int(eid)).first()
-                if employee:
+                if emp:
-                    employee_display_name = f"{employee.lastName}, {employee.firstName}"
+                    employee_display_names.append({
+                        'id': eid,
+                        'name': f"{emp.lastName}, {emp.firstName}"
+                    })
                 else:
-                    employee_display_name = f"ID: {employee_filter}"
+                    employee_display_names.append({'id': eid, 'name': f"ID: {eid}"})
             except (ValueError, TypeError):
-                employee_display_name = employee_filter
+                employee_display_names.append({'id': eid, 'name': eid})
+
+        # Legacy single-value display name (kept for backward compat in template)
+        employee_display_name = ', '.join([e['name'] for e in employee_display_names])
 
         # ============================================================
         # PROJECT MANAGER ACCESS CONTROL
@@ -4692,6 +4702,8 @@ def attendance_report():
                                     date_to=date_to,
                                     location_filter=location_filter,
                                     employee_filter=employee_filter,
+                                    employee_ids=employee_ids,
+                                    employee_display_names=employee_display_names,
                                     employee_display_name=employee_display_name,
                                     project_filter=project_filter,
                                     today_date=datetime.now().strftime('%Y-%m-%d'),
@@ -4799,9 +4811,19 @@ def attendance_report():
             filter_conditions.append("ad.location_name = :location")
             query_params['location'] = location_filter
 
-        if employee_filter:
+        if employee_ids:
-            filter_conditions.append("ad.employee_id = :employee")
+            if len(employee_ids) == 1:
-            query_params['employee'] = employee_filter
+                filter_conditions.append("ad.employee_id = :employee_0")
+                query_params['employee_0'] = employee_ids[0]
+            else:
+                placeholders = ', '.join([f':employee_{i}' for i in range(len(employee_ids))])
+                filter_conditions.append(f"ad.employee_id IN ({placeholders})")
+                for i, eid in enumerate(employee_ids):
+                    query_params[f'employee_{i}'] = eid
+            logger_handler.logger.info(
+                f"Attendance report filtered by employee IDs: {employee_ids} "
+                f"by user {session.get('username', 'unknown')}"
+            )
 
         if project_filter:
             filter_conditions.append("qc.project_id = :project")
@@ -5052,6 +5074,8 @@ def attendance_report():
                      date_to=date_to,
                      location_filter=location_filter,
                      employee_filter=employee_filter,
+                     employee_ids=employee_ids,
+                     employee_display_names=employee_display_names,
                      employee_display_name=employee_display_name,
                      project_filter=project_filter,
                      today_date=datetime.now().strftime('%Y-%m-%d'),

static/css/attendance.css

@@ -1648,3 +1648,102 @@ tr.modified-record {
 .filter-input {
     padding-right: 35px !important;
 }
+
+/* ─── Multi-Employee Chip Filter ─────────────────────────────── */
+.employee-chips-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    min-height: 38px;
+    padding: 4px 36px 4px 8px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    background: #fff;
+    cursor: text;
+    position: relative;
+}
+
+.employee-chips-wrapper:focus-within {
+    border-color: #6366f1;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+}
+
+.employee-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    background: #eef2ff;
+    color: #4338ca;
+    border: 1px solid #c7d2fe;
+    border-radius: 4px;
+    padding: 2px 6px 2px 8px;
+    font-size: 0.825rem;
+    font-weight: 500;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.employee-chip-remove {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #6366f1;
+    padding: 0;
+    line-height: 1;
+    font-size: 0.75rem;
+    display: flex;
+    align-items: center;
+    border-radius: 2px;
+    transition: color 0.15s;
+    flex-shrink: 0;
+}
+
+.employee-chip-remove:hover {
+    color: #dc2626;
+}
+
+.employee-chip-input {
+    border: none;
+    outline: none;
+    font-size: 0.875rem;
+    background: transparent;
+    flex: 1;
+    min-width: 120px;
+    padding: 2px 0;
+    color: #1f2937;
+}
+
+.employee-chip-input::placeholder {
+    color: #9ca3af;
+}
+
+.employee-chips-clear-all {
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: #dc3545;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+    padding: 0;
+}
+
+.employee-chips-clear-all:hover {
+    background: #c82333;
+}
+
+.employee-chips-clear-all i {
+    font-size: 0.7rem;
+}
+/* ─── End Multi-Employee Chip Filter ─────────────────────────── */

templates/attendance_report.html

@@ -127,31 +127,34 @@
                         </div>
                         
                         <div class="filter-group">
-                            <label for="employee_search_filter">
+                            <label for="employee_chip_input">
                                 <i class="fas fa-user-search"></i>
                                 Employee
                             </label>
                             <div class="autocomplete-container-filter">
+                                <input type="hidden" id="employee" name="employee" value="{{ employee_filter }}">
+                                <div class="employee-chips-wrapper" id="employeeChipsWrapper">
+                                    {% for emp in employee_display_names %}
+                                    <span class="employee-chip" data-id="{{ emp.id }}">
+                                        <span title="{{ emp.name }}">{{ emp.name }}</span>
+                                        <button type="button" class="employee-chip-remove" title="Remove">
+                                            <i class="fas fa-times"></i>
+                                        </button>
+                                    </span>
+                                    {% endfor %}
                                     <input type="text"
-                                    id="employee_search_filter" 
+                                           id="employee_chip_input"
-                                    class="filter-input" 
+                                           class="employee-chip-input"
-                                    placeholder="Search by ID or Name..."
+                                           placeholder="{% if employee_display_names %}Add more...{% else %}Search by ID or Name...{% endif %}"
-                                    value="{{ employee_display_name }}"
                                            autocomplete="off">
-                                <input type="hidden" 
-                                    id="employee" 
-                                    name="employee" 
-                                    value="{{ employee_filter }}">
-                                <div id="employee_autocomplete_results" class="autocomplete-results-filter"></div>
                                     {% if employee_filter %}
-                                <button type="button" 
+                                    <button type="button" class="employee-chips-clear-all" id="clearAllEmployees" title="Clear all">
-                                        class="clear-employee-filter" 
-                                        onclick="clearEmployeeFilter()"
-                                        title="Clear employee filter">
                                         <i class="fas fa-times"></i>
                                     </button>
                                     {% endif %}
                                 </div>
+                                <div id="employee_autocomplete_results" class="autocomplete-results-filter"></div>
+                            </div>
                         </div>
                                                 
                         <div class="filter-actions">
@@ -755,73 +758,170 @@ document.addEventListener('DOMContentLoaded', function() {
 </script>
 
 <script>
-// Employee Filter Autocomplete
+// ─── Multi-Employee Chip Filter Autocomplete ──────────────────────────────
-(function() {
+(function () {
-    const employeeSearchFilter = document.getElementById('employee_search_filter');
+    const chipInput      = document.getElementById('employee_chip_input');
-    const employeeHiddenFilter = document.getElementById('employee');
+    const employeeHidden = document.getElementById('employee');
-    const autocompleteResultsFilter = document.getElementById('employee_autocomplete_results');
+    const autocomplete   = document.getElementById('employee_autocomplete_results');
-    let searchFilterTimeout;
+    const chipsWrapper   = document.getElementById('employeeChipsWrapper');
+    let searchTimeout;
 
-    if (employeeSearchFilter) {
+    // ── State: map of id -> displayName for currently selected employees
-        employeeSearchFilter.addEventListener('input', function() {
+    const selected = {};
-            const searchTerm = this.value.trim();
+    {% for emp in employee_display_names %}
+    selected['{{ emp.id }}'] = '{{ emp.name | e }}';
+    {% endfor %}
 
-            // Clear hidden field if input is cleared
+    function syncHiddenField() {
-            if (searchTerm.length === 0) {
+        employeeHidden.value = Object.keys(selected).join(',');
-                employeeHiddenFilter.value = '';
+        // Show/hide the clear-all button dynamically
-                autocompleteResultsFilter.classList.remove('show');
+        const hasChips = Object.keys(selected).length > 0;
-                return;
+        let btn = document.getElementById('clearAllEmployees');
+        if (hasChips && !btn) {
+            btn = document.createElement('button');
+            btn.type = 'button';
+            btn.id = 'clearAllEmployees';
+            btn.className = 'employee-chips-clear-all';
+            btn.title = 'Clear all';
+            btn.innerHTML = '<i class="fas fa-times"></i>';
+            btn.addEventListener('click', clearAll);
+            chipsWrapper.appendChild(btn);
+        } else if (!hasChips && btn) {
+            btn.remove();
+        }
     }
 
-            // If the visible input is a plain numeric ID, keep the hidden field
+    function addChip(id, name) {
-            // in sync immediately so the user can just type an ID and submit
+        id = String(id);
-            // without having to pick from the dropdown (handles IDs not in Employee table).
+        if (selected[id]) return; // already added
-            if (/^\d+$/.test(searchTerm)) {
+        selected[id] = name;
-                employeeHiddenFilter.value = searchTerm;
-            } else {
-                // Non-numeric input — clear hidden field until a suggestion is picked
-                employeeHiddenFilter.value = '';
-            }
 
-            if (searchTerm.length < 2) {
+        const chip = document.createElement('span');
-                autocompleteResultsFilter.classList.remove('show');
+        chip.className = 'employee-chip';
-                return;
+        chip.dataset.id = id;
-            }
 
-            // Debounce search
+        const nameSpan = document.createElement('span');
-            clearTimeout(searchFilterTimeout);
+        nameSpan.title = name;
-            searchFilterTimeout = setTimeout(() => {
+        nameSpan.textContent = name;
-                fetch(`/api/search_employees?q=${encodeURIComponent(searchTerm)}`)
+
-                    .then(response => response.json())
+        const removeBtn = document.createElement('button');
-                    .then(data => {
+        removeBtn.type = 'button';
-                        displayEmployeeAutocompleteResults(data.employees);
+        removeBtn.className = 'employee-chip-remove';
-                    })
+        removeBtn.title = 'Remove';
-                    .catch(error => {
+        removeBtn.innerHTML = '<i class="fas fa-times"></i>';
-                        console.error('Error searching employees:', error);
+        removeBtn.addEventListener('click', function () {
+            delete selected[chip.dataset.id];
+            chip.remove();
+            syncHiddenField();
+            updateInputPlaceholder();
         });
+
+        chip.appendChild(nameSpan);
+        chip.appendChild(removeBtn);
+
+        // Insert chip before the text input
+        chipsWrapper.insertBefore(chip, chipInput);
+        syncHiddenField();
+        updateInputPlaceholder();
+    }
+
+    function updateInputPlaceholder() {
+        chipInput.placeholder = Object.keys(selected).length > 0
+            ? 'Add more...'
+            : 'Search by ID or Name...';
+    }
+
+    function clearAll() {
+        Object.keys(selected).forEach(function(k) { delete selected[k]; });
+        chipsWrapper.querySelectorAll('.employee-chip').forEach(function(c) { c.remove(); });
+        syncHiddenField();
+        updateInputPlaceholder();
+    }
+
+    // Wire remove buttons for server-rendered chips on page load
+    chipsWrapper.querySelectorAll('.employee-chip-remove').forEach(function (btn) {
+        btn.addEventListener('click', function () {
+            const chip = btn.closest('.employee-chip');
+            delete selected[chip.dataset.id];
+            chip.remove();
+            syncHiddenField();
+            updateInputPlaceholder();
+        });
+    });
+
+    const clearAllBtn = document.getElementById('clearAllEmployees');
+    if (clearAllBtn) {
+        clearAllBtn.addEventListener('click', clearAll);
+    }
+
+    // Clicking the wrapper focuses the text input
+    chipsWrapper.addEventListener('click', function (e) {
+        if (!e.target.closest('.employee-chip') && !e.target.closest('.employee-chips-clear-all')) {
+            chipInput.focus();
+        }
+    });
+
+    // ── Autocomplete input handler
+    chipInput.addEventListener('input', function () {
+        const q = this.value.trim();
+
+        if (q.length === 0) {
+            autocomplete.classList.remove('show');
+            return;
+        }
+
+        if (q.length < 2) {
+            autocomplete.classList.remove('show');
+            return;
+        }
+
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(function () {
+            fetch('/api/search_employees?q=' + encodeURIComponent(q))
+                .then(function(r) { return r.json(); })
+                .then(function(data) { renderDropdown(data.employees); })
+                .catch(function(err) { console.error('Employee search error:', err); });
         }, 300);
     });
 
-        // Close autocomplete when clicking outside
+    // Keyboard shortcuts: Enter to add numeric ID, Backspace to remove last chip
-        document.addEventListener('click', function(e) {
+    chipInput.addEventListener('keydown', function (e) {
-            if (!e.target.closest('.autocomplete-container-filter')) {
+        if (e.key === 'Enter') {
-                autocompleteResultsFilter.classList.remove('show');
+            e.preventDefault();
+            const q = chipInput.value.trim();
+            if (/^\d+$/.test(q) && !selected[q]) {
+                addChip(q, 'ID: ' + q);
+                chipInput.value = '';
+                autocomplete.classList.remove('show');
+            }
+        }
+        if (e.key === 'Backspace' && chipInput.value === '') {
+            const chips = chipsWrapper.querySelectorAll('.employee-chip');
+            if (chips.length > 0) {
+                const last = chips[chips.length - 1];
+                delete selected[last.dataset.id];
+                last.remove();
+                syncHiddenField();
+                updateInputPlaceholder();
+            }
         }
     });
-    }
 
-    function displayEmployeeAutocompleteResults(employees) {
+    function renderDropdown(employees) {
-        // Clear previous results safely
+        autocomplete.innerHTML = '';
-        autocompleteResultsFilter.innerHTML = '';
 
-        if (employees.length === 0) {
+        const unselected = employees.filter(function(emp) {
+            return !selected[String(emp.id)];
+        });
+
+        if (unselected.length === 0) {
             const noResult = document.createElement('div');
             noResult.className = 'autocomplete-item-filter';
             noResult.style.cssText = 'cursor:default;color:#999;';
-            noResult.textContent = 'No employees found';
+            noResult.textContent = employees.length === 0 ? 'No employees found' : 'All matching employees already selected';
-            autocompleteResultsFilter.appendChild(noResult);
+            autocomplete.appendChild(noResult);
         } else {
-            employees.forEach(function(emp) {
+            unselected.forEach(function (emp) {
                 const isUnregistered = (emp.lastName === '(no record)');
                 const displayName = isUnregistered
                     ? 'ID: ' + emp.id
@@ -853,53 +953,54 @@ document.addEventListener('DOMContentLoaded', function() {
                 info.appendChild(idSpan);
                 item.appendChild(info);
 
-                // Closure captures values safely regardless of special characters in names
+                item.addEventListener('click', (function (id, name) {
-                item.addEventListener('click', (function(id, name) {
+                    return function () {
-                    return function() { selectEmployeeFilter(id, name); };
+                        addChip(id, name);
-                }(emp.id, displayName)));
+                        chipInput.value = '';
+                        autocomplete.classList.remove('show');
+                    };
+                }(String(emp.id), displayName)));
 
-                autocompleteResultsFilter.appendChild(item);
+                autocomplete.appendChild(item);
             });
         }
 
         positionDropdown();
-        autocompleteResultsFilter.classList.add('show');
+        autocomplete.classList.add('show');
     }
 
-    // Helper function to position the dropdown correctly
     function positionDropdown() {
-        const inputRect = employeeSearchFilter.getBoundingClientRect();
+        const wrapperRect = chipsWrapper.getBoundingClientRect();
-        autocompleteResultsFilter.style.top = (inputRect.bottom + window.scrollY) + 'px';
+        autocomplete.style.top   = (wrapperRect.bottom + window.scrollY) + 'px';
-        autocompleteResultsFilter.style.left = inputRect.left + 'px';
+        autocomplete.style.left  = wrapperRect.left + 'px';
-        autocompleteResultsFilter.style.width = inputRect.width + 'px';
+        autocomplete.style.width = wrapperRect.width + 'px';
     }
 
-    // Make this function globally accessible
+    document.addEventListener('click', function (e) {
-    window.selectEmployeeFilter = function(id, name) {
+        if (!e.target.closest('.autocomplete-container-filter')) {
-        employeeHiddenFilter.value = id;
+            autocomplete.classList.remove('show');
-        employeeSearchFilter.value = name;
-        autocompleteResultsFilter.classList.remove('show');
-    };
-
-    window.clearEmployeeFilter = function() {
-        employeeSearchFilter.value = '';
-        employeeHiddenFilter.value = '';
-        // Submit the form to refresh with cleared filter
-        employeeSearchFilter.closest('form').submit();
-    };
-
-    // Reposition dropdown on scroll or resize
-    window.addEventListener('scroll', function() {
-        if (autocompleteResultsFilter.classList.contains('show')) {
-            positionDropdown();
         }
+    });
+
+    window.addEventListener('scroll', function () {
+        if (autocomplete.classList.contains('show')) positionDropdown();
     }, true);
 
-    window.addEventListener('resize', function() {
+    window.addEventListener('resize', function () {
-        if (autocompleteResultsFilter.classList.contains('show')) {
+        if (autocomplete.classList.contains('show')) positionDropdown();
-            positionDropdown();
-        }
     });
-})();
+
+    // ── Legacy globals for backward compatibility
+    window.selectEmployeeFilter = function (id, name) {
+        addChip(String(id), name);
+        chipInput.value = '';
+        autocomplete.classList.remove('show');
+    };
+
+    window.clearEmployeeFilter = function () {
+        clearAll();
+        chipsWrapper.closest('form').submit();
+    };
+}());
 </script>
 {% endblock %}