From 1f0877964b7051cf1fcffe8693fac6866bf3aea5 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 15 Jun 2026 11:28:57 +0100
Subject: [PATCH] Enhance user view and list UI with improved layout and
 functionality

---
 generic/templates/generic/user_view.html | 106 +++++++++++++----------
 templates/user_list_view.html            |  82 ++++++++++--------
 2 files changed, 108 insertions(+), 80 deletions(-)

diff --git a/generic/templates/generic/user_view.html b/generic/templates/generic/user_view.html
index 5053dfdf..04e5e6f7 100644
--- a/generic/templates/generic/user_view.html
+++ b/generic/templates/generic/user_view.html
@@ -7,51 +7,69 @@
 {% endblock %}
 
 {% block content %}
-    <a href='{% url "trainees" %}'>Trainees list</a>
+    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+        <h2>Accounts</h2>
+        <div class="d-flex gap-2">
+            <a href='{% url "trainees" %}' class="btn btn-outline-info">
+                <i class="bi bi-list-ul me-1"></i>Trainees list
+            </a>
+            <a href="{% url 'create_user' %}" class="btn btn-primary">
+                <i class="bi bi-person-plus me-1"></i>Create single user
+            </a>
+            <a href="{% url 'accounts_bulk_create' %}" class="btn btn-outline-primary">
+                <i class="bi bi-people me-1"></i>Bulk create users
+            </a>
+        </div>
+    </div>
 
-    <details class="bulk-edit">
-        <summary>
+    <details class="bulk-edit card mb-3">
+        <summary class="card-header cursor-pointer fw-bold">
             Bulk edit
         </summary>
-        <div id="htmx-info"></div>
-        <div id="htmx-options"></div>
-        <button id="bulk-delete-supervisors-button"
-                title="Deletes the supervisors of all selected users"
-                hx-post="{% url 'generic:users_bulk_delete_supervisors' %}"
-                hx-include="[name='selection']"
-                hx-confirm="This will delete supervisors from all selected users, are you sure you wish to continue?"
-                hx-target="#htmx-info"
-                _='on click put "" into #htmx-options'
-        >Delete supervisors</button>
-        <button id="bulk-edit-grade-button"
-                hx-post="{% url 'generic:users_bulk_edit' %}"
-                hx-include="[name='selection']"
-                hx-target="#htmx-options"
-                title="Changes the selected users grade."
-
-        >Edit grade</button>
-        <button id="bulk-add-group-button"
-                hx-post="{% url 'generic:users_bulk_edit' %}"
-                hx-include="[name='selection']"
-                hx-target="#htmx-options"
-                title="Adds the selected user to a group."
-
-        >Add group</button>
-        <button id="bulk-remove-group-button"
-                hx-post="{% url 'generic:users_bulk_edit' %}"
-                hx-include="[name='selection']"
-                hx-target="#htmx-options"
-                title="Removes the selected user from a group."
-
-        >Remove group</button>
-        <button id="bulk-deactivate-user-button"
-                hx-post="{% url 'generic:users_bulk_edit' %}"
-                hx-include="[name='selection']"
-                hx-target="#htmx-options"
-                hx-confirm="This will deactivate all selected users, are you sure you wish to continue?"
-                title="Deactivates the selected users"
-
-        >Deactivate</button>
+        <div class="card-body">
+            <div id="htmx-info" class="mb-2"></div>
+            <div id="htmx-options" class="mb-3"></div>
+            <div class="d-flex flex-wrap gap-2">
+                <button id="bulk-delete-supervisors-button"
+                        class="btn btn-sm btn-danger"
+                        title="Deletes the supervisors of all selected users"
+                        hx-post="{% url 'generic:users_bulk_delete_supervisors' %}"
+                        hx-include="[name='selection']"
+                        hx-confirm="This will delete supervisors from all selected users, are you sure you wish to continue?"
+                        hx-target="#htmx-info"
+                        _='on click put "" into #htmx-options'
+                >Delete supervisors</button>
+                <button id="bulk-edit-grade-button"
+                        class="btn btn-sm btn-secondary"
+                        hx-post="{% url 'generic:users_bulk_edit' %}"
+                        hx-include="[name='selection']"
+                        hx-target="#htmx-options"
+                        title="Changes the selected users grade."
+                >Edit grade</button>
+                <button id="bulk-add-group-button"
+                        class="btn btn-sm btn-secondary"
+                        hx-post="{% url 'generic:users_bulk_edit' %}"
+                        hx-include="[name='selection']"
+                        hx-target="#htmx-options"
+                        title="Adds the selected user to a group."
+                >Add group</button>
+                <button id="bulk-remove-group-button"
+                        class="btn btn-sm btn-secondary"
+                        hx-post="{% url 'generic:users_bulk_edit' %}"
+                        hx-include="[name='selection']"
+                        hx-target="#htmx-options"
+                        title="Removes the selected user from a group."
+                >Remove group</button>
+                <button id="bulk-deactivate-user-button"
+                        class="btn btn-sm btn-warning text-dark"
+                        hx-post="{% url 'generic:users_bulk_edit' %}"
+                        hx-include="[name='selection']"
+                        hx-target="#htmx-options"
+                        hx-confirm="This will deactivate all selected users, are you sure you wish to continue?"
+                        title="Deactivates the selected users"
+                >Deactivate</button>
+            </div>
+        </div>
     </details>
 
     <div id="table-div">
@@ -61,8 +79,4 @@
     </div>
     {% include "generic/partials/filter_bar.html" with filter=filter app_name=app_name collapse_id="bottom-filter-body" %}
 
-    <a href="{% url 'accounts_bulk_create' %}">Bulk create users</a>
-    <a href="{% url 'create_user' %}">Create single user</a>
-
-
 {% endblock %}
diff --git a/templates/user_list_view.html b/templates/user_list_view.html
index 847acc44..fbef6170 100644
--- a/templates/user_list_view.html
+++ b/templates/user_list_view.html
@@ -1,47 +1,61 @@
 {% extends "generic/base.html" %}
+{% load crispy_forms_tags %}
 
 {% block content %}
-    <h2>Users</h2>
-    <details class="filter">
-        <summary>
+    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+        <h2>Users</h2>
+        <div class="d-flex gap-2">
+            <a href="{% url 'create_user' %}" class="btn btn-primary">
+                <i class="bi bi-person-plus me-1"></i>Create single user
+            </a>
+            <a href="{% url 'accounts_bulk_create' %}" class="btn btn-outline-primary">
+                <i class="bi bi-people me-1"></i>Bulk create users
+            </a>
+        </div>
+    </div>
+
+    <details class="filter card mb-3">
+        <summary class="card-header cursor-pointer fw-bold">
             Filter users list
         </summary>
-        <form method="get">
-            {{ filter.form.as_p }}
-            <input type="submit" />
-        </form>
+        <div class="card-body">
+            <form method="get" class="row row-cols-lg-auto g-3 align-items-center">
+                {{ filter.form|crispy }}
+                <div class="col-12 mt-3 mt-lg-0">
+                    <button type="submit" class="btn btn-primary">Filter</button>
+                    <a href="{% url 'accounts_list' %}" class="btn btn-outline-secondary ms-1">Reset</a>
+                </div>
+            </form>
+        </div>
     </details>
-    {{object_list|length}} Users shown.
-    <ul id="user-list">
-        {% for list_user in object_list %}
-            <li><span class="username">Username: <a href="{% url 'account_profile' list_user.username %}">{{ list_user.username }}</a></span>
-                <span class="name">Name: {{list_user.first_name}} {{list_user.last_name}}</span>
-                {% if list_user.userprofile.grade %}<span class="grade">Grade: {{list_user.userprofile.grade}}</span>{% endif %} Supervisor: {{list_user.userprofile.supervisor}}
-                <br/> Registration number: {{list_user.userprofile.registration_number}}
-            <button class="small-url-button"><a href="{% url 'account_update' list_user.username %}">Edit user</a></button>
-            <button class="small-url-button"><a href="{% url 'account_profile_update' list_user.username %}">Edit profile</a></button>
 
-            {% if user.is_superuser %}
-                <button class="small-url-button"><a href="{% url 'admin:auth_user_change' list_user.id %}">Admin edit</a></button>
-                <button class="small-url-button"><a href="{% url 'admin:auth_user_delete' list_user.id %}">Delete</a></button>
-            {% endif %}
+    <div class="mb-2 text-muted fw-semibold">
+        {{ object_list|length }} Users shown.
+    </div>
+
+    <ul id="user-list" class="list-group mb-3">
+        {% for list_user in object_list %}
+            <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap gap-2">
+                <div>
+                    <span class="username fw-bold">@<a href="{% url 'account_profile' list_user.username %}">{{ list_user.username }}</a></span>
+                    <span class="name ms-3 text-muted">Name: {{ list_user.first_name }} {{ list_user.last_name }}</span>
+                    {% if list_user.userprofile.grade %}
+                        <span class="badge bg-secondary ms-2">Grade: {{ list_user.userprofile.grade }}</span>
+                    {% endif %}
+                    <span class="ms-2 small text-muted">Supervisor: {{ list_user.userprofile.supervisor|default:"None" }}</span>
+                    <div class="text-muted small mt-1">Registration number: {{ list_user.userprofile.registration_number|default:"N/A" }}</div>
+                </div>
+                <div class="btn-group btn-group-sm" role="group">
+                    <a class="btn btn-outline-secondary" href="{% url 'account_update' list_user.username %}">Edit user</a>
+                    <a class="btn btn-outline-secondary" href="{% url 'account_profile_update' list_user.username %}">Edit profile</a>
+                    {% if user.is_superuser %}
+                        <a class="btn btn-outline-info" href="{% url 'admin:auth_user_change' list_user.id %}">Admin edit</a>
+                        <a class="btn btn-outline-danger" href="{% url 'admin:auth_user_delete' list_user.id %}">Delete</a>
+                    {% endif %}
+                </div>
             </li>
         {% endfor %}
     </ul>
-
-    <a href="{% url 'accounts_bulk_create' %}">Bulk create users</a>
-    <a href="{% url 'create_user' %}">Create single user</a>
-
 {% endblock %}
 
-
-{% block css %}
-    
-<style>
-    #user-list .name, #user-list .grade {
-        padding-left: 50px;
-    }
-</style>
-
-{% endblock css %}
     
\ No newline at end of file