Create ClassesTable.jsx

frontend/src/components/admin/ClassesTable.jsx

@@ -0,0 +1,92 @@
+// frontend/src/components/admin/ClassesTable.jsx
+import React from "react";
+
+export default function ClassesTable({
+  classes = [],
+  isLoading,
+  onEdit,
+  onDelete,
+  onViewEnrollments,
+}) {
+  if (isLoading) {
+    return (
+      <div className="py-6 text-sm text-stone-500">
+        Loading classes...
+      </div>
+    );
+  }
+
+  if (!classes.length) {
+    return (
+      <div className="py-6 text-sm text-stone-500">
+        No classes created yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full text-sm">
+        <thead>
+          <tr className="text-left text-xs font-semibold text-stone-500 border-b border-stone-100">
+            <th className="py-2 pr-4">Class Name</th>
+            <th className="py-2 px-4">Plan</th>
+            <th className="py-2 px-4">Days</th>
+            <th className="py-2 px-4">Time</th>
+            <th className="py-2 px-4">Max Students</th>
+            <th className="py-2 pl-4 text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {classes.map((cls) => (
+            <tr
+              key={cls.id}
+              className="border-b border-stone-100 last:border-0 hover:bg-stone-50/60"
+            >
+              <td className="py-3 pr-4 text-stone-900 font-medium">
+                {cls.name}
+              </td>
+              <td className="py-3 px-4 text-stone-700">
+                {cls.membership_plan_name || "-"}
+              </td>
+              <td className="py-3 px-4 text-stone-700">
+                {(cls.days_of_week || []).join(", ") || "-"}
+              </td>
+              <td className="py-3 px-4 text-stone-700">
+                {cls.class_time || "-"}
+              </td>
+              <td className="py-3 px-4 text-stone-700">
+                {cls.max_students ?? "-"}
+              </td>
+              <td className="py-3 pl-4 text-right">
+                <div className="inline-flex gap-2">
+                  <button
+                    type="button"
+                    onClick={() => onViewEnrollments && onViewEnrollments(cls)}
+                    className="text-xs font-medium text-purple-700 hover:text-purple-900"
+                  >
+                    Enrollments
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => onEdit && onEdit(cls)}
+                    className="text-xs font-medium text-stone-700 hover:text-stone-900"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => onDelete && onDelete(cls.id)}
+                    className="text-xs font-medium text-red-600 hover:text-red-700"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}