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

frontend/src/components/admin/AIInsightBox.jsx

@@ -9,7 +9,13 @@ import {
 } from "lucide-react";
 import { differenceInDays } from "date-fns";
 
-export default function AIInsightBox({ memberships = [] }) {
+export default function AIInsightBox({
+  memberships = [],
+  onRenewingSoonClick,
+  onNeedAttentionClick,
+  onGoodStandingClick,
+  onSuggestionClick,
+}) {
   const now = new Date();
 
   const totalMembers = memberships.length;
@@ -26,7 +32,9 @@ export default function AIInsightBox({ memberships = [] }) {
     return m.status === "expired" || days < 0;
   }).length;
 
-  const goodStanding = memberships.filter((m) => m.status === "active").length;
+  const goodStanding = memberships.filter(
+    (m) => m.status === "active"
+  ).length;
 
   const suggestionText =
     totalMembers === 0
@@ -45,21 +53,29 @@ export default function AIInsightBox({ memberships = [] }) {
       </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">
+        {/* Row 1: renewing soon */}
+        <button
+          type="button"
+          onClick={onRenewingSoonClick}
+          className="w-full flex items-center justify-between rounded-2xl bg-white/90 px-4 py-3 shadow-sm hover:shadow-md transition-shadow cursor-pointer text-left"
+        >
           <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
+              {renewingSoon} member{renewingSoon === 1 ? "" : "s"} are
+              due for renewal in the next 2 weeks
             </p>
           </div>
-        </div>
+        </button>
 
-        {/* Row 2 */}
-        <div className="flex items-center justify-between rounded-2xl bg-white/90 px-4 py-3 shadow-sm">
+        {/* Row 2: need attention */}
+        <button
+          type="button"
+          onClick={onNeedAttentionClick}
+          className="w-full flex items-center justify-between rounded-2xl bg-white/90 px-4 py-3 shadow-sm hover:shadow-md transition-shadow cursor-pointer text-left"
+        >
           <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" />
@@ -69,10 +85,14 @@ export default function AIInsightBox({ memberships = [] }) {
               immediate attention for renewal
             </p>
           </div>
-        </div>
+        </button>
 
-        {/* Row 3 */}
-        <div className="flex items-center justify-between rounded-2xl bg-white/90 px-4 py-3 shadow-sm">
+        {/* Row 3: good standing */}
+        <button
+          type="button"
+          onClick={onGoodStandingClick}
+          className="w-full flex items-center justify-between rounded-2xl bg-white/90 px-4 py-3 shadow-sm hover:shadow-md transition-shadow cursor-pointer text-left"
+        >
           <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" />
@@ -82,17 +102,21 @@ export default function AIInsightBox({ memberships = [] }) {
               maintaining good standing
             </p>
           </div>
-        </div>
+        </button>
 
-        {/* Suggestion row with bulb icon */}
-        <div className="mt-3 flex items-center gap-3 rounded-2xl bg-purple-100 px-4 py-3">
-          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-amber-100">
-            <Lightbulb className="w-4 h-4 text-amber-500" />
-          </div>
+        {/* Suggestion row */}
+        <button
+          type="button"
+          onClick={onSuggestionClick}
+          className="mt-3 w-full rounded-2xl bg-purple-100 px-4 py-3 text-left hover:bg-purple-200/80 transition-colors cursor-pointer flex items-center gap-2"
+        >
+          <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-yellow-100">
+            <Lightbulb className="w-4 h-4 text-yellow-500" />
+          </span>
           <p className="text-sm text-purple-900">
             <span className="font-semibold">Suggestion:</span> {suggestionText}
           </p>
-        </div>
+        </button>
       </div>
     </div>
   );