Enhance TimeDisplay Component with User Settings Integration

- Integrated user settings context to dynamically adjust date and time formats in the TimeDisplay component, improving customization based on user preferences.
- Refactored date formatting logic to utilize user-defined formats, ensuring accurate display of date and time based on user settings.
- Improved overall readability and maintainability of the component by streamlining the formatting logic.

src/components/Dashboard/common/TimeDisplay.jsx

@@ -1,8 +1,12 @@
-// PrinterSelect.js
+import { useContext, useState, useEffect } from 'react'
-import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Flex, Typography, Tag } from 'antd'
 import dayjs from 'dayjs'
+import { ApiServerContext } from '../context/ApiServerContext'
+import {
+  DEFAULT_DATE_TIME_FORMAT,
+  splitDateTimeFormat
+} from '../../../database/Settings'
 
 const { Text } = Typography
 
@@ -80,7 +84,11 @@ const TimeDisplay = ({
   showSince = false,
   type = 'primary'
 }) => {
+  const { userSettings } = useContext(ApiServerContext) || {}
   const [timeAgo, setTimeAgo] = useState(formatTimeDifference(dateTime))
+  const dateTimeFormat =
+    userSettings?.appearance?.dateTimeFormat || DEFAULT_DATE_TIME_FORMAT
+  const { dateFormat, timeFormat } = splitDateTimeFormat(dateTimeFormat)
 
   useEffect(() => {
     if (showSince) {
@@ -96,15 +104,18 @@ const TimeDisplay = ({
     return <Text type='secondary'>n/a</Text>
   }
 
-  var dateFormat = ''
+  let displayFormat = ''
-  if (showDate == true) {
+  if (showDate && showTime) {
-    dateFormat += 'YYYY-MM-DD '
+    displayFormat = dateTimeFormat
-  }
+  } else if (showDate) {
-  if (showTime == true) {
+    displayFormat = dateFormat
-    dateFormat += 'HH:mm:ss '
+  } else if (showTime) {
+    displayFormat = timeFormat
   }
 
-  const formattedDate = dayjs(dateTime).format(dateFormat)
+  const formattedDate = displayFormat
+    ? dayjs(dateTime).format(displayFormat)
+    : ''
 
   return (
     <Flex align={'center'} gap={'small'} wrap>