feat: update date formate for the table

Signed-off-by: amitamrutiya <[email protected]>

Author: amitamrutiya

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -1,10 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import _ from 'lodash';
+import moment from 'moment';
 import { MUIDataTableColumn } from 'mui-datatables';
 import { useCallback, useMemo, useRef } from 'react';
 import { PublishIcon } from '../../icons';
 import { CHARCOAL } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
+import { CustomTooltip } from '../CustomTooltip';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
 import PromptComponent from '../Prompt';
@@ -57,13 +59,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
   const modalRef = useRef<PromptRef>(null);
 
   const formatDate = useCallback((date: string | Date): string => {
-    const dateOptions: Intl.DateTimeFormatOptions = {
-      weekday: 'short',
-      day: 'numeric',
-      month: 'long',
-      year: 'numeric'
-    };
-    return new Date(date).toLocaleDateString('en-US', dateOptions);
+    return moment(date).fromNow();
   }, []);
 
   const processedColumns: MUIDataTableColumn[] = useMemo(() => {
@@ -86,11 +82,20 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
           if (!value || value === 'NA') return <>NA</>;
           if (typeof value === 'object' && 'Valid' in value) {
             if (value.Valid && value.Time) {
-              return <>{formatDate(value.Time)}</>;
+              const date = new Date(value.Time);
+              return (
+                <CustomTooltip title={date.toString()} disableInteractive>
+                  <div>{formatDate(date)}</div>
+                </CustomTooltip>
+              );
             }
             return <>NA</>;
           }
-          return <>{formatDate(value)}</>;
+          return (
+            <CustomTooltip title={new Date(value).toString()} disableInteractive>
+              <div>{formatDate(value)}</div>
+            </CustomTooltip>
+          );
         };
       }
       return newCol;

src/custom/ResponsiveDataTable.tsx

@@ -1,9 +1,11 @@
+import moment from 'moment';
 import MUIDataTable, { MUIDataTableColumn } from 'mui-datatables';
 import React, { useCallback } from 'react';
 import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
 import { ShareIcon } from '../icons';
 import { EllipsisIcon } from '../icons/Ellipsis';
 import { styled, useTheme } from './../theme';
+import { CustomTooltip } from './CustomTooltip';
 import { ColView } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx';
 import { TooltipIcon } from './TooltipIconButton';
 
@@ -157,14 +159,7 @@ const ResponsiveDataTable = ({
   ...props
 }: ResponsiveDataTableProps): JSX.Element => {
   const formatDate = (date: Date): string => {
-    const dateOptions: Intl.DateTimeFormatOptions = {
-      weekday: 'short',
-      day: 'numeric',
-      month: 'long',
-      year: 'numeric'
-    };
-
-    return new Intl.DateTimeFormat('en-US', dateOptions).format(date);
+    return moment(date).fromNow();
   };
 
   const updatedOptions = {
@@ -227,13 +222,21 @@ const ResponsiveDataTable = ({
               const obj = value as { Valid: boolean; Time: string | undefined };
               if (obj.Valid && obj.Time) {
                 const date = new Date(obj.Time);
-                return <>{formatDate(date)}</>;
+                return (
+                  <CustomTooltip title={date.toString()} disableInteractive>
+                    <div>{formatDate(date)}</div>
+                  </CustomTooltip>
+                );
               } else {
                 return <>NA</>;
               }
             } else if (typeof value === 'string') {
               const date = new Date(value);
-              return <>{formatDate(date)}</>;
+              return (
+                <CustomTooltip title={date.toString()} disableInteractive>
+                  <div>{formatDate(date)}</div>
+                </CustomTooltip>
+              );
             } else {
               return <>{value}</>;
             }