724 lines
26 KiB
TypeScript
724 lines
26 KiB
TypeScript
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,
|
||
Activity,
|
||
LogOut,
|
||
ChevronRight,
|
||
Zap,
|
||
Lock,
|
||
Cloud,
|
||
TrendingUp,
|
||
Bell,
|
||
Server,
|
||
Sparkles,
|
||
AlertCircle,
|
||
CheckCircle,
|
||
Clock,
|
||
LogIn,
|
||
UserPlus,
|
||
} from "lucide-react";
|
||
|
||
export const HomePage = () => {
|
||
const navigate = useNavigate();
|
||
const { logout } = useAuth();
|
||
const isAuthenticated = authService.isAuthenticated();
|
||
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 features = [
|
||
{
|
||
title: "Централизованное управление",
|
||
description: "Управляйте всеми IPS агентами из единого интерфейса",
|
||
icon: Server,
|
||
color: "#6366f1",
|
||
},
|
||
{
|
||
title: "AI Аналитика",
|
||
description: "Искусственный интеллект помогает находить сложные атаки",
|
||
icon: Bot,
|
||
color: "#8b5cf6",
|
||
},
|
||
{
|
||
title: "Мгновенная блокировка",
|
||
description: "Автоматическая блокировка IP при обнаружении угроз",
|
||
icon: Zap,
|
||
color: "#f59e0b",
|
||
},
|
||
{
|
||
title: "Безопасность данных",
|
||
description: "LLM не получает доступ к чувствительным логам",
|
||
icon: Lock,
|
||
color: "#22c55e",
|
||
},
|
||
];
|
||
|
||
const quickActions = isAuthenticated
|
||
? [
|
||
{
|
||
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 transition-theme"
|
||
>
|
||
{/* 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>
|
||
|
||
{/* Right section */}
|
||
<div className="flex items-center gap-4">
|
||
{isAuthenticated ? (
|
||
<>
|
||
<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>
|
||
</>
|
||
) : (
|
||
<>
|
||
<ThemeToggle />
|
||
<button
|
||
onClick={() => navigate("/auth")}
|
||
className="px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 hover:scale-105"
|
||
style={{
|
||
backgroundColor: "var(--bg-secondary)",
|
||
color: "var(--text-primary)",
|
||
border: `1px solid var(--border)`,
|
||
}}
|
||
>
|
||
<LogIn className="w-4 h-4" />
|
||
Войти
|
||
</button>
|
||
<button
|
||
onClick={() => navigate("/auth")}
|
||
className="px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 hover:scale-105"
|
||
style={{
|
||
backgroundColor: "var(--accent)",
|
||
color: "white",
|
||
}}
|
||
>
|
||
<UserPlus className="w-4 h-4" />
|
||
Регистрация
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="container mx-auto px-6 py-8">
|
||
{/* Hero 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">
|
||
{isAuthenticated
|
||
? `Добро пожаловать, ${user?.first_name || "Администратор"}!`
|
||
: "Добро пожаловать в IPS Manager"}
|
||
</h2>
|
||
<p className="text-white/80 text-lg">
|
||
{isAuthenticated
|
||
? "Система IPS мониторинга и защиты"
|
||
: "Современная платформа для централизованного управления IPS агентами"}
|
||
</p>
|
||
{!isAuthenticated && (
|
||
<div className="flex gap-4 mt-6">
|
||
<button
|
||
onClick={() => navigate("/auth")}
|
||
className="px-6 py-2 rounded-lg font-medium bg-white text-indigo-600 transition-all hover:scale-105 hover:shadow-lg"
|
||
>
|
||
Начать работу
|
||
</button>
|
||
<button className="px-6 py-2 rounded-lg font-medium border border-white/30 transition-all hover:bg-white/10">
|
||
Узнать больше
|
||
</button>
|
||
</div>
|
||
)}
|
||
{isAuthenticated && (
|
||
<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 - только для авторизованных */}
|
||
{isAuthenticated && (
|
||
<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>
|
||
)}
|
||
|
||
{/* Features Section - для всех */}
|
||
<div className="mb-8">
|
||
<div className="text-center mb-8">
|
||
<h2
|
||
className="text-2xl font-bold mb-2"
|
||
style={{ color: "var(--text-primary)" }}
|
||
>
|
||
Ключевые возможности
|
||
</h2>
|
||
<p className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
||
Всё необходимое для защиты вашей инфраструктуры
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{features.map((feature, index) => {
|
||
const Icon = feature.icon;
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="rounded-2xl p-6 transition-all hover:scale-105 hover:shadow-xl text-center"
|
||
style={{
|
||
backgroundColor: "var(--card-bg)",
|
||
boxShadow: `0 4px 6px -1px var(--shadow-color)`,
|
||
}}
|
||
>
|
||
<div
|
||
className="w-14 h-14 rounded-xl flex items-center justify-center mx-auto mb-4"
|
||
style={{ backgroundColor: `${feature.color}20` }}
|
||
>
|
||
<Icon
|
||
className="w-7 h-7"
|
||
style={{ color: feature.color }}
|
||
/>
|
||
</div>
|
||
<h3
|
||
className="font-bold mb-2"
|
||
style={{ color: "var(--text-primary)" }}
|
||
>
|
||
{feature.title}
|
||
</h3>
|
||
<p
|
||
className="text-sm"
|
||
style={{ color: "var(--text-secondary)" }}
|
||
>
|
||
{feature.description}
|
||
</p>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{isAuthenticated ? (
|
||
<>
|
||
<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>
|
||
</>
|
||
) : (
|
||
/* CTA Section для неавторизованных */
|
||
<div
|
||
className="rounded-2xl p-8 text-center"
|
||
style={{
|
||
backgroundColor: "var(--card-bg)",
|
||
boxShadow: `0 4px 6px -1px var(--shadow-color)`,
|
||
}}
|
||
>
|
||
<h3
|
||
className="text-2xl font-bold mb-2"
|
||
style={{ color: "var(--text-primary)" }}
|
||
>
|
||
Готовы начать?
|
||
</h3>
|
||
<p
|
||
className="text-sm mb-6"
|
||
style={{ color: "var(--text-secondary)" }}
|
||
>
|
||
Присоединяйтесь к IPS Manager и получите полный контроль над
|
||
безопасностью
|
||
</p>
|
||
<button
|
||
onClick={() => navigate("/auth")}
|
||
className="px-6 py-2 rounded-lg font-medium transition-all hover:scale-105"
|
||
style={{
|
||
backgroundColor: "var(--accent)",
|
||
color: "white",
|
||
}}
|
||
>
|
||
Начать работу
|
||
</button>
|
||
</div>
|
||
)}
|
||
</main>
|
||
</div>
|
||
);
|
||
};
|