chore(helm): migrate chart to the all-in-one image

FIRST PASS - renders and lints, but has NOT been installed on a cluster.
See #3898. Needs a real deploy and an upgrade test from 0.2.x before merge.

The chart deployed checkmate-client, checkmate-backend and checkmate-mongo,
none of which CI publishes any more. Chart.yaml pinned appVersion to v3.8.1
with a comment explaining the chart could not be bumped until it moved to the
all-in-one image. This does that move.

Structure. The application image serves the client and the API from one
origin, so the separate client deployment, service, nginx ConfigMap and
ingress are removed and templates/api/ becomes templates/app/. One ingress
now routes / to the app rather than one routing / to nginx and another
routing /api/v1 to the API - which also drops the CORS annotations, since
the browser is same-origin. MongoDB moves to upstream mongo:8.0, matching
docker/docker-compose.yaml.

Environment. UPTIME_APP_API_BASE_URL and UPTIME_APP_CLIENT_HOST are gone;
the server stopped reading them. CLIENT_HOST is derived from the app's own
ingress, and is omitted from `env` when secrets.CLIENT_HOST is set, because
`env` takes precedence over `envFrom` and would otherwise discard the
override silently.

Back-compat. checkmate.app merges any legacy client/api/server block over
the app defaults, so most values files upgrade unedited. client.image and
client.tag are deliberately not inherited - that repo is unpublished, and
honouring it would pin an install to an unpullable image. checkmate.api is
kept as an alias.

Two upgrade cases fail loudly instead of deploying something wrong: a set
client.image, and client/api ingress hosts that differ (one origin cannot
serve both).

Worker is unchanged in shape - still opt-in, still the same image as the
app, still deriving QUEUE_PRIMARY_PROCESSES. It referenced
.Values.client.protocol, which no longer exists; rendering with
worker.enabled=true caught that nil pointer.

Verified with helm lint and helm template across: defaults, worker enabled,
worker plus KEDA autoscaling, each of the three legacy value blocks, the two
new guards, the change_me guard, and the CLIENT_HOST override. No
checkmate-client, checkmate-backend, checkmate-mongo or UPTIME_APP_* strings
remain in rendered output.

Not done: INSTALLATION.md has a new migration section but its body still
documents the two-tier layout in places, and no cluster test has been run.

Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd

.github/workflows/check-lockfile.yml

@@ -0,0 +1,22 @@
+name: Lockfile Check (Client & Server)
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  check-lockfiles:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      # Validate with the same node image the production build uses, so a lock
+      # that passes here cannot fail the image build's npm ci.
+      - name: Resolve node image from Dockerfile
+        id: node-image
+        run: echo "image=$(grep -m1 -o 'node:[^ ]*' docker/Dockerfile)" >> "$GITHUB_OUTPUT"
+
+      - name: Check server lockfile
+        run: docker run --rm -v "$PWD/server":/w -w /w ${{ steps.node-image.outputs.image }} npm ci --dry-run
+
+      - name: Check client lockfile
+        run: docker run --rm -v "$PWD/client":/w -w /w ${{ steps.node-image.outputs.image }} npm ci --dry-run

.github/workflows/poeditor-sync.yml

@@ -1,138 +0,0 @@
-name: POEditor Translation Synchronization (disabled)
-
-# This workflow is intentionally disabled — kept for reference only.
-# The full definition is preserved commented-out below. To re-enable,
-# delete the stub job and uncomment the section starting at `on:`.
-
-on:
-    workflow_dispatch:
-
-jobs:
-    disabled:
-        if: false
-        runs-on: ubuntu-latest
-        steps:
-            - run: echo "This workflow is disabled. See comments below for the original definition."
-
-# ---------------------------------------------------------------------------
-# Original (disabled) workflow below. Do not uncomment if you don't know what you're doing.
-# ---------------------------------------------------------------------------
-
-# on:
-#   # For manual triggering
-#   workflow_dispatch:
-#     inputs:
-#       languages:
-#         description: "Languages to synchronize (comma separated, e.g.: tr,en,es)"
-#         required: false
-#         default: "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja,zh-cn,th"
-#       format:
-#         description: "Export format (key_value_json or json)"
-#         required: false
-#         default: "key_value_json"
-
-# permissions:
-#   contents: write
-#   pull-requests: write
-
-# jobs:
-#   sync-translations:
-#     runs-on: ubuntu-latest
-#     permissions:
-#       contents: write
-#       issues: write
-#       pull-requests: write
-
-#     steps:
-#       - name: Checkout code
-#         uses: actions/checkout@v3
-#         with:
-#           token: ${{ secrets.GITHUB_TOKEN }}
-#           fetch-depth: 0
-
-#       - name: Setup Node.js
-#         uses: actions/setup-node@v3
-#         with:
-#           node-version: "22"
-
-#       - name: Create package.json for scripts
-#         run: |
-#           mkdir -p .github/scripts
-#           cat > .github/scripts/package.json << EOF
-#           {
-#             "name": "poeditor-scripts",
-#             "version": "1.0.0",
-#             "private": true,
-#             "type": "module",
-#             "dependencies": {
-#               "axios": "^1.6.0",
-#               "fs-extra": "^11.1.1"
-#             }
-#           }
-#           EOF
-
-#       - name: Install dependencies
-#         run: |
-#           cd .github/scripts
-#           npm install
-
-#       - name: Download translations from POEditor
-#         env:
-#           POEDITOR_API: ${{ secrets.POEDITOR_API }}
-#           POEDITOR_PROJECT_ID: ${{ secrets.POEDITOR_PROJECT_ID }}
-#           LANGUAGES: ${{ github.event.inputs.languages || 'tr,en' }}
-#           EXPORT_FORMAT: ${{ github.event.inputs.format || 'key_value_json' }}
-#         run: |
-#           mkdir -p temp
-#           node .github/scripts/download-translations.js
-
-#       - name: Verify translation files
-#         run: |
-#           echo "Verifying translation files..."
-#           for file in temp/*.json; do
-#             echo "Checking $file"
-#             if [ ! -s "$file" ]; then
-#               echo "Error: $file is empty or does not exist"
-#               exit 1
-#             fi
-#             # Validate JSON format
-#             cat "$file" | jq . > /dev/null || { echo "Error: $file is not valid JSON"; exit 1; }
-#           done
-#           echo "All translation files are valid"
-
-#       - name: Copy translations to project
-#         run: |
-#           mkdir -p client/src/locales
-#           cp -r temp/* client/src/locales/
-#           echo "Translation files copied to client/src/locales/"
-
-#       - name: Get current date
-#         id: date
-#         run: echo "date=$(date +'%Y-%m-%d %H:%M:%S')" >> $GITHUB_OUTPUT
-
-#       - name: Format client code
-#         run: |
-#           cd client
-#           npm ci
-#           npm run format
-
-#       - name: Create Pull Request
-#         uses: peter-evans/create-pull-request@v7
-#         with:
-#           token: ${{ secrets.GITHUB_TOKEN }}
-#           commit-message: "feat: translations updated from POEditor"
-#           title: "🌐 Updated Translations from POEditor"
-#           body: |
-#             This PR contains the latest translations from POEditor.
-
-#             📅 Update Date: ${{ steps.date.outputs.date }}
-#             🔄 Updated Languages: ${{ github.event.inputs.languages || 'tr,en' }}
-
-#             ⚠️ Please review the translations and approve the PR if everything looks correct.
-#           branch: translation-update-${{ github.run_number }}
-#           delete-branch: true
-#           base: develop
-#           add-paths: |
-#             client/src/locales/*.json
-#           committer: GitHub Action <github-actions[bot]@users.noreply.github.com>
-#           author: GitHub Action <github-actions[bot]@users.noreply.github.com>

.github/workflows/upload-poeditor.yml

@@ -1,113 +0,0 @@
-name: Upload Translations to POEditor on PR Merge
-
-on:
-  pull_request:
-    types: [closed]
-    branches:
-      - develop
-    paths:
-      - "client/src/locales/**"
-
-jobs:
-  upload-translations:
-    # Only run if the PR was merged (not just closed) or manually triggered
-    if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0 # Fetch all history to get changed files
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "22"
-
-      - name: Create package.json for scripts
-        run: |
-          mkdir -p .github/scripts
-          cat > .github/scripts/package.json << EOF
-          {
-            "name": "poeditor-scripts",
-            "version": "1.0.0",
-            "private": true,
-            "type": "module",
-            "dependencies": {
-              "axios": "^1.6.0",
-              "fs-extra": "^11.1.1",
-              "form-data": "^4.0.0"
-            }
-          }
-          EOF
-
-      - name: Install dependencies
-        run: |
-          cd .github/scripts
-          npm install
-
-      - name: Get changed locale files
-        id: changed-files
-        if: github.event_name == 'pull_request'
-        run: |
-          # Get base and head commits
-          BASE_SHA=${{ github.event.pull_request.base.sha }}
-          HEAD_SHA=${{ github.event.pull_request.head.sha }}
-
-          echo "Base SHA: $BASE_SHA"
-          echo "Head SHA: $HEAD_SHA"
-
-          # Get list of changed files in client/src/locales directory
-          CHANGED_FILES=$(git diff --name-only $BASE_SHA..$HEAD_SHA -- 'client/src/locales/*.json' || git ls-files 'client/src/locales/*.json')
-
-          if [ -z "$CHANGED_FILES" ]; then
-            echo "No changes detected in locale files"
-            echo "CHANGED_FILES=" >> $GITHUB_ENV
-          else
-            echo "Changed files:"
-            echo "$CHANGED_FILES"
-            echo "CHANGED_FILES<<EOF" >> $GITHUB_ENV
-            echo "$CHANGED_FILES" >> $GITHUB_ENV
-            echo "EOF" >> $GITHUB_ENV
-          fi
-
-      - name: Upload changed translations to POEditor
-        if: env.CHANGED_FILES != ''
-        env:
-          POEDITOR_API: ${{ secrets.POEDITOR_API }}
-          POEDITOR_PROJECT_ID: ${{ secrets.POEDITOR_PROJECT_ID }}
-        run: |
-          # Process each changed file
-          for FILE in $CHANGED_FILES; do
-            if [[ -f "$FILE" ]]; then
-              # Extract language code from filename (e.g., client/src/locales/en.json -> en)
-              FILENAME=$(basename "$FILE")
-              
-              # Special case: map gb.json to en language code
-              if [ "$FILENAME" == "gb.json" ]; then
-                LANG="en"
-                echo "Found gb.json, mapping to language code 'en'"
-              else
-                LANG=$(basename "$FILE" .json)
-              fi
-              
-              echo "Processing $FILE for language $LANG"
-              
-              # Upload to POEditor
-              LANGUAGE=$LANG FILE_PATH=$FILE node .github/scripts/upload-translations.js
-            fi
-          done
-
-      - name: Notify on success
-        if: success() && env.CHANGED_FILES != ''
-        run: |
-          echo "Successfully uploaded translation files to POEditor."
-          if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
-            echo "Manual trigger comment: ${{ github.event.inputs.comment }}"
-          fi
-
-      - name: Notify on no changes
-        if: env.CHANGED_FILES == ''
-        run: |
-          echo "No translation files were found to upload."

README.md

@@ -32,12 +32,13 @@
 
 <h1 align="center"><a href="https://bluewavelabs.ca" target="_blank">Checkmate</a></h1>
 
-<p align="center"><strong>An open source uptime and infrastructure monitoring application</strong></p>
+<p align="center"><strong>An open source uptime and infrastructure monitoring application</strong>
 
 [![Run on PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=checkmate)
 
-<img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
 
+<img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
+</p>
 <br>
 
 
@@ -80,7 +81,9 @@ Usage instructions can be found [here](https://checkmate.so/docs).
 <a id="installation"></a>
 ## Installation
 
-The quickest way to run Checkmate is the reference Docker Compose file, which runs the all-in-one image (`ghcr.io/bluewave-labs/checkmate`) plus MongoDB:
+The quickest way to run Checkmate is the reference Docker Compose file. It starts two services: the all-in-one Checkmate application image (`ghcr.io/bluewave-labs/checkmate`) and a separate MongoDB service.
+
+> **What “all-in-one” means:** the Checkmate application is packaged in a single image; MongoDB is not embedded in that image and remains required. The reference Compose file starts MongoDB for you. For custom deployments, configure `DB_CONNECTION_STRING` to use an external MongoDB instance.
 
 ```bash
 curl -O https://raw.githubusercontent.com/bluewave-labs/checkmate/master/docker/docker-compose.yaml
@@ -89,6 +92,10 @@ JWT_SECRET="$(openssl rand -hex 32)" docker compose up -d
 
 Then open http://localhost:52345. If the app is reached at another origin (domain or LAN IP), set `CLIENT_HOST` accordingly. To build the image yourself, run `docker build -f docker/Dockerfile -t checkmate .` from a checkout. For TLS, put any reverse proxy (Caddy, Traefik, nginx) in front of port 52345.
 
+There are also 1-click installation options like [Repocloud](https://repocloud.io/details/Checkmate),
+[Pikapods](https://www.pikapods.com/), [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](../../charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) or [Cloudzy](https://cloudzy.com/marketplace/checkmate).
+
+
 ### Configuration
 
 The image is configured entirely through environment variables on the server container:
@@ -151,7 +158,7 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
   - Selective disk monitoring with mountpoint selection
 - Incidents at a glance
 - Status pages with 4 beautiful themes
-- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
+- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Rocket.Chat, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
 - Scheduled maintenance
 - JSON query monitoring
 - Multi-language support for Arabic, Chinese (Simplified), Chinese (Traditional, Taiwan), Czech, English, Finnish, French, German, Japanese, Portuguese (Brazil), Russian, Spanish, Thai, Turkish, Ukrainian, and Vietnamese
@@ -205,9 +212,9 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
 <a id="contributing"></a>
 ## Contributing
 
-We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer), [Mert](https://github.com/mertssmnoglu) and [Karen](https://github.com/karenvicent) helping individuals and businesses monitor their infra and servers.
+We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer) and [Mert](https://github.com/mertssmnoglu) helping individuals and businesses monitor their infra and servers.
 
-We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned 7000+ stars and attracted 90+ contributors from around the globe.
+We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned almost 11K+ stars and attracted 150+ contributors from around the globe.
 
 Our repo is starred by employees from **Google, Microsoft, Intel, Cisco, Tencent, Electronic Arts, ByteDance, JP Morgan Chase, Deloitte, Accenture, Foxconn, Broadcom, China Telecom, Barclays, Capgemini, Wipro, Cloudflare, Dassault Systèmes and NEC**, so don’t hold back — jump in, contribute and learn with us!
 

charts/helm/checkmate/Chart.yaml

@@ -2,9 +2,5 @@ apiVersion: v2
 name: checkmate-chart
 description: A Helm chart for Checkmate App
 type: application
-version: 0.2.0
-# DO NOT bump appVersion past v3.8.1 until this chart is migrated to the all-in-one
-# image (ghcr.io/bluewave-labs/checkmate). The checkmate-client / checkmate-backend /
-# checkmate-mongo images this chart references are frozen at v3.8.1 — later versions
-# are never published, so a bumped chart will fail to pull.
-appVersion: "v3.8.1" # "v" prefix: published image tags are v-prefixed (ghcr.io/.../checkmate-*:v3.8.1)
+version: 0.3.0
+appVersion: "latest" # the all-in-one image publishes :latest on release tags; pin a version here to freeze

charts/helm/checkmate/INSTALLATION.md

@@ -19,8 +19,8 @@ cd checkmate/charts/helm/checkmate
 
 ### 2. Customize values.yaml
 Edit `values.yaml` to update:
-- `client.ingress.host` and `api.ingress.host` with your domain names
-- `api.protocol` (usually http or https)
+- `app.ingress.host` with your domain name
+- `app.protocol` (usually http or https)
 - **If upgrading**: Migrate persistence settings from flat structure to nested:
   - Old: `persistence.mongodbSize` → New: `persistence.mongo.size`
   - Add: `persistence.mongo.storageClass` (leave empty for default)
@@ -95,7 +95,7 @@ chart. You can still pin per tier:
 
 ```yaml
 api:
-  image: ghcr.io/bluewave-labs/checkmate-backend   # repo only
+  image: ghcr.io/bluewave-labs/checkmate   # repo only
   tag: ""            # empty → Chart.appVersion; set e.g. "v3.1.0" to pin, or "latest" for a dev tag
 ```
 
@@ -244,3 +244,41 @@ kubectl get secrets | grep checkmate-tls
 ```
 
 The ingress will automatically use these secrets to enable HTTPS access to your Checkmate instance.
+
+## Upgrading to chart 0.3.0 (all-in-one image)
+
+Checkmate now ships as a single image that serves both the client and the API, so
+the chart deploys one workload and one ingress instead of two.
+
+**What changed**
+
+| 0.2.x | 0.3.0 |
+|---|---|
+| `client.*` + `api.*` value blocks | one `app.*` block |
+| `checkmate-client` + `checkmate-backend` images | `ghcr.io/bluewave-labs/checkmate` |
+| `ghcr.io/bluewave-labs/checkmate-mongo` | upstream `mongo:8.0` |
+| Deployment `checkmate-api` + `checkmate-client` | Deployment `checkmate` |
+| Ingress `checkmate-api-ingress` (`/api/v1`) + client ingress (`/`) | Ingress `checkmate-ingress` (`/`) |
+| `UPTIME_APP_API_BASE_URL`, `UPTIME_APP_CLIENT_HOST` | not set — the client is same-origin |
+
+`appVersion` is no longer frozen at v3.8.1; the chart tracks the published image again.
+
+**Upgrading an existing install**
+
+Existing `client.*`, `api.*` and `server.*` overrides are still read and merged over
+the `app.*` defaults, so most values files upgrade without edits. Two cases fail
+deliberately rather than deploying something wrong:
+
+- `client.image` set — that image is no longer published, so the chart stops instead
+  of leaving you with an ImagePullBackOff. Remove the `client:` block.
+- `client.ingress.host` and `api.ingress.host` set to *different* hosts — one origin
+  now serves both, so the chart cannot honour a split. Set a single `app.ingress.host`.
+
+Migrate overrides to `app.*` when convenient; the legacy blocks are transitional.
+
+**One ingress, one host**
+
+If you previously served the client and API on separate hostnames, external clients
+now use the single `app.ingress.host`. Update any bookmarks, uptime checks, or DNS
+records that pointed at the old API hostname.
+

charts/helm/checkmate/templates/_helpers.tpl

@@ -1,18 +1,41 @@
 {{- /*
-Back-compat shim: the `server.*` value block was renamed to `api.*`. Existing installs that
-still pass a legacy `server:` block keep working — this returns the effective API values with any
-legacy `server.*` overrides merged on top of the `api.*` defaults (legacy wins where set).
+Back-compat shim for the all-in-one image migration.
 
-New installs have no `server:` key, so this is a no-op deepCopy of `.Values.api`. Consume it as:
-  {{- $api := include "checkmate.api" . | fromYaml -}}
-then reference `$api.*` instead of `.Values.api.*`.
+Chart 0.2.x deployed a separate client and API, configured through `client.*` and
+`api.*` (and, before that, `server.*`). Checkmate now ships one image that serves
+both, so those collapse into a single `app.*` block.
+
+Existing installs keep working: any legacy block is merged over the `app.*`
+defaults, in the order client -> api -> server, so a value set in an older block
+still wins. Only `image`/`tag` are deliberately NOT inherited from `client.*` —
+that repo (checkmate-client) is no longer published, so honouring it would pin an
+install to an image that cannot be pulled.
+
+New installs have no legacy keys and this is a no-op deepCopy of `.Values.app`.
+Consume it as:
+  {{- $app := include "checkmate.app" . | fromYaml -}}
+*/}}
+{{- define "checkmate.app" -}}
+{{- $app := deepCopy .Values.app -}}
+{{- with .Values.client -}}
+{{- $legacy := omit (deepCopy .) "image" "tag" "port" -}}
+{{- $app = mergeOverwrite $app $legacy -}}
+{{- end -}}
+{{- with .Values.api -}}
+{{- $app = mergeOverwrite $app (deepCopy .) -}}
+{{- end -}}
+{{- with .Values.server -}}
+{{- $app = mergeOverwrite $app (deepCopy .) -}}
+{{- end -}}
+{{- $app | toYaml -}}
+{{- end -}}
+
+{{- /*
+Deprecated alias kept so any out-of-tree template referencing `checkmate.api`
+still resolves. Prefer `checkmate.app`.
 */}}
 {{- define "checkmate.api" -}}
-{{- $api := deepCopy .Values.api -}}
-{{- with .Values.server -}}
-{{- $api = mergeOverwrite $api (deepCopy .) -}}
-{{- end -}}
-{{- $api | toYaml -}}
+{{- include "checkmate.app" . -}}
 {{- end -}}
 
 {{- /*

charts/helm/checkmate/templates/api/deployment.yaml

@@ -1,65 +0,0 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: checkmate-api
-spec:
-  replicas: 1 # single scheduler — seeds/reconciles the jobs collection
-  selector:
-    matchLabels:
-      app: checkmate-api
-  template:
-    metadata:
-      labels:
-        app: checkmate-api
-    spec:
-    {{- with $api.affinity }}
-      affinity:
-        {{- tpl ( . | toYaml) $ | nindent 8 }}
-    {{- end }}
-    {{- with $api.tolerations }}
-      tolerations:
-        {{- tpl ( . | toYaml) $ | nindent 8 }}
-    {{- end }}
-      containers:
-        - name: api
-          image: {{ include "checkmate.image" (dict "image" $api.image "tag" $api.tag "root" $) }}
-          imagePullPolicy: {{ $api.imagePullPolicy }}
-          ports:
-            - name: http
-              containerPort: {{ $api.port }}
-          envFrom:
-            - secretRef:
-                name: checkmate-secrets
-          # Probes hit the Express /api/v1/health endpoint — proves the HTTP server is responsive.
-          # NOTE: this does NOT detect a wedged job loop when queuePrimaryProcesses=true (the API is
-          # also a worker). Worker-aware health for that mode is a follow-up — see worker-health-checks.md §7.5.
-          livenessProbe:
-            httpGet:
-              path: /api/v1/health
-              port: http
-            initialDelaySeconds: {{ $api.probes.liveness.initialDelaySeconds }}
-            periodSeconds: {{ $api.probes.liveness.periodSeconds }}
-            timeoutSeconds: {{ $api.probes.liveness.timeoutSeconds }}
-            failureThreshold: {{ $api.probes.liveness.failureThreshold }}
-          readinessProbe:
-            httpGet:
-              path: /api/v1/health
-              port: http
-            initialDelaySeconds: {{ $api.probes.readiness.initialDelaySeconds }}
-            periodSeconds: {{ $api.probes.readiness.periodSeconds }}
-            timeoutSeconds: {{ $api.probes.readiness.timeoutSeconds }}
-            failureThreshold: {{ $api.probes.readiness.failureThreshold }}
-          {{- with $api.resources }}
-          resources:
-              {{- tpl ( . | toYaml) $ | nindent 12 }}
-          {{- end }}
-          env:
-          - name: CLIENT_HOST
-            value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"
-          - name: QUEUE_MODE
-            value: "primary"
-          # Derived: when a worker tier is deployed the API only schedules (false); otherwise it is
-          # all-in-one and processes jobs itself (true). Keeps the two from ever competing for jobs.
-          - name: QUEUE_PRIMARY_PROCESSES
-            value: {{ not .Values.worker.enabled | quote }}

charts/helm/checkmate/templates/api/ingress.yaml

@@ -1,39 +0,0 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-{{- if $api.ingress.enabled }}
-apiVersion: networking.k8s.io/v1
-kind: Ingress
-metadata:
-  name: checkmate-api-ingress
-  {{- if $api.ingress.annotations }}
-  annotations:
-    {{- range $key, $value := $api.ingress.annotations }}
-    {{ $key }}: {{ $value | quote }}
-    {{- end }}
-  {{- end }}
-  {{/*#annotations:
-    #nginx.ingress.kubernetes.io/rewrite-target: /
-    #nginx.ingress.kubernetes.io/enable-cors: "true"
-    #nginx.ingress.kubernetes.io/cors-allow-origin: "http://{{ .Values.client.ingress.host }},https://{{ .Values.client.ingress.host }}"
-    #nginx.ingress.kubernetes.io/cors-allow-methods: "GET, PUT, POST, DELETE, PATCH, OPTIONS"
-    #nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization"
-    #nginx.ingress.kubernetes.io/cors-allow-credentials: "true"*/}}
-spec:
-  ingressClassName: {{ $api.ingress.className }}
-  {{- if $api.ingress.tls.enabled }}
-  tls:
-    - hosts:
-        - {{ $api.ingress.host }}
-      secretName: {{ default (printf "%s-api-tls" .Release.Name) $api.ingress.tls.secretName }}
-  {{- end }}
-  rules:
-    - host: {{ $api.ingress.host }}
-      http:
-        paths:
-          - path: /api/v1
-            pathType: Prefix
-            backend:
-              service:
-                name: checkmate-api
-                port:
-                  number: {{ $api.port }}
-{{- end }}

charts/helm/checkmate/templates/api/service.yaml

@@ -1,10 +0,0 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-apiVersion: v1
-kind: Service
-metadata:
-  name: checkmate-api
-spec:
-  selector:
-    app: checkmate-api
-  ports:
-    - port: {{ $api.port }}

charts/helm/checkmate/templates/app/deployment.yaml

@@ -0,0 +1,71 @@
+{{- $app := include "checkmate.app" . | fromYaml -}}
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: checkmate
+spec:
+  replicas: 1 # single scheduler — seeds/reconciles the jobs collection
+  selector:
+    matchLabels:
+      app: checkmate
+  template:
+    metadata:
+      labels:
+        app: checkmate
+    spec:
+    {{- with $app.affinity }}
+      affinity:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+    {{- with $app.tolerations }}
+      tolerations:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+      containers:
+        - name: checkmate
+          image: {{ include "checkmate.image" (dict "image" $app.image "tag" $app.tag "root" $) }}
+          imagePullPolicy: {{ $app.imagePullPolicy }}
+          ports:
+            - name: http
+              containerPort: {{ $app.port }}
+          envFrom:
+            - secretRef:
+                name: checkmate-secrets
+          # Probes hit the Express /api/v1/health endpoint — proves the HTTP server is responsive.
+          # NOTE: this does NOT detect a wedged job loop when queuePrimaryProcesses=true (the app is
+          # also a worker). Worker-aware health for that mode is a follow-up — see worker-health-checks.md §7.5.
+          livenessProbe:
+            httpGet:
+              path: /api/v1/health
+              port: http
+            initialDelaySeconds: {{ $app.probes.liveness.initialDelaySeconds }}
+            periodSeconds: {{ $app.probes.liveness.periodSeconds }}
+            timeoutSeconds: {{ $app.probes.liveness.timeoutSeconds }}
+            failureThreshold: {{ $app.probes.liveness.failureThreshold }}
+          readinessProbe:
+            httpGet:
+              path: /api/v1/health
+              port: http
+            initialDelaySeconds: {{ $app.probes.readiness.initialDelaySeconds }}
+            periodSeconds: {{ $app.probes.readiness.periodSeconds }}
+            timeoutSeconds: {{ $app.probes.readiness.timeoutSeconds }}
+            failureThreshold: {{ $app.probes.readiness.failureThreshold }}
+          {{- with $app.resources }}
+          resources:
+              {{- tpl ( . | toYaml) $ | nindent 12 }}
+          {{- end }}
+          env:
+          # The client is served from this same origin, so CLIENT_HOST defaults to
+          # the app's own ingress URL. `env` takes precedence over `envFrom`, so an
+          # explicit secrets.CLIENT_HOST is honoured by omitting this entry rather
+          # than emitting a value that would silently win over it.
+          {{- if not (hasKey .Values.secrets "CLIENT_HOST") }}
+          - name: CLIENT_HOST
+            value: "{{ $app.protocol }}://{{ $app.ingress.host }}"
+          {{- end }}
+          - name: QUEUE_MODE
+            value: "primary"
+          # Derived: when a worker tier is deployed the app only schedules (false); otherwise it is
+          # all-in-one and processes jobs itself (true). Keeps the two from ever competing for jobs.
+          - name: QUEUE_PRIMARY_PROCESSES
+            value: {{ not .Values.worker.enabled | quote }}

charts/helm/checkmate/templates/app/ingress.yaml

@@ -0,0 +1,35 @@
+{{- $app := include "checkmate.app" . | fromYaml -}}
+{{- if $app.ingress.enabled }}
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: checkmate-ingress
+  {{- if $app.ingress.annotations }}
+  annotations:
+    {{- range $key, $value := $app.ingress.annotations }}
+    {{ $key }}: {{ $value | quote }}
+    {{- end }}
+  {{- end }}
+spec:
+  ingressClassName: {{ $app.ingress.className }}
+  {{- if $app.ingress.tls.enabled }}
+  tls:
+    - hosts:
+        - {{ $app.ingress.host }}
+      secretName: {{ default (printf "%s-tls" .Release.Name) $app.ingress.tls.secretName }}
+  {{- end }}
+  rules:
+    - host: {{ $app.ingress.host }}
+      http:
+        paths:
+          # The application serves both the client and /api/v1 from one origin, so
+          # a single root rule replaces the separate client and API ingresses. No
+          # CORS annotations are needed now that the browser is same-origin.
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: checkmate
+                port:
+                  number: {{ $app.port }}
+{{- end }}

charts/helm/checkmate/templates/app/service.yaml

@@ -0,0 +1,10 @@
+{{- $app := include "checkmate.app" . | fromYaml -}}
+apiVersion: v1
+kind: Service
+metadata:
+  name: checkmate
+spec:
+  selector:
+    app: checkmate
+  ports:
+    - port: {{ $app.port }}

charts/helm/checkmate/templates/client/deployment.yaml

@@ -1,46 +0,0 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: checkmate-client
-spec:
-  replicas: 1
-  selector:
-    matchLabels:
-      app: checkmate-client
-  template:
-    metadata:
-      labels:
-        app: checkmate-client
-    spec:
-    {{- with .Values.client.affinity }}
-      affinity:
-        {{- tpl ( . | toYaml) $ | nindent 8 }}
-    {{- end }}
-    {{- with .Values.client.tolerations }}
-      tolerations:
-        {{- tpl ( . | toYaml) $ | nindent 8 }}
-    {{- end }}
-      containers:
-        - name: client
-          image: {{ include "checkmate.image" (dict "image" .Values.client.image "tag" .Values.client.tag "root" $) }}
-          imagePullPolicy: {{ .Values.client.imagePullPolicy }}
-          ports:
-            - containerPort: {{ .Values.client.port }}
-          env:
-            - name: UPTIME_APP_API_BASE_URL
-              value: "{{ $api.protocol }}://{{ $api.ingress.host }}/api/v1"
-            - name: UPTIME_APP_CLIENT_HOST
-              value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"
-          volumeMounts:
-            - name: config-volume
-              mountPath: /etc/nginx/conf.d/default.conf
-              subPath: default.conf
-          {{- with .Values.client.resources }}
-          resources:
-              {{- tpl ( . | toYaml) $ | nindent 12 }}
-          {{- end }}
-      volumes:
-        - name: config-volume
-          configMap:
-            name: checkmate-client-nginx-cm

charts/helm/checkmate/templates/client/ingress.yaml

@@ -1,31 +0,0 @@
-{{- if .Values.client.ingress.enabled }}
-apiVersion: networking.k8s.io/v1
-kind: Ingress
-metadata:
-  name: checkmate-client-ingress
-  {{- if .Values.client.ingress.annotations }}
-  annotations:
-    {{- range $key, $value := .Values.client.ingress.annotations }}
-    {{ $key }}: {{ $value | quote }}
-    {{- end }}
-  {{- end }}
-spec:
-  ingressClassName: {{ .Values.client.ingress.className }}
-  {{- if .Values.client.ingress.tls.enabled }}
-  tls:
-    - hosts:
-        - {{ .Values.client.ingress.host }}
-      secretName: {{ default (printf "%s-client-tls" .Release.Name) .Values.client.ingress.tls.secretName }}
-  {{- end }}
-  rules:
-    - host: {{ .Values.client.ingress.host }}
-      http:
-        paths:
-          - path: /
-            pathType: Prefix
-            backend:
-              service:
-                name: checkmate-client
-                port:
-                  number: {{ .Values.client.port }}
-{{- end }}

charts/helm/checkmate/templates/client/nginx-cm.yaml

@@ -1,42 +0,0 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-apiVersion: v1
-kind: ConfigMap
-metadata:
-  name: checkmate-client-nginx-cm
-data:
-  default.conf: |
-    server {
-      listen       80;
-      listen  [::]:80;
-
-      server_name checkmate-demo.bluewavelabs.ca;
-      server_tokens off;
-
-      location /.well-known/acme-challenge/ {
-          root /var/www/certbot;
-      }
-
-      location / {
-          root   /usr/share/nginx/html;
-          index  index.html index.htm;
-          try_files $uri $uri/ /index.html;
-      }
-
-      # location /api/ {
-      #     proxy_pass http://{{ $api.ingress.host }}:5000/api/;
-      #     proxy_http_version 1.1;
-      #     proxy_set_header Host $host;
-      #     proxy_set_header X-Real-IP $remote_addr;
-      #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-      #     proxy_set_header X-Forwarded-Proto $scheme;
-      # }
-
-      location /api-docs/ {
-          proxy_pass http://{{ $api.ingress.host }}:5000/api-docs/;
-          proxy_http_version 1.1;
-          proxy_set_header Host $host;
-          proxy_set_header X-Real-IP $remote_addr;
-          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-          proxy_set_header X-Forwarded-Proto $scheme;
-      }
-    }

charts/helm/checkmate/templates/client/service.yaml

@@ -1,9 +0,0 @@
-apiVersion: v1
-kind: Service
-metadata:
-  name: checkmate-client
-spec:
-  selector:
-    app: checkmate-client
-  ports:
-    - port: {{ .Values.client.port }}

charts/helm/checkmate/templates/prechecks.yaml

@@ -1,49 +1,45 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-{{- if eq .Values.client.ingress.host "change_me" }}
-  {{- fail "client.ingress.host must be overridden and not set to 'change_me'" }}
+{{- $app := include "checkmate.app" . | fromYaml -}}
+{{- if eq $app.ingress.host "change_me" }}
+  {{- fail "app.ingress.host must be overridden and not set to 'change_me'" }}
 {{- end }}
 
-{{- if eq $api.ingress.host "change_me" }}
-  {{- fail "api.ingress.host (or legacy server.ingress.host) must be overridden and not set to 'change_me'" }}
-{{- end }}
-
-{{- $apiProtocol := $api.protocol }}
-{{- if not (or (eq $apiProtocol "http") (eq $apiProtocol "https")) }}
-  {{- fail "api.protocol must be either 'http' or 'https'" }}
-{{- end }}
-
-{{- $clientProtocol := .Values.client.protocol }}
-{{- if not (or (eq $clientProtocol "http") (eq $clientProtocol "https")) }}
-  {{- fail "client.protocol must be either 'http' or 'https'" }}
+{{- $protocol := $app.protocol }}
+{{- if not (or (eq $protocol "http") (eq $protocol "https")) }}
+  {{- fail "app.protocol must be either 'http' or 'https'" }}
 {{- end }}
 
 {{/* Enforce protocol when TLS is enabled to avoid mixed-content */}}
-{{- if and .Values.client.ingress.tls.enabled (ne $clientProtocol "https") }}
-  {{- fail "client.ingress.tls.enabled is true but client.protocol is not 'https'. Set client.protocol: https to avoid mixed content." }}
-{{- end }}
-
-{{- if and $api.ingress.tls.enabled (ne $apiProtocol "https") }}
-  {{- fail "api.ingress.tls.enabled is true but api.protocol is not 'https'. Set api.protocol: https to ensure correct API base URL." }}
-{{- end }}
-
-{{/* If client runs on https, API must also be https to avoid mixed content */}}
-{{- if and (eq $clientProtocol "https") (ne $apiProtocol "https") }}
-  {{- fail "client.protocol is 'https' but api.protocol is not. Set api.protocol: https to prevent browser mixed-content issues." }}
+{{- if and $app.ingress.tls.enabled (ne $protocol "https") }}
+  {{- fail "app.ingress.tls.enabled is true but app.protocol is not 'https'. Set app.protocol: https to avoid mixed content." }}
 {{- end }}
 
 {{/* Fail early if TLS enabled without cert-manager annotations (cluster-issuer or issuer) */}}
-{{- $cAnn := .Values.client.ingress.annotations | default dict }}
-{{- $aAnn := $api.ingress.annotations | default dict }}
+{{- $ann := $app.ingress.annotations | default dict }}
+{{- $hasIssuer := or (hasKey $ann "cert-manager.io/cluster-issuer") (hasKey $ann "cert-manager.io/issuer") }}
 
-{{- $clientHasIssuer := or (hasKey $cAnn "cert-manager.io/cluster-issuer") (hasKey $cAnn "cert-manager.io/issuer") }}
-{{- $apiHasIssuer := or (hasKey $aAnn "cert-manager.io/cluster-issuer") (hasKey $aAnn "cert-manager.io/issuer") }}
-
-{{- if and .Values.client.ingress.tls.enabled (not $clientHasIssuer) }}
-  {{- fail "client.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
+{{- if and $app.ingress.tls.enabled (not $hasIssuer) }}
+  {{- fail "app.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
 {{- end }}
 
-{{- if and $api.ingress.tls.enabled (not $apiHasIssuer) }}
-  {{- fail "api.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
+{{/*
+  Upgrade guard. The client and API are one service now, so a values file that still
+  points the two at different hosts cannot be honoured — fail loudly rather than
+  silently dropping one of them.
+*/}}
+{{- if and .Values.client .Values.api }}
+{{- $clientHost := (.Values.client.ingress | default dict).host }}
+{{- $apiHost := (.Values.api.ingress | default dict).host }}
+{{- if and $clientHost $apiHost (ne $clientHost $apiHost) }}
+  {{- fail (printf "client.ingress.host (%s) and api.ingress.host (%s) differ, but Checkmate now serves the client and the API from one origin. Set a single app.ingress.host instead." $clientHost $apiHost) }}
+{{- end }}
+{{- end }}
+
+{{/*
+  The client image is no longer published. Point this out rather than letting the
+  install fail later on an ImagePullBackOff nobody can action.
+*/}}
+{{- if and .Values.client .Values.client.image }}
+  {{- fail "client.image is set, but the separate client image is no longer published. Remove the client block; the application image in app.image now serves the client." }}
 {{- end }}
 
 {{/* Worker grace period must exceed the server drain timeout (25s) or workers are SIGKILLed mid-drain */}}
@@ -51,4 +47,4 @@
   {{- fail "worker.terminationGracePeriodSeconds must be greater than 25 (the server drain timeout) or workers are killed mid-drain" }}
 {{- end }}
 
-{{/* Secret name can be omitted; we default to <release>-client|api-tls in templates */}}
+{{/* Secret name can be omitted; we default to <release>-tls in templates */}}

charts/helm/checkmate/templates/worker/deployment.yaml

@@ -1,4 +1,4 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
+{{- $app := include "checkmate.app" . | fromYaml -}}
 {{- if .Values.worker.enabled }}
 apiVersion: apps/v1
 kind: Deployment
@@ -27,8 +27,8 @@ spec:
     {{- end }}
       containers:
         - name: worker
-          image: {{ include "checkmate.image" (dict "image" (.Values.worker.image | default $api.image) "tag" (.Values.worker.tag | default $api.tag) "root" $) }}
-          imagePullPolicy: {{ .Values.worker.imagePullPolicy | default $api.imagePullPolicy }}
+          image: {{ include "checkmate.image" (dict "image" (.Values.worker.image | default $app.image) "tag" (.Values.worker.tag | default $app.tag) "root" $) }}
+          imagePullPolicy: {{ .Values.worker.imagePullPolicy | default $app.imagePullPolicy }}
           ports:
             - name: health
               containerPort: {{ .Values.worker.healthPort }}
@@ -36,9 +36,13 @@ spec:
             - secretRef:
                 name: checkmate-secrets # DB_CONNECTION_STRING (+ JWT_SECRET/CLIENT_HOST for validateEnv)
           env:
-          # Secret default CLIENT_HOST is the non-URL "change_me"; override like the API so validateEnv passes.
+          # validateEnv requires a URL-shaped CLIENT_HOST, so mirror the app's default
+          # here. Omitted when secrets.CLIENT_HOST is set, since `env` would otherwise
+          # take precedence over the envFrom value and silently discard the override.
+          {{- if not (hasKey .Values.secrets "CLIENT_HOST") }}
           - name: CLIENT_HOST
-            value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"
+            value: "{{ $app.protocol }}://{{ $app.ingress.host }}"
+          {{- end }}
           - name: QUEUE_MODE
             value: "worker"
           - name: HEALTH_PORT

charts/helm/checkmate/values.yaml

@@ -1,31 +1,17 @@
-client:
-  image: ghcr.io/bluewave-labs/checkmate-client
-  tag: "" # defaults to Chart.appVersion; set a full repo:tag in `image` to pin (e.g. a :latest dev tag)
-  imagePullPolicy: IfNotPresent # IfNotPresent so kind-loaded :latest images are used (not pulled)
-  port: 80
-  protocol: http
-  ingress:
-    enabled: true
-    host: change_me
-    className: nginx
-    annotations: {}
-    # Example annotations for cert-manager:
-    # annotations:
-    #   cert-manager.io/cluster-issuer: "letsencrypt-prod"
-    tls:
-      enabled: false
-      # secretName: {{ .Release.Name }}-client-tls  # Optional; defaults to <release>-client-tls if omitted
-      # Note: when enabling TLS, also set client.protocol: https and add
-      # a cert-manager issuer annotation (e.g. cert-manager.io/cluster-issuer: "letsencrypt-prod").
-      # The secret will be automatically created by cert-manager when using the cert-manager.io/cluster-issuer annotation
-
-api:
-  image: ghcr.io/bluewave-labs/checkmate-backend
+# Checkmate is published as a single all-in-one application image: the API server
+# also serves the React client, so one deployment and one ingress cover both.
+# The `client:` and `api:` blocks from chart 0.2.x are still read for back-compat
+# (see templates/_helpers.tpl) — `app.*` is the block to set on new installs.
+app:
+  image: ghcr.io/bluewave-labs/checkmate
   tag: "" # defaults to Chart.appVersion; set a full repo:tag in `image` to pin (e.g. a :latest dev tag)
   imagePullPolicy: IfNotPresent # IfNotPresent so kind-loaded :latest images are used (not pulled)
   port: 52345
   protocol: http
-  # Liveness/readiness probes hit GET /api/v1/health on the api port (proves the HTTP server is up).
+  resources: {}
+  affinity: {}
+  tolerations: {}
+  # Liveness/readiness probes hit GET /api/v1/health on the app port (proves the HTTP server is up).
   probes:
     liveness:
       initialDelaySeconds: 10
@@ -47,25 +33,27 @@ api:
     #   cert-manager.io/cluster-issuer: "letsencrypt-prod"
     tls:
       enabled: false
-      # secretName: {{ .Release.Name }}-api-tls  # Optional; defaults to <release>-api-tls if omitted
-      # Note: when enabling TLS, also set api.protocol: https and add
+      # secretName: {{ .Release.Name }}-tls  # Optional; defaults to <release>-tls if omitted
+      # Note: when enabling TLS, also set app.protocol: https and add
       # a cert-manager issuer annotation (e.g. cert-manager.io/cluster-issuer: "letsencrypt-prod").
       # The secret will be automatically created by cert-manager when using the cert-manager.io/cluster-issuer annotation
 
+# Upstream MongoDB. The former ghcr.io/bluewave-labs/checkmate-mongo image is no
+# longer published; this matches the mongo version in docker/docker-compose.yaml.
 mongodb:
-  image: ghcr.io/bluewave-labs/checkmate-mongo
-  tag: "" # defaults to Chart.appVersion; set a full repo:tag in `image` to pin
-  imagePullPolicy: IfNotPresent # IfNotPresent so kind-loaded :latest images are used (not pulled)
+  image: mongo
+  tag: "8.0"
+  imagePullPolicy: IfNotPresent
   port: 27017
 
 worker:
   # Off by default; existing installs are unchanged. When true, a dedicated worker processes all
-  # jobs and the API stops processing (QUEUE_PRIMARY_PROCESSES is derived as false). When false, the
-  # API is all-in-one and processes jobs itself.
+  # jobs and the app stops processing (QUEUE_PRIMARY_PROCESSES is derived as false). When false, the
+  # app is all-in-one and processes jobs itself.
   enabled: false
-  image: "" # defaults to api.image when empty, same as API image
-  tag: "" # defaults to api.tag (-> Chart.appVersion) when empty
-  imagePullPolicy: "" # defaults to api.imagePullPolicy when empty
+  image: "" # defaults to app.image when empty, same as the application image
+  tag: "" # defaults to app.tag (-> Chart.appVersion) when empty
+  imagePullPolicy: "" # defaults to app.imagePullPolicy when empty
   replicas: 1 # used only when autoscaling.enabled = false
   healthPort: 52346 # HEALTH_PORT; serves /livez /readyz /metrics
   terminationGracePeriodSeconds: 30 # MUST stay > the server drain timeout (25s) or workers are killed mid-drain
@@ -97,7 +85,8 @@ worker:
 secrets:
   JWT_SECRET: change_me
   DB_CONNECTION_STRING: mongodb://checkmate-mongodb:27017/uptime_db
-  CLIENT_HOST: change_me
+  # CLIENT_HOST is derived from app.protocol + app.ingress.host by the deployment;
+  # set it here only to override that (e.g. when fronting the app with another proxy).
   NODE_ENV: production
   LOG_LEVEL: info
   TOKEN_TTL: 99d

client/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "client",
-	"version": "3.10.0",
+	"version": "3.11.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "client",
-			"version": "3.10.0",
+			"version": "3.11.0",
 			"dependencies": {
 				"@csstools/css-tokenizer": "^3.0.4",
 				"@emotion/react": "^11.13.3",

client/package.json

@@ -1,9 +1,10 @@
 {
 	"name": "client",
 	"private": true,
-	"version": "3.10.0",
+	"version": "3.11.0",
 	"type": "module",
 	"scripts": {
+		"lockfile": "docker run --rm -v \"$PWD\":/w -w /w $(grep -m1 -o 'node:[^ ]*' ../docker/Dockerfile) npm install --package-lock-only",
 		"dev": "vite",
 		"build": "tsc -b && vite build",
 		"build-dev": "tsc -b && vite build --mode development",

client/src/Components/common/charts/HeatmapResponseTimeTooltip.tsx

@@ -1,13 +1,12 @@
 import Stack from "@mui/material/Stack";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
 import type { CheckSnapshot } from "@/Types/Check";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
 import type { RootState } from "@/Types/state";
 import { useTranslation } from "react-i18next";
-import prettyMilliseconds from "pretty-ms";
 
 type HeatmapCheck =
 	| CheckSnapshot
@@ -59,9 +58,7 @@ export const HeatmapResponseTimeTooltip = ({
 					</Typography>
 					<Typography>
 						{t("common.labels.responseTime")}:{" "}
-						{check?.responseTime
-							? prettyMilliseconds(check.responseTime, { compact: true })
-							: "N/A"}
+						{check?.responseTime ? formatMs(check.responseTime) : "N/A"}
 					</Typography>
 					<Typography textTransform={"capitalize"}>
 						Status:{" "}

client/src/Components/common/charts/HistogramResponseTime.tsx

@@ -9,6 +9,7 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 import { computeBarHeights } from "@/Utils/DataUtils";
+import { formatMs } from "@/Utils/TimeUtils";
 
 interface HistogramResponseTimeProps {
 	checks: CheckSnapshot[];
@@ -19,25 +20,25 @@ interface HistogramResponseTimeProps {
 }
 
 interface ResponseTimeStats {
-	max: number | string;
-	avg: number | string;
+	max: string | null;
+	avg: string | null;
 }
 
 const DEFAULT_HEIGHT = 50;
 
 const calculateResponseTimeStats = (checks: CheckSnapshot[]): ResponseTimeStats => {
 	if (!Array.isArray(checks) || checks.length === 0) {
-		return { max: "-", avg: "-" };
+		return { max: null, avg: null };
 	}
 
 	const validChecks = checks.filter((check) => check.responseTime != null);
 	if (validChecks.length === 0) {
-		return { max: "-", avg: "-" };
+		return { max: null, avg: null };
 	}
 
 	const responseTimes = validChecks.map((check) => check.responseTime);
-	const max = Math.round(Math.max(...responseTimes));
-	const avg = Math.round(
+	const max = formatMs(Math.max(...responseTimes));
+	const avg = formatMs(
 		responseTimes.reduce((sum, time) => sum + time, 0) / responseTimes.length
 	);
 
@@ -69,29 +70,28 @@ export const HistogramResponseTime = ({
 	const chartHeight = typeof height === "number" ? `${height}px` : height;
 	const gridGap = gap ?? theme.spacing(0.5);
 
-	const statsContent = showStats &&
-		(typeof stats.max === "number" || typeof stats.avg === "number") && (
-			<Stack
-				justifyContent="center"
-				alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
-				width={110}
-				pr={statsPosition === "left" ? theme.spacing(8) : 0}
-				pl={statsPosition === "right" ? theme.spacing(8) : 0}
+	const statsContent = showStats && (stats.max !== null || stats.avg !== null) && (
+		<Stack
+			justifyContent="center"
+			alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
+			width={110}
+			pr={statsPosition === "left" ? theme.spacing(8) : 0}
+			pl={statsPosition === "right" ? theme.spacing(8) : 0}
+		>
+			<Typography
+				variant="body2"
+				noWrap
 			>
-				<Typography
-					variant="body2"
-					noWrap
-				>
-					{t("common.charts.histogram.avg", { value: stats.avg })}
-				</Typography>
-				<Typography
-					variant="body2"
-					noWrap
-				>
-					{t("common.charts.histogram.max", { value: stats.max })}
-				</Typography>
-			</Stack>
-		);
+				{t("common.charts.histogram.avg", { value: stats.avg })}
+			</Typography>
+			<Typography
+				variant="body2"
+				noWrap
+			>
+				{t("common.charts.histogram.max", { value: stats.max })}
+			</Typography>
+		</Stack>
+	);
 
 	return (
 		<Stack

client/src/Components/design-elements/Icon.tsx

@@ -5,13 +5,15 @@ interface IconProps {
 	size?: number;
 	strokeWidth?: number;
 	stroke?: string;
+	color?: string;
 }
 
-const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5 }: IconProps) => {
+const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5, color }: IconProps) => {
 	return (
 		<Icon
 			size={size}
 			strokeWidth={strokeWidth}
+			color={color}
 		/>
 	);
 };

client/src/Components/design-elements/MonitorStatus.tsx

@@ -4,10 +4,10 @@ import Typography from "@mui/material/Typography";
 import { PulseDot, Dot, StrategyBadge } from "@/Components/design-elements";
 import { getStatusColor, formatUrl } from "@/Utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
-import prettyMilliseconds from "pretty-ms";
 import { typographyLevels } from "@/Utils/Theme/Palette";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { LAYOUT } from "@/Utils/Theme/constants";
+import { formatDuration } from "@/Utils/TimeUtils";
 export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
@@ -52,7 +52,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 					<>
 						<Dot />
 						<Typography>
-							Checking every {prettyMilliseconds(monitor?.interval, { verbose: true })}
+							Checking every {formatDuration(monitor?.interval, true)}
 						</Typography>
 					</>
 				)}

client/src/Components/inputs/AutoComplete.tsx

@@ -6,6 +6,7 @@ import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 import { FieldLabel } from "./FieldLabel";
 import { ChevronDown } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 type AutoCompleteInputProps = Omit<
 	AutocompleteProps<any, boolean, boolean, boolean>,
@@ -15,6 +16,9 @@ type AutoCompleteInputProps = Omit<
 	fieldLabel?: string;
 	required?: boolean;
 	renderOptionContent?: (option: any) => React.ReactNode;
+	placeholder?: string;
+	error?: boolean;
+	helperText?: string;
 };
 
 export const AutoCompleteInput = ({
@@ -22,15 +26,21 @@ export const AutoCompleteInput = ({
 	required,
 	renderInput,
 	renderOptionContent,
+	placeholder,
+	error,
+	helperText,
 	...props
 }: AutoCompleteInputProps) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	const multiple = props.multiple;
 	const { renderOption: customRenderOption, ...autocompleteProps } = props;
 	const defaultRenderInput = (params: any) => (
 		<TextField
 			{...params}
-			placeholder="Type to search"
+			placeholder={placeholder ?? t("common.form.autocomplete.placeholder")}
+			error={error}
+			helperText={helperText}
 		/>
 	);
 

client/src/Components/inputs/Radio.tsx

@@ -42,6 +42,9 @@ export const RadioWithDescription = ({
 				"& .MuiButtonBase-root": {
 					mr: theme.spacing(6),
 				},
+				"&:has(.Mui-focusVisible)": {
+					backgroundColor: theme.palette.action.hover,
+				},
 			}}
 		/>
 	);

client/src/Components/inputs/Select.tsx

@@ -11,10 +11,11 @@ interface SelectInputProps<T> extends Omit<SelectProps<T>, "label"> {
 	fieldLabel?: string;
 	required?: boolean;
 	placeholder?: string;
+	helperText?: string;
 }
 
 const SelectInputInner = <T,>(
-	{ fieldLabel, required, placeholder, ...props }: SelectInputProps<T>,
+	{ fieldLabel, required, placeholder, helperText, ...props }: SelectInputProps<T>,
 	ref: React.ForwardedRef<HTMLDivElement>
 ) => {
 	const theme = useTheme();
@@ -27,7 +28,7 @@ const SelectInputInner = <T,>(
 			: selected === undefined || selected === null || selected === "";
 
 		if (isEmpty && placeholder) {
-			return <Typography sx={{ color: emptyPlaceholderColor }}>{placeholder}</Typography>;
+			return <Typography color={emptyPlaceholderColor}>{placeholder}</Typography>;
 		}
 
 		if (isMultiple) {
@@ -92,11 +93,21 @@ const SelectInputInner = <T,>(
 		/>
 	);
 
-	if (fieldLabel) {
+	const helper = helperText ? (
+		<Typography
+			variant="caption"
+			color={props.error ? theme.palette.error.main : theme.palette.text.secondary}
+		>
+			{helperText}
+		</Typography>
+	) : null;
+
+	if (fieldLabel || helper) {
 		return (
 			<Stack spacing={theme.spacing(2)}>
-				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
+				{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
 				{select}
+				{helper}
 			</Stack>
 		);
 	}

client/src/Components/inputs/TimePicker.tsx

@@ -3,6 +3,7 @@ import type { MobileTimePickerProps } from "@mui/x-date-pickers/MobileTimePicker
 import type { Dayjs } from "dayjs";
 import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
 import { FieldLabel } from "./FieldLabel";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers";
@@ -10,11 +11,15 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
 interface TimePickerComponentProps extends Omit<MobileTimePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
 	required?: boolean;
+	error?: boolean;
+	helperText?: string;
 }
 
 export const TimePickerComponent = ({
 	fieldLabel,
 	required,
+	error,
+	helperText,
 	...props
 }: TimePickerComponentProps) => {
 	const theme = useTheme();
@@ -33,12 +38,12 @@ export const TimePickerComponent = ({
 								px: theme.spacing(5),
 							},
 							"& fieldset": {
-								borderColor: theme.palette.divider,
+								borderColor: error ? theme.palette.error.main : theme.palette.divider,
 								borderRadius: theme.shape.borderRadius,
 							},
 							"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
 								{
-									borderColor: theme.palette.divider,
+									borderColor: error ? theme.palette.error.main : theme.palette.divider,
 								},
 						},
 					},
@@ -48,14 +53,18 @@ export const TimePickerComponent = ({
 		</LocalizationProvider>
 	);
 
-	if (fieldLabel) {
-		return (
-			<Stack spacing={theme.spacing(2)}>
-				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
-				{picker}
-			</Stack>
-		);
-	}
-
-	return picker;
+	return (
+		<Stack spacing={theme.spacing(2)}>
+			{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
+			{picker}
+			{helperText && (
+				<Typography
+					variant="caption"
+					color={error ? "error" : "text.secondary"}
+				>
+					{helperText}
+				</Typography>
+			)}
+		</Stack>
+	);
 };

client/src/Components/inputs/forms/FormAutoCompleteField.tsx

@@ -0,0 +1,52 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import { Autocomplete } from "@/Components/inputs";
+
+export interface AutocompleteOption {
+	id: string;
+	name: string;
+}
+
+interface FormAutocompleteProps<T extends FieldValues, O extends AutocompleteOption> {
+	name: FieldPath<T>;
+	options: O[];
+	fieldLabel?: string;
+	placeholder?: string;
+}
+
+export const FormAutocompleteField = <
+	T extends FieldValues,
+	O extends AutocompleteOption,
+>({
+	name,
+	options,
+	fieldLabel,
+	placeholder,
+}: FormAutocompleteProps<T, O>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<Autocomplete
+					options={options}
+					getOptionLabel={(option) => option.name}
+					isOptionEqualToValue={(option, value) => option.id === value.id}
+					value={options.find((o) => o.id === field.value) ?? null}
+					onChange={(_: unknown, newValue: O | null) => {
+						field.onChange(newValue?.id ?? "");
+					}}
+					fieldLabel={fieldLabel}
+					placeholder={placeholder}
+					error={!!fieldState.error}
+					helperText={fieldState.error?.message ?? ""}
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormCheckboxField.tsx

@@ -0,0 +1,38 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import { Checkbox } from "@/Components/inputs";
+
+interface FormCheckboxFieldProps<T extends FieldValues> {
+	name: FieldPath<T>;
+	label: string;
+}
+
+export const FormCheckboxField = <T extends FieldValues>({
+	name,
+	label,
+}: FormCheckboxFieldProps<T>) => {
+	const { control } = useFormContext<T>();
+
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field }) => (
+				<FormControlLabel
+					control={
+						<Checkbox
+							checked={field.value ?? false}
+							onChange={(e) => field.onChange(e.target.checked)}
+						/>
+					}
+					label={label}
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormColorField.tsx

@@ -0,0 +1,35 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import { ColorInput } from "@/Components/inputs";
+
+interface FormColorFieldProps<T extends FieldValues> {
+	name: FieldPath<T>;
+	fieldLabel?: string;
+}
+
+export const FormColorField = <T extends FieldValues>({
+	name,
+	fieldLabel,
+}: FormColorFieldProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<ColorInput
+					format="hex"
+					value={field.value}
+					onChange={field.onChange}
+					fieldLabel={fieldLabel}
+					error={!!fieldState.error}
+					helperText={fieldState.error?.message ?? ""}
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormDateTimePickerField.tsx

@@ -0,0 +1,81 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import dayjs, { type Dayjs } from "dayjs";
+import { DatePicker, TimePicker } from "@/Components/inputs";
+
+export interface FormPickerFieldProps<T extends FieldValues> {
+	name: FieldPath<T>;
+	fieldLabel?: string;
+	format?: string;
+	onValueChange?: (value: string) => void; // e.g. () => trigger("startDate")
+}
+
+interface DayjsPickerProps {
+	fieldLabel?: string;
+	value: Dayjs | null;
+	onChange: (value: Dayjs | null) => void;
+	error?: boolean;
+	helperText?: string;
+}
+
+interface FormDayjsPickerFieldProps<
+	T extends FieldValues,
+> extends FormPickerFieldProps<T> {
+	picker: React.ComponentType<DayjsPickerProps>;
+	format: string;
+}
+
+const FormDayjsPickerField = <T extends FieldValues>({
+	name,
+	fieldLabel,
+	format,
+	onValueChange,
+	picker: Picker,
+}: FormDayjsPickerFieldProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<Picker
+					fieldLabel={fieldLabel}
+					value={field.value ? dayjs(field.value, format) : null}
+					onChange={(value) => {
+						const next = value ? value.format(format) : "";
+						field.onChange(next);
+						onValueChange?.(next);
+					}}
+					error={!!fieldState.error}
+					helperText={fieldState.error?.message}
+				/>
+			)}
+		/>
+	);
+};
+
+export const FormDatePickerField = <T extends FieldValues>({
+	format = "YYYY-MM-DD",
+	...rest
+}: FormPickerFieldProps<T>) => (
+	<FormDayjsPickerField
+		{...rest}
+		format={format}
+		picker={DatePicker}
+	/>
+);
+
+export const FormTimePickerField = <T extends FieldValues>({
+	format = "HH:mm",
+	...rest
+}: FormPickerFieldProps<T>) => (
+	<FormDayjsPickerField
+		{...rest}
+		format={format}
+		picker={TimePicker}
+	/>
+);

client/src/Components/inputs/forms/FormMultiSelectField.tsx

@@ -0,0 +1,187 @@
+import { useMemo } from "react";
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import { useTheme } from "@mui/material/styles";
+import { Trash2, GripVertical } from "lucide-react";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import type { DropResult } from "@hello-pangea/dnd";
+import { useTranslation } from "react-i18next";
+import { Autocomplete } from "@/Components/inputs";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
+
+export interface MultiSelectOption {
+	id: string | number;
+	name: string;
+}
+
+interface FormMultiSelectFieldProps<T extends FieldValues, O extends MultiSelectOption> {
+	name: FieldPath<T>;
+	options: O[];
+	fieldLabel?: string;
+	placeholder?: string;
+	description?: string;
+	renderRow?: (option: O) => React.ReactNode;
+	renderOptionContent?: (option: O) => React.ReactNode;
+	sortable?: boolean;
+}
+
+export const FormMultiSelectField = <T extends FieldValues, O extends MultiSelectOption>({
+	name,
+	options,
+	fieldLabel,
+	placeholder,
+	description,
+	renderRow,
+	renderOptionContent,
+	sortable = false,
+}: FormMultiSelectFieldProps<T, O>) => {
+	const { control } = useFormContext<T>();
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const optionsById = useMemo(
+		() => new Map<O["id"], O>(options.map((o) => [o.id, o])),
+		[options]
+	);
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => {
+				const selectedIds: O["id"][] = field.value ?? [];
+				const selected = selectedIds
+					.map((id) => optionsById.get(id))
+					.filter((o): o is O => o !== undefined);
+
+				const handleDragEnd = (result: DropResult) => {
+					if (!result.destination) return;
+					const reordered = selected.map((o) => o.id);
+					const [moved] = reordered.splice(result.source.index, 1);
+					reordered.splice(result.destination.index, 0, moved);
+					const unresolved = selectedIds.filter((id) => !optionsById.has(id));
+					field.onChange([...reordered, ...unresolved]);
+				};
+
+				const rowContent = (option: O) =>
+					renderRow ? (
+						renderRow(option)
+					) : (
+						<Typography flexGrow={1}>{option.name}</Typography>
+					);
+
+				const removeButton = (option: O) => (
+					<IconButton
+						size="small"
+						onClick={() => {
+							field.onChange(selectedIds.filter((id) => id !== option.id));
+						}}
+						aria-label={t("common.buttons.removeItem", { item: option.name })}
+					>
+						<Trash2 size={16} />
+					</IconButton>
+				);
+
+				return (
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
+						<Autocomplete
+							multiple
+							autoHighlight
+							options={options}
+							value={selected}
+							getOptionLabel={(option) => option.name}
+							isOptionEqualToValue={(option, value) => option.id === value.id}
+							onChange={(_: unknown, newValue: O[]) => {
+								// The Autocomplete only sees resolved options, so ids missing
+								// from options must be re-appended or they'd be silently
+								// dropped (e.g. a role excluded from the selectable list).
+								const unresolved = selectedIds.filter((id) => !optionsById.has(id));
+								field.onChange([...newValue.map((o) => o.id), ...unresolved]);
+							}}
+							fieldLabel={fieldLabel}
+							placeholder={selected.length > 0 ? "" : placeholder}
+							renderOptionContent={renderOptionContent}
+							error={!!fieldState.error}
+							helperText={fieldState.error?.message ?? ""}
+						/>
+						{description && (
+							<Typography
+								component="span"
+								color={theme.palette.text.secondary}
+								sx={{ opacity: 0.8 }}
+							>
+								{description}
+							</Typography>
+						)}
+						{sortable
+							? selected.length > 0 && (
+									<DragDropContext onDragEnd={handleDragEnd}>
+										<Droppable droppableId={`${name}-list`}>
+											{(provided) => (
+												<Stack
+													{...provided.droppableProps}
+													ref={provided.innerRef}
+												>
+													{selected.map((option, index) => (
+														<Draggable
+															key={option.id}
+															draggableId={String(option.id)}
+															index={index}
+														>
+															{(provided) => (
+																<Stack
+																	ref={provided.innerRef}
+																	{...provided.draggableProps}
+																	{...provided.dragHandleProps}
+																	direction="row"
+																	alignItems="center"
+																	spacing={theme.spacing(LAYOUT.XS)}
+																	padding={theme.spacing(LAYOUT.XS)}
+																	marginTop={theme.spacing(SPACING.LG)}
+																	borderRadius={1}
+																	border={`1px solid ${theme.palette.divider}`}
+																	sx={{
+																		cursor: "grab",
+																		"&:active": { cursor: "grabbing" },
+																	}}
+																>
+																	<GripVertical size={20} />
+																	{rowContent(option)}
+																	{removeButton(option)}
+																</Stack>
+															)}
+														</Draggable>
+													))}
+													{provided.placeholder}
+												</Stack>
+											)}
+										</Droppable>
+									</DragDropContext>
+								)
+							: selected.map((option) => (
+									<Stack
+										key={option.id}
+										direction="row"
+										alignItems="center"
+										spacing={theme.spacing(LAYOUT.XS)}
+										padding={theme.spacing(LAYOUT.XS)}
+										marginTop={theme.spacing(SPACING.LG)}
+										borderRadius={1}
+										border={`1px solid ${theme.palette.divider}`}
+										width="100%"
+									>
+										{rowContent(option)}
+										{removeButton(option)}
+									</Stack>
+								))}
+					</Stack>
+				);
+			}}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormNumberField.tsx

@@ -0,0 +1,46 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import { TextField } from "@/Components/inputs";
+
+interface FormNumberFieldProps<T extends FieldValues> extends Omit<
+	React.ComponentProps<typeof TextField>,
+	"name" | "error" | "helperText" | "type"
+> {
+	name: FieldPath<T>;
+	emptyValue?: number; // what an empty input writes to the form; 0 keeps today's sentinel
+}
+
+export const FormNumberField = <T extends FieldValues>({
+	name,
+	emptyValue = 0,
+	...rest
+}: FormNumberFieldProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<TextField
+					{...field}
+					type="number"
+					value={
+						field.value === undefined || field.value === emptyValue ? "" : field.value
+					}
+					onChange={(e) => {
+						const val = e.target.value;
+						field.onChange(val === "" ? emptyValue : Number(val));
+					}}
+					error={!!fieldState.error}
+					helperText={fieldState.error?.message ?? ""}
+					fullWidth
+					{...rest}
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormRadioGroupField.tsx

@@ -0,0 +1,54 @@
+import { RadioGroup, useTheme } from "@mui/material";
+import FormControl from "@mui/material/FormControl";
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { RadioWithDescription } from "@/Components/inputs/Radio";
+import { FieldLabel } from "@/Components/inputs/FieldLabel";
+export interface FormRadioOption {
+	value: string;
+	label: string;
+	description: string;
+}
+
+interface FormRadioGroupProps<T extends FieldValues> {
+	name: FieldPath<T>;
+	options: FormRadioOption[];
+	fieldLabel?: string;
+}
+export const FormRadioGroup = <T extends FieldValues>({
+	name,
+	options,
+	fieldLabel,
+}: FormRadioGroupProps<T>) => {
+	const { control } = useFormContext<T>();
+	const theme = useTheme();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<FormControl error={!!fieldState.error}>
+					{fieldLabel && <FieldLabel>{fieldLabel}</FieldLabel>}
+					<RadioGroup
+						{...field}
+						sx={{ gap: theme.spacing(LAYOUT.MD) }}
+					>
+						{options.map((option) => (
+							<RadioWithDescription
+								key={option.value}
+								value={option.value}
+								label={option.label}
+								description={option.description}
+							/>
+						))}
+					</RadioGroup>
+				</FormControl>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormSelectField.tsx

@@ -0,0 +1,61 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldValues,
+	type FieldPath,
+} from "react-hook-form";
+import MenuItem from "@mui/material/MenuItem";
+import { Select } from "@/Components/inputs";
+
+export interface FormSelectOption {
+	value: string | number;
+	label: string;
+}
+
+interface FormSelectProps<T extends FieldValues> extends Omit<
+	React.ComponentProps<typeof Select>,
+	"name" | "error" | "value" | "onChange"
+> {
+	name: FieldPath<T>;
+	options: FormSelectOption[];
+	fallbackValue?: string | number; // display value while the field is undefined
+	onValueChange?: (value: string | number) => void; // side effects, see Notes
+}
+
+export const FormSelectField = <T extends FieldValues>({
+	name,
+	options,
+	fallbackValue,
+	onValueChange,
+	...rest
+}: FormSelectProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<Select
+					{...field}
+					value={field.value ?? fallbackValue ?? ""}
+					onChange={(e) => {
+						field.onChange(e.target.value);
+						onValueChange?.(e.target.value as string | number);
+					}}
+					error={!!fieldState.error}
+					{...rest}
+					helperText={fieldState.error?.message ?? rest.helperText}
+				>
+					{options.map((option) => (
+						<MenuItem
+							key={option.value}
+							value={option.value}
+						>
+							{option.label}
+						</MenuItem>
+					))}
+				</Select>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormSliderField.tsx

@@ -0,0 +1,34 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import { SliderWithLabel } from "@/Components/inputs";
+
+interface FormSliderProps<T extends FieldValues> extends Omit<
+	React.ComponentProps<typeof SliderWithLabel>,
+	"name" | "value" | "onChange"
+> {
+	name: FieldPath<T>;
+}
+
+export const FormSliderField = <T extends FieldValues>({
+	name,
+	...rest
+}: FormSliderProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field }) => (
+				<SliderWithLabel
+					{...field}
+					sliderMaxWidth={{ xs: "100%", md: "50%" }}
+					{...rest}
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormSwitchField.tsx

@@ -0,0 +1,59 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { SwitchComponent } from "@/Components/inputs";
+import { SPACING } from "@/Utils/Theme/constants";
+
+interface FormSwitchProps<T extends FieldValues> {
+	name: FieldPath<T>;
+	label: string;
+	labelPlacement?: "start" | "end"; // left | right
+}
+
+export const FormSwitchField = <T extends FieldValues>({
+	name,
+	label,
+	labelPlacement = "end",
+}: FormSwitchProps<T>) => {
+	const { control } = useFormContext<T>();
+	const theme = useTheme();
+
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field }) => (
+				<Stack
+					direction="row"
+					alignItems="center"
+					spacing={labelPlacement === "start" ? undefined : theme.spacing(SPACING.LG)}
+					justifyContent={labelPlacement === "start" ? "space-between" : undefined}
+				>
+					{labelPlacement === "start" ? (
+						<>
+							<Typography>{label}</Typography>
+							<SwitchComponent
+								checked={field.value ?? false}
+								onChange={(e) => field.onChange(e.target.checked)}
+							/>
+						</>
+					) : (
+						<>
+							<SwitchComponent
+								checked={field.value ?? false}
+								onChange={(e) => field.onChange(e.target.checked)}
+							/>
+							<Typography>{label}</Typography>
+						</>
+					)}
+				</Stack>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormTextField.tsx

@@ -0,0 +1,40 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+
+import { TextField } from "@/Components/inputs";
+
+interface FormTextFieldProps<T extends FieldValues> extends Omit<
+	React.ComponentProps<typeof TextField>,
+	"name" | "error" | "helperText"
+> {
+	name: FieldPath<T>;
+	helperText?: string;
+}
+
+export const FormTextField = <T extends FieldValues>({
+	name,
+	...rest
+}: FormTextFieldProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<TextField
+					{...field}
+					type="text"
+					{...rest}
+					value={field.value ?? ""}
+					error={!!fieldState.error}
+					helperText={fieldState.error?.message ?? rest.helperText ?? ""}
+					fullWidth
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/layout/RootLayout.tsx

@@ -18,15 +18,13 @@ const RootLayout = () => {
 				flex={1}
 				padding={6}
 				overflow={"hidden"}
-				sx={{
-					backgroundColor:
-						theme.palette.mode === "dark"
-							? "rgba(255, 255, 255, 0.01)"
-							: "rgba(0, 0, 0, 0.01)",
-					display: "flex",
-					alignItems: "center",
-					paddingLeft: isSmall ? `${collapsedWidth + 12}px` : 12,
-				}}
+				bgcolor={
+					theme.palette.mode === "dark"
+						? "rgba(255, 255, 255, 0.01)"
+						: "rgba(124, 116, 116, 0.01)"
+				}
+				alignItems="center"
+				paddingLeft={isSmall ? `${collapsedWidth + 12}px` : 12}
 			>
 				<Stack
 					maxWidth={1280}

client/src/Components/monitors/GeoChecksMap.tsx

@@ -6,6 +6,7 @@ import type { FlatGeoCheck } from "@/Types/GeoCheck";
 import { useTranslation } from "react-i18next";
 import { formatStatusCode } from "@/Utils/statusCode";
 import "maplibre-gl/dist/maplibre-gl.css";
+import { formatMs } from "@/Utils/TimeUtils";
 
 interface GeoChecksMapProps {
 	geoChecks: FlatGeoCheck[];
@@ -83,10 +84,6 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
 		return status ? theme.palette.success.main : theme.palette.error.main;
 	};
 
-	const formatResponseTime = (timing: number): string => {
-		return `${timing.toFixed(0)}ms`;
-	};
-
 	return (
 		<>
 			{mapPopupStyles}
@@ -186,7 +183,7 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
 										>
 											Response Time:
 										</Typography>{" "}
-										{formatResponseTime(selectedCheck.timings.total)}
+										{formatMs(selectedCheck.timings.total)}
 									</Typography>
 									<Typography
 										variant="caption"

client/src/Components/monitors/MonitorListPage.tsx

@@ -0,0 +1,156 @@
+import { HeaderCreate } from "@/Components/common";
+import { ColoredLabel, MonitorBasePageWithStates } from "@/Components/design-elements";
+import { BulkActionsBar } from "@/Components/monitors/BulkActionsBar";
+import { ControlsFilter } from "@/Components/monitors/ControlsFilter";
+import { HeaderMonitorsSummary } from "@/Components/monitors/HeaderMonitorsSummary";
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
+import type { MonitorListController } from "@/Hooks/useMonitorListController";
+import { useMediaQuery, useTheme } from "@mui/material";
+import { SPACING } from "@/Utils/Theme/constants";
+
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { TextField, Button, Dialog } from "@/Components/inputs";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Pause, Play } from "lucide-react";
+
+interface MonitorListPageProps {
+	headerKey: string;
+	page: string;
+	actionLink: string;
+	controller: MonitorListController;
+	bulkActions?: boolean;
+	showTypeFilter?: boolean;
+	summaryProps?: { showBreached?: boolean };
+	priorityFallback?: ReactNode;
+	extraLoading?: boolean;
+	extraError?: unknown;
+	children: ReactNode;
+}
+
+// Base monitor list page, all monitors pages are nearly identical, but with different tables.
+
+export const MonitorListPage = ({
+	headerKey,
+	page,
+	actionLink,
+	controller: c,
+	bulkActions,
+	showTypeFilter,
+	summaryProps,
+	priorityFallback,
+	extraLoading,
+	extraError,
+	children,
+}: MonitorListPageProps) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const isAdmin = useIsAdmin();
+	const isLoading = c.isLoading || Boolean(extraLoading);
+
+	return (
+		<MonitorBasePageWithStates
+			headerKey={headerKey}
+			loading={isLoading}
+			error={c.error || extraError}
+			totalCount={c.effectiveTotalCount}
+			page={page}
+			actionLink={actionLink}
+			priorityFallback={priorityFallback}
+		>
+			<HeaderCreate
+				path={actionLink}
+				isLoading={isLoading}
+				isAdmin={isAdmin}
+			/>
+			<HeaderMonitorsSummary
+				summary={c.summary}
+				{...summaryProps}
+			/>
+			<Stack
+				direction={isSmall ? "column" : "row"}
+				justifyContent={isSmall ? "flex-start" : "space-between"}
+				gap={theme.spacing(4)}
+			>
+				<ControlsFilter
+					{...(showTypeFilter === false
+						? { showTypes: false }
+						: {
+								selectedTypes: c.selectedTypes,
+								setSelectedTypes: c.setSelectedTypes,
+							})}
+					selectedStatus={c.selectedStatus}
+					setSelectedStatus={c.setSelectedStatus}
+					selectedState={c.selectedState}
+					setSelectedState={c.setSelectedState}
+					tagOptions={c.tags ?? []}
+					selectedTags={c.selectedTags}
+					setSelectedTags={c.setSelectedTags}
+					onClearFilters={c.handleClearFilters}
+				/>
+				<TextField
+					placeholder={t("pages.uptime.filters.search.placeholder")}
+					value={c.search}
+					onChange={(event) => {
+						c.setSearch(event.target.value);
+					}}
+				/>
+			</Stack>
+			{c.selectedTags.length > 0 && (
+				<Stack
+					direction={isSmall ? "column" : "row"}
+					alignItems={isSmall ? "flex-start" : "center"}
+					flexWrap="wrap"
+					gap={theme.spacing(SPACING.XL)}
+				>
+					<Typography color={theme.palette.text.secondary}>
+						{t("pages.uptime.filters.activeTags")}
+					</Typography>
+					{c.selectedTags.map((tagId) => {
+						const tag = c.tags?.find((t) => t.id === tagId);
+						if (!tag) return null;
+						return (
+							<ColoredLabel
+								key={tag.id}
+								text={tag.name}
+								color={tag.color}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+			{bulkActions && !isLoading && (
+				<BulkActionsBar
+					selectedCount={c.selectedRows.length}
+					onCancel={c.handleCancelSelection}
+				>
+					<Button
+						size="small"
+						startIcon={<Play size={16} />}
+						onClick={c.handleBulkResume}
+					>
+						{t("common.buttons.resume")}
+					</Button>
+					<Button
+						size="small"
+						startIcon={<Pause size={16} />}
+						onClick={c.handleBulkPause}
+					>
+						{t("common.buttons.pause")}
+					</Button>
+				</BulkActionsBar>
+			)}
+			{children}
+			<Dialog
+				open={c.isDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={c.handleConfirmDelete}
+				onCancel={c.handleCancelDelete}
+				loading={c.isDeleting}
+			/>
+		</MonitorBasePageWithStates>
+	);
+};

client/src/Components/monitors/MonitorStatBoxes.tsx

@@ -1,22 +1,24 @@
 import Stack from "@mui/material/Stack";
 import { StatBox } from "@/Components/design-elements";
 
-import prettyMilliseconds from "pretty-ms";
 import { useTheme } from "@mui/material/styles";
 import type { MonitorStats, Monitor } from "@/Types/Monitor";
 import { getStatusPalette } from "@/Utils/MonitorUtils";
 import { useTranslation } from "react-i18next";
+import { formatMs, formatDuration } from "@/Utils/TimeUtils";
 
 interface MonitorStatBoxesProps {
 	monitor?: Monitor;
 	monitorStats: MonitorStats | null;
 	certificateExpiry?: string;
+	domainExpiry?: string;
 }
 
 export const MonitorStatBoxes = ({
 	monitor,
 	monitorStats,
 	certificateExpiry,
+	domainExpiry,
 }: MonitorStatBoxesProps) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
@@ -31,14 +33,9 @@ export const MonitorStatBoxes = ({
 	const timeOfLastCheck = monitorStats?.lastCheckTimestamp || 0;
 	const timeSinceLastCheck = Date.now() - timeOfLastCheck || 0;
 
-	const options = {
-		secondsDecimalDigits: 0,
-		millisecondsDecimalDigits: 0,
-	};
+	const streakTime = formatDuration(timeSinceLastFailure);
 
-	const streakTime = prettyMilliseconds(timeSinceLastFailure, options);
-
-	const lastCheckTime = prettyMilliseconds(timeSinceLastCheck, options);
+	const lastCheckTime = formatDuration(timeSinceLastCheck);
 	const isActive =
 		monitor?.status === "up" ||
 		monitor?.status === "paused" ||
@@ -67,14 +64,20 @@ export const MonitorStatBoxes = ({
 			/>
 			<StatBox
 				title={t("pages.common.monitors.statBoxes.lastResponseTime")}
-				subtitle={prettyMilliseconds(monitorStats?.lastResponseTime ?? 0)}
+				subtitle={formatMs(monitorStats?.lastResponseTime ?? 0)}
 			/>
 
 			{monitor?.type === "http" && (
-				<StatBox
-					title={t("pages.common.monitors.statBoxes.certificateExpiry")}
-					subtitle={certificateExpiry || "N/A"}
-				/>
+				<>
+					<StatBox
+						title={t("pages.common.monitors.statBoxes.certificateExpiry")}
+						subtitle={certificateExpiry || "N/A"}
+					/>
+					<StatBox
+						title={t("pages.common.monitors.statBoxes.domainExpiry")}
+						subtitle={domainExpiry || "N/A"}
+					/>
+				</>
 			)}
 		</Stack>
 	);

client/src/Components/monitors/charts/HistogramDetails.tsx

@@ -14,11 +14,10 @@ import {
 import type { TooltipProps } from "recharts";
 import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
 import Typography from "@mui/material/Typography";
-import prettyMilliseconds from "pretty-ms";
 import { XTick } from "@/Components/monitors/charts/XTick";
 import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
-import { formatDateWithTz, tooltipDateFormatLookup } from "@/Utils/TimeUtils";
+import { formatDateWithTz, formatMs, tooltipDateFormatLookup } from "@/Utils/TimeUtils";
 import { useTheme } from "@mui/material/styles";
 import type { Theme } from "@mui/material/styles";
 import type { GroupedCheck, GroupedUptimeCheck } from "@/Types/Check";
@@ -56,16 +55,13 @@ const ResponseTimeToolTip = ({
 	if (!active) return null;
 
 	const format = tooltipDateFormatLookup(range);
-	const responseTime = Math.floor(payload[0]?.payload?.avgResponseTime || 0);
+	const responseTime = payload[0]?.payload?.avgResponseTime ?? 0;
 	return (
 		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
 			<Typography>{formatDateWithTz(String(label), format, uiTimezone)}</Typography>
 			<Typography>
 				{t("common.charts.histogram.responseTime", {
-					value: prettyMilliseconds(responseTime, {
-						formatSubMilliseconds: true,
-						compact: true,
-					}),
+					value: formatMs(responseTime),
 				})}
 			</Typography>
 		</BaseBox>
@@ -94,7 +90,7 @@ const TimingPhasesToolTip = ({
 		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
 			<Typography>{formatDateWithTz(bucket.bucketDate, format, uiTimezone)}</Typography>
 			<Typography>
-				{t("common.charts.histogram.total", { value: prettyMilliseconds(total) })}
+				{t("common.charts.histogram.total", { value: formatMs(total) })}
 			</Typography>
 			{PHASE_KEYS.map((key) => (
 				<Stack
@@ -108,11 +104,7 @@ const TimingPhasesToolTip = ({
 						color={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
 					/>
 					<Typography>
-						{t(PHASE_LABEL_KEYS[key])}:{" "}
-						{prettyMilliseconds(bucket[key], {
-							formatSubMilliseconds: true,
-							compact: true,
-						})}
+						{t(PHASE_LABEL_KEYS[key])}: {formatMs(bucket[key])}
 					</Typography>
 				</Stack>
 			))}

client/src/Components/monitors/charts/HistogramStatus.tsx

@@ -3,7 +3,7 @@ import Typography from "@mui/material/Typography";
 import { BaseChart } from "@/Components/design-elements";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
 import { useTranslation } from "react-i18next";
 import { ResponsiveContainer, BarChart, XAxis, Bar, Cell, Tooltip } from "recharts";
 import { getResponseTimeColor } from "@/Utils/MonitorUtils";
@@ -100,7 +100,7 @@ export const HistogramStatus = ({
 					</Typography>
 				) : null}
 				<Typography variant="caption">{titleText}</Typography>
-				<Typography variant="body2">{Math.floor(avg)} ms</Typography>
+				<Typography variant="body2">{formatMs(avg)}</Typography>
 			</Stack>
 		);
 	};

client/src/Components/monitors/charts/RadialAvgResponse.tsx

@@ -7,6 +7,7 @@ import { Cell, RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
 import { useTranslation } from "react-i18next";
 import { getResponseTimeColor } from "@/Utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
+import { formatMs } from "@/Utils/TimeUtils";
 
 export const RadialAvgResponse = ({ avg, max }: { avg: number; max: number }) => {
 	const { t } = useTranslation();
@@ -84,7 +85,9 @@ export const RadialAvgResponse = ({ avg, max }: { avg: number; max: number }) =>
 					<Typography
 						variant="h1"
 						textAlign={"center"}
-					>{`${avg?.toFixed()}ms`}</Typography>
+					>
+						{formatMs(avg)}
+					</Typography>
 				</Stack>
 			</Stack>
 		</BaseChart>

client/src/Components/monitors/index.tsx

@@ -15,3 +15,4 @@ export * from "./charts/HistogramPageSpeedDetailsTooltip";
 export * from "./charts/HistogramInfrastructure";
 export * from "./HeaderMonitorsSummary";
 export * from "./BulkActionsBar";
+export * from "./MonitorListPage";

client/src/Components/sidebar/Authfooter.tsx

@@ -10,10 +10,11 @@ import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import { MoreVertical, LogOut } from "lucide-react";
+import { MoreVertical, LogOut, Moon, Sun } from "lucide-react";
 import { Avatar, Icon } from "@/Components/design-elements";
 import { clearAuthState } from "@/Features/Auth/authSlice.js";
 import type { RootState } from "@/Types/state.js";
+import { setMode } from "@/Features/UI/uiSlice.js";
 
 interface AuthFooterProps {
 	collapsed: boolean;
@@ -27,6 +28,7 @@ interface AuthFooterProps {
 export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
+	const mode = useSelector((state: RootState) => state.ui.mode);
 	const user = useSelector((state: RootState) => state.auth.user);
 	const navigate = useNavigate();
 	const dispatch = useDispatch();
@@ -105,13 +107,14 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 						<Typography
 							fontWeight={500}
 							noWrap
-							sx={{ color: theme.palette.text.primary }}
+							color={theme.palette.text.primary}
 						>
 							{user?.firstName} {user?.lastName}
 						</Typography>
 						<Typography
 							noWrap
-							sx={{ textTransform: "capitalize", color: theme.palette.text.secondary }}
+							textTransform={"capitalize"}
+							color={theme.palette.text.secondary}
 						>
 							{getRoleText()}
 						</Typography>
@@ -154,15 +157,12 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 						pb={2}
 						sx={{ pointerEvents: "none" }}
 					>
-						<Typography
-							fontWeight={500}
-							fontSize={13}
-						>
+						<Typography fontWeight={500}>
 							{user?.firstName} {user?.lastName}
 						</Typography>
 						<Typography
-							fontSize={12}
-							sx={{ textTransform: "capitalize" }}
+							variant="body2"
+							textTransform={"capitalize"}
 						>
 							{getRoleText()}
 						</Typography>
@@ -178,6 +178,18 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 						{item.name}
 					</MenuItem>
 				))}
+				<MenuItem
+					onClick={() => {
+						dispatch(setMode(mode === "light" ? "dark" : "light"));
+						handleMenuClose();
+					}}
+					sx={menuItemSx}
+				>
+					<Icon icon={mode === "light" ? Moon : Sun} />
+					{mode === "light"
+						? t("pages.settings.form.ui.option.theme.dark")
+						: t("pages.settings.form.ui.option.theme.light")}
+				</MenuItem>
 				<MenuItem
 					onClick={handleLogout}
 					sx={menuItemSx}

client/src/Components/sidebar/Menu.tsx

@@ -18,8 +18,8 @@ import {
 	Lock,
 	Users,
 	Tag,
+	Waypoints,
 } from "lucide-react";
-
 export const getMenu = (t: Function) => {
 	return [
 		{
@@ -47,6 +47,11 @@ export const getMenu = (t: Function) => {
 			path: "tags",
 			icon: <Icon icon={Tag} />,
 		},
+		{
+			name: t("components.sidebar.menu.proxies"),
+			path: "proxies",
+			icon: <Icon icon={Waypoints} />,
+		},
 		{
 			name: t("components.sidebar.menu.checks"),
 			path: "checks",

client/src/Components/sidebar/index.tsx

@@ -102,6 +102,7 @@ export const Sidebar = () => {
 					})}
 				</List>
 				<StarPrompt />
+
 				<Divider sx={{ borderColor: theme.palette.divider }} />
 
 				<AuthFooter

client/src/Features/UI/uiSlice.ts

@@ -2,7 +2,13 @@ import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 
 type ThemeMode = "light" | "dark";
 type ChartType = "histogram" | "line";
-type TableName = "monitors" | "team" | "maintenance" | "infrastructure" | "logs";
+type TableName =
+	| "monitors"
+	| "team"
+	| "maintenance"
+	| "infrastructure"
+	| "logs"
+	| "pagespeed";
 
 interface TableState {
 	rowsPerPage: number;
@@ -14,6 +20,7 @@ interface SidebarState {
 
 interface UIState {
 	monitors: TableState;
+	pagespeed: TableState;
 	team: TableState;
 	maintenance: TableState;
 	infrastructure: TableState;
@@ -37,6 +44,9 @@ const initialState: UIState = {
 	monitors: {
 		rowsPerPage: 10,
 	},
+	pagespeed: {
+		rowsPerPage: 10,
+	},
 	team: {
 		rowsPerPage: 5,
 	},

client/src/Hooks/useMonitorForm.ts

@@ -1,6 +1,11 @@
 import { useMemo } from "react";
 import { monitorSchema, type MonitorFormData } from "@/Validation/monitor";
-import { DefaultHttpMethod, DefaultPageSpeedStrategy } from "@/Types/Monitor";
+import {
+	DefaultHttpMethod,
+	DefaultMonitorMatchMethod,
+	DefaultPageSpeedStrategy,
+	DefaultProxyMode,
+} from "@/Types/Monitor";
 import type { Monitor, MonitorType } from "@/Types/Monitor";
 
 interface UseMonitorFormOptions {
@@ -42,8 +47,10 @@ export const getMonitorDefaults = (
 				url: data?.url || "",
 				method: data?.method ?? DefaultHttpMethod,
 				ignoreTlsErrors: data?.ignoreTlsErrors || false,
+				proxyMode: data?.proxyMode ?? DefaultProxyMode,
+				proxyId: data?.proxyId || "",
 				useAdvancedMatching: data?.useAdvancedMatching || false,
-				matchMethod: data?.matchMethod || "",
+				matchMethod: data?.matchMethod || DefaultMonitorMatchMethod,
 				expectedValue: data?.expectedValue || "",
 				jsonPath: data?.jsonPath || "",
 				customUpCodes: data?.customUpCodes || [],
@@ -137,8 +144,10 @@ export const getMonitorDefaults = (
 				url: "",
 				method: DefaultHttpMethod,
 				ignoreTlsErrors: false,
+				proxyMode: DefaultProxyMode,
+				proxyId: "",
 				useAdvancedMatching: false,
-				matchMethod: "",
+				matchMethod: DefaultMonitorMatchMethod,
 				expectedValue: "",
 				jsonPath: "",
 				customUpCodes: [],

client/src/Hooks/useMonitorListController.ts

@@ -0,0 +1,209 @@
+import { setRowsPerPage, type TableName } from "@/Features/UI/uiSlice";
+import { useDelete, useGet } from "@/Hooks/UseApi";
+import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
+import useDebounce from "@/Hooks/useDebounce";
+import type { RootState } from "@/store";
+import {
+	type MonitorsWithChecksResponse,
+	SelectableMonitorTypes,
+	type Monitor,
+	type MonitorType,
+} from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
+import { useCallback, useMemo, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+interface MonitorListConfig {
+	types: MonitorType[] | "selectable";
+	checksLimit: number;
+	refreshInterval: number;
+	rowsPerPageTable: TableName;
+	rowsPerPageDefault: number;
+	initialSortField?: string; // default ""
+}
+
+export const useMonitorListController = (config: MonitorListConfig) => {
+	const dispatch = useDispatch();
+	const rowsPerPage = useSelector(
+		(state: RootState) =>
+			state.ui?.[config.rowsPerPageTable]?.rowsPerPage ?? config.rowsPerPageDefault
+	);
+
+	// Filter states
+	const [selectedTypes, setSelectedTypes] = useState<MonitorType[]>([]);
+	const [selectedStatus, setSelectedStatus] = useState<string>("");
+	const [selectedState, setSelectedState] = useState<string>("");
+	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const [page, setPage] = useState<number>(0);
+	const [search, setSearch] = useState<string>("");
+	const [sortField, setSortField] = useState<string>(config.initialSortField ?? "");
+	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
+	const debouncedSearch = useDebounce<string>(search, 300);
+
+	// Convert filter selections to API filter values
+	// Status: pass "up"/"down" directly to the API
+	// State: "active" -> true, "paused" -> false
+	const toFilterStatus = useMemo(() => {
+		if (selectedStatus === "up") return "up";
+		if (selectedStatus === "down") return "down";
+		return undefined;
+	}, [selectedStatus]);
+
+	const toFilterActive = useMemo(() => {
+		if (selectedState === "active") return "true";
+		if (selectedState === "paused") return "false";
+		return undefined;
+	}, [selectedState]);
+
+	// Determine field and filter for the API request
+	// Priority: status > isActive > search > sort
+	const filterLookup = new Map<string | undefined, string>([
+		[toFilterStatus, "status"],
+		[toFilterActive, "isActive"],
+	]);
+	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
+	const field = activeFilter?.[1] || (debouncedSearch ? "name" : sortField || undefined);
+	const filter = activeFilter?.[0] || debouncedSearch || undefined;
+
+	const effectiveTypes = useMemo(() => {
+		return config.types === "selectable"
+			? selectedTypes.length > 0
+				? selectedTypes
+				: [...SelectableMonitorTypes]
+			: config.types;
+	}, [config.types, selectedTypes]);
+
+	// Fetching
+	const monitorsWithChecksUrl = useMemo(() => {
+		const params = new URLSearchParams();
+		effectiveTypes.forEach((type) => params.append("type", type));
+		selectedTags.forEach((tag) => params.append("tags", tag));
+		params.append("limit", String(config.checksLimit));
+		if (page !== undefined) params.append("page", String(page));
+		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
+		if (filter) params.append("filter", filter);
+		if (field) params.append("field", field);
+		if (sortOrder) params.append("order", sortOrder);
+		return `/monitors/team/with-checks?${params.toString()}`;
+	}, [
+		effectiveTypes,
+		selectedTags,
+		page,
+		rowsPerPage,
+		filter,
+		field,
+		sortOrder,
+		config.checksLimit,
+	]);
+
+	const {
+		data: monitorsWithChecksData,
+		isLoading,
+		error,
+		refetch,
+	} = useGet<MonitorsWithChecksResponse>(
+		monitorsWithChecksUrl,
+		{},
+		{ refreshInterval: config.refreshInterval, keepPreviousData: true }
+	);
+	const { data: tags } = useGet<Tag[]>("/tags/team");
+
+	const bulk = useBulkMonitorActions(refetch, page);
+
+	// Delete ops
+	const { deleteFn, loading: isDeleting } = useDelete();
+	const handleConfirmDelete = async () => {
+		if (!selectedMonitor) return;
+		await deleteFn(`/monitors/${selectedMonitor.id}`);
+		setSelectedMonitor(null);
+		refetch();
+	};
+	const handleCancelDelete = () => setSelectedMonitor(null);
+
+	// Handle filters
+	const handleClearFilters = useCallback(() => {
+		setSelectedTypes([]);
+		setSelectedStatus("");
+		setSelectedState("");
+		setSelectedTags([]);
+		setSearch("");
+	}, []);
+
+	const handleSetRowsPerPage = (value: number) => {
+		dispatch(setRowsPerPage({ value, table: config.rowsPerPageTable }));
+		setPage(0);
+	};
+
+	// Check for active filters
+	const hasActiveFilters = Boolean(
+		selectedTypes.length > 0 ||
+		selectedStatus ||
+		selectedState ||
+		selectedTags.length > 0 ||
+		search
+	);
+
+	// Show empty state only when there are truly no monitors (not just filtered out)
+	// If filters are active and count is 0, pass 1 to prevent empty state fallback
+
+	const { monitors, summary, count } = monitorsWithChecksData ?? {
+		monitors: null,
+		summary: null,
+		count: 0,
+	};
+
+	const effectiveTotalCount =
+		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
+			? 1
+			: (summary?.totalMonitors ?? 0);
+
+	return {
+		// Data
+		monitors,
+		summary,
+		count,
+		tags,
+		isLoading,
+		error,
+		refetch,
+		effectiveTotalCount,
+		hasActiveFilters,
+
+		// Filter state and setters
+		selectedTypes,
+		setSelectedTypes,
+		selectedStatus,
+		setSelectedStatus,
+		selectedState,
+		setSelectedState,
+		selectedTags,
+		setSelectedTags,
+		search,
+		setSearch,
+		handleClearFilters,
+
+		// Paging and Sorting
+		page,
+		setPage,
+		rowsPerPage,
+		handleSetRowsPerPage,
+		sortField,
+		setSortField,
+		sortOrder,
+		setSortOrder,
+
+		// Delete
+		selectedMonitor,
+		setSelectedMonitor,
+		isDialogOpen: Boolean(selectedMonitor),
+		isDeleting,
+		handleConfirmDelete,
+		handleCancelDelete,
+
+		// Rendered only when config.bulkActions
+		...bulk,
+	};
+};
+
+export type MonitorListController = ReturnType<typeof useMonitorListController>;

client/src/Hooks/useNotificationForm.ts

@@ -8,89 +8,17 @@ interface UseNotificationFormOptions {
 }
 
 function buildDefaults(data: Notification | null): NotificationFormData {
-	if (data?.type === "matrix") {
-		return {
-			type: "matrix",
-			notificationName: data.notificationName || "",
-			homeserverUrl: data.homeserverUrl || "",
-			roomId: data.roomId || "",
-			accessToken: data.accessToken || "",
-		};
-	}
-	if (data?.type === "telegram") {
-		return {
-			type: "telegram",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-			accessToken: data.accessToken || "",
-		};
-	}
-	if (data?.type === "slack") {
-		return {
-			type: "slack",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-		};
-	}
-	if (data?.type === "discord") {
-		return {
-			type: "discord",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-		};
-	}
-	if (data?.type === "webhook") {
-		return {
-			type: "webhook",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-		};
-	}
-	if (data?.type === "pager_duty") {
-		return {
-			type: "pager_duty",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-		};
-	}
-	if (data?.type === "teams") {
-		return {
-			type: "teams",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-		};
-	}
-	if (data?.type === "twilio") {
-		return {
-			type: "twilio",
-			notificationName: data.notificationName || "",
-			accountSid: data.accountSid || "",
-			accessToken: data.accessToken || "",
-			phone: data.phone || "",
-			twilioPhoneNumber: data.twilioPhoneNumber || "",
-		};
-	}
-	if (data?.type === "pushover") {
-		return {
-			type: "pushover",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-			accessToken: data.accessToken || "",
-		};
-	}
-	if (data?.type === "ntfy") {
-		return {
-			type: "ntfy",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-			topic: data.topic || "",
-		};
-	}
-	// Default: email (covers both data === null and data.type === "email")
 	return {
-		type: "email",
+		type: data?.type ?? "email",
 		notificationName: data?.notificationName || "",
 		address: data?.address || "",
+		accessToken: data?.accessToken || "",
+		accountSid: data?.accountSid || "",
+		phone: data?.phone || "",
+		twilioPhoneNumber: data?.twilioPhoneNumber || "",
+		homeserverUrl: data?.homeserverUrl || "",
+		roomId: data?.roomId || "",
+		topic: data?.topic || "",
 	};
 }
 

client/src/Hooks/useProxiesForm.ts

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import { proxySchema, type ProxyFormData } from "@/Validation/proxy";
+import type { ProxyResponse } from "@/Types/Proxy";
+
+interface UseProxiesFormOptions {
+	data?: ProxyResponse | null;
+}
+
+export const useProxiesForm = ({ data }: UseProxiesFormOptions) => {
+	return useMemo(() => {
+		const defaults: ProxyFormData = {
+			name: data?.name ?? "",
+			protocol: data?.protocol ?? "http",
+			host: data?.host ?? "",
+			port: data?.port ?? 8080,
+			username: "",
+			password: "",
+		};
+
+		return { schema: proxySchema, defaults };
+	}, [data]);
+};

client/src/Hooks/useSettingsForm.ts

@@ -43,6 +43,8 @@ export const useSettingsForm = ({ data = null }: UseSettingsFormOptions = {}) =>
 			checkTTL: data?.checkTTL ?? 30,
 			pagespeedApiKey: "",
 			systemEmailPassword: "",
+			globalProxyEnabled: data?.globalProxyEnabled ?? false,
+			globalProxyId: data?.globalProxyId ?? null,
 		};
 
 		return { schema: settingsSchema, defaults };

client/src/Pages/Account/EditUser/index.tsx

@@ -1,11 +1,6 @@
-import { Trash2 } from "lucide-react";
-import { TextField, Button, Autocomplete } from "@/Components/inputs";
+import { TextField, Button } from "@/Components/inputs";
 import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import Divider from "@mui/material/Divider";
-import FormHelperText from "@mui/material/FormHelperText";
-import { useForm, Controller } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { ConfigBox, BasePage } from "@/Components/design-elements";
 
 import { UserRoles } from "@/Types/User";
@@ -22,6 +17,8 @@ import { useSelector } from "react-redux";
 import type { RootState } from "@/Types/state";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { useIsAdmin, useIsSuperAdmin } from "@/Hooks/useIsAdmin";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
 
 interface RoleOption {
 	id: UserRole;
@@ -43,10 +40,11 @@ const EditUserPage = () => {
 
 	const { data: user, isLoading } = useGet<User>(`/auth/users/${userId}`);
 
-	const { control, handleSubmit, reset, watch, setValue } = useForm<EditUserFormData>({
+	const form = useForm<EditUserFormData>({
 		resolver,
 		defaultValues: defaults,
 	});
+	const { handleSubmit, reset } = form;
 
 	useEffect(() => {
 		if (user) {
@@ -64,13 +62,6 @@ const EditUserPage = () => {
 		name: t(`common.auth.roles.${role}`),
 	}));
 
-	const watchedRoles = watch("role");
-	const selectedRoles = roleOptions.filter((r) => watchedRoles?.includes(r.id));
-	const handleRemoveRole = (roleToRemove: UserRole) => {
-		const newRoles = watchedRoles.filter((role) => role !== roleToRemove);
-		setValue("role", newRoles, { shouldValidate: true });
-	};
-
 	const canDeleteUser =
 		isAdmin &&
 		userId !== currentUser?.id &&
@@ -90,42 +81,31 @@ const EditUserPage = () => {
 	};
 
 	return (
-		<BasePage loading={isLoading}>
-			<form onSubmit={handleSubmit(onSubmit)}>
+		<FormProvider {...form}>
+			<BasePage
+				loading={isLoading}
+				component={"form"}
+				onSubmit={handleSubmit(onSubmit)}
+			>
 				<Stack gap={theme.spacing(8)}>
 					<ConfigBox
 						title={t("pages.account.form.name.title")}
 						subtitle={t("pages.account.form.name.description")}
 						rightContent={
 							<Stack gap={theme.spacing(8)}>
-								<Controller
+								<FormTextField
 									name="firstName"
-									control={control}
-									render={({ field, fieldState }) => (
-										<TextField
-											{...field}
-											fieldLabel={t("common.form.name.option.firstName.label")}
-											placeholder={t("common.form.name.option.firstName.placeholder")}
-											error={!!fieldState.error}
-											helperText={fieldState.error?.message}
-											autoComplete="given-name"
-										/>
-									)}
+									autoComplete="given-name"
+									fieldLabel={t("common.form.name.option.firstName.label")}
+									placeholder={t("common.form.name.option.firstName.placeholder")}
 								/>
-								<Controller
+								<FormTextField
 									name="lastName"
-									control={control}
-									render={({ field, fieldState }) => (
-										<TextField
-											{...field}
-											fieldLabel={t("common.form.name.option.lastName.label")}
-											placeholder={t("common.form.name.option.lastName.placeholder")}
-											error={!!fieldState.error}
-											helperText={fieldState.error?.message}
-											autoComplete="family-name"
-										/>
-									)}
+									autoComplete="family-name"
+									fieldLabel={t("common.form.name.option.lastName.label")}
+									placeholder={t("common.form.name.option.lastName.placeholder")}
 								/>
+
 								<TextField
 									fieldLabel={t("common.form.email.option.email.label")}
 									placeholder={t("common.form.email.option.email.placeholder")}
@@ -139,55 +119,11 @@ const EditUserPage = () => {
 						title={t("pages.editUser.form.roles.title")}
 						subtitle={t("pages.editUser.form.roles.description")}
 						rightContent={
-							<Stack spacing={theme.spacing(4)}>
-								<Controller
-									name="role"
-									control={control}
-									render={({ field, fieldState }) => (
-										<>
-											<Autocomplete
-												fieldLabel={t("common.form.role.option.role.label")}
-												multiple
-												options={roleOptions}
-												value={selectedRoles}
-												getOptionLabel={(option) => option.name}
-												onChange={(_: unknown, newValue: RoleOption[]) => {
-													field.onChange(newValue.map((r) => r.id));
-												}}
-												isOptionEqualToValue={(option, value) => option.id === value.id}
-											/>
-											{fieldState.error && (
-												<FormHelperText error>{fieldState.error.message}</FormHelperText>
-											)}
-										</>
-									)}
-								/>
-								{selectedRoles.length > 0 && (
-									<Stack
-										flex={1}
-										width="100%"
-									>
-										{selectedRoles.map((role, index) => (
-											<Stack
-												direction="row"
-												alignItems="center"
-												key={role.id}
-												width="100%"
-											>
-												<Typography flexGrow={1}>{role.name}</Typography>
-												<IconButton
-													size="small"
-													onClick={() => handleRemoveRole(role.id)}
-													aria-label="Remove role"
-												>
-													<Trash2 size={16} />
-												</IconButton>
-												{index < selectedRoles.length - 1 && <Divider />}
-											</Stack>
-										))}
-									</Stack>
-								)}
-							</Stack>
+							<FormMultiSelectField
+								name="role"
+								fieldLabel={t("common.form.role.option.role.label")}
+								options={roleOptions}
+							/>
 						}
 					/>
 					<Stack
@@ -217,19 +153,19 @@ const EditUserPage = () => {
 						</Button>
 					</Stack>
 				</Stack>
-			</form>
-			<DialogInput
-				open={showDeleteDialog}
-				title={t("pages.editUser.dialog.removeUser.title")}
-				content={t("pages.editUser.dialog.removeUser.content", {
-					name: `${user?.firstName} ${user?.lastName}`,
-				})}
-				onCancel={() => setShowDeleteDialog(false)}
-				onConfirm={handleDeleteUser}
-				confirmText={t("common.buttons.removeUser")}
-				loading={isDeleting}
-			/>
-		</BasePage>
+				<DialogInput
+					open={showDeleteDialog}
+					title={t("pages.editUser.dialog.removeUser.title")}
+					content={t("pages.editUser.dialog.removeUser.content", {
+						name: `${user?.firstName} ${user?.lastName}`,
+					})}
+					onCancel={() => setShowDeleteDialog(false)}
+					onConfirm={handleDeleteUser}
+					confirmText={t("common.buttons.removeUser")}
+					loading={isDeleting}
+				/>
+			</BasePage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Account/TabPassword.tsx

@@ -1,13 +1,15 @@
 import { Stack } from "@mui/material";
 import { ConfigBox } from "@/Components/design-elements";
-import { TextField, Button } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { usePasswordForm } from "@/Hooks/usePasswordForm";
 import { usePatch } from "@/Hooks/UseApi";
 import type { PasswordFormData } from "@/Validation/password";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 export const TabPassword = () => {
 	const { t } = useTranslation();
@@ -15,10 +17,11 @@ export const TabPassword = () => {
 	const { resolver, defaults } = usePasswordForm();
 	const { patch, loading } = usePatch<FormData, void>();
 
-	const { control, handleSubmit, reset } = useForm<PasswordFormData>({
+	const form = useForm<PasswordFormData>({
 		resolver,
 		defaultValues: defaults,
 	});
+	const { handleSubmit, reset } = form;
 
 	const onSubmit = async (data: PasswordFormData) => {
 		const fd = new FormData();
@@ -32,85 +35,61 @@ export const TabPassword = () => {
 	};
 
 	return (
-		<Stack
-			gap={theme.spacing(8)}
-			component="form"
-			onSubmit={handleSubmit(onSubmit)}
-		>
-			<ConfigBox
-				title={t("pages.account.form.currentPassword.title")}
-				subtitle={t("pages.account.form.currentPassword.description")}
-				rightContent={
-					<Controller
-						name="currentPassword"
-						control={control}
-						render={({ field, fieldState }) => (
-							<TextField
-								{...field}
-								type="password"
-								fieldLabel={t("pages.account.form.currentPassword.option.label")}
-								placeholder={t("pages.account.form.currentPassword.option.placeholder")}
-								autoComplete="current-password"
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-							/>
-						)}
-					/>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.account.form.newPassword.title")}
-				subtitle={t("pages.account.form.newPassword.description")}
-				rightContent={
-					<Stack gap={theme.spacing(8)}>
-						<Controller
-							name="newPassword"
-							control={control}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									type="password"
-									fieldLabel={t(
-										"pages.account.form.newPassword.option.newPassword.label"
-									)}
-									placeholder={t(
-										"pages.account.form.newPassword.option.newPassword.placeholder"
-									)}
-									autoComplete="new-password"
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message ?? ""}
-								/>
-							)}
-						/>
-						<Controller
-							name="confirm"
-							control={control}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									type="password"
-									fieldLabel={t("pages.account.form.newPassword.option.confirm.label")}
-									placeholder={t(
-										"pages.account.form.newPassword.option.confirm.placeholder"
-									)}
-									autoComplete="new-password"
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message ?? ""}
-								/>
-							)}
-						/>
-					</Stack>
-				}
-			/>
-			<Button
-				type="submit"
-				variant="contained"
-				color="primary"
-				loading={loading}
-				sx={{ alignSelf: "flex-end", minWidth: 100 }}
+		<FormProvider {...form}>
+			<Stack
+				gap={theme.spacing(LAYOUT.MD)}
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
 			>
-				{t("common.buttons.save")}
-			</Button>
-		</Stack>
+				<ConfigBox
+					title={t("pages.account.form.currentPassword.title")}
+					subtitle={t("pages.account.form.currentPassword.description")}
+					rightContent={
+						<FormTextField
+							name="currentPassword"
+							type="password"
+							autoComplete="current-password"
+							fieldLabel={t("pages.account.form.currentPassword.option.label")}
+							placeholder={t("pages.account.form.currentPassword.option.placeholder")}
+						/>
+					}
+				/>
+				<ConfigBox
+					title={t("pages.account.form.newPassword.title")}
+					subtitle={t("pages.account.form.newPassword.description")}
+					rightContent={
+						<Stack gap={theme.spacing(LAYOUT.MD)}>
+							<FormTextField
+								name="newPassword"
+								type="password"
+								autoComplete="new-password"
+								fieldLabel={t("pages.account.form.newPassword.option.newPassword.label")}
+								placeholder={t(
+									"pages.account.form.newPassword.option.newPassword.placeholder"
+								)}
+							/>
+							<FormTextField
+								name="confirm"
+								type="password"
+								autoComplete="new-password"
+								fieldLabel={t("pages.account.form.newPassword.option.confirm.label")}
+								placeholder={t(
+									"pages.account.form.newPassword.option.confirm.placeholder"
+								)}
+							/>
+						</Stack>
+					}
+				/>
+				<Button
+					type="submit"
+					variant="contained"
+					color="primary"
+					loading={loading}
+					sx={{ alignSelf: "flex-end", minWidth: 100 }}
+				>
+					{t("common.buttons.save")}
+				</Button>
+			</Stack>
+		</FormProvider>
 	);
 };

client/src/Pages/Account/TabProfile.tsx

@@ -1,11 +1,11 @@
 import { Stack } from "@mui/material";
 import { ConfigBox } from "@/Components/design-elements";
-import { TextField, Button } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 import { ImageUpload } from "@/Components/inputs";
 
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { useSelector, useDispatch } from "react-redux";
 import { useProfileForm } from "@/Hooks/useProfileForm";
 import { usePatch } from "@/Hooks/UseApi";
@@ -13,6 +13,8 @@ import { setUser } from "@/Features/Auth/authSlice";
 import type { ProfileFormData } from "@/Validation/profile";
 import type { RootState } from "@/Types/state";
 import type { User } from "@/Types/User";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 export const TabProfile = () => {
 	const theme = useTheme();
@@ -22,7 +24,7 @@ export const TabProfile = () => {
 	const { resolver, defaults } = useProfileForm();
 	const { patch, loading: patchLoading } = usePatch<FormData, User>();
 
-	const { control, handleSubmit, setValue, watch } = useForm<ProfileFormData>({
+	const form = useForm<ProfileFormData>({
 		resolver,
 		defaultValues: {
 			firstName: user?.firstName ?? defaults.firstName,
@@ -31,7 +33,7 @@ export const TabProfile = () => {
 			deleteProfileImage: defaults.deleteProfileImage,
 		},
 	});
-
+	const { handleSubmit, setValue, watch } = form;
 	const currentImage = watch("profileImage");
 	const deleteImage = watch("deleteProfileImage");
 
@@ -74,66 +76,52 @@ export const TabProfile = () => {
 	};
 
 	return (
-		<Stack
-			gap={theme.spacing(8)}
-			component="form"
-			onSubmit={handleSubmit(onSubmit)}
-		>
-			<ConfigBox
-				title={t("pages.account.form.name.title")}
-				subtitle={t("pages.account.form.name.description")}
-				rightContent={
-					<Stack gap={theme.spacing(8)}>
-						<Controller
-							name="firstName"
-							control={control}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									fieldLabel={t("common.form.name.option.firstName.label")}
-									placeholder={t("common.form.name.option.firstName.placeholder")}
-									autoComplete="given-name"
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message ?? ""}
-								/>
-							)}
-						/>
-						<Controller
-							name="lastName"
-							control={control}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									fieldLabel={t("common.form.name.option.lastName.label")}
-									placeholder={t("common.form.name.option.lastName.placeholder")}
-									autoComplete="family-name"
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message ?? ""}
-								/>
-							)}
-						/>
-					</Stack>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.account.form.photo.title")}
-				subtitle={t("pages.account.form.photo.description")}
-				rightContent={
-					<ImageUpload
-						src={getCurrentImageSrc()}
-						onChange={handleImageChange}
-					/>
-				}
-			/>
-			<Button
-				type="submit"
-				variant="contained"
-				color="primary"
-				loading={patchLoading}
-				sx={{ alignSelf: "flex-end", minWidth: 100 }}
+		<FormProvider {...form}>
+			<Stack
+				gap={theme.spacing(LAYOUT.MD)}
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
 			>
-				{t("common.buttons.save")}
-			</Button>
-		</Stack>
+				<ConfigBox
+					title={t("pages.account.form.name.title")}
+					subtitle={t("pages.account.form.name.description")}
+					rightContent={
+						<Stack gap={theme.spacing(LAYOUT.MD)}>
+							<FormTextField
+								name="firstName"
+								autoComplete="given-name"
+								fieldLabel={t("common.form.name.option.firstName.label")}
+								placeholder={t("common.form.name.option.firstName.placeholder")}
+							/>
+							<FormTextField
+								name="lastName"
+								autoComplete="family-name"
+								fieldLabel={t("common.form.name.option.lastName.label")}
+								placeholder={t("common.form.name.option.lastName.placeholder")}
+							/>
+						</Stack>
+					}
+				/>
+				<ConfigBox
+					title={t("pages.account.form.photo.title")}
+					subtitle={t("pages.account.form.photo.description")}
+					rightContent={
+						<ImageUpload
+							src={getCurrentImageSrc()}
+							onChange={handleImageChange}
+						/>
+					}
+				/>
+				<Button
+					type="submit"
+					variant="contained"
+					color="primary"
+					loading={patchLoading}
+					sx={{ alignSelf: "flex-end", minWidth: 100 }}
+				>
+					{t("common.buttons.save")}
+				</Button>
+			</Stack>
+		</FormProvider>
 	);
 };

client/src/Pages/Account/components/AddTeamMemberDialog.tsx

@@ -1,15 +1,16 @@
 import { Stack } from "@mui/material";
-import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
-import { Dialog, TextField, Select } from "@/Components/inputs";
+import { Dialog } from "@/Components/inputs";
 import { useAddTeamMemberForm } from "@/Hooks/useAddTeamMemberForm";
 import type { AddTeamMemberFormData } from "@/Validation/addTeamMember";
-import type { UserRole, User } from "@/Types/User";
+import type { User } from "@/Types/User";
 import { usePost } from "@/Hooks/UseApi";
 import { LAYOUT } from "@/Utils/Theme/constants";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { RoleSelectField } from "./RoleSelectField";
 
 interface AddTeamMemberDialogProps {
 	open: boolean;
@@ -35,17 +36,13 @@ export const AddTeamMemberDialog = ({
 	const { schema, defaults } = useAddTeamMemberForm();
 	const { post, loading } = usePost<RegisterPayload, User>();
 
-	const { control, handleSubmit, reset, setError } = useForm<AddTeamMemberFormData>({
+	const form = useForm<AddTeamMemberFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 		values: defaults,
 	});
 
-	const roleOptions: { value: UserRole; label: string }[] = [
-		{ value: "admin", label: t("common.auth.roles.admin") },
-		{ value: "user", label: t("common.auth.roles.user") },
-		{ value: "demo", label: t("common.auth.roles.demo") },
-	];
+	const { handleSubmit, reset, setError } = form;
 
 	const handleClose = () => {
 		reset();
@@ -55,7 +52,7 @@ export const AddTeamMemberDialog = ({
 	const onSubmit = async (data: AddTeamMemberFormData) => {
 		if (loading) return;
 
-		const { confirm, ...userData } = data;
+		const { confirm: _confirm, ...userData } = data;
 		const payload: RegisterPayload = userData;
 
 		const result = await post("/auth/users", payload);
@@ -72,124 +69,64 @@ export const AddTeamMemberDialog = ({
 	};
 
 	return (
-		<Dialog
-			open={open}
-			title={t("pages.account.team.addMember.title")}
-			content={t("pages.account.team.addMember.description")}
-			onCancel={handleClose}
-			onConfirm={handleSubmit(onSubmit)}
-			confirmText={t("common.buttons.addMember")}
-			loading={loading}
-			maxWidth="sm"
-			fullWidth
-		>
-			<Stack gap={theme.spacing(LAYOUT.XS)}>
-				<Stack
-					direction="row"
-					gap={theme.spacing(LAYOUT.XS)}
-				>
-					<Controller
-						name="firstName"
-						control={control}
-						render={({ field, fieldState }) => (
-							<TextField
-								{...field}
-								fieldLabel={t("common.form.name.option.firstName.label")}
-								placeholder={t("common.form.name.option.firstName.placeholder")}
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-								sx={{ flex: 1 }}
-							/>
-						)}
-					/>
-					<Controller
-						name="lastName"
-						control={control}
-						render={({ field, fieldState }) => (
-							<TextField
-								{...field}
-								fieldLabel={t("common.form.name.option.lastName.label")}
-								placeholder={t("common.form.name.option.lastName.placeholder")}
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-								sx={{ flex: 1 }}
-							/>
-						)}
-					/>
-				</Stack>
-				<Controller
-					name="email"
-					control={control}
-					render={({ field, fieldState }) => (
-						<TextField
-							{...field}
-							fieldLabel={t("common.form.email.option.email.label")}
-							placeholder={t("common.form.email.option.email.placeholder")}
-							type="email"
-							error={!!fieldState.error}
-							helperText={fieldState.error?.message ?? ""}
-							fullWidth
+		<FormProvider {...form}>
+			<Dialog
+				open={open}
+				title={t("pages.account.team.addMember.title")}
+				content={t("pages.account.team.addMember.description")}
+				onCancel={handleClose}
+				onConfirm={handleSubmit(onSubmit)}
+				confirmText={t("common.buttons.addMember")}
+				loading={loading}
+				maxWidth="sm"
+				fullWidth
+			>
+				<Stack gap={theme.spacing(LAYOUT.XS)}>
+					<Stack
+						direction="row"
+						gap={theme.spacing(LAYOUT.XS)}
+					>
+						<FormTextField
+							name="firstName"
+							fieldLabel={t("common.form.name.option.firstName.label")}
+							placeholder={t("common.form.name.option.firstName.placeholder")}
 						/>
-					)}
-				/>
-				<Controller
-					name="role"
-					control={control}
-					render={({ field }) => (
-						<Select
-							{...field}
-							value={field.value[0] ?? "user"}
-							onChange={(e) => field.onChange([e.target.value])}
-							fieldLabel={t("common.form.role.option.role.label")}
-							fullWidth
-						>
-							{roleOptions.map((option) => (
-								<MenuItem
-									key={option.value}
-									value={option.value}
-								>
-									{option.label}
-								</MenuItem>
-							))}
-						</Select>
-					)}
-				/>
-				<Stack
-					direction="row"
-					gap={theme.spacing(LAYOUT.XS)}
-				>
-					<Controller
-						name="password"
-						control={control}
-						render={({ field, fieldState }) => (
-							<TextField
-								{...field}
-								fieldLabel={t("pages.auth.common.form.option.password.label")}
-								placeholder={t("pages.auth.common.form.option.password.placeholder")}
-								type="password"
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-								sx={{ flex: 1 }}
-							/>
-						)}
-					/>
-					<Controller
-						name="confirm"
-						control={control}
-						render={({ field, fieldState }) => (
-							<TextField
-								{...field}
-								fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
-								placeholder={t("pages.auth.common.form.option.password.placeholder")}
-								type="password"
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-								sx={{ flex: 1 }}
-							/>
-						)}
+						<FormTextField
+							name="lastName"
+							fieldLabel={t("common.form.name.option.lastName.label")}
+							placeholder={t("common.form.name.option.lastName.placeholder")}
+						/>
+					</Stack>
+					<FormTextField
+						name="email"
+						type="email"
+						fieldLabel={t("common.form.email.option.email.label")}
+						placeholder={t("common.form.email.option.email.placeholder")}
 					/>
+
+					<RoleSelectField />
+
+					<Stack
+						direction="row"
+						gap={theme.spacing(LAYOUT.XS)}
+					>
+						<FormTextField
+							name="password"
+							fieldLabel={t("pages.auth.common.form.option.password.label")}
+							placeholder={t("pages.auth.common.form.option.password.placeholder")}
+							type="password"
+							sx={{ flex: 1 }}
+						/>
+
+						<FormTextField
+							name="confirm"
+							fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+							placeholder={t("pages.auth.common.form.option.password.placeholder")}
+							type="password"
+						/>
+					</Stack>
 				</Stack>
-			</Stack>
-		</Dialog>
+			</Dialog>
+		</FormProvider>
 	);
 };

client/src/Pages/Account/components/InviteTeamMemberDialog.tsx

@@ -1,16 +1,16 @@
 import { Stack } from "@mui/material";
-import MenuItem from "@mui/material/MenuItem";
-import { useTheme, FormHelperText, Typography } from "@mui/material";
+import { useTheme, Typography } from "@mui/material";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
-import { Dialog, TextField, Select, Button } from "@/Components/inputs";
-import type { UserRole } from "@/Types/User";
+import { useForm, FormProvider } from "react-hook-form";
+import { Dialog, TextField, Button } from "@/Components/inputs";
 import { useInviteForm } from "@/Hooks/useInviteForm";
 import type { InviteFormData } from "@/Validation/invite";
 import { usePost } from "@/Hooks/UseApi";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { runtimeConfig } from "@/Utils/runtimeConfig";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { RoleSelectField } from "./RoleSelectField";
 
 const CLIENT_HOST = runtimeConfig.clientHost || import.meta.env.VITE_APP_CLIENT_HOST;
 
@@ -31,11 +31,12 @@ export const InviteTeamMemberDialog = ({
 	const { t } = useTranslation();
 	const { resolver, defaults } = useInviteForm();
 
-	const { control, handleSubmit, reset } = useForm<InviteFormData>({
+	const form = useForm<InviteFormData>({
 		resolver,
 		defaultValues: defaults,
 		values: defaults,
 	});
+	const { handleSubmit, reset } = form;
 
 	const { post: generateToken, loading: generateLoading } = usePost<
 		InviteFormData,
@@ -47,12 +48,6 @@ export const InviteTeamMemberDialog = ({
 	>();
 	const [inviteLink, setInviteLink] = useState<string | null>(null);
 
-	const roleOptions: { value: UserRole; label: string }[] = [
-		{ value: "admin", label: t("common.auth.roles.admin") },
-		{ value: "user", label: t("common.auth.roles.user") },
-		{ value: "demo", label: t("common.auth.roles.demo") },
-	];
-
 	const handleGenerateToken = async (data: InviteFormData) => {
 		const result = await generateToken("/invite", data);
 		if (result?.data?.token) {
@@ -76,88 +71,55 @@ export const InviteTeamMemberDialog = ({
 	};
 
 	return (
-		<Dialog
-			open={open}
-			title={t("pages.account.team.invite.title")}
-			content={t("pages.account.team.invite.description")}
-			onCancel={handleClose}
-			onConfirm={handleSubmit(handleSendInvite)}
-			confirmText={t("common.buttons.sendInvite")}
-			loading={sendLoading || generateLoading}
-			maxWidth="sm"
-			fullWidth
-			additionalButtons={
-				<Button
-					variant="contained"
-					color="primary"
-					onClick={handleSubmit(handleGenerateToken)}
-					loading={generateLoading || sendLoading}
-				>
-					{t("common.buttons.generateToken")}
-				</Button>
-			}
-		>
-			<Stack gap={theme.spacing(LAYOUT.XS)}>
-				<Controller
-					name="email"
-					control={control}
-					render={({ field, fieldState }) => (
-						<TextField
-							{...field}
-							fieldLabel={t("common.form.email.option.email.label")}
-							placeholder={t("common.form.email.option.email.placeholder")}
-							type="email"
-							fullWidth
-							error={!!fieldState.error}
-							helperText={fieldState.error?.message ?? ""}
-						/>
-					)}
-				/>
-				<Controller
-					name="role"
-					control={control}
-					render={({ field: { value, onChange, ...field }, fieldState }) => (
+		<FormProvider {...form}>
+			<Dialog
+				open={open}
+				title={t("pages.account.team.invite.title")}
+				content={t("pages.account.team.invite.description")}
+				onCancel={handleClose}
+				onConfirm={handleSubmit(handleSendInvite)}
+				confirmText={t("common.buttons.sendInvite")}
+				loading={sendLoading || generateLoading}
+				maxWidth="sm"
+				fullWidth
+				additionalButtons={
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={handleSubmit(handleGenerateToken)}
+						loading={generateLoading || sendLoading}
+					>
+						{t("common.buttons.generateToken")}
+					</Button>
+				}
+			>
+				<Stack gap={theme.spacing(LAYOUT.XS)}>
+					<FormTextField
+						name="email"
+						type="email"
+						fieldLabel={t("common.form.email.option.email.label")}
+						placeholder={t("common.form.email.option.email.placeholder")}
+					/>
+
+					<RoleSelectField />
+					{inviteLink && (
 						<>
-							<Select
-								{...field}
-								value={Array.isArray(value) ? (value[0] ?? "") : ""}
-								onChange={(e) => onChange([e.target.value as UserRole])}
-								fieldLabel={t("common.form.role.option.role.label")}
+							<Typography variant="body2">
+								{t("pages.account.team.invite.linkLabel")}
+							</Typography>
+							<TextField
+								value={inviteLink}
 								fullWidth
-								error={!!fieldState.error}
-							>
-								{roleOptions.map((option) => (
-									<MenuItem
-										key={option.value}
-										value={option.value}
-									>
-										{option.label}
-									</MenuItem>
-								))}
-							</Select>
-							{fieldState.error && (
-								<FormHelperText error>{fieldState.error.message}</FormHelperText>
-							)}
+								slotProps={{
+									input: {
+										readOnly: true,
+									},
+								}}
+							/>
 						</>
 					)}
-				/>
-				{inviteLink && (
-					<>
-						<Typography variant="body2">
-							{t("pages.account.team.invite.linkLabel")}
-						</Typography>
-						<TextField
-							value={inviteLink}
-							fullWidth
-							slotProps={{
-								input: {
-									readOnly: true,
-								},
-							}}
-						/>
-					</>
-				)}
-			</Stack>
-		</Dialog>
+				</Stack>
+			</Dialog>
+		</FormProvider>
 	);
 };

client/src/Pages/Account/components/RoleSelectField.tsx

@@ -0,0 +1,45 @@
+import MenuItem from "@mui/material/MenuItem";
+import FormHelperText from "@mui/material/FormHelperText";
+import { useController } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Select } from "@/Components/inputs";
+import { UserRoles } from "@/Types/User";
+import type { UserRole } from "@/Types/User";
+
+export const RoleSelectField = () => {
+	const { t } = useTranslation();
+	const { field, fieldState } = useController<{ role: UserRole[] }, "role">({
+		name: "role",
+	});
+
+	const editableRoles = UserRoles.filter((role) => role !== "superadmin");
+	const roleOptions: { value: UserRole; label: string }[] = editableRoles.map((role) => ({
+		value: role,
+		label: t(`common.auth.roles.${role}`),
+	}));
+
+	return (
+		<>
+			<Select
+				{...field}
+				value={field.value[0] ?? "user"}
+				onChange={(e) => field.onChange([e.target.value])}
+				fieldLabel={t("common.form.role.option.role.label")}
+				fullWidth
+				error={!!fieldState.error}
+			>
+				{roleOptions.map((option) => (
+					<MenuItem
+						key={option.value}
+						value={option.value}
+					>
+						{option.label}
+					</MenuItem>
+				))}
+			</Select>
+			{fieldState.error && (
+				<FormHelperText error>{fieldState.error.message}</FormHelperText>
+			)}
+		</>
+	);
+};

client/src/Pages/Auth/Login/index.tsx

@@ -1,9 +1,9 @@
 import { BaseAuthPage, TextLink } from "@/Components/design-elements";
-import { Button, TextField } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useLoginForm } from "@/Hooks/useLoginForm";
 import type { LoginFormData } from "@/Validation/login";
@@ -11,6 +11,7 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { setAuthState } from "@/Features/Auth/authSlice";
 import { useLazyGet, usePost } from "@/Hooks/UseApi";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 const LoginPage = () => {
 	const { t } = useTranslation();
@@ -31,11 +32,13 @@ const LoginPage = () => {
 
 	const { schema, defaults } = useLoginForm();
 
-	const { control, handleSubmit } = useForm<LoginFormData>({
+	const form = useForm<LoginFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
 
+	const { handleSubmit } = form;
+
 	if (isCheckingAdmin) return null;
 
 	const onSubmit = async (data: LoginFormData) => {
@@ -50,53 +53,39 @@ const LoginPage = () => {
 	};
 
 	return (
-		<BaseAuthPage
-			component="form"
-			onSubmit={handleSubmit(onSubmit)}
-			title={t("pages.auth.login.title")}
-			subtitle={t("pages.auth.login.subtitle")}
-		>
-			<Controller
-				name="email"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						fieldLabel={t("pages.auth.common.form.option.email.label")}
-						placeholder={t("pages.auth.common.form.option.email.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="password"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						type="password"
-						fieldLabel={t("pages.auth.common.form.option.password.label")}
-						placeholder={t("pages.auth.common.form.option.password.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
-					/>
-				)}
-			/>
-			<Button
-				variant="contained"
-				type="submit"
-				loading={loading}
+		<FormProvider {...form}>
+			<BaseAuthPage
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
+				title={t("pages.auth.login.title")}
+				subtitle={t("pages.auth.login.subtitle")}
 			>
-				{t("pages.auth.login.submit")}
-			</Button>
-			<TextLink
-				alignSelf={"center"}
-				text={t("pages.auth.login.links.forgotPassword.text")}
-				linkText={t("pages.auth.login.links.forgotPassword.linkText")}
-				href="/forgot-password"
-			/>
-		</BaseAuthPage>
+				<FormTextField
+					name="email"
+					fieldLabel={t("pages.auth.common.form.option.email.label")}
+					placeholder={t("pages.auth.common.form.option.email.placeholder")}
+				/>
+				<FormTextField
+					name="password"
+					type="password"
+					fieldLabel={t("pages.auth.common.form.option.password.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+				/>
+				<Button
+					variant="contained"
+					type="submit"
+					loading={loading}
+				>
+					{t("pages.auth.login.submit")}
+				</Button>
+				<TextLink
+					alignSelf={"center"}
+					text={t("pages.auth.login.links.forgotPassword.text")}
+					linkText={t("pages.auth.login.links.forgotPassword.linkText")}
+					href="/forgot-password"
+				/>
+			</BaseAuthPage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Auth/Recovery/index.tsx

@@ -1,12 +1,13 @@
-import { Button, TextField } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 import { BaseAuthPage, TextLink } from "@/Components/design-elements";
 
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useRecoveryForm } from "@/Hooks/useRecoveryForm";
 import type { RecoveryFormData } from "@/Validation/recovery";
 import { usePost } from "@/Hooks/UseApi";
 import { useTranslation } from "react-i18next";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 const ForgotPasswordPage = () => {
 	const { t } = useTranslation();
@@ -14,10 +15,11 @@ const ForgotPasswordPage = () => {
 
 	const { schema, defaults } = useRecoveryForm();
 
-	const { control, handleSubmit } = useForm<RecoveryFormData>({
+	const form = useForm<RecoveryFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
+	const { handleSubmit } = form;
 
 	const onSubmit = async (data: RecoveryFormData) => {
 		if (loading) return;
@@ -30,39 +32,33 @@ const ForgotPasswordPage = () => {
 	};
 
 	return (
-		<BaseAuthPage
-			component="form"
-			onSubmit={handleSubmit(onSubmit)}
-			title={t("pages.auth.forgotPassword.title")}
-			subtitle={t("pages.auth.forgotPassword.subtitle")}
-		>
-			<Controller
-				name="email"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						fieldLabel={t("pages.auth.common.form.option.email.label")}
-						placeholder={t("pages.auth.common.form.option.email.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
-					/>
-				)}
-			/>
-			<Button
-				variant="contained"
-				type="submit"
-				loading={loading}
+		<FormProvider {...form}>
+			<BaseAuthPage
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
+				title={t("pages.auth.forgotPassword.title")}
+				subtitle={t("pages.auth.forgotPassword.subtitle")}
 			>
-				{t("pages.auth.forgotPassword.submit")}
-			</Button>
-			<TextLink
-				alignSelf={"center"}
-				text={t("pages.auth.forgotPassword.links.login.text")}
-				linkText={t("pages.auth.forgotPassword.links.login.linkText")}
-				href="/login"
-			/>
-		</BaseAuthPage>
+				<FormTextField
+					name="email"
+					fieldLabel={t("pages.auth.common.form.option.email.label")}
+					placeholder={t("pages.auth.common.form.option.email.placeholder")}
+				/>
+				<Button
+					variant="contained"
+					type="submit"
+					loading={loading}
+				>
+					{t("pages.auth.forgotPassword.submit")}
+				</Button>
+				<TextLink
+					alignSelf={"center"}
+					text={t("pages.auth.forgotPassword.links.login.text")}
+					linkText={t("pages.auth.forgotPassword.links.login.linkText")}
+					href="/login"
+				/>
+			</BaseAuthPage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Auth/Register/index.tsx

@@ -1,7 +1,7 @@
 import { BaseAuthPage } from "@/Components/design-elements";
-import { Button, TextField } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 import Alert from "@mui/material/Alert";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useRegisterForm } from "@/Hooks/useRegisterForm";
 import type { RegisterFormData } from "@/Validation/register";
@@ -12,6 +12,7 @@ import { useDispatch } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import type { AuthResponse } from "@/Types/User";
 import { useEffect, useRef, useState } from "react";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 interface RegisterPayload {
 	user: Omit<RegisterFormData, "confirm">;
@@ -45,10 +46,11 @@ const RegisterPage = () => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const { control, handleSubmit, setError, reset } = useForm<RegisterFormData>({
+	const form = useForm<RegisterFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
+	const { handleSubmit, setError, reset } = form;
 
 	useEffect(() => {
 		if (!token || hasVerified.current) return;
@@ -64,14 +66,14 @@ const RegisterPage = () => {
 				navigate("/register", { replace: true });
 			}
 		});
-	}, [token]);
+	}, [token, defaults, navigate, reset, verifyToken]);
 
 	if (isCheckingAdmin) return null;
 
 	const onSubmit = async (data: RegisterFormData) => {
 		if (loading) return;
 
-		const { confirm, ...userData } = data;
+		const { confirm: _confirm, ...userData } = data;
 		const payload: RegisterPayload = { user: userData };
 		if (token) {
 			payload.token = token;
@@ -89,105 +91,70 @@ const RegisterPage = () => {
 	};
 
 	return (
-		<BaseAuthPage
-			component="form"
-			onSubmit={handleSubmit(onSubmit)}
-			title={t("pages.auth.register.title")}
-			subtitle={t("pages.auth.register.subtitle")}
-		>
-			{!token && (
-				<Alert
-					severity="info"
-					icon={false}
-					sx={(theme) => ({
-						fontSize: 13,
-						lineHeight: 1.55,
-						color: theme.palette.text.secondary,
-						backgroundColor: theme.palette.action.hover,
-						border: `1px solid ${theme.palette.divider}`,
-						borderRadius: 1,
-						"& .MuiAlert-message": { padding: 0 },
-					})}
-				>
-					{t("pages.auth.register.setupNotice")}
-				</Alert>
-			)}
-			<Controller
-				name="firstName"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						fieldLabel={t("common.form.name.option.firstName.label")}
-						placeholder={t("common.form.name.option.firstName.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="lastName"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						fieldLabel={t("common.form.name.option.lastName.label")}
-						placeholder={t("common.form.name.option.lastName.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="email"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						disabled={!!token}
-						fieldLabel={t("common.form.email.option.email.label")}
-						placeholder={t("common.form.email.option.email.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="password"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						type="password"
-						fieldLabel={t("pages.auth.common.form.option.password.label")}
-						placeholder={t("pages.auth.common.form.option.password.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="confirm"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						type="password"
-						fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
-						placeholder={t("pages.auth.common.form.option.password.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Button
-				variant="contained"
-				type="submit"
-				loading={loading}
+		<FormProvider {...form}>
+			<BaseAuthPage
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
+				title={t("pages.auth.register.title")}
+				subtitle={t("pages.auth.register.subtitle")}
 			>
-				{t("pages.auth.register.submit")}
-			</Button>
-		</BaseAuthPage>
+				{!token && (
+					<Alert
+						severity="info"
+						icon={false}
+						sx={(theme) => ({
+							fontSize: 13,
+							lineHeight: 1.55,
+							color: theme.palette.text.secondary,
+							backgroundColor: theme.palette.action.hover,
+							border: `1px solid ${theme.palette.divider}`,
+							borderRadius: 1,
+							"& .MuiAlert-message": { padding: 0 },
+						})}
+					>
+						{t("pages.auth.register.setupNotice")}
+					</Alert>
+				)}
+				<FormTextField
+					name="firstName"
+					fieldLabel={t("common.form.name.option.firstName.label")}
+					placeholder={t("common.form.name.option.firstName.placeholder")}
+				/>
+				<FormTextField
+					name="lastName"
+					fieldLabel={t("common.form.name.option.lastName.label")}
+					placeholder={t("common.form.name.option.lastName.placeholder")}
+				/>
+				<FormTextField
+					name="email"
+					disabled={!!token}
+					fieldLabel={t("common.form.email.option.email.label")}
+					placeholder={t("common.form.email.option.email.placeholder")}
+				/>
+
+				<FormTextField
+					name="password"
+					type="password"
+					fieldLabel={t("pages.auth.common.form.option.password.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+				/>
+
+				<FormTextField
+					name="confirm"
+					type="password"
+					fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+				/>
+
+				<Button
+					variant="contained"
+					type="submit"
+					loading={loading}
+				>
+					{t("pages.auth.register.submit")}
+				</Button>
+			</BaseAuthPage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Auth/SetNewPassword/index.tsx

@@ -1,9 +1,9 @@
 import { BaseAuthPage, BulletPointCheck, TextLink } from "@/Components/design-elements";
-import { Button, TextField } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useSetNewPasswordForm } from "@/Hooks/useSetNewPasswordForm";
 import type { SetNewPasswordFormData } from "@/Validation/setNewPassword";
@@ -12,6 +12,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import { usePost } from "@/Hooks/UseApi";
 import { useDispatch } from "react-redux";
 import { setAuthState } from "@/Features/Auth/authSlice";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 const SetNewPasswordPage = () => {
 	const theme = useTheme();
@@ -23,11 +24,11 @@ const SetNewPasswordPage = () => {
 
 	const { schema, defaults } = useSetNewPasswordForm();
 
-	const { control, handleSubmit, watch } = useForm<SetNewPasswordFormData>({
+	const form = useForm<SetNewPasswordFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
-
+	const { handleSubmit, watch } = form;
 	const password = watch("password");
 	const confirm = watch("confirm");
 
@@ -57,81 +58,68 @@ const SetNewPasswordPage = () => {
 	};
 
 	return (
-		<BaseAuthPage
-			component="form"
-			onSubmit={handleSubmit(onSubmit)}
-			title={t("pages.auth.setNewPassword.title")}
-			subtitle={t("pages.auth.setNewPassword.subtitle")}
-		>
-			<Controller
-				name="password"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						type="password"
-						fieldLabel={t("pages.auth.common.form.option.password.label")}
-						placeholder={t("pages.auth.common.form.option.password.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="confirm"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						type="password"
-						fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
-						placeholder={t("pages.auth.common.form.option.password.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Stack gap={theme.spacing(4)}>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.length")}
-					variant={getVariant(hasLength)}
-				/>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.special")}
-					variant={getVariant(hasSpecial)}
-				/>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.number")}
-					variant={getVariant(hasNumber)}
-				/>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.uppercase")}
-					variant={getVariant(hasUppercase)}
-				/>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.lowercase")}
-					variant={getVariant(hasLowercase)}
-				/>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.match")}
-					variant={getVariant(passwordsMatch)}
-				/>
-			</Stack>
-			<Button
-				variant="contained"
-				type="submit"
-				fullWidth
-				loading={loading}
+		<FormProvider {...form}>
+			<BaseAuthPage
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
+				title={t("pages.auth.setNewPassword.title")}
+				subtitle={t("pages.auth.setNewPassword.subtitle")}
 			>
-				{t("common.buttons.resetPassword")}
-			</Button>
-			<TextLink
-				alignSelf="center"
-				text={t("pages.auth.forgotPassword.links.login.text")}
-				linkText={t("pages.auth.forgotPassword.links.login.linkText")}
-				href="/login"
-			/>
-		</BaseAuthPage>
+				<FormTextField
+					name="password"
+					type="password"
+					fieldLabel={t("pages.auth.common.form.option.password.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+				/>
+				<FormTextField
+					name="confirm"
+					type="password"
+					fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+				/>
+
+				<Stack gap={theme.spacing(4)}>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.length")}
+						variant={getVariant(hasLength)}
+					/>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.special")}
+						variant={getVariant(hasSpecial)}
+					/>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.number")}
+						variant={getVariant(hasNumber)}
+					/>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.uppercase")}
+						variant={getVariant(hasUppercase)}
+					/>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.lowercase")}
+						variant={getVariant(hasLowercase)}
+					/>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.match")}
+						variant={getVariant(passwordsMatch)}
+					/>
+				</Stack>
+				<Button
+					variant="contained"
+					type="submit"
+					fullWidth
+					loading={loading}
+				>
+					{t("common.buttons.resetPassword")}
+				</Button>
+				<TextLink
+					alignSelf="center"
+					text={t("pages.auth.forgotPassword.links.login.text")}
+					linkText={t("pages.auth.forgotPassword.links.login.linkText")}
+					href="/login"
+				/>
+			</BaseAuthPage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Incidents/utils.ts

@@ -1,5 +1,5 @@
 import type { Incident, IncidentSummaryItem } from "@/Types/Incident";
-import prettyMilliseconds from "pretty-ms";
+import { formatDuration } from "@/Utils/TimeUtils";
 
 type IncidentLike = Pick<Incident, "startTime" | "endTime" | "status">;
 
@@ -24,8 +24,5 @@ export const getIncidentsDuration = (incident: IncidentLike | IncidentSummaryIte
 		return "-";
 	}
 
-	return prettyMilliseconds(durationMs, {
-		secondsDecimalDigits: 0,
-		millisecondsDecimalDigits: 0,
-	});
+	return formatDuration(durationMs);
 };

client/src/Pages/Infrastructure/Details/Components/StatusBoxes.tsx

@@ -11,7 +11,8 @@ export const StatusBoxes = ({ monitor }: { monitor: Monitor }) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 
-	const latestCheck = monitor?.recentChecks?.[0];
+	const recentChecks = monitor?.recentChecks ?? [];
+	const latestCheck = recentChecks[recentChecks.length - 1];
 	// Get data from latest check
 	const physicalCores = getCores(latestCheck?.cpu?.physical_core);
 	const logicalCores = getCores(latestCheck?.cpu?.logical_core);
@@ -21,13 +22,7 @@ export const StatusBoxes = ({ monitor }: { monitor: Monitor }) => {
 	const memoryTotalBytes = latestCheck?.memory?.total_bytes ?? 0;
 	const diskTotalBytes =
 		latestCheck?.disk?.reduce((acc, disk) => acc + (disk.total_bytes || 0), 0) || 0;
-	const os = getOsAndPlatform(latestCheck?.host);
-
-	const platform = latestCheck?.host?.platform ?? undefined;
-	const osPlatform =
-		typeof os === "undefined" && typeof platform === "undefined"
-			? undefined
-			: `${os} ${platform}`;
+	const osPlatform = getOsAndPlatform(latestCheck?.host);
 
 	return (
 		<Stack

client/src/Pages/Infrastructure/Details/Components/TabOverview.tsx

@@ -21,10 +21,11 @@ export const TabOverview = ({
 	}
 
 	const checks = stats?.checks || [];
+	const recentChecks = monitor.recentChecks ?? [];
 	return (
 		<Stack gap={theme.spacing(8)}>
 			<StatusBoxes monitor={monitor} />
-			<InfraDetailsGauges snapshot={monitor.recentChecks?.[0]} />
+			<InfraDetailsGauges snapshot={recentChecks[recentChecks.length - 1]} />
 			<InfraDetailsCharts
 				checks={checks}
 				dateRange={dateRange}

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx

@@ -248,7 +248,8 @@ export const InfraMonitorsTable = ({
 				id: "cpu",
 				content: t("pages.infrastructure.table.headers.cpu"),
 				render: (row) => {
-					const check = row.recentChecks?.[0];
+					const recentChecks = row.recentChecks ?? [];
+					const check = recentChecks[recentChecks.length - 1];
 					const cpuUsage = (check?.cpu?.usage_percent || 0) * 100;
 					return <Gauge progress={cpuUsage} />;
 				},
@@ -257,7 +258,8 @@ export const InfraMonitorsTable = ({
 				id: "memory",
 				content: t("pages.infrastructure.table.headers.memory"),
 				render: (row) => {
-					const check = row.recentChecks?.[0];
+					const recentChecks = row.recentChecks ?? [];
+					const check = recentChecks[recentChecks.length - 1];
 					const memoryUsage = (check?.memory?.usage_percent || 0) * 100;
 					return <Gauge progress={memoryUsage} />;
 				},
@@ -266,7 +268,8 @@ export const InfraMonitorsTable = ({
 				id: "disk",
 				content: t("pages.infrastructure.table.headers.disk"),
 				render: (row) => {
-					const check = row.recentChecks?.[0];
+					const recentChecks = row.recentChecks ?? [];
+					const check = recentChecks[recentChecks.length - 1];
 
 					const totalDiskUsage = check?.disk?.reduce(
 						(acc, disk) => acc + (disk?.usage_percent || 0),

client/src/Pages/Infrastructure/Monitors/index.tsx

@@ -1,274 +1,44 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { MonitorBasePageWithStates, ColoredLabel } from "@/Components/design-elements";
-import { HeaderCreate } from "@/Components/common";
-import {
-	ControlsFilter,
-	HeaderMonitorsSummary,
-	BulkActionsBar,
-} from "@/Components/monitors";
-import { TextField, Dialog, Button } from "@/Components/inputs";
-import { Play, Pause } from "lucide-react";
+import { MonitorListPage } from "@/Components/monitors";
+import { InfraMonitorsTable } from "@/Pages/Infrastructure/Monitors/Components/MonitorsTable";
 
-import { useGet, useDelete } from "@/Hooks/UseApi";
-import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import type { Monitor, MonitorsWithChecksResponse } from "@/Types/Monitor";
-import type { Tag } from "@/Types/Tag";
-import { useTheme } from "@mui/material";
-import { SPACING } from "@/Utils/Theme/constants";
-import { useState, useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { useSelector, useDispatch } from "react-redux";
-import { setRowsPerPage } from "@/Features/UI/uiSlice.js";
-import type { RootState } from "@/Types/state";
-import { InfraMonitorsTable } from "./Components/MonitorsTable";
-import useDebounce from "@/Hooks/useDebounce";
-import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
+import { useMonitorListController } from "@/Hooks/useMonitorListController";
 
 const InfrastructureMonitors = () => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const isAdmin = useIsAdmin();
-	const dispatch = useDispatch();
-
-	// Redux state
-	const rowsPerPage = useSelector(
-		(state: RootState) => state.ui?.infrastructure?.rowsPerPage ?? 5
-	);
-
-	// Local state
-	const [selectedStatus, setSelectedStatus] = useState<string>("");
-	const [selectedState, setSelectedState] = useState<string>("");
-	const [selectedTags, setSelectedTags] = useState<string[]>([]);
-	const [search, setSearch] = useState<string>("");
-	const [page, setPage] = useState<number>(0);
-	const [sortField, setSortField] = useState<string>("");
-	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
-	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
-
-	const { data: tags } = useGet<Tag[]>("/tags/team");
-
-	const isDialogOpen = Boolean(selectedMonitor);
-
-	const debouncedSearch = useDebounce<string>(search, 300);
-
-	const handleClearFilters = useCallback(() => {
-		setSelectedStatus("");
-		setSelectedState("");
-		setSelectedTags([]);
-		setSearch("");
-	}, []);
-
-	// Convert filter selections to API filter values
-	const toFilterStatus = useMemo(() => {
-		if (selectedStatus === "up") return "true";
-		if (selectedStatus === "down") return "false";
-		return undefined;
-	}, [selectedStatus]);
-
-	const toFilterActive = useMemo(() => {
-		if (selectedState === "active") return "true";
-		if (selectedState === "paused") return "false";
-		return undefined;
-	}, [selectedState]);
-
-	// Determine field and filter for the API request
-	// Priority: status > isActive > search
-	const filterLookup = new Map<string | undefined, string>([
-		[toFilterStatus, "status"],
-		[toFilterActive, "isActive"],
-	]);
-	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
-	const field = activeFilter?.[1] || (debouncedSearch ? "name" : sortField || undefined);
-	const filter = activeFilter?.[0] || debouncedSearch || undefined;
-
-	// Build URL for monitors with checks
-	const monitorsWithChecksUrl = useMemo(() => {
-		const params = new URLSearchParams();
-		params.append("type", "hardware");
-		selectedTags.forEach((tagId) => params.append("tags", tagId));
-		params.append("limit", "1");
-		if (page !== undefined) params.append("page", String(page));
-		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
-		if (filter) params.append("filter", filter);
-		if (field) params.append("field", field);
-		if (sortOrder) params.append("order", sortOrder);
-		return `/monitors/team/with-checks?${params.toString()}`;
-	}, [page, rowsPerPage, filter, field, sortOrder, selectedTags]);
-
-	const {
-		data: monitorsWithChecksData,
-		isLoading: monitorsWithChecksLoading,
-		error: monitorsWithChecksError,
-		refetch,
-	} = useGet<MonitorsWithChecksResponse>(
-		monitorsWithChecksUrl,
-		{},
-		{ refreshInterval: 5000, keepPreviousData: true }
-	);
-
-	const { summary, count } = monitorsWithChecksData ?? { summary: null, count: 0 };
-	const isLoading = monitorsWithChecksLoading;
-
-	// Bulk actions
-	const {
-		selectedRows,
-		setSelectedRows,
-		handleBulkPause,
-		handleBulkResume,
-		handleCancelSelection,
-	} = useBulkMonitorActions(refetch, page);
-
-	// Check if any filters are active
-	const hasActiveFilters = Boolean(
-		selectedStatus || selectedState || selectedTags.length > 0 || search
-	);
-
-	// Show empty state only when there are truly no monitors (not just filtered out)
-	const effectiveTotalCount =
-		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
-			? 1
-			: (summary?.totalMonitors ?? 0);
-
-	// Delete hook
-	const { deleteFn, loading: isDeleting } = useDelete();
-
-	const handleConfirm = async () => {
-		if (!selectedMonitor) return;
-		await deleteFn(`/monitors/${selectedMonitor.id}`);
-		setSelectedMonitor(null);
-		refetch();
-	};
-
-	const handleCancel = () => {
-		setSelectedMonitor(null);
-	};
-
+	const c = useMonitorListController({
+		types: ["hardware"],
+		checksLimit: 1,
+		refreshInterval: 5000,
+		rowsPerPageTable: "infrastructure",
+		rowsPerPageDefault: 5,
+	});
 	return (
-		<MonitorBasePageWithStates
+		<MonitorListPage
 			headerKey="infrastructure"
-			loading={isLoading}
-			error={monitorsWithChecksError}
-			totalCount={effectiveTotalCount}
 			page="infrastructure"
 			actionLink="/infrastructure/create"
+			controller={c}
+			bulkActions
+			showTypeFilter={false}
+			summaryProps={{ showBreached: true }}
 		>
-			<HeaderCreate
-				path="/infrastructure/create"
-				isLoading={isLoading}
-				isAdmin={isAdmin}
-			/>
-			<HeaderMonitorsSummary
-				summary={summary}
-				showBreached={true}
-			/>
-			<Stack
-				direction={isSmall ? "column" : "row"}
-				justifyContent={isSmall ? "flex-start" : "space-between"}
-				gap={theme.spacing(4)}
-			>
-				<ControlsFilter
-					showTypes={false}
-					selectedStatus={selectedStatus}
-					setSelectedStatus={setSelectedStatus}
-					selectedState={selectedState}
-					setSelectedState={setSelectedState}
-					tagOptions={tags ?? []}
-					selectedTags={selectedTags}
-					setSelectedTags={setSelectedTags}
-					onClearFilters={handleClearFilters}
-				/>
-				<TextField
-					placeholder={t("pages.uptime.filters.search.placeholder")}
-					value={search}
-					onChange={(event) => {
-						setSearch(event.target.value);
-					}}
-				/>
-			</Stack>
-
-			{selectedTags.length > 0 && (
-				<Stack
-					direction={isSmall ? "column" : "row"}
-					alignItems={isSmall ? "flex-start" : "center"}
-					flexWrap="wrap"
-					gap={theme.spacing(SPACING.XL)}
-				>
-					<Typography color={theme.palette.text.secondary}>
-						{t("pages.uptime.filters.activeTags")}
-					</Typography>
-					{selectedTags.map((tagId) => {
-						const tag = tags?.find((t) => t.id === tagId);
-						if (!tag) return null;
-						return (
-							<ColoredLabel
-								key={tag.id}
-								text={tag.name}
-								color={tag.color}
-							/>
-						);
-					})}
-				</Stack>
-			)}
-
-			{!isLoading && (
-				<BulkActionsBar
-					selectedCount={selectedRows.length}
-					onCancel={handleCancelSelection}
-				>
-					<Button
-						size="small"
-						startIcon={<Play size={16} />}
-						onClick={handleBulkResume}
-					>
-						{t("common.buttons.resume")}
-					</Button>
-					<Button
-						size="small"
-						startIcon={<Pause size={16} />}
-						onClick={handleBulkPause}
-					>
-						{t("common.buttons.pause")}
-					</Button>
-				</BulkActionsBar>
-			)}
-
 			<InfraMonitorsTable
-				monitors={monitorsWithChecksData?.monitors || []}
-				tags={tags ?? []}
-				refetch={refetch}
-				setSelectedMonitor={setSelectedMonitor}
-				sortField={sortField}
-				setSortField={setSortField}
-				sortOrder={sortOrder}
-				setSortOrder={setSortOrder}
-				count={count || 0}
-				page={page}
-				setPage={setPage}
-				rowsPerPage={rowsPerPage}
-				setRowsPerPage={(value: number) => {
-					dispatch(
-						setRowsPerPage({
-							value,
-							table: "infrastructure",
-						})
-					);
-					setPage(0);
-				}}
-				selectedRows={selectedRows}
-				onSelectionChange={setSelectedRows}
+				monitors={c.monitors || []}
+				tags={c.tags || []}
+				refetch={c.refetch}
+				setSelectedMonitor={c.setSelectedMonitor}
+				count={c.count || 0}
+				page={c.page}
+				setPage={c.setPage}
+				rowsPerPage={c.rowsPerPage}
+				sortField={c.sortField}
+				setSortField={c.setSortField}
+				sortOrder={c.sortOrder}
+				setSortOrder={c.setSortOrder}
+				setRowsPerPage={c.handleSetRowsPerPage}
+				selectedRows={c.selectedRows}
+				onSelectionChange={c.setSelectedRows}
 			/>
-			<Dialog
-				open={isDialogOpen}
-				title={t("common.dialogs.delete.title")}
-				content={t("common.dialogs.delete.description")}
-				onConfirm={handleConfirm}
-				onCancel={handleCancel}
-				loading={isDeleting}
-			/>
-		</MonitorBasePageWithStates>
+		</MonitorListPage>
 	);
 };
 

client/src/Pages/Logs/components/Stats.tsx

@@ -2,10 +2,10 @@ import Box from "@mui/material/Box";
 import { StatBox } from "@/Components/design-elements";
 
 import prettyBytes from "pretty-bytes";
-import prettyMilliseconds from "pretty-ms";
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import type { Diagnostics } from "@/Types/Diagnostics";
+import { formatDuration, formatMs } from "@/Utils/TimeUtils";
 
 interface StatsProps {
 	diagnostics: Diagnostics | null;
@@ -18,13 +18,9 @@ export const Stats = ({ diagnostics }: StatsProps) => {
 	const theme = useTheme();
 
 	const eventLoopDelay = diagnostics
-		? prettyMilliseconds(diagnostics.eventLoopDelayMs ?? 0, {
-				millisecondsDecimalDigits: 2,
-			})
-		: PLACEHOLDER;
-	const uptime = diagnostics
-		? prettyMilliseconds(diagnostics.uptimeMs ?? 0, { hideSeconds: true })
+		? formatMs(diagnostics.eventLoopDelayMs ?? 0)
 		: PLACEHOLDER;
+	const uptime = diagnostics ? formatDuration(diagnostics.uptimeMs ?? 0) : PLACEHOLDER;
 	const usedHeap = diagnostics
 		? prettyBytes(diagnostics.v8HeapStats?.usedHeapSizeBytes ?? 0)
 		: PLACEHOLDER;
@@ -37,10 +33,10 @@ export const Stats = ({ diagnostics }: StatsProps) => {
 
 	return (
 		<Box
+			display="grid"
+			gap={theme.spacing(8)}
 			sx={{
-				display: "grid",
 				gridTemplateColumns: { xs: "1fr", md: "repeat(5, 1fr)" },
-				gap: theme.spacing(8),
 				"& > *": { width: "100% !important" },
 			}}
 		>

client/src/Pages/Logs/components/TableJobs.tsx

@@ -1,7 +1,6 @@
 import { Table, Pagination } from "@/Components/design-elements";
 import { Typography, useTheme } from "@mui/material";
-import prettyMilliseconds from "pretty-ms";
-import { formatTimestamp } from "@/Utils/TimeUtils";
+import { formatDuration, formatTimestamp } from "@/Utils/TimeUtils";
 
 import { useTranslation } from "react-i18next";
 import type { QueueJobFailure, QueueJobSummary, QueueMetrics } from "@/Types/Queue";
@@ -84,7 +83,7 @@ export const TableJobs = ({
 			id: "interval",
 			content: t("common.table.headers.interval"),
 			render: (row) => (
-				<Typography sx={cellSx}>{prettyMilliseconds(row.monitorInterval ?? 0)}</Typography>
+				<Typography sx={cellSx}>{formatDuration(row.monitorInterval ?? 0)}</Typography>
 			),
 		},
 		{

client/src/Pages/Maintenance/MaintenanceWindowTable.tsx

@@ -4,7 +4,6 @@ import { Pagination } from "@/Components/design-elements/Table";
 import { ActionsMenu } from "@/Components/actions-menu";
 import { DialogInput } from "@/Components/inputs/Dialog";
 
-import prettyMilliseconds from "pretty-ms";
 import { useTheme } from "@mui/material";
 import type { Header } from "@/Components/design-elements/Table";
 import type { ActionMenuItem } from "@/Components/actions-menu";
@@ -18,6 +17,7 @@ import { setRowsPerPage } from "@/Features/UI/uiSlice";
 import dayjs from "dayjs";
 import { useState } from "react";
 import { useDelete, usePatch } from "@/Hooks/UseApi";
+import { formatDuration } from "@/Utils/TimeUtils";
 
 interface MaintenanceWindowTableProps {
 	maintenanceWindows: MaintenanceWindow[];
@@ -51,7 +51,7 @@ const getTimeToNextWindow = (
 
 	// Window is in the future
 	if (start.isAfter(now)) {
-		return prettyMilliseconds(start.diff(now), { unitCount: 2, hideSeconds: true });
+		return formatDuration(start.diff(now));
 	}
 
 	return "N/A";
@@ -152,9 +152,7 @@ export const MaintenanceWindowTable = ({
 			id: "repeat",
 			content: t("pages.maintenanceWindow.table.headers.repeat"),
 			render: (row) =>
-				row.repeat === 0
-					? t("common.labels.na")
-					: prettyMilliseconds(row.repeat, { verbose: true }),
+				row.repeat === 0 ? t("common.labels.na") : formatDuration(row.repeat),
 		},
 		{
 			id: "actions",

client/src/Pages/Maintenance/create/index.tsx

@@ -1,18 +1,8 @@
 import Stack from "@mui/material/Stack";
-import MenuItem from "@mui/material/MenuItem";
 import { logger } from "@/Utils/logger";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
 import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 import { BasePage, ConfigBox } from "@/Components/design-elements";
-import {
-	TextField,
-	Select,
-	DatePicker,
-	TimePicker,
-	Button,
-	Autocomplete,
-} from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
@@ -25,10 +15,17 @@ import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
 import { mutate } from "swr";
 import { useParams, useNavigate } from "react-router-dom";
 import type { Monitor } from "@/Types/Monitor";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { useEffect } from "react";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
-import { Trash2 } from "lucide-react";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
+import {
+	FormDatePickerField,
+	FormTimePickerField,
+} from "@/Components/inputs/forms/FormDateTimePickerField";
+import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
+import { FormNumberField } from "@/Components/inputs/forms/FormNumberField";
 
 const CreateMaintenanceWindowPage = () => {
 	const theme = useTheme();
@@ -57,7 +54,7 @@ const CreateMaintenanceWindowPage = () => {
 		defaultValues: defaults,
 	});
 
-	const { control, handleSubmit, trigger } = form;
+	const { handleSubmit, trigger } = form;
 	useEffect(() => {
 		if (existingMaintenanceWindow) {
 			form.reset(defaults);
@@ -114,255 +111,117 @@ const CreateMaintenanceWindowPage = () => {
 	};
 
 	return (
-		<BasePage
-			component={"form"}
-			onSubmit={handleSubmit(onSubmit, onError)}
-		>
-			<ConfigBox
-				title={t("pages.maintenanceWindow.form.general.title")}
-				subtitle={t("pages.maintenanceWindow.form.general.description")}
-				rightContent={
-					<Stack spacing={theme.spacing(LAYOUT.MD)}>
-						<Controller
-							name="name"
-							control={control}
-							defaultValue={defaults.name}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									type="text"
-									fieldLabel={t("pages.maintenanceWindow.form.general.option.name.label")}
-									placeholder={t(
-										"pages.maintenanceWindow.form.general.option.name.placeholder"
-									)}
-									fullWidth
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message ?? ""}
-								/>
-							)}
-						/>
-						<Controller
-							name="repeat"
-							control={control}
-							defaultValue={defaults.repeat}
-							render={({ field, fieldState }) => (
-								<Select
-									value={field.value}
-									fieldLabel={t(
-										"pages.maintenanceWindow.form.general.option.repeat.label"
-									)}
-									error={!!fieldState.error}
-									onChange={field.onChange}
-								>
-									{repeatOptions.map((option) => (
-										<MenuItem
-											key={option.id}
-											value={option.id}
-										>
-											<Typography>{option.name}</Typography>
-										</MenuItem>
-									))}
-								</Select>
-							)}
-						/>
-					</Stack>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.maintenanceWindow.form.startDate.title")}
-				subtitle={t("pages.maintenanceWindow.form.startDate.description")}
-				rightContent={
-					<Stack spacing={theme.spacing(LAYOUT.MD)}>
-						<Controller
-							name="startDate"
-							control={control}
-							defaultValue={defaults.startDate}
-							render={({ field, fieldState }) => (
-								<DatePicker
-									fieldLabel={t(
-										"pages.maintenanceWindow.form.startDate.option.startDate.label"
-									)}
-									value={field.value ? dayjs(field.value, "YYYY-MM-DD") : null}
-									onChange={(date) => {
-										field.onChange(date ? date.format("YYYY-MM-DD") : "");
-										trigger("startDate");
-									}}
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message}
-								/>
-							)}
-						/>
-					</Stack>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.maintenanceWindow.form.startTime.title")}
-				subtitle={t("pages.maintenanceWindow.form.startTime.description")}
-				rightContent={
-					<Stack spacing={theme.spacing(LAYOUT.MD)}>
-						<Controller
-							name="startTime"
-							control={control}
-							defaultValue={defaults.startTime}
-							render={({ field }) => (
-								<TimePicker
-									fieldLabel={t(
-										"pages.maintenanceWindow.form.startTime.option.startTime.label"
-									)}
-									value={field.value ? dayjs(field.value, "HH:mm") : null}
-									onChange={(time) => {
-										field.onChange(time ? time.format("HH:mm") : "");
-										trigger("startDate");
-									}}
-								/>
-							)}
-						/>
-						<Stack
-							direction="row"
-							alignItems="flex-start"
-							spacing={theme.spacing(LAYOUT.MD)}
-						>
-							<Controller
-								name="duration"
-								control={control}
-								defaultValue={defaults.duration}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="number"
-										fieldLabel={t(
-											"pages.maintenanceWindow.form.startTime.option.duration.label"
-										)}
-										value={field.value === 0 ? "" : field.value}
-										onChange={(e) => {
-											const val = e.target.value;
-											field.onChange(val === "" ? 0 : Number(val));
-										}}
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-										sx={{ width: 120 }}
-									/>
+		<FormProvider {...form}>
+			<BasePage
+				component={"form"}
+				onSubmit={handleSubmit(onSubmit, onError)}
+			>
+				<ConfigBox
+					title={t("pages.maintenanceWindow.form.general.title")}
+					subtitle={t("pages.maintenanceWindow.form.general.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
+							<FormTextField
+								name="name"
+								fieldLabel={t("pages.maintenanceWindow.form.general.option.name.label")}
+								placeholder={t(
+									"pages.maintenanceWindow.form.general.option.name.placeholder"
 								)}
 							/>
-							<Controller
-								name="durationUnit"
-								control={control}
-								defaultValue={defaults.durationUnit}
-								render={({ field }) => (
-									<Select
-										fieldLabel=" "
-										value={field.value}
-										onChange={field.onChange}
-										sx={{ minWidth: 120 }}
-									>
-										{durationUnitOptions.map((option) => (
-											<MenuItem
-												key={option.id}
-												value={option.id}
-											>
-												<Typography>{option.name}</Typography>
-											</MenuItem>
-										))}
-									</Select>
-								)}
+							<FormSelectField
+								name="repeat"
+								fieldLabel={t("pages.maintenanceWindow.form.general.option.repeat.label")}
+								options={repeatOptions.map((option) => ({
+									value: option.id,
+									label: option.name,
+								}))}
 							/>
 						</Stack>
-					</Stack>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.maintenanceWindow.form.startTime.monitors.title")}
-				subtitle={t("pages.maintenanceWindow.form.startTime.monitors.description")}
-				rightContent={
-					<Controller
-						name="monitors"
-						control={control}
-						defaultValue={defaults.monitors}
-						render={({ field, fieldState }) => {
-							const monitorsList = monitors ?? [];
-							const selectedMonitors = field.value
-								.map((id: string) => monitorsList.find((m) => m.id === id))
-								.filter((m): m is Monitor => m !== undefined);
-
-							return (
-								<Stack spacing={theme.spacing(LAYOUT.MD)}>
-									<Autocomplete
-										multiple
-										options={monitorsList}
-										getOptionLabel={(option: Monitor) => option.name}
-										value={selectedMonitors}
-										onChange={(_, newValue) => {
-											field.onChange(newValue.map((m: Monitor) => m.id));
-										}}
-										fieldLabel={t(
-											"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
-										)}
-										renderInput={(params) => (
-											<TextField
-												{...params}
-												placeholder={
-													selectedMonitors.length === 0
-														? t(
-																"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
-															)
-														: ""
-												}
-												error={!!fieldState.error}
-												helperText={fieldState.error?.message}
-											/>
-										)}
-									/>
-									{selectedMonitors.length > 0 && (
-										<Stack>
-											{selectedMonitors.map((monitor) => (
-												<Stack
-													key={monitor.id}
-													direction="row"
-													alignItems="center"
-													padding={theme.spacing(LAYOUT.XS)}
-													marginTop={theme.spacing(SPACING.LG)}
-													borderRadius={1}
-													sx={{
-														border: `1px solid ${theme.palette.divider}`,
-													}}
-												>
-													<Typography flexGrow={1}>{monitor.name}</Typography>
-													<IconButton
-														size="small"
-														onClick={() => {
-															field.onChange(
-																field.value.filter((id: string) => id !== monitor.id)
-															);
-														}}
-														aria-label="Remove monitor"
-													>
-														<Trash2 size={16} />
-													</IconButton>
-												</Stack>
-											))}
-										</Stack>
+					}
+				/>
+				<ConfigBox
+					title={t("pages.maintenanceWindow.form.startDate.title")}
+					subtitle={t("pages.maintenanceWindow.form.startDate.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
+							<FormDatePickerField
+								name="startDate"
+								fieldLabel={t(
+									"pages.maintenanceWindow.form.startDate.option.startDate.label"
+								)}
+								onValueChange={() => trigger("startDate")}
+							/>
+						</Stack>
+					}
+				/>
+				<ConfigBox
+					title={t("pages.maintenanceWindow.form.startTime.title")}
+					subtitle={t("pages.maintenanceWindow.form.startTime.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
+							<FormTimePickerField
+								name="startTime"
+								fieldLabel={t(
+									"pages.maintenanceWindow.form.startTime.option.startTime.label"
+								)}
+								onValueChange={() => trigger("startDate")}
+							/>
+							<Stack
+								direction="row"
+								alignItems="flex-start"
+								spacing={theme.spacing(LAYOUT.MD)}
+							>
+								<FormNumberField
+									name="duration"
+									fieldLabel={t(
+										"pages.maintenanceWindow.form.startTime.option.duration.label"
 									)}
-								</Stack>
-							);
-						}}
-					/>
-				}
-			/>
-			<Stack
-				direction="row"
-				justifyContent="flex-end"
-				spacing={theme.spacing(SPACING.LG)}
-			>
-				<Button
-					loading={isLoading}
-					type="submit"
-					variant="contained"
-					color="primary"
+									sx={{ width: 120 }}
+								/>
+								<FormSelectField
+									name="durationUnit"
+									fieldLabel={" "}
+									options={durationUnitOptions.map((option) => ({
+										value: option.id,
+										label: option.name,
+									}))}
+								/>
+							</Stack>
+						</Stack>
+					}
+				/>
+				<ConfigBox
+					title={t("pages.maintenanceWindow.form.startTime.monitors.title")}
+					subtitle={t("pages.maintenanceWindow.form.startTime.monitors.description")}
+					rightContent={
+						<FormMultiSelectField
+							name="monitors"
+							fieldLabel={t(
+								"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
+							)}
+							placeholder={t(
+								"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
+							)}
+							options={monitors ?? []}
+						/>
+					}
+				/>
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+					spacing={theme.spacing(SPACING.LG)}
 				>
-					{t("common.buttons.save")}
-				</Button>
-			</Stack>
-		</BasePage>
+					<Button
+						loading={isLoading}
+						type="submit"
+						variant="contained"
+						color="primary"
+					>
+						{t("common.buttons.save")}
+					</Button>
+				</Stack>
+			</BasePage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Notifications/create/index.tsx

@@ -1,14 +1,12 @@
 import { BasePage, ConfigBox } from "@/Components/design-elements";
-import { TextField, Select, Button } from "@/Components/inputs";
-import MenuItem from "@mui/material/MenuItem";
-import Typography from "@mui/material/Typography";
+import { Button } from "@/Components/inputs";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 
 import { useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
-import { Controller, useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
 import { useNotificationForm } from "@/Hooks/useNotificationForm";
@@ -16,6 +14,8 @@ import type { NotificationFormData } from "@/Validation/notifications";
 import type { Notification } from "@/Types/Notification";
 import { useTranslation } from "react-i18next";
 import { NotificationChannels } from "@/Types/Notification";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
 
 const NotificationsCreatePage = () => {
 	const { t } = useTranslation();
@@ -39,7 +39,7 @@ const NotificationsCreatePage = () => {
 		defaultValues: defaults,
 	});
 
-	const { control, watch, reset, handleSubmit, clearErrors, trigger, getValues } = form;
+	const { watch, reset, handleSubmit, clearErrors, trigger, getValues } = form;
 
 	useEffect(() => {
 		reset(defaults);
@@ -93,384 +93,195 @@ const NotificationsCreatePage = () => {
 	};
 
 	return (
-		<BasePage
-			component="form"
-			onSubmit={handleSubmit(onSubmit)}
-		>
-			<ConfigBox
-				title={t("pages.notifications.form.notificationName.title")}
-				subtitle={t("pages.notifications.form.notificationName.description")}
-				rightContent={
-					<Controller
-						name="notificationName"
-						control={control}
-						defaultValue={defaults.notificationName}
-						render={({ field, fieldState }) => (
-							<TextField
-								{...field}
-								type="text"
-								fieldLabel={t("pages.notifications.form.notificationName.optionName")}
-								placeholder={t("pages.notifications.form.notificationName.placeholder")}
-								fullWidth
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-							/>
-						)}
-					/>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.notifications.form.type.title")}
-				subtitle={t("pages.notifications.form.type.description")}
-				rightContent={
-					<Controller
-						name="type"
-						control={control}
-						defaultValue={defaults.type}
-						render={({ field, fieldState }) => (
-							<Select
-								value={field.value}
-								fieldLabel={t("pages.notifications.form.type.optionType")}
-								error={!!fieldState.error}
-								onChange={field.onChange}
-							>
-								{NotificationChannels.map((type: string) => (
-									<MenuItem
-										key={type}
-										value={type}
-									>
-										<Typography textTransform="capitalize">{type}</Typography>
-									</MenuItem>
-								))}
-							</Select>
-						)}
-					/>
-				}
-			/>
-			{watchedType !== "matrix" &&
-				watchedType !== "telegram" &&
-				watchedType !== "pushover" &&
-				watchedType !== "twilio" &&
-				watchedType !== "ntfy" && (
+		<FormProvider {...form}>
+			<BasePage
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
+			>
+				<ConfigBox
+					title={t("pages.notifications.form.notificationName.title")}
+					subtitle={t("pages.notifications.form.notificationName.description")}
+					rightContent={
+						<FormTextField
+							name="notificationName"
+							fieldLabel={t("pages.notifications.form.notificationName.optionName")}
+							placeholder={t("pages.notifications.form.notificationName.placeholder")}
+						/>
+					}
+				/>
+				<ConfigBox
+					title={t("pages.notifications.form.type.title")}
+					subtitle={t("pages.notifications.form.type.description")}
+					rightContent={
+						<FormSelectField
+							name="type"
+							fieldLabel={t("pages.notifications.form.type.optionType")}
+							options={NotificationChannels.map((channel) => ({
+								value: channel,
+								label: t(`pages.notifications.form.type.value.${channel}`),
+							}))}
+						/>
+					}
+				/>
+				{watchedType !== "matrix" &&
+					watchedType !== "telegram" &&
+					watchedType !== "pushover" &&
+					watchedType !== "twilio" &&
+					watchedType !== "ntfy" && (
+						<ConfigBox
+							title={addressConfig.title}
+							subtitle={addressConfig.description}
+							rightContent={
+								<FormTextField
+									name="address"
+									fieldLabel={addressConfig.fieldLabel}
+									placeholder={addressConfig.placeholder}
+								/>
+							}
+						/>
+					)}
+				{watchedType === "ntfy" && (
 					<ConfigBox
-						title={addressConfig.title}
-						subtitle={addressConfig.description}
+						title={t("pages.notifications.form.ntfy.title")}
+						subtitle={t("pages.notifications.form.ntfy.description")}
 						rightContent={
-							<Controller
-								name="address"
-								control={control}
-								defaultValue={"address" in defaults ? defaults.address : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={addressConfig.fieldLabel}
-										placeholder={addressConfig.placeholder}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
+							<Stack spacing={theme.spacing(8)}>
+								<FormTextField
+									name="address"
+									fieldLabel={t("pages.notifications.form.ntfy.optionServerUrl")}
+									placeholder={t("pages.notifications.form.ntfy.placeholderServerUrl")}
+								/>
+								<FormTextField
+									name="topic"
+									fieldLabel={t("pages.notifications.form.ntfy.optionTopic")}
+									placeholder={t("pages.notifications.form.ntfy.placeholderTopic")}
+								/>
+							</Stack>
 						}
 					/>
 				)}
-			{watchedType === "ntfy" && (
-				<ConfigBox
-					title={t("pages.notifications.form.ntfy.title")}
-					subtitle={t("pages.notifications.form.ntfy.description")}
-					rightContent={
-						<Stack spacing={theme.spacing(8)}>
-							<Controller
-								name="address"
-								control={control}
-								defaultValue={"address" in defaults ? defaults.address : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.ntfy.optionServerUrl")}
-										placeholder={t("pages.notifications.form.ntfy.placeholderServerUrl")}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-							<Controller
-								name="topic"
-								control={control}
-								defaultValue={"topic" in defaults ? defaults.topic : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.ntfy.optionTopic")}
-										placeholder={t("pages.notifications.form.ntfy.placeholderTopic")}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-						</Stack>
-					}
-				/>
-			)}
-			{watchedType === "telegram" && (
-				<ConfigBox
-					title={t("pages.notifications.form.telegram.title")}
-					subtitle={t("pages.notifications.form.telegram.description")}
-					rightContent={
-						<Stack spacing={theme.spacing(8)}>
-							<Controller
-								name="accessToken"
-								control={control}
-								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.telegram.optionBotToken")}
-										placeholder={t(
-											"pages.notifications.form.telegram.placeholderBotToken"
-										)}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-							<Controller
-								name="address"
-								control={control}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.telegram.optionChatId")}
-										placeholder={t("pages.notifications.form.telegram.placeholderChatId")}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-						</Stack>
-					}
-				/>
-			)}
-			{watchedType === "pushover" && (
-				<ConfigBox
-					title={t("pages.notifications.form.pushover.title")}
-					subtitle={t("pages.notifications.form.pushover.description")}
-					rightContent={
-						<Stack spacing={theme.spacing(8)}>
-							<Controller
-								name="accessToken"
-								control={control}
-								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.pushover.optionAppToken")}
-										placeholder={t(
-											"pages.notifications.form.pushover.placeholderAppToken"
-										)}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-							<Controller
-								name="address"
-								control={control}
-								defaultValue={"address" in defaults ? defaults.address : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.pushover.optionUserKey")}
-										placeholder={t(
-											"pages.notifications.form.pushover.placeholderUserKey"
-										)}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-						</Stack>
-					}
-				/>
-			)}
-			{watchedType === "twilio" && (
-				<ConfigBox
-					title={t("pages.notifications.form.twilio.title")}
-					subtitle={t("pages.notifications.form.twilio.description")}
-					rightContent={
-						<Stack spacing={theme.spacing(8)}>
-							<Controller
-								name="accountSid"
-								control={control}
-								defaultValue={"accountSid" in defaults ? defaults.accountSid : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.twilio.optionAccountSid")}
-										placeholder={t(
-											"pages.notifications.form.twilio.placeholderAccountSid"
-										)}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-							<Controller
-								name="accessToken"
-								control={control}
-								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.twilio.optionAuthToken")}
-										placeholder={t(
-											"pages.notifications.form.twilio.placeholderAuthToken"
-										)}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-							<Controller
-								name="twilioPhoneNumber"
-								control={control}
-								defaultValue={
-									"twilioPhoneNumber" in defaults ? defaults.twilioPhoneNumber : ""
-								}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.twilio.optionFromNumber")}
-										placeholder={t(
-											"pages.notifications.form.twilio.placeholderFromNumber"
-										)}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-							<Controller
-								name="phone"
-								control={control}
-								defaultValue={"phone" in defaults ? defaults.phone : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.twilio.optionToNumber")}
-										placeholder={t("pages.notifications.form.twilio.placeholderToNumber")}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-						</Stack>
-					}
-				/>
-			)}
-			{watchedType === "matrix" && (
-				<ConfigBox
-					title={t("pages.notifications.form.matrix.title")}
-					subtitle={t("pages.notifications.form.matrix.description")}
-					rightContent={
-						<Stack spacing={theme.spacing(8)}>
-							<Controller
-								name="homeserverUrl"
-								control={control}
-								defaultValue={"homeserverUrl" in defaults ? defaults.homeserverUrl : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.homeServer.optionHomeServer")}
-										placeholder={t("pages.notifications.form.homeServer.placeholder")}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-							<Controller
-								name="roomId"
-								control={control}
-								defaultValue={"roomId" in defaults ? defaults.roomId : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t("pages.notifications.form.roomId.optionRoomId")}
-										placeholder={t("pages.notifications.form.roomId.placeholder")}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-							<Controller
-								name="accessToken"
-								control={control}
-								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										type="text"
-										fieldLabel={t(
-											"pages.notifications.form.accessToken.optionAccessToken"
-										)}
-										placeholder={t("pages.notifications.form.accessToken.placeholder")}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-						</Stack>
-					}
-				/>
-			)}
-			<Stack
-				direction="row"
-				justifyContent="flex-end"
-				spacing={theme.spacing(2)}
-			>
-				<Button
-					variant="contained"
-					color="primary"
-					onClick={handleTest}
-					loading={isTesting}
+				{watchedType === "telegram" && (
+					<ConfigBox
+						title={t("pages.notifications.form.telegram.title")}
+						subtitle={t("pages.notifications.form.telegram.description")}
+						rightContent={
+							<Stack spacing={theme.spacing(8)}>
+								<FormTextField
+									name="accessToken"
+									fieldLabel={t("pages.notifications.form.telegram.optionBotToken")}
+									placeholder={t("pages.notifications.form.telegram.placeholderBotToken")}
+								/>
+								<FormTextField
+									name="address"
+									fieldLabel={t("pages.notifications.form.telegram.optionChatId")}
+									placeholder={t("pages.notifications.form.telegram.placeholderChatId")}
+								/>
+							</Stack>
+						}
+					/>
+				)}
+				{watchedType === "pushover" && (
+					<ConfigBox
+						title={t("pages.notifications.form.pushover.title")}
+						subtitle={t("pages.notifications.form.pushover.description")}
+						rightContent={
+							<Stack spacing={theme.spacing(8)}>
+								<FormTextField
+									name="accessToken"
+									fieldLabel={t("pages.notifications.form.pushover.optionAppToken")}
+									placeholder={t("pages.notifications.form.pushover.placeholderAppToken")}
+								/>
+
+								<FormTextField
+									name="address"
+									fieldLabel={t("pages.notifications.form.pushover.optionUserKey")}
+									placeholder={t("pages.notifications.form.pushover.placeholderUserKey")}
+								/>
+							</Stack>
+						}
+					/>
+				)}
+				{watchedType === "twilio" && (
+					<ConfigBox
+						title={t("pages.notifications.form.twilio.title")}
+						subtitle={t("pages.notifications.form.twilio.description")}
+						rightContent={
+							<Stack spacing={theme.spacing(8)}>
+								<FormTextField
+									name="accountSid"
+									fieldLabel={t("pages.notifications.form.twilio.optionAccountSid")}
+									placeholder={t("pages.notifications.form.twilio.placeholderAccountSid")}
+								/>
+								<FormTextField
+									name="accessToken"
+									fieldLabel={t("pages.notifications.form.twilio.optionAuthToken")}
+									placeholder={t("pages.notifications.form.twilio.placeholderAuthToken")}
+								/>
+
+								<FormTextField
+									name="twilioPhoneNumber"
+									fieldLabel={t("pages.notifications.form.twilio.optionFromNumber")}
+									placeholder={t("pages.notifications.form.twilio.placeholderFromNumber")}
+								/>
+
+								<FormTextField
+									name="phone"
+									fieldLabel={t("pages.notifications.form.twilio.optionToNumber")}
+									placeholder={t("pages.notifications.form.twilio.placeholderToNumber")}
+								/>
+							</Stack>
+						}
+					/>
+				)}
+				{watchedType === "matrix" && (
+					<ConfigBox
+						title={t("pages.notifications.form.matrix.title")}
+						subtitle={t("pages.notifications.form.matrix.description")}
+						rightContent={
+							<Stack spacing={theme.spacing(8)}>
+								<FormTextField
+									name="homeserverUrl"
+									fieldLabel={t("pages.notifications.form.homeServer.optionHomeServer")}
+									placeholder={t("pages.notifications.form.homeServer.placeholder")}
+								/>
+								<FormTextField
+									name="roomId"
+									fieldLabel={t("pages.notifications.form.roomId.optionRoomId")}
+									placeholder={t("pages.notifications.form.roomId.placeholder")}
+								/>
+								<FormTextField
+									name="accessToken"
+									fieldLabel={t("pages.notifications.form.accessToken.optionAccessToken")}
+									placeholder={t("pages.notifications.form.accessToken.placeholder")}
+								/>
+							</Stack>
+						}
+					/>
+				)}
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+					spacing={theme.spacing(2)}
 				>
-					{t("common.buttons.test")}
-				</Button>
-				<Button
-					loading={isSubmitting || isPatching}
-					type="submit"
-					variant="contained"
-					color="primary"
-				>
-					{t("common.buttons.save")}
-				</Button>
-			</Stack>
-		</BasePage>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={handleTest}
+						loading={isTesting}
+					>
+						{t("common.buttons.test")}
+					</Button>
+					<Button
+						loading={isSubmitting || isPatching}
+						type="submit"
+						variant="contained"
+						color="primary"
+					>
+						{t("common.buttons.save")}
+					</Button>
+				</Stack>
+			</BasePage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/PageSpeed/Details/index.tsx

@@ -45,6 +45,8 @@ const PageSpeedDetails = () => {
 	const monitor = monitorData?.monitorData?.monitor;
 	const groupedChecks = monitorData?.monitorData?.groupedChecks || [];
 	const monitorStats = monitorData?.monitorStats || null;
+	const recentChecks = monitor?.recentChecks ?? [];
+	const latestCheck = recentChecks[recentChecks.length - 1];
 
 	return (
 		<BasePage
@@ -75,8 +77,8 @@ const PageSpeedDetails = () => {
 				direction={{ xs: "column", md: "row" }}
 				gap={theme.spacing(10)}
 			>
-				<PiePageSpeed latestCheck={monitor?.recentChecks?.[0]} />
-				<PiePageSpeedLegend latestCheck={monitor?.recentChecks?.[0]} />
+				<PiePageSpeed latestCheck={latestCheck} />
+				<PiePageSpeedLegend latestCheck={latestCheck} />
 			</Stack>
 		</BasePage>
 	);

client/src/Pages/PageSpeed/Monitors/index.tsx

@@ -1,229 +1,57 @@
-import {
-	MonitorBasePageWithStates,
-	PageSpeedKeyPriorityFallback,
-	ColoredLabel,
-} from "@/Components/design-elements";
-import { Dialog, TextField } from "@/Components/inputs";
-import { HeaderCreate } from "@/Components/common";
+import { PageSpeedKeyPriorityFallback } from "@/Components/design-elements";
 import { PageSpeedMonitorsTable } from "@/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable";
-import type { Monitor } from "@/Types/Monitor";
-import type { Tag } from "@/Types/Tag";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material";
-import { SPACING } from "@/Utils/Theme/constants";
-
-import { useTranslation } from "react-i18next";
-import { useCallback, useMemo, useState } from "react";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import { useGet, useDelete } from "@/Hooks/UseApi";
-import useDebounce from "@/Hooks/useDebounce";
-import type { MonitorsWithChecksResponse } from "@/Types/Monitor";
+import { useGet } from "@/Hooks/UseApi";
 import type { AppSettingsResponse } from "@/Types/Settings";
-import { ControlsFilter, HeaderMonitorsSummary } from "@/Components/monitors";
+import { MonitorListPage } from "@/Components/monitors";
+import { useMonitorListController } from "@/Hooks/useMonitorListController";
 
 const PageSpeedMonitorsPage = () => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isAdmin = useIsAdmin();
-	const { deleteFn, loading: isDeleting } = useDelete();
-
-	const settingsUrl = "/settings";
 	const {
 		data: settingsData,
 		isLoading: settingsIsLoading,
 		error: settingsError,
-	} = useGet<AppSettingsResponse>(settingsUrl);
+	} = useGet<AppSettingsResponse>("/settings");
 
-	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
-	const isDialogOpen = Boolean(selectedMonitor);
-	const [sortField, setSortField] = useState<string>("name");
-	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
-	const [page, setPage] = useState(0);
-	const [rowsPerPage, setRowsPerPage] = useState(10);
-	const [selectedTags, setSelectedTags] = useState<string[]>([]);
-	const [selectedStatus, setSelectedStatus] = useState<string>("");
-	const [selectedState, setSelectedState] = useState<string>("");
-	const [search, setSearch] = useState<string>("");
-
-	const debouncedSearch = useDebounce<string>(search, 300);
-
-	// Status: pass "up"/"down" directly to the API
-	// State: "active" -> true, "paused" -> false
-	const toFilterStatus = useMemo(() => {
-		if (selectedStatus === "up") return "up";
-		if (selectedStatus === "down") return "down";
-		return undefined;
-	}, [selectedStatus]);
-
-	const toFilterActive = useMemo(() => {
-		if (selectedState === "active") return "true";
-		if (selectedState === "paused") return "false";
-		return undefined;
-	}, [selectedState]);
-
-	// Priority: status > isActive > search > sort
-	const filterLookup = new Map<string | undefined, string>([
-		[toFilterStatus, "status"],
-		[toFilterActive, "isActive"],
-	]);
-	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
-	const field = activeFilter?.[1] || (debouncedSearch ? "name" : sortField || undefined);
-	const filter = activeFilter?.[0] || debouncedSearch;
-
-	const { data: tags } = useGet<Tag[]>("/tags/team");
-
-	const monitorsWithChecksUrl = useMemo(() => {
-		const params = new URLSearchParams();
-		params.append("type", "pagespeed");
-		selectedTags.forEach((tagId) => params.append("tags", tagId));
-		params.append("limit", "25");
-		if (page !== undefined) params.append("page", String(page));
-		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
-		if (filter) params.append("filter", filter);
-		if (field) params.append("field", field);
-		if (sortOrder) params.append("order", sortOrder);
-		return `/monitors/team/with-checks?${params.toString()}`;
-	}, [page, rowsPerPage, sortOrder, selectedTags, filter, field]);
-
-	const {
-		data: monitorsData,
-		isLoading: monitorsIsLoading,
-		error: monitorsError,
-		refetch,
-	} = useGet<MonitorsWithChecksResponse>(
-		monitorsWithChecksUrl,
-		{},
-		{ refreshInterval: 30000 }
-	);
-
-	const monitors = monitorsData?.monitors;
-	const monitorsCount = monitorsData?.count ?? 0;
-	const summary = monitorsData?.summary ?? null;
-
-	const isLoading = monitorsIsLoading || settingsIsLoading;
+	const c = useMonitorListController({
+		types: ["pagespeed"],
+		checksLimit: 25,
+		refreshInterval: 30000,
+		rowsPerPageTable: "pagespeed",
+		rowsPerPageDefault: 10,
+		initialSortField: "name",
+	});
 
 	const showApiKeyWarning = isAdmin && settingsData && !settingsData.pagespeedKeySet;
 
-	const handleConfirm = async () => {
-		if (!selectedMonitor) return;
-		await deleteFn(`/monitors/${selectedMonitor.id}`);
-		setSelectedMonitor(null);
-		refetch();
-	};
-
-	const handleCancel = () => {
-		setSelectedMonitor(null);
-	};
-
-	const handleClearFilters = useCallback(() => {
-		setSelectedStatus("");
-		setSelectedState("");
-		setSelectedTags([]);
-		setSearch("");
-	}, []);
-
-	const hasActiveFilters = Boolean(
-		selectedStatus || selectedState || selectedTags.length > 0 || search
-	);
-
-	const effectiveTotalCount =
-		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
-			? 1
-			: (summary?.totalMonitors ?? 0);
-
 	return (
-		<MonitorBasePageWithStates
+		<MonitorListPage
 			headerKey="pageSpeed"
-			loading={isLoading}
-			error={monitorsError || settingsError}
-			totalCount={effectiveTotalCount}
 			page="pageSpeed"
 			actionLink="/pagespeed/create"
+			controller={c}
+			showTypeFilter={false}
+			extraLoading={settingsIsLoading}
+			extraError={settingsError}
 			priorityFallback={showApiKeyWarning ? <PageSpeedKeyPriorityFallback /> : undefined}
 		>
-			<HeaderCreate
-				path="/pagespeed/create"
-				isLoading={isLoading}
-				isAdmin={isAdmin}
-			/>
-			<HeaderMonitorsSummary summary={summary} />
-
-			<Stack
-				direction={isSmall ? "column" : "row"}
-				justifyContent={isSmall ? "flex-start" : "space-between"}
-				gap={theme.spacing(4)}
-			>
-				<ControlsFilter
-					showTypes={false}
-					selectedStatus={selectedStatus}
-					setSelectedStatus={setSelectedStatus}
-					selectedState={selectedState}
-					setSelectedState={setSelectedState}
-					tagOptions={tags ?? []}
-					selectedTags={selectedTags}
-					setSelectedTags={setSelectedTags}
-					onClearFilters={handleClearFilters}
-				/>
-				<TextField
-					placeholder={t("pages.uptime.filters.search.placeholder")}
-					value={search}
-					onChange={(event) => {
-						setSearch(event.target.value);
-					}}
-				/>
-			</Stack>
-
-			{selectedTags.length > 0 && (
-				<Stack
-					direction={isSmall ? "column" : "row"}
-					alignItems={isSmall ? "flex-start" : "center"}
-					flexWrap="wrap"
-					gap={theme.spacing(SPACING.XL)}
-				>
-					<Typography color={theme.palette.text.secondary}>
-						{t("pages.uptime.filters.activeTags")}
-					</Typography>
-					{selectedTags.map((tagId) => {
-						const tag = tags?.find((t) => t.id === tagId);
-						if (!tag) return null;
-						return (
-							<ColoredLabel
-								key={tag.id}
-								text={tag.name}
-								color={tag.color}
-							/>
-						);
-					})}
-				</Stack>
-			)}
-
 			<PageSpeedMonitorsTable
-				monitors={monitors || []}
-				tags={tags ?? []}
-				refetch={refetch}
-				setSelectedMonitor={setSelectedMonitor}
-				sortField={sortField}
-				setSortField={setSortField}
-				sortOrder={sortOrder}
-				setSortOrder={setSortOrder}
-				count={monitorsCount || 0}
-				page={page}
-				setPage={setPage}
-				rowsPerPage={rowsPerPage}
-				setRowsPerPage={setRowsPerPage}
+				monitors={c.monitors || []}
+				tags={c.tags || []}
+				refetch={c.refetch}
+				setSelectedMonitor={c.setSelectedMonitor}
+				count={c.count || 0}
+				page={c.page}
+				setPage={c.setPage}
+				rowsPerPage={c.rowsPerPage}
+				sortField={c.sortField}
+				setSortField={c.setSortField}
+				sortOrder={c.sortOrder}
+				setSortOrder={c.setSortOrder}
+				setRowsPerPage={c.handleSetRowsPerPage}
 			/>
-			<Dialog
-				open={isDialogOpen}
-				title={t("common.dialogs.delete.title")}
-				content={t("common.dialogs.delete.description")}
-				onConfirm={handleConfirm}
-				onCancel={handleCancel}
-				loading={isDeleting}
-			/>
-		</MonitorBasePageWithStates>
+		</MonitorListPage>
 	);
 };
 

client/src/Pages/Proxies/components/ProxiesTable.tsx

@@ -0,0 +1,103 @@
+import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
+import Typography from "@mui/material/Typography";
+import type { Header } from "@/Components/design-elements/Table";
+import { Table } from "@/Components/design-elements";
+import { Pagination } from "@/Components/design-elements/Table";
+import { useClientPagination } from "@/Hooks/useClientPagination";
+
+import type { ProxyResponse } from "@/Types/Proxy";
+import { useNavigate } from "react-router";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material";
+
+interface ProxiesTableProps {
+	proxies: ProxyResponse[];
+	setSelectedProxy: Function;
+}
+
+export const ProxiesTable = ({ proxies, setSelectedProxy }: ProxiesTableProps) => {
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const { pagedRows, paginationProps } = useClientPagination(proxies);
+
+	const getActions = (proxy: ProxyResponse): ActionMenuItem[] => {
+		return [
+			{
+				id: 1,
+				label: t("pages.common.monitors.actions.configure"),
+				action: () => {
+					navigate(`/proxies/configure/${proxy.id}`);
+				},
+				closeMenu: true,
+			},
+
+			{
+				id: 2,
+				label: (
+					<Typography color={theme.palette.error.main}>
+						{t("pages.common.monitors.actions.delete")}
+					</Typography>
+				),
+				action: async () => {
+					setSelectedProxy(proxy);
+				},
+				closeMenu: true,
+			},
+		];
+	};
+
+	const getHeaders = () => {
+		const headers: Header<ProxyResponse>[] = [
+			{
+				id: "name",
+				content: t("common.table.headers.name"),
+				render: (row) => {
+					return <Typography>{row?.name}</Typography>;
+				},
+			},
+			{
+				id: "protocol",
+				content: t("pages.proxies.table.headers.protocol"),
+				render: (row) => {
+					return <Typography>{row?.protocol}</Typography>;
+				},
+			},
+			{
+				id: "host",
+				content: t("pages.proxies.table.headers.host"),
+				render: (row) => {
+					return <Typography>{row?.host}</Typography>;
+				},
+			},
+			{
+				id: "port",
+				content: t("pages.proxies.table.headers.port"),
+				render: (row) => {
+					return <Typography>{row?.port}</Typography>;
+				},
+			},
+			{
+				id: "actions",
+				content: t("common.table.headers.actions"),
+				render: (row) => {
+					return <ActionsMenu items={getActions(row)} />;
+				},
+			},
+		];
+		return headers;
+	};
+
+	return (
+		<>
+			<Table
+				headers={getHeaders()}
+				data={pagedRows}
+				onRowClick={(row) => {
+					navigate(`/proxies/configure/${row.id}`);
+				}}
+			/>
+			{proxies.length > 0 && <Pagination {...paginationProps} />}
+		</>
+	);
+};

client/src/Pages/Proxies/create/index.tsx

@@ -0,0 +1,213 @@
+import { BasePage, ConfigBox } from "@/Components/design-elements";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { Button, FieldLabel } from "@/Components/inputs";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import { useTheme } from "@mui/material/styles";
+
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { useForm, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { mutate } from "swr";
+import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
+import type { ProxyFormData } from "@/Validation/proxy";
+import { ProxyProtocols, type ProxyResponse } from "@/Types/Proxy";
+import { useTranslation } from "react-i18next";
+import { useProxiesForm } from "@/Hooks/useProxiesForm";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
+import { useMemo } from "react";
+import { FormNumberField } from "@/Components/inputs/forms/FormNumberField";
+const ProxiesCreatePage = () => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const navigate = useNavigate();
+	const { proxyId } = useParams<{ proxyId: string }>();
+	const isEditMode = Boolean(proxyId);
+
+	const { data: existingProxy } = useGet<ProxyResponse>(
+		isEditMode ? `/proxies/${proxyId}` : null
+	);
+
+	const { post, loading: isSubmitting } = usePost<ProxyFormData, ProxyResponse>();
+	const { patch, loading: isPatching } = usePatch<ProxyFormData, ProxyResponse>();
+
+	const { schema, defaults } = useProxiesForm({ data: existingProxy });
+
+	const form = useForm<ProxyFormData>({
+		resolver: zodResolver(schema),
+		defaultValues: defaults,
+	});
+
+	const { reset, handleSubmit } = form;
+
+	const isPasswordSet = existingProxy?.hasPassword ?? false;
+	const [passwordHasBeenReset, setPasswordHasBeenReset] = useState(false);
+
+	const handleResetPassword = () => {
+		form.setValue("password", "");
+		setPasswordHasBeenReset(true);
+	};
+
+	const isUsernameSet = Boolean(existingProxy?.username);
+	const [usernameHasBeenReset, setUsernameHasBeenReset] = useState(false);
+
+	const handleResetUsername = () => {
+		form.setValue("username", "");
+		setUsernameHasBeenReset(true);
+	};
+
+	const protocolOptions = useMemo(
+		() =>
+			ProxyProtocols.map((protocol) => ({
+				value: protocol,
+				label: protocol,
+			})),
+		[]
+	);
+
+	useEffect(() => {
+		reset(defaults);
+	}, [defaults, reset]);
+
+	const onSubmit = async (data: ProxyFormData) => {
+		const payload: ProxyFormData & { clearPassword?: boolean; clearUsername?: boolean } =
+			{
+				...data,
+			};
+		// Don't send password/username if one is set and the user hasn't clicked reset
+		if (isPasswordSet && !passwordHasBeenReset) {
+			delete payload.password;
+		} else if (passwordHasBeenReset && !payload.password) {
+			payload.clearPassword = true;
+		}
+		if (isUsernameSet && !usernameHasBeenReset) {
+			delete payload.username;
+		} else if (usernameHasBeenReset && !payload.username) {
+			payload.clearUsername = true;
+		}
+		const result = isEditMode
+			? await patch(`/proxies/${proxyId}`, payload)
+			: await post("/proxies", payload);
+		if (result?.success) {
+			await mutate((key) => typeof key === "string" && key.startsWith("/proxies"));
+			navigate("/proxies");
+		}
+	};
+
+	return (
+		<FormProvider {...form}>
+			<BasePage
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
+			>
+				<ConfigBox
+					title={t("pages.proxies.form.name.title")}
+					subtitle={t("pages.proxies.form.name.description")}
+					rightContent={
+						<FormTextField
+							name="name"
+							fieldLabel={t("pages.proxies.form.name.optionName")}
+							placeholder={t("pages.proxies.form.name.placeholder")}
+						/>
+					}
+				/>
+				<ConfigBox
+					title={t("pages.proxies.form.server.title")}
+					subtitle={t("pages.proxies.form.server.description")}
+					rightContent={
+						<Stack gap={theme.spacing(LAYOUT.MD)}>
+							<FormSelectField
+								name="protocol"
+								fieldLabel={t("pages.proxies.form.server.option.protocol.label")}
+								options={protocolOptions}
+							/>
+							<FormTextField
+								name="host"
+								fieldLabel={t("pages.proxies.form.server.option.host.label")}
+								placeholder={t("pages.proxies.form.server.option.host.placeholder")}
+							/>
+							<FormNumberField
+								name="port"
+								fieldLabel={t("pages.proxies.form.server.option.port.label")}
+							/>
+						</Stack>
+					}
+				/>
+
+				<ConfigBox
+					title={t("pages.proxies.form.auth.title")}
+					subtitle={t("pages.proxies.form.auth.description")}
+					rightContent={
+						<Stack gap={theme.spacing(LAYOUT.MD)}>
+							{(isUsernameSet === false || usernameHasBeenReset === true) && (
+								<FormTextField
+									name="username"
+									fieldLabel={t("pages.proxies.form.auth.option.username.label")}
+									placeholder={t("pages.proxies.form.auth.option.username.placeholder")}
+								/>
+							)}
+
+							{isUsernameSet === true && usernameHasBeenReset === false && (
+								<Box>
+									<FieldLabel>
+										{t("pages.proxies.form.auth.option.username.labelSet")}
+									</FieldLabel>
+									<Button
+										onClick={handleResetUsername}
+										variant="contained"
+										color="error"
+									>
+										{t("common.buttons.reset")}
+									</Button>
+								</Box>
+							)}
+
+							{(isPasswordSet === false || passwordHasBeenReset === true) && (
+								<FormTextField
+									name="password"
+									type="password"
+									fieldLabel={t("pages.proxies.form.auth.option.password.label")}
+								/>
+							)}
+
+							{isPasswordSet === true && passwordHasBeenReset === false && (
+								<Box>
+									<FieldLabel>
+										{t("pages.proxies.form.auth.option.password.labelSet")}
+									</FieldLabel>
+									<Button
+										onClick={handleResetPassword}
+										variant="contained"
+										color="error"
+									>
+										{t("common.buttons.reset")}
+									</Button>
+								</Box>
+							)}
+						</Stack>
+					}
+				/>
+
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+					spacing={theme.spacing(2)}
+				>
+					<Button
+						loading={isSubmitting || isPatching}
+						type="submit"
+						variant="contained"
+						color="primary"
+					>
+						{t("common.buttons.save")}
+					</Button>
+				</Stack>
+			</BasePage>
+		</FormProvider>
+	);
+};
+
+export default ProxiesCreatePage;

client/src/Pages/Proxies/index.tsx

@@ -0,0 +1,72 @@
+import { BasePageWithStates } from "@/Components/design-elements";
+import { ProxiesTable } from "@/Pages/Proxies/components/ProxiesTable";
+import { Dialog } from "@/Components/inputs";
+import { HeaderCreate } from "@/Components/common";
+
+import { useState } from "react";
+import { useGet, useDelete } from "@/Hooks/UseApi";
+import { useTranslation } from "react-i18next";
+import type { ProxyResponse } from "@/Types/Proxy";
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
+
+const ProxiesPage = () => {
+	const { t } = useTranslation();
+	const isAdmin = useIsAdmin();
+
+	const [selectedProxy, setSelectedProxy] = useState<ProxyResponse | null>(null);
+	const isDialogOpen = Boolean(selectedProxy);
+
+	const {
+		data: proxies,
+		isLoading,
+		isValidating,
+		error,
+		refetch,
+	} = useGet<ProxyResponse[]>("/proxies/team", {}, { keepPreviousData: true });
+
+	const { deleteFn, loading: isDeleting } = useDelete();
+
+	const handleConfirm = async () => {
+		if (!selectedProxy) return;
+		await deleteFn(`/proxies/${selectedProxy.id}`);
+		setSelectedProxy(null);
+		refetch();
+	};
+
+	const handleCancel = () => {
+		setSelectedProxy(null);
+	};
+
+	return (
+		<BasePageWithStates
+			headerKey="proxies"
+			page={t("pages.proxies.fallback.title")}
+			description={t("pages.proxies.fallback.description")}
+			loading={isLoading || isValidating}
+			error={!!error}
+			totalCount={proxies?.length ?? 0}
+			actionButtonText={t("pages.proxies.fallback.actionButton")}
+			actionLink="/proxies/create"
+		>
+			<HeaderCreate
+				path="/proxies/create"
+				isLoading={isLoading || isValidating}
+				isAdmin={isAdmin}
+			/>
+			<ProxiesTable
+				proxies={proxies ?? []}
+				setSelectedProxy={setSelectedProxy}
+			/>
+			<Dialog
+				open={isDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={handleConfirm}
+				onCancel={handleCancel}
+				loading={isDeleting}
+			/>
+		</BasePageWithStates>
+	);
+};
+
+export default ProxiesPage;

client/src/Pages/StatusPage/Create/index.tsx

@@ -1,56 +1,81 @@
-import { BasePage, ConfigBox, StepProgress } from "@/Components/design-elements";
+import {
+	BasePage,
+	ColoredLabel,
+	ConfigBox,
+	StepProgress,
+} from "@/Components/design-elements";
 import Stack from "@mui/material/Stack";
 import { logger } from "@/Utils/logger";
-import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
+import { LAYOUT } from "@/Utils/Theme/constants";
 import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import { Trash2, GripVertical } from "lucide-react";
-import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
-import type { DropResult } from "@hello-pangea/dnd";
-import {
-	ImageUpload,
-	SwitchComponent,
-	Button,
-	TextField,
-	Autocomplete,
-	Checkbox,
-	Dialog,
-	ColorInput,
-} from "@/Components/inputs";
+import { ImageUpload, Button, Dialog } from "@/Components/inputs";
 
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import { useEffect, useMemo, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider, useController } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useStatusPageForm } from "@/Hooks/useStatusPageForm";
 import type { StatusPageFormData } from "@/Validation/statusPage";
 import { statusPageStepCount, statusPageStepFieldsFor } from "@/Validation/statusPage";
 import { useGet, usePost, usePut, useDelete } from "@/Hooks/UseApi";
 import type { Monitor } from "@/Types/Monitor";
+import { SelectableMonitorTypes } from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
 import type { MonitorDisplayType, StatusPageResponse } from "@/Types/StatusPage";
 import { getMonitorTypeLabel } from "@/Types/StatusPage";
-import timezones from "@/Utils/timezones.json";
+import { timezoneOptions } from "@/Utils/timezoneOptions";
 import { useNavigate, useParams } from "react-router-dom";
 import { mutate } from "swr";
-import axios from "axios";
 import { HeaderConfigStatusControls } from "./Components/HeaderConfigStatusControls";
 import { ThemePicker } from "./Components/ThemePicker";
+import { FormSwitchField } from "@/Components/inputs/forms/FormSwitchField";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
+import { FormAutocompleteField } from "@/Components/inputs/forms/FormAutoCompleteField";
+import { FormCheckboxField } from "@/Components/inputs/forms/FormCheckboxField";
+import { FormColorField } from "@/Components/inputs/forms/FormColorField";
 
+const ThemePickerField = () => {
+	const { field: themeField } = useController<StatusPageFormData, "theme">({
+		name: "theme",
+	});
+	const { field: modeField } = useController<StatusPageFormData, "themeMode">({
+		name: "themeMode",
+	});
+	return (
+		<ThemePicker
+			theme={themeField.value ?? "refined"}
+			themeMode={modeField.value ?? "auto"}
+			onThemeChange={themeField.onChange}
+			onThemeModeChange={modeField.onChange}
+		/>
+	);
+};
+const LogoUploadField = () => {
+	const { field } = useController<StatusPageFormData, "logo">({ name: "logo" });
+	return (
+		<ImageUpload
+			src={field.value?.data}
+			onChange={(file) => {
+				field.onChange(
+					file ? { data: file.src, contentType: file.file.type, file: file.file } : null
+				);
+			}}
+		/>
+	);
+};
+
+// Derived from SelectableMonitorTypes so a newly supported monitor type is
+// offered here automatically; the previous hardcoded list silently omitted DNS.
+// "hardware" is appended because infrastructure monitors are created on their
+// own page and so are absent from the selectable set.
 const monitorsUrl = (() => {
 	const params = new URLSearchParams();
-	["http", "ping", "port", "docker", "game", "grpc", "websocket", "hardware"].forEach(
-		(type) => params.append("type", type)
-	);
+	[...SelectableMonitorTypes, "hardware"].forEach((type) => params.append("type", type));
 	return `/monitors/team?${params.toString()}`;
 })();
 
-interface TimezoneOption {
-	_id: string;
-	name: string;
-}
-
 const buildStatusPageKey = (slug: string | null | undefined) =>
 	slug ? `/status-page/${slug}?type=uptime&type=infrastructure` : null;
 
@@ -67,7 +92,9 @@ const CreateStatusPage = () => {
 		useGet<StatusPageResponse>(isCreate ? null : buildStatusPageKey(url));
 
 	const { data: monitorsResponse } = useGet<Monitor[]>(monitorsUrl);
-	const monitors = monitorsResponse ?? [];
+	const monitors = useMemo(() => monitorsResponse ?? [], [monitorsResponse]);
+	const { data: tagsResponse } = useGet<Tag[]>("/tags/team");
+	const tags = useMemo(() => tagsResponse ?? [], [tagsResponse]);
 
 	const { post, loading: isSubmittingPost } = usePost();
 	const { put, loading: isSubmittingPut } = usePut();
@@ -87,7 +114,7 @@ const CreateStatusPage = () => {
 		defaultValues: defaults,
 	});
 
-	const { control, reset, handleSubmit, trigger } = form;
+	const { reset, handleSubmit, trigger } = form;
 
 	// Reset form when defaults change (from fetched data)
 	useEffect(() => {
@@ -108,7 +135,7 @@ const CreateStatusPage = () => {
 	};
 	const handleBack = () => setCurrentStep((step) => step - 1);
 
-	const watchedMonitorIds: string[] = form.watch("monitors") ?? [];
+	const watchedMonitorIds: string[] = form.watch("monitors");
 	const computedTypes: MonitorDisplayType[] = useMemo(() => {
 		const selectedMonitors = (watchedMonitorIds ?? [])
 			.map((id) => monitors.find((m) => m.id === id))
@@ -124,7 +151,7 @@ const CreateStatusPage = () => {
 
 	useEffect(() => {
 		form.setValue("type", computedTypes);
-	}, [computedTypes]);
+	}, [computedTypes, form]);
 
 	const onError = (errors: any) => {
 		logger.debug("Status page validation errors", errors);
@@ -178,18 +205,8 @@ const CreateStatusPage = () => {
 		if (data.logo === null) {
 			// Signal to remove the logo
 			fd.append("removeLogo", "true");
-		} else if (data.logo?.data && data.logo.data !== "") {
-			if (data.logo.data.startsWith("blob:")) {
-				try {
-					const imageResult = await axios.get(data.logo.data, {
-						responseType: "blob",
-					});
-					fd.append("logo", imageResult.data);
-					URL.revokeObjectURL(data.logo.data);
-				} catch (e) {
-					logger.error("Failed to fetch logo blob", e instanceof Error ? e : undefined);
-				}
-			}
+		} else if (data.logo?.file) {
+			fd.append("logo", data.logo.file);
 		}
 
 		let result;
@@ -216,470 +233,249 @@ const CreateStatusPage = () => {
 		return <BasePage>Loading...</BasePage>;
 	}
 	return (
-		<BasePage
-			component="form"
-			onSubmit={handleSubmit(onSubmit, onError)}
-		>
-			{!isCreate && <HeaderConfigStatusControls onDelete={handleDeleteClick} />}
-			{isCreate && (
-				<StepProgress
-					steps={totalSteps}
-					current={currentStep}
-				/>
-			)}
-			{showStep(0) && (
-				<ConfigBox
-					title={t("pages.statusPages.form.access.title")}
-					subtitle={t("pages.statusPages.form.access.description")}
-					rightContent={
-						<Stack
-							direction="row"
-							alignItems="center"
-							spacing={theme.spacing(SPACING.MD)}
-						>
-							<Controller
+		<FormProvider {...form}>
+			<BasePage
+				component="form"
+				onSubmit={handleSubmit(onSubmit, onError)}
+			>
+				{!isCreate && <HeaderConfigStatusControls onDelete={handleDeleteClick} />}
+				{isCreate && (
+					<StepProgress
+						steps={totalSteps}
+						current={currentStep}
+					/>
+				)}
+				{showStep(0) && (
+					<ConfigBox
+						title={t("pages.statusPages.form.access.title")}
+						subtitle={t("pages.statusPages.form.access.description")}
+						rightContent={
+							<FormSwitchField
 								name="isPublished"
-								control={control}
-								render={({ field }) => (
-									<SwitchComponent
-										checked={field.value ?? false}
-										onChange={(e) => field.onChange(e.target.checked)}
-									/>
-								)}
+								label={t("pages.statusPages.form.access.option.published.name")}
 							/>
-							<Typography>
-								{t("pages.statusPages.form.access.option.published.name")}
-							</Typography>
-						</Stack>
-					}
-				/>
-			)}
-			{showStep(0) && (
-				<ConfigBox
-					title={t("pages.statusPages.form.basicInfo.title")}
-					subtitle={t("pages.statusPages.form.basicInfo.description")}
-					rightContent={
-						<Stack spacing={theme.spacing(LAYOUT.MD)}>
-							<Controller
-								name="companyName"
-								control={control}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										fieldLabel={t("pages.statusPages.form.basicInfo.option.name.label")}
-										placeholder={t(
-											"pages.statusPages.form.basicInfo.option.name.placeholder"
-										)}
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message}
-									/>
-								)}
-							/>
-							<Controller
-								name="url"
-								control={control}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										fieldLabel={t("pages.statusPages.form.basicInfo.option.url.label")}
-										placeholder={t(
-											"pages.statusPages.form.basicInfo.option.url.placeholder"
-										)}
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message}
-									/>
-								)}
-							/>
-							<Controller
-								name="customDomain"
-								control={control}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										value={field.value ?? ""}
-										fieldLabel={t(
-											"pages.statusPages.form.basicInfo.option.customDomain.label"
-										)}
-										placeholder={t(
-											"pages.statusPages.form.basicInfo.option.customDomain.placeholder"
-										)}
-										helperText={
-											fieldState.error?.message ||
-											t("pages.statusPages.form.basicInfo.option.customDomain.helper")
-										}
-										error={!!fieldState.error}
-									/>
-								)}
-							/>
-						</Stack>
-					}
-				/>
-			)}
-			{showStep(0) && (
-				<ConfigBox
-					title={t("pages.statusPages.form.monitors.title")}
-					subtitle={t("pages.statusPages.form.monitors.description")}
-					rightContent={
-						<Controller
-							name="monitors"
-							control={control}
-							render={({ field, fieldState }) => {
-								const selectedMonitors = field.value
-									.map((id: string) => monitors.find((m) => m.id === id))
-									.filter((m): m is Monitor => m !== undefined);
-
-								const handleDragEnd = (result: DropResult) => {
-									if (!result.destination) return;
-									const reordered = Array.from(field.value);
-									const [removed] = reordered.splice(result.source.index, 1);
-									reordered.splice(result.destination.index, 0, removed);
-									field.onChange(reordered);
-								};
-
-								return (
-									<Stack spacing={theme.spacing(LAYOUT.MD)}>
-										<Autocomplete
-											multiple
-											options={monitors}
-											getOptionLabel={(option: Monitor) => option.name}
-											value={selectedMonitors}
-											onChange={(_, newValue) => {
-												field.onChange(newValue.map((m: Monitor) => m.id));
-											}}
-											fieldLabel={t(
-												"pages.statusPages.form.monitors.option.monitors.label"
-											)}
-											renderInput={(params) => (
-												<TextField
-													{...params}
-													placeholder={
-														selectedMonitors.length === 0
-															? t(
-																	"pages.statusPages.form.monitors.option.monitors.placeholder"
-																)
-															: ""
-													}
-													error={!!fieldState.error}
-													helperText={fieldState.error?.message}
-												/>
-											)}
-										/>
-										{selectedMonitors.length > 0 && (
-											<DragDropContext onDragEnd={handleDragEnd}>
-												<Droppable droppableId="monitors-list">
-													{(provided) => (
-														<Stack
-															{...provided.droppableProps}
-															ref={provided.innerRef}
-														>
-															{selectedMonitors.map((monitor, index) => (
-																<Draggable
-																	key={monitor.id}
-																	draggableId={monitor.id}
-																	index={index}
-																>
-																	{(provided) => (
-																		<Stack
-																			ref={provided.innerRef}
-																			{...provided.draggableProps}
-																			{...provided.dragHandleProps}
-																			direction="row"
-																			alignItems="center"
-																			spacing={theme.spacing(LAYOUT.XS)}
-																			padding={theme.spacing(LAYOUT.XS)}
-																			marginTop={theme.spacing(SPACING.LG)}
-																			borderRadius={1}
-																			sx={{
-																				border: `1px solid ${theme.palette.divider}`,
-																				cursor: "grab",
-																				"&:active": { cursor: "grabbing" },
-																			}}
-																		>
-																			<GripVertical size={20} />
-																			<Typography
-																				flexGrow={1}
-																			>{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}</Typography>
-																			<IconButton
-																				size="small"
-																				onClick={() => {
-																					field.onChange(
-																						field.value.filter(
-																							(id: string) => id !== monitor.id
-																						)
-																					);
-																				}}
-																				aria-label="Remove monitor"
-																			>
-																				<Trash2 size={16} />
-																			</IconButton>
-																		</Stack>
-																	)}
-																</Draggable>
-															))}
-															{provided.placeholder}
-														</Stack>
-													)}
-												</Droppable>
-											</DragDropContext>
-										)}
-									</Stack>
-								);
-							}}
-						/>
-					}
-				/>
-			)}
-			{showStep(0) && (
-				<ConfigBox
-					title={t("pages.statusPages.form.timezone.title")}
-					subtitle={t("pages.statusPages.form.timezone.description")}
-					rightContent={
-						<Controller
-							name="timezone"
-							control={control}
-							render={({ field }) => (
-								<Autocomplete
-									options={timezones}
-									getOptionLabel={(option: TimezoneOption) => option.name}
-									value={
-										timezones.find((tz: TimezoneOption) => tz._id === field.value) ?? null
-									}
-									onChange={(_, newValue: TimezoneOption | null) => {
-										field.onChange(newValue?._id ?? "");
-									}}
-									fieldLabel={t("pages.statusPages.form.timezone.option.timezone.label")}
-									renderInput={(params) => (
-										<TextField
-											{...params}
-											placeholder={t(
-												"pages.statusPages.form.timezone.option.timezone.placeholder"
-											)}
-										/>
+						}
+					/>
+				)}
+				{showStep(0) && (
+					<ConfigBox
+						title={t("pages.statusPages.form.basicInfo.title")}
+						subtitle={t("pages.statusPages.form.basicInfo.description")}
+						rightContent={
+							<Stack spacing={theme.spacing(LAYOUT.MD)}>
+								<FormTextField
+									name="companyName"
+									fieldLabel={t("pages.statusPages.form.basicInfo.option.name.label")}
+									placeholder={t(
+										"pages.statusPages.form.basicInfo.option.name.placeholder"
 									)}
 								/>
-							)}
-						/>
-					}
-				/>
-			)}
-			{showStep(1) && (
-				<ConfigBox
-					title={t("pages.statusPages.form.appearance.title")}
-					subtitle={t("pages.statusPages.form.appearance.description")}
-					rightContent={
-						<Stack spacing={theme.spacing(LAYOUT.MD)}>
-							<Stack alignItems={"center"}>
-								<Controller
-									name="logo"
-									control={control}
-									render={({ field }) => (
-										<ImageUpload
-											src={field.value?.data}
-											onChange={(file) => {
-												if (file) {
-													field.onChange({
-														data: file.src,
-														contentType: file.file.type,
-													});
-												} else {
-													field.onChange(null);
-												}
-											}}
-										/>
+
+								<FormTextField
+									name="url"
+									fieldLabel={t("pages.statusPages.form.basicInfo.option.url.label")}
+									placeholder={t(
+										"pages.statusPages.form.basicInfo.option.url.placeholder"
+									)}
+								/>
+								<FormTextField
+									name="customDomain"
+									fieldLabel={t(
+										"pages.statusPages.form.basicInfo.option.customDomain.label"
+									)}
+									placeholder={t(
+										"pages.statusPages.form.basicInfo.option.customDomain.placeholder"
+									)}
+									helperText={t(
+										"pages.statusPages.form.basicInfo.option.customDomain.helper"
 									)}
 								/>
 							</Stack>
-							<Controller
-								name="color"
-								control={control}
-								render={({ field }) => (
-									<ColorInput
-										format="hex"
-										value={field.value}
-										onChange={field.onChange}
-										fieldLabel={t("pages.statusPages.form.appearance.option.color.label")}
-									/>
+						}
+					/>
+				)}
+				{showStep(0) && (
+					<ConfigBox
+						title={t("pages.statusPages.form.monitors.title")}
+						subtitle={t("pages.statusPages.form.monitors.description")}
+						rightContent={
+							<FormMultiSelectField
+								sortable
+								name="monitors"
+								fieldLabel={t("pages.statusPages.form.monitors.option.monitors.label")}
+								placeholder={t(
+									"pages.statusPages.form.monitors.option.monitors.placeholder"
+								)}
+								options={monitors}
+								renderOptionContent={(monitor) => (
+									<Stack
+										direction="row"
+										alignItems="center"
+										gap={theme.spacing(2)}
+										flexWrap="wrap"
+									>
+										<Typography>
+											{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}
+										</Typography>
+										{monitor.tags.map((tagId) => {
+											const tag = tags.find(({ id }) => id === tagId);
+											return tag ? (
+												<ColoredLabel
+													key={tag.id}
+													text={tag.name}
+													color={tag.color}
+												/>
+											) : null;
+										})}
+									</Stack>
+								)}
+								renderRow={(monitor) => (
+									<Typography flexGrow={1}>
+										{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}
+									</Typography>
 								)}
 							/>
-						</Stack>
-					}
-				/>
-			)}
-			{showStep(1) && (
-				<ConfigBox
-					title={t("pages.statusPages.form.theme.title")}
-					subtitle={t("pages.statusPages.form.theme.description")}
-					rightContent={
-						<Controller
-							name="theme"
-							control={control}
-							render={({ field: themeField }) => (
-								<Controller
-									name="themeMode"
-									control={control}
-									render={({ field: modeField }) => (
-										<ThemePicker
-											theme={themeField.value ?? "refined"}
-											themeMode={modeField.value ?? "auto"}
-											onThemeChange={themeField.onChange}
-											onThemeModeChange={modeField.onChange}
-										/>
+						}
+					/>
+				)}
+				{showStep(0) && (
+					<ConfigBox
+						title={t("pages.statusPages.form.timezone.title")}
+						subtitle={t("pages.statusPages.form.timezone.description")}
+						rightContent={
+							<FormAutocompleteField
+								name="timezone"
+								options={timezoneOptions}
+								fieldLabel={t("pages.statusPages.form.timezone.option.timezone.label")}
+								placeholder={t(
+									"pages.statusPages.form.timezone.option.timezone.placeholder"
+								)}
+							/>
+						}
+					/>
+				)}
+				{showStep(1) && (
+					<ConfigBox
+						title={t("pages.statusPages.form.appearance.title")}
+						subtitle={t("pages.statusPages.form.appearance.description")}
+						rightContent={
+							<Stack spacing={theme.spacing(LAYOUT.MD)}>
+								<Stack alignItems={"center"}>
+									<LogoUploadField />
+								</Stack>
+								<FormColorField
+									name="color"
+									fieldLabel={t("pages.statusPages.form.appearance.option.color.label")}
+								/>
+							</Stack>
+						}
+					/>
+				)}
+				{showStep(1) && (
+					<ConfigBox
+						title={t("pages.statusPages.form.theme.title")}
+						subtitle={t("pages.statusPages.form.theme.description")}
+						rightContent={<ThemePickerField />}
+					/>
+				)}
+				{showStep(1) && (
+					<ConfigBox
+						title={t("pages.statusPages.form.customCSS.title")}
+						subtitle={t("pages.statusPages.form.customCSS.description")}
+						rightContent={
+							<FormTextField
+								name="customCSS"
+								multiline
+								rows={8}
+								fieldLabel={t("pages.statusPages.form.customCSS.option.customCSS.label")}
+								placeholder={t(
+									"pages.statusPages.form.customCSS.option.customCSS.placeholder"
+								)}
+							/>
+						}
+					/>
+				)}
+				{showStep(1) && (
+					<ConfigBox
+						title={t("pages.statusPages.form.features.title")}
+						subtitle={t("pages.statusPages.form.features.description")}
+						rightContent={
+							<Stack spacing={theme.spacing(LAYOUT.MD)}>
+								<FormCheckboxField
+									name="showCharts"
+									label={t("pages.statusPages.form.features.option.showCharts.label")}
+								/>
+								<FormCheckboxField
+									name="showInfrastructure"
+									label={t(
+										"pages.statusPages.form.features.option.showInfrastructure.label"
 									)}
 								/>
-							)}
-						/>
-					}
-				/>
-			)}
-			{showStep(1) && (
-				<ConfigBox
-					title={t("pages.statusPages.form.customCSS.title")}
-					subtitle={t("pages.statusPages.form.customCSS.description")}
-					rightContent={
-						<Controller
-							name="customCSS"
-							control={control}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									multiline
-									rows={8}
-									fieldLabel={t(
-										"pages.statusPages.form.customCSS.option.customCSS.label"
-									)}
-									placeholder={t(
-										"pages.statusPages.form.customCSS.option.customCSS.placeholder"
-									)}
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message}
-								/>
-							)}
-						/>
-					}
-				/>
-			)}
-			{showStep(1) && (
-				<ConfigBox
-					title={t("pages.statusPages.form.features.title")}
-					subtitle={t("pages.statusPages.form.features.description")}
-					rightContent={
-						<Stack spacing={theme.spacing(LAYOUT.MD)}>
-							<Controller
-								name="showCharts"
-								control={control}
-								render={({ field }) => (
-									<FormControlLabel
-										control={
-											<Checkbox
-												checked={field.value}
-												onChange={field.onChange}
-											/>
-										}
-										label={t("pages.statusPages.form.features.option.showCharts.label")}
-									/>
-								)}
-							/>
-							<Controller
-								name="showInfrastructure"
-								control={control}
-								render={({ field }) => (
-									<FormControlLabel
-										control={
-											<Checkbox
-												checked={field.value}
-												onChange={field.onChange}
-											/>
-										}
-										label={t(
-											"pages.statusPages.form.features.option.showInfrastructure.label"
-										)}
-									/>
-								)}
-							/>
-							{/* <Controller
-							name="showUptimePercentage"
-							control={control}
-							render={({ field }) => (
-								<FormControlLabel
-									control={
-										<Checkbox
-											checked={field.value}
-											onChange={field.onChange}
-										/>
-									}
+								{/* 
+								<FormCheckboxField
+									name="showUptimePercentage"
 									label={t(
 										"pages.statusPages.form.features.option.showUptimePercentage.label"
 									)}
 								/>
-							)}
-						/>
-						<Controller
-							name="showAdminLoginLink"
-							control={control}
-							render={({ field }) => (
-								<FormControlLabel
-									control={
-										<Checkbox
-											checked={field.value}
-											onChange={field.onChange}
-										/>
-									}
+
+								<FormCheckboxField
+									name="showAdminLoginLink"
 									label={t(
 										"pages.statusPages.form.features.option.showAdminLoginLink.label"
 									)}
-								/>
-							)}
-						/> */}
-						</Stack>
-					}
+								/> */}
+							</Stack>
+						}
+					/>
+				)}
+				<Stack
+					direction="row"
+					justifyContent={isCreate ? "space-between" : "flex-end"}
+				>
+					{isCreate && (
+						<Button
+							type="button"
+							variant="outlined"
+							color="secondary"
+							disabled={currentStep === 0}
+							onClick={handleBack}
+						>
+							{t("common.buttons.back")}
+						</Button>
+					)}
+					{isCreate && currentStep < totalSteps - 1 ? (
+						<Button
+							key="wizard-next"
+							type="button"
+							variant="contained"
+							color="primary"
+							onClick={handleNext}
+						>
+							{t("common.buttons.next")}
+						</Button>
+					) : (
+						<Button
+							key="wizard-save"
+							loading={isSubmitting}
+							type="submit"
+							variant="contained"
+							color="primary"
+						>
+							{t("common.buttons.save")}
+						</Button>
+					)}
+				</Stack>
+				<Dialog
+					open={isDeleteDialogOpen}
+					title={t("common.dialogs.delete.title")}
+					content={t("common.dialogs.delete.description")}
+					onConfirm={handleDeleteConfirm}
+					onCancel={handleDeleteCancel}
+					loading={isDeleting}
 				/>
-			)}
-			<Stack
-				direction="row"
-				justifyContent={isCreate ? "space-between" : "flex-end"}
-			>
-				{isCreate && (
-					<Button
-						type="button"
-						variant="outlined"
-						color="secondary"
-						disabled={currentStep === 0}
-						onClick={handleBack}
-					>
-						{t("common.buttons.back")}
-					</Button>
-				)}
-				{isCreate && currentStep < totalSteps - 1 ? (
-					<Button
-						key="wizard-next"
-						type="button"
-						variant="contained"
-						color="primary"
-						onClick={handleNext}
-					>
-						{t("common.buttons.next")}
-					</Button>
-				) : (
-					<Button
-						key="wizard-save"
-						loading={isSubmitting}
-						type="submit"
-						variant="contained"
-						color="primary"
-					>
-						{t("common.buttons.save")}
-					</Button>
-				)}
-			</Stack>
-			<Dialog
-				open={isDeleteDialogOpen}
-				title={t("common.dialogs.delete.title")}
-				content={t("common.dialogs.delete.description")}
-				onConfirm={handleDeleteConfirm}
-				onCancel={handleDeleteCancel}
-				loading={isDeleting}
-			/>
-		</BasePage>
+			</BasePage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/StatusPage/Status/index.tsx

@@ -1,6 +1,6 @@
 import { BasePage, BaseFallback } from "@/Components/design-elements";
 import Typography from "@mui/material/Typography";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 
@@ -9,7 +9,11 @@ import { useTranslation } from "react-i18next";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useLocation, useParams } from "react-router-dom";
 import { useGet } from "@/Hooks/UseApi";
-import { resolveStatusPageTheme } from "@/Types/StatusPage";
+import {
+	isStatusPageRange,
+	resolveStatusPageTheme,
+	type StatusPageRange,
+} from "@/Types/StatusPage";
 import {
 	PUBLIC_STATUS_PAGE_PREFIX,
 	type StatusPageResponse,
@@ -80,21 +84,37 @@ const StatusPageView = () => {
 	const { url } = useParams();
 	const isAdmin = useIsAdmin();
 	const location = useLocation();
+	const [searchParams, setSearchParams] = useSearchParams();
+
+	const onRangeChange = (next: StatusPageRange) => {
+		const updated = new URLSearchParams(searchParams);
+		if (next === "latest") {
+			updated.delete("range");
+		} else {
+			updated.set("range", next);
+		}
+		setSearchParams(updated, { replace: true });
+	};
 
 	const onCustomDomainHost = isCustomDomainHost();
 	const isPublic =
 		onCustomDomainHost || location.pathname.startsWith(PUBLIC_STATUS_PAGE_PREFIX);
 
+	const rawRange = searchParams.get("range");
+	const range = isStatusPageRange(rawRange) ? rawRange : "latest";
+
 	const apiUrl = buildStatusPageApiPath({
 		url,
 		useCustomDomain: onCustomDomainHost,
+		range,
 	});
 
 	const { data, isLoading, error } = useGet<StatusPageResponse>(
 		apiUrl,
 		{},
 		{
-			refreshInterval: 10000,
+			keepPreviousData: true,
+			refreshInterval: range === "latest" ? 10000 : 60000,
 		}
 	);
 
@@ -150,6 +170,10 @@ const StatusPageView = () => {
 					statusPage={statusPage}
 					monitors={monitors}
 					config={themeConfig}
+					range={range}
+					onRangeChange={onRangeChange}
+					bucketTimezone={data.bucketTimezone ?? "Etc/UTC"}
+					checkTTLDays={data.checkTTLDays}
 				/>
 			</StatusPageThemeProvider>
 		);

client/src/Pages/StatusPage/Status/themes/bold/styles.ts

@@ -1,11 +1,13 @@
 import type { SxProps, Theme } from "@mui/material/styles";
-import type { StatusPageThemeTokens } from "../tokens";
+import { mixSeverityColor, type StatusPageThemeTokens } from "../tokens";
 import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import { BOLD_SANS_STACK, MONO_STACK } from "../shared/fontStacks";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
-export type BoldHeatCell = "fast" | "med" | "slow" | "down" | "empty";
-export type BoldBarKind = "up" | "down" | "empty";
+import type { BarKind, HeatCellKind } from "../shared/ChartCells";
+
+export type BoldHeatCell = HeatCellKind;
+export type BoldBarKind = BarKind;
 export type BoldGaugeFill = "ok" | "warm" | "hot";
 
 export interface BoldStyles {
@@ -32,9 +34,9 @@ export interface BoldStyles {
 	monitorUrl: SxProps<Theme>;
 	badge: (tone: OverallTone) => SxProps<Theme>;
 	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: BoldHeatCell) => SxProps<Theme>;
+	heatmapCell: (kind: BoldHeatCell, severity?: number) => SxProps<Theme>;
 	histogram: SxProps<Theme>;
-	bar: (kind: BoldBarKind, heightPct: number) => SxProps<Theme>;
+	bar: (kind: BoldBarKind, heightPct: number, severity?: number) => SxProps<Theme>;
 	chartStats: SxProps<Theme>;
 	infra: SxProps<Theme>;
 	infraEmpty: SxProps<Theme>;
@@ -55,6 +57,7 @@ export const boldStyles = (
 		fast: tokens.up,
 		med: `color-mix(in srgb, ${tokens.up} 70%, #ffffff 30%)`,
 		slow: tokens.warn,
+		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};
@@ -62,12 +65,14 @@ export const boldStyles = (
 		fast: `0 0 6px color-mix(in srgb, ${tokens.up} 18%, transparent)`,
 		med: `0 0 6px color-mix(in srgb, ${tokens.up} 18%, transparent)`,
 		slow: `0 0 6px color-mix(in srgb, ${tokens.warn} 20%, transparent)`,
+		degraded: `0 0 6px color-mix(in srgb, ${tokens.degraded} 20%, transparent)`,
 		down: `0 0 6px color-mix(in srgb, ${tokens.down} 20%, transparent)`,
 		empty: "none",
 	};
 
 	const barBg: Record<BoldBarKind, string> = {
 		up: tokens.up,
+		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};
@@ -322,9 +327,12 @@ export const boldStyles = (
 			gap: { xs: "1px", md: "3px" },
 			height: 48,
 		},
-		heatmapCell: (kind) => ({
+		heatmapCell: (kind, severity = 1) => ({
 			borderRadius: "3px",
-			background: heatCellBg[kind],
+			background:
+				kind === "degraded"
+					? mixSeverityColor(tokens.up, tokens.degraded, severity)
+					: heatCellBg[kind],
 			boxShadow: heatCellShadow[kind],
 			opacity: kind === "empty" ? 0.4 : 1,
 			transition: "transform 0.15s",
@@ -339,8 +347,11 @@ export const boldStyles = (
 			alignItems: "flex-end",
 			height: 48,
 		},
-		bar: (kind, heightPct) => ({
-			background: barBg[kind],
+		bar: (kind, heightPct, severity = 1) => ({
+			background:
+				kind === "degraded"
+					? mixSeverityColor(tokens.up, tokens.degraded, severity)
+					: barBg[kind],
 			borderRadius: "3px",
 			minHeight: 4,
 			opacity: kind === "empty" ? 0.4 : 1,

client/src/Pages/StatusPage/Status/themes/editorial/styles.ts

@@ -1,5 +1,5 @@
 import type { SxProps, Theme } from "@mui/material/styles";
-import type { StatusPageThemeTokens } from "../tokens";
+import { mixSeverityColor, type StatusPageThemeTokens } from "../tokens";
 import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import {
 	EDITORIAL_SECONDARY_SANS_STACK,
@@ -8,8 +8,10 @@ import {
 } from "../shared/fontStacks";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
-export type EditorialHeatCell = "fast" | "med" | "slow" | "down" | "empty";
-export type EditorialBarKind = "up" | "down" | "empty";
+import type { BarKind, HeatCellKind } from "../shared/ChartCells";
+
+export type EditorialHeatCell = HeatCellKind;
+export type EditorialBarKind = BarKind;
 export type EditorialGaugeFill = "ok" | "warm" | "hot";
 
 export interface EditorialStyles {
@@ -36,9 +38,9 @@ export interface EditorialStyles {
 	monitorUrl: SxProps<Theme>;
 	badge: (tone: OverallTone) => SxProps<Theme>;
 	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: EditorialHeatCell) => SxProps<Theme>;
+	heatmapCell: (kind: EditorialHeatCell, severity?: number) => SxProps<Theme>;
 	histogram: SxProps<Theme>;
-	bar: (kind: EditorialBarKind, heightPct: number) => SxProps<Theme>;
+	bar: (kind: EditorialBarKind, heightPct: number, severity?: number) => SxProps<Theme>;
 	chartStats: SxProps<Theme>;
 	infra: SxProps<Theme>;
 	infraEmpty: SxProps<Theme>;
@@ -59,12 +61,14 @@ export const editorialStyles = (
 		fast: tokens.up,
 		med: `color-mix(in srgb, ${tokens.up} 60%, ${tokens.bg})`,
 		slow: tokens.warn,
+		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};
 
 	const barBg: Record<EditorialBarKind, string> = {
 		up: tokens.up,
+		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};
@@ -268,8 +272,11 @@ export const editorialStyles = (
 			gap: { xs: "1px", md: "2px" },
 			height: 40,
 		},
-		heatmapCell: (kind) => ({
-			background: heatCellBg[kind],
+		heatmapCell: (kind, severity = 1) => ({
+			background:
+				kind === "degraded"
+					? mixSeverityColor(tokens.up, tokens.degraded, severity)
+					: heatCellBg[kind],
 			opacity: kind === "empty" ? 0.5 : 1,
 		}),
 
@@ -281,8 +288,11 @@ export const editorialStyles = (
 			alignItems: "flex-end",
 			height: 40,
 		},
-		bar: (kind, heightPct) => ({
-			background: barBg[kind],
+		bar: (kind, heightPct, severity = 1) => ({
+			background:
+				kind === "degraded"
+					? mixSeverityColor(tokens.up, tokens.degraded, severity)
+					: barBg[kind],
 			minHeight: 3,
 			opacity: kind === "empty" ? 0.5 : 1,
 			height: `${heightPct}%`,

client/src/Pages/StatusPage/Status/themes/modern/styles.ts

@@ -1,12 +1,14 @@
 import type { SxProps, Theme } from "@mui/material/styles";
 import { keyframes } from "@mui/system";
-import type { StatusPageThemeTokens } from "../tokens";
+import { mixSeverityColor, type StatusPageThemeTokens } from "../tokens";
 import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
-export type ModernHeatCell = "fast" | "med" | "slow" | "down" | "empty";
-export type ModernBarKind = "up" | "down" | "empty";
+import type { BarKind, HeatCellKind } from "../shared/ChartCells";
+
+export type ModernHeatCell = HeatCellKind;
+export type ModernBarKind = BarKind;
 export type ModernGaugeFill = "ok" | "warm" | "hot";
 
 export interface ModernStyles {
@@ -35,9 +37,9 @@ export interface ModernStyles {
 	monitorUrl: SxProps<Theme>;
 	badge: (tone: OverallTone) => SxProps<Theme>;
 	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: ModernHeatCell) => SxProps<Theme>;
+	heatmapCell: (kind: ModernHeatCell, severity?: number) => SxProps<Theme>;
 	histogram: SxProps<Theme>;
-	bar: (kind: ModernBarKind, heightPct: number) => SxProps<Theme>;
+	bar: (kind: ModernBarKind, heightPct: number, severity?: number) => SxProps<Theme>;
 	chartStats: SxProps<Theme>;
 	infra: SxProps<Theme>;
 	infraEmpty: SxProps<Theme>;
@@ -81,17 +83,20 @@ export const modernStyles = (
 ): ModernStyles => {
 	const cardShadow = isDark ? darkShadow : lightShadow;
 	const cardHoverShadow = isDark ? darkShadowHover : lightShadowHover;
+	const darken = (color: string) => `color-mix(in srgb, ${color} 70%, #000000 30%)`;
 
 	const heatCellBg: Record<ModernHeatCell, string> = {
 		fast: `linear-gradient(180deg, ${tokens.up}, ${tokens.upStrong})`,
 		med: `linear-gradient(180deg, color-mix(in srgb, ${tokens.up} 70%, #ffffff 30%), ${tokens.up})`,
 		slow: `linear-gradient(180deg, ${tokens.warn}, ${tokens.degraded})`,
-		down: `linear-gradient(180deg, ${tokens.down}, color-mix(in srgb, ${tokens.down} 70%, #000000 30%))`,
+		degraded: `linear-gradient(180deg, ${tokens.degraded}, ${darken(tokens.degraded)})`,
+		down: `linear-gradient(180deg, ${tokens.down}, ${darken(tokens.down)})`,
 		empty: tokens.border,
 	};
 
 	const barBg: Record<ModernBarKind, string> = {
 		up: tokens.up,
+		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};
@@ -99,7 +104,7 @@ export const modernStyles = (
 	const gaugeFillBg: Record<ModernGaugeFill, string> = {
 		ok: `linear-gradient(90deg, ${tokens.up}, ${tokens.upStrong})`,
 		warm: `linear-gradient(90deg, ${tokens.warn}, ${tokens.degraded})`,
-		hot: `linear-gradient(90deg, ${tokens.down}, color-mix(in srgb, ${tokens.down} 70%, #000000 30%))`,
+		hot: `linear-gradient(90deg, ${tokens.down}, color-mix(in srgb, ${tokens.down}, ${darken(tokens.down)})`,
 	};
 
 	return {
@@ -350,13 +355,19 @@ export const modernStyles = (
 			gap: { xs: "1px", md: "3px" },
 			height: 46,
 		},
-		heatmapCell: (kind) => ({
-			borderRadius: "3px",
-			background: heatCellBg[kind],
-			opacity: kind === "empty" ? 0.4 : 1,
-			transition: "transform 0.15s",
-			"&:hover": { transform: "scaleY(1.2)" },
-		}),
+		heatmapCell: (kind, severity = 1) => {
+			const mixed = mixSeverityColor(tokens.up, tokens.degraded, severity);
+			return {
+				borderRadius: "3px",
+				background:
+					kind === "degraded"
+						? `linear-gradient(180deg, ${mixed}, ${darken(mixed)})`
+						: heatCellBg[kind],
+				opacity: kind === "empty" ? 0.4 : 1,
+				transition: "transform 0.15s",
+				"&:hover": { transform: "scaleY(1.2)" },
+			};
+		},
 
 		histogram: {
 			padding: { xs: "0 12px", md: "0 24px" },
@@ -366,8 +377,11 @@ export const modernStyles = (
 			alignItems: "flex-end",
 			height: 46,
 		},
-		bar: (kind, heightPct) => ({
-			background: barBg[kind],
+		bar: (kind, heightPct, severity = 1) => ({
+			background:
+				kind === "degraded"
+					? mixSeverityColor(tokens.up, tokens.degraded, severity)
+					: barBg[kind],
 			borderRadius: "3px",
 			minHeight: 4,
 			opacity: kind === "empty" ? 0.4 : 1,

client/src/Pages/StatusPage/Status/themes/refined/styles.ts

@@ -1,10 +1,12 @@
 import type { SxProps, Theme } from "@mui/material/styles";
-import type { StatusPageThemeTokens } from "../tokens";
+import { mixSeverityColor, type StatusPageThemeTokens } from "../tokens";
 import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
 
-export type RefinedHeatCell = "fast" | "med" | "slow" | "down" | "empty";
-export type RefinedBarKind = "up" | "down" | "empty";
+import type { BarKind, HeatCellKind } from "../shared/ChartCells";
+
+export type RefinedHeatCell = HeatCellKind;
+export type RefinedBarKind = BarKind;
 export type RefinedGaugeFill = "ok" | "warm" | "hot";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
@@ -35,9 +37,9 @@ export interface RefinedStyles {
 	monitorUrl: SxProps<Theme>;
 	badge: (tone: OverallTone) => SxProps<Theme>;
 	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: RefinedHeatCell) => SxProps<Theme>;
+	heatmapCell: (kind: RefinedHeatCell, severity?: number) => SxProps<Theme>;
 	histogram: SxProps<Theme>;
-	bar: (kind: RefinedBarKind, heightPct: number) => SxProps<Theme>;
+	bar: (kind: RefinedBarKind, heightPct: number, severity?: number) => SxProps<Theme>;
 	chartStats: SxProps<Theme>;
 	infra: SxProps<Theme>;
 	infraEmpty: SxProps<Theme>;
@@ -71,12 +73,14 @@ export const refinedStyles = (
 		fast: tokens.up,
 		med: `color-mix(in srgb, ${tokens.up} 60%, #ffffff 40%)`,
 		slow: tokens.warn,
+		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};
 
 	const barBg: Record<RefinedBarKind, string> = {
 		up: tokens.up,
+		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};
@@ -292,9 +296,12 @@ export const refinedStyles = (
 			gap: { xs: "1px", md: "3px" },
 			height: 42,
 		},
-		heatmapCell: (kind) => ({
+		heatmapCell: (kind, severity = 1) => ({
 			borderRadius: "2px",
-			background: heatCellBg[kind],
+			background:
+				kind === "degraded"
+					? mixSeverityColor(tokens.up, tokens.degraded, severity)
+					: heatCellBg[kind],
 			opacity: kind === "empty" ? 0.4 : 1,
 			transition: "transform 0.15s",
 			"&:hover": { transform: "scaleY(1.15)" },
@@ -308,8 +315,11 @@ export const refinedStyles = (
 			alignItems: "flex-end",
 			height: 42,
 		},
-		bar: (kind, heightPct) => ({
-			background: barBg[kind],
+		bar: (kind, heightPct, severity = 1) => ({
+			background:
+				kind === "degraded"
+					? mixSeverityColor(tokens.up, tokens.degraded, severity)
+					: barBg[kind],
 			borderRadius: "2px",
 			minHeight: 3,
 			opacity: kind === "empty" ? 0.4 : 1,

client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx

@@ -1,20 +1,19 @@
-import { useMemo, useState } from "react";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
-import { useTranslation } from "react-i18next";
+import Typography from "@mui/material/Typography";
+import { TriangleAlert } from "lucide-react";
+
 import type { SxProps, Theme } from "@mui/material/styles";
 import type { Monitor } from "@/Types/Monitor";
-import type { StatusPage } from "@/Types/StatusPage";
-import { getMonitorTypeLabel } from "@/Types/StatusPage";
+import type { StatusPage, StatusPageRange } from "@/Types/StatusPage";
+import {
+	getMonitorTypeLabel,
+	STATUS_PAGE_RANGE_DAYS,
+	STATUS_PAGE_RANGES,
+} from "@/Types/StatusPage";
 import type { StatusPageThemeTokens } from "@/Pages/StatusPage/Status/themes/tokens";
-import {
-	ThemedHeatmap,
-	type HeatCellKind,
-} from "@/Pages/StatusPage/Status/themes/shared/ThemedHeatmap";
-import {
-	ThemedHistogram,
-	type BarKind,
-} from "@/Pages/StatusPage/Status/themes/shared/ThemedHistogram";
+import { ThemedHeatmap } from "@/Pages/StatusPage/Status/themes/shared/ThemedHeatmap";
+import { ThemedHistogram } from "@/Pages/StatusPage/Status/themes/shared/ThemedHistogram";
 import {
 	ThemedInfrastructure,
 	type GaugeFillLevel,
@@ -26,8 +25,20 @@ import {
 	resolveOverallStatus,
 	statusBadgeKey,
 } from "@/Pages/StatusPage/Status/themes/shared/overallStatus";
-import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
 import { formatPercentage } from "@/Utils/FormatUtils";
+import {
+	checksToCells,
+	dailyBucketsToCells,
+	type BarKind,
+	type HeatCellKind,
+} from "@/Pages/StatusPage/Status/themes/shared/ChartCells";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { Icon } from "@/Components/design-elements";
+
+import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material";
 
 type StatusPageMonitor = Monitor;
 
@@ -48,9 +59,9 @@ export interface BaseStyles {
 	monitorUrl: SxProps<Theme>;
 	badge: (tone: OverallTone) => SxProps<Theme>;
 	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: HeatCellKind) => SxProps<Theme>;
+	heatmapCell: (kind: HeatCellKind, severity?: number) => SxProps<Theme>;
 	histogram: SxProps<Theme>;
-	bar: (kind: BarKind, heightPct: number) => SxProps<Theme>;
+	bar: (kind: BarKind, heightPct: number, severity?: number) => SxProps<Theme>;
 	chartStats: SxProps<Theme>;
 	infra: SxProps<Theme>;
 	infraEmpty: SxProps<Theme>;
@@ -82,9 +93,22 @@ interface Props {
 	statusPage: StatusPage;
 	monitors: StatusPageMonitor[];
 	config: ThemeConfig<any>;
+	range: StatusPageRange;
+	onRangeChange: (range: StatusPageRange) => void;
+	bucketTimezone: string;
+	checkTTLDays?: number;
 }
 
-export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
+export const BaseStatusPage = ({
+	statusPage,
+	monitors,
+	config,
+	range,
+	onRangeChange,
+	bucketTimezone,
+	checkTTLDays,
+}: Props) => {
+	const theme = useTheme();
 	const { t } = useTranslation();
 	const { tokens, mode } = useStatusPageTheme();
 	const styles = useMemo(
@@ -126,33 +150,75 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
 			/>
 
 			{statusPage.showCharts && (
-				<Box sx={styles.chartSwitchWrap}>
-					<Box
-						sx={styles.chartSwitch}
-						role="radiogroup"
-					>
+				<Stack>
+					<Box sx={styles.chartSwitchWrap}>
 						<Box
-							component="button"
-							type="button"
-							role="radio"
-							aria-checked={chartMode === "heatmap"}
-							onClick={() => setChartMode("heatmap")}
-							sx={styles.chartSwitchButton(chartMode === "heatmap")}
+							sx={styles.chartSwitch}
+							role="radiogroup"
 						>
-							{t("pages.statusPages.monitorsList.chartTypeHeatmap")}
-						</Box>
-						<Box
-							component="button"
-							type="button"
-							role="radio"
-							aria-checked={chartMode === "histogram"}
-							onClick={() => setChartMode("histogram")}
-							sx={styles.chartSwitchButton(chartMode === "histogram")}
-						>
-							{t("pages.statusPages.monitorsList.chartTypeHistogram")}
+							<Box
+								component="button"
+								type="button"
+								role="radio"
+								aria-checked={chartMode === "heatmap"}
+								onClick={() => setChartMode("heatmap")}
+								sx={styles.chartSwitchButton(chartMode === "heatmap")}
+							>
+								{t("pages.statusPages.monitorsList.chartTypeHeatmap")}
+							</Box>
+							<Box
+								component="button"
+								type="button"
+								role="radio"
+								aria-checked={chartMode === "histogram"}
+								onClick={() => setChartMode("histogram")}
+								sx={styles.chartSwitchButton(chartMode === "histogram")}
+							>
+								{t("pages.statusPages.monitorsList.chartTypeHistogram")}
+							</Box>
 						</Box>
 					</Box>
-				</Box>
+					<Box sx={styles.chartSwitchWrap}>
+						<Box
+							sx={styles.chartSwitch}
+							role="radiogroup"
+							aria-label={t("pages.statusPages.rangeSelectorAria")}
+						>
+							{STATUS_PAGE_RANGES.map((value) => (
+								<Box
+									component="button"
+									type="button"
+									role="radio"
+									key={value}
+									aria-checked={range === value}
+									onClick={() => onRangeChange(value)}
+									sx={styles.chartSwitchButton(range === value)}
+								>
+									{t(`pages.statusPages.range.${value}`)}
+								</Box>
+							))}
+						</Box>
+					</Box>
+					{range !== "latest" &&
+						checkTTLDays &&
+						STATUS_PAGE_RANGE_DAYS[range] > checkTTLDays && (
+							<Stack
+								mb={LAYOUT.XS}
+								alignSelf="flex-end"
+								direction="row"
+								alignItems="center"
+								gap={LAYOUT.XXS}
+							>
+								<Icon
+									icon={TriangleAlert}
+									color={theme.palette.warning.main}
+								/>
+								<Typography>
+									{t("pages.statusPages.rangeExceedsRetention", { days: checkTTLDays })}
+								</Typography>
+							</Stack>
+						)}
+				</Stack>
 			)}
 
 			<Stack
@@ -166,6 +232,16 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
 					const badgeTone = monitorBadgeTone(monitor.status);
 					const uptimePercentage = formatPercentage(monitor.uptimePercentage ?? 0);
 
+					const cells =
+						range === "latest"
+							? checksToCells(monitor.recentChecks ?? [])
+							: dailyBucketsToCells(
+									monitor.dailyChecks ?? [],
+									STATUS_PAGE_RANGE_DAYS[range],
+									bucketTimezone,
+									t
+								);
+
 					return (
 						<Box
 							component="li"
@@ -226,13 +302,13 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
 							{showChart &&
 								(chartMode === "heatmap" ? (
 									<ThemedHeatmap
-										checks={monitor.recentChecks ?? []}
+										cells={cells}
 										containerSx={styles.heatmap}
 										cellSx={styles.heatmapCell}
 									/>
 								) : (
 									<ThemedHistogram
-										checks={monitor.recentChecks ?? []}
+										cells={cells}
 										containerSx={styles.histogram}
 										barSx={styles.bar}
 										statsSx={styles.chartStats}

client/src/Pages/StatusPage/Status/themes/shared/ChartCells.tsx

@@ -0,0 +1,137 @@
+import {
+	ThemedChartTooltip,
+	ThemedDailyTooltip,
+} from "@/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip";
+import type { CheckSnapshot, DailyCheckBucket } from "@/Types/Check";
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
+import {
+	computeBarHeights,
+	computeDayBarHeights,
+	MIN_HEIGHT_PCT,
+} from "@/Utils/DataUtils";
+import { formatPercentage } from "@/Utils/FormatUtils";
+import { enumerateDays, formatMs } from "@/Utils/TimeUtils";
+import type { TFunction } from "i18next";
+
+export type BarKind = "up" | "degraded" | "down" | "empty";
+export type HeatCellKind = "fast" | "med" | "slow" | "degraded" | "down" | "empty";
+
+export interface ChartCell {
+	key: string;
+	severity: number;
+	barKind: BarKind;
+	heatKind: HeatCellKind;
+	heightPct: number; // histogram bar height
+	responseTime: number; // 0 for empty cells
+	tooltip: React.ReactNode | null;
+	ariaLabel: string;
+}
+
+const DAY_DOWN_THRESHOLD = 0.5;
+
+// Color interpolation
+// 0  = perfect
+// 1 = at or below the down threshold
+const SEVERITY_FLOOR = 0.15; // A degraded server should never be green
+const SEVERITY_GAMMA = 2; // >1 biases toward green so high-uptime days stay visibly distinct from low ones
+
+export const severityFromUpRatio = (upRatio: number): number => {
+	const failed = 1 - upRatio;
+	if (failed <= 0) return 0;
+	const scaled = (Math.log10(failed) + 3) / (Math.log10(1 - DAY_DOWN_THRESHOLD) + 3);
+	const clamped = Math.min(1, Math.max(0, scaled));
+	return Math.max(SEVERITY_FLOOR, clamped ** SEVERITY_GAMMA);
+};
+
+const classifyDay = (bucket: DailyCheckBucket, upRatio: number): BarKind => {
+	if (bucket.totalChecks === 0) return "empty";
+	if (upRatio >= 1) return "up";
+	if (upRatio < DAY_DOWN_THRESHOLD) return "down";
+	return "degraded";
+};
+
+export const classifyResponseTime = (
+	status: boolean,
+	responseTime: number | undefined
+): Exclude<HeatCellKind, "empty"> => {
+	if (!status) return "down";
+	const rt = responseTime ?? 0;
+	if (rt > 500) return "slow";
+	if (rt > 250) return "med";
+	return "fast";
+};
+
+const emptyCell = (key: string): ChartCell => ({
+	key,
+	barKind: "empty",
+	heatKind: "empty",
+	heightPct: MIN_HEIGHT_PCT,
+	responseTime: 0,
+	tooltip: null,
+	ariaLabel: "",
+	severity: 0,
+});
+
+const padCells = (cells: ChartCell[], length: number): ChartCell[] => [
+	...cells,
+	...Array.from({ length: Math.max(0, length - cells.length) }, (_, i) =>
+		emptyCell(`empty-${cells.length + i}`)
+	),
+];
+
+export const checksToCells = (checks: CheckSnapshot[]): ChartCell[] => {
+	const source = checks.slice(-MAX_RECENT_CHECKS);
+	const heights = computeBarHeights(source);
+	const cells = source.map(
+		(check, i): ChartCell => ({
+			key: check.id ?? String(i),
+			barKind: check.status ? "up" : "down",
+			heatKind: classifyResponseTime(check.status, check.responseTime),
+			heightPct: heights[i] ?? MIN_HEIGHT_PCT,
+			responseTime: check.responseTime ?? 0,
+			tooltip: <ThemedChartTooltip check={check} />,
+			ariaLabel: `${formatMs(check.responseTime)}, ${check.status ? "up" : "down"}`,
+			severity: 0,
+		})
+	);
+	return padCells(cells, MAX_RECENT_CHECKS);
+};
+
+export const dailyBucketsToCells = (
+	buckets: DailyCheckBucket[],
+	days: number,
+	bucketTimezone: string,
+	t: TFunction
+): ChartCell[] => {
+	const byDate = new Map(buckets.map((b) => [b.date, b]));
+	const heights = computeDayBarHeights(buckets);
+	const enumerated = enumerateDays(days, bucketTimezone);
+	return enumerated.map((date) => {
+		const bucket = byDate.get(date);
+		if (!bucket) return emptyCell(`day-${date}`);
+		const upRatio = bucket.upChecks / bucket.totalChecks;
+
+		const barKind = classifyDay(bucket, upRatio);
+		return {
+			key: `day-${date}`,
+			severity:
+				barKind === "degraded"
+					? severityFromUpRatio(upRatio)
+					: barKind === "down"
+						? 1
+						: 0,
+			barKind,
+			heatKind:
+				barKind === "up"
+					? classifyResponseTime(true, bucket.avgResponseTime ?? 0)
+					: barKind,
+			heightPct: heights.get(date) ?? MIN_HEIGHT_PCT,
+			responseTime: bucket.avgResponseTime ?? 0,
+			tooltip: <ThemedDailyTooltip bucket={bucket} />,
+			ariaLabel: t("pages.statusPages.monitorsList.chart.dayAria", {
+				date,
+				uptime: formatPercentage(bucket.upChecks / bucket.totalChecks),
+			}),
+		};
+	});
+};

client/src/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip.tsx

@@ -1,8 +1,8 @@
-import type { CheckSnapshot } from "@/Types/Check";
+import type { CheckSnapshot, DailyCheckBucket } from "@/Types/Check";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import prettyMilliseconds from "pretty-ms";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
+import { formatPercentage } from "@/Utils/FormatUtils";
 import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
 import { useTranslation } from "react-i18next";
 
@@ -16,7 +16,7 @@ export const ThemedChartTooltip = ({ check }: { check: CheckSnapshot }) => {
 				fontWeight={600}
 			>
 				{check.status
-					? `${prettyMilliseconds(check.responseTime, { compact: true })}`
+					? formatMs(check.responseTime)
 					: t("pages.statusPages.monitorsList.chart.downTooltip")}
 			</Typography>
 			<Typography
@@ -28,3 +28,37 @@ export const ThemedChartTooltip = ({ check }: { check: CheckSnapshot }) => {
 		</Stack>
 	);
 };
+
+export const ThemedDailyTooltip = ({ bucket }: { bucket: DailyCheckBucket }) => {
+	const { t } = useTranslation();
+	return (
+		<Stack gap={0.25}>
+			<Typography
+				variant="caption"
+				fontWeight={600}
+			>
+				{bucket.date}
+			</Typography>
+			<Typography
+				variant="caption"
+				sx={{ opacity: 0.8 }}
+			>
+				{t("pages.statusPages.monitorsList.chart.dayUptime", {
+					uptime: formatPercentage(bucket.upChecks / bucket.totalChecks),
+					upChecks: bucket.upChecks.toLocaleString(),
+					totalChecks: bucket.totalChecks.toLocaleString(),
+				})}
+			</Typography>
+			{bucket.avgResponseTime !== null && (
+				<Typography
+					variant="caption"
+					sx={{ opacity: 0.8 }}
+				>
+					{t("pages.statusPages.monitorsList.chart.dayAvgResponse", {
+						value: formatMs(bucket.avgResponseTime),
+					})}
+				</Typography>
+			)}
+		</Stack>
+	);
+};

client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx

@@ -2,64 +2,48 @@ import Tooltip from "@mui/material/Tooltip";
 import Box from "@mui/material/Box";
 import type { SxProps, Theme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import type { CheckSnapshot } from "@/Types/Check";
-import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
-import { ThemedChartTooltip } from "@/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip";
-
-const CELLS = MAX_RECENT_CHECKS;
-
-export type HeatCellKind = "fast" | "med" | "slow" | "down" | "empty";
+import type {
+	ChartCell,
+	HeatCellKind,
+} from "@/Pages/StatusPage/Status/themes/shared/ChartCells";
 
 interface Props {
-	checks: CheckSnapshot[];
+	cells: ChartCell[];
 	containerSx: SxProps<Theme>;
-	cellSx: (kind: HeatCellKind) => SxProps<Theme>;
+	cellSx: (kind: HeatCellKind, severity?: number) => SxProps<Theme>;
 }
 
-const classify = (check: CheckSnapshot): Exclude<HeatCellKind, "empty"> => {
-	if (!check.status) return "down";
-	const rt = check.responseTime ?? 0;
-	if (rt > 500) return "slow";
-	if (rt > 250) return "med";
-	return "fast";
-};
-
-export const ThemedHeatmap = ({ checks, containerSx, cellSx }: Props) => {
+export const ThemedHeatmap = ({ cells, containerSx, cellSx }: Props) => {
 	const { t } = useTranslation();
 
-	const source = checks.slice(-CELLS);
-	const padded: (CheckSnapshot | null)[] = [
-		...source,
-		...Array.from({ length: Math.max(0, CELLS - source.length) }, () => null),
-	];
-
 	return (
 		<Box
-			sx={containerSx}
+			sx={[
+				...(Array.isArray(containerSx) ? containerSx : [containerSx]),
+				{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
+			]}
 			role="img"
 			aria-label={t("pages.statusPages.monitorsList.chart.heatmapAria")}
 		>
-			{padded.map((check, i) => {
-				if (!check) {
+			{cells.map((cell) => {
+				if (cell.heatKind === "empty") {
 					return (
 						<Box
-							key={`empty-${i}`}
+							key={cell.key}
 							sx={cellSx("empty")}
 						/>
 					);
 				}
-				const kind = classify(check);
-				const tooltipContent = <ThemedChartTooltip check={check} />;
 				return (
 					<Tooltip
-						key={check.id ?? i}
-						title={tooltipContent}
+						key={cell.key}
+						title={cell.tooltip}
 						arrow
 						placement="top"
 					>
 						<Box
-							sx={cellSx(kind)}
-							aria-label={`${check.responseTime} ms, ${check.status ? "up" : "down"}`}
+							sx={cellSx(cell.heatKind, cell.severity)}
+							aria-label={cell.ariaLabel}
 						/>
 					</Tooltip>
 				);

client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx

@@ -4,28 +4,22 @@ import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import type { SxProps, Theme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import type { CheckSnapshot } from "@/Types/Check";
-import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
-import { computeBarHeights } from "@/Utils/DataUtils";
-import { ThemedChartTooltip } from "@/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip";
-const CELLS = MAX_RECENT_CHECKS;
-const MIN_HEIGHT_PCT = 6;
-
-export type BarKind = "up" | "down" | "empty";
+import { formatMs } from "@/Utils/TimeUtils";
+import type {
+	BarKind,
+	ChartCell,
+} from "@/Pages/StatusPage/Status/themes/shared/ChartCells";
 
 interface Props {
-	checks: CheckSnapshot[];
+	cells: ChartCell[];
 	containerSx: SxProps<Theme>;
-	barSx: (kind: BarKind, heightPct: number) => SxProps<Theme>;
+	barSx: (kind: BarKind, heightPct: number, severity?: number) => SxProps<Theme>;
 	statsSx: SxProps<Theme>;
 	statsGap?: number;
 }
 
-const tone = (check: CheckSnapshot): Exclude<BarKind, "empty"> =>
-	check.status ? "up" : "down";
-
 export const ThemedHistogram = ({
-	checks,
+	cells,
 	containerSx,
 	barSx,
 	statsSx,
@@ -33,45 +27,42 @@ export const ThemedHistogram = ({
 }: Props) => {
 	const { t } = useTranslation();
 
-	const { padded, heights, avg, peak } = useMemo(() => {
-		const source = checks.slice(-CELLS);
-		const out: (CheckSnapshot | null)[] = [
-			...source,
-			...Array.from({ length: Math.max(0, CELLS - source.length) }, () => null),
-		];
-		const heights = computeBarHeights(source);
-		const valid = out.filter((c): c is CheckSnapshot => c !== null && c.responseTime > 0);
-		const maxRt = valid.length ? Math.max(...valid.map((c) => c.responseTime)) : 1;
+	const { avg, peak } = useMemo(() => {
+		const valid = cells.filter((cell) => cell.responseTime > 0);
+		const maxRt = valid.length ? Math.max(...valid.map((cell) => cell.responseTime)) : 0;
 		const avgRt = valid.length
-			? Math.round(valid.reduce((s, c) => s + c.responseTime, 0) / valid.length)
+			? valid.reduce((sum, cell) => sum + cell.responseTime, 0) / valid.length
 			: 0;
-		return { padded: out, heights, avg: avgRt, peak: maxRt };
-	}, [checks]);
+		return { avg: formatMs(avgRt), peak: formatMs(maxRt) };
+	}, [cells]);
 
 	return (
 		<Stack gap={statsGap}>
-			<Box sx={containerSx}>
-				{padded.map((check, i) => {
-					if (!check) {
+			<Box
+				sx={[
+					...(Array.isArray(containerSx) ? containerSx : [containerSx]),
+					{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
+				]}
+			>
+				{cells.map((cell) => {
+					if (cell.barKind === "empty") {
 						return (
 							<Box
-								key={`empty-${i}`}
-								sx={barSx("empty", MIN_HEIGHT_PCT)}
+								key={cell.key}
+								sx={barSx("empty", cell.heightPct)}
 							/>
 						);
 					}
-					const height = heights[i] ?? MIN_HEIGHT_PCT;
-					const tooltipContent = <ThemedChartTooltip check={check} />;
 					return (
 						<Tooltip
-							key={check.id ?? i}
-							title={tooltipContent}
+							key={cell.key}
+							title={cell.tooltip}
 							arrow
 							placement="top"
 						>
 							<Box
-								sx={barSx(tone(check), height)}
-								aria-label={`${check.responseTime} ms`}
+								sx={barSx(cell.barKind, cell.heightPct, cell.severity)}
+								aria-label={cell.ariaLabel}
 							/>
 						</Tooltip>
 					);

client/src/Pages/StatusPage/Status/themes/shared/ThemedInfrastructure.tsx

@@ -36,7 +36,8 @@ const heatLevel = (value: number): GaugeFillLevel =>
 
 export const ThemedInfrastructure = ({ monitor, sxApi }: Props) => {
 	const { t } = useTranslation();
-	const latest = monitor.recentChecks?.[0];
+	const recentChecks = monitor.recentChecks ?? [];
+	const latest = recentChecks[recentChecks.length - 1];
 
 	const renderEmpty = () => (
 		<Box sx={sxApi.emptySx}>{t("pages.statusPages.monitorsList.noData")}</Box>

client/src/Pages/StatusPage/Status/themes/tokens.ts

@@ -243,3 +243,10 @@ export const themeTokens: Record<StatusPageTheme, ThemeVariants> = {
 	editorial,
 	minimal,
 };
+
+// Interpolate between a theme's up and degraded colors by severity (0..1).
+export const mixSeverityColor = (
+	up: string,
+	degraded: string,
+	severity: number
+): string => `color-mix(in oklch, ${degraded} ${Math.round(severity * 100)}%, ${up})`;

client/src/Pages/Tags/create/index.tsx

@@ -1,12 +1,12 @@
 import { BasePage, ConfigBox } from "@/Components/design-elements";
-import { TextField, Button, ColorInput } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
-import { Controller, useForm } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { mutate } from "swr";
 import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
@@ -14,6 +14,8 @@ import type { TagFormData } from "@/Validation/tag";
 import type { Tag } from "@/Types/Tag";
 import { useTranslation } from "react-i18next";
 import { useTagsForm } from "@/Hooks/useTagsForm";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { FormColorField } from "@/Components/inputs/forms/FormColorField";
 
 const TagsCreatePage = () => {
 	const { t } = useTranslation();
@@ -34,7 +36,7 @@ const TagsCreatePage = () => {
 		defaultValues: defaults,
 	});
 
-	const { control, reset, handleSubmit } = form;
+	const { reset, handleSubmit } = form;
 
 	useEffect(() => {
 		reset(defaults);
@@ -51,67 +53,49 @@ const TagsCreatePage = () => {
 	};
 
 	return (
-		<BasePage
-			component="form"
-			onSubmit={handleSubmit(onSubmit)}
-		>
-			<ConfigBox
-				title={t("pages.tags.form.name.title")}
-				subtitle={t("pages.tags.form.name.description")}
-				rightContent={
-					<Controller
-						name="name"
-						control={control}
-						defaultValue={defaults.name}
-						render={({ field, fieldState }) => (
-							<TextField
-								{...field}
-								type="text"
-								fieldLabel={t("pages.tags.form.name.optionName")}
-								placeholder={t("pages.tags.form.name.placeholder")}
-								fullWidth
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-							/>
-						)}
-					/>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.tags.form.color.title")}
-				subtitle={t("pages.tags.form.color.description")}
-				rightContent={
-					<Controller
-						name="color"
-						control={control}
-						defaultValue={defaults.color}
-						render={({ field }) => (
-							<ColorInput
-								format="hex"
-								value={field.value}
-								onChange={field.onChange}
-								fieldLabel={t("pages.tags.form.color.optionName")}
-							/>
-						)}
-					/>
-				}
-			/>
-
-			<Stack
-				direction="row"
-				justifyContent="flex-end"
-				spacing={theme.spacing(2)}
+		<FormProvider {...form}>
+			<BasePage
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
 			>
-				<Button
-					loading={isSubmitting || isPatching}
-					type="submit"
-					variant="contained"
-					color="primary"
+				<ConfigBox
+					title={t("pages.tags.form.name.title")}
+					subtitle={t("pages.tags.form.name.description")}
+					rightContent={
+						<FormTextField
+							name="name"
+							fieldLabel={t("pages.tags.form.name.optionName")}
+							placeholder={t("pages.tags.form.name.placeholder")}
+						/>
+					}
+				/>
+				<ConfigBox
+					title={t("pages.tags.form.color.title")}
+					subtitle={t("pages.tags.form.color.description")}
+					rightContent={
+						<FormColorField
+							name="color"
+							fieldLabel={t("pages.tags.form.color.optionName")}
+						/>
+					}
+				/>
+
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+					spacing={theme.spacing(2)}
 				>
-					{t("common.buttons.save")}
-				</Button>
-			</Stack>
-		</BasePage>
+					<Button
+						loading={isSubmitting || isPatching}
+						type="submit"
+						variant="contained"
+						color="primary"
+					>
+						{t("common.buttons.save")}
+					</Button>
+				</Stack>
+			</BasePage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Uptime/Details/Components/GeoChecksTable.tsx

@@ -8,10 +8,9 @@ import Box from "@mui/material/Box";
 import type { Header } from "@/Components/design-elements";
 import type { FlatGeoCheck } from "@/Types/GeoCheck";
 import { useTranslation } from "react-i18next";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
 import type { RootState } from "@/Types/state";
 import { useSelector } from "react-redux";
-import prettyMilliseconds from "pretty-ms";
 
 export const GeoChecksTable = ({
 	geoChecks,
@@ -69,7 +68,7 @@ export const GeoChecksTable = ({
 			content: t("common.table.headers.responseTime"),
 			render: (row) => {
 				if (!row.timings?.total) return "N/A";
-				return prettyMilliseconds(row.timings.total, { compact: true });
+				return formatMs(row.timings.total);
 			},
 		},
 	];