From 618a9136f654dc6440d8101cb0e92dbcd847cafb Mon Sep 17 00:00:00 2001
From: Josh Wright <josh@Joshs-MacBook-Pro.local>
Date: Tue, 31 Mar 2026 12:10:12 -0400
Subject: [PATCH] Toggle date fields between relative and absolute on click

Defaults to relative time (e.g. '5 hours ago'); clicking switches to
absolute timestamp and back.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/pages/TicketDetail.tsx | 36 +++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/client/src/pages/TicketDetail.tsx b/client/src/pages/TicketDetail.tsx
index 4e07663..5036986 100644
--- a/client/src/pages/TicketDetail.tsx
+++ b/client/src/pages/TicketDetail.tsx
@@ -86,6 +86,14 @@ export default function TicketDetail() {
   const [editingStatus, setEditingStatus] = useState(false)
   const [editingSeverity, setEditingSeverity] = useState(false)
   const [editingAssignee, setEditingAssignee] = useState(false)
+  const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set())
+
+  const toggleDate = (key: string) =>
+    setExpandedDates((prev) => {
+      const next = new Set(prev)
+      next.has(key) ? next.delete(key) : next.add(key)
+      return next
+    })
 
   const isAdmin = authUser?.role === 'ADMIN'
 
@@ -530,17 +538,23 @@ export default function TicketDetail() {
 
             {/* Dates */}
             <div className="px-4 py-3 space-y-2.5">
-              <SidebarField label="Created">
-                <p className="text-xs text-gray-300">{format(new Date(ticket.createdAt), 'MMM d, yyyy HH:mm')}</p>
-              </SidebarField>
-              <SidebarField label="Modified">
-                <p className="text-xs text-gray-300">{formatDistanceToNow(new Date(ticket.updatedAt), { addSuffix: true })}</p>
-              </SidebarField>
-              {ticket.resolvedAt && (
-                <SidebarField label="Resolved">
-                  <p className="text-xs text-gray-300">{format(new Date(ticket.resolvedAt), 'MMM d, yyyy HH:mm')}</p>
-                </SidebarField>
-              )}
+              {[
+                { key: 'created', label: 'Created', date: ticket.createdAt },
+                { key: 'modified', label: 'Modified', date: ticket.updatedAt },
+                ...(ticket.resolvedAt ? [{ key: 'resolved', label: 'Resolved', date: ticket.resolvedAt }] : []),
+              ].map(({ key, label, date }) => (
+                <div key={key}>
+                  <p className="text-xs font-medium text-gray-500 mb-1">{label}</p>
+                  <button
+                    onClick={() => toggleDate(key)}
+                    className="text-xs text-gray-300 hover:text-gray-100 transition-colors"
+                  >
+                    {expandedDates.has(key)
+                      ? format(new Date(date), 'MMM d, yyyy HH:mm')
+                      : formatDistanceToNow(new Date(date), { addSuffix: true })}
+                  </button>
+                </div>
+              ))}
             </div>
 
             {/* Assignee */}