Add a Date & Time setting and fix inconsistent date formats app-wide

Different tables used different date formats: Servers & Tasks used a
fixed "YYYY-MM-DD HH:mm:ss" (24h), while Audit Log, DNS, Integrations
(Tailscale/Semaphore), and Users called plain .toLocaleString() with
no options, which renders using the browser's own locale — different
per browser/OS, and inconsistent with the other pages' fixed format.

- New Settings -> Date & Time page: pick date order (YYYY-MM-DD,
  DD/MM/YYYY, MM/DD/YYYY) and 12h vs 24h clock, with a live preview.
- utils/date.ts's formatDateTime() now reads these settings instead of
  being hardcoded to sv-SE/24h; the setting is fetched once at app
  startup (alongside /api/me) via a new non-secret GET
  /api/settings/display (any signed-in user, same rationale as the
  badge-color endpoints) and applied immediately on save too, without
  needing a page reload.
- Switched every remaining raw new Date(...).toLocaleString() call
  (Audit Log, DNS zone sync time, Tailscale/Semaphore last-seen,
  Users' last login) over to the shared formatter, so every table now
  renders dates identically.

Verified the formatter's date-order x 12h logic against all six
combinations plus the midnight/noon 12h edge cases, and the settings
endpoints end-to-end (defaults, partial updates, validation
rejection, audit logging) against the real dev server.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
bobbanandClaude Sonnet 5 committed 2026-09-15 22:17:06 +02:00
1 parent f7357141eb
commit f92f8de96e
12 files changed
+206 -17

No files matched your search

+10
View File
@@ -119,6 +119,14 @@ export interface NotificationEvents {
timezone: string;
}
export type DateFormat = "ymd" | "dmy" | "mdy";
export type TimeFormat = "24h" | "12h";
export interface DisplaySettings {
dateFormat: DateFormat;
timeFormat: TimeFormat;
}
export interface AppSettings {
gotify: GotifySettings;
ntfy: NtfySettings;
@@ -127,6 +135,7 @@ export interface AppSettings {
notifications: NotificationEvents;
providerColors: Record<string, string>;
integrationColors: Record<string, string>;
display: DisplaySettings;
}
export type AppSettingsPatch = { [K in keyof AppSettings]?: Partial<AppSettings[K]> };
@@ -655,6 +664,7 @@ export const api = {
get: () => request<{ settings: AppSettings }>("/api/settings"),
providerColors: () => request<{ providerColors: Record<string, string> }>("/api/settings/provider-colors"),
integrationColors: () => request<{ integrationColors: Record<string, string> }>("/api/settings/integration-colors"),
display: () => request<{ display: DisplaySettings }>("/api/settings/display"),
update: (data: AppSettingsPatch) =>
request<{ settings: AppSettings }>("/api/settings", { method: "PUT", body: JSON.stringify(data) }),
testGotify: (data: { url: string; token: string; priority?: number }) =>