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

frontend/src/components/admin/AIInsightBox.jsx

@@ -0,0 +1,38 @@
+// frontend/src/components/admin/AIInsightBox.jsx
+import React from "react";
+
+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;
+
+  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>
+          <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>
+          <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>
+        </div>
+      </div>
+    </div>
+  );
+}