From d4fbc9dc61aec0c1f678d7ed926151fb55107da4 Mon Sep 17 00:00:00 2001
From: Jim McBride <jim.mcbride@gmail.com>
Date: Tue, 9 Dec 2025 08:29:28 -0600
Subject: [PATCH] Honor user date/time format preferences for backup timestamps

- Import dayjs for date formatting
- Read date-format setting from localStorage ('mdy' or 'dmy')
- Move formatDate function into component to access user preferences
- Format dates according to user's date and time format settings:
  - MDY: MM/DD/YYYY
  - DMY: DD/MM/YYYY
  - 12h: h:mm:ss A
  - 24h: HH:mm:ss

The Created column now respects the same date/time format preferences
used throughout the app (Guide, Stats, DVR, SystemEvents, etc).
---
 frontend/src/components/backups/BackupManager.jsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/backups/BackupManager.jsx b/frontend/src/components/backups/BackupManager.jsx
index 07e7e834..eb6a93b2 100644
--- a/frontend/src/components/backups/BackupManager.jsx
+++ b/frontend/src/components/backups/BackupManager.jsx
@@ -26,6 +26,7 @@ import {
   UploadCloud,
 } from 'lucide-react';
 import { notifications } from '@mantine/notifications';
+import dayjs from 'dayjs';
 
 import API from '../../api';
 import ConfirmationDialog from '../ConfirmationDialog';
@@ -220,11 +221,6 @@ function formatBytes(bytes) {
   return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
 }
 
-function formatDate(dateString) {
-  const date = new Date(dateString);
-  return date.toLocaleString();
-}
-
 export default function BackupManager() {
   const [backups, setBackups] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -238,10 +234,19 @@ export default function BackupManager() {
 
   // Read user's preferences from settings
   const [timeFormat] = useLocalStorage('time-format', '12h');
+  const [dateFormatSetting] = useLocalStorage('date-format', 'mdy');
   const [tableSize] = useLocalStorage('table-size', 'default');
   const [userTimezone] = useLocalStorage('time-zone', getDefaultTimeZone());
   const is12Hour = timeFormat === '12h';
 
+  // Format date according to user preferences
+  const formatDate = (dateString) => {
+    const date = dayjs(dateString);
+    const datePart = dateFormatSetting === 'mdy' ? 'MM/DD/YYYY' : 'DD/MM/YYYY';
+    const timePart = is12Hour ? 'h:mm:ss A' : 'HH:mm:ss';
+    return date.format(`${datePart}, ${timePart}`);
+  };
+
   // Warning suppression for confirmation dialogs
   const suppressWarning = useWarningsStore((s) => s.suppressWarning);