From f86d290be66295832fd13cf1a8f413d5a47d5f59 Mon Sep 17 00:00:00 2001
From: Nate Emmert <nateemmert@Nates-MacBook-Pro-3.local>
Date: Fri, 12 Dec 2025 13:34:42 -0500
Subject: [PATCH] Integrate timeUtils for timezone-aware timestamp display

- Import timeUtils functions in App.js and History.js
- Replace native toLocaleString/toLocaleTimeString with formatLocalTime and formatChartTime
- Ensures all timestamps respect user's local timezone throughout the dashboard
- Improves consistency of time display across all components
---
 client/src/App.js     |  7 ++++---
 client/src/History.js | 12 +++---------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index a857346..2788d50 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -6,6 +6,7 @@ import './App.css';
 import SettingsWizard from './SettingsWizard';
 import History from './History';
 import SLA from './SLA';
+import { formatLocalTime, formatLocalTimeOnly, formatChartTime } from './utils/timeUtils';
 
 function Dashboard() {
   const [resources, setResources] = useState([]);
@@ -200,7 +201,7 @@ function Dashboard() {
 
         {!isEditing && resource.lastCheck && (
           <p className="last-check">
-            Last: {new Date(resource.lastCheck).toLocaleString()}
+            Last: {formatLocalTime(resource.lastCheck)}
           </p>
         )}
       </div>
@@ -685,7 +686,7 @@ function ResourceDetail() {
   if (!resource) return <div className="container">Resource not found</div>;
 
   const chartData = resource.stats.checks.map((check) => ({
-    time: new Date(check.checked_at).toLocaleTimeString(),
+    time: formatChartTime(check.checked_at),
     responseTime: check.response_time,
     status: check.status === 'up' ? 1 : 0,
   }));
@@ -767,7 +768,7 @@ function ResourceDetail() {
             {resource.stats.checks.slice(-10).reverse().map((check, idx) => (
               <tr key={idx} style={{ borderBottom: '1px solid #eee' }}>
                 <td style={{ padding: '0.75rem' }}>
-                  {new Date(check.checked_at).toLocaleString()}
+                  {formatLocalTime(check.checked_at)}
                 </td>
                 <td style={{ padding: '0.75rem' }}>
                   <span className={`status-badge status-${check.status}`}>
diff --git a/client/src/History.js b/client/src/History.js
index 545f1f2..aa91fbd 100644
--- a/client/src/History.js
+++ b/client/src/History.js
@@ -12,6 +12,7 @@ import {
   ResponsiveContainer,
 } from 'recharts';
 import './App.css';
+import { formatChartTime } from './utils/timeUtils';
 
 function History() {
   const [historyData, setHistoryData] = useState([]);
@@ -241,8 +242,7 @@ function History() {
 
 function prepareChartData(checks) {
   return checks.map((check) => {
-    const date = new Date(check.checked_at);
-    const label = `${date.toLocaleDateString()} ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+    const label = formatChartTime(check.checked_at);
     return {
       label,
       responseTime: check.response_time || 0,
@@ -298,16 +298,10 @@ function prepareAveragedChartData(checks, days) {
   const chartData = Array.from(buckets.entries())
     .sort((a, b) => a[0] - b[0])
     .map(([timestamp, data]) => {
-      const date = new Date(timestamp);
       const avgResponse = data.upCount > 0 ? Math.round(data.totalResponse / data.upCount) : 0;
       const uptime = Math.round((data.upCount / data.checks.length) * 100);
       
-      let label;
-      if (intervalHours === 1) {
-        label = `${date.toLocaleDateString()} ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
-      } else {
-        label = `${date.toLocaleDateString()} ${date.toLocaleTimeString([], { hour: '2-digit' })}`;
-      }
+      const label = formatChartTime(timestamp);
       
       return {
         label,