add new functionality and improve backend server structure

- Enhance server functionality and optimize backend code
- Add multi-database support (PostgreSQL, MySQL, SQLite)

.dockerignore

@@ -0,0 +1,10 @@
+.git
+server/
+**/node_modules
+**/dist
+**/.next
+**/.turbo
+**/.cache
+**/coverage
+**/*.log
+

.github/FUNDING.yml

@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-github: [tolaleng]
+github: #[tolaleng]
 patreon: # Replace with a single Patreon username
 open_collective: #checkcle
 ko_fi: # Replace with a single Ko-fi username

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -9,16 +9,16 @@ body:
     attributes:
       value: |
         **Thank you for taking the time to report a bug!**
-        Please fill out the following template so we can reproduce and fix the issue faster.
+        Please complete the form below to help us reproduce and fix the issue more effectively.
 
   - type: input
     id: environment
     attributes:
       label: Environment
       description: |
-        Describe where you encountered the issue.
+        Describe the environment where the issue occurred.
-        (e.g., OS, browser, Node version, etc.)
+        (e.g., OS, browser, Node.js version, Docker version, etc.)
-      placeholder: "Example: macOS 14.0, Chrome 125, Node.js 20.3.0"
+      placeholder: "Example: Ubuntu 22.04, Chrome 125, Node.js 20.3.0"
     validations:
       required: true
 
@@ -27,7 +27,7 @@ body:
     attributes:
       label: Bug Description
       description: |
-        A clear and concise description of what the bug is.
+        A clear and concise description of the issue you encountered.
       placeholder: "When I do X, Y happens instead of Z..."
     validations:
       required: true
@@ -37,13 +37,12 @@ body:
     attributes:
       label: Steps to Reproduce
       description: |
-        How can we reproduce the behavior?
+        Provide step-by-step instructions to reproduce the issue.
-        Please list the steps in order.
       placeholder: |
         1. Go to '...'
         2. Click on '...'
         3. Scroll down to '...'
-        4. See error
+        4. See the error
     validations:
       required: true
 
@@ -61,8 +60,8 @@ body:
     attributes:
       label: Screenshots or Videos
       description: |
-        If applicable, add screenshots or screen recordings to help explain your problem.
+        If applicable, add screenshots or screen recordings to help illustrate the issue.
-      placeholder: "Attach screenshots here."
+      placeholder: "Drag and drop or paste screenshots here."
     validations:
       required: false
 
@@ -71,8 +70,8 @@ body:
     attributes:
       label: Logs
       description: |
-        If applicable, paste logs or error messages here.
+        If applicable, paste any relevant logs or error messages.
-        Please remove any sensitive information.
+        Please remove sensitive information before submitting.
       render: shell
       placeholder: |
         ```
@@ -86,9 +85,10 @@ body:
     id: terms
     attributes:
       label: Checklist
-      description: Before submitting, please confirm:
+      description: |
+        Please confirm the following before submitting:
       options:
-        - label: I have searched existing issues to avoid duplicates.
+        - label: I have searched existing issues to avoid creating duplicates.
           required: true
-        - label: I have provided enough information for reproduction.
+        - label: I have provided sufficient information to reproduce the issue.
           required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -1 +1 @@
-blank_issues_enabled: false
+blank_issues_enabled: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -15,8 +15,7 @@ body:
     id: description
     attributes:
       label: Feature Description
-      description: |
+      description: A clear and concise description of the feature you’d like to see.
-        A clear and concise description of the feature you’d like to see.
       placeholder: "I would like to have..."
     validations:
       required: true
@@ -25,8 +24,7 @@ body:
     id: motivation
     attributes:
       label: Motivation
-      description: |
+      description: Please explain why this feature would be useful.
-        Please explain why this feature would be useful.
       placeholder: "This feature would help because..."
     validations:
       required: true
@@ -35,8 +33,7 @@ body:
     id: alternatives
     attributes:
       label: Alternatives Considered
-      description: |
+      description: Have you considered any alternative solutions or workarounds?
-        Have you considered any alternative solutions or workarounds?
       placeholder: "I have tried..."
     validations:
       required: false
@@ -45,8 +42,7 @@ body:
     id: additional
     attributes:
       label: Additional Context
-      description: |
+      description: Add any other context or screenshots about the feature request here.
-        Add any other context or screenshots about the feature request here.
       placeholder: "Links to related issues or references..."
     validations:
       required: false
@@ -55,7 +51,8 @@ body:
     id: checklist
     attributes:
       label: Checklist
-      description: Before submitting, please confirm:
+      description: |
+        Before submitting, please confirm:
       options:
         - label: I have searched existing issues to make sure this feature hasn’t been requested yet.
           required: true

.github/ISSUE_TEMPLATE/question.yml

@@ -1,5 +1,5 @@
 name: ❓ Ask for Help
-description: Ask a question or request guidance about this project.
+description: Ask a question or request guidance related to this project.
 title: "[Question]: "
 labels: [question]
 assignees: []
@@ -8,8 +8,8 @@ body:
   - type: markdown
     attributes:
       value: |
-        **Thank you for reaching out!**
+        **Thanks for reaching out!**
-        Please fill out this form to help us understand your question.
+        Please provide as much detail as possible so we can better assist you.
 
   - type: textarea
     id: question
@@ -17,17 +17,17 @@ body:
       label: What do you need help with?
       description: Clearly describe your question or what you're trying to achieve.
       placeholder: |
-        I am trying to do X but I'm not sure how to...
+        I am trying to do X, but I'm not sure how to...
     validations:
       required: true
 
   - type: textarea
     id: context
     attributes:
-      label: Context
+      label: Additional Context
       description: |
-        Provide any additional context, related issues, or links that help explain your question.
+        Provide any relevant context, related issues, pull requests, or documentation links that could help us understand your question better.
-      placeholder: "Related issues, pull requests, or documentation..."
+      placeholder: "Mention related issues, links to docs, or previous discussions..."
     validations:
       required: false
 
@@ -36,8 +36,8 @@ body:
     attributes:
       label: Environment Details
       description: |
-        If applicable, please provide details about your environment (OS, Node version, browser, etc.).
+        If relevant, provide details about your environment (e.g., OS, browser, Node.js version).
-      placeholder: "Example: Ubuntu 22.04, Node.js v20, Chrome 125"
+      placeholder: "Example: Windows 11, Node.js v20.3.0, Firefox 125"
     validations:
       required: false
 
@@ -45,9 +45,10 @@ body:
     id: checklist
     attributes:
       label: Checklist
-      description: Before submitting, please confirm:
+      description: |
+        Before submitting, please confirm the following:
       options:
-        - label: I have searched existing issues and discussions.
+        - label: I have searched existing issues and discussions for a solution.
           required: true
-        - label: I have read the documentation.
+        - label: I have read the relevant documentation.
           required: true

.github/workflows/build-frontend-image.yml.dev

@@ -0,0 +1,59 @@
+name: Build and Publish Frontend Image
+
+on:
+  push:
+    branches: [ "develop", "feature/**" ]
+    paths:
+      - 'application/**'
+      - '.github/workflows/build-frontend-image.yml'
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    env:
+      IMAGE_NAME: ghcr.io/${{ github.repository_owner }}/checkcle-frontend
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels)
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=sha
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: application
+          file: application/Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          provenance: false
+

.gitignore

@@ -22,6 +22,8 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+pocketbase.exe
 application/src/lib/pocketbase.ts
+server/pb_data/
 Dockerfile
 application/src/lib/pocketbase-prod.ts

.talismanrc

@@ -0,0 +1,4 @@
+fileignoreconfig:
+- filename: application/package-lock.json
+  checksum: 3253a06ef27a634ec2b8a8fe9c156288b9fcf57024623c7ddc3d321f2568e498
+version: "1.0"

CONTRIBUTING.md

@@ -79,7 +79,7 @@ Click "Fork" on [GitHub](https://github.com/operacle/checkcle) to create your ow
 
 ### 2. Clone Your Fork
 ```bash
-git clone --branch develop https://github.com/operacle/checkcle.git
+git clone https://github.com/yourusername/checkcle.git
 cd checkcle
 ```
 
@@ -116,7 +116,7 @@ go run main.go (you do not need to change the .env while it's the localhost conn
 Click "Fork" on [GitHub](https://github.com/operacle/Distributed-Regional-Monitoring) to create your own copy.
 
 #### 2. Clone Your Fork
-git clone --branch main https://github.com/operacle/Distributed-Regional-Monitoring.git
+git clone https://github.com/yourusername/Distributed-Regional-Monitoring.git
 cd Distributed-Regional-Monitoring
 
 #### 3. Install Go Service (make sure you have installed the Go Service)

README.md

@@ -20,6 +20,12 @@
         <br/><strong>Japanese</strong>
       </a>
     </td>
+    <td align="center">
+      <a href="docs/README_zhcn.md">
+        <img src="https://flagcdn.com/24x18/cn.png" alt="Chinese" />  
+        <br/><strong>Chinese</strong>
+      </a>
+    </td>
   </tr>
 </table>
 
@@ -39,10 +45,12 @@ CheckCle is an Open Source solution for seamless, real-time monitoring of full-s
 
 ## 🎯 Live Demo  
 👉 **Try it now:** [CheckCle Live Demo](https://demo.checkcle.io)
+    User: admin@example.com | Passwd: Admin123456
 
 ## 🌟 Core Features
+### 📝 Roadmap : [DEVELOPMENT_ROADMAP](docs/DEVELOPMENT_ROADMAP.md) 
 
-### Uptime Services & Infrastructure Server Monitoring
+### Uptime Services & Infrastructure Server Monitoring 
 - Monitor HTTP, DNS, and Ping protocols
 - Monitor TCP-based, API services (e.g., FTP, SMTP, HTTP)
 - Track detail uptime, response times, and performance issues
@@ -52,7 +60,7 @@ CheckCle is an Open Source solution for seamless, real-time monitoring of full-s
 - Infrastructure Server Monitoring, Supports Linux (🐧 Debian, Ubuntu, CentOS, Red Hat, etc.) and Windows (Beta). And Servers metrics like CPU, RAM, disk usage, and network activity) with an one-line installation angent script.
 - Schedule Maintenance & Incident Management
 - Operational Status / Public Status Pages
-- Notifications via email, Telegram, Discord, and Slack
+- Notifications via email, Telegram, Discord, Slack, Matrix, and more
 - Reports & Analytics
 - Settings Panel (User Management, Data Retention, Multi-language, Themes (Dark & Light Mode), Notification and channels and alert templates).
 
@@ -62,26 +70,9 @@ CheckCle is an Open Source solution for seamless, real-time monitoring of full-s
 * ✅ x86_64 PCs, laptops, servers (amd64)
 * ✅ Modern Raspberry Pi 3/4/5 with (64-bit OS), Apple Silicon Macs (arm64)
 
-### Install CheckCle using one of the options below.
+### Install CheckCle using one of the following methods:
 
-
+1. Install with Docker Compose Configuration (Recommended)
-1. CheckCle One-Click Installation - Just copy and run on terminal
-```bash 
-curl -fsSL https://checkcle.io/install.sh | bash
-
-```
-2. Install with docker run. Just copy ready docker run command below
-```bash 
-docker run -d \
-  --name checkcle \
-  --restart unless-stopped \
-  -p 8090:8090 \
-  -v /opt/pb_data:/mnt/pb_data \
-  --ulimit nofile=4096:8192 \
-  operacle/checkcle:latest
-
-```
-3. Install with Docker compose Configuration.
 ```bash 
 
 version: '3.9'
@@ -101,6 +92,18 @@ services:
         hard: 8192
 
 ```
+2. Install with docker run. Just copy ready docker run command below
+```bash 
+docker run -d \
+  --name checkcle \
+  --restart unless-stopped \
+  -p 8090:8090 \
+  -v /opt/pb_data:/mnt/pb_data \
+  --ulimit nofile=4096:8192 \
+  operacle/checkcle:latest
+
+```
+
 3. Admin Web Management
 
     Default URL: http://0.0.0.0:8090
@@ -110,33 +113,12 @@ services:
 4. Follow the Quick Start Guide at https://docs.checkcle.io
 
 ###
-![checkcle-collapse-black](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/uptime-monitoring.png)
+![checkcle-collapse-black](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/uptime-1.4.png)
-![Service Detail Page](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/uptime-service-detail.png)
+![Service Detail Page](https://cdn.checkcle.io/images/uptime/uptime-regional-detail.png)
-![checkcle-server-instance](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/instance-server-monitoring.png)
+![checkcle-server-instance](https://cdn.checkcle.io/images/server/server-list.png)
-![Schedule Maintenance](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-schedule-maintenance.png)
+![SSL Monitoring](https://cdn.checkcle.io/images/ssl-domain/ssl-list.png)
-![SSL Monitoring](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/ssl-monitoring.png)
+![Notification System](https://cdn.checkcle.io/general/powerfull_notification.png)
 
-## 📝 Development Roadmap
-
-- ✅ Health check & uptime monitoring (HTTP)
-- ✅ Dashboard UI with live stats  
-- ✅ Auth with Multi-users system (admin)
-- ✅ Notifications (Telegram)
-- ✅ Docker containerization 
-- ✅ CheckCle Website
-- ✅ CheckCle Demo Server
-- ✅ SSL & Domain Monitoring
-- ✅ Schedule Maintenance 
-- ✅ Incident Management
-- [ ] Infrastructure Server Monitoring
-- ✅ Operational Status / Public Status Pages
-- ✅ Uptime monitoring (HTTP, TCP, PING, DNS) Full functionality
-- ✅ Distributed Regional Monitoring Agent [Support Operation](https://github.com/operacle/Distributed-Regional-Monitoring)
-- ✅ System Setting Panel and Mail Settings
-- ✅ User Permission Roles
-- [ ] Notifications (Email/Slack/Discord/Signal)  
-- ✅ Data Retention & Automate Strink (Muti Options to Shrink Data & Database )
-- ✅ Open-source release with full documentation 
 
 ## 🌟 CheckCle for Communities?
 - **Built with Passion**: Created by an open-source enthusiast for the community
@@ -145,6 +127,48 @@ services:
 
 ---
 
+## Sponsors
+Sponsorships will no longer be accepted. From now on, support will only be accepted in the form of ecosystem and community partnerships that provide infrastructure such as cloud servers, domains, or hosting credits.
+
+If you’re a tech company interested in supporting CheckCle, please contact the author directly at tolaleng@checkcle.io
+
+### 🤝 Ecosystem & Community Partner
+<div style="display: flex; align-items: center; gap: 10px;">
+  <a href="https://github.com/gitbookio">
+    <img src="https://avatars.githubusercontent.com/u/7111340?s=200&v=4" 
+         width="75" height="75" 
+         style="border-radius: 50%;" 
+         alt="GitBook Logo" />
+  </a>
+
+  <a href="https://www.cloudflare.com">
+    <img src="https://cdn.checkcle.io/images/sponsor/cloudflare-checkcle_logo.png" 
+         height="60" 
+         alt="Cloudflare Logo" />
+  </a>
+    <a href="https://m.do.co/c/0c27ef82475f">
+    <img src="https://cdn.checkcle.io/images/sponsor/digitalocean_checkcle.png" 
+         height="50" 
+         alt="DigitalOcean Logo" />
+  </a>
+  </a>
+    <a href="https://www.jetbrains.com/">
+    <img src="https://cdn.checkcle.io/images/sponsor/jetbrains.png" 
+         height="50" 
+         alt="Jetbrains Logo" />
+  </a>
+</div>
+
+---
+
+
+## 👥 Contributors
+Thank you for contributing and continuously making CheckCle better, you're awesome 🫶
+
+[![](https://contrib.rocks/image?repo=operacle/checkcle)](https://github.com/operacle/checkcle/graphs/contributors)
+
+---
+
 ## 🤝 Ways to Contribute
 
 Here are some ways you can help improve CheckCle:
@@ -153,30 +177,18 @@ Here are some ways you can help improve CheckCle:
 - 🌟 **Suggest Features** – Have an idea? Start a [Discussion](https://github.com/operacle/checkcle/discussions) or open a Feature Request issue.
 - 🛠 **Submit Pull Requests** – Improve the code, fix bugs, add features, or enhance the docs.
 - 📝 **Improve Documentation** – Even a typo fix helps!
-- 🌍 **Spread the Word** – Star ⭐ the repo, share it on socials, and invite others to contribute!
+- 🌍 **Spread the Word** – Star ⭐ the [CheckCle](https://github.com/operacle/checkcle.git)  repo, share it on socials, and invite others to contribute!
 
 ---
 
 ## 🌍 Stay Connected
 - Website: [checkcle.io](https://checkcle.io)
-- Documentation: [docs.checkcle.io](https://docs.checkcle.io)
+- Documentation: [docs.checkcle.io](https://docs.checkcle.io) | Big thanks to [GitBook](https://github.com/gitbookio) for sponsoring the OSS site plan for CheckCle!
-- GitHub Repository: ⭐ [CheckCle](https://github.com/operacle/checkcle.git)
+- Chat on Discord: Join our community [@discord](https://discord.gg/xs9gbubGwX)
-- Community Channels: Engage via discussions and issues!
+- Follow us on X: [@asqrm_io](https://x.com/asqrm_io)
-- Discord: Join our community [@discord](https://discord.gg/xs9gbubGwX)
-- X: [@tlengoss](https://x.com/tlengoss)
 
 ## 📜 License
 
 CheckCle is released under the MIT License.
 
 ---
-## 👥 Contributors
-
-[![](https://contrib.rocks/image?repo=operacle/checkcle)](https://github.com/operacle/checkcle/graphs/contributors)
-
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=operacle/checkcle&type=Date)](https://www.star-history.com/#operacle/checkcle&Date)
-
-Stay informed, stay online, with CheckCle! 🌐

SECURITY.md

@@ -39,6 +39,7 @@ We support the latest stable release of `checkcle`. Security patches may also be
 
 | Version | Supported |
 |---------|-----------|
+| `develop` (latest) | ✅ Yes |
 | `main` (latest) | ✅ Yes |
 | Older versions | ⚠️ Best-effort |
 | Pre-release or forks | ❌ No |

application/.dockerignore

@@ -0,0 +1,6 @@
+.git
+node_modules
+dist
+.cache
+*.log
+

application/Dockerfile

@@ -0,0 +1,18 @@
+# syntax=docker/dockerfile:1.7
+FROM node:20-bullseye-slim AS build
+WORKDIR /app
+ENV npm_config_fund=false \
+    npm_config_audit=false \
+    npm_config_progress=false
+COPY package.json package-lock.json ./
+RUN --mount=type=cache,target=/root/.npm npm ci --no-audit --fund=false
+COPY . .
+RUN --mount=type=cache,target=/root/.npm npm run build
+
+FROM nginx:1.27-alpine
+RUN rm -rf /usr/share/nginx/html/*
+COPY --from=build /app/dist /usr/share/nginx/html
+# SPA fallback + asset caching
+RUN printf 'server {\n  listen 80;\n  server_name _;\n  root /usr/share/nginx/html;\n  index index.html;\n  location / { try_files $uri $uri/ /index.html; }\n  location ~* \\.(?:js|css|png|jpg|jpeg|gif|svg|ico|woff2?)$ { expires 7d; add_header Cache-Control "public, max-age=604800, immutable"; try_files $uri =404; }\n}\n' > /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx","-g","daemon off;"]

application/index.html

@@ -4,7 +4,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CheckCle is an open-source monitoring stack</title>
+    <title>CheckCle</title>
     <meta name="description" content="An open-source monitoring platform offering real-time insights into server and service health, incident management, and operational transparency." />
     <meta name="author" content="Tola Leng" />
 
@@ -14,7 +14,7 @@
     <meta property="og:image" content="https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-black.png" />
 
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@tlengoss" />
+    <meta name="twitter:site" content="@checkcle_oss" />
     <meta name="twitter:image" content="https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-black.png" />
   </head>
 

application/package.json

@@ -50,7 +50,7 @@
     "jspdf-autotable": "^5.0.2",
     "lucide-react": "^0.462.0",
     "next-themes": "^0.3.0",
-    "pocketbase": "^0.19.0",
+    "pocketbase": "^0.26.8",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
@@ -82,4 +82,4 @@
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"
   }
-}
+}

application/src/components/dashboard/DashboardContent.tsx

@@ -7,6 +7,7 @@ import { StatusCards } from "./StatusCards";
 import { ServiceFilters } from "./ServiceFilters";
 import { ServicesTable } from "./ServicesTable";
 import { AddServiceDialog } from "@/components/services/AddServiceDialog";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface DashboardContentProps {
   services: Service[];
@@ -15,6 +16,7 @@ interface DashboardContentProps {
 }
 
 export const DashboardContent = ({ services, isLoading, error }: DashboardContentProps) => {
+  const { t } = useLanguage();
   const [filter, setFilter] = useState<string>("all");
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [isAddDialogOpen, setIsAddDialogOpen] = useState<boolean>(false);
@@ -31,7 +33,7 @@ export const DashboardContent = ({ services, isLoading, error }: DashboardConten
     return (
       <div className="flex flex-col items-center justify-center h-full gap-4 text-foreground">
         <p>Error loading service data.</p>
-        <Button onClick={() => window.location.reload()}>Retry</Button>
+        <Button onClick={() => window.location.reload()}>{t('retry')}</Button>
       </div>
     );
   }
@@ -40,12 +42,12 @@ export const DashboardContent = ({ services, isLoading, error }: DashboardConten
     <main className="flex-1 flex flex-col overflow-auto bg-background p-6 pb-0">
       <div className="flex flex-col flex-1">
         <div className="flex justify-between items-center mb-6">
-          <h2 className="text-2xl font-bold text-foreground">Overview</h2>
+          <h2 className="text-2xl font-bold text-foreground">{t('overview')}</h2>
           <Button 
             className="text-primary-foreground"
             onClick={() => setIsAddDialogOpen(true)}
           >
-            <Plus className="w-4 h-4 mr-2" /> New Service
+            <Plus className="w-4 h-4 mr-2" /> {t('newService')}
           </Button>
         </div>
         

application/src/components/dashboard/Header.tsx

@@ -1,78 +1,59 @@
-
 import { Button } from "@/components/ui/button";
 import { AuthUser } from "@/services/authService";
 import { useTheme } from "@/contexts/ThemeContext";
-import { Moon, PanelLeft, PanelLeftClose, Sun, Globe, FileText, Github, Twitter, MessageSquare, Bell, User, Settings, LogOut, Grid3x3 } from "lucide-react";
+import { 
+  Moon, PanelLeft, PanelLeftClose, Sun, Globe, FileText, 
+  Github, Twitter, MessageSquare, Bell, User, Settings, 
+  LogOut, Menu, X 
+} from "lucide-react";
 import { useLanguage } from "@/contexts/LanguageContext";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
+import { 
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, 
+  DropdownMenuTrigger, DropdownMenuSeparator 
+} from "@/components/ui/dropdown-menu";
 import { useEffect, useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useNavigate } from "react-router-dom";
 import { useSystemSettings } from "@/hooks/useSystemSettings";
-import QuickActionsDialog from "./QuickActionsDialog";
+import { useSidebar } from "@/contexts/SidebarContext";
+import { cn } from "@/lib/utils";
 
 interface HeaderProps {
   currentUser: AuthUser | null;
   onLogout: () => void;
-  sidebarCollapsed: boolean;
-  toggleSidebar: () => void;
 }
 
 export const Header = ({
   currentUser,
   onLogout,
-  sidebarCollapsed,
-  toggleSidebar
 }: HeaderProps) => {
   const { theme, toggleTheme } = useTheme();
   const { language, setLanguage, t } = useLanguage();
+  const { sidebarCollapsed, toggleSidebar, isMobileOpen, toggleMobileMenu } = useSidebar();
   const [greeting, setGreeting] = useState<string>("");
   const { systemName } = useSystemSettings();
   const navigate = useNavigate();
-  const [quickActionsOpen, setQuickActionsOpen] = useState(false);
 
-  // Set greeting based on time of day
   useEffect(() => {
     const updateGreeting = () => {
       const hour = new Date().getHours();
-      if (hour >= 5 && hour < 12) {
+      if (hour >= 5 && hour < 12) setGreeting(t("goodMorning"));
-        setGreeting(t("goodMorning"));
+      else if (hour >= 12 && hour < 18) setGreeting(t("goodAfternoon"));
-      } else if (hour >= 12 && hour < 18) {
+      else setGreeting(t("goodEvening"));
-        setGreeting(t("goodAfternoon"));
-      } else {
-        setGreeting(t("goodEvening"));
-      }
     };
     updateGreeting();
-    // Update greeting if language changes
-
-    // You could add a timer to update the greeting throughout the day
-    // but that's typically unnecessary since most sessions aren't active across time periods
   }, [language, t]);
 
-  // Log avatar data for debugging
+  const avatarUrl = currentUser?.avatar || '';
-  useEffect(() => {
-    if (currentUser) {
-    //  console.log("Avatar URL in Header:", currentUser.avatar);
-    }
-  }, [currentUser]);
 
-  // Prepare avatar URL - ensure it displays correctly if it's a local profile image
+  const openExternalLink = (url: string) => {
-  let avatarUrl = '';
+    window.open(url, '_blank');
-  if (currentUser?.avatar) {
+  };
-    // If it's a relative path from the public folder, make sure it's resolved properly
-    if (currentUser.avatar.startsWith('/upload/profile/')) {
-      avatarUrl = currentUser.avatar;
-    } else {
-      avatarUrl = currentUser.avatar;
-    }
-   // console.log("Final avatar URL:", avatarUrl);
-  }
 
   return (
-    <header className="relative bg-background border-b border-border px-6 flex justify-between items-center py-[12px] overflow-hidden">
+    <header className="relative bg-background border-b border-border px-4 lg:px-6 flex justify-between items-center h-16 shrink-0 z-30 overflow-hidden">
-      {/* Grid Pattern Overlay - Similar to StatusCards */}
+      {/* Grid Pattern Overlay */}
-      <div className="absolute inset-0 z-0">
+      <div className="absolute inset-0 z-0 pointer-events-none opacity-20">
         <div 
           className="w-full h-full"
           style={{ 
@@ -85,29 +66,74 @@ export const Header = ({
         </div>
       </div>
       
-      {/* Header Content */}
+      <div className="flex items-center gap-2 lg:gap-4 z-10">
-      <div className="flex items-center gap-4 z-10">
+        {/* Mobile Toggle */}
-        <Button variant="ghost" size="icon" onClick={toggleSidebar} className="mr-2">
+        <Button variant="ghost" size="icon" onClick={toggleMobileMenu} className="lg:hidden h-9 w-9">
+          {isMobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+        </Button>
+
+        {/* Desktop Toggle */}
+        <Button variant="ghost" size="icon" onClick={toggleSidebar} className="hidden lg:flex h-9 w-9">
           {sidebarCollapsed ? <PanelLeft className="h-5 w-5" /> : <PanelLeftClose className="h-5 w-5" />}
         </Button>
         
-        {/* Quick Actions Button */}
+        <div className="flex items-center">
-        <Button 
+          <h1 className="text-sm lg:text-lg font-medium truncate max-w-[150px] lg:max-w-none">
-          variant="ghost" 
+            {greeting}, {currentUser?.name || currentUser?.email?.split('@')[0] || 'User'} 👋 ✨
-          size="icon" 
+          </h1>
-          onClick={() => setQuickActionsOpen(true)} 
-          className="mr-2"
-        >
-          <Grid3x3 className="h-5 w-5 text-green-500" />
-        </Button>
-        
-        <div className="flex items-center space-x-2">
-          <h1 className="text-lg font-medium">{greeting}, {currentUser?.name || currentUser?.email?.split('@')[0] || 'User'} 👋 ✨</h1>
         </div>
       </div>
       
-      <div className="flex items-center space-x-4 z-10">
+      <div className="flex items-center space-x-1 lg:space-x-3 z-10">
-        <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border" onClick={toggleTheme}>
+        {/* External Links - Hidden on small screens */}
+        <div className="hidden md:flex items-center space-x-1 mr-2">
+          <Button 
+            variant="outline" 
+            size="icon" 
+            className="rounded-full w-8 h-8 border-border"
+            onClick={() => openExternalLink('https://docs.checkcle.io')}
+            title={t("documentation")}
+          >
+            <FileText className="h-4 w-4" />
+          </Button>
+          <Button 
+            variant="outline" 
+            size="icon" 
+            className="rounded-full w-8 h-8 border-border"
+            onClick={() => openExternalLink('https://github.com/operacle/checkcle')}
+            title="GitHub"
+          >
+            <Github className="h-4 w-4" />
+          </Button>
+          <Button 
+            variant="outline" 
+            size="icon" 
+            className="rounded-full w-8 h-8 border-border"
+            onClick={() => openExternalLink('https://x.com/checkcle_oss')}
+            title="X (Twitter)"
+          >
+            <Twitter className="h-4 w-4" />
+          </Button>
+          <Button 
+            variant="outline" 
+            size="icon" 
+            className="rounded-full w-8 h-8 border-border"
+            onClick={() => openExternalLink('https://discord.gg/xs9gbubGwX')}
+            title="Discord"
+          >
+            <MessageSquare className="h-4 w-4" />
+          </Button>
+          <Button 
+            variant="outline" 
+            size="icon" 
+            className="rounded-full w-8 h-8 border-border"
+            title={t("notifications")}
+          >
+            <Bell className="w-4 h-4" />
+          </Button>
+        </div>
+
+        <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border hidden sm:flex" onClick={toggleTheme}>
           <span className="sr-only">Toggle theme</span>
           {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
         </Button>
@@ -119,7 +145,7 @@ export const Header = ({
               <Globe className="w-4 h-4" />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
+          <DropdownMenuContent align="end" className="w-40">
             <DropdownMenuItem onClick={() => setLanguage("en")} className={language === "en" ? "bg-accent" : ""}>
               {t("english")}
             </DropdownMenuItem>
@@ -127,82 +153,35 @@ export const Header = ({
               {t("khmer")}
             </DropdownMenuItem>
             <DropdownMenuItem onClick={() => setLanguage("de")} className={language === "de" ? "bg-accent" : ""}>
-              {t("Deutsch")}
+              {t("german")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setLanguage("ko")} className={language === "ko" ? "bg-accent" : ""}>
+              {t("korean")}
             </DropdownMenuItem>
             <DropdownMenuItem onClick={() => setLanguage("ja")} className={language === "ja" ? "bg-accent" : ""}>
               {t("japanese")}
             </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setLanguage("zhcn")} className={language === "zhcn" ? "bg-accent" : ""}>
+              {t("simplifiedChinese")}
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
         
-        {/* Documentation */}
+        <div className="h-8 w-px bg-border mx-1 hidden sm:block" />
-        <Button 
+
-          variant="outline" 
-          size="icon" 
-          className="rounded-full w-8 h-8 border-border"
-          onClick={() => window.open("https://docs.checkcle.io", "_blank")}
-        >
-          <span className="sr-only">{t("documentation")}</span>
-          <FileText className="w-4 h-4" />
-        </Button>
-        
-        {/* GitHub */}
-        <Button 
-          variant="outline" 
-          size="icon" 
-          className="rounded-full w-8 h-8 border-border"
-          onClick={() => window.open("https://github.com/operacle/checkcle", "_blank")}
-        >
-          <span className="sr-only">GitHub</span>
-          <Github className="w-4 h-4" />
-        </Button>
-        
-        {/* X (Twitter) */}
-        <Button 
-          variant="outline" 
-          size="icon" 
-          className="rounded-full w-8 h-8 border-border"
-          onClick={() => window.open("https://x.com/tlengoss", "_blank")}
-        >
-          <span className="sr-only">X (Twitter)</span>
-          <Twitter className="w-4 h-4" />
-        </Button>
-        
-        {/* Discord */}
-        <Button 
-          variant="outline" 
-          size="icon" 
-          className="rounded-full w-8 h-8 border-border"
-          onClick={() => window.open("https://discord.gg/xs9gbubGwX", "_blank")}
-        >
-          <span className="sr-only">Discord</span>
-          <MessageSquare className="w-4 h-4" />
-        </Button>
-        
-        {/* Notifications */}
-        <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border">
-          <span className="sr-only">{t("notifications")}</span>
-          <Bell className="w-4 h-4" />
-        </Button>
-        
-        {/* User Profile Dropdown */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Avatar className="h-8 w-8 cursor-pointer ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground">
+            <Avatar className="h-8 w-8 cursor-pointer border hover:ring-2 hover:ring-primary/20 transition-all">
-              {avatarUrl ? <AvatarImage src={avatarUrl} alt={currentUser?.name || currentUser?.email?.split('@')[0] || 'User'} /> : <AvatarFallback className="bg-primary/20 text-primary">
+              {avatarUrl ? <AvatarImage src={avatarUrl} alt="User" /> : <AvatarFallback className="bg-primary/20 text-primary">{currentUser?.name?.[0] || 'U'}</AvatarFallback>}
-                  {currentUser?.name?.[0] || currentUser?.email?.[0] || 'U'}
-                </AvatarFallback>}
             </Avatar>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-56">
             <div className="flex items-center gap-3 p-2">
               <Avatar className="h-10 w-10">
-                {avatarUrl ? <AvatarImage src={avatarUrl} alt={currentUser?.name || currentUser?.email?.split('@')[0] || 'User'} /> : <AvatarFallback className="bg-primary/20 text-primary">
+                {avatarUrl ? <AvatarImage src={avatarUrl} alt="User" /> : <AvatarFallback className="bg-primary/20 text-primary">{currentUser?.name?.[0] || 'U'}</AvatarFallback>}
-                    {currentUser?.name?.[0] || currentUser?.email?.[0] || 'U'}
-                  </AvatarFallback>}
               </Avatar>
-              <div className="flex flex-col space-y-1">
+              <div className="flex flex-col space-y-0.5">
-                <span className="font-medium">{currentUser?.name || 'User'}</span>
+                <span className="text-sm font-medium truncate">{currentUser?.name || 'User'}</span>
                 <span className="text-xs text-muted-foreground truncate">{currentUser?.email}</span>
               </div>
             </div>
@@ -223,9 +202,6 @@ export const Header = ({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      
-      {/* Quick Actions Dialog */}
-      <QuickActionsDialog isOpen={quickActionsOpen} setIsOpen={setQuickActionsOpen} />
     </header>
   );
 };

application/src/components/dashboard/QuickActionsDialog.tsx

@@ -1,145 +0,0 @@
-
-import React from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogClose
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { X } from "lucide-react";
-import { useLanguage } from "@/contexts/LanguageContext";
-
-interface QuickActionsDialogProps {
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-}
-
-export const QuickActionsDialog: React.FC<QuickActionsDialogProps> = ({ isOpen, setIsOpen }) => {
-  const { t } = useLanguage();
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogContent className="sm:max-w-[800px] bg-background max-h-[90vh] overflow-y-auto">
-        <DialogClose className="absolute right-4 top-4">
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogClose>
-        <DialogHeader>
-          <DialogTitle className="text-xl font-bold">{t('quickActions')}</DialogTitle>
-          <DialogDescription>
-            {t('quickActionsDescription')}
-          </DialogDescription>
-        </DialogHeader>
-        
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
-          {/* Website Monitoring Card */}
-          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
-            <h3 className="font-semibold text-lg mb-2">{t('monitorWebsite')}</h3>
-            <p className="text-sm text-muted-foreground mb-4">
-              {t('monitorWebsiteDesc')}
-            </p>
-            <div className="space-y-2">
-              <p className="text-sm font-medium">{t('quickTips')}:</p>
-              <ul className="list-disc pl-5 text-sm space-y-1">
-                <li>{t('monitorMultipleEndpoints')}</li>
-                <li>{t('trackResponseTimes')}</li>
-                <li>{t('setCustomAlerts')}</li>
-              </ul>
-            </div>
-          </div>
-          
-          {/* Server Monitoring Card */}
-          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
-            <h3 className="font-semibold text-lg mb-2">{t('monitorServer')}</h3>
-            <p className="text-sm text-muted-foreground mb-4">
-              {t('monitorServerDesc')}
-            </p>
-            <div className="space-y-2">
-              <p className="text-sm font-medium">{t('quickTips')}:</p>
-              <ul className="list-disc pl-5 text-sm space-y-1">
-                <li>{t('monitorCPURam')}</li>
-                <li>{t('trackNetworkMetrics')}</li>
-                <li>{t('viewProcesses')}</li>
-              </ul>
-            </div>
-          </div>
-          
-          {/* SSL Certificate Card */}
-          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
-            <h3 className="font-semibold text-lg mb-2">{t('sslCertificate')}</h3>
-            <p className="text-sm text-muted-foreground mb-4">
-              {t('sslCertificateDesc')}
-            </p>
-            <div className="space-y-2">
-              <p className="text-sm font-medium">{t('quickTips')}:</p>
-              <ul className="list-disc pl-5 text-sm space-y-1">
-                <li>{t('trackSSLExpiration')}</li>
-                <li>{t('getEarlyRenewal')}</li>
-                <li>{t('monitorMultipleDomains')}</li>
-              </ul>
-            </div>
-          </div>
-          
-          {/* Incidents Management Card */}
-          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
-            <h3 className="font-semibold text-lg mb-2">{t('incidentsManagement')}</h3>
-            <p className="text-sm text-muted-foreground mb-4">
-              {t('incidentsManagementDesc')}
-            </p>
-            <div className="space-y-2">
-              <p className="text-sm font-medium">{t('quickTips')}:</p>
-              <ul className="list-disc pl-5 text-sm space-y-1">
-                <li>{t('createTrackIncidents')}</li>
-                <li>{t('assignIncidents')}</li>
-                <li>{t('monitorResolution')}</li>
-              </ul>
-            </div>
-          </div>
-          
-          {/* Operational Status Card */}
-          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
-            <h3 className="font-semibold text-lg mb-2">{t('operationalStatus')}</h3>
-            <p className="text-sm text-muted-foreground mb-4">
-              {t('operationalStatusDesc')}
-            </p>
-            <div className="space-y-2">
-              <p className="text-sm font-medium">{t('quickTips')}:</p>
-              <ul className="list-disc pl-5 text-sm space-y-1">
-                <li>{t('createCustomStatus')}</li>
-                <li>{t('displayRealTime')}</li>
-                <li>{t('shareIncidentUpdates')}</li>
-              </ul>
-            </div>
-          </div>
-          
-          {/* Reports & Analytics Card */}
-          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
-            <h3 className="font-semibold text-lg mb-2">{t('reportsAnalytics')}</h3>
-            <p className="text-sm text-muted-foreground mb-4">
-              {t('reportsAnalyticsDesc')}
-            </p>
-            <div className="space-y-2">
-              <p className="text-sm font-medium">{t('quickTips')}:</p>
-              <ul className="list-disc pl-5 text-sm space-y-1">
-                <li>{t('generateUptimeReports')}</li>
-                <li>{t('analyzePerformance')}</li>
-                <li>{t('exportMonitoringData')}</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-        
-        <div className="flex justify-end mt-6">
-          <Button variant="outline" onClick={() => setIsOpen(false)}>
-            {t('close')}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default QuickActionsDialog;

application/src/components/dashboard/ServiceFilters.tsx

@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
 import { Plus } from "lucide-react";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface ServiceFiltersProps {
   filter: string;
@@ -19,10 +20,11 @@ export const ServiceFilters = ({
   setSearchTerm,
   servicesCount 
 }: ServiceFiltersProps) => {
+  const { t } = useLanguage();
   return (
     <div className="mb-6 flex justify-between items-center">
       <div className="flex items-center">
-        <h3 className="text-xl font-semibold mr-2 text-foreground">Currently Monitoring</h3>
+        <h3 className="text-xl font-semibold mr-2 text-foreground">{t('currentlyMonitoring')}</h3>
         <span className="bg-secondary text-secondary-foreground px-2 py-0.5 rounded text-sm">
           {servicesCount}
         </span>
@@ -30,10 +32,10 @@ export const ServiceFilters = ({
       <div className="flex space-x-4">
         <Select value={filter} onValueChange={setFilter}>
           <SelectTrigger className="w-40 bg-card border-border">
-            <SelectValue placeholder="All Types" />
+            <SelectValue placeholder={t('allTypes')} />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="all">All Types</SelectItem>
+            <SelectItem value="all">{t('allTypes')}</SelectItem>
             <SelectItem value="HTTP">HTTP</SelectItem>
             <SelectItem value="PING">PING</SelectItem>
             <SelectItem value="TCP">TCP</SelectItem>
@@ -43,7 +45,7 @@ export const ServiceFilters = ({
         <div className="relative">
           <Input 
             className="w-72 bg-card border-border" 
-            placeholder="Search" 
+            placeholder={t('search')}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />

application/src/components/dashboard/Sidebar.tsx

@@ -1,28 +1,44 @@
-
 import React from "react";
 import { useTheme } from "@/contexts/ThemeContext";
 import { SidebarHeader } from "./sidebar/SidebarHeader";
 import { MainNavigation } from "./sidebar/MainNavigation";
 import { SettingsPanel } from "./sidebar/SettingsPanel";
+import { useSidebar } from "@/contexts/SidebarContext";
+import { cn } from "@/lib/utils";
 
-interface SidebarProps {
+export const Sidebar = () => {
-  collapsed: boolean;
-}
-
-export const Sidebar = ({ collapsed }: SidebarProps) => {
   const { theme } = useTheme();
+  const { sidebarCollapsed, isMobileOpen, toggleMobileMenu } = useSidebar();
   
   return (
-    <div 
+    <>
-      className={`
+      {/* Mobile Overlay */}
-        ${theme === 'dark' ? 'bg-[#121212] border-[#1e1e1e]' : 'bg-sidebar border-sidebar-border'} 
+      {isMobileOpen && (
-        border-r flex flex-col h-full
+        <div 
-        ${collapsed ? 'w-16' : 'w-64'}
+          className="fixed inset-0 bg-black/60 z-40 lg:hidden backdrop-blur-sm transition-opacity animate-in fade-in"
-      `}
+          onClick={toggleMobileMenu}
-    >
+        />
-      <SidebarHeader collapsed={collapsed} />
+      )}
-      <MainNavigation collapsed={collapsed} />
+
-      <SettingsPanel collapsed={collapsed} />
+      {/* Sidebar Container */}
-    </div>
+      <aside 
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 lg:static lg:block transition-all duration-300 ease-in-out border-r flex flex-col h-full",
+          theme === 'dark' ? 'bg-[#121212] border-[#1e1e1e]' : 'bg-sidebar border-sidebar-border',
+          // Mobile state
+          isMobileOpen ? "translate-x-0 w-64" : "-translate-x-full lg:translate-x-0",
+          // Desktop state (collapsed/expanded)
+          !isMobileOpen && sidebarCollapsed ? "lg:w-16" : "lg:w-64"
+        )}
+      >
+        <SidebarHeader collapsed={!isMobileOpen && sidebarCollapsed} />
+        
+        <div className="flex-1 overflow-y-auto overflow-x-hidden custom-scrollbar">
+          <MainNavigation collapsed={!isMobileOpen && sidebarCollapsed} />
+        </div>
+
+        <SettingsPanel collapsed={!isMobileOpen && sidebarCollapsed} />
+      </aside>
+    </>
   );
 };

application/src/components/dashboard/StatusCards.tsx

@@ -3,12 +3,15 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ArrowUp, ArrowDown, Pause, AlertTriangle } from "lucide-react";
 import { Service } from "@/services/serviceService";
 import { useTheme } from "@/contexts/ThemeContext";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface StatusCardsProps {
   services: Service[];
 }
 
 export const StatusCards = ({ services }: StatusCardsProps) => {
+	const { t } = useLanguage();
+
   // Count services by status
   const upServices = services.filter(s => s.status === "up").length;
   const downServices = services.filter(s => s.status === "down").length;
@@ -42,7 +45,7 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
           ></div>
         </div>
         <CardHeader className="pb-2 relative z-10">
-          <CardTitle className="text-sm font-medium text-white">UP SERVICES</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">{t("upServices")}</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{upServices}</span>
@@ -74,7 +77,7 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
           ></div>
         </div>
         <CardHeader className="pb-2 relative z-10">
-          <CardTitle className="text-sm font-medium text-white">DOWN SERVICES</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">{t("downServices")}</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{downServices}</span>
@@ -106,7 +109,7 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
           ></div>
         </div>
         <CardHeader className="pb-2 relative z-10">
-          <CardTitle className="text-sm font-medium text-white">PAUSED SERVICES</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">{t("pausedServices")}</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{pausedServices}</span>
@@ -138,7 +141,7 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
           ></div>
         </div>
         <CardHeader className="pb-2 relative z-10">
-          <CardTitle className="text-sm font-medium text-white">WARNING SERVICES</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">{t("warningServices")}</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{warningServices}</span>

application/src/components/dashboard/sidebar/MenuItem.tsx

@@ -1,9 +1,9 @@
-
 import React from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useTheme } from "@/contexts/ThemeContext";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface MenuItemProps {
   id: string;
@@ -16,7 +16,6 @@ interface MenuItemProps {
 }
 
 export const MenuItem: React.FC<MenuItemProps> = ({
-  id,
   path,
   icon: Icon,
   translationKey,
@@ -29,36 +28,39 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   const location = useLocation();
   const navigate = useNavigate();
 
+  const isActive = path && location.pathname === path;
+
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
-    e.stopPropagation();
-    
     if (hasNavigation && path) {
-      navigate(path, { replace: false });
+      navigate(path);
     }
   };
 
-  const isActive = path && location.pathname === path;
-  const mainIconSize = "h-6 w-6";
-
   return (
     <div 
-      className={`
+      className={cn(
-        ${collapsed ? 'p-3' : 'p-2 pl-3'} 
+        "group relative flex items-center mb-1 rounded-lg cursor-pointer transition-all duration-200",
-        mb-1 rounded-lg 
+        collapsed ? "p-3 justify-center" : "p-2.5 px-4",
-        ${isActive ? (theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent') : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} 
+        isActive 
-        flex items-center 
+          ? (theme === 'dark' ? 'bg-zinc-800 text-white' : 'bg-primary/10 text-primary') 
-        ${collapsed ? 'justify-center' : ''} 
+          : (theme === 'dark' ? 'text-zinc-400 hover:bg-zinc-800/50 hover:text-white' : 'text-zinc-600 hover:bg-zinc-100')
-        cursor-pointer
+      )}
-      `}
       onClick={handleClick}
+      title={collapsed ? t(translationKey) : ""}
     >
-      <Icon className={`${mainIconSize} ${color}`} />
+      <Icon className={cn("h-5 w-5 shrink-0 transition-colors", color, isActive ? "opacity-100" : "opacity-80 group-hover:opacity-100")} />
+      
       {!collapsed && (
-        <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">
+        <span className="ml-3 font-medium tracking-wide text-sm truncate">
           {t(translationKey)}
         </span>
       )}
+
+      {/* Small Indicator for active state */}
+      {isActive && !collapsed && (
+        <div className="absolute left-0 w-1 h-6 bg-primary rounded-r-full" />
+      )}
     </div>
   );
 };

application/src/components/docker/DockerContainersTable.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table, TableBody } from "@/components/ui/table";
 import { DockerContainer } from "@/types/docker.types";
 import { DockerMetricsDialog } from "./DockerMetricsDialog";
+import { useLanguage } from "@/contexts/LanguageContext";
 import { 
   DockerTableSearch, 
   DockerTableHeader, 
@@ -18,6 +19,7 @@ interface DockerContainersTableProps {
 }
 
 export const DockerContainersTable = ({ containers, isLoading, onRefresh }: DockerContainersTableProps) => {
+  const { t } = useLanguage();
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedContainer, setSelectedContainer] = useState<DockerContainer | null>(null);
   const [metricsDialogOpen, setMetricsDialogOpen] = useState(false);
@@ -49,7 +51,7 @@ export const DockerContainersTable = ({ containers, isLoading, onRefresh }: Dock
         <CardHeader className="pb-4 px-0">
           <div className="flex flex-col gap-4">
             <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-              <CardTitle className="text-lg sm:text-xl font-semibold">Docker Containers</CardTitle>
+              <CardTitle className="text-lg sm:text-xl font-semibold">{t('dockerContainers', 'docker')}</CardTitle>
               <DockerTableSearch
                 searchTerm={searchTerm}
                 onSearchChange={setSearchTerm}

application/src/components/docker/DockerMetricsDialog.tsx

@@ -10,6 +10,7 @@ import { DockerContainer, DockerMetrics } from "@/types/docker.types";
 import { dockerService } from "@/services/dockerService";
 import { Loader2, Cpu, HardDrive, Network, MemoryStick } from "lucide-react";
 import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface DockerMetricsDialogProps {
   container: DockerContainer | null;
@@ -20,16 +21,17 @@ interface DockerMetricsDialogProps {
 type TimeRange = '60m' | '1d' | '7d' | '1m' | '3m';
 
 const timeRangeOptions = [
-  { value: '60m' as TimeRange, label: '60 minutes', hours: 1 },
+  { value: '60m' as TimeRange, label: 'minutes60', hours: 1 },
-  { value: '1d' as TimeRange, label: '1 day', hours: 24 },
+  { value: '1d' as TimeRange, label: 'day1', hours: 24 },
-  { value: '7d' as TimeRange, label: '7 days', hours: 24 * 7 },
+  { value: '7d' as TimeRange, label: 'days7', hours: 24 * 7 },
-  { value: '1m' as TimeRange, label: '1 month', hours: 24 * 30 },
+  { value: '1m' as TimeRange, label: 'month1', hours: 24 * 30 },
-  { value: '3m' as TimeRange, label: '3 months', hours: 24 * 90 },
+  { value: '3m' as TimeRange, label: 'months3', hours: 24 * 90 },
 ];
 
 export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMetricsDialogProps) => {
   const [timeRange, setTimeRange] = useState<TimeRange>("1d");
   const { theme } = useTheme();
+  const { t } = useLanguage();
 
   const {
     data: metrics = [],
@@ -232,11 +234,11 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
       <DialogContent className="max-w-7xl max-h-[95vh] overflow-y-auto bg-background text-foreground">
         <DialogHeader>
           <DialogTitle className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2">
               <div className="h-8 w-8 rounded bg-primary/10 flex items-center justify-center">
                 <Cpu className="h-4 w-4 text-primary" />
               </div>
-              Container Metrics: {container.name}
+                {t('containerMetricsTitle', 'docker', { name: container.name })}
             </div>
             <div className="flex items-center gap-2">
               <Select value={timeRange} onValueChange={(value: TimeRange) => setTimeRange(value)}>
@@ -246,7 +248,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                 <SelectContent>
                   {timeRangeOptions.map((option) => (
                     <SelectItem key={option.value} value={option.value}>
-                      {option.label}
+                      {t(option.label, 'docker')}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -254,22 +256,22 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
             </div>
           </DialogTitle>
           <p className="text-sm text-muted-foreground">
-            Docker ID: {container.docker_id} • {container.hostname}
+            {t('dockerId', 'docker')}: {container.docker_id} • {container.hostname}
           </p>
         </DialogHeader>
 
         {isLoading ? (
           <div className="flex items-center justify-center h-96">
             <Loader2 className="h-8 w-8 animate-spin" />
-            <span className="ml-2">Loading metrics...</span>
+            <span className="ml-2">{t('loadingMetrics', 'docker')}</span>
           </div>
         ) : error ? (
           <div className="flex items-center justify-center h-96 text-muted-foreground">
-            <p>Error loading metrics: {error.message}</p>
+            <p>{t('errorLoadingMetrics', 'docker')}: {String((error as any)?.message ?? '')}</p>
           </div>
         ) : chartData.length === 0 ? (
           <div className="flex items-center justify-center h-96 text-muted-foreground">
-            <p>No metrics data available for this container</p>
+            <p>{t('noMetricsAvailable', 'docker')}</p>
           </div>
         ) : (
           <>
@@ -277,7 +279,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
             {latestMetric && (
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                 <MetricCard
-                  title="CPU"
+                  title={t('cpu', 'docker')}
                   used={`${latestMetric.cpuUsage}%`}
                   total={`${latestMetric.cpuCores} cores`}
                   free={`${(100 - latestMetric.cpuUsage).toFixed(1)}%`}
@@ -286,7 +288,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                   color={chartConfig.cpuUsage.color}
                 />
                 <MetricCard
-                  title="Memory"
+                  title={t('memoryTitle', 'docker')}
                   used={latestMetric.ramUsed}
                   total={latestMetric.ramTotal}
                   free={latestMetric.ramFree}
@@ -295,7 +297,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                   color={chartConfig.ramUsagePercent.color}
                 />
                 <MetricCard
-                  title="Disk"
+                  title={t('diskTitle', 'docker')}
                   used={latestMetric.diskUsed}
                   total={latestMetric.diskTotal}
                   free={latestMetric.diskFree}
@@ -304,10 +306,10 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                   color={chartConfig.diskUsagePercent.color}
                 />
                 <MetricCard
-                  title="Network"
+                  title={t('network', 'docker')}
                   used={`RX: ${latestMetric.networkRx}`}
                   total={`TX: ${latestMetric.networkTx}`}
-                  free={`Speed: ${latestMetric.networkRxSpeed} KB/s`}
+                  free={`${t('networkSpeedKbs', 'docker').replace('(KB/s)', '')}: ${latestMetric.networkRxSpeed} KB/s`}
                   percentage={0}
                   icon={Network}
                   color={chartConfig.networkRx.color}
@@ -319,19 +321,19 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
               <TabsList className="grid w-full grid-cols-4 bg-muted">
                 <TabsTrigger value="cpu" className="flex items-center gap-2 data-[state=active]:bg-background">
                   <Cpu className="h-4 w-4" />
-                  CPU
+                  {t('cpu', 'docker')}
                 </TabsTrigger>
                 <TabsTrigger value="memory" className="flex items-center gap-2 data-[state=active]:bg-background">
                   <MemoryStick className="h-4 w-4" />
-                  Memory
+                  {t('memoryTitle', 'docker')}
                 </TabsTrigger>
                 <TabsTrigger value="disk" className="flex items-center gap-2 data-[state=active]:bg-background">
                   <HardDrive className="h-4 w-4" />
-                  Disk
+                  {t('diskTitle', 'docker')}
                 </TabsTrigger>
                 <TabsTrigger value="network" className="flex items-center gap-2 data-[state=active]:bg-background">
                   <Network className="h-4 w-4" />
-                  Network
+                  {t('network', 'docker')}
                 </TabsTrigger>
               </TabsList>
 
@@ -339,7 +341,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <Card className="bg-card border-border">
                     <CardHeader>
-                      <CardTitle className="text-foreground">CPU Usage (%)</CardTitle>
+                      <CardTitle className="text-foreground">{t('cpuUsagePct', 'docker')}</CardTitle>
                     </CardHeader>
                     <CardContent>
                       <ChartContainer config={chartConfig} className="h-80">
@@ -365,7 +367,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             stroke={chartConfig.cpuUsage.color}
                             strokeWidth={2}
                             dot={{ r: 3, fill: chartConfig.cpuUsage.color }}
-                            name="CPU Usage (%)"
+                            name={t('cpuUsagePct', 'docker')}
                           />
                         </LineChart>
                       </ChartContainer>
@@ -374,7 +376,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
 
                   <Card className="bg-card border-border">
                     <CardHeader>
-                      <CardTitle className="text-foreground">CPU Usage vs Available</CardTitle>
+                      <CardTitle className="text-foreground">{t('cpuUsageVsAvailable', 'docker')}</CardTitle>
                     </CardHeader>
                     <CardContent>
                       <ChartContainer config={chartConfig} className="h-80">
@@ -401,7 +403,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             stroke={theme === 'dark' ? "#6b7280" : "#9ca3af"}
                             fill={theme === 'dark' ? "#6b7280" : "#9ca3af"}
                             fillOpacity={0.3}
-                            name="CPU Available (%)"
+                            name={t('cpuAvailablePct', 'docker')}
                           />
                           <Area 
                             type="monotone" 
@@ -410,7 +412,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             stroke={chartConfig.cpuUsage.color}
                             fill={chartConfig.cpuUsage.color}
                             fillOpacity={0.6}
-                            name="CPU Usage (%)"
+                            name={t('cpuUsagePct', 'docker')}
                           />
                         </AreaChart>
                       </ChartContainer>
@@ -423,7 +425,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <Card className="bg-card border-border">
                     <CardHeader>
-                      <CardTitle className="text-foreground">Memory Usage (%)</CardTitle>
+                      <CardTitle className="text-foreground">{t('ramUsagePct', 'docker')}</CardTitle>
                     </CardHeader>
                     <CardContent>
                       <ChartContainer config={chartConfig} className="h-80">
@@ -459,7 +461,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
 
                   <Card className="bg-card border-border">
                     <CardHeader>
-                      <CardTitle className="text-foreground">Memory Usage (Bytes)</CardTitle>
+                      <CardTitle className="text-foreground">{t('memoryUsageBytes', 'docker')}</CardTitle>
                     </CardHeader>
                     <CardContent>
                       <ChartContainer config={chartConfig} className="h-80">
@@ -479,8 +481,8 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             content={<ChartTooltipContent className="bg-popover border-border" />}
                             cursor={{ stroke: getGridColor() }}
                             formatter={(value, name) => [
-                              name === 'Used Memory' ? formatBytes(Number(value)) : 
+                              name === t('usedMemory', 'docker') ? formatBytes(Number(value)) : 
-                              name === 'Total Memory' ? formatBytes(Number(value)) : value,
+                              name === t('totalMemory', 'docker') ? formatBytes(Number(value)) : value,
                               name
                             ]}
                           />
@@ -491,7 +493,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             stroke={theme === 'dark' ? "#6b7280" : "#9ca3af"}
                             fill={theme === 'dark' ? "#6b7280" : "#9ca3af"}
                             fillOpacity={0.3}
-                            name="Total Memory"
+                            name={t('totalMemory', 'docker')}
                           />
                           <Area 
                             type="monotone" 
@@ -500,7 +502,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             stroke={chartConfig.ramUsagePercent.color}
                             fill={chartConfig.ramUsagePercent.color}
                             fillOpacity={0.6}
-                            name="Used Memory"
+                            name={t('usedMemory', 'docker')}
                           />
                         </AreaChart>
                       </ChartContainer>
@@ -513,7 +515,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <Card className="bg-card border-border">
                     <CardHeader>
-                      <CardTitle className="text-foreground">Disk Usage (%)</CardTitle>
+                      <CardTitle className="text-foreground">{t('diskUsagePct', 'docker')}</CardTitle>
                     </CardHeader>
                     <CardContent>
                       <ChartContainer config={chartConfig} className="h-80">
@@ -540,7 +542,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             stroke={chartConfig.diskUsagePercent.color}
                             fill={chartConfig.diskUsagePercent.color}
                             fillOpacity={0.6}
-                            name="Disk Usage (%)"
+                            name={t('diskUsagePct', 'docker')}
                           />
                         </AreaChart>
                       </ChartContainer>
@@ -549,7 +551,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
 
                   <Card className="bg-card border-border">
                     <CardHeader>
-                      <CardTitle className="text-foreground">Disk Usage (Bytes)</CardTitle>
+                      <CardTitle className="text-foreground">{t('diskUsageBytes', 'docker')}</CardTitle>
                     </CardHeader>
                     <CardContent>
                       <ChartContainer config={chartConfig} className="h-80">
@@ -569,8 +571,8 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             content={<ChartTooltipContent className="bg-popover border-border" />}
                             cursor={{ stroke: getGridColor() }}
                             formatter={(value, name) => [
-                              name === 'Used Disk' ? formatBytes(Number(value)) : 
+                              name === t('usedDisk', 'docker') ? formatBytes(Number(value)) : 
-                              name === 'Total Disk' ? formatBytes(Number(value)) : value,
+                              name === t('totalDisk', 'docker') ? formatBytes(Number(value)) : value,
                               name
                             ]}
                           />
@@ -581,7 +583,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             stroke={theme === 'dark' ? "#6b7280" : "#9ca3af"}
                             fill={theme === 'dark' ? "#6b7280" : "#9ca3af"}
                             fillOpacity={0.3}
-                            name="Total Disk"
+                            name={t('totalDisk', 'docker')}
                           />
                           <Area 
                             type="monotone" 
@@ -590,7 +592,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             stroke={chartConfig.diskUsagePercent.color}
                             fill={chartConfig.diskUsagePercent.color}
                             fillOpacity={0.6}
-                            name="Used Disk"
+                            name={t('usedDisk', 'docker')}
                           />
                         </AreaChart>
                       </ChartContainer>
@@ -603,7 +605,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <Card className="bg-card border-border">
                     <CardHeader>
-                      <CardTitle className="text-foreground">Network Traffic</CardTitle>
+                      <CardTitle className="text-foreground">{t('networkTraffic', 'docker')}</CardTitle>
                     </CardHeader>
                     <CardContent>
                       <ChartContainer config={chartConfig} className="h-64">
@@ -627,7 +629,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             dataKey="networkRxBytes" 
                             stroke={chartConfig.networkRx.color}
                             strokeWidth={2}
-                            name="RX Bytes"
+                            name={t('rxBytes', 'docker')}
                             dot={{ r: 2 }}
                           />
                           <Line 
@@ -635,7 +637,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             dataKey="networkTxBytes" 
                             stroke={chartConfig.networkTx.color}
                             strokeWidth={2}
-                            name="TX Bytes"
+                            name={t('txBytes', 'docker')}
                             dot={{ r: 2 }}
                           />
                         </LineChart>
@@ -645,7 +647,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
 
                   <Card className="bg-card border-border">
                     <CardHeader>
-                      <CardTitle className="text-foreground">Network Speed (KB/s)</CardTitle>
+                      <CardTitle className="text-foreground">{t('networkSpeedKbs', 'docker')}</CardTitle>
                     </CardHeader>
                     <CardContent>
                       <ChartContainer config={chartConfig} className="h-64">
@@ -669,7 +671,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             dataKey="networkRxSpeed" 
                             stroke={chartConfig.networkRx.color}
                             strokeWidth={2}
-                            name="RX Speed (KB/s)"
+                            name={t('rxSpeedKbs', 'docker')}
                             dot={{ r: 2 }}
                           />
                           <Line 
@@ -677,7 +679,7 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet
                             dataKey="networkTxSpeed" 
                             stroke={chartConfig.networkTx.color}
                             strokeWidth={2}
-                            name="TX Speed (KB/s)"
+                            name={t('txSpeedKbs', 'docker')}
                             dot={{ r: 2 }}
                           />
                         </LineChart>

application/src/components/docker/DockerStatsCards.tsx

@@ -4,6 +4,7 @@ import { Badge } from "@/components/ui/badge";
 import { Container, Play, Square, AlertTriangle } from "lucide-react";
 import { DockerStats } from "@/types/docker.types";
 import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface DockerStatsCardsProps {
   stats: DockerStats;
@@ -11,10 +12,11 @@ interface DockerStatsCardsProps {
 
 export const DockerStatsCards = ({ stats }: DockerStatsCardsProps) => {
   const { theme } = useTheme();
+  const { t } = useLanguage();
 
   const cards = [
     {
-      title: "Total Containers",
+      title: t('totalContainers', 'docker'),
       value: stats.total,
       icon: Container,
       color: "text-blue-600",
@@ -23,7 +25,7 @@ export const DockerStatsCards = ({ stats }: DockerStatsCardsProps) => {
         : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #3b82f6 100%)"
     },
     {
-      title: "Running",
+      title: t('running', 'docker'),
       value: stats.running,
       icon: Play,
       color: "text-green-600",
@@ -32,7 +34,7 @@ export const DockerStatsCards = ({ stats }: DockerStatsCardsProps) => {
         : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #10b981 100%)"
     },
     {
-      title: "Stopped",
+      title: t('stopped', 'docker'),
       value: stats.stopped,
       icon: Square,
       color: "text-gray-600",
@@ -41,7 +43,7 @@ export const DockerStatsCards = ({ stats }: DockerStatsCardsProps) => {
         : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #6b7280 100%)"
     },
     {
-      title: "Warning",
+      title: t('warning', 'docker'),
       value: stats.warning,
       icon: AlertTriangle,
       color: "text-amber-600",
@@ -90,7 +92,7 @@ export const DockerStatsCards = ({ stats }: DockerStatsCardsProps) => {
                   variant="outline" 
                   className="text-xs font-mono font-bold px-2 py-1 rounded-md bg-white/20 backdrop-blur-sm text-white border border-white/30"
                 >
-                  Containers
+                  {t('containersLabel', 'docker')}
                 </Badge>
               </div>
             </CardContent>

application/src/components/docker/DockerStatusBadge.tsx

@@ -1,36 +1,38 @@
 
 import { Badge } from "@/components/ui/badge";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface DockerStatusBadgeProps {
   status: 'running' | 'stopped' | 'warning';
 }
 
 export const DockerStatusBadge = ({ status }: DockerStatusBadgeProps) => {
+  const { t } = useLanguage();
   const getStatusConfig = (status: string) => {
     switch (status) {
       case 'running':
         return {
           variant: 'default' as const,
           className: 'bg-emerald-100 text-emerald-800 border-emerald-200 hover:bg-emerald-200',
-          label: 'Running'
+          label: t('running', 'docker')
         };
       case 'stopped':
         return {
           variant: 'secondary' as const,
           className: 'bg-gray-100 text-gray-800 border-gray-200 hover:bg-gray-200',
-          label: 'Stopped'
+          label: t('stopped', 'docker')
         };
       case 'warning':
         return {
           variant: 'destructive' as const,
           className: 'bg-amber-100 text-amber-800 border-amber-200 hover:bg-amber-200',
-          label: 'Warning'
+          label: t('warning', 'docker')
         };
       default:
         return {
           variant: 'outline' as const,
           className: 'bg-gray-100 text-gray-600 border-gray-200',
-          label: 'Unknown'
+          label: t('unknown', 'docker')
         };
     }
   };

application/src/components/docker/table/DockerEmptyState.tsx

@@ -1,20 +1,22 @@
 
 import { TableCell, TableRow } from "@/components/ui/table";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface DockerEmptyStateProps {
   searchTerm: string;
 }
 
 export const DockerEmptyState = ({ searchTerm }: DockerEmptyStateProps) => {
+  const { t } = useLanguage();
   return (
     <TableRow>
       <TableCell colSpan={8} className="text-center py-12 text-muted-foreground">
         <div className="flex flex-col items-center gap-2">
           <div className="text-lg font-medium">
-            {searchTerm ? "No containers found" : "No containers running"}
+            {searchTerm ? t('noContainersFound', 'docker') : t('noContainersRunning', 'docker')}
           </div>
           <div className="text-sm">
-            {searchTerm ? "Try adjusting your search terms." : "Start some containers to see them here."}
+            {searchTerm ? t('tryAdjustSearch', 'docker') : t('startSomeContainers', 'docker')}
           </div>
         </div>
       </TableCell>

application/src/components/docker/table/DockerRowActions.tsx

@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
 import { MoreHorizontal, Eye, Play, Pause, Square, Trash2, BarChart3, RefreshCw } from "lucide-react";
 import { DockerContainer } from "@/types/docker.types";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface DockerRowActionsProps {
   container: DockerContainer;
@@ -12,11 +13,12 @@ interface DockerRowActionsProps {
 }
 
 export const DockerRowActions = ({ container, containerStatus, onContainerAction, onViewMetrics }: DockerRowActionsProps) => {
+  const { t } = useLanguage();
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="h-8 w-8 p-0 hover:bg-muted">
-          <span className="sr-only">Open menu</span>
+          <span className="sr-only">{t('openMenu', 'docker')}</span>
           <MoreHorizontal className="h-4 w-4" />
         </Button>
       </DropdownMenuTrigger>
@@ -26,14 +28,14 @@ export const DockerRowActions = ({ container, containerStatus, onContainerAction
           className="cursor-pointer hover:bg-muted"
         >
           <BarChart3 className="mr-2 h-4 w-4" />
-          View Metrics
+          {t('viewMetrics', 'docker')}
         </DropdownMenuItem>
         <DropdownMenuItem 
           onClick={() => onContainerAction('view-detail', container.id, container.name)}
           className="cursor-pointer hover:bg-muted"
         >
           <Eye className="mr-2 h-4 w-4" />
-          View Details
+          {t('viewDetails', 'docker')}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

application/src/components/docker/table/DockerTableHeader.tsx

@@ -1,18 +1,20 @@
 
 import { TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 export const DockerTableHeader = () => {
+  const { t } = useLanguage();
   return (
     <TableHeader>
       <TableRow className="border-border bg-muted/30">
-        <TableHead className="min-w-[200px] font-semibold">Container</TableHead>
+        <TableHead className="min-w-[200px] font-semibold">{t('container', 'docker')}</TableHead>
-        <TableHead className="min-w-[100px] font-semibold">Status</TableHead>
+        <TableHead className="min-w-[100px] font-semibold">{t('status', 'docker')}</TableHead>
-        <TableHead className="min-w-[140px] font-semibold">CPU Usage</TableHead>
+        <TableHead className="min-w-[140px] font-semibold">{t('cpuUsage', 'docker')}</TableHead>
-        <TableHead className="min-w-[160px] font-semibold">Memory</TableHead>
+        <TableHead className="min-w-[160px] font-semibold">{t('memory', 'docker')}</TableHead>
-        <TableHead className="min-w-[160px] font-semibold">Disk</TableHead>
+        <TableHead className="min-w-[160px] font-semibold">{t('disk', 'docker')}</TableHead>
-        <TableHead className="min-w-[100px] font-semibold">Uptime</TableHead>
+        <TableHead className="min-w-[100px] font-semibold">{t('uptime', 'docker')}</TableHead>
-        <TableHead className="min-w-[160px] font-semibold">Last Checked</TableHead>
+        <TableHead className="min-w-[160px] font-semibold">{t('lastChecked', 'docker')}</TableHead>
-        <TableHead className="min-w-[80px] text-center font-semibold">Actions</TableHead>
+        <TableHead className="min-w-[80px] text-center font-semibold">{t('actions', 'docker')}</TableHead>
       </TableRow>
     </TableHeader>
   );

application/src/components/docker/table/DockerTableSearch.tsx

@@ -2,6 +2,7 @@
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Search, RefreshCw } from "lucide-react";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface DockerTableSearchProps {
   searchTerm: string;
@@ -11,12 +12,13 @@ interface DockerTableSearchProps {
 }
 
 export const DockerTableSearch = ({ searchTerm, onSearchChange, onRefresh, isLoading }: DockerTableSearchProps) => {
+  const { t } = useLanguage();
   return (
     <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
       <div className="relative flex-1 sm:flex-initial">
         <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
         <Input
-          placeholder="Search containers..."
+          placeholder={t('searchContainersPlaceholder', 'docker')}
           value={searchTerm}
           onChange={(e) => onSearchChange(e.target.value)}
           className="pl-10 sm:w-64 bg-background border-border"
@@ -30,7 +32,7 @@ export const DockerTableSearch = ({ searchTerm, onSearchChange, onRefresh, isLoa
         className="w-full sm:w-auto bg-background border-border hover:bg-muted"
       >
         <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
-        <span className="sm:inline">Refresh</span>
+        <span className="sm:inline">{t('refresh', 'docker')}</span>
       </Button>
     </div>
   );

application/src/components/operational-page/ComponentsSelector.tsx

@@ -1,3 +1,4 @@
+
 import { useState } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -6,10 +7,11 @@ import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
-import { Plus, X, Server, Shield, AlertTriangle } from 'lucide-react';
+import { Plus, X, Server } from 'lucide-react';
 import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
 import { useQuery } from '@tanstack/react-query';
 import { serviceService } from '@/services/serviceService';
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface ComponentsSelectorProps {
   selectedComponents: Partial<StatusPageComponentRecord>[];
@@ -17,13 +19,8 @@ interface ComponentsSelectorProps {
   onComponentDelete?: (componentId: string) => void;
 }
 
-const componentTypes = [
-  { value: 'uptime', label: 'Uptime Service', icon: Server },
-  { value: 'ssl', label: 'SSL Certificate', icon: Shield },
-  { value: 'incident', label: 'Incident Monitoring', icon: AlertTriangle },
-];
-
 export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onComponentDelete }: ComponentsSelectorProps) => {
+  const { t } = useLanguage();
   const [showAddForm, setShowAddForm] = useState(false);
   const [newComponent, setNewComponent] = useState({
     name: '',
@@ -76,16 +73,16 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Server className="h-5 w-5" />
-          Status Page Components
+          {t('statusPageComponents')}
         </CardTitle>
         <CardDescription>
-          Add monitoring components like uptime services, SSL certificates, and incident tracking
+          {t('addMonitoringComponentsDesc')}
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
         {selectedComponents.length > 0 && (
           <div className="space-y-2">
-            <Label>Selected Components</Label>
+            <Label>{t('selectedComponents')}</Label>
             <div className="space-y-2">
               {selectedComponents.map((component, index) => (
                 <div key={component.id || index} className="flex items-center justify-between p-3 border rounded-lg">
@@ -97,12 +94,12 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC
                     <div className="flex gap-2 mt-1">
                       {component.service_id && (
                         <Badge variant="secondary" className="text-xs">
-                          Service: {services.find(s => s.id === component.service_id)?.name || component.service_id}
+                          {t('service')}: {services.find(s => s.id === component.service_id)?.name || component.service_id}
                         </Badge>
                       )}
                       {component.server_id && (
                         <Badge variant="secondary" className="text-xs">
-                          Server: {component.server_id}
+                          {t('server')}: {component.server_id}
                         </Badge>
                       )}
                     </div>
@@ -127,22 +124,22 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC
             className="w-full"
           >
             <Plus className="h-4 w-4 mr-2" />
-            Add Component
+            {t('addComponent')}
           </Button>
         ) : (
           <div className="border rounded-lg p-4 space-y-4">
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <Label htmlFor="component-name">Component Name</Label>
+                <Label htmlFor="component-name">{t('componentName')}</Label>
                 <Input
                   id="component-name"
-                  placeholder="e.g., Main Website"
+                  placeholder={t('componentNamePlaceholder')}
                   value={newComponent.name}
                   onChange={(e) => setNewComponent({ ...newComponent, name: e.target.value })}
                 />
               </div>
               <div>
-                <Label htmlFor="display-order">Display Order</Label>
+                <Label htmlFor="display-order">{t('displayOrder')}</Label>
                 <Input
                   id="display-order"
                   type="number"
@@ -153,10 +150,10 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC
             </div>
 
             <div>
-              <Label htmlFor="component-description">Description (Optional)</Label>
+              <Label htmlFor="component-description">{t('descriptionOptional')}</Label>
               <Textarea
                 id="component-description"
-                placeholder="Brief description of this component"
+                placeholder={t('descriptionPlaceholder')}
                 value={newComponent.description}
                 onChange={(e) => setNewComponent({ ...newComponent, description: e.target.value })}
               />
@@ -164,12 +161,12 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC
 
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <Label htmlFor="service-id">Uptime Service (Optional)</Label>
+                <Label htmlFor="service-id">{t('uptimeServiceOptional')}</Label>
                 <Select onValueChange={(value) => setNewComponent({ ...newComponent, service_id: value })}>
                   <SelectTrigger>
-                    <SelectValue placeholder="Select an uptime service" />
+                    <SelectValue placeholder={t('selectUptimeService')} />
                   </SelectTrigger>
-                  <SelectContent className="z-50 bg-white border shadow-lg">
+                  <SelectContent>
                     {services.map((service) => (
                       <SelectItem key={service.id} value={service.id}>
                         <div className="flex items-center gap-2">
@@ -186,10 +183,10 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC
                 </Select>
               </div>
               <div>
-                <Label htmlFor="server-id">Server ID (Optional)</Label>
+                <Label htmlFor="server-id">{t('serverIdOptional')}</Label>
                 <Input
                   id="server-id"
-                  placeholder="server_456"
+                  placeholder={t('serverIdPlaceholder')}
                   value={newComponent.server_id}
                   onChange={(e) => setNewComponent({ ...newComponent, server_id: e.target.value })}
                 />
@@ -198,45 +195,14 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC
 
             <div className="flex gap-2">
               <Button onClick={addComponent} disabled={!newComponent.name.trim()}>
-                Add Component
+                {t('addComponent')}
               </Button>
               <Button variant="outline" onClick={() => setShowAddForm(false)}>
-                Cancel
+                {t('cancel')}
               </Button>
             </div>
           </div>
         )}
-
-        <div className="mt-4">
-          <Label>Quick Add Templates</Label>
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-2">
-            {componentTypes.map((type) => {
-              const Icon = type.icon;
-              return (
-                <Button
-                  key={type.value}
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    const component: Partial<StatusPageComponentRecord> = {
-                      name: type.label,
-                      description: `Monitor ${type.label.toLowerCase()}`,
-                      service_id: '',
-                      server_id: '',
-                      display_order: selectedComponents.length + 1,
-                      operational_status_id: '',
-                    };
-                    onComponentsChange([...selectedComponents, component]);
-                  }}
-                  className="justify-start"
-                >
-                  <Icon className="h-4 w-4 mr-2" />
-                  {type.label}
-                </Button>
-              );
-            })}
-          </div>
-        </div>
       </CardContent>
     </Card>
   );

application/src/components/operational-page/CreateOperationalPageDialog.tsx

@@ -14,6 +14,7 @@ import { useCreateStatusPageComponent } from '@/hooks/useStatusPageComponents';
 import { ComponentsSelector } from './ComponentsSelector';
 import { Plus } from 'lucide-react';
 import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
+import { useLanguage } from "@/contexts/LanguageContext";
 
 const formSchema = z.object({
   title: z.string().min(1, 'Title is required'),
@@ -31,6 +32,7 @@ const formSchema = z.object({
 type FormData = z.infer<typeof formSchema>;
 
 export const CreateOperationalPageDialog = () => {
+  const { t } = useLanguage();
   const [open, setOpen] = useState(false);
   const [selectedComponents, setSelectedComponents] = useState<Partial<StatusPageComponentRecord>[]>([]);
   const createMutation = useCreateOperationalPage();
@@ -67,13 +69,13 @@ export const CreateOperationalPageDialog = () => {
         page_style: data.page_style || '',
       };
       
-      console.log('Creating operational page with payload:', payload);
+     // console.log('Creating operational page with payload:', payload);
       const createdPage = await createMutation.mutateAsync(payload);
-      console.log('Created page:', createdPage);
+     // console.log('Created page:', createdPage);
       
       // Create components after page is created
       if (selectedComponents.length > 0) {
-        console.log('Creating components for page:', createdPage.id);
+      //  console.log('Creating components for page:', createdPage.id);
         for (const component of selectedComponents) {
           const componentPayload = {
             operational_status_id: createdPage.id,
@@ -84,7 +86,7 @@ export const CreateOperationalPageDialog = () => {
             display_order: component.display_order || 1,
           };
           
-          console.log('Creating component with payload:', componentPayload);
+        //  console.log('Creating component with payload:', componentPayload);
           await createComponentMutation.mutateAsync(componentPayload);
         }
       }
@@ -93,7 +95,7 @@ export const CreateOperationalPageDialog = () => {
       form.reset();
       setSelectedComponents([]);
     } catch (error) {
-      console.error('Error creating operational page:', error);
+     // console.error('Error creating operational page:', error);
     }
   };
 
@@ -102,14 +104,14 @@ export const CreateOperationalPageDialog = () => {
       <DialogTrigger asChild>
         <Button className="gap-2">
           <Plus className="h-4 w-4" />
-          Create Page
+          {t('createPage')}
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>Create Operational Page</DialogTitle>
+          <DialogTitle>{t('createOperationalPage')}</DialogTitle>
           <DialogDescription>
-            Create a new operational status page to monitor your services and components.
+            {t('createOperationalPageDesc')}
           </DialogDescription>
         </DialogHeader>
 
@@ -121,9 +123,9 @@ export const CreateOperationalPageDialog = () => {
                 name="title"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Title</FormLabel>
+                    <FormLabel>{t('title')}</FormLabel>
                     <FormControl>
-                      <Input placeholder="My Service Status" {...field} />
+                      <Input placeholder={t('myServiceStatusPlaceholder')} {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -135,9 +137,9 @@ export const CreateOperationalPageDialog = () => {
                 name="slug"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Slug</FormLabel>
+                    <FormLabel>{t('slug')}</FormLabel>
                     <FormControl>
-                      <Input placeholder="my-service-status" {...field} />
+                      <Input placeholder={t('myServiceStatusSlugPlaceholder')} {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -150,10 +152,10 @@ export const CreateOperationalPageDialog = () => {
               name="description"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Description</FormLabel>
+                  <FormLabel>{t('description')}</FormLabel>
                   <FormControl>
                     <Textarea 
-                      placeholder="A brief description of your operational page" 
+                      placeholder={t('operationalPageDescriptionPlaceholder')} 
                       className="min-h-[80px]"
                       {...field} 
                     />
@@ -169,17 +171,17 @@ export const CreateOperationalPageDialog = () => {
                 name="theme"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Theme</FormLabel>
+                    <FormLabel>{t('theme')}</FormLabel>
                     <Select onValueChange={field.onChange} defaultValue={field.value}>
                       <FormControl>
                         <SelectTrigger>
-                          <SelectValue placeholder="Select theme" />
+                          <SelectValue placeholder={t('selectTheme')} />
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem value="default">Default</SelectItem>
+                        <SelectItem value="default">{t('themeDefault')}</SelectItem>
-                        <SelectItem value="dark">Dark</SelectItem>
+                        <SelectItem value="dark">{t('themeDark')}</SelectItem>
-                        <SelectItem value="light">Light</SelectItem>
+                        <SelectItem value="light">{t('themeLight')}</SelectItem>
                       </SelectContent>
                     </Select>
                     <FormMessage />
@@ -192,18 +194,18 @@ export const CreateOperationalPageDialog = () => {
                 name="status"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Initial Status</FormLabel>
+                    <FormLabel>{t('initialStatus')}</FormLabel>
                     <Select onValueChange={field.onChange} defaultValue={field.value}>
                       <FormControl>
                         <SelectTrigger>
-                          <SelectValue placeholder="Select status" />
+                          <SelectValue placeholder={t('selectStatus')} />
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem value="operational">Operational</SelectItem>
+                        <SelectItem value="operational">{t('statusOperational')}</SelectItem>
-                        <SelectItem value="degraded">Degraded Performance</SelectItem>
+                        <SelectItem value="degraded">{t('statusDegraded')}</SelectItem>
-                        <SelectItem value="maintenance">Under Maintenance</SelectItem>
+                        <SelectItem value="maintenance">{t('statusMaintenance')}</SelectItem>
-                        <SelectItem value="major_outage">Major Outage</SelectItem>
+                        <SelectItem value="major_outage">{t('statusMajorOutage')}</SelectItem>
                       </SelectContent>
                     </Select>
                     <FormMessage />
@@ -218,9 +220,9 @@ export const CreateOperationalPageDialog = () => {
               render={({ field }) => (
                 <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                   <div className="space-y-0.5">
-                    <FormLabel>Public Page</FormLabel>
+                    <FormLabel>{t('publicPage')}</FormLabel>
                     <FormDescription>
-                      Make this page publicly accessible
+                      {t('makePagePublic')}
                     </FormDescription>
                   </div>
                   <FormControl>
@@ -238,12 +240,12 @@ export const CreateOperationalPageDialog = () => {
               name="custom_domain"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Custom Domain (Optional)</FormLabel>
+                  <FormLabel>{t('customDomainOptional')}</FormLabel>
                   <FormControl>
-                    <Input placeholder="status.yourdomain.com" {...field} />
+                    <Input placeholder={t('customDomainPlaceholder')} {...field} />
                   </FormControl>
                   <FormDescription>
-                    Custom domain for your status page
+                    {t('customDomainDescription')}
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
@@ -261,13 +263,13 @@ export const CreateOperationalPageDialog = () => {
                 variant="outline" 
                 onClick={() => setOpen(false)}
               >
-                Cancel
+                {t('cancel')}
               </Button>
               <Button 
                 type="submit" 
                 disabled={createMutation.isPending || createComponentMutation.isPending}
               >
-                {createMutation.isPending || createComponentMutation.isPending ? 'Creating...' : 'Create Page'}
+                {createMutation.isPending || createComponentMutation.isPending ? t('creating') : t('createPage')}
               </Button>
             </div>
           </form>

application/src/components/operational-page/EditOperationalPageDialog.tsx

@@ -14,6 +14,7 @@ import { useCreateStatusPageComponent, useStatusPageComponentsByOperationalId, u
 import { ComponentsSelector } from './ComponentsSelector';
 import { OperationalPageRecord } from '@/types/operational.types';
 import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
+import { useLanguage } from "@/contexts/LanguageContext";
 
 const formSchema = z.object({
   title: z.string().min(1, 'Title is required'),
@@ -37,6 +38,7 @@ interface EditOperationalPageDialogProps {
 }
 
 export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOperationalPageDialogProps) => {
+  const { t } = useLanguage();
   const [selectedComponents, setSelectedComponents] = useState<Partial<StatusPageComponentRecord>[]>([]);
   const [isFormSubmitting, setIsFormSubmitting] = useState(false);
   const [componentsLoaded, setComponentsLoaded] = useState(false);
@@ -195,9 +197,9 @@ export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOper
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>Edit Operational Page</DialogTitle>
+          <DialogTitle>{t('editOperationalPage')}</DialogTitle>
           <DialogDescription>
-            Update your operational status page settings and manage components.
+            {t('updateYourOperationalPage')}
           </DialogDescription>
         </DialogHeader>
 
@@ -209,9 +211,9 @@ export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOper
                 name="title"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Title</FormLabel>
+                    <FormLabel>{t('title')}</FormLabel>
                     <FormControl>
-                      <Input placeholder="My Service Status" {...field} />
+                      <Input placeholder={t('myServiceStatusPlaceholder')} {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -223,9 +225,9 @@ export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOper
                 name="slug"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Slug</FormLabel>
+                    <FormLabel>{t('slug')}</FormLabel>
                     <FormControl>
-                      <Input placeholder="my-service-status" {...field} />
+                      <Input placeholder={t('myServiceStatusSlugPlaceholder')} {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -238,10 +240,10 @@ export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOper
               name="description"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Description</FormLabel>
+                  <FormLabel>{t('description')}</FormLabel>
                   <FormControl>
                     <Textarea 
-                      placeholder="A brief description of your operational page" 
+                      placeholder={t('operationalPageDescriptionPlaceholder')} 
                       className="min-h-[80px]"
                       {...field} 
                     />
@@ -257,17 +259,17 @@ export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOper
                 name="theme"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Theme</FormLabel>
+                    <FormLabel>{t('theme')}</FormLabel>
                     <Select onValueChange={field.onChange} defaultValue={field.value}>
                       <FormControl>
                         <SelectTrigger>
-                          <SelectValue placeholder="Select theme" />
+                          <SelectValue placeholder={t('selectTheme')} />
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem value="default">Default</SelectItem>
+                        <SelectItem value="default">{t('themeDefault')}</SelectItem>
-                        <SelectItem value="dark">Dark</SelectItem>
+                        <SelectItem value="dark">{t('themeDark')}</SelectItem>
-                        <SelectItem value="light">Light</SelectItem>
+                        <SelectItem value="light">{t('themeLight')}</SelectItem>
                       </SelectContent>
                     </Select>
                     <FormMessage />
@@ -280,18 +282,18 @@ export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOper
                 name="status"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Status</FormLabel>
+                    <FormLabel>{t('status')}</FormLabel>
                     <Select onValueChange={field.onChange} defaultValue={field.value}>
                       <FormControl>
                         <SelectTrigger>
-                          <SelectValue placeholder="Select status" />
+                          <SelectValue placeholder={t('selectStatus')} />
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem value="operational">Operational</SelectItem>
+                        <SelectItem value="operational">{t('statusOperational')}</SelectItem>
-                        <SelectItem value="degraded">Degraded Performance</SelectItem>
+                        <SelectItem value="degraded">{t('statusDegraded')}</SelectItem>
-                        <SelectItem value="maintenance">Under Maintenance</SelectItem>
+                        <SelectItem value="maintenance">{t('statusMaintenance')}</SelectItem>
-                        <SelectItem value="major_outage">Major Outage</SelectItem>
+                        <SelectItem value="major_outage">{t('statusMajorOutage')}</SelectItem>
                       </SelectContent>
                     </Select>
                     <FormMessage />
@@ -306,9 +308,9 @@ export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOper
               render={({ field }) => (
                 <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                   <div className="space-y-0.5">
-                    <FormLabel>Public Page</FormLabel>
+                    <FormLabel>{t('publicPage')}</FormLabel>
                     <FormDescription>
-                      Make this page publicly accessible
+                      {t('makePagePublic')}
                     </FormDescription>
                   </div>
                   <FormControl>
@@ -326,12 +328,12 @@ export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOper
               name="custom_domain"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Custom Domain (Optional)</FormLabel>
+                  <FormLabel>{t('customDomainOptional')}</FormLabel>
                   <FormControl>
-                    <Input placeholder="status.yourdomain.com" {...field} />
+                    <Input placeholder={t('customDomainPlaceholder')} {...field} />
                   </FormControl>
                   <FormDescription>
-                    Custom domain for your status page
+                    {t('customDomainDescription')}
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
@@ -350,13 +352,13 @@ export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOper
                 variant="outline" 
                 onClick={() => onOpenChange(false)}
               >
-                Cancel
+                {t('cancel')}
               </Button>
               <Button 
                 type="submit" 
                 disabled={isFormSubmitting || updateMutation.isPending || createComponentMutation.isPending}
               >
-                {isFormSubmitting || updateMutation.isPending || createComponentMutation.isPending ? 'Updating...' : 'Update Page'}
+                {isFormSubmitting || updateMutation.isPending || createComponentMutation.isPending ? t('updating') : t('updatePage')}
               </Button>
             </div>
           </form>

application/src/components/operational-page/OperationalPageCard.tsx

@@ -6,6 +6,7 @@ import { OperationalPageRecord } from '@/types/operational.types';
 import { StatusBadge } from './StatusBadge';
 import { Globe, ExternalLink, Eye, Settings, Trash2 } from 'lucide-react';
 import { format } from 'date-fns';
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface OperationalPageCardProps {
   page: OperationalPageRecord;
@@ -15,6 +16,8 @@ interface OperationalPageCardProps {
 }
 
 export const OperationalPageCard = ({ page, onEdit, onView, onDelete }: OperationalPageCardProps) => {
+  const { t } = useLanguage();
+
   return (
     <Card className="hover:shadow-lg transition-shadow duration-200">
       <CardHeader className="pb-3">
@@ -32,23 +35,23 @@ export const OperationalPageCard = ({ page, onEdit, onView, onDelete }: Operatio
       <CardContent className="space-y-4">
         <div className="grid grid-cols-2 gap-4 text-sm">
           <div>
-            <span className="font-medium text-muted-foreground">Slug:</span>
+            <span className="font-medium text-muted-foreground">{t('slug')}:</span>
             <p className="mt-1">{page.slug}</p>
           </div>
           <div>
-            <span className="font-medium text-muted-foreground">Theme:</span>
+            <span className="font-medium text-muted-foreground">{t('theme')}:</span>
             <p className="mt-1 capitalize">{page.theme}</p>
           </div>
           <div>
-            <span className="font-medium text-muted-foreground">Public:</span>
+            <span className="font-medium text-muted-foreground">{t('public')}:</span>
-            <p className="mt-1">
+            <div className="mt-1">
               <Badge variant={page.is_public === 'true' ? 'default' : 'secondary'}>
-                {page.is_public === 'true' ? 'Yes' : 'No'}
+                {page.is_public === 'true' ? t('yes') : t('no')}
               </Badge>
-            </p>
+            </div>
           </div>
           <div>
-            <span className="font-medium text-muted-foreground">Updated:</span>
+            <span className="font-medium text-muted-foreground">{t('updated')}:</span>
             <p className="mt-1">{format(new Date(page.updated), 'MMM dd, yyyy')}</p>
           </div>
         </div>
@@ -70,7 +73,7 @@ export const OperationalPageCard = ({ page, onEdit, onView, onDelete }: Operatio
               className="flex-1"
             >
               <Eye className="h-4 w-4 mr-2" />
-              View
+              {t('view')}
             </Button>
           )}
           {onEdit && (
@@ -81,7 +84,7 @@ export const OperationalPageCard = ({ page, onEdit, onView, onDelete }: Operatio
               className="flex-1"
             >
               <Settings className="h-4 w-4 mr-2" />
-              Edit
+              {t('edit')}
             </Button>
           )}
           {onDelete && (

application/src/components/operational-page/OperationalPageContent.tsx

@@ -9,6 +9,8 @@ import { Button } from '@/components/ui/button';
 import { OperationalPageRecord } from '@/types/operational.types';
 import { Activity, Plus, RefreshCw } from 'lucide-react';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useLanguage } from "@/contexts/LanguageContext";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -21,6 +23,7 @@ import {
 } from '@/components/ui/alert-dialog';
 
 export const OperationalPageContent = () => {
+  const { t } = useLanguage();
   const navigate = useNavigate();
   const { data: pages, isLoading, error, refetch, isRefetching } = useOperationalPages();
   const deleteMutation = useDeleteOperationalPage();
@@ -68,13 +71,13 @@ export const OperationalPageContent = () => {
           <div className="mb-4">
             <Activity className="h-12 w-12 text-muted-foreground mx-auto" />
           </div>
-          <h3 className="text-lg font-semibold mb-2">Failed to load operational pages</h3>
+          <h3 className="text-lg font-semibold mb-2">{t('failedToLoadOperationalPages')}</h3>
           <p className="text-muted-foreground mb-4">
-            There was an error loading your operational pages. Please try again.
+            {t('loadingoperationalPages')}
           </p>
           <Button onClick={() => refetch()} variant="outline">
             <RefreshCw className="h-4 w-4 mr-2" />
-            Try Again
+            {t('tryagain')}
           </Button>
         </div>
       </div>
@@ -86,9 +89,9 @@ export const OperationalPageContent = () => {
       {/* Header */}
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8">
         <div>
-          <h1 className="text-3xl font-bold tracking-tight mb-2">Operational Pages</h1>
+          <h1 className="text-3xl font-bold tracking-tight mb-2"> {t('operationalPages')}</h1>
           <p className="text-muted-foreground">
-            Manage your public status pages and monitor service health
+            {t('describeOperation')}
           </p>
         </div>
         
@@ -100,7 +103,7 @@ export const OperationalPageContent = () => {
             disabled={isRefetching}
           >
             <RefreshCw className={`h-4 w-4 mr-2 ${isRefetching ? 'animate-spin' : ''}`} />
-            Refresh
+            {t('refresh')}
           </Button>
           <CreateOperationalPageDialog />
         </div>
@@ -135,9 +138,9 @@ export const OperationalPageContent = () => {
             <div className="mb-4">
               <Activity className="h-12 w-12 text-muted-foreground mx-auto" />
             </div>
-            <h3 className="text-lg font-semibold mb-2">No operational pages found</h3>
+            <h3 className="text-lg font-semibold mb-2">{t('noOperationalPagesFound')}</h3>
             <p className="text-muted-foreground mb-6">
-              Create your first operational page to start monitoring your services and communicate status to your users.
+              {t('createYourFirstOperationalPage')}
             </p>
             <CreateOperationalPageDialog />
           </CardContent>
@@ -164,14 +167,14 @@ export const OperationalPageContent = () => {
         <div className="mt-8 pt-6 border-t">
           <div className="flex flex-wrap gap-6 text-sm text-muted-foreground">
             <div>
-              <span className="font-medium">Total Pages:</span> {pages.length}
+              <span className="font-medium">{t('totalPages')}:</span> {pages.length}
             </div>
             <div>
-              <span className="font-medium">Public Pages:</span>{' '}
+              <span className="font-medium">{t('totalPages')}:</span>{' '}
               {pages.filter(p => p.is_public === 'true').length}
             </div>
             <div>
-              <span className="font-medium">Operational:</span>{' '}
+              <span className="font-medium">{t('operational')}:</span>{' '}
               {pages.filter(p => p.status === 'operational').length}
             </div>
           </div>
@@ -189,19 +192,19 @@ export const OperationalPageContent = () => {
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete Operational Page</AlertDialogTitle>
+            <AlertDialogTitle>{t('deleteOperationalPage')}</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to delete "{pageToDelete?.title}"? This action cannot be undone and will permanently remove the operational page and all its components.
+              {t('deleteOperationalPageConfirm').replace('{title}', pageToDelete?.title ?? '')}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
             <AlertDialogAction
               onClick={confirmDelete}
               className="bg-red-600 hover:bg-red-700"
               disabled={deleteMutation.isPending}
             >
-              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
+              {deleteMutation.isPending ? t('deleting') : t('delete')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

application/src/components/public/CurrentStatusSection.tsx

@@ -5,6 +5,7 @@ import { format } from 'date-fns';
 import { OperationalPageRecord } from '@/types/operational.types';
 import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
 import { Service } from '@/types/service.types';
+import { useLanguage } from '@/contexts/LanguageContext';
 
 interface CurrentStatusSectionProps {
   page: OperationalPageRecord;
@@ -45,18 +46,18 @@ const getActualStatus = (components: StatusPageComponentRecord[], services: Serv
   return 'operational';
 };
 
-const getStatusMessage = (status: OperationalPageRecord['status']) => {
+const getStatusMessage = (status: OperationalPageRecord['status'], t: (k: string, m?: string) => string) => {
   switch (status) {
     case 'operational':
-      return 'All systems are operational';
+      return t('allOperational', 'public');
     case 'degraded':
-      return 'Some systems are experiencing degraded performance';
+      return t('degradedPerformance', 'public');
     case 'maintenance':
-      return 'Systems are currently under maintenance';
+      return t('underMaintenance', 'public');
     case 'major_outage':
-      return 'We are experiencing a major service outage';
+      return t('majorOutage', 'public');
     default:
-      return 'Status unknown';
+      return t('statusUnknown', 'public');
   }
 };
 
@@ -106,6 +107,7 @@ const getStatusBackground = (status: OperationalPageRecord['status']) => {
 };
 
 export const CurrentStatusSection = ({ page, components, services }: CurrentStatusSectionProps) => {
+  const { t } = useLanguage();
   const actualStatus = getActualStatus(components, services);
   const displayStatus = actualStatus; // Use actual status for real-time accuracy
   
@@ -114,7 +116,7 @@ export const CurrentStatusSection = ({ page, components, services }: CurrentStat
       <CardHeader>
         <CardTitle className="flex items-center gap-3 text-card-foreground text-xl">
           <Shield className="h-6 w-6" />
-          System Status
+          {t('systemStatus', 'public')}
         </CardTitle>
       </CardHeader>
       <CardContent className="space-y-6">
@@ -123,10 +125,10 @@ export const CurrentStatusSection = ({ page, components, services }: CurrentStat
             {getStatusIcon(displayStatus)}
             <div>
               <h3 className={`text-2xl font-bold ${getStatusColor(displayStatus)}`}>
-                {getStatusMessage(displayStatus)}
+                {getStatusMessage(displayStatus, t)}
               </h3>
               <p className="text-sm text-muted-foreground mt-1">
-                Status automatically updated based on component health
+                {t('autoUpdatedByHealth', 'public')}
               </p>
             </div>
           </div>
@@ -136,20 +138,20 @@ export const CurrentStatusSection = ({ page, components, services }: CurrentStat
             displayStatus === 'maintenance' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
             'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
           }`}>
-            {displayStatus === 'operational' ? 'All Systems Operational' :
+            {displayStatus === 'operational' ? t('allOperational', 'public') :
-             displayStatus === 'degraded' ? 'Degraded Performance' :
+             displayStatus === 'degraded' ? t('degradedPerformance', 'public') :
-             displayStatus === 'maintenance' ? 'Under Maintenance' : 'Major Outage'}
+             displayStatus === 'maintenance' ? t('underMaintenance', 'public') : t('majorOutage', 'public')}
           </div>
         </div>
         
         <div className="flex items-center justify-between text-sm text-muted-foreground border-t pt-4">
           <div className="flex items-center gap-2">
             <Clock className="h-4 w-4" />
-            <span>Last updated: {format(new Date(), 'MMM dd, yyyy HH:mm')} UTC</span>
+            <span>{t('lastUpdatedAt', 'public', { time: format(new Date(), 'MMM dd, yyyy HH:mm') })}</span>
           </div>
           <div className="flex items-center gap-2">
             <div className="h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
-            <span>Live status monitoring</span>
+            <span>{t('liveStatusMonitoring', 'public')}</span>
           </div>
         </div>
       </CardContent>

application/src/components/public/PublicStatusPage.tsx

@@ -9,10 +9,12 @@ import { CurrentStatusSection } from './CurrentStatusSection';
 import { ComponentsStatusSection } from './ComponentsStatusSection';
 import { OverallUptimeSection } from './OverallUptimeSection';
 import { PublicStatusPageFooter } from './PublicStatusPageFooter';
+import { useLanguage } from '@/contexts/LanguageContext';
 
 export const PublicStatusPage = () => {
+  const { t } = useLanguage();
   const { slug } = useParams<{ slug: string }>();
-  console.log('PublicStatusPage - slug from params:', slug);
+//  console.log('PublicStatusPage - slug from params:', slug);
   
   const { page, components, services, uptimeData, loading, error } = usePublicStatusPageData(slug);
   const [lastUpdated, setLastUpdated] = useState(new Date());
@@ -51,7 +53,7 @@ export const PublicStatusPage = () => {
     };
   }, [page?.theme]);
 
-  console.log('PublicStatusPage state:', { loading, error, page: !!page, components: components.length, services: services.length });
+ // console.log('PublicStatusPage state:', { loading, error, page: !!page, components: components.length, services: services.length });
 
   if (loading) {
     return (
@@ -59,9 +61,9 @@ export const PublicStatusPage = () => {
         <div className="text-center space-y-4">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
           <div className="space-y-2">
-            <p className="text-lg font-medium text-foreground">Loading Status Page</p>
+            <p className="text-lg font-medium text-foreground">{t('loadingStatusPage', 'public')}</p>
-            <p className="text-sm text-muted-foreground">Fetching real-time system status...</p>
+            <p className="text-sm text-muted-foreground">{t('fetchingRealtimeStatus', 'public')}</p>
-            <p className="text-xs text-muted-foreground">Slug: {slug || 'No slug provided'}</p>
+            <p className="text-xs text-muted-foreground">{t('slugLabel', 'public')}: {slug || 'No slug provided'}</p>
           </div>
         </div>
       </div>
@@ -76,19 +78,19 @@ export const PublicStatusPage = () => {
             <AlertCircle className="h-8 w-8 text-red-600 dark:text-red-400" />
           </div>
           <div className="space-y-2">
-            <h1 className="text-2xl font-bold text-foreground">Status Page Not Found</h1>
+            <h1 className="text-2xl font-bold text-foreground">{t('statusPageNotFound', 'public')}</h1>
             <p className="text-muted-foreground">
-              {error || 'The requested status page could not be found or is not publicly accessible.'}
+              {error || t('notFoundDescription', 'public')}
             </p>
-            <p className="text-xs text-muted-foreground">Slug: {slug || 'No slug provided'}</p>
+            <p className="text-xs text-muted-foreground">{t('slugLabel', 'public')}: {slug || 'No slug provided'}</p>
           </div>
           <div className="flex gap-3 justify-center">
             <Button onClick={() => window.history.back()} variant="outline">
-              Go Back
+              {t('goBack', 'public')}
             </Button>
             <Button onClick={() => window.location.reload()} className="gap-2">
               <RefreshCw className="h-4 w-4" />
-              Retry
+              {t('retry', 'public')}
             </Button>
           </div>
         </div>

application/src/components/public/hooks/usePublicStatusPageData.ts

@@ -19,61 +19,61 @@ export const usePublicStatusPageData = (slug: string | undefined) => {
   useEffect(() => {
     const fetchPublicPage = async () => {
       if (!slug) {
-        console.log('No slug provided');
+      //  console.log('No slug provided');
         setError('No status page slug provided');
         setLoading(false);
         return;
       }
       
       try {
-        console.log('Fetching public status page for slug:', slug);
+       // console.log('Fetching public status page for slug:', slug);
         setLoading(true);
         setError(null);
         
         // Fetch operational page
-        console.log('Fetching operational pages...');
+      //  console.log('Fetching operational pages...');
         const pages = await operationalPageService.getOperationalPages();
-        console.log('All pages:', pages);
+      //  console.log('All pages:', pages);
         
         const foundPage = pages.find(p => p.slug === slug && p.is_public === 'true');
-        console.log('Found page:', foundPage);
+      //  console.log('Found page:', foundPage);
         
         if (!foundPage) {
-          console.log('Page not found or not public');
+       //   console.log('Page not found or not public');
           setError('Status page not found or not public');
           setLoading(false);
           return;
         }
         
         setPage(foundPage);
-        console.log('Page set successfully');
+       // console.log('Page set successfully');
         
         // Fetch components for this page
-        console.log('Fetching components for page:', foundPage.id);
+       // console.log('Fetching components for page:', foundPage.id);
         const pageComponents = await statusPageComponentsService.getStatusPageComponentsByOperationalId(foundPage.id);
-        console.log('Components found:', pageComponents);
+       // console.log('Components found:', pageComponents);
         setComponents(pageComponents);
         
         // Fetch all services
-        console.log('Fetching all services...');
+      //  console.log('Fetching all services...');
         const allServices = await serviceService.getServices();
-        console.log('Services found:', allServices);
+      //  console.log('Services found:', allServices);
         setServices(allServices);
         
         // Fetch uptime data for each component that has a service
-        console.log('Fetching uptime data...');
+      //  console.log('Fetching uptime data...');
         const uptimePromises = pageComponents
           .filter(component => component.service_id)
           .map(async (component) => {
             try {
-              console.log('Fetching uptime for service:', component.service_id);
+            //  console.log('Fetching uptime for service:', component.service_id);
               const endDate = new Date();
               const startDate = new Date(Date.now() - 90 * 24 * 60 * 60 * 1000); // Last 90 days
               const history = await uptimeService.getUptimeHistory(component.service_id, 2000, startDate, endDate);
-              console.log(`Uptime history for ${component.service_id}:`, history.length, 'records');
+            //  console.log(`Uptime history for ${component.service_id}:`, history.length, 'records');
               return { serviceId: component.service_id, history };
             } catch (error) {
-              console.error(`Error fetching uptime for service ${component.service_id}:`, error);
+            //  console.error(`Error fetching uptime for service ${component.service_id}:`, error);
               return { serviceId: component.service_id, history: [] };
             }
           });
@@ -84,12 +84,12 @@ export const usePublicStatusPageData = (slug: string | undefined) => {
           uptimeMap[result.serviceId] = result.history;
         });
         setUptimeData(uptimeMap);
-        console.log('Uptime data set successfully');
+       // console.log('Uptime data set successfully');
         
-        console.log('All data fetched successfully');
+       // console.log('All data fetched successfully');
         
       } catch (err) {
-        console.error('Error fetching public page:', err);
+       // console.error('Error fetching public page:', err);
         setError(`Failed to load status page: ${err}`);
       } finally {
         setLoading(false);

application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx

@@ -1,15 +1,12 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Copy, Download, Terminal, CheckCircle, Zap, Play } from "lucide-react";
-import { regionalService } from "@/services/regionalService";
-import { InstallCommand } from "@/types/regional.types";
 import { useToast } from "@/hooks/use-toast";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { getCurrentEndpoint } from "@/lib/pocketbase";
+import { RegionalAgentConfigForm } from "./RegionalAgentConfigForm";
+import { RegionalOneClickTab } from "./RegionalOneClickTab";
+import { RegionalManualTab } from "./RegionalManualTab";
 
 interface AddRegionalAgentDialogProps {
   open: boolean;
@@ -22,30 +19,54 @@ export const AddRegionalAgentDialog: React.FC<AddRegionalAgentDialogProps> = ({
   onOpenChange,
   onAgentAdded
 }) => {
-  const [step, setStep] = useState(1);
+  const { t } = useLanguage();
-  const [regionName, setRegionName] = useState("");
-  const [agentIp, setAgentIp] = useState("");
-  const [installCommand, setInstallCommand] = useState<InstallCommand | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
   const { toast } = useToast();
+  const [activeTab, setActiveTab] = useState("configure");
+  const [formData, setFormData] = useState({
+    regionName: "",
+    agentIp: "",
+  });
+  const [agentToken, setAgentToken] = useState("");
+  const [agentId, setAgentId] = useState("");
+  const [currentPocketBaseUrl, setCurrentPocketBaseUrl] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const handleCreateAgent = async (e: React.FormEvent) => {
+  // Generate new credentials when dialog opens or after successful creation
+  const generateNewCredentials = () => {
+    const newToken = `rgn_${Math.random().toString(36).substring(2, 15)}${Math.random().toString(36).substring(2, 15)}`;
+    const newAgentId = `regional_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+    setAgentToken(newToken);
+    setAgentId(newAgentId);
+  };
+
+  useEffect(() => {
+    if (open) {
+      const endpoint = getCurrentEndpoint();
+      setCurrentPocketBaseUrl(endpoint);
+      generateNewCredentials();
+    }
+  }, [open]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!regionName.trim() || !agentIp.trim()) return;
+    if (!formData.regionName.trim() || !formData.agentIp.trim()) return;
 
     setIsSubmitting(true);
     try {
-      const result = await regionalService.createRegionalService({
+      await new Promise(resolve => setTimeout(resolve, 1000));
-        region_name: regionName,
-        agent_ip_address: agentIp,
-      });
       
-      setInstallCommand(result.installCommand);
+      toast({
-      setStep(2);
+        title: t('success'),
+        description: t('agentCreatedSuccessfully'),
+      });
+      setActiveTab("one-click");
+      generateNewCredentials();
+      
+      onAgentAdded();
     } catch (error) {
       toast({
-        title: "Error",
+        title: t('error'),
-        description: "Failed to create regional agent configuration.",
+        description: t('failedToCreateAgent'),
         variant: "destructive",
       });
     } finally {
@@ -53,407 +74,65 @@ export const AddRegionalAgentDialog: React.FC<AddRegionalAgentDialogProps> = ({
     }
   };
 
-  const copyToClipboard = async (text: string, description: string = "Content") => {
+  const handleDialogClose = () => {
-    try {
+    setFormData({
-      // Try the modern clipboard API first
+      regionName: "",
-      if (navigator.clipboard && window.isSecureContext) {
+      agentIp: "",
-        await navigator.clipboard.writeText(text);
-        toast({
-          title: "Copied!",
-          description: `${description} copied to clipboard.`,
-        });
-        return;
-      }
-      
-      // Fallback for older browsers or non-secure contexts (like localhost)
-      const textArea = document.createElement('textarea');
-      textArea.value = text;
-      textArea.style.position = 'fixed';
-      textArea.style.left = '-999999px';
-      textArea.style.top = '-999999px';
-      document.body.appendChild(textArea);
-      textArea.focus();
-      textArea.select();
-      
-      const successful = document.execCommand('copy');
-      document.body.removeChild(textArea);
-      
-      if (successful) {
-        toast({
-          title: "Copied!",
-          description: `${description} copied to clipboard.`,
-        });
-      } else {
-        throw new Error('execCommand failed');
-      }
-    } catch (error) {
-      console.error('Failed to copy to clipboard:', error);
-      
-      // Show the text in a modal or alert as final fallback
-      const userAgent = navigator.userAgent.toLowerCase();
-      const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
-      
-      let errorMessage = "Failed to copy to clipboard.";
-      if (isLocalhost) {
-        errorMessage += " This is common in local development. Please manually copy the text.";
-      } else if (userAgent.includes('chrome')) {
-        errorMessage += " Try using HTTPS or enable clipboard permissions.";
-      }
-      
-      toast({
-        title: "Copy failed",
-        description: errorMessage,
-        variant: "destructive",
-      });
-      
-      // As a last resort, select the text for manual copying
-      try {
-        const textarea = document.querySelector('textarea[readonly]') as HTMLTextAreaElement;
-        if (textarea) {
-          textarea.select();
-          textarea.setSelectionRange(0, 99999); // For mobile devices
-        }
-      } catch (selectError) {
-        console.error('Failed to select text:', selectError);
-      }
-    }
-  };
-
-  const downloadScript = () => {
-    if (!installCommand) return;
-    
-    const blob = new Blob([installCommand.bash_script], { type: 'text/plain' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `install-regional-agent-${installCommand.agent_id}.sh`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-    
-    toast({
-      title: "Downloaded!",
-      description: "Installation script downloaded successfully.",
     });
-  };
+    setActiveTab("configure");
-
+    generateNewCredentials();
-  const handleComplete = () => {
-    onAgentAdded();
-    setStep(1);
-    setRegionName("");
-    setAgentIp("");
-    setInstallCommand(null);
     onOpenChange(false);
   };
 
-  const resetDialog = () => {
-    setStep(1);
-    setRegionName("");
-    setAgentIp("");
-    setInstallCommand(null);
-  };
-
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={handleDialogClose}>
       <DialogContent className="sm:max-w-[900px] max-h-[90vh] overflow-auto">
         <DialogHeader>
-          <DialogTitle>Add Regional Monitoring Agent</DialogTitle>
+          <DialogTitle>{t('addRegionalMonitoringAgent')}</DialogTitle>
           <DialogDescription>
-            Deploy a regional monitoring agent with automatic one-click installation.
+            {t('deployRegionalMonitoringAgent')}
           </DialogDescription>
         </DialogHeader>
 
-        {step === 1 && (
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <form onSubmit={handleCreateAgent} className="space-y-6">
+          <TabsList className="grid w-full grid-cols-3">
-            <div className="space-y-4">
+            <TabsTrigger value="configure">{t('configureAgent')}</TabsTrigger>
-              <div>
+            <TabsTrigger value="one-click">{t('oneClickInstallTab')}</TabsTrigger>
-                <Label htmlFor="regionName">Region Name</Label>
+            <TabsTrigger value="manual">{t('manualInstallTab')}</TabsTrigger>
-                <Input
+          </TabsList>
-                  id="regionName"
-                  placeholder="e.g., us-east-1, europe-west-1, asia-pacific-1"
-                  value={regionName}
-                  onChange={(e) => setRegionName(e.target.value)}
-                  required
-                />
-              </div>
-              
-              <div>
-                <Label htmlFor="agentIp">Agent Server IP Address</Label>
-                <Input
-                  id="agentIp"
-                  placeholder="e.g., 192.168.1.100 or your-server.example.com"
-                  value={agentIp}
-                  onChange={(e) => setAgentIp(e.target.value)}
-                  required
-                />
-              </div>
-            </div>
 
-            <div className="flex justify-end space-x-2">
+          <TabsContent value="configure" className="space-y-6">
-              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            <RegionalAgentConfigForm
-                Cancel
+              formData={formData}
-              </Button>
+              setFormData={setFormData}
-              <Button type="submit" disabled={isSubmitting}>
+              agentId={agentId}
-                {isSubmitting ? "Generating..." : "Generate Installation"}
+              agentToken={agentToken}
-              </Button>
+              currentPocketBaseUrl={currentPocketBaseUrl}
-            </div>
+              isSubmitting={isSubmitting}
-          </form>
+              onSubmit={handleSubmit}
-        )}
+            />
+          </TabsContent>
 
-        {step === 2 && installCommand && (
+          <TabsContent value="one-click" className="space-y-6">
-          <div className="space-y-6">
+            <RegionalOneClickTab
-            <div className="text-center space-y-2">
+              agentToken={agentToken}
-              <CheckCircle className="h-12 w-12 text-green-600 mx-auto" />
+              currentPocketBaseUrl={currentPocketBaseUrl}
-              <h3 className="text-lg font-semibold">Agent Configuration Ready!</h3>
+              formData={formData}
-              <p className="text-muted-foreground">
+              agentId={agentId}
-                One-click installation script generated with automatic configuration.
+              onDialogClose={handleDialogClose}
-              </p>
+            />
-            </div>
+          </TabsContent>
 
-            <Tabs defaultValue="oneclicK" className="w-full">
+          <TabsContent value="manual" className="space-y-6">
-              <TabsList className="grid w-full grid-cols-3">
+            <RegionalManualTab
-                <TabsTrigger value="oneclicK">One-Click Install</TabsTrigger>
+              agentToken={agentToken}
-                <TabsTrigger value="details">Agent Details</TabsTrigger>
+              currentPocketBaseUrl={currentPocketBaseUrl}
-                <TabsTrigger value="manual">Manual Install</TabsTrigger>
+              formData={formData}
-              </TabsList>
+              agentId={agentId}
-              
+              onDialogClose={handleDialogClose}
-              <TabsContent value="oneclicK" className="space-y-4">
+            />
-                <Card>
+          </TabsContent>
-                  <CardHeader>
+        </Tabs>
-                    <CardTitle className="flex items-center gap-2">
-                      <Zap className="h-5 w-5 text-yellow-500" />
-                      One-Click Automatic Installation
-                    </CardTitle>
-                    <CardDescription>
-                      Complete installation, configuration, and service startup in one command
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div className="bg-green-50 border border-green-200 rounded-lg p-4">
-                      <div className="flex items-center gap-2 text-green-800 font-medium mb-2">
-                        <Play className="h-4 w-4" />
-                        What this script does automatically:
-                      </div>
-                      <ul className="text-sm text-green-700 space-y-1 ml-6">
-                        <li>• Downloads the latest .deb package</li>
-                        <li>• Installs the regional monitoring agent</li>
-                        <li>• Creates configuration file with your settings</li>
-                        <li>• Starts and enables the service</li>
-                        <li>• Runs health checks</li>
-                      </ul>
-                    </div>
-
-                    <div className="space-y-2">
-                      <Label>Run this command on your target server:</Label>
-                      <div className="relative">
-                        <Textarea
-                          readOnly
-                          value={`# One-click installation command:
-curl -fsSL https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/install-regional-agent.sh | sudo bash -s -- \\
-  --region-name="${regionName}" \\
-  --agent-id="${installCommand.agent_id}" \\
-  --agent-ip="${agentIp}" \\
-  --token="${installCommand.token}" \\
-  --pocketbase-url="${installCommand.api_endpoint}"`}
-                          className="font-mono text-sm min-h-[120px] pr-12"
-                        />
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          className="absolute top-2 right-2"
-                          onClick={() => copyToClipboard(`curl -fsSL https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/install-regional-agent.sh | sudo bash -s -- --region-name="${regionName}" --agent-id="${installCommand.agent_id}" --agent-ip="${agentIp}" --token="${installCommand.token}" --pocketbase-url="${installCommand.api_endpoint}"`, "Installation command")}
-                        >
-                          <Copy className="h-3 w-3" />
-                        </Button>
-                      </div>
-                    </div>
-                    
-                    <div className="flex gap-2">
-                      <Button onClick={downloadScript} variant="outline" className="flex-1">
-                        <Download className="mr-2 h-4 w-4" />
-                        Download Complete Script
-                      </Button>
-                      <Button 
-                        onClick={() => copyToClipboard(installCommand.bash_script, "Installation script")} 
-                        variant="outline" 
-                        className="flex-1"
-                      >
-                        <Copy className="mr-2 h-4 w-4" />
-                        Copy Full Script
-                      </Button>
-                    </div>
-
-                    {/* Local development notice */}
-                    {(window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') && (
-                      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
-                        <p className="text-sm text-yellow-800">
-                          <strong>Local Development Notice:</strong> If clipboard copying fails, this is normal in local development. 
-                          You can use the "Download Complete Script" button instead or manually copy the text.
-                        </p>
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-              </TabsContent>
-              
-              <TabsContent value="details" className="space-y-4">
-                <Card>
-                  <CardHeader>
-                    <CardTitle>Generated Agent Configuration</CardTitle>
-                    <CardDescription>
-                      These values will be automatically configured during installation
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-3">
-                    <div className="grid grid-cols-2 gap-4">
-                      <div>
-                        <Label className="text-sm font-medium text-foreground">Agent ID</Label>
-                        <div className="relative">
-                          <Input
-                            value={installCommand.agent_id}
-                            readOnly
-                            className="font-mono text-sm bg-muted/50 border-muted-foreground/20 text-foreground pr-10"
-                          />
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
-                            onClick={() => copyToClipboard(installCommand.agent_id, "Agent ID")}
-                          >
-                            <Copy className="h-3 w-3" />
-                          </Button>
-                        </div>
-                      </div>
-                      <div>
-                        <Label className="text-sm font-medium text-foreground">Region Name</Label>
-                        <Input
-                          value={regionName}
-                          readOnly
-                          className="font-mono text-sm bg-muted/50 border-muted-foreground/20 text-foreground"
-                        />
-                      </div>
-                      <div>
-                        <Label className="text-sm font-medium text-foreground">Server IP</Label>
-                        <Input
-                          value={agentIp}
-                          readOnly
-                          className="font-mono text-sm bg-muted/50 border-muted-foreground/20 text-foreground"
-                        />
-                      </div>
-                      <div>
-                        <Label className="text-sm font-medium text-foreground">API Endpoint</Label>
-                        <Input
-                          value={installCommand.api_endpoint}
-                          readOnly
-                          className="font-mono text-sm bg-muted/50 border-muted-foreground/20 text-foreground"
-                        />
-                      </div>
-                    </div>
-                    
-                    <div>
-                      <Label className="text-sm font-medium text-foreground">Authentication Token</Label>
-                      <div className="relative">
-                        <Input
-                          value={installCommand.token}
-                          readOnly
-                          className="font-mono text-sm bg-muted/50 border-muted-foreground/20 text-foreground pr-10"
-                        />
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
-                          onClick={() => copyToClipboard(installCommand.token, "Authentication token")}
-                        >
-                          <Copy className="h-3 w-3" />
-                        </Button>
-                      </div>
-                    </div>
-
-                    <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
-                      <p className="text-sm text-blue-800">
-                        <strong>Configuration file location:</strong> /etc/regional-check-agent/regional-check-agent.env
-                      </p>
-                    </div>
-                  </CardContent>
-                </Card>
-              </TabsContent>
-
-              <TabsContent value="manual" className="space-y-4">
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="flex items-center gap-2">
-                      <Terminal className="h-5 w-5" />
-                      Manual Installation Steps
-                    </CardTitle>
-                    <CardDescription>
-                      Step-by-step manual installation process
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div className="text-sm space-y-4">
-                      <div className="border-l-4 border-blue-500 pl-4">
-                        <p className="font-medium">Step 1: Download Package</p>
-                        <code className="text-xs bg-muted p-2 rounded block mt-1">
-                          <p className="text-xs text-muted-foreground mt-1">✅ If you’re using the amd64 architecture, please download this package. </p> <br/>
-                          wget https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0/distributed-regional-check-agent_1.0.0_amd64.deb
-                        </code>
-                        <code className="text-xs bg-muted p-2 rounded block mt-1">
-                          <p className="text-xs text-muted-foreground mt-1">✅ If you’re using the arm64 architecture, please download this package. </p> <br/> 
-                          wget https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0/distributed-regional-check-agent_1.0.0_arm64.deb
-                        </code>
-                      </div>
-                      
-                      <div className="border-l-4 border-blue-500 pl-4">
-                        <p className="font-medium">Step 2: Install Package</p>
-                        <code className="text-xs bg-muted p-2 rounded block mt-1">
-                          sudo dpkg -i distributed-regional-check-agent_1.0.0_amd64.deb<br/>
-                          sudo apt-get install -f
-                        </code>
-                      </div>
-                      
-                      <div className="border-l-4 border-blue-500 pl-4">
-                        <p className="font-medium">Step 3: Configure Agent</p>
-                        <code className="text-xs bg-muted p-2 rounded block mt-1">
-                          sudo nano /etc/regional-check-agent/regional-check-agent.env
-                        </code>
-                        <code className="text-xs bg-muted p-2 rounded block mt-1">
-                          Copy sample configuration from  https://github.com/operacle/Distributed-Regional-Monitoring/blob/main/packaging/regional-check-agent.conf
-                        </code>
-                        <p className="text-xs text-muted-foreground mt-1">Add the configuration values shown in the Agent Details tab</p>
-                      </div>
-                      
-                      <div className="border-l-4 border-blue-500 pl-4">
-                        <p className="font-medium">Step 4: Start Service</p>
-                        <code className="text-xs bg-muted p-2 rounded block mt-1">
-                          sudo systemctl enable regional-check-agent<br/>
-                          sudo systemctl start regional-check-agent
-                        </code>
-                      </div>
-                      
-                      <div className="border-l-4 border-green-500 pl-4">
-                        <p className="font-medium">Step 5: Verify Installation</p>
-                        <code className="text-xs bg-muted p-2 rounded block mt-1">
-                          sudo systemctl status regional-check-agent<br/>
-                          curl http://localhost:8091/health
-                        </code>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </TabsContent>
-            </Tabs>
-
-            <div className="flex justify-end space-x-2">
-              <Button variant="outline" onClick={resetDialog}>
-                Add Another Agent
-              </Button>
-              <Button onClick={handleComplete}>
-                Complete Setup
-              </Button>
-            </div>
-          </div>
-        )}
       </DialogContent>
     </Dialog>
   );

application/src/components/regional-monitoring/RegionalAgentCard.tsx

@@ -8,6 +8,7 @@ import { MapPin, Wifi, WifiOff, MoreVertical, Trash2, Terminal, Copy } from "luc
 import { RegionalService } from "@/types/regional.types";
 import { formatDistanceToNow } from "date-fns";
 import { useToast } from "@/hooks/use-toast";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface RegionalAgentCardProps {
   agent: RegionalService;
@@ -16,6 +17,7 @@ interface RegionalAgentCardProps {
 
 export const RegionalAgentCard: React.FC<RegionalAgentCardProps> = ({ agent, onDelete }) => {
   const { toast } = useToast();
+  const { t } = useLanguage();
 
   // Check if this is the default agent that cannot be removed
   const isDefaultAgent = agent.agent_id === "1" || agent.region_name === "Default";
@@ -24,13 +26,13 @@ export const RegionalAgentCard: React.FC<RegionalAgentCardProps> = ({ agent, onD
     try {
       await navigator.clipboard.writeText(agent.agent_id);
       toast({
-        title: "Copied!",
+        title: t('copied'),
-        description: "Agent ID copied to clipboard.",
+        description: t('copiedDescription'),
       });
     } catch (error) {
       toast({
-        title: "Copy failed",
+        title: t('copyFailed'),
-        description: "Failed to copy agent ID.",
+        description: t('copyFailedDescription'),
         variant: "destructive",
       });
     }
@@ -40,14 +42,14 @@ export const RegionalAgentCard: React.FC<RegionalAgentCardProps> = ({ agent, onD
     if (agent.connection === 'online') {
       return {
         icon: <Wifi className="h-4 w-4" />,
-        label: 'Online',
+        label: t('online'),
         variant: 'default' as const,
         className: 'bg-green-100 text-green-800 hover:bg-green-100'
       };
     } else {
       return {
         icon: <WifiOff className="h-4 w-4" />,
-        label: 'Offline',
+        label: t('offline'),
         variant: 'secondary' as const,
         className: 'bg-red-100 text-red-800 hover:bg-red-100'
       };
@@ -67,7 +69,7 @@ export const RegionalAgentCard: React.FC<RegionalAgentCardProps> = ({ agent, onD
                 {agent.region_name}
                 {isDefaultAgent && (
                   <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
-                    Default
+                    {t('defaultBadge')}
                   </Badge>
                 )}
               </CardTitle>
@@ -86,12 +88,12 @@ export const RegionalAgentCard: React.FC<RegionalAgentCardProps> = ({ agent, onD
             <DropdownMenuContent align="end">
               <DropdownMenuItem onClick={copyAgentId}>
                 <Copy className="mr-2 h-4 w-4" />
-                Copy Agent ID
+                {t('copyAgentId')}
               </DropdownMenuItem>
               {!isDefaultAgent && (
                 <DropdownMenuItem onClick={onDelete} className="text-red-600">
                   <Trash2 className="mr-2 h-4 w-4" />
-                  Remove Agent
+                  {t('removeAgent')}
                 </DropdownMenuItem>
               )}
             </DropdownMenuContent>
@@ -116,12 +118,12 @@ export const RegionalAgentCard: React.FC<RegionalAgentCardProps> = ({ agent, onD
         
         <div className="space-y-2">
           <div className="flex justify-between text-sm">
-            <span className="text-muted-foreground">Agent ID:</span>
+            <span className="text-muted-foreground">{t('agentId')}</span>
             <span className="font-mono text-xs">{agent.agent_id.substring(0, 12)}...</span>
           </div>
           
           <div className="flex justify-between text-sm">
-            <span className="text-muted-foreground">Last Updated:</span>
+            <span className="text-muted-foreground">{t('lastUpdated')}</span>
             <span className="text-xs">
               {formatDistanceToNow(new Date(agent.updated), { addSuffix: true })}
             </span>
@@ -132,7 +134,7 @@ export const RegionalAgentCard: React.FC<RegionalAgentCardProps> = ({ agent, onD
           <div className="pt-2 border-t">
             <div className="flex items-center text-xs text-green-600">
               <div className="w-2 h-2 bg-green-600 rounded-full mr-2 animate-pulse"></div>
-              Active monitoring
+              {t('activeMonitoring')}
             </div>
           </div>
         )}
@@ -141,7 +143,7 @@ export const RegionalAgentCard: React.FC<RegionalAgentCardProps> = ({ agent, onD
           <div className="pt-2 border-t">
             <div className="flex items-center text-xs text-red-600">
               <div className="w-2 h-2 bg-red-600 rounded-full mr-2"></div>
-              Connection lost
+              {t('connectionLost')}
             </div>
           </div>
         )}

application/src/components/regional-monitoring/RegionalAgentConfigForm.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Copy } from "lucide-react";
+import { copyToClipboard } from "@/utils/copyUtils";
+import { useLanguage } from "@/contexts/LanguageContext";
+
+interface RegionalAgentConfigFormProps {
+  formData: {
+    regionName: string;
+    agentIp: string;
+  };
+  setFormData: (data: { regionName: string; agentIp: string }) => void;
+  agentId: string;
+  agentToken: string;
+  currentPocketBaseUrl: string;
+  isSubmitting: boolean;
+  onSubmit: (e: React.FormEvent) => void;
+}
+
+export const RegionalAgentConfigForm: React.FC<RegionalAgentConfigFormProps> = ({
+  formData,
+  setFormData,
+  agentId,
+  agentToken,
+  currentPocketBaseUrl,
+  isSubmitting,
+  onSubmit,
+}) => {
+  const { t } = useLanguage();
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-6">
+      <div className="space-y-4">
+        <div>
+          <Label htmlFor="regionName">{t('regionName')}</Label>
+          <Input
+            id="regionName"
+            placeholder={t('regionNamePlaceholder')}
+            value={formData.regionName}
+            onChange={(e) => setFormData({ ...formData, regionName: e.target.value })}
+            required
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="agentIp">{t('agentServerIpAddress')}</Label>
+          <Input
+            id="agentIp"
+            placeholder={t('agentIpPlaceholder')}
+            value={formData.agentIp}
+            onChange={(e) => setFormData({ ...formData, agentIp: e.target.value })}
+            required
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <Label className="text-sm font-medium">{t('agentId')}</Label>
+            <div className="relative">
+              <Input
+                value={agentId}
+                readOnly
+                className="font-mono text-sm bg-muted/50 border-muted-foreground/20 pr-10"
+              />
+              <Button
+                type="button"
+                size="sm"
+                variant="ghost"
+                className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
+                onClick={() => copyToClipboard(agentId)}
+              >
+                <Copy className="h-3 w-3" />
+              </Button>
+            </div>
+          </div>
+
+          <div>
+            <Label className="text-sm font-medium">{t('apiEndpoint')}</Label>
+            <div className="relative">
+              <Input
+                value={currentPocketBaseUrl}
+                readOnly
+                className="font-mono text-sm bg-muted/50 border-muted-foreground/20 pr-10"
+              />
+              <Button
+                type="button"
+                size="sm"
+                variant="ghost"
+                className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
+                onClick={() => copyToClipboard(currentPocketBaseUrl)}
+              >
+                <Copy className="h-3 w-3" />
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <Label className="text-sm font-medium">{t('authenticationToken')}</Label>
+          <div className="relative">
+            <Input
+              value={agentToken}
+              readOnly
+              className="font-mono text-sm bg-muted/50 border-muted-foreground/20 pr-10"
+            />
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
+              onClick={() => copyToClipboard(agentToken)}
+            >
+              <Copy className="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-end space-x-2">
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? t('creating') : t('createAgent')}
+        </Button>
+      </div>
+    </form>
+  );
+};

application/src/components/regional-monitoring/RegionalManualTab.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Copy, Terminal } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { copyToClipboard } from "@/utils/copyUtils";
+import { useLanguage } from "@/contexts/LanguageContext";
+
+interface RegionalManualTabProps {
+  agentToken: string;
+  currentPocketBaseUrl: string;
+  formData: {
+    regionName: string;
+    agentIp: string;
+  };
+  agentId: string;
+  onDialogClose: () => void;
+}
+
+export const RegionalManualTab: React.FC<RegionalManualTabProps> = ({
+  agentToken,
+  currentPocketBaseUrl,
+  formData,
+  agentId,
+  onDialogClose,
+}) => {
+  const { t } = useLanguage();
+
+  const getManualInstallSteps = () => {
+    return [
+      {
+        title: t('step1DownloadPackage'),
+        commands: [
+          {
+            label: t('downloadAmd64Notice'),
+            command: 'wget https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0/distributed-regional-check-agent_1.0.0_amd64.deb'
+          },
+          {
+            label: t('downloadArm64Notice'),
+            command: 'wget https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0/distributed-regional-check-agent_1.0.0_arm64.deb'
+          }
+        ]
+      },
+      {
+        title: t('step2InstallPackage'),
+        commands: [
+          {
+            label: '',
+            command: 'sudo dpkg -i distributed-regional-check-agent_1.0.0_amd64.deb\nsudo apt-get install -f'
+          }
+        ]
+      },
+      {
+        title: t('step3ConfigureAgent'),
+        commands: [
+          {
+            label: '',
+            command: 'sudo nano /etc/regional-check-agent/regional-check-agent.env'
+          },
+          {
+            label: t('addConfigurationValues'),
+            command: `POCKETBASE_URL=${currentPocketBaseUrl}
+AGENT_TOKEN=${agentToken}
+AGENT_ID=${agentId}
+REGION_NAME=${formData.regionName}
+AGENT_IP=${formData.agentIp}`
+          }
+        ]
+      },
+      {
+        title: t('step4StartService'),
+        commands: [
+          {
+            label: '',
+            command: 'sudo systemctl enable regional-check-agent\nsudo systemctl start regional-check-agent'
+          }
+        ]
+      },
+      {
+        title: t('step5VerifyInstallation'),
+        commands: [
+          {
+            label: '',
+            command: 'sudo systemctl status regional-check-agent\ncurl http://localhost:8091/health'
+          }
+        ]
+      }
+    ];
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Terminal className="h-5 w-5" />
+          {t('manualInstallationSteps')}
+        </CardTitle>
+        <CardDescription>
+          {t('stepByStepManualInstallation')}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-4">
+          {getManualInstallSteps().map((step, stepIndex) => (
+            <div key={stepIndex} className="border-l-4 border-blue-500 pl-4 space-y-2">
+              <div className="flex items-center gap-2">
+                <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-sm font-medium">
+                  {stepIndex + 1}
+                </span>
+                <p className="font-medium">{step.title}</p>
+              </div>
+              {step.commands.map((cmd, cmdIndex) => (
+                <div key={cmdIndex} className="space-y-1">
+                  {cmd.label && (
+                    <p className="text-xs text-muted-foreground ml-8">{cmd.label}</p>
+                  )}
+                  <div className="ml-8 relative">
+                    <pre className="bg-muted p-3 rounded-md text-sm overflow-x-auto whitespace-pre-wrap break-all">
+                      <code>{cmd.command}</code>
+                    </pre>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="absolute top-2 right-2"
+                      onClick={() => copyToClipboard(cmd.command)}
+                    >
+                      <Copy className="h-4 w-4 mr-1" />
+                      Copy
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+
+        <div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-md p-4">
+          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">Prerequisites:</h4>
+          <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1 list-disc list-inside mb-3">
+            <li>Ensure you have root/sudo access on the target server</li>
+            <li>Make sure wget or curl is installed for downloading files</li>
+            <li>Internet connection required for downloading packages</li>
+          </ul>
+
+          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">After Installation:</h4>
+          <p className="text-sm text-blue-800 dark:text-blue-200">
+            The agent will start automatically and appear in your dashboard within a few minutes.
+          </p>
+        </div>
+
+        <div className="flex justify-end pt-4">
+          <Button onClick={onDialogClose}>
+            {t('done')}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

application/src/components/regional-monitoring/RegionalMonitoringContent.tsx

@@ -9,8 +9,10 @@ import { RegionalService } from "@/types/regional.types";
 import { AddRegionalAgentDialog } from "./AddRegionalAgentDialog";
 import { RegionalAgentCard } from "./RegionalAgentCard";
 import { useToast } from "@/hooks/use-toast";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 export const RegionalMonitoringContent = () => {
+  const { t } = useLanguage();
   const [addDialogOpen, setAddDialogOpen] = useState(false);
   const { toast } = useToast();
   const queryClient = useQueryClient();
@@ -24,8 +26,8 @@ export const RegionalMonitoringContent = () => {
   const handleAgentAdded = () => {
     queryClient.invalidateQueries({ queryKey: ['regional-services'] });
     toast({
-      title: "Regional Agent Added",
+      title: t('regionalAgentAdded'),
-      description: "The regional monitoring agent has been successfully configured.",
+      description: t('regionalAgentAddedDesc'),
     });
   };
 
@@ -34,13 +36,13 @@ export const RegionalMonitoringContent = () => {
       await regionalService.deleteRegionalService(id);
       queryClient.invalidateQueries({ queryKey: ['regional-services'] });
       toast({
-        title: "Agent Removed",
+        title: t('agentRemoved'),
-        description: "The regional monitoring agent has been removed.",
+        description: t('agentRemovedDesc'),
       });
     } catch (error) {
       toast({
-        title: "Error",
+        title: t('error'),
-        description: "Failed to remove the regional monitoring agent.",
+        description: t('failedToRemoveAgent'),
         variant: "destructive",
       });
     }
@@ -53,14 +55,14 @@ export const RegionalMonitoringContent = () => {
     <div className="p-6 space-y-6">
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-3xl font-bold tracking-tight">Regional Monitoring</h1>
+          <h1 className="text-3xl font-bold tracking-tight">{t('regionalmonitoring')}</h1>
           <p className="text-muted-foreground">
-            Manage distributed monitoring agents across different regions
+            {t('descriptRegionPage')}
           </p>
         </div>
         <Button onClick={() => setAddDialogOpen(true)}>
           <Plus className="mr-2 h-4 w-4" />
-          Add Regional Agent
+          {t('addRegionalAgent')}
         </Button>
       </div>
 
@@ -68,39 +70,39 @@ export const RegionalMonitoringContent = () => {
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Agents</CardTitle>
+            <CardTitle className="text-sm font-medium">{t('totalAgents')}</CardTitle>
             <MapPin className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">{totalAgents}</div>
             <p className="text-xs text-muted-foreground">
-              Regional monitoring agents
+              {t('regionalMonitoringAgents')}
             </p>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Online Agents</CardTitle>
+            <CardTitle className="text-sm font-medium">{t('onlineAgents')}</CardTitle>
             <Wifi className="h-4 w-4 text-green-600" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold text-green-600">{onlineAgents}</div>
             <p className="text-xs text-muted-foreground">
-              Currently connected
+              {t('currentlyConnected')}
             </p>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Offline Agents</CardTitle>
+            <CardTitle className="text-sm font-medium">{t('offlineAgents')}</CardTitle>
             <WifiOff className="h-4 w-4 text-red-600" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold text-red-600">{totalAgents - onlineAgents}</div>
             <p className="text-xs text-muted-foreground">
-              Disconnected agents
+              {t('disconnectedAgents')}
             </p>
           </CardContent>
         </Card>
@@ -108,7 +110,7 @@ export const RegionalMonitoringContent = () => {
 
       {/* Agents List */}
       <div className="space-y-4">
-        <h2 className="text-xl font-semibold">Regional Agents</h2>
+        <h2 className="text-xl font-semibold">{t('regionalAgents')}</h2>
         
         {isLoading ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -131,13 +133,13 @@ export const RegionalMonitoringContent = () => {
           <Card>
             <CardContent className="flex flex-col items-center justify-center py-12">
               <MapPin className="h-12 w-12 text-muted-foreground mb-4" />
-              <h3 className="text-lg font-semibold mb-2">No Regional Agents</h3>
+              <h3 className="text-lg font-semibold mb-2">{t('noRegionalAgents')}</h3>
               <p className="text-muted-foreground text-center mb-4">
-                Get started by adding your first regional monitoring agent to extend your monitoring coverage.
+                {t('getStartedAddAgent')}
               </p>
               <Button onClick={() => setAddDialogOpen(true)}>
                 <Plus className="mr-2 h-4 w-4" />
-                Add First Agent
+                {t('addFirstAgent')}
               </Button>
             </CardContent>
           </Card>

application/src/components/regional-monitoring/RegionalOneClickTab.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Copy, Download, Zap, Play } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { copyToClipboard } from "@/utils/copyUtils";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { useToast } from "@/hooks/use-toast";
+
+interface RegionalOneClickTabProps {
+  agentToken: string;
+  currentPocketBaseUrl: string;
+  formData: {
+    regionName: string;
+    agentIp: string;
+  };
+  agentId: string;
+  onDialogClose: () => void;
+}
+
+export const RegionalOneClickTab: React.FC<RegionalOneClickTabProps> = ({
+  agentToken,
+  currentPocketBaseUrl,
+  formData,
+  agentId,
+  onDialogClose,
+}) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+
+  const getOneClickCommand = () => {
+    return `curl -fsSL https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/install-regional-agent.sh | sudo bash -s -- \\
+  --region-name="${formData.regionName}" \\
+  --agent-id="${agentId}" \\
+  --agent-ip="${formData.agentIp}" \\
+  --token="${agentToken}" \\
+  --pocketbase-url="${currentPocketBaseUrl}"`;
+  };
+
+  const downloadScript = () => {
+    const scriptContent = getOneClickCommand();
+    const blob = new Blob([scriptContent], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `install-regional-agent-${agentId}.sh`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    toast({
+      title: t('downloaded'),
+      description: t('downloadedDescription'),
+    });
+  };
+
+  return (
+    <Card className="border-green-500/20 bg-green-50/50 dark:bg-green-950/20">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-green-700 dark:text-green-400">
+          <Zap className="h-5 w-5" />
+          {t('oneClickAutomaticInstallation')}
+        </CardTitle>
+        <CardDescription className="text-green-600 dark:text-green-300">
+          {t('completeInstallationDescription')}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4 dark:bg-green-950/50 dark:border-green-800">
+          <div className="flex items-center gap-2 text-green-800 dark:text-green-200 font-medium mb-2">
+            <Play className="h-4 w-4" />
+            {t('whatThisScriptDoes')}
+          </div>
+          <ul className="text-sm text-green-700 dark:text-green-300 space-y-1 ml-6">
+            <li>• {t('scriptActionDownload')}</li>
+            <li>• {t('scriptActionInstall')}</li>
+            <li>• {t('scriptActionConfigure')}</li>
+            <li>• {t('scriptActionStart')}</li>
+            <li>• {t('scriptActionHealthChecks')}</li>
+          </ul>
+        </div>
+
+        <div className="space-y-2">
+          <Label className="text-green-700 dark:text-green-400">{t('runCommandOnServer')}</Label>
+          <div className="relative">
+            <Textarea
+              readOnly
+              value={getOneClickCommand()}
+              className="font-mono text-sm min-h-[120px] pr-12 bg-muted/50 border-green-200 dark:border-green-800"
+            />
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              className="absolute top-2 right-2 bg-green-50 dark:bg-green-950/50 border-green-200 dark:border-green-800 hover:bg-green-100 dark:hover:bg-green-900"
+              onClick={() => copyToClipboard(getOneClickCommand())}
+            >
+              <Copy className="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <Button onClick={downloadScript} variant="outline" className="flex-1">
+            <Download className="mr-2 h-4 w-4" />
+            {t('downloadCompleteScript')}
+          </Button>
+        </div>
+
+        {(window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') && (
+          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 dark:bg-yellow-950/20 dark:border-yellow-800">
+            <p className="text-sm text-yellow-800 dark:text-yellow-200" dangerouslySetInnerHTML={{ __html: t('localDevelopmentNotice') }} />
+          </div>
+        )}
+
+        <div className="flex justify-end pt-4">
+          <Button onClick={onDialogClose}>
+            {t('done')}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailContent.tsx

@@ -25,19 +25,20 @@ export const IncidentDetailContent = ({
   onClose, 
   assignedUser 
 }: IncidentDetailContentProps) => {
-  // Fetch assigned user details if one wasn't provided and there's an assigned_to field
+  // Fetch assigned user details if none was provided; prefer server field
+  const assigneeId = incident?.assigned_users || incident?.assigned_to;
   const { data: fetchedUser } = useQuery({
-    queryKey: ['user', incident?.assigned_to],
+    queryKey: ['user', assigneeId],
     queryFn: async () => {
-      if (!incident?.assigned_to) return null;
+      if (!assigneeId) return null;
       try {
-        return await userService.getUser(incident.assigned_to);
+        return await userService.getUser(assigneeId);
       } catch (error) {
         console.error("Failed to fetch assigned user:", error);
         return null;
       }
     },
-    enabled: !!incident?.assigned_to && !assignedUser,
+    enabled: !!assigneeId && !assignedUser,
     staleTime: 300000 // Cache for 5 minutes
   });
 

application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailDialog.tsx

@@ -17,7 +17,7 @@ export const IncidentDetailDialog = ({
   onOpenChange, 
   incident 
 }: IncidentDetailDialogProps) => {
-  // Fetch user data for assigned_to field
+  // Fetch user data for assigned field (prefer assigned_users, fallback to assigned_to)
   const { data: users = [] } = useQuery({
     queryKey: ['users'],
     queryFn: async () => {
@@ -25,12 +25,12 @@ export const IncidentDetailDialog = ({
       return Array.isArray(usersList) ? usersList : [];
     },
     staleTime: 300000, // Cache for 5 minutes
-    enabled: !!incident?.assigned_to && open // Only run query if there's an assigned_to value and dialog is open
+    enabled: !!(incident?.assigned_users || incident?.assigned_to) && open // Only run query if there's an assigned value and dialog is open
   });
 
-  // Find the assigned user
+  // Find the assigned user (prefer assigned_users, fallback to assigned_to)
-  const assignedUser = incident?.assigned_to 
+  const assignedUser = (incident?.assigned_users || incident?.assigned_to)
-    ? users.find(user => user.id === incident.assigned_to) 
+    ? users.find(user => user.id === (incident?.assigned_users || incident?.assigned_to)) 
     : null;
   
   if (!incident) return null;

application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailSections.tsx

@@ -23,19 +23,19 @@ export {
 
 // Legacy component - keeping this for backward compatibility with other imports
 export const IncidentDetailSections = ({ incident }: { incident: IncidentItem | null }) => {
-  // Fetch assigned user details if there's an assigned_to field
+  // Fetch assigned user details if there's an assigned field (prefer assigned_users, fallback to assigned_to)
   const { data: assignedUser } = useQuery({
-    queryKey: ['user', incident?.assigned_to],
+    queryKey: ['user', incident?.assigned_users || incident?.assigned_to],
     queryFn: async () => {
-      if (!incident?.assigned_to) return null;
+      if (!(incident?.assigned_users || incident?.assigned_to)) return null;
       try {
-        return await userService.getUser(incident.assigned_to);
+        return await userService.getUser(incident?.assigned_users || incident?.assigned_to);
       } catch (error) {
         console.error("Failed to fetch assigned user:", error);
         return null;
       }
     },
-    enabled: !!incident?.assigned_to,
+    enabled: !!(incident?.assigned_users || incident?.assigned_to),
     staleTime: 300000 // Cache for 5 minutes
   });
 

application/src/components/schedule-incident/incident/detail-dialog/sections/AssignmentSection.tsx

@@ -31,8 +31,8 @@ export const AssignmentSection: React.FC<AssignmentSectionProps> = ({ incident,
               </Avatar>
               <span>{assignedUser.full_name || assignedUser.username}</span>
             </div>
-          ) : incident.assigned_to ? (
+          ) : (incident.assigned_users || incident.assigned_to) ? (
-            <span>{incident.assigned_to}</span>
+           <span>{incident.assigned_users || incident.assigned_to}</span>
           ) : (
             <span className="text-muted-foreground italic">{t('unassigned')}</span>
           )}

application/src/components/schedule-incident/incident/detail-dialog/sections/BasicInfoSection.tsx

@@ -50,8 +50,8 @@ export const BasicInfoSection: React.FC<BasicInfoSectionProps> = ({ incident, as
                 </Avatar>
                 <span>{assignedUser.full_name || assignedUser.username}</span>
               </div>
-            ) : incident.assigned_to ? (
+            ) : (incident.assigned_users || incident.assigned_to) ? (
-              <span>{incident.assigned_to}</span>
+              <span>{incident.assigned_users || incident.assigned_to}</span>
             ) : (
               <span className="text-muted-foreground italic">{t('unassigned')}</span>
             )}

application/src/components/schedule-incident/incident/form/IncidentBasicFields.tsx

@@ -68,7 +68,7 @@ export const IncidentBasicFields: React.FC = () => {
   const selectedUser = users.find(user => user.id === form.getValues('assigned_to'));
 
   // Function to get user initials from name
-  const getUserInitials = (user: any): string => {
+  const getUserInitials = (user: { full_name?: string; username: string }): string => {
     if (user.full_name) {
       const nameParts = user.full_name.split(' ');
       if (nameParts.length > 1) {

application/src/components/schedule-incident/incident/hooks/useIncidentEditForm.ts

@@ -25,7 +25,7 @@ export const useIncidentEditForm = (
       impact: (incident.impact?.toLowerCase() || 'minor') as any,
       priority: (incident.priority?.toLowerCase() || 'medium') as any,
       service_id: incident.service_id || '',
-      assigned_to: incident.assigned_to || '',
+      assigned_to: incident.assigned_users || incident.assigned_to || '',
       root_cause: incident.root_cause || '',
       resolution_steps: incident.resolution_steps || '',
       lessons_learned: incident.lessons_learned || '',
@@ -45,11 +45,14 @@ export const useIncidentEditForm = (
         impact: data.impact,
         priority: data.priority,
         service_id: data.service_id,
-        assigned_to: data.assigned_to, // This is the user ID from the form
+        ...(data.assigned_to
+          ? { assigned_to: data.assigned_to, assigned_users: data.assigned_to }
+          : {}),
         root_cause: data.root_cause,
         resolution_steps: data.resolution_steps,
         lessons_learned: data.lessons_learned,
       });
+
       
       toast({
         title: t('incidentUpdated'),

application/src/components/schedule-incident/incident/hooks/useIncidentForm.ts

@@ -57,6 +57,7 @@ export const useIncidentForm = (onSuccess: () => void, onClose: () => void) => {
         priority: data.priority,
         service_id: data.service_id,
         assigned_to: data.assigned_to,
+        assigned_users: data.assigned_to, // map to server field
         root_cause: data.root_cause,
         resolution_steps: data.resolution_steps,
         lessons_learned: data.lessons_learned,

application/src/components/schedule-incident/incident/table/IncidentTableRow.tsx

@@ -86,7 +86,7 @@ export const IncidentTableRow = memo(({
         </Badge>
       </TableCell>
       <TableCell>
-        <AssignedUserCell userId={localItem.assigned_to} />
+        <AssignedUserCell userId={localItem.assigned_users || localItem.assigned_to} />
       </TableCell>
       <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
         <div className="flex justify-end items-center space-x-2">

application/src/components/servers/AddServerAgentDialog.tsx

@@ -14,7 +14,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { getCurrentEndpoint } from "@/lib/pocketbase";
 import { ServerAgentConfigForm } from "./ServerAgentConfigForm";
 import { OneClickInstallTab } from "./OneClickInstallTab";
+import { DockerOneClickTab } from "./DockerOneClickTab";
 import { ManualInstallTab } from "./ManualInstallTab";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface AddServerAgentDialogProps {
   open: boolean;
@@ -27,15 +29,13 @@ export const AddServerAgentDialog: React.FC<AddServerAgentDialogProps> = ({
   onOpenChange,
   onAgentAdded,
 }) => {
+  const { t } = useLanguage();
   const { toast } = useToast();
   const queryClient = useQueryClient();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [activeTab, setActiveTab] = useState("configure");
 
-  // Get current PocketBase URL
   const currentPocketBaseUrl = getCurrentEndpoint();
-
-  // Form state
   const [formData, setFormData] = useState({
     serverName: "",
     description: "",
@@ -46,23 +46,46 @@ export const AddServerAgentDialog: React.FC<AddServerAgentDialogProps> = ({
     notificationEnabled: true,
   });
 
-  // Generated server token and agent ID
+  const generateNewCredentials = () => ({
-  const [serverToken] = useState(() => 
+    serverToken: `srv_${Math.random().toString(36).substring(2, 15)}${Math.random().toString(36).substring(2, 15)}`,
+    serverId: `agent_${Math.random().toString(36).substring(2, 15)}${Math.random().toString(36).substring(2, 15)}`
+  });
+
+  const [serverToken, setServerToken] = useState(() =>
     `srv_${Math.random().toString(36).substring(2, 15)}${Math.random().toString(36).substring(2, 15)}`
   );
-  
+
-  const [serverId] = useState(() => 
+  const [serverId, setServerId] = useState(() =>
     `agent_${Math.random().toString(36).substring(2, 15)}${Math.random().toString(36).substring(2, 15)}`
   );
 
+  // Refresh credentials and reset form whenever the dialog opens
+  React.useEffect(() => {
+    if (open) {
+      const newCredentials = generateNewCredentials();
+      setServerToken(newCredentials.serverToken);
+      setServerId(newCredentials.serverId);
+      setActiveTab("configure");
+      setFormData({
+        serverName: "",
+        description: "",
+        osType: "",
+        checkInterval: "60",
+        retryAttempt: "3",
+        dockerEnabled: false,
+        notificationEnabled: true,
+      });
+    }
+  }, [open]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (isSubmitting) return;
 
     if (!formData.serverName || !formData.osType) {
       toast({
-        title: "Validation Error",
+        title: t('validationError'),
-        description: "Please fill in all required fields.",
+        description: t('fillRequiredFields'),
         variant: "destructive",
       });
       return;
@@ -71,22 +94,18 @@ export const AddServerAgentDialog: React.FC<AddServerAgentDialogProps> = ({
     setIsSubmitting(true);
 
     try {
-      // Here you would typically create the server monitoring configuration
-      // For now, we'll simulate the process
       await new Promise(resolve => setTimeout(resolve, 1500));
 
       toast({
-        title: "Server Agent Created",
+        title: t('serverAgentCreated'),
-        description: `${formData.serverName} monitoring agent has been configured successfully.`,
+        description: t('serverAgentCreatedDesc').replace('{name}', formData.serverName),
       });
-
-      // Switch to one-click install tab after successful creation
       setActiveTab("one-click");
       onAgentAdded();
     } catch (error) {
       toast({
-        title: "Error",
+        title: t('error'),
-        description: "Failed to create server monitoring agent.",
+        description: t('failedToCreateAgent'),
         variant: "destructive",
       });
     } finally {
@@ -95,17 +114,6 @@ export const AddServerAgentDialog: React.FC<AddServerAgentDialogProps> = ({
   };
 
   const handleDialogClose = () => {
-    // Reset form and tab when dialog closes
-    setActiveTab("configure");
-    setFormData({
-      serverName: "",
-      description: "",
-      osType: "",
-      checkInterval: "60",
-      retryAttempt: "3",
-      dockerEnabled: false,
-      notificationEnabled: true,
-    });
     onOpenChange(false);
   };
 
@@ -115,18 +123,19 @@ export const AddServerAgentDialog: React.FC<AddServerAgentDialogProps> = ({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Server className="h-5 w-5" />
-            Add Server Monitoring Agent
+            {t('addServerMonitoringAgent')}
           </DialogTitle>
           <DialogDescription>
-            Configure a new server monitoring agent to track system metrics and performance.
+            {t('configureAgentDesc')}
           </DialogDescription>
         </DialogHeader>
 
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="grid w-full grid-cols-3">
+          <TabsList className="grid w-full grid-cols-4">
-            <TabsTrigger value="configure">Configure Agent</TabsTrigger>
+            <TabsTrigger value="configure">{t('configureAgent')}</TabsTrigger>
-            <TabsTrigger value="one-click">One-Click Install</TabsTrigger>
+            <TabsTrigger value="one-click">{t('oneClickInstall')}</TabsTrigger>
-            <TabsTrigger value="manual">Manual Installation</TabsTrigger>
+            <TabsTrigger value="docker-one-click">{t('dockerOneClick')}</TabsTrigger>
+            <TabsTrigger value="manual">{t('manualInstallation')}</TabsTrigger>
           </TabsList>
 
           <TabsContent value="configure" className="space-y-6">
@@ -151,6 +160,16 @@ export const AddServerAgentDialog: React.FC<AddServerAgentDialogProps> = ({
             />
           </TabsContent>
 
+          <TabsContent value="docker-one-click" className="space-y-6">
+            <DockerOneClickTab
+              serverToken={serverToken}
+              currentPocketBaseUrl={currentPocketBaseUrl}
+              formData={formData}
+              serverId={serverId}
+              onDialogClose={handleDialogClose}
+            />
+          </TabsContent>
+
           <TabsContent value="manual" className="space-y-6">
             <ManualInstallTab
               serverToken={serverToken}

application/src/components/servers/DockerOneClickTab.tsx

@@ -0,0 +1,178 @@
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Copy, Download, Container } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { copyToClipboard } from "@/utils/copyUtils";
+import { useLanguage } from "@/contexts/LanguageContext";
+
+interface DockerOneClickTabProps {
+  serverToken: string;
+  currentPocketBaseUrl: string;
+  formData: {
+    serverName: string;
+    osType: string;
+    checkInterval: string;
+    retryAttempt: string;
+  };
+  serverId: string;
+  onDialogClose: () => void;
+}
+
+export const DockerOneClickTab: React.FC<DockerOneClickTabProps> = ({
+  serverToken,
+  currentPocketBaseUrl,
+  formData,
+  serverId,
+  onDialogClose,
+}) => {
+  const { t } = useLanguage();
+  const getDockerOneClickCommand = () => {
+    const scriptUrl = "https://cdn.checkcle.io/scripts/server-docker-agent.sh";
+
+    return `curl -L -o server-docker-agent.sh "${scriptUrl}"
+chmod +x server-docker-agent.sh
+SERVER_TOKEN="${serverToken}" \\
+POCKETBASE_URL="${currentPocketBaseUrl}" \\
+SERVER_NAME="${formData.serverName}" \\
+AGENT_ID="${serverId}" \\
+sudo -E bash ./server-docker-agent.sh`;
+  };
+
+  const getDirectDockerCommand = () => {
+    return `docker run -d \\
+  --name monitoring-agent \\
+  --restart unless-stopped \\
+  -p 8081:8081 \\
+  --group-add 999 \\
+  -e AGENT_ID="${serverId}" \\
+  -e SERVER_NAME="${formData.serverName}" \\
+  -e SERVER_TOKEN="${serverToken}" \\
+  -e POCKETBASE_URL="${currentPocketBaseUrl}" \\
+  -e POCKETBASE_ENABLED=true \\
+  -v /proc:/host/proc:ro \\
+  -v /etc:/host/etc:ro \\
+  -v /sys:/host/sys:ro \\
+  -v /:/host/root:ro \\
+  -v /var/run:/host/var/run:ro \\
+  -v /dev:/host/dev:ro \\
+  -v /var/run/docker.sock:/var/run/docker.sock:ro \\
+  -v monitoring_data:/var/lib/monitoring-agent \\
+  -v monitoring_logs:/var/log/monitoring-agent \\
+  operacle/checkcle-server-agent:latest`;
+  };
+
+  const handleCopyOneClickCommand = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  //  console.log('Copy one-click command button clicked');
+    const command = getDockerOneClickCommand();
+  //  console.log('Copying one-click command:', command);
+    await copyToClipboard(command);
+  };
+
+  const handleCopyDockerCommand = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+   // console.log('Copy docker command button clicked');
+    const command = getDirectDockerCommand();
+  //  console.log('Copying docker command:', command);
+    await copyToClipboard(command);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* One-Click Docker Installation */}
+      <Card className="border-blue-500/20 bg-blue-50/50 dark:bg-blue-950/20">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-blue-700 dark:text-blue-400">
+            <Container className="h-5 w-5" />
+            {t('dockerOneClickTitle')}
+          </CardTitle>
+          <CardDescription className="text-blue-600 dark:text-blue-300">
+            {t('dockerOneClickDesc')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label className="text-blue-700 dark:text-blue-400">{t('dockerOneClickCommand')}</Label>
+            <div className="relative">
+              <pre className="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 p-4 rounded-md text-sm overflow-x-auto whitespace-pre-wrap break-all text-blue-800 dark:text-blue-200">
+                <code>{getDockerOneClickCommand()}</code>
+              </pre>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="absolute top-2 right-2 bg-blue-50 dark:bg-blue-950/50 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900 text-blue-700 dark:text-blue-400"
+                onClick={handleCopyOneClickCommand}
+              >
+                <Copy className="h-4 w-4 mr-1" />
+                {t('copy')}
+              </Button>
+            </div>
+          </div>
+          
+          <div className="text-sm text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 p-3 rounded-md">
+            <p className="font-medium mb-1">{t('dockerScriptWill')}</p>
+            <ol className="list-decimal list-inside space-y-1 text-xs">
+              <li>{t('dockerScriptStep1')}</li>
+              <li>{t('dockerScriptStep2')}</li>
+              <li>{t('dockerScriptStep3')}</li>
+              <li>{t('dockerScriptStep4')}</li>
+            </ol>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Direct Docker Run Command */}
+      <Card className="border-gray-500/20">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Container className="h-5 w-5" />
+            {t('directDockerTitle')}
+          </CardTitle>
+          <CardDescription>
+            {t('directDockerDesc')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label>{t('dockerRunCommand')}</Label>
+            <div className="relative">
+              <pre className="bg-muted border p-4 rounded-md text-sm overflow-x-auto whitespace-pre-wrap break-all">
+                <code>{getDirectDockerCommand()}</code>
+              </pre>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="absolute top-2 right-2"
+                onClick={handleCopyDockerCommand}
+              >
+                <Copy className="h-4 w-4 mr-1" />
+                {t('copy')}
+              </Button>
+            </div>
+          </div>
+
+          <div className="text-sm text-muted-foreground bg-muted/50 border p-3 rounded-md">
+            <p className="font-medium mb-1">{t('dockerPrerequisites')}</p>
+            <ol className="list-decimal list-inside space-y-1 text-xs">
+              <li>{t('dockerPrereqStep1')}</li>
+              <li>{t('dockerPrereqStep2')}</li>
+              <li>{t('dockerPrereqStep3')}</li>
+            </ol>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end pt-4">
+        <Button onClick={onDialogClose}>
+          {t('done')}
+        </Button>
+      </div>
+    </div>
+  );
+};

application/src/components/servers/EditServerDialog.tsx

@@ -12,8 +12,9 @@ import { pb } from "@/lib/pocketbase";
 import { Server } from "@/types/server.types";
 import { RefreshCw, X } from "lucide-react";
 import { alertConfigService, AlertConfiguration } from "@/services/alertConfigService";
-import { templateService, NotificationTemplate } from "@/services/templateService";
+import { templateService, ServerNotificationTemplate } from "@/services/templateService";
 import { serverThresholdService, ServerThreshold } from "@/services/serverThresholdService";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface EditServerDialogProps {
   server: Server | null;
@@ -25,7 +26,7 @@ interface EditServerDialogProps {
 interface ServerFormData {
   name: string;
   check_interval: number;
-  retry_attempts: number;
+  max_retries: number;
   docker_monitoring: boolean;
   notification_enabled: boolean;
   notification_channels: string[]; // Changed to array for multiple selections
@@ -46,10 +47,11 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
   onOpenChange,
   onServerUpdated,
 }) => {
+  const { t } = useLanguage();
   const [formData, setFormData] = useState<ServerFormData>({
     name: "",
     check_interval: 60,
-    retry_attempts: 3,
+    max_retries: 3,
     docker_monitoring: false,
     notification_enabled: false,
     notification_channels: [], // Changed to array
@@ -66,9 +68,9 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
   
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [alertConfigs, setAlertConfigs] = useState<AlertConfiguration[]>([]);
-  const [templates, setTemplates] = useState<NotificationTemplate[]>([]);
+  const [templates, setTemplates] = useState<ServerNotificationTemplate[]>([]);
   const [thresholds, setThresholds] = useState<ServerThreshold[]>([]);
-  const [selectedTemplate, setSelectedTemplate] = useState<NotificationTemplate | null>(null);
+  const [selectedTemplate, setSelectedTemplate] = useState<ServerNotificationTemplate | null>(null);
   const [selectedThreshold, setSelectedThreshold] = useState<ServerThreshold | null>(null);
   const [loadingAlertConfigs, setLoadingAlertConfigs] = useState(false);
   const [loadingTemplates, setLoadingTemplates] = useState(false);
@@ -78,7 +80,6 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
   // Initialize form data when server changes
   useEffect(() => {
     if (server) {
-    //  console.log("Setting form data for server:", server);
       // Parse comma-separated notification_id into array
       const notificationChannels = server.notification_id 
         ? server.notification_id.split(',').map(id => id.trim()).filter(id => id)
@@ -87,9 +88,9 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
       setFormData({
         name: server.name || "",
         check_interval: server.check_interval || 60,
-        retry_attempts: 3,
+        max_retries: server.max_retries || 3,
         docker_monitoring: server.docker === "true",
-        notification_enabled: notificationChannels.length > 0,
+        notification_enabled: server.notification_status === true,
         notification_channels: notificationChannels,
         threshold_id: server.threshold_id || "none",
         template_id: server.template_id || "none",
@@ -109,15 +110,13 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
   // Load existing threshold data when thresholds are loaded and we have a server with threshold_id
   useEffect(() => {
     if (server && server.threshold_id && thresholds.length > 0) {
-    //  console.log("Loading existing threshold data for server:", server.threshold_id);
       const existingThreshold = thresholds.find(t => t.id === server.threshold_id);
       if (existingThreshold) {
-      //  console.log("Found existing threshold:", existingThreshold);
         setSelectedThreshold(existingThreshold);
         // Handle the API response format with proper field names and type conversion
         setThresholdFormData({
           cpu_threshold: parseInt(String(existingThreshold.cpu_threshold)) || 80,
-          ram_threshold: parseInt(String((existingThreshold as any).ram_threshold_message || existingThreshold.ram_threshold)) || 80,
+          ram_threshold: parseInt(String((existingThreshold.ram_threshold_message ?? existingThreshold.ram_threshold))) || 80,
           disk_threshold: parseInt(String(existingThreshold.disk_threshold)) || 80,
           network_threshold: parseInt(String(existingThreshold.network_threshold)) || 80,
         });
@@ -144,7 +143,7 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
         // Handle the API response format with proper field names and type conversion
         setThresholdFormData({
           cpu_threshold: parseInt(String(threshold.cpu_threshold)) || 80,
-          ram_threshold: parseInt(String((threshold as any).ram_threshold_message || threshold.ram_threshold)) || 80,
+          ram_threshold: parseInt(String((threshold.ram_threshold_message ?? threshold.ram_threshold))) || 80,
           disk_threshold: parseInt(String(threshold.disk_threshold)) || 80,
           network_threshold: parseInt(String(threshold.network_threshold)) || 80,
         });
@@ -166,11 +165,10 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
       const configs = await alertConfigService.getAlertConfigurations();
       setAlertConfigs(configs);
     } catch (error) {
-    //  console.error('Error loading alert configurations:', error);
       toast({
         variant: "destructive",
-        title: "Error",
+        title: t('error', 'instance'),
-        description: "Failed to load notification channels",
+        description: t('failedToLoadChannels', 'instance'),
       });
     } finally {
       setLoadingAlertConfigs(false);
@@ -180,14 +178,14 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
   const loadTemplates = async () => {
     try {
       setLoadingTemplates(true);
-      const templateList = await templateService.getTemplates();
+      const templateList = await templateService.getTemplates('server');
-      setTemplates(templateList);
+      // Cast to ServerNotificationTemplate[] since we know we're getting server templates
+      setTemplates(templateList as ServerNotificationTemplate[]);
     } catch (error) {
-    //  console.error('Error loading templates:', error);
       toast({
         variant: "destructive",
-        title: "Error",
+        title: t('error', 'instance'),
-        description: "Failed to load templates",
+        description: t('failedToLoadTemplates', 'instance'),
       });
     } finally {
       setLoadingTemplates(false);
@@ -200,58 +198,16 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
       const thresholdList = await serverThresholdService.getServerThresholds();
       setThresholds(thresholdList);
     } catch (error) {
-     // console.error('Error loading server thresholds:', error);
       toast({
         variant: "destructive",
-        title: "Error",
+        title: t('error', 'instance'),
-        description: "Failed to load server thresholds",
+        description: t('failedToLoadThresholds', 'instance'),
       });
     } finally {
       setLoadingThresholds(false);
     }
   };
 
-  const handleThresholdUpdate = async () => {
-    if (!selectedThreshold) return;
-
-    try {
-      // Use the correct field name for RAM threshold
-      const updateData = {
-        cpu_threshold: thresholdFormData.cpu_threshold,
-        ram_threshold_message: thresholdFormData.ram_threshold, // Use the correct field name
-        disk_threshold: thresholdFormData.disk_threshold,
-        network_threshold: thresholdFormData.network_threshold,
-      };
-
-      await serverThresholdService.updateServerThreshold(selectedThreshold.id, updateData);
-      
-      // Update local state
-      setSelectedThreshold({
-        ...selectedThreshold,
-        ...thresholdFormData,
-      });
-
-      // Update thresholds list
-      setThresholds(prev => prev.map(t => 
-        t.id === selectedThreshold.id 
-          ? { ...t, ...thresholdFormData }
-          : t
-      ));
-
-      toast({
-        title: "Threshold updated",
-        description: "Server threshold values have been updated successfully.",
-      });
-    } catch (error) {
-    //  console.error('Error updating threshold:', error);
-      toast({
-        variant: "destructive",
-        title: "Error",
-        description: "Failed to update threshold values.",
-      });
-    }
-  };
-
   const handleNotificationChannelToggle = (channelId: string, checked: boolean) => {
     setFormData(prev => ({
       ...prev,
@@ -276,36 +232,69 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
       setIsSubmitting(true);
 
       // Convert notification channels array to comma-separated string
-      const notificationChannelsString = formData.notification_enabled 
+      const notificationChannelsString = formData.notification_channels.join(',');
-        ? formData.notification_channels.join(',')
-        : "";
 
       const updateData = {
         name: formData.name,
         check_interval: formData.check_interval,
+        max_retries: formData.max_retries,
         docker: formData.docker_monitoring ? "true" : "false",
+        notification_status: formData.notification_enabled,
         notification_id: notificationChannelsString,
-        threshold_id: formData.notification_enabled && formData.threshold_id !== "none" ? formData.threshold_id : "",
+        threshold_id: formData.threshold_id !== "none" ? formData.threshold_id : "",
-        template_id: formData.notification_enabled && formData.template_id !== "none" ? formData.template_id : "",
+        template_id: formData.template_id !== "none" ? formData.template_id : "",
         updated: new Date().toISOString(),
       };
 
       await pb.collection('servers').update(server.id, updateData);
 
+      // Update threshold if a threshold is selected and values have been modified
+      if (selectedThreshold && formData.threshold_id !== "none") {
+        try {
+          const updateThresholdData = {
+            cpu_threshold: thresholdFormData.cpu_threshold,
+            ram_threshold_message: thresholdFormData.ram_threshold,
+            disk_threshold: thresholdFormData.disk_threshold,
+            network_threshold: thresholdFormData.network_threshold,
+          };
+
+          await serverThresholdService.updateServerThreshold(selectedThreshold.id, updateThresholdData);
+          
+          // Update local state
+          setSelectedThreshold({
+            ...selectedThreshold,
+            ...thresholdFormData,
+          });
+
+          // Update thresholds list
+          setThresholds(prev => prev.map(t => 
+            t.id === selectedThreshold.id 
+              ? { ...t, ...thresholdFormData }
+              : t
+          ));
+
+        } catch (error) {
+          toast({
+            variant: "destructive",
+            title: t('warning', 'instance'),
+            description: t('serverUpdatedButThresholdFailed', 'instance'),
+          });
+        }
+      }
+
       toast({
-        title: "Server updated",
+        title: t('serverUpdated', 'instance'),
-        description: `${formData.name} has been updated successfully.`,
+        description: t('serverUpdatedDesc', 'instance', { name: formData.name }),
       });
 
       onServerUpdated();
       onOpenChange(false);
       
     } catch (error) {
-    //  console.error('Error updating server:', error);
       toast({
         variant: "destructive",
-        title: "Error",
+        title: t('error', 'instance'),
-        description: "Failed to update server. Please try again.",
+        description: t('failedToUpdateServer', 'instance'),
       });
     } finally {
       setIsSubmitting(false);
@@ -321,9 +310,9 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
       setFormData({
         name: server.name || "",
         check_interval: server.check_interval || 60,
-        retry_attempts: 3,
+        max_retries: server.max_retries || 3,
         docker_monitoring: server.docker === "true",
-        notification_enabled: notificationChannels.length > 0,
+        notification_enabled: server.notification_status === true,
         notification_channels: notificationChannels,
         threshold_id: server.threshold_id || "none",
         template_id: server.template_id || "none",
@@ -336,62 +325,62 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>Edit Server Configuration</DialogTitle>
+          <DialogTitle>{t('editServerConfiguration', 'instance')}</DialogTitle>
         </DialogHeader>
         
         <form onSubmit={handleSubmit} className="space-y-6">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div className="space-y-2">
-              <Label htmlFor="serverName">Server Name *</Label>
+              <Label htmlFor="serverName">{t('serverNameLabel', 'instance')}</Label>
               <Input
                 id="serverName"
                 value={formData.name}
                 onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
-                placeholder="Enter server name"
+                placeholder={t('serverNamePlaceholder', 'instance')}
                 required
               />
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="checkInterval">Check Interval</Label>
+              <Label htmlFor="checkInterval">{t('checkIntervalLabel', 'instance')}</Label>
               <Select
                 value={formData.check_interval.toString()}
                 onValueChange={(value) => setFormData(prev => ({ ...prev, check_interval: parseInt(value) }))}
               >
                 <SelectTrigger>
-                  <SelectValue placeholder="Select interval" />
+                  <SelectValue placeholder={t('selectInterval', 'instance')} />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="30">30 seconds</SelectItem>
+                  <SelectItem value="30">{t('interval30s', 'instance')}</SelectItem>
-                  <SelectItem value="60">1 minute</SelectItem>
+                  <SelectItem value="60">{t('interval1m', 'instance')}</SelectItem>
-                  <SelectItem value="120">2 minutes</SelectItem>
+                  <SelectItem value="120">{t('interval2m', 'instance')}</SelectItem>
-                  <SelectItem value="300">5 minutes</SelectItem>
+                  <SelectItem value="300">{t('interval5m', 'instance')}</SelectItem>
-                  <SelectItem value="600">10 minutes</SelectItem>
+                  <SelectItem value="600">{t('interval10m', 'instance')}</SelectItem>
                 </SelectContent>
               </Select>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="retryAttempts">Retry Attempts</Label>
+              <Label htmlFor="maxRetries">{t('maxRetriesLabel', 'instance')}</Label>
               <Select
-                value={formData.retry_attempts.toString()}
+                value={formData.max_retries.toString()}
-                onValueChange={(value) => setFormData(prev => ({ ...prev, retry_attempts: parseInt(value) }))}
+                onValueChange={(value) => setFormData(prev => ({ ...prev, max_retries: parseInt(value) }))}
               >
                 <SelectTrigger>
-                  <SelectValue placeholder="Select retry attempts" />
+                  <SelectValue placeholder={t('selectMaxRetries', 'instance')} />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="1">1 attempt</SelectItem>
+                  <SelectItem value="1">{t('retry1', 'instance')}</SelectItem>
-                  <SelectItem value="2">2 attempts</SelectItem>
+                  <SelectItem value="2">{t('retry2', 'instance')}</SelectItem>
-                  <SelectItem value="3">3 attempts</SelectItem>
+                  <SelectItem value="3">{t('retry3', 'instance')}</SelectItem>
-                  <SelectItem value="5">5 attempts</SelectItem>
+                  <SelectItem value="5">{t('retry5', 'instance')}</SelectItem>
-                  <SelectItem value="10">10 attempts</SelectItem>
+                  <SelectItem value="10">{t('retry10', 'instance')}</SelectItem>
                 </SelectContent>
               </Select>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="dockerMonitoring">Docker Monitoring</Label>
+              <Label htmlFor="dockerMonitoring">{t('dockerMonitoring', 'instance')}</Label>
               <div className="flex items-center space-x-2">
                 <Switch
                   id="dockerMonitoring"
@@ -402,7 +391,7 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
                   }))}
                 />
                 <Label htmlFor="dockerMonitoring" className="text-sm text-muted-foreground">
-                  {formData.docker_monitoring ? "Enabled" : "Disabled"}
+                  {formData.docker_monitoring ? t('enabled', 'instance') : t('disabled', 'instance')}
                 </Label>
               </div>
             </div>
@@ -416,28 +405,26 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
                 checked={formData.notification_enabled}
                 onCheckedChange={(checked) => setFormData(prev => ({ 
                   ...prev, 
-                  notification_enabled: checked,
+                  notification_enabled: checked
-                  notification_channels: checked ? prev.notification_channels : [],
+                  // Remove the automatic clearing of notification_channels, threshold_id, and template_id
-                  threshold_id: checked ? prev.threshold_id : "none",
-                  template_id: checked ? prev.template_id : "none"
                 }))}
               />
-              <Label htmlFor="notificationEnabled">Enable Notifications</Label>
+              <Label htmlFor="notificationEnabled">{t('enableNotifications', 'instance')}</Label>
             </div>
             
             {/* Expanded Notification Settings */}
             {formData.notification_enabled && (
               <Card className="border-l-4 border-l-blue-500">
                 <CardHeader>
-                  <CardTitle className="text-lg">Notification Settings</CardTitle>
+                  <CardTitle className="text-lg">{t('notificationSettings', 'instance')}</CardTitle>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   {/* Multiple Notification Channels Selection */}
                   <div className="space-y-2">
-                    <Label>Notification Channels</Label>
+                    <Label>{t('notificationChannels', 'instance')}</Label>
                     <div className="space-y-2 max-h-40 overflow-y-auto border rounded-md p-3">
                       {loadingAlertConfigs ? (
-                        <div className="text-sm text-muted-foreground">Loading channels...</div>
+                        <div className="text-sm text-muted-foreground">{t('loadingChannels', 'instance')}</div>
                       ) : alertConfigs.length > 0 ? (
                         alertConfigs.map((config) => (
                           <div key={config.id} className="flex items-center space-x-2">
@@ -457,14 +444,14 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
                           </div>
                         ))
                       ) : (
-                        <div className="text-sm text-muted-foreground">No notification channels available</div>
+                        <div className="text-sm text-muted-foreground">{t('noChannelsAvailable', 'instance')}</div>
                       )}
                     </div>
                     
                     {/* Selected Channels Display */}
                     {formData.notification_channels.length > 0 && (
                       <div className="space-y-2">
-                        <Label className="text-sm font-medium">Selected Channels:</Label>
+                        <Label className="text-sm font-medium">{t('selectedChannels', 'instance')}</Label>
                         <div className="flex flex-wrap gap-2">
                           {formData.notification_channels.map((channelId) => {
                             const channel = alertConfigs.find(c => c.id === channelId);
@@ -493,17 +480,17 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
 
                   {/* Server Set Threshold Selection */}
                   <div className="space-y-2">
-                    <Label htmlFor="thresholdId">Server Set Threshold</Label>
+                    <Label htmlFor="thresholdId">{t('serverSetThreshold', 'instance')}</Label>
                     <Select
                       value={formData.threshold_id}
                       onValueChange={(value) => setFormData(prev => ({ ...prev, threshold_id: value }))}
                       disabled={loadingThresholds}
                     >
                       <SelectTrigger>
-                        <SelectValue placeholder={loadingThresholds ? "Loading thresholds..." : "Select server threshold"} />
+                        <SelectValue placeholder={loadingThresholds ? t('loadingThresholds', 'instance') : t('selectServerThreshold', 'instance')} />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="none">No threshold (use default)</SelectItem>
+                        <SelectItem value="none">{t('noThreshold', 'instance')}</SelectItem>
                         {thresholds.map((threshold) => (
                           <SelectItem key={threshold.id} value={threshold.id}>
                             {threshold.name}
@@ -516,21 +503,13 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
                   {/* Editable Threshold Details */}
                   {selectedThreshold && (
                     <Card className="bg-muted/50">
-                      <CardHeader className="flex flex-row items-center justify-between">
+                      <CardHeader>
-                        <CardTitle className="text-base">Threshold Details: {selectedThreshold.name}</CardTitle>
+                        <CardTitle className="text-base">{t('thresholdDetails', 'instance')}: {selectedThreshold.name}</CardTitle>
-                        <Button 
-                          type="button"
-                          onClick={handleThresholdUpdate}
-                          size="sm"
-                          variant="outline"
-                        >
-                          Update Thresholds
-                        </Button>
                       </CardHeader>
                       <CardContent className="space-y-3">
                         <div className="grid grid-cols-2 gap-3 text-sm">
                           <div>
-                            <Label className="text-xs font-medium text-muted-foreground">CPU Threshold (%)</Label>
+                            <Label className="text-xs font-medium text-muted-foreground">{t('cpuThresholdPct', 'instance')}</Label>
                             <Input
                               type="number"
                               min="0"
@@ -544,7 +523,7 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
                             />
                           </div>
                           <div>
-                            <Label className="text-xs font-medium text-muted-foreground">RAM Threshold (%)</Label>
+                            <Label className="text-xs font-medium text-muted-foreground">{t('ramThresholdPct', 'instance')}</Label>
                             <Input
                               type="number"
                               min="0"
@@ -558,7 +537,7 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
                             />
                           </div>
                           <div>
-                            <Label className="text-xs font-medium text-muted-foreground">Disk Threshold (%)</Label>
+                            <Label className="text-xs font-medium text-muted-foreground">{t('diskThresholdPct', 'instance')}</Label>
                             <Input
                               type="number"
                               min="0"
@@ -572,7 +551,7 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
                             />
                           </div>
                           <div>
-                            <Label className="text-xs font-medium text-muted-foreground">Network Threshold (%)</Label>
+                            <Label className="text-xs font-medium text-muted-foreground">{t('networkThresholdPct', 'instance')}</Label>
                             <Input
                               type="number"
                               min="0"
@@ -592,17 +571,17 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
 
                   {/* Server Template Selection */}
                   <div className="space-y-2">
-                    <Label htmlFor="templateId">Server Template</Label>
+                    <Label htmlFor="templateId">{t('serverTemplate', 'instance')}</Label>
                     <Select
                       value={formData.template_id}
                       onValueChange={(value) => setFormData(prev => ({ ...prev, template_id: value }))}
                       disabled={loadingTemplates}
                     >
                       <SelectTrigger>
-                        <SelectValue placeholder={loadingTemplates ? "Loading templates..." : "Select server template"} />
+                        <SelectValue placeholder={loadingTemplates ? t('loadingTemplates', 'instance') : t('selectServerTemplate', 'instance')} />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="none">No template (use default)</SelectItem>
+                        <SelectItem value="none">{t('noTemplate', 'instance')}</SelectItem>
                         {templates.map((template) => (
                           <SelectItem key={template.id} value={template.id}>
                             {template.name}
@@ -616,32 +595,44 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
                   {selectedTemplate && (
                     <Card className="bg-muted/50">
                       <CardHeader>
-                        <CardTitle className="text-base">Template Details: {selectedTemplate.name}</CardTitle>
+                        <CardTitle className="text-base">{t('templateDetails', 'instance')}: {selectedTemplate.name}</CardTitle>
                       </CardHeader>
                       <CardContent className="space-y-3">
                         <div className="grid grid-cols-1 gap-3 text-sm">
                           <div>
-                            <Label className="text-xs font-medium text-muted-foreground">RAM Threshold Message</Label>
+                            <Label className="text-xs font-medium text-muted-foreground">{t('ramMessage', 'instance')}</Label>
                             <p className="text-sm bg-background p-2 rounded border">
-                              {selectedTemplate.up_message || "No RAM threshold message defined"}
+                              {selectedTemplate.ram_message || t('noMessageDefined', 'instance', { name: 'RAM' })}
                             </p>
                           </div>
                           <div>
-                            <Label className="text-xs font-medium text-muted-foreground">CPU Threshold Message</Label>
+                            <Label className="text-xs font-medium text-muted-foreground">{t('cpuMessage', 'instance')}</Label>
                             <p className="text-sm bg-background p-2 rounded border">
-                              {selectedTemplate.down_message || "No CPU threshold message defined"}
+                              {selectedTemplate.cpu_message || t('noMessageDefined', 'instance', { name: 'CPU' })}
                             </p>
                           </div>
                           <div>
-                            <Label className="text-xs font-medium text-muted-foreground">Disk Threshold Message</Label>
+                            <Label className="text-xs font-medium text-muted-foreground">{t('diskMessage', 'instance')}</Label>
                             <p className="text-sm bg-background p-2 rounded border">
-                              {selectedTemplate.incident_message || "No disk threshold message defined"}
+                              {selectedTemplate.disk_message || t('noMessageDefined', 'instance', { name: 'disk' })}
                             </p>
                           </div>
                           <div>
-                            <Label className="text-xs font-medium text-muted-foreground">Network Threshold Message</Label>
+                            <Label className="text-xs font-medium text-muted-foreground">{t('networkMessage', 'instance')}</Label>
                             <p className="text-sm bg-background p-2 rounded border">
-                              {selectedTemplate.maintenance_message || "No network threshold message defined"}
+                              {selectedTemplate.network_message || t('noMessageDefined', 'instance', { name: 'network' })}
+                            </p>
+                          </div>
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">{t('upMessage', 'instance')}</Label>
+                            <p className="text-sm bg-background p-2 rounded border">
+                              {selectedTemplate.up_message || t('noMessageDefined', 'instance', { name: 'up' })}
+                            </p>
+                          </div>
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">{t('downMessage', 'instance')}</Label>
+                            <p className="text-sm bg-background p-2 rounded border">
+                              {selectedTemplate.down_message || t('noMessageDefined', 'instance', { name: 'down' })}
                             </p>
                           </div>
                         </div>
@@ -660,16 +651,16 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
               onClick={handleCancel}
               disabled={isSubmitting}
             >
-              Cancel
+              {t('cancel', 'instance')}
             </Button>
             <Button type="submit" disabled={isSubmitting}>
               {isSubmitting ? (
                 <>
                   <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
-                  Updating...
+                  {t('updating', 'instance')}
                 </>
               ) : (
-                "Update Server"
+                t('updateServer', 'instance')
               )}
             </Button>
           </div>
@@ -677,4 +668,6 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
       </DialogContent>
     </Dialog>
   );
-};
+};
+
+export default EditServerDialog;

application/src/components/servers/ManualInstallTab.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Copy, Terminal } from "lucide-react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { copyToClipboard } from "@/utils/copyUtils";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface ManualInstallTabProps {
   serverToken: string;
@@ -24,20 +25,22 @@ export const ManualInstallTab: React.FC<ManualInstallTabProps> = ({
   serverId,
   onDialogClose,
 }) => {
+  const { t } = useLanguage();
+
   const getManualInstallSteps = () => {
-    const scriptUrl = "https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/server-agent.sh";
+    const scriptUrl = "https://cdn.checkcle.io/scripts/server-agent.sh";
     
     return [
       {
-        title: "Download the installation script",
+        title: t('downloadScript'),
         command: `curl -L -o server-agent.sh "${scriptUrl}"`
       },
       {
-        title: "Make the script executable",
+        title: t('makeExecutable'),
         command: `chmod +x server-agent.sh`
       },
       {
-        title: "Run the installation with your configuration",
+        title: t('runInstall'),
         command: `SERVER_TOKEN="${serverToken}" POCKETBASE_URL="${currentPocketBaseUrl}" SERVER_NAME="${formData.serverName}" AGENT_ID="${serverId}" sudo bash server-agent.sh`
       }
     ];
@@ -48,26 +51,26 @@ export const ManualInstallTab: React.FC<ManualInstallTabProps> = ({
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Terminal className="h-5 w-5" />
-          Manual Installation Steps
+          {t('manualInstallTitle')}
         </CardTitle>
         <CardDescription>
-          Step-by-step installation process
+          {t('manualInstallDesc')}
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="space-y-2">
           <div className="grid grid-cols-2 gap-4 text-sm">
             <div>
-              <span className="font-medium">Server Name:</span> {formData.serverName}
+              <span className="font-medium">{t('serverName')}:</span> {formData.serverName}
             </div>
             <div>
-              <span className="font-medium">Agent ID:</span> {serverId}
+              <span className="font-medium">{t('agentId')}:</span> {serverId}
             </div>
             <div>
-              <span className="font-medium">OS Type:</span> {formData.osType}
+              <span className="font-medium">{t('osType')}:</span> {formData.osType}
             </div>
             <div>
-              <span className="font-medium">Check Interval:</span> {formData.checkInterval}s
+              <span className="font-medium">{t('checkInterval')}:</span> {formData.checkInterval}s
             </div>
           </div>
         </div>
@@ -93,7 +96,7 @@ export const ManualInstallTab: React.FC<ManualInstallTabProps> = ({
                   onClick={() => copyToClipboard(step.command)}
                 >
                   <Copy className="h-4 w-4 mr-1" />
-                  Copy
+                  {t('copy')}
                 </Button>
               </div>
             </div>
@@ -101,22 +104,22 @@ export const ManualInstallTab: React.FC<ManualInstallTabProps> = ({
         </div>
 
         <div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-md p-4">
-          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">Prerequisites:</h4>
+          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">{t('prerequisites')}</h4>
           <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1 list-disc list-inside mb-3">
-            <li>Ensure you have root/sudo access on the target server</li>
+            <li>{t('prereqRoot')}</li>
-            <li>Make sure curl is installed for downloading files</li>
+            <li>{t('prereqCurl')}</li>
-            <li>Internet connection required for downloading script</li>
+            <li>{t('prereqInternet')}</li>
           </ul>
           
-          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">After Installation:</h4>
+          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">{t('afterInstall')}</h4>
           <p className="text-sm text-blue-800 dark:text-blue-200">
-            The agent will start automatically and appear in your dashboard within a few minutes.
+            {t('agentWillStart')}
           </p>
         </div>
 
         <div className="flex justify-end pt-4">
           <Button onClick={onDialogClose}>
-            Done
+            {t('done')}
           </Button>
         </div>
       </CardContent>

application/src/components/servers/OneClickInstallTab.tsx

@@ -5,6 +5,7 @@ import { Label } from "@/components/ui/label";
 import { Copy, Download } from "lucide-react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { copyToClipboard } from "@/utils/copyUtils";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface OneClickInstallTabProps {
   serverToken: string;
@@ -26,8 +27,10 @@ export const OneClickInstallTab: React.FC<OneClickInstallTabProps> = ({
   serverId,
   onDialogClose,
 }) => {
+  const { t } = useLanguage();
+
   const getOneClickInstallCommand = () => {
-    const scriptUrl = "https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/server-agent.sh";
+    const scriptUrl = "https://cdn.checkcle.io/scripts/server-agent.sh";
 
     return `curl -L -o server-agent.sh "${scriptUrl}"
 chmod +x server-agent.sh
@@ -55,15 +58,15 @@ sudo -E bash ./server-agent.sh`;
       <CardHeader>
         <CardTitle className="flex items-center gap-2 text-green-700 dark:text-green-400">
           <Download className="h-5 w-5" />
-          One-Click Install
+          {t('oneClickInstallTitle')}
         </CardTitle>
         <CardDescription className="text-green-600 dark:text-green-300">
-          Copy and paste this single command to install the monitoring agent instantly
+          {t('oneClickInstallDesc')}
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="space-y-2">
-          <Label className="text-green-700 dark:text-green-400">Quick Install Command</Label>
+          <Label className="text-green-700 dark:text-green-400">{t('quickInstallCommand')}</Label>
           <div className="relative">
             <pre className="bg-black-50 dark:bg-green-100/950 border border-green-200 dark:border-green-800 p-4 rounded-md text-sm overflow-x-auto whitespace-pre-wrap break-all text-green-800 dark:text-green-200">
               <code>{getOneClickInstallCommand()}</code>
@@ -76,23 +79,23 @@ sudo -E bash ./server-agent.sh`;
               onClick={handleCopyCommand}
             >
               <Copy className="h-4 w-4 mr-1" />
-              Copy
+              {t('copy')}
             </Button>
           </div>
         </div>
         
         <div className="text-sm text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/50 border border-green-200 dark:border-green-800 p-3 rounded-md">
-          <p className="font-medium mb-1">Simply run this command on your server:</p>
+          <p className="font-medium mb-1">{t('runCommandOnServer')}</p>
           <ol className="list-decimal list-inside space-y-1 text-xs">
-            <li>SSH into your target server</li>
+            <li>{t('sshIntoServer')}</li>
-            <li>Paste and run the command above</li>
+            <li>{t('pasteAndRun')}</li>
-            <li>The agent will be installed and started automatically</li>
+            <li>{t('agentInstalled')}</li>
           </ol>
         </div>
 
         <div className="flex justify-end pt-4">
           <Button onClick={onDialogClose}>
-            Done
+            {t('done')}
           </Button>
         </div>
       </CardContent>

application/src/components/servers/ServerAgentConfigForm.tsx

@@ -7,6 +7,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Copy } from "lucide-react";
 import { copyToClipboard } from "@/utils/copyUtils";
 import { OSSelector } from "./OSSelector";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface ServerAgentConfigFormProps {
   formData: {
@@ -43,23 +44,25 @@ export const ServerAgentConfigForm: React.FC<ServerAgentConfigFormProps> = ({
   isSubmitting,
   onSubmit,
 }) => {
+  const { t } = useLanguage();
+
   return (
     <form onSubmit={onSubmit} className="space-y-4">
       <div className="grid grid-cols-2 gap-4">
         <div className="space-y-2">
-          <Label htmlFor="serverName">Server Name *</Label>
+          <Label htmlFor="serverName">{t('serverName')} *</Label>
           <Input
             id="serverName"
-            placeholder="e.g., web-server-01"
+            placeholder={t('serverNamePlaceholder')}
             value={formData.serverName}
             onChange={(e) => setFormData(prev => ({ ...prev, serverName: e.target.value }))}
             required
           />
-          <p className="text-xs text-muted-foreground">What is the name or label used as the identifier</p>
+          <p className="text-xs text-muted-foreground">{t('serverNameDesc')}</p>
         </div>
         
         <div className="space-y-2">
-          <Label htmlFor="serverId">Server Agent ID</Label>
+          <Label htmlFor="serverId">{t('serverAgentId')}</Label>
           <div className="flex gap-2">
             <Input
               id="serverId"
@@ -76,13 +79,13 @@ export const ServerAgentConfigForm: React.FC<ServerAgentConfigFormProps> = ({
               <Copy className="h-4 w-4" />
             </Button>
           </div>
-          <p className="text-xs text-muted-foreground">Auto-generated unique identifier</p>
+          <p className="text-xs text-muted-foreground">{t('serverAgentIdDesc')}</p>
         </div>
       </div>
       
       <div className="grid grid-cols-2 gap-4">
         <div className="space-y-2">
-          <Label>Operating System *</Label>
+          <Label>{t('operatingSystem')} *</Label>
           <OSSelector
             value={formData.osType}
             onValueChange={(value) => setFormData(prev => ({ ...prev, osType: value }))}
@@ -91,45 +94,45 @@ export const ServerAgentConfigForm: React.FC<ServerAgentConfigFormProps> = ({
 
         <div className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="checkInterval">Check Interval</Label>
+            <Label htmlFor="checkInterval">{t('checkInterval')}</Label>
             <Select
               value={formData.checkInterval}
               onValueChange={(value) => setFormData(prev => ({ ...prev, checkInterval: value }))}
             >
               <SelectTrigger>
-                <SelectValue placeholder="Select interval" />
+                <SelectValue placeholder={t('selectInterval')} />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="30">30 seconds</SelectItem>
+                <SelectItem value="30">{t('interval30s')}</SelectItem>
-                <SelectItem value="60">1 minute</SelectItem>
+                <SelectItem value="60">{t('interval1m')}</SelectItem>
-                <SelectItem value="120">2 minutes</SelectItem>
+                <SelectItem value="120">{t('interval2m')}</SelectItem>
-                <SelectItem value="300">5 minutes</SelectItem>
+                <SelectItem value="300">{t('interval5m')}</SelectItem>
               </SelectContent>
             </Select>
-            <p className="text-xs text-muted-foreground">How often to check the server and metric status</p>
+            <p className="text-xs text-muted-foreground">{t('checkIntervalDesc')}</p>
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="retryAttempt">Retry Attempts</Label>
+            <Label htmlFor="retryAttempt">{t('retryAttempts')}</Label>
             <Select
               value={formData.retryAttempt}
               onValueChange={(value) => setFormData(prev => ({ ...prev, retryAttempt: value }))}
             >
               <SelectTrigger>
-                <SelectValue placeholder="Select retry attempts" />
+                <SelectValue placeholder={t('selectRetryAttempts')} />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="1">1 attempt</SelectItem>
+                <SelectItem value="1">{t('attempt1')}</SelectItem>
-                <SelectItem value="2">2 attempts</SelectItem>
+                <SelectItem value="2">{t('attempt2')}</SelectItem>
-                <SelectItem value="3">3 attempts</SelectItem>
+                <SelectItem value="3">{t('attempt3')}</SelectItem>
-                <SelectItem value="5">5 attempts</SelectItem>
+                <SelectItem value="5">{t('attempt5')}</SelectItem>
               </SelectContent>
             </Select>
-            <p className="text-xs text-muted-foreground">Number of retry attempts before marking as down</p>
+            <p className="text-xs text-muted-foreground">{t('retryAttemptsDesc')}</p>
           </div>
 
           <div className="space-y-2">
-            <Label>Server Token</Label>
+            <Label>{t('serverToken')}</Label>
             <div className="flex gap-2">
               <Input value={serverToken} readOnly className="font-mono text-sm bg-muted" />
               <Button
@@ -141,11 +144,11 @@ export const ServerAgentConfigForm: React.FC<ServerAgentConfigFormProps> = ({
                 <Copy className="h-4 w-4" />
               </Button>
             </div>
-            <p className="text-xs text-muted-foreground">Auto-generated authentication token</p>
+            <p className="text-xs text-muted-foreground">{t('serverTokenDesc')}</p>
           </div>
 
           <div className="space-y-2">
-            <Label>System URL</Label>
+            <Label>{t('systemUrl')}</Label>
             <div className="flex gap-2">
               <Input value={currentPocketBaseUrl} readOnly className="font-mono text-sm bg-muted" />
               <Button
@@ -157,14 +160,14 @@ export const ServerAgentConfigForm: React.FC<ServerAgentConfigFormProps> = ({
                 <Copy className="h-4 w-4" />
               </Button>
             </div>
-            <p className="text-xs text-muted-foreground">Current system API URL</p>
+            <p className="text-xs text-muted-foreground">{t('systemUrlDesc')}</p>
           </div>
         </div>
       </div>
      
       <div className="pt-4">
         <Button type="submit" disabled={isSubmitting} className="w-full">
-          {isSubmitting ? "Creating Agent..." : "Create Server Agent"}
+          {isSubmitting ? t('creatingAgent') : t('createServerAgent')}
         </Button>
       </div>
     </form>

application/src/components/servers/ServerHistoryCharts.tsx

@@ -8,12 +8,14 @@ import { CPUChart } from "./charts/CPUChart";
 import { MemoryChart } from "./charts/MemoryChart";
 import { DiskChart } from "./charts/DiskChart";
 import { NetworkChart } from "./charts/NetworkChart";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface ServerHistoryChartsProps {
   serverId: string;
 }
 
 export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
+  const { t } = useLanguage();
   const {
     timeRange,
     setTimeRange,
@@ -33,15 +35,15 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
 
   // Show skeleton loading state for better UX
   if (isLoading) {
-    return (
+   return (
       <div className="space-y-6">
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <TrendingUp className="h-5 w-5" />
-            <h2 className="text-lg font-medium">Historical Performance</h2>
+            <h2 className="text-lg font-medium">{t("historicalPerformance")}</h2>
             <div className="flex items-center gap-2 ml-2">
               <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-xs text-muted-foreground">Loading...</span>
+              <span className="text-xs text-muted-foreground">{t("loading")}</span>
             </div>
           </div>
           <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
@@ -77,7 +79,7 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <TrendingUp className="h-5 w-5" />
-            <h2 className="text-lg font-medium">Historical Performance</h2>
+            <h2 className="text-lg font-medium">{t("historicalPerformance")}</h2>
             {isFetching && <Loader2 className="h-4 w-4 animate-spin ml-2" />}
           </div>
           <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
@@ -85,9 +87,9 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
         <Card>
           <CardContent className="flex items-center justify-center py-12">
             <div className="text-center">
-              <p className="text-muted-foreground">Error loading chart data</p>
+              <p className="text-muted-foreground">{t("errorLoadingChartData")}</p>
               <p className="text-xs mt-2 font-mono text-red-500">{error?.message}</p>
-              <p className="text-xs mt-1 text-muted-foreground">Server ID: {serverId} • Time Range: {timeRange}</p>
+              <p className="text-xs mt-1 text-muted-foreground">{t("serverIdTimeRange", { serverId, timeRange })}</p>
             </div>
           </CardContent>
         </Card>
@@ -101,7 +103,7 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <TrendingUp className="h-5 w-5" />
-            <h2 className="text-lg font-medium">Historical Performance</h2>
+            <h2 className="text-lg font-medium">{t("historicalPerformance")}</h2>
             {isFetching && <Loader2 className="h-4 w-4 animate-spin ml-2" />}
           </div>
           <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
@@ -109,11 +111,13 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
         <Card>
           <CardContent className="flex items-center justify-center py-12">
             <div className="text-center">
-              <p className="text-muted-foreground">No historical data available for {timeRange}</p>
+              <p className="text-muted-foreground">{t("noHistoricalData", { timeRange })}</p>
-              <p className="text-xs mt-2">Raw metrics count: {metrics.length}</p>
+              <p className="text-xs mt-2">{t("rawMetricsCount", { count: metrics.length })}</p>
-              <p className="text-xs mt-1">Server ID: {serverId} • Time Range: {timeRange}</p>
+              <p className="text-xs mt-1">{t("serverIdTimeRange", { serverId, timeRange })}</p>
               <p className="text-xs mt-1 text-muted-foreground">
-                {metrics.length > 0 ? 'Data exists but may be outside selected time range' : 'No metrics data found'}
+                {metrics.length > 0
+                  ? t("dataExistsOutsideRange")
+                  : t("noMetricsDataFound")}
               </p>
             </div>
           </CardContent>
@@ -129,13 +133,13 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div className="flex items-center gap-2">
           <TrendingUp className="h-5 w-5" />
-          <h2 className="text-lg font-medium">Historical Performance</h2>
+          <h2 className="text-lg font-medium">{t("historicalPerformance")}</h2>
           <span className="text-xs text-muted-foreground">
             ({chartData.length} data points • {timeRange})
             {isFetching && (
               <span className="inline-flex items-center gap-1 ml-2">
                 <Loader2 className="h-3 w-3 animate-spin" />
-                <span className="text-blue-500">Updating...</span>
+                <span className="text-blue-500">{t("updating")}</span>
               </span>
             )}
           </span>

application/src/components/servers/ServerStatsCards.tsx

@@ -3,17 +3,19 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Server, Activity, AlertTriangle, Power } from "lucide-react";
 import { ServerStats } from "@/types/server.types";
 import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface ServerStatsCardsProps {
   stats: ServerStats;
 }
 
 export const ServerStatsCards = ({ stats }: ServerStatsCardsProps) => {
+  const { t } = useLanguage();
   const { theme } = useTheme();
 
   const cards = [
     {
-      title: "TOTAL SERVERS",
+      title: t('totalServers', 'instance'),
       value: stats.total,
       icon: Server,
       gradient: theme === 'dark' 
@@ -21,7 +23,7 @@ export const ServerStatsCards = ({ stats }: ServerStatsCardsProps) => {
         : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #a0522d 100%)"
     },
     {
-      title: "ONLINE SERVERS",
+      title: t('onlineServers', 'instance'),
       value: stats.online,
       icon: Activity,
       gradient: theme === 'dark' 
@@ -29,7 +31,7 @@ export const ServerStatsCards = ({ stats }: ServerStatsCardsProps) => {
         : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #66bb6a 100%)"
     },
     {
-      title: "OFFLINE SERVERS",
+      title: t('offlineServers', 'instance'),
       value: stats.offline,
       icon: Power,
       gradient: theme === 'dark'
@@ -37,7 +39,7 @@ export const ServerStatsCards = ({ stats }: ServerStatsCardsProps) => {
         : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #ef5350 100%)"
     },
     {
-      title: "WARNING SERVERS",
+      title: t('warningServers', 'instance'),
       value: stats.warning,
       icon: AlertTriangle,
       gradient: theme === 'dark'

application/src/components/servers/ServerTable.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
@@ -16,6 +17,7 @@ import { serverService } from "@/services/serverService";
 import { useToast } from "@/hooks/use-toast";
 import { pb } from "@/lib/pocketbase";
 import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface ServerTableProps {
   servers: Server[];
@@ -24,6 +26,7 @@ interface ServerTableProps {
 }
 
 export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps) => {
+  const { t } = useLanguage();
   const { theme } = useTheme();
   const [searchTerm, setSearchTerm] = useState("");
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -31,6 +34,9 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
   const [selectedServer, setSelectedServer] = useState<Server | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
   const [pausingServers, setPausingServers] = useState<Set<string>>(new Set());
+  const [selectedServerIds, setSelectedServerIds] = useState<Set<string>>(new Set());
+  const [bulkDeleteDialogOpen, setBulkDeleteDialogOpen] = useState(false);
+  const [isBulkDeleting, setIsBulkDeleting] = useState(false);
   const navigate = useNavigate();
   const { toast } = useToast();
 
@@ -40,6 +46,25 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
     server.ip_address.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
+  const allVisibleSelected = filteredServers.length > 0 && filteredServers.every(s => selectedServerIds.has(s.id));
+  const someVisibleSelected = filteredServers.some(s => selectedServerIds.has(s.id)) && !allVisibleSelected;
+
+  const toggleSelectAllVisible = (checked: boolean) => {
+    const newSet = new Set(selectedServerIds);
+    if (checked) {
+      filteredServers.forEach(s => newSet.add(s.id));
+    } else {
+      filteredServers.forEach(s => newSet.delete(s.id));
+    }
+    setSelectedServerIds(newSet);
+  };
+
+  const toggleSelectOne = (serverId: string, checked: boolean) => {
+    const newSet = new Set(selectedServerIds);
+    if (checked) newSet.add(serverId); else newSet.delete(serverId);
+    setSelectedServerIds(newSet);
+  };
+
   const handleViewDetails = (serverId: string) => {
     navigate(`/server-detail/${serverId}`);
   };
@@ -68,8 +93,8 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
       await pb.collection('servers').update(serverId, updateData);
       
       toast({
-        title: isPaused ? "Server resumed" : "Server paused",
+        title: isPaused ? t('serverResumed') : t('serverPaused'),
-        description: `Monitoring ${isPaused ? 'resumed' : 'paused'} for ${server.name}`,
+        description: isPaused ? t('monitoringResumed', { name: server.name }) : t('monitoringPaused', { name: server.name }),
       });
       
      // console.log(`${isPaused ? 'Resume' : 'Pause'} server monitoring: ${serverId}`);
@@ -81,8 +106,8 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
      // console.error('Error updating server status:', error);
       toast({
         variant: "destructive",
-        title: "Error",
+        title: t('error'),
-        description: `Failed to ${isPaused ? 'resume' : 'pause'} server monitoring. Please try again.`,
+        description: isPaused ? t('resumeServerError') : t('pauseServerError'),
       });
     } finally {
       setPausingServers(prev => {
@@ -136,6 +161,33 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
     }
   };
 
+  const confirmBulkDelete = async () => {
+    if (selectedServerIds.size === 0 || isBulkDeleting) return;
+    try {
+      setIsBulkDeleting(true);
+      const ids = Array.from(selectedServerIds);
+      const deletions = ids.map(id => pb.collection('servers').delete(id));
+      const results = await Promise.allSettled(deletions);
+      const failed = results.filter(r => r.status === 'rejected').length;
+
+      if (failed === 0) {
+        toast({ title: "Servers deleted", description: `${ids.length} server(s) have been deleted.` });
+      } else if (failed === ids.length) {
+        toast({ variant: "destructive", title: "Error", description: "Failed to delete selected servers. Please try again." });
+      } else {
+        toast({ variant: "destructive", title: "Partial success", description: `Deleted ${ids.length - failed}, failed ${failed}.` });
+      }
+
+      onRefresh();
+      setSelectedServerIds(new Set());
+      setBulkDeleteDialogOpen(false);
+    } catch (_e) {
+      toast({ variant: "destructive", title: "Error", description: "Failed to delete selected servers. Please try again." });
+    } finally {
+      setIsBulkDeleting(false);
+    }
+  };
+
   const CustomProgressBar = ({ 
     value, 
     label, 
@@ -204,12 +256,12 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
     return (
       <Card className="flex-1 flex flex-col">
         <CardHeader className="flex-shrink-0">
-          <CardTitle>Servers</CardTitle>
+          <CardTitle>{t('servers')}</CardTitle>
         </CardHeader>
         <CardContent className="flex-1 flex items-center justify-center">
           <div className="flex items-center justify-center h-32">
             <RefreshCw className="h-6 w-6 animate-spin" />
-            <span className="ml-2">Loading servers...</span>
+            <span className="ml-2">{t('loadingServers')}</span>
           </div>
         </CardContent>
       </Card>
@@ -221,17 +273,29 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
       <Card className="bg-transparent border-0 shadow-none">
         <CardHeader className="pb-4 px-0">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-            <CardTitle className="text-xl font-semibold">Servers</CardTitle>
+            <CardTitle className="text-xl font-semibold">{t('servers')}</CardTitle>
             <div className="flex items-center gap-2">
               <div className="relative flex-1 sm:w-64">
                 <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                 <Input
-                  placeholder="Search servers..."
+                  placeholder={t('searchServersPlaceholder')}
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
                   className="pl-8"
                 />
               </div>
+              {selectedServerIds.size > 0 && (
+                <div className="hidden sm:block text-sm text-muted-foreground mr-2">
+                  {selectedServerIds.size} selected
+                </div>
+              )}
+              <Button
+                onClick={() => setBulkDeleteDialogOpen(true)}
+                variant="destructive"
+                disabled={selectedServerIds.size === 0}
+              >
+                Delete Selected
+              </Button>
               <Button onClick={onRefresh} variant="outline" size="icon">
                 <RefreshCw className="h-4 w-4" />
               </Button>
@@ -241,23 +305,33 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
         <CardContent className="p-0">
           {filteredServers.length === 0 ? (
             <div className="flex items-center justify-center p-8">
-              <p className="text-muted-foreground">No servers found</p>
+              <p className="text-muted-foreground">{t('noServersFound')}</p>
             </div>
           ) : (
             <div className={`${theme === 'dark' ? 'bg-gray-900' : 'bg-white'} rounded-lg border border-border shadow-sm`}>
               <Table>
                 <TableHeader className={`${theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'}`}>
                   <TableRow className={`${theme === 'dark' ? 'border-gray-700 hover:bg-gray-800' : 'border-gray-200 hover:bg-gray-100'}`}>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Name</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} w-10`}>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Status</TableHead>
+                      <div onClick={(e) => e.stopPropagation()}>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>OS</TableHead>
+                        <Checkbox
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>IP Address</TableHead>
+                          checked={allVisibleSelected}
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>CPU</TableHead>
+                          onCheckedChange={(v) => toggleSelectAllVisible(Boolean(v))}
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Memory</TableHead>
+                          aria-label="Select all"
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Disk</TableHead>
+                          indeterminate={someVisibleSelected}
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Uptime</TableHead>
+                        />
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Last Checked</TableHead>
+                      </div>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4 text-right`}>Actions</TableHead>
+                    </TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>{t('name')}</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>{t('status')}</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>{t('OS')}</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>{t('IPAddress')}</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>{t('CPU')}</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>{t('memory')}</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>{t('disk')}</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>{t('uptime')}</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>{t('lastChecked')}</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4 text-right`}>{t('actions')}</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -268,8 +342,20 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                     const isPaused = server.status === "paused";
                     const isProcessing = pausingServers.has(server.id);
 
+                    const isSelected = selectedServerIds.has(server.id);
                     return (
-                      <TableRow key={server.id} className="hover:bg-muted/50">
+                      <TableRow 
+                        key={server.id} 
+                        className={`hover:bg-muted/50 cursor-pointer ${isSelected ? 'bg-muted/30' : ''}`}
+                        onClick={() => handleViewDetails(server.id)}
+                      >
+                        <TableCell onClick={(e) => e.stopPropagation()}>
+                          <Checkbox
+                            checked={isSelected}
+                            onCheckedChange={(v) => toggleSelectOne(server.id, Boolean(v))}
+                            aria-label={`Select ${server.name}`}
+                          />
+                        </TableCell>
                         <TableCell className="font-medium">
                           <div className="truncate" title={server.name}>
                             {server.name}
@@ -325,11 +411,11 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                             {new Date(server.last_checked).toLocaleString()}
                           </div>
                         </TableCell>
-                        <TableCell className="text-right">
+                        <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
                               <Button variant="ghost" className="h-8 w-8 p-0" disabled={isProcessing}>
-                                <span className="sr-only">Open menu</span>
+                                <span className="sr-only">{t('openMenu')}</span>
                                 {isProcessing ? (
                                   <RefreshCw className="h-4 w-4 animate-spin" />
                                 ) : (
@@ -338,44 +424,44 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                               </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end" className="w-[200px]">
-                              <DropdownMenuItem onClick={() => handleViewDetails(server.id)}>
+                              <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleViewDetails(server.id); }}>
                                 <Eye className="mr-2 h-4 w-4" />
-                                View Server Detail
+                                {t('viewServerDetail')}
                               </DropdownMenuItem>
                               {server.docker === 'true' && (
-                                <DropdownMenuItem onClick={() => handleViewContainers(server.id)}>
+                                <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleViewContainers(server.id); }}>
                                   <Activity className="mr-2 h-4 w-4" />
-                                  Container Monitoring
+                                  {t('containerMonitoring')}
                                 </DropdownMenuItem>
                               )}
                               <DropdownMenuSeparator />
                               <DropdownMenuItem 
-                                onClick={() => handlePauseResume(server)}
+                                onClick={(e) => { e.stopPropagation(); handlePauseResume(server); }}
                                 disabled={isProcessing}
                               >
                                 {isPaused ? (
                                   <>
                                     <Play className="mr-2 h-4 w-4" />
-                                    Resume Monitoring
+                                    {t('resumeMonitoring')}
                                   </>
                                 ) : (
                                   <>
                                     <Pause className="mr-2 h-4 w-4" />
-                                    Pause Monitoring
+                                    {t('pauseMonitoring')}
                                   </>
                                 )}
                               </DropdownMenuItem>
                               <DropdownMenuSeparator />
-                              <DropdownMenuItem onClick={() => handleEdit(server)}>
+                              <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleEdit(server); }}>
                                 <Edit className="mr-2 h-4 w-4" />
-                                Edit Server
+                                {t('editServer')}
                               </DropdownMenuItem>
                               <DropdownMenuItem 
-                                onClick={() => handleDelete(server)}
+                                onClick={(e) => { e.stopPropagation(); handleDelete(server); }}
                                 className="text-red-600 focus:text-red-600"
                               >
                                 <Trash2 className="mr-2 h-4 w-4" />
-                                Delete Server
+                                {t('deleteServer')}
                               </DropdownMenuItem>
                             </DropdownMenuContent>
                           </DropdownMenu>
@@ -402,29 +488,49 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure you want to delete this server?</AlertDialogTitle>
+            <AlertDialogTitle>{t('deleteServerConfirmTitle')}</AlertDialogTitle>
             <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete{' '}
+              {t('deleteServerConfirmDesc').replace('{name}', selectedServer?.name ?? '')}
-              <span className="font-semibold text-foreground">
-                {selectedServer?.name}
-              </span>{' '}
-              and all of its monitoring data.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel disabled={isDeleting}>
-              Cancel
+              {t('cancel')}
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={confirmDelete}
               disabled={isDeleting}
               className="bg-red-600 text-white hover:bg-red-700"
             >
-              {isDeleting ? "Deleting..." : "Delete"}
+              {isDeleting ? t('deleting') : t('delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Bulk Delete Confirmation Dialog */}
+      <AlertDialog open={bulkDeleteDialogOpen} onOpenChange={setBulkDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete selected servers?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete {selectedServerIds.size} server(s) and all of their monitoring data.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isBulkDeleting}>
+              {t('cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmBulkDelete}
+              disabled={isBulkDeleting}
+              className="bg-red-600 text-white hover:bg-red-700"
+            >
+              {isBulkDeleting ? t('deleting') : 'Delete Selected'}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </>
   );
-};
+};

application/src/components/services/AddServiceDialog.tsx

@@ -8,6 +8,8 @@ import {
 } from "@/components/ui/dialog";
 import { ServiceForm } from "./ServiceForm";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { useQueryClient } from "@tanstack/react-query";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface AddServiceDialogProps {
   open: boolean;
@@ -15,7 +17,12 @@ interface AddServiceDialogProps {
 }
 
 export function AddServiceDialog({ open, onOpenChange }: AddServiceDialogProps) {
-  const handleSuccess = () => {
+  const { t } = useLanguage();
+  const queryClient = useQueryClient();
+  const handleSuccess = async () => {
+    // Immediately invalidate and refetch services data
+    await queryClient.invalidateQueries({ queryKey: ["services"] });
+    await queryClient.refetchQueries({ queryKey: ["services"] });
     onOpenChange(false);
   };
 
@@ -27,9 +34,9 @@ export function AddServiceDialog({ open, onOpenChange }: AddServiceDialogProps)
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[700px] max-h-[90vh] flex flex-col">
         <DialogHeader>
-          <DialogTitle className="text-xl">Create New Service</DialogTitle>
+          <DialogTitle className="text-xl">{t("createNewService")}</DialogTitle>
           <DialogDescription>
-            Fill in the details to create a new service to monitor.
+            {t("createNewServiceDesc")}
           </DialogDescription>
         </DialogHeader>
         <ScrollArea className="flex-1 pr-4 overflow-auto" style={{ height: "calc(80vh - 180px)" }}>

application/src/components/services/LastCheckedTime.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 import { Clock, TimerOff } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface LastCheckedTimeProps {
   lastCheckedTime: string;
@@ -10,6 +11,7 @@ interface LastCheckedTimeProps {
 }
 
 export const LastCheckedTime = ({ lastCheckedTime, status, interval }: LastCheckedTimeProps) => {
+	const { t } = useLanguage();
   // Format the time without seconds to display a static time
   const formatTimeWithoutSeconds = (timeString: string) => {
     try {
@@ -55,7 +57,7 @@ export const LastCheckedTime = ({ lastCheckedTime, status, interval }: LastCheck
               <Clock className="h-4 w-4" />
             )}
             <span>
-              {isPaused ? "Paused at " : ""}
+              {isPaused ? t("pausedAt") : ""}
               {formattedTime}
             </span>
           </div>
@@ -66,14 +68,14 @@ export const LastCheckedTime = ({ lastCheckedTime, status, interval }: LastCheck
         >
           <div className="flex flex-col gap-1 text-xs">
             <div className="font-medium">
-              {isPaused ? "Monitoring Paused" : "Last Check Details"}
+              {isPaused ? t("monitoringPaused") : t("lastCheckDetails")}
             </div>
             <div>
-              {isPaused ? "No automatic checks" : `Checked at ${formattedTime}`}
+              {isPaused ? t("noAutomaticChecks") : t("checkedAt") + `${formattedTime}`}
             </div>
             {interval && !isPaused && (
               <div>
-                Check interval: {formatInterval(interval)}
+	              {t("checkInterval")}: {formatInterval(interval)}
               </div>
             )}
             <div className="text-gray-400 text-[10px]">

application/src/components/services/LoadingState.tsx

@@ -1,5 +1,7 @@
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 export function LoadingState() {
+	const { t } = useLanguage();
   return (
     <div className="flex items-center justify-center h-screen bg-background text-foreground">
       <div className="flex flex-col items-center text-center py-8 px-4 rounded-lg shadow-lg bg-card animate-fade-in">
@@ -7,8 +9,8 @@ export function LoadingState() {
           <div className="absolute w-12 h-12 rounded-full border-4 border-primary/20"></div>
           <div className="w-12 h-12 rounded-full border-4 border-t-primary border-r-transparent border-b-transparent border-l-transparent animate-spin"></div>
         </div>
-        <h3 className="text-xl font-medium mb-1">Loading server data</h3>
+        <h3 className="text-xl font-medium mb-1">{t("loadingServerData")}</h3>
-        <p className="text-muted-foreground">Please wait while we retrieve your information...</p>
+        <p className="text-muted-foreground">{t("retrievingYourInformation")}</p>
       </div>
     </div>
   );

application/src/components/services/ServiceDetailContainer/ServiceDetailWrapper.tsx

@@ -1,4 +1,3 @@
-
 import React from "react";
 import { Sidebar } from "@/components/dashboard/Sidebar";
 import { Header } from "@/components/dashboard/Header";
@@ -7,11 +6,9 @@ import { ServiceNotFound } from "@/components/services/ServiceNotFound";
 import { Service } from "@/types/service.types";
 
 interface ServiceDetailWrapperProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   isLoading: boolean;
   service: Service | null;
-  sidebarCollapsed: boolean;
-  toggleSidebar: () => void;
   currentUser: any;
   handleLogout: () => void;
 }
@@ -20,20 +17,16 @@ export const ServiceDetailWrapper = ({
   children,
   isLoading,
   service,
-  sidebarCollapsed,
-  toggleSidebar,
   currentUser,
   handleLogout
 }: ServiceDetailWrapperProps) => {
   return (
     <div className="flex h-screen w-full overflow-hidden bg-background text-foreground">
-      <Sidebar collapsed={sidebarCollapsed} />
+      <Sidebar />
       <div className="flex flex-col flex-1 min-w-0">
         <Header 
           currentUser={currentUser} 
           onLogout={handleLogout} 
-          sidebarCollapsed={sidebarCollapsed} 
-          toggleSidebar={toggleSidebar} 
         />
         
         {isLoading ? (
@@ -48,4 +41,4 @@ export const ServiceDetailWrapper = ({
       </div>
     </div>
   );
-};
+};

application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx

@@ -125,7 +125,7 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
       } else {
         // Fetch regional agent specific data
         const [regionName, agentId] = currentAgent.split("|");
-        console.log(`Fetching regional agent data for region: ${regionName}, agent: ${agentId} from ${service.type} collection`);
+       // console.log(`Fetching regional agent data for region: ${regionName}, agent: ${agentId} from ${service.type} collection`);
         history = await uptimeService.getUptimeHistoryByRegionalAgent(serviceId, limit, start, end, service.type, regionName, agentId);
        // console.log(`Retrieved ${history.length} regional monitoring records`);
       }

application/src/components/services/ServiceDetailContainer/index.tsx

@@ -1,78 +1,34 @@
-import { useState, useEffect, useCallback } from "react";
+import React, { useState, useCallback } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { DateRangeOption } from "../DateRangeFilter";
 import { authService } from "@/services/authService";
 import { ServiceDetailContent } from "../ServiceDetailContent";
 import { ServiceDetailWrapper } from "./ServiceDetailWrapper";
 import { useServiceData, useRealTimeUpdates } from "./hooks";
-import { toast } from "@/components/ui/use-toast";
 
 export const ServiceDetailContainer = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   
-  // Set default to 24h
   const [startDate, setStartDate] = useState<Date>(() => {
     const date = new Date();
-    date.setHours(date.getHours() - 24); // Go back 24 hours
+    date.setHours(date.getHours() - 24);
     return date;
   });
   const [endDate, setEndDate] = useState<Date>(() => {
     const date = new Date();
-    date.setMinutes(date.getMinutes() + 5); // Add 5 minutes buffer to future
+    date.setMinutes(date.getMinutes() + 5);
     return date;
   });
   const [selectedRange, setSelectedRange] = useState<DateRangeOption>('24h');
   
-  // State for sidebar collapse functionality (shared with Dashboard)
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
-    // Check if there's a saved preference in localStorage
-    const saved = localStorage.getItem("sidebarCollapsed");
-    return saved ? JSON.parse(saved) : window.innerWidth < 768;
-  });
-  
-  // Toggle sidebar and save preference
-  const toggleSidebar = useCallback(() => {
-    setSidebarCollapsed(prev => {
-      const newState = !prev;
-      localStorage.setItem("sidebarCollapsed", JSON.stringify(newState));
-      return newState;
-    });
-  }, []);
-  
-  // Get current user for header
   const currentUser = authService.getCurrentUser();
   
-  useEffect(() => {
-    // Verify user is authenticated
-    if (!authService.isAuthenticated()) {
-      toast({
-        variant: "destructive",
-        title: "Authentication required",
-        description: "Please log in to view service details",
-      });
-      navigate("/login");
-    }
-    
-    // Auto-collapse sidebar on small screens
-    const handleResize = () => {
-      if (window.innerWidth < 768 && !sidebarCollapsed) {
-        setSidebarCollapsed(true);
-        localStorage.setItem("sidebarCollapsed", JSON.stringify(true));
-      }
-    };
-    
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [navigate, sidebarCollapsed]);
-  
-  // Handler for logout (same as Dashboard)
   const handleLogout = () => {
     authService.logout();
     navigate("/login");
   };
 
-  // Use our custom hooks
   const {
     service,
     uptimeData,
@@ -85,7 +41,6 @@ export const ServiceDetailContainer = () => {
     handleRegionalAgentChange
   } = useServiceData(id, startDate, endDate);
 
-  // Set up real-time updates
   useRealTimeUpdates({
     serviceId: id,
     startDate,
@@ -94,18 +49,12 @@ export const ServiceDetailContainer = () => {
     setUptimeData
   });
 
-  // Handle date range filter changes
   const handleDateRangeChange = useCallback((start: Date, end: Date, option: DateRangeOption) => {
-    console.log(`ServiceDetailContainer: Date range changed: ${start.toISOString()} to ${end.toISOString()}, option: ${option}`);
-    
-    // Update state which will trigger the useEffect in useServiceData
     setStartDate(start);
     setEndDate(end);
     setSelectedRange(option);
     
-    // Also explicitly fetch data with the new range to ensure immediate update
     if (id) {
-      console.log(`ServiceDetailContainer: Explicitly fetching data for service ${id} with new range`);
       fetchUptimeData(id, start, end, option, selectedRegionalAgent);
     }
   }, [id, fetchUptimeData, selectedRegionalAgent]);
@@ -114,12 +63,10 @@ export const ServiceDetailContainer = () => {
     <ServiceDetailWrapper
       isLoading={isLoading}
       service={service}
-      sidebarCollapsed={sidebarCollapsed}
-      toggleSidebar={toggleSidebar}
       currentUser={currentUser}
       handleLogout={handleLogout}
     >
-      {service && (
+      {service ? (
         <ServiceDetailContent 
           service={service}
           uptimeData={uptimeData}
@@ -129,7 +76,7 @@ export const ServiceDetailContainer = () => {
           selectedRegionalAgent={selectedRegionalAgent}
           onRegionalAgentChange={handleRegionalAgentChange}
         />
-      )}
+      ) : null}
     </ServiceDetailWrapper>
   );
 };

application/src/components/services/ServiceEditDialog.tsx

@@ -11,6 +11,7 @@ import { Service } from "@/types/service.types";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState, useEffect } from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface ServiceEditDialogProps {
   open: boolean;
@@ -19,6 +20,7 @@ interface ServiceEditDialogProps {
 }
 
 export function ServiceEditDialog({ open, onOpenChange, service }: ServiceEditDialogProps) {
+	const { t } = useLanguage();
   const queryClient = useQueryClient();
   const [isSubmitting, setIsSubmitting] = useState(false);
   
@@ -53,9 +55,9 @@ export function ServiceEditDialog({ open, onOpenChange, service }: ServiceEditDi
     }}>
       <DialogContent className="sm:max-w-[700px] max-h-[90vh] flex flex-col">
         <DialogHeader>
-          <DialogTitle className="text-xl">Edit Service</DialogTitle>
+          <DialogTitle className="text-xl">{t("editService")}</DialogTitle>
           <DialogDescription>
-            Update the details of your monitored service.
+	          {t("editServiceDesc")}
           </DialogDescription>
         </DialogHeader>
         {open && service && (

application/src/components/services/ServiceMonitoringButton.tsx

@@ -5,7 +5,6 @@ import { Play, Pause } from "lucide-react";
 import { Service } from "@/types/service.types";
 import { serviceService } from "@/services/serviceService"; 
 import { useToast } from "@/hooks/use-toast";
-import { notificationService } from "@/services/notificationService";
 
 interface ServiceMonitoringButtonProps {
   service: Service;
@@ -34,16 +33,8 @@ export function ServiceMonitoringButton({ service, onStatusChange }: ServiceMoni
         
         if (onStatusChange) onStatusChange("paused");
         
-        // Send notification for paused status (only here, not in pauseMonitoring.ts)
+        // Notification handling removed - will be handled by backend
-        if (service.alerts !== "muted") {
+       // console.log("Service paused - notifications will be handled by backend");
-         // console.log("Sending pause notification from UI component");
-          // IMPORTANT: Direct call to the notification service to ensure a message is sent
-          await notificationService.sendNotification({
-            service: service,
-            status: "paused",
-            timestamp: new Date().toISOString(),
-          });
-        }
         
         toast({
           title: "Monitoring paused",
@@ -51,7 +42,7 @@ export function ServiceMonitoringButton({ service, onStatusChange }: ServiceMoni
         });
       } else {
         // Start/resume monitoring
-       // console.log(`Starting monitoring for service ${service.id} (${service.name})`);
+      //  console.log(`Starting monitoring for service ${service.id} (${service.name})`);
         
         // First ensure we update the status in the database to not be paused anymore
         await serviceService.resumeMonitoring(service.id);
@@ -100,4 +91,4 @@ export function ServiceMonitoringButton({ service, onStatusChange }: ServiceMoni
       )}
     </Button>
   );
-}
+}

application/src/components/services/ServiceStatsCards.tsx

@@ -4,6 +4,7 @@ import { Service, UptimeData } from "@/types/service.types";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useMemo } from "react";
 import { formatDistanceStrict } from "date-fns";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceStatsCardsProps {
   service: Service;
@@ -11,6 +12,8 @@ interface ServiceStatsCardsProps {
 }
 
 export function ServiceStatsCards({ service, uptimeData }: ServiceStatsCardsProps) {
+
+	const { t } = useLanguage();
   // Calculate uptime percentage
   const calculateUptimePercentage = () => {
     if (uptimeData.length === 0) return 100;
@@ -109,41 +112,46 @@ export function ServiceStatsCards({ service, uptimeData }: ServiceStatsCardsProp
     <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
       <Card className="border-blue-400 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/50 shadow-md">
         <CardHeader className="pb-2">
-          <CardTitle className="text-sm font-medium text-blue-800 dark:text-blue-100">Response Time</CardTitle>
+          <CardTitle className="text-sm font-medium text-blue-800 dark:text-blue-100">{t('responseTime')}</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="text-2xl font-bold text-blue-700 dark:text-white">
             {service.responseTime}ms
           </div>
-          <p className="text-xs text-blue-600 dark:text-blue-200 mt-1">Last checked at {service.lastChecked}</p>
+          <p className="text-xs text-blue-600 dark:text-blue-200 mt-1">{t('lastCheckedAt').replace('{datetime}', service.lastChecked)}</p>
           {avgResponseTime > 0 && avgResponseTime !== service.responseTime && (
-            <p className="text-xs text-blue-600 dark:text-blue-200 mt-1">Avg: {avgResponseTime}ms (last {upChecks.length} up checks)</p>
+            <p className="text-xs text-blue-600 dark:text-blue-200 mt-1">{t('avg')}: {avgResponseTime}ms ({t('lastUpChecksCount').replace('{count}', String(upChecks.length))})</p>
           )}
         </CardContent>
       </Card>
       
       <Card className="border-green-400 dark:border-green-700 bg-green-50 dark:bg-green-900/50 shadow-md">
         <CardHeader className="pb-2">
-          <CardTitle className="text-sm font-medium text-green-800 dark:text-green-100">Uptime</CardTitle>
+          <CardTitle className="text-sm font-medium text-green-800 dark:text-green-100">{t('uptime')}</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="text-2xl font-bold text-green-700 dark:text-white">
             {uptimePercentage}%
           </div>
-          <p className="text-xs text-green-600 dark:text-green-200 mt-1">Based on last {uptimeData.length} checks</p>
+          <p className="text-xs text-green-600 dark:text-green-200 mt-1">{t('basedOnlastChecksCount').replace('{count}', String(uptimeData.length))}</p>
           <div className="flex flex-col space-y-1 mt-2">
             <div className="flex items-center text-xs text-green-600 dark:text-green-200">
               <ArrowUp className="h-3 w-3 mr-1 text-green-600 dark:text-green-400" />
-              <span>Total uptime: {uptimeStats.totalUptimeFormatted}</span>
+              <span>{t("totalUptime")}: {uptimeStats.totalUptimeFormatted}</span>
             </div>
             <div className="flex items-center text-xs text-red-600 dark:text-red-200">
               <ArrowDown className="h-3 w-3 mr-1 text-red-600 dark:text-red-400" />
-              <span>Total downtime: {uptimeStats.totalDowntimeFormatted}</span>
+              <span>{t("totalDowntime")}: {uptimeStats.totalDowntimeFormatted}</span>
             </div>
             {service.status !== "paused" && (
               <div className="flex items-center text-xs font-medium mt-1">
                 <span className={service.status === "up" ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}>
-                  {service.status === "up" ? "Up" : "Down"} for {uptimeStats.currentStatusDuration}
+                  {
+										service.status === "up" ?
+											t('upStatusDuration').replace("{duration}", uptimeStats.currentStatusDuration)
+											:
+											t('downStatusDuration').replace("{duration}", uptimeStats.currentStatusDuration)
+									}
                 </span>
               </div>
             )}
@@ -153,16 +161,16 @@ export function ServiceStatsCards({ service, uptimeData }: ServiceStatsCardsProp
       
       <Card className="border-purple-400 dark:border-purple-700 bg-purple-50 dark:bg-purple-900/50 shadow-md">
         <CardHeader className="pb-2">
-          <CardTitle className="text-sm font-medium text-purple-800 dark:text-purple-100">Monitoring Settings</CardTitle>
+          <CardTitle className="text-sm font-medium text-purple-800 dark:text-purple-100">{t('monitoringSettings')}</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="flex items-center text-sm text-purple-700 dark:text-purple-200">
             <Clock className="h-4 w-4 mr-2 text-purple-600 dark:text-purple-400" />
-            <span>Checked every {service.interval} seconds</span>
+            <span>{t('monitoringSettingsInterval').replace('{interval}', String(service.interval))}</span>
           </div>
           <div className="flex items-center text-sm text-purple-700 dark:text-purple-200 mt-1">
             <Server className="h-4 w-4 mr-2 text-purple-600 dark:text-purple-400" />
-            <span>{service.type} monitoring</span>
+            <span>{service.type} {t('monitoringSettingsType')}</span>
           </div>
         </CardContent>
       </Card>

application/src/components/services/ServicesPagination.tsx

@@ -63,9 +63,9 @@ export function ServicesPagination({
   return (
     <div className="flex items-center justify-between py-4 px-4 border-t border-border">
       <div className="flex items-center space-x-2">
-        <span className="text-sm text-muted-foreground">
+       <span className="text-sm text-muted-foreground whitespace-nowrap">
-          {t("rowsPerPage") ?? "Rows per page"}:
+        {t("rowsPerPage") ?? "Rows per page"}:
-        </span>
+       </span>
         <Select
           value={pageSize.toString()}
           onValueChange={(value) => onPageSizeChange(parseInt(value) as PageSize)}
@@ -80,9 +80,9 @@ export function ServicesPagination({
           </SelectContent>
         </Select>
         <span className="text-sm text-muted-foreground whitespace-nowrap">
-          {totalItems > 0 
+	        {totalItems > 0
-            ? `${startItem}-${endItem} of ${totalItems} ${t("services") || "services"}`
+           ? t("servicesPagination", {"startItem": startItem, "endItem": endItem, "totalItems": totalItems})
-            : `0 ${t("services") || "services"}`
+           : t("servicesPaginationNoService")
           }
         </span>
       </div>

application/src/components/services/UptimeBar.tsx

@@ -5,6 +5,7 @@ import { TooltipProvider } from '@/components/ui/tooltip';
 import { UptimeStatusItem } from './uptime/UptimeStatusItem';
 import { uptimeService } from '@/services/uptimeService';
 import { UptimeData } from '@/types/service.types';
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface UptimeBarProps {
   uptime: number;
@@ -15,6 +16,7 @@ interface UptimeBarProps {
 }
 
 const UptimeBarComponent = ({ uptime, status, serviceId, interval, serviceType = "HTTP" }: UptimeBarProps) => {
+	const { t } = useLanguage();
   // Calculate date range for last 20 checks with much more aggressive caching
   const endDate = useMemo(() => new Date(), []);
   const startDate = useMemo(() => {
@@ -23,19 +25,21 @@ const UptimeBarComponent = ({ uptime, status, serviceId, interval, serviceType =
     return start;
   }, [endDate, interval]);
 
-  // Fetch uptime data with very aggressive caching to reduce API calls
+  // Fetch uptime data with immediate display and background updates
   const { data: uptimeData = [] } = useQuery({
     queryKey: ['uptime-bar', serviceId, serviceType],
     queryFn: () => uptimeService.getUptimeHistory(serviceId, 20, startDate, endDate, serviceType),
     enabled: !!serviceId,
-    staleTime: 30000, // Data is fresh for 30 seconds
+    staleTime: 300000, // Data stays fresh for 5 minutes - display immediately from cache
-    gcTime: 600000, // Keep in cache for 10 minutes
+    gcTime: 900000, // Keep in cache for 15 minutes
-    refetchInterval: 60000, // 1 minute polling
+    refetchInterval: 300000, // Reduced to 5 minute polling
     refetchOnWindowFocus: false,
     refetchOnMount: false,
     refetchOnReconnect: false,
-    retry: 3,
+    retry: 1, // Reduce retries for faster failure
-    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+    retryDelay: 1000, // Faster retry delay
+    refetchIntervalInBackground: true, // Allow background updates
+    placeholderData: (previousData) => previousData, // Keep showing previous data while refetching
   });
 
   // Memoize the uptime calculation to prevent unnecessary recalculations
@@ -84,7 +88,7 @@ const UptimeBarComponent = ({ uptime, status, serviceId, interval, serviceType =
       </div>
       
       <span className="text-xs text-muted-foreground">
-            Last 20 checks 
+            {t('last20Checks')}
       </span>    
     </TooltipProvider>
   );

application/src/components/services/add-service/ServiceBasicFields.tsx

@@ -3,22 +3,24 @@ import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/comp
 import { Input } from "@/components/ui/input";
 import { UseFormReturn } from "react-hook-form";
 import { ServiceFormData } from "./types";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceBasicFieldsProps {
   form: UseFormReturn<ServiceFormData>;
 }
 
 export function ServiceBasicFields({ form }: ServiceBasicFieldsProps) {
+  const { t } = useLanguage();
   return (
     <FormField
       control={form.control}
       name="name"
       render={({ field }) => (
         <FormItem>
-          <FormLabel>Service Name</FormLabel>
+          <FormLabel>{t('serviceName')}</FormLabel>
           <FormControl>
             <Input 
-              placeholder="Enter a descriptive name for your service" 
+              placeholder={t('serviceNameDesc')}
               {...field} 
             />
           </FormControl>

application/src/components/services/add-service/ServiceConfigFields.tsx

@@ -6,12 +6,14 @@ import { UseFormReturn } from "react-hook-form";
 import { ServiceFormData } from "./types";
 import { ServiceUrlField } from "./ServiceUrlField";
 import { useState } from "react";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceConfigFieldsProps {
   form: UseFormReturn<ServiceFormData>;
 }
 
 export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
+  const { t } = useLanguage();
   const [isCustomInterval, setIsCustomInterval] = useState(false);
   const intervalValue = form.watch("interval");
 
@@ -35,7 +37,7 @@ export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
           name="interval"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Check Interval</FormLabel>
+              <FormLabel>{t("checkInterval")}</FormLabel>
               {!isCustomInterval ? (
                 <FormControl>
                   <Select onValueChange={handleIntervalChange} value={isCustomInterval ? "custom" : field.value}>
@@ -43,13 +45,13 @@ export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="30">30 seconds</SelectItem>
+                      <SelectItem value="30">30 {t("seconds")}</SelectItem>
-                      <SelectItem value="60">1 minute</SelectItem>
+                      <SelectItem value="60">1 {t("minute")}</SelectItem>
-                      <SelectItem value="300">5 minutes</SelectItem>
+                      <SelectItem value="300">5 {t("minutes")}</SelectItem>
-                      <SelectItem value="900">15 minutes</SelectItem>
+                      <SelectItem value="900">15 {t("minutes")}</SelectItem>
-                      <SelectItem value="1800">30 minutes</SelectItem>
+                      <SelectItem value="1800">30 {t("minutes")}</SelectItem>
-                      <SelectItem value="3600">1 hour</SelectItem>
+                      <SelectItem value="3600">1 {t("hour")}</SelectItem>
-                      <SelectItem value="custom">Custom</SelectItem>
+                      <SelectItem value="custom">{t("custom")}</SelectItem>
                     </SelectContent>
                   </Select>
                 </FormControl>
@@ -58,7 +60,7 @@ export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
                   <FormControl>
                     <Input
                       type="number"
-                      placeholder="Enter interval in seconds"
+                      placeholder={t("checkIntervalPlaceholder")}
                       value={field.value}
                       onChange={field.onChange}
                       min="10"
@@ -72,14 +74,14 @@ export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
                     }}
                     className="text-sm text-blue-600 hover:text-blue-800"
                   >
-                    Back to presets
+	                  {t("backToPresets")}
                   </button>
                 </div>
               )}
               <FormDescription className="text-xs">
                 {isCustomInterval 
-                  ? "Enter custom interval in seconds (minimum 10 seconds)"
+                  ? t("checkIntervalDescCustom")
-                  : "How often to check the service status"
+                  : t("checkIntervalDesc")
                 }
               </FormDescription>
               <FormMessage />
@@ -92,22 +94,22 @@ export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
           name="retries"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Retry Attempts</FormLabel>
+              <FormLabel>{t("retryAttempts")}</FormLabel>
               <FormControl>
-                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <Select onValueChange={field.onChange} value={field.value ?? "3"}>
                   <SelectTrigger>
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="1">1 attempt</SelectItem>
+                    <SelectItem value="1">1 {t("attempt")}</SelectItem>
-                    <SelectItem value="2">2 attempts</SelectItem>
+                    <SelectItem value="2">2 {t("attempts")}</SelectItem>
-                    <SelectItem value="3">3 attempts</SelectItem>
+                    <SelectItem value="3">3 {t("attempts")}</SelectItem>
-                    <SelectItem value="5">5 attempts</SelectItem>
+                    <SelectItem value="5">5 {t("attempts")}</SelectItem>
                   </SelectContent>
                 </Select>
               </FormControl>
               <FormDescription className="text-xs">
-                Number of retry attempts before marking as down
+	              {t("retryAttemptsDesc")}
               </FormDescription>
               <FormMessage />
             </FormItem>

application/src/components/services/add-service/ServiceForm.tsx

@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useState, useEffect } from "react";
 import { useToast } from "@/hooks/use-toast";
-import { serviceSchema, ServiceFormData } from "./types";
+import { useServiceSchema, ServiceFormData } from "./types";
 import { ServiceBasicFields } from "./ServiceBasicFields";
 import { ServiceTypeField } from "./ServiceTypeField";
 import { ServiceConfigFields } from "./ServiceConfigFields";
@@ -13,6 +13,8 @@ import { serviceService } from "@/services/serviceService";
 import { Service } from "@/types/service.types";
 import { ServiceRegionalFields } from "./ServiceRegionalFields";
 import { getServiceFormDefaults, mapServiceToFormData, mapFormDataToServiceData } from "./serviceFormUtils";
+import { useQueryClient } from "@tanstack/react-query";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceFormProps {
   onSuccess: () => void;
@@ -29,8 +31,12 @@ export function ServiceForm({
   isEdit = false,
   onSubmitStart
 }: ServiceFormProps) {
+  const { t } = useLanguage();
   const { toast } = useToast();
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const queryClient = useQueryClient();
+
+	const serviceSchema = useServiceSchema();
 
   // Initialize form with default values
   const form = useForm<ServiceFormData>({
@@ -68,10 +74,10 @@ export function ServiceForm({
     if (onSubmitStart) onSubmitStart();
     
     try {
-      console.log("Form data being submitted:", data);
+     // console.log("Form data being submitted:", data);
       
       const serviceData = mapFormDataToServiceData(data);
-      console.log("Service data being sent:", serviceData);
+     // console.log("Service data being sent:", serviceData);
       
       if (isEdit && initialData) {
         // Update existing service
@@ -91,6 +97,16 @@ export function ServiceForm({
         });
       }
       
+      // Force immediate refresh of services data
+      queryClient.setQueryData(["services"], (oldData: any) => {
+        // Invalidate the cache to force a fresh fetch
+        return undefined;
+      });
+      
+      // Invalidate and refetch services query
+      await queryClient.invalidateQueries({ queryKey: ["services"] });
+      await queryClient.refetchQueries({ queryKey: ["services"] });
+
       onSuccess();
       if (!isEdit) {
         form.reset();
@@ -112,23 +128,23 @@ export function ServiceForm({
       <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6 pb-6">
         <div className="space-y-6">
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Basic Information</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('basicInformation')}</h3>
             <ServiceBasicFields form={form} />
             <ServiceTypeField form={form} />
           </div>
           
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Configuration</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('configuration')}</h3>
             <ServiceConfigFields form={form} />
           </div>
 
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Regional Monitoring</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('regionalMonitoring')}</h3>
             <ServiceRegionalFields form={form} />
           </div>
           
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Notifications</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('notifications')}</h3>
             <ServiceNotificationFields form={form} />
           </div>
         </div>
@@ -136,7 +152,7 @@ export function ServiceForm({
         <ServiceFormActions 
           isSubmitting={isSubmitting} 
           onCancel={onCancel} 
-          submitLabel={isEdit ? "Update Service" : "Create Service"}
+          submitLabel={isEdit ? t("updateService") : t("createService")}
         />
       </form>
     </Form>

application/src/components/services/add-service/ServiceFormActions.tsx

@@ -2,6 +2,7 @@
 import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
 import { MouseEvent } from "react";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceFormActionsProps {
   isSubmitting: boolean;
@@ -14,6 +15,8 @@ export function ServiceFormActions({
   onCancel,
   submitLabel = "Create Service"
 }: ServiceFormActionsProps) {
+
+	const {t} = useLanguage();
   const handleCancel = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (!isSubmitting) {
@@ -29,7 +32,7 @@ export function ServiceFormActions({
         variant="outline"
         disabled={isSubmitting}
       >
-        Cancel
+	      {t("cancel")}
       </Button>
       <Button 
         type="submit" 
@@ -38,7 +41,7 @@ export function ServiceFormActions({
         {isSubmitting ? (
           <>
             <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            Processing...
+	          {t("processing")}...
           </>
         ) : (
           submitLabel

application/src/components/services/add-service/ServiceNotificationFields.tsx

@@ -1,4 +1,3 @@
-
 import { FormControl, FormField, FormItem, FormLabel, FormDescription } from "@/components/ui/form";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
@@ -8,31 +7,34 @@ import { UseFormReturn } from "react-hook-form";
 import { ServiceFormData } from "./types";
 import { useQuery } from "@tanstack/react-query";
 import { alertConfigService, AlertConfiguration } from "@/services/alertConfigService";
+import { serviceNotificationTemplateService, ServiceNotificationTemplate } from "@/services/serviceNotificationTemplateService";
 import { useState, useEffect } from "react";
+import { useLanguage } from "@/contexts/LanguageContext.tsx";
 
 interface ServiceNotificationFieldsProps {
   form: UseFormReturn<ServiceFormData>;
 }
 
 export function ServiceNotificationFields({ form }: ServiceNotificationFieldsProps) {
+	const { t } = useLanguage();
   const [alertConfigs, setAlertConfigs] = useState<AlertConfiguration[]>([]);
   
   // Get the current form values for debugging
   const notificationStatus = form.watch("notificationStatus");
   const notificationChannels = form.watch("notificationChannels") || [];
   const alertTemplate = form.watch("alertTemplate");
-  
+   
- // console.log("Current notification values:", { 
- //   notificationStatus, 
- //   notificationChannels,
- //   alertTemplate 
- // });
-  
   // Fetch alert configurations for notification channels
   const { data: alertConfigsData } = useQuery({
     queryKey: ['alertConfigs'],
     queryFn: () => alertConfigService.getAlertConfigurations(),
   });
+
+  // Fetch service notification templates
+  const { data: serviceTemplates, isLoading: isLoadingTemplates } = useQuery({
+    queryKey: ['serviceNotificationTemplates'],
+    queryFn: () => serviceNotificationTemplateService.getTemplates(),
+  });
   
   // Update alert configs when data is loaded
   useEffect(() => {
@@ -42,13 +44,19 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
       setAlertConfigs(enabledChannels);
       
       // Debug log to check what alert configs are loaded
-   //   console.log("Loaded alert configurations:", enabledChannels);
     }
   }, [alertConfigsData]);
 
+  // Debug log for service templates
+  useEffect(() => {
+    if (serviceTemplates) {
+     // console.log("Loaded service notification templates:", serviceTemplates);
+    }
+  }, [serviceTemplates]);
+
   // Log when form values change to debug
   useEffect(() => {
-  //  console.log("Notification values changed:", {
+   // console.log("Notification values changed:", {
    //   notificationStatus: form.getValues("notificationStatus"),
    //   notificationChannels: form.getValues("notificationChannels")
    // });
@@ -82,10 +90,10 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
           <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
             <div className="space-y-0.5">
               <FormLabel className="text-base">
-                Enable Notifications
+	              {t("enableNotifications")}
               </FormLabel>
               <FormDescription>
-                Enable or disable notifications for this service
+	              {t("enableNotificationsDesc")}
               </FormDescription>
             </div>
             <FormControl>
@@ -109,11 +117,11 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
         name="notificationChannels"
         render={({ field }) => (
           <FormItem>
-            <FormLabel>Notification Channels</FormLabel>
+            <FormLabel>{t("notificationChannels")}</FormLabel>
             <FormDescription>
               {notificationStatus === "enabled" 
-                ? "Select notification channels for this service"
+                ? t("notificationChannelsEnabledDesc")
-                : "Enable notifications first to select channels"}
+                : t("notificationChannelsDesc")}
             </FormDescription>
             
             {/* Display selected channels as badges */}
@@ -138,7 +146,7 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
                 value="" // Always reset to empty after selection
               >
                 <SelectTrigger className={notificationStatus !== "enabled" ? 'opacity-50' : ''}>
-                  <SelectValue placeholder="Add a notification channel" />
+                  <SelectValue placeholder={t("notificationChannelsPlaceholder")} />
                 </SelectTrigger>
                 <SelectContent>
                   {alertConfigs
@@ -159,35 +167,35 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
         control={form.control}
         name="alertTemplate"
         render={({ field }) => {
-          // Don't convert existing values to "default"
+         // console.log("Rendering alert template field with value:", field.value);
-          const displayValue = field.value || "default";
-         // console.log("Rendering alert template field with value:", displayValue);
           
           return (
             <FormItem>
-              <FormLabel>Alert Template</FormLabel>
+              <FormLabel>{t("alertTemplate")}</FormLabel>
               <FormControl>
                 <Select 
                   onValueChange={(value) => {
-                    console.log("Alert template changed to:", value);
+                    field.onChange(value);
-                    field.onChange(value === "default" ? "" : value);
                   }} 
-                  value={displayValue}
+                  value={field.value || ""}
-                  disabled={notificationStatus !== "enabled"}
+                  disabled={notificationStatus !== "enabled" || isLoadingTemplates}
                 >
                   <SelectTrigger className={notificationStatus !== "enabled" ? 'opacity-50' : ''}>
-                    <SelectValue placeholder="Select an alert template" />
+                    <SelectValue placeholder={isLoadingTemplates ? t("alertTemplateLoading") : t("alertTemplatePlaceholder")} />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="default">Default</SelectItem>
+                    {serviceTemplates?.map((template) => (
-                    {/* Add templates here when available */}
+                      <SelectItem key={template.id} value={template.id}>
+                        {template.name}
+                      </SelectItem>
+                    ))}
                   </SelectContent>
                 </Select>
               </FormControl>
               <FormDescription>
                 {notificationStatus === "enabled"
-                  ? "Choose a template for alert messages"
+                  ? t("alertTemplateEnabledDesc")
-                  : "Enable notifications first to select template"}
+                  : t("alertTemplateDesc")}
               </FormDescription>
             </FormItem>
           );
@@ -195,4 +203,4 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
       />
     </>
   );
-}
+}

application/src/components/services/add-service/ServiceRegionalFields.tsx

@@ -9,12 +9,14 @@ import { regionalService } from "@/services/regionalService";
 import { MapPin, Loader2, X, Plus } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { useLanguage } from "@/contexts/LanguageContext.tsx";
 
 interface ServiceRegionalFieldsProps {
   form: UseFormReturn<ServiceFormData>;
 }
 
 export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
+	const { t } = useLanguage();
   const regionalMonitoringEnabled = form.watch("regionalMonitoringEnabled");
   const currentRegionalAgents = form.watch("regionalAgents") || [];
 
@@ -79,10 +81,10 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
             <div className="space-y-0.5">
               <FormLabel className="text-base font-medium flex items-center gap-2">
                 <MapPin className="h-4 w-4" />
-                Regional Monitoring
+	              {t("regionalMonitoring")}
               </FormLabel>
               <div className="text-sm text-muted-foreground">
-                Assign this service to regional monitoring agents for distributed monitoring
+	              {t("regionalMonitoringDesc")}
               </div>
             </div>
             <FormControl>
@@ -107,7 +109,7 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
           name="regionalAgents"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Regional Agents</FormLabel>
+              <FormLabel>{t("regionalAgents")}</FormLabel>
               
               {/* Display selected agents */}
               {currentRegionalAgents.length > 0 && (
@@ -140,12 +142,12 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
                   <SelectTrigger>
                     <SelectValue placeholder={
                       isLoading 
-                        ? "Loading agents..." 
+                        ? t("regionalAgentsLoading")
                         : availableAgents.length > 0 
-                          ? "Select additional regional agents..."
+                          ? t("regionalAgentsAvailablePlaceholder")
                           : currentRegionalAgents.length > 0 
-                            ? "All available agents selected"
+                            ? t("regionalAgentsAllSelected")
-                            : "No regional agents available"
+                            : t("regionalAgentsNoAvailable")
                     } />
                   </SelectTrigger>
                 </FormControl>
@@ -154,14 +156,14 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
                     <SelectItem value="loading" disabled>
                       <div className="flex items-center gap-2">
                         <Loader2 className="h-4 w-4 animate-spin" />
-                        Loading agents...
+	                      t("regionalAgentsLoading")
                       </div>
                     </SelectItem>
                   ) : availableAgents.length === 0 ? (
                     <SelectItem value="no-agents" disabled>
                       {currentRegionalAgents.length > 0 
-                        ? "All available agents selected"
+                        ? t("regionalAgentsAllSelected")
-                        : "No online regional agents available"
+                        : t("regionalAgentsNoOnlineAvailable")
                       }
                     </SelectItem>
                   ) : (
@@ -190,13 +192,13 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
               
               {regionalMonitoringEnabled && onlineAgents.length === 0 && !isLoading && (
                 <p className="text-sm text-amber-600">
-                  No online regional agents found. Services will use default monitoring.
+	                {t("regionalAgentsNotFoundMessage")}
                 </p>
               )}
               
               {currentRegionalAgents.length === 0 && regionalMonitoringEnabled && (
                 <p className="text-sm text-orange-600">
-                  No regional agents selected. Service will use default monitoring.
+	                {t("regionalAgentsNotSelectedMessage")}
                 </p>
               )}
               

application/src/components/services/add-service/ServiceTypeField.tsx

@@ -4,12 +4,14 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Globe, Wifi, Server, Globe2 } from "lucide-react";
 import { UseFormReturn } from "react-hook-form";
 import { ServiceFormData } from "./types";
+import { useLanguage } from "@/contexts/LanguageContext.tsx";
 
 interface ServiceTypeFieldProps {
   form: UseFormReturn<ServiceFormData>;
 }
 
 export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
+	const { t } = useLanguage();
   const getServiceIcon = (type: string) => {
     switch (type) {
       case "http":
@@ -31,7 +33,7 @@ export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
       name="type"
       render={({ field }) => (
         <FormItem>
-          <FormLabel>Service Type</FormLabel>
+          <FormLabel>{t("serviceType")}</FormLabel>
           <FormControl>
             <Select 
               onValueChange={field.onChange} 
@@ -56,7 +58,7 @@ export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
                       <span>HTTP/S</span>
                     </div>
                     <p className="text-xs text-muted-foreground mt-1">
-                      Monitor websites and REST APIs with HTTP/HTTPS Protocol 
+	                    {t("serviceTypeHTTPDesc")}
                     </p>
                   </div>
                 </SelectItem>
@@ -67,7 +69,7 @@ export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
                       <span>PING</span>
                     </div>
                     <p className="text-xs text-muted-foreground mt-1">
-                      Monitor host availability with PING Protocol
+	                    {t("serviceTypePINGDesc")}
                     </p>
                   </div>
                 </SelectItem>
@@ -78,7 +80,7 @@ export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
                       <span>TCP</span>
                     </div>
                     <p className="text-xs text-muted-foreground mt-1">
-                      Monitor TCP port connectivity with TCP Protocol
+	                    {t("serviceTypeTCPDesc")}
                     </p>
                   </div>
                 </SelectItem>
@@ -89,7 +91,7 @@ export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
                       <span>DNS</span>
                     </div>
                     <p className="text-xs text-muted-foreground mt-1">
-                      Monitor DNS resolution
+	                    {t("serviceTypeDNSDesc")}
                     </p>
                   </div>
                 </SelectItem>

application/src/components/services/add-service/ServiceUrlField.tsx

@@ -3,12 +3,14 @@ import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormDescripti
 import { Input } from "@/components/ui/input";
 import { UseFormReturn } from "react-hook-form";
 import { ServiceFormData } from "./types";
+import { useLanguage } from "@/contexts/LanguageContext.tsx";
 
 interface ServiceUrlFieldProps {
   form: UseFormReturn<ServiceFormData>;
 }
 
 export function ServiceUrlField({ form }: ServiceUrlFieldProps) {
+	const { t } = useLanguage();
   const serviceType = form.watch("type");
   
   const getPlaceholder = () => {
@@ -22,35 +24,35 @@ export function ServiceUrlField({ form }: ServiceUrlFieldProps) {
       case "dns":
         return "example.com";
       default:
-        return "Enter URL or hostname";
+        return t("targetDefaultPlaceholder");
     }
   };
 
   const getDescription = () => {
     switch (serviceType) {
       case "http":
-        return "Enter the full URL including protocol (http:// or https://)";
+        return t("targetHTTPDesc");
       case "ping":
-        return "Enter hostname or IP address to ping";
+        return t("targetPINGDesc");
       case "tcp":
-        return "Enter hostname or IP address for TCP connection test";
+        return t("targetTCPDesc");
       case "dns":
-        return "Enter domain name for DNS record monitoring (A, AAAA, MX, etc.)";
+        return t("targetDNSDesc");
       default:
-        return "Enter the target URL or hostname for monitoring";
+        return t("targetDefaultDesc");
     }
   };
 
   const getFieldLabel = () => {
     switch (serviceType) {
       case "dns":
-        return "Domain Name";
+        return t("targetDNS");
       case "ping":
         return "Hostname/IP";
       case "tcp":
         return "Hostname/IP";
       default:
-        return "Target URL/Host";
+        return t("targetDefault");
     }
   };
 
@@ -67,7 +69,7 @@ export function ServiceUrlField({ form }: ServiceUrlFieldProps) {
                 placeholder={getPlaceholder()}
                 {...field}
                 onChange={(e) => {
-                  console.log(`${serviceType === "dns" ? "Domain" : serviceType === "tcp" ? "Host" : "URL"} field changed:`, e.target.value);
+                //  console.log(`${serviceType === "dns" ? "Domain" : serviceType === "tcp" ? "Host" : "URL"} field changed:`, e.target.value);
                   field.onChange(e);
                 }}
               />
@@ -93,13 +95,13 @@ export function ServiceUrlField({ form }: ServiceUrlFieldProps) {
                   type="number"
                   {...field}
                   onChange={(e) => {
-                    console.log("Port field changed:", e.target.value);
+                   // console.log("Port field changed:", e.target.value);
                     field.onChange(e);
                   }}
                 />
               </FormControl>
               <FormDescription className="text-xs">
-                Enter the port number for TCP connection test
+	              {t("targetTCPPortDesc")}
               </FormDescription>
               <FormMessage />
             </FormItem>

application/src/components/services/add-service/serviceFormUtils.ts

@@ -74,7 +74,6 @@ export const mapServiceToFormData = (service: Service): ServiceFormData => {
         notificationChannels.push(...parsedChannels);
       }
     } catch (error) {
-     // console.warn("Failed to parse notification_channel JSON:", error);
       // If parsing fails, treat as single channel ID
       notificationChannels.push(service.notification_channel);
     }
@@ -91,16 +90,13 @@ export const mapServiceToFormData = (service: Service): ServiceFormData => {
     }
   }
 
-//  console.log("Mapping service to form data:", {
+  // Handle notification_status - it can be boolean or string
- //   serviceName: service.name,
+  let notificationStatus: "enabled" | "disabled" = "disabled";
- //   notification_status: service.notification_status,
+  if (typeof service.notification_status === "boolean") {
- //   notification_channel: service.notification_channel,
+    notificationStatus = service.notification_status ? "enabled" : "disabled";
- //   notificationChannel: service.notificationChannel,
+  } else if (typeof service.notification_status === "string") {
- //   mappedChannels: notificationChannels,
+    notificationStatus = service.notification_status === "enabled" ? "enabled" : "disabled";
-  //  regionalAgents: regionalAgents,
+  }
-  //  region_name: service.region_name,
-  ///  agent_id: service.agent_id
- // });
 
   return {
     name: service.name || "",
@@ -109,7 +105,7 @@ export const mapServiceToFormData = (service: Service): ServiceFormData => {
     port: portValue,
     interval: String(service.interval || 60),
     retries: String(service.retries || 3),
-    notificationStatus: service.notification_status || "disabled",
+    notificationStatus: notificationStatus,
     notificationChannels: notificationChannels,
     alertTemplate: service.alertTemplate === "default" ? "" : service.alertTemplate || "",
     regionalMonitoringEnabled: isRegionalEnabled,
@@ -152,7 +148,8 @@ export const mapFormDataToServiceData = (data: ServiceFormData) => {
     type: data.type,
     interval: parseInt(data.interval),
     retries: parseInt(data.retries),
-    notificationStatus: data.notificationStatus || "disabled",
+    // Convert string status to boolean for notification_status field
+    notificationStatus: data.notificationStatus === "enabled",
     notificationChannels: data.notificationChannels || [],
     alertTemplate: data.alertTemplate === "default" ? "" : data.alertTemplate,
     // Use regional_status field and store multiple agents as comma-separated values

application/src/components/services/add-service/types.ts

@@ -1,22 +1,46 @@
-
 import { z } from "zod";
+import type { ZodSchema } from "zod";
+import { useLanguage } from "@/contexts/LanguageContext";
 
-export const serviceSchema = z.object({
-  name: z.string().min(1, "Service name is required"),
-  type: z.enum(["http", "ping", "tcp", "dns"]),
-  url: z.string().min(1, "URL/Domain/Host is required").refine((value) => {
-    // Basic validation - more specific validation can be added per type
-    return value.trim().length > 0;
-  }, "Please enter a valid URL, hostname, or domain"),
-  port: z.string().optional(),
-  interval: z.string(),
-  retries: z.string(),
-  notificationStatus: z.enum(["enabled", "disabled"]).optional(),
-  notificationChannels: z.array(z.string()).optional(),
-  alertTemplate: z.string().optional(),
-  // Regional monitoring fields - now supports multiple agents
-  regionalMonitoringEnabled: z.boolean().optional(),
-  regionalAgents: z.array(z.string()).optional(),
-});
 
-export type ServiceFormData = z.infer<typeof serviceSchema>;
+export type ServiceFormData = {
+  name: string;
+  type: "http" | "ping" | "tcp" | "dns";
+  url: string;
+  port?: string;
+  interval: string;
+  retries: string;
+  notificationStatus?: "enabled" | "disabled";
+  notificationChannels?: string[];
+  alertTemplate?: string;
+  regionalMonitoringEnabled?: boolean;
+  regionalAgents?: string[];
+};
+
+// Hook to use the schema with translations
+export const useServiceSchema = () => {
+  const { t } = useLanguage();
+  return z.object({
+      name: z.string().min(1, t("serviceNameRequired")),
+      type: z.enum(["http", "ping", "tcp", "dns"]),
+      url: z.string()
+        .min(1, t("urlDomainHostRequired"))
+        .refine(
+          (value) => !/\s/.test(value),
+          t("spacesNotAllowed")
+        )
+        .refine(
+          (value) => value.trim().length > 0,
+          t("enterValidUrlHostnameDomain")
+        ),
+      port: z.string().optional(),
+      interval: z.string(),
+      retries: z.string(),
+      notificationStatus: z.enum(["enabled", "disabled"]).optional(),
+      notificationChannels: z.array(z.string()).optional(),
+      alertTemplate: z.string().optional(),
+      // Regional monitoring fields - now supports multiple agents
+      regionalMonitoringEnabled: z.boolean().optional(),
+      regionalAgents: z.array(z.string()).optional(),
+    });
+};

application/src/components/services/incident-history/IncidentTable.tsx

@@ -25,8 +25,8 @@ export function IncidentTable({ incidents }: IncidentTableProps) {
           <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("time")}</TableHead>
           <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("status")}</TableHead>
           <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("responseTime")}</TableHead>
-          <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>Error Message</TableHead>
+          <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("errorMessage")}</TableHead>
-          <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>Details</TableHead>
+          <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("details")}</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>