Show times as local time

src/servala/frontend/templates/frontend/organizations/service_instance_detail.html

@@ -84,11 +84,11 @@
                             </dd>
                             <dt class="col-sm-4">{% translate "Created At" %}</dt>
                             <dd class="col-sm-8">
-                                {{ instance.created_at|date:"SHORT_DATETIME_FORMAT" }}
+                                {{ instance.created_at|localtime_tag }}
                             </dd>
                             <dt class="col-sm-4">{% translate "Updated At" %}</dt>
                             <dd class="col-sm-8">
-                                {{ instance.updated_at|date:"SHORT_DATETIME_FORMAT" }}
+                                {{ instance.updated_at|localtime_tag }}
                             </dd>
                         </dl>
                     </div>
@@ -126,7 +126,7 @@
                                                             <span class="badge text-bg-secondary">{{ condition.status }}</span>
                                                         {% endif %}
                                                     </td>
-                                                    <td>{{ condition.lastTransitionTime|date:"SHORT_DATETIME_FORMAT" }}</td>
+                                                    <td>{{ condition.lastTransitionTime|localtime_tag }}</td>
                                                     <td>{{ condition.reason|default:"-" }}</td>
                                                     <td>{{ condition.message|truncatewords:20|default:"-" }}</td>
                                                 </tr>
@@ -285,6 +285,7 @@
     </div>
 {% endblock content %}
 {% block extra_js %}
+    <script src="{% static 'js/local-time.js' %}"></script>
     <script>
         // Initialize Bootstrap popovers for help text
         document.addEventListener('DOMContentLoaded', function() {

src/servala/frontend/templatetags/pprint_filters.py

@@ -1,6 +1,11 @@
 import json
+from datetime import datetime
 
 from django import template
+from django.utils.html import format_html
+from django.utils.safestring import mark_safe
+
+from servala.core.crd.utils import deslugify
 
 register = template.Library()
 
@@ -10,3 +15,38 @@ def pprint(value):
     if isinstance(value, (dict, list)):
         return json.dumps(value, indent=2)
     return value
+
+
+@register.filter
+def localtime_tag(value, format_str="datetime"):
+    """
+    Render a datetime value as a <time> element with datetime attribute.
+    JavaScript will convert this to local time on page load.
+
+    Usage: {{ instance.created_at|localtime_tag }}
+           {{ instance.created_at|localtime_tag:"date" }}
+           {{ instance.created_at|localtime_tag:"time" }}
+    """
+    if value is None:
+        return "-"
+
+    if isinstance(value, str):
+        iso_value = value
+    elif isinstance(value, datetime):
+        iso_value = value.isoformat()
+    else:
+        return str(value)
+
+    if (
+        not iso_value.endswith("Z")
+        and "+" not in iso_value
+        and "-" not in iso_value[10:]
+    ):
+        iso_value += "Z"
+
+    return format_html(
+        '<time datetime="{}" data-format="{}" class="local-time">{}</time>',
+        iso_value,
+        format_str,
+        iso_value,
+    )

src/servala/static/js/local-time.js

@@ -0,0 +1,43 @@
+const convertToLocalTime = () => {
+    document.querySelectorAll('time.local-time').forEach((el) => {
+        const isoDate = el.getAttribute('datetime')
+        const format = el.getAttribute('data-format') || 'datetime'
+
+        if (!isoDate) return
+
+        try {
+            const date = new Date(isoDate)
+            if (isNaN(date.getTime())) return
+
+            let options = {}
+            if (format === 'date') {
+                options = {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric'
+                }
+            } else if (format === 'time') {
+                options = {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit'
+                }
+            } else {
+                options = {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                }
+            }
+
+            el.textContent = date.toLocaleString(undefined, options)
+            el.title = date.toISOString()
+        } catch (e) {
+            console.error('Error parsing date:', isoDate, e)
+        }
+    })
+}
+
+document.addEventListener('DOMContentLoaded', convertToLocalTime)