Create ClassForm.jsx

frontend/src/components/admin/ClassForm.jsx

@@ -0,0 +1,182 @@
+// frontend/src/components/admin/ClassForm.jsx
+import React, { useState } from "react";
+
+const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+
+export default function ClassForm({
+  classData,
+  plans = [],
+  onSave,
+  onCancel,
+  isLoading,
+}) {
+  const [name, setName] = useState(classData?.name || "");
+  const [classTime, setClassTime] = useState(classData?.class_time || "");
+  const [description, setDescription] = useState(classData?.description || "");
+  const [daysOfWeek, setDaysOfWeek] = useState(classData?.days_of_week || []);
+  const [classesPerWeek, setClassesPerWeek] = useState(
+    classData?.classes_per_week || 2
+  );
+  const [maxStudents, setMaxStudents] = useState(
+    classData?.max_students || 20
+  );
+  const [membershipPlanId, setMembershipPlanId] = useState(
+    classData?.membership_plan_id || ""
+  );
+
+  function toggleDay(day) {
+    setDaysOfWeek((prev) =>
+      prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day]
+    );
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    const payload = {
+      name: name.trim(),
+      description: description.trim() || null,
+      class_time: classTime || null,
+      days_of_week: daysOfWeek,
+      classes_per_week: Number(classesPerWeek) || 0,
+      max_students: Number(maxStudents) || 0,
+      membership_plan_id: membershipPlanId ? Number(membershipPlanId) : null,
+    };
+
+    onSave && onSave(payload);
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5">
+      {/* Class name & time */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-stone-800 mb-1">
+            Class 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-red-500"
+            placeholder="e.g., Beginner Karate"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-stone-800 mb-1">
+            Class Time
+          </label>
+          <input
+            type="time"
+            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"
+            value={classTime}
+            onChange={(e) => setClassTime(e.target.value)}
+          />
+        </div>
+      </div>
+
+      {/* Description */}
+      <div>
+        <label className="block text-sm font-medium text-stone-800 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-red-500 min-h-[80px]"
+          placeholder="Class description..."
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+        />
+      </div>
+
+      {/* Days of week */}
+      <div>
+        <label className="block text-sm font-medium text-stone-800 mb-2">
+          Days of Week
+        </label>
+        <div className="flex flex-wrap gap-2">
+          {DAYS.map((day) => {
+            const active = daysOfWeek.includes(day);
+            return (
+              <button
+                key={day}
+                type="button"
+                onClick={() => toggleDay(day)}
+                className={`px-3 py-1.5 rounded-full text-xs font-medium border ${
+                  active
+                    ? "bg-red-600 text-white border-red-600"
+                    : "bg-white text-stone-700 border-stone-200 hover:bg-stone-50"
+                }`}
+              >
+                {day}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Numbers & plan */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-stone-800 mb-1">
+            Classes Per Week
+          </label>
+          <input
+            type="number"
+            min="0"
+            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"
+            value={classesPerWeek}
+            onChange={(e) => setClassesPerWeek(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-stone-800 mb-1">
+            Max Students
+          </label>
+          <input
+            type="number"
+            min="0"
+            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"
+            value={maxStudents}
+            onChange={(e) => setMaxStudents(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-stone-800 mb-1">
+            Membership Plan
+          </label>
+          <select
+            className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm bg-white focus:outline-none focus:ring-1 focus:ring-red-500"
+            value={membershipPlanId || ""}
+            onChange={(e) => setMembershipPlanId(e.target.value)}
+          >
+            <option value="">Select plan</option>
+            {plans.map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex justify-start gap-3 pt-2">
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="inline-flex items-center justify-center rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium px-4 py-2 disabled:opacity-60"
+        >
+          {isLoading ? "Saving..." : classData ? "Update Class" : "Create Class"}
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="inline-flex items-center justify-center rounded-lg border border-stone-200 text-sm font-medium px-4 py-2 text-stone-700 hover:bg-stone-50"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+}