Fixed timezone date format.

src/app/(main)/websites/[websiteId]/events/EventsTable.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import Icons from 'components/icons';
 
 export function EventsTable({ data = [] }) {
-  const { formatDate } = useTimezone();
+  const { formatTimezoneDate } = useTimezone();
   const { formatMessage, labels } = useMessages();
   const { renderTeamUrl } = useTeamUrl();
 
@@ -35,7 +35,7 @@ export function EventsTable({ data = [] }) {
         }}
       </GridColumn>
       <GridColumn name="created" label={formatMessage(labels.created)} width={'300px'}>
-        {row => formatDate(row.createdAt, 'PPPpp')}
+        {row => formatTimezoneDate(row.createdAt, 'PPPpp')}
       </GridColumn>
     </GridTable>
   );

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx

@@ -31,7 +31,7 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { formatValue } = useFormat();
   const { locale } = useLocale();
-  const { formatDate } = useTimezone();
+  const { formatTimezoneDate } = useTimezone();
   const { countryNames } = useCountryNames(locale);
   const [filter, setFilter] = useState(TYPE_ALL);
 
@@ -54,7 +54,7 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
     },
   ];
 
-  const getTime = ({ createdAt, firstAt }) => formatDate(firstAt || createdAt, 'h:mm:ss');
+  const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'h:mm:ss');
 
   const getColor = ({ id, sessionId }) => stringToColor(sessionId || id);
 

src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx

@@ -6,7 +6,7 @@ import styles from './SessionsTable.module.css';
 import TypeIcon from 'components/common/TypeIcon';
 
 export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
-  const { formatDate } = useTimezone();
+  const { formatTimezoneDate } = useTimezone();
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
 
@@ -51,7 +51,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
         )}
       </GridColumn>
       <GridColumn name="lastAt" label={formatMessage(labels.lastSeen)}>
-        {row => formatDate(row.createdAt, 'PPPpp')}
+        {row => formatTimezoneDate(row.createdAt, 'PPPpp')}
       </GridColumn>
     </GridTable>
   );

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx

@@ -15,7 +15,7 @@ export function SessionActivity({
   startDate: Date;
   endDate: Date;
 }) {
-  const { formatDate } = useTimezone();
+  const { formatTimezoneDate } = useTimezone();
   const { data, isLoading } = useSessionActivity(websiteId, sessionId, startDate, endDate);
 
   if (isLoading) {
@@ -33,12 +33,12 @@ export function SessionActivity({
         return (
           <>
             {showHeader && (
-              <div className={styles.header}>{formatDate(createdAt, 'EEEE, PPP')}</div>
+              <div className={styles.header}>{formatTimezoneDate(createdAt, 'EEEE, PPP')}</div>
             )}
             <div key={eventId} className={styles.row}>
               <div className={styles.time}>
                 <StatusLight color={`#${visitId?.substring(0, 6)}`}>
-                  {formatDate(createdAt, 'h:mm:ss aaa')}
+                  {formatTimezoneDate(createdAt, 'h:mm:ss aaa')}
                 </StatusLight>
               </div>
               <Icon>{eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx

@@ -6,7 +6,7 @@ import styles from './SessionInfo.module.css';
 
 export default function SessionInfo({ data }) {
   const { locale } = useLocale();
-  const { formatDate } = useTimezone();
+  const { formatTimezoneDate } = useTimezone();
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
   const { getRegionName } = useRegionNames(locale);
@@ -20,10 +20,10 @@ export default function SessionInfo({ data }) {
         </dd>
 
         <dt>{formatMessage(labels.lastSeen)}</dt>
-        <dd>{formatDate(data?.lastAt, 'EEEE, PPPpp')}</dd>
+        <dd>{formatTimezoneDate(data?.lastAt, 'EEEE, PPPpp')}</dd>
 
         <dt>{formatMessage(labels.firstSeen)}</dt>
-        <dd>{formatDate(data?.firstAt, 'EEEE, PPPpp')}</dd>
+        <dd>{formatTimezoneDate(data?.firstAt, 'EEEE, PPPpp')}</dd>
 
         <dt>{formatMessage(labels.country)}</dt>
         <dd>

src/components/hooks/useTimezone.ts

@@ -13,13 +13,15 @@ export function useTimezone() {
     setTimezone(value);
   };
 
-  const formatDate = (date: string, pattern: string) => {
+  const formatTimezoneDate = (date: string, pattern: string) => {
-    return formatInTimeZone(
+    return (
-      /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}Z$/.test(date)
+      formatInTimeZone(
-        ? date
+        /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}(\.[0-9]{3})?Z$/.test(date)
-        : date.split(' ').join('T') + 'Z',
+          ? date
-      timezone,
+          : date.split(' ').join('T') + 'Z',
-      pattern,
+        timezone,
+        pattern,
+      ) + `, ${date}, ${pattern}, ${timezone}, ${formatInTimeZone(date, timezone, pattern)}`
     );
   };
 
@@ -31,7 +33,7 @@ export function useTimezone() {
     return utcToZonedTime(date, timezone);
   };
 
-  return { timezone, saveTimezone, formatDate, toUtc, fromUtc };
+  return { timezone, saveTimezone, formatTimezoneDate, toUtc, fromUtc };
 }
 
 export default useTimezone;