272 lines
11 KiB
HTML
272 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
{% load i18n %}
|
|
{% load humanize %}
|
|
|
|
{% block title %}{% trans "Admin Settings" %} - KAAUH ATS{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
|
|
<style>
|
|
/* Theme Variables for Consistency */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-light-bg: #f9fbfd;
|
|
--kaauh-border: #e9ecef;
|
|
|
|
/* Standardized Colors */
|
|
--color-primary: var(--kaauh-teal);
|
|
--color-primary-dark: var(--kaauh-teal-dark);
|
|
--color-success: #28a745;
|
|
--color-secondary: #6c757d;
|
|
}
|
|
|
|
/* Layout & Card Styling */
|
|
.dashboard-header {
|
|
color: var(--color-primary-dark);
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
padding-bottom: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Standard Accent Colors/Icons */
|
|
.text-accent {
|
|
color: var(--color-primary) !important;
|
|
}
|
|
|
|
/* Table Specific Styling */
|
|
.table-card {
|
|
background-color: #ffffff;
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
/* Table Rows */
|
|
.table-striped > tbody > tr:nth-of-type(odd) > * {
|
|
background-color: rgba(0, 99, 110, 0.03); /* Very light kaauh-teal stripe */
|
|
}
|
|
.table thead th {
|
|
border-bottom: 2px solid var(--kaauh-border);
|
|
font-weight: 600;
|
|
color: var(--kaauh-primary-text, #343a40);
|
|
}
|
|
|
|
/* Status Badges */
|
|
.badge-active {
|
|
background-color: rgba(0, 99, 110, 0.1); /* Light Teal background */
|
|
color: var(--kaauh-teal);
|
|
font-weight: 600;
|
|
padding: 0.4em 0.8em;
|
|
}
|
|
.badge-inactive {
|
|
background-color: rgba(108, 117, 125, 0.1); /* Light Gray background */
|
|
color: var(--color-secondary);
|
|
font-weight: 600;
|
|
padding: 0.4em 0.8em;
|
|
}
|
|
|
|
/* Action button container for better alignment and spacing */
|
|
.action-btns {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0.5rem; /* Increased space between buttons */
|
|
}
|
|
|
|
/* --- Main Action Button (Create User) --- */
|
|
.btn-main-action {
|
|
background-color: var(--kaauh-teal);
|
|
border: 1px solid var(--kaauh-teal);
|
|
color: white;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
.btn-main-action:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal-dark);
|
|
color: white; /* Ensure text remains white on hover */
|
|
}
|
|
|
|
/* --- Secondary Action Buttons (Table Row) --- */
|
|
.btn-table-action {
|
|
background: none;
|
|
border: none;
|
|
padding: 0.5rem; /* Make the click area larger */
|
|
color: var(--kaauh-teal); /* Default icon color */
|
|
transition: color 0.2s ease;
|
|
}
|
|
.btn-table-action:hover {
|
|
color: var(--kaauh-teal-dark);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Toggle Status Button Styling */
|
|
.btn-toggle-status {
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
/* Deactivate (Red/Danger) */
|
|
.btn-deactivate {
|
|
background-color: #f8d7da; /* Light Red */
|
|
color: #721c24; /* Dark Red Text */
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.btn-deactivate:hover {
|
|
background-color: #f5c6cb;
|
|
}
|
|
|
|
/* Activate (Teal/Primary) */
|
|
.btn-activate {
|
|
background-color: rgba(0, 99, 110, 0.15); /* Light Teal */
|
|
color: var(--kaauh-teal-dark);
|
|
border: 1px solid rgba(0, 99, 110, 0.2);
|
|
}
|
|
.btn-activate:hover {
|
|
background-color: rgba(0, 99, 110, 0.25);
|
|
}
|
|
|
|
</style>
|
|
{% endblock %}
|
|
|
|
|
|
{% block content %}
|
|
|
|
<div class="container-fluid py-4">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'settings' %}" class="text-decoration-none text-secondary">{% trans "Settings" %}</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page" style="
|
|
color: #F43B5E; /* Rosy Accent Color */
|
|
font-weight: 600;
|
|
">{% trans "Staff Settings" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="row px-lg-4">
|
|
<div class="col-12">
|
|
<h1 class="h3 fw-bold dashboard-header">
|
|
<i class="fas fa-cogs me-3 text-accent"></i>{% trans "Staff Management Dashboard" %}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
{# --- Paged User Table Section --- #}
|
|
<div class="row px-lg-4" id="user-list">
|
|
|
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
|
|
|
<h4 class="text-secondary fw-bold mb-0">{% trans "Staff User List" %}</h4>
|
|
|
|
{# 1. Create User Button - Using the enhanced btn-main-action class #}
|
|
<a href="{% url 'create_staff_user' %}" class="btn btn-main-action">
|
|
<i class="fas fa-user-plus"></i>{% trans "Create New User" %}
|
|
</a>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 table-card">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{% trans "ID" %}</th>
|
|
<th scope="col">{% trans "Full Name" %}</th>
|
|
<th scope="col">{% trans "Email" %}</th>
|
|
<th scope="col" class="text-center">{% trans "Status" %}</th>
|
|
<th scope="col" class="text-center">{% trans "First Join" %}</th>
|
|
<th scope="col" class="text-center">{% trans "Last Login" %}</th>
|
|
<th scope="col" class="text-center" style="min-width: 250px;">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
{% for user in staffs %}
|
|
<tr>
|
|
<td>{{ user.pk }}</td>
|
|
<td>{{ user.get_full_name|default:user.first_name }}</td>
|
|
<td>{{ user.email }}</td>
|
|
|
|
{# Column: Status Badge (Improved Styling) #}
|
|
<td class="text-center">
|
|
{% if user.is_active %}
|
|
<span class="badge rounded-pill badge-active">{% trans "Active" %}</span>
|
|
{% else %}
|
|
<span class="badge rounded-pill badge-inactive">{% trans "Inactive" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
{# Column: First Join Date #}
|
|
<td class="small text-muted text-center" title="{{ user.date_joined|date:'DATETIME_FORMAT' }}">
|
|
{{ user.date_joined|date:"d M Y" }}
|
|
</td>
|
|
|
|
{# Column: Last Login Date #}
|
|
<td class="small text-center">
|
|
{% if user.last_login %}
|
|
<span title="{{ user.last_login|date:'DATETIME_FORMAT' }}">{{ user.last_login|naturaltime }}</span>
|
|
{% else %}
|
|
—
|
|
{% endif %}
|
|
</td>
|
|
|
|
{# Column: Actions #}
|
|
<td class="text-center">
|
|
<div class="action-btns">
|
|
|
|
{% comment %} {# 1. Edit/Detail Button (Pencil Icon) - Added common action #}
|
|
<a href="{% url 'edit_staff_user' user.pk %}" class="btn btn-sm btn-outline-secondary" title="{% trans 'Edit User' %}">
|
|
<i class="fas fa-pencil"></i>
|
|
</a> {% endcomment %}
|
|
|
|
{# 2. Change Password Button (Key Icon) #}
|
|
<a href="{% url 'set_staff_password' user.pk %}" class="btn btn-sm btn-main-action" title="{% trans 'Change Password' %}">
|
|
<i class="fas fa-key"></i>
|
|
</a>
|
|
|
|
{# 3. Toggle Status Button (Improved Button Styling) #}
|
|
{% if user.is_active %}
|
|
<form method="post" action="{% url 'account_toggle_status' user.pk %}" class="d-inline">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn-toggle-status btn-deactivate" title="{% trans 'Deactivate User' %}">
|
|
<i class="fas fa-times-circle"></i> {% trans "Deactivate" %}
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<form method="post" action="{% url 'account_toggle_status' user.pk %}" class="d-inline">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn-toggle-status btn-activate" title="{% trans 'Activate User' %}">
|
|
<i class="fas fa-check-circle"></i> {% trans "Activate" %}
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="7" class="text-center text-muted py-4">{% trans "No staff users found." %}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% include "includes/paginator.html" %}
|
|
|
|
{# NOTE: Add Pagination links here if the `staffs` object is a Paginator object #}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |