feat(admin): add Courses Without BR page (#142)

admin/src/App.jsx

@@ -1,6 +1,7 @@
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Sidebar from "./components/Sidebar";
 import BranchRepresentatives from "./pages/BranchRepresentatives";
+import CoursesWithoutBR from "./pages/CoursesWithoutBR";
 import Students from "./pages/Students";
 import Courses from "./pages/Courses";
 import CourseLinking from "./pages/CourseLinking";
@@ -48,6 +49,14 @@ function App() {
                                     </PrivateRoute>
                                 }
                             />
+                            <Route
+                                path="/admin/courses-without-br"
+                                element={
+                                    <PrivateRoute>
+                                        <CoursesWithoutBR />
+                                    </PrivateRoute>
+                                }
+                            />
                             <Route
                                 path="*"
                                 element={

admin/src/apis/br.js

@@ -16,6 +16,22 @@ export const fetchBRs = async () => {
     }
 };
 
+// Fetch all courses that don't have a branch representative
+export const fetchCoursesWithoutBR = async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}api/br/coursesWithoutBR`, {
+            credentials: "include",
+            headers: {
+                Authorization: "Bearer admin-coursehub-cc23-golang",
+            },
+        });
+        return await response.json();
+    } catch (error) {
+        console.error("Error fetching courses without BR:", error);
+        throw error;
+    }
+};
+
 // Create a single BR
 export const createBR = async (email) => {
     try {

admin/src/components/Sidebar.jsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { Link, useLocation } from "react-router-dom";
-import { FaBook, FaUsers, FaLayerGroup, FaLink, FaUserGraduate } from "react-icons/fa";
+import { FaBook, FaUsers, FaLayerGroup, FaLink, FaUserGraduate, FaExclamationTriangle } from "react-icons/fa";
 import { adminLogout } from "@/apis/auth";
 
 const navItems = [
     { label: "Branch Representatives", to: "/admin/", icon: FaUsers },
     { label: "Students", to: "/admin/students", icon: FaUserGraduate },
     { label: "Courses", to: "/admin/courses", icon: FaBook },
     { label: "Course Linking", to: "/admin/course-linking", icon: FaLink },
+    { label: "Courses Without BR", to: "/admin/courses-without-br", icon: FaExclamationTriangle },
 ];
 
 const Sidebar = () => {

admin/src/components/coursesWithoutBRTable.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+const CoursesWithoutBRTable = ({ courses }) => {
+    return (
+        <div className="p-6 bg-white rounded-lg shadow-md">
+            <div className="flex items-center mb-6">
+                <h2 className="text-2xl font-bold text-gray-800">Courses Without BR</h2>
+            </div>
+            <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200">
+                    <thead className="bg-gray-100">
+                        <tr>
+                            <th className="py-3 px-4 text-left text-sm font-semibold text-gray-700">
+                                Code
+                            </th>
+                            <th className="py-3 px-4 text-left text-sm font-semibold text-gray-700">
+                                Name
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-100">
+                        {courses.map((course) => (
+                            <tr key={course._id || course.code} className="hover:bg-gray-50 transition">
+                                <td className="py-4 px-4 text-sm font-medium text-gray-900">
+                                    {course.code}
+                                </td>
+                                <td className="py-4 px-4 text-sm text-gray-600">{course.name}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+};
+
+export default CoursesWithoutBRTable;

admin/src/pages/CoursesWithoutBR.jsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from "react";
+import CoursesWithoutBRTable from "../components/coursesWithoutBRTable";
+import { fetchCoursesWithoutBR } from "@/apis/br";
+
+export default function CoursesWithoutBR() {
+    const [courses, setCourses] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    const loadCourses = async () => {
+        try {
+            setLoading(true);
+            const response = await fetchCoursesWithoutBR();
+            setCourses(response.coursesWithoutBR);
+            setLoading(false);
+        } catch (err) {
+            setError(err.message || "An error occurred while fetching courses without BR.");
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        loadCourses();
+    }, []);
+
+    return (
+        <div className="p-6 space-y-6">
+            <div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-gray-200/60 p-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+                <div>
+                    <h1 className="text-2xl font-bold text-gray-900">Courses Without BR</h1>
+                    <p className="text-gray-600 mt-1">
+                        Courses that don't have a branch representative assigned yet
+                    </p>
+                </div>
+            </div>
+
+            <div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-gray-200/60 p-6">
+                {loading && <p>Loading...</p>}
+                {error && <p className="text-red-500">{error}</p>}
+                {!loading && !error && <CoursesWithoutBRTable courses={courses} />}
+            </div>
+        </div>
+    );
+}

server/modules/br/br.controller.js

@@ -2,6 +2,8 @@ import BR from "./br.model.js";
 import User from "../user/user.model.js";
 import { fetchCoursesForBr } from "../auth/auth.controller.js";
 import logger from "../../utils/logger.js";
+import CourseModel from "../course/course.model.js";
+import { normalizeCourseCode } from "../../utils/course.js";
 
 const normalizeEmail = (email) => email?.toString().trim().toLowerCase();
 
@@ -142,5 +144,29 @@ const getBRs = async (req, res) => {
         res.status(500).json({ error: "Internal Server Error" });
     }
 };
+const getCoursesWithoutBR = async (req, res) => {
+    try {
+        const brRecords = await BR.find({});
+        const brEmails = brRecords.map((br) => br.email.toLowerCase());
+
+        const brUsers = await User.find({ email: { $in: brEmails } });
+
+        const coveredCodes = new Set(
+            brUsers.flatMap((user) =>
+                (user.courses || []).map((c) => normalizeCourseCode(c.code))
+            )
+        );
+
+        const allCourses = await CourseModel.find({});
+
+        const coursesWithoutBR = allCourses.filter(
+            (course) => !coveredCodes.has(normalizeCourseCode(course.code))
+        );
 
-export { updateBRs, createBR, getAll, deleteBR, getBRs };
+        res.status(200).json({ coursesWithoutBR });
+    } catch (error) {
+        logger.error(error);
+        res.status(500).json({ error: "Internal Server Error" });
+    }
+};
+export { updateBRs, createBR, getAll, deleteBR, getBRs, getCoursesWithoutBR };

server/modules/br/br.routes.js

@@ -1,12 +1,13 @@
 import express from "express";
-import { updateBRs, createBR, getAll, deleteBR, getBRs } from "./br.controller.js";
+import { updateBRs, createBR, getAll, deleteBR, getBRs, getCoursesWithoutBR  } from "./br.controller.js";
 
 const router = express.Router();
 
 router.post("/updateList", updateBRs);
 router.post("/create", createBR);
 router.get("/all", getAll);
 router.get("/allBRs", getBRs);
+router.get("/coursesWithoutBR", getCoursesWithoutBR);
 router.delete("/delete", deleteBR);
 
 export default router;