style: fix Prettier formatting in documentation content

Add three new documentation articles to the user guide:
- Docker monitors: Setup and configuration for container monitoring
- Bulk import monitors: CSV import guide for creating multiple monitors
- Account settings: Profile, password, and account management

Updates article counts in collections accordingly.

.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

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

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

charts/helm/checkmate/INSTALLATION.md

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

charts/helm/checkmate/templates/_prechecks.yaml

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

charts/helm/checkmate/templates/prechecks.yaml

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

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

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

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

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

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

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

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

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

charts/helm/checkmate/templates/secrets.yaml

@@ -4,10 +4,6 @@
   {{- fail "secrets.JWT_SECRET must be overridden and cannot be 'change_me'" }}
 {{- end }}
 
-{{- if or (not $secrets.REFRESH_TOKEN_SECRET) (eq $secrets.REFRESH_TOKEN_SECRET "change_me") }}
-  {{- fail "secrets.REFRESH_TOKEN_SECRET must be overridden and cannot be 'change_me'" }}
-{{- end }}
-
 apiVersion: v1
 kind: Secret
 metadata:

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

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

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

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

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

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

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

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

charts/helm/checkmate/values.yaml

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

client/.env.production

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

client/.gitignore

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

client/package.json

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

client/src/App.jsx

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

client/src/Components/LanguageSelector.jsx

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

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

@@ -1,33 +0,0 @@
-.home-layout {
-	position: relative;
-	min-height: 100vh;
-	margin: 0 auto;
-	padding: 0;
-}
-
-/* TODO go for this approach for responsiveness. The aside needs to be taken care of */
-/* @media (max-width: 1000px) {
-	.home-layout {
-		flex-direction: column !important;
-	}
-} */
-
-/* .home-layout aside {
-	position: sticky;
-	top: 0;
-	left: 0;
-	height: 100vh;
-	max-width: var(--env-var-side-bar-width);
-} */
-
-.home-layout > div {
-	min-height: calc(100vh - var(--env-var-spacing-2) * 2);
-	flex: 1;
-}
-
-.home-content-wrapper {
-	padding: var(--env-var-spacing-2);
-	max-width: 1400px;
-	margin: 0 auto;
-	flex: 1;
-}

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/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,8 @@ const ActionsMenu = ({
 	const handleRemove = async (event) => {
 		event.preventDefault();
 		event.stopPropagation();
-		let monitor = { _id: actions.id };
+		let monitor = { id: actions.id };
+		console.log(monitor);
 		await deleteMonitor({ monitor });
 		updateRowCallback();
 	};
@@ -39,7 +40,7 @@ const ActionsMenu = ({
 	const handlePause = async () => {
 		try {
 			setIsLoading(true);
-			await pauseMonitor({ monitorId: monitor._id });
+			await pauseMonitor({ monitorId: monitor.id });
 			pauseCallback();
 		} catch (error) {
 			createToast({ body: "Failed to pause monitor." });
@@ -72,7 +73,7 @@ const ActionsMenu = ({
 				aria-label="monitor actions"
 				onClick={(event) => {
 					event.stopPropagation();
-					openMenu(event, monitor._id, monitor.type === "ping" ? null : monitor.url);
+					openMenu(event, monitor.id, monitor.type === "ping" ? null : monitor.url);
 				}}
 				sx={{
 					"&:focus": {
@@ -83,7 +84,10 @@ const ActionsMenu = ({
 					},
 				}}
 			>
-				<Settings />
+				<Icon
+					name="Settings"
+					size={20}
+				/>
 			</IconButton>
 
 			<Menu
@@ -197,6 +201,7 @@ const ActionsMenu = ({
 				confirmationButtonLabel="Delete"
 				/* Do we need stop propagation? */
 				onConfirm={(e) => {
+					console.log(e);
 					e.stopPropagation();
 					handleRemove(e);
 				}}
@@ -210,7 +215,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/timeUtils.js";
 import { useEffect, useState } from "react";
 import "./index.css";
 import { useSelector } from "react-redux";
@@ -103,7 +103,7 @@ const BarChart = ({ checks = [] }) => {
 							</>
 						}
 						placement="top"
-						key={`check-${check?._id}`}
+						key={`check-${check?.id}`}
 						slotProps={{
 							popper: {
 								className: "bar-tooltip",
@@ -145,7 +145,7 @@ const BarChart = ({ checks = [] }) => {
 							position="relative"
 							width="9px"
 							height="100%"
-							backgroundColor={theme.palette.primary.lowContrast} // CAIO_REVIEW
+							backgroundColor={theme.palette.primary.lowContrast}
 							sx={{
 								borderRadius: theme.spacing(1.5),
 								/* 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,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"
@@ -65,7 +64,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/FilterHeader/index.jsx

@@ -1,7 +1,7 @@
 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";
+import Icon from "../Icon";
 
 /**
  * A reusable filter header component that displays a dropdown menu with selectable options.
@@ -29,9 +29,10 @@ const FilterHeader = ({ header, options, value, onChange, multiple = true }) =>
 			<Select
 				multiple={multiple}
 				IconComponent={(props) => (
-					<AddCircleOutlineIcon
+					<Icon
 						{...props}
-						sx={{ fontSize: "medium" }}
+						name="PlusCircle"
+						size={18}
 					/>
 				)}
 				displayEmpty

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

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

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

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

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

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

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

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

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

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

client/src/Components/v1/Icon/iconMap.js

@@ -0,0 +1,120 @@
+/**
+ * Maps legacy icon names to Lucide icon names
+ * Use: import { iconMap } from './iconMap'; LucideIcons[iconMap['monitors']]
+ */
+export const iconMap = {
+	// Navigation/Sidebar icons
+	monitors: "Globe",
+	incidents: "AlertTriangle",
+	integrations: "Link",
+	"page-speed": "Gauge",
+	settings: "Settings",
+	notifications: "Bell",
+	maintenance: "Wrench",
+	"status-pages": "Wifi",
+	docs: "FileText",
+	discussions: "MessageCircle",
+	support: "HelpCircle",
+	changeLog: "Code",
+	logs: "Database",
+
+	// User icons
+	user: "User",
+	"user-two": "Users",
+	"user-edit": "UserPen",
+	groups: "Users",
+	lock: "Lock",
+	key: "Key",
+	logout: "LogOut",
+
+	// Action icons
+	edit: "Pencil",
+	"trash-bin": "Trash2",
+	search: "Search",
+	"close-icon": "X",
+	check: "Check",
+	"check-icon": "CheckCircle",
+	"check-outlined": "CheckCircle",
+
+	// Arrow icons
+	"left-arrow": "ChevronLeft",
+	"right-arrow": "ChevronRight",
+	"up-arrow": "ChevronUp",
+	"down-arrow": "ChevronDown",
+	"left-arrow-double": "ChevronsLeft",
+	"right-arrow-double": "ChevronsRight",
+	"left-arrow-long": "ArrowLeft",
+	"top-right-arrow": "ArrowUpRight",
+	"open-in-new-page": "ExternalLink",
+	"selector-vertical": "ChevronsUpDown",
+
+	// Status/Alert icons
+	"alert-icon": "Bell",
+	"warning-icon": "AlertCircle",
+	"history-icon": "History",
+
+	// Data/Chart icons
+	dashboard: "LayoutGrid",
+	"monitor-graph-line": "TrendingUp",
+	"response-time-icon": "TrendingUp",
+	"uptime-icon": "Activity",
+	"speedometer-icon": "Gauge",
+	"spedometer-icon": "Gauge",
+	"ruler-icon": "Ruler",
+	"performance-report": "Layers",
+	"average-response-icon": "BarChart3",
+	"distributed-uptime": "Network",
+
+	// Misc icons
+	calendar: "Calendar",
+	"calendar-check": "CalendarCheck",
+	"clock-snooze": "Clock",
+	mail: "Mail",
+	email: "Mail",
+	folder: "Folder",
+	"dots-vertical": "MoreVertical",
+	"pause-icon": "PauseCircle",
+	"resume-icon": "PlayCircle",
+	"checkbox-filled": "CheckSquare",
+	"checkbox-outline": "Square",
+	"radio-checked": "Circle",
+	"cpu-chip": "Cpu",
+	certificate: "Award",
+	"interval-check": "RefreshCw",
+};
+
+/**
+ * MUI icon to Lucide mapping
+ */
+export const muiToLucideMap = {
+	AddCircleOutline: "PlusCircle",
+	ArrowDownwardRounded: "ArrowDown",
+	ArrowUpwardRounded: "ArrowUp",
+	ArrowDropDown: "ChevronDown",
+	ArrowOutward: "ExternalLink",
+	CheckCircle: "CheckCircle2",
+	Clear: "X",
+	Close: "X",
+	CloseRounded: "X",
+	CloudUpload: "Upload",
+	Delete: "Trash2",
+	DeleteOutlineRounded: "Trash2",
+	Email: "Mail",
+	ErrorOutline: "AlertTriangle",
+	ErrorOutlineOutlined: "AlertTriangle",
+	Image: "ImageIcon",
+	InfoOutlined: "Info",
+	KeyboardArrowDown: "ChevronDown",
+	Menu: "Menu",
+	PauseCircleOutline: "PauseCircle",
+	PauseOutlined: "Pause",
+	PlayArrowOutlined: "Play",
+	PlayCircleOutlineRounded: "PlayCircle",
+	RadioButtonChecked: "Circle",
+	ReorderRounded: "GripVertical",
+	SettingsOutlined: "Settings",
+	Share: "Share2",
+	Visibility: "Eye",
+	VisibilityOff: "EyeOff",
+	WarningAmberOutlined: "AlertTriangle",
+};

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

@@ -0,0 +1,196 @@
+import { useTheme } from "@mui/material";
+import PropTypes from "prop-types";
+import {
+	Activity,
+	AlertCircle,
+	AlertTriangle,
+	ArrowDown,
+	ArrowLeft,
+	ArrowUp,
+	ArrowUpRight,
+	Bell,
+	Calendar,
+	Check,
+	CheckCircle,
+	CheckSquare,
+	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
+	ChevronsLeft,
+	ChevronsRight,
+	ChevronsUpDown,
+	Circle,
+	CircleDot,
+	Clock,
+	Code,
+	Cpu,
+	Database,
+	ExternalLink,
+	Eye,
+	EyeOff,
+	FileText,
+	Gauge,
+	Globe,
+	GripVertical,
+	HelpCircle,
+	History,
+	Image as ImageIcon,
+	Info,
+	Key,
+	Layers,
+	Link,
+	Lock,
+	LogOut,
+	Mail,
+	Menu,
+	MessageCircle,
+	MoreVertical,
+	Pause,
+	PauseCircle,
+	Play,
+	PlayCircle,
+	PlusCircle,
+	RefreshCw,
+	Ruler,
+	Search,
+	Settings,
+	Square,
+	Trash2,
+	TrendingUp,
+	Upload,
+	User,
+	Users,
+	Wifi,
+	Wrench,
+	X,
+} from "lucide-react";
+
+/**
+ * Map of icon names to Lucide icon components.
+ * Only icons explicitly imported here will be included in the bundle (tree-shaking).
+ * To add a new icon: import it above and add it to this object.
+ */
+const iconComponents = {
+	Activity,
+	AlertCircle,
+	AlertTriangle,
+	ArrowDown,
+	ArrowLeft,
+	ArrowUp,
+	ArrowUpRight,
+	Bell,
+	Calendar,
+	Check,
+	CheckCircle,
+	CheckSquare,
+	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
+	ChevronsLeft,
+	ChevronsRight,
+	ChevronsUpDown,
+	Circle,
+	CircleDot,
+	Clock,
+	Code,
+	Cpu,
+	Database,
+	ExternalLink,
+	Eye,
+	EyeOff,
+	FileText,
+	Gauge,
+	Globe,
+	GripVertical,
+	HelpCircle,
+	History,
+	Image: ImageIcon,
+	Info,
+	Key,
+	Layers,
+	Link,
+	Lock,
+	LogOut,
+	Mail,
+	Menu,
+	MessageCircle,
+	MoreVertical,
+	Pause,
+	PauseCircle,
+	Play,
+	PlayCircle,
+	PlusCircle,
+	RefreshCw,
+	Ruler,
+	Search,
+	Settings,
+	Square,
+	Trash2,
+	TrendingUp,
+	Upload,
+	User,
+	Users,
+	Wifi,
+	Wrench,
+	X,
+};
+
+/**
+ * Theme-aware icon component wrapping Lucide icons
+ *
+ * @param {string} name - Lucide icon name (e.g., "Bell", "Check", "ArrowLeft")
+ * @param {number} size - Icon size in pixels (default: 20)
+ * @param {string} color - Direct color value OR theme path like "primary.contrastText"
+ * @param {number} strokeWidth - Stroke width (default: 1.5)
+ * @param {string} fill - Fill color (default: "none")
+ */
+const Icon = ({ name, size = 20, color, strokeWidth = 1.5, fill = "none", ...props }) => {
+	const theme = useTheme();
+
+	// Resolve color from theme path or use direct value
+	const resolveColor = (colorValue) => {
+		if (!colorValue) {
+			return theme.palette.primary.contrastTextTertiary; // Default icon color
+		}
+
+		// If it's a theme path like "primary.contrastText"
+		if (typeof colorValue === "string" && colorValue.includes(".")) {
+			const parts = colorValue.split(".");
+			let resolved = theme.palette;
+			for (const part of parts) {
+				resolved = resolved?.[part];
+			}
+			return resolved || colorValue;
+		}
+
+		// Direct color value
+		return colorValue;
+	};
+
+	const LucideIcon = iconComponents[name];
+
+	if (!LucideIcon) {
+		console.warn(`Icon "${name}" not found in Icon component`);
+		return null;
+	}
+
+	return (
+		<LucideIcon
+			size={size}
+			color={resolveColor(color)}
+			strokeWidth={strokeWidth}
+			fill={fill}
+			{...props}
+		/>
+	);
+};
+
+Icon.propTypes = {
+	name: PropTypes.string.isRequired,
+	size: PropTypes.number,
+	color: PropTypes.string,
+	strokeWidth: PropTypes.number,
+	fill: PropTypes.string,
+};
+
+export default Icon;

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

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

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

@@ -1,9 +1,7 @@
 import PropTypes from "prop-types";
 import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import CheckboxOutline from "../../../assets/icons/checkbox-outline.svg?react";
-import CheckboxFilled from "../../../assets/icons/checkbox-filled.svg?react";
-import "./index.css";
+import Icon from "../../Icon";
 
 /**
  * Checkbox Component
@@ -66,8 +64,8 @@ const Checkbox = ({
 					name={name}
 					value={value}
 					onChange={onChange}
-					icon={<CheckboxOutline />}
-					checkedIcon={<CheckboxFilled />}
+					icon={<Icon name="Square" />}
+					checkedIcon={<Icon name="CheckSquare" />}
 					inputProps={{
 						"aria-label": "controlled checkbox",
 						id: id,