Adjusted

src/modules/admin/pages/courses/units/ArchivedUnitsList.jsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House, Plus } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Spinner } from "@/components/ui/spinner";
+import ArchivedUnitsTable from "../../../components/courses/ArchivedUnitsTable";
+import { Badge } from "@/components/ui/badge";
+
+export default function ArchivedUnitsList() {
+    const navigate = useNavigate();
+    const { courseId } = useParams();
+    const { fetchCourse, course, loading } = useCourses();
+    const [initializing, setInitializing] = useState(true);
+
+    useEffect(() => {
+        (async () => {
+            await fetchCourse(courseId);
+            setInitializing(false);
+        })();
+    }, [courseId]);
+
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Courses", to: "/admin/courses" },
+        { label: course?.title ?? "...", to: `/admin/courses/${course?.course_id ?? course?.course_id}/units` },
+        { label: "Archived" }
+    ];
+
+    // Replace the loading check
+    if (initializing) {
+        return (
+            <div className="flex items-center justify-center h-64">
+                <Spinner className="h-6 w-6" />
+            </div>
+        );
+    }
+
+    return (
+        <section className="bg-muted/60 h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+                <div className="flex flex-col gap-2 my-6">
+                    <AppBreadcrumb items={items} />
+                </div>
+
+                <div className="w-full space-y-6">
+
+
+                    {/* ── Units ── */}
+                    <ArchivedUnitsTable courseId={courseId} />
+
+                </div>
+            </div>
+        </section>
+    );
+}

src/modules/admin/pages/courses/units/UnitsList.jsx

@@ -8,7 +8,7 @@ import { Spinner } from "@/components/ui/spinner";
 import UnitsTable from "../../../components/courses/UnitsTable";
 import { Badge } from "@/components/ui/badge";
 
-export default function CourseDetail() {
+export default function UnitsList() {
   const navigate = useNavigate();
   const { courseId } = useParams();
   const { fetchCourse, course, loading } = useCourses();