remove duplicated time util

client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx

@@ -4,8 +4,10 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import type { SxProps, Theme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/store";
 import type { CheckSnapshot } from "@/Types/Check";
-import { formatCheckTimestamp } from "./timeFormat";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
 
 const CELLS = 25;
 
@@ -27,6 +29,7 @@ const classify = (check: CheckSnapshot): Exclude<HeatCellKind, "empty"> => {
 
 export const ThemedHeatmap = ({ checks, containerSx, cellSx }: Props) => {
 	const { t } = useTranslation();
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
 
 	const source = checks.slice(0, CELLS).reverse();
 	const padded: (CheckSnapshot | null)[] = [
@@ -64,7 +67,11 @@ export const ThemedHeatmap = ({ checks, containerSx, cellSx }: Props) => {
 							variant="caption"
 							sx={{ opacity: 0.8 }}
 						>
-							{formatCheckTimestamp(check.createdAt)}
+							{formatDateWithTz(
+								check.createdAt,
+								"ddd, MMMM D, YYYY, HH:mm A",
+								uiTimezone
+							)}
 						</Typography>
 					</Stack>
 				);

client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx

@@ -5,8 +5,10 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import type { SxProps, Theme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/store";
 import type { CheckSnapshot } from "@/Types/Check";
-import { formatCheckTimestamp } from "./timeFormat";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
 
 const CELLS = 25;
 const MIN_HEIGHT_PCT = 6;
@@ -32,6 +34,7 @@ export const ThemedHistogram = ({
 	statsGap = 1,
 }: Props) => {
 	const { t } = useTranslation();
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
 
 	const { padded, max, avg, peak } = useMemo(() => {
 		const source = checks.slice(0, CELLS).reverse();
@@ -77,7 +80,11 @@ export const ThemedHistogram = ({
 								variant="caption"
 								sx={{ opacity: 0.8 }}
 							>
-								{formatCheckTimestamp(check.createdAt)}
+								{formatDateWithTz(
+									check.createdAt,
+									"ddd, MMMM D, YYYY, HH:mm A",
+									uiTimezone
+								)}
 							</Typography>
 						</Stack>
 					);

client/src/Pages/StatusPage/Status/themes/shared/timeFormat.ts

@@ -1,12 +0,0 @@
-export const formatCheckTimestamp = (iso?: string): string => {
-	if (!iso) return "—";
-	const d = new Date(iso);
-	if (Number.isNaN(d.getTime())) return "—";
-	return d.toLocaleString(undefined, {
-		hour: "2-digit",
-		minute: "2-digit",
-		second: "2-digit",
-		month: "short",
-		day: "numeric",
-	});
-};