Merge pull request #79 from operacle/develop

feat: Add create instance monitoring agent and Add Uptime Heatmap to service detail page

.github/CODEOWNERS

@@ -0,0 +1,2 @@
+# These owners will be the default owners for everything in
+*       @tolaleng

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: [tolaleng]
+patreon: # Replace with a single Patreon username
+open_collective: #checkcle
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/ask_for_help.yml

@@ -0,0 +1,53 @@
+name: ❓ Ask for Help
+description: Ask a question or request guidance about this project.
+title: "[Question]: "
+labels: [question]
+assignees: []
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        **Thank you for reaching out!**
+        Please fill out this form to help us understand your question.
+
+  - type: textarea
+    id: question
+    attributes:
+      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...
+    validations:
+      required: true
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Context
+      description: |
+        Provide any additional context, related issues, or links that help explain your question.
+      placeholder: "Related issues, pull requests, or documentation..."
+    validations:
+      required: false
+
+  - type: textarea
+    id: environment
+    attributes:
+      label: Environment Details
+      description: |
+        If applicable, please provide details about your environment (OS, Node version, browser, etc.).
+      placeholder: "Example: Ubuntu 22.04, Node.js v20, Chrome 125"
+    validations:
+      required: false
+
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      description: Before submitting, please confirm:
+      options:
+        - label: I have searched existing issues and discussions.
+          required: true
+        - label: I have read the documentation.
+          required: true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,94 @@
+name: 🐛 Bug Report
+description: Report a reproducible bug to help us improve.
+title: "[Bug]: "
+labels: [bug]
+assignees: []
+
+body:
+  - type: markdown
+    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.
+
+  - type: input
+    id: environment
+    attributes:
+      label: Environment
+      description: |
+        Describe where you encountered the issue.
+        (e.g., OS, browser, Node version, etc.)
+      placeholder: "Example: macOS 14.0, Chrome 125, Node.js 20.3.0"
+    validations:
+      required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Bug Description
+      description: |
+        A clear and concise description of what the bug is.
+      placeholder: "When I do X, Y happens instead of Z..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to Reproduce
+      description: |
+        How can we reproduce the behavior?
+        Please list the steps in order.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected Behavior
+      description: What did you expect to happen?
+      placeholder: "The app should..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots or Videos
+      description: |
+        If applicable, add screenshots or screen recordings to help explain your problem.
+      placeholder: "Attach screenshots here."
+    validations:
+      required: false
+
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs
+      description: |
+        If applicable, paste logs or error messages here.
+        Please remove any sensitive information.
+      render: shell
+      placeholder: |
+        ```
+        Error: Something went wrong
+            at index.js:123:45
+        ```
+    validations:
+      required: false
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Checklist
+      description: Before submitting, please confirm:
+      options:
+        - label: I have searched existing issues to avoid duplicates.
+          required: true
+        - label: I have provided enough information for reproduction.
+          required: true

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/documentation.yml

@@ -0,0 +1,49 @@
+name: 📝 Documentation Improvement
+description: Suggest improvements or report issues in documentation.
+title: "[Docs]: "
+labels: [documentation]
+assignees: []
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for helping improve our documentation!
+
+  - type: textarea
+    id: description
+    attributes:
+      label: What part of the documentation needs improvement?
+      description: |
+        Describe the issue clearly.
+      placeholder: "The installation guide is missing steps for..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: location
+    attributes:
+      label: Location
+      description: |
+        Provide a link or path to the affected documentation.
+      placeholder: "https://github.com/operacle/checkcle/docs/INSTALL.md"
+    validations:
+      required: true
+
+  - type: textarea
+    id: suggestion
+    attributes:
+      label: Suggested Change
+      description: |
+        How would you improve it?
+      placeholder: "I suggest adding a section about..."
+    validations:
+      required: false
+
+  - type: checkboxes
+    id: confirmation
+    attributes:
+      label: Checklist
+      options:
+        - label: I have searched existing issues for similar documentation problems.
+          required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,63 @@
+name: 🚀 Feature Request
+description: Suggest an idea to improve this project.
+title: "[Feature]: "
+labels: [enhancement]
+assignees: []
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        **Thank you for suggesting a feature!**
+        Please fill out this form so we can better understand your idea.
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Feature Description
+      description: |
+        A clear and concise description of the feature you’d like to see.
+      placeholder: "I would like to have..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: motivation
+    attributes:
+      label: Motivation
+      description: |
+        Please explain why this feature would be useful.
+      placeholder: "This feature would help because..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives Considered
+      description: |
+        Have you considered any alternative solutions or workarounds?
+      placeholder: "I have tried..."
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional Context
+      description: |
+        Add any other context or screenshots about the feature request here.
+      placeholder: "Links to related issues or references..."
+    validations:
+      required: false
+
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      description: Before submitting, please confirm:
+      options:
+        - label: I have searched existing issues to make sure this feature hasn’t been requested yet.
+          required: true
+        - label: I have described the feature clearly and provided supporting details.
+          required: true

.github/ISSUE_TEMPLATE/security_issue.yml

@@ -0,0 +1,51 @@
+name: 🛡️ Security Issue
+description: Report a potential security vulnerability.
+title: "[Security]: "
+labels: [security]
+assignees: []
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ⚠️ **IMPORTANT: Please do NOT disclose sensitive security details in this public issue.**
+
+        If you believe you have found a security vulnerability, **please report it privately** to help keep users safe.
+
+        📧 **Disclosure Process:**
+        - Email: [security@checkcle.io](mailto:security@checkcle.io)
+        - Or follow our [SECURITY.md](../../blob/main/SECURITY.md) policy.
+
+        You can use this issue only to let maintainers know that you have sent or will send a report.
+
+  - type: textarea
+    id: summary
+    attributes:
+      label: Summary
+      description: |
+        Briefly describe the type of vulnerability you believe you have found (without including sensitive details).
+      placeholder: "Example: Possible SQL injection in the user login endpoint."
+    validations:
+      required: true
+
+  - type: textarea
+    id: contact
+    attributes:
+      label: Contact Information
+      description: |
+        Provide an email or other way for maintainers to contact you if we need clarification.
+      placeholder: "your.email@example.com"
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: confirmation
+    attributes:
+      label: Confirmation
+      description: |
+        Please confirm:
+      options:
+        - label: I will not share sensitive exploit details in this issue.
+          required: true
+        - label: I have sent or will send a full report to the private disclosure contact.
+          required: true

.github/ISSUE_TEMPLATE/translation_request.yml

@@ -0,0 +1,38 @@
+name: 🌎 Translation Request
+description: Request a translation or report translation issues.
+title: "[Translation]: "
+labels: [translation]
+assignees: []
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Help us make this project accessible in more languages!
+
+  - type: input
+    id: language
+    attributes:
+      label: Language
+      description: What language is this about?
+      placeholder: "Example: Spanish"
+    validations:
+      required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Details
+      description: |
+        Describe what you’d like to have translated or what issue you found.
+      placeholder: "Please translate the Getting Started guide..."
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: confirmation
+    attributes:
+      label: Checklist
+      options:
+        - label: I have searched existing issues for similar requests.
+          required: true

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 application/src/lib/pocketbase.ts
 Dockerfile
+application/src/lib/pocketbase-prod.ts

CODE_OF_CONDUCT.md

@@ -0,0 +1,81 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders of the **CheckCle** project pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others’ private information, such as a physical or email address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Enforcement Responsibilities
+
+Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and also applies when an individual is officially representing the project in public spaces. Examples include using an official project email address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the project team at:
+
+📧 **Email:** [hello@checkcle.io](mailto:hello@checkcle.io)
+
+All complaints will be reviewed and investigated promptly and fairly.
+
+All project maintainers are obligated to respect the privacy and security of the reporter of any incident.
+
+## Enforcement Guidelines
+
+Project maintainers will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+**1. Correction**
+
+- *Community Impact:* Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+- *Consequence:* A private, written warning from project maintainers, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+**2. Warning**
+
+- *Community Impact:* A violation through a single incident or series of actions.
+- *Consequence:* A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+**3. Temporary Ban**
+
+- *Community Impact:* A serious violation of community standards, including sustained inappropriate behavior.
+- *Consequence:* A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+**4. Permanent Ban**
+
+- *Community Impact:* Demonstrating a pattern of violation of community standards, including sustained harassment, or showing no remorse after being warned.
+- *Consequence:* A permanent ban from any sort of public interaction within the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, available at:
+
+https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+
+For answers to common questions about this code of conduct, see:
+
+https://www.contributor-covenant.org/faq
+
+[homepage]: https://www.contributor-covenant.org

CONTRIBUTING.md

@@ -1,3 +1,36 @@
+## 🌐 Select Language
+
+<table align="center">
+  <tr>
+    <td align="center">
+      <a href="CONTRIBUTING.md">
+        <img src="https://flagcdn.com/24x18/gb.png" alt="English" />  
+        <br/><strong>English</strong>
+      </a>
+    </td>
+    <td align="center">
+      <a href="docs/CONTRIBUTING_km.md">
+        <img src="https://flagcdn.com/24x18/kh.png" alt="Khmer" />  
+        <br/><strong>ខ្មែរ</strong>
+      </a>
+    </td>
+    <td align="center">
+      <a href="docs/CONTRIBUTING_ja.md">
+        <img src="https://flagcdn.com/24x18/jp.png" alt="Japanese" />  
+        <br/><strong>Japanese</strong>
+      </a>
+    </td>
+  </tr>
+</table>
+
+
+<p align="center">
+  Thank you to all our contributors, users, and supporters for making this project thrive.
+</p>
+
+<p align="center">
+  🚀 <strong>Stay tuned for more updates, features, and improvements.</strong>
+</p>
 
 # 🛠️ Contributing to CheckCle
 
@@ -62,15 +95,44 @@ npm install && npm run dev
 #Server Backend
 cd server
 ./pocketbase serve --dir pb_data 
+
+If you're not using localhost, please run with this (./pocketbase serve --http=0.0.0.0:8090 --dir pb_data)
 ```
 
+### 4. Start Service Check Operation
+
+```bash
+#Server Backend 
+Start Service Operation (Check Service for PING, HTTP, TCP, DNS)
+
+cd server/service-operation
+
+go run main.go (you do not need to change the .env while it's the localhost connection)
+```
+
+### 5. Start Distributed Regional Agent
+```bash
+#### 1. Fork the Repository
+Click "Fork" on [GitHub](https://github.com/operacle/Distributed-Regional-Monitoring) to create your own copy.
+
+#### 2. Clone Your Fork
+git clone --branch main https://github.com/operacle/Distributed-Regional-Monitoring.git
+cd Distributed-Regional-Monitoring
+
+#### 3. Install Go Service (make sure you have installed the Go Service)
+
+Copy .env.example -> .env
+Change regional agent configuration in .env file
+and Run: go run main.go
+
+```
 ---
 
 ## ✅ Pull Request Process
 
 1. Ensure your code follows the existing style and naming conventions.
 2. Write clear, concise commit messages.
-3. Push your branch and open a Pull Request (PR) on the `main` branch.
+3. Push your branch and open a Pull Request (PR) on the `develop` branch.
 4. Provide a meaningful PR description (what/why/how).
 5. Link related issues if applicable (e.g. `Closes #12`).
 6. Make sure all checks pass (e.g., linting, tests).

LICENSE.md

@@ -1,17 +1,21 @@
-The MIT License (MIT)
+MIT License
-Copyright (c) 2025, Tola Leng
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+Copyright (c) 2025 Tola Leng
-and associated documentation files (the "Software"), to deal in the Software without restriction,
-including without limitation the rights to use, copy, modify, merge, publish, distribute,
-sublicense, and/or sell copies of the Software, and to permit persons to whom the Software
-is furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all copies or
+Permission is hereby granted, free of charge, to any person obtaining a copy
-substantial portions of the Software.
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
+The above copyright notice and this permission notice shall be included in all
-BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+copies or substantial portions of the Software.
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+
-DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,4 +1,37 @@
-![CheckCle Platform](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-black.png)
+## 🌐 Select Language
+
+<table align="center">
+  <tr>
+    <td align="center">
+      <a href="README.md">
+        <img src="https://flagcdn.com/24x18/gb.png" alt="English" />  
+        <br/><strong>English</strong>
+      </a>
+    </td>
+    <td align="center">
+      <a href="docs/README_km.md">
+        <img src="https://flagcdn.com/24x18/kh.png" alt="Khmer" />  
+        <br/><strong>ខ្មែរ</strong>
+      </a>
+    </td>
+    <td align="center">
+      <a href="docs/README_ja.md">
+        <img src="https://flagcdn.com/24x18/jp.png" alt="Japanese" />  
+        <br/><strong>Japanese</strong>
+      </a>
+    </td>
+  </tr>
+</table>
+
+<p align="center">
+  Thank you to all our contributors, users, and supporters for making this project thrive.
+</p>
+
+<p align="center">
+  🚀 <strong>Stay tuned for more updates, features, and improvements.</strong>
+</p>
+
+![CheckCle Platform](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/server-detail-page.png)
 
 # 🚀 What is CheckCle?
 
@@ -13,6 +46,7 @@ CheckCle is an Open Source solution for seamless, real-time monitoring of full-s
 - Monitor HTTP, DNS, and Ping protocols
 - Monitor TCP-based, API services (e.g., FTP, SMTP, HTTP)
 - Track detail uptime, response times, and performance issues
+- Distributed Regional Monitoring
 - Incident History (UP/DOWN/WARNING/PAUSE)
 - SSL & Domain Monitoring (Domain, Issuer, Expiration Date, Days Left, Status, Last Notified)
 - Infrastructure Server Monitoring, Supports Linux (🐧 Debian, Ubuntu, CentOS, Red Hat, etc.) and Windows (Beta). And Servers metrics like CPU, RAM, disk usage, and network activity) with an one-line installation angent script.
@@ -24,8 +58,19 @@ CheckCle is an Open Source solution for seamless, real-time monitoring of full-s
 
 ## #️⃣ Getting Started
 
-### Installation with Docker Run and Compose
+### Current Architecture Support
-1. Copy ready docker run command
+* ✅ 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.
+
+
+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 \
@@ -36,7 +81,7 @@ docker run -d \
   operacle/checkcle:latest
 
 ```
-2. Docker Compose - Recommended
+3. Install with Docker compose Configuration.
 ```bash 
 
 version: '3.9'
@@ -65,29 +110,33 @@ services:
 4. Follow the Quick Start Guide at https://docs.checkcle.io
 
 ###
-![checkcle-collapse-black](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-black.png)
+![checkcle-collapse-black](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/uptime-monitoring.png)
-![Service Detail Page](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-detailpage.png)
+![Service Detail Page](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/uptime-service-detail.png)
-![Schedule Maintenance](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/maintenance-dahboard.png)
+![checkcle-server-instance](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/instance-server-monitoring.png)
+![Schedule Maintenance](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-schedule-maintenance.png)
+![SSL Monitoring](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/ssl-monitoring.png)
 
 ## 📝 Development Roadmap
 
-- [x] Health check & uptime monitoring (HTTP)
+- ✅ Health check & uptime monitoring (HTTP)
-- [x] Dashboard UI with live stats  
+- ✅ Dashboard UI with live stats  
-- [x] Auth with Multi-users system (admin)
+- ✅ Auth with Multi-users system (admin)
-- [x] Notifications (Telegram)
+- ✅ Notifications (Telegram)
-- [x] Docker containerization 
+- ✅ Docker containerization 
-- [x] CheckCle Website
+- ✅ CheckCle Website
-- [x] CheckCle Demo Server
+- ✅ CheckCle Demo Server
-- [x] SSL & Domain Monitoring
+- ✅ SSL & Domain Monitoring
-- [x] Schedule Maintenance 
+- ✅ Schedule Maintenance 
-- [x] Incident Management
+- ✅ Incident Management
-- [ ] Uptime monitoring (PING - Inprogress)
 - [ ] Infrastructure Server Monitoring
-- [ ] Operational Status / Public Status Pages
+- ✅ Operational Status / Public Status Pages
-- [ ] Uptime monitoring (TCP, PING, DNS)
+- ✅ Uptime monitoring (HTTP, TCP, PING, DNS) Full functionality
-- [ ] User Permission Roles & Service Group
+- ✅ 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)  
-- [x] Open-source release with full documentation 
+- ✅ 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
@@ -121,5 +170,13 @@ Here are some ways you can help improve CheckCle:
 CheckCle is released under the MIT License.
 
 ---
+## 👥 Contributors
+
+[![](https://contrib.rocks/image?repo=operacle/checkcle)](https://github.com/operacle/checkcle/graphs/contributors)
+
+
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=operacle/checkcle&type=Date)](https://www.star-history.com/#operacle/checkcle&Date)
 
 Stay informed, stay online, with CheckCle! 🌐

SECURITY.md

@@ -2,7 +2,7 @@
 
 ## 📦 Project: [checkcle](https://github.com/operacle/checkcle)
 
-**checkcle** is a lightweight, TypeScript-based built for uptime and server monitoring tools.
+**checkcle** is a self-hosted uptime and server monitoring tool built with TypeScript and Go.
 
 We care about the security and privacy of users running this project in production environments.
 
@@ -47,22 +47,21 @@ We support the latest stable release of `checkcle`. Security patches may also be
 
 ## 🔍 Security Practices
 
-This project adheres to the following practices to enhance security:
+CheckCle follows these practices to improve overall security:
 
-- 🔎 Regular vulnerability checks using `npm audit`
+- 🔎 Regular vulnerability scanning (npm audit for JavaScript dependencies, govulncheck for Go modules)
-- ⛓️ Dependency pinning via `package-lock.json`
+- ⛓️ Dependency pinning (package-lock.json and Go modules)
-- ✅ Type-safe code using `TypeScript`
+- ✅ Type-safe code in TypeScript and memory-safe design in Go
-- 🧪 Continuous testing and CI
+- 🧪 Continuous testing and CI pipelines
 - 🔐 No data is stored or transmitted unless explicitly configured by the user
-- 🧑‍💻 All contributions are reviewed before being merged
+- 🧑‍💻 All code contributions are reviewed before merging
 
 ---
 
 ## ⚠️ Known Security Limitations
 
-- `checkcle` makes outbound HTTPS requests to check certificate details — avoid running in untrusted or high-risk environments without proper network policies.
+- Outbound HTTPS requests: CheckCle agents perform outbound HTTPS connections to send metric data to the backend server. Avoid deploying in untrusted or high-risk environments without appropriate network policies and monitoring.
-- Output may contain certificate metadata (e.g., CN, SANs, expiry dates) — avoid exposing this to public logs unless sanitized.
+- The data may be lost upon system restarts or crashes. Always ensure that backup (pb_data) and recovery mechanisms are in place in production environments.
-- The data may be lost upon system restarts or crashes. Always ensure that backup and recovery mechanisms are in place in production environments.
 
 ---
 

application/index.html

@@ -20,7 +20,6 @@
 
   <body>
     <div id="root"></div>
-    <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

application/src/App.tsx

@@ -1,125 +1,72 @@
+import React, { useState } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Toaster } from '@/components/ui/sonner';
 
-import { Toaster } from "@/components/ui/toaster";
+import { ThemeProvider } from './contexts/ThemeContext';
-import { Toaster as Sonner } from "@/components/ui/sonner";
+import { LanguageProvider } from './contexts/LanguageContext';
-import { TooltipProvider } from "@/components/ui/tooltip";
+import { SidebarProvider } from './contexts/SidebarContext';
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
-import { useEffect, useState } from "react";
-import { authService } from "@/services/authService";
-import { ThemeProvider } from "@/contexts/ThemeContext";
-import { LanguageProvider } from "@/contexts/LanguageContext";
 
-import Login from "./pages/Login";
+import Index from './pages/Index';
-import Dashboard from "./pages/Dashboard";
+import Login from './pages/Login';
-import ServiceDetail from "./pages/ServiceDetail";
+import Dashboard from './pages/Dashboard';
-import Settings from "./pages/Settings";
+import InstanceMonitoring from './pages/InstanceMonitoring';
-import Profile from "./pages/Profile";
+import ContainerMonitoring from './pages/ContainerMonitoring';
-import NotFound from "./pages/NotFound";
+import ServiceDetail from './pages/ServiceDetail';
-import SslDomain from "./pages/SslDomain";
+import SslDomain from './pages/SslDomain';
-import ScheduleIncident from "./pages/ScheduleIncident";
+import ScheduleIncident from './pages/ScheduleIncident';
+import OperationalPage from './pages/OperationalPage';
+import RegionalMonitoring from './pages/RegionalMonitoring';
+import Settings from './pages/Settings';
+import Profile from './pages/Profile';
+import NotFound from './pages/NotFound';
+import PublicStatusPage from './pages/PublicStatusPage';
+import { ProtectedRoute } from './components/auth/ProtectedRoute';
+import ServerDetail from './pages/ServerDetail';
 
-// Create a Protected route component
+function App() {
-const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const [queryClient] = useState(() => new QueryClient({
-  const isAuthenticated = authService.isAuthenticated();
+    defaultOptions: {
-  
+      queries: {
-  if (!isAuthenticated) {
+        staleTime: 60 * 1000
-    return <Navigate to="/login" replace />;
       }
-  
-  return <>{children}</>;
-};
-
-const queryClient = new QueryClient();
-
-const App = () => {
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    // Check authentication status when the app loads
-    const checkAuth = async () => {
-      try {
-        // Just check the auth state
-        authService.isAuthenticated();
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    
-    checkAuth();
-  }, []);
-
-  if (isLoading) {
-    return <div className="flex items-center justify-center h-screen bg-background text-foreground">Loading...</div>;
     }
+  }));
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <BrowserRouter>
       <ThemeProvider>
         <LanguageProvider>
-          <TooltipProvider>
+          <SidebarProvider>
+            <QueryClientProvider client={queryClient}>
               <Toaster />
-            <Sonner />
-            <BrowserRouter>
               <Routes>
+                {/* Public routes */}
+                <Route path="/public/:slug" element={<PublicStatusPage />} />
+                
+                {/* Protected routes */}
                 <Route path="/login" element={<Login />} />
-                <Route path="/" element={<Navigate to="/dashboard" replace />} />
+                <Route path="/" element={<ProtectedRoute><Index /></ProtectedRoute>} />
-                <Route 
+                <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
-                  path="/dashboard" 
+                <Route path="/instance-monitoring" element={<ProtectedRoute><InstanceMonitoring /></ProtectedRoute>} />
-                  element={
+                <Route path="/server-detail/:serverId" element={<ProtectedRoute><ServerDetail /></ProtectedRoute>} />
-                    <ProtectedRoute>
+                <Route path="/container-monitoring" element={<ProtectedRoute><ContainerMonitoring /></ProtectedRoute>} />
-                      <Dashboard />
+                <Route path="/container-monitoring/:serverId" element={<ProtectedRoute><ContainerMonitoring /></ProtectedRoute>} />
-                    </ProtectedRoute>
+                <Route path="/service/:id" element={<ProtectedRoute><ServiceDetail /></ProtectedRoute>} />
-                  } 
+                <Route path="/ssl-domain" element={<ProtectedRoute><SslDomain /></ProtectedRoute>} />
-                />
+                <Route path="/schedule-incident" element={<ProtectedRoute><ScheduleIncident /></ProtectedRoute>} />
-                <Route 
+                <Route path="/operational-page" element={<ProtectedRoute><OperationalPage /></ProtectedRoute>} />
-                  path="/service/:id" 
+                <Route path="/regional-monitoring" element={<ProtectedRoute><RegionalMonitoring /></ProtectedRoute>} />
-                  element={
+                <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
-                    <ProtectedRoute>
+                <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
-                      <ServiceDetail />
-                    </ProtectedRoute>
-                  } 
-                />
-                <Route 
-                  path="/settings" 
-                  element={
-                    <ProtectedRoute>
-                      <Settings />
-                    </ProtectedRoute>
-                  } 
-                />
-                <Route 
-                  path="/profile" 
-                  element={
-                    <ProtectedRoute>
-                      <Profile />
-                    </ProtectedRoute>
-                  } 
-                />
-                <Route 
-                  path="/ssl-domain" 
-                  element={
-                    <ProtectedRoute>
-                      <SslDomain />
-                    </ProtectedRoute>
-                  } 
-                />
-                <Route 
-                  path="/schedule-incident" 
-                  element={
-                    <ProtectedRoute>
-                      <ScheduleIncident />
-                    </ProtectedRoute>
-                  } 
-                />
-                {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
                 <Route path="*" element={<NotFound />} />
               </Routes>
-            </BrowserRouter>
+            </QueryClientProvider>
-          </TooltipProvider>
+          </SidebarProvider>
         </LanguageProvider>
       </ThemeProvider>
-    </QueryClientProvider>
+    </BrowserRouter>
   );
-};
+}
 
 export default App;

application/src/api/index.ts

@@ -11,19 +11,19 @@ const api = {
    * Handle API requests
    */
   async handleRequest(path, method, body) {
-    console.log(`API request: ${method} ${path}`, body);
+   // console.log(`API request: ${method} ${path}`, body);
     
     // Route to the appropriate handler
     if (path === '/api/realtime') {
-      console.log("Routing to realtime handler");
+    //  console.log("Routing to realtime handler");
       return await realtime(body);
-    } else if (path === '/api/settings') {
+    } else if (path === '/api/settings' || path.startsWith('/api/settings/')) {
-      console.log("Routing to settings handler");
+     // console.log("Routing to settings handler");
-      return await settingsApi(body);
+      return await settingsApi(body, path);
     }
     
     // Return 404 for unknown routes
-    console.error(`Endpoint not found: ${path}`);
+   // console.error(`Endpoint not found: ${path}`);
     return {
       status: 404,
       json: {
@@ -40,7 +40,7 @@ const originalFetch = window.fetch;
 window.fetch = async (url, options = {}) => {
   // Check if this is an API request to our mock endpoints
   if (typeof url === 'string' && url.startsWith('/api/')) {
-    console.log('Intercepting API request:', url, options);
+   // console.log('Intercepting API request:', url, options);
     
     try {
       let body = {};

application/src/api/realtime/index.ts

@@ -2,7 +2,7 @@
 // This file handles realtime notifications in a client-side environment
 // In a production app, this would be a server-side endpoint
 
-console.log("API Realtime endpoint loaded");
+//console.log("API Realtime endpoint loaded");
 
 // Simple implementation that simulates sending notifications
 export default async function handler(req) {

application/src/api/settings/actions/getSettings.ts

@@ -0,0 +1,26 @@
+
+import { getAuthHeaders, getBaseUrl } from '../utils';
+import { SettingsApiResponse } from '../types';
+
+export const getSettings = async (): Promise<SettingsApiResponse> => {
+  try {
+    const response = await fetch(`${getBaseUrl()}/api/settings`, {
+      method: 'GET',
+      headers: getAuthHeaders(),
+    });
+
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+
+    const settings = await response.json();
+    return {
+      status: 200,
+      json: { success: true, data: settings },
+    };
+  } catch (error) {
+    console.error('Error fetching settings:', error);
+    return {
+      status: 500,
+      json: { success: false, message: 'Failed to fetch settings' },
+    };
+  }
+};

application/src/api/settings/actions/sendTestEmail.ts

@@ -0,0 +1,204 @@
+
+import { getAuthHeaders, getBaseUrl, validateEmail } from '../utils';
+import { SettingsApiResponse } from '../types';
+
+const createEmailTemplate = (template: string, data: any): { subject: string; htmlBody: string } => {
+  let subject = 'Test Email from CheckCle';
+  let htmlBody = `
+    <html>
+      <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+        <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+          <h2 style="color: #2563eb;">Test Email</h2>
+          <p>This is a test email from your monitoring system.</p>
+          <p>If you received this email, your SMTP configuration is working correctly.</p>
+          <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
+          <p style="font-size: 12px; color: #666;">
+            Sent from CheckCle Monitoring System<br>
+            Template: ${template}<br>
+            ${data.collection ? `Collection: ${data.collection}` : ''}
+          </p>
+        </div>
+      </body>
+    </html>
+  `;
+
+  switch (template) {
+    case 'verification':
+      subject = 'Email Verification Test - CheckCle';
+      htmlBody = `
+        <html>
+          <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+            <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+              <h2 style="color: #10b981;">Email Verification Test</h2>
+              <p>This is a test of the email verification template.</p>
+              <p>If you received this email, your SMTP configuration is working correctly.</p>
+              <div style="background: #f3f4f6; padding: 15px; border-radius: 5px; margin: 20px 0;">
+                <p><strong>Template:</strong> Verification Email</p>
+                <p><strong>Collection:</strong> ${data.collection || '_superusers'}</p>
+              </div>
+              <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
+              <p style="font-size: 12px; color: #666;">Sent from CheckCle Monitoring System</p>
+            </div>
+          </body>
+        </html>
+      `;
+      break;
+    case 'password-reset':
+      subject = 'Password Reset Test - CheckCle';
+      htmlBody = `
+        <html>
+          <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+            <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+              <h2 style="color: #f59e0b;">Password Reset Test</h2>
+              <p>This is a test of the password reset template.</p>
+              <p>If you received this email, your SMTP configuration is working correctly.</p>
+              <div style="background: #f3f4f6; padding: 15px; border-radius: 5px; margin: 20px 0;">
+                <p><strong>Template:</strong> Password Reset Email</p>
+                <p><strong>Collection:</strong> ${data.collection || '_superusers'}</p>
+              </div>
+              <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
+              <p style="font-size: 12px; color: #666;">Sent from CheckCle Monitoring System</p>
+            </div>
+          </body>
+        </html>
+      `;
+      break;
+    case 'email-change':
+      subject = 'Email Change Confirmation Test - CheckCle';
+      htmlBody = `
+        <html>
+          <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+            <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+              <h2 style="color: #8b5cf6;">Email Change Confirmation Test</h2>
+              <p>This is a test of the email change confirmation template.</p>
+              <p>If you received this email, your SMTP configuration is working correctly.</p>
+              <div style="background: #f3f4f6; padding: 15px; border-radius: 5px; margin: 20px 0;">
+                <p><strong>Template:</strong> Email Change Confirmation</p>
+              </div>
+              <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
+              <p style="font-size: 12px; color: #666;">Sent from CheckCle Monitoring System</p>
+            </div>
+          </body>
+        </html>
+      `;
+      break;
+  }
+
+  return { subject, htmlBody };
+};
+
+export const sendTestEmail = async (data: any): Promise<SettingsApiResponse> => {
+  console.log('sendTestEmail function called with data:', data);
+
+  try {
+    // Validate required fields
+    if (!data || typeof data !== 'object') {
+      console.log('Invalid request data - not object');
+      return {
+        status: 200,
+        json: { success: false, message: 'Invalid request data' },
+      };
+    }
+
+    if (!data.email || typeof data.email !== 'string') {
+      console.log('Email address missing or invalid type');
+      return {
+        status: 200,
+        json: { success: false, message: 'Email address is required and must be a string' },
+      };
+    }
+
+    if (!validateEmail(data.email)) {
+      console.log('Invalid email format:', data.email);
+      return {
+        status: 200,
+        json: { success: false, message: 'Invalid email address format' },
+      };
+    }
+
+    console.log('Email validation passed for:', data.email);
+
+    const headers = getAuthHeaders();
+    const baseUrl = getBaseUrl();
+
+    // Get current SMTP settings first
+    console.log('Fetching SMTP settings from:', `${baseUrl}/api/settings`);
+    
+    const settingsResponse = await fetch(`${baseUrl}/api/settings`, {
+      method: 'GET',
+      headers,
+    });
+
+    if (!settingsResponse.ok) {
+      console.error('Failed to get SMTP settings, status:', settingsResponse.status);
+      return {
+        status: 200,
+        json: { success: false, message: 'Failed to get SMTP settings' },
+      };
+    }
+
+    const settingsData = await settingsResponse.json();
+    console.log('Retrieved settings data:', settingsData);
+    
+    const smtpSettings = settingsData?.smtp;
+
+    if (!smtpSettings || !smtpSettings.enabled) {
+      console.log('SMTP not enabled or missing');
+      return {
+        status: 200,
+        json: { success: false, message: 'SMTP is not enabled. Please enable and configure SMTP settings first.' },
+      };
+    }
+
+    if (!smtpSettings.host || !smtpSettings.username) {
+      console.log('SMTP configuration incomplete - missing host or username');
+      return {
+        status: 200,
+        json: { success: false, message: 'SMTP configuration is incomplete. Please check host and username.' },
+      };
+    }
+
+    if (!smtpSettings.password) {
+      console.log('SMTP password missing');
+      return {
+        status: 200,
+        json: { success: false, message: 'SMTP password is required for authentication. Please configure the SMTP password.' },
+      };
+    }
+
+    // Create test email content based on template
+    const template = data.template || 'basic';
+    const { subject, htmlBody } = createEmailTemplate(template, data);
+
+    console.log('Test email prepared successfully:', {
+      to: data.email,
+      subject: subject,
+      template: template,
+      smtpHost: smtpSettings.host,
+      smtpPort: smtpSettings.port || 587
+    });
+
+    // Simulate processing time
+    console.log('Simulating email send...');
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    console.log('Email send simulation completed');
+
+    return {
+      status: 200,
+      json: {
+        success: true,
+        message: `Test email sent successfully to ${data.email}`,
+      },
+    };
+
+  } catch (error) {
+    console.error('Error in sendTestEmail function:', error);
+    return {
+      status: 200,
+      json: { 
+        success: false, 
+        message: error instanceof Error ? error.message : 'Failed to send test email. Please check your SMTP configuration.'
+      },
+    };
+  }
+};

application/src/api/settings/actions/testEmail.ts

@@ -0,0 +1,238 @@
+import { getAuthHeaders, getBaseUrl, validateEmail } from '../utils';
+import { SettingsApiResponse } from '../types';
+
+const createEmailTemplate = (template: string, data: any): { subject: string; htmlBody: string } => {
+  let subject = 'Test Email from CheckCle';
+  let htmlBody = `
+    <html>
+      <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+        <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+          <h2 style="color: #2563eb;">Test Email</h2>
+          <p>This is a test email from your monitoring system.</p>
+          <p>If you received this email, your SMTP configuration is working correctly.</p>
+          <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
+          <p style="font-size: 12px; color: #666;">
+            Sent from CheckCle Monitoring System<br>
+            Template: ${template}<br>
+            ${data.collection ? `Collection: ${data.collection}` : ''}
+          </p>
+        </div>
+      </body>
+    </html>
+  `;
+
+  switch (template) {
+    case 'verification':
+      subject = 'Email Verification Test - CheckCle';
+      htmlBody = `
+        <html>
+          <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+            <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+              <h2 style="color: #10b981;">Email Verification Test</h2>
+              <p>This is a test of the email verification template.</p>
+              <p>If you received this email, your SMTP configuration is working correctly.</p>
+              <div style="background: #f3f4f6; padding: 15px; border-radius: 5px; margin: 20px 0;">
+                <p><strong>Template:</strong> Verification Email</p>
+                <p><strong>Collection:</strong> ${data.collection || '_superusers'}</p>
+              </div>
+              <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
+              <p style="font-size: 12px; color: #666;">Sent from CheckCle Monitoring System</p>
+            </div>
+          </body>
+        </html>
+      `;
+      break;
+    case 'password-reset':
+      subject = 'Password Reset Test - CheckCle';
+      htmlBody = `
+        <html>
+          <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+            <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+              <h2 style="color: #f59e0b;">Password Reset Test</h2>
+              <p>This is a test of the password reset template.</p>
+              <p>If you received this email, your SMTP configuration is working correctly.</p>
+              <div style="background: #f3f4f6; padding: 15px; border-radius: 5px; margin: 20px 0;">
+                <p><strong>Template:</strong> Password Reset Email</p>
+                <p><strong>Collection:</strong> ${data.collection || '_superusers'}</p>
+              </div>
+              <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
+              <p style="font-size: 12px; color: #666;">Sent from CheckCle Monitoring System</p>
+            </div>
+          </body>
+        </html>
+      `;
+      break;
+    case 'email-change':
+      subject = 'Email Change Confirmation Test - CheckCle';
+      htmlBody = `
+        <html>
+          <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+            <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+              <h2 style="color: #8b5cf6;">Email Change Confirmation Test</h2>
+              <p>This is a test of the email change confirmation template.</p>
+              <p>If you received this email, your SMTP configuration is working correctly.</p>
+              <div style="background: #f3f4f6; padding: 15px; border-radius: 5px; margin: 20px 0;">
+                <p><strong>Template:</strong> Email Change Confirmation</p>
+              </div>
+              <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
+              <p style="font-size: 12px; color: #666;">Sent from CheckCle Monitoring System</p>
+            </div>
+          </body>
+        </html>
+      `;
+      break;
+  }
+
+  return { subject, htmlBody };
+};
+
+export const testEmail = async (data: any): Promise<SettingsApiResponse> => {
+  console.log('testEmail function called with data:', data);
+
+  try {
+    // Validate required fields
+    if (!data || typeof data !== 'object') {
+      console.log('Invalid request data - not object');
+      return {
+        status: 200,
+        json: { success: false, message: 'Invalid request data' },
+      };
+    }
+
+    if (!data.email || typeof data.email !== 'string') {
+      console.log('Email address missing or invalid type');
+      return {
+        status: 200,
+        json: { success: false, message: 'Email address is required and must be a string' },
+      };
+    }
+
+    if (!validateEmail(data.email)) {
+      console.log('Invalid email format:', data.email);
+      return {
+        status: 200,
+        json: { success: false, message: 'Invalid email address format' },
+      };
+    }
+
+    console.log('Email validation passed for:', data.email);
+
+    const headers = getAuthHeaders();
+    const baseUrl = getBaseUrl();
+
+    // Get current SMTP settings first
+    console.log('Fetching SMTP settings from:', `${baseUrl}/api/settings`);
+    
+    const settingsResponse = await fetch(`${baseUrl}/api/settings`, {
+      method: 'GET',
+      headers,
+    });
+
+    if (!settingsResponse.ok) {
+      console.error('Failed to get SMTP settings, status:', settingsResponse.status);
+      return {
+        status: 200,
+        json: { success: false, message: 'Failed to get SMTP settings' },
+      };
+    }
+
+    const settingsData = await settingsResponse.json();
+    console.log('Retrieved settings data:', settingsData);
+    
+    const smtpSettings = settingsData?.smtp;
+
+    if (!smtpSettings || !smtpSettings.enabled) {
+      console.log('SMTP not enabled or missing');
+      return {
+        status: 200,
+        json: { success: false, message: 'SMTP is not enabled. Please enable and configure SMTP settings first.' },
+      };
+    }
+
+    if (!smtpSettings.host || !smtpSettings.username) {
+      console.log('SMTP configuration incomplete - missing host or username');
+      return {
+        status: 200,
+        json: { success: false, message: 'SMTP configuration is incomplete. Please check host and username.' },
+      };
+    }
+
+    // Create test email content based on template
+    const template = data.template || 'basic';
+    const { subject, htmlBody } = createEmailTemplate(template, data);
+
+    console.log('Test email prepared successfully:', {
+      to: data.email,
+      subject: subject,
+      template: template,
+      smtpHost: smtpSettings.host,
+      smtpPort: smtpSettings.port || 587
+    });
+
+    // Send actual email using the correct PocketBase API endpoint
+    console.log('Sending actual email via PocketBase...');
+    
+    // Fix the payload structure to match PocketBase API expectations
+    const emailPayload = {
+      email: data.email,  // Use 'email' instead of 'to'
+      template: template, // Add the template field
+      subject: subject,
+      html: htmlBody,
+    };
+
+    console.log('Email payload:', emailPayload);
+
+    const emailResponse = await fetch(`${baseUrl}/api/settings/test/email`, {
+      method: 'POST',
+      headers: {
+        ...headers,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(emailPayload),
+    });
+
+    if (!emailResponse.ok) {
+      console.error('Failed to send email, status:', emailResponse.status);
+      const errorText = await emailResponse.text();
+      console.error('Email send error response:', errorText);
+      return {
+        status: 200,
+        json: { success: false, message: 'Failed to send email. Please check your SMTP configuration.' },
+      };
+    }
+
+    // Handle 204 No Content response (successful but no body)
+    if (emailResponse.status === 204) {
+      console.log('Email sent successfully (204 No Content)');
+      return {
+        status: 200,
+        json: {
+          success: true,
+          message: `Test email sent successfully to ${data.email}`,
+        },
+      };
+    }
+
+    // For other successful responses, try to parse JSON
+    const emailResult = await emailResponse.json();
+    console.log('Email sent successfully:', emailResult);
+
+    return {
+      status: 200,
+      json: {
+        success: true,
+        message: `Test email sent successfully to ${data.email}`,
+      },
+    };
+
+  } catch (error) {
+    console.error('Error in testEmail function:', error);
+    return {
+      status: 200,
+      json: { 
+        success: false, 
+        message: error instanceof Error ? error.message : 'Failed to send test email. Please check your SMTP configuration.'
+      },
+    };
+  }
+};

application/src/api/settings/actions/testEmailConnection.ts

@@ -0,0 +1,31 @@
+
+import { getAuthHeaders, getBaseUrl } from '../utils';
+import { SettingsApiResponse } from '../types';
+
+export const testEmailConnection = async (data: any): Promise<SettingsApiResponse> => {
+  try {
+    const response = await fetch(`${getBaseUrl()}/api/settings/test-email`, {
+      method: 'POST',
+      headers: getAuthHeaders(),
+      body: JSON.stringify(data),
+    });
+
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+
+    const result = await response.json();
+    return {
+      status: 200,
+      json: {
+        success: result.success || false,
+        message:
+          result.message || (result.success ? 'Connection successful' : 'Connection failed'),
+      },
+    };
+  } catch (error) {
+    console.error('Error testing email connection:', error);
+    return {
+      status: 500,
+      json: { success: false, message: 'Failed to test email connection' },
+    };
+  }
+};

application/src/api/settings/actions/updateSettings.ts

@@ -0,0 +1,38 @@
+
+import { getAuthHeaders, getBaseUrl } from '../utils';
+import { SettingsApiResponse } from '../types';
+
+export const updateSettings = async (data: any): Promise<SettingsApiResponse> => {
+  try {
+    const headers = getAuthHeaders();
+    const baseUrl = getBaseUrl();
+
+    let response = await fetch(`${baseUrl}/api/settings`, {
+      method: 'PATCH',
+      headers,
+      body: JSON.stringify(data),
+    });
+
+    if (!response.ok && (response.status === 404 || response.status === 405)) {
+      response = await fetch(`${baseUrl}/api/settings`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(data),
+      });
+    }
+
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+
+    const updatedSettings = await response.json();
+    return {
+      status: 200,
+      json: { success: true, data: updatedSettings },
+    };
+  } catch (error) {
+    console.error('Error updating settings:', error);
+    return {
+      status: 500,
+      json: { success: false, message: 'Failed to update settings' },
+    };
+  }
+};

application/src/api/settings/index.ts

@@ -1,113 +1,40 @@
-import { pb, getCurrentEndpoint } from '@/lib/pocketbase';
 
-const settingsApi = async (body: any) => {
+import { getSettings } from './actions/getSettings';
-  try {
+import { updateSettings } from './actions/updateSettings';
-    const { action, data } = body;
+import { testEmailConnection } from './actions/testEmailConnection';
-    console.log('Settings API called with action:', action, 'data:', data);
+import { testEmail } from './actions/testEmail';
 
-    const authToken = pb.authStore.token;
+/**
-    const headers: Record<string, string> = {
+ * Settings API handler
-      'Content-Type': 'application/json',
+ */
-    };
+const settingsApi = async (body: any, path?: string) => {
+ // console.log('Settings API called with path:', path, 'body:', body);
   
-    if (authToken) {
+  // Handle test email endpoint specifically
-      headers['Authorization'] = `Bearer ${authToken}`;
+  if (path === '/api/settings/test/email') {
+    console.log('Handling test email request');
+    return await testEmail(body);
   }
   
-    const baseUrl = getCurrentEndpoint();
+  // Handle regular settings API with action-based routing
+  const action = body?.action;
+ // console.log('Settings API called with action:', action, 'data:', body?.data);
 
   switch (action) {
     case 'getSettings':
-        try {
+      return await getSettings();
-          const response = await fetch(`${baseUrl}/api/settings`, {
-            method: 'GET',
-            headers,
-          });
-
-          if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-
-          const settings = await response.json();
-          return {
-            status: 200,
-            json: { success: true, data: settings },
-          };
-        } catch (error) {
-          console.error('Error fetching settings:', error);
-          return {
-            status: 500,
-            json: { success: false, message: 'Failed to fetch settings' },
-          };
-        }
     
     case 'updateSettings':
-        try {
+      return await updateSettings(body.data);
-          let response = await fetch(`${baseUrl}/api/settings`, {
-            method: 'PATCH',
-            headers,
-            body: JSON.stringify(data),
-          });
-
-          if (!response.ok && (response.status === 404 || response.status === 405)) {
-            response = await fetch(`${baseUrl}/api/settings`, {
-              method: 'POST',
-              headers,
-              body: JSON.stringify(data),
-            });
-          }
-
-          if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-
-          const updatedSettings = await response.json();
-          return {
-            status: 200,
-            json: { success: true, data: updatedSettings },
-          };
-        } catch (error) {
-          console.error('Error updating settings:', error);
-          return {
-            status: 500,
-            json: { success: false, message: 'Failed to update settings' },
-          };
-        }
     
     case 'testEmailConnection':
-        try {
+      return await testEmailConnection(body.data);
-          const response = await fetch(`${baseUrl}/api/settings/test-email`, {
-            method: 'POST',
-            headers,
-            body: JSON.stringify(data),
-          });
-
-          if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-
-          const result = await response.json();
-          return {
-            status: 200,
-            json: {
-              success: result.success || false,
-              message:
-                result.message || (result.success ? 'Connection successful' : 'Connection failed'),
-            },
-          };
-        } catch (error) {
-          console.error('Error testing email connection:', error);
-          return {
-            status: 500,
-            json: { success: false, message: 'Failed to test email connection' },
-          };
-        }
     
     default:
+      console.error('Unknown action:', action);
       return {
         status: 400,
-          json: { success: false, message: 'Invalid action' },
+        json: { success: false, message: 'Unknown action' },
-        };
-    }
-  } catch (error) {
-    console.error('Unexpected error in settingsApi:', error);
-    return {
-      status: 500,
-      json: { success: false, message: 'Internal server error' },
       };
   }
 };

application/src/api/settings/types.ts

@@ -0,0 +1,25 @@
+
+export interface SettingsApiRequest {
+  action: string;
+  data?: any;
+}
+
+export interface SettingsApiResponse {
+  status: number;
+  json: {
+    success: boolean;
+    data?: any;
+    message?: string;
+  };
+}
+
+export interface SmtpSettings {
+  enabled?: boolean;
+  host?: string;
+  port?: number;
+  username?: string;
+  password?: string;
+  authMethod?: string;
+  tls?: boolean;
+  localName?: string;
+}

application/src/api/settings/utils.ts

@@ -0,0 +1,24 @@
+
+import { pb, getCurrentEndpoint } from '@/lib/pocketbase';
+
+export const getAuthHeaders = (): Record<string, string> => {
+  const authToken = pb.authStore.token;
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+
+  if (authToken) {
+    headers['Authorization'] = `Bearer ${authToken}`;
+  }
+
+  return headers;
+};
+
+export const getBaseUrl = (): string => {
+  return getCurrentEndpoint();
+};
+
+export const validateEmail = (email: string): boolean => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};

application/src/components/ErrorBoundary.tsx

@@ -0,0 +1,49 @@
+
+import React from 'react';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-background">
+          <div className="text-center p-6">
+            <h2 className="text-2xl font-bold text-destructive mb-4">Something went wrong</h2>
+            <p className="text-muted-foreground mb-4">
+              {this.state.error?.message || 'An unexpected error occurred'}
+            </p>
+            <button 
+              onClick={() => window.location.reload()}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+            >
+              Reload Page
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

application/src/components/auth/ForgotPasswordDialog.tsx

@@ -0,0 +1,259 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { toast } from '@/components/ui/use-toast';
+import { Mail, ArrowLeft } from 'lucide-react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { getCurrentEndpoint } from '@/lib/pocketbase';
+
+interface ForgotPasswordDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ForgotPasswordDialog({ open, onOpenChange }: ForgotPasswordDialogProps) {
+  const [step, setStep] = useState<'request' | 'confirm'>('request');
+  const [email, setEmail] = useState('');
+  const [token, setToken] = useState('');
+  const [password, setPassword] = useState('');
+  const [passwordConfirm, setPasswordConfirm] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { t } = useLanguage();
+
+  const handleRequestReset = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const apiUrl = getCurrentEndpoint();
+      const response = await fetch(`${apiUrl}/api/collections/_superusers/request-password-reset`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.message || 'Failed to send reset email');
+      }
+      
+      toast({
+        title: "Reset Email Sent",
+        description: "Please check your email for password reset instructions.",
+      });
+      setStep('confirm');
+    } catch (error) {
+      console.error('Password reset request error:', error);
+      toast({
+        variant: "destructive",
+        title: "Reset Failed",
+        description: error instanceof Error ? error.message : "Failed to send reset email. Please try again.",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleConfirmReset = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (password !== passwordConfirm) {
+      toast({
+        variant: "destructive",
+        title: "Password Mismatch",
+        description: "Passwords do not match. Please try again.",
+      });
+      return;
+    }
+
+    if (password.length < 6) {
+      toast({
+        variant: "destructive",
+        title: "Password Too Short",
+        description: "Password must be at least 6 characters long.",
+      });
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const apiUrl = getCurrentEndpoint();
+      const response = await fetch(`${apiUrl}/api/collections/_superusers/confirm-password-reset`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ 
+          token, 
+          password, 
+          passwordConfirm 
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.message || 'Failed to reset password');
+      }
+
+      toast({
+        title: "Password Reset Successful",
+        description: "Your password has been reset successfully. You can now log in with your new password.",
+      });
+      onOpenChange(false);
+      // Reset form state
+      setStep('request');
+      setEmail('');
+      setToken('');
+      setPassword('');
+      setPasswordConfirm('');
+    } catch (error) {
+      console.error('Password reset confirmation error:', error);
+      toast({
+        variant: "destructive",
+        title: "Reset Failed",
+        description: error instanceof Error ? error.message : "Failed to reset password. Please try again.",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    onOpenChange(false);
+    // Reset form state when closing
+    setStep('request');
+    setEmail('');
+    setToken('');
+    setPassword('');
+    setPasswordConfirm('');
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {step === 'request' ? 'Reset Password' : 'Confirm Password Reset'}
+          </DialogTitle>
+          <DialogDescription>
+            {step === 'request' 
+              ? 'Enter your email address and we\'ll send you a reset link.' 
+              : 'Enter the reset token from your email and your new password.'
+            }
+          </DialogDescription>
+        </DialogHeader>
+
+        {step === 'request' ? (
+          <form onSubmit={handleRequestReset} className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-foreground" htmlFor="reset-email">
+                Email Address
+              </label>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                  <Mail className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <Input
+                  id="reset-email"
+                  placeholder="your.email@provider.com"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  className="pl-10"
+                />
+              </div>
+            </div>
+            
+            <div className="flex gap-2">
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={handleClose}
+                className="flex-1"
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit" 
+                disabled={loading || !email}
+                className="flex-1 bg-emerald-500 hover:bg-emerald-600"
+              >
+                {loading ? 'Sending...' : 'Send Reset Email'}
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <form onSubmit={handleConfirmReset} className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-foreground" htmlFor="reset-token">
+                Reset Token
+              </label>
+              <Input
+                id="reset-token"
+                placeholder="Enter token from email"
+                type="text"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-foreground" htmlFor="new-password">
+                New Password
+              </label>
+              <Input
+                id="new-password"
+                placeholder="••••••••••••"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                minLength={6}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-foreground" htmlFor="confirm-password">
+                Confirm Password
+              </label>
+              <Input
+                id="confirm-password"
+                placeholder="••••••••••••"
+                type="password"
+                value={passwordConfirm}
+                onChange={(e) => setPasswordConfirm(e.target.value)}
+                required
+                minLength={6}
+              />
+            </div>
+            
+            <div className="flex gap-2">
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={() => setStep('request')}
+                className="flex-1"
+              >
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                Back
+              </Button>
+              <Button 
+                type="submit" 
+                disabled={loading || !token || !password || !passwordConfirm}
+                className="flex-1 bg-emerald-500 hover:bg-emerald-600"
+              >
+                {loading ? 'Resetting...' : 'Reset Password'}
+              </Button>
+            </div>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

application/src/components/auth/ProtectedRoute.tsx

@@ -0,0 +1,16 @@
+
+import { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+import { authService } from '@/services/authService';
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+}
+
+export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  if (!authService.isAuthenticated()) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
+};

application/src/components/dashboard/Header.tsx

@@ -53,7 +53,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 +66,7 @@ export const Header = ({
     } else {
       avatarUrl = currentUser.avatar;
     }
-    console.log("Final avatar URL:", avatarUrl);
+   // console.log("Final avatar URL:", avatarUrl);
   }
 
   return (
@@ -129,6 +129,9 @@ export const Header = ({
             <DropdownMenuItem onClick={() => setLanguage("de")} className={language === "de" ? "bg-accent" : ""}>
               {t("Deutsch")}
             </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setLanguage("ja")} className={language === "ja" ? "bg-accent" : ""}>
+              {t("japanese")}
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
         

application/src/components/dashboard/Sidebar.tsx

@@ -1,141 +1,28 @@
 
-import { Globe, Boxes, Radar, Calendar, BarChart2, LineChart, FileText, Settings, User, UserCog, Bell, FileClock, Database, RefreshCw, Info, ChevronDown, BookOpen } from "lucide-react";
+import React from "react";
 import { useTheme } from "@/contexts/ThemeContext";
-import { Link, useLocation } from "react-router-dom";
+import { SidebarHeader } from "./sidebar/SidebarHeader";
-import { useState, useEffect } from "react";
+import { MainNavigation } from "./sidebar/MainNavigation";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { SettingsPanel } from "./sidebar/SettingsPanel";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { useLanguage } from "@/contexts/LanguageContext";
 
 interface SidebarProps {
   collapsed: boolean;
 }
 
-export const Sidebar = ({
+export const Sidebar = ({ collapsed }: SidebarProps) => {
-  collapsed
+  const { theme } = useTheme();
-}: SidebarProps) => {
-  const {
-    theme
-  } = useTheme();
-  const {
-    t
-  } = useLanguage();
-  const location = useLocation();
-  const [activeSettingsItem, setActiveSettingsItem] = useState<string | null>("general");
-  const [settingsPanelOpen, setSettingsPanelOpen] = useState(false);
   
-  // Update active settings item based on URL
+  return (
-  useEffect(() => {
+    <div 
-    if (location.pathname === '/settings') {
+      className={`
-      const params = new URLSearchParams(location.search);
+        ${theme === 'dark' ? 'bg-[#121212] border-[#1e1e1e]' : 'bg-sidebar border-sidebar-border'} 
-      const panel = params.get('panel');
+        border-r flex flex-col h-full
-      if (panel) {
+        ${collapsed ? 'w-16' : 'w-64'}
-        setActiveSettingsItem(panel);
+      `}
-      }
+    >
-    }
+      <SidebarHeader collapsed={collapsed} />
-  }, [location]);
+      <MainNavigation collapsed={collapsed} />
-  
+      <SettingsPanel collapsed={collapsed} />
-  const handleSettingsItemClick = (item: string) => {
-    setActiveSettingsItem(item);
-  };
-  
-  const getMenuItemClasses = (isActive: boolean) => {
-    return `p-2 ${isActive ? theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent'}`} rounded-lg flex items-center`;
-  };
-
-  // New larger icon size for the main menu
-  const mainIconSize = "h-6 w-6";
-  
-  return <div className={`${collapsed ? 'w-16' : 'w-64'} ${theme === 'dark' ? 'bg-[#121212] border-[#1e1e1e]' : 'bg-sidebar border-sidebar-border'} border-r flex flex-col transition-all duration-300 h-full`}>
-      <div className={`p-4 ${theme === 'dark' ? 'border-[#1e1e1e]' : 'border-sidebar-border'} border-b flex items-center ${collapsed ? 'justify-center' : ''}`}>
-        <div className="h-8 w-8 bg-green-500 rounded flex items-center justify-center mr-2">
-          <span className="text-white font-bold">C</span>
     </div>
-        {!collapsed && <h1 className="text-xl font-semibold">CheckCle App</h1>}
+  );
-      </div>
-      
-      <nav className="my-2 mx-1 py-1 px-1">
-        <Link to="/dashboard" className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg ${location.pathname === '/dashboard' ? theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
-          <Globe className={`${mainIconSize} text-purple-400`} />
-          {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("uptimeMonitoring")}</span>}
-        </Link>
-        <div className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
-          <Boxes className={`${mainIconSize} text-blue-400`} />
-          {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("instanceMonitoring")}</span>}
-        </div>
-        <Link to="/ssl-domain" className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg ${location.pathname === '/ssl-domain' ? theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
-          <Radar className={`${mainIconSize} text-cyan-400`} />
-          {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("sslDomain")}</span>}
-        </Link>
-        <Link to="/schedule-incident" className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg ${location.pathname === '/schedule-incident' ? theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
-          <Calendar className={`${mainIconSize} text-emerald-400`} />
-          {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("scheduleIncident")}</span>}
-        </Link>
-        <div className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
-          <BarChart2 className={`${mainIconSize} text-amber-400`} />
-          {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("operationalPage")}</span>}
-        </div>
-        <div className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
-          <LineChart className={`${mainIconSize} text-rose-400`} />
-          {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("reports")}</span>}
-        </div>
-        <div className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
-          <FileText className={`${mainIconSize} text-indigo-400`} />
-          {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("apiDocumentation")}</span>}
-        </div>
-      </nav>
-      
-      {!collapsed && <div className={`flex-1 flex flex-col border-t ${theme === 'dark' ? 'border-[#1e1e1e] bg-[#121212]' : 'border-sidebar-border bg-sidebar'} p-4`}>
-          <Collapsible open={settingsPanelOpen} onOpenChange={setSettingsPanelOpen} className="w-full flex flex-col flex-1">
-            <CollapsibleTrigger className={`flex items-center justify-between w-full mb-4 px-2 py-2 rounded-lg ${theme === 'dark' ? 'hover:bg-[#1a1a1a]' : 'hover:bg-sidebar-accent'}`}>
-              <div className="flex items-center">
-                <span className="font-medium tracking-wide">{t("settingPanel")}</span>
-              </div>
-              <div className="flex items-center">
-                <Settings className="h-4 w-4 mr-1" />
-                <ChevronDown className={`h-4 w-4 transition-transform duration-200 ${settingsPanelOpen ? 'rotate-180' : ''}`} />
-              </div>
-            </CollapsibleTrigger>
-            
-            <CollapsibleContent className={`${theme === 'dark' ? 'bg-[#121212]' : 'bg-sidebar'} flex-1 flex flex-col`}>
-              <div className="max-h-[300px] overflow-y-auto custom-scrollbar relative pr-1">
-                <ScrollArea className="h-full">
-                  <div className="space-y-2 pr-4">
-                    <Link to={`/settings?panel=general`} className={getMenuItemClasses(activeSettingsItem === 'general')} onClick={() => handleSettingsItemClick('general')}>
-                      <Settings className="h-4 w-4 mr-2" />
-                      <span className="text-sm">{t("generalSettings")}</span>
-                    </Link>
-                    <Link to={`/settings?panel=users`} className={getMenuItemClasses(activeSettingsItem === 'users')} onClick={() => handleSettingsItemClick('users')}>
-                      <User className="h-4 w-4 mr-2" />
-                      <span className="text-sm">{t("userManagement")}</span>
-                    </Link>
-                    <Link to={`/settings?panel=notifications`} className={getMenuItemClasses(activeSettingsItem === 'notifications')} onClick={() => handleSettingsItemClick('notifications')}>
-                      <Bell className="h-4 w-4 mr-2" />
-                      <span className="text-sm">{t("notificationSettings")}</span>
-                    </Link>
-                    <Link to={`/settings?panel=templates`} className={getMenuItemClasses(activeSettingsItem === 'templates')} onClick={() => handleSettingsItemClick('templates')}>
-                      <BookOpen className="h-4 w-4 mr-2" />
-                      <span className="text-sm">{t("alertsTemplates")}</span>
-                    </Link>
-                    <div className={getMenuItemClasses(false)}>
-                      <Database className="h-4 w-4 mr-2" />
-                      <span className="text-sm">{t("dataRetention")}</span>
-                    </div>
-                    <Link to={`/settings?panel=about`} className={getMenuItemClasses(activeSettingsItem === 'about')} onClick={() => handleSettingsItemClick('about')}>
-                      <Info className="h-4 w-4 mr-2" />
-                      <span className="text-sm">{t("aboutSystem")}</span>
-                    </Link>
-                  </div>
-                </ScrollArea>
-              </div>
-            </CollapsibleContent>
-          </Collapsible>
-        </div>}
-      
-      {collapsed && <div className={`border-t ${theme === 'dark' ? 'border-[#1e1e1e] bg-[#121212]' : 'border-sidebar-border bg-sidebar'} p-4 flex justify-center`}>
-          <Link to="/settings">
-            <Settings className={`${mainIconSize} text-purple-400`} />
-          </Link>
-        </div>}
-    </div>;
 };

application/src/components/dashboard/StatusCards.tsx

@@ -27,15 +27,15 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
         } relative z-10`}
         style={{
           background: theme === 'dark' 
-            ? "linear-gradient(135deg, rgba(67, 160, 71, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%)" 
+            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%)" 
-            : "linear-gradient(135deg, #43a047 0%, #66bb6a 100%)"
+            : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #66bb6a 100%)"
         }}
       >
         {/* Grid Pattern Overlay */}
         <div className="absolute inset-0 z-0 opacity-10">
           <div className="w-full h-full" 
             style={{ 
-              backgroundImage: `linear-gradient(#fff 1px, transparent 1px), 
+              backgroundImage: `linear-gradient(#000 1px, transparent 1px), 
                                 linear-gradient(90deg, #fff 1px, transparent 1px)`,
               backgroundSize: '20px 20px'
             }}
@@ -59,15 +59,15 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
         } relative z-10`}
         style={{
           background: theme === 'dark'
-            ? "linear-gradient(135deg, rgba(229, 57, 53, 0.8) 0%, rgba(239, 83, 80, 0.6) 100%)"
+            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(239, 83, 80, 0.6) 100%)"
-            : "linear-gradient(135deg, #e53935 0%, #ef5350 100%)"
+            : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #ef5350 100%)"
         }}
       >
         {/* Grid Pattern Overlay */}
         <div className="absolute inset-0 z-0 opacity-10">
           <div className="w-full h-full" 
             style={{ 
-              backgroundImage: `linear-gradient(#fff 1px, transparent 1px), 
+              backgroundImage: `linear-gradient(#000 1px, transparent 1px), 
                                 linear-gradient(90deg, #fff 1px, transparent 1px)`,
               backgroundSize: '20px 20px'
             }}
@@ -91,15 +91,15 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
         } relative z-10`}
         style={{
           background: theme === 'dark'
-            ? "linear-gradient(135deg, rgba(25, 118, 210, 0.8) 0%, rgba(66, 165, 245, 0.6) 100%)"
+            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(66, 165, 245, 0.6) 100%)"
-            : "linear-gradient(135deg, #1976d2 0%, #42a5f5 100%)"
+            : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #42a5f5 100%)"
         }}
       >
         {/* Grid Pattern Overlay */}
         <div className="absolute inset-0 z-0 opacity-10">
           <div className="w-full h-full" 
             style={{ 
-              backgroundImage: `linear-gradient(#fff 1px, transparent 1px), 
+              backgroundImage: `linear-gradient(#000 1px, transparent 1px), 
                                 linear-gradient(90deg, #fff 1px, transparent 1px)`,
               backgroundSize: '20px 20px'
             }}
@@ -123,15 +123,15 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
         } relative z-10`}
         style={{
           background: theme === 'dark'
-            ? "linear-gradient(135deg, rgba(255, 152, 0, 0.8) 0%, rgba(255, 183, 77, 0.6) 100%)"
+            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(255, 183, 77, 0.6) 100%)"
-            : "linear-gradient(135deg, #ff9800 0%, #ffb74d 100%)"
+            : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #ffb74d 100%)"
         }}
       >
         {/* Grid Pattern Overlay */}
         <div className="absolute inset-0 z-0 opacity-10">
           <div className="w-full h-full" 
             style={{ 
-              backgroundImage: `linear-gradient(#fff 1px, transparent 1px), 
+              backgroundImage: `linear-gradient(#000 1px, transparent 1px), 
                                 linear-gradient(90deg, #fff 1px, transparent 1px)`,
               backgroundSize: '20px 20px'
             }}

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

@@ -0,0 +1,27 @@
+
+import React from "react";
+import { MenuItem } from "./MenuItem";
+import { mainMenuItems } from "./navigationData";
+
+interface MainNavigationProps {
+  collapsed: boolean;
+}
+
+export const MainNavigation: React.FC<MainNavigationProps> = ({ collapsed }) => {
+  return (
+    <nav className="my-2 mx-1 py-1 px-1">
+      {mainMenuItems.map((item) => (
+        <MenuItem
+          key={item.id}
+          id={item.id}
+          path={item.path}
+          icon={item.icon}
+          translationKey={item.translationKey}
+          color={item.color}
+          hasNavigation={item.hasNavigation}
+          collapsed={collapsed}
+        />
+      ))}
+    </nav>
+  );
+};

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

@@ -0,0 +1,64 @@
+
+import React from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { LucideIcon } from "lucide-react";
+
+interface MenuItemProps {
+  id: string;
+  path: string | null;
+  icon: LucideIcon;
+  translationKey: string;
+  color: string;
+  hasNavigation: boolean;
+  collapsed: boolean;
+}
+
+export const MenuItem: React.FC<MenuItemProps> = ({
+  id,
+  path,
+  icon: Icon,
+  translationKey,
+  color,
+  hasNavigation,
+  collapsed
+}) => {
+  const { theme } = useTheme();
+  const { t } = useLanguage();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    if (hasNavigation && path) {
+      navigate(path, { replace: false });
+    }
+  };
+
+  const isActive = path && location.pathname === path;
+  const mainIconSize = "h-6 w-6";
+
+  return (
+    <div 
+      className={`
+        ${collapsed ? 'p-3' : 'p-2 pl-3'} 
+        mb-1 rounded-lg 
+        ${isActive ? (theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent') : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} 
+        flex items-center 
+        ${collapsed ? 'justify-center' : ''} 
+        cursor-pointer
+      `}
+      onClick={handleClick}
+    >
+      <Icon className={`${mainIconSize} ${color}`} />
+      {!collapsed && (
+        <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">
+          {t(translationKey)}
+        </span>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,100 @@
+
+import React, { useState, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { Settings, ChevronDown } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { settingsMenuItems } from "./navigationData";
+
+interface SettingsPanelProps {
+  collapsed: boolean;
+}
+
+export const SettingsPanel: React.FC<SettingsPanelProps> = ({ collapsed }) => {
+  const { theme } = useTheme();
+  const { t } = useLanguage();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [activeSettingsItem, setActiveSettingsItem] = useState<string | null>("general");
+  const [settingsPanelOpen, setSettingsPanelOpen] = useState(false);
+
+  // Update active settings item based on URL
+  useEffect(() => {
+    if (location.pathname === '/settings') {
+      const params = new URLSearchParams(location.search);
+      const panel = params.get('panel');
+      if (panel) {
+        setActiveSettingsItem(panel);
+      }
+    }
+  }, [location]);
+
+  const handleSettingsItemClick = (item: string) => {
+    setActiveSettingsItem(item);
+  };
+
+  const handleMenuItemClick = (path: string, event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    // Use navigate instead of window.location to prevent full page reload
+    navigate(path, { replace: false });
+  };
+
+  const getMenuItemClasses = (isActive: boolean) => {
+    return `p-2 ${isActive ? theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent'}`} rounded-lg flex items-center`;
+  };
+
+  if (collapsed) {
+    const mainIconSize = "h-6 w-6";
+    return (
+      <div className={`border-t ${theme === 'dark' ? 'border-[#1e1e1e] bg-[#121212]' : 'border-sidebar-border bg-sidebar'} p-4 flex justify-center`}>
+        <div 
+          onClick={(e) => handleMenuItemClick('/settings', e)} 
+          className="cursor-pointer"
+        >
+          <Settings className={`${mainIconSize} text-purple-400`} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex-1 flex flex-col border-t ${theme === 'dark' ? 'border-[#1e1e1e] bg-[#121212]' : 'border-sidebar-border bg-sidebar'} p-4`}>
+      <Collapsible open={settingsPanelOpen} onOpenChange={setSettingsPanelOpen} className="w-full flex flex-col flex-1">
+        <CollapsibleTrigger className={`flex items-center justify-between w-full mb-4 px-2 py-2 rounded-lg ${theme === 'dark' ? 'hover:bg-[#1a1a1a]' : 'hover:bg-sidebar-accent'}`}>
+          <div className="flex items-center">
+            <span className="font-medium tracking-wide">{t("settingPanel")}</span>
+          </div>
+          <div className="flex items-center">
+            <Settings className="h-4 w-4 mr-1" />
+            <ChevronDown className={`h-4 w-4 transition-transform duration-200 ${settingsPanelOpen ? 'rotate-180' : ''}`} />
+          </div>
+        </CollapsibleTrigger>
+        
+        <CollapsibleContent className={`${theme === 'dark' ? 'bg-[#121212]' : 'bg-sidebar'} flex-1 flex flex-col`}>
+          <div className="max-h-[300px] overflow-y-auto custom-scrollbar relative pr-1">
+            <ScrollArea className="h-full">
+              <div className="space-y-2 pr-4">
+                {settingsMenuItems.map((item) => (
+                  <div 
+                    key={item.id}
+                    className={getMenuItemClasses(activeSettingsItem === item.id)} 
+                    onClick={(e) => {
+                      handleMenuItemClick(`/settings?panel=${item.id}`, e);
+                      handleSettingsItemClick(item.id);
+                    }}
+                  >
+                    <item.icon className="h-4 w-4 mr-2" />
+                    <span className="text-sm">{t(item.translationKey)}</span>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};

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

@@ -0,0 +1,24 @@
+
+import React from "react";
+import { useTheme } from "@/contexts/ThemeContext";
+
+interface SidebarHeaderProps {
+  collapsed: boolean;
+}
+
+export const SidebarHeader: React.FC<SidebarHeaderProps> = ({ collapsed }) => {
+  const { theme } = useTheme();
+
+  return (
+    <div className={`p-4 ${theme === 'dark' ? 'border-[#1e1e1e]' : 'border-sidebar-border'} border-b flex items-center ${collapsed ? 'justify-center' : ''}`}>
+      <div className="h-8 w-8 bg-gray-600 rounded flex items-center justify-center mr-2">
+        <img
+          src="/favicon_sidebar.ico"
+          alt="CheckCle"
+          className="h-6 w-6"
+        />
+      </div>
+      {!collapsed && <h1 className="text-xl font-semibold">CheckCle App</h1>}
+    </div>
+  );
+};

application/src/components/dashboard/sidebar/index.ts

@@ -0,0 +1,6 @@
+
+export { SidebarHeader } from './SidebarHeader';
+export { MainNavigation } from './MainNavigation';
+export { MenuItem } from './MenuItem';
+export { SettingsPanel } from './SettingsPanel';
+export { mainMenuItems, settingsMenuItems } from './navigationData';

application/src/components/dashboard/sidebar/navigationData.ts

@@ -0,0 +1,94 @@
+
+import { Globe, Boxes, Layers, Calendar, BarChart2, LineChart, MapPin, Settings, User, Bell, Database, Info, BookOpen } from "lucide-react";
+
+export const mainMenuItems = [
+  {
+    id: 'uptime-monitoring',
+    path: '/dashboard',
+    icon: Globe,
+    translationKey: 'uptimeMonitoring',
+    color: 'text-purple-400',
+    hasNavigation: true
+  },
+  {
+    id: 'instance-monitoring',
+    path: '/instance-monitoring',
+    icon: Boxes,
+    translationKey: 'instanceMonitoring',
+    color: 'text-blue-400',
+    hasNavigation: true
+  },
+  {
+    id: 'ssl-domain',
+    path: '/ssl-domain',
+    icon: Layers,
+    translationKey: 'sslDomain',
+    color: 'text-cyan-400',
+    hasNavigation: true
+  },
+  {
+    id: 'schedule-incident',
+    path: '/schedule-incident',
+    icon: Calendar,
+    translationKey: 'scheduleIncident',
+    color: 'text-emerald-400',
+    hasNavigation: true
+  },
+  {
+    id: 'operational-page',
+    path: '/operational-page',
+    icon: BarChart2,
+    translationKey: 'operationalPage',
+    color: 'text-amber-400',
+    hasNavigation: true
+  },
+  {
+    id: 'regional-monitoring',
+    path: '/regional-monitoring',
+    icon: MapPin,
+    translationKey: 'regionalMonitoring',
+    color: 'text-indigo-400',
+    hasNavigation: true
+  },
+  {
+    id: 'reports',
+    path: null,
+    icon: LineChart,
+    translationKey: 'reports',
+    color: 'text-rose-400',
+    hasNavigation: false
+  }
+];
+
+export const settingsMenuItems = [
+  {
+    id: 'general',
+    icon: Settings,
+    translationKey: 'generalSettings'
+  },
+  {
+    id: 'users',
+    icon: User,
+    translationKey: 'userManagement'
+  },
+  {
+    id: 'notifications',
+    icon: Bell,
+    translationKey: 'notificationSettings'
+  },
+  {
+    id: 'templates',
+    icon: BookOpen,
+    translationKey: 'alertsTemplates'
+  },
+  {
+    id: 'data-retention',
+    icon: Database,
+    translationKey: 'dataRetention'
+  },
+  {
+    id: 'about',
+    icon: Info,
+    translationKey: 'aboutSystem'
+  }
+];

application/src/components/docker/DockerContainersTable.tsx

@@ -0,0 +1,97 @@
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody } from "@/components/ui/table";
+import { DockerContainer } from "@/types/docker.types";
+import { DockerMetricsDialog } from "./DockerMetricsDialog";
+import { 
+  DockerTableSearch, 
+  DockerTableHeader, 
+  DockerTableRow, 
+  DockerEmptyState 
+} from "./table";
+
+interface DockerContainersTableProps {
+  containers: DockerContainer[];
+  isLoading: boolean;
+  onRefresh: () => void;
+}
+
+export const DockerContainersTable = ({ containers, isLoading, onRefresh }: DockerContainersTableProps) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedContainer, setSelectedContainer] = useState<DockerContainer | null>(null);
+  const [metricsDialogOpen, setMetricsDialogOpen] = useState(false);
+
+  const filteredContainers = containers.filter(container =>
+    container.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    container.docker_id.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    container.hostname.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleContainerAction = (action: string, containerId: string, containerName: string) => {
+    console.log(`${action} action for container ${containerName} (${containerId})`);
+    // TODO: Implement container actions
+  };
+
+  const handleRowClick = (container: DockerContainer) => {
+    setSelectedContainer(container);
+    setMetricsDialogOpen(true);
+  };
+
+  const handleViewMetrics = (container: DockerContainer) => {
+    setSelectedContainer(container);
+    setMetricsDialogOpen(true);
+  };
+
+  return (
+    <>
+      <Card className="w-full bg-transparent border-0 shadow-none">
+        <CardHeader className="pb-4 px-0">
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+              <CardTitle className="text-lg sm:text-xl font-semibold">Docker Containers</CardTitle>
+              <DockerTableSearch
+                searchTerm={searchTerm}
+                onSearchChange={setSearchTerm}
+                onRefresh={onRefresh}
+                isLoading={isLoading}
+              />
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="overflow-x-auto">
+            <div className="min-w-full inline-block align-middle">
+              <div className="overflow-hidden border border-border rounded-lg shadow-sm">
+                <Table>
+                  <DockerTableHeader />
+                  <TableBody>
+                    {filteredContainers.length === 0 ? (
+                      <DockerEmptyState searchTerm={searchTerm} />
+                    ) : (
+                      filteredContainers.map((container) => (
+                        <DockerTableRow
+                          key={container.id}
+                          container={container}
+                          onRowClick={handleRowClick}
+                          onContainerAction={handleContainerAction}
+                          onViewMetrics={handleViewMetrics}
+                        />
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <DockerMetricsDialog
+        container={selectedContainer}
+        open={metricsDialogOpen}
+        onOpenChange={setMetricsDialogOpen}
+      />
+    </>
+  );
+};

application/src/components/docker/DockerMetricsDialog.tsx

@@ -0,0 +1,695 @@
+import { useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer, AreaChart, Area } from "recharts";
+import { DockerContainer, DockerMetrics } from "@/types/docker.types";
+import { dockerService } from "@/services/dockerService";
+import { Loader2, Cpu, HardDrive, Network, MemoryStick } from "lucide-react";
+import { useTheme } from "@/contexts/ThemeContext";
+
+interface DockerMetricsDialogProps {
+  container: DockerContainer | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+type TimeRange = '60m' | '1d' | '7d' | '1m' | '3m';
+
+const timeRangeOptions = [
+  { value: '60m' as TimeRange, label: '60 minutes', hours: 1 },
+  { value: '1d' as TimeRange, label: '1 day', hours: 24 },
+  { value: '7d' as TimeRange, label: '7 days', hours: 24 * 7 },
+  { value: '1m' as TimeRange, label: '1 month', hours: 24 * 30 },
+  { value: '3m' as TimeRange, label: '3 months', hours: 24 * 90 },
+];
+
+export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMetricsDialogProps) => {
+  const [timeRange, setTimeRange] = useState<TimeRange>("1d");
+  const { theme } = useTheme();
+
+  const {
+    data: metrics = [],
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: ['docker-metrics', container?.docker_id, timeRange],
+    queryFn: () => container ? dockerService.getContainerMetrics(container.docker_id) : Promise.resolve([]),
+    enabled: !!container && open,
+    refetchInterval: 30000
+  });
+
+  const formatBytes = (bytes: number, decimals = 2) => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+  };
+
+  const parseValueWithUnit = (value: string | number): { numeric: number; unit: string; original: string } => {
+    if (typeof value === 'number') {
+      return { numeric: value, unit: 'B', original: value.toString() };
+    }
+    
+    const str = value.toString();
+    const match = str.match(/^([\d.]+)\s*([A-Za-z%]*)/);
+    if (match) {
+      const numeric = parseFloat(match[1]);
+      const unit = match[2] || '';
+      return { numeric, unit, original: str };
+    }
+    return { numeric: 0, unit: '', original: str };
+  };
+
+  const convertToBytes = (value: string | number): number => {
+    if (typeof value === 'number') return value;
+    
+    const parsed = parseValueWithUnit(value);
+    const multipliers: { [key: string]: number } = {
+      'B': 1,
+      'KB': 1024,
+      'MB': 1024 * 1024,
+      'GB': 1024 * 1024 * 1024,
+      'TB': 1024 * 1024 * 1024 * 1024
+    };
+    
+    const multiplier = multipliers[parsed.unit.toUpperCase()] || 1;
+    return parsed.numeric * multiplier;
+  };
+
+  const filterMetricsByTimeRange = (metrics: DockerMetrics[], timeRange: TimeRange): DockerMetrics[] => {
+    const now = new Date();
+    const selectedRange = timeRangeOptions.find(opt => opt.value === timeRange);
+    if (!selectedRange) return metrics;
+
+    const cutoffTime = new Date(now.getTime() - (selectedRange.hours * 60 * 60 * 1000));
+    
+    return metrics.filter(metric => {
+      const metricTime = new Date(metric.timestamp);
+      return metricTime >= cutoffTime;
+    });
+  };
+
+  const formatChartData = (metrics: DockerMetrics[]) => {
+    const filteredMetrics = filterMetricsByTimeRange(metrics, timeRange);
+    
+    return filteredMetrics.slice(0, 100).reverse().map((metric, index) => {
+      // Parse CPU usage
+      const cpuUsage = typeof metric.cpu_usage === 'string' ? 
+        parseFloat(metric.cpu_usage.replace('%', '')) : 
+        parseFloat(metric.cpu_usage) || 0;
+
+      // Parse memory values
+      const ramUsedBytes = convertToBytes(metric.ram_used);
+      const ramTotalBytes = convertToBytes(metric.ram_total);
+      const ramFreeBytes = convertToBytes(metric.ram_free);
+      const ramUsagePercent = ramTotalBytes > 0 ? (ramUsedBytes / ramTotalBytes) * 100 : 0;
+
+      // Parse disk values
+      const diskUsedBytes = convertToBytes(metric.disk_used);
+      const diskTotalBytes = convertToBytes(metric.disk_total);
+      const diskFreeBytes = convertToBytes(metric.disk_free);
+      const diskUsagePercent = diskTotalBytes > 0 ? (diskUsedBytes / diskTotalBytes) * 100 : 0;
+
+      // Network values
+      const networkRxBytes = metric.network_rx_bytes || 0;
+      const networkTxBytes = metric.network_tx_bytes || 0;
+      const networkRxSpeed = metric.network_rx_speed || 0;
+      const networkTxSpeed = metric.network_tx_speed || 0;
+
+      return {
+        timestamp: new Date(metric.timestamp).toLocaleTimeString('en-US', { 
+          hour: '2-digit', 
+          minute: '2-digit' 
+        }),
+        // CPU
+        cpuUsage: Math.round(cpuUsage * 100) / 100,
+        cpuCores: parseInt(metric.cpu_cores) || 0,
+        cpuFree: 100 - cpuUsage,
+        
+        // Memory
+        ramUsedBytes,
+        ramTotalBytes,
+        ramFreeBytes,
+        ramUsed: formatBytes(ramUsedBytes),
+        ramTotal: formatBytes(ramTotalBytes),
+        ramFree: formatBytes(ramFreeBytes),
+        ramUsagePercent: Math.round(ramUsagePercent * 100) / 100,
+        
+        // Disk
+        diskUsedBytes,
+        diskTotalBytes,
+        diskFreeBytes,
+        diskUsed: formatBytes(diskUsedBytes),
+        diskTotal: formatBytes(diskTotalBytes),
+        diskFree: formatBytes(diskFreeBytes),
+        diskUsagePercent: Math.round(diskUsagePercent * 100) / 100,
+        
+        // Network
+        networkRxBytes,
+        networkTxBytes,
+        networkRx: formatBytes(networkRxBytes),
+        networkTx: formatBytes(networkTxBytes),
+        networkRxSpeed: Math.round(networkRxSpeed * 100) / 100,
+        networkTxSpeed: Math.round(networkTxSpeed * 100) / 100,
+      };
+    });
+  };
+
+  const chartData = formatChartData(metrics);
+  const latestMetric = chartData[chartData.length - 1];
+
+  const chartConfig = {
+    cpuUsage: {
+      label: "CPU Usage (%)",
+      color: theme === 'dark' ? "#3b82f6" : "#2563eb",
+    },
+    ramUsagePercent: {
+      label: "RAM Usage (%)",
+      color: theme === 'dark' ? "#10b981" : "#059669",
+    },
+    diskUsagePercent: {
+      label: "Disk Usage (%)",
+      color: theme === 'dark' ? "#f59e0b" : "#d97706",
+    },
+    networkRx: {
+      label: "Network RX",
+      color: theme === 'dark' ? "#8b5cf6" : "#7c3aed",
+    },
+    networkTx: {
+      label: "Network TX",
+      color: theme === 'dark' ? "#ef4444" : "#dc2626",
+    },
+  };
+
+  const getGridColor = () => theme === 'dark' ? '#374151' : '#e5e7eb';
+  const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';
+
+  const MetricCard = ({ title, used, total, free, percentage, icon: Icon, color }: {
+    title: string;
+    used: string;
+    total: string;
+    free: string;
+    percentage: number;
+    icon: any;
+    color: string;
+  }) => (
+    <div className="bg-muted/30 rounded-lg p-4 space-y-2">
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4" style={{ color }} />
+        <span className="text-sm font-medium">{title}</span>
+      </div>
+      <div className="space-y-1 text-xs">
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">Used:</span>
+          <span className="font-mono">{used}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">Free:</span>
+          <span className="font-mono">{free}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">Total:</span>
+          <span className="font-mono">{total}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">Usage:</span>
+          <span className="font-mono">{percentage.toFixed(1)}%</span>
+        </div>
+      </div>
+    </div>
+  );
+
+  if (!container) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-7xl max-h-[95vh] overflow-y-auto bg-background text-foreground">
+        <DialogHeader>
+          <DialogTitle className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div className="h-8 w-8 rounded bg-primary/10 flex items-center justify-center">
+                <Cpu className="h-4 w-4 text-primary" />
+              </div>
+              Container Metrics: {container.name}
+            </div>
+            <div className="flex items-center gap-2">
+              <Select value={timeRange} onValueChange={(value: TimeRange) => setTimeRange(value)}>
+                <SelectTrigger className="w-[140px] h-8">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {timeRangeOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </DialogTitle>
+          <p className="text-sm text-muted-foreground">
+            Docker ID: {container.docker_id} • {container.hostname}
+          </p>
+        </DialogHeader>
+
+        {isLoading ? (
+          <div className="flex items-center justify-center h-96">
+            <Loader2 className="h-8 w-8 animate-spin" />
+            <span className="ml-2">Loading metrics...</span>
+          </div>
+        ) : error ? (
+          <div className="flex items-center justify-center h-96 text-muted-foreground">
+            <p>Error loading metrics: {error.message}</p>
+          </div>
+        ) : chartData.length === 0 ? (
+          <div className="flex items-center justify-center h-96 text-muted-foreground">
+            <p>No metrics data available for this container</p>
+          </div>
+        ) : (
+          <>
+            {/* Current Metrics Summary */}
+            {latestMetric && (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+                <MetricCard
+                  title="CPU"
+                  used={`${latestMetric.cpuUsage}%`}
+                  total={`${latestMetric.cpuCores} cores`}
+                  free={`${(100 - latestMetric.cpuUsage).toFixed(1)}%`}
+                  percentage={latestMetric.cpuUsage}
+                  icon={Cpu}
+                  color={chartConfig.cpuUsage.color}
+                />
+                <MetricCard
+                  title="Memory"
+                  used={latestMetric.ramUsed}
+                  total={latestMetric.ramTotal}
+                  free={latestMetric.ramFree}
+                  percentage={latestMetric.ramUsagePercent}
+                  icon={MemoryStick}
+                  color={chartConfig.ramUsagePercent.color}
+                />
+                <MetricCard
+                  title="Disk"
+                  used={latestMetric.diskUsed}
+                  total={latestMetric.diskTotal}
+                  free={latestMetric.diskFree}
+                  percentage={latestMetric.diskUsagePercent}
+                  icon={HardDrive}
+                  color={chartConfig.diskUsagePercent.color}
+                />
+                <MetricCard
+                  title="Network"
+                  used={`RX: ${latestMetric.networkRx}`}
+                  total={`TX: ${latestMetric.networkTx}`}
+                  free={`Speed: ${latestMetric.networkRxSpeed} KB/s`}
+                  percentage={0}
+                  icon={Network}
+                  color={chartConfig.networkRx.color}
+                />
+              </div>
+            )}
+
+            <Tabs defaultValue="cpu" className="w-full">
+              <TabsList className="grid w-full grid-cols-4 bg-muted">
+                <TabsTrigger value="cpu" className="flex items-center gap-2 data-[state=active]:bg-background">
+                  <Cpu className="h-4 w-4" />
+                  CPU
+                </TabsTrigger>
+                <TabsTrigger value="memory" className="flex items-center gap-2 data-[state=active]:bg-background">
+                  <MemoryStick className="h-4 w-4" />
+                  Memory
+                </TabsTrigger>
+                <TabsTrigger value="disk" className="flex items-center gap-2 data-[state=active]:bg-background">
+                  <HardDrive className="h-4 w-4" />
+                  Disk
+                </TabsTrigger>
+                <TabsTrigger value="network" className="flex items-center gap-2 data-[state=active]:bg-background">
+                  <Network className="h-4 w-4" />
+                  Network
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="cpu" className="space-y-4 mt-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <Card className="bg-card border-border">
+                    <CardHeader>
+                      <CardTitle className="text-foreground">CPU Usage (%)</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <ChartContainer config={chartConfig} className="h-80">
+                        <LineChart data={chartData}>
+                          <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} />
+                          <XAxis 
+                            dataKey="timestamp" 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <YAxis 
+                            domain={[0, 100]}
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <ChartTooltip 
+                            content={<ChartTooltipContent className="bg-popover border-border" />}
+                            cursor={{ stroke: getGridColor() }}
+                          />
+                          <Line 
+                            type="monotone" 
+                            dataKey="cpuUsage" 
+                            stroke={chartConfig.cpuUsage.color}
+                            strokeWidth={2}
+                            dot={{ r: 3, fill: chartConfig.cpuUsage.color }}
+                            name="CPU Usage (%)"
+                          />
+                        </LineChart>
+                      </ChartContainer>
+                    </CardContent>
+                  </Card>
+
+                  <Card className="bg-card border-border">
+                    <CardHeader>
+                      <CardTitle className="text-foreground">CPU Usage vs Available</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <ChartContainer config={chartConfig} className="h-80">
+                        <AreaChart data={chartData}>
+                          <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} />
+                          <XAxis 
+                            dataKey="timestamp" 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <YAxis 
+                            domain={[0, 100]}
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <ChartTooltip 
+                            content={<ChartTooltipContent className="bg-popover border-border" />}
+                            cursor={{ stroke: getGridColor() }}
+                          />
+                          <Area 
+                            type="monotone" 
+                            dataKey="cpuFree" 
+                            stackId="1"
+                            stroke={theme === 'dark' ? "#6b7280" : "#9ca3af"}
+                            fill={theme === 'dark' ? "#6b7280" : "#9ca3af"}
+                            fillOpacity={0.3}
+                            name="CPU Available (%)"
+                          />
+                          <Area 
+                            type="monotone" 
+                            dataKey="cpuUsage" 
+                            stackId="1"
+                            stroke={chartConfig.cpuUsage.color}
+                            fill={chartConfig.cpuUsage.color}
+                            fillOpacity={0.6}
+                            name="CPU Usage (%)"
+                          />
+                        </AreaChart>
+                      </ChartContainer>
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="memory" className="space-y-4 mt-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <Card className="bg-card border-border">
+                    <CardHeader>
+                      <CardTitle className="text-foreground">Memory Usage (%)</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <ChartContainer config={chartConfig} className="h-80">
+                        <AreaChart data={chartData}>
+                          <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} />
+                          <XAxis 
+                            dataKey="timestamp" 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <YAxis 
+                            domain={[0, 100]}
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <ChartTooltip 
+                            content={<ChartTooltipContent className="bg-popover border-border" />}
+                            cursor={{ stroke: getGridColor() }}
+                          />
+                          <Area 
+                            type="monotone" 
+                            dataKey="ramUsagePercent" 
+                            stackId="1"
+                            stroke={chartConfig.ramUsagePercent.color}
+                            fill={chartConfig.ramUsagePercent.color}
+                            fillOpacity={0.6}
+                            name="RAM Usage (%)"
+                          />
+                        </AreaChart>
+                      </ChartContainer>
+                    </CardContent>
+                  </Card>
+
+                  <Card className="bg-card border-border">
+                    <CardHeader>
+                      <CardTitle className="text-foreground">Memory Usage (Bytes)</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <ChartContainer config={chartConfig} className="h-80">
+                        <AreaChart data={chartData}>
+                          <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} />
+                          <XAxis 
+                            dataKey="timestamp" 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <YAxis 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                            tickFormatter={(value) => formatBytes(value)}
+                          />
+                          <ChartTooltip 
+                            content={<ChartTooltipContent className="bg-popover border-border" />}
+                            cursor={{ stroke: getGridColor() }}
+                            formatter={(value, name) => [
+                              name === 'Used Memory' ? formatBytes(Number(value)) : 
+                              name === 'Total Memory' ? formatBytes(Number(value)) : value,
+                              name
+                            ]}
+                          />
+                          <Area 
+                            type="monotone" 
+                            dataKey="ramTotalBytes" 
+                            stackId="1"
+                            stroke={theme === 'dark' ? "#6b7280" : "#9ca3af"}
+                            fill={theme === 'dark' ? "#6b7280" : "#9ca3af"}
+                            fillOpacity={0.3}
+                            name="Total Memory"
+                          />
+                          <Area 
+                            type="monotone" 
+                            dataKey="ramUsedBytes" 
+                            stackId="1"
+                            stroke={chartConfig.ramUsagePercent.color}
+                            fill={chartConfig.ramUsagePercent.color}
+                            fillOpacity={0.6}
+                            name="Used Memory"
+                          />
+                        </AreaChart>
+                      </ChartContainer>
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="disk" className="space-y-4 mt-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <Card className="bg-card border-border">
+                    <CardHeader>
+                      <CardTitle className="text-foreground">Disk Usage (%)</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <ChartContainer config={chartConfig} className="h-80">
+                        <AreaChart data={chartData}>
+                          <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} />
+                          <XAxis 
+                            dataKey="timestamp" 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <YAxis 
+                            domain={[0, 100]}
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <ChartTooltip 
+                            content={<ChartTooltipContent className="bg-popover border-border" />}
+                            cursor={{ stroke: getGridColor() }}
+                          />
+                          <Area 
+                            type="monotone" 
+                            dataKey="diskUsagePercent" 
+                            stackId="1"
+                            stroke={chartConfig.diskUsagePercent.color}
+                            fill={chartConfig.diskUsagePercent.color}
+                            fillOpacity={0.6}
+                            name="Disk Usage (%)"
+                          />
+                        </AreaChart>
+                      </ChartContainer>
+                    </CardContent>
+                  </Card>
+
+                  <Card className="bg-card border-border">
+                    <CardHeader>
+                      <CardTitle className="text-foreground">Disk Usage (Bytes)</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <ChartContainer config={chartConfig} className="h-80">
+                        <AreaChart data={chartData}>
+                          <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} />
+                          <XAxis 
+                            dataKey="timestamp" 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <YAxis 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                            tickFormatter={(value) => formatBytes(value)}
+                          />
+                          <ChartTooltip 
+                            content={<ChartTooltipContent className="bg-popover border-border" />}
+                            cursor={{ stroke: getGridColor() }}
+                            formatter={(value, name) => [
+                              name === 'Used Disk' ? formatBytes(Number(value)) : 
+                              name === 'Total Disk' ? formatBytes(Number(value)) : value,
+                              name
+                            ]}
+                          />
+                          <Area 
+                            type="monotone" 
+                            dataKey="diskTotalBytes" 
+                            stackId="1"
+                            stroke={theme === 'dark' ? "#6b7280" : "#9ca3af"}
+                            fill={theme === 'dark' ? "#6b7280" : "#9ca3af"}
+                            fillOpacity={0.3}
+                            name="Total Disk"
+                          />
+                          <Area 
+                            type="monotone" 
+                            dataKey="diskUsedBytes" 
+                            stackId="1"
+                            stroke={chartConfig.diskUsagePercent.color}
+                            fill={chartConfig.diskUsagePercent.color}
+                            fillOpacity={0.6}
+                            name="Used Disk"
+                          />
+                        </AreaChart>
+                      </ChartContainer>
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="network" className="space-y-4 mt-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <Card className="bg-card border-border">
+                    <CardHeader>
+                      <CardTitle className="text-foreground">Network Traffic</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <ChartContainer config={chartConfig} className="h-64">
+                        <LineChart data={chartData}>
+                          <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} />
+                          <XAxis 
+                            dataKey="timestamp" 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <YAxis 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <ChartTooltip 
+                            content={<ChartTooltipContent className="bg-popover border-border" />}
+                            cursor={{ stroke: getGridColor() }}
+                          />
+                          <Line 
+                            type="monotone" 
+                            dataKey="networkRxBytes" 
+                            stroke={chartConfig.networkRx.color}
+                            strokeWidth={2}
+                            name="RX Bytes"
+                            dot={{ r: 2 }}
+                          />
+                          <Line 
+                            type="monotone" 
+                            dataKey="networkTxBytes" 
+                            stroke={chartConfig.networkTx.color}
+                            strokeWidth={2}
+                            name="TX Bytes"
+                            dot={{ r: 2 }}
+                          />
+                        </LineChart>
+                      </ChartContainer>
+                    </CardContent>
+                  </Card>
+
+                  <Card className="bg-card border-border">
+                    <CardHeader>
+                      <CardTitle className="text-foreground">Network Speed (KB/s)</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <ChartContainer config={chartConfig} className="h-64">
+                        <LineChart data={chartData}>
+                          <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} />
+                          <XAxis 
+                            dataKey="timestamp" 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <YAxis 
+                            tick={{ fontSize: 12, fill: getAxisColor() }}
+                            axisLine={{ stroke: getGridColor() }}
+                          />
+                          <ChartTooltip 
+                            content={<ChartTooltipContent className="bg-popover border-border" />}
+                            cursor={{ stroke: getGridColor() }}
+                          />
+                          <Line 
+                            type="monotone" 
+                            dataKey="networkRxSpeed" 
+                            stroke={chartConfig.networkRx.color}
+                            strokeWidth={2}
+                            name="RX Speed (KB/s)"
+                            dot={{ r: 2 }}
+                          />
+                          <Line 
+                            type="monotone" 
+                            dataKey="networkTxSpeed" 
+                            stroke={chartConfig.networkTx.color}
+                            strokeWidth={2}
+                            name="TX Speed (KB/s)"
+                            dot={{ r: 2 }}
+                          />
+                        </LineChart>
+                      </ChartContainer>
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

application/src/components/docker/DockerStatsCards.tsx

@@ -0,0 +1,102 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Container, Play, Square, AlertTriangle } from "lucide-react";
+import { DockerStats } from "@/types/docker.types";
+import { useTheme } from "@/contexts/ThemeContext";
+
+interface DockerStatsCardsProps {
+  stats: DockerStats;
+}
+
+export const DockerStatsCards = ({ stats }: DockerStatsCardsProps) => {
+  const { theme } = useTheme();
+
+  const cards = [
+    {
+      title: "Total Containers",
+      value: stats.total,
+      icon: Container,
+      color: "text-blue-600",
+      gradient: theme === 'dark' 
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(59, 130, 246, 0.6) 100%)" 
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #3b82f6 100%)"
+    },
+    {
+      title: "Running",
+      value: stats.running,
+      icon: Play,
+      color: "text-green-600",
+      gradient: theme === 'dark' 
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(16, 185, 129, 0.6) 100%)" 
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #10b981 100%)"
+    },
+    {
+      title: "Stopped",
+      value: stats.stopped,
+      icon: Square,
+      color: "text-gray-600",
+      gradient: theme === 'dark' 
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(107, 114, 128, 0.6) 100%)" 
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #6b7280 100%)"
+    },
+    {
+      title: "Warning",
+      value: stats.warning,
+      icon: AlertTriangle,
+      color: "text-amber-600",
+      gradient: theme === 'dark' 
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(245, 158, 11, 0.6) 100%)" 
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #f59e0b 100%)"
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
+      {cards.map((card) => {
+        const IconComponent = card.icon;
+        return (
+          <Card 
+            key={card.title} 
+            className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative"
+            style={{ background: card.gradient }}
+          >
+            {/* Grid Pattern Overlay */}
+            <div className="absolute inset-0 z-0 opacity-10">
+              <div 
+                className="w-full h-full" 
+                style={{ 
+                  backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), 
+                                    linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
+                  backgroundSize: '20px 20px'
+                }}
+              />
+            </div>
+
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
+              <CardTitle className="text-sm font-medium text-white/70">
+                {card.title}
+              </CardTitle>
+              <div className="p-2.5 rounded-xl bg-white/20 backdrop-blur-sm shadow-sm transition-all duration-300 group-hover:scale-110">
+                <IconComponent className="h-4 w-4 text-white" />
+              </div>
+            </CardHeader>
+            <CardContent className="relative z-10">
+              <div className="flex items-center justify-between">
+                <div className="text-2xl font-bold text-white">
+                  {card.value}
+                </div>
+                <Badge 
+                  variant="outline" 
+                  className="text-xs font-mono font-bold px-2 py-1 rounded-md bg-white/20 backdrop-blur-sm text-white border border-white/30"
+                >
+                  Containers
+                </Badge>
+              </div>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};

application/src/components/docker/DockerStatusBadge.tsx

@@ -0,0 +1,48 @@
+
+import { Badge } from "@/components/ui/badge";
+
+interface DockerStatusBadgeProps {
+  status: 'running' | 'stopped' | 'warning';
+}
+
+export const DockerStatusBadge = ({ status }: DockerStatusBadgeProps) => {
+  const getStatusConfig = (status: string) => {
+    switch (status) {
+      case 'running':
+        return {
+          variant: 'default' as const,
+          className: 'bg-emerald-100 text-emerald-800 border-emerald-200 hover:bg-emerald-200',
+          label: 'Running'
+        };
+      case 'stopped':
+        return {
+          variant: 'secondary' as const,
+          className: 'bg-gray-100 text-gray-800 border-gray-200 hover:bg-gray-200',
+          label: 'Stopped'
+        };
+      case 'warning':
+        return {
+          variant: 'destructive' as const,
+          className: 'bg-amber-100 text-amber-800 border-amber-200 hover:bg-amber-200',
+          label: 'Warning'
+        };
+      default:
+        return {
+          variant: 'outline' as const,
+          className: 'bg-gray-100 text-gray-600 border-gray-200',
+          label: 'Unknown'
+        };
+    }
+  };
+
+  const config = getStatusConfig(status);
+
+  return (
+    <Badge 
+      variant={config.variant} 
+      className={`${config.className} font-medium text-xs px-2 py-1`}
+    >
+      {config.label}
+    </Badge>
+  );
+};

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

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

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

@@ -0,0 +1,41 @@
+
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
+import { MoreHorizontal, Eye, Play, Pause, Square, Trash2, BarChart3, RefreshCw } from "lucide-react";
+import { DockerContainer } from "@/types/docker.types";
+
+interface DockerRowActionsProps {
+  container: DockerContainer;
+  containerStatus: 'running' | 'stopped' | 'warning';
+  onContainerAction: (action: string, containerId: string, containerName: string) => void;
+  onViewMetrics: (container: DockerContainer) => void;
+}
+
+export const DockerRowActions = ({ container, containerStatus, onContainerAction, onViewMetrics }: DockerRowActionsProps) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0 hover:bg-muted">
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48 bg-popover border-border shadow-md">
+        <DropdownMenuItem 
+          onClick={() => onViewMetrics(container)}
+          className="cursor-pointer hover:bg-muted"
+        >
+          <BarChart3 className="mr-2 h-4 w-4" />
+          View Metrics
+        </DropdownMenuItem>
+        <DropdownMenuItem 
+          onClick={() => onContainerAction('view-detail', container.id, container.name)}
+          className="cursor-pointer hover:bg-muted"
+        >
+          <Eye className="mr-2 h-4 w-4" />
+          View Details
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

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

@@ -0,0 +1,19 @@
+
+import { TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+export const DockerTableHeader = () => {
+  return (
+    <TableHeader>
+      <TableRow className="border-border bg-muted/30">
+        <TableHead className="min-w-[200px] font-semibold">Container</TableHead>
+        <TableHead className="min-w-[100px] font-semibold">Status</TableHead>
+        <TableHead className="min-w-[140px] font-semibold">CPU Usage</TableHead>
+        <TableHead className="min-w-[160px] font-semibold">Memory</TableHead>
+        <TableHead className="min-w-[160px] font-semibold">Disk</TableHead>
+        <TableHead className="min-w-[100px] font-semibold">Uptime</TableHead>
+        <TableHead className="min-w-[160px] font-semibold">Last Checked</TableHead>
+        <TableHead className="min-w-[80px] text-center font-semibold">Actions</TableHead>
+      </TableRow>
+    </TableHeader>
+  );
+};

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

@@ -0,0 +1,123 @@
+
+import { TableCell, TableRow } from "@/components/ui/table";
+import { Progress } from "@/components/ui/progress";
+import { DockerContainer } from "@/types/docker.types";
+import { DockerStatusBadge } from "../DockerStatusBadge";
+import { DockerRowActions } from "./DockerRowActions";
+import { dockerService } from "@/services/dockerService";
+
+interface DockerTableRowProps {
+  container: DockerContainer;
+  onRowClick: (container: DockerContainer) => void;
+  onContainerAction: (action: string, containerId: string, containerName: string) => void;
+  onViewMetrics: (container: DockerContainer) => void;
+}
+
+export const DockerTableRow = ({ container, onRowClick, onContainerAction, onViewMetrics }: DockerTableRowProps) => {
+  const cpuPercentage = container.cpu_usage;
+  const memoryPercentage = Math.round((container.ram_used / container.ram_total) * 100);
+  const diskPercentage = Math.round((container.disk_used / container.disk_total) * 100);
+  const containerStatus = dockerService.getStatusFromDockerStatus(container.status);
+
+  const formatPercentage = (used: number, total: number) => {
+    if (total === 0) return "0%";
+    return `${Math.round((used / total) * 100)}%`;
+  };
+
+  const getUsageColor = (percentage: number) => {
+    if (percentage >= 90) return "text-red-500";
+    if (percentage >= 70) return "text-amber-500";
+    return "text-emerald-500";
+  };
+
+  const getProgressColor = (percentage: number) => {
+    if (percentage >= 90) return "bg-red-500";
+    if (percentage >= 70) return "bg-amber-500";
+    return "bg-emerald-500";
+  };
+
+  return (
+    <TableRow 
+      className="hover:bg-muted/50 transition-colors border-border cursor-pointer"
+      onClick={() => onRowClick(container)}
+    >
+      <TableCell className="font-medium">
+        <div className="space-y-1">
+          <div className="font-semibold text-sm sm:text-base text-foreground">{container.name}</div>
+          <div className="text-xs sm:text-sm text-muted-foreground">
+            <div className="font-mono">{container.docker_id}</div>
+          </div>
+        </div>
+      </TableCell>
+      <TableCell>
+        <DockerStatusBadge status={containerStatus} />
+      </TableCell>
+      <TableCell>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between gap-3">
+            <Progress 
+              value={cpuPercentage} 
+              className="flex-1 h-2 bg-muted/50"
+              indicatorClassName={getProgressColor(cpuPercentage)}
+            />
+            <span className={`font-semibold text-sm min-w-[40px] text-right ${getUsageColor(cpuPercentage)}`}>
+              {cpuPercentage}%
+            </span>
+          </div>
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between gap-3">
+            <Progress 
+              value={memoryPercentage} 
+              className="flex-1 h-2 bg-muted/50"
+              indicatorClassName={getProgressColor(memoryPercentage)}
+            />
+            <span className={`font-semibold text-sm min-w-[40px] text-right ${getUsageColor(memoryPercentage)}`}>
+              {formatPercentage(container.ram_used, container.ram_total)}
+            </span>
+          </div>
+          <div className="text-xs text-muted-foreground font-mono">
+            {dockerService.formatBytes(container.ram_used)} / {dockerService.formatBytes(container.ram_total)}
+          </div>
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between gap-3">
+            <Progress 
+              value={diskPercentage} 
+              className="flex-1 h-2 bg-muted/50"
+              indicatorClassName={getProgressColor(diskPercentage)}
+            />
+            <span className={`font-semibold text-sm min-w-[40px] text-right ${getUsageColor(diskPercentage)}`}>
+              {formatPercentage(container.disk_used, container.disk_total)}
+            </span>
+          </div>
+          <div className="text-xs text-muted-foreground font-mono">
+            {dockerService.formatBytes(container.disk_used)} / {dockerService.formatBytes(container.disk_total)}
+          </div>
+        </div>
+      </TableCell>
+      <TableCell>
+        <span className="text-xs sm:text-sm font-medium font-mono">
+          {dockerService.formatUptime(container.uptime)}
+        </span>
+      </TableCell>
+      <TableCell>
+        <span className="text-xs sm:text-sm text-muted-foreground">
+          {new Date(container.last_checked).toLocaleString()}
+        </span>
+      </TableCell>
+      <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+        <DockerRowActions 
+          container={container}
+          containerStatus={containerStatus}
+          onContainerAction={onContainerAction}
+          onViewMetrics={onViewMetrics}
+        />
+      </TableCell>
+    </TableRow>
+  );
+};

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

@@ -0,0 +1,37 @@
+
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Search, RefreshCw } from "lucide-react";
+
+interface DockerTableSearchProps {
+  searchTerm: string;
+  onSearchChange: (value: string) => void;
+  onRefresh: () => void;
+  isLoading: boolean;
+}
+
+export const DockerTableSearch = ({ searchTerm, onSearchChange, onRefresh, isLoading }: DockerTableSearchProps) => {
+  return (
+    <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
+      <div className="relative flex-1 sm:flex-initial">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+        <Input
+          placeholder="Search containers..."
+          value={searchTerm}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-10 sm:w-64 bg-background border-border"
+        />
+      </div>
+      <Button
+        onClick={onRefresh}
+        disabled={isLoading}
+        variant="outline"
+        size="default"
+        className="w-full sm:w-auto bg-background border-border hover:bg-muted"
+      >
+        <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+        <span className="sm:inline">Refresh</span>
+      </Button>
+    </div>
+  );
+};

application/src/components/docker/table/index.ts

@@ -0,0 +1,6 @@
+
+export { DockerTableSearch } from './DockerTableSearch';
+export { DockerTableHeader } from './DockerTableHeader';
+export { DockerTableRow } from './DockerTableRow';
+export { DockerRowActions } from './DockerRowActions';
+export { DockerEmptyState } from './DockerEmptyState';

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

@@ -0,0 +1,243 @@
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { 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 { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
+import { useQuery } from '@tanstack/react-query';
+import { serviceService } from '@/services/serviceService';
+
+interface ComponentsSelectorProps {
+  selectedComponents: Partial<StatusPageComponentRecord>[];
+  onComponentsChange: (components: Partial<StatusPageComponentRecord>[]) => void;
+  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({
+    name: '',
+    description: '',
+    service_id: '',
+    server_id: '',
+    display_order: selectedComponents.length + 1,
+  });
+
+  // Fetch uptime services for the dropdown
+  const { data: services = [] } = useQuery({
+    queryKey: ['services'],
+    queryFn: serviceService.getServices,
+  });
+
+  const addComponent = () => {
+    if (!newComponent.name.trim()) return;
+
+    const component: Partial<StatusPageComponentRecord> = {
+      ...newComponent,
+      operational_status_id: '', // Will be set when page is created
+    };
+
+    onComponentsChange([...selectedComponents, component]);
+    setNewComponent({
+      name: '',
+      description: '',
+      service_id: '',
+      server_id: '',
+      display_order: selectedComponents.length + 2,
+    });
+    setShowAddForm(false);
+  };
+
+  const removeComponent = async (index: number) => {
+    const component = selectedComponents[index];
+    
+    // If component has an ID, it exists in database and needs to be deleted
+    if (component.id && onComponentDelete) {
+      await onComponentDelete(component.id);
+    } else {
+      // For new components not yet saved, just remove from local state
+      const updated = selectedComponents.filter((_, i) => i !== index);
+      onComponentsChange(updated);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Server className="h-5 w-5" />
+          Status Page Components
+        </CardTitle>
+        <CardDescription>
+          Add monitoring components like uptime services, SSL certificates, and incident tracking
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {selectedComponents.length > 0 && (
+          <div className="space-y-2">
+            <Label>Selected Components</Label>
+            <div className="space-y-2">
+              {selectedComponents.map((component, index) => (
+                <div key={component.id || index} className="flex items-center justify-between p-3 border rounded-lg">
+                  <div className="flex-1">
+                    <div className="font-medium">{component.name}</div>
+                    {component.description && (
+                      <div className="text-sm text-muted-foreground">{component.description}</div>
+                    )}
+                    <div className="flex gap-2 mt-1">
+                      {component.service_id && (
+                        <Badge variant="secondary" className="text-xs">
+                          Service: {services.find(s => s.id === component.service_id)?.name || component.service_id}
+                        </Badge>
+                      )}
+                      {component.server_id && (
+                        <Badge variant="secondary" className="text-xs">
+                          Server: {component.server_id}
+                        </Badge>
+                      )}
+                    </div>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => removeComponent(index)}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {!showAddForm ? (
+          <Button
+            variant="outline"
+            onClick={() => setShowAddForm(true)}
+            className="w-full"
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            Add Component
+          </Button>
+        ) : (
+          <div className="border rounded-lg p-4 space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label htmlFor="component-name">Component Name</Label>
+                <Input
+                  id="component-name"
+                  placeholder="e.g., Main Website"
+                  value={newComponent.name}
+                  onChange={(e) => setNewComponent({ ...newComponent, name: e.target.value })}
+                />
+              </div>
+              <div>
+                <Label htmlFor="display-order">Display Order</Label>
+                <Input
+                  id="display-order"
+                  type="number"
+                  value={newComponent.display_order}
+                  onChange={(e) => setNewComponent({ ...newComponent, display_order: parseInt(e.target.value) || 1 })}
+                />
+              </div>
+            </div>
+
+            <div>
+              <Label htmlFor="component-description">Description (Optional)</Label>
+              <Textarea
+                id="component-description"
+                placeholder="Brief description of this component"
+                value={newComponent.description}
+                onChange={(e) => setNewComponent({ ...newComponent, description: e.target.value })}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label htmlFor="service-id">Uptime Service (Optional)</Label>
+                <Select onValueChange={(value) => setNewComponent({ ...newComponent, service_id: value })}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select an uptime service" />
+                  </SelectTrigger>
+                  <SelectContent className="z-50 bg-white border shadow-lg">
+                    {services.map((service) => (
+                      <SelectItem key={service.id} value={service.id}>
+                        <div className="flex items-center gap-2">
+                          <div className={`w-2 h-2 rounded-full ${
+                            service.status === 'up' ? 'bg-green-500' : 
+                            service.status === 'down' ? 'bg-red-500' : 
+                            'bg-yellow-500'
+                          }`} />
+                          {service.name}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label htmlFor="server-id">Server ID (Optional)</Label>
+                <Input
+                  id="server-id"
+                  placeholder="server_456"
+                  value={newComponent.server_id}
+                  onChange={(e) => setNewComponent({ ...newComponent, server_id: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <Button onClick={addComponent} disabled={!newComponent.name.trim()}>
+                Add Component
+              </Button>
+              <Button variant="outline" onClick={() => setShowAddForm(false)}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        )}
+
+        <div className="mt-4">
+          <Label>Quick Add Templates</Label>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-2">
+            {componentTypes.map((type) => {
+              const Icon = type.icon;
+              return (
+                <Button
+                  key={type.value}
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    const component: Partial<StatusPageComponentRecord> = {
+                      name: type.label,
+                      description: `Monitor ${type.label.toLowerCase()}`,
+                      service_id: '',
+                      server_id: '',
+                      display_order: selectedComponents.length + 1,
+                      operational_status_id: '',
+                    };
+                    onComponentsChange([...selectedComponents, component]);
+                  }}
+                  className="justify-start"
+                >
+                  <Icon className="h-4 w-4 mr-2" />
+                  {type.label}
+                </Button>
+              );
+            })}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

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

@@ -0,0 +1,278 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { useCreateOperationalPage } from '@/hooks/useOperationalPage';
+import { useCreateStatusPageComponent } from '@/hooks/useStatusPageComponents';
+import { ComponentsSelector } from './ComponentsSelector';
+import { Plus } from 'lucide-react';
+import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
+
+const formSchema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().min(1, 'Description is required'),
+  slug: z.string().min(1, 'Slug is required'),
+  theme: z.string().min(1, 'Theme is required'),
+  status: z.enum(['operational', 'degraded', 'maintenance', 'major_outage']),
+  is_public: z.boolean(),
+  logo_url: z.string().optional(),
+  custom_domain: z.string().optional(),
+  custom_css: z.string().optional(),
+  page_style: z.string().optional(),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export const CreateOperationalPageDialog = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedComponents, setSelectedComponents] = useState<Partial<StatusPageComponentRecord>[]>([]);
+  const createMutation = useCreateOperationalPage();
+  const createComponentMutation = useCreateStatusPageComponent();
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      title: '',
+      description: '',
+      slug: '',
+      theme: 'default',
+      status: 'operational',
+      is_public: true,
+      logo_url: '',
+      custom_domain: '',
+      custom_css: '',
+      page_style: '',
+    },
+  });
+
+  const onSubmit = async (data: FormData) => {
+    try {
+      const payload = {
+        title: data.title,
+        description: data.description,
+        slug: data.slug,
+        theme: data.theme,
+        status: data.status,
+        is_public: data.is_public ? 'true' : 'false',
+        logo_url: data.logo_url || '',
+        custom_domain: data.custom_domain || '',
+        custom_css: data.custom_css || '',
+        page_style: data.page_style || '',
+      };
+      
+      console.log('Creating operational page with payload:', payload);
+      const createdPage = await createMutation.mutateAsync(payload);
+      console.log('Created page:', createdPage);
+      
+      // Create components after page is created
+      if (selectedComponents.length > 0) {
+        console.log('Creating components for page:', createdPage.id);
+        for (const component of selectedComponents) {
+          const componentPayload = {
+            operational_status_id: createdPage.id,
+            name: component.name || '',
+            description: component.description || '',
+            service_id: component.service_id || '',
+            server_id: component.server_id || '',
+            display_order: component.display_order || 1,
+          };
+          
+          console.log('Creating component with payload:', componentPayload);
+          await createComponentMutation.mutateAsync(componentPayload);
+        }
+      }
+      
+      setOpen(false);
+      form.reset();
+      setSelectedComponents([]);
+    } catch (error) {
+      console.error('Error creating operational page:', error);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button className="gap-2">
+          <Plus className="h-4 w-4" />
+          Create Page
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Create Operational Page</DialogTitle>
+          <DialogDescription>
+            Create a new operational status page to monitor your services and components.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Title</FormLabel>
+                    <FormControl>
+                      <Input placeholder="My Service Status" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="slug"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Slug</FormLabel>
+                    <FormControl>
+                      <Input placeholder="my-service-status" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="A brief description of your operational page" 
+                      className="min-h-[80px]"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="theme"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Theme</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select theme" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="default">Default</SelectItem>
+                        <SelectItem value="dark">Dark</SelectItem>
+                        <SelectItem value="light">Light</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Initial Status</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select status" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="operational">Operational</SelectItem>
+                        <SelectItem value="degraded">Degraded Performance</SelectItem>
+                        <SelectItem value="maintenance">Under Maintenance</SelectItem>
+                        <SelectItem value="major_outage">Major Outage</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="is_public"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                  <div className="space-y-0.5">
+                    <FormLabel>Public Page</FormLabel>
+                    <FormDescription>
+                      Make this page publicly accessible
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="custom_domain"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Custom Domain (Optional)</FormLabel>
+                  <FormControl>
+                    <Input placeholder="status.yourdomain.com" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Custom domain for your status page
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <ComponentsSelector
+              selectedComponents={selectedComponents}
+              onComponentsChange={setSelectedComponents}
+            />
+
+            <div className="flex justify-end gap-2 pt-4">
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={() => setOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit" 
+                disabled={createMutation.isPending || createComponentMutation.isPending}
+              >
+                {createMutation.isPending || createComponentMutation.isPending ? 'Creating...' : 'Create Page'}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,367 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { useUpdateOperationalPage } from '@/hooks/useOperationalPage';
+import { useCreateStatusPageComponent, useStatusPageComponentsByOperationalId, useDeleteStatusPageComponent } from '@/hooks/useStatusPageComponents';
+import { ComponentsSelector } from './ComponentsSelector';
+import { OperationalPageRecord } from '@/types/operational.types';
+import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
+
+const formSchema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().min(1, 'Description is required'),
+  slug: z.string().min(1, 'Slug is required'),
+  theme: z.string().min(1, 'Theme is required'),
+  status: z.enum(['operational', 'degraded', 'maintenance', 'major_outage']),
+  is_public: z.boolean(),
+  logo_url: z.string().optional(),
+  custom_domain: z.string().optional(),
+  custom_css: z.string().optional(),
+  page_style: z.string().optional(),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+interface EditOperationalPageDialogProps {
+  page: OperationalPageRecord | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOperationalPageDialogProps) => {
+  const [selectedComponents, setSelectedComponents] = useState<Partial<StatusPageComponentRecord>[]>([]);
+  const [isFormSubmitting, setIsFormSubmitting] = useState(false);
+  const [componentsLoaded, setComponentsLoaded] = useState(false);
+  
+  const updateMutation = useUpdateOperationalPage();
+  const createComponentMutation = useCreateStatusPageComponent();
+  const deleteComponentMutation = useDeleteStatusPageComponent();
+  
+  // Fetch existing components for this operational page
+  const { data: components = [] } = useStatusPageComponentsByOperationalId(page?.id || '');
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      title: '',
+      description: '',
+      slug: '',
+      theme: 'default',
+      status: 'operational',
+      is_public: true,
+      logo_url: '',
+      custom_domain: '',
+      custom_css: '',
+      page_style: '',
+    },
+  });
+
+  // Memoize the form reset values to prevent unnecessary re-renders
+  const formValues = useMemo(() => {
+    if (!page) return null;
+    return {
+      title: page.title,
+      description: page.description,
+      slug: page.slug,
+      theme: page.theme,
+      status: page.status,
+      is_public: page.is_public === 'true',
+      logo_url: page.logo_url || '',
+      custom_domain: page.custom_domain || '',
+      custom_css: page.custom_css || '',
+      page_style: page.page_style || '',
+    };
+  }, [page?.id, page?.title, page?.description, page?.slug, page?.theme, page?.status, page?.is_public, page?.logo_url, page?.custom_domain, page?.custom_css, page?.page_style]);
+
+  // Reset form when page data changes
+  useEffect(() => {
+    if (formValues) {
+      form.reset(formValues);
+    }
+  }, [formValues, form]);
+
+  // Convert components to selector format and initialize state - only when dialog opens and components change
+  useEffect(() => {
+    if (!open || !page?.id || !components) {
+      return;
+    }
+
+    // Only update if components actually changed or haven't been loaded yet
+    const componentIds = components.map(c => c.id).sort().join(',');
+    const currentSelectedIds = selectedComponents.map(c => c.id).filter(Boolean).sort().join(',');
+    
+    if (componentIds !== currentSelectedIds || !componentsLoaded) {
+ //     console.log('Loading existing components:', components);
+      const existingComponentsForSelector = components.map(comp => ({
+        id: comp.id,
+        name: comp.name,
+        description: comp.description,
+        service_id: comp.service_id,
+        server_id: comp.server_id,
+        display_order: comp.display_order,
+        operational_status_id: comp.operational_status_id,
+      }));
+      
+      setSelectedComponents(existingComponentsForSelector);
+      setComponentsLoaded(true);
+    }
+  }, [open, page?.id, components, componentsLoaded, selectedComponents]);
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setComponentsLoaded(false);
+      setSelectedComponents([]);
+    }
+  }, [open]);
+
+  const handleComponentDelete = useCallback(async (componentId: string) => {
+    try {
+   //   console.log('Deleting component:', componentId);
+      await deleteComponentMutation.mutateAsync(componentId);
+      
+      // Update local state to remove the deleted component
+      setSelectedComponents(prev => prev.filter(comp => comp.id !== componentId));
+    } catch (error) {
+   //   console.error('Error deleting component:', error);
+    }
+  }, [deleteComponentMutation]);
+
+  const onSubmit = async (data: FormData) => {
+    if (!page) return;
+
+    try {
+      setIsFormSubmitting(true);
+      
+      const payload = {
+        title: data.title,
+        description: data.description,
+        slug: data.slug,
+        theme: data.theme,
+        status: data.status,
+        is_public: data.is_public ? 'true' : 'false',
+        logo_url: data.logo_url || '',
+        custom_domain: data.custom_domain || '',
+        custom_css: data.custom_css || '',
+        page_style: data.page_style || '',
+      };
+      
+   //   console.log('Updating operational page with payload:', payload);
+      await updateMutation.mutateAsync({ id: page.id, data: payload });
+      
+      // Handle component changes
+      const currentComponentIds = components.map(c => c.id);
+      const newComponentsToCreate = selectedComponents.filter(comp => !comp.id);
+      const componentsToDelete = components.filter(comp => !selectedComponents.some(selected => selected.id === comp.id));
+
+      // Delete removed components
+      for (const component of componentsToDelete) {
+    //    console.log('Deleting component during save:', component.id);
+        await deleteComponentMutation.mutateAsync(component.id);
+      }
+
+      // Create new components
+      for (const component of newComponentsToCreate) {
+        const componentPayload = {
+          operational_status_id: page.id,
+          name: component.name || '',
+          description: component.description || '',
+          service_id: component.service_id || '',
+          server_id: component.server_id || '',
+          display_order: component.display_order || 1,
+        };
+        
+    //    console.log('Creating component with payload:', componentPayload);
+        await createComponentMutation.mutateAsync(componentPayload);
+      }
+      
+      onOpenChange(false);
+    } catch (error) {
+    //  console.error('Error updating operational page:', error);
+    } finally {
+      setIsFormSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Edit Operational Page</DialogTitle>
+          <DialogDescription>
+            Update your operational status page settings and manage components.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Title</FormLabel>
+                    <FormControl>
+                      <Input placeholder="My Service Status" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="slug"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Slug</FormLabel>
+                    <FormControl>
+                      <Input placeholder="my-service-status" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea 
+                      placeholder="A brief description of your operational page" 
+                      className="min-h-[80px]"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="theme"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Theme</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select theme" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="default">Default</SelectItem>
+                        <SelectItem value="dark">Dark</SelectItem>
+                        <SelectItem value="light">Light</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Status</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select status" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="operational">Operational</SelectItem>
+                        <SelectItem value="degraded">Degraded Performance</SelectItem>
+                        <SelectItem value="maintenance">Under Maintenance</SelectItem>
+                        <SelectItem value="major_outage">Major Outage</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="is_public"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                  <div className="space-y-0.5">
+                    <FormLabel>Public Page</FormLabel>
+                    <FormDescription>
+                      Make this page publicly accessible
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="custom_domain"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Custom Domain (Optional)</FormLabel>
+                  <FormControl>
+                    <Input placeholder="status.yourdomain.com" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Custom domain for your status page
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <ComponentsSelector
+              selectedComponents={selectedComponents}
+              onComponentsChange={setSelectedComponents}
+              onComponentDelete={handleComponentDelete}
+            />
+
+            <div className="flex justify-end gap-2 pt-4">
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit" 
+                disabled={isFormSubmitting || updateMutation.isPending || createComponentMutation.isPending}
+              >
+                {isFormSubmitting || updateMutation.isPending || createComponentMutation.isPending ? 'Updating...' : 'Update Page'}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,101 @@
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { OperationalPageRecord } from '@/types/operational.types';
+import { StatusBadge } from './StatusBadge';
+import { Globe, ExternalLink, Eye, Settings, Trash2 } from 'lucide-react';
+import { format } from 'date-fns';
+
+interface OperationalPageCardProps {
+  page: OperationalPageRecord;
+  onEdit?: (page: OperationalPageRecord) => void;
+  onView?: (page: OperationalPageRecord) => void;
+  onDelete?: (page: OperationalPageRecord) => void;
+}
+
+export const OperationalPageCard = ({ page, onEdit, onView, onDelete }: OperationalPageCardProps) => {
+  return (
+    <Card className="hover:shadow-lg transition-shadow duration-200">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <CardTitle className="text-lg font-semibold mb-1">{page.title}</CardTitle>
+            <CardDescription className="text-sm text-muted-foreground">
+              {page.description}
+            </CardDescription>
+          </div>
+          <StatusBadge status={page.status} />
+        </div>
+      </CardHeader>
+      
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <span className="font-medium text-muted-foreground">Slug:</span>
+            <p className="mt-1">{page.slug}</p>
+          </div>
+          <div>
+            <span className="font-medium text-muted-foreground">Theme:</span>
+            <p className="mt-1 capitalize">{page.theme}</p>
+          </div>
+          <div>
+            <span className="font-medium text-muted-foreground">Public:</span>
+            <p className="mt-1">
+              <Badge variant={page.is_public === 'true' ? 'default' : 'secondary'}>
+                {page.is_public === 'true' ? 'Yes' : 'No'}
+              </Badge>
+            </p>
+          </div>
+          <div>
+            <span className="font-medium text-muted-foreground">Updated:</span>
+            <p className="mt-1">{format(new Date(page.updated), 'MMM dd, yyyy')}</p>
+          </div>
+        </div>
+
+        {page.custom_domain && (
+          <div className="flex items-center gap-2 p-2 bg-muted rounded-md">
+            <Globe className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">{page.custom_domain}</span>
+            <ExternalLink className="h-3 w-3 text-muted-foreground" />
+          </div>
+        )}
+
+        <div className="flex gap-2 pt-2">
+          {onView && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onView(page)}
+              className="flex-1"
+            >
+              <Eye className="h-4 w-4 mr-2" />
+              View
+            </Button>
+          )}
+          {onEdit && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onEdit(page)}
+              className="flex-1"
+            >
+              <Settings className="h-4 w-4 mr-2" />
+              Edit
+            </Button>
+          )}
+          {onDelete && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onDelete(page)}
+              className="text-red-600 hover:text-red-700 hover:bg-red-50"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

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

@@ -0,0 +1,211 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useOperationalPages, useDeleteOperationalPage } from '@/hooks/useOperationalPage';
+import { CreateOperationalPageDialog } from './CreateOperationalPageDialog';
+import { EditOperationalPageDialog } from './EditOperationalPageDialog';
+import { OperationalPageCard } from './OperationalPageCard';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { OperationalPageRecord } from '@/types/operational.types';
+import { Activity, Plus, RefreshCw } from 'lucide-react';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+export const OperationalPageContent = () => {
+  const navigate = useNavigate();
+  const { data: pages, isLoading, error, refetch, isRefetching } = useOperationalPages();
+  const deleteMutation = useDeleteOperationalPage();
+  
+  const [editingPage, setEditingPage] = useState<OperationalPageRecord | null>(null);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [pageToDelete, setPageToDelete] = useState<OperationalPageRecord | null>(null);
+
+  const handleEdit = (page: OperationalPageRecord) => {
+    setEditingPage(page);
+    setEditDialogOpen(true);
+  };
+
+  const handleView = (page: OperationalPageRecord) => {
+    if (page.custom_domain) {
+      window.open(`https://${page.custom_domain}`, '_blank');
+    } else {
+      // Navigate to the public status page route using the correct format
+      window.open(`/public/${page.slug}`, '_blank');
+    }
+  };
+
+  const handleDelete = (page: OperationalPageRecord) => {
+    setPageToDelete(page);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    if (pageToDelete) {
+      try {
+        await deleteMutation.mutateAsync(pageToDelete.id);
+        setDeleteDialogOpen(false);
+        setPageToDelete(null);
+      } catch (error) {
+        console.error('Error deleting page:', error);
+      }
+    }
+  };
+
+  if (error) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="text-center">
+          <div className="mb-4">
+            <Activity className="h-12 w-12 text-muted-foreground mx-auto" />
+          </div>
+          <h3 className="text-lg font-semibold mb-2">Failed to load operational pages</h3>
+          <p className="text-muted-foreground mb-4">
+            There was an error loading your operational pages. Please try again.
+          </p>
+          <Button onClick={() => refetch()} variant="outline">
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Try Again
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight mb-2">Operational Pages</h1>
+          <p className="text-muted-foreground">
+            Manage your public status pages and monitor service health
+          </p>
+        </div>
+        
+        <div className="flex items-center gap-2 mt-4 sm:mt-0">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => refetch()}
+            disabled={isRefetching}
+          >
+            <RefreshCw className={`h-4 w-4 mr-2 ${isRefetching ? 'animate-spin' : ''}`} />
+            Refresh
+          </Button>
+          <CreateOperationalPageDialog />
+        </div>
+      </div>
+
+      {/* Loading State */}
+      {isLoading && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[...Array(6)].map((_, i) => (
+            <Card key={i}>
+              <div className="p-6">
+                <Skeleton className="h-6 w-3/4 mb-2" />
+                <Skeleton className="h-4 w-full mb-4" />
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-1/2" />
+                  <Skeleton className="h-4 w-1/3" />
+                </div>
+                <div className="flex gap-2 mt-4">
+                  <Skeleton className="h-8 flex-1" />
+                  <Skeleton className="h-8 flex-1" />
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!isLoading && (!pages || pages.length === 0) && (
+        <Card className="p-12">
+          <CardContent className="text-center">
+            <div className="mb-4">
+              <Activity className="h-12 w-12 text-muted-foreground mx-auto" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">No operational pages found</h3>
+            <p className="text-muted-foreground mb-6">
+              Create your first operational page to start monitoring your services and communicate status to your users.
+            </p>
+            <CreateOperationalPageDialog />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Pages Grid */}
+      {!isLoading && pages && pages.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {pages.map((page) => (
+            <OperationalPageCard
+              key={page.id}
+              page={page}
+              onEdit={handleEdit}
+              onView={handleView}
+              onDelete={handleDelete}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Stats Footer */}
+      {!isLoading && pages && pages.length > 0 && (
+        <div className="mt-8 pt-6 border-t">
+          <div className="flex flex-wrap gap-6 text-sm text-muted-foreground">
+            <div>
+              <span className="font-medium">Total Pages:</span> {pages.length}
+            </div>
+            <div>
+              <span className="font-medium">Public Pages:</span>{' '}
+              {pages.filter(p => p.is_public === 'true').length}
+            </div>
+            <div>
+              <span className="font-medium">Operational:</span>{' '}
+              {pages.filter(p => p.status === 'operational').length}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Dialog */}
+      <EditOperationalPageDialog
+        page={editingPage}
+        open={editDialogOpen}
+        onOpenChange={setEditDialogOpen}
+      />
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Operational Page</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete "{pageToDelete?.title}"? This action cannot be undone and will permanently remove the operational page and all its components.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              className="bg-red-600 hover:bg-red-700"
+              disabled={deleteMutation.isPending}
+            >
+              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};

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

@@ -0,0 +1,47 @@
+
+import { Badge } from '@/components/ui/badge';
+import { OperationalPageRecord } from '@/types/operational.types';
+
+interface StatusBadgeProps {
+  status: OperationalPageRecord['status'];
+}
+
+export const StatusBadge = ({ status }: StatusBadgeProps) => {
+  const getStatusConfig = (status: OperationalPageRecord['status']) => {
+    switch (status) {
+      case 'operational':
+        return {
+          label: 'Operational',
+          className: 'bg-green-100 text-green-800 hover:bg-green-200',
+        };
+      case 'degraded':
+        return {
+          label: 'Degraded Performance',
+          className: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200',
+        };
+      case 'maintenance':
+        return {
+          label: 'Under Maintenance',
+          className: 'bg-blue-100 text-blue-800 hover:bg-blue-200',
+        };
+      case 'major_outage':
+        return {
+          label: 'Major Outage',
+          className: 'bg-red-100 text-red-800 hover:bg-red-200',
+        };
+      default:
+        return {
+          label: 'Unknown',
+          className: 'bg-gray-100 text-gray-800 hover:bg-gray-200',
+        };
+    }
+  };
+
+  const config = getStatusConfig(status);
+
+  return (
+    <Badge className={config.className}>
+      {config.label}
+    </Badge>
+  );
+};

application/src/components/profile/ChangePasswordForm.tsx

@@ -1,4 +1,3 @@
-
 import { useState } from "react";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
@@ -10,6 +9,7 @@ import { useToast } from "@/hooks/use-toast";
 import { Eye, EyeOff } from "lucide-react";
 import { pb } from "@/lib/pocketbase";
 import { authService } from "@/services/authService";
+import { useNavigate } from "react-router-dom";
 
 // Password change form schema
 const passwordFormSchema = z.object({
@@ -34,6 +34,7 @@ export function ChangePasswordForm({ userId }: ChangePasswordFormProps) {
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   
   const { toast } = useToast();
+  const navigate = useNavigate();
   
   const form = useForm<PasswordFormValues>({
     resolver: zodResolver(passwordFormSchema),
@@ -44,12 +45,35 @@ export function ChangePasswordForm({ userId }: ChangePasswordFormProps) {
     },
   });
 
+  // Function to determine which collection the user belongs to
+  const getUserCollection = async (userId: string): Promise<string> => {
+    try {
+      // First try to find the user in the regular users collection
+      await pb.collection('users').getOne(userId);
+      return 'users';
+    } catch (error) {
+      try {
+        // If not found, try the superadmin collection
+        await pb.collection('_superusers').getOne(userId);
+        return '_superusers';
+      } catch (error) {
+        throw new Error('User not found in any collection');
+      }
+    }
+  };
+
   async function onSubmit(data: PasswordFormValues) {
     setIsSubmitting(true);
     
     try {
+      console.log("Starting password change for user:", userId);
+      
+      // Determine which collection the user belongs to
+      const collection = await getUserCollection(userId);
+      console.log("User found in collection:", collection);
+      
       // PocketBase requires the old password along with the new one
-      await pb.collection('users').update(userId, {
+      await pb.collection(collection).update(userId, {
         oldPassword: data.currentPassword,
         password: data.newPassword,
         passwordConfirm: data.confirmPassword,
@@ -60,18 +84,32 @@ export function ChangePasswordForm({ userId }: ChangePasswordFormProps) {
       
       toast({
         title: "Password updated",
-        description: "Your password has been changed successfully.",
+        description: "Your password has been changed successfully. You will be logged out in 3 seconds for security.",
       });
       
       // Reset the form
       form.reset();
+      
+      // Auto logout after successful password change
+      setTimeout(() => {
+        console.log("Auto logout after password change");
+        authService.logout();
+        navigate("/login");
+      }, 3000);
+      
     } catch (error) {
       console.error("Password change error:", error);
       
       let errorMessage = "Failed to update password. Please try again.";
       if (error instanceof Error) {
+        if (error.message.includes("Failed to authenticate")) {
+          errorMessage = "Current password is incorrect. Please try again.";
+        } else if (error.message.includes("User not found")) {
+          errorMessage = "User account not found. Please contact your administrator.";
+        } else {
           errorMessage = error.message;
         }
+      }
       
       toast({
         title: "Password change failed",

application/src/components/profile/UpdateProfileForm.tsx

@@ -11,6 +11,7 @@ import { useToast } from "@/hooks/use-toast";
 import { authService } from "@/services/authService";
 import { AlertCircle, CheckCircle } from "lucide-react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import { useNavigate } from "react-router-dom";
 
 // Profile update form schema
 const profileFormSchema = z.object({
@@ -33,10 +34,10 @@ interface UpdateProfileFormProps {
 
 export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [emailChangeRequested, setEmailChangeRequested] = useState(false);
   const [updateError, setUpdateError] = useState<string | null>(null);
   const [updateSuccess, setUpdateSuccess] = useState<string | null>(null);
   const { toast } = useToast();
+  const navigate = useNavigate();
   
   // Initialize the form with current user data
   const form = useForm<ProfileFormValues>({
@@ -52,7 +53,6 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
     setIsSubmitting(true);
     setUpdateError(null);
     setUpdateSuccess(null);
-    setEmailChangeRequested(false);
     
     try {
       console.log("Submitting profile update with data:", data);
@@ -75,19 +75,25 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
       // Update user data using the userService
       await userService.updateUser(user.id, updateData);
       
-      // Refresh user data in auth context
+      // If email was changed, show success message and auto-logout
-      await authService.refreshUserData();
-      
-      // If email was changed, show a specific message
       if (isEmailChanged) {
-        setEmailChangeRequested(true);
+        setUpdateSuccess("Email changed successfully! You will be logged out for security reasons. Please log in again with your new email.");
-        setUpdateSuccess("A verification email has been sent to your new email address. Please check your inbox to complete the change.");
+        
         toast({
-          title: "Email verification sent",
+          title: "Email changed successfully",
-          description: "A verification email has been sent to your new email address. Please check your inbox and follow the instructions to complete the change.",
+          description: "You will be logged out for security reasons. Please log in again with your new email.",
           variant: "default",
         });
+        
+        // Auto-logout after 3 seconds
+        setTimeout(() => {
+          authService.logout();
+          navigate("/login");
+        }, 3000);
       } else {
+        // Refresh user data in auth context for other field changes
+        await authService.refreshUserData();
+        
         setUpdateSuccess("Your profile information has been updated successfully.");
         toast({
           title: "Profile updated",
@@ -133,16 +139,6 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
           </Alert>
         )}
 
-        {emailChangeRequested && (
-          <Alert className="bg-yellow-50 border-yellow-200 text-yellow-800">
-            <AlertCircle className="h-4 w-4 text-yellow-600" />
-            <AlertDescription>
-              A verification email has been sent to your new email address. 
-              Please check your inbox and follow the instructions to complete the change.
-            </AlertDescription>
-          </Alert>
-        )}
-
         <FormField
           control={form.control}
           name="full_name"
@@ -183,7 +179,7 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
               <FormMessage />
               {field.value !== user.email && (
                 <p className="text-xs text-muted-foreground mt-1">
-                  Changing your email requires verification. A verification email will be sent.
+                  Changing your email will log you out for security reasons. You will need to log in again with your new email.
                 </p>
               )}
             </FormItem>

application/src/components/public/ComponentsStatusSection.tsx

@@ -0,0 +1,210 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Server, CheckCircle, XCircle, AlertTriangle, Pause, Clock } from 'lucide-react';
+import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
+import { Service, UptimeData } from '@/types/service.types';
+import { UptimeHistoryRenderer } from './UptimeHistoryRenderer';
+import { format } from 'date-fns';
+
+interface ComponentsStatusSectionProps {
+  components: StatusPageComponentRecord[];
+  services: Service[];
+  uptimeData: Record<string, UptimeData[]>;
+}
+
+export const ComponentsStatusSection = ({ components, services, uptimeData }: ComponentsStatusSectionProps) => {
+  const getServiceForComponent = (component: StatusPageComponentRecord) => {
+    return services.find(service => service.id === component.service_id);
+  };
+
+  const getComponentStatus = (component: StatusPageComponentRecord) => {
+    const service = getServiceForComponent(component);
+    return service?.status || 'unknown';
+  };
+
+  const getUptimePercentage = (serviceId: string) => {
+    const history = uptimeData[serviceId] || [];
+    if (history.length === 0) return 100;
+    
+    const upCount = history.filter(record => record.status === 'up').length;
+    return Math.round((upCount / history.length) * 100 * 100) / 100;
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'up':
+        return <CheckCircle className="h-5 w-5 text-green-500" />;
+      case 'down':
+        return <XCircle className="h-5 w-5 text-red-500" />;
+      case 'warning':
+        return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
+      case 'paused':
+        return <Pause className="h-5 w-5 text-gray-500" />;
+      default:
+        return <Server className="h-5 w-5 text-muted-foreground" />;
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'up':
+        return (
+          <Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 border-green-200 dark:border-green-800">
+            <CheckCircle className="h-3 w-3 mr-1" />
+            Operational
+          </Badge>
+        );
+      case 'down':
+        return (
+          <Badge className="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 border-red-200 dark:border-red-800">
+            <XCircle className="h-3 w-3 mr-1" />
+            Down
+          </Badge>
+        );
+      case 'warning':
+        return (
+          <Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 border-yellow-200 dark:border-yellow-800">
+            <AlertTriangle className="h-3 w-3 mr-1" />
+            Degraded
+          </Badge>
+        );
+      case 'paused':
+        return (
+          <Badge className="bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 border-gray-200 dark:border-gray-800">
+            <Pause className="h-3 w-3 mr-1" />
+            Maintenance
+          </Badge>
+        );
+      default:
+        return (
+          <Badge className="bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
+            Unknown
+          </Badge>
+        );
+    }
+  };
+
+  const getStatusDotColor = (status: string) => {
+    switch (status) {
+      case 'up':
+        return 'bg-green-500';
+      case 'down':
+        return 'bg-red-500';
+      case 'warning':
+        return 'bg-yellow-500';
+      default:
+        return 'bg-gray-500';
+    }
+  };
+
+  if (components.length === 0) {
+    return (
+      <Card className="mb-8 bg-card border-border">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-card-foreground">
+            <Server className="h-5 w-5" />
+            System Components
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {[
+              { name: 'API Services', description: 'Core API endpoints and services', status: 'up' },
+              { name: 'Database', description: 'Primary database systems', status: 'up' },
+              { name: 'Authentication', description: 'User authentication services', status: 'up' },
+              { name: 'File Storage', description: 'Media and file hosting', status: 'up' }
+            ].map((component, index) => (
+              <div key={index} className="flex items-center justify-between p-4 rounded-lg border border-border bg-background/50 hover:bg-background/80 transition-colors">
+                <div className="flex items-center gap-3">
+                  {getStatusIcon(component.status)}
+                  <div>
+                    <h3 className="font-medium text-foreground">{component.name}</h3>
+                    <p className="text-sm text-muted-foreground">{component.description}</p>
+                    <div className="flex items-center gap-2 mt-1">
+                      <span className="text-xs text-green-600 dark:text-green-400 font-medium">99.9% uptime</span>
+                      <span className="text-xs text-muted-foreground">•</span>
+                      <span className="text-xs text-muted-foreground">100ms response</span>
+                    </div>
+                  </div>
+                </div>
+                {getStatusBadge(component.status)}
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="mb-8 bg-card border-border">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-card-foreground">
+          <Server className="h-5 w-5" />
+          System Components
+        </CardTitle>
+        <p className="text-sm text-muted-foreground">
+          Real-time status of all monitored components
+        </p>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {components
+            .sort((a, b) => a.display_order - b.display_order)
+            .map((component) => {
+              const service = getServiceForComponent(component);
+              const status = getComponentStatus(component);
+              const uptime = service?.id ? getUptimePercentage(component.service_id) : 100;
+              
+              return (
+                <div key={component.id} className="space-y-4">
+                  <div className="flex items-center justify-between p-5 rounded-lg border border-border bg-background/50 hover:bg-background/80 transition-all duration-200">
+                    <div className="flex items-center gap-4">
+                      {getStatusIcon(status)}
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <h3 className="font-semibold text-foreground text-lg">{component.name}</h3>
+                          {service?.responseTime && service.responseTime > 0 && (
+                            <div className="flex items-center gap-1 text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
+                              <Clock className="h-3 w-3" />
+                              {service.responseTime}ms
+                            </div>
+                          )}
+                        </div>
+                        {component.description && (
+                          <p className="text-sm text-muted-foreground mb-2">{component.description}</p>
+                        )}
+                        <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                          <div className="flex items-center gap-2">
+                            <div className={`h-2 w-2 rounded-full ${getStatusDotColor(status)}`}></div>
+                            <span className="font-medium">{uptime}% uptime (90 days)</span>
+                          </div>
+                          {service?.lastChecked && (
+                            <span>Last checked: {format(new Date(service.lastChecked), 'HH:mm:ss')}</span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex flex-col items-end gap-2">
+                      {getStatusBadge(status)}
+                    </div>
+                  </div>
+                  
+                  {component.service_id && (
+                    <div className="ml-9">
+                      <div className="text-xs text-muted-foreground mb-2">90-day uptime history</div>
+                      <UptimeHistoryRenderer 
+                        serviceId={component.service_id} 
+                        uptimeData={uptimeData} 
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

application/src/components/public/CurrentStatusSection.tsx

@@ -0,0 +1,158 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Shield, Clock, CheckCircle, AlertTriangle, XCircle, Wrench } from 'lucide-react';
+import { format } from 'date-fns';
+import { OperationalPageRecord } from '@/types/operational.types';
+import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
+import { Service } from '@/types/service.types';
+
+interface CurrentStatusSectionProps {
+  page: OperationalPageRecord;
+  components: StatusPageComponentRecord[];
+  services: Service[];
+}
+
+const getActualStatus = (components: StatusPageComponentRecord[], services: Service[]) => {
+  if (components.length === 0) {
+    return 'operational'; // Default if no components
+  }
+
+  let hasDown = false;
+  let hasDegraded = false;
+  let hasMaintenance = false;
+
+  components.forEach(component => {
+    const service = services.find(s => s.id === component.service_id);
+    if (service) {
+      switch (service.status) {
+        case 'down':
+          hasDown = true;
+          break;
+        case 'warning':
+          hasDegraded = true;
+          break;
+        case 'paused':
+          hasMaintenance = true;
+          break;
+      }
+    }
+  });
+
+  // Priority: down > degraded > maintenance > operational
+  if (hasDown) return 'major_outage';
+  if (hasDegraded) return 'degraded';
+  if (hasMaintenance) return 'maintenance';
+  return 'operational';
+};
+
+const getStatusMessage = (status: OperationalPageRecord['status']) => {
+  switch (status) {
+    case 'operational':
+      return 'All systems are operational';
+    case 'degraded':
+      return 'Some systems are experiencing degraded performance';
+    case 'maintenance':
+      return 'Systems are currently under maintenance';
+    case 'major_outage':
+      return 'We are experiencing a major service outage';
+    default:
+      return 'Status unknown';
+  }
+};
+
+const getStatusColor = (status: OperationalPageRecord['status']) => {
+  switch (status) {
+    case 'operational':
+      return 'text-green-600 dark:text-green-400';
+    case 'degraded':
+      return 'text-yellow-600 dark:text-yellow-400';
+    case 'maintenance':
+      return 'text-blue-600 dark:text-blue-400';
+    case 'major_outage':
+      return 'text-red-600 dark:text-red-400';
+    default:
+      return 'text-muted-foreground';
+  }
+};
+
+const getStatusIcon = (status: OperationalPageRecord['status']) => {
+  switch (status) {
+    case 'operational':
+      return <CheckCircle className="h-6 w-6 text-green-500" />;
+    case 'degraded':
+      return <AlertTriangle className="h-6 w-6 text-yellow-500" />;
+    case 'maintenance':
+      return <Wrench className="h-6 w-6 text-blue-500" />;
+    case 'major_outage':
+      return <XCircle className="h-6 w-6 text-red-500" />;
+    default:
+      return <Shield className="h-6 w-6 text-muted-foreground" />;
+  }
+};
+
+const getStatusBackground = (status: OperationalPageRecord['status']) => {
+  switch (status) {
+    case 'operational':
+      return 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800';
+    case 'degraded':
+      return 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800';
+    case 'maintenance':
+      return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800';
+    case 'major_outage':
+      return 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800';
+    default:
+      return 'bg-gray-50 dark:bg-gray-900/20 border-gray-200 dark:border-gray-800';
+  }
+};
+
+export const CurrentStatusSection = ({ page, components, services }: CurrentStatusSectionProps) => {
+  const actualStatus = getActualStatus(components, services);
+  const displayStatus = actualStatus; // Use actual status for real-time accuracy
+  
+  return (
+    <Card className={`mb-8 border-2 ${getStatusBackground(displayStatus)}`}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3 text-card-foreground text-xl">
+          <Shield className="h-6 w-6" />
+          System Status
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className={`flex items-center justify-between p-6 rounded-lg border-2 ${getStatusBackground(displayStatus)}`}>
+          <div className="flex items-center gap-4">
+            {getStatusIcon(displayStatus)}
+            <div>
+              <h3 className={`text-2xl font-bold ${getStatusColor(displayStatus)}`}>
+                {getStatusMessage(displayStatus)}
+              </h3>
+              <p className="text-sm text-muted-foreground mt-1">
+                Status automatically updated based on component health
+              </p>
+            </div>
+          </div>
+          <div className={`px-4 py-2 rounded-full text-sm font-medium ${
+            displayStatus === 'operational' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
+            displayStatus === 'degraded' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' :
+            displayStatus === 'maintenance' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
+            'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+          }`}>
+            {displayStatus === 'operational' ? 'All Systems Operational' :
+             displayStatus === 'degraded' ? 'Degraded Performance' :
+             displayStatus === 'maintenance' ? 'Under Maintenance' : 'Major Outage'}
+          </div>
+        </div>
+        
+        <div className="flex items-center justify-between text-sm text-muted-foreground border-t pt-4">
+          <div className="flex items-center gap-2">
+            <Clock className="h-4 w-4" />
+            <span>Last updated: {format(new Date(), 'MMM dd, yyyy HH:mm')} UTC</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
+            <span>Live status monitoring</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

application/src/components/public/OverallUptimeSection.tsx

@@ -0,0 +1,197 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { TrendingUp, Calendar, BarChart3 } from 'lucide-react';
+import { UptimeData } from '@/types/service.types';
+import { UptimeHistoryRenderer } from './UptimeHistoryRenderer';
+
+interface OverallUptimeSectionProps {
+  uptimeData: Record<string, UptimeData[]>;
+}
+
+export const OverallUptimeSection = ({ uptimeData }: OverallUptimeSectionProps) => {
+  const getOverallUptime = () => {
+    const allHistories = Object.values(uptimeData);
+    if (allHistories.length === 0) return 99.9;
+    
+    let totalRecords = 0;
+    let upRecords = 0;
+    
+    allHistories.forEach(history => {
+      totalRecords += history.length;
+      upRecords += history.filter(record => record.status === 'up').length;
+    });
+    
+    if (totalRecords === 0) return 99.9;
+    return Math.round((upRecords / totalRecords) * 100 * 100) / 100;
+  };
+
+  const getUptimeTrend = () => {
+    const uptime = getOverallUptime();
+    if (uptime >= 99.9) return 'excellent';
+    if (uptime >= 99.5) return 'good';
+    if (uptime >= 95) return 'fair';
+    return 'poor';
+  };
+
+  const getIncidentCount = () => {
+    const allHistories = Object.values(uptimeData);
+    let incidents = 0;
+    
+    allHistories.forEach(history => {
+      let wasDown = false;
+      history.forEach(record => {
+        if (record.status === 'down' && !wasDown) {
+          incidents++;
+          wasDown = true;
+        } else if (record.status === 'up') {
+          wasDown = false;
+        }
+      });
+    });
+    
+    return incidents;
+  };
+
+  const getBadgeClassName = (trend: string) => {
+    switch (trend) {
+      case 'excellent':
+        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+      case 'good':
+        return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+      case 'fair':
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+      default:
+        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+    }
+  };
+
+  const getTrendText = (trend: string) => {
+    switch (trend) {
+      case 'excellent':
+        return 'Excellent';
+      case 'good':
+        return 'Good';
+      case 'fair':
+        return 'Fair';
+      default:
+        return 'Needs Improvement';
+    }
+  };
+
+  const getStatusMessage = (uptime: number) => {
+    if (uptime >= 99.9) {
+      return "All systems are performing excellently with minimal downtime.";
+    } else if (uptime >= 99.5) {
+      return "Systems are performing well with occasional minor issues.";
+    } else if (uptime >= 95) {
+      return "We're working to improve system reliability and reduce incidents.";
+    } else {
+      return "We apologize for recent service disruptions and are actively working on improvements.";
+    }
+  };
+
+  const overallUptime = getOverallUptime();
+  const trend = getUptimeTrend();
+  const incidentCount = getIncidentCount();
+
+  return (
+    <Card className="mb-8 bg-card border-border">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-card-foreground">
+          <BarChart3 className="h-5 w-5" />
+          Performance Metrics (Last 90 Days)
+        </CardTitle>
+        <p className="text-sm text-muted-foreground">
+          Historical performance and reliability statistics
+        </p>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <TrendingUp className="h-4 w-4 text-green-600 dark:text-green-400" />
+                <span className="text-sm font-medium text-green-700 dark:text-green-300">Overall Uptime</span>
+              </div>
+              <Badge className={getBadgeClassName(trend)}>
+                {getTrendText(trend)}
+              </Badge>
+            </div>
+            <div className="text-3xl font-bold text-green-600 dark:text-green-400">{overallUptime}%</div>
+            <div className="text-xs text-green-700 dark:text-green-300 mt-1">
+              Target: 99.9%
+            </div>
+          </div>
+
+          <div className="p-4 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
+            <div className="flex items-center gap-2 mb-2">
+              <Calendar className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+              <span className="text-sm font-medium text-blue-700 dark:text-blue-300">Incidents</span>
+            </div>
+            <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">{incidentCount}</div>
+            <div className="text-xs text-blue-700 dark:text-blue-300 mt-1">
+              Last 90 days
+            </div>
+          </div>
+
+          <div className="p-4 rounded-lg bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">
+            <div className="flex items-center gap-2 mb-2">
+              <BarChart3 className="h-4 w-4 text-purple-600 dark:text-purple-400" />
+              <span className="text-sm font-medium text-purple-700 dark:text-purple-300">Avg Response</span>
+            </div>
+            <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">100ms</div>
+            <div className="text-xs text-purple-700 dark:text-purple-300 mt-1">
+              Response time
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <h4 className="text-sm font-medium text-foreground">Uptime History</h4>
+            <div className="flex items-center gap-4 text-xs text-muted-foreground">
+              <div className="flex items-center gap-2">
+                <div className="h-3 w-3 bg-green-500 rounded"></div>
+                <span>Operational</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="h-3 w-3 bg-yellow-500 rounded"></div>
+                <span>Degraded</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="h-3 w-3 bg-red-500 rounded"></div>
+                <span>Down</span>
+              </div>
+            </div>
+          </div>
+          
+          <div className="p-4 bg-background/50 rounded-lg border">
+            {Object.keys(uptimeData).length > 0 ? (
+              <UptimeHistoryRenderer serviceId={Object.keys(uptimeData)[0]} uptimeData={uptimeData} />
+            ) : (
+              <div className="flex justify-center items-center h-12 text-muted-foreground">
+                <div className="flex gap-1">
+                  {Array.from({ length: 90 }, (_, i) => (
+                    <div key={i} className="h-8 w-1 bg-green-500 rounded-sm"></div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>90 days ago</span>
+            <span>Today</span>
+          </div>
+        </div>
+
+        <div className="p-4 bg-muted/50 rounded-lg border">
+          <div className="text-sm text-muted-foreground text-center">
+            {getStatusMessage(overallUptime)}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

application/src/components/public/PublicStatusPage.tsx

@@ -0,0 +1,129 @@
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { RefreshCw, AlertCircle } from 'lucide-react';
+import { usePublicStatusPageData } from './hooks/usePublicStatusPageData';
+import { StatusPageHeader } from './StatusPageHeader';
+import { CurrentStatusSection } from './CurrentStatusSection';
+import { ComponentsStatusSection } from './ComponentsStatusSection';
+import { OverallUptimeSection } from './OverallUptimeSection';
+import { PublicStatusPageFooter } from './PublicStatusPageFooter';
+
+export const PublicStatusPage = () => {
+  const { slug } = useParams<{ slug: string }>();
+  console.log('PublicStatusPage - slug from params:', slug);
+  
+  const { page, components, services, uptimeData, loading, error } = usePublicStatusPageData(slug);
+  const [lastUpdated, setLastUpdated] = useState(new Date());
+
+  // Auto-refresh every 30 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setLastUpdated(new Date());
+      // The usePublicStatusPageData hook handles data refetching
+    }, 30000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  // Apply theme to document
+  useEffect(() => {
+    if (page) {
+      const root = document.documentElement;
+      
+      // Remove any existing theme classes
+      root.classList.remove('dark', 'light');
+      
+      // Apply the selected theme
+      if (page.theme === 'dark') {
+        root.classList.add('dark');
+      } else if (page.theme === 'light') {
+        root.classList.add('light');
+      }
+      // For 'default' theme, don't add any class (uses system preference)
+    }
+    
+    // Cleanup on unmount
+    return () => {
+      const root = document.documentElement;
+      root.classList.remove('dark', 'light');
+    };
+  }, [page?.theme]);
+
+  console.log('PublicStatusPage state:', { loading, error, page: !!page, components: components.length, services: services.length });
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-center space-y-4">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+          <div className="space-y-2">
+            <p className="text-lg font-medium text-foreground">Loading Status Page</p>
+            <p className="text-sm text-muted-foreground">Fetching real-time system status...</p>
+            <p className="text-xs text-muted-foreground">Slug: {slug || 'No slug provided'}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !page) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-center space-y-6 max-w-md">
+          <div className="mx-auto h-16 w-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center">
+            <AlertCircle className="h-8 w-8 text-red-600 dark:text-red-400" />
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-2xl font-bold text-foreground">Status Page Not Found</h1>
+            <p className="text-muted-foreground">
+              {error || 'The requested status page could not be found or is not publicly accessible.'}
+            </p>
+            <p className="text-xs text-muted-foreground">Slug: {slug || 'No slug provided'}</p>
+          </div>
+          <div className="flex gap-3 justify-center">
+            <Button onClick={() => window.history.back()} variant="outline">
+              Go Back
+            </Button>
+            <Button onClick={() => window.location.reload()} className="gap-2">
+              <RefreshCw className="h-4 w-4" />
+              Retry
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      {/* Header */}
+      <StatusPageHeader page={page} />
+
+      {/* Main Content */}
+      <main className="max-w-4xl mx-auto px-4 py-8">
+        {/* Current Status */}
+        <CurrentStatusSection page={page} components={components} services={services} />
+
+        {/* Components Status */}
+        <ComponentsStatusSection 
+          components={components} 
+          services={services} 
+          uptimeData={uptimeData} 
+        />
+
+        {/* Overall Uptime History */}
+        <OverallUptimeSection uptimeData={uptimeData} />
+
+        {/* Footer */}
+        <PublicStatusPageFooter page={page} />
+      </main>
+
+      {/* Custom CSS */}
+      {page.custom_css && (
+        <style dangerouslySetInnerHTML={{ __html: page.custom_css }} />
+      )}
+    </div>
+  );
+};

application/src/components/public/PublicStatusPageFooter.tsx

@@ -0,0 +1,86 @@
+
+import { OperationalPageRecord } from '@/types/operational.types';
+import { format } from 'date-fns';
+import { Clock, Shield, Zap, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface PublicStatusPageFooterProps {
+  page: OperationalPageRecord;
+}
+
+export const PublicStatusPageFooter = ({ page }: PublicStatusPageFooterProps) => {
+  const handleRefresh = () => {
+    window.location.reload();
+  };
+
+  return (
+    <footer className="mt-12 pt-8 border-t border-border">
+      <div className="space-y-6">
+        {/* Status Information */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 bg-muted/30 rounded-lg border">
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 bg-green-500/10 rounded-lg flex items-center justify-center">
+              <Shield className="h-5 w-5 text-green-600 dark:text-green-400" />
+            </div>
+            <div>
+              <div className="font-medium text-foreground">Real-time Monitoring</div>
+              <div className="text-sm text-muted-foreground">24/7 automated checks</div>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 bg-blue-500/10 rounded-lg flex items-center justify-center">
+              <Zap className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+            </div>
+            <div>
+              <div className="font-medium text-foreground">Instant Updates</div>
+              <div className="text-sm text-muted-foreground">Status changes in real-time</div>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 bg-purple-500/10 rounded-lg flex items-center justify-center">
+              <Clock className="h-5 w-5 text-purple-600 dark:text-purple-400" />
+            </div>
+            <div>
+              <div className="font-medium text-foreground">Historical Data</div>
+              <div className="text-sm text-muted-foreground">90-day performance history</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2">
+              <Clock className="h-4 w-4" />
+              <span>Last updated: {format(new Date(), 'MMM dd, yyyy HH:mm:ss')} UTC</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
+              <span>Monitoring active</span>
+            </div>
+          </div>
+          
+          <Button variant="outline" size="sm" onClick={handleRefresh} className="gap-2">
+            <RefreshCw className="h-4 w-4" />
+            Refresh Status
+          </Button>
+        </div>
+
+        {/* Disclaimer */}
+        <div className="text-center text-xs text-muted-foreground p-4 bg-muted/20 rounded-lg">
+          <p>
+            This status page provides real-time information about our systems and services. 
+            Historical data reflects the last 90 days of monitoring. For support inquiries, please contact our team.
+          </p>
+          {page.custom_domain && (
+            <p className="mt-2">
+              Powered by automated monitoring • Status page for {page.title}
+            </p>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+};

application/src/components/public/StatusPageHeader.tsx

@@ -0,0 +1,71 @@
+
+import { OperationalPageRecord } from '@/types/operational.types';
+import { Shield, Globe, ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface StatusPageHeaderProps {
+  page: OperationalPageRecord;
+}
+
+export const StatusPageHeader = ({ page }: StatusPageHeaderProps) => {
+  return (
+    <header className="bg-background border-b border-border">
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            {page.logo_url ? (
+              <img 
+                src={page.logo_url} 
+                alt={`${page.title} logo`}
+                className="h-12 w-12 rounded-lg object-cover"
+              />
+            ) : (
+              <div className="h-12 w-12 bg-primary/10 rounded-lg flex items-center justify-center">
+                <Shield className="h-6 w-6 text-primary" />
+              </div>
+            )}
+            <div>
+              <h1 className="text-3xl font-bold text-foreground">{page.title}</h1>
+              <p className="text-muted-foreground mt-1">{page.description}</p>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-3">
+            {page.custom_domain && (
+              <Button variant="outline" size="sm" asChild>
+                <a 
+                  href={`https://${page.custom_domain}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-2"
+                >
+                  <Globe className="h-4 w-4" />
+                  Visit Site
+                  <ExternalLink className="h-3 w-3" />
+                </a>
+              </Button>
+            )}
+            
+            <div className="text-right text-sm text-muted-foreground">
+              <div className="flex items-center gap-1">
+                <div className="h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
+                <span className="font-medium">Live Status</span>
+              </div>
+              <div className="text-xs">
+                Auto-updated every 30s
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        {/* Breadcrumb */}
+        <div className="mt-6 flex items-center gap-2 text-sm text-muted-foreground">
+          <Shield className="h-4 w-4" />
+          <span>Status Page</span>
+          <span>•</span>
+          <span className="text-foreground font-medium">{page.title}</span>
+        </div>
+      </div>
+    </header>
+  );
+};

application/src/components/public/UptimeHistoryRenderer.tsx

@@ -0,0 +1,182 @@
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
+import { format } from 'date-fns';
+import { UptimeData } from '@/types/service.types';
+
+interface UptimeHistoryRendererProps {
+  serviceId: string;
+  uptimeData: Record<string, UptimeData[]>;
+}
+
+export const UptimeHistoryRenderer = ({ serviceId, uptimeData }: UptimeHistoryRendererProps) => {
+  const renderUptimeHistory = (serviceId: string) => {
+    const history = uptimeData[serviceId] || [];
+    
+    // Generate array for the last 90 days
+    const days = Array.from({ length: 90 }, (_, i) => {
+      const daysSinceToday = 90 - i - 1;
+      const date = new Date();
+      date.setDate(date.getDate() - daysSinceToday);
+      date.setHours(0, 0, 0, 0); // Set to start of day for comparison
+      return date;
+    });
+
+    if (history.length === 0) {
+      // Generate mock data if no real data - showing mostly operational with some realistic incidents
+      return days.map((date, i) => {
+        // Simulate some realistic patterns - mostly up with occasional incidents
+        const isUp = Math.random() > 0.02; // 98% uptime simulation
+        const responseTime = isUp ? Math.floor(Math.random() * 200) + 50 : 0;
+        
+        return (
+          <TooltipProvider key={i}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div
+                  className={`h-8 w-1 rounded-sm cursor-pointer ${
+                    isUp ? 'bg-green-500 hover:bg-green-600' : 'bg-red-500 hover:bg-red-600'
+                  }`}
+                />
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="text-sm">
+                  <div className="font-medium">{format(date, 'MMM dd, yyyy')}</div>
+                  <div className="text-muted-foreground">
+                    Status: {isUp ? 'Operational' : 'Incident - Down'}
+                  </div>
+                  {isUp && (
+                    <div className="text-muted-foreground">
+                      Response: {responseTime}ms
+                    </div>
+                  )}
+                  {!isUp && (
+                    <div className="text-muted-foreground text-red-400">
+                      Service outage detected
+                    </div>
+                  )}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        );
+      });
+    }
+
+    // Create a map of dates to status records for efficient lookup and incident tracking
+    const dateToRecordMap = new Map();
+    const incidentsByDate = new Map();
+    
+    history.forEach(record => {
+      const recordDate = new Date(record.timestamp);
+      recordDate.setHours(0, 0, 0, 0); // Normalize to start of day
+      const dateKey = recordDate.toDateString();
+      
+      // Track incidents for this date
+      if (!incidentsByDate.has(dateKey)) {
+        incidentsByDate.set(dateKey, []);
+      }
+      incidentsByDate.get(dateKey).push(record);
+      
+      // Keep the latest record for each day (or aggregate if needed)
+      if (!dateToRecordMap.has(dateKey) || 
+          new Date(record.timestamp) > new Date(dateToRecordMap.get(dateKey).timestamp)) {
+        dateToRecordMap.set(dateKey, record);
+      }
+    });
+
+    // Use real uptime data mapped to the correct days with incident details
+    return days.map((date, i) => {
+      const dateKey = date.toDateString();
+      const record = dateToRecordMap.get(dateKey);
+      const incidents = incidentsByDate.get(dateKey) || [];
+      
+      // Calculate uptime percentage for the day
+      const uptimePercentage = incidents.length > 0 ? 
+        Math.round((incidents.filter(inc => inc.status === 'up').length / incidents.length) * 100) : 100;
+      
+      // Determine color based on actual status and incident history
+      const getStatusColor = (status: string, incidents: UptimeData[]) => {
+        const downIncidents = incidents.filter(inc => inc.status === 'down').length;
+        const warningIncidents = incidents.filter(inc => inc.status === 'warning').length;
+        
+        if (downIncidents > 0) return 'bg-red-500 hover:bg-red-600';
+        if (warningIncidents > 0) return 'bg-yellow-500 hover:bg-yellow-600';
+        
+        switch (status) {
+          case 'up':
+            return 'bg-green-500 hover:bg-green-600';
+          case 'down':
+            return 'bg-red-500 hover:bg-red-600';
+          case 'paused':
+            return 'bg-gray-400 hover:bg-gray-500';
+          case 'warning':
+            return 'bg-yellow-500 hover:bg-yellow-600';
+          default:
+            return 'bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500';
+        }
+      };
+
+      const statusColor = record ? getStatusColor(record.status, incidents) : 'bg-gray-300 dark:bg-gray-600';
+      const statusText = record ? 
+        record.status === 'up' ? (incidents.some(inc => inc.status === 'down') ? 'Recovered' : 'Operational') :
+        record.status === 'down' ? 'Incident - Down' :
+        record.status === 'paused' ? 'Paused' :
+        record.status === 'warning' ? 'Incident - Degraded' : 'Unknown'
+        : 'No Data';
+      
+      return (
+        <TooltipProvider key={i}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={`h-8 w-1 rounded-sm cursor-pointer ${statusColor}`}
+              />
+            </TooltipTrigger>
+            <TooltipContent>
+              <div className="text-sm">
+                <div className="font-medium">
+                  {format(date, 'MMM dd, yyyy')}
+                </div>
+                <div className="text-muted-foreground">
+                  Status: {statusText}
+                </div>
+                {incidents.length > 0 && (
+                  <div className="text-muted-foreground">
+                    Uptime: {uptimePercentage}% ({incidents.length} checks)
+                  </div>
+                )}
+                {incidents.filter(inc => inc.status === 'down').length > 0 && (
+                  <div className="text-red-400 text-xs">
+                    {incidents.filter(inc => inc.status === 'down').length} incident(s) detected
+                  </div>
+                )}
+                {record && record.status === 'up' && record.responseTime > 0 && (
+                  <div className="text-muted-foreground">
+                    Response: {record.responseTime}ms
+                  </div>
+                )}
+                {record && (
+                  <div className="text-muted-foreground">
+                    Last Check: {format(new Date(record.timestamp), 'HH:mm')}
+                  </div>
+                )}
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    });
+  };
+
+  return (
+    <div className="ml-8 p-3 bg-background/30 rounded-lg border border-border/50">
+      <div className="text-sm font-medium text-foreground mb-2">90-day uptime history</div>
+      <div className="flex items-center gap-1 mb-2">
+        {renderUptimeHistory(serviceId)}
+      </div>
+      <div className="flex justify-between text-xs text-muted-foreground">
+        <span>90 days ago</span>
+        <span>Today</span>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,110 @@
+
+import { useState, useEffect } from 'react';
+import { OperationalPageRecord } from '@/types/operational.types';
+import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
+import { Service, UptimeData } from '@/types/service.types';
+import { operationalPageService } from '@/services/operationalPageService';
+import { statusPageComponentsService } from '@/services/statusPageComponentsService';
+import { serviceService } from '@/services/serviceService';
+import { uptimeService } from '@/services/uptimeService';
+
+export const usePublicStatusPageData = (slug: string | undefined) => {
+  const [page, setPage] = useState<OperationalPageRecord | null>(null);
+  const [components, setComponents] = useState<StatusPageComponentRecord[]>([]);
+  const [services, setServices] = useState<Service[]>([]);
+  const [uptimeData, setUptimeData] = useState<Record<string, UptimeData[]>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchPublicPage = async () => {
+      if (!slug) {
+        console.log('No slug provided');
+        setError('No status page slug provided');
+        setLoading(false);
+        return;
+      }
+      
+      try {
+        console.log('Fetching public status page for slug:', slug);
+        setLoading(true);
+        setError(null);
+        
+        // Fetch operational page
+        console.log('Fetching operational pages...');
+        const pages = await operationalPageService.getOperationalPages();
+        console.log('All pages:', pages);
+        
+        const foundPage = pages.find(p => p.slug === slug && p.is_public === 'true');
+        console.log('Found page:', foundPage);
+        
+        if (!foundPage) {
+          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');
+        
+        // Fetch components for this page
+        console.log('Fetching components for page:', foundPage.id);
+        const pageComponents = await statusPageComponentsService.getStatusPageComponentsByOperationalId(foundPage.id);
+        console.log('Components found:', pageComponents);
+        setComponents(pageComponents);
+        
+        // Fetch all services
+        console.log('Fetching all services...');
+        const allServices = await serviceService.getServices();
+        console.log('Services found:', allServices);
+        setServices(allServices);
+        
+        // Fetch uptime data for each component that has a service
+        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);
+              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');
+              return { serviceId: component.service_id, history };
+            } catch (error) {
+              console.error(`Error fetching uptime for service ${component.service_id}:`, error);
+              return { serviceId: component.service_id, history: [] };
+            }
+          });
+        
+        const uptimeResults = await Promise.all(uptimePromises);
+        const uptimeMap: Record<string, UptimeData[]> = {};
+        uptimeResults.forEach(result => {
+          uptimeMap[result.serviceId] = result.history;
+        });
+        setUptimeData(uptimeMap);
+        console.log('Uptime data set successfully');
+        
+        console.log('All data fetched successfully');
+        
+      } catch (err) {
+        console.error('Error fetching public page:', err);
+        setError(`Failed to load status page: ${err}`);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPublicPage();
+  }, [slug]);
+
+  return {
+    page,
+    components,
+    services,
+    uptimeData,
+    loading,
+    error
+  };
+};

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

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

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

@@ -0,0 +1,151 @@
+
+import React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { MapPin, Wifi, WifiOff, MoreVertical, Trash2, Terminal, Copy } from "lucide-react";
+import { RegionalService } from "@/types/regional.types";
+import { formatDistanceToNow } from "date-fns";
+import { useToast } from "@/hooks/use-toast";
+
+interface RegionalAgentCardProps {
+  agent: RegionalService;
+  onDelete: () => void;
+}
+
+export const RegionalAgentCard: React.FC<RegionalAgentCardProps> = ({ agent, onDelete }) => {
+  const { toast } = useToast();
+
+  // Check if this is the default agent that cannot be removed
+  const isDefaultAgent = agent.agent_id === "1" || agent.region_name === "Default";
+
+  const copyAgentId = async () => {
+    try {
+      await navigator.clipboard.writeText(agent.agent_id);
+      toast({
+        title: "Copied!",
+        description: "Agent ID copied to clipboard.",
+      });
+    } catch (error) {
+      toast({
+        title: "Copy failed",
+        description: "Failed to copy agent ID.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const getConnectionStatus = () => {
+    if (agent.connection === 'online') {
+      return {
+        icon: <Wifi className="h-4 w-4" />,
+        label: 'Online',
+        variant: 'default' as const,
+        className: 'bg-green-100 text-green-800 hover:bg-green-100'
+      };
+    } else {
+      return {
+        icon: <WifiOff className="h-4 w-4" />,
+        label: 'Offline',
+        variant: 'secondary' as const,
+        className: 'bg-red-100 text-red-800 hover:bg-red-100'
+      };
+    }
+  };
+
+  const connectionStatus = getConnectionStatus();
+
+  return (
+    <Card className="relative">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center space-x-2">
+            <MapPin className="h-5 w-5 text-blue-600" />
+            <div>
+              <CardTitle className="text-lg flex items-center gap-2">
+                {agent.region_name}
+                {isDefaultAgent && (
+                  <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
+                    Default
+                  </Badge>
+                )}
+              </CardTitle>
+              <CardDescription className="flex items-center gap-1 text-sm">
+                {agent.agent_ip_address}
+              </CardDescription>
+            </div>
+          </div>
+          
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm">
+                <MoreVertical className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={copyAgentId}>
+                <Copy className="mr-2 h-4 w-4" />
+                Copy Agent ID
+              </DropdownMenuItem>
+              {!isDefaultAgent && (
+                <DropdownMenuItem onClick={onDelete} className="text-red-600">
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Remove Agent
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </CardHeader>
+      
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between">
+          <Badge 
+            variant={connectionStatus.variant}
+            className={connectionStatus.className}
+          >
+            {connectionStatus.icon}
+            <span className="ml-1">{connectionStatus.label}</span>
+          </Badge>
+          
+          <Badge variant="outline" className="text-xs">
+            {agent.status}
+          </Badge>
+        </div>
+        
+        <div className="space-y-2">
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Agent ID:</span>
+            <span className="font-mono text-xs">{agent.agent_id.substring(0, 12)}...</span>
+          </div>
+          
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Last Updated:</span>
+            <span className="text-xs">
+              {formatDistanceToNow(new Date(agent.updated), { addSuffix: true })}
+            </span>
+          </div>
+        </div>
+        
+        {agent.connection === 'online' && (
+          <div className="pt-2 border-t">
+            <div className="flex items-center text-xs text-green-600">
+              <div className="w-2 h-2 bg-green-600 rounded-full mr-2 animate-pulse"></div>
+              Active monitoring
+            </div>
+          </div>
+        )}
+        
+        {agent.connection === 'offline' && (
+          <div className="pt-2 border-t">
+            <div className="flex items-center text-xs text-red-600">
+              <div className="w-2 h-2 bg-red-600 rounded-full mr-2"></div>
+              Connection lost
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

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

@@ -0,0 +1,164 @@
+
+import React, { useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Plus, MapPin, Activity, Wifi, WifiOff } from "lucide-react";
+import { regionalService } from "@/services/regionalService";
+import { RegionalService } from "@/types/regional.types";
+import { AddRegionalAgentDialog } from "./AddRegionalAgentDialog";
+import { RegionalAgentCard } from "./RegionalAgentCard";
+import { useToast } from "@/hooks/use-toast";
+
+export const RegionalMonitoringContent = () => {
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  const { data: regionalServices = [], isLoading, error } = useQuery({
+    queryKey: ['regional-services'],
+    queryFn: regionalService.getRegionalServices,
+    refetchInterval: 30000, // Refetch every 30 seconds
+  });
+
+  const handleAgentAdded = () => {
+    queryClient.invalidateQueries({ queryKey: ['regional-services'] });
+    toast({
+      title: "Regional Agent Added",
+      description: "The regional monitoring agent has been successfully configured.",
+    });
+  };
+
+  const handleDeleteAgent = async (id: string) => {
+    try {
+      await regionalService.deleteRegionalService(id);
+      queryClient.invalidateQueries({ queryKey: ['regional-services'] });
+      toast({
+        title: "Agent Removed",
+        description: "The regional monitoring agent has been removed.",
+      });
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to remove the regional monitoring agent.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const onlineAgents = regionalServices.filter(agent => agent.connection === 'online').length;
+  const totalAgents = regionalServices.length;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Regional Monitoring</h1>
+          <p className="text-muted-foreground">
+            Manage distributed monitoring agents across different regions
+          </p>
+        </div>
+        <Button onClick={() => setAddDialogOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Regional Agent
+        </Button>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Agents</CardTitle>
+            <MapPin className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{totalAgents}</div>
+            <p className="text-xs text-muted-foreground">
+              Regional monitoring agents
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Online Agents</CardTitle>
+            <Wifi className="h-4 w-4 text-green-600" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-600">{onlineAgents}</div>
+            <p className="text-xs text-muted-foreground">
+              Currently connected
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Offline Agents</CardTitle>
+            <WifiOff className="h-4 w-4 text-red-600" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-red-600">{totalAgents - onlineAgents}</div>
+            <p className="text-xs text-muted-foreground">
+              Disconnected agents
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Agents List */}
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold">Regional Agents</h2>
+        
+        {isLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[...Array(3)].map((_, i) => (
+              <Card key={i} className="animate-pulse">
+                <CardHeader>
+                  <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                  <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    <div className="h-3 bg-gray-200 rounded"></div>
+                    <div className="h-3 bg-gray-200 rounded w-5/6"></div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : regionalServices.length === 0 ? (
+          <Card>
+            <CardContent className="flex flex-col items-center justify-center py-12">
+              <MapPin className="h-12 w-12 text-muted-foreground mb-4" />
+              <h3 className="text-lg font-semibold mb-2">No Regional Agents</h3>
+              <p className="text-muted-foreground text-center mb-4">
+                Get started by adding your first regional monitoring agent to extend your monitoring coverage.
+              </p>
+              <Button onClick={() => setAddDialogOpen(true)}>
+                <Plus className="mr-2 h-4 w-4" />
+                Add First Agent
+              </Button>
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {regionalServices.map((agent) => (
+              <RegionalAgentCard 
+                key={agent.id} 
+                agent={agent} 
+                onDelete={() => handleDeleteAgent(agent.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <AddRegionalAgentDialog
+        open={addDialogOpen}
+        onOpenChange={setAddDialogOpen}
+        onAgentAdded={handleAgentAdded}
+      />
+    </div>
+  );
+};

application/src/components/regional-monitoring/index.ts

@@ -0,0 +1,4 @@
+
+export { RegionalMonitoringContent } from './RegionalMonitoringContent';
+export { AddRegionalAgentDialog } from './AddRegionalAgentDialog';
+export { RegionalAgentCard } from './RegionalAgentCard';

application/src/components/schedule-incident/ScheduleIncidentContent.tsx

@@ -22,12 +22,12 @@ export const ScheduleIncidentContent = () => {
 
   // Initialize maintenance notifications when the component mounts
   useEffect(() => {
-    console.log("Initializing maintenance notifications");
+   // console.log("Initializing maintenance notifications");
     initMaintenanceNotifications();
     
     // Clean up when the component unmounts
     return () => {
-      console.log("Cleaning up maintenance notifications");
+     // console.log("Cleaning up maintenance notifications");
       stopMaintenanceNotifications();
     };
   }, []);
@@ -43,7 +43,7 @@ export const ScheduleIncidentContent = () => {
   const handleMaintenanceCreated = () => {
     // Refresh data by incrementing the refresh trigger
     const newTriggerValue = refreshTrigger + 1;
-    console.log("Maintenance created, refreshing data with new trigger value:", newTriggerValue);
+   // console.log("Maintenance created, refreshing data with new trigger value:", newTriggerValue);
     setRefreshTrigger(newTriggerValue);
     
     // Show success toast
@@ -56,7 +56,7 @@ export const ScheduleIncidentContent = () => {
   const handleIncidentCreated = () => {
     // Refresh data by incrementing the refresh trigger
     const newTriggerValue = incidentRefreshTrigger + 1;
-    console.log("Incident created, refreshing data with new trigger value:", newTriggerValue);
+   // console.log("Incident created, refreshing data with new trigger value:", newTriggerValue);
     setIncidentRefreshTrigger(newTriggerValue);
     
     // Show success toast

application/src/components/schedule-incident/ScheduledMaintenanceTab.tsx

@@ -1,16 +1,13 @@
-
 import React, { useEffect } from 'react';
 import { useLanguage } from '@/contexts/LanguageContext';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { MaintenanceTable, MaintenanceStatusChecker } from './maintenance';
-import { EmptyMaintenanceState } from './maintenance/EmptyMaintenanceState';
+import { LoadingState } from '@/components/services/LoadingState';
-import { OverviewCard } from './common/OverviewCard';
 import { Calendar, Clock, CheckCircle } from 'lucide-react';
 import { useMaintenanceData } from './hooks/useMaintenanceData';
-import { Skeleton } from '@/components/ui/skeleton';
 import { useToast } from '@/hooks/use-toast';
-import { LoadingState } from '@/components/services/LoadingState';
+import { useTheme } from '@/contexts/ThemeContext';
 
 interface ScheduledMaintenanceTabProps {
   refreshTrigger?: number;
@@ -18,10 +15,10 @@ interface ScheduledMaintenanceTabProps {
 
 export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMaintenanceTabProps) => {
   const { t } = useLanguage();
+  const { theme } = useTheme();
   const { toast } = useToast();
   const [manualRefresh, setManualRefresh] = React.useState(0);
 
-  // Combine the external refresh trigger with our internal one
   const combinedRefreshTrigger = refreshTrigger + manualRefresh;
 
   const {
@@ -33,10 +30,9 @@ export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMainten
     fetchMaintenanceData,
     isEmpty,
     error,
-    initialized
+    initialized,
   } = useMaintenanceData({ refreshTrigger: combinedRefreshTrigger });
 
-  // Display toast when error occurs
   useEffect(() => {
     if (error) {
       toast({
@@ -47,66 +43,91 @@ export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMainten
     }
   }, [error, toast, t]);
 
-  // Force fetch data on initial load
   useEffect(() => {
-    console.log("ScheduledMaintenanceTab is mounted, fetching data");
     fetchMaintenanceData(true);
   }, [fetchMaintenanceData]);
 
-  // Handle maintenance updates
   const handleMaintenanceUpdated = () => {
-    console.log("Maintenance updated, refreshing data");
+    setManualRefresh((prev) => prev + 1);
-    setManualRefresh(prev => prev + 1);
   };
 
-  // Handle tab changes
   const handleTabChange = (value: string) => {
     setFilter(value);
   };
 
-  // Show full-page loading state during initial load
   if (loading && !initialized) {
     return <LoadingState />;
   }
 
+  const gradientCard = (
+    title: string,
+    value: string | number,
+    icon: JSX.Element,
+    gradient: string
+  ) => (
+    <Card
+      className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative z-10"
+      style={{
+        background: theme === 'dark'
+          ? `linear-gradient(135deg, rgba(65,59,55,0.8) 0%, ${gradient})`
+          : `linear-gradient(135deg, rgba(65,59,55,0.8) 0%, ${gradient})`,
+      }}
+    >
+      <div className="absolute inset-0 z-0 opacity-10">
+        <div
+          className="w-full h-full"
+          style={{
+            backgroundImage: `linear-gradient(#000 1px, transparent 1px),
+                              linear-gradient(90deg, #fff 1px, transparent 1px)`,
+            backgroundSize: '20px 20px',
+          }}
+        />
+      </div>
+      <CardHeader className="pb-2 relative z-10">
+        <CardTitle className="text-sm font-medium text-white">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="flex items-center justify-between relative z-10">
+        <span className="text-4xl font-bold text-white">{value}</span>
+        <div className="rounded-full p-3 bg-white/25 backdrop-blur-sm">
+          {icon}
+        </div>
+      </CardContent>
+    </Card>
+  );
+
   return (
     <>
-      {/* Status checker for automatic updates */}
       <MaintenanceStatusChecker
         maintenanceData={maintenanceData}
         onStatusUpdated={handleMaintenanceUpdated}
       />
 
       {/* Overview Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 w-full">
-        <OverviewCard
+        {gradientCard(
-          title={t('upcomingMaintenance')}
+          t('upcomingMaintenance'),
-          value={loading ? '...' : overviewStats.upcoming}
+          loading ? '...' : overviewStats.upcoming,
-          icon={<Calendar className="h-5 w-5 text-white" />}
+          <Calendar className="h-6 w-6 text-white" />,
-          isLoading={loading}
+          'rgba(59,130,246,0.6)'
-          color="blue"
+        )}
-        />
+        {gradientCard(
-        <OverviewCard
+          t('ongoingMaintenance'),
-          title={t('ongoingMaintenance')}
+          loading ? '...' : overviewStats.ongoing,
-          value={loading ? '...' : overviewStats.ongoing}
+          <Clock className="h-6 w-6 text-white" />,
-          icon={<Clock className="h-5 w-5 text-white" />}
+          'rgba(251,191,36,0.6)'
-          isLoading={loading}
+        )}
-          color="amber"
+        {gradientCard(
-        />
+          t('completedMaintenance'),
-        <OverviewCard
+          loading ? '...' : overviewStats.completed,
-          title={t('completedMaintenance')}
+          <CheckCircle className="h-6 w-6 text-white" />,
-          value={loading ? '...' : overviewStats.completed}
+          'rgba(34,197,94,0.6)'
-          icon={<CheckCircle className="h-5 w-5 text-white" />}
+        )}
-          isLoading={loading}
+        {gradientCard(
-          color="green"
+          t('totalScheduledHours'),
-        />
+          loading ? '...' : `${overviewStats.totalDuration}h`,
-        <OverviewCard
+          <Clock className="h-6 w-6 text-white" />,
-          title={t('totalScheduledHours')}
+          'rgba(139,92,246,0.6)'
-          value={loading ? '...' : `${overviewStats.totalDuration}h`}
+        )}
-          icon={<Clock className="h-5 w-5 text-white" />}
-          isLoading={loading}
-          color="purple"
-        />
       </div>
 
       <Card>
@@ -129,7 +150,7 @@ export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMainten
               <TabsTrigger value="completed">{t('completedMaintenance')}</TabsTrigger>
             </TabsList>
 
-            <TabsContent value="upcoming" className="space-y-4">
+            <TabsContent value="upcoming">
               <MaintenanceTable
                 data={maintenanceData}
                 isLoading={loading && initialized}
@@ -137,7 +158,7 @@ export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMainten
               />
             </TabsContent>
 
-            <TabsContent value="ongoing" className="space-y-4">
+            <TabsContent value="ongoing">
               <MaintenanceTable
                 data={maintenanceData}
                 isLoading={loading && initialized}
@@ -145,7 +166,7 @@ export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMainten
               />
             </TabsContent>
 
-            <TabsContent value="completed" className="space-y-4">
+            <TabsContent value="completed">
               <MaintenanceTable
                 data={maintenanceData}
                 isLoading={loading && initialized}

application/src/components/schedule-incident/common/OverviewCard.tsx

@@ -18,6 +18,7 @@ interface OverviewCardProps {
   valueClassName?: string;
   isLoading?: boolean;
   color?: string;
+  gradient?: string;
 }
 
 export const OverviewCard = ({
@@ -30,11 +31,15 @@ export const OverviewCard = ({
   valueClassName,
   isLoading = false,
   color = "blue",
+  gradient,
 }: OverviewCardProps) => {
   const { theme } = useTheme();
   
   // Map color prop to gradient colors
   const getGradientBackground = () => {
+    if (gradient) {
+      return gradient;
+    }
     const colors = {
       blue: theme === 'dark'
         ? "linear-gradient(135deg, rgba(25, 118, 210, 0.8) 0%, rgba(66, 165, 245, 0.6) 100%)"

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

@@ -22,13 +22,13 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>
   const fetchIncidentData = useCallback(async (force = false) => {
     // Skip if already fetching
     if (isFetchingRef.current) {
-      console.log('Already fetching data, skipping additional request');
+    //  console.log('Already fetching data, skipping additional request');
       return;
     }
     
     // Skip if not forced and already initialized
     if (initialized && !force) {
-      console.log('Data already initialized and no force refresh, skipping fetch');
+    //  console.log('Data already initialized and no force refresh, skipping fetch');
       return;
     }
     
@@ -46,22 +46,22 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>
     setError(null);
     
     try {
-      console.log(`Fetching incident data (force=${force})`);
+    //  console.log(`Fetching incident data (force=${force})`);
       const allIncidents = await incidentService.getAllIncidents(force);
       
       if (Array.isArray(allIncidents)) {
         setIncidents(allIncidents);
-        console.log(`Successfully set ${allIncidents.length} incidents to state`);
+     //   console.log(`Successfully set ${allIncidents.length} incidents to state`);
       } else {
         setIncidents([]);
-        console.warn('No incidents returned from service');
+      //  console.warn('No incidents returned from service');
       }
       
       setInitialized(true);
       setLoading(false);
       setIsRefreshing(false);
     } catch (error) {
-      console.error('Error fetching incident data:', error);
+    //  console.error('Error fetching incident data:', error);
       setError('Failed to load incident data. Please try again later.');
       setIncidents([]);
       setInitialized(true);
@@ -79,7 +79,7 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>
   useEffect(() => {
     // Skip if the refresh trigger hasn't changed (prevents duplicate effect calls)
     if (refreshTrigger === lastRefreshTriggerRef.current && initialized) {
-      console.log('Refresh trigger unchanged, skipping fetch');
+    //  console.log('Refresh trigger unchanged, skipping fetch');
       return;
     }
     
@@ -90,7 +90,7 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>
     const abortController = new AbortController();
     let isMounted = true;
     
-    console.log(`useIncidentData effect running, refreshTrigger: ${refreshTrigger}`);
+   // console.log(`useIncidentData effect running, refreshTrigger: ${refreshTrigger}`);
     
     // Use a longer delay to ensure we don't trigger too many API calls
     const fetchTimer = setTimeout(() => {
@@ -101,7 +101,7 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>
     
     // Cleanup function to abort any in-flight requests and clear timers
     return () => {
-      console.log('Cleaning up incident data fetch effect');
+    //  console.log('Cleaning up incident data fetch effect');
       isMounted = false;
       clearTimeout(fetchTimer);
       abortController.abort();
@@ -112,7 +112,7 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>
   const incidentData = useMemo(() => {
     if (!initialized || incidents.length === 0) return [];
     
-    console.log(`Filtering incidents by: ${filter}`);
+   // console.log(`Filtering incidents by: ${filter}`);
     
     if (filter === "unresolved") {
       return incidents.filter(item => {

application/src/components/schedule-incident/incident-management/OverviewCards.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { AlertCircle, CheckCircle, Clock, AlertTriangle, Flag } from 'lucide-react';
 import { useLanguage } from '@/contexts/LanguageContext';
 import { OverviewCard } from '../common/OverviewCard';
+import { useTheme } from '@/contexts/ThemeContext';
 
 interface OverviewStatsProps {
   unresolved: number;
@@ -24,6 +25,7 @@ export const OverviewCards: React.FC<OverviewCardsProps> = ({
   initialized 
 }) => {
   const { t } = useLanguage();
+  const { theme } = useTheme();
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
@@ -32,35 +34,55 @@ export const OverviewCards: React.FC<OverviewCardsProps> = ({
         value={overviewStats.unresolved.toString()}
         icon={<AlertCircle className="h-5 w-5 text-white" />}
         isLoading={loading && initialized}
-        color="red"
+        gradient={
+          theme === "dark"
+            ? "linear-gradient(135deg, #4b3b37 0%, rgba(239, 83, 80, 0.6) 100%)"
+            : "linear-gradient(135deg, #4b3b37 0%, rgba(239, 83, 80, 0.6) 100%)"
+        }
       />
       <OverviewCard
         title={t('criticalIssues')}
         value={overviewStats.critical.toString()}
         icon={<AlertTriangle className="h-5 w-5 text-white" />}
         isLoading={loading && initialized}
-        color="amber"
+        gradient={
+          theme === "dark"
+            ? "linear-gradient(135deg, #4b3b37 0%, rgba(255, 183, 77, 0.6) 100%)"
+            : "linear-gradient(135deg, #4b3b37 0%, rgba(255, 183, 77, 0.6) 100%)"
+        }
       />
       <OverviewCard
         title={t('highPriority')}
         value={overviewStats.highPriority.toString()}
         icon={<Flag className="h-5 w-5 text-white" />}
         isLoading={loading && initialized}
-        color="orange" 
+        gradient={
+          theme === "dark"
+            ? "linear-gradient(135deg, #4b3b37 0%, rgba(255, 109, 0, 0.6) 100%)"
+            : "linear-gradient(135deg, #4b3b37 0%, rgba(255, 109, 0, 0.6) 100%)"
+        }
       />
       <OverviewCard
         title={t('resolvedIncidents')}
         value={overviewStats.resolved.toString()}
         icon={<CheckCircle className="h-5 w-5 text-white" />}
         isLoading={loading && initialized}
-        color="green"
+        gradient={
+          theme === "dark"
+            ? "linear-gradient(135deg, #4b3b37 0%, rgba(102, 187, 106, 0.6) 100%)"
+            : "linear-gradient(135deg, #4b3b37 0%, rgba(102, 187, 106, 0.6) 100%)"
+        }
       />
       <OverviewCard
         title={t('avgResolutionTime')}
         value={overviewStats.avgResolutionTime}
         icon={<Clock className="h-5 w-5 text-white" />}
         isLoading={loading && initialized}
-        color="blue"
+        gradient={
+          theme === "dark"
+            ? "linear-gradient(135deg, #4b3b37 0%, rgba(66, 165, 245, 0.6) 100%)"
+            : "linear-gradient(135deg, #4b3b37 0%, rgba(66, 165, 245, 0.6) 100%)"
+        }
       />
     </div>
   );

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

@@ -40,10 +40,10 @@ export const IncidentBasicFields: React.FC = () => {
     queryFn: async () => {
       try {
         const usersList = await userService.getUsers();
-        console.log("Fetched users for incident assignment:", usersList);
+      //  console.log("Fetched users for incident assignment:", usersList);
         return Array.isArray(usersList) ? usersList : [];
       } catch (error) {
-        console.error("Failed to fetch users:", error);
+      //  console.error("Failed to fetch users:", error);
         return [];
       }
     },
@@ -53,7 +53,7 @@ export const IncidentBasicFields: React.FC = () => {
   // Add user to assigned_to
   const addUser = (userId: string) => {
     // For now, we're using a single user assignment
-    console.log("Setting user ID in form:", userId);
+  //  console.log("Setting user ID in form:", userId);
     form.setValue('assigned_to', userId, { shouldValidate: true, shouldDirty: true });
     setSelectedUserIds([userId]);
   };

application/src/components/schedule-incident/maintenance/form/MaintenanceNotificationSettingsField.tsx

@@ -27,7 +27,7 @@ export const MaintenanceNotificationSettingsField = () => {
       try {
         setIsLoading(true);
         const channels = await alertConfigService.getAlertConfigurations();
-        console.log("Fetched notification channels for form:", channels);
+       // console.log("Fetched notification channels for form:", channels);
         
         // Only show enabled channels
         const enabledChannels = channels.filter(channel => channel.enabled);
@@ -38,18 +38,18 @@ export const MaintenanceNotificationSettingsField = () => {
         const currentChannel = getValues('notification_channel_id');
         const shouldNotify = getValues('notify_subscribers');
         
-        console.log("Current notification values:", {
+      //  console.log("Current notification values:", {
-          currentChannel,
+      //    currentChannel,
-          shouldNotify,
+       //   shouldNotify,
-          availableChannels: enabledChannels.length
+       //   availableChannels: enabledChannels.length
-        });
+       // });
         
         if (shouldNotify && (!currentChannel || currentChannel === 'none') && enabledChannels.length > 0) {
-          console.log("Setting default notification channel:", enabledChannels[0].id);
+        //  console.log("Setting default notification channel:", enabledChannels[0].id);
           setValue('notification_channel_id', enabledChannels[0].id);
         }
       } catch (error) {
-        console.error('Error fetching notification channels:', error);
+       // console.error('Error fetching notification channels:', error);
         toast({
           title: t('error'),
           description: t('errorFetchingNotificationChannels'),
@@ -64,12 +64,12 @@ export const MaintenanceNotificationSettingsField = () => {
   }, [t, toast, setValue, getValues]);
   
   // Log value changes for debugging
-  useEffect(() => {
+ // useEffect(() => {
-    console.log("Current notification settings:", {
+   // console.log("Current notification settings:", {
-      channel_id: getValues('notification_channel_id'),
+  //    channel_id: getValues('notification_channel_id'),
-      notify: notifySubscribers
+  //    notify: notifySubscribers
-    });
+  //  });
-  }, [notifySubscribers, notificationChannelId, getValues]);
+ // }, [notifySubscribers, notificationChannelId, getValues]);
   
   return (
     <div className="space-y-6">
@@ -98,7 +98,7 @@ export const MaintenanceNotificationSettingsField = () => {
                 checked={field.value}
                 onCheckedChange={(checked) => {
                   field.onChange(checked);
-                  console.log("Notification toggle changed to:", checked);
+                 // console.log("Notification toggle changed to:", checked);
                   // If notifications are disabled, also clear the notification channel
                   if (!checked) {
                     setValue('notification_channel_id', '');
@@ -120,10 +120,10 @@ export const MaintenanceNotificationSettingsField = () => {
           // Make sure to handle both empty string and "none" as special cases
           const displayValue = field.value || "";
           
-          console.log("Rendering notification channel field with value:", {
+        //  console.log("Rendering notification channel field with value:", {
-            fieldValue: field.value, 
+        //    fieldValue: field.value, 
-            displayValue
+        //    displayValue
-          });
+       //   });
           
           return (
             <FormItem>
@@ -135,7 +135,7 @@ export const MaintenanceNotificationSettingsField = () => {
                   <Select 
                     value={displayValue} 
                     onValueChange={(value) => {
-                      console.log("Setting notification channel to:", value);
+                    //  console.log("Setting notification channel to:", value);
                       field.onChange(value === "none" ? "" : value);
                     }}
                     disabled={!notifySubscribers}

application/src/components/schedule-incident/maintenance/form/config/AssignedUsersField.tsx

@@ -31,17 +31,17 @@ export const AssignedUsersField = () => {
   // Ensure assigned_users is initialized as an array
   useEffect(() => {
     const currentValue = form.getValues('assigned_users');
-    console.log("Initial assigned_users value:", currentValue);
+   // console.log("Initial assigned_users value:", currentValue);
     
     // Initialize as empty array if no value or invalid value
     if (!currentValue || !Array.isArray(currentValue)) {
-      console.log("Initializing assigned_users as empty array");
+    //  console.log("Initializing assigned_users as empty array");
       form.setValue('assigned_users', [], { shouldValidate: false, shouldDirty: true });
     }
   }, [form]);
 
-  console.log("Current form values:", form.getValues());
+  //console.log("Current form values:", form.getValues());
-  console.log("Current assigned_users:", form.getValues('assigned_users'));
+  //console.log("Current assigned_users:", form.getValues('assigned_users'));
 
   // Fetch users for the assignment dropdown
   const { data: users = [], isLoading } = useQuery({
@@ -49,10 +49,10 @@ export const AssignedUsersField = () => {
     queryFn: async () => {
       try {
         const usersList = await userService.getUsers();
-        console.log("Fetched users for assignment:", usersList);
+      //  console.log("Fetched users for assignment:", usersList);
         return Array.isArray(usersList) ? usersList : [];
       } catch (error) {
-        console.error("Failed to fetch users:", error);
+      //  console.error("Failed to fetch users:", error);
         return [];
       }
     },
@@ -64,7 +64,7 @@ export const AssignedUsersField = () => {
     ? form.watch('assigned_users') 
     : [];
   
-  console.log("Selected user IDs:", selectedUserIds);
+ // console.log("Selected user IDs:", selectedUserIds);
 
   // Function to add a user
   const addUser = (userId: string) => {
@@ -73,7 +73,7 @@ export const AssignedUsersField = () => {
       : [];
       
     if (!currentValues.includes(userId)) {
-      console.log("Adding user:", userId);
+   //   console.log("Adding user:", userId);
       form.setValue('assigned_users', [...currentValues, userId], { shouldValidate: true, shouldDirty: true });
     }
   };
@@ -84,7 +84,7 @@ export const AssignedUsersField = () => {
       ? [...form.getValues('assigned_users')] 
       : [];
       
-    console.log("Removing user:", userId);
+  //  console.log("Removing user:", userId);
     form.setValue(
       'assigned_users', 
       currentValues.filter(id => id !== userId), 
@@ -94,7 +94,7 @@ export const AssignedUsersField = () => {
 
   // Get selected users data
   const selectedUsers = users.filter(user => selectedUserIds.includes(user.id));
-  console.log("Matched selected users:", selectedUsers);
+ // console.log("Matched selected users:", selectedUsers);
   
   // Function to get user initials from name
   const getUserInitials = (user: any): string => {

application/src/components/servers/AddServerAgentDialog.tsx

@@ -0,0 +1,167 @@
+
+import React, { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useToast } from "@/hooks/use-toast";
+import { Server } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { getCurrentEndpoint } from "@/lib/pocketbase";
+import { ServerAgentConfigForm } from "./ServerAgentConfigForm";
+import { OneClickInstallTab } from "./OneClickInstallTab";
+import { ManualInstallTab } from "./ManualInstallTab";
+
+interface AddServerAgentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAgentAdded: () => void;
+}
+
+export const AddServerAgentDialog: React.FC<AddServerAgentDialogProps> = ({
+  open,
+  onOpenChange,
+  onAgentAdded,
+}) => {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [activeTab, setActiveTab] = useState("configure");
+
+  // Get current PocketBase URL
+  const currentPocketBaseUrl = getCurrentEndpoint();
+
+  // Form state
+  const [formData, setFormData] = useState({
+    serverName: "",
+    description: "",
+    osType: "",
+    checkInterval: "60",
+    retryAttempt: "3",
+    dockerEnabled: false,
+    notificationEnabled: true,
+  });
+
+  // Generated server token and agent ID
+  const [serverToken] = useState(() => 
+    `srv_${Math.random().toString(36).substring(2, 15)}${Math.random().toString(36).substring(2, 15)}`
+  );
+  
+  const [serverId] = useState(() => 
+    `agent_${Math.random().toString(36).substring(2, 15)}${Math.random().toString(36).substring(2, 15)}`
+  );
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (isSubmitting) return;
+
+    if (!formData.serverName || !formData.osType) {
+      toast({
+        title: "Validation Error",
+        description: "Please fill in all required fields.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      // Here you would typically create the server monitoring configuration
+      // For now, we'll simulate the process
+      await new Promise(resolve => setTimeout(resolve, 1500));
+
+      toast({
+        title: "Server Agent Created",
+        description: `${formData.serverName} monitoring agent has been configured successfully.`,
+      });
+
+      // Switch to one-click install tab after successful creation
+      setActiveTab("one-click");
+      onAgentAdded();
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to create server monitoring agent.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDialogClose = () => {
+    // Reset form and tab when dialog closes
+    setActiveTab("configure");
+    setFormData({
+      serverName: "",
+      description: "",
+      osType: "",
+      checkInterval: "60",
+      retryAttempt: "3",
+      dockerEnabled: false,
+      notificationEnabled: true,
+    });
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogClose}>
+      <DialogContent className="sm:max-w-[900px] max-w-[95vw] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Server className="h-5 w-5" />
+            Add Server Monitoring Agent
+          </DialogTitle>
+          <DialogDescription>
+            Configure a new server monitoring agent to track system metrics and performance.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="configure">Configure Agent</TabsTrigger>
+            <TabsTrigger value="one-click">One-Click Install</TabsTrigger>
+            <TabsTrigger value="manual">Manual Installation</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="configure" className="space-y-6">
+            <ServerAgentConfigForm
+              formData={formData}
+              setFormData={setFormData}
+              serverId={serverId}
+              serverToken={serverToken}
+              currentPocketBaseUrl={currentPocketBaseUrl}
+              isSubmitting={isSubmitting}
+              onSubmit={handleSubmit}
+            />
+          </TabsContent>
+
+          <TabsContent value="one-click" className="space-y-6">
+            <OneClickInstallTab
+              serverToken={serverToken}
+              currentPocketBaseUrl={currentPocketBaseUrl}
+              formData={formData}
+              serverId={serverId}
+              onDialogClose={handleDialogClose}
+            />
+          </TabsContent>
+
+          <TabsContent value="manual" className="space-y-6">
+            <ManualInstallTab
+              serverToken={serverToken}
+              currentPocketBaseUrl={currentPocketBaseUrl}
+              formData={formData}
+              serverId={serverId}
+              onDialogClose={handleDialogClose}
+            />
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+};

application/src/components/servers/EditServerDialog.tsx

@@ -0,0 +1,680 @@
+import React, { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useToast } from "@/hooks/use-toast";
+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 { serverThresholdService, ServerThreshold } from "@/services/serverThresholdService";
+
+interface EditServerDialogProps {
+  server: Server | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onServerUpdated: () => void;
+}
+
+interface ServerFormData {
+  name: string;
+  check_interval: number;
+  retry_attempts: number;
+  docker_monitoring: boolean;
+  notification_enabled: boolean;
+  notification_channels: string[]; // Changed to array for multiple selections
+  threshold_id: string;
+  template_id: string;
+}
+
+interface ThresholdFormData {
+  cpu_threshold: number;
+  ram_threshold: number;
+  disk_threshold: number;
+  network_threshold: number;
+}
+
+export const EditServerDialog: React.FC<EditServerDialogProps> = ({
+  server,
+  open,
+  onOpenChange,
+  onServerUpdated,
+}) => {
+  const [formData, setFormData] = useState<ServerFormData>({
+    name: "",
+    check_interval: 60,
+    retry_attempts: 3,
+    docker_monitoring: false,
+    notification_enabled: false,
+    notification_channels: [], // Changed to array
+    threshold_id: "none",
+    template_id: "none",
+  });
+  
+  const [thresholdFormData, setThresholdFormData] = useState<ThresholdFormData>({
+    cpu_threshold: 80,
+    ram_threshold: 80,
+    disk_threshold: 80,
+    network_threshold: 80,
+  });
+  
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [alertConfigs, setAlertConfigs] = useState<AlertConfiguration[]>([]);
+  const [templates, setTemplates] = useState<NotificationTemplate[]>([]);
+  const [thresholds, setThresholds] = useState<ServerThreshold[]>([]);
+  const [selectedTemplate, setSelectedTemplate] = useState<NotificationTemplate | null>(null);
+  const [selectedThreshold, setSelectedThreshold] = useState<ServerThreshold | null>(null);
+  const [loadingAlertConfigs, setLoadingAlertConfigs] = useState(false);
+  const [loadingTemplates, setLoadingTemplates] = useState(false);
+  const [loadingThresholds, setLoadingThresholds] = useState(false);
+  const { toast } = useToast();
+
+  // 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)
+        : [];
+      
+      setFormData({
+        name: server.name || "",
+        check_interval: server.check_interval || 60,
+        retry_attempts: 3,
+        docker_monitoring: server.docker === "true",
+        notification_enabled: notificationChannels.length > 0,
+        notification_channels: notificationChannels,
+        threshold_id: server.threshold_id || "none",
+        template_id: server.template_id || "none",
+      });
+    }
+  }, [server]);
+
+  // Load data when dialog opens
+  useEffect(() => {
+    if (open) {
+      loadAlertConfigurations();
+      loadTemplates();
+      loadThresholds();
+    }
+  }, [open]);
+
+  // Load existing threshold data when thresholds are loaded and we have a server with threshold_id
+  useEffect(() => {
+    if (server && server.threshold_id && thresholds.length > 0) {
+    //  console.log("Loading existing threshold data for server:", server.threshold_id);
+      const existingThreshold = thresholds.find(t => t.id === server.threshold_id);
+      if (existingThreshold) {
+      //  console.log("Found existing threshold:", existingThreshold);
+        setSelectedThreshold(existingThreshold);
+        // Handle the API response format with proper field names and type conversion
+        setThresholdFormData({
+          cpu_threshold: parseInt(String(existingThreshold.cpu_threshold)) || 80,
+          ram_threshold: parseInt(String((existingThreshold as any).ram_threshold_message || existingThreshold.ram_threshold)) || 80,
+          disk_threshold: parseInt(String(existingThreshold.disk_threshold)) || 80,
+          network_threshold: parseInt(String(existingThreshold.network_threshold)) || 80,
+        });
+      }
+    }
+  }, [server, thresholds]);
+
+  // Update selected template when form data or templates change
+  useEffect(() => {
+    if (formData.template_id && formData.template_id !== "none" && templates.length > 0) {
+      const template = templates.find(t => t.id === formData.template_id);
+      setSelectedTemplate(template || null);
+    } else {
+      setSelectedTemplate(null);
+    }
+  }, [formData.template_id, templates]);
+
+  // Update selected threshold when threshold_id changes in form
+  useEffect(() => {
+    if (formData.threshold_id && formData.threshold_id !== "none" && thresholds.length > 0) {
+      const threshold = thresholds.find(t => t.id === formData.threshold_id);
+      setSelectedThreshold(threshold || null);
+      if (threshold) {
+        // Handle the API response format with proper field names and type conversion
+        setThresholdFormData({
+          cpu_threshold: parseInt(String(threshold.cpu_threshold)) || 80,
+          ram_threshold: parseInt(String((threshold as any).ram_threshold_message || threshold.ram_threshold)) || 80,
+          disk_threshold: parseInt(String(threshold.disk_threshold)) || 80,
+          network_threshold: parseInt(String(threshold.network_threshold)) || 80,
+        });
+      }
+    } else if (formData.threshold_id === "none") {
+      setSelectedThreshold(null);
+      setThresholdFormData({
+        cpu_threshold: 80,
+        ram_threshold: 80,
+        disk_threshold: 80,
+        network_threshold: 80,
+      });
+    }
+  }, [formData.threshold_id, thresholds]);
+
+  const loadAlertConfigurations = async () => {
+    try {
+      setLoadingAlertConfigs(true);
+      const configs = await alertConfigService.getAlertConfigurations();
+      setAlertConfigs(configs);
+    } catch (error) {
+    //  console.error('Error loading alert configurations:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to load notification channels",
+      });
+    } finally {
+      setLoadingAlertConfigs(false);
+    }
+  };
+
+  const loadTemplates = async () => {
+    try {
+      setLoadingTemplates(true);
+      const templateList = await templateService.getTemplates();
+      setTemplates(templateList);
+    } catch (error) {
+    //  console.error('Error loading templates:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to load templates",
+      });
+    } finally {
+      setLoadingTemplates(false);
+    }
+  };
+
+  const loadThresholds = async () => {
+    try {
+      setLoadingThresholds(true);
+      const thresholdList = await serverThresholdService.getServerThresholds();
+      setThresholds(thresholdList);
+    } catch (error) {
+     // console.error('Error loading server thresholds:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to load server thresholds",
+      });
+    } finally {
+      setLoadingThresholds(false);
+    }
+  };
+
+  const handleThresholdUpdate = async () => {
+    if (!selectedThreshold) return;
+
+    try {
+      // Use the correct field name for RAM threshold
+      const updateData = {
+        cpu_threshold: thresholdFormData.cpu_threshold,
+        ram_threshold_message: thresholdFormData.ram_threshold, // Use the correct field name
+        disk_threshold: thresholdFormData.disk_threshold,
+        network_threshold: thresholdFormData.network_threshold,
+      };
+
+      await serverThresholdService.updateServerThreshold(selectedThreshold.id, updateData);
+      
+      // Update local state
+      setSelectedThreshold({
+        ...selectedThreshold,
+        ...thresholdFormData,
+      });
+
+      // Update thresholds list
+      setThresholds(prev => prev.map(t => 
+        t.id === selectedThreshold.id 
+          ? { ...t, ...thresholdFormData }
+          : t
+      ));
+
+      toast({
+        title: "Threshold updated",
+        description: "Server threshold values have been updated successfully.",
+      });
+    } catch (error) {
+    //  console.error('Error updating threshold:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to update threshold values.",
+      });
+    }
+  };
+
+  const handleNotificationChannelToggle = (channelId: string, checked: boolean) => {
+    setFormData(prev => ({
+      ...prev,
+      notification_channels: checked 
+        ? [...prev.notification_channels, channelId]
+        : prev.notification_channels.filter(id => id !== channelId)
+    }));
+  };
+
+  const removeNotificationChannel = (channelId: string) => {
+    setFormData(prev => ({
+      ...prev,
+      notification_channels: prev.notification_channels.filter(id => id !== channelId)
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!server || isSubmitting) return;
+
+    try {
+      setIsSubmitting(true);
+
+      // Convert notification channels array to comma-separated string
+      const notificationChannelsString = formData.notification_enabled 
+        ? formData.notification_channels.join(',')
+        : "";
+
+      const updateData = {
+        name: formData.name,
+        check_interval: formData.check_interval,
+        docker: formData.docker_monitoring ? "true" : "false",
+        notification_id: notificationChannelsString,
+        threshold_id: formData.notification_enabled && formData.threshold_id !== "none" ? formData.threshold_id : "",
+        template_id: formData.notification_enabled && formData.template_id !== "none" ? formData.template_id : "",
+        updated: new Date().toISOString(),
+      };
+
+      await pb.collection('servers').update(server.id, updateData);
+
+      toast({
+        title: "Server updated",
+        description: `${formData.name} has been updated successfully.`,
+      });
+
+      onServerUpdated();
+      onOpenChange(false);
+      
+    } catch (error) {
+    //  console.error('Error updating server:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to update server. Please try again.",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (server) {
+      const notificationChannels = server.notification_id 
+        ? server.notification_id.split(',').map(id => id.trim()).filter(id => id)
+        : [];
+        
+      setFormData({
+        name: server.name || "",
+        check_interval: server.check_interval || 60,
+        retry_attempts: 3,
+        docker_monitoring: server.docker === "true",
+        notification_enabled: notificationChannels.length > 0,
+        notification_channels: notificationChannels,
+        threshold_id: server.threshold_id || "none",
+        template_id: server.template_id || "none",
+      });
+    }
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Edit Server Configuration</DialogTitle>
+        </DialogHeader>
+        
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="serverName">Server Name *</Label>
+              <Input
+                id="serverName"
+                value={formData.name}
+                onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+                placeholder="Enter server name"
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="checkInterval">Check Interval</Label>
+              <Select
+                value={formData.check_interval.toString()}
+                onValueChange={(value) => setFormData(prev => ({ ...prev, check_interval: parseInt(value) }))}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select interval" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="30">30 seconds</SelectItem>
+                  <SelectItem value="60">1 minute</SelectItem>
+                  <SelectItem value="120">2 minutes</SelectItem>
+                  <SelectItem value="300">5 minutes</SelectItem>
+                  <SelectItem value="600">10 minutes</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="retryAttempts">Retry Attempts</Label>
+              <Select
+                value={formData.retry_attempts.toString()}
+                onValueChange={(value) => setFormData(prev => ({ ...prev, retry_attempts: parseInt(value) }))}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select retry attempts" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1">1 attempt</SelectItem>
+                  <SelectItem value="2">2 attempts</SelectItem>
+                  <SelectItem value="3">3 attempts</SelectItem>
+                  <SelectItem value="5">5 attempts</SelectItem>
+                  <SelectItem value="10">10 attempts</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="dockerMonitoring">Docker Monitoring</Label>
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id="dockerMonitoring"
+                  checked={formData.docker_monitoring}
+                  onCheckedChange={(checked) => setFormData(prev => ({ 
+                    ...prev, 
+                    docker_monitoring: checked
+                  }))}
+                />
+                <Label htmlFor="dockerMonitoring" className="text-sm text-muted-foreground">
+                  {formData.docker_monitoring ? "Enabled" : "Disabled"}
+                </Label>
+              </div>
+            </div>
+          </div>
+
+          {/* Notification Status Toggle */}
+          <div className="space-y-4">
+            <div className="flex items-center space-x-2">
+              <Switch
+                id="notificationEnabled"
+                checked={formData.notification_enabled}
+                onCheckedChange={(checked) => setFormData(prev => ({ 
+                  ...prev, 
+                  notification_enabled: checked,
+                  notification_channels: checked ? prev.notification_channels : [],
+                  threshold_id: checked ? prev.threshold_id : "none",
+                  template_id: checked ? prev.template_id : "none"
+                }))}
+              />
+              <Label htmlFor="notificationEnabled">Enable Notifications</Label>
+            </div>
+            
+            {/* Expanded Notification Settings */}
+            {formData.notification_enabled && (
+              <Card className="border-l-4 border-l-blue-500">
+                <CardHeader>
+                  <CardTitle className="text-lg">Notification Settings</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {/* Multiple Notification Channels Selection */}
+                  <div className="space-y-2">
+                    <Label>Notification Channels</Label>
+                    <div className="space-y-2 max-h-40 overflow-y-auto border rounded-md p-3">
+                      {loadingAlertConfigs ? (
+                        <div className="text-sm text-muted-foreground">Loading channels...</div>
+                      ) : alertConfigs.length > 0 ? (
+                        alertConfigs.map((config) => (
+                          <div key={config.id} className="flex items-center space-x-2">
+                            <Checkbox
+                              id={`channel-${config.id}`}
+                              checked={formData.notification_channels.includes(config.id || "")}
+                              onCheckedChange={(checked) => 
+                                handleNotificationChannelToggle(config.id || "", checked as boolean)
+                              }
+                            />
+                            <Label 
+                              htmlFor={`channel-${config.id}`} 
+                              className="flex-1 text-sm cursor-pointer"
+                            >
+                              {config.notify_name} ({config.notification_type})
+                            </Label>
+                          </div>
+                        ))
+                      ) : (
+                        <div className="text-sm text-muted-foreground">No notification channels available</div>
+                      )}
+                    </div>
+                    
+                    {/* Selected Channels Display */}
+                    {formData.notification_channels.length > 0 && (
+                      <div className="space-y-2">
+                        <Label className="text-sm font-medium">Selected Channels:</Label>
+                        <div className="flex flex-wrap gap-2">
+                          {formData.notification_channels.map((channelId) => {
+                            const channel = alertConfigs.find(c => c.id === channelId);
+                            return (
+                              <div 
+                                key={channelId}
+                                className="flex items-center gap-1 bg-secondary text-secondary-foreground px-2 py-1 rounded-md text-sm"
+                              >
+                                <span>{channel?.notify_name || channelId}</span>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-4 w-4 p-0 hover:bg-destructive hover:text-destructive-foreground"
+                                  onClick={() => removeNotificationChannel(channelId)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Server Set Threshold Selection */}
+                  <div className="space-y-2">
+                    <Label htmlFor="thresholdId">Server Set Threshold</Label>
+                    <Select
+                      value={formData.threshold_id}
+                      onValueChange={(value) => setFormData(prev => ({ ...prev, threshold_id: value }))}
+                      disabled={loadingThresholds}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder={loadingThresholds ? "Loading thresholds..." : "Select server threshold"} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">No threshold (use default)</SelectItem>
+                        {thresholds.map((threshold) => (
+                          <SelectItem key={threshold.id} value={threshold.id}>
+                            {threshold.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* Editable Threshold Details */}
+                  {selectedThreshold && (
+                    <Card className="bg-muted/50">
+                      <CardHeader className="flex flex-row items-center justify-between">
+                        <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">
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">CPU Threshold (%)</Label>
+                            <Input
+                              type="number"
+                              min="0"
+                              max="100"
+                              value={thresholdFormData.cpu_threshold}
+                              onChange={(e) => setThresholdFormData(prev => ({ 
+                                ...prev, 
+                                cpu_threshold: parseInt(e.target.value) || 0 
+                              }))}
+                              className="mt-1"
+                            />
+                          </div>
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">RAM Threshold (%)</Label>
+                            <Input
+                              type="number"
+                              min="0"
+                              max="100"
+                              value={thresholdFormData.ram_threshold}
+                              onChange={(e) => setThresholdFormData(prev => ({ 
+                                ...prev, 
+                                ram_threshold: parseInt(e.target.value) || 0 
+                              }))}
+                              className="mt-1"
+                            />
+                          </div>
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">Disk Threshold (%)</Label>
+                            <Input
+                              type="number"
+                              min="0"
+                              max="100"
+                              value={thresholdFormData.disk_threshold}
+                              onChange={(e) => setThresholdFormData(prev => ({ 
+                                ...prev, 
+                                disk_threshold: parseInt(e.target.value) || 0 
+                              }))}
+                              className="mt-1"
+                            />
+                          </div>
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">Network Threshold (%)</Label>
+                            <Input
+                              type="number"
+                              min="0"
+                              max="100"
+                              value={thresholdFormData.network_threshold}
+                              onChange={(e) => setThresholdFormData(prev => ({ 
+                                ...prev, 
+                                network_threshold: parseInt(e.target.value) || 0 
+                              }))}
+                              className="mt-1"
+                            />
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  )}
+
+                  {/* Server Template Selection */}
+                  <div className="space-y-2">
+                    <Label htmlFor="templateId">Server Template</Label>
+                    <Select
+                      value={formData.template_id}
+                      onValueChange={(value) => setFormData(prev => ({ ...prev, template_id: value }))}
+                      disabled={loadingTemplates}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder={loadingTemplates ? "Loading templates..." : "Select server template"} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">No template (use default)</SelectItem>
+                        {templates.map((template) => (
+                          <SelectItem key={template.id} value={template.id}>
+                            {template.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* Template Details */}
+                  {selectedTemplate && (
+                    <Card className="bg-muted/50">
+                      <CardHeader>
+                        <CardTitle className="text-base">Template Details: {selectedTemplate.name}</CardTitle>
+                      </CardHeader>
+                      <CardContent className="space-y-3">
+                        <div className="grid grid-cols-1 gap-3 text-sm">
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">RAM Threshold Message</Label>
+                            <p className="text-sm bg-background p-2 rounded border">
+                              {selectedTemplate.up_message || "No RAM threshold message defined"}
+                            </p>
+                          </div>
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">CPU Threshold Message</Label>
+                            <p className="text-sm bg-background p-2 rounded border">
+                              {selectedTemplate.down_message || "No CPU threshold message defined"}
+                            </p>
+                          </div>
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">Disk Threshold Message</Label>
+                            <p className="text-sm bg-background p-2 rounded border">
+                              {selectedTemplate.incident_message || "No disk threshold message defined"}
+                            </p>
+                          </div>
+                          <div>
+                            <Label className="text-xs font-medium text-muted-foreground">Network Threshold Message</Label>
+                            <p className="text-sm bg-background p-2 rounded border">
+                              {selectedTemplate.maintenance_message || "No network threshold message defined"}
+                            </p>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  )}
+                </CardContent>
+              </Card>
+            )}
+          </div>
+
+          <div className="flex justify-end space-x-2 pt-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCancel}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? (
+                <>
+                  <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+                  Updating...
+                </>
+              ) : (
+                "Update Server"
+              )}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

application/src/components/servers/ManualInstallTab.tsx

@@ -0,0 +1,125 @@
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Copy, Terminal } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { copyToClipboard } from "@/utils/copyUtils";
+
+interface ManualInstallTabProps {
+  serverToken: string;
+  currentPocketBaseUrl: string;
+  formData: {
+    serverName: string;
+    osType: string;
+    checkInterval: string;
+  };
+  serverId: string;
+  onDialogClose: () => void;
+}
+
+export const ManualInstallTab: React.FC<ManualInstallTabProps> = ({
+  serverToken,
+  currentPocketBaseUrl,
+  formData,
+  serverId,
+  onDialogClose,
+}) => {
+  const getManualInstallSteps = () => {
+    const scriptUrl = "https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/server-agent.sh";
+    
+    return [
+      {
+        title: "Download the installation script",
+        command: `curl -L -o server-agent.sh "${scriptUrl}"`
+      },
+      {
+        title: "Make the script executable",
+        command: `chmod +x server-agent.sh`
+      },
+      {
+        title: "Run the installation with your configuration",
+        command: `SERVER_TOKEN="${serverToken}" POCKETBASE_URL="${currentPocketBaseUrl}" SERVER_NAME="${formData.serverName}" AGENT_ID="${serverId}" sudo bash server-agent.sh`
+      }
+    ];
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Terminal className="h-5 w-5" />
+          Manual Installation Steps
+        </CardTitle>
+        <CardDescription>
+          Step-by-step installation process
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <span className="font-medium">Server Name:</span> {formData.serverName}
+            </div>
+            <div>
+              <span className="font-medium">Agent ID:</span> {serverId}
+            </div>
+            <div>
+              <span className="font-medium">OS Type:</span> {formData.osType}
+            </div>
+            <div>
+              <span className="font-medium">Check Interval:</span> {formData.checkInterval}s
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          {getManualInstallSteps().map((step, index) => (
+            <div key={index} className="space-y-2">
+              <div className="flex items-center gap-2">
+                <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-sm font-medium">
+                  {index + 1}
+                </span>
+                <span className="font-medium">{step.title}</span>
+              </div>
+              <div className="ml-8 relative">
+                <pre className="bg-muted p-3 rounded-md text-sm overflow-x-auto whitespace-pre-wrap break-all">
+                  <code>{step.command}</code>
+                </pre>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="absolute top-2 right-2"
+                  onClick={() => copyToClipboard(step.command)}
+                >
+                  <Copy className="h-4 w-4 mr-1" />
+                  Copy
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-md p-4">
+          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">Prerequisites:</h4>
+          <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1 list-disc list-inside mb-3">
+            <li>Ensure you have root/sudo access on the target server</li>
+            <li>Make sure curl is installed for downloading files</li>
+            <li>Internet connection required for downloading script</li>
+          </ul>
+          
+          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">After Installation:</h4>
+          <p className="text-sm text-blue-800 dark:text-blue-200">
+            The agent will start automatically and appear in your dashboard within a few minutes.
+          </p>
+        </div>
+
+        <div className="flex justify-end pt-4">
+          <Button onClick={onDialogClose}>
+            Done
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

application/src/components/servers/OSSelector.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface OSOption {
+  value: string;
+  name: string;
+  logo: string; // now it's a path to image, e.g., /logos/ubuntu.svg
+}
+
+const osOptions: OSOption[] = [
+  { value: "ubuntu", name: "Ubuntu", logo: "/upload/os/ubuntu.png" },
+  { value: "debian", name: "Debian", logo: "/upload/os/debian.png" },
+  { value: "centos", name: "CentOS", logo: "/upload/os/centos.png" },
+  { value: "rhel", name: "Red Hat Enterprise Linux", logo: "/upload/os/rhel.png" },
+  { value: "linux", name: "Linux (Generic)", logo: "/upload/os/linux.png" },
+  { value: "windows", name: "Windows Server", logo: "/upload/os/windows.png" },
+];
+
+interface OSSelectorProps {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export const OSSelector: React.FC<OSSelectorProps> = ({ value, onValueChange }) => {
+  return (
+    <div className="grid gap-2">
+      {osOptions.map((os) => (
+        <button
+          key={os.value}
+          type="button"
+          onClick={() => onValueChange(os.value)}
+          className={cn(
+            "flex items-center justify-between w-full rounded-md border px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground transition",
+            value === os.value ? "bg-accent text-accent-foreground border-ring" : "border-input"
+          )}
+        >
+          <div className="flex items-center gap-3">
+            <img
+              src={os.logo}
+              alt={`${os.name} logo`}
+              className="w-6 h-6 object-contain"
+            />
+            <span>{os.name}</span>
+          </div>
+          {value === os.value && <Check className="h-4 w-4" />}
+        </button>
+      ))}
+    </div>
+  );
+};

application/src/components/servers/OSTypeIcon.tsx

@@ -0,0 +1,27 @@
+
+import { Monitor, Server, Smartphone, Laptop } from "lucide-react";
+
+interface OSTypeIconProps {
+  osType: string;
+  className?: string;
+}
+
+export const OSTypeIcon = ({ osType, className = "h-4 w-4" }: OSTypeIconProps) => {
+  const getOSIcon = (os: string) => {
+    const osLower = os.toLowerCase();
+    
+    if (osLower.includes('linux') || osLower.includes('ubuntu') || osLower.includes('centos') || osLower.includes('debian')) {
+      return <Server className={className} />;
+    } else if (osLower.includes('windows')) {
+      return <Monitor className={className} />;
+    } else if (osLower.includes('mac') || osLower.includes('darwin')) {
+      return <Laptop className={className} />;
+    } else if (osLower.includes('android') || osLower.includes('ios')) {
+      return <Smartphone className={className} />;
+    } else {
+      return <Server className={className} />;
+    }
+  };
+
+  return getOSIcon(osType);
+};

application/src/components/servers/OneClickInstallTab.tsx

@@ -0,0 +1,101 @@
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Copy, Download } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { copyToClipboard } from "@/utils/copyUtils";
+
+interface OneClickInstallTabProps {
+  serverToken: string;
+  currentPocketBaseUrl: string;
+  formData: {
+    serverName: string;
+    osType: string;
+    checkInterval: string;
+    retryAttempt: string;
+  };
+  serverId: string;
+  onDialogClose: () => void;
+}
+
+export const OneClickInstallTab: React.FC<OneClickInstallTabProps> = ({
+  serverToken,
+  currentPocketBaseUrl,
+  formData,
+  serverId,
+  onDialogClose,
+}) => {
+  const getOneClickInstallCommand = () => {
+    const scriptUrl = "https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/server-agent.sh";
+
+    return `curl -L -o server-agent.sh "${scriptUrl}"
+chmod +x server-agent.sh
+SERVER_TOKEN="${serverToken}" \\
+POCKETBASE_URL="${currentPocketBaseUrl}" \\
+SERVER_NAME="${formData.serverName}" \\
+AGENT_ID="${serverId}" \\
+OS_TYPE="${formData.osType}" \\
+CHECK_INTERVAL="${formData.checkInterval}" \\
+RETRY_ATTEMPTS="${formData.retryAttempt}" \\
+sudo -E bash ./server-agent.sh`;
+  };
+
+  const handleCopyCommand = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log('Copy button clicked'); // Debug log
+    const command = getOneClickInstallCommand();
+    console.log('Copying command:', command); // Debug log
+    await copyToClipboard(command);
+  };
+
+  return (
+    <Card className="border-green-500/20 bg-green-0/50 dark:bg-green-950/20">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-green-700 dark:text-green-400">
+          <Download className="h-5 w-5" />
+          One-Click Install
+        </CardTitle>
+        <CardDescription className="text-green-600 dark:text-green-300">
+          Copy and paste this single command to install the monitoring agent instantly
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label className="text-green-700 dark:text-green-400">Quick Install Command</Label>
+          <div className="relative">
+            <pre className="bg-black-50 dark:bg-green-100/950 border border-green-200 dark:border-green-800 p-4 rounded-md text-sm overflow-x-auto whitespace-pre-wrap break-all text-green-800 dark:text-green-200">
+              <code>{getOneClickInstallCommand()}</code>
+            </pre>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="absolute top-2 right-2 bg-green-50 dark:bg-green-950/50 border-green-200 dark:border-green-800 hover:bg-green-100 dark:hover:bg-green-900 text-green-700 dark:text-green-400"
+              onClick={handleCopyCommand}
+            >
+              <Copy className="h-4 w-4 mr-1" />
+              Copy
+            </Button>
+          </div>
+        </div>
+        
+        <div className="text-sm text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/50 border border-green-200 dark:border-green-800 p-3 rounded-md">
+          <p className="font-medium mb-1">Simply run this command on your server:</p>
+          <ol className="list-decimal list-inside space-y-1 text-xs">
+            <li>SSH into your target server</li>
+            <li>Paste and run the command above</li>
+            <li>The agent will be installed and started automatically</li>
+          </ol>
+        </div>
+
+        <div className="flex justify-end pt-4">
+          <Button onClick={onDialogClose}>
+            Done
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

application/src/components/servers/ServerAgentConfigForm.tsx

@@ -0,0 +1,172 @@
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Copy } from "lucide-react";
+import { copyToClipboard } from "@/utils/copyUtils";
+import { OSSelector } from "./OSSelector";
+
+interface ServerAgentConfigFormProps {
+  formData: {
+    serverName: string;
+    description: string;
+    osType: string;
+    checkInterval: string;
+    retryAttempt: string;
+    dockerEnabled: boolean;
+    notificationEnabled: boolean;
+  };
+  setFormData: React.Dispatch<React.SetStateAction<{
+    serverName: string;
+    description: string;
+    osType: string;
+    checkInterval: string;
+    retryAttempt: string;
+    dockerEnabled: boolean;
+    notificationEnabled: boolean;
+  }>>;
+  serverId: string;
+  serverToken: string;
+  currentPocketBaseUrl: string;
+  isSubmitting: boolean;
+  onSubmit: (e: React.FormEvent) => void;
+}
+
+export const ServerAgentConfigForm: React.FC<ServerAgentConfigFormProps> = ({
+  formData,
+  setFormData,
+  serverId,
+  serverToken,
+  currentPocketBaseUrl,
+  isSubmitting,
+  onSubmit,
+}) => {
+  return (
+    <form onSubmit={onSubmit} className="space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="serverName">Server Name *</Label>
+          <Input
+            id="serverName"
+            placeholder="e.g., web-server-01"
+            value={formData.serverName}
+            onChange={(e) => setFormData(prev => ({ ...prev, serverName: e.target.value }))}
+            required
+          />
+          <p className="text-xs text-muted-foreground">What is the name or label used as the identifier</p>
+        </div>
+        
+        <div className="space-y-2">
+          <Label htmlFor="serverId">Server Agent ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="serverId"
+              value={serverId}
+              readOnly
+              className="font-mono text-sm bg-muted"
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={() => copyToClipboard(serverId)}
+            >
+              <Copy className="h-4 w-4" />
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">Auto-generated unique identifier</p>
+        </div>
+      </div>
+      
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label>Operating System *</Label>
+          <OSSelector
+            value={formData.osType}
+            onValueChange={(value) => setFormData(prev => ({ ...prev, osType: value }))}
+          />
+        </div>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="checkInterval">Check Interval</Label>
+            <Select
+              value={formData.checkInterval}
+              onValueChange={(value) => setFormData(prev => ({ ...prev, checkInterval: value }))}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select interval" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="30">30 seconds</SelectItem>
+                <SelectItem value="60">1 minute</SelectItem>
+                <SelectItem value="120">2 minutes</SelectItem>
+                <SelectItem value="300">5 minutes</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-muted-foreground">How often to check the server and metric status</p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="retryAttempt">Retry Attempts</Label>
+            <Select
+              value={formData.retryAttempt}
+              onValueChange={(value) => setFormData(prev => ({ ...prev, retryAttempt: value }))}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select retry attempts" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">1 attempt</SelectItem>
+                <SelectItem value="2">2 attempts</SelectItem>
+                <SelectItem value="3">3 attempts</SelectItem>
+                <SelectItem value="5">5 attempts</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-muted-foreground">Number of retry attempts before marking as down</p>
+          </div>
+
+          <div className="space-y-2">
+            <Label>Server Token</Label>
+            <div className="flex gap-2">
+              <Input value={serverToken} readOnly className="font-mono text-sm bg-muted" />
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={() => copyToClipboard(serverToken)}
+              >
+                <Copy className="h-4 w-4" />
+              </Button>
+            </div>
+            <p className="text-xs text-muted-foreground">Auto-generated authentication token</p>
+          </div>
+
+          <div className="space-y-2">
+            <Label>System URL</Label>
+            <div className="flex gap-2">
+              <Input value={currentPocketBaseUrl} readOnly className="font-mono text-sm bg-muted" />
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={() => copyToClipboard(currentPocketBaseUrl)}
+              >
+                <Copy className="h-4 w-4" />
+              </Button>
+            </div>
+            <p className="text-xs text-muted-foreground">Current system API URL</p>
+          </div>
+        </div>
+      </div>
+     
+      <div className="pt-4">
+        <Button type="submit" disabled={isSubmitting} className="w-full">
+          {isSubmitting ? "Creating Agent..." : "Create Server Agent"}
+        </Button>
+      </div>
+    </form>
+  );
+};

application/src/components/servers/ServerHistoryCharts.tsx

@@ -0,0 +1,163 @@
+
+import { useMemo } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Loader2, TrendingUp } from "lucide-react";
+import { TimeRangeSelector } from "./charts/TimeRangeSelector";
+import { useServerHistoryData } from "./charts/hooks/useServerHistoryData";
+import { CPUChart } from "./charts/CPUChart";
+import { MemoryChart } from "./charts/MemoryChart";
+import { DiskChart } from "./charts/DiskChart";
+import { NetworkChart } from "./charts/NetworkChart";
+
+interface ServerHistoryChartsProps {
+  serverId: string;
+}
+
+export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
+  const {
+    timeRange,
+    setTimeRange,
+    metrics,
+    chartData,
+    isLoading,
+    error,
+    isFetching
+  } = useServerHistoryData(serverId);
+
+ // console.log('ServerHistoryCharts: Rendering with serverId:', serverId, 'timeRange:', timeRange);
+
+  // Memoize latest data calculation to prevent unnecessary recalculations
+  const latestData = useMemo(() => {
+    return chartData.length > 0 ? chartData[chartData.length - 1] : null;
+  }, [chartData]);
+
+  // Show skeleton loading state for better UX
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <TrendingUp className="h-5 w-5" />
+            <h2 className="text-lg font-medium">Historical Performance</h2>
+            <div className="flex items-center gap-2 ml-2">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              <span className="text-xs text-muted-foreground">Loading...</span>
+            </div>
+          </div>
+          <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
+        </div>
+        
+        {/* Skeleton loading cards */}
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6">
+          {[1, 2, 3, 4].map((index) => (
+            <Card key={index} className="bg-gradient-to-br from-background to-muted/20">
+              <CardContent className="p-4 lg:p-6">
+                <div className="animate-pulse">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                      <div className="w-8 h-8 bg-muted rounded-lg"></div>
+                      <div className="w-24 h-5 bg-muted rounded"></div>
+                    </div>
+                    <div className="w-16 h-4 bg-muted rounded"></div>
+                  </div>
+                  <div className="w-full h-64 lg:h-80 bg-muted rounded"></div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+  //  console.error('ServerHistoryCharts: Error loading data:', error);
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <TrendingUp className="h-5 w-5" />
+            <h2 className="text-lg font-medium">Historical Performance</h2>
+            {isFetching && <Loader2 className="h-4 w-4 animate-spin ml-2" />}
+          </div>
+          <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
+        </div>
+        <Card>
+          <CardContent className="flex items-center justify-center py-12">
+            <div className="text-center">
+              <p className="text-muted-foreground">Error loading chart data</p>
+              <p className="text-xs mt-2 font-mono text-red-500">{error?.message}</p>
+              <p className="text-xs mt-1 text-muted-foreground">Server ID: {serverId} • Time Range: {timeRange}</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (chartData.length === 0) {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <TrendingUp className="h-5 w-5" />
+            <h2 className="text-lg font-medium">Historical Performance</h2>
+            {isFetching && <Loader2 className="h-4 w-4 animate-spin ml-2" />}
+          </div>
+          <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
+        </div>
+        <Card>
+          <CardContent className="flex items-center justify-center py-12">
+            <div className="text-center">
+              <p className="text-muted-foreground">No historical data available for {timeRange}</p>
+              <p className="text-xs mt-2">Raw metrics count: {metrics.length}</p>
+              <p className="text-xs mt-1">Server ID: {serverId} • Time Range: {timeRange}</p>
+              <p className="text-xs mt-1 text-muted-foreground">
+                {metrics.length > 0 ? 'Data exists but may be outside selected time range' : 'No metrics data found'}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+//  console.log('ServerHistoryCharts: Rendering charts with', chartData.length, 'data points for time range:', timeRange);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div className="flex items-center gap-2">
+          <TrendingUp className="h-5 w-5" />
+          <h2 className="text-lg font-medium">Historical Performance</h2>
+          <span className="text-xs text-muted-foreground">
+            ({chartData.length} data points • {timeRange})
+            {isFetching && (
+              <span className="inline-flex items-center gap-1 ml-2">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                <span className="text-blue-500">Updating...</span>
+              </span>
+            )}
+          </span>
+        </div>
+        <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
+      </div>
+
+      {/* Improved responsive grid layout */}
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6 auto-rows-fr">
+        <div className="w-full min-w-0">
+          <CPUChart data={chartData} latestData={latestData} />
+        </div>
+        <div className="w-full min-w-0">
+          <MemoryChart data={chartData} latestData={latestData} />
+        </div>
+        <div className="w-full min-w-0">
+          <DiskChart data={chartData} latestData={latestData} />
+        </div>
+        <div className="w-full min-w-0">
+          <NetworkChart data={chartData} latestData={latestData} />
+        </div>
+      </div>
+    </div>
+  );
+};

application/src/components/servers/ServerMetricsCharts.tsx

@@ -0,0 +1,115 @@
+
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { serverService } from "@/services/serverService";
+import { Loader2, Cpu, HardDrive, Network, MemoryStick } from "lucide-react";
+import { formatChartData } from "./charts/dataUtils";
+import { TimeRangeSelector } from "./charts/TimeRangeSelector";
+import { CPUChart } from "./charts/CPUChart";
+import { MemoryChart } from "./charts/MemoryChart";
+import { DiskChart } from "./charts/DiskChart";
+import { NetworkChart } from "./charts/NetworkChart";
+
+interface ServerMetricsChartsProps {
+  serverId: string;
+}
+
+type TimeRange = '60m' | '1d' | '7d' | '1m' | '3m';
+
+export const ServerMetricsCharts = ({ serverId }: ServerMetricsChartsProps) => {
+  const [timeRange, setTimeRange] = useState<TimeRange>("1d");
+
+  const {
+    data: metrics = [],
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: ['server-metrics', serverId, timeRange],
+    queryFn: () => serverService.getServerMetrics(serverId, timeRange),
+    enabled: !!serverId,
+    refetchInterval: timeRange === '60m' ? 60000 : timeRange === '1d' ? 120000 : 300000, // Increased intervals
+    staleTime: timeRange === '60m' ? 30000 : timeRange === '1d' ? 60000 : 120000, // Increased stale time
+    gcTime: 10 * 60 * 1000, // 10 minutes cache
+    refetchOnWindowFocus: false, // Prevent refetch on window focus
+  });
+
+  const chartData = formatChartData(metrics, timeRange);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <Loader2 className="h-8 w-8 animate-spin" />
+        <span className="ml-2">Loading server metrics...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-96 text-muted-foreground">
+        <p>Error loading server metrics: {error.message}</p>
+      </div>
+    );
+  }
+
+  if (chartData.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-96 text-muted-foreground">
+        <p>No server metrics data available for {timeRange}</p>
+      </div>
+    );
+  }
+
+  // Calculate latest data for each chart
+  const latestData = chartData[chartData.length - 1];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-medium">Server Metrics</h2>
+          <span className="text-xs text-muted-foreground">({chartData.length} data points • {timeRange})</span>
+        </div>
+        <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
+      </div>
+
+      <Tabs defaultValue="cpu" className="w-full">
+        <TabsList className="grid w-full grid-cols-4 bg-muted/50 backdrop-blur-sm">
+          <TabsTrigger value="cpu" className="flex items-center gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm">
+            <Cpu className="h-4 w-4" />
+            CPU
+          </TabsTrigger>
+          <TabsTrigger value="memory" className="flex items-center gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm">
+            <MemoryStick className="h-4 w-4" />
+            Memory
+          </TabsTrigger>
+          <TabsTrigger value="disk" className="flex items-center gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm">
+            <HardDrive className="h-4 w-4" />
+            Disk
+          </TabsTrigger>
+          <TabsTrigger value="network" className="flex items-center gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm">
+            <Network className="h-4 w-4" />
+            Network
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="cpu" className="space-y-4 mt-6">
+          <CPUChart data={chartData} latestData={latestData} />
+        </TabsContent>
+
+        <TabsContent value="memory" className="space-y-4 mt-6">
+          <MemoryChart data={chartData} latestData={latestData} />
+        </TabsContent>
+
+        <TabsContent value="disk" className="space-y-4 mt-6">
+          <DiskChart data={chartData} latestData={latestData} />
+        </TabsContent>
+
+        <TabsContent value="network" className="space-y-4 mt-6">
+          <NetworkChart data={chartData} latestData={latestData} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};

application/src/components/servers/ServerMetricsOverview.tsx

@@ -0,0 +1,259 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Server } from "@/types/server.types";
+import { Cpu, HardDrive, MemoryStick, Clock, Activity, Info } from "lucide-react";
+import { useTheme } from "@/contexts/ThemeContext";
+
+interface ServerMetricsOverviewProps {
+  server: Server;
+}
+
+export const ServerMetricsOverview = ({ server }: ServerMetricsOverviewProps) => {
+  const { theme } = useTheme();
+
+  const formatBytes = (bytes: number) => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'up':
+        return 'text-green-500';
+      case 'down':
+        return 'text-red-500';
+      case 'warning':
+        return 'text-yellow-500';
+      default:
+        return 'text-muted-foreground';
+    }
+  };
+
+  const cpuUsagePercent = server.cpu_usage || 0;
+  const ramUsagePercent = server.ram_total > 0 ? (server.ram_used / server.ram_total) * 100 : 0;
+  const diskUsagePercent = server.disk_total > 0 ? (server.disk_used / server.disk_total) * 100 : 0;
+
+  const MetricCard = ({ title, used, total, free, percentage, icon: Icon, color, gradient, additionalInfo }: {
+    title: string;
+    used: string;
+    total: string;
+    free: string;
+    percentage: number;
+    icon: any;
+    color: string;
+    gradient: string;
+    additionalInfo?: string;
+  }) => (
+    <Card 
+      className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative"
+      style={{ background: gradient }}
+    >
+      {/* Grid Pattern Overlay */}
+      <div className="absolute inset-0 z-0 opacity-10">
+        <div 
+          className="w-full h-full" 
+          style={{ 
+            backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), 
+                              linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
+            backgroundSize: '20px 20px'
+          }}
+        />
+      </div>
+      
+      <CardHeader className="pb-3 relative z-10">
+        <CardTitle className="flex items-center justify-between text-sm font-semibold">
+          <div className="flex items-center gap-3">
+            <div className="p-2.5 rounded-xl bg-white/20 backdrop-blur-sm shadow-sm transition-all duration-300 group-hover:scale-110">
+              <Icon className="h-4 w-4 text-white" />
+            </div>
+            <span className="text-white">{title}</span>
+          </div>
+          <div className="text-xs font-mono font-bold px-2 py-1 rounded-md bg-white/20 backdrop-blur-sm text-white border border-white/30">
+            {percentage.toFixed(1)}%
+          </div>
+        </CardTitle>
+      </CardHeader>
+      
+      <CardContent className="space-y-4 relative z-10">
+        <div className="grid grid-cols-2 gap-4 text-xs">
+          <div className="space-y-1">
+            <div className="flex justify-between">
+              <span className="text-white/70">Used:</span>
+              <span className="font-mono font-semibold text-white">{used}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-white/70">Free:</span>
+              <span className="font-mono font-semibold text-white">{free}</span>
+            </div>
+          </div>
+          <div className="space-y-1">
+            <div className="flex justify-between">
+              <span className="text-white/70">Total:</span>
+              <span className="font-mono font-semibold text-white">{total}</span>
+            </div>
+            {additionalInfo && (
+              <div className="flex justify-between">
+                <span className="text-white/70">Cores:</span>
+                <span className="font-mono font-semibold text-white">{additionalInfo}</span>
+              </div>
+            )}
+          </div>
+        </div>
+        
+        <div className="w-full bg-white/20 rounded-full h-3 overflow-hidden shadow-inner backdrop-blur-sm">
+          <div 
+            className="h-3 rounded-full transition-all duration-700 ease-out relative overflow-hidden bg-white/80"
+            style={{ width: `${Math.min(percentage, 100)}%` }}
+          >
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse" />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-white/10" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
+      {/* Status Card */}
+      <Card 
+        className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative"
+        style={{
+          background: theme === 'dark' 
+            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(59, 130, 246, 0.6) 100%)" 
+            : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #3b82f6 100%)"
+        }}
+      >
+        {/* Grid Pattern Overlay */}
+        <div className="absolute inset-0 z-0 opacity-10">
+          <div 
+            className="w-full h-full" 
+            style={{ 
+              backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), 
+                                linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
+              backgroundSize: '20px 20px'
+            }}
+          />
+        </div>
+        
+        <CardHeader className="pb-3 relative z-10">
+          <CardTitle className="flex items-center gap-3 text-sm font-semibold">
+            <div className="p-2.5 rounded-xl bg-white/20 backdrop-blur-sm shadow-sm transition-all duration-300 group-hover:scale-110">
+              <Activity className="h-4 w-4 text-white" />
+            </div>
+            <span className="text-white">Status</span>
+          </CardTitle>
+        </CardHeader>
+        
+        <CardContent className="space-y-4 relative z-10">
+          <div className={`text-lg font-bold capitalize flex items-center gap-3 text-white`}>
+            <div className={`w-3 h-3 rounded-full ${server.status === 'up' ? 'bg-green-400' : server.status === 'down' ? 'bg-red-400' : 'bg-yellow-400'} animate-pulse shadow-sm`} />
+            {server.status}
+          </div>
+          <div className="space-y-2 text-xs">
+            <div className="flex justify-between py-1">
+              <span className="text-white/70">Agent:</span>
+              <span className="font-semibold text-white">{server.agent_status}</span>
+            </div>
+            <div className="flex justify-between py-1">
+              <span className="text-white/70">Connection:</span>
+              <span className="font-semibold text-white">{server.connection}</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Uptime Card */}
+      <Card 
+        className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative"
+        style={{
+          background: theme === 'dark' 
+            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(34, 197, 94, 0.6) 100%)" 
+            : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #22c55e 100%)"
+        }}
+      >
+        {/* Grid Pattern Overlay */}
+        <div className="absolute inset-0 z-0 opacity-10">
+          <div 
+            className="w-full h-full" 
+            style={{ 
+              backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), 
+                                linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
+              backgroundSize: '20px 20px'
+            }}
+          />
+        </div>
+        
+        <CardHeader className="pb-3 relative z-10">
+          <CardTitle className="flex items-center gap-3 text-sm font-semibold">
+            <div className="p-2.5 rounded-xl bg-white/20 backdrop-blur-sm shadow-sm transition-all duration-300 group-hover:scale-110">
+              <Clock className="h-4 w-4 text-white" />
+            </div>
+            <span className="text-white">Uptime</span>
+          </CardTitle>
+        </CardHeader>
+        
+        <CardContent className="space-y-4 relative z-10">
+          <div className="text-lg font-bold text-white">
+            {server.uptime}
+          </div>
+          <div className="text-xs text-white/70 space-y-1">
+            <div>Last Check:</div>
+            <div className="font-mono text-[10px] text-white/90 bg-white/10 px-2 py-1 rounded backdrop-blur-sm">
+              {new Date(server.last_checked).toLocaleString()}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* CPU Metric */}
+      <MetricCard
+        title="CPU"
+        used={`${cpuUsagePercent.toFixed(1)}%`}
+        total={`${server.cpu_cores} cores`}
+        free={`${(100 - cpuUsagePercent).toFixed(1)}%`}
+        percentage={cpuUsagePercent}
+        icon={Cpu}
+        color={theme === 'dark' ? "#3b82f6" : "#2563eb"}
+        gradient={theme === 'dark' 
+          ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(59, 130, 246, 0.6) 100%)" 
+          : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #3b82f6 100%)"
+        }
+        additionalInfo={server.cpu_cores?.toString()}
+      />
+
+      {/* Memory Metric */}
+      <MetricCard
+        title="Memory"
+        used={formatBytes(server.ram_used)}
+        total={formatBytes(server.ram_total)}
+        free={formatBytes(server.ram_total - server.ram_used)}
+        percentage={ramUsagePercent}
+        icon={MemoryStick}
+        color={theme === 'dark' ? "#10b981" : "#059669"}
+        gradient={theme === 'dark' 
+          ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(16, 185, 129, 0.6) 100%)" 
+          : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #10b981 100%)"
+        }
+      />
+
+      {/* Disk Metric */}
+      <MetricCard
+        title="Disk"
+        used={formatBytes(server.disk_used)}
+        total={formatBytes(server.disk_total)}
+        free={formatBytes(server.disk_total - server.disk_used)}
+        percentage={diskUsagePercent}
+        icon={HardDrive}
+        color={theme === 'dark' ? "#f59e0b" : "#d97706"}
+        gradient={theme === 'dark' 
+          ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(245, 158, 11, 0.6) 100%)" 
+          : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #f59e0b 100%)"
+        }
+      />
+    </div>
+  );
+};

application/src/components/servers/ServerStatsCards.tsx

@@ -0,0 +1,84 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Server, Activity, AlertTriangle, Power } from "lucide-react";
+import { ServerStats } from "@/types/server.types";
+import { useTheme } from "@/contexts/ThemeContext";
+
+interface ServerStatsCardsProps {
+  stats: ServerStats;
+}
+
+export const ServerStatsCards = ({ stats }: ServerStatsCardsProps) => {
+  const { theme } = useTheme();
+
+  const cards = [
+    {
+      title: "TOTAL SERVERS",
+      value: stats.total,
+      icon: Server,
+      gradient: theme === 'dark' 
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(160, 82, 45, 0.6) 100%)" 
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #a0522d 100%)"
+    },
+    {
+      title: "ONLINE SERVERS",
+      value: stats.online,
+      icon: Activity,
+      gradient: theme === 'dark' 
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%)" 
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #66bb6a 100%)"
+    },
+    {
+      title: "OFFLINE SERVERS",
+      value: stats.offline,
+      icon: Power,
+      gradient: theme === 'dark'
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(239, 83, 80, 0.6) 100%)"
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #ef5350 100%)"
+    },
+    {
+      title: "WARNING SERVERS",
+      value: stats.warning,
+      icon: AlertTriangle,
+      gradient: theme === 'dark'
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(255, 183, 77, 0.6) 100%)"
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #ffb74d 100%)"
+    }
+  ];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 w-full">
+      {cards.map((card, index) => (
+        <Card 
+          key={index}
+          className={`border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 ${
+            theme === 'dark' ? 'dark-card' : ''
+          } relative z-10`}
+          style={{
+            background: card.gradient
+          }}
+        >
+          {/* Grid Pattern Overlay */}
+          <div className="absolute inset-0 z-0 opacity-10">
+            <div className="w-full h-full" 
+              style={{ 
+                backgroundImage: `linear-gradient(#000 1px, transparent 1px), 
+                                  linear-gradient(90deg, #fff 1px, transparent 1px)`,
+                backgroundSize: '20px 20px'
+              }}
+            ></div>
+          </div>
+          <CardHeader className="pb-2 relative z-10">
+            <CardTitle className="text-sm font-medium text-white">{card.title}</CardTitle>
+          </CardHeader>
+          <CardContent className="flex items-center justify-between relative z-10">
+            <span className="text-5xl font-bold text-white">{card.value}</span>
+            <div className="rounded-full p-3 bg-white/25 backdrop-blur-sm">
+              <card.icon className="h-6 w-6 text-white" />
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+};

application/src/components/servers/ServerStatusBadge.tsx

@@ -0,0 +1,46 @@
+
+import { Badge } from "@/components/ui/badge";
+
+interface ServerStatusBadgeProps {
+  status: 'up' | 'down' | 'warning' | 'paused';
+}
+
+export const ServerStatusBadge = ({ status }: ServerStatusBadgeProps) => {
+  const getStatusConfig = (status: string) => {
+    switch (status) {
+      case 'up':
+        return {
+          label: 'Online',
+          className: 'bg-green-600 text-green-100 border-green-200'
+        };
+      case 'down':
+        return {
+          label: 'Offline',
+          className: 'bg-red-600 text-red-100 border-red-200'
+        };
+      case 'warning':
+        return {
+          label: 'Warning',
+          className: 'bg-yellow-600 text-yellow-800 border-yellow-200'
+        };
+        case 'paused':
+        return {
+          label: 'Paused',
+          className: 'bg-gray-600 text-gray-100 border-gray-200'
+        };
+      default:
+        return {
+          label: 'Unknown',
+          className: 'bg-gray-600 text-gray-100 border-gray-200'
+        };
+    }
+  };
+
+  const config = getStatusConfig(status);
+
+  return (
+    <Badge variant="outline" className={config.className}>
+      {config.label}
+    </Badge>
+  );
+};

application/src/components/servers/ServerSystemInfoCard.tsx

@@ -0,0 +1,112 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Server, Monitor, Cpu, HardDrive, DatabaseIcon, InfoIcon } from "lucide-react";
+import { Server as ServerType } from "@/types/server.types";
+
+interface ServerSystemInfoCardProps {
+  server: ServerType;
+}
+
+export function ServerSystemInfoCard({ server }: ServerSystemInfoCardProps) {
+  // Parse system_info if it's a string
+  let systemInfo: any = {};
+  if (server.system_info) {
+    try {
+      systemInfo = typeof server.system_info === 'string' 
+        ? JSON.parse(server.system_info) 
+        : server.system_info;
+    } catch (error) {
+     // console.log('Error parsing system_info:', error);
+    }
+  }
+
+  const formatBytes = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const formatUptime = (uptimeSeconds: string | number) => {
+    const seconds = typeof uptimeSeconds === 'string' ? parseInt(uptimeSeconds) : uptimeSeconds;
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    
+    if (days > 0) return `${days}d ${hours}h`;
+    if (hours > 0) return `${hours}h ${minutes}m`;
+    return `${minutes}m`;
+  };
+
+  // Format the detailed system info string
+  const getDetailedSystemInfo = () => {
+    if (typeof server.system_info === 'string' && server.system_info.includes('|')) {
+      // If system_info is already in the detailed format, return it
+      return server.system_info;
+    }
+    
+    // Otherwise, build the detailed string from available data
+    const parts = [];
+    
+    // Basic server info
+    parts.push(server.hostname || 'Unknown');
+    parts.push(server.ip_address || 'Unknown IP');
+    parts.push(server.os_type || 'Unknown OS');
+    
+    // Parse additional info from system_info if available
+    if (systemInfo.OSName) {
+      parts.push(systemInfo.OSName + (systemInfo.OSVersion ? ` ${systemInfo.OSVersion}` : ''));
+    }
+    
+    if (systemInfo.Architecture) {
+      parts.push(`| ${systemInfo.Architecture}`);
+    }
+    
+    if (systemInfo.KernelVersion) {
+      parts.push(`| Kernel: ${systemInfo.KernelVersion}`);
+    }
+    
+    if (systemInfo.CPUModel) {
+      parts.push(`| CPU: ${systemInfo.CPUModel} (${server.cpu_cores || 0} cores)`);
+    } else if (server.cpu_cores) {
+      parts.push(`| CPU: ${server.cpu_cores} cores`);
+    }
+    
+    if (server.ram_total) {
+      parts.push(`| RAM: ${formatBytes(server.ram_total)}`);
+    }
+    
+    if (systemInfo.GoVersion) {
+      parts.push(`| Go ${systemInfo.GoVersion}`);
+    }
+    
+    if (systemInfo.IPAddress && systemInfo.IPAddress !== server.ip_address) {
+      parts.push(`| IP: ${systemInfo.IPAddress}`);
+    }
+    
+    // Check for Docker info
+    const dockerInfo = server.docker || systemInfo.Docker;
+    if (dockerInfo !== undefined) {
+      parts.push(`| Docker: ${dockerInfo}`);
+    }
+    
+    return parts.join(' • ').replace(/• \|/g, '|');
+  };
+
+  return (
+    <Card className="bg-card/50 backdrop-blur-sm border-border/50 max-w-md">
+      <CardContent className="p-4">
+        <div className="flex items-center gap-2 mb-3">
+          <div className="h-6 w-6 rounded bg-primary/10 flex items-center justify-center">
+            <InfoIcon className="h-3 w-3 text-primary" />
+          </div>
+          <h3 className="text-sm font-medium">System Information</h3>
+        </div>
+        
+        <div className="text-xs text-muted-foreground leading-relaxed break-all">
+          {getDetailedSystemInfo()}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

application/src/components/servers/ServerTable.tsx

@@ -0,0 +1,430 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { RefreshCw, Search, Eye, Activity, MoreHorizontal, Pause, Play, Edit, Trash2 } from "lucide-react";
+import { Server } from "@/types/server.types";
+import { ServerStatusBadge } from "./ServerStatusBadge";
+import { OSTypeIcon } from "./OSTypeIcon";
+import { EditServerDialog } from "./EditServerDialog";
+import { serverService } from "@/services/serverService";
+import { useToast } from "@/hooks/use-toast";
+import { pb } from "@/lib/pocketbase";
+import { useTheme } from "@/contexts/ThemeContext";
+
+interface ServerTableProps {
+  servers: Server[];
+  isLoading: boolean;
+  onRefresh: () => void;
+}
+
+export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps) => {
+  const { theme } = useTheme();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [selectedServer, setSelectedServer] = useState<Server | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [pausingServers, setPausingServers] = useState<Set<string>>(new Set());
+  const navigate = useNavigate();
+  const { toast } = useToast();
+
+  const filteredServers = servers.filter(server =>
+    server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    server.hostname.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    server.ip_address.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleViewDetails = (serverId: string) => {
+    navigate(`/server-detail/${serverId}`);
+  };
+
+  const handleViewContainers = (serverId: string) => {
+    navigate(`/container-monitoring/${serverId}`);
+  };
+
+  const handlePauseResume = async (server: Server) => {
+    const serverId = server.id;
+    const isPaused = server.status === "paused";
+    
+    if (pausingServers.has(serverId)) {
+      return; // Already processing this server
+    }
+
+    try {
+      setPausingServers(prev => new Set(prev).add(serverId));
+      
+      // Only update the status field, preserving all other server configuration
+      const updateData = {
+        status: isPaused ? "up" : "paused",
+        last_checked: new Date().toISOString()
+      };
+      
+      await pb.collection('servers').update(serverId, updateData);
+      
+      toast({
+        title: isPaused ? "Server resumed" : "Server paused",
+        description: `Monitoring ${isPaused ? 'resumed' : 'paused'} for ${server.name}`,
+      });
+      
+     // console.log(`${isPaused ? 'Resume' : 'Pause'} server monitoring: ${serverId}`);
+      
+      // Refresh the server list to show updated status
+      onRefresh();
+      
+    } catch (error) {
+     // console.error('Error updating server status:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: `Failed to ${isPaused ? 'resume' : 'pause'} server monitoring. Please try again.`,
+      });
+    } finally {
+      setPausingServers(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(serverId);
+        return newSet;
+      });
+    }
+  };
+
+  const handleEdit = (server: Server) => {
+    setSelectedServer(server);
+    setEditDialogOpen(true);
+  };
+
+  const handleDelete = (server: Server) => {
+    setSelectedServer(server);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    if (!selectedServer || isDeleting) return;
+
+    try {
+      setIsDeleting(true);
+      
+      // Delete the server from the database
+      await pb.collection('servers').delete(selectedServer.id);
+      
+      toast({
+        title: "Server deleted",
+        description: `${selectedServer.name} has been deleted successfully.`,
+      });
+      
+      // Refresh the server list
+      onRefresh();
+      
+      // Close the dialog
+      setDeleteDialogOpen(false);
+      setSelectedServer(null);
+      
+    } catch (error) {
+     // console.error('Error deleting server:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to delete server. Please try again.",
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const CustomProgressBar = ({ 
+    value, 
+    label, 
+    subtitle, 
+    type 
+  }: { 
+    value: number; 
+    label: string; 
+    subtitle: string; 
+    type: 'cpu' | 'memory' | 'disk' 
+  }) => {
+    const getGradientColors = (type: string, value: number) => {
+      if (type === 'cpu') {
+        if (value > 90) return 'from-red-500 to-red-600';
+        if (value > 75) return 'from-orange-500 to-orange-600';
+        if (value > 60) return 'from-yellow-500 to-yellow-600';
+        return 'from-green-500 to-green-600';
+      }
+      if (type === 'memory') {
+        if (value > 90) return 'from-red-500 to-red-600';
+        if (value > 75) return 'from-yellow-500 to-yellow-600';
+        return 'from-blue-500 to-blue-600';
+      }
+      if (type === 'disk') {
+        if (value > 95) return 'from-red-500 to-red-600';
+        if (value > 85) return 'from-yellow-500 to-yellow-600';
+        return 'from-orange-500 to-orange-600';
+      }
+      return 'from-gray-500 to-gray-600';
+    };
+
+    const getTextColor = (value: number) => {
+      if (value > 90) return 'text-red-600 dark:text-red-400';
+      if (value > 75) return 'text-orange-600 dark:text-orange-400';
+      if (value > 60) return 'text-yellow-600 dark:text-yellow-400';
+      return 'text-green-600 dark:text-green-400';
+    };
+
+    return (
+      <div className="space-y-2 min-w-[120px]">
+        <div className="flex justify-between items-center">
+          <span className={`text-sm font-semibold ${getTextColor(value)}`}>
+            {label}
+          </span>
+          <span className="text-xs text-muted-foreground">
+            {subtitle}
+          </span>
+        </div>
+        <div className="relative">
+          <div className="w-full h-3 bg-muted/30 rounded-full overflow-hidden shadow-inner">
+            <div 
+              className={`h-full bg-gradient-to-r ${getGradientColors(type, value)} rounded-full transition-all duration-700 ease-out relative overflow-hidden`}
+              style={{ width: `${Math.min(value, 100)}%` }}
+            >
+              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse opacity-60" />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-white/10" />
+            </div>
+          </div>
+          
+        </div>
+      </div>
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <Card className="flex-1 flex flex-col">
+        <CardHeader className="flex-shrink-0">
+          <CardTitle>Servers</CardTitle>
+        </CardHeader>
+        <CardContent className="flex-1 flex items-center justify-center">
+          <div className="flex items-center justify-center h-32">
+            <RefreshCw className="h-6 w-6 animate-spin" />
+            <span className="ml-2">Loading servers...</span>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <>
+      <Card className="bg-transparent border-0 shadow-none">
+        <CardHeader className="pb-4 px-0">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <CardTitle className="text-xl font-semibold">Servers</CardTitle>
+            <div className="flex items-center gap-2">
+              <div className="relative flex-1 sm:w-64">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search servers..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-8"
+                />
+              </div>
+              <Button onClick={onRefresh} variant="outline" size="icon">
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          {filteredServers.length === 0 ? (
+            <div className="flex items-center justify-center p-8">
+              <p className="text-muted-foreground">No servers found</p>
+            </div>
+          ) : (
+            <div className={`${theme === 'dark' ? 'bg-gray-900' : 'bg-white'} rounded-lg border border-border shadow-sm`}>
+              <Table>
+                <TableHeader className={`${theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'}`}>
+                  <TableRow className={`${theme === 'dark' ? 'border-gray-700 hover:bg-gray-800' : 'border-gray-200 hover:bg-gray-100'}`}>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Name</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Status</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>OS</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>IP Address</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>CPU</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Memory</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Disk</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Uptime</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Last Checked</TableHead>
+                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4 text-right`}>Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredServers.map((server) => {
+                    const cpuUsage = server.cpu_usage || 0;
+                    const memoryUsage = server.ram_total > 0 ? (server.ram_used / server.ram_total) * 100 : 0;
+                    const diskUsage = server.disk_total > 0 ? (server.disk_used / server.disk_total) * 100 : 0;
+                    const isPaused = server.status === "paused";
+                    const isProcessing = pausingServers.has(server.id);
+
+                    return (
+                      <TableRow key={server.id} className="hover:bg-muted/50">
+                        <TableCell className="font-medium">
+                          <div className="truncate" title={server.name}>
+                            {server.name}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <ServerStatusBadge status={server.status} />
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <OSTypeIcon osType={server.os_type} />
+                            <span className="text-sm truncate" title={server.os_type}>
+                              {server.os_type}
+                            </span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <code className="text-sm bg-muted px-1 py-0.5 rounded text-xs">
+                            {server.ip_address}
+                          </code>
+                        </TableCell>
+                        <TableCell>
+                          <CustomProgressBar
+                            value={cpuUsage}
+                            label={`${cpuUsage.toFixed(1)}%`}
+                            subtitle={`${server.cpu_cores} cores`}
+                            type="cpu"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <CustomProgressBar
+                            value={memoryUsage}
+                            label={`${memoryUsage.toFixed(1)}%`}
+                            subtitle={serverService.formatBytes(server.ram_total)}
+                            type="memory"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <CustomProgressBar
+                            value={diskUsage}
+                            label={`${diskUsage.toFixed(1)}%`}
+                            subtitle={serverService.formatBytes(server.disk_total)}
+                            type="disk"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <div className="text-sm truncate" title={server.uptime}>
+                            {server.uptime}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="text-sm text-muted-foreground text-xs">
+                            {new Date(server.last_checked).toLocaleString()}
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button variant="ghost" className="h-8 w-8 p-0" disabled={isProcessing}>
+                                <span className="sr-only">Open menu</span>
+                                {isProcessing ? (
+                                  <RefreshCw className="h-4 w-4 animate-spin" />
+                                ) : (
+                                  <MoreHorizontal className="h-4 w-4" />
+                                )}
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-[200px]">
+                              <DropdownMenuItem onClick={() => handleViewDetails(server.id)}>
+                                <Eye className="mr-2 h-4 w-4" />
+                                View Server Detail
+                              </DropdownMenuItem>
+                              {server.docker === 'true' && (
+                                <DropdownMenuItem onClick={() => handleViewContainers(server.id)}>
+                                  <Activity className="mr-2 h-4 w-4" />
+                                  Container Monitoring
+                                </DropdownMenuItem>
+                              )}
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem 
+                                onClick={() => handlePauseResume(server)}
+                                disabled={isProcessing}
+                              >
+                                {isPaused ? (
+                                  <>
+                                    <Play className="mr-2 h-4 w-4" />
+                                    Resume Monitoring
+                                  </>
+                                ) : (
+                                  <>
+                                    <Pause className="mr-2 h-4 w-4" />
+                                    Pause Monitoring
+                                  </>
+                                )}
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem onClick={() => handleEdit(server)}>
+                                <Edit className="mr-2 h-4 w-4" />
+                                Edit Server
+                              </DropdownMenuItem>
+                              <DropdownMenuItem 
+                                onClick={() => handleDelete(server)}
+                                className="text-red-600 focus:text-red-600"
+                              >
+                                <Trash2 className="mr-2 h-4 w-4" />
+                                Delete Server
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Edit Server Dialog */}
+      <EditServerDialog
+        server={selectedServer}
+        open={editDialogOpen}
+        onOpenChange={setEditDialogOpen}
+        onServerUpdated={onRefresh}
+      />
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure you want to delete this server?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete{' '}
+              <span className="font-semibold text-foreground">
+                {selectedServer?.name}
+              </span>{' '}
+              and all of its monitoring data.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              disabled={isDeleting}
+              className="bg-red-600 text-white hover:bg-red-700"
+            >
+              {isDeleting ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};