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/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)