feat: create home page

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.3.0",
     "axios": "^1.17.0",
+    "lucide-react": "^1.18.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-icons": "^5.6.0",

src/pages/home.page.tsx

@@ -1,47 +1,538 @@
 import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "@/modules/auth/hooks/useAuth";
+import { authService } from "@/modules/auth/api/auth.service";
+import {
+  Shield,
+  Users,
+  Bot,
+  Settings,
+  Activity,
+  LogOut,
+  ChevronRight,
+  Zap,
+  Lock,
+  Cloud,
+  TrendingUp,
+  Bell,
+  Server,
+  Sparkles,
+  AlertCircle,
+  CheckCircle,
+  Clock,
+} from "lucide-react";
 
 export const HomePage = () => {
   const navigate = useNavigate();
   const { logout } = useAuth();
+  const organization = authService.getCurrentOrganization();
+  const authStorage = localStorage.getItem("auth-storage");
+  const user = authStorage ? JSON.parse(authStorage).state?.user : null;
+
+  const stats = [
+    { label: "Активные агенты", value: "12", change: "+2", icon: Server },
+    { label: "Заблокировано IP", value: "1,284", change: "+128", icon: Shield },
+    { label: "Активных правил", value: "47", change: "+5", icon: Lock },
+    {
+      label: "Атак предотвращено",
+      value: "3,721",
+      change: "+342",
+      icon: TrendingUp,
+    },
+  ];
+
+  const recentActivities = [
+    {
+      id: 1,
+      type: "attack",
+      message: "Обнаружена brute-force атака с IP 192.168.1.45",
+      time: "2 минуты назад",
+      severity: "high",
+    },
+    {
+      id: 2,
+      type: "rule",
+      message: "Новое правило фильтрации добавлено администратором",
+      time: "15 минут назад",
+      severity: "info",
+    },
+    {
+      id: 3,
+      type: "agent",
+      message: "Агент на сервере web-01 успешно обновлен",
+      time: "1 час назад",
+      severity: "success",
+    },
+    {
+      id: 4,
+      type: "ai",
+      message: "AI предложил новые правила для обнаружения ботов",
+      time: "3 часа назад",
+      severity: "info",
+    },
+  ];
+
+  const quickActions = [
+    {
+      name: "IPS Агенты",
+      icon: Server,
+      path: "/agents",
+      description: "Управление агентами",
+      color: "#6366f1",
+    },
+    {
+      name: "Правила",
+      icon: Shield,
+      path: "/rules",
+      description: "Правила фильтрации",
+      color: "#22c55e",
+    },
+    {
+      name: "AI Аналитика",
+      icon: Bot,
+      path: "/ai-analytics",
+      description: "Анализ логов",
+      color: "#8b5cf6",
+    },
+    {
+      name: "Команда",
+      icon: Users,
+      path: "/organization",
+      description: "Управление доступом",
+      color: "#f59e0b",
+    },
+  ];
+
+  const getSeverityStyles = (severity: string) => {
+    switch (severity) {
+      case "high":
+        return {
+          bg: "#ef444410",
+          border: "#ef4444",
+          icon: AlertCircle,
+          text: "#ef4444",
+        };
+      case "success":
+        return {
+          bg: "#22c55e10",
+          border: "#22c55e",
+          icon: CheckCircle,
+          text: "#22c55e",
+        };
+      default:
+        return {
+          bg: "#6366f110",
+          border: "#6366f1",
+          icon: Sparkles,
+          text: "#6366f1",
+        };
+    }
+  };
 
   return (
     <div
       style={{ backgroundColor: "var(--bg-primary)" }}
-      className="min-h-screen p-4"
+      className="min-h-screen transition-theme"
     >
-      <div className="flex justify-between items-center mb-8">
-        <ThemeToggle />
-        <div className="flex gap-4">
-          <button
-            onClick={() => navigate("/organization")}
-            className="px-4 py-2 rounded-lg font-medium transition-all"
-            style={{
-              backgroundColor: "var(--accent)",
-              color: "var(--button-primary-text)",
-            }}
-          >
-            Управление организацией
-          </button>
-          <button
-            onClick={logout}
-            className="px-4 py-2 rounded-lg font-medium transition-all"
-            style={{
-              backgroundColor: "var(--button-danger)",
-              color: "var(--button-danger-text)",
-            }}
-          >
-            Выйти
-          </button>
-        </div>
-      </div>
+      {/* Header */}
+      <header
+        className="sticky top-0 z-50 border-b transition-theme backdrop-blur-sm"
+        style={{
+          backgroundColor: "var(--bg-primary)",
+          borderColor: "var(--border)",
+        }}
+      >
+        <div className="container mx-auto px-6 py-4">
+          <div className="flex justify-between items-center">
+            {/* Logo */}
+            <div className="flex items-center gap-3">
+              <div
+                className="w-10 h-10 rounded-xl flex items-center justify-center"
+                style={{ backgroundColor: "var(--accent)" }}
+              >
+                <Shield className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h1
+                  className="text-xl font-bold"
+                  style={{ color: "var(--text-primary)" }}
+                >
+                  IPS Manager
+                </h1>
+                {organization && (
+                  <p className="text-xs" style={{ color: "var(--text-muted)" }}>
+                    {organization.name}
+                  </p>
+                )}
+              </div>
+            </div>
 
-      <div className="flex items-center justify-center">
-        <h1 className="text-2xl" style={{ color: "var(--text-primary)" }}>
-          Добро пожаловать в IPS Manager
-        </h1>
-      </div>
+            {/* Right section */}
+            <div className="flex items-center gap-4">
+              <button
+                className="relative p-2 rounded-lg transition-all hover:scale-105"
+                style={{ backgroundColor: "var(--bg-secondary)" }}
+              >
+                <Bell
+                  className="w-5 h-5"
+                  style={{ color: "var(--text-secondary)" }}
+                />
+                <span
+                  className="absolute top-1 right-1 w-2 h-2 rounded-full"
+                  style={{ backgroundColor: "#ef4444" }}
+                ></span>
+              </button>
+              <ThemeToggle />
+              <div className="flex items-center gap-3">
+                <div
+                  className="w-10 h-10 rounded-full flex items-center justify-center font-semibold text-white"
+                  style={{ backgroundColor: "var(--accent)" }}
+                >
+                  {user?.first_name?.[0]}
+                  {user?.last_name?.[0]}
+                </div>
+                <div className="hidden md:block">
+                  <p
+                    className="text-sm font-medium"
+                    style={{ color: "var(--text-primary)" }}
+                  >
+                    {user?.first_name} {user?.last_name}
+                  </p>
+                  <p className="text-xs" style={{ color: "var(--text-muted)" }}>
+                    Администратор
+                  </p>
+                </div>
+              </div>
+              <button
+                onClick={logout}
+                className="p-2 rounded-lg transition-all hover:scale-105"
+                style={{ backgroundColor: "#ef4444" }}
+              >
+                <LogOut className="w-5 h-5 text-white" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="container mx-auto px-6 py-8">
+        {/* Welcome Section */}
+        <div
+          className="rounded-2xl p-8 mb-8 text-white relative overflow-hidden"
+          style={{
+            background: "linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)",
+          }}
+        >
+          <div className="relative z-10">
+            <div className="flex justify-between items-start">
+              <div>
+                <h2 className="text-3xl font-bold mb-2">
+                  Добро пожаловать, {user?.first_name || "Администратор"}!
+                </h2>
+                <p className="text-white/80 text-lg">
+                  Система IPS мониторинга и защиты
+                </p>
+                <div className="flex items-center gap-2 mt-4">
+                  <Zap className="w-5 h-5" />
+                  <span className="text-white/90">
+                    Все системы работают стабильно
+                  </span>
+                </div>
+              </div>
+              <div className="hidden lg:block opacity-20">
+                <Cloud className="w-32 h-32" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          {stats.map((stat, index) => {
+            const Icon = stat.icon;
+            return (
+              <div
+                key={index}
+                className="rounded-2xl p-6 transition-all hover:scale-105 hover:shadow-xl"
+                style={{
+                  backgroundColor: "var(--card-bg)",
+                  boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+                }}
+              >
+                <div className="flex justify-between items-start mb-4">
+                  <div
+                    className="w-12 h-12 rounded-xl flex items-center justify-center bg-opacity-20"
+                    style={{
+                      backgroundColor: `${index === 0 ? "#6366f1" : index === 1 ? "#ef4444" : index === 2 ? "#22c55e" : "#f59e0b"}20`,
+                    }}
+                  >
+                    <Icon
+                      className="w-6 h-6"
+                      style={{
+                        color:
+                          index === 0
+                            ? "#6366f1"
+                            : index === 1
+                              ? "#ef4444"
+                              : index === 2
+                                ? "#22c55e"
+                                : "#f59e0b",
+                      }}
+                    />
+                  </div>
+                  <span
+                    className="text-sm font-medium"
+                    style={{ color: "#22c55e" }}
+                  >
+                    {stat.change}
+                  </span>
+                </div>
+                <h3
+                  className="text-2xl font-bold mb-1"
+                  style={{ color: "var(--text-primary)" }}
+                >
+                  {stat.value}
+                </h3>
+                <p
+                  className="text-sm"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  {stat.label}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Quick Actions */}
+          <div className="lg:col-span-2">
+            <div
+              className="rounded-2xl p-6"
+              style={{
+                backgroundColor: "var(--card-bg)",
+                boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+              }}
+            >
+              <h3
+                className="text-xl font-bold mb-6"
+                style={{ color: "var(--text-primary)" }}
+              >
+                Быстрый доступ
+              </h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {quickActions.map((action, index) => {
+                  const Icon = action.icon;
+                  return (
+                    <button
+                      key={index}
+                      onClick={() => navigate(action.path)}
+                      className="group p-4 rounded-xl text-left transition-all hover:scale-[1.02]"
+                      style={{
+                        backgroundColor: "var(--bg-secondary)",
+                        border: `1px solid var(--border)`,
+                      }}
+                    >
+                      <div className="flex items-start justify-between">
+                        <div
+                          className="w-10 h-10 rounded-lg flex items-center justify-center mb-3 transition-all group-hover:scale-110"
+                          style={{ backgroundColor: `${action.color}20` }}
+                        >
+                          <Icon
+                            className="w-5 h-5"
+                            style={{ color: action.color }}
+                          />
+                        </div>
+                        <ChevronRight
+                          className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-all"
+                          style={{ color: "var(--text-muted)" }}
+                        />
+                      </div>
+                      <h4
+                        className="font-semibold mb-1"
+                        style={{ color: "var(--text-primary)" }}
+                      >
+                        {action.name}
+                      </h4>
+                      <p
+                        className="text-sm"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
+                        {action.description}
+                      </p>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* Recent Activity */}
+          <div
+            className="rounded-2xl p-6"
+            style={{
+              backgroundColor: "var(--card-bg)",
+              boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+            }}
+          >
+            <div className="flex justify-between items-center mb-6">
+              <h3
+                className="text-xl font-bold"
+                style={{ color: "var(--text-primary)" }}
+              >
+                Последние события
+              </h3>
+              <Activity
+                className="w-5 h-5"
+                style={{ color: "var(--text-muted)" }}
+              />
+            </div>
+            <div className="space-y-4">
+              {recentActivities.map((activity) => {
+                const severityStyles = getSeverityStyles(activity.severity);
+                const Icon = severityStyles.icon;
+                return (
+                  <div
+                    key={activity.id}
+                    className="p-3 rounded-lg transition-all hover:scale-[1.01]"
+                    style={{
+                      backgroundColor: "var(--bg-secondary)",
+                    }}
+                  >
+                    <div className="flex gap-3">
+                      <div className="flex-shrink-0">
+                        <Icon
+                          className="w-4 h-4 mt-0.5"
+                          style={{ color: severityStyles.text }}
+                        />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p
+                          className="text-sm mb-1"
+                          style={{ color: "var(--text-primary)" }}
+                        >
+                          {activity.message}
+                        </p>
+                        <div className="flex items-center gap-2">
+                          <Clock
+                            className="w-3 h-3"
+                            style={{ color: "var(--text-muted)" }}
+                          />
+                          <p
+                            className="text-xs"
+                            style={{ color: "var(--text-muted)" }}
+                          >
+                            {activity.time}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <button
+              className="w-full mt-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-[1.02]"
+              style={{
+                backgroundColor: "var(--bg-secondary)",
+                color: "var(--text-secondary)",
+              }}
+            >
+              Показать всю историю
+            </button>
+          </div>
+        </div>
+
+        {/* AI Insights */}
+        <div
+          className="rounded-2xl p-6 mt-8 transition-all hover:shadow-xl"
+          style={{
+            backgroundColor: "var(--card-bg)",
+            border: `1px solid var(--border)`,
+            boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+          }}
+        >
+          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4 mb-6">
+            <div className="flex items-center gap-3">
+              <div
+                className="w-10 h-10 rounded-xl flex items-center justify-center"
+                style={{ backgroundColor: "#8b5cf620" }}
+              >
+                <Bot className="w-5 h-5" style={{ color: "#8b5cf6" }} />
+              </div>
+              <div>
+                <h3
+                  className="text-xl font-bold"
+                  style={{ color: "var(--text-primary)" }}
+                >
+                  AI Аналитика
+                </h3>
+                <p
+                  className="text-sm"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Новые предложения на основе анализа логов
+                </p>
+              </div>
+            </div>
+            <button
+              className="px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 hover:scale-[1.02] self-start"
+              style={{
+                backgroundColor: "#8b5cf6",
+                color: "white",
+              }}
+            >
+              Подробнее
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div
+              className="p-4 rounded-xl transition-all hover:scale-[1.02]"
+              style={{ backgroundColor: "var(--bg-secondary)" }}
+            >
+              <p
+                className="text-sm font-medium mb-2"
+                style={{ color: "var(--text-primary)" }}
+              >
+                🔍 Обнаружена аномалия
+              </p>
+              <p className="text-xs" style={{ color: "var(--text-secondary)" }}>
+                Повышенная активность с IP-адресов из диапазона 185.xxx.xx.xx
+              </p>
+            </div>
+            <div
+              className="p-4 rounded-xl transition-all hover:scale-[1.02]"
+              style={{ backgroundColor: "var(--bg-secondary)" }}
+            >
+              <p
+                className="text-sm font-medium mb-2"
+                style={{ color: "var(--text-primary)" }}
+              >
+                💡 Предложено правил
+              </p>
+              <p className="text-xs" style={{ color: "var(--text-secondary)" }}>
+                AI предлагает 3 новых правила для блокировки бот-сканеров
+              </p>
+            </div>
+            <div
+              className="p-4 rounded-xl transition-all hover:scale-[1.02]"
+              style={{ backgroundColor: "var(--bg-secondary)" }}
+            >
+              <p
+                className="text-sm font-medium mb-2"
+                style={{ color: "var(--text-primary)" }}
+              >
+                ⚡ Оптимизация
+              </p>
+              <p className="text-xs" style={{ color: "var(--text-secondary)" }}>
+                Рекомендуется обновить 5 существующих правил для повышения
+                эффективности
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
     </div>
   );
 };

yarn.lock

@@ -1284,6 +1284,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lucide-react@^1.18.0:
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-1.18.0.tgz#d1b8754d9c427061261c6a6a0b7fa6ecda36c84f"
+  integrity sha512-LZDb7H/0YfM+RJncD0hDQRCAu+vSGODqpe35TuVI8EuXaRjkczbsx7p8dY4J87F/MUSj6bpYqeI8nw8qXaAdmA==
+
 magic-string@^0.30.21:
   version "0.30.21"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.21.tgz#56763ec09a0fa8091df27879fd94d19078c00d91"