Merge pull request #2785 from bluewave-labs/fix/caputre

add capture to prod and staging docker-compose

.github/CODEOWNERS

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

.github/pull_request_template.md

@@ -20,7 +20,8 @@ const { t } = useTranslation();
 ```
 - [ ] I have **not** included any files that are not related to my pull request, including package-lock and package-json if dependencies have not changed
 - [ ] I didn't use any hardcoded values (otherwise it will not scale, and will make it difficult to maintain consistency across the application).
-- [ ] I made sure font sizes, color choices etc are all referenced from the theme. I have no hardcoded dimensions.
+- [ ] I made sure font sizes, color choices etc are all referenced from the theme. I don't have any hardcoded dimensions.
 - [ ] My PR is granular and targeted to one specific feature.
+- [ ] I ran `npm run format` in server and client directories, which automatically formats your code.
 - [ ] I took a screenshot or a video and attached to this PR if there is a UI change.
 

.github/scripts/download-translations.js

@@ -6,7 +6,9 @@ import { URLSearchParams } from "url";
 // POEditor API information
 const API_TOKEN = process.env.POEDITOR_API;
 const PROJECT_ID = process.env.POEDITOR_PROJECT_ID;
-const LANGUAGES = (process.env.LANGUAGES || "tr,en").split(",");
+const LANGUAGES = (
+  process.env.LANGUAGES || "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja"
+).split(",");
 const EXPORT_FORMAT = process.env.EXPORT_FORMAT || "key_value_json";
 
 // POEditor API endpoint

.github/workflows/check-format.yml

@@ -0,0 +1,41 @@
+name: Format Check (Client & Server)
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  format-client:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install client dependencies
+        working-directory: client
+        run: npm ci
+
+      - name: Check client formatting
+        working-directory: client
+        run: npm run format-check
+
+  format-server:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install server dependencies
+        working-directory: server
+        run: npm ci
+
+      - name: Check server formatting
+        working-directory: server
+        run: npm run format-check

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

@@ -0,0 +1,147 @@
+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
+          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

@@ -0,0 +1,142 @@
+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
+          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/distribution-deploy.yml

@@ -1,80 +0,0 @@
-name: Distribution deploy
-
-on:
-  push:
-    branches: ["master"]
-  workflow_dispatch:
-jobs:
-  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 Client Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:frontend-dist \
-            -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:frontend-dist
-
-  docker-build-and-push-server:
-    needs: docker-build-and-push-client
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - 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: Build Server Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:backend-dist \
-            -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-dist
-
-      - name: Build Mongo Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:mongo-dist \
-            -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-dist
-
-      - name: Build Redis Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:redis-dist \
-            -f ./docker/dist/redis.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push Redis Docker image
-        run: docker push ghcr.io/bluewave-labs/checkmate:redis-dist

.github/workflows/distribution-mono-deploy-arm.yml

@@ -1,44 +0,0 @@
-name: Distribution deploy - Monolithic Multiarch
-
-on:
-  push:
-    branches: ["master"]
-  workflow_dispatch:
-jobs:
-  docker-build-and-push-server:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - 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: Build and push multi-arch Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./docker/dist-arm/server.Dockerfile
-          push: true
-          tags: ghcr.io/bluewave-labs/checkmate:backend-dist-mono-multiarch
-          platforms: linux/amd64,linux/arm64
-          labels: |
-            org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate
-
-      # - name: Build Server Docker image
-      #   run: |
-      #     docker build \
-      #       -t ghcr.io/bluewave-labs/checkmate:backend-dist-mono-multiarch \
-      #       -f ./docker/dist-arm/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-dist-mono-multiarch

.github/workflows/distribution-mono-deploy.yml

@@ -1,30 +0,0 @@
-name: Distribution deploy - Monolithic
-
-on:
-  push:
-    branches: ["master"]
-  workflow_dispatch:
-jobs:
-  docker-build-and-push-server:
-    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-dist-mono \
-            -f ./docker/dist-mono/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-dist-mono

.github/workflows/poeditor-sync.yml

@@ -7,7 +7,7 @@ on:
       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"
+        default: "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja"
       format:
         description: "Export format (key_value_json or json)"
         required: false

.github/workflows/production-deploy.yml

@@ -10,6 +10,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Log in to GitHub Container Registry
         uses: docker/login-action@v3
@@ -18,12 +20,16 @@ jobs:
           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
@@ -65,17 +71,6 @@ jobs:
       - name: Push MongoDB Docker image
         run: docker push ghcr.io/bluewave-labs/checkmate:mongo-demo
 
-      - name: Build Redis Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:redis-demo \
-            -f ./docker/prod/redis.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push Redis Docker image
-        run: docker push ghcr.io/bluewave-labs/checkmate:redis-demo
-
   deploy-to-demo:
     needs: docker-build-and-push-server
     runs-on: ubuntu-latest

.github/workflows/staging-deploy.yml

@@ -10,6 +10,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Log in to GitHub Container Registry
         uses: docker/login-action@v3
@@ -18,12 +20,16 @@ jobs:
           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
@@ -65,17 +71,6 @@ jobs:
       - name: Push MongoDB Docker image
         run: docker push ghcr.io/bluewave-labs/checkmate:mongo-staging
 
-      - name: Build Redis Docker image
-        run: |
-          docker build \
-            -t ghcr.io/bluewave-labs/checkmate:redis-staging \
-            -f ./docker/staging/redis.Dockerfile \
-            --label org.opencontainers.image.source=https://github.com/bluewave-labs/checkmate \
-            .
-
-      - name: Push Redis Docker image
-        run: docker push ghcr.io/bluewave-labs/checkmate:redis-staging
-
   deploy-to-staging:
     needs: docker-build-and-push-server
     runs-on: ubuntu-latest

PULLREQUESTS.md

@@ -27,6 +27,10 @@ Process.  If more revisions are required after the second review we’re looking
 
 If PRs are small and manageable it is far more likely that a dev will catch bugs during the review process.  If our eyes glaze over at line 400 of a 700 line PR since we’ve reached our cognitive limit we’re not going to likely miss bugs in the last 300 lines of code.
 
-### Bonus Topic:  Keep PRs focused
+### Format your PRs for better readability
+
+Ensure you execute `npm run format` before submitting your pull requests in both the client and server directories. This command automatically applies our formatting structure, making the code easier to follow and review.
+
+### Keep PRs focused
 
 It may be tempting to address a bug you suddenly remembered or make some tiny adjustments in some component that bothers you, but don’t!  Keep all commits in your pull request fully focused on the specific feature you are working on.  Open up another PR if you want to fix a big or work on another feature.

README.es.md

@@ -0,0 +1,172 @@
+<p align=center> <a href="https://trendshift.io/repositories/12443" target="_blank"><img src="https://trendshift.io/api/badge/repositories/12443" alt="bluewave-labs%2Fcheckmate | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a></p>
+
+![](https://img.shields.io/github/license/bluewave-labs/checkmate)
+![](https://img.shields.io/github/repo-size/bluewave-labs/checkmate)
+![](https://img.shields.io/github/commit-activity/m/bluewave-labs/checkmate)
+![](https://img.shields.io/github/last-commit/bluewave-labs/checkmate)
+![](https://img.shields.io/github/languages/top/bluewave-labs/checkmate)
+![](https://img.shields.io/github/issues/bluewave-labs/checkmate)
+![](https://img.shields.io/github/issues-pr/bluewave-labs/checkmate)
+[![OpenSSF Mejores Prácticas](https://www.bestpractices.dev/projects/9901/badge)](https://www.bestpractices.dev/projects/9901)
+[![Pregunta en DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bluewave-labs/checkmate)
+
+<h1 align="center"><a href="https://bluewavelabs.ca" target="_blank">Checkmate</a></h1>
+
+<p align="center"><strong>Una aplicación de código abierto para monitoreo de infraestructura y tiempo de actividad</strong></p>
+
+<img width="1660" alt="image" src="https://github.com/user-attachments/assets/b748f36d-a271-4965-ad0a-18bf153bbee7" />
+
+Este repositorio contiene tanto el frontend como el backend de Checkmate, una herramienta de monitoreo de código abierto y autoalojada para rastrear hardware de servidores, tiempo de actividad, tiempos de respuesta e incidentes en tiempo real con visualizaciones atractivas. Checkmate revisa regularmente si un servidor o sitio web es accesible y funciona de manera óptima, proporcionando alertas e informes en tiempo real sobre la disponibilidad, el tiempo de inactividad y el tiempo de respuesta de los servicios monitoreados.
+
+Checkmate también tiene un agente llamado [Capture](https://github.com/bluewave-labs/capture), para recuperar datos de servidores remotos. Aunque Capture no es obligatorio para ejecutar Checkmate, proporciona información adicional sobre el estado de la CPU, RAM, disco y temperatura de tus servidores.
+
+Checkmate ha sido probado con más de 1000 monitores activos sin problemas ni cuellos de botella de rendimiento.
+
+**Si deseas patrocinar una función, [visita este enlace](https://checkmate.so/sponsored-features).**
+
+## 📚 Tabla de contenidos
+
+- [📦 Demo](#demo)  
+- [🔗 Guía del usuario](#guía-del-usuario)  
+- [🛠️ Instalación](#instalación)
+- [🏁 Traducciones](#traducciones)  
+- [🚀 Rendimiento](#rendimiento)  
+- [💚 Preguntas e ideas](#preguntas-e-ideas)  
+- [🧩 Características](#características)  
+- [🏗️ Capturas de pantalla](#capturas-de-pantalla)  
+- [🏗️ Tecnologías](#tecnologías)  
+- [🔗 Enlaces útiles](#enlaces-útiles)  
+- [🤝 Contribuciones](#contribuciones)  
+- [💰 Patrocinadores](#patrocinadores)
+
+...
+
+**[Texto truncado para mantener la longitud del mensaje manejable]**
+
+## Demo
+
+Puedes ver la última versión de [Checkmate](https://checkmate-demo.bluewavelabs.ca/) en acción. El usuario es uptimedemo@demo.com y la contraseña es Demouser1! (ten en cuenta que actualizamos el servidor de demostración de vez en cuando, así que si no funciona para ti, por favor contáctanos en el canal de Discusiones).
+
+## Guía del usuario
+
+Las instrucciones de uso se pueden encontrar [aquí](https://docs.checkmate.so/checkmate-2.1). Todavía está en desarrollo y parte de la información puede estar desactualizada ya que continuamente añadimos funciones cada semana. ¡Ten por seguro que estamos haciendo lo mejor posible! :)
+
+## Instalación
+
+Consulta las instrucciones de instalación en el [portal de documentación de Checkmate](https://docs.checkmate.so/checkmate-2.1/users-guide/quickstart).
+
+Alternativamente, también puedes usar [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md) o [Pikapods](https://www.pikapods.com/) para desplegar rápidamente una instancia de Checkmate. Si deseas monitorear tu infraestructura de servidores, necesitarás el agente [Capture](https://github.com/bluewave-labs/capture). El repositorio de Capture también contiene las instrucciones de instalación.
+
+## Traducciones
+
+Si deseas usar Checkmate en tu idioma, por favor [ve a esta página](https://poeditor.com/join/project/lRUoGZFCsJ) y regístrate para el idioma al que te gustaría traducir Checkmate.
+
+## Rendimiento
+
+Gracias a extensas optimizaciones, Checkmate opera con un uso de memoria excepcionalmente bajo, requiriendo recursos mínimos de memoria y CPU. Aquí está el uso de memoria de una instancia de Node.js ejecutándose en un servidor que monitorea 323 servidores cada minuto:
+
+![image](https://github.com/user-attachments/assets/37e04a75-d83a-488f-b25c-025511b492c9)
+
+También puedes ver el consumo de memoria de MongoDB y Redis en el mismo servidor (398Mb y 15Mb) para la misma cantidad de servidores:
+
+![image](https://github.com/user-attachments/assets/3b469e85-e675-4040-a162-3f24c1afc751)
+
+## Preguntas e Ideas
+
+Si tienes alguna pregunta, sugerencia o comentario, tienes varias opciones:
+
+- [Canal de Discord](https://discord.gg/NAb6H3UTjK)
+- [Discusiones en GitHub](https://github.com/bluewave-labs/bluewave-uptime/discussions)
+- [Grupo en Reddit](https://www.reddit.com/r/CheckmateMonitoring/)
+
+¡No dudes en hacer preguntas o compartir tus ideas, nos encantaría saber de ti!
+
+## Características
+
+- Completamente de código abierto, desplegable en tus propios servidores o dispositivos personales (por ejemplo, Raspberry Pi 4 o 5)
+- Monitoreo de sitios web
+- Monitoreo de velocidad de carga
+- Monitoreo de infraestructura (memoria, uso de disco, rendimiento de CPU, etc) - requiere el agente [Capture](https://github.com/bluewave-labs/capture)
+- Monitoreo de Docker
+- Monitoreo con ping
+- Monitoreo de certificados SSL
+- Monitoreo de puertos
+- Incidentes en una sola vista
+- Páginas de estado
+- Notificaciones por correo, Webhooks, Discord, Telegram, Slack
+- Mantenimiento programado
+- Monitoreo de consultas JSON
+- Soporte para múltiples idiomas
+
+**Hoja de ruta a corto plazo:** ([Milestone 2.2](https://github.com/bluewave-labs/Checkmate/milestone/8))
+
+- Mejores notificaciones
+- Monitoreo de red
+- ...y algunas funciones más
+
+## Capturas de pantalla
+
+<p>
+<img width="1628" alt="image" src="https://github.com/user-attachments/assets/2eff6464-0738-4a32-9312-26e1e8e86275" />
+</p>
+<p>
+  <img width="1656" alt="image" src="https://github.com/user-attachments/assets/616c3563-c2a7-4ee4-af6c-7e6068955d1a" />
+</p>
+<p>
+<img width="1652" alt="image" src="https://github.com/user-attachments/assets/7912d7cf-0d0e-4f26-aa5c-2ad7170b5c99" />
+</p>
+<p>
+<img width="1652" alt="image" src="https://github.com/user-attachments/assets/08c2c6ac-3a2f-44d1-a229-d1746a3f9d16" />
+</p>
+
+## Tecnologías
+
+- [ReactJs](https://react.dev/)
+- [MUI (framework de React)](https://mui.com/)
+- [Node.js](https://nodejs.org/en)
+- [MongoDB](https://mongodb.com)
+- [Recharts](https://recharts.org)
+- ¡Y muchos otros componentes de código abierto!
+
+## Enlaces útiles
+
+- Si deseas apoyarnos, por favor considera darle una ⭐ y haz clic en "watch".
+- ¿Tienes una pregunta o sugerencia para la hoja de ruta? Revisa nuestro [canal de Discord](https://discord.gg/NAb6H3UTjK) o el foro de [Discusiones](https://github.com/bluewave-labs/checkmate/discussions).
+- ¿Quieres saber cuándo hay una nueva versión? Usa [Newreleases](https://newreleases.io/), un servicio gratuito para seguir lanzamientos.
+- Mira un video de instalación y uso de Checkmate [aquí](https://www.youtube.com/watch?v=GfFOc0xHIwY)
+
+## Contribuciones
+
+Somos [Alex](http://github.com/ajhollid) (líder de equipo), [Vishnu](http://github.com/vishnusn77), [Mohadeseh](http://github.com/mohicody), [Gorkem](http://github.com/gorkem-bwl/), [Owaise](http://github.com/Owaiseimdad), [Aryaman](https://github.com/Br0wnHammer) y [Mert](https://github.com/mertssmnoglu), ayudando a personas y empresas a monitorear su infraestructura y servidores.
+
+Nos enorgullecemos de construir conexiones fuertes con contribuyentes de todos los niveles. A pesar de ser un proyecto joven, Checkmate ya ha ganado más de 7000 estrellas y ha atraído a más de 90 contribuyentes de todo el mundo.
+
+Nuestro repositorio ha sido marcado con estrella por empleados de **Google, Microsoft, Intel, Cisco, Tencent, Electronic Arts, ByteDance, JP Morgan Chase, Deloitte, Accenture, Foxconn, Broadcom, China Telecom, Barclays, Capgemini, Wipro, Cloudflare, Dassault Systèmes y NEC**, ¡así que no te detengas — participa, contribuye y aprende con nosotros!
+
+Cómo contribuir:
+
+0. Dale una estrella al repositorio :)
+1. Revisa la [guía para contribuidores](https://github.com/bluewave-labs/Checkmate/blob/develop/CONTRIBUTING.md). Se anima a los nuevos a revisar las etiquetas `good-first-issue`.
+2. Consulta la [estructura del proyecto](https://docs.checkmate.so/checkmate-2.1/developers-guide/general-project-structure) y la [visión general](https://bluewavelabs.gitbook.io/checkmate/developers-guide/high-level-overview).
+3. Lee una estructura detallada de [Checkmate](https://deepwiki.com/bluewave-labs/Checkmate) si deseas profundizar en la arquitectura.
+4. Abre un issue si crees que has encontrado un error.
+5. Revisa los issues con la etiqueta `good-first-issue` si eres nuevo.
+6. Haz un pull request para añadir nuevas funciones, mejoras o correcciones.
+
+<a href="https://github.com/bluewave-labs/checkmate/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=bluewave-labs/checkmate" />
+</a>
+
+[![Historial de estrellas](https://api.star-history.com/svg?repos=bluewave-labs/checkmate&type=Date)](https://star-history.com/#bluewave-labs/bluewave-uptime&Date)
+
+## Patrocinadores
+
+Gracias a [Gitbook](https://gitbook.io/) por darnos una cuenta gratuita para su plataforma de documentación, y a [Poeditor](https://poeditor.com/) por proporcionarnos una cuenta gratuita para servicios de traducción. Si deseas patrocinar Checkmate, por favor envía un correo a hello@bluewavelabs.ca
+
+Si deseas patrocinar una función, [visita esta página](https://checkmate.so/sponsored-features).
+
+También puedes revisar otros proyectos de BlueWave orientados a desarrolladores y contribuidores:
+
+- [VerifyWise](https://github.com/bluewave-labs/verifywise), la primera plataforma de gobernanza de IA de código abierto.
+- [DataRoom](https://github.com/bluewave-labs/bluewave-dataroom), una aplicación de intercambio de archivos seguro, también conocida como dataroom.
+- [Guidefox](https://github.com/bluewave-labs/guidefox), una app que ayuda a nuevos usuarios a aprender a usar tu producto mediante pistas, tours, popups y banners.

README.md

@@ -14,33 +14,58 @@
 
 <p align="center"><strong>An open source uptime and infrastructure monitoring application</strong></p>
 
-![dashboard](https://github.com/user-attachments/assets/252d6047-522b-4576-8f14-233510e464b8)
+<img width="1660" alt="image" src="https://github.com/user-attachments/assets/b748f36d-a271-4965-ad0a-18bf153bbee7" />
 
 This repository contains both the frontend and the backend of Checkmate, an open-source, self-hosted monitoring tool for tracking server hardware, uptime, response times, and incidents in real-time with beautiful visualizations. Checkmate regularly checks whether a server/website is accessible and performs optimally, providing real-time alerts and reports on the monitored services' availability, downtime, and response time.
 
-Checkmate also has an agent, called [Capture](https://github.com/bluewave-labs/capture), to retrieve data from remote servers. While Capture is not required to run Checkmate, it provides additional insights about your servers' CPU, RAM, disk, and temperature status.
+Checkmate also has an agent, called [Capture](https://github.com/bluewave-labs/capture), to retrieve data from remote servers. While Capture is not required to run Checkmate, it provides additional insights about your servers' CPU, RAM, disk, and temperature status. Capture can run on Linux, Windows, Mac, Raspberry Pi, or any device that can run Go.
 
 Checkmate has been stress-tested with 1000+ active monitors without any particular issues or performance bottlenecks.
 
-We **love** what we are building here, and we continuously learn a few things about Reactjs, Nodejs, MongoDB, and Docker while building Checkmate.
+**If you would like to sponsor a feature, [see this link](https://checkmate.so/sponsored-features).**
 
-## 📦 Demo
+## 📚 Table of contents
+
+- [📦 Demo](#demo)  
+- [🔗 User's guide](#users-guide)  
+- [🛠️ Installation](#installation)
+- [🏁 Translations](#translations)  
+- [🚀 Performance](#performance)  
+- [💚 Questions & Ideas](#questions--ideas)  
+- [🧩 Features](#features)  
+- [🏗️ Screenshots](#screenshots)  
+- [🏗️ Tech stack](#tech-stack)  
+- [🔗 A few links](#a-few-links)  
+- [🤝 Contributing](#contributing)  
+- [💰 Our sponsors](#our-sponsors)
+
+
+## Demo
 
 You can see the latest build of [Checkmate](https://checkmate-demo.bluewavelabs.ca/) in action. The username is uptimedemo@demo.com and the password is Demouser1! (just a note that we update the demo server from time to time, so if it doesn't work for you, please ping us on the Discussions channel).
 
-## 🔗 User's guide
+## User's guide
 
 Usage instructions can be found [here](https://docs.checkmate.so/checkmate-2.1). It's still WIP and some of the information there might be outdated as we continuously add features weekly. Rest assured, we are doing our best! :)
 
-## 🛠️ Installation
+## Installation
 
-See installation instructions in [Checkmate documentation portal](https://docs.checkmate.so/checkmate-2.1/users-guide/quickstart). Alternatively, you can also use [Coolify](https://coolify.io/) or [Elestio](https://elest.io/open-source/checkmate) for a one-click Docker deployment. 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.
+See installation instructions in [Checkmate documentation portal](https://docs.checkmate.so/checkmate-2.1/users-guide/quickstart). 
 
-## 🏁 Translations
+Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md) 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.
+
+For more documentation, see the [docs directory](./docs/).
+
+
+## Translations
 
 If you would like to use Checkmate in your language, please [go to this page](https://poeditor.com/join/project/lRUoGZFCsJ) and register for the language you would like to translate Checkmate to. 
 
-## 🚀 Performance
+## Performance
 
 Thanks to extensive optimizations, Checkmate operates with an exceptionally small memory footprint, requiring minimal memory and CPU resources. Here’s the memory usage of a Node.js instance running on a server that monitors 323 servers every minute:
 
@@ -50,46 +75,61 @@ You can see the memory footprint of MongoDB and Redis on the same server (398Mb
 
 ![image](https://github.com/user-attachments/assets/3b469e85-e675-4040-a162-3f24c1afc751)
 
-## 💚 Questions & Ideas
+## Questions & Ideas
 
-If you have any questions, suggestions or comments, please use our [Discord channel](https://discord.gg/NAb6H3UTjK). We've also launched our [Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions) page! Feel free to ask questions or share your ideas—we'd love to hear from you!
+If you have any questions, suggestions or comments, you have several options: 
 
-## 🧩 Features
+- [Discord channel](https://discord.gg/NAb6H3UTjK)
+- [GitHub Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions)
+- [Reddit group](https://www.reddit.com/r/CheckmateMonitoring/)
+
+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)
 - Website monitoring
 - Page speed monitoring
-- Infrastructure monitoring (memory, disk usage, CPU performance etc) - requires [Capture](https://github.com/bluewave-labs/capture)
+- Infrastructure monitoring (memory, disk usage, CPU performance, network etc) - requires [Capture](https://github.com/bluewave-labs/capture) agent
 - Docker monitoring
 - Ping monitoring
 - SSL monitoring
 - Port monitoring
+- Game server monitoring (3.0)
 - Incidents at a glance
 - Status pages
-- E-mail, Webhooks, Discord, Telegram, Slack notifications
+- E-mail, Webhooks, Discord and Slack notifications
 - Scheduled maintenance
 - JSON query monitoring
-- Support for multiple languages
+- Multi-language support for English, German, Japanese, Portuguese (Brazil), Russian, Turkish, Ukrainian, Vietnamese, Chinese (Traditional, Taiwan)
 
-**Short term roadmap:** ([Milestone 2.2](https://github.com/bluewave-labs/Checkmate/milestone/8))
+**Short term roadmap:** 
 
+- Plugins that will help Checkmate get any information from a remote service (e.g database, etc)
 - Better notifications
 - Network monitoring
 - ..and a few more features
 
-## 🏗️ Screenshots
+If you would like to sponsor an additional feature, [see this page](https://checkmate.so/sponsored-features).
+
+## Screenshots
 
 <p>
-<img width="2714" alt="server" src="https://github.com/user-attachments/assets/f7cb272a-69a6-48c5-93b0-249ecf20ecc6" />
+<img width="1628" alt="image" src="https://github.com/user-attachments/assets/2eff6464-0738-4a32-9312-26e1e8e86275" />
 </p>
 <p>
-<img width="2714" alt="uptime" src="https://github.com/user-attachments/assets/98ddc6c0-3384-47fd-96ce-7e53e6b688ac" />
+  <img width="1656" alt="image" src="https://github.com/user-attachments/assets/616c3563-c2a7-4ee4-af6c-7e6068955d1a" />
 </p>
 <p>
-<img width="2714" alt="page speed" src="https://github.com/user-attachments/assets/b5589f79-da30-4239-9846-1f8bb2637ff9" />
+</p><img width="1652" alt="image" src="https://github.com/user-attachments/assets/7912d7cf-0d0e-4f26-aa5c-2ad7170b5c99" />
+</p>
+<p>
+<img width="1652" alt="image" src="https://github.com/user-attachments/assets/08c2c6ac-3a2f-44d1-a229-d1746a3f9d16" />
 </p>
 
-## 🏗️ Tech stack
+
+
+## Tech stack
 
 - [ReactJs](https://react.dev/)
 - [MUI (React framework)](https://mui.com/)
@@ -105,11 +145,11 @@ If you have any questions, suggestions or comments, please use our [Discord chan
 - Need a ping when there's a new release? Use [Newreleases](https://newreleases.io/), a free service to track releases.
 - Watch a Checkmate [installation and usage video](https://www.youtube.com/watch?v=GfFOc0xHIwY)
 
-## 🤝 Contributing
+## Contributing
 
-We are [Alex](http://github.com/ajhollid) (team lead), [Vishnu](http://github.com/vishnusn77), [Mohadeseh](http://github.com/mohicody), [Gorkem](http://github.com/gorkem-bwl/), [Owaise](http://github.com/Owaiseimdad), [Aryaman](https://github.com/Br0wnHammer) and [Mert](https://github.com/mertssmnoglu) helping individuals and businesses monitor their infra and servers.
+We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Owaise](http://github.com/Owaiseimdad), [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 pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned 5800+ stars and attracted 70+ 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 7000+ stars and attracted 90+ 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!
 
@@ -127,11 +167,13 @@ Here's how you can contribute:
   <img src="https://contrib.rocks/image?repo=bluewave-labs/checkmate" />
 </a>
 
-## 💰 Our sponsors
+[![Star History Chart](https://api.star-history.com/svg?repos=bluewave-labs/checkmate&type=Date)](https://star-history.com/#bluewave-labs/bluewave-uptime&Date)
+
+## Our sponsors
 
 Thanks to [Gitbook](https://gitbook.io/) for giving us a free tier for their documentation platform, and [Poeditor](https://poeditor.com/) providing us a free account to use their i18n services. If you would like to sponsor Checkmate, please send an email to hello@bluewavelabs.ca
 
-[![Star History Chart](https://api.star-history.com/svg?repos=bluewave-labs/checkmate&type=Date)](https://star-history.com/#bluewave-labs/bluewave-uptime&Date)
+If you would like to sponsor a feature, [see this page](https://checkmate.so/sponsored-features).
 
 Also check other developer and contributor-friendly projects of BlueWave:
 

charts/helm/checkmate/.helmignore

@@ -0,0 +1,17 @@
+.DS_Store
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+.project
+.idea/
+*.tmproj
+.vscode/

charts/helm/checkmate/Chart.yaml

@@ -0,0 +1,6 @@
+apiVersion: v2
+name: checkmate-chart
+description: A Helm chart for Checkmate App
+type: application
+version: 0.1.0
+appVersion: "2.3"

charts/helm/checkmate/INSTALLATION.md

@@ -0,0 +1,39 @@
+# Kubernetes Installation Guide for Checkmate
+
+This guide walks you through deploying Checkmate on your Kubernetes cluster using Helm.
+
+## Prerequisites
+
+- A running Kubernetes cluster
+- Helm CLI installed and configured
+- `kubectl` configured to access your cluster
+
+## Steps
+
+### 1. Clone the repo and navigate to the Helm chart
+
+```bash
+git clone https://github.com/bluewave-labs/checkmate.git
+cd checkmate/charts/helm/checkmate
+```
+
+### 2. Customize values.yaml
+Edit `values.yaml` to update:
+- `client.ingress.host` and `server.ingress.host` with your domain names
+- `server.protocol` (usually http or https)
+- Secrets under the `secrets` section (`JWT_SECRET`, email credentials, API keys, etc.) — replace all change_me values
+
+### 3. Deploy the Helm chart
+```bash
+helm install checkmate ./charts/helm/checkmate
+```
+This will deploy the client, server, MongoDB, and Redis components.
+
+### 4. Verify the deployment
+Check pods and services:
+```bash
+kubectl get pods
+kubectl get svc
+```
+
+Once all pods are `Running` and `Ready`, you can access Checkmate via the configured ingress hosts.

charts/helm/checkmate/templates/_prechecks.yaml

@@ -0,0 +1,12 @@
+{{- if eq .Values.client.ingress.host "change_me" }}
+  {{- fail "client.ingress.host must be overridden and not set to 'change_me'" }}
+{{- end }}
+
+{{- if eq .Values.server.ingress.host "change_me" }}
+  {{- fail "server.ingress.host must be overridden and not set to 'change_me'" }}
+{{- end }}
+
+{{- $protocol := .Values.server.protocol }}
+{{- if not (or (eq $protocol "http") (eq $protocol "https")) }}
+  {{- fail "server.protocol must be either 'http' or 'https'" }}
+{{- end }}

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

@@ -0,0 +1,22 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: client
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: client
+  template:
+    metadata:
+      labels:
+        app: client
+    spec:
+      containers:
+        - name: client
+          image: {{ .Values.client.image }}
+          ports:
+            - containerPort: {{ .Values.client.port }}
+          env:
+            - name: UPTIME_APP_API_BASE_URL
+              value: "{{ .Values.server.protocol }}://{{ .Values.server.ingress.host }}/api/v1"

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

@@ -0,0 +1,20 @@
+{{- if .Values.client.ingress.enabled }}
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: client-ingress
+  annotations:
+    nginx.ingress.kubernetes.io/rewrite-target: /
+spec:
+  rules:
+    - host: {{ .Values.client.ingress.host }}
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: client
+                port:
+                  number: {{ .Values.client.port }}
+{{- end }}

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

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

charts/helm/checkmate/templates/mongodb-deployment.yaml

@@ -0,0 +1,27 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: mongodb
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: mongodb
+  template:
+    metadata:
+      labels:
+        app: mongodb
+    spec:
+      containers:
+        - name: mongodb
+          image: {{ .Values.mongodb.image }}
+          ports:
+            - containerPort: {{ .Values.mongodb.port }}
+          command: ["mongod", "--quiet", "--bind_ip_all"]
+          volumeMounts:
+            - name: mongodb-data
+              mountPath: /data/db
+      volumes:
+        - name: mongodb-data
+          persistentVolumeClaim:
+            claimName: mongodb-pvc

charts/helm/checkmate/templates/mongodb-pvc.yaml

@@ -0,0 +1,10 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: mongodb-pvc
+spec:
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: {{ .Values.persistence.mongodbSize }}

charts/helm/checkmate/templates/mongodb-service.yaml

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

charts/helm/checkmate/templates/redis-deployment.yaml

@@ -0,0 +1,26 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: redis
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: redis
+  template:
+    metadata:
+      labels:
+        app: redis
+    spec:
+      containers:
+        - name: redis
+          image: {{ .Values.redis.image }}
+          ports:
+            - containerPort: {{ .Values.redis.port }}
+          volumeMounts:
+            - name: redis-data
+              mountPath: /data
+      volumes:
+        - name: redis-data
+          persistentVolumeClaim:
+            claimName: redis-pvc

charts/helm/checkmate/templates/redis-pvc.yaml

@@ -0,0 +1,10 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+ name: redis-pvc
+spec:
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: {{ .Values.persistence.redisSize }}

charts/helm/checkmate/templates/redis-service.yaml

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

charts/helm/checkmate/templates/secrets.yaml

@@ -0,0 +1,19 @@
+{{- $secrets := .Values.secrets }}
+
+{{- if or (not $secrets.JWT_SECRET) (eq $secrets.JWT_SECRET "change_me") }}
+  {{- fail "secrets.JWT_SECRET must be overridden and cannot be 'change_me'" }}
+{{- end }}
+
+{{- if or (not $secrets.REFRESH_TOKEN_SECRET) (eq $secrets.REFRESH_TOKEN_SECRET "change_me") }}
+  {{- fail "secrets.REFRESH_TOKEN_SECRET must be overridden and cannot be 'change_me'" }}
+{{- end }}
+
+apiVersion: v1
+kind: Secret
+metadata:
+  name: checkmate-secrets
+type: Opaque
+stringData:
+{{- range $key, $value := $secrets }}
+  {{ $key }}: {{ $value | quote }}
+{{- end }}

charts/helm/checkmate/templates/server-deployment.yaml

@@ -0,0 +1,22 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: server
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: server
+  template:
+    metadata:
+      labels:
+        app: server
+    spec:
+      containers:
+        - name: server
+          image: {{ .Values.server.image }}
+          ports:
+            - containerPort: {{ .Values.server.port }}
+          envFrom:
+            - secretRef:
+                name: checkmate-secrets

charts/helm/checkmate/templates/server-ingress.yaml

@@ -0,0 +1,25 @@
+{{- if .Values.server.ingress.enabled }}
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: server-ingress
+  annotations:
+    nginx.ingress.kubernetes.io/rewrite-target: /
+    nginx.ingress.kubernetes.io/enable-cors: "true"
+    nginx.ingress.kubernetes.io/cors-allow-origin: "http://{{ .Values.client.ingress.host }},https://{{ .Values.client.ingress.host }}"
+    nginx.ingress.kubernetes.io/cors-allow-methods: "GET, PUT, POST, DELETE, PATCH, OPTIONS"
+    nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization"
+    nginx.ingress.kubernetes.io/cors-allow-credentials: "true"
+spec:
+  rules:
+    - host: {{ .Values.server.ingress.host }}
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: server
+                port:
+                  number: {{ .Values.server.port }}
+{{- end }}

charts/helm/checkmate/templates/server-service.yaml

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

charts/helm/checkmate/values.yaml

@@ -0,0 +1,41 @@
+client:
+  image: ghcr.io/bluewave-labs/checkmate-client:v2.3
+  port: 80
+  ingress:
+    enabled: true
+    host: change_me
+
+server:
+  image: ghcr.io/bluewave-labs/checkmate-backend:v2.3
+  port: 52345
+  protocol: change_me
+  ingress:
+    enabled: true
+    host: change_me
+
+redis:
+  image: redis:7.2
+  port: 6379
+
+mongodb:
+  image: mongo:7.0
+  port: 27017
+
+secrets:
+  JWT_SECRET: change_me
+  REFRESH_TOKEN_SECRET: change_me
+  SYSTEM_EMAIL_ADDRESS: test@example.com
+  SYSTEM_EMAIL_PASSWORD: change_me
+  SYSTEM_EMAIL_HOST: smtp.example.com
+  SYSTEM_EMAIL_PORT: "587"
+  PAGESPEED_API_KEY: change_me
+  DB_CONNECTION_STRING: mongodb://mongodb:27017/uptime_db
+  REDIS_HOST: redis
+  REDIS_PORT: "6379"
+  DB_TYPE: MongoDB
+  TOKEN_TTL: 99d
+  REFRESH_TOKEN_TTL: 99d
+
+persistence:
+  mongodbSize: 5Gi
+  redisSize: 1Gi

client/.eslintrc.cjs

@@ -16,4 +16,8 @@ module.exports = {
 		"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
 		"react/no-unescaped-entities": "off",
 	},
+	globals: {
+		__APP_VERSION__: "readonly",
+		process: "readonly",
+	},
 };

client/package.json

@@ -15,13 +15,11 @@
 	"dependencies": {
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
-		"@fontsource/roboto": "^5.0.13",
 		"@hello-pangea/dnd": "^18.0.0",
 		"@mui/icons-material": "6.4.11",
 		"@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
 		"@mui/material": "6.4.11",
 		"@mui/x-charts": "^7.5.1",
-		"@mui/x-data-grid": "7.29.0",
 		"@mui/x-date-pickers": "7.29.0",
 		"@reduxjs/toolkit": "2.7.0",
 		"axios": "^1.7.4",
@@ -29,14 +27,9 @@
 		"flag-icons": "7.3.2",
 		"html2canvas": "^1.4.1",
 		"i18next": "^24.2.2",
-		"immutability-helper": "^3.1.1",
 		"joi": "17.13.3",
-		"jwt-decode": "^4.0.0",
-		"maplibre-gl": "5.3.1",
 		"mui-color-input": "^6.0.0",
 		"react": "18.3.1",
-		"react-dnd": "^16.0.1",
-		"react-dnd-html5-backend": "^16.0.1",
 		"react-dom": "^18.2.0",
 		"react-i18next": "^15.4.0",
 		"react-icons": "5.5.0",
@@ -65,7 +58,7 @@
 		"eslint-plugin-react-hooks": "^5.0.0",
 		"eslint-plugin-react-refresh": "^0.4.6",
 		"prettier": "^3.3.3",
-		"vite": "^5.4.19"
+		"vite": "6.3.5"
 	},
 	"optionalDependencies": {
 		"@rollup/rollup-linux-arm64-musl": "4.41.0"

client/src/App.jsx

@@ -10,6 +10,7 @@ import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Routes } from "./Routes";
 import WalletProvider from "./Components/WalletProvider";
+import AppLayout from "./Components/Layouts/AppLayout";
 
 function App() {
 	const mode = useSelector((state) => state.ui.mode);
@@ -27,17 +28,10 @@ function App() {
 		<ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
 			<WalletProvider>
 				<CssBaseline />
-				<GlobalStyles
-					styles={({ palette }) => {
-						return {
-							body: {
-								backgroundImage: `radial-gradient(circle, ${palette.gradient.color1}, ${palette.gradient.color2}, ${palette.gradient.color3}, ${palette.gradient.color4}, ${palette.gradient.color5})`,
-								color: palette.primary.contrastText,
-							},
-						};
-					}}
-				/>
-				<Routes />
+
+				<AppLayout>
+					<Routes />
+				</AppLayout>
 				<ToastContainer />
 			</WalletProvider>
 		</ThemeProvider>

client/src/Components/ActionsMenu/index.jsx

@@ -1,17 +1,18 @@
+// Components
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import Settings from "../../assets/icons/settings-bold.svg?react";
+import Dialog from "../../Components/Dialog";
+
+// Utils
 import { useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { createToast } from "../../Utils/toastUtils";
-import { logger } from "../../Utils/Logger";
-import { IconButton, Menu, MenuItem } from "@mui/material";
-import {
-	deleteUptimeMonitor,
-	pauseUptimeMonitor,
-} from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import Settings from "../../assets/icons/settings-bold.svg?react";
+
 import PropTypes from "prop-types";
-import Dialog from "../../Components/Dialog";
+import { usePauseMonitor, useDeleteMonitor } from "../../Hooks/monitorHooks";
 
 const ActionsMenu = ({
 	monitor,
@@ -23,38 +24,27 @@ const ActionsMenu = ({
 	const [anchorEl, setAnchorEl] = useState(null);
 	const [actions, setActions] = useState({});
 	const [isOpen, setIsOpen] = useState(false);
-	const dispatch = useDispatch();
 	const theme = useTheme();
-	const { isLoading } = useSelector((state) => state.uptimeMonitors);
+	const [pauseMonitor, isPausing, error] = usePauseMonitor();
+	const [deleteMonitor, isDeleting] = useDeleteMonitor();
 
 	const handleRemove = async (event) => {
 		event.preventDefault();
 		event.stopPropagation();
 		let monitor = { _id: actions.id };
-		const action = await dispatch(deleteUptimeMonitor({ monitor }));
-		if (action.meta.requestStatus === "fulfilled") {
-			setIsOpen(false); // close modal
-			updateRowCallback();
-			createToast({ body: "Monitor deleted successfully." });
-		} else {
-			createToast({ body: "Failed to delete monitor." });
-		}
+		await deleteMonitor({ monitor });
+		updateRowCallback();
 	};
 
 	const handlePause = async () => {
 		try {
 			setIsLoading(true);
-			const action = await dispatch(pauseUptimeMonitor({ monitorId: monitor._id }));
-			if (pauseUptimeMonitor.fulfilled.match(action)) {
-				const state = action?.payload?.data.isActive === false ? "resumed" : "paused";
-				createToast({ body: `Monitor ${state} successfully.` });
-				pauseCallback();
-			} else {
-				throw new Error(action?.error?.message ?? "Failed to pause monitor.");
-			}
+			await pauseMonitor({ monitorId: monitor._id });
+			pauseCallback();
 		} catch (error) {
-			logger.error("Error pausing monitor:", monitor._id, error);
 			createToast({ body: "Failed to pause monitor." });
+		} finally {
+			setIsLoading(false);
 		}
 	};
 
@@ -210,7 +200,7 @@ const ActionsMenu = ({
 					e.stopPropagation();
 					handleRemove(e);
 				}}
-				isLoading={isLoading}
+				isLoading={isDeleting}
 				modelTitle="modal-delete-monitor"
 				modelDescription="delete-monitor-confirmation"
 			/>

client/src/Components/ArrowLeft/index.jsx

@@ -0,0 +1,35 @@
+import LeftArrow from "../../assets/icons/left-arrow.svg?react";
+import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
+import LeftArrowLong from "../../assets/icons/left-arrow-long.svg?react";
+import PropTypes from "prop-types";
+
+const ArrowLeft = ({ type, color = "#667085", ...props }) => {
+	if (type === "double") {
+		return (
+			<LeftArrowDouble
+				style={{ color }}
+				{...props}
+			/>
+		);
+	} else if (type === "long") {
+		return (
+			<LeftArrowLong
+				style={{ color }}
+				{...props}
+			/>
+		);
+	} else {
+		return (
+			<LeftArrow
+				style={{ color }}
+				{...props}
+			/>
+		);
+	}
+};
+
+ArrowLeft.propTypes = {
+	color: PropTypes.string,
+	type: PropTypes.oneOf(["double", "long", "default"]),
+};
+export default ArrowLeft;

client/src/Components/ArrowRight/index.jsx

@@ -0,0 +1,28 @@
+import RightArrow from "../../assets/icons/right-arrow.svg?react";
+import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
+import PropTypes from "prop-types";
+
+const ArrowRight = ({ type, color = "#667085", ...props }) => {
+	if (type === "double") {
+		return (
+			<RightArrowDouble
+				style={{ color }}
+				{...props}
+			/>
+		);
+	} else {
+		return (
+			<RightArrow
+				style={{ color }}
+				{...props}
+			/>
+		);
+	}
+};
+
+ArrowRight.propTypes = {
+	type: PropTypes.oneOf(["double", "default"]),
+	color: PropTypes.string,
+};
+
+export default ArrowRight;

client/src/Components/Avatar/index.jsx

@@ -15,7 +15,7 @@ import { useTheme } from "@emotion/react";
  * <Avatar src="assets/img" first="Alex" last="Holliday" small />
  */
 
-const Avatar = ({ src, small, sx }) => {
+const Avatar = ({ src, small, sx, onClick = () => {} }) => {
 	const { user } = useSelector((state) => state.auth);
 	const theme = useTheme();
 
@@ -31,6 +31,7 @@ const Avatar = ({ src, small, sx }) => {
 
 	return (
 		<MuiAvatar
+			onClick={onClick}
 			alt={`${user?.firstName} ${user?.lastName}`}
 			/* TODO What is the  /static/images/avatar/2.jpg ?*/
 			src={src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg"}
@@ -66,6 +67,7 @@ Avatar.propTypes = {
 	src: PropTypes.string,
 	small: PropTypes.bool,
 	sx: PropTypes.object,
+	onClick: PropTypes.func,
 };
 
 export default Avatar;

client/src/Components/Breadcrumbs/index.jsx

@@ -1,9 +1,8 @@
 import PropTypes from "prop-types";
 import { Box, Breadcrumbs as MUIBreadcrumbs } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import { useNavigate } from "react-router";
-import ArrowRight from "../../assets/icons/right-arrow.svg?react";
-
+import { useNavigate } from "react-router-dom";
+import ArrowRight from "../ArrowRight";
 import "./index.css";
 
 /**

client/src/Components/Charts/ChartBox/index.jsx

@@ -43,7 +43,6 @@ const ChartBox = ({
 		>
 			<Stack
 				flex={1}
-				alignItems="center"
 				sx={{
 					padding: theme.spacing(8),
 					justifyContent,

client/src/Components/Charts/CustomGauge/index.jsx

@@ -1,8 +1,10 @@
 import { useTheme } from "@emotion/react";
 import { useEffect, useState, useMemo } from "react";
+import Stack from "@mui/material/Stack";
 import { Box, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import "./index.css";
+import CircularProgress from "@mui/material/CircularProgress";
 
 const MINIMUM_VALUE = 0;
 const MAXIMUM_VALUE = 100;
@@ -15,19 +17,26 @@ const MAXIMUM_VALUE = 100;
  * @param {number} [props.progress=0] - Progress percentage (0-100)
  * @param {number} [props.radius=60] - Radius of the gauge circle
  * @param {number} [props.strokeWidth=15] - Width of the gauge stroke
- * @param {number} [props.threshold=50] - Threshold for color change
+ * @param {number} [props.precision=1] - Precision of the progress percentage
+ * @param {string} [props.unit="%"] - Unit of progress
  *
  * @example
  * <CustomGauge
  *   progress={75}
  *   radius={50}
  *   strokeWidth={10}
- * 	 threshold={50}
  * />
  *
  * @returns {React.ReactElement} Rendered CustomGauge component
  */
-const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold = 50 }) => {
+const CustomGauge = ({
+	isLoading = false,
+	progress = 0,
+	radius = 70,
+	strokeWidth = 15,
+	precision = 1,
+	unit = "%",
+}) => {
 	const theme = useTheme();
 	// Calculate the length of the stroke for the circle
 	const { circumference, totalSize, strokeLength } = useMemo(
@@ -52,10 +61,28 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 
 	const progressWithinRange = Math.max(MINIMUM_VALUE, Math.min(progress, MAXIMUM_VALUE));
 
-	const fillColor =
-		progressWithinRange > threshold
-			? theme.palette.error.lowContrast // CAIO_REVIEW
-			: theme.palette.accent.main; // CAIO_REVIEW
+	let fillColor;
+	if (progressWithinRange < 50) {
+		fillColor = theme.palette.success.main;
+	} else if (progressWithinRange < 80) {
+		fillColor = theme.palette.warning.lowContrast;
+	} else {
+		fillColor = theme.palette.error.lowContrast;
+	}
+
+	if (isLoading) {
+		return (
+			<Stack
+				className="radial-chart"
+				width={radius}
+				height={radius}
+				alignItems="center"
+				justifyContent="center"
+			>
+				<CircularProgress color="accent" />
+			</Stack>
+		);
+	}
 
 	return (
 		<Box
@@ -71,7 +98,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 			>
 				<circle
 					className="radial-chart-base"
-					stroke={theme.palette.secondary.light} // CAIO_REVIEW
+					stroke={theme.palette.secondary.light}
 					strokeWidth={strokeWidth}
 					fill="none"
 					cx={totalSize / 2} // Center the circle
@@ -103,7 +130,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 					fill: theme.typography.h2.color,
 				}}
 			>
-				{`${progressWithinRange.toFixed(1)}%`}
+				{`${progressWithinRange.toFixed(precision)}${unit}`}
 			</Typography>
 		</Box>
 	);
@@ -112,8 +139,10 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 export default CustomGauge;
 
 CustomGauge.propTypes = {
+	isLoading: PropTypes.bool,
 	progress: PropTypes.number,
 	radius: PropTypes.number,
 	strokeWidth: PropTypes.number,
-	threshold: PropTypes.number,
+	precision: PropTypes.number,
+	unit: PropTypes.string,
 };

client/src/Components/Charts/Utils/chartUtils.jsx

@@ -88,7 +88,51 @@ PercentTick.propTypes = {
  */
 const getFormattedPercentage = (value) => {
 	if (typeof value !== "number") return value;
-	return `${(value * 100).toFixed(2)}.%`;
+	return `${(value * 100).toFixed(2)}%`;
+};
+
+/**
+ * Custom tick component for rendering network bytes per second.
+ *
+ * @param {Object} props - The properties object.
+ * @param {number} props.x - The x-coordinate for the tick.
+ * @param {number} props.y - The y-coordinate for the tick.
+ * @param {Object} props.payload - The payload object containing tick data.
+ * @param {number} props.index - The index of the tick.
+ * @returns {JSX.Element|null} The rendered tick component or null for the first tick.
+ */
+export const NetworkTick = ({ x, y, payload, index, formatter }) => {
+	const theme = useTheme();
+	if (index === 0) return null;
+
+	if (formatter === undefined) {
+		formatter = (value, space = false) => {
+			if (typeof value !== "number") return value;
+			// need to add space between value and unit
+			return `${(value / 1024).toFixed(1)}${space ? " " : ""}Kbps`;
+		};
+	}
+
+	return (
+		<Text
+			x={x - 20}
+			y={y}
+			textAnchor="middle"
+			fill={theme.palette.primary.contrastTextTertiary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{formatter(payload?.value, true)}
+		</Text>
+	);
+};
+
+NetworkTick.propTypes = {
+	x: PropTypes.number,
+	y: PropTypes.number,
+	payload: PropTypes.object,
+	index: PropTypes.number,
+	formatter: PropTypes.func,
 };
 
 /**
@@ -112,6 +156,7 @@ export const InfrastructureTooltip = ({
 	yLabel,
 	dotColor,
 	dateRange,
+	formatter = getFormattedPercentage,
 }) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 	const theme = useTheme();
@@ -166,8 +211,8 @@ export const InfrastructureTooltip = ({
 							sx={{ opacity: 0.8 }}
 						>
 							{yIdx >= 0
-								? `${yLabel} ${getFormattedPercentage(payload[0].payload[hardwareType][yIdx][metric])}`
-								: `${yLabel} ${getFormattedPercentage(payload[0].payload[yKey])}`}
+								? `${yLabel} ${formatter(payload[0].payload[hardwareType][yIdx][metric])}`
+								: `${yLabel} ${formatter(payload[0].payload[yKey])}`}
 						</Typography>
 					</Stack>
 				</Box>

client/src/Components/Check/Check.jsx

@@ -51,9 +51,10 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 				sx={{
 					color:
 						variant === "info"
-							? theme.palette.primary.contrastTextTertiary
+							? theme.palette.primary.contrastTextSecondary
 							: colors[variant],
-					opacity: 0.8,
+					opacity: 0.9,
+					fontWeight: 450,
 				}}
 			>
 				{noHighlightText && <Typography component="span">{noHighlightText}</Typography>}{" "}

client/src/Components/Common/AppBar.jsx

@@ -47,9 +47,6 @@ const AppAppBar = () => {
 	const location = useLocation();
 	const navigate = useNavigate();
 
-	// Debugging: Log the current theme mode
-	console.log("Current theme mode:", mode);
-
 	const logoSrc =
 		mode === "light" ? "/images/prism-black.png" : "/images/prism-white.png";
 

client/src/Components/ConfigBox/index.jsx

@@ -4,15 +4,14 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
 	display: "flex",
 	flexDirection: "row",
 	justifyContent: "space-between",
-	gap: theme.spacing(20),
 	backgroundColor: theme.palette.primary.main,
 	border: 1,
 	borderStyle: "solid",
 	borderColor: theme.palette.primary.lowContrast,
 	borderRadius: theme.spacing(2),
 	"& > *": {
-		paddingTop: theme.spacing(12),
-		paddingBottom: theme.spacing(18),
+		paddingTop: theme.spacing(15),
+		paddingBottom: theme.spacing(15),
 	},
 	"& > div:first-of-type": {
 		flex: 0.7,
@@ -21,11 +20,16 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
 		borderRightColor: theme.palette.primary.lowContrast,
 		paddingRight: theme.spacing(15),
 		paddingLeft: theme.spacing(15),
+		backgroundColor: theme.palette.tertiary.background,
+		"& :is(h1, h2):first-of-type": {
+			fontWeight: 600,
+			marginBottom: theme.spacing(4),
+		},
 	},
 	"& > div:last-of-type": {
 		flex: 1,
 		paddingRight: theme.spacing(20),
-		paddingLeft: theme.spacing(18),
+		paddingLeft: theme.spacing(20),
 	},
 	"& h1, & h2": {
 		color: theme.palette.primary.contrastTextSecondary,

client/src/Components/Dialog/index.jsx

@@ -57,7 +57,7 @@ Dialog.propTypes = {
 	onCancel: PropTypes.func.isRequired,
 	confirmationButtonLabel: PropTypes.string.isRequired,
 	onConfirm: PropTypes.func.isRequired,
-	isLoading: PropTypes.bool.isRequired,
+	isLoading: PropTypes.bool,
 };
 
 export default Dialog;

client/src/Components/Fallback/FallBackActionButtons.jsx

@@ -0,0 +1,44 @@
+import { Button, Stack } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+
+const FallbackActionButtons = ({ link, type }) => {
+	const theme = useTheme();
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+
+	return (
+		<Stack
+			gap={theme.spacing(10)}
+			alignItems="center"
+		>
+			<Button
+				variant="contained"
+				color="accent"
+				sx={{ fontWeight: 700 }}
+				onClick={() => navigate(link)}
+			>
+				{t(`${type}.fallback.actionButton`)}
+			</Button>
+			{type === "uptimeMonitor" && (
+				<Button
+					variant="contained"
+					color="accent"
+					sx={{ alignSelf: "center" }}
+					onClick={() => navigate("/uptime/bulk-import")}
+				>
+					{t("bulkImport.fallbackPage")}
+				</Button>
+			)}
+		</Stack>
+	);
+};
+FallbackActionButtons.propTypes = {
+	title: PropTypes.string.isRequired,
+	link: PropTypes.string.isRequired,
+	type: PropTypes.string.isRequired,
+};
+
+export default FallbackActionButtons;

client/src/Components/Fallback/FallbackBackground.jsx

@@ -0,0 +1,40 @@
+import { useTheme } from "@emotion/react";
+import Box from "@mui/material/Box";
+import Background from "../../assets/Images/background-grid.svg?react";
+import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
+import OutputAnimation from "../../assets/Animations/output.gif";
+import DarkmodeOutput from "../../assets/Animations/darkmodeOutput.gif";
+import { useSelector } from "react-redux";
+const FallbackBackground = () => {
+	const theme = useTheme();
+	const mode = useSelector((state) => state.ui.mode);
+	return (
+		<>
+			<Box
+				component="img"
+				src={mode === "light" ? OutputAnimation : DarkmodeOutput}
+				Background="transparent"
+				alt="Loading animation"
+				sx={{
+					zIndex: 1,
+					border: "none",
+					borderRadius: theme.spacing(8),
+					width: "100%",
+					transform: "scale(0.6667)",
+				}}
+			/>
+			<Box
+				className="background-pattern-svg"
+				sx={{
+					"& svg g g:last-of-type path": {
+						stroke: theme.palette.primary.lowContrast,
+					},
+				}}
+			>
+				<Background style={{ width: "100%" }} />
+			</Box>
+		</>
+	);
+};
+
+export default FallbackBackground;

client/src/Components/Fallback/FallbackCheckList.jsx

@@ -0,0 +1,35 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Check from "../Check/Check";
+const FallbackCheckList = ({ checks, type }) => {
+	const theme = useTheme();
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				flexWrap: "wrap",
+				gap: theme.spacing(2),
+				alignItems: "flex-start",
+				maxWidth: { xs: "90%", md: "80%", lg: "75%" },
+			}}
+		>
+			{checks?.map((check, index) => (
+				<Check
+					text={check}
+					key={`${type.trim().split(" ")[0]}-${index}`}
+					outlined={true}
+				/>
+			))}
+		</Box>
+	);
+};
+
+FallbackCheckList.propTypes = {
+	checks: PropTypes.arrayOf(PropTypes.string).isRequired,
+	title: PropTypes.string.isRequired,
+	type: PropTypes.string.isRequired,
+};
+
+export default FallbackCheckList;

client/src/Components/Fallback/FallbackContainer.jsx

@@ -0,0 +1,44 @@
+import { useTheme } from "@emotion/react";
+import { Box, Stack } from "@mui/material";
+import PropTypes from "prop-types";
+
+const FallbackContainer = ({ children, type }) => {
+	const theme = useTheme();
+	return (
+		<Box
+			border={1}
+			borderColor={theme.palette.tertiary.border}
+			borderRadius={theme.shape.borderRadius}
+			backgroundColor={theme.palette.tertiary.background}
+			overflow="hidden"
+			sx={{
+				display: "flex",
+				borderStyle: "dashed",
+				height: "fit-content",
+				minHeight: "60vh",
+				width: {
+					sm: "90%",
+					md: "70%",
+					lg: "50%",
+					xl: "40%",
+				},
+				padding: `${theme.spacing(20)} ${theme.spacing(10)}`,
+			}}
+		>
+			<Stack
+				className={`fallback__${type?.trim().split(" ")[0]}`}
+				alignItems="center"
+				gap={theme.spacing(20)}
+			>
+				{children}
+			</Stack>
+		</Box>
+	);
+};
+
+FallbackContainer.propTypes = {
+	children: PropTypes.node,
+	type: PropTypes.string,
+};
+
+export default FallbackContainer;

client/src/Components/Fallback/FallbackPageSpeedWarning.jsx

@@ -0,0 +1,69 @@
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import Link from "@mui/material/Link";
+import { Link as RouterLink } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import Alert from "../Alert";
+import PropTypes from "prop-types";
+
+const renderWarningMessage = (t) => {
+	return (
+		<>
+			{t("pageSpeedWarning")}{" "}
+			<Link
+				component={RouterLink}
+				to="/settings"
+				sx={{
+					textDecoration: "underline",
+					color: "inherit",
+					fontWeight: "inherit",
+					"&:hover": {
+						textDecoration: "underline",
+					},
+				}}
+			>
+				{t("pageSpeedLearnMoreLink")}
+			</Link>{" "}
+			{t("pageSpeedAddApiKey")}
+		</>
+	);
+};
+
+const FallbackPageSpeedWarning = ({ settingsData }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<Box sx={{ width: "80%", maxWidth: "600px", zIndex: 1 }}>
+			<Box
+				sx={{
+					"& .alert.row-stack": {
+						backgroundColor: theme.palette.warningSecondary.main,
+						borderColor: theme.palette.warningSecondary.lowContrast,
+						"& .MuiTypography-root": {
+							color: theme.palette.warningSecondary.contrastText,
+						},
+						"& .MuiBox-root > svg": {
+							color: theme.palette.warningSecondary.contrastText,
+						},
+					},
+				}}
+			>
+				{settingsData?.pagespeedKeySet === false && (
+					<Alert
+						variant="warning"
+						hasIcon={true}
+						body={renderWarningMessage(t)}
+					/>
+				)}
+			</Box>
+		</Box>
+	);
+};
+
+FallbackPageSpeedWarning.propTypes = {
+	settingsData: PropTypes.shape({
+		pagespeedKeySet: PropTypes.bool,
+	}),
+};
+
+export default FallbackPageSpeedWarning;

client/src/Components/Fallback/FallbackTitle.jsx

@@ -0,0 +1,21 @@
+import { useTheme } from "@mui/material/styles";
+import { Typography } from "@mui/material";
+import PropTypes from "prop-types";
+
+const FallbackTitle = ({ title }) => {
+	const theme = useTheme();
+	return (
+		<Typography
+			alignSelf="center"
+			component="h1"
+			marginY={theme.spacing(4)}
+			color={theme.palette.primary.contrastText}
+		>
+			{title}
+		</Typography>
+	);
+};
+FallbackTitle.propTypes = {
+	title: PropTypes.string.isRequired,
+};
+export default FallbackTitle;

client/src/Components/Fallback/index.css

@@ -1,19 +1,22 @@
 [class*="fallback__"] {
 	width: fit-content;
 	margin: auto;
-	margin-top: 100px;
 }
+
 [class*="fallback__"] h1.MuiTypography-root {
 	font-size: var(--env-var-font-size-large);
 	font-weight: 600;
 }
+
 [class*="fallback__"] button.MuiButtonBase-root,
 [class*="fallback__"] .check {
 	width: max-content;
 }
+
 [class*="fallback__"] button.MuiButtonBase-root {
 	min-height: 34px;
 }
+
 [class*="fallback__"] .check span.MuiTypography-root,
 [class*="fallback__"] button.MuiButtonBase-root {
 	font-size: var(--env-var-font-size-medium);
@@ -35,6 +38,3 @@
 	background-size: cover;
 	background-repeat: no-repeat;
 }
-.fallback__status > .MuiStack-root {
-	margin-left: var(--env-var-spacing-2);
-}

client/src/Components/Fallback/index.jsx

@@ -1,186 +1,75 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import { Box, Button, Stack, Typography, Link } from "@mui/material";
-import { Link as RouterLink } from "react-router-dom";
-import Skeleton from "../../assets/Images/create-placeholder.svg?react";
-import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
-import Background from "../../assets/Images/background-grid.svg?react";
-import Check from "../Check/Check";
-import { useNavigate } from "react-router-dom";
-import { useSelector } from "react-redux";
-import Alert from "../Alert";
-import { useTranslation } from "react-i18next";
+import { Box, Stack } from "@mui/material";
 import "./index.css";
-import { useFetchSettings } from "../../Hooks/useFetchSettings";
-import { useState } from "react";
+import FallbackTitle from "./FallbackTitle";
+import FallbackCheckList from "./FallbackCheckList";
+import FallbackActionButtons from "./FallBackActionButtons";
+import FallbackBackground from "./FallbackBackground";
+import FallbackContainer from "./FallbackContainer";
 /**
  * Fallback component to display a fallback UI with a title, a list of checks, and a navigation button.
  *
  * @param {Object} props - The component props.
  * @param {string} props.title - The title to be displayed in the fallback UI.
+ * @param {string} props.type - The type of the fallback (e.g., "pageSpeed", "notifications").
  * @param {Array<string>} props.checks - An array of strings representing the checks to display.
  * @param {string} [props.link="/"] - The link to navigate to.
- * @param {boolean} [props.vowelStart=false] - Whether the title starts with a vowel.
  * @param {boolean} [props.showPageSpeedWarning=false] - Whether to show the PageSpeed API warning.
  * @returns {JSX.Element} The rendered fallback UI.
  */
 
-const Fallback = ({
-	title,
-	checks,
-	link = "/",
-	isAdmin,
-	vowelStart = false,
-	showPageSpeedWarning = false,
-}) => {
+const Fallback = ({ title, checks, link = "/", isAdmin, type, children }) => {
 	const theme = useTheme();
-	const navigate = useNavigate();
-	const mode = useSelector((state) => state.ui.mode);
-	const { t } = useTranslation();
-	const [settingsData, setSettingsData] = useState(undefined);
-
-	const [isLoading, error] = useFetchSettings({ setSettingsData });
-	// Custom warning message with clickable link
-	const renderWarningMessage = () => {
-		return (
-			<>
-				{t("pageSpeedWarning")}{" "}
-				<Link
-					component={RouterLink}
-					to="/settings"
-					sx={{
-						textDecoration: "underline",
-						color: "inherit",
-						fontWeight: "inherit",
-						"&:hover": {
-							textDecoration: "underline",
-						},
-					}}
-				>
-					{t("pageSpeedLearnMoreLink")}
-				</Link>{" "}
-				{t("pageSpeedAddApiKey")}
-			</>
-		);
-	};
-
 	return (
 		<Box
 			position="relative"
-			border={1}
-			borderColor={theme.palette.primary.lowContrast}
-			borderRadius={theme.shape.borderRadius}
-			backgroundColor={theme.palette.primary.main}
-			overflow="hidden"
 			sx={{
-				borderStyle: "dashed",
-				minHeight: "calc(100vh - var(--env-var-spacing-2) * 2)",
+				height: "100%",
+				width: "100%",
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
 			}}
 		>
-			<Stack
-				className={`fallback__${title?.trim().split(" ")[0]}`}
-				alignItems="center"
-				gap={theme.spacing(20)}
-			>
-				{mode === "light" ? (
-					<Skeleton style={{ zIndex: 1 }} />
-				) : (
-					<SkeletonDark style={{ zIndex: 1 }} />
-				)}
-				<Box
-					className="background-pattern-svg"
-					sx={{
-						"& svg g g:last-of-type path": {
-							stroke: theme.palette.primary.lowContrast,
-						},
-					}}
-				>
-					<Background style={{ width: "100%" }} />
-				</Box>
+			<FallbackContainer type={type}>
+				<FallbackBackground />
 				<Stack
-					gap={theme.spacing(4)}
-					maxWidth={"300px"}
+					gap={theme.spacing(5)}
 					zIndex={1}
+					alignItems="center"
 				>
-					<Typography
-						component="h1"
-						marginY={theme.spacing(4)}
-						color={theme.palette.primary.contrastTextTertiary}
-					>
-						{vowelStart ? "An" : "A"} {title} is used to:
-					</Typography>
-					{checks?.map((check, index) => (
-						<Check
-							text={check}
-							key={`${title.trim().split(" ")[0]}-${index}`}
-							outlined={true}
-						/>
-					))}
+					<FallbackTitle title={title} />
+					<FallbackCheckList
+						checks={checks}
+						title={title}
+						type={type}
+					/>
 				</Stack>
-				{/* TODO - display a different fallback if user is not an admin*/}
 				{isAdmin && (
-					<>
-						<Button
-							variant="contained"
-							color="accent"
-							sx={{ alignSelf: "center" }}
-							onClick={() => navigate(link)}
-						>
-							Let's create your first {title}
-						</Button>
-						{/* Bulk create of uptime monitors */}
-						{title === "uptime monitor" && (
-							<Button
-								variant="contained"
-								color="accent"
-								sx={{ alignSelf: "center" }}
-								onClick={() => navigate("/uptime/bulk-import")}
-							>
-								{t("bulkImport.fallbackPage")}
-							</Button>
-						)}
-
-						{/* Warning box for PageSpeed monitor */}
-						{title === "pagespeed monitor" && showPageSpeedWarning && (
-							<Box sx={{ width: "80%", maxWidth: "600px", zIndex: 1 }}>
-								<Box
-									sx={{
-										"& .alert.row-stack": {
-											backgroundColor: theme.palette.warningSecondary.main,
-											borderColor: theme.palette.warningSecondary.lowContrast,
-											"& .MuiTypography-root": {
-												color: theme.palette.warningSecondary.contrastText,
-											},
-											"& .MuiBox-root > svg": {
-												color: theme.palette.warningSecondary.contrastText,
-											},
-										},
-									}}
-								>
-									{settingsData?.pagespeedKeySet === false && (
-										<Alert
-											variant="warning"
-											hasIcon={true}
-											body={renderWarningMessage()}
-										/>
-									)}
-								</Box>
-							</Box>
-						)}
-					</>
+					<Stack
+						gap={theme.spacing(10)}
+						alignItems="center"
+					>
+						<FallbackActionButtons
+							title={title}
+							link={link}
+							type={type}
+						/>
+						{children}
+					</Stack>
 				)}
-			</Stack>
+			</FallbackContainer>
 		</Box>
 	);
 };
-
 Fallback.propTypes = {
 	title: PropTypes.string.isRequired,
 	checks: PropTypes.arrayOf(PropTypes.string).isRequired,
 	link: PropTypes.string,
 	isAdmin: PropTypes.bool,
-	vowelStart: PropTypes.bool,
 	showPageSpeedWarning: PropTypes.bool,
+	type: PropTypes.string.isRequired,
+	children: PropTypes.node,
 };
-
 export default Fallback;

client/src/Components/GenericFallback/NetworkError.jsx

@@ -1,8 +1,11 @@
 import { Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
 
 const NetworkError = () => {
 	const theme = useTheme();
+	const { t } = useTranslation();
+
 	return (
 		<>
 			<Typography
@@ -10,9 +13,9 @@ const NetworkError = () => {
 				marginY={theme.spacing(4)}
 				color={theme.palette.primary.contrastTextTertiary}
 			>
-				Network error
+				{t("common.toasts.networkError")}
 			</Typography>
-			<Typography>Please check your connection</Typography>
+			<Typography>{t("common.toasts.checkConnection")}</Typography>
 		</>
 	);
 };

client/src/Components/GenericFallback/index.jsx

@@ -1,7 +1,7 @@
 import { useTheme } from "@emotion/react";
 import { Box, Stack } from "@mui/material";
-import Skeleton from "../../assets/Images/create-placeholder.svg?react";
-import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
+import OutputAnimation from "../../assets/Animations/output.gif";
+import DarkmodeOutput from "../../assets/Animations/darkmodeOutput.gif";
 import Background from "../../assets/Images/background-grid.svg?react";
 import { useSelector } from "react-redux";
 
@@ -37,11 +37,18 @@ const GenericFallback = ({ children }) => {
 					marginTop: "100px",
 				}}
 			>
-				{mode === "light" ? (
-					<Skeleton style={{ zIndex: 1 }} />
-				) : (
-					<SkeletonDark style={{ zIndex: 1 }} />
-				)}
+				<Box
+					component="img"
+					src={mode === "light" ? OutputAnimation : DarkmodeOutput}
+					Background="transparent"
+					alt="Loading animation"
+					sx={{
+						zIndex: 1,
+						border: "none",
+						borderRadius: theme.spacing(8),
+						width: "100%",
+					}}
+				/>
 				<Box
 					sx={{
 						"& svg g g:last-of-type path": {

client/src/Components/HOC/withAdminCheck.jsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { logger } from "../../Utils/Logger";
@@ -7,23 +7,35 @@ import { networkService } from "../../main";
 const withAdminCheck = (WrappedComponent) => {
 	const WithAdminCheck = (props) => {
 		const navigate = useNavigate();
+		const [isChecking, setIsChecking] = useState(true);
+		const [superAdminExists, setSuperAdminExists] = useState(false);
 
 		useEffect(() => {
 			networkService
 				.doesSuperAdminExist()
 				.then((response) => {
-					if (response.data.data === true) {
+					if (response?.data?.data === true) {
 						navigate("/login");
+					} else {
+						setSuperAdminExists(false);
 					}
 				})
 				.catch((error) => {
 					logger.error(error);
+				})
+				.finally(() => {
+					setIsChecking(false);
 				});
 		}, [navigate]);
+
+		if (isChecking) {
+			return null;
+		}
+
 		return (
 			<WrappedComponent
 				{...props}
-				isSuperAdmin={true}
+				superAdminExists={superAdminExists}
 			/>
 		);
 	};

client/src/Components/I18nLoader/index.jsx

@@ -0,0 +1,16 @@
+import i18n from "../../Utils/i18n";
+import { useSelector } from "react-redux";
+import { useEffect } from "react";
+const I18nLoader = () => {
+	const language = useSelector((state) => state.ui.language);
+
+	useEffect(() => {
+		if (language && i18n.language !== language) {
+			i18n.changeLanguage(language);
+		}
+	}, [language]);
+
+	return null;
+};
+
+export default I18nLoader;

client/src/Components/Inputs/Checkbox/index.jsx

@@ -105,7 +105,7 @@ const Checkbox = ({
 };
 
 Checkbox.propTypes = {
-	id: PropTypes.string.isRequired,
+	id: PropTypes.string,
 	name: PropTypes.string,
 	label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
 	size: PropTypes.oneOf(["small", "medium", "large"]),

client/src/Components/Inputs/FieldWrapper/index.jsx

@@ -0,0 +1,51 @@
+import { Stack, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+
+const DEFAULT_GAP = 6;
+const FieldWrapper = ({
+	label,
+	children,
+	gap,
+	labelMb,
+	labelFontWeight = 500,
+	labelVariant = "h3",
+	labelSx = {},
+	sx = {},
+}) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			gap={gap ?? theme.spacing(DEFAULT_GAP)}
+			sx={sx}
+		>
+			{label && (
+				<Typography
+					component={labelVariant}
+					color={theme.palette.primary.contrastTextSecondary}
+					fontWeight={labelFontWeight}
+					sx={{
+						...(labelMb !== undefined && { mb: theme.spacing(labelMb) }),
+						...labelSx,
+					}}
+				>
+					{label}
+				</Typography>
+			)}
+			{children}
+		</Stack>
+	);
+};
+
+FieldWrapper.propTypes = {
+	label: PropTypes.node,
+	children: PropTypes.node.isRequired,
+	gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
+	labelMb: PropTypes.number,
+	labelFontWeight: PropTypes.number,
+	labelVariant: PropTypes.string,
+	labelSx: PropTypes.object,
+	sx: PropTypes.object,
+};
+
+export default FieldWrapper;

client/src/Components/Inputs/Radio/index.jsx

@@ -16,26 +16,37 @@ import "./index.css";
  *   size="small"
  * />
  *
- * @param {Object} props - The component props.
- * @param {string} props.id - The id of the radio button.
- * @param {string} props.title - The title of the radio button.
- * @param {string} [props.desc] - The description of the radio button.
- * @param {string} [props.size="small"] - The size of the radio button.
+ * @param {Object} props - The component
+ * @param {string} id - The id of the radio button.
+ * @param {string} title - The title of the radio button.
+ * @param {string} [desc] - The description of the radio button.
+ * @param {string} [size="small"] - The size of the radio button.
  * @returns {JSX.Element} - The rendered Radio component.
  */
 
-const Radio = (props) => {
+const Radio = ({
+	name,
+	checked,
+	value,
+	id,
+	size,
+	title,
+	desc,
+	onChange,
+	labelSpacing,
+}) => {
 	const theme = useTheme();
 
 	return (
 		<FormControlLabel
 			className="custom-radio-button"
-			checked={props.checked}
-			value={props.value}
+			name={name}
+			checked={checked}
+			value={value}
 			control={
 				<MUIRadio
-					id={props.id}
-					size={props.size}
+					id={id}
+					size={size}
 					checkedIcon={<RadioChecked />}
 					sx={{
 						color: "transparent",
@@ -49,16 +60,23 @@ const Radio = (props) => {
 					}}
 				/>
 			}
-			onChange={props.onChange}
+			onChange={onChange}
 			label={
 				<>
-					<Typography component="p">{props.title}</Typography>
+					<Typography
+						component="p"
+						mb={
+							labelSpacing !== undefined ? theme.spacing(labelSpacing) : theme.spacing(2)
+						}
+					>
+						{title}
+					</Typography>
 					<Typography
 						component="h6"
 						mt={theme.spacing(1)}
 						color={theme.palette.primary.contrastTextSecondary}
 					>
-						{props.desc}
+						{desc}
 					</Typography>
 				</>
 			}
@@ -81,9 +99,14 @@ const Radio = (props) => {
 };
 
 Radio.propTypes = {
-	title: PropTypes.string.isRequired,
+	title: PropTypes.string,
 	desc: PropTypes.string,
 	size: PropTypes.string,
+	name: PropTypes.string,
+	checked: PropTypes.bool,
+	value: PropTypes.string,
+	id: PropTypes.string,
+	onChange: PropTypes.func,
 };
 
 export default Radio;

client/src/Components/Inputs/Search/index.jsx

@@ -1,7 +1,17 @@
 import PropTypes from "prop-types";
-import { Box, ListItem, Autocomplete, TextField, Stack, Typography } from "@mui/material";
+import {
+	Box,
+	ListItem,
+	Autocomplete,
+	TextField,
+	Typography,
+	Checkbox,
+} from "@mui/material";
 import { useTheme } from "@emotion/react";
 import SearchIcon from "../../../assets/icons/search.svg?react";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import FieldWrapper from "../FieldWrapper";
 
 /**
  * Search component using Material UI's Autocomplete.
@@ -14,6 +24,7 @@ import SearchIcon from "../../../assets/icons/search.svg?react";
  * @param {Function} props.handleChange - Function to call when the input changes
  * @param {Function} Prop.onBlur - Function to call when the input is blured
  * @param {Object} props.sx - Additional styles to apply to the component
+ * @param {string} props.unit - Label to identify type of options
  * @returns {JSX.Element} The rendered Search component
  */
 
@@ -21,7 +32,6 @@ const SearchAdornment = () => {
 	const theme = useTheme();
 	return (
 		<Box
-			mr={theme.spacing(4)}
 			height={16}
 			sx={{
 				"& svg": {
@@ -39,7 +49,7 @@ const SearchAdornment = () => {
 	);
 };
 
-//TODO keep search state inside of component
+//TODO keep search state inside of component.
 const Search = ({
 	label,
 	id,
@@ -58,38 +68,96 @@ const Search = ({
 	startAdornment,
 	endAdornment,
 	onBlur,
+	//FieldWrapper's props
+	gap,
+	labelMb,
+	labelFontWeight,
+	labelVariant,
+	labelSx = {},
+	unit = "option",
+	maxWidth = "100%",
 }) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
+	const [selectAll, setSelectAll] = React.useState(false);
+
+	const [open, setOpen] = React.useState(false);
+	const enhancedOptions = React.useMemo(() => {
+		return multiple && isAdorned
+			? [
+					{ [filteredBy]: t("selectAll"), isSelectAll: true, _id: "select_all" },
+					...options,
+				]
+			: options;
+	}, [multiple, isAdorned, options, filteredBy]);
+	const isOptionSelected = (option) => {
+		if (!multiple && !isAdorned) return false;
+		if (Array.isArray(value)) {
+			return value.some((item) => item._id === option._id);
+		}
+		return false;
+	};
+	const handleSelectAll = (isSelectAll) => {
+		const newValue = isSelectAll ? [...options] : [];
+		handleChange(newValue);
+		setSelectAll(isSelectAll);
+	};
+	useEffect(() => {
+		const allSelected =
+			Array.isArray(value) && Array.isArray(options) && value.length === options.length;
+		if (selectAll !== allSelected) setSelectAll(allSelected);
+	}, [value, options]);
 	return (
 		<Autocomplete
 			onBlur={onBlur}
 			multiple={multiple}
 			id={id}
 			value={value}
+			open={open}
+			onOpen={() => setOpen(true)}
+			onClose={(event, reason) => {
+				if (reason === "blur" || reason === "escape") {
+					setOpen(false);
+				}
+			}}
 			inputValue={inputValue}
 			onInputChange={(_, newValue) => {
 				handleInputChange(newValue);
 			}}
 			onChange={(_, newValue) => {
-				handleChange(newValue);
+				if (multiple && isAdorned) {
+					const hasSelectAllSelected =
+						Array.isArray(newValue) && newValue.some((item) => item.isSelectAll);
+					if (hasSelectAllSelected) {
+						handleSelectAll(!selectAll);
+					} else {
+						handleChange(newValue);
+						setSelectAll(Array.isArray(newValue) && newValue.length === options.length);
+					}
+				} else {
+					handleChange(newValue);
+					setOpen(false);
+				}
 			}}
 			fullWidth
 			freeSolo
 			disabled={disabled}
 			disableClearable
-			options={options}
+			options={enhancedOptions}
 			getOptionLabel={(option) => option[filteredBy]}
 			isOptionEqualToValue={(option, value) => option._id === value._id} // Compare by unique identifier
 			renderInput={(params) => (
-				<Stack>
-					<Typography
-						component="h3"
-						fontSize={"var(--env-var-font-size-medium)"}
-						color={theme.palette.primary.contrastTextSecondary}
-						fontWeight={500}
-					>
-						{label}
-					</Typography>
+				<FieldWrapper
+					label={label}
+					labelMb={labelMb}
+					labelVariant={labelVariant}
+					labelFontWeight={labelFontWeight}
+					labelSx={labelSx}
+					gap={gap}
+					sx={{
+						...sx,
+					}}
+				>
 					<TextField
 						{...params}
 						error={Boolean(error)}
@@ -102,27 +170,7 @@ const Search = ({
 								...(endAdornment && { endAdornment: endAdornment }),
 							},
 						}}
-						sx={{
-							"& fieldset": {
-								borderColor: theme.palette.primary.lowContrast,
-								borderRadius: theme.shape.borderRadius,
-							},
-							"& .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus)) fieldset":
-								{
-									borderColor: theme.palette.primary.lowContrast,
-								},
-							"& .MuiOutlinedInput-root": {
-								paddingY: 0,
-							},
-							"& .MuiAutocomplete-tag": {
-								// CAIO_REVIEW
-								color: theme.palette.primary.contrastText,
-								backgroundColor: theme.palette.primary.lowContrast,
-							},
-							"& .MuiChip-deleteIcon": {
-								color: theme.palette.primary.contrastText, // CAIO_REVIEW
-							},
-						}}
+						sx={{}}
 					/>
 					{error && (
 						<Typography
@@ -137,15 +185,23 @@ const Search = ({
 							{error}
 						</Typography>
 					)}
-				</Stack>
+				</FieldWrapper>
 			)}
 			filterOptions={(options, { inputValue }) => {
+				if (inputValue.trim() === "" && multiple && isAdorned) {
+					return enhancedOptions;
+				}
 				const filtered = options.filter((option) =>
 					option[filteredBy].toLowerCase().includes(inputValue.toLowerCase())
 				);
 
 				if (filtered.length === 0) {
-					return [{ [filteredBy]: "No monitors found", noOptions: true }];
+					return [
+						{
+							[filteredBy]: t("general.noOptionsFound", { unit: unit }),
+							noOptions: true,
+						},
+					];
 				}
 				return filtered;
 			}}
@@ -156,6 +212,7 @@ const Search = ({
 				const { key, ...optionProps } = props;
 				const hasSecondaryLabel = secondaryLabel && option[secondaryLabel] !== undefined;
 				const port = option["port"];
+				const selected = isOptionSelected(option);
 				return (
 					<ListItem
 						key={key}
@@ -166,9 +223,29 @@ const Search = ({
 										pointerEvents: "none",
 										backgroundColor: theme.palette.primary.main,
 									}
-								: {}
+								: option.isSelectAll
+									? {
+											fontWeight: "bold",
+											backgroundColor: theme.palette.primary.light,
+											"&:hover": {
+												backgroundColor: theme.palette.primary.light,
+											},
+										}
+									: {}
 						}
 					>
+						{multiple && isAdorned && !option.noOptions && (
+							<Checkbox
+								checked={option.isSelectAll ? selectAll : selected}
+								sx={{
+									color: theme.palette.primary.contrastTextSecondary,
+									"&.Mui-checked": {
+										color: theme.palette.secondary.main,
+									},
+									padding: 0,
+								}}
+							/>
+						)}
 						{option[filteredBy] +
 							(hasSecondaryLabel
 								? ` (${option[secondaryLabel]}${port ? `: ${port}` : ""})`
@@ -205,7 +282,9 @@ const Search = ({
 			}}
 			sx={{
 				/* 	height: 34,*/
-				"&.MuiAutocomplete-root .MuiAutocomplete-input": { p: 0 },
+				"&.MuiAutocomplete-root .MuiAutocomplete-input": {
+					padding: `0 ${theme.spacing(5)}`,
+				},
 				...sx,
 			}}
 		/>
@@ -219,7 +298,7 @@ Search.propTypes = {
 	options: PropTypes.array.isRequired,
 	filteredBy: PropTypes.string.isRequired,
 	secondaryLabel: PropTypes.string,
-	value: PropTypes.array,
+	value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 	inputValue: PropTypes.string.isRequired,
 	handleInputChange: PropTypes.func.isRequired,
 	handleChange: PropTypes.func,
@@ -230,6 +309,7 @@ Search.propTypes = {
 	startAdornment: PropTypes.object,
 	endAdornment: PropTypes.object,
 	onBlur: PropTypes.func,
+	unit: PropTypes.string,
 };
 
 export default Search;

client/src/Components/Inputs/Select/index.jsx

@@ -2,6 +2,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import FieldWrapper from "../FieldWrapper";
 
 import "./index.css";
 
@@ -12,9 +13,9 @@ import "./index.css";
  * @param {string} props.placeholder - The label of the select element.
  * @param {string} props.placeholder - The placeholder text when no option is selected.
  * @param {boolean} props.isHidden - Whether the placeholder should be hidden.
- * @param {string} props.value - The currently selected value.
+ * @param {(string | number | boolean)} props.value - The currently selected value.
  * @param {object[]} props.items - The array of items to populate in the select dropdown.
- *    @param {(string | number)} props.items._id - The unique identifier of each item.
+ *    @param {(string | number | boolean)} props.items._id - The unique identifier of each item.
  *    @param {string} props.items.name - The display name of each item.
  * @param {function} props.onChange - The function to handle onChange event.
  * @param {object} props.sx - The custom styles object for MUI Select component.
@@ -49,9 +50,16 @@ const Select = ({
 	onChange,
 	onBlur,
 	sx,
+	error = false,
 	name = "",
-	labelControlSpacing = 2,
+	labelControlSpacing = 6,
 	maxWidth,
+	//FieldWrapper's props
+	labelMb,
+	labelFontWeight,
+	labelVariant,
+	labelSx = {},
+	fieldWrapperSx = {},
 }) => {
 	const theme = useTheme();
 	const itemStyles = {
@@ -69,26 +77,24 @@ const Select = ({
 	};
 
 	return (
-		<Stack
-			gap={theme.spacing(labelControlSpacing)}
-			className="select-wrapper"
+		<FieldWrapper
+			label={label}
+			labelMb={labelMb}
+			labelVariant={labelVariant}
+			labelFontWeight={labelFontWeight}
+			labelSx={labelSx}
+			gap={labelControlSpacing}
+			sx={{
+				...fieldWrapperSx,
+			}}
 		>
-			{label && (
-				<Typography
-					component="h3"
-					color={theme.palette.primary.contrastTextSecondary}
-					fontWeight={500}
-					fontSize={13}
-				>
-					{label}
-				</Typography>
-			)}
 			<MuiSelect
 				className="select-component"
 				value={value}
 				onChange={onChange}
 				onBlur={onBlur}
 				displayEmpty
+				error={error}
 				name={name}
 				inputProps={{ id: id }}
 				IconComponent={KeyboardArrowDownIcon}
@@ -107,6 +113,13 @@ const Select = ({
 					"& svg path": {
 						fill: theme.palette.primary.contrastTextTertiary,
 					},
+					"& .MuiSelect-select": {
+						padding: "0",
+						minHeight: "34px",
+						display: "flex",
+						alignItems: "center",
+						lineHeight: 1,
+					},
 					...sx,
 				}}
 				renderValue={(selected) => {
@@ -151,7 +164,7 @@ const Select = ({
 					</MenuItem>
 				))}
 			</MuiSelect>
-		</Stack>
+		</FieldWrapper>
 	);
 };
 
@@ -161,10 +174,14 @@ Select.propTypes = {
 	label: PropTypes.string,
 	placeholder: PropTypes.string,
 	isHidden: PropTypes.bool,
-	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+	error: PropTypes.bool,
+	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
+		.isRequired,
 	items: PropTypes.arrayOf(
 		PropTypes.shape({
-			_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+			_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
+				.isRequired,
+
 			name: PropTypes.string.isRequired,
 		})
 	).isRequired,

client/src/Components/Inputs/TextInput/index.jsx

@@ -2,6 +2,7 @@ import { Stack, TextField, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { forwardRef, useState, cloneElement } from "react";
 import PropTypes from "prop-types";
+import FieldWrapper from "../FieldWrapper";
 
 const getSx = (theme, type, maxWidth) => {
 	const sx = {
@@ -85,31 +86,43 @@ const TextInput = forwardRef(
 			marginLeft,
 			disabled = false,
 			hidden = false,
+			//FieldWrapper's props
+			gap,
+			labelMb,
+			labelFontWeight,
+			labelVariant,
+			labelSx = {},
+			sx = {},
 		},
 		ref
 	) => {
 		const [fieldType, setFieldType] = useState(type);
 		const theme = useTheme();
+		const labelContent = label && (
+			<>
+				{label}
+				{isRequired && <Required />}
+				{isOptional && <Optional optionalLabel={optionalLabel} />}
+			</>
+		);
 		return (
-			<Stack
-				flex={flex}
-				display={hidden ? "none" : ""}
-				marginTop={marginTop}
-				marginRight={marginRight}
-				marginBottom={marginBottom}
-				marginLeft={marginLeft}
+			<FieldWrapper
+				label={labelContent}
+				labelMb={labelMb}
+				labelVariant={labelVariant}
+				labelFontWeight={labelFontWeight}
+				labelSx={labelSx}
+				gap={gap}
+				sx={{
+					flex,
+					display: hidden ? "none" : "",
+					mt: marginTop,
+					mr: marginRight,
+					mb: marginBottom,
+					ml: marginLeft,
+					...sx,
+				}}
 			>
-				<Typography
-					component="h3"
-					fontSize={"var(--env-var-font-size-medium)"}
-					color={theme.palette.primary.contrastTextSecondary}
-					fontWeight={500}
-					mb={theme.spacing(2)}
-				>
-					{label}
-					{isRequired && <Required />}
-					{isOptional && <Optional optionalLabel={optionalLabel} />}
-				</Typography>
 				<TextField
 					id={id}
 					name={name}
@@ -132,7 +145,7 @@ const TextInput = forwardRef(
 					}}
 					disabled={disabled}
 				/>
-			</Stack>
+			</FieldWrapper>
 		);
 	}
 );

client/src/Components/LanguageSelector.jsx

@@ -3,15 +3,24 @@ import { Box, MenuItem, Select, Stack } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import "flag-icons/css/flag-icons.min.css";
 import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { setLanguage } from "../Features/UI/uiSlice";
+
+const langMap = {
+	cs: "cz",
+	ja: "jp",
+	uk: "ua",
+	vi: "vn",
+};
 
 const LanguageSelector = () => {
 	const { i18n } = useTranslation();
 	const theme = useTheme();
 	const { language } = useSelector((state) => state.ui);
-
+	const dispatch = useDispatch();
 	const handleChange = (event) => {
 		const newLang = event.target.value;
-		i18n.changeLanguage(newLang);
+		dispatch(setLanguage(newLang));
 	};
 
 	const languages = Object.keys(i18n.options.resources || {});
@@ -21,31 +30,44 @@ const LanguageSelector = () => {
 			value={language}
 			onChange={handleChange}
 			size="small"
-			sx={{ minWidth: 80 }}
+			sx={{
+				minWidth: 80,
+				"& .MuiSelect-select": {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+				},
+				"& .MuiSelect-icon": {
+					alignSelf: "center",
+				},
+			}}
 		>
 			{languages.map((lang) => {
 				let parsedLang = lang === "en" ? "gb" : lang;
 
-				// Fix for Czech
-				if (parsedLang === "cs") {
-					parsedLang = "cz";
-				}
 				if (parsedLang.includes("-")) {
 					parsedLang = parsedLang.split("-")[1].toLowerCase();
-					console.log("parsedLang", parsedLang);
 				}
 
+				parsedLang = langMap[parsedLang] || parsedLang;
+
 				const flag = parsedLang ? `fi fi-${parsedLang}` : null;
 
 				return (
 					<MenuItem
 						key={lang}
 						value={lang}
+						sx={{
+							display: "flex",
+							justifyContent: "center",
+							alignItems: "center",
+						}}
 					>
 						<Stack
 							direction="row"
 							spacing={theme.spacing(2)}
 							alignItems="center"
+							justifyContent="center"
 						>
 							<Box
 								component="span"

client/src/Components/Layouts/AppLayout/index.jsx

@@ -0,0 +1,31 @@
+import Box from "@mui/material/Box";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import BackgroundSVG from "../../../assets/Images/background.svg";
+import { useSelector } from "react-redux";
+
+const AppLayout = ({ children }) => {
+	const theme = useTheme();
+	const ui = useSelector((state) => state.ui);
+	return (
+		<Box
+			sx={{
+				minHeight: "100vh",
+				backgroundColor: theme.palette.primaryBackground.main,
+				backgroundImage: ui?.mode === "dark" ? `url("${BackgroundSVG}")` : "none",
+				backgroundSize: "100% 100%",
+				backgroundPosition: "center",
+				backgroundRepeat: "no-repeat",
+				color: theme.palette.primary.contrastText,
+			}}
+		>
+			{children}
+		</Box>
+	);
+};
+
+AppLayout.propTypes = {
+	children: PropTypes.node,
+};
+
+export default AppLayout;

client/src/Components/Layouts/HomeLayout/index.css

@@ -12,13 +12,13 @@
 	}
 } */
 
-.home-layout aside {
+/* .home-layout aside {
 	position: sticky;
 	top: 0;
 	left: 0;
 	height: 100vh;
 	max-width: var(--env-var-side-bar-width);
-}
+} */
 
 .home-layout > div {
 	min-height: calc(100vh - var(--env-var-spacing-2) * 2);

client/src/Components/Link/index.jsx

@@ -1,4 +1,6 @@
 import { Link as MuiLink, useTheme } from "@mui/material";
+import { Link as RouterLink } from "react-router-dom";
+
 import PropTypes from "prop-types";
 
 /**
@@ -10,7 +12,7 @@ import PropTypes from "prop-types";
  * @returns {JSX.Element}
  */
 
-const Link = ({ level, label, url }) => {
+const Link = ({ level, label, url, external = true }) => {
 	const theme = useTheme();
 
 	const levelConfig = {
@@ -49,11 +51,12 @@ const Link = ({ level, label, url }) => {
 	const { sx, color } = levelConfig[level];
 	return (
 		<MuiLink
-			href={url}
+			component={external ? "a" : RouterLink}
+			to={external ? undefined : url}
+			href={external ? url : undefined}
 			sx={{ width: "fit-content", ...sx }}
 			color={color}
-			target="_blank"
-			rel="noreferrer"
+			{...(external && { target: "_blank", rel: "noreferrer" })}
 		>
 			{label}
 		</MuiLink>
@@ -64,6 +67,7 @@ Link.propTypes = {
 	url: PropTypes.string.isRequired,
 	level: PropTypes.oneOf(["primary", "secondary", "tertiary", "error"]),
 	label: PropTypes.string.isRequired,
+	external: PropTypes.bool,
 };
 
 export default Link;

client/src/Components/MonitorActions/index.jsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Grow from "@mui/material/Grow";
+import Paper from "@mui/material/Paper";
+import Popper from "@mui/material/Popper";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { createToast } from "../../Utils/toastUtils";
+import { useExportMonitors } from "../../Hooks/monitorHooks";
+
+const MonitorActions = ({ isLoading }) => {
+	const [open, setOpen] = React.useState(false);
+	const anchorRef = React.useRef(null);
+	const [selectedIndex, setSelectedIndex] = React.useState(0);
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+	const [exportMonitors, isExporting] = useExportMonitors();
+
+	const options = [t("monitorActions.import"), t("monitorActions.export")];
+
+	const handleClick = async () => {
+		if (selectedIndex === 0) {
+			// Import
+			navigate("/uptime/bulk-import");
+		} else {
+			// Export
+			const [success, error] = await exportMonitors();
+			if (!success) {
+				createToast({ body: error || t("export.failed") });
+			}
+		}
+	};
+
+	const handleMenuItemClick = (event, index) => {
+		setSelectedIndex(index);
+		setOpen(false);
+	};
+
+	const handleToggle = () => {
+		setOpen((prevOpen) => !prevOpen);
+	};
+
+	const handleClose = (event) => {
+		if (anchorRef.current && anchorRef.current.contains(event.target)) {
+			return;
+		}
+		setOpen(false);
+	};
+
+	return (
+		<React.Fragment>
+			<ButtonGroup
+				variant="contained"
+				color="accent"
+				ref={anchorRef}
+				aria-label="Monitor actions"
+				disabled={isLoading || isExporting}
+			>
+				<Button onClick={handleClick}>{options[selectedIndex]}</Button>
+				<Button
+					size="small"
+					aria-controls={open ? "split-button-menu" : undefined}
+					aria-expanded={open ? "true" : undefined}
+					aria-label="select monitor action"
+					aria-haspopup="menu"
+					onClick={handleToggle}
+				>
+					<ArrowDropDownIcon />
+				</Button>
+			</ButtonGroup>
+			<Popper
+				sx={{ zIndex: 1 }}
+				open={open}
+				anchorEl={anchorRef.current}
+				role={undefined}
+				transition
+				disablePortal
+			>
+				{({ TransitionProps, placement }) => (
+					<Grow
+						{...TransitionProps}
+						style={{
+							transformOrigin: placement === "bottom" ? "center top" : "center bottom",
+						}}
+					>
+						<Paper>
+							<ClickAwayListener onClickAway={handleClose}>
+								<MenuList
+									id="split-button-menu"
+									autoFocusItem
+								>
+									{options.map((option, index) => (
+										<MenuItem
+											key={option}
+											selected={index === selectedIndex}
+											onClick={(event) => handleMenuItemClick(event, index)}
+										>
+											{option}
+										</MenuItem>
+									))}
+								</MenuList>
+							</ClickAwayListener>
+						</Paper>
+					</Grow>
+				)}
+			</Popper>
+		</React.Fragment>
+	);
+};
+
+export default MonitorActions;

client/src/Components/MonitorCountHeader/index.jsx

@@ -4,14 +4,14 @@ import { useTheme } from "@emotion/react";
 import SkeletonLayout from "./skeleton";
 
 const MonitorCountHeader = ({
-	shouldRender = true,
+	isLoading = false,
 	monitorCount,
 	heading = "monitors",
 	sx,
 	children,
 }) => {
 	const theme = useTheme();
-	if (!shouldRender) return <SkeletonLayout />;
+	if (isLoading) return <SkeletonLayout />;
 
 	if (monitorCount === 1) {
 		heading = "monitor";
@@ -42,7 +42,7 @@ const MonitorCountHeader = ({
 };
 
 MonitorCountHeader.propTypes = {
-	shouldRender: PropTypes.bool,
+	isLoading: PropTypes.bool,
 	monitorCount: PropTypes.number,
 	heading: PropTypes.string,
 	children: PropTypes.node,

client/src/Components/MonitorCreateHeader/index.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@emotion/react";
+import MonitorActions from "../MonitorActions";
 
 const CreateMonitorHeader = ({ isAdmin, label, isLoading = true, path, bulkPath }) => {
 	const navigate = useNavigate();
@@ -28,18 +29,7 @@ const CreateMonitorHeader = ({ isAdmin, label, isLoading = true, path, bulkPath
 			>
 				{label || t("createNew")}
 			</Button>
-			{bulkPath && (
-				<Button
-					loading={isLoading}
-					variant="contained"
-					color="accent"
-					onClick={() => {
-						navigate(`${bulkPath}`);
-					}}
-				>
-					{t("bulkImport.title")}
-				</Button>
-			)}
+			{/* {bulkPath && <MonitorActions isLoading={isLoading} />} */}
 		</Stack>
 	);
 };

client/src/Components/MonitorDetailsControlHeader/index.jsx

@@ -2,6 +2,7 @@ import Stack from "@mui/material/Stack";
 import Status from "./status";
 import Skeleton from "./skeleton";
 import Button from "@mui/material/Button";
+import { Tooltip } from "@mui/material";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
 import PlayArrowOutlinedIcon from "@mui/icons-material/PlayArrowOutlined";
@@ -11,10 +12,10 @@ import EmailIcon from "@mui/icons-material/Email";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
-import { usePauseMonitor } from "../../Hooks/useMonitorControls";
+import { usePauseMonitor } from "../../Hooks/monitorHooks";
 import { useSendTestEmail } from "../../Hooks/useSendTestEmail";
 import { useTranslation } from "react-i18next";
-
+import { useTestAllNotifications } from "../../Hooks/useNotifications";
 /**
  * MonitorDetailsControlHeader component displays the control header for monitor details.
  * It includes status display, pause/resume button, and a configure button for admins.
@@ -38,12 +39,16 @@ const MonitorDetailsControlHeader = ({
 	const navigate = useNavigate();
 	const theme = useTheme();
 	const { t } = useTranslation();
-	const [pauseMonitor, isPausing, error] = usePauseMonitor({
-		monitorId: monitor?._id,
-		triggerUpdate,
-	});
+	const [pauseMonitor, isPausing, error] = usePauseMonitor();
 
-	const [isSending, emailError, sendTestEmail] = useSendTestEmail();
+	const isTestNotificationsDisabled = monitor?.notifications?.length === 0;
+
+	const tooltipTitle = isTestNotificationsDisabled ? t("testNotificationsDisabled") : "";
+
+	// const [isSending, emailError, sendTestEmail] = useSendTestEmail();
+
+	const [testAllNotifications, isSending, errorAllNotifications] =
+		useTestAllNotifications();
 
 	if (isLoading) {
 		return <Skeleton />;
@@ -60,17 +65,29 @@ const MonitorDetailsControlHeader = ({
 				direction="row"
 				gap={theme.spacing(2)}
 			>
-				<Button
-					variant="contained"
-					color="secondary"
-					loading={isSending}
-					startIcon={<EmailIcon />}
-					onClick={() => {
-						sendTestEmail();
-					}}
+				<Tooltip
+					key={monitor?._id}
+					placement="bottom"
+					title={tooltipTitle}
 				>
-					{t("sendTestEmail")}
-				</Button>
+					<span>
+						<Button
+							variant="contained"
+							color="secondary"
+							loading={isSending}
+							startIcon={<EmailIcon />}
+							disabled={isTestNotificationsDisabled}
+							onClick={() => {
+								testAllNotifications({ monitorId: monitor?._id });
+							}}
+							sx={{
+								whiteSpace: "nowrap",
+							}}
+						>
+							{t("sendTestNotifications")}
+						</Button>
+					</span>
+				</Tooltip>
 				<Button
 					variant="contained"
 					color="secondary"
@@ -80,20 +97,24 @@ const MonitorDetailsControlHeader = ({
 				>
 					{t("menu.incidents")}
 				</Button>
-				<Button
-					variant="contained"
-					color="secondary"
-					loading={isPausing}
-					startIcon={
-						monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
-					}
-					onClick={() => {
-						pauseMonitor();
-					}}
-				>
-					{monitor?.isActive ? "Pause" : "Resume"}
-				</Button>
-
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="secondary"
+						loading={isPausing}
+						startIcon={
+							monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
+						}
+						onClick={() => {
+							pauseMonitor({
+								monitorId: monitor?._id,
+								triggerUpdate,
+							});
+						}}
+					>
+						{monitor?.isActive ? "Pause" : "Resume"}
+					</Button>
+				)}
 				{isAdmin && (
 					<Button
 						variant="contained"

client/src/Components/MonitorDetailsControlHeader/status.jsx

@@ -7,8 +7,8 @@ import Dot from "../../Components/Dot";
 import { formatDurationRounded } from "../../Utils/timeUtils";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
-
+import { useMonitorUtils } from "../../Hooks/useMonitorUtils";
+import { formatMonitorUrl } from "../../Utils/utils";
 /**
  * Status component displays the status information of a monitor.
  * It includes the monitor's name, URL, and check interval.
@@ -23,23 +23,18 @@ import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
  */
 const Status = ({ monitor }) => {
 	const theme = useTheme();
-	const { statusColor, determineState } = useUtils();
+	const { statusColor, determineState } = useMonitorUtils();
 
 	return (
 		<Stack>
-			<Typography variant="h1">{monitor?.name}</Typography>
+			<Typography variant="monitorName">{monitor?.name}</Typography>
 			<Stack
 				direction="row"
 				alignItems={"center"}
 				gap={theme.spacing(4)}
 			>
 				<PulseDot color={statusColor[determineState(monitor)]} />
-				<Typography
-					variant="h2"
-					style={{ fontFamily: "monospace", fontWeight: "bolder" }}
-				>
-					{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
-				</Typography>
+				<Typography variant="monitorUrl">{formatMonitorUrl(monitor?.url)}</Typography>
 				<Dot />
 				<Typography>
 					Checking every {formatDurationRounded(monitor?.interval)}.

client/src/Components/MonitorStatusHeader/ConfigButton/index.jsx

@@ -1,41 +0,0 @@
-import { Button, Box } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import { useNavigate } from "react-router-dom";
-import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
-import PropTypes from "prop-types";
-const ConfigButton = ({ shouldRender = true, monitorId, path }) => {
-	const theme = useTheme();
-	const navigate = useNavigate();
-
-	if (!shouldRender) return null;
-
-	return (
-		<Box alignSelf="flex-end">
-			<Button
-				variant="contained"
-				color="secondary"
-				onClick={() => navigate(`/${path}/configure/${monitorId}`)}
-				sx={{
-					px: theme.spacing(5),
-					"& svg": {
-						mr: theme.spacing(3),
-						"& path": {
-							/* Should always be contrastText for the button color */
-							stroke: theme.palette.secondary.contrastText,
-						},
-					},
-				}}
-			>
-				<SettingsIcon /> Configure
-			</Button>
-		</Box>
-	);
-};
-
-ConfigButton.propTypes = {
-	shouldRender: PropTypes.bool,
-	monitorId: PropTypes.string.isRequired,
-	path: PropTypes.string.isRequired,
-};
-
-export default ConfigButton;

client/src/Components/MonitorStatusHeader/index.jsx

@@ -1,59 +0,0 @@
-import { Stack, Typography } from "@mui/material";
-import PulseDot from "../Animated/PulseDot";
-import Dot from "../Dot";
-import { useTheme } from "@emotion/react";
-import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
-import { formatDurationRounded } from "../../Utils/timeUtils";
-import ConfigButton from "./ConfigButton";
-import SkeletonLayout from "./skeleton";
-import PropTypes from "prop-types";
-
-const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
-	const theme = useTheme();
-	const { statusColor, determineState } = useUtils();
-	if (isLoading) {
-		return <SkeletonLayout />;
-	}
-
-	return (
-		<Stack
-			direction="row"
-			justifyContent="space-between"
-		>
-			<Stack>
-				<Typography variant="h1">{monitor?.name}</Typography>
-				<Stack
-					direction="row"
-					alignItems={"center"}
-					gap={theme.spacing(4)}
-				>
-					<PulseDot color={statusColor[determineState(monitor)]} />
-					<Typography
-						variant="h2"
-						style={{ fontFamily: "monospace", fontWeight: "bolder" }}
-					>
-						{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
-					</Typography>
-					<Dot />
-					<Typography>
-						Checking every {formatDurationRounded(monitor?.interval)}.
-					</Typography>
-				</Stack>
-			</Stack>
-			<ConfigButton
-				path={path}
-				shouldRender={isAdmin}
-				monitorId={monitor?._id}
-			/>
-		</Stack>
-	);
-};
-
-MonitorStatusHeader.propTypes = {
-	path: PropTypes.string.isRequired,
-	isLoading: PropTypes.bool,
-	isAdmin: PropTypes.bool,
-	monitor: PropTypes.object,
-};
-
-export default MonitorStatusHeader;

client/src/Components/MonitorStatusHeader/skeleton.jsx

@@ -1,23 +0,0 @@
-import { Stack, Skeleton } from "@mui/material";
-
-const SkeletonLayout = () => {
-	return (
-		<Stack
-			direction="row"
-			justifyContent="space-between"
-		>
-			<Skeleton
-				height={40}
-				variant="rounded"
-				width="15%"
-			/>
-			<Skeleton
-				height={40}
-				variant="rounded"
-				width="15%"
-			/>
-		</Stack>
-	);
-};
-
-export default SkeletonLayout;

client/src/Components/NotificationConfig/index.jsx

@@ -0,0 +1,125 @@
+// Components
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
+import Search from "../Inputs/Search";
+
+// Utils
+import { useState, useEffect } from "react";
+import { useTheme } from "@mui/material/styles";
+import PropTypes from "prop-types";
+
+const NotificationConfig = ({
+	notifications,
+	setMonitor,
+	setNotifications,
+	//FieldWrapper's props
+	gap,
+	labelMb,
+	labelFontWeight,
+	labelVariant,
+	labelSx = {},
+	sx = {},
+}) => {
+	// Local state
+	const [notificationsSearch, setNotificationsSearch] = useState("");
+	const [selectedNotifications, setSelectedNotifications] = useState([]);
+
+	const handleSearch = (value) => {
+		setSelectedNotifications(value);
+		setMonitor((prev) => {
+			return {
+				...prev,
+				notifications: value.map((notification) => notification._id),
+			};
+		});
+	};
+
+	// Handlers
+	const handleDelete = (id) => {
+		const updatedNotifications = selectedNotifications.filter(
+			(notification) => notification._id !== id
+		);
+
+		setSelectedNotifications(updatedNotifications);
+		setMonitor((prev) => {
+			return {
+				...prev,
+				notifications: updatedNotifications.map((notification) => notification._id),
+			};
+		});
+	};
+
+	// Setup
+	const theme = useTheme();
+
+	useEffect(() => {
+		if (setNotifications) {
+			const toSet = setNotifications.map((notification) => {
+				return notifications.find((n) => n._id === notification);
+			});
+			setSelectedNotifications(toSet);
+		}
+	}, [setNotifications, notifications]);
+
+	return (
+		<Stack gap={theme.spacing(6)}>
+			<Search
+				type="notifications"
+				label="Notifications"
+				options={notifications}
+				filteredBy="notificationName"
+				multiple={true}
+				value={selectedNotifications}
+				inputValue={notificationsSearch}
+				handleInputChange={setNotificationsSearch}
+				handleChange={(value) => {
+					handleSearch(value);
+				}}
+				labelMb={labelMb}
+				labelVariant={labelVariant}
+				labelFontWeight={labelFontWeight}
+				labelSx={labelSx}
+				gap={gap}
+				sx={{
+					...sx,
+				}}
+			/>
+			<Stack
+				flex={1}
+				width="100%"
+			>
+				{selectedNotifications.map((notification, index) => (
+					<Stack
+						direction="row"
+						alignItems="center"
+						key={notification._id}
+						width="100%"
+					>
+						<Typography
+							flexGrow={1} // <-- This will take up all available horizontal space
+						>
+							{notification.notificationName}
+						</Typography>
+						<DeleteOutlineRoundedIcon
+							onClick={() => {
+								handleDelete(notification._id);
+							}}
+							sx={{ cursor: "pointer" }}
+						/>
+						{index < selectedNotifications.length - 1 && <Divider />}
+					</Stack>
+				))}
+			</Stack>
+		</Stack>
+	);
+};
+
+NotificationConfig.propTypes = {
+	notifications: PropTypes.array,
+	setMonitor: PropTypes.func,
+	setNotifications: PropTypes.array,
+};
+
+export default NotificationConfig;

client/src/Components/ProtectedDistributedUptimeRoute/index.jsx

@@ -1,30 +0,0 @@
-import { Navigate } from "react-router-dom";
-import { useSelector } from "react-redux";
-import PropTypes from "prop-types";
-
-/**
- * @param {Object} props - The props passed to the ProtectedDistributedUptimeRoute component.
- * @param {React.ReactNode} props.children - The children to render if the user is authenticated.
- * @returns {React.ReactElement} The children wrapped in a protected route or a redirect to the login page.
- */
-
-const ProtectedDistributedUptimeRoute = ({ children }) => {
-	const distributedUptimeEnabled = useSelector(
-		(state) => state.ui.distributedUptimeEnabled
-	);
-
-	return distributedUptimeEnabled === true ? (
-		children
-	) : (
-		<Navigate
-			to="/uptime"
-			replace
-		/>
-	);
-};
-
-ProtectedDistributedUptimeRoute.propTypes = {
-	children: PropTypes.node.isRequired,
-};
-
-export default ProtectedDistributedUptimeRoute;

client/src/Components/RoleProtectedRoute/index.jsx

@@ -0,0 +1,35 @@
+import { Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+
+/**
+ * ProtectedRoute is a wrapper component that ensures only authenticated users
+ * can access the wrapped content. It checks authentication status (e.g., from Redux or Context).
+ * If the user is authenticated, it renders the children; otherwise, it redirects to the login page.
+ *
+ * @param {Object} props - The props passed to the ProtectedRoute component.
+ * @param {React.ReactNode} props.children - The children to render if the user is authenticated.
+ * @returns {React.ReactElement} The children wrapped in a protected route or a redirect to the login page.
+ */
+
+const RoleProtectedRoute = ({ roles, children }) => {
+	const authState = useSelector((state) => state.auth);
+	const userRoles = authState?.user?.role || [];
+	const canAccess = userRoles.some((role) => roles.includes(role));
+
+	return canAccess ? (
+		children
+	) : (
+		<Navigate
+			to="/uptime"
+			replace
+		/>
+	);
+};
+
+RoleProtectedRoute.propTypes = {
+	children: PropTypes.element.isRequired,
+	roles: PropTypes.array,
+};
+
+export default RoleProtectedRoute;

client/src/Components/Sidebar/components/authFooter.jsx

@@ -0,0 +1,277 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
+import Avatar from "../../Avatar";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import Divider from "@mui/material/Divider";
+import DotsVertical from "../../../assets/icons/dots-vertical.svg?react";
+import LogoutSvg from "../../../assets/icons/logout.svg?react";
+
+import { useTheme } from "@emotion/react";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { clearAuthState } from "../../../Features/Auth/authSlice";
+import { useDispatch } from "react-redux";
+import PropTypes from "prop-types";
+
+const getFilteredAccountMenuItems = (user, items) => {
+	if (!user) return [];
+
+	let filtered = [...items];
+
+	if (user.role?.includes("demo")) {
+		filtered = filtered.filter((item) => item.name !== "Password");
+	}
+
+	if (!user.role?.includes("superadmin")) {
+		filtered = filtered.filter((item) => item.name !== "Team");
+	}
+
+	return filtered;
+};
+
+const getRoleDisplayText = (user, t) => {
+	if (!user?.role) return "";
+
+	if (user.role.includes("superadmin")) return t("roles.superAdmin");
+	if (user.role.includes("admin")) return t("roles.admin");
+	if (user.role.includes("user")) return t("roles.teamMember");
+	if (user.role.includes("demo")) return t("roles.demoUser");
+
+	return user.role;
+};
+
+const AuthFooter = ({ collapsed, accountMenuItems }) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const authState = useSelector((state) => state.auth);
+	const navigate = useNavigate();
+	const dispatch = useDispatch();
+
+	const [anchorEl, setAnchorEl] = useState(null);
+
+	const openPopup = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const closePopup = () => {
+		setAnchorEl(null);
+	};
+
+	const logout = async () => {
+		dispatch(clearAuthState());
+		navigate("/login");
+	};
+	const renderAccountMenuItems = (user, items) => {
+		const filteredItems = getFilteredAccountMenuItems(user, items);
+
+		return filteredItems.map((item) => (
+			<MenuItem
+				key={item.name}
+				onClick={() => {
+					closePopup();
+					navigate(item.path);
+				}}
+				sx={{
+					gap: theme.spacing(2),
+					borderRadius: theme.shape.borderRadius,
+					pl: theme.spacing(4),
+				}}
+			>
+				{item.icon}
+				{item.name}
+			</MenuItem>
+		));
+	};
+	return (
+		<Stack
+			direction="row"
+			height="var(--env-var-side-bar-auth-footer-height)"
+			alignItems="center"
+			py={theme.spacing(4)}
+			px={theme.spacing(8)}
+			gap={theme.spacing(2)}
+			borderRadius={theme.shape.borderRadius}
+			boxSizing={"border-box"}
+		>
+			<Avatar
+				small={true}
+				onClick={(e) => collapsed && openPopup(e)}
+				sx={{
+					cursor: collapsed ? "pointer" : "default",
+				}}
+			/>
+
+			<Stack
+				direction={"row"}
+				alignItems={"center"}
+				gap={theme.spacing(2)}
+				minWidth={0}
+				maxWidth={collapsed ? 0 : "100%"}
+				sx={{
+					opacity: collapsed ? 0 : 1,
+					transition: "opacity 300ms ease, max-width 300ms ease",
+					transitionDelay: collapsed ? "0ms" : "300ms",
+				}}
+			>
+				<Stack
+					ml={theme.spacing(2)}
+					sx={{
+						maxWidth: "50%",
+						overflow: "hidden",
+					}}
+				>
+					<Typography
+						color={theme.palette.primary.contrastText}
+						fontWeight={500}
+						lineHeight={1}
+						fontSize={"var(--env-var-font-size-medium)"}
+						sx={{
+							display: "block",
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+						}}
+					>
+						{authState.user?.firstName} {authState.user?.lastName}
+					</Typography>
+					<Typography
+						color={theme.palette.primary.contrastText}
+						fontSize={"var(--env-var-font-size-small)"}
+						textOverflow="ellipsis"
+						overflow="hidden"
+						whiteSpace="nowrap"
+						sx={{ textTransform: "capitalize", opacity: 0.8 }}
+					>
+						{getRoleDisplayText(authState.user, t)}
+					</Typography>
+				</Stack>
+				<Tooltip
+					title={t("navControls")}
+					disableInteractive
+				>
+					<IconButton
+						sx={{
+							ml: "50px",
+							"&:focus": { outline: "none" },
+							alignSelf: "center",
+
+							"& svg": {
+								width: "22px",
+								height: "22px",
+							},
+							"& svg path": {
+								/* Vertical three dots */
+								stroke: theme.palette.primary.contrastTextTertiary,
+							},
+						}}
+						onClick={(event) => openPopup(event)}
+					>
+						<DotsVertical />
+					</IconButton>
+				</Tooltip>
+			</Stack>
+			<Menu
+				className="sidebar-popup"
+				anchorEl={anchorEl}
+				open={Boolean(anchorEl)}
+				onClose={closePopup}
+				disableScrollLock
+				anchorOrigin={{
+					vertical: "top",
+					horizontal: "right",
+				}}
+				slotProps={{
+					paper: {
+						sx: {
+							marginTop: theme.spacing(-4),
+							marginLeft: collapsed ? theme.spacing(2) : 0,
+						},
+					},
+				}}
+				MenuListProps={{
+					sx: {
+						p: 2,
+						"& li": { m: 0 },
+						"& li:has(.MuiBox-root):hover": {
+							backgroundColor: "transparent",
+						},
+					},
+				}}
+				sx={{
+					ml: theme.spacing(4),
+				}}
+			>
+				{collapsed && (
+					<MenuItem sx={{ cursor: "default", minWidth: "50%" }}>
+						<Box
+							mb={theme.spacing(2)}
+							sx={{
+								minWidth: "50%",
+								maxWidth: "max-content",
+								overflow: "visible",
+								whiteSpace: "nowrap",
+							}}
+						>
+							<Typography
+								component="span"
+								fontWeight={500}
+								fontSize={13}
+								sx={{
+									display: "block",
+									whiteSpace: "nowrap",
+									overflow: "visible",
+									// wordBreak: "break-word",
+									textOverflow: "clip",
+								}}
+							>
+								{authState.user?.firstName} {authState.user?.lastName}
+							</Typography>
+							<Typography
+								sx={{
+									textTransform: "capitalize",
+									fontSize: 12,
+									whiteSpace: "nowrap",
+									overflow: "visible",
+									// wordBreak: "break-word",
+								}}
+							>
+								{authState.user?.role}
+							</Typography>
+						</Box>
+					</MenuItem>
+				)}
+				{/* TODO Do we need two dividers? */}
+				{collapsed && <Divider />}
+				{/* <Divider /> */}
+				{renderAccountMenuItems(authState.user, accountMenuItems)}
+				<MenuItem
+					onClick={logout}
+					sx={{
+						gap: theme.spacing(4),
+						borderRadius: theme.shape.borderRadius,
+						pl: theme.spacing(4),
+						"& svg path": {
+							stroke: theme.palette.primary.contrastTextTertiary,
+						},
+					}}
+				>
+					<LogoutSvg />
+					{t("menu.logOut", "Log out")}
+				</MenuItem>
+			</Menu>
+		</Stack>
+	);
+};
+
+AuthFooter.propTypes = {
+	collapsed: PropTypes.bool,
+	accountMenuItems: PropTypes.array,
+};
+
+export default AuthFooter;

client/src/Components/Sidebar/components/collapseButton.jsx

@@ -0,0 +1,55 @@
+import IconButton from "@mui/material/IconButton";
+import ArrowRight from "../../ArrowRight";
+import ArrowLeft from "../../ArrowLeft";
+import { useTheme } from "@mui/material/styles";
+import { useDispatch } from "react-redux";
+import { toggleSidebar } from "../../../Features/UI/uiSlice";
+import PropTypes from "prop-types";
+
+const CollapseButton = ({ collapsed }) => {
+	const theme = useTheme();
+	const dispatch = useDispatch();
+	const arrowIcon = collapsed ? (
+		<ArrowRight
+			height={theme.spacing(8)}
+			width={theme.spacing(8)}
+			color={theme.palette.primary.contrastTextSecondary}
+		/>
+	) : (
+		<ArrowLeft
+			height={theme.spacing(8)}
+			width={theme.spacing(8)}
+			color={theme.palette.primary.contrastTextSecondary}
+		/>
+	);
+	return (
+		<IconButton
+			sx={{
+				position: "absolute",
+				/* TODO 60 is a magic number. if logo chnges size this might break */
+				top: 60,
+				right: 0,
+				transform: `translate(50%, 0)`,
+				backgroundColor: theme.palette.tertiary.main,
+				border: `1px solid ${theme.palette.primary.lowContrast}`,
+				p: theme.spacing(2.5),
+
+				"&:focus": { outline: "none" },
+				"&:hover": {
+					backgroundColor: theme.palette.primary.lowContrast,
+					borderColor: theme.palette.primary.lowContrast,
+				},
+			}}
+			onClick={() => {
+				dispatch(toggleSidebar());
+			}}
+		>
+			{arrowIcon}
+		</IconButton>
+	);
+};
+
+CollapseButton.propTypes = {
+	collapsed: PropTypes.bool.isRequired,
+};
+export default CollapseButton;

client/src/Components/Sidebar/components/logo.jsx

@@ -0,0 +1,67 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useNavigate } from "react-router";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+
+const Logo = ({ collapsed }) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const navigate = useNavigate();
+
+	return (
+		<Stack
+			pt={theme.spacing(6)}
+			pb={theme.spacing(12)}
+			pl={theme.spacing(8)}
+			direction="row"
+			alignItems="center"
+			gap={theme.spacing(4)}
+			onClick={() => navigate("/")}
+			sx={{ cursor: "pointer" }}
+		>
+			<Typography
+				pl={theme.spacing("1px")}
+				minWidth={theme.spacing(16)}
+				minHeight={theme.spacing(16)}
+				display={"flex"}
+				justifyContent={"center"}
+				alignItems={"center"}
+				backgroundColor={theme.palette.accent.main}
+				borderRadius={theme.shape.borderRadius}
+				color={theme.palette.accent.contrastText}
+				fontSize={18}
+			>
+				C
+			</Typography>
+			<Box
+				overflow={"hidden"}
+				sx={{
+					transition: "opacity 900ms ease, width 900ms ease",
+					opacity: collapsed ? 0 : 1,
+					whiteSpace: "nowrap",
+					width: collapsed ? 0 : "100%",
+				}}
+			>
+				{" "}
+				<Typography
+					lineHeight={1}
+					mt={theme.spacing(2)}
+					color={theme.palette.primary.contrastText}
+					fontSize={"var(--env-var-font-size-medium-plus)"}
+					sx={{ fontWeight: 500 }}
+				>
+					{t("common.appName")}
+				</Typography>
+			</Box>
+		</Stack>
+	);
+};
+
+Logo.propTypes = {
+	collapsed: PropTypes.bool,
+};
+
+export default Logo;

client/src/Components/Sidebar/components/navItem.jsx

@@ -0,0 +1,97 @@
+import Tooltip from "@mui/material/Tooltip";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+
+const NavItem = ({ item, collapsed, selected, onClick }) => {
+	const theme = useTheme();
+	const iconStroke = selected
+		? theme.palette.primary.contrastText
+		: theme.palette.primary.contrastTextTertiary;
+
+	const buttonBgColor = selected ? theme.palette.secondary.main : "transparent";
+	const buttonBgHoverColor = selected
+		? theme.palette.secondary.main
+		: theme.palette.tertiary.main;
+	const fontWeight = selected ? 600 : 400;
+	return (
+		<Tooltip
+			placement="right"
+			title={collapsed ? item.name : ""}
+			slotProps={{
+				popper: {
+					modifiers: [
+						{
+							name: "offset",
+							options: {
+								offset: [0, -16],
+							},
+						},
+					],
+				},
+			}}
+			disableInteractive
+		>
+			<ListItemButton
+				sx={{
+					backgroundColor: buttonBgColor,
+					"&:hover": {
+						backgroundColor: buttonBgHoverColor,
+					},
+					height: 37,
+					gap: theme.spacing(4),
+					borderRadius: theme.shape.borderRadius,
+					px: theme.spacing(4),
+					pl: theme.spacing(5),
+				}}
+				onClick={onClick}
+			>
+				<ListItemIcon
+					sx={{
+						minWidth: 0,
+						"& svg": {
+							height: 20,
+							width: 20,
+							opacity: 0.81,
+						},
+						"& svg path": {
+							stroke: iconStroke,
+						},
+					}}
+				>
+					{item.icon}
+				</ListItemIcon>
+				<Box
+					sx={{
+						overflow: "hidden",
+						transition: "opacity 900ms ease",
+						opacity: collapsed ? 0 : 1,
+						whiteSpace: "nowrap",
+					}}
+				>
+					<Typography
+						variant="body1"
+						color={theme.palette.primary.contrastText}
+						sx={{
+							fontWeight: fontWeight,
+							opacity: 0.9,
+						}}
+					>
+						{item.name}
+					</Typography>
+				</Box>
+			</ListItemButton>
+		</Tooltip>
+	);
+};
+
+NavItem.propTypes = {
+	item: PropTypes.object,
+	collapsed: PropTypes.bool,
+	selected: PropTypes.bool,
+	onClick: PropTypes.func,
+};
+export default NavItem;

client/src/Components/Sidebar/index.css

@@ -1,106 +0,0 @@
-/* TODO  */
-aside .MuiList-root svg {
-	width: 20px;
-	height: 20px;
-	opacity: 0.9;
-}
-aside span.MuiTypography-root {
-	font-size: var(--env-var-font-size-medium);
-	line-height: 1;
-}
-aside .MuiStack-root + span.MuiTypography-root {
-	font-size: var(--env-var-font-size-medium-plus);
-}
-aside .MuiListSubheader-root {
-	font-size: var(--env-var-font-size-small);
-	font-weight: 500;
-	line-height: 1.5;
-	text-transform: uppercase;
-	margin-bottom: 2px;
-	opacity: 0.6;
-}
-aside p.MuiTypography-root {
-	font-size: var(--env-var-font-size-small);
-	opacity: 0.8;
-}
-aside .MuiListItemButton-root:not(.selected-path) > * {
-	opacity: 0.9;
-}
-aside .selected-path > * {
-	opacity: 1;
-}
-aside .selected-path span.MuiTypography-root {
-	font-weight: 600;
-}
-aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root {
-	position: relative;
-}
-aside .MuiCollapse-wrapperInner .MuiList-root svg,
-aside .MuiList-root .MuiListItemText-root + svg {
-	width: 18px;
-	height: 18px;
-}
-
-.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root) {
-	padding-bottom: 0;
-}
-.sidebar-popup svg {
-	width: 16px;
-	height: 16px;
-	opacity: 0.9;
-}
-
-/* TRANSITIONS */
-aside {
-	flex: 1;
-	transition: max-width 650ms cubic-bezier(0.36, -0.01, 0, 0.77);
-}
-.home-layout aside.collapsed {
-	max-width: 64px;
-}
-
-aside.expanded .MuiTypography-root,
-aside.expanded p.MuiTypography-root,
-aside.expanded .MuiListItemText-root + svg,
-aside.expanded .MuiAvatar-root + .MuiBox-root + .MuiIconButton-root {
-	visibility: visible;
-	animation: fadeIn 1s ease;
-}
-
-aside.collapsed .MuiTypography-root,
-aside.collapsed p.MuiTypography-root,
-aside.collapsed .MuiListItemText-root + svg,
-aside.collapsed .MuiAvatar-root + .MuiBox-root + .MuiIconButton-root {
-	opacity: 0;
-	visibility: hidden;
-}
-
-aside .MuiListSubheader-root {
-	transition: padding 200ms ease;
-}
-
-.sidebar-delay-fade {
-	opacity: 0;
-	visibility: hidden;
-	transition: opacity 0.3s ease;
-}
-
-aside.expanded.sidebar-ready .sidebar-delay-fade {
-	opacity: 1;
-	visibility: visible;
-}
-
-@keyframes fadeIn {
-	0% {
-		opacity: 0;
-		visibility: hidden;
-	}
-	30% {
-		opacity: 0;
-		visibility: hidden;
-	}
-	100% {
-		opacity: 0.9;
-		visibility: visible;
-	}
-}

client/src/Components/Sidebar/index.jsx

@@ -1,71 +1,59 @@
-import React, { useEffect, useState, useRef } from "react";
-import {
-	Box,
-	Collapse,
-	Divider,
-	IconButton,
-	List,
-	ListItemButton,
-	ListItemIcon,
-	ListItemText,
-	ListSubheader,
-	Menu,
-	MenuItem,
-	Stack,
-	Tooltip,
-	Typography,
-} from "@mui/material";
-import ThemeSwitch from "../ThemeSwitch";
-import Avatar from "../Avatar";
+import Stack from "@mui/material/Stack";
+
+import List from "@mui/material/List";
+import Logo from "./components/logo";
+import CollapseButton from "./components/collapseButton";
+import Divider from "@mui/material/Divider";
+import NavItem from "./components/navItem";
+import AuthFooter from "./components/authFooter";
+
 import StarPrompt from "../StarPrompt";
 import LockSvg from "../../assets/icons/lock.svg?react";
 import UserSvg from "../../assets/icons/user.svg?react";
 import TeamSvg from "../../assets/icons/user-two.svg?react";
-import LogoutSvg from "../../assets/icons/logout.svg?react";
 import Support from "../../assets/icons/support.svg?react";
-import Account from "../../assets/icons/user-edit.svg?react";
 import Maintenance from "../../assets/icons/maintenance.svg?react";
 import Monitors from "../../assets/icons/monitors.svg?react";
 import Incidents from "../../assets/icons/incidents.svg?react";
 import Integrations from "../../assets/icons/integrations.svg?react";
 import PageSpeed from "../../assets/icons/page-speed.svg?react";
 import Settings from "../../assets/icons/settings.svg?react";
-import ArrowDown from "../../assets/icons/down-arrow.svg?react";
-import ArrowUp from "../../assets/icons/up-arrow.svg?react";
-import ArrowRight from "../../assets/icons/right-arrow.svg?react";
-import ArrowLeft from "../../assets/icons/left-arrow.svg?react";
-import DotsVertical from "../../assets/icons/dots-vertical.svg?react";
 import ChangeLog from "../../assets/icons/changeLog.svg?react";
 import Docs from "../../assets/icons/docs.svg?react";
-import Folder from "../../assets/icons/folder.svg?react";
 import StatusPages from "../../assets/icons/status-pages.svg?react";
 import Discussions from "../../assets/icons/discussions.svg?react";
-import DistributedUptimeIcon from "../../assets/icons/distributed-uptime.svg?react";
-import "./index.css";
+import Notifications from "../../assets/icons/notifications.svg?react";
+import Logs from "../../assets/icons/logs.svg?react";
 
 // Utils
-import { useLocation, useNavigate } from "react-router";
-import { useTheme } from "@emotion/react";
-import { useDispatch, useSelector } from "react-redux";
+import { useTheme } from "@mui/material/styles";
+import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
-import { clearAuthState } from "../../Features/Auth/authSlice";
-import { toggleSidebar } from "../../Features/UI/uiSlice";
-import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import { useNavigate } from "react-router";
+
+const URL_MAP = {
+	support: "https://discord.com/invite/NAb6H3UTjK",
+	discussions: "https://github.com/bluewave-labs/checkmate/discussions",
+	docs: "https://bluewavelabs.gitbook.io/checkmate",
+	changelog: "https://github.com/bluewave-labs/checkmate/releases",
+};
 
 const getMenu = (t) => [
 	{ name: t("menu.uptime"), path: "uptime", icon: <Monitors /> },
 	{ name: t("menu.pagespeed"), path: "pagespeed", icon: <PageSpeed /> },
+
 	{ name: t("menu.infrastructure"), path: "infrastructure", icon: <Integrations /> },
 	{
-		name: t("menu.distributedUptime"),
-		path: "distributed-uptime",
-		icon: <DistributedUptimeIcon />,
+		name: t("menu.notifications"),
+		path: "notifications",
+		icon: <Notifications />,
 	},
 	{ name: t("menu.incidents"), path: "incidents", icon: <Incidents /> },
 
 	{ name: t("menu.statusPages"), path: "status", icon: <StatusPages /> },
 	{ name: t("menu.maintenance"), path: "maintenance", icon: <Maintenance /> },
-	// { name: t("menu.integrations"), path: "integrations", icon: <Integrations /> },
+	{ name: t("menu.logs"), path: "logs", icon: <Logs /> },
+
 	{
 		name: t("menu.settings"),
 		icon: <Settings />,
@@ -90,787 +78,94 @@ const getAccountMenuItems = (t) => [
 	{ name: t("menu.team"), path: "account/team", icon: <TeamSvg /> },
 ];
 
-/* TODO this could be a key in nested Path would be the link */
-const URL_MAP = {
-	support: "https://discord.com/invite/NAb6H3UTjK",
-	discussions: "https://github.com/bluewave-labs/checkmate/discussions",
-	docs: "https://bluewavelabs.gitbook.io/checkmate",
-	changelog: "https://github.com/bluewave-labs/bluewave-uptime/releases",
-};
-
-const PATH_MAP = {
-	monitors: "Dashboard",
-	pagespeed: "Dashboard",
-	infrastructure: "Dashboard",
-	["distributed-uptime"]: "Dashboard",
-	account: "Account",
-	settings: "Settings",
-};
-
-/**
- * @component
- * Sidebar component serves as a sidebar containing a menu.
- *
- * @returns {JSX.Element} The JSX element representing the Sidebar component.
- */
-
-function Sidebar() {
+const Sidebar = () => {
 	const theme = useTheme();
-	const navigate = useNavigate();
-	const location = useLocation();
-	const dispatch = useDispatch();
 	const { t } = useTranslation();
-	const authState = useSelector((state) => state.auth);
+	const navigate = useNavigate();
+	// Redux state
+	const collapsed = useSelector((state) => state.ui.sidebar.collapsed);
 
 	const menu = getMenu(t);
 	const otherMenuItems = getOtherMenuItems(t);
 	const accountMenuItems = getAccountMenuItems(t);
-	const collapsed = useSelector((state) => state.ui.sidebar.collapsed);
-	const [open, setOpen] = useState({ Dashboard: false, Account: false, Other: false });
-	const [anchorEl, setAnchorEl] = useState(null);
-	const [popup, setPopup] = useState();
-	const { user } = useSelector((state) => state.auth);
-	const distributedUptimeEnabled = useSelector(
-		(state) => state.ui.distributedUptimeEnabled
-	);
-	const sidebarRef = useRef(null);
-	const [sidebarReady, setSidebarReady] = useState(false);
-	const TRANSITION_DURATION = 200;
 
-	useEffect(() => {
-		if (!collapsed) {
-			setSidebarReady(false);
-			const timeout = setTimeout(() => {
-				setSidebarReady(true);
-			}, TRANSITION_DURATION);
-			return () => clearTimeout(timeout);
-		} else {
-			setSidebarReady(false);
-		}
-	}, [collapsed]);
-
-	const renderAccountMenuItems = () => {
-		let filteredAccountMenuItems = [...accountMenuItems];
-
-		// If the user is in demo mode, remove the "Password" option
-		if (user.role?.includes("demo")) {
-			filteredAccountMenuItems = filteredAccountMenuItems.filter(
-				(item) => item.name !== "Password"
-			);
-		}
-
-		// If the user is NOT a superadmin, remove the "Team" option
-		if (user.role && !user.role.includes("superadmin")) {
-			filteredAccountMenuItems = filteredAccountMenuItems.filter(
-				(item) => item.name !== "Team"
-			);
-		}
-
-		return filteredAccountMenuItems.map((item) => (
-			<MenuItem
-				key={item.name}
-				onClick={() => {
-					closePopup();
-					navigate(item.path);
-				}}
-				sx={{
-					gap: theme.spacing(2),
-					borderRadius: theme.shape.borderRadius,
-					pl: theme.spacing(4),
-				}}
-			>
-				{item.icon}
-				{item.name}
-			</MenuItem>
-		));
-	};
-
-	const openPopup = (event, id) => {
-		setAnchorEl(event.currentTarget);
-		setPopup(id);
-	};
-	const closePopup = () => {
-		setAnchorEl(null);
-	};
-
-	/**
-	 * Handles logging out the user
-	 *
-	 */
-	const logout = async () => {
-		// Clear auth state
-		dispatch(clearAuthState());
-		dispatch(clearUptimeMonitorState());
-		navigate("/login");
-	};
-
-	useEffect(() => {
-		const matchedKey = Object.keys(PATH_MAP).find((key) =>
-			location.pathname.includes(key)
-		);
-
-		if (matchedKey) {
-			setOpen((prev) => ({ ...prev, [PATH_MAP[matchedKey]]: true }));
-		}
-	}, [location]);
-
-	const iconColor = theme.palette.primary.contrastTextTertiary;
-	const sidebarClassName = `${collapsed ? "collapsed" : "expanded"} ${sidebarReady ? "sidebar-ready" : ""}`;
-
-	/* TODO refactor this, there are a some ternaries and comments in the return  */
 	return (
 		<Stack
+			height="100vh"
+			width={
+				collapsed
+					? "var(--env-var-side-bar-collapsed-width)"
+					: "var(--env-var-side-bar-width)"
+			}
 			component="aside"
-			ref={sidebarRef}
-			className={sidebarClassName}
-			/* TODO general padding should be here */
-			py={theme.spacing(6)}
+			position="sticky"
+			top={0}
+			borderRight={`1px solid ${theme.palette.primary.lowContrast}`}
+			paddingTop={theme.spacing(6)}
+			paddingBottom={theme.spacing(6)}
 			gap={theme.spacing(6)}
-			/* TODO set all style in this sx if possible (when general)
-			This is the top lever for styles
-			*/
 			sx={{
-				position: "relative",
-				borderRight: `1px solid ${theme.palette.primary.lowContrast}`,
-				borderColor: theme.palette.primary.lowContrast,
-				borderRadius: 0,
-				backgroundColor: theme.palette.primary.main,
-				"& :is(p, span, .MuiListSubheader-root)": {
-					/* 
-					Text color for unselected menu items and menu headings
-					Secondary contrast text against main background
-					*/
-					color: theme.palette.primary.contrastTextSecondary,
-				},
-				"& .MuiList-root svg path": {
-					/* Menu Icons */
-					stroke: iconColor,
-				},
-				"& .selected-path": {
-					/* Selected menu item */
-					backgroundColor: theme.palette.secondary.main,
-					"&:hover": {
-						backgroundColor: theme.palette.secondary.main,
-					},
-					"& .MuiListItemIcon-root svg path": {
-						/* Selected menu item icon */
-						stroke: theme.palette.secondary.contrastText,
-					},
-					"& .MuiListItemText-root :is(p, span)": {
-						/* Selected menu item text */
-						color: theme.palette.secondary.contrastText,
-					},
-				},
-				"& .MuiListItemButton-root:not(.selected-path)": {
-					transition: "background-color .3s",
-					" &:hover": {
-						/* Hovered menu item bg color */
-						backgroundColor: theme.palette.tertiary.main,
-						"& :is(p, span)": {
-							/* Hovered menu item text color */
-							color: theme.palette.tertiary.contrastText,
-						},
-					},
-				},
+				transition: "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)",
 			}}
 		>
-			<IconButton
+			<CollapseButton collapsed={collapsed} />
+			<Logo collapsed={collapsed} />
+			<List
+				component="nav"
+				aria-labelledby="nested-menu-subheader"
+				disablePadding
 				sx={{
-					position: "absolute",
-					/* TODO 60 is a magic number. if logo chnges size this might break */
-					top: 60,
-					right: 0,
-					transform: `translate(50%, 0)`,
-					backgroundColor: theme.palette.tertiary.main,
-					border: 1,
-					borderColor: theme.palette.primary.lowContrast,
-					p: theme.spacing(2.5),
-					"& svg": {
-						width: theme.spacing(8),
-						height: theme.spacing(8),
-						"& path": {
-							/* TODO this should be set at the top level if possible */
-							stroke: theme.palette.primary.contrastTextSecondary,
-						},
-					},
-					"&:focus": { outline: "none" },
-					"&:hover": {
-						backgroundColor: theme.palette.primary.lowContrast,
-						borderColor: theme.palette.primary.lowContrast,
-					},
+					px: theme.spacing(6),
+					height: "100%",
 				}}
-				onClick={() => {
-					setOpen((prev) =>
-						Object.fromEntries(Object.keys(prev).map((key) => [key, false]))
+			>
+				{menu.map((item) => {
+					const selected = location.pathname.startsWith(`/${item.path}`);
+					return (
+						<NavItem
+							key={item.path}
+							item={item}
+							collapsed={collapsed}
+							selected={selected}
+							onClick={() => navigate(`/${item.path}`)}
+						/>
 					);
-					dispatch(toggleSidebar());
-				}}
-			>
-				{collapsed ? <ArrowRight /> : <ArrowLeft />}
-			</IconButton>
-			{/* TODO Alignment done using padding. Use single source of truth to that*/}
-			<Stack
-				pt={theme.spacing(6)}
-				pb={theme.spacing(12)}
-				pl={theme.spacing(8)}
-			>
-				{/* TODO Abstract logo into component */}
-				{/* TODO Turn logo into a link */}
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(4)}
-					onClick={() => navigate("/")}
-					sx={{ cursor: "pointer" }}
-				>
-					<Stack
-						justifyContent="center"
-						alignItems="center"
-						minWidth={theme.spacing(16)}
-						minHeight={theme.spacing(16)}
-						pl="1px"
-						fontSize={18}
-						color={theme.palette.accent.contrastText}
-						sx={{
-							position: "relative",
-							backgroundColor: theme.palette.accent.main,
-							color: theme.palette.accent.contrastText,
-							borderRadius: theme.shape.borderRadius,
-							userSelect: "none",
-						}}
-					>
-						C
-					</Stack>
-					<Typography
-						component="span"
-						mt={theme.spacing(2)}
-						sx={{ opacity: 0.8, fontWeight: 500 }}
-					>
-						Checkmate
-					</Typography>
-				</Stack>
-			</Stack>
-			<Box
-				sx={{
-					flexGrow: 1,
-					overflow: "auto",
-					overflowX: "hidden",
-					"&::-webkit-scrollbar": {
-						width: theme.spacing(2),
-					},
-					"&::-webkit-scrollbar-thumb": {
-						backgroundColor: theme.palette.primary.lowContrast,
-						borderRadius: theme.spacing(4),
-					},
-				}}
-			>
-				<List
-					component="nav"
-					aria-labelledby="nested-menu-subheader"
-					disablePadding
-					sx={{
-						px: theme.spacing(6),
-						height: "100%",
-						/* overflow: "hidden", */
-					}}
-				>
-					{menu.map((item) => {
-						if (
-							item.path === "distributed-uptime" &&
-							distributedUptimeEnabled === false
-						) {
-							return null;
-						}
-						return item.path ? (
-							/* If item has a path */
-							<Tooltip
-								key={item.path}
-								placement="right"
-								title={collapsed ? item.name : ""}
-								slotProps={{
-									popper: {
-										modifiers: [
-											{
-												name: "offset",
-												options: {
-													offset: [0, -16],
-												},
-											},
-										],
-									},
-								}}
-								disableInteractive
-							>
-								<ListItemButton
-									className={
-										location.pathname.startsWith(`/${item.path}`) ? "selected-path" : ""
-									}
-									onClick={() => navigate(`/${item.path}`)}
-									sx={{
-										height: "37px",
-										gap: theme.spacing(4),
-										borderRadius: theme.shape.borderRadius,
-										px: theme.spacing(4),
-										pl: theme.spacing(5),
-									}}
-								>
-									<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-									<ListItemText>{item.name}</ListItemText>
-								</ListItemButton>
-							</Tooltip>
-						) : collapsed ? (
-							/* TODO Do we ever get here? If item does not have a path and collapsed state is true  */
-							<React.Fragment key={item.name}>
-								<Tooltip
-									placement="right"
-									title={collapsed ? item.name : ""}
-									slotProps={{
-										popper: {
-											modifiers: [
-												{
-													name: "offset",
-													options: {
-														offset: [0, -16],
-													},
-												},
-											],
-										},
-									}}
-									disableInteractive
-								>
-									<ListItemButton
-										className={
-											Boolean(anchorEl) && popup === item.name ? "selected-path" : ""
-										}
-										onClick={(event) => openPopup(event, item.name)}
-										sx={{
-											position: "relative",
-											gap: theme.spacing(4),
-											borderRadius: theme.shape.borderRadius,
-											px: theme.spacing(4),
-										}}
-									>
-										<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-										<ListItemText>{item.name}</ListItemText>
-									</ListItemButton>
-								</Tooltip>
-								<Menu
-									className="sidebar-popup"
-									anchorEl={anchorEl}
-									open={Boolean(anchorEl) && popup === item.name}
-									onClose={closePopup}
-									disableScrollLock
-									anchorOrigin={{
-										vertical: "top",
-										horizontal: "right",
-									}}
-									slotProps={{
-										paper: {
-											sx: {
-												mt: theme.spacing(-2),
-												ml: theme.spacing(1),
-											},
-										},
-									}}
-									MenuListProps={{ sx: { px: 1, py: 2 } }}
-									sx={{
-										ml: theme.spacing(8),
-										/* TODO what is this selection? */
-										"& .selected-path": {
-											backgroundColor: theme.palette.tertiary.main,
-										},
-									}}
-								>
-									{item.nested.map((child) => {
-										if (
-											child.name === "Team" &&
-											authState.user?.role &&
-											!authState.user.role.includes("superadmin")
-										) {
-											return null;
-										}
-
-										return (
-											<MenuItem
-												className={
-													location.pathname.includes(child.path) ? "selected-path" : ""
-												}
-												key={child.path}
-												onClick={() => {
-													const url = URL_MAP[child.path];
-													if (url) {
-														window.open(url, "_blank", "noreferrer");
-													} else {
-														navigate(`/${child.path}`);
-													}
-													closePopup();
-												}}
-												sx={{
-													gap: theme.spacing(4),
-													opacity: 0.9,
-													/* TODO this has no effect? */
-													"& svg": {
-														"& path": {
-															stroke: theme.palette.primary.contrastTextTertiary,
-															strokeWidth: 1.1,
-														},
-													},
-												}}
-											>
-												{child.icon}
-												{child.name}
-											</MenuItem>
-										);
-									})}
-								</Menu>
-							</React.Fragment>
-						) : (
-							/* TODO Do we ever get here? If item does not have a path and collapsed state is false */
-							<React.Fragment key={item.name}>
-								<ListItemButton
-									onClick={() =>
-										setOpen((prev) => ({
-											...Object.fromEntries(Object.keys(prev).map((key) => [key, false])),
-											[item.name]: !prev[item.name],
-										}))
-									}
-									sx={{
-										gap: theme.spacing(4),
-										borderRadius: theme.shape.borderRadius,
-										px: theme.spacing(4),
-									}}
-								>
-									<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-									<ListItemText>{item.name}</ListItemText>
-									{open[`${item.name}`] ? <ArrowUp /> : <ArrowDown />}
-								</ListItemButton>
-								<Collapse
-									in={open[`${item.name}`]}
-									timeout="auto"
-								>
-									<List
-										component="div"
-										disablePadding
-										sx={{ pl: theme.spacing(12) }}
-									>
-										{item.nested.map((child) => {
-											if (
-												child.name === "Team" &&
-												authState.user?.role &&
-												!authState.user.role.includes("superadmin")
-											) {
-												return null;
-											}
-
-											return (
-												<ListItemButton
-													className={
-														location.pathname.includes(child.path) ? "selected-path" : ""
-													}
-													key={child.path}
-													onClick={() => {
-														const url = URL_MAP[child.path];
-														if (url) {
-															window.open(url, "_blank", "noreferrer");
-														} else {
-															navigate(`/${child.path}`);
-														}
-													}}
-													sx={{
-														gap: theme.spacing(4),
-														borderRadius: theme.shape.borderRadius,
-														pl: theme.spacing(4),
-														"&::before": {
-															content: `""`,
-															position: "absolute",
-															top: 0,
-															left: "-7px",
-															height: "100%",
-															borderLeft: 1,
-															borderLeftColor: theme.palette.primary.lowContrast,
-														},
-														"&:last-child::before": {
-															height: "50%",
-														},
-														"&::after": {
-															content: `""`,
-															position: "absolute",
-															top: "45%",
-															left: "-8px",
-															height: "3px",
-															width: "3px",
-															borderRadius: "50%",
-															backgroundColor: theme.palette.primary.lowContrast,
-														},
-														"&.selected-path::after": {
-															/* TODO what is this selector doing? */
-															backgroundColor: theme.palette.primary.contrastTextTertiary,
-															transform: "scale(1.2)",
-														},
-													}}
-												>
-													<ListItemIcon sx={{ minWidth: 0 }}>{child.icon}</ListItemIcon>
-													<ListItemText>{child.name}</ListItemText>
-												</ListItemButton>
-											);
-										})}
-									</List>
-								</Collapse>
-							</React.Fragment>
-						);
-					})}
-				</List>
-			</Box>
-
+				})}
+			</List>
 			{!collapsed && <StarPrompt />}
-
 			<List
 				component="nav"
 				disablePadding
 				sx={{ px: theme.spacing(6) }}
 			>
 				{otherMenuItems.map((item) => {
-					return item.path ? (
-						<Tooltip
+					const selected = location.pathname.startsWith(`/${item.path}`);
+
+					return (
+						<NavItem
 							key={item.path}
-							placement="right"
-							title={collapsed ? item.name : ""}
-							slotProps={{
-								popper: {
-									modifiers: [
-										{
-											name: "offset",
-											options: {
-												offset: [0, -16],
-											},
-										},
-									],
-								},
-							}}
-							disableInteractive
-						>
-							<ListItemButton
-								className={
-									location.pathname.startsWith(`/${item.path}`) ? "selected-path" : ""
+							item={item}
+							collapsed={collapsed}
+							selected={selected}
+							onClick={() => {
+								const url = URL_MAP[item.path];
+								if (url) {
+									window.open(url, "_blank", "noreferrer");
+								} else {
+									navigate(`/${item.path}`);
 								}
-								onClick={() => {
-									const url = URL_MAP[item.path];
-									if (url) {
-										window.open(url, "_blank", "noreferrer");
-									} else {
-										navigate(`/${item.path}`);
-									}
-								}}
-								sx={{
-									height: "37px",
-									gap: theme.spacing(4),
-									borderRadius: theme.shape.borderRadius,
-									px: theme.spacing(4),
-									pl: theme.spacing(5),
-								}}
-							>
-								<ListItemIcon sx={{ minWidth: 0 }}>{item.icon} </ListItemIcon>
-								<ListItemText>{item.name} </ListItemText>{" "}
-							</ListItemButton>
-						</Tooltip>
-					) : null;
+							}}
+						/>
+					);
 				})}
 			</List>
 			<Divider sx={{ mt: "auto", borderColor: theme.palette.primary.lowContrast }} />
-			<Stack
-				direction="row"
-				height="50px"
-				alignItems="center"
-				py={theme.spacing(4)}
-				px={theme.spacing(8)}
-				gap={theme.spacing(2)}
-				borderRadius={theme.shape.borderRadius}
-			>
-				{collapsed ? (
-					<>
-						<Tooltip
-							title="Options"
-							slotProps={{
-								popper: {
-									modifiers: [
-										{
-											name: "offset",
-											options: {
-												offset: [0, -10],
-											},
-										},
-									],
-								},
-							}}
-							disableInteractive
-						>
-							<IconButton
-								onClick={(event) => openPopup(event, "logout")}
-								sx={{ p: 0, "&:focus": { outline: "none" } }}
-							>
-								<Avatar small={true} />
-							</IconButton>
-						</Tooltip>
-					</>
-				) : (
-					<>
-						<Avatar small={true} />
-						<Box
-							ml={theme.spacing(2)}
-							sx={{ maxWidth: "50%", overflow: "hidden" }}
-						>
-							<Typography
-								component="span"
-								fontWeight={500}
-								sx={{
-									display: "block",
-									whiteSpace: "nowrap",
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-								}}
-							>
-								{authState.user?.firstName} {authState.user?.lastName}
-							</Typography>
-							<Typography sx={{ textTransform: "capitalize" }}>
-								{authState.user?.role?.includes("superadmin")
-									? t("roles.superAdmin")
-									: authState.user?.role?.includes("admin")
-										? t("roles.admin")
-										: authState.user?.role?.includes("user")
-											? t("roles.teamMember")
-											: authState.user?.role?.includes("demo")
-												? t("roles.demoUser")
-												: authState.user?.role}
-							</Typography>
-						</Box>
-						<Stack
-							className="sidebar-delay-fade"
-							flexDirection={"row"}
-							marginLeft={"auto"}
-							columnGap={theme.spacing(2)}
-						>
-							<ThemeSwitch color={iconColor} />
-							<Tooltip
-								title={t("navControls")}
-								disableInteractive
-							>
-								<IconButton
-									sx={{
-										ml: "auto",
-										mr: "-8px",
-										"&:focus": { outline: "none" },
-										alignSelf: "center",
-										padding: "10px",
-
-										"& svg": {
-											width: "22px",
-											height: "22px",
-										},
-										"& svg path": {
-											/* Vertical three dots */
-											stroke: iconColor,
-										},
-									}}
-									onClick={(event) => openPopup(event, "logout")}
-								>
-									<DotsVertical />
-								</IconButton>
-							</Tooltip>
-						</Stack>
-					</>
-				)}
-				<Menu
-					className="sidebar-popup"
-					anchorEl={anchorEl}
-					open={Boolean(anchorEl) && popup === "logout"}
-					onClose={closePopup}
-					disableScrollLock
-					anchorOrigin={{
-						vertical: "top",
-						horizontal: "right",
-					}}
-					slotProps={{
-						paper: {
-							sx: {
-								marginTop: theme.spacing(-4),
-								marginLeft: collapsed ? theme.spacing(2) : 0,
-							},
-						},
-					}}
-					MenuListProps={{
-						sx: {
-							p: 2,
-							"& li": { m: 0 },
-							"& li:has(.MuiBox-root):hover": {
-								backgroundColor: "transparent",
-							},
-						},
-					}}
-					sx={{
-						ml: theme.spacing(4),
-					}}
-				>
-					{collapsed && (
-						<MenuItem sx={{ cursor: "default", minWidth: "50%" }}>
-							<Box
-								mb={theme.spacing(2)}
-								sx={{
-									minWidth: "50%",
-									maxWidth: "max-content",
-									overflow: "visible",
-									whiteSpace: "nowrap",
-								}}
-							>
-								<Typography
-									component="span"
-									fontWeight={500}
-									fontSize={13}
-									sx={{
-										display: "block",
-										whiteSpace: "nowrap",
-										overflow: "visible",
-										// wordBreak: "break-word",
-										textOverflow: "clip",
-									}}
-								>
-									{authState.user?.firstName} {authState.user?.lastName}
-								</Typography>
-								<Typography
-									sx={{
-										textTransform: "capitalize",
-										fontSize: 12,
-										whiteSpace: "nowrap",
-										overflow: "visible",
-										// wordBreak: "break-word",
-									}}
-								>
-									{authState.user?.role}
-								</Typography>
-							</Box>
-						</MenuItem>
-					)}
-					{/* TODO Do we need two dividers? */}
-					{collapsed && <Divider />}
-					{/* <Divider /> */}
-					{renderAccountMenuItems()}
-					<MenuItem
-						onClick={logout}
-						sx={{
-							gap: theme.spacing(4),
-							borderRadius: theme.shape.borderRadius,
-							pl: theme.spacing(4),
-							"& svg path": {
-								stroke: iconColor,
-							},
-						}}
-					>
-						<LogoutSvg />
-						{t("menu.logOut", "Log out")}
-					</MenuItem>
-				</Menu>
-			</Stack>
+			<AuthFooter
+				collapsed={collapsed}
+				accountMenuItems={accountMenuItems}
+			/>
 		</Stack>
 	);
-}
+};
 
 export default Sidebar;

client/src/Components/StarPrompt/index.jsx

@@ -33,7 +33,6 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
 				borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
 				borderRadius: 0,
 				gap: theme.spacing(1.5),
-				backgroundColor: theme.palette.primary.main,
 			}}
 		>
 			<Stack

client/src/Components/StatBox/index.jsx

@@ -2,7 +2,7 @@ import { Stack, Typography } from "@mui/material";
 import Image from "../Image";
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
-import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
+import { useMonitorUtils } from "../../Hooks/useMonitorUtils";
 
 /**
  * StatBox Component
@@ -41,7 +41,7 @@ const StatBox = ({
 	sx,
 }) => {
 	const theme = useTheme();
-	const { statusToTheme } = useUtils();
+	const { statusToTheme } = useMonitorUtils();
 	const themeColor = statusToTheme[status];
 
 	const statusBoxStyles = gradient
@@ -136,8 +136,8 @@ const StatBox = ({
 };
 
 StatBox.propTypes = {
-	heading: PropTypes.string.isRequired,
-	subHeading: PropTypes.node.isRequired,
+	heading: PropTypes.string,
+	subHeading: PropTypes.node,
 	gradient: PropTypes.bool,
 	status: PropTypes.string,
 	sx: PropTypes.object,

client/src/Components/StatusBoxes/index.jsx

@@ -4,7 +4,7 @@ import SkeletonLayout from "./skeleton";
 // Utils
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
-const StatusBoxes = ({ shouldRender, flexWrap = "nowrap", children }) => {
+const StatusBoxes = ({ shouldRender = true, flexWrap = "nowrap", children }) => {
 	const theme = useTheme();
 	if (!shouldRender) {
 		return (

client/src/Components/Tab/index.jsx

@@ -16,6 +16,7 @@ const CustomTabList = ({ value, onChange, children, ...props }) => {
 	return (
 		<Box
 			sx={{
+				marginBottom: theme.spacing(12),
 				borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
 				"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
 			}}

client/src/Components/Table/TablePagination/Actions/index.jsx

@@ -1,9 +1,7 @@
 import PropTypes from "prop-types";
 import { Box, Button } from "@mui/material";
-import LeftArrowDouble from "../../../../assets/icons/left-arrow-double.svg?react";
-import RightArrowDouble from "../../../../assets/icons/right-arrow-double.svg?react";
-import LeftArrow from "../../../../assets/icons/left-arrow.svg?react";
-import RightArrow from "../../../../assets/icons/right-arrow.svg?react";
+import LeftArrow from "../../../ArrowLeft";
+import RightArrow from "../../../ArrowRight";
 import { useTheme } from "@emotion/react";
 
 TablePaginationActions.propTypes = {
@@ -50,7 +48,7 @@ function TablePaginationActions({ count, page, rowsPerPage, onPageChange }) {
 				disabled={page === 0}
 				aria-label="first page"
 			>
-				<LeftArrowDouble />
+				<LeftArrow type="double" />
 			</Button>
 			<Button
 				variant="group"
@@ -74,7 +72,7 @@ function TablePaginationActions({ count, page, rowsPerPage, onPageChange }) {
 				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 				aria-label="last page"
 			>
-				<RightArrowDouble />
+				<RightArrow type="double" />
 			</Button>
 		</Box>
 	);

client/src/Components/Table/TableUtils.js

@@ -0,0 +1,11 @@
+export const createHeaderFactory = (getCellSx = () => {}) => {
+	return ({ id, content, onClick = () => {}, render = () => {} }) => {
+		return {
+			id,
+			content,
+			onClick,
+			getCellSx,
+			render,
+		};
+	};
+};

client/src/Components/Table/index.jsx

@@ -70,6 +70,9 @@ const DataTable = ({
 						backgroundColor: theme.palette.primary.main,
 						color: theme.palette.primary.contrastTextSecondary,
 					},
+					"& .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root": {
+						borderBottom: "none",
+					},
 				}}
 			>
 				<TableHead>

client/src/Components/TextLink/index.jsx

@@ -0,0 +1,36 @@
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import Link from "@mui/material/Link";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import { Link as RouterLink } from "react-router-dom";
+
+const TextLink = ({ text, linkText, href, target = "_self" }) => {
+	const theme = useTheme();
+
+	return (
+		<Stack
+			direction="row"
+			gap={theme.spacing(4)}
+		>
+			<Typography>{text}</Typography>
+			<Link
+				color="accent"
+				to={href}
+				component={RouterLink}
+				target={target}
+			>
+				{linkText}
+			</Link>
+		</Stack>
+	);
+};
+
+TextLink.propTypes = {
+	text: PropTypes.string,
+	linkText: PropTypes.string,
+	href: PropTypes.string,
+	target: PropTypes.string,
+};
+
+export default TextLink;

client/src/Components/ThemeSwitch/index.jsx

@@ -14,10 +14,12 @@ import SunAndMoonIcon from "./SunAndMoonIcon";
 import { useDispatch, useSelector } from "react-redux";
 import { setMode } from "../../Features/UI/uiSlice";
 import "./index.css";
+import { useTranslation } from "react-i18next";
 
 const ThemeSwitch = ({ width = 48, height = 48, color }) => {
 	const mode = useSelector((state) => state.ui.mode);
 	const dispatch = useDispatch();
+	const { t } = useTranslation();
 
 	const toggleTheme = () => {
 		dispatch(setMode(mode === "light" ? "dark" : "light"));
@@ -26,7 +28,7 @@ const ThemeSwitch = ({ width = 48, height = 48, color }) => {
 	return (
 		<IconButton
 			id="theme-toggle"
-			title="Toggles light & dark"
+			title={t("common.buttons.toggleTheme")}
 			className={`theme-${mode}`}
 			aria-label="auto"
 			aria-live="polite"

client/src/Components/Toast/body.jsx

@@ -0,0 +1,34 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+
+const ToastBody = ({ body }) => {
+	const theme = useTheme();
+
+	if (Array.isArray(body)) {
+		return (
+			<Stack gap={theme.spacing(2)}>
+				{body.map((item, idx) => (
+					<Typography
+						key={`item-${idx}`}
+						color={theme.palette.secondary.contrastText}
+					>
+						{item}
+					</Typography>
+				))}
+			</Stack>
+		);
+	} else if (typeof body === "string") {
+		return <Typography color={theme.palette.secondary.contrastText}>{body}</Typography>;
+	}
+
+	return null;
+};
+
+ToastBody.propTypes = {
+	body: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+};
+
+export default ToastBody;

client/src/Components/Toast/index.jsx

@@ -0,0 +1,96 @@
+import Stack from "@mui/material/Stack";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import ToastBody from "./body";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
+import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
+import CloseIcon from "@mui/icons-material/Close";
+
+// Utils
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+
+const icons = {
+	info: <InfoOutlinedIcon />,
+	error: <ErrorOutlineOutlinedIcon />,
+	warning: <WarningAmberOutlinedIcon />,
+};
+
+const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
+	const theme = useTheme();
+	const icon = icons[variant];
+
+	return (
+		<Stack
+			gap={theme.spacing(2)}
+			paddingTop={theme.spacing(4)}
+			paddingRight={theme.spacing(8)}
+			paddingBottom={theme.spacing(4)}
+			paddingLeft={theme.spacing(8)}
+			backgroundColor={theme.palette.alert.main}
+			border={`solid 1px ${theme.palette.alert.contrastText}`}
+			borderRadius={theme.shape.borderRadius}
+		>
+			<Stack
+				direction="row"
+				gap={theme.spacing(8)}
+				justifyContent="space-between"
+				alignItems="center"
+			>
+				{hasIcon && icon}
+				{title && (
+					<Typography
+						fontWeight="700"
+						color={theme.palette.secondary.contrastText}
+					>
+						{title}
+					</Typography>
+				)}
+				{title && (
+					<IconButton onClick={onClick}>
+						<CloseIcon />
+					</IconButton>
+				)}
+			</Stack>
+
+			<Stack
+				direction="row"
+				gap={theme.spacing(2)}
+				alignItems="center"
+			>
+				<ToastBody body={body} />
+				{!title && (
+					<IconButton onClick={onClick}>
+						<CloseIcon />
+					</IconButton>
+				)}
+			</Stack>
+			{hasDismiss && (
+				<Button
+					variant="text"
+					color="info"
+					onClick={onClick}
+					sx={{
+						fontWeight: "600",
+						width: "fit-content",
+					}}
+				>
+					Dismiss
+				</Button>
+			)}
+		</Stack>
+	);
+};
+
+export default Toast;
+
+Toast.propTypes = {
+	variant: PropTypes.string.isRequired,
+	title: PropTypes.string,
+	body: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+	hasDismiss: PropTypes.bool,
+	hasIcon: PropTypes.bool,
+	onClick: PropTypes.func,
+};

client/src/Features/Auth/authSlice.js

@@ -44,7 +44,6 @@ export const login = createAsyncThunk("auth/login", async (form, thunkApi) => {
 
 export const update = createAsyncThunk("auth/update", async (data, thunkApi) => {
 	const { localData: form } = data;
-	const user = thunkApi.getState().auth.user;
 	try {
 		const fd = new FormData();
 		form.firstName && fd.append("firstName", form.firstName);
@@ -60,7 +59,6 @@ export const update = createAsyncThunk("auth/update", async (data, thunkApi) =>
 		form.deleteProfileImage && fd.append("deleteProfileImage", form.deleteProfileImage);
 
 		const res = await networkService.updateUser({
-			userId: user._id,
 			form: fd,
 		});
 		return res.data;
@@ -77,10 +75,8 @@ export const update = createAsyncThunk("auth/update", async (data, thunkApi) =>
 });
 
 export const deleteUser = createAsyncThunk("auth/delete", async (_, thunkApi) => {
-	const user = thunkApi.getState().auth.user;
-
 	try {
-		const res = await networkService.deleteUser({ userId: user._id });
+		const res = await networkService.deleteUser();
 		return res.data;
 	} catch (error) {
 		if (error.response && error.response.data) {