From 049934478cc07e2d658467ffd151b112e85a319e Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Thu, 16 Apr 2026 18:33:37 -0400
Subject: [PATCH] Sort all activity tabs oldest-first with newest at bottom

- CommentTimeline and AuditTimeline both sort by date ascending
- Auto-scroll to bottom on all tabs for consistency
---
 .../workorders/view/WorkOrderViewPage.js      | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/pages/workorders/view/WorkOrderViewPage.js b/src/pages/workorders/view/WorkOrderViewPage.js
index 4d83973e..46672da8 100644
--- a/src/pages/workorders/view/WorkOrderViewPage.js
+++ b/src/pages/workorders/view/WorkOrderViewPage.js
@@ -16,19 +16,22 @@ function formatDateTime(value) {
 
 function CommentTimeline({ comments }) {
   const bottomRef = useRef(null);
+  const sorted = [...(comments || [])].sort((a, b) =>
+    new Date(a.createdDate) - new Date(b.createdDate)
+  );
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView();
-  }, [comments?.length]);
+  }, [sorted.length]);
 
-  if (!comments || comments.length === 0) {
+  if (!sorted.length) {
     return <div className="woTabScroll"><p className="woNoComments">No comments yet.</p></div>;
   }
 
   return (
     <div className="woTabScroll">
       <div className="woTimeline">
-        {comments.map((c) => (
+        {sorted.map((c) => (
           <div key={c.id} className="woTimelineItem">
             <div className="woTimelineHeader">
               <span className="woTimelineAuthor">{c.userName || c.commenter || "System"}</span>
@@ -46,14 +49,23 @@ function CommentTimeline({ comments }) {
 }
 
 function AuditTimeline({ entries }) {
-  if (!entries || entries.length === 0) {
+  const bottomRef = useRef(null);
+  const sorted = [...(entries || [])].sort((a, b) =>
+    new Date(a.createdAt) - new Date(b.createdAt)
+  );
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView();
+  }, [sorted.length]);
+
+  if (!sorted.length) {
     return <div className="woTabScroll"><p className="woNoComments">No changes recorded.</p></div>;
   }
 
   return (
     <div className="woTabScroll">
       <div className="woTimeline">
-        {entries.map((e) => (
+        {sorted.map((e) => (
           <div key={e.id} className="woTimelineItem woAuditItem">
             <div className="woTimelineHeader">
               <span className="woTimelineAuthor">{e.userName || "System"}</span>
@@ -69,6 +81,7 @@ function AuditTimeline({ entries }) {
             </div>
           </div>
         ))}
+        <div ref={bottomRef} />
       </div>
     </div>
   );