src/admin/charts/SecurityTimeline.tsx

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>
  );
}