diff --git a/frontend/src/components/AlertsBell.jsx b/frontend/src/components/AlertsBell.jsx
new file mode 100644
index 0000000..6d27405
--- /dev/null
+++ b/frontend/src/components/AlertsBell.jsx
@@ -0,0 +1,96 @@
+import { Link } from 'react-router-dom';
+import { IconBell, IconAlertTriangle, IconServerOff, IconCpu, IconDeviceDesktop, IconDatabase } from '@tabler/icons-react';
+import { useAlerts } from '../contexts/AlertsContext.jsx';
+
+const SEVERITY_ICONS = {
+ critical: IconAlertTriangle,
+ warning: IconAlertTriangle,
+};
+
+const TYPE_ICONS = {
+ server_offline: IconServerOff,
+ mikrotik_unreachable: IconServerOff,
+ high_cpu: IconCpu,
+ high_ram: IconDeviceDesktop,
+ high_hdd: IconDatabase,
+};
+
+function AlertIcon({ type, severity }) {
+ const Icon = TYPE_ICONS[type] || SEVERITY_ICONS[severity] || IconAlertTriangle;
+ const colorClass = severity === 'critical' ? 'text-danger' : 'text-warning';
+ return
;
+}
+
+export default function AlertsBell() {
+ const { alerts, total, loading, refresh } = useAlerts();
+
+ return (
+
+ );
+}
diff --git a/frontend/src/contexts/AlertsContext.jsx b/frontend/src/contexts/AlertsContext.jsx
new file mode 100644
index 0000000..7519d40
--- /dev/null
+++ b/frontend/src/contexts/AlertsContext.jsx
@@ -0,0 +1,57 @@
+import { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
+import api from '../lib/api.js';
+
+const AlertsContext = createContext(null);
+
+const REFRESH_INTERVAL_MS = 60 * 1000; // 1 минута
+
+export function AlertsProvider({ children }) {
+ const [alerts, setAlerts] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const intervalRef = useRef(null);
+
+ const fetchAlerts = useCallback(async () => {
+ setLoading(true);
+ setError(null);
+ try {
+ const { data } = await api.get('/alerts');
+ setAlerts(Array.isArray(data?.alerts) ? data.alerts : []);
+ } catch (e) {
+ if (e?.name !== 'CanceledError' && e?.code !== 'ERR_CANCELED') {
+ setError(e?.message || 'Не удалось загрузить оповещения');
+ setAlerts([]);
+ }
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchAlerts();
+ intervalRef.current = setInterval(fetchAlerts, REFRESH_INTERVAL_MS);
+ return () => {
+ if (intervalRef.current) clearInterval(intervalRef.current);
+ };
+ }, [fetchAlerts]);
+
+ const value = {
+ alerts,
+ total: alerts.length,
+ loading,
+ error,
+ refresh: fetchAlerts,
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useAlerts() {
+ const ctx = useContext(AlertsContext);
+ if (!ctx) throw new Error('useAlerts must be used within AlertsProvider');
+ return ctx;
+}