Скачал файлы из Figma MakeIt и проверил работу

src/app/components/Dashboard.tsx

@@ -0,0 +1,241 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import {
+  Server,
+  CheckCircle,
+  XCircle,
+  Clock,
+  TrendingUp,
+  AlertTriangle,
+  Activity,
+} from "lucide-react";
+
+interface ServerStatus {
+  id: string;
+  name: string;
+  url: string;
+  status: "online" | "offline" | "warning";
+  responseTime: number;
+  uptime: number;
+  lastCheck: string;
+  checkType: string;
+}
+
+export function Dashboard() {
+  const [servers] = useState<ServerStatus[]>([
+    {
+      id: "1",
+      name: "Production API",
+      url: "https://api.example.com",
+      status: "online",
+      responseTime: 142,
+      uptime: 99.9,
+      lastCheck: "2 min ago",
+      checkType: "HTTPS",
+    },
+    {
+      id: "2",
+      name: "Database Server",
+      url: "db.example.com:5432",
+      status: "online",
+      responseTime: 45,
+      uptime: 100,
+      lastCheck: "1 min ago",
+      checkType: "TCP",
+    },
+    {
+      id: "3",
+      name: "CDN Edge Node",
+      url: "https://cdn.example.com",
+      status: "warning",
+      responseTime: 890,
+      uptime: 98.5,
+      lastCheck: "30 sec ago",
+      checkType: "HTTPS",
+    },
+    {
+      id: "4",
+      name: "Mail Server",
+      url: "mail.example.com",
+      status: "offline",
+      responseTime: 0,
+      uptime: 95.2,
+      lastCheck: "5 min ago",
+      checkType: "SMTP",
+    },
+    {
+      id: "5",
+      name: "Analytics Service",
+      url: "https://analytics.example.com",
+      status: "online",
+      responseTime: 210,
+      uptime: 99.7,
+      lastCheck: "3 min ago",
+      checkType: "HTTPS",
+    },
+    {
+      id: "6",
+      name: "Backup Server",
+      url: "backup.example.com:22",
+      status: "online",
+      responseTime: 78,
+      uptime: 99.95,
+      lastCheck: "1 min ago",
+      checkType: "SSH",
+    },
+  ]);
+
+  const onlineCount = servers.filter((s) => s.status === "online").length;
+  const offlineCount = servers.filter((s) => s.status === "offline").length;
+  const warningCount = servers.filter((s) => s.status === "warning").length;
+  const avgResponseTime = Math.round(
+    servers.reduce((acc, s) => acc + s.responseTime, 0) / servers.length
+  );
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "online":
+        return "bg-emerald-100 text-emerald-700 border-emerald-200";
+      case "offline":
+        return "bg-rose-100 text-rose-700 border-rose-200";
+      case "warning":
+        return "bg-amber-100 text-amber-700 border-amber-200";
+      default:
+        return "bg-gray-100 text-gray-700 border-gray-200";
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "online":
+        return <CheckCircle className="w-5 h-5" />;
+      case "offline":
+        return <XCircle className="w-5 h-5" />;
+      case "warning":
+        return <AlertTriangle className="w-5 h-5" />;
+      default:
+        return <Clock className="w-5 h-5" />;
+    }
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-6 py-8">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">System Overview</h1>
+        <p className="text-gray-600">Real-time monitoring of all servers and services</p>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
+          <div className="flex items-center justify-between mb-4">
+            <div className="bg-emerald-100 p-3 rounded-xl">
+              <CheckCircle className="w-6 h-6 text-emerald-600" />
+            </div>
+            <span className="text-3xl font-bold text-emerald-600">{onlineCount}</span>
+          </div>
+          <h3 className="text-gray-600 font-medium">Online</h3>
+          <p className="text-sm text-gray-500">Servers running</p>
+        </div>
+
+        <div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
+          <div className="flex items-center justify-between mb-4">
+            <div className="bg-rose-100 p-3 rounded-xl">
+              <XCircle className="w-6 h-6 text-rose-600" />
+            </div>
+            <span className="text-3xl font-bold text-rose-600">{offlineCount}</span>
+          </div>
+          <h3 className="text-gray-600 font-medium">Offline</h3>
+          <p className="text-sm text-gray-500">Servers down</p>
+        </div>
+
+        <div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
+          <div className="flex items-center justify-between mb-4">
+            <div className="bg-amber-100 p-3 rounded-xl">
+              <AlertTriangle className="w-6 h-6 text-amber-600" />
+            </div>
+            <span className="text-3xl font-bold text-amber-600">{warningCount}</span>
+          </div>
+          <h3 className="text-gray-600 font-medium">Warning</h3>
+          <p className="text-sm text-gray-500">Need attention</p>
+        </div>
+
+        <div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
+          <div className="flex items-center justify-between mb-4">
+            <div className="bg-blue-100 p-3 rounded-xl">
+              <TrendingUp className="w-6 h-6 text-blue-600" />
+            </div>
+            <span className="text-3xl font-bold text-blue-600">{avgResponseTime}ms</span>
+          </div>
+          <h3 className="text-gray-600 font-medium">Avg Response</h3>
+          <p className="text-sm text-gray-500">Time</p>
+        </div>
+      </div>
+
+      {/* Server List */}
+      <div className="bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden">
+        <div className="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Server className="w-5 h-5 text-blue-600" />
+              <h2 className="text-xl font-bold text-gray-900">Server Status</h2>
+            </div>
+            <Link
+              to="/servers"
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
+            >
+              View All
+            </Link>
+          </div>
+        </div>
+
+        <div className="divide-y divide-gray-100">
+          {servers.map((server) => (
+            <Link
+              key={server.id}
+              to={`/servers/${server.id}`}
+              className="block px-6 py-4 hover:bg-gray-50 transition-colors"
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4 flex-1">
+                  <div className={`p-2 rounded-lg ${getStatusColor(server.status)}`}>
+                    {getStatusIcon(server.status)}
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="font-semibold text-gray-900">{server.name}</h3>
+                    <p className="text-sm text-gray-500">{server.url}</p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-8">
+                  <div className="text-right">
+                    <p className="text-sm font-medium text-gray-900">
+                      {server.responseTime > 0 ? `${server.responseTime}ms` : "N/A"}
+                    </p>
+                    <p className="text-xs text-gray-500">Response Time</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-sm font-medium text-gray-900">{server.uptime}%</p>
+                    <p className="text-xs text-gray-500">Uptime</p>
+                  </div>
+                  <div className="text-right">
+                    <span className="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs font-medium">
+                      {server.checkType}
+                    </span>
+                  </div>
+                  <div className="text-right min-w-[80px]">
+                    <div className="flex items-center gap-1 text-gray-500">
+                      <Activity className="w-3 h-3" />
+                      <p className="text-xs">{server.lastCheck}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}