From 7594b665205924889ead5e34c3fbae9343c3c1ef Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Mon, 28 Jul 2025 08:32:01 -0500
Subject: [PATCH] Enhance user identifier formatting and improve user
 organization display with titles

---
 inventory/models/users.py         |  2 +-
 inventory/routes/user.py          |  4 +-
 inventory/templates/user.html     |  8 ++++
 inventory/templates/user_org.html | 74 +++++++++++++++++++++----------
 4 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/inventory/models/users.py b/inventory/models/users.py
index c34bce4..31ed34b 100644
--- a/inventory/models/users.py
+++ b/inventory/models/users.py
@@ -33,7 +33,7 @@ class User(db.Model, ImageAttachable):
 
     @property
     def identifier(self) -> str:
-        return f"{self.first_name or ''} {self.last_name or ''}".strip()
+        return f"{self.first_name or ''} {self.last_name or ''}{', ' + (''.join(word[0].upper() for word in self.title.split())) if self.title else ''}".strip()
 
     def __init__(self, first_name: Optional[str] = None, last_name: Optional[str] = None,
                     title: Optional[str] = None,location_id: Optional[int] = None,
diff --git a/inventory/routes/user.py b/inventory/routes/user.py
index c1305fc..583dadb 100644
--- a/inventory/routes/user.py
+++ b/inventory/routes/user.py
@@ -72,7 +72,7 @@ def user(id):
 
 @main.route("/user/<id>/org")
 def user_org(id):
-    user = eager_load_user_relationships(db.session.query(User).filter(User.id == id)).first()
+    user = eager_load_user_relationships(db.session.query(User).filter(User.id == id).order_by(User.first_name, User.last_name)).first()
     if not user:
         return render_template('error.html', title='User Not Found', message=f'User with ID {id} not found.')
 
@@ -81,7 +81,7 @@ def user_org(id):
     while current_user:
         subordinates = (
             eager_load_user_relationships(
-                db.session.query(User).filter(User.supervisor_id == current_user.id)
+                db.session.query(User).filter(User.supervisor_id == current_user.id).order_by(User.first_name, User.last_name)
             ).all()
         )
         org_chart.insert(0, {
diff --git a/inventory/templates/user.html b/inventory/templates/user.html
index b8b0a96..5d81c5a 100644
--- a/inventory/templates/user.html
+++ b/inventory/templates/user.html
@@ -48,6 +48,14 @@
         }
     {% endset %}
     {% set iconBar %}
+        {% if user.id != None %}
+            {{ buttons.render_button(
+                id = 'org_chart',
+                icon = 'diagram-3',
+                logic = "window.location.href = '" + url_for('main.user_org', id=user.id) + "';",
+                style = 'outline-secondary'
+            ) }}
+        {% endif %}
         <div class="btn-group">
             {% if user.id != None %}
                 {{ buttons.render_button(
diff --git a/inventory/templates/user_org.html b/inventory/templates/user_org.html
index 95c7244..450a9a7 100644
--- a/inventory/templates/user_org.html
+++ b/inventory/templates/user_org.html
@@ -2,35 +2,63 @@
 
 {% block content %}
 {% for layer in org_chart %}
-    {# Only show the top-level user on the first iteration #}
+    {% set current_index = loop.index0 %}
+    {% set next_user = org_chart[current_index + 1].user if current_index + 1 < org_chart|length else None %}
+
     {% if loop.first %}
-        <div class="row align-items-center justify-content-center mb-3">
-            <div class="column text-center fw-bold">
-                {{ layer.user.identifier }}
+    <div class="d-flex mb-5 justify-content-center">
+        <div class="card border border-primary border-2" style="width: 15rem;">
+            <div class="card-body">
+                <h5 class="card-title text-center">
+                    {{ layer.user.first_name }} {{ layer.user.last_name }}<br />{{ links.entry_link('user', layer.user.id) }}
+                </h5>
+                <div class="card-text text-center">
+                    {% if layer.user.title %}
+                    ({{ layer.user.title }})
+                    {% endif %}
+                </div>
             </div>
         </div>
+    </div>
     {% endif %}
 
-    {# Render this layer's subordinates #}
-    {% if layer['subordinates'] %}
-    <div class="row align-items-center justify-content-center mb-3 border">
-        {% set current_index = loop.index0 %}
-        {% set next_user = org_chart[current_index + 1].user if current_index + 1 < org_chart|length else None %}
-
-        {% for subordinate in layer.subordinates %}
-            <div class="col text-center {% if next_user and subordinate.id == next_user.id %}fw-bold{% endif %}">
-                {% if subordinate == user %}
-                    {{ subordinate.identifier }}
-                {% else %}
-                    <a class="link-success link-underline-opacity-0"
-                       href="{{ url_for('main.user_org', id=subordinate.id) }}">
-                        {{ subordinate.identifier }}
-                    </a>
-                {% endif %}
-            </div>
-        {% endfor %}
+    {% if layer.subordinates %}
+    <div class="mb-5 px-3">
+        <div class="org-row d-grid gap-3" style="grid-auto-flow: column; overflow-x: auto; max-width: 100%;">
+            {% for subordinate in layer.subordinates %}
+                <div class="card {% if next_user and subordinate.id == next_user.id %}border border-primary border-2 highlighted-card{% endif %}" style="min-width: 15rem;">
+                    <div class="card-body">
+                        <h5 class="card-title text-center">
+                            {% if subordinate == user %}
+                                    {{ subordinate.first_name }} {{ subordinate.last_name }}
+                            {% else %}
+                                <a class="link-success link-underline-opacity-0"
+                                   href="{{ url_for('main.user_org', id=subordinate.id) }}">
+                                    {{ subordinate.first_name }} {{ subordinate.last_name }}
+                                </a>
+                            {% endif %}
+                        </h5>
+                        <div class="card-text text-center">
+                            {% if subordinate.title %}
+                                ({{ subordinate.title }})<br />
+                            {% endif %}
+                            {{ links.entry_link('user', subordinate.id) }}
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
     </div>
     {% endif %}
 {% endfor %}
+{% endblock %}
 
-{% endblock %}
\ No newline at end of file
+{% block script %}
+    document.querySelectorAll('.highlighted-card').forEach(card => {
+        card.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+            inline: "center"
+        });
+    });
+{% endblock %}