Create admin/MembershipInviteForm.jsx

frontend/src/components/admin/MembershipInviteForm.jsx

@@ -0,0 +1,108 @@
+// frontend/src/components/admin/MembershipInviteForm.jsx
+import React, { useState } from "react";
+import { Send, X } from "lucide-react";
+
+export default function MembershipInviteForm({
+  plans,
+  onSend,
+  onCancel,
+  isLoading,
+}) {
+  const [email, setEmail] = useState("parent@email.com");
+  const [selectedPlanId, setSelectedPlanId] = useState("");
+  const [classDetails, setClassDetails] = useState("");
+
+  const selectedPlan = plans.find((p) => p.id === parseInt(selectedPlanId));
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!email.trim() || !selectedPlanId) {
+      return;
+    }
+
+    onSend({
+      email: email.trim(),
+      plan_id: parseInt(selectedPlanId),
+      class_details: classDetails.trim(),
+      invited_by: "admin",
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-stone-700 mb-1.5">
+          Email Address
+        </label>
+        <input
+          type="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
+          placeholder="parent@email.com"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-stone-700 mb-1.5">
+          Membership Plan
+        </label>
+        <select
+          required
+          value={selectedPlanId}
+          onChange={(e) => setSelectedPlanId(e.target.value)}
+          className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
+        >
+          <option value="">Select a plan...</option>
+          {plans
+            .filter((p) => p.is_active)
+            .map((plan) => (
+              <option key={plan.id} value={plan.id}>
+                {plan.name} - ${plan.price}/{plan.billing_period} (Up to{" "}
+                {plan.max_students || 1} student{plan.max_students !== 1 ? "s" : ""})
+              </option>
+            ))}
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-stone-700 mb-1.5">
+          Class Information (shown to member)
+        </label>
+        <textarea
+          value={classDetails}
+          onChange={(e) => setClassDetails(e.target.value)}
+          rows={4}
+          className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
+          placeholder="e.g., Beginner Karate - Mon & Wed 4:00 PM, Advanced Karate - Fri 5:00 PM"
+        />
+        <p className="text-xs text-stone-500 mt-1">
+          Describe the classes included so the member knows what they're signing
+          up for
+        </p>
+      </div>
+
+      <div className="flex items-center justify-end gap-2 pt-2">
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={isLoading}
+          className="inline-flex items-center gap-2 rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-50 disabled:opacity-50"
+        >
+          <X className="w-4 h-4" />
+          Cancel
+        </button>
+        <button
+          type="submit"
+          disabled={isLoading || !email.trim() || !selectedPlanId}
+          className="inline-flex items-center gap-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <Send className="w-4 h-4" />
+          {isLoading ? "Sending..." : "Send Invite"}
+        </button>
+      </div>
+    </form>
+  );
+}
+