433 lines
13 KiB
HTML
433 lines
13 KiB
HTML
{% extends "base_authenticated.html" %} {% set page_title = "Employee
|
|
Management" %} {% block title %}{{ page_title }}{% endblock %} {% block
|
|
extra_head %}
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='css/employees.css') }}"
|
|
/>
|
|
{% endblock %} {% block content %}
|
|
<div class="employees-page">
|
|
<!-- Page Header -->
|
|
<div class="employees-header">
|
|
<div class="header-content">
|
|
<div class="header-navigation">
|
|
<a href="{{ url_for('dashboard.dashboard') }}" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
Back to Dashboard
|
|
</a>
|
|
</div>
|
|
|
|
<h1><i class="fas fa-users"></i> Employee Management</h1>
|
|
<p class="header-description">
|
|
Manage employee records and view attendance statistics
|
|
</p>
|
|
</div>
|
|
|
|
<div class="header-actions">
|
|
{% if session.role in ['admin', 'payroll'] %}
|
|
<a href="{{ url_for('employees.create_employee') }}" class="btn btn-primary">
|
|
<i class="fas fa-plus"></i>
|
|
Add Employee
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>{{ stats.total_employees }}</h3>
|
|
<p>Total Employees</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-id-badge"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>{{ stats.employees_with_title }}</h3>
|
|
<p>With Job Titles</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-briefcase"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>{{ stats.unique_titles }}</h3>
|
|
<p>Unique Job Titles</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% if search %}
|
|
<div class="stat-card search-results">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-search"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>{{ stats.search_results }}</h3>
|
|
<p>Search Results</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Search and Filter Section -->
|
|
<div class="search-section">
|
|
<form method="GET" class="search-form">
|
|
<div class="search-input-group">
|
|
<input
|
|
type="text"
|
|
name="search"
|
|
value="{{ search }}"
|
|
placeholder="Search by name, employee ID, or job title..."
|
|
class="search-input"
|
|
autocomplete="off"
|
|
/>
|
|
<button type="submit" class="search-btn">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
{% if search %}
|
|
<a
|
|
href="{{ url_for('employees.employees') }}"
|
|
class="clear-search-btn"
|
|
title="Clear search"
|
|
>
|
|
<i class="fas fa-times"></i>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Employee Table -->
|
|
<div class="employees-table-container">
|
|
<div class="table-header">
|
|
<h2>
|
|
{% if search %} Search Results for "{{ search }}" {% else %} All
|
|
Employees {% endif %}
|
|
</h2>
|
|
<div class="table-info">
|
|
Showing {{ employees.items|length }} of {{ employees.total }} employees
|
|
{% if employees.pages > 1 %} (Page {{ employees.page }} of {{
|
|
employees.pages }}) {% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="employees-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Employee ID</th>
|
|
<th>Name</th>
|
|
<th>Job Title</th>
|
|
<th>Contract</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for employee in employees.items %}
|
|
<tr class="employee-row" data-employee-id="{{ employee.id }}">
|
|
<td class="row-number">
|
|
{{ loop.index + (employees.page - 1) * employees.per_page }}
|
|
</td>
|
|
|
|
<td class="employee-id">
|
|
<span class="id-badge">{{ employee.id }}</span>
|
|
</td>
|
|
|
|
<td class="employee-name">
|
|
<div class="name-container">
|
|
<div class="avatar">
|
|
<i class="fas fa-user-circle"></i>
|
|
</div>
|
|
<div class="name-details">
|
|
<h4>{{ employee.full_name }}</h4>
|
|
<p>{{ employee.firstName }} {{ employee.lastName }}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="employee-title">
|
|
{% if employee.title %}
|
|
<span class="title-badge">{{ employee.title }}</span>
|
|
{% else %}
|
|
<span class="no-title">No Title</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
<td class="contract">
|
|
<span class="contract-badge">{{ employee.contract_name }}</span>
|
|
</td>
|
|
|
|
<td class="actions">
|
|
<div class="action-buttons">
|
|
<a
|
|
href="{{ url_for('employees.employee_detail', employee_index=employee.index) }}"
|
|
class="btn btn-sm btn-info"
|
|
title="View Details"
|
|
>
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
|
|
{% if session.role in ['admin', 'payroll'] %}
|
|
<a
|
|
href="{{ url_for('employees.edit_employee', employee_index=employee.index) }}"
|
|
class="btn btn-sm btn-warning"
|
|
title="Edit Employee"
|
|
>
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
|
|
<button
|
|
class="btn btn-sm btn-danger delete-btn"
|
|
data-employee-index="{{ employee.index }}"
|
|
data-employee-name="{{ employee.full_name }}"
|
|
title="Delete Employee"
|
|
>
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if employees.pages > 1 %}
|
|
<div class="pagination-container">
|
|
<nav class="pagination-nav">
|
|
<ul class="pagination">
|
|
<!-- Previous Page -->
|
|
{% if employees.has_prev %}
|
|
<li>
|
|
<a
|
|
href="{{ url_for('employees.employees', page=employees.prev_num, search=search) }}"
|
|
class="pagination-link"
|
|
>
|
|
<i class="fas fa-chevron-left"></i>
|
|
Previous
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- Page Numbers -->
|
|
{% for page_num in employees.iter_pages() %} {% if page_num %} {% if
|
|
page_num != employees.page %}
|
|
<li>
|
|
<a
|
|
href="{{ url_for('employees.employees', page=page_num, search=search) }}"
|
|
class="pagination-link"
|
|
>
|
|
{{ page_num }}
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li>
|
|
<span class="pagination-link current">{{ page_num }}</span>
|
|
</li>
|
|
{% endif %} {% else %}
|
|
<li>
|
|
<span class="pagination-link">…</span>
|
|
</li>
|
|
{% endif %} {% endfor %}
|
|
|
|
<!-- Next Page -->
|
|
{% if employees.has_next %}
|
|
<li>
|
|
<a
|
|
href="{{ url_for('employees.employees', page=employees.next_num, search=search) }}"
|
|
class="pagination-link"
|
|
>
|
|
Next
|
|
<i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Empty State -->
|
|
{% if employees.total == 0 %}
|
|
<div class="empty-state">
|
|
<div class="empty-icon">
|
|
<i class="fas fa-users-slash"></i>
|
|
</div>
|
|
<h3>
|
|
{% if search %} No employees found for "{{ search }}" {% else %} No
|
|
employees found {% endif %}
|
|
</h3>
|
|
<p>
|
|
{% if search %} Try adjusting your search terms or
|
|
<a href="{{ url_for('employees.employees') }}">view all employees</a>. {% else %}
|
|
Get started by
|
|
<a href="{{ url_for('employees.create_employee') }}">adding your first employee</a
|
|
>. {% endif %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div id="deleteModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3><i class="fas fa-exclamation-triangle"></i> Confirm Deletion</h3>
|
|
<button class="close-modal" data-modal="deleteModal">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
Are you sure you want to delete employee
|
|
<strong id="deleteEmployeeName"></strong>?
|
|
</p>
|
|
<p class="warning-text">
|
|
<i class="fas fa-warning"></i>
|
|
This action cannot be undone. The employee will be permanently removed
|
|
from the system.
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" data-modal="deleteModal">Cancel</button>
|
|
<form id="deleteForm" method="POST" style="display: inline">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button type="submit" class="btn btn-danger">
|
|
<i class="fas fa-trash"></i>
|
|
Delete Employee
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} {% block extra_scripts %}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
console.log("🔄 Employee page JavaScript loaded");
|
|
|
|
// Delete button functionality
|
|
const deleteButtons = document.querySelectorAll(".delete-btn");
|
|
const deleteModal = document.getElementById("deleteModal");
|
|
const deleteForm = document.getElementById("deleteForm");
|
|
const deleteEmployeeName = document.getElementById("deleteEmployeeName");
|
|
|
|
console.log(`📊 Found ${deleteButtons.length} delete buttons`);
|
|
console.log("🔍 Delete modal:", deleteModal);
|
|
console.log("📝 Delete form:", deleteForm);
|
|
|
|
deleteButtons.forEach((button) => {
|
|
button.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
const employeeIndex = this.getAttribute("data-employee-index");
|
|
const employeeName = this.getAttribute("data-employee-name");
|
|
|
|
console.log(
|
|
`🗑️ Delete button clicked for employee: ${employeeName} (Index: ${employeeIndex})`
|
|
);
|
|
|
|
if (deleteEmployeeName) {
|
|
deleteEmployeeName.textContent = employeeName;
|
|
}
|
|
|
|
if (deleteForm) {
|
|
deleteForm.action = `/employees/${employeeIndex}/delete`;
|
|
console.log(`📋 Form action set to: ${deleteForm.action}`);
|
|
}
|
|
|
|
if (deleteModal) {
|
|
deleteModal.style.display = "flex";
|
|
deleteModal.style.visibility = "visible";
|
|
deleteModal.style.opacity = "1";
|
|
console.log("✅ Modal should be visible now");
|
|
}
|
|
});
|
|
});
|
|
|
|
// Enhanced modal close functionality
|
|
document.querySelectorAll("[data-modal]").forEach((element) => {
|
|
element.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
const modalId = this.getAttribute("data-modal");
|
|
const modal = document.getElementById(modalId);
|
|
if (modal) {
|
|
modal.style.display = "none";
|
|
modal.style.visibility = "hidden";
|
|
modal.style.opacity = "0";
|
|
console.log(`❌ Modal ${modalId} closed`);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Close modal when clicking outside
|
|
if (deleteModal) {
|
|
deleteModal.addEventListener("click", function (e) {
|
|
if (e.target === this) {
|
|
this.style.display = "none";
|
|
this.style.visibility = "hidden";
|
|
this.style.opacity = "0";
|
|
console.log("❌ Modal closed by clicking outside");
|
|
}
|
|
});
|
|
}
|
|
|
|
// Enhanced form submission logging
|
|
if (deleteForm) {
|
|
deleteForm.addEventListener("submit", function (event) {
|
|
console.log(`🚀 Form submitting to: ${this.action}`);
|
|
console.log("📊 Form method:", this.method);
|
|
});
|
|
}
|
|
|
|
// Search form auto-submit with debouncing (unchanged)
|
|
const searchInput = document.querySelector(".search-input");
|
|
let searchTimeout;
|
|
|
|
if (searchInput) {
|
|
searchInput.addEventListener("input", function () {
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(() => {
|
|
if (this.value.length >= 3 || this.value.length === 0) {
|
|
this.form.submit();
|
|
}
|
|
}, 500);
|
|
});
|
|
}
|
|
|
|
// Highlight search terms (unchanged)
|
|
const searchTerm = "{{ search }}";
|
|
if (searchTerm) {
|
|
highlightSearchTerms(searchTerm);
|
|
}
|
|
|
|
function highlightSearchTerms(term) {
|
|
const elements = document.querySelectorAll(
|
|
".employee-name h4, .employee-name p, .employee-title .title-badge, .employee-id .id-badge"
|
|
);
|
|
const regex = new RegExp(`(${term})`, "gi");
|
|
|
|
elements.forEach((element) => {
|
|
const text = element.textContent;
|
|
if (text.toLowerCase().includes(term.toLowerCase())) {
|
|
element.innerHTML = text.replace(regex, "<mark>$1</mark>");
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|