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
2026-08-28 13:09:03 -04:00
201 changed files with 1607 additions and 10901 deletions
@@ -1 +1 @@
-
+*     @ajhollid @mohicody @Br0wnHammer @Owaiseimdad @karenvicent @shanikauwu1
@@ -109,7 +109,7 @@ client/src/
 - **Data Fetching**: SWR + Axios
 - **Database**: MongoDB with Mongoose ODM
 - **Queue/Cache**: Redis + BullMQ + Pulse (cron scheduling)
- **i18n**: i18next + react-i18next (non-English locales are machine translated, not managed through a translation service)
+- **i18n**: i18next + react-i18next (translations via PoEditor)

 ---

@@ -36,7 +36,8 @@

 [![Run on PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=checkmate)

-<img width="1461" height="853" alt="image" src="https://github.com/user-attachments/assets/d5ee1a4e-9db9-47cc-ad47-e1ba88a9d796" />
+
+<img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
 </p>
 <br>

@@ -211,7 +212,7 @@ 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), [Malena](https://github.com/malenacaroline) and [Mert](https://github.com/mertssmnoglu) 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 almost 11K+ stars and attracted 150+ contributors from around the globe.

@@ -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
@@ -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.
+
@@ -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 -}}

 {{- /*
@@ -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 }}
@@ -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 }}
@@ -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 }}
@@ -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 }}
@@ -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 }}
@@ -0,0 +1,10 @@
+{{- $app := include "checkmate.app" . | fromYaml -}}
+apiVersion: v1
+kind: Service
+metadata:
+  name: checkmate
+spec:
+  selector:
+    app: checkmate
+  ports:
+    - port: {{ $app.port }}
@@ -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
@@ -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 }}
@@ -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;
-      }
-    }
@@ -1,9 +0,0 @@
-apiVersion: v1
-kind: Service
-metadata:
-  name: checkmate-client
-spec:
-  selector:
-    app: checkmate-client
-  ports:
-    - port: {{ .Values.client.port }}
@@ -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 */}}
@@ -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
@@ -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
@@ -9,12 +9,8 @@
 			"version": "3.11.0",
 			"dependencies": {
 				"@csstools/css-tokenizer": "^3.0.4",
-				"@dnd-kit/core": "^6.3.1",
-				"@dnd-kit/sortable": "^10.0.0",
-				"@dnd-kit/utilities": "^3.2.2",
 				"@emotion/react": "^11.13.3",
 				"@emotion/styled": "^11.13.0",
-				"@fontsource-variable/geist": "^5.3.0",
 				"@hello-pangea/dnd": "^18.0.0",
 				"@hookform/resolvers": "5.2.2",
 				"@mui/lab": "7.0.0",
@@ -365,59 +361,6 @@
 				"node": ">=14"
 			}
 		},
-		"node_modules/@dnd-kit/accessibility": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
-			"integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
-			"license": "MIT",
-			"dependencies": {
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0"
-			}
-		},
-		"node_modules/@dnd-kit/core": {
-			"version": "6.3.1",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
-			"integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@dnd-kit/accessibility": "^3.1.1",
-				"@dnd-kit/utilities": "^3.2.2",
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0",
-				"react-dom": ">=16.8.0"
-			}
-		},
-		"node_modules/@dnd-kit/sortable": {
-			"version": "10.0.0",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
-			"integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
-			"license": "MIT",
-			"dependencies": {
-				"@dnd-kit/utilities": "^3.2.2",
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"@dnd-kit/core": "^6.3.0",
-				"react": ">=16.8.0"
-			}
-		},
-		"node_modules/@dnd-kit/utilities": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
-			"integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
-			"license": "MIT",
-			"dependencies": {
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0"
-			}
-		},
 		"node_modules/@emotion/babel-plugin": {
 			"version": "11.13.5",
 			"license": "MIT",
@@ -1007,15 +950,6 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
-		"node_modules/@fontsource-variable/geist": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.3.0.tgz",
-			"integrity": "sha512-j0m+vLQuG5XAYoHtGCVu0spvlGreR3EzpECUVzkFmI1mTVnAO38l/NEPDCFgZ177JxzYJCLSmTQibIiYPilGrA==",
-			"license": "OFL-1.1",
-			"funding": {
-				"url": "https://github.com/sponsors/ayuhito"
-			}
-		},
 		"node_modules/@hapi/hoek": {
 			"version": "9.3.0",
 			"license": "BSD-3-Clause"
@@ -12,20 +12,15 @@
 		"lint-strict": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
 		"preview": "vite preview",
 		"format": "prettier --write .",
-		"format-check": "prettier --check .",
-		"compile": "tsc -b"
+		"format-check": "prettier --check ."
 	},
 	"lint-staged": {
 		"**/*": "prettier --write --ignore-unknown"
 	},
 	"dependencies": {
 		"@csstools/css-tokenizer": "^3.0.4",
-		"@dnd-kit/core": "^6.3.1",
-		"@dnd-kit/sortable": "^10.0.0",
-		"@dnd-kit/utilities": "^3.2.2",
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
-		"@fontsource-variable/geist": "^5.3.0",
 		"@hello-pangea/dnd": "^18.0.0",
 		"@hookform/resolvers": "5.2.2",
 		"@mui/lab": "7.0.0",
@@ -3,7 +3,6 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import IconButton from "@mui/material/IconButton";
 import { Settings } from "lucide-react";
-import { useTheme } from "@mui/material/styles";

 export type ActionMenuItem = {
 	id: number | string;
@@ -13,7 +12,6 @@ export type ActionMenuItem = {
 };

 export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => {
-	const theme = useTheme();
 	const [anchorEl, setAnchorEl] = useState<null | any>(null);
 	const open = Boolean(anchorEl);

@@ -29,14 +27,7 @@ export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => {

 	return (
 		<div>
-			<IconButton
-				onClick={handleClick}
-				sx={{
-					"&:hover": {
-						backgroundColor: theme.palette.action.controlHover,
-					},
-				}}
-			>
+			<IconButton onClick={handleClick}>
 				<Settings
 					size={20}
 					strokeWidth={1.5}
@@ -6,13 +6,12 @@ import { useTheme } from "@mui/material/styles";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useTranslation } from "react-i18next";
 import { useMediaQuery } from "@mui/material";
-import type { DateRange } from "@/Types/Query";

 interface MonitorTimeFrameHeaderProps {
 	isLoading?: boolean;
 	hasDateRange?: boolean;
-	dateRange: DateRange;
-	setDateRange: (dateRange: DateRange) => void;
+	dateRange: string;
+	setDateRange: (dateRange: string) => void;
 }

 export const HeaderTimeRange = ({
@@ -26,7 +25,7 @@ export const HeaderTimeRange = ({
 	const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
 	const handleChange = (
 		_event: React.MouseEvent<HTMLElement>,
-		newValue: DateRange | null
+		newValue: string | null
 	) => {
 		if (newValue !== null) {
 			setDateRange(newValue);
@@ -1,12 +1,10 @@
 import Box, { type BoxProps } from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
-import { forwardRef } from "react";

-export const BaseBox = forwardRef<HTMLDivElement, BoxProps>(({ sx, ...rest }, ref) => {
+export const BaseBox = ({ sx, ...rest }: BoxProps) => {
 	const theme = useTheme();
 	return (
 		<Box
-			ref={ref}
 			{...rest}
 			sx={{
 				backgroundColor: theme.palette.background.paper,
@@ -18,6 +16,4 @@ export const BaseBox = forwardRef<HTMLDivElement, BoxProps>(({ sx, ...rest }, re
 			}}
 		/>
 	);
-});
-
-BaseBox.displayName = "BaseBox";
+};
@@ -10,10 +10,8 @@ import { useTheme } from "@mui/material/styles";
 type BaseChartProps = React.PropsWithChildren<{
 	icon?: React.ReactNode;
 	title: string;
-	rightTitle?: string;
 	width?: number | string;
 	maxWidth?: number | string;
-	flexBasis?: number | string;
 	padding?: number | string | ResponsiveStyleValue<number | string>;
 	onClick?: () => void;
 }>;
@@ -21,10 +19,8 @@ type BaseChartProps = React.PropsWithChildren<{
 export const BaseChart = ({
 	children,
 	title,
-	rightTitle,
 	width = "100%",
 	maxWidth = "100%",
-	flexBasis = "0%",
 	padding,
 	onClick,
 }: BaseChartProps) => {
@@ -36,7 +32,6 @@ export const BaseChart = ({
 				padding: padding ?? theme.spacing(LAYOUT.MD),
 				display: "flex",
 				flex: 1,
-				flexBasis,
 				width: width,
 				maxWidth: maxWidth,
 				...(onClick && {
@@ -49,27 +44,13 @@ export const BaseChart = ({
 				gap={theme.spacing(LAYOUT.MD)}
 				flex={1}
 			>
-				<Stack
-					direction="row"
-					justifyContent={"space-between"}
+				<Typography
+					variant="eyebrow"
+					color="text.secondary"
+					sx={{ overflowWrap: "anywhere" }}
 				>
-					<Typography
-						variant="eyebrow"
-						color="text.secondary"
-						sx={{ overflowWrap: "anywhere" }}
-					>
-						{title}
-					</Typography>
-					{rightTitle && (
-						<Typography
-							variant="eyebrow"
-							color="text.secondary"
-							sx={{ overflowWrap: "anywhere" }}
-						>
-							{rightTitle}
-						</Typography>
-					)}
-				</Stack>
+					{title}
+				</Typography>
 				<Box flex={1}>{children}</Box>
 			</Stack>
 		</BaseBox>
@@ -83,17 +83,12 @@ export const Breadcrumb = ({
 	const basePage = segments[0] || t("common.breadcrumbs.home");

 	const secondSegment = segments[1];
-	const thirdSegment = segments[2];
 	const isActionPage = secondSegment && actionSegments.includes(secondSegment);
 	const isDetailsPage = secondSegment && isId(secondSegment);
-	// page/section/:id routes such as docker/host/:monitorId
-	const isSectionDetailsPage = Boolean(
-		secondSegment && !isId(secondSegment) && thirdSegment && isId(thirdSegment)
-	);
-	const hasSubPage = isActionPage || isDetailsPage || isSectionDetailsPage;
+	const hasSubPage = isActionPage || isDetailsPage;

 	const getSubPageLabel = (): string => {
-		if (isActionPage || isSectionDetailsPage) {
+		if (isActionPage) {
 			return secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1);
 		}
 		return t("common.breadcrumbs.details");
@@ -39,9 +39,9 @@ export const Gauge = forwardRef<HTMLDivElement, GaugeProps>(function Gauge(
 		() => ({
 			circumference: 2 * Math.PI * radius,
 			totalSize: radius * 2 + strokeWidth * 2,
-			strokeLength: (progressWithinRange / 100) * (2 * Math.PI * radius),
+			strokeLength: (progress / 100) * (2 * Math.PI * radius),
 		}),
-		[radius, strokeWidth, progressWithinRange]
+		[radius, strokeWidth, progress]
 	);

 	const [offset, setOffset] = useState(circumference);
@@ -52,7 +52,7 @@ export const Gauge = forwardRef<HTMLDivElement, GaugeProps>(function Gauge(
 		}, 100);

 		return () => clearTimeout(timer);
-	}, [circumference, strokeLength]);
+	}, [progress, circumference, strokeLength]);

 	const fillColor = getInfraGaugeColor(progressWithinRange, theme);

@@ -123,7 +123,6 @@ export const DetailGauge = ({
 	lowerLabel,
 	lowerValue,
 	maxWidth = 225,
-	flexBasis = "0%",
 }: {
 	title: string;
 	progress: number;
@@ -132,7 +131,6 @@ export const DetailGauge = ({
 	lowerLabel?: string;
 	lowerValue?: string | number;
 	maxWidth?: number;
-	flexBasis?: number | string;
 }) => {
 	const theme = useTheme();
 	return (
@@ -140,7 +138,6 @@ export const DetailGauge = ({
 			icon={null}
 			title={title}
 			maxWidth={maxWidth}
-			flexBasis={flexBasis}
 		>
 			<Stack
 				alignItems={"center"}
@@ -8,7 +8,7 @@ interface IconProps {
 	color?: string;
 }

-const Icon = ({ icon: Icon, size = 16, strokeWidth = 1.5, color }: IconProps) => {
+const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5, color }: IconProps) => {
 	return (
 		<Icon
 			size={size}
@@ -37,8 +37,8 @@ export const OfflineBanner = ({ visible }: OfflineBannerProps) => {
 				left: 0,
 				right: 0,
 				zIndex: theme.zIndex.snackbar,
-				backgroundColor: theme.palette.error.dark,
-				color: "#FFFFFF",
+				backgroundColor: theme.palette.error.main,
+				color: theme.palette.error.contrastText,
 				px: theme.spacing(8),
 				py: theme.spacing(4),
 				transition: "top 1s ease-in-out",
@@ -6,7 +6,6 @@ import { Link as RouterLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material/styles";
 import { ChevronLeft, HelpCircle, FileText, Code } from "lucide-react";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";

 import type { ReactNode } from "react";

@@ -110,7 +109,7 @@ export const PageHeader = ({
 							fontSize: 14,
 							color: theme.palette.text.secondary,
 							lineHeight: 1.55,
-							maxWidth: "108ch",
+							maxWidth: 640,
 						}}
 					>
 						{description}
@@ -143,7 +142,7 @@ export const PageHeader = ({
 								alignItems: "center",
 								justifyContent: "center",
 								width: 36,
-								height: INPUT_BASE_HEIGHT,
+								height: 32,
 								color: theme.palette.text.secondary,
 								borderRight:
 									idx < linkItems.length - 1
@@ -1,5 +1,4 @@
 import { Box, Stack, useTheme } from "@mui/material";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";

 interface SkeletonCardProps {
 	width?: number | string | { xs?: number | string; md?: number | string };
@@ -45,7 +44,7 @@ export const SkeletonCard = ({

 	const blockStyle = {
 		width: 55,
-		height: INPUT_BASE_HEIGHT,
+		height: 34,
 		borderRadius: theme.shape.borderRadius,
 		background: theme.palette.secondary.main,
 		border: `1px solid ${theme.palette.divider}`,
@@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
-import { darken, lighten } from "@mui/material/styles";
+import { lighten } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import type { PaletteKey } from "@/Utils/Theme/Theme";
 import { BaseBox, TooltipWithInfo } from "@/Components/design-elements";
@@ -11,18 +11,17 @@ import type { SxProps } from "@mui/material";
 type GradientBox = React.PropsWithChildren<{
 	palette?: PaletteKey;
 	sx?: SxProps;
-	interactive?: boolean;
 }>;

-export const GradientBox = ({ children, palette, sx, interactive }: GradientBox) => {
+export const GradientBox = ({ children, palette, sx }: GradientBox) => {
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isLight = theme.palette.mode === "light";
 	const paper = theme.palette.background.paper;
-	const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08);
+	const paperStart = lighten(paper, isLight ? 0.06 : 0.08);
 	const paperEnd = paper;
 	const bg = palette
-		? `linear-gradient(135deg, ${lighten(theme.palette[palette].main, 0.12)} 0%, ${theme.palette[palette].main} 100%)`
+		? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`
 		: `linear-gradient(135deg, ${paperStart} 0%, ${paperEnd} 100%)`;

 	return (
@@ -31,12 +30,6 @@ export const GradientBox = ({ children, palette, sx, interactive }: GradientBox)
 				padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
 				width: isSmall ? `100%` : `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
 				background: bg,
-				...(interactive && {
-					cursor: "pointer",
-					"&:hover": {
-						backgroundImage: `linear-gradient(${theme.palette.action.rowHover}, ${theme.palette.action.rowHover}), ${bg}`,
-					},
-				}),
 				...sx,
 			}}
 		>
@@ -69,8 +62,10 @@ export const StatBox = ({
 	return (
 		<GradientBox
 			palette={palette}
-			interactive={Boolean(onClick)}
-			sx={{ ...(sx as object) }}
+			sx={{
+				...(sx as object),
+				...(onClick ? { cursor: "pointer", "&:hover": { opacity: 0.95 } } : {}),
+			}}
 		>
 			<Stack onClick={onClick}>
 				<Box sx={{ display: "flex", alignItems: "center", gap: theme.spacing(2) }}>
@@ -5,7 +5,7 @@ import { BaseBox } from "@/Components/design-elements";
 import { useTranslation } from "react-i18next";
 import type { SxProps } from "@mui/material";

-import { alpha, useTheme } from "@mui/material/styles";
+import { useTheme } from "@mui/material/styles";

 type StatusBoxProps = React.PropsWithChildren<{
 	children: React.ReactNode;
@@ -34,8 +34,8 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => {
 				sx={{
 					pointerEvents: "none",
 					backgroundImage: `
-						linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px),
-						linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px)
+						linear-gradient(${theme.palette.divider} 1px, transparent 1px),
+						linear-gradient(90deg, ${theme.palette.divider} 1px, transparent 1px)
 					`,
 					backgroundSize: "24px 24px",
 					maskImage:
@@ -1,19 +1,12 @@
 import Box from "@mui/material/Box";
 import { BaseBox } from "@/Components/design-elements";
 import Typography from "@mui/material/Typography";
-import Stack from "@mui/material/Stack";

 import type { MonitorStatus } from "@/Types/Monitor";
 import type { SxProps } from "@mui/material/styles";
-import {
-	getDockerStatePalette,
-	getStatusPalette,
-	getValuePalette,
-} from "@/Utils/MonitorUtils";
+import { getStatusPalette, getValuePalette } from "@/Utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import type { DockerContainerState } from "@/Types/Check";
-import { SPACING } from "@/Utils/Theme/constants";

 export const ValueTypes = ["positive", "negative", "neutral"] as const;
 export type ValueType = (typeof ValueTypes)[number];
@@ -117,36 +110,3 @@ export const ColoredLabel = ({ text, color }: { text: string; color: string }) =
 		</BaseBox>
 	);
 };
-
-export const DockerStateLabel = ({
-	state,
-	name,
-	image,
-}: {
-	state: DockerContainerState;
-	name: string;
-	image: string;
-}) => {
-	const palette = getDockerStatePalette(state);
-	const theme = useTheme();
-
-	return (
-		<Stack
-			direction="row"
-			gap={SPACING.LG}
-			alignItems={"center"}
-		>
-			<Box
-				width={7}
-				height={7}
-				bgcolor={theme.palette[palette].light}
-				borderRadius="50%"
-				marginRight="5px"
-			/>
-			<Stack>
-				<Typography>{name}</Typography>
-				<Typography variant="body2">{image}</Typography>
-			</Stack>
-		</Stack>
-	);
-};
@@ -52,7 +52,6 @@ type DataTableProps<T extends { id?: string | number; _id?: string | number }> =
 	emptyViewText?: string;
 	emptyViewPositive?: boolean;
 	getRowSx?: (row: T) => SxProps<Theme>;
-	isRowSelected?: (row: T) => boolean;
 };

 export function DataTable<
@@ -71,7 +70,6 @@ export function DataTable<
 	emptyViewText,
 	emptyViewPositive,
 	getRowSx,
-	isRowSelected,
 }: DataTableProps<T>) {
 	const theme = useTheme();
 	const [expanded, setExpanded] = useState<(string | number) | null>(null);
@@ -82,22 +80,6 @@ export function DataTable<

 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));

-	const hasTextSelectionWithin = (element: Element) => {
-		const selection = window.getSelection();
-		if (!selection || selection.isCollapsed || !selection.toString().trim()) {
-			return false;
-		}
-		return (
-			selection.anchorNode !== null &&
-			element.contains(
-				selection.anchorNode.nodeType === Node.TEXT_NODE
-					? selection.anchorNode.parentNode
-					: selection.anchorNode
-			)
-		);
-	};
-	const isInteractive = Boolean(onRowClick) || expandableRows;
-
 	if (data.length === 0 || headers.length === 0) {
 		return (
 			<EmptyView
@@ -117,10 +99,7 @@ export function DataTable<
 					keys.push(key);
 					return (
 						<Stack
-							onClick={(e) => {
-								if (hasTextSelectionWithin(e.currentTarget)) return;
-								if (onRowClick) onRowClick(row);
-							}}
+							onClick={() => (onRowClick ? onRowClick(row) : null)}
 							spacing={theme.spacing(LAYOUT.XS)}
 							sx={{
 								borderStyle: "solid",
@@ -129,11 +108,6 @@ export function DataTable<
 								borderRadius: theme.shape.borderRadius,
 								padding: theme.spacing(LAYOUT.XS),
 								cursor: onRowClick ? "pointer" : "default",
-								...(onRowClick && {
-									"&:hover": {
-										backgroundColor: theme.palette.action.rowHover,
-									},
-								}),
 							}}
 							key={key}
 						>
@@ -217,7 +191,7 @@ export function DataTable<
 					"& :is(th)": {
 						backgroundColor: theme.palette.background.paper,
 						color: theme.palette.text.secondary,
-						fontWeight: 600,
+						fontWeight: 500,
 						textTransform: "uppercase",
 						letterSpacing: "0.08em",
 						padding: `${theme.spacing(SPACING.LG)} ${theme.spacing(LAYOUT.MD)}`,
@@ -253,29 +227,15 @@ export function DataTable<
 					{data.map((row) => {
 						const key = row.id || row._id || Math.random();
 						const isExpanded = expanded === key;
-						const selected = isRowSelected?.(row);

 						return (
 							<Fragment key={key}>
 								<TableRow
 									sx={{
-										cursor: isInteractive ? "pointer" : "default",
-										...(isInteractive && {
-											"&:hover .MuiTableCell-root": {
-												backgroundColor: selected
-													? theme.palette.action.selectedHover
-													: theme.palette.action.rowHover,
-											},
-										}),
-										...(selected && {
-											"& .MuiTableCell-root": {
-												backgroundColor: theme.palette.action.selected,
-											},
-										}),
+										cursor: onRowClick ? "pointer" : "default",
 										...(getRowSx?.(row) as object),
 									}}
-									onClick={(e) => {
-										if (hasTextSelectionWithin(e.currentTarget)) return;
+									onClick={() => {
 										if (expandableRows) handleExpand(row);
 										else if (onRowClick) onRowClick(row);
 									}}
@@ -332,12 +292,6 @@ interface TablePaginationActionsProps {
 	onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
 }

-const controlHoverSx = (theme: Theme): SxProps<Theme> => ({
-	"&:hover": {
-		backgroundColor: theme.palette.action.controlHover,
-	},
-});
-
 function TablePaginationActions(props: TablePaginationActionsProps) {
 	const theme = useTheme();
 	const { count, page, rowsPerPage, onPageChange } = props;
@@ -367,7 +321,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleFirstPageButtonClick}
 				disabled={page === 0}
 				aria-label="first page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsRight
@@ -385,7 +338,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleBackButtonClick}
 				disabled={page === 0}
 				aria-label="previous page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronRight
@@ -403,7 +355,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleNextButtonClick}
 				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 				aria-label="next page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronLeft
@@ -421,7 +372,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleLastPageButtonClick}
 				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 				aria-label="last page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsLeft
@@ -469,7 +419,6 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleFirstPageButtonClick}
 				disabled={page === 0}
 				aria-label="first page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsRight
@@ -487,7 +436,6 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleBackButtonClick}
 				disabled={page === 0}
 				aria-label="previous page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronRight
@@ -505,7 +453,6 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleNextButtonClick}
 				disabled={hasMore === false}
 				aria-label="next page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronLeft
@@ -523,7 +470,6 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				<IconButton
 					disabled={hasMore === false}
 					aria-label="next page"
-					sx={controlHoverSx(theme)}
 				>
 					<Ellipsis
 						size={20}
@@ -1,8 +1,6 @@
 import MuiTabs from "@mui/material/Tabs";
 import type { TabsProps } from "@mui/material/Tabs";
 import { useTheme } from "@mui/material/styles";
-import { typographyLevels } from "@/Utils/Theme/Palette";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 interface CustomTabsProps extends TabsProps {}

 export const Tabs = (props: CustomTabsProps) => {
@@ -10,7 +8,7 @@ export const Tabs = (props: CustomTabsProps) => {
 	return (
 		<MuiTabs
 			sx={{
-				minHeight: INPUT_BASE_HEIGHT,
+				minHeight: 34,
 				borderBottom: `1px solid ${theme.palette.divider}`,
 				"& .MuiTabs-indicator": {
 					backgroundColor: theme.palette.primary.main,
@@ -40,9 +38,9 @@ export const Tab = (props: CustomTabProps) => {
 			iconPosition="start"
 			sx={{
 				textTransform: "none",
-				fontSize: typographyLevels.m,
+				fontSize: 14,
 				fontWeight: 500,
-				minHeight: INPUT_BASE_HEIGHT,
+				minHeight: 34,
 				padding: theme.spacing(1, 0),
 				paddingBottom: 0,
 				minWidth: "auto",
@@ -50,6 +48,7 @@ export const Tab = (props: CustomTabProps) => {
 				color: theme.palette.text.secondary,
 				"&.Mui-selected": {
 					color: theme.palette.primary.main,
+					fontWeight: 600,
 				},
 				"&:hover": {
 					color: theme.palette.text.secondary,
@@ -1,7 +1,7 @@
 import Button from "@mui/material/Button";
 import type { ButtonProps } from "@mui/material/Button";
 import { useTheme, darken } from "@mui/material/styles";
-import { INPUT_BASE_HEIGHT, HOVER } from "@/Utils/Theme/constants";
+import { HOVER } from "@/Utils/Theme/constants";

 const PALETTE_COLORS = [
 	"primary",
@@ -43,8 +43,7 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 			{...props}
 			sx={{
 				textTransform: "none",
-				height: INPUT_BASE_HEIGHT,
-				lineHeight: 1.2,
+				height: 34,
 				fontWeight: 400,
 				borderRadius: 2,
 				whiteSpace: "nowrap",
@@ -4,7 +4,6 @@ import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useTheme } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "@/Components/inputs/FieldLabel";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";

 interface ColorPickerProps extends MuiColorInputProps {
 	fieldLabel?: string;
@@ -19,7 +18,7 @@ export const ColorInput = ({ fieldLabel, required, ...props }: ColorPickerProps)
 			sx={{
 				"& .MuiOutlinedInput-root": {
 					borderRadius: theme.shape.borderRadius,
-					height: INPUT_BASE_HEIGHT,
+					height: 34,
 					fontSize: typographyLevels.base,
 				},
 				"& .MuiOutlinedInput-notchedOutline": {
@@ -8,7 +8,6 @@ import { FieldLabel } from "./FieldLabel";
 import { Calendar } from "lucide-react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";

 interface DatePickerComponentProps extends Omit<DatePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
@@ -56,7 +55,7 @@ export const DatePickerComponent = ({
 								flexDirection: "row-reverse",
 							},
 							"& input": {
-								minHeight: INPUT_BASE_HEIGHT,
+								minHeight: 34,
 								p: 0,
 								pl: theme.spacing(3),
 								pr: theme.spacing(5),
@@ -67,9 +66,7 @@ export const DatePickerComponent = ({
 							},
 							"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
 								{
-									borderColor: error
-										? theme.palette.error.main
-										: theme.palette.text.disabled,
+									borderColor: error ? theme.palette.error.main : theme.palette.divider,
 								},
 						},
 					},
@@ -6,7 +6,6 @@ import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
 import { ChevronDown } from "lucide-react";
 import Typography from "@mui/material/Typography";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";

 interface SelectInputProps<T> extends Omit<SelectProps<T>, "label"> {
 	fieldLabel?: string;
@@ -72,7 +71,7 @@ const SelectInputInner = <T,>(
 				/>
 			)}
 			sx={{
-				height: `${INPUT_BASE_HEIGHT}px`,
+				height: "34px",
 				"& .MuiSelect-select": {
 					display: "flex",
 					alignItems: "center",
@@ -84,6 +83,10 @@ const SelectInputInner = <T,>(
 				},
 				"& .MuiOutlinedInput-notchedOutline": {
 					borderRadius: theme.shape.borderRadius,
+					borderColor: theme.palette.divider,
+				},
+				"&:hover .MuiOutlinedInput-notchedOutline": {
+					borderColor: theme.palette.divider,
 				},
 				...props.sx,
 			}}
@@ -5,7 +5,7 @@ import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
-import { INPUT_BASE_HEIGHT, LAYOUT } from "@/Utils/Theme/constants";
+import { LAYOUT } from "@/Utils/Theme/constants";

 interface TextInputProps extends Omit<TextFieldProps, "label"> {
 	fieldLabel?: string;
@@ -22,10 +22,16 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
 		width: "100%",
 		"& .MuiOutlinedInput-root": {
 			borderRadius: theme.shape.borderRadius,
-			height: props.multiline ? "auto" : INPUT_BASE_HEIGHT,
+			height: props.multiline ? "auto" : 34,
 			fontSize: typographyLevels.base,
 			overflow: "hidden",
 		},
+		"& .MuiOutlinedInput-notchedOutline": {
+			borderColor: theme.palette.divider,
+		},
+		"&:hover .MuiOutlinedInput-notchedOutline": {
+			borderColor: theme.palette.divider,
+		},
 		"& .MuiFormHelperText-root": {
 			marginLeft: 0,
 			marginRight: 0,
@@ -33,7 +39,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
 		},
 		"& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active":
 			{
-				WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.paper} inset !important`,
+				WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.default} inset !important`,
 				WebkitTextFillColor: `${theme.palette.text.primary} !important`,
 				caretColor: theme.palette.text.primary,
 				transition: "background-color 5000s ease-in-out 0s",
@@ -7,7 +7,6 @@ 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";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";

 interface TimePickerComponentProps extends Omit<MobileTimePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
@@ -34,7 +33,7 @@ export const TimePickerComponent = ({
 						sx: {
 							width: "fit-content",
 							"& input": {
-								minHeight: INPUT_BASE_HEIGHT,
+								minHeight: 34,
 								p: 0,
 								px: theme.spacing(5),
 							},
@@ -4,7 +4,6 @@ import type { ToggleButtonProps } from "@mui/material/ToggleButton";
 import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
 import { useTheme } from "@mui/material/styles";
 import { alpha } from "@mui/material/styles";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";

 export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 	const theme = useTheme();
@@ -21,7 +20,7 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 			sx={{
 				px: 8,
 				textTransform: "none",
-				height: INPUT_BASE_HEIGHT,
+				height: 34,
 				fontWeight: 400,
 				whiteSpace: "nowrap",
 				textOverflow: "ellipsis",
@@ -35,6 +34,7 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 				"&.Mui-selected": {
 					backgroundColor: selectedBg,
 					color: theme.palette.text.primary,
+					fontWeight: 500,
 					"&:hover": {
 						backgroundColor: selectedHoverBg,
 					},
@@ -9,11 +9,12 @@ import type { Tag } from "@/Types/Tag";
 import { Typography, useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";

-const types = ["http", "ping", "port", "game", "grpc", "websocket"];
+const types = ["http", "ping", "port", "docker", "game", "grpc", "websocket"];
 const typeDisplayNames: Record<string, string> = {
 	http: "HTTP",
 	ping: "Ping",
 	port: "Port",
+	docker: "Docker",
 	game: "Game",
 	grpc: "gRPC",
 	websocket: "WebSocket",
@@ -60,22 +60,20 @@ export const HeaderMonitorControls = ({
 				direction={{ xs: "column", md: "row" }}
 				gap={theme.spacing(2)}
 			>
-				{isAdmin && (
-					<Button
-						variant="contained"
-						color="secondary"
-						loading={isPosting}
-						startIcon={<Icon icon={Mail} />}
-						onClick={async () => {
-							await post(`/notifications/test/all`, { monitorId: monitor.id });
-						}}
-						sx={{
-							whiteSpace: "nowrap",
-						}}
-					>
-						{t("common.buttons.testNotifications")}
-					</Button>
-				)}
+				<Button
+					variant="contained"
+					color="secondary"
+					loading={isPosting}
+					startIcon={<Icon icon={Mail} />}
+					onClick={async () => {
+						await post(`/notifications/test/all`, { monitorId: monitor.id });
+					}}
+					sx={{
+						whiteSpace: "nowrap",
+					}}
+				>
+					{t("common.buttons.testNotifications")}
+				</Button>
 				<Button
 					variant="contained"
 					color="secondary"
@@ -35,7 +35,7 @@ export const MonitorListPage = ({
 	headerKey,
 	page,
 	actionLink,
-	controller,
+	controller: c,
 	bulkActions,
 	showTypeFilter,
 	summaryProps,
@@ -48,14 +48,14 @@ export const MonitorListPage = ({
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isAdmin = useIsAdmin();
-	const isLoading = controller.isLoading || Boolean(extraLoading);
+	const isLoading = c.isLoading || Boolean(extraLoading);

 	return (
 		<MonitorBasePageWithStates
 			headerKey={headerKey}
 			loading={isLoading}
-			error={controller.error || extraError}
-			totalCount={controller.effectiveTotalCount}
+			error={c.error || extraError}
+			totalCount={c.effectiveTotalCount}
 			page={page}
 			actionLink={actionLink}
 			priorityFallback={priorityFallback}
@@ -66,7 +66,7 @@ export const MonitorListPage = ({
 				isAdmin={isAdmin}
 			/>
 			<HeaderMonitorsSummary
-				summary={controller.summary}
+				summary={c.summary}
 				{...summaryProps}
 			/>
 			<Stack
@@ -78,27 +78,27 @@ export const MonitorListPage = ({
 					{...(showTypeFilter === false
 						? { showTypes: false }
 						: {
-								selectedTypes: controller.selectedTypes,
-								setSelectedTypes: controller.setSelectedTypes,
+								selectedTypes: c.selectedTypes,
+								setSelectedTypes: c.setSelectedTypes,
 							})}
-					selectedStatus={controller.selectedStatus}
-					setSelectedStatus={controller.setSelectedStatus}
-					selectedState={controller.selectedState}
-					setSelectedState={controller.setSelectedState}
-					tagOptions={controller.tags ?? []}
-					selectedTags={controller.selectedTags}
-					setSelectedTags={controller.setSelectedTags}
-					onClearFilters={controller.handleClearFilters}
+					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={controller.search}
+					value={c.search}
 					onChange={(event) => {
-						controller.setSearch(event.target.value);
+						c.setSearch(event.target.value);
 					}}
 				/>
 			</Stack>
-			{controller.selectedTags.length > 0 && (
+			{c.selectedTags.length > 0 && (
 				<Stack
 					direction={isSmall ? "column" : "row"}
 					alignItems={isSmall ? "flex-start" : "center"}
@@ -108,8 +108,8 @@ export const MonitorListPage = ({
 					<Typography color={theme.palette.text.secondary}>
 						{t("pages.uptime.filters.activeTags")}
 					</Typography>
-					{controller.selectedTags.map((tagId) => {
-						const tag = controller.tags?.find((t) => t.id === tagId);
+					{c.selectedTags.map((tagId) => {
+						const tag = c.tags?.find((t) => t.id === tagId);
 						if (!tag) return null;
 						return (
 							<ColoredLabel
@@ -123,20 +123,20 @@ export const MonitorListPage = ({
 			)}
 			{bulkActions && !isLoading && (
 				<BulkActionsBar
-					selectedCount={controller.selectedRows.length}
-					onCancel={controller.handleCancelSelection}
+					selectedCount={c.selectedRows.length}
+					onCancel={c.handleCancelSelection}
 				>
 					<Button
 						size="small"
 						startIcon={<Play size={16} />}
-						onClick={controller.handleBulkResume}
+						onClick={c.handleBulkResume}
 					>
 						{t("common.buttons.resume")}
 					</Button>
 					<Button
 						size="small"
 						startIcon={<Pause size={16} />}
-						onClick={controller.handleBulkPause}
+						onClick={c.handleBulkPause}
 					>
 						{t("common.buttons.pause")}
 					</Button>
@@ -144,12 +144,12 @@ export const MonitorListPage = ({
 			)}
 			{children}
 			<Dialog
-				open={controller.isDialogOpen}
+				open={c.isDialogOpen}
 				title={t("common.dialogs.delete.title")}
 				content={t("common.dialogs.delete.description")}
-				onConfirm={controller.handleConfirmDelete}
-				onCancel={controller.handleCancelDelete}
-				loading={controller.isDeleting}
+				onConfirm={c.handleConfirmDelete}
+				onCancel={c.handleCancelDelete}
+				loading={c.isDeleting}
 			/>
 		</MonitorBasePageWithStates>
 	);
@@ -0,0 +1,34 @@
+export const computeYAxisCap = (values: number[]): number | undefined => {
+	const sorted = values.slice().sort((a, b) => a - b);
+	if (sorted.length < 2) return undefined;
+	const p95 = sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.95))];
+	return p95 > 0 ? Math.ceil(p95 * 2) : undefined;
+};
+
+export const PHASE_KEYS = [
+	"avgDns",
+	"avgTcp",
+	"avgTls",
+	"avgRequest",
+	"avgFirstByte",
+	"avgDownload",
+] as const;
+
+export const PHASE_COLOR_KEYS = {
+	avgDns: "dns",
+	avgTcp: "tcp",
+	avgTls: "tls",
+	avgRequest: "request",
+	avgFirstByte: "firstByte",
+	avgDownload: "download",
+} as const;
+
+// i18n keys, resolved with t() at render
+export const PHASE_LABEL_KEYS: Record<(typeof PHASE_KEYS)[number], string> = {
+	avgDns: "common.charts.phases.dns",
+	avgTcp: "common.charts.phases.tcp",
+	avgTls: "common.charts.phases.tls",
+	avgRequest: "common.charts.phases.request",
+	avgFirstByte: "common.charts.phases.firstByte",
+	avgDownload: "common.charts.phases.download",
+};
@@ -1,113 +0,0 @@
-export const computeYAxisCap = (values: number[]): number | undefined => {
-	const sorted = values.slice().sort((a, b) => a - b);
-	if (sorted.length < 2) return undefined;
-	const p95 = sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.95))];
-	return p95 > 0 ? Math.ceil(p95 * 2) : undefined;
-};
-
-export const PHASE_KEYS = [
-	"avgDns",
-	"avgTcp",
-	"avgTls",
-	"avgRequest",
-	"avgFirstByte",
-	"avgDownload",
-] as const;
-
-export const PHASE_COLOR_KEYS = {
-	avgDns: "dns",
-	avgTcp: "tcp",
-	avgTls: "tls",
-	avgRequest: "request",
-	avgFirstByte: "firstByte",
-	avgDownload: "download",
-} as const;
-
-// i18n keys, resolved with t() at render
-export const PHASE_LABEL_KEYS: Record<(typeof PHASE_KEYS)[number], string> = {
-	avgDns: "common.charts.phases.dns",
-	avgTcp: "common.charts.phases.tcp",
-	avgTls: "common.charts.phases.tls",
-	avgRequest: "common.charts.phases.request",
-	avgFirstByte: "common.charts.phases.firstByte",
-	avgDownload: "common.charts.phases.download",
-};
-
-export const AREA_COLORS = [
-	// Blues
-	"#3182bd", // Deep blue
-	"#6baed6", // Medium blue
-	"#9ecae1", // Light blue
-
-	// Greens
-	"#74c476", // Soft green
-	"#a1d99b", // Light green
-	"#c7e9c0", // Pale green
-
-	// Oranges
-	"#fdae6b", // Warm orange
-	"#fdd0a2", // Light orange
-	"#feedde", // Pale orange
-
-	// Purples
-	"#9467bd", // Lavender
-	"#a55194", // Deep magenta
-	"#c994c7", // Soft magenta
-
-	// Reds
-	"#ff9896", // Soft red
-	"#de2d26", // Deep red
-	"#fc9272", // Medium red
-
-	// Cyans/Teals
-	"#17becf", // Cyan
-	"#7fcdbb", // Teal
-	"#a1dab4", // Light teal
-
-	// Yellows
-	"#fec44f", // Mustard
-	"#fee391", // Light yellow
-	"#ffffd4", // Pale yellow
-
-	// Additional colors
-	"#e377c2", // Soft pink
-	"#bcbd22", // Olive
-	"#2ca02c", // Vibrant green
-];
-
-export const createGradient = ({
-	id,
-	startColor,
-	endColor,
-	startOpacity = 0.8,
-	endOpacity = 0,
-	direction = "vertical",
-}: {
-	id: string;
-	startColor: string;
-	endColor: string;
-	startOpacity?: number;
-	endOpacity?: number;
-	direction?: "vertical" | "horizontal";
-}) => (
-	<defs>
-		<linearGradient
-			id={id}
-			x1={direction === "vertical" ? "0" : "0"}
-			y1={direction === "vertical" ? "0" : "0"}
-			x2={direction === "vertical" ? "0" : "1"}
-			y2={direction === "vertical" ? "1" : "0"}
-		>
-			<stop
-				offset="0%"
-				stopColor={startColor}
-				stopOpacity={startOpacity}
-			/>
-			<stop
-				offset="100%"
-				stopColor={endColor}
-				stopOpacity={endOpacity}
-			/>
-		</linearGradient>
-	</defs>
-);
@@ -1,70 +0,0 @@
-import { BaseChart } from "@/Components/design-elements";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
-
-// Types
-import type { DockerContainerStats } from "@/Types/Monitor";
-
-// Hooks
-import { useTheme } from "@mui/material";
-import { Fragment, useId } from "react";
-
-// Utils
-import { createGradient } from "@/Components/monitors/charts/ChartUtils";
-interface HistogramDockerContainerProps {
-	title: string;
-	rightTitle: string;
-	stats: DockerContainerStats;
-	dataKey: string;
-	strokeColor: string;
-	gradientStartColor: string;
-}
-
-export const HistogramDockerContainer = ({
-	title,
-	rightTitle,
-	stats,
-	dataKey,
-	strokeColor,
-	gradientStartColor,
-}: HistogramDockerContainerProps) => {
-	const uniqueId = useId();
-	const theme = useTheme();
-	const gradientId = `gradient-${uniqueId}`;
-
-	return (
-		<BaseChart
-			icon="null"
-			title={title}
-			rightTitle={rightTitle}
-		>
-			<ResponsiveContainer
-				width="100%"
-				height={200}
-			>
-				<AreaChart data={stats.aggregate}>
-					<CartesianGrid
-						strokeWidth={1}
-						stroke={theme.palette.divider}
-						strokeOpacity={1}
-						fill="transparent"
-						vertical={false}
-					/>
-					<Fragment>
-						{createGradient({
-							id: gradientId,
-							startColor: gradientStartColor,
-							endColor: "transparent",
-							direction: "vertical",
-						})}
-						<Area
-							dataKey={dataKey}
-							type="monotone"
-							stroke={strokeColor}
-							fill={`url(#${gradientId})`}
-						/>
-					</Fragment>
-				</AreaChart>
-			</ResponsiveContainer>
-		</BaseChart>
-	);
-};
@@ -12,7 +12,85 @@ import { XTick } from "@/Components/monitors/charts/XTick";

 import { useTheme } from "@mui/material/styles";
 import type { HardwareCheckStats } from "@/Types/Monitor";
-import { AREA_COLORS, createGradient } from "@/Components/monitors/charts/ChartUtils";
+
+const AREA_COLORS = [
+	// Blues
+	"#3182bd", // Deep blue
+	"#6baed6", // Medium blue
+	"#9ecae1", // Light blue
+
+	// Greens
+	"#74c476", // Soft green
+	"#a1d99b", // Light green
+	"#c7e9c0", // Pale green
+
+	// Oranges
+	"#fdae6b", // Warm orange
+	"#fdd0a2", // Light orange
+	"#feedde", // Pale orange
+
+	// Purples
+	"#9467bd", // Lavender
+	"#a55194", // Deep magenta
+	"#c994c7", // Soft magenta
+
+	// Reds
+	"#ff9896", // Soft red
+	"#de2d26", // Deep red
+	"#fc9272", // Medium red
+
+	// Cyans/Teals
+	"#17becf", // Cyan
+	"#7fcdbb", // Teal
+	"#a1dab4", // Light teal
+
+	// Yellows
+	"#fec44f", // Mustard
+	"#fee391", // Light yellow
+	"#ffffd4", // Pale yellow
+
+	// Additional colors
+	"#e377c2", // Soft pink
+	"#bcbd22", // Olive
+	"#2ca02c", // Vibrant green
+];
+
+const createGradient = ({
+	id,
+	startColor,
+	endColor,
+	startOpacity = 0.8,
+	endOpacity = 0,
+	direction = "vertical",
+}: {
+	id: string;
+	startColor: string;
+	endColor: string;
+	startOpacity?: number;
+	endOpacity?: number;
+	direction?: "vertical" | "horizontal";
+}) => (
+	<defs>
+		<linearGradient
+			id={id}
+			x1={direction === "vertical" ? "0" : "0"}
+			y1={direction === "vertical" ? "0" : "0"}
+			x2={direction === "vertical" ? "0" : "1"}
+			y2={direction === "vertical" ? "1" : "0"}
+		>
+			<stop
+				offset="0%"
+				stopColor={startColor}
+				stopOpacity={startOpacity}
+			/>
+			<stop
+				offset="100%"
+				stopColor={endColor}
+				stopOpacity={endOpacity}
+			/>
+		</linearGradient>
+	</defs>
+);

 export const HistogramInfrastructure = ({
 	dateRange,
@@ -1,7 +1,6 @@
 import { Icon } from "@/Components/design-elements";

 import {
-	LayoutDashboard,
 	Globe,
 	Gauge,
 	Link,
@@ -20,99 +19,68 @@ import {
 	Users,
 	Tag,
 	Waypoints,
-	Container,
 } from "lucide-react";
 export const getMenu = (t: Function) => {
 	return [
 		{
-			group: t("components.sidebar.menu.groups.monitoring"),
-			items: [
-				{
-					name: t("components.sidebar.menu.dashboard"),
-					path: "dashboard",
-					icon: <Icon icon={LayoutDashboard} />,
-				},
-				{
-					name: t("components.sidebar.menu.uptime"),
-					path: "uptime",
-					icon: <Icon icon={Globe} />,
-				},
-				{
-					name: t("components.sidebar.menu.docker"),
-					path: "docker",
-					icon: <Icon icon={Container} />,
-				},
-				{
-					name: t("components.sidebar.menu.infrastructure"),
-					path: "infrastructure",
-					icon: <Icon icon={Link} />,
-				},
-				{
-					name: t("components.sidebar.menu.pagespeed"),
-					path: "pagespeed",
-					icon: <Icon icon={Gauge} />,
-				},
-			],
+			name: t("components.sidebar.menu.uptime"),
+			path: "uptime",
+			icon: <Icon icon={Globe} />,
 		},
 		{
-			group: t("components.sidebar.menu.groups.alerting"),
-			items: [
-				{
-					name: t("components.sidebar.menu.incidents"),
-					path: "incidents",
-					icon: <Icon icon={AlertTriangle} />,
-				},
-				{
-					name: t("components.sidebar.menu.notifications"),
-					path: "notifications",
-					icon: <Icon icon={Bell} />,
-				},
-				{
-					name: t("components.sidebar.menu.maintenance"),
-					path: "maintenance",
-					icon: <Icon icon={Wrench} />,
-				},
-			],
+			name: t("components.sidebar.menu.pagespeed"),
+			path: "pagespeed",
+			icon: <Icon icon={Gauge} />,
 		},
 		{
-			group: t("components.sidebar.menu.groups.reporting"),
-			items: [
-				{
-					name: t("components.sidebar.menu.statusPages"),
-					path: "status",
-					icon: <Icon icon={Wifi} />,
-				},
-				{
-					name: t("components.sidebar.menu.checks"),
-					path: "checks",
-					icon: <Icon icon={FileText} />,
-				},
-				{
-					name: t("components.sidebar.menu.logs"),
-					path: "logs",
-					icon: <Icon icon={ScrollText} />,
-				},
-			],
+			name: t("components.sidebar.menu.infrastructure"),
+			path: "infrastructure",
+			icon: <Icon icon={Link} />,
 		},
 		{
-			group: t("components.sidebar.menu.groups.configuration"),
-			items: [
-				{
-					name: t("components.sidebar.menu.tags"),
-					path: "tags",
-					icon: <Icon icon={Tag} />,
-				},
-				{
-					name: t("components.sidebar.menu.proxies"),
-					path: "proxies",
-					icon: <Icon icon={Waypoints} />,
-				},
-				{
-					name: t("components.sidebar.menu.settings"),
-					path: "settings",
-					icon: <Icon icon={Settings} />,
-				},
-			],
+			name: t("components.sidebar.menu.notifications"),
+			path: "notifications",
+			icon: <Icon icon={Bell} />,
+		},
+		{
+			name: t("components.sidebar.menu.tags"),
+			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",
+			icon: <Icon icon={FileText} />,
+		},
+		{
+			name: t("components.sidebar.menu.incidents"),
+			path: "incidents",
+			icon: <Icon icon={AlertTriangle} />,
+		},
+		{
+			name: t("components.sidebar.menu.statusPages"),
+			path: "status",
+			icon: <Icon icon={Wifi} />,
+		},
+		{
+			name: t("components.sidebar.menu.maintenance"),
+			path: "maintenance",
+			icon: <Icon icon={Wrench} />,
+		},
+		{
+			name: t("components.sidebar.menu.logs"),
+			path: "logs",
+			icon: <Icon icon={ScrollText} />,
+		},
+		{
+			name: t("components.sidebar.menu.settings"),
+			icon: <Icon icon={Settings} />,
+			path: "settings",
 		},
 	];
 };
@@ -25,10 +25,11 @@ export const NavItem = ({
 	const iconStroke = selected
 		? theme.palette.sidebar.accent
 		: theme.palette.text.secondary;
+
 	const buttonBgColor = selected ? theme.palette.action.selected : "transparent";
 	const buttonBgHoverColor = selected
-		? theme.palette.action.selectedHover
-		: theme.palette.action.rowHover;
+		? theme.palette.action.selected
+		: theme.palette.action.hover;
 	const fontWeight = selected ? 600 : 400;
 	return (
 		<Tooltip
@@ -1,12 +1,9 @@
 import { useEffect } from "react";
 import Backdrop from "@mui/material/Backdrop";
 import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
 import List from "@mui/material/List";
 import Divider from "@mui/material/Divider";
 import { LAYOUT } from "@/Utils/Theme/constants";
-import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useSidebar } from "@/Hooks/useSidebar.js";
 import { Logo } from "@/Components/sidebar/Logo";
 import { getMenu, getAccountMenu } from "@/Components/sidebar/Menu";
@@ -32,7 +29,7 @@ export const Sidebar = () => {
 	const navigate = useNavigate();
 	const location = useLocation();
 	const { t } = useTranslation();
-	const { width, transition, transitionTiming, collapsed } = useSidebar();
+	const { width, transition, collapsed } = useSidebar();
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const menu = getMenu(t);
@@ -73,11 +70,11 @@ export const Sidebar = () => {
 				gap={theme.spacing(LAYOUT.SM)}
 				borderRight={`1px solid ${theme.palette.divider}`}
 				width={width}
-				bgcolor={theme.palette.background.paper}
 				sx={{
 					touchAction: "none",
 					transition: transition,
 					zIndex: 1000,
+					backdropFilter: "blur(8px)",
 				}}
 			>
 				<List
@@ -92,52 +89,17 @@ export const Sidebar = () => {
 						pt={theme.spacing(LAYOUT.MD)}
 						pb={theme.spacing(LAYOUT.MD)}
 					/>
-					{menu.map((group) => (
-						<Box key={group.group}>
-							<Box
-								position="relative"
-								overflow="hidden"
-							>
-								<Typography
-									variant="eyebrow"
-									component="div"
-									color={theme.palette.text.disabled}
-									fontSize={typographyLevels.s}
-									paddingLeft={theme.spacing(5)}
-									paddingTop={theme.spacing(LAYOUT.SM)}
-									paddingBottom={theme.spacing(LAYOUT.XXS)}
-									whiteSpace="nowrap"
-									sx={{
-										opacity: collapsed ? 0 : 1,
-										transition: `opacity ${transitionTiming}`,
-									}}
-								>
-									{group.group}
-								</Typography>
-								<Divider
-									sx={{
-										position: "absolute",
-										top: "50%",
-										left: 0,
-										right: 0,
-										opacity: collapsed ? 1 : 0,
-										transition: `opacity ${transitionTiming}`,
-									}}
-								/>
-							</Box>
-							{group.items.map((item) => {
-								const selected = location.pathname.startsWith(`/${item.path}`);
-								return (
-									<NavItem
-										key={item.path}
-										item={item}
-										selected={selected}
-										onClick={() => handleNavClick(item.path)}
-									/>
-								);
-							})}
-						</Box>
-					))}
+					{menu.map((item) => {
+						const selected = location.pathname.startsWith(`/${item.path}`);
+						return (
+							<NavItem
+								key={item.path}
+								item={item}
+								selected={selected}
+								onClick={() => handleNavClick(item.path)}
+							/>
+						);
+					})}
 				</List>
 				<StarPrompt />

@@ -1,5 +1,4 @@
 import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
-import type { CardId } from "@/Pages/Dashboard/cards";

 type ThemeMode = "light" | "dark";
 type ChartType = "histogram" | "line";
@@ -9,8 +8,7 @@ type TableName =
 	| "maintenance"
 	| "infrastructure"
 	| "logs"
-	| "pagespeed"
-	| "docker";
+	| "pagespeed";

 interface TableState {
 	rowsPerPage: number;
@@ -26,7 +24,6 @@ interface UIState {
 	team: TableState;
 	maintenance: TableState;
 	infrastructure: TableState;
-	docker: TableState;
 	logs: TableState;
 	sidebar: SidebarState;
 	mode: ThemeMode;
@@ -36,7 +33,6 @@ interface UIState {
 	language: string;
 	starPromptOpen: boolean;
 	chartType: ChartType;
-	dashboardCards: CardId[] | null;
 }

 const initialMode: ThemeMode = window?.matchMedia?.("(prefers-color-scheme: dark)")
@@ -60,9 +56,6 @@ const initialState: UIState = {
 	infrastructure: {
 		rowsPerPage: 5,
 	},
-	docker: {
-		rowsPerPage: 5,
-	},
 	logs: {
 		rowsPerPage: 15,
 	},
@@ -76,7 +69,6 @@ const initialState: UIState = {
 	language: "en",
 	starPromptOpen: true,
 	chartType: "histogram",
-	dashboardCards: null,
 };

 const uiSlice = createSlice({
@@ -120,9 +112,6 @@ const uiSlice = createSlice({
 		setChartType: (state, action: PayloadAction<ChartType>) => {
 			state.chartType = action.payload;
 		},
-		setDashboardCards: (state, action: PayloadAction<CardId[] | null>) => {
-			state.dashboardCards = action.payload;
-		},
 	},
 });

@@ -139,5 +128,4 @@ export const {
 	setLanguage,
 	setStarPromptOpen,
 	setChartType,
-	setDashboardCards,
 } = uiSlice.actions;
@@ -6,7 +6,7 @@ import { useState } from "react";
 import { useToast } from "@/Hooks/UseToast";
 import { logger } from "@/Utils/logger";

-export interface ApiResponse<T> {
+interface ApiResponse<T> {
 	success: boolean;
 	msg: string;
 	data: T;
@@ -1,30 +1,27 @@
 import { toast, type ToastOptions } from "react-toastify";
-import { useMemo } from "react";

 export const useToast = () => {
-	return useMemo(() => {
-		const showToast = (message: string, options?: ToastOptions) => {
-			toast.dismiss();
-			const baseStyle: React.CSSProperties = {
-				whiteSpace: "nowrap",
-				overflow: "hidden",
-				textOverflow: "ellipsis",
-			};
-			toast(message, {
-				...options,
-				style: { ...baseStyle, ...(options?.style || {}) },
-			});
+	const showToast = (message: string, options?: ToastOptions) => {
+		toast.dismiss();
+		const baseStyle: React.CSSProperties = {
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
 		};
+		toast(message, {
+			...options,
+			style: { ...baseStyle, ...(options?.style || {}) },
+		});
+	};

-		const toastSuccess = (msg: string, opts?: ToastOptions) =>
-			showToast(msg, { ...opts, type: "success" });
-		const toastError = (msg: string, opts?: ToastOptions) =>
-			showToast(msg, { ...opts, type: "error" });
-		const toastInfo = (msg: string, opts?: ToastOptions) =>
-			showToast(msg, { ...opts, type: "info" });
-		const toastWarning = (msg: string, opts?: ToastOptions) =>
-			showToast(msg, { ...opts, type: "warning" });
+	const toastSuccess = (msg: string, opts?: ToastOptions) =>
+		showToast(msg, { ...opts, type: "success" });
+	const toastError = (msg: string, opts?: ToastOptions) =>
+		showToast(msg, { ...opts, type: "error" });
+	const toastInfo = (msg: string, opts?: ToastOptions) =>
+		showToast(msg, { ...opts, type: "info" });
+	const toastWarning = (msg: string, opts?: ToastOptions) =>
+		showToast(msg, { ...opts, type: "warning" });

-		return { showToast, toastSuccess, toastError, toastInfo, toastWarning };
-	}, []);
+	return { showToast, toastSuccess, toastError, toastInfo, toastWarning };
 };
@@ -77,7 +77,6 @@ export const getMonitorDefaults = (
 				...base,
 				type: "docker",
 				url: data?.url || "",
-				dockerLogsEnabled: data?.dockerLogsEnabled ?? false,
 			};
 			break;
 		case "game":
@@ -6,8 +6,7 @@ const SIDEBAR_WIDTH_VAR = 250;
 const SIDEBAR_COLLAPSED_WIDTH_VAR = 64;

 // Transition timing for sidebar width changes
-const SIDEBAR_TRANSITION_TIMING = "650ms cubic-bezier(0.36, -0.01, 0, 0.77)";
-const SIDEBAR_TRANSITION = `width ${SIDEBAR_TRANSITION_TIMING}`;
+const SIDEBAR_TRANSITION = "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)";

 export const useSidebar = () => {
 	const collapsed = useSelector(
@@ -20,7 +19,6 @@ export const useSidebar = () => {
 		expandedWidth: SIDEBAR_WIDTH_VAR,
 		width: collapsed ? SIDEBAR_COLLAPSED_WIDTH_VAR : SIDEBAR_WIDTH_VAR,
 		transition: SIDEBAR_TRANSITION,
-		transitionTiming: SIDEBAR_TRANSITION_TIMING,
 	};
 };

@@ -59,12 +59,7 @@ export const HeaderTeamControls = ({
 				<Button
 					variant="contained"
 					color="primary"
-					startIcon={
-						<Icon
-							icon={Mail}
-							size={16}
-						/>
-					}
+					startIcon={<Icon icon={Mail} />}
 					onClick={onInviteClick}
 				>
 					{t("common.buttons.inviteMember")}
@@ -74,12 +69,7 @@ export const HeaderTeamControls = ({
 				<Button
 					variant="contained"
 					color="primary"
-					startIcon={
-						<Icon
-							icon={UserPlus}
-							size={16}
-						/>
-					}
+					startIcon={<Icon icon={UserPlus} />}
 					onClick={onAddMemberClick}
 				>
 					{t("common.buttons.addMember")}
@@ -17,14 +17,13 @@ import { useParams } from "react-router-dom";
 import { useGet } from "@/Hooks/UseApi";
 import type { Monitor } from "@/Types/Monitor";
 import type { ChecksSummary, ChecksResponse } from "@/Types/Check";
-import type { DateRange } from "@/Types/Query";

 const Checks = () => {
 	const { t } = useTranslation();
 	const { monitorId } = useParams<{ monitorId?: string }>();

 	const [selectedMonitor, setSelectedMonitor] = useState<string>(monitorId || "0");
-	const [dateRange, setDateRange] = useState<DateRange>("recent");
+	const [dateRange, setDateRange] = useState<string>("recent");
 	const [statusFilter, setStatusFilter] = useState<string>("down");
 	const [page, setPage] = useState<number>(0);
 	const [rowsPerPage, setRowsPerPage] = useState<number>(10);
@@ -118,8 +118,8 @@ const getGeneralSettingsConfig = (
 			showDnsRecordType: false,
 		},
 		docker: {
-			urlLabel: t("pages.createMonitor.form.general.option.dockerHost.label"),
-			urlPlaceholder: t("pages.createMonitor.form.general.option.dockerHost.placeholder"),
+			urlLabel: t("pages.createMonitor.form.general.option.container.label"),
+			urlPlaceholder: t("pages.createMonitor.form.general.option.container.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
 			showProxy: false,
@@ -255,7 +255,6 @@ const CreateMonitorPage = () => {
 		const firstSegment = pathSegments[0];
 		if (firstSegment === "pagespeed") return "pagespeed";
 		if (firstSegment === "infrastructure") return "hardware";
-		if (firstSegment === "docker") return "docker";
 		return "uptime";
 	}, [location.pathname]);

@@ -265,9 +264,7 @@ const CreateMonitorPage = () => {
 			? "pagespeed"
 			: pageType === "hardware"
 				? "hardware"
-				: pageType === "docker"
-					? "docker"
-					: "http";
+				: "http";

 	const { data: existingMonitor, refetch: refetchMonitor } = useGet<Monitor>(
 		isEditMode ? `/monitors/${monitorId}` : null
@@ -376,8 +373,6 @@ const CreateMonitorPage = () => {
 				navigate("/pagespeed");
 			} else if (pageType === "hardware") {
 				navigate("/infrastructure");
-			} else if (pageType === "docker") {
-				navigate("/docker");
 			} else {
 				navigate("/uptime");
 			}
@@ -828,19 +823,6 @@ const CreateMonitorPage = () => {
 					/>
 				)}

-				{showStep(1) && watchedType === "docker" && (
-					<ConfigBox
-						title={t("pages.createMonitor.form.dockerLogs.title")}
-						subtitle={t("pages.createMonitor.form.dockerLogs.description")}
-						rightContent={
-							<FormSwitchField
-								name="dockerLogsEnabled"
-								label={t("pages.createMonitor.form.dockerLogs.option.enabled.label")}
-							/>
-						}
-					/>
-				)}
-
 				{showStep(2) &&
 					(watchedType === "http" ||
 						watchedType === "grpc" ||
@@ -1,123 +0,0 @@
-import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material/styles";
-import { GripVertical } from "lucide-react";
-import {
-	DndContext,
-	closestCenter,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from "@dnd-kit/core";
-import type { DragEndEvent } from "@dnd-kit/core";
-import { SortableContext, useSortable, rectSortingStrategy } from "@dnd-kit/sortable";
-
-import { Icon } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { GRID_COLUMNS, type CardDefinition, type CardId } from "../cards";
-import { CardSlotContext } from "./CardSlotContext";
-
-const SortableCard = ({ card }: { card: CardDefinition }) => {
-	const theme = useTheme();
-	const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
-		useSortable({ id: card.id });
-	const Component = card.component;
-
-	return (
-		<Box
-			ref={setNodeRef}
-			minWidth={0}
-			sx={{
-				width: {
-					xs: "100%",
-					md:
-						card.width >= GRID_COLUMNS
-							? "100%"
-							: `calc(${(card.width / GRID_COLUMNS) * 100}% - ${theme.spacing(LAYOUT.MD / 2)})`,
-				},
-				transform: transform
-					? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`
-					: undefined,
-				transition,
-				opacity: isDragging ? 0.4 : 1,
-				zIndex: isDragging ? 1 : "auto",
-			}}
-		>
-			<CardSlotContext.Provider
-				value={
-					<Box
-						{...attributes}
-						{...listeners}
-						display="flex"
-						alignItems="center"
-						sx={{
-							cursor: "grab",
-							"&:active": { cursor: "grabbing" },
-							touchAction: "none",
-						}}
-					>
-						<Icon
-							icon={GripVertical}
-							size={16}
-							color={theme.palette.text.secondary}
-						/>
-					</Box>
-				}
-			>
-				<Component />
-			</CardSlotContext.Provider>
-		</Box>
-	);
-};
-
-export const CardGrid = ({
-	cards,
-	onReorder,
-}: {
-	cards: CardDefinition[];
-	onReorder: (sourceIndex: number, destIndex: number) => void;
-}) => {
-	const theme = useTheme();
-
-	const sensors = useSensors(
-		useSensor(PointerSensor, {
-			activationConstraint: { distance: 8 },
-		})
-	);
-
-	const handleDragEnd = (event: DragEndEvent) => {
-		const { active, over } = event;
-		if (!over || active.id === over.id) return;
-		const sourceIndex = cards.findIndex((c) => c.id === active.id);
-		const destIndex = cards.findIndex((c) => c.id === over.id);
-		if (sourceIndex !== -1 && destIndex !== -1) onReorder(sourceIndex, destIndex);
-	};
-
-	const cardIds = cards.map((c) => c.id);
-
-	return (
-		<DndContext
-			sensors={sensors}
-			collisionDetection={closestCenter}
-			onDragEnd={handleDragEnd}
-		>
-			<SortableContext
-				items={cardIds}
-				strategy={rectSortingStrategy}
-			>
-				<Box
-					display="flex"
-					flexWrap="wrap"
-					gap={theme.spacing(LAYOUT.MD)}
-					alignItems="stretch"
-				>
-					{cards.map((card) => (
-						<SortableCard
-							key={card.id}
-							card={card}
-						/>
-					))}
-				</Box>
-			</SortableContext>
-		</DndContext>
-	);
-};
@@ -1,137 +0,0 @@
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { Dialog, Checkbox, Button } from "@/Components/inputs";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { CardGroups, type CardDefinition, type CardGroup, type CardId } from "../cards";
-
-interface CardPickerProps {
-	open: boolean;
-	available: CardDefinition[];
-	selected: CardId[];
-	allSelected: boolean;
-	onAdd: (id: CardId) => void;
-	onRemove: (id: CardId) => void;
-	onSelectAll: () => void;
-	onDeselectAll: () => void;
-	onReset: () => void;
-	onClose: () => void;
-}
-
-/**
- * Cards are grouped by sidebar section, not by load cost: you look for a card
- * where you look for the feature it belongs to. Admin-only cards never reach
- * `available` for a non-admin, so nobody is offered a card they cannot load.
- */
-export const CardPicker = ({
-	open,
-	available,
-	selected,
-	allSelected,
-	onAdd,
-	onRemove,
-	onSelectAll,
-	onDeselectAll,
-	onReset,
-	onClose,
-}: CardPickerProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-
-	const grouped = useMemo(() => {
-		return CardGroups.map((group: CardGroup) => ({
-			group,
-			cards: available.filter((card) => card.group === group),
-		})).filter((entry) => entry.cards.length > 0);
-	}, [available]);
-
-	const chosen = new Set(selected);
-	const someSelected = selected.length > 0 && !allSelected;
-
-	return (
-		<Dialog
-			open={open}
-			maxWidth="sm"
-			fullWidth
-			title={t("pages.dashboard.picker.title")}
-			// Reset sits alone on the left, away from Done — a destructive action
-			// should not be adjacent to the one people reach for by reflex.
-			onCancel={onReset}
-			cancelText={t("pages.dashboard.picker.reset")}
-			onConfirm={onClose}
-			confirmText={t("pages.dashboard.picker.done")}
-			additionalButtons={
-				<Button
-					variant="outlined"
-					color="secondary"
-					onClick={allSelected ? onDeselectAll : onSelectAll}
-					startIcon={
-						<Checkbox
-							checked={allSelected}
-							indeterminate={someSelected}
-							size="small"
-							sx={{ p: 0 }}
-							onChange={() => {}}
-						/>
-					}
-				>
-					{t("pages.dashboard.picker.selectAll")}
-				</Button>
-			}
-		>
-			{/*
-			 * Two columns: seventeen cards in one list makes the dialog scroll,
-			 * which hides most of the catalogue. Groups flow down the columns and
-			 * are kept whole so a group is never split across the gap.
-			 */}
-			<Box
-				pt={theme.spacing(LAYOUT.SM)}
-				sx={{
-					columnCount: { xs: 1, sm: 2 },
-					columnGap: theme.spacing(LAYOUT.XL),
-				}}
-			>
-				{grouped.map(({ group, cards }) => (
-					<Stack
-						key={group}
-						gap={theme.spacing(LAYOUT.XXS)}
-						pb={theme.spacing(LAYOUT.MD)}
-						sx={{ breakInside: "avoid" }}
-					>
-						<Typography
-							variant="eyebrow"
-							color={theme.palette.text.disabled}
-						>
-							{t(`pages.dashboard.picker.groups.${group}`, {
-								defaultValue: group,
-							})}
-						</Typography>
-						{cards.map((card) => (
-							<FormControlLabel
-								key={card.id}
-								label={
-									<Typography color={theme.palette.text.primary}>
-										{t(`pages.dashboard.cards.${card.key}.title`)}
-									</Typography>
-								}
-								control={
-									<Checkbox
-										checked={chosen.has(card.id)}
-										onChange={() =>
-											chosen.has(card.id) ? onRemove(card.id) : onAdd(card.id)
-										}
-									/>
-								}
-							/>
-						))}
-					</Stack>
-				))}
-			</Box>
-		</Dialog>
-	);
-};
@@ -1,275 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { Link as RouterLink } from "react-router-dom";
-
-import { Tooltip } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { typographyLevels } from "@/Utils/Theme/Palette";
-
-import type { ReactNode } from "react";
-
-/**
- * One thickness for every bar on the dashboard. Plain and segmented bars sit
- * side by side across cards, so differing weights read as an inconsistency
- * rather than as emphasis.
- */
-const BAR_HEIGHT = 8;
-
-export interface BarSegment {
-	key: string;
-	value: number;
-	color: string;
-	/** Tooltip text, since the segments themselves carry no labels. */
-	label: string;
-}
-
-/**
- * A proportional bar. `value` and `max` share whatever unit the caller uses;
- * percentages come in as 0-100, not as the API's 0-1 fractions.
- */
-export const CardBar = ({
-	value,
-	max = 100,
-	color,
-}: {
-	value: number;
-	max?: number;
-	color: string;
-}) => {
-	const theme = useTheme();
-	const ratio = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0;
-
-	return (
-		<Box
-			width="100%"
-			height={BAR_HEIGHT}
-			borderRadius={theme.shape.borderRadius}
-			bgcolor={theme.palette.action.hover}
-			sx={{ overflow: "hidden" }}
-		>
-			<Box
-				width={`${ratio * 100}%`}
-				height="100%"
-				bgcolor={color}
-				sx={{ transition: "width 0.3s ease" }}
-			/>
-		</Box>
-	);
-};
-
-/**
- * One bar divided into proportional segments — the shape of a whole split into
- * parts, where the relative sizes are the point rather than any single value.
- *
- * Zero-value segments are dropped so they cannot appear as hairlines, and each
- * segment carries a tooltip because the bar itself has no room for labels.
- */
-export const CardSegmentedBar = ({ segments }: { segments: BarSegment[] }) => {
-	const theme = useTheme();
-	const visible = segments.filter((segment) => segment.value > 0);
-	const total = visible.reduce((sum, segment) => sum + segment.value, 0);
-
-	return (
-		<Stack
-			direction="row"
-			width="100%"
-			height={BAR_HEIGHT}
-			borderRadius={theme.shape.borderRadius}
-			bgcolor={theme.palette.action.hover}
-			gap="1px"
-			sx={{ overflow: "hidden" }}
-		>
-			{total > 0 &&
-				visible.map((segment) => (
-					<Tooltip
-						key={segment.key}
-						title={segment.label}
-					>
-						<Box
-							width={`${(segment.value / total) * 100}%`}
-							height="100%"
-							bgcolor={segment.color}
-							sx={{ transition: "width 0.3s ease" }}
-						/>
-					</Tooltip>
-				))}
-		</Stack>
-	);
-};
-
-/** A clickable list row. Rows link to the entity they describe. */
-export const CardRow = ({ to, children }: { to?: string; children: ReactNode }) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			{...(to ? { component: RouterLink, to } : {})}
-			direction="row"
-			alignItems="center"
-			gap={theme.spacing(LAYOUT.SM)}
-			px={theme.spacing(LAYOUT.XS)}
-			py={theme.spacing(LAYOUT.XS)}
-			mx={`-${theme.spacing(LAYOUT.XS)}`}
-			borderRadius={theme.shape.borderRadius}
-			color="inherit"
-			sx={{
-				textDecoration: "none",
-				...(to && {
-					"&:hover": { backgroundColor: theme.palette.action.hover },
-				}),
-			}}
-		>
-			{children}
-		</Stack>
-	);
-};
-
-/** Name plus optional secondary line, truncating rather than wrapping. */
-export const CardRowLabel = ({
-	primary,
-	secondary,
-}: {
-	primary: string;
-	secondary?: string | null;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			minWidth={0}
-			flex={1}
-		>
-			<Typography
-				color={theme.palette.text.primary}
-				noWrap
-			>
-				{primary}
-			</Typography>
-			{secondary && (
-				<Typography
-					color={theme.palette.text.secondary}
-					noWrap
-				>
-					{secondary}
-				</Typography>
-			)}
-		</Stack>
-	);
-};
-
-/** A single large figure with a caption — the shape of the stat cards. */
-export const CardFigure = ({
-	value,
-	caption,
-	color,
-}: {
-	value: string;
-	caption?: string;
-	color?: string;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack gap={theme.spacing(LAYOUT.XXS)}>
-			<Typography
-				fontSize={typographyLevels.xxl}
-				fontWeight={300}
-				color={color ?? theme.palette.text.primary}
-				lineHeight={1.1}
-			>
-				{value}
-			</Typography>
-			{caption && <Typography color={theme.palette.text.secondary}>{caption}</Typography>}
-		</Stack>
-	);
-};
-
-/**
- * A label with its value on the right — the shape almost every stat card
- * repeats. `color` highlights the value alone, leaving the label quiet.
- */
-export const CardStatLine = ({
-	label,
-	value,
-	color,
-}: {
-	label: string;
-	value: string;
-	color?: string;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			direction="row"
-			alignItems="baseline"
-			justifyContent="space-between"
-			gap={theme.spacing(LAYOUT.SM)}
-		>
-			<Typography color={theme.palette.text.secondary}>{label}</Typography>
-			<Typography
-				color={color ?? theme.palette.text.primary}
-				noWrap
-			>
-				{value}
-			</Typography>
-		</Stack>
-	);
-};
-
-/**
- * A CardStatLine with a proportional bar beneath it — the ranking and
- * breakdown row. `max` defaults to a percentage scale; pass the largest value
- * in the set to make bars relative to each other instead.
- *
- * `label` may be a node so callers can put a "N down" flag beside the name.
- */
-export const CardMeterRow = ({
-	label,
-	value,
-	max,
-	color,
-	trailing,
-}: {
-	label: ReactNode;
-	value: number;
-	max?: number;
-	color: string;
-	trailing?: ReactNode;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			flex={1}
-			minWidth={0}
-			gap={theme.spacing(LAYOUT.XXS)}
-		>
-			<Stack
-				direction="row"
-				alignItems="center"
-				justifyContent="space-between"
-				gap={theme.spacing(LAYOUT.SM)}
-			>
-				{typeof label === "string" ? (
-					<Typography
-						color={theme.palette.text.primary}
-						noWrap
-					>
-						{label}
-					</Typography>
-				) : (
-					label
-				)}
-				{trailing}
-			</Stack>
-			<CardBar
-				value={value}
-				max={max}
-				color={color}
-			/>
-		</Stack>
-	);
-};
@@ -1,7 +0,0 @@
-import { createContext, useContext } from "react";
-
-import type { ReactNode } from "react";
-
-export const CardSlotContext = createContext<ReactNode>(null);
-
-export const useCardSlot = (): ReactNode => useContext(CardSlotContext);
@@ -1,219 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { useGet } from "@/Hooks/UseApi";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatTimestamp } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardFigure, CardRow, CardRowLabel, CardStatLine } from "../CardPrimitives";
-
-import { REFRESH_INTERVAL_MS, SLOW_REFRESH_INTERVAL_MS } from "../../cards";
-
-import type { QueueMetrics } from "@/Types/Queue";
-import type { Log } from "@/Types/Log";
-import type { User } from "@/Types/User";
-
-const MAX_ERROR_ROWS = 5;
-
-/** Reads as a single reassurance line while nothing is failing. */
-export const ChecksOnScheduleCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<QueueMetrics>(
-		"/queue/metrics",
-		{},
-		{ refreshInterval: REFRESH_INTERVAL_MS }
-	);
-
-	const healthy = data?.failingJobs === 0;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.checksOnSchedule.title")}
-			to="/logs"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{healthy ? (
-						<CardMessage
-							text={t("pages.dashboard.cards.checksOnSchedule.healthy", {
-								jobs: data.jobs,
-								workers: data.workers.length,
-							})}
-						/>
-					) : (
-						<>
-							<CardFigure
-								value={String(data.failingJobs)}
-								caption={t("pages.dashboard.cards.checksOnSchedule.failing")}
-								color={theme.palette.error.main}
-							/>
-							<Stack gap={theme.spacing(LAYOUT.XS)}>
-								{data.jobsWithFailures.slice(0, MAX_ERROR_ROWS).map((job) => (
-									<CardRow key={String(job.monitorId)}>
-										<CardRowLabel
-											primary={job.monitorUrl ?? String(job.monitorId)}
-											secondary={job.failReason}
-										/>
-										<Typography
-											color={theme.palette.error.main}
-											flexShrink={0}
-										>
-											{job.failCount}
-										</Typography>
-									</CardRow>
-								))}
-							</Stack>
-						</>
-					)}
-					<CardStatLine
-						label={t("pages.dashboard.cards.checksOnSchedule.scheduled")}
-						value={String(data.jobs)}
-					/>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checksOnSchedule.runningNow")}
-						value={String(data.activeJobs)}
-					/>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-/**
- * /logs is an in-memory ring buffer capped at 1000 entries, wiped on restart,
- * and it ignores page/rowsPerPage. It rotates fast, so this is deliberately
- * worded "recent" rather than "all".
- */
-export const RecentErrorsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<Log[]>(
-		"/logs",
-		{},
-		{ refreshInterval: SLOW_REFRESH_INTERVAL_MS }
-	);
-
-	const { errors, warnings, newest } = useMemo(() => {
-		const relevant = (data ?? []).filter(
-			(entry) => entry.level === "error" || entry.level === "warn"
-		);
-		const sorted = [...relevant].sort(
-			(a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-		);
-		return {
-			errors: relevant.filter((entry) => entry.level === "error").length,
-			warnings: relevant.filter((entry) => entry.level === "warn").length,
-			newest: sorted.slice(0, MAX_ERROR_ROWS),
-		};
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.recentErrors.title")}
-			to="/logs"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				errors > 0 ? (
-					<Typography color={theme.palette.error.main}>
-						{t("pages.dashboard.cards.recentErrors.count", { count: errors })}
-					</Typography>
-				) : null
-			}
-		>
-			{newest.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.recentErrors.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardStatLine
-						label={t("pages.dashboard.cards.recentErrors.warnings")}
-						value={String(warnings)}
-					/>
-					<Stack gap={theme.spacing(LAYOUT.XS)}>
-						{newest.map((entry, index) => (
-							<CardRow key={`${entry.timestamp}-${index}`}>
-								<CardRowLabel
-									primary={entry.message}
-									secondary={[entry.service, entry.method].filter(Boolean).join(" · ")}
-								/>
-								<Typography
-									color={
-										entry.level === "error"
-											? theme.palette.error.main
-											: theme.palette.warning.main
-									}
-									flexShrink={0}
-								>
-									{formatTimestamp(entry.timestamp)}
-								</Typography>
-							</CardRow>
-						))}
-					</Stack>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-/** Never empty — at minimum the current user exists. */
-export const TeamCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<User[]>("/auth/users");
-
-	const { total, byRole, unverified } = useMemo(() => {
-		const users = data ?? [];
-		const roles = new Map<string, number>();
-		for (const user of users) {
-			for (const role of user.role ?? []) {
-				roles.set(role, (roles.get(role) ?? 0) + 1);
-			}
-		}
-		return {
-			total: users.length,
-			byRole: [...roles.entries()].sort((a, b) => b[1] - a[1]),
-			unverified: users.filter((user) => !user.isVerified).length,
-		};
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.team.title")}
-			to="/account/team"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardFigure
-						value={String(total)}
-						caption={t("pages.dashboard.cards.team.members", { count: total })}
-					/>
-					{byRole.map(([role, count]) => (
-						<CardStatLine
-							key={role}
-							label={t(`common.auth.roles.${role}`, { defaultValue: role })}
-							value={String(count)}
-						/>
-					))}
-					{unverified > 0 && (
-						<CardStatLine
-							label={t("pages.dashboard.cards.team.unverified")}
-							value={String(unverified)}
-							color={theme.palette.warning.main}
-						/>
-					)}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,97 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardMeterRow, CardRow } from "../CardPrimitives";
-
-export interface BreakdownBucket {
-	/** Stable key and displayed label. */
-	key: string;
-	label: string;
-	total: number;
-	down: number;
-	/** Where the row links to, if anywhere. */
-	to?: string;
-}
-
-/**
- * "How the fleet splits by X" — one proportional row per bucket, flagging any
- * bucket with something down. Monitors by type and Monitors by group are the
- * same card over different keys, so they share this shell.
- */
-export const BreakdownCard = ({
-	titleKey,
-	emptyKey,
-	to,
-	buckets,
-	isLoading,
-	isStale,
-	error,
-}: {
-	titleKey: string;
-	emptyKey: string;
-	to?: string;
-	buckets: BreakdownBucket[];
-	isLoading?: boolean;
-	isStale?: boolean;
-	error?: unknown;
-}) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-
-	const max = Math.max(0, ...buckets.map((bucket) => bucket.total));
-
-	return (
-		<DashboardCard
-			title={t(titleKey)}
-			to={to}
-			isLoading={isLoading}
-			error={error}
-			isStale={isStale}
-		>
-			{buckets.length === 0 ? (
-				<CardMessage text={t(emptyKey)} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{buckets.map((bucket) => (
-						<CardRow
-							key={bucket.key}
-							to={bucket.to}
-						>
-							<CardMeterRow
-								label={bucket.label}
-								value={bucket.total}
-								max={max}
-								color={
-									bucket.down > 0 ? theme.palette.error.main : theme.palette.primary.main
-								}
-								trailing={
-									<Stack
-										direction="row"
-										alignItems="center"
-										gap={theme.spacing(LAYOUT.XS)}
-										flexShrink={0}
-									>
-										{bucket.down > 0 && (
-											<Typography color={theme.palette.error.main}>
-												{t("pages.dashboard.cards.monitorsByType.down", {
-													count: bucket.down,
-												})}
-											</Typography>
-										)}
-										<Typography color={theme.palette.text.secondary}>
-											{bucket.total}
-										</Typography>
-									</Stack>
-								}
-							/>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,143 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardBar, CardRow, CardRowLabel } from "../CardPrimitives";
-import { useMonitors } from "../../useDashboardData";
-
-import { latestCheck } from "../../checks";
-
-import type { Monitor } from "@/Types/Monitor";
-
-// <60% fine, 60-85% warm, above that hot.
-const WARM = 60;
-const HOT = 85;
-
-interface ServerUsage {
-	monitor: Monitor;
-	cpu: number | null;
-	memory: number | null;
-	disk: number | null;
-	peak: number;
-}
-
-const Metric = ({ label, value }: { label: string; value: number | null }) => {
-	const theme = useTheme();
-	const color =
-		value === null
-			? theme.palette.text.secondary
-			: value > HOT
-				? theme.palette.error.main
-				: value > WARM
-					? theme.palette.warning.main
-					: theme.palette.primary.main;
-
-	return (
-		<Stack
-			flex={1}
-			minWidth={0}
-			gap={theme.spacing(LAYOUT.XXS)}
-		>
-			<Stack
-				direction="row"
-				alignItems="baseline"
-				justifyContent="space-between"
-				gap={theme.spacing(LAYOUT.XS)}
-			>
-				<Typography color={theme.palette.text.secondary}>{label}</Typography>
-				<Typography color={color}>
-					{/* A down server reports nothing — show a dash, never 0%. */}
-					{value === null ? "—" : `${value.toFixed(1)}%`}
-				</Typography>
-			</Stack>
-			<CardBar
-				value={value ?? 0}
-				color={color}
-			/>
-		</Stack>
-	);
-};
-
-export const BusiestServersCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const servers = useMemo<ServerUsage[]>(() => {
-		return (data?.monitors ?? [])
-			.filter((monitor) => monitor.type === "hardware")
-			.map((monitor) => {
-				const latest = latestCheck(monitor);
-				// snake_case here, unlike camelCase in HardwareCheckStats, and
-				// these are 0-1 fractions, so scale to percent.
-				const toPercent = (value: number | undefined) =>
-					typeof value === "number" ? value * 100 : null;
-				const cpu = toPercent(latest?.cpu?.usage_percent);
-				const memory = toPercent(latest?.memory?.usage_percent);
-				const disks = (latest?.disk ?? [])
-					.map((entry) => entry.usage_percent)
-					.filter((value): value is number => typeof value === "number");
-				const disk = disks.length > 0 ? Math.max(...disks) * 100 : null;
-				return {
-					monitor,
-					cpu,
-					memory,
-					disk,
-					peak: Math.max(cpu ?? 0, memory ?? 0, disk ?? 0),
-				};
-			})
-			.sort((a, b) => b.peak - a.peak);
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.busiestServers.title")}
-			to="/infrastructure"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{servers.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.busiestServers.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					{servers.map(({ monitor, cpu, memory, disk }) => (
-						<CardRow
-							key={monitor.id}
-							to={`/infrastructure/${monitor.id}`}
-						>
-							<Stack
-								flex={1}
-								minWidth={0}
-								gap={theme.spacing(LAYOUT.XS)}
-							>
-								<CardRowLabel primary={monitor.name} />
-								<Stack
-									direction="row"
-									gap={theme.spacing(LAYOUT.MD)}
-								>
-									<Metric
-										label={t("pages.dashboard.cards.busiestServers.cpu")}
-										value={cpu}
-									/>
-									<Metric
-										label={t("pages.dashboard.cards.busiestServers.memory")}
-										value={memory}
-									/>
-									<Metric
-										label={t("pages.dashboard.cards.busiestServers.disk")}
-										value={disk}
-									/>
-								</Stack>
-							</Stack>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,93 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { useGet } from "@/Hooks/UseApi";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatDuration } from "@/Utils/TimeUtils";
-import { DashboardCard } from "../DashboardCard";
-import { CardBar, CardStatLine } from "../CardPrimitives";
-
-import { REFRESH_INTERVAL_MS } from "../../cards";
-
-import type { Diagnostics } from "@/Types/Diagnostics";
-
-const BYTES_PER_MB = 1024 * 1024;
-
-// Banding from CARD-SPECS: warm at 50ms of event-loop delay, hot at 200ms;
-// heap warm past 80% of the V8 limit.
-const EVENT_LOOP_WARM_MS = 50;
-const EVENT_LOOP_HOT_MS = 200;
-const HEAP_WARM_RATIO = 0.8;
-
-/**
- * The one card that is never empty — it reports on Checkmate itself, so it
- * works on a fresh install with zero monitors. Admin only.
- */
-export const CheckmateServerCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<Diagnostics>(
-		"/diagnostic/system",
-		{},
-		{ refreshInterval: REFRESH_INTERVAL_MS }
-	);
-
-	const usedHeap = data?.v8HeapStats.usedHeapSizeBytes ?? 0;
-	const heapLimit = data?.v8HeapStats.heapSizeLimitBytes ?? 0;
-	const heapRatio = heapLimit > 0 ? usedHeap / heapLimit : 0;
-	const heapColor =
-		heapRatio > HEAP_WARM_RATIO ? theme.palette.warning.main : theme.palette.primary.main;
-
-	const eventLoopMs = data?.eventLoopDelayMs ?? 0;
-	const eventLoopColor =
-		eventLoopMs > EVENT_LOOP_HOT_MS
-			? theme.palette.error.main
-			: eventLoopMs > EVENT_LOOP_WARM_MS
-				? theme.palette.warning.main
-				: theme.palette.text.primary;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.checkmateServer.title")}
-			to="/logs"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<Stack gap={theme.spacing(LAYOUT.XXS)}>
-						<CardStatLine
-							label={t("pages.dashboard.cards.checkmateServer.memory")}
-							value={`${Math.round(usedHeap / BYTES_PER_MB)} / ${Math.round(
-								heapLimit / BYTES_PER_MB
-							)} MB`}
-							color={heapColor}
-						/>
-						<CardBar
-							value={heapRatio * 100}
-							color={heapColor}
-						/>
-					</Stack>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checkmateServer.eventLoop")}
-						value={`${eventLoopMs.toFixed(1)} ms`}
-						color={eventLoopColor}
-					/>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checkmateServer.uptime")}
-						value={formatDuration(data.uptimeMs)}
-					/>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checkmateServer.database")}
-						value={t("pages.dashboard.cards.checkmateServer.readsWrites", {
-							reads: data.mongoStats.readsPerSecond.toFixed(1),
-							writes: data.mongoStats.writesPerSecond.toFixed(1),
-						})}
-					/>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,157 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { getStatusColor, getMonitorPath } from "@/Utils/MonitorUtils";
-import { formatStatusCode } from "@/Utils/statusCode";
-import { formatDuration } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardRow } from "../CardPrimitives";
-import { Sparkline } from "../Sparkline";
-import { useMonitors } from "../../useDashboardData";
-
-import { latestCheck } from "../../checks";
-
-import type { Monitor, MonitorStatus } from "@/Types/Monitor";
-
-const SPARKLINE_WIDTH = 80;
-
-const STATUS_RANK: Partial<Record<MonitorStatus, number>> = {
-	down: 1,
-	breached: 2,
-};
-
-const isProblem = (monitor: Monitor) => STATUS_RANK[monitor.status] !== undefined;
-
-/**
- * How long the monitor has been down, from the oldest consecutive failing
- * check. recentChecks is oldest-first, so the run is walked back from the end.
- */
-const downSince = (monitor: Monitor): string | null => {
-	const checks = monitor.recentChecks ?? [];
-	let oldestFailing: string | null = null;
-	for (let index = checks.length - 1; index >= 0; index -= 1) {
-		if (checks[index].status !== false) {
-			break;
-		}
-		oldestFailing = checks[index].createdAt;
-	}
-	return oldestFailing;
-};
-
-export const CurrentlyDownCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const problems = useMemo(() => {
-		const monitors = data?.monitors ?? [];
-		return monitors
-			.filter(isProblem)
-			.map((monitor) => ({ monitor, since: downSince(monitor) }))
-			.sort((a, b) => {
-				const rank =
-					(STATUS_RANK[a.monitor.status] ?? 99) - (STATUS_RANK[b.monitor.status] ?? 99);
-				if (rank !== 0) {
-					return rank;
-				}
-				// Tie-break on longest downtime: the older timestamp ranks first.
-				return new Date(a.since ?? 0).getTime() - new Date(b.since ?? 0).getTime();
-			});
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.currentlyDown.title")}
-			to="/incidents"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				problems.length > 0 ? (
-					<Typography color={theme.palette.error.main}>
-						{t("pages.dashboard.cards.currentlyDown.count", {
-							count: problems.length,
-						})}
-					</Typography>
-				) : null
-			}
-		>
-			{problems.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.currentlyDown.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{problems.map(({ monitor, since }) => (
-						<CardRow
-							key={monitor.id}
-							to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
-						>
-							<Dot
-								color={getStatusColor(monitor.status, theme)}
-								size="md"
-							/>
-							<Stack
-								flex={1}
-								minWidth={0}
-								gap={theme.spacing(LAYOUT.XXS)}
-							>
-								<Stack
-									direction="row"
-									alignItems="baseline"
-									justifyContent="space-between"
-									gap={theme.spacing(LAYOUT.SM)}
-								>
-									<Typography
-										color={theme.palette.text.primary}
-										noWrap
-									>
-										{monitor.name}
-									</Typography>
-									{since && (
-										<Typography
-											color={theme.palette.error.main}
-											flexShrink={0}
-										>
-											{formatDuration(Date.now() - new Date(since).getTime())}
-										</Typography>
-									)}
-								</Stack>
-								<Stack
-									direction="row"
-									alignItems="center"
-									justifyContent="space-between"
-									gap={theme.spacing(LAYOUT.SM)}
-								>
-									{/* Not StatusCodeLabel: its Tooltip is focusable, and a
-									    focusable element inside the row's link is unreachable
-									    by keyboard. */}
-									<Typography
-										color={theme.palette.text.secondary}
-										noWrap
-									>
-										{monitor.type} ·{" "}
-										{formatStatusCode(latestCheck(monitor)?.statusCode, t)}
-									</Typography>
-									<Box
-										width={SPARKLINE_WIDTH}
-										flexShrink={0}
-									>
-										<Sparkline
-											checks={monitor.recentChecks ?? []}
-											color={theme.palette.error.main}
-										/>
-									</Box>
-								</Stack>
-							</Stack>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,54 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { useGet } from "@/Hooks/UseApi";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardBar, CardFigure } from "../CardPrimitives";
-
-import type { ChecksSummary } from "@/Types/Check";
-
-// Day only. `dateRange=week` returns figures identical to `day`, so a range
-// selector here would silently lie.
-const SUMMARY_URL = "/checks/team/summary?dateRange=day";
-
-export const FailedChecksCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<ChecksSummary>(SUMMARY_URL);
-
-	const total = data?.totalChecks ?? 0;
-	const failed = data?.downChecks ?? 0;
-	const percentage = total > 0 ? (failed / total) * 100 : 0;
-	const color = percentage > 10 ? theme.palette.error.main : theme.palette.success.main;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.failedChecks.title")}
-			to="/checks"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{total === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.failedChecks.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardFigure
-						value={`${percentage.toFixed(1)}%`}
-						caption={t("pages.dashboard.cards.failedChecks.ratio", {
-							failed: failed.toLocaleString(),
-							total: total.toLocaleString(),
-						})}
-						color={color}
-					/>
-					<CardBar
-						value={percentage}
-						color={color}
-					/>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,138 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { Link as RouterLink } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { typographyLevels } from "@/Utils/Theme/Palette";
-import { getStatusColor } from "@/Utils/MonitorUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardSegmentedBar, type BarSegment } from "../CardPrimitives";
-import { useMonitors } from "../../useDashboardData";
-
-import type { MonitorStatus, MonitorsSummary } from "@/Types/Monitor";
-
-// Every state the summary reports, ordered worst first so the bar reads
-// problems-to-healthy left to right and the chips below list what is wrong
-// before what is merely idle. `up` is handled separately as the headline.
-const STATES: { key: string; status: MonitorStatus; field: keyof MonitorsSummary }[] = [
-	{ key: "down", status: "down", field: "downMonitors" },
-	{ key: "breached", status: "breached", field: "breachedMonitors" },
-	{ key: "initializing", status: "initializing", field: "initializingMonitors" },
-	{ key: "maintenance", status: "maintenance", field: "maintenanceMonitors" },
-	{ key: "paused", status: "paused", field: "pausedMonitors" },
-];
-
-export const MonitorStatusCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-	const summary = data?.summary ?? null;
-
-	// Only states that actually have monitors are shown. Padding the card with
-	// zeros says nothing, and a healthy fleet should read as calm rather than as
-	// a row of empty counters.
-	const present = summary
-		? STATES.map((state) => ({ ...state, count: summary[state.field] })).filter(
-				(state) => state.count > 0
-			)
-		: [];
-
-	const segments: BarSegment[] = summary
-		? [
-				{
-					key: "up",
-					value: summary.upMonitors,
-					color: getStatusColor("up", theme),
-					label: `${t("pages.common.monitors.status.up")} — ${summary.upMonitors}`,
-				},
-				...present.map((state) => ({
-					key: state.key,
-					value: state.count,
-					color: getStatusColor(state.status, theme),
-					label: `${t(`pages.common.monitors.status.${state.key}`)} — ${state.count}`,
-				})),
-			]
-		: [];
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.monitorStatus.title")}
-			to="/uptime"
-			isLoading={isLoading && !summary}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{!summary || summary.totalMonitors === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.monitorStatus.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<Stack gap={theme.spacing(LAYOUT.SM)}>
-						<Stack
-							direction="row"
-							alignItems="baseline"
-							gap={theme.spacing(LAYOUT.XS)}
-						>
-							<Typography
-								fontSize={typographyLevels.xxl}
-								fontWeight={300}
-								color={theme.palette.text.primary}
-								lineHeight={1.1}
-							>
-								{summary.upMonitors}
-							</Typography>
-							<Typography color={theme.palette.text.secondary}>
-								{t("pages.dashboard.cards.monitorStatus.upOfTotal", {
-									total: summary.totalMonitors,
-								})}
-							</Typography>
-						</Stack>
-						<CardSegmentedBar segments={segments} />
-					</Stack>
-					{present.length > 0 && (
-						<Stack
-							direction="row"
-							flexWrap="wrap"
-							gap={theme.spacing(LAYOUT.MD)}
-						>
-							{present.map((state) => (
-								<Stack
-									key={state.key}
-									component={RouterLink}
-									// Plain /uptime: the monitors list does not read query
-									// params, so a ?status= filter would be silently dropped
-									// and the link would lie about where it goes.
-									to="/uptime"
-									direction="row"
-									alignItems="center"
-									gap={theme.spacing(LAYOUT.XS)}
-									px={theme.spacing(LAYOUT.XS)}
-									py={theme.spacing(LAYOUT.XXS)}
-									mx={`-${theme.spacing(LAYOUT.XS)}`}
-									borderRadius={theme.shape.borderRadius}
-									sx={{
-										textDecoration: "none",
-										"&:hover": { backgroundColor: theme.palette.action.hover },
-									}}
-								>
-									<Dot
-										color={getStatusColor(state.status, theme)}
-										size="md"
-									/>
-									<Typography color={theme.palette.text.secondary}>
-										{t(`pages.common.monitors.status.${state.key}`)}
-									</Typography>
-									<Typography color={theme.palette.text.primary}>
-										{state.count}
-									</Typography>
-								</Stack>
-							))}
-						</Stack>
-					)}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,43 +0,0 @@
-import { useMemo } from "react";
-
-import { BreakdownCard, type BreakdownBucket } from "./BreakdownCard";
-import { useMonitors } from "../../useDashboardData";
-
-export const MonitorsByGroupCard = () => {
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	// `group` is a plain string | null on the monitor — there is no groups
-	// endpoint, so the set is whatever monitors actually declare.
-	const buckets = useMemo<BreakdownBucket[]>(() => {
-		const byGroup = new Map<string, BreakdownBucket>();
-		for (const monitor of data?.monitors ?? []) {
-			if (!monitor.group) {
-				continue;
-			}
-			const bucket = byGroup.get(monitor.group) ?? {
-				key: monitor.group,
-				label: monitor.group,
-				total: 0,
-				down: 0,
-			};
-			bucket.total += 1;
-			if (monitor.status === "down" || monitor.status === "breached") {
-				bucket.down += 1;
-			}
-			byGroup.set(monitor.group, bucket);
-		}
-		return [...byGroup.values()].sort((a, b) => b.total - a.total);
-	}, [data]);
-
-	return (
-		<BreakdownCard
-			titleKey="pages.dashboard.cards.monitorsByGroup.title"
-			emptyKey="pages.dashboard.cards.monitorsByGroup.empty"
-			to="/uptime"
-			buckets={buckets}
-			isLoading={isLoading && !data}
-			isStale={isValidating && Boolean(data)}
-			error={error}
-		/>
-	);
-};
@@ -1,42 +0,0 @@
-import { useMemo } from "react";
-
-import { getMonitorPath } from "@/Utils/MonitorUtils";
-import { BreakdownCard, type BreakdownBucket } from "./BreakdownCard";
-import { useMonitors } from "../../useDashboardData";
-
-import type { MonitorType } from "@/Types/Monitor";
-
-export const MonitorsByTypeCard = () => {
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const buckets = useMemo<BreakdownBucket[]>(() => {
-		const byType = new Map<MonitorType, BreakdownBucket>();
-		for (const monitor of data?.monitors ?? []) {
-			const bucket = byType.get(monitor.type) ?? {
-				key: monitor.type,
-				label: monitor.type,
-				total: 0,
-				down: 0,
-				to: `/${getMonitorPath(monitor.type)}`,
-			};
-			bucket.total += 1;
-			if (monitor.status === "down" || monitor.status === "breached") {
-				bucket.down += 1;
-			}
-			byType.set(monitor.type, bucket);
-		}
-		return [...byType.values()].sort((a, b) => b.total - a.total);
-	}, [data]);
-
-	return (
-		<BreakdownCard
-			titleKey="pages.dashboard.cards.monitorsByType.title"
-			emptyKey="pages.dashboard.cards.monitorsByType.empty"
-			to="/uptime"
-			buckets={buckets}
-			isLoading={isLoading && !data}
-			isStale={isValidating && Boolean(data)}
-			error={error}
-		/>
-	);
-};
@@ -1,175 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { getMonitorPath, getUptimePercentageColor } from "@/Utils/MonitorUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardMeterRow, CardRow, CardRowLabel } from "../CardPrimitives";
-import { useMonitors } from "../../useDashboardData";
-
-import type { Monitor } from "@/Types/Monitor";
-
-const TOP_N = 5;
-// A ranking of one is not a ranking.
-const MIN_RANKABLE = 2;
-
-const averageResponseTime = (monitor: Monitor): number | null => {
-	const times = (monitor.recentChecks ?? [])
-		.map((check) => check.responseTime)
-		.filter((value): value is number => typeof value === "number");
-	if (times.length === 0) {
-		return null;
-	}
-	return times.reduce((sum, value) => sum + value, 0) / times.length;
-};
-
-/** Header reads "top 5 of 12" so a truncated ranking says so. */
-const RankingCount = ({ shown, total }: { shown: number; total: number }) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	return (
-		<Typography color={theme.palette.text.secondary}>
-			{t("pages.dashboard.cards.ranking.topOf", { shown, total })}
-		</Typography>
-	);
-};
-
-export const SlowestMonitorsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const ranked = useMemo(() => {
-		return (data?.monitors ?? [])
-			.filter((monitor) => monitor.status !== "paused")
-			.map((monitor) => ({ monitor, average: averageResponseTime(monitor) }))
-			.filter(
-				(entry): entry is { monitor: Monitor; average: number } => entry.average !== null
-			)
-			.sort((a, b) => b.average - a.average);
-	}, [data]);
-
-	const slowest = ranked[0]?.average ?? 0;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.slowestMonitors.title")}
-			to="/uptime"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				ranked.length >= MIN_RANKABLE ? (
-					<RankingCount
-						shown={Math.min(TOP_N, ranked.length)}
-						total={ranked.length}
-					/>
-				) : null
-			}
-		>
-			{ranked.length < MIN_RANKABLE ? (
-				<CardMessage text={t("pages.dashboard.cards.ranking.notEnough")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{ranked.slice(0, TOP_N).map(({ monitor, average }) => (
-						<CardRow
-							key={monitor.id}
-							to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
-						>
-							<CardMeterRow
-								label={<CardRowLabel primary={monitor.name} />}
-								value={average}
-								max={slowest}
-								color={theme.palette.primary.main}
-								trailing={
-									<Typography
-										color={theme.palette.text.secondary}
-										flexShrink={0}
-									>
-										{Math.round(average)} ms
-									</Typography>
-								}
-							/>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const LowestUptimeCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const ranked = useMemo(() => {
-		return (
-			(data?.monitors ?? [])
-				// Paused monitors keep whatever uptime they had, or zero — a paused
-				// ping monitor reads 0% and would rank beside a genuinely down one.
-				// Neither is a live problem, so neither belongs in a worst-uptime list.
-				.filter((monitor) => monitor.status !== "paused")
-				.filter(
-					(monitor): monitor is Monitor & { uptimePercentage: number } =>
-						typeof monitor.uptimePercentage === "number"
-				)
-				.sort((a, b) => a.uptimePercentage - b.uptimePercentage)
-		);
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.lowestUptime.title")}
-			to="/uptime"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				ranked.length >= MIN_RANKABLE ? (
-					<RankingCount
-						shown={Math.min(TOP_N, ranked.length)}
-						total={ranked.length}
-					/>
-				) : null
-			}
-		>
-			{ranked.length < MIN_RANKABLE ? (
-				<CardMessage text={t("pages.dashboard.cards.ranking.notEnough")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{ranked.slice(0, TOP_N).map((monitor) => {
-						// uptimePercentage is a 0-1 fraction, not 0-100.
-						const percentage = monitor.uptimePercentage * 100;
-						const palette = getUptimePercentageColor(monitor.uptimePercentage);
-						return (
-							<CardRow
-								key={monitor.id}
-								to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
-							>
-								<CardMeterRow
-									label={<CardRowLabel primary={monitor.name} />}
-									// The card ranks worst uptime first, so the bar shows the
-									// shortfall - the worst monitor gets the longest bar.
-									value={100 - percentage}
-									color={theme.palette[palette].main}
-									trailing={
-										<Typography
-											color={theme.palette[palette].main}
-											flexShrink={0}
-										>
-											{percentage.toFixed(1)}%
-										</Typography>
-									}
-								/>
-							</CardRow>
-						);
-					})}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,99 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { useGet } from "@/Hooks/UseApi";
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatDuration, formatTimestamp } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardRow, CardRowLabel } from "../CardPrimitives";
-
-import type { IncidentSummary, IncidentSummaryItem } from "@/Types/Incident";
-
-const MAX_ROWS = 5;
-
-/** Open incidents have no end time; closed ones report how long they ran. */
-const incidentDuration = (incident: IncidentSummaryItem): string | null => {
-	if (!incident.endTime) {
-		return null;
-	}
-	const ms =
-		new Date(incident.endTime).getTime() - new Date(incident.startTime).getTime();
-	return ms > 0 ? formatDuration(ms) : null;
-};
-
-export const RecentIncidentsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<IncidentSummary>(
-		"/incidents/team/summary"
-	);
-
-	const incidents = (data?.latestIncidents ?? []).slice(0, MAX_ROWS);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.recentIncidents.title")}
-			to="/incidents"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				data && data.totalActive > 0 ? (
-					<Typography color={theme.palette.error.main}>
-						{t("pages.dashboard.cards.recentIncidents.active", {
-							count: data.totalActive,
-						})}
-					</Typography>
-				) : null
-			}
-		>
-			{incidents.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.recentIncidents.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{incidents.map((incident) => {
-						const isOpen = incident.status === true;
-						const duration = incidentDuration(incident);
-						return (
-							<CardRow
-								key={incident.id}
-								to="/incidents"
-							>
-								<Dot
-									color={isOpen ? theme.palette.error.light : theme.palette.success.light}
-									size="md"
-								/>
-								<CardRowLabel
-									primary={
-										incident.monitorName ??
-										t("pages.dashboard.cards.recentIncidents.unknownMonitor")
-									}
-									secondary={formatTimestamp(incident.startTime)}
-								/>
-								<Typography
-									color={theme.palette.text.secondary}
-									sx={{ flexShrink: 0 }}
-								>
-									{isOpen
-										? t("pages.dashboard.cards.recentIncidents.ongoing")
-										: (duration ?? "—")}
-								</Typography>
-								{incident.resolutionType === "manual" && (
-									<Typography
-										color={theme.palette.warning.main}
-										sx={{ flexShrink: 0 }}
-									>
-										{t("pages.dashboard.cards.recentIncidents.manual")}
-									</Typography>
-								)}
-							</CardRow>
-						);
-					})}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,258 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { useGet } from "@/Hooks/UseApi";
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatTimestamp } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import {
-	CardFigure,
-	CardRow,
-	CardRowLabel,
-	CardSegmentedBar,
-	CardStatLine,
-} from "../CardPrimitives";
-
-import type { IncidentSummary } from "@/Types/Incident";
-import type { Notification } from "@/Types/Notification";
-import type { MaintenanceWindow } from "@/Types/MaintenanceWindow";
-import type { StatusPage } from "@/Types/StatusPage";
-
-/** Free when Recent incidents is present — same summary call, shared by SWR. */
-export const IncidentStatsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<IncidentSummary>(
-		"/incidents/team/summary"
-	);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.incidentStats.title")}
-			to="/incidents"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					{/* Open now leads, paired with the all-time total for context: two
-					    open means something different against 12 incidents than 183. */}
-					<Stack
-						direction="row"
-						gap={theme.spacing(LAYOUT.XXL)}
-					>
-						<CardFigure
-							value={String(data.totalActive)}
-							caption={t("pages.dashboard.cards.incidentStats.openNow")}
-							color={
-								data.totalActive > 0
-									? theme.palette.error.main
-									: theme.palette.success.main
-							}
-						/>
-						<CardFigure
-							value={data.total.toLocaleString()}
-							caption={t("pages.dashboard.cards.incidentStats.total")}
-						/>
-					</Stack>
-					{/* How much of the fleet heals itself — the automatic/manual split
-					    is already computed server-side and said nothing on the card
-					    before. A high manual share means people are doing the work. */}
-					{data.totalAutomaticResolutions + data.totalManualResolutions > 0 && (
-						<Stack gap={theme.spacing(LAYOUT.XS)}>
-							<CardSegmentedBar
-								segments={[
-									{
-										key: "automatic",
-										value: data.totalAutomaticResolutions,
-										color: theme.palette.success.main,
-										label: `${t("pages.dashboard.cards.incidentStats.automatic")} — ${data.totalAutomaticResolutions}`,
-									},
-									{
-										key: "manual",
-										value: data.totalManualResolutions,
-										color: theme.palette.warning.main,
-										label: `${t("pages.dashboard.cards.incidentStats.manual")} — ${data.totalManualResolutions}`,
-									},
-								]}
-							/>
-							<CardStatLine
-								label={t("pages.dashboard.cards.incidentStats.resolved")}
-								value={t("pages.dashboard.cards.incidentStats.autoManual", {
-									automatic: data.totalAutomaticResolutions,
-									manual: data.totalManualResolutions,
-								})}
-							/>
-						</Stack>
-					)}
-					<Stack gap={theme.spacing(LAYOUT.XS)}>
-						<CardStatLine
-							label={t("pages.dashboard.cards.incidentStats.avgResolution")}
-							value={t("pages.dashboard.cards.incidentStats.hours", {
-								hours: data.avgResolutionTimeHours.toFixed(1),
-							})}
-						/>
-						{data.topMonitor?.monitorName && (
-							<CardStatLine
-								label={t("pages.dashboard.cards.incidentStats.mostIncidents")}
-								value={`${data.topMonitor.monitorName} (${data.topMonitor.incidentCount})`}
-							/>
-						)}
-					</Stack>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const NotificationChannelsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } =
-		useGet<Notification[]>("/notifications/team");
-
-	// The response also carries accessToken and accountSid. Only `type` is read
-	// here — credential fields must never reach the DOM.
-	const byType = useMemo(() => {
-		const counts = new Map<string, number>();
-		for (const notification of data ?? []) {
-			counts.set(notification.type, (counts.get(notification.type) ?? 0) + 1);
-		}
-		return [...counts.entries()].sort((a, b) => b[1] - a[1]);
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.notificationChannels.title")}
-			to="/notifications"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{byType.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.notificationChannels.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{byType.map(([type, count]) => (
-						<CardStatLine
-							key={type}
-							label={type}
-							value={String(count)}
-						/>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const MaintenanceCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<{
-		maintenanceWindows: MaintenanceWindow[];
-		maintenanceWindowCount: number;
-	}>("/maintenance-window/team?page=0&rowsPerPage=0");
-
-	// `active` is a user on/off flag, not "running now" — compare the window
-	// client-side. repeat > 0 means recurring, so `end` may sit in the past for
-	// a window that is currently live.
-	const { running, next } = useMemo(() => {
-		const now = Date.now();
-		const windows = (data?.maintenanceWindows ?? []).filter((entry) => entry.active);
-		const live = windows.filter((entry) => {
-			const start = new Date(entry.start).getTime();
-			const end = new Date(entry.end).getTime();
-			return start <= now && (now <= end || entry.repeat > 0);
-		});
-		const upcoming = windows
-			.filter((entry) => new Date(entry.start).getTime() > now)
-			.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());
-		return { running: live.length, next: upcoming[0] ?? null };
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.maintenance.title")}
-			to="/maintenance"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{!data || data.maintenanceWindows.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.maintenance.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardFigure
-						value={String(running)}
-						caption={t("pages.dashboard.cards.maintenance.runningNow")}
-					/>
-					{next && (
-						<CardStatLine
-							label={t("pages.dashboard.cards.maintenance.next")}
-							value={formatTimestamp(next.start)}
-						/>
-					)}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const StatusPagesCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } =
-		useGet<StatusPage[]>("/status-page/team");
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.statusPages.title")}
-			to="/status"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{!data || data.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.statusPages.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{data.map((page) => (
-						<CardRow
-							key={page.id}
-							to={`/status/${page.url}`}
-						>
-							<Dot
-								color={
-									page.isPublished
-										? theme.palette.success.light
-										: theme.palette.text.secondary
-								}
-								size="md"
-							/>
-							<CardRowLabel
-								primary={page.companyName}
-								secondary={t("pages.dashboard.cards.statusPages.monitorCount", {
-									count: page.monitors.length,
-								})}
-							/>
-							<Typography
-								color={theme.palette.text.secondary}
-								flexShrink={0}
-							>
-								{page.isPublished
-									? t("pages.dashboard.cards.statusPages.published")
-									: t("pages.dashboard.cards.statusPages.draft")}
-							</Typography>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,159 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import CircularProgress from "@mui/material/CircularProgress";
-import Skeleton from "@mui/material/Skeleton";
-import { useTheme } from "@mui/material/styles";
-import { Link as RouterLink } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-
-import { BaseBox } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { useCardSlot } from "./CardSlotContext";
-
-import type { ReactNode } from "react";
-
-// Control height plus the header's vertical padding, so a card with no action
-// still lines up with one that has a button in its header.
-const HEADER_MIN_HEIGHT = 44;
-const SKELETON_ROW_HEIGHT = 20;
-
-interface DashboardCardProps {
-	title: string;
-	/** Where the title links to — the page this card belongs to. */
-	to?: string;
-	/** Rendered at the right of the header: a count, an average, a filter. */
-	action?: ReactNode;
-	isLoading?: boolean;
-	error?: unknown;
-	/** Dimmed rather than blanked while a refresh is in flight over stale data. */
-	isStale?: boolean;
-	children: ReactNode;
-}
-
-export const DashboardCard = ({
-	title,
-	to,
-	action,
-	isLoading,
-	error,
-	isStale,
-	children,
-}: DashboardCardProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const slot = useCardSlot();
-
-	return (
-		<BaseBox
-			display="flex"
-			flexDirection="column"
-			height="100%"
-			sx={{
-				overflow: "hidden",
-				"&:hover .dashboard-card-slot": {
-					opacity: 1,
-				},
-			}}
-		>
-			<Stack
-				direction="row"
-				alignItems="center"
-				justifyContent="space-between"
-				gap={theme.spacing(LAYOUT.SM)}
-				px={theme.spacing(LAYOUT.MD)}
-				py={theme.spacing(LAYOUT.SM)}
-				borderBottom={`1px solid ${theme.palette.divider}`}
-				minHeight={HEADER_MIN_HEIGHT}
-			>
-				<Typography
-					{...(to ? { component: RouterLink, to } : {})}
-					fontWeight={500}
-					color={theme.palette.text.primary}
-					sx={{
-						textDecoration: "none",
-						...(to && {
-							"&:hover": { color: theme.palette.primary.main },
-						}),
-					}}
-				>
-					{title}
-				</Typography>
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(LAYOUT.SM)}
-					flexShrink={0}
-					position="relative"
-				>
-					{isStale && (
-						<CircularProgress
-							size={16}
-							color="primary"
-						/>
-					)}
-					{action && <Box>{action}</Box>}
-					{slot && (
-						<Box
-							className="dashboard-card-slot"
-							sx={{
-								opacity: 0.3,
-								transition: "opacity 0.15s ease",
-							}}
-						>
-							{slot}
-						</Box>
-					)}
-				</Stack>
-			</Stack>
-			<Box
-				flex={1}
-				p={theme.spacing(LAYOUT.MD)}
-				sx={{
-					...(isStale && { opacity: 0.5, transition: "opacity 0.2s ease" }),
-				}}
-			>
-				{isLoading ? (
-					<CardSkeleton />
-				) : error ? (
-					<CardMessage text={t("pages.dashboard.card.error")} />
-				) : (
-					children
-				)}
-			</Box>
-		</BaseBox>
-	);
-};
-
-/** Placeholder rows, sized to the row list most cards render. */
-export const CardSkeleton = ({ rows = 3 }: { rows?: number }) => {
-	const theme = useTheme();
-	return (
-		<Stack gap={theme.spacing(LAYOUT.SM)}>
-			{Array.from({ length: rows }).map((_, index) => (
-				<Skeleton
-					key={index}
-					variant="rounded"
-					height={SKELETON_ROW_HEIGHT}
-					width={index === rows - 1 ? "60%" : "100%"}
-				/>
-			))}
-		</Stack>
-	);
-};
-
-/** The quiet one-line state a healthy card collapses to. */
-export const CardMessage = ({ text, action }: { text: string; action?: ReactNode }) => {
-	const theme = useTheme();
-	return (
-		<Stack
-			direction="row"
-			alignItems="center"
-			justifyContent="space-between"
-			gap={theme.spacing(LAYOUT.SM)}
-		>
-			<Typography color={theme.palette.text.secondary}>{text}</Typography>
-			{action}
-		</Stack>
-	);
-};
@@ -1,72 +0,0 @@
-import Box from "@mui/material/Box";
-import { useMemo } from "react";
-
-import type { CheckSnapshot } from "@/Types/Check";
-
-const VIEWBOX_WIDTH = 100;
-// The svg renders at its viewBox height, so one constant serves both.
-const VIEWBOX_HEIGHT = 24;
-// Matches the 1.5 stroke the shared Icon component uses.
-const STROKE_WIDTH = 1.5;
-
-/**
- * Response times as a bare polyline. Deliberately axis-free and label-free —
- * at this size the shape is the only readable signal.
- *
- * `checks` arrives oldest-first, which is already left-to-right reading order.
- */
-export const Sparkline = ({
-	checks,
-	color,
-}: {
-	checks: CheckSnapshot[];
-	color: string;
-}) => {
-	const points = useMemo(() => {
-		const values = checks
-			.map((check) => check.responseTime)
-			.filter((value): value is number => typeof value === "number");
-
-		if (values.length < 2) {
-			return null;
-		}
-
-		const max = Math.max(...values);
-		const min = Math.min(...values);
-		const span = max - min || 1;
-
-		return values
-			.map((value, index) => {
-				const x = (index / (values.length - 1)) * VIEWBOX_WIDTH;
-				const y = VIEWBOX_HEIGHT - ((value - min) / span) * VIEWBOX_HEIGHT;
-				return `${x.toFixed(1)},${y.toFixed(1)}`;
-			})
-			.join(" ");
-	}, [checks]);
-
-	if (!points) {
-		return null;
-	}
-
-	return (
-		<Box
-			component="svg"
-			viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
-			preserveAspectRatio="none"
-			aria-hidden="true"
-			width="100%"
-			height={VIEWBOX_HEIGHT}
-			display="block"
-		>
-			<polyline
-				points={points}
-				fill="none"
-				stroke={color}
-				strokeWidth={STROKE_WIDTH}
-				strokeLinejoin="round"
-				strokeLinecap="round"
-				vectorEffect="non-scaling-stroke"
-			/>
-		</Box>
-	);
-};
@@ -1,84 +0,0 @@
-import type { ComponentType } from "react";
-
-// The 12-column grid the dashboard lays cards out on.
-//
-// Every card is currently half-width, so they pair up down the page and the
-// grid reads as one system. Full width stays in the type for a card whose
-// content genuinely needs it. Width is declared per card type in code and is
-// never a user setting.
-export const CardWidths = [6, 12] as const;
-export type CardWidth = (typeof CardWidths)[number];
-
-export const GRID_COLUMNS = 12;
-
-// Picker groups mirror the sidebar sections: you look for a card where you
-// look for the feature it belongs to.
-export const CardGroups = [
-	"uptime",
-	"infrastructure",
-	"incidents",
-	"notifications",
-	"maintenance",
-	"statusPages",
-	"checks",
-	"logs",
-	"settings",
-] as const;
-export type CardGroup = (typeof CardGroups)[number];
-
-// The Containers card (CARD-SPECS.md #11) is deliberately absent: it needs
-// `containerSummary` on the check snapshot, which arrives with the Docker
-// monitoring work. Add it here once that lands on develop.
-export const CardIds = [
-	"monitorStatus",
-	"currentlyDown",
-	"slowestMonitors",
-	"lowestUptime",
-	"monitorsByType",
-	"monitorsByGroup",
-	"recentIncidents",
-	"incidentStats",
-	"notificationChannels",
-	"maintenance",
-	"statusPages",
-	"failedChecks",
-	"busiestServers",
-	"checkmateServer",
-	"checksOnSchedule",
-	"recentErrors",
-	"team",
-] as const;
-export type CardId = (typeof CardIds)[number];
-
-export interface CardDefinition {
-	id: CardId;
-	/** i18n key fragment under pages.dashboard.cards.<key>. */
-	key: string;
-	group: CardGroup;
-	width: CardWidth;
-	/** Hidden from the page and absent from the picker for non-admins. */
-	adminOnly?: boolean;
-	component: ComponentType;
-}
-
-// The cards a fresh dashboard starts with. Chosen so a brand new install still
-// shows something real: Checkmate server works with zero monitors.
-// Ordered so the declared widths pair into full rows: a card left alone in a
-// row is stretched to fill it, so 8- and 4-wide cards are kept adjacent.
-export const DEFAULT_CARD_IDS: readonly CardId[] = [
-	"monitorStatus",
-	"currentlyDown",
-	"failedChecks",
-	"monitorsByType",
-	"recentIncidents",
-	"checkmateServer",
-];
-
-export const DASHBOARD_CARDS_STORAGE_KEY = "checkmate-dashboard-cards";
-
-/**
- * Poll rates, in ms. Monitor and server figures move continuously; the log ring
- * buffer rotates fast but is expensive to re-read, so it is polled slowly.
- */
-export const REFRESH_INTERVAL_MS = 30000;
-export const SLOW_REFRESH_INTERVAL_MS = 60000;
@@ -1,8 +0,0 @@
-import type { Monitor } from "@/Types/Monitor";
-
-/**
- * `recentChecks` is oldest-first — the server appends each snapshot with
- * `$push … $slice: -N` — so the newest retained check is the last element.
- */
-export const latestCheck = (monitor: Monitor) =>
-	monitor.recentChecks?.[monitor.recentChecks.length - 1];
@@ -1,86 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useState } from "react";
-import { LayoutGrid } from "lucide-react";
-
-import { BasePage, EmptyState, Icon } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { CardGrid } from "./Components/CardGrid";
-import { CardPicker } from "./Components/CardPicker";
-import { MonitorsContext, useMonitorsRequest } from "./useDashboardData";
-import { useCardSelection } from "./useCardSelection";
-
-const Dashboard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const monitorsRequest = useMonitorsRequest();
-	const {
-		cards,
-		available,
-		selected,
-		addCard,
-		removeCard,
-		reorderCards,
-		resetCards,
-		selectAll,
-		deselectAll,
-		allSelected,
-	} = useCardSelection();
-	const [isPickerOpen, setIsPickerOpen] = useState(false);
-
-	return (
-		<MonitorsContext.Provider value={monitorsRequest}>
-			<BasePage headerKey="dashboard">
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<Stack
-						direction="row"
-						justifyContent="flex-end"
-					>
-						<Button
-							variant="outlined"
-							color="secondary"
-							onClick={() => setIsPickerOpen(true)}
-							startIcon={
-								<Icon
-									icon={LayoutGrid}
-									size={16}
-								/>
-							}
-						>
-							{t("pages.dashboard.picker.trigger")}
-						</Button>
-					</Stack>
-					{cards.length === 0 ? (
-						<EmptyState
-							title={t("pages.dashboard.empty.title")}
-							description={t("pages.dashboard.empty.description")}
-							actionText={t("pages.dashboard.picker.trigger")}
-							onAction={() => setIsPickerOpen(true)}
-						/>
-					) : (
-						<CardGrid
-							cards={cards}
-							onReorder={reorderCards}
-						/>
-					)}
-				</Stack>
-				<CardPicker
-					open={isPickerOpen}
-					available={available}
-					selected={selected}
-					allSelected={allSelected}
-					onAdd={addCard}
-					onRemove={removeCard}
-					onSelectAll={selectAll}
-					onDeselectAll={deselectAll}
-					onReset={resetCards}
-					onClose={() => setIsPickerOpen(false)}
-				/>
-			</BasePage>
-		</MonitorsContext.Provider>
-	);
-};
-
-export default Dashboard;
@@ -1,21 +0,0 @@
-import type { CardDefinition } from "./cards";
-
-export interface PlacedCard {
-	card: CardDefinition;
-	/** Columns rendered — currently always the declared width. */
-	renderedWidth: number;
-}
-
-/**
- * Packs cards into rows of GRID_COLUMNS.
- *
- * With a single body width this is a straight pass-through: two halves fill a
- * row exactly, so no card is ever stretched to close a gap.
- *
- * An odd number of cards leaves the last one alone on its row. It keeps its
- * declared width rather than being promoted to full: widening one card to fill
- * the row makes it look more important than it is, and an odd count is a
- * property of the selection, not something the layout should hide.
- */
-export const layoutCards = (cards: CardDefinition[]): PlacedCard[] =>
-	cards.map((card) => ({ card, renderedWidth: card.width }));
@@ -1,161 +0,0 @@
-import { MonitorStatusCard } from "./Components/Cards/MonitorStatusCard";
-import { CurrentlyDownCard } from "./Components/Cards/CurrentlyDownCard";
-import { FailedChecksCard } from "./Components/Cards/FailedChecksCard";
-import { RecentIncidentsCard } from "./Components/Cards/RecentIncidentsCard";
-import { MonitorsByTypeCard } from "./Components/Cards/MonitorsByTypeCard";
-import { MonitorsByGroupCard } from "./Components/Cards/MonitorsByGroupCard";
-import { CheckmateServerCard } from "./Components/Cards/CheckmateServerCard";
-import { BusiestServersCard } from "./Components/Cards/BusiestServersCard";
-import { SlowestMonitorsCard, LowestUptimeCard } from "./Components/Cards/RankingCards";
-import {
-	IncidentStatsCard,
-	NotificationChannelsCard,
-	MaintenanceCard,
-	StatusPagesCard,
-} from "./Components/Cards/SummaryCards";
-import {
-	ChecksOnScheduleCard,
-	RecentErrorsCard,
-	TeamCard,
-} from "./Components/Cards/AdminCards";
-
-import type { CardDefinition, CardId } from "./cards";
-
-// Declared width is the minimum number of columns a card needs. The grid may
-// stretch the last card of a short row; nothing here is a user setting.
-//
-// Order is the render order, and the order the picker lists them in.
-//
-// Every card is half-width and pairs up down the page. The grid promotes a
-// lone trailing card to full width so the page does not end on a ragged half.
-export const CARD_REGISTRY: CardDefinition[] = [
-	{
-		id: "monitorStatus",
-		key: "monitorStatus",
-		group: "uptime",
-		width: 6,
-		component: MonitorStatusCard,
-	},
-	{
-		id: "currentlyDown",
-		key: "currentlyDown",
-		group: "uptime",
-		width: 6,
-		component: CurrentlyDownCard,
-	},
-	{
-		id: "failedChecks",
-		key: "failedChecks",
-		group: "checks",
-		width: 6,
-		component: FailedChecksCard,
-	},
-	{
-		id: "slowestMonitors",
-		key: "slowestMonitors",
-		group: "uptime",
-		width: 6,
-		component: SlowestMonitorsCard,
-	},
-	{
-		id: "lowestUptime",
-		key: "lowestUptime",
-		group: "uptime",
-		width: 6,
-		component: LowestUptimeCard,
-	},
-	{
-		id: "monitorsByType",
-		key: "monitorsByType",
-		group: "uptime",
-		width: 6,
-		component: MonitorsByTypeCard,
-	},
-	{
-		id: "monitorsByGroup",
-		key: "monitorsByGroup",
-		group: "uptime",
-		width: 6,
-		component: MonitorsByGroupCard,
-	},
-	{
-		id: "busiestServers",
-		key: "busiestServers",
-		group: "infrastructure",
-		width: 6,
-		component: BusiestServersCard,
-	},
-	{
-		id: "recentIncidents",
-		key: "recentIncidents",
-		group: "incidents",
-		width: 6,
-		component: RecentIncidentsCard,
-	},
-	{
-		id: "incidentStats",
-		key: "incidentStats",
-		group: "incidents",
-		width: 6,
-		component: IncidentStatsCard,
-	},
-	{
-		id: "notificationChannels",
-		key: "notificationChannels",
-		group: "notifications",
-		width: 6,
-		component: NotificationChannelsCard,
-	},
-	{
-		id: "maintenance",
-		key: "maintenance",
-		group: "maintenance",
-		width: 6,
-		component: MaintenanceCard,
-	},
-	{
-		id: "statusPages",
-		key: "statusPages",
-		group: "statusPages",
-		width: 6,
-		component: StatusPagesCard,
-	},
-	{
-		id: "checkmateServer",
-		key: "checkmateServer",
-		group: "logs",
-		width: 6,
-		adminOnly: true,
-		component: CheckmateServerCard,
-	},
-	{
-		id: "checksOnSchedule",
-		key: "checksOnSchedule",
-		group: "logs",
-		width: 6,
-		adminOnly: true,
-		component: ChecksOnScheduleCard,
-	},
-	{
-		id: "recentErrors",
-		key: "recentErrors",
-		group: "logs",
-		width: 6,
-		adminOnly: true,
-		component: RecentErrorsCard,
-	},
-	{
-		id: "team",
-		key: "team",
-		group: "settings",
-		width: 6,
-		adminOnly: true,
-		component: TeamCard,
-	},
-];
-
-const BY_ID = new Map<CardId, CardDefinition>(
-	CARD_REGISTRY.map((card) => [card.id, card])
-);
-
-export const getCard = (id: CardId): CardDefinition | undefined => BY_ID.get(id);
@@ -1,109 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { useSelector, useDispatch } from "react-redux";
-
-import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import { setDashboardCards } from "@/Features/UI/uiSlice";
-import { CardIds, DEFAULT_CARD_IDS, type CardId } from "./cards";
-import { CARD_REGISTRY, getCard } from "./registry";
-
-import type { CardDefinition } from "./cards";
-import type { RootState } from "@/store";
-
-const isCardId = (value: unknown): value is CardId =>
-	typeof value === "string" && (CardIds as readonly string[]).includes(value);
-
-export const useCardSelection = () => {
-	const dispatch = useDispatch();
-	const isAdmin = useIsAdmin();
-
-	// null means the user has never customised; fall back to defaults.
-	const stored = useSelector((state: RootState) => state.ui.dashboardCards);
-	const selected: CardId[] = useMemo(
-		() => (stored !== null ? stored.filter(isCardId) : [...DEFAULT_CARD_IDS]),
-		[stored]
-	);
-
-	const isVisible = useCallback(
-		(card: CardDefinition) => !card.adminOnly || isAdmin,
-		[isAdmin]
-	);
-
-	const cards = useMemo(
-		() =>
-			selected
-				.map(getCard)
-				.filter((card): card is CardDefinition => card !== undefined)
-				.filter(isVisible),
-		[selected, isVisible]
-	);
-
-	const available = useMemo(() => CARD_REGISTRY.filter(isVisible), [isVisible]);
-
-	const addCard = useCallback(
-		(id: CardId) => {
-			if (!selected.includes(id)) dispatch(setDashboardCards([...selected, id]));
-		},
-		[dispatch, selected]
-	);
-
-	const removeCard = useCallback(
-		(id: CardId) => {
-			dispatch(setDashboardCards(selected.filter((cardId) => cardId !== id)));
-		},
-		[dispatch, selected]
-	);
-
-	const resetCards = useCallback(() => dispatch(setDashboardCards(null)), [dispatch]);
-
-	const selectAll = useCallback(
-		() =>
-			dispatch(
-				setDashboardCards(
-					available.map((card) => card.id).filter((id) => !selected.includes(id)).length >
-						0
-						? [...new Set([...selected, ...available.map((card) => card.id)])]
-						: selected
-				)
-			),
-		[dispatch, available, selected]
-	);
-
-	const deselectAll = useCallback(() => dispatch(setDashboardCards([])), [dispatch]);
-
-	/**
-	 * Reorders cards based on DnD source/dest indices into the visible `cards` array.
-	 * Hidden admin cards keep their stored positions unchanged.
-	 */
-	const reorderCards = useCallback(
-		(sourceIndex: number, destIndex: number) => {
-			const visibleIds = cards.map((c) => c.id);
-			const reordered = [...visibleIds];
-			const [moved] = reordered.splice(sourceIndex, 1);
-			reordered.splice(destIndex, 0, moved);
-			let visibleIdx = 0;
-			dispatch(
-				setDashboardCards(
-					selected.map((cardId) =>
-						visibleIds.includes(cardId) ? reordered[visibleIdx++] : cardId
-					)
-				)
-			);
-		},
-		[dispatch, cards, selected]
-	);
-
-	const allSelected = available.every((card) => selected.includes(card.id));
-
-	return {
-		cards,
-		available,
-		selected,
-		addCard,
-		removeCard,
-		reorderCards,
-		resetCards,
-		selectAll,
-		deselectAll,
-		allSelected,
-	};
-};
@@ -1,32 +0,0 @@
-import { createContext, useContext } from "react";
-import { useGet } from "@/Hooks/UseApi";
-import { MonitorTypes, type MonitorsWithChecksResponse } from "@/Types/Monitor";
-import { REFRESH_INTERVAL_MS } from "./cards";
-
-// One request feeds every monitor-derived card, read from context so adding a
-// card costs no extra call. No rowsPerPage: the dashboard summarises the whole
-// fleet, and the repository treats its absence as "no limit".
-const buildMonitorsUrl = () => {
-	const params = new URLSearchParams();
-	MonitorTypes.forEach((type) => params.append("type", type));
-	return `/monitors/team/with-checks?${params.toString()}`;
-};
-
-export const useMonitorsRequest = () =>
-	useGet<MonitorsWithChecksResponse>(
-		buildMonitorsUrl(),
-		{},
-		{ refreshInterval: REFRESH_INTERVAL_MS, keepPreviousData: true }
-	);
-
-export type MonitorsRequest = ReturnType<typeof useMonitorsRequest>;
-
-export const MonitorsContext = createContext<MonitorsRequest | null>(null);
-
-export const useMonitors = (): MonitorsRequest => {
-	const context = useContext(MonitorsContext);
-	if (!context) {
-		throw new Error("useMonitors must be used inside the dashboard's MonitorsContext");
-	}
-	return context;
-};
@@ -1,69 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { Dot } from "@/Components/design-elements";
-
-// Hooks
-import { useEffect, useState } from "react";
-import { useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
-
-// Utils
-import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
-import { MS_PER_SECOND, MS_PER_MINUTE } from "@/Utils/TimeUtils";
-
-interface HeaderLogsProps {
-	lines: number;
-	loading: boolean;
-	lastUpdatedAt: number | null;
-}
-
-export const HeaderLogs = ({ lines, loading, lastUpdatedAt }: HeaderLogsProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const [now, setNow] = useState(() => Date.now());
-
-	useEffect(() => {
-		if (lastUpdatedAt === null) return;
-		setNow(Date.now());
-		const id = window.setInterval(() => setNow(Date.now()), MS_PER_SECOND);
-		return () => window.clearInterval(id);
-	}, [lastUpdatedAt]);
-
-	const renderStatus = () => {
-		if (loading) return t("pages.docker.container.logs.loading");
-		if (lastUpdatedAt === null) return null;
-		const ageMs = Math.max(0, now - lastUpdatedAt);
-		return ageMs < MS_PER_MINUTE
-			? t("pages.docker.container.logs.updatedSecondsAgo", {
-					count: Math.floor(ageMs / MS_PER_SECOND),
-				})
-			: t("pages.docker.container.logs.updatedMinutesAgo", {
-					count: Math.floor(ageMs / MS_PER_MINUTE),
-				});
-	};
-
-	return (
-		<Stack
-			direction="row"
-			alignItems="center"
-			gap={LAYOUT.MD}
-		>
-			<Typography>
-				{t("pages.docker.container.logs.recentLines", { count: lines })}
-			</Typography>
-			<Stack
-				direction="row"
-				alignItems="center"
-				gap={SPACING.SM}
-			>
-				{lastUpdatedAt !== null && !loading && (
-					<Dot
-						color={theme.palette.success.main}
-						size="md"
-					/>
-				)}
-				<Typography color={theme.palette.text.secondary}>{renderStatus()}</Typography>
-			</Stack>
-		</Stack>
-	);
-};
@@ -1,78 +0,0 @@
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Divider from "@mui/material/Divider";
-import { Fragment } from "react";
-
-// Hooks
-import { useTheme } from "@mui/material";
-import { useSelector } from "react-redux";
-import { useTranslation } from "react-i18next";
-
-// Utils
-import type { DockerLogRow } from "@/Utils/MonitorUtils";
-import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
-import type { RootState } from "@/store";
-
-export const RowLog = ({ row }: { row: DockerLogRow }) => {
-	const theme = useTheme();
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	const { t } = useTranslation();
-
-	return (
-		<Fragment>
-			<Grid
-				container
-				spacing={{ xs: 0, md: LAYOUT.MD }}
-				py={{ xs: LAYOUT.LG, md: 0 }}
-			>
-				<Grid size={{ xs: 12, md: "auto" }}>
-					<Typography
-						fontFamily="monospace"
-						color={theme.palette.text.secondary}
-					>
-						{formatDateWithTz(row.ts, "MMM D HH:mm:ss", uiTimezone)}
-					</Typography>
-				</Grid>
-				<Grid size={{ xs: 12, md: "grow" }}>
-					<Typography
-						fontFamily={"monospace"}
-						whiteSpace={{ xs: "pre-wrap", md: "nowrap" }}
-						sx={{
-							overflowWrap: { xs: "anywhere", md: "normal" },
-						}}
-					>
-						<Box
-							component={"span"}
-							color={
-								row.stream === "stderr"
-									? theme.palette.error.main
-									: theme.palette.success.main
-							}
-						>
-							{row.stream}
-						</Box>
-						: {row.text}
-					</Typography>
-				</Grid>
-			</Grid>
-			{row.gapBefore ? (
-				<Stack
-					width="100%"
-					direction="row"
-					alignItems={"center"}
-					py={SPACING.MD}
-				>
-					<Typography pr={SPACING.MD}>
-						{t("pages.docker.container.logs.skipped")}
-					</Typography>
-					<Divider sx={{ flex: 1 }} />
-				</Stack>
-			) : (
-				<Divider sx={{ display: { xs: "block", md: "none" } }} />
-			)}
-		</Fragment>
-	);
-};
@@ -1,54 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { StatBox } from "@/Components/design-elements";
-
-// Types
-
-// Hooks
-import { useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import type { DockerContainerInfo } from "@/Types/Check";
-
-// Utils
-import { formatDuration } from "@/Utils/TimeUtils";
-import { getDockerPalette } from "@/Utils/MonitorUtils";
-
-export const DockerContainerStatusBoxes = ({
-	container,
-}: {
-	container: DockerContainerInfo | undefined;
-}) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-
-	if (!container) return null;
-
-	const { state, restartCount, health } = container;
-	const startedAt = container.startedAt ?? "0";
-	const runningFor = Date.now() - new Date(startedAt).getTime();
-	const palette = getDockerPalette(state);
-	return (
-		<Stack
-			direction="row"
-			gap={theme.spacing(8)}
-			flexWrap={"wrap"}
-		>
-			<StatBox
-				title={t("common.labels.state")}
-				subtitle={state}
-				palette={palette}
-			/>
-			<StatBox
-				title={t("common.labels.uptime")}
-				subtitle={formatDuration(runningFor)}
-			/>
-			<StatBox
-				title={t("common.labels.restarts")}
-				subtitle={String(restartCount ?? 0)}
-			/>
-			<StatBox
-				title={t("common.labels.health")}
-				subtitle={health}
-			/>
-		</Stack>
-	);
-};
@@ -1,252 +0,0 @@
-// Components
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { BaseBox, EmptyState } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
-import { HeaderLogs } from "@/Pages/Docker/ContainerDetails/Components/HeaderLogs";
-import { RowLog } from "@/Pages/Docker/ContainerDetails/Components/RowLog";
-
-// Types
-import type { DockerContainerLogsResponse } from "@/Types/Monitor";
-import type { DockerLog } from "@/Types/Check";
-import type { ApiResponse } from "@/Hooks/UseApi";
-
-// Hooks
-import {
-	useState,
-	useEffect,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-	useCallback,
-} from "react";
-import { useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import { useToast } from "@/Hooks/UseToast";
-import { useIsAdmin } from "@/Hooks/useIsAdmin";
-
-// Utils
-import { get } from "@/Utils/ApiClient";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { flattenDockerLogs } from "@/Utils/MonitorUtils";
-
-interface TabLogsProps {
-	monitorId?: string;
-	containerName?: string;
-	enabled: boolean;
-}
-
-const SCROLL_PIN_THRESHOLD_PX = 8;
-const TAIL_POLL_MS = 10_000;
-
-const isScrolledToBottom = (el: HTMLElement) =>
-	el.scrollHeight - el.scrollTop - el.clientHeight <= SCROLL_PIN_THRESHOLD_PX;
-
-const fetchLogs = async (url: string, params: { before?: string; after?: string }) => {
-	const res = await get<ApiResponse<DockerContainerLogsResponse>>(url, { params });
-	return res.data.data;
-};
-
-export const TabLogs = ({ monitorId, containerName, enabled }: TabLogsProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { toastError } = useToast();
-	const isAdmin = useIsAdmin();
-
-	// logs is newest-first, matching the API and what flattenDockerLogs expects.
-	const [logs, setLogs] = useState<DockerLog[]>([]);
-	const [olderExhausted, setOlderExhausted] = useState(false);
-	const [loadingInitial, setLoadingInitial] = useState(false);
-	const [loadingOlder, setLoadingOlder] = useState(false);
-	const [lastUpdatedAt, setLastUpdatedAt] = useState<number | null>(null);
-
-	const logsUrl =
-		isAdmin && enabled && monitorId && containerName
-			? `/monitors/docker/details/${encodeURIComponent(monitorId)}/containers/${encodeURIComponent(containerName)}/logs`
-			: null;
-
-	const newestCursor = logs[0]?.checkedAt;
-	const oldestCursor = logs[logs.length - 1]?.checkedAt;
-
-	// Initial page. Resets everything when the container changes.
-	useEffect(() => {
-		setLogs([]);
-		setOlderExhausted(false);
-		if (!logsUrl) return;
-		let cancelled = false;
-		setLoadingInitial(true);
-		fetchLogs(logsUrl, {})
-			.then((page) => {
-				if (cancelled) return;
-				setLogs(page.logs);
-				setOlderExhausted(page.nextCursor === null);
-				setLastUpdatedAt(Date.now());
-			})
-			.catch(() => {
-				if (cancelled) return;
-				toastError(t("pages.docker.container.logs.loadError"));
-			})
-			.finally(() => {
-				if (!cancelled) setLoadingInitial(false);
-			});
-		return () => {
-			cancelled = true;
-		};
-	}, [logsUrl, t, toastError]);
-
-	const newestCursorRef = useRef(newestCursor);
-	newestCursorRef.current = newestCursor;
-
-	useEffect(() => {
-		if (!logsUrl) return;
-		let inFlight = false;
-		const tick = async () => {
-			if (inFlight || document.hidden) return;
-			inFlight = true;
-			try {
-				const cursor = newestCursorRef.current;
-				const page = await fetchLogs(logsUrl, cursor ? { after: cursor } : {});
-				if (page.logs.length > 0) setLogs((prev) => [...page.logs, ...prev]);
-				setLastUpdatedAt(Date.now());
-			} catch (err: unknown) {
-				console.error(err);
-			} finally {
-				inFlight = false;
-			}
-		};
-		const id = window.setInterval(tick, TAIL_POLL_MS);
-		document.addEventListener("visibilitychange", tick);
-		return () => {
-			window.clearInterval(id);
-			document.removeEventListener("visibilitychange", tick);
-		};
-	}, [logsUrl]);
-
-	const rows = useMemo(() => flattenDockerLogs(logs), [logs]);
-
-	const logBoxRef = useRef<HTMLDivElement>(null);
-	const pinnedToBottom = useRef(true);
-	const prependAnchor = useRef<{ scrollHeight: number; scrollTop: number } | null>(null);
-
-	// Always pin to bottom when container/monitor changes
-	useLayoutEffect(() => {
-		pinnedToBottom.current = true;
-	}, [monitorId, containerName]);
-
-	// Rows changed: restore position after a prepend, otherwise honour the pin
-	useLayoutEffect(() => {
-		const el = logBoxRef.current;
-		if (!el) return;
-		const anchor = prependAnchor.current;
-		if (anchor) {
-			prependAnchor.current = null;
-			el.scrollTop = el.scrollHeight - anchor.scrollHeight + anchor.scrollTop;
-			return;
-		}
-		if (pinnedToBottom.current) el.scrollTop = el.scrollHeight;
-	}, [rows]);
-
-	const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
-		pinnedToBottom.current = isScrolledToBottom(event.currentTarget);
-	}, []);
-
-	const loadOlder = useCallback(async () => {
-		if (!logsUrl || !oldestCursor || loadingOlder) return;
-		setLoadingOlder(true);
-		try {
-			const page = await fetchLogs(logsUrl, { before: oldestCursor });
-			const el = logBoxRef.current;
-			if (el)
-				prependAnchor.current = {
-					scrollHeight: el.scrollHeight,
-					scrollTop: el.scrollTop,
-				};
-			setLogs((prev) => [...prev, ...page.logs]);
-			setOlderExhausted(page.nextCursor === null);
-		} catch {
-			toastError(t("pages.docker.container.logs.loadOlderError"));
-		} finally {
-			setLoadingOlder(false);
-		}
-	}, [logsUrl, oldestCursor, loadingOlder, t, toastError]);
-
-	if (!isAdmin) {
-		return (
-			<EmptyState
-				title={t("pages.docker.container.logs.forbidden.title")}
-				description={t("pages.docker.container.logs.forbidden.description")}
-			/>
-		);
-	}
-
-	if (!enabled) {
-		return (
-			<EmptyState
-				title={t("pages.docker.container.logs.disabled.title")}
-				description={t("pages.docker.container.logs.disabled.description")}
-				actionText={t("pages.docker.container.logs.disabled.action")}
-				actionTo={`/docker/configure/${monitorId}`}
-			/>
-		);
-	}
-
-	if (lastUpdatedAt !== null && rows.length === 0) {
-		return (
-			<EmptyState
-				title={t("pages.docker.container.logs.empty.title")}
-				description={t("pages.docker.container.logs.empty.description")}
-			/>
-		);
-	}
-
-	return (
-		<Stack gap={LAYOUT.MD}>
-			<HeaderLogs
-				lines={rows.length}
-				loading={loadingInitial}
-				lastUpdatedAt={lastUpdatedAt}
-			/>
-			<BaseBox
-				ref={logBoxRef}
-				onScroll={handleScroll}
-				minHeight={240}
-				maxHeight="50vh"
-				overflow="auto"
-				padding={LAYOUT.MD}
-				sx={{ overflowAnchor: "none" }}
-			>
-				{rows.length > 0 && (
-					<Stack
-						direction="row"
-						justifyContent="center"
-						pb={LAYOUT.MD}
-					>
-						{olderExhausted ? (
-							<Typography color={theme.palette.text.secondary}>
-								{t("pages.docker.container.logs.noOlder")}
-							</Typography>
-						) : (
-							<Button
-								variant="contained"
-								disabled={loadingOlder}
-								onClick={loadOlder}
-							>
-								{loadingOlder
-									? t("pages.docker.container.logs.loadingOlder")
-									: t("pages.docker.container.logs.loadOlder")}
-							</Button>
-						)}
-					</Stack>
-				)}
-				{rows.map((row) => {
-					return (
-						<RowLog
-							key={row.key}
-							row={row}
-						/>
-					);
-				})}
-			</BaseBox>
-		</Stack>
-	);
-};
@@ -1,113 +0,0 @@
-// Components
-import Grid from "@mui/material/Grid";
-import Stack from "@mui/material/Stack";
-import { HistogramDockerContainer } from "@/Components/monitors/charts/HistogramDockerContainer";
-
-// Hooks
-import { Typography, useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-// Types
-import type { Theme } from "@mui/material";
-import type { TFunction } from "i18next";
-import type { DockerContainerStats } from "@/Types/Monitor";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatPercentage } from "@/Utils/FormatUtils";
-import prettyBytes from "pretty-bytes";
-import { BaseBox } from "@/Components/design-elements";
-import { dedupeDockerPorts, getDockerMountLabel } from "@/Utils/MonitorUtils";
-
-const getChartConfigs = (theme: Theme, t: TFunction, stats: DockerContainerStats) => [
-	{
-		title: t("common.charts.labels.cpuUsage"),
-		key: "avgCpuPct",
-		color: theme.palette.success.main,
-		rightTitle: formatPercentage(stats?.latest?.container.cpuPct || 0),
-	},
-	{
-		title: t("common.charts.labels.memoryUsage"),
-		key: "avgMemoryUsedBytes",
-		color: theme.palette.primary.main,
-		rightTitle: prettyBytes(stats?.latest?.container.memoryUsedBytes || 0),
-	},
-];
-
-export const TabOverview = ({ stats }: { stats: DockerContainerStats }) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-
-	const { ports, mounts } = stats?.latest?.container ?? {};
-	const dedupedPorts = dedupeDockerPorts(ports ?? []);
-	return (
-		<Grid
-			container
-			spacing={LAYOUT.MD}
-		>
-			{getChartConfigs(theme, t, stats).map((config) => {
-				return (
-					<Grid
-						key={config.key}
-						size={isSmall ? 12 : 6}
-					>
-						<HistogramDockerContainer
-							title={config.title}
-							rightTitle={config.rightTitle}
-							stats={stats}
-							dataKey={config.key}
-							strokeColor={config.color}
-							gradientStartColor={config.color}
-						/>
-					</Grid>
-				);
-			})}
-			<Grid size={isSmall ? 12 : 6}>
-				<BaseBox
-					padding={LAYOUT.MD}
-					minHeight={200}
-				>
-					<Typography
-						variant="eyebrow"
-						color={theme.palette.text.secondary}
-						textTransform={"uppercase"}
-					>
-						Ports
-					</Typography>
-					<Stack>
-						{dedupedPorts?.map((port) => {
-							return (
-								<Typography
-									key={`${port.publicPort}/${port.privatePort}`}
-								>{`${port.hostIp}:${port.publicPort} -> ${port.privatePort}/${port.protocol}`}</Typography>
-							);
-						})}
-					</Stack>
-				</BaseBox>
-			</Grid>
-			<Grid size={isSmall ? 12 : 6}>
-				<BaseBox
-					padding={LAYOUT.MD}
-					minHeight={200}
-				>
-					<Typography
-						variant="eyebrow"
-						color={theme.palette.text.secondary}
-						textTransform={"uppercase"}
-					>
-						Volumes
-					</Typography>
-					<Stack>
-						{mounts?.map((mount) => {
-							return (
-								<Typography key={`${mount.source}/${mount.destination}`}>
-									{`${getDockerMountLabel(mount)} -> ${mount.destination}`}
-								</Typography>
-							);
-						})}
-					</Stack>
-				</BaseBox>
-			</Grid>
-		</Grid>
-	);
-};
@@ -1,84 +0,0 @@
-// Components
-import { BasePage, Tabs, Tab, DockerStateLabel } from "@/Components/design-elements";
-import { TabOverview } from "@/Pages/Docker/ContainerDetails/TabOverview";
-import { TabLogs } from "@/Pages/Docker/ContainerDetails/TabLogs";
-
-// Hooks
-import { useParams } from "react-router-dom";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useGet } from "@/Hooks/UseApi";
-import type { DockerContainerResponse } from "@/Types/Monitor";
-import { DockerContainerStatusBoxes } from "@/Pages/Docker/ContainerDetails/Components/StatBoxes";
-import type { DateRange } from "@/Types/Query";
-import { HeaderTimeRange } from "@/Components/common";
-interface DockerContainerDetailsProps {
-	open?: "overview" | "logs";
-}
-
-const TAB_MAP = {
-	overview: 0,
-	logs: 1,
-} as const;
-
-const DockerDetailsPage = ({ open = "logs" }: DockerContainerDetailsProps) => {
-	const [activeTab, setActiveTab] = useState<number>(TAB_MAP[open]);
-	const [dateRange, setDateRange] = useState<DateRange>("recent");
-	const { monitorId, containerName } = useParams<{
-		monitorId: string;
-		containerName: string;
-	}>();
-	const { t } = useTranslation();
-
-	const containerDetailsUrl = monitorId
-		? `/monitors/docker/details/${monitorId}/containers/${containerName}?dateRange=${dateRange}`
-		: null;
-
-	const { data: containerData } = useGet<DockerContainerResponse>(
-		containerDetailsUrl,
-		{},
-		{ refreshInterval: 10000, keepPreviousData: true }
-	);
-
-	const monitor = containerData?.monitor;
-	if (!monitor) return null;
-
-	const stats = containerData.stats;
-
-	const container = stats?.latest?.container;
-	if (!container) return null;
-
-	const { state, name, image } = container;
-
-	return (
-		<BasePage headerKey="docker.container">
-			<DockerStateLabel
-				state={state}
-				name={name}
-				image={image}
-			/>
-			<DockerContainerStatusBoxes container={container} />
-			<HeaderTimeRange
-				dateRange={dateRange}
-				setDateRange={setDateRange}
-			/>
-			<Tabs
-				value={activeTab}
-				onChange={(_, newValue: number) => setActiveTab(newValue)}
-			>
-				<Tab label={t("pages.docker.container.tabs.overview")} />
-				<Tab label={t("pages.docker.container.tabs.logs")} />
-			</Tabs>
-			{activeTab === 0 && <TabOverview stats={stats} />}
-			{activeTab === 1 && (
-				<TabLogs
-					monitorId={monitorId}
-					containerName={containerName}
-					enabled={monitor.dockerLogsEnabled ?? false}
-				/>
-			)}
-		</BasePage>
-	);
-};
-
-export default DockerDetailsPage;
@@ -1,123 +0,0 @@
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { DockerStateLabel, Table } from "@/Components/design-elements";
-// Hooks
-import { useTranslation } from "react-i18next";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material/styles";
-import { useNavigate } from "react-router-dom";
-
-// Types
-import type { Header } from "@/Components/design-elements/Table";
-import type { DockerContainerInfo } from "@/Types/Check";
-
-// Utils
-import { formatPercentage } from "@/Utils/FormatUtils";
-
-interface DockerContainersTableProps {
-	monitorId: string | undefined;
-	containers: DockerContainerInfo[];
-	onRowClick?: (container: DockerContainerInfo) => void;
-}
-
-export const DockerContainersTable = ({
-	monitorId,
-	containers,
-}: DockerContainersTableProps) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const navigate = useNavigate();
-
-	const getHeaders = () => {
-		// const renderSortIcon = (isActive: boolean) => (
-		// 	<Box
-		// 		width={16}
-		// 		display="inline-flex"
-		// 		justifyContent="center"
-		// 	>
-		// 		{isActive ? (
-		// 			sortOrder === "asc" ? (
-		// 				<ArrowUp size={16} />
-		// 			) : (
-		// 				<ArrowDown size={16} />
-		// 			)
-		// 		) : null}
-		// 	</Box>
-		// );
-		const headers: Header<DockerContainerInfo>[] = [
-			{
-				id: "container",
-				content: t("pages.docker.host.table.headers.container"),
-				render: (row) => {
-					return (
-						<DockerStateLabel
-							state={row.state}
-							name={row.name}
-							image={row.image}
-						/>
-					);
-				},
-			},
-			{
-				id: "status",
-				content: t("common.table.headers.status"),
-				render: (row) => {
-					return <Typography>{row.state}</Typography>;
-				},
-			},
-			{
-				id: "health",
-				content: t("common.labels.health"),
-				render: (row) => {
-					return <Typography>{row.health}</Typography>;
-				},
-			},
-			{
-				id: "cpu",
-				content: t("pages.docker.host.table.headers.cpu"),
-				render: (row) => {
-					return <Typography>{formatPercentage(row.cpuPct ?? 0)}</Typography>;
-				},
-			},
-			{
-				id: "memory",
-				content: t("pages.docker.host.table.headers.memory"),
-				render: (row) => {
-					return <Typography>{formatPercentage(row.memoryPct ?? 0)}</Typography>;
-				},
-			},
-			{
-				id: "restarts",
-				content: t("common.labels.restarts"),
-				render: (row) => {
-					return <Typography>{row.restartCount}</Typography>;
-				},
-			},
-		];
-		return headers;
-	};
-
-	let headers = getHeaders();
-
-	if (isSmall) {
-		headers = headers.filter((h) => h.id !== "histogram");
-	}
-
-	return (
-		<Box>
-			<Table
-				headers={headers}
-				data={containers}
-				onRowClick={(row) => {
-					navigate(`/docker/host/${monitorId}/container/${row.name}`);
-				}}
-				// getRowSx={(row) => ({
-				// 	backgroundColor: isRowSelected(row.id)
-				// 		? theme.palette.action.selected
-				// 		: "inherit",
-				// })}
-			/>
-		</Box>
-	);
-};
@@ -1,47 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { StatBox } from "@/Components/design-elements";
-
-// Types
-import type { DockerStats } from "@/Types/Monitor";
-
-// Hooks
-import { useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
-
-// Utils
-
-export const DockerStatusBoxes = ({ stats }: { stats: DockerStats | undefined }) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-
-	if (!stats) return null;
-
-	const { total, running, stopped, unhealthy } = stats.latest?.summary ?? {};
-
-	return (
-		<Stack
-			direction="row"
-			gap={theme.spacing(8)}
-			flexWrap={"wrap"}
-		>
-			<StatBox
-				title={t("pages.docker.host.statBoxes.containers")}
-				subtitle={String(total)}
-			/>
-			<StatBox
-				title={t("pages.docker.host.statBoxes.running")}
-				subtitle={String(running)}
-			/>
-
-			<StatBox
-				title={t("pages.docker.host.statBoxes.stopped")}
-				subtitle={String(stopped)}
-			/>
-
-			<StatBox
-				title={t("pages.docker.host.statBoxes.unhealthy")}
-				subtitle={String(unhealthy)}
-			/>
-		</Stack>
-	);
-};
@@ -1,55 +0,0 @@
-import { BasePage } from "@/Components/design-elements";
-import { HeaderMonitorControls, MonitorStatBoxes } from "@/Components/monitors";
-import { DockerStatusBoxes } from "@/Pages/Docker/HostDetails/Components/StatBoxes";
-
-// Types
-import type { DockerDetailsResponse } from "@/Types/Monitor";
-
-// Hooks
-import { useGet } from "@/Hooks/UseApi";
-import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import { useParams } from "react-router-dom";
-import { DockerContainersTable } from "@/Pages/Docker/HostDetails/Components/DockerContainersTable";
-
-const DockerHostDetailsPage = () => {
-	const { monitorId } = useParams<{ monitorId: string }>();
-	const isAdmin = useIsAdmin();
-
-	// The containers list renders the latest check only, so no date range is
-	// offered; the endpoint's dateRange param only shapes the aggregate buckets.
-	const monitorDetailsUrl = monitorId ? `/monitors/docker/details/${monitorId}` : null;
-
-	const { data: monitorDetailsData, refetch: refetchMonitor } =
-		useGet<DockerDetailsResponse>(
-			monitorDetailsUrl,
-			{},
-			{ refreshInterval: 10000, keepPreviousData: true }
-		);
-
-	const monitor = monitorDetailsData?.monitor;
-	const monitorStats = monitorDetailsData?.monitorStats ?? null;
-	const stats = monitorDetailsData?.stats;
-	const containers = stats?.latest?.containers ?? [];
-
-	return (
-		<BasePage>
-			<HeaderMonitorControls
-				path="docker"
-				monitor={monitor}
-				isAdmin={isAdmin}
-				refetch={refetchMonitor}
-			/>
-			<MonitorStatBoxes
-				monitor={monitor}
-				monitorStats={monitorStats}
-			/>
-			<DockerStatusBoxes stats={stats} />
-			<DockerContainersTable
-				monitorId={monitorId}
-				containers={containers}
-			/>
-		</BasePage>
-	);
-};
-
-export default DockerHostDetailsPage;
@@ -1,343 +0,0 @@
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import {
-	Table,
-	Pagination,
-	StatusLabel,
-	ColoredLabel,
-} from "@/Components/design-elements";
-import { SPACING } from "@/Utils/Theme/constants";
-import type { Header } from "@/Components/design-elements/Table";
-import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
-import { ArrowUp, ArrowDown } from "lucide-react";
-
-import { useTranslation } from "react-i18next";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material/styles";
-import { useNavigate } from "react-router-dom";
-import { usePost } from "@/Hooks/UseApi";
-
-import type { Monitor } from "@/Types/Monitor";
-import type { Tag } from "@/Types/Tag";
-import type { DockerContainerSummary } from "@/Types/Check";
-import { Checkbox } from "@/Components/inputs";
-
-const summaryOf = (monitor: Monitor): DockerContainerSummary | undefined => {
-	const recentChecks = monitor.recentChecks ?? [];
-	return recentChecks[recentChecks.length - 1]?.containerSummary;
-};
-
-interface DockerMonitorsTableProps {
-	monitors: Monitor[];
-	tags: Tag[];
-	refetch: () => void;
-	setSelectedMonitor: (monitor: Monitor | null) => void;
-	sortField: string;
-	setSortField: (field: string) => void;
-	sortOrder: "asc" | "desc";
-	setSortOrder: (order: "asc" | "desc") => void;
-	count: number;
-	page: number;
-	setPage: (page: number) => void;
-	rowsPerPage: number;
-	setRowsPerPage: (rowsPerPage: number) => void;
-	selectedRows?: string[];
-	onSelectionChange?: (selected: string[]) => void;
-}
-
-export const DockerMonitorsTable = ({
-	monitors,
-	tags,
-	refetch,
-	setSelectedMonitor,
-	sortField,
-	setSortField,
-	sortOrder,
-	setSortOrder,
-	count,
-	page,
-	setPage,
-	rowsPerPage,
-	setRowsPerPage,
-	selectedRows = [],
-	onSelectionChange,
-}: DockerMonitorsTableProps) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const navigate = useNavigate();
-	const { post } = usePost<Record<string, never>, Monitor>();
-
-	const selectedSet = new Set(selectedRows);
-	const isAllSelected =
-		monitors.length > 0 && monitors.every((m) => selectedSet.has(m.id));
-	const isSomeSelected = selectedRows.length > 0 && !isAllSelected;
-
-	const handleSelectAll = (checked: boolean) => {
-		onSelectionChange?.(checked ? monitors.map((m) => m.id) : []);
-	};
-
-	const handleSelectRow = (id: string, checked: boolean) => {
-		if (!onSelectionChange) return;
-		onSelectionChange(
-			checked ? [...selectedRows, id] : selectedRows.filter((rowId) => rowId !== id)
-		);
-	};
-
-	const isRowSelected = (id: string) => selectedSet.has(id);
-
-	const handlePageChange = (
-		_e: React.MouseEvent<HTMLButtonElement> | null,
-		newPage: number
-	) => {
-		setPage(newPage);
-	};
-
-	const handleRowsPerPageChange = (
-		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
-	) => {
-		const value = Number(e.target.value);
-		setPage(0);
-		setRowsPerPage(value);
-	};
-
-	const handleSort = (e: React.MouseEvent, field: string) => {
-		e.preventDefault();
-		e.stopPropagation();
-		if (sortField === field) {
-			const newOrder = sortOrder === "asc" ? "desc" : "asc";
-			setSortOrder(newOrder);
-		} else {
-			setSortField(field);
-			setSortOrder("asc");
-		}
-		refetch();
-	};
-
-	const getActions = (monitor: Monitor): ActionMenuItem[] => {
-		return [
-			{
-				id: 2,
-				label: t("pages.common.monitors.actions.details"),
-				action: () => {
-					navigate(`${monitor.id}`);
-				},
-			},
-			{
-				id: 3,
-				label: t("pages.common.monitors.actions.incidents"),
-				action: () => {
-					navigate(`/incidents?monitorId=${monitor.id}`);
-				},
-			},
-			{
-				id: 4,
-				label: t("pages.common.monitors.actions.configure"),
-				action: () => {
-					navigate(`/docker/configure/${monitor.id}`);
-				},
-			},
-			{
-				id: 6,
-				label:
-					monitor.isActive === false
-						? t("common.buttons.resume")
-						: t("common.buttons.pause"),
-				action: async () => {
-					await post(`/monitors/pause/${monitor.id}`, {});
-					refetch();
-				},
-				closeMenu: true,
-			},
-			{
-				id: 7,
-				label: (
-					<Typography color={theme.palette.error.main}>
-						{t("common.buttons.delete")}
-					</Typography>
-				),
-				action: () => {
-					setSelectedMonitor(monitor);
-				},
-				closeMenu: true,
-			},
-		];
-	};
-
-	const getHeaders = () => {
-		const renderSortIcon = (isActive: boolean) => (
-			<Box
-				width={16}
-				display="inline-flex"
-				justifyContent="center"
-			>
-				{isActive ? (
-					sortOrder === "asc" ? (
-						<ArrowUp size={16} />
-					) : (
-						<ArrowDown size={16} />
-					)
-				) : null}
-			</Box>
-		);
-		const headers: Header<Monitor>[] = [
-			{
-				id: "selection",
-				content: (
-					<Checkbox
-						aria-label={t("pages.common.monitors.actions.selectAll")}
-						indeterminate={isSomeSelected}
-						checked={isAllSelected}
-						onChange={(e) => handleSelectAll(e.target.checked)}
-					/>
-				),
-				hideMobileLabel: true,
-				render: (row) => (
-					<Checkbox
-						aria-label={t("pages.common.monitors.actions.selectMonitor", {
-							name: row.name,
-						})}
-						checked={isRowSelected(row.id)}
-						onChange={(e) => {
-							handleSelectRow(row.id, e.target.checked);
-						}}
-						onClick={(e) => e.stopPropagation()}
-					/>
-				),
-				onClick: (e) => e?.stopPropagation(),
-			},
-			{
-				id: "name",
-				align: "left",
-				mobileLabel: t("pages.docker.table.headers.host"),
-				content: (
-					<Typography
-						component="div"
-						display="inline-flex"
-						alignItems="center"
-						gap={theme.spacing(4)}
-						onClick={(e) => handleSort(e, "name")}
-						sx={{ cursor: "pointer" }}
-					>
-						{t("pages.docker.table.headers.host")}
-						{renderSortIcon(sortField === "name")}
-					</Typography>
-				),
-				render: (row) => {
-					return (
-						<Stack>
-							<Typography variant="body2">{row.name}</Typography>
-							<Typography
-								variant="caption"
-								color={theme.palette.text.secondary}
-							>
-								{row.url}
-							</Typography>
-						</Stack>
-					);
-				},
-			},
-			{
-				id: "status",
-				mobileLabel: t("common.table.headers.status"),
-				content: (
-					<Stack
-						gap={theme.spacing(4)}
-						direction={"row"}
-						justifyContent={"center"}
-						alignItems={"center"}
-						onClick={(e) => handleSort(e, "status")}
-						sx={{ cursor: "pointer" }}
-					>
-						<Box width={theme.spacing(8)} />
-						{t("common.table.headers.status")}
-						{renderSortIcon(sortField === "status")}
-					</Stack>
-				),
-				render: (row) => {
-					return <StatusLabel status={row.status} />;
-				},
-			},
-			{
-				id: "containers",
-				content: t("pages.docker.table.headers.containers"),
-				render: (row) => {
-					const summary = summaryOf(row);
-					return (
-						<Typography variant="body2">
-							{summary
-								? t("pages.docker.table.containersRunning", {
-										running: summary.running,
-										total: summary.total,
-									})
-								: "—"}
-						</Typography>
-					);
-				},
-			},
-			{
-				id: "tags",
-				content: t("common.table.headers.tags"),
-				render: (row) => {
-					if (row.tags.length === 0) return "-";
-					return (
-						<Stack
-							justifyContent={"center"}
-							direction={isSmall ? "column" : "row"}
-							gap={theme.spacing(SPACING.LG)}
-						>
-							{row.tags.map((tagId) => {
-								const fullTag = tags.find((t) => t.id === tagId);
-								if (!fullTag) return null;
-								return (
-									<ColoredLabel
-										key={fullTag.id}
-										text={fullTag.name}
-										color={fullTag.color}
-									/>
-								);
-							})}
-						</Stack>
-					);
-				},
-			},
-
-			{
-				id: "actions",
-				content: t("common.table.headers.actions"),
-				render: (row) => {
-					return <ActionsMenu items={getActions(row)} />;
-				},
-			},
-		];
-		return headers;
-	};
-
-	let headers = getHeaders();
-
-	if (isSmall) {
-		headers = headers.filter((h) => h.id !== "histogram");
-	}
-	return (
-		<Box>
-			<Table
-				headers={headers}
-				data={monitors}
-				onRowClick={(row) => {
-					navigate(`/docker/host/${row.id}`);
-				}}
-				isRowSelected={(row) => isRowSelected(row.id)}
-			/>
-			<Pagination
-				component="div"
-				count={count}
-				page={page}
-				rowsPerPage={rowsPerPage}
-				onPageChange={handlePageChange}
-				onRowsPerPageChange={handleRowsPerPageChange}
-				itemsOnPage={monitors.length}
-			/>
-		</Box>
-	);
-};
@@ -1,44 +0,0 @@
-import { MonitorListPage } from "@/Components/monitors";
-import { DockerMonitorsTable } from "@/Pages/Docker/Monitors/Components/DockerMonitorsTable";
-import { useMonitorListController } from "@/Hooks/useMonitorListController";
-
-const DockerMonitorsPage = () => {
-	const c = useMonitorListController({
-		types: ["docker"],
-		checksLimit: 25,
-		refreshInterval: 5000,
-		rowsPerPageTable: "docker",
-		rowsPerPageDefault: 10,
-	});
-
-	return (
-		<MonitorListPage
-			headerKey="docker"
-			page="docker"
-			actionLink="/docker/create"
-			controller={c}
-			bulkActions
-			showTypeFilter={false}
-		>
-			<DockerMonitorsTable
-				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}
-			/>
-		</MonitorListPage>
-	);
-};
-
-export default DockerMonitorsPage;
@@ -30,7 +30,6 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 				direction="row"
 				alignItems="center"
 				gap={theme.spacing(2)}
-				sx={{ "& svg": { color: theme.palette.text.secondary } }}
 			>
 				{icon}
 				<Typography variant="body1">{label}</Typography>
@@ -144,10 +143,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 					gap: theme.spacing(2),
 				}}
 			>
-				<Icon
-					icon={Globe}
-					color={theme.palette.text.secondary}
-				/>
+				<Icon icon={Globe} />
 				<Typography
 					variant="body1"
 					fontWeight={500}
@@ -20,7 +20,6 @@ import { useState, useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import type { Incident, IncidentsResponse, IncidentSummary } from "@/Types/Incident";
 import type { Monitor } from "@/Types/Monitor";
-import type { DateRange } from "@/Types/Query";
 import { useTheme } from "@mui/material";

 const IncidentsPage = () => {
@@ -31,7 +30,7 @@ const IncidentsPage = () => {
 	// Filter state
 	const [selectedMonitor, setSelectedMonitor] = useState(monitorId || "0");
 	const [filter, setFilter] = useState("all");
-	const [dateRange, setDateRange] = useState<DateRange>("recent");
+	const [dateRange, setDateRange] = useState("recent");
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(10);
 	const [activeIncidentsPage, setActiveIncidentsPage] = useState(0);
				`@@ -1 +1 @@`

				`* @ajhollid @mohicody @Br0wnHammer @Owaiseimdad @karenvicent @shanikauwu1`