File size: 2,688 Bytes
bfe8faf | 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 70 71 72 73 74 75 76 77 78 79 80 81 | // 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>
);
}
|