feat(templates/users): adopt role objects for branding and selection

Replace role name comparisons with slug checks and display role.name to support dynamic role definitions.

templates/users/detail.html

@@ -39,10 +39,9 @@
       <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Role</p>
       <p class="mt-1">
         <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
-          {% if role == 'superadmin' %}bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400
-          {% elif role == 'manager' %}bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400
+          {% if role.slug in admin_roles %}bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400
           {% else %}bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400{% endif %}">
-          {% for r, label in roles_label.items %}{% if r == role %}{{ label }}{% endif %}{% endfor %}
+          {{ role.name|default:"Unassigned" }}
         </span>
       </p>
     </div>

templates/users/form.html

@@ -96,8 +96,8 @@
         <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Roles</label>
         {% if can_change_role %}
         <select name="role" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
-          {% for r, label in roles_label.items %}
-          <option value="{{ r }}" {% if editing and current_role == r or not editing and r == 'backend_developer' %}selected{% endif %}>{{ label }}</option>
+          {% for role in roles %}
+          <option value="{{ role.slug }}" {% if editing and current_role == role or not editing and role.slug == 'backend_developer' %}selected{% endif %}>{{ role.name }}</option>
           {% endfor %}
         </select>
         {% else %}

templates/users/list.html

@@ -17,7 +17,7 @@
     <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">{{ page_obj.paginator.count }} active users</p>
   </div>
   <div class="flex items-center gap-2">
-    <button type="button" @click="editUser = { username: '', email: '', first_name: '', last_name: '', role: 'backend_developer', is_active: true }; userModalMode = 'create'; editModal = true" class="dk-btn dk-btn-primary text-sm"><i class="fas fa-plus"></i> New User</button>
+    <button type="button" @click="editUser = { username: '', email: '', first_name: '', last_name: '', role: '', is_active: true }; userModalMode = 'create'; editModal = true" class="dk-btn dk-btn-primary text-sm"><i class="fas fa-plus"></i> New User</button>
     <form class="flex gap-2" method="get">
       <input type="text" name="search" value="{{ search }}" placeholder="Search by name or email..."
         class="text-sm border border-gray-200 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-950 focus:outline-none focus:ring-2 focus:ring-blue-500 w-64">
@@ -64,8 +64,8 @@
       </label>
       <select name="role" onchange="this.form.submit()" class="text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950 text-gray-700 dark:text-gray-300">
         <option value="">All roles</option>
-        {% for r, label in roles_label.items %}
-        <option value="{{ r }}" {% if role == r %}selected{% endif %}>{{ label }}</option>
+        {% for r in roles %}
+        <option value="{{ r.slug }}" {% if role == r.slug %}selected{% endif %}>{{ r.name }}</option>
         {% endfor %}
       </select>
       {% if has_projects or has_assigned or has_created or role %}
@@ -145,10 +145,9 @@
           <td class="px-6 py-3">
             {% if u.role %}
             <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
-              {% if u.role == 'superadmin' %}bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400
-              {% elif u.role == 'manager' %}bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400
+              {% if u.role.slug in admin_roles %}bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400
               {% else %}bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400{% endif %}">
-              {{ u.get_role_display|default:u.role }}
+              {{ u.role.name }}
             </span>
             {% else %}
             -
@@ -372,8 +371,8 @@
           <label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1">Role</label>
           <select name="role" x-model="editUser.role"
                   class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
-            {% for r, label in roles_label.items %}
-            <option value="{{ r }}">{{ label }}</option>
+            {% for role in roles %}
+            <option value="{{ role.slug }}">{{ role.name }}</option>
             {% endfor %}
           </select>
         </div>
@@ -429,8 +428,8 @@ const usersData = {
     email: "{{ u.email|escapejs }}",
     first_name: "{{ u.first_name|escapejs }}",
     last_name: "{{ u.last_name|escapejs }}",
-    role: "{{ u.role|default:'' }}",
-    role_label: "{{ u.get_role_display|default:u.role }}",
+    role: "{{ u.role.slug|default:'' }}",
+    role_label: "{{ u.role.name|default:'' }}",
     is_active: {{ u.is_active|yesno:'true,false' }},
     date_joined: "{{ u.date_joined|date:'M d, Y' }}",
     last_login: "{{ u.last_login|date:'M d, Y'|default:'Never' }}",