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

frontend/src/components/admin/ClassForm.jsx

@@ -1,24 +1,19 @@
 // frontend/src/components/admin/ClassForm.jsx
 import React, { useState, useEffect } from "react";
-
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
-import { Textarea } from "../ui/textarea";
-import { Label } from "../ui/label";
-import { Card } from "../ui/card";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
-import { Loader2, Save, X, Plus, Trash2 } from "lucide-react";
-
-const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+import { Plus, Trash2, Loader2, Save, X } from "lucide-react";
+
+const DAYS = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+];
 
 export default function ClassForm({ classData, onSave, onCancel, isLoading }) {
-  // schedule is an array of { day, start_time, end_time }
+  // schedule: [{ day, start_time, end_time }]
   const [formData, setFormData] = useState({
     name: "",
     description: "",
@@ -26,17 +21,13 @@ export default function ClassForm({ classData, onSave, onCancel, isLoading }) {
     is_active: true,
   });
 
-  // Map existing classData into the new schedule shape if present
   useEffect(() => {
     if (!classData) return;
-
-    // If backend later returns something like classData.schedule, you can
-    // normalize here. For now, just carry through what we have.
     setFormData({
       name: classData.name || "",
       description: classData.description || "",
       schedule:
-        classData.schedule && Array.isArray(classData.schedule) && classData.schedule.length > 0
+        Array.isArray(classData.schedule) && classData.schedule.length > 0
           ? classData.schedule.map((slot) => ({
               day: slot.day || "Monday",
               start_time: slot.start_time || "",
@@ -67,23 +58,24 @@ export default function ClassForm({ classData, onSave, onCancel, isLoading }) {
 
   const updateScheduleSlot = (index, field, value) => {
     setFormData((prev) => {
-      const newSchedule = [...prev.schedule];
-      newSchedule[index] = { ...newSchedule[index], [field]: value };
-      return { ...prev, schedule: newSchedule };
+      const schedule = [...prev.schedule];
+      schedule[index] = { ...schedule[index], [field]: value };
+      return { ...prev, schedule };
     });
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    // Transform schedule into something the backend can understand.
-    // For now we flatten into a human-readable string array so you can
-    // later wire to class_time / days_of_week or a new table.
+    // Transform schedule to a simple structure that backend can later map
     const transformedSchedule = formData.schedule.map((slot) => ({
       day: slot.day,
-      time: `${slot.start_time || "00:00"}-${slot.end_time || "00:00"}`,
       start_time: slot.start_time,
       end_time: slot.end_time,
+      time:
+        slot.start_time && slot.end_time
+          ? `${slot.start_time}-${slot.end_time}`
+          : "",
     }));
 
     const payload = {
@@ -99,9 +91,13 @@ export default function ClassForm({ classData, onSave, onCancel, isLoading }) {
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       {/* Class Name */}
-      <div>
-        <Label>Class Name</Label>
-        <Input
+      <div className="space-y-1">
+        <label className="block text-sm font-medium text-stone-800">
+          Class Name
+        </label>
+        <input
+          type="text"
+          className="w-full rounded-md border border-stone-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-600"
           value={formData.name}
           onChange={(e) =>
             setFormData((prev) => ({ ...prev, name: e.target.value }))
@@ -112,63 +108,76 @@ export default function ClassForm({ classData, onSave, onCancel, isLoading }) {
       </div>
 
       {/* Description */}
-      <div>
-        <Label>Description</Label>
-        <Textarea
+      <div className="space-y-1">
+        <label className="block text-sm font-medium text-stone-800">
+          Description
+        </label>
+        <textarea
+          className="w-full rounded-md border border-stone-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-600"
+          rows={2}
           value={formData.description}
           onChange={(e) =>
-            setFormData((prev) => ({ ...prev, description: e.target.value }))
+            setFormData((prev) => ({
+              ...prev,
+              description: e.target.value,
+            }))
           }
           placeholder="Class description..."
-          rows={2}
         />
       </div>
 
       {/* Schedule */}
       <div>
-        <div className="flex justify-between items-center mb-3">
-          <Label className="text-base">Class Schedule</Label>
-          <Button
+        <div className="flex items-center justify-between mb-3">
+          <span className="text-sm font-medium text-stone-800">
+            Class Schedule
+          </span>
+          <button
             type="button"
-            variant="outline"
-            size="sm"
             onClick={addScheduleSlot}
-            className="gap-2"
+            className="inline-flex items-center gap-2 rounded-md border border-stone-300 px-2.5 py-1 text-xs font-medium text-stone-800 hover:bg-stone-50"
           >
             <Plus className="w-4 h-4" />
             Add Time Slot
-          </Button>
+          </button>
         </div>
 
         <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 */}
-                <Select
-                  value={slot.day}
-                  onValueChange={(value) =>
-                    updateScheduleSlot(index, "day", value)
-                  }
-                >
-                  <SelectTrigger className="w-full md:w-40">
-                    <SelectValue placeholder="Day" />
-                  </SelectTrigger>
-                  <SelectContent>
+            <div
+              key={index}
+              className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-3"
+            >
+              <div className="flex flex-col gap-3 md:flex-row md:items-center">
+                {/* Day */}
+                <div className="w-full md:w-40">
+                  <label className="block text-xs font-medium text-stone-700 mb-1">
+                    Day
+                  </label>
+                  <select
+                    className="w-full rounded-md border border-stone-300 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-600"
+                    value={slot.day}
+                    onChange={(e) =>
+                      updateScheduleSlot(index, "day", e.target.value)
+                    }
+                  >
                     {DAYS.map((day) => (
-                      <SelectItem key={day} value={day}>
+                      <option key={day} value={day}>
                         {day}
-                      </SelectItem>
+                      </option>
                     ))}
-                  </SelectContent>
-                </Select>
+                  </select>
+                </div>
 
-                {/* From / To time pickers */}
-                <div className="flex flex-1 flex-col md:flex-row gap-3">
+                {/* From / To */}
+                <div className="flex flex-1 flex-col gap-3 md:flex-row">
                   <div className="flex-1">
-                    <Label className="text-xs mb-1 block">From</Label>
-                    <Input
+                    <label className="block text-xs font-medium text-stone-700 mb-1">
+                      From
+                    </label>
+                    <input
                       type="time"
+                      className="w-full rounded-md border border-stone-300 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-600"
                       value={slot.start_time}
                       onChange={(e) =>
                         updateScheduleSlot(index, "start_time", e.target.value)
@@ -176,9 +185,12 @@ export default function ClassForm({ classData, onSave, onCancel, isLoading }) {
                     />
                   </div>
                   <div className="flex-1">
-                    <Label className="text-xs mb-1 block">To</Label>
-                    <Input
+                    <label className="block text-xs font-medium text-stone-700 mb-1">
+                      To
+                    </label>
+                    <input
                       type="time"
+                      className="w-full rounded-md border border-stone-300 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-600"
                       value={slot.end_time}
                       onChange={(e) =>
                         updateScheduleSlot(index, "end_time", e.target.value)
@@ -187,29 +199,28 @@ export default function ClassForm({ classData, onSave, onCancel, isLoading }) {
                   </div>
                 </div>
 
+                {/* Remove */}
                 {formData.schedule.length > 1 && (
-                  <Button
+                  <button
                     type="button"
-                    variant="ghost"
-                    size="icon"
                     onClick={() => removeScheduleSlot(index)}
-                    className="text-red-600 self-start md:self-center"
+                    className="self-start rounded-md p-2 text-red-600 hover:bg-red-50"
                   >
                     <Trash2 className="w-4 h-4" />
-                  </Button>
+                  </button>
                 )}
               </div>
-            </Card>
+            </div>
           ))}
         </div>
       </div>
 
       {/* Actions */}
       <div className="flex gap-3 pt-2">
-        <Button
+        <button
           type="submit"
           disabled={isLoading}
-          className="gap-2 bg-red-600 hover:bg-red-700"
+          className="inline-flex items-center gap-2 rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-60"
         >
           {isLoading ? (
             <Loader2 className="w-4 h-4 animate-spin" />
@@ -217,16 +228,17 @@ export default function ClassForm({ classData, onSave, onCancel, isLoading }) {
             <Save className="w-4 h-4" />
           )}
           {classData ? "Update Class" : "Create Class"}
-        </Button>
-        <Button
+        </button>
+
+        <button
           type="button"
-          variant="outline"
           onClick={onCancel}
           disabled={isLoading}
+          className="inline-flex items-center gap-2 rounded-md border border-stone-300 px-4 py-2 text-sm font-medium text-stone-800 hover:bg-stone-50 disabled:opacity-60"
         >
-          <X className="w-4 h-4 mr-2" />
+          <X className="w-4 h-4" />
           Cancel
-        </Button>
+        </button>
       </div>
     </form>
   );