add quiet hours to silence alerts during specific time periods (#265)

internal/alerts/alerts.go

@@ -28,6 +28,7 @@ type AlertManager struct {
 
 type AlertMessageData struct {
 	UserID   string
+	SystemID string
 	Title    string
 	Message  string
 	Link     string
@@ -105,8 +106,81 @@ func (am *AlertManager) bindEvents() {
 	am.hub.OnRecordAfterDeleteSuccess("alerts").BindFunc(resolveHistoryOnAlertDelete)
 }
 
+// IsNotificationSilenced checks if a notification should be silenced based on configured quiet hours
+func (am *AlertManager) IsNotificationSilenced(userID, systemID string) bool {
+	// Query for quiet hours windows that match this user and system
+	// Include both global windows (system is null/empty) and system-specific windows
+	var filter string
+	var params dbx.Params
+
+	if systemID == "" {
+		// If no systemID provided, only check global windows
+		filter = "user={:user} AND system=''"
+		params = dbx.Params{"user": userID}
+	} else {
+		// Check both global and system-specific windows
+		filter = "user={:user} AND (system='' OR system={:system})"
+		params = dbx.Params{
+			"user":   userID,
+			"system": systemID,
+		}
+	}
+
+	quietHourWindows, err := am.hub.FindAllRecords("quiet_hours", dbx.NewExp(filter, params))
+	if err != nil || len(quietHourWindows) == 0 {
+		return false
+	}
+
+	now := time.Now().UTC()
+
+	for _, window := range quietHourWindows {
+		windowType := window.GetString("type")
+		start := window.GetDateTime("start").Time()
+		end := window.GetDateTime("end").Time()
+
+		if windowType == "daily" {
+			// For daily recurring windows, extract just the time portion and compare
+			// The start/end are stored as full datetime but we only care about HH:MM
+			startHour, startMin, _ := start.Clock()
+			endHour, endMin, _ := end.Clock()
+			nowHour, nowMin, _ := now.Clock()
+
+			// Convert to minutes since midnight for easier comparison
+			startMinutes := startHour*60 + startMin
+			endMinutes := endHour*60 + endMin
+			nowMinutes := nowHour*60 + nowMin
+
+			// Handle case where window crosses midnight
+			if endMinutes < startMinutes {
+				// Window crosses midnight (e.g., 23:00 - 01:00)
+				if nowMinutes >= startMinutes || nowMinutes < endMinutes {
+					return true
+				}
+			} else {
+				// Normal case (e.g., 09:00 - 17:00)
+				if nowMinutes >= startMinutes && nowMinutes < endMinutes {
+					return true
+				}
+			}
+		} else {
+			// One-time window: check if current time is within the date range
+			if (now.After(start) || now.Equal(start)) && now.Before(end) {
+				return true
+			}
+		}
+	}
+
+	return false
+}
+
 // SendAlert sends an alert to the user
 func (am *AlertManager) SendAlert(data AlertMessageData) error {
+	// Check if alert is silenced
+	if am.IsNotificationSilenced(data.UserID, data.SystemID) {
+		am.hub.Logger().Info("Notification silenced", "user", data.UserID, "system", data.SystemID, "title", data.Title)
+		return nil
+	}
+
 	// get user settings
 	record, err := am.hub.FindFirstRecordByFilter(
 		"user_settings", "user={:user}",

internal/alerts/alerts_quiet_hours_test.go

@@ -0,0 +1,426 @@
+//go:build testing
+// +build testing
+
+package alerts_test
+
+import (
+	"testing"
+	"testing/synctest"
+	"time"
+
+	"github.com/henrygd/beszel/internal/alerts"
+	beszelTests "github.com/henrygd/beszel/internal/tests"
+
+	"github.com/pocketbase/dbx"
+	"github.com/stretchr/testify/assert"
+)
+
+func TestAlertSilencedOneTime(t *testing.T) {
+	hub, user := beszelTests.GetHubWithUser(t)
+	defer hub.Cleanup()
+
+	// Create a system
+	systems, err := beszelTests.CreateSystems(hub, 1, user.Id, "up")
+	assert.NoError(t, err)
+	system := systems[0]
+
+	// Create an alert
+	alert, err := beszelTests.CreateRecord(hub, "alerts", map[string]any{
+		"name":   "CPU",
+		"system": system.Id,
+		"user":   user.Id,
+		"value":  80,
+		"min":    1,
+	})
+	assert.NoError(t, err)
+
+	// Create a one-time quiet hours window (current time - 1 hour to current time + 1 hour)
+	now := time.Now().UTC()
+	startTime := now.Add(-1 * time.Hour)
+	endTime := now.Add(1 * time.Hour)
+
+	_, err = beszelTests.CreateRecord(hub, "quiet_hours", map[string]any{
+		"user":   user.Id,
+		"system": system.Id,
+		"type":   "one-time",
+		"start":  startTime,
+		"end":    endTime,
+	})
+	assert.NoError(t, err)
+
+	// Get alert manager
+	am := alerts.NewAlertManager(hub)
+	defer am.StopWorker()
+
+	// Test that alert is silenced
+	silenced := am.IsNotificationSilenced(user.Id, system.Id)
+	assert.True(t, silenced, "Alert should be silenced during active one-time window")
+
+	// Create a window that has already ended
+	pastStart := now.Add(-3 * time.Hour)
+	pastEnd := now.Add(-2 * time.Hour)
+
+	_, err = beszelTests.CreateRecord(hub, "quiet_hours", map[string]any{
+		"user":   user.Id,
+		"system": system.Id,
+		"type":   "one-time",
+		"start":  pastStart,
+		"end":    pastEnd,
+	})
+	assert.NoError(t, err)
+
+	// Should still be silenced because of the first window
+	silenced = am.IsNotificationSilenced(user.Id, system.Id)
+	assert.True(t, silenced, "Alert should still be silenced (past window doesn't affect active window)")
+
+	// Clear all windows and create a future window
+	_, err = hub.DB().NewQuery("DELETE FROM quiet_hours").Execute()
+	assert.NoError(t, err)
+
+	futureStart := now.Add(2 * time.Hour)
+	futureEnd := now.Add(3 * time.Hour)
+
+	_, err = beszelTests.CreateRecord(hub, "quiet_hours", map[string]any{
+		"user":   user.Id,
+		"system": system.Id,
+		"type":   "one-time",
+		"start":  futureStart,
+		"end":    futureEnd,
+	})
+	assert.NoError(t, err)
+
+	// Alert should NOT be silenced (window hasn't started yet)
+	silenced = am.IsNotificationSilenced(user.Id, system.Id)
+	assert.False(t, silenced, "Alert should not be silenced (window hasn't started)")
+
+	_ = alert
+}
+
+func TestAlertSilencedDaily(t *testing.T) {
+	hub, user := beszelTests.GetHubWithUser(t)
+	defer hub.Cleanup()
+
+	// Create a system
+	systems, err := beszelTests.CreateSystems(hub, 1, user.Id, "up")
+	assert.NoError(t, err)
+	system := systems[0]
+
+	// Get alert manager
+	am := alerts.NewAlertManager(hub)
+	defer am.StopWorker()
+
+	// Get current hour and create a window that includes current time
+	now := time.Now().UTC()
+	currentHour := now.Hour()
+	currentMin := now.Minute()
+
+	// Create a window from 1 hour ago to 1 hour from now
+	startHour := (currentHour - 1 + 24) % 24
+	endHour := (currentHour + 1) % 24
+
+	// Create times with just the hours/minutes we want (date doesn't matter for daily)
+	startTime := time.Date(2000, 1, 1, startHour, currentMin, 0, 0, time.UTC)
+	endTime := time.Date(2000, 1, 1, endHour, currentMin, 0, 0, time.UTC)
+
+	_, err = beszelTests.CreateRecord(hub, "quiet_hours", map[string]any{
+		"user":   user.Id,
+		"system": system.Id,
+		"type":   "daily",
+		"start":  startTime,
+		"end":    endTime,
+	})
+	assert.NoError(t, err)
+
+	// Alert should be silenced (current time is within the daily window)
+	silenced := am.IsNotificationSilenced(user.Id, system.Id)
+	assert.True(t, silenced, "Alert should be silenced during active daily window")
+
+	// Clear windows and create one that doesn't include current time
+	_, err = hub.DB().NewQuery("DELETE FROM quiet_hours").Execute()
+	assert.NoError(t, err)
+
+	// Create a window from 6-12 hours from now
+	futureStartHour := (currentHour + 6) % 24
+	futureEndHour := (currentHour + 12) % 24
+
+	startTime = time.Date(2000, 1, 1, futureStartHour, 0, 0, 0, time.UTC)
+	endTime = time.Date(2000, 1, 1, futureEndHour, 0, 0, 0, time.UTC)
+
+	_, err = beszelTests.CreateRecord(hub, "quiet_hours", map[string]any{
+		"user":   user.Id,
+		"system": system.Id,
+		"type":   "daily",
+		"start":  startTime,
+		"end":    endTime,
+	})
+	assert.NoError(t, err)
+
+	// Alert should NOT be silenced
+	silenced = am.IsNotificationSilenced(user.Id, system.Id)
+	assert.False(t, silenced, "Alert should not be silenced (outside daily window)")
+}
+
+func TestAlertSilencedDailyMidnightCrossing(t *testing.T) {
+	hub, user := beszelTests.GetHubWithUser(t)
+	defer hub.Cleanup()
+
+	// Create a system
+	systems, err := beszelTests.CreateSystems(hub, 1, user.Id, "up")
+	assert.NoError(t, err)
+	system := systems[0]
+
+	// Get alert manager
+	am := alerts.NewAlertManager(hub)
+	defer am.StopWorker()
+
+	// Create a window that crosses midnight: 22:00 - 02:00
+	startTime := time.Date(2000, 1, 1, 22, 0, 0, 0, time.UTC)
+	endTime := time.Date(2000, 1, 1, 2, 0, 0, 0, time.UTC)
+
+	_, err = beszelTests.CreateRecord(hub, "quiet_hours", map[string]any{
+		"user":   user.Id,
+		"system": system.Id,
+		"type":   "daily",
+		"start":  startTime,
+		"end":    endTime,
+	})
+	assert.NoError(t, err)
+
+	// Test with a time at 23:00 (should be silenced)
+	// We can't control the actual current time, but we can verify the logic
+	// by checking if the window was created correctly
+	windows, err := hub.FindAllRecords("quiet_hours", dbx.HashExp{
+		"user":   user.Id,
+		"system": system.Id,
+	})
+	assert.NoError(t, err)
+	assert.Len(t, windows, 1, "Should have created 1 window")
+
+	window := windows[0]
+	assert.Equal(t, "daily", window.GetString("type"))
+	assert.Equal(t, 22, window.GetDateTime("start").Time().Hour())
+	assert.Equal(t, 2, window.GetDateTime("end").Time().Hour())
+}
+
+func TestAlertSilencedGlobal(t *testing.T) {
+	hub, user := beszelTests.GetHubWithUser(t)
+	defer hub.Cleanup()
+
+	// Create multiple systems
+	systems, err := beszelTests.CreateSystems(hub, 3, user.Id, "up")
+	assert.NoError(t, err)
+
+	// Get alert manager
+	am := alerts.NewAlertManager(hub)
+	defer am.StopWorker()
+
+	// Create a global quiet hours window (no system specified)
+	now := time.Now().UTC()
+	startTime := now.Add(-1 * time.Hour)
+	endTime := now.Add(1 * time.Hour)
+
+	_, err = beszelTests.CreateRecord(hub, "quiet_hours", map[string]any{
+		"user":  user.Id,
+		"type":  "one-time",
+		"start": startTime,
+		"end":   endTime,
+		// system field is empty/null for global windows
+	})
+	assert.NoError(t, err)
+
+	// All systems should be silenced
+	for _, system := range systems {
+		silenced := am.IsNotificationSilenced(user.Id, system.Id)
+		assert.True(t, silenced, "Alert should be silenced for system %s (global window)", system.Id)
+	}
+
+	// Even with a systemID that doesn't exist, should be silenced
+	silenced := am.IsNotificationSilenced(user.Id, "nonexistent-system")
+	assert.True(t, silenced, "Alert should be silenced for any system (global window)")
+}
+
+func TestAlertSilencedSystemSpecific(t *testing.T) {
+	hub, user := beszelTests.GetHubWithUser(t)
+	defer hub.Cleanup()
+
+	// Create multiple systems
+	systems, err := beszelTests.CreateSystems(hub, 2, user.Id, "up")
+	assert.NoError(t, err)
+	system1 := systems[0]
+	system2 := systems[1]
+
+	// Get alert manager
+	am := alerts.NewAlertManager(hub)
+	defer am.StopWorker()
+
+	// Create a system-specific quiet hours window for system1 only
+	now := time.Now().UTC()
+	startTime := now.Add(-1 * time.Hour)
+	endTime := now.Add(1 * time.Hour)
+
+	_, err = beszelTests.CreateRecord(hub, "quiet_hours", map[string]any{
+		"user":   user.Id,
+		"system": system1.Id,
+		"type":   "one-time",
+		"start":  startTime,
+		"end":    endTime,
+	})
+	assert.NoError(t, err)
+
+	// System1 should be silenced
+	silenced := am.IsNotificationSilenced(user.Id, system1.Id)
+	assert.True(t, silenced, "Alert should be silenced for system1")
+
+	// System2 should NOT be silenced
+	silenced = am.IsNotificationSilenced(user.Id, system2.Id)
+	assert.False(t, silenced, "Alert should not be silenced for system2")
+}
+
+func TestAlertSilencedMultiUser(t *testing.T) {
+	hub, _ := beszelTests.GetHubWithUser(t)
+	defer hub.Cleanup()
+
+	// Create two users
+	user1, err := beszelTests.CreateUser(hub, "user1@example.com", "password")
+	assert.NoError(t, err)
+
+	user2, err := beszelTests.CreateUser(hub, "user2@example.com", "password")
+	assert.NoError(t, err)
+
+	// Create a system accessible to both users
+	system, err := beszelTests.CreateRecord(hub, "systems", map[string]any{
+		"name":  "shared-system",
+		"users": []string{user1.Id, user2.Id},
+		"host":  "127.0.0.1",
+	})
+	assert.NoError(t, err)
+
+	// Get alert manager
+	am := alerts.NewAlertManager(hub)
+	defer am.StopWorker()
+
+	// Create a quiet hours window for user1 only
+	now := time.Now().UTC()
+	startTime := now.Add(-1 * time.Hour)
+	endTime := now.Add(1 * time.Hour)
+
+	_, err = beszelTests.CreateRecord(hub, "quiet_hours", map[string]any{
+		"user":   user1.Id,
+		"system": system.Id,
+		"type":   "one-time",
+		"start":  startTime,
+		"end":    endTime,
+	})
+	assert.NoError(t, err)
+
+	// User1 should be silenced
+	silenced := am.IsNotificationSilenced(user1.Id, system.Id)
+	assert.True(t, silenced, "Alert should be silenced for user1")
+
+	// User2 should NOT be silenced
+	silenced = am.IsNotificationSilenced(user2.Id, system.Id)
+	assert.False(t, silenced, "Alert should not be silenced for user2")
+}
+
+func TestAlertSilencedWithActualAlert(t *testing.T) {
+	synctest.Test(t, func(t *testing.T) {
+		hub, user := beszelTests.GetHubWithUser(t)
+		defer hub.Cleanup()
+
+		// Create a system
+		systems, err := beszelTests.CreateSystems(hub, 1, user.Id, "up")
+		assert.NoError(t, err)
+		system := systems[0]
+
+		// Create a status alert
+		_, err = beszelTests.CreateRecord(hub, "alerts", map[string]any{
+			"name":   "Status",
+			"system": system.Id,
+			"user":   user.Id,
+			"min":    1,
+		})
+		assert.NoError(t, err)
+
+		// Create user settings with email
+		userSettings, err := hub.FindFirstRecordByFilter("user_settings", "user={:user}", dbx.Params{"user": user.Id})
+		if err != nil || userSettings == nil {
+			userSettings, err = beszelTests.CreateRecord(hub, "user_settings", map[string]any{
+				"user": user.Id,
+				"settings": map[string]any{
+					"emails": []string{"test@example.com"},
+				},
+			})
+			assert.NoError(t, err)
+		}
+
+		// Create a quiet hours window
+		now := time.Now().UTC()
+		startTime := now.Add(-1 * time.Hour)
+		endTime := now.Add(1 * time.Hour)
+
+		_, err = beszelTests.CreateRecord(hub, "quiet_hours", map[string]any{
+			"user":   user.Id,
+			"system": system.Id,
+			"type":   "one-time",
+			"start":  startTime,
+			"end":    endTime,
+		})
+		assert.NoError(t, err)
+
+		// Get initial email count
+		initialEmailCount := hub.TestMailer.TotalSend()
+
+		// Trigger an alert by setting system to down
+		system.Set("status", "down")
+		err = hub.SaveNoValidate(system)
+		assert.NoError(t, err)
+
+		// Wait for the alert to be processed (1 minute + buffer)
+		time.Sleep(time.Second * 75)
+		synctest.Wait()
+
+		// Check that no email was sent (because alert is silenced)
+		finalEmailCount := hub.TestMailer.TotalSend()
+		assert.Equal(t, initialEmailCount, finalEmailCount, "No emails should be sent when alert is silenced")
+
+		// Clear quiet hours windows
+		_, err = hub.DB().NewQuery("DELETE FROM quiet_hours").Execute()
+		assert.NoError(t, err)
+
+		// Reset system to up, then down again
+		system.Set("status", "up")
+		err = hub.SaveNoValidate(system)
+		assert.NoError(t, err)
+		time.Sleep(100 * time.Millisecond)
+
+		system.Set("status", "down")
+		err = hub.SaveNoValidate(system)
+		assert.NoError(t, err)
+
+		// Wait for the alert to be processed
+		time.Sleep(time.Second * 75)
+		synctest.Wait()
+
+		// Now an email should be sent
+		newEmailCount := hub.TestMailer.TotalSend()
+		assert.Greater(t, newEmailCount, finalEmailCount, "Email should be sent when not silenced")
+	})
+}
+
+func TestAlertSilencedNoWindows(t *testing.T) {
+	hub, user := beszelTests.GetHubWithUser(t)
+	defer hub.Cleanup()
+
+	// Create a system
+	systems, err := beszelTests.CreateSystems(hub, 1, user.Id, "up")
+	assert.NoError(t, err)
+	system := systems[0]
+
+	// Get alert manager
+	am := alerts.NewAlertManager(hub)
+	defer am.StopWorker()
+
+	// Without any quiet hours windows, alert should NOT be silenced
+	silenced := am.IsNotificationSilenced(user.Id, system.Id)
+	assert.False(t, silenced, "Alert should not be silenced when no windows exist")
+}

internal/alerts/alerts_status.go

@@ -166,6 +166,7 @@ func (am *AlertManager) sendStatusAlert(alertStatus string, systemName string, a
 
 	return am.SendAlert(AlertMessageData{
 		UserID:   alertRecord.GetString("user"),
+		SystemID: systemID,
 		Title:    title,
 		Message:  message,
 		Link:     am.hub.MakeLink("system", systemID),

internal/alerts/alerts_system.go

@@ -309,6 +309,7 @@ func (am *AlertManager) sendSystemAlert(alert SystemAlertData) {
 	}
 	am.SendAlert(AlertMessageData{
 		UserID:   alert.alertRecord.GetString("user"),
+		SystemID: alert.systemRecord.Id,
 		Title:    subject,
 		Message:  body,
 		Link:     am.hub.MakeLink("system", alert.systemRecord.Id),

internal/migrations/0_collections_snapshot_0_16_2.go

@@ -1150,6 +1150,99 @@ func init() {
 		"type": "base",
 		"updateRule": null,
 		"viewRule": null
+	},
+	{
+		"createRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
+		"deleteRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
+		"fields": [
+			{
+				"autogeneratePattern": "[a-z0-9]{10}",
+				"hidden": false,
+				"id": "text3208210256",
+				"max": 10,
+				"min": 10,
+				"name": "id",
+				"pattern": "^[a-z0-9]+$",
+				"presentable": false,
+				"primaryKey": true,
+				"required": true,
+				"system": true,
+				"type": "text"
+			},
+			{
+				"cascadeDelete": true,
+				"collectionId": "_pb_users_auth_",
+				"hidden": false,
+				"id": "relation2375276105",
+				"maxSelect": 1,
+				"minSelect": 0,
+				"name": "user",
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "relation"
+			},
+			{
+				"cascadeDelete": true,
+				"collectionId": "2hz5ncl8tizk5nx",
+				"hidden": false,
+				"id": "relation3377271179",
+				"maxSelect": 1,
+				"minSelect": 0,
+				"name": "system",
+				"presentable": false,
+				"required": false,
+				"system": false,
+				"type": "relation"
+			},
+			{
+				"hidden": false,
+				"id": "select2844932856",
+				"maxSelect": 1,
+				"name": "type",
+				"presentable": false,
+				"required": true,
+				"system": false,
+				"type": "select",
+				"values": [
+					"one-time",
+					"daily"
+				]
+			},
+			{
+				"hidden": false,
+				"id": "date2675529103",
+				"max": "",
+				"min": "",
+				"name": "start",
+				"presentable": false,
+				"required": true,
+				"system": false,
+				"type": "date"
+			},
+			{
+				"hidden": false,
+				"id": "date16528305",
+				"max": "",
+				"min": "",
+				"name": "end",
+				"presentable": false,
+				"required": true,
+				"system": false,
+				"type": "date"
+			}
+		],
+		"id": "pbc_451525641",
+		"indexes": [
+			"CREATE INDEX ` + "`" + `idx_q0iKnRP9v8` + "`" + ` ON ` + "`" + `quiet_hours` + "`" + ` (\n  ` + "`" + `user` + "`" + `,\n  ` + "`" + `system` + "`" + `\n)",
+			"CREATE INDEX ` + "`" + `idx_6T7ljT7FJd` + "`" + ` ON ` + "`" + `quiet_hours` + "`" + ` (\n  ` + "`" + `type` + "`" + `,\n  ` + "`" + `end` + "`" + `\n)"
+		],
+		"listRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
+		"name": "quiet_hours",
+		"system": false,
+		"type": "base",
+		"updateRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
+		"viewRule": "@request.auth.id != \"\" && user.id = @request.auth.id"
 	}
 ]`
 

internal/records/records.go

@@ -498,6 +498,10 @@ func (rm *RecordManager) DeleteOldRecords() {
 		if err != nil {
 			return err
 		}
+		err = deleteOldQuietHours(txApp)
+		if err != nil {
+			return err
+		}
 		return nil
 	})
 }
@@ -591,6 +595,17 @@ func deleteOldContainerRecords(app core.App) error {
 	return nil
 }
 
+// Deletes old quiet hours records where end date has passed
+func deleteOldQuietHours(app core.App) error {
+	now := time.Now().UTC()
+	_, err := app.DB().NewQuery("DELETE FROM quiet_hours WHERE type = 'one-time' AND end < {:now}").Bind(dbx.Params{"now": now}).Execute()
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
 /* Round float to two decimals */
 func twoDecimals(value float64) float64 {
 	return math.Round(value*100) / 100

internal/site/biome.json

@@ -30,11 +30,12 @@
 				"noUnusedFunctionParameters": "error",
 				"noUnusedPrivateClassMembers": "error",
 				"useExhaustiveDependencies": {
-					"level": "error",
+					"level": "warn",
 					"options": {
 						"reportUnnecessaryDependencies": false
 					}
 				},
+				"useUniqueElementIds": "off",
 				"noUnusedVariables": "error"
 			},
 			"style": {

internal/site/src/components/routes/settings/notifications.tsx

@@ -14,6 +14,7 @@ import { toast } from "@/components/ui/use-toast"
 import { isAdmin, pb } from "@/lib/api"
 import type { UserSettings } from "@/types"
 import { saveSettings } from "./layout"
+import { QuietHours } from "./quiet-hours"
 
 interface ShoutrrrUrlCardProps {
 	url: string
@@ -120,19 +121,32 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
 				</div>
 				<Separator />
 				<div className="space-y-3">
-					<div>
+					<div className="grid grid-cols-1 sm:flex items-center justify-between gap-4">
-						<h3 className="mb-1 text-lg font-medium">
+						<div>
-							<Trans>Webhook / Push notifications</Trans>
+							<h3 className="mb-1 text-lg font-medium">
-						</h3>
+								<Trans>Webhook / Push notifications</Trans>
-						<p className="text-sm text-muted-foreground leading-relaxed">
+							</h3>
-							<Trans>
+							<p className="text-sm text-muted-foreground leading-relaxed">
-								Beszel uses{" "}
+								<Trans>
-								<a href="https://beszel.dev/guide/notifications" target="_blank" className="link" rel="noopener">
+									Beszel uses{" "}
-									Shoutrrr
+									<a href="https://beszel.dev/guide/notifications" target="_blank" className="link" rel="noopener">
-								</a>{" "}
+										Shoutrrr
-								to integrate with popular notification services.
+									</a>{" "}
-							</Trans>
+									to integrate with popular notification services.
-						</p>
+								</Trans>
+							</p>
+						</div>
+						<Button
+							type="button"
+							variant="outline"
+							className="h-10 shrink-0"
+							onClick={addWebhook}
+						>
+							<PlusIcon className="size-4" />
+							<span className="ms-1">
+								<Trans>Add URL</Trans>
+							</span>
+						</Button>
 					</div>
 					{webhooks.length > 0 && (
 						<div className="grid gap-2.5" id="webhooks">
@@ -146,16 +160,10 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
 							))}
 						</div>
 					)}
-					<Button
+				</div>
-						type="button"
+				<Separator />
-						variant="outline"
+				<div className="space-y-3">
-						size="sm"
+					<QuietHours />
-						className="mt-2 flex items-center gap-1"
-						onClick={addWebhook}
-					>
-						<PlusIcon className="h-4 w-4 -ms-0.5" />
-						<Trans>Add URL</Trans>
-					</Button>
 				</div>
 				<Separator />
 				<Button
@@ -194,7 +202,7 @@ const ShoutrrrUrlCard = ({ url, onUrlChange, onRemove }: ShoutrrrUrlCardProps) =
 	}
 
 	return (
-		<Card className="bg-muted/40 p-2 md:p-3">
+		<Card className="bg-table-header p-2 md:p-3">
 			<div className="flex items-center gap-1">
 				<Input
 					type="url"

internal/site/src/components/routes/settings/quiet-hours.tsx

@@ -0,0 +1,530 @@
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import {
+	MoreHorizontalIcon,
+	PlusIcon,
+	Trash2Icon,
+	ServerIcon,
+	ClockIcon,
+	CalendarIcon,
+	ActivityIcon,
+	PenSquareIcon,
+} from "lucide-react"
+import { useEffect, useState } from "react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { useToast } from "@/components/ui/use-toast"
+import { pb } from "@/lib/api"
+import { $systems } from "@/lib/stores"
+import { formatShortDate } from "@/lib/utils"
+import type { QuietHoursRecord, SystemRecord } from "@/types"
+
+export function QuietHours() {
+	const [data, setData] = useState<QuietHoursRecord[]>([])
+	const [dialogOpen, setDialogOpen] = useState(false)
+	const [editingRecord, setEditingRecord] = useState<QuietHoursRecord | null>(null)
+	const { toast } = useToast()
+	const systems = useStore($systems)
+
+	useEffect(() => {
+		let unsubscribe: (() => void) | undefined
+		const pbOptions = {
+			expand: "system",
+			fields: "id,user,system,type,start,end,expand.system.name",
+		}
+		// Initial load
+		pb.collection<QuietHoursRecord>("quiet_hours")
+			.getList(0, 200, {
+				...pbOptions,
+				sort: "system",
+			})
+			.then(({ items }) => setData(items))
+
+		// Subscribe to changes
+		;(async () => {
+			unsubscribe = await pb.collection("quiet_hours").subscribe(
+				"*",
+				(e) => {
+					if (e.action === "create") {
+						setData((current) => [e.record as QuietHoursRecord, ...current])
+					}
+					if (e.action === "update") {
+						setData((current) => current.map((r) => (r.id === e.record.id ? (e.record as QuietHoursRecord) : r)))
+					}
+					if (e.action === "delete") {
+						setData((current) => current.filter((r) => r.id !== e.record.id))
+					}
+				},
+				pbOptions
+			)
+		})()
+		// Unsubscribe on unmount
+		return () => unsubscribe?.()
+	}, [])
+
+	const handleDelete = async (id: string) => {
+		try {
+			await pb.collection("quiet_hours").delete(id)
+		} catch (e: unknown) {
+			toast({
+				variant: "destructive",
+				title: t`Error`,
+				description: (e as Error).message || "Failed to delete quiet hours.",
+			})
+		}
+	}
+
+	const openEditDialog = (record: QuietHoursRecord) => {
+		setEditingRecord(record)
+		setDialogOpen(true)
+	}
+
+	const closeDialog = () => {
+		setDialogOpen(false)
+		setEditingRecord(null)
+	}
+
+	const formatDateTime = (record: QuietHoursRecord) => {
+		if (record.type === "daily") {
+			// For daily windows, show only time
+			const startTime = new Date(record.start).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })
+			const endTime = new Date(record.end).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })
+			return `${startTime} - ${endTime}`
+		}
+		// For one-time windows, show full date and time
+		const start = formatShortDate(record.start)
+		const end = formatShortDate(record.end)
+		return `${start} - ${end}`
+	}
+
+	const getWindowState = (record: QuietHoursRecord): "active" | "past" | "future" => {
+		const now = new Date()
+
+		if (record.type === "daily") {
+			// For daily windows, check if current time is within the window
+			const startDate = new Date(record.start)
+			const endDate = new Date(record.end)
+
+			// Get current time in local timezone
+			const currentMinutes = now.getHours() * 60 + now.getMinutes()
+			const startMinutes = startDate.getUTCHours() * 60 + startDate.getUTCMinutes()
+			const endMinutes = endDate.getUTCHours() * 60 + endDate.getUTCMinutes()
+
+			// Convert UTC to local time offset
+			const offset = now.getTimezoneOffset()
+			const localStartMinutes = (startMinutes - offset + 1440) % 1440
+			const localEndMinutes = (endMinutes - offset + 1440) % 1440
+
+			// Handle cases where window spans midnight
+			if (localStartMinutes <= localEndMinutes) {
+				return currentMinutes >= localStartMinutes && currentMinutes < localEndMinutes ? "active" : "future"
+			} else {
+				return currentMinutes >= localStartMinutes || currentMinutes < localEndMinutes ? "active" : "future"
+			}
+		} else {
+			// For one-time windows
+			const startDate = new Date(record.start)
+			const endDate = new Date(record.end)
+
+			if (now >= startDate && now < endDate) {
+				return "active"
+			} else if (now >= endDate) {
+				return "past"
+			} else {
+				return "future"
+			}
+		}
+	}
+
+	return (
+		<>
+			<div className="grid grid-cols-1 sm:flex items-center justify-between gap-4 mb-3">
+				<div>
+					<h3 className="mb-1 text-lg font-medium">
+						<Trans>Quiet hours</Trans>
+					</h3>
+					<p className="text-sm text-muted-foreground leading-relaxed">
+						<Trans>
+							Schedule quiet hours where notifications will not be sent, such as during maintenance periods.
+						</Trans>
+					</p>
+				</div>
+				<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+					<DialogTrigger asChild>
+						<Button variant="outline" className="h-10 shrink-0" onClick={() => setEditingRecord(null)}>
+							<PlusIcon className="size-4" />
+							<span className="ms-1">
+								<Trans>Add Quiet Hours</Trans>
+							</span>
+						</Button>
+					</DialogTrigger>
+					<QuietHoursDialog editingRecord={editingRecord} systems={systems} onClose={closeDialog} toast={toast} />
+				</Dialog>
+			</div>
+			{data.length > 0 && (
+				<div className="rounded-md border overflow-x-auto whitespace-nowrap">
+					<Table>
+						<TableHeader>
+							<TableRow className="border-border/50">
+								<TableHead className="px-4">
+									<span className="flex items-center gap-2">
+										<ServerIcon className="size-4" />
+										<Trans>System</Trans>
+									</span>
+								</TableHead>
+								<TableHead className="px-4">
+									<span className="flex items-center gap-2">
+										<ClockIcon className="size-4" />
+										<Trans>Type</Trans>
+									</span>
+								</TableHead>
+								<TableHead className="px-4">
+									<span className="flex items-center gap-2">
+										<ActivityIcon className="size-4" />
+										<Trans>State</Trans>
+									</span>
+								</TableHead>
+								<TableHead className="px-4">
+									<span className="flex items-center gap-2">
+										<CalendarIcon className="size-4" />
+										<Trans>Schedule</Trans>
+									</span>
+								</TableHead>
+								<TableHead className="px-4 text-right sr-only">
+									<Trans>Actions</Trans>
+								</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{data.map((record) => (
+								<TableRow key={record.id}>
+									<TableCell className="px-4 py-3">
+										{record.system ? record.expand?.system?.name || record.system : <Trans>All Systems</Trans>}
+									</TableCell>
+									<TableCell className="px-4 py-3">
+										{record.type === "daily" ? <Trans>Daily</Trans> : <Trans>One-time</Trans>}
+									</TableCell>
+									<TableCell className="px-4 py-3">
+										{(() => {
+											const state = getWindowState(record)
+											const stateConfig = {
+												active: { label: <Trans>Active</Trans>, variant: "success" as const },
+												past: { label: <Trans>Past</Trans>, variant: "danger" as const },
+												future: { label: <Trans>Future</Trans>, variant: "default" as const },
+											}
+											const config = stateConfig[state]
+											return <Badge variant={config.variant}>{config.label}</Badge>
+										})()}
+									</TableCell>
+									<TableCell className="px-4 py-3">{formatDateTime(record)}</TableCell>
+									<TableCell className="px-4 py-3 text-right">
+										<DropdownMenu>
+											<DropdownMenuTrigger asChild>
+												<Button variant="ghost" size="icon" className="size-8">
+													<span className="sr-only">
+														<Trans>Open menu</Trans>
+													</span>
+													<MoreHorizontalIcon className="size-4" />
+												</Button>
+											</DropdownMenuTrigger>
+											<DropdownMenuContent align="end">
+												<DropdownMenuItem onClick={() => openEditDialog(record)}>
+													<PenSquareIcon className="me-2.5 size-4" />
+													<Trans>Edit</Trans>
+												</DropdownMenuItem>
+												<DropdownMenuItem onClick={() => handleDelete(record.id)}>
+													<Trash2Icon className="me-2.5 size-4" />
+													<Trans>Delete</Trans>
+												</DropdownMenuItem>
+											</DropdownMenuContent>
+										</DropdownMenu>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</div>
+			)}
+		</>
+	)
+}
+
+// Helper function to format Date as datetime-local string (YYYY-MM-DDTHH:mm) in local time
+function formatDateTimeLocal(date: Date): string {
+	const year = date.getFullYear()
+	const month = String(date.getMonth() + 1).padStart(2, "0")
+	const day = String(date.getDate()).padStart(2, "0")
+	const hours = String(date.getHours()).padStart(2, "0")
+	const minutes = String(date.getMinutes()).padStart(2, "0")
+	return `${year}-${month}-${day}T${hours}:${minutes}`
+}
+
+function QuietHoursDialog({
+	editingRecord,
+	systems,
+	onClose,
+	toast,
+}: {
+	editingRecord: QuietHoursRecord | null
+	systems: SystemRecord[]
+	onClose: () => void
+	toast: any
+}) {
+	const [selectedSystem, setSelectedSystem] = useState(editingRecord?.system || "")
+	const [isGlobal, setIsGlobal] = useState(!editingRecord?.system)
+	const [windowType, setWindowType] = useState<"one-time" | "daily">(editingRecord?.type || "one-time")
+	const [startDateTime, setStartDateTime] = useState("")
+	const [endDateTime, setEndDateTime] = useState("")
+	const [startTime, setStartTime] = useState("")
+	const [endTime, setEndTime] = useState("")
+
+	useEffect(() => {
+		if (editingRecord) {
+			setSelectedSystem(editingRecord.system || "")
+			setIsGlobal(!editingRecord.system)
+			setWindowType(editingRecord.type)
+			if (editingRecord.type === "daily") {
+				// Extract time from datetime
+				const start = new Date(editingRecord.start)
+				const end = editingRecord.end ? new Date(editingRecord.end) : null
+				setStartTime(start.toTimeString().slice(0, 5))
+				setEndTime(end ? end.toTimeString().slice(0, 5) : "")
+			} else {
+				// For one-time, format as datetime-local (local time, not UTC)
+				const startDate = new Date(editingRecord.start)
+				const endDate = editingRecord.end ? new Date(editingRecord.end) : null
+
+				setStartDateTime(formatDateTimeLocal(startDate))
+				setEndDateTime(endDate ? formatDateTimeLocal(endDate) : "")
+			}
+		} else {
+			// Reset form with default dates: today at 12pm and 1pm
+			const today = new Date()
+			const noon = new Date(today)
+			noon.setHours(12, 0, 0, 0)
+			const onePm = new Date(today)
+			onePm.setHours(13, 0, 0, 0)
+
+			setSelectedSystem("")
+			setIsGlobal(true)
+			setWindowType("one-time")
+			setStartDateTime(formatDateTimeLocal(noon))
+			setEndDateTime(formatDateTimeLocal(onePm))
+			setStartTime("12:00")
+			setEndTime("13:00")
+		}
+	}, [editingRecord])
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault()
+
+		try {
+			let startValue: string
+			let endValue: string | undefined
+
+			if (windowType === "daily") {
+				// For daily windows, convert local time to UTC
+				// Create a date with the time in local timezone, then convert to UTC
+				const startDate = new Date(`2000-01-01T${startTime}:00`)
+				startValue = startDate.toISOString()
+
+				if (endTime) {
+					const endDate = new Date(`2000-01-01T${endTime}:00`)
+					endValue = endDate.toISOString()
+				}
+			} else {
+				// For one-time windows, use the datetime values
+				startValue = new Date(startDateTime).toISOString()
+				endValue = endDateTime ? new Date(endDateTime).toISOString() : undefined
+			}
+
+			const data = {
+				user: pb.authStore.record?.id,
+				system: isGlobal ? undefined : selectedSystem,
+				type: windowType,
+				start: startValue,
+				end: endValue,
+			}
+
+			if (editingRecord) {
+				await pb.collection("quiet_hours").update(editingRecord.id, data)
+				toast({
+					title: t`Updated`,
+					description: t`Quiet hours have been updated.`,
+				})
+			} else {
+				await pb.collection("quiet_hours").create(data)
+				toast({
+					title: t`Created`,
+					description: t`Quiet hours have been created.`,
+				})
+			}
+
+			onClose()
+		} catch (e) {
+			toast({
+				variant: "destructive",
+				title: t`Error`,
+				description: t`Failed to save quiet hours.`,
+			})
+		}
+	}
+
+	return (
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>{editingRecord ? <Trans>Edit Quiet Hours</Trans> : <Trans>Add Quiet Hours</Trans>}</DialogTitle>
+				<DialogDescription>
+					<Trans>Configure quiet hours where notifications will not be sent.</Trans>
+				</DialogDescription>
+			</DialogHeader>
+			<form onSubmit={handleSubmit} className="space-y-4">
+				<Tabs value={isGlobal ? "global" : "system"} onValueChange={(value) => setIsGlobal(value === "global")}>
+					<TabsList className="grid w-full grid-cols-2">
+						<TabsTrigger value="global">
+							<Trans>All Systems</Trans>
+						</TabsTrigger>
+						<TabsTrigger value="system">
+							<Trans>Specific System</Trans>
+						</TabsTrigger>
+					</TabsList>
+
+					<TabsContent value="system" className="mt-4 space-y-4">
+						<div className="grid gap-2">
+							<Label htmlFor="system">
+								<Trans>System</Trans>
+							</Label>
+							<Select value={selectedSystem} onValueChange={setSelectedSystem}>
+								<SelectTrigger id="system">
+									<SelectValue placeholder={t`Select a system`} />
+								</SelectTrigger>
+								<SelectContent>
+									{systems.map((system) => (
+										<SelectItem key={system.id} value={system.id}>
+											{system.name}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+							{/* Hidden input for native form validation */}
+							<input
+								className="sr-only"
+								type="text"
+								tabIndex={-1}
+								autoComplete="off"
+								value={selectedSystem}
+								onChange={() => {}}
+								required={!isGlobal}
+							/>
+						</div>
+					</TabsContent>
+				</Tabs>
+
+				<div className="grid gap-2">
+					<Label htmlFor="type">
+						<Trans>Type</Trans>
+					</Label>
+					<Select value={windowType} onValueChange={(value: "one-time" | "daily") => setWindowType(value)}>
+						<SelectTrigger id="type">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="one-time">
+								<Trans>One-time</Trans>
+							</SelectItem>
+							<SelectItem value="daily">
+								<Trans>Daily</Trans>
+							</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+
+				{windowType === "one-time" ? (
+					<>
+						<div className="grid gap-2">
+							<Label htmlFor="start-datetime">
+								<Trans>Start Time</Trans>
+							</Label>
+							<Input
+								id="start-datetime"
+								type="datetime-local"
+								value={startDateTime}
+								onChange={(e) => setStartDateTime(e.target.value)}
+								min={formatDateTimeLocal(new Date(new Date().setHours(0, 0, 0, 0)))}
+								required
+								className="tabular-nums tracking-tighter"
+							/>
+						</div>
+						<div className="grid gap-2">
+							<Label htmlFor="end-datetime">
+								<Trans>End Time</Trans>
+							</Label>
+							<Input
+								id="end-datetime"
+								type="datetime-local"
+								value={endDateTime}
+								onChange={(e) => setEndDateTime(e.target.value)}
+								min={startDateTime || formatDateTimeLocal(new Date())}
+								required
+								className="tabular-nums tracking-tighter"
+							/>
+						</div>
+					</>
+				) : (
+					<div className="grid gap-2 grid-cols-2">
+						<div>
+							<Label htmlFor="start-time">
+								<Trans>Start Time</Trans>
+							</Label>
+							<Input
+								className="tabular-nums tracking-tighter"
+								id="start-time"
+								type="time"
+								value={startTime}
+								onChange={(e) => setStartTime(e.target.value)}
+								required
+							/>
+						</div>
+						<div>
+							<Label htmlFor="end-time">
+								<Trans>End Time</Trans>
+							</Label>
+							<Input
+								className="tabular-nums tracking-tighter"
+								id="end-time"
+								type="time"
+								value={endTime}
+								onChange={(e) => setEndTime(e.target.value)}
+								required
+							/>
+						</div>
+					</div>
+				)}
+
+				<DialogFooter>
+					<Button type="button" variant="outline" onClick={onClose}>
+						<Trans>Cancel</Trans>
+					</Button>
+					<Button type="submit">{editingRecord ? <Trans>Update</Trans> : <Trans>Create</Trans>}</Button>
+				</DialogFooter>
+			</form>
+		</DialogContent>
+	)
+}

internal/site/src/components/systems-table/systems-table-columns.tsx

@@ -233,7 +233,7 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 				const { value, unit } = formatBytes((info.getValue() || 0) as number, true, userSettings.unitNet, false)
 				return (
 					<span className="tabular-nums whitespace-nowrap">
-						{decimalString(value , value >= 100 ? 1 : 2)} {unit}
+						{decimalString(value, value >= 100 ? 1 : 2)} {unit}
 					</span>
 				)
 			},
@@ -377,9 +377,9 @@ function TableCellWithMeter(info: CellContext<SystemRecord, unknown>) {
 	const meterClass = cn(
 		"h-full",
 		(info.row.original.status !== SystemStatus.Up && STATUS_COLORS.paused) ||
-			(threshold === MeterState.Good && STATUS_COLORS.up) ||
+		(threshold === MeterState.Good && STATUS_COLORS.up) ||
-			(threshold === MeterState.Warn && STATUS_COLORS.pending) ||
+		(threshold === MeterState.Warn && STATUS_COLORS.pending) ||
-			STATUS_COLORS.down
+		STATUS_COLORS.down
 	)
 	return (
 		<div className="flex gap-2 items-center tabular-nums tracking-tight w-full">
@@ -410,9 +410,9 @@ function DiskCellWithMultiple(info: CellContext<SystemRecord, unknown>) {
 		return cn(
 			"h-full",
 			(status !== SystemStatus.Up && STATUS_COLORS.paused) ||
-				(threshold === MeterState.Good && STATUS_COLORS.up) ||
+			(threshold === MeterState.Good && STATUS_COLORS.up) ||
-				(threshold === MeterState.Warn && STATUS_COLORS.pending) ||
+			(threshold === MeterState.Warn && STATUS_COLORS.pending) ||
-				STATUS_COLORS.down
+			STATUS_COLORS.down
 		)
 	}
 
@@ -435,30 +435,30 @@ function DiskCellWithMultiple(info: CellContext<SystemRecord, unknown>) {
 				</Link>
 			</TooltipTrigger>
 			<TooltipContent side="right" className="max-w-xs pb-2">
-					<div className="grid gap-1.5">
+				<div className="grid gap-1.5">
-						<div className="grid gap-0.5">
+					<div className="grid gap-0.5">
-							<div className="text-[0.65rem] text-muted-foreground uppercase tracking-wide tabular-nums"><Trans context="Root disk label">Root</Trans></div>
+						<div className="text-[0.65rem] text-muted-foreground uppercase tracking-wide tabular-nums"><Trans context="Root disk label">Root</Trans></div>
-							<div className="flex gap-2 items-center tabular-nums text-xs">
+						<div className="flex gap-2 items-center tabular-nums text-xs">
-								<span className="min-w-7">{decimalString(rootDiskPct, rootDiskPct >= 10 ? 1 : 2)}%</span>
+							<span className="min-w-7">{decimalString(rootDiskPct, rootDiskPct >= 10 ? 1 : 2)}%</span>
-								<span className="flex-1 min-w-12 grid bg-muted h-2.5 rounded-sm overflow-hidden">
+							<span className="flex-1 min-w-12 grid bg-muted h-2.5 rounded-sm overflow-hidden">
-									<span className={getMeterClass(rootDiskPct)} style={{ width: `${rootDiskPct}%` }}></span>
+								<span className={getMeterClass(rootDiskPct)} style={{ width: `${rootDiskPct}%` }}></span>
-								</span>
+							</span>
-							</div>
 						</div>
-						{extraFs.map(([name, pct]) => {
-							return (
-								<div key={name} className="grid gap-0.5">
-									<div className="text-[0.65rem] max-w-40 text-muted-foreground uppercase tracking-wide truncate">{name}</div>
-									<div className="flex gap-2 items-center tabular-nums text-xs">
-										<span className="min-w-7">{decimalString(pct, pct >= 10 ? 1 : 2)}%</span>
-										<span className="flex-1 min-w-12 grid bg-muted h-2.5 rounded-sm overflow-hidden">
-											<span className={getMeterClass(pct)} style={{ width: `${pct}%` }}></span>
-										</span>
-									</div>
-								</div>
-							)
-						})}
 					</div>
+					{extraFs.map(([name, pct]) => {
+						return (
+							<div key={name} className="grid gap-0.5">
+								<div className="text-[0.65rem] max-w-40 text-muted-foreground uppercase tracking-wide truncate">{name}</div>
+								<div className="flex gap-2 items-center tabular-nums text-xs">
+									<span className="min-w-7">{decimalString(pct, pct >= 10 ? 1 : 2)}%</span>
+									<span className="flex-1 min-w-12 grid bg-muted h-2.5 rounded-sm overflow-hidden">
+										<span className={getMeterClass(pct)} style={{ width: `${pct}%` }}></span>
+									</span>
+								</div>
+							</div>
+						)
+					})}
+				</div>
 			</TooltipContent>
 		</Tooltip>
 	)
@@ -469,7 +469,7 @@ export function IndicatorDot({ system, className }: { system: SystemRecord; clas
 	return (
 		<span
 			className={cn("shrink-0 size-2 rounded-full", className)}
-			// style={{ marginBottom: "-1px" }}
+		// style={{ marginBottom: "-1px" }}
 		/>
 	)
 }

internal/site/src/types.d.ts

@@ -244,6 +244,20 @@ export interface AlertsHistoryRecord extends RecordModel {
 	resolved?: string | null
 }
 
+export interface QuietHoursRecord extends RecordModel {
+	id: string
+	user: string
+	system: string
+	type: "one-time" | "daily"
+	start: string
+	end: string
+	expand?: {
+		system?: {
+			name: string
+		}
+	}
+}
+
 export interface ContainerRecord extends RecordModel {
 	id: string
 	system: string