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

frontend/src/components/admin/ClassForm.jsx

@@ -11,18 +11,23 @@ export default function ClassForm({
   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 [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 || 2
+    classData?.classes_per_week ?? 1
   );
   const [maxStudents, setMaxStudents] = useState(
-    classData?.max_students || 20
+    classData?.max_students ?? 20
   );
   const [membershipPlanId, setMembershipPlanId] = useState(
-    classData?.membership_plan_id || ""
+    classData?.membership_plan_id ?? ""
   );
+  const [error, setError] = useState("");
 
   function toggleDay(day) {
     setDaysOfWeek((prev) =>
@@ -32,44 +37,57 @@ export default function ClassForm({
 
   function handleSubmit(e) {
     e.preventDefault();
-    if (!name.trim()) return;
+    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.");
+      return;
+    }
 
     const payload = {
       name: name.trim(),
       description: description.trim() || null,
-      class_time: classTime || null,
+      class_time: classTime, // HTML time input -> "HH:MM", backend parses to time
       days_of_week: daysOfWeek,
-      classes_per_week: Number(classesPerWeek) || 0,
-      max_students: Number(maxStudents) || 0,
+      classes_per_week: Number(classesPerWeek) || 1,
+      max_students: Number(maxStudents) || 1,
       membership_plan_id: membershipPlanId ? Number(membershipPlanId) : null,
     };
 
-    onSave && onSave(payload);
+    if (onSave) onSave(payload);
   }
 
   return (
     <form onSubmit={handleSubmit} className="space-y-5">
-      {/* Class name & time */}
+      {/* 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">
+          <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-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-red-500"
+            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-800 mb-1">
+          <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-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-red-500"
+            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)}
           />
@@ -78,11 +96,11 @@ export default function ClassForm({
 
       {/* Description */}
       <div>
-        <label className="block text-sm font-medium text-stone-800 mb-1">
+        <label className="block text-sm 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-red-500 min-h-[80px]"
+          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]"
           placeholder="Class description..."
           value={description}
           onChange={(e) => setDescription(e.target.value)}
@@ -91,7 +109,7 @@ export default function ClassForm({
 
       {/* Days of week */}
       <div>
-        <label className="block text-sm font-medium text-stone-800 mb-2">
+        <label className="block text-sm font-medium text-stone-700 mb-2">
           Days of Week
         </label>
         <div className="flex flex-wrap gap-2">
@@ -102,10 +120,10 @@ export default function ClassForm({
                 key={day}
                 type="button"
                 onClick={() => toggleDay(day)}
-                className={`px-3 py-1.5 rounded-full text-xs font-medium border ${
+                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-200 hover:bg-stone-50"
+                    : "bg-white text-stone-700 border-stone-300 hover:bg-stone-50"
                 }`}
               >
                 {day}
@@ -115,64 +133,70 @@ export default function ClassForm({
         </div>
       </div>
 
-      {/* Numbers & plan */}
+      {/* 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">
+          <label className="block text-sm font-medium text-stone-700 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"
+            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-800 mb-1">
+          <label className="block text-sm font-medium text-stone-700 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"
+            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>
         <div>
-          <label className="block text-sm font-medium text-stone-800 mb-1">
+          <label className="block text-sm font-medium text-stone-700 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 || ""}
+            className="w-full rounded-lg border border-stone-300 px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-red-500/70 focus:border-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}
+                {p.name} ({p.billing_period})
               </option>
             ))}
           </select>
         </div>
       </div>
 
-      {/* Actions */}
-      <div className="flex justify-start gap-3 pt-2">
+      {/* 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
           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"
+          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"
         >
-          {isLoading ? "Saving..." : classData ? "Update Class" : "Create Class"}
+          {classData ? "Save changes" : "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"
+          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"
         >
           Cancel
         </button>