menu collaged full view and font size adjustment (#162 )

* menu sticky and add font adjustment * menu sticky and add font adjustment * ui menu sticky and fontsize adjustment --------- Co-authored-by: phearun <phearun@whitesand.online>
Merge pull request #172 from EchtkPvL/develop
2025-09-15 13:43:22 +07:00 · 2025-09-14 21:01:03 +07:00 · 2025-09-14 12:32:54 +02:00 · 2025-09-14 02:52:55 +07:00 · 2025-09-13 22:24:37 +07:00 · 2025-09-13 22:22:08 +07:00
27 changed files with 1422 additions and 579 deletions
@@ -85,7 +85,8 @@ body:
    id: terms
    attributes:
      label: Checklist
-      description: Please confirm the following before submitting:
+      description: |
+        Please confirm the following before submitting:
      options:
        - label: I have searched existing issues to avoid creating duplicates.
          required: true
@@ -51,7 +51,8 @@ body:
    id: checklist
    attributes:
      label: Checklist
-      description: Before submitting, please confirm:
+      description: |
+        Before submitting, please confirm:
      options:
        - label: I have searched existing issues to make sure this feature hasn’t been requested yet.
          required: true
@@ -45,7 +45,8 @@ body:
    id: checklist
    attributes:
      label: Checklist
-      description: Before submitting, please confirm the following:
+      description: |
+        Before submitting, please confirm the following:
      options:
        - label: I have searched existing issues and discussions for a solution.
          required: true
@@ -1,25 +1,29 @@
-
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CheckCle</title>
-    <meta name="description" content="An open-source monitoring platform offering real-time insights into server and service health, incident management, and operational transparency." />
-    <meta name="author" content="Tola Leng" />

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

-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@checkcle_oss" />
-    <meta name="twitter:image" content="https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-black.png" />
-  </head>
+  <meta property="og:title" content="checkcle-an-open-source" />
+  <meta property="og:description"
+    content="An open-source monitoring platform offering real-time insights into server and service health, incident management, and operational transparency." />
+  <meta property="og:type" content="website" />
+  <meta property="og:image" content="https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-black.png" />
+
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:site" content="@checkcle_oss" />
+  <meta name="twitter:image" content="https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/checkcle-black.png" />
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>

-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
 </html>
@@ -8,6 +8,7 @@
      "name": "vite_react_shadcn_ts",
      "version": "0.0.0",
      "dependencies": {
+        "@headlessui/react": "2.2.7",
        "@hookform/resolvers": "^3.9.0",
        "@radix-ui/react-accordion": "^1.2.0",
        "@radix-ui/react-alert-dialog": "^1.1.1",
@@ -644,6 +645,21 @@
        "@floating-ui/utils": "^0.2.8"
      }
    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
    "node_modules/@floating-ui/react-dom": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
@@ -663,6 +679,26 @@
      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
      "license": "MIT"
    },
+    "node_modules/@headlessui/react": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.7.tgz",
+      "integrity": "sha512-WKdTymY8Y49H8/gUc/lIyYK1M+/6dq0Iywh4zTZVAaiTDprRfioxSgD0wnXTQTBpjpGJuTL1NO/mqEvc//5SSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.16",
+        "@react-aria/focus": "^3.20.2",
+        "@react-aria/interactions": "^3.25.0",
+        "@tanstack/react-virtual": "^3.13.9",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
    "node_modules/@hookform/resolvers": {
      "version": "3.9.0",
      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
@@ -2280,6 +2316,103 @@
      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
      "license": "MIT"
    },
+    "node_modules/@react-aria/focus": {
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.21.1.tgz",
+      "integrity": "sha512-hmH1IhHlcQ2lSIxmki1biWzMbGgnhdxJUM0MFfzc71Rv6YAzhlx4kX3GYn4VNcjCeb6cdPv4RZ5vunV4kgMZYQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.25.5",
+        "@react-aria/utils": "^3.30.1",
+        "@react-types/shared": "^3.32.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.25.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.25.5.tgz",
+      "integrity": "sha512-EweYHOEvMwef/wsiEqV73KurX/OqnmbzKQa2fLxdULbec5+yDj6wVGaRHIzM4NiijIDe+bldEl5DG05CAKOAHA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.10",
+        "@react-aria/utils": "^3.30.1",
+        "@react-stately/flags": "^3.1.2",
+        "@react-types/shared": "^3.32.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.10.tgz",
+      "integrity": "sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.30.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.30.1.tgz",
+      "integrity": "sha512-zETcbDd6Vf9GbLndO6RiWJadIZsBU2MMm23rBACXLmpRztkrIqPEb2RVdlLaq1+GklDx0Ii6PfveVjx+8S5U6A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.10",
+        "@react-stately/flags": "^3.1.2",
+        "@react-stately/utils": "^3.10.8",
+        "@react-types/shared": "^3.32.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-stately/flags": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.2.tgz",
+      "integrity": "sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.8",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.8.tgz",
+      "integrity": "sha512-SN3/h7SzRsusVQjQ4v10LaVsDc81jyyR0DD5HnsQitm/I5WDpaSr2nRHtyloPFU48jlql1XX/S04T2DLQM7Y3g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.32.0.tgz",
+      "integrity": "sha512-t+cligIJsZYFMSPFMvsJMjzlzde06tZMOIOFa1OV5Z0BcMowrb2g4mB57j/9nP28iJIRYn10xCniQts+qadrqQ==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
    "node_modules/@remix-run/router": {
      "version": "1.20.0",
      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
@@ -2729,6 +2862,15 @@
      "dev": true,
      "license": "Apache-2.0"
    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.17",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
+      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
    "node_modules/@swc/types": {
      "version": "0.1.13",
      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.13.tgz",
@@ -2793,6 +2935,33 @@
        "react": "^18 || ^19"
      }
    },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
+      "integrity": "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
+      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
    "node_modules/@types/d3-array": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -6289,6 +6458,12 @@
        "node": ">=12.0.0"
      }
    },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
    "node_modules/tailwind-merge": {
      "version": "2.5.4",
      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
@@ -6568,6 +6743,15 @@
        }
      }
    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11,6 +11,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@headlessui/react": "2.2.7",
    "@hookform/resolvers": "^3.9.0",
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-alert-dialog": "^1.1.1",
@@ -45,6 +46,7 @@
    "cmdk": "^1.0.0",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.3.0",
+    "framer-motion": "12.23.12",
    "input-otp": "^1.2.4",
    "jspdf": "^3.0.1",
    "jspdf-autotable": "^5.0.2",
@@ -154,7 +154,8 @@
                    "email",
                    "ntfy",
                    "pushover",
-                    "notifiarr"
+                    "notifiarr",
+                    "gotify"
                ]
            },
            {
@@ -339,6 +340,20 @@
                "system": false,
                "type": "text"
            },
+            {
+                "autogeneratePattern": "",
+                "hidden": false,
+                "id": "text3401535476",
+                "max": 0,
+                "min": 0,
+                "name": "server_url",
+                "pattern": "",
+                "presentable": false,
+                "primaryKey": false,
+                "required": false,
+                "system": false,
+                "type": "text"
+            },
            {
                "hidden": false,
                "id": "autodate2990389176",
@@ -1,37 +1,40 @@
-import React, { useState } from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Toaster } from '@/components/ui/sonner';
+import React, { useState } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Toaster } from "@/components/ui/sonner";

-import { ThemeProvider } from './contexts/ThemeContext';
-import { LanguageProvider } from './contexts/LanguageContext';
-import { SidebarProvider } from './contexts/SidebarContext';
+import { ThemeProvider } from "./contexts/ThemeContext";
+import { LanguageProvider } from "./contexts/LanguageContext";
+import { SidebarProvider } from "./contexts/SidebarContext";

-import Index from './pages/Index';
-import Login from './pages/Login';
-import Dashboard from './pages/Dashboard';
-import InstanceMonitoring from './pages/InstanceMonitoring';
-import ContainerMonitoring from './pages/ContainerMonitoring';
-import ServiceDetail from './pages/ServiceDetail';
-import SslDomain from './pages/SslDomain';
-import ScheduleIncident from './pages/ScheduleIncident';
-import OperationalPage from './pages/OperationalPage';
-import RegionalMonitoring from './pages/RegionalMonitoring';
-import Settings from './pages/Settings';
-import Profile from './pages/Profile';
-import NotFound from './pages/NotFound';
-import PublicStatusPage from './pages/PublicStatusPage';
-import { ProtectedRoute } from './components/auth/ProtectedRoute';
-import ServerDetail from './pages/ServerDetail';
+import Index from "./pages/Index";
+import Login from "./pages/Login";
+import Dashboard from "./pages/Dashboard";
+import InstanceMonitoring from "./pages/InstanceMonitoring";
+import ContainerMonitoring from "./pages/ContainerMonitoring";
+import ServiceDetail from "./pages/ServiceDetail";
+import SslDomain from "./pages/SslDomain";
+import ScheduleIncident from "./pages/ScheduleIncident";
+import OperationalPage from "./pages/OperationalPage";
+import RegionalMonitoring from "./pages/RegionalMonitoring";
+import Settings from "./pages/Settings";
+import Profile from "./pages/Profile";
+import NotFound from "./pages/NotFound";
+import PublicStatusPage from "./pages/PublicStatusPage";
+import { ProtectedRoute } from "./components/auth/ProtectedRoute";
+import ServerDetail from "./pages/ServerDetail";

 function App() {
-  const [queryClient] = useState(() => new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 60 * 1000
-      }
-    }
-  }));
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+          },
+        },
+      })
+  );

  return (
    <BrowserRouter>
@@ -46,19 +49,110 @@ function App() {

                {/* Protected routes */}
                <Route path="/login" element={<Login />} />
-                <Route path="/" element={<ProtectedRoute><Index /></ProtectedRoute>} />
-                <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
-                <Route path="/instance-monitoring" element={<ProtectedRoute><InstanceMonitoring /></ProtectedRoute>} />
-                <Route path="/server-detail/:serverId" element={<ProtectedRoute><ServerDetail /></ProtectedRoute>} />
-                <Route path="/container-monitoring" element={<ProtectedRoute><ContainerMonitoring /></ProtectedRoute>} />
-                <Route path="/container-monitoring/:serverId" element={<ProtectedRoute><ContainerMonitoring /></ProtectedRoute>} />
-                <Route path="/service/:id" element={<ProtectedRoute><ServiceDetail /></ProtectedRoute>} />
-                <Route path="/ssl-domain" element={<ProtectedRoute><SslDomain /></ProtectedRoute>} />
-                <Route path="/schedule-incident" element={<ProtectedRoute><ScheduleIncident /></ProtectedRoute>} />
-                <Route path="/operational-page" element={<ProtectedRoute><OperationalPage /></ProtectedRoute>} />
-                <Route path="/regional-monitoring" element={<ProtectedRoute><RegionalMonitoring /></ProtectedRoute>} />
-                <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
-                <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
+                <Route
+                  path="/"
+                  element={
+                    <ProtectedRoute>
+                      <Index />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/dashboard"
+                  element={
+                    <ProtectedRoute>
+                      <Dashboard />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/instance-monitoring"
+                  element={
+                    <ProtectedRoute>
+                      <InstanceMonitoring />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/server-detail/:serverId"
+                  element={
+                    <ProtectedRoute>
+                      <ServerDetail />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/container-monitoring"
+                  element={
+                    <ProtectedRoute>
+                      <ContainerMonitoring />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/container-monitoring/:serverId"
+                  element={
+                    <ProtectedRoute>
+                      <ContainerMonitoring />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/service/:id"
+                  element={
+                    <ProtectedRoute>
+                      <ServiceDetail />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/ssl-domain"
+                  element={
+                    <ProtectedRoute>
+                      <SslDomain />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/schedule-incident"
+                  element={
+                    <ProtectedRoute>
+                      <ScheduleIncident />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/operational-page"
+                  element={
+                    <ProtectedRoute>
+                      <OperationalPage />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/regional-monitoring"
+                  element={
+                    <ProtectedRoute>
+                      <RegionalMonitoring />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/settings"
+                  element={
+                    <ProtectedRoute>
+                      <Settings />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/profile"
+                  element={
+                    <ProtectedRoute>
+                      <Profile />
+                    </ProtectedRoute>
+                  }
+                />
                <Route path="*" element={<NotFound />} />
              </Routes>
            </QueryClientProvider>
@@ -1,4 +1,3 @@
-
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
@@ -15,17 +14,24 @@ interface DashboardContentProps {
  error: Error | null;
 }

-export const DashboardContent = ({ services, isLoading, error }: DashboardContentProps) => {
+export const DashboardContent = ({
+  services,
+  isLoading,
+  error,
+}: DashboardContentProps) => {
  const { t } = useLanguage();
  const [filter, setFilter] = useState<string>("all");
  const [searchTerm, setSearchTerm] = useState<string>("");
  const [isAddDialogOpen, setIsAddDialogOpen] = useState<boolean>(false);

  // Filter services based on search term and type filter
-  const filteredServices = services.filter(service => {
-    const matchesSearch = service.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
-                        (service.url && service.url.toLowerCase().includes(searchTerm.toLowerCase()));
-    const matchesFilter = filter === 'all' || service.type.toLowerCase() === filter.toLowerCase();
+  const filteredServices = services.filter((service) => {
+    const matchesSearch =
+      service.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      (service.url &&
+        service.url.toLowerCase().includes(searchTerm.toLowerCase()));
+    const matchesFilter =
+      filter === "all" || service.type.toLowerCase() === filter.toLowerCase();
    return matchesSearch && matchesFilter;
  });

@@ -33,21 +39,23 @@ export const DashboardContent = ({ services, isLoading, error }: DashboardConten
    return (
      <div className="flex flex-col items-center justify-center h-full gap-4 text-foreground">
        <p>Error loading service data.</p>
-        <Button onClick={() => window.location.reload()}>{t('retry')}</Button>
+        <Button onClick={() => window.location.reload()}>{t("retry")}</Button>
      </div>
    );
  }

  return (
-    <main className="flex-1 flex flex-col overflow-auto bg-background p-6 pb-0">
-      <div className="flex flex-col flex-1">
+    <main className="flex-1 flex flex-col overflow-auto dark:bg-black p-2  shadow pb-0 ">
+      <div className="flex flex-col flex-1 bg-white dark:bg-black p-4 rounded-xl ">
        <div className="flex justify-between items-center mb-6">
-          <h2 className="text-2xl font-bold text-foreground">{t('overview')}</h2>
+          <h2 className="text-2xl font-bold text-foreground">
+            {t("overview")}
+          </h2>
          <Button
            className="text-primary-foreground"
            onClick={() => setIsAddDialogOpen(true)}
          >
-            <Plus className="w-4 h-4 mr-2" /> {t('newService')}
+            <Plus className="w-4 h-4 mr-2" /> {t("newService")}
          </Button>
        </div>

@@ -1,13 +1,39 @@
 import { Button } from "@/components/ui/button";
 import { AuthUser } from "@/services/authService";
 import { useTheme } from "@/contexts/ThemeContext";
-import { Moon, PanelLeft, PanelLeftClose, Sun, Globe, FileText, Github, Twitter, MessageSquare, Bell, User, Settings, LogOut } from "lucide-react";
+import {
+  Moon,
+  PanelLeft,
+  PanelLeftClose,
+  Sun,
+  Globe,
+  FileText,
+  Github,
+  Twitter,
+  MessageSquare,
+  Bell,
+  User,
+  Settings,
+  LogOut,
+  CaseUpper,
+  BookA,
+  CaseSensitive,
+  CaseLower,
+  ALargeSmall,
+} from "lucide-react";
 import { useLanguage } from "@/contexts/LanguageContext";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
 import { useEffect, useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useNavigate } from "react-router-dom";
 import { useSystemSettings } from "@/hooks/useSystemSettings";
+import useDynamicFontSize from "@/contexts/FontSizeContext";

 interface HeaderProps {
  currentUser: AuthUser | null;
@@ -20,7 +46,7 @@ export const Header = ({
  currentUser,
  onLogout,
  sidebarCollapsed,
-  toggleSidebar
+  toggleSidebar,
 }: HeaderProps) => {
  const { theme, toggleTheme } = useTheme();
  const { language, setLanguage, t } = useLanguage();
@@ -55,27 +81,35 @@ export const Header = ({
  }, [currentUser]);

  // Prepare avatar URL - ensure it displays correctly if it's a local profile image
-  let avatarUrl = '';
+  let avatarUrl = "";
  if (currentUser?.avatar) {
    // If it's a relative path from the public folder, make sure it's resolved properly
-    if (currentUser.avatar.startsWith('/upload/profile/')) {
+    if (currentUser.avatar.startsWith("/upload/profile/")) {
      avatarUrl = currentUser.avatar;
    } else {
      avatarUrl = currentUser.avatar;
    }
    console.log("Final avatar URL:", avatarUrl);
  }
-
+  const [fontSize, setFontSize] = useState(() => {
+    const savedFontSize = localStorage.getItem("fontSize");
+    return savedFontSize ? parseInt(savedFontSize, 10) : 14;
+  });
+  useDynamicFontSize(fontSize);
  return (
    <header className="relative bg-background border-b border-border px-6 flex justify-between items-center py-[12px] overflow-hidden">
      {/* Grid Pattern Overlay - Similar to StatusCards */}
      <div className="absolute inset-0 z-0">
        <div
-          className="w-full h-full"
+          className="w-full h-full dark:bg-black"
          style={{
-            backgroundImage: `linear-gradient(${theme === 'dark' ? '#ffffff10' : '#00000010'} 1px, transparent 1px), 
-                              linear-gradient(90deg, ${theme === 'dark' ? '#ffffff10' : '#00000010'} 1px, transparent 1px)`,
-            backgroundSize: '20px 20px'
+            backgroundImage: `linear-gradient(${
+              theme === "dark" ? "#ffffff10" : "#00000010"
+            } 1px, transparent 1px), 
+                              linear-gradient(90deg, ${
+                                theme === "dark" ? "#ffffff10" : "#00000010"
+                              } 1px, transparent 1px)`,
+            backgroundSize: "20px 20px",
          }}
        >
          <div className="w-full h-full backdrop-blur-[1px]"></div>
@@ -84,45 +118,100 @@ export const Header = ({

      {/* Header Content */}
      <div className="flex items-center gap-4 z-10">
-        <Button variant="ghost" size="icon" onClick={toggleSidebar} className="mr-2">
-          {sidebarCollapsed ? <PanelLeft className="h-5 w-5" /> : <PanelLeftClose className="h-5 w-5" />}
+        <div
+          className={` p-1 h-8  w-8 -ml-2 rounded bg-gray-600 ${
+            !sidebarCollapsed ? "hidden" : ""
+          }`}
+        >
+          <img
+            src="/favicon_sidebar.ico"
+            alt="CheckCle"
+            className={`h-6 w-6  `}
+          />
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={toggleSidebar}
+          className="mr-2"
+        >
+          {sidebarCollapsed ? (
+            <PanelLeft className="h-5 w-5" />
+          ) : (
+            <PanelLeftClose className="h-5 w-5" />
+          )}
        </Button>

        <div className="flex items-center space-x-2">
-          <h1 className="text-lg font-medium">{greeting}, {currentUser?.name || currentUser?.email?.split('@')[0] || 'User'} 👋 ✨</h1>
+          <h1 className="font-medium text-xl">
+            {greeting},{" "}
+            {currentUser?.name || currentUser?.email?.split("@")[0] || "User"}{" "}
+            👋 ✨
+          </h1>
        </div>
      </div>

      <div className="flex items-center space-x-4 z-10">
-        <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border" onClick={toggleTheme}>
+        <Button
+          variant="outline"
+          size="icon"
+          className="rounded-full w-8 h-8 border-border"
+          onClick={toggleTheme}
+        >
          <span className="sr-only">Toggle theme</span>
-          {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+          {theme === "dark" ? (
+            <Sun className="w-4 h-4" />
+          ) : (
+            <Moon className="w-4 h-4" />
+          )}
        </Button>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border">
+            <Button
+              variant="outline"
+              size="icon"
+              className="rounded-full w-8 h-8 border-border"
+            >
              <span className="sr-only">{t("language")}</span>
              <Globe className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => setLanguage("en")} className={language === "en" ? "bg-accent" : ""}>
+            <DropdownMenuItem
+              onClick={() => setLanguage("en")}
+              className={language === "en" ? "bg-accent" : ""}
+            >
              {t("english")}
            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setLanguage("km")} className={language === "km" ? "bg-accent" : ""}>
+            <DropdownMenuItem
+              onClick={() => setLanguage("km")}
+              className={language === "km" ? "bg-accent" : ""}
+            >
              {t("khmer")}
            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setLanguage("de")} className={language === "de" ? "bg-accent" : ""}>
+            <DropdownMenuItem
+              onClick={() => setLanguage("de")}
+              className={language === "de" ? "bg-accent" : ""}
+            >
              {t("Deutsch")}
            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setLanguage("ko")} className={language === "ko" ? "bg-accent" : ""}>
+            <DropdownMenuItem
+              onClick={() => setLanguage("ko")}
+              className={language === "ko" ? "bg-accent" : ""}
+            >
              {t("korean")}
            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setLanguage("ja")} className={language === "ja" ? "bg-accent" : ""}>
+            <DropdownMenuItem
+              onClick={() => setLanguage("ja")}
+              className={language === "ja" ? "bg-accent" : ""}
+            >
              {t("japanese")}
            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setLanguage("zhcn")} className={language === "zhcn" ? "bg-accent" : ""}>
+            <DropdownMenuItem
+              onClick={() => setLanguage("zhcn")}
+              className={language === "zhcn" ? "bg-accent" : ""}
+            >
              {t("simplifiedChinese")}
            </DropdownMenuItem>
          </DropdownMenuContent>
@@ -144,7 +233,9 @@ export const Header = ({
          variant="outline"
          size="icon"
          className="rounded-full w-8 h-8 border-border"
-          onClick={() => window.open("https://github.com/operacle/checkcle", "_blank")}
+          onClick={() =>
+            window.open("https://github.com/operacle/checkcle", "_blank")
+          }
        >
          <span className="sr-only">GitHub</span>
          <Github className="w-4 h-4" />
@@ -173,30 +264,87 @@ export const Header = ({
        </Button>

        {/* Notifications */}
-        <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border">
+        <Button
+          variant="outline"
+          size="icon"
+          className="rounded-full w-8 h-8 border-border"
+        >
          <span className="sr-only">{t("notifications")}</span>
          <Bell className="w-4 h-4" />
        </Button>
+        {/* Fond Size */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              className="rounded-full w-8 h-8 border-border"
+            >
+              <span className="sr-only">{t("language")}</span>
+              <BookA className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={() => setFontSize((prev) => prev + 1)}
+              className={`cursor-pointer`}
+            >
+              <span className={`text-[15px] font-semibold`}> Aa +</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => setFontSize((prev) => prev - 1)}
+              className={`cursor-pointer`}
+            >
+              <span className={`text-[12px] font-semibold`}> Aa -</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>

        {/* User Profile Dropdown */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Avatar className="h-8 w-8 cursor-pointer ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground">
-              {avatarUrl ? <AvatarImage src={avatarUrl} alt={currentUser?.name || currentUser?.email?.split('@')[0] || 'User'} /> : <AvatarFallback className="bg-primary/20 text-primary">
-                  {currentUser?.name?.[0] || currentUser?.email?.[0] || 'U'}
-                </AvatarFallback>}
+              {avatarUrl ? (
+                <AvatarImage
+                  src={avatarUrl}
+                  alt={
+                    currentUser?.name ||
+                    currentUser?.email?.split("@")[0] ||
+                    "User"
+                  }
+                />
+              ) : (
+                <AvatarFallback className="bg-primary/20 text-primary">
+                  {currentUser?.name?.[0] || currentUser?.email?.[0] || "U"}
+                </AvatarFallback>
+              )}
            </Avatar>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            <div className="flex items-center gap-3 p-2">
              <Avatar className="h-10 w-10">
-                {avatarUrl ? <AvatarImage src={avatarUrl} alt={currentUser?.name || currentUser?.email?.split('@')[0] || 'User'} /> : <AvatarFallback className="bg-primary/20 text-primary">
-                    {currentUser?.name?.[0] || currentUser?.email?.[0] || 'U'}
-                  </AvatarFallback>}
+                {avatarUrl ? (
+                  <AvatarImage
+                    src={avatarUrl}
+                    alt={
+                      currentUser?.name ||
+                      currentUser?.email?.split("@")[0] ||
+                      "User"
+                    }
+                  />
+                ) : (
+                  <AvatarFallback className="bg-primary/20 text-primary">
+                    {currentUser?.name?.[0] || currentUser?.email?.[0] || "U"}
+                  </AvatarFallback>
+                )}
              </Avatar>
              <div className="flex flex-col space-y-1">
-                <span className="font-medium">{currentUser?.name || 'User'}</span>
-                <span className="text-xs text-muted-foreground truncate">{currentUser?.email}</span>
+                <span className="font-medium">
+                  {currentUser?.name || "User"}
+                </span>
+                <span className="text-xs text-muted-foreground truncate">
+                  {currentUser?.email}
+                </span>
              </div>
            </div>
            <DropdownMenuSeparator />
@@ -209,7 +357,10 @@ export const Header = ({
              <span>{t("settings")}</span>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={onLogout} className="text-red-500 focus:text-red-500">
+            <DropdownMenuItem
+              onClick={onLogout}
+              className="text-red-500 focus:text-red-500"
+            >
              <LogOut className="mr-2 h-4 w-4" />
              <span>{t("logout")}</span>
            </DropdownMenuItem>
@@ -1,7 +1,12 @@
-
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/components/ui/select";
 import { Plus } from "lucide-react";
 import { useLanguage } from "@/contexts/LanguageContext";

@@ -18,24 +23,26 @@ export const ServiceFilters = ({
  setFilter,
  searchTerm,
  setSearchTerm,
-  servicesCount 
+  servicesCount,
 }: ServiceFiltersProps) => {
  const { t } = useLanguage();
  return (
-    <div className="mb-6 flex justify-between items-center">
+    <div className="mb-6 flex justify-between items-center ">
      <div className="flex items-center">
-        <h3 className="text-xl font-semibold mr-2 text-foreground">{t('currentlyMonitoring')}</h3>
+        <h3 className="text-xl font-semibold mr-2 text-foreground">
+          {t("currentlyMonitoring")}
+        </h3>
        <span className="bg-secondary text-secondary-foreground px-2 py-0.5 rounded text-sm">
          {servicesCount}
        </span>
      </div>
      <div className="flex space-x-4">
        <Select value={filter} onValueChange={setFilter}>
-          <SelectTrigger className="w-40 bg-card border-border">
-            <SelectValue placeholder={t('allTypes')} />
+          <SelectTrigger className="w-40 bg-card border-border dark:bg-gray-800">
+            <SelectValue placeholder={t("allTypes")} />
          </SelectTrigger>
          <SelectContent>
-            <SelectItem value="all">{t('allTypes')}</SelectItem>
+            <SelectItem value="all">{t("allTypes")}</SelectItem>
            <SelectItem value="HTTP">HTTP</SelectItem>
            <SelectItem value="PING">PING</SelectItem>
            <SelectItem value="TCP">TCP</SelectItem>
@@ -45,7 +52,7 @@ export const ServiceFilters = ({
        <div className="relative">
          <Input
            className="w-72 bg-card border-border"
-            placeholder={t('search')}
+            placeholder={t("search")}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
@@ -1,4 +1,3 @@
-
 import React from "react";
 import { useTheme } from "@/contexts/ThemeContext";
 import { SidebarHeader } from "./sidebar/SidebarHeader";
@@ -15,14 +14,21 @@ export const Sidebar = ({ collapsed }: SidebarProps) => {
  return (
    <div
      className={`
-        ${theme === 'dark' ? 'bg-[#121212] border-[#1e1e1e]' : 'bg-sidebar border-sidebar-border'} 
+        ${
+          theme === "dark"
+            ? "bg-black border-[#1e1e1e]"
+            : "bg-sidebars border-sidebar-border"
+        } 
        border-r flex flex-col h-full 
-        ${collapsed ? 'w-16' : 'w-64'}
-      `}
+        ${collapsed ? "w-16" : "w-64"}
+      ${collapsed ? "hidden" : ""}`}
    >
      <SidebarHeader collapsed={collapsed} />
      <MainNavigation collapsed={collapsed} />
      <SettingsPanel collapsed={collapsed} />
+      <div className="items-center ml-2 p-2 h-30  border-t  ">
+        Version: latest
+      </div>
    </div>
  );
 };
@@ -1,4 +1,3 @@
-
 import React from "react";
 import { MenuItem } from "./MenuItem";
 import { mainMenuItems } from "./navigationData";
@@ -7,9 +6,15 @@ interface MainNavigationProps {
  collapsed: boolean;
 }

-export const MainNavigation: React.FC<MainNavigationProps> = ({ collapsed }) => {
+export const MainNavigation: React.FC<MainNavigationProps> = ({
+  collapsed,
+}) => {
  return (
-    <nav className="my-2 mx-1 py-1 px-1">
+    <nav
+      className={`my-2 mx-1 py-1 px-1  dark:bg-black ${
+        collapsed ? "hidden" : ""
+      }`}
+    >
      {mainMenuItems.map((item) => (
        <MenuItem
          key={item.id}
@@ -1,4 +1,3 @@
-
 import React from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useTheme } from "@/contexts/ThemeContext";
@@ -22,7 +21,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
  translationKey,
  color,
  hasNavigation,
-  collapsed
+  collapsed,
 }) => {
  const { theme } = useTheme();
  const { t } = useLanguage();
@@ -44,18 +43,24 @@ export const MenuItem: React.FC<MenuItemProps> = ({
  return (
    <div
      className={`
-        ${collapsed ? 'p-3' : 'p-2 pl-3'} 
+        ${collapsed ? "p-3" : "p-2 pl-3"} 
        mb-1 rounded-lg 
-        ${isActive ? (theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent') : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} 
+        ${
+          isActive
+            ? theme === "dark"
+              ? "bg-drak"
+              : "bg-sidebar-accent "
+            : `hover:${theme === "dark" ? "bg-gray-800" : "bg-sidebar-accent "}`
+        } 
        flex items-center 
-        ${collapsed ? 'justify-center' : ''} 
+        ${collapsed ? "justify-center" : ""} 
        cursor-pointer
      `}
      onClick={handleClick}
    >
      <Icon className={`${mainIconSize} ${color}`} />
      {!collapsed && (
-        <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">
+        <span className="ml-2.5 font-medium text-foreground tracking-wide ">
          {t(translationKey)}
        </span>
      )}
@@ -1,10 +1,13 @@
-
 import React, { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useTheme } from "@/contexts/ThemeContext";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { Settings, ChevronDown } from "lucide-react";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { settingsMenuItems } from "./navigationData";

@@ -17,19 +20,27 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({ collapsed }) => {
  const { t } = useLanguage();
  const location = useLocation();
  const navigate = useNavigate();
-  const [activeSettingsItem, setActiveSettingsItem] = useState<string | null>("general");
-  const [settingsPanelOpen, setSettingsPanelOpen] = useState(false);
+  const [activeSettingsItem, setActiveSettingsItem] = useState<string | null>(
+    "general"
+  );
+  //const [settingsPanelOpen, setSettingsPanelOpen] = useState(false);
+  const [settingsPanelOpen, setSettingsPanelOpen] = useState(() => {
+    const savedValue = localStorage.getItem("settingsPanelOpen");
+    // Check if the saved value exists and is "true"
+    return savedValue === "true";
+  });

  // Update active settings item based on URL
  useEffect(() => {
-    if (location.pathname === '/settings') {
+    if (location.pathname === "/settings") {
      const params = new URLSearchParams(location.search);
-      const panel = params.get('panel');
+      const panel = params.get("panel");
      if (panel) {
        setActiveSettingsItem(panel);
      }
    }
-  }, [location]);
+    localStorage.setItem("settingsPanelOpen", settingsPanelOpen.toString());
+  }, [location, settingsPanelOpen]);

  const handleSettingsItemClick = (item: string) => {
    setActiveSettingsItem(item);
@@ -43,15 +54,27 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({ collapsed }) => {
  };

  const getMenuItemClasses = (isActive: boolean) => {
-    return `p-2 ${isActive ? theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent'}`} rounded-lg flex items-center`;
+    return `p-2 ${
+      isActive
+        ? theme === "dark"
+          ? "bg-[#1a1a1a]"
+          : "bg-sidebar-accent"
+        : `hover:${theme === "dark" ? "bg-[#1a1a1a]" : "bg-sidebar-accent"}`
+    } rounded-lg flex items-center `;
  };

  if (collapsed) {
    const mainIconSize = "h-6 w-6";
    return (
-      <div className={`border-t ${theme === 'dark' ? 'border-[#1e1e1e] bg-[#121212]' : 'border-sidebar-border bg-sidebar'} p-4 flex justify-center`}>
+      <div
+        className={`border-t ${
+          theme === "dark"
+            ? "border-[#1e1e1e] bg-[#121212]"
+            : "border-sidebar-border bg-sidebar"
+        } p-4 flex justify-center ${collapsed ? "hidden" : ""}`}
+      >
        <div
-          onClick={(e) => handleMenuItemClick('/settings', e)} 
+          onClick={(e) => handleMenuItemClick("/settings", e)}
          className="cursor-pointer"
        >
          <Settings className={`${mainIconSize} text-purple-400`} />
@@ -61,33 +84,59 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({ collapsed }) => {
  }

  return (
-    <div className={`flex-1 flex flex-col border-t ${theme === 'dark' ? 'border-[#1e1e1e] bg-[#121212]' : 'border-sidebar-border bg-sidebar'} p-4`}>
-      <Collapsible open={settingsPanelOpen} onOpenChange={setSettingsPanelOpen} className="w-full flex flex-col flex-1">
-        <CollapsibleTrigger className={`flex items-center justify-between w-full mb-4 px-2 py-2 rounded-lg ${theme === 'dark' ? 'hover:bg-[#1a1a1a]' : 'hover:bg-sidebar-accent'}`}>
+    <div
+      className={`flex-1 flex flex-col border-t ${
+        theme === "dark"
+          ? "border-[#1e1e1e] bg-black"
+          : "border-sidebar-border bg-sidebars"
+      } p-4 ${collapsed ? "hidden" : ""}`}
+    >
+      <Collapsible
+        open={settingsPanelOpen}
+        onOpenChange={setSettingsPanelOpen}
+        className="w-full flex flex-col flex-1"
+      >
+        <CollapsibleTrigger
+          className={`flex items-center justify-between w-full mb-4 px-2 py-2 rounded-lg ${
+            theme === "dark" ? "hover:bg-[#1a1a1a]" : "hover:bg-sidebar-accent"
+          }`}
+        >
          <div className="flex items-center">
-            <span className="font-medium tracking-wide">{t("settingPanel")}</span>
+            <span className="font-medium tracking-wide">
+              {t("settingPanel")}
+            </span>
          </div>
          <div className="flex items-center">
            <Settings className="h-4 w-4 mr-1" />
-            <ChevronDown className={`h-4 w-4 transition-transform duration-200 ${settingsPanelOpen ? 'rotate-180' : ''}`} />
+            <ChevronDown
+              className={`h-4 w-4 transition-transform duration-200 ${
+                settingsPanelOpen ? "rotate-180" : ""
+              }`}
+            />
          </div>
        </CollapsibleTrigger>

-        <CollapsibleContent className={`${theme === 'dark' ? 'bg-[#121212]' : 'bg-sidebar'} flex-1 flex flex-col`}>
+        <CollapsibleContent
+          className={`${
+            theme === "dark" ? "bg-black" : "bg-sidebars"
+          } flex-1 flex flex-col`}
+        >
          <div className="max-h-[300px] overflow-y-auto custom-scrollbar relative pr-1">
            <ScrollArea className="h-full">
-              <div className="space-y-2 pr-4">
+              <div className="space-y-2 pr-4 cursor-pointer">
                {settingsMenuItems.map((item) => (
                  <div
                    key={item.id}
-                    className={getMenuItemClasses(activeSettingsItem === item.id)} 
+                    className={getMenuItemClasses(
+                      activeSettingsItem === item.id
+                    )}
                    onClick={(e) => {
                      handleMenuItemClick(`/settings?panel=${item.id}`, e);
                      handleSettingsItemClick(item.id);
                    }}
                  >
                    <item.icon className="h-4 w-4 mr-2" />
-                    <span className="text-sm">{t(item.translationKey)}</span>
+                    <span className="text-base">{t(item.translationKey)}</span>
                  </div>
                ))}
              </div>
@@ -1,4 +1,3 @@
-
 import React from "react";
 import { useTheme } from "@/contexts/ThemeContext";

@@ -10,13 +9,15 @@ export const SidebarHeader: React.FC<SidebarHeaderProps> = ({ collapsed }) => {
  const { theme } = useTheme();

  return (
-    <div className={`p-4 ${theme === 'dark' ? 'border-[#1e1e1e]' : 'border-sidebar-border'} border-b flex items-center ${collapsed ? 'justify-center' : ''}`}>
-      <div className="h-8 w-8 bg-gray-600 rounded flex items-center justify-center mr-2">
-        <img
-          src="/favicon_sidebar.ico"
-          alt="CheckCle"
-          className="h-6 w-6"
-        />
+    <div
+      className={`p-[15.7px] ${
+        theme === "dark"
+          ? "border-[#1e1e1e] bg-black"
+          : "border-sidebar-border bg-white"
+      } border-b flex items-center  ${collapsed ? "justify-center" : ""}`}
+    >
+      <div className="h-8 w-8 rounded flex items-center justify-center mr-2 dark:bg-drak">
+        <img src="/favicon_sidebar.ico" alt="CheckCle" className="h-7 w-6" />
      </div>
      {!collapsed && <h1 className="text-xl font-semibold">CheckCle App</h1>}
    </div>
@@ -1,14 +1,17 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useOperationalPages, useDeleteOperationalPage } from '@/hooks/useOperationalPage';
-import { CreateOperationalPageDialog } from './CreateOperationalPageDialog';
-import { EditOperationalPageDialog } from './EditOperationalPageDialog';
-import { OperationalPageCard } from './OperationalPageCard';
-import { Card, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { OperationalPageRecord } from '@/types/operational.types';
-import { Activity, Plus, RefreshCw } from 'lucide-react';
-import { Skeleton } from '@/components/ui/skeleton';
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  useOperationalPages,
+  useDeleteOperationalPage,
+} from "@/hooks/useOperationalPage";
+import { CreateOperationalPageDialog } from "./CreateOperationalPageDialog";
+import { EditOperationalPageDialog } from "./EditOperationalPageDialog";
+import { OperationalPageCard } from "./OperationalPageCard";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { OperationalPageRecord } from "@/types/operational.types";
+import { Activity, Plus, RefreshCw } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
  AlertDialog,
  AlertDialogAction,
@@ -18,17 +21,26 @@ import {
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+} from "@/components/ui/alert-dialog";

 export const OperationalPageContent = () => {
  const navigate = useNavigate();
-  const { data: pages, isLoading, error, refetch, isRefetching } = useOperationalPages();
+  const {
+    data: pages,
+    isLoading,
+    error,
+    refetch,
+    isRefetching,
+  } = useOperationalPages();
  const deleteMutation = useDeleteOperationalPage();

-  const [editingPage, setEditingPage] = useState<OperationalPageRecord | null>(null);
+  const [editingPage, setEditingPage] = useState<OperationalPageRecord | null>(
+    null
+  );
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [pageToDelete, setPageToDelete] = useState<OperationalPageRecord | null>(null);
+  const [pageToDelete, setPageToDelete] =
+    useState<OperationalPageRecord | null>(null);

  const handleEdit = (page: OperationalPageRecord) => {
    setEditingPage(page);
@@ -37,10 +49,10 @@ export const OperationalPageContent = () => {

  const handleView = (page: OperationalPageRecord) => {
    if (page.custom_domain) {
-      window.open(`https://${page.custom_domain}`, '_blank');
+      window.open(`https://${page.custom_domain}`, "_blank");
    } else {
      // Navigate to the public status page route using the correct format
-      window.open(`/public/${page.slug}`, '_blank');
+      window.open(`/public/${page.slug}`, "_blank");
    }
  };

@@ -56,7 +68,7 @@ export const OperationalPageContent = () => {
        setDeleteDialogOpen(false);
        setPageToDelete(null);
      } catch (error) {
-        console.error('Error deleting page:', error);
+        console.error("Error deleting page:", error);
      }
    }
  };
@@ -68,7 +80,9 @@ export const OperationalPageContent = () => {
          <div className="mb-4">
            <Activity className="h-12 w-12 text-muted-foreground mx-auto" />
          </div>
-          <h3 className="text-lg font-semibold mb-2">Failed to load operational pages</h3>
+          <h3 className="text-lg font-semibold mb-2">
+            Failed to load operational pages
+          </h3>
          <p className="text-muted-foreground mb-4">
            There was an error loading your operational pages. Please try again.
          </p>
@@ -82,11 +96,13 @@ export const OperationalPageContent = () => {
  }

  return (
-    <div className="container mx-auto px-4 py-8">
+    <div className="w-full container mx-auto px-4 py-8  ">
      {/* Header */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 ">
        <div>
-          <h1 className="text-3xl font-bold tracking-tight mb-2">Operational Pages</h1>
+          <h1 className="text-3xl font-bold tracking-tight mb-2">
+            Operational Pages
+          </h1>
          <p className="text-muted-foreground">
            Manage your public status pages and monitor service health
          </p>
@@ -99,7 +115,9 @@ export const OperationalPageContent = () => {
            onClick={() => refetch()}
            disabled={isRefetching}
          >
-            <RefreshCw className={`h-4 w-4 mr-2 ${isRefetching ? 'animate-spin' : ''}`} />
+            <RefreshCw
+              className={`h-4 w-4 mr-2 ${isRefetching ? "animate-spin" : ""}`}
+            />
            Refresh
          </Button>
          <CreateOperationalPageDialog />
@@ -135,9 +153,12 @@ export const OperationalPageContent = () => {
            <div className="mb-4">
              <Activity className="h-12 w-12 text-muted-foreground mx-auto" />
            </div>
-            <h3 className="text-lg font-semibold mb-2">No operational pages found</h3>
+            <h3 className="text-lg font-semibold mb-2">
+              No operational pages found
+            </h3>
            <p className="text-muted-foreground mb-6">
-              Create your first operational page to start monitoring your services and communicate status to your users.
+              Create your first operational page to start monitoring your
+              services and communicate status to your users.
            </p>
            <CreateOperationalPageDialog />
          </CardContent>
@@ -167,12 +188,12 @@ export const OperationalPageContent = () => {
              <span className="font-medium">Total Pages:</span> {pages.length}
            </div>
            <div>
-              <span className="font-medium">Public Pages:</span>{' '}
-              {pages.filter(p => p.is_public === 'true').length}
+              <span className="font-medium">Public Pages:</span>{" "}
+              {pages.filter((p) => p.is_public === "true").length}
            </div>
            <div>
-              <span className="font-medium">Operational:</span>{' '}
-              {pages.filter(p => p.status === 'operational').length}
+              <span className="font-medium">Operational:</span>{" "}
+              {pages.filter((p) => p.status === "operational").length}
            </div>
          </div>
        </div>
@@ -191,7 +212,9 @@ export const OperationalPageContent = () => {
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Operational Page</AlertDialogTitle>
            <AlertDialogDescription>
-              Are you sure you want to delete "{pageToDelete?.title}"? This action cannot be undone and will permanently remove the operational page and all its components.
+              Are you sure you want to delete "{pageToDelete?.title}"? This
+              action cannot be undone and will permanently remove the
+              operational page and all its components.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
@@ -201,7 +224,7 @@ export const OperationalPageContent = () => {
              className="bg-red-600 hover:bg-red-700"
              disabled={deleteMutation.isPending}
            >
-              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
+              {deleteMutation.isPending ? "Deleting..." : "Delete"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
@@ -1,8 +1,13 @@
-
 import React, { useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Plus, MapPin, Activity, Wifi, WifiOff } from "lucide-react";
 import { regionalService } from "@/services/regionalService";
 import { RegionalService } from "@/types/regional.types";
@@ -15,24 +20,29 @@ export const RegionalMonitoringContent = () => {
  const { toast } = useToast();
  const queryClient = useQueryClient();

-  const { data: regionalServices = [], isLoading, error } = useQuery({
-    queryKey: ['regional-services'],
+  const {
+    data: regionalServices = [],
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["regional-services"],
    queryFn: regionalService.getRegionalServices,
    refetchInterval: 30000, // Refetch every 30 seconds
  });

  const handleAgentAdded = () => {
-    queryClient.invalidateQueries({ queryKey: ['regional-services'] });
+    queryClient.invalidateQueries({ queryKey: ["regional-services"] });
    toast({
      title: "Regional Agent Added",
-      description: "The regional monitoring agent has been successfully configured.",
+      description:
+        "The regional monitoring agent has been successfully configured.",
    });
  };

  const handleDeleteAgent = async (id: string) => {
    try {
      await regionalService.deleteRegionalService(id);
-      queryClient.invalidateQueries({ queryKey: ['regional-services'] });
+      queryClient.invalidateQueries({ queryKey: ["regional-services"] });
      toast({
        title: "Agent Removed",
        description: "The regional monitoring agent has been removed.",
@@ -46,14 +56,18 @@ export const RegionalMonitoringContent = () => {
    }
  };

-  const onlineAgents = regionalServices.filter(agent => agent.connection === 'online').length;
+  const onlineAgents = regionalServices.filter(
+    (agent) => agent.connection === "online"
+  ).length;
  const totalAgents = regionalServices.length;

  return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 space-y-6 ">
      <div className="flex justify-between items-center">
        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Regional Monitoring</h1>
+          <h1 className="text-3xl font-bold tracking-tight">
+            Regional Monitoring
+          </h1>
          <p className="text-muted-foreground">
            Manage distributed monitoring agents across different regions
          </p>
@@ -85,23 +99,25 @@ export const RegionalMonitoringContent = () => {
            <Wifi className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
-            <div className="text-2xl font-bold text-green-600">{onlineAgents}</div>
-            <p className="text-xs text-muted-foreground">
-              Currently connected
-            </p>
+            <div className="text-2xl font-bold text-green-600">
+              {onlineAgents}
+            </div>
+            <p className="text-xs text-muted-foreground">Currently connected</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Offline Agents</CardTitle>
+            <CardTitle className="text-sm font-medium">
+              Offline Agents
+            </CardTitle>
            <WifiOff className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
-            <div className="text-2xl font-bold text-red-600">{totalAgents - onlineAgents}</div>
-            <p className="text-xs text-muted-foreground">
-              Disconnected agents
-            </p>
+            <div className="text-2xl font-bold text-red-600">
+              {totalAgents - onlineAgents}
+            </div>
+            <p className="text-xs text-muted-foreground">Disconnected agents</p>
          </CardContent>
        </Card>
      </div>
@@ -133,7 +149,8 @@ export const RegionalMonitoringContent = () => {
              <MapPin className="h-12 w-12 text-muted-foreground mb-4" />
              <h3 className="text-lg font-semibold mb-2">No Regional Agents</h3>
              <p className="text-muted-foreground text-center mb-4">
-                Get started by adding your first regional monitoring agent to extend your monitoring coverage.
+                Get started by adding your first regional monitoring agent to
+                extend your monitoring coverage.
              </p>
              <Button onClick={() => setAddDialogOpen(true)}>
                <Plus className="mr-2 h-4 w-4" />
@@ -1,33 +1,37 @@
-
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { Plus, CalendarClock, AlertCircle } from "lucide-react";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { ScheduledMaintenanceTab } from "./ScheduledMaintenanceTab";
 import { IncidentManagementTab } from "./IncidentManagementTab";
-import { CreateMaintenanceDialog } from './maintenance/CreateMaintenanceDialog';
-import { CreateIncidentDialog } from './incident/CreateIncidentDialog';
-import { useToast } from '@/hooks/use-toast';
-import { initMaintenanceNotifications, stopMaintenanceNotifications } from '@/services/maintenance/maintenanceNotificationService';
+import { CreateMaintenanceDialog } from "./maintenance/CreateMaintenanceDialog";
+import { CreateIncidentDialog } from "./incident/CreateIncidentDialog";
+import { useToast } from "@/hooks/use-toast";
+import {
+  initMaintenanceNotifications,
+  stopMaintenanceNotifications,
+} from "@/services/maintenance/maintenanceNotificationService";

 export const ScheduleIncidentContent = () => {
  const { t } = useLanguage();
  const { toast } = useToast();
  const [activeTab, setActiveTab] = useState("maintenance");
-  const [createMaintenanceDialogOpen, setCreateMaintenanceDialogOpen] = useState(false);
-  const [createIncidentDialogOpen, setCreateIncidentDialogOpen] = useState(false);
+  const [createMaintenanceDialogOpen, setCreateMaintenanceDialogOpen] =
+    useState(false);
+  const [createIncidentDialogOpen, setCreateIncidentDialogOpen] =
+    useState(false);
  const [refreshTrigger, setRefreshTrigger] = useState(0);
  const [incidentRefreshTrigger, setIncidentRefreshTrigger] = useState(0);

  // Initialize maintenance notifications when the component mounts
  useEffect(() => {
-   // console.log("Initializing maintenance notifications");
+    // console.log("Initializing maintenance notifications");
    initMaintenanceNotifications();

    // Clean up when the component unmounts
    return () => {
-     // console.log("Cleaning up maintenance notifications");
+      // console.log("Cleaning up maintenance notifications");
      stopMaintenanceNotifications();
    };
  }, []);
@@ -43,42 +47,44 @@ export const ScheduleIncidentContent = () => {
  const handleMaintenanceCreated = () => {
    // Refresh data by incrementing the refresh trigger
    const newTriggerValue = refreshTrigger + 1;
-   // console.log("Maintenance created, refreshing data with new trigger value:", newTriggerValue);
+    // console.log("Maintenance created, refreshing data with new trigger value:", newTriggerValue);
    setRefreshTrigger(newTriggerValue);

    // Show success toast
    toast({
-      title: t('success'),
-      description: t('maintenanceCreatedSuccess'),
+      title: t("success"),
+      description: t("maintenanceCreatedSuccess"),
    });
  };

  const handleIncidentCreated = () => {
    // Refresh data by incrementing the refresh trigger
    const newTriggerValue = incidentRefreshTrigger + 1;
-   // console.log("Incident created, refreshing data with new trigger value:", newTriggerValue);
+    // console.log("Incident created, refreshing data with new trigger value:", newTriggerValue);
    setIncidentRefreshTrigger(newTriggerValue);

    // Show success toast
    toast({
-      title: t('success'),
-      description: t('incidentCreatedSuccess'),
+      title: t("success"),
+      description: t("incidentCreatedSuccess"),
    });
  };

  return (
-    <main className="flex-1 flex flex-col overflow-auto bg-background p-6">
-      <div className="flex flex-col gap-6">
+    <main className="flex-1 flex flex-col overflow-auto bg-background  dark:bg-black p-2 ">
+      <div className="flex flex-col gap-6 bg-white dark:bg-black p-3 h-full rounded-xl">
        <div className="flex justify-between items-center">
          <h2 className="text-2xl font-bold text-foreground">
-            {t('scheduleIncidentManagement')}
+            {t("scheduleIncidentManagement")}
          </h2>
          <Button
            className="text-primary-foreground"
            onClick={handleCreateButtonClick}
          >
            <Plus className="w-4 h-4 mr-2" />
-            {activeTab === "maintenance" ? t('createMaintenanceWindow') : t('createIncident')}
+            {activeTab === "maintenance"
+              ? t("createMaintenanceWindow")
+              : t("createIncident")}
          </Button>
        </div>

@@ -90,11 +96,11 @@ export const ScheduleIncidentContent = () => {
          <TabsList className="grid w-full grid-cols-2 mb-4">
            <TabsTrigger value="maintenance">
              <CalendarClock className="w-4 h-4 mr-2" />
-              {t('scheduledMaintenance')}
+              {t("scheduledMaintenance")}
            </TabsTrigger>
            <TabsTrigger value="incidents">
              <AlertCircle className="w-4 h-4 mr-2" />
-              {t('incidentManagement')}
+              {t("incidentManagement")}
            </TabsTrigger>
          </TabsList>

@@ -1,13 +1,45 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
-import { RefreshCw, Search, Eye, Activity, MoreHorizontal, Pause, Play, Edit, Trash2 } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  RefreshCw,
+  Search,
+  Eye,
+  Activity,
+  MoreHorizontal,
+  Pause,
+  Play,
+  Edit,
+  Trash2,
+} from "lucide-react";
 import { Server } from "@/types/server.types";
 import { ServerStatusBadge } from "./ServerStatusBadge";
 import { OSTypeIcon } from "./OSTypeIcon";
@@ -23,7 +55,11 @@ interface ServerTableProps {
  onRefresh: () => void;
 }

-export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps) => {
+export const ServerTable = ({
+  servers,
+  isLoading,
+  onRefresh,
+}: ServerTableProps) => {
  const { theme } = useTheme();
  const [searchTerm, setSearchTerm] = useState("");
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -34,10 +70,11 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
  const navigate = useNavigate();
  const { toast } = useToast();

-  const filteredServers = servers.filter(server =>
-    server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    server.hostname.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    server.ip_address.toLowerCase().includes(searchTerm.toLowerCase())
+  const filteredServers = servers.filter(
+    (server) =>
+      server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      server.hostname.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      server.ip_address.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const handleViewDetails = (serverId: string) => {
@@ -57,35 +94,38 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
    }

    try {
-      setPausingServers(prev => new Set(prev).add(serverId));
+      setPausingServers((prev) => new Set(prev).add(serverId));

      // Only update the status field, preserving all other server configuration
      const updateData = {
        status: isPaused ? "up" : "paused",
-        last_checked: new Date().toISOString()
+        last_checked: new Date().toISOString(),
      };

-      await pb.collection('servers').update(serverId, updateData);
+      await pb.collection("servers").update(serverId, updateData);

      toast({
        title: isPaused ? "Server resumed" : "Server paused",
-        description: `Monitoring ${isPaused ? 'resumed' : 'paused'} for ${server.name}`,
+        description: `Monitoring ${isPaused ? "resumed" : "paused"} for ${
+          server.name
+        }`,
      });

-     // console.log(`${isPaused ? 'Resume' : 'Pause'} server monitoring: ${serverId}`);
+      // console.log(`${isPaused ? 'Resume' : 'Pause'} server monitoring: ${serverId}`);

      // Refresh the server list to show updated status
      onRefresh();
-      
    } catch (error) {
-     // console.error('Error updating server status:', error);
+      // console.error('Error updating server status:', error);
      toast({
        variant: "destructive",
        title: "Error",
-        description: `Failed to ${isPaused ? 'resume' : 'pause'} server monitoring. Please try again.`,
+        description: `Failed to ${
+          isPaused ? "resume" : "pause"
+        } server monitoring. Please try again.`,
      });
    } finally {
-      setPausingServers(prev => {
+      setPausingServers((prev) => {
        const newSet = new Set(prev);
        newSet.delete(serverId);
        return newSet;
@@ -110,7 +150,7 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
      setIsDeleting(true);

      // Delete the server from the database
-      await pb.collection('servers').delete(selectedServer.id);
+      await pb.collection("servers").delete(selectedServer.id);

      toast({
        title: "Server deleted",
@@ -123,9 +163,8 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
      // Close the dialog
      setDeleteDialogOpen(false);
      setSelectedServer(null);
-      
    } catch (error) {
-     // console.error('Error deleting server:', error);
+      // console.error('Error deleting server:', error);
      toast({
        variant: "destructive",
        title: "Error",
@@ -140,61 +179,61 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
    value,
    label,
    subtitle,
-    type 
+    type,
  }: {
    value: number;
    label: string;
    subtitle: string;
-    type: 'cpu' | 'memory' | 'disk' 
+    type: "cpu" | "memory" | "disk";
  }) => {
    const getGradientColors = (type: string, value: number) => {
-      if (type === 'cpu') {
-        if (value > 90) return 'from-red-500 to-red-600';
-        if (value > 75) return 'from-orange-500 to-orange-600';
-        if (value > 60) return 'from-yellow-500 to-yellow-600';
-        return 'from-green-500 to-green-600';
+      if (type === "cpu") {
+        if (value > 90) return "from-red-500 to-red-600";
+        if (value > 75) return "from-orange-500 to-orange-600";
+        if (value > 60) return "from-yellow-500 to-yellow-600";
+        return "from-green-500 to-green-600";
      }
-      if (type === 'memory') {
-        if (value > 90) return 'from-red-500 to-red-600';
-        if (value > 75) return 'from-yellow-500 to-yellow-600';
-        return 'from-blue-500 to-blue-600';
+      if (type === "memory") {
+        if (value > 90) return "from-red-500 to-red-600";
+        if (value > 75) return "from-yellow-500 to-yellow-600";
+        return "from-blue-500 to-blue-600";
      }
-      if (type === 'disk') {
-        if (value > 95) return 'from-red-500 to-red-600';
-        if (value > 85) return 'from-yellow-500 to-yellow-600';
-        return 'from-orange-500 to-orange-600';
+      if (type === "disk") {
+        if (value > 95) return "from-red-500 to-red-600";
+        if (value > 85) return "from-yellow-500 to-yellow-600";
+        return "from-orange-500 to-orange-600";
      }
-      return 'from-gray-500 to-gray-600';
+      return "from-gray-500 to-gray-600";
    };

    const getTextColor = (value: number) => {
-      if (value > 90) return 'text-red-600 dark:text-red-400';
-      if (value > 75) return 'text-orange-600 dark:text-orange-400';
-      if (value > 60) return 'text-yellow-600 dark:text-yellow-400';
-      return 'text-green-600 dark:text-green-400';
+      if (value > 90) return "text-red-600 dark:text-red-400";
+      if (value > 75) return "text-orange-600 dark:text-orange-400";
+      if (value > 60) return "text-yellow-600 dark:text-yellow-400";
+      return "text-green-600 dark:text-green-400";
    };

    return (
-      <div className="space-y-2 min-w-[120px]">
+      <div className="space-y-2 min-w-[120px] -mt-20">
        <div className="flex justify-between items-center">
          <span className={`text-sm font-semibold ${getTextColor(value)}`}>
            {label}
          </span>
-          <span className="text-xs text-muted-foreground">
-            {subtitle}
-          </span>
+          <span className="text-xs text-muted-foreground">{subtitle} </span>
        </div>
        <div className="relative">
          <div className="w-full h-3 bg-muted/30 rounded-full overflow-hidden shadow-inner">
            <div
-              className={`h-full bg-gradient-to-r ${getGradientColors(type, value)} rounded-full transition-all duration-700 ease-out relative overflow-hidden`}
+              className={`h-full bg-gradient-to-r ${getGradientColors(
+                type,
+                value
+              )} rounded-full transition-all duration-700 ease-out relative overflow-hidden`}
              style={{ width: `${Math.min(value, 100)}%` }}
            >
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse opacity-60" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-white/10" />
            </div>
          </div>
-          
        </div>
      </div>
    );
@@ -202,7 +241,7 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)

  if (isLoading) {
    return (
-      <Card className="flex-1 flex flex-col">
+      <Card className="flex-1 flex flex-col ">
        <CardHeader className="flex-shrink-0">
          <CardTitle>Servers</CardTitle>
        </CardHeader>
@@ -244,27 +283,107 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
              <p className="text-muted-foreground">No servers found</p>
            </div>
          ) : (
-            <div className={`${theme === 'dark' ? 'bg-gray-900' : 'bg-white'} rounded-lg border border-border shadow-sm`}>
+            <div
+              className={`${
+                theme === "dark" ? "bg-gray-900" : "bg-white"
+              } rounded-lg border border-border shadow-sm`}
+            >
              <Table>
-                <TableHeader className={`${theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'}`}>
-                  <TableRow className={`${theme === 'dark' ? 'border-gray-700 hover:bg-gray-800' : 'border-gray-200 hover:bg-gray-100'}`}>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Name</TableHead>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Status</TableHead>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>OS</TableHead>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>IP Address</TableHead>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>CPU</TableHead>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Memory</TableHead>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Disk</TableHead>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Uptime</TableHead>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Last Checked</TableHead>
-                    <TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4 text-right`}>Actions</TableHead>
+                <TableHeader
+                  className={`${
+                    theme === "dark" ? "bg-gray-800" : "bg-gray-50"
+                  }`}
+                >
+                  <TableRow
+                    className={`${
+                      theme === "dark"
+                        ? "border-gray-700 hover:bg-gray-800"
+                        : "border-gray-200 hover:bg-gray-100"
+                    }`}
+                  >
+                    <TableHead
+                      className={`${
+                        theme === "dark" ? "text-gray-300" : "text-gray-700"
+                      } font-medium text-base py-4`}
+                    >
+                      Name
+                    </TableHead>
+                    <TableHead
+                      className={`${
+                        theme === "dark" ? "text-gray-300" : "text-gray-700"
+                      } font-medium text-base py-4`}
+                    >
+                      Status
+                    </TableHead>
+                    <TableHead
+                      className={`${
+                        theme === "dark" ? "text-gray-300" : "text-gray-700"
+                      } font-medium text-base py-4`}
+                    >
+                      OS
+                    </TableHead>
+                    <TableHead
+                      className={`${
+                        theme === "dark" ? "text-gray-300" : "text-gray-700"
+                      } font-medium text-base py-4`}
+                    >
+                      IP Address
+                    </TableHead>
+                    <TableHead
+                      className={`${
+                        theme === "dark" ? "text-gray-300" : "text-gray-700"
+                      } font-medium text-base py-4`}
+                    >
+                      CPU
+                    </TableHead>
+                    <TableHead
+                      className={`${
+                        theme === "dark" ? "text-gray-300" : "text-gray-700"
+                      } font-medium text-base py-4`}
+                    >
+                      Memory
+                    </TableHead>
+                    <TableHead
+                      className={`${
+                        theme === "dark" ? "text-gray-300" : "text-gray-700"
+                      } font-medium text-base py-4`}
+                    >
+                      Disk
+                    </TableHead>
+                    <TableHead
+                      className={`${
+                        theme === "dark" ? "text-gray-300" : "text-gray-700"
+                      } font-medium text-base py-4`}
+                    >
+                      Uptime
+                    </TableHead>
+                    <TableHead
+                      className={`${
+                        theme === "dark" ? "text-gray-300" : "text-gray-700"
+                      } font-medium text-base py-4`}
+                    >
+                      Last Checked
+                    </TableHead>
+                    <TableHead
+                      className={`${
+                        theme === "dark" ? "text-gray-300" : "text-gray-700"
+                      } font-medium text-base py-4 text-right`}
+                    >
+                      Actions
+                    </TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredServers.map((server) => {
                    const cpuUsage = server.cpu_usage || 0;
-                    const memoryUsage = server.ram_total > 0 ? (server.ram_used / server.ram_total) * 100 : 0;
-                    const diskUsage = server.disk_total > 0 ? (server.disk_used / server.disk_total) * 100 : 0;
+                    const memoryUsage =
+                      server.ram_total > 0
+                        ? (server.ram_used / server.ram_total) * 100
+                        : 0;
+                    const diskUsage =
+                      server.disk_total > 0
+                        ? (server.disk_used / server.disk_total) * 100
+                        : 0;
                    const isPaused = server.status === "paused";
                    const isProcessing = pausingServers.has(server.id);

@@ -285,7 +404,10 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <OSTypeIcon osType={server.os_type} />
-                            <span className="text-sm truncate" title={server.os_type}>
+                            <span
+                              className="text-sm truncate"
+                              title={server.os_type}
+                            >
                              {server.os_type}
                            </span>
                          </div>
@@ -307,7 +429,9 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                          <CustomProgressBar
                            value={memoryUsage}
                            label={`${memoryUsage.toFixed(1)}%`}
-                            subtitle={serverService.formatBytes(server.ram_total)}
+                            subtitle={serverService.formatBytes(
+                              server.ram_total
+                            )}
                            type="memory"
                          />
                        </TableCell>
@@ -315,12 +439,17 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                          <CustomProgressBar
                            value={diskUsage}
                            label={`${diskUsage.toFixed(1)}%`}
-                            subtitle={serverService.formatBytes(server.disk_total)}
+                            subtitle={serverService.formatBytes(
+                              server.disk_total
+                            )}
                            type="disk"
                          />
                        </TableCell>
                        <TableCell>
-                          <div className="text-sm truncate" title={server.uptime}>
+                          <div
+                            className="text-sm truncate"
+                            title={server.uptime}
+                          >
                            {server.uptime}
                          </div>
                        </TableCell>
@@ -329,10 +458,17 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                            {new Date(server.last_checked).toLocaleString()}
                          </div>
                        </TableCell>
-                        <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+                        <TableCell
+                          className="text-right"
+                          onClick={(e) => e.stopPropagation()}
+                        >
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
-                              <Button variant="ghost" className="h-8 w-8 p-0" disabled={isProcessing}>
+                              <Button
+                                variant="ghost"
+                                className="h-8 w-8 p-0"
+                                disabled={isProcessing}
+                              >
                                <span className="sr-only">Open menu</span>
                                {isProcessing ? (
                                  <RefreshCw className="h-4 w-4 animate-spin" />
@@ -341,20 +477,36 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                                )}
                              </Button>
                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="w-[200px]">
-                              <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleViewDetails(server.id); }}>
+                            <DropdownMenuContent
+                              align="end"
+                              className="w-[200px]"
+                            >
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleViewDetails(server.id);
+                                }}
+                              >
                                <Eye className="mr-2 h-4 w-4" />
                                View Server Detail
                              </DropdownMenuItem>
-                              {server.docker === 'true' && (
-                                <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleViewContainers(server.id); }}>
+                              {server.docker === "true" && (
+                                <DropdownMenuItem
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleViewContainers(server.id);
+                                  }}
+                                >
                                  <Activity className="mr-2 h-4 w-4" />
                                  Container Monitoring
                                </DropdownMenuItem>
                              )}
                              <DropdownMenuSeparator />
                              <DropdownMenuItem
-                                onClick={(e) => { e.stopPropagation(); handlePauseResume(server); }}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePauseResume(server);
+                                }}
                                disabled={isProcessing}
                              >
                                {isPaused ? (
@@ -370,12 +522,20 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                                )}
                              </DropdownMenuItem>
                              <DropdownMenuSeparator />
-                              <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleEdit(server); }}>
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleEdit(server);
+                                }}
+                              >
                                <Edit className="mr-2 h-4 w-4" />
                                Edit Server
                              </DropdownMenuItem>
                              <DropdownMenuItem
-                                onClick={(e) => { e.stopPropagation(); handleDelete(server); }}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleDelete(server);
+                                }}
                                className="text-red-600 focus:text-red-600"
                              >
                                <Trash2 className="mr-2 h-4 w-4" />
@@ -406,19 +566,19 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure you want to delete this server?</AlertDialogTitle>
+            <AlertDialogTitle>
+              Are you sure you want to delete this server?
+            </AlertDialogTitle>
            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete{' '}
+              This action cannot be undone. This will permanently delete{" "}
              <span className="font-semibold text-foreground">
                {selectedServer?.name}
-              </span>{' '}
+              </span>{" "}
              and all of its monitoring data.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>
-              Cancel
-            </AlertDialogCancel>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={confirmDelete}
              disabled={isDeleting}
@@ -25,19 +25,21 @@ const UptimeBarComponent = ({ uptime, status, serviceId, interval, serviceType =
    return start;
  }, [endDate, interval]);

-  // Fetch uptime data with very aggressive caching to reduce API calls
+  // Fetch uptime data with immediate display and background updates
  const { data: uptimeData = [] } = useQuery({
    queryKey: ['uptime-bar', serviceId, serviceType],
    queryFn: () => uptimeService.getUptimeHistory(serviceId, 20, startDate, endDate, serviceType),
    enabled: !!serviceId,
-    staleTime: 30000, // Data is fresh for 30 seconds
-    gcTime: 600000, // Keep in cache for 10 minutes
-    refetchInterval: 60000, // 1 minute polling
+    staleTime: 300000, // Data stays fresh for 5 minutes - display immediately from cache
+    gcTime: 900000, // Keep in cache for 15 minutes
+    refetchInterval: 300000, // Reduced to 5 minute polling
    refetchOnWindowFocus: false,
    refetchOnMount: false,
    refetchOnReconnect: false,
-    retry: 3,
-    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+    retry: 1, // Reduce retries for faster failure
+    retryDelay: 1000, // Faster retry delay
+    refetchIntervalInBackground: true, // Allow background updates
+    placeholderData: (previousData) => previousData, // Keep showing previous data while refetching
  });

  // Memoize the uptime calculation to prevent unnecessary recalculations
@@ -2,13 +2,24 @@ import React, { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import { Plus, RefreshCw } from "lucide-react";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { toast } from "sonner";

 import { SSLCertificateStatusCards } from "./SSLCertificateStatusCards";
 import { SSLCertificatesTable } from "./SSLCertificatesTable";
 import { LoadingState } from "@/components/services/LoadingState";
-import { fetchSSLCertificates, addSSLCertificate, checkAndUpdateCertificate, refreshAllCertificates, deleteSSLCertificate } from "@/services/ssl";
+import {
+  fetchSSLCertificates,
+  addSSLCertificate,
+  checkAndUpdateCertificate,
+  refreshAllCertificates,
+  deleteSSLCertificate,
+} from "@/services/ssl";
 import { AddSSLCertificateForm } from "./AddSSLCertificateForm";
 import { EditSSLCertificateForm } from "./EditSSLCertificateForm";
 import type { AddSSLCertificateDto, SSLCertificate } from "@/types/ssl.types";
@@ -21,18 +32,23 @@ export const SSLDomainContent = () => {
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [refreshingId, setRefreshingId] = useState<string | null>(null);
  const [isRefreshingAll, setIsRefreshingAll] = useState(false);
-  const [selectedCertificate, setSelectedCertificate] = useState<SSLCertificate | null>(null);
+  const [selectedCertificate, setSelectedCertificate] =
+    useState<SSLCertificate | null>(null);
  const queryClient = useQueryClient();

  // Fetch SSL certificates with explicit error handling
-  const { data: certificates = [], isLoading, error } = useQuery({
-    queryKey: ['ssl-certificates'],
+  const {
+    data: certificates = [],
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["ssl-certificates"],
    queryFn: async () => {
      try {
        const result = await fetchSSLCertificates();
        return result;
      } catch (error) {
-        toast.error(t('failedToLoadCertificates'));
+        toast.error(t("failedToLoadCertificates"));
        throw error;
      }
    },
@@ -44,32 +60,34 @@ export const SSLDomainContent = () => {
  const addMutation = useMutation({
    mutationFn: addSSLCertificate,
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] });
+      queryClient.invalidateQueries({ queryKey: ["ssl-certificates"] });
      setIsAddDialogOpen(false);
-      toast.success(t('sslCertificateAdded'));
+      toast.success(t("sslCertificateAdded"));
    },
    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : t('failedToAddCertificate'));
-    }
+      toast.error(
+        error instanceof Error ? error.message : t("failedToAddCertificate")
+      );
+    },
  });

  // Edit certificate mutation - Updated to include notification_id and template_id
  const editMutation = useMutation({
    mutationFn: async (certificate: SSLCertificate) => {
-      
      // Create the update data object with new fields
      const updateData = {
        warning_threshold: Number(certificate.warning_threshold),
        expiry_threshold: Number(certificate.expiry_threshold),
        notification_channel: certificate.notification_channel,
-        notification_id: certificate.notification_id || '', // Multi notification channels
-        template_id: certificate.template_id || '', // Alert template ID
+        notification_id: certificate.notification_id || "", // Multi notification channels
+        template_id: certificate.template_id || "", // Alert template ID
        check_interval: certificate.check_interval,
      };

-      
      // Update certificate in the database using PocketBase directly
-      const updated = await pb.collection('ssl_certificates').update(certificate.id, updateData);
+      const updated = await pb
+        .collection("ssl_certificates")
+        .update(certificate.id, updateData);

      // After updating the settings, refresh the certificate to ensure it's up to date
      // This will also check if notification needs to be sent based on updated thresholds
@@ -78,33 +96,37 @@ export const SSLDomainContent = () => {
      return refreshedCert;
    },
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] });
+      queryClient.invalidateQueries({ queryKey: ["ssl-certificates"] });
      setIsEditDialogOpen(false);
      setSelectedCertificate(null);
-      toast.success(t('sslCertificateUpdated'));
+      toast.success(t("sslCertificateUpdated"));
    },
    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : t('failedToUpdateCertificate'));
-    }
+      toast.error(
+        error instanceof Error ? error.message : t("failedToUpdateCertificate")
+      );
+    },
  });

  // Delete certificate mutation
  const deleteMutation = useMutation({
    mutationFn: deleteSSLCertificate,
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] });
-      toast.success(t('sslCertificateDeleted'));
+      queryClient.invalidateQueries({ queryKey: ["ssl-certificates"] });
+      toast.success(t("sslCertificateDeleted"));
    },
    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : t('failedToDeleteCertificate'));
-    }
+      toast.error(
+        error instanceof Error ? error.message : t("failedToDeleteCertificate")
+      );
+    },
  });

  // Refresh certificate mutation - Updated to remove individual toast notifications
  const refreshMutation = useMutation({
    mutationFn: checkAndUpdateCertificate,
    onSuccess: (data) => {
-      queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] });
+      queryClient.invalidateQueries({ queryKey: ["ssl-certificates"] });
      setRefreshingId(null);
      // Removed individual success toast notification
    },
@@ -112,33 +134,40 @@ export const SSLDomainContent = () => {
      setRefreshingId(null);

      // Still refresh the data to show any partial information that was saved
-      queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] });
+      queryClient.invalidateQueries({ queryKey: ["ssl-certificates"] });
      // Removed individual error toast notification
-    }
+    },
  });

  // Refresh all certificates mutation
  const refreshAllMutation = useMutation({
    mutationFn: refreshAllCertificates,
    onSuccess: (result) => {
-      queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] });
+      queryClient.invalidateQueries({ queryKey: ["ssl-certificates"] });
      setIsRefreshingAll(false);

      if (result.failed === 0) {
-        toast.success(t('allCertificatesRefreshed').replace('{count}', result.success.toString()));
+        toast.success(
+          t("allCertificatesRefreshed").replace(
+            "{count}",
+            result.success.toString()
+          )
+        );
      } else {
-        toast.info(t('someCertificatesFailed')
-          .replace('{success}', result.success.toString())
-          .replace('{failed}', result.failed.toString()));
+        toast.info(
+          t("someCertificatesFailed")
+            .replace("{success}", result.success.toString())
+            .replace("{failed}", result.failed.toString())
+        );
      }
    },
    onError: (error) => {
-      toast.error(t('failedToCheckCertificate'));
+      toast.error(t("failedToCheckCertificate"));
      setIsRefreshingAll(false);

      // Still refresh the data to show any partial information
-      queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] });
-    }
+      queryClient.invalidateQueries({ queryKey: ["ssl-certificates"] });
+    },
  });

  const handleAddCertificate = async (data: AddSSLCertificateDto) => {
@@ -166,12 +195,14 @@ export const SSLDomainContent = () => {

  const handleRefreshAll = async () => {
    if (certificates.length === 0) {
-      toast.info(t('noCertificatesToRefresh'));
+      toast.info(t("noCertificatesToRefresh"));
      return;
    }

    setIsRefreshingAll(true);
-    toast.info(t('startingRefreshAll').replace('{count}', certificates.length.toString()));
+    toast.info(
+      t("startingRefreshAll").replace("{count}", certificates.length.toString())
+    );
    refreshAllMutation.mutate();
  };

@@ -182,21 +213,29 @@ export const SSLDomainContent = () => {
  if (error) {
    return (
      <div className="flex flex-col items-center justify-center h-full gap-4 text-foreground">
-        <p>{t('failedToLoadCertificates')}</p>
-        <Button onClick={() => queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] })}>
-          {t('check')}
+        <p>{t("failedToLoadCertificates")}</p>
+        <Button
+          onClick={() =>
+            queryClient.invalidateQueries({ queryKey: ["ssl-certificates"] })
+          }
+        >
+          {t("check")}
        </Button>
      </div>
    );
  }

  return (
-    <main className="flex-1 flex flex-col overflow-auto bg-background p-6 pb-0">
-      <div className="flex flex-col flex-1">
+    <main className="flex-1 flex flex-col overflow-auto bg-background pb-0  dark:bg-black p-2 ">
+      <div className="flex flex-col flex-1 bg-white dark:bg-black p-6 rounded-xl">
        <div className="flex justify-between items-center mb-6">
          <div>
-            <h2 className="text-2xl font-bold text-foreground">{t('sslDomainManagement')}</h2>
-            <p className="text-sm text-muted-foreground mt-1">{t('monitorSSLCertificates')}</p>
+            <h2 className="text-2xl font-bold text-foreground">
+              {t("sslDomainManagement")}
+            </h2>
+            <p className="text-sm text-muted-foreground mt-1">
+              {t("monitorSSLCertificates")}
+            </p>
          </div>
          <div className="flex gap-2">
            <Button
@@ -205,8 +244,12 @@ export const SSLDomainContent = () => {
              disabled={isRefreshingAll || refreshingId !== null}
              className="relative"
            >
-              <RefreshCw className={`w-4 h-4 mr-2 ${isRefreshingAll ? 'animate-spin' : ''}`} /> 
-              {t('refreshAll')}
+              <RefreshCw
+                className={`w-4 h-4 mr-2 ${
+                  isRefreshingAll ? "animate-spin" : ""
+                }`}
+              />
+              {t("refreshAll")}
              {isRefreshingAll && (
                <span className="absolute top-0 right-0 -mt-2 -mr-2 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                  ...
@@ -217,7 +260,7 @@ export const SSLDomainContent = () => {
              className="text-primary-foreground"
              onClick={() => setIsAddDialogOpen(true)}
            >
-              <Plus className="w-4 h-4 mr-2" /> {t('addDomain')}
+              <Plus className="w-4 h-4 mr-2" /> {t("addDomain")}
            </Button>
          </div>
        </div>
@@ -232,7 +275,7 @@ export const SSLDomainContent = () => {
      <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
        <DialogContent>
          <DialogHeader>
-            <DialogTitle>{t('addSSLCertificate')}</DialogTitle>
+            <DialogTitle>{t("addSSLCertificate")}</DialogTitle>
          </DialogHeader>
          <AddSSLCertificateForm
            onSubmit={handleAddCertificate}
@@ -243,13 +286,16 @@ export const SSLDomainContent = () => {
      </Dialog>

      {selectedCertificate && (
-        <Dialog open={isEditDialogOpen} onOpenChange={(open) => {
-          setIsEditDialogOpen(open);
-          if (!open) setSelectedCertificate(null);
-        }}>
+        <Dialog
+          open={isEditDialogOpen}
+          onOpenChange={(open) => {
+            setIsEditDialogOpen(open);
+            if (!open) setSelectedCertificate(null);
+          }}
+        >
          <DialogContent>
            <DialogHeader>
-              <DialogTitle>{t('editSSLCertificate')}</DialogTitle>
+              <DialogTitle>{t("editSSLCertificate")}</DialogTitle>
            </DialogHeader>
            <EditSSLCertificateForm
              certificate={selectedCertificate}
@@ -0,0 +1,14 @@
+// src/contexts/FontSizeContext.js
+import { useEffect } from "react";
+
+const useDynamicFontSize = (size) => {
+  useEffect(() => {
+    if (typeof size === "number") {
+      // Apply font size to the root HTML element
+      document.documentElement.style.fontSize = `${size}px`;
+      localStorage.setItem("fontSize", size.toString());
+    }
+  }, [size]);
+};
+
+export default useDynamicFontSize;
@@ -1,38 +1,48 @@
-
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useState, useEffect } from "react";
+type SideBar = boolean;

 interface SidebarContextType {
-  sidebarCollapsed: boolean;
-  setSidebarCollapsed: (collapsed: boolean) => void;
+  sidebarCollapsed: SideBar;
+  setSidebarCollapsed: React.Dispatch<React.SetStateAction<SideBar>>;
  toggleSidebar: () => void;
 }

 const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
-
-export const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-
+interface SidebarProviderProps {
+  children: React.ReactNode;
+}
+export const SidebarProvider: React.FC<SidebarProviderProps> = ({
+  children,
+}) => {
+  // Initialize the state
+  const [sidebarCollapsed, setSidebarCollapsed] = useState<SideBar>(() => {
+    const saved = localStorage.getItem("sidebarCollapsed");
+    return saved === "true";
+  });
  const toggleSidebar = () => {
-    setSidebarCollapsed(prev => !prev);
+    setSidebarCollapsed((prev) => {
+      const newState = !prev;
+      localStorage.setItem("sidebarCollapsed", newState.toString());
+      return newState;
+    });
  };

  const value = {
    sidebarCollapsed,
    setSidebarCollapsed,
-    toggleSidebar
+    toggleSidebar,
  };

  return (
-    <SidebarContext.Provider value={value}>
-      {children}
-    </SidebarContext.Provider>
+    <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>
  );
 };

+// A custom hook to consume the sidebar context.
 export const useSidebar = () => {
  const context = useContext(SidebarContext);
  if (context === undefined) {
-    throw new Error('useSidebar must be used within a SidebarProvider');
+    throw new Error("useSidebar must be used within a SidebarProvider");
  }
  return context;
 };
@@ -1,4 +1,3 @@
-
 import { useState, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useTheme } from "@/contexts/ThemeContext";
@@ -26,16 +25,21 @@ const InstanceMonitoring = () => {
    total: 0,
    online: 0,
    offline: 0,
-    warning: 0
+    warning: 0,
  });

  const [currentUser, setCurrentUser] = useState(authService.getCurrentUser());
  const [addDialogOpen, setAddDialogOpen] = useState(false);

-  const { data: servers = [], isLoading, error, refetch } = useQuery({
-    queryKey: ['servers'],
+  const {
+    data: servers = [],
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ["servers"],
    queryFn: serverService.getServers,
-    refetchInterval: 30000 // Refetch every 30 seconds
+    refetchInterval: 30000, // Refetch every 30 seconds
  });

  useEffect(() => {
@@ -50,7 +54,7 @@ const InstanceMonitoring = () => {

  const handleLogout = () => {
    authService.logout();
-    navigate('/login');
+    navigate("/login");
  };

  const handleAgentAdded = () => {
@@ -68,11 +72,14 @@ const InstanceMonitoring = () => {
            sidebarCollapsed={sidebarCollapsed}
            toggleSidebar={toggleSidebar}
          />
-          <main className="flex-1 flex flex-col items-center justify-center p-4 sm:p-6">
+          <main className="flex-1 flex flex-col items-center justify-center p-4 sm:p-6 ">
            <div className="text-center max-w-md w-full">
-              <h2 className="text-xl sm:text-2xl font-bold mb-4">Error loading servers</h2>
+              <h2 className="text-xl sm:text-2xl font-bold mb-4">
+                Error loading servers
+              </h2>
              <p className="text-muted-foreground mb-4 text-sm sm:text-base">
-                Unable to fetch server data. Please check your connection and try again.
+                Unable to fetch server data. Please check your connection and
+                try again.
              </p>
              <button
                onClick={handleRefresh}
@@ -88,20 +95,20 @@ const InstanceMonitoring = () => {
  }

  return (
-    <div className="flex h-screen overflow-hidden bg-background text-foreground">
+    <div className="flex h-screen overflow-hidden bg-background text-foreground ">
      <Sidebar collapsed={sidebarCollapsed} />
-      <div className="flex flex-col flex-1 min-w-0">
+      <div className="flex flex-col flex-1 min-w-0 ">
        <Header
          currentUser={currentUser}
          onLogout={handleLogout}
          sidebarCollapsed={sidebarCollapsed}
          toggleSidebar={toggleSidebar}
        />
-        <main className="flex-1 overflow-auto">
-          <div className="p-4 sm:p-6 lg:p-8 space-y-6">
+        <main className="flex-1 overflow-auto  dark:bg-black p-2  shadow">
+          <div className="p-4 sm:p-2 lg:p-2 space-y-6 h-full bg-white dark:bg-black p-4 rounded-xl">
            {/* Header Section */}
            <div>
-              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-2 ">
                <div className="min-w-0 flex-1">
                  <h1 className="text-2xl lg:text-2xl font-bold text-foreground">
                    Instance Monitoring
@@ -110,7 +117,10 @@ const InstanceMonitoring = () => {
                    Monitor and manage your server instances in real-time
                  </p>
                </div>
-                <Button onClick={() => setAddDialogOpen(true)} className="flex-shrink-0">
+                <Button
+                  onClick={() => setAddDialogOpen(true)}
+                  className="flex-shrink-0"
+                >
                  <Plus className="mr-2 h-4 w-4" />
                  Add Server Agent
                </Button>
@@ -118,13 +128,17 @@ const InstanceMonitoring = () => {
            </div>

            {/* Stats Cards Section */}
-            <div>
+            <div className="p-2 ">
              <ServerStatsCards stats={stats} />
            </div>

            {/* Server Table Section */}
-            <div>
-              <ServerTable servers={servers} isLoading={isLoading} onRefresh={handleRefresh} />
+            <div className="p-3">
+              <ServerTable
+                servers={servers}
+                isLoading={isLoading}
+                onRefresh={handleRefresh}
+              />
            </div>
          </div>
        </main>
@@ -1,4 +1,3 @@
-
 import React, { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { authService } from "@/services/authService";
@@ -7,7 +6,11 @@ import { Header } from "@/components/dashboard/Header";
 import { Sidebar } from "@/components/dashboard/Sidebar";
 import { SSLDomainContent } from "@/components/ssl-domain/SSLDomainContent";
 import { LoadingState } from "@/components/services/LoadingState";
-import { fetchSSLCertificates, shouldRunDailyCheck, checkAllCertificatesAndNotify } from "@/services/sslCertificateService";
+import {
+  fetchSSLCertificates,
+  shouldRunDailyCheck,
+  checkAllCertificatesAndNotify,
+} from "@/services/sslCertificateService";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { useSidebar } from "@/contexts/SidebarContext";

@@ -23,16 +26,21 @@ const SslDomain = () => {
  const navigate = useNavigate();

  // Fetch SSL certificates with error handling and debugging
-  const { data: certificates = [], isLoading, error, refetch } = useQuery({
-    queryKey: ['ssl-certificates'],
+  const {
+    data: certificates = [],
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ["ssl-certificates"],
    queryFn: async () => {
-     // console.log("Fetching SSL certificates from SslDomain page...");
+      // console.log("Fetching SSL certificates from SslDomain page...");
      try {
        const result = await fetchSSLCertificates();
-     //  console.log("SSL certificates fetch successful, count:", result.length);
+        //  console.log("SSL certificates fetch successful, count:", result.length);
        return result;
      } catch (err) {
-     //   console.error("Error fetching SSL certificates from page:", err);
+        //   console.error("Error fetching SSL certificates from page:", err);
        throw err;
      }
    },
@@ -46,7 +54,7 @@ const SslDomain = () => {
    const checkCertificates = async () => {
      // Check if we should run daily check
      if (shouldRunDailyCheck()) {
-     //   console.log("Running daily SSL certificate check...");
+        //   console.log("Running daily SSL certificate check...");
        await checkAllCertificatesAndNotify();
        // Refresh certificate list after daily check
        refetch();
@@ -86,23 +94,25 @@ const SslDomain = () => {
    return (
      <div className="flex h-screen overflow-hidden bg-background text-foreground">
        <Sidebar collapsed={sidebarCollapsed} />
-        <div className="flex flex-col flex-1">
+        <div className="flex flex-col flex-1 ">
          <Header
            currentUser={currentUser}
            onLogout={handleLogout}
            sidebarCollapsed={sidebarCollapsed}
            toggleSidebar={toggleSidebar}
          />
-          <div className="flex flex-col items-center justify-center h-full p-6">
-            <h2 className="text-xl font-bold mb-2">{t('failedToLoadCertificates')}</h2>
+          <div className="flex flex-col items-center justify-center h-full p-6 ">
+            <h2 className="text-xl font-bold mb-2">
+              {t("failedToLoadCertificates")}
+            </h2>
            <p className="text-muted-foreground mb-4">
-              {error instanceof Error ? error.message : t('unknown')}
+              {error instanceof Error ? error.message : t("unknown")}
            </p>
            <button
              className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
              onClick={() => refetch()}
            >
-              {t('check')}
+              {t("check")}
            </button>
          </div>
        </div>
@@ -114,7 +124,7 @@ const SslDomain = () => {
  return (
    <div className="flex h-screen overflow-hidden bg-background text-foreground">
      <Sidebar collapsed={sidebarCollapsed} />
-      <div className="flex flex-col flex-1">
+      <div className="flex flex-col flex-1 ">
        <Header
          currentUser={currentUser}
          onLogout={handleLogout}
@@ -76,7 +76,7 @@ The roadmap is divided into the following stages:
 - [ ] ✅ Add ntfy push notifications

 ### 🚀 v1.6.0 – Feature Enhancements _(Target: Q3 2025)_
-**Status:** 🔧 In Progress
+**Status:** ✅ Completed 
 #### Tentative Features:
 - [ ] ✅ Allow user to update the schema directly from the dashboard
 - [ ] ✅ Add Korean translations and update types. By @taking [#143](https://github.com/operacle/checkcle/pull/143)
@@ -89,7 +89,14 @@ The roadmap is divided into the following stages:
 - [ ] ✅ fix(ssl):  Ensure edit form saves notification_id and template_id in DB.
 - [ ] ✅ Add Notifiarr notifications
 - [ ] ✅ Add Gotify notifications
- [ ] 🔧 Enhance the Data retention feature
+- [ ] ✅ Enhance the Data retention feature
+
+
+### 🚀 v1.7.0 – Feature Enhancements _(Target: Q3 2025)_
+**Status:** 🔧 In Progress
+#### Tentative Features:
+- [ ] 🔧 Fix for the response time dashboard filter (date/time) in the uptime detail page
+- [ ] 🔧 Fix the server historical loading data
 - [ ] 🔧 Improve docker agent for server monitoring
 - [ ] 🔧 Improve the Server Agent on Unraid
 - [ ] 🔧 Server Windows Agent
Author	SHA1	Message	Date
Phearun UM	bda862e4d3	menu collaged full view and font size adjustment (#162 ) * menu sticky and add font adjustment * menu sticky and add font adjustment * ui menu sticky and fontsize adjustment --------- Co-authored-by: phearun <phearun@whitesand.online>	2025-09-15 13:43:22 +07:00
Tola Leng	6887dc291b	Merge pull request #172 from EchtkPvL/develop Fix YAML syntax error	2025-09-14 21:01:03 +07:00
Jonas Berner	29daddfc3b	Fix YAML syntax error	2025-09-14 12:32:54 +02:00
Tola Leng	9c44ba6d7f	Fix: Improve Uptime History Bar Display Speed Immediately - Optimize the UptimeBar component to display uptime data immediately and reduce loading delays and background updates	2025-09-14 02:52:55 +07:00
Tola Leng	c61a740725	feat: Add schema database update for release v1.6.0 - Applied new database schema updates. - Ensured compatibility with data retention service and notification features. - Keeps database in sync with new features introduced in v1.6.0.	2025-09-13 22:24:37 +07:00
Tola Leng	a9d3d86394	⏳ chore(project): Update development status and progress	2025-09-13 22:22:08 +07:00
Tola Leng	9b0b2663ec	refactor: Remove manual cleanup buttons from Data Retention Settings - The three manual cleanup buttons have been removed from the dashboard. - The data retention service now automatically runs once per day, cleaning up older data based on the configured retention settings.	2025-09-13 02:28:52 +07:00
Tola Leng	0b04034141	Merge pull request #159 from sqkkyzx/develop feat(i18n): Refactored i18n function to support multiple parameter combinations	2025-09-12 15:57:24 +07:00
Tola Leng	0a635ab3aa	feat: Integrate data retention service - Implemented the data retention service in Go (service-operation) that manages cleanup of old records based on configured retention periods. The service runs once per day to ensure outdated data is removed automatically.	2025-09-11 22:43:07 +07:00
YiZixuan	175d2b6329	docs(README_zhcn): Update documentation content and sponsorship policy - Update image links in the documentation - Revise the sponsorship policy to no longer accept individual sponsorships, only enterprise-level collaborations - Update the display method for supporters and partners - Add Cloudflare and DigitalOcean as new partners	2025-09-10 00:19:14 +08:00
YiZixuan	3d6c4151b8	Merge branch 'operacle:develop' into develop	2025-09-09 22:40:37 +08:00
YiZixuan	5f893e3b20	refactor(i18n): Optimize service pagination internationalization copy - Added service pagination related copy in English and Chinese translation files - Updated type definitions to include new translation fields - Modified the ServicesPagination component to use the newly added translation fields	2025-09-09 22:39:17 +08:00
YiZixuan	1296cf6a32	feat(i18n): Enhanced internationalization support with variable interpolation - Refactored the `t` function in LanguageContext to support multiple parameter combinations - Added variable interpolation feature, allowing variables in translated texts - Optimized translation logic to improve accuracy and performance - Enhanced type safety by using TypeScript generics to ensure correct typing	2025-09-09 22:38:43 +08:00
Tola Leng	31e5335aac	docs(readme): deactivate donations, accept only infra support (cloud, domain, hosting)	2025-09-09 20:50:33 +07:00
YiZixuan	b6d4ca5269	refactor(i18n): Optimize internationalization configuration and add new translation items - Add internationalization support to the LoadingState component - Implement internationalization translations in the Profile page - Use internationalized text in the TestEmailDialog component - Update English and Chinese translation files by adding new translation entries	2025-09-09 21:48:35 +08:00
Tola Leng	7e7522608a	chore: deactivate GitHub donation	2025-09-09 20:39:09 +07:00
YiZixuan	43957f65d2	refactor(i18n): Added Chinese translations for Create Event and Maintenance - Supplemented missing Chinese translations - Added translation entries related to Create Event and Maintenance in both English and Chinese translation files	2025-09-09 21:21:34 +08:00
Tola Leng	09ece0a77e	feat(auth): add token support for ntfy - Updated the NTFY service to support API token authentication by adding Authorization Bearer header when api_token is provided. Closes: #89	2025-09-09 20:21:20 +07:00
Tola Leng	06ba38aa15	feat: Add NTFY API token field for Token-based authentication to ntfy server - Add the api_token field for NTFY notifications in both the dialog and service to save it to PB. NTFY schema to include api_token field.	2025-09-09 17:48:25 +07:00
Tola Leng	abd878fe6c	Merge pull request #158 from sqkkyzx/develop refactory(i18n): Improve internationalization configuration and add new translations	2025-09-09 02:31:34 +07:00
YiZixuan	f4d47bbd45	refactory(i18n): Add internationalization support for the service statistics card	2025-09-08 21:35:48 +08:00
YiZixuan	b675fddc92	refactory(i18n): Added architecture import function translation for the "About" page - Added translation items related to schema import in English, Chinese, and type definition files - Replaced hard-coded text with new translation items in the AboutSystem component	2025-09-08 20:54:56 +08:00
YiZixuan	0a70ed2143	refactory(i18n): Added architecture import function translation for the "About" page - Added translation items related to schema import in English, Chinese, and type definition files - Replaced hard-coded text with new translation items in the AboutSystem component	2025-09-08 19:35:41 +08:00
YiZixuan	4e07279a54	refactory(i18n): Improve internationalization configuration and add new translations - Added multiple new translation items - Updated the two language files: en and zhcn - Added type definitions for new translation items in types/services.ts - Modified some components to use the new translation items	2025-09-08 14:18:05 +08:00
Tola Leng	020cdec912	⏳ chore(project): update development status and progress - feat: Add server_url field for Gotify - feat: Implement Gotify notification service	2025-09-06 20:44:28 +07:00
Tola Leng	4771b2ead0	feat: Implement Gotify notification service - The Gotify notification functionality has been implemented. The alert configuration channel will now use the `api_token` and `server_url` field for send to the Gotify API endpoint.	2025-09-06 20:42:22 +07:00
Tola Leng	87c829e100	feat: Add Gotify to notification channels - Add Gotify as a new channel type in the notification settings. The Gotify channel will use the `api_token` and `server_url` field for API key storage in PB.	2025-09-06 19:33:14 +07:00
Tola Leng	e6093f9fe2	Fix: Remove duplicate close button - Removed the duplicate close button from the test email dialog.	2025-09-04 22:05:18 +07:00
Tola Leng	956786a859	feat: add SSL history and Notifiarr notification channel schema	2025-09-03 22:31:20 +07:00
Tola Leng	6a0169e4d8	⏳ chore(project): update development status and progress - feat: Add channel_id field for Notifiarr - feat: Implement Notifiarr notification service Closes: #133	2025-09-03 22:05:11 +07:00
Tola Leng	92959945f3	feat: Implement Notifiarr notification service - The Notifiarr notification functionality has been implemented. The alert configuration channel will now use the `api_token` and `channel_id` field for send to the Notifiarr API endpoint.	2025-09-03 21:58:40 +07:00
Tola Leng	b2269187d8	feat: Add channel_id field for Notifiarr - Add channel_id field for Notifiarr to store record of the discord channel_id into the PB.	2025-09-03 21:48:59 +07:00
Tola Leng	05f46969c4	feat: Add Notifiarr to notification channels (UI) - Add Notifiarr as a new channel type in the notification settings. The Notifiarr channel will use the `api_token` field for API key storage in PB.	2025-09-02 21:37:54 +07:00
Tola Leng	ab168b440e	⏳ chore(project): update development status and progress - fix(ssl): ensure edit form saves notification_id and template_id in DB - feat(notifications): add Notifiarr notification channel (planned)	2025-08-29 19:58:24 +07:00
Tola Leng	2e866d7a95	chore(partners): add Cloudflare to Ecosystem & Community Partner section - Cloudflare has been added to the Ecosystem & Community Partner list to acknowledge their support and contribution.	2025-08-29 19:53:39 +07:00
Tola Leng	b372131978	fix(ssl): Ensure edit form saves notification_id and template_id in DB. - The SSL edit form was not saving the `notification_id` and `template_id` fields to the PB database when re-assigning the Notification Channel and Alert Template.	2025-08-29 19:50:36 +07:00