Initial commit: Eventify Server Health Monitor

Full-stack real-time server monitoring dashboard with:
- Express.js backend with SSH-based metrics collection
- React + TypeScript + Tailwind CSS + shadcn/ui frontend
- CPU, memory, disk, Docker container, and Nginx monitoring
- Pure SVG charts (CPU area chart + memory donut)
- Gilroy font, 10s auto-refresh polling
- Multi-page dashboard with sidebar navigation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

client/src/components/dashboard/KpiCard.tsx

@@ -0,0 +1,74 @@
+import type { LucideIcon } from "lucide-react"
+import { TrendingUp, TrendingDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Card, CardContent } from "@/components/ui/card"
+
+interface KpiCardProps {
+  title: string
+  value: string
+  subtitle?: string
+  icon: LucideIcon
+  iconColor?: string
+  trend?: { value: string; positive: boolean }
+}
+
+export function KpiCard({
+  title,
+  value,
+  subtitle,
+  icon: Icon,
+  iconColor = "text-primary",
+  trend,
+}: KpiCardProps) {
+  return (
+    <Card className="gap-4 py-5">
+      <CardContent className="flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium text-muted-foreground">
+            {title}
+          </span>
+          <div
+            className={cn(
+              "flex size-9 items-center justify-center rounded-lg bg-muted",
+              iconColor
+            )}
+          >
+            <Icon className="size-4" />
+          </div>
+        </div>
+
+        <div>
+          <p className="text-2xl font-bold tracking-tight text-foreground">
+            {value}
+          </p>
+          {(subtitle || trend) && (
+            <div className="mt-1 flex items-center gap-1.5">
+              {trend && (
+                <>
+                  {trend.positive ? (
+                    <TrendingUp className="size-3.5 text-green-500" />
+                  ) : (
+                    <TrendingDown className="size-3.5 text-red-500" />
+                  )}
+                  <span
+                    className={cn(
+                      "text-xs font-medium",
+                      trend.positive ? "text-green-600" : "text-red-600"
+                    )}
+                  >
+                    {trend.value}
+                  </span>
+                </>
+              )}
+              {subtitle && (
+                <span className="text-xs text-muted-foreground">
+                  {subtitle}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}