File size: 1,446 Bytes
e5397c6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | // frontend/src/components/admin/AIMetricsOverview.jsx
import React from "react";
import { TrendingUp, TrendingDown } from "lucide-react";
export default function AIMetricsOverview({ metrics }) {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{metrics.map((metric) => (
<div
key={metric.key}
className="bg-white border border-stone-200 rounded-xl p-4 shadow-sm"
>
<div className="flex items-start justify-between mb-2">
<div className="text-xs font-medium text-stone-500 uppercase tracking-wide">
{metric.label}
</div>
{metric.trend !== undefined && (
<div
className={`flex items-center gap-1 text-xs font-medium ${
metric.trend >= 0 ? "text-green-600" : "text-red-600"
}`}
>
{metric.trend >= 0 ? (
<TrendingUp className="w-3 h-3" />
) : (
<TrendingDown className="w-3 h-3" />
)}
{Math.abs(metric.trend)}%
</div>
)}
</div>
<div className="text-2xl font-bold text-stone-900 mb-1">
{metric.value}
</div>
<div className="text-xs text-purple-600 font-medium">
{metric.aiInsight}
</div>
</div>
))}
</div>
);
}
|