feat(classes): optimize teacher dashboard ui and implement grade management

src/modules/exams/components/exam-columns.tsx

@@ -30,109 +30,126 @@ export const examColumns: ColumnDef<Exam>[] = [
   },
   {
     accessorKey: "title",
-    header: "Title",
+    header: "Exam Info",
     cell: ({ row }) => (
-      <div className="flex items-center gap-2">
-        <span className="font-medium">{row.original.title}</span>
-        {row.original.tags && row.original.tags.length > 0 && (
-          <div className="flex flex-wrap gap-1">
-            {row.original.tags.slice(0, 2).map((t, idx) => (
-              <Badge key={`${t}-${idx}`} variant="outline" className="text-xs">
-                {t}
-              </Badge>
-            ))}
-            {row.original.tags.length > 2 && (
-              <Badge variant="outline" className="text-xs">+{row.original.tags.length - 2}</Badge>
-            )}
-          </div>
-        )}
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-base">{row.original.title}</span>
+          {row.original.tags && row.original.tags.length > 0 && (
+            <div className="flex flex-wrap gap-1">
+              {row.original.tags.slice(0, 2).map((t, idx) => (
+                <Badge key={`${t}-${idx}`} variant="secondary" className="h-5 px-1.5 text-[10px]">
+                  {t}
+                </Badge>
+              ))}
+              {row.original.tags.length > 2 && (
+                <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">+{row.original.tags.length - 2}</Badge>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <span className="font-medium text-foreground/80">{row.original.subject}</span>
+          <span>•</span>
+          <span>{row.original.grade}</span>
+        </div>
       </div>
     ),
   },
-  {
-    accessorKey: "subject",
-    header: "Subject",
-  },
-  {
-    accessorKey: "grade",
-    header: "Grade",
-    cell: ({ row }) => (
-      <span className="text-muted-foreground text-xs">{row.original.grade}</span>
-    ),
-  },
   {
     accessorKey: "status",
     header: "Status",
     cell: ({ row }) => {
       const status = row.original.status
+      // Use 'default' as base for published/success to ensure type safety, 
+      // but override with className below
       const variant: BadgeProps["variant"] =
         status === "published"
-          ? "secondary"
+          ? "default" 
           : status === "archived"
-          ? "destructive"
+          ? "secondary"
           : "outline"
+      
       return (
-        <Badge variant={variant} className="capitalize">
+        <Badge 
+          variant={variant} 
+          className={cn(
+            "capitalize",
+            status === "published" && "bg-green-600 hover:bg-green-700 border-transparent",
+            status === "draft" && "bg-amber-100 text-amber-800 hover:bg-amber-200 border-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-800"
+          )}
+        >
           {status}
         </Badge>
       )
     },
   },
+  {
+    id: "stats",
+    header: "Stats",
+    cell: ({ row }) => (
+      <div className="flex flex-col gap-1 text-xs text-muted-foreground">
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-foreground">{row.original.questionCount} Qs</span>
+          <span>•</span>
+          <span>{row.original.totalScore} Pts</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <span>{row.original.durationMin} min</span>
+        </div>
+      </div>
+    ),
+  },
   {
     accessorKey: "difficulty",
     header: "Difficulty",
     cell: ({ row }) => {
       const diff = row.original.difficulty
       return (
-        <div className="flex items-center">
-          <span
-            className={cn(
-              "font-medium",
-              diff <= 2 ? "text-green-600" : diff === 3 ? "text-yellow-600" : "text-red-600"
-            )}
-          >
-            {diff === 1
-              ? "Easy"
-              : diff === 2
-              ? "Easy-Med"
-              : diff === 3
-              ? "Medium"
-              : diff === 4
-              ? "Med-Hard"
-              : "Hard"}
+        <div className="flex flex-col gap-1">
+          <div className="flex gap-0.5">
+            {[1, 2, 3, 4, 5].map((level) => (
+              <div
+                key={level}
+                className={cn(
+                  "h-1.5 w-3 rounded-full",
+                  level <= diff 
+                    ? diff <= 2 ? "bg-green-500" : diff === 3 ? "bg-yellow-500" : "bg-red-500"
+                    : "bg-muted"
+                )}
+              />
+            ))}
+          </div>
+          <span className="text-[10px] text-muted-foreground font-medium">
+            {diff === 1 ? "Easy" : diff === 2 ? "Easy-Med" : diff === 3 ? "Medium" : diff === 4 ? "Med-Hard" : "Hard"}
           </span>
-          <span className="ml-1 text-xs text-muted-foreground">({diff})</span>
         </div>
       )
     },
   },
   {
-    accessorKey: "durationMin",
-    header: "Duration",
-    cell: ({ row }) => <span className="text-muted-foreground text-xs">{row.original.durationMin} min</span>,
-  },
-  {
-    accessorKey: "totalScore",
-    header: "Total",
-    cell: ({ row }) => <span className="text-muted-foreground text-xs">{row.original.totalScore}</span>,
-  },
-  {
-    accessorKey: "scheduledAt",
-    header: "Scheduled",
-    cell: ({ row }) => (
-      <span className="text-muted-foreground text-xs whitespace-nowrap">
-        {row.original.scheduledAt ? formatDate(row.original.scheduledAt) : "-"}
-      </span>
-    ),
-  },
-  {
-    accessorKey: "createdAt",
-    header: "Created",
-    cell: ({ row }) => (
-      <span className="text-muted-foreground text-xs whitespace-nowrap">
-        {formatDate(row.original.createdAt)}
-      </span>
-    ),
+    id: "dates",
+    header: "Date",
+    cell: ({ row }) => {
+      const scheduled = row.original.scheduledAt
+      const created = row.original.createdAt
+      
+      return (
+        <div className="flex flex-col gap-0.5 text-xs">
+          {scheduled ? (
+             <>
+               <span className="font-medium text-blue-600 dark:text-blue-400">Scheduled</span>
+               <span className="text-muted-foreground">{formatDate(scheduled)}</span>
+             </>
+          ) : (
+             <>
+               <span className="text-muted-foreground">Created</span>
+               <span>{formatDate(created)}</span>
+             </>
+          )}
+        </div>
+      )
+    },
   },
   {
     id: "actions",