feat: Add StatCard component to Dashboard and implement sorting, filtering, and pagination in DataManager

frontend/src/App.jsx

@@ -12,7 +12,10 @@ import {
   IconActivity,
   IconBell,
   IconChevronDown,
-  IconUser
+  IconUser,
+  IconDatabase,
+  IconAlertTriangle,
+  IconAlertCircle
 } from '@tabler/icons-react';
 import DataManager from './DataManager';
 import './App.css';
@@ -151,9 +154,54 @@ function App() {
   );
 }
 
+function StatCard({ icon: Icon, color, value, title, subtitle }) {
+  return (
+    <div className="card h-100">
+      <div className="card-body d-flex align-items-center">
+        <span className={`avatar avatar-lg me-3 bg-${color}-lt text-${color} border-0`}>
+          <Icon size={32} />
+        </span>
+        <div>
+          <div className="h3 mb-0 fw-bold">{value} <span className="fs-5 fw-normal">{title}</span></div>
+          <div className="text-muted lh-1">{subtitle}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function Dashboard() {
   return (
     <div>
+      <div className="row g-3 mb-4">
+        <div className="col-md-4">
+          <StatCard
+            icon={IconDatabase}
+            color="blue"
+            value={6}
+            title="Событий"
+            subtitle="Всего событий"
+          />
+        </div>
+        <div className="col-md-4">
+          <StatCard
+            icon={IconAlertTriangle}
+            color="red"
+            value={3}
+            title="Ошибок"
+            subtitle="Критические ошибки"
+          />
+        </div>
+        <div className="col-md-4">
+          <StatCard
+            icon={IconAlertCircle}
+            color="yellow"
+            value={0}
+            title="Предупреждений"
+            subtitle="Системные предупреждения"
+          />
+        </div>
+      </div>
       <div className="page-header d-print-none mb-4">
         <div className="row align-items-center">
           <div className="col">