Module Update

src/modules/dashboard/components/recent-submissions.tsx

@@ -0,0 +1,105 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar";
+import { EmptyState } from "@/shared/components/ui/empty-state";
+import { Inbox } from "lucide-react";
+
+interface SubmissionItem {
+  id: string;
+  studentName: string;
+  studentAvatar?: string;
+  assignment: string;
+  submittedAt: string;
+  status: "submitted" | "late";
+}
+
+const MOCK_SUBMISSIONS: SubmissionItem[] = [
+  {
+    id: "1",
+    studentName: "Alice Johnson",
+    assignment: "React Component Composition",
+    submittedAt: "10 minutes ago",
+    status: "submitted",
+  },
+  {
+    id: "2",
+    studentName: "Bob Smith",
+    assignment: "Design System Analysis",
+    submittedAt: "1 hour ago",
+    status: "submitted",
+  },
+  {
+    id: "3",
+    studentName: "Charlie Brown",
+    assignment: "React Component Composition",
+    submittedAt: "2 hours ago",
+    status: "late",
+  },
+  {
+    id: "4",
+    studentName: "Diana Prince",
+    assignment: "CSS Grid Layout",
+    submittedAt: "Yesterday",
+    status: "submitted",
+  },
+  {
+    id: "5",
+    studentName: "Evan Wright",
+    assignment: "Design System Analysis",
+    submittedAt: "Yesterday",
+    status: "submitted",
+  },
+];
+
+export function RecentSubmissions() {
+  const hasSubmissions = MOCK_SUBMISSIONS.length > 0;
+
+  return (
+    <Card className="col-span-4 lg:col-span-4">
+      <CardHeader>
+        <CardTitle>Recent Submissions</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {!hasSubmissions ? (
+           <EmptyState
+             icon={Inbox}
+             title="No New Submissions"
+             description="All caught up! There are no new submissions to review."
+             className="border-none h-[300px]"
+           />
+        ) : (
+          <div className="space-y-6">
+            {MOCK_SUBMISSIONS.map((item) => (
+              <div key={item.id} className="flex items-center justify-between group">
+                <div className="flex items-center space-x-4">
+                  <Avatar className="h-9 w-9">
+                    <AvatarImage src={item.studentAvatar} alt={item.studentName} />
+                    <AvatarFallback>{item.studentName.charAt(0)}</AvatarFallback>
+                  </Avatar>
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium leading-none">
+                      {item.studentName}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      Submitted <span className="font-medium text-foreground">{item.assignment}</span>
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <div className="text-sm text-muted-foreground">
+                      {/* Using static date for demo to prevent hydration mismatch */}
+                      {item.submittedAt}
+                  </div>
+                  {item.status === "late" && (
+                      <span className="inline-flex items-center rounded-full border border-destructive px-2 py-0.5 text-xs font-semibold text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
+                          Late
+                      </span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}