Create AIRetentionStrategy.jsx

frontend/src/components/admin/AIRetentionStrategy.jsx

@@ -0,0 +1,80 @@
+// frontend/src/components/admin/AIRetentionStrategy.jsx
+import React from "react";
+import { Mail, Gift, Phone, TrendingUp, AlertCircle, Users } from "lucide-react";
+
+const typeIcons = {
+  retention: AlertCircle,
+  acquisition: Users,
+  payment: TrendingUp,
+};
+
+const typeColors = {
+  retention: "bg-red-50 border-red-200",
+  acquisition: "bg-green-50 border-green-200",
+  payment: "bg-amber-50 border-amber-200",
+};
+
+const actionIcons = {
+  email: Mail,
+  offer: Gift,
+  call: Phone,
+  schedule: Phone,
+};
+
+export default function AIRetentionStrategy({ strategy }) {
+  const TypeIcon = typeIcons[strategy.type] || AlertCircle;
+
+  return (
+    <div
+      className={`bg-white border rounded-xl p-4 shadow-sm ${typeColors[strategy.type] || "border-stone-200"}`}
+    >
+      <div className="flex items-start gap-3 mb-3">
+        <div className={`p-2 rounded-lg ${typeColors[strategy.type]?.replace("50", "100") || "bg-stone-100"}`}>
+          <TypeIcon className="w-5 h-5 text-stone-700" />
+        </div>
+        <div className="flex-1">
+          <h3 className="font-semibold text-stone-900 mb-1">{strategy.title}</h3>
+          <p className="text-xs text-stone-600 mb-2">{strategy.subtitle}</p>
+        </div>
+      </div>
+      <p className="text-sm text-stone-700 mb-3">{strategy.description}</p>
+      <div className="mb-3">
+        <div className="text-xs font-medium text-stone-600 mb-1">Members:</div>
+        <div className="flex flex-wrap gap-1">
+          {strategy.members.map((member, idx) => (
+            <span
+              key={idx}
+              className="text-xs px-2 py-0.5 bg-white rounded border border-stone-200 text-stone-700"
+            >
+              {member}
+            </span>
+          ))}
+        </div>
+      </div>
+      <div className="mb-3">
+        <div className="text-xs font-medium text-stone-600 mb-2">Suggested Actions:</div>
+        <div className="flex flex-wrap gap-2">
+          {strategy.suggestedActions.map((action, idx) => {
+            const ActionIcon = actionIcons[action.type] || Mail;
+            return (
+              <button
+                key={idx}
+                type="button"
+                className="inline-flex items-center gap-1 text-xs px-2 py-1 bg-white border border-stone-200 rounded hover:bg-stone-50 text-stone-700"
+              >
+                <ActionIcon className="w-3 h-3" />
+                {action.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      <div className="pt-2 border-t border-stone-200">
+        <div className="text-xs font-medium text-green-700">
+          Potential Impact: {strategy.potentialImpact}
+        </div>
+      </div>
+    </div>
+  );
+}
+