fix: removing JSdoc for usedebounce and comments

feat/v2 register

.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,6 @@
+.idea
+.vscode
+.VSCodeCounter
+*.sh
+mongo
+node_modules/

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+echo "Running lint-staged..."
+cd client && npx lint-staged && cd ..
+cd server && npx lint-staged && cd ..

CLAUDE.md

@@ -0,0 +1,145 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Checkmate is an open-source uptime and infrastructure monitoring application. It monitors server hardware, uptime, response times, and incidents with real-time alerts. The companion agent [Capture](https://github.com/bluewave-labs/capture) provides infrastructure metrics (CPU, RAM, disk, temperature).
+
+## Development Commands
+
+### Client (React/Vite)
+```bash
+cd client
+npm install
+npm run dev              # Start dev server at http://localhost:5173
+npm run build            # TypeScript check + production build
+npm run lint             # ESLint (strict, max-warnings 0)
+npm run format           # Prettier formatting
+npm run format-check     # Check formatting
+```
+
+### Server (Node.js/Express)
+```bash
+cd server
+npm install
+npm run dev              # Start with hot-reload (nodemon + tsx) at http://localhost:52345
+npm run build            # TypeScript compile + path alias resolution
+npm run test             # Run Mocha tests with c8 coverage
+npm run lint             # ESLint v9
+npm run lint-fix         # Auto-fix lint issues
+npm run format           # Prettier formatting
+```
+
+### Docker Development
+```bash
+cd docker/dev
+./build_images.sh
+docker run -d -p 27017:27017 -v uptime_mongo_data:/data/db --name uptime_database_mongo mongo:6.0
+```
+
+## Environment Setup
+
+### Server `.env` (minimum required)
+```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"
+```
+
+### Client `.env`
+```env
+VITE_APP_API_BASE_URL="http://localhost:52345/api/v1"
+VITE_APP_LOG_LEVEL="debug"
+```
+
+## Architecture
+
+### Monorepo Structure
+- `/client` - React 18 + TypeScript + Vite + MUI frontend
+- `/server` - Node.js 20+ + Express + TypeScript backend
+- `/docker` - Multi-environment Docker configs (dev, staging, prod, arm, mono)
+
+### Backend Layers
+```
+server/src/
+├── controllers/     # Route handlers (authController, monitorController, etc.)
+├── service/         # Business logic
+│   ├── business/    # Core monitoring logic
+│   ├── infrastructure/  # Server/system utilities
+│   └── system/      # App-level settings
+├── db/
+│   ├── models/      # Mongoose schemas (Monitor, Check, Incident, User, etc.)
+│   ├── migration/   # Database migrations (run on startup)
+│   └── modules/     # Database-specific modules
+├── middleware/v1/   # verifyJWT, rateLimiter, sanitization, responseHandler
+├── routes/v1/       # API route definitions
+├── validation/      # Joi input validation schemas
+└── repositories/    # Data access layer
+```
+
+### Frontend Structure
+```
+client/src/
+├── Components/      # Reusable UI components
+├── Pages/           # Page components (Auth, Uptime, Infrastructure, Incidents, etc.)
+├── Features/        # Redux slices (Auth, UI)
+├── Hooks/           # Custom React hooks
+├── Utils/           # Utilities (NetworkService.js is main API client)
+├── Validation/      # Input validation
+└── locales/         # i18n translations
+```
+
+### API
+- Base URL: `/api/v1`
+- Documentation: `http://localhost:52345/api-docs` (Swagger UI)
+- OpenAPI spec: `/server/openapi.json`
+
+### Key Technologies
+- **State Management**: Redux Toolkit + Redux-Persist
+- **Data Fetching**: SWR + Axios
+- **Database**: MongoDB with Mongoose ODM
+- **Queue/Cache**: Redis + BullMQ + Pulse (cron scheduling)
+- **i18n**: i18next + react-i18next (translations via PoEditor)
+
+## Code Conventions
+
+### Internationalization
+All user-facing strings must use the translation function:
+```javascript
+t('your.key')  // Never hardcode UI strings
+```
+
+### Branching
+- Always branch from `develop` (not master)
+- Use descriptive names: `feat/add-alerts`, `fix/login-error`
+- PRs target `develop` branch
+
+### Formatting
+- **Client**: Prettier with `printWidth: 90`, tabs, double quotes
+- **Server**: Prettier with `printWidth: 150`, tabs, double quotes
+- Both use ESLint with strict settings
+
+### Testing
+Server tests use Mocha + Chai + Sinon:
+```bash
+npm test                    # Run all tests with coverage
+npm test -- --grep "pattern"  # Run specific tests
+```
+Test files: `server/tests/**/*.test.js`
+
+## Database Models
+
+Key Mongoose models in `/server/src/db/models/`:
+- **Monitor** - Monitoring configuration (website, infrastructure, port, etc.)
+- **Check** - Individual monitoring check results
+- **Incident** - Downtime incidents
+- **User** - User accounts
+- **Team** - Team/workspace management
+- **StatusPage** - Public status pages
+- **Notification** - Alert configuration (email, Discord, Slack, webhooks)
+- **MaintenanceWindow** - Scheduled maintenance periods
+- **AppSettings** - Global application settings

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
 
@@ -79,9 +79,8 @@ You can see the memory footprint of MongoDB and Redis on the same server (398Mb
 
 If you have any questions, suggestions or comments, you have several options: 
 
-- [Discord channel](https://discord.gg/NAb6H3UTjK)
-- [GitHub Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions)
-- [Reddit group](https://www.reddit.com/r/CheckmateMonitoring/)
+- [Discord channel](https://discord.gg/NAb6H3UTjK) (preferred)
+- [GitHub Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions) (we check here from time to time)
 
 Feel free to ask questions or share your ideas - we'd love to hear from you!
 
@@ -91,6 +90,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 +162,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.json

@@ -5,32 +5,40 @@
 	"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 .",
 		"format-check": "prettier --check ."
 	},
+	"lint-staged": {
+		"**/*": "npm run format"
+	},
 	"dependencies": {
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
 		"@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-date-pickers": "7.29.0",
+		"@hookform/resolvers": "5.2.2",
+		"@mui/lab": "7.0.0",
+		"@mui/material": "7.3.7",
+		"@mui/x-charts": "7.29.1",
+		"@mui/x-date-pickers": "7.29.4",
 		"@reduxjs/toolkit": "2.7.0",
 		"axios": "^1.7.4",
 		"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",
+		"lucide-react": "^0.562.0",
+		"mui-color-input": "^7.0.0",
+		"pretty-bytes": "^7.1.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 +47,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",
@@ -57,10 +60,9 @@
 		"eslint-plugin-react": "^7.34.1",
 		"eslint-plugin-react-hooks": "^5.0.0",
 		"eslint-plugin-react-refresh": "^0.4.6",
+		"lint-staged": "^16.2.7",
 		"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);
@@ -23,17 +22,29 @@ function App() {
 		};
 	}, []);
 
-	return (
-		/* Extract Themeprovider, baseline and global styles to Styles */
-		<ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
-			<WalletProvider>
-				<CssBaseline />
+	const theme = mode === "light" ? lightTheme : darkTheme;
 
-				<AppLayout>
-					<Routes />
-				</AppLayout>
-				<ToastContainer />
-			</WalletProvider>
+	return (
+		<ThemeProvider theme={theme}>
+			<CssBaseline />
+			<GlobalStyles
+				styles={{
+					body: {
+						backgroundColor: theme.palette.background.main,
+					},
+				}}
+			/>
+			<AppLayout>
+				<Routes />
+			</AppLayout>
+			<ToastContainer
+				newestOnTop={true}
+				theme={mode}
+				style={{
+					"--toastify-color-progress-light": "#7C8BA1",
+					"--toastify-color-progress-dark": "#7C8BA1",
+				}}
+			/>
 		</ThemeProvider>
 	);
 }

client/src/Components/FilterHeader/index.jsx

@@ -1,99 +0,0 @@
-import { Checkbox, FormControl, ListItemText, MenuItem, Select } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import PropTypes from "prop-types";
-import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
-
-/**
- * A reusable filter header component that displays a dropdown menu with selectable options.
- *
- * @component
- * @param {Object} props - The component props.
- * @param {string} props.header - The header text to display when no options are selected.
- * @param {Array} props.options - An array of options to display in the dropdown menu. Each option should have a `value` and `label`.
- * @param {Array} [props.value] - The currently selected values.
- * @param {Function} props.onChange - The callback function to handle changes in the selected values.
- * @param {boolean} [props.multiple=true] - Whether multiple options can be selected.
- * @returns {JSX.Element} The rendered FilterHeader component.
- */
-
-const FilterHeader = ({ header, options, value, onChange, multiple = true }) => {
-	const theme = useTheme();
-
-	const controlledValue = value === undefined ? [] : value; // Ensure value is always treated as an array for controlled component purposes
-
-	return (
-		<FormControl
-			sx={{ minWidth: "10%" }}
-			size="small"
-		>
-			<Select
-				multiple={multiple}
-				IconComponent={(props) => (
-					<AddCircleOutlineIcon
-						{...props}
-						sx={{ fontSize: "medium" }}
-					/>
-				)}
-				displayEmpty
-				value={controlledValue}
-				onChange={onChange}
-				renderValue={(selected) => {
-					if (!selected?.length) {
-						return header;
-					}
-
-					return (
-						header +
-						" | " +
-						selected
-							.map((value) => options.find((option) => option.value === value)?.label)
-							.filter(Boolean)
-							.join(", ")
-					);
-				}}
-				MenuProps={{
-					anchorOrigin: {
-						vertical: "bottom",
-						horizontal: "left",
-					},
-					transformOrigin: {
-						vertical: "top",
-						horizontal: "left",
-					},
-				}}
-			>
-				{options.map((option) => (
-					<MenuItem
-						key={option.value}
-						value={option.value}
-						sx={{
-							height: theme.spacing(17),
-							padding: 0,
-						}}
-					>
-						<Checkbox
-							checked={controlledValue.includes(option.value)}
-							size="small"
-						/>
-						<ListItemText primary={option.label} />
-					</MenuItem>
-				))}
-			</Select>
-		</FormControl>
-	);
-};
-
-FilterHeader.propTypes = {
-	header: PropTypes.string.isRequired,
-	options: PropTypes.arrayOf(
-		PropTypes.shape({
-			value: PropTypes.string.isRequired,
-			label: PropTypes.string.isRequired,
-		})
-	).isRequired,
-	value: PropTypes.arrayOf(PropTypes.string),
-	onChange: PropTypes.func.isRequired,
-	multiple: PropTypes.bool,
-};
-
-export default FilterHeader;

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/Layouts/HomeLayout/index.jsx

@@ -1,22 +0,0 @@
-import Sidebar from "../../Sidebar";
-import { Outlet } from "react-router";
-import { Stack } from "@mui/material";
-
-import "./index.css";
-
-const HomeLayout = () => {
-	return (
-		<Stack
-			className="home-layout"
-			flexDirection="row"
-			gap={14}
-		>
-			<Sidebar />
-			<Stack className="home-content-wrapper">
-				<Outlet />
-			</Stack>
-		</Stack>
-	);
-};
-
-export default HomeLayout;

client/src/Components/MonitorActions/index.jsx

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

@@ -1,52 +0,0 @@
-import { Stack, Typography } from "@mui/material";
-import PropTypes from "prop-types";
-import { useTheme } from "@emotion/react";
-import SkeletonLayout from "./skeleton";
-
-const MonitorCountHeader = ({
-	isLoading = false,
-	monitorCount,
-	heading = "monitors",
-	sx,
-	children,
-}) => {
-	const theme = useTheme();
-	if (isLoading) return <SkeletonLayout />;
-
-	if (monitorCount === 1) {
-		heading = "monitor";
-	}
-
-	return (
-		<Stack
-			direction="row"
-			alignItems="center"
-			display="flex"
-			width="fit-content"
-			height={theme.spacing(18)}
-			gap={theme.spacing(2)}
-			mt={theme.spacing(2)}
-			px={theme.spacing(4)}
-			pt={theme.spacing(2)}
-			pb={theme.spacing(3)}
-			borderRadius={theme.spacing(1)}
-			sx={{
-				...sx,
-				backgroundColor: theme.palette.secondary.main,
-			}}
-		>
-			{monitorCount} <Typography component="h2">{heading}</Typography>
-			{children}
-		</Stack>
-	);
-};
-
-MonitorCountHeader.propTypes = {
-	isLoading: PropTypes.bool,
-	monitorCount: PropTypes.number,
-	heading: PropTypes.string,
-	children: PropTypes.node,
-	sx: PropTypes.object,
-};
-
-export default MonitorCountHeader;

client/src/Components/MonitorCountHeader/skeleton.jsx

@@ -1,26 +0,0 @@
-import { Stack, Skeleton } from "@mui/material";
-import { useTheme } from "@emotion/react";
-
-const SkeletonLayout = () => {
-	const theme = useTheme();
-	return (
-		<Stack
-			direction="row"
-			alignItems="center"
-			gap={theme.spacing(2)}
-		>
-			<Skeleton
-				variant="text"
-				width={100}
-				height={32}
-			/>
-			<Skeleton
-				variant="circular"
-				width={40}
-				height={40}
-			/>
-		</Stack>
-	);
-};
-
-export default SkeletonLayout;

client/src/Components/MonitorDetailsControlHeader/index.jsx

@@ -1,141 +0,0 @@
-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";
-import EmailIcon from "@mui/icons-material/Email";
-
-// Utils
-import PropTypes from "prop-types";
-import { useNavigate } from "react-router-dom";
-import { useTheme } from "@mui/material/styles";
-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.
- *
- * @component
- * @param {Object} props - Component props
- * @param {string} props.path - The base path for navigation
- * @param {boolean} [props.isLoading=false] - Flag indicating if the data is loading
- * @param {boolean} [props.isAdmin=false] - Flag indicating if the user is an admin
- * @param {Object} props.monitor - The monitor object containing details
- * @param {Function} props.triggerUpdate - Function to trigger an update
- * @returns {JSX.Element} The rendered component
- */
-const MonitorDetailsControlHeader = ({
-	path,
-	isLoading = false,
-	isAdmin = false,
-	monitor,
-	triggerUpdate,
-}) => {
-	const navigate = useNavigate();
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const [pauseMonitor, isPausing, error] = usePauseMonitor();
-
-	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 />;
-	}
-
-	return (
-		<Stack
-			direction="row"
-			justifyContent="space-between"
-		>
-			<Status monitor={monitor} />
-
-			<Stack
-				direction="row"
-				gap={theme.spacing(2)}
-			>
-				<Tooltip
-					key={monitor?._id}
-					placement="bottom"
-					title={tooltipTitle}
-				>
-					<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"
-					onClick={(e) => {
-						navigate(`/incidents/${monitor?._id}`);
-					}}
-				>
-					{t("menu.incidents")}
-				</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"
-						color="secondary"
-						startIcon={<SettingsOutlinedIcon />}
-						onClick={() => navigate(`/${path}/configure/${monitor._id}`)}
-					>
-						Configure
-					</Button>
-				)}
-			</Stack>
-		</Stack>
-	);
-};
-
-MonitorDetailsControlHeader.propTypes = {
-	path: PropTypes.string,
-	isLoading: PropTypes.bool,
-	isAdmin: PropTypes.bool,
-	monitor: PropTypes.object,
-	triggerUpdate: PropTypes.func,
-};
-
-export default MonitorDetailsControlHeader;

client/src/Components/MonitorDetailsControlHeader/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/MonitorDetailsControlHeader/status.jsx

@@ -1,51 +0,0 @@
-// Components
-import Stack from "@mui/material/Stack";
-import PulseDot from "../../Components/Animated/PulseDot";
-import Typography from "@mui/material/Typography";
-import Dot from "../../Components/Dot";
-// Utils
-import { formatDurationRounded } from "../../Utils/timeUtils";
-import PropTypes from "prop-types";
-import { useTheme } from "@emotion/react";
-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.
- *
- * @component
- * @param {Object} props - Component props
- * @param {Object} props.monitor - The monitor object containing details
- * @param {string} props.monitor.name - The name of the monitor
- * @param {string} props.monitor.url - The URL of the monitor
- * @param {number} props.monitor.interval - The interval at which the monitor checks
- * @returns {JSX.Element} The rendered component
- */
-const Status = ({ monitor }) => {
-	const theme = useTheme();
-	const { statusColor, determineState } = useMonitorUtils();
-
-	return (
-		<Stack>
-			<Typography variant="monitorName">{monitor?.name}</Typography>
-			<Stack
-				direction="row"
-				alignItems={"center"}
-				gap={theme.spacing(4)}
-			>
-				<PulseDot color={statusColor[determineState(monitor)]} />
-				<Typography variant="monitorUrl">{formatMonitorUrl(monitor?.url)}</Typography>
-				<Dot />
-				<Typography>
-					Checking every {formatDurationRounded(monitor?.interval)}.
-				</Typography>
-			</Stack>
-		</Stack>
-	);
-};
-
-Status.propTypes = {
-	monitor: PropTypes.object,
-};
-
-export default Status;

client/src/Components/NotificationConfig/index.jsx

@@ -1,125 +0,0 @@
-// 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/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx

@@ -1,419 +0,0 @@
-import { useState, useMemo, useEffect, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import PropTypes from "prop-types";
-
-import {
-	Dialog,
-	DialogContent,
-	DialogActions,
-	Button,
-	Typography,
-	Box,
-	Tabs,
-	Tab,
-	Stack,
-} from "@mui/material";
-import { useTheme } from "@emotion/react";
-import TabPanel from "./TabPanel";
-import TabComponent from "./TabComponent";
-import useNotifications from "../Hooks/useNotification";
-
-// Define constants for notification types to avoid magic values
-const NOTIFICATION_TYPES = {
-	SLACK: "slack",
-	DISCORD: "discord",
-	TELEGRAM: "telegram",
-	WEBHOOK: "webhook",
-};
-
-// Define constants for field IDs
-const FIELD_IDS = {
-	WEBHOOK: "webhook",
-	TOKEN: "token",
-	CHAT_ID: "chatId",
-	URL: "url",
-};
-
-const NotificationIntegrationModal = ({
-	open,
-	onClose,
-	monitor,
-	setMonitor,
-	// Optional prop to configure available notification types
-	notificationTypes = null,
-}) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const [tabValue, setTabValue] = useState(0);
-
-	const [loading, _, sendTestNotification] = useNotifications();
-
-	// Helper to get the field state key with error handling
-	const getFieldKey = useCallback(
-		(typeId, fieldId) => {
-			if (typeof typeId !== "string" || typeId === "") {
-				throw new Error(t("errorInvalidTypeId"));
-			}
-
-			if (typeof fieldId !== "string" || fieldId === "") {
-				throw new Error(t("errorInvalidFieldId"));
-			}
-
-			return `${typeId}${fieldId.charAt(0).toUpperCase() + fieldId.slice(1)}`;
-		},
-		[t]
-	);
-
-	// Define notification types
-	const DEFAULT_NOTIFICATION_TYPES = [
-		{
-			id: NOTIFICATION_TYPES.SLACK,
-			label: t("notifications.slack.label"),
-			description: t("notifications.slack.description"),
-			fields: [
-				{
-					id: FIELD_IDS.WEBHOOK,
-					label: t("notifications.slack.webhookLabel"),
-					placeholder: t("notifications.slack.webhookPlaceholder"),
-					type: "text",
-				},
-			],
-		},
-		{
-			id: NOTIFICATION_TYPES.DISCORD,
-			label: t("notifications.discord.label"),
-			description: t("notifications.discord.description"),
-			fields: [
-				{
-					id: FIELD_IDS.WEBHOOK,
-					label: t("notifications.discord.webhookLabel"),
-					placeholder: t("notifications.discord.webhookPlaceholder"),
-					type: "text",
-				},
-			],
-		},
-		{
-			id: NOTIFICATION_TYPES.TELEGRAM,
-			label: t("notifications.telegram.label"),
-			description: t("notifications.telegram.description"),
-			fields: [
-				{
-					id: FIELD_IDS.TOKEN,
-					label: t("notifications.telegram.tokenLabel"),
-					placeholder: t("notifications.telegram.tokenPlaceholder"),
-					type: "text",
-				},
-				{
-					id: FIELD_IDS.CHAT_ID,
-					label: t("notifications.telegram.chatIdLabel"),
-					placeholder: t("notifications.telegram.chatIdPlaceholder"),
-					type: "text",
-				},
-			],
-		},
-		{
-			id: NOTIFICATION_TYPES.WEBHOOK,
-			label: t("notifications.webhook.label"),
-			description: t("notifications.webhook.description"),
-			fields: [
-				{
-					id: FIELD_IDS.URL,
-					label: t("notifications.webhook.urlLabel"),
-					placeholder: t("notifications.webhook.urlPlaceholder"),
-					type: "text",
-				},
-			],
-		},
-	];
-
-	// Use provided notification types or default to our translated ones
-	const activeNotificationTypes = notificationTypes || DEFAULT_NOTIFICATION_TYPES;
-
-	// Memoized function to initialize integrations state
-	const initialIntegrationsState = useMemo(() => {
-		const state = {};
-
-		activeNotificationTypes.forEach((type) => {
-			// Add enabled flag for each notification type
-			state[type.id] = false;
-
-			// Add state for each field in the notification type
-			type.fields.forEach((field) => {
-				const fieldKey = getFieldKey(type.id, field.id);
-				state[fieldKey] = "";
-			});
-		});
-
-		return state;
-	}, [activeNotificationTypes, getFieldKey]); // Only recompute when these dependencies change
-
-	const [integrations, setIntegrations] = useState(initialIntegrationsState);
-
-	useEffect(() => {
-		if (open) {
-			const extractNotificationValues = () => {
-				const values = {};
-
-				if (!monitor?.notifications || !Array.isArray(monitor.notifications)) {
-					return values;
-				}
-
-				monitor.notifications.forEach((notification) => {
-					// Handle notification based on its structure
-					if (notification.type === "webhook" && notification.platform) {
-						if (typeof notification.config === "undefined") return;
-						const platform = notification.platform;
-						values[platform] = true; // Set platform as enabled
-
-						// Extract configuration based on platform
-						switch (platform) {
-							case NOTIFICATION_TYPES.SLACK:
-							case NOTIFICATION_TYPES.DISCORD:
-								if (notification.config.webhookUrl) {
-									values[getFieldKey(platform, FIELD_IDS.WEBHOOK)] =
-										notification.config.webhookUrl;
-								}
-								break;
-							case NOTIFICATION_TYPES.TELEGRAM:
-								if (notification.config.botToken) {
-									values[getFieldKey(platform, FIELD_IDS.TOKEN)] =
-										notification.config.botToken;
-								}
-								if (notification.config.chatId) {
-									values[getFieldKey(platform, FIELD_IDS.CHAT_ID)] =
-										notification.config.chatId;
-								}
-								break;
-							case NOTIFICATION_TYPES.WEBHOOK:
-								if (notification.config.webhookUrl) {
-									values[getFieldKey(platform, FIELD_IDS.URL)] =
-										notification.config.webhookUrl;
-								}
-								break;
-						}
-					}
-				});
-
-				return values;
-			};
-
-			const extractedValues = extractNotificationValues();
-			setIntegrations((prev) => ({
-				...prev,
-				...extractedValues,
-			}));
-		}
-	}, [open, monitor, getFieldKey]);
-
-	const handleChangeTab = (event, newValue) => {
-		setTabValue(newValue);
-	};
-
-	const handleIntegrationChange = (type, checked) => {
-		setIntegrations((prev) => ({
-			...prev,
-			[type]: checked,
-		}));
-	};
-
-	const handleInputChange = (type, value) => {
-		setIntegrations((prev) => ({
-			...prev,
-			[type]: value,
-		}));
-	};
-
-	const handleTestNotification = async (type) => {
-		// Get the notification type details
-		const notificationType = activeNotificationTypes.find((t) => t.id === type);
-
-		if (typeof notificationType === "undefined") {
-			return;
-		}
-
-		// Prepare config object based on notification type
-		const config = {};
-
-		// Add each field value to the config object
-		notificationType.fields.forEach((field) => {
-			const fieldKey = getFieldKey(type, field.id);
-			config[field.id] = integrations[fieldKey];
-		});
-
-		await sendTestNotification(type, config);
-	};
-
-	// In NotificationIntegrationModal.jsx, update the handleSave function:
-
-	const handleSave = () => {
-		// Get existing notifications
-		const notifications = [...(monitor?.notifications || [])];
-
-		// Get all notification types IDs
-		const existingTypes = activeNotificationTypes.map((type) => type.id);
-
-		// Filter out notifications that are configurable in this modal
-		const filteredNotifications = notifications.filter((notification) => {
-			if (notification.platform) {
-				return !existingTypes.includes(notification.platform);
-			}
-
-			return !existingTypes.includes(notification.type);
-		});
-
-		// Add each enabled notification with its configured fields
-		activeNotificationTypes.forEach((type) => {
-			if (integrations[type.id]) {
-				let notificationObject = {
-					type: "webhook",
-					platform: type.id, // Set platform to identify the specific service
-					config: {},
-				};
-
-				// Configure based on notification type
-				switch (type.id) {
-					case "slack":
-					case "discord":
-						notificationObject.config.webhookUrl =
-							integrations[getFieldKey(type.id, "webhook")];
-						break;
-					case "telegram":
-						notificationObject.config.botToken =
-							integrations[getFieldKey(type.id, "token")];
-						notificationObject.config.chatId =
-							integrations[getFieldKey(type.id, "chatId")];
-						break;
-					case "webhook":
-						notificationObject.config.webhookUrl =
-							integrations[getFieldKey(type.id, "url")];
-						break;
-				}
-
-				filteredNotifications.push(notificationObject);
-			}
-		});
-
-		// Update monitor with new notifications
-		setMonitor((prev) => ({
-			...prev,
-			notifications: filteredNotifications,
-		}));
-
-		onClose();
-	};
-
-	return (
-		<Dialog
-			open={open}
-			onClose={onClose}
-			fullWidth
-			maxWidth="md"
-			sx={{
-				"& .MuiDialog-paper": {
-					width: `calc(80% - ${theme.spacing(40)})`,
-					maxWidth: `${theme.breakpoints.values.md - 70}px`,
-				},
-			}}
-		>
-			<DialogContent>
-				<Stack
-					direction="row"
-					sx={{
-						height: `calc(30vh - ${theme.spacing(20)})`,
-					}}
-				>
-					{/* Left sidebar with tabs */}
-					<Box
-						sx={{
-							borderRight: 1,
-							borderColor: theme.palette.primary.lowContrast,
-							width: "30%",
-							maxWidth: theme.spacing(120),
-							pr: theme.spacing(10),
-						}}
-					>
-						<Typography variant="h2">
-							{t("notifications.addOrEditNotifications")}
-						</Typography>
-
-						<Tabs
-							orientation="vertical"
-							variant="scrollable"
-							value={tabValue}
-							onChange={handleChangeTab}
-							aria-label="Notification tabs"
-						>
-							{activeNotificationTypes.map((type) => (
-								<Tab
-									key={type.id}
-									label={type.label}
-									orientation="vertical"
-									disableRipple
-								/>
-							))}
-						</Tabs>
-					</Box>
-
-					{/* Right side content */}
-					<Box
-						sx={{
-							flex: 1,
-							pl: theme.spacing(7.5),
-							overflowY: "auto",
-						}}
-					>
-						{activeNotificationTypes.map((type, index) => (
-							<TabPanel
-								key={type.id}
-								value={tabValue}
-								index={index}
-							>
-								<TabComponent
-									type={type}
-									integrations={integrations}
-									handleIntegrationChange={handleIntegrationChange}
-									handleInputChange={handleInputChange}
-									handleTestNotification={handleTestNotification}
-									isLoading={loading}
-								/>
-							</TabPanel>
-						))}
-					</Box>
-				</Stack>
-			</DialogContent>
-			<DialogActions
-				sx={{
-					p: theme.spacing(4),
-					display: "flex",
-					justifyContent: "flex-end",
-					mb: theme.spacing(5),
-					mr: theme.spacing(5),
-				}}
-			>
-				<Button
-					variant="contained"
-					color="accent"
-					onClick={handleSave}
-					loading={loading}
-					sx={{
-						width: "auto",
-						minWidth: theme.spacing(60),
-						px: theme.spacing(8),
-					}}
-				>
-					{t("commonSave")}
-				</Button>
-			</DialogActions>
-		</Dialog>
-	);
-};
-
-NotificationIntegrationModal.propTypes = {
-	open: PropTypes.bool.isRequired,
-	onClose: PropTypes.func.isRequired,
-	monitor: PropTypes.object.isRequired,
-	setMonitor: PropTypes.func.isRequired,
-	notificationTypes: PropTypes.array,
-};
-
-export default NotificationIntegrationModal;

client/src/Components/NotificationIntegrationModal/Components/TabComponent.jsx

@@ -1,115 +0,0 @@
-import React from "react";
-import { Typography, Box, Button, CircularProgress } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import { useTheme } from "@emotion/react";
-import TextInput from "../../../Components/Inputs/TextInput";
-import Checkbox from "../../../Components/Inputs/Checkbox";
-
-const TabComponent = ({
-	type,
-	integrations,
-	handleIntegrationChange,
-	handleInputChange,
-	handleTestNotification,
-	isLoading,
-}) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-
-	// Helper to get the field state key (e.g., slackWebhook, telegramToken)
-	const getFieldKey = (typeId, fieldId) => {
-		return `${typeId}${fieldId.charAt(0).toUpperCase() + fieldId.slice(1)}`;
-	};
-
-	// Check if all fields have values to enable test button
-	const areAllFieldsFilled = () => {
-		return type.fields.every((field) => {
-			const fieldKey = getFieldKey(type.id, field.id);
-			return integrations[fieldKey];
-		});
-	};
-
-	return (
-		<>
-			<Typography
-				variant="subtitle1"
-				component="h4"
-				sx={{
-					fontWeight: "bold",
-					color: theme.palette.primary.contrastTextSecondary,
-				}}
-			>
-				{type.label}
-			</Typography>
-
-			<Typography
-				sx={{
-					mt: theme.spacing(0.5),
-					mb: theme.spacing(1.5),
-					color: theme.palette.primary.contrastTextTertiary,
-				}}
-			>
-				{type.description}
-			</Typography>
-
-			<Box sx={{ pl: theme.spacing(1.5) }}>
-				<Checkbox
-					id={`enable-${type.id}`}
-					label={t("notifications.enableNotifications", { platform: type.label })}
-					isChecked={integrations[type.id]}
-					onChange={(e) => handleIntegrationChange(type.id, e.target.checked)}
-					disabled={isLoading}
-				/>
-			</Box>
-
-			{type.fields.map((field) => {
-				const fieldKey = getFieldKey(type.id, field.id);
-
-				return (
-					<Box
-						key={field.id}
-						sx={{ mt: theme.spacing(1) }}
-					>
-						<Typography
-							sx={{
-								mb: theme.spacing(2),
-								fontWeight: "bold",
-								color: theme.palette.primary.contrastTextSecondary,
-							}}
-						>
-							{field.label}
-						</Typography>
-
-						<TextInput
-							id={`${type.id}-${field.id}`}
-							type={field.type}
-							placeholder={field.placeholder}
-							value={integrations[fieldKey]}
-							onChange={(e) => handleInputChange(fieldKey, e.target.value)}
-							disabled={!integrations[type.id] || isLoading}
-						/>
-					</Box>
-				);
-			})}
-
-			<Box sx={{ mt: theme.spacing(1) }}>
-				<Button
-					variant="text"
-					color="info"
-					onClick={() => handleTestNotification(type.id)}
-					disabled={!integrations[type.id] || !areAllFieldsFilled() || isLoading}
-				>
-					{isLoading ? (
-						<CircularProgress
-							size={theme.spacing(8)}
-							sx={{ mr: theme.spacing(1), color: theme.palette.accent.main }}
-						/>
-					) : null}
-					{t("notifications.testNotification")}
-				</Button>
-			</Box>
-		</>
-	);
-};
-
-export default TabComponent;

client/src/Components/NotificationIntegrationModal/Components/TabPanel.jsx

@@ -1,41 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Box } from "@mui/material";
-import { useTheme } from "@emotion/react";
-
-/**
- * TabPanel component that displays content for the selected tab.
- *
- * @component
- * @param {Object} props - The component props.
- * @param {React.ReactNode} props.children - The content to be displayed when this tab panel is selected.
- * @param {number} props.value - The currently selected tab value.
- * @param {number} props.index - The index of this specific tab panel.
- * @param {Object} props.other - Any additional props to be spread to the root element.
- * @returns {React.ReactElement|null} The rendered tab panel or null if not selected.
- */
-function TabPanel({ children, value, index, ...other }) {
-	const theme = useTheme();
-
-	return (
-		<div
-			role="tabpanel"
-			hidden={value !== index}
-			id={`notification-tabpanel-${index}`}
-			aria-labelledby={`notification-tab-${index}`}
-			{...other}
-		>
-			{value === index && <Box sx={{ pt: theme.spacing(3) }}>{children}</Box>}
-		</div>
-	);
-}
-
-TabPanel.propTypes = {
-	children: PropTypes.node,
-
-	index: PropTypes.number.isRequired,
-
-	value: PropTypes.number.isRequired,
-};
-
-export default TabPanel;

client/src/Components/NotificationIntegrationModal/Hooks/useNotification.js

@@ -1,129 +0,0 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { networkService } from "../../../Utils/NetworkService";
-import { createToast } from "../../../Utils/toastUtils";
-
-// Define constants for notification types to avoid magic values
-const NOTIFICATION_TYPES = {
-	SLACK: "slack",
-	DISCORD: "discord",
-	TELEGRAM: "telegram",
-	WEBHOOK: "webhook",
-};
-
-// Define constants for field IDs
-const FIELD_IDS = {
-	WEBHOOK: "webhook",
-	TOKEN: "token",
-	CHAT_ID: "chatId",
-	URL: "url",
-};
-
-/**
- * Custom hook for notification-related operations
- */
-const useNotifications = () => {
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState(undefined);
-	const { t } = useTranslation();
-
-	/**
-	 * Send a test notification
-	 * @param {string} type - The notification type (slack, discord, telegram, webhook)
-	 * @param {object} config - Configuration object with necessary params
-	 */
-	const sendTestNotification = async (type, config) => {
-		setLoading(true);
-		setError(undefined);
-
-		// Validation based on notification type
-		let payload = { platform: type };
-		let isValid = true;
-		let errorMessage = "";
-
-		switch (type) {
-			case NOTIFICATION_TYPES.SLACK:
-				payload.webhookUrl = config.webhook;
-				if (typeof payload.webhookUrl === "undefined" || payload.webhookUrl === "") {
-					isValid = false;
-					errorMessage = t("notifications.slack.webhookRequired");
-				}
-				break;
-
-			case NOTIFICATION_TYPES.DISCORD:
-				payload.webhookUrl = config.webhook;
-				if (typeof payload.webhookUrl === "undefined" || payload.webhookUrl === "") {
-					isValid = false;
-					errorMessage = t("notifications.discord.webhookRequired");
-				}
-				break;
-
-			case NOTIFICATION_TYPES.TELEGRAM:
-				payload.botToken = config.token;
-				payload.chatId = config.chatId;
-				if (
-					typeof payload.botToken === "undefined" ||
-					payload.botToken === "" ||
-					typeof payload.chatId === "undefined" ||
-					payload.chatId === ""
-				) {
-					isValid = false;
-					errorMessage = t("notifications.telegram.fieldsRequired");
-				}
-				break;
-
-			case NOTIFICATION_TYPES.WEBHOOK:
-				payload.webhookUrl = config.url;
-				payload.platform = NOTIFICATION_TYPES.SLACK;
-				if (typeof payload.webhookUrl === "undefined" || payload.webhookUrl === "") {
-					isValid = false;
-					errorMessage = t("notifications.webhook.urlRequired");
-				}
-				break;
-
-			default:
-				isValid = false;
-				errorMessage = t("notifications.unsupportedType");
-		}
-
-		// If validation fails, show error and return
-		if (isValid === false) {
-			createToast({
-				body: errorMessage,
-				variant: "error",
-			});
-			setLoading(false);
-			return;
-		}
-
-		try {
-			const response = await networkService.testNotification({
-				platform: type,
-				payload: payload,
-			});
-
-			if (response.data.success === true) {
-				createToast({
-					body: t("notifications.testSuccess"),
-					variant: "info",
-				});
-			} else {
-				throw new Error(response.data.msg || t("notifications.testFailed"));
-			}
-		} catch (error) {
-			const errorMsg =
-				error.response?.data?.msg || error.message || t("notifications.networkError");
-			createToast({
-				body: `${t("notifications.testFailed")}: ${errorMsg}`,
-				variant: "error",
-			});
-			setError(errorMsg);
-		} finally {
-			setLoading(false);
-		}
-	};
-
-	return [loading, error, sendTestNotification];
-};
-
-export default useNotifications;

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 Icon from "../Icon";
+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,7 @@ const ActionsMenu = ({
 	const handleRemove = async (event) => {
 		event.preventDefault();
 		event.stopPropagation();
-		let monitor = { _id: actions.id };
+		let monitor = { id: actions.id };
 		await deleteMonitor({ monitor });
 		updateRowCallback();
 	};
@@ -39,7 +39,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 +72,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": {
@@ -83,7 +83,10 @@ const ActionsMenu = ({
 					},
 				}}
 			>
-				<Settings />
+				<Icon
+					name="Settings"
+					size={20}
+				/>
 			</IconButton>
 
 			<Menu
@@ -197,6 +200,7 @@ const ActionsMenu = ({
 				confirmationButtonLabel="Delete"
 				/* Do we need stop propagation? */
 				onConfirm={(e) => {
+					console.log(e);
 					e.stopPropagation();
 					handleRemove(e);
 				}}
@@ -210,7 +214,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/Alert/index.jsx

@@ -1,10 +1,7 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
-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";
+import Icon from "../Icon";
 import "./index.css";
 
 /**
@@ -13,9 +10,24 @@ import "./index.css";
  */
 
 const icons = {
-	info: <InfoOutlinedIcon />,
-	error: <ErrorOutlineOutlinedIcon />,
-	warning: <WarningAmberOutlinedIcon />,
+	info: (
+		<Icon
+			name="Info"
+			size={24}
+		/>
+	),
+	error: (
+		<Icon
+			name="AlertCircle"
+			size={24}
+		/>
+	),
+	warning: (
+		<Icon
+			name="AlertTriangle"
+			size={24}
+		/>
+	),
 };
 
 /**
@@ -97,10 +109,9 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
 						},
 					}}
 				>
-					<CloseIcon
-						sx={{
-							fontSize: "20px",
-						}}
+					<Icon
+						name="X"
+						size={20}
 					/>
 				</IconButton>
 			)}

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

@@ -1,27 +1,28 @@
-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 Icon from "../Icon";
 import PropTypes from "prop-types";
 
 const ArrowLeft = ({ type, color = "#667085", ...props }) => {
 	if (type === "double") {
 		return (
-			<LeftArrowDouble
-				style={{ color }}
+			<Icon
+				name="ChevronsLeft"
+				color={color}
 				{...props}
 			/>
 		);
 	} else if (type === "long") {
 		return (
-			<LeftArrowLong
-				style={{ color }}
+			<Icon
+				name="ArrowLeft"
+				color={color}
 				{...props}
 			/>
 		);
 	} else {
 		return (
-			<LeftArrow
-				style={{ color }}
+			<Icon
+				name="ChevronLeft"
+				color={color}
 				{...props}
 			/>
 		);

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

@@ -1,19 +1,20 @@
-import RightArrow from "../../assets/icons/right-arrow.svg?react";
-import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
+import Icon from "../Icon";
 import PropTypes from "prop-types";
 
 const ArrowRight = ({ type, color = "#667085", ...props }) => {
 	if (type === "double") {
 		return (
-			<RightArrowDouble
-				style={{ color }}
+			<Icon
+				name="ChevronsRight"
+				color={color}
 				{...props}
 			/>
 		);
 	} else {
 		return (
-			<RightArrow
-				style={{ color }}
+			<Icon
+				name="ChevronRight"
+				color={color}
 				{...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/timeUtilsLegacy.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/timeUtilsLegacy.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/timeUtilsLegacy.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/timeUtilsLegacy.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,
@@ -142,7 +148,7 @@ const StatusPageBarChart = ({ checks = [] }) => {
 							</>
 						}
 						placement="top"
-						key={`check-${check?._id}`}
+						key={`check-${check?.id}`}
 						slotProps={{
 							popper: {
 								className: "bar-tooltip",

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/timeUtilsLegacy.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,6 @@
 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 Icon from "../Icon";
 import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 
@@ -35,16 +34,16 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 			alignItems="center"
 		>
 			{outlined ? (
-				<CheckOutlined alt="check" />
+				<Icon
+					name="CheckCircle"
+					size={20}
+				/>
 			) : (
-				<Box
-					lineHeight={0}
-					sx={{
-						"& svg > path": { fill: colors[variant] },
-					}}
-				>
-					<CheckGrey alt="form checks" />
-				</Box>
+				<Icon
+					name="Check"
+					size={16}
+					color={colors[variant]}
+				/>
 			)}
 			<Typography
 				component="span"
@@ -57,7 +56,14 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 					fontWeight: 450,
 				}}
 			>
-				{noHighlightText && <Typography component="span">{noHighlightText}</Typography>}{" "}
+				{noHighlightText && (
+					<Typography
+						component="span"
+						sx={{ color: "inherit" }}
+					>
+						{noHighlightText}
+					</Typography>
+				)}{" "}
 				{text}
 			</Typography>
 		</Stack>
@@ -65,7 +71,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

@@ -8,9 +8,8 @@ import IconButton from "@mui/material/IconButton";
 import Container from "@mui/material/Container";
 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 Icon from "../Icon";
+import ThemeSwitch from "../ThemeSwitch/index.jsx";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -153,7 +152,11 @@ const AppAppBar = () => {
 							aria-label="Menu button"
 							onClick={toggleDrawer(true)}
 						>
-							<MenuIcon sx={{ color: theme.palette.text.primary }} />
+							<Icon
+								name="Menu"
+								size={24}
+								color={theme.palette.text.primary}
+							/>
 						</IconButton>
 						<Drawer
 							anchor="top"
@@ -176,7 +179,11 @@ const AppAppBar = () => {
 									}}
 								>
 									<IconButton onClick={toggleDrawer(false)}>
-										<CloseRoundedIcon sx={{ color: theme.palette.text.primary }} />
+										<Icon
+											name="X"
+											size={24}
+											color={theme.palette.text.primary}
+										/>
 									</IconButton>
 								</Box>
 

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) => {