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

frontend/src/components/admin/PlanForm.jsx

@@ -0,0 +1,161 @@
+// frontend/src/components/admin/PlanForm.jsx
+import React, { useEffect, useState } from "react";
+
+const BILLING_OPTIONS = [
+  { value: "monthly", label: "Monthly" },
+  { value: "quarterly", label: "Quarterly" },
+  { value: "annual", label: "Annual" },
+];
+
+export default function PlanForm({ plan, onSave, onCancel, isLoading }) {
+  const [name, setName] = useState("");
+  const [billingPeriod, setBillingPeriod] = useState("monthly");
+  const [price, setPrice] = useState("");
+  const [stripeLink, setStripeLink] = useState("");
+  const [description, setDescription] = useState("");
+  const [isActive, setIsActive] = useState(true);
+
+  useEffect(() => {
+    if (plan) {
+      setName(plan.name || "");
+      setBillingPeriod(plan.billing_period || "monthly");
+      setPrice(plan.price != null ? String(plan.price) : "");
+      setStripeLink(plan.stripe_link || "");
+      setDescription(plan.description || "");
+      setIsActive(plan.is_active ?? true);
+    } else {
+      setName("");
+      setBillingPeriod("monthly");
+      setPrice("");
+      setStripeLink("");
+      setDescription("");
+      setIsActive(true);
+    }
+  }, [plan]);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const priceNumber = parseFloat(price || "0") || 0;
+
+    onSave({
+      name,
+      billing_period: billingPeriod,
+      price: priceNumber,
+      stripe_link: stripeLink || null,
+      description: description || null,
+      is_active: isActive,
+    });
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="grid grid-cols-1 md:grid-cols-2 gap-4 bg-stone-50 border border-stone-200 rounded-xl p-4"
+    >
+      <div className="space-y-2">
+        <div>
+          <label className="block text-xs font-medium text-stone-700 mb-1">
+            Plan name
+          </label>
+          <input
+            type="text"
+            className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+            placeholder="Beginner Monthly"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-stone-700 mb-1">
+            Billing period
+          </label>
+          <select
+            className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+            value={billingPeriod}
+            onChange={(e) => setBillingPeriod(e.target.value)}
+          >
+            {BILLING_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-stone-700 mb-1">
+            Price (CAD)
+          </label>
+          <input
+            type="number"
+            className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+            placeholder="99"
+            value={price}
+            onChange={(e) => setPrice(e.target.value)}
+            min="0"
+            step="0.01"
+          />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <div>
+          <label className="block text-xs font-medium text-stone-700 mb-1">
+            Stripe payment link
+          </label>
+          <input
+            type="url"
+            className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+            placeholder="https://buy.stripe.com/..."
+            value={stripeLink}
+            onChange={(e) => setStripeLink(e.target.value)}
+          />
+          <p className="text-[11px] text-stone-500 mt-1">
+            Paste the Stripe Checkout link for this plan.
+          </p>
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-stone-700 mb-1">
+            Description
+          </label>
+          <textarea
+            className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 min-h-[60px]"
+            placeholder="Beginner classes 2x per week."
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+        </div>
+
+        <div className="flex items-center justify-between pt-1">
+          <label className="inline-flex items-center gap-2 text-xs text-stone-700">
+            <input
+              type="checkbox"
+              className="rounded border-stone-300"
+              checked={isActive}
+              onChange={(e) => setIsActive(e.target.checked)}
+            />
+            Active / visible to students
+          </label>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="px-3 py-1.5 rounded-lg border border-stone-200 text-xs font-medium text-stone-700 hover:bg-stone-100"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="px-3 py-1.5 rounded-lg bg-indigo-600 text-white text-xs font-medium hover:bg-indigo-700 disabled:opacity-60"
+            >
+              {isLoading ? "Saving…" : plan ? "Update plan" : "Create plan"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}