From e85e9dc2d405ba1c6c105849bf347e2fb72dda64 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 29 Apr 2026 11:15:33 -0700
Subject: [PATCH] remove duplicated time util

---
 .../Status/themes/shared/ThemedHeatmap.tsx           | 11 +++++++++--
 .../Status/themes/shared/ThemedHistogram.tsx         | 11 +++++++++--
 .../StatusPage/Status/themes/shared/timeFormat.ts    | 12 ------------
 3 files changed, 18 insertions(+), 16 deletions(-)
 delete mode 100644 client/src/Pages/StatusPage/Status/themes/shared/timeFormat.ts

diff --git a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx
index 44a93e14b..8e34dff36 100644
--- a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx
+++ b/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>
 				);
diff --git a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx
index 9139b3940..54036ebfd 100644
--- a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx
+++ b/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>
 					);
diff --git a/client/src/Pages/StatusPage/Status/themes/shared/timeFormat.ts b/client/src/Pages/StatusPage/Status/themes/shared/timeFormat.ts
deleted file mode 100644
index 7e313471c..000000000
--- a/client/src/Pages/StatusPage/Status/themes/shared/timeFormat.ts
+++ /dev/null
@@ -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",
-	});
-};