add timeZone difference in user management page

Author: Akshay-Jayaram

src/components/UserManagement/TimeDifference.jsx

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+
+function TimeDifference(props) {
+    const { isUserSelf, userProfile } = props;
+    const [signedOffset, setSignedOffset] = useState('N/A');
+    const [hoverText, setHoverText] = useState('');
+
+    const viewingTimeZone = props.userProfile.timeZone;
+    const yourLocalTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+    useEffect(() => {
+        if (isUserSelf) {
+            setSignedOffset('N/A');
+            setHoverText('');
+            return;
+        }
+
+        const convertDateToAnotherTimeZone = (date, timezone) => {
+            try {
+                const dateString = date.toLocaleString('en-US', { timeZone: timezone });
+                return new Date(dateString);
+            } catch (err) {
+                return NaN;
+            }
+        };
+
+        const getOffsetBetweenTimezones = (date, tz1, tz2) => {
+            const tz1Date = convertDateToAnotherTimeZone(date, tz1);
+            const tz2Date = convertDateToAnotherTimeZone(date, tz2);
+
+            if (!isNaN(tz1Date) && !isNaN(tz2Date)) {
+                const offset = (tz1Date.getTime() - tz2Date.getTime()) / 3600000;
+                return offset;
+            }
+            return null;
+        };
+
+        const offset = getOffsetBetweenTimezones(new Date(), viewingTimeZone, yourLocalTimeZone);
+        if (offset !== null) {
+            const formattedOffset = offset > 0 ? `+${offset}` : `${offset}`;
+            setSignedOffset(formattedOffset);
+            let message = '';
+            if (offset === 0) {
+                message = 'This person is in the same time zone as you';
+            } else {
+                const direction = offset > 0 ? 'ahead of' : 'behind';
+                message = `This person is ${Math.abs(offset)} hours ${direction} your time zone`;
+            }
+            setHoverText(message);
+        }
+    }, [isUserSelf, viewingTimeZone, yourLocalTimeZone]);
+
+    return <span className="time_difference" title={hoverText}>{signedOffset}</span>;
+}
+
+export default TimeDifference;

src/components/UserManagement/UserTableData.jsx

@@ -12,6 +12,7 @@ import ResetPasswordButton from './ResetPasswordButton';
 import { DELETE, PAUSE, RESUME, SET_FINAL_DAY, CANCEL } from '../../languages/en/ui';
 import { UserStatus, FinalDay } from '../../utils/enums';
 import ActiveCell from './ActiveCell';
+import TimeDifference from './TimeDifference';
 import hasPermission from '../../utils/permissions';
 import { boxStyle } from '../../styles';
 import { formatDateLocal } from '../../utils/formatDate';
@@ -124,7 +125,7 @@ const UserTableData = React.memo(props => {
     <tr
       className={`usermanagement__tr ${darkMode ? 'dark-usermanagement-data' : 'light-usermanagement-data'}`}
       id={`tr_user_${props.index}`}
-      style={{fontSize: isMobile ? mobileFontSize : 'initial'}}
+      style={{ fontSize: isMobile ? mobileFontSize : 'initial' }}
     >
       <td className="usermanagement__active--input" style={{ position: 'relative' }}>
         <ActiveCell
@@ -162,12 +163,12 @@ const UserTableData = React.memo(props => {
                 event.preventDefault();
                 return;
               }
-            
+
               if (event.metaKey || event.ctrlKey || event.button === 1) {
                 window.open(`/peoplereport/${props.user._id}`, '_blank');
                 return;
               }
-            
+
               event.preventDefault(); // prevent full reload
               history.push(`/peoplereport/${props.user._id}`);
             }}
@@ -183,6 +184,11 @@ const UserTableData = React.memo(props => {
             />
           </button>
         </span>
+        <TimeDifference
+          userProfile={props.user}
+          isUserSelf={props.user.email === props.authEmail}
+          darkMode={darkMode}
+        />
       </td>
       <td className="email_cell">
         {editUser?.first ? (

src/components/UserManagement/usermanagement.css

@@ -149,6 +149,15 @@ td#usermanagement_role {
   max-width: initial;
 }
 
+.time_difference{
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 0.7rem;
+  margin: 2px 4px;
+}
+
 .copy_icon {
   cursor: pointer;
   position: absolute;