Create AIActionPlan.jsx

frontend/src/components/admin/AIActionPlan.jsx

@@ -0,0 +1,83 @@
+// frontend/src/components/admin/AIActionPlan.jsx
+import React from "react";
+import { CheckCircle2, Clock, Circle, Target } from "lucide-react";
+
+const statusIcons = {
+  completed: CheckCircle2,
+  in_progress: Clock,
+  pending: Circle,
+};
+
+const statusColors = {
+  completed: "text-green-600 bg-green-50",
+  in_progress: "text-blue-600 bg-blue-50",
+  pending: "text-amber-600 bg-amber-50",
+};
+
+const categoryColors = {
+  Retention: "bg-red-100 text-red-700",
+  Engagement: "bg-blue-100 text-blue-700",
+  Progress: "bg-green-100 text-green-700",
+  Events: "bg-purple-100 text-purple-700",
+  Operations: "bg-amber-100 text-amber-700",
+};
+
+export default function AIActionPlan({ actions }) {
+  return (
+    <div className="bg-white border border-stone-200 rounded-xl p-4 shadow-sm">
+      <div className="flex items-center gap-2 mb-4">
+        <Target className="w-5 h-5 text-purple-600" />
+        <h3 className="font-semibold text-stone-900">AI Action Plan</h3>
+      </div>
+      <div className="space-y-3">
+        {actions.map((action, idx) => {
+          const StatusIcon = statusIcons[action.status] || Circle;
+          return (
+            <div
+              key={idx}
+              className="p-3 bg-stone-50 rounded-lg border border-stone-100"
+            >
+              <div className="flex items-start justify-between gap-2 mb-2">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <StatusIcon
+                      className={`w-4 h-4 ${
+                        statusColors[action.status]?.split(" ")[0] || "text-stone-500"
+                      }`}
+                    />
+                    <span className="font-medium text-sm text-stone-900">
+                      {action.title}
+                    </span>
+                  </div>
+                  <p className="text-xs text-stone-600">{action.description}</p>
+                </div>
+                <div className="flex flex-col items-end gap-1">
+                  <span
+                    className={`text-xs px-2 py-0.5 rounded-full ${
+                      categoryColors[action.category] || "bg-stone-100 text-stone-700"
+                    }`}
+                  >
+                    {action.category}
+                  </span>
+                  <div className="flex items-center gap-1">
+                    {[...Array(5)].map((_, i) => (
+                      <div
+                        key={i}
+                        className={`w-1.5 h-1.5 rounded-full ${
+                          i < action.impact
+                            ? "bg-purple-500"
+                            : "bg-stone-200"
+                        }`}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+