180 lines
8.6 KiB
HTML
180 lines
8.6 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
{% load i18n %}
|
|
{% load humanize %}
|
|
|
|
{% block title %}{% trans "Admin Settings" %} - ATS{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-6">
|
|
<ol class="flex items-center space-x-2 text-sm">
|
|
<li>
|
|
<a href="{% url 'settings' %}" class="text-gray-600 hover:text-gray-900 no-underline">
|
|
{% trans "Settings" %}
|
|
</a>
|
|
</li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="font-semibold" style="color: #9d2235;">
|
|
{% trans "Staff Settings" %}
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<div class="mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-900 flex items-center gap-3">
|
|
<i class="fas fa-cogs" style="color: #9d2235;"></i>
|
|
{% trans "Staff Management Dashboard" %}
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Controls Bar -->
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-700">
|
|
{% trans "Staff User List" %}
|
|
</h2>
|
|
|
|
<a href="{% url 'create_staff_user' %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all duration-200"
|
|
style="background-color: #9d2235; color: white;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
<i class="fas fa-user-plus"></i>
|
|
<span>{% trans "Create New User" %}</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Table Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b-2 border-gray-200">
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-900">
|
|
{% trans "ID" %}
|
|
</th>
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-900">
|
|
{% trans "Full Name" %}
|
|
</th>
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-900">
|
|
{% trans "Email" %}
|
|
</th>
|
|
<th class="text-center py-3 px-4 text-sm font-semibold text-gray-900">
|
|
{% trans "Status" %}
|
|
</th>
|
|
<th class="text-center py-3 px-4 text-sm font-semibold text-gray-900">
|
|
{% trans "First Join" %}
|
|
</th>
|
|
<th class="text-center py-3 px-4 text-sm font-semibold text-gray-900">
|
|
{% trans "Last Login" %}
|
|
</th>
|
|
<th class="text-center py-3 px-4 text-sm font-semibold text-gray-900" style="min-width: 250px;">
|
|
{% trans "Actions" %}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for user in staffs %}
|
|
<tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
|
|
<td class="py-3 px-4 text-sm text-gray-600">{{ user.pk }}</td>
|
|
<td class="py-3 px-4 text-sm text-gray-900 font-medium">
|
|
{{ user.get_full_name|default:user.first_name }}
|
|
</td>
|
|
<td class="py-3 px-4 text-sm text-gray-600">{{ user.email }}</td>
|
|
|
|
<!-- Status Badge -->
|
|
<td class="py-3 px-4 text-center">
|
|
{% if user.is_active %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
|
|
style="background-color: rgba(157, 34, 53, 0.1); color: #9d2235;">
|
|
{% trans "Active" %}
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-600">
|
|
{% trans "Inactive" %}
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
<!-- First Join Date -->
|
|
<td class="py-3 px-4 text-center">
|
|
<span class="text-sm text-gray-500" title="{{ user.date_joined|date:'DATETIME_FORMAT' }}">
|
|
{{ user.date_joined|date:"d M Y" }}
|
|
</span>
|
|
</td>
|
|
|
|
<!-- Last Login Date -->
|
|
<td class="py-3 px-4 text-center">
|
|
{% if user.last_login %}
|
|
<span class="text-sm text-gray-600" title="{{ user.last_login|date:'DATETIME_FORMAT' }}">
|
|
{{ user.last_login|naturaltime }}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-sm text-gray-400">—</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
<!-- Actions -->
|
|
<td class="py-3 px-4 text-center">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<!-- Change Password Button -->
|
|
<a href="{% url 'set_staff_password' user.pk %}"
|
|
class="inline-flex items-center justify-center w-8 h-8 rounded-lg transition-colors duration-200"
|
|
style="color: #9d2235;"
|
|
onmouseover="this.style.color='#7a1a29'"
|
|
onmouseout="this.style.color='#9d2235'"
|
|
title="{% trans 'Change Password' %}">
|
|
<i class="fas fa-key"></i>
|
|
</a>
|
|
|
|
<!-- Toggle Status Button -->
|
|
{% if user.is_active %}
|
|
<form method="post" action="{% url 'account_toggle_status' user.pk %}" class="inline-block">
|
|
{% csrf_token %}
|
|
<button type="submit"
|
|
class="inline-flex items-center gap-1 px-3 py-1 rounded-lg text-sm font-medium transition-colors duration-200"
|
|
style="background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;"
|
|
onmouseover="this.style.backgroundColor='#f5c6cb'"
|
|
onmouseout="this.style.backgroundColor='#f8d7da'"
|
|
title="{% trans 'Deactivate User' %}">
|
|
<i class="fas fa-times-circle"></i>
|
|
<span>{% trans "Deactivate" %}</span>
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<form method="post" action="{% url 'account_toggle_status' user.pk %}" class="inline-block">
|
|
{% csrf_token %}
|
|
<button type="submit"
|
|
class="inline-flex items-center gap-1 px-3 py-1 rounded-lg text-sm font-medium transition-colors duration-200"
|
|
style="background-color: rgba(157, 34, 53, 0.15); color: #9d2235; border: 1px solid rgba(157, 34, 53, 0.2);"
|
|
onmouseover="this.style.backgroundColor='rgba(157, 34, 53, 0.25)'"
|
|
onmouseout="this.style.backgroundColor='rgba(157, 34, 53, 0.15)'"
|
|
title="{% trans 'Activate User' %}">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>{% trans "Activate" %}</span>
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="7" class="py-8 text-center text-gray-500 text-sm">
|
|
{% trans "No staff users found." %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="mt-6">
|
|
{% include "includes/paginator.html" %}
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %} |