Merge pull request #213 from SirTenzin/fix/event-timezone

fix: 🐛 timezones not localised

vite/src/views/customers/customer/analytics/AnalyticsGraph.tsx

@@ -1,31 +1,50 @@
+import type { AgChartOptions, FormatterParams } from "ag-charts-community";
+import { AgCharts } from "ag-charts-react";
 import {
   AllCommunityModule,
-  ColDef,
+  type ColDef,
   ModuleRegistry,
+  type PaginationChangedEvent,
+  type RowDataUpdatedEvent,
   ValidationModule,
-  ValueFormatterParams,
-  RowDataUpdatedEvent,
-  PaginationChangedEvent,
+  type ValueFormatterParams,
 } from "ag-grid-community";
-import { AgChartOptions, FormatterParams } from "ag-charts-community";
-import { AgCharts } from "ag-charts-react";
 
 // Register all Community features
 
 import { AgGridReact } from "ag-grid-react";
 import { useEffect, useState } from "react";
-import { IRow, Row, autumnTheme, paginationOptions } from "./components/AGGrid";
 import { useAnalyticsContext } from "./AnalyticsContext";
+import {
+  autumnTheme,
+  type IRow,
+  paginationOptions,
+  type Row,
+} from "./components/AGGrid";
 import { RowClickDialog } from "./components/RowClickDialog";
 
+const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+// Helper function to parse UTC timestamps from the backend
+const parseUTCTimestamp = (timestamp: string): Date => {
+	// If the timestamp doesn't end with 'Z' or have timezone info, assume it's UTC
+	if (!timestamp.includes('Z') && !timestamp.includes('+') && !timestamp.includes('-', 10)) {
+		// Add 'Z' to indicate UTC if it's missing
+		return new Date(timestamp + (timestamp.includes('T') ? 'Z' : ' UTC'));
+	}
+	return new Date(timestamp);
+};
+
 const dateFormatter = new Intl.DateTimeFormat(navigator.language || "en-US", {
 	month: "short",
 	day: "numeric",
+	timeZone: userTimeZone,
 });
 
 const hourFormatter = new Intl.DateTimeFormat(navigator.language || "en-US", {
 	hour: "numeric",
 	minute: "numeric",
+	timeZone: userTimeZone,
 });
 
 const timestampFormatter = new Intl.DateTimeFormat(
@@ -36,7 +55,8 @@ const timestampFormatter = new Intl.DateTimeFormat(
 		hour: "numeric",
 		minute: "numeric",
 		second: "numeric",
-  }
+		timeZone: userTimeZone,
+	},
 );
 
 export function EventsBarChart({
@@ -101,8 +121,8 @@ export function EventsBarChart({
 			x: (params: FormatterParams<any, unknown>) => {
 				if (params.type !== "category") return;
 				return selectedInterval === "24h"
-          ? hourFormatter.format(new Date(params.value as string))
-          : dateFormatter.format(new Date(params.value as string));
+					? hourFormatter.format(parseUTCTimestamp(params.value as string))
+					: dateFormatter.format(parseUTCTimestamp(params.value as string));
 			},
 		},
 		legend: {
@@ -110,14 +130,12 @@ export function EventsBarChart({
 		},
 	});
 
-  const chartData = data.data;
-
 	useEffect(() => {
-    setOptions({
-      ...options,
+		setOptions((prevOptions) => ({
+			...prevOptions,
 			data: data.data,
 			series: chartConfig,
-    });
+		}));
 	}, [chartConfig, data]);
 
 	return <AgCharts options={options} className="h-full w-full" />;
@@ -132,7 +150,7 @@ export function EventsAGGrid({ data }: { data: any }) {
 			field: "timestamp",
 			flex: 1,
 			valueFormatter: (params: ValueFormatterParams<any, unknown>) => {
-        return timestampFormatter.format(new Date(params.value as string));
+				return timestampFormatter.format(parseUTCTimestamp(params.value as string));
 			},
 			cellStyle: {
 				paddingLeft: "2.5rem",