From 51c708bf47ee0050ab4dbd967058ac07e883b22e Mon Sep 17 00:00:00 2001 From: NikitaTorbenko <2015nekitciti@gmail.com> Date: Sat, 13 Jun 2026 22:21:23 +0300 Subject: [PATCH] feat: create home page --- package.json | 1 + src/pages/home.page.tsx | 553 +++++++++++++++++++++++++++++++++++++--- yarn.lock | 5 + 3 files changed, 528 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index d4442d5..e4f5c7e 100644 --- a/package.json +++ b/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", diff --git a/src/pages/home.page.tsx b/src/pages/home.page.tsx index 90ab78e..1d253de 100644 --- a/src/pages/home.page.tsx +++ b/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 (
-
- -
- - -
-
+ {/* Header */} +
+
+
+ {/* Logo */} +
+
+ +
+
+

+ IPS Manager +

+ {organization && ( +

+ {organization.name} +

+ )} +
+
-
-

- Добро пожаловать в IPS Manager -

-
+ {/* Right section */} +
+ + +
+
+ {user?.first_name?.[0]} + {user?.last_name?.[0]} +
+
+

+ {user?.first_name} {user?.last_name} +

+

+ Администратор +

+
+
+ +
+
+
+
+ +
+ {/* Welcome Section */} +
+
+
+
+

+ Добро пожаловать, {user?.first_name || "Администратор"}! +

+

+ Система IPS мониторинга и защиты +

+
+ + + Все системы работают стабильно + +
+
+
+ +
+
+
+
+ + {/* Stats Grid */} +
+ {stats.map((stat, index) => { + const Icon = stat.icon; + return ( +
+
+
+ +
+ + {stat.change} + +
+

+ {stat.value} +

+

+ {stat.label} +

+
+ ); + })} +
+ +
+ {/* Quick Actions */} +
+
+

+ Быстрый доступ +

+
+ {quickActions.map((action, index) => { + const Icon = action.icon; + return ( + + ); + })} +
+
+
+ + {/* Recent Activity */} +
+
+

+ Последние события +

+ +
+
+ {recentActivities.map((activity) => { + const severityStyles = getSeverityStyles(activity.severity); + const Icon = severityStyles.icon; + return ( +
+
+
+ +
+
+

+ {activity.message} +

+
+ +

+ {activity.time} +

+
+
+
+
+ ); + })} +
+ +
+
+ + {/* AI Insights */} +
+
+
+
+ +
+
+

+ AI Аналитика +

+

+ Новые предложения на основе анализа логов +

+
+
+ +
+
+
+

+ 🔍 Обнаружена аномалия +

+

+ Повышенная активность с IP-адресов из диапазона 185.xxx.xx.xx +

+
+
+

+ 💡 Предложено правил +

+

+ AI предлагает 3 новых правила для блокировки бот-сканеров +

+
+
+

+ ⚡ Оптимизация +

+

+ Рекомендуется обновить 5 существующих правил для повышения + эффективности +

+
+
+
+
); }; diff --git a/yarn.lock b/yarn.lock index 408b0ad..3106b18 100644 --- a/yarn.lock +++ b/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"