fix:improve scroll style in docker logs section

validate invite token type on registration

.dockerignore

@@ -0,0 +1,6 @@
+**/node_modules
+**/dist
+**/.env
+**/*.env
+.git
+docker/dev/mongo/data

.github/CODEOWNERS

@@ -1 +1 @@
-*     @ajhollid @mohicody @Br0wnHammer @Owaiseimdad @karenvicent @shanikauwu1
+

.github/workflows/build-image.yml

@@ -0,0 +1,103 @@
+name: Build image
+
+on:
+  push:
+    branches: ["develop", "master"]
+    tags: ["v*"]
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # checkmate-backend-mono is a transitional alias so existing deployments
+      # keep receiving updates; drop it after one release cycle.
+      - name: Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ghcr.io/${{ github.repository_owner }}/checkmate
+            ghcr.io/${{ github.repository_owner }}/checkmate-backend-mono
+          flavor: |
+            latest=false
+          tags: |
+            type=ref,event=branch
+            type=ref,event=tag
+            type=semver,pattern={{version}}
+            type=raw,value=latest,enable=${{ startsWith(github.ref, 'refs/tags/v') }}
+
+      - name: Build and push multi-arch image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./docker/Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+  # The hosted staging/prod instances share one host and one compose file; each
+  # deploy pulls and recreates only its own service.
+  deploy-staging:
+    needs: build-and-push
+    if: github.ref == 'refs/heads/develop'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy staging.checkmate.so
+        uses: appleboy/ssh-action@v1.2.2
+        with:
+          host: ${{ secrets.DEMO_SERVER_HOST }}
+          username: ${{ secrets.DEMO_SERVER_USER }}
+          key: ${{ secrets.DEMO_SERVER_SSH_KEY }}
+          script: |
+            cd checkmate
+            git pull
+            cd docs/hosting/checkmate-so
+            docker compose pull checkmate-staging
+            docker compose up -d checkmate-staging
+            docker system prune -af
+
+  deploy-prod:
+    needs: build-and-push
+    if: github.ref == 'refs/heads/master'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy demo.checkmate.so
+        uses: appleboy/ssh-action@v1.2.2
+        with:
+          host: ${{ secrets.DEMO_SERVER_HOST }}
+          username: ${{ secrets.DEMO_SERVER_USER }}
+          key: ${{ secrets.DEMO_SERVER_SSH_KEY }}
+          script: |
+            cd checkmate
+            git pull
+            cd docs/hosting/checkmate-so
+            docker compose pull checkmate-demo
+            docker compose up -d checkmate-demo
+            docker system prune -af

.github/workflows/check-lockfile.yml

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

.github/workflows/deploy-images-on-release.yml

@@ -1,148 +0,0 @@
-name: Deploy images on release
-
-on:
-  push:
-    tags:
-      - "v*"
-  workflow_dispatch:
-jobs:
-  docker-build-and-push-client:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Extract version from tag
-        id: extract_tag
-        run: echo "version=${GITHUB_REF#refs/tags/}" >> "$GITHUB_OUTPUT"
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build Client Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate-client:${{ steps.extract_tag.outputs.version }} \
-            -f ./docker/dist/client.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push Client Docker image
-        run: |
-          docker push ghcr.io/bluewave-labs/checkmate-client:${{ steps.extract_tag.outputs.version }}
-
-  docker-build-and-push-server:
-    needs: docker-build-and-push-client
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Extract version
-        id: extract_tag
-        run: echo "version=${GITHUB_REF#refs/tags/}" >> "$GITHUB_OUTPUT"
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build Server Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate-backend:${{ steps.extract_tag.outputs.version }} \
-            -f ./docker/dist/server.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push Server Docker image
-        run: |
-          docker push ghcr.io/bluewave-labs/checkmate-backend:${{ steps.extract_tag.outputs.version }}
-
-      - name: Build Mongo Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate-mongo:${{ steps.extract_tag.outputs.version }} \
-            -f ./docker/dist/mongoDB.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push MongoDB Docker image
-        run: |
-          docker push ghcr.io/bluewave-labs/checkmate-mongo:${{ steps.extract_tag.outputs.version }}
-
-  docker-build-and-push-server-mono-multiarch:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Extract version
-        id: extract_tag
-        run: echo "version=${GITHUB_REF#refs/tags/}" >> "$GITHUB_OUTPUT"
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build and push multi-arch Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./docker/dist-arm/server.Dockerfile
-          push: true
-          no-cache: true
-          tags: |
-            ghcr.io/bluewave-labs/checkmate-backend-mono-multiarch:${{ steps.extract_tag.outputs.version }}
-          platforms: linux/amd64,linux/arm64
-          labels: |
-            org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate
-          build-args: |
-            VITE_APP_VERSION=${{ steps.extract_tag.outputs.version }}
-
-  docker-build-and-push-server-mono:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Extract version
-        id: extract_tag
-        run: echo "version=${GITHUB_REF#refs/tags/}" >> "$GITHUB_OUTPUT"
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build Server Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate-backend-mono:${{ steps.extract_tag.outputs.version }} \
-            -f ./docker/dist-mono/server.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            --build-arg VITE_APP_VERSION=${{ steps.extract_tag.outputs.version }} \
-            .
-
-      - name: Push Server Docker image
-        run: docker push ghcr.io/bluewave-labs/checkmate-backend-mono:${{ steps.extract_tag.outputs.version }}

.github/workflows/deploy-images.yml

@@ -1,143 +0,0 @@
-name: Deploy images
-
-on:
-  push:
-    branches: ["master"]
-  workflow_dispatch:
-jobs:
-  docker-build-and-push-client:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Get version
-        id: vars
-        run: echo "VERSION=$(git describe --tags --abbrev=0)" >> $GITHUB_ENV
-      - name: Build Client Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate-client:latest \
-            -f ./docker/dist/client.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            --build-arg VITE_APP_VERSION=${{ env.VERSION }} \
-            .
-
-      - name: Push Client Docker image
-        run: |
-          docker push ghcr.io/bluewave-labs/checkmate-client:latest
-
-  docker-build-and-push-server:
-    needs: docker-build-and-push-client
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build Server Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate-backend:latest \
-            -f ./docker/dist/server.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push Server Docker image
-        run: |
-          docker push ghcr.io/bluewave-labs/checkmate-backend:latest
-
-      - name: Build Mongo Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate-mongo:latest \
-            -f ./docker/dist/mongoDB.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push MongoDB Docker image
-        run: |
-          docker push ghcr.io/bluewave-labs/checkmate-mongo:latest
-
-  docker-build-and-push-server-mono-multiarch:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Get version
-        id: vars
-        run: echo "VERSION=$(git describe --tags --abbrev=0)" >> $GITHUB_ENV
-
-      - name: Build and push multi-arch Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./docker/dist-arm/server.Dockerfile
-          push: true
-          no-cache: true
-          tags: |
-            ghcr.io/bluewave-labs/checkmate-backend-mono-multiarch:latest
-          platforms: linux/amd64,linux/arm64
-          labels: |
-            org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate
-          build-args: |
-            VITE_APP_VERSION=${{ env.VERSION }}
-
-  docker-build-and-push-server-mono:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Get version
-        id: vars
-        run: echo "VERSION=$(git describe --tags --abbrev=0)" >> $GITHUB_ENV
-
-      - name: Build Server Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate-backend-mono:latest \
-            -f ./docker/dist-mono/server.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            --build-arg VITE_APP_VERSION=${{ env.VERSION }} \
-            .
-
-      - name: Push Server Docker image
-        run: docker push ghcr.io/bluewave-labs/checkmate-backend-mono:latest

.github/workflows/poeditor-sync.yml

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

.github/workflows/production-deploy.yml

@@ -1,91 +0,0 @@
-name: Demo deploy
-
-on:
-  push:
-    branches: [ "demo" ]
-  workflow_dispatch:
-jobs:
-  docker-build-and-push-client:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Get version
-        id: vars
-        run: echo "VERSION=$(git describe --tags --abbrev=0)" >> $GITHUB_ENV
-      - name: Build Client Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:frontend-demo \
-            -f ./docker/prod/client.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            --build-arg VITE_APP_VERSION=${{ env.VERSION }} \
-            .
-
-      - name: Push Client Docker image
-        run: docker push ghcr.io/bluewave-labs/checkmate:frontend-demo
-
-  docker-build-and-push-server:
-    needs: docker-build-and-push-client
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build Server Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:backend-demo \
-            -f ./docker/prod/server.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push Server Docker image
-        run: docker push ghcr.io/bluewave-labs/checkmate:backend-demo
-
-      - name: Build Mongo Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:mongo-demo \
-            -f ./docker/prod/mongoDB.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push MongoDB Docker image
-        run: docker push ghcr.io/bluewave-labs/checkmate:mongo-demo
-
-  deploy-to-demo:
-    needs: docker-build-and-push-server
-    runs-on: ubuntu-latest
-    steps:
-      - name: SSH into server and restart container using Docker Compose
-        uses: appleboy/ssh-action@v1.2.2
-        with:
-          host: ${{ secrets.DEMO_SERVER_HOST }}
-          username: ${{ secrets.DEMO_SERVER_USER }}
-          key: ${{ secrets.DEMO_SERVER_SSH_KEY }}
-          script: |
-            cd checkmate
-            git pull
-            cd docker/unified
-            docker compose down
-            docker compose pull
-            docker compose up -d
-            docker system prune -af

.github/workflows/staging-deploy.yml

@@ -1,91 +0,0 @@
-name: Staging deploy
-
-on:
-  push:
-    branches: [ "develop" ]
-
-jobs:
-  docker-build-and-push-client:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Get version
-        id: vars
-        run: echo "VERSION=$(git describe --tags --abbrev=0)" >> $GITHUB_ENV
-      - name: Build Client Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:frontend-staging \
-            -f ./docker/staging/client.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            --build-arg VITE_APP_VERSION=${{ env.VERSION }} \
-            .
-
-      - name: Push Client Docker image
-        run: docker push ghcr.io/bluewave-labs/checkmate:frontend-staging
-
-  docker-build-and-push-server:
-    needs: docker-build-and-push-client
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build Server Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:backend-staging \
-            -f ./docker/staging/server.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push Server Docker image
-        run: docker push ghcr.io/bluewave-labs/checkmate:backend-staging
-
-      - name: Build Mongo Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:mongo-staging \
-            -f ./docker/staging/mongoDB.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push MongoDB Docker image
-        run: docker push ghcr.io/bluewave-labs/checkmate:mongo-staging
-
-  deploy-to-staging:
-    needs: docker-build-and-push-server
-    runs-on: ubuntu-latest
-    steps:
-      - name: SSH into server and restart container using Docker Compose
-        uses: appleboy/ssh-action@v1.2.2
-        with:
-          host: ${{ secrets.DEMO_SERVER_HOST }}
-          username: ${{ secrets.DEMO_SERVER_USER }}
-          key: ${{ secrets.DEMO_SERVER_SSH_KEY }}
-          script: |
-            cd checkmate
-            git pull
-            cd docker/unified
-            docker compose down
-            docker compose pull
-            docker compose up -d
-            docker system prune -af

.github/workflows/upload-poeditor.yml

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

CLAUDE.md

@@ -35,9 +35,9 @@ npm run format           # Prettier formatting
 
 ### Docker Development
 ```bash
-cd docker/dev
-./build_images.sh
-docker run -d -p 27017:27017 -v uptime_mongo_data:/data/db --name uptime_database_mongo mongo:6.0
+docker build -f docker/Dockerfile -t checkmate .          # build the mono image (server + built client)
+docker compose -f docker/dev/docker-compose.yaml up       # local full stack (builds image, runs mongo + worker)
+docker run -d -p 27017:27017 -v uptime_mongo_data:/data/db --name uptime_database_mongo mongo:8.0   # just a dev database
 ```
 
 ## Environment Setup
@@ -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 (translations via PoEditor)
+- **i18n**: i18next + react-i18next (non-English locales are machine translated, not managed through a translation service)
 
 ---
 

CONTRIBUTING.md

@@ -88,34 +88,10 @@ cd Checkmate
 
 #### Step 2: Set Up Docker Containers (MongoDB)
 
-Navigate to the Docker dev directory:
-
-```bash
-cd docker/dev
-```
-
-Build the Docker images:
-
-Linux:
-```bash
-./build_images.sh
-```
-
-Windows:
-```bash
-./build_images.bat
-```
-
 Run MongoDB container:
 
 ```bash
-docker run -d -p 27017:27017 -v uptime_mongo_data:/data/db --name uptime_database_mongo mongo:6.0
-```
-
-Navigate back to the root directory:
-
-```bash
-cd ../..
+docker run -d -p 27017:27017 -v uptime_mongo_data:/data/db --name uptime_database_mongo mongo:8.0
 ```
 
 #### Step 3: Set Up the Backend (Server)
@@ -256,6 +232,35 @@ docker rm uptime_database_mongo
 
 Start with [good first issues](https://github.com/bluewave-labs/checkmate/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22).
 
+### Improve the documentation?
+
+Documentation contributions are very welcome — fixing a typo, clarifying a step, or adding a missing example is a valuable PR.
+
+- Small edits (typos, wording, formatting): open a PR directly against `develop`.
+- Larger changes (restructuring a section, adding a new guide): open an issue first so we can align on scope, then a PR.
+- Screenshots are helpful when documenting UI behaviour.
+- README translations live in `docs/translations/`. If you're adding a new language, please also add a flag + link to the language bar in the root `README.md` and every existing translated README so they stay in sync.
+
+### Help with translations?
+
+The application uses `i18next` with one JSON file per language under `client/src/locales/` (`en.json` is the source of truth). English source strings are the definitive copy; other languages are generated as one-time machine translations that anyone is welcome to refine.
+
+**To improve an existing language:**
+
+1. Edit the relevant `client/src/locales/<code>.json` file directly.
+2. Keep the JSON key structure identical to `en.json` — only translate the string values.
+3. Open a PR against `develop`. No language-selector code changes are needed.
+
+**To add a new language:**
+
+1. Add `client/src/locales/<code>.json` with the same key structure as `en.json`, translated. If you can't translate every key, leave unfamiliar strings in English rather than removing keys — i18next falls back to the key path when a value is missing.
+2. Add the display name to `languageNames` in `client/src/Components/inputs/LanguageSelector.tsx` (e.g. `it: "Italiano"`). The selector picks up any language present in `resources` automatically.
+3. Open a PR against `develop`.
+
+If translating a whole file is more than you want to take on, open an issue asking us to add the language and we'll generate an initial machine-translated file that you (or others) can refine over time.
+
+**Note:** an older workflow that synced translations with PoEditor is still in the repo but no longer authoritative. Please treat the `.json` files in `client/src/locales/` as the source of truth.
+
 ### Submit a pull request?
 
 Follow the [pull request checklist](#pull-request-checklist). Your PR should:

README.md

@@ -9,6 +9,7 @@
   🇪🇸 <a href="docs/translations/README.es.md">Español</a> |
   🇫🇮 <a href="docs/translations/README.fi.md">Suomi</a> |
   🇫🇷 <a href="docs/translations/README.fr.md">Français</a> |
+  🇮🇹 <a href="docs/translations/README.it.md">Italiano</a> |
   🇯🇵 <a href="docs/translations/README.ja.md">日本語</a> |
   🇧🇷 <a href="docs/translations/README.pt-BR.md">Português (Brasil)</a> |
   🇷🇺 <a href="docs/translations/README.ru.md">Русский</a> |
@@ -31,12 +32,12 @@
 
 <h1 align="center"><a href="https://bluewavelabs.ca" target="_blank">Checkmate</a></h1>
 
-<p align="center"><strong>An open source uptime and infrastructure monitoring application</strong></p>
+<p align="center"><strong>An open source uptime and infrastructure monitoring application</strong>
 
 [![Run on PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=checkmate)
 
-<img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
-
+<img width="1461" height="853" alt="image" src="https://github.com/user-attachments/assets/d5ee1a4e-9db9-47cc-ad47-e1ba88a9d796" />
+</p>
 <br>
 
 
@@ -79,14 +80,165 @@ Usage instructions can be found [here](https://checkmate.so/docs).
 <a id="installation"></a>
 ## Installation
 
-See installation instructions in [Checkmate documentation portal](https://checkmate.so/docs). 
+The quickest way to run Checkmate is the reference Docker Compose file. It starts two services: the all-in-one Checkmate application image (`ghcr.io/bluewave-labs/checkmate`) and a separate MongoDB service.
 
-Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) (South Africa), [Cloudzy](https://cloudzy.com/marketplace/checkmate) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions.
+> **What “all-in-one” means:** the Checkmate application is packaged in a single image; MongoDB is not embedded in that image and remains required. The reference Compose file starts MongoDB for you. For custom deployments, configure `DB_CONNECTION_STRING` to use an external MongoDB instance.
+
+```bash
+curl -O https://raw.githubusercontent.com/bluewave-labs/checkmate/master/docker/docker-compose.yaml
+JWT_SECRET="$(openssl rand -hex 32)" docker compose up -d
+```
+
+Then open http://localhost:52345. If the app is reached at another origin (domain or LAN IP), set `CLIENT_HOST` accordingly. To build the image yourself, run `docker build -f docker/Dockerfile -t checkmate .` from a checkout. For TLS, put any reverse proxy (Caddy, Traefik, nginx) in front of port 52345.
+
+There are also 1-click installation options like [Repocloud](https://repocloud.io/details/Checkmate),
+[Pikapods](https://www.pikapods.com/), [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) or [Cloudzy](https://cloudzy.com/marketplace/checkmate). Note that the Helm chart has not yet been migrated to the all-in-one image: it still deploys the legacy `checkmate-client`, `checkmate-backend` and `checkmate-mongo` images, pinned at v3.8.1.
+
+
+### Configuration
+
+The image is configured entirely through environment variables on the server container:
+
+| Variable | Required | Description |
+|---|---|---|
+| `DB_CONNECTION_STRING` | Yes | MongoDB connection string, e.g. `mongodb://mongodb:27017/uptime_db` |
+| `JWT_SECRET` | Yes | Secret used to sign auth tokens; generate one with `openssl rand -hex 32` |
+| `CLIENT_HOST` | Yes | The URL users reach the app at, e.g. `https://checkmate.example.com`; used for CORS and for links in notifications and emails |
+| `ENCRYPTION_KEY` | No | Encrypts stored Docker TLS client keys at rest; generate one with `openssl rand -base64 32`. Comma-separated list: the first key encrypts, every key decrypts. Must be identical on the API and every worker. To rotate without downtime, deploy `OLD_KEY,NEW_KEY` everywhere, then `NEW_KEY,OLD_KEY` everywhere, wait for the worker to re-encrypt every row, then drop `OLD_KEY`. |
+| `PORT` | No | Port the API and web client are served on (default `52345`) |
+| `HEALTH_PORT` | No | Port for the `/livez`, `/readyz` and `/metrics` endpoints, served by any process that runs the job worker (default `52346`) |
+| `NODE_ENV` | No | `development`, `production` or `test` (default `development`). `development` disables the general API rate limiter; set `production` on real deployments |
+| `LOG_LEVEL` | No | Server log level: `error`, `warn`, `info`, or `debug` (default `debug`) |
+| `TOKEN_TTL` | No | Lifetime of issued auth tokens, e.g. `12h` or `7d` (default `99d`) |
+| `QUEUE_MODE` | No | `primary` (default) runs the API, the web client and the job scheduler; `worker` runs a job-processing worker only, with no API |
+| `QUEUE_PRIMARY_PROCESSES` | No | `true` (default) or `false`. Whether a `primary` node also processes monitoring jobs itself; set `false` when dedicated `worker` nodes handle all checks. Ignored in `worker` mode |
+| `STATUS_PAGE_THEMES_ENABLED` | No | `true` (default) or `false`. When `false`, status pages ignore theme settings and always render the default theme |
+
+The web client needs no configuration by default: it calls the API on the same origin it was served from (`/api/v1`). For setups where the defaults don't apply — for example, the API is reached through a different origin than the page — the server renders overrides into the client at runtime via these optional variables:
+
+| Variable | Description |
+|---|---|
+| `CLIENT_CONFIG_API_BASE_URL` | Full base URL the client calls the API at, e.g. `https://api.example.com/api/v1`; defaults to same-origin `/api/v1` |
+| `CLIENT_CONFIG_CLIENT_HOST` | Origin used when the client builds absolute links (invites, status pages); defaults to the browser's current origin |
+| `CLIENT_CONFIG_LOG_LEVEL` | Browser console log level: `error`, `warn`, `info`, or `debug` (default `error`) |
+
+> **Upgrading from an older image?** The `UPTIME_APP_*` variables (`UPTIME_APP_API_BASE_URL`, `UPTIME_APP_CLIENT_HOST`, `UPTIME_APP_LOG_LEVEL`) are no longer read. In most setups no replacement is needed — the same-origin defaults cover them; if you pointed the client at a different origin, use the `CLIENT_CONFIG_*` equivalents above. The `checkmate-client`, `checkmate-backend`, `checkmate-mongo`, and `checkmate-backend-mono-multiarch` images are no longer updated — switch to `ghcr.io/bluewave-labs/checkmate`, keeping your existing MongoDB service and data volume.
+
+See full installation instructions in the [Checkmate documentation portal](https://checkmate.so/docs). 
+
+Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md) (legacy images, pinned at v3.8.1), [Sive Host](https://sive.host) (South Africa), [Cloudzy](https://cloudzy.com/marketplace/checkmate) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions.
 
 ### Using a Custom CA
 
 If you need to monitor internal HTTPS endpoints with certificates from private Certificate Authorities (like Smallstep), see our [Custom CA Trust Guide](./docs/custom-ca-trust.md) for Docker configuration options.
 
+### Docker monitors
+
+A Docker monitor connects to a Docker daemon and reports on every container it runs. The daemon's ping response decides whether the monitor is up or down and its latency is the response time. Each check also records every container's state, health, CPU and memory usage, restart count, published ports and mounts. Enabling **Collect container logs** additionally stores the latest 200 log lines per container on every check; logs are kept for 7 days.
+
+The **Docker host** field accepts two forms:
+
+| Host | Example | Notes |
+|---|---|---|
+| Local socket | `unix:///var/run/docker.sock` | Also accepts a bare absolute path such as `/var/run/docker.sock`. Use this for the daemon on the same machine Checkmate runs on. |
+| Remote daemon | `tcp://docker.example.com:2376` | Always uses mutual TLS; the port defaults to `2376`. Unencrypted daemons on `2375` are not supported. |
+
+**Monitoring the local socket.** The reference Compose file does not mount the socket, so add it and grant the container the host's `docker` group. The image runs as an unprivileged user and cannot read the socket otherwise. Find the group id with `stat -c %g /var/run/docker.sock`, then:
+
+```yaml
+services:
+  checkmate:
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    group_add:
+      - "989"   # the gid printed by stat
+```
+
+**Monitoring a remote daemon.** Set the host to `tcp://host:port` and fill in the **TLS credentials** section of the monitor form with the same PEM files you would pass to `docker --tlsverify`:
+
+- **CA certificate**: the CA that signed the daemon's server certificate. Required unless **Ignore TLS/SSL errors** is on, which skips verifying the daemon's identity.
+- **Client certificate**: the certificate the daemon uses to authenticate Checkmate.
+- **Client key**: the matching private key, unencrypted (no passphrase). Checkmate checks that it matches the certificate, encrypts it with `ENCRYPTION_KEY`, and never shows it again. Leave the field blank when editing to keep the stored key.
+
+TLS Docker monitors require `ENCRYPTION_KEY` to be set on the server (see [Configuration](#configuration)). Saving one without it fails with an error telling you so. If the key is ever removed or rotated incorrectly, affected checks fail with a decryption error until it is restored.
+
+If the daemon's certificate is signed by a private CA that you also want the rest of Checkmate to trust, see the [Custom CA Trust Guide](./docs/custom-ca-trust.md); for Docker monitors alone, the **CA certificate** field is enough.
+
+### Securing the Docker daemon with TLS
+
+The Docker daemon does not enable TLS by default. Follow these steps on the Docker host to generate a CA, a server certificate, and a client certificate for Checkmate. This is the procedure from [Docker's own guide](https://docs.docker.com/engine/security/protect-access/), condensed. Replace `docker.example.com` and `203.0.113.10` with your daemon's DNS name and IP.
+
+**1. Create a CA.** The CA key gets a passphrase; keep it offline once the certificates are issued.
+
+```bash
+openssl genrsa -aes256 -out ca-key.pem 4096
+openssl req -new -x509 -days 365 -key ca-key.pem -sha256 -subj "/CN=docker-ca" -out ca.pem
+```
+
+**2. Create the server certificate.** The subject alternative names must cover every name or address Checkmate will use to reach the daemon.
+
+```bash
+openssl genrsa -out server-key.pem 4096
+openssl req -subj "/CN=docker.example.com" -sha256 -new -key server-key.pem -out server.csr
+cat > server-ext.cnf <<EOF
+subjectAltName = DNS:docker.example.com,IP:203.0.113.10
+extendedKeyUsage = serverAuth
+EOF
+openssl x509 -req -days 365 -sha256 -in server.csr -CA ca.pem -CAkey ca-key.pem -CAcreateserial \
+  -out server-cert.pem -extfile server-ext.cnf
+```
+
+**3. Create the client certificate for Checkmate.** Do not add a passphrase to this key; Checkmate cannot use encrypted private keys.
+
+```bash
+openssl genrsa -out key.pem 4096
+openssl req -subj "/CN=checkmate" -new -key key.pem -out client.csr
+echo "extendedKeyUsage = clientAuth" > client-ext.cnf
+openssl x509 -req -days 365 -sha256 -in client.csr -CA ca.pem -CAkey ca-key.pem -CAcreateserial \
+  -out cert.pem -extfile client-ext.cnf
+rm client.csr server.csr server-ext.cnf client-ext.cnf
+chmod 0400 ca-key.pem key.pem server-key.pem
+chmod 0444 ca.pem server-cert.pem cert.pem
+```
+
+**4. Point the daemon at the certificates.** Move `ca.pem`, `server-cert.pem` and `server-key.pem` to `/etc/docker/certs/` and configure `/etc/docker/daemon.json`:
+
+```json
+{
+  "hosts": ["unix:///var/run/docker.sock", "tcp://0.0.0.0:2376"],
+  "tls": true,
+  "tlsverify": true,
+  "tlscacert": "/etc/docker/certs/ca.pem",
+  "tlscert": "/etc/docker/certs/server-cert.pem",
+  "tlskey": "/etc/docker/certs/server-key.pem"
+}
+```
+
+On distributions where the systemd unit already passes `-H fd://` (Debian, Ubuntu and derivatives), the daemon refuses to start with `hosts` set in both places. Remove the flag from the unit with an override, then restart:
+
+```bash
+sudo systemctl edit docker.service
+```
+
+```ini
+[Service]
+ExecStart=
+ExecStart=/usr/bin/dockerd
+```
+
+```bash
+sudo systemctl daemon-reload && sudo systemctl restart docker
+```
+
+Open port `2376` on the host firewall only to the machine running Checkmate.
+
+**5. Verify from the Checkmate host**, then paste `ca.pem`, `cert.pem` and `key.pem` into the monitor form:
+
+```bash
+docker --tlsverify --tlscacert=ca.pem --tlscert=cert.pem --tlskey=key.pem \
+  -H=docker.example.com:2376 version
+```
+
 For more documentation, see the [docs directory](./docs/).
 
 <a id="performance"></a>
@@ -96,7 +248,7 @@ Thanks to extensive optimizations, Checkmate operates with an exceptionally smal
 
 ![image](https://github.com/user-attachments/assets/37e04a75-d83a-488f-b25c-025511b492c9)
 
-You can see the memory footprint of MongoDB and Redis on the same server (398Mb and 15Mb) for the same amount of servers:
+You can see the memory footprint of MongoDB on the same server (398Mb) for the same amount of servers:
 
 ![image](https://github.com/user-attachments/assets/3b469e85-e675-4040-a162-3f24c1afc751)
 
@@ -114,16 +266,16 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
 ## Features
 
 - Completely open source, deployable on your servers or home devices (e.g Raspberry Pi 4 or 5)
-- Several monitoring options: Uptime, Docker, Ping, SSL, Port, Game server
+- Several monitoring options: HTTP (with SSL certificate expiry), Ping, Port, DNS, Docker, gRPC, WebSocket, Game server
 - Page speed monitoring
 - Infrastructure monitoring (memory, disk usage, CPU performance, network etc) - requires [Capture](https://github.com/bluewave-labs/capture) agent
   - Selective disk monitoring with mountpoint selection
 - Incidents at a glance
-- Status pages with 4 beautiful themes
-- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
+- Status pages with 5 beautiful themes
+- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Rocket.Chat, Microsoft Teams, Telegram, Pushover, ntfy, SignalGrid, Twilio (SMS) notifications
 - Scheduled maintenance
 - JSON query monitoring
-- Multi-language support for Arabic, Chinese (Simplified), Chinese (Traditional, Taiwan), Czech, English, Finnish, French, German, Japanese, Portuguese (Brazil), Russian, Spanish, Thai, Turkish, Ukrainian, and Vietnamese
+- Multi-language support for Arabic, Catalan, Chinese (Simplified), Chinese (Traditional, Taiwan), Czech, English, Finnish, French, German, Italian, Japanese, Polish, Portuguese (Brazil), Russian, Spanish, Thai, Turkish, Ukrainian, and Vietnamese
 
 
 ## Monitor Lifecycle
@@ -174,9 +326,9 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
 <a id="contributing"></a>
 ## Contributing
 
-We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer), [Mert](https://github.com/mertssmnoglu) and [Karen](https://github.com/karenvicent) helping individuals and businesses monitor their infra and servers.
+We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer), [Malena](https://github.com/malenacaroline) and [Mert](https://github.com/mertssmnoglu) helping individuals and businesses monitor their infra and servers.
 
-We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned 7000+ stars and attracted 90+ contributors from around the globe.
+We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned almost 11K stars and attracted 150+ contributors from around the globe.
 
 Our repo is starred by employees from **Google, Microsoft, Intel, Cisco, Tencent, Electronic Arts, ByteDance, JP Morgan Chase, Deloitte, Accenture, Foxconn, Broadcom, China Telecom, Barclays, Capgemini, Wipro, Cloudflare, Dassault Systèmes and NEC**, so don’t hold back — jump in, contribute and learn with us!
 

charts/helm/checkmate/Chart.yaml

@@ -3,4 +3,8 @@ 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)

client/.env.production

@@ -1,4 +1,6 @@
-VITE_APP_API_BASE_URL=UPTIME_APP_API_BASE_URL
-VITE_APP_API_V2_BASE_URL=UPTIME_APP_API_V2_BASE_URL
-VITE_APP_CLIENT_HOST=UPTIME_APP_CLIENT_HOST
-VITE_APP_LOG_LEVEL=UPTIME_APP_LOG_LEVEL
+# Production builds use same-origin defaults: API at /api/v1, client host from
+# window.location.origin. The empty values below override any local .env so a
+# production build never bakes in a developer's localhost URLs.
+VITE_APP_API_BASE_URL=
+VITE_APP_CLIENT_HOST=
+VITE_APP_LOG_LEVEL=

client/.gitignore

@@ -28,5 +28,4 @@ dist-ssr
 
 # Scripts
 *.sh
-!env.sh
 .env.development

client/env.sh

@@ -1,8 +0,0 @@
-#!/bin/sh
-for i in $(env | grep UPTIME_APP_)
-do
-    key=$(echo $i | cut -d '=' -f 1)
-    value=$(echo $i | cut -d '=' -f 2-)
-    echo $key=$value
-    find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i "s|${key}|${value}|g" '{}' +
-done

client/index.html

@@ -12,6 +12,7 @@
 		/>
 
 		<title>Checkmate</title>
+		<script src="/config.js"></script>
 	</head>
 
 	<body>

client/package-lock.json

@@ -1,16 +1,17 @@
 {
 	"name": "client",
-	"version": "3.9.2",
+	"version": "3.12.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "client",
-			"version": "3.9.2",
+			"version": "3.12.0",
 			"dependencies": {
 				"@csstools/css-tokenizer": "^3.0.4",
 				"@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",
@@ -953,6 +954,15 @@
 				"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"

client/package.json

@@ -1,9 +1,10 @@
 {
 	"name": "client",
 	"private": true,
-	"version": "3.9.2",
+	"version": "3.12.0",
 	"type": "module",
 	"scripts": {
+		"lockfile": "docker run --rm -v \"$PWD\":/w -w /w $(grep -m1 -o 'node:[^ ]*' ../docker/Dockerfile) npm install --package-lock-only",
 		"dev": "vite",
 		"build": "tsc -b && vite build",
 		"build-dev": "tsc -b && vite build --mode development",
@@ -11,7 +12,8 @@
 		"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 ."
+		"format-check": "prettier --check .",
+		"compile": "tsc -b"
 	},
 	"lint-staged": {
 		"**/*": "prettier --write --ignore-unknown"
@@ -20,6 +22,7 @@
 		"@csstools/css-tokenizer": "^3.0.4",
 		"@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",

client/public/config.js

@@ -0,0 +1,4 @@
+// Fallback so /config.js always resolves (e.g. under the Vite dev server). In
+// the Docker image the server shadows this path and renders the real config
+// from its CLIENT_CONFIG_* environment variables.
+window.__CHECKMATE_CONFIG__ = {};

client/src/Components/actions-menu/index.tsx

@@ -3,6 +3,7 @@ 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;
@@ -12,6 +13,7 @@ export type ActionMenuItem = {
 };
 
 export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => {
+	const theme = useTheme();
 	const [anchorEl, setAnchorEl] = useState<null | any>(null);
 	const open = Boolean(anchorEl);
 
@@ -27,7 +29,14 @@ export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => {
 
 	return (
 		<div>
-			<IconButton onClick={handleClick}>
+			<IconButton
+				onClick={handleClick}
+				sx={{
+					"&:hover": {
+						backgroundColor: theme.palette.action.controlHover,
+					},
+				}}
+			>
 				<Settings
 					size={20}
 					strokeWidth={1.5}

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

@@ -1,7 +1,7 @@
 import Stack from "@mui/material/Stack";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
 import type { CheckSnapshot } from "@/Types/Check";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
@@ -58,7 +58,7 @@ export const HeatmapResponseTimeTooltip = ({
 					</Typography>
 					<Typography>
 						{t("common.labels.responseTime")}:{" "}
-						{check?.originalResponseTime?.toFixed() ?? "N/A"} ms
+						{check?.responseTime ? formatMs(check.responseTime) : "N/A"}
 					</Typography>
 					<Typography textTransform={"capitalize"}>
 						Status:{" "}

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

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

client/src/Components/common/controls/HeaderTimeRange.tsx

@@ -6,12 +6,13 @@ 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: string;
-	setDateRange: (dateRange: string) => void;
+	dateRange: DateRange;
+	setDateRange: (dateRange: DateRange) => void;
 }
 
 export const HeaderTimeRange = ({
@@ -25,7 +26,7 @@ export const HeaderTimeRange = ({
 	const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
 	const handleChange = (
 		_event: React.MouseEvent<HTMLElement>,
-		newValue: string | null
+		newValue: DateRange | null
 	) => {
 		if (newValue !== null) {
 			setDateRange(newValue);

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

@@ -1,10 +1,12 @@
 import Box, { type BoxProps } from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
+import { forwardRef } from "react";
 
-export const BaseBox = ({ sx, ...rest }: BoxProps) => {
+export const BaseBox = forwardRef<HTMLDivElement, BoxProps>(({ sx, ...rest }, ref) => {
 	const theme = useTheme();
 	return (
 		<Box
+			ref={ref}
 			{...rest}
 			sx={{
 				backgroundColor: theme.palette.background.paper,
@@ -16,4 +18,6 @@ export const BaseBox = ({ sx, ...rest }: BoxProps) => {
 			}}
 		/>
 	);
-};
+});
+
+BaseBox.displayName = "BaseBox";

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

@@ -10,39 +10,66 @@ 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;
 }>;
 
 export const BaseChart = ({
 	children,
 	title,
+	rightTitle,
 	width = "100%",
 	maxWidth = "100%",
+	flexBasis = "0%",
 	padding,
+	onClick,
 }: BaseChartProps) => {
 	const theme = useTheme();
 	return (
 		<BaseBox
+			onClick={onClick}
 			sx={{
 				padding: padding ?? theme.spacing(LAYOUT.MD),
 				display: "flex",
 				flex: 1,
+				flexBasis,
 				width: width,
 				maxWidth: maxWidth,
+				...(onClick && {
+					cursor: "pointer",
+					"& .recharts-wrapper": { cursor: "pointer !important" },
+				}),
 			}}
 		>
 			<Stack
 				gap={theme.spacing(LAYOUT.MD)}
 				flex={1}
 			>
-				<Typography
-					variant="eyebrow"
-					color="text.secondary"
+				<Stack
+					direction="row"
+					justifyContent={"space-between"}
 				>
-					{title}
-				</Typography>
+					<Typography
+						variant="eyebrow"
+						color="text.secondary"
+						sx={{ overflowWrap: "anywhere" }}
+					>
+						{title}
+					</Typography>
+					{rightTitle && (
+						<Typography
+							variant="eyebrow"
+							color="text.secondary"
+							sx={{ overflowWrap: "anywhere" }}
+						>
+							{rightTitle}
+						</Typography>
+					)}
+				</Stack>
 				<Box flex={1}>{children}</Box>
 			</Stack>
 		</BaseBox>

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

@@ -83,12 +83,17 @@ 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);
-	const hasSubPage = isActionPage || isDetailsPage;
+	// page/section/:id routes such as docker/host/:monitorId
+	const isSectionDetailsPage = Boolean(
+		secondSegment && !isId(secondSegment) && thirdSegment && isId(thirdSegment)
+	);
+	const hasSubPage = isActionPage || isDetailsPage || isSectionDetailsPage;
 
 	const getSubPageLabel = (): string => {
-		if (isActionPage) {
+		if (isActionPage || isSectionDetailsPage) {
 			return secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1);
 		}
 		return t("common.breadcrumbs.details");

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

@@ -1,18 +1,28 @@
 import type { CSSProperties } from "react";
 
+export const DotSizes = ["xs", "sm", "md", "lg"] as const;
+export type DotSize = (typeof DotSizes)[number];
+
+const DOT_SIZE_PX: Record<DotSize, string> = {
+	xs: "2px",
+	sm: "4px",
+	md: "8px",
+	lg: "12px",
+};
+
 interface DotProps {
 	color?: string;
-	size?: string;
+	size?: DotSize;
 	style?: CSSProperties;
 }
 
-export const Dot = ({ color = "gray", size = "4px", style }: DotProps) => {
+export const Dot = ({ color = "gray", size = "sm", style }: DotProps) => {
 	return (
 		<span
 			style={{
 				content: '""',
-				width: size,
-				height: size,
+				width: DOT_SIZE_PX[size],
+				height: DOT_SIZE_PX[size],
 				borderRadius: "50%",
 				backgroundColor: color,
 				opacity: 0.8,

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

@@ -39,9 +39,9 @@ export const Gauge = forwardRef<HTMLDivElement, GaugeProps>(function Gauge(
 		() => ({
 			circumference: 2 * Math.PI * radius,
 			totalSize: radius * 2 + strokeWidth * 2,
-			strokeLength: (progress / 100) * (2 * Math.PI * radius),
+			strokeLength: (progressWithinRange / 100) * (2 * Math.PI * radius),
 		}),
-		[radius, strokeWidth, progress]
+		[radius, strokeWidth, progressWithinRange]
 	);
 
 	const [offset, setOffset] = useState(circumference);
@@ -52,7 +52,7 @@ export const Gauge = forwardRef<HTMLDivElement, GaugeProps>(function Gauge(
 		}, 100);
 
 		return () => clearTimeout(timer);
-	}, [progress, circumference, strokeLength]);
+	}, [circumference, strokeLength]);
 
 	const fillColor = getInfraGaugeColor(progressWithinRange, theme);
 
@@ -123,6 +123,7 @@ export const DetailGauge = ({
 	lowerLabel,
 	lowerValue,
 	maxWidth = 225,
+	flexBasis = "0%",
 }: {
 	title: string;
 	progress: number;
@@ -131,6 +132,7 @@ export const DetailGauge = ({
 	lowerLabel?: string;
 	lowerValue?: string | number;
 	maxWidth?: number;
+	flexBasis?: number | string;
 }) => {
 	const theme = useTheme();
 	return (
@@ -138,6 +140,7 @@ export const DetailGauge = ({
 			icon={null}
 			title={title}
 			maxWidth={maxWidth}
+			flexBasis={flexBasis}
 		>
 			<Stack
 				alignItems={"center"}

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

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

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

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

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

@@ -37,8 +37,8 @@ export const OfflineBanner = ({ visible }: OfflineBannerProps) => {
 				left: 0,
 				right: 0,
 				zIndex: theme.zIndex.snackbar,
-				backgroundColor: theme.palette.error.main,
-				color: theme.palette.error.contrastText,
+				backgroundColor: theme.palette.error.dark,
+				color: "#FFFFFF",
 				px: theme.spacing(8),
 				py: theme.spacing(4),
 				transition: "top 1s ease-in-out",

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

@@ -6,6 +6,7 @@ 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";
 
@@ -109,7 +110,7 @@ export const PageHeader = ({
 							fontSize: 14,
 							color: theme.palette.text.secondary,
 							lineHeight: 1.55,
-							maxWidth: 640,
+							maxWidth: "108ch",
 						}}
 					>
 						{description}
@@ -142,7 +143,7 @@ export const PageHeader = ({
 								alignItems: "center",
 								justifyContent: "center",
 								width: 36,
-								height: 32,
+								height: INPUT_BASE_HEIGHT,
 								color: theme.palette.text.secondary,
 								borderRight:
 									idx < linkItems.length - 1

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

@@ -1,4 +1,5 @@
 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 };
@@ -44,7 +45,7 @@ export const SkeletonCard = ({
 
 	const blockStyle = {
 		width: 55,
-		height: 34,
+		height: INPUT_BASE_HEIGHT,
 		borderRadius: theme.shape.borderRadius,
 		background: theme.palette.secondary.main,
 		border: `1px solid ${theme.palette.divider}`,

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

@@ -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 { lighten } from "@mui/material/styles";
+import { darken, 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,17 +11,18 @@ import type { SxProps } from "@mui/material";
 type GradientBox = React.PropsWithChildren<{
 	palette?: PaletteKey;
 	sx?: SxProps;
+	interactive?: boolean;
 }>;
 
-export const GradientBox = ({ children, palette, sx }: GradientBox) => {
+export const GradientBox = ({ children, palette, sx, interactive }: 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 = lighten(paper, isLight ? 0.06 : 0.08);
+	const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08);
 	const paperEnd = paper;
 	const bg = palette
-		? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`
+		? `linear-gradient(135deg, ${lighten(theme.palette[palette].main, 0.12)} 0%, ${theme.palette[palette].main} 100%)`
 		: `linear-gradient(135deg, ${paperStart} 0%, ${paperEnd} 100%)`;
 
 	return (
@@ -30,6 +31,12 @@ export const GradientBox = ({ children, palette, sx }: 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,
 			}}
 		>
@@ -62,10 +69,8 @@ export const StatBox = ({
 	return (
 		<GradientBox
 			palette={palette}
-			sx={{
-				...(sx as object),
-				...(onClick ? { cursor: "pointer", "&:hover": { opacity: 0.95 } } : {}),
-			}}
+			interactive={Boolean(onClick)}
+			sx={{ ...(sx as object) }}
 		>
 			<Stack onClick={onClick}>
 				<Box sx={{ display: "flex", alignItems: "center", gap: theme.spacing(2) }}>

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

@@ -5,7 +5,7 @@ import { BaseBox } from "@/Components/design-elements";
 import { useTranslation } from "react-i18next";
 import type { SxProps } from "@mui/material";
 
-import { useTheme } from "@mui/material/styles";
+import { alpha, 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(${theme.palette.divider} 1px, transparent 1px),
-						linear-gradient(90deg, ${theme.palette.divider} 1px, transparent 1px)
+						linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px),
+						linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px)
 					`,
 					backgroundSize: "24px 24px",
 					maskImage:

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

@@ -1,12 +1,19 @@
 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 { getStatusPalette, getValuePalette } from "@/Utils/MonitorUtils";
+import {
+	getDockerStatePalette,
+	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];
@@ -110,3 +117,36 @@ 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>
+	);
+};

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

@@ -52,6 +52,7 @@ 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<
@@ -70,6 +71,7 @@ export function DataTable<
 	emptyViewText,
 	emptyViewPositive,
 	getRowSx,
+	isRowSelected,
 }: DataTableProps<T>) {
 	const theme = useTheme();
 	const [expanded, setExpanded] = useState<(string | number) | null>(null);
@@ -80,6 +82,22 @@ 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
@@ -99,7 +117,10 @@ export function DataTable<
 					keys.push(key);
 					return (
 						<Stack
-							onClick={() => (onRowClick ? onRowClick(row) : null)}
+							onClick={(e) => {
+								if (hasTextSelectionWithin(e.currentTarget)) return;
+								if (onRowClick) onRowClick(row);
+							}}
 							spacing={theme.spacing(LAYOUT.XS)}
 							sx={{
 								borderStyle: "solid",
@@ -108,6 +129,11 @@ 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}
 						>
@@ -191,7 +217,7 @@ export function DataTable<
 					"& :is(th)": {
 						backgroundColor: theme.palette.background.paper,
 						color: theme.palette.text.secondary,
-						fontWeight: 500,
+						fontWeight: 600,
 						textTransform: "uppercase",
 						letterSpacing: "0.08em",
 						padding: `${theme.spacing(SPACING.LG)} ${theme.spacing(LAYOUT.MD)}`,
@@ -227,15 +253,29 @@ 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: onRowClick ? "pointer" : "default",
+										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,
+											},
+										}),
 										...(getRowSx?.(row) as object),
 									}}
-									onClick={() => {
+									onClick={(e) => {
+										if (hasTextSelectionWithin(e.currentTarget)) return;
 										if (expandableRows) handleExpand(row);
 										else if (onRowClick) onRowClick(row);
 									}}
@@ -292,6 +332,12 @@ 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;
@@ -321,6 +367,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleFirstPageButtonClick}
 				disabled={page === 0}
 				aria-label="first page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsRight
@@ -338,6 +385,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleBackButtonClick}
 				disabled={page === 0}
 				aria-label="previous page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronRight
@@ -355,6 +403,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleNextButtonClick}
 				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 				aria-label="next page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronLeft
@@ -372,6 +421,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleLastPageButtonClick}
 				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 				aria-label="last page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsLeft
@@ -419,6 +469,7 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleFirstPageButtonClick}
 				disabled={page === 0}
 				aria-label="first page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsRight
@@ -436,6 +487,7 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleBackButtonClick}
 				disabled={page === 0}
 				aria-label="previous page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronRight
@@ -453,6 +505,7 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleNextButtonClick}
 				disabled={hasMore === false}
 				aria-label="next page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronLeft
@@ -470,6 +523,7 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				<IconButton
 					disabled={hasMore === false}
 					aria-label="next page"
+					sx={controlHoverSx(theme)}
 				>
 					<Ellipsis
 						size={20}

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

@@ -1,6 +1,8 @@
 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) => {
@@ -8,7 +10,7 @@ export const Tabs = (props: CustomTabsProps) => {
 	return (
 		<MuiTabs
 			sx={{
-				minHeight: 34,
+				minHeight: INPUT_BASE_HEIGHT,
 				borderBottom: `1px solid ${theme.palette.divider}`,
 				"& .MuiTabs-indicator": {
 					backgroundColor: theme.palette.primary.main,
@@ -38,9 +40,9 @@ export const Tab = (props: CustomTabProps) => {
 			iconPosition="start"
 			sx={{
 				textTransform: "none",
-				fontSize: 14,
+				fontSize: typographyLevels.m,
 				fontWeight: 500,
-				minHeight: 34,
+				minHeight: INPUT_BASE_HEIGHT,
 				padding: theme.spacing(1, 0),
 				paddingBottom: 0,
 				minWidth: "auto",
@@ -48,7 +50,6 @@ 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,

client/src/Components/inputs/AutoComplete.tsx

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

client/src/Components/inputs/Button.tsx

@@ -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 { HOVER } from "@/Utils/Theme/constants";
+import { INPUT_BASE_HEIGHT, HOVER } from "@/Utils/Theme/constants";
 
 const PALETTE_COLORS = [
 	"primary",
@@ -43,7 +43,8 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 			{...props}
 			sx={{
 				textTransform: "none",
-				height: 34,
+				height: INPUT_BASE_HEIGHT,
+				lineHeight: 1.2,
 				fontWeight: 400,
 				borderRadius: 2,
 				whiteSpace: "nowrap",

client/src/Components/inputs/ColorPicker.tsx

@@ -4,6 +4,7 @@ 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;
@@ -18,7 +19,7 @@ export const ColorInput = ({ fieldLabel, required, ...props }: ColorPickerProps)
 			sx={{
 				"& .MuiOutlinedInput-root": {
 					borderRadius: theme.shape.borderRadius,
-					height: 34,
+					height: INPUT_BASE_HEIGHT,
 					fontSize: typographyLevels.base,
 				},
 				"& .MuiOutlinedInput-notchedOutline": {

client/src/Components/inputs/DatePicker.tsx

@@ -8,6 +8,7 @@ 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;
@@ -55,7 +56,7 @@ export const DatePickerComponent = ({
 								flexDirection: "row-reverse",
 							},
 							"& input": {
-								minHeight: 34,
+								minHeight: INPUT_BASE_HEIGHT,
 								p: 0,
 								pl: theme.spacing(3),
 								pr: theme.spacing(5),
@@ -66,7 +67,9 @@ 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.divider,
+									borderColor: error
+										? theme.palette.error.main
+										: theme.palette.text.disabled,
 								},
 						},
 					},

client/src/Components/inputs/LanguageSelector.tsx

@@ -13,7 +13,9 @@ export const languageNames: Record<string, string> = {
 	ca: "Català",
 	es: "Español",
 	fr: "Français",
+	it: "Italiano",
 	"pt-BR": "Português (BR)",
+	pl: "Polski",
 	cs: "Čeština",
 	fi: "Suomi",
 	tr: "Türkçe",

client/src/Components/inputs/Radio.tsx

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

client/src/Components/inputs/Select.tsx

@@ -6,15 +6,17 @@ 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;
 	required?: boolean;
 	placeholder?: string;
+	helperText?: string;
 }
 
 const SelectInputInner = <T,>(
-	{ fieldLabel, required, placeholder, ...props }: SelectInputProps<T>,
+	{ fieldLabel, required, placeholder, helperText, ...props }: SelectInputProps<T>,
 	ref: React.ForwardedRef<HTMLDivElement>
 ) => {
 	const theme = useTheme();
@@ -27,7 +29,7 @@ const SelectInputInner = <T,>(
 			: selected === undefined || selected === null || selected === "";
 
 		if (isEmpty && placeholder) {
-			return <Typography sx={{ color: emptyPlaceholderColor }}>{placeholder}</Typography>;
+			return <Typography color={emptyPlaceholderColor}>{placeholder}</Typography>;
 		}
 
 		if (isMultiple) {
@@ -70,7 +72,7 @@ const SelectInputInner = <T,>(
 				/>
 			)}
 			sx={{
-				height: "34px",
+				height: `${INPUT_BASE_HEIGHT}px`,
 				"& .MuiSelect-select": {
 					display: "flex",
 					alignItems: "center",
@@ -82,21 +84,27 @@ const SelectInputInner = <T,>(
 				},
 				"& .MuiOutlinedInput-notchedOutline": {
 					borderRadius: theme.shape.borderRadius,
-					borderColor: theme.palette.divider,
-				},
-				"&:hover .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.divider,
 				},
 				...props.sx,
 			}}
 		/>
 	);
 
-	if (fieldLabel) {
+	const helper = helperText ? (
+		<Typography
+			variant="caption"
+			color={props.error ? theme.palette.error.main : theme.palette.text.secondary}
+		>
+			{helperText}
+		</Typography>
+	) : null;
+
+	if (fieldLabel || helper) {
 		return (
 			<Stack spacing={theme.spacing(2)}>
-				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
+				{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
 				{select}
+				{helper}
 			</Stack>
 		);
 	}

client/src/Components/inputs/TextInput.tsx

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

client/src/Components/inputs/TimePicker.tsx

@@ -3,18 +3,24 @@ import type { MobileTimePickerProps } from "@mui/x-date-pickers/MobileTimePicker
 import type { Dayjs } from "dayjs";
 import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
 import { FieldLabel } from "./FieldLabel";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers";
+import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 
 interface TimePickerComponentProps extends Omit<MobileTimePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
 	required?: boolean;
+	error?: boolean;
+	helperText?: string;
 }
 
 export const TimePickerComponent = ({
 	fieldLabel,
 	required,
+	error,
+	helperText,
 	...props
 }: TimePickerComponentProps) => {
 	const theme = useTheme();
@@ -28,17 +34,17 @@ export const TimePickerComponent = ({
 						sx: {
 							width: "fit-content",
 							"& input": {
-								minHeight: 34,
+								minHeight: INPUT_BASE_HEIGHT,
 								p: 0,
 								px: theme.spacing(5),
 							},
 							"& fieldset": {
-								borderColor: theme.palette.divider,
+								borderColor: error ? theme.palette.error.main : theme.palette.divider,
 								borderRadius: theme.shape.borderRadius,
 							},
 							"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
 								{
-									borderColor: theme.palette.divider,
+									borderColor: error ? theme.palette.error.main : theme.palette.divider,
 								},
 						},
 					},
@@ -48,14 +54,18 @@ export const TimePickerComponent = ({
 		</LocalizationProvider>
 	);
 
-	if (fieldLabel) {
-		return (
-			<Stack spacing={theme.spacing(2)}>
-				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
-				{picker}
-			</Stack>
-		);
-	}
-
-	return picker;
+	return (
+		<Stack spacing={theme.spacing(2)}>
+			{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
+			{picker}
+			{helperText && (
+				<Typography
+					variant="caption"
+					color={error ? "error" : "text.secondary"}
+				>
+					{helperText}
+				</Typography>
+			)}
+		</Stack>
+	);
 };

client/src/Components/inputs/ToggleButton.tsx

@@ -4,6 +4,7 @@ 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();
@@ -20,7 +21,7 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 			sx={{
 				px: 8,
 				textTransform: "none",
-				height: 34,
+				height: INPUT_BASE_HEIGHT,
 				fontWeight: 400,
 				whiteSpace: "nowrap",
 				textOverflow: "ellipsis",
@@ -34,7 +35,6 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 				"&.Mui-selected": {
 					backgroundColor: selectedBg,
 					color: theme.palette.text.primary,
-					fontWeight: 500,
 					"&:hover": {
 						backgroundColor: selectedHoverBg,
 					},

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

client/src/Components/layout/RootLayout.tsx

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

client/src/Components/monitors/ControlsFilter.tsx

@@ -9,12 +9,11 @@ import type { Tag } from "@/Types/Tag";
 import { Typography, useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
-const types = ["http", "ping", "port", "docker", "game", "grpc", "websocket"];
+const types = ["http", "ping", "port", "game", "grpc", "websocket"];
 const typeDisplayNames: Record<string, string> = {
 	http: "HTTP",
 	ping: "Ping",
 	port: "Port",
-	docker: "Docker",
 	game: "Game",
 	grpc: "gRPC",
 	websocket: "WebSocket",

client/src/Components/monitors/GeoChecksMap.tsx

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

client/src/Components/monitors/HeaderMonitorControls.tsx

@@ -60,20 +60,22 @@ export const HeaderMonitorControls = ({
 				direction={{ xs: "column", md: "row" }}
 				gap={theme.spacing(2)}
 			>
-				<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>
+				{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"

client/src/Components/monitors/MonitorListPage.tsx

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

client/src/Components/monitors/MonitorStatBoxes.tsx

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

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

@@ -0,0 +1,113 @@
+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>
+);

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

@@ -1,53 +1,39 @@
+import Stack from "@mui/material/Stack";
 import { BaseChart, BaseBox } from "@/Components/design-elements";
 import { Clock } from "lucide-react";
+import { Dot } from "@/Components/design-elements";
 import {
 	AreaChart,
 	Area,
 	XAxis,
+	YAxis,
 	Tooltip,
 	CartesianGrid,
 	ResponsiveContainer,
-	Text,
 } from "recharts";
 import type { TooltipProps } from "recharts";
 import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
 import Typography from "@mui/material/Typography";
-
+import { XTick } from "@/Components/monitors/charts/XTick";
 import { useSelector } from "react-redux";
-import {
-	formatDateWithTz,
-	tickDateFormatLookup,
-	tooltipDateFormatLookup,
-} from "@/Utils/TimeUtils";
+import { useTranslation } from "react-i18next";
+import { formatDateWithTz, formatMs, tooltipDateFormatLookup } from "@/Utils/TimeUtils";
 import { useTheme } from "@mui/material/styles";
 import type { Theme } from "@mui/material/styles";
-import type { GroupedCheck } from "@/Types/Check";
+import type { GroupedCheck, GroupedUptimeCheck } from "@/Types/Check";
 import type { RootState } from "@/Types/state";
+import { computeYAxisCap } from "@/Components/monitors/charts/ChartUtils";
 
-type XTickProps = {
-	x: number;
-	y: number;
-	payload: { value: string };
-	range: string;
-};
+import { useMemo, useState } from "react";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
+import {
+	PHASE_COLOR_KEYS,
+	PHASE_KEYS,
+	PHASE_LABEL_KEYS,
+} from "@/Components/monitors/charts/ChartUtils";
 
-export const XTick = ({ x, y, payload, range }: XTickProps) => {
-	const format = tickDateFormatLookup(range);
-	const theme = useTheme();
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	return (
-		<Text
-			x={x}
-			y={y + 10}
-			textAnchor="middle"
-			fill={theme.palette.text.secondary}
-			fontSize={11}
-			fontWeight={400}
-		>
-			{formatDateWithTz(payload?.value, format, uiTimezone)}
-		</Text>
-	);
-};
+type DetailsCheck = GroupedCheck &
+	Partial<Pick<GroupedUptimeCheck, (typeof PHASE_KEYS)[number]>>;
 
 type ResponseTimeToolTipProps = TooltipProps<ValueType, NameType> & {
 	range: string;
@@ -63,17 +49,65 @@ const ResponseTimeToolTip = ({
 	theme,
 	uiTimezone,
 }: ResponseTimeToolTipProps) => {
+	const { t } = useTranslation();
 	if (!label) return null;
 	if (!payload) return null;
 	if (!active) return null;
 
 	const format = tooltipDateFormatLookup(range);
-	console.log(payload);
-	const responseTime = Math.floor(payload[0]?.payload?.originalAvgResponseTime || 0);
+	const responseTime = payload[0]?.payload?.avgResponseTime ?? 0;
 	return (
 		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
 			<Typography>{formatDateWithTz(String(label), format, uiTimezone)}</Typography>
-			<Typography>Response time: {responseTime} ms</Typography>
+			<Typography>
+				{t("common.charts.histogram.responseTime", {
+					value: formatMs(responseTime),
+				})}
+			</Typography>
+		</BaseBox>
+	);
+};
+
+type TimingPhaseToolTipProps = TooltipProps<ValueType, NameType> & {
+	range: string;
+	theme: Theme;
+	uiTimezone: string;
+};
+
+const TimingPhasesToolTip = ({
+	active,
+	payload,
+	range,
+	theme,
+	uiTimezone,
+}: TimingPhaseToolTipProps) => {
+	const { t } = useTranslation();
+	if (!active || !payload?.length) return null;
+	const bucket = payload[0].payload as GroupedUptimeCheck;
+	const total = PHASE_KEYS.reduce((sum, key) => sum + bucket[key], 0);
+	const format = tooltipDateFormatLookup(range);
+	return (
+		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
+			<Typography>{formatDateWithTz(bucket.bucketDate, format, uiTimezone)}</Typography>
+			<Typography>
+				{t("common.charts.histogram.total", { value: formatMs(total) })}
+			</Typography>
+			{PHASE_KEYS.map((key) => (
+				<Stack
+					alignItems={"center"}
+					direction="row"
+					key={key}
+					gap={SPACING.LG}
+				>
+					<Dot
+						size="lg"
+						color={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
+					/>
+					<Typography>
+						{t(PHASE_LABEL_KEYS[key])}: {formatMs(bucket[key])}
+					</Typography>
+				</Stack>
+			))}
 		</BaseBox>
 	);
 };
@@ -82,11 +116,28 @@ export const HistogramDetails = ({
 	checks,
 	range,
 }: {
-	checks: GroupedCheck[];
+	checks: DetailsCheck[];
 	range: string;
 }) => {
+	const [showTimingPhases, setShowTimingPhases] = useState(false);
+	const [hoveredPhase, setHoveredPhase] = useState<string | null>(null);
+
+	const { t } = useTranslation();
 	const theme = useTheme();
 	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
+	const yMax = useMemo(() => {
+		const totals = checks.map((check) => {
+			const phaseSum = PHASE_KEYS.reduce((sum, key) => sum + (check[key] ?? 0), 0);
+			return Math.max(check.avgResponseTime ?? 0, phaseSum);
+		});
+		return computeYAxisCap(totals);
+	}, [checks]);
+
+	const hasTimingPhases = useMemo(
+		() => (checks ?? []).some((check) => PHASE_KEYS.some((key) => (check[key] ?? 0) > 0)),
+		[checks]
+	);
+
 	return (
 		<BaseChart
 			icon={
@@ -95,7 +146,15 @@ export const HistogramDetails = ({
 					strokeWidth={1.5}
 				/>
 			}
-			title="Response times"
+			title={
+				showTimingPhases
+					? t("common.charts.labels.timingPhases")
+					: t("common.charts.labels.responseTime")
+			}
+			onClick={() => {
+				if (!hasTimingPhases) return;
+				setShowTimingPhases((prev) => !prev);
+			}}
 		>
 			<ResponsiveContainer
 				width="100%"
@@ -128,7 +187,34 @@ export const HistogramDetails = ({
 								stopOpacity={0}
 							/>
 						</linearGradient>
+						{PHASE_KEYS.map((key) => (
+							<linearGradient
+								key={key}
+								id={`phaseGradient-${key}`}
+								x1="0"
+								y1="0"
+								x2="0"
+								y2="1"
+							>
+								<stop
+									offset="0%"
+									stopColor={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
+									stopOpacity={0.8}
+								/>
+								<stop
+									offset="100%"
+									stopColor={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
+									stopOpacity={0.2}
+								/>
+							</linearGradient>
+						))}
 					</defs>
+					<YAxis
+						hide
+						// scale="sqrt"
+						domain={[0, yMax ?? "auto"]}
+						allowDataOverflow
+					/>
 					<XAxis
 						axisLine={false}
 						tickLine={false}
@@ -141,24 +227,99 @@ export const HistogramDetails = ({
 						)}
 					/>
 
-					<Tooltip
-						content={(props) => (
-							<ResponseTimeToolTip
-								{...props}
-								range={range}
-								theme={theme}
-								uiTimezone={uiTimezone}
-							/>
-						)}
-					/>
-					<Area
-						type="monotone"
-						dataKey="avgResponseTime"
-						stroke={theme.palette.primary.main}
-						fill="url(#colorUv)"
-					/>
+					{showTimingPhases ? (
+						<Tooltip
+							content={(props) => (
+								<TimingPhasesToolTip
+									{...props}
+									range={range}
+									theme={theme}
+									uiTimezone={uiTimezone}
+								/>
+							)}
+						/>
+					) : (
+						<Tooltip
+							content={(props) => (
+								<ResponseTimeToolTip
+									{...props}
+									range={range}
+									theme={theme}
+									uiTimezone={uiTimezone}
+								/>
+							)}
+						/>
+					)}
+					{!showTimingPhases && (
+						<Area
+							type="monotone"
+							dataKey="avgResponseTime"
+							stroke={theme.palette.primary.main}
+							fill="url(#colorUv)"
+						/>
+					)}
+					{hasTimingPhases &&
+						showTimingPhases &&
+						PHASE_KEYS.map((key) => {
+							const dimmed = hoveredPhase !== null && hoveredPhase !== key;
+							return (
+								<Area
+									key={key}
+									type="monotone"
+									stackId={1}
+									dataKey={key}
+									stroke={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
+									fill={`url(#phaseGradient-${key})`}
+									fillOpacity={dimmed ? 0.2 : undefined}
+									strokeOpacity={dimmed ? 0.2 : undefined}
+								/>
+							);
+						})}
 				</AreaChart>
 			</ResponsiveContainer>
+			<Stack
+				justifyContent={"center"}
+				gap={LAYOUT.XS}
+				direction={"row"}
+				flexWrap={"wrap"}
+			>
+				{showTimingPhases ? (
+					PHASE_KEYS.map((key) => {
+						return (
+							<Stack
+								direction="row"
+								alignItems="center"
+								gap={SPACING.LG}
+								key={key}
+								onMouseEnter={() => setHoveredPhase(key)}
+								onMouseLeave={() => setHoveredPhase(null)}
+							>
+								<Dot
+									color={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
+									size="lg"
+								/>
+								<Typography lineHeight={1}>{t(PHASE_LABEL_KEYS[key])}</Typography>
+							</Stack>
+						);
+					})
+				) : (
+					<Stack
+						direction="row"
+						alignItems="center"
+						gap={SPACING.LG}
+						onMouseEnter={() => setHoveredPhase("avgResponseTime")}
+						onMouseLeave={() => setHoveredPhase(null)}
+					>
+						<Dot
+							color={theme.palette.primary.main}
+							size="lg"
+						/>
+						<Typography lineHeight={1}>
+							{t("common.charts.labels.totalResponseTime")}
+						</Typography>
+					</Stack>
+				)}
+			</Stack>
 		</BaseChart>
 	);
 };

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

@@ -0,0 +1,132 @@
+import { BaseChart, BaseBox } from "@/Components/design-elements";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts";
+import Typography from "@mui/material/Typography";
+
+// Types
+import type { DockerContainerStats } from "@/Types/Monitor";
+import type { TooltipProps } from "recharts";
+import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import type { Theme } from "@mui/material/styles";
+import type { RootState } from "@/Types/state";
+
+// Hooks
+import { useTheme } from "@mui/material";
+import { Fragment, useId } from "react";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+
+// Utils
+import { createGradient } from "@/Components/monitors/charts/ChartUtils";
+import { tooltipDateFormatLookup, formatDateWithTz } from "@/Utils/TimeUtils";
+import type { DateRange } from "@/Types/Query";
+
+type DockerHistogramToolTipProps = TooltipProps<ValueType, NameType> & {
+	dataKey: string;
+	range: string;
+	theme: Theme;
+	uiTimezone: string;
+	valueFormatter: (value: number) => string;
+	labelKey: string;
+};
+
+const DockerHistogramToolTip = ({
+	dataKey,
+	active,
+	payload,
+	range,
+	theme,
+	uiTimezone,
+	valueFormatter,
+	labelKey,
+}: DockerHistogramToolTipProps) => {
+	const { t } = useTranslation();
+	if (!payload) return null;
+	if (!active) return null;
+	const format = tooltipDateFormatLookup(range);
+	const ts = payload[0].payload?._id ?? null;
+	const dataPoint = payload[0].payload?.[dataKey] ?? null;
+
+	return (
+		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
+			<Typography>{formatDateWithTz(ts, format, uiTimezone)}</Typography>
+			<Typography>{t(labelKey, { value: valueFormatter(dataPoint) })}</Typography>
+		</BaseBox>
+	);
+};
+interface HistogramDockerContainerProps {
+	title: string;
+	rightTitle: string;
+	stats: DockerContainerStats;
+	dataKey: string;
+	strokeColor: string;
+	gradientStartColor: string;
+	range: DateRange;
+	formatter: (value: number) => string;
+	labelKey: string;
+}
+
+export const HistogramDockerContainer = ({
+	title,
+	rightTitle,
+	stats,
+	dataKey,
+	strokeColor,
+	gradientStartColor,
+	range,
+	formatter,
+	labelKey,
+}: HistogramDockerContainerProps) => {
+	const uniqueId = useId();
+	const theme = useTheme();
+	const gradientId = `gradient-${uniqueId}`;
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
+	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",
+						})}
+						<Tooltip
+							content={(props) => (
+								<DockerHistogramToolTip
+									{...props}
+									range={range}
+									theme={theme}
+									uiTimezone={uiTimezone}
+									dataKey={dataKey}
+									valueFormatter={formatter}
+									labelKey={labelKey}
+								/>
+							)}
+						/>
+						<Area
+							dataKey={dataKey}
+							type="monotone"
+							stroke={strokeColor}
+							fill={`url(#${gradientId})`}
+						/>
+					</Fragment>
+				</AreaChart>
+			</ResponsiveContainer>
+		</BaseChart>
+	);
+};

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

@@ -8,89 +8,11 @@ import {
 	ResponsiveContainer,
 } from "recharts";
 import { Fragment, useId } from "react";
-import { XTick } from "@/Components/monitors";
+import { XTick } from "@/Components/monitors/charts/XTick";
 
 import { useTheme } from "@mui/material/styles";
 import type { HardwareCheckStats } from "@/Types/Monitor";
-
-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>
-);
+import { AREA_COLORS, createGradient } from "@/Components/monitors/charts/ChartUtils";
 
 export const HistogramInfrastructure = ({
 	dateRange,

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

@@ -1,6 +1,6 @@
 import { BaseChart } from "@/Components/design-elements";
 import { TrendingUp } from "lucide-react";
-import { XTick } from "@/Components/monitors";
+import { XTick } from "@/Components/monitors/charts/XTick";
 import {
 	XAxis,
 	AreaChart,

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { formatDateWithTz, tickDateFormatLookup } from "@/Utils/TimeUtils";
+import { useSelector } from "react-redux";
+import { Text } from "recharts";
+import { useTheme } from "@mui/material";
+import type { RootState } from "@/Types/state";
+
+type XTickProps = {
+	x: number;
+	y: number;
+	payload: { value: string };
+	range: string;
+};
+
+export const XTick = ({ x, y, payload, range }: XTickProps) => {
+	const format = tickDateFormatLookup(range);
+	const theme = useTheme();
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
+	return (
+		<Text
+			x={x}
+			y={y + 10}
+			textAnchor="middle"
+			fill={theme.palette.text.secondary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{formatDateWithTz(payload?.value, format, uiTimezone)}
+		</Text>
+	);
+};

client/src/Components/monitors/index.tsx

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

client/src/Components/sidebar/Authfooter.tsx

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

client/src/Components/sidebar/Menu.tsx

@@ -18,64 +18,95 @@ import {
 	Lock,
 	Users,
 	Tag,
+	Waypoints,
+	Container,
 } from "lucide-react";
-
 export const getMenu = (t: Function) => {
 	return [
 		{
-			name: t("components.sidebar.menu.uptime"),
-			path: "uptime",
-			icon: <Icon icon={Globe} />,
+			group: t("components.sidebar.menu.groups.monitoring"),
+			items: [
+				{
+					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.pagespeed"),
-			path: "pagespeed",
-			icon: <Icon icon={Gauge} />,
+			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.infrastructure"),
-			path: "infrastructure",
-			icon: <Icon icon={Link} />,
+			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.notifications"),
-			path: "notifications",
-			icon: <Icon icon={Bell} />,
-		},
-		{
-			name: t("components.sidebar.menu.tags"),
-			path: "tags",
-			icon: <Icon icon={Tag} />,
-		},
-		{
-			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",
+			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} />,
+				},
+			],
 		},
 	];
 };

client/src/Components/sidebar/NavItem.tsx

@@ -25,11 +25,10 @@ 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.selected
-		: theme.palette.action.hover;
+		? theme.palette.action.selectedHover
+		: theme.palette.action.rowHover;
 	const fontWeight = selected ? 600 : 400;
 	return (
 		<Tooltip

client/src/Components/sidebar/index.tsx

@@ -1,9 +1,12 @@
 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";
@@ -29,7 +32,7 @@ export const Sidebar = () => {
 	const navigate = useNavigate();
 	const location = useLocation();
 	const { t } = useTranslation();
-	const { width, transition, collapsed } = useSidebar();
+	const { width, transition, transitionTiming, collapsed } = useSidebar();
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const menu = getMenu(t);
@@ -70,11 +73,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
@@ -89,19 +92,55 @@ export const Sidebar = () => {
 						pt={theme.spacing(LAYOUT.MD)}
 						pb={theme.spacing(LAYOUT.MD)}
 					/>
-					{menu.map((item) => {
-						const selected = location.pathname.startsWith(`/${item.path}`);
-						return (
-							<NavItem
-								key={item.path}
-								item={item}
-								selected={selected}
-								onClick={() => handleNavClick(item.path)}
-							/>
-						);
-					})}
+					{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>
+					))}
 				</List>
 				<StarPrompt />
+
 				<Divider sx={{ borderColor: theme.palette.divider }} />
 
 				<AuthFooter

client/src/Features/UI/uiSlice.ts

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

client/src/Hooks/UseApi.ts

@@ -6,7 +6,7 @@ import { useState } from "react";
 import { useToast } from "@/Hooks/UseToast";
 import { logger } from "@/Utils/logger";
 
-interface ApiResponse<T> {
+export interface ApiResponse<T> {
 	success: boolean;
 	msg: string;
 	data: T;

client/src/Hooks/UseToast.ts

@@ -1,27 +1,30 @@
 import { toast, type ToastOptions } from "react-toastify";
+import { useMemo } from "react";
 
 export const useToast = () => {
-	const showToast = (message: string, options?: ToastOptions) => {
-		toast.dismiss();
-		const baseStyle: React.CSSProperties = {
-			whiteSpace: "nowrap",
-			overflow: "hidden",
-			textOverflow: "ellipsis",
+	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 || {}) },
+			});
 		};
-		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 };
+	}, []);
 };

client/src/Hooks/useMonitorForm.ts

@@ -1,6 +1,11 @@
 import { useMemo } from "react";
 import { monitorSchema, type MonitorFormData } from "@/Validation/monitor";
-import { DefaultHttpMethod, DefaultPageSpeedStrategy } from "@/Types/Monitor";
+import {
+	DefaultHttpMethod,
+	DefaultMonitorMatchMethod,
+	DefaultPageSpeedStrategy,
+	DefaultProxyMode,
+} from "@/Types/Monitor";
 import type { Monitor, MonitorType } from "@/Types/Monitor";
 
 interface UseMonitorFormOptions {
@@ -42,8 +47,10 @@ export const getMonitorDefaults = (
 				url: data?.url || "",
 				method: data?.method ?? DefaultHttpMethod,
 				ignoreTlsErrors: data?.ignoreTlsErrors || false,
+				proxyMode: data?.proxyMode ?? DefaultProxyMode,
+				proxyId: data?.proxyId || "",
 				useAdvancedMatching: data?.useAdvancedMatching || false,
-				matchMethod: data?.matchMethod || "",
+				matchMethod: data?.matchMethod || DefaultMonitorMatchMethod,
 				expectedValue: data?.expectedValue || "",
 				jsonPath: data?.jsonPath || "",
 				customUpCodes: data?.customUpCodes || [],
@@ -70,6 +77,13 @@ export const getMonitorDefaults = (
 				...base,
 				type: "docker",
 				url: data?.url || "",
+				ignoreTlsErrors: data?.ignoreTlsErrors || false,
+				dockerTlsCa: data?.dockerTlsCa || "",
+				dockerTlsCert: data?.dockerTlsCert || "",
+				// The key is write-only; the API never returns it.
+				dockerTlsKey: "",
+				dockerTlsKeySet: data?.dockerTlsKeySet ?? false,
+				dockerLogsEnabled: data?.dockerLogsEnabled ?? false,
 			};
 			break;
 		case "game":
@@ -137,8 +151,10 @@ export const getMonitorDefaults = (
 				url: "",
 				method: DefaultHttpMethod,
 				ignoreTlsErrors: false,
+				proxyMode: DefaultProxyMode,
+				proxyId: "",
 				useAdvancedMatching: false,
-				matchMethod: "",
+				matchMethod: DefaultMonitorMatchMethod,
 				expectedValue: "",
 				jsonPath: "",
 				customUpCodes: [],

client/src/Hooks/useMonitorListController.ts

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

client/src/Hooks/useNotificationForm.ts

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

client/src/Hooks/useProxiesForm.ts

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

client/src/Hooks/useSettingsForm.ts

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

client/src/Hooks/useSidebar.ts

@@ -6,7 +6,8 @@ const SIDEBAR_WIDTH_VAR = 250;
 const SIDEBAR_COLLAPSED_WIDTH_VAR = 64;
 
 // Transition timing for sidebar width changes
-const SIDEBAR_TRANSITION = "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)";
+const SIDEBAR_TRANSITION_TIMING = "650ms cubic-bezier(0.36, -0.01, 0, 0.77)";
+const SIDEBAR_TRANSITION = `width ${SIDEBAR_TRANSITION_TIMING}`;
 
 export const useSidebar = () => {
 	const collapsed = useSelector(
@@ -19,6 +20,7 @@ export const useSidebar = () => {
 		expandedWidth: SIDEBAR_WIDTH_VAR,
 		width: collapsed ? SIDEBAR_COLLAPSED_WIDTH_VAR : SIDEBAR_WIDTH_VAR,
 		transition: SIDEBAR_TRANSITION,
+		transitionTiming: SIDEBAR_TRANSITION_TIMING,
 	};
 };
 

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

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

client/src/Pages/Account/TabPassword.tsx

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

client/src/Pages/Account/TabProfile.tsx

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

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

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

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

@@ -59,7 +59,12 @@ export const HeaderTeamControls = ({
 				<Button
 					variant="contained"
 					color="primary"
-					startIcon={<Icon icon={Mail} />}
+					startIcon={
+						<Icon
+							icon={Mail}
+							size={16}
+						/>
+					}
 					onClick={onInviteClick}
 				>
 					{t("common.buttons.inviteMember")}
@@ -69,7 +74,12 @@ export const HeaderTeamControls = ({
 				<Button
 					variant="contained"
 					color="primary"
-					startIcon={<Icon icon={UserPlus} />}
+					startIcon={
+						<Icon
+							icon={UserPlus}
+							size={16}
+						/>
+					}
 					onClick={onAddMemberClick}
 				>
 					{t("common.buttons.addMember")}

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

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

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

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

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

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

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

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

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

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

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

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