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

frontend/src/components/admin/ClassesTable.jsx

@@ -1,18 +1,5 @@
 // frontend/src/components/admin/ClassesTable.jsx
 import React from "react";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../ui/table";
-import { Button } from "../ui/button";
-import { Badge } from "../ui/badge";
-import { Card } from "../ui/card";
-import { Skeleton } from "../ui/skeleton";
 import { Edit2, Trash2, Users } from "lucide-react";
 
 export default function ClassesTable({
@@ -26,7 +13,10 @@ export default function ClassesTable({
     return (
       <div className="space-y-3">
         {[1, 2, 3].map((i) => (
-          <Skeleton key={i} className="h-16 w-full" />
+          <div
+            key={i}
+            className="h-16 w-full animate-pulse rounded-md bg-stone-100"
+          />
         ))}
       </div>
     );
@@ -42,31 +32,41 @@ export default function ClassesTable({
 
   return (
     <>
-      {/* Desktop Table */}
+      {/* Desktop table */}
       <div className="hidden md:block overflow-x-auto">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Class Name</TableHead>
-              <TableHead>Schedule</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead className="text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
+        <table className="min-w-full text-sm border border-stone-200 rounded-lg overflow-hidden">
+          <thead className="bg-stone-50">
+            <tr>
+              <th className="px-4 py-2 text-left font-semibold text-stone-800">
+                Class Name
+              </th>
+              <th className="px-4 py-2 text-left font-semibold text-stone-800">
+                Schedule
+              </th>
+              <th className="px-4 py-2 text-left font-semibold text-stone-800">
+                Status
+              </th>
+              <th className="px-4 py-2 text-right font-semibold text-stone-800">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
             {classes.map((cls) => (
-              <TableRow key={cls.id}>
-                <TableCell>
+              <tr key={cls.id} className="border-t border-stone-200">
+                <td className="px-4 py-3 align-top">
                   <div>
-                    <div className="font-medium">{cls.name}</div>
+                    <div className="font-medium text-stone-900">
+                      {cls.name}
+                    </div>
                     {cls.description && (
-                      <div className="text-xs text-stone-500 truncate max-w-xs">
+                      <div className="text-xs text-stone-500 max-w-xs truncate">
                         {cls.description}
                       </div>
                     )}
                   </div>
-                </TableCell>
-                <TableCell>
+                </td>
+                <td className="px-4 py-3 align-top">
                   <div className="space-y-1 text-sm">
                     {(cls.schedule || []).map((slot, idx) => (
                       <div key={idx}>
@@ -77,55 +77,68 @@ export default function ClassesTable({
                       </div>
                     ))}
                   </div>
-                </TableCell>
-                <TableCell>
-                  <Badge variant={cls.is_active ? "default" : "secondary"}>
+                </td>
+                <td className="px-4 py-3 align-top">
+                  <span
+                    className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
+                      cls.is_active
+                        ? "bg-green-100 text-green-800"
+                        : "bg-stone-200 text-stone-700"
+                    }`}
+                  >
                     {cls.is_active ? "Active" : "Inactive"}
-                  </Badge>
-                </TableCell>
-                <TableCell className="text-right">
+                  </span>
+                </td>
+                <td className="px-4 py-3 align-top text-right">
                   <div className="flex justify-end gap-2">
-                    <Button
-                      variant="outline"
-                      size="sm"
+                    <button
+                      type="button"
                       onClick={() => onManageStudents(cls)}
-                      className="gap-2"
+                      className="inline-flex items-center gap-1 rounded-md border border-stone-300 px-2.5 py-1 text-xs font-medium text-stone-800 hover:bg-stone-50"
                     >
                       <Users className="w-4 h-4" />
                       Students
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="icon"
+                    </button>
+                    <button
+                      type="button"
                       onClick={() => onEdit(cls)}
+                      className="inline-flex items-center justify-center rounded-md border border-stone-300 px-2.5 py-1 text-xs text-stone-800 hover:bg-stone-50"
                     >
                       <Edit2 className="w-4 h-4" />
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="icon"
+                    </button>
+                    <button
+                      type="button"
                       onClick={() => onDelete(cls.id)}
-                      className="text-red-600 hover:bg-red-50"
+                      className="inline-flex items-center justify-center rounded-md border border-red-200 px-2.5 py-1 text-xs text-red-700 hover:bg-red-50"
                     >
                       <Trash2 className="w-4 h-4" />
-                    </Button>
+                    </button>
                   </div>
-                </TableCell>
-              </TableRow>
+                </td>
+              </tr>
             ))}
-          </TableBody>
-        </Table>
+          </tbody>
+        </table>
       </div>
 
-      {/* Mobile Cards */}
+      {/* Mobile cards */}
       <div className="md:hidden space-y-3">
         {classes.map((cls) => (
-          <Card key={cls.id} className="p-4">
+          <div
+            key={cls.id}
+            className="rounded-lg border border-stone-200 p-4 bg-white shadow-sm"
+          >
             <div className="flex justify-between items-start mb-2">
               <div className="font-semibold text-stone-900">{cls.name}</div>
-              <Badge variant={cls.is_active ? "default" : "secondary"}>
+              <span
+                className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
+                  cls.is_active
+                    ? "bg-green-100 text-green-800"
+                    : "bg-stone-200 text-stone-700"
+                }`}
+              >
                 {cls.is_active ? "Active" : "Inactive"}
-              </Badge>
+              </span>
             </div>
             {cls.description && (
               <p className="text-sm text-stone-600 mb-3">
@@ -143,32 +156,30 @@ export default function ClassesTable({
               ))}
             </div>
             <div className="flex gap-2">
-              <Button
-                variant="outline"
-                size="sm"
+              <button
+                type="button"
                 onClick={() => onManageStudents(cls)}
-                className="flex-1 gap-2"
+                className="flex-1 inline-flex items-center justify-center gap-1 rounded-md border border-stone-300 px-2.5 py-1.5 text-xs font-medium text-stone-800 hover:bg-stone-50"
               >
                 <Users className="w-4 h-4" />
                 Students
-              </Button>
-              <Button
-                variant="outline"
-                size="icon"
+              </button>
+              <button
+                type="button"
                 onClick={() => onEdit(cls)}
+                className="inline-flex items-center justify-center rounded-md border border-stone-300 px-2.5 py-1.5 text-xs text-stone-800 hover:bg-stone-50"
               >
                 <Edit2 className="w-4 h-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="icon"
+              </button>
+              <button
+                type="button"
                 onClick={() => onDelete(cls.id)}
-                className="text-red-600"
+                className="inline-flex items-center justify-center rounded-md border border-red-200 px-2.5 py-1.5 text-xs text-red-700 hover:bg-red-50"
               >
                 <Trash2 className="w-4 h-4" />
-              </Button>
+              </button>
             </div>
-          </Card>
+          </div>
         ))}
       </div>
     </>