Merge pull request #22 from operacle/develop

feat: release maintenance and incident management features; apply hotfixes

.dockerignore

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

.github/CODEOWNERS

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

.github/FUNDING.yml

@@ -1,15 +0,0 @@
-# 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/bug_report.yml

@@ -1,94 +0,0 @@
-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 complete the form below to help us reproduce and fix the issue more effectively.
-
-  - type: input
-    id: environment
-    attributes:
-      label: Environment
-      description: |
-        Describe the environment where the issue occurred.
-        (e.g., OS, browser, Node.js version, Docker version, etc.)
-      placeholder: "Example: Ubuntu 22.04, 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 the issue you encountered.
-      placeholder: "When I do X, Y happens instead of Z..."
-    validations:
-      required: true
-
-  - type: textarea
-    id: steps
-    attributes:
-      label: Steps to Reproduce
-      description: |
-        Provide step-by-step instructions to reproduce the issue.
-      placeholder: |
-        1. Go to '...'
-        2. Click on '...'
-        3. Scroll down to '...'
-        4. See the 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 illustrate the issue.
-      placeholder: "Drag and drop or paste screenshots here."
-    validations:
-      required: false
-
-  - type: textarea
-    id: logs
-    attributes:
-      label: Logs
-      description: |
-        If applicable, paste any relevant logs or error messages.
-        Please remove sensitive information before submitting.
-      render: shell
-      placeholder: |
-        ```
-        Error: Something went wrong
-            at index.js:123:45
-        ```
-    validations:
-      required: false
-
-  - type: checkboxes
-    id: terms
-    attributes:
-      label: Checklist
-      description: |
-        Please confirm the following before submitting:
-      options:
-        - label: I have searched existing issues to avoid creating duplicates.
-          required: true
-        - label: I have provided sufficient information to reproduce the issue.
-          required: true

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/documentation.yml

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

@@ -1,60 +0,0 @@
-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/question.yml

@@ -1,54 +0,0 @@
-name: ❓ Ask for Help
-description: Ask a question or request guidance related to this project.
-title: "[Question]: "
-labels: [question]
-assignees: []
-
-body:
-  - type: markdown
-    attributes:
-      value: |
-        **Thanks for reaching out!**
-        Please provide as much detail as possible so we can better assist you.
-
-  - 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: Additional Context
-      description: |
-        Provide any relevant context, related issues, pull requests, or documentation links that could help us understand your question better.
-      placeholder: "Mention related issues, links to docs, or previous discussions..."
-    validations:
-      required: false
-
-  - type: textarea
-    id: environment
-    attributes:
-      label: Environment Details
-      description: |
-        If relevant, provide details about your environment (e.g., OS, browser, Node.js version).
-      placeholder: "Example: Windows 11, Node.js v20.3.0, Firefox 125"
-    validations:
-      required: false
-
-  - type: checkboxes
-    id: checklist
-    attributes:
-      label: Checklist
-      description: |
-        Before submitting, please confirm the following:
-      options:
-        - label: I have searched existing issues and discussions for a solution.
-          required: true
-        - label: I have read the relevant documentation.
-          required: true

.github/ISSUE_TEMPLATE/security_issue.yml

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

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

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

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

.gitignore

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

.talismanrc

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

CODE_OF_CONDUCT.md

@@ -1,81 +0,0 @@
-# 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,36 +1,3 @@
-## 🌐 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
 
@@ -79,7 +46,7 @@ Click "Fork" on [GitHub](https://github.com/operacle/checkcle) to create your ow
 
 ### 2. Clone Your Fork
 ```bash
-git clone https://github.com/yourusername/checkcle.git
+git clone --branch develop https://github.com/operacle/checkcle.git
 cd checkcle
 ```
 
@@ -94,45 +61,16 @@ npm install && npm run dev
 
 #Server Backend
 cd server
-./pocketbase serve --dir pb_data 
+./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 https://github.com/yourusername/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 `develop` branch.
+3. Push your branch and open a Pull Request (PR) on the `main` 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,21 +1,17 @@
-MIT License
+The MIT License (MIT)
+Copyright (c) 2025, Tola Leng
 
-Copyright (c) 2025 Tola Leng
+Permission is hereby granted, free of charge, to any person obtaining a copy 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:
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
+The above copyright notice and this permission notice shall be included in all copies or
-of this software and associated documentation files (the “Software”), to deal
+substantial portions of the Software.
-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
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
-copies or substantial portions of the Software.
+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,
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-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,43 +1,4 @@
-## 🌐 Select Language
+![CheckCle Platform](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-black.png)
-
-<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>
-    <td align="center">
-      <a href="docs/README_zhcn.md">
-        <img src="https://flagcdn.com/24x18/cn.png" alt="Chinese" />  
-        <br/><strong>Chinese</strong>
-      </a>
-    </td>
-  </tr>
-</table>
-
-<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?
 
@@ -45,34 +6,37 @@ CheckCle is an Open Source solution for seamless, real-time monitoring of full-s
 
 ## 🎯 Live Demo  
 👉 **Try it now:** [CheckCle Live Demo](https://demo.checkcle.io)
-    User: admin@example.com | Passwd: Admin123456
 
 ## 🌟 Core Features
-### 📝 Roadmap : [DEVELOPMENT_ROADMAP](docs/DEVELOPMENT_ROADMAP.md) 
 
-### Uptime Services & Infrastructure Server Monitoring 
+### Uptime Services & Infrastructure Server Monitoring
 - Monitor HTTP, DNS, and Ping protocols
 - Monitor TCP-based, API services (e.g., FTP, SMTP, HTTP)
 - Track detail uptime, response times, and performance issues
-- 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.
 - Schedule Maintenance & Incident Management
 - Operational Status / Public Status Pages
-- Notifications via email, Telegram, Discord, Slack, Matrix, and more
+- Notifications via email, Telegram, Discord, and Slack
 - Reports & Analytics
 - Settings Panel (User Management, Data Retention, Multi-language, Themes (Dark & Light Mode), Notification and channels and alert templates).
 
 ## #️⃣ Getting Started
 
-### Current Architecture Support
+### Installation with Docker Run and Compose
-* ✅ x86_64 PCs, laptops, servers (amd64)
+1. Copy ready docker run command
-* ✅ Modern Raspberry Pi 3/4/5 with (64-bit OS), Apple Silicon Macs (arm64)
+```bash 
+docker run -d \
+  --name checkcle \
+  --restart unless-stopped \
+  -p 8090:8090 \
+  -v /opt/pb_data:/mnt/pb_data \
+  --ulimit nofile=4096:8192 \
+  operacle/checkcle:latest
 
-### Install CheckCle using one of the following methods:
+```
-
+2. Docker Compose - Recommended
-1. Install with Docker Compose Configuration (Recommended)
 ```bash 
 
 version: '3.9'
@@ -92,18 +56,6 @@ services:
         hard: 8192
 
 ```
-2. Install with docker run. Just copy ready docker run command below
-```bash 
-docker run -d \
-  --name checkcle \
-  --restart unless-stopped \
-  -p 8090:8090 \
-  -v /opt/pb_data:/mnt/pb_data \
-  --ulimit nofile=4096:8192 \
-  operacle/checkcle:latest
-
-```
-
 3. Admin Web Management
 
     Default URL: http://0.0.0.0:8090
@@ -113,12 +65,29 @@ docker run -d \
 4. Follow the Quick Start Guide at https://docs.checkcle.io
 
 ###
-![checkcle-collapse-black](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/uptime-1.4.png)
+![checkcle-collapse-black](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-black.png)
-![Service Detail Page](https://cdn.checkcle.io/images/uptime/uptime-regional-detail.png)
+![Service Detail Page](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-detailpage.png)
-![checkcle-server-instance](https://cdn.checkcle.io/images/server/server-list.png)
+![Schedule Maintenance](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/maintenance-dahboard.png)
-![SSL Monitoring](https://cdn.checkcle.io/images/ssl-domain/ssl-list.png)
-![Notification System](https://cdn.checkcle.io/general/powerfull_notification.png)
 
+## 📝 Development Roadmap
+
+- [x] Health check & uptime monitoring (HTTP)
+- [x] Dashboard UI with live stats  
+- [x] Auth with Multi-users system (admin)
+- [x] Notifications (Telegram)
+- [x] Docker containerization 
+- [x] CheckCle Website
+- [x] CheckCle Demo Server
+- [x] SSL & Domain Monitoring
+- [x] Schedule Maintenance 
+- [x] Incident Management
+- [ ] Uptime monitoring (PING - Inprogress)
+- [ ] Infrastructure Server Monitoring
+- [ ] Operational Status / Public Status Pages
+- [ ] Uptime monitoring (TCP, PING, DNS)
+- [ ] User Permission Roles & Service Group
+- [ ] Notifications (Email/Slack/Discord/Signal)  
+- [x] Open-source release with full documentation 
 
 ## 🌟 CheckCle for Communities?
 - **Built with Passion**: Created by an open-source enthusiast for the community
@@ -127,48 +96,6 @@ docker run -d \
 
 ---
 
-## Sponsors
-Sponsorships will no longer be accepted. From now on, support will only be accepted in the form of ecosystem and community partnerships that provide infrastructure such as cloud servers, domains, or hosting credits.
-
-If you’re a tech company interested in supporting CheckCle, please contact the author directly at tolaleng@checkcle.io
-
-### 🤝 Ecosystem & Community Partner
-<div style="display: flex; align-items: center; gap: 10px;">
-  <a href="https://github.com/gitbookio">
-    <img src="https://avatars.githubusercontent.com/u/7111340?s=200&v=4" 
-         width="75" height="75" 
-         style="border-radius: 50%;" 
-         alt="GitBook Logo" />
-  </a>
-
-  <a href="https://www.cloudflare.com">
-    <img src="https://cdn.checkcle.io/images/sponsor/cloudflare-checkcle_logo.png" 
-         height="60" 
-         alt="Cloudflare Logo" />
-  </a>
-    <a href="https://m.do.co/c/0c27ef82475f">
-    <img src="https://cdn.checkcle.io/images/sponsor/digitalocean_checkcle.png" 
-         height="50" 
-         alt="DigitalOcean Logo" />
-  </a>
-  </a>
-    <a href="https://www.jetbrains.com/">
-    <img src="https://cdn.checkcle.io/images/sponsor/jetbrains.png" 
-         height="50" 
-         alt="Jetbrains Logo" />
-  </a>
-</div>
-
----
-
-
-## 👥 Contributors
-Thank you for contributing and continuously making CheckCle better, you're awesome 🫶
-
-[![](https://contrib.rocks/image?repo=operacle/checkcle)](https://github.com/operacle/checkcle/graphs/contributors)
-
----
-
 ## 🤝 Ways to Contribute
 
 Here are some ways you can help improve CheckCle:
@@ -177,18 +104,22 @@ Here are some ways you can help improve CheckCle:
 - 🌟 **Suggest Features** – Have an idea? Start a [Discussion](https://github.com/operacle/checkcle/discussions) or open a Feature Request issue.
 - 🛠 **Submit Pull Requests** – Improve the code, fix bugs, add features, or enhance the docs.
 - 📝 **Improve Documentation** – Even a typo fix helps!
-- 🌍 **Spread the Word** – Star ⭐ the [CheckCle](https://github.com/operacle/checkcle.git)  repo, share it on socials, and invite others to contribute!
+- 🌍 **Spread the Word** – Star ⭐ the repo, share it on socials, and invite others to contribute!
 
 ---
 
 ## 🌍 Stay Connected
 - Website: [checkcle.io](https://checkcle.io)
-- Documentation: [docs.checkcle.io](https://docs.checkcle.io) | Big thanks to [GitBook](https://github.com/gitbookio) for sponsoring the OSS site plan for CheckCle!
+- Documentation: [docs.checkcle.io](https://docs.checkcle.io)
-- Chat on Discord: Join our community [@discord](https://discord.gg/xs9gbubGwX)
+- GitHub Repository: ⭐ [CheckCle](https://github.com/operacle/checkcle.git)
-- Follow us on X: [@asqrm_io](https://x.com/asqrm_io)
+- Community Channels: Engage via discussions and issues!
+- Discord: Join our community [@discord](https://discord.gg/xs9gbubGwX)
+- X: [@tlengoss](https://x.com/tlengoss)
 
 ## 📜 License
 
 CheckCle is released under the MIT License.
 
 ---
+
+Stay informed, stay online, with CheckCle! 🌐

SECURITY.md

@@ -2,7 +2,7 @@
 
 ## 📦 Project: [checkcle](https://github.com/operacle/checkcle)
 
-**checkcle** is a self-hosted uptime and server monitoring tool built with TypeScript and Go.
+**checkcle** is a lightweight, TypeScript-based built for uptime and server monitoring tools.
 
 We care about the security and privacy of users running this project in production environments.
 
@@ -39,7 +39,6 @@ We support the latest stable release of `checkcle`. Security patches may also be
 
 | Version | Supported |
 |---------|-----------|
-| `develop` (latest) | ✅ Yes |
 | `main` (latest) | ✅ Yes |
 | Older versions | ⚠️ Best-effort |
 | Pre-release or forks | ❌ No |
@@ -48,21 +47,22 @@ We support the latest stable release of `checkcle`. Security patches may also be
 
 ## 🔍 Security Practices
 
-CheckCle follows these practices to improve overall security:
+This project adheres to the following practices to enhance security:
 
-- 🔎 Regular vulnerability scanning (npm audit for JavaScript dependencies, govulncheck for Go modules)
+- 🔎 Regular vulnerability checks using `npm audit`
-- ⛓️ Dependency pinning (package-lock.json and Go modules)
+- ⛓️ Dependency pinning via `package-lock.json`
-- ✅ Type-safe code in TypeScript and memory-safe design in Go
+- ✅ Type-safe code using `TypeScript`
-- 🧪 Continuous testing and CI pipelines
+- 🧪 Continuous testing and CI
 - 🔐 No data is stored or transmitted unless explicitly configured by the user
-- 🧑‍💻 All code contributions are reviewed before merging
+- 🧑‍💻 All contributions are reviewed before being merged
 
 ---
 
 ## ⚠️ Known Security Limitations
 
-- 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.
+- `checkcle` makes outbound HTTPS requests to check certificate details — avoid running in untrusted or high-risk environments without proper network policies.
-- 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.
+- 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 and recovery mechanisms are in place in production environments.
 
 ---
 

application/.dockerignore

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

application/Dockerfile

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

application/index.html

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

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

application/src/App.tsx

@@ -1,72 +1,125 @@
-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 { ThemeProvider } from './contexts/ThemeContext';
+import { Toaster } from "@/components/ui/toaster";
-import { LanguageProvider } from './contexts/LanguageContext';
+import { Toaster as Sonner } from "@/components/ui/sonner";
-import { SidebarProvider } from './contexts/SidebarContext';
+import { TooltipProvider } from "@/components/ui/tooltip";
+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 Index from './pages/Index';
+import Login from "./pages/Login";
-import Login from './pages/Login';
+import Dashboard from "./pages/Dashboard";
-import Dashboard from './pages/Dashboard';
+import ServiceDetail from "./pages/ServiceDetail";
-import InstanceMonitoring from './pages/InstanceMonitoring';
+import Settings from "./pages/Settings";
-import ContainerMonitoring from './pages/ContainerMonitoring';
+import Profile from "./pages/Profile";
-import ServiceDetail from './pages/ServiceDetail';
+import NotFound from "./pages/NotFound";
-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';
 
-function App() {
+// Create a Protected route component
-  const [queryClient] = useState(() => new QueryClient({
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
-    defaultOptions: {
+  const isAuthenticated = authService.isAuthenticated();
-      queries: {
+  
-        staleTime: 60 * 1000
+  if (!isAuthenticated) {
+    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 (
-    <BrowserRouter>
+    <QueryClientProvider client={queryClient}>
       <ThemeProvider>
         <LanguageProvider>
-          <SidebarProvider>
+          <TooltipProvider>
-            <QueryClientProvider client={queryClient}>
+            <Toaster />
-              <Toaster />
+            <Sonner />
+            <BrowserRouter>
               <Routes>
-                {/* Public routes */}
-                <Route path="/public/:slug" element={<PublicStatusPage />} />
-                
-                {/* Protected routes */}
                 <Route path="/login" element={<Login />} />
-                <Route path="/" element={<ProtectedRoute><Index /></ProtectedRoute>} />
+                <Route path="/" element={<Navigate to="/dashboard" replace />} />
-                <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+                <Route 
-                <Route path="/instance-monitoring" element={<ProtectedRoute><InstanceMonitoring /></ProtectedRoute>} />
+                  path="/dashboard" 
-                <Route path="/server-detail/:serverId" element={<ProtectedRoute><ServerDetail /></ProtectedRoute>} />
+                  element={
-                <Route path="/container-monitoring" element={<ProtectedRoute><ContainerMonitoring /></ProtectedRoute>} />
+                    <ProtectedRoute>
-                <Route path="/container-monitoring/:serverId" element={<ProtectedRoute><ContainerMonitoring /></ProtectedRoute>} />
+                      <Dashboard />
-                <Route path="/service/:id" element={<ProtectedRoute><ServiceDetail /></ProtectedRoute>} />
+                    </ProtectedRoute>
-                <Route path="/ssl-domain" element={<ProtectedRoute><SslDomain /></ProtectedRoute>} />
+                  } 
-                <Route path="/schedule-incident" element={<ProtectedRoute><ScheduleIncident /></ProtectedRoute>} />
+                />
-                <Route path="/operational-page" element={<ProtectedRoute><OperationalPage /></ProtectedRoute>} />
+                <Route 
-                <Route path="/regional-monitoring" element={<ProtectedRoute><RegionalMonitoring /></ProtectedRoute>} />
+                  path="/service/:id" 
-                <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
+                  element={
-                <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
+                    <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>
-            </QueryClientProvider>
+            </BrowserRouter>
-          </SidebarProvider>
+          </TooltipProvider>
         </LanguageProvider>
       </ThemeProvider>
-    </BrowserRouter>
+    </QueryClientProvider>
   );
-}
+};
 
 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' || path.startsWith('/api/settings/')) {
+    } else if (path === '/api/settings') {
-     // console.log("Routing to settings handler");
+      console.log("Routing to settings handler");
-      return await settingsApi(body, path);
+      return await settingsApi(body);
     }
     
     // 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

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

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

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

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

@@ -1,38 +0,0 @@
-
-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,41 +1,114 @@
+import { pb, getCurrentEndpoint } from '@/lib/pocketbase';
 
-import { getSettings } from './actions/getSettings';
+const settingsApi = async (body: any) => {
-import { updateSettings } from './actions/updateSettings';
+  try {
-import { testEmailConnection } from './actions/testEmailConnection';
+    const { action, data } = body;
-import { testEmail } from './actions/testEmail';
+    console.log('Settings API called with action:', action, 'data:', data);
 
-/**
+    const authToken = pb.authStore.token;
- * Settings API handler
+    const headers: Record<string, string> = {
- */
+      'Content-Type': 'application/json',
-const settingsApi = async (body: any, path?: string) => {
+    };
- // console.log('Settings API called with path:', path, 'body:', body);
-  
-  // Handle test email endpoint specifically
-  if (path === '/api/settings/test/email') {
-    console.log('Handling test email request');
-    return await testEmail(body);
-  }
-  
-  // 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) {
+    if (authToken) {
-    case 'getSettings':
+      headers['Authorization'] = `Bearer ${authToken}`;
-      return await getSettings();
+    }
-    
+
-    case 'updateSettings':
+    const baseUrl = getCurrentEndpoint();
-      return await updateSettings(body.data);
+
-    
+    switch (action) {
-    case 'testEmailConnection':
+      case 'getSettings':
-      return await testEmailConnection(body.data);
+        try {
-    
+          const response = await fetch(`${baseUrl}/api/settings`, {
-    default:
+            method: 'GET',
-      console.error('Unknown action:', action);
+            headers,
-      return {
+          });
-        status: 400,
+
-        json: { success: false, message: 'Unknown action' },
+          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 {
+          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 {
+          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:
+        return {
+          status: 400,
+          json: { success: false, message: 'Invalid 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

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

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

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

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

@@ -1,16 +0,0 @@
-
-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/DashboardContent.tsx

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

application/src/components/dashboard/Header.tsx

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

application/src/components/dashboard/QuickActionsDialog.tsx

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

application/src/components/dashboard/ServiceFilters.tsx

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

application/src/components/dashboard/Sidebar.tsx

@@ -1,44 +1,141 @@
-import React from "react";
+
+import { Globe, Boxes, Radar, Calendar, BarChart2, LineChart, FileText, Settings, User, UserCog, Bell, FileClock, Database, RefreshCw, Info, ChevronDown, BookOpen } from "lucide-react";
 import { useTheme } from "@/contexts/ThemeContext";
-import { SidebarHeader } from "./sidebar/SidebarHeader";
+import { Link, useLocation } from "react-router-dom";
-import { MainNavigation } from "./sidebar/MainNavigation";
+import { useState, useEffect } from "react";
-import { SettingsPanel } from "./sidebar/SettingsPanel";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { useSidebar } from "@/contexts/SidebarContext";
+import { ScrollArea } from "@/components/ui/scroll-area";
-import { cn } from "@/lib/utils";
+import { useLanguage } from "@/contexts/LanguageContext";
 
-export const Sidebar = () => {
+interface SidebarProps {
-  const { theme } = useTheme();
+  collapsed: boolean;
-  const { sidebarCollapsed, isMobileOpen, toggleMobileMenu } = useSidebar();
+}
+
+export const Sidebar = ({
+  collapsed
+}: 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
+  useEffect(() => {
+    if (location.pathname === '/settings') {
+      const params = new URLSearchParams(location.search);
+      const panel = params.get('panel');
+      if (panel) {
+        setActiveSettingsItem(panel);
+      }
+    }
+  }, [location]);
   
-  return (
+  const handleSettingsItemClick = (item: string) => {
-    <>
+    setActiveSettingsItem(item);
-      {/* Mobile Overlay */}
+  };
-      {isMobileOpen && (
+  
-        <div 
+  const getMenuItemClasses = (isActive: boolean) => {
-          className="fixed inset-0 bg-black/60 z-40 lg:hidden backdrop-blur-sm transition-opacity animate-in fade-in"
+    return `p-2 ${isActive ? theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent'}`} rounded-lg flex items-center`;
-          onClick={toggleMobileMenu}
+  };
-        />
-      )}
 
-      {/* Sidebar Container */}
+  // New larger icon size for the main menu
-      <aside 
+  const mainIconSize = "h-6 w-6";
-        className={cn(
+  
-          "fixed inset-y-0 left-0 z-50 lg:static lg:block transition-all duration-300 ease-in-out border-r flex flex-col h-full",
+  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`}>
-          theme === 'dark' ? 'bg-[#121212] border-[#1e1e1e]' : 'bg-sidebar border-sidebar-border',
+      <div className={`p-4 ${theme === 'dark' ? 'border-[#1e1e1e]' : 'border-sidebar-border'} border-b flex items-center ${collapsed ? 'justify-center' : ''}`}>
-          // Mobile state
+        <div className="h-8 w-8 bg-green-500 rounded flex items-center justify-center mr-2">
-          isMobileOpen ? "translate-x-0 w-64" : "-translate-x-full lg:translate-x-0",
+          <span className="text-white font-bold">C</span>
-          // Desktop state (collapsed/expanded)
-          !isMobileOpen && sidebarCollapsed ? "lg:w-16" : "lg:w-64"
-        )}
-      >
-        <SidebarHeader collapsed={!isMobileOpen && sidebarCollapsed} />
-        
-        <div className="flex-1 overflow-y-auto overflow-x-hidden custom-scrollbar">
-          <MainNavigation collapsed={!isMobileOpen && sidebarCollapsed} />
         </div>
-
+        {!collapsed && <h1 className="text-xl font-semibold">CheckCle App</h1>}
-        <SettingsPanel collapsed={!isMobileOpen && sidebarCollapsed} />
+      </div>
-      </aside>
+      
-    </>
+      <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

@@ -3,15 +3,12 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ArrowUp, ArrowDown, Pause, AlertTriangle } from "lucide-react";
 import { Service } from "@/services/serviceService";
 import { useTheme } from "@/contexts/ThemeContext";
-import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface StatusCardsProps {
   services: Service[];
 }
 
 export const StatusCards = ({ services }: StatusCardsProps) => {
-	const { t } = useLanguage();
-
   // Count services by status
   const upServices = services.filter(s => s.status === "up").length;
   const downServices = services.filter(s => s.status === "down").length;
@@ -30,22 +27,22 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
         } relative z-10`}
         style={{
           background: theme === 'dark' 
-            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%)" 
+            ? "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%, #66bb6a 100%)"
+            : "linear-gradient(135deg, #43a047 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(#000 1px, transparent 1px), 
+              backgroundImage: `linear-gradient(#fff 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">{t("upServices")}</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">UP SERVICES</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{upServices}</span>
@@ -62,22 +59,22 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
         } relative z-10`}
         style={{
           background: theme === 'dark'
-            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(239, 83, 80, 0.6) 100%)"
+            ? "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%, #ef5350 100%)"
+            : "linear-gradient(135deg, #e53935 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(#000 1px, transparent 1px), 
+              backgroundImage: `linear-gradient(#fff 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">{t("downServices")}</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">DOWN SERVICES</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{downServices}</span>
@@ -94,22 +91,22 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
         } relative z-10`}
         style={{
           background: theme === 'dark'
-            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(66, 165, 245, 0.6) 100%)"
+            ? "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%, #42a5f5 100%)"
+            : "linear-gradient(135deg, #1976d2 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(#000 1px, transparent 1px), 
+              backgroundImage: `linear-gradient(#fff 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">{t("pausedServices")}</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">PAUSED SERVICES</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{pausedServices}</span>
@@ -126,22 +123,22 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
         } relative z-10`}
         style={{
           background: theme === 'dark'
-            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(255, 183, 77, 0.6) 100%)"
+            ? "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%, #ffb74d 100%)"
+            : "linear-gradient(135deg, #ff9800 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(#000 1px, transparent 1px), 
+              backgroundImage: `linear-gradient(#fff 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">{t("warningServices")}</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">WARNING SERVICES</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{warningServices}</span>

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

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

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

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

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

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

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

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

@@ -1,99 +0,0 @@
-
-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 { useLanguage } from "@/contexts/LanguageContext";
-import { 
-  DockerTableSearch, 
-  DockerTableHeader, 
-  DockerTableRow, 
-  DockerEmptyState 
-} from "./table";
-
-interface DockerContainersTableProps {
-  containers: DockerContainer[];
-  isLoading: boolean;
-  onRefresh: () => void;
-}
-
-export const DockerContainersTable = ({ containers, isLoading, onRefresh }: DockerContainersTableProps) => {
-  const { t } = useLanguage();
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedContainer, setSelectedContainer] = useState<DockerContainer | null>(null);
-  const [metricsDialogOpen, setMetricsDialogOpen] = useState(false);
-
-  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">{t('dockerContainers', 'docker')}</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

@@ -1,697 +0,0 @@
-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";
-import { useLanguage } from "@/contexts/LanguageContext";
-
-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: 'minutes60', hours: 1 },
-  { value: '1d' as TimeRange, label: 'day1', hours: 24 },
-  { value: '7d' as TimeRange, label: 'days7', hours: 24 * 7 },
-  { value: '1m' as TimeRange, label: 'month1', hours: 24 * 30 },
-  { value: '3m' as TimeRange, label: 'months3', hours: 24 * 90 },
-];
-
-export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMetricsDialogProps) => {
-  const [timeRange, setTimeRange] = useState<TimeRange>("1d");
-  const { theme } = useTheme();
-  const { t } = useLanguage();
-
-  const {
-    data: metrics = [],
-    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>
-                {t('containerMetricsTitle', 'docker', { name: 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}>
-                      {t(option.label, 'docker')}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </DialogTitle>
-          <p className="text-sm text-muted-foreground">
-            {t('dockerId', 'docker')}: {container.docker_id} • {container.hostname}
-          </p>
-        </DialogHeader>
-
-        {isLoading ? (
-          <div className="flex items-center justify-center h-96">
-            <Loader2 className="h-8 w-8 animate-spin" />
-            <span className="ml-2">{t('loadingMetrics', 'docker')}</span>
-          </div>
-        ) : error ? (
-          <div className="flex items-center justify-center h-96 text-muted-foreground">
-            <p>{t('errorLoadingMetrics', 'docker')}: {String((error as any)?.message ?? '')}</p>
-          </div>
-        ) : chartData.length === 0 ? (
-          <div className="flex items-center justify-center h-96 text-muted-foreground">
-            <p>{t('noMetricsAvailable', 'docker')}</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={t('cpu', 'docker')}
-                  used={`${latestMetric.cpuUsage}%`}
-                  total={`${latestMetric.cpuCores} cores`}
-                  free={`${(100 - latestMetric.cpuUsage).toFixed(1)}%`}
-                  percentage={latestMetric.cpuUsage}
-                  icon={Cpu}
-                  color={chartConfig.cpuUsage.color}
-                />
-                <MetricCard
-                  title={t('memoryTitle', 'docker')}
-                  used={latestMetric.ramUsed}
-                  total={latestMetric.ramTotal}
-                  free={latestMetric.ramFree}
-                  percentage={latestMetric.ramUsagePercent}
-                  icon={MemoryStick}
-                  color={chartConfig.ramUsagePercent.color}
-                />
-                <MetricCard
-                  title={t('diskTitle', 'docker')}
-                  used={latestMetric.diskUsed}
-                  total={latestMetric.diskTotal}
-                  free={latestMetric.diskFree}
-                  percentage={latestMetric.diskUsagePercent}
-                  icon={HardDrive}
-                  color={chartConfig.diskUsagePercent.color}
-                />
-                <MetricCard
-                  title={t('network', 'docker')}
-                  used={`RX: ${latestMetric.networkRx}`}
-                  total={`TX: ${latestMetric.networkTx}`}
-                  free={`${t('networkSpeedKbs', 'docker').replace('(KB/s)', '')}: ${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" />
-                  {t('cpu', 'docker')}
-                </TabsTrigger>
-                <TabsTrigger value="memory" className="flex items-center gap-2 data-[state=active]:bg-background">
-                  <MemoryStick className="h-4 w-4" />
-                  {t('memoryTitle', 'docker')}
-                </TabsTrigger>
-                <TabsTrigger value="disk" className="flex items-center gap-2 data-[state=active]:bg-background">
-                  <HardDrive className="h-4 w-4" />
-                  {t('diskTitle', 'docker')}
-                </TabsTrigger>
-                <TabsTrigger value="network" className="flex items-center gap-2 data-[state=active]:bg-background">
-                  <Network className="h-4 w-4" />
-                  {t('network', 'docker')}
-                </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">{t('cpuUsagePct', 'docker')}</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={t('cpuUsagePct', 'docker')}
-                          />
-                        </LineChart>
-                      </ChartContainer>
-                    </CardContent>
-                  </Card>
-
-                  <Card className="bg-card border-border">
-                    <CardHeader>
-                      <CardTitle className="text-foreground">{t('cpuUsageVsAvailable', 'docker')}</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={t('cpuAvailablePct', 'docker')}
-                          />
-                          <Area 
-                            type="monotone" 
-                            dataKey="cpuUsage" 
-                            stackId="1"
-                            stroke={chartConfig.cpuUsage.color}
-                            fill={chartConfig.cpuUsage.color}
-                            fillOpacity={0.6}
-                            name={t('cpuUsagePct', 'docker')}
-                          />
-                        </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">{t('ramUsagePct', 'docker')}</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">{t('memoryUsageBytes', 'docker')}</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 === t('usedMemory', 'docker') ? formatBytes(Number(value)) : 
-                              name === t('totalMemory', 'docker') ? 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={t('totalMemory', 'docker')}
-                          />
-                          <Area 
-                            type="monotone" 
-                            dataKey="ramUsedBytes" 
-                            stackId="1"
-                            stroke={chartConfig.ramUsagePercent.color}
-                            fill={chartConfig.ramUsagePercent.color}
-                            fillOpacity={0.6}
-                            name={t('usedMemory', 'docker')}
-                          />
-                        </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">{t('diskUsagePct', 'docker')}</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={t('diskUsagePct', 'docker')}
-                          />
-                        </AreaChart>
-                      </ChartContainer>
-                    </CardContent>
-                  </Card>
-
-                  <Card className="bg-card border-border">
-                    <CardHeader>
-                      <CardTitle className="text-foreground">{t('diskUsageBytes', 'docker')}</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 === t('usedDisk', 'docker') ? formatBytes(Number(value)) : 
-                              name === t('totalDisk', 'docker') ? 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={t('totalDisk', 'docker')}
-                          />
-                          <Area 
-                            type="monotone" 
-                            dataKey="diskUsedBytes" 
-                            stackId="1"
-                            stroke={chartConfig.diskUsagePercent.color}
-                            fill={chartConfig.diskUsagePercent.color}
-                            fillOpacity={0.6}
-                            name={t('usedDisk', 'docker')}
-                          />
-                        </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">{t('networkTraffic', 'docker')}</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={t('rxBytes', 'docker')}
-                            dot={{ r: 2 }}
-                          />
-                          <Line 
-                            type="monotone" 
-                            dataKey="networkTxBytes" 
-                            stroke={chartConfig.networkTx.color}
-                            strokeWidth={2}
-                            name={t('txBytes', 'docker')}
-                            dot={{ r: 2 }}
-                          />
-                        </LineChart>
-                      </ChartContainer>
-                    </CardContent>
-                  </Card>
-
-                  <Card className="bg-card border-border">
-                    <CardHeader>
-                      <CardTitle className="text-foreground">{t('networkSpeedKbs', 'docker')}</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={t('rxSpeedKbs', 'docker')}
-                            dot={{ r: 2 }}
-                          />
-                          <Line 
-                            type="monotone" 
-                            dataKey="networkTxSpeed" 
-                            stroke={chartConfig.networkTx.color}
-                            strokeWidth={2}
-                            name={t('txSpeedKbs', 'docker')}
-                            dot={{ r: 2 }}
-                          />
-                        </LineChart>
-                      </ChartContainer>
-                    </CardContent>
-                  </Card>
-                </div>
-              </TabsContent>
-            </Tabs>
-          </>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-};

application/src/components/docker/DockerStatsCards.tsx

@@ -1,104 +0,0 @@
-
-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";
-import { useLanguage } from "@/contexts/LanguageContext";
-
-interface DockerStatsCardsProps {
-  stats: DockerStats;
-}
-
-export const DockerStatsCards = ({ stats }: DockerStatsCardsProps) => {
-  const { theme } = useTheme();
-  const { t } = useLanguage();
-
-  const cards = [
-    {
-      title: t('totalContainers', 'docker'),
-      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: t('running', 'docker'),
-      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: t('stopped', 'docker'),
-      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: t('warning', 'docker'),
-      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"
-                >
-                  {t('containersLabel', 'docker')}
-                </Badge>
-              </div>
-            </CardContent>
-          </Card>
-        );
-      })}
-    </div>
-  );
-};

application/src/components/docker/DockerStatusBadge.tsx

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

@@ -1,25 +0,0 @@
-
-import { TableCell, TableRow } from "@/components/ui/table";
-import { useLanguage } from "@/contexts/LanguageContext";
-
-interface DockerEmptyStateProps {
-  searchTerm: string;
-}
-
-export const DockerEmptyState = ({ searchTerm }: DockerEmptyStateProps) => {
-  const { t } = useLanguage();
-  return (
-    <TableRow>
-      <TableCell colSpan={8} className="text-center py-12 text-muted-foreground">
-        <div className="flex flex-col items-center gap-2">
-          <div className="text-lg font-medium">
-            {searchTerm ? t('noContainersFound', 'docker') : t('noContainersRunning', 'docker')}
-          </div>
-          <div className="text-sm">
-            {searchTerm ? t('tryAdjustSearch', 'docker') : t('startSomeContainers', 'docker')}
-          </div>
-        </div>
-      </TableCell>
-    </TableRow>
-  );
-};

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

@@ -1,43 +0,0 @@
-
-import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
-import { MoreHorizontal, Eye, Play, Pause, Square, Trash2, BarChart3, RefreshCw } from "lucide-react";
-import { DockerContainer } from "@/types/docker.types";
-import { useLanguage } from "@/contexts/LanguageContext";
-
-interface DockerRowActionsProps {
-  container: DockerContainer;
-  containerStatus: 'running' | 'stopped' | 'warning';
-  onContainerAction: (action: string, containerId: string, containerName: string) => void;
-  onViewMetrics: (container: DockerContainer) => void;
-}
-
-export const DockerRowActions = ({ container, containerStatus, onContainerAction, onViewMetrics }: DockerRowActionsProps) => {
-  const { t } = useLanguage();
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="h-8 w-8 p-0 hover:bg-muted">
-          <span className="sr-only">{t('openMenu', 'docker')}</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" />
-          {t('viewMetrics', 'docker')}
-        </DropdownMenuItem>
-        <DropdownMenuItem 
-          onClick={() => onContainerAction('view-detail', container.id, container.name)}
-          className="cursor-pointer hover:bg-muted"
-        >
-          <Eye className="mr-2 h-4 w-4" />
-          {t('viewDetails', 'docker')}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};

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

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

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

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

@@ -1,39 +0,0 @@
-
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Search, RefreshCw } from "lucide-react";
-import { useLanguage } from "@/contexts/LanguageContext";
-
-interface DockerTableSearchProps {
-  searchTerm: string;
-  onSearchChange: (value: string) => void;
-  onRefresh: () => void;
-  isLoading: boolean;
-}
-
-export const DockerTableSearch = ({ searchTerm, onSearchChange, onRefresh, isLoading }: DockerTableSearchProps) => {
-  const { t } = useLanguage();
-  return (
-    <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
-      <div className="relative flex-1 sm:flex-initial">
-        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-        <Input
-          placeholder={t('searchContainersPlaceholder', 'docker')}
-          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">{t('refresh', 'docker')}</span>
-      </Button>
-    </div>
-  );
-};

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

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

@@ -1,209 +0,0 @@
-
-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 } from 'lucide-react';
-import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
-import { useQuery } from '@tanstack/react-query';
-import { serviceService } from '@/services/serviceService';
-import { useLanguage } from "@/contexts/LanguageContext";
-
-interface ComponentsSelectorProps {
-  selectedComponents: Partial<StatusPageComponentRecord>[];
-  onComponentsChange: (components: Partial<StatusPageComponentRecord>[]) => void;
-  onComponentDelete?: (componentId: string) => void;
-}
-
-export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onComponentDelete }: ComponentsSelectorProps) => {
-  const { t } = useLanguage();
-  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" />
-          {t('statusPageComponents')}
-        </CardTitle>
-        <CardDescription>
-          {t('addMonitoringComponentsDesc')}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {selectedComponents.length > 0 && (
-          <div className="space-y-2">
-            <Label>{t('selectedComponents')}</Label>
-            <div className="space-y-2">
-              {selectedComponents.map((component, index) => (
-                <div key={component.id || index} className="flex items-center justify-between p-3 border rounded-lg">
-                  <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">
-                          {t('service')}: {services.find(s => s.id === component.service_id)?.name || component.service_id}
-                        </Badge>
-                      )}
-                      {component.server_id && (
-                        <Badge variant="secondary" className="text-xs">
-                          {t('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" />
-            {t('addComponent')}
-          </Button>
-        ) : (
-          <div className="border rounded-lg p-4 space-y-4">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <Label htmlFor="component-name">{t('componentName')}</Label>
-                <Input
-                  id="component-name"
-                  placeholder={t('componentNamePlaceholder')}
-                  value={newComponent.name}
-                  onChange={(e) => setNewComponent({ ...newComponent, name: e.target.value })}
-                />
-              </div>
-              <div>
-                <Label htmlFor="display-order">{t('displayOrder')}</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">{t('descriptionOptional')}</Label>
-              <Textarea
-                id="component-description"
-                placeholder={t('descriptionPlaceholder')}
-                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">{t('uptimeServiceOptional')}</Label>
-                <Select onValueChange={(value) => setNewComponent({ ...newComponent, service_id: value })}>
-                  <SelectTrigger>
-                    <SelectValue placeholder={t('selectUptimeService')} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {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">{t('serverIdOptional')}</Label>
-                <Input
-                  id="server-id"
-                  placeholder={t('serverIdPlaceholder')}
-                  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()}>
-                {t('addComponent')}
-              </Button>
-              <Button variant="outline" onClick={() => setShowAddForm(false)}>
-                {t('cancel')}
-              </Button>
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

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

@@ -1,280 +0,0 @@
-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';
-import { useLanguage } from "@/contexts/LanguageContext";
-
-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 { t } = useLanguage();
-  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" />
-          {t('createPage')}
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>{t('createOperationalPage')}</DialogTitle>
-          <DialogDescription>
-            {t('createOperationalPageDesc')}
-          </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>{t('title')}</FormLabel>
-                    <FormControl>
-                      <Input placeholder={t('myServiceStatusPlaceholder')} {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="slug"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('slug')}</FormLabel>
-                    <FormControl>
-                      <Input placeholder={t('myServiceStatusSlugPlaceholder')} {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('description')}</FormLabel>
-                  <FormControl>
-                    <Textarea 
-                      placeholder={t('operationalPageDescriptionPlaceholder')} 
-                      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>{t('theme')}</FormLabel>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder={t('selectTheme')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="default">{t('themeDefault')}</SelectItem>
-                        <SelectItem value="dark">{t('themeDark')}</SelectItem>
-                        <SelectItem value="light">{t('themeLight')}</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="status"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('initialStatus')}</FormLabel>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder={t('selectStatus')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="operational">{t('statusOperational')}</SelectItem>
-                        <SelectItem value="degraded">{t('statusDegraded')}</SelectItem>
-                        <SelectItem value="maintenance">{t('statusMaintenance')}</SelectItem>
-                        <SelectItem value="major_outage">{t('statusMajorOutage')}</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>{t('publicPage')}</FormLabel>
-                    <FormDescription>
-                      {t('makePagePublic')}
-                    </FormDescription>
-                  </div>
-                  <FormControl>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="custom_domain"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('customDomainOptional')}</FormLabel>
-                  <FormControl>
-                    <Input placeholder={t('customDomainPlaceholder')} {...field} />
-                  </FormControl>
-                  <FormDescription>
-                    {t('customDomainDescription')}
-                  </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)}
-              >
-                {t('cancel')}
-              </Button>
-              <Button 
-                type="submit" 
-                disabled={createMutation.isPending || createComponentMutation.isPending}
-              >
-                {createMutation.isPending || createComponentMutation.isPending ? t('creating') : t('createPage')}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,369 +0,0 @@
-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';
-import { useLanguage } from "@/contexts/LanguageContext";
-
-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 { t } = useLanguage();
-  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>{t('editOperationalPage')}</DialogTitle>
-          <DialogDescription>
-            {t('updateYourOperationalPage')}
-          </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>{t('title')}</FormLabel>
-                    <FormControl>
-                      <Input placeholder={t('myServiceStatusPlaceholder')} {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="slug"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('slug')}</FormLabel>
-                    <FormControl>
-                      <Input placeholder={t('myServiceStatusSlugPlaceholder')} {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('description')}</FormLabel>
-                  <FormControl>
-                    <Textarea 
-                      placeholder={t('operationalPageDescriptionPlaceholder')} 
-                      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>{t('theme')}</FormLabel>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder={t('selectTheme')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="default">{t('themeDefault')}</SelectItem>
-                        <SelectItem value="dark">{t('themeDark')}</SelectItem>
-                        <SelectItem value="light">{t('themeLight')}</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="status"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('status')}</FormLabel>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder={t('selectStatus')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="operational">{t('statusOperational')}</SelectItem>
-                        <SelectItem value="degraded">{t('statusDegraded')}</SelectItem>
-                        <SelectItem value="maintenance">{t('statusMaintenance')}</SelectItem>
-                        <SelectItem value="major_outage">{t('statusMajorOutage')}</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>{t('publicPage')}</FormLabel>
-                    <FormDescription>
-                      {t('makePagePublic')}
-                    </FormDescription>
-                  </div>
-                  <FormControl>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="custom_domain"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('customDomainOptional')}</FormLabel>
-                  <FormControl>
-                    <Input placeholder={t('customDomainPlaceholder')} {...field} />
-                  </FormControl>
-                  <FormDescription>
-                    {t('customDomainDescription')}
-                  </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)}
-              >
-                {t('cancel')}
-              </Button>
-              <Button 
-                type="submit" 
-                disabled={isFormSubmitting || updateMutation.isPending || createComponentMutation.isPending}
-              >
-                {isFormSubmitting || updateMutation.isPending || createComponentMutation.isPending ? t('updating') : t('updatePage')}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,104 +0,0 @@
-
-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';
-import { useLanguage } from "@/contexts/LanguageContext";
-
-interface OperationalPageCardProps {
-  page: OperationalPageRecord;
-  onEdit?: (page: OperationalPageRecord) => void;
-  onView?: (page: OperationalPageRecord) => void;
-  onDelete?: (page: OperationalPageRecord) => void;
-}
-
-export const OperationalPageCard = ({ page, onEdit, onView, onDelete }: OperationalPageCardProps) => {
-  const { t } = useLanguage();
-
-  return (
-    <Card className="hover:shadow-lg transition-shadow duration-200">
-      <CardHeader className="pb-3">
-        <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">{t('slug')}:</span>
-            <p className="mt-1">{page.slug}</p>
-          </div>
-          <div>
-            <span className="font-medium text-muted-foreground">{t('theme')}:</span>
-            <p className="mt-1 capitalize">{page.theme}</p>
-          </div>
-          <div>
-            <span className="font-medium text-muted-foreground">{t('public')}:</span>
-            <div className="mt-1">
-              <Badge variant={page.is_public === 'true' ? 'default' : 'secondary'}>
-                {page.is_public === 'true' ? t('yes') : t('no')}
-              </Badge>
-            </div>
-          </div>
-          <div>
-            <span className="font-medium text-muted-foreground">{t('updated')}:</span>
-            <p className="mt-1">{format(new Date(page.updated), 'MMM dd, yyyy')}</p>
-          </div>
-        </div>
-
-        {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" />
-              {t('view')}
-            </Button>
-          )}
-          {onEdit && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => onEdit(page)}
-              className="flex-1"
-            >
-              <Settings className="h-4 w-4 mr-2" />
-              {t('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

@@ -1,214 +0,0 @@
-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 { useLanguage } from "@/contexts/LanguageContext";
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-
-export const OperationalPageContent = () => {
-  const { t } = useLanguage();
-  const navigate = useNavigate();
-  const { data: pages, isLoading, error, refetch, isRefetching } = useOperationalPages();
-  const deleteMutation = useDeleteOperationalPage();
-  
-  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">{t('failedToLoadOperationalPages')}</h3>
-          <p className="text-muted-foreground mb-4">
-            {t('loadingoperationalPages')}
-          </p>
-          <Button onClick={() => refetch()} variant="outline">
-            <RefreshCw className="h-4 w-4 mr-2" />
-            {t('tryagain')}
-          </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"> {t('operationalPages')}</h1>
-          <p className="text-muted-foreground">
-            {t('describeOperation')}
-          </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' : ''}`} />
-            {t('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">{t('noOperationalPagesFound')}</h3>
-            <p className="text-muted-foreground mb-6">
-              {t('createYourFirstOperationalPage')}
-            </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">{t('totalPages')}:</span> {pages.length}
-            </div>
-            <div>
-              <span className="font-medium">{t('totalPages')}:</span>{' '}
-              {pages.filter(p => p.is_public === 'true').length}
-            </div>
-            <div>
-              <span className="font-medium">{t('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>{t('deleteOperationalPage')}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {t('deleteOperationalPageConfirm').replace('{title}', pageToDelete?.title ?? '')}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDelete}
-              className="bg-red-600 hover:bg-red-700"
-              disabled={deleteMutation.isPending}
-            >
-              {deleteMutation.isPending ? t('deleting') : t('delete')}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  );
-};

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

@@ -1,47 +0,0 @@
-
-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,3 +1,4 @@
+
 import { useState } from "react";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
@@ -9,7 +10,6 @@ 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,7 +34,6 @@ export function ChangePasswordForm({ userId }: ChangePasswordFormProps) {
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   
   const { toast } = useToast();
-  const navigate = useNavigate();
   
   const form = useForm<PasswordFormValues>({
     resolver: zodResolver(passwordFormSchema),
@@ -45,35 +44,12 @@ 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(collection).update(userId, {
+      await pb.collection('users').update(userId, {
         oldPassword: data.currentPassword,
         password: data.newPassword,
         passwordConfirm: data.confirmPassword,
@@ -84,31 +60,17 @@ export function ChangePasswordForm({ userId }: ChangePasswordFormProps) {
       
       toast({
         title: "Password updated",
-        description: "Your password has been changed successfully. You will be logged out in 3 seconds for security.",
+        description: "Your password has been changed successfully.",
       });
       
       // 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 = error.message;
-          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({
@@ -226,4 +188,4 @@ export function ChangePasswordForm({ userId }: ChangePasswordFormProps) {
       </form>
     </Form>
   );
-}
+}

application/src/components/profile/UpdateProfileForm.tsx

@@ -11,7 +11,6 @@ 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({
@@ -34,10 +33,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>({
@@ -53,6 +52,7 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
     setIsSubmitting(true);
     setUpdateError(null);
     setUpdateSuccess(null);
+    setEmailChangeRequested(false);
     
     try {
       console.log("Submitting profile update with data:", data);
@@ -75,25 +75,19 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
       // Update user data using the userService
       await userService.updateUser(user.id, updateData);
       
-      // If email was changed, show success message and auto-logout
+      // Refresh user data in auth context
+      await authService.refreshUserData();
+      
+      // If email was changed, show a specific message
       if (isEmailChanged) {
-        setUpdateSuccess("Email changed successfully! You will be logged out for security reasons. Please log in again with your new email.");
+        setEmailChangeRequested(true);
-        
+        setUpdateSuccess("A verification email has been sent to your new email address. Please check your inbox to complete the change.");
         toast({
-          title: "Email changed successfully",
+          title: "Email verification sent",
-          description: "You will be logged out for security reasons. Please log in again with your new email.",
+          description: "A verification email has been sent to your new email address. Please check your inbox and follow the instructions to complete the change.",
           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",
@@ -138,6 +132,16 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
             </AlertDescription>
           </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}
@@ -179,7 +183,7 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
               <FormMessage />
               {field.value !== user.email && (
                 <p className="text-xs text-muted-foreground mt-1">
-                  Changing your email will log you out for security reasons. You will need to log in again with your new email.
+                  Changing your email requires verification. A verification email will be sent.
                 </p>
               )}
             </FormItem>

application/src/components/public/ComponentsStatusSection.tsx

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

@@ -1,160 +0,0 @@
-
-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';
-import { useLanguage } from '@/contexts/LanguageContext';
-
-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'], t: (k: string, m?: string) => string) => {
-  switch (status) {
-    case 'operational':
-      return t('allOperational', 'public');
-    case 'degraded':
-      return t('degradedPerformance', 'public');
-    case 'maintenance':
-      return t('underMaintenance', 'public');
-    case 'major_outage':
-      return t('majorOutage', 'public');
-    default:
-      return t('statusUnknown', 'public');
-  }
-};
-
-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 { t } = useLanguage();
-  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" />
-          {t('systemStatus', 'public')}
-        </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, t)}
-              </h3>
-              <p className="text-sm text-muted-foreground mt-1">
-                {t('autoUpdatedByHealth', 'public')}
-              </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' ? t('allOperational', 'public') :
-             displayStatus === 'degraded' ? t('degradedPerformance', 'public') :
-             displayStatus === 'maintenance' ? t('underMaintenance', 'public') : t('majorOutage', 'public')}
-          </div>
-        </div>
-        
-        <div className="flex items-center justify-between text-sm text-muted-foreground border-t pt-4">
-          <div className="flex items-center gap-2">
-            <Clock className="h-4 w-4" />
-            <span>{t('lastUpdatedAt', 'public', { time: format(new Date(), 'MMM dd, yyyy HH:mm') })}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
-            <span>{t('liveStatusMonitoring', 'public')}</span>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};

application/src/components/public/OverallUptimeSection.tsx

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

@@ -1,131 +0,0 @@
-
-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';
-import { useLanguage } from '@/contexts/LanguageContext';
-
-export const PublicStatusPage = () => {
-  const { t } = useLanguage();
-  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">{t('loadingStatusPage', 'public')}</p>
-            <p className="text-sm text-muted-foreground">{t('fetchingRealtimeStatus', 'public')}</p>
-            <p className="text-xs text-muted-foreground">{t('slugLabel', 'public')}: {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">{t('statusPageNotFound', 'public')}</h1>
-            <p className="text-muted-foreground">
-              {error || t('notFoundDescription', 'public')}
-            </p>
-            <p className="text-xs text-muted-foreground">{t('slugLabel', 'public')}: {slug || 'No slug provided'}</p>
-          </div>
-          <div className="flex gap-3 justify-center">
-            <Button onClick={() => window.history.back()} variant="outline">
-              {t('goBack', 'public')}
-            </Button>
-            <Button onClick={() => window.location.reload()} className="gap-2">
-              <RefreshCw className="h-4 w-4" />
-              {t('retry', 'public')}
-            </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

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

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

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

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

@@ -1,139 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useToast } from "@/hooks/use-toast";
-import { useLanguage } from "@/contexts/LanguageContext";
-import { getCurrentEndpoint } from "@/lib/pocketbase";
-import { RegionalAgentConfigForm } from "./RegionalAgentConfigForm";
-import { RegionalOneClickTab } from "./RegionalOneClickTab";
-import { RegionalManualTab } from "./RegionalManualTab";
-
-interface AddRegionalAgentDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onAgentAdded: () => void;
-}
-
-export const AddRegionalAgentDialog: React.FC<AddRegionalAgentDialogProps> = ({
-  open,
-  onOpenChange,
-  onAgentAdded
-}) => {
-  const { t } = useLanguage();
-  const { toast } = useToast();
-  const [activeTab, setActiveTab] = useState("configure");
-  const [formData, setFormData] = useState({
-    regionName: "",
-    agentIp: "",
-  });
-  const [agentToken, setAgentToken] = useState("");
-  const [agentId, setAgentId] = useState("");
-  const [currentPocketBaseUrl, setCurrentPocketBaseUrl] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  // Generate new credentials when dialog opens or after successful creation
-  const generateNewCredentials = () => {
-    const newToken = `rgn_${Math.random().toString(36).substring(2, 15)}${Math.random().toString(36).substring(2, 15)}`;
-    const newAgentId = `regional_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
-    setAgentToken(newToken);
-    setAgentId(newAgentId);
-  };
-
-  useEffect(() => {
-    if (open) {
-      const endpoint = getCurrentEndpoint();
-      setCurrentPocketBaseUrl(endpoint);
-      generateNewCredentials();
-    }
-  }, [open]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!formData.regionName.trim() || !formData.agentIp.trim()) return;
-
-    setIsSubmitting(true);
-    try {
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      
-      toast({
-        title: t('success'),
-        description: t('agentCreatedSuccessfully'),
-      });
-      setActiveTab("one-click");
-      generateNewCredentials();
-      
-      onAgentAdded();
-    } catch (error) {
-      toast({
-        title: t('error'),
-        description: t('failedToCreateAgent'),
-        variant: "destructive",
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleDialogClose = () => {
-    setFormData({
-      regionName: "",
-      agentIp: "",
-    });
-    setActiveTab("configure");
-    generateNewCredentials();
-    onOpenChange(false);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleDialogClose}>
-      <DialogContent className="sm:max-w-[900px] max-h-[90vh] overflow-auto">
-        <DialogHeader>
-          <DialogTitle>{t('addRegionalMonitoringAgent')}</DialogTitle>
-          <DialogDescription>
-            {t('deployRegionalMonitoringAgent')}
-          </DialogDescription>
-        </DialogHeader>
-
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="configure">{t('configureAgent')}</TabsTrigger>
-            <TabsTrigger value="one-click">{t('oneClickInstallTab')}</TabsTrigger>
-            <TabsTrigger value="manual">{t('manualInstallTab')}</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="configure" className="space-y-6">
-            <RegionalAgentConfigForm
-              formData={formData}
-              setFormData={setFormData}
-              agentId={agentId}
-              agentToken={agentToken}
-              currentPocketBaseUrl={currentPocketBaseUrl}
-              isSubmitting={isSubmitting}
-              onSubmit={handleSubmit}
-            />
-          </TabsContent>
-
-          <TabsContent value="one-click" className="space-y-6">
-            <RegionalOneClickTab
-              agentToken={agentToken}
-              currentPocketBaseUrl={currentPocketBaseUrl}
-              formData={formData}
-              agentId={agentId}
-              onDialogClose={handleDialogClose}
-            />
-          </TabsContent>
-
-          <TabsContent value="manual" className="space-y-6">
-            <RegionalManualTab
-              agentToken={agentToken}
-              currentPocketBaseUrl={currentPocketBaseUrl}
-              formData={formData}
-              agentId={agentId}
-              onDialogClose={handleDialogClose}
-            />
-          </TabsContent>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,153 +0,0 @@
-
-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";
-import { useLanguage } from "@/contexts/LanguageContext";
-
-interface RegionalAgentCardProps {
-  agent: RegionalService;
-  onDelete: () => void;
-}
-
-export const RegionalAgentCard: React.FC<RegionalAgentCardProps> = ({ agent, onDelete }) => {
-  const { toast } = useToast();
-  const { t } = useLanguage();
-
-  // Check if this is the default agent that cannot be removed
-  const isDefaultAgent = agent.agent_id === "1" || agent.region_name === "Default";
-
-  const copyAgentId = async () => {
-    try {
-      await navigator.clipboard.writeText(agent.agent_id);
-      toast({
-        title: t('copied'),
-        description: t('copiedDescription'),
-      });
-    } catch (error) {
-      toast({
-        title: t('copyFailed'),
-        description: t('copyFailedDescription'),
-        variant: "destructive",
-      });
-    }
-  };
-
-  const getConnectionStatus = () => {
-    if (agent.connection === 'online') {
-      return {
-        icon: <Wifi className="h-4 w-4" />,
-        label: t('online'),
-        variant: 'default' as const,
-        className: 'bg-green-100 text-green-800 hover:bg-green-100'
-      };
-    } else {
-      return {
-        icon: <WifiOff className="h-4 w-4" />,
-        label: t('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">
-                    {t('defaultBadge')}
-                  </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" />
-                {t('copyAgentId')}
-              </DropdownMenuItem>
-              {!isDefaultAgent && (
-                <DropdownMenuItem onClick={onDelete} className="text-red-600">
-                  <Trash2 className="mr-2 h-4 w-4" />
-                  {t('removeAgent')}
-                </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">{t('agentId')}</span>
-            <span className="font-mono text-xs">{agent.agent_id.substring(0, 12)}...</span>
-          </div>
-          
-          <div className="flex justify-between text-sm">
-            <span className="text-muted-foreground">{t('lastUpdated')}</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>
-              {t('activeMonitoring')}
-            </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>
-              {t('connectionLost')}
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};