From 88deaa1925debab1abee41e85193baae7c3a75da Mon Sep 17 00:00:00 2001
From: Rafal Pelczar <rafal@akuity.io>
Date: Fri, 15 Sep 2023 15:25:52 +0200
Subject: [PATCH] feat(ui): Show rough timestamp for each freight

Signed-off-by: Rafal Pelczar <rafal@akuity.io>
---
 ui/src/features/freightline/freightline.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/src/features/freightline/freightline.tsx b/ui/src/features/freightline/freightline.tsx
index 5f1464eb5..cdb3dafc4 100644
--- a/ui/src/features/freightline/freightline.tsx
+++ b/ui/src/features/freightline/freightline.tsx
@@ -4,6 +4,7 @@ import { IconDefinition, faTimeline } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useMutation } from '@tanstack/react-query';
 import { Tooltip, message } from 'antd';
+import { formatDistance } from 'date-fns';
 import React, { useEffect, useState } from 'react';
 
 import {
@@ -337,7 +338,15 @@ const FreightItem = (props: {
             confirmingPromotion ? 'text-white' : 'text-gray-400'
           }`}
         >
-          {freight?.id?.substring(0, 7)}
+          <Tooltip
+            title={
+              freight?.firstSeen &&
+              formatDistance(freight?.firstSeen?.toDate(), new Date(), { addSuffix: true })
+            }
+            placement='bottom'
+          >
+            {freight?.id?.substring(0, 7)}
+          </Tooltip>
         </div>
       </div>
     </div>