Fix notifications ASC order and proper display of time since

src/components/etke.cc/ServerNotificationsBadge.tsx

@@ -6,6 +6,7 @@ import { useNavigate } from "react-router";
 import { Fragment, useEffect, useState } from "react";
 import { useAppContext } from "../../Context";
 import { ServerNotificationsResponse, ServerProcessResponse } from "../../synapse/dataProvider";
+import { getTimeSince } from "../../utils/date";
 
 // 5 minutes
 const SERVER_NOTIFICATIONS_INTERVAL_TIME = 300000;
@@ -23,7 +24,7 @@ const useServerNotifications = () => {
     const notificationsResponse: ServerNotificationsResponse = await dataProvider.getServerNotifications(etkeccAdmin);
     setServerNotifications({
       ...notificationsResponse,
-      notifications: notificationsResponse.notifications.reverse(),
+      notifications: notificationsResponse.notifications,
       success: notificationsResponse.success
     });
   };
@@ -172,7 +173,7 @@ export const ServerNotificationsBadge = () => {
                       />
                       <ListItemText
                         primary={
-                          <Typography variant="body2">{notification.sent_at}</Typography>
+                          <Typography variant="body2">{getTimeSince(notification.sent_at) + " ago"}</Typography>
                         }
                       />
                     </ListItem>

src/components/etke.cc/ServerNotificationsPage.tsx

@@ -4,9 +4,12 @@ import { useStore } from "react-admin"
 import dataProvider, { ServerNotificationsResponse } from "../../synapse/dataProvider"
 import { useAppContext } from "../../Context";
 import DeleteIcon from "@mui/icons-material/Delete";
+import { getTimeSince } from "../../utils/date";
+import { Tooltip } from "@mui/material";
+
 const DisplayTime = ({ date }: { date: string }) => {
-  const dateFromDateString = new Date(date);
+  const dateFromDateString = new Date(date.replace(" ", "T") + "Z");
-  return <>{dateFromDateString.toLocaleString()}</>;
+  return <Tooltip title={dateFromDateString.toLocaleString()}>{<span>{getTimeSince(date) + " ago"}</span>}</Tooltip>;
 };
 
 const ServerNotificationsPage = () => {

src/components/etke.cc/ServerStatusPage.tsx

@@ -5,16 +5,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import EngineeringIcon from '@mui/icons-material/Engineering';
 import { ServerProcessResponse, ServerStatusComponent, ServerStatusResponse } from "../../synapse/dataProvider";
 import ServerCommandsPanel from "./ServerCommandsPanel";
-
+import { getTimeSince } from "../../utils/date";
-const getTimeSince = (date: string) => {
-  const now = new Date();
-  const past = new Date(date);
-  const diffInMinutes = Math.floor((now.getTime() - past.getTime()) / (1000 * 60));
-
-  if (diffInMinutes < 1) return "a couple of seconds";
-  if (diffInMinutes === 1) return "1 minute";
-  return `${diffInMinutes} minutes`;
-};
 
 const StatusChip = ({ isOkay, size = "medium", command }: { isOkay: boolean, size?: "small" | "medium", command?: string   }) => {
   let label = "OK";

src/utils/date.ts

@@ -26,3 +26,29 @@ export const dateFormatter = (v: string | number | Date | undefined | null): str
   // target format yyyy-MM-ddThh:mm
   return `${year}-${month}-${day}T${hour}:${minute}`;
 };
+
+// assuming date is in format "2025-02-26 20:52:00" where no timezone is specified
+export const getTimeSince = (date: string) => {
+  const nowUTC = new Date().getTime();
+  const past = new Date(date.replace(" ", "T") + "Z");
+
+  const pastUTC = past.getTime();
+  const diffInMs = nowUTC - pastUTC;
+
+  const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
+
+  // Remove or comment out the console.log for production
+  console.log("FOR now, date", new Date(nowUTC).toISOString(), new Date(pastUTC).toISOString(), "diffInMinutes", diffInMinutes);
+
+  if (diffInMinutes < 1) return "a couple of seconds";
+  if (diffInMinutes === 1) return "1 minute";
+  if (diffInMinutes < 60) return `${diffInMinutes} minutes`;
+  if (diffInMinutes < 120) return "1 hour";
+  if (diffInMinutes < 24 * 60) return `${Math.floor(diffInMinutes / 60)} hours`;
+  if (diffInMinutes < 48 * 60) return "1 day";
+  if (diffInMinutes < 7 * 24 * 60) return `${Math.floor(diffInMinutes / (24 * 60))} days`;
+  if (diffInMinutes < 14 * 24 * 60) return "1 week";
+  if (diffInMinutes < 30 * 24 * 60) return `${Math.floor(diffInMinutes / (7 * 24 * 60))} weeks`;
+  if (diffInMinutes < 60 * 24 * 60) return "1 month";
+  return `${Math.floor(diffInMinutes / (30 * 24 * 60))} months`;
+};