feat: Add notification, integrate data retention service, and improve i18n support (#164)

* fix(ssl):  Ensure edit form saves notification_id and template_id in DB.

- The SSL edit form was not saving the `notification_id` and `template_id` fields to the PB database when re-assigning the Notification Channel and Alert Template.

* chore(partners): add Cloudflare to Ecosystem & Community Partner section

- Cloudflare has been added to the Ecosystem & Community Partner list to acknowledge their support and contribution.

* ⏳ chore(project): update development status and progress

- fix(ssl): ensure edit form saves notification_id and template_id in DB
- feat(notifications): add Notifiarr notification channel (planned)

* feat: Add Notifiarr to notification channels (UI)

- Add Notifiarr as a new channel type in the notification settings. The Notifiarr channel will use the `api_token` field for API key storage in PB.

* feat: Add channel_id field for Notifiarr

- Add channel_id field for Notifiarr to store record of the discord channel_id into the PB.

* feat: Implement Notifiarr notification service

- The Notifiarr notification functionality has been implemented. The alert configuration channel will now use the `api_token` and `channel_id` field for send to the Notifiarr API endpoint.

* ⏳ chore(project): update development status and progress

- feat: Add channel_id field for Notifiarr
- feat: Implement Notifiarr notification service

Closes: #133

* feat: add SSL history and Notifiarr notification channel schema

* Fix: Remove duplicate close button

- Removed the duplicate close button from the test email dialog.

* feat: Add Gotify to notification channels

- Add Gotify  as a new channel type in the notification settings. The Gotify channel will use the `api_token` and `server_url` field for API key storage in PB.

* feat: Implement Gotify notification service

- The Gotify notification functionality has been implemented. The alert configuration channel will now use the `api_token` and `server_url` field for send to the Gotify API endpoint.

* ⏳ chore(project): update development status and progress
- feat: Add server_url field for Gotify
- feat: Implement Gotify notification service

* refactory(i18n): Improve internationalization configuration and add new translations

- Added multiple new translation items
- Updated the two language files: en and zhcn
- Added type definitions for new translation items in types/services.ts
- Modified some components to use the new translation items

* refactory(i18n): Added architecture import function translation for the "About" page

- Added translation items related to schema import in English, Chinese, and type definition files
- Replaced hard-coded text with new translation items in the AboutSystem component

* refactory(i18n): Added architecture import function translation for the "About" page

- Added translation items related to schema import in English, Chinese, and type definition files
- Replaced hard-coded text with new translation items in the AboutSystem component

* refactory(i18n): Add internationalization support for the service statistics card

* feat: Add NTFY API token field for Token-based authentication to ntfy server

- Add the api_token field for NTFY notifications in both the dialog and service to save it to PB. NTFY schema to include api_token field.

* feat(auth): add token support for ntfy

- Updated the NTFY service to support API token authentication by adding Authorization Bearer header when api_token is provided.

Closes: #89

* refactor(i18n): Added Chinese translations for Create Event and Maintenance

- Supplemented missing Chinese translations
- Added translation entries related to Create Event and Maintenance in both English and Chinese translation files

* chore: deactivate GitHub donation

* refactor(i18n): Optimize internationalization configuration and add new translation items

- Add internationalization support to the LoadingState component
- Implement internationalization translations in the Profile page
- Use internationalized text in the TestEmailDialog component
- Update English and Chinese translation files by adding new translation entries

* docs(readme): deactivate donations, accept only infra support (cloud, domain, hosting)

* feat(i18n): Enhanced internationalization support with variable interpolation

- Refactored the `t` function in LanguageContext to support multiple parameter combinations
- Added variable interpolation feature, allowing variables in translated texts
- Optimized translation logic to improve accuracy and performance
- Enhanced type safety by using TypeScript generics to ensure correct typing

* refactor(i18n): Optimize service pagination internationalization copy

- Added service pagination related copy in English and Chinese translation files
- Updated type definitions to include new translation fields
- Modified the ServicesPagination component to use the newly added translation fields

* docs(README_zhcn): Update documentation content and sponsorship policy

- Update image links in the documentation
- Revise the sponsorship policy to no longer accept individual sponsorships, only enterprise-level collaborations
- Update the display method for supporters and partners
- Add Cloudflare and DigitalOcean as new partners

* feat: Integrate data retention service

- Implemented the data retention service in Go (service-operation) that manages cleanup of old records based on configured retention periods. The service runs once per day to ensure outdated data is removed automatically.

* refactor: Remove manual cleanup buttons from Data Retention Settings

- The three manual cleanup buttons have been removed from the dashboard.
- The data retention service now automatically runs once per day, cleaning up older data based on the configured retention settings.

---------

Co-authored-by: YiZixuan <sqkkyzx@qq.com>
Co-authored-by: YiZixuan <sqkkyzx@outlook.com>

.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,9 @@ 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

.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,9 @@ 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

.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

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,8 +45,10 @@ 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 
 - Monitor HTTP, DNS, and Ping protocols
@@ -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,42 @@ 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>
+</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 +171,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: [@checkcle_oss](https://x.com/checkcle_oss)
-- 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! 🌐

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-lock.json

@@ -27,7 +27,7 @@
         "@radix-ui/react-radio-group": "^1.2.0",
         "@radix-ui/react-scroll-area": "^1.1.0",
         "@radix-ui/react-select": "^2.1.1",
-        "@radix-ui/react-separator": "^1.1.0",
+        "@radix-ui/react-separator": "^1.1.6",
         "@radix-ui/react-slider": "^1.2.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-switch": "^1.1.0",
@@ -43,6 +43,8 @@
         "date-fns": "^3.6.0",
         "embla-carousel-react": "^8.3.0",
         "input-otp": "^1.2.4",
+        "jspdf": "^3.0.1",
+        "jspdf-autotable": "^5.0.2",
         "lucide-react": "^0.462.0",
         "next-themes": "^0.3.0",
         "pocketbase": "^0.19.0",
@@ -91,13 +93,10 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.25.9",
+      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.3.tgz",
-      "integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==",
+      "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==",
       "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1811,12 +1810,12 @@
       }
     },
     "node_modules/@radix-ui/react-separator": {
-      "version": "1.1.0",
+      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
-      "integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.0"
+        "@radix-ui/react-primitive": "2.1.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1833,6 +1832,62 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slider": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.1.tgz",
@@ -2832,6 +2887,13 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/react": {
       "version": "18.3.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
@@ -2853,6 +2915,13 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.11.0.tgz",
@@ -3206,6 +3275,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -3250,6 +3331,16 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -3318,6 +3409,18 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -3358,6 +3461,26 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3843,6 +3966,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "3.45.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.0.tgz",
+      "integrity": "sha512-c2KZL9lP4DjkN3hk/an4pWn5b5ZefhRJnAc42n6LJ19kSnbeRbdQZE5dSeE2LBol1OwJD3X1BQvFTAsa8ReeDA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3856,6 +3991,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4064,6 +4209,16 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+      "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -4424,6 +4579,12 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4647,6 +4808,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4848,6 +5023,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jspdf": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.1.tgz",
+      "integrity": "sha512-qaGIxqxetdoNnFQQXxTKUD9/Z7AloLaw94fFsOiJMxbfYdBbrBuhWmbzI8TVjrw7s3jBY1PFHofBKMV/wZPapg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf-autotable": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.2.tgz",
+      "integrity": "sha512-YNKeB7qmx3pxOLcNeoqAv3qTS7KuvVwkFe5AduCawpop3NOkBUtqDToxNc225MlNecxT4kP2Zy3z/y/yvGdXUQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "jspdf": "^2 || ^3"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -5208,6 +5410,13 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -5450,6 +5659,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -5708,10 +5927,11 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
+      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/resolve": {
       "version": "1.22.8",
@@ -5750,6 +5970,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz",
@@ -5883,6 +6113,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -6039,6 +6279,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.5.4",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
@@ -6095,6 +6345,16 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -6314,6 +6574,16 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/vaul": {
       "version": "0.9.9",
       "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.9.9.tgz",

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,15 +1,13 @@
-
 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 } from "lucide-react";
 import { useLanguage } from "@/contexts/LanguageContext";
 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";
 
 interface HeaderProps {
   currentUser: AuthUser | null;
@@ -29,7 +27,6 @@ export const Header = ({
   const [greeting, setGreeting] = useState<string>("");
   const { systemName } = useSystemSettings();
   const navigate = useNavigate();
-  const [quickActionsOpen, setQuickActionsOpen] = useState(false);
 
   // Set greeting based on time of day
   useEffect(() => {
@@ -53,7 +50,7 @@ export const Header = ({
   // Log avatar data for debugging
   useEffect(() => {
     if (currentUser) {
-    //  console.log("Avatar URL in Header:", currentUser.avatar);
+      //console.log("Avatar URL in Header:", currentUser.avatar);
     }
   }, [currentUser]);
 
@@ -66,7 +63,7 @@ export const Header = ({
     } else {
       avatarUrl = currentUser.avatar;
     }
-   // console.log("Final avatar URL:", avatarUrl);
+    console.log("Final avatar URL:", avatarUrl);
   }
 
   return (
@@ -91,16 +88,6 @@ export const Header = ({
           {sidebarCollapsed ? <PanelLeft className="h-5 w-5" /> : <PanelLeftClose className="h-5 w-5" />}
         </Button>
         
-        {/* Quick Actions Button */}
-        <Button 
-          variant="ghost" 
-          size="icon" 
-          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>
@@ -129,9 +116,15 @@ export const Header = ({
             <DropdownMenuItem onClick={() => setLanguage("de")} className={language === "de" ? "bg-accent" : ""}>
               {t("Deutsch")}
             </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>
         
@@ -162,7 +155,7 @@ export const Header = ({
           variant="outline" 
           size="icon" 
           className="rounded-full w-8 h-8 border-border"
-          onClick={() => window.open("https://x.com/tlengoss", "_blank")}
+          onClick={() => window.open("https://x.com/checkcle_oss)", "_blank")}
         >
           <span className="sr-only">X (Twitter)</span>
           <Twitter className="w-4 h-4" />
@@ -223,9 +216,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/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/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,7 +7,7 @@ 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';
@@ -17,12 +18,6 @@ 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 [showAddForm, setShowAddForm] = useState(false);
   const [newComponent, setNewComponent] = useState({
@@ -169,7 +164,7 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC
                   <SelectTrigger>
                     <SelectValue placeholder="Select an uptime service" />
                   </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">
@@ -206,37 +201,6 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC
             </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

@@ -67,13 +67,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 +84,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 +93,7 @@ export const CreateOperationalPageDialog = () => {
       form.reset();
       setSelectedComponents([]);
     } catch (error) {
-      console.error('Error creating operational page:', error);
+     // console.error('Error creating operational page:', error);
     }
   };
 

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

@@ -41,11 +41,11 @@ export const OperationalPageCard = ({ page, onEdit, onView, onDelete }: Operatio
           </div>
           <div>
             <span className="font-medium text-muted-foreground">Public:</span>
-            <p className="mt-1">
+            <div className="mt-1">
               <Badge variant={page.is_public === 'true' ? 'default' : 'secondary'}>
                 {page.is_public === 'true' ? 'Yes' : 'No'}
               </Badge>
-            </p>
+            </div>
           </div>
           <div>
             <span className="font-medium text-muted-foreground">Updated:</span>

application/src/components/public/PublicStatusPage.tsx

@@ -12,7 +12,7 @@ import { PublicStatusPageFooter } from './PublicStatusPageFooter';
 
 export const PublicStatusPage = () => {
   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 +51,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 (

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

@@ -114,7 +114,7 @@ export const AddRegionalAgentDialog: React.FC<AddRegionalAgentDialogProps> = ({
           textarea.setSelectionRange(0, 99999); // For mobile devices
         }
       } catch (selectError) {
-        console.error('Failed to select text:', selectError);
+      //  console.error('Failed to select text:', selectError);
       }
     }
   };

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,12 +45,15 @@ 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'),
         description: t('incidentUpdatedDesc'),

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,6 +14,7 @@ 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";
 
 interface AddServerAgentDialogProps {
@@ -123,9 +124,10 @@ export const AddServerAgentDialog: React.FC<AddServerAgentDialogProps> = ({
         </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="one-click">One-Click Install</TabsTrigger>
+            <TabsTrigger value="docker-one-click">Docker One-Click</TabsTrigger>
             <TabsTrigger value="manual">Manual Installation</TabsTrigger>
           </TabsList>
 
@@ -151,6 +153,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,176 @@
+
+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";
+
+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 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" />
+            Docker One-Click Install
+          </CardTitle>
+          <CardDescription className="text-blue-600 dark:text-blue-300">
+            Automated Docker container installation with system monitoring capabilities
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label className="text-blue-700 dark:text-blue-400">Docker One-Click Command</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" />
+                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">This script will automatically:</p>
+            <ol className="list-decimal list-inside space-y-1 text-xs">
+              <li>Download and setup the Docker monitoring agent</li>
+              <li>Configure all required environment variables</li>
+              <li>Start the container with proper system access</li>
+              <li>Setup monitoring data persistence</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" />
+            Direct Docker Run Command
+          </CardTitle>
+          <CardDescription>
+            If you prefer to run the Docker container directly without the script
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label>Docker Run Command</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" />
+                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">Prerequisites for direct Docker run:</p>
+            <ol className="list-decimal list-inside space-y-1 text-xs">
+              <li>Docker must be installed and running</li>
+              <li>The operacle/checkcle-server-agent image must be available</li>
+              <li>Run as root or with sudo privileges</li>
+            </ol>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end pt-4">
+        <Button onClick={onDialogClose}>
+          Done
+        </Button>
+      </div>
+    </div>
+  );
+};

application/src/components/servers/EditServerDialog.tsx

@@ -12,7 +12,7 @@ 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";
 
 interface EditServerDialogProps {
@@ -25,7 +25,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
@@ -49,7 +49,7 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
   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 +66,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 +78,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 +86,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,10 +108,8 @@ 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({
@@ -166,7 +163,6 @@ 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",
@@ -180,10 +176,10 @@ 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",
@@ -200,7 +196,6 @@ 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",
@@ -211,47 +206,6 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
     }
   };
 
-  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,22 +230,56 @@ 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: "Warning",
+            description: "Server updated but failed to update threshold values.",
+          });
+        }
+      }
+
       toast({
         title: "Server updated",
         description: `${formData.name} has been updated successfully.`,
@@ -301,7 +289,6 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
       onOpenChange(false);
       
     } catch (error) {
-    //  console.error('Error updating server:', error);
       toast({
         variant: "destructive",
         title: "Error",
@@ -321,9 +308,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",
@@ -372,20 +359,20 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="retryAttempts">Retry Attempts</Label>
+              <Label htmlFor="maxRetries">Max Retries</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="Select max retries" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="1">1 attempt</SelectItem>
+                  <SelectItem value="1">1 retry</SelectItem>
-                  <SelectItem value="2">2 attempts</SelectItem>
+                  <SelectItem value="2">2 retries</SelectItem>
-                  <SelectItem value="3">3 attempts</SelectItem>
+                  <SelectItem value="3">3 retries</SelectItem>
-                  <SelectItem value="5">5 attempts</SelectItem>
+                  <SelectItem value="5">5 retries</SelectItem>
-                  <SelectItem value="10">10 attempts</SelectItem>
+                  <SelectItem value="10">10 retries</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -416,10 +403,8 @@ 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>
@@ -516,16 +501,8 @@ 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>
-                        <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">
@@ -621,27 +598,39 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
                       <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">RAM Message</Label>
                             <p className="text-sm bg-background p-2 rounded border">
-                              {selectedTemplate.up_message || "No RAM threshold message defined"}
+                              {selectedTemplate.ram_message || "No RAM message defined"}
                             </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">CPU Message</Label>
                             <p className="text-sm bg-background p-2 rounded border">
-                              {selectedTemplate.down_message || "No CPU threshold message defined"}
+                              {selectedTemplate.cpu_message || "No CPU message defined"}
                             </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">Disk Message</Label>
                             <p className="text-sm bg-background p-2 rounded border">
-                              {selectedTemplate.incident_message || "No disk threshold message defined"}
+                              {selectedTemplate.disk_message || "No disk message defined"}
                             </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">Network Message</Label>
                             <p className="text-sm bg-background p-2 rounded border">
-                              {selectedTemplate.maintenance_message || "No network threshold message defined"}
+                              {selectedTemplate.network_message || "No network message defined"}
+                            </p>
+                          </div>
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">Up Message</Label>
+                            <p className="text-sm bg-background p-2 rounded border">
+                              {selectedTemplate.up_message || "No up message defined"}
+                            </p>
+                          </div>
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">Down Message</Label>
+                            <p className="text-sm bg-background p-2 rounded border">
+                              {selectedTemplate.down_message || "No down message defined"}
                             </p>
                           </div>
                         </div>
@@ -678,3 +667,5 @@ export const EditServerDialog: React.FC<EditServerDialogProps> = ({
     </Dialog>
   );
 };
+
+export default EditServerDialog;

application/src/components/servers/ManualInstallTab.tsx

@@ -25,7 +25,7 @@ export const ManualInstallTab: React.FC<ManualInstallTabProps> = ({
   onDialogClose,
 }) => {
   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 [
       {

application/src/components/servers/OneClickInstallTab.tsx

@@ -27,7 +27,7 @@ export const OneClickInstallTab: React.FC<OneClickInstallTabProps> = ({
   onDialogClose,
 }) => {
   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,7 +55,7 @@ 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
+          One-Click Install (Recommended)
         </CardTitle>
         <CardDescription className="text-green-600 dark:text-green-300">
           Copy and paste this single command to install the monitoring agent instantly

application/src/components/servers/ServerTable.tsx

@@ -269,7 +269,11 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                     const isProcessing = pausingServers.has(server.id);
 
                     return (
-                      <TableRow key={server.id} className="hover:bg-muted/50">
+                      <TableRow 
+                        key={server.id} 
+                        className="hover:bg-muted/50 cursor-pointer"
+                        onClick={() => handleViewDetails(server.id)}
+                      >
                         <TableCell className="font-medium">
                           <div className="truncate" title={server.name}>
                             {server.name}
@@ -325,7 +329,7 @@ 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}>
@@ -338,19 +342,19 @@ 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
                               </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
                                 </DropdownMenuItem>
                               )}
                               <DropdownMenuSeparator />
                               <DropdownMenuItem 
-                                onClick={() => handlePauseResume(server)}
+                                onClick={(e) => { e.stopPropagation(); handlePauseResume(server); }}
                                 disabled={isProcessing}
                               >
                                 {isPaused ? (
@@ -366,12 +370,12 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                                 )}
                               </DropdownMenuItem>
                               <DropdownMenuSeparator />
-                              <DropdownMenuItem onClick={() => handleEdit(server)}>
+                              <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleEdit(server); }}>
                                 <Edit className="mr-2 h-4 w-4" />
                                 Edit Server
                               </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" />

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/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/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",

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

@@ -81,8 +81,8 @@ export function ServicesPagination({
         </Select>
         <span className="text-sm text-muted-foreground whitespace-nowrap">
 	        {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(() => {
@@ -84,7 +86,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,13 +7,16 @@ 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
@@ -22,18 +24,18 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
   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(() => {
     if (alertConfigsData) {
@@ -42,10 +44,16 @@ 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:", {
@@ -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>
           );

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,13 +1,34 @@
-
 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"),
+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, "URL/Domain/Host is required").refine((value) => {
+      url: z.string()
-    // Basic validation - more specific validation can be added per type
+        .min(1, t("urlDomainHostRequired"))
-    return value.trim().length > 0;
+        .refine(
-  }, "Please enter a valid URL, hostname, or domain"),
+          (value) => value.trim().length > 0,
+          t("enterValidUrlHostnameDomain")
+        ),
       port: z.string().optional(),
       interval: z.string(),
       retries: z.string(),
@@ -17,6 +38,5 @@ export const serviceSchema = z.object({
       // Regional monitoring fields - now supports multiple agents
       regionalMonitoringEnabled: z.boolean().optional(),
       regionalAgents: z.array(z.string()).optional(),
-});
+    });
-
+};
-export type ServiceFormData = z.infer<typeof serviceSchema>;

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>

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

@@ -9,10 +9,12 @@ import { IncidentTable } from "./IncidentTable";
 import { StatusFilter, PageSize } from "./types";
 import { getStatusChangeEvents } from "./utils";
 import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 export function LatestChecksTable({ uptimeData }: { uptimeData: UptimeData[] }) {
   // Get current theme
   const { theme } = useTheme();
+	const { t } = useLanguage();
   
   // Filter state
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
@@ -65,7 +67,7 @@ export function LatestChecksTable({ uptimeData }: { uptimeData: UptimeData[] })
       <CardHeader>
         <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
           <CardTitle className="text-card-foreground">
-            <span>Incident History</span>
+            <span>{t("incidentHistory")}</span>
           </CardTitle>
           <StatusFilterTabs statusFilter={statusFilter} onStatusFilterChange={setStatusFilter} />
         </div>

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

@@ -15,6 +15,7 @@ import {
   SelectValue 
 } from "@/components/ui/select";
 import { PageSize } from "./types";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface TablePaginationProps {
   currentPage: number;
@@ -35,6 +36,7 @@ export function TablePagination({
   onPageChange,
   onPageSizeChange,
 }: TablePaginationProps) {
+	const {t} = useLanguage()
   // Generate page numbers
   const getPageNumbers = () => {
     const pages = [];
@@ -58,7 +60,7 @@ export function TablePagination({
   return (
     <div className="mt-4 flex items-center justify-between">
       <div className="flex items-center space-x-2">
-        <span className="text-sm text-muted-foreground">Rows per page:</span>
+        <span className="text-sm text-muted-foreground">{t("rowsPerPage")}:</span>
         <Select
           value={pageSize}
           onValueChange={(value) => onPageSizeChange(value as PageSize)}

application/src/components/services/service-row/ServiceRowActions.tsx

@@ -12,6 +12,7 @@ import {
 import { Service } from "@/types/service.types";
 import { serviceService } from "@/services/serviceService";
 import { useToast } from "@/hooks/use-toast";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface ServiceRowActionsProps {
   service: Service;
@@ -31,6 +32,7 @@ export const ServiceRowActions = ({
   onMuteAlerts
 }: ServiceRowActionsProps) => {
   const { toast } = useToast();
+	const { t } = useLanguage();
 
   // Handle pause/resume directly from dropdown
   const handlePauseResume = async (e: React.MouseEvent) => {
@@ -122,7 +124,7 @@ export const ServiceRowActions = ({
             }}
           >
             <Eye className="h-4 w-4" />
-            <span>View Detail</span>
+            <span>{t("viewDetail")}</span>
           </DropdownMenuItem>
           <DropdownMenuItem 
             className="flex items-center gap-2 cursor-pointer text-base py-2.5"
@@ -131,12 +133,12 @@ export const ServiceRowActions = ({
             {service.status === "paused" ? (
               <>
                 <Play className="h-4 w-4" />
-                <span>Resume Monitoring</span>
+                <span>{t("resumeMonitoring")}</span>
               </>
             ) : (
               <>
                 <Pause className="h-4 w-4" />
-                <span>Pause Monitoring</span>
+                <span>{t("pauseMonitoring")}</span>
               </>
             )}
           </DropdownMenuItem>
@@ -148,7 +150,7 @@ export const ServiceRowActions = ({
             }}
           >
             <Edit className="h-4 w-4" />
-            <span>Edit</span>
+            <span>{t("edit")}</span>
           </DropdownMenuItem>
           <DropdownMenuItem 
             className="flex items-center gap-2 cursor-pointer text-base py-2.5"
@@ -157,12 +159,12 @@ export const ServiceRowActions = ({
             {alertsMuted ? (
               <>
                 <Bell className="h-4 w-4" />
-                <span>Unmute Alerts</span>
+                <span>{t("unmuteAlerts")}</span>
               </>
             ) : (
               <>
                 <BellOff className="h-4 w-4" />
-                <span>Mute Alerts</span>
+                <span>{t("muteAlerts")}</span>
               </>
             )}
           </DropdownMenuItem>
@@ -175,7 +177,7 @@ export const ServiceRowActions = ({
             }}
           >
             <Trash2 className="h-4 w-4" />
-            <span>Delete</span>
+            <span>{t("delete")}</span>
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>

application/src/components/services/uptime/UptimeSummary.tsx

@@ -1,5 +1,6 @@
 
 import React from 'react';
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface UptimeSummaryProps {
   uptime: number;
@@ -7,13 +8,14 @@ interface UptimeSummaryProps {
 }
 
 export const UptimeSummary = ({ uptime, interval }: UptimeSummaryProps) => {
+	const { t } = useLanguage();
   return (
     <div className="flex items-center justify-between text-xs mt-1">
       <span className="text-muted-foreground">
         {Math.round(uptime)}% uptime
       </span>
       <span className="text-xs text-muted-foreground">
-        Last 20 checks
+	      {t('last20Checks')}
       </span>
     </div>
   );

application/src/components/settings/about-system/AboutSystem.tsx

@@ -1,46 +1,289 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
-import { format } from 'date-fns';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Card, CardContent, CardDescription, CardHeader, CardTitle,
-} from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import {
+import { Github, FileText, Twitter, MessageCircle, Code2, ServerIcon, FolderOpen, Database, CheckCircle } from "lucide-react";
-  Github, FileText, Twitter, MessageCircle, Code2, ServerIcon,
-} from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { useTheme } from "@/contexts/ThemeContext";
 import { useSystemSettings } from "@/hooks/useSystemSettings";
+import { pb } from "@/lib/pocketbase";
+import { toast } from "@/components/ui/use-toast";
 
 export const AboutSystem: React.FC = () => {
   const { t } = useLanguage();
   const { theme } = useTheme();
   const { systemName } = useSystemSettings();
+  const [isImporting, setIsImporting] = useState(false);
+  const [mergeFields, setMergeFields] = useState(true);
+  const [importResult, setImportResult] = useState<{
+    success: boolean;
+    created: number;
+    updated: number;
+    skipped: number;
+  } | null>(null);
 
-  const [version, setVersion] = useState<string>('...');
+  // Helper function to check if a collection is a system collection
-  const [releaseDate, setReleaseDate] = useState<string>('...');
+  const isSystemCollection = (name: string): boolean => {
+    return name.startsWith('_') || ['users'].includes(name);
+  };
+
+  // Helper function to validate collection schema
+  const validateCollectionSchema = (collection: any): string | null => {
+    if (!collection.name) return "Collection name is required";
+    if (typeof collection.name !== 'string') return "Collection name must be a string";
+    if (!/^[a-z][a-z0-9_]*$/.test(collection.name)) {
+      return "Collection name must start with a letter and contain only lowercase letters, numbers, and underscores";
+    }
+    if (collection.name.length < 3 || collection.name.length > 32) {
+      return "Collection name must be between 3 and 32 characters";
+    }
+
+    // Validate schema array if present
+    if (collection.schema && !Array.isArray(collection.schema)) {
+      return "Collection schema must be an array";
+    }
+
+    // Validate each field in the schema
+    if (collection.schema) {
+      for (const field of collection.schema) {
+        if (!field.name || typeof field.name !== 'string') {
+          return `Invalid field name in collection '${collection.name}'`;
+        }
+        if (!field.type || typeof field.type !== 'string') {
+          return `Invalid field type for '${field.name}' in collection '${collection.name}'`;
+        }
+      }
+    }
+
+    return null;
+  };
+
+  const handleSchemaImport = async (schemaData: string) => {
+    if (!schemaData.trim()) {
+      toast({
+        title: "Error",
+        description: "No schema data provided",
+        variant: "destructive",
+      });
+      return;
+    }
 
-  useEffect(() => {
-    const fetchLatestRelease = async () => {
     try {
-        const res = await fetch('https://api.github.com/repos/operacle/checkcle/releases/latest');
+      setIsImporting(true);
-        const data = await res.json();
+      setImportResult(null);
-        setVersion(data.tag_name || 'v1.x.x');
+      
-        setReleaseDate(data.published_at ? format(new Date(data.published_at), 'MMMM d, yyyy') : t('unknown'));
+      // Parse the JSON to validate it
-      } catch (err) {
+      const collections = JSON.parse(schemaData);
-        setVersion('v1.x.x');
+      
-        setReleaseDate(t('unknown'));
+      if (!Array.isArray(collections)) {
+        throw new Error("Schema must be an array of collections");
+      }
+
+      // Check if user is authenticated as admin
+      if (!pb.authStore.isValid) {
+        throw new Error("Authentication required. Please log in as an admin.");
+      }
+      // Create/update collections one by one using PocketBase client
+      let successCount = 0;
+      let errorCount = 0;
+      let updatedCount = 0;
+      let skippedCount = 0;
+      const errors = [];
+
+      for (const collection of collections) {
+        try {
+          // Skip system collections
+          if (isSystemCollection(collection.name)) {
+            skippedCount++;
+            continue;
+          }
+
+          // Validate collection schema
+          const validationError = validateCollectionSchema(collection);
+          if (validationError) {
+            throw new Error(validationError);
+          }
+          // Check if collection already exists
+          const existingCollections = await pb.collections.getFullList();
+          const existingCollection = existingCollections.find(c => c.name === collection.name);
+          
+          if (existingCollection) {
+            if (mergeFields) {
+              
+              try {
+                // Get existing schema
+                const existingSchema = existingCollection.schema || [];
+                const newSchema = collection.schema || [];
+                // Merge schemas - add new fields, keep existing ones
+                const mergedSchema = [...existingSchema];
+                let fieldsAdded = 0;
+                
+                for (const newField of newSchema) {
+                  const existingFieldIndex = mergedSchema.findIndex(f => f.name === newField.name);
+                  if (existingFieldIndex >= 0) {
+                  } else {
+                    // Add new field
+                    mergedSchema.push(newField);
+                    fieldsAdded++;
+                  }
+                }
+                
+                // Update the collection with merged schema
+                const updateData = {
+                  ...collection,
+                  schema: mergedSchema
+                };
+                
+                const updatedCollection = await pb.collections.update(existingCollection.id, updateData);
+                updatedCount++;
+              } catch (mergeError) {
+                throw new Error(`Failed to merge fields: ${mergeError.message || mergeError}`);
+              }
+            } else {
+              skippedCount++;
+              continue;
+            }
+          } else {
+            // Create new collection
+            try {
+              const newCollection = await pb.collections.create(collection);
+              successCount++;
+            } catch (createError) {
+            
+              // Extract more detailed error information
+              let errorMessage = createError.message || createError;
+              if (createError.data) {
+                // Try to extract field-specific errors
+                if (createError.data.data) {
+                  const fieldErrors = Object.entries(createError.data.data).map(([field, msgs]) => 
+                    `${field}: ${Array.isArray(msgs) ? msgs.join(', ') : msgs}`
+                  ).join('; ');
+                  if (fieldErrors) {
+                    errorMessage += ` - Field errors: ${fieldErrors}`;
+                  }
+                }
+              }
+              
+              throw new Error(`Failed to create collection: ${errorMessage}`);
+            }
+          }
+        } catch (error) {
+          errorCount++;
+          const errorMsg = `Failed to process collection '${collection.name}': ${error.message || error}`;
+          errors.push(errorMsg);
+        }
+      }
+      // Set import result for display
+      setImportResult({
+        success: successCount + updatedCount > 0,
+        created: successCount,
+        updated: updatedCount,
+        skipped: skippedCount
+      });
+
+      // Show results
+      const totalProcessed = successCount + updatedCount;
+      if (totalProcessed > 0 || skippedCount > 0) {
+        let description = '';
+        if (totalProcessed > 0) {
+          description = `Successfully processed ${totalProcessed} collection(s)`;
+          if (successCount > 0) description += ` (${successCount} created)`;
+          if (updatedCount > 0) description += ` (${updatedCount} updated)`;
+        }
+        if (skippedCount > 0) {
+          if (description) description += `, `;
+          description += `${skippedCount} skipped (system collections or existing)`;
+        }
+        if (errorCount > 0) description += `. ${errorCount} failed.`;
+
+        toast({
+          title: "Import Complete",
+          description,
+          variant: totalProcessed > errorCount ? "default" : "destructive",
+        });
+      } else if (errorCount > 0) {
+        toast({
+          title: "Import Failed",
+          description: "No collections were processed successfully.",
+          variant: "destructive",
+        });
+      } else {
+        toast({
+          title: "No Changes",
+          description: "All collections already exist and no changes were made.",
+          variant: "default",
+        });
+      }
+
+      if (errors.length > 0) {
+        // Show detailed errors for debugging
+        if (errors.length <= 3) {
+          toast({
+            title: "Detailed Errors",
+            description: errors.join('; '),
+            variant: "destructive",
+          });
+        }
+      }
+      
+    } catch (error) {
+      toast({
+        title: "Import Failed",
+        description: error instanceof Error ? error.message : "Failed to import schema",
+        variant: "destructive",
+      });
+      setImportResult({
+        success: false,
+        created: 0,
+        updated: 0,
+        skipped: 0
+      });
+    } finally {
+      setIsImporting(false);
+    }
+  };
+
+  const handleLoadLocalSchema = async () => {
+    try {
+      setIsImporting(true);
+      setImportResult(null);
+      
+      const response = await fetch('/upload/data/pb_schema_latest.json');
+      
+      if (!response.ok) {
+        throw new Error(`Failed to load local schema: ${response.status} ${response.statusText}`);
+      }
+      
+      const schemaText = await response.text();
+      
+      // Validate that it's valid JSON
+      JSON.parse(schemaText);
+      
+      // Directly import the schema
+      await handleSchemaImport(schemaText);
+      
+    } catch (error) {
+      toast({
+        title: "Import Failed",
+        description: error instanceof Error ? error.message : "Failed to load and import local schema file",
+        variant: "destructive",
+      });
+      setImportResult({
+        success: false,
+        created: 0,
+        updated: 0,
+        skipped: 0
+      });
+      setIsImporting(false);
     }
   };
-    fetchLatestRelease();
-  }, [t]);
 
   return (
     <div className="space-y-6 animate-fade-in">
       <div>
         <h1 className="text-3xl font-bold tracking-tight">{t('aboutSystem')}</h1>
-        <p className="text-muted-foreground text-base leading-relaxed mt-2">
-        </p>
       </div>
       
       <Separator />
@@ -58,7 +301,7 @@ export const AboutSystem: React.FC = () => {
               <div className="flex flex-col space-y-3 pt-2">
                 <div className="flex justify-between items-center">
                   <span className="text-muted-foreground">{t('systemVersion')}</span>
-                  <span className="text-foreground font-medium">{version}</span>
+                  <span className="text-foreground font-medium">{t('version')} 1.5.1</span>
                 </div>
                 <Separator className="my-1" />
                 <div className="flex justify-between items-center">
@@ -68,7 +311,7 @@ export const AboutSystem: React.FC = () => {
                 <Separator className="my-1" />
                 <div className="flex justify-between items-center">
                   <span className="text-muted-foreground">{t('releasedOn')}</span>
-                  <span className="text-foreground font-medium">{releaseDate}</span>
+                  <span className="text-foreground font-medium">Auguest 21, 2025</span>
                 </div>
               </div>
             </div>
@@ -81,9 +324,7 @@ export const AboutSystem: React.FC = () => {
               <Code2 className={`h-5 w-5 ${theme === 'dark' ? 'text-emerald-400' : 'text-emerald-600'}`} />
               <span>{t('links')}</span>
             </CardTitle>
-            <CardDescription className="font-medium text-base">
+            <CardDescription className="font-medium text-base">{systemName || 'CheckCle'} {t('resources').toLowerCase()}</CardDescription>
-              {systemName || 'CheckCle'} {t('resources').toLowerCase()}
-            </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4 pt-6">
             <div className="grid grid-cols-1 gap-3">
@@ -95,7 +336,7 @@ export const AboutSystem: React.FC = () => {
                 <FileText className={`h-5 w-5 ${theme === 'dark' ? 'text-white/80' : 'text-gray-700'}`} />
                 <span>{t('viewDocumentation')}</span>
               </Button>
-              <Button variant="outline" className="flex items-center justify-start gap-3 h-12 hover:bg-muted/50 transition-all duration-200" onClick={() => window.open("https://x.com/tlengoss", "_blank")}>
+              <Button variant="outline" className="flex items-center justify-start gap-3 h-12 hover:bg-muted/50 transition-all duration-200" onClick={() => window.open("https://x.com/checkcle_oss", "_blank")}>
                 <Twitter className={`h-5 w-5 ${theme === 'dark' ? 'text-white/80' : 'text-gray-700'}`} />
                 <span>{t('followOnX')}</span>
               </Button>
@@ -107,6 +348,88 @@ export const AboutSystem: React.FC = () => {
           </CardContent>
         </Card>
       </div>
+
+      <Separator />
+
+      <Card className="overflow-hidden border border-border transition-all duration-300 hover:shadow-md">
+        <CardHeader className="bg-muted/50 pb-4">
+          <CardTitle className="flex items-center gap-2">
+            <Database className={`h-5 w-5 ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`} />
+            <span>{t('updateSchema')}</span>
+          </CardTitle>
+          <CardDescription className="font-medium text-base">{t('updateSchemaDesc')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4 pt-6">
+          <div className="space-y-3">
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="merge-fields"
+                checked={mergeFields}
+                onCheckedChange={(checked) => setMergeFields(checked === true)}
+              />
+              <Label htmlFor="merge-fields" className="text-sm font-medium">
+	              {t('mergeFieldsLabel')}
+              </Label>
+            </div>
+          </div>
+          
+          <div className="flex gap-2 flex-wrap">
+            <Button
+              onClick={handleLoadLocalSchema}
+              disabled={isImporting}
+              className={`flex items-center gap-2 transition-all duration-200 ${
+                isImporting ? 'animate-pulse' : ''
+              }`}
+            >
+              <Database className={`h-4 w-4 ${isImporting ? 'animate-spin' : ''}`} />
+              {isImporting ? t('importing') : t('clickToUpdateSchema')}
+            </Button>
+          </div>
+
+          {importResult && (
+            <div className={`mt-4 p-4 rounded-lg border ${
+              importResult.success 
+                ? 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800' 
+                : 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800'
+            } animate-in fade-in-0 slide-in-from-bottom-2 duration-300`}>
+              <div className="flex items-center gap-2">
+                <CheckCircle className={`h-5 w-5 ${
+                  importResult.success 
+                    ? 'text-green-600 dark:text-green-400' 
+                    : 'text-red-600 dark:text-red-400'
+                }`} />
+                <span className={`font-medium ${
+                  importResult.success 
+                    ? 'text-green-800 dark:text-green-200' 
+                    : 'text-red-800 dark:text-red-200'
+                }`}>
+                  {importResult.success ? t('importSuccessful') : t('importFailed')}
+                </span>
+              </div>
+              <div className={`mt-2 text-sm ${
+                importResult.success 
+                  ? 'text-green-700 dark:text-green-300' 
+                  : 'text-red-700 dark:text-red-300'
+              }`}>
+                {importResult.created > 0 && t('collectionsCreatedCount').replace('{count}', String(importResult.created))}
+                {importResult.updated > 0 && (importResult.created > 0 ? ', ' : '') + t('collectionsUpdatedCount').replace('{count}', String(importResult.updated))}
+                {importResult.skipped > 0 && ((importResult.created > 0 || importResult.updated > 0) ? ', ' : '') + t('collectionsSkippedCount').replace('{count}', String(importResult.skipped))}
+              </div>
+            </div>
+          )}
+
+          <div className="text-sm text-muted-foreground">
+            <p className="mb-2">
+              <strong>{t('instructions')}:</strong>
+            </p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li><strong>{t('mergeFields')}:</strong> {t('instructionsMergeFields')}</li>
+              <li>{t('instructionsCollections')}</li>
+              <li>{t('instructionsImportAuth')}</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 };

application/src/components/settings/alerts-templates/AlertsTemplates.tsx

@@ -1,9 +1,10 @@
 
 import React, { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { templateService } from "@/services/templateService";
+import { templateService, TemplateType } from "@/services/templateService";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Plus, RefreshCcw } from "lucide-react";
 import { TemplateList } from "./TemplateList";
 import { TemplateDialog } from "./TemplateDialog";
@@ -11,8 +12,10 @@ import { useToast } from "@/hooks/use-toast";
 
 export const AlertsTemplates = () => {
   const { toast } = useToast();
+  const [activeTab, setActiveTab] = useState<TemplateType>('service');
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [editingTemplate, setEditingTemplate] = useState<string | null>(null);
+  const [editingTemplateType, setEditingTemplateType] = useState<TemplateType | null>(null);
 
   const {
     data: templates = [],
@@ -20,17 +23,19 @@ export const AlertsTemplates = () => {
     error,
     refetch
   } = useQuery({
-    queryKey: ['notification_templates'],
+    queryKey: ['notification_templates', activeTab],
-    queryFn: templateService.getTemplates,
+    queryFn: () => templateService.getTemplates(activeTab),
   });
 
-  const handleAddTemplate = () => {
+  const handleAddTemplate = (templateType: TemplateType) => {
     setEditingTemplate(null);
+    setEditingTemplateType(templateType);
     setIsDialogOpen(true);
   };
 
-  const handleEditTemplate = (id: string) => {
+  const handleEditTemplate = (id: string, templateType: TemplateType) => {
     setEditingTemplate(id);
+    setEditingTemplateType(templateType);
     setIsDialogOpen(true);
   };
 
@@ -51,16 +56,25 @@ export const AlertsTemplates = () => {
             <RefreshCcw className="h-4 w-4 mr-2" />
             Refresh
           </Button>
-          <Button onClick={handleAddTemplate}>
+          <Button onClick={() => handleAddTemplate(activeTab)}>
             <Plus className="h-4 w-4 mr-2" />
             Add Template
           </Button>
         </div>
       </CardHeader>
       <CardContent>
+        <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as TemplateType)}>
+          <TabsList className="grid w-full grid-cols-4">
+            <TabsTrigger value="service">Service Uptime</TabsTrigger>
+            <TabsTrigger value="server">Server Monitoring</TabsTrigger>
+            <TabsTrigger value="ssl">SSL Certificate</TabsTrigger>
+            <TabsTrigger value="server_threshold">Server Threshold</TabsTrigger>
+          </TabsList>
+          
+          <TabsContent value="service" className="mt-4">
             {error ? (
               <div className="text-center p-6">
-            <p className="text-destructive mb-4">Error loading templates</p>
+                <p className="text-destructive mb-4">Error loading service templates</p>
                 <Button variant="outline" onClick={() => refetch()}>
                   Try Again
                 </Button>
@@ -69,15 +83,76 @@ export const AlertsTemplates = () => {
               <TemplateList 
                 templates={templates} 
                 isLoading={isLoading} 
-            onEdit={handleEditTemplate}
+                onEdit={(id) => handleEditTemplate(id, 'service')}
                 refetchTemplates={refetch}
+                templateType="service"
               />
             )}
+          </TabsContent>
+          
+          <TabsContent value="server" className="mt-4">
+            {error ? (
+              <div className="text-center p-6">
+                <p className="text-destructive mb-4">Error loading server templates</p>
+                <Button variant="outline" onClick={() => refetch()}>
+                  Try Again
+                </Button>
+              </div>
+            ) : (
+              <TemplateList 
+                templates={templates} 
+                isLoading={isLoading} 
+                onEdit={(id) => handleEditTemplate(id, 'server')}
+                refetchTemplates={refetch}
+                templateType="server"
+              />
+            )}
+          </TabsContent>
+          
+          <TabsContent value="ssl" className="mt-4">
+            {error ? (
+              <div className="text-center p-6">
+                <p className="text-destructive mb-4">Error loading SSL templates</p>
+                <Button variant="outline" onClick={() => refetch()}>
+                  Try Again
+                </Button>
+              </div>
+            ) : (
+              <TemplateList 
+                templates={templates} 
+                isLoading={isLoading} 
+                onEdit={(id) => handleEditTemplate(id, 'ssl')}
+                refetchTemplates={refetch}
+                templateType="ssl"
+              />
+            )}
+          </TabsContent>
+          
+          <TabsContent value="server_threshold" className="mt-4">
+            {error ? (
+              <div className="text-center p-6">
+                <p className="text-destructive mb-4">Error loading server threshold templates</p>
+                <Button variant="outline" onClick={() => refetch()}>
+                  Try Again
+                </Button>
+              </div>
+            ) : (
+              <TemplateList 
+                templates={templates} 
+                isLoading={isLoading} 
+                onEdit={(id) => handleEditTemplate(id, 'server_threshold')}
+                refetchTemplates={refetch}
+                templateType="server_threshold"
+              />
+            )}
+          </TabsContent>
+        </Tabs>
       </CardContent>
 
       <TemplateDialog
         open={isDialogOpen}
         templateId={editingTemplate}
+        templateType={editingTemplateType}
         onOpenChange={setIsDialogOpen}
         onSuccess={() => {
           refetch();

application/src/components/settings/alerts-templates/TemplateDialog.tsx

@@ -1,19 +1,27 @@
 
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { Form } from "@/components/ui/form";
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useTemplateForm } from "./hooks/useTemplateForm";
-import { BasicTemplateFields } from "./form/BasicTemplateFields";
+import { ServerTemplateFields } from "./form/ServerTemplateFields";
-import { MessagesTabContent } from "./form/MessagesTabContent";
+import { ServiceTemplateFields } from "./form/ServiceTemplateFields";
-import { PlaceholdersTabContent } from "./form/PlaceholdersTabContent";
+import { SslTemplateFields } from "./form/SslTemplateFields";
+import { ServerThresholdFields } from "./form/ServerThresholdFields";
 import { Loader2, ChevronDown } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { TemplateType, templateTypeConfigs } from "@/services/templateService";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Textarea } from "@/components/ui/textarea";
+import {z} from "zod";
 
 interface TemplateDialogProps {
   open: boolean;
   templateId: string | null;
+  templateType: TemplateType | null;
   onOpenChange: (open: boolean) => void;
   onSuccess: () => void;
 }
@@ -21,9 +29,12 @@ interface TemplateDialogProps {
 export const TemplateDialog: React.FC<TemplateDialogProps> = ({
   open,
   templateId,
+  templateType: initialTemplateType,
   onOpenChange,
   onSuccess,
 }) => {
+  const [selectedTemplateType, setSelectedTemplateType] = useState<TemplateType>(initialTemplateType || 'service');
+  
   const {
     form,
     isEditMode,
@@ -32,28 +43,73 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
     onSubmit
   } = useTemplateForm({
     templateId,
+    templateType: selectedTemplateType,
     open,
     onOpenChange,
     onSuccess
   });
 
-  // For debugging purposes
+  // Update template type when prop changes or dialog opens
   useEffect(() => {
-    if (open) {
+    if (initialTemplateType) {
-    //  console.log("Template dialog opened. Edit mode:", isEditMode, "Template ID:", templateId);
+      setSelectedTemplateType(initialTemplateType);
-      
+    } else if (open && !isEditMode) {
-      // Log form values when they change
+      setSelectedTemplateType('service');
-      const subscription = form.watch((value) => {
-     //   console.log("Current form values:", value);
-      });
-      
-      return () => subscription.unsubscribe();
     }
-  }, [open, isEditMode, templateId, form]);
+  }, [initialTemplateType, open, isEditMode]);
+
+  // Handle template type change
+  const handleTemplateTypeChange = (newType: TemplateType) => {
+    if (!isEditMode) {
+      setSelectedTemplateType(newType);
+      form.setValue('templateType', newType);
+    }
+  };
+
+  const renderTemplateFields = () => {
+    switch (selectedTemplateType) {
+      case 'server':
+        return <ServerTemplateFields control={form.control} />;
+      case 'service':
+        return <ServiceTemplateFields control={form.control} />;
+      case 'ssl':
+        return <SslTemplateFields control={form.control} />;
+      case 'server_threshold':
+        return <ServerThresholdFields control={form.control} />;
+      default:
+        return null;
+    }
+  };
+
+  const renderPlaceholderGuide = () => {
+
+    const config = templateTypeConfigs[selectedTemplateType];
+    if (!config) return null;
+
+    return (
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium">Available Placeholders</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground mb-3">
+            {config.description}. Use these placeholders in your messages:
+          </p>
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-sm">
+            {config.placeholders.map((placeholder) => (
+              <div key={placeholder} className="bg-muted/30 p-2 rounded">
+                <code className="text-xs">{placeholder}</code>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  };
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
+      <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col overflow-hidden">
         <DialogHeader>
           <DialogTitle>{isEditMode ? "Edit Template" : "Add Template"}</DialogTitle>
         </DialogHeader>
@@ -69,20 +125,85 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
               <div className="relative flex-1">
                 <ScrollArea className="pr-4 overflow-auto" style={{ height: "calc(80vh - 180px)" }}>
                   <div className="space-y-6 pb-6 pr-4">
-                    <BasicTemplateFields control={form.control} />
+                    {/* Basic Fields */}
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <FormField
+                        control={form.control}
+                        name="name"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Template Name</FormLabel>
+                            <FormControl>
+                              <Input 
+                                placeholder="Enter template name" 
+                                {...field}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                      
+                      <FormField
+                        control={form.control}
+                        name="templateType"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Template Type</FormLabel>
+                            <FormControl>
+                              <Select 
+                                onValueChange={handleTemplateTypeChange}
+                                value={selectedTemplateType}
+                                disabled={isEditMode}
+                              >
+                                <SelectTrigger>
+                                  <SelectValue placeholder="Select template type" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="server">Server Monitoring</SelectItem>
+                                  <SelectItem value="service">Service Uptime</SelectItem>
+                                  <SelectItem value="ssl">SSL Certificate</SelectItem>
+                                  <SelectItem value="server_threshold">Server Threshold</SelectItem>
+                                </SelectContent>
+                              </Select>
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                      
+                      {selectedTemplateType !== 'server_threshold' && (
+                        <FormField
+                          control={form.control}
+                          name="placeholder"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Custom Placeholder</FormLabel>
+                              <FormControl>
+                                <Input 
+                                  placeholder="Optional custom placeholder"
+                                  {...field}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
+                    </div>
                     
                     <Tabs defaultValue="messages">
                       <TabsList className="grid w-full grid-cols-2">
-                        <TabsTrigger value="messages">Messages</TabsTrigger>
+                        <TabsTrigger value="messages">{selectedTemplateType === 'server_threshold' ? 'Thresholds' : 'Messages'}</TabsTrigger>
                         <TabsTrigger value="placeholders">Placeholders</TabsTrigger>
                       </TabsList>
                       
                       <TabsContent value="messages" className="pt-4">
-                        <MessagesTabContent control={form.control} />
+                        {renderTemplateFields()}
                       </TabsContent>
                       
                       <TabsContent value="placeholders" className="pt-4">
-                        <PlaceholdersTabContent control={form.control} />
+                        {renderPlaceholderGuide()}
                       </TabsContent>
                     </Tabs>
                   </div>

application/src/components/settings/alerts-templates/TemplateList.tsx

@@ -1,16 +1,14 @@
 
 import React, { useState } from "react";
-import { NotificationTemplate, templateService } from "@/services/templateService";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
-import { Edit, Trash2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Trash2, Edit, MoreVertical } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -22,13 +20,15 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { useToast } from "@/hooks/use-toast";
-import { Badge } from "@/components/ui/badge";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { templateService, AnyTemplate, TemplateType } from "@/services/templateService";
 
 interface TemplateListProps {
-  templates: NotificationTemplate[];
+  templates: AnyTemplate[];
   isLoading: boolean;
   onEdit: (id: string) => void;
   refetchTemplates: () => void;
+  templateType: TemplateType;
 }
 
 export const TemplateList: React.FC<TemplateListProps> = ({ 
@@ -36,49 +36,59 @@ export const TemplateList: React.FC<TemplateListProps> = ({
   isLoading, 
   onEdit, 
   refetchTemplates,
+  templateType 
 }) => {
   const { toast } = useToast();
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const queryClient = useQueryClient();
-  const [templateToDelete, setTemplateToDelete] = useState<NotificationTemplate | null>(null);
+  const [deleteTemplateId, setDeleteTemplateId] = useState<string | null>(null);
-  const [isDeleting, setIsDeleting] = useState(false);
 
-  const handleDeletePrompt = (template: NotificationTemplate) => {
+  // Delete mutation
-    setTemplateToDelete(template);
+  const deleteMutation = useMutation({
-    setDeleteDialogOpen(true);
+    mutationFn: (id: string) => templateService.deleteTemplate(id, templateType),
-  };
+    onSuccess: () => {
-
-  const handleDeleteTemplate = async () => {
-    if (!templateToDelete) return;
-    
-    setIsDeleting(true);
-    try {
-      await templateService.deleteTemplate(templateToDelete.id);
       toast({
         title: "Template deleted",
-        description: `Template "${templateToDelete.name}" has been removed.`,
+        description: "The template has been deleted successfully.",
       });
+      queryClient.invalidateQueries({ queryKey: ['notification_templates', templateType] });
       refetchTemplates();
-    } catch (error) {
+    },
-      console.error("Error deleting template:", error);
+    onError: (error) => {
+     // console.error("Error deleting template:", error);
       toast({
         title: "Error",
         description: "Failed to delete template. Please try again.",
         variant: "destructive",
       });
-    } finally {
+    },
-      setIsDeleting(false);
+  });
-      setDeleteDialogOpen(false);
+
-      setTemplateToDelete(null);
+  const handleDelete = (id: string) => {
+    setDeleteTemplateId(id);
+  };
+
+  const confirmDelete = () => {
+    if (deleteTemplateId) {
+      deleteMutation.mutate(deleteTemplateId);
+      setDeleteTemplateId(null);
     }
   };
 
   if (isLoading) {
     return (
-      <div className="py-8 flex justify-center">
+      <div className="space-y-4">
-        <div className="animate-pulse flex flex-col items-center">
+        {[...Array(3)].map((_, i) => (
-          <div className="h-4 bg-gray-200 rounded w-32 mb-4"></div>
+          <div key={i} className="flex items-center justify-between p-4 border border-border rounded-lg">
-          <div className="h-4 bg-gray-200 rounded w-64"></div>
+            <div className="space-y-2">
+              <div className="h-4 bg-muted animate-pulse rounded w-32"></div>
+              <div className="h-3 bg-muted animate-pulse rounded w-48"></div>
             </div>
+            <div className="flex space-x-2">
+              <div className="h-8 w-8 bg-muted animate-pulse rounded"></div>
+              <div className="h-8 w-8 bg-muted animate-pulse rounded"></div>
+            </div>
+          </div>
+        ))}
       </div>
     );
   }
@@ -86,79 +96,82 @@ export const TemplateList: React.FC<TemplateListProps> = ({
   if (templates.length === 0) {
     return (
       <div className="text-center py-8">
-        <p className="text-muted-foreground mb-2">No templates found</p>
+        <p className="text-muted-foreground">No templates found. Create your first template to get started.</p>
-        <p className="text-sm text-muted-foreground">
-          Create your first notification template to get started.
-        </p>
       </div>
     );
   }
 
+  const getTemplateTypeLabel = (type: TemplateType) => {
+    switch (type) {
+      case 'server': return 'Server';
+      case 'service': return 'Service';
+      case 'ssl': return 'SSL';
+      default: return 'Unknown';
+    }
+  };
+
   return (
     <>
-      <div className="border rounded-md overflow-hidden">
+      <div className="space-y-4">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Name</TableHead>
-              <TableHead>Type</TableHead>
-              <TableHead>Created</TableHead>
-              <TableHead className="w-24">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
         {templates.map((template) => (
-              <TableRow key={template.id}>
+          <div key={template.id} className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors">
-                <TableCell className="font-medium">{template.name}</TableCell>
+            <div className="space-y-1">
-                <TableCell>
+              <div className="flex items-center gap-2">
-                  <Badge variant="outline">{template.type}</Badge>
+                <h3 className="font-medium">{template.name}</h3>
-                </TableCell>
+                <Badge variant="outline">{getTemplateTypeLabel(templateType)}</Badge>
-                <TableCell>
+              </div>
-                  {new Date(template.created).toLocaleDateString()}
+              <p className="text-sm text-muted-foreground">
-                </TableCell>
+                Created: {new Date(template.created).toLocaleDateString()}
-                <TableCell>
+                {template.updated !== template.created && 
-                  <div className="flex space-x-2">
+                  ` • Updated: ${new Date(template.updated).toLocaleDateString()}`
+                }
+              </p>
+            </div>
+            <div className="flex items-center space-x-2">
               <Button
+                variant="outline"
                 size="sm"
-                      variant="ghost"
                 onClick={() => onEdit(template.id)}
               >
-                      <Edit className="h-4 w-4" />
+                <Edit className="h-4 w-4 mr-1" />
+                Edit
               </Button>
-                    <Button
+              <DropdownMenu>
-                      size="sm"
+                <DropdownMenuTrigger asChild>
-                      variant="ghost"
+                  <Button variant="outline" size="sm">
-                      onClick={() => handleDeletePrompt(template)}
+                    <MoreVertical className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    onClick={() => handleDelete(template.id)}
+                    className="text-destructive focus:text-destructive"
                   >
-                      <Trash2 className="h-4 w-4 text-destructive" />
+                    <Trash2 className="h-4 w-4 mr-2" />
-                    </Button>
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           </div>
-                </TableCell>
-              </TableRow>
         ))}
-          </TableBody>
-        </Table>
       </div>
 
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+      <AlertDialog open={!!deleteTemplateId} onOpenChange={() => setDeleteTemplateId(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete Template</AlertDialogTitle>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to delete the template "{templateToDelete?.name}"? This action cannot be undone.
+              This action cannot be undone. This will permanently delete the template.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
             <AlertDialogAction
-              onClick={(e) => {
+              onClick={confirmDelete}
-                e.preventDefault();
-                handleDeleteTemplate();
-              }}
-              disabled={isDeleting}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              {isDeleting ? "Deleting..." : "Delete"}
+              Delete
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

application/src/components/settings/alerts-templates/form/PlaceholdersTabContent.tsx

@@ -71,15 +71,168 @@ export const PlaceholdersTabContent: React.FC<PlaceholdersTabContentProps> = ({
             
             <FormField
               control={control}
-              name="threshold_placeholder"
+              name="url_placeholder"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Threshold Placeholder</FormLabel>
+                  <FormLabel>URL Placeholder</FormLabel>
                   <FormControl>
-                    <Input placeholder="${threshold}" {...field} />
+                    <Input placeholder="${url}" {...field} />
                   </FormControl>
                   <FormDescription className="text-xs">
-                    Used for threshold values in alerts
+                    Used for service URL
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="host_placeholder"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Host/IP Placeholder</FormLabel>
+                  <FormControl>
+                    <Input placeholder="${host}" {...field} />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    Used for service host or IP address
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="service_type_placeholder"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Service Type Placeholder</FormLabel>
+                  <FormControl>
+                    <Input placeholder="${service_type}" {...field} />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    Used for service type (HTTP, PING, TCP, DNS)
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="port_placeholder"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Port Placeholder</FormLabel>
+                  <FormControl>
+                    <Input placeholder="${port}" {...field} />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    Used for service port number
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="domain_placeholder"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Domain Placeholder</FormLabel>
+                  <FormControl>
+                    <Input placeholder="${domain}" {...field} />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    Used for domain name (DNS services)
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="region_name_placeholder"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Region Name Placeholder</FormLabel>
+                  <FormControl>
+                    <Input placeholder="${region_name}" {...field} />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    Used for regional agent name
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="agent_id_placeholder"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Agent ID Placeholder</FormLabel>
+                  <FormControl>
+                    <Input placeholder="${agent_id}" {...field} />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    Used for regional agent ID
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="uptime_placeholder"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Uptime Placeholder</FormLabel>
+                  <FormControl>
+                    <Input placeholder="${uptime}" {...field} />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    Used for service uptime percentage
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="time_placeholder"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Time Placeholder</FormLabel>
+                  <FormControl>
+                    <Input placeholder="${time}" {...field} />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    Used for current date and time
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="error_message_placeholder"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Error Message Placeholder</FormLabel>
+                  <FormControl>
+                    <Input placeholder="${error_message}" {...field} />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    Used for error details when service is down
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
@@ -111,18 +264,46 @@ export const PlaceholdersTabContent: React.FC<PlaceholdersTabContentProps> = ({
                 <code className="text-xs">${"{status}"}</code>
                 <p className="text-xs text-muted-foreground mt-1">Service status (UP, DOWN)</p>
               </div>
-              <div className="bg-muted/30 p-2 rounded">
-                <code className="text-xs">${"{threshold}"}</code>
-                <p className="text-xs text-muted-foreground mt-1">Service threshold value</p>
-              </div>
               <div className="bg-muted/30 p-2 rounded">
                 <code className="text-xs">${"{url}"}</code>
                 <p className="text-xs text-muted-foreground mt-1">Service URL</p>
               </div>
+              <div className="bg-muted/30 p-2 rounded">
+                <code className="text-xs">${"{host}"}</code>
+                <p className="text-xs text-muted-foreground mt-1">Service host or IP address</p>
+              </div>
+              <div className="bg-muted/30 p-2 rounded">
+                <code className="text-xs">${"{service_type}"}</code>
+                <p className="text-xs text-muted-foreground mt-1">Service type (HTTP, PING, TCP, DNS)</p>
+              </div>
+              <div className="bg-muted/30 p-2 rounded">
+                <code className="text-xs">${"{port}"}</code>
+                <p className="text-xs text-muted-foreground mt-1">Service port number</p>
+              </div>
+              <div className="bg-muted/30 p-2 rounded">
+                <code className="text-xs">${"{domain}"}</code>
+                <p className="text-xs text-muted-foreground mt-1">Domain name (DNS services)</p>
+              </div>
+              <div className="bg-muted/30 p-2 rounded">
+                <code className="text-xs">${"{region_name}"}</code>
+                <p className="text-xs text-muted-foreground mt-1">Regional agent name</p>
+              </div>
+              <div className="bg-muted/30 p-2 rounded">
+                <code className="text-xs">${"{agent_id}"}</code>
+                <p className="text-xs text-muted-foreground mt-1">Regional agent ID</p>
+              </div>
+              <div className="bg-muted/30 p-2 rounded">
+                <code className="text-xs">${"{uptime}"}</code>
+                <p className="text-xs text-muted-foreground mt-1">Service uptime percentage</p>
+              </div>
               <div className="bg-muted/30 p-2 rounded">
                 <code className="text-xs">${"{time}"}</code>
                 <p className="text-xs text-muted-foreground mt-1">Current date and time</p>
               </div>
+              <div className="bg-muted/30 p-2 rounded">
+                <code className="text-xs">${"{error_message}"}</code>
+                <p className="text-xs text-muted-foreground mt-1">Error details when service is down</p>
+              </div>
             </div>
           </div>
         </CardContent>

application/src/components/settings/alerts-templates/form/ServerTemplateFields.tsx

@@ -0,0 +1,328 @@
+
+import React from "react";
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { Control } from "react-hook-form";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface ServerTemplateFieldsProps {
+  control: Control<any>;
+}
+
+export const ServerTemplateFields: React.FC<ServerTemplateFieldsProps> = ({ control }) => {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium">System Resource Messages</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <FormField
+              control={control}
+              name="cpu_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>CPU Alert Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="CPU usage on ${server_name} is ${cpu_usage}% (threshold: ${threshold}%)"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="ram_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>RAM Alert Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Memory usage on ${server_name} is ${ram_usage}% (threshold: ${threshold}%)"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="disk_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Disk Alert Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Disk usage on ${server_name} is ${disk_usage}% (threshold: ${threshold}%)"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="network_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Network Alert Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Network usage on ${server_name} is ${network_usage}% (threshold: ${threshold}%)"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium">System Resource Restore Messages</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <FormField
+              control={control}
+              name="restore_cpu_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>CPU Restore Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="CPU usage on ${server_name} has returned to normal: ${cpu_usage}%"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="restore_ram_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>RAM Restore Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Memory usage on ${server_name} has returned to normal: ${ram_usage}%"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="restore_disk_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Disk Restore Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Disk usage on ${server_name} has returned to normal: ${disk_usage}%"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="restore_network_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Network Restore Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Network usage on ${server_name} has returned to normal: ${network_usage}%"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardContent className="pt-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <FormField
+              control={control}
+              name="up_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Server Up Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Server ${server_name} is UP and responding"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="down_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Server Down Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Server ${server_name} is DOWN"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="warning_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Warning Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Warning: Server ${server_name} requires attention"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="paused_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Paused Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Monitoring for server ${server_name} is paused"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="cpu_temp_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>CPU Temperature Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="CPU temperature on ${server_name} is ${cpu_temp}°C"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="disk_io_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Disk I/O Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Disk I/O on ${server_name} is ${disk_io} MB/s"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="restore_cpu_temp_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>CPU Temperature Restore Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="CPU temperature on ${server_name} has returned to normal: ${cpu_temp}°C"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="restore_disk_io_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Disk I/O Restore Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Disk I/O on ${server_name} has returned to normal: ${disk_io} MB/s"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

application/src/components/settings/alerts-templates/form/ServerThresholdFields.tsx

@@ -0,0 +1,121 @@
+
+import React from "react";
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Control } from "react-hook-form";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface ServerThresholdFieldsProps {
+  control: Control<any>;
+}
+
+export const ServerThresholdFields: React.FC<ServerThresholdFieldsProps> = ({ control }) => {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium">Server Resource Thresholds</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <FormField
+              control={control}
+              name="cpu_threshold"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>CPU Threshold (%)</FormLabel>
+                  <FormControl>
+                    <Input 
+                      type="number"
+                      min="0"
+                      max="100"
+                      placeholder="85"
+                      {...field}
+                      onChange={(e) => field.onChange(Number(e.target.value))}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    CPU usage percentage that triggers an alert
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="ram_threshold"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>RAM Threshold (%)</FormLabel>
+                  <FormControl>
+                    <Input 
+                      type="number"
+                      min="0"
+                      max="100"
+                      placeholder="80"
+                      {...field}
+                      onChange={(e) => field.onChange(Number(e.target.value))}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Memory usage percentage that triggers an alert
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="disk_threshold"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Disk Threshold (%)</FormLabel>
+                  <FormControl>
+                    <Input 
+                      type="number"
+                      min="0"
+                      max="100"
+                      placeholder="90"
+                      {...field}
+                      onChange={(e) => field.onChange(Number(e.target.value))}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Disk usage percentage that triggers an alert
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="network_threshold"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Network Threshold (%)</FormLabel>
+                  <FormControl>
+                    <Input 
+                      type="number"
+                      min="0"
+                      max="100"
+                      placeholder="75"
+                      {...field}
+                      onChange={(e) => field.onChange(Number(e.target.value))}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Network usage percentage that triggers an alert
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

application/src/components/settings/alerts-templates/form/ServiceTemplateFields.tsx

@@ -0,0 +1,133 @@
+
+import React from "react";
+import { FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { Control } from "react-hook-form";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface ServiceTemplateFieldsProps {
+  control: Control<any>;
+}
+
+export const ServiceTemplateFields: React.FC<ServiceTemplateFieldsProps> = ({ control }) => {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium">Service Status Messages</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <FormField
+              control={control}
+              name="up_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Service Up Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Service ${service_name} is UP. Response time: ${response_time}ms"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="down_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Service Down Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Service ${service_name} is DOWN. Status: ${status}"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="maintenance_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Maintenance Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Service ${service_name} is under maintenance"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="incident_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Incident Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Service ${service_name} has an incident"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="resolved_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Resolved Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Issue with service ${service_name} has been resolved"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="warning_message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Warning Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Warning: Service ${service_name} response time is high"
+                      className="min-h-20"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

application/src/components/settings/alerts-templates/form/SslTemplateFields.tsx

@@ -0,0 +1,79 @@
+
+import React from "react";
+import { FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { Control } from "react-hook-form";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface SslTemplateFieldsProps {
+  control: Control<any>;
+}
+
+export const SslTemplateFields: React.FC<SslTemplateFieldsProps> = ({ control }) => {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium">SSL Certificate Messages</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <FormField
+              control={control}
+              name="expired"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Certificate Expired Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="SSL certificate for ${domain} has EXPIRED on ${expiry_date}"
+                      className="min-h-24"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="exiring_soon"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Certificate Expiring Soon Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="SSL certificate for ${domain} will expire in ${days_left} days on ${expiry_date}"
+                      className="min-h-24"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={control}
+              name="warning"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Certificate Warning Message</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="Warning: SSL certificate for ${domain} requires attention"
+                      className="min-h-24"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

application/src/components/settings/alerts-templates/hooks/useTemplateForm.ts

@@ -1,72 +1,180 @@
-
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
 import { useToast } from "@/hooks/use-toast";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { templateService, CreateUpdateTemplateData } from "@/services/templateService";
+import { templateService, TemplateType, AnyTemplateData } from "@/services/templateService";
 import { useEffect } from "react";
 
-// Template form schema
+// Base schema
-export const templateFormSchema = z.object({
+const baseSchema = {
   name: z.string().min(2, "Name is required and must be at least 2 characters"),
-  type: z.string().min(1, "Type is required"),
+  templateType: z.enum(['server', 'service', 'ssl', 'server_threshold'] as const),
+  placeholder: z.string().optional(),
+};
+
+// Server template schema
+const serverTemplateSchema = z.object({
+  ...baseSchema,
+  templateType: z.literal('server'),
+  ram_message: z.string().min(1, "RAM message is required"),
+  cpu_message: z.string().min(1, "CPU message is required"),
+  disk_message: z.string().min(1, "Disk message is required"),
+  network_message: z.string().min(1, "Network message is required"),
+  up_message: z.string().min(1, "Up message is required"),
+  down_message: z.string().min(1, "Down message is required"),
+  notification_id: z.string().optional(),
+  warning_message: z.string().min(1, "Warning message is required"),
+  paused_message: z.string().min(1, "Paused message is required"),
+  cpu_temp_message: z.string().min(1, "CPU temperature message is required"),
+  disk_io_message: z.string().min(1, "Disk I/O message is required"),
+  restore_ram_message: z.string().optional(),
+  restore_cpu_message: z.string().optional(),
+  restore_disk_message: z.string().optional(),
+  restore_network_message: z.string().optional(),
+  restore_cpu_temp_message: z.string().optional(),
+  restore_disk_io_message: z.string().optional(),
+});
+
+// Service template schema
+const serviceTemplateSchema = z.object({
+  ...baseSchema,
+  templateType: z.literal('service'),
   up_message: z.string().min(1, "Up message is required"),
   down_message: z.string().min(1, "Down message is required"),
   maintenance_message: z.string().min(1, "Maintenance message is required"),
   incident_message: z.string().min(1, "Incident message is required"),
   resolved_message: z.string().min(1, "Resolved message is required"),
-  service_name_placeholder: z.string().min(1, "Service name placeholder is required"),
+  warning_message: z.string().min(1, "Warning message is required"),
-  response_time_placeholder: z.string().min(1, "Response time placeholder is required"),
-  status_placeholder: z.string().min(1, "Status placeholder is required"),
-  threshold_placeholder: z.string().min(1, "Threshold placeholder is required"),
 });
 
-// Define the form data type from the schema
+// SSL template schema
+const sslTemplateSchema = z.object({
+  ...baseSchema,
+  templateType: z.literal('ssl'),
+  expired: z.string().min(1, "Expired message is required"),
+  exiring_soon: z.string().min(1, "Expiring soon message is required"),
+  warning: z.string().min(1, "Warning message is required"),
+});
+
+// Server threshold schema
+const serverThresholdSchema = z.object({
+  ...baseSchema,
+  templateType: z.literal('server_threshold'),
+  cpu_threshold: z.number().min(0).max(100, "CPU threshold must be between 0-100"),
+  ram_threshold: z.number().min(0).max(100, "RAM threshold must be between 0-100"),
+  disk_threshold: z.number().min(0).max(100, "Disk threshold must be between 0-100"),
+  network_threshold: z.number().min(0).max(100, "Network threshold must be between 0-100"),
+  notification_id: z.string().optional(),
+  server_template_id: z.string().optional(),
+});
+
+// Combined schema
+export const templateFormSchema = z.discriminatedUnion("templateType", [
+  serverTemplateSchema,
+  serviceTemplateSchema,
+  sslTemplateSchema,
+  serverThresholdSchema,
+]);
+
 export type TemplateFormData = z.infer<typeof templateFormSchema>;
 
-// Default form values
+// Default form values for each template type
-const defaultFormValues: TemplateFormData = {
+const getDefaultValues = (templateType: TemplateType): TemplateFormData => {
+  const base = {
     name: "",
-  type: "default",
+    templateType,
+    placeholder: "",
+  };
+
+  switch (templateType) {
+    case 'server':
+      return {
+        ...base,
+        templateType: 'server' as const,
+        ram_message: "Memory usage on ${server_name} is ${ram_usage}% (threshold: ${threshold}%)",
+        cpu_message: "CPU usage on ${server_name} is ${cpu_usage}% (threshold: ${threshold}%)",
+        disk_message: "Disk usage on ${server_name} is ${disk_usage}% (threshold: ${threshold}%)",
+        network_message: "Network usage on ${server_name} is ${network_usage}% (threshold: ${threshold}%)",
+        up_message: "Server ${server_name} is UP and responding",
+        down_message: "Server ${server_name} is DOWN",
+        notification_id: "",
+        warning_message: "Warning: Server ${server_name} requires attention",
+        paused_message: "Monitoring for server ${server_name} is paused",
+        cpu_temp_message: "CPU temperature on ${server_name} is ${cpu_temp}°C",
+        disk_io_message: "Disk I/O on ${server_name} is ${disk_io} MB/s",
+        restore_ram_message: "Memory usage on ${server_name} has returned to normal: ${ram_usage}%",
+        restore_cpu_message: "CPU usage on ${server_name} has returned to normal: ${cpu_usage}%",
+        restore_disk_message: "Disk usage on ${server_name} has returned to normal: ${disk_usage}%",
+        restore_network_message: "Network usage on ${server_name} has returned to normal: ${network_usage}%",
+        restore_cpu_temp_message: "CPU temperature on ${server_name} has returned to normal: ${cpu_temp}°C",
+        restore_disk_io_message: "Disk I/O on ${server_name} has returned to normal: ${disk_io} MB/s",
+      };
+    
+    case 'service':
+      return {
+        ...base,
+        templateType: 'service' as const,
         up_message: "Service ${service_name} is UP. Response time: ${response_time}ms",
         down_message: "Service ${service_name} is DOWN. Status: ${status}",
         maintenance_message: "Service ${service_name} is under maintenance",
         incident_message: "Service ${service_name} has an incident",
-  resolved_message: "Service ${service_name} issue has been resolved",
+        resolved_message: "Issue with service ${service_name} has been resolved",
-  service_name_placeholder: "${service_name}",
+        warning_message: "Warning: Service ${service_name} response time is high",
-  response_time_placeholder: "${response_time}",
+      };
-  status_placeholder: "${status}",
+    
-  threshold_placeholder: "${threshold}",
+    case 'ssl':
+      return {
+        ...base,
+        templateType: 'ssl' as const,
+        expired: "SSL certificate for ${domain} has EXPIRED on ${expiry_date}",
+        exiring_soon: "SSL certificate for ${domain} will expire in ${days_left} days on ${expiry_date}",
+        warning: "Warning: SSL certificate for ${domain} requires attention",
+      };
+
+    case 'server_threshold':
+      return {
+        ...base,
+        templateType: 'server_threshold' as const,
+        cpu_threshold: 85,
+        ram_threshold: 80,
+        disk_threshold: 90,
+        network_threshold: 75,
+        notification_id: "",
+        server_template_id: "",
+      };
+    
+    default:
+      throw new Error(`Unknown template type: ${templateType}`);
+  }
 };
 
 export interface UseTemplateFormProps {
   templateId: string | null;
+  templateType: TemplateType;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSuccess: () => void;
 }
 
-export const useTemplateForm = ({ templateId, open, onOpenChange, onSuccess }: UseTemplateFormProps) => {
+export const useTemplateForm = ({ templateId, templateType, open, onOpenChange, onSuccess }: UseTemplateFormProps) => {
   const { toast } = useToast();
   const queryClient = useQueryClient();
   const isEditMode = !!templateId;
   
- // console.log("Template form initialized with templateId:", templateId, "isEditMode:", isEditMode);
-
   const form = useForm<TemplateFormData>({
     resolver: zodResolver(templateFormSchema),
-    defaultValues: defaultFormValues,
+    defaultValues: getDefaultValues(templateType),
     mode: "onChange"
   });
 
   // Query to fetch template data for editing
   const { isLoading: isLoadingTemplate, data: templateData } = useQuery({
-    queryKey: ['template', templateId],
+    queryKey: ['template', templateId, templateType],
     queryFn: () => {
       if (!templateId) return null;
-      console.log("Fetching template data for ID:", templateId);
+      
-      return templateService.getTemplate(templateId);
+      return templateService.getTemplate(templateId, templateType);
     },
     enabled: !!templateId && open,
   });
@@ -74,53 +182,71 @@ export const useTemplateForm = ({ templateId, open, onOpenChange, onSuccess }: U
   // Set form values when template data is loaded
   useEffect(() => {
     if (templateData && open) {
-    //  console.log("Setting form values with template data:", templateData);
            
-      form.reset({
+      const formData: any = {
         name: templateData.name || "",
-        type: templateData.type || "default",
+        templateType: templateType,
-        up_message: templateData.up_message || "",
+        placeholder: (templateData as any).placeholder || "",
-        down_message: templateData.down_message || "",
-        maintenance_message: templateData.maintenance_message || "",
-        incident_message: templateData.incident_message || "",
-        resolved_message: templateData.resolved_message || "",
-        service_name_placeholder: templateData.service_name_placeholder || "${service_name}",
-        response_time_placeholder: templateData.response_time_placeholder || "${response_time}",
-        status_placeholder: templateData.status_placeholder || "${status}",
-        threshold_placeholder: templateData.threshold_placeholder || "${threshold}",
-      });
-    }
-  }, [templateData, open, form]);
-
-  // Handle form errors
-  useEffect(() => {
-    const subscription = form.formState.errors.root?.message && 
-      toast({
-        title: "Error",
-        description: form.formState.errors.root.message,
-        variant: "destructive",
-      });
-    
-    return () => {
-      if (subscription) {
-        // Clean up if needed
-      }
       };
-  }, [form.formState.errors.root, toast]);
+
+      // Define the expected fields for each template type
+      const expectedFields = {
+        server: [
+          'ram_message', 'cpu_message', 'disk_message', 'network_message',
+          'up_message', 'down_message', 'notification_id', 'warning_message',
+          'paused_message', 'cpu_temp_message', 'disk_io_message',
+          'restore_ram_message', 'restore_cpu_message', 'restore_disk_message',
+          'restore_network_message', 'restore_cpu_temp_message', 'restore_disk_io_message'
+        ],
+        service: [
+          'up_message', 'down_message', 'maintenance_message', 'incident_message',
+          'resolved_message', 'warning_message'
+        ],
+        ssl: ['expired', 'exiring_soon', 'warning'],
+        server_threshold: [
+          'cpu_threshold', 'ram_threshold', 'disk_threshold', 'network_threshold',
+          'notification_id', 'server_template_id'
+        ]
+      };
+
+      // Add template-specific fields
+      const fieldsToProcess = expectedFields[templateType] || [];
+      fieldsToProcess.forEach(key => {
+        let value = (templateData as any)[key];
+        
+        // Convert string values to numbers for server threshold fields
+        if (templateType === 'server_threshold' && 
+            ['cpu_threshold', 'ram_threshold', 'disk_threshold', 'network_threshold'].includes(key)) {
+          value = typeof value === 'string' ? Number(value) : value;
+          // Ensure valid number, fallback to default if invalid
+          if (isNaN(value)) {
+            const defaults = getDefaultValues(templateType) as any;
+            value = defaults[key] || 0;
+          }
+        }
+        
+        // Set the value, using empty string as fallback for string fields
+        formData[key] = value !== undefined && value !== null ? value : "";
+      });
+
+      console.log("Final form data being set:", formData);
+      form.reset(formData);
+    }
+  }, [templateData, open, form, templateType]);
 
   // Create mutation
   const createMutation = useMutation({
-    mutationFn: (data: CreateUpdateTemplateData) => templateService.createTemplate(data),
+    mutationFn: (data: AnyTemplateData) => templateService.createTemplate(data, templateType),
     onSuccess: () => {
       toast({
         title: "Template created",
         description: "Your notification template has been created successfully.",
       });
-      queryClient.invalidateQueries({ queryKey: ['notification_templates'] });
+      queryClient.invalidateQueries({ queryKey: ['notification_templates', templateType] });
       onSuccess();
     },
     onError: (error) => {
-    //  console.error("Error creating template:", error);
+
       toast({
         title: "Error",
         description: "Failed to create template. Please check your inputs and try again.",
@@ -131,18 +257,18 @@ export const useTemplateForm = ({ templateId, open, onOpenChange, onSuccess }: U
 
   // Update mutation
   const updateMutation = useMutation({
-    mutationFn: ({ id, data }: { id: string; data: CreateUpdateTemplateData }) => 
+    mutationFn: ({ id, data }: { id: string; data: AnyTemplateData }) => 
-      templateService.updateTemplate(id, data),
+      templateService.updateTemplate(id, data, templateType),
     onSuccess: () => {
       toast({
         title: "Template updated",
         description: "Your notification template has been updated successfully.",
       });
-      queryClient.invalidateQueries({ queryKey: ['notification_templates'] });
+      queryClient.invalidateQueries({ queryKey: ['notification_templates', templateType] });
       onSuccess();
     },
     onError: (error) => {
-    //  console.error("Error updating template:", error);
+ 
       toast({
         title: "Error",
         description: "Failed to update template. Please check your inputs and try again.",
@@ -155,39 +281,28 @@ export const useTemplateForm = ({ templateId, open, onOpenChange, onSuccess }: U
 
   // Handle form submission
   const onSubmit = (formData: TemplateFormData) => {
-   // console.log("Submitting form data:", formData);
    
-    // Ensure all required fields are present
+    
-    const completeData: CreateUpdateTemplateData = {
+    // Remove templateType from the data before sending to API
-      name: formData.name,
+    const { templateType: _, ...templateDataWithoutType } = formData;
-      type: formData.type,
+    const completeData = templateDataWithoutType as AnyTemplateData;
-      up_message: formData.up_message,
-      down_message: formData.down_message,
-      maintenance_message: formData.maintenance_message,
-      incident_message: formData.incident_message,
-      resolved_message: formData.resolved_message,
-      service_name_placeholder: formData.service_name_placeholder,
-      response_time_placeholder: formData.response_time_placeholder,
-      status_placeholder: formData.status_placeholder,
-      threshold_placeholder: formData.threshold_placeholder,
-    };
     
     if (isEditMode && templateId) {
-    //  console.log("Updating template with ID:", templateId);
+
       updateMutation.mutate({ id: templateId, data: completeData });
     } else {
-    //  console.log("Creating new template");
+
       createMutation.mutate(completeData);
     }
   };
 
-  // Reset form when dialog closes
+  // Reset form when dialog closes or template type changes
   useEffect(() => {
     if (!open) {
-     // console.log("Dialog closed, resetting form");
+      console.log("Dialog closed, resetting form");
-      form.reset(defaultFormValues);
+      form.reset(getDefaultValues(templateType));
     }
-  }, [open, form]);
+  }, [open, form, templateType]);
 
   return {
     form,

application/src/components/settings/data-retention/DataRetentionSettings.tsx

@@ -52,7 +52,6 @@ const DataRetentionSettings = () => {
         setLastCleanup(result.lastCleanup);
       }
     } catch (error) {
-      console.error("Error loading retention settings:", error);
       toast({
         title: "Error",
         description: "Failed to load retention settings",
@@ -72,7 +71,6 @@ const DataRetentionSettings = () => {
         description: "Data retention settings have been updated",
       });
     } catch (error) {
-      console.error("Error saving retention settings:", error);
       toast({
         title: "Error",
         description: "Failed to save retention settings",
@@ -96,7 +94,6 @@ const DataRetentionSettings = () => {
       // Reload settings to get updated last cleanup time
       await loadSettings();
     } catch (error) {
-      console.error("Error during uptime cleanup:", error);
       toast({
         title: "Error",
         description: "Failed to perform uptime data cleanup",
@@ -120,7 +117,6 @@ const DataRetentionSettings = () => {
       // Reload settings to get updated last cleanup time
       await loadSettings();
     } catch (error) {
-      console.error("Error during server cleanup:", error);
       toast({
         title: "Error",
         description: "Failed to perform server data cleanup",
@@ -144,7 +140,6 @@ const DataRetentionSettings = () => {
       // Reload settings to get updated last cleanup time
       await loadSettings();
     } catch (error) {
-      console.error("Error during manual cleanup:", error);
       toast({
         title: "Error",
         description: "Failed to perform database cleanup",
@@ -210,10 +205,16 @@ const DataRetentionSettings = () => {
                 min="1"
                 max="365"
                 value={settings.uptimeRetentionDays}
-                onChange={(e) => setSettings(prev => ({
+                onChange={(e) => {
+                  const value = e.target.value;
+                  if (value === '' || isNaN(Number(value))) {
+                    return;
+                  }
+                  setSettings(prev => ({
                     ...prev,
-                  uptimeRetentionDays: parseInt(e.target.value) || 30
+                    uptimeRetentionDays: Number(value)
-                }))}
+                  }));
+                }}
                 className="mt-1"
               />
               <p className="text-sm text-muted-foreground mt-1">
@@ -229,10 +230,16 @@ const DataRetentionSettings = () => {
                 min="1"
                 max="365"
                 value={settings.serverRetentionDays}
-                onChange={(e) => setSettings(prev => ({
+                onChange={(e) => {
+                  const value = e.target.value;
+                  if (value === '' || isNaN(Number(value))) {
+                    return;
+                  }
+                  setSettings(prev => ({
                     ...prev,
-                  serverRetentionDays: parseInt(e.target.value) || 30
+                    serverRetentionDays: Number(value)
-                }))}
+                  }));
+                }}
                 className="mt-1"
               />
               <p className="text-sm text-muted-foreground mt-1">
@@ -250,52 +257,7 @@ const DataRetentionSettings = () => {
             </Alert>
           )}
         </CardContent>
-        <CardFooter className="flex flex-col gap-4">
+        <CardFooter className="flex justify-end">
-          <div className="flex flex-wrap gap-2 w-full">
-            <Button
-              variant="outline"
-              onClick={handleUptimeShrink}
-              disabled={isUptimeShrinking}
-              className="flex items-center gap-2"
-            >
-              {isUptimeShrinking ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Globe className="h-4 w-4" />
-              )}
-              Shrink Uptime Data
-            </Button>
-            
-            <Button
-              variant="outline"
-              onClick={handleServerShrink}
-              disabled={isServerShrinking}
-              className="flex items-center gap-2"
-            >
-              {isServerShrinking ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Server className="h-4 w-4" />
-              )}
-              Shrink Server Data
-            </Button>
-            
-            <Button
-              variant="outline"
-              onClick={handleFullShrink}
-              disabled={isFullShrinking}
-              className="flex items-center gap-2"
-            >
-              {isFullShrinking ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Trash2 className="h-4 w-4" />
-              )}
-              Full Database Shrink
-            </Button>
-          </div>
-          
-          <div className="flex justify-end w-full">
           <Button
             onClick={handleSave}
             disabled={isSaving}
@@ -306,7 +268,6 @@ const DataRetentionSettings = () => {
             ) : null}
             Save Changes
           </Button>
-          </div>
         </CardFooter>
       </Card>
     </div>

application/src/components/settings/general/GeneralSettingsPanel.tsx

@@ -143,7 +143,7 @@ const GeneralSettingsPanel: React.FC<GeneralSettingsPanelProps> = () => {
             <Alert className="border-blue-200 bg-blue-50 dark:bg-blue-950 dark:border-blue-800">
               <ShieldAlert className="h-5 w-5 text-blue-600 dark:text-blue-400" />
               <AlertDescription className="text-blue-700 dark:text-blue-300">
-                <span className="font-medium">Permission Notice:</span> As an admin user, you do not have access to view or modify system and mail settings. These settings can only be accessed and modified by Super Admins. Contact your Super Admin if you need to make changes to system configuration or mail settings.
+                <span className="font-medium">{t("permissionNotice")}</span> {t("permissionNoticeAddUser")}
               </AlertDescription>
             </Alert>
           </CardContent>
@@ -153,11 +153,11 @@ const GeneralSettingsPanel: React.FC<GeneralSettingsPanelProps> = () => {
   }
 
   if (isLoading) {
-    return <div className="p-4">Loading settings...</div>;
+    return <div className="p-4">{t("loadingSettings")}</div>;
   }
 
   if (error) {
-    return <div className="p-4 text-red-500">Error loading settings</div>;
+    return <div className="p-4 text-red-500">{t("loadingSettingsError")}</div>;
   }
 
   return (

application/src/components/settings/general/TestEmailDialog.tsx

@@ -126,15 +126,6 @@ const TestEmailDialog: React.FC<TestEmailDialogProps> = ({
             <Mail className="h-5 w-5" />
             {t("sendTestEmail", "settings")}
           </DialogTitle>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="absolute right-4 top-4"
-            onClick={handleClose}
-            disabled={isLoading}
-          >
-            <X className="h-4 w-4" />
-          </Button>
         </DialogHeader>
         
         <div className="space-y-4 py-4">
@@ -203,9 +194,7 @@ const TestEmailDialog: React.FC<TestEmailDialogProps> = ({
           {/* Info message */}
           <Alert>
             <AlertCircle className="h-4 w-4" />
-            <AlertDescription>
+            <AlertDescription>{t("testEmailAlert", "settings")}</AlertDescription>
-              This will send a test email using your configured SMTP settings. Make sure SMTP is properly configured first.
-            </AlertDescription>
           </Alert>
         </div>
 
@@ -223,7 +212,7 @@ const TestEmailDialog: React.FC<TestEmailDialogProps> = ({
             ) : (
               <Mail className="h-4 w-4" />
             )}
-            {isLoading ? t("sending", "settings") : t("send", "common")}
+            {isLoading ? t("sending", "settings") : t("send", "settings")}
           </Button>
         </DialogFooter>
       </DialogContent>

application/src/components/settings/notification-settings/NotificationChannelDialog.tsx

@@ -1,4 +1,3 @@
-
 import React, { useEffect } from "react";
 import { 
   Dialog, 
@@ -8,12 +7,13 @@ import {
   DialogFooter 
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { AlertConfiguration, alertConfigService } from "@/services/alertConfigService";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import {
   Form,
   FormControl,
@@ -24,7 +24,10 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Switch } from "@/components/ui/switch";
-import { Loader2 } from "lucide-react";
+import { Loader2, Copy } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { toast } from "@/hooks/use-toast";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface NotificationChannelDialogProps {
   open: boolean;
@@ -32,11 +35,12 @@ interface NotificationChannelDialogProps {
   editingConfig: AlertConfiguration | null;
 }
 
+
 const baseSchema = z.object({
   notify_name: z.string().min(1, "Name is required"),
-  notification_type: z.enum(["telegram", "discord", "slack", "signal", "email"]),
+  notification_type: z.enum(["telegram", "discord", "slack", "signal", "google_chat", "email", "ntfy", "pushover", "notifiarr", "gotify", "webhook"]),
   enabled: z.boolean().default(true),
-  service_id: z.string().default("global"), // Assuming global for now, could be linked to specific services
+  service_id: z.string().default("global"),
   template_id: z.string().optional(),
 });
 
@@ -59,11 +63,51 @@ const slackSchema = baseSchema.extend({
 const signalSchema = baseSchema.extend({
   notification_type: z.literal("signal"),
   signal_number: z.string().min(1, "Signal number is required"),
+  signal_api_endpoint: z.string().url("Must be a valid API endpoint URL"),
+});
+
+const googleChatSchema = baseSchema.extend({
+  notification_type: z.literal("google_chat"),
+  google_chat_webhook_url: z.string().url("Must be a valid URL"),
 });
 
 const emailSchema = baseSchema.extend({
   notification_type: z.literal("email"),
-  // Email specific fields could be added here
+  email_address: z.string().email("Valid email is required"),
+  email_sender_name: z.string().min(1, "Sender name is required"),
+  smtp_server: z.string().min(1, "SMTP server is required"),
+  smtp_port: z.string().min(1, "SMTP port is required"),
+  smtp_password: z.string().min(1, "SMTP password is required"),
+});
+
+const ntfySchema = baseSchema.extend({
+  notification_type: z.literal("ntfy"),
+  ntfy_endpoint: z.string().url("Must be a valid NTFY endpoint URL"),
+  api_token: z.string().optional(),
+});
+
+const pushoverSchema = baseSchema.extend({
+  notification_type: z.literal("pushover"),
+  api_token: z.string().min(1, "API token is required"),
+  user_key: z.string().min(1, "User key is required"),
+});
+
+const notifiarrSchema = baseSchema.extend({
+  notification_type: z.literal("notifiarr"),
+  api_token: z.string().min(1, "API token is required"),
+  channel_id: z.string().min(1, "Channel ID is required"),
+});
+
+const webhookSchema = baseSchema.extend({
+  notification_type: z.literal("webhook"),
+  webhook_url: z.string().url("Must be a valid URL"),
+  webhook_payload_template: z.string().optional(),
+});
+
+const gotifySchema = baseSchema.extend({
+  notification_type: z.literal("gotify"),
+  api_token: z.string().min(1, "API token is required"),
+  server_url: z.string().url("Must be a valid server URL"),
 });
 
 const formSchema = z.discriminatedUnion("notification_type", [
@@ -71,11 +115,133 @@ const formSchema = z.discriminatedUnion("notification_type", [
   discordSchema,
   slackSchema,
   signalSchema,
-  emailSchema
+  googleChatSchema,
+  emailSchema,
+  ntfySchema,
+  pushoverSchema,
+  notifiarrSchema,
+  gotifySchema,
+  webhookSchema,
 ]);
 
 type FormValues = z.infer<typeof formSchema>;
 
+const notificationTypeOptions = [
+  { 
+    value: "telegram", 
+    label: "Telegram", 
+    description: "Send notifications via Telegram bot",
+    icon: "/upload/notification/telegram.png"
+  },
+  { 
+    value: "discord", 
+    label: "Discord", 
+    description: "Send notifications to Discord webhook",
+    icon: "/upload/notification/discord.png"
+  },
+  { 
+    value: "slack", 
+    label: "Slack", 
+    description: "Send notifications to Slack webhook",
+    icon: "/upload/notification/slack.png"
+  },
+  { 
+    value: "signal", 
+    label: "Signal", 
+    description: "Send notifications via Signal",
+    icon: "/upload/notification/signal.png"
+  },
+  { 
+    value: "google_chat", 
+    label: "Google Chat", 
+    description: "Send notifications to Google Chat webhook",
+    icon: "/upload/notification/google.png"
+  },
+  { 
+    value: "email", 
+    label: "Email", 
+    description: "Send notifications via email",
+    icon: "/upload/notification/email.png"
+  },
+  { 
+    value: "ntfy", 
+    label: "NTFY", 
+    description: "Send notifications via NTFY push service",
+    icon: "/upload/notification/ntfy.png" 
+  },
+  { 
+    value: "pushover", 
+    label: "Pushover", 
+    description: "Send push notifications via Pushover",
+    icon: "/upload/notification/pushover.png" 
+  },
+
+  { 
+    value: "notifiarr", 
+    label: "Notifiarr", 
+    description: "Send notifications via Notifiarr",
+    icon: "/upload/notification/notifiarr.png" 
+  },
+  { 
+    value: "gotify", 
+    label: "Gotify", 
+    description: "Send push notifications via Gotify",
+    icon: "/upload/notification/gotify.png" 
+  },
+  { 
+    value: "webhook", 
+    label: "Webhook", 
+    description: "Send notifications to custom webhook",
+    icon: "/upload/notification/webhook.png"
+  },
+];
+
+const webhookPayloadTemplates = {
+  server: `{
+  "alert_type": "server",
+  "server_name": "\${server_name}",
+  "status": "\${status}",
+  "cpu_usage": "\${cpu_usage}",
+  "ram_usage": "\${ram_usage}",
+  "disk_usage": "\${disk_usage}",
+  "network_usage": "\${network_usage}",
+  "cpu_temp": "\${cpu_temp}",
+  "disk_io": "\${disk_io}",
+  "threshold": "\${time}",
+  "message": "Server \${server_name} alert: \${status}"
+}`,
+  service: `{
+  "alert_type": "service",
+  "service_name": "\${service_name}",
+  "status": "\${status}",
+  "response_time": "\${response_time}",
+  "url": "\${url}",
+  "uptime": "\${uptime}",
+  "downtime": "\${downtime}",
+  "timestamp": "\${time}",
+  "message": "Service \${service_name} is \${status}"
+}`,
+  ssl: `{
+  "alert_type": "ssl",
+  "domain": "\${domain}",
+  "certificate_name": "\${certificate_name}",
+  "expiry_date": "\${expiry_date}",
+  "days_left": "\${days_left}",
+  "issuer": "\${issuer}",
+  "serial_number": "\${serial_number}",
+  "timestamp": "\${time}",
+  "message": "SSL certificate for \${domain} expires in \${days_left} days"
+}`
+};
+
+const defaultPayloadTemplate = `{
+  "alert_type": "general",
+  "service_name": "\${service_name}",
+  "status": "\${status}",
+  "message": "\${message}",
+  "timestamp": "\${time}"
+}`;
+
 export const NotificationChannelDialog = ({ 
   open, 
   onClose,
@@ -93,7 +259,7 @@ export const NotificationChannelDialog = ({
     },
   });
 
-  const { watch, reset } = form;
+  const { watch, reset, setValue } = form;
   const notificationType = watch("notification_type");
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   
@@ -123,10 +289,14 @@ export const NotificationChannelDialog = ({
     onClose(false);
   };
 
+  const insertTemplate = (template: string) => {
+    setValue("webhook_payload_template", template);
+  };
+
   const onSubmit = async (values: FormValues) => {
     setIsSubmitting(true);
     try {
-      // Ensure service_id is always present
+      // Handle all notification types including webhook through alert_configurations
       const configData = {
         ...values,
         service_id: values.service_id || "global",
@@ -137,7 +307,14 @@ export const NotificationChannelDialog = ({
       } else {
         await alertConfigService.createAlertConfiguration(configData as any);
       }
+      
       onClose(true); // Close with refresh
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to save notification channel",
+        variant: "destructive"
+      });
     } finally {
       setIsSubmitting(false);
     }
@@ -145,7 +322,7 @@ export const NotificationChannelDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={() => handleClose()}>
-      <DialogContent className="sm:max-w-[500px]">
+      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>
             {isEditing ? "Edit Notification Channel" : "Add Notification Channel"}
@@ -159,7 +336,7 @@ export const NotificationChannelDialog = ({
               name="notify_name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Name</FormLabel>
+                  <FormLabel>Channel Name</FormLabel>
                   <FormControl>
                     <Input placeholder="My Notification Channel" {...field} />
                   </FormControl>
@@ -175,63 +352,37 @@ export const NotificationChannelDialog = ({
               control={form.control}
               name="notification_type"
               render={({ field }) => (
-                <FormItem className="space-y-3">
+                <FormItem>
                   <FormLabel>Channel Type</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
                     <FormControl>
-                    <RadioGroup
+                      <SelectTrigger>
-                      onValueChange={field.onChange}
+                        <SelectValue placeholder="Select notification type" />
-                      defaultValue={field.value}
+                      </SelectTrigger>
-                      value={field.value}
-                      className="flex flex-col space-y-1"
-                    >
-                      <FormItem className="flex items-center space-x-3 space-y-0">
-                        <FormControl>
-                          <RadioGroupItem value="telegram" />
-                        </FormControl>
-                        <FormLabel className="font-normal">
-                          Telegram
-                        </FormLabel>
-                      </FormItem>
-                      <FormItem className="flex items-center space-x-3 space-y-0">
-                        <FormControl>
-                          <RadioGroupItem value="discord" />
-                        </FormControl>
-                        <FormLabel className="font-normal">
-                          Discord
-                        </FormLabel>
-                      </FormItem>
-                      <FormItem className="flex items-center space-x-3 space-y-0">
-                        <FormControl>
-                          <RadioGroupItem value="slack" />
-                        </FormControl>
-                        <FormLabel className="font-normal">
-                          Slack
-                        </FormLabel>
-                      </FormItem>
-                      <FormItem className="flex items-center space-x-3 space-y-0">
-                        <FormControl>
-                          <RadioGroupItem value="signal" />
-                        </FormControl>
-                        <FormLabel className="font-normal">
-                          Signal
-                        </FormLabel>
-                      </FormItem>
-                      <FormItem className="flex items-center space-x-3 space-y-0">
-                        <FormControl>
-                          <RadioGroupItem value="email" />
-                        </FormControl>
-                        <FormLabel className="font-normal">
-                          Email
-                        </FormLabel>
-                      </FormItem>
-                    </RadioGroup>
                     </FormControl>
+                    <SelectContent>
+                      {notificationTypeOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <div className="flex items-center space-x-3">
+                            <img 
+                              src={option.icon} 
+                              alt={`${option.label} icon`}
+                              className="w-5 h-5 object-contain"
+                            />
+                            <div className="flex flex-col">
+                              <span className="font-medium">{option.label}</span>
+                              <span className="text-xs text-muted-foreground">{option.description}</span>
+                            </div>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                   <FormMessage />
                 </FormItem>
               )}
             />
             
-            {/* Show different fields based on notification type */}
             {notificationType === "telegram" && (
               <>
                 <FormField
@@ -243,6 +394,9 @@ export const NotificationChannelDialog = ({
                       <FormControl>
                         <Input placeholder="Telegram Chat ID" {...field} />
                       </FormControl>
+                      <FormDescription>
+                        The Telegram chat ID to send notifications to
+                      </FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
@@ -256,6 +410,9 @@ export const NotificationChannelDialog = ({
                       <FormControl>
                         <Input placeholder="Telegram Bot Token" {...field} type="password" />
                       </FormControl>
+                      <FormDescription>
+                        Your Telegram bot token from @BotFather
+                      </FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
@@ -271,8 +428,11 @@ export const NotificationChannelDialog = ({
                   <FormItem>
                     <FormLabel>Webhook URL</FormLabel>
                     <FormControl>
-                      <Input placeholder="Discord Webhook URL" {...field} />
+                      <Input placeholder="https://discord.com/api/webhooks/..." {...field} />
                     </FormControl>
+                    <FormDescription>
+                      Discord webhook URL from your server settings
+                    </FormDescription>
                     <FormMessage />
                   </FormItem>
                 )}
@@ -287,8 +447,11 @@ export const NotificationChannelDialog = ({
                   <FormItem>
                     <FormLabel>Webhook URL</FormLabel>
                     <FormControl>
-                      <Input placeholder="Slack Webhook URL" {...field} />
+                      <Input placeholder="https://hooks.slack.com/services/..." {...field} />
                     </FormControl>
+                    <FormDescription>
+                      Slack incoming webhook URL
+                    </FormDescription>
                     <FormMessage />
                   </FormItem>
                 )}
@@ -296,6 +459,7 @@ export const NotificationChannelDialog = ({
             )}
             
             {notificationType === "signal" && (
+               <>
                 <FormField
                   control={form.control}
                   name="signal_number"
@@ -305,10 +469,367 @@ export const NotificationChannelDialog = ({
                       <FormControl>
                         <Input placeholder="+1234567890" {...field} />
                       </FormControl>
+                      <FormDescription>
+                        Signal phone number to send notifications to
+                      </FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
+                <FormField
+                  control={form.control}
+                  name="signal_api_endpoint"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Signal API Endpoint</FormLabel>
+                      <FormControl>
+                        <Input placeholder="https://your-signal-api.com/v2/send" {...field} />
+                      </FormControl>
+                      <FormDescription>
+                        The Rest API endpoint for your Signal service
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </>
+            )}
+
+            {notificationType === "google_chat" && (
+              <FormField
+                control={form.control}
+                name="google_chat_webhook_url"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Google Chat Webhook URL</FormLabel>
+                    <FormControl>
+                      <Input placeholder="https://chat.googleapis.com/v1/spaces/..." {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Google Chat webhook URL from your Google Chat space
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {notificationType === "email" && (
+              <>
+                <FormField
+                  control={form.control}
+                  name="email_address"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email Address</FormLabel>
+                      <FormControl>
+                        <Input placeholder="notifications@example.com" {...field} type="email" />
+                      </FormControl>
+                      <FormDescription>
+                        Email address to send notifications to
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="email_sender_name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Sender Name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Alert System" {...field} />
+                      </FormControl>
+                      <FormDescription>
+                        Display name for outgoing emails
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <div className="grid grid-cols-2 gap-4">
+                  <FormField
+                    control={form.control}
+                    name="smtp_server"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>SMTP Server</FormLabel>
+                        <FormControl>
+                          <Input placeholder="smtp.gmail.com" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="smtp_port"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>SMTP Port</FormLabel>
+                        <FormControl>
+                          <Input placeholder="587" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <FormField
+                  control={form.control}
+                  name="smtp_password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>SMTP Password</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Enter your SMTP password" {...field} type="password" />
+                      </FormControl>
+                      <FormDescription>
+                        Password for authenticating with the SMTP server
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </>
+            )}
+
+             {notificationType === "ntfy" && (
+             <>
+                <FormField
+                  control={form.control}
+                  name="ntfy_endpoint"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>NTFY Endpoint</FormLabel>
+                      <FormControl>
+                        <Input placeholder="https://ntfy.sh/your-topic" {...field} />
+                      </FormControl>
+                      <FormDescription>
+                        The NTFY endpoint URL including your topic (e.g., https://ntfy.sh/checkcle)
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="api_token"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>API Token (Optional)</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Enter NTFY API token" {...field} type="password" />
+                      </FormControl>
+                      <FormDescription>
+                        Optional API token for authentication with NTFY server
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </>
+            )}
+
+             {notificationType === "pushover" && (
+              <>
+                <FormField
+                  control={form.control}
+                  name="api_token"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>API Token</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Your Pushover API token" {...field} type="password" />
+                      </FormControl>
+                      <FormDescription>
+                        Your Pushover application API token
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="user_key"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>User Key</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Your Pushover user key" {...field} />
+                      </FormControl>
+                      <FormDescription>
+                        Your Pushover user key (or group key)
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </>
+            )}
+
+             {notificationType === "notifiarr" && (
+              <>
+                <FormField
+                  control={form.control}
+                  name="api_token"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>API Token</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Your Notifiarr API token" {...field} type="password" />
+                      </FormControl>
+                      <FormDescription>
+                        Your Notifiarr API token for sending notifications
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="channel_id"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Channel ID</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Discord Channel ID" {...field} />
+                      </FormControl>
+                      <FormDescription>
+                        The Discord channel ID where notifications will be sent
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </>
+            )}
+
+            {notificationType === "gotify" && (
+              <>
+                <FormField
+                  control={form.control}
+                  name="api_token"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>API Token</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Your Gotify API token" {...field} type="password" />
+                      </FormControl>
+                      <FormDescription>
+                        Your Gotify application API token
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="server_url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Server URL</FormLabel>
+                      <FormControl>
+                        <Input placeholder="https://your-gotify-server.com" {...field} />
+                      </FormControl>
+                      <FormDescription>
+                        The URL of your Gotify server
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </>
+            )}
+            
+            {notificationType === "webhook" && (
+              <>
+                <FormField
+                  control={form.control}
+                  name="webhook_url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Webhook URL</FormLabel>
+                      <FormControl>
+                        <Input placeholder="https://api.example.com/webhook" {...field} />
+                      </FormControl>
+                      <FormDescription>
+                        The URL where webhook notifications will be sent
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <div className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="webhook_payload_template"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Payload Template (Optional)</FormLabel>
+                       
+                        <FormDescription>
+                          JSON template for the webhook payload. Leave empty to use default template.
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <Card>
+                    <CardHeader className="pb-3">
+                      <CardTitle className="text-sm font-medium">Payload Templates</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-3">
+                        <div className="mt-4">
+                          <h4 className="text-sm font-medium mb-2">Available Placeholders:</h4>
+                          <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
+                            <div className="space-y-1">
+                              <p className="font-medium text-muted-foreground">Server:</p>
+                              <div className="space-y-0.5">
+                                <code className="bg-muted px-1 rounded">${'{server_name}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{cpu_usage}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{ram_usage}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{disk_usage}'}</code>
+                              </div>
+                            </div>
+                            <div className="space-y-1">
+                              <p className="font-medium text-muted-foreground">Service:</p>
+                              <div className="space-y-0.5">
+                                <code className="bg-muted px-1 rounded">${'{service_name}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{response_time}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{url}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{uptime}'}</code>
+                              </div>
+                            </div>
+                            <div className="space-y-1">
+                              <p className="font-medium text-muted-foreground">SSL:</p>
+                              <div className="space-y-0.5">
+                                <code className="bg-muted px-1 rounded">${'{domain}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{expiry_date}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{days_left}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{issuer}'}</code>
+                              </div>
+                            </div>
+                            <div className="space-y-1">
+                              <p className="font-medium text-muted-foreground">Common:</p>
+                              <div className="space-y-0.5">
+                                <code className="bg-muted px-1 rounded">${'{status}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{time}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{message}'}</code><br/>
+                                <code className="bg-muted px-1 rounded">${'{threshold}'}</code>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </>
             )}
             
             <FormField
@@ -319,7 +840,7 @@ export const NotificationChannelDialog = ({
                   <div className="space-y-0.5">
                     <FormLabel>Enabled</FormLabel>
                     <FormDescription>
-                      Turn notifications on or off
+                      Enable or disable this notification channel
                     </FormDescription>
                   </div>
                   <FormControl>
@@ -338,7 +859,7 @@ export const NotificationChannelDialog = ({
               </Button>
               <Button type="submit" disabled={isSubmitting}>
                 {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                {isEditing ? "Update" : "Create"}
+                {isEditing ? "Update Channel" : "Create Channel"}
               </Button>
             </DialogFooter>
           </form>

application/src/components/settings/notification-settings/NotificationChannelList.tsx

@@ -13,9 +13,17 @@ import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { alertConfigService } from "@/services/alertConfigService";
+import { pb } from "@/lib/pocketbase";
+
+interface CombinedChannel extends Partial<AlertConfiguration> {
+  isWebhook?: boolean;
+  url?: string;
+  method?: string;
+  description?: string;
+}
 
 interface NotificationChannelListProps {
-  channels: AlertConfiguration[];
+  channels: CombinedChannel[];
   onEdit: (config: AlertConfiguration) => void;
   onDelete: (id: string) => void;
 }
@@ -25,25 +33,65 @@ export const NotificationChannelList = ({
   onEdit,
   onDelete
 }: NotificationChannelListProps) => {
-  const toggleEnabled = async (config: AlertConfiguration) => {
+  const toggleEnabled = async (config: CombinedChannel) => {
     if (!config.id) return;
     
+    if (config.isWebhook) {
+      // Handle webhook toggle
+      try {
+        const newEnabled = config.enabled ? "off" : "on";
+        await pb.collection('webhook').update(config.id, {
+          enabled: newEnabled
+        });
+        // Trigger refresh by calling onEdit with empty config
+        onEdit({} as AlertConfiguration);
+      } catch (error) {
+        console.error("Error updating webhook:", error);
+      }
+    } else {
+      // Handle alert config toggle
       await alertConfigService.updateAlertConfiguration(config.id, {
         enabled: !config.enabled
       });
       
       // The parent component will refresh the list
-    onEdit(config);
+      onEdit(config as AlertConfiguration);
+    }
   };
 
-  const getChannelTypeLabel = (type: string) => {
+  const getChannelTypeLabel = (type: string | undefined) => {
     switch(type) {
       case "telegram": return "Telegram";
       case "discord": return "Discord";
       case "slack": return "Slack";
       case "signal": return "Signal";
+      case "google_chat": return "Google Chat";
       case "email": return "Email";
-      default: return type;
+      case "pushover": return "Pushover";
+      case "notifiarr": return "Notifiarr";
+      case "webhook": return "Webhook";
+      default: return type || "Unknown";
+    }
+  };
+
+  const getChannelDetails = (config: CombinedChannel) => {
+    if (config.isWebhook) {
+      return `${config.method || 'POST'} ${config.url || ''}`;
+    }
+    
+    switch(config.notification_type) {
+      case "telegram":
+        return config.telegram_chat_id || '';
+      case "discord":
+      case "slack":
+      case "google_chat":
+        return config.discord_webhook_url || config.slack_webhook_url || config.google_chat_webhook_url || '';
+      case "signal":
+        return config.signal_number || '';
+      case "email":
+        return config.email_address || '';
+      default:
+        return '';
     }
   };
 
@@ -66,6 +114,7 @@ export const NotificationChannelList = ({
           <TableRow>
             <TableHead>Name</TableHead>
             <TableHead>Type</TableHead>
+            <TableHead>Details</TableHead>
             <TableHead>Status</TableHead>
             <TableHead>Created</TableHead>
             <TableHead className="text-right">Actions</TableHead>
@@ -78,11 +127,14 @@ export const NotificationChannelList = ({
               <TableCell>
                 <Badge variant="outline">{getChannelTypeLabel(channel.notification_type)}</Badge>
               </TableCell>
+              <TableCell className="max-w-xs truncate text-sm text-muted-foreground">
+                {getChannelDetails(channel)}
+              </TableCell>
               <TableCell>
                 <Switch 
                   checked={
                     typeof channel.enabled === 'string'
-                      ? channel.enabled === "true"
+                      ? channel.enabled === "true" || channel.enabled === "on"
                       : !!channel.enabled
                   }
                   onCheckedChange={() => toggleEnabled(channel)}
@@ -96,7 +148,8 @@ export const NotificationChannelList = ({
                   <Button 
                     variant="outline" 
                     size="sm" 
-                    onClick={() => onEdit(channel)}
+                    onClick={() => onEdit(channel as AlertConfiguration)}
+                    disabled={channel.isWebhook} // Disable edit for webhooks for now
                   >
                     <Edit className="h-4 w-4" />
                   </Button>

application/src/components/settings/notification-settings/NotificationSettings.tsx

@@ -5,28 +5,47 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { Plus, Loader2 } from "lucide-react";
 import { AlertConfiguration, alertConfigService } from "@/services/alertConfigService";
+import { WebhookConfiguration, webhookService } from "@/services/webhookService";
 import { NotificationChannelDialog } from "./NotificationChannelDialog";
 import { NotificationChannelList } from "./NotificationChannelList";
+import { pb } from "@/lib/pocketbase";
+
+interface CombinedChannel extends Partial<AlertConfiguration> {
+  isWebhook?: boolean;
+  url?: string;
+  method?: string;
+  description?: string;
+}
 
 const NotificationSettings = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [alertConfigs, setAlertConfigs] = useState<AlertConfiguration[]>([]);
+  const [webhookConfigs, setWebhookConfigs] = useState<WebhookConfiguration[]>([]);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [currentTab, setCurrentTab] = useState<string>("all");
   const [editingConfig, setEditingConfig] = useState<AlertConfiguration | null>(null);
 
-  const fetchAlertConfigurations = async () => {
+  const fetchNotificationChannels = async () => {
     setIsLoading(true);
     try {
+      // Fetch alert configurations
       const configs = await alertConfigService.getAlertConfigurations();
       setAlertConfigs(configs);
+
+      // Fetch webhooks
+      try {
+        const webhookResponse = await pb.collection('webhook').getList(1, 50);
+        setWebhookConfigs(webhookResponse.items as WebhookConfiguration[]);
+      } catch (webhookError) {
+        setWebhookConfigs([]);
+      }
     } finally {
       setIsLoading(false);
     }
   };
 
   useEffect(() => {
-    fetchAlertConfigurations();
+    fetchNotificationChannels();
   }, []);
 
   const handleAddNew = () => {
@@ -40,22 +59,66 @@ const NotificationSettings = () => {
   };
 
   const handleDelete = async (id: string) => {
+    // Check if it's a webhook first
+    const isWebhook = webhookConfigs.find(w => w.id === id);
+    
+    if (isWebhook) {
+      // Handle webhook deletion
+      if (confirm("Are you sure you want to delete this webhook?")) {
+        try {
+          await pb.collection('webhook').delete(id);
+          fetchNotificationChannels();
+        } catch (error) {
+          console.error("Error deleting webhook:", error);
+        }
+      }
+    } else {
+      // Handle alert config deletion
       const success = await alertConfigService.deleteAlertConfiguration(id);
       if (success) {
-      fetchAlertConfigurations();
+        fetchNotificationChannels();
+      }
     }
   };
 
   const handleDialogClose = (refreshList: boolean) => {
     setDialogOpen(false);
     if (refreshList) {
-      fetchAlertConfigurations();
+      fetchNotificationChannels();
     }
   };
 
+  const getCombinedChannels = (): CombinedChannel[] => {
+    const combined: CombinedChannel[] = [];
+    
+    // Add alert configurations
+    alertConfigs.forEach(config => {
+      combined.push(config);
+    });
+    
+    // Add webhooks as notification channels
+    webhookConfigs.forEach(webhook => {
+      combined.push({
+        id: webhook.id,
+        notify_name: webhook.name,
+        notification_type: "webhook" as const,
+        enabled: webhook.enabled === "on",
+        created: webhook.created,
+        updated: webhook.updated,
+        isWebhook: true,
+        url: webhook.url,
+        method: webhook.method,
+        description: webhook.description
+      });
+    });
+    
+    return combined;
+  };
+
   const getFilteredConfigs = () => {
-    if (currentTab === "all") return alertConfigs;
+    const combined = getCombinedChannels();
-    return alertConfigs.filter(config => config.notification_type === currentTab);
+    if (currentTab === "all") return combined;
+    return combined.filter(config => config.notification_type === currentTab);
   };
 
   return (
@@ -86,7 +149,9 @@ const NotificationSettings = () => {
             <TabsTrigger value="discord">Discord</TabsTrigger>
             <TabsTrigger value="slack">Slack</TabsTrigger>
             <TabsTrigger value="signal">Signal</TabsTrigger>
+            <TabsTrigger value="google_chat">Google Chat</TabsTrigger>
             <TabsTrigger value="email">Email</TabsTrigger>
+            <TabsTrigger value="webhook">Webhook</TabsTrigger>
           </TabsList>
           
           <TabsContent value={currentTab} className="mt-0">

application/src/components/settings/user-management/UserManagement.tsx

@@ -10,7 +10,10 @@ import { UserCog, Loader2, AlertCircle, Info, Users, ShieldAlert } from "lucide-
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { authService } from "@/services/authService";
+import { useLanguage }  from "@/contexts/LanguageContext.tsx";
+
 const UserManagement = () => {
+  const { t } = useLanguage();
   const {
     users,
     loading,
@@ -44,21 +47,21 @@ const UserManagement = () => {
           <AccordionTrigger className="py-4 px-5 bg-card hover:bg-card/90 hover:no-underline rounded-lg text-lg font-medium flex items-center w-full">
             <div className="flex items-center">
               <UserCog className="h-5 w-5 mr-2 text-green-500" />
-              <span>User Management</span>
+              <span>{t("userManagement")}</span>
             </div>
           </AccordionTrigger>
           <AccordionContent className="p-4 pt-6 bg-background rounded-b-lg">
             <div className="flex justify-between items-center mb-6">
-              <h2 className="text-2xl font-bold">User Management</h2>
+              <h2 className="text-2xl font-bold">{t("userManagement")}</h2>
               {isSuperAdmin && <button onClick={() => setIsAddUserDialogOpen(true)} className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-md flex items-center">
-                  <span className="mr-1">+</span> Add User
+                  <span className="mr-1">+</span> {t("addUser")}
                 </button>}
             </div>
 
             {!isSuperAdmin && <Alert className="mb-6 border-blue-200 bg-blue-50 dark:bg-blue-950 dark:border-blue-800">
                 <ShieldAlert className="h-5 w-5 text-blue-600 dark:text-blue-400" />
                 <AlertDescription className="text-blue-700 dark:text-blue-300">
-                  <span className="font-medium">Permission Notice:</span> As an admin user, you have access to view and modify existing user details. However, only Super Admins have permission to create new user accounts. Contact your Super Admin if you need to add a new user.
+                  <span className="font-medium">{t("permissionNotice")}</span> As an admin user, you have access to view and modify existing user details. However, only Super Admins have permission to create new user accounts. Contact your Super Admin if you need to add a new user.
                 </AlertDescription>
               </Alert>}
 

application/src/components/ssl-domain/AddSSLCertificateForm.tsx

@@ -1,24 +1,28 @@
+
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
 import { toast } from "sonner";
-import { Bell } from "lucide-react";
+import { Bell, X } from "lucide-react";
 
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { DialogFooter } from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
 import { AddSSLCertificateDto } from "@/types/ssl.types";
 import { alertConfigService, AlertConfiguration } from "@/services/alertConfigService";
+import { sslNotificationTemplateService, SslNotificationTemplate } from "@/services/sslNotificationTemplateService";
 import { useLanguage } from "@/contexts/LanguageContext";
 
 const formSchema = z.object({
   domain: z.string().min(1, "Domain is required"),
   warning_threshold: z.coerce.number().int().min(1).max(365),
   expiry_threshold: z.coerce.number().int().min(1).max(30),
-  notification_channel: z.string().optional(), // Make it optional to allow empty string for "None"
+  notification_channels: z.array(z.string()).optional(),
+  alert_template: z.string().optional(),
   check_interval: z.coerce.number().int().min(1).max(30).optional()
 });
 
@@ -35,6 +39,7 @@ export const AddSSLCertificateForm = ({
 }: AddSSLCertificateFormProps) => {
   const { t } = useLanguage();
   const [alertConfigs, setAlertConfigs] = useState<AlertConfiguration[]>([]);
+  const [sslTemplates, setSslTemplates] = useState<SslNotificationTemplate[]>([]);
   const [isLoading, setIsLoading] = useState(false);
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -43,58 +48,78 @@ export const AddSSLCertificateForm = ({
       domain: "",
       warning_threshold: 30,
       expiry_threshold: 7,
-      notification_channel: "none",
+      notification_channels: [],
+      alert_template: "none",
       check_interval: 1
     }
   });
 
-  // Fetch notification channels when form loads
+  // Fetch notification channels and SSL templates when form loads
   useEffect(() => {
-    const fetchNotificationChannels = async () => {
+    const fetchData = async () => {
       setIsLoading(true);
       try {
+        // Fetch notification channels
         const configs = await alertConfigService.getAlertConfigurations();
-       // console.log("Fetched notification channels:", configs);
-        // Only include enabled channels
         const enabledConfigs = configs.filter(config => {
-          // Handle the possibility of enabled being a string
           if (typeof config.enabled === 'string') {
             return config.enabled === "true";
           }
-          // Otherwise treat as boolean
           return config.enabled === true;
         });
         setAlertConfigs(enabledConfigs);
+
+        // Fetch SSL notification templates
+        const templates = await sslNotificationTemplateService.getTemplates();
+        setSslTemplates(templates);
       } catch (error) {
-      //  console.error("Error fetching notification channels:", error);
         toast.error(t('failedToLoadCertificates'));
       } finally {
         setIsLoading(false);
       }
     };
     
-    fetchNotificationChannels();
+    fetchData();
-  }, [form, t]);
+  }, [t]);
 
   const handleSubmit = async (values: z.infer<typeof formSchema>) => {
     try {
-      // Convert the form values to the required DTO format with required properties
+      // Convert the form values to the required DTO format
       const certData: AddSSLCertificateDto = {
         domain: values.domain,
         warning_threshold: values.warning_threshold,
         expiry_threshold: values.expiry_threshold,
-        notification_channel: values.notification_channel === "none" ? "" : (values.notification_channel || ""), // Convert "none" to empty string
+        notification_channel: values.notification_channels && values.notification_channels.length > 0 
+          ? values.notification_channels.join(',') 
+          : '',
+        notification_id: values.notification_channels && values.notification_channels.length > 0 
+          ? values.notification_channels.join(',') 
+          : '',
+        template_id: values.alert_template && values.alert_template !== 'none' ? values.alert_template : '',
         check_interval: values.check_interval
       };
       
       await onSubmit(certData);
       form.reset();
     } catch (error) {
-     // console.error("Error adding SSL certificate:", error);
       toast.error(t('failedToAddCertificate'));
     }
   };
 
+  const handleAddNotificationChannel = (channelId: string) => {
+    const currentChannels = form.getValues("notification_channels") || [];
+    if (!currentChannels.includes(channelId)) {
+      form.setValue("notification_channels", [...currentChannels, channelId]);
+    }
+  };
+
+  const handleRemoveNotificationChannel = (channelId: string) => {
+    const currentChannels = form.getValues("notification_channels") || [];
+    form.setValue("notification_channels", currentChannels.filter(id => id !== channelId));
+  };
+
+  const selectedChannels = form.watch("notification_channels") || [];
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
@@ -167,31 +192,60 @@ export const AddSSLCertificateForm = ({
         
         <FormField
           control={form.control}
-          name="notification_channel"
+          name="notification_channels"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t('notificationChannel')}</FormLabel>
+              <FormLabel>{t('notificationChannel')} (Multi-select)</FormLabel>
-              <Select onValueChange={field.onChange} value={field.value || "none"}>
+              <div className="space-y-3">
+                <Select 
+                  onValueChange={handleAddNotificationChannel}
+                  value=""
+                >
                   <FormControl>
                     <SelectTrigger>
-                    <SelectValue placeholder={t('chooseChannel')} />
+                      <SelectValue placeholder="Select channels to add..." />
                     </SelectTrigger>
                   </FormControl>
                   <SelectContent>
-                  <SelectItem value="none">{t('none')}</SelectItem>
                     {alertConfigs.length > 0 ? (
-                    alertConfigs.map((config) => (
+                      alertConfigs
-                      <SelectItem key={config.id} value={config.id || ""}>
+                        .filter(config => config.id && !selectedChannels.includes(config.id))
+                        .map((config) => (
+                          <SelectItem key={config.id} value={config.id || "unknown"}>
                             {config.notify_name} ({config.notification_type})
                           </SelectItem>
                         ))
                     ) : isLoading ? (
-                    <SelectItem value="loading" disabled>{t('loadingChannels')}</SelectItem>
+                      <SelectItem value="loading-placeholder" disabled>{t('loadingChannels')}</SelectItem>
                     ) : (
-                    <SelectItem value="none-disabled" disabled>{t('noChannelsFound')}</SelectItem>
+                      <SelectItem value="no-channels-placeholder" disabled>{t('noChannelsFound')}</SelectItem>
                     )}
                   </SelectContent>
                 </Select>
+
+                {/* Display selected channels */}
+                {selectedChannels.length > 0 && (
+                  <div className="flex flex-wrap gap-2">
+                    {selectedChannels.map((channelId) => {
+                      const channel = alertConfigs.find(config => config.id === channelId);
+                      return (
+                        <Badge key={channelId} variant="secondary" className="flex items-center gap-1">
+                          {channel ? `${channel.notify_name} (${channel.notification_type})` : channelId}
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-auto p-0 ml-1"
+                            onClick={() => handleRemoveNotificationChannel(channelId)}
+                          >
+                            <X className="h-3 w-3" />
+                          </Button>
+                        </Badge>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
               <FormDescription className="flex items-center gap-1">
                 <Bell className="h-4 w-4" /> 
                 {t('whereToSend')}
@@ -201,6 +255,41 @@ export const AddSSLCertificateForm = ({
           )}
         />
 
+        <FormField
+          control={form.control}
+          name="alert_template"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Alert Template</FormLabel>
+              <Select onValueChange={field.onChange} value={field.value || "none"}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Choose an alert template (optional)" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="none">None</SelectItem>
+                  {sslTemplates.length > 0 ? (
+                    sslTemplates.map((template) => (
+                      <SelectItem key={template.id} value={template.id}>
+                        {template.name}
+                      </SelectItem>
+                    ))
+                  ) : isLoading ? (
+                    <SelectItem value="loading-templates" disabled>Loading templates...</SelectItem>
+                  ) : (
+                    <SelectItem value="no-templates-found" disabled>No templates found</SelectItem>
+                  )}
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                Template for SSL certificate alert messages
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        
         <DialogFooter>
           <Button type="button" variant="outline" onClick={onCancel}>{t('cancel')}</Button>
           <Button type="submit" disabled={isPending || isLoading}>

application/src/components/ssl-domain/EditSSLCertificateForm.tsx

@@ -7,17 +7,20 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Badge } from "@/components/ui/badge";
 import { SSLCertificate } from "@/types/ssl.types";
-import { Loader2, Bell } from "lucide-react";
+import { Loader2, Bell, X } from "lucide-react";
 import { toast } from "sonner";
 import { alertConfigService, AlertConfiguration } from "@/services/alertConfigService";
+import { sslNotificationTemplateService, SslNotificationTemplate } from "@/services/sslNotificationTemplateService";
 import { useLanguage } from "@/contexts/LanguageContext";
 
 const formSchema = z.object({
   domain: z.string().min(1, "Domain is required"),
   warning_threshold: z.coerce.number().min(1, "Warning threshold must be at least 1 day"),
   expiry_threshold: z.coerce.number().min(1, "Expiry threshold must be at least 1 day"),
-  notification_channel: z.string().min(1, "Notification channel is required"),
+  notification_channels: z.array(z.string()).default([]),
+  alert_template: z.string().optional(),
   check_interval: z.coerce.number().int().min(1).max(30).optional(),
 });
 
@@ -33,66 +36,138 @@ interface EditSSLCertificateFormProps {
 export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPending }: EditSSLCertificateFormProps) => {
   const { t } = useLanguage();
   const [alertConfigs, setAlertConfigs] = useState<AlertConfiguration[]>([]);
+  const [sslTemplates, setSslTemplates] = useState<SslNotificationTemplate[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   
+  // Parse existing notification channels from certificate data
+  const parseNotificationChannels = (cert: SSLCertificate): string[] => {
+    const channels: string[] = [];
+    
+    // Check notification_id field first (multi-channel support)
+    if (cert.notification_id && cert.notification_id.trim()) {
+      channels.push(...cert.notification_id.split(',').map(id => id.trim()).filter(Boolean));
+    }
+    // Fallback to notification_channel field
+    else if (cert.notification_channel && cert.notification_channel.trim()) {
+      channels.push(...cert.notification_channel.split(',').map(id => id.trim()).filter(Boolean));
+    }
+    return channels;
+  };
+
+  // Get the alert template from certificate data
+  const getAlertTemplate = (cert: SSLCertificate): string => {
+    let templateId = "";
+    
+    // Check template_id field first (new field for PocketBase)
+    if (cert.template_id && cert.template_id.trim()) {
+      templateId = cert.template_id;
+    }
+    // Fallback to alert_template field
+    else if (cert.alert_template && cert.alert_template.trim()) {
+      templateId = cert.alert_template;
+    }
+
+    return templateId || "none";
+  };
+  
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       domain: certificate.domain,
       warning_threshold: certificate.warning_threshold,
       expiry_threshold: certificate.expiry_threshold,
-      notification_channel: certificate.notification_channel,
+      notification_channels: parseNotificationChannels(certificate),
+      alert_template: getAlertTemplate(certificate),
       check_interval: certificate.check_interval || 1,
     },
   });
 
-  // Fetch notification channels when form loads
+  const notificationChannels = form.watch("notification_channels") || [];
+
+  // Fetch notification channels and SSL templates when form loads
   useEffect(() => {
-    const fetchNotificationChannels = async () => {
+    const fetchData = async () => {
       setIsLoading(true);
       try {
+        // Fetch notification channels
         const configs = await alertConfigService.getAlertConfigurations();
-      //  console.log("Fetched notification channels:", configs);
-        // Only include enabled channels
         const enabledConfigs = configs.filter(config => {
-          // Handle the possibility of enabled being a string
           if (typeof config.enabled === 'string') {
             return config.enabled === "true";
           }
-          // Otherwise treat as boolean
           return config.enabled === true;
         });
         setAlertConfigs(enabledConfigs);
+
+        // Fetch SSL notification templates
+        const templates = await sslNotificationTemplateService.getTemplates();
+        setSslTemplates(templates);
       } catch (error) {
-      //  console.error("Error fetching notification channels:", error);
         toast.error(t('failedToLoadCertificates'));
       } finally {
         setIsLoading(false);
       }
     };
     
-    fetchNotificationChannels();
+    fetchData();
   }, [t]);
 
+  // Update form values when certificate data changes
+  useEffect(() => {
+    if (certificate) {
+      const channels = parseNotificationChannels(certificate);
+      const template = getAlertTemplate(certificate);
+      
+      form.reset({
+        domain: certificate.domain,
+        warning_threshold: certificate.warning_threshold,
+        expiry_threshold: certificate.expiry_threshold,
+        notification_channels: channels,
+        alert_template: template,
+        check_interval: certificate.check_interval || 1,
+      });
+      
+    }
+  }, [certificate, form]);
+
+  const handleChannelAdd = (channelId: string) => {
+    const currentChannels = form.getValues("notification_channels") || [];
+    if (!currentChannels.includes(channelId)) {
+      const newChannels = [...currentChannels, channelId];
+      form.setValue("notification_channels", newChannels);
+    }
+  };
+
+  const handleChannelRemove = (channelId: string) => {
+    const currentChannels = form.getValues("notification_channels") || [];
+    const newChannels = currentChannels.filter(id => id !== channelId);
+    form.setValue("notification_channels", newChannels);
+  };
+
+  const getSelectedChannelNames = () => {
+    return (notificationChannels || []).map(channelId => {
+      const config = alertConfigs.find(c => c.id === channelId);
+      return config ? `${config.notify_name} (${config.notification_type})` : channelId;
+    });
+  };
+
   const handleSubmit = (data: FormValues) => {  
     // Merge the updated values with the original certificate
     const updatedCertificate: SSLCertificate = {
       ...certificate,
       ...data,
-      // Ensure values are correctly typed as numbers
+      
+      notification_channel: data.notification_channels.length > 0 ? data.notification_channels.join(',') : '',
+      notification_id: data.notification_channels.length > 0 ? data.notification_channels.join(',') : '',
+      template_id: data.alert_template && data.alert_template !== 'none' ? data.alert_template : '',
       warning_threshold: Number(data.warning_threshold),
       expiry_threshold: Number(data.expiry_threshold),
       check_interval: data.check_interval ? Number(data.check_interval) : undefined
     };
     
-    console.log("Submitting updated certificate:", updatedCertificate);
     onSubmit(updatedCertificate);
   };
 
-  // For debugging
-  console.log("Certificate data:", certificate);
-  console.log("Form default values:", form.getValues());
-
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
@@ -106,7 +181,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
                 <Input 
                   {...field}
                   placeholder="example.com" 
-                  disabled={true} // Domain shouldn't be editable
+                  disabled={true}
                 />
               </FormControl>
               <FormDescription>
@@ -188,41 +263,52 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
         
         <FormField
           control={form.control}
-          name="notification_channel"
+          name="notification_channels"
           render={({ field }) => (
             <FormItem>
               <FormLabel>{t('notificationChannel')}</FormLabel>
-              <Select 
+              <FormDescription>
-                onValueChange={field.onChange} 
+                Select multiple notification channels for this SSL certificate
-                defaultValue={field.value}
+              </FormDescription>
-                value={field.value}
+              
-                disabled={isLoading}
+              {/* Display selected channels as badges */}
-              >
+              {notificationChannels && notificationChannels.length > 0 && (
+                <div className="flex flex-wrap gap-2 mb-2">
+                  {getSelectedChannelNames().map((channelName, index) => (
+                    <Badge key={notificationChannels[index]} variant="secondary" className="flex items-center gap-1">
+                      {channelName}
+                      <X 
+                        className="h-3 w-3 cursor-pointer" 
+                        onClick={() => handleChannelRemove(notificationChannels[index])}
+                      />
+                    </Badge>
+                  ))}
+                </div>
+              )}
+              
               <FormControl>
+                <Select 
+                  onValueChange={handleChannelAdd}
+                  disabled={isLoading}
+                  value=""
+                >
                   <SelectTrigger>
                     <SelectValue placeholder={t('chooseChannel')} />
                   </SelectTrigger>
-                </FormControl>
                   <SelectContent>
-                  {alertConfigs.length > 0 ? (
+                    {alertConfigs
-                    alertConfigs.map((config) => (
+                      .filter(config => config.id && !notificationChannels?.includes(config.id))
-                      <SelectItem key={config.id} value={config.id || ""}>
+                      .map((config) => (
+                        <SelectItem key={config.id} value={config.id || "unknown"}>
                           {config.notify_name} ({config.notification_type})
                         </SelectItem>
-                    ))
+                      ))}
-                  ) : isLoading ? (
+                    {alertConfigs.filter(config => config.id && !notificationChannels?.includes(config.id)).length === 0 && (
-                    <SelectItem value="loading" disabled>{t('loadingChannels')}</SelectItem>
+                      <SelectItem value="no-available-channels" disabled>No available channels</SelectItem>
-                  ) : (
-                    <>
-                      <SelectItem value="email">Email</SelectItem>
-                      <SelectItem value="telegram">Telegram</SelectItem>
-                      <SelectItem value="slack">Slack</SelectItem>
-                      <SelectItem value="webhook">Webhook</SelectItem>
-                      <SelectItem value="none">None</SelectItem>
-                    </>
                     )}
                   </SelectContent>
                 </Select>
+              </FormControl>
               <FormDescription className="flex items-center gap-1">
                 <Bell className="h-4 w-4" /> 
                 {t('whereToSend')}
@@ -232,6 +318,45 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
           )}
         />
 
+        <FormField
+          control={form.control}
+          name="alert_template"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Alert Template</FormLabel>
+              <FormControl>
+                <Select 
+                  onValueChange={field.onChange} 
+                  value={field.value || "none"}
+                  disabled={isLoading}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder={isLoading ? "Loading templates..." : "Select an alert template"} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">None</SelectItem>
+                    {sslTemplates?.map((template) => (
+                      <SelectItem key={template.id} value={template.id}>
+                        {template.name}
+                      </SelectItem>
+                    ))}
+                    {sslTemplates?.length === 0 && !isLoading && (
+                      <SelectItem value="no-templates-available" disabled>No templates found</SelectItem>
+                    )}
+                    {isLoading && (
+                      <SelectItem value="loading-templates-placeholder" disabled>Loading templates...</SelectItem>
+                    )}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+              <FormDescription>
+                Choose a template for SSL certificate alert messages
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         <div className="flex justify-end gap-3 pt-4">
           <Button 
             type="button" 

application/src/components/ssl-domain/SSLCertificateActions.tsx

@@ -45,20 +45,20 @@ export const SSLCertificateActions = ({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => onView(certificate)}>
+        <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onView(certificate); }}>
           <Eye className="mr-2 h-4 w-4" />
           {t('view')}
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={handleCheck}>
+        <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleCheck(); }}>
           <RefreshCw className="mr-2 h-4 w-4" />
           Check
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => onEdit(certificate)}>
+        <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onEdit(certificate); }}>
           <Edit className="mr-2 h-4 w-4" />
           {t('edit')}
         </DropdownMenuItem>
         <DropdownMenuItem 
-          onClick={() => onDelete(certificate)}
+          onClick={(e) => { e.stopPropagation(); onDelete(certificate); }}
           className="text-destructive"
         >
           <Trash2 className="mr-2 h-4 w-4" />

application/src/components/ssl-domain/SSLCertificateDetailDialog.tsx

@@ -29,6 +29,21 @@ export const SSLCertificateDetailDialog = ({
 
   if (!certificate) return null;
 
+  // Parse Subject Alternative Names for better display
+  const formatSANs = (sans: string): string[] => {
+    if (!sans) return [];
+    
+    // Split by common delimiters and clean up
+    const sansList = sans
+      .split(/[,;\n]/)
+      .map(san => san.trim())
+      .filter(san => san.length > 0);
+    
+    return sansList;
+  };
+
+  const sansList = certificate.cert_sans ? formatSANs(certificate.cert_sans) : [];
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
@@ -135,7 +150,17 @@ export const SSLCertificateDetailDialog = ({
                 <div className="mt-4">
                   <p className="text-sm font-medium text-muted-foreground mb-2">{t('subjectAlternativeNames')}</p>
                   <div className="bg-muted px-3 py-2 rounded">
-                    <p className="text-sm whitespace-pre-wrap">{certificate.cert_sans}</p>
+                    {sansList.length > 0 ? (
+                      <div className="space-y-1">
+                        {sansList.map((san, index) => (
+                          <div key={index} className="text-sm font-mono break-all">
+                            {san}
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <p className="text-sm">N/A</p>
+                    )}
                   </div>
                 </div>
               )}

application/src/components/ssl-domain/SSLCertificatesTable.tsx

@@ -33,11 +33,13 @@ import { AddSSLCertificateForm } from "./AddSSLCertificateForm";
 import { EditSSLCertificateForm } from "./EditSSLCertificateForm";
 import { SSLCertificateActions } from "./SSLCertificateActions";
 import { SSLCertificateDetailDialog } from "./SSLCertificateDetailDialog";
+import { SSLPagination } from "./SSLPagination";
 import { fetchSSLCertificates, addSSLCertificate, deleteSSLCertificate } from "@/services/sslCertificateService";
 import { pb } from "@/lib/pocketbase";
 import { SSLCertificate } from "@/types/ssl.types";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { useTheme } from "@/contexts/ThemeContext";
+import { useSSLPagination } from "@/hooks/useSSLPagination";
 import { toast } from "sonner";
 
 export const SSLCertificatesTable = () => {
@@ -56,6 +58,16 @@ export const SSLCertificatesTable = () => {
     queryFn: fetchSSLCertificates,
   });
 
+  const {
+    paginatedCertificates,
+    currentPage,
+    totalPages,
+    pageSize,
+    totalItems,
+    handlePageChange,
+    handlePageSizeChange,
+  } = useSSLPagination({ certificates });
+
   if (isLoading) return <div>Loading...</div>;
   if (isError) return <div>Error loading certificates</div>;
 
@@ -67,7 +79,6 @@ export const SSLCertificatesTable = () => {
       setShowAddDialog(false);
       toast.success(t('certificateAdded'));
     } catch (error) {
-    //  console.error("Error adding certificate:", error);
       toast.error(t('failedToAddCertificate'));
     } finally {
       setIsSubmitting(false);
@@ -81,6 +92,8 @@ export const SSLCertificatesTable = () => {
         warning_threshold: updatedCertificate.warning_threshold,
         expiry_threshold: updatedCertificate.expiry_threshold,
         notification_channel: updatedCertificate.notification_channel,
+        notification_id: updatedCertificate.notification_id,
+        template_id: updatedCertificate.template_id,
         check_interval: updatedCertificate.check_interval,
       });
       
@@ -89,7 +102,6 @@ export const SSLCertificatesTable = () => {
       setSelectedCertificate(null);
       toast.success(t('certificateUpdated'));
     } catch (error) {
-    //  console.error("Error updating certificate:", error);
       toast.error(t('failedToUpdateCertificate'));
     } finally {
       setIsSubmitting(false);
@@ -107,7 +119,6 @@ export const SSLCertificatesTable = () => {
       setSelectedCertificate(null);
       toast.success(t('certificateDeleted'));
     } catch (error) {
-     // console.error("Error deleting certificate:", error);
       toast.error(t('failedToDeleteCertificate'));
     } finally {
       setIsSubmitting(false);
@@ -136,6 +147,7 @@ export const SSLCertificatesTable = () => {
           {t('noCertificatesFound')}
         </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'}`}>
@@ -150,8 +162,12 @@ export const SSLCertificatesTable = () => {
                 </TableRow>
               </TableHeader>
               <TableBody>
-              {certificates.map((certificate) => (
+                {paginatedCertificates.map((certificate) => (
-                <TableRow key={certificate.id} className="hover:bg-muted/50">
+                  <TableRow 
+                    key={certificate.id} 
+                    className="hover:bg-muted/50 cursor-pointer"
+                    onClick={() => openViewDialog(certificate)}
+                  >
                     <TableCell className="font-medium">
                       {certificate.domain}
                     </TableCell>
@@ -170,7 +186,7 @@ export const SSLCertificatesTable = () => {
                     <TableCell>
                       {certificate.check_interval || 1} {t('days')}
                     </TableCell>
-                  <TableCell className="text-right">
+                    <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
                       <SSLCertificateActions
                         certificate={certificate}
                         onView={openViewDialog}
@@ -183,6 +199,16 @@ export const SSLCertificatesTable = () => {
               </TableBody>
             </Table>
           </div>
+
+          <SSLPagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            pageSize={pageSize}
+            totalItems={totalItems}
+            onPageChange={handlePageChange}
+            onPageSizeChange={handlePageSizeChange}
+          />
+        </>
       )}
 
       {/* View Certificate Dialog */}

application/src/components/ssl-domain/SSLDomainContent.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
@@ -30,12 +29,9 @@ export const SSLDomainContent = () => {
     queryKey: ['ssl-certificates'],
     queryFn: async () => {
       try {
-        console.log("Fetching SSL certificates from SSLDomainContent...");
         const result = await fetchSSLCertificates();
-        console.log("Received SSL certificates:", result);
         return result;
       } catch (error) {
-        console.error("Error fetching certificates:", error);
         toast.error(t('failedToLoadCertificates'));
         throw error;
       }
@@ -53,30 +49,28 @@ export const SSLDomainContent = () => {
       toast.success(t('sslCertificateAdded'));
     },
     onError: (error) => {
-      console.error("Error adding SSL certificate:", error);
       toast.error(error instanceof Error ? error.message : t('failedToAddCertificate'));
     }
   });
 
-  // Edit certificate mutation - Updated to ensure thresholds are properly updated
+  // Edit certificate mutation - Updated to include notification_id and template_id
   const editMutation = useMutation({
     mutationFn: async (certificate: SSLCertificate) => {
-      console.log("Updating certificate with data:", certificate);
       
-      // Create the update data object
+      // Create the update data object with new fields
       const updateData = {
         warning_threshold: Number(certificate.warning_threshold),
         expiry_threshold: Number(certificate.expiry_threshold),
         notification_channel: certificate.notification_channel,
+        notification_id: certificate.notification_id || '', // Multi notification channels
+        template_id: certificate.template_id || '', // Alert template ID
+        check_interval: certificate.check_interval,
       };
       
-      console.log("Update data to be sent:", updateData);
       
       // Update certificate in the database using PocketBase directly
       const updated = await pb.collection('ssl_certificates').update(certificate.id, updateData);
       
-      console.log("PocketBase update response:", updated);
-      
       // After updating the settings, refresh the certificate to ensure it's up to date
       // This will also check if notification needs to be sent based on updated thresholds
       const refreshedCert = await checkAndUpdateCertificate(certificate.id);
@@ -90,7 +84,6 @@ export const SSLDomainContent = () => {
       toast.success(t('sslCertificateUpdated'));
     },
     onError: (error) => {
-      console.error("Error updating SSL certificate:", error);
       toast.error(error instanceof Error ? error.message : t('failedToUpdateCertificate'));
     }
   });
@@ -103,7 +96,6 @@ export const SSLDomainContent = () => {
       toast.success(t('sslCertificateDeleted'));
     },
     onError: (error) => {
-      console.error("Error deleting SSL certificate:", error);
       toast.error(error instanceof Error ? error.message : t('failedToDeleteCertificate'));
     }
   });
@@ -117,7 +109,6 @@ export const SSLDomainContent = () => {
       // Removed individual success toast notification
     },
     onError: (error) => {
-      console.error("Error refreshing SSL certificate:", error);
       setRefreshingId(null);
       
       // Still refresh the data to show any partial information that was saved
@@ -142,7 +133,6 @@ export const SSLDomainContent = () => {
       }
     },
     onError: (error) => {
-      console.error("Error refreshing all certificates:", error);
       toast.error(t('failedToCheckCertificate'));
       setIsRefreshingAll(false);
       
@@ -167,7 +157,6 @@ export const SSLDomainContent = () => {
   };
 
   const handleUpdateCertificate = (certificate: SSLCertificate) => {
-    console.log("Handling certificate update with data:", certificate);
     editMutation.mutate(certificate);
   };
 

application/src/components/ssl-domain/SSLPagination.tsx

@@ -0,0 +1,131 @@
+
+import { 
+  Pagination, 
+  PaginationContent, 
+  PaginationItem, 
+  PaginationLink, 
+  PaginationNext, 
+  PaginationPrevious 
+} from "@/components/ui/pagination";
+import { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from "@/components/ui/select";
+import { SSLPageSize } from "@/hooks/useSSLPagination";
+import { useLanguage } from "@/contexts/LanguageContext";
+
+interface SSLPaginationProps {
+  currentPage: number;
+  totalPages: number;
+  pageSize: SSLPageSize;
+  totalItems: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: SSLPageSize) => void;
+}
+
+export function SSLPagination({
+  currentPage,
+  totalPages,
+  pageSize,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+}: SSLPaginationProps) {
+  const { t } = useLanguage();
+
+  // Generate page numbers to display
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 5;
+    const halfVisible = Math.floor(maxVisiblePages / 2);
+    
+    let startPage = Math.max(1, currentPage - halfVisible);
+    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+    
+    // Adjust start page if we don't have enough pages at the end
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    }
+    
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    
+    return pages;
+  };
+
+  const startItem = Math.min((currentPage - 1) * pageSize + 1, totalItems);
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+
+  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">
+          {t("rowsPerPage") || "Rows per page"}:
+        </span>
+        <Select
+          value={pageSize.toString()}
+          onValueChange={(value) => onPageSizeChange(parseInt(value) as SSLPageSize)}
+        >
+          <SelectTrigger className="h-8 w-[70px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="10">10</SelectItem>
+            <SelectItem value="30">30</SelectItem>
+            <SelectItem value="50">50</SelectItem>
+          </SelectContent>
+        </Select>
+        <span className="text-sm text-muted-foreground">
+          {totalItems > 0 
+            ? `${startItem}-${endItem} of ${totalItems} ${t("certificates") || "certificates"}`
+            : `0 ${t("certificates") || "certificates"}`
+          }
+        </span>
+      </div>
+      
+      {totalPages > 1 && (
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+                className={
+                  currentPage === 1 
+                    ? "pointer-events-none opacity-50" 
+                    : "cursor-pointer"
+                }
+              />
+            </PaginationItem>
+            
+            {getPageNumbers().map((page) => (
+              <PaginationItem key={page}>
+                <PaginationLink
+                  isActive={page === currentPage}
+                  onClick={() => onPageChange(page)}
+                  className="cursor-pointer"
+                >
+                  {page}
+                </PaginationLink>
+              </PaginationItem>
+            ))}
+            
+            <PaginationItem>
+              <PaginationNext
+                onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+                className={
+                  currentPage === totalPages 
+                    ? "pointer-events-none opacity-50" 
+                    : "cursor-pointer"
+                }
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      )}
+    </div>
+  );
+}

application/src/contexts/LanguageContext.tsx

@@ -1,16 +1,22 @@
-import React, { createContext, useContext, useState, ReactNode } from "react";
+import React, { createContext, useContext, useState, ReactNode, useCallback } from "react";
 import { translations, Language, TranslationModule, TranslationKey } from "@/translations";
 
+type TranslationVars = Record<string, string | number>;
+
 type LanguageContextType = {
   language: Language;
   setLanguage: (language: Language) => void;
-  t: <M extends TranslationModule>(key: string, module?: M) => string;
+  t: {
+    (key: string): string;
+    (key: string, vars: TranslationVars): string;
+    <M extends TranslationModule>(key: string, module: M): string;
+    <M extends TranslationModule>(key: string, module: M, vars: TranslationVars): string;
+  };
 };
 
-// ❗ Create the context with `undefined` to enforce provider usage
 const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
 
-// ✅ Stable custom hook
+// eslint-disable-next-line react-refresh/only-export-components
 export const useLanguage = () => {
   const context = useContext(LanguageContext);
   if (!context) {
@@ -21,24 +27,79 @@ export const useLanguage = () => {
 
 export const LanguageProvider = ({ children }: { children: ReactNode }) => {
   const [language, setLanguage] = useState<Language>("en");
+  const fallbackLanguage: Language = "en";
 
-  const t = <M extends TranslationModule>(key: string, module?: M): string => {
+  const interpolate = (template: string, vars: TranslationVars): string => {
-    if (module) {
+    return template.replace(/{(\w+)}/g, (match, key) => {
-      const translatedValue = translations[language][module][key as TranslationKey<M>];
+      return vars[key] !== undefined ? String(vars[key]) : match;
-      return typeof translatedValue === "string" ? translatedValue : key;
+    });
-    }
-
-    for (const mod in translations[language]) {
-      const moduleKey = mod as TranslationModule;
-      const translatedValue = translations[language][moduleKey][key as any];
-      if (translatedValue && typeof translatedValue === "string") {
-        return translatedValue;
-      }
-    }
-
-    return key;
   };
 
+  const t = useCallback(((
+    key: string,
+    moduleOrVars?: TranslationModule | TranslationVars,
+    vars?: TranslationVars
+  ): string => {
+    let module: TranslationModule | undefined;
+    let variables: TranslationVars | undefined;
+
+    if (typeof moduleOrVars === "string") {
+      module = moduleOrVars;
+      variables = vars;
+    } else if (typeof moduleOrVars === "object") {
+      variables = moduleOrVars;
+    }
+
+    const langPack = translations[language];
+    const fallbackPack = translations[fallbackLanguage];
+    let translatedText = "";
+
+    if (module) {
+      const moduleKey = key as TranslationKey<typeof module>;
+      const valCur = langPack?.[module]?.[moduleKey];
+      if (typeof valCur === "string") {
+        translatedText = valCur;
+      } else {
+        const valEn = fallbackPack?.[module]?.[moduleKey];
+        translatedText = typeof valEn === "string" ? valEn : key;
+      }
+    } else {
+      let found = false;
+
+      for (const mod of Object.keys(langPack) as TranslationModule[]) {
+        const moduleTranslations = langPack[mod];
+        if (moduleTranslations && key in moduleTranslations) {
+          const val = moduleTranslations[key as keyof typeof moduleTranslations];
+          if (typeof val === "string") {
+            translatedText = val;
+            found = true;
+            break;
+          }
+        }
+      }
+
+      if (!found) {
+        for (const mod of Object.keys(fallbackPack) as TranslationModule[]) {
+          const moduleTranslations = fallbackPack[mod];
+          if (moduleTranslations && key in moduleTranslations) {
+            const val = moduleTranslations[key as keyof typeof moduleTranslations];
+            if (typeof val === "string") {
+              translatedText = val;
+              found = true;
+              break;
+            }
+          }
+        }
+      }
+
+      if (!found) {
+        translatedText = key;
+      }
+    }
+
+    return variables ? interpolate(translatedText, variables) : translatedText;
+  }) as LanguageContextType['t'], [language]);
+
   return (
     <LanguageContext.Provider value={{ language, setLanguage, t }}>
       {children}

application/src/hooks/useSSLPagination.ts

@@ -0,0 +1,52 @@
+
+import { useState, useMemo } from 'react';
+import { SSLCertificate } from '@/types/ssl.types';
+
+export type SSLPageSize = 10 | 30 | 50;
+
+interface UseSSLPaginationProps {
+  certificates: SSLCertificate[];
+  initialPageSize?: SSLPageSize;
+}
+
+export const useSSLPagination = ({ 
+  certificates, 
+  initialPageSize = 10 
+}: UseSSLPaginationProps) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState<SSLPageSize>(initialPageSize);
+
+  const { paginatedCertificates, totalPages } = useMemo(() => {
+    const totalItems = certificates.length;
+    const pages = Math.ceil(totalItems / pageSize);
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    
+    return {
+      paginatedCertificates: certificates.slice(startIndex, endIndex),
+      totalPages: Math.max(1, pages)
+    };
+  }, [certificates, currentPage, pageSize]);
+
+  // Reset to first page when page size changes or certificates change
+  const handlePageSizeChange = (newPageSize: SSLPageSize) => {
+    setPageSize(newPageSize);
+    setCurrentPage(1);
+  };
+
+  // Reset to first page if current page exceeds total pages
+  const handlePageChange = (page: number) => {
+    const validPage = Math.min(Math.max(1, page), totalPages);
+    setCurrentPage(validPage);
+  };
+
+  return {
+    paginatedCertificates,
+    currentPage,
+    totalPages,
+    pageSize,
+    totalItems: certificates.length,
+    handlePageChange,
+    handlePageSizeChange,
+  };
+};

application/src/pages/Login.tsx

@@ -1,18 +1,14 @@
 
-import { useState, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { authService } from '@/services/authService';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { toast } from '@/components/ui/use-toast';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Eye, EyeOff, Mail, LogIn, Settings, AlertCircle } from "lucide-react";
+import { Eye, EyeOff, Mail, LogIn, AlertCircle, Github } from "lucide-react";
 import { useLanguage } from '@/contexts/LanguageContext';
 import { useTheme } from '@/contexts/ThemeContext';
-import { API_ENDPOINTS, getCurrentEndpoint, setApiEndpoint } from '@/lib/pocketbase';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Label } from '@/components/ui/label';
 import { ForgotPasswordDialog } from '@/components/auth/ForgotPasswordDialog';
 
 const Login = () => {
@@ -20,30 +16,13 @@ const Login = () => {
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
-  const [currentEndpoint, setCurrentEndpoint] = useState(getCurrentEndpoint());
   const [showForgotPassword, setShowForgotPassword] = useState(false);
   const [loginError, setLoginError] = useState('');
   const navigate = useNavigate();
   const { t } = useLanguage();
   const { theme } = useTheme();
 
-  // Add responsiveness check
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
-  const [isMobile, setIsMobile] = useState(false);
-  
-  useEffect(() => {
-    const checkScreenSize = () => {
-      setIsMobile(window.innerWidth < 640);
-    };
-    
-    checkScreenSize();
-    window.addEventListener('resize', checkScreenSize);
-    
-    return () => {
-      window.removeEventListener('resize', checkScreenSize);
-    };
-  }, []);
-
-  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
     setLoginError(''); // Clear previous errors
@@ -69,7 +48,7 @@ const Login = () => {
           setLoginError(error.message);
         }
       } else {
-        setLoginError(`${t("authenticationFailed")}. Server: ${currentEndpoint}`);
+        setLoginError(t("authenticationFailed"));
       }
       
       toast({
@@ -82,60 +61,35 @@ const Login = () => {
              error.message.includes('invalid email or password')) 
             ? t("invalidCredentials")
             : error.message
-          : `${t("authenticationFailed")}. Server: ${currentEndpoint}`,
+          : t("authenticationFailed"),
       });
     } finally {
       setLoading(false);
     }
-  };
+  }, [email, password, navigate, t]);
 
-  const handleEndpointChange = (value: string) => {
+  const togglePasswordVisibility = useCallback(() => {
-    setCurrentEndpoint(value);
+    setShowPassword(prev => !prev);
-    setApiEndpoint(value);
+  }, []);
-  };
 
-  const togglePasswordVisibility = () => {
+  const handleEmailChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setShowPassword(!showPassword);
+    setEmail(e.target.value);
-  };
+    setLoginError(''); // Clear error when user starts typing
+  }, []);
+
+  const handlePasswordChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+    setLoginError(''); // Clear error when user starts typing
+  }, []);
+
+  const openExternalLink = useCallback((url: string) => {
+    window.open(url, '_blank');
+  }, []);
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-background p-4">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-background p-4">
       <div className="w-full max-w-md p-4 sm:p-8 space-y-6 rounded-xl bg-card shadow-xl border border-border/20">
-        <div className="text-center relative">
+        <div className="text-center">
-          {/* Commented out API Endpoint Settings button
-          <div className="absolute right-0 top-0">
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button variant="outline" size="icon" aria-label="API Settings">
-                  <Settings className="h-4 w-4" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-[260px] sm:w-80">
-                <div className="space-y-4">
-                  <h4 className="font-medium">API Endpoint Settings</h4>
-                  <RadioGroup 
-                    value={currentEndpoint} 
-                    onValueChange={handleEndpointChange}
-                    className="gap-2"
-                  >
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value={API_ENDPOINTS.LOCAL} id="local" />
-                      <Label htmlFor="local" className="truncate text-sm">Local: {API_ENDPOINTS.LOCAL}</Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value={API_ENDPOINTS.REMOTE} id="remote" />
-                      <Label htmlFor="remote" className="truncate text-sm">Remote: {API_ENDPOINTS.REMOTE}</Label>
-                    </div>
-                  </RadioGroup>
-                  <div className="text-xs text-muted-foreground truncate">
-                    Current endpoint: {currentEndpoint}
-                  </div>
-                </div>
-              </PopoverContent>
-            </Popover>
-          </div>
-          */}
-          
           {/* Logo */}
           <div className="mb-4">
             <img 
@@ -146,11 +100,8 @@ const Login = () => {
           </div>
           
           <h1 className="text-xl sm:text-2xl font-bold tracking-tight text-foreground">{t("signInToYourAccount")}</h1>
-          {/* Removed "Don't have an account? Create one" text */}
         </div>
 
-        {/* Removed Google Sign in button section */}
-
         <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
           {/* Error Alert */}
           {loginError && (
@@ -171,10 +122,7 @@ const Login = () => {
                 placeholder="your.email@provider.com"
                 type="email"
                 value={email}
-                onChange={(e) => {
+                onChange={handleEmailChange}
-                  setEmail(e.target.value);
-                  setLoginError(''); // Clear error when user starts typing
-                }}
                 required
                 className="pl-10 text-sm sm:text-base h-9 sm:h-10"
               />
@@ -204,10 +152,7 @@ const Login = () => {
                 placeholder="••••••••••••"
                 type={showPassword ? 'text' : 'password'}
                 value={password}
-                onChange={(e) => {
+                onChange={handlePasswordChange}
-                  setPassword(e.target.value);
-                  setLoginError(''); // Clear error when user starts typing
-                }}
                 required
                 className="pl-10 text-sm sm:text-base h-9 sm:h-10"
               />
@@ -234,13 +179,38 @@ const Login = () => {
             {loading ? t("signingIn") : t("signIn")}
             {!loading && <LogIn className="ml-2 h-4 w-4" />}
           </Button>
-
-          <p className="text-xxs sm:text-xs text-center text-muted-foreground">
-            {t("bySigningIn")} <a href="#" className="text-emerald-500">{t("termsAndConditions")}</a> {t("and")} <a href="#" className="text-emerald-500">{t("privacyPolicy")}</a>.
-          </p>
         </form>
       </div>
 
+      {/* Footer with Social Media Icons */}
+      <div className="mt-8 flex items-center justify-center space-x-6">
+        <button
+          onClick={() => openExternalLink('https://github.com/operacle/checkcle')}
+          className="text-muted-foreground hover:text-foreground transition-colors"
+          aria-label="GitHub"
+        >
+          <Github className="h-5 w-5" />
+        </button>
+        <button
+          onClick={() => openExternalLink('https://x.com/checkcle_oss')}
+          className="text-muted-foreground hover:text-foreground transition-colors"
+          aria-label="X (Twitter)"
+        >
+          <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+          </svg>
+        </button>
+        <button
+          onClick={() => openExternalLink('https://discord.gg/xs9gbubGwX')}
+          className="text-muted-foreground hover:text-foreground transition-colors"
+          aria-label="Discord"
+        >
+          <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.010c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
+          </svg>
+        </button>
+      </div>
+
       <ForgotPasswordDialog 
         open={showForgotPassword} 
         onOpenChange={setShowForgotPassword} 

application/src/pages/Profile.tsx

@@ -10,8 +10,11 @@ import { User } from "@/services/userService";
 import { useToast } from "@/hooks/use-toast";
 import { Loader2 } from "lucide-react";
 import { useSidebar } from "@/contexts/SidebarContext";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 const Profile = () => {
+	const { t } = useLanguage()
+
   // Use shared sidebar state
   const { sidebarCollapsed, toggleSidebar } = useSidebar();
 
@@ -84,12 +87,12 @@ const Profile = () => {
     return (
       <div className="flex items-center justify-center h-screen">
         <div className="text-center">
-          <p>Please login to view your profile</p>
+          <p>{t("loginToViewProfile")}</p>
           <button 
             onClick={() => navigate("/login")} 
             className="mt-4 px-4 py-2 bg-primary text-white rounded"
           >
-            Go to Login
+	          {t("goToLogin")}
           </button>
         </div>
       </div>
@@ -110,7 +113,7 @@ const Profile = () => {
           {loading ? (
             <div className="flex items-center justify-center h-full">
               <Loader2 className="h-12 w-12 animate-spin text-primary" />
-              <span className="ml-2">Loading user data...</span>
+              <span className="ml-2">{t("loadingUserData")}</span>
             </div>
           ) : error ? (
             <div className="flex flex-col items-center justify-center h-full">
@@ -121,7 +124,7 @@ const Profile = () => {
                 onClick={() => fetchUserData()}
                 className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
               >
-                Retry
+	              {t("retry")}
               </button>
             </div>
           ) : (