feat: update UI templates to display and edit display_name

templates/dashboard/profile.html

@@ -24,6 +24,14 @@
                 <input type="text" id="username" name="username" value="{{ session.username }}" required>
             </div>
 
+            <div class="form-group">
+                <label for="display_name">Display Name</label>
+                <input type="text" id="display_name" name="display_name" value="{{ user.display_name or session.username }}" placeholder="Your display name">
+                <small style="color: #a0a0a0; display: block; margin-top: 0.5rem;">
+                    This is how your name will be displayed throughout the application
+                </small>
+            </div>
+
             <div class="form-group">
                 <label for="email">Email Address</label>
                 <input type="email" id="email" name="email" value="{{ session.email or '' }}" readonly style="background: #0f1419; cursor: not-allowed;">

templates/dashboard/users.html

@@ -65,6 +65,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
             <th>Username</th>
             <th>Email</th>
             <th>Role</th>
+            <th>Tier</th>
             <th>Created By</th>
             <th>Created At</th>
             <th>Last Login</th>
@@ -77,7 +78,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
             {% for user in users %}
             <tr>
                 <td>{{ user.id }}</td>
-                <td>{{ user.username }}</td>
+                <td>{{ user.display_name or user.username }}</td>
                 <td>{{ user.email or '-' }}</td>
                 <td>
                     {% if user.role == 'admin' %}
@@ -86,6 +87,15 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
                     <span style="color: #a0a0a0;">User</span>
                     {% endif %}
                 </td>
+                <td>
+                    <select onchange="updateUserTier({{ user.id }}, this.value)" style="background: #1a1a2e; color: #e0e0e0; border: 1px solid #0f3460; padding: 5px; border-radius: 3px;">
+                        {% for tier in tiers %}
+                        <option value="{{ tier.id }}" {% if user.tier_id == tier.id %}selected{% endif %}>
+                            {{ tier.name }}{% if not tier.is_visible %} (Hidden){% endif %}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </td>
                 <td>{{ user.created_by or '-' }}</td>
                 <td>{{ user.created_at }}</td>
                 <td>{{ user.last_login or 'Never' }}</td>
@@ -109,7 +119,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
             {% endfor %}
         {% else %}
             <tr>
-                <td colspan="8" style="text-align: center; color: #666;">No users found</td>
+                <td colspan="10" style="text-align: center; color: #666;">No users found</td>
             </tr>
         {% endif %}
     </tbody>
@@ -210,6 +220,32 @@ function deleteUser(userId, username) {
     }
 }
 
+function updateUserTier(userId, tierId) {
+    fetch('{{ url_for(request, "/dashboard/users/") }}' + userId + '/tier', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ tier_id: parseInt(tierId) })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            // Show success message briefly
+            const msg = document.createElement('div');
+            msg.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #4ade80; color: #000; padding: 15px 20px; border-radius: 5px; z-index: 9999;';
+            msg.textContent = 'Tier updated successfully';
+            document.body.appendChild(msg);
+            setTimeout(() => msg.remove(), 2000);
+        } else {
+            alert(data.error || 'Failed to update tier');
+            location.reload(); // Reload to reset dropdown
+        }
+    })
+    .catch(error => {
+        alert('Error: ' + error);
+        location.reload(); // Reload to reset dropdown
+    });
+}
+
 // Close modal when clicking outside
 window.onclick = function(event) {
     const modal = document.getElementById('edit-modal');