Refactor TimeDisplay component to improve time difference calculation

- Updated the time difference logic to handle both past and future dates more accurately.
- Simplified the calculation process by introducing base and compare dates.
- Enhanced the output format to include "in" for future dates and improved readability of time strings.

src/components/Dashboard/common/TimeDisplay.jsx

@@ -8,25 +8,33 @@ const { Text } = Typography
 
 const formatTimeDifference = (dateTime) => {
   const now = dayjs()
-  const diff = dayjs(dateTime)
+  const target = dayjs(dateTime)
+  const isFuture = target.isAfter(now)
 
-  const years = now.diff(diff, 'year')
-  const months = now.diff(diff.add(years, 'year'), 'month')
-  const weeks = now.diff(diff.add(years, 'year').add(months, 'month'), 'week')
-  const days = now.diff(
-    diff.add(years, 'year').add(months, 'month').add(weeks, 'week'),
+  // If future, calculate from target to now; if past, from now to target
+  const baseDate = isFuture ? target : now
+  const compareDate = isFuture ? now : target
+
+  const years = baseDate.diff(compareDate, 'year')
+  const months = baseDate.diff(compareDate.add(years, 'year'), 'month')
+  const weeks = baseDate.diff(
+    compareDate.add(years, 'year').add(months, 'month'),
+    'week'
+  )
+  const days = baseDate.diff(
+    compareDate.add(years, 'year').add(months, 'month').add(weeks, 'week'),
     'day'
   )
-  const hours = now.diff(
-    diff
+  const hours = baseDate.diff(
+    compareDate
       .add(years, 'year')
       .add(months, 'month')
       .add(weeks, 'week')
       .add(days, 'day'),
     'hour'
   )
-  const minutes = now.diff(
-    diff
+  const minutes = baseDate.diff(
+    compareDate
       .add(years, 'year')
       .add(months, 'month')
       .add(weeks, 'week')
@@ -34,8 +42,8 @@ const formatTimeDifference = (dateTime) => {
       .add(hours, 'hour'),
     'minute'
   )
-  const seconds = now.diff(
-    diff
+  const seconds = baseDate.diff(
+    compareDate
       .add(years, 'year')
       .add(months, 'month')
       .add(weeks, 'week')
@@ -45,21 +53,24 @@ const formatTimeDifference = (dateTime) => {
     'second'
   )
 
+  let timeStr = ''
   if (years > 0) {
-    return `${years}y`
+    timeStr = `${years} ${years === 1 ? 'year' : 'years'}`
   } else if (months > 0) {
-    return `${months}mo`
+    timeStr = `${months} ${months === 1 ? 'month' : 'months'}`
   } else if (weeks > 0) {
-    return `${weeks}w`
+    timeStr = `${weeks} ${weeks === 1 ? 'week' : 'weeks'}`
   } else if (days > 0) {
-    return `${days}d`
+    timeStr = `${days} ${days === 1 ? 'day' : 'days'}`
   } else if (hours > 0) {
-    return `${hours}h`
+    timeStr = `${hours} ${hours === 1 ? 'hour' : 'hours'}`
   } else if (minutes > 0) {
-    return `${minutes}m`
+    timeStr = `${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`
   } else {
-    return `${seconds}s`
+    timeStr = `${seconds} ${seconds === 1 ? 'second' : 'seconds'}`
   }
+
+  return isFuture ? `in ${timeStr} time` : `${timeStr} ago`
 }
 
 const TimeDisplay = ({
@@ -98,7 +109,7 @@ const TimeDisplay = ({
   return (
     <Flex align={'center'} gap={'small'}>
       <Text type={type}>{formattedDate}</Text>
-      {showSince ? <Tag style={{ margin: 0 }}>{timeAgo + ' ago'}</Tag> : null}
+      {showSince ? <Tag style={{ margin: 0 }}>{timeAgo}</Tag> : null}
     </Flex>
   )
 }