Create AIInsightCard.jsx

frontend/src/components/admin/AIInsightCard.jsx

@@ -0,0 +1,68 @@
+// 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>
+  );
+}
+