Updated Status indicator

app/dashboard/applications/Applications.tsx

@@ -73,6 +73,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
+import { StatusIndicator } from "@/components/status-indicator";
 
 interface Application {
   id: number;
@@ -440,20 +441,9 @@ export default function Dashboard() {
                 >
                   <CardHeader>
                     <div className="absolute top-2 right-2">
-                      <div
+                      <StatusIndicator isOnline={app.online} />
-                        className={`w-4 h-4 rounded-full flex items-center justify-center ${
-                          app.online ? "bg-green-700" : "bg-red-700"
-                        }`}
-                        title={app.online ? "Online" : "Offline"}
-                      >
-                        <div
-                          className={`w-2 h-2 rounded-full ${
-                            app.online ? "bg-green-500" : "bg-red-500"
-                          }`}
-                        />
-                      </div>
                     </div>
-                    <div className="flex items-center justify-between w-full">
+                    <div className="flex items-center justify-between w-full mt-4 mb-4">
                       <div className="flex items-center">
                         <div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md">
                           {app.icon ? (

app/dashboard/servers/Servers.tsx

@@ -58,7 +58,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Checkbox } from "@/components/ui/checkbox"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { DynamicIcon } from "lucide-react/dynamic"
-
+import { StatusIndicator } from "@/components/status-indicator"
 interface Server {
   id: number
   name: string
@@ -832,14 +832,7 @@ export default function Dashboard() {
                     <CardHeader>
                       {server.monitoring && (
                         <div className="absolute top-2 right-2">
-                          <div
+                          <StatusIndicator isOnline={server.online} />
-                            className={`w-4 h-4 rounded-full flex items-center justify-center ${server.online ? "bg-green-700" : "bg-red-700"}`}
-                            title={server.online ? "Online" : "Offline"}
-                          >
-                            <div
-                              className={`w-2 h-2 rounded-full ${server.online ? "bg-green-500" : "bg-red-500"}`}
-                            />
-                          </div>
                         </div>
                       )}
                       <div className="flex items-center justify-between w-full">

components/status-indicator.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+
+interface StatusIndicatorProps {
+  isOnline?: boolean
+  className?: string
+  showLabel?: boolean
+  pulseAnimation?: boolean
+}
+
+export function StatusIndicator({
+  isOnline = false,
+  className,
+  showLabel = true,
+  pulseAnimation = true,
+}: StatusIndicatorProps) {
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        "flex items-center gap-2 px-2 py-1 border-transparent transition-colors duration-300",
+        isOnline
+          ? "bg-green-100 dark:bg-green-950/30 text-green-800 dark:text-green-300"
+          : "bg-red-100 dark:bg-red-950/30 text-red-800 dark:text-red-300",
+        className,
+      )}
+    >
+      <span className={cn("relative flex h-2.5 w-2.5 rounded-full", isOnline ? "bg-green-500" : "bg-red-500")}>
+        {isOnline && pulseAnimation && (
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+        )}
+      </span>
+      {showLabel && <span className="text-xs font-medium">{isOnline ? "Online" : "Offline"}</span>}
+    </Badge>
+  )
+}