analytics page in instructor view

app/api/updateCourse/[id]/route.ts

@@ -5,173 +5,167 @@ import { authOptions } from "@/lib/auth";
 import prisma from "@/lib/prisma";
 
 const updateSchema = z.object({
-  title: z.string().min(2),
-  color: z.string().length(7),
-  days: z.array(z.string()).min(1),
-  startTime: z.string(),
-  endTime: z.string(),
+    title: z.string().min(2),
+    color: z.string().length(7),
+    days: z.array(z.string()).min(1),
+    startTime: z.string(),
+    endTime: z.string(),
 });
 
 function getCourseId(request: Request): number {
-  const url = new URL(request.url);
-  const id = url.pathname.split('/').pop();
-  const courseId = parseInt(id ?? '');
-  
-  if (isNaN(courseId)) {
-    throw new Error('Invalid course ID');
-  }
-  return courseId;
+    const url = new URL(request.url);
+    const id = url.pathname.split("/").pop();
+    const courseId = parseInt(id ?? "");
+
+    if (isNaN(courseId)) {
+        throw new Error("Invalid course ID");
+    }
+    return courseId;
 }
 
 // PUT - Update Course
 export async function PUT(request: Request) {
-  const session = await getServerSession(authOptions);
-  if (!session?.user) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-  }
-
-  try {
-    const courseId = getCourseId(request);
-
-    // Verify user has permission
-    const userCourse = await prisma.userCourse.findUnique({
-      where: {
-        userId_courseId: {
-          userId: session.user.id,
-          courseId,
-        },
-      },
-    });
-
-    if (!userCourse || userCourse.role !== "LECTURER") {
-      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
     }
 
-    // Validate request body
-    const body: unknown = await request.json();
-    const parsed = updateSchema.safeParse(body);
-    if (!parsed.success) {
-      return NextResponse.json(
-        { error: "Invalid input", details: parsed.error.flatten() },
-        { status: 400 }
-      );
-    }
+    try {
+        const courseId = getCourseId(request);
 
-    const { title, color, days, startTime, endTime } = parsed.data;
-
-    // Update course and schedule in transaction
-    const [updatedCourse] = await prisma.$transaction([
-      prisma.course.update({
-        where: { id: courseId },
-        data: { title, color },
-      }),
-      prisma.schedule.updateMany({
-        where: { courseId },
-        data: { dayOfWeek: days, startTime, endTime },
-      }),
-    ]);
-
-    return NextResponse.json(updatedCourse);
-  } catch (error) {
-    if (error instanceof Error && error.message === 'Invalid course ID') {
-      return NextResponse.json({ error: "Invalid course ID" }, { status: 400 });
+        // Verify user has permission
+        const userCourse = await prisma.userCourse.findUnique({
+            where: {
+                userId_courseId: {
+                    userId: session.user.id,
+                    courseId,
+                },
+            },
+        });
+
+        if (!userCourse || userCourse.role !== "LECTURER") {
+            return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+        }
+
+        // Validate request body
+        const body: unknown = await request.json();
+        const parsed = updateSchema.safeParse(body);
+        if (!parsed.success) {
+            return NextResponse.json(
+                { error: "Invalid input", details: parsed.error.flatten() },
+                { status: 400 },
+            );
+        }
+
+        const { title, color, days, startTime, endTime } = parsed.data;
+
+        // Update course and schedule in transaction
+        const [updatedCourse] = await prisma.$transaction([
+            prisma.course.update({
+                where: { id: courseId },
+                data: { title, color },
+            }),
+            prisma.schedule.updateMany({
+                where: { courseId },
+                data: { dayOfWeek: days, startTime, endTime },
+            }),
+        ]);
+
+        return NextResponse.json(updatedCourse);
+    } catch (error) {
+        if (error instanceof Error && error.message === "Invalid course ID") {
+            return NextResponse.json({ error: "Invalid course ID" }, { status: 400 });
+        }
+
+        console.error("Error updating course:", error);
+        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
     }
-
-    console.error("Error updating course:", error);
-    return NextResponse.json(
-      { error: "Internal Server Error" },
-      { status: 500 }
-    );
-  }
 }
 
 // DELETE - Delete Course
 export async function DELETE(request: Request) {
-  const session = await getServerSession(authOptions);
-  if (!session?.user) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-  }
-
-  try {
-    const courseId = getCourseId(request);
-
-    // Verify user has permission
-    const userCourse = await prisma.userCourse.findUnique({
-      where: {
-        userId_courseId: {
-          userId: session.user.id,
-          courseId,
-        },
-      },
-    });
-
-    if (!userCourse) {
-      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
     }
 
-    if (userCourse.role === "LECTURER") {
-      // Lecturer - delete all related records in proper order
-      await prisma.$transaction([
-        prisma.response.deleteMany({
-          where: {
-            question: {
-              session: {
-                courseId,
-              },
-            },
-          },
-        }),
-        prisma.option.deleteMany({
-          where: {
-            question: {
-              session: {
-                courseId,
-              },
-            },
-          },
-        }),
-        prisma.question.deleteMany({
-          where: {
-            session: {
-              courseId,
-            },
-          },
-        }),
-        prisma.courseSession.deleteMany({
-          where: { courseId },
-        }),
-        prisma.schedule.deleteMany({
-          where: { courseId },
-        }),
-        prisma.userCourse.deleteMany({
-          where: { courseId },
-        }),
-        prisma.course.delete({
-          where: { id: courseId },
-        }),
-      ]);
-    } else {
-      // Student - only remove their association
-      await prisma.userCourse.delete({
-        where: {
-          userId_courseId: {
-            userId: session.user.id,
-            courseId,
-          },
-        },
-      });
-    }
+    try {
+        const courseId = getCourseId(request);
 
-    return NextResponse.json({ success: true });
-  } catch (error) {
-    if (error instanceof Error && error.message === 'Invalid course ID') {
-      return NextResponse.json({ error: "Invalid course ID" }, { status: 400 });
+        // Verify user has permission
+        const userCourse = await prisma.userCourse.findUnique({
+            where: {
+                userId_courseId: {
+                    userId: session.user.id,
+                    courseId,
+                },
+            },
+        });
+
+        if (!userCourse) {
+            return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+        }
+
+        if (userCourse.role === "LECTURER") {
+            // Lecturer - delete all related records in proper order
+            await prisma.$transaction([
+                prisma.response.deleteMany({
+                    where: {
+                        question: {
+                            session: {
+                                courseId,
+                            },
+                        },
+                    },
+                }),
+                prisma.option.deleteMany({
+                    where: {
+                        question: {
+                            session: {
+                                courseId,
+                            },
+                        },
+                    },
+                }),
+                prisma.question.deleteMany({
+                    where: {
+                        session: {
+                            courseId,
+                        },
+                    },
+                }),
+                prisma.courseSession.deleteMany({
+                    where: { courseId },
+                }),
+                prisma.schedule.deleteMany({
+                    where: { courseId },
+                }),
+                prisma.userCourse.deleteMany({
+                    where: { courseId },
+                }),
+                prisma.course.delete({
+                    where: { id: courseId },
+                }),
+            ]);
+        } else {
+            // Student - only remove their association
+            await prisma.userCourse.delete({
+                where: {
+                    userId_courseId: {
+                        userId: session.user.id,
+                        courseId,
+                    },
+                },
+            });
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        if (error instanceof Error && error.message === "Invalid course ID") {
+            return NextResponse.json({ error: "Invalid course ID" }, { status: 400 });
+        }
+
+        console.error("Error deleting course:", error);
+        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
     }
-
-    console.error("Error deleting course:", error);
-    return NextResponse.json(
-      { error: "Internal Server Error" },
-      { status: 500 }
-    );
-  }
-}
+}

app/dashboard/course/[courseId]/(courseInfo)/analytics/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import React, { useState } from "react";
+import AttendanceLineChart from "@/components/ui/AttendanceLineChart";
+import PerformanceData from "@/components/ui/PerformanceData";
+import StudentTable from "@/components/ui/StudentTable";
+import { analyticsPages } from "@/lib/constants";
+
+export default function Page() {
+    const params = useParams();
+    const courseId = parseInt((params.courseId as string) ?? "0");
+    const [page, setPage] = useState<string>("Performance");
+
+    return (
+        <div className="w-full flex flex-col">
+            <div className="flex flex-row gap-2 bg-slate-200 h-fit w-fit p-1 rounded-md mb-4">
+                {analyticsPages.map((pageTitle: string) => (
+                    <button
+                        key={pageTitle}
+                        className={`p-2 h-fit px-4 rounded-md transition-colors duration-300 ease-in-out ${
+                            page === pageTitle
+                                ? "bg-white text-[#1441DB]"
+                                : "bg-slate-200 text-slate-500"
+                        }`}
+                        onClick={() => {
+                            setPage(pageTitle);
+                        }}
+                    >
+                        {pageTitle}
+                    </button>
+                ))}
+            </div>
+            {/* Performance and Attendance Data */}
+            <div className="flex flex-col md:flex-row justify-center md:justify-between items-center md:items-stretch bg-white overflow-auto h-96 max-h-96 w-full rounded-[20px] border border-[#A5A5A5]">
+                {page === "Performance" ? (
+                    <PerformanceData courseId={courseId} />
+                ) : (
+                    <AttendanceLineChart courseId={courseId} />
+                )}
+            </div>
+            <div className="flex flex-row justify-between mt-8 pl-1">
+                <h1 className="text-2xl font-normal">Student Data</h1>
+                <button className="h-10 w-40 px-3 bg-[hsl(var(--primary))] text-white rounded-lg focus:outline-none">
+                    Export CSV
+                </button>
+            </div>
+            {/* Student Data Table */}
+            <StudentTable courseId={courseId} />
+        </div>
+    );
+}