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

frontend/src/components/admin/ClassForm.jsx

@@ -1,183 +1,226 @@
 // frontend/src/components/admin/ClassForm.jsx
 import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@/components/ui/select";
+import { Loader2, Save, X, Plus, Trash2 } from "lucide-react";
 
 const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
 
-export default function ClassForm({
-  classData,
-  onSave,
-  onCancel,
-  isLoading,
-}) {
-  const [name, setName] = useState(classData?.name || "");
-  const [description, setDescription] = useState(classData?.description || "");
-  const [classTime, setClassTime] = useState(classData?.class_time || "");
-  const [daysOfWeek, setDaysOfWeek] = useState(
-    classData?.days_of_week && classData.days_of_week.length
-      ? classData.days_of_week
-      : ["Monday"]
-  );
-  const [classesPerWeek, setClassesPerWeek] = useState(
-    classData?.classes_per_week ?? 1
-  );
-  const [maxStudents, setMaxStudents] = useState(
-    classData?.max_students ?? 20
-  );
-  const [error, setError] = useState("");
+export default function ClassForm({ classData, onSave, onCancel, isLoading }) {
+  // Normalize incoming schedule so it works with:
+  // - old shape: { day, time }
+  // - new shape: { day, from_time, to_time }
+  const initialSchedule =
+    classData?.schedule && classData.schedule.length > 0
+      ? classData.schedule.map((slot) => ({
+          day: slot.day || "Monday",
+          from_time:
+            slot.from_time ??
+            slot.fromTime ??
+            (slot.time ? slot.time.split("-")[0]?.trim() : "") ??
+            "",
+          to_time:
+            slot.to_time ??
+            slot.toTime ??
+            (slot.time ? slot.time.split("-")[1]?.trim() : "") ??
+            ""
+        }))
+      : [{ day: "Monday", from_time: "", to_time: "" }];
 
-  function toggleDay(day) {
-    setDaysOfWeek((prev) =>
-      prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day]
-    );
-  }
+  const [formData, setFormData] = useState({
+    name: classData?.name || "",
+    description: classData?.description || "",
+    schedule: initialSchedule,
+    is_active: classData?.is_active !== undefined ? classData.is_active : true
+  });
+
+  const addScheduleSlot = () => {
+    setFormData((prev) => ({
+      ...prev,
+      schedule: [...prev.schedule, { day: "Monday", from_time: "", to_time: "" }]
+    }));
+  };
+
+  const removeScheduleSlot = (index) => {
+    setFormData((prev) => ({
+      ...prev,
+      schedule: prev.schedule.filter((_, i) => i !== index)
+    }));
+  };
 
-  function handleSubmit(e) {
+  const updateScheduleSlot = (index, field, value) => {
+    setFormData((prev) => {
+      const schedule = [...prev.schedule];
+      schedule[index] = { ...schedule[index], [field]: value };
+      return { ...prev, schedule };
+    });
+  };
+
+  const handleSubmit = (e) => {
     e.preventDefault();
-    setError("");
 
-    if (!name.trim()) {
-      setError("Please enter a class name.");
-      return;
-    }
-    if (!classTime) {
-      setError("Please choose a class time.");
-      return;
-    }
-    if (!daysOfWeek.length) {
-      setError("Please select at least one day.");
+    const invalid = formData.schedule.some(
+      (s) => !s.day || !s.from_time || !s.to_time
+    );
+    if (invalid) {
+      alert("Please fill in both From and To time for each schedule slot.");
       return;
     }
 
     const payload = {
-      name: name.trim(),
-      description: description.trim() || null,
-      class_time: classTime, // HTML time input -> "HH:MM"
-      days_of_week: daysOfWeek,
-      classes_per_week: Number(classesPerWeek) || 1,
-      max_students: Number(maxStudents) || 1,
-      // no membership/plan fields anymore
+      name: formData.name,
+      description: formData.description,
+      is_active: formData.is_active,
+      schedule: formData.schedule.map((slot) => ({
+        day: slot.day,
+        from_time: slot.from_time,
+        to_time: slot.to_time
+      }))
     };
 
-    if (onSave) onSave(payload);
-  }
+    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-700 mb-1">
-            Class Name
-          </label>
-          <input
-            type="text"
-            className="w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/70 focus:border-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-700 mb-1">
-            Class Time
-          </label>
-          <input
-            type="time"
-            className="w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/70 focus:border-red-500"
-            value={classTime}
-            onChange={(e) => setClassTime(e.target.value)}
-          />
-        </div>
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {/* Class name */}
+      <div>
+        <Label>Class Name</Label>
+        <Input
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          placeholder="e.g., Beginner Karate"
+          required
+        />
       </div>
 
       {/* Description */}
       <div>
-        <label className="block text-sm font-medium text-stone-700 mb-1">
-          Description
-        </label>
-        <textarea
-          className="w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/70 focus:border-red-500 min-h-[80px]"
+        <Label>Description</Label>
+        <Textarea
+          value={formData.description}
+          onChange={(e) =>
+            setFormData({ ...formData, description: e.target.value })
+          }
           placeholder="Class description..."
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
+          rows={2}
         />
       </div>
 
-      {/* Days of week */}
+      {/* Schedule */}
       <div>
-        <label className="block text-sm font-medium text-stone-700 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 transition ${
-                  active
-                    ? "bg-red-600 text-white border-red-600"
-                    : "bg-white text-stone-700 border-stone-300 hover:bg-stone-50"
-                }`}
-              >
-                {day}
-              </button>
-            );
-          })}
+        <div className="flex justify-between items-center mb-3">
+          <Label className="text-base">Class Schedule</Label>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={addScheduleSlot}
+            className="gap-2"
+          >
+            <Plus className="w-4 h-4" />
+            Add Time Slot
+          </Button>
         </div>
-      </div>
 
-      {/* Numbers (no plan anymore) */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-stone-700 mb-1">
-            Classes Per Week
-          </label>
-          <input
-            type="number"
-            min={1}
-            className="w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/70 focus:border-red-500"
-            value={classesPerWeek}
-            onChange={(e) => setClassesPerWeek(e.target.value)}
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-stone-700 mb-1">
-            Max Students
-          </label>
-          <input
-            type="number"
-            min={1}
-            className="w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/70 focus:border-red-500"
-            value={maxStudents}
-            onChange={(e) => setMaxStudents(e.target.value)}
-          />
+        <div className="space-y-3">
+          {formData.schedule.map((slot, index) => (
+            <Card key={index} className="p-3 bg-stone-50">
+              <div className="flex flex-col md:flex-row md:items-center gap-3">
+                {/* Day */}
+                <Select
+                  value={slot.day}
+                  onValueChange={(value) =>
+                    updateScheduleSlot(index, "day", value)
+                  }
+                >
+                  <SelectTrigger className="w-full md:w-40">
+                    <SelectValue placeholder="Day" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {DAYS.map((day) => (
+                      <SelectItem key={day} value={day}>
+                        {day}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+
+                {/* From time */}
+                <div className="flex-1">
+                  <Label className="text-xs text-stone-500">From</Label>
+                  <Input
+                    type="time"
+                    value={slot.from_time}
+                    onChange={(e) =>
+                      updateScheduleSlot(index, "from_time", e.target.value)
+                    }
+                  />
+                </div>
+
+                {/* To time */}
+                <div className="flex-1">
+                  <Label className="text-xs text-stone-500">To</Label>
+                  <Input
+                    type="time"
+                    value={slot.to_time}
+                    onChange={(e) =>
+                      updateScheduleSlot(index, "to_time", e.target.value)
+                    }
+                  />
+                </div>
+
+                {/* Remove row */}
+                {formData.schedule.length > 1 && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => removeScheduleSlot(index)}
+                    className="text-red-600 self-end md:self-center"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                )}
+              </div>
+            </Card>
+          ))}
         </div>
       </div>
 
-      {/* Error + buttons */}
-      {error && (
-        <p className="text-sm text-red-600 bg-red-50 border border-red-100 rounded-md px-3 py-2">
-          {error}
-        </p>
-      )}
-      <div className="flex justify-start gap-3 pt-1">
-        <button
+      {/* Actions */}
+      <div className="flex gap-3 pt-2">
+        <Button
           type="submit"
           disabled={isLoading}
-          className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 disabled:opacity-60"
+          className="gap-2 bg-red-600 hover:bg-red-700"
         >
-          {classData ? "Save changes" : "Create Class"}
-        </button>
-        <button
+          {isLoading ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : (
+            <Save className="w-4 h-4" />
+          )}
+          {classData ? "Update Class" : "Create Class"}
+        </Button>
+        <Button
           type="button"
+          variant="outline"
           onClick={onCancel}
-          className="inline-flex items-center justify-center px-4 py-2 rounded-lg border border-stone-300 text-sm font-medium text-stone-700 hover:bg-stone-50"
+          disabled={isLoading}
         >
+          <X className="w-4 h-4 mr-2" />
           Cancel
-        </button>
+        </Button>
       </div>
     </form>
   );