Add absolute format to timestamp component to fix render flash

lib/towerops_web/components/core_components.ex

@@ -776,6 +776,7 @@ defmodule ToweropsWeb.CoreComponents do
   attr :datetime, :any, required: true, doc: "DateTime to display"
   attr :timezone, :string, default: "UTC", doc: "User's timezone for full timestamp"
   attr :class, :string, default: "", doc: "Additional CSS classes"
+  attr :format, :string, default: "relative", doc: "Display format: 'relative' or 'absolute'"
 
   def timestamp(assigns) do
     assigns =
@@ -784,8 +785,8 @@ defmodule ToweropsWeb.CoreComponents do
       |> assign(:full_time, ToweropsWeb.TimeHelpers.format_datetime(assigns.datetime, assigns.timezone))
 
     ~H"""
-    <span class={@class} title={@full_time}>
-      {@relative_time}
+    <span class={@class} title={if @format == "relative", do: @full_time, else: @relative_time}>
+      {if @format == "relative", do: @relative_time, else: @full_time}
     </span>
     """
   end

lib/towerops_web/live/agent_live/index.html.heex

@@ -116,7 +116,7 @@
           </div>
           <%= if agent.last_seen_at do %>
             <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-              {format_datetime(agent.last_seen_at, @timezone)}
+              <.timestamp datetime={agent.last_seen_at} timezone={@timezone} format="absolute" />
             </div>
           <% end %>
           <%= if agent.last_ip do %>
@@ -227,7 +227,7 @@
           </div>
           <%= if agent.last_seen_at do %>
             <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-              {format_datetime(agent.last_seen_at, @timezone)}
+              <.timestamp datetime={agent.last_seen_at} timezone={@timezone} format="absolute" />
             </div>
           <% end %>
           <%= if agent.last_ip do %>

lib/towerops_web/live/agent_live/show.html.heex

@@ -171,7 +171,11 @@
             </p>
             <%= if @agent_token.last_seen_at do %>
               <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                {format_datetime(@agent_token.last_seen_at, @timezone)}
+                <.timestamp
+                  datetime={@agent_token.last_seen_at}
+                  timezone={@timezone}
+                  format="absolute"
+                />
               </p>
             <% end %>
             <%= if @agent_token.last_ip do %>