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

frontend/src/components/admin/AIInsightBox.jsx

@@ -11,9 +11,10 @@ import { differenceInDays } from "date-fns";
 
 export default function AIInsightBox({
   memberships = [],
-  onShowRenewingSoon,
-  onShowNeedAttention,
-  onShowGoodStanding,
+  onRenewingSoonClick,
+  onNeedAttentionClick,
+  onGoodStandingClick,
+  onSuggestionClick,
 }) {
   const now = new Date();
 
@@ -31,7 +32,9 @@ export default function AIInsightBox({
     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
@@ -40,12 +43,6 @@ export default function AIInsightBox({
           needAttention === 1 ? "" : "s"
         } this week to improve retention.`;
 
-  const clickableRowBase =
-    "flex items-center justify-between rounded-2xl bg-white/90 px-4 py-3 shadow-sm transition hover:shadow-md cursor-pointer";
-
-  const staticRowBase =
-    "flex items-center justify-between rounded-2xl bg-white/90 px-4 py-3 shadow-sm";
-
   return (
     <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">
@@ -56,26 +53,28 @@ export default function AIInsightBox({
       </h2>
 
       <div className="space-y-3">
-        {/* Row 1 – renewing soon */}
-        <div
-          className={onShowRenewingSoon ? clickableRowBase : staticRowBase}
-          onClick={onShowRenewingSoon}
+        {/* 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 – need attention */}
-        <div
-          className={onShowNeedAttention ? clickableRowBase : staticRowBase}
-          onClick={onShowNeedAttention}
+        {/* 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">
@@ -86,12 +85,13 @@ export default function AIInsightBox({
               immediate attention for renewal
             </p>
           </div>
-        </div>
+        </button>
 
-        {/* Row 3 – good standing */}
-        <div
-          className={onShowGoodStanding ? clickableRowBase : staticRowBase}
-          onClick={onShowGoodStanding}
+        {/* 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">
@@ -102,19 +102,21 @@ export default function AIInsightBox({
               maintaining good standing
             </p>
           </div>
-        </div>
+        </button>
 
         {/* Suggestion row */}
-        <div className="mt-3 rounded-2xl bg-purple-100 px-4 py-3">
-          <p className="text-sm text-purple-900 flex items-center gap-2">
-            <span className="inline-flex items-center justify-center h-5 w-5 rounded-full bg-yellow-100 text-yellow-600">
-              <Lightbulb className="w-3 h-3" />
-            </span>
-            <span>
-              <span className="font-semibold">Suggestion:</span> {suggestionText}
-            </span>
+        <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>
   );