-
Welcome, {user.firstname || user.email}
-
Organisation: {user.organisation?.organisationname}
-
Role: {user.organisation.role}
-
Dashboard is currently in progress.
+
+
Dashboard
+
);
}
diff --git a/components/dashboard/AdminDashboard.tsx b/components/dashboard/AdminDashboard.tsx
new file mode 100644
index 0000000..23b9c2a
--- /dev/null
+++ b/components/dashboard/AdminDashboard.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+} from "recharts";
+
+interface Employee {
+ id: number;
+ firstname: string;
+ lastname: string;
+ totalCourses: number;
+ completedCourses: number;
+}
+
+interface Enrollment {
+ courseName: string;
+ enrolledCount: number;
+}
+
+interface AdminDashboardData {
+ welcome: string;
+ employees: Employee[];
+ enrollments: Enrollment[];
+}
+
+export default function AdminDashboard() {
+ const [data, setData] = useState
(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ fetch("/api/dashboard/admin-dashboard", { credentials: "include" })
+ .then(async (res) => {
+ if (!res.ok) throw new Error("Failed to load dashboard");
+ const json = await res.json();
+ const enrollments = (json.enrollments || []).map((e: any) => ({
+ courseName: e.coursename,
+ enrolledCount: Number(e.enrolledcount),
+ }));
+ const employees = (json.employees || []).map((emp: any) => ({
+ id: emp.id,
+ firstname: emp.firstname,
+ lastname: emp.lastname,
+ totalCourses: Number(emp.totalCourses),
+ completedCourses: Number(emp.completedCourses),
+ }));
+ setData({ ...json, employees, enrollments });
+ })
+ .catch((err) => setError(err.message || "Unknown error"))
+ .finally(() => setLoading(false));
+ }, []);
+
+ if (loading) {
+ return (
+
+ );
+ }
+ if (error || !data) {
+ return {error}
;
+ }
+
+ // Calculate quick stats
+ const totalEmployees = data.employees.length;
+ const totalCourses = data.enrollments.length;
+ const totalEnrollments = data.enrollments.reduce(
+ (a, e) => a + e.enrolledCount,
+ 0
+ );
+ const totalCompleted = data.employees.reduce(
+ (a, e) => a + e.completedCourses,
+ 0
+ );
+
+ return (
+
+
{data.welcome}
+
+
+
+
+
+
+
+
+
+
Course Enrollments
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Employee Course Progress
+
+
+
+
+ | Name |
+ Enrolled |
+ Completed |
+
+
+
+ {data.employees.map((emp) => (
+
+ |
+ {emp.firstname} {emp.lastname}
+ |
+ {emp.totalCourses} |
+ {emp.completedCourses} |
+
+ ))}
+
+
+
+
+
+ {error || "No data."}
+
+ );
+ }
+
+ const {
+ welcome,
+ currentCourse,
+ currentModule,
+ nextToLearn,
+ toRevise,
+ summaryStats,
+ globalStats,
+ } = data;
+
+ return (
+
+
+
+
+
+
+
+
+ Continue where you left off
+
+
+ {currentCourse && currentModule ? (
+ <>
+
+
+ {currentCourse.name}
+
+
+ Module: {currentModule.title}
+
+
+ Resume
+
+
+
+ ) : (
+
+ No module in progress.
+
+ )}
+
+
+
+
+
+ Next Steps For You
+
+
+
+
Learn
+ {nextToLearn && nextToLearn.length > 0 ? (
+ nextToLearn.map((mod) => (
+
+ {mod.title}
+
+ ))
+ ) : (
+
All caught up!
+ )}
+
+
+
Revise
+ {toRevise && toRevise.length > 0 ? (
+ toRevise.map((mod) => (
+
+ {mod.title}
+
+ ))
+ ) : (
+
Nothing to revise.
+ )}
+
+
+
+
+
+
+
+
+ At a glance
+
+
+
+
+ Modules Completed{" "}
+
+ (Current Course)
+
+
+
+
+ {summaryStats.completedModules}
+
+ /
+
+ {summaryStats.totalModules}
+
+
+
+ {currentCourse?.name}
+
+ {/* Progress bar */}
+
+
0
+ ? (summaryStats.completedModules /
+ summaryStats.totalModules) *
+ 100
+ : 0
+ }%`,
+ }}
+ >
+
+
+
+
+
+ Modules Completed{" "}
+ (All Courses)
+
+
+
+ {globalStats.completedModules}
+
+ /
+
+ {globalStats.totalModules}
+
+
+
+ across all courses
+
+
+
0
+ ? (globalStats.completedModules /
+ globalStats.totalModules) *
+ 100
+ : 0
+ }%`,
+ }}
+ >
+
+
+
+
+
+
+