File size: 2,175 Bytes
09994c2 | 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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | // frontend/src/components/admin/AIInsightCard.jsx
import React from "react";
import { ArrowRight, TrendingUp, AlertTriangle, CheckCircle2, XCircle } from "lucide-react";
const typeStyles = {
growth: "bg-green-50 border-green-200",
warning: "bg-amber-50 border-amber-200",
success: "bg-blue-50 border-blue-200",
decline: "bg-red-50 border-red-200",
};
const typeIcons = {
growth: TrendingUp,
warning: AlertTriangle,
success: CheckCircle2,
decline: XCircle,
};
const typeIconColors = {
growth: "text-green-600",
warning: "text-amber-600",
success: "text-blue-600",
decline: "text-red-600",
};
const priorityBadges = {
high: "bg-red-100 text-red-700",
medium: "bg-amber-100 text-amber-700",
low: "bg-blue-100 text-blue-700",
};
export default function AIInsightCard({ insight }) {
const Icon = typeIcons[insight.type] || AlertTriangle;
return (
<div
className={`bg-white border rounded-xl p-4 shadow-sm ${typeStyles[insight.type] || "border-stone-200"}`}
>
<div className="flex items-start justify-between gap-2 mb-2">
<div className="flex items-center gap-2">
<Icon className={`w-5 h-5 ${typeIconColors[insight.type] || "text-stone-600"}`} />
<h3 className="font-semibold text-stone-900 text-sm">{insight.title}</h3>
</div>
<span
className={`text-xs px-2 py-0.5 rounded-full ${priorityBadges[insight.priority] || "bg-stone-100 text-stone-700"}`}
>
{insight.priority}
</span>
</div>
<p className="text-sm text-stone-700 mb-3">{insight.description}</p>
<div className="flex items-center justify-between">
{insight.metric && (
<div className="text-xs text-stone-600">
<span className="font-semibold text-stone-900">{insight.metric.value}</span>{" "}
{insight.metric.label}
</div>
)}
<button
type="button"
className="inline-flex items-center gap-1 text-xs font-medium text-purple-600 hover:text-purple-700"
>
{insight.actionLabel} <ArrowRight className="w-3 h-3" />
</button>
</div>
</div>
);
}
|