Create src/admin/charts/SecurityTimeline.tsx

src/admin/charts/SecurityTimeline.tsx

@@ -0,0 +1,40 @@
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import api from "../../api";
+import { useEffect, useState } from "react";
+
+export default function SecurityTimeline() {
+  const [data, setData] = useState<any[]>([]);
+
+  useEffect(() => {
+    api.get("/admin/security/anomalies").then((r) => {
+      const map: any = {};
+      r.data.forEach((l: any) => {
+        const h = new Date(l.createdAt).getHours();
+        map[h] = (map[h] || 0) + 1;
+      });
+      setData(
+        Object.entries(map).map(([h, c]) => ({ hour: h, count: c }))
+      );
+    });
+  }, []);
+
+  return (
+    <div className="bg-zinc-900 p-4 rounded-xl h-72">
+      <ResponsiveContainer>
+        <LineChart data={data}>
+          <XAxis dataKey="hour" />
+          <YAxis />
+          <Tooltip />
+          <Line dataKey="count" stroke="#ef4444" />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}