510 lines
17 KiB
HTML
510 lines
17 KiB
HTML
{% extends "base_authenticated.html" %}
|
|
{% block title %}User Management - QR Code Management{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<!-- Dedicated Users Page CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/users.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="users-page">
|
|
<div class="users-header">
|
|
<div class="header-content">
|
|
<h1>
|
|
<i class="fas fa-users"></i>
|
|
User Management
|
|
</h1>
|
|
<p>Manage system users and their access permissions</p>
|
|
</div>
|
|
|
|
<div class="header-actions">
|
|
<a href="{{ url_for('create_user') }}" class="btn btn-primary">
|
|
<i class="fas fa-user-plus"></i>
|
|
Add New User
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Statistics -->
|
|
<div class="user-stats">
|
|
<div class="stat-card admin">
|
|
<div class="stat-icon admin">
|
|
<i class="fas fa-crown"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>{{ users|selectattr('role', 'equalto', 'admin')|selectattr('active_status', 'equalto', True)|list|length }}</h3>
|
|
<p>Active Administrators</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card staff">
|
|
<div class="stat-icon staff">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>{{ users|selectattr('role', 'equalto', 'staff')|selectattr('active_status', 'equalto', True)|list|length }}</h3>
|
|
<p>Active Staff Members</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card payroll">
|
|
<div class="stat-icon payroll">
|
|
<i class="fas fa-calculator"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>{{ users|selectattr('role', 'equalto', 'payroll')|selectattr('active_status', 'equalto', True)|list|length }}</h3>
|
|
<p>Payroll Specialists</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card project-manager">
|
|
<div class="stat-icon project-manager">
|
|
<i class="fas fa-project-diagram"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>{{ users|selectattr('role', 'equalto', 'project_manager')|selectattr('active_status', 'equalto', True)|list|length }}</h3>
|
|
<p>Project Managers</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card active">
|
|
<div class="stat-icon active">
|
|
<i class="fas fa-user-check"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>{{ users|selectattr('active_status', 'equalto', True)|list|length }}</h3>
|
|
<p>Total Active Users</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card inactive">
|
|
<div class="stat-icon inactive">
|
|
<i class="fas fa-user-times"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>{{ users|selectattr('active_status', 'equalto', False)|list|length }}</h3>
|
|
<p>Inactive Users</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Controls -->
|
|
<div class="users-controls">
|
|
<div class="search-filters">
|
|
<div class="search-box">
|
|
<i class="fas fa-search"></i>
|
|
<input
|
|
type="text"
|
|
id="searchUsers"
|
|
placeholder="Search users by name, email, or username..."
|
|
/>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<select id="roleFilter" class="filter-select">
|
|
<option value="">All Roles</option>
|
|
<option value="admin">Administrators</option>
|
|
<option value="staff">Staff Members</option>
|
|
<option value="payroll">Payroll Specialists</option>
|
|
<option value="project_manager">Project Managers</option>
|
|
</select>
|
|
|
|
<select id="statusFilter" class="filter-select">
|
|
<option value="">All Status</option>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="view-options">
|
|
<button class="btn btn-secondary btn-sm" onclick="refreshUserList()">
|
|
<i class="fas fa-sync-alt"></i>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Table -->
|
|
<div class="users-table-container">
|
|
<table class="users-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>User Information</th>
|
|
<th>Contact</th>
|
|
<th>Role</th>
|
|
<th>Status</th>
|
|
<th>QR Codes</th>
|
|
<th>Created</th>
|
|
<th>Last Login</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="usersTableBody">
|
|
{% for user in users %}
|
|
<tr
|
|
class="user-row"
|
|
data-name="{{ user.full_name.lower() }}"
|
|
data-email="{{ user.email.lower() }}"
|
|
data-username="{{ user.username.lower() }}"
|
|
data-role="{{ user.role }}"
|
|
data-status="{{ 'active' if user.active_status else 'inactive' }}"
|
|
>
|
|
<td>{{ loop.index }}</td>
|
|
|
|
<!-- User Information -->
|
|
<td>
|
|
<div class="user-info">
|
|
<div class="user-avatar">
|
|
<i class="fas fa-user-circle"></i>
|
|
</div>
|
|
<div class="user-details">
|
|
<h4>{{ user.full_name }}</h4>
|
|
<p>@{{ user.username }}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Contact -->
|
|
<td class="user-contact">
|
|
<div class="contact-email">
|
|
<i class="fas fa-envelope"></i>
|
|
{{ user.email }}
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Role -->
|
|
<td>
|
|
<div class="user-role {{ user.role }}">
|
|
{% if user.role == 'admin' %}
|
|
<i class="fas fa-crown"></i>
|
|
Administrator
|
|
{% elif user.role == 'staff' %}
|
|
<i class="fas fa-user"></i>
|
|
Staff User
|
|
{% elif user.role == 'payroll' %}
|
|
<i class="fas fa-calculator"></i>
|
|
Payroll Specialist
|
|
{% elif user.role == 'project_manager' %}
|
|
<i class="fas fa-project-diagram"></i>
|
|
Project Manager
|
|
{% else %}
|
|
<i class="fas fa-user"></i>
|
|
{{ user.role.title() }}
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Status -->
|
|
<td>
|
|
<div class="user-status {{ 'active' if user.active_status else 'inactive' }}">
|
|
<i class="fas fa-{{ 'check-circle' if user.active_status else 'times-circle' }}"></i>
|
|
{{ 'Active' if user.active_status else 'Inactive' }}
|
|
</div>
|
|
</td>
|
|
|
|
<!-- QR Codes Count -->
|
|
<td class="user-qr-count">
|
|
<div class="qr-stats">
|
|
<span class="qr-count">{{ user.created_qr_codes.filter_by(active_status=True).count() }}</span>
|
|
<small>QR Codes</small>
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Created Date -->
|
|
<td>
|
|
{% if user.created_date %}
|
|
<div class="date-info">
|
|
<div class="date-main">{{ user.created_date.strftime('%m/%d/%Y') }}</div>
|
|
<div class="date-time">{{ user.created_date.strftime('%I:%M %p') }}</div>
|
|
</div>
|
|
{% else %}
|
|
<span class="never-logged-in">Unknown</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
<!-- Last Login -->
|
|
<td>
|
|
{% if user.last_login_date %}
|
|
<div class="date-info">
|
|
<div class="date-main">{{ user.last_login_date.strftime('%m/%d/%Y') }}</div>
|
|
<div class="date-time">{{ user.last_login_date.strftime('%I:%M %p') }}</div>
|
|
</div>
|
|
{% else %}
|
|
<span class="never-logged-in">Never</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
<!-- Actions -->
|
|
<td class="user-actions">
|
|
<div class="action-buttons">
|
|
<!-- Edit Button -->
|
|
<a href="{{ url_for('edit_user', user_id=user.id) }}"
|
|
class="btn btn-sm btn-primary"
|
|
title="Edit User">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
|
|
{% if user.role != 'admin' %}
|
|
<!-- Promote to Admin -->
|
|
<a href="{{ url_for('promote_user', user_id=user.id) }}"
|
|
class="btn btn-sm btn-success"
|
|
title="Promote to Admin"
|
|
onclick="return confirm('Are you sure you want to promote {{ user.full_name }} to admin?')">
|
|
<i class="fas fa-arrow-up"></i>
|
|
</a>
|
|
{% else %}
|
|
<!-- Demote from Admin -->
|
|
{% if users|selectattr('role', 'equalto', 'admin')|selectattr('active_status', 'equalto', True)|list|length > 1 %}
|
|
<a href="{{ url_for('demote_user', user_id=user.id) }}"
|
|
class="btn btn-sm btn-warning"
|
|
title="Demote from Admin"
|
|
onclick="return confirm('Are you sure you want to demote {{ user.full_name }} from admin?')">
|
|
<i class="fas fa-arrow-down"></i>
|
|
</a>
|
|
{% else %}
|
|
<button class="btn btn-sm btn-secondary"
|
|
title="Cannot demote last admin" disabled>
|
|
<i class="fas fa-arrow-down"></i>
|
|
</button>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<!-- Status Toggle -->
|
|
{% if user.active_status %}
|
|
<button class="btn btn-sm btn-danger"
|
|
title="Deactivate User"
|
|
onclick="toggleUserStatus({{ user.id }}, false)">
|
|
<i class="fas fa-user-times"></i>
|
|
</button>
|
|
{% else %}
|
|
<button class="btn btn-sm btn-success"
|
|
title="Activate User"
|
|
onclick="toggleUserStatus({{ user.id }}, true)">
|
|
<i class="fas fa-user-check"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- No Users Message -->
|
|
{% if not users %}
|
|
<div class="no-users-message">
|
|
<div class="no-users-content">
|
|
<i class="fas fa-users"></i>
|
|
<h3>No Users Found</h3>
|
|
<p>There are currently no users in the system.</p>
|
|
<a href="{{ url_for('create_user') }}" class="btn btn-primary">
|
|
<i class="fas fa-user-plus"></i>
|
|
Create First User
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const searchInput = document.getElementById('searchUsers');
|
|
const roleFilter = document.getElementById('roleFilter');
|
|
const statusFilter = document.getElementById('statusFilter');
|
|
const userRows = document.querySelectorAll('.user-row');
|
|
|
|
// Search and filter functionality
|
|
function filterUsers() {
|
|
const searchTerm = searchInput.value.toLowerCase();
|
|
const selectedRole = roleFilter.value;
|
|
const selectedStatus = statusFilter.value;
|
|
|
|
userRows.forEach(row => {
|
|
const name = row.dataset.name || '';
|
|
const email = row.dataset.email || '';
|
|
const username = row.dataset.username || '';
|
|
const role = row.dataset.role || '';
|
|
const status = row.dataset.status || '';
|
|
|
|
const matchesSearch = !searchTerm ||
|
|
name.includes(searchTerm) ||
|
|
email.includes(searchTerm) ||
|
|
username.includes(searchTerm);
|
|
|
|
const matchesRole = !selectedRole || role === selectedRole;
|
|
const matchesStatus = !selectedStatus || status === selectedStatus;
|
|
|
|
if (matchesSearch && matchesRole && matchesStatus) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
updateRowNumbers();
|
|
}
|
|
|
|
function updateRowNumbers() {
|
|
const visibleRows = Array.from(userRows).filter(row => row.style.display !== 'none');
|
|
visibleRows.forEach((row, index) => {
|
|
const numberCell = row.querySelector('td:first-child');
|
|
if (numberCell) {
|
|
numberCell.textContent = index + 1;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Event listeners
|
|
searchInput.addEventListener('input', filterUsers);
|
|
roleFilter.addEventListener('change', filterUsers);
|
|
statusFilter.addEventListener('change', filterUsers);
|
|
|
|
// Initial filter on page load
|
|
filterUsers();
|
|
});
|
|
|
|
function refreshUserList() {
|
|
window.location.reload();
|
|
}
|
|
|
|
function toggleUserStatus(userId, newStatus) {
|
|
const action = newStatus ? 'activate' : 'deactivate';
|
|
const message = `Are you sure you want to ${action} this user?`;
|
|
|
|
if (confirm(message)) {
|
|
// Show loading state
|
|
const button = event.target.closest('button');
|
|
const originalHTML = button.innerHTML;
|
|
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
|
button.disabled = true;
|
|
|
|
// Make AJAX call to toggle status
|
|
fetch(`/users/${userId}/toggle_status`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
},
|
|
body: JSON.stringify({
|
|
new_status: newStatus
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Update the UI immediately
|
|
const userRow = button.closest('.user-row');
|
|
const statusCell = userRow.querySelector('.user-status');
|
|
const statusToggleCell = userRow.querySelector('.user-actions');
|
|
|
|
// Update status badge
|
|
if (data.new_status) {
|
|
statusCell.innerHTML = '<div class="user-status active"><i class="fas fa-check-circle"></i> Active</div>';
|
|
} else {
|
|
statusCell.innerHTML = '<div class="user-status inactive"><i class="fas fa-times-circle"></i> Inactive</div>';
|
|
}
|
|
|
|
// Update the button
|
|
if (data.new_status) {
|
|
button.className = 'btn btn-sm btn-danger';
|
|
button.title = 'Deactivate User';
|
|
button.setAttribute('onclick', `toggleUserStatus(${userId}, false)`);
|
|
button.innerHTML = '<i class="fas fa-user-times"></i>';
|
|
} else {
|
|
button.className = 'btn btn-sm btn-success';
|
|
button.title = 'Activate User';
|
|
button.setAttribute('onclick', `toggleUserStatus(${userId}, true)`);
|
|
button.innerHTML = '<i class="fas fa-user-check"></i>';
|
|
}
|
|
|
|
button.disabled = false;
|
|
|
|
// Show success message
|
|
showNotification(data.message, 'success');
|
|
|
|
} else {
|
|
// Show error message
|
|
showNotification(data.message, 'error');
|
|
button.innerHTML = originalHTML;
|
|
button.disabled = false;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
showNotification('Network error. Please try again.', 'error');
|
|
button.innerHTML = originalHTML;
|
|
button.disabled = false;
|
|
});
|
|
}
|
|
}
|
|
|
|
function showNotification(message, type) {
|
|
// Create notification element
|
|
const notification = document.createElement('div');
|
|
notification.className = `alert alert-${type} notification`;
|
|
notification.innerHTML = `
|
|
<i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
|
|
${message}
|
|
<button class="alert-close" onclick="this.parentElement.remove()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
`;
|
|
|
|
// Add notification to page
|
|
document.body.appendChild(notification);
|
|
|
|
// Style the notification
|
|
Object.assign(notification.style, {
|
|
position: 'fixed',
|
|
top: '20px',
|
|
right: '20px',
|
|
zIndex: '9999',
|
|
minWidth: '300px',
|
|
padding: '12px 16px',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
|
backgroundColor: type === 'success' ? '#10b981' : '#ef4444',
|
|
color: 'white',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
animation: 'slideInRight 0.3s ease-out'
|
|
});
|
|
|
|
// Auto remove after 5 seconds
|
|
setTimeout(() => {
|
|
if (notification.parentElement) {
|
|
notification.style.animation = 'slideOutRight 0.3s ease-out';
|
|
setTimeout(() => notification.remove(), 300);
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
// Add CSS animations for notifications
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes slideInRight {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
@keyframes slideOutRight {
|
|
from { transform: translateX(0); opacity: 1; }
|
|
to { transform: translateX(100%); opacity: 0; }
|
|
}
|
|
.alert-close {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin-left: auto;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
</script>
|
|
{% endblock %} |