Fix email template loading and conditional TLS configuration

## Changes

### Server-side (emailService.js)
- Fixed template path resolution: Changed default from `templates/` to `src/templates/`
  to correctly locate email templates in the project structure
- Added EMAIL_TEMPLATE_PATH environment variable support for Docker deployments
- Added input validation (validateEmailParams, validateFromAddress) to catch
  missing fields before attempting to send
- Implemented conditional TLS configuration - TLS settings only applied when
  systemEmailSecure is enabled, allowing services like Resend to work properly
- Added stronger content validation to prevent empty emails from being sent
- Added transporter.verify() before sending to catch configuration issues early
- Improved error logging with more context for debugging

### Client-side (SettingsEmail.jsx)
- Refactored settings preview to use buildEmailConfigPreview() builder function
- TLS fields now only shown in JSON preview when secure mode is enabled

Fixes #3054

.coderabbit.yml

@@ -0,0 +1 @@
+release_notes: false

.github/scripts/download-translations.js

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

.github/workflows/check-build.yml

@@ -0,0 +1,40 @@
+name: Build Check (Client & Server)
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  build-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 install
+
+      - name: Check client build
+        working-directory: client
+        run: npm run build
+  build-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 install
+
+      - name: Check server build
+        working-directory: server
+        run: npm run build

.github/workflows/check-format.yml

@@ -16,7 +16,7 @@ jobs:
 
       - name: Install client dependencies
         working-directory: client
-        run: npm ci
+        run: npm install
 
       - name: Check client formatting
         working-directory: client
@@ -34,7 +34,7 @@ jobs:
 
       - name: Install server dependencies
         working-directory: server
-        run: npm ci
+        run: npm install
 
       - name: Check server formatting
         working-directory: server

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

.github/workflows/staging-deploy.yml

@@ -88,3 +88,4 @@ jobs:
             docker compose down
             docker compose pull
             docker compose up -d
+            docker system prune -af

.gitignore

@@ -0,0 +1,5 @@
+.idea
+.vscode
+.VSCodeCounter
+*.sh
+mongo

CONTRIBUTING.md

@@ -6,10 +6,35 @@ We truly appreciate all kinds of contributions — code, ideas, translations or
 
 Before you start, please take a moment to read the relevant section. It helps us review and accept contributions faster, and makes the whole process smoother for everyone. 💚
 
-PS: **We work closely with contributors on our [Discord channel](https://discord.com/invite/NAb6H3UTjK)**. You’ll find community members, core maintainers, and first-timers helping each other out.
+PS: **We work closely with contributors on our [Discord channel](https://discord.com/invite/NAb6H3UTjK)**. You'll find community members, core maintainers, and first-timers helping each other out.
 
 ---
 
+
+## 🚀 Quick Setup Checklist
+
+Before you dive in, make sure you have these installed:
+
+```bash
+# Check Node.js (v16+ required)
+node --version
+
+# Check npm
+npm --version
+
+# Check Docker
+docker --version
+
+# Check Git
+git --version
+```
+
+**New to contributing?** Start here:
+1. Pick a [`good-first-issue`](https://github.com/bluewave-labs/checkmate/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
+2. Comment that you'd like to work on it
+3. Follow the [setup guide](#set-up-checkmate-locally) below
+4. Join our [Discord](https://discord.com/invite/NAb6H3UTjK) if you get stuck
+
 ## Table of contents
 
 - [How do I...?](#how-do-i)
@@ -32,12 +57,12 @@ PS: **We work closely with contributors on our [Discord channel](https://discord
 
 ### Get help or ask a question?
 
-Ask anything in our [Discord server](https://discord.com/invite/NAb6H3UTjK) — we’re friendly and happy to help. [Our core contributors](https://github.com/bluewave-labs/checkmate?tab=readme-ov-file#-contributing) are active and ready to support you. You can also use [GitHub Discussions](https://github.com/bluewave-labs/Checkmate/discussions) section to ask your questions.
+Ask anything in our [Discord server](https://discord.com/invite/NAb6H3UTjK) — we're friendly and happy to help. [Our core contributors](https://github.com/bluewave-labs/checkmate?tab=readme-ov-file#-contributing) are active and ready to support you. You can also use [GitHub Discussions](https://github.com/bluewave-labs/Checkmate/discussions) section to ask your questions.
 
 ### Report a bug?
 
 1. Search [existing issues](https://github.com/bluewave-labs/checkmate/issues).
-2. If it’s not listed, open a **new issue**.
+2. If it's not listed, open a **new issue**.
 3. Include as much detail as possible: what happened, what you expected, and steps to reproduce. Logs and screenshots help.
 
 ### Suggest a new feature?
@@ -48,19 +73,175 @@ Ask anything in our [Discord server](https://discord.com/invite/NAb6H3UTjK) —
 
 ### Set up Checkmate locally?
 
-Frontend & backend:
+#### Prerequisites
+
+- Node.js (with npm)
+- Docker 
+- Git
+
+#### Step 1: Clone the Repository
+
+```bash
+git clone https://github.com/bluewave-labs/Checkmate.git
+cd Checkmate
+```
+
+#### Step 2: Set Up Docker Containers (MongoDB)
+
+Navigate to the Docker dev directory:
+
+```bash
+cd docker/dev
+```
+
+Build the Docker images:
+
+```bash
+./build_images.sh
+```
+
+Run MongoDB container:
+
+```bash
+docker run -d -p 27017:27017 -v uptime_mongo_data:/data/db --name uptime_database_mongo mongo:6.0
+```
+
+Navigate back to the root directory:
+
+```bash
+cd ../..
+```
+
+#### Step 3: Set Up the Backend (Server)
+
+Navigate to the server directory:
+
+```bash
+cd server
+```
+
+Install dependencies:
+
 ```bash
 npm install
+```
+
+Create a `.env` file in the `server` directory with the following minimum required configuration:
+
+```env
+CLIENT_HOST="http://localhost:5173"
+JWT_SECRET="my_secret_key_change_this"
+DB_CONNECTION_STRING="mongodb://localhost:27017/uptime_db"
+TOKEN_TTL="99d"
+ORIGIN="localhost"
+LOG_LEVEL="debug"
+```
+
+**Environment Variables Explained:**
+
+- `CLIENT_HOST`: Frontend URL (default: http://localhost:5173)
+- `JWT_SECRET`: Secret key for JWT tokens (change to something secure)
+- `DB_CONNECTION_STRING`: MongoDB connection URL
+- `ORIGIN`: Origin for CORS purposes
+- `TOKEN_TTL`: Token time to live (in vercel/ms format)
+- `LOG_LEVEL`: Debug level (debug, info, warn, error)
+
+Start the backend server:
+
+```bash
 npm run dev
 ```
 
-By default, the frontend expects the backend on `http://localhost:3001`. Update configs if needed.
+The server will run at `http://localhost:52345`.
+
+#### Step 4: Set Up the Frontend (Client)
+
+Open a new terminal window and navigate to the client directory from the root:
+
+```bash
+cd client
+```
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Create a `.env` file in the `client` directory:
+
+```env
+VITE_APP_API_BASE_URL="http://localhost:52345/api/v1"
+VITE_APP_LOG_LEVEL="debug"
+```
+
+**Environment Variables Explained:**
+
+- `VITE_APP_API_BASE_URL`: Backend API URL
+- `VITE_APP_LOG_LEVEL`: Log level (none, error, warn, debug, info)
+
+Start the frontend:
+
+```bash
+npm run dev
+```
+
+The client will run at `http://localhost:5173`.  
+
+#### Step 5: Access the Application
+
+Open your browser and navigate to:
+
+- **Frontend**: http://localhost:5173
+- **Backend API**: http://localhost:52345
+- **API Documentation**: http://localhost:52345/api-docs
+
+#### Managing Docker Containers
+
+Stop containers:
+
+```bash
+docker stop uptime_database_mongo
+```
+
+Start containers:
+
+```bash
+docker start uptime_database_mongo
+```
+
+Remove containers (if needed):
+
+```bash
+docker rm uptime_database_mongo
+```
+
+#### Troubleshooting
+
+**Port already in use:**
+
+- Check if another service is using ports 5173, 52345, 27017, or 6379
+- Stop the conflicting service or change the port in `.env` files
+
+**MongoDB connection issues:**
+
+- Verify container is running: `docker ps`
+- Check container logs: `docker logs uptime_database_mongo` 
+
+**Module not found errors:**
+
+- Ensure you ran `npm install` in both `client` and `server` directories
+
+**Need more help?**
+
+- Check the [full documentation](https://docs.checkmate.so)
+- Ask on [Discord](https://discord.com/invite/NAb6H3UTjK)
 
 ### Start contributing code?
 
 1. Pick or open an issue (check `good-first-issue`s first)
 2. (optional but highly suggested) Read a detailed structure of [Checkmate](https://deepwiki.com/bluewave-labs/Checkmate) if you would like to deep dive into the architecture.
-3. Ask to be assigned. If there is alrady someone assigned and it's been more than 7 days, you can raise the flag and ask to be assigned as well.
+3. Ask to be assigned. If there is already someone assigned and it's been more than 7 days, you can raise the flag and ask to be assigned as well.
 4. Create a branch from `develop`.
 5. Write your code.
 6. Run and test locally.
@@ -75,6 +256,7 @@ Docs live in [checkmate-documentation](https://github.com/bluewave-labs/checkmat
 ### Help with translations?
 
 We use [PoEditor](https://poeditor.com) for translations. You can:
+
 - [Sign up and join your language team](https://poeditor.com/join/project/lRUoGZFCsJ).
 - Translate UI strings.
 - Ask questions on Discord in the relevant #translations channel.
@@ -84,6 +266,7 @@ Make sure all new UI strings in code use `t('key')`.
 ### Submit a pull request?
 
 Follow the [pull request checklist](#pull-request-checklist). Your PR should:
+
 - Be focused on one issue.
 - Be tested locally.
 - Use our linting and translation rules.
@@ -123,7 +306,6 @@ If one or more of these are missing, we may ask you to update your pull request
 
 ## Branching model
 
-
 - Code contributions should go to the `develop` branch.
 - `master` is used for stable releases.
 - Use descriptive branch names, like `fix/login-error` or `feat/add-alerts`.
@@ -137,13 +319,10 @@ If one or more of these are missing, we may ask you to update your pull request
 
 ## Thank you
 
-Thanks for making Checkmate better. We mean it. Whether it’s your first pull request or your 50th, we’re excited to build with you.
+Thanks for making Checkmate better. We mean it. Whether it's your first pull request or your 50th, we're excited to build with you.
 
-
-PS: feel free to introduce yourself on [Discord](https://discord.gg/YOUR-DISCORD-LINK) and say hi. 
+PS: feel free to introduce yourself on [Discord](https://discord.gg/NAb6H3UTjK) and say hi.
 
 -- Checkmate team
 
 Also make sure you read the [document about how to make a good pull request](/PULLREQUESTS.md).
-
-

README.md

@@ -52,7 +52,7 @@ Usage instructions can be found [here](https://docs.checkmate.so/checkmate-2.1).
 
 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/), [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.
+Alternatively, you can also use [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) (South Africa) 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
 
@@ -91,6 +91,7 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
 - Website monitoring
 - Page speed monitoring
 - Infrastructure monitoring (memory, disk usage, CPU performance, network etc) - requires [Capture](https://github.com/bluewave-labs/capture) agent
+  - Selective disk monitoring with mountpoint selection
 - Docker monitoring
 - Ping monitoring
 - SSL monitoring
@@ -162,6 +163,7 @@ Here's how you can contribute:
 4. Open an issue if you believe you've encountered a bug.
 5. Check for good-first-issue's if you are a newcomer.
 6. Make a pull request to add new features/make quality-of-life improvements/fix bugs.
+7. Check out this interactive walkthrough of the `Checkmate` codebase on CodeCanvas [here](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=Checkmate&owner=bluewave-labs&branch=develop&OnboardingTutorial=true). To refine existing dataflow simulation or create new ones, follow the quick tutorial [here](https://docs.code-canvas.com/updating-diagram).
 
 <a href="https://github.com/bluewave-labs/checkmate/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=bluewave-labs/checkmate" />

charts/helm/checkmate/INSTALLATION.md

@@ -21,7 +21,12 @@ cd checkmate/charts/helm/checkmate
 Edit `values.yaml` to update:
 - `client.ingress.host` and `server.ingress.host` with your domain names
 - `server.protocol` (usually http or https)
+- **If upgrading**: Migrate persistence settings from flat structure to nested:
+  - Old: `persistence.mongodbSize` → New: `persistence.mongo.size`
+  - Old: `persistence.redisSize` → New: `persistence.redis.size`
+  - Add: `persistence.mongo.storageClass` and `persistence.redis.storageClass` (leave empty for default)
 - Secrets under the `secrets` section (`JWT_SECRET`, email credentials, API keys, etc.) — replace all change_me values
+- **For TLS/HTTPS**: Configure ingress TLS settings (see section below)
 
 ### 3. Deploy the Helm chart
 ```bash
@@ -37,3 +42,75 @@ kubectl get svc
 ```
 
 Once all pods are `Running` and `Ready`, you can access Checkmate via the configured ingress hosts.
+
+## Enabling TLS/HTTPS with cert-manager
+
+If you have [cert-manager](https://cert-manager.io/) installed in your cluster, you can enable automatic TLS certificate provisioning using Let's Encrypt or other certificate issuers.
+
+### Prerequisites
+- cert-manager installed in your cluster
+- A ClusterIssuer or Issuer configured (e.g., `letsencrypt-prod`)
+
+### Configuration
+
+Edit `values.yaml` to enable TLS (and update protocols to https):
+
+```yaml
+client:
+  protocol: https
+  ingress:
+    enabled: true
+    host: checkmate.example.com
+    className: nginx
+    annotations:
+      cert-manager.io/cluster-issuer: "letsencrypt-prod"
+    tls:
+      enabled: true
+      secretName: checkmate-client-tls
+
+server:
+  protocol: https
+  ingress:
+    enabled: true
+    host: checkmate.example.com
+    className: nginx
+    annotations:
+      cert-manager.io/cluster-issuer: "letsencrypt-prod"
+    tls:
+      enabled: true
+      secretName: checkmate-server-tls
+```
+
+### Alternative: Using --set flags
+
+You can also enable TLS during installation using Helm's `--set` flags:
+
+```bash
+helm install checkmate ./charts/helm/checkmate \
+  --set client.protocol=https \
+  --set server.protocol=https \
+  --set client.ingress.annotations."cert-manager\.io/cluster-issuer"="letsencrypt-prod" \
+  --set client.ingress.tls.enabled=true \
+  --set client.ingress.tls.secretName=checkmate-client-tls \
+  --set server.ingress.annotations."cert-manager\.io/cluster-issuer"="letsencrypt-prod" \
+  --set server.ingress.tls.enabled=true \
+  --set server.ingress.tls.secretName=checkmate-server-tls
+```
+
+### Verification
+
+After deployment, cert-manager will automatically create the TLS secrets. You can verify the certificate status:
+
+```bash
+# Check certificates
+kubectl get certificates
+
+# Check certificate details
+kubectl describe certificate checkmate-client-tls
+kubectl describe certificate checkmate-server-tls
+
+# Verify the secrets were created
+kubectl get secrets | grep checkmate-tls
+```
+
+The ingress will automatically use these secrets to enable HTTPS access to your Checkmate instance.

charts/helm/checkmate/templates/_prechecks.yaml

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

@@ -1,17 +1,25 @@
 apiVersion: apps/v1
 kind: Deployment
 metadata:
-  name: client
+  name: checkmate-client
 spec:
   replicas: 1
   selector:
     matchLabels:
-      app: client
+      app: checkmate-client
   template:
     metadata:
       labels:
-        app: client
+        app: checkmate-client
     spec:
+    {{- with .Values.client.affinity }}
+      affinity:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+    {{- with .Values.client.tolerations }}
+      tolerations:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
       containers:
         - name: client
           image: {{ .Values.client.image }}
@@ -20,3 +28,17 @@ spec:
           env:
             - name: UPTIME_APP_API_BASE_URL
               value: "{{ .Values.server.protocol }}://{{ .Values.server.ingress.host }}/api/v1"
+            - name: UPTIME_APP_CLIENT_HOST
+              value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"
+          volumeMounts:
+            - name: config-volume
+              mountPath: /etc/nginx/conf.d/default.conf
+              subPath: default.conf
+          {{- with .Values.client.resources }}
+          resources:
+              {{- tpl ( . | toYaml) $ | nindent 12 }}
+          {{- end }}
+      volumes:
+        - name: config-volume
+          configMap:
+            name: checkmate-server-nginx-cm

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

@@ -2,10 +2,21 @@
 apiVersion: networking.k8s.io/v1
 kind: Ingress
 metadata:
-  name: client-ingress
+  name: checkmate-client-ingress
+  {{- if .Values.client.ingress.annotations }}
   annotations:
-    nginx.ingress.kubernetes.io/rewrite-target: /
+    {{- range $key, $value := .Values.client.ingress.annotations }}
+    {{ $key }}: {{ $value | quote }}
+    {{- end }}
+  {{- end }}
 spec:
+  ingressClassName: {{ .Values.client.ingress.className }}
+  {{- if .Values.client.ingress.tls.enabled }}
+  tls:
+    - hosts:
+        - {{ .Values.client.ingress.host }}
+      secretName: {{ default (printf "%s-client-tls" .Release.Name) .Values.client.ingress.tls.secretName }}
+  {{- end }}
   rules:
     - host: {{ .Values.client.ingress.host }}
       http:
@@ -14,7 +25,7 @@ spec:
             pathType: Prefix
             backend:
               service:
-                name: client
+                name: checkmate-client
                 port:
                   number: {{ .Values.client.port }}
 {{- end }}

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

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

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

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

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

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

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

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

@@ -0,0 +1,44 @@
+apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  name: checkmate-mongodb
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: checkmate-mongodb
+  template:
+    metadata:
+      labels:
+        app: checkmate-mongodb
+    spec:
+    {{- with .Values.mongodb.affinity }}
+      affinity:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+    {{- with .Values.mongodb.tolerations }}
+      tolerations:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+      containers:
+        - name: mongodb
+          image: {{ .Values.mongodb.image }}
+          ports:
+            - containerPort: {{ .Values.mongodb.port }}
+          command: ["mongod", "--quiet", "--bind_ip_all"]
+          volumeMounts:
+            - name: checkmate-mongo-persistent-storage
+              mountPath: /data/db
+          {{- with .Values.mongodb.resources }}
+          resources:
+              {{- tpl ( . | toYaml) $ | nindent 12 }}
+          {{- end }}
+  volumeClaimTemplates:
+    - metadata:
+        name: checkmate-mongo-persistent-storage
+      spec:
+        storageClassName: {{ .Values.persistence.mongo.storageClass | quote }}
+        accessModes: ["ReadWriteOnce"]
+        resources:
+          requests:
+            storage: {{ .Values.persistence.mongo.size | default "5Gi" | quote }}

charts/helm/checkmate/templates/prechecks.yaml

@@ -0,0 +1,48 @@
+{{- 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 }}
+
+{{- $serverProtocol := .Values.server.protocol }}
+{{- if not (or (eq $serverProtocol "http") (eq $serverProtocol "https")) }}
+  {{- fail "server.protocol must be either 'http' or 'https'" }}
+{{- end }}
+
+{{- $clientProtocol := .Values.client.protocol }}
+{{- if not (or (eq $clientProtocol "http") (eq $clientProtocol "https")) }}
+  {{- fail "client.protocol must be either 'http' or 'https'" }}
+{{- end }}
+
+{{/* Enforce protocol when TLS is enabled to avoid mixed-content */}}
+{{- if and .Values.client.ingress.tls.enabled (ne $clientProtocol "https") }}
+  {{- fail "client.ingress.tls.enabled is true but client.protocol is not 'https'. Set client.protocol: https to avoid mixed content." }}
+{{- end }}
+
+{{- if and .Values.server.ingress.tls.enabled (ne $serverProtocol "https") }}
+  {{- fail "server.ingress.tls.enabled is true but server.protocol is not 'https'. Set server.protocol: https to ensure correct API base URL." }}
+{{- end }}
+
+{{/* If client runs on https, API must also be https to avoid mixed content */}}
+{{- if and (eq $clientProtocol "https") (ne $serverProtocol "https") }}
+  {{- fail "client.protocol is 'https' but server.protocol is not. Set server.protocol: https to prevent browser mixed-content issues." }}
+{{- end }}
+
+{{/* Fail early if TLS enabled without cert-manager annotations (cluster-issuer or issuer) */}}
+{{- $cAnn := .Values.client.ingress.annotations | default dict }}
+{{- $sAnn := .Values.server.ingress.annotations | default dict }}
+
+{{- $clientHasIssuer := or (hasKey $cAnn "cert-manager.io/cluster-issuer") (hasKey $cAnn "cert-manager.io/issuer") }}
+{{- $serverHasIssuer := or (hasKey $sAnn "cert-manager.io/cluster-issuer") (hasKey $sAnn "cert-manager.io/issuer") }}
+
+{{- if and .Values.client.ingress.tls.enabled (not $clientHasIssuer) }}
+  {{- fail "client.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
+{{- end }}
+
+{{- if and .Values.server.ingress.tls.enabled (not $serverHasIssuer) }}
+  {{- fail "server.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
+{{- end }}
+
+{{/* Secret name can be omitted; we default to <release>-client|server-tls in templates */}}

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

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

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

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

@@ -1,9 +1,11 @@
+{{- if .Values.redis.enabled }}
 apiVersion: v1
 kind: Service
 metadata:
-  name: redis
+  name: checkmate-redis
 spec:
   selector:
-    app: redis
+    app: checkmate-redis
   ports:
     - port: {{ .Values.redis.port }}
+{{- end }}

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

@@ -0,0 +1,33 @@
+{{- if .Values.redis.enabled }}
+apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  name: checkmate-redis
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: checkmate-redis
+  template:
+    metadata:
+      labels:
+        app: checkmate-redis
+    spec:
+      containers:
+        - name: redis
+          image: {{ .Values.redis.image }}
+          ports:
+            - containerPort: {{ .Values.redis.port }}
+          volumeMounts:
+            - name: redis-data
+              mountPath: /data
+  volumeClaimTemplates:
+    - metadata:
+        name: checkmate-redis-persistent-storage
+      spec:
+        storageClassName: {{ .Values.persistence.redis.storageClass | quote }}
+        accessModes: ["ReadWriteOnce"]
+        resources:
+          requests:
+            storage: {{ .Values.persistence.redis.size | default "1Gi" | quote }}
+{{- end }}

charts/helm/checkmate/templates/secrets.yaml

@@ -4,10 +4,6 @@
   {{- 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:

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

@@ -1,17 +1,25 @@
 apiVersion: apps/v1
 kind: Deployment
 metadata:
-  name: server
+  name: checkmate-server
 spec:
   replicas: 1
   selector:
     matchLabels:
-      app: server
+      app: checkmate-server
   template:
     metadata:
       labels:
-        app: server
+        app: checkmate-server
     spec:
+    {{- with .Values.server.affinity }}
+      affinity:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+    {{- with .Values.server.tolerations }}
+      tolerations:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
       containers:
         - name: server
           image: {{ .Values.server.image }}
@@ -20,3 +28,10 @@ spec:
           envFrom:
             - secretRef:
                 name: checkmate-secrets
+          {{- with .Values.server.resources }}
+          resources:
+              {{- tpl ( . | toYaml) $ | nindent 12 }}
+          {{- end }}
+          env:
+          - name: CLIENT_HOST
+            value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"

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

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

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

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

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

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

charts/helm/checkmate/values.yaml

@@ -1,41 +1,70 @@
 client:
-  image: ghcr.io/bluewave-labs/checkmate-client:v2.3
+  image: ghcr.io/bluewave-labs/checkmate-client:v3.2.0
   port: 80
+  protocol: http
   ingress:
     enabled: true
     host: change_me
+    className: nginx
+    annotations: {}
+    # Example annotations for cert-manager:
+    # annotations:
+    #   cert-manager.io/cluster-issuer: "letsencrypt-prod"
+    tls:
+      enabled: false
+      # secretName: {{ .Release.Name }}-client-tls  # Optional; defaults to <release>-client-tls if omitted
+      # Note: when enabling TLS, also set client.protocol: https and add
+      # a cert-manager issuer annotation (e.g. cert-manager.io/cluster-issuer: "letsencrypt-prod").
+      # The secret will be automatically created by cert-manager when using the cert-manager.io/cluster-issuer annotation
 
 server:
-  image: ghcr.io/bluewave-labs/checkmate-backend:v2.3
+  image: ghcr.io/bluewave-labs/checkmate-backend:v3.2.0
   port: 52345
-  protocol: change_me
+  protocol: http
   ingress:
     enabled: true
     host: change_me
+    className: nginx
+    annotations: {}
+    # Example annotations for cert-manager:
+    # annotations:
+    #   cert-manager.io/cluster-issuer: "letsencrypt-prod"
+    tls:
+      enabled: false
+      # secretName: {{ .Release.Name }}-server-tls  # Optional; defaults to <release>-server-tls if omitted
+      # Note: when enabling TLS, also set server.protocol: https and add
+      # a cert-manager issuer annotation (e.g. cert-manager.io/cluster-issuer: "letsencrypt-prod").
+      # The secret will be automatically created by cert-manager when using the cert-manager.io/cluster-issuer annotation
 
 redis:
+  enabled: false
   image: redis:7.2
   port: 6379
 
 mongodb:
-  image: mongo:7.0
+  image: ghcr.io/bluewave-labs/checkmate-mongo:v3.2.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
+#  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://checkmate-mongodb.namespace.svc:27017/uptime_db
+  CLIENT_HOST: change_me
+#  REDIS_HOST: redis
+#  REDIS_PORT: "6379"
+#  DB_TYPE: MongoDB
+#  TOKEN_TTL: 99d
+#  REFRESH_TOKEN_TTL: 99d
 
 persistence:
-  mongodbSize: 5Gi
-  redisSize: 1Gi
+  mongo:
+    size: 5Gi
+    storageClass: ""
+  redis:
+    size: 1Gi
+    storageClass: ""

client/.env.production

@@ -1,3 +1,4 @@
 VITE_APP_API_BASE_URL=UPTIME_APP_API_BASE_URL
+VITE_APP_API_V2_BASE_URL=UPTIME_APP_API_V2_BASE_URL
 VITE_APP_CLIENT_HOST=UPTIME_APP_CLIENT_HOST
 VITE_APP_LOG_LEVEL=UPTIME_APP_LOG_LEVEL

client/.gitignore

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

client/package-lock.json

@@ -11,6 +11,7 @@
 				"@emotion/react": "^11.13.3",
 				"@emotion/styled": "^11.13.0",
 				"@hello-pangea/dnd": "^18.0.0",
+				"@hookform/resolvers": "5.2.2",
 				"@mui/icons-material": "6.4.11",
 				"@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
 				"@mui/material": "6.4.11",
@@ -21,11 +22,14 @@
 				"dayjs": "1.11.13",
 				"flag-icons": "7.3.2",
 				"html2canvas": "^1.4.1",
-				"i18next": "^24.2.2",
+				"human-interval": "2.0.1",
+				"i18next": "25.4.2",
 				"joi": "17.13.3",
 				"mui-color-input": "^6.0.0",
+				"pretty-ms": "9.3.0",
 				"react": "18.3.1",
 				"react-dom": "^18.2.0",
+				"react-hook-form": "7.63.0",
 				"react-i18next": "^15.4.0",
 				"react-icons": "5.5.0",
 				"react-redux": "9.2.0",
@@ -34,9 +38,12 @@
 				"react-toastify": "^10.0.5",
 				"recharts": "2.15.2",
 				"redux-persist": "6.0.0",
-				"vite-plugin-svgr": "^4.2.0"
+				"swr": "2.3.6",
+				"vite-plugin-svgr": "^4.2.0",
+				"zod": "4.1.11"
 			},
 			"devDependencies": {
+				"@types/node": "24.5.2",
 				"@types/react": "^18.2.66",
 				"@types/react-dom": "^18.2.22",
 				"@vitejs/plugin-react": "^4.2.1",
@@ -45,10 +52,8 @@
 				"eslint-plugin-react-hooks": "^5.0.0",
 				"eslint-plugin-react-refresh": "^0.4.6",
 				"prettier": "^3.3.3",
-				"vite": "6.3.5"
-			},
-			"optionalDependencies": {
-				"@rollup/rollup-linux-arm64-musl": "4.41.0"
+				"typescript": "5.9.3",
+				"vite": "6.3.6"
 			}
 		},
 		"node_modules/@ampproject/remapping": {
@@ -92,6 +97,7 @@
 			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.1.tgz",
 			"integrity": "sha512-IaaGWsQqfsQWVLqMn9OB92MNN7zukfVA4s7KKAI0KfrrDsZ0yhi5uV4baBuLuN7n3vsZpwP8asPPcVwApxvjBQ==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.0",
 				"@babel/code-frame": "^7.27.1",
@@ -283,9 +289,9 @@
 			}
 		},
 		"node_modules/@babel/runtime": {
-			"version": "7.27.1",
-			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.1.tgz",
-			"integrity": "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==",
+			"version": "7.28.3",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.3.tgz",
+			"integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -403,6 +409,7 @@
 			"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
 			"integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.18.3",
 				"@emotion/babel-plugin": "^11.13.5",
@@ -446,6 +453,7 @@
 			"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz",
 			"integrity": "sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.18.3",
 				"@emotion/babel-plugin": "^11.13.5",
@@ -1040,6 +1048,18 @@
 				"react-dom": "^18.0.0 || ^19.0.0"
 			}
 		},
+		"node_modules/@hookform/resolvers": {
+			"version": "5.2.2",
+			"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
+			"integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
+			"license": "MIT",
+			"dependencies": {
+				"@standard-schema/utils": "^0.3.0"
+			},
+			"peerDependencies": {
+				"react-hook-form": "^7.55.0"
+			}
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.13.0",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1356,6 +1376,7 @@
 			"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.11.tgz",
 			"integrity": "sha512-k2D3FLJS+/qD0qnd6ZlAjGFvaaxe1Dl10NyvpeDzIebMuYdn8VqYe6XBgGueEAtnzSJM4V03VD9kb5Fi24dnTA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.26.0",
 				"@mui/core-downloads-tracker": "^6.4.11",
@@ -1520,7 +1541,6 @@
 			"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.1.0.tgz",
 			"integrity": "sha512-4Kck4jxhqF6YxNwJdSae1WgDfXVg0lIH6JVJ7gtuFfuKcQCgomJxPvUEOySTFRPz1IZzwz5OAcToskRdffElDA==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.27.1",
 				"@mui/utils": "^7.1.0",
@@ -1548,7 +1568,6 @@
 			"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.1.0.tgz",
 			"integrity": "sha512-/OM3S8kSHHmWNOP+NH9xEtpYSG10upXeQ0wLZnfDgmgadTAk5F4MQfFLyZ5FCRJENB3eRzltMmaNl6UtDnPovw==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.27.1",
 				"@mui/types": "^7.4.2",
@@ -1579,7 +1598,6 @@
 			"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.1.0.tgz",
 			"integrity": "sha512-m0mJ0c6iRC+f9hMeRe0W7zZX1wme3oUX0+XTVHjPG7DJz6OdQ6K/ggEOq7ZdwilcpdsDUwwMfOmvO71qDkYd2w==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.27.1",
 				"@emotion/cache": "^11.13.5",
@@ -1655,7 +1673,6 @@
 			"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.1.0.tgz",
 			"integrity": "sha512-/OM3S8kSHHmWNOP+NH9xEtpYSG10upXeQ0wLZnfDgmgadTAk5F4MQfFLyZ5FCRJENB3eRzltMmaNl6UtDnPovw==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.27.1",
 				"@mui/types": "^7.4.2",
@@ -2715,6 +2732,17 @@
 			"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
 			"license": "MIT"
 		},
+		"node_modules/@types/node": {
+			"version": "24.5.2",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.5.2.tgz",
+			"integrity": "sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==",
+			"devOptional": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"undici-types": "~7.12.0"
+			}
+		},
 		"node_modules/@types/parse-json": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -2732,6 +2760,7 @@
 			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.22.tgz",
 			"integrity": "sha512-vUhG0YmQZ7kL/tmKLrD3g5zXbXXreZXB3pmROW8bg3CnLnpjkRVwUlLne7Ufa2r9yJ8+/6B73RzhAek5TBKh2Q==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/prop-types": "*",
 				"csstype": "^3.0.2"
@@ -2795,6 +2824,7 @@
 			"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -3030,13 +3060,13 @@
 			}
 		},
 		"node_modules/axios": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
-			"integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+			"version": "1.12.2",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+			"integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
 			"license": "MIT",
 			"dependencies": {
 				"follow-redirects": "^1.15.6",
-				"form-data": "^4.0.0",
+				"form-data": "^4.0.4",
 				"proxy-from-env": "^1.1.0"
 			}
 		},
@@ -3101,6 +3131,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"caniuse-lite": "^1.0.30001716",
 				"electron-to-chromium": "^1.5.149",
@@ -3513,7 +3544,8 @@
 			"version": "1.11.13",
 			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
 			"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/debug": {
 			"version": "4.4.1",
@@ -3599,6 +3631,15 @@
 				"node": ">=0.4.0"
 			}
 		},
+		"node_modules/dequal": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/doctrine": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -3911,6 +3952,7 @@
 			"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.2.0",
 				"@eslint-community/regexpp": "^4.6.1",
@@ -4342,14 +4384,15 @@
 			}
 		},
 		"node_modules/form-data": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-			"integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+			"integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
 			"license": "MIT",
 			"dependencies": {
 				"asynckit": "^0.4.0",
 				"combined-stream": "^1.0.8",
 				"es-set-tostringtag": "^2.1.0",
+				"hasown": "^2.0.2",
 				"mime-types": "^2.1.12"
 			},
 			"engines": {
@@ -4689,10 +4732,19 @@
 				"node": ">=8.0.0"
 			}
 		},
+		"node_modules/human-interval": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/human-interval/-/human-interval-2.0.1.tgz",
+			"integrity": "sha512-r4Aotzf+OtKIGQCB3odUowy4GfUDTy3aTWTfLd7ZF2gBCy3XW3v/dJLRefZnOFFnjqs5B1TypvS8WarpBkYUNQ==",
+			"license": "MIT",
+			"dependencies": {
+				"numbered": "^1.1.0"
+			}
+		},
 		"node_modules/i18next": {
-			"version": "24.2.3",
-			"resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.3.tgz",
-			"integrity": "sha512-lfbf80OzkocvX7nmZtu7nSTNbrTYR52sLWxPtlXX1zAhVw8WEnFk4puUkCR4B1dNQwbSpEHHHemcZu//7EcB7A==",
+			"version": "25.4.2",
+			"resolved": "https://registry.npmjs.org/i18next/-/i18next-25.4.2.tgz",
+			"integrity": "sha512-gD4T25a6ovNXsfXY1TwHXXXLnD/K2t99jyYMCSimSCBnBRJVQr5j+VAaU83RJCPzrTGhVQ6dqIga66xO2rtd5g==",
 			"funding": [
 				{
 					"type": "individual",
@@ -4708,8 +4760,9 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
-				"@babel/runtime": "^7.26.10"
+				"@babel/runtime": "^7.27.6"
 			},
 			"peerDependencies": {
 				"typescript": "^5"
@@ -5523,6 +5576,12 @@
 			"integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
 			"license": "MIT"
 		},
+		"node_modules/numbered": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/numbered/-/numbered-1.1.0.tgz",
+			"integrity": "sha512-pv/ue2Odr7IfYOO0byC1KgBI10wo5YDauLhxY6/saNzAdAs0r1SotGCPzzCLNPL0xtrAwWRialLu23AAu9xO1g==",
+			"license": "MIT"
+		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5738,6 +5797,18 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/parse-ms": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
+			"integrity": "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/path-exists": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5865,6 +5936,21 @@
 				"url": "https://github.com/prettier/prettier?sponsor=1"
 			}
 		},
+		"node_modules/pretty-ms": {
+			"version": "9.3.0",
+			"resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.3.0.tgz",
+			"integrity": "sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==",
+			"license": "MIT",
+			"dependencies": {
+				"parse-ms": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/prop-types": {
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5942,6 +6028,7 @@
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
 			"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"loose-envify": "^1.1.0",
 				"scheduler": "^0.23.2"
@@ -5950,6 +6037,23 @@
 				"react": "^18.3.1"
 			}
 		},
+		"node_modules/react-hook-form": {
+			"version": "7.63.0",
+			"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
+			"integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==",
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/react-hook-form"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17 || ^18 || ^19"
+			}
+		},
 		"node_modules/react-i18next": {
 			"version": "15.5.1",
 			"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.5.1.tgz",
@@ -6142,7 +6246,8 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
 			"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/redux-persist": {
 			"version": "6.0.0",
@@ -6280,6 +6385,7 @@
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.0.tgz",
 			"integrity": "sha512-HqMFpUbWlf/tvcxBFNKnJyzc7Lk+XO3FGc3pbNBLqEbOz0gPLRgcrlS3UF4MfUrVlstOaP/q0kM6GVvi+LrLRg==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/estree": "1.0.7"
 			},
@@ -6748,6 +6854,19 @@
 			"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
 			"license": "MIT"
 		},
+		"node_modules/swr": {
+			"version": "2.3.6",
+			"resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
+			"integrity": "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==",
+			"license": "MIT",
+			"dependencies": {
+				"dequal": "^2.0.3",
+				"use-sync-external-store": "^1.4.0"
+			},
+			"peerDependencies": {
+				"react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/text-segmentation": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
@@ -6896,6 +7015,21 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/typescript": {
+			"version": "5.9.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+			"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+			"devOptional": true,
+			"license": "Apache-2.0",
+			"peer": true,
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=14.17"
+			}
+		},
 		"node_modules/unbox-primitive": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -6915,6 +7049,13 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "7.12.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.12.0.tgz",
+			"integrity": "sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==",
+			"devOptional": true,
+			"license": "MIT"
+		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -6996,10 +7137,11 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "6.3.5",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
-			"integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+			"version": "6.3.6",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz",
+			"integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.25.0",
 				"fdir": "^6.4.4",
@@ -7220,20 +7362,6 @@
 			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
 			"license": "ISC"
 		},
-		"node_modules/yaml": {
-			"version": "2.8.0",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
-			"integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
-			"license": "ISC",
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"yaml": "bin.mjs"
-			},
-			"engines": {
-				"node": ">= 14.6"
-			}
-		},
 		"node_modules/yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -7246,6 +7374,15 @@
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/zod": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-4.1.11.tgz",
+			"integrity": "sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/colinhacks"
+			}
 		}
 	}
 }

client/package.json

@@ -5,8 +5,8 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
-		"build": "vite build",
-		"build-dev": "vite build --mode development",
+		"build": "tsc -b && vite build",
+		"build-dev": "tsc -b && vite build --mode development",
 		"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
 		"preview": "vite preview",
 		"format": "prettier --write .",
@@ -16,6 +16,7 @@
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
 		"@hello-pangea/dnd": "^18.0.0",
+		"@hookform/resolvers": "5.2.2",
 		"@mui/icons-material": "6.4.11",
 		"@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
 		"@mui/material": "6.4.11",
@@ -26,11 +27,14 @@
 		"dayjs": "1.11.13",
 		"flag-icons": "7.3.2",
 		"html2canvas": "^1.4.1",
-		"i18next": "^24.2.2",
+		"human-interval": "2.0.1",
+		"i18next": "25.4.2",
 		"joi": "17.13.3",
 		"mui-color-input": "^6.0.0",
+		"pretty-ms": "9.3.0",
 		"react": "18.3.1",
 		"react-dom": "^18.2.0",
+		"react-hook-form": "7.63.0",
 		"react-i18next": "^15.4.0",
 		"react-icons": "5.5.0",
 		"react-redux": "9.2.0",
@@ -39,17 +43,12 @@
 		"react-toastify": "^10.0.5",
 		"recharts": "2.15.2",
 		"redux-persist": "6.0.0",
-		"vite-plugin-svgr": "^4.2.0"
-	},
-	"unusedDepencies": {
-		"@solana/wallet-adapter-base": "0.9.25",
-		"@solana/wallet-adapter-material-ui": "0.16.35",
-		"@solana/wallet-adapter-react": "0.15.37",
-		"@solana/wallet-adapter-react-ui": "0.9.37",
-		"@solana/wallet-adapter-wallets": "0.19.34",
-		"@solana/web3.js": "1.98.0"
+		"swr": "2.3.6",
+		"vite-plugin-svgr": "^4.2.0",
+		"zod": "4.1.11"
 	},
 	"devDependencies": {
+		"@types/node": "24.5.2",
 		"@types/react": "^18.2.66",
 		"@types/react-dom": "^18.2.22",
 		"@vitejs/plugin-react": "^4.2.1",
@@ -58,9 +57,7 @@
 		"eslint-plugin-react-hooks": "^5.0.0",
 		"eslint-plugin-react-refresh": "^0.4.6",
 		"prettier": "^3.3.3",
-		"vite": "6.3.5"
-	},
-	"optionalDependencies": {
-		"@rollup/rollup-linux-arm64-musl": "4.41.0"
+		"typescript": "5.9.3",
+		"vite": "6.3.6"
 	}
 }

client/src/App.jsx

@@ -9,8 +9,7 @@ import { CssBaseline, GlobalStyles } from "@mui/material";
 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";
+import AppLayout from "@/Components/v1/Layouts/AppLayout";
 
 function App() {
 	const mode = useSelector((state) => state.ui.mode);
@@ -24,16 +23,12 @@ function App() {
 	}, []);
 
 	return (
-		/* Extract Themeprovider, baseline and global styles to Styles */
 		<ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
-			<WalletProvider>
-				<CssBaseline />
-
-				<AppLayout>
-					<Routes />
-				</AppLayout>
-				<ToastContainer />
-			</WalletProvider>
+			<CssBaseline />
+			<AppLayout>
+				<Routes />
+			</AppLayout>
+			<ToastContainer />
 		</ThemeProvider>
 	);
 }

client/src/Components/LanguageSelector.jsx

@@ -16,7 +16,7 @@ const langMap = {
 const LanguageSelector = () => {
 	const { i18n } = useTranslation();
 	const theme = useTheme();
-	const { language } = useSelector((state) => state.ui);
+	const { language = "en" } = useSelector((state) => state.ui);
 	const dispatch = useDispatch();
 	const handleChange = (event) => {
 		const newLang = event.target.value;

client/src/Components/v1/ActionsMenu/index.jsx

@@ -2,17 +2,17 @@
 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";
+import Settings from "../../../assets/icons/settings-bold.svg?react";
+import Dialog from "../Dialog/index.jsx";
 
 // Utils
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
-import { createToast } from "../../Utils/toastUtils";
+import { createToast } from "../../../Utils/toastUtils.jsx";
 
 import PropTypes from "prop-types";
-import { usePauseMonitor, useDeleteMonitor } from "../../Hooks/monitorHooks";
+import { usePauseMonitor, useDeleteMonitor } from "../../../Hooks/monitorHooks.js";
 
 const ActionsMenu = ({
 	monitor,
@@ -31,7 +31,8 @@ const ActionsMenu = ({
 	const handleRemove = async (event) => {
 		event.preventDefault();
 		event.stopPropagation();
-		let monitor = { _id: actions.id };
+		let monitor = { id: actions.id };
+		console.log(monitor);
 		await deleteMonitor({ monitor });
 		updateRowCallback();
 	};
@@ -39,7 +40,7 @@ const ActionsMenu = ({
 	const handlePause = async () => {
 		try {
 			setIsLoading(true);
-			await pauseMonitor({ monitorId: monitor._id });
+			await pauseMonitor({ monitorId: monitor.id });
 			pauseCallback();
 		} catch (error) {
 			createToast({ body: "Failed to pause monitor." });
@@ -72,7 +73,7 @@ const ActionsMenu = ({
 				aria-label="monitor actions"
 				onClick={(event) => {
 					event.stopPropagation();
-					openMenu(event, monitor._id, monitor.type === "ping" ? null : monitor.url);
+					openMenu(event, monitor.id, monitor.type === "ping" ? null : monitor.url);
 				}}
 				sx={{
 					"&:focus": {
@@ -197,6 +198,7 @@ const ActionsMenu = ({
 				confirmationButtonLabel="Delete"
 				/* Do we need stop propagation? */
 				onConfirm={(e) => {
+					console.log(e);
 					e.stopPropagation();
 					handleRemove(e);
 				}}
@@ -210,7 +212,7 @@ const ActionsMenu = ({
 
 ActionsMenu.propTypes = {
 	monitor: PropTypes.shape({
-		_id: PropTypes.string,
+		id: PropTypes.string,
 		url: PropTypes.string,
 		type: PropTypes.string,
 		isActive: PropTypes.bool,

client/src/Components/v1/ArrowLeft/index.jsx

@@ -1,6 +1,6 @@
-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 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 }) => {

client/src/Components/v1/ArrowRight/index.jsx

@@ -1,5 +1,5 @@
-import RightArrow from "../../assets/icons/right-arrow.svg?react";
-import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
+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 }) => {

client/src/Components/v1/Breadcrumbs/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { Box, Breadcrumbs as MUIBreadcrumbs } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
-import ArrowRight from "../ArrowRight";
+import ArrowRight from "../ArrowRight/index.jsx";
 import "./index.css";
 
 /**

client/src/Components/v1/Charts/AreaChart/index.jsx

@@ -61,7 +61,7 @@ import {
 	Tooltip,
 	ResponsiveContainer,
 } from "recharts";
-import { createGradient } from "../Utils/gradientUtils";
+import { createGradient } from "../Utils/gradientUtils.jsx";
 import PropTypes from "prop-types";
 import { useTheme } from "@mui/material";
 import { useId } from "react";

client/src/Components/v1/Charts/BarChart/index.jsx

@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Tooltip, Typography } from "@mui/material";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
 import { useEffect, useState } from "react";
 import "./index.css";
 import { useSelector } from "react-redux";
@@ -103,7 +103,7 @@ const BarChart = ({ checks = [] }) => {
 							</>
 						}
 						placement="top"
-						key={`check-${check?._id}`}
+						key={`check-${check?.id}`}
 						slotProps={{
 							popper: {
 								className: "bar-tooltip",
@@ -145,7 +145,7 @@ const BarChart = ({ checks = [] }) => {
 							position="relative"
 							width="9px"
 							height="100%"
-							backgroundColor={theme.palette.primary.lowContrast} // CAIO_REVIEW
+							backgroundColor={theme.palette.primary.lowContrast}
 							sx={{
 								borderRadius: theme.spacing(1.5),
 								/* 

client/src/Components/v1/Charts/ChartBox/EmptyView.jsx

@@ -2,7 +2,7 @@
 import { Typography, Stack } from "@mui/material";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import IconBox from "../../IconBox";
+import IconBox from "../../IconBox/index.jsx";
 
 /**
  * `EmptyView` is a functional React component that displays an empty state view with an optional icon, header, and message.

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

@@ -1,7 +1,7 @@
 import { Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import IconBox from "../../IconBox";
-import EmptyView from "./EmptyView";
+import IconBox from "../../IconBox/index.jsx";
+import EmptyView from "./EmptyView.jsx";
 import PropTypes from "prop-types";
 
 const ChartBox = ({

client/src/Components/v1/Charts/DePINStatusPageBarChart/index.jsx

@@ -5,7 +5,7 @@ import { Stack, Box, Tooltip, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
 import { useSelector } from "react-redux";
 
 const PlaceholderCheck = ({ daysToShow }) => {

client/src/Components/v1/Charts/LegendBox/index.jsx

@@ -1,6 +1,6 @@
 import { Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import IconBox from "../../IconBox";
+import IconBox from "../../IconBox/index.jsx";
 import PropTypes from "prop-types";
 
 const LegendBox = ({ children, icon, header, sx }) => {

client/src/Components/v1/Charts/MonitorDetailsAreaChart/index.jsx

@@ -12,11 +12,11 @@ import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useMemo, useState } from "react";
 import { useSelector } from "react-redux";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
 import {
 	tooltipDateFormatLookup,
 	tickDateFormatLookup,
-} from "../Utils/chartUtilFunctions";
+} from "../Utils/chartUtilFunctions.js";
 
 import "./index.css";
 const CustomToolTip = ({ active, payload, label, dateRange }) => {

client/src/Components/v1/Charts/StatusPageBarChart/index.jsx

@@ -1,7 +1,7 @@
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Tooltip, Typography } from "@mui/material";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
-import { useEffect, useState } from "react";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
+import { useEffect, useState, forwardRef } from "react";
 import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
 
@@ -17,26 +17,32 @@ import PropTypes from "prop-types";
  * @returns {JSX.Element} The Bar component.
  */
 
-const Bar = ({ width, height, backgroundColor, borderRadius, children }) => {
-	const theme = useTheme();
+const Bar = forwardRef(
+	({ width, height, backgroundColor, borderRadius, children, ...otherProps }, ref) => {
+		const theme = useTheme();
 
-	return (
-		<Box
-			position="relative"
-			width={width}
-			height={height}
-			backgroundColor={backgroundColor}
-			sx={{
-				borderRadius: borderRadius || theme.spacing(1.5),
-			}}
-		>
-			{children}
-		</Box>
-	);
-};
+		return (
+			<Box
+				ref={ref}
+				position="relative"
+				width={width}
+				height={height}
+				backgroundColor={backgroundColor}
+				sx={{
+					borderRadius: borderRadius || theme.spacing(1.5),
+				}}
+				{...otherProps}
+			>
+				{children}
+			</Box>
+		);
+	}
+);
+
+Bar.displayName = "Bar";
 
 Bar.propTypes = {
-	width: PropTypes.string.isRequired,
+	width: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
 	height: PropTypes.string.isRequired,
 	backgroundColor: PropTypes.string.isRequired,
 	borderRadius: PropTypes.string,

client/src/Components/v1/Charts/Utils/chartUtilFunctions.js

@@ -1,5 +1,6 @@
 export const tooltipDateFormatLookup = (dateRange) => {
 	const dateFormatLookup = {
+		recent: "ddd. MMMM D, YYYY, hh:mm A",
 		day: "ddd. MMMM D, YYYY, hh:mm A",
 		week: "ddd. MMMM D, YYYY, hh:mm A",
 		month: "ddd. MMMM D, YYYY",

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

@@ -2,9 +2,9 @@ import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
 import { useTheme } from "@mui/material";
 import { Text } from "recharts";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
 import { Box, Stack, Typography } from "@mui/material";
-import { tickDateFormatLookup, tooltipDateFormatLookup } from "./chartUtilFunctions";
+import { tickDateFormatLookup, tooltipDateFormatLookup } from "./chartUtilFunctions.js";
 /**
  * Custom tick component for rendering time with timezone.
  *

client/src/Components/v1/Check/Check.jsx

@@ -1,7 +1,7 @@
 import "./check.css";
 import PropTypes from "prop-types";
-import CheckGrey from "../../assets/icons/check.svg?react";
-import CheckOutlined from "../../assets/icons/check-outlined.svg?react";
+import CheckGrey from "../../../assets/icons/check.svg?react";
+import CheckOutlined from "../../../assets/icons/check-outlined.svg?react";
 import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 
@@ -65,7 +65,7 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 };
 
 Check.propTypes = {
-	text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+	text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 	noHighlightText: PropTypes.string,
 	variant: PropTypes.oneOf(["info", "error", "success"]),
 	outlined: PropTypes.bool,

client/src/Components/v1/Common/AppBar.jsx

@@ -10,7 +10,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Drawer from "@mui/material/Drawer";
 import MenuIcon from "@mui/icons-material/Menu";
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
-import ThemeSwitch from "../ThemeSwitch";
+import ThemeSwitch from "../ThemeSwitch/index.jsx";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";

client/src/Components/v1/ConfigRow/index.jsx

@@ -1,7 +1,7 @@
 import { Box, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import ConfigBox from "../ConfigBox";
+import ConfigBox from "../ConfigBox/index.jsx";
 
 /**
  * ConfigRow is a styled container used to layout content in a row format with specific padding, border, and spacing.

client/src/Components/v1/Dialog/genericDialog.jsx

@@ -2,7 +2,7 @@ import { useId } from "react";
 import PropTypes from "prop-types";
 import { Modal, Stack, Typography } from "@mui/material";
 
-const GenericDialog = ({ title, description, open, onClose, theme, children }) => {
+const GenericDialog = ({ title, description, open, onClose, theme, children, width }) => {
 	const titleId = useId();
 	const descriptionId = useId();
 	const ariaDescribedBy = description?.length > 0 ? descriptionId : "";
@@ -16,6 +16,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 		>
 			<Stack
 				gap={theme.spacing(2)}
+				width={width}
 				sx={{
 					position: "absolute",
 					top: "50%",
@@ -39,6 +40,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 					fontSize={16}
 					color={theme.palette.primary.contrastText}
 					fontWeight={600}
+					marginBottom={theme.spacing(4)}
 				>
 					{title}
 				</Typography>
@@ -46,6 +48,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 					<Typography
 						id={descriptionId}
 						color={theme.palette.primary.contrastTextTertiary}
+						marginBottom={theme.spacing(4)}
 					>
 						{description}
 					</Typography>
@@ -64,6 +67,7 @@ GenericDialog.propTypes = {
 	theme: PropTypes.object.isRequired,
 	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 		.isRequired,
+	width: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
 };
 
 export { GenericDialog };

client/src/Components/v1/Dialog/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { Button, Stack } from "@mui/material";
-import { GenericDialog } from "./genericDialog";
+import { GenericDialog } from "./genericDialog.jsx";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
 

client/src/Components/v1/Fallback/FallbackBackground.jsx

@@ -1,8 +1,8 @@
 import { useTheme } from "@emotion/react";
 import Box from "@mui/material/Box";
-import Background from "../../assets/Images/background-grid.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 OutputAnimation from "../../../assets/Animations/output.gif";
+import DarkmodeOutput from "../../../assets/Animations/darkmodeOutput.gif";
 import { useSelector } from "react-redux";
 const FallbackBackground = () => {
 	const theme = useTheme();

client/src/Components/v1/Fallback/FallbackCheckList.jsx

@@ -2,7 +2,7 @@ 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";
+import Check from "../Check/Check.jsx";
 const FallbackCheckList = ({ checks, type }) => {
 	const theme = useTheme();
 	return (

client/src/Components/v1/Fallback/FallbackPageSpeedWarning.jsx

@@ -3,7 +3,7 @@ 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 Alert from "../Alert/index.jsx";
 import PropTypes from "prop-types";
 
 const renderWarningMessage = (t) => {

client/src/Components/v1/Fallback/index.jsx

@@ -2,11 +2,11 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Stack } from "@mui/material";
 import "./index.css";
-import FallbackTitle from "./FallbackTitle";
-import FallbackCheckList from "./FallbackCheckList";
-import FallbackActionButtons from "./FallBackActionButtons";
-import FallbackBackground from "./FallbackBackground";
-import FallbackContainer from "./FallbackContainer";
+import FallbackTitle from "./FallbackTitle.jsx";
+import FallbackCheckList from "./FallbackCheckList.jsx";
+import FallbackActionButtons from "./FallBackActionButtons.jsx";
+import FallbackBackground from "./FallbackBackground.jsx";
+import FallbackContainer from "./FallbackContainer.jsx";
 /**
  * Fallback component to display a fallback UI with a title, a list of checks, and a navigation button.
  *

client/src/Components/v1/GenericFallback/index.jsx

@@ -1,8 +1,8 @@
 import { useTheme } from "@emotion/react";
 import { Box, Stack } from "@mui/material";
-import OutputAnimation from "../../assets/Animations/output.gif";
-import DarkmodeOutput from "../../assets/Animations/darkmodeOutput.gif";
-import Background from "../../assets/Images/background-grid.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";
 
 /**
@@ -40,13 +40,13 @@ const GenericFallback = ({ children }) => {
 				<Box
 					component="img"
 					src={mode === "light" ? OutputAnimation : DarkmodeOutput}
-					Background="transparent"
 					alt="Loading animation"
 					sx={{
 						zIndex: 1,
 						border: "none",
 						borderRadius: theme.spacing(8),
 						width: "100%",
+						backgroundColor: "transparent",
 					}}
 				/>
 				<Box

client/src/Components/v1/HOC/withAdminCheck.jsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { logger } from "../../Utils/Logger";
-import { networkService } from "../../main";
+import { logger } from "../../../Utils/Logger.js";
+import { networkService } from "../../../main.jsx";
 
 const withAdminCheck = (WrappedComponent) => {
 	const WithAdminCheck = (props) => {

client/src/Components/v1/Host/index.jsx

@@ -1,7 +1,8 @@
 import { Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import Dot from "../Dot";
+import Dot from "../Dot/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
 /**
  * Host component.
  * This subcomponent receives a params object and displays the host details.
@@ -14,7 +15,7 @@ import Dot from "../Dot";
  * @param {number} params.percentage - The percentage to display.
  * @returns {React.ElementType} Returns a div element with the host details.
  */
-const Host = ({ url, title, percentageColor, percentage, showURL }) => {
+const Host = ({ url, title, percentageColor, percentage, showURL, status }) => {
 	const theme = useTheme();
 	return (
 		<Stack>
@@ -22,21 +23,36 @@ const Host = ({ url, title, percentageColor, percentage, showURL }) => {
 				direction="row"
 				position="relative"
 				alignItems="center"
-				gap={theme.spacing(4)}
+				gap={theme.spacing(5)}
 			>
-				{title}
+				<Typography
+					variant="h6"
+					sx={{
+						fontWeight: 600,
+					}}
+				>
+					{title}
+				</Typography>
+
 				{percentageColor && percentage && (
 					<>
 						<Dot />
 						<Typography
-							component="span"
+							variant="h6"
 							sx={{
+								fontWeight: 600,
 								color: percentageColor,
-								fontWeight: 500,
 							}}
 						>
 							{percentage}%
 						</Typography>
+						{status && (
+							<StatusLabel
+								status={status}
+								text={status}
+								customStyles={{ textTransform: "capitalize" }}
+							/>
+						)}
 					</>
 				)}
 			</Stack>
@@ -51,6 +67,7 @@ Host.propTypes = {
 	percentage: PropTypes.string,
 	url: PropTypes.string,
 	showURL: PropTypes.bool,
+	status: PropTypes.string,
 };
 
 export default Host;

client/src/Components/v1/HttpStatusLabel/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@mui/material";
-import { BaseLabel } from "../Label";
+import { BaseLabel } from "../Label/index.jsx";
 
 /**
  * @component

client/src/Components/v1/I18nLoader/index.jsx

@@ -1,8 +1,8 @@
-import i18n from "../../Utils/i18n";
+import i18n from "../../../Utils/i18n.js";
 import { useSelector } from "react-redux";
 import { useEffect } from "react";
 const I18nLoader = () => {
-	const language = useSelector((state) => state.ui.language);
+	const language = useSelector((state) => state.ui.language ?? "en");
 
 	useEffect(() => {
 		if (language && i18n.language !== language) {

client/src/Components/v1/InfoBox/index.jsx

@@ -1,6 +1,6 @@
-import { RowContainer } from "../StandardContainer";
+import { RowContainer } from "../StandardContainer/index.jsx";
 import { Stack, Typography } from "@mui/material";
-import Image from "../Image";
+import Image from "../Image/index.jsx";
 
 import { useTheme } from "@mui/material/styles";
 

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

@@ -1,9 +1,8 @@
 import PropTypes from "prop-types";
 import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import CheckboxOutline from "../../../assets/icons/checkbox-outline.svg?react";
-import CheckboxFilled from "../../../assets/icons/checkbox-filled.svg?react";
-import "./index.css";
+import CheckboxOutline from "../../../../assets/icons/checkbox-outline.svg?react";
+import CheckboxFilled from "../../../../assets/icons/checkbox-filled.svg?react";
 
 /**
  * Checkbox Component

client/src/Components/v1/Inputs/ImageUpload/index.jsx

@@ -1,10 +1,10 @@
 // Components
 import { Box, Stack, Typography } from "@mui/material";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
-import Image from "../../../Components/Image";
+import Image from "../../Image/index.jsx";
 import TextField from "@mui/material/TextField";
 import IconButton from "@mui/material/IconButton";
-import ProgressUpload from "../../ProgressBars";
+import ProgressUpload from "../../ProgressBars/index.jsx";
 import ImageIcon from "@mui/icons-material/Image";
 
 // Utils

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

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import { FormControlLabel, Radio as MUIRadio, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import RadioChecked from "../../../assets/icons/radio-checked.svg?react";
+import RadioChecked from "../../../../assets/icons/radio-checked.svg?react";
 import "./index.css";
 
 /**

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

@@ -8,10 +8,10 @@ import {
 	Checkbox,
 } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import SearchIcon from "../../../assets/icons/search.svg?react";
+import SearchIcon from "../../../../assets/icons/search.svg?react";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import FieldWrapper from "../FieldWrapper";
+import FieldWrapper from "../FieldWrapper/index.jsx";
 
 /**
  * Search component using Material UI's Autocomplete.
@@ -85,7 +85,12 @@ const Search = ({
 	const enhancedOptions = React.useMemo(() => {
 		return multiple && isAdorned
 			? [
-					{ [filteredBy]: t("selectAll"), isSelectAll: true, _id: "select_all" },
+					{
+						[filteredBy]: t("selectAll"),
+						isSelectAll: true,
+						_id: "select_all",
+						id: "select_all",
+					},
 					...options,
 				]
 			: options;
@@ -93,7 +98,7 @@ const Search = ({
 	const isOptionSelected = (option) => {
 		if (!multiple && !isAdorned) return false;
 		if (Array.isArray(value)) {
-			return value.some((item) => item._id === option._id);
+			return value.some((item) => (item._id ?? item.id) === (option._id ?? option.id));
 		}
 		return false;
 	};
@@ -145,7 +150,9 @@ const Search = ({
 			disableClearable
 			options={enhancedOptions}
 			getOptionLabel={(option) => option[filteredBy]}
-			isOptionEqualToValue={(option, value) => option._id === value._id} // Compare by unique identifier
+			isOptionEqualToValue={(option, value) =>
+				(option._id ?? option.id) === (value?._id ?? value?.id)
+			} // Compare by unique identifier
 			renderInput={(params) => (
 				<FieldWrapper
 					label={label}
@@ -206,7 +213,7 @@ const Search = ({
 				return filtered;
 			}}
 			getOptionKey={(option) => {
-				return option._id;
+				return option._id ?? option.id;
 			}}
 			renderOption={(props, option) => {
 				const { key, ...optionProps } = props;