convert / sync time zone,

Author: deeqma

monitor-ui/src/components/AppTopBar.vue

@@ -2,10 +2,12 @@
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useTheme } from '../composables/useTheme'
 import { useSidebar } from '../composables/useSidebar'
+import { useDisplayTimezone } from '../composables/useDisplayTimezone'
 import { Sun, Moon, Menu } from 'lucide-vue-next'
 
 const { dark, toggle } = useTheme()
 const { toggle: toggleSidebar } = useSidebar()
+const { setDisplayTimezone } = useDisplayTimezone()
 
 const ZONES = [
   { city: 'Stockholm', flag: '🇸🇪', iana: 'Europe/Stockholm' },
@@ -59,6 +61,7 @@ const formattedDateTime = computed(() => {
 
 function selectZone(zone: typeof ZONES[number]) {
   selectedZone.value = zone
+  setDisplayTimezone(zone.iana)
   showDropdown.value = false
 }
 </script>

monitor-ui/src/composables/useDisplayTimezone.ts

@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+
+// Module-level singleton — shared across all components
+const selectedIana = ref('Europe/Stockholm')
+
+export function useDisplayTimezone() {
+  function setDisplayTimezone(iana: string) {
+    selectedIana.value = iana
+  }
+
+  return { selectedIana, setDisplayTimezone }
+}

monitor-ui/src/views/DashboardView.vue

@@ -5,11 +5,13 @@ import { Plus, LoaderCircle, X } from 'lucide-vue-next'
 import { registerServer } from '../api/servers'
 import type { RegisterServerBody } from '../api/servers'
 import { useServers } from '../composables/useServers'
+import { useDisplayTimezone } from '../composables/useDisplayTimezone'
 
 const router = useRouter()
 
 // Shared server state
 const { servers, loading, error: fetchError, fetch: fetchServers, ensureLoaded } = useServers()
+const { selectedIana } = useDisplayTimezone()
 
 onMounted(ensureLoaded)
 
@@ -19,15 +21,17 @@ function formatBytes(bytes: number): string {
 }
 
 function formatDate(iso: string): string {
-  const d = new Date(iso)
-  const dd = String(d.getDate()).padStart(2, '0')
-  const mm = String(d.getMonth() + 1).padStart(2, '0')
-  const yy = String(d.getFullYear()).slice(2)
-  return `${dd}/${mm}/${yy}`
+  return new Date(iso).toLocaleDateString('en-GB', {
+    timeZone: selectedIana.value,
+    day: '2-digit',
+    month: '2-digit',
+    year: '2-digit',
+  })
 }
 
 function formatTime(iso: string): string {
   return new Date(iso).toLocaleTimeString('en-GB', {
+    timeZone: selectedIana.value,
     hour: '2-digit',
     minute: '2-digit',
     second: '2-digit',