From 012259cd36e6c357cec51880b72a2c55770432ed Mon Sep 17 00:00:00 2001
From: Faheed <faheed@tenhal.sa>
Date: Sun, 19 Oct 2025 18:38:33 +0300
Subject: [PATCH] ...

---
 templates/user/admin_settings.html | 273 ++++++++++++-----------------
 1 file changed, 108 insertions(+), 165 deletions(-)

diff --git a/templates/user/admin_settings.html b/templates/user/admin_settings.html
index 30b6911..dd5098c 100644
--- a/templates/user/admin_settings.html
+++ b/templates/user/admin_settings.html
@@ -1,25 +1,25 @@
 {% extends "base.html" %}
 {% load static %}
 {% load i18n %}
+{% load humanize %}
 
 {% block title %}{% trans "Admin Settings" %} - KAAUH ATS{% endblock %}
+ {% block customCSS %}
 
-{% block styles %}
 <style>
     /* Theme Variables for Consistency */
     :root {
-        --color-primary: #007a88;         /* Main Teal */
-        --color-primary-dark: #004d55;    /* Dark Teal */
-        --color-background-light: #f4f6f9; /* Light Gray background */
+        --kaauh-teal: #00636e;
+        --kaauh-teal-dark: #004a53;
+        --kaauh-light-bg: #f9fbfd;
+        /* Standard Bootstrap color overrides (for pagination/badges) */
+        --color-primary: var(--kaauh-teal);
+        --color-primary-dark: var(--kaauh-teal-dark);
+        --color-background-light: #f4f6f9; /* Retaining this lighter shade for page background */
     }
-
+    
     /* Layout & Card Styling */
-    .container-fluid {
-        background-color: var(--color-background-light);
-        min-height: 100vh;
-        padding-top: 3rem;
-        padding-bottom: 3rem;
-    }
+    
     .dashboard-header {
         color: var(--color-primary-dark);
         border-bottom: 1px solid #e9ecef;
@@ -27,21 +27,7 @@
         margin-bottom: 2rem;
     }
 
-    /* Admin Feature Card Styling */
-    .feature-card {
-        background-color: #ffffff;
-        border-radius: 0.75rem;
-        border: 1px solid #e9ecef;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-        transition: transform 0.2s, box-shadow 0.2s;
-        height: 100%; /* Important for grid consistency */
-    }
-    .feature-card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-    }
-
-    /* Accent Colors */
+    /* Standard Accent Colors/Icons */
     .text-accent {
         color: var(--color-primary) !important;
     }
@@ -63,8 +49,9 @@
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
         padding: 1.5rem;
     }
+    /* Adjusted table stripe color to use theme variable */
     .table-striped > tbody > tr:nth-of-type(odd) > * {
-        background-color: rgba(0, 122, 136, 0.03); /* Light teal stripe */
+        background-color: rgba(0, 99, 110, 0.05); /* Light kaauh-teal stripe */
     }
     .page-link {
         color: var(--color-primary-dark);
@@ -74,13 +61,54 @@
         border-color: var(--color-primary) !important;
         color: #fff;
     }
+    
+    /* Action button container for better alignment and spacing */
+    .action-btns {
+        display: flex;
+        justify-content: center;
+        gap: 5px; /* Small space between icons */
+    }
+    
+    /* --- Main Action Button Style (Teal Theme) --- */
+    .btn-main-action {
+        /* Use standard Bootstrap button styles as a base */
+        background-color: var(--kaauh-teal);
+        border: 1px solid var(--kaauh-teal);
+        color: white;
+        font-weight: 600;
+        transition: all 0.2s ease;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem; /* Standard Bootstrap gap for icon/text */
+        padding: 0.5rem 1rem;
+        border-radius: 0.375rem; /* Standard Bootstrap border radius */
+        text-decoration: none;
+    }
+
+    /* Functional Hover State */
+    .btn-main-action:hover {
+        background-color: var(--kaauh-teal-dark);
+        border-color: var(--kaauh-teal-dark);
+        color: white;
+        text-decoration: none;
+    }
+    
+    /* Active/Focus State (optional but good for accessibility) */
+    .btn-main-action:focus,
+    .btn-main-action:active {
+        box-shadow: 0 0 0 0.25rem rgba(0, 99, 110, 0.5); /* Teal focus ring */
+        background-color: var(--kaauh-teal-dark);
+        border-color: var(--kaauh-teal-dark);
+        color: white;
+    }
+    
 </style>
 {% endblock %}
 
 
 {% block content %}
 
-<div class="container-fluid">
+<div class="container-fluid mt-4">
     <div class="row px-lg-4">
         <div class="col-12">
             <h1 class="h3 fw-bold dashboard-header">
@@ -88,177 +116,92 @@
             </h1>
         </div>
     </div>
-
-    {# --- User Management Section (Cards) --- #}
-    <div class="row px-lg-4 mb-5">
-        <div class="col-12">
-            <h4 class="text-secondary fw-bold mb-3">{% trans "User & Access Management" %}</h4>
-        </div>
-
-        {# 1. Manage/Update Users (Detail Page) - Placeholder link for the table below #}
-        <div class="col-md-6 col-lg-4 mb-4">
-            <a href="#user-list" class="text-decoration-none d-block">
-                <div class="feature-card p-4 text-center">
-                    <i class="fas fa-users feature-icon"></i>
-                    <h5 class="feature-title">{% trans "View Staff List" %}</h5>
-                    <p class="text-muted small mb-0">{% trans "Scroll down to view and manage the paginated list of all staff users." %}</p>
-                </div>
-            </a>
-        </div>
-
-        {# 2. Create User #}
-        <div class="col-md-6 col-lg-4 mb-4">
-            <a href="{% url 'create_staff_user' %}" class="text-decoration-none d-block">
-                <div class="feature-card p-4 text-center">
-                    <i class="fas fa-user-plus feature-icon"></i>
-                    <h5 class="feature-title">{% trans "Create New User" %}</h5>
-                    <p class="text-muted small mb-0">{% trans "Quickly add a new staff member to the Applicant Tracking System." %}</p>
-                </div>
-            </a>
-        </div>
-        
-        {# 3. Change Password (Centralized/Admin-forced) #}
-        <div class="col-md-6 col-lg-4 mb-4">
-            <a href="#" class="text-decoration-none d-block">
-                <div class="feature-card p-4 text-center">
-                    <i class="fas fa-key feature-icon"></i>
-                    <h5 class="feature-title">{% trans "Reset User Passwords" %}</h5>
-                    <p class="text-muted small mb-0">{% trans "Enforce password resets or change passwords for existing users." %}</p>
-                </div>
-            </a>
-        </div>
-    </div>
     
     {# --- Paged User Table Section --- #}
     <div class="row px-lg-4" id="user-list">
-        <div class="col-12">
-            <h4 class="text-secondary fw-bold mb-3">{% trans "Staff User List" %}</h4>
+       
+        <div class="d-flex align-items-center justify-content-between mb-3">
+        
+            <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">
-                {# Assumes 'page_obj' contains the paginated queryset from the view #}
                 <table class="table table-striped table-hover align-middle mb-0">
                     <thead>
                         <tr>
-                            <th>{% trans "ID" %}</th>
-                            <th>{% trans "Username" %}</th>
-                            <th>{% trans "Full Name" %}</th>
-                            <th>{% trans "Email" %}</th>
-                            <th>{% trans "Status" %}</th>
-                            <th class="text-center">{% trans "Actions" %}</th>
+                            <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">{% trans "Actions" %}</th>
                         </tr>
                     </thead>
                     <tbody>
                         {% for user in staffs %}
                         <tr>
                             <td>{{ user.pk }}</td>
-                            <td>{{ user.username }}</td>
                             <td>{{ user.get_full_name|default:user.first_name }}</td>
                             <td>{{ user.email }}</td>
-                            <td>
+                            <td class="text-center">
                                 {% if user.is_active %}
-                                    <span class="badge rounded-pill text-bg-success">{% trans "Active" %}</span>
+                                    <span class="badge rounded-pill bg-success-subtle text-success border border-success-subtle">{% trans "Active" %}</span>
                                 {% else %}
-                                    <span class="badge rounded-pill text-bg-secondary">{% trans "Inactive" %}</span>
+                                    <span class="badge rounded-pill bg-secondary-subtle text-secondary border border-secondary-subtle">{% trans "Inactive" %}</span>
                                 {% endif %}
                             </td>
-                            <td class="text-center text-nowrap">
-                                
-                                {# 1. Edit Button (Pencil Icon) #}
-                                <a href="#" class="btn btn-sm btn-outline-secondary me-1" title="{% trans 'Edit User' %}">
-                                    <i class="fas fa-edit"></i>
-                                </a>
+                            
+                            {# 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 %}
+                                    {% trans "Never" %}
+                                {% endif %}
+                            </td>
+                            
+                            <td class="text-center">
+                                <div class="action-btns">
+                                    {# 1. Edit Button (Pencil Icon) #}
+                                    <a href="#" class="btn btn-sm btn-outline-secondary" title="{% trans 'Edit User' %}">
+                                        <i class="fas fa-edit"></i>
+                                    </a>
 
-                                {# 2. Change Password Button (Key Icon) #}
-                                {# NOTE: You must define a URL named 'user_password_change' that accepts the user ID #}
-                                <a href="{% url 'set_staff_password' user.pk %}" class="btn btn-sm btn-outline-info me-1" title="{% trans 'Change Password' %}">
-                                    <i class="fas fa-key"></i>
-                                </a>
+                                    {# 2. Change Password Button (Key Icon) #}
+                                    <a href="{% url 'set_staff_password' user.pk %}" class="btn btn-sm btn-outline-info" title="{% trans 'Change Password' %}">
+                                        <i class="fas fa-key"></i>
+                                    </a>
 
-                                {# 3. Delete Button (Trash Icon) #}
-                                {# NOTE: You must define a URL named 'user_delete' that accepts the user ID #}
-                                <a href="#" class="btn btn-sm btn-outline-danger" title="{% trans 'Delete User' %}">
-                                    <i class="fas fa-trash-alt"></i>
-                                </a>
+                                    {# 3. Delete Button (Trash Icon) #}
+                                    <a href="#" class="btn btn-sm btn-outline-danger" title="{% trans 'Delete User' %}">
+                                        <i class="fas fa-trash-alt"></i>
+                                    </a>
+                                </div>
                             </td>
                         </tr>
                         {% empty %}
                         <tr>
-                            <td colspan="6" class="text-center text-muted">{% trans "No staff users found." %}</td>
+                            <td colspan="8" class="text-center text-muted py-4">{% trans "No staff users found." %}</td>
                         </tr>
                         {% endfor %}
                     </tbody>
                 </table>
             </div>
             
-            {# --- Pagination Controls --- #}
-            {% if page_obj.has_other_pages %}
-            <nav class="mt-4" aria-label="Page navigation">
-                <ul class="pagination justify-content-center mb-0">
-                    
-                    {# Previous Button #}
-                    {% if page_obj.has_previous %}
-                        <li class="page-item">
-                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
-                                <span aria-hidden="true">&laquo;</span>
-                            </a>
-                        </li>
-                    {% else %}
-                        <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
-                    {% endif %}
-                    
-                    {# Page Numbers #}
-                    {% for i in page_obj.paginator.page_range %}
-                        {% if page_obj.number == i %}
-                            <li class="page-item active" aria-current="page"><span class="page-link">{{ i }}</span></li>
-                        {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
-                            <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
-                        {% endif %}
-                    {% endfor %}
-                    
-                    {# Next Button #}
-                    {% if page_obj.has_next %}
-                        <li class="page-item">
-                            <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
-                                <span aria-hidden="true">&raquo;</span>
-                            </a>
-                        </li>
-                    {% else %}
-                        <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
-                    {% endif %}
-                </ul>
-            </nav>
-            {% endif %}
-        </div>
-    </div>
-    
-    {# --- Permissions & Group Management Section --- #}
-    <div class="row px-lg-4 mt-5">
-        <div class="col-12">
-            <h4 class="text-secondary fw-bold mb-3">{% trans "Role & Permissions" %}</h4>
-        </div>
-
-        {# 4. Manage Groups #}
-        <div class="col-md-6 col-lg-4 mb-4">
-            <a href="#" class="text-decoration-none d-block">
-                <div class="feature-card p-4 text-center">
-                    <i class="fas fa-layer-group feature-icon"></i>
-                    <h5 class="feature-title">{% trans "Manage User Groups" %}</h5>
-                    <p class="text-muted small mb-0">{% trans "Edit, create, and assign logical permission groups (e.g., HR, Manager)." %}</p>
-                </div>
-            </a>
-        </div>
-        
-        {# 5. Manage Permissions #}
-        <div class="col-md-6 col-lg-4 mb-4">
-            <a href="#" class="text-decoration-none d-block">
-                <div class="feature-card p-4 text-center">
-                    <i class="fas fa-shield-alt feature-icon"></i>
-                    <h5 class="feature-title">{% trans "View Permissions" %}</h5>
-                    <p class="text-muted small mb-0">{% trans "Review all available content-level permissions in the system." %}</p>
-                </div>
-            </a>
+           
         </div>
     </div>
 </div>