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

.github/ISSUE_TEMPLATE/ask_for_help.yml

@@ -1,4 +1,4 @@
-name: Ask for Help
+name: ❓ Ask for Help
 description: Ask a question or request guidance about this project.
 title: "[Question]: "
 labels: [question]

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: Bug Report
+name: 🐛 Bug Report
 description: Report a reproducible bug to help us improve.
 title: "[Bug]: "
 labels: [bug]

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/documentation.yml

@@ -1,4 +1,4 @@
-name: Documentation Improvement
+name: 📝 Documentation Improvement
 description: Suggest improvements or report issues in documentation.
 title: "[Docs]: "
 labels: [documentation]

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,4 +1,4 @@
-name: Feature Request
+name: 🚀 Feature Request
 description: Suggest an idea to improve this project.
 title: "[Feature]: "
 labels: [enhancement]

.github/ISSUE_TEMPLATE/security_issue.yml

@@ -1,4 +1,4 @@
-name: Security Issue
+name: 🛡️ Security Issue
 description: Report a potential security vulnerability.
 title: "[Security]: "
 labels: [security]

.github/ISSUE_TEMPLATE/translation_request.yml

@@ -1,4 +1,4 @@
-name: Translation Request
+name: 🌎 Translation Request
 description: Request a translation or report translation issues.
 title: "[Translation]: "
 labels: [translation]

application/src/api/realtime/index.ts

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

application/src/components/dashboard/Sidebar.tsx

@@ -13,7 +13,13 @@ export const Sidebar = ({ collapsed }: SidebarProps) => {
   const { theme } = useTheme();
 
   return (
-    <div className={`${collapsed ? 'w-16' : 'w-64'} ${theme === 'dark' ? 'bg-[#121212] border-[#1e1e1e]' : 'bg-sidebar border-sidebar-border'} border-r flex flex-col transition-all duration-300 h-full`}>
+    <div 
+      className={`
+        ${theme === 'dark' ? 'bg-[#121212] border-[#1e1e1e]' : 'bg-sidebar border-sidebar-border'} 
+        border-r flex flex-col h-full
+        ${collapsed ? 'w-16' : 'w-64'}
+      `}
+    >
       <SidebarHeader collapsed={collapsed} />
       <MainNavigation collapsed={collapsed} />
       <SettingsPanel collapsed={collapsed} />

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

@@ -34,7 +34,6 @@ export const MenuItem: React.FC<MenuItemProps> = ({
     e.stopPropagation();
 
     if (hasNavigation && path) {
-      // Use navigate instead of window.location to prevent full page reload
       navigate(path, { replace: false });
     }
   };
@@ -44,11 +43,22 @@ export const MenuItem: React.FC<MenuItemProps> = ({
 
   return (
     <div 
-      className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg ${isActive ? theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200 cursor-pointer`}
+      className={`
+        ${collapsed ? 'p-3' : 'p-2 pl-3'} 
+        mb-1 rounded-lg 
+        ${isActive ? (theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent') : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} 
+        flex items-center 
+        ${collapsed ? 'justify-center' : ''} 
+        cursor-pointer
+      `}
       onClick={handleClick}
     >
       <Icon className={`${mainIconSize} ${color}`} />
-      {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t(translationKey)}</span>}
+      {!collapsed && (
+        <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">
+          {t(translationKey)}
+        </span>
+      )}
     </div>
   );
 };

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

@@ -13,7 +13,7 @@ export const SidebarHeader: React.FC<SidebarHeaderProps> = ({ collapsed }) => {
     <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.ico"
+          src="/favicon_sidebar.ico"
           alt="CheckCle"
           className="h-6 w-6"
         />

application/src/components/docker/DockerContainersTable.tsx

@@ -62,7 +62,7 @@ export const DockerContainersTable = ({ containers, isLoading, onRefresh }: Dock
         <CardContent className="p-0">
           <div className="overflow-x-auto">
             <div className="min-w-full inline-block align-middle">
-              <div className="overflow-hidden border border-border rounded-lg shadow-sm bg-card">
+              <div className="overflow-hidden border border-border rounded-lg shadow-sm">
                 <Table>
                   <DockerTableHeader />
                   <TableBody>

application/src/components/docker/DockerStatsCards.tsx

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

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

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

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

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