From 044f9e07fd6cc4190812720cd097c969670f61c0 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Sat, 21 Jun 2025 22:04:49 +0700
Subject: [PATCH 01/10] fixed install-regional-agent bash script

---
 application/src/services/regionalService.ts | 56 +++++++++++++---
 scripts/install-regional-agent.sh           | 71 +++++++++++++++++----
 2 files changed, 107 insertions(+), 20 deletions(-)

diff --git a/application/src/services/regionalService.ts b/application/src/services/regionalService.ts
index 832caf8..4794feb 100644
--- a/application/src/services/regionalService.ts
+++ b/application/src/services/regionalService.ts
@@ -1,4 +1,3 @@
-
 import { pb } from '@/lib/pocketbase';
 import { RegionalService, CreateRegionalServiceParams, InstallCommand } from '@/types/regional.types';
 
@@ -106,7 +105,7 @@ AGENT_TOKEN="${token}"
 POCKETBASE_URL="${apiEndpoint}"
 
 # Base package information
-BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases"
+BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/v1.0.0"
 PACKAGE_VERSION="1.0.0"
 SERVICE_NAME="regional-check-agent"
 
@@ -175,14 +174,44 @@ echo "📁 Created temporary directory: $TEMP_DIR"
 # Download the .deb package
 echo "📥 Downloading Regional Monitoring Agent package for $PKG_ARCH..."
 cd "$TEMP_DIR"
-if wget -q --show-progress "$PACKAGE_URL" -O "$PACKAGE_NAME"; then
-    echo "✅ Package downloaded successfully"
-else
+
+# Test if package exists first
+echo "🔍 Checking package availability..."
+if command -v curl >/dev/null 2>&1; then
+    HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" -I "$PACKAGE_URL")
+    if [ "$HTTP_STATUS" != "200" ]; then
+        echo "❌ Package not found at $PACKAGE_URL (HTTP $HTTP_STATUS)"
+        echo "   Available packages should be:"
+        echo "   - distributed-regional-check-agent_\${PACKAGE_VERSION}_amd64.deb"
+        echo "   - distributed-regional-check-agent_\${PACKAGE_VERSION}_arm64.deb"
+        rm -rf "$TEMP_DIR"
+        exit 1
+    fi
+    echo "✅ Package found, proceeding with download..."
+fi
+
+# Try wget first, then curl as fallback
+DOWNLOAD_SUCCESS=false
+
+if command -v wget >/dev/null 2>&1; then
+    if wget -q --show-progress --timeout=30 --tries=3 "$PACKAGE_URL" -O "$PACKAGE_NAME"; then
+        DOWNLOAD_SUCCESS=true
+        echo "✅ Package downloaded successfully using wget"
+    fi
+elif command -v curl >/dev/null 2>&1; then
+    if curl -L --connect-timeout 30 --max-time 300 --retry 3 --retry-delay 2 -o "$PACKAGE_NAME" "$PACKAGE_URL"; then
+        DOWNLOAD_SUCCESS=true
+        echo "✅ Package downloaded successfully using curl"
+    fi
+fi
+
+if [ "$DOWNLOAD_SUCCESS" = false ]; then
     echo "❌ Failed to download package from $PACKAGE_URL"
     echo "   Please check:"
     echo "   - Internet connection"
     echo "   - Package availability for $PKG_ARCH architecture"
-    echo "   - GitHub repository access"
+    echo "   - GitHub repository access: https://github.com/operacle/Distributed-Regional-Monitoring/releases"
+    echo "   - Firewall/proxy settings"
     rm -rf "$TEMP_DIR"
     exit 1
 fi
@@ -222,6 +251,9 @@ fi
 echo ""
 echo "⚙️  Configuring Regional Monitoring Agent..."
 
+# Ensure configuration directory exists
+mkdir -p /etc/regional-check-agent
+
 # Create the environment configuration file
 cat > /etc/regional-check-agent/regional-check-agent.env << EOF
 # Distributed Regional Check Agent Configuration
@@ -232,7 +264,7 @@ PORT=8091
 
 # Operation defaults
 DEFAULT_COUNT=4
-DEFAULT_TIMEOUT=3s
+DEFAULT_TIMEOUT=10s
 MAX_COUNT=20
 MAX_TIMEOUT=30s
 
@@ -258,8 +290,14 @@ EOF
 echo "✅ Configuration file created at /etc/regional-check-agent/regional-check-agent.env"
 
 # Set proper permissions
-chown root:regional-check-agent /etc/regional-check-agent/regional-check-agent.env
-chmod 640 /etc/regional-check-agent/regional-check-agent.env
+if id "regional-check-agent" &>/dev/null; then
+    chown root:regional-check-agent /etc/regional-check-agent/regional-check-agent.env
+    chmod 640 /etc/regional-check-agent/regional-check-agent.env
+else
+    echo "⚠️  regional-check-agent user not found, using root permissions"
+    chown root:root /etc/regional-check-agent/regional-check-agent.env
+    chmod 600 /etc/regional-check-agent/regional-check-agent.env
+fi
 
 # Enable and start the service
 echo ""
diff --git a/scripts/install-regional-agent.sh b/scripts/install-regional-agent.sh
index ba87228..cc730fc 100644
--- a/scripts/install-regional-agent.sh
+++ b/scripts/install-regional-agent.sh
@@ -3,7 +3,7 @@
 
 # CheckCle Regional Monitoring Agent - Universal Installation Script
 # This script automatically detects system architecture and installs the appropriate package
-# Usage: curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/install-regional-agent.sh | sudo bash -s -- [options]
+# Usage: curl -fsSL https://raw.githubusercontent.com/operacle/checkcle/main/scripts/install-regional-agent.sh | sudo bash -s -- [options]
 
 set -e
 
@@ -13,7 +13,7 @@ AGENT_ID=""
 AGENT_IP_ADDRESS=""
 AGENT_TOKEN=""
 POCKETBASE_URL=""
-BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases"
+BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/v1.0.0"
 PACKAGE_VERSION="1.0.0"
 SERVICE_NAME="regional-check-agent"
 
@@ -149,8 +149,8 @@ echo ""
 echo "🔧 Checking system requirements..."
 MISSING_TOOLS=()
 
-if ! command -v wget >/dev/null 2>&1; then
-    MISSING_TOOLS+=("wget")
+if ! command -v wget >/dev/null 2>&1 && ! command -v curl >/dev/null 2>&1; then
+    MISSING_TOOLS+=("wget or curl")
 fi
 
 if ! command -v dpkg >/dev/null 2>&1; then
@@ -164,7 +164,7 @@ fi
 if [ ${#MISSING_TOOLS[@]} -ne 0 ]; then
     echo "❌ Missing required tools: ${MISSING_TOOLS[*]}"
     echo "   Please install missing tools and try again"
-    echo "   On Debian/Ubuntu: sudo apt-get update && sudo apt-get install wget"
+    echo "   On Debian/Ubuntu: sudo apt-get update && sudo apt-get install wget curl"
     exit 1
 fi
 
@@ -179,15 +179,62 @@ echo ""
 echo "📥 Downloading Regional Monitoring Agent package for $PKG_ARCH..."
 cd "$TEMP_DIR"
 
-if wget -q --show-progress --timeout=30 --tries=3 "$PACKAGE_URL" -O "$PACKAGE_NAME"; then
-    echo "✅ Package downloaded successfully"
-else
+# Test if package exists first
+echo "🔍 Checking package availability..."
+if command -v curl >/dev/null 2>&1; then
+    HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" -I "$PACKAGE_URL")
+    if [ "$HTTP_STATUS" != "200" ]; then
+        echo "❌ Package not found at $PACKAGE_URL (HTTP $HTTP_STATUS)"
+        echo "   Available packages should be:"
+        echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_amd64.deb"
+        echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_arm64.deb"
+        echo ""
+        echo "   Please check the GitHub releases page:"
+        echo "   https://github.com/operacle/Distributed-Regional-Monitoring/releases"
+        rm -rf "$TEMP_DIR"
+        exit 1
+    fi
+    echo "✅ Package found, proceeding with download..."
+fi
+
+# Try wget first, then curl as fallback
+DOWNLOAD_SUCCESS=false
+
+if command -v wget >/dev/null 2>&1; then
+    echo "📥 Downloading with wget..."
+    if wget -q --show-progress --timeout=30 --tries=3 "$PACKAGE_URL" -O "$PACKAGE_NAME"; then
+        DOWNLOAD_SUCCESS=true
+        echo "✅ Package downloaded successfully using wget"
+    fi
+fi
+
+if [ "$DOWNLOAD_SUCCESS" = false ] && command -v curl >/dev/null 2>&1; then
+    echo "📥 Downloading with curl..."
+    if curl -L --connect-timeout 30 --max-time 300 --retry 3 --retry-delay 2 -o "$PACKAGE_NAME" "$PACKAGE_URL" --progress-bar; then
+        DOWNLOAD_SUCCESS=true
+        echo "✅ Package downloaded successfully using curl"
+    fi
+fi
+
+if [ "$DOWNLOAD_SUCCESS" = false ]; then
     echo "❌ Failed to download package from $PACKAGE_URL"
     echo "   Please check:"
     echo "   - Internet connection"
     echo "   - Package availability for $PKG_ARCH architecture"
-    echo "   - GitHub repository access"
+    echo "   - GitHub repository access: https://github.com/operacle/Distributed-Regional-Monitoring/releases"
     echo "   - Firewall/proxy settings"
+    echo ""
+    echo "   Available packages should be:"
+    echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_amd64.deb"
+    echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_arm64.deb"
+    rm -rf "$TEMP_DIR"
+    exit 1
+fi
+
+# Verify download was successful
+if [ ! -f "$PACKAGE_NAME" ] || [ ! -s "$PACKAGE_NAME" ]; then
+    echo "❌ Downloaded package is empty or missing"
+    echo "   File size: $(ls -lh "$PACKAGE_NAME" 2>/dev/null | awk '{print $5}' || echo 'file not found')"
     rm -rf "$TEMP_DIR"
     exit 1
 fi
@@ -203,6 +250,8 @@ if dpkg-deb --info "$PACKAGE_NAME" > /dev/null 2>&1; then
     dpkg-deb --field "$PACKAGE_NAME" Package Version Architecture Description | head -4
 else
     echo "❌ Package verification failed - corrupted download"
+    echo "   File size: $(ls -lh "$PACKAGE_NAME" | awk '{print $5}')"
+    echo "   Try downloading manually from: $PACKAGE_URL"
     rm -rf "$TEMP_DIR"
     exit 1
 fi
@@ -227,7 +276,7 @@ else
         echo "   Manual resolution:"
         echo "   1. Run: sudo apt-get update"
         echo "   2. Run: sudo apt-get install -f"
-        echo "   3. Retry installation"
+        echo "   3. Retry installation: sudo dpkg -i $PACKAGE_NAME"
         rm -rf "$TEMP_DIR"
         exit 1
     fi
@@ -379,7 +428,7 @@ echo "🔧 Troubleshooting:"
 echo "   If the service fails to start:"
 echo "   1. Check logs: sudo journalctl -u $SERVICE_NAME -n 50"
 echo "   2. Verify config: cat /etc/regional-check-agent/regional-check-agent.env"
-echo "   3. Test connectivity: ping $POCKETBASE_URL"
+echo "   3. Test connectivity: ping $(echo $POCKETBASE_URL | sed 's|https\?://||' | sed 's|/.*||')"
 echo "   4. Check port availability: sudo netstat -tlnp | grep 8091"
 echo ""
 echo "✨ The agent is now monitoring and reporting to your CheckCle dashboard!"
\ No newline at end of file

From 879e106051445aa7ad2ef7ebf9514738a2bea8d1 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Sat, 21 Jun 2025 22:09:28 +0700
Subject: [PATCH 02/10] Fixed bash script for correct download package URL

---
 scripts/install-regional-agent.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/install-regional-agent.sh b/scripts/install-regional-agent.sh
index cc730fc..eb3182a 100644
--- a/scripts/install-regional-agent.sh
+++ b/scripts/install-regional-agent.sh
@@ -190,7 +190,7 @@ if command -v curl >/dev/null 2>&1; then
         echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_arm64.deb"
         echo ""
         echo "   Please check the GitHub releases page:"
-        echo "   https://github.com/operacle/Distributed-Regional-Monitoring/releases"
+        echo "   https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/v1.0.0"
         rm -rf "$TEMP_DIR"
         exit 1
     fi

From 1b11deb40f8b58484ec6f5e024807ced145e7ff7 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Sat, 21 Jun 2025 22:14:08 +0700
Subject: [PATCH 03/10] Fixed bash script package version

---
 scripts/install-regional-agent.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/install-regional-agent.sh b/scripts/install-regional-agent.sh
index eb3182a..e325180 100644
--- a/scripts/install-regional-agent.sh
+++ b/scripts/install-regional-agent.sh
@@ -13,7 +13,7 @@ AGENT_ID=""
 AGENT_IP_ADDRESS=""
 AGENT_TOKEN=""
 POCKETBASE_URL=""
-BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/v1.0.0"
+BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0"
 PACKAGE_VERSION="1.0.0"
 SERVICE_NAME="regional-check-agent"
 
@@ -190,7 +190,7 @@ if command -v curl >/dev/null 2>&1; then
         echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_arm64.deb"
         echo ""
         echo "   Please check the GitHub releases page:"
-        echo "   https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/v1.0.0"
+        echo "   https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0"
         rm -rf "$TEMP_DIR"
         exit 1
     fi

From 35b11f5a16a40aab345b9ed0e6ac1f789ee0b7e8 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Sat, 21 Jun 2025 23:26:24 +0700
Subject: [PATCH 04/10] Fix: Correct package download URL

---
 .../AddRegionalAgentDialog.tsx                | 97 ++++++++++++++-----
 application/src/services/regionalService.ts   |  2 +-
 scripts/install-regional-agent.sh             |  8 +-
 3 files changed, 78 insertions(+), 29 deletions(-)

diff --git a/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx b/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx
index 14d8bd4..9ade178 100644
--- a/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx
+++ b/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx
@@ -1,4 +1,3 @@
-
 import React, { useState } from "react";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
@@ -54,19 +53,69 @@ export const AddRegionalAgentDialog: React.FC<AddRegionalAgentDialogProps> = ({
     }
   };
 
-  const copyToClipboard = async (text: string) => {
+  const copyToClipboard = async (text: string, description: string = "Content") => {
     try {
-      await navigator.clipboard.writeText(text);
-      toast({
-        title: "Copied!",
-        description: "Installation script copied to clipboard.",
-      });
+      // Try the modern clipboard API first
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text);
+        toast({
+          title: "Copied!",
+          description: `${description} copied to clipboard.`,
+        });
+        return;
+      }
+      
+      // Fallback for older browsers or non-secure contexts (like localhost)
+      const textArea = document.createElement('textarea');
+      textArea.value = text;
+      textArea.style.position = 'fixed';
+      textArea.style.left = '-999999px';
+      textArea.style.top = '-999999px';
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      
+      const successful = document.execCommand('copy');
+      document.body.removeChild(textArea);
+      
+      if (successful) {
+        toast({
+          title: "Copied!",
+          description: `${description} copied to clipboard.`,
+        });
+      } else {
+        throw new Error('execCommand failed');
+      }
     } catch (error) {
+      console.error('Failed to copy to clipboard:', error);
+      
+      // Show the text in a modal or alert as final fallback
+      const userAgent = navigator.userAgent.toLowerCase();
+      const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+      
+      let errorMessage = "Failed to copy to clipboard.";
+      if (isLocalhost) {
+        errorMessage += " This is common in local development. Please manually copy the text.";
+      } else if (userAgent.includes('chrome')) {
+        errorMessage += " Try using HTTPS or enable clipboard permissions.";
+      }
+      
       toast({
         title: "Copy failed",
-        description: "Failed to copy to clipboard.",
+        description: errorMessage,
         variant: "destructive",
       });
+      
+      // As a last resort, select the text for manual copying
+      try {
+        const textarea = document.querySelector('textarea[readonly]') as HTMLTextAreaElement;
+        if (textarea) {
+          textarea.select();
+          textarea.setSelectionRange(0, 99999); // For mobile devices
+        }
+      } catch (selectError) {
+        console.error('Failed to select text:', selectError);
+      }
     }
   };
 
@@ -89,16 +138,6 @@ export const AddRegionalAgentDialog: React.FC<AddRegionalAgentDialogProps> = ({
     });
   };
 
-  const copyOneClickCommand = () => {
-    if (!installCommand) return;
-    
-    const oneClickCommand = `curl -fsSL -H "User-Agent: CheckCle-Installer" \\
-  "data:text/plain;base64,$(echo '${installCommand.bash_script}' | base64 -w 0)" \\
-  | sudo bash`;
-    
-    copyToClipboard(oneClickCommand);
-  };
-
   const handleComplete = () => {
     onAgentAdded();
     setStep(1);
@@ -211,7 +250,7 @@ export const AddRegionalAgentDialog: React.FC<AddRegionalAgentDialogProps> = ({
                         <Textarea
                           readOnly
                           value={`# One-click installation command:
-curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent.sh | sudo bash -s -- \\
+curl -fsSL https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/install-regional-agent.sh | sudo bash -s -- \\
   --region-name="${regionName}" \\
   --agent-id="${installCommand.agent_id}" \\
   --agent-ip="${agentIp}" \\
@@ -223,7 +262,7 @@ curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent
                           size="sm"
                           variant="outline"
                           className="absolute top-2 right-2"
-                          onClick={() => copyToClipboard(`curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent.sh | sudo bash -s -- --region-name="${regionName}" --agent-id="${installCommand.agent_id}" --agent-ip="${agentIp}" --token="${installCommand.token}" --pocketbase-url="${installCommand.api_endpoint}"`)}
+                          onClick={() => copyToClipboard(`curl -fsSL https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/install-regional-agent.sh | sudo bash -s -- --region-name="${regionName}" --agent-id="${installCommand.agent_id}" --agent-ip="${agentIp}" --token="${installCommand.token}" --pocketbase-url="${installCommand.api_endpoint}"`, "Installation command")}
                         >
                           <Copy className="h-3 w-3" />
                         </Button>
@@ -236,7 +275,7 @@ curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent
                         Download Complete Script
                       </Button>
                       <Button 
-                        onClick={() => copyToClipboard(installCommand.bash_script)} 
+                        onClick={() => copyToClipboard(installCommand.bash_script, "Installation script")} 
                         variant="outline" 
                         className="flex-1"
                       >
@@ -244,6 +283,16 @@ curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent
                         Copy Full Script
                       </Button>
                     </div>
+
+                    {/* Local development notice */}
+                    {(window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') && (
+                      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                        <p className="text-sm text-yellow-800">
+                          <strong>Local Development Notice:</strong> If clipboard copying fails, this is normal in local development. 
+                          You can use the "Download Complete Script" button instead or manually copy the text.
+                        </p>
+                      </div>
+                    )}
                   </CardContent>
                 </Card>
               </TabsContent>
@@ -270,7 +319,7 @@ curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent
                             size="sm"
                             variant="ghost"
                             className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
-                            onClick={() => copyToClipboard(installCommand.agent_id)}
+                            onClick={() => copyToClipboard(installCommand.agent_id, "Agent ID")}
                           >
                             <Copy className="h-3 w-3" />
                           </Button>
@@ -314,7 +363,7 @@ curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent
                           size="sm"
                           variant="ghost"
                           className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
-                          onClick={() => copyToClipboard(installCommand.token)}
+                          onClick={() => copyToClipboard(installCommand.token, "Authentication token")}
                         >
                           <Copy className="h-3 w-3" />
                         </Button>
@@ -346,7 +395,7 @@ curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent
                       <div className="border-l-4 border-blue-500 pl-4">
                         <p className="font-medium">Step 1: Download Package</p>
                         <code className="text-xs bg-muted p-2 rounded block mt-1">
-                          wget https://github.com/checkcle/distributed-regional-monitoring/releases/latest/download/distributed-regional-check-agent_1.0.0_amd64.deb
+                          wget https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0/distributed-regional-check-agent_1.0.0_amd64.deb
                         </code>
                       </div>
                       
diff --git a/application/src/services/regionalService.ts b/application/src/services/regionalService.ts
index 4794feb..48f4aa3 100644
--- a/application/src/services/regionalService.ts
+++ b/application/src/services/regionalService.ts
@@ -105,7 +105,7 @@ AGENT_TOKEN="${token}"
 POCKETBASE_URL="${apiEndpoint}"
 
 # Base package information
-BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/v1.0.0"
+BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0"
 PACKAGE_VERSION="1.0.0"
 SERVICE_NAME="regional-check-agent"
 
diff --git a/scripts/install-regional-agent.sh b/scripts/install-regional-agent.sh
index e325180..dbf789d 100644
--- a/scripts/install-regional-agent.sh
+++ b/scripts/install-regional-agent.sh
@@ -179,22 +179,22 @@ echo ""
 echo "📥 Downloading Regional Monitoring Agent package for $PKG_ARCH..."
 cd "$TEMP_DIR"
 
-# Test if package exists first
+# Test if package exists first - Accept both 200 and 302 (redirect) as success
 echo "🔍 Checking package availability..."
 if command -v curl >/dev/null 2>&1; then
     HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" -I "$PACKAGE_URL")
-    if [ "$HTTP_STATUS" != "200" ]; then
+    if [ "$HTTP_STATUS" != "200" ] && [ "$HTTP_STATUS" != "302" ]; then
         echo "❌ Package not found at $PACKAGE_URL (HTTP $HTTP_STATUS)"
         echo "   Available packages should be:"
         echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_amd64.deb"
         echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_arm64.deb"
         echo ""
         echo "   Please check the GitHub releases page:"
-        echo "   https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0"
+        echo "   https://github.com/operacle/Distributed-Regional-Monitoring/releases"
         rm -rf "$TEMP_DIR"
         exit 1
     fi
-    echo "✅ Package found, proceeding with download..."
+    echo "✅ Package found (HTTP $HTTP_STATUS), proceeding with download..."
 fi
 
 # Try wget first, then curl as fallback

From ab4f0aa6ea4b6dc385086a394acda1b08fb029d5 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 24 Jun 2025 22:11:29 +0700
Subject: [PATCH 05/10] Refactor: Separate data display by monitoring source
 and Fix: Display data collection in detail page

---
 .../AddRegionalAgentDialog.tsx                |   6 +-
 .../services/RegionalAgentFilter.tsx          |  92 +++++++++++
 .../hooks/useServiceData.tsx                  |  53 ++++--
 .../services/ServiceDetailContainer/index.tsx |  10 +-
 .../services/ServiceDetailContent.tsx         |  40 +++--
 .../src/components/services/ServiceForm.tsx   |  42 ++++-
 .../src/components/services/ServiceHeader.tsx |  18 +-
 .../services/ServiceHistoryDialog.tsx         |   3 +-
 .../services/add-service/ServiceForm.tsx      |  42 ++++-
 .../add-service/ServiceRegionalFields.tsx     | 154 ++++++++++++++++++
 .../components/services/add-service/types.ts  |   3 +
 .../services/hooks/useUptimeData.ts           |  39 +++--
 application/src/services/serviceService.ts    |  18 ++
 application/src/services/uptimeService.ts     |  90 +++++++++-
 application/src/types/service.types.ts        |  12 +-
 15 files changed, 565 insertions(+), 57 deletions(-)
 create mode 100644 application/src/components/services/RegionalAgentFilter.tsx
 create mode 100644 application/src/components/services/add-service/ServiceRegionalFields.tsx

diff --git a/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx b/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx
index 9ade178..70caad3 100644
--- a/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx
+++ b/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx
@@ -250,7 +250,7 @@ export const AddRegionalAgentDialog: React.FC<AddRegionalAgentDialogProps> = ({
                         <Textarea
                           readOnly
                           value={`# One-click installation command:
-curl -fsSL https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/install-regional-agent.sh | sudo bash -s -- \\
+curl -fsSL https://raw.githubusercontent.com/checkcle/scripts/main/install.sh | sudo bash -s -- \\
   --region-name="${regionName}" \\
   --agent-id="${installCommand.agent_id}" \\
   --agent-ip="${agentIp}" \\
@@ -262,7 +262,7 @@ curl -fsSL https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/s
                           size="sm"
                           variant="outline"
                           className="absolute top-2 right-2"
-                          onClick={() => copyToClipboard(`curl -fsSL https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/install-regional-agent.sh | sudo bash -s -- --region-name="${regionName}" --agent-id="${installCommand.agent_id}" --agent-ip="${agentIp}" --token="${installCommand.token}" --pocketbase-url="${installCommand.api_endpoint}"`, "Installation command")}
+                          onClick={() => copyToClipboard(`curl -fsSL https://raw.githubusercontent.com/checkcle/scripts/main/install.sh | sudo bash -s -- --region-name="${regionName}" --agent-id="${installCommand.agent_id}" --agent-ip="${agentIp}" --token="${installCommand.token}" --pocketbase-url="${installCommand.api_endpoint}"`, "Installation command")}
                         >
                           <Copy className="h-3 w-3" />
                         </Button>
@@ -395,7 +395,7 @@ curl -fsSL https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/s
                       <div className="border-l-4 border-blue-500 pl-4">
                         <p className="font-medium">Step 1: Download Package</p>
                         <code className="text-xs bg-muted p-2 rounded block mt-1">
-                          wget https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0/distributed-regional-check-agent_1.0.0_amd64.deb
+                          wget https://github.com/checkcle/distributed-regional-monitoring/releases/latest/download/distributed-regional-check-agent_1.0.0_amd64.deb
                         </code>
                       </div>
                       
diff --git a/application/src/components/services/RegionalAgentFilter.tsx b/application/src/components/services/RegionalAgentFilter.tsx
new file mode 100644
index 0000000..3d5962a
--- /dev/null
+++ b/application/src/components/services/RegionalAgentFilter.tsx
@@ -0,0 +1,92 @@
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useQuery } from "@tanstack/react-query";
+import { regionalService } from "@/services/regionalService";
+import { MapPin, Loader2, Globe } from "lucide-react";
+
+interface RegionalAgentFilterProps {
+  selectedAgent: string;
+  onAgentChange: (agent: string) => void;
+}
+
+export function RegionalAgentFilter({ selectedAgent, onAgentChange }: RegionalAgentFilterProps) {
+  const { data: regionalAgents = [], isLoading } = useQuery({
+    queryKey: ['regional-services'],
+    queryFn: regionalService.getRegionalServices,
+  });
+
+  // Filter only online agents
+  const onlineAgents = regionalAgents.filter(agent => agent.connection === 'online');
+
+  const getCurrentAgentDisplay = () => {
+    if (!selectedAgent || selectedAgent === "default") {
+      return "Default Monitoring";
+    }
+    
+    const [regionName] = selectedAgent.split("|");
+    const agent = onlineAgents.find(agent => 
+      `${agent.region_name}|${agent.agent_id}` === selectedAgent
+    );
+    
+    if (agent) {
+      return `${agent.region_name} (${agent.agent_ip_address})`;
+    }
+    
+    return regionName || "Default Monitoring";
+  };
+
+  return (
+    <div className="w-64">
+      <label className="text-sm font-medium flex items-center gap-2 mb-2">
+        <MapPin className="h-4 w-4" />
+        Monitoring Source
+      </label>
+      <Select 
+        onValueChange={onAgentChange} 
+        value={selectedAgent || "default"}
+        disabled={isLoading}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder={
+            isLoading 
+              ? "Loading agents..." 
+              : getCurrentAgentDisplay()
+          } />
+        </SelectTrigger>
+        <SelectContent>
+          {isLoading ? (
+            <SelectItem value="loading" disabled>
+              <div className="flex items-center gap-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Loading agents...
+              </div>
+            </SelectItem>
+          ) : (
+            <>
+              <SelectItem value="default">
+                <div className="flex items-center gap-2">
+                  <Globe className="h-4 w-4 text-blue-500" />
+                  <span className="font-medium">Default Monitoring</span>
+                </div>
+              </SelectItem>
+              {onlineAgents.length > 0 && onlineAgents.map((agent) => (
+                <SelectItem key={agent.id} value={`${agent.region_name}|${agent.agent_id}`}>
+                  <div className="flex items-center gap-2">
+                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                    <span className="font-medium">{agent.region_name}</span>
+                    <span className="text-muted-foreground">({agent.agent_ip_address})</span>
+                  </div>
+                </SelectItem>
+              ))}
+            </>
+          )}
+        </SelectContent>
+      </Select>
+      {onlineAgents.length === 0 && !isLoading && (
+        <p className="text-xs text-amber-600 mt-1">
+          No regional agents available. Using default monitoring only.
+        </p>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx b/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx
index 8473786..3dd01b5 100644
--- a/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx
+++ b/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx
@@ -11,6 +11,7 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
   const [service, setService] = useState<Service | null>(null);
   const [uptimeData, setUptimeData] = useState<UptimeData[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [selectedRegionalAgent, setSelectedRegionalAgent] = useState<string>("default");
   const { toast } = useToast();
   const navigate = useNavigate();
 
@@ -40,14 +41,18 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
     }
   };
 
-  const fetchUptimeData = async (serviceId: string, start: Date, end: Date, selectedRange?: DateRangeOption | string) => {
+  const fetchUptimeData = async (serviceId: string, start: Date, end: Date, selectedRange?: DateRangeOption | string, regionalAgent?: string) => {
     try {
       if (!service) {
         console.log('No service data available for uptime fetch');
         return [];
       }
 
-      console.log(`Fetching uptime data: ${start.toISOString()} to ${end.toISOString()} for range: ${selectedRange}, service type: ${service.type}`);
+      const currentAgent = regionalAgent || selectedRegionalAgent;
+      console.log(`Fetching uptime data: ${start.toISOString()} to ${end.toISOString()} for range: ${selectedRange}, service type: ${service.type}, regional agent: ${currentAgent}`);
+      
+      // Clear existing data immediately when switching agents
+      setUptimeData([]);
       
       let limit = 500; // Default limit
       
@@ -59,15 +64,27 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
       
       console.log(`Using limit ${limit} for range ${selectedRange}`);
       
-      // Use the service type to fetch from the correct collection
-      const history = await uptimeService.getUptimeHistory(serviceId, limit, start, end, service.type);
-      console.log(`Retrieved ${history.length} uptime records from collection for ${service.type} service`);
+      let history: UptimeData[] = [];
+      
+      if (currentAgent === "default") {
+        // Fetch default monitoring data - this will automatically filter out regional records
+        console.log(`Fetching default monitoring data from ${service.type} collection`);
+        history = await uptimeService.getUptimeHistory(serviceId, limit, start, end, service.type);
+        console.log(`Retrieved ${history.length} default monitoring records`);
+      } else {
+        // Fetch regional agent specific data
+        const [regionName, agentId] = currentAgent.split("|");
+        console.log(`Fetching regional agent data for region: ${regionName}, agent: ${agentId} from ${service.type} collection`);
+        history = await uptimeService.getUptimeHistoryByRegionalAgent(serviceId, limit, start, end, service.type, regionName, agentId);
+        console.log(`Retrieved ${history.length} regional monitoring records`);
+      }
       
       // Sort by timestamp (newest first)
       const filteredHistory = [...history].sort((a, b) => 
         new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
       );
       
+      console.log(`Final dataset: ${filteredHistory.length} records for ${currentAgent === "default" ? "default" : "regional"} monitoring`);
       setUptimeData(filteredHistory);
       return filteredHistory;
     } catch (error) {
@@ -81,6 +98,20 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
     }
   };
 
+  const handleRegionalAgentChange = (agent: string) => {
+    console.log(`Regional agent changed from ${selectedRegionalAgent} to: ${agent}`);
+    
+    // Clear data immediately when switching
+    setUptimeData([]);
+    setSelectedRegionalAgent(agent);
+    
+    // Refetch data with new agent selection
+    if (serviceId && !isLoading && service) {
+      console.log(`Refetching data for new agent: ${agent}`);
+      fetchUptimeData(serviceId, startDate, endDate, '24h', agent);
+    }
+  };
+
   // Initial data loading
   useEffect(() => {
     const fetchServiceData = async () => {
@@ -121,8 +152,8 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
         console.log(`Loaded service: ${formattedService.name} (${formattedService.type})`);
         setService(formattedService);
         
-        // Fetch initial uptime history with 24h default - wait for service to be set
-        await new Promise(resolve => setTimeout(resolve, 100)); // Small delay to ensure state is updated
+        // Small delay to ensure state is updated before fetching uptime data
+        await new Promise(resolve => setTimeout(resolve, 100));
       } catch (error) {
         console.error("Error fetching service:", error);
         toast({
@@ -143,9 +174,9 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
   useEffect(() => {
     if (serviceId && !isLoading && service) {
       console.log(`Date range changed or service loaded, refetching data for ${serviceId}: ${startDate.toISOString()} to ${endDate.toISOString()}`);
-      fetchUptimeData(serviceId, startDate, endDate, '24h');
+      fetchUptimeData(serviceId, startDate, endDate, '24h', selectedRegionalAgent);
     }
-  }, [startDate, endDate, serviceId, isLoading, service]);
+  }, [startDate, endDate, serviceId, isLoading, service, selectedRegionalAgent]);
 
   return {
     service,
@@ -154,6 +185,8 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
     setUptimeData,
     isLoading,
     handleStatusChange,
-    fetchUptimeData
+    fetchUptimeData,
+    selectedRegionalAgent,
+    handleRegionalAgentChange
   };
 };
\ No newline at end of file
diff --git a/application/src/components/services/ServiceDetailContainer/index.tsx b/application/src/components/services/ServiceDetailContainer/index.tsx
index e23e054..fed6a1d 100644
--- a/application/src/components/services/ServiceDetailContainer/index.tsx
+++ b/application/src/components/services/ServiceDetailContainer/index.tsx
@@ -80,7 +80,9 @@ export const ServiceDetailContainer = () => {
     handleStatusChange,
     fetchUptimeData,
     setService,
-    setUptimeData
+    setUptimeData,
+    selectedRegionalAgent,
+    handleRegionalAgentChange
   } = useServiceData(id, startDate, endDate);
 
   // Set up real-time updates
@@ -104,9 +106,9 @@ export const ServiceDetailContainer = () => {
     // Also explicitly fetch data with the new range to ensure immediate update
     if (id) {
       console.log(`ServiceDetailContainer: Explicitly fetching data for service ${id} with new range`);
-      fetchUptimeData(id, start, end, option);
+      fetchUptimeData(id, start, end, option, selectedRegionalAgent);
     }
-  }, [id, fetchUptimeData]);
+  }, [id, fetchUptimeData, selectedRegionalAgent]);
 
   return (
     <ServiceDetailWrapper
@@ -124,6 +126,8 @@ export const ServiceDetailContainer = () => {
           onDateRangeChange={handleDateRangeChange}
           onStatusChange={handleStatusChange}
           selectedDateOption={selectedRange}
+          selectedRegionalAgent={selectedRegionalAgent}
+          onRegionalAgentChange={handleRegionalAgentChange}
         />
       )}
     </ServiceDetailWrapper>
diff --git a/application/src/components/services/ServiceDetailContent.tsx b/application/src/components/services/ServiceDetailContent.tsx
index fd9aef9..d925312 100644
--- a/application/src/components/services/ServiceDetailContent.tsx
+++ b/application/src/components/services/ServiceDetailContent.tsx
@@ -14,6 +14,8 @@ interface ServiceDetailContentProps {
   onDateRangeChange: (start: Date, end: Date, option: DateRangeOption) => void;
   onStatusChange: (newStatus: "up" | "down" | "paused" | "warning") => void;
   selectedDateOption: DateRangeOption;
+  selectedRegionalAgent: string;
+  onRegionalAgentChange: (agent: string) => void;
 }
 
 export const ServiceDetailContent = ({
@@ -21,28 +23,37 @@ export const ServiceDetailContent = ({
   uptimeData,
   onDateRangeChange,
   onStatusChange,
-  selectedDateOption
+  selectedDateOption,
+  selectedRegionalAgent,
+  onRegionalAgentChange
 }: ServiceDetailContentProps) => {
   // Check if data is available
   const hasUptimeData = uptimeData && uptimeData.length > 0;
   
   return (
     <div className="p-4 md:p-6 pb-0 h-full overflow-auto">
-      <ServiceHeader service={service} onStatusChange={onStatusChange} />
+      <ServiceHeader 
+        service={service} 
+        onStatusChange={onStatusChange}
+        selectedRegionalAgent={selectedRegionalAgent}
+        onRegionalAgentChange={onRegionalAgentChange}
+      />
       <ServiceStatsCards service={service} uptimeData={uptimeData} />
       
-      <div className="mb-4 md:mb-6 mt-6 md:mt-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 md:gap-0">
+      <div className="mb-4 md:mb-6 mt-6 md:mt-8 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
         <h2 className="text-lg md:text-xl font-medium">Response Time History</h2>
-        <div className="flex flex-col md:flex-row items-start md:items-center gap-2">
-          <span className="text-sm text-muted-foreground">
-            Collection: {service.type.toLowerCase() === 'ping' || service.type.toLowerCase() === 'icmp' ? 'ping_data' : 
-                        service.type.toLowerCase() === 'dns' ? 'dns_data' : 
-                        service.type.toLowerCase() === 'tcp' ? 'tcp_data' : 'uptime_data'}
-          </span>
-          <DateRangeFilter 
-            onRangeChange={onDateRangeChange} 
-            selectedOption={selectedDateOption} 
-          />
+        <div className="flex flex-col md:flex-row items-start md:items-center gap-4">
+          <div className="flex flex-col md:flex-row items-start md:items-center gap-2">
+            <span className="text-sm text-muted-foreground">
+              Collection: {service.type.toLowerCase() === 'ping' || service.type.toLowerCase() === 'icmp' ? 'ping_data' : 
+                          service.type.toLowerCase() === 'dns' ? 'dns_data' : 
+                          service.type.toLowerCase() === 'tcp' ? 'tcp_data' : 'uptime_data'}
+            </span>
+            <DateRangeFilter 
+              onRangeChange={onDateRangeChange} 
+              selectedOption={selectedDateOption} 
+            />
+          </div>
         </div>
       </div>
       
@@ -53,7 +64,8 @@ export const ServiceDetailContent = ({
               <AlertTriangle className="h-10 w-10 md:h-12 md:w-12 text-amber-500 mx-auto mb-2 md:mb-3 opacity-70" />
               <h3 className="text-base md:text-lg font-medium mb-1">No uptime data available</h3>
               <p className="text-muted-foreground max-w-md text-sm md:text-base">
-                There's no monitoring data for this service in the selected time period.
+                There's no monitoring data for this service in the selected time period
+                {selectedRegionalAgent !== "default" ? " from the selected regional agent" : ""}.
                 This could be because the service was recently added or monitoring is paused.
               </p>
             </div>
diff --git a/application/src/components/services/ServiceForm.tsx b/application/src/components/services/ServiceForm.tsx
index 81db0c1..18bc34d 100644
--- a/application/src/components/services/ServiceForm.tsx
+++ b/application/src/components/services/ServiceForm.tsx
@@ -12,6 +12,7 @@ import { ServiceNotificationFields } from "./add-service/ServiceNotificationFiel
 import { ServiceFormActions } from "./add-service/ServiceFormActions";
 import { serviceService } from "@/services/serviceService";
 import { Service } from "@/types/service.types";
+import { ServiceRegionalFields } from "./add-service/ServiceRegionalFields";
 
 interface ServiceFormProps {
   onSuccess: () => void;
@@ -43,6 +44,8 @@ export function ServiceForm({
       retries: "3",
       notificationChannel: "",
       alertTemplate: "",
+      regionalMonitoringEnabled: false,
+      regionalAgent: "",
     },
     mode: "onBlur",
   });
@@ -71,6 +74,11 @@ export function ServiceForm({
         urlValue = initialData.url || "";
       }
 
+      // Handle regional monitoring data - ensure proper assignment display
+      const regionalAgent = initialData.region_name && initialData.agent_id 
+        ? `${initialData.region_name}|${initialData.agent_id}` 
+        : "";
+
       // Reset the form with initial data values
       form.reset({
         name: initialData.name || "",
@@ -81,10 +89,20 @@ export function ServiceForm({
         retries: String(initialData.retries || 3),
         notificationChannel: initialData.notificationChannel === "none" ? "" : initialData.notificationChannel || "",
         alertTemplate: initialData.alertTemplate === "default" ? "" : initialData.alertTemplate || "",
+        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        regionalAgent: regionalAgent,
       });
 
       // Log for debugging
-      console.log("Populating form with data:", { type: validType, url: urlValue, port: portValue });
+      console.log("Populating form with data:", { 
+        type: validType, 
+        url: urlValue, 
+        port: portValue, 
+        regionalAgent,
+        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        region_name: initialData.region_name,
+        agent_id: initialData.agent_id
+      });
     }
   }, [initialData, isEdit, form]);
 
@@ -97,6 +115,17 @@ export function ServiceForm({
     try {
       console.log("Form data being submitted:", data); // Debug log for submitted data
       
+      // Parse regional agent selection
+      let regionName = "";
+      let agentId = "";
+      
+      // Only set region and agent if regional monitoring is enabled AND an agent is selected (not unassign)
+      if (data.regionalMonitoringEnabled && data.regionalAgent && data.regionalAgent !== "") {
+        const [parsedRegionName, parsedAgentId] = data.regionalAgent.split("|");
+        regionName = parsedRegionName || "";
+        agentId = parsedAgentId || "";
+      }
+      
       // Prepare service data with proper field mapping
       const serviceData = {
         name: data.name,
@@ -105,6 +134,10 @@ export function ServiceForm({
         retries: parseInt(data.retries),
         notificationChannel: data.notificationChannel === "none" ? "" : data.notificationChannel,
         alertTemplate: data.alertTemplate === "default" ? "" : data.alertTemplate,
+        regionalMonitoringEnabled: data.regionalMonitoringEnabled || false,
+        // Always set region_name and agent_id - empty strings when unassigned
+        regionName: regionName,
+        agentId: agentId,
         // Map the URL field to appropriate database field based on service type
         ...(data.type === "dns" 
           ? { domain: data.url, url: "", host: "", port: undefined }  // DNS: store in domain field
@@ -115,6 +148,8 @@ export function ServiceForm({
           : { url: data.url, domain: "", host: "", port: undefined }  // HTTP: store in url field
         )
       };
+
+      console.log("Service data being sent:", serviceData);
       
       if (isEdit && initialData) {
         // Update existing service
@@ -164,6 +199,11 @@ export function ServiceForm({
             <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Configuration</h3>
             <ServiceConfigFields form={form} />
           </div>
+
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Regional Monitoring</h3>
+            <ServiceRegionalFields form={form} />
+          </div>
           
           <div className="space-y-4">
             <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Notifications</h3>
diff --git a/application/src/components/services/ServiceHeader.tsx b/application/src/components/services/ServiceHeader.tsx
index d9df6a5..7166ecf 100644
--- a/application/src/components/services/ServiceHeader.tsx
+++ b/application/src/components/services/ServiceHeader.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { StatusBadge } from "@/components/services/StatusBadge";
 import { ServiceMonitoringButton } from "@/components/services/ServiceMonitoringButton";
+import { RegionalAgentFilter } from "@/components/services/RegionalAgentFilter";
 import { Service } from "@/types/service.types";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { cn } from "@/lib/utils";
@@ -11,9 +12,16 @@ import { cn } from "@/lib/utils";
 interface ServiceHeaderProps {
   service: Service;
   onStatusChange?: (newStatus: "up" | "down" | "paused" | "warning") => void;
+  selectedRegionalAgent?: string;
+  onRegionalAgentChange?: (agent: string) => void;
 }
 
-export function ServiceHeader({ service, onStatusChange }: ServiceHeaderProps) {
+export function ServiceHeader({ 
+  service, 
+  onStatusChange, 
+  selectedRegionalAgent, 
+  onRegionalAgentChange 
+}: ServiceHeaderProps) {
   const navigate = useNavigate();
   const { t } = useLanguage();
   
@@ -71,6 +79,12 @@ export function ServiceHeader({ service, onStatusChange }: ServiceHeaderProps) {
         
         <div className="flex items-center space-x-4">
           <StatusBadge status={service.status} size="lg" />
+          {selectedRegionalAgent !== undefined && onRegionalAgentChange && (
+            <RegionalAgentFilter 
+              selectedAgent={selectedRegionalAgent}
+              onAgentChange={onRegionalAgentChange}
+            />
+          )}
           <ServiceMonitoringButton service={service} onStatusChange={onStatusChange} />
           <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border">
             <span className="sr-only">More options</span>
@@ -80,4 +94,4 @@ export function ServiceHeader({ service, onStatusChange }: ServiceHeaderProps) {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/application/src/components/services/ServiceHistoryDialog.tsx b/application/src/components/services/ServiceHistoryDialog.tsx
index 7a9830a..efcf8f7 100644
--- a/application/src/components/services/ServiceHistoryDialog.tsx
+++ b/application/src/components/services/ServiceHistoryDialog.tsx
@@ -64,6 +64,7 @@ export const ServiceHistoryDialog = ({
         {selectedService && (
           <ServiceUptimeHistory 
             serviceId={selectedService.id} 
+            serviceType={selectedService.type}
             startDate={startDate}
             endDate={endDate}
           />
@@ -71,4 +72,4 @@ export const ServiceHistoryDialog = ({
       </DialogContent>
     </Dialog>
   );
-};
+};
\ No newline at end of file
diff --git a/application/src/components/services/add-service/ServiceForm.tsx b/application/src/components/services/add-service/ServiceForm.tsx
index 7e3c1ae..b8b82c2 100644
--- a/application/src/components/services/add-service/ServiceForm.tsx
+++ b/application/src/components/services/add-service/ServiceForm.tsx
@@ -13,6 +13,7 @@ import { ServiceNotificationFields } from "./ServiceNotificationFields";
 import { ServiceFormActions } from "./ServiceFormActions";
 import { serviceService } from "@/services/serviceService";
 import { Service } from "@/types/service.types";
+import { ServiceRegionalFields } from "./ServiceRegionalFields";
 
 interface ServiceFormProps {
   onSuccess: () => void;
@@ -44,6 +45,8 @@ export function ServiceForm({
       retries: "3",
       notificationChannel: "",
       alertTemplate: "",
+      regionalMonitoringEnabled: false,
+      regionalAgent: "",
     },
     mode: "onBlur",
   });
@@ -72,6 +75,11 @@ export function ServiceForm({
         urlValue = initialData.url || "";
       }
 
+      // Handle regional monitoring data - ensure proper assignment display
+      const regionalAgent = initialData.region_name && initialData.agent_id 
+        ? `${initialData.region_name}|${initialData.agent_id}` 
+        : "";
+
       // Reset the form with initial data values
       form.reset({
         name: initialData.name || "",
@@ -82,10 +90,20 @@ export function ServiceForm({
         retries: String(initialData.retries || 3),
         notificationChannel: initialData.notificationChannel || "",
         alertTemplate: initialData.alertTemplate || "",
+        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        regionalAgent: regionalAgent,
       });
 
       // Log for debugging
-      console.log("Populating form with data:", { type: validType, url: urlValue, port: portValue });
+      console.log("Populating form with data:", { 
+        type: validType, 
+        url: urlValue, 
+        port: portValue, 
+        regionalAgent,
+        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        region_name: initialData.region_name,
+        agent_id: initialData.agent_id
+      });
     }
   }, [initialData, isEdit, form]);
 
@@ -98,6 +116,17 @@ export function ServiceForm({
     try {
       console.log("Form data being submitted:", data); // Debug log for submitted data
       
+      // Parse regional agent selection
+      let regionName = "";
+      let agentId = "";
+      
+      // Only set region and agent if regional monitoring is enabled AND an agent is selected (not unassign)
+      if (data.regionalMonitoringEnabled && data.regionalAgent && data.regionalAgent !== "") {
+        const [parsedRegionName, parsedAgentId] = data.regionalAgent.split("|");
+        regionName = parsedRegionName || "";
+        agentId = parsedAgentId || "";
+      }
+      
       // Prepare service data with proper field mapping
       const serviceData = {
         name: data.name,
@@ -106,6 +135,10 @@ export function ServiceForm({
         retries: parseInt(data.retries),
         notificationChannel: data.notificationChannel || undefined,
         alertTemplate: data.alertTemplate || undefined,
+        regionalMonitoringEnabled: data.regionalMonitoringEnabled || false,
+        // Always set region_name and agent_id - empty strings when unassigned
+        regionName: regionName,
+        agentId: agentId,
         // Map the URL field to appropriate database field based on service type
         ...(data.type === "dns" 
           ? { domain: data.url, url: "", host: "", port: undefined }  // DNS: store in domain field
@@ -116,6 +149,8 @@ export function ServiceForm({
           : { url: data.url, domain: "", host: "", port: undefined }  // HTTP: store in url field
         )
       };
+
+      console.log("Service data being sent:", serviceData);
       
       if (isEdit && initialData) {
         // Update existing service
@@ -165,6 +200,11 @@ export function ServiceForm({
             <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Configuration</h3>
             <ServiceConfigFields form={form} />
           </div>
+
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Regional Monitoring</h3>
+            <ServiceRegionalFields form={form} />
+          </div>
           
           <div className="space-y-4">
             <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Notifications</h3>
diff --git a/application/src/components/services/add-service/ServiceRegionalFields.tsx b/application/src/components/services/add-service/ServiceRegionalFields.tsx
new file mode 100644
index 0000000..1ed7045
--- /dev/null
+++ b/application/src/components/services/add-service/ServiceRegionalFields.tsx
@@ -0,0 +1,154 @@
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { UseFormReturn } from "react-hook-form";
+import { ServiceFormData } from "./types";
+import { useQuery } from "@tanstack/react-query";
+import { regionalService } from "@/services/regionalService";
+import { MapPin, Loader2, X } from "lucide-react";
+
+interface ServiceRegionalFieldsProps {
+  form: UseFormReturn<ServiceFormData>;
+}
+
+export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
+  const regionalMonitoringEnabled = form.watch("regionalMonitoringEnabled");
+  const currentRegionalAgent = form.watch("regionalAgent");
+
+  const { data: regionalAgents = [], isLoading } = useQuery({
+    queryKey: ['regional-services'],
+    queryFn: regionalService.getRegionalServices,
+    enabled: regionalMonitoringEnabled,
+  });
+
+  // Filter only online agents
+  const onlineAgents = regionalAgents.filter(agent => agent.connection === 'online');
+
+  // Find the current agent name for display
+  const getCurrentAgentDisplay = () => {
+    if (!currentRegionalAgent || currentRegionalAgent === "unassign") {
+      return "Select a regional agent or unassign";
+    }
+    
+    const [regionName] = currentRegionalAgent.split("|");
+    const agent = onlineAgents.find(agent => 
+      `${agent.region_name}|${agent.agent_id}` === currentRegionalAgent
+    );
+    
+    if (agent) {
+      return `${agent.region_name} (${agent.agent_ip_address})`;
+    }
+    
+    // If agent is not found in online agents, it might be offline but still assigned
+    return regionName || "Select a regional agent or unassign";
+  };
+
+  return (
+    <div className="space-y-4">
+      <FormField
+        control={form.control}
+        name="regionalMonitoringEnabled"
+        render={({ field }) => (
+          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+            <div className="space-y-0.5">
+              <FormLabel className="text-base font-medium flex items-center gap-2">
+                <MapPin className="h-4 w-4" />
+                Regional Monitoring
+              </FormLabel>
+              <div className="text-sm text-muted-foreground">
+                Assign this service to a regional monitoring agent for distributed monitoring
+              </div>
+            </div>
+            <FormControl>
+              <Switch
+                checked={field.value || false}
+                onCheckedChange={field.onChange}
+              />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+
+      {regionalMonitoringEnabled && (
+        <FormField
+          control={form.control}
+          name="regionalAgent"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Regional Agent</FormLabel>
+              <Select 
+                onValueChange={(value) => {
+                  // Handle the unassign case by setting to empty string
+                  field.onChange(value === "unassign" ? "" : value);
+                }} 
+                value={field.value || "unassign"}
+                disabled={isLoading}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder={
+                      isLoading 
+                        ? "Loading agents..." 
+                        : getCurrentAgentDisplay()
+                    } />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {isLoading ? (
+                    <SelectItem value="loading" disabled>
+                      <div className="flex items-center gap-2">
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        Loading agents...
+                      </div>
+                    </SelectItem>
+                  ) : (
+                    <>
+                      <SelectItem value="unassign">
+                        <div className="flex items-center gap-2">
+                          <X className="h-4 w-4 text-red-500" />
+                          <span className="text-red-600">Unassign (No Regional Agent)</span>
+                        </div>
+                      </SelectItem>
+                      {onlineAgents.length === 0 ? (
+                        <SelectItem value="no-agents" disabled>
+                          No online regional agents available
+                        </SelectItem>
+                      ) : (
+                        onlineAgents.map((agent) => (
+                          <SelectItem key={agent.id} value={`${agent.region_name}|${agent.agent_id}`}>
+                            <div className="flex items-center gap-2">
+                              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                              <span className="font-medium">{agent.region_name}</span>
+                              <span className="text-muted-foreground">({agent.agent_ip_address})</span>
+                            </div>
+                          </SelectItem>
+                        ))
+                      )}
+                    </>
+                  )}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+              {regionalMonitoringEnabled && onlineAgents.length === 0 && !isLoading && (
+                <p className="text-sm text-amber-600">
+                  No online regional agents found. Services will use default monitoring.
+                </p>
+              )}
+              {currentRegionalAgent && currentRegionalAgent !== "" && currentRegionalAgent !== "unassign" && (
+                <p className="text-sm text-green-600">
+                  Currently assigned to: {getCurrentAgentDisplay()}
+                </p>
+              )}
+              {(!currentRegionalAgent || currentRegionalAgent === "" || currentRegionalAgent === "unassign") && (
+                <p className="text-sm text-orange-600">
+                  Service is unassigned and will use default monitoring.
+                </p>
+              )}
+            </FormItem>
+          )}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/application/src/components/services/add-service/types.ts b/application/src/components/services/add-service/types.ts
index 2aee449..c276e4d 100644
--- a/application/src/components/services/add-service/types.ts
+++ b/application/src/components/services/add-service/types.ts
@@ -13,6 +13,9 @@ export const serviceSchema = z.object({
   retries: z.string(),
   notificationChannel: z.string().optional(),
   alertTemplate: z.string().optional(),
+  // Regional monitoring fields
+  regionalMonitoringEnabled: z.boolean().optional(),
+  regionalAgent: z.string().optional(),
 });
 
 export type ServiceFormData = z.infer<typeof serviceSchema>;
\ No newline at end of file
diff --git a/application/src/components/services/hooks/useUptimeData.ts b/application/src/components/services/hooks/useUptimeData.ts
index 34f7b88..c36a5dd 100644
--- a/application/src/components/services/hooks/useUptimeData.ts
+++ b/application/src/components/services/hooks/useUptimeData.ts
@@ -1,4 +1,3 @@
-
 import { useState, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { uptimeService } from '@/services/uptimeService';
@@ -14,16 +13,28 @@ interface UseUptimeDataProps {
 export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseUptimeDataProps) => {
   const [historyItems, setHistoryItems] = useState<UptimeData[]>([]);
   
-  // Fetch real uptime history data if serviceId is provided
+  // Fetch real uptime history data if serviceId is provided - filtered for default monitoring with agent_id 1
   const { data: uptimeData, isLoading, error, isFetching, refetch } = useQuery({
     queryKey: ['uptimeHistory', serviceId, serviceType],
-    queryFn: () => {
+    queryFn: async () => {
       if (!serviceId) {
         console.log('No serviceId provided, skipping fetch');
-        return Promise.resolve([]);
+        return [];
       }
-      console.log(`Fetching uptime data for service ${serviceId} of type ${serviceType}`);
-      return uptimeService.getUptimeHistory(serviceId, 50, undefined, undefined, serviceType);
+      console.log(`Fetching uptime data for service ${serviceId} of type ${serviceType} - filtering for default monitoring with agent_id 1`);
+      
+      // Get raw uptime history data
+      const rawData = await uptimeService.getUptimeHistory(serviceId, 50, undefined, undefined, serviceType);
+      
+      // Filter for default monitoring records with agent_id 1 only
+      const filteredData = rawData.filter(record => {
+        // Keep records that either have no regional info (pure default) OR have agent_id 1
+        return (!record.region_name && !record.agent_id) || 
+               (record.agent_id === '1' || record.agent_id === 1);
+      });
+      
+      console.log(`Filtered ${rawData.length} records to ${filteredData.length} records for default monitoring with agent_id 1`);
+      return filteredData;
     },
     enabled: !!serviceId,
     refetchInterval: 30000,
@@ -37,7 +48,7 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
   const processUptimeData = (data: UptimeData[], intervalSeconds: number): UptimeData[] => {
     if (!data || data.length === 0) return [];
     
-    console.log(`Processing ${data.length} uptime records for service ${serviceId}`);
+    console.log(`Processing ${data.length} filtered uptime records for service ${serviceId}`);
     
     // Sort data by timestamp (newest first)
     const sortedData = [...data].sort((a, b) => 
@@ -47,7 +58,7 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
     // Take the most recent 20 records to ensure we have enough data
     const recentData = sortedData.slice(0, 20);
     
-    console.log(`Using ${recentData.length} most recent records`);
+    console.log(`Using ${recentData.length} most recent filtered records`);
     
     return recentData;
   };
@@ -55,12 +66,12 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
   // Update history items when data changes
   useEffect(() => {
     if (uptimeData && uptimeData.length > 0) {
-      console.log(`Received ${uptimeData.length} uptime records for service ${serviceId}`);
+      console.log(`Received ${uptimeData.length} filtered uptime records for service ${serviceId}`);
       const processedData = processUptimeData(uptimeData, interval);
       setHistoryItems(processedData);
     } else if (!serviceId || (uptimeData && uptimeData.length === 0)) {
       // Generate placeholder data when no real data is available
-      console.log(`No uptime data available for service ${serviceId}, generating placeholder`);
+      console.log(`No filtered uptime data available for service ${serviceId}, generating placeholder`);
       
       const statusValue = (status === "up" || status === "down" || status === "warning" || status === "paused") 
         ? status 
@@ -68,8 +79,8 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
         
       const placeholderHistory: UptimeData[] = Array(20).fill(null).map((_, index) => ({
         id: `placeholder-${serviceId}-${index}`,
-        service_id: serviceId || "", // Include service_id
-        serviceId: serviceId || "", // Keep for backward compatibility
+        service_id: serviceId || "",
+        serviceId: serviceId || "",
         timestamp: new Date(Date.now() - (index * interval * 1000)).toISOString(),
         status: statusValue as "up" | "down" | "warning" | "paused",
         responseTime: 0
@@ -97,8 +108,8 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
         
         return {
           id: `padding-${serviceId}-${index}`,
-          service_id: serviceId || "", // Include service_id
-          serviceId: serviceId || "", // Keep for backward compatibility
+          service_id: serviceId || "",
+          serviceId: serviceId || "",
           timestamp: new Date(baseTime - timeOffset).toISOString(),
           status: lastStatus,
           responseTime: 0
diff --git a/application/src/services/serviceService.ts b/application/src/services/serviceService.ts
index 0ed0bf7..fd6c89e 100644
--- a/application/src/services/serviceService.ts
+++ b/application/src/services/serviceService.ts
@@ -32,6 +32,10 @@ export const serviceService = {
         muteAlerts: item.alerts === "muted",  // Convert string to boolean for compatibility
         alerts: item.alerts || "unmuted",     // Store actual database field
         muteChangedAt: item.mute_changed_at,
+        // Regional monitoring fields
+        region_name: item.region_name || "",
+        agent_id: item.agent_id || "",
+        regional_monitoring_enabled: item.regional_monitoring_enabled || false,
       }));
     } catch (error) {
       console.error("Error fetching services:", error);
@@ -58,6 +62,10 @@ export const serviceService = {
         max_retries: params.retries,
         notification_id: params.notificationChannel,
         template_id: params.alertTemplate,
+        // Regional monitoring fields
+        regional_monitoring_enabled: params.regionalMonitoringEnabled || false,
+        region_name: params.regionName || "",
+        agent_id: params.agentId || "",
         // Conditionally add fields based on service type
         ...(serviceType === "dns" 
           ? { domain: params.domain, url: "", host: "", port: null }  // DNS: store in domain field
@@ -90,6 +98,9 @@ export const serviceService = {
         retries: record.max_retries || 3,
         notificationChannel: record.notification_id,
         alertTemplate: record.template_id,
+        regional_monitoring_enabled: record.regional_monitoring_enabled || false,
+        region_name: record.region_name || "",
+        agent_id: record.agent_id || "",
       } as Service;
       
       // Immediately start monitoring for the new service
@@ -117,6 +128,10 @@ export const serviceService = {
         max_retries: params.retries,
         notification_id: params.notificationChannel || null,
         template_id: params.alertTemplate || null,
+        // Regional monitoring fields
+        regional_monitoring_enabled: params.regionalMonitoringEnabled || false,
+        region_name: params.regionName || "",
+        agent_id: params.agentId || "",
         // Conditionally update fields based on service type
         ...(serviceType === "dns" 
           ? { domain: params.domain, url: "", host: "", port: null }  // DNS: update domain field
@@ -156,6 +171,9 @@ export const serviceService = {
         retries: record.max_retries || 3,
         notificationChannel: record.notification_id,
         alertTemplate: record.template_id,
+        regional_monitoring_enabled: record.regional_monitoring_enabled || false,
+        region_name: record.region_name || "",
+        agent_id: record.agent_id || "",
       } as Service;
       
       return updatedService;
diff --git a/application/src/services/uptimeService.ts b/application/src/services/uptimeService.ts
index 10fa139..989895a 100644
--- a/application/src/services/uptimeService.ts
+++ b/application/src/services/uptimeService.ts
@@ -70,7 +70,7 @@ export const uptimeService = {
         return [];
       }
 
-      const cacheKey = `uptime_${serviceId}_${limit}_${startDate?.toISOString() || ''}_${endDate?.toISOString() || ''}_${serviceType || 'default'}`;
+      const cacheKey = `uptime_${serviceId}_${limit}_${startDate?.toISOString() || ''}_${endDate?.toISOString() || ''}_${serviceType || 'default'}_default`;
       
       // Check cache
       const cached = uptimeCache.get(cacheKey);
@@ -81,7 +81,7 @@ export const uptimeService = {
       
       // Determine the correct collection based on service type
       const collection = serviceType ? getCollectionForServiceType(serviceType) : 'uptime_data';
-      console.log(`Fetching uptime history for service ${serviceId} from collection ${collection}, limit: ${limit}`);
+      console.log(`Fetching default uptime history for service ${serviceId} from collection ${collection}, limit: ${limit}`);
       
       // Build filter to get records for specific service_id
       let filter = `service_id='${serviceId}'`;
@@ -102,11 +102,11 @@ export const uptimeService = {
         $cancelKey: `uptime_history_${serviceId}_${Date.now()}`
       };
       
-      console.log(`Filter query: ${filter} on collection: ${collection}`);
+      console.log(`Filter query for default data: ${filter} on collection: ${collection}`);
       
       const response = await pb.collection(collection).getList(1, limit, options);
       
-      console.log(`Fetched ${response.items.length} uptime records for service ${serviceId} from ${collection}`);
+      console.log(`Fetched ${response.items.length} records for service ${serviceId} from ${collection}`);
       
       if (response.items.length > 0) {
         console.log(`Date range in results: ${response.items[response.items.length - 1].timestamp} to ${response.items[0].timestamp}`);
@@ -117,8 +117,8 @@ export const uptimeService = {
       // Transform the response items to UptimeData format
       const uptimeData = response.items.map(item => ({
         id: item.id,
-        service_id: item.service_id, // Include service_id
-        serviceId: item.service_id, // Keep for backward compatibility
+        service_id: item.service_id,
+        serviceId: item.service_id,
         timestamp: item.timestamp,
         status: item.status as "up" | "down" | "warning" | "paused",
         responseTime: item.response_time || 0,
@@ -140,7 +140,7 @@ export const uptimeService = {
       console.error(`Error fetching uptime history for service ${serviceId}:`, error);
       
       // Try to return cached data as fallback
-      const cacheKey = `uptime_${serviceId}_${limit}_${startDate?.toISOString() || ''}_${endDate?.toISOString() || ''}_${serviceType || 'default'}`;
+      const cacheKey = `uptime_${serviceId}_${limit}_${startDate?.toISOString() || ''}_${endDate?.toISOString() || ''}_${serviceType || 'default'}_default`;
       const cached = uptimeCache.get(cacheKey);
       if (cached) {
         console.log(`Using expired cached data for service ${serviceId} due to fetch error`);
@@ -151,5 +151,81 @@ export const uptimeService = {
       console.log(`Returning empty array for service ${serviceId} due to fetch error`);
       return [];
     }
+  },
+
+  async getUptimeHistoryByRegionalAgent(
+    serviceId: string, 
+    limit: number = 50, 
+    startDate?: Date, 
+    endDate?: Date, 
+    serviceType?: string,
+    regionName?: string,
+    agentId?: string
+  ): Promise<UptimeData[]> {
+    try {
+      if (!regionName || !agentId) {
+        console.log('No region name or agent ID provided for regional query');
+        return [];
+      }
+
+      const cacheKey = `uptime_${serviceId}_${limit}_${startDate?.toISOString() || ''}_${endDate?.toISOString() || ''}_${serviceType || 'default'}_${regionName}_${agentId}`;
+      
+      // Check cache
+      const cached = uptimeCache.get(cacheKey);
+      if (cached && (Date.now() - cached.timestamp) < cached.expiresIn) {
+        console.log(`Using cached regional uptime history for service ${serviceId}`);
+        return cached.data;
+      }
+
+      // Determine the correct collection based on service type
+      const collection = serviceType ? getCollectionForServiceType(serviceType) : 'uptime_data';
+      console.log(`Fetching regional uptime history from collection: ${collection} for service: ${serviceId}, region: ${regionName}, agent: ${agentId}`);
+
+      // Build filter for regional agent data
+      let filter = `service_id="${serviceId}" && region_name="${regionName}" && agent_id="${agentId}"`;
+
+      if (startDate && endDate) {
+        const startISO = startDate.toISOString();
+        const endISO = endDate.toISOString();
+        filter += ` && timestamp>="${startISO}" && timestamp<="${endISO}"`;
+      }
+
+      console.log(`Regional filter query: ${filter} on collection: ${collection}`);
+
+      const records = await pb.collection(collection).getList(1, limit, {
+        sort: '-timestamp',
+        filter: filter,
+        $autoCancel: false,
+        $cancelKey: `regional_uptime_history_${serviceId}_${Date.now()}`
+      });
+
+      console.log(`Retrieved ${records.items.length} regional uptime records from ${collection} for region ${regionName}, agent ${agentId}`);
+
+      const uptimeData = records.items.map(item => ({
+        id: item.id,
+        service_id: item.service_id,
+        serviceId: item.service_id,
+        timestamp: item.timestamp,
+        status: item.status as "up" | "down" | "paused" | "warning",
+        responseTime: item.response_time || item.responseTime || 0,
+        error_message: item.error_message,
+        details: item.details,
+        created: item.created,
+        updated: item.updated
+      }));
+
+      // Cache the result
+      uptimeCache.set(cacheKey, {
+        data: uptimeData,
+        timestamp: Date.now(),
+        expiresIn: CACHE_TTL
+      });
+
+      return uptimeData;
+    } catch (error) {
+      const collectionForError = serviceType ? getCollectionForServiceType(serviceType) : 'uptime_data';
+      console.error(`Error fetching regional uptime history from ${collectionForError}:`, error);
+      return [];
+    }
   }
 };
\ No newline at end of file
diff --git a/application/src/types/service.types.ts b/application/src/types/service.types.ts
index b9da956..240732c 100644
--- a/application/src/types/service.types.ts
+++ b/application/src/types/service.types.ts
@@ -1,4 +1,3 @@
-
 export interface Service {
   id: string;
   name: string;
@@ -32,6 +31,10 @@ export interface Service {
   headers?: string;
   body?: string;
   method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS";
+  // Regional monitoring fields
+  region_name?: string;
+  agent_id?: string;
+  regional_monitoring_enabled?: boolean;
 }
 
 export interface CreateServiceParams {
@@ -45,6 +48,10 @@ export interface CreateServiceParams {
   retries: number;
   notificationChannel?: string;
   alertTemplate?: string;
+  // Regional monitoring params
+  regionalMonitoringEnabled?: boolean;
+  regionName?: string;
+  agentId?: string;
 }
 
 export interface UptimeData {
@@ -60,6 +67,9 @@ export interface UptimeData {
   updated?: string;
   date?: string; // Keep for backward compatibility
   uptime?: number; // Keep for backward compatibility
+  // Regional monitoring fields
+  region_name?: string;
+  agent_id?: string | number;
 }
 
 export interface PingData {

From 094f5fcd5e90b1a9070c25316d0d6bfe16f9c568 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Thu, 26 Jun 2025 14:10:30 +0700
Subject: [PATCH 06/10] feat: Add "None" option to notification channel. Adds a
 "None" option to the notification channel dropdown in the Add SSL Certificate
 form. This allows users to opt-out of notifications.

---
 .../ssl-domain/AddSSLCertificateForm.tsx      | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/application/src/components/ssl-domain/AddSSLCertificateForm.tsx b/application/src/components/ssl-domain/AddSSLCertificateForm.tsx
index 3cb0a5e..9b21707 100644
--- a/application/src/components/ssl-domain/AddSSLCertificateForm.tsx
+++ b/application/src/components/ssl-domain/AddSSLCertificateForm.tsx
@@ -1,4 +1,3 @@
-
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -19,7 +18,7 @@ const formSchema = z.object({
   domain: z.string().min(1, "Domain is required"),
   warning_threshold: z.coerce.number().int().min(1).max(365),
   expiry_threshold: z.coerce.number().int().min(1).max(30),
-  notification_channel: z.string().min(1, "Notification channel is required"),
+  notification_channel: z.string().optional(), // Make it optional to allow empty string for "None"
   check_interval: z.coerce.number().int().min(1).max(30).optional()
 });
 
@@ -44,7 +43,7 @@ export const AddSSLCertificateForm = ({
       domain: "",
       warning_threshold: 30,
       expiry_threshold: 7,
-      notification_channel: "",
+      notification_channel: "none",
       check_interval: 1
     }
   });
@@ -66,14 +65,6 @@ export const AddSSLCertificateForm = ({
           return config.enabled === true;
         });
         setAlertConfigs(enabledConfigs);
-        
-        // Set default if available, preferring Telegram channels
-        const telegramChannel = enabledConfigs.find(c => c.notification_type === "telegram");
-        const defaultChannel = telegramChannel || enabledConfigs[0];
-        
-        if (defaultChannel?.id) {
-          form.setValue("notification_channel", defaultChannel.id);
-        }
       } catch (error) {
         console.error("Error fetching notification channels:", error);
         toast.error(t('failedToLoadCertificates'));
@@ -92,7 +83,7 @@ export const AddSSLCertificateForm = ({
         domain: values.domain,
         warning_threshold: values.warning_threshold,
         expiry_threshold: values.expiry_threshold,
-        notification_channel: values.notification_channel,
+        notification_channel: values.notification_channel === "none" ? "" : (values.notification_channel || ""), // Convert "none" to empty string
         check_interval: values.check_interval
       };
       
@@ -180,13 +171,14 @@ export const AddSSLCertificateForm = ({
           render={({ field }) => (
             <FormItem>
               <FormLabel>{t('notificationChannel')}</FormLabel>
-              <Select onValueChange={field.onChange} value={field.value}>
+              <Select onValueChange={field.onChange} value={field.value || "none"}>
                 <FormControl>
                   <SelectTrigger>
                     <SelectValue placeholder={t('chooseChannel')} />
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
+                  <SelectItem value="none">{t('none')}</SelectItem>
                   {alertConfigs.length > 0 ? (
                     alertConfigs.map((config) => (
                       <SelectItem key={config.id} value={config.id || ""}>
@@ -196,13 +188,13 @@ export const AddSSLCertificateForm = ({
                   ) : isLoading ? (
                     <SelectItem value="loading" disabled>{t('loadingChannels')}</SelectItem>
                   ) : (
-                    <SelectItem value="none" disabled>{t('noChannelsFound')}</SelectItem>
+                    <SelectItem value="none-disabled" disabled>{t('noChannelsFound')}</SelectItem>
                   )}
                 </SelectContent>
               </Select>
               <FormDescription className="flex items-center gap-1">
                 <Bell className="h-4 w-4" /> 
-                {t('chooseChannel')}
+                {t('whereToSend')}
               </FormDescription>
               <FormMessage />
             </FormItem>

From 202a09993c07e8cde98aeaa1ffe645f696de34a2 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Thu, 26 Jun 2025 14:17:09 +0700
Subject: [PATCH 07/10] feat: Implement "All Monitoring" option Update the
 service detail page to display all monitoring data (default and regional) in
 separate lines on the graph when "All Monitoring" is selected. Preserve the
 original functionality of other monitoring source options.

---
 application/src/types/service.types.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/application/src/types/service.types.ts b/application/src/types/service.types.ts
index 240732c..e2dbc9a 100644
--- a/application/src/types/service.types.ts
+++ b/application/src/types/service.types.ts
@@ -70,6 +70,8 @@ export interface UptimeData {
   // Regional monitoring fields
   region_name?: string;
   agent_id?: string | number;
+  // Source identifier for multi-source display
+  source?: string;
 }
 
 export interface PingData {

From 7b18a224c1dde5774a0c991a673e34ecce5f305f Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Thu, 26 Jun 2025 14:32:23 +0700
Subject: [PATCH 08/10] Update the service detail page to display all
 monitoring data (default and regional) in separate lines on the graph when
 "All Monitoring" is selected. Preserve the original functionality of other
 monitoring source options.

---
 .../services/RegionalAgentFilter.tsx          |  16 +-
 .../components/services/ResponseTimeChart.tsx | 537 +++++++++++++-----
 .../hooks/useServiceData.tsx                  |  65 ++-
 .../src/components/services/ServiceHeader.tsx |   8 +-
 .../src/components/services/ServiceRow.tsx    |   2 +-
 .../src/components/services/UptimeBar.tsx     | 149 +++--
 .../hooks/useConsolidatedUptimeData.ts        | 209 +++++++
 .../services/hooks/useDefaultUptimeData.ts    | 180 ++++++
 .../services/hooks/useUptimeData.ts           |  67 +--
 .../services/uptime/UptimeSummary.tsx         |   4 +-
 10 files changed, 994 insertions(+), 243 deletions(-)
 create mode 100644 application/src/components/services/hooks/useConsolidatedUptimeData.ts
 create mode 100644 application/src/components/services/hooks/useDefaultUptimeData.ts

diff --git a/application/src/components/services/RegionalAgentFilter.tsx b/application/src/components/services/RegionalAgentFilter.tsx
index 3d5962a..f2396cd 100644
--- a/application/src/components/services/RegionalAgentFilter.tsx
+++ b/application/src/components/services/RegionalAgentFilter.tsx
@@ -2,7 +2,7 @@
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { useQuery } from "@tanstack/react-query";
 import { regionalService } from "@/services/regionalService";
-import { MapPin, Loader2, Globe } from "lucide-react";
+import { MapPin, Loader2, BarChart3 } from "lucide-react";
 
 interface RegionalAgentFilterProps {
   selectedAgent: string;
@@ -19,8 +19,8 @@ export function RegionalAgentFilter({ selectedAgent, onAgentChange }: RegionalAg
   const onlineAgents = regionalAgents.filter(agent => agent.connection === 'online');
 
   const getCurrentAgentDisplay = () => {
-    if (!selectedAgent || selectedAgent === "default") {
-      return "Default Monitoring";
+    if (!selectedAgent || selectedAgent === "all") {
+      return "All Monitoring";
     }
     
     const [regionName] = selectedAgent.split("|");
@@ -32,7 +32,7 @@ export function RegionalAgentFilter({ selectedAgent, onAgentChange }: RegionalAg
       return `${agent.region_name} (${agent.agent_ip_address})`;
     }
     
-    return regionName || "Default Monitoring";
+    return regionName || "All Monitoring";
   };
 
   return (
@@ -43,7 +43,7 @@ export function RegionalAgentFilter({ selectedAgent, onAgentChange }: RegionalAg
       </label>
       <Select 
         onValueChange={onAgentChange} 
-        value={selectedAgent || "default"}
+        value={selectedAgent || "all"}
         disabled={isLoading}
       >
         <SelectTrigger>
@@ -63,10 +63,10 @@ export function RegionalAgentFilter({ selectedAgent, onAgentChange }: RegionalAg
             </SelectItem>
           ) : (
             <>
-              <SelectItem value="default">
+              <SelectItem value="all">
                 <div className="flex items-center gap-2">
-                  <Globe className="h-4 w-4 text-blue-500" />
-                  <span className="font-medium">Default Monitoring</span>
+                  <BarChart3 className="h-4 w-4 text-purple-500" />
+                  <span className="font-medium">All Monitoring</span>
                 </div>
               </SelectItem>
               {onlineAgents.length > 0 && onlineAgents.map((agent) => (
diff --git a/application/src/components/services/ResponseTimeChart.tsx b/application/src/components/services/ResponseTimeChart.tsx
index 1383863..a55c596 100644
--- a/application/src/components/services/ResponseTimeChart.tsx
+++ b/application/src/components/services/ResponseTimeChart.tsx
@@ -1,5 +1,5 @@
 
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from "recharts";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, LineChart, Line } from "recharts";
 import { UptimeData } from "@/types/service.types";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useTheme } from "@/contexts/ThemeContext";
@@ -13,94 +13,290 @@ interface ResponseTimeChartProps {
 export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
   const { theme } = useTheme();
   
+  // Modern color palette for different chart lines (only for All Monitoring)
+  const modernColors = [
+    { stroke: '#3b82f6', fill: 'rgba(59, 130, 246, 0.1)' }, // Blue
+    { stroke: '#10b981', fill: 'rgba(16, 185, 129, 0.1)' }, // Emerald
+    { stroke: '#f59e0b', fill: 'rgba(245, 158, 11, 0.1)' }, // Amber
+    { stroke: '#ef4444', fill: 'rgba(239, 68, 68, 0.1)' }, // Red
+    { stroke: '#8b5cf6', fill: 'rgba(139, 92, 246, 0.1)' }, // Violet
+    { stroke: '#06b6d4', fill: 'rgba(6, 182, 212, 0.1)' }, // Cyan
+    { stroke: '#f97316', fill: 'rgba(249, 115, 22, 0.1)' }, // Orange
+    { stroke: '#84cc16', fill: 'rgba(132, 204, 22, 0.1)' }, // Lime
+  ];
+  
+  // Check if we have data from multiple sources
+  const hasMultipleSources = useMemo(() => {
+    const sources = new Set();
+    uptimeData.forEach(data => {
+      const source = data.source || 'default';
+      sources.add(source);
+    });
+    return sources.size > 1;
+  }, [uptimeData]);
+
   // Format data for the chart with enhanced time formatting
   const chartData = useMemo(() => {
     if (!uptimeData || uptimeData.length === 0) return [];
     
-    // Sort by timestamp ascending (oldest to newest)
-    const sortedData = [...uptimeData].sort((a, b) => 
-      new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
-    );
-    
-    // Get time format based on data density
-    const isShortTimeRange = uptimeData.length > 0 &&
-      (new Date(uptimeData[0].timestamp).getTime() - new Date(uptimeData[uptimeData.length - 1].timestamp).getTime()) < 2 * 60 * 60 * 1000;
-    
-    return sortedData.map(data => {
-      const timestamp = new Date(data.timestamp);
+    if (hasMultipleSources) {
+      // Group data by timestamp for multi-source display
+      const timeGroups = new Map();
       
-      return {
-        time: isShortTimeRange 
-          ? format(timestamp, 'HH:mm:ss') // Include seconds for short time ranges like 60min
-          : format(timestamp, 'HH:mm'),
-        rawTime: timestamp.getTime(),
-        date: format(timestamp, 'MMM dd, yyyy'),
-        value: data.status === "paused" ? null : data.responseTime,
-        status: data.status,
-        // Separate values for different statuses with proper positioning
-        upValue: data.status === "up" ? data.responseTime : null,
-        downValue: data.status === "down" ? data.responseTime : null,
-        warningValue: data.status === "warning" ? data.responseTime : null,
-      };
-    });
-  }, [uptimeData]);
+      uptimeData.forEach(data => {
+        const timestamp = new Date(data.timestamp);
+        // Round to nearest minute for better grouping
+        const roundedTime = new Date(timestamp.getFullYear(), timestamp.getMonth(), timestamp.getDate(), 
+                                   timestamp.getHours(), timestamp.getMinutes());
+        const timeKey = roundedTime.getTime();
+        const source = data.source || 'default';
+        
+        if (!timeGroups.has(timeKey)) {
+          timeGroups.set(timeKey, {
+            time: format(roundedTime, 'HH:mm'),
+            rawTime: timeKey,
+            date: format(roundedTime, 'MMM dd, yyyy'),
+            timestamp: data.timestamp
+          });
+        }
+        
+        const group = timeGroups.get(timeKey);
+        
+        // Handle different data sources properly
+        if (source === 'default') {
+          // Only add pure default if we don't already have regional data with agent_id 1
+          const hasRegionalDefault = uptimeData.some(d => 
+            d.region_name === 'Default' && (d.agent_id === '1' || d.agent_id === 1)
+          );
+          
+          if (!hasRegionalDefault) {
+            group.defaultValue = data.status === "paused" ? null : data.responseTime;
+            group.defaultStatus = data.status;
+          }
+        } else {
+          // Regional monitoring data - distinguish by region and agent
+          const sourceKey = `regional_${source.replace('|', '_')}`;
+          
+          // Group by the same timestamp more accurately
+          const currentValue = group[`${sourceKey}_value`];
+          const newValue = data.status === "paused" ? null : data.responseTime;
+          
+          if (currentValue !== undefined && newValue !== null) {
+            // Average multiple values for the same time slot
+            const count = group[`${sourceKey}_count`] || 1;
+            group[`${sourceKey}_value`] = ((currentValue * count) + newValue) / (count + 1);
+            group[`${sourceKey}_count`] = count + 1;
+          } else if (newValue !== null) {
+            group[`${sourceKey}_value`] = newValue;
+            group[`${sourceKey}_count`] = 1;
+          }
+          
+          group[`${sourceKey}_status`] = data.status;
+          group[`${sourceKey}_label`] = data.region_name || source;
+          group[`${sourceKey}_agent_id`] = data.agent_id;
+        }
+      });
+      
+      return Array.from(timeGroups.values())
+        .sort((a, b) => a.rawTime - b.rawTime)
+        .slice(-50); // Show last 50 data points for better performance
+    } else {
+      // Single source display - use original styling
+      const sortedData = [...uptimeData].sort((a, b) => 
+        new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+      );
+      
+      const isShortTimeRange = uptimeData.length > 0 &&
+        (new Date(uptimeData[0].timestamp).getTime() - new Date(uptimeData[uptimeData.length - 1].timestamp).getTime()) < 2 * 60 * 60 * 1000;
+      
+      return sortedData.map(data => {
+        const timestamp = new Date(data.timestamp);
+        
+        return {
+          time: isShortTimeRange 
+            ? format(timestamp, 'HH:mm:ss')
+            : format(timestamp, 'HH:mm'),
+          rawTime: timestamp.getTime(),
+          date: format(timestamp, 'MMM dd, yyyy'),
+          value: data.status === "paused" ? null : data.responseTime,
+          status: data.status,
+          upValue: data.status === "up" ? data.responseTime : null,
+          downValue: data.status === "down" ? data.responseTime : null,
+          warningValue: data.status === "warning" ? data.responseTime : null,
+        };
+      });
+    }
+  }, [uptimeData, hasMultipleSources]);
   
   // Calculate Y-axis domain for better positioning
   const yAxisDomain = useMemo(() => {
-    if (!chartData.length) return ['dataMin - 10', 'dataMax + 10'];
+    if (!chartData.length) return [0, 100];
     
-    const allValues = chartData
-      .filter(d => d.value !== null && d.status !== 'paused')
-      .map(d => d.value);
+    let allValues: number[] = [];
+    
+    if (hasMultipleSources) {
+      chartData.forEach(d => {
+        Object.keys(d).forEach(key => {
+          if (key.endsWith('_value') || key === 'defaultValue') {
+            const value = d[key as keyof typeof d];
+            if (value !== null && value !== undefined && typeof value === 'number') {
+              allValues.push(value);
+            }
+          }
+        });
+      });
+    } else {
+      allValues = chartData
+        .filter(d => d.value !== null && d.status !== 'paused')
+        .map(d => d.value as number)
+        .filter(v => typeof v === 'number');
+    }
     
     if (allValues.length === 0) return [0, 100];
     
     const minValue = Math.min(...allValues);
     const maxValue = Math.max(...allValues);
-    const padding = (maxValue - minValue) * 0.1 || 10;
+    const padding = Math.max((maxValue - minValue) * 0.1, 10);
     
     return [Math.max(0, minValue - padding), maxValue + padding];
-  }, [chartData]);
+  }, [chartData, hasMultipleSources]);
+
+  // Get unique sources for legend with proper labeling and colors
+  const sources = useMemo(() => {
+    if (!hasMultipleSources) return [];
+    
+    const sourceSet = new Set<string>();
+    const sourceInfo = new Map<string, any>();
+    
+    uptimeData.forEach(data => {
+      const source = data.source || 'default';
+      if (source !== 'default') {
+        sourceSet.add(source);
+        sourceInfo.set(source, data);
+      }
+    });
+    
+    const regionalSources = Array.from(sourceSet).map((source, index) => {
+      const data = sourceInfo.get(source);
+      const [regionName, agentId] = source.split('|');
+      
+      // Create proper label with region and agent info
+      let label = regionName;
+      if (data?.agent_id && data.agent_id !== '1') {
+        label = `${regionName} (${data.agent_id})`;
+      } else if (regionName === 'Default' && data?.agent_id === '1') {
+        label = `Default (Agent 1)`;
+      }
+      
+      const colorIndex = index % modernColors.length;
+      
+      return {
+        key: `regional_${source.replace('|', '_')}`,
+        label: label,
+        stroke: modernColors[colorIndex].stroke,
+        fill: modernColors[colorIndex].fill
+      };
+    });
+
+    // Only add pure default monitoring if we have it AND no regional Default with agent_id 1
+    const hasRegionalDefault = uptimeData.some(data => 
+      data.region_name === 'Default' && (data.agent_id === '1' || data.agent_id === 1)
+    );
+    const hasPureDefault = uptimeData.some(data => data.source === 'default');
+    
+    const defaultSources = (hasPureDefault && !hasRegionalDefault) ? [{
+      key: 'default',
+      label: 'Default',
+      stroke: modernColors[regionalSources.length % modernColors.length].stroke,
+      fill: modernColors[regionalSources.length % modernColors.length].fill
+    }] : [];
+
+    return [...defaultSources, ...regionalSources];
+  }, [uptimeData, hasMultipleSources]);
   
   // Create a custom tooltip for the chart
   const CustomTooltip = ({ active, payload, label }: any) => {
     if (active && payload && payload.length) {
       const data = payload[0].payload;
       
-      // Set background color based on status
-      let statusColor = "bg-emerald-800";
-      let statusText = "Up";
-      
-      if (data.status === "down") {
-        statusColor = "bg-red-800";
-        statusText = "Down";
-      } else if (data.status === "warning") {
-        statusColor = "bg-yellow-800";
-        statusText = "Warning";
-      } else if (data.status === "paused") {
-        statusColor = "bg-gray-800";
-        statusText = "Paused";
-      }
-      
       return (
-        <div className={`${theme === 'dark' ? 'bg-gray-900' : 'bg-white'} p-2 border ${theme === 'dark' ? 'border-gray-700' : 'border-gray-200'} rounded shadow-md`}>
-          <p className="text-sm font-medium">{label}</p>
-          <p className="text-xs text-muted-foreground">{data.date}</p>
-          <div className={`flex items-center gap-2 mt-1 ${data.status === "paused" ? "opacity-70" : ""}`}>
-            <div className={`w-3 h-3 rounded-full ${statusColor}`}></div>
-            <span>{statusText}</span>
-          </div>
-          <p className="mt-1 font-mono text-sm">
-            {data.status === "paused" ? "Monitoring paused" : 
-             data.value !== null ? `${data.value} ms` : "No data"}
-          </p>
+        <div className={`${theme === 'dark' ? 'bg-gray-900' : 'bg-white'} p-3 border ${theme === 'dark' ? 'border-gray-700' : 'border-gray-200'} rounded shadow-md min-w-48`}>
+          <p className="text-sm font-medium">{String(label)}</p>
+          <p className="text-xs text-muted-foreground mb-2">{String(data.date)}</p>
+          
+          {hasMultipleSources ? (
+            // Multi-source tooltip
+            <div className="space-y-2">
+              {sources.map(source => {
+                const valueKey = source.key === 'default' ? 'defaultValue' : `${source.key}_value`;
+                const statusKey = source.key === 'default' ? 'defaultStatus' : `${source.key}_status`;
+                const value = data[valueKey];
+                const status = data[statusKey];
+                
+                if (value === undefined && status === undefined) return null;
+                
+                let statusColor = "bg-gray-800";
+                let statusText = "No Data";
+                
+                if (status === "up") {
+                  statusColor = "bg-emerald-800";
+                  statusText = "Up";
+                } else if (status === "down") {
+                  statusColor = "bg-red-800";
+                  statusText = "Down";
+                } else if (status === "warning") {
+                  statusColor = "bg-yellow-800";
+                  statusText = "Warning";
+                } else if (status === "paused") {
+                  statusColor = "bg-gray-800";
+                  statusText = "Paused";
+                }
+                
+                return (
+                  <div key={source.key} className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div 
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: source.stroke }}
+                      ></div>
+                      <span className="text-xs">{String(source.label)}</span>
+                    </div>
+                    <div className="text-xs font-mono">
+                      {status === "paused" ? "Paused" : 
+                       value !== null && value !== undefined ? `${value} ms` : "No data"}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            // Single source tooltip - showing status with color
+            <>
+              <div className={`flex items-center gap-2 mt-1 ${data.status === "paused" ? "opacity-70" : ""}`}>
+                <div className={`w-3 h-3 rounded-full ${
+                  data.status === "up" ? "bg-emerald-800" :
+                  data.status === "down" ? "bg-red-800" :
+                  data.status === "warning" ? "bg-yellow-800" : "bg-gray-800"
+                }`}></div>
+                <span>{
+                  data.status === "up" ? "Up" :
+                  data.status === "down" ? "Down" :
+                  data.status === "warning" ? "Warning" : "Paused"
+                }</span>
+              </div>
+              <p className="mt-1 font-mono text-sm">
+                {data.status === "paused" ? "Monitoring paused" : 
+                 data.value !== null ? `${data.value} ms` : "No data"}
+              </p>
+            </>
+          )}
         </div>
       );
     }
     return null;
   };
 
-  // Check if we have any data to display - be more lenient by checking raw uptimeData
+  // Check if we have any data to display
   const hasData = uptimeData.length > 0;
   
   // Get date range for display
@@ -130,6 +326,19 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
             </span>
           )}
         </CardTitle>
+        {hasMultipleSources && (
+          <div className="flex flex-wrap gap-4 text-sm">
+            {sources.map(source => (
+              <div key={source.key} className="flex items-center gap-2">
+                <div 
+                  className="w-3 h-3 rounded-full" 
+                  style={{ backgroundColor: source.stroke }}
+                ></div>
+                <span>{String(source.label)}</span>
+              </div>
+            ))}
+          </div>
+        )}
       </CardHeader>
       <CardContent>
         {!hasData ? (
@@ -139,82 +348,140 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
         ) : (
           <div className="h-80">
             <ResponsiveContainer width="100%" height="100%">
-              <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 30 }}>
-                <defs>
-                  <linearGradient id="colorUp" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#10b981" stopOpacity={0.8}/>
-                    <stop offset="95%" stopColor="#10b981" stopOpacity={0.2}/>
-                  </linearGradient>
-                  <linearGradient id="colorDown" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#ef4444" stopOpacity={0.8}/>
-                    <stop offset="95%" stopColor="#ef4444" stopOpacity={0.2}/>
-                  </linearGradient>
-                  <linearGradient id="colorWarning" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.8}/>
-                    <stop offset="95%" stopColor="#f59e0b" stopOpacity={0.2}/>
-                  </linearGradient>
-                </defs>
-                <CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#333' : '#e5e7eb'} />
-                <XAxis 
-                  dataKey="time" 
-                  stroke={theme === 'dark' ? '#666' : '#9ca3af'}
-                  angle={-45}
-                  textAnchor="end"
-                  tick={{ fontSize: 10 }}
-                  height={60}
-                  interval="preserveStartEnd"
-                  minTickGap={5}
-                />
-                <YAxis 
-                  stroke={theme === 'dark' ? '#666' : '#9ca3af'} 
-                  allowDecimals={false}
-                  domain={yAxisDomain}
-                />
-                <Tooltip content={<CustomTooltip />} />
-                
-                {/* Separate area charts for each status - positioned closer together */}
-                <Area 
-                  type="monotone" 
-                  dataKey="upValue"
-                  stroke="#10b981" 
-                  strokeWidth={2}
-                  fillOpacity={0.4}
-                  fill="url(#colorUp)" 
-                  connectNulls={false}
-                />
-                
-                <Area 
-                  type="monotone" 
-                  dataKey="downValue"
-                  stroke="#ef4444" 
-                  strokeWidth={2}
-                  fillOpacity={0.4}
-                  fill="url(#colorDown)" 
-                  connectNulls={false}
-                />
-                
-                <Area 
-                  type="monotone" 
-                  dataKey="warningValue"
-                  stroke="#f59e0b" 
-                  strokeWidth={2}
-                  fillOpacity={0.4}
-                  fill="url(#colorWarning)" 
-                  connectNulls={false}
-                />
-                
-                {/* Add reference lines for paused periods */}
-                {chartData.map((entry, index) => 
-                  entry.status === 'paused' ? (
-                    <ReferenceLine 
-                      key={`ref-${index}`}
-                      x={entry.time} 
-                      stroke="#9ca3af"
-                      strokeDasharray="3 3"
+              {hasMultipleSources ? (
+                <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 30 }}>
+                  <defs>
+                    {sources.map(source => (
+                      <linearGradient key={`gradient-${source.key}`} id={`gradient-${source.key}`} x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%" stopColor={source.stroke} stopOpacity={0.3}/>
+                        <stop offset="95%" stopColor={source.stroke} stopOpacity={0.05}/>
+                      </linearGradient>
+                    ))}
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#333' : '#e5e7eb'} />
+                  <XAxis 
+                    dataKey="time" 
+                    stroke={theme === 'dark' ? '#666' : '#9ca3af'}
+                    angle={-45}
+                    textAnchor="end"
+                    tick={{ fontSize: 10 }}
+                    height={60}
+                    interval="preserveStartEnd"
+                    minTickGap={5}
+                  />
+                  <YAxis 
+                    stroke={theme === 'dark' ? '#666' : '#9ca3af'} 
+                    allowDecimals={false}
+                    domain={yAxisDomain}
+                  />
+                  <Tooltip content={<CustomTooltip />} />
+                  
+                  {/* Default monitoring area with modern background - only if exists and no regional default */}
+                  {sources.find(s => s.key === 'default') && (
+                    <Area
+                      type="monotone"
+                      dataKey="defaultValue"
+                      stroke={sources.find(s => s.key === 'default')?.stroke}
+                      fill={`url(#gradient-default)`}
+                      strokeWidth={2.5}
+                      dot={false}
+                      connectNulls={false}
+                    />
+                  )}
+                  
+                  {/* Regional monitoring areas with modern backgrounds */}
+                  {sources.filter(s => s.key !== 'default').map((source) => (
+                    <Area
+                      key={source.key}
+                      type="monotone" 
+                      dataKey={`${source.key}_value`}
+                      stroke={source.stroke}
+                      fill={`url(#gradient-${source.key})`}
+                      strokeWidth={2.5}
+                      dot={false}
+                      connectNulls={false}
                     />
-                  ) : null
-                )}
-              </AreaChart>
+                  ))}
+                </AreaChart>
+              ) : (
+                // For single regional agent or default monitoring only - use original AreaChart styling
+                <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 30 }}>
+                  <defs>
+                    <linearGradient id="colorUp" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#10b981" stopOpacity={0.3}/>
+                      <stop offset="95%" stopColor="#10b981" stopOpacity={0.05}/>
+                    </linearGradient>
+                    <linearGradient id="colorDown" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#ef4444" stopOpacity={0.3}/>
+                      <stop offset="95%" stopColor="#ef4444" stopOpacity={0.05}/>
+                    </linearGradient>
+                    <linearGradient id="colorWarning" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.3}/>
+                      <stop offset="95%" stopColor="#f59e0b" stopOpacity={0.05}/>
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#333' : '#e5e7eb'} />
+                  <XAxis 
+                    dataKey="time" 
+                    stroke={theme === 'dark' ? '#666' : '#9ca3af'}
+                    angle={-45}
+                    textAnchor="end"
+                    tick={{ fontSize: 10 }}
+                    height={60}
+                    interval="preserveStartEnd"
+                    minTickGap={5}
+                  />
+                  <YAxis 
+                    stroke={theme === 'dark' ? '#666' : '#9ca3af'} 
+                    allowDecimals={false}
+                    domain={yAxisDomain}
+                  />
+                  <Tooltip content={<CustomTooltip />} />
+                  
+                  {/* Original area charts for different statuses with background colors */}
+                  <Area 
+                    type="monotone" 
+                    dataKey="upValue"
+                    stroke="#10b981"
+                    fill="url(#colorUp)"
+                    strokeWidth={2.5}
+                    dot={false}
+                    connectNulls={false}
+                  />
+                  
+                  <Area 
+                    type="monotone" 
+                    dataKey="downValue"
+                    stroke="#ef4444"
+                    fill="url(#colorDown)"
+                    strokeWidth={2.5}
+                    dot={false}
+                    connectNulls={false}
+                  />
+                  
+                  <Area 
+                    type="monotone" 
+                    dataKey="warningValue"
+                    stroke="#f59e0b"
+                    fill="url(#colorWarning)"
+                    strokeWidth={2.5}
+                    dot={false}
+                    connectNulls={false}
+                  />
+                  
+                  {/* Reference lines for paused status */}
+                  {chartData.map((entry, index) => 
+                    entry.status === 'paused' ? (
+                      <ReferenceLine 
+                        key={`ref-${index}`}
+                        x={entry.time} 
+                        stroke="#9ca3af"
+                        strokeDasharray="3 3"
+                      />
+                    ) : null
+                  )}
+                </AreaChart>
+              )}
             </ResponsiveContainer>
           </div>
         )}
diff --git a/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx b/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx
index 3dd01b5..3c96d7f 100644
--- a/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx
+++ b/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx
@@ -1,4 +1,3 @@
-
 import { useState, useEffect } from "react";
 import { pb } from "@/lib/pocketbase";
 import { Service, UptimeData } from "@/types/service.types";
@@ -6,15 +5,24 @@ import { useToast } from "@/hooks/use-toast";
 import { useNavigate } from "react-router-dom";
 import { uptimeService } from "@/services/uptimeService";
 import { DateRangeOption } from "../../DateRangeFilter";
+import { useQuery } from "@tanstack/react-query";
+import { regionalService } from "@/services/regionalService";
 
 export const useServiceData = (serviceId: string | undefined, startDate: Date, endDate: Date) => {
   const [service, setService] = useState<Service | null>(null);
   const [uptimeData, setUptimeData] = useState<UptimeData[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [selectedRegionalAgent, setSelectedRegionalAgent] = useState<string>("default");
+  const [selectedRegionalAgent, setSelectedRegionalAgent] = useState<string>("all");
   const { toast } = useToast();
   const navigate = useNavigate();
 
+  // Get regional agents for "all" monitoring
+  const { data: regionalAgents = [] } = useQuery({
+    queryKey: ['regional-services'],
+    queryFn: regionalService.getRegionalServices,
+    enabled: selectedRegionalAgent === "all"
+  });
+
   const handleStatusChange = async (newStatus: "up" | "down" | "paused" | "warning") => {
     if (!service || !serviceId) return;
 
@@ -66,11 +74,50 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
       
       let history: UptimeData[] = [];
       
-      if (currentAgent === "default") {
-        // Fetch default monitoring data - this will automatically filter out regional records
-        console.log(`Fetching default monitoring data from ${service.type} collection`);
-        history = await uptimeService.getUptimeHistory(serviceId, limit, start, end, service.type);
-        console.log(`Retrieved ${history.length} default monitoring records`);
+      if (currentAgent === "all") {
+        // Fetch data from all sources (default + all online regional agents)
+        console.log(`Fetching data from all monitoring sources`);
+        
+        // Fetch default monitoring data
+        const defaultData = await uptimeService.getUptimeHistory(serviceId, limit, start, end, service.type);
+        console.log(`Retrieved ${defaultData.length} default monitoring records`);
+        
+        // Mark default data with source identifier
+        const markedDefaultData = defaultData.map(record => ({
+          ...record,
+          source: 'default' as const,
+          region_name: undefined,
+          agent_id: undefined
+        }));
+        
+        history = [...markedDefaultData];
+        
+        // Fetch regional monitoring data from all online agents
+        const onlineAgents = regionalAgents.filter(agent => agent.connection === 'online');
+        
+        for (const agent of onlineAgents) {
+          try {
+            const regionalData = await uptimeService.getUptimeHistoryByRegionalAgent(
+              serviceId, limit, start, end, service.type, agent.region_name, agent.agent_id
+            );
+            console.log(`Retrieved ${regionalData.length} records from ${agent.region_name}`);
+            
+            // Mark regional data with source identifier
+            const markedRegionalData = regionalData.map(record => ({
+              ...record,
+              source: `${agent.region_name}|${agent.agent_id}` as const,
+              region_name: agent.region_name,
+              agent_id: agent.agent_id
+            }));
+            
+            history = [...history, ...markedRegionalData];
+          } catch (error) {
+            console.error(`Error fetching data from ${agent.region_name}:`, error);
+          }
+        }
+        
+        console.log(`Total combined records: ${history.length}`);
+        
       } else {
         // Fetch regional agent specific data
         const [regionName, agentId] = currentAgent.split("|");
@@ -84,7 +131,7 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
         new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
       );
       
-      console.log(`Final dataset: ${filteredHistory.length} records for ${currentAgent === "default" ? "default" : "regional"} monitoring`);
+      console.log(`Final dataset: ${filteredHistory.length} records for ${currentAgent === "all" ? "all sources" : "regional"} monitoring`);
       setUptimeData(filteredHistory);
       return filteredHistory;
     } catch (error) {
@@ -176,7 +223,7 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
       console.log(`Date range changed or service loaded, refetching data for ${serviceId}: ${startDate.toISOString()} to ${endDate.toISOString()}`);
       fetchUptimeData(serviceId, startDate, endDate, '24h', selectedRegionalAgent);
     }
-  }, [startDate, endDate, serviceId, isLoading, service, selectedRegionalAgent]);
+  }, [startDate, endDate, serviceId, isLoading, service, selectedRegionalAgent, regionalAgents]);
 
   return {
     service,
diff --git a/application/src/components/services/ServiceHeader.tsx b/application/src/components/services/ServiceHeader.tsx
index 7166ecf..5016297 100644
--- a/application/src/components/services/ServiceHeader.tsx
+++ b/application/src/components/services/ServiceHeader.tsx
@@ -1,5 +1,5 @@
 
-import { ArrowLeft, Globe, MoreVertical, FileText, Github, Twitter, MessageSquare, Bell } from "lucide-react";
+import { ArrowLeft, Globe } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { StatusBadge } from "@/components/services/StatusBadge";
@@ -79,17 +79,13 @@ export function ServiceHeader({
         
         <div className="flex items-center space-x-4">
           <StatusBadge status={service.status} size="lg" />
+          <ServiceMonitoringButton service={service} onStatusChange={onStatusChange} />
           {selectedRegionalAgent !== undefined && onRegionalAgentChange && (
             <RegionalAgentFilter 
               selectedAgent={selectedRegionalAgent}
               onAgentChange={onRegionalAgentChange}
             />
           )}
-          <ServiceMonitoringButton service={service} onStatusChange={onStatusChange} />
-          <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border">
-            <span className="sr-only">More options</span>
-            <MoreVertical className="w-4 h-4" />
-          </Button>
         </div>
       </div>
     </div>
diff --git a/application/src/components/services/ServiceRow.tsx b/application/src/components/services/ServiceRow.tsx
index a07dfaf..1340e87 100644
--- a/application/src/components/services/ServiceRow.tsx
+++ b/application/src/components/services/ServiceRow.tsx
@@ -55,7 +55,7 @@ export const ServiceRow = ({
       <TableCell className="py-4">
         <ServiceRowResponseTime responseTime={service.responseTime} />
       </TableCell>
-      <TableCell className="w-52 py-4">
+      <TableCell className="w-60 py-4">
         <UptimeBar 
           uptime={service.uptime} 
           status={service.status} 
diff --git a/application/src/components/services/UptimeBar.tsx b/application/src/components/services/UptimeBar.tsx
index d7854a9..1c00ffe 100644
--- a/application/src/components/services/UptimeBar.tsx
+++ b/application/src/components/services/UptimeBar.tsx
@@ -1,52 +1,137 @@
 
 import React from "react";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import { useUptimeData } from "./hooks/useUptimeData";
-import { UptimeStatusItem } from "./uptime/UptimeStatusItem";
+import { useConsolidatedUptimeData } from "./hooks/useConsolidatedUptimeData";
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { UptimeSummary } from "./uptime/UptimeSummary";
-import { UptimeLoadingState } from "./uptime/UptimeLoadingState";
-import { UptimeErrorState } from "./uptime/UptimeErrorState";
+import { formatRelative } from "date-fns";
 
 interface UptimeBarProps {
   uptime: number;
   status: string;
-  serviceId?: string;
-  interval?: number; // Service monitoring interval in seconds
-  serviceType?: string; // Add service type for proper data fetching
+  serviceId: string;
+  interval: number;
+  serviceType?: string;
 }
 
-export const UptimeBar = ({ uptime, status, serviceId, interval = 60, serviceType }: UptimeBarProps) => {
-  const { displayItems, isLoading, error, isFetching, refetch } = useUptimeData({
+export const UptimeBar = ({ uptime, status, serviceId, interval, serviceType }: UptimeBarProps) => {
+  // Use consolidated hook to get properly merged data
+  const { consolidatedItems, isLoading } = useConsolidatedUptimeData({
     serviceId,
     serviceType,
     status,
     interval
   });
 
-  // If still loading and no history, show improved loading state
-  if ((isLoading || isFetching) && displayItems.length === 0) {
-    return <UptimeLoadingState />;
-  }
-  
-  // If there's an error and no history, show improved error state with retry button
-  if (error && displayItems.length === 0) {
-    return <UptimeErrorState uptime={uptime} onRetry={refetch} />;
-  }
-  
-  return (
-    <TooltipProvider delayDuration={300}>
-      <div className="flex flex-col w-full gap-1">
-        <div className="flex items-center space-x-0.5 w-full h-6">
-          {displayItems.map((item, index) => (
-            <UptimeStatusItem 
-              key={item.id || `status-${index}`} 
-              item={item} 
-              index={index}
-            />
+  const getStatusColor = (itemStatus: string, hasData: boolean = true) => {
+    if (!hasData) {
+      return "bg-gray-300"; // No data color
+    }
+    
+    switch (itemStatus) {
+      case "up":
+        return "bg-emerald-500";
+      case "down":
+        return "bg-red-500";
+      case "warning":
+        return "bg-yellow-500";
+      case "paused":
+        return "bg-gray-500"; // Distinct paused color (darker grey)
+      default:
+        return "bg-gray-300"; // Default fallback
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="w-52">
+        <div className="flex items-center gap-1">
+          {Array(20).fill(null).map((_, index) => (
+            <div key={index} className="h-6 w-1 bg-gray-200 rounded animate-pulse" />
           ))}
         </div>
         <UptimeSummary uptime={uptime} interval={interval} />
       </div>
-    </TooltipProvider>
+    );
+  }
+
+  console.log('UptimeBar rendering consolidated items:', consolidatedItems.length);
+
+  return (
+    <div className="w-52">
+      <TooltipProvider>
+        <div className="flex items-center gap-1">
+          {consolidatedItems.map((slot, index) => {
+            // Check if we have actual monitoring data with valid status
+            const hasValidData = slot.items.length > 0 && slot.items.some(item => 
+              item.status && ['up', 'down', 'warning', 'paused'].includes(item.status)
+            );
+
+            // Determine the primary status for bar color (prioritize worst status)
+            let primaryStatus = 'unknown';
+            if (hasValidData) {
+              const statuses = slot.items.map(item => item.status);
+              primaryStatus = statuses.includes('down') ? 'down' :
+                            statuses.includes('warning') ? 'warning' :
+                            statuses.includes('up') ? 'up' : 
+                            statuses.includes('paused') ? 'paused' : 'unknown';
+            }
+
+            console.log(`Bar ${index} - Timestamp: ${slot.timestamp}, Items: ${slot.items.length}, Primary Status: ${primaryStatus}, Has Valid Data: ${hasValidData}`);
+            slot.items.forEach((item, itemIndex) => {
+              console.log(`  Item ${itemIndex}: Source=${item.source}, Status=${item.status}, ResponseTime=${item.responseTime}, IsDefault=${item.isDefault}`);
+            });
+
+            return (
+              <Tooltip key={index}>
+                <TooltipTrigger asChild>
+                  <div 
+                    className={`h-6 w-1 rounded cursor-pointer ${getStatusColor(primaryStatus, hasValidData)}`}
+                  />
+                </TooltipTrigger>
+                <TooltipContent side="top" className="max-w-xs">
+                  <div className="text-sm">
+                    <div className="font-medium mb-2 text-center">
+                      {formatRelative(new Date(slot.timestamp), new Date())}
+                    </div>
+                    {hasValidData ? (
+                      <div className="space-y-2">
+                        {slot.items.map((item, itemIndex) => (
+                          <div key={itemIndex} className="flex items-center justify-between gap-3">
+                            <div className="flex items-center gap-2 min-w-0">
+                              <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
+                                item.status === 'up' ? 'bg-emerald-500' :
+                                item.status === 'down' ? 'bg-red-500' :
+                                item.status === 'warning' ? 'bg-yellow-500' : 
+                                item.status === 'paused' ? 'bg-gray-500' : 'bg-gray-300'
+                              }`} />
+                              <span className="text-xs font-medium truncate">{item.source}</span>
+                            </div>
+                            <div className="text-xs font-mono text-right flex-shrink-0">
+                              {item.status === 'paused' ? 'Paused' :
+                               item.responseTime && item.responseTime > 0 ? `${item.responseTime}ms` : 
+                               'No response'}
+                            </div>
+                          </div>
+                        ))}
+                        {slot.items.length > 1 && (
+                          <div className="border-t pt-1 mt-2 text-xs text-muted-foreground text-center">
+                            {slot.items.length} monitoring sources
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="text-xs text-muted-foreground text-center">
+                        No monitoring data available
+                      </div>
+                    )}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </div>
+      </TooltipProvider>
+      <UptimeSummary uptime={uptime} interval={interval} />
+    </div>
   );
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/application/src/components/services/hooks/useConsolidatedUptimeData.ts b/application/src/components/services/hooks/useConsolidatedUptimeData.ts
new file mode 100644
index 0000000..06a1f07
--- /dev/null
+++ b/application/src/components/services/hooks/useConsolidatedUptimeData.ts
@@ -0,0 +1,209 @@
+
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { uptimeService } from '@/services/uptimeService';
+import { UptimeData } from '@/types/service.types';
+
+interface UseConsolidatedUptimeDataProps {
+  serviceId?: string;
+  serviceType?: string;
+  status: string;
+  interval: number;
+}
+
+interface ConsolidatedTimeSlot {
+  timestamp: string;
+  items: Array<UptimeData & { source: string; isDefault: boolean }>;
+}
+
+// Helper function to safely check if a PocketBase field is actually undefined/null
+const isFieldEmpty = (field: any): boolean => {
+  if (field === undefined || field === null) return true;
+  if (typeof field === 'object' && field._type === 'undefined') return true;
+  if (typeof field === 'string' && (field === '' || field === 'undefined')) return true;
+  return false;
+};
+
+// Helper function to safely get field value from PocketBase
+const getFieldValue = (field: any): string | number | null => {
+  if (isFieldEmpty(field)) return null;
+  if (typeof field === 'object' && field.value !== undefined) return field.value;
+  return field;
+};
+
+// Helper function to normalize timestamp to minute precision
+const normalizeTimestamp = (timestamp: string): string => {
+  const date = new Date(timestamp);
+  // Round down to the nearest minute
+  date.setSeconds(0, 0);
+  return date.toISOString();
+};
+
+export const useConsolidatedUptimeData = ({ serviceId, serviceType, status, interval }: UseConsolidatedUptimeDataProps) => {
+  const [consolidatedItems, setConsolidatedItems] = useState<ConsolidatedTimeSlot[]>([]);
+  
+  // Fetch ALL uptime history data in a single query
+  const { data: uptimeData, isLoading, error, isFetching, refetch } = useQuery({
+    queryKey: ['consolidatedUptimeHistory', serviceId, serviceType],
+    queryFn: async () => {
+      if (!serviceId) {
+        console.log('No serviceId provided, skipping fetch');
+        return [];
+      }
+      console.log(`Fetching consolidated uptime data for service ${serviceId} of type ${serviceType}`);
+      
+      // Get ALL uptime history data - this should include both default and regional data
+      const rawData = await uptimeService.getUptimeHistory(serviceId, 100, undefined, undefined, serviceType);
+      
+      console.log(`Retrieved ${rawData.length} total records for service ${serviceId}`);
+      console.log('Raw data sample:', rawData.slice(0, 5).map(d => ({
+        timestamp: d.timestamp,
+        region_name: d.region_name,
+        agent_id: d.agent_id,
+        status: d.status,
+        service_id: d.service_id,
+        response_time: d.responseTime
+      })));
+      
+      return rawData;
+    },
+    enabled: !!serviceId,
+    refetchInterval: 30000,
+    staleTime: 15000,
+    placeholderData: (previousData) => previousData,
+    retry: 3,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+  });
+  
+  // Process and consolidate uptime data
+  const processConsolidatedData = (data: UptimeData[]): ConsolidatedTimeSlot[] => {
+    if (!data || data.length === 0) return [];
+    
+    console.log(`Processing ${data.length} uptime records for consolidation`);
+    
+    // Create a map to group records by normalized timestamp (minute precision)
+    const timeSlotMap = new Map<string, Array<UptimeData & { source: string; isDefault: boolean }>>();
+    
+    data.forEach(record => {
+      // Normalize timestamp to minute precision to avoid duplicate bars
+      const normalizedTimestamp = normalizeTimestamp(record.timestamp);
+      
+      // Safely extract region and agent information
+      const regionName = getFieldValue(record.region_name);
+      const agentId = getFieldValue(record.agent_id);
+      
+      // Determine the source name and whether it's default monitoring
+      let sourceName: string;
+      let isDefault: boolean;
+      
+      if (regionName && agentId) {
+        // Regional monitoring data
+        sourceName = `${regionName} (Agent ${agentId})`;
+        isDefault = false;
+        console.log(`Found regional data: ${sourceName} for normalized timestamp ${normalizedTimestamp}`);
+      } else if (agentId && !regionName) {
+        // Default monitoring with specific agent
+        sourceName = `Default (Agent ${agentId})`;
+        isDefault = true;
+        console.log(`Found default monitoring: ${sourceName} for normalized timestamp ${normalizedTimestamp}`);
+      } else {
+        // Default monitoring fallback
+        sourceName = 'Default (Agent 1)';
+        isDefault = true;
+        console.log(`Using fallback default monitoring for normalized timestamp ${normalizedTimestamp}`);
+      }
+      
+      // Get or create the array for this normalized timestamp
+      if (!timeSlotMap.has(normalizedTimestamp)) {
+        timeSlotMap.set(normalizedTimestamp, []);
+      }
+      
+      // Check if we already have an entry from this source for this time slot
+      const existingItems = timeSlotMap.get(normalizedTimestamp)!;
+      const existingFromSource = existingItems.find(item => item.source === sourceName);
+      
+      if (!existingFromSource) {
+        // Add the record with source information only if we don't already have one from this source
+        timeSlotMap.get(normalizedTimestamp)!.push({
+          ...record,
+          timestamp: normalizedTimestamp, // Use normalized timestamp
+          source: sourceName,
+          isDefault
+        });
+        
+        console.log(`Added record to normalized timestamp ${normalizedTimestamp}: Source=${sourceName}, Status=${record.status}, IsDefault=${isDefault}, ResponseTime=${record.responseTime}ms`);
+      } else {
+        console.log(`Skipping duplicate record for source ${sourceName} at timestamp ${normalizedTimestamp}`);
+      }
+    });
+    
+    // Convert map to consolidated time slots and sort by timestamp (newest first)
+    const consolidatedTimeline: ConsolidatedTimeSlot[] = Array.from(timeSlotMap.entries())
+      .map(([timestamp, items]) => ({
+        timestamp,
+        items: items.sort((a, b) => {
+          // Sort so default monitoring appears first
+          if (a.isDefault && !b.isDefault) return -1;
+          if (!a.isDefault && b.isDefault) return 1;
+          return 0;
+        })
+      }))
+      .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+      .slice(0, 20); // Take the most recent 20 time slots
+    
+    console.log(`Created ${consolidatedTimeline.length} consolidated time slots with normalized timestamps`);
+    consolidatedTimeline.forEach((slot, index) => {
+      console.log(`Slot ${index} - Normalized Timestamp: ${slot.timestamp}, Items: ${slot.items.length}`);
+      slot.items.forEach((item, itemIndex) => {
+        console.log(`  Item ${itemIndex}: Source=${item.source}, Status=${item.status}, ResponseTime=${item.responseTime}ms, IsDefault=${item.isDefault}`);
+      });
+    });
+    
+    return consolidatedTimeline;
+  };
+  
+  // Update consolidated items when data changes
+  useEffect(() => {
+    if (uptimeData && uptimeData.length > 0) {
+      console.log(`Processing consolidated uptime data for service ${serviceId}`);
+      const processedData = processConsolidatedData(uptimeData);
+      setConsolidatedItems(processedData);
+    } else if (!serviceId || (uptimeData && uptimeData.length === 0)) {
+      // Generate placeholder data when no real data is available
+      console.log(`No uptime data available for service ${serviceId}, generating placeholder`);
+      
+      const statusValue = (status === "up" || status === "down" || status === "warning" || status === "paused") 
+        ? status 
+        : "paused";
+        
+      const placeholderHistory: ConsolidatedTimeSlot[] = Array(20).fill(null).map((_, index) => {
+        const timestamp = new Date(Date.now() - (index * interval * 1000));
+        timestamp.setSeconds(0, 0); // Normalize to minute precision
+        
+        return {
+          timestamp: timestamp.toISOString(),
+          items: [{
+            id: `placeholder-${serviceId}-${index}`,
+            service_id: serviceId || "",
+            serviceId: serviceId || "",
+            timestamp: timestamp.toISOString(),
+            status: statusValue as "up" | "down" | "warning" | "paused",
+            responseTime: 0,
+            source: 'Default (Agent 1)',
+            isDefault: true
+          }]
+        };
+      });
+      
+      setConsolidatedItems(placeholderHistory);
+    }
+  }, [uptimeData, serviceId, status, interval]);
+
+  return {
+    consolidatedItems,
+    isLoading,
+    error,
+    isFetching,
+    refetch
+  };
+};
\ No newline at end of file
diff --git a/application/src/components/services/hooks/useDefaultUptimeData.ts b/application/src/components/services/hooks/useDefaultUptimeData.ts
new file mode 100644
index 0000000..498bb76
--- /dev/null
+++ b/application/src/components/services/hooks/useDefaultUptimeData.ts
@@ -0,0 +1,180 @@
+
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { uptimeService } from '@/services/uptimeService';
+import { UptimeData } from '@/types/service.types';
+
+interface UseDefaultUptimeDataProps {
+  serviceId?: string;
+  serviceType?: string;
+  status: string;
+  interval: number;
+}
+
+export const useDefaultUptimeData = ({ serviceId, serviceType, status, interval }: UseDefaultUptimeDataProps) => {
+  const [historyItems, setHistoryItems] = useState<UptimeData[]>([]);
+  
+  // Fetch ONLY Default (Agent ID 1) uptime history data - NO regional data whatsoever
+  const { data: uptimeData, isLoading, error, isFetching, refetch } = useQuery({
+    queryKey: ['strictDefaultUptimeHistory', serviceId, serviceType],
+    queryFn: async () => {
+      if (!serviceId) {
+        console.log('No serviceId provided, skipping fetch');
+        return [];
+      }
+      console.log(`Fetching STRICT Default (Agent ID 1) uptime data for service ${serviceId} of type ${serviceType}`);
+      
+      // Get raw uptime history data
+      const rawData = await uptimeService.getUptimeHistory(serviceId, 50, undefined, undefined, serviceType);
+      
+      // ULTRA-STRICT filtering: ONLY Default monitoring records (Agent ID 1)
+      // This means: NO region_name, NO agent_id, NO regional monitoring whatsoever
+      const strictDefaultData = rawData.filter(record => {
+        // Must have NO regional monitoring info at all
+        const isStrictDefault = (
+          !record.region_name && 
+          !record.agent_id &&
+          record.service_id === serviceId
+        );
+        
+        if (isStrictDefault) {
+          console.log(`✓ ACCEPTED Default record: ${record.id} - ${record.timestamp} - Pure default monitoring`);
+        } else {
+          console.log(`✗ REJECTED non-default record: ${record.id} - region: ${record.region_name || 'none'}, agent: ${record.agent_id || 'none'}`);
+        }
+        
+        return isStrictDefault;
+      });
+      
+      console.log(`ULTRA-STRICT FILTER: Reduced ${rawData.length} records to ${strictDefaultData.length} pure default monitoring records`);
+      return strictDefaultData;
+    },
+    enabled: !!serviceId,
+    refetchInterval: 30000,
+    staleTime: 15000,
+    placeholderData: (previousData) => previousData,
+    retry: 3,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+  });
+  
+  // Process uptime data with absolute timestamp uniqueness
+  const processUptimeData = (data: UptimeData[], intervalSeconds: number): UptimeData[] => {
+    if (!data || data.length === 0) return [];
+    
+    console.log(`Processing ${data.length} strict default monitoring records for service ${serviceId}`);
+    
+    // Sort data by timestamp (newest first)
+    const sortedData = [...data].sort((a, b) => 
+      new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+    );
+    
+    // ABSOLUTE timestamp uniqueness - use Map for O(1) lookup
+    const timestampMap = new Map<string, UptimeData>();
+    
+    sortedData.forEach(record => {
+      const exactTimestamp = record.timestamp;
+      
+      if (!timestampMap.has(exactTimestamp)) {
+        timestampMap.set(exactTimestamp, record);
+        console.log(`✓ Added unique default record: ${record.id} - ${exactTimestamp}`);
+      } else {
+        console.log(`✗ REJECTED absolute duplicate timestamp: ${record.id} - ${exactTimestamp} (exact timestamp match)`);
+      }
+    });
+    
+    // Convert Map back to array and take most recent 20
+    const uniqueRecords = Array.from(timestampMap.values());
+    const recentData = uniqueRecords.slice(0, 20);
+    
+    console.log(`FINAL RESULT: ${recentData.length} absolutely unique default monitoring records`);
+    
+    return recentData;
+  };
+  
+  // Update history items when data changes
+  useEffect(() => {
+    if (uptimeData && uptimeData.length > 0) {
+      console.log(`Received ${uptimeData.length} strict default monitoring records for service ${serviceId}`);
+      const processedData = processUptimeData(uptimeData, interval);
+      setHistoryItems(processedData);
+    } else if (!serviceId || (uptimeData && uptimeData.length === 0)) {
+      // Generate placeholder data when no real data is available
+      console.log(`No strict default monitoring data available for service ${serviceId}, generating placeholder`);
+      
+      const statusValue = (status === "up" || status === "down" || status === "warning" || status === "paused") 
+        ? status 
+        : "paused";
+        
+      const placeholderHistory: UptimeData[] = Array(20).fill(null).map((_, index) => ({
+        id: `placeholder-${serviceId}-${index}`,
+        service_id: serviceId || "",
+        serviceId: serviceId || "",
+        timestamp: new Date(Date.now() - (index * interval * 1000)).toISOString(),
+        status: statusValue as "up" | "down" | "warning" | "paused",
+        responseTime: 0
+      }));
+      
+      setHistoryItems(placeholderHistory);
+    }
+  }, [uptimeData, serviceId, status, interval]);
+
+  // Ensure we always have exactly 20 items for consistent display
+  const getDisplayItems = (): UptimeData[] => {
+    const items = [...historyItems];
+    
+    // If we have fewer than 20 items, pad with older placeholder data
+    if (items.length < 20) {
+      const lastItem = items.length > 0 ? items[items.length - 1] : null;
+      const lastStatus = lastItem ? lastItem.status : 
+                        (status === "up" || status === "down" || status === "warning" || status === "paused") ? 
+                        status as "up" | "down" | "warning" | "paused" : "paused";
+      
+      const paddingCount = 20 - items.length;
+      const paddingItems: UptimeData[] = Array(paddingCount).fill(null).map((_, index) => {
+        const baseTime = lastItem ? new Date(lastItem.timestamp).getTime() : Date.now();
+        const timeOffset = (index + 1) * interval * 1000;
+        
+        return {
+          id: `padding-${serviceId}-${index}`,
+          service_id: serviceId || "",
+          serviceId: serviceId || "",
+          timestamp: new Date(baseTime - timeOffset).toISOString(),
+          status: lastStatus,
+          responseTime: 0
+        };
+      });
+      
+      items.push(...paddingItems);
+    }
+
+    // Final absolute validation - use Set for guaranteed uniqueness
+    const finalItems = items.slice(0, 20);
+    const seenTimestamps = new Set<string>();
+    const absolutelyUniqueItems: UptimeData[] = [];
+    
+    finalItems.forEach(item => {
+      if (!seenTimestamps.has(item.timestamp)) {
+        seenTimestamps.add(item.timestamp);
+        absolutelyUniqueItems.push(item);
+      } else {
+        console.log(`FINAL VALIDATION: Removing absolute duplicate timestamp ${item.timestamp} from display`);
+      }
+    });
+
+    // Sort by timestamp (newest first) and ensure exactly 20 items
+    const sortedValidated = absolutelyUniqueItems.sort((a, b) => 
+      new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+    );
+    
+    console.log(`DISPLAY READY: ${sortedValidated.length} absolutely validated default monitoring items`);
+    return sortedValidated.slice(0, 20);
+  };
+
+  return {
+    displayItems: getDisplayItems(),
+    isLoading,
+    error,
+    isFetching,
+    refetch
+  };
+};
\ No newline at end of file
diff --git a/application/src/components/services/hooks/useUptimeData.ts b/application/src/components/services/hooks/useUptimeData.ts
index c36a5dd..0bfe235 100644
--- a/application/src/components/services/hooks/useUptimeData.ts
+++ b/application/src/components/services/hooks/useUptimeData.ts
@@ -1,3 +1,4 @@
+
 import { useState, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { uptimeService } from '@/services/uptimeService';
@@ -13,28 +14,24 @@ interface UseUptimeDataProps {
 export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseUptimeDataProps) => {
   const [historyItems, setHistoryItems] = useState<UptimeData[]>([]);
   
-  // Fetch real uptime history data if serviceId is provided - filtered for default monitoring with agent_id 1
+  // Fetch ALL uptime history data including regional monitoring data
   const { data: uptimeData, isLoading, error, isFetching, refetch } = useQuery({
-    queryKey: ['uptimeHistory', serviceId, serviceType],
+    queryKey: ['allUptimeHistory', serviceId, serviceType],
     queryFn: async () => {
       if (!serviceId) {
         console.log('No serviceId provided, skipping fetch');
         return [];
       }
-      console.log(`Fetching uptime data for service ${serviceId} of type ${serviceType} - filtering for default monitoring with agent_id 1`);
+      console.log(`Fetching ALL uptime data for service ${serviceId} of type ${serviceType} - including regional monitoring`);
       
       // Get raw uptime history data
       const rawData = await uptimeService.getUptimeHistory(serviceId, 50, undefined, undefined, serviceType);
       
-      // Filter for default monitoring records with agent_id 1 only
-      const filteredData = rawData.filter(record => {
-        // Keep records that either have no regional info (pure default) OR have agent_id 1
-        return (!record.region_name && !record.agent_id) || 
-               (record.agent_id === '1' || record.agent_id === 1);
-      });
+      // Include ALL monitoring data - both default and regional
+      const allMonitoringData = rawData.filter(record => record.service_id === serviceId);
       
-      console.log(`Filtered ${rawData.length} records to ${filteredData.length} records for default monitoring with agent_id 1`);
-      return filteredData;
+      console.log(`Retrieved ${rawData.length} total records, filtered to ${allMonitoringData.length} records for service ${serviceId}`);
+      return allMonitoringData;
     },
     enabled: !!serviceId,
     refetchInterval: 30000,
@@ -44,21 +41,21 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
     retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
   });
   
-  // Filter and process uptime data
+  // Process uptime data to include both default and regional monitoring
   const processUptimeData = (data: UptimeData[], intervalSeconds: number): UptimeData[] => {
     if (!data || data.length === 0) return [];
     
-    console.log(`Processing ${data.length} filtered uptime records for service ${serviceId}`);
+    console.log(`Processing ${data.length} uptime records (all monitoring data) for service ${serviceId}`);
     
     // Sort data by timestamp (newest first)
     const sortedData = [...data].sort((a, b) => 
       new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
     );
     
-    // Take the most recent 20 records to ensure we have enough data
-    const recentData = sortedData.slice(0, 20);
+    // Take the most recent records to ensure we have enough data for both default and regional
+    const recentData = sortedData.slice(0, 50);
     
-    console.log(`Using ${recentData.length} most recent filtered records`);
+    console.log(`Using ${recentData.length} most recent records including both default and regional monitoring`);
     
     return recentData;
   };
@@ -66,12 +63,12 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
   // Update history items when data changes
   useEffect(() => {
     if (uptimeData && uptimeData.length > 0) {
-      console.log(`Received ${uptimeData.length} filtered uptime records for service ${serviceId}`);
+      console.log(`Received ${uptimeData.length} uptime records (all monitoring) for service ${serviceId}`);
       const processedData = processUptimeData(uptimeData, interval);
       setHistoryItems(processedData);
     } else if (!serviceId || (uptimeData && uptimeData.length === 0)) {
       // Generate placeholder data when no real data is available
-      console.log(`No filtered uptime data available for service ${serviceId}, generating placeholder`);
+      console.log(`No uptime data available for service ${serviceId}, generating placeholder`);
       
       const statusValue = (status === "up" || status === "down" || status === "warning" || status === "paused") 
         ? status 
@@ -90,39 +87,9 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
     }
   }, [uptimeData, serviceId, status, interval]);
 
-  // Ensure we always have exactly 20 items for consistent display
+  // Return display items - all monitoring data for tooltip usage
   const getDisplayItems = (): UptimeData[] => {
-    const items = [...historyItems];
-    
-    // If we have fewer than 20 items, pad with older placeholder data
-    if (items.length < 20) {
-      const lastItem = items.length > 0 ? items[items.length - 1] : null;
-      const lastStatus = lastItem ? lastItem.status : 
-                        (status === "up" || status === "down" || status === "warning" || status === "paused") ? 
-                        status as "up" | "down" | "warning" | "paused" : "paused";
-      
-      const paddingCount = 20 - items.length;
-      const paddingItems: UptimeData[] = Array(paddingCount).fill(null).map((_, index) => {
-        const baseTime = lastItem ? new Date(lastItem.timestamp).getTime() : Date.now();
-        const timeOffset = (index + 1) * interval * 1000;
-        
-        return {
-          id: `padding-${serviceId}-${index}`,
-          service_id: serviceId || "",
-          serviceId: serviceId || "",
-          timestamp: new Date(baseTime - timeOffset).toISOString(),
-          status: lastStatus,
-          responseTime: 0
-        };
-      });
-      
-      items.push(...paddingItems);
-    }
-
-    // Return exactly 20 items, sorted by timestamp (newest first)
-    return items.slice(0, 20).sort((a, b) => 
-      new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-    );
+    return historyItems;
   };
 
   return {
diff --git a/application/src/components/services/uptime/UptimeSummary.tsx b/application/src/components/services/uptime/UptimeSummary.tsx
index 9f4eb4e..aa4e759 100644
--- a/application/src/components/services/uptime/UptimeSummary.tsx
+++ b/application/src/components/services/uptime/UptimeSummary.tsx
@@ -8,12 +8,12 @@ interface UptimeSummaryProps {
 
 export const UptimeSummary = ({ uptime, interval }: UptimeSummaryProps) => {
   return (
-    <div className="flex items-center justify-between text-xs">
+    <div className="flex items-center justify-between text-xs mt-1">
       <span className="text-muted-foreground">
         {Math.round(uptime)}% uptime
       </span>
       <span className="text-xs text-muted-foreground">
-        Last 20 checks 
+        Last 20 checks
       </span>
     </div>
   );

From c30bcf9e73cc7adeae567ac9cc60ef6b4a5ac4fe Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Thu, 26 Jun 2025 14:34:54 +0700
Subject: [PATCH 09/10] Move Report Menu Move the Reports menu item to the
 bottom of the Regional Monitoring section in the main menu.

---
 .../dashboard/sidebar/navigationData.ts          | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/application/src/components/dashboard/sidebar/navigationData.ts b/application/src/components/dashboard/sidebar/navigationData.ts
index a96035f..f9956c5 100644
--- a/application/src/components/dashboard/sidebar/navigationData.ts
+++ b/application/src/components/dashboard/sidebar/navigationData.ts
@@ -41,14 +41,6 @@ export const mainMenuItems = [
     color: 'text-amber-400',
     hasNavigation: true
   },
-  {
-    id: 'reports',
-    path: null,
-    icon: LineChart,
-    translationKey: 'reports',
-    color: 'text-rose-400',
-    hasNavigation: false
-  },
   {
     id: 'regional-monitoring',
     path: '/regional-monitoring',
@@ -56,6 +48,14 @@ export const mainMenuItems = [
     translationKey: 'regionalMonitoring',
     color: 'text-indigo-400',
     hasNavigation: true
+  },
+  {
+    id: 'reports',
+    path: null,
+    icon: LineChart,
+    translationKey: 'reports',
+    color: 'text-rose-400',
+    hasNavigation: false
   }
 ];
 

From fd08a64a0549263bd4d50d45afab8ea7c0e14857 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Thu, 26 Jun 2025 15:43:41 +0700
Subject: [PATCH 10/10] Fix: Resolve 404 error on public status page

---
 application/src/App.tsx                                       | 2 +-
 .../components/operational-page/OperationalPageContent.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/application/src/App.tsx b/application/src/App.tsx
index 02a1ba1..cd62250 100644
--- a/application/src/App.tsx
+++ b/application/src/App.tsx
@@ -50,7 +50,7 @@ function App() {
                 <Routes>
                   <Route path="/" element={<Index />} />
                   <Route path="/login" element={<Login />} />
-                  <Route path="/public/:pageId" element={<PublicStatusPage />} />
+                  <Route path="/public/:slug" element={<PublicStatusPage />} />
                   
                   {/* Protected Routes */}
                   <Route path="/dashboard" element={
diff --git a/application/src/components/operational-page/OperationalPageContent.tsx b/application/src/components/operational-page/OperationalPageContent.tsx
index e222809..d9376ba 100644
--- a/application/src/components/operational-page/OperationalPageContent.tsx
+++ b/application/src/components/operational-page/OperationalPageContent.tsx
@@ -39,8 +39,8 @@ export const OperationalPageContent = () => {
     if (page.custom_domain) {
       window.open(`https://${page.custom_domain}`, '_blank');
     } else {
-      // Navigate to the public status page route
-      window.open(`/status/${page.slug}`, '_blank');
+      // Navigate to the public status page route using the correct format
+      window.open(`/public/${page.slug}`, '_blank');
     }
   };