home page #1
@@ -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",
|
||||
|
||||
+509
-18
@@ -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"
|
||||
{/* Header */}
|
||||
<header
|
||||
className="sticky top-0 z-50 border-b transition-theme backdrop-blur-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--button-primary-text)",
|
||||
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>
|
||||
|
||||
{/* 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="px-4 py-2 rounded-lg font-medium transition-all"
|
||||
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={{
|
||||
backgroundColor: "var(--button-danger)",
|
||||
color: "var(--button-danger-text)",
|
||||
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>
|
||||
|
||||
<div className="flex items-center justify-center">
|
||||
<h1 className="text-2xl" style={{ color: "var(--text-primary)" }}>
|
||||
Добро пожаловать в IPS Manager
|
||||
</h1>
|
||||
{/* 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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user