Integrated employee management
This commit is contained in:
Nguyen Ngo
@@ -0,0 +1,374 @@
|
||||
{% 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') }}" 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.user_role == 'admin' %}
|
||||
<a href="{{ url_for('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') }}" 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 ID</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-id">
|
||||
<span class="contract-badge">{{ employee.contractId }}</span>
|
||||
</td>
|
||||
|
||||
<td class="actions">
|
||||
<div class="action-buttons">
|
||||
<a href="{{ url_for('employee_detail', employee_index=employee.index) }}"
|
||||
class="btn btn-sm btn-info"
|
||||
title="View Details">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
|
||||
{% if session.user_role == 'admin' %}
|
||||
<a href="{{ url_for('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', 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', 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', 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') }}">view all employees</a>.
|
||||
{% else %}
|
||||
Get started by <a href="{{ url_for('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;">
|
||||
<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() {
|
||||
// Delete button functionality
|
||||
const deleteButtons = document.querySelectorAll('.delete-btn');
|
||||
const deleteModal = document.getElementById('deleteModal');
|
||||
const deleteForm = document.getElementById('deleteForm');
|
||||
const deleteEmployeeName = document.getElementById('deleteEmployeeName');
|
||||
|
||||
deleteButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const employeeIndex = this.getAttribute('data-employee-index');
|
||||
const employeeName = this.getAttribute('data-employee-name');
|
||||
|
||||
deleteEmployeeName.textContent = employeeName;
|
||||
deleteForm.action = `/employees/${employeeIndex}/delete`;
|
||||
deleteModal.style.display = 'flex';
|
||||
});
|
||||
});
|
||||
|
||||
// Modal close functionality
|
||||
document.querySelectorAll('[data-modal]').forEach(element => {
|
||||
element.addEventListener('click', function() {
|
||||
const modalId = this.getAttribute('data-modal');
|
||||
document.getElementById(modalId).style.display = 'none';
|
||||
});
|
||||
});
|
||||
|
||||
// Close modal when clicking outside
|
||||
deleteModal.addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
this.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Search form auto-submit with debouncing
|
||||
const searchInput = document.querySelector('.search-input');
|
||||
let searchTimeout;
|
||||
|
||||
searchInput.addEventListener('input', function() {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
if (this.value.length >= 3 || this.value.length === 0) {
|
||||
this.form.submit();
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// Highlight search terms
|
||||
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 %}
|
||||
Reference in New Issue
Block a user