Update frontend/src/components/admin/AIInsightBox.jsx

frontend/src/components/admin/AIInsightBox.jsx

@@ -1,37 +1,89 @@
 // frontend/src/components/admin/AIInsightBox.jsx
 import React from "react";
+import { Sparkles, TrendingUp, AlertTriangle, Users as UsersIcon } from "lucide-react";
+import { differenceInDays } from "date-fns";
 
-export default function AIInsightBox({ memberships }) {
-  const total = memberships.length;
-  const active = memberships.filter((m) => m.status === "active").length;
-  const expired = memberships.filter((m) => m.status === "expired").length;
+export default function AIInsightBox({ memberships = [] }) {
+  const now = new Date();
+
+  const totalMembers = memberships.length;
+
+  const renewingSoon = memberships.filter((m) => {
+    if (m.status !== "active" || !m.renewal_date) return false;
+    const days = differenceInDays(new Date(m.renewal_date), now);
+    return days >= 0 && days <= 14;
+  }).length;
+
+  const needAttention = memberships.filter((m) => {
+    if (!m.renewal_date) return false;
+    const days = differenceInDays(new Date(m.renewal_date), now);
+    return m.status === "expired" || days < 0;
+  }).length;
+
+  const goodStanding = memberships.filter((m) => m.status === "active").length;
+
+  const suggestionText =
+    totalMembers === 0
+      ? "Once members join, I’ll highlight who needs your attention first."
+      : `Focus on the ${needAttention} at-risk member${
+          needAttention === 1 ? "" : "s"
+        } this week to improve retention.`;
 
   return (
-    <div className="mb-8 bg-white border border-stone-200 rounded-2xl p-4 sm:p-5 shadow-sm">
-      <div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-4">
-        <div>
-          <h2 className="text-sm font-semibold text-stone-900">
-            Quick membership insight
-          </h2>
-          <p className="text-xs text-stone-500 mt-1">
-            This section will later be powered by the AI assistant, but for now
-            it shows a quick snapshot of your dojo.
-          </p>
-        </div>
-        <div className="flex flex-wrap gap-3 text-xs">
-          <div className="px-3 py-2 rounded-lg bg-stone-50 border border-stone-200">
-            <div className="text-stone-500">Total members</div>
-            <div className="font-semibold text-stone-900">{total}</div>
+    <div className="mb-8 rounded-3xl border border-purple-200 bg-gradient-to-r from-purple-50 to-purple-100/70 px-4 py-5 sm:px-6 sm:py-6">
+      <h2 className="text-sm font-semibold text-stone-900 mb-4 flex items-center gap-2">
+        <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-purple-100 text-purple-700">
+          <Sparkles className="w-3 h-3" />
+        </span>
+        AI Assistant Insights
+      </h2>
+
+      <div className="space-y-3">
+        {/* Row 1 */}
+        <div className="flex items-center justify-between rounded-2xl bg-white/90 px-4 py-3 shadow-sm">
+          <div className="flex items-center gap-3">
+            <div className="h-8 w-8 rounded-full bg-emerald-50 flex items-center justify-center">
+              <TrendingUp className="w-4 h-4 text-emerald-600" />
+            </div>
+            <p className="text-sm text-stone-700">
+              {renewingSoon} member{renewingSoon === 1 ? "" : "s"} are due for
+              renewal in the next 2 weeks
+            </p>
           </div>
-          <div className="px-3 py-2 rounded-lg bg-emerald-50 border border-emerald-100">
-            <div className="text-emerald-700 text-[11px]">Active</div>
-            <div className="font-semibold text-emerald-800">{active}</div>
+        </div>
+
+        {/* Row 2 */}
+        <div className="flex items-center justify-between rounded-2xl bg-white/90 px-4 py-3 shadow-sm">
+          <div className="flex items-center gap-3">
+            <div className="h-8 w-8 rounded-full bg-amber-50 flex items-center justify-center">
+              <AlertTriangle className="w-4 h-4 text-amber-600" />
+            </div>
+            <p className="text-sm text-stone-700">
+              {needAttention} member{needAttention === 1 ? "" : "s"} need
+              immediate attention for renewal
+            </p>
           </div>
-          <div className="px-3 py-2 rounded-lg bg-rose-50 border border-rose-100">
-            <div className="text-rose-700 text-[11px]">Expired</div>
-            <div className="font-semibold text-rose-800">{expired}</div>
+        </div>
+
+        {/* Row 3 */}
+        <div className="flex items-center justify-between rounded-2xl bg-white/90 px-4 py-3 shadow-sm">
+          <div className="flex items-center gap-3">
+            <div className="h-8 w-8 rounded-full bg-blue-50 flex items-center justify-center">
+              <UsersIcon className="w-4 h-4 text-blue-600" />
+            </div>
+            <p className="text-sm text-stone-700">
+              {goodStanding} active member{goodStanding === 1 ? "" : "s"}{" "}
+              maintaining good standing
+            </p>
           </div>
         </div>
+
+        {/* Suggestion row */}
+        <div className="mt-3 rounded-2xl bg-purple-100 px-4 py-3">
+          <p className="text-sm text-purple-900">
+            <span className="font-semibold">Suggestion:</span> {suggestionText}
+          </p>
+        </div>
       </div>
     </div>
   );